Skip to content

Latest commit

 

History

History
734 lines (447 loc) · 32.3 KB

CHANGELOG.md

File metadata and controls

734 lines (447 loc) · 32.3 KB

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

5.1.6 (2023-12-11)

Bug Fixes

  • select: port fixed positioning fixes back from v6.0.0 (feb9ec6), closes #1461

5.1.3 (2022-05-07)

Bug Fixes

  • @react-md/utils: fix spelling of DropzoneHandlers (6ba510b)

Documentation

  • fix typos throughout codebase (725d1a2)

Other Internal Changes

  • typos: fix additional typos throughout repo (ef20132)

5.1.2 (2022-04-02)

Other Internal Changes

  • @react-md/utils: Update keyboard movement (71d1343)

5.1.0 (2022-03-18)

Other Internal Changes

  • run lint-scripts --fix for consistent-type-imports (42d839d)

5.0.0 (2022-01-31)

Bug Fixes

  • @react-md/utils: useRefCache returns non-mutable object (b696b72)
  • @react-md/utils: Positioning logic for inner-left/inner-right and vertical anchors (a38abfb)

Features

  • @react-md/utils: export focusable query constants (f9f7955)
  • @react-md/utils: Implemented new keyboard focus behavior (77f0d01)

Other Internal Changes

  • chore!(utils): Remove touch utils and passive events checks (3597d32)
  • chore!(utils): useScrollListener no longer accepts an element or options (74a0274)
  • feat!(menu): Implemented new Menu API (c27bf55)
  • feat!(utils): Updated the HoverMode API (ac60bdb)
  • @react-md/utils: Export enableScrollLock and disableScrollLock utils (6a95734)

Breaking Changes

  • DEFAULT_HOVER_MODE_STICKY_EXIT_TIME has been renamed to DEFAULT_HOVER_MODE_EXIT_TIME.
  • Menu buttons will no longer open by pressing the ArrowUp or ArrowDown keys.
  • The DropdownMenu component no longer accepts a list of items and instead the children should be the MenuItem components.
  • The DropdownMenu component no longer supports the menuRenderer and itemRenderer props. Instead, there is built-in support for conditionally rendering as a Sheet component using the renderAsSheet prop.
  • The DropdownMenu component now requires a parent AppSizeListener because of the conditional Sheet rendering functionality. This might require updating your tests to either use the Configuration component from @react-md/layout (recommended) or adding the AppSizeListener to tests that include DropdownMenus.
  • The DropdownMenuItem component is no longer required for nested dropdown menus and is an "internal" component instead that shouldn't really be used.
  • The exitVisibilityDelay always defaults to DEFAULT_HOVER_MODE_EXIT_TIME.
  • The MenuItemSeparator now renders as an <li> instead of an <hr> or <div>.
  • The useContextMenu now returns an object instead of an ordered list.
  • The useHoverMode hook no longer accepts an HTMLElement generic and instead the event handlers will automatically infer the HTMLElement based on usage.
  • The useHoverMode hook no longer returns stickyHandlers and instead returns hoverHandlers that only include onMouseEnter and onMouseLeave. The handlers that are returned now include onClick, onMouseEnter, and onMouseLeave. This was kind of what the stickyHandlers was before. In addition, clicking an element no longer disabled the hover mode behavior.
  • The following typescript types have been removed: HoverModeOnlyOptions, HoverModeOnlyReturnValue
  • Using any of the MenuItem components requires the <MenuKeyboardFocusProvider> to be mounted as a parent component which might affect tests. This will not break anything if you are using the DropdownMenu or Menu components.

4.0.3 (2021-12-31)

Bug Fixes

  • @react-md/utils: useIsUserInteractionMode get mode via context (b5f93ae), closes #1322

Other Internal Changes

  • Update tests to use jest.mocked (4bb25fb)
  • Updated all packages' peerDependenciesMeta (60fcd71), closes #1319

4.0.1 (2021-11-27)

Bug Fixes

  • @react-md/utils: Update getPercentage to optionally not throw errors (ff8a1d6)

Other Internal Changes

  • Updated imports to use import type when possible (ba96bb6)

4.0.0 (2021-11-24)

Bug Fixes

  • @react-md/tooltip: cancel timer when element is clicked (5416554)
  • sass: Do not use legacy global functions (6159e16)

Features

  • Update to use new JSX Transform and latest eslint (8111cd3)
  • @react-md/utils: Export additional positioning types (b50a04c)

Other Internal Changes

  • always skip lib check (229cef1)
  • react-md: Remove prop-types package and usage (2637a6f)
  • stylelint: Updated to use stylelint (22d1598)

Breaking Changes

  • Minimum React version is now 16.14 instead of 16.8
  • react-md: There will no longer be run-time prop validation with the prop-types package.

