@react-md/core 1.0.0-next.19 → 1.0.0-next.20
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.js.map +1 -1
- package/dist/NoSsr.js.map +1 -1
- package/dist/RootHtml.js.map +1 -1
- package/dist/SsrProvider.js.map +1 -1
- package/dist/_core.scss +10 -9
- package/dist/app-bar/AppBar.js.map +1 -1
- package/dist/app-bar/AppBarTitle.js.map +1 -1
- package/dist/app-bar/_app-bar.scss +0 -4
- package/dist/app-bar/styles.js.map +1 -1
- package/dist/autocomplete/Autocomplete.js.map +1 -1
- package/dist/autocomplete/AutocompleteChip.js +1 -1
- package/dist/autocomplete/AutocompleteChip.js.map +1 -1
- package/dist/autocomplete/AutocompleteCircularProgress.js.map +1 -1
- package/dist/autocomplete/AutocompleteClearButton.js +1 -1
- package/dist/autocomplete/AutocompleteClearButton.js.map +1 -1
- package/dist/autocomplete/AutocompleteDropdownButton.js +1 -1
- package/dist/autocomplete/AutocompleteDropdownButton.js.map +1 -1
- package/dist/autocomplete/AutocompleteListboxChildren.js.map +1 -1
- package/dist/autocomplete/_autocomplete.scss +15 -13
- package/dist/autocomplete/autocompleteStyles.js.map +1 -1
- package/dist/autocomplete/types.js.map +1 -1
- package/dist/autocomplete/useAutocomplete.js +1 -1
- package/dist/autocomplete/useAutocomplete.js.map +1 -1
- package/dist/autocomplete/utils.js.map +1 -1
- package/dist/avatar/Avatar.js.map +1 -1
- package/dist/avatar/styles.js.map +1 -1
- package/dist/badge/Badge.js.map +1 -1
- package/dist/badge/styles.js.map +1 -1
- package/dist/box/Box.js +2 -1
- package/dist/box/Box.js.map +1 -1
- package/dist/box/_box.scss +24 -1
- package/dist/box/styles.d.ts +11 -0
- package/dist/box/styles.js +4 -3
- package/dist/box/styles.js.map +1 -1
- package/dist/button/AsyncButton.js.map +1 -1
- package/dist/button/Button.js.map +1 -1
- package/dist/button/ButtonUnstyled.js.map +1 -1
- package/dist/button/FloatingActionButton.js.map +1 -1
- package/dist/button/TooltippedButton.js.map +1 -1
- package/dist/button/buttonStyles.js.map +1 -1
- package/dist/card/Card.d.ts +4 -13
- package/dist/card/Card.js +3 -3
- package/dist/card/Card.js.map +1 -1
- package/dist/card/CardContent.js.map +1 -1
- package/dist/card/CardFooter.js.map +1 -1
- package/dist/card/CardHeader.js.map +1 -1
- package/dist/card/CardSubtitle.js.map +1 -1
- package/dist/card/CardTitle.js.map +1 -1
- package/dist/card/ClickableCard.js.map +1 -1
- package/dist/card/_card.scss +5 -0
- package/dist/card/styles.js.map +1 -1
- package/dist/chip/Chip.js +1 -1
- package/dist/chip/Chip.js.map +1 -1
- package/dist/chip/styles.js.map +1 -1
- package/dist/dialog/Dialog.d.ts +4 -4
- package/dist/dialog/Dialog.js.map +1 -1
- package/dist/dialog/DialogContent.js.map +1 -1
- package/dist/dialog/DialogFooter.js.map +1 -1
- package/dist/dialog/DialogHeader.js.map +1 -1
- package/dist/dialog/DialogTitle.js.map +1 -1
- package/dist/dialog/FixedDialog.js +8 -5
- package/dist/dialog/FixedDialog.js.map +1 -1
- package/dist/dialog/NestedDialogProvider.js.map +1 -1
- package/dist/dialog/styles.d.ts +12 -3
- package/dist/dialog/styles.js.map +1 -1
- package/dist/divider/Divider.js.map +1 -1
- package/dist/divider/styles.js.map +1 -1
- package/dist/draggable/useDraggable.d.ts +3 -0
- package/dist/draggable/useDraggable.js +20 -5
- package/dist/draggable/useDraggable.js.map +1 -1
- package/dist/draggable/utils.js.map +1 -1
- package/dist/expansion-panel/ExpansionList.js.map +1 -1
- package/dist/expansion-panel/ExpansionPanel.js.map +1 -1
- package/dist/expansion-panel/ExpansionPanelHeader.js +1 -1
- package/dist/expansion-panel/ExpansionPanelHeader.js.map +1 -1
- package/dist/expansion-panel/expansionPanelStyles.js.map +1 -1
- package/dist/expansion-panel/useExpansionList.js.map +1 -1
- package/dist/expansion-panel/useExpansionPanels.js.map +1 -1
- package/dist/files/FileInput.js +1 -1
- package/dist/files/FileInput.js.map +1 -1
- package/dist/files/styles.js.map +1 -1
- package/dist/files/useFileUpload.js.map +1 -1
- package/dist/files/utils.d.ts +31 -1
- package/dist/files/utils.js +30 -0
- package/dist/files/utils.js.map +1 -1
- package/dist/focus/useFocusContainer.d.ts +5 -7
- package/dist/focus/useFocusContainer.js +5 -7
- package/dist/focus/useFocusContainer.js.map +1 -1
- package/dist/form/Checkbox.js.map +1 -1
- package/dist/form/Fieldset.js.map +1 -1
- package/dist/form/Form.js.map +1 -1
- package/dist/form/FormMessage.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/InputToggleIcon.js +1 -1
- package/dist/form/InputToggleIcon.js.map +1 -1
- package/dist/form/Label.js.map +1 -1
- 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/MenuItemCheckbox.js.map +1 -1
- package/dist/form/MenuItemFileInput.d.ts +1 -4
- package/dist/form/MenuItemFileInput.js +15 -6
- package/dist/form/MenuItemFileInput.js.map +1 -1
- package/dist/form/MenuItemInputToggle.js.map +1 -1
- package/dist/form/MenuItemRadio.js.map +1 -1
- package/dist/form/MenuItemSwitch.js.map +1 -1
- package/dist/form/MenuItemTextField.js.map +1 -1
- package/dist/form/NativeSelect.js +1 -1
- package/dist/form/NativeSelect.js.map +1 -1
- package/dist/form/OptGroup.js.map +1 -1
- package/dist/form/Option.js +4 -4
- package/dist/form/Option.js.map +1 -1
- package/dist/form/Password.js +2 -2
- package/dist/form/Password.js.map +1 -1
- package/dist/form/Radio.js.map +1 -1
- package/dist/form/ResizingTextAreaWrapper.js.map +1 -1
- package/dist/form/Select.js +1 -1
- package/dist/form/Select.js.map +1 -1
- package/dist/form/SelectedOption.js.map +1 -1
- package/dist/form/Slider.js +9 -62
- package/dist/form/Slider.js.map +1 -1
- package/dist/form/SliderContainer.js.map +1 -1
- package/dist/form/SliderMark.js.map +1 -1
- package/dist/form/SliderMarkLabel.js.map +1 -1
- package/dist/form/SliderThumb.js +1 -0
- 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/SliderValueTooltip.js.map +1 -1
- package/dist/form/Switch.js.map +1 -1
- package/dist/form/SwitchTrack.js.map +1 -1
- package/dist/form/TextArea.js.map +1 -1
- package/dist/form/TextField.js.map +1 -1
- package/dist/form/TextFieldAddon.js.map +1 -1
- package/dist/form/TextFieldContainer.js.map +1 -1
- package/dist/form/_form.scss +313 -269
- package/dist/form/formMessageContainerStyles.js.map +1 -1
- package/dist/form/formMessageStyles.js.map +1 -1
- package/dist/form/inputToggleStyles.js.map +1 -1
- package/dist/form/menuItemInputToggleStyles.js.map +1 -1
- package/dist/form/nativeSelectStyles.js.map +1 -1
- package/dist/form/optionStyles.js.map +1 -1
- package/dist/form/passwordStyles.js.map +1 -1
- package/dist/form/selectStyles.js.map +1 -1
- package/dist/form/selectUtils.js.map +1 -1
- package/dist/form/sliderUtils.d.ts +2 -7
- package/dist/form/sliderUtils.js +5 -5
- package/dist/form/sliderUtils.js.map +1 -1
- package/dist/form/switchStyles.js.map +1 -1
- package/dist/form/textAreaStyles.js.map +1 -1
- package/dist/form/textFieldContainerStyles.js.map +1 -1
- package/dist/form/textFieldStyles.js.map +1 -1
- package/dist/form/types.js.map +1 -1
- package/dist/form/useCheckboxGroup.d.ts +2 -2
- package/dist/form/useCheckboxGroup.js.map +1 -1
- package/dist/form/useCombobox.js.map +1 -1
- package/dist/form/useEditableCombobox.js.map +1 -1
- package/dist/form/useFormReset.js.map +1 -1
- package/dist/form/useNumberField.js.map +1 -1
- package/dist/form/useRadioGroup.d.ts +1 -1
- package/dist/form/useRadioGroup.js.map +1 -1
- package/dist/form/useRangeSlider.d.ts +1 -0
- package/dist/form/useRangeSlider.js.map +1 -1
- package/dist/form/useResizingTextArea.js.map +1 -1
- package/dist/form/useSelectCombobox.js.map +1 -1
- package/dist/form/useSlider.d.ts +1 -3
- package/dist/form/useSlider.js.map +1 -1
- package/dist/form/useSliderDraggable.d.ts +9 -0
- package/dist/form/useSliderDraggable.js +44 -0
- package/dist/form/useSliderDraggable.js.map +1 -0
- package/dist/form/useTextField.d.ts +24 -14
- package/dist/form/useTextField.js +7 -5
- package/dist/form/useTextField.js.map +1 -1
- package/dist/form/useTextFieldContainerAddons.js.map +1 -1
- package/dist/form/validation.js +2 -0
- package/dist/form/validation.js.map +1 -1
- package/dist/hoverMode/useHoverMode.d.ts +64 -3
- package/dist/hoverMode/useHoverMode.js.map +1 -1
- package/dist/hoverMode/useHoverModeProvider.d.ts +22 -12
- package/dist/hoverMode/useHoverModeProvider.js +21 -11
- package/dist/hoverMode/useHoverModeProvider.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/TextIconSpacing.js.map +1 -1
- package/dist/icon/{iconConfig.js → config.js} +1 -1
- package/dist/icon/config.js.map +1 -0
- package/dist/icon/materialConfig.js.map +1 -1
- package/dist/icon/styles.js.map +1 -1
- package/dist/interaction/Ripple.js.map +1 -1
- package/dist/interaction/RippleContainer.js.map +1 -1
- package/dist/interaction/UserInteractionModeProvider.js.map +1 -1
- package/dist/interaction/_interaction.scss +2 -2
- package/dist/interaction/useElementInteraction.d.ts +24 -25
- package/dist/interaction/useElementInteraction.js +20 -21
- package/dist/interaction/useElementInteraction.js.map +1 -1
- package/dist/interaction/useHigherContrastChildren.d.ts +8 -6
- package/dist/interaction/useHigherContrastChildren.js +10 -8
- package/dist/interaction/useHigherContrastChildren.js.map +1 -1
- package/dist/interaction/utils.js.map +1 -1
- 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/_layout.scss +4 -0
- package/dist/layout/layoutNavStyles.js.map +1 -1
- package/dist/layout/layoutWindowSplitterStyles.js.map +1 -1
- package/dist/layout/mainStyles.js.map +1 -1
- package/dist/layout/useExpandableLayout.d.ts +12 -14
- package/dist/layout/useExpandableLayout.js +13 -15
- package/dist/layout/useExpandableLayout.js.map +1 -1
- package/dist/layout/useHorizontalLayoutTransition.js.map +1 -1
- package/dist/layout/useLayoutAppBarHeight.js.map +1 -1
- package/dist/layout/useLayoutTree.d.ts +4 -3
- package/dist/layout/useLayoutTree.js +4 -3
- package/dist/layout/useLayoutTree.js.map +1 -1
- package/dist/layout/useLayoutWindowSplitter.js.map +1 -1
- package/dist/layout/useMainTabIndex.js.map +1 -1
- package/dist/layout/useResizableLayout.d.ts +13 -16
- package/dist/layout/useResizableLayout.js +13 -16
- package/dist/layout/useResizableLayout.js.map +1 -1
- package/dist/layout/useTemporaryLayout.d.ts +14 -9
- package/dist/layout/useTemporaryLayout.js +12 -10
- package/dist/layout/useTemporaryLayout.js.map +1 -1
- package/dist/link/Link.js.map +1 -1
- package/dist/link/SkipToMainContent.js.map +1 -1
- package/dist/link/styles.js.map +1 -1
- package/dist/list/List.js.map +1 -1
- package/dist/list/ListItem.js +1 -1
- package/dist/list/ListItem.js.map +1 -1
- package/dist/list/ListItemAddon.js.map +1 -1
- package/dist/list/ListItemChildren.js.map +1 -1
- package/dist/list/ListItemLink.js.map +1 -1
- package/dist/list/ListItemText.js.map +1 -1
- package/dist/list/ListSubheader.js.map +1 -1
- package/dist/list/listItemStyles.js.map +1 -1
- package/dist/list/listStyles.js.map +1 -1
- package/dist/list/types.js.map +1 -1
- package/dist/media-queries/AppSizeProvider.d.ts +1 -1
- package/dist/media-queries/AppSizeProvider.js +1 -1
- package/dist/media-queries/AppSizeProvider.js.map +1 -1
- package/dist/media-queries/useMediaQuery.d.ts +3 -3
- package/dist/media-queries/useMediaQuery.js +3 -3
- package/dist/media-queries/useMediaQuery.js.map +1 -1
- package/dist/menu/DropdownMenu.js.map +1 -1
- package/dist/menu/Menu.js.map +1 -1
- package/dist/menu/MenuBar.js.map +1 -1
- package/dist/menu/MenuButton.js +1 -1
- package/dist/menu/MenuButton.js.map +1 -1
- package/dist/menu/MenuConfigurationProvider.js.map +1 -1
- package/dist/menu/MenuItem.js.map +1 -1
- package/dist/menu/MenuItemButton.js +1 -1
- package/dist/menu/MenuItemButton.js.map +1 -1
- package/dist/menu/MenuItemCircularProgress.js.map +1 -1
- package/dist/menu/MenuItemGroup.js.map +1 -1
- package/dist/menu/MenuItemSeparator.js.map +1 -1
- package/dist/menu/MenuSheet.js.map +1 -1
- package/dist/menu/MenuVisibilityProvider.js.map +1 -1
- package/dist/menu/MenuWidget.js.map +1 -1
- package/dist/menu/MenuWidgetKeyboardProvider.js.map +1 -1
- package/dist/menu/useContextMenu.js.map +1 -1
- package/dist/menu/useMenuBarProvider.js.map +1 -1
- package/dist/movement/types.js.map +1 -1
- package/dist/movement/useKeyboardMovementProvider.js.map +1 -1
- package/dist/movement/utils.js.map +1 -1
- package/dist/navigation/CollapsibleNavGroup.js.map +1 -1
- package/dist/navigation/DefaultNavigationRenderer.js.map +1 -1
- package/dist/navigation/NavGroup.js.map +1 -1
- package/dist/navigation/NavItem.js.map +1 -1
- package/dist/navigation/NavItemButton.js +1 -1
- package/dist/navigation/NavItemButton.js.map +1 -1
- package/dist/navigation/NavItemLink.js.map +1 -1
- package/dist/navigation/NavSubheader.d.ts +1 -1
- package/dist/navigation/NavSubheader.js +1 -1
- package/dist/navigation/NavSubheader.js.map +1 -1
- package/dist/navigation/Navigation.js.map +1 -1
- package/dist/navigation/navGroupStyles.js.map +1 -1
- package/dist/navigation/navItemStyles.js.map +1 -1
- package/dist/navigation/types.js.map +1 -1
- package/dist/navigation/useActiveHeadingId.d.ts +1 -1
- package/dist/navigation/useActiveHeadingId.js +4 -4
- package/dist/navigation/useActiveHeadingId.js.map +1 -1
- package/dist/navigation/useNavigationExpansion.js.map +1 -1
- package/dist/navigation/useTableOfContentsHeadings.d.ts +75 -0
- package/dist/navigation/useTableOfContentsHeadings.js +91 -0
- package/dist/navigation/useTableOfContentsHeadings.js.map +1 -0
- package/dist/objectFit.js.map +1 -1
- package/dist/overlay/Overlay.js +1 -1
- package/dist/overlay/Overlay.js.map +1 -1
- package/dist/overlay/overlayStyles.d.ts +7 -3
- package/dist/overlay/overlayStyles.js.map +1 -1
- package/dist/portal/Portal.js.map +1 -1
- package/dist/portal/PortalContainerProvider.js.map +1 -1
- package/dist/positioning/createHorizontalPosition.js.map +1 -1
- package/dist/positioning/createVerticalPosition.js.map +1 -1
- package/dist/positioning/useFixedPositioning.d.ts +11 -8
- package/dist/positioning/useFixedPositioning.js +7 -6
- 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/_progress.scss +2 -1
- package/dist/responsive-item/ResponsiveItem.js.map +1 -1
- package/dist/responsive-item/ResponsiveItemOverlay.js.map +1 -1
- package/dist/responsive-item/responsiveItemOverlayStyles.js.map +1 -1
- package/dist/responsive-item/responsiveItemStyles.js.map +1 -1
- package/dist/scroll/ScrollLock.js.map +1 -1
- package/dist/scroll/useScrollLock.d.ts +1 -1
- package/dist/scroll/useScrollLock.js +1 -1
- package/dist/scroll/useScrollLock.js.map +1 -1
- package/dist/searching/fuzzy.d.ts +1 -1
- package/dist/searching/fuzzy.js.map +1 -1
- package/dist/searching/useFuzzyMatch.js.map +1 -1
- package/dist/segmented-button/SegmentedButton.js +1 -1
- package/dist/segmented-button/SegmentedButton.js.map +1 -1
- package/dist/segmented-button/SegmentedButtonContainer.js.map +1 -1
- package/dist/segmented-button/_segmented-button.scss +40 -0
- package/dist/segmented-button/segmentedButtonContainerStyles.js.map +1 -1
- package/dist/segmented-button/segmentedButtonStyles.js.map +1 -1
- package/dist/sheet/Sheet.js.map +1 -1
- package/dist/sheet/styles.js.map +1 -1
- package/dist/snackbar/DefaultToastRenderer.js.map +1 -1
- package/dist/snackbar/Snackbar.js.map +1 -1
- package/dist/snackbar/Toast.js.map +1 -1
- package/dist/snackbar/ToastActionButton.js.map +1 -1
- package/dist/snackbar/ToastCloseButton.js +1 -1
- package/dist/snackbar/ToastCloseButton.js.map +1 -1
- package/dist/snackbar/ToastContent.js.map +1 -1
- package/dist/snackbar/ToastManager.js.map +1 -1
- package/dist/snackbar/ToastManagerProvider.js.map +1 -1
- package/dist/snackbar/snackbarStyles.js.map +1 -1
- package/dist/snackbar/toastContentStyles.js.map +1 -1
- package/dist/snackbar/toastStyles.js.map +1 -1
- package/dist/snackbar/useCurrentToastActions.js.map +1 -1
- package/dist/storage/internalUtils.d.ts +19 -0
- package/dist/storage/internalUtils.js +22 -0
- package/dist/storage/internalUtils.js.map +1 -0
- package/dist/storage/types.d.ts +75 -0
- package/dist/storage/types.js +3 -0
- package/dist/storage/types.js.map +1 -0
- package/dist/storage/useStorage.d.ts +113 -0
- package/dist/storage/useStorage.js +247 -0
- package/dist/storage/useStorage.js.map +1 -0
- package/dist/storage/utils.d.ts +94 -0
- package/dist/storage/utils.js +106 -0
- package/dist/storage/utils.js.map +1 -0
- package/dist/suspense/CircularProgressSuspense.js.map +1 -1
- package/dist/suspense/NullSuspense.js.map +1 -1
- 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/TableCell.js +1 -1
- package/dist/table/TableCell.js.map +1 -1
- package/dist/table/TableCellContent.js.map +1 -1
- package/dist/table/TableCheckbox.js.map +1 -1
- package/dist/table/TableConfigurationProvider.js.map +1 -1
- package/dist/table/TableContainer.js.map +1 -1
- package/dist/table/TableContainerProvider.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/_table.scss +0 -1
- package/dist/table/tableCellStyles.js.map +1 -1
- package/dist/table/tableFooterStyles.js.map +1 -1
- package/dist/table/tableHeaderStyles.js.map +1 -1
- package/dist/table/tableRowStyles.js.map +1 -1
- package/dist/table/tableStyles.js.map +1 -1
- package/dist/table/useStickyTableSection.js.map +1 -1
- package/dist/table/useTableSectionConfig.js.map +1 -1
- package/dist/tabs/SimpleTabPanel.d.ts +17 -0
- package/dist/tabs/SimpleTabPanel.js +21 -0
- package/dist/tabs/SimpleTabPanel.js.map +1 -0
- package/dist/tabs/SimpleTabPanels.d.ts +17 -0
- package/dist/tabs/SimpleTabPanels.js +18 -0
- package/dist/tabs/SimpleTabPanels.js.map +1 -0
- package/dist/tabs/Tab.js.map +1 -1
- package/dist/tabs/TabList.d.ts +8 -25
- package/dist/tabs/TabList.js +4 -6
- package/dist/tabs/TabList.js.map +1 -1
- package/dist/tabs/TabListScrollButton.js +2 -1
- package/dist/tabs/TabListScrollButton.js.map +1 -1
- package/dist/tabs/_tabs.scss +50 -14
- package/dist/tabs/tabIndicatorStyles.js.map +1 -1
- package/dist/tabs/tabListScrollButtonStyles.js.map +1 -1
- package/dist/tabs/tabListStyles.d.ts +9 -0
- package/dist/tabs/tabListStyles.js +2 -1
- package/dist/tabs/tabListStyles.js.map +1 -1
- package/dist/tabs/tabStyles.d.ts +7 -0
- package/dist/tabs/tabStyles.js.map +1 -1
- package/dist/tabs/types.d.ts +25 -0
- package/dist/tabs/types.js +24 -0
- package/dist/tabs/types.js.map +1 -0
- package/dist/tabs/useMaxTabPanelHeight.d.ts +82 -0
- package/dist/tabs/useMaxTabPanelHeight.js +95 -0
- package/dist/tabs/useMaxTabPanelHeight.js.map +1 -0
- package/dist/tabs/useTabList.d.ts +4 -2
- package/dist/tabs/useTabList.js +24 -6
- package/dist/tabs/useTabList.js.map +1 -1
- package/dist/tabs/useTabs.d.ts +53 -68
- package/dist/tabs/useTabs.js +6 -2
- package/dist/tabs/useTabs.js.map +1 -1
- package/dist/tabs/utils.d.ts +4 -0
- package/dist/tabs/utils.js +5 -0
- package/dist/tabs/utils.js.map +1 -1
- package/dist/test-utils/drag.d.ts +1 -0
- package/dist/test-utils/index.d.ts +6 -4
- package/dist/test-utils/index.js +6 -4
- package/dist/test-utils/index.js.map +1 -1
- package/dist/test-utils/jest-globals/index.d.ts +4 -0
- package/dist/test-utils/jest-globals/index.js +6 -0
- package/dist/test-utils/jest-globals/index.js.map +1 -0
- package/dist/test-utils/jest-globals/match-media.d.ts +32 -0
- package/dist/test-utils/jest-globals/match-media.js +35 -0
- package/dist/test-utils/jest-globals/match-media.js.map +1 -0
- package/dist/test-utils/jest-globals/resize-observer.d.ts +5 -0
- package/dist/test-utils/jest-globals/resize-observer.js +10 -0
- package/dist/test-utils/jest-globals/resize-observer.js.map +1 -0
- package/dist/test-utils/jest-globals/setup.d.ts +1 -0
- package/dist/test-utils/{jest-setup.js → jest-globals/setup.js} +4 -3
- package/dist/test-utils/jest-globals/setup.js.map +1 -0
- package/dist/test-utils/{timers.d.ts → jest-globals/timers.d.ts} +2 -2
- package/dist/test-utils/{timers.js → jest-globals/timers.js} +2 -2
- package/dist/test-utils/jest-globals/timers.js.map +1 -0
- package/dist/test-utils/jest-globals/uploadMenuItemFileInput.d.ts +32 -0
- package/dist/test-utils/jest-globals/uploadMenuItemFileInput.js +39 -0
- package/dist/test-utils/jest-globals/uploadMenuItemFileInput.js.map +1 -0
- package/dist/test-utils/mocks/IntersectionObserver.js.map +1 -0
- package/dist/test-utils/{ResizeObserver.d.ts → mocks/ResizeObserver.d.ts} +16 -23
- package/dist/test-utils/{ResizeObserver.js → mocks/ResizeObserver.js} +17 -38
- package/dist/test-utils/mocks/ResizeObserver.js.map +1 -0
- package/dist/test-utils/mocks/match-media-implementation.d.ts +42 -0
- package/dist/test-utils/mocks/match-media-implementation.js +46 -0
- package/dist/test-utils/mocks/match-media-implementation.js.map +1 -0
- package/dist/test-utils/mocks/match-media.d.ts +32 -0
- package/dist/test-utils/mocks/match-media.js +39 -0
- package/dist/test-utils/mocks/match-media.js.map +1 -0
- package/dist/test-utils/polyfills/IntersectionObserver.js +1 -1
- package/dist/test-utils/polyfills/IntersectionObserver.js.map +1 -1
- package/dist/test-utils/polyfills/ResizeObserver.js +1 -1
- package/dist/test-utils/polyfills/ResizeObserver.js.map +1 -1
- package/dist/test-utils/polyfills/matchMedia.js +1 -1
- package/dist/test-utils/polyfills/matchMedia.js.map +1 -1
- package/dist/test-utils/queries/index.d.ts +2 -0
- package/dist/test-utils/queries/index.js +4 -0
- package/dist/test-utils/queries/index.js.map +1 -0
- package/dist/test-utils/queries/select.d.ts +67 -0
- package/dist/test-utils/queries/select.js +69 -0
- package/dist/test-utils/queries/select.js.map +1 -0
- package/dist/test-utils/queries/slider.d.ts +126 -0
- package/dist/test-utils/queries/slider.js +136 -0
- package/dist/test-utils/queries/slider.js.map +1 -0
- package/dist/test-utils/queries/types.d.ts +8 -0
- package/dist/test-utils/queries/types.js +5 -0
- package/dist/test-utils/queries/types.js.map +1 -0
- package/dist/test-utils/render.js.map +1 -1
- package/dist/test-utils/utils/createFileList.d.ts +4 -0
- package/dist/test-utils/utils/createFileList.js +27 -0
- package/dist/test-utils/utils/createFileList.js.map +1 -0
- package/dist/test-utils/utils/createResizeObserverEntry.d.ts +18 -0
- package/dist/test-utils/utils/createResizeObserverEntry.js +33 -0
- package/dist/test-utils/utils/createResizeObserverEntry.js.map +1 -0
- package/dist/test-utils/vitest/index.d.ts +4 -0
- package/dist/test-utils/vitest/index.js +6 -0
- package/dist/test-utils/vitest/index.js.map +1 -0
- package/dist/test-utils/vitest/match-media.d.ts +32 -0
- package/dist/test-utils/vitest/match-media.js +35 -0
- package/dist/test-utils/vitest/match-media.js.map +1 -0
- package/dist/test-utils/vitest/resize-observer.d.ts +5 -0
- package/dist/test-utils/vitest/resize-observer.js +10 -0
- package/dist/test-utils/vitest/resize-observer.js.map +1 -0
- package/dist/test-utils/vitest/setup.d.ts +1 -0
- package/dist/test-utils/vitest/setup.js +14 -0
- package/dist/test-utils/vitest/setup.js.map +1 -0
- package/dist/test-utils/vitest/timers.d.ts +42 -0
- package/dist/test-utils/vitest/timers.js +42 -0
- package/dist/test-utils/vitest/timers.js.map +1 -0
- package/dist/test-utils/vitest/uploadMenuItemFileInput.d.ts +32 -0
- package/dist/test-utils/vitest/uploadMenuItemFileInput.js +39 -0
- package/dist/test-utils/vitest/uploadMenuItemFileInput.js.map +1 -0
- package/dist/theme/LocalStorageColorSchemeProvider.d.ts +17 -17
- package/dist/theme/LocalStorageColorSchemeProvider.js +19 -19
- package/dist/theme/LocalStorageColorSchemeProvider.js.map +1 -1
- package/dist/theme/ThemeProvider.d.ts +2 -2
- package/dist/theme/ThemeProvider.js +4 -4
- package/dist/theme/ThemeProvider.js.map +1 -1
- package/dist/theme/_theme.scss +0 -4
- package/dist/theme/isColorScheme.d.ts +5 -5
- package/dist/theme/isColorScheme.js +5 -5
- package/dist/theme/isColorScheme.js.map +1 -1
- package/dist/theme/types.d.ts +10 -22
- package/dist/theme/types.js.map +1 -1
- package/dist/theme/useCSSVariables.d.ts +8 -15
- package/dist/theme/useCSSVariables.js.map +1 -1
- package/dist/theme/useColorScheme.d.ts +15 -13
- package/dist/theme/useColorScheme.js +17 -15
- package/dist/theme/useColorScheme.js.map +1 -1
- package/dist/theme/useColorSchemeMetaTag.d.ts +15 -2
- package/dist/theme/useColorSchemeMetaTag.js +13 -0
- package/dist/theme/useColorSchemeMetaTag.js.map +1 -1
- package/dist/theme/useColorSchemeProvider.d.ts +18 -20
- package/dist/theme/useColorSchemeProvider.js +13 -13
- package/dist/theme/useColorSchemeProvider.js.map +1 -1
- package/dist/theme/{usePrefersDarkScheme.js → usePrefersDarkTheme.js} +1 -1
- package/dist/theme/usePrefersDarkTheme.js.map +1 -0
- package/dist/tooltip/Tooltip.js.map +1 -1
- package/dist/tooltip/TooltipHoverModeProvider.js.map +1 -1
- package/dist/tooltip/tooltipStyles.js.map +1 -1
- package/dist/tooltip/useTooltip.d.ts +5 -2
- package/dist/tooltip/useTooltip.js.map +1 -1
- package/dist/tooltip/useTooltipPosition.js.map +1 -1
- package/dist/transition/CSSTransition.js.map +1 -1
- package/dist/transition/Collapse.js.map +1 -1
- package/dist/transition/CrossFade.d.ts +1 -1
- package/dist/transition/CrossFade.js +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/collapseStyles.js.map +1 -1
- package/dist/transition/config.d.ts +4 -1
- package/dist/transition/config.js.map +1 -1
- package/dist/transition/maxWidthTransition.d.ts +6 -0
- package/dist/transition/maxWidthTransition.js +3 -1
- package/dist/transition/maxWidthTransition.js.map +1 -1
- package/dist/transition/skeletonPlaceholderUtils.js.map +1 -1
- package/dist/transition/types.d.ts +0 -1
- package/dist/transition/types.js.map +1 -1
- package/dist/transition/useCSSTransition.d.ts +8 -4
- package/dist/transition/useCSSTransition.js +8 -4
- package/dist/transition/useCSSTransition.js.map +1 -1
- package/dist/transition/useCarousel.js.map +1 -1
- package/dist/transition/useCollapseTransition.d.ts +13 -8
- package/dist/transition/useCollapseTransition.js +11 -6
- package/dist/transition/useCollapseTransition.js.map +1 -1
- package/dist/transition/useCrossFadeTransition.js.map +1 -1
- package/dist/transition/useMaxWidthTransition.d.ts +9 -0
- package/dist/transition/useMaxWidthTransition.js +9 -0
- package/dist/transition/useMaxWidthTransition.js.map +1 -1
- package/dist/transition/useScaleTransition.d.ts +27 -6
- package/dist/transition/useScaleTransition.js +4 -2
- package/dist/transition/useScaleTransition.js.map +1 -1
- package/dist/transition/useSkeletonPlaceholder.d.ts +16 -0
- package/dist/transition/useSkeletonPlaceholder.js +13 -1
- package/dist/transition/useSkeletonPlaceholder.js.map +1 -1
- package/dist/transition/useSlideTransition.d.ts +12 -16
- package/dist/transition/useSlideTransition.js +12 -16
- package/dist/transition/useSlideTransition.js.map +1 -1
- package/dist/transition/useTransition.js +1 -1
- package/dist/transition/useTransition.js.map +1 -1
- package/dist/tree/DefaultTreeItemRenderer.js.map +1 -1
- package/dist/tree/Tree.js.map +1 -1
- package/dist/tree/TreeGroup.js.map +1 -1
- package/dist/tree/TreeItem.js.map +1 -1
- package/dist/tree/TreeItemExpander.js +1 -1
- package/dist/tree/TreeItemExpander.js.map +1 -1
- package/dist/tree/TreeProvider.js.map +1 -1
- package/dist/tree/_tree.scss +0 -1
- package/dist/tree/styles.js.map +1 -1
- package/dist/tree/types.js.map +1 -1
- package/dist/tree/useTree.js.map +1 -1
- package/dist/tree/useTreeExpansion.js.map +1 -1
- package/dist/tree/useTreeItems.d.ts +1 -1
- package/dist/tree/useTreeItems.js.map +1 -1
- package/dist/tree/useTreeMovement.js.map +1 -1
- package/dist/tree/useTreeSelection.js.map +1 -1
- package/dist/typography/SrOnly.js.map +1 -1
- package/dist/typography/TextContainer.js.map +1 -1
- package/dist/typography/Typography.js.map +1 -1
- package/dist/typography/WritingDirectionProvider.js.map +1 -1
- package/dist/typography/textContainerStyles.js.map +1 -1
- package/dist/typography/typographyStyles.js.map +1 -1
- package/dist/useAsyncFunction.d.ts +20 -0
- package/dist/useAsyncFunction.js.map +1 -1
- package/dist/useDebouncedFunction.js.map +1 -1
- package/dist/useDropzone.d.ts +18 -11
- package/dist/useDropzone.js +27 -23
- package/dist/useDropzone.js.map +1 -1
- package/dist/useElementSize.d.ts +3 -3
- package/dist/useElementSize.js +1 -1
- package/dist/useElementSize.js.map +1 -1
- package/dist/useEnsuredId.d.ts +1 -1
- package/dist/useEnsuredId.js +1 -1
- package/dist/useEnsuredId.js.map +1 -1
- package/dist/useEnsuredRef.d.ts +1 -1
- package/dist/useEnsuredRef.js +1 -1
- package/dist/useEnsuredRef.js.map +1 -1
- package/dist/useEnsuredState.js.map +1 -1
- package/dist/useHtmlClassName.d.ts +11 -0
- package/dist/useHtmlClassName.js +11 -0
- package/dist/useHtmlClassName.js.map +1 -1
- package/dist/useIntersectionObserver.d.ts +3 -3
- package/dist/useIntersectionObserver.js +2 -2
- package/dist/useIntersectionObserver.js.map +1 -1
- package/dist/useIsomorphicLayoutEffect.js.map +1 -1
- package/dist/useMutationObserver.d.ts +3 -3
- package/dist/useMutationObserver.js +4 -4
- package/dist/useMutationObserver.js.map +1 -1
- package/dist/useOrientation.d.ts +0 -1
- package/dist/useOrientation.js +0 -1
- package/dist/useOrientation.js.map +1 -1
- package/dist/usePageInactive.d.ts +7 -2
- package/dist/usePageInactive.js +7 -2
- package/dist/usePageInactive.js.map +1 -1
- package/dist/useReadonlySet.d.ts +5 -4
- package/dist/useReadonlySet.js +4 -3
- package/dist/useReadonlySet.js.map +1 -1
- package/dist/useResizeListener.d.ts +6 -4
- package/dist/useResizeListener.js +6 -4
- package/dist/useResizeListener.js.map +1 -1
- package/dist/useResizeObserver.d.ts +1 -1
- package/dist/useResizeObserver.js +1 -1
- package/dist/useResizeObserver.js.map +1 -1
- package/dist/useThrottledFunction.js.map +1 -1
- package/dist/useToggle.d.ts +3 -3
- package/dist/useToggle.js +3 -3
- package/dist/useToggle.js.map +1 -1
- package/dist/useUnmounted.js.map +1 -1
- package/dist/useWindowSize.d.ts +1 -1
- package/dist/useWindowSize.js +1 -1
- package/dist/useWindowSize.js.map +1 -1
- package/dist/utils/RenderRecursively.d.ts +88 -32
- package/dist/utils/RenderRecursively.js +88 -32
- package/dist/utils/RenderRecursively.js.map +1 -1
- package/dist/utils/alphaNumericSort.d.ts +5 -0
- package/dist/utils/alphaNumericSort.js +5 -4
- package/dist/utils/alphaNumericSort.js.map +1 -1
- package/dist/utils/bem.d.ts +49 -6
- package/dist/utils/bem.js +5 -14
- package/dist/utils/bem.js.map +1 -1
- package/dist/utils/getRangeDefaultValue.js.map +1 -1
- package/dist/utils/isElementVisible.d.ts +1 -1
- package/dist/utils/isElementVisible.js +1 -1
- package/dist/utils/isElementVisible.js.map +1 -1
- package/dist/utils/loop.d.ts +2 -0
- package/dist/utils/loop.js.map +1 -1
- package/dist/utils/parseCssLengthUnit.d.ts +1 -1
- package/dist/utils/parseCssLengthUnit.js.map +1 -1
- package/dist/utils/wait.d.ts +4 -4
- package/dist/utils/wait.js +6 -4
- package/dist/utils/wait.js.map +1 -1
- package/dist/window-splitter/WindowSplitter.js.map +1 -1
- package/dist/window-splitter/styles.js.map +1 -1
- package/dist/window-splitter/useWindowSplitter.d.ts +4 -1
- package/dist/window-splitter/useWindowSplitter.js +4 -1
- package/dist/window-splitter/useWindowSplitter.js.map +1 -1
- package/package.json +26 -22
- package/src/CoreProviders.tsx +8 -6
- package/src/NoSsr.tsx +3 -1
- package/src/RootHtml.tsx +1 -0
- package/src/SsrProvider.tsx +3 -2
- package/src/app-bar/AppBar.tsx +3 -2
- package/src/app-bar/AppBarTitle.tsx +1 -0
- package/src/app-bar/styles.ts +1 -0
- package/src/autocomplete/Autocomplete.tsx +2 -0
- package/src/autocomplete/AutocompleteChip.tsx +2 -1
- package/src/autocomplete/AutocompleteCircularProgress.tsx +1 -0
- package/src/autocomplete/AutocompleteClearButton.tsx +3 -1
- package/src/autocomplete/AutocompleteDropdownButton.tsx +3 -1
- package/src/autocomplete/AutocompleteListboxChildren.tsx +2 -0
- package/src/autocomplete/autocompleteStyles.ts +1 -0
- package/src/autocomplete/types.ts +1 -0
- package/src/autocomplete/useAutocomplete.ts +4 -2
- package/src/autocomplete/utils.ts +1 -0
- package/src/avatar/Avatar.tsx +3 -2
- package/src/avatar/styles.ts +2 -1
- package/src/badge/Badge.tsx +3 -2
- package/src/badge/styles.ts +1 -0
- package/src/box/Box.tsx +5 -2
- package/src/box/styles.ts +17 -2
- package/src/button/AsyncButton.tsx +3 -1
- package/src/button/Button.tsx +4 -2
- package/src/button/ButtonUnstyled.tsx +2 -1
- package/src/button/FloatingActionButton.tsx +2 -1
- package/src/button/TooltippedButton.tsx +4 -2
- package/src/button/buttonStyles.ts +2 -1
- package/src/card/Card.tsx +10 -23
- package/src/card/CardContent.tsx +3 -2
- package/src/card/CardFooter.tsx +1 -0
- package/src/card/CardHeader.tsx +2 -1
- package/src/card/CardSubtitle.tsx +1 -0
- package/src/card/CardTitle.tsx +1 -0
- package/src/card/ClickableCard.tsx +3 -1
- package/src/card/styles.ts +1 -0
- package/src/chip/Chip.tsx +4 -2
- package/src/chip/styles.ts +1 -0
- package/src/dialog/Dialog.tsx +10 -6
- package/src/dialog/DialogContent.tsx +3 -2
- package/src/dialog/DialogFooter.tsx +3 -2
- package/src/dialog/DialogHeader.tsx +2 -1
- package/src/dialog/DialogTitle.tsx +2 -1
- package/src/dialog/FixedDialog.tsx +14 -9
- package/src/dialog/NestedDialogProvider.ts +1 -0
- package/src/dialog/styles.ts +5 -4
- package/src/divider/Divider.tsx +3 -2
- package/src/divider/styles.ts +1 -0
- package/src/draggable/useDraggable.ts +25 -12
- package/src/draggable/utils.ts +2 -1
- package/src/expansion-panel/ExpansionList.tsx +3 -1
- package/src/expansion-panel/ExpansionPanel.tsx +3 -1
- package/src/expansion-panel/ExpansionPanelHeader.tsx +3 -2
- package/src/expansion-panel/expansionPanelStyles.ts +1 -0
- package/src/expansion-panel/useExpansionList.ts +2 -0
- package/src/expansion-panel/useExpansionPanels.ts +1 -0
- package/src/files/FileInput.tsx +4 -2
- package/src/files/styles.ts +1 -0
- package/src/files/useFileUpload.ts +7 -5
- package/src/files/utils.ts +31 -1
- package/src/focus/useFocusContainer.ts +10 -10
- package/src/form/Checkbox.tsx +2 -1
- package/src/form/Fieldset.tsx +2 -1
- package/src/form/Form.tsx +2 -1
- package/src/form/FormMessage.tsx +1 -0
- package/src/form/FormMessageContainer.tsx +2 -1
- package/src/form/FormMessageCounter.tsx +1 -0
- package/src/form/InputToggle.tsx +3 -1
- package/src/form/InputToggleIcon.tsx +4 -3
- package/src/form/Label.tsx +1 -0
- package/src/form/Legend.tsx +1 -0
- package/src/form/Listbox.tsx +1 -0
- package/src/form/ListboxProvider.ts +2 -0
- package/src/form/MenuItemCheckbox.tsx +5 -3
- package/src/form/MenuItemFileInput.tsx +25 -13
- package/src/form/MenuItemInputToggle.tsx +3 -1
- package/src/form/MenuItemRadio.tsx +4 -2
- package/src/form/MenuItemSwitch.tsx +2 -0
- package/src/form/MenuItemTextField.tsx +3 -1
- package/src/form/NativeSelect.tsx +3 -2
- package/src/form/OptGroup.tsx +3 -1
- package/src/form/Option.tsx +6 -4
- package/src/form/Password.tsx +5 -3
- package/src/form/Radio.tsx +2 -0
- package/src/form/ResizingTextAreaWrapper.tsx +2 -1
- package/src/form/Select.tsx +6 -4
- package/src/form/SelectedOption.tsx +1 -0
- package/src/form/Slider.tsx +13 -71
- package/src/form/SliderContainer.tsx +2 -1
- package/src/form/SliderMark.tsx +1 -0
- package/src/form/SliderMarkLabel.tsx +2 -1
- package/src/form/SliderThumb.tsx +6 -3
- package/src/form/SliderTrack.tsx +4 -3
- package/src/form/SliderValueMarks.tsx +3 -2
- package/src/form/SliderValueTooltip.tsx +2 -0
- package/src/form/Switch.tsx +2 -1
- package/src/form/SwitchTrack.tsx +2 -1
- package/src/form/TextArea.tsx +4 -2
- package/src/form/TextField.tsx +2 -1
- package/src/form/TextFieldAddon.tsx +1 -0
- package/src/form/TextFieldContainer.tsx +3 -1
- package/src/form/formMessageContainerStyles.ts +1 -0
- package/src/form/formMessageStyles.ts +1 -0
- package/src/form/inputToggleStyles.ts +1 -0
- package/src/form/menuItemInputToggleStyles.ts +1 -0
- package/src/form/nativeSelectStyles.ts +1 -0
- package/src/form/optionStyles.ts +1 -0
- package/src/form/passwordStyles.ts +1 -0
- package/src/form/selectStyles.ts +1 -0
- package/src/form/selectUtils.ts +2 -1
- package/src/form/sliderUtils.ts +8 -7
- package/src/form/switchStyles.ts +1 -0
- package/src/form/textAreaStyles.ts +2 -1
- package/src/form/textFieldContainerStyles.ts +2 -1
- package/src/form/textFieldStyles.ts +1 -0
- package/src/form/types.ts +1 -0
- package/src/form/useCheckboxGroup.ts +4 -2
- package/src/form/useCombobox.ts +4 -2
- package/src/form/useEditableCombobox.ts +2 -0
- package/src/form/useFormReset.ts +4 -2
- package/src/form/useNumberField.ts +3 -1
- package/src/form/useRadioGroup.ts +5 -3
- package/src/form/useRangeSlider.ts +3 -0
- package/src/form/useResizingTextArea.ts +5 -3
- package/src/form/useSelectCombobox.ts +2 -1
- package/src/form/useSlider.ts +3 -3
- package/src/form/useSliderDraggable.ts +71 -0
- package/src/form/useTextField.ts +40 -26
- package/src/form/useTextFieldContainerAddons.ts +4 -2
- package/src/form/validation.ts +2 -0
- package/src/hoverMode/useHoverMode.ts +76 -4
- package/src/hoverMode/useHoverModeProvider.ts +24 -12
- package/src/icon/FontIcon.tsx +3 -2
- package/src/icon/IconRotator.tsx +5 -4
- package/src/icon/MaterialIcon.tsx +3 -2
- package/src/icon/MaterialSymbol.tsx +4 -3
- package/src/icon/SVGIcon.tsx +3 -2
- package/src/icon/TextIconSpacing.tsx +2 -2
- package/src/icon/{iconConfig.tsx → config.tsx} +1 -0
- package/src/icon/materialConfig.ts +1 -0
- package/src/icon/styles.ts +2 -1
- package/src/interaction/Ripple.tsx +2 -0
- package/src/interaction/RippleContainer.tsx +1 -0
- package/src/interaction/UserInteractionModeProvider.tsx +3 -2
- package/src/interaction/useElementInteraction.tsx +39 -36
- package/src/interaction/useHigherContrastChildren.tsx +11 -8
- package/src/interaction/utils.ts +1 -0
- package/src/layout/LayoutAppBar.tsx +2 -0
- package/src/layout/LayoutNav.tsx +4 -2
- package/src/layout/LayoutWindowSplitter.tsx +4 -2
- package/src/layout/Main.tsx +4 -2
- package/src/layout/layoutNavStyles.ts +1 -0
- package/src/layout/layoutWindowSplitterStyles.ts +1 -0
- package/src/layout/mainStyles.ts +1 -0
- package/src/layout/useExpandableLayout.ts +17 -17
- package/src/layout/useHorizontalLayoutTransition.ts +2 -0
- package/src/layout/useLayoutAppBarHeight.ts +3 -1
- package/src/layout/useLayoutTree.ts +6 -3
- package/src/layout/useLayoutWindowSplitter.ts +2 -1
- package/src/layout/useMainTabIndex.ts +1 -0
- package/src/layout/useResizableLayout.ts +14 -17
- package/src/layout/useTemporaryLayout.ts +18 -11
- package/src/link/Link.tsx +3 -2
- package/src/link/SkipToMainContent.tsx +4 -2
- package/src/link/styles.ts +1 -0
- package/src/list/List.tsx +2 -1
- package/src/list/ListItem.tsx +4 -2
- package/src/list/ListItemAddon.tsx +2 -1
- package/src/list/ListItemChildren.tsx +1 -0
- package/src/list/ListItemLink.tsx +4 -2
- package/src/list/ListItemText.tsx +2 -1
- package/src/list/ListSubheader.tsx +2 -1
- package/src/list/listItemStyles.ts +1 -0
- package/src/list/listStyles.ts +1 -0
- package/src/list/types.ts +1 -0
- package/src/media-queries/AppSizeProvider.tsx +7 -5
- package/src/media-queries/useMediaQuery.ts +5 -3
- package/src/menu/DropdownMenu.tsx +5 -3
- package/src/menu/Menu.tsx +8 -6
- package/src/menu/MenuBar.tsx +2 -0
- package/src/menu/MenuButton.tsx +3 -1
- package/src/menu/MenuConfigurationProvider.tsx +4 -2
- package/src/menu/MenuItem.tsx +2 -0
- package/src/menu/MenuItemButton.tsx +3 -1
- package/src/menu/MenuItemCircularProgress.tsx +2 -1
- package/src/menu/MenuItemGroup.tsx +3 -1
- package/src/menu/MenuItemSeparator.tsx +3 -1
- package/src/menu/MenuSheet.tsx +3 -1
- package/src/menu/MenuVisibilityProvider.tsx +4 -2
- package/src/menu/MenuWidget.tsx +3 -1
- package/src/menu/MenuWidgetKeyboardProvider.tsx +2 -0
- package/src/menu/useContextMenu.ts +2 -0
- package/src/menu/useMenuBarProvider.ts +2 -0
- package/src/movement/types.ts +1 -0
- package/src/movement/useKeyboardMovementProvider.ts +2 -0
- package/src/movement/utils.ts +1 -0
- package/src/navigation/CollapsibleNavGroup.tsx +3 -1
- package/src/navigation/DefaultNavigationRenderer.tsx +1 -0
- package/src/navigation/NavGroup.tsx +2 -1
- package/src/navigation/NavItem.tsx +2 -1
- package/src/navigation/NavItemButton.tsx +4 -2
- package/src/navigation/NavItemLink.tsx +4 -2
- package/src/navigation/NavSubheader.tsx +2 -1
- package/src/navigation/Navigation.tsx +3 -2
- package/src/navigation/navGroupStyles.ts +1 -0
- package/src/navigation/navItemStyles.ts +1 -0
- package/src/navigation/types.ts +1 -0
- package/src/navigation/useActiveHeadingId.ts +8 -6
- package/src/navigation/useNavigationExpansion.ts +2 -0
- package/src/navigation/useTableOfContentsHeadings.ts +150 -0
- package/src/objectFit.ts +1 -0
- package/src/overlay/Overlay.tsx +4 -2
- package/src/overlay/overlayStyles.ts +10 -10
- package/src/portal/Portal.tsx +1 -0
- package/src/portal/PortalContainerProvider.tsx +4 -3
- package/src/positioning/createHorizontalPosition.ts +1 -1
- package/src/positioning/createVerticalPosition.ts +1 -1
- package/src/positioning/useFixedPositioning.ts +17 -12
- package/src/progress/CircularProgress.tsx +3 -2
- package/src/progress/LinearProgress.tsx +3 -2
- package/src/responsive-item/ResponsiveItem.tsx +3 -2
- package/src/responsive-item/ResponsiveItemOverlay.tsx +3 -2
- package/src/responsive-item/responsiveItemOverlayStyles.ts +1 -0
- package/src/responsive-item/responsiveItemStyles.ts +1 -0
- package/src/scroll/ScrollLock.tsx +1 -0
- package/src/scroll/useScrollLock.ts +3 -1
- package/src/searching/fuzzy.ts +1 -1
- package/src/searching/useFuzzyMatch.ts +2 -0
- package/src/segmented-button/SegmentedButton.tsx +4 -2
- package/src/segmented-button/SegmentedButtonContainer.tsx +3 -2
- package/src/segmented-button/segmentedButtonContainerStyles.ts +1 -0
- package/src/segmented-button/segmentedButtonStyles.ts +1 -0
- package/src/sheet/Sheet.tsx +4 -2
- package/src/sheet/styles.ts +3 -3
- package/src/snackbar/DefaultToastRenderer.tsx +5 -3
- package/src/snackbar/Snackbar.tsx +4 -2
- package/src/snackbar/Toast.tsx +4 -2
- package/src/snackbar/ToastActionButton.tsx +2 -0
- package/src/snackbar/ToastCloseButton.tsx +3 -1
- package/src/snackbar/ToastContent.tsx +3 -1
- package/src/snackbar/ToastManager.tsx +1 -0
- package/src/snackbar/ToastManagerProvider.tsx +4 -3
- package/src/snackbar/snackbarStyles.ts +1 -0
- package/src/snackbar/toastContentStyles.ts +1 -0
- package/src/snackbar/toastStyles.ts +2 -1
- package/src/snackbar/useCurrentToastActions.ts +1 -0
- package/src/storage/internalUtils.ts +43 -0
- package/src/storage/types.ts +88 -0
- package/src/storage/useStorage.ts +277 -0
- package/src/storage/utils.ts +156 -0
- package/src/suspense/CircularProgressSuspense.tsx +2 -1
- package/src/suspense/NullSuspense.tsx +1 -1
- package/src/table/StickyTableSection.tsx +3 -1
- package/src/table/Table.tsx +3 -1
- package/src/table/TableBody.tsx +3 -1
- package/src/table/TableCell.tsx +4 -2
- package/src/table/TableCellContent.tsx +2 -1
- package/src/table/TableCheckbox.tsx +3 -1
- package/src/table/TableConfigurationProvider.tsx +2 -0
- package/src/table/TableContainer.tsx +4 -2
- package/src/table/TableContainerProvider.tsx +2 -1
- package/src/table/TableFooter.tsx +3 -1
- package/src/table/TableHeader.tsx +3 -1
- package/src/table/TableRadio.tsx +3 -1
- package/src/table/TableRow.tsx +3 -1
- package/src/table/tableCellStyles.ts +1 -0
- package/src/table/tableFooterStyles.ts +1 -0
- package/src/table/tableHeaderStyles.ts +1 -0
- package/src/table/tableRowStyles.ts +1 -0
- package/src/table/tableStyles.ts +1 -0
- package/src/table/useStickyTableSection.tsx +4 -2
- package/src/table/useTableSectionConfig.ts +2 -0
- package/src/tabs/SimpleTabPanel.tsx +35 -0
- package/src/tabs/SimpleTabPanels.tsx +28 -0
- package/src/tabs/Tab.tsx +4 -3
- package/src/tabs/TabList.tsx +38 -51
- package/src/tabs/TabListScrollButton.tsx +6 -3
- package/src/tabs/tabIndicatorStyles.ts +1 -0
- package/src/tabs/tabListScrollButtonStyles.ts +1 -0
- package/src/tabs/tabListStyles.ts +22 -2
- package/src/tabs/tabStyles.ts +8 -0
- package/src/tabs/types.ts +30 -0
- package/src/tabs/useMaxTabPanelHeight.ts +138 -0
- package/src/tabs/useTabList.ts +45 -8
- package/src/tabs/useTabs.ts +64 -79
- package/src/tabs/utils.ts +9 -0
- package/src/test-utils/drag.ts +10 -2
- package/src/test-utils/index.ts +6 -5
- package/src/test-utils/jest-globals/index.ts +4 -0
- package/src/test-utils/jest-globals/match-media.ts +41 -0
- package/src/test-utils/jest-globals/resize-observer.ts +11 -0
- package/src/test-utils/{jest-setup.ts → jest-globals/setup.ts} +4 -2
- package/src/test-utils/{timers.ts → jest-globals/timers.ts} +2 -2
- package/src/test-utils/jest-globals/uploadMenuItemFileInput.ts +52 -0
- package/src/test-utils/{ResizeObserver.ts → mocks/ResizeObserver.ts} +25 -59
- package/src/test-utils/mocks/match-media-implementation.ts +111 -0
- package/src/test-utils/mocks/match-media.ts +63 -0
- package/src/test-utils/polyfills/IntersectionObserver.ts +1 -1
- package/src/test-utils/polyfills/ResizeObserver.ts +1 -1
- package/src/test-utils/polyfills/matchMedia.ts +1 -1
- package/src/test-utils/queries/index.ts +2 -0
- package/src/test-utils/queries/select.ts +116 -0
- package/src/test-utils/queries/slider.ts +247 -0
- package/src/test-utils/queries/types.ts +13 -0
- package/src/test-utils/render.tsx +2 -1
- package/src/test-utils/utils/createFileList.ts +27 -0
- package/src/test-utils/utils/createResizeObserverEntry.ts +47 -0
- package/src/test-utils/vitest/index.ts +4 -0
- package/src/test-utils/vitest/match-media.ts +41 -0
- package/src/test-utils/vitest/resize-observer.ts +11 -0
- package/src/test-utils/vitest/setup.ts +15 -0
- package/src/test-utils/vitest/timers.ts +48 -0
- package/src/test-utils/vitest/uploadMenuItemFileInput.ts +52 -0
- package/src/theme/LocalStorageColorSchemeProvider.tsx +30 -30
- package/src/theme/ThemeProvider.tsx +9 -7
- package/src/theme/isColorScheme.ts +8 -6
- package/src/theme/types.ts +11 -23
- package/src/theme/useCSSVariables.ts +10 -15
- package/src/theme/useColorScheme.ts +19 -15
- package/src/theme/useColorSchemeMetaTag.ts +17 -2
- package/src/theme/useColorSchemeProvider.ts +36 -37
- package/src/theme/{usePrefersDarkScheme.ts → usePrefersDarkTheme.ts} +1 -0
- package/src/tooltip/Tooltip.tsx +3 -1
- package/src/tooltip/TooltipHoverModeProvider.tsx +6 -4
- package/src/tooltip/tooltipStyles.ts +2 -1
- package/src/tooltip/useTooltip.ts +15 -10
- package/src/tooltip/useTooltipPosition.ts +2 -0
- package/src/transition/CSSTransition.tsx +3 -1
- package/src/transition/Collapse.tsx +4 -2
- package/src/transition/CrossFade.tsx +5 -3
- package/src/transition/ScaleTransition.tsx +4 -2
- package/src/transition/SkeletonPlaceholder.tsx +4 -2
- package/src/transition/Slide.tsx +3 -1
- package/src/transition/SlideContainer.tsx +2 -1
- package/src/transition/collapseStyles.ts +1 -0
- package/src/transition/config.ts +4 -1
- package/src/transition/maxWidthTransition.ts +7 -0
- package/src/transition/skeletonPlaceholderUtils.ts +1 -0
- package/src/transition/types.ts +0 -2
- package/src/transition/useCSSTransition.ts +10 -4
- package/src/transition/useCarousel.ts +2 -0
- package/src/transition/useCollapseTransition.ts +20 -14
- package/src/transition/useCrossFadeTransition.ts +1 -0
- package/src/transition/useMaxWidthTransition.ts +11 -0
- package/src/transition/useScaleTransition.ts +12 -10
- package/src/transition/useSkeletonPlaceholder.ts +20 -2
- package/src/transition/useSlideTransition.ts +14 -16
- package/src/transition/useTransition.ts +3 -1
- package/src/tree/DefaultTreeItemRenderer.tsx +1 -0
- package/src/tree/Tree.tsx +3 -1
- package/src/tree/TreeGroup.tsx +3 -1
- package/src/tree/TreeItem.tsx +4 -2
- package/src/tree/TreeItemExpander.tsx +5 -3
- package/src/tree/TreeProvider.tsx +4 -2
- package/src/tree/styles.ts +1 -0
- package/src/tree/types.ts +1 -0
- package/src/tree/useTree.ts +3 -2
- package/src/tree/useTreeExpansion.ts +1 -0
- package/src/tree/useTreeItems.ts +4 -3
- package/src/tree/useTreeMovement.ts +2 -0
- package/src/tree/useTreeSelection.ts +1 -0
- package/src/typography/SrOnly.tsx +2 -1
- package/src/typography/TextContainer.tsx +3 -2
- package/src/typography/Typography.tsx +3 -2
- package/src/typography/WritingDirectionProvider.tsx +4 -2
- package/src/typography/textContainerStyles.ts +1 -0
- package/src/typography/typographyStyles.ts +2 -1
- package/src/useAsyncFunction.ts +23 -0
- package/src/useDebouncedFunction.ts +2 -0
- package/src/useDropzone.ts +50 -34
- package/src/useElementSize.ts +7 -5
- package/src/useEnsuredId.ts +1 -1
- package/src/useEnsuredRef.ts +3 -1
- package/src/useEnsuredState.ts +1 -0
- package/src/useHtmlClassName.ts +12 -0
- package/src/useIntersectionObserver.ts +5 -3
- package/src/useIsomorphicLayoutEffect.ts +1 -0
- package/src/useMutationObserver.ts +7 -6
- package/src/useOrientation.ts +1 -1
- package/src/usePageInactive.ts +8 -2
- package/src/useReadonlySet.ts +7 -4
- package/src/useResizeListener.ts +8 -4
- package/src/useResizeObserver.ts +4 -3
- package/src/useThrottledFunction.ts +2 -0
- package/src/useToggle.ts +5 -3
- package/src/useUnmounted.ts +2 -0
- package/src/useWindowSize.ts +4 -2
- package/src/utils/RenderRecursively.tsx +88 -32
- package/src/utils/alphaNumericSort.ts +10 -4
- package/src/utils/bem.ts +58 -26
- package/src/utils/getRangeDefaultValue.ts +1 -1
- package/src/utils/isElementVisible.ts +1 -1
- package/src/utils/loop.ts +2 -0
- package/src/utils/parseCssLengthUnit.ts +1 -1
- package/src/utils/wait.ts +6 -5
- package/src/window-splitter/WindowSplitter.tsx +2 -2
- package/src/window-splitter/styles.ts +1 -0
- package/src/window-splitter/useWindowSplitter.ts +7 -2
- package/dist/icon/iconConfig.js.map +0 -1
- package/dist/test-utils/IntersectionObserver.js.map +0 -1
- package/dist/test-utils/ResizeObserver.js.map +0 -1
- package/dist/test-utils/jest-setup.d.ts +0 -1
- package/dist/test-utils/jest-setup.js.map +0 -1
- package/dist/test-utils/matchMedia.d.ts +0 -97
- package/dist/test-utils/matchMedia.js +0 -112
- package/dist/test-utils/matchMedia.js.map +0 -1
- package/dist/test-utils/timers.js.map +0 -1
- package/dist/theme/usePrefersDarkScheme.js.map +0 -1
- package/dist/useLocalStorage.d.ts +0 -368
- package/dist/useLocalStorage.js +0 -377
- package/dist/useLocalStorage.js.map +0 -1
- package/src/test-utils/README.md +0 -150
- package/src/test-utils/matchMedia.ts +0 -194
- package/src/useLocalStorage.ts +0 -584
- /package/dist/icon/{iconConfig.d.ts → config.d.ts} +0 -0
- /package/dist/test-utils/{IntersectionObserver.d.ts → mocks/IntersectionObserver.d.ts} +0 -0
- /package/dist/test-utils/{IntersectionObserver.js → mocks/IntersectionObserver.js} +0 -0
- /package/dist/theme/{usePrefersDarkScheme.d.ts → usePrefersDarkTheme.d.ts} +0 -0
- /package/src/test-utils/{IntersectionObserver.ts → mocks/IntersectionObserver.ts} +0 -0
package/dist/tree/Tree.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/tree/Tree.tsx"],"sourcesContent":["\"use client\";\nimport {\n type ComponentType,\n type HTMLAttributes,\n type ReactElement,\n type ReactNode,\n type Ref,\n} from \"react\";\nimport { type CustomLinkComponent } from \"../link/Link.js\";\nimport { List } from \"../list/List.js\";\nimport { KeyboardMovementProvider } from \"../movement/useKeyboardMovementProvider.js\";\nimport { type LabelRequiredForA11y } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { RenderRecursively } from \"../utils/RenderRecursively.js\";\nimport { identity } from \"../utils/identity.js\";\nimport { DefaultTreeItemRenderer } from \"./DefaultTreeItemRenderer.js\";\nimport { TreeProvider, type TreeExpansionMode } from \"./TreeProvider.js\";\nimport { tree } from \"./styles.js\";\nimport {\n type TreeData,\n type TreeItemNode,\n type TreeItemRendererProps,\n type TreeItemSorter,\n} from \"./types.js\";\nimport { type TreeExpansion } from \"./useTreeExpansion.js\";\nimport { useTreeItems } from \"./useTreeItems.js\";\nimport { useTreeMovement } from \"./useTreeMovement.js\";\nimport { type TreeSelection } from \"./useTreeSelection.js\";\n\ndeclare module \"react\" {\n interface CSSProperties {\n \"--rmd-tree-depth\"?: number;\n \"--rmd-tree-item-padding\"?: string | number;\n \"--rmd-tree-item-padding-base\"?: string | number;\n \"--rmd-tree-item-padding-incrementor\"?: string | number;\n }\n}\n\n/**\n * @since 6.0.0\n */\nexport type TreeHTMLAttributes = Omit<\n HTMLAttributes<HTMLUListElement>,\n \"role\" | \"tabIndex\" | \"children\"\n>;\n\n/**\n * @since 6.0.0 There was a major API change and the `id` is now `optional`.\n * In addition, the following props were removed:\n * - `itemRenderer`\n * - `labelKey`\n * - `valueKey`\n * - `getItemLabel`\n * - `getItemValue`\n * - `getItemProps`\n */\nexport interface TreeProps<T extends TreeItemNode>\n extends TreeHTMLAttributes,\n TreeExpansion,\n TreeSelection {\n /** @see {@link TreeData} */\n data: TreeData<T>;\n\n /**\n * An optional ref to pass to the tree element.\n *\n * @since 6.0.0\n */\n treeRef?: Ref<HTMLUListElement>;\n\n /** @defaultValue `identity` */\n sort?: TreeItemSorter<T>;\n\n /**\n * Any nodes in the {@link data} that have a `parentId` set to this value will\n * appear at the root of the tree.\n *\n * @defaultValue `null`\n */\n rootId?: string | null;\n\n /**\n * @defaultValue `\"auto\"`\n * @see {@link TreeExpansionMode}\n */\n expansionMode?: TreeExpansionMode;\n\n /**\n * Set this to `true` to display the expander icon to the left instead of the\n * right. This will also update the styles slightly so you can still provide a\n * `leftAddon`.\n *\n * @defaultValue `false`\n */\n expanderLeft?: boolean;\n\n /**\n * @defaultValue `getIcon(\"expander\")`\n */\n expanderIcon?: ReactNode;\n\n /**\n * Set this to `true` to disable the collapse transition for all tree items.\n *\n * @defaultValue `false`\n */\n disableTransition?: boolean;\n\n /**\n * Set this to `true` if the collapsed tree items should be removed from the\n * DOM instead of hidden using `display: none`. This _might_ improve\n * performance for large trees.\n *\n * @defaultValue `false`\n */\n temporaryChildItems?: boolean;\n\n /**\n * @example Custom Tree Item Renderer\n * ```tsx\n * import {\n * TreeItem,\n * useKeyboardMovementContext,\n * useTreeContext,\n * type TreeItemRendererProps,\n * } from \"@react-md/core\";\n * import FolderIcon from \"@react-md/material-icons/FolderIcon\";\n * import FolderOpenIcon from \"@react-md/material-icons/FolderOpenIcon\";\n * import { type ReactElement } from \"react\";\n *\n * export function CustomTreeItem(props: TreeItemRendererProps): ReactElement {\n * const { item, ...remaining } = props;\n * const id = useId();\n * const { itemId } = item;\n * const {\n * data,\n * expandedIds,\n * selectedIds,\n * toggleTreeItemExpansion,\n * toggleTreeItemSelection,\n * } = useTreeContext()\n * const { activeDescendantId } = useKeyboardMovementContext();\n *\n * const focused = id === activeDescendantId;\n * const expanded = expandedIds.has(itemId);\n * const selected = selectedIds.has(itemId);\n * const children = ...; // do whatever\n *\n * return (\n * <TreeItem\n * {...remaining}\n * id={id}\n * itemId={itemId}\n * leftAddon={expanded ? <FolderOpenIcon /> : <FolderIcon />}\n * >\n * {children}\n * </TreeItem>\n * );\n * }\n * ```\n *\n * @see {@link DefaultTreeItemRenderer}\n * @defaultValue `DefaultTreeItemRenderer`\n */\n renderer?: ComponentType<TreeItemRendererProps<T>>;\n\n /**\n * The link component to use for any tree item nodes that have a `to` or\n * `href`.\n *\n * @see {@link CustomLinkComponent}\n * @defaultValue `Link`\n */\n linkComponent?: CustomLinkComponent;\n}\n\n/**\n * **Client Component**\n *\n * @example Simple Tree\n * ```tsx\n * import type { TreeData } from \"@react-md/core\";\n * import { Tree, useTree } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * const data: TreeData = {\n * \"item-1\": {\n * itemId: \"item-1\",\n * parentId: null,\n * name: \"Root Level Item 1\",\n * },\n * \"item-2\": {\n * itemId: \"item-2\",\n * parentId: \"item-1\",\n * name: \"A child for the first item\",\n * },\n * \"item-3\": {\n * itemId: \"item-3\",\n * parentId: \"item-1\",\n * children: \"Another child for the first item\",\n * },\n * };\n *\n * function Example(): ReactElement {\n * const tree = useTree({\n * // can enable multiple selected items\n * // multiSelect: true,\n *\n * // can set default expanded and selected items\n * // defaultSelectedIds: [\"item-1\"],\n * // defaultExpandedIds: [\"item-1\"],\n * });\n *\n * return (\n * <Tree\n * {...tree}\n * aria-label=\"Tree\"\n * data={data}\n * />\n * );\n * }\n * ```\n *\n * @see {@link TreeProps.renderer} for a custom tree item example.\n *\n * @since 6.0.0 There was a major API change and the `id` is now `optional`.\n * In addition, the following props were removed:\n * - `itemRenderer`\n * - `labelKey`\n * - `valueKey`\n * - `getItemLabel`\n * - `getItemValue`\n * - `getItemProps`\n */\nexport function Tree<T extends TreeItemNode>(\n props: LabelRequiredForA11y<TreeProps<T>>\n): ReactElement {\n const {\n id,\n data,\n sort = identity,\n rootId = null,\n treeRef,\n className,\n expandedIds,\n selectedIds,\n toggleTreeItemSelection,\n selectMultipleTreeItems,\n toggleTreeItemExpansion,\n expandMultipleTreeItems,\n onClick,\n onFocus,\n onKeyDown,\n renderer: TreeItemRenderer = DefaultTreeItemRenderer,\n multiSelect = false,\n expansionMode = \"auto\",\n expanderIcon,\n expanderLeft = false,\n linkComponent = \"a\",\n disableTransition = false,\n temporaryChildItems = false,\n ...remaining\n } = props;\n const treeId = useEnsuredId(id, \"tree\");\n const { items, treeItemChildIds } = useTreeItems({\n data,\n sort,\n rootId,\n });\n\n const { metadataLookup, movementContext, movementProps } = useTreeMovement({\n onClick,\n onFocus,\n onKeyDown,\n data,\n expandedIds,\n selectedIds,\n treeItemChildIds,\n toggleTreeItemExpansion,\n expandMultipleTreeItems,\n });\n\n return (\n <TreeProvider\n data={data}\n rootId={rootId}\n multiSelect={multiSelect}\n linkComponent={linkComponent}\n selectedIds={selectedIds}\n expandedIds={expandedIds}\n expanderIcon={expanderIcon}\n expanderLeft={expanderLeft}\n expansionMode={expansionMode}\n metadataLookup={metadataLookup}\n disableTransition={disableTransition}\n temporaryChildItems={temporaryChildItems}\n toggleTreeItemSelection={toggleTreeItemSelection}\n toggleTreeItemExpansion={toggleTreeItemExpansion}\n selectMultipleTreeItems={selectMultipleTreeItems}\n expandMultipleTreeItems={expandMultipleTreeItems}\n >\n <KeyboardMovementProvider value={movementContext}>\n <List\n {...remaining}\n {...movementProps}\n id={treeId}\n ref={treeRef}\n role=\"tree\"\n tabIndex={0}\n className={tree({ className })}\n >\n <RenderRecursively\n items={items}\n render={TreeItemRenderer}\n getItemKey={(options) => options.item.itemId}\n />\n </List>\n </KeyboardMovementProvider>\n </TreeProvider>\n );\n}\n"],"names":["List","KeyboardMovementProvider","useEnsuredId","RenderRecursively","identity","DefaultTreeItemRenderer","TreeProvider","tree","useTreeItems","useTreeMovement","Tree","props","id","data","sort","rootId","treeRef","className","expandedIds","selectedIds","toggleTreeItemSelection","selectMultipleTreeItems","toggleTreeItemExpansion","expandMultipleTreeItems","onClick","onFocus","onKeyDown","renderer","TreeItemRenderer","multiSelect","expansionMode","expanderIcon","expanderLeft","linkComponent","disableTransition","temporaryChildItems","remaining","treeId","items","treeItemChildIds","metadataLookup","movementContext","movementProps","value","ref","role","tabIndex","render","getItemKey","options","item","itemId"],"mappings":"AAAA;;AASA,SAASA,IAAI,QAAQ,kBAAkB;AACvC,SAASC,wBAAwB,QAAQ,6CAA6C;AAEtF,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,iBAAiB,QAAQ,gCAAgC;AAClE,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,uBAAuB,QAAQ,+BAA+B;AACvE,SAASC,YAAY,QAAgC,oBAAoB;AACzE,SAASC,IAAI,QAAQ,cAAc;AAQnC,SAASC,YAAY,QAAQ,oBAAoB;AACjD,SAASC,eAAe,QAAQ,uBAAuB;AAsJvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyDC,GACD,OAAO,SAASC,KACdC,KAAyC;IAEzC,MAAM,EACJC,EAAE,EACFC,IAAI,EACJC,OAAOV,QAAQ,EACfW,SAAS,IAAI,EACbC,OAAO,EACPC,SAAS,EACTC,WAAW,EACXC,WAAW,EACXC,uBAAuB,EACvBC,uBAAuB,EACvBC,uBAAuB,EACvBC,uBAAuB,EACvBC,OAAO,EACPC,OAAO,EACPC,SAAS,EACTC,UAAUC,mBAAmBvB,uBAAuB,EACpDwB,cAAc,KAAK,EACnBC,gBAAgB,MAAM,EACtBC,YAAY,EACZC,eAAe,KAAK,EACpBC,gBAAgB,GAAG,EACnBC,oBAAoB,KAAK,EACzBC,sBAAsB,KAAK,EAC3B,GAAGC,WACJ,GAAGzB;IACJ,MAAM0B,SAASnC,aAAaU,IAAI;IAChC,MAAM,EAAE0B,KAAK,EAAEC,gBAAgB,EAAE,GAAG/B,aAAa;QAC/CK;QACAC;QACAC;IACF;IAEA,MAAM,EAAEyB,cAAc,EAAEC,eAAe,EAAEC,aAAa,EAAE,GAAGjC,gBAAgB;QACzEe;QACAC;QACAC;QACAb;QACAK;QACAC;QACAoB;QACAjB;QACAC;IACF;IAEA,qBACE,KAACjB;QACCO,MAAMA;QACNE,QAAQA;QACRc,aAAaA;QACbI,eAAeA;QACfd,aAAaA;QACbD,aAAaA;QACba,cAAcA;QACdC,cAAcA;QACdF,eAAeA;QACfU,gBAAgBA;QAChBN,mBAAmBA;QACnBC,qBAAqBA;QACrBf,yBAAyBA;QACzBE,yBAAyBA;QACzBD,yBAAyBA;QACzBE,yBAAyBA;kBAEzB,cAAA,KAACtB;YAAyB0C,OAAOF;sBAC/B,cAAA,KAACzC;gBACE,GAAGoC,SAAS;gBACZ,GAAGM,aAAa;gBACjB9B,IAAIyB;gBACJO,KAAK5B;gBACL6B,MAAK;gBACLC,UAAU;gBACV7B,WAAWV,KAAK;oBAAEU;gBAAU;0BAE5B,cAAA,KAACd;oBACCmC,OAAOA;oBACPS,QAAQnB;oBACRoB,YAAY,CAACC,UAAYA,QAAQC,IAAI,CAACC,MAAM;;;;;AAMxD"}
|
|
1
|
+
{"version":3,"sources":["../../src/tree/Tree.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n type ComponentType,\n type HTMLAttributes,\n type ReactElement,\n type ReactNode,\n type Ref,\n} from \"react\";\n\nimport { type CustomLinkComponent } from \"../link/Link.js\";\nimport { List } from \"../list/List.js\";\nimport { KeyboardMovementProvider } from \"../movement/useKeyboardMovementProvider.js\";\nimport { type LabelRequiredForA11y } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { RenderRecursively } from \"../utils/RenderRecursively.js\";\nimport { identity } from \"../utils/identity.js\";\nimport { DefaultTreeItemRenderer } from \"./DefaultTreeItemRenderer.js\";\nimport { type TreeExpansionMode, TreeProvider } from \"./TreeProvider.js\";\nimport { tree } from \"./styles.js\";\nimport {\n type TreeData,\n type TreeItemNode,\n type TreeItemRendererProps,\n type TreeItemSorter,\n} from \"./types.js\";\nimport { type TreeExpansion } from \"./useTreeExpansion.js\";\nimport { useTreeItems } from \"./useTreeItems.js\";\nimport { useTreeMovement } from \"./useTreeMovement.js\";\nimport { type TreeSelection } from \"./useTreeSelection.js\";\n\ndeclare module \"react\" {\n interface CSSProperties {\n \"--rmd-tree-depth\"?: number;\n \"--rmd-tree-item-padding\"?: string | number;\n \"--rmd-tree-item-padding-base\"?: string | number;\n \"--rmd-tree-item-padding-incrementor\"?: string | number;\n }\n}\n\n/**\n * @since 6.0.0\n */\nexport type TreeHTMLAttributes = Omit<\n HTMLAttributes<HTMLUListElement>,\n \"role\" | \"tabIndex\" | \"children\"\n>;\n\n/**\n * @since 6.0.0 There was a major API change and the `id` is now `optional`.\n * In addition, the following props were removed:\n * - `itemRenderer`\n * - `labelKey`\n * - `valueKey`\n * - `getItemLabel`\n * - `getItemValue`\n * - `getItemProps`\n */\nexport interface TreeProps<T extends TreeItemNode>\n extends TreeHTMLAttributes,\n TreeExpansion,\n TreeSelection {\n /** @see {@link TreeData} */\n data: TreeData<T>;\n\n /**\n * An optional ref to pass to the tree element.\n *\n * @since 6.0.0\n */\n treeRef?: Ref<HTMLUListElement>;\n\n /** @defaultValue `identity` */\n sort?: TreeItemSorter<T>;\n\n /**\n * Any nodes in the {@link data} that have a `parentId` set to this value will\n * appear at the root of the tree.\n *\n * @defaultValue `null`\n */\n rootId?: string | null;\n\n /**\n * @defaultValue `\"auto\"`\n * @see {@link TreeExpansionMode}\n */\n expansionMode?: TreeExpansionMode;\n\n /**\n * Set this to `true` to display the expander icon to the left instead of the\n * right. This will also update the styles slightly so you can still provide a\n * `leftAddon`.\n *\n * @defaultValue `false`\n */\n expanderLeft?: boolean;\n\n /**\n * @defaultValue `getIcon(\"expander\")`\n */\n expanderIcon?: ReactNode;\n\n /**\n * Set this to `true` to disable the collapse transition for all tree items.\n *\n * @defaultValue `false`\n */\n disableTransition?: boolean;\n\n /**\n * Set this to `true` if the collapsed tree items should be removed from the\n * DOM instead of hidden using `display: none`. This _might_ improve\n * performance for large trees.\n *\n * @defaultValue `false`\n */\n temporaryChildItems?: boolean;\n\n /**\n * @example Custom Tree Item Renderer\n * ```tsx\n * import {\n * TreeItem,\n * useKeyboardMovementContext,\n * useTreeContext,\n * type TreeItemRendererProps,\n * } from \"@react-md/core\";\n * import FolderIcon from \"@react-md/material-icons/FolderIcon\";\n * import FolderOpenIcon from \"@react-md/material-icons/FolderOpenIcon\";\n * import { type ReactElement } from \"react\";\n *\n * export function CustomTreeItem(props: TreeItemRendererProps): ReactElement {\n * const { item, ...remaining } = props;\n * const id = useId();\n * const { itemId } = item;\n * const {\n * data,\n * expandedIds,\n * selectedIds,\n * toggleTreeItemExpansion,\n * toggleTreeItemSelection,\n * } = useTreeContext()\n * const { activeDescendantId } = useKeyboardMovementContext();\n *\n * const focused = id === activeDescendantId;\n * const expanded = expandedIds.has(itemId);\n * const selected = selectedIds.has(itemId);\n * const children = ...; // do whatever\n *\n * return (\n * <TreeItem\n * {...remaining}\n * id={id}\n * itemId={itemId}\n * leftAddon={expanded ? <FolderOpenIcon /> : <FolderIcon />}\n * >\n * {children}\n * </TreeItem>\n * );\n * }\n * ```\n *\n * @see {@link DefaultTreeItemRenderer}\n * @defaultValue `DefaultTreeItemRenderer`\n */\n renderer?: ComponentType<TreeItemRendererProps<T>>;\n\n /**\n * The link component to use for any tree item nodes that have a `to` or\n * `href`.\n *\n * @see {@link CustomLinkComponent}\n * @defaultValue `Link`\n */\n linkComponent?: CustomLinkComponent;\n}\n\n/**\n * **Client Component**\n *\n * @example Simple Tree\n * ```tsx\n * import type { TreeData } from \"@react-md/core\";\n * import { Tree, useTree } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * const data: TreeData = {\n * \"item-1\": {\n * itemId: \"item-1\",\n * parentId: null,\n * name: \"Root Level Item 1\",\n * },\n * \"item-2\": {\n * itemId: \"item-2\",\n * parentId: \"item-1\",\n * name: \"A child for the first item\",\n * },\n * \"item-3\": {\n * itemId: \"item-3\",\n * parentId: \"item-1\",\n * children: \"Another child for the first item\",\n * },\n * };\n *\n * function Example(): ReactElement {\n * const tree = useTree({\n * // can enable multiple selected items\n * // multiSelect: true,\n *\n * // can set default expanded and selected items\n * // defaultSelectedIds: [\"item-1\"],\n * // defaultExpandedIds: [\"item-1\"],\n * });\n *\n * return (\n * <Tree\n * {...tree}\n * aria-label=\"Tree\"\n * data={data}\n * />\n * );\n * }\n * ```\n *\n * @see {@link TreeProps.renderer} for a custom tree item example.\n *\n * @since 6.0.0 There was a major API change and the `id` is now `optional`.\n * In addition, the following props were removed:\n * - `itemRenderer`\n * - `labelKey`\n * - `valueKey`\n * - `getItemLabel`\n * - `getItemValue`\n * - `getItemProps`\n */\nexport function Tree<T extends TreeItemNode>(\n props: LabelRequiredForA11y<TreeProps<T>>\n): ReactElement {\n const {\n id,\n data,\n sort = identity,\n rootId = null,\n treeRef,\n className,\n expandedIds,\n selectedIds,\n toggleTreeItemSelection,\n selectMultipleTreeItems,\n toggleTreeItemExpansion,\n expandMultipleTreeItems,\n onClick,\n onFocus,\n onKeyDown,\n renderer: TreeItemRenderer = DefaultTreeItemRenderer,\n multiSelect = false,\n expansionMode = \"auto\",\n expanderIcon,\n expanderLeft = false,\n linkComponent = \"a\",\n disableTransition = false,\n temporaryChildItems = false,\n ...remaining\n } = props;\n const treeId = useEnsuredId(id, \"tree\");\n const { items, treeItemChildIds } = useTreeItems({\n data,\n sort,\n rootId,\n });\n\n const { metadataLookup, movementContext, movementProps } = useTreeMovement({\n onClick,\n onFocus,\n onKeyDown,\n data,\n expandedIds,\n selectedIds,\n treeItemChildIds,\n toggleTreeItemExpansion,\n expandMultipleTreeItems,\n });\n\n return (\n <TreeProvider\n data={data}\n rootId={rootId}\n multiSelect={multiSelect}\n linkComponent={linkComponent}\n selectedIds={selectedIds}\n expandedIds={expandedIds}\n expanderIcon={expanderIcon}\n expanderLeft={expanderLeft}\n expansionMode={expansionMode}\n metadataLookup={metadataLookup}\n disableTransition={disableTransition}\n temporaryChildItems={temporaryChildItems}\n toggleTreeItemSelection={toggleTreeItemSelection}\n toggleTreeItemExpansion={toggleTreeItemExpansion}\n selectMultipleTreeItems={selectMultipleTreeItems}\n expandMultipleTreeItems={expandMultipleTreeItems}\n >\n <KeyboardMovementProvider value={movementContext}>\n <List\n {...remaining}\n {...movementProps}\n id={treeId}\n ref={treeRef}\n role=\"tree\"\n tabIndex={0}\n className={tree({ className })}\n >\n <RenderRecursively\n items={items}\n render={TreeItemRenderer}\n getItemKey={(options) => options.item.itemId}\n />\n </List>\n </KeyboardMovementProvider>\n </TreeProvider>\n );\n}\n"],"names":["List","KeyboardMovementProvider","useEnsuredId","RenderRecursively","identity","DefaultTreeItemRenderer","TreeProvider","tree","useTreeItems","useTreeMovement","Tree","props","id","data","sort","rootId","treeRef","className","expandedIds","selectedIds","toggleTreeItemSelection","selectMultipleTreeItems","toggleTreeItemExpansion","expandMultipleTreeItems","onClick","onFocus","onKeyDown","renderer","TreeItemRenderer","multiSelect","expansionMode","expanderIcon","expanderLeft","linkComponent","disableTransition","temporaryChildItems","remaining","treeId","items","treeItemChildIds","metadataLookup","movementContext","movementProps","value","ref","role","tabIndex","render","getItemKey","options","item","itemId"],"mappings":"AAAA;;AAWA,SAASA,IAAI,QAAQ,kBAAkB;AACvC,SAASC,wBAAwB,QAAQ,6CAA6C;AAEtF,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,iBAAiB,QAAQ,gCAAgC;AAClE,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,uBAAuB,QAAQ,+BAA+B;AACvE,SAAiCC,YAAY,QAAQ,oBAAoB;AACzE,SAASC,IAAI,QAAQ,cAAc;AAQnC,SAASC,YAAY,QAAQ,oBAAoB;AACjD,SAASC,eAAe,QAAQ,uBAAuB;AAsJvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyDC,GACD,OAAO,SAASC,KACdC,KAAyC;IAEzC,MAAM,EACJC,EAAE,EACFC,IAAI,EACJC,OAAOV,QAAQ,EACfW,SAAS,IAAI,EACbC,OAAO,EACPC,SAAS,EACTC,WAAW,EACXC,WAAW,EACXC,uBAAuB,EACvBC,uBAAuB,EACvBC,uBAAuB,EACvBC,uBAAuB,EACvBC,OAAO,EACPC,OAAO,EACPC,SAAS,EACTC,UAAUC,mBAAmBvB,uBAAuB,EACpDwB,cAAc,KAAK,EACnBC,gBAAgB,MAAM,EACtBC,YAAY,EACZC,eAAe,KAAK,EACpBC,gBAAgB,GAAG,EACnBC,oBAAoB,KAAK,EACzBC,sBAAsB,KAAK,EAC3B,GAAGC,WACJ,GAAGzB;IACJ,MAAM0B,SAASnC,aAAaU,IAAI;IAChC,MAAM,EAAE0B,KAAK,EAAEC,gBAAgB,EAAE,GAAG/B,aAAa;QAC/CK;QACAC;QACAC;IACF;IAEA,MAAM,EAAEyB,cAAc,EAAEC,eAAe,EAAEC,aAAa,EAAE,GAAGjC,gBAAgB;QACzEe;QACAC;QACAC;QACAb;QACAK;QACAC;QACAoB;QACAjB;QACAC;IACF;IAEA,qBACE,KAACjB;QACCO,MAAMA;QACNE,QAAQA;QACRc,aAAaA;QACbI,eAAeA;QACfd,aAAaA;QACbD,aAAaA;QACba,cAAcA;QACdC,cAAcA;QACdF,eAAeA;QACfU,gBAAgBA;QAChBN,mBAAmBA;QACnBC,qBAAqBA;QACrBf,yBAAyBA;QACzBE,yBAAyBA;QACzBD,yBAAyBA;QACzBE,yBAAyBA;kBAEzB,cAAA,KAACtB;YAAyB0C,OAAOF;sBAC/B,cAAA,KAACzC;gBACE,GAAGoC,SAAS;gBACZ,GAAGM,aAAa;gBACjB9B,IAAIyB;gBACJO,KAAK5B;gBACL6B,MAAK;gBACLC,UAAU;gBACV7B,WAAWV,KAAK;oBAAEU;gBAAU;0BAE5B,cAAA,KAACd;oBACCmC,OAAOA;oBACPS,QAAQnB;oBACRoB,YAAY,CAACC,UAAYA,QAAQC,IAAI,CAACC,MAAM;;;;;AAMxD"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/tree/TreeGroup.tsx"],"sourcesContent":["\"use client\";\nimport {
|
|
1
|
+
{"version":3,"sources":["../../src/tree/TreeGroup.tsx"],"sourcesContent":["\"use client\";\n\nimport { type CSSProperties, type ReactNode, forwardRef } from \"react\";\n\nimport { List, type ListProps } from \"../list/List.js\";\nimport { useCollapseTransition } from \"../transition/useCollapseTransition.js\";\nimport { useTreeContext } from \"./TreeProvider.js\";\nimport { treeGroup } from \"./styles.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface OverridableTreeGroupProps extends ListProps {\n /** @defaultValue `false` */\n temporary?: boolean;\n\n /** @defaultValue `false` */\n disableTransition?: boolean;\n}\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport interface TreeGroupProps extends OverridableTreeGroupProps {\n children: ReactNode;\n depth: number;\n collapsed: boolean;\n}\n\n/**\n * **Client Component**\n *\n * @internal\n * @since 6.0.0 Removed the collapse options and is no longer a\n * \"public\" component.\n */\nexport const TreeGroup = forwardRef<HTMLUListElement, TreeGroupProps>(\n function TreeGroup(props, ref) {\n const {\n className,\n collapsed,\n depth,\n onClick,\n onMouseDown,\n children,\n temporary: propTemporary,\n disableTransition = false,\n ...remaining\n } = props;\n\n const style: CSSProperties = {\n ...remaining.style,\n \"--rmd-tree-depth\": depth,\n };\n\n const { temporaryChildItems } = useTreeContext();\n const temporary = propTemporary ?? temporaryChildItems;\n\n const { elementProps, rendered } = useCollapseTransition({\n style,\n nodeRef: ref,\n enter: !disableTransition,\n exit: !disableTransition,\n transitionIn: !collapsed,\n temporary,\n className: treeGroup({ className }),\n });\n\n if (!rendered || !children) {\n return null;\n }\n\n return (\n <List\n {...remaining}\n onClick={(event) => {\n onClick?.(event);\n // always stop propagation for click events and mousedown for groups\n // so that the parent child item's click and mousedown events aren't\n // also fired while there are disabled child elementsS or\n // non-interactable (like dividers or subheader)\n event.stopPropagation();\n }}\n onMouseDown={(event) => {\n onMouseDown?.(event);\n event.stopPropagation();\n }}\n {...elementProps}\n role=\"group\"\n >\n {children}\n </List>\n );\n }\n);\n"],"names":["forwardRef","List","useCollapseTransition","useTreeContext","treeGroup","TreeGroup","props","ref","className","collapsed","depth","onClick","onMouseDown","children","temporary","propTemporary","disableTransition","remaining","style","temporaryChildItems","elementProps","rendered","nodeRef","enter","exit","transitionIn","event","stopPropagation","role"],"mappings":"AAAA;;AAEA,SAA6CA,UAAU,QAAQ,QAAQ;AAEvE,SAASC,IAAI,QAAwB,kBAAkB;AACvD,SAASC,qBAAqB,QAAQ,yCAAyC;AAC/E,SAASC,cAAc,QAAQ,oBAAoB;AACnD,SAASC,SAAS,QAAQ,cAAc;AAuBxC;;;;;;CAMC,GACD,OAAO,MAAMC,0BAAYL,WACvB,SAASK,UAAUC,KAAK,EAAEC,GAAG;IAC3B,MAAM,EACJC,SAAS,EACTC,SAAS,EACTC,KAAK,EACLC,OAAO,EACPC,WAAW,EACXC,QAAQ,EACRC,WAAWC,aAAa,EACxBC,oBAAoB,KAAK,EACzB,GAAGC,WACJ,GAAGX;IAEJ,MAAMY,QAAuB;QAC3B,GAAGD,UAAUC,KAAK;QAClB,oBAAoBR;IACtB;IAEA,MAAM,EAAES,mBAAmB,EAAE,GAAGhB;IAChC,MAAMW,YAAYC,iBAAiBI;IAEnC,MAAM,EAAEC,YAAY,EAAEC,QAAQ,EAAE,GAAGnB,sBAAsB;QACvDgB;QACAI,SAASf;QACTgB,OAAO,CAACP;QACRQ,MAAM,CAACR;QACPS,cAAc,CAAChB;QACfK;QACAN,WAAWJ,UAAU;YAAEI;QAAU;IACnC;IAEA,IAAI,CAACa,YAAY,CAACR,UAAU;QAC1B,OAAO;IACT;IAEA,qBACE,KAACZ;QACE,GAAGgB,SAAS;QACbN,SAAS,CAACe;YACRf,UAAUe;YACV,oEAAoE;YACpE,oEAAoE;YACpE,yDAAyD;YACzD,gDAAgD;YAChDA,MAAMC,eAAe;QACvB;QACAf,aAAa,CAACc;YACZd,cAAcc;YACdA,MAAMC,eAAe;QACvB;QACC,GAAGP,YAAY;QAChBQ,MAAK;kBAEJf;;AAGP,GACA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/tree/TreeItem.tsx"],"sourcesContent":["\"use client\";\nimport {\n useEffect,\n type HTMLAttributes,\n type ReactElement,\n type ReactNode,\n type Ref,\n} from \"react\";\nimport { type ComponentWithRippleProps } from \"../interaction/types.js\";\nimport { useElementInteraction } from \"../interaction/useElementInteraction.js\";\nimport { useHigherContrastChildren } from \"../interaction/useHigherContrastChildren.js\";\nimport { ListItemChildren } from \"../list/ListItemChildren.js\";\nimport { useKeyboardMovementContext } from \"../movement/useKeyboardMovementProvider.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { TreeGroup, type OverridableTreeGroupProps } from \"./TreeGroup.js\";\nimport { TreeItemExpander } from \"./TreeItemExpander.js\";\nimport { useTreeContext } from \"./TreeProvider.js\";\nimport { treeItem, treeItemContent, treeItemMedia } from \"./styles.js\";\nimport { type DefaultTreeItemNode } from \"./types.js\";\n\n/**\n * @since 6.0.0 Added `liProps` and `groupProps`.\n * @since 6.0.0 The `liRef`, `liStyle`, and `liClassName` props were removed in\n * favor of `liProps={{ ref, style, className }}`.\n * @since 6.0.0 The `itemIndex`, `listSize`, `renderChildItems`, `isLink`,\n * `contentComponent`, and `readOnly` props were removed.\n */\nexport interface TreeItemProps\n extends Omit<DefaultTreeItemNode, \"parentId\">,\n HTMLAttributes<HTMLLIElement>,\n ComponentWithRippleProps {\n /**\n * @defaultValue `\"tree-item-\" + useId()`\n */\n id?: string;\n\n /**\n * This is used to set the `--rmd-tree-depth` CSS variable which allows the\n * padding to increase for each nested tree.\n */\n depth: number;\n\n /**\n * Any additional props that should be passed to the surrounding `<li>`\n * element. The top-level props are passed to the `<span>` or `<a>` element\n * instead.\n */\n liProps?: PropsWithRef<HTMLAttributes<HTMLLIElement>, HTMLLIElement>;\n\n /**\n * Any additional props to pass to the `TreeGroup` component.\n */\n groupProps?: PropsWithRef<OverridableTreeGroupProps, HTMLUListElement>;\n\n /**\n * This should normally be the text/content to display within the tree item\n * and should **not** include nested trees.\n */\n children?: ReactNode;\n\n /**\n * The nested tree items to render within a `TreeGroup`.\n */\n childItems?: ReactNode;\n\n /** @defaultValue `false` */\n disableTransition?: boolean;\n\n /**\n * This ref is applied to the `<span>` or `<a>` element and can be used to\n * implement drag and drop behavior.\n */\n contentRef?: Ref<HTMLElement>;\n\n /**\n * Set this to `true` if the {@link childItems} should not be rendered while\n * collapsed.\n *\n * @defaultValue `false`\n */\n temporaryChildItems?: boolean;\n}\n\n/**\n * **Client Component**\n *\n * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/treeview/}\n * @since 6.0.0 No longer forwards refs. The ref must be provided using\n * `contentRef` instead.\n * @since 6.0.0 The `liRef` was removed in favor of `liProps={{ ref }}`.\n * @since 6.0.0 The wrapping `<li>` element will always be `role=\"none\"` and the\n * `<span>` or `<a>` will gain the `role=\"treeitem\"` instead. This makes it\n * easier to pass event handlers because of the nested behavior of tree items.\n * @since 6.0.0 No longer provides the `aria-level`, `aria-setsize` and\n * `aria-posinset` attributes and allows the browser to compute them instead.\n */\nexport function TreeItem(props: TreeItemProps): ReactElement {\n const {\n id: propId,\n depth,\n liProps,\n disabled = false,\n disabledOpacity = false,\n groupProps,\n children: propChildren,\n className,\n itemId,\n leftAddon,\n leftAddonType: propLeftAddonType,\n leftAddonPosition,\n leftAddonClassName,\n leftAddonForceWrap,\n rightAddon,\n rightAddonType,\n rightAddonPosition,\n rightAddonClassName,\n rightAddonForceWrap,\n disableTextChildren,\n disableLeftAddonCenteredMedia: propDisableLeftAddonCenteredMedia,\n disableRightAddonCenteredMedia,\n textProps,\n textClassName,\n primaryText,\n secondaryText,\n secondaryTextProps,\n secondaryTextClassName,\n multiline,\n childItems,\n contentClassName,\n temporaryChildItems,\n disableTransition: propDisableTransition,\n onBlur,\n onClick,\n onKeyDown,\n onKeyUp,\n onMouseDown,\n onMouseUp,\n onMouseLeave,\n onDragStart,\n onTouchStart,\n onTouchEnd,\n onTouchMove,\n contentRef,\n disableRipple,\n ...remaining\n } = props;\n\n const id = useEnsuredId(propId, \"tree-item\");\n const children = useHigherContrastChildren(propChildren);\n if (disabled) {\n // you can't really disable a link other than removing the href, so\n // unset these props\n remaining.to = undefined;\n remaining.href = undefined;\n }\n\n const {\n expandedIds,\n selectedIds,\n expanderLeft,\n expansionMode,\n metadataLookup,\n linkComponent: Link,\n toggleTreeItemSelection,\n toggleTreeItemExpansion,\n disableTransition: contextDisableTransition,\n } = useTreeContext();\n const { activeDescendantId } = useKeyboardMovementContext();\n\n const isLeafNode = !childItems;\n const focused = activeDescendantId === id;\n const expanded = expandedIds.has(itemId);\n const selected = selectedIds.has(itemId);\n const disableTransition = propDisableTransition ?? contextDisableTransition;\n\n useEffect(() => {\n const lookup = metadataLookup.current;\n lookup.expandable[itemId] = !isLeafNode;\n lookup.disabledItems[itemId] = disabled;\n lookup.elementToItem[id] = itemId;\n lookup.itemToElement[itemId] = id;\n\n return () => {\n /* eslint-disable @typescript-eslint/no-dynamic-delete */\n delete lookup.disabledItems[itemId];\n delete lookup.expandable[itemId];\n delete lookup.elementToItem[id];\n delete lookup.itemToElement[itemId];\n /* eslint-enable @typescript-eslint/no-dynamic-delete */\n };\n }, [id, metadataLookup, itemId, isLeafNode, disabled, depth]);\n\n const { pressedClassName, ripples, handlers } =\n useElementInteraction<HTMLLIElement>({\n mode: disableRipple ? \"none\" : undefined,\n onBlur,\n onClick(event) {\n onClick?.(event);\n toggleTreeItemSelection(itemId);\n if (!isLeafNode && expansionMode !== \"manual\") {\n toggleTreeItemExpansion(itemId);\n }\n },\n onKeyDown,\n onKeyUp,\n onMouseDown,\n onMouseUp,\n onMouseLeave,\n onDragStart,\n onTouchStart,\n onTouchEnd,\n onTouchMove,\n disabled,\n });\n\n const isLink = !!(remaining.to || remaining.href);\n\n // cheating a bit so there are type errors around the event handlers\n const ContentComponent = (isLink ? Link : \"span\") as \"span\";\n const leftAddonType =\n (propLeftAddonType ?? (expanderLeft && leftAddon)) ? \"media\" : undefined;\n const isMediaLeftAddon =\n typeof propLeftAddonType === \"undefined\" && leftAddonType === \"media\";\n const disableLeftAddonCenteredMedia =\n propDisableLeftAddonCenteredMedia ?? isMediaLeftAddon;\n\n return (\n <li\n {...liProps}\n role=\"none\"\n className={treeItem({\n className,\n expander: !!childItems,\n expanderLeft,\n })}\n >\n <ContentComponent\n {...remaining}\n // nodes with children should always apply the `aria-expanded` to show\n // that it is expandable while leaf nodes should remain omitted\n aria-expanded={isLeafNode ? undefined : expanded}\n aria-selected={selected}\n aria-disabled={disabled || undefined}\n id={id}\n ref={contentRef}\n role=\"treeitem\"\n tabIndex={-1}\n {...handlers}\n className={treeItemContent({\n link: isLink,\n focused,\n selected,\n disabled,\n disabledOpacity,\n className: contentClassName,\n pressedClassName,\n })}\n >\n <ListItemChildren\n multiline={multiline}\n textClassName={textClassName}\n secondaryTextClassName={secondaryTextClassName}\n disableTextChildren={disableTextChildren}\n primaryText={primaryText}\n textProps={textProps}\n secondaryText={secondaryText}\n secondaryTextProps={secondaryTextProps}\n leftAddon={\n <TreeItemExpander\n isLeft\n itemId={itemId}\n addon={leftAddon}\n expanded={expanded}\n disabled={disabled}\n isLeafNode={isLeafNode}\n />\n }\n leftAddonType={leftAddonType}\n leftAddonPosition={leftAddonPosition}\n leftAddonClassName={treeItemMedia({\n isLeafNode,\n isMediaLeftAddon,\n className: leftAddonClassName,\n })}\n leftAddonForceWrap={leftAddonForceWrap}\n rightAddon={\n <TreeItemExpander\n itemId={itemId}\n addon={rightAddon}\n expanded={expanded}\n disabled={disabled}\n isLeafNode={isLeafNode}\n />\n }\n rightAddonType={rightAddonType}\n rightAddonPosition={rightAddonPosition}\n rightAddonClassName={rightAddonClassName}\n rightAddonForceWrap={rightAddonForceWrap}\n disableLeftAddonCenteredMedia={disableLeftAddonCenteredMedia}\n disableRightAddonCenteredMedia={disableRightAddonCenteredMedia}\n >\n {children}\n </ListItemChildren>\n {ripples}\n </ContentComponent>\n <TreeGroup\n id={`${id}-group`}\n temporary={temporaryChildItems}\n disableTransition={disableTransition}\n {...groupProps}\n depth={depth + 1}\n collapsed={isLeafNode || !expanded}\n >\n {childItems}\n </TreeGroup>\n </li>\n );\n}\n"],"names":["useEffect","useElementInteraction","useHigherContrastChildren","ListItemChildren","useKeyboardMovementContext","useEnsuredId","TreeGroup","TreeItemExpander","useTreeContext","treeItem","treeItemContent","treeItemMedia","TreeItem","props","id","propId","depth","liProps","disabled","disabledOpacity","groupProps","children","propChildren","className","itemId","leftAddon","leftAddonType","propLeftAddonType","leftAddonPosition","leftAddonClassName","leftAddonForceWrap","rightAddon","rightAddonType","rightAddonPosition","rightAddonClassName","rightAddonForceWrap","disableTextChildren","disableLeftAddonCenteredMedia","propDisableLeftAddonCenteredMedia","disableRightAddonCenteredMedia","textProps","textClassName","primaryText","secondaryText","secondaryTextProps","secondaryTextClassName","multiline","childItems","contentClassName","temporaryChildItems","disableTransition","propDisableTransition","onBlur","onClick","onKeyDown","onKeyUp","onMouseDown","onMouseUp","onMouseLeave","onDragStart","onTouchStart","onTouchEnd","onTouchMove","contentRef","disableRipple","remaining","to","undefined","href","expandedIds","selectedIds","expanderLeft","expansionMode","metadataLookup","linkComponent","Link","toggleTreeItemSelection","toggleTreeItemExpansion","contextDisableTransition","activeDescendantId","isLeafNode","focused","expanded","has","selected","lookup","current","expandable","disabledItems","elementToItem","itemToElement","pressedClassName","ripples","handlers","mode","event","isLink","ContentComponent","isMediaLeftAddon","li","role","expander","aria-expanded","aria-selected","aria-disabled","ref","tabIndex","link","isLeft","addon","temporary","collapsed"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../src/tree/TreeItem.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n type HTMLAttributes,\n type ReactElement,\n type ReactNode,\n type Ref,\n useEffect,\n} from \"react\";\n\nimport { type ComponentWithRippleProps } from \"../interaction/types.js\";\nimport { useElementInteraction } from \"../interaction/useElementInteraction.js\";\nimport { useHigherContrastChildren } from \"../interaction/useHigherContrastChildren.js\";\nimport { ListItemChildren } from \"../list/ListItemChildren.js\";\nimport { useKeyboardMovementContext } from \"../movement/useKeyboardMovementProvider.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { type OverridableTreeGroupProps, TreeGroup } from \"./TreeGroup.js\";\nimport { TreeItemExpander } from \"./TreeItemExpander.js\";\nimport { useTreeContext } from \"./TreeProvider.js\";\nimport { treeItem, treeItemContent, treeItemMedia } from \"./styles.js\";\nimport { type DefaultTreeItemNode } from \"./types.js\";\n\n/**\n * @since 6.0.0 Added `liProps` and `groupProps`.\n * @since 6.0.0 The `liRef`, `liStyle`, and `liClassName` props were removed in\n * favor of `liProps={{ ref, style, className }}`.\n * @since 6.0.0 The `itemIndex`, `listSize`, `renderChildItems`, `isLink`,\n * `contentComponent`, and `readOnly` props were removed.\n */\nexport interface TreeItemProps\n extends Omit<DefaultTreeItemNode, \"parentId\">,\n HTMLAttributes<HTMLLIElement>,\n ComponentWithRippleProps {\n /**\n * @defaultValue `\"tree-item-\" + useId()`\n */\n id?: string;\n\n /**\n * This is used to set the `--rmd-tree-depth` CSS variable which allows the\n * padding to increase for each nested tree.\n */\n depth: number;\n\n /**\n * Any additional props that should be passed to the surrounding `<li>`\n * element. The top-level props are passed to the `<span>` or `<a>` element\n * instead.\n */\n liProps?: PropsWithRef<HTMLAttributes<HTMLLIElement>, HTMLLIElement>;\n\n /**\n * Any additional props to pass to the `TreeGroup` component.\n */\n groupProps?: PropsWithRef<OverridableTreeGroupProps, HTMLUListElement>;\n\n /**\n * This should normally be the text/content to display within the tree item\n * and should **not** include nested trees.\n */\n children?: ReactNode;\n\n /**\n * The nested tree items to render within a `TreeGroup`.\n */\n childItems?: ReactNode;\n\n /** @defaultValue `false` */\n disableTransition?: boolean;\n\n /**\n * This ref is applied to the `<span>` or `<a>` element and can be used to\n * implement drag and drop behavior.\n */\n contentRef?: Ref<HTMLElement>;\n\n /**\n * Set this to `true` if the {@link childItems} should not be rendered while\n * collapsed.\n *\n * @defaultValue `false`\n */\n temporaryChildItems?: boolean;\n}\n\n/**\n * **Client Component**\n *\n * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/treeview/}\n * @since 6.0.0 No longer forwards refs. The ref must be provided using\n * `contentRef` instead.\n * @since 6.0.0 The `liRef` was removed in favor of `liProps={{ ref }}`.\n * @since 6.0.0 The wrapping `<li>` element will always be `role=\"none\"` and the\n * `<span>` or `<a>` will gain the `role=\"treeitem\"` instead. This makes it\n * easier to pass event handlers because of the nested behavior of tree items.\n * @since 6.0.0 No longer provides the `aria-level`, `aria-setsize` and\n * `aria-posinset` attributes and allows the browser to compute them instead.\n */\nexport function TreeItem(props: TreeItemProps): ReactElement {\n const {\n id: propId,\n depth,\n liProps,\n disabled = false,\n disabledOpacity = false,\n groupProps,\n children: propChildren,\n className,\n itemId,\n leftAddon,\n leftAddonType: propLeftAddonType,\n leftAddonPosition,\n leftAddonClassName,\n leftAddonForceWrap,\n rightAddon,\n rightAddonType,\n rightAddonPosition,\n rightAddonClassName,\n rightAddonForceWrap,\n disableTextChildren,\n disableLeftAddonCenteredMedia: propDisableLeftAddonCenteredMedia,\n disableRightAddonCenteredMedia,\n textProps,\n textClassName,\n primaryText,\n secondaryText,\n secondaryTextProps,\n secondaryTextClassName,\n multiline,\n childItems,\n contentClassName,\n temporaryChildItems,\n disableTransition: propDisableTransition,\n onBlur,\n onClick,\n onKeyDown,\n onKeyUp,\n onMouseDown,\n onMouseUp,\n onMouseLeave,\n onDragStart,\n onTouchStart,\n onTouchEnd,\n onTouchMove,\n contentRef,\n disableRipple,\n ...remaining\n } = props;\n\n const id = useEnsuredId(propId, \"tree-item\");\n const children = useHigherContrastChildren(propChildren);\n if (disabled) {\n // you can't really disable a link other than removing the href, so\n // unset these props\n remaining.to = undefined;\n remaining.href = undefined;\n }\n\n const {\n expandedIds,\n selectedIds,\n expanderLeft,\n expansionMode,\n metadataLookup,\n linkComponent: Link,\n toggleTreeItemSelection,\n toggleTreeItemExpansion,\n disableTransition: contextDisableTransition,\n } = useTreeContext();\n const { activeDescendantId } = useKeyboardMovementContext();\n\n const isLeafNode = !childItems;\n const focused = activeDescendantId === id;\n const expanded = expandedIds.has(itemId);\n const selected = selectedIds.has(itemId);\n const disableTransition = propDisableTransition ?? contextDisableTransition;\n\n useEffect(() => {\n const lookup = metadataLookup.current;\n lookup.expandable[itemId] = !isLeafNode;\n lookup.disabledItems[itemId] = disabled;\n lookup.elementToItem[id] = itemId;\n lookup.itemToElement[itemId] = id;\n\n return () => {\n /* eslint-disable @typescript-eslint/no-dynamic-delete */\n delete lookup.disabledItems[itemId];\n delete lookup.expandable[itemId];\n delete lookup.elementToItem[id];\n delete lookup.itemToElement[itemId];\n /* eslint-enable @typescript-eslint/no-dynamic-delete */\n };\n }, [id, metadataLookup, itemId, isLeafNode, disabled, depth]);\n\n const { pressedClassName, ripples, handlers } =\n useElementInteraction<HTMLLIElement>({\n mode: disableRipple ? \"none\" : undefined,\n onBlur,\n onClick(event) {\n onClick?.(event);\n toggleTreeItemSelection(itemId);\n if (!isLeafNode && expansionMode !== \"manual\") {\n toggleTreeItemExpansion(itemId);\n }\n },\n onKeyDown,\n onKeyUp,\n onMouseDown,\n onMouseUp,\n onMouseLeave,\n onDragStart,\n onTouchStart,\n onTouchEnd,\n onTouchMove,\n disabled,\n });\n\n const isLink = !!(remaining.to || remaining.href);\n\n // cheating a bit so there are type errors around the event handlers\n const ContentComponent = (isLink ? Link : \"span\") as \"span\";\n const leftAddonType =\n (propLeftAddonType ?? (expanderLeft && leftAddon)) ? \"media\" : undefined;\n const isMediaLeftAddon =\n typeof propLeftAddonType === \"undefined\" && leftAddonType === \"media\";\n const disableLeftAddonCenteredMedia =\n propDisableLeftAddonCenteredMedia ?? isMediaLeftAddon;\n\n return (\n <li\n {...liProps}\n role=\"none\"\n className={treeItem({\n className,\n expander: !!childItems,\n expanderLeft,\n })}\n >\n <ContentComponent\n {...remaining}\n // nodes with children should always apply the `aria-expanded` to show\n // that it is expandable while leaf nodes should remain omitted\n aria-expanded={isLeafNode ? undefined : expanded}\n aria-selected={selected}\n aria-disabled={disabled || undefined}\n id={id}\n ref={contentRef}\n role=\"treeitem\"\n tabIndex={-1}\n {...handlers}\n className={treeItemContent({\n link: isLink,\n focused,\n selected,\n disabled,\n disabledOpacity,\n className: contentClassName,\n pressedClassName,\n })}\n >\n <ListItemChildren\n multiline={multiline}\n textClassName={textClassName}\n secondaryTextClassName={secondaryTextClassName}\n disableTextChildren={disableTextChildren}\n primaryText={primaryText}\n textProps={textProps}\n secondaryText={secondaryText}\n secondaryTextProps={secondaryTextProps}\n leftAddon={\n <TreeItemExpander\n isLeft\n itemId={itemId}\n addon={leftAddon}\n expanded={expanded}\n disabled={disabled}\n isLeafNode={isLeafNode}\n />\n }\n leftAddonType={leftAddonType}\n leftAddonPosition={leftAddonPosition}\n leftAddonClassName={treeItemMedia({\n isLeafNode,\n isMediaLeftAddon,\n className: leftAddonClassName,\n })}\n leftAddonForceWrap={leftAddonForceWrap}\n rightAddon={\n <TreeItemExpander\n itemId={itemId}\n addon={rightAddon}\n expanded={expanded}\n disabled={disabled}\n isLeafNode={isLeafNode}\n />\n }\n rightAddonType={rightAddonType}\n rightAddonPosition={rightAddonPosition}\n rightAddonClassName={rightAddonClassName}\n rightAddonForceWrap={rightAddonForceWrap}\n disableLeftAddonCenteredMedia={disableLeftAddonCenteredMedia}\n disableRightAddonCenteredMedia={disableRightAddonCenteredMedia}\n >\n {children}\n </ListItemChildren>\n {ripples}\n </ContentComponent>\n <TreeGroup\n id={`${id}-group`}\n temporary={temporaryChildItems}\n disableTransition={disableTransition}\n {...groupProps}\n depth={depth + 1}\n collapsed={isLeafNode || !expanded}\n >\n {childItems}\n </TreeGroup>\n </li>\n );\n}\n"],"names":["useEffect","useElementInteraction","useHigherContrastChildren","ListItemChildren","useKeyboardMovementContext","useEnsuredId","TreeGroup","TreeItemExpander","useTreeContext","treeItem","treeItemContent","treeItemMedia","TreeItem","props","id","propId","depth","liProps","disabled","disabledOpacity","groupProps","children","propChildren","className","itemId","leftAddon","leftAddonType","propLeftAddonType","leftAddonPosition","leftAddonClassName","leftAddonForceWrap","rightAddon","rightAddonType","rightAddonPosition","rightAddonClassName","rightAddonForceWrap","disableTextChildren","disableLeftAddonCenteredMedia","propDisableLeftAddonCenteredMedia","disableRightAddonCenteredMedia","textProps","textClassName","primaryText","secondaryText","secondaryTextProps","secondaryTextClassName","multiline","childItems","contentClassName","temporaryChildItems","disableTransition","propDisableTransition","onBlur","onClick","onKeyDown","onKeyUp","onMouseDown","onMouseUp","onMouseLeave","onDragStart","onTouchStart","onTouchEnd","onTouchMove","contentRef","disableRipple","remaining","to","undefined","href","expandedIds","selectedIds","expanderLeft","expansionMode","metadataLookup","linkComponent","Link","toggleTreeItemSelection","toggleTreeItemExpansion","contextDisableTransition","activeDescendantId","isLeafNode","focused","expanded","has","selected","lookup","current","expandable","disabledItems","elementToItem","itemToElement","pressedClassName","ripples","handlers","mode","event","isLink","ContentComponent","isMediaLeftAddon","li","role","expander","aria-expanded","aria-selected","aria-disabled","ref","tabIndex","link","isLeft","addon","temporary","collapsed"],"mappings":"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"}
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
3
3
|
import { cnb } from "cnbuilder";
|
|
4
4
|
import { cloneElement, isValidElement } from "react";
|
|
5
|
-
import { getIcon } from "../icon/iconConfig.js";
|
|
6
5
|
import { IconRotator } from "../icon/IconRotator.js";
|
|
6
|
+
import { getIcon } from "../icon/config.js";
|
|
7
7
|
import { useTreeContext } from "./TreeProvider.js";
|
|
8
8
|
/**
|
|
9
9
|
* **Client Component**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/tree/TreeItemExpander.tsx"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport {\n
|
|
1
|
+
{"version":3,"sources":["../../src/tree/TreeItemExpander.tsx"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\nimport {\n type MouseEventHandler,\n type ReactElement,\n type ReactNode,\n cloneElement,\n isValidElement,\n} from \"react\";\n\nimport { IconRotator } from \"../icon/IconRotator.js\";\nimport { getIcon } from \"../icon/config.js\";\nimport { useTreeContext } from \"./TreeProvider.js\";\n\n/**\n * @internal\n * @since 6.0.0 Updated to use the latest API\n */\nexport interface TreeItemExpanderProps {\n /** @defaultValue `false` */\n isLeft?: boolean;\n itemId: string;\n addon: ReactNode;\n disabled: boolean;\n expanded: boolean;\n isLeafNode: boolean;\n className?: string;\n}\n\n/**\n * **Client Component**\n *\n * @internal\n * @since 6.0.0 Updated to support the new `expansionMode` behavior.\n */\nexport function TreeItemExpander(props: TreeItemExpanderProps): ReactElement {\n const {\n itemId,\n isLeft = false,\n addon,\n expanded,\n disabled,\n isLeafNode,\n className,\n } = props;\n const {\n expanderIcon,\n expanderLeft,\n expansionMode,\n disableTransition,\n toggleTreeItemExpansion,\n } = useTreeContext();\n\n const icon = getIcon(\"dropdown\", expanderIcon);\n if (isLeafNode || expanderLeft !== isLeft) {\n if (isValidElement<{ className?: string }>(addon)) {\n return cloneElement(addon, { className });\n }\n\n return <>{addon}</>;\n }\n\n const isCloneable = isValidElement(icon);\n let clickProps: { onClick: MouseEventHandler } | undefined;\n if (expansionMode === \"manual\" && !disabled) {\n clickProps = {\n onClick(event) {\n // do not select the tree item if the icon is clicked\n event.stopPropagation();\n event.preventDefault();\n\n toggleTreeItemExpansion(itemId);\n },\n };\n }\n\n return (\n <>\n <IconRotator\n className={cnb(!addon && className)}\n {...(!isCloneable ? clickProps : undefined)}\n rotated={expanded}\n forceIconWrap={!isCloneable}\n disableTransition={disableTransition}\n >\n {clickProps && isCloneable ? cloneElement(icon, clickProps) : icon}\n </IconRotator>\n {addon}\n </>\n );\n}\n"],"names":["cnb","cloneElement","isValidElement","IconRotator","getIcon","useTreeContext","TreeItemExpander","props","itemId","isLeft","addon","expanded","disabled","isLeafNode","className","expanderIcon","expanderLeft","expansionMode","disableTransition","toggleTreeItemExpansion","icon","isCloneable","clickProps","onClick","event","stopPropagation","preventDefault","undefined","rotated","forceIconWrap"],"mappings":"AAAA;;AAEA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAIEC,YAAY,EACZC,cAAc,QACT,QAAQ;AAEf,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,OAAO,QAAQ,oBAAoB;AAC5C,SAASC,cAAc,QAAQ,oBAAoB;AAiBnD;;;;;CAKC,GACD,OAAO,SAASC,iBAAiBC,KAA4B;IAC3D,MAAM,EACJC,MAAM,EACNC,SAAS,KAAK,EACdC,KAAK,EACLC,QAAQ,EACRC,QAAQ,EACRC,UAAU,EACVC,SAAS,EACV,GAAGP;IACJ,MAAM,EACJQ,YAAY,EACZC,YAAY,EACZC,aAAa,EACbC,iBAAiB,EACjBC,uBAAuB,EACxB,GAAGd;IAEJ,MAAMe,OAAOhB,QAAQ,YAAYW;IACjC,IAAIF,cAAcG,iBAAiBP,QAAQ;QACzC,kBAAIP,eAAuCQ,QAAQ;YACjD,qBAAOT,aAAaS,OAAO;gBAAEI;YAAU;QACzC;QAEA,qBAAO;sBAAGJ;;IACZ;IAEA,MAAMW,4BAAcnB,eAAekB;IACnC,IAAIE;IACJ,IAAIL,kBAAkB,YAAY,CAACL,UAAU;QAC3CU,aAAa;YACXC,SAAQC,KAAK;gBACX,qDAAqD;gBACrDA,MAAMC,eAAe;gBACrBD,MAAME,cAAc;gBAEpBP,wBAAwBX;YAC1B;QACF;IACF;IAEA,qBACE;;0BACE,KAACL;gBACCW,WAAWd,IAAI,CAACU,SAASI;gBACxB,GAAI,CAACO,cAAcC,aAAaK,SAAS;gBAC1CC,SAASjB;gBACTkB,eAAe,CAACR;gBAChBH,mBAAmBA;0BAElBI,cAAcD,4BAAcpB,aAAamB,MAAME,cAAcF;;YAE/DV;;;AAGP"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/tree/TreeProvider.tsx"],"sourcesContent":["\"use client\";\nimport {\n
|
|
1
|
+
{"version":3,"sources":["../../src/tree/TreeProvider.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n type ReactElement,\n type ReactNode,\n createContext,\n useContext,\n useMemo,\n} from \"react\";\n\nimport { type CustomLinkComponent } from \"../link/Link.js\";\nimport { type NonNullRef } from \"../types.js\";\nimport {\n type DefaultTreeItemNode,\n type TreeData,\n type TreeItemNode,\n} from \"./types.js\";\nimport { type TreeExpansion } from \"./useTreeExpansion.js\";\nimport { type TreeSelection } from \"./useTreeSelection.js\";\n\n/**\n * When this is set to `\"auto\"`, clicking on a tree item with a mouse or with\n * the Enter/Space keys will select and expand/collapse the tree item. The user\n * can still use the ArrowLeft and ArrowRight keys to expand/collapse nested\n * tree items.\n *\n * When this is set to `\"manual\"`, clicking on a tree item with a mouse or with\n * the Enter/Space keys will only select that tree item. The user must use the\n * ArrowLeft and ArrowRight keys to expand/collapse nested tree items.\n *\n * The main use-case for the `\"manual\"` setting is creating a navigation tree\n * that requires the user to click on an icon or a button to expand the child\n * items.\n *\n * @since 6.0.0\n */\nexport type TreeExpansionMode = \"auto\" | \"manual\";\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport interface TreeItemMetadataLookup {\n /**\n * This is used for the keyboard movement behavior for trees that allow the\n * `ArrowRight` key for tree items that have children.\n */\n expandable: Record<string, boolean>;\n\n /**\n * This is a quick lookup if a tree item is disabled since it's possible the\n * custom `renderer` sets the `disabled` state and not the `TreeData`.\n */\n disabledItems: Record<string, boolean>;\n\n /**\n * A lookup of element `id` (DOM id) for each tree item to the `itemId`. This\n * is a quick way to figure out which item is being interacted with from a\n * keyboard event without needed to add `data-*` attributes.\n */\n elementToItem: Record<string, string>;\n\n /**\n * A lookup of tree item `itemId` to the element `id` (DOM id). This is used\n * to be able to find a parent tree item when the `ArrowLeft` key is pressed\n * to focus that parent item.\n */\n itemToElement: Record<string, string>;\n}\n\n/**\n * The tree context is mostly a convenience API for implementing a custom tree\n * item that requires the {@link TreeExpansion}, {@link TreeSelection} and\n * {@link TreeData} to work.\n *\n * The other properties on the context are most likely for internal use only.\n *\n * @since 6.0.0\n */\nexport interface TreeContext<T extends TreeItemNode = DefaultTreeItemNode>\n extends TreeExpansion,\n TreeSelection {\n data: TreeData<T>;\n rootId: string | null;\n disableTransition: boolean;\n temporaryChildItems: boolean;\n\n linkComponent: CustomLinkComponent;\n\n /** @internal */\n expanderLeft: boolean;\n /** @internal */\n expanderIcon: ReactNode;\n /** @internal */\n expansionMode: TreeExpansionMode;\n /** @internal */\n metadataLookup: NonNullRef<TreeItemMetadataLookup>;\n}\n\n// Allow the hook to correct typecast this instead\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst context = createContext<TreeContext<any> | undefined>(undefined);\ncontext.displayName = \"Tree\";\nconst { Provider } = context;\n\n/**\n * This can be used for a custom tree item renderer.\n *\n * @see The `Tree` component for an example.\n * @since 6.0.0\n */\nexport function useTreeContext<\n T extends TreeItemNode = DefaultTreeItemNode,\n>(): TreeContext<T> {\n const value = useContext(context);\n if (!value) {\n throw new Error(\"Cannot find a parent Tree component\");\n }\n\n return value;\n}\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport interface TreeProviderProps<T extends TreeItemNode = DefaultTreeItemNode>\n extends TreeContext<T> {\n children: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * @internal\n * @since 6.0.0\n */\nexport function TreeProvider<T extends TreeItemNode = DefaultTreeItemNode>(\n props: TreeProviderProps<T>\n): ReactElement {\n const {\n children,\n data,\n rootId,\n multiSelect,\n expanderIcon,\n expanderLeft,\n expansionMode,\n metadataLookup,\n disableTransition,\n temporaryChildItems,\n linkComponent,\n expandedIds,\n selectedIds,\n expandMultipleTreeItems,\n toggleTreeItemExpansion,\n selectMultipleTreeItems,\n toggleTreeItemSelection,\n } = props;\n const value = useMemo<TreeContext<T>>(\n () => ({\n data,\n rootId,\n multiSelect,\n expanderIcon,\n expanderLeft,\n expansionMode,\n metadataLookup,\n disableTransition,\n temporaryChildItems,\n linkComponent,\n expandedIds,\n selectedIds,\n expandMultipleTreeItems,\n toggleTreeItemExpansion,\n selectMultipleTreeItems,\n toggleTreeItemSelection,\n }),\n [\n data,\n disableTransition,\n expandMultipleTreeItems,\n expandedIds,\n expanderIcon,\n expanderLeft,\n expansionMode,\n linkComponent,\n metadataLookup,\n multiSelect,\n rootId,\n selectMultipleTreeItems,\n selectedIds,\n temporaryChildItems,\n toggleTreeItemExpansion,\n toggleTreeItemSelection,\n ]\n );\n\n return <Provider value={value}>{children}</Provider>;\n}\n"],"names":["createContext","useContext","useMemo","context","undefined","displayName","Provider","useTreeContext","value","Error","TreeProvider","props","children","data","rootId","multiSelect","expanderIcon","expanderLeft","expansionMode","metadataLookup","disableTransition","temporaryChildItems","linkComponent","expandedIds","selectedIds","expandMultipleTreeItems","toggleTreeItemExpansion","selectMultipleTreeItems","toggleTreeItemSelection"],"mappings":"AAAA;;AAEA,SAGEA,aAAa,EACbC,UAAU,EACVC,OAAO,QACF,QAAQ;AA2Ff,kDAAkD;AAClD,8DAA8D;AAC9D,MAAMC,wBAAUH,cAA4CI;AAC5DD,QAAQE,WAAW,GAAG;AACtB,MAAM,EAAEC,QAAQ,EAAE,GAAGH;AAErB;;;;;CAKC,GACD,OAAO,SAASI;IAGd,MAAMC,QAAQP,WAAWE;IACzB,IAAI,CAACK,OAAO;QACV,MAAM,IAAIC,MAAM;IAClB;IAEA,OAAOD;AACT;AAWA;;;;;CAKC,GACD,OAAO,SAASE,aACdC,KAA2B;IAE3B,MAAM,EACJC,QAAQ,EACRC,IAAI,EACJC,MAAM,EACNC,WAAW,EACXC,YAAY,EACZC,YAAY,EACZC,aAAa,EACbC,cAAc,EACdC,iBAAiB,EACjBC,mBAAmB,EACnBC,aAAa,EACbC,WAAW,EACXC,WAAW,EACXC,uBAAuB,EACvBC,uBAAuB,EACvBC,uBAAuB,EACvBC,uBAAuB,EACxB,GAAGjB;IACJ,MAAMH,QAAQN,QACZ,IAAO,CAAA;YACLW;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;QACF,CAAA,GACA;QACEf;QACAO;QACAK;QACAF;QACAP;QACAC;QACAC;QACAI;QACAH;QACAJ;QACAD;QACAa;QACAH;QACAH;QACAK;QACAE;KACD;IAGH,qBAAO,KAACtB;QAASE,OAAOA;kBAAQI;;AAClC"}
|
package/dist/tree/_tree.scss
CHANGED
package/dist/tree/styles.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/tree/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport type { InternalListItemClassNameOptions } from \"../list/listItemStyles.js\";\nimport { listItem } from \"../list/listItemStyles.js\";\nimport { bem } from \"../utils/bem.js\";\n\nconst treeStyles = bem(\"rmd-tree\");\nconst treeItemStyles = bem(\"rmd-tree-item\");\nconst treeGroupStyles = bem(\"rmd-tree-group\");\n\n/** @since 6.0.0 */\nexport interface TreeClassNameOptions {\n className?: string;\n}\n\n/**\n * Apply the `className`s for a tree component. This will be type-safe if using\n * typescript.\n *\n * @since 6.0.0\n */\nexport function tree(options: TreeClassNameOptions = {}): string {\n const { className } = options;\n\n return cnb(treeStyles(), className);\n}\n\n/** @since 6.0.0 */\nexport interface TreeItemClassNameOptions {\n className?: string;\n expander?: boolean;\n\n /**\n * Settings this to `true` will update the styles for the expander icon within\n * the tree item to rotate `down -> right` instead of `down -> left`.\n *\n * @defaultValue `false`\n */\n expanderLeft?: boolean;\n}\n\n/**\n * Apply the `className`s for a tree item component. This will be type-safe if\n * using typescript.\n *\n * @since 6.0.0\n */\nexport function treeItem(options: TreeItemClassNameOptions = {}): string {\n const { className, expander = false, expanderLeft = false } = options;\n\n return cnb(\n treeItemStyles({\n \"expander-left\": expander && expanderLeft,\n \"expander-right\": expander && !expanderLeft,\n }),\n className\n );\n}\n\n/** @since 6.0.0 */\nexport interface TreeItemContentClassNameOptions\n extends InternalListItemClassNameOptions {\n /**\n * Set this\n *\n * @defaultValue `false`\n */\n link?: boolean;\n\n /**\n * Set this to `true` when the tree item is the current keyboard focus with\n * `aria-activedescendant`. This will apply the focus styles only while the\n * parent tree component is focused and the user is in keyboard mode.\n *\n *\n * @defaultValue `false`\n */\n focused?: boolean;\n\n /**\n * Set this to `true` hen the tree item has been selected by the user. The\n * default styles just\n *\n * @defaultValue `false`\n */\n selected?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function treeItemContent(\n options: TreeItemContentClassNameOptions = {}\n): string {\n const {\n className,\n link = false,\n focused,\n selected,\n disabled = false,\n ...remaining\n } = options;\n\n return cnb(\n treeItemStyles(\"content\", {\n link,\n focused,\n selected,\n disabled,\n }),\n listItem({\n className,\n disabled,\n ...remaining,\n })\n );\n}\n\n/**\n * @since 6.0.0\n */\nexport interface TreeItemMediaClassNameOptions {\n className?: string;\n isLeafNode: boolean;\n isMediaLeftAddon: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function treeItemMedia(options: TreeItemMediaClassNameOptions): string {\n const { isLeafNode, isMediaLeftAddon, className } = options;\n\n return cnb(\n isMediaLeftAddon && treeItemStyles(\"media\", { single: isLeafNode }),\n className\n );\n}\n\n/** @since 6.0.0 */\nexport interface TreeGroupClassNameOptions {\n className?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport function treeGroup(options: TreeGroupClassNameOptions = {}): string {\n const { className } = options;\n\n return cnb(treeGroupStyles(), className);\n}\n"],"names":["cnb","listItem","bem","treeStyles","treeItemStyles","treeGroupStyles","tree","options","className","treeItem","expander","expanderLeft","treeItemContent","link","focused","selected","disabled","remaining","treeItemMedia","isLeafNode","isMediaLeftAddon","single","treeGroup"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;
|
|
1
|
+
{"version":3,"sources":["../../src/tree/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport type { InternalListItemClassNameOptions } from \"../list/listItemStyles.js\";\nimport { listItem } from \"../list/listItemStyles.js\";\nimport { bem } from \"../utils/bem.js\";\n\nconst treeStyles = bem(\"rmd-tree\");\nconst treeItemStyles = bem(\"rmd-tree-item\");\nconst treeGroupStyles = bem(\"rmd-tree-group\");\n\n/** @since 6.0.0 */\nexport interface TreeClassNameOptions {\n className?: string;\n}\n\n/**\n * Apply the `className`s for a tree component. This will be type-safe if using\n * typescript.\n *\n * @since 6.0.0\n */\nexport function tree(options: TreeClassNameOptions = {}): string {\n const { className } = options;\n\n return cnb(treeStyles(), className);\n}\n\n/** @since 6.0.0 */\nexport interface TreeItemClassNameOptions {\n className?: string;\n expander?: boolean;\n\n /**\n * Settings this to `true` will update the styles for the expander icon within\n * the tree item to rotate `down -> right` instead of `down -> left`.\n *\n * @defaultValue `false`\n */\n expanderLeft?: boolean;\n}\n\n/**\n * Apply the `className`s for a tree item component. This will be type-safe if\n * using typescript.\n *\n * @since 6.0.0\n */\nexport function treeItem(options: TreeItemClassNameOptions = {}): string {\n const { className, expander = false, expanderLeft = false } = options;\n\n return cnb(\n treeItemStyles({\n \"expander-left\": expander && expanderLeft,\n \"expander-right\": expander && !expanderLeft,\n }),\n className\n );\n}\n\n/** @since 6.0.0 */\nexport interface TreeItemContentClassNameOptions\n extends InternalListItemClassNameOptions {\n /**\n * Set this\n *\n * @defaultValue `false`\n */\n link?: boolean;\n\n /**\n * Set this to `true` when the tree item is the current keyboard focus with\n * `aria-activedescendant`. This will apply the focus styles only while the\n * parent tree component is focused and the user is in keyboard mode.\n *\n *\n * @defaultValue `false`\n */\n focused?: boolean;\n\n /**\n * Set this to `true` hen the tree item has been selected by the user. The\n * default styles just\n *\n * @defaultValue `false`\n */\n selected?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function treeItemContent(\n options: TreeItemContentClassNameOptions = {}\n): string {\n const {\n className,\n link = false,\n focused,\n selected,\n disabled = false,\n ...remaining\n } = options;\n\n return cnb(\n treeItemStyles(\"content\", {\n link,\n focused,\n selected,\n disabled,\n }),\n listItem({\n className,\n disabled,\n ...remaining,\n })\n );\n}\n\n/**\n * @since 6.0.0\n */\nexport interface TreeItemMediaClassNameOptions {\n className?: string;\n isLeafNode: boolean;\n isMediaLeftAddon: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function treeItemMedia(options: TreeItemMediaClassNameOptions): string {\n const { isLeafNode, isMediaLeftAddon, className } = options;\n\n return cnb(\n isMediaLeftAddon && treeItemStyles(\"media\", { single: isLeafNode }),\n className\n );\n}\n\n/** @since 6.0.0 */\nexport interface TreeGroupClassNameOptions {\n className?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport function treeGroup(options: TreeGroupClassNameOptions = {}): string {\n const { className } = options;\n\n return cnb(treeGroupStyles(), className);\n}\n"],"names":["cnb","listItem","bem","treeStyles","treeItemStyles","treeGroupStyles","tree","options","className","treeItem","expander","expanderLeft","treeItemContent","link","focused","selected","disabled","remaining","treeItemMedia","isLeafNode","isMediaLeftAddon","single","treeGroup"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAGhC,SAASC,QAAQ,QAAQ,4BAA4B;AACrD,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,aAAaD,IAAI;AACvB,MAAME,iBAAiBF,IAAI;AAC3B,MAAMG,kBAAkBH,IAAI;AAO5B;;;;;CAKC,GACD,OAAO,SAASI,KAAKC,UAAgC,CAAC,CAAC;IACrD,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOP,IAAIG,cAAcK;AAC3B;AAgBA;;;;;CAKC,GACD,OAAO,SAASC,SAASF,UAAoC,CAAC,CAAC;IAC7D,MAAM,EAAEC,SAAS,EAAEE,WAAW,KAAK,EAAEC,eAAe,KAAK,EAAE,GAAGJ;IAE9D,OAAOP,IACLI,eAAe;QACb,iBAAiBM,YAAYC;QAC7B,kBAAkBD,YAAY,CAACC;IACjC,IACAH;AAEJ;AA+BA;;CAEC,GACD,OAAO,SAASI,gBACdL,UAA2C,CAAC,CAAC;IAE7C,MAAM,EACJC,SAAS,EACTK,OAAO,KAAK,EACZC,OAAO,EACPC,QAAQ,EACRC,WAAW,KAAK,EAChB,GAAGC,WACJ,GAAGV;IAEJ,OAAOP,IACLI,eAAe,WAAW;QACxBS;QACAC;QACAC;QACAC;IACF,IACAf,SAAS;QACPO;QACAQ;QACA,GAAGC,SAAS;IACd;AAEJ;AAWA;;CAEC,GACD,OAAO,SAASC,cAAcX,OAAsC;IAClE,MAAM,EAAEY,UAAU,EAAEC,gBAAgB,EAAEZ,SAAS,EAAE,GAAGD;IAEpD,OAAOP,IACLoB,oBAAoBhB,eAAe,SAAS;QAAEiB,QAAQF;IAAW,IACjEX;AAEJ;AAOA;;CAEC,GACD,OAAO,SAASc,UAAUf,UAAqC,CAAC,CAAC;IAC/D,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOP,IAAIK,mBAAmBG;AAChC"}
|
package/dist/tree/types.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/tree/types.ts"],"sourcesContent":["import { type ReactNode } from \"react\";\nimport { type ListItemChildrenProps } from \"../list/types.js\";\nimport { type UseStateInitializer } from \"../types.js\";\nimport { type RenderRecursiveItemsProps } from \"../utils/RenderRecursively.js\";\n\n/**\n * @since 6.0.0 This was renamed from `TreeItemIds`\n */\nexport interface TreeItemNode {\n itemId: string;\n parentId: string | null;\n}\n\n/**\n * The default tree item node allows for any props for rendering children within\n * list items and rendering links.\n *\n * @since 6.0.0\n */\nexport interface DefaultTreeItemNode\n extends TreeItemNode,\n ListItemChildrenProps {\n /**\n * If this is defined, the `TreeItem` will render the content within a `Link`\n * instead of a `<span>`.\n */\n to?: string;\n\n /**\n * If this is defined, the `TreeItem` will render the content within a `Link`\n * instead of a `<span>`.\n */\n href?: string;\n\n /**\n * This should only be provided if {@link to} or {@link href} exist on the\n * node.\n */\n rel?: string;\n\n /**\n * This should only be provided if {@link to} or {@link href} exist on the\n * node.\n */\n target?: string;\n\n /**\n * An alias for the {@link children} within a tree item. This will be used\n * over the {@link children} if both exist.\n */\n name?: ReactNode;\n\n /**\n * The children to display in the tree item.\n *\n * @see {@link name}\n */\n children?: ReactNode;\n\n /** @see {@link ListItemProps.disabled} */\n disabled?: boolean;\n\n /** @see {@link ListItemProps.disabledOpacity} */\n disabledOpacity?: boolean;\n\n className?: string;\n contentClassName?: string;\n}\n\n/**\n * @example Default Structure\n * ```tsx\n * import type { TreeData } from \"@react-md/core\";\n * import FolderIcon from \"@react-md/material-icons/FolderIcon\";\n *\n * export const MY_DATA: TreeData = {\n * \"item-1\": {\n * itemId: \"item-1\",\n * parentId: null,\n * name: \"Root Level Item 1\",\n * },\n * \"item-2\": {\n * itemId: \"item-2\",\n * parentId: \"item-1\",\n * name: \"A child for the first item\",\n * leftAddon: <FolderIcon />,\n * },\n * \"item-3\": {\n * itemId: \"item-3\",\n * parentId: \"item-1\",\n * children: \"Another child for the first item\",\n * leftAddon: <FolderIcon />,\n * rightAddon: <span>Something custom</span>,\n * },\n * };\n * ```\n *\n * @since 6.0.0 Updated the default types\n * @see {@link DefaultTreeItemNode}\n */\nexport type TreeData<T extends TreeItemNode = DefaultTreeItemNode> = Record<\n string,\n T\n>;\n\n/**\n * @since 6.0.0 This used to be `ExpandedIds`/`SelectedIds` but was converted to\n * a `Set` to increase performance for large trees.\n */\nexport type TreeItemIdSet = ReadonlySet<string>;\n\n/**\n * @since 6.0.0\n */\nexport type TreeDefaultIds = UseStateInitializer<\n readonly string[] | ReadonlySet<string>\n>;\n\n/**\n * A function to call that will sort the items within the tree for each unique\n * `parentId`. If you have a tree like:\n *\n * ```\n * a\n * ├── a1\n * b\n * ├── b1\n * ├── b2\n * │ └── b2.1\n * c\n * ├── c1\n * ├── c2\n * └── c3\n * ```\n *\n * This function will be called with:\n *\n * - `[a1]`\n * - `[b2.1]`\n * - `[b1, b2]`\n * - `[c1, c2, c3]`\n * - `[a, b, c]`\n *\n * Note: This **should be memoized** to prevent rerendering the entire tree each\n * render.\n */\nexport type TreeItemSorter<T extends TreeItemNode = DefaultTreeItemNode> = (\n items: readonly T[]\n) => readonly T[];\n\n/**\n * @since 6.0.0\n */\nexport type TreeItemRendererProps<\n T extends TreeItemNode = DefaultTreeItemNode,\n> = RenderRecursiveItemsProps<T, TreeData<T>>;\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../src/tree/types.ts"],"sourcesContent":["import { type ReactNode } from \"react\";\n\nimport { type ListItemChildrenProps } from \"../list/types.js\";\nimport { type UseStateInitializer } from \"../types.js\";\nimport { type RenderRecursiveItemsProps } from \"../utils/RenderRecursively.js\";\n\n/**\n * @since 6.0.0 This was renamed from `TreeItemIds`\n */\nexport interface TreeItemNode {\n itemId: string;\n parentId: string | null;\n}\n\n/**\n * The default tree item node allows for any props for rendering children within\n * list items and rendering links.\n *\n * @since 6.0.0\n */\nexport interface DefaultTreeItemNode\n extends TreeItemNode,\n ListItemChildrenProps {\n /**\n * If this is defined, the `TreeItem` will render the content within a `Link`\n * instead of a `<span>`.\n */\n to?: string;\n\n /**\n * If this is defined, the `TreeItem` will render the content within a `Link`\n * instead of a `<span>`.\n */\n href?: string;\n\n /**\n * This should only be provided if {@link to} or {@link href} exist on the\n * node.\n */\n rel?: string;\n\n /**\n * This should only be provided if {@link to} or {@link href} exist on the\n * node.\n */\n target?: string;\n\n /**\n * An alias for the {@link children} within a tree item. This will be used\n * over the {@link children} if both exist.\n */\n name?: ReactNode;\n\n /**\n * The children to display in the tree item.\n *\n * @see {@link name}\n */\n children?: ReactNode;\n\n /** @see {@link ListItemProps.disabled} */\n disabled?: boolean;\n\n /** @see {@link ListItemProps.disabledOpacity} */\n disabledOpacity?: boolean;\n\n className?: string;\n contentClassName?: string;\n}\n\n/**\n * @example Default Structure\n * ```tsx\n * import type { TreeData } from \"@react-md/core\";\n * import FolderIcon from \"@react-md/material-icons/FolderIcon\";\n *\n * export const MY_DATA: TreeData = {\n * \"item-1\": {\n * itemId: \"item-1\",\n * parentId: null,\n * name: \"Root Level Item 1\",\n * },\n * \"item-2\": {\n * itemId: \"item-2\",\n * parentId: \"item-1\",\n * name: \"A child for the first item\",\n * leftAddon: <FolderIcon />,\n * },\n * \"item-3\": {\n * itemId: \"item-3\",\n * parentId: \"item-1\",\n * children: \"Another child for the first item\",\n * leftAddon: <FolderIcon />,\n * rightAddon: <span>Something custom</span>,\n * },\n * };\n * ```\n *\n * @since 6.0.0 Updated the default types\n * @see {@link DefaultTreeItemNode}\n */\nexport type TreeData<T extends TreeItemNode = DefaultTreeItemNode> = Record<\n string,\n T\n>;\n\n/**\n * @since 6.0.0 This used to be `ExpandedIds`/`SelectedIds` but was converted to\n * a `Set` to increase performance for large trees.\n */\nexport type TreeItemIdSet = ReadonlySet<string>;\n\n/**\n * @since 6.0.0\n */\nexport type TreeDefaultIds = UseStateInitializer<\n readonly string[] | ReadonlySet<string>\n>;\n\n/**\n * A function to call that will sort the items within the tree for each unique\n * `parentId`. If you have a tree like:\n *\n * ```\n * a\n * ├── a1\n * b\n * ├── b1\n * ├── b2\n * │ └── b2.1\n * c\n * ├── c1\n * ├── c2\n * └── c3\n * ```\n *\n * This function will be called with:\n *\n * - `[a1]`\n * - `[b2.1]`\n * - `[b1, b2]`\n * - `[c1, c2, c3]`\n * - `[a, b, c]`\n *\n * Note: This **should be memoized** to prevent rerendering the entire tree each\n * render.\n */\nexport type TreeItemSorter<T extends TreeItemNode = DefaultTreeItemNode> = (\n items: readonly T[]\n) => readonly T[];\n\n/**\n * @since 6.0.0\n */\nexport type TreeItemRendererProps<\n T extends TreeItemNode = DefaultTreeItemNode,\n> = RenderRecursiveItemsProps<T, TreeData<T>>;\n"],"names":[],"mappings":"AAuJA;;CAEC,GACD,WAE8C"}
|
package/dist/tree/useTree.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/tree/useTree.ts"],"sourcesContent":["\"use client\";\nimport { type TreeDefaultIds } from \"./types.js\";\nimport {
|
|
1
|
+
{"version":3,"sources":["../../src/tree/useTree.ts"],"sourcesContent":["\"use client\";\n\nimport { type TreeDefaultIds } from \"./types.js\";\nimport { type TreeExpansion, useTreeExpansion } from \"./useTreeExpansion.js\";\nimport { type TreeSelection, useTreeSelection } from \"./useTreeSelection.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface TreeHookOptions {\n /**\n * @defaultValue `false`\n */\n multiSelect?: boolean;\n\n /**\n * @defaultValue `[]`\n */\n defaultExpandedIds?: TreeDefaultIds;\n\n /**\n * @defaultValue `[]`\n */\n defaultSelectedIds?: TreeDefaultIds;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface TreeImplementation extends TreeSelection, TreeExpansion {}\n\n/**\n * This is a convenience wrapper for the {@link useTreeExpansion} and\n * {@link useTreeSelection} hooks since they will almost always be used together.\n *\n * @example Simple Example\n * ```tsx\n * import type { TreeData } from \"@react-md/core\";\n * import { Tree, useTree } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * const data: TreeData = {\n * // pretend data\n * };\n *\n * function Example(): ReactElement {\n * const tree = useTree();\n *\n * return <Tree {...tree} data={data} aria-label=\"Tree\" />;\n * }\n * ```\n *\n * @since 6.0.0\n */\nexport function useTree(options: TreeHookOptions = {}): TreeImplementation {\n const {\n multiSelect = false,\n defaultExpandedIds,\n defaultSelectedIds,\n } = options;\n\n return {\n ...useTreeExpansion(defaultExpandedIds),\n ...useTreeSelection(defaultSelectedIds, multiSelect),\n };\n}\n"],"names":["useTreeExpansion","useTreeSelection","useTree","options","multiSelect","defaultExpandedIds","defaultSelectedIds"],"mappings":"AAAA;AAGA,SAA6BA,gBAAgB,QAAQ,wBAAwB;AAC7E,SAA6BC,gBAAgB,QAAQ,wBAAwB;AA2B7E;;;;;;;;;;;;;;;;;;;;;;CAsBC,GACD,OAAO,SAASC,QAAQC,UAA2B,CAAC,CAAC;IACnD,MAAM,EACJC,cAAc,KAAK,EACnBC,kBAAkB,EAClBC,kBAAkB,EACnB,GAAGH;IAEJ,OAAO;QACL,GAAGH,iBAAiBK,mBAAmB;QACvC,GAAGJ,iBAAiBK,oBAAoBF,YAAY;IACtD;AACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/tree/useTreeExpansion.ts"],"sourcesContent":["\"use client\";\nimport { type UseStateSetter } from \"../types.js\";\nimport { useReadonlySet } from \"../useReadonlySet.js\";\nimport { type TreeDefaultIds, type TreeItemIdSet } from \"./types.js\";\n\n/**\n * @since 6.0.0 Renamed from `TreeItemExpansion` and uses a Set\n * instead of a list to increase performance. Also renamed `onItemExpansion` to\n * `toggleTreeItemExpansion` and `onMultiItemExpansion` to\n * `expandMultipleTreeItems`.\n */\nexport interface TreeExpansion {\n expandedIds: TreeItemIdSet;\n toggleTreeItemExpansion: (itemId: string) => void;\n expandMultipleTreeItems: UseStateSetter<TreeItemIdSet>;\n}\n\n/**\n * @since 6.0.0 Renamed from `useTreeItemExpansion` and uses a Set\n * instead of a list to increase performance.\n */\nexport function useTreeExpansion(\n defaultExpandedIds?: TreeDefaultIds\n): TreeExpansion {\n const { value, setValue, toggleValue } = useReadonlySet({\n defaultValue: defaultExpandedIds,\n });\n\n return {\n expandedIds: value,\n toggleTreeItemExpansion: toggleValue,\n expandMultipleTreeItems: setValue,\n };\n}\n"],"names":["useReadonlySet","useTreeExpansion","defaultExpandedIds","value","setValue","toggleValue","defaultValue","expandedIds","toggleTreeItemExpansion","expandMultipleTreeItems"],"mappings":"AAAA;
|
|
1
|
+
{"version":3,"sources":["../../src/tree/useTreeExpansion.ts"],"sourcesContent":["\"use client\";\n\nimport { type UseStateSetter } from \"../types.js\";\nimport { useReadonlySet } from \"../useReadonlySet.js\";\nimport { type TreeDefaultIds, type TreeItemIdSet } from \"./types.js\";\n\n/**\n * @since 6.0.0 Renamed from `TreeItemExpansion` and uses a Set\n * instead of a list to increase performance. Also renamed `onItemExpansion` to\n * `toggleTreeItemExpansion` and `onMultiItemExpansion` to\n * `expandMultipleTreeItems`.\n */\nexport interface TreeExpansion {\n expandedIds: TreeItemIdSet;\n toggleTreeItemExpansion: (itemId: string) => void;\n expandMultipleTreeItems: UseStateSetter<TreeItemIdSet>;\n}\n\n/**\n * @since 6.0.0 Renamed from `useTreeItemExpansion` and uses a Set\n * instead of a list to increase performance.\n */\nexport function useTreeExpansion(\n defaultExpandedIds?: TreeDefaultIds\n): TreeExpansion {\n const { value, setValue, toggleValue } = useReadonlySet({\n defaultValue: defaultExpandedIds,\n });\n\n return {\n expandedIds: value,\n toggleTreeItemExpansion: toggleValue,\n expandMultipleTreeItems: setValue,\n };\n}\n"],"names":["useReadonlySet","useTreeExpansion","defaultExpandedIds","value","setValue","toggleValue","defaultValue","expandedIds","toggleTreeItemExpansion","expandMultipleTreeItems"],"mappings":"AAAA;AAGA,SAASA,cAAc,QAAQ,uBAAuB;AAetD;;;CAGC,GACD,OAAO,SAASC,iBACdC,kBAAmC;IAEnC,MAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,WAAW,EAAE,GAAGL,eAAe;QACtDM,cAAcJ;IAChB;IAEA,OAAO;QACLK,aAAaJ;QACbK,yBAAyBH;QACzBI,yBAAyBL;IAC3B;AACF"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { DefaultTreeItemNode, TreeData, TreeItemNode, TreeItemSorter } from "./types.js";
|
|
2
2
|
/**
|
|
3
3
|
* A lookup to find all the child ids for a specific parent. This was added to
|
|
4
4
|
* support the `*` keyboard behavior of opening all tree items at the current
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/tree/useTreeItems.ts"],"sourcesContent":["import { useMemo } from \"react\";\nimport type {\n
|
|
1
|
+
{"version":3,"sources":["../../src/tree/useTreeItems.ts"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport type {\n DefaultTreeItemNode,\n TreeData,\n TreeItemNode,\n TreeItemSorter,\n} from \"./types.js\";\n\n/**\n * A lookup to find all the child ids for a specific parent. This was added to\n * support the `*` keyboard behavior of opening all tree items at the current\n * level.\n *\n * @since 6.0.0\n * @internal\n */\nexport type TreeItemChildIds = Map<string | null, Set<string>>;\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport type RenderableTreeItemNode<\n T extends TreeItemNode = DefaultTreeItemNode,\n> = T & {\n items?: readonly RenderableTreeItemNode<T>[];\n};\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface BuildTreeOptions<T extends TreeItemNode> {\n sort: TreeItemSorter<T>;\n nodes: T[];\n parentId: string | null;\n treeItemChildIds: TreeItemChildIds;\n}\n\n/**\n * This util performantly builds a nested list of tree items from a giant flat\n * list of items by linking items together with the provided `parentId`. This\n * will also recursively build the tree and _hopefully_ all items will be added.\n *\n * @since 6.0.0 Updated to include the {@link TreeItemChildIds}\n */\nexport function buildTree<T extends TreeItemNode>(\n options: BuildTreeOptions<T>\n): readonly RenderableTreeItemNode<T>[] | undefined {\n const { sort, nodes, parentId, treeItemChildIds } = options;\n const childIds = treeItemChildIds.get(parentId) || new Set();\n const childItems: RenderableTreeItemNode<T>[] = [];\n\n // doing a \"reverse\" order filter/move so that the items array shrinks while\n // looping. This makes it so that the entire items array doesn't need to\n // continually be looped through as more items are added to the tree, only the\n // remaining items will have to be looped\n let i = nodes.length;\n while (i > 0) {\n i -= 1;\n if (nodes[i] && nodes[i].parentId === parentId) {\n const [item] = nodes.splice(i, 1);\n childIds.add(item.itemId);\n // shallow cloning so childItems doesn't get applied to the original data\n // set\n childItems.unshift({ ...item });\n }\n }\n\n if (!childItems.length) {\n return undefined;\n }\n\n treeItemChildIds.set(parentId, childIds);\n childItems.forEach((childItem) => {\n childItem.items = buildTree({\n sort,\n nodes,\n parentId: childItem.itemId,\n treeItemChildIds,\n });\n });\n\n return sort(childItems);\n}\n\n/**\n * @since 6.0.0\n */\nexport interface TreeItemOptions<T extends TreeItemNode> {\n data: TreeData<T>;\n sort: TreeItemSorter<T>;\n rootId: string | null;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface TreeItems<T extends TreeItemNode> {\n items: readonly RenderableTreeItemNode<T>[];\n treeItemChildIds: TreeItemChildIds;\n}\n\n/**\n * This is mostly an internal hook, but can be used to build tree-like\n * data structures without the need of the `Tree` component.\n *\n * @since 6.0.0 converted to use an object argument instead of\n * multiple arguments. Also logs any orphaned items that do not have a parent\n */\nexport function useTreeItems<T extends TreeItemNode>(\n options: TreeItemOptions<T>\n): TreeItems<T> {\n const { data, sort, rootId } = options;\n\n return useMemo<TreeItems<T>>(() => {\n const values = Object.values(data);\n const treeItemChildIds = new Map<string, Set<string>>();\n const items = buildTree<T>({\n sort,\n nodes: values,\n parentId: rootId,\n treeItemChildIds,\n });\n\n if (process.env.NODE_ENV !== \"production\" && values.length) {\n /* eslint-disable no-console */\n console.warn(\"The following tree items are orphaned without a parent:\");\n console.warn(values.slice());\n }\n\n return {\n items: items || [],\n treeItemChildIds,\n };\n }, [data, rootId, sort]);\n}\n"],"names":["useMemo","buildTree","options","sort","nodes","parentId","treeItemChildIds","childIds","get","Set","childItems","i","length","item","splice","add","itemId","unshift","undefined","set","forEach","childItem","items","useTreeItems","data","rootId","values","Object","Map","process","env","NODE_ENV","console","warn","slice"],"mappings":"AAAA,SAASA,OAAO,QAAQ,QAAQ;AAwChC;;;;;;CAMC,GACD,OAAO,SAASC,UACdC,OAA4B;IAE5B,MAAM,EAAEC,IAAI,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,gBAAgB,EAAE,GAAGJ;IACpD,MAAMK,WAAWD,iBAAiBE,GAAG,CAACH,aAAa,IAAII;IACvD,MAAMC,aAA0C,EAAE;IAElD,4EAA4E;IAC5E,wEAAwE;IACxE,8EAA8E;IAC9E,yCAAyC;IACzC,IAAIC,IAAIP,MAAMQ,MAAM;IACpB,MAAOD,IAAI,EAAG;QACZA,KAAK;QACL,IAAIP,KAAK,CAACO,EAAE,IAAIP,KAAK,CAACO,EAAE,CAACN,QAAQ,KAAKA,UAAU;YAC9C,MAAM,CAACQ,KAAK,GAAGT,MAAMU,MAAM,CAACH,GAAG;YAC/BJ,SAASQ,GAAG,CAACF,KAAKG,MAAM;YACxB,yEAAyE;YACzE,MAAM;YACNN,WAAWO,OAAO,CAAC;gBAAE,GAAGJ,IAAI;YAAC;QAC/B;IACF;IAEA,IAAI,CAACH,WAAWE,MAAM,EAAE;QACtB,OAAOM;IACT;IAEAZ,iBAAiBa,GAAG,CAACd,UAAUE;IAC/BG,WAAWU,OAAO,CAAC,CAACC;QAClBA,UAAUC,KAAK,GAAGrB,UAAU;YAC1BE;YACAC;YACAC,UAAUgB,UAAUL,MAAM;YAC1BV;QACF;IACF;IAEA,OAAOH,KAAKO;AACd;AAmBA;;;;;;CAMC,GACD,OAAO,SAASa,aACdrB,OAA2B;IAE3B,MAAM,EAAEsB,IAAI,EAAErB,IAAI,EAAEsB,MAAM,EAAE,GAAGvB;IAE/B,OAAOF,QAAsB;QAC3B,MAAM0B,SAASC,OAAOD,MAAM,CAACF;QAC7B,MAAMlB,mBAAmB,IAAIsB;QAC7B,MAAMN,QAAQrB,UAAa;YACzBE;YACAC,OAAOsB;YACPrB,UAAUoB;YACVnB;QACF;QAEA,IAAIuB,QAAQC,GAAG,CAACC,QAAQ,KAAK,gBAAgBL,OAAOd,MAAM,EAAE;YAC1D,6BAA6B,GAC7BoB,QAAQC,IAAI,CAAC;YACbD,QAAQC,IAAI,CAACP,OAAOQ,KAAK;QAC3B;QAEA,OAAO;YACLZ,OAAOA,SAAS,EAAE;YAClBhB;QACF;IACF,GAAG;QAACkB;QAAMC;QAAQtB;KAAK;AACzB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/tree/useTreeMovement.ts"],"sourcesContent":["\"use client\";\nimport type {\n FocusEventHandler,\n KeyboardEventHandler,\n MouseEventHandler,\n} from \"react\";\nimport { useRef } from \"react\";\nimport type { KeyboardMovementProviderImplementation } from \"../movement/types.js\";\nimport { useKeyboardMovementProvider } from \"../movement/useKeyboardMovementProvider.js\";\nimport { getNextFocusableIndex } from \"../movement/utils.js\";\nimport type { NonNullMutableRef } from \"../types.js\";\nimport type { TreeItemMetadataLookup } from \"./TreeProvider.js\";\nimport type { TreeData, TreeItemNode } from \"./types.js\";\nimport type { TreeExpansion } from \"./useTreeExpansion.js\";\nimport type { TreeItemChildIds } from \"./useTreeItems.js\";\n\n/**\n * This helps catch the edge case where the collapse transition has occurred for\n * a tree item group, but the user uses the `ArrowDown` key before it has\n * finished. So to do this:\n *\n * - find the parent group of the tree item\n * - find the tree item that controls the group (the element before the group)\n * - check if the `aria-expanded` state is `\"false\"` meaning it is considered\n * closed\n *\n * @internal\n * @since 6.0.0\n */\nconst isParentItemCollapsing = (item: HTMLElement): boolean =>\n item\n .closest(\"[role='group']\")\n ?.previousElementSibling?.getAttribute(\"aria-expanded\") === \"false\";\n\n/**\n * @since 6.0.0\n * @internal\n */\nconst getVisibleTreeItems = (\n container: HTMLElement\n): readonly HTMLElement[] => {\n const items = [\n ...container.querySelectorAll<HTMLElement>('[role=\"treeitem\"]'),\n ];\n\n return items.filter(\n (item) =>\n // do not include items that have a `hidden` parent group\n item.offsetParent &&\n // do not include items that are about to become hidden\n !isParentItemCollapsing(item)\n );\n};\n\n/**\n * @since 6.0.0\n * @internal\n */\ninterface TreeMovementOptions<T extends TreeItemNode> extends TreeExpansion {\n data: TreeData<T>;\n onClick: MouseEventHandler<HTMLUListElement> | undefined;\n onFocus: FocusEventHandler<HTMLUListElement> | undefined;\n onKeyDown: KeyboardEventHandler<HTMLUListElement> | undefined;\n selectedIds: ReadonlySet<string>;\n treeItemChildIds: TreeItemChildIds;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\ninterface TreeMovement\n extends KeyboardMovementProviderImplementation<HTMLUListElement> {\n /**\n * This will be mutated by the `TreeItem` component and used to handle\n * keyboard movement.\n */\n metadataLookup: NonNullMutableRef<TreeItemMetadataLookup>;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport function useTreeMovement<T extends TreeItemNode>(\n options: TreeMovementOptions<T>\n): TreeMovement {\n const {\n onClick,\n onFocus,\n onKeyDown,\n data,\n expandedIds,\n selectedIds,\n treeItemChildIds,\n toggleTreeItemExpansion,\n expandMultipleTreeItems,\n } = options;\n\n const metadataLookup = useRef<TreeItemMetadataLookup>({\n expandable: {},\n disabledItems: {},\n elementToItem: {},\n itemToElement: {},\n });\n const movement = useKeyboardMovementProvider({\n onClick,\n onFocus,\n onKeyDown,\n extendKeyDown(movementData) {\n const { event, activeDescendantId, currentFocusIndex, setFocusIndex } =\n movementData;\n const { expandable, disabledItems, elementToItem, itemToElement } =\n metadataLookup.current;\n const itemId = elementToItem[activeDescendantId];\n const item = data[itemId];\n\n /* c8 ignore start */\n if (!item) {\n return;\n }\n /* c8 ignore stop */\n\n const disabled = disabledItems[itemId];\n const expanded = expandedIds.has(itemId);\n\n let flagged = false;\n switch (event.key) {\n case \"ArrowLeft\":\n if (expanded && !disabled) {\n flagged = true;\n toggleTreeItemExpansion(itemId);\n } else if (item.parentId) {\n // do not flag for this case since setFocusIndex already does this\n const parentId = itemToElement[item.parentId];\n const focusables = getVisibleTreeItems(event.currentTarget);\n const index = focusables.findIndex(\n (element) => element.id === parentId\n );\n setFocusIndex(index, focusables);\n }\n\n break;\n case \"ArrowRight\":\n if (expandable[itemId] && !disabled) {\n if (!expanded) {\n flagged = true;\n toggleTreeItemExpansion(itemId);\n } else {\n // do not flag for this case since setFocusIndex already does this\n const focusables = getVisibleTreeItems(event.currentTarget);\n const index = getNextFocusableIndex({\n loopable: false,\n increment: true,\n focusables,\n includeDisabled: true,\n currentFocusIndex: currentFocusIndex.current,\n });\n\n setFocusIndex(index, focusables);\n }\n }\n\n break;\n case \"*\": {\n flagged = true;\n const itemIds = treeItemChildIds.get(item.parentId);\n if (itemIds) {\n const expandableIds = [...itemIds].filter(\n (itemId) => expandable[itemId]\n );\n if (expandableIds.length) {\n expandMultipleTreeItems(\n (prev) => new Set([...prev, ...expandableIds])\n );\n currentFocusIndex.current = -1;\n }\n }\n break;\n }\n }\n\n if (flagged) {\n event.stopPropagation();\n event.preventDefault();\n }\n },\n searchable: true,\n tabIndexBehavior: \"virtual\",\n getFocusableElements: getVisibleTreeItems,\n getDefaultFocusedIndex(options) {\n const { focusables } = options;\n const { elementToItem } = metadataLookup.current;\n\n return focusables.findIndex((element) =>\n selectedIds.has(elementToItem[element.id])\n );\n },\n });\n\n return {\n metadataLookup,\n ...movement,\n };\n}\n"],"names":["useRef","useKeyboardMovementProvider","getNextFocusableIndex","isParentItemCollapsing","item","closest","previousElementSibling","getAttribute","getVisibleTreeItems","container","items","querySelectorAll","filter","offsetParent","useTreeMovement","options","onClick","onFocus","onKeyDown","data","expandedIds","selectedIds","treeItemChildIds","toggleTreeItemExpansion","expandMultipleTreeItems","metadataLookup","expandable","disabledItems","elementToItem","itemToElement","movement","extendKeyDown","movementData","event","activeDescendantId","currentFocusIndex","setFocusIndex","current","itemId","disabled","expanded","has","flagged","key","parentId","focusables","currentTarget","index","findIndex","element","id","loopable","increment","includeDisabled","itemIds","get","expandableIds","length","prev","Set","stopPropagation","preventDefault","searchable","tabIndexBehavior","getFocusableElements","getDefaultFocusedIndex"],"mappings":"AAAA;
|
|
1
|
+
{"version":3,"sources":["../../src/tree/useTreeMovement.ts"],"sourcesContent":["\"use client\";\n\nimport type {\n FocusEventHandler,\n KeyboardEventHandler,\n MouseEventHandler,\n} from \"react\";\nimport { useRef } from \"react\";\n\nimport type { KeyboardMovementProviderImplementation } from \"../movement/types.js\";\nimport { useKeyboardMovementProvider } from \"../movement/useKeyboardMovementProvider.js\";\nimport { getNextFocusableIndex } from \"../movement/utils.js\";\nimport type { NonNullMutableRef } from \"../types.js\";\nimport type { TreeItemMetadataLookup } from \"./TreeProvider.js\";\nimport type { TreeData, TreeItemNode } from \"./types.js\";\nimport type { TreeExpansion } from \"./useTreeExpansion.js\";\nimport type { TreeItemChildIds } from \"./useTreeItems.js\";\n\n/**\n * This helps catch the edge case where the collapse transition has occurred for\n * a tree item group, but the user uses the `ArrowDown` key before it has\n * finished. So to do this:\n *\n * - find the parent group of the tree item\n * - find the tree item that controls the group (the element before the group)\n * - check if the `aria-expanded` state is `\"false\"` meaning it is considered\n * closed\n *\n * @internal\n * @since 6.0.0\n */\nconst isParentItemCollapsing = (item: HTMLElement): boolean =>\n item\n .closest(\"[role='group']\")\n ?.previousElementSibling?.getAttribute(\"aria-expanded\") === \"false\";\n\n/**\n * @since 6.0.0\n * @internal\n */\nconst getVisibleTreeItems = (\n container: HTMLElement\n): readonly HTMLElement[] => {\n const items = [\n ...container.querySelectorAll<HTMLElement>('[role=\"treeitem\"]'),\n ];\n\n return items.filter(\n (item) =>\n // do not include items that have a `hidden` parent group\n item.offsetParent &&\n // do not include items that are about to become hidden\n !isParentItemCollapsing(item)\n );\n};\n\n/**\n * @since 6.0.0\n * @internal\n */\ninterface TreeMovementOptions<T extends TreeItemNode> extends TreeExpansion {\n data: TreeData<T>;\n onClick: MouseEventHandler<HTMLUListElement> | undefined;\n onFocus: FocusEventHandler<HTMLUListElement> | undefined;\n onKeyDown: KeyboardEventHandler<HTMLUListElement> | undefined;\n selectedIds: ReadonlySet<string>;\n treeItemChildIds: TreeItemChildIds;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\ninterface TreeMovement\n extends KeyboardMovementProviderImplementation<HTMLUListElement> {\n /**\n * This will be mutated by the `TreeItem` component and used to handle\n * keyboard movement.\n */\n metadataLookup: NonNullMutableRef<TreeItemMetadataLookup>;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport function useTreeMovement<T extends TreeItemNode>(\n options: TreeMovementOptions<T>\n): TreeMovement {\n const {\n onClick,\n onFocus,\n onKeyDown,\n data,\n expandedIds,\n selectedIds,\n treeItemChildIds,\n toggleTreeItemExpansion,\n expandMultipleTreeItems,\n } = options;\n\n const metadataLookup = useRef<TreeItemMetadataLookup>({\n expandable: {},\n disabledItems: {},\n elementToItem: {},\n itemToElement: {},\n });\n const movement = useKeyboardMovementProvider({\n onClick,\n onFocus,\n onKeyDown,\n extendKeyDown(movementData) {\n const { event, activeDescendantId, currentFocusIndex, setFocusIndex } =\n movementData;\n const { expandable, disabledItems, elementToItem, itemToElement } =\n metadataLookup.current;\n const itemId = elementToItem[activeDescendantId];\n const item = data[itemId];\n\n /* c8 ignore start */\n if (!item) {\n return;\n }\n /* c8 ignore stop */\n\n const disabled = disabledItems[itemId];\n const expanded = expandedIds.has(itemId);\n\n let flagged = false;\n switch (event.key) {\n case \"ArrowLeft\":\n if (expanded && !disabled) {\n flagged = true;\n toggleTreeItemExpansion(itemId);\n } else if (item.parentId) {\n // do not flag for this case since setFocusIndex already does this\n const parentId = itemToElement[item.parentId];\n const focusables = getVisibleTreeItems(event.currentTarget);\n const index = focusables.findIndex(\n (element) => element.id === parentId\n );\n setFocusIndex(index, focusables);\n }\n\n break;\n case \"ArrowRight\":\n if (expandable[itemId] && !disabled) {\n if (!expanded) {\n flagged = true;\n toggleTreeItemExpansion(itemId);\n } else {\n // do not flag for this case since setFocusIndex already does this\n const focusables = getVisibleTreeItems(event.currentTarget);\n const index = getNextFocusableIndex({\n loopable: false,\n increment: true,\n focusables,\n includeDisabled: true,\n currentFocusIndex: currentFocusIndex.current,\n });\n\n setFocusIndex(index, focusables);\n }\n }\n\n break;\n case \"*\": {\n flagged = true;\n const itemIds = treeItemChildIds.get(item.parentId);\n if (itemIds) {\n const expandableIds = [...itemIds].filter(\n (itemId) => expandable[itemId]\n );\n if (expandableIds.length) {\n expandMultipleTreeItems(\n (prev) => new Set([...prev, ...expandableIds])\n );\n currentFocusIndex.current = -1;\n }\n }\n break;\n }\n }\n\n if (flagged) {\n event.stopPropagation();\n event.preventDefault();\n }\n },\n searchable: true,\n tabIndexBehavior: \"virtual\",\n getFocusableElements: getVisibleTreeItems,\n getDefaultFocusedIndex(options) {\n const { focusables } = options;\n const { elementToItem } = metadataLookup.current;\n\n return focusables.findIndex((element) =>\n selectedIds.has(elementToItem[element.id])\n );\n },\n });\n\n return {\n metadataLookup,\n ...movement,\n };\n}\n"],"names":["useRef","useKeyboardMovementProvider","getNextFocusableIndex","isParentItemCollapsing","item","closest","previousElementSibling","getAttribute","getVisibleTreeItems","container","items","querySelectorAll","filter","offsetParent","useTreeMovement","options","onClick","onFocus","onKeyDown","data","expandedIds","selectedIds","treeItemChildIds","toggleTreeItemExpansion","expandMultipleTreeItems","metadataLookup","expandable","disabledItems","elementToItem","itemToElement","movement","extendKeyDown","movementData","event","activeDescendantId","currentFocusIndex","setFocusIndex","current","itemId","disabled","expanded","has","flagged","key","parentId","focusables","currentTarget","index","findIndex","element","id","loopable","increment","includeDisabled","itemIds","get","expandableIds","length","prev","Set","stopPropagation","preventDefault","searchable","tabIndexBehavior","getFocusableElements","getDefaultFocusedIndex"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/tree/useTreeSelection.ts"],"sourcesContent":["\"use client\";\nimport { type UseStateSetter } from \"../types.js\";\nimport { useReadonlySet } from \"../useReadonlySet.js\";\nimport { type TreeDefaultIds, type TreeItemIdSet } from \"./types.js\";\n\n/**\n * @since 6.0.0 Renamed from `TreeItemSelection` and uses a Set\n * instead of a list to increase performance. Also renamed `onItemSelect` to\n * `toggleTreeItemSelection` and `onMultiItemSelect` to\n * `selectMultipleTreeItems`.\n */\nexport interface TreeSelection {\n /** @defaultValue `false` */\n multiSelect?: boolean;\n selectedIds: ReadonlySet<string>;\n toggleTreeItemSelection: (itemId: string) => void;\n selectMultipleTreeItems: UseStateSetter<TreeItemIdSet>;\n}\n\n/**\n * @since 6.0.0 Renamed from `useTreeItemSelection` and uses a Set\n * instead of a list to increase performance.\n */\nexport function useTreeSelection(\n defaultSelectedIds?: TreeDefaultIds,\n multiSelect = false\n): Required<TreeSelection> {\n const { value, setValue, toggleValue } = useReadonlySet({\n toggleType: multiSelect ? \"multiple\" : \"single-select\",\n defaultValue: defaultSelectedIds,\n });\n\n return {\n multiSelect,\n selectedIds: value,\n toggleTreeItemSelection: toggleValue,\n selectMultipleTreeItems: setValue,\n };\n}\n"],"names":["useReadonlySet","useTreeSelection","defaultSelectedIds","multiSelect","value","setValue","toggleValue","toggleType","defaultValue","selectedIds","toggleTreeItemSelection","selectMultipleTreeItems"],"mappings":"AAAA;
|
|
1
|
+
{"version":3,"sources":["../../src/tree/useTreeSelection.ts"],"sourcesContent":["\"use client\";\n\nimport { type UseStateSetter } from \"../types.js\";\nimport { useReadonlySet } from \"../useReadonlySet.js\";\nimport { type TreeDefaultIds, type TreeItemIdSet } from \"./types.js\";\n\n/**\n * @since 6.0.0 Renamed from `TreeItemSelection` and uses a Set\n * instead of a list to increase performance. Also renamed `onItemSelect` to\n * `toggleTreeItemSelection` and `onMultiItemSelect` to\n * `selectMultipleTreeItems`.\n */\nexport interface TreeSelection {\n /** @defaultValue `false` */\n multiSelect?: boolean;\n selectedIds: ReadonlySet<string>;\n toggleTreeItemSelection: (itemId: string) => void;\n selectMultipleTreeItems: UseStateSetter<TreeItemIdSet>;\n}\n\n/**\n * @since 6.0.0 Renamed from `useTreeItemSelection` and uses a Set\n * instead of a list to increase performance.\n */\nexport function useTreeSelection(\n defaultSelectedIds?: TreeDefaultIds,\n multiSelect = false\n): Required<TreeSelection> {\n const { value, setValue, toggleValue } = useReadonlySet({\n toggleType: multiSelect ? \"multiple\" : \"single-select\",\n defaultValue: defaultSelectedIds,\n });\n\n return {\n multiSelect,\n selectedIds: value,\n toggleTreeItemSelection: toggleValue,\n selectMultipleTreeItems: setValue,\n };\n}\n"],"names":["useReadonlySet","useTreeSelection","defaultSelectedIds","multiSelect","value","setValue","toggleValue","toggleType","defaultValue","selectedIds","toggleTreeItemSelection","selectMultipleTreeItems"],"mappings":"AAAA;AAGA,SAASA,cAAc,QAAQ,uBAAuB;AAiBtD;;;CAGC,GACD,OAAO,SAASC,iBACdC,kBAAmC,EACnCC,cAAc,KAAK;IAEnB,MAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,WAAW,EAAE,GAAGN,eAAe;QACtDO,YAAYJ,cAAc,aAAa;QACvCK,cAAcN;IAChB;IAEA,OAAO;QACLC;QACAM,aAAaL;QACbM,yBAAyBJ;QACzBK,yBAAyBN;IAC3B;AACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/typography/SrOnly.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"sources":["../../src/typography/SrOnly.tsx"],"sourcesContent":["import { type ElementType, type HTMLAttributes, forwardRef } from \"react\";\n\nimport { cssUtils } from \"../cssUtils.js\";\nimport {\n type CustomTypographyComponent,\n type TypographyHTMLElement,\n} from \"./Typography.js\";\n\nexport interface SrOnlyProps extends HTMLAttributes<TypographyHTMLElement> {\n /** @defaultValue `\"span\"` */\n as?: CustomTypographyComponent;\n\n /**\n * Set this to `true` if the content should only be screen reader only text on\n * phones. This is useful for only displaying an icon on phones when there is\n * limited space and then displaying an icon and text on larger devices.\n *\n * @defaultValue `false`\n */\n phoneOnly?: boolean;\n\n /**\n * Set this to `true` if the element should be keyboard focusable.\n *\n * @defaultValue `false`\n */\n focusable?: boolean;\n}\n\n/**\n * The `SrOnly` component is used to render content that is only visible to\n * screen readers.\n *\n * @example Simple Example\n * ```tsx\n * import { SrOnly } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * return (\n * <>\n * <SrOnly>\n * I am only visible to screen readers.\n * </SrOnly>\n * <SrOnly focusable>\n * I am only visible to screen readers but can be focused.\n * </SrOnly>\n * </>\n * );\n * }\n * ```\n */\nexport const SrOnly = forwardRef<TypographyHTMLElement, SrOnlyProps>(\n function SrOnly(props, ref) {\n const {\n as: AsComponent = \"span\",\n className,\n phoneOnly,\n focusable,\n children,\n tabIndex,\n ...remaining\n } = props;\n\n // do some type-casting so ref works\n const Component = AsComponent as ElementType;\n\n return (\n <Component\n {...remaining}\n ref={ref}\n tabIndex={tabIndex ?? (focusable ? 0 : undefined)}\n className={cssUtils({\n srOnly: focusable ? \"focusable\" : phoneOnly ? \"phone\" : true,\n className,\n })}\n >\n {children}\n </Component>\n );\n }\n);\n"],"names":["forwardRef","cssUtils","SrOnly","props","ref","as","AsComponent","className","phoneOnly","focusable","children","tabIndex","remaining","Component","undefined","srOnly"],"mappings":";AAAA,SAAgDA,UAAU,QAAQ,QAAQ;AAE1E,SAASC,QAAQ,QAAQ,iBAAiB;AA2B1C;;;;;;;;;;;;;;;;;;;;;;CAsBC,GACD,OAAO,MAAMC,uBAASF,WACpB,SAASE,OAAOC,KAAK,EAAEC,GAAG;IACxB,MAAM,EACJC,IAAIC,cAAc,MAAM,EACxBC,SAAS,EACTC,SAAS,EACTC,SAAS,EACTC,QAAQ,EACRC,QAAQ,EACR,GAAGC,WACJ,GAAGT;IAEJ,oCAAoC;IACpC,MAAMU,YAAYP;IAElB,qBACE,KAACO;QACE,GAAGD,SAAS;QACbR,KAAKA;QACLO,UAAUA,YAAaF,CAAAA,YAAY,IAAIK,SAAQ;QAC/CP,WAAWN,SAAS;YAClBc,QAAQN,YAAY,cAAcD,YAAY,UAAU;YACxDD;QACF;kBAECG;;AAGP,GACA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/typography/TextContainer.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"sources":["../../src/typography/TextContainer.tsx"],"sourcesContent":["import { type HTMLAttributes, forwardRef } from \"react\";\n\nimport {\n type TextContainerClassNameOptions,\n textContainer,\n} from \"./textContainerStyles.js\";\n\n/**\n * @since 6.0.0 Removed the `size` option since there is no longer a\n * different line-length for mobile and desktop.\n * @since 6.0.0 Removed the `clone` prop and the children render function\n * behavior. Use the `textContainer` class name utility instead.\n */\nexport interface TextContainerProps\n extends HTMLAttributes<HTMLDivElement>,\n TextContainerClassNameOptions {}\n\n/**\n * This component should be used to render text based content with an\n * appropriate max line length to optimize legibility.\n *\n * @example Simple Example\n * ```tsx\n * import { TextContainer, Typography } from \"@react-md/core\";\n *\n * function Example() {\n * return (\n * <TextContainer>\n * <Typography type=\"headline-1\">Heading</Typography>\n * <Typography>\n * Pretend this is a giant paragraph of text that wraps multiple lines.\n * </Typography>\n * <Typography>\n * Pretend this is another giant paragraph of text that wraps multiple\n * lines.\n * </Typography>\n * </TextContainer>\n * );\n * }\n * ```\n *\n * @see {@link textContainer} If you only want to apply this class to an\n * element.\n * @since 6.0.0 Removed the `size` option since there is no longer a\n * different line-length for mobile and desktop.\n * @since 6.0.0 Removed the `clone` prop and the children render function\n * behavior. Use the `textContainer` class name utility instead.\n */\nexport const TextContainer = forwardRef<HTMLDivElement, TextContainerProps>(\n function TextContainer(props, ref) {\n const { className, children, ...remaining } = props;\n\n return (\n <div {...remaining} ref={ref} className={textContainer({ className })}>\n {children}\n </div>\n );\n }\n);\n"],"names":["forwardRef","textContainer","TextContainer","props","ref","className","children","remaining","div"],"mappings":";AAAA,SAA8BA,UAAU,QAAQ,QAAQ;AAExD,SAEEC,aAAa,QACR,2BAA2B;AAYlC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8BC,GACD,OAAO,MAAMC,8BAAgBF,WAC3B,SAASE,cAAcC,KAAK,EAAEC,GAAG;IAC/B,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGC,WAAW,GAAGJ;IAE9C,qBACE,KAACK;QAAK,GAAGD,SAAS;QAAEH,KAAKA;QAAKC,WAAWJ,cAAc;YAAEI;QAAU;kBAChEC;;AAGP,GACA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/typography/Typography.tsx"],"sourcesContent":["import {\n
|
|
1
|
+
{"version":3,"sources":["../../src/typography/Typography.tsx"],"sourcesContent":["import {\n type ElementType,\n type HTMLAttributes,\n type ReactElement,\n forwardRef,\n} from \"react\";\n\nimport {\n type TypographyClassNameOptions,\n type TypographyType,\n typography,\n} from \"./typographyStyles.js\";\n\n/**\n * A union of the default supported elements that the `Typography` component can\n * be rendered as. This is mostly used for adding the correct `HTMLAttributes`\n * and enabling the forward ref.\n *\n * @since 4.0.0\n */\nexport type TypographyHTMLElement =\n | HTMLHeadingElement\n | HTMLParagraphElement\n | HTMLSpanElement\n | HTMLDivElement\n | HTMLAnchorElement\n | HTMLBodyElement\n | HTMLHtmlElement;\n\n/** @since 6.0.0 */\nexport type CustomTypographyComponent = ElementType<\n HTMLAttributes<TypographyHTMLElement> & { className: string }\n>;\n\n/** @internal */\nfunction getComponent(\n as: CustomTypographyComponent | undefined,\n type: TypographyType\n): ElementType {\n if (as) {\n return as;\n }\n\n switch (type) {\n case \"headline-1\":\n return \"h1\";\n case \"headline-2\":\n return \"h2\";\n case \"headline-3\":\n return \"h3\";\n case \"headline-4\":\n return \"h4\";\n case \"headline-5\":\n return \"h5\";\n case \"headline-6\":\n case \"subtitle-1\":\n case \"subtitle-2\":\n return \"h6\";\n case \"body-1\":\n case \"body-2\":\n return \"p\";\n case \"caption\":\n return \"caption\";\n default:\n return \"span\";\n }\n}\n\n/**\n * @since 6.0.0 Renamed `component` to `as`.\n * @since 6.0.0 Removed the children render function behavior. Use the\n * `typography` class name utility instead.\n */\nexport interface TypographyProps\n extends HTMLAttributes<TypographyHTMLElement>,\n TypographyClassNameOptions {\n /**\n * The component to render as when the children are not a render function. If\n * this prop is omitted, the component will be determined by the `type` prop\n * where:\n *\n * - `\"headline-1\" -> <h1>`\n * - `\"headline-2\" -> <h2>`\n * - `\"headline-3\" -> <h3>`\n * - `\"headline-4\" -> <h4>`\n * - `\"headline-5\" -> <h5>`\n * - `\"headline-6\" -> <h6>`\n * - `\"subtitle-1\" -> <h5>`\n * - `\"subtitle-2\" -> <h6>`\n * - `\"body-1\" -> <p>`\n * - `\"body-2\" -> <p>`\n * - `\"caption\" -> <caption>`\n * - `\"overline\" -> <span>`\n *\n * @since 6.0.0 Renamed from `component`\n */\n as?: CustomTypographyComponent;\n}\n\n/**\n * Render text with one of the material design typography styles applied and\n * optional styles like font-weight, font-style, text color, etc.\n *\n * @example All Example\n * ```tsx\n * import { Typography } from \"@react-md/core\":\n *\n * export function Example() {\n * return (\n * <>\n * <Typography type=\"headline-1\">Headline 1</Typography>\n * <Typography type=\"headline-2\">Headline 2</Typography>\n * <Typography type=\"headline-3\">Headline 3</Typography>\n * <Typography type=\"headline-4\">Headline 4</Typography>\n * <Typography type=\"headline-5\">Headline 5</Typography>\n * <Typography type=\"headline-6\">Headline 6</Typography>\n * <Typography type=\"subtitle-1\">Subtitle 1</Typography>\n * <Typography type=\"subtitle-2\">Subtitle 2</Typography>\n * <Typography>\n * A paragraph of text.\n * </Typography>\n * <Typography type=\"body-1\">\n * A paragraph of text.\n * </Typography>\n * <Typography type=\"body-2\">\n * Another paragraph of text.\n * </Typography>\n * <Typography type=\"caption\" component=\"h5\">\n * Caption text\n * </Typography>\n * <Typography type=\"overline\" component=\"h5\">\n * Overline text\n * </Typography>\n * </>\n * ):\n * }\n * ```\n *\n * @since 6.0.0 Removed the children render function behavior . Use the\n * `typography` class name utility instead.\n */\nexport const Typography = forwardRef<TypographyHTMLElement, TypographyProps>(\n function Typography(props, ref): ReactElement {\n const {\n as,\n type = \"body-1\",\n className,\n margin,\n fontStyle,\n fontWeight,\n textAlign,\n textColor,\n textDecoration,\n textTransform,\n textOverflow,\n children,\n ...remaining\n } = props;\n\n const Component = getComponent(as, type);\n return (\n <Component\n {...remaining}\n ref={ref}\n className={typography({\n type,\n margin,\n fontStyle,\n fontWeight,\n textAlign,\n textColor,\n textDecoration,\n textTransform,\n textOverflow,\n className,\n })}\n >\n {children}\n </Component>\n );\n }\n);\n"],"names":["forwardRef","typography","getComponent","as","type","Typography","props","ref","className","margin","fontStyle","fontWeight","textAlign","textColor","textDecoration","textTransform","textOverflow","children","remaining","Component"],"mappings":";AAAA,SAIEA,UAAU,QACL,QAAQ;AAEf,SAGEC,UAAU,QACL,wBAAwB;AAuB/B,cAAc,GACd,SAASC,aACPC,EAAyC,EACzCC,IAAoB;IAEpB,IAAID,IAAI;QACN,OAAOA;IACT;IAEA,OAAQC;QACN,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAO;QACT,KAAK;QACL,KAAK;QACL,KAAK;YACH,OAAO;QACT,KAAK;QACL,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAO;QACT;YACE,OAAO;IACX;AACF;AAiCA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyCC,GACD,OAAO,MAAMC,2BAAaL,WACxB,SAASK,WAAWC,KAAK,EAAEC,GAAG;IAC5B,MAAM,EACJJ,EAAE,EACFC,OAAO,QAAQ,EACfI,SAAS,EACTC,MAAM,EACNC,SAAS,EACTC,UAAU,EACVC,SAAS,EACTC,SAAS,EACTC,cAAc,EACdC,aAAa,EACbC,YAAY,EACZC,QAAQ,EACR,GAAGC,WACJ,GAAGZ;IAEJ,MAAMa,YAAYjB,aAAaC,IAAIC;IACnC,qBACE,KAACe;QACE,GAAGD,SAAS;QACbX,KAAKA;QACLC,WAAWP,WAAW;YACpBG;YACAK;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAR;QACF;kBAECS;;AAGP,GACA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/typography/WritingDirectionProvider.tsx"],"sourcesContent":["\"use client\";\nimport {\n Children,\n cloneElement,\n createContext,\n isValidElement,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useState,\n
|
|
1
|
+
{"version":3,"sources":["../../src/typography/WritingDirectionProvider.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n Children,\n type ReactElement,\n type ReactNode,\n cloneElement,\n createContext,\n isValidElement,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useState,\n} from \"react\";\n\nimport { type UseStateInitializer } from \"../types.js\";\n\n/**\n * Note: unlike the `dir` DOM attribute, the `\"auto\"` value is not supported.\n *\n * @since 6.0.0\n */\nexport type Dir = \"ltr\" | \"rtl\";\n\n/** @since 6.0.0 */\nexport type DefaultDir = UseStateInitializer<Dir>;\n\n/** @since 2.3.0 */\nexport interface WritingDirectionContext {\n /**\n * The current writing direction that is being inherited.\n */\n dir: Dir;\n\n /**\n * Toggles the current writing direction for the first parent `Dir` component.\n */\n toggleDir: () => void;\n}\n\n/** @internal */\ninterface InheritableContext extends WritingDirectionContext {\n root: boolean;\n}\n\nconst context = createContext<InheritableContext>({\n root: true,\n dir: \"ltr\",\n toggleDir: () => {\n if (process.env.NODE_ENV !== \"production\") {\n throw new Error(\n \"Tried to toggle the current writing direction without initializing the `Dir` component.\"\n );\n }\n },\n});\ncontext.displayName = \"WritingDirection\";\nconst { Provider } = context;\n\n/**\n * Gets the writing direction context which provides access to the current `dir`\n * and a `toggleDir` function.\n *\n * @example Manually Changing the Writing Direction\n * ```tsx\n * import { useDir } from \"@react-md/core\";\n *\n * function Example() {\n * const { dir, toggleDir } = useDir();\n *\n * return (\n * <>\n * <p>{`The current dir is: \"${dir}\"`}</p>\n * <button type=\"button\" onClick={toggleDir}>Toggle</button>\n * </>\n * );\n * }\n * ```\n *\n * @since 6.0.0\n */\nexport function useDir(): Readonly<WritingDirectionContext> {\n const { root: _root, ...current } = useContext(context);\n return current;\n}\n\n/** @since 6.0.0 */\nexport interface WritingDirectionProviderProps {\n /**\n * A single ReactElement child. If the `WritingDirection` has a parent\n * `WritingDirection`, the child will have the `dir` prop cloned into this\n * element.\n */\n children: ReactElement<{ dir?: Dir }> | ReactNode;\n\n /**\n * The default writing direction for your app or a subtree. To change the\n * current writing direction, use the `useDir` hook to get access to the\n * current `dir` and the `toggleDir` function.\n *\n * @defaultValue `\"ltr\"`\n * @see {@link DEFAULT_WRITING_DIRECTION}\n */\n defaultDir?: DefaultDir;\n}\n\n/**\n * In the browser, this will default to the `<html>`'s `dir` value if one\n * exists. If the `dir` attribute does not exist, it will default to `\"ltr\"`.\n *\n * In node environments, this will default to `\"ltr\"`.\n *\n * @since 6.0.0 Renamed from `DEFAULT_DIR`\n */\nexport const DEFAULT_WRITING_DIRECTION = (): Dir => {\n let dir: Dir = \"ltr\";\n if (typeof document !== \"undefined\") {\n const rootDir = document.documentElement.getAttribute(\"dir\");\n dir = rootDir === \"rtl\" ? \"rtl\" : \"ltr\";\n }\n\n return dir;\n};\n\n/**\n * **Client Component**\n *\n * The `WritingDirection` component is used to handle the current writing\n * direction within your app as well as conditionally updating the writing\n * direction for small sections in your app. When this component is used for the\n * first time near the root of your React component tree, the current direction\n * will be applied to the root `<html>` element. Otherwise the current dir will\n * be cloned into the child element so it can be passed as a prop.\n *\n * Note: Since the `dir` is cloned into the child element, you need to make sure\n * that the child is either a DOM element or the `dir` prop is passed from your\n * custom component.\n *\n * @example Root Setup\n * ```tsx\n * import { createRoot } from \"react-dom/client\";\n * import { WritingDirection } from \"@react-md/core\";\n * import App from \"./App.js\":\n *\n * const container = document.getElementById(\"root\");\n * const root = createRoot(container);\n *\n * root.render(\n * <WritingDirection>\n * <App />\n * </WritingDirection>\n * );\n * ```\n *\n * @example Supporting RTL Languages\n * ```tsx\n * import { createRoot } from \"react-dom/client\";\n * import { WritingDirection } from \"@react-md/core\";\n * import type { Dir } from \"@react-md/core\";\n * import App from \"./App.js\":\n *\n * const container = document.getElementById(\"root\");\n * const root = createRoot(container);\n *\n * // see https://meta.wikimedia.org/wiki/Template:List_of_language_names_ordered_by_code\n * const SUPPORTED_RTL_LANGUAGES = [\n * \"ar\",\n * \"arc\",\n * \"ckb\",\n * \"dv\",\n * \"fa\",\n * \"ha\",\n * \"he\",\n * \"khw\",\n * \"ks\",\n * \"ps\",\n * \"sd\",\n * \"ur\",\n * \"uz_AF\",\n * \"ti\",\n * ];\n *\n * const defaultDir = (): Dir => {\n * if (SUPPORTED_RTL_LANGUAGES.includes(navigator.language)) {\n * return \"rtl\"\n * }\n *\n * return \"ltr\";\n * }\n *\n * root.render(\n * <WritingDirection defaultDir={defaultDir}>\n * <App />\n * </WritingDirection>\n * );\n * ```\n *\n * @since 6.0.0 Renamed from `Dir`\n */\nexport function WritingDirectionProvider(\n props: WritingDirectionProviderProps\n): ReactElement {\n const { children, defaultDir = DEFAULT_WRITING_DIRECTION } = props;\n const { root } = useContext(context);\n const [dir, setDir] = useState(defaultDir);\n useEffect(() => {\n if (!root || typeof document === \"undefined\") {\n return;\n }\n\n document.documentElement.setAttribute(\"dir\", dir);\n\n return () => {\n document.documentElement.removeAttribute(\"dir\");\n };\n }, [dir, root]);\n\n const toggleDir = useCallback(() => {\n setDir((prevDir) => (prevDir === \"ltr\" ? \"rtl\" : \"ltr\"));\n }, []);\n\n const value = useMemo<InheritableContext>(\n () => ({ root: false, dir, toggleDir }),\n [dir, toggleDir]\n );\n let child = Children.only(children);\n if (!root && isValidElement<{ dir: Dir }>(child)) {\n child = cloneElement(child, { dir });\n }\n\n return <Provider value={value}>{child}</Provider>;\n}\n"],"names":["Children","cloneElement","createContext","isValidElement","useCallback","useContext","useEffect","useMemo","useState","context","root","dir","toggleDir","process","env","NODE_ENV","Error","displayName","Provider","useDir","_root","current","DEFAULT_WRITING_DIRECTION","document","rootDir","documentElement","getAttribute","WritingDirectionProvider","props","children","defaultDir","setDir","setAttribute","removeAttribute","prevDir","value","child","only"],"mappings":"AAAA;;AAEA,SACEA,QAAQ,EAGRC,YAAY,EACZC,aAAa,EACbC,cAAc,EACdC,WAAW,EACXC,UAAU,EACVC,SAAS,EACTC,OAAO,EACPC,QAAQ,QACH,QAAQ;AAgCf,MAAMC,wBAAUP,cAAkC;IAChDQ,MAAM;IACNC,KAAK;IACLC,WAAW;QACT,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;YACzC,MAAM,IAAIC,MACR;QAEJ;IACF;AACF;AACAP,QAAQQ,WAAW,GAAG;AACtB,MAAM,EAAEC,QAAQ,EAAE,GAAGT;AAErB;;;;;;;;;;;;;;;;;;;;;CAqBC,GACD,OAAO,SAASU;IACd,MAAM,EAAET,MAAMU,KAAK,EAAE,GAAGC,SAAS,GAAGhB,WAAWI;IAC/C,OAAOY;AACT;AAsBA;;;;;;;CAOC,GACD,OAAO,MAAMC,4BAA4B;IACvC,IAAIX,MAAW;IACf,IAAI,OAAOY,aAAa,aAAa;QACnC,MAAMC,UAAUD,SAASE,eAAe,CAACC,YAAY,CAAC;QACtDf,MAAMa,YAAY,QAAQ,QAAQ;IACpC;IAEA,OAAOb;AACT,EAAE;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0EC,GACD,OAAO,SAASgB,yBACdC,KAAoC;IAEpC,MAAM,EAAEC,QAAQ,EAAEC,aAAaR,yBAAyB,EAAE,GAAGM;IAC7D,MAAM,EAAElB,IAAI,EAAE,GAAGL,WAAWI;IAC5B,MAAM,CAACE,KAAKoB,OAAO,GAAGvB,SAASsB;IAC/BxB,UAAU;QACR,IAAI,CAACI,QAAQ,OAAOa,aAAa,aAAa;YAC5C;QACF;QAEAA,SAASE,eAAe,CAACO,YAAY,CAAC,OAAOrB;QAE7C,OAAO;YACLY,SAASE,eAAe,CAACQ,eAAe,CAAC;QAC3C;IACF,GAAG;QAACtB;QAAKD;KAAK;IAEd,MAAME,YAAYR,YAAY;QAC5B2B,OAAO,CAACG,UAAaA,YAAY,QAAQ,QAAQ;IACnD,GAAG,EAAE;IAEL,MAAMC,QAAQ5B,QACZ,IAAO,CAAA;YAAEG,MAAM;YAAOC;YAAKC;QAAU,CAAA,GACrC;QAACD;QAAKC;KAAU;IAElB,IAAIwB,QAAQpC,SAASqC,IAAI,CAACR;IAC1B,IAAI,CAACnB,sBAAQP,eAA6BiC,QAAQ;QAChDA,sBAAQnC,aAAamC,OAAO;YAAEzB;QAAI;IACpC;IAEA,qBAAO,KAACO;QAASiB,OAAOA;kBAAQC;;AAClC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/typography/textContainerStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { bem } from \"../utils/bem.js\";\n\ndeclare module \"react\" {\n interface CSSProperties {\n \"--rmd-line-length\"?: string | number;\n \"--rmd-text-container-padding\"?: string | number;\n }\n}\n\nconst styles = bem(\"rmd-text-container\");\n\n/**\n * @since 6.0.0\n */\nexport interface TextContainerClassNameOptions {\n /**\n * An optional className to merge with typography text container styles.\n */\n className?: string;\n}\n\n/**\n * @example Simple Example\n * ```tsx\n * import { textContainer, Typography } from \"@react-md/core\";\n *\n * function Example() {\n * return (\n * <main className={textContainer()}>\n * <Typography type=\"headline-1\">Heading</Typography>\n * <Typography>\n * Pretend this is a giant paragraph of text that wraps multiple lines.\n * </Typography>\n * <Typography>\n * Pretend this is another giant paragraph of text that wraps multiple\n * lines.\n * </Typography>\n * </main>\n * ):\n * }\n * ```\n *\n * @since 6.0.0\n */\nexport function textContainer(\n options: TextContainerClassNameOptions = {}\n): string {\n const { className } = options;\n\n return cnb(styles(), className);\n}\n"],"names":["cnb","bem","styles","textContainer","options","className"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;
|
|
1
|
+
{"version":3,"sources":["../../src/typography/textContainerStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { bem } from \"../utils/bem.js\";\n\ndeclare module \"react\" {\n interface CSSProperties {\n \"--rmd-line-length\"?: string | number;\n \"--rmd-text-container-padding\"?: string | number;\n }\n}\n\nconst styles = bem(\"rmd-text-container\");\n\n/**\n * @since 6.0.0\n */\nexport interface TextContainerClassNameOptions {\n /**\n * An optional className to merge with typography text container styles.\n */\n className?: string;\n}\n\n/**\n * @example Simple Example\n * ```tsx\n * import { textContainer, Typography } from \"@react-md/core\";\n *\n * function Example() {\n * return (\n * <main className={textContainer()}>\n * <Typography type=\"headline-1\">Heading</Typography>\n * <Typography>\n * Pretend this is a giant paragraph of text that wraps multiple lines.\n * </Typography>\n * <Typography>\n * Pretend this is another giant paragraph of text that wraps multiple\n * lines.\n * </Typography>\n * </main>\n * ):\n * }\n * ```\n *\n * @since 6.0.0\n */\nexport function textContainer(\n options: TextContainerClassNameOptions = {}\n): string {\n const { className } = options;\n\n return cnb(styles(), className);\n}\n"],"names":["cnb","bem","styles","textContainer","options","className"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,GAAG,QAAQ,kBAAkB;AAStC,MAAMC,SAASD,IAAI;AAYnB;;;;;;;;;;;;;;;;;;;;;;CAsBC,GACD,OAAO,SAASE,cACdC,UAAyC,CAAC,CAAC;IAE3C,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOJ,IAAIE,UAAUG;AACvB"}
|