@react-md/core 6.3.4 → 6.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/CoreProviders.d.ts +1 -0
- package/dist/CoreProviders.js.map +1 -1
- package/dist/_base.scss +3 -0
- package/dist/_core.scss +1 -0
- package/dist/_utils.scss +15 -7
- package/dist/app-bar/AppBar.js.map +1 -1
- package/dist/app-bar/AppBarTitle.js.map +1 -1
- package/dist/autocomplete/AutocompleteListboxChildren.js.map +1 -1
- package/dist/autocomplete/types.js.map +1 -1
- package/dist/autocomplete/utils.js.map +1 -1
- package/dist/avatar/Avatar.js.map +1 -1
- package/dist/button/Button.js.map +1 -1
- package/dist/button/FloatingActionButton.js.map +1 -1
- package/dist/card/Card.js.map +1 -1
- package/dist/card/CardContent.js.map +1 -1
- package/dist/card/ClickableCard.js.map +1 -1
- package/dist/chip/Chip.js.map +1 -1
- package/dist/datetime/NativeDateField.js.map +1 -1
- package/dist/datetime/NativeTimeField.js.map +1 -1
- package/dist/datetime/useDateField.js.map +1 -1
- package/dist/datetime/useTimeField.js.map +1 -1
- package/dist/dialog/Dialog.js.map +1 -1
- package/dist/dialog/DialogContainer.js.map +1 -1
- package/dist/dialog/DialogContent.js.map +1 -1
- package/dist/dialog/DialogFooter.js.map +1 -1
- package/dist/divider/Divider.js.map +1 -1
- package/dist/draggable/useDraggable.js.map +1 -1
- package/dist/draggable/utils.js.map +1 -1
- package/dist/expansion-panel/ExpansionPanelHeader.js.map +1 -1
- package/dist/files/FileInput.js.map +1 -1
- package/dist/files/useFileUpload.js.map +1 -1
- package/dist/files/validation.js.map +1 -1
- package/dist/focus/useFocusContainer.js.map +1 -1
- package/dist/form/Fieldset.d.ts +19 -0
- package/dist/form/Fieldset.js +22 -2
- package/dist/form/Fieldset.js.map +1 -1
- package/dist/form/FormMessageContainer.js.map +1 -1
- package/dist/form/FormMessageCounter.js.map +1 -1
- package/dist/form/InputToggle.js.map +1 -1
- package/dist/form/Legend.d.ts +27 -5
- package/dist/form/Legend.js +39 -6
- package/dist/form/Legend.js.map +1 -1
- package/dist/form/Listbox.js.map +1 -1
- package/dist/form/ListboxProvider.js.map +1 -1
- package/dist/form/NativeSelect.js.map +1 -1
- package/dist/form/Password.js.map +1 -1
- package/dist/form/ResizingTextAreaWrapper.js.map +1 -1
- package/dist/form/Select.js.map +1 -1
- package/dist/form/Slider.js.map +1 -1
- package/dist/form/SliderContainer.js.map +1 -1
- package/dist/form/SliderThumb.js.map +1 -1
- package/dist/form/SliderTrack.js.map +1 -1
- package/dist/form/SliderValueMarks.js.map +1 -1
- package/dist/form/Switch.js.map +1 -1
- package/dist/form/TextArea.js.map +1 -1
- package/dist/form/TextField.js.map +1 -1
- package/dist/form/TextFieldContainer.js.map +1 -1
- package/dist/form/_fieldset.scss +7 -0
- package/dist/form/_legend.scss +68 -0
- package/dist/form/_text-field.scss +39 -4
- package/dist/form/fieldsetStyles.d.ts +6 -1
- package/dist/form/fieldsetStyles.js +3 -2
- package/dist/form/fieldsetStyles.js.map +1 -1
- package/dist/form/inputToggleStyles.js.map +1 -1
- package/dist/form/labelStyles.d.ts +1 -1
- package/dist/form/labelStyles.js +1 -1
- package/dist/form/labelStyles.js.map +1 -1
- package/dist/form/legendStyles.d.ts +83 -0
- package/dist/form/legendStyles.js +25 -0
- package/dist/form/legendStyles.js.map +1 -0
- package/dist/form/selectUtils.js.map +1 -1
- package/dist/form/textFieldContainerStyles.js.map +1 -1
- package/dist/form/types.d.ts +28 -6
- package/dist/form/types.js.map +1 -1
- package/dist/form/useCheckboxGroup.js.map +1 -1
- package/dist/form/useCombobox.js.map +1 -1
- package/dist/form/useNumberField.js +16 -19
- package/dist/form/useNumberField.js.map +1 -1
- package/dist/form/useRangeSlider.js.map +1 -1
- package/dist/form/useSlider.js.map +1 -1
- package/dist/form/useTextField.js.map +1 -1
- package/dist/hoverMode/useHoverMode.js.map +1 -1
- package/dist/icon/FontIcon.js.map +1 -1
- package/dist/icon/IconRotator.js.map +1 -1
- package/dist/icon/MaterialIcon.js.map +1 -1
- package/dist/icon/MaterialSymbol.js.map +1 -1
- package/dist/icon/SVGIcon.js.map +1 -1
- package/dist/icon/config.d.ts +0 -1
- package/dist/icon/config.js +10 -7
- package/dist/icon/config.js.map +1 -1
- package/dist/icon/materialConfig.js.map +1 -1
- package/dist/icon/styles.js.map +1 -1
- package/dist/interaction/UserInteractionModeProvider.js +6 -4
- package/dist/interaction/UserInteractionModeProvider.js.map +1 -1
- package/dist/interaction/types.js.map +1 -1
- package/dist/interaction/useElementInteraction.js.map +1 -1
- package/dist/layout/LayoutAppBar.d.ts +6 -6
- package/dist/layout/LayoutAppBar.js +6 -6
- package/dist/layout/LayoutAppBar.js.map +1 -1
- package/dist/layout/LayoutNav.js.map +1 -1
- package/dist/layout/LayoutWindowSplitter.js.map +1 -1
- package/dist/layout/Main.js.map +1 -1
- package/dist/layout/useExpandableLayout.js +43 -0
- package/dist/layout/useExpandableLayout.js.map +1 -1
- package/dist/layout/useHorizontalLayoutTransition.js.map +1 -1
- package/dist/layout/useLayoutTree.js.map +1 -1
- package/dist/layout/useLayoutWindowSplitter.js.map +1 -1
- package/dist/layout/useResizableLayout.js.map +1 -1
- package/dist/link/Link.js.map +1 -1
- package/dist/link/SkipToMainContent.js +19 -21
- package/dist/link/SkipToMainContent.js.map +1 -1
- package/dist/list/List.js.map +1 -1
- package/dist/list/ListItem.js.map +1 -1
- package/dist/list/ListItemAddon.js.map +1 -1
- package/dist/list/ListItemLink.js.map +1 -1
- package/dist/list/ListSubheader.js.map +1 -1
- package/dist/list/getListItemHeight.js.map +1 -1
- package/dist/list/listItemStyles.js.map +1 -1
- package/dist/list/types.js.map +1 -1
- package/dist/media-queries/AppSizeProvider.d.ts +2 -0
- package/dist/media-queries/AppSizeProvider.js +3 -2
- package/dist/media-queries/AppSizeProvider.js.map +1 -1
- package/dist/media-queries/appSize.d.ts +3 -0
- package/dist/media-queries/appSize.js +3 -1
- package/dist/media-queries/appSize.js.map +1 -1
- package/dist/media-queries/config.d.ts +11 -0
- package/dist/media-queries/config.js +26 -0
- package/dist/media-queries/config.js.map +1 -0
- package/dist/menu/DropdownMenu.js.map +1 -1
- package/dist/menu/Menu.js.map +1 -1
- package/dist/menu/MenuItemButton.js.map +1 -1
- package/dist/menu/MenuItemFileInput.js.map +1 -1
- package/dist/menu/MenuItemInputToggle.js.map +1 -1
- package/dist/menu/MenuItemSeparator.js.map +1 -1
- package/dist/menu/MenuVisibilityProvider.js.map +1 -1
- package/dist/menu/MenuWidget.js.map +1 -1
- package/dist/menu/useContextMenu.js.map +1 -1
- package/dist/movement/types.d.ts +28 -3
- package/dist/movement/types.js.map +1 -1
- package/dist/movement/useKeyboardMovementProvider.js +96 -47
- package/dist/movement/useKeyboardMovementProvider.js.map +1 -1
- package/dist/navigation/CollapsibleNavGroup.js.map +1 -1
- package/dist/navigation/NavItem.js.map +1 -1
- package/dist/navigation/NavItemButton.js.map +1 -1
- package/dist/navigation/NavItemLink.js.map +1 -1
- package/dist/navigation/getTableOfContentsHeadings.js.map +1 -1
- package/dist/navigation/types.js.map +1 -1
- package/dist/overlay/Overlay.js.map +1 -1
- package/dist/positioning/createHorizontalPosition.js.map +1 -1
- package/dist/positioning/createVerticalPosition.js.map +1 -1
- package/dist/positioning/useFixedPositioning.js.map +1 -1
- package/dist/progress/CircularProgress.js.map +1 -1
- package/dist/progress/LinearProgress.js.map +1 -1
- package/dist/progress/linearProgressStyles.js.map +1 -1
- package/dist/responsive-item/ResponsiveItem.js.map +1 -1
- package/dist/responsive-item/ResponsiveItemOverlay.js.map +1 -1
- package/dist/searching/caseInsensitive.js.map +1 -1
- package/dist/segmented-button/SegmentedButton.js.map +1 -1
- package/dist/segmented-button/SegmentedButtonContainer.js.map +1 -1
- package/dist/segmented-button/segmentedButtonStyles.js.map +1 -1
- package/dist/sheet/Sheet.js.map +1 -1
- package/dist/snackbar/Toast.js.map +1 -1
- package/dist/spinbutton/SpinButton.d.ts +16 -0
- package/dist/spinbutton/SpinButton.js +55 -0
- package/dist/spinbutton/SpinButton.js.map +1 -0
- package/dist/spinbutton/SpinButtonGroupProvider.d.ts +17 -0
- package/dist/spinbutton/SpinButtonGroupProvider.js +19 -0
- package/dist/spinbutton/SpinButtonGroupProvider.js.map +1 -0
- package/dist/spinbutton/defaults.d.ts +9 -0
- package/dist/spinbutton/defaults.js +25 -0
- package/dist/spinbutton/defaults.js.map +1 -0
- package/dist/spinbutton/types.d.ts +324 -0
- package/dist/spinbutton/types.js +5 -0
- package/dist/spinbutton/types.js.map +1 -0
- package/dist/spinbutton/useSpinButton.d.ts +5 -0
- package/dist/spinbutton/useSpinButton.js +260 -0
- package/dist/spinbutton/useSpinButton.js.map +1 -0
- package/dist/spinbutton/useSpinButtonGroupProvider.d.ts +27 -0
- package/dist/spinbutton/useSpinButtonGroupProvider.js +49 -0
- package/dist/spinbutton/useSpinButtonGroupProvider.js.map +1 -0
- package/dist/spinbutton/utils/deselectNode.d.ts +5 -0
- package/dist/spinbutton/utils/deselectNode.js +17 -0
- package/dist/spinbutton/utils/deselectNode.js.map +1 -0
- package/dist/spinbutton/utils/resolveInputEvent.d.ts +30 -0
- package/dist/spinbutton/utils/resolveInputEvent.js +53 -0
- package/dist/spinbutton/utils/resolveInputEvent.js.map +1 -0
- package/dist/spinbutton/utils/selectNode.d.ts +5 -0
- package/dist/spinbutton/utils/selectNode.js +15 -0
- package/dist/spinbutton/utils/selectNode.js.map +1 -0
- package/dist/table/StickyTableSection.js.map +1 -1
- package/dist/table/Table.js.map +1 -1
- package/dist/table/TableBody.js.map +1 -1
- package/dist/table/TableCellContent.js.map +1 -1
- package/dist/table/TableCheckbox.js.map +1 -1
- package/dist/table/TableFooter.js.map +1 -1
- package/dist/table/TableHeader.js.map +1 -1
- package/dist/table/TableRadio.js.map +1 -1
- package/dist/table/TableRow.js.map +1 -1
- package/dist/table/useStickyTableSection.js.map +1 -1
- package/dist/tabs/SimpleTabPanel.js.map +1 -1
- package/dist/tabs/SimpleTabPanels.js.map +1 -1
- package/dist/tabs/Tab.js.map +1 -1
- package/dist/tabs/TabList.js.map +1 -1
- package/dist/tabs/TabListScrollButton.js.map +1 -1
- package/dist/tabs/useMaxTabPanelHeight.js.map +1 -1
- package/dist/test-utils/data-testid.js.map +1 -1
- package/dist/test-utils/mocks/match-media.js +5 -5
- package/dist/test-utils/mocks/match-media.js.map +1 -1
- package/dist/test-utils/vitest/timers.d.ts +1 -1
- package/dist/test-utils/vitest/timers.js +1 -1
- package/dist/test-utils/vitest/timers.js.map +1 -1
- package/dist/tooltip/Tooltip.js.map +1 -1
- package/dist/tooltip/TooltipHoverModeProvider.js.map +1 -1
- package/dist/tooltip/useTooltip.js.map +1 -1
- package/dist/transition/CSSTransition.js.map +1 -1
- package/dist/transition/Collapse.js.map +1 -1
- package/dist/transition/CrossFade.js.map +1 -1
- package/dist/transition/ScaleTransition.js.map +1 -1
- package/dist/transition/SkeletonPlaceholder.js.map +1 -1
- package/dist/transition/Slide.js.map +1 -1
- package/dist/transition/SlideContainer.js.map +1 -1
- package/dist/transition/types.js.map +1 -1
- package/dist/transition/useCollapseTransition.js.map +1 -1
- package/dist/transition/useCrossFadeTransition.js.map +1 -1
- package/dist/transition/useMaxWidthTransition.js.map +1 -1
- package/dist/transition/useScaleTransition.js.map +1 -1
- package/dist/transition/useSkeletonPlaceholder.js.map +1 -1
- package/dist/tree/Tree.js.map +1 -1
- package/dist/tree/TreeItem.js.map +1 -1
- package/dist/tree/TreeProvider.js.map +1 -1
- package/dist/tree/styles.js.map +1 -1
- package/dist/tree/types.js.map +1 -1
- package/dist/tree/useTreeMovement.js.map +1 -1
- package/dist/typography/HighlightTextMark.js.map +1 -1
- package/dist/typography/Mark.js.map +1 -1
- package/dist/typography/TextContainer.js.map +1 -1
- package/dist/typography/Typography.js.map +1 -1
- package/dist/typography/_typography.scss +0 -1
- package/dist/useElementSize.js.map +1 -1
- package/dist/useIntersectionObserver.js.map +1 -1
- package/dist/useMutationObserver.js.map +1 -1
- package/dist/useWindowSize.js.map +1 -1
- package/dist/utils/getNumberOfDigits.d.ts +7 -0
- package/dist/utils/getNumberOfDigits.js +11 -0
- package/dist/utils/getNumberOfDigits.js.map +1 -0
- package/dist/utils/nearest.js +2 -1
- package/dist/utils/nearest.js.map +1 -1
- package/dist/utils/useDevEffect.d.ts +7 -0
- package/dist/utils/useDevEffect.js +8 -0
- package/dist/utils/useDevEffect.js.map +1 -0
- package/dist/window-splitter/WindowSplitter.js +3 -2
- package/dist/window-splitter/WindowSplitter.js.map +1 -1
- package/dist/window-splitter/_window-splitter.scss +60 -12
- package/dist/window-splitter/styles.d.ts +9 -0
- package/dist/window-splitter/styles.js +3 -2
- package/dist/window-splitter/styles.js.map +1 -1
- package/dist/window-splitter/useWindowSplitter.js.map +1 -1
- package/package.json +37 -29
- package/src/CoreProviders.tsx +1 -0
- package/src/app-bar/AppBar.tsx +1 -2
- package/src/app-bar/AppBarTitle.tsx +1 -2
- package/src/autocomplete/AutocompleteListboxChildren.tsx +3 -1
- package/src/autocomplete/types.ts +24 -19
- package/src/autocomplete/utils.ts +9 -6
- package/src/avatar/Avatar.tsx +2 -1
- package/src/button/Button.tsx +2 -1
- package/src/button/FloatingActionButton.tsx +2 -1
- package/src/card/Card.tsx +2 -1
- package/src/card/CardContent.tsx +1 -2
- package/src/card/ClickableCard.tsx +1 -2
- package/src/chip/Chip.tsx +2 -1
- package/src/datetime/NativeDateField.tsx +2 -1
- package/src/datetime/NativeTimeField.tsx +2 -1
- package/src/datetime/useDateField.ts +13 -8
- package/src/datetime/useTimeField.ts +13 -8
- package/src/dialog/Dialog.tsx +2 -1
- package/src/dialog/DialogContainer.tsx +1 -2
- package/src/dialog/DialogContent.tsx +1 -2
- package/src/dialog/DialogFooter.tsx +1 -2
- package/src/divider/Divider.tsx +1 -2
- package/src/draggable/useDraggable.ts +4 -4
- package/src/draggable/utils.ts +4 -2
- package/src/expansion-panel/ExpansionPanelHeader.tsx +1 -2
- package/src/files/FileInput.tsx +2 -1
- package/src/files/useFileUpload.ts +6 -6
- package/src/files/validation.ts +1 -2
- package/src/focus/useFocusContainer.ts +4 -4
- package/src/form/Fieldset.tsx +25 -3
- package/src/form/FormMessageContainer.tsx +1 -2
- package/src/form/FormMessageCounter.tsx +1 -2
- package/src/form/InputToggle.tsx +3 -3
- package/src/form/Legend.tsx +55 -10
- package/src/form/Listbox.tsx +1 -2
- package/src/form/ListboxProvider.ts +3 -2
- package/src/form/NativeSelect.tsx +2 -1
- package/src/form/Password.tsx +4 -2
- package/src/form/ResizingTextAreaWrapper.tsx +1 -2
- package/src/form/Select.tsx +2 -1
- package/src/form/Slider.tsx +2 -1
- package/src/form/SliderContainer.tsx +1 -2
- package/src/form/SliderThumb.tsx +6 -3
- package/src/form/SliderTrack.tsx +2 -1
- package/src/form/SliderValueMarks.tsx +1 -2
- package/src/form/Switch.tsx +2 -1
- package/src/form/TextArea.tsx +1 -2
- package/src/form/TextField.tsx +2 -1
- package/src/form/TextFieldContainer.tsx +1 -2
- package/src/form/fieldsetStyles.ts +18 -3
- package/src/form/inputToggleStyles.ts +4 -2
- package/src/form/labelStyles.ts +1 -1
- package/src/form/legendStyles.ts +132 -0
- package/src/form/selectUtils.ts +3 -2
- package/src/form/textFieldContainerStyles.ts +1 -2
- package/src/form/types.ts +35 -17
- package/src/form/useCheckboxGroup.ts +3 -2
- package/src/form/useCombobox.ts +8 -3
- package/src/form/useNumberField.ts +36 -35
- package/src/form/useRangeSlider.ts +1 -2
- package/src/form/useSlider.ts +1 -2
- package/src/form/useTextField.ts +8 -3
- package/src/hoverMode/useHoverMode.ts +4 -8
- package/src/icon/FontIcon.tsx +1 -2
- package/src/icon/IconRotator.tsx +1 -2
- package/src/icon/MaterialIcon.tsx +2 -1
- package/src/icon/MaterialSymbol.tsx +2 -1
- package/src/icon/SVGIcon.tsx +1 -2
- package/src/icon/config.tsx +10 -7
- package/src/icon/materialConfig.ts +1 -2
- package/src/icon/styles.ts +1 -2
- package/src/interaction/UserInteractionModeProvider.tsx +9 -4
- package/src/interaction/types.ts +1 -2
- package/src/interaction/useElementInteraction.tsx +3 -2
- package/src/layout/LayoutAppBar.tsx +6 -6
- package/src/layout/LayoutNav.tsx +2 -1
- package/src/layout/LayoutWindowSplitter.tsx +2 -1
- package/src/layout/Main.tsx +1 -2
- package/src/layout/useExpandableLayout.ts +63 -5
- package/src/layout/useHorizontalLayoutTransition.ts +1 -2
- package/src/layout/useLayoutTree.ts +2 -2
- package/src/layout/useLayoutWindowSplitter.ts +6 -6
- package/src/layout/useResizableLayout.ts +3 -6
- package/src/link/Link.tsx +1 -2
- package/src/link/SkipToMainContent.tsx +20 -23
- package/src/list/List.tsx +1 -2
- package/src/list/ListItem.tsx +2 -1
- package/src/list/ListItemAddon.tsx +2 -1
- package/src/list/ListItemLink.tsx +2 -1
- package/src/list/ListSubheader.tsx +1 -2
- package/src/list/getListItemHeight.ts +8 -9
- package/src/list/listItemStyles.ts +1 -2
- package/src/list/types.ts +1 -2
- package/src/media-queries/AppSizeProvider.tsx +8 -10
- package/src/media-queries/appSize.ts +3 -0
- package/src/media-queries/config.ts +41 -0
- package/src/menu/DropdownMenu.tsx +4 -5
- package/src/menu/Menu.tsx +2 -1
- package/src/menu/MenuItemButton.tsx +1 -2
- package/src/menu/MenuItemFileInput.tsx +2 -1
- package/src/menu/MenuItemInputToggle.tsx +3 -3
- package/src/menu/MenuItemSeparator.tsx +2 -1
- package/src/menu/MenuVisibilityProvider.tsx +4 -2
- package/src/menu/MenuWidget.tsx +1 -2
- package/src/menu/useContextMenu.ts +4 -2
- package/src/movement/types.ts +52 -13
- package/src/movement/useKeyboardMovementProvider.ts +77 -38
- package/src/navigation/CollapsibleNavGroup.tsx +1 -2
- package/src/navigation/NavItem.tsx +1 -2
- package/src/navigation/NavItemButton.tsx +2 -1
- package/src/navigation/NavItemLink.tsx +2 -1
- package/src/navigation/getTableOfContentsHeadings.ts +1 -2
- package/src/navigation/types.ts +1 -2
- package/src/overlay/Overlay.tsx +2 -1
- package/src/positioning/createHorizontalPosition.ts +10 -12
- package/src/positioning/createVerticalPosition.ts +10 -11
- package/src/positioning/useFixedPositioning.ts +6 -3
- package/src/progress/CircularProgress.tsx +2 -1
- package/src/progress/LinearProgress.tsx +2 -1
- package/src/progress/linearProgressStyles.ts +1 -2
- package/src/responsive-item/ResponsiveItem.tsx +1 -2
- package/src/responsive-item/ResponsiveItemOverlay.tsx +2 -1
- package/src/searching/caseInsensitive.ts +2 -4
- package/src/segmented-button/SegmentedButton.tsx +2 -1
- package/src/segmented-button/SegmentedButtonContainer.tsx +2 -1
- package/src/segmented-button/segmentedButtonStyles.ts +1 -2
- package/src/sheet/Sheet.tsx +1 -2
- package/src/snackbar/Toast.tsx +2 -1
- package/src/spinbutton/SpinButton.tsx +98 -0
- package/src/spinbutton/SpinButtonGroupProvider.tsx +32 -0
- package/src/spinbutton/defaults.ts +45 -0
- package/src/spinbutton/types.ts +413 -0
- package/src/spinbutton/useSpinButton.ts +311 -0
- package/src/spinbutton/useSpinButtonGroupProvider.ts +104 -0
- package/src/spinbutton/utils/deselectNode.ts +17 -0
- package/src/spinbutton/utils/resolveInputEvent.ts +112 -0
- package/src/spinbutton/utils/selectNode.ts +15 -0
- package/src/table/StickyTableSection.tsx +2 -1
- package/src/table/Table.tsx +1 -2
- package/src/table/TableBody.tsx +2 -1
- package/src/table/TableCellContent.tsx +1 -2
- package/src/table/TableCheckbox.tsx +1 -2
- package/src/table/TableFooter.tsx +1 -2
- package/src/table/TableHeader.tsx +1 -2
- package/src/table/TableRadio.tsx +1 -2
- package/src/table/TableRow.tsx +1 -2
- package/src/table/useStickyTableSection.tsx +1 -2
- package/src/tabs/SimpleTabPanel.tsx +2 -1
- package/src/tabs/SimpleTabPanels.tsx +2 -1
- package/src/tabs/Tab.tsx +3 -6
- package/src/tabs/TabList.tsx +2 -1
- package/src/tabs/TabListScrollButton.tsx +1 -2
- package/src/tabs/useMaxTabPanelHeight.ts +7 -4
- package/src/test-utils/data-testid.ts +1 -2
- package/src/test-utils/mocks/match-media.ts +5 -10
- package/src/test-utils/vitest/timers.ts +1 -1
- package/src/tooltip/Tooltip.tsx +2 -1
- package/src/tooltip/TooltipHoverModeProvider.tsx +1 -2
- package/src/tooltip/useTooltip.ts +9 -5
- package/src/transition/CSSTransition.tsx +2 -1
- package/src/transition/Collapse.tsx +4 -2
- package/src/transition/CrossFade.tsx +2 -1
- package/src/transition/ScaleTransition.tsx +2 -1
- package/src/transition/SkeletonPlaceholder.tsx +1 -2
- package/src/transition/Slide.tsx +2 -1
- package/src/transition/SlideContainer.tsx +1 -2
- package/src/transition/types.ts +15 -16
- package/src/transition/useCollapseTransition.ts +6 -5
- package/src/transition/useCrossFadeTransition.ts +3 -2
- package/src/transition/useMaxWidthTransition.ts +1 -2
- package/src/transition/useScaleTransition.ts +3 -2
- package/src/transition/useSkeletonPlaceholder.ts +1 -2
- package/src/tree/Tree.tsx +2 -1
- package/src/tree/TreeItem.tsx +2 -1
- package/src/tree/TreeProvider.tsx +4 -4
- package/src/tree/styles.ts +1 -2
- package/src/tree/types.ts +1 -2
- package/src/tree/useTreeMovement.ts +1 -2
- package/src/typography/HighlightTextMark.tsx +1 -2
- package/src/typography/Mark.tsx +1 -2
- package/src/typography/TextContainer.tsx +1 -2
- package/src/typography/Typography.tsx +1 -2
- package/src/useElementSize.ts +7 -4
- package/src/useIntersectionObserver.ts +3 -2
- package/src/useMutationObserver.ts +3 -2
- package/src/useWindowSize.ts +4 -2
- package/src/utils/getNumberOfDigits.ts +18 -0
- package/src/utils/nearest.ts +2 -1
- package/src/utils/useDevEffect.ts +9 -0
- package/src/window-splitter/WindowSplitter.tsx +5 -2
- package/src/window-splitter/styles.ts +13 -2
- package/src/window-splitter/useWindowSplitter.ts +3 -1
package/dist/menu/Menu.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/menu/Menu.tsx"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\nimport {\n type CSSProperties,\n type HTMLAttributes,\n forwardRef,\n useEffect,\n useRef,\n} from \"react\";\n\nimport { type FloatingActionButtonPosition } from \"../button/FloatingActionButton.js\";\nimport { useFocusContainer } from \"../focus/useFocusContainer.js\";\nimport { useUserInteractionMode } from \"../interaction/UserInteractionModeProvider.js\";\nimport { type ListProps } from \"../list/List.js\";\nimport { useAppSize } from \"../media-queries/AppSizeProvider.js\";\nimport { type GetDefaultFocusedIndex } from \"../movement/types.js\";\nimport { Portal } from \"../portal/Portal.js\";\nimport { type CalculateFixedPositionOptions } from \"../positioning/types.js\";\nimport {\n type FixedPositioningOptions,\n useFixedPositioning,\n} from \"../positioning/useFixedPositioning.js\";\nimport { useScrollLock } from \"../scroll/useScrollLock.js\";\nimport {\n type ScaleTransitionHookOptions,\n useScaleTransition,\n} from \"../transition/useScaleTransition.js\";\nimport { type LabelRequiredForA11y, type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { useIsomorphicLayoutEffect } from \"../useIsomorphicLayoutEffect.js\";\nimport {\n type MenuConfiguration,\n MenuConfigurationProvider,\n type MenuOrientationProps,\n useMenuConfiguration,\n} from \"./MenuConfigurationProvider.js\";\nimport { MenuSheet, type MenuSheetConvenienceProps } from \"./MenuSheet.js\";\nimport { MenuWidget } from \"./MenuWidget.js\";\nimport { useMenuBarContext } from \"./useMenuBarProvider.js\";\nimport { getDefaultAnchor } from \"./utils.js\";\n\n// NOTE: The augmentation is in this file since no types are imported from the\n// `styles` file at this time\ndeclare module \"react\" {\n interface CSSProperties {\n \"--rmd-menu-background-color\"?: string;\n \"--rmd-menu-color\"?: string;\n \"--rmd-menu-min-width\"?: string | number;\n \"--rmd-menu-spacing\"?: string | number;\n }\n}\n\nconst noop = (): void => {\n // do nothing\n};\n\n/** @since 5.0.0 */\nexport type MenuTransitionProps = Omit<\n ScaleTransitionHookOptions<HTMLDivElement>,\n \"transitionIn\" | \"vertical\" | \"nodeRef\"\n>;\n\n/**\n * @since 6.0.0\n */\nexport interface MenuConfigurationProps extends CalculateFixedPositionOptions {\n /**\n * @see {@link ScaleTransitionHookOptions.temporary}\n * @defaultValue `true`\n */\n temporary?: boolean;\n\n /**\n * @defaultValue `false`\n */\n disablePortal?: boolean;\n\n /**\n * Boolean if the menu should not gain the elevation styles and should only be\n * set to `true` when rendering within a `Sheet`.\n *\n * @defaultValue `false`\n */\n disableElevation?: boolean;\n\n /**\n * @defaultValue `false`\n */\n disableTransition?: boolean;\n\n /**\n * @see {@link FixedPositioningOptions.transformOrigin}\n * @defaultValue `true`\n */\n transformOrigin?: boolean;\n\n /**\n * Boolean if the menu should close if the page is scrolled. The default\n * behavior is to just update the position of the menu relative to the menu\n * button until it can no longer be visible within the viewport.\n *\n * @defaultValue `false`\n */\n closeOnScroll?: boolean;\n\n /**\n * Boolean if the page should no longer be scrollable while the menu is\n * visible.\n *\n * @defaultValue `false`\n */\n preventScroll?: boolean;\n\n /**\n * Boolean if the menu should close instead of repositioning itself if the\n * browser window is resized.\n *\n * @defaultValue `false`\n */\n closeOnResize?: boolean;\n\n /** @see {@link FixedPositioningOptions.getFixedPositionOptions} */\n getFixedPositionOptions?: () => CalculateFixedPositionOptions;\n\n /**\n * @defaultValue `false`\n * @see {@link FixedPositioningOptions.disabled}\n */\n disableFixedPositioning?: boolean;\n}\n\n/**\n * @since 5.1.0\n * @since 6.0.0 Renamed from `MenuListProps` to `MenuListConvenienceProps`\n */\nexport interface MenuListConvenienceProps {\n /**\n * An optional style to provide to the `List` component that surrounds the\n * `MenuItem` within a `Menu`.\n */\n listStyle?: CSSProperties;\n\n /**\n * An optional className to provide to the `List` component that surrounds the\n * `MenuItem` within a `Menu`.\n */\n listClassName?: string;\n\n /**\n * Any additional props to pass to the `List` component that surrounds the\n * `Menu`'s `MenuItem`s.\n */\n listProps?: PropsWithRef<Omit<ListProps, \"horizontal\">>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface MenuConvenienceProps extends MenuConfigurationProps {\n /**\n * This can be used to apply additional props to the `Menu` component.\n *\n * Note: You can override the `style` and `className` using\n * {@link menuStyle} and {@link menuClassName} instead for convenience.\n *\n * @example\n * ```tsx\n * <DropdownMenu\n * {...props}\n * menuProps={{\n * style: {\n * // custom inline style\n * },\n * className: \"come-class-name\",\n * getFixedPositionOptions: () => ({\n * preventOverlap: true,\n * }),\n * }}\n * />\n * ```\n */\n menuProps?: PropsWithRef<\n Omit<\n MenuProps,\n | \"children\"\n | \"fixedTo\"\n | \"visible\"\n | \"onRequestClose\"\n | \"getDefaultFocusedIndex\"\n >\n >;\n\n /**\n * Convenience prop to apply custom style to the `Menu` component.\n */\n menuStyle?: CSSProperties;\n\n /**\n * Convenience prop to apply custom class name to the `Menu` component.\n */\n menuClassName?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport type MenuFixedPositioningOptions = Omit<\n FixedPositioningOptions<HTMLElement, HTMLDivElement>,\n \"onScroll\" | \"onResize\" | \"nodeRef\" | \"disabled\"\n>;\n\n/**\n * @since 5.0.0\n * @since 6.0.0 Updated to use the latest Menu, Transition, and Portal API.\n */\nexport interface MenuProps\n extends HTMLAttributes<HTMLDivElement>,\n MenuConfiguration,\n MenuConfigurationProps,\n MenuFixedPositioningOptions,\n MenuOrientationProps,\n MenuTransitionProps,\n MenuListConvenienceProps,\n MenuSheetConvenienceProps {\n visible: boolean;\n onRequestClose: () => void;\n\n /**\n * @defaultValue `\"menu-\" + useId()`\n */\n id?: string;\n\n /**\n * This is used to set the default focus index when the menu is visible.\n *\n * @internal\n */\n getDefaultFocusedIndex?: GetDefaultFocusedIndex;\n\n /**\n * Custom style that should be applied to the menu only while not rendered\n * within a sheet since the {@link style} would be applied to both versions.\n */\n menuStyle?: CSSProperties;\n\n /**\n * Custom class name that should be applied only while not rendered within a\n * sheet.\n */\n menuClassName?: string;\n\n /**\n * @internal\n *\n * This is only used to update the default anchor when the DropdownMenu's\n * toggle is a floating action button.\n */\n floating?: FloatingActionButtonPosition;\n}\n\n/**\n * **Client Component**\n *\n * This component should generally only be used to implement context menus with\n * the `useContextMenu` hook. Otherwise, the `DropdownMenu` component should be\n * used.\n *\n * @see The `useContextMenu` hook for an example.\n *\n * @see {@link https://react-md.dev/components/menu | Menu Demos}\n * @since 5.0.0\n * @since 6.0.0 Updated this component to implement all the `Menu`\n * functionality instead of requiring the `useMenu` hook and `MenuWidget`\n * component. In addition, the `renderAsSheet` behavior has been moved into this\n * implementation so that the `MenuRenderer` is no longer required and context\n * menus can appear as a `Sheet`.\n */\nexport const Menu = forwardRef<HTMLDivElement, LabelRequiredForA11y<MenuProps>>(\n function Menu(props, propRef) {\n const {\n id: propId,\n style: propStyle,\n role = \"menu\",\n children,\n horizontal: _horizontal,\n sheetHeader: _sheetHeader,\n sheetFooter: _sheetFooter,\n renderAsSheet: _renderAsSheet,\n sheetPosition: _sheetPosition,\n sheetVerticalSize: _sheetVerticalSize,\n sheetProps,\n sheetStyle,\n sheetClassName,\n menuStyle,\n menuClassName,\n disableElevation = false,\n temporary = true,\n tabIndex = -1,\n fixedTo,\n className,\n classNames,\n timeout,\n appear,\n enter,\n exit,\n onEnter,\n onEntering = noop,\n onEntered = noop,\n onExit,\n onExiting,\n onExited = noop,\n onKeyDown = noop,\n listProps,\n listStyle,\n listClassName,\n visible,\n onRequestClose,\n floating,\n anchor,\n closeOnResize = false,\n closeOnScroll = false,\n preventScroll = false,\n vwMargin,\n vhMargin,\n xMargin,\n yMargin,\n width,\n transformOrigin = true,\n preventOverlap,\n disableSwapping,\n disableVHBounds,\n initialX,\n initialY,\n disableFixedPositioning,\n getFixedPositionOptions,\n disablePortal: propDisablePortal,\n disableTransition,\n ...remaining\n } = props;\n const { \"aria-label\": ariaLabel, \"aria-labelledby\": ariaLabelledBy } =\n props;\n\n const id = useEnsuredId(propId, \"menu\");\n const {\n root,\n menubar,\n menuitem,\n activeId,\n animatedOnceRef,\n hoverTimeoutRef,\n disableHoverMode,\n } = useMenuBarContext();\n const {\n horizontal,\n sheetHeader,\n sheetFooter,\n renderAsSheet,\n sheetPosition,\n sheetVerticalSize,\n } = useMenuConfiguration(props);\n const { isPhone } = useAppSize();\n const isSheet =\n renderAsSheet === true || (renderAsSheet === \"phone\" && isPhone);\n\n const entered = useRef(false);\n const cancelUnmountFocus = useRef(false);\n const hideWithoutRefocus = (): void => {\n cancelUnmountFocus.current = true;\n onRequestClose();\n };\n const mode = useUserInteractionMode();\n const mouse = mode === \"mouse\";\n\n const { eventHandlers, transitionOptions } = useFocusContainer({\n nodeRef: propRef,\n activate: visible,\n onKeyDown(event) {\n onKeyDown(event);\n\n // when a menu is within a sheet, it should not trigger the custom\n // keyboard behavior\n if (isSheet) {\n return;\n }\n\n switch (event.key) {\n case \"Escape\":\n // prevent parent components that have an \"Escape\" keypress event\n // from being triggered as well\n event.stopPropagation();\n disableHoverMode();\n onRequestClose();\n break;\n case \"Tab\":\n // since menus are portalled, tab index is kinda broke so just close\n // the menu instead of doing default tab behavior\n event.preventDefault();\n\n if (!menuitem) {\n // pressing the tab key should still cascade close all menus\n event.stopPropagation();\n }\n disableHoverMode();\n onRequestClose();\n break;\n case \"ArrowUp\":\n if (!root && menuitem && horizontal) {\n event.stopPropagation();\n event.preventDefault();\n onRequestClose();\n }\n break;\n case \"ArrowLeft\":\n if (!root && menuitem && !horizontal) {\n event.stopPropagation();\n event.preventDefault();\n onRequestClose();\n }\n break;\n }\n },\n onEnter,\n onEntering(appearing) {\n onEntering(appearing);\n entered.current = true;\n },\n onEntered(appearing) {\n onEntered(appearing);\n entered.current = true;\n cancelUnmountFocus.current = false;\n animatedOnceRef.current = true;\n },\n onExit,\n onExiting,\n onExited() {\n onExited();\n entered.current = false;\n },\n disableTransition,\n isFocusTypeDisabled(type) {\n if (role === \"listbox\") {\n return !isSheet;\n }\n\n if (type === \"keyboard\") {\n return isSheet;\n }\n\n const isHoverDisabled = mouse && hoverTimeoutRef.current === 0;\n if (type === \"mount\") {\n return isHoverDisabled;\n }\n\n return (\n isHoverDisabled ||\n cancelUnmountFocus.current ||\n (root && !!activeId && id !== activeId)\n );\n },\n });\n\n const { ref, style, callbacks, updateStyle } = useFixedPositioning({\n ...transitionOptions,\n disabled: disableFixedPositioning,\n style: isSheet ? propStyle : menuStyle,\n fixedTo,\n anchor: getDefaultAnchor({\n anchor,\n menubar,\n floating,\n menuitem: !root && menuitem,\n horizontal,\n }),\n vwMargin,\n vhMargin,\n xMargin,\n yMargin,\n width,\n transformOrigin,\n preventOverlap,\n disableSwapping,\n disableVHBounds,\n initialX,\n initialY,\n getFixedPositionOptions,\n onResize: closeOnResize ? hideWithoutRefocus : undefined,\n onScroll(_event, data) {\n if (!data.visible || closeOnScroll) {\n hideWithoutRefocus();\n }\n },\n });\n const { rendered, disablePortal, elementProps } = useScaleTransition({\n className: cnb(!isSheet && menuClassName, className),\n transitionIn: visible,\n vertical: !horizontal,\n temporary,\n timeout: isSheet || disableTransition ? 0 : timeout,\n classNames,\n appear,\n enter,\n exit,\n exitedHidden: true,\n // merge the transition callbacks\n ...transitionOptions,\n ...callbacks,\n // but prefer the latest defined ref\n nodeRef: ref,\n });\n useScrollLock(visible && preventScroll);\n\n // need to make sure that the useEffect does not refire for hiding on click\n // events because of the `window.requestAnimationFrame`. It'll make it so\n // that menu items that update state are unable to close when clicked\n const hide = useRef(onRequestClose);\n useEffect(() => {\n hide.current = onRequestClose;\n });\n useEffect(() => {\n if (!visible) {\n return;\n }\n\n const callback = (event: globalThis.MouseEvent): void => {\n // this is required for when the transition is disabled\n if (!entered.current) {\n return;\n }\n\n // if the user clicks outside of the menu to close it, the toggle button\n // should not be focused. instead the nearest focusable element from the\n // click event should be focused when Tab or Shift + tab is pressed\n cancelUnmountFocus.current =\n !(event.target instanceof HTMLElement) ||\n !event.target.closest(`[role=\"${role}\"]`);\n\n // this won't be called if `event.stopPropagation()` is called\n hide.current();\n disableHoverMode();\n };\n\n // wait an animation frame so the initial click event that caused the menu\n // to become visible does not immediately close the menu\n const frame = window.requestAnimationFrame(() => {\n window.addEventListener(\"click\", callback);\n });\n\n return () => {\n window.cancelAnimationFrame(frame);\n window.removeEventListener(\"click\", callback);\n };\n }, [disableHoverMode, role, visible]);\n useIsomorphicLayoutEffect(() => {\n if (!visible) {\n return;\n }\n\n updateStyle();\n }, [updateStyle, children, visible]);\n\n return (\n <MenuConfigurationProvider\n horizontal={horizontal}\n renderAsSheet={renderAsSheet}\n sheetFooter={sheetFooter}\n sheetHeader={sheetHeader}\n sheetPosition={sheetPosition}\n sheetVerticalSize={sheetVerticalSize}\n >\n <MenuSheet\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy as string}\n header={sheetHeader}\n footer={sheetFooter}\n position={sheetPosition}\n verticalSize={sheetVerticalSize}\n visible={visible}\n enabled={isSheet}\n onRequestClose={onRequestClose}\n style={sheetStyle}\n className={sheetClassName}\n disablePortal={propDisablePortal}\n temporary={temporary}\n disableTransition={disableTransition}\n {...sheetProps}\n >\n <Portal disabled={isSheet || (propDisablePortal ?? disablePortal)}>\n {(rendered || isSheet) && (\n <MenuWidget\n {...remaining}\n {...elementProps}\n {...eventHandlers}\n id={id}\n role={role}\n style={isSheet ? propStyle : style}\n isSheet={isSheet}\n tabIndex={tabIndex}\n horizontal={horizontal}\n listProps={listProps}\n listStyle={listStyle}\n listClassName={listClassName}\n disableElevation={disableElevation}\n cancelUnmountFocus={cancelUnmountFocus}\n >\n {children}\n </MenuWidget>\n )}\n </Portal>\n </MenuSheet>\n </MenuConfigurationProvider>\n );\n }\n);\n"],"names":["cnb","forwardRef","useEffect","useRef","useFocusContainer","useUserInteractionMode","useAppSize","Portal","useFixedPositioning","useScrollLock","useScaleTransition","useEnsuredId","useIsomorphicLayoutEffect","MenuConfigurationProvider","useMenuConfiguration","MenuSheet","MenuWidget","useMenuBarContext","getDefaultAnchor","noop","Menu","props","propRef","id","propId","style","propStyle","role","children","horizontal","_horizontal","sheetHeader","_sheetHeader","sheetFooter","_sheetFooter","renderAsSheet","_renderAsSheet","sheetPosition","_sheetPosition","sheetVerticalSize","_sheetVerticalSize","sheetProps","sheetStyle","sheetClassName","menuStyle","menuClassName","disableElevation","temporary","tabIndex","fixedTo","className","classNames","timeout","appear","enter","exit","onEnter","onEntering","onEntered","onExit","onExiting","onExited","onKeyDown","listProps","listStyle","listClassName","visible","onRequestClose","floating","anchor","closeOnResize","closeOnScroll","preventScroll","vwMargin","vhMargin","xMargin","yMargin","width","transformOrigin","preventOverlap","disableSwapping","disableVHBounds","initialX","initialY","disableFixedPositioning","getFixedPositionOptions","disablePortal","propDisablePortal","disableTransition","remaining","ariaLabel","ariaLabelledBy","root","menubar","menuitem","activeId","animatedOnceRef","hoverTimeoutRef","disableHoverMode","isPhone","isSheet","entered","cancelUnmountFocus","hideWithoutRefocus","current","mode","mouse","eventHandlers","transitionOptions","nodeRef","activate","event","key","stopPropagation","preventDefault","appearing","isFocusTypeDisabled","type","isHoverDisabled","ref","callbacks","updateStyle","disabled","onResize","undefined","onScroll","_event","data","rendered","elementProps","transitionIn","vertical","exitedHidden","hide","callback","target","HTMLElement","closest","frame","window","requestAnimationFrame","addEventListener","cancelAnimationFrame","removeEventListener","aria-label","aria-labelledby","header","footer","position","verticalSize","enabled"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../src/menu/Menu.tsx"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\nimport {\n type CSSProperties,\n type HTMLAttributes,\n forwardRef,\n useEffect,\n useRef,\n} from \"react\";\n\nimport { type FloatingActionButtonPosition } from \"../button/FloatingActionButton.js\";\nimport { useFocusContainer } from \"../focus/useFocusContainer.js\";\nimport { useUserInteractionMode } from \"../interaction/UserInteractionModeProvider.js\";\nimport { type ListProps } from \"../list/List.js\";\nimport { useAppSize } from \"../media-queries/AppSizeProvider.js\";\nimport { type GetDefaultFocusedIndex } from \"../movement/types.js\";\nimport { Portal } from \"../portal/Portal.js\";\nimport { type CalculateFixedPositionOptions } from \"../positioning/types.js\";\nimport {\n type FixedPositioningOptions,\n useFixedPositioning,\n} from \"../positioning/useFixedPositioning.js\";\nimport { useScrollLock } from \"../scroll/useScrollLock.js\";\nimport {\n type ScaleTransitionHookOptions,\n useScaleTransition,\n} from \"../transition/useScaleTransition.js\";\nimport { type LabelRequiredForA11y, type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { useIsomorphicLayoutEffect } from \"../useIsomorphicLayoutEffect.js\";\nimport {\n type MenuConfiguration,\n MenuConfigurationProvider,\n type MenuOrientationProps,\n useMenuConfiguration,\n} from \"./MenuConfigurationProvider.js\";\nimport { MenuSheet, type MenuSheetConvenienceProps } from \"./MenuSheet.js\";\nimport { MenuWidget } from \"./MenuWidget.js\";\nimport { useMenuBarContext } from \"./useMenuBarProvider.js\";\nimport { getDefaultAnchor } from \"./utils.js\";\n\n// NOTE: The augmentation is in this file since no types are imported from the\n// `styles` file at this time\ndeclare module \"react\" {\n interface CSSProperties {\n \"--rmd-menu-background-color\"?: string;\n \"--rmd-menu-color\"?: string;\n \"--rmd-menu-min-width\"?: string | number;\n \"--rmd-menu-spacing\"?: string | number;\n }\n}\n\nconst noop = (): void => {\n // do nothing\n};\n\n/** @since 5.0.0 */\nexport type MenuTransitionProps = Omit<\n ScaleTransitionHookOptions<HTMLDivElement>,\n \"transitionIn\" | \"vertical\" | \"nodeRef\"\n>;\n\n/**\n * @since 6.0.0\n */\nexport interface MenuConfigurationProps extends CalculateFixedPositionOptions {\n /**\n * @see {@link ScaleTransitionHookOptions.temporary}\n * @defaultValue `true`\n */\n temporary?: boolean;\n\n /**\n * @defaultValue `false`\n */\n disablePortal?: boolean;\n\n /**\n * Boolean if the menu should not gain the elevation styles and should only be\n * set to `true` when rendering within a `Sheet`.\n *\n * @defaultValue `false`\n */\n disableElevation?: boolean;\n\n /**\n * @defaultValue `false`\n */\n disableTransition?: boolean;\n\n /**\n * @see {@link FixedPositioningOptions.transformOrigin}\n * @defaultValue `true`\n */\n transformOrigin?: boolean;\n\n /**\n * Boolean if the menu should close if the page is scrolled. The default\n * behavior is to just update the position of the menu relative to the menu\n * button until it can no longer be visible within the viewport.\n *\n * @defaultValue `false`\n */\n closeOnScroll?: boolean;\n\n /**\n * Boolean if the page should no longer be scrollable while the menu is\n * visible.\n *\n * @defaultValue `false`\n */\n preventScroll?: boolean;\n\n /**\n * Boolean if the menu should close instead of repositioning itself if the\n * browser window is resized.\n *\n * @defaultValue `false`\n */\n closeOnResize?: boolean;\n\n /** @see {@link FixedPositioningOptions.getFixedPositionOptions} */\n getFixedPositionOptions?: () => CalculateFixedPositionOptions;\n\n /**\n * @defaultValue `false`\n * @see {@link FixedPositioningOptions.disabled}\n */\n disableFixedPositioning?: boolean;\n}\n\n/**\n * @since 5.1.0\n * @since 6.0.0 Renamed from `MenuListProps` to `MenuListConvenienceProps`\n */\nexport interface MenuListConvenienceProps {\n /**\n * An optional style to provide to the `List` component that surrounds the\n * `MenuItem` within a `Menu`.\n */\n listStyle?: CSSProperties;\n\n /**\n * An optional className to provide to the `List` component that surrounds the\n * `MenuItem` within a `Menu`.\n */\n listClassName?: string;\n\n /**\n * Any additional props to pass to the `List` component that surrounds the\n * `Menu`'s `MenuItem`s.\n */\n listProps?: PropsWithRef<Omit<ListProps, \"horizontal\">>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface MenuConvenienceProps extends MenuConfigurationProps {\n /**\n * This can be used to apply additional props to the `Menu` component.\n *\n * Note: You can override the `style` and `className` using\n * {@link menuStyle} and {@link menuClassName} instead for convenience.\n *\n * @example\n * ```tsx\n * <DropdownMenu\n * {...props}\n * menuProps={{\n * style: {\n * // custom inline style\n * },\n * className: \"come-class-name\",\n * getFixedPositionOptions: () => ({\n * preventOverlap: true,\n * }),\n * }}\n * />\n * ```\n */\n menuProps?: PropsWithRef<\n Omit<\n MenuProps,\n | \"children\"\n | \"fixedTo\"\n | \"visible\"\n | \"onRequestClose\"\n | \"getDefaultFocusedIndex\"\n >\n >;\n\n /**\n * Convenience prop to apply custom style to the `Menu` component.\n */\n menuStyle?: CSSProperties;\n\n /**\n * Convenience prop to apply custom class name to the `Menu` component.\n */\n menuClassName?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport type MenuFixedPositioningOptions = Omit<\n FixedPositioningOptions<HTMLElement, HTMLDivElement>,\n \"onScroll\" | \"onResize\" | \"nodeRef\" | \"disabled\"\n>;\n\n/**\n * @since 5.0.0\n * @since 6.0.0 Updated to use the latest Menu, Transition, and Portal API.\n */\nexport interface MenuProps\n extends\n HTMLAttributes<HTMLDivElement>,\n MenuConfiguration,\n MenuConfigurationProps,\n MenuFixedPositioningOptions,\n MenuOrientationProps,\n MenuTransitionProps,\n MenuListConvenienceProps,\n MenuSheetConvenienceProps {\n visible: boolean;\n onRequestClose: () => void;\n\n /**\n * @defaultValue `\"menu-\" + useId()`\n */\n id?: string;\n\n /**\n * This is used to set the default focus index when the menu is visible.\n *\n * @internal\n */\n getDefaultFocusedIndex?: GetDefaultFocusedIndex;\n\n /**\n * Custom style that should be applied to the menu only while not rendered\n * within a sheet since the {@link style} would be applied to both versions.\n */\n menuStyle?: CSSProperties;\n\n /**\n * Custom class name that should be applied only while not rendered within a\n * sheet.\n */\n menuClassName?: string;\n\n /**\n * @internal\n *\n * This is only used to update the default anchor when the DropdownMenu's\n * toggle is a floating action button.\n */\n floating?: FloatingActionButtonPosition;\n}\n\n/**\n * **Client Component**\n *\n * This component should generally only be used to implement context menus with\n * the `useContextMenu` hook. Otherwise, the `DropdownMenu` component should be\n * used.\n *\n * @see The `useContextMenu` hook for an example.\n *\n * @see {@link https://react-md.dev/components/menu | Menu Demos}\n * @since 5.0.0\n * @since 6.0.0 Updated this component to implement all the `Menu`\n * functionality instead of requiring the `useMenu` hook and `MenuWidget`\n * component. In addition, the `renderAsSheet` behavior has been moved into this\n * implementation so that the `MenuRenderer` is no longer required and context\n * menus can appear as a `Sheet`.\n */\nexport const Menu = forwardRef<HTMLDivElement, LabelRequiredForA11y<MenuProps>>(\n function Menu(props, propRef) {\n const {\n id: propId,\n style: propStyle,\n role = \"menu\",\n children,\n horizontal: _horizontal,\n sheetHeader: _sheetHeader,\n sheetFooter: _sheetFooter,\n renderAsSheet: _renderAsSheet,\n sheetPosition: _sheetPosition,\n sheetVerticalSize: _sheetVerticalSize,\n sheetProps,\n sheetStyle,\n sheetClassName,\n menuStyle,\n menuClassName,\n disableElevation = false,\n temporary = true,\n tabIndex = -1,\n fixedTo,\n className,\n classNames,\n timeout,\n appear,\n enter,\n exit,\n onEnter,\n onEntering = noop,\n onEntered = noop,\n onExit,\n onExiting,\n onExited = noop,\n onKeyDown = noop,\n listProps,\n listStyle,\n listClassName,\n visible,\n onRequestClose,\n floating,\n anchor,\n closeOnResize = false,\n closeOnScroll = false,\n preventScroll = false,\n vwMargin,\n vhMargin,\n xMargin,\n yMargin,\n width,\n transformOrigin = true,\n preventOverlap,\n disableSwapping,\n disableVHBounds,\n initialX,\n initialY,\n disableFixedPositioning,\n getFixedPositionOptions,\n disablePortal: propDisablePortal,\n disableTransition,\n ...remaining\n } = props;\n const { \"aria-label\": ariaLabel, \"aria-labelledby\": ariaLabelledBy } =\n props;\n\n const id = useEnsuredId(propId, \"menu\");\n const {\n root,\n menubar,\n menuitem,\n activeId,\n animatedOnceRef,\n hoverTimeoutRef,\n disableHoverMode,\n } = useMenuBarContext();\n const {\n horizontal,\n sheetHeader,\n sheetFooter,\n renderAsSheet,\n sheetPosition,\n sheetVerticalSize,\n } = useMenuConfiguration(props);\n const { isPhone } = useAppSize();\n const isSheet =\n renderAsSheet === true || (renderAsSheet === \"phone\" && isPhone);\n\n const entered = useRef(false);\n const cancelUnmountFocus = useRef(false);\n const hideWithoutRefocus = (): void => {\n cancelUnmountFocus.current = true;\n onRequestClose();\n };\n const mode = useUserInteractionMode();\n const mouse = mode === \"mouse\";\n\n const { eventHandlers, transitionOptions } = useFocusContainer({\n nodeRef: propRef,\n activate: visible,\n onKeyDown(event) {\n onKeyDown(event);\n\n // when a menu is within a sheet, it should not trigger the custom\n // keyboard behavior\n if (isSheet) {\n return;\n }\n\n switch (event.key) {\n case \"Escape\":\n // prevent parent components that have an \"Escape\" keypress event\n // from being triggered as well\n event.stopPropagation();\n disableHoverMode();\n onRequestClose();\n break;\n case \"Tab\":\n // since menus are portalled, tab index is kinda broke so just close\n // the menu instead of doing default tab behavior\n event.preventDefault();\n\n if (!menuitem) {\n // pressing the tab key should still cascade close all menus\n event.stopPropagation();\n }\n disableHoverMode();\n onRequestClose();\n break;\n case \"ArrowUp\":\n if (!root && menuitem && horizontal) {\n event.stopPropagation();\n event.preventDefault();\n onRequestClose();\n }\n break;\n case \"ArrowLeft\":\n if (!root && menuitem && !horizontal) {\n event.stopPropagation();\n event.preventDefault();\n onRequestClose();\n }\n break;\n }\n },\n onEnter,\n onEntering(appearing) {\n onEntering(appearing);\n entered.current = true;\n },\n onEntered(appearing) {\n onEntered(appearing);\n entered.current = true;\n cancelUnmountFocus.current = false;\n animatedOnceRef.current = true;\n },\n onExit,\n onExiting,\n onExited() {\n onExited();\n entered.current = false;\n },\n disableTransition,\n isFocusTypeDisabled(type) {\n if (role === \"listbox\") {\n return !isSheet;\n }\n\n if (type === \"keyboard\") {\n return isSheet;\n }\n\n const isHoverDisabled = mouse && hoverTimeoutRef.current === 0;\n if (type === \"mount\") {\n return isHoverDisabled;\n }\n\n return (\n isHoverDisabled ||\n cancelUnmountFocus.current ||\n (root && !!activeId && id !== activeId)\n );\n },\n });\n\n const { ref, style, callbacks, updateStyle } = useFixedPositioning({\n ...transitionOptions,\n disabled: disableFixedPositioning,\n style: isSheet ? propStyle : menuStyle,\n fixedTo,\n anchor: getDefaultAnchor({\n anchor,\n menubar,\n floating,\n menuitem: !root && menuitem,\n horizontal,\n }),\n vwMargin,\n vhMargin,\n xMargin,\n yMargin,\n width,\n transformOrigin,\n preventOverlap,\n disableSwapping,\n disableVHBounds,\n initialX,\n initialY,\n getFixedPositionOptions,\n onResize: closeOnResize ? hideWithoutRefocus : undefined,\n onScroll(_event, data) {\n if (!data.visible || closeOnScroll) {\n hideWithoutRefocus();\n }\n },\n });\n const { rendered, disablePortal, elementProps } = useScaleTransition({\n className: cnb(!isSheet && menuClassName, className),\n transitionIn: visible,\n vertical: !horizontal,\n temporary,\n timeout: isSheet || disableTransition ? 0 : timeout,\n classNames,\n appear,\n enter,\n exit,\n exitedHidden: true,\n // merge the transition callbacks\n ...transitionOptions,\n ...callbacks,\n // but prefer the latest defined ref\n nodeRef: ref,\n });\n useScrollLock(visible && preventScroll);\n\n // need to make sure that the useEffect does not refire for hiding on click\n // events because of the `window.requestAnimationFrame`. It'll make it so\n // that menu items that update state are unable to close when clicked\n const hide = useRef(onRequestClose);\n useEffect(() => {\n hide.current = onRequestClose;\n });\n useEffect(() => {\n if (!visible) {\n return;\n }\n\n const callback = (event: globalThis.MouseEvent): void => {\n // this is required for when the transition is disabled\n if (!entered.current) {\n return;\n }\n\n // if the user clicks outside of the menu to close it, the toggle button\n // should not be focused. instead the nearest focusable element from the\n // click event should be focused when Tab or Shift + tab is pressed\n cancelUnmountFocus.current =\n !(event.target instanceof HTMLElement) ||\n !event.target.closest(`[role=\"${role}\"]`);\n\n // this won't be called if `event.stopPropagation()` is called\n hide.current();\n disableHoverMode();\n };\n\n // wait an animation frame so the initial click event that caused the menu\n // to become visible does not immediately close the menu\n const frame = window.requestAnimationFrame(() => {\n window.addEventListener(\"click\", callback);\n });\n\n return () => {\n window.cancelAnimationFrame(frame);\n window.removeEventListener(\"click\", callback);\n };\n }, [disableHoverMode, role, visible]);\n useIsomorphicLayoutEffect(() => {\n if (!visible) {\n return;\n }\n\n updateStyle();\n }, [updateStyle, children, visible]);\n\n return (\n <MenuConfigurationProvider\n horizontal={horizontal}\n renderAsSheet={renderAsSheet}\n sheetFooter={sheetFooter}\n sheetHeader={sheetHeader}\n sheetPosition={sheetPosition}\n sheetVerticalSize={sheetVerticalSize}\n >\n <MenuSheet\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy as string}\n header={sheetHeader}\n footer={sheetFooter}\n position={sheetPosition}\n verticalSize={sheetVerticalSize}\n visible={visible}\n enabled={isSheet}\n onRequestClose={onRequestClose}\n style={sheetStyle}\n className={sheetClassName}\n disablePortal={propDisablePortal}\n temporary={temporary}\n disableTransition={disableTransition}\n {...sheetProps}\n >\n <Portal disabled={isSheet || (propDisablePortal ?? disablePortal)}>\n {(rendered || isSheet) && (\n <MenuWidget\n {...remaining}\n {...elementProps}\n {...eventHandlers}\n id={id}\n role={role}\n style={isSheet ? propStyle : style}\n isSheet={isSheet}\n tabIndex={tabIndex}\n horizontal={horizontal}\n listProps={listProps}\n listStyle={listStyle}\n listClassName={listClassName}\n disableElevation={disableElevation}\n cancelUnmountFocus={cancelUnmountFocus}\n >\n {children}\n </MenuWidget>\n )}\n </Portal>\n </MenuSheet>\n </MenuConfigurationProvider>\n );\n }\n);\n"],"names":["cnb","forwardRef","useEffect","useRef","useFocusContainer","useUserInteractionMode","useAppSize","Portal","useFixedPositioning","useScrollLock","useScaleTransition","useEnsuredId","useIsomorphicLayoutEffect","MenuConfigurationProvider","useMenuConfiguration","MenuSheet","MenuWidget","useMenuBarContext","getDefaultAnchor","noop","Menu","props","propRef","id","propId","style","propStyle","role","children","horizontal","_horizontal","sheetHeader","_sheetHeader","sheetFooter","_sheetFooter","renderAsSheet","_renderAsSheet","sheetPosition","_sheetPosition","sheetVerticalSize","_sheetVerticalSize","sheetProps","sheetStyle","sheetClassName","menuStyle","menuClassName","disableElevation","temporary","tabIndex","fixedTo","className","classNames","timeout","appear","enter","exit","onEnter","onEntering","onEntered","onExit","onExiting","onExited","onKeyDown","listProps","listStyle","listClassName","visible","onRequestClose","floating","anchor","closeOnResize","closeOnScroll","preventScroll","vwMargin","vhMargin","xMargin","yMargin","width","transformOrigin","preventOverlap","disableSwapping","disableVHBounds","initialX","initialY","disableFixedPositioning","getFixedPositionOptions","disablePortal","propDisablePortal","disableTransition","remaining","ariaLabel","ariaLabelledBy","root","menubar","menuitem","activeId","animatedOnceRef","hoverTimeoutRef","disableHoverMode","isPhone","isSheet","entered","cancelUnmountFocus","hideWithoutRefocus","current","mode","mouse","eventHandlers","transitionOptions","nodeRef","activate","event","key","stopPropagation","preventDefault","appearing","isFocusTypeDisabled","type","isHoverDisabled","ref","callbacks","updateStyle","disabled","onResize","undefined","onScroll","_event","data","rendered","elementProps","transitionIn","vertical","exitedHidden","hide","callback","target","HTMLElement","closest","frame","window","requestAnimationFrame","addEventListener","cancelAnimationFrame","removeEventListener","aria-label","aria-labelledby","header","footer","position","verticalSize","enabled"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/menu/MenuItemButton.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, useEffect } from \"react\";\n\nimport { useHoverMode } from \"../hoverMode/useHoverMode.js\";\nimport { IconRotator } from \"../icon/IconRotator.js\";\nimport { getIcon } from \"../icon/config.js\";\nimport { useUserInteractionMode } from \"../interaction/UserInteractionModeProvider.js\";\nimport { useAppSize } from \"../media-queries/AppSizeProvider.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { type BaseMenuButtonProps } from \"./MenuButton.js\";\nimport { useMenuConfiguration } from \"./MenuConfigurationProvider.js\";\nimport { MenuItem, type MenuItemProps } from \"./MenuItem.js\";\nimport { useMenuVisibility } from \"./MenuVisibilityProvider.js\";\nimport { useMenuBarContext } from \"./useMenuBarProvider.js\";\n\nconst noop = (): void => {\n // do nothing\n};\n\n/**\n * @internal\n * @since 5.0.0\n */\nexport interface MenuItemButtonProps\n extends BaseMenuButtonProps
|
|
1
|
+
{"version":3,"sources":["../../src/menu/MenuItemButton.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, useEffect } from \"react\";\n\nimport { useHoverMode } from \"../hoverMode/useHoverMode.js\";\nimport { IconRotator } from \"../icon/IconRotator.js\";\nimport { getIcon } from \"../icon/config.js\";\nimport { useUserInteractionMode } from \"../interaction/UserInteractionModeProvider.js\";\nimport { useAppSize } from \"../media-queries/AppSizeProvider.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { type BaseMenuButtonProps } from \"./MenuButton.js\";\nimport { useMenuConfiguration } from \"./MenuConfigurationProvider.js\";\nimport { MenuItem, type MenuItemProps } from \"./MenuItem.js\";\nimport { useMenuVisibility } from \"./MenuVisibilityProvider.js\";\nimport { useMenuBarContext } from \"./useMenuBarProvider.js\";\n\nconst noop = (): void => {\n // do nothing\n};\n\n/**\n * @internal\n * @since 5.0.0\n */\nexport interface MenuItemButtonProps\n extends BaseMenuButtonProps, MenuItemProps {}\n\n/**\n * **Client Component**\n *\n * This is just an internal component that handles rendering a submenu as a\n * menuitem for a `DropdownMenu` with a conditional dropdown icon.\n *\n * @internal\n * @since 5.0.0\n */\nexport const MenuItemButton = forwardRef<HTMLLIElement, MenuItemButtonProps>(\n function MenuItemButton(props, ref) {\n const {\n id: propId,\n children,\n height: propHeight,\n onClick = noop,\n onKeyDown = noop,\n onMouseEnter = noop,\n onMouseLeave = noop,\n rightAddon: propRightAddon,\n iconRotatorProps,\n disableDropdownIcon = typeof propRightAddon !== \"undefined\",\n ...remaining\n } = props;\n const { disabled } = props;\n\n const id = useEnsuredId(propId, \"menuitem\");\n const mode = useUserInteractionMode();\n const { renderAsSheet } = useMenuConfiguration();\n const { isPhone } = useAppSize();\n const isSheet =\n renderAsSheet === true || (renderAsSheet === \"phone\" && isPhone);\n const {\n root,\n menubar,\n activeId,\n enableHoverMode,\n disableHoverMode,\n startDisableTimer,\n clearDisableTimer,\n leaveTimeoutRef,\n hoverTimeoutRef,\n } = useMenuBarContext();\n const { visible, setVisible, defaultFocusIndex } = useMenuVisibility();\n const { startShowFlow, clearVisibilityTimeout } = useHoverMode({\n setVisible,\n enableHoverMode,\n disableHoverMode,\n startDisableTimer,\n leaveTimeoutRef,\n hoverTimeoutRef,\n clearDisableTimer,\n });\n const { horizontal } = useMenuConfiguration();\n\n useEffect(() => {\n setVisible(id === activeId);\n }, [activeId, defaultFocusIndex, id, menubar, setVisible]);\n\n let height = propHeight;\n let rightAddon = propRightAddon;\n const dropdownIcon = getIcon(root ? \"dropdown\" : \"forward\");\n if (!disableDropdownIcon) {\n if (!height && !props.leftAddon) {\n height = \"normal\";\n }\n\n rightAddon = (\n <IconRotator {...iconRotatorProps} rotated={visible}>\n {dropdownIcon}\n </IconRotator>\n );\n }\n\n const updateVisibility = (nextVisible: boolean, focusIndex = 0): void => {\n defaultFocusIndex.current = focusIndex;\n setVisible(nextVisible);\n if (!menubar) {\n return;\n }\n\n if (nextVisible) {\n enableHoverMode(id);\n } else {\n disableHoverMode();\n }\n };\n\n return (\n <MenuItem\n {...remaining}\n aria-haspopup={isSheet ? \"dialog\" : \"menu\"}\n aria-expanded={visible || undefined}\n id={id}\n ref={ref}\n rightAddon={rightAddon}\n onClick={(event) => {\n onClick(event);\n\n event.stopPropagation();\n updateVisibility(!visible);\n }}\n onKeyDown={(event) => {\n onKeyDown(event);\n\n switch (event.key) {\n case \"ArrowDown\":\n if (horizontal || root) {\n event.preventDefault();\n event.stopPropagation();\n updateVisibility(true);\n }\n break;\n case \"ArrowRight\":\n if (!horizontal && !root) {\n event.preventDefault();\n event.stopPropagation();\n updateVisibility(true);\n }\n break;\n }\n }}\n onMouseEnter={(event) => {\n onMouseEnter(event);\n if (mode === \"touch\" || disabled || !menubar) {\n return;\n }\n\n defaultFocusIndex.current = 0;\n startShowFlow(id);\n }}\n onMouseLeave={(event) => {\n onMouseLeave(event);\n if (mode === \"touch\" || disabled || !menubar) {\n return;\n }\n\n clearVisibilityTimeout();\n }}\n >\n {children}\n </MenuItem>\n );\n }\n);\n"],"names":["forwardRef","useEffect","useHoverMode","IconRotator","getIcon","useUserInteractionMode","useAppSize","useEnsuredId","useMenuConfiguration","MenuItem","useMenuVisibility","useMenuBarContext","noop","MenuItemButton","props","ref","id","propId","children","height","propHeight","onClick","onKeyDown","onMouseEnter","onMouseLeave","rightAddon","propRightAddon","iconRotatorProps","disableDropdownIcon","remaining","disabled","mode","renderAsSheet","isPhone","isSheet","root","menubar","activeId","enableHoverMode","disableHoverMode","startDisableTimer","clearDisableTimer","leaveTimeoutRef","hoverTimeoutRef","visible","setVisible","defaultFocusIndex","startShowFlow","clearVisibilityTimeout","horizontal","dropdownIcon","leftAddon","rotated","updateVisibility","nextVisible","focusIndex","current","aria-haspopup","aria-expanded","undefined","event","stopPropagation","key","preventDefault"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/menu/MenuItemFileInput.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n type ChangeEventHandler,\n type InputHTMLAttributes,\n forwardRef,\n} from \"react\";\n\nimport { getIcon } from \"../icon/config.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { MenuItem, type MenuItemProps } from \"./MenuItem.js\";\n\nconst noop = (): void => {\n // do nothing\n};\n\n/**\n * @since 6.0.0 Removed most of the shared `FileInputProps` from this\n * implementation.\n */\nexport interface MenuItemFileInputProps\n extends
|
|
1
|
+
{"version":3,"sources":["../../src/menu/MenuItemFileInput.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n type ChangeEventHandler,\n type InputHTMLAttributes,\n forwardRef,\n} from \"react\";\n\nimport { getIcon } from \"../icon/config.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { MenuItem, type MenuItemProps } from \"./MenuItem.js\";\n\nconst noop = (): void => {\n // do nothing\n};\n\n/**\n * @since 6.0.0 Removed most of the shared `FileInputProps` from this\n * implementation.\n */\nexport interface MenuItemFileInputProps\n extends\n Omit<MenuItemProps, \"onChange\">,\n Pick<\n InputHTMLAttributes<HTMLInputElement>,\n \"accept\" | \"capture\" | \"multiple\"\n > {\n /**\n * A change event handler that should do something with the selected files.\n * Usually the `onChange` returned by `useFileUpload` or:\n *\n * ```ts\n * onChange={(event) => {\n * const { files } = event.currentTarget;\n * // do something with files\n * }}\n * ```\n *\n * This is actually a native `Event` and not a `SyntheticEvent` because the\n * file input is created through `document.createElement` instead of `React`.\n * You can still access the files through `event.currentTarget.files` like\n * normal.\n */\n onChange: ChangeEventHandler<HTMLInputElement>;\n\n /**\n * Set this to `true` if the `Menu` should not close when the file input's\n * menu item is clicked.\n *\n * @defaultValue `false`\n */\n preventMenuHideOnClick?: boolean;\n}\n\n/**\n * **Client Component**\n *\n * A wrapper for the `<input type=\"file\">` element that works within menus.\n *\n * @see {@link https://react-md.dev/components/menu#menuitemfileinput-example | DropdownMenu Demos}\n * @since 5.0.0\n * @since 6.0.0 No longer creates an invisible file input element within the\n * menu item. This allows the menu to be closed immediately when this menu item\n * is clicked.\n */\nexport const MenuItemFileInput = forwardRef<\n HTMLLIElement,\n MenuItemFileInputProps\n>(function MenuItemFileInput(props, ref) {\n const {\n id: propId,\n onClick = noop,\n onChange,\n accept,\n capture,\n multiple,\n children,\n leftAddon: propLeftAddon,\n preventMenuHideOnClick = false,\n ...remaining\n } = props;\n\n const id = useEnsuredId(propId, \"menu-item\");\n const leftAddon = getIcon(\"upload\", propLeftAddon);\n\n return (\n <MenuItem\n {...remaining}\n id={id}\n ref={ref}\n leftAddon={leftAddon}\n onClick={(event) => {\n onClick(event);\n\n if (preventMenuHideOnClick) {\n event.stopPropagation();\n }\n\n // Since the menu closes when the menu item is clicked causing the\n // elements to be removed from the DOM, a normal `<input type=\"file\" />`\n // can't be used. Instead, create a temporary file input element and\n // click it to trigger the file upload behavior.\n let input: HTMLInputElement | null = document.createElement(\"input\");\n input.type = \"file\";\n if (accept) {\n input.accept = accept;\n }\n if (multiple) {\n input.multiple = multiple;\n }\n if (capture) {\n input.capture = capture === true ? \"\" : capture;\n }\n\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-expect-error\n input.onchange = onChange;\n input.click();\n input = null;\n }}\n >\n {children}\n </MenuItem>\n );\n});\n"],"names":["forwardRef","getIcon","useEnsuredId","MenuItem","noop","MenuItemFileInput","props","ref","id","propId","onClick","onChange","accept","capture","multiple","children","leftAddon","propLeftAddon","preventMenuHideOnClick","remaining","event","stopPropagation","input","document","createElement","type","onchange","click"],"mappings":"AAAA;;AAEA,SAGEA,UAAU,QACL,QAAQ;AAEf,SAASC,OAAO,QAAQ,oBAAoB;AAC5C,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,QAAQ,QAA4B,gBAAgB;AAE7D,MAAMC,OAAO;AACX,aAAa;AACf;AAwCA;;;;;;;;;;CAUC,GACD,OAAO,MAAMC,kCAAoBL,WAG/B,SAASK,kBAAkBC,KAAK,EAAEC,GAAG;IACrC,MAAM,EACJC,IAAIC,MAAM,EACVC,UAAUN,IAAI,EACdO,QAAQ,EACRC,MAAM,EACNC,OAAO,EACPC,QAAQ,EACRC,QAAQ,EACRC,WAAWC,aAAa,EACxBC,yBAAyB,KAAK,EAC9B,GAAGC,WACJ,GAAGb;IAEJ,MAAME,KAAKN,aAAaO,QAAQ;IAChC,MAAMO,YAAYf,QAAQ,UAAUgB;IAEpC,qBACE,KAACd;QACE,GAAGgB,SAAS;QACbX,IAAIA;QACJD,KAAKA;QACLS,WAAWA;QACXN,SAAS,CAACU;YACRV,QAAQU;YAER,IAAIF,wBAAwB;gBAC1BE,MAAMC,eAAe;YACvB;YAEA,kEAAkE;YAClE,wEAAwE;YACxE,oEAAoE;YACpE,gDAAgD;YAChD,IAAIC,QAAiCC,SAASC,aAAa,CAAC;YAC5DF,MAAMG,IAAI,GAAG;YACb,IAAIb,QAAQ;gBACVU,MAAMV,MAAM,GAAGA;YACjB;YACA,IAAIE,UAAU;gBACZQ,MAAMR,QAAQ,GAAGA;YACnB;YACA,IAAID,SAAS;gBACXS,MAAMT,OAAO,GAAGA,YAAY,OAAO,KAAKA;YAC1C;YAEA,6DAA6D;YAC7D,mBAAmB;YACnBS,MAAMI,QAAQ,GAAGf;YACjBW,MAAMK,KAAK;YACXL,QAAQ;QACV;kBAECP;;AAGP,GAAG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/menu/MenuItemInputToggle.tsx"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\nimport {\n type CSSProperties,\n type HTMLAttributes,\n type MouseEvent,\n type ReactNode,\n forwardRef,\n} from \"react\";\n\nimport {\n type ConfigurableInputToggleIconProps,\n type IndeterminateCheckboxProps,\n} from \"../form/InputToggle.js\";\nimport { InputToggleIcon } from \"../form/InputToggleIcon.js\";\nimport { SwitchTrack } from \"../form/SwitchTrack.js\";\nimport { type InputToggleSize } from \"../form/inputToggleStyles.js\";\nimport { ListItem } from \"../list/ListItem.js\";\nimport {\n type ListItemAddonPosition,\n type ListItemAddonType,\n type ListItemChildrenTextProps,\n type ListItemHeight,\n} from \"../list/types.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport {\n menuItemInputToggle,\n menuItemInputToggleBall,\n menuItemInputToggleIcon,\n menuItemInputToggleTrack,\n} from \"./styles.js\";\n\nconst noop = (): void => {\n // do nothing\n};\n\n/**\n * @since 6.0.0\n */\nexport type MenuItemInputToggleCheckedCallback = (\n checked: boolean,\n event: MouseEvent<HTMLLIElement>\n) => void;\n\n/** @since 2.8.0 */\nexport interface BaseMenuItemInputToggleProps\n extends HTMLAttributes<HTMLLIElement>,\n ConfigurableInputToggleIconProps,\n ListItemChildrenTextProps {\n checked: boolean;\n onCheckedChange: MenuItemInputToggleCheckedCallback;\n\n /**\n * @defaultValue `\"menu-item-\" + useId()`\n */\n id?: string;\n\n /** @defaultValue `false` */\n disabled?: boolean;\n\n /**\n * Set this to `true` if the `Menu` should not close when the input toggle is\n * clicked. This can be useful when interacting with a checkbox group within a\n * menu or allowing the user to select multiple options before closing the\n * menu.\n *\n * @defaultValue `false`\n */\n preventMenuHideOnClick?: boolean;\n\n /**\n * This is set to `\"auto\"` by default so the icon shrinks back down to the\n * default icon size instead of relative to the current font size. You\n * probably don't want to change this since it'll also modify the height of\n * the menu item\n *\n * @defaultValue `\"auto\"`\n */\n size?: InputToggleSize;\n\n /** @defaultValue `\"auto\"` */\n height?: ListItemHeight;\n\n /** @defaultValue `false` */\n iconAfter?: boolean;\n\n addon?: ReactNode;\n addonType?: ListItemAddonType;\n addonPosition?: ListItemAddonPosition;\n\n /** @defaultValue `false` */\n addonForceWrap?: boolean;\n\n /** @defaultValue `false` */\n disableAddonCenteredMedia?: boolean;\n}\n\nexport interface MenuItemCheckboxProps\n extends BaseMenuItemInputToggleProps,\n IndeterminateCheckboxProps {}\n\nexport type MenuItemRadioProps = BaseMenuItemInputToggleProps;\n\n/**\n * @since 2.8.0\n * @since 6.0.0 Added additional props for styling the track and ball.\n */\nexport interface MenuItemSwitchProps extends BaseMenuItemInputToggleProps {\n trackProps?: PropsWithRef<HTMLAttributes<HTMLDivElement>>;\n trackStyle?: CSSProperties;\n trackClassName?: string;\n ballProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>>;\n ballStyle?: CSSProperties;\n ballClassName?: string;\n}\n\n/**\n * @since 2.8.0\n * @since 6.0.0 Updated to be a union of the different props to enforce the\n * correct props based on `type`\n */\nexport type MenuItemInputToggleProps =\n | (MenuItemCheckboxProps & { type: \"checkbox\" })\n | (MenuItemRadioProps & { type: \"radio\" })\n | (MenuItemSwitchProps & { type: \"switch\" });\n\n/**\n * **Client Component**\n *\n * This is a low-level component that should probably not be used externally and\n * instead the `MenuItemCheckbox`, `MenuItemRadio`, or `MenuItemSwitch` should\n * be used instead.\n *\n * @see {@link https://react-md.dev/components/menu | DropdownMenu Demos}\n * @see {@link MenuItemCheckbox} for checkbox examples\n * @see {@link MenuItemRadio} for radio examples\n * @see {@link MenuItemSwitch} for switch examples\n * @since 2.8.0\n */\nexport const MenuItemInputToggle = forwardRef<\n HTMLLIElement,\n MenuItemInputToggleProps\n>(function MenuItemInputToggle(props, ref) {\n const {\n id: propId,\n type,\n disabled = false,\n checked,\n onCheckedChange,\n preventMenuHideOnClick = false,\n onClick = noop,\n className,\n tabIndex = -1,\n children,\n size = \"auto\",\n icon: propIcon,\n iconAfter = false,\n iconProps,\n iconStyle,\n iconClassName,\n checkedIcon,\n indeterminate,\n indeterminateIcon,\n addon,\n addonType,\n addonPosition,\n addonForceWrap,\n disableAddonCenteredMedia,\n ballProps,\n ballStyle,\n ballClassName,\n trackProps,\n trackStyle,\n trackClassName,\n ...remaining\n } = props as MenuItemSwitchProps &\n MenuItemCheckboxProps & { type: \"checkbox\" | \"radio\" | \"switch\" };\n const id = useEnsuredId(propId, \"menu-item\");\n\n let icon = propIcon;\n if (type === \"switch\") {\n icon = (\n <SwitchTrack\n style={trackStyle}\n {...trackProps}\n className={cnb(\n menuItemInputToggleTrack(),\n trackClassName,\n trackProps?.className\n )}\n active={checked}\n ballProps={ballProps}\n ballStyle={ballStyle}\n ballClassName={cnb(menuItemInputToggleBall(), ballClassName)}\n />\n );\n } else {\n icon = (\n <InputToggleIcon\n style={iconStyle}\n disableEm\n {...iconProps}\n className={cnb(\n menuItemInputToggleIcon(),\n iconClassName,\n iconProps?.className\n )}\n size={size}\n type={type}\n checked={checked}\n disabled={disabled}\n icon={propIcon}\n checkedIcon={checkedIcon}\n indeterminate={indeterminate}\n indeterminateIcon={indeterminateIcon}\n />\n );\n }\n\n let leftAddon: ReactNode;\n let leftAddonType: ListItemAddonType | undefined;\n let leftAddonPosition: ListItemAddonPosition | undefined;\n let leftAddonForceWrap: boolean | undefined;\n let disableLeftAddonCenteredMedia: boolean | undefined;\n let rightAddon: ReactNode;\n let rightAddonType: ListItemAddonType | undefined;\n let rightAddonPosition: ListItemAddonPosition | undefined;\n let rightAddonForceWrap: boolean | undefined;\n let disableRightAddonCenteredMedia: boolean | undefined;\n if (iconAfter) {\n leftAddon = addon;\n leftAddonType = addonType;\n leftAddonPosition = addonPosition;\n leftAddonForceWrap = addonForceWrap;\n disableLeftAddonCenteredMedia = disableAddonCenteredMedia;\n rightAddon = icon;\n } else {\n leftAddon = icon;\n rightAddon = addon;\n rightAddonType = addonType;\n rightAddonPosition = addonPosition;\n rightAddonForceWrap = addonForceWrap;\n disableRightAddonCenteredMedia = disableAddonCenteredMedia;\n }\n\n return (\n <ListItem\n {...remaining}\n // I'm not actually sure if this is correct\n aria-checked={indeterminate && checked ? \"mixed\" : checked}\n id={id}\n role={type === \"radio\" ? \"menuitemradio\" : \"menuitemcheckbox\"}\n onClick={(event) => {\n onClick(event);\n onCheckedChange(!checked, event);\n\n if (preventMenuHideOnClick) {\n event.stopPropagation();\n }\n }}\n ref={ref}\n className={menuItemInputToggle({ type, className })}\n disabled={disabled}\n tabIndex={tabIndex}\n leftAddon={leftAddon}\n leftAddonType={leftAddonType}\n leftAddonPosition={leftAddonPosition}\n leftAddonForceWrap={leftAddonForceWrap}\n disableLeftAddonCenteredMedia={disableLeftAddonCenteredMedia}\n rightAddon={rightAddon}\n rightAddonType={rightAddonType}\n rightAddonPosition={rightAddonPosition}\n rightAddonForceWrap={rightAddonForceWrap}\n disableRightAddonCenteredMedia={disableRightAddonCenteredMedia}\n >\n {children}\n </ListItem>\n );\n});\n"],"names":["cnb","forwardRef","InputToggleIcon","SwitchTrack","ListItem","useEnsuredId","menuItemInputToggle","menuItemInputToggleBall","menuItemInputToggleIcon","menuItemInputToggleTrack","noop","MenuItemInputToggle","props","ref","id","propId","type","disabled","checked","onCheckedChange","preventMenuHideOnClick","onClick","className","tabIndex","children","size","icon","propIcon","iconAfter","iconProps","iconStyle","iconClassName","checkedIcon","indeterminate","indeterminateIcon","addon","addonType","addonPosition","addonForceWrap","disableAddonCenteredMedia","ballProps","ballStyle","ballClassName","trackProps","trackStyle","trackClassName","remaining","style","active","disableEm","leftAddon","leftAddonType","leftAddonPosition","leftAddonForceWrap","disableLeftAddonCenteredMedia","rightAddon","rightAddonType","rightAddonPosition","rightAddonForceWrap","disableRightAddonCenteredMedia","aria-checked","role","event","stopPropagation"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../src/menu/MenuItemInputToggle.tsx"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\nimport {\n type CSSProperties,\n type HTMLAttributes,\n type MouseEvent,\n type ReactNode,\n forwardRef,\n} from \"react\";\n\nimport {\n type ConfigurableInputToggleIconProps,\n type IndeterminateCheckboxProps,\n} from \"../form/InputToggle.js\";\nimport { InputToggleIcon } from \"../form/InputToggleIcon.js\";\nimport { SwitchTrack } from \"../form/SwitchTrack.js\";\nimport { type InputToggleSize } from \"../form/inputToggleStyles.js\";\nimport { ListItem } from \"../list/ListItem.js\";\nimport {\n type ListItemAddonPosition,\n type ListItemAddonType,\n type ListItemChildrenTextProps,\n type ListItemHeight,\n} from \"../list/types.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport {\n menuItemInputToggle,\n menuItemInputToggleBall,\n menuItemInputToggleIcon,\n menuItemInputToggleTrack,\n} from \"./styles.js\";\n\nconst noop = (): void => {\n // do nothing\n};\n\n/**\n * @since 6.0.0\n */\nexport type MenuItemInputToggleCheckedCallback = (\n checked: boolean,\n event: MouseEvent<HTMLLIElement>\n) => void;\n\n/** @since 2.8.0 */\nexport interface BaseMenuItemInputToggleProps\n extends\n HTMLAttributes<HTMLLIElement>,\n ConfigurableInputToggleIconProps,\n ListItemChildrenTextProps {\n checked: boolean;\n onCheckedChange: MenuItemInputToggleCheckedCallback;\n\n /**\n * @defaultValue `\"menu-item-\" + useId()`\n */\n id?: string;\n\n /** @defaultValue `false` */\n disabled?: boolean;\n\n /**\n * Set this to `true` if the `Menu` should not close when the input toggle is\n * clicked. This can be useful when interacting with a checkbox group within a\n * menu or allowing the user to select multiple options before closing the\n * menu.\n *\n * @defaultValue `false`\n */\n preventMenuHideOnClick?: boolean;\n\n /**\n * This is set to `\"auto\"` by default so the icon shrinks back down to the\n * default icon size instead of relative to the current font size. You\n * probably don't want to change this since it'll also modify the height of\n * the menu item\n *\n * @defaultValue `\"auto\"`\n */\n size?: InputToggleSize;\n\n /** @defaultValue `\"auto\"` */\n height?: ListItemHeight;\n\n /** @defaultValue `false` */\n iconAfter?: boolean;\n\n addon?: ReactNode;\n addonType?: ListItemAddonType;\n addonPosition?: ListItemAddonPosition;\n\n /** @defaultValue `false` */\n addonForceWrap?: boolean;\n\n /** @defaultValue `false` */\n disableAddonCenteredMedia?: boolean;\n}\n\nexport interface MenuItemCheckboxProps\n extends BaseMenuItemInputToggleProps, IndeterminateCheckboxProps {}\n\nexport type MenuItemRadioProps = BaseMenuItemInputToggleProps;\n\n/**\n * @since 2.8.0\n * @since 6.0.0 Added additional props for styling the track and ball.\n */\nexport interface MenuItemSwitchProps extends BaseMenuItemInputToggleProps {\n trackProps?: PropsWithRef<HTMLAttributes<HTMLDivElement>>;\n trackStyle?: CSSProperties;\n trackClassName?: string;\n ballProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>>;\n ballStyle?: CSSProperties;\n ballClassName?: string;\n}\n\n/**\n * @since 2.8.0\n * @since 6.0.0 Updated to be a union of the different props to enforce the\n * correct props based on `type`\n */\nexport type MenuItemInputToggleProps =\n | (MenuItemCheckboxProps & { type: \"checkbox\" })\n | (MenuItemRadioProps & { type: \"radio\" })\n | (MenuItemSwitchProps & { type: \"switch\" });\n\n/**\n * **Client Component**\n *\n * This is a low-level component that should probably not be used externally and\n * instead the `MenuItemCheckbox`, `MenuItemRadio`, or `MenuItemSwitch` should\n * be used instead.\n *\n * @see {@link https://react-md.dev/components/menu | DropdownMenu Demos}\n * @see {@link MenuItemCheckbox} for checkbox examples\n * @see {@link MenuItemRadio} for radio examples\n * @see {@link MenuItemSwitch} for switch examples\n * @since 2.8.0\n */\nexport const MenuItemInputToggle = forwardRef<\n HTMLLIElement,\n MenuItemInputToggleProps\n>(function MenuItemInputToggle(props, ref) {\n const {\n id: propId,\n type,\n disabled = false,\n checked,\n onCheckedChange,\n preventMenuHideOnClick = false,\n onClick = noop,\n className,\n tabIndex = -1,\n children,\n size = \"auto\",\n icon: propIcon,\n iconAfter = false,\n iconProps,\n iconStyle,\n iconClassName,\n checkedIcon,\n indeterminate,\n indeterminateIcon,\n addon,\n addonType,\n addonPosition,\n addonForceWrap,\n disableAddonCenteredMedia,\n ballProps,\n ballStyle,\n ballClassName,\n trackProps,\n trackStyle,\n trackClassName,\n ...remaining\n } = props as MenuItemSwitchProps &\n MenuItemCheckboxProps & { type: \"checkbox\" | \"radio\" | \"switch\" };\n const id = useEnsuredId(propId, \"menu-item\");\n\n let icon = propIcon;\n if (type === \"switch\") {\n icon = (\n <SwitchTrack\n style={trackStyle}\n {...trackProps}\n className={cnb(\n menuItemInputToggleTrack(),\n trackClassName,\n trackProps?.className\n )}\n active={checked}\n ballProps={ballProps}\n ballStyle={ballStyle}\n ballClassName={cnb(menuItemInputToggleBall(), ballClassName)}\n />\n );\n } else {\n icon = (\n <InputToggleIcon\n style={iconStyle}\n disableEm\n {...iconProps}\n className={cnb(\n menuItemInputToggleIcon(),\n iconClassName,\n iconProps?.className\n )}\n size={size}\n type={type}\n checked={checked}\n disabled={disabled}\n icon={propIcon}\n checkedIcon={checkedIcon}\n indeterminate={indeterminate}\n indeterminateIcon={indeterminateIcon}\n />\n );\n }\n\n let leftAddon: ReactNode;\n let leftAddonType: ListItemAddonType | undefined;\n let leftAddonPosition: ListItemAddonPosition | undefined;\n let leftAddonForceWrap: boolean | undefined;\n let disableLeftAddonCenteredMedia: boolean | undefined;\n let rightAddon: ReactNode;\n let rightAddonType: ListItemAddonType | undefined;\n let rightAddonPosition: ListItemAddonPosition | undefined;\n let rightAddonForceWrap: boolean | undefined;\n let disableRightAddonCenteredMedia: boolean | undefined;\n if (iconAfter) {\n leftAddon = addon;\n leftAddonType = addonType;\n leftAddonPosition = addonPosition;\n leftAddonForceWrap = addonForceWrap;\n disableLeftAddonCenteredMedia = disableAddonCenteredMedia;\n rightAddon = icon;\n } else {\n leftAddon = icon;\n rightAddon = addon;\n rightAddonType = addonType;\n rightAddonPosition = addonPosition;\n rightAddonForceWrap = addonForceWrap;\n disableRightAddonCenteredMedia = disableAddonCenteredMedia;\n }\n\n return (\n <ListItem\n {...remaining}\n // I'm not actually sure if this is correct\n aria-checked={indeterminate && checked ? \"mixed\" : checked}\n id={id}\n role={type === \"radio\" ? \"menuitemradio\" : \"menuitemcheckbox\"}\n onClick={(event) => {\n onClick(event);\n onCheckedChange(!checked, event);\n\n if (preventMenuHideOnClick) {\n event.stopPropagation();\n }\n }}\n ref={ref}\n className={menuItemInputToggle({ type, className })}\n disabled={disabled}\n tabIndex={tabIndex}\n leftAddon={leftAddon}\n leftAddonType={leftAddonType}\n leftAddonPosition={leftAddonPosition}\n leftAddonForceWrap={leftAddonForceWrap}\n disableLeftAddonCenteredMedia={disableLeftAddonCenteredMedia}\n rightAddon={rightAddon}\n rightAddonType={rightAddonType}\n rightAddonPosition={rightAddonPosition}\n rightAddonForceWrap={rightAddonForceWrap}\n disableRightAddonCenteredMedia={disableRightAddonCenteredMedia}\n >\n {children}\n </ListItem>\n );\n});\n"],"names":["cnb","forwardRef","InputToggleIcon","SwitchTrack","ListItem","useEnsuredId","menuItemInputToggle","menuItemInputToggleBall","menuItemInputToggleIcon","menuItemInputToggleTrack","noop","MenuItemInputToggle","props","ref","id","propId","type","disabled","checked","onCheckedChange","preventMenuHideOnClick","onClick","className","tabIndex","children","size","icon","propIcon","iconAfter","iconProps","iconStyle","iconClassName","checkedIcon","indeterminate","indeterminateIcon","addon","addonType","addonPosition","addonForceWrap","disableAddonCenteredMedia","ballProps","ballStyle","ballClassName","trackProps","trackStyle","trackClassName","remaining","style","active","disableEm","leftAddon","leftAddonType","leftAddonPosition","leftAddonForceWrap","disableLeftAddonCenteredMedia","rightAddon","rightAddonType","rightAddonPosition","rightAddonForceWrap","disableRightAddonCenteredMedia","aria-checked","role","event","stopPropagation"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/menu/MenuItemSeparator.tsx"],"sourcesContent":["\"use client\";\n\nimport { type HTMLAttributes, forwardRef } from \"react\";\n\nimport { type DividerProps } from \"../divider/Divider.js\";\nimport { divider } from \"../divider/styles.js\";\nimport { useMenuConfiguration } from \"./MenuConfigurationProvider.js\";\n\n/** @since 5.0.0 */\nexport interface MenuItemSeparatorProps\n extends
|
|
1
|
+
{"version":3,"sources":["../../src/menu/MenuItemSeparator.tsx"],"sourcesContent":["\"use client\";\n\nimport { type HTMLAttributes, forwardRef } from \"react\";\n\nimport { type DividerProps } from \"../divider/Divider.js\";\nimport { divider } from \"../divider/styles.js\";\nimport { useMenuConfiguration } from \"./MenuConfigurationProvider.js\";\n\n/** @since 5.0.0 */\nexport interface MenuItemSeparatorProps\n extends\n HTMLAttributes<HTMLLIElement>,\n Pick<DividerProps, \"inset\" | \"vertical\"> {}\n\n/**\n * **Client Component**\n *\n * This component renders a `<li role=\"separator\">` with the divider styles. It\n * will also automatically render itself vertically instead of horizontally if\n * the menu is rendering horizontally.\n *\n * @see {@link https://react-md.dev/components/menu | Menu Demos}\n * @since 5.0.0 Renders as an `<li>` instead of a `<div>` or `<hr />`.\n */\nexport const MenuItemSeparator = forwardRef<\n HTMLLIElement,\n MenuItemSeparatorProps\n>(function MenuItemSeparator(props, ref) {\n const {\n className,\n inset,\n vertical: propVertical,\n children,\n ...remaining\n } = props;\n\n const horizontal = useMenuConfiguration().horizontal;\n const vertical = propVertical ?? horizontal;\n\n return (\n <li\n {...remaining}\n aria-orientation={vertical ? \"vertical\" : undefined}\n ref={ref}\n role=\"separator\"\n className={divider({ inset: inset && !vertical, vertical, className })}\n >\n {children}\n </li>\n );\n});\n"],"names":["forwardRef","divider","useMenuConfiguration","MenuItemSeparator","props","ref","className","inset","vertical","propVertical","children","remaining","horizontal","li","aria-orientation","undefined","role"],"mappings":"AAAA;;AAEA,SAA8BA,UAAU,QAAQ,QAAQ;AAGxD,SAASC,OAAO,QAAQ,uBAAuB;AAC/C,SAASC,oBAAoB,QAAQ,iCAAiC;AAQtE;;;;;;;;;CASC,GACD,OAAO,MAAMC,kCAAoBH,WAG/B,SAASG,kBAAkBC,KAAK,EAAEC,GAAG;IACrC,MAAM,EACJC,SAAS,EACTC,KAAK,EACLC,UAAUC,YAAY,EACtBC,QAAQ,EACR,GAAGC,WACJ,GAAGP;IAEJ,MAAMQ,aAAaV,uBAAuBU,UAAU;IACpD,MAAMJ,WAAWC,gBAAgBG;IAEjC,qBACE,KAACC;QACE,GAAGF,SAAS;QACbG,oBAAkBN,WAAW,aAAaO;QAC1CV,KAAKA;QACLW,MAAK;QACLV,WAAWL,QAAQ;YAAEM,OAAOA,SAAS,CAACC;YAAUA;YAAUF;QAAU;kBAEnEI;;AAGP,GAAG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/menu/MenuVisibilityProvider.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n type ReactElement,\n type ReactNode,\n createContext,\n useContext,\n useMemo,\n} from \"react\";\n\nimport { type NonNullMutableRef, type UseStateObject } from \"../types.js\";\n\n/**\n * @since 5.0.0\n * @since 6.0.0 Added the `defaultFocusIndex` ref.\n */\nexport interface MenuVisibilityContext
|
|
1
|
+
{"version":3,"sources":["../../src/menu/MenuVisibilityProvider.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n type ReactElement,\n type ReactNode,\n createContext,\n useContext,\n useMemo,\n} from \"react\";\n\nimport { type NonNullMutableRef, type UseStateObject } from \"../types.js\";\n\n/**\n * @since 5.0.0\n * @since 6.0.0 Added the `defaultFocusIndex` ref.\n */\nexport interface MenuVisibilityContext extends UseStateObject<\n \"visible\",\n boolean\n> {\n defaultFocusIndex: NonNullMutableRef<number>;\n}\n\n/**\n * @internal\n * @since 5.0.0\n */\nconst context = createContext<MenuVisibilityContext>({\n visible: false,\n setVisible() {\n throw new Error('\"MenuVisibilityProvider\" must be a parent component');\n },\n defaultFocusIndex: { current: 0 },\n});\ncontext.displayName = \"MenuVisibility\";\n\n/**\n * @internal\n * @since 5.0.0\n */\nconst { Provider } = context;\n\n/**\n * This hook allows you control the visibility of a parent menu. The main\n * use-case for this hook is adding a custom sheet header/footer.\n *\n * @example Simple Example\n * ```tsx\n * function SheetFooter(): ReactElement {\n * const { setVisible } = useMenuVisibility();\n *\n * return (\n * <DialogFooter>\n * <Button onClick={() => setVisible(false)}>Cancel</Button>\n * </DialogFooter>\n * );\n * }\n * ```\n *\n * @returns the {@link MenuVisibilityContext}\n * @since 5.0.0\n */\nexport function useMenuVisibility(): Readonly<MenuVisibilityContext> {\n return useContext(context);\n}\n\n/**\n * @internal\n * @since 5.0.0\n */\nexport interface MenuVisibilityProviderProps extends MenuVisibilityContext {\n children: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * @internal\n * @since 5.0.0\n */\nexport function MenuVisibilityProvider({\n visible,\n setVisible,\n defaultFocusIndex,\n children,\n}: MenuVisibilityProviderProps): ReactElement {\n const value = useMemo<MenuVisibilityContext>(\n () => ({\n visible,\n setVisible,\n defaultFocusIndex,\n }),\n [visible, setVisible, defaultFocusIndex]\n );\n\n return <Provider value={value}>{children}</Provider>;\n}\n"],"names":["createContext","useContext","useMemo","context","visible","setVisible","Error","defaultFocusIndex","current","displayName","Provider","useMenuVisibility","MenuVisibilityProvider","children","value"],"mappings":"AAAA;;AAEA,SAGEA,aAAa,EACbC,UAAU,EACVC,OAAO,QACF,QAAQ;AAef;;;CAGC,GACD,MAAMC,wBAAUH,cAAqC;IACnDI,SAAS;IACTC;QACE,MAAM,IAAIC,MAAM;IAClB;IACAC,mBAAmB;QAAEC,SAAS;IAAE;AAClC;AACAL,QAAQM,WAAW,GAAG;AAEtB;;;CAGC,GACD,MAAM,EAAEC,QAAQ,EAAE,GAAGP;AAErB;;;;;;;;;;;;;;;;;;;CAmBC,GACD,OAAO,SAASQ;IACd,OAAOV,WAAWE;AACpB;AAUA;;;;;CAKC,GACD,OAAO,SAASS,uBAAuB,EACrCR,OAAO,EACPC,UAAU,EACVE,iBAAiB,EACjBM,QAAQ,EACoB;IAC5B,MAAMC,QAAQZ,QACZ,IAAO,CAAA;YACLE;YACAC;YACAE;QACF,CAAA,GACA;QAACH;QAASC;QAAYE;KAAkB;IAG1C,qBAAO,KAACG;QAASI,OAAOA;kBAAQD;;AAClC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/menu/MenuWidget.tsx"],"sourcesContent":["\"use client\";\n\nimport { type HTMLAttributes, forwardRef, useRef, useState } from \"react\";\n\nimport { List } from \"../list/List.js\";\nimport { type GetDefaultFocusedIndex } from \"../movement/types.js\";\nimport { useKeyboardMovementProvider } from \"../movement/useKeyboardMovementProvider.js\";\nimport { type NonNullMutableRef } from \"../types.js\";\nimport { type MenuListConvenienceProps } from \"./Menu.js\";\nimport { MenuWidgetKeyboardProvider } from \"./MenuWidgetKeyboardProvider.js\";\nimport { menu } from \"./styles.js\";\nimport {\n MenuBarProvider,\n useMenuBarContext,\n useMenuBarProvider,\n} from \"./useMenuBarProvider.js\";\n\nconst noop = (): void => {\n // do nothing\n};\n\n/**\n * @internal\n */\nexport interface MenuWidgetProps\n extends HTMLAttributes<HTMLDivElement
|
|
1
|
+
{"version":3,"sources":["../../src/menu/MenuWidget.tsx"],"sourcesContent":["\"use client\";\n\nimport { type HTMLAttributes, forwardRef, useRef, useState } from \"react\";\n\nimport { List } from \"../list/List.js\";\nimport { type GetDefaultFocusedIndex } from \"../movement/types.js\";\nimport { useKeyboardMovementProvider } from \"../movement/useKeyboardMovementProvider.js\";\nimport { type NonNullMutableRef } from \"../types.js\";\nimport { type MenuListConvenienceProps } from \"./Menu.js\";\nimport { MenuWidgetKeyboardProvider } from \"./MenuWidgetKeyboardProvider.js\";\nimport { menu } from \"./styles.js\";\nimport {\n MenuBarProvider,\n useMenuBarContext,\n useMenuBarProvider,\n} from \"./useMenuBarProvider.js\";\n\nconst noop = (): void => {\n // do nothing\n};\n\n/**\n * @internal\n */\nexport interface MenuWidgetProps\n extends HTMLAttributes<HTMLDivElement>, MenuListConvenienceProps {\n isSheet: boolean;\n horizontal: boolean;\n disableElevation?: boolean;\n cancelUnmountFocus: NonNullMutableRef<boolean>;\n getDefaultFocusedIndex?: GetDefaultFocusedIndex;\n}\n\n/**\n * **Client Component**\n *\n * This component was added to support the listbox role and the `useId()` hook.\n * If the `temporary` prop is set, the `MenuItem`'s ids will not be the same the\n * next time the menu opens, so the aria-activedescendant will point to a\n * non-existing id\n *\n * @internal\n */\nexport const MenuWidget = forwardRef<HTMLDivElement, MenuWidgetProps>(\n function MenuWidget(props, ref) {\n const {\n id,\n role = \"menu\",\n className,\n listStyle,\n listClassName,\n listProps,\n children,\n onClick,\n onBlur = noop,\n onFocus = noop,\n onKeyDown = noop,\n tabIndex = -1,\n isSheet,\n horizontal,\n disableElevation,\n cancelUnmountFocus,\n getDefaultFocusedIndex,\n ...remaining\n } = props;\n const isListbox = role === \"listbox\";\n const { menubar } = useMenuBarContext();\n\n // Since there is the possibility of other tab focusable elements within the\n // sheet and the menu items are programmatically focused, the menu's\n // tabIndex needs to be set to `-1` while one of the child menu items are\n // focused. This allows Shift+Tab correctly focuses the previous focusable\n // element within the sheet. Since `onFocus` and `onBlur` will be bubbled up\n // to the menu widget each time a new MenuItem is focused, only disable the\n // focused state if the blur event is fired without another focus event\n // within an animation frame.\n const [sheetMenuFocused, setSheetMenuFocused] = useState(false);\n const sheetBlurredFame = useRef(0);\n const menuBarContext = useMenuBarProvider({\n root: false,\n menubar,\n hoverTimeout: menubar ? 0 : undefined,\n defaultActiveId: id,\n });\n const { movementProps, movementContext } = useKeyboardMovementProvider({\n ref,\n onClick,\n onFocus(event) {\n onFocus(event);\n\n if (!isSheet) {\n return;\n }\n\n window.cancelAnimationFrame(sheetBlurredFame.current);\n setSheetMenuFocused(true);\n },\n onKeyDown,\n horizontal,\n loopable: true,\n searchable: true,\n programmatic: true,\n includeDisabled: true,\n getDefaultFocusedIndex,\n });\n\n return (\n <MenuWidgetKeyboardProvider disabled={isListbox} value={movementContext}>\n <MenuBarProvider value={menuBarContext}>\n <div\n aria-orientation={horizontal ? \"horizontal\" : undefined}\n {...remaining}\n {...(isListbox\n ? { onClick, onFocus, onKeyDown, ref }\n : movementProps)}\n id={id}\n role={role}\n className={menu({\n className,\n elevated: !disableElevation && !isSheet,\n horizontal,\n })}\n tabIndex={isSheet && !sheetMenuFocused ? 0 : tabIndex}\n onBlur={(event) => {\n onBlur(event);\n if (!isSheet) {\n return;\n }\n\n sheetBlurredFame.current = window.requestAnimationFrame(() => {\n setSheetMenuFocused(false);\n });\n }}\n >\n <List\n {...listProps}\n style={listStyle ?? listProps?.style}\n className={listClassName || listProps?.className}\n horizontal={horizontal}\n onClick={(event) => {\n listProps?.onClick?.(event);\n\n // this makes it so you can click on the menu/list without\n // closing the menu\n if (event.target === event.currentTarget) {\n event.stopPropagation();\n }\n\n // This might be a test only workaround since clicking links move focus\n // somewhere else\n if (event.target instanceof HTMLElement) {\n cancelUnmountFocus.current = event.currentTarget.contains(\n event.target.closest(\"a\")\n );\n }\n }}\n >\n {children}\n </List>\n </div>\n </MenuBarProvider>\n </MenuWidgetKeyboardProvider>\n );\n }\n);\n"],"names":["forwardRef","useRef","useState","List","useKeyboardMovementProvider","MenuWidgetKeyboardProvider","menu","MenuBarProvider","useMenuBarContext","useMenuBarProvider","noop","MenuWidget","props","ref","id","role","className","listStyle","listClassName","listProps","children","onClick","onBlur","onFocus","onKeyDown","tabIndex","isSheet","horizontal","disableElevation","cancelUnmountFocus","getDefaultFocusedIndex","remaining","isListbox","menubar","sheetMenuFocused","setSheetMenuFocused","sheetBlurredFame","menuBarContext","root","hoverTimeout","undefined","defaultActiveId","movementProps","movementContext","event","window","cancelAnimationFrame","current","loopable","searchable","programmatic","includeDisabled","disabled","value","div","aria-orientation","elevated","requestAnimationFrame","style","target","currentTarget","stopPropagation","HTMLElement","contains","closest"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/menu/useContextMenu.ts"],"sourcesContent":["\"use client\";\n\nimport type { MouseEvent, RefObject } from \"react\";\nimport { useCallback, useRef, useState } from \"react\";\n\nimport { BELOW_INNER_LEFT_ANCHOR } from \"../positioning/constants.js\";\nimport type { InitialCoords, PositionAnchor } from \"../positioning/types.js\";\nimport type { UseStateObject } from \"../types.js\";\n\n/** @since 6.0.0 */\nexport interface ContextMenuProps extends InitialCoords {\n \"aria-label\": string;\n anchor: PositionAnchor;\n fixedTo: RefObject<HTMLElement>;\n visible: boolean;\n preventScroll: boolean;\n onRequestClose: () => void;\n}\n\n/**\n * @since 5.0.0\n * @since 6.0.0 Dropped most options since they are no longer required for the\n * context menu to work. Apply any `Menu` props directly to the `Menu` component\n * instead.\n */\nexport interface ContextMenuHookOptions {\n /**\n * @defaultValue `BELOW_INNER_LEFT_ANCHOR`\n * @see {@link BELOW_INNER_LEFT_ANCHOR}\n */\n anchor?: PositionAnchor;\n\n /**\n * @defaultValue `\"Context Menu\"`\n */\n menuLabel?: string;\n\n /**\n * @defaultValue `true`\n */\n preventScroll?: boolean;\n onContextMenu?: <E extends HTMLElement>(event: MouseEvent<E>) => void;\n}\n\n/**\n * @since 5.0.0\n * @since 6.0.0 Renamed from `ContextMenuHookReturnValue` to\n * `ContextMenuImplementation` and dropped the `menuRef` and `menuNodeRef`\n * fields.\n */\nexport interface ContextMenuImplementation
|
|
1
|
+
{"version":3,"sources":["../../src/menu/useContextMenu.ts"],"sourcesContent":["\"use client\";\n\nimport type { MouseEvent, RefObject } from \"react\";\nimport { useCallback, useRef, useState } from \"react\";\n\nimport { BELOW_INNER_LEFT_ANCHOR } from \"../positioning/constants.js\";\nimport type { InitialCoords, PositionAnchor } from \"../positioning/types.js\";\nimport type { UseStateObject } from \"../types.js\";\n\n/** @since 6.0.0 */\nexport interface ContextMenuProps extends InitialCoords {\n \"aria-label\": string;\n anchor: PositionAnchor;\n fixedTo: RefObject<HTMLElement>;\n visible: boolean;\n preventScroll: boolean;\n onRequestClose: () => void;\n}\n\n/**\n * @since 5.0.0\n * @since 6.0.0 Dropped most options since they are no longer required for the\n * context menu to work. Apply any `Menu` props directly to the `Menu` component\n * instead.\n */\nexport interface ContextMenuHookOptions {\n /**\n * @defaultValue `BELOW_INNER_LEFT_ANCHOR`\n * @see {@link BELOW_INNER_LEFT_ANCHOR}\n */\n anchor?: PositionAnchor;\n\n /**\n * @defaultValue `\"Context Menu\"`\n */\n menuLabel?: string;\n\n /**\n * @defaultValue `true`\n */\n preventScroll?: boolean;\n onContextMenu?: <E extends HTMLElement>(event: MouseEvent<E>) => void;\n}\n\n/**\n * @since 5.0.0\n * @since 6.0.0 Renamed from `ContextMenuHookReturnValue` to\n * `ContextMenuImplementation` and dropped the `menuRef` and `menuNodeRef`\n * fields.\n */\nexport interface ContextMenuImplementation extends UseStateObject<\n \"visible\",\n boolean\n> {\n menuProps: ContextMenuProps;\n onContextMenu: <E extends HTMLElement>(event: MouseEvent<E>) => void;\n}\n\nconst noop = (): void => {\n // do nothing\n};\n\n/**\n * This hook controls the visibility and positioning for a context menu.\n *\n * @example Simple Example\n * ```tsx\n * import type { ReactElement } from \"react\";\n * import { Menu } from \"@react-md/core/menu/Menu\":\n * import { MenuItem } from \"@react-md/core/menu/MenuItem\":\n * import { useContextMenu } from \"@react-md/core/menu/useContextMenu\":\n *\n * function Example(): ReactElement {\n * const { menuProps, onContextMenu } = useContextMenu();\n *\n * return (\n * <>\n * <textarea onContextMenu={onContextMenu} />\n * <Menu {...menuProps}>\n * <MenuItem>Cut</MenuItem>\n * <MenuItem>Copy</MenuItem>\n * <MenuItem>Paste</MenuItem>\n * <MenuItem>Undo</MenuItem>\n * </Menu>\n * </>\n * );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/menu#context-menu | Menu Demos}\n * @since 5.0.0\n * @since 6.0.0 No longer supports overriding most of the `Menu` props. The\n * props must be passed to the `Menu` component manually.\n */\nexport function useContextMenu(\n options: ContextMenuHookOptions = {}\n): ContextMenuImplementation {\n const {\n anchor = BELOW_INNER_LEFT_ANCHOR,\n menuLabel = \"Context Menu\",\n onContextMenu = noop,\n preventScroll = true,\n } = options;\n const [coords, setCoords] = useState<InitialCoords>({});\n const [visible, setVisible] = useState(false);\n const fixedTo = useRef<HTMLElement>(null);\n const onRequestClose = useCallback(() => {\n setVisible(false);\n }, []);\n\n return {\n visible,\n setVisible,\n menuProps: {\n \"aria-label\": menuLabel,\n anchor,\n ...coords,\n fixedTo,\n visible,\n onRequestClose,\n preventScroll,\n },\n onContextMenu(event) {\n onContextMenu(event);\n if (event.isPropagationStopped()) {\n return;\n }\n\n event.preventDefault();\n event.stopPropagation();\n setCoords({\n initialX: event.clientX,\n initialY: event.clientY,\n });\n setVisible(true);\n },\n };\n}\n"],"names":["useCallback","useRef","useState","BELOW_INNER_LEFT_ANCHOR","noop","useContextMenu","options","anchor","menuLabel","onContextMenu","preventScroll","coords","setCoords","visible","setVisible","fixedTo","onRequestClose","menuProps","event","isPropagationStopped","preventDefault","stopPropagation","initialX","clientX","initialY","clientY"],"mappings":"AAAA;AAGA,SAASA,WAAW,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AAEtD,SAASC,uBAAuB,QAAQ,8BAA8B;AAqDtE,MAAMC,OAAO;AACX,aAAa;AACf;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+BC,GACD,OAAO,SAASC,eACdC,UAAkC,CAAC,CAAC;IAEpC,MAAM,EACJC,SAASJ,uBAAuB,EAChCK,YAAY,cAAc,EAC1BC,gBAAgBL,IAAI,EACpBM,gBAAgB,IAAI,EACrB,GAAGJ;IACJ,MAAM,CAACK,QAAQC,UAAU,GAAGV,SAAwB,CAAC;IACrD,MAAM,CAACW,SAASC,WAAW,GAAGZ,SAAS;IACvC,MAAMa,UAAUd,OAAoB;IACpC,MAAMe,iBAAiBhB,YAAY;QACjCc,WAAW;IACb,GAAG,EAAE;IAEL,OAAO;QACLD;QACAC;QACAG,WAAW;YACT,cAAcT;YACdD;YACA,GAAGI,MAAM;YACTI;YACAF;YACAG;YACAN;QACF;QACAD,eAAcS,KAAK;YACjBT,cAAcS;YACd,IAAIA,MAAMC,oBAAoB,IAAI;gBAChC;YACF;YAEAD,MAAME,cAAc;YACpBF,MAAMG,eAAe;YACrBT,UAAU;gBACRU,UAAUJ,MAAMK,OAAO;gBACvBC,UAAUN,MAAMO,OAAO;YACzB;YACAX,WAAW;QACb;IACF;AACF"}
|
package/dist/movement/types.d.ts
CHANGED
|
@@ -111,9 +111,15 @@ export interface KeyboardMovementBehavior {
|
|
|
111
111
|
}
|
|
112
112
|
/**
|
|
113
113
|
* @since 6.3.0
|
|
114
|
+
* @since 6.4.0 Added `force` option.
|
|
114
115
|
*/
|
|
115
116
|
export interface KeyboardFocusFromKeyOptions {
|
|
116
117
|
key: string;
|
|
118
|
+
/**
|
|
119
|
+
* @since 6.4.0
|
|
120
|
+
* @defaultValue `false`
|
|
121
|
+
*/
|
|
122
|
+
force?: boolean;
|
|
117
123
|
/** @defaultValue `false` */
|
|
118
124
|
reversed?: boolean;
|
|
119
125
|
/** @defaultValue `getFocusableElementsFromRef()` */
|
|
@@ -122,10 +128,21 @@ export interface KeyboardFocusFromKeyOptions {
|
|
|
122
128
|
/**
|
|
123
129
|
* @since 6.3.0
|
|
124
130
|
*/
|
|
125
|
-
export type KeyboardFocusAction = (focusables?: readonly HTMLElement[]) => void;
|
|
131
|
+
export type KeyboardFocusAction = (focusables?: readonly HTMLElement[], force?: boolean) => void;
|
|
132
|
+
/**
|
|
133
|
+
* @since 6.4.0
|
|
134
|
+
*/
|
|
135
|
+
export interface KeyboardMovementUpdateFocusIndexOptions {
|
|
136
|
+
index: number;
|
|
137
|
+
force?: boolean;
|
|
138
|
+
focusables?: readonly HTMLElement[];
|
|
139
|
+
}
|
|
126
140
|
/**
|
|
127
141
|
* @since 5.0.0
|
|
128
142
|
* @since 6.0.0 Removed `attach`, `detach` and `watching`
|
|
143
|
+
* @since 6.3.0 Added `focusFirst`, `focusLast`, `focusNext`, `focusPrevious`
|
|
144
|
+
* and `focusFromKey`.
|
|
145
|
+
* @since 6.4.0 Added `focusCurrent` and `updateFocusIndex`
|
|
129
146
|
* @internal
|
|
130
147
|
*/
|
|
131
148
|
export interface KeyboardMovementContext extends Required<KeyboardMovementBehavior> {
|
|
@@ -158,6 +175,14 @@ export interface KeyboardMovementContext extends Required<KeyboardMovementBehavi
|
|
|
158
175
|
* @since 6.3.0
|
|
159
176
|
*/
|
|
160
177
|
focusFromKey: (options: KeyboardFocusFromKeyOptions) => void;
|
|
178
|
+
/**
|
|
179
|
+
* @since 6.4.0
|
|
180
|
+
*/
|
|
181
|
+
focusCurrent: (focusables?: readonly HTMLElement[], force?: boolean) => HTMLElement | undefined;
|
|
182
|
+
/**
|
|
183
|
+
* @since 6.4.0
|
|
184
|
+
*/
|
|
185
|
+
updateFocusIndex: (options: KeyboardMovementUpdateFocusIndexOptions) => void;
|
|
161
186
|
}
|
|
162
187
|
/**
|
|
163
188
|
* @since 6.0.0
|
|
@@ -209,6 +234,8 @@ export type KeyboardMovementEventHandlers<E extends HTMLElement> = Pick<HTMLAttr
|
|
|
209
234
|
*/
|
|
210
235
|
export interface SimpleKeyboardMovementWrapperOptions<E extends HTMLElement> extends KeyboardMovementEventHandlers<E> {
|
|
211
236
|
ref?: Ref<E>;
|
|
237
|
+
/** @defaultValue `false` */
|
|
238
|
+
disabled?: boolean;
|
|
212
239
|
}
|
|
213
240
|
/**
|
|
214
241
|
* @since 6.0.0
|
|
@@ -217,8 +244,6 @@ export interface SimpleKeyboardMovementWrapperOptions<E extends HTMLElement> ext
|
|
|
217
244
|
export interface KeyboardMovementProviderOptions<E extends HTMLElement> extends KeyboardMovementBehavior, SimpleKeyboardMovementWrapperOptions<E>, KeyboardMovementConfiguration {
|
|
218
245
|
/** @see {@link TabIndexBehavior} */
|
|
219
246
|
tabIndexBehavior?: TabIndexBehavior;
|
|
220
|
-
/** @defaultValue `false` */
|
|
221
|
-
disabled?: boolean;
|
|
222
247
|
/**
|
|
223
248
|
* This is used to implement custom keyboard movement for the `keydown` event.
|
|
224
249
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/movement/types.ts"],"sourcesContent":["import {\n type HTMLAttributes,\n type KeyboardEvent,\n type Ref,\n type RefCallback,\n type RefObject,\n} from \"react\";\n\nimport {\n type NonNullMutableRef,\n type NonNullRef,\n type UseStateSetter,\n} from \"../types.js\";\n\n/**\n * Set this to `\"roving\"` when:\n * - there are a group of focusable elements that have a `tabIndex={-1}`\n * - the container element defaults to having a `tabIndex={0}`\n * - if the container is focused, it should no longer be included in the normal\n * tab flow. Instead, the current focused element should be included instead\n * by changing its `tabIndex` from `-1` to `0`\n *\n * Set this to `\"virtual\"` when:\n * - the container element should never lose focus\n * - the \"focused\" element only gains focus styles instead of being focused\n * - the container element specifies an `aria-activedescendant` pointing to one\n * of the ids for the child \"focusable\" elements\n *\n * @since 6.0.0\n */\nexport type TabIndexBehavior = \"roving\" | \"virtual\";\n\n/**\n * This should be used for specific widgets that should not include all\n * focusable elements and instead only specific elements.\n *\n * @example\n * ```ts\n * const getExpansionPanelsOnly: GetFocusableElements = (container) =>\n * [...container.querySelectorAll(\".rmd-expansion-panel__button\")];\n *\n * const getTreeItemsOnly: GetFocusableElements = (container) =>\n * [...container.querySelectorAll(\"[role='treeitem']\")];\n * ```\n *\n * @defaultValue `getFocusableElements`\n * @see the default `getFocusableElements` function.\n */\nexport type GetFocusableElements = (\n container: HTMLElement,\n programmatic: boolean\n) => readonly HTMLElement[];\n\n/**\n * @since 5.0.0\n */\nexport interface KeyboardMovementConfiguration {\n /**\n * A list of keys that will attempt to increment the focus index by 1.\n *\n * @defaultValue `[\"ArrowDown\"]`\n */\n incrementKeys?: readonly string[];\n\n /**\n * A list of keys that will attempt to decrement the focus index by 1.\n *\n * @defaultValue `[\"ArrowUp\"]`\n */\n decrementKeys?: readonly string[];\n\n /**\n * A list of keys that will set the focus index to `0`.\n *\n * @defaultValue `[\"Home\"]`\n */\n jumpToFirstKeys?: readonly string[];\n\n /**\n * A list of keys that will set the focus index to the last focusable index.\n *\n * @defaultValue `[\"End\"]`\n */\n jumpToLastKeys?: readonly string[];\n}\n\n/**\n * The defined {@link KeyboardMovementConfiguration} that should be used for\n * custom keyboard focus behavior.\n *\n * @since 5.0.0\n */\nexport type KeyboardMovementConfig = Required<KeyboardMovementConfiguration>;\n\n/**\n * @since 5.0.0\n */\nexport interface KeyboardMovementBehavior {\n /**\n * Boolean if pressing a letter will focus the next item in the\n * {@link KeyboardMovementProvider} that starts with the same letter.\n *\n * @defaultValue `false`\n */\n searchable?: boolean;\n\n /**\n * Boolean if the {@link KeyboardMovementProvider} should allow the focus behavior\n * to loop from the first to last or last to first item instead of preventing\n * any new focus behavior. In other words... if the last item is focused and\n * the user presses a key that should advance the focus to the next focusable\n * element, should the focus stay on the current element or loop back and\n * focus the first focusable item.\n *\n * @defaultValue `false`\n */\n loopable?: boolean;\n\n /**\n * Boolean if elements that are `aria-disabled` or `disabled` should still be\n * able to gain focus.\n *\n * @defaultValue `false`\n */\n includeDisabled?: boolean;\n\n /**\n * Boolean if the keyboard movement is horizontal instead of vertical. This\n * updates the default keyboard config to use `ArrowRight` and `ArrowLeft`\n * instead of `ArrowDown` and `ArrowUp`,\n *\n * @since 5.1.2\n * @defaultValue `false`\n */\n horizontal?: boolean;\n}\n\n/**\n * @since 6.3.0\n */\nexport interface KeyboardFocusFromKeyOptions {\n key: string;\n /** @defaultValue `false` */\n reversed?: boolean;\n\n /** @defaultValue `getFocusableElementsFromRef()` */\n focusables?: readonly HTMLElement[];\n}\n\n/**\n * @since 6.3.0\n */\nexport type KeyboardFocusAction = (focusables?: readonly HTMLElement[]) => void;\n\n/**\n * @since 5.0.0\n * @since 6.0.0 Removed `attach`, `detach` and `watching`\n * @internal\n */\nexport interface KeyboardMovementContext\n extends Required<KeyboardMovementBehavior> {\n /** {@inheritDoc KeyboardMovementConfig} */\n config: NonNullRef<KeyboardMovementConfig>;\n\n /** @see {@link TabIndexBehavior} */\n tabIndexBehavior: TabIndexBehavior | undefined;\n\n /**\n * Note: This will only update if the {@link KeyboardMovementProviderOptions.tabIndexBehavior}\n * has been set to `\"roving\"` or `\"virtual\"`.\n */\n activeDescendantId: string;\n\n /**\n * @since 6.3.0\n */\n focusFirst: KeyboardFocusAction;\n\n /**\n * @since 6.3.0\n */\n focusLast: KeyboardFocusAction;\n\n /**\n * @since 6.3.0\n */\n focusNext: KeyboardFocusAction;\n\n /**\n * @since 6.3.0\n */\n focusPrevious: KeyboardFocusAction;\n\n /**\n * @since 6.3.0\n */\n focusFromKey: (options: KeyboardFocusFromKeyOptions) => void;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface FocusableIndexOptions {\n focusables: readonly HTMLElement[];\n includeDisabled: boolean;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport type GetDefaultFocusedIndex = (options: FocusableIndexOptions) => number;\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport type ExtendKeyDown<E extends HTMLElement> = (\n movementData: KeyboardMovementExtensionData<E>\n) => void;\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface KeyboardMovementFocusChangeEvent {\n index: number;\n element: HTMLElement;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport type KeyboardMovementFocusChangeEventHandler = (\n event: KeyboardMovementFocusChangeEvent\n) => void;\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface KeyboardMovementExtensionData<E extends HTMLElement>\n extends KeyboardMovementContext {\n event: KeyboardEvent<E>;\n currentFocusIndex: NonNullMutableRef<number>;\n setFocusIndex: (index: number, focusables: readonly HTMLElement[]) => void;\n setActiveDescendantId: (id: string) => void;\n}\n\n/**\n * @since 6.3.0\n */\nexport type KeyboardMovementEventHandlers<E extends HTMLElement> = Pick<\n HTMLAttributes<E>,\n \"onClick\" | \"onFocus\" | \"onKeyDown\"\n>;\n\n/**\n * @since 6.3.0\n */\nexport interface SimpleKeyboardMovementWrapperOptions<E extends HTMLElement>\n extends KeyboardMovementEventHandlers<E> {\n ref?: Ref<E>;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface KeyboardMovementProviderOptions<E extends HTMLElement>\n extends KeyboardMovementBehavior,\n SimpleKeyboardMovementWrapperOptions<E>,\n KeyboardMovementConfiguration {\n /** @see {@link TabIndexBehavior} */\n tabIndexBehavior?: TabIndexBehavior;\n\n /** @defaultValue `false` */\n disabled?: boolean;\n\n /**\n * This is used to implement custom keyboard movement for the `keydown` event.\n */\n extendKeyDown?: ExtendKeyDown<E>;\n\n /**\n * Triggered whenever the focus changes.\n */\n onFocusChange?: KeyboardMovementFocusChangeEventHandler;\n\n /**\n * From what I've understood so far, programmatically focusable elements\n * should only be included when disabled elements via `aria-disabled` are\n * allowed.\n *\n * @defaultValue `includeDisabled`\n */\n programmatic?: boolean;\n\n /** @see {@link GetFocusableElements} */\n getFocusableElements?: GetFocusableElements;\n\n /**\n * This can be used to set the initial focus index whenever the container\n * element is first focused or the focus index is `-1` on other focus events.\n */\n getDefaultFocusedIndex?: GetDefaultFocusedIndex;\n\n /**\n * This was added to support editable combobox behavior. As the user types or\n * uses native input keyboard behavior, the focus index should be reset to\n * `-1` so that the next \"ArrowDown\" event focuses the first option again\n * instead of the last selected one.\n *\n * @defaultValue `false`\n */\n isNegativeOneAllowed?: boolean;\n\n /**\n * This was added to support spinbutton groups so the user can either use the\n * ArrowLeft, ArrowRight, or Tab keys to move. Without this, switching\n * between tab and the arrow keys would have the wrong tab index.\n *\n * @since 6.3.0\n * @defaultValue `false`\n */\n trackTabKeys?: boolean;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface KeyboardMovementProps<E extends HTMLElement>\n extends Required<KeyboardMovementEventHandlers<E>> {\n /**\n * This will only be provided if the {@link KeyboardMovementContext.tabIndexBehavior}\n * is set to `\"virtual\"`.\n */\n \"aria-activedescendant\"?: string;\n\n /**\n * This will not be provided if the {@link KeyboardMovementContext.tabIndexBehavior}\n * is `undefined`. Otherwise:\n * - `0` when `\"virtual\"`\n * - `0` when `\"roving\"` and the container element has not been focused at\n * least once\n * - `-1` when `\"roving\"` and the container has been focused at least once\n * - a child element **should** have a `tabIndex={0}` instead\n */\n tabIndex?: number;\n\n ref: RefCallback<E>;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface KeyboardMovementProviderImplementation<E extends HTMLElement> {\n nodeRef: RefObject<E>;\n movementProps: Readonly<KeyboardMovementProps<E>>;\n movementContext: Readonly<KeyboardMovementContext>;\n currentFocusIndex: NonNullMutableRef<number>;\n activeDescendantId: string;\n setActiveDescendantId: UseStateSetter<string>;\n}\n"],"names":[],"mappings":"AAoWA;;;CAGC,GACD,WAOC"}
|
|
1
|
+
{"version":3,"sources":["../../src/movement/types.ts"],"sourcesContent":["import {\n type HTMLAttributes,\n type KeyboardEvent,\n type Ref,\n type RefCallback,\n type RefObject,\n} from \"react\";\n\nimport {\n type NonNullMutableRef,\n type NonNullRef,\n type UseStateSetter,\n} from \"../types.js\";\n\n/**\n * Set this to `\"roving\"` when:\n * - there are a group of focusable elements that have a `tabIndex={-1}`\n * - the container element defaults to having a `tabIndex={0}`\n * - if the container is focused, it should no longer be included in the normal\n * tab flow. Instead, the current focused element should be included instead\n * by changing its `tabIndex` from `-1` to `0`\n *\n * Set this to `\"virtual\"` when:\n * - the container element should never lose focus\n * - the \"focused\" element only gains focus styles instead of being focused\n * - the container element specifies an `aria-activedescendant` pointing to one\n * of the ids for the child \"focusable\" elements\n *\n * @since 6.0.0\n */\nexport type TabIndexBehavior = \"roving\" | \"virtual\";\n\n/**\n * This should be used for specific widgets that should not include all\n * focusable elements and instead only specific elements.\n *\n * @example\n * ```ts\n * const getExpansionPanelsOnly: GetFocusableElements = (container) =>\n * [...container.querySelectorAll(\".rmd-expansion-panel__button\")];\n *\n * const getTreeItemsOnly: GetFocusableElements = (container) =>\n * [...container.querySelectorAll(\"[role='treeitem']\")];\n * ```\n *\n * @defaultValue `getFocusableElements`\n * @see the default `getFocusableElements` function.\n */\nexport type GetFocusableElements = (\n container: HTMLElement,\n programmatic: boolean\n) => readonly HTMLElement[];\n\n/**\n * @since 5.0.0\n */\nexport interface KeyboardMovementConfiguration {\n /**\n * A list of keys that will attempt to increment the focus index by 1.\n *\n * @defaultValue `[\"ArrowDown\"]`\n */\n incrementKeys?: readonly string[];\n\n /**\n * A list of keys that will attempt to decrement the focus index by 1.\n *\n * @defaultValue `[\"ArrowUp\"]`\n */\n decrementKeys?: readonly string[];\n\n /**\n * A list of keys that will set the focus index to `0`.\n *\n * @defaultValue `[\"Home\"]`\n */\n jumpToFirstKeys?: readonly string[];\n\n /**\n * A list of keys that will set the focus index to the last focusable index.\n *\n * @defaultValue `[\"End\"]`\n */\n jumpToLastKeys?: readonly string[];\n}\n\n/**\n * The defined {@link KeyboardMovementConfiguration} that should be used for\n * custom keyboard focus behavior.\n *\n * @since 5.0.0\n */\nexport type KeyboardMovementConfig = Required<KeyboardMovementConfiguration>;\n\n/**\n * @since 5.0.0\n */\nexport interface KeyboardMovementBehavior {\n /**\n * Boolean if pressing a letter will focus the next item in the\n * {@link KeyboardMovementProvider} that starts with the same letter.\n *\n * @defaultValue `false`\n */\n searchable?: boolean;\n\n /**\n * Boolean if the {@link KeyboardMovementProvider} should allow the focus behavior\n * to loop from the first to last or last to first item instead of preventing\n * any new focus behavior. In other words... if the last item is focused and\n * the user presses a key that should advance the focus to the next focusable\n * element, should the focus stay on the current element or loop back and\n * focus the first focusable item.\n *\n * @defaultValue `false`\n */\n loopable?: boolean;\n\n /**\n * Boolean if elements that are `aria-disabled` or `disabled` should still be\n * able to gain focus.\n *\n * @defaultValue `false`\n */\n includeDisabled?: boolean;\n\n /**\n * Boolean if the keyboard movement is horizontal instead of vertical. This\n * updates the default keyboard config to use `ArrowRight` and `ArrowLeft`\n * instead of `ArrowDown` and `ArrowUp`,\n *\n * @since 5.1.2\n * @defaultValue `false`\n */\n horizontal?: boolean;\n}\n\n/**\n * @since 6.3.0\n * @since 6.4.0 Added `force` option.\n */\nexport interface KeyboardFocusFromKeyOptions {\n key: string;\n\n /**\n * @since 6.4.0\n * @defaultValue `false`\n */\n force?: boolean;\n\n /** @defaultValue `false` */\n reversed?: boolean;\n\n /** @defaultValue `getFocusableElementsFromRef()` */\n focusables?: readonly HTMLElement[];\n}\n\n/**\n * @since 6.3.0\n */\nexport type KeyboardFocusAction = (\n focusables?: readonly HTMLElement[],\n force?: boolean\n) => void;\n\n/**\n * @since 6.4.0\n */\nexport interface KeyboardMovementUpdateFocusIndexOptions {\n index: number;\n force?: boolean;\n focusables?: readonly HTMLElement[];\n}\n\n/**\n * @since 5.0.0\n * @since 6.0.0 Removed `attach`, `detach` and `watching`\n * @since 6.3.0 Added `focusFirst`, `focusLast`, `focusNext`, `focusPrevious`\n * and `focusFromKey`.\n * @since 6.4.0 Added `focusCurrent` and `updateFocusIndex`\n * @internal\n */\nexport interface KeyboardMovementContext extends Required<KeyboardMovementBehavior> {\n /** {@inheritDoc KeyboardMovementConfig} */\n config: NonNullRef<KeyboardMovementConfig>;\n\n /** @see {@link TabIndexBehavior} */\n tabIndexBehavior: TabIndexBehavior | undefined;\n\n /**\n * Note: This will only update if the {@link KeyboardMovementProviderOptions.tabIndexBehavior}\n * has been set to `\"roving\"` or `\"virtual\"`.\n */\n activeDescendantId: string;\n\n /**\n * @since 6.3.0\n */\n focusFirst: KeyboardFocusAction;\n\n /**\n * @since 6.3.0\n */\n focusLast: KeyboardFocusAction;\n\n /**\n * @since 6.3.0\n */\n focusNext: KeyboardFocusAction;\n\n /**\n * @since 6.3.0\n */\n focusPrevious: KeyboardFocusAction;\n\n /**\n * @since 6.3.0\n */\n focusFromKey: (options: KeyboardFocusFromKeyOptions) => void;\n\n /**\n * @since 6.4.0\n */\n focusCurrent: (\n focusables?: readonly HTMLElement[],\n force?: boolean\n ) => HTMLElement | undefined;\n\n /**\n * @since 6.4.0\n */\n updateFocusIndex: (options: KeyboardMovementUpdateFocusIndexOptions) => void;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface FocusableIndexOptions {\n focusables: readonly HTMLElement[];\n includeDisabled: boolean;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport type GetDefaultFocusedIndex = (options: FocusableIndexOptions) => number;\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport type ExtendKeyDown<E extends HTMLElement> = (\n movementData: KeyboardMovementExtensionData<E>\n) => void;\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface KeyboardMovementFocusChangeEvent {\n index: number;\n element: HTMLElement;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport type KeyboardMovementFocusChangeEventHandler = (\n event: KeyboardMovementFocusChangeEvent\n) => void;\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface KeyboardMovementExtensionData<\n E extends HTMLElement,\n> extends KeyboardMovementContext {\n event: KeyboardEvent<E>;\n currentFocusIndex: NonNullMutableRef<number>;\n setFocusIndex: (index: number, focusables: readonly HTMLElement[]) => void;\n setActiveDescendantId: (id: string) => void;\n}\n\n/**\n * @since 6.3.0\n */\nexport type KeyboardMovementEventHandlers<E extends HTMLElement> = Pick<\n HTMLAttributes<E>,\n \"onClick\" | \"onFocus\" | \"onKeyDown\"\n>;\n\n/**\n * @since 6.3.0\n */\nexport interface SimpleKeyboardMovementWrapperOptions<\n E extends HTMLElement,\n> extends KeyboardMovementEventHandlers<E> {\n ref?: Ref<E>;\n\n /** @defaultValue `false` */\n disabled?: boolean;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface KeyboardMovementProviderOptions<E extends HTMLElement>\n extends\n KeyboardMovementBehavior,\n SimpleKeyboardMovementWrapperOptions<E>,\n KeyboardMovementConfiguration {\n /** @see {@link TabIndexBehavior} */\n tabIndexBehavior?: TabIndexBehavior;\n\n /**\n * This is used to implement custom keyboard movement for the `keydown` event.\n */\n extendKeyDown?: ExtendKeyDown<E>;\n\n /**\n * Triggered whenever the focus changes.\n */\n onFocusChange?: KeyboardMovementFocusChangeEventHandler;\n\n /**\n * From what I've understood so far, programmatically focusable elements\n * should only be included when disabled elements via `aria-disabled` are\n * allowed.\n *\n * @defaultValue `includeDisabled`\n */\n programmatic?: boolean;\n\n /** @see {@link GetFocusableElements} */\n getFocusableElements?: GetFocusableElements;\n\n /**\n * This can be used to set the initial focus index whenever the container\n * element is first focused or the focus index is `-1` on other focus events.\n */\n getDefaultFocusedIndex?: GetDefaultFocusedIndex;\n\n /**\n * This was added to support editable combobox behavior. As the user types or\n * uses native input keyboard behavior, the focus index should be reset to\n * `-1` so that the next \"ArrowDown\" event focuses the first option again\n * instead of the last selected one.\n *\n * @defaultValue `false`\n */\n isNegativeOneAllowed?: boolean;\n\n /**\n * This was added to support spinbutton groups so the user can either use the\n * ArrowLeft, ArrowRight, or Tab keys to move. Without this, switching\n * between tab and the arrow keys would have the wrong tab index.\n *\n * @since 6.3.0\n * @defaultValue `false`\n */\n trackTabKeys?: boolean;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface KeyboardMovementProps<E extends HTMLElement> extends Required<\n KeyboardMovementEventHandlers<E>\n> {\n /**\n * This will only be provided if the {@link KeyboardMovementContext.tabIndexBehavior}\n * is set to `\"virtual\"`.\n */\n \"aria-activedescendant\"?: string;\n\n /**\n * This will not be provided if the {@link KeyboardMovementContext.tabIndexBehavior}\n * is `undefined`. Otherwise:\n * - `0` when `\"virtual\"`\n * - `0` when `\"roving\"` and the container element has not been focused at\n * least once\n * - `-1` when `\"roving\"` and the container has been focused at least once\n * - a child element **should** have a `tabIndex={0}` instead\n */\n tabIndex?: number;\n\n ref: RefCallback<E>;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface KeyboardMovementProviderImplementation<E extends HTMLElement> {\n nodeRef: RefObject<E>;\n movementProps: Readonly<KeyboardMovementProps<E>>;\n movementContext: Readonly<KeyboardMovementContext>;\n currentFocusIndex: NonNullMutableRef<number>;\n activeDescendantId: string;\n setActiveDescendantId: UseStateSetter<string>;\n}\n"],"names":[],"mappings":"AA2YA;;;CAGC,GACD,WAOC"}
|