3.1.0 (2021-09-10)

Bug Fixes

  • @react-md/utils: useDropzone fix around onDragLeave behavior (fdff9f2)
  • typescript: updated all array types to be readonly (8f71bcb)

Other Internal Changes

  • ran yarn format to include new files (48d3d7f)
  • typescript: support typescript@v4.4.2 (5a9dd72)

3.0.0 (2021-08-13)

Other Internal Changes

  • Added additional tests to bump test coverage (4d0371c)
  • @react-md/dev-utils: updated variables command to work with sass (5376be1)
  • @react-md/utils: remove ResizeObserver component and useResizeObserverV1 implementation (6a6b109)
  • @react-md/utils: removed InteractionModeListener alias (216c8ef)
  • react-md.dev: removed tilde from imports (6081e14)

Breaking Changes

  • @react-md/utils: Removed InteractionModeListener since it was an alias for UserInteractionModeListener
  • @react-md/utils: Removed ResizeObserver component and useResizeObserverV1 implementation

2.9.1 (2021-07-27)

Bug Fixes

  • @react-md/utils: useMediaQuery uses addEventListener/removeEventListener (b889a9e)

Other Internal Changes

  • install: slighly reduce install size by excluding tests in publish (9d01a44)

2.9.0 (2021-07-18)

Features

  • @react-md/utils: added useDropzone hook (bc07a1f)

2.8.4 (2021-06-10)

Bug Fixes

  • @react-md/utils: omit uses readonly prefix for key list (d3e1ee8)
  • @react-md/utils: Slightly better tooltip behavior after clicking somewhere on the page (4d3fc16)

Documentation

  • react-md.dev: Updated general documentation (9bc8a0d)

Other Internal Changes

  • ran prettier after upgrading to v2.3.0 (3ce236a)

2.8.3 (2021-05-18)

Documentation

  • react-md.dev: updated tsdoc to work with typedoc (cf54c35)

2.8.2 (2021-04-23)

Bug Fixes

  • @react-md/utils: Cancel hover mode timers on click (892dc24)

2.8.0 (2021-04-22)

Bug Fixes

  • @react-md/utils: Click Behavior for Hover Mode (d0fda80)
  • @react-md/utils: focusElementsWithin correctly focuses container element as a fallback (cff46c4)

Features

  • @react-md/utils: Added isFocusable util (1d92472)
  • @react-md/utils: implemented a reusable hover mode API (4f5ce2f)
  • typescript: bump typescript version to v4.2.3 (b094b36)

Documentation

  • react-md.dev: Added Tooltip Hook Example (9783c44)
  • react-md.dev: Added Sticky Hover Mode Example (1a94a31)

Other Internal Changes

  • @react-md/utils: added missing since annotation to useOnUnmount (c758982)
  • tsconfig: separate tsconfig by package instead of a single root (b278230)

2.7.1 (2021-03-23)

Bug Fixes

  • @react-md/utils: useTabFocusWrap when only one element (25178d7)

Other Internal Changes

  • @react-md/utils: Added a simple useOnUnmount hook (96f3cc0)
  • ts: stopped using FC type (c5daa47)

2.7.0 (2021-02-28)

Features

  • @react-md/utils: added a low level RadioGroup widget for the radiogroup role (76d6d27)

Documentation

  • tsdoc: fixed remaining tsdoc syntax warnings (946f4dd)
  • tsdoc: fixed some tsdoc annotations and styling (0449b86)
  • tsdoc: updated @since annotations (c62027e)

Other Internal Changes

  • updated test coverage to not include conditional component PropTypes (24e5df1)
  • @react-md/utils: added tryToSubmitRelatedForm util to help with additional a11y (0566e14)
  • @react-md/utils: updated loop util to allow for a specific min value (51bcf92)

2.6.0 (2021-02-13)

Other Internal Changes

  • @react-md/utils: Added better dev display names for UserInteractionMode context parts (01f6e3d)
  • @react-md/utils: refactored UserInteractionMode hooks and components (af72791)

2.5.5 (2021-01-30)

Bug Fixes

2.5.0 (2020-12-15)

Bug Fixes

Features

2.4.2 (2020-10-23)

Note: Version bump only for package @react-md/utils

2.4.1 (2020-10-17)

Note: Version bump only for package @react-md/utils

2.4.0 (2020-10-17)

Features

2.3.1 (2020-09-15)

Note: Version bump only for package @react-md/utils

2.3.0 (2020-09-10)

Features

2.2.2 (2020-09-02)

Note: Version bump only for package @react-md/utils

2.2.1 (2020-09-02)

Note: Version bump only for package @react-md/utils

2.1.0 (2020-07-12)

Bug Fixes

  • Booleans in dist/scssVariables (f6d43a3)
  • Scroll active element into view while focusing (a9a0902)

Features

  • Added new mixin for optional css-modules (28ba828)

2.0.2 (2020-06-30)

Bug Fixes

  • LICENSE: Removed the time range from license since it was incorrect (50c9021)
  • Added sideEffects field to package.json (31820b9)
  • sideEffects formatting (78a7b6b)

v2.0.1

No changes.

v2.0.0

This package is pretty new for react-md, but might be seen as a replacement for the old grid, helpers, and utils.

New Behavior and Features

  • automatically update styles for right to left languages (opt-out)
  • static sizing across all screen sizes with opt-in support for an auto-dense theme if desired
  • better keyboard focus behavior for temporary elements so that keyboard focus is not lost after traversing between multiple menus, dialogs, sheets, etc
  • better keyboard movement with aria-activedescendant behavior or focus behavior
  • built-in keyboard search for DOM elements that require it
  • built-in support for determining the current app size based on media queries with both mixins and hooks
  • lots of additional utility mixins for common styling patterns
  • the default grid system now uses css grid instead of flexbox for layout
  • a second grid system that creates dynamic number of columns based on a max width provided
  • the grid system no longer uses its own breakpoints and uses the phone, tablet, and desktop breakpoints
  • simplified css reset touching as few html tags as possible: html and body only. still applies box-sizing: border-box to all elements though
  • "feature detection" utility mixin to only include styles for installed scoped react-md packages with react-md-utils

Breaking Changes

  • removed react-md-helpers-everything
  • removed .md-full-width, .md-inline-block, and .md-block-centered helper classes
  • changed the media query behavior and device detection
  • grid system now uses grid instead of flexbox and no longer supports a custom max-width through the scss variables with a container
  • FocusContainer renamed all of the props
  • renamed/removed all remaining scss variables, functions, mixins, and placeholders

New Components, Hooks, and Utils

This package contains many useful utilities for internal use, but also exports some components and hooks that might be useful externally.

  • AppSizeListener and useAppSize are used to determine the current app size based on media queries. Multiple components within react-md rely on this behavior
  • ResizeListener is a component that can be used to trigger a callback on throttled window resize events and a useResizeListener hook version
  • ResizeObserver is a component that is used to use the ResizeObserverAPI to track a specific element resizing as well as a useResizeObserver hook version
  • PhoneOnly, MobileOnly, TabletOnly, and DesktopOnly components can be used to conditionally render content only when one of the media types are active
  • UserInteractionModeListener, useUserInterationMode, and useIsUserInteractionMode are used to determine how the current user is interacting with your app with either: touch, mouse, or keyboard
  • Grid and GridCell can be used to create a CSS Grid layout using the material design grid layout or a static number of columns
  • GridList and GridListCell can be used to create a flex based layout where each cell grows up to the specified max width and tries to fit as many cells as possible based on the GridList's width
  • useTabFocusWrap hook for containing focus within an element if the FocusContainer does not suit your needs
  • useFocusOnMount hook if you'd like to focus a specific element when a component mounts if the FocusContainer does not suit your needs
  • usePreviousFocus hook if you'd like to focus the previously focused element in the DOM before this component mounted once this component unmounts
  • useScrollLock hook to temporarily disable scrollbars within the app for temporary elements
  • useCloseOnOutsideClick hook if a callback should be fired once an element outside of a container element has been clicked
Honorable Mentions
  • isContrastCompliant - utility function to check if two hex colors meet a minimal contrast ratio compliance for accessibility
  • bem - if you like using BEM for class name convention, helps dynamically apply classes as needed
  • caseInsensitiveFilter and fuzzyFilter utils for filtering a list of data
  • findIgnoreCase - utility to find the first match within a list
  • useKeyboardSearch - accessibility hook to allow a list of to be keyboard searchable within the DOM
  • useKeyboardFocusMovement and useActiveDescendantMovement for handling custom keyboard movement of DOM elements
  • getFixedPosition - utility to generate styles for an element so it is fixed within the viewport. However, you most likely are looking for the useFixedPositioning hook in @react-md/transition

New SCSS Variables, Functions, and Mixins

  • $rmd-utils-phone-max-width: 47.9375em !default - the max width to still be considered a phone while in portrait or landscape mode
  • $rmd-utils-tablet-max-width: 64em !default - the max width to still be considered a tablet while in portrait or landscape mode
  • $rmd-utils-large-desktop-min-width: 80em !default - a new min-width for a large desktop screen (normally for 1440p or 4k monitors)
  • $rmd-grid-padding: 1rem !default - the static padding for a grid
  • $rmd-grid-cell-margin: 1rem !default - the static amount of margin for each grid cell
  • $rmd-grid-golumns: null !default - a new variable that allows you to configure a static number of columns across all screen sizes instead of using the 4, 8, and 12 grid system from material design
  • $rmd-grid-large-desktop-columns: $rmd-grid-desktop-columns !default - a new variable for if you want to configure the number of columns in the grid system for large desktop screens
  • $rmd-grid-list-padding: 0.5rem !default - the amount of to use for the flex-based grid approach
  • $rmd-grid-list-cell-margin: 0.5rem !default - the amount of margin to use for the flex-based grid approach for each cell
  • $rmd-grid-list-cell-max-size: 0.375rem !default - the default max-size that each cell within the flex-based grid apporach can be before the DOM has loaded
  • @function rmd-utils-negate-var - a utility function that can be used to negate a css variable
  • @mixin rmd-utils-map-to-styles - a utility mixin to convert a Map into styles
  • @mixin rmd-utils-rtl - a utility mixin to apply styles only for right to left languages
  • @mixin rmd-utils-rtl-auto - a utility mixin that can automatically swap some styles to an inversed value for right to left languages
  • @mixin rmd-utils-block-centered - a utility mixin to style an element centered horizontally within a non-flex container
  • @mixin rmd-utils-absolute-centered - a utility mixin to style an element centered horizontally and vertically using position: absolute
  • @mixin rmd-utils-scroll - a utility mixin to allow scrolling with fixing scroll momentum on iOS
  • @mixin rmd-utils-hide-focus-outline - utility mixin to hide the default browser focus styles for an element and fixing the firefox custom focus rings
  • @mixin rmd-utils-full-screen - a utility mixin for making an element full screen or the same size as the parent element
  • @mixin rmd-utils-pseudo-element - a utility mixin to create a pseudo element that won't be interactable. generally used for focus behavior
  • @mixin rmd-utils-sr-only-focusable - a utility mixin to make an element visible only while being focused by a screen reader
  • @mixin rmd-utils-sr-only - a utility mixin to make an element visible for screen readers only
  • @mixin rmd-utils-hide-scrollbar - a utility mixin to hide the scrollbar for an element while still allowing it to be scrollable
  • @mixin rmd-utils-phone-media - a utility mixin to apply styles only for phone devices
  • @mixin rmd-utils-tablet-media - a utility mixin to apply styles when the tablet min-width is reached
  • @mixin rmd-utils-tablet-only-media - a utility mixin to apply styles only for tablets based on min and max width
  • @mixin rmd-utils-desktop-media - a utility mixin to apply styles when the desktop min width is reached
  • @mixin rmd-utils-large-desktop-media - a utility mixin to apply styles when the large desktop min width is reached
  • @mixin rmd-utils-touch-only - a utility mixin to apply styles only while the app is being interacted by touch
  • @mixin rmd-utils-keyboard-only - a utility mixin to apply styles only while the app is being interacted with a keyboard
  • @mixin rmd-utils-mouse-only - a utility mixin to apply styles only while the app is being interacted with a mouse

Renamed SCSS Variables and Values

  • renamed $md-tablet-min-width to $rmd-utils-tablet-min-width and changed the default value from 768px to 48em
  • renamed $md-desktop-min-width to $rmd-desktop-min-width and changed the default value from 1025px to 64.0625rem
  • renamed $md-grid-phone-columns to $rmd-grid-phone-columns
  • renamed $md-grid-tablet-columns to $rmd-grid-tablet-columns
  • renamed $md-grid-desktop-columns to $rmd-grid-desktop-columns

Removed SCSS Variables, Functions, and Mixins

  • removed $md-mobile-min-width since the media queries will use max-width for phones instead
  • removed $md-portrait-media and $md-landscape-media since they are no longer used
  • removed $md-mobile-media, $md-mobile-portrait-media and $md-mobile-landscape-media since the rmd-utils-mobile-media mixin should be used instead
  • removed $md-tablet-media, $md-tablet-portrait-media, and $md-tablet-landscape-media since the rmd-utils-tablet-media and rmd-utils-tablet-only-media mixins should be used instead
  • removed $md-media-included since the rmd-utils-dense mixin should be used instead if you want to automatically create a dense theme on desktops
  • removed $md-tablet-breakpoint and $md-desktop-breakpoint since the grid uses the same breakpoints as all other components now
  • removed $md-grid-phone-margin, $md-grid-phone-gutter, $md-grid-tablet-margin, $md-grid-tablet-gutter, $md-grid-desktop-margin, and $md-grid-desktop-gutter since there is now a static size across all app sizes
  • removed all the old grid mixins: react-md-grid, react-md-make-grid-container, react-md-grid-mobile, react-md-grid-tablet, react-md-grid-desktop, react-md-make-custom-grid, react-md-make-grid, react-md-make-cells, react-md-grid-media, react-md-cell-size, react-md-grid-full, and react-md-cell-offset since the new grid system doesn't need styling in this manner