@react-md/core 6.3.4 → 6.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/CoreProviders.d.ts +1 -0
- package/dist/CoreProviders.js.map +1 -1
- package/dist/_a11y.scss +3 -1
- package/dist/_base.scss +3 -0
- package/dist/_box-shadows.scss +20 -12
- package/dist/_core.scss +2 -1
- package/dist/_utils.scss +32 -10
- 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 +3 -3
- package/dist/autocomplete/AutocompleteListboxChildren.js.map +1 -1
- package/dist/autocomplete/_autocomplete.scss +20 -16
- package/dist/autocomplete/types.js.map +1 -1
- package/dist/autocomplete/utils.js.map +1 -1
- package/dist/avatar/Avatar.js.map +1 -1
- package/dist/avatar/_avatar.scss +2 -1
- package/dist/button/Button.js.map +1 -1
- package/dist/button/FloatingActionButton.js.map +1 -1
- package/dist/button/_button.scss +9 -5
- package/dist/card/Card.js.map +1 -1
- package/dist/card/CardContent.js.map +1 -1
- package/dist/card/ClickableCard.js.map +1 -1
- package/dist/card/_card.scss +6 -6
- package/dist/chip/Chip.js.map +1 -1
- package/dist/chip/_chip.scss +6 -6
- package/dist/datetime/NativeDateField.js.map +1 -1
- package/dist/datetime/NativeTimeField.js.map +1 -1
- package/dist/datetime/useDateField.js.map +1 -1
- package/dist/datetime/useTimeField.js.map +1 -1
- package/dist/dialog/Dialog.js.map +1 -1
- package/dist/dialog/DialogContainer.js.map +1 -1
- package/dist/dialog/DialogContent.js.map +1 -1
- package/dist/dialog/DialogFooter.js.map +1 -1
- package/dist/dialog/_dialog.scss +6 -6
- package/dist/divider/Divider.js.map +1 -1
- package/dist/divider/_divider.scss +6 -2
- package/dist/draggable/useDraggable.js.map +1 -1
- package/dist/draggable/utils.js.map +1 -1
- package/dist/expansion-panel/ExpansionPanelHeader.js.map +1 -1
- package/dist/files/FileInput.js.map +1 -1
- package/dist/files/useFileUpload.js.map +1 -1
- package/dist/files/validation.js.map +1 -1
- package/dist/focus/useFocusContainer.js.map +1 -1
- package/dist/form/Fieldset.d.ts +19 -0
- package/dist/form/Fieldset.js +22 -2
- package/dist/form/Fieldset.js.map +1 -1
- package/dist/form/FormMessageContainer.js.map +1 -1
- package/dist/form/FormMessageCounter.js.map +1 -1
- package/dist/form/InputToggle.js.map +1 -1
- package/dist/form/Legend.d.ts +27 -5
- package/dist/form/Legend.js +39 -6
- package/dist/form/Legend.js.map +1 -1
- package/dist/form/Listbox.js.map +1 -1
- package/dist/form/ListboxProvider.js.map +1 -1
- package/dist/form/NativeSelect.js.map +1 -1
- package/dist/form/Password.js.map +1 -1
- package/dist/form/ResizingTextAreaWrapper.js.map +1 -1
- package/dist/form/Select.d.ts +24 -0
- package/dist/form/Select.js +14 -3
- package/dist/form/Select.js.map +1 -1
- package/dist/form/SelectedOption.d.ts +1 -2
- package/dist/form/SelectedOption.js +2 -2
- package/dist/form/SelectedOption.js.map +1 -1
- package/dist/form/Slider.js.map +1 -1
- package/dist/form/SliderContainer.js.map +1 -1
- package/dist/form/SliderThumb.js.map +1 -1
- package/dist/form/SliderTrack.js.map +1 -1
- package/dist/form/SliderValueMarks.js.map +1 -1
- package/dist/form/Switch.js.map +1 -1
- package/dist/form/TextArea.js.map +1 -1
- package/dist/form/TextField.js.map +1 -1
- package/dist/form/TextFieldContainer.js.map +1 -1
- package/dist/form/_fieldset.scss +7 -0
- package/dist/form/_input-toggle.scss +6 -5
- package/dist/form/_label.scss +2 -2
- package/dist/form/_legend.scss +77 -0
- package/dist/form/_slider.scss +7 -5
- package/dist/form/_switch.scss +7 -5
- package/dist/form/_text-field.scss +52 -15
- package/dist/form/defaultGetSelectedOptionChildren.d.ts +1 -0
- package/dist/form/fieldsetStyles.d.ts +6 -1
- package/dist/form/fieldsetStyles.js +3 -2
- package/dist/form/fieldsetStyles.js.map +1 -1
- package/dist/form/getSelectedOptionChildren.d.ts +1 -0
- package/dist/form/inputToggleStyles.js.map +1 -1
- package/dist/form/labelStyles.d.ts +1 -1
- package/dist/form/labelStyles.js +1 -1
- package/dist/form/labelStyles.js.map +1 -1
- package/dist/form/legendStyles.d.ts +83 -0
- package/dist/form/legendStyles.js +25 -0
- package/dist/form/legendStyles.js.map +1 -0
- package/dist/form/selectUtils.js.map +1 -1
- package/dist/form/textFieldContainerStyles.js.map +1 -1
- package/dist/form/types.d.ts +28 -6
- package/dist/form/types.js.map +1 -1
- package/dist/form/useCheckboxGroup.js.map +1 -1
- package/dist/form/useCombobox.js.map +1 -1
- package/dist/form/useNumberField.js +16 -19
- package/dist/form/useNumberField.js.map +1 -1
- package/dist/form/useRangeSlider.js.map +1 -1
- package/dist/form/useSlider.js.map +1 -1
- package/dist/form/useTextField.js.map +1 -1
- package/dist/hoverMode/useHoverMode.js.map +1 -1
- package/dist/icon/FontIcon.js.map +1 -1
- package/dist/icon/IconRotator.js.map +1 -1
- package/dist/icon/MaterialIcon.js.map +1 -1
- package/dist/icon/MaterialSymbol.js.map +1 -1
- package/dist/icon/SVGIcon.js.map +1 -1
- package/dist/icon/config.d.ts +0 -1
- package/dist/icon/config.js +10 -7
- package/dist/icon/config.js.map +1 -1
- package/dist/icon/materialConfig.js.map +1 -1
- package/dist/icon/styles.js.map +1 -1
- package/dist/interaction/UserInteractionModeProvider.js +6 -4
- package/dist/interaction/UserInteractionModeProvider.js.map +1 -1
- package/dist/interaction/_interaction.scss +5 -3
- package/dist/interaction/types.js.map +1 -1
- package/dist/interaction/useElementInteraction.js.map +1 -1
- package/dist/layout/LayoutAppBar.d.ts +6 -6
- package/dist/layout/LayoutAppBar.js +6 -6
- package/dist/layout/LayoutAppBar.js.map +1 -1
- package/dist/layout/LayoutNav.js.map +1 -1
- package/dist/layout/LayoutWindowSplitter.js.map +1 -1
- package/dist/layout/Main.js.map +1 -1
- package/dist/layout/useExpandableLayout.js +43 -0
- package/dist/layout/useExpandableLayout.js.map +1 -1
- package/dist/layout/useHorizontalLayoutTransition.js.map +1 -1
- package/dist/layout/useLayoutTree.js.map +1 -1
- package/dist/layout/useLayoutWindowSplitter.js.map +1 -1
- package/dist/layout/useResizableLayout.js.map +1 -1
- package/dist/link/Link.js.map +1 -1
- package/dist/link/SkipToMainContent.js +19 -21
- package/dist/link/SkipToMainContent.js.map +1 -1
- package/dist/list/List.js.map +1 -1
- package/dist/list/ListItem.js.map +1 -1
- package/dist/list/ListItemAddon.js.map +1 -1
- package/dist/list/ListItemLink.js.map +1 -1
- package/dist/list/ListSubheader.js.map +1 -1
- package/dist/list/getListItemHeight.js.map +1 -1
- package/dist/list/listItemStyles.js.map +1 -1
- package/dist/list/types.js.map +1 -1
- package/dist/media-queries/AppSizeProvider.d.ts +2 -0
- package/dist/media-queries/AppSizeProvider.js +3 -2
- package/dist/media-queries/AppSizeProvider.js.map +1 -1
- package/dist/media-queries/appSize.d.ts +3 -0
- package/dist/media-queries/appSize.js +3 -1
- package/dist/media-queries/appSize.js.map +1 -1
- package/dist/media-queries/config.d.ts +11 -0
- package/dist/media-queries/config.js +26 -0
- package/dist/media-queries/config.js.map +1 -0
- package/dist/menu/DropdownMenu.js.map +1 -1
- package/dist/menu/Menu.js.map +1 -1
- package/dist/menu/MenuItemButton.js.map +1 -1
- package/dist/menu/MenuItemFileInput.js.map +1 -1
- package/dist/menu/MenuItemInputToggle.js.map +1 -1
- package/dist/menu/MenuItemSeparator.js.map +1 -1
- package/dist/menu/MenuVisibilityProvider.js.map +1 -1
- package/dist/menu/MenuWidget.js.map +1 -1
- package/dist/menu/useContextMenu.js.map +1 -1
- package/dist/movement/types.d.ts +28 -3
- package/dist/movement/types.js.map +1 -1
- package/dist/movement/useKeyboardMovementProvider.js +96 -47
- package/dist/movement/useKeyboardMovementProvider.js.map +1 -1
- package/dist/navigation/CollapsibleNavGroup.js.map +1 -1
- package/dist/navigation/NavItem.js.map +1 -1
- package/dist/navigation/NavItemButton.js.map +1 -1
- package/dist/navigation/NavItemLink.js.map +1 -1
- package/dist/navigation/getTableOfContentsHeadings.js.map +1 -1
- package/dist/navigation/types.js.map +1 -1
- package/dist/overlay/Overlay.js.map +1 -1
- package/dist/positioning/createHorizontalPosition.js.map +1 -1
- package/dist/positioning/createVerticalPosition.js.map +1 -1
- package/dist/positioning/useFixedPositioning.js.map +1 -1
- package/dist/progress/CircularProgress.js.map +1 -1
- package/dist/progress/LinearProgress.js.map +1 -1
- package/dist/progress/linearProgressStyles.js.map +1 -1
- package/dist/responsive-item/ResponsiveItem.js.map +1 -1
- package/dist/responsive-item/ResponsiveItemOverlay.js.map +1 -1
- package/dist/searching/caseInsensitive.js.map +1 -1
- package/dist/segmented-button/SegmentedButton.js.map +1 -1
- package/dist/segmented-button/SegmentedButtonContainer.js.map +1 -1
- package/dist/segmented-button/segmentedButtonStyles.js.map +1 -1
- package/dist/sheet/Sheet.js.map +1 -1
- package/dist/snackbar/Toast.js.map +1 -1
- package/dist/snackbar/_snackbar.scss +3 -3
- package/dist/spinbutton/SpinButton.d.ts +16 -0
- package/dist/spinbutton/SpinButton.js +55 -0
- package/dist/spinbutton/SpinButton.js.map +1 -0
- package/dist/spinbutton/SpinButtonGroupProvider.d.ts +17 -0
- package/dist/spinbutton/SpinButtonGroupProvider.js +19 -0
- package/dist/spinbutton/SpinButtonGroupProvider.js.map +1 -0
- package/dist/spinbutton/defaults.d.ts +9 -0
- package/dist/spinbutton/defaults.js +25 -0
- package/dist/spinbutton/defaults.js.map +1 -0
- package/dist/spinbutton/types.d.ts +324 -0
- package/dist/spinbutton/types.js +5 -0
- package/dist/spinbutton/types.js.map +1 -0
- package/dist/spinbutton/useSpinButton.d.ts +5 -0
- package/dist/spinbutton/useSpinButton.js +260 -0
- package/dist/spinbutton/useSpinButton.js.map +1 -0
- package/dist/spinbutton/useSpinButtonGroupProvider.d.ts +27 -0
- package/dist/spinbutton/useSpinButtonGroupProvider.js +49 -0
- package/dist/spinbutton/useSpinButtonGroupProvider.js.map +1 -0
- package/dist/spinbutton/utils/deselectNode.d.ts +5 -0
- package/dist/spinbutton/utils/deselectNode.js +17 -0
- package/dist/spinbutton/utils/deselectNode.js.map +1 -0
- package/dist/spinbutton/utils/resolveInputEvent.d.ts +30 -0
- package/dist/spinbutton/utils/resolveInputEvent.js +53 -0
- package/dist/spinbutton/utils/resolveInputEvent.js.map +1 -0
- package/dist/spinbutton/utils/selectNode.d.ts +5 -0
- package/dist/spinbutton/utils/selectNode.js +15 -0
- package/dist/spinbutton/utils/selectNode.js.map +1 -0
- package/dist/table/StickyTableSection.js.map +1 -1
- package/dist/table/Table.js.map +1 -1
- package/dist/table/TableBody.js.map +1 -1
- package/dist/table/TableCellContent.js.map +1 -1
- package/dist/table/TableCheckbox.js.map +1 -1
- package/dist/table/TableFooter.js.map +1 -1
- package/dist/table/TableHeader.js.map +1 -1
- package/dist/table/TableRadio.js.map +1 -1
- package/dist/table/TableRow.js.map +1 -1
- package/dist/table/useStickyTableSection.js.map +1 -1
- package/dist/tabs/SimpleTabPanel.js.map +1 -1
- package/dist/tabs/SimpleTabPanels.js.map +1 -1
- package/dist/tabs/Tab.js.map +1 -1
- package/dist/tabs/TabList.js.map +1 -1
- package/dist/tabs/TabListScrollButton.js.map +1 -1
- package/dist/tabs/_tabs.scss +5 -6
- package/dist/tabs/useMaxTabPanelHeight.js.map +1 -1
- package/dist/test-utils/data-testid.js.map +1 -1
- package/dist/test-utils/mocks/match-media.js +5 -5
- package/dist/test-utils/mocks/match-media.js.map +1 -1
- package/dist/test-utils/vitest/timers.d.ts +1 -1
- package/dist/test-utils/vitest/timers.js +1 -1
- package/dist/test-utils/vitest/timers.js.map +1 -1
- package/dist/theme/_a11y.scss +3 -1
- package/dist/theme/_theme.scss +16 -12
- package/dist/tooltip/Tooltip.js.map +1 -1
- package/dist/tooltip/TooltipHoverModeProvider.js.map +1 -1
- package/dist/tooltip/useTooltip.js.map +1 -1
- package/dist/transition/CSSTransition.js.map +1 -1
- package/dist/transition/Collapse.js.map +1 -1
- package/dist/transition/CrossFade.js.map +1 -1
- package/dist/transition/ScaleTransition.js.map +1 -1
- package/dist/transition/SkeletonPlaceholder.js.map +1 -1
- package/dist/transition/Slide.js.map +1 -1
- package/dist/transition/SlideContainer.js.map +1 -1
- package/dist/transition/types.js.map +1 -1
- package/dist/transition/useCollapseTransition.js.map +1 -1
- package/dist/transition/useCrossFadeTransition.js.map +1 -1
- package/dist/transition/useMaxWidthTransition.js.map +1 -1
- package/dist/transition/useScaleTransition.js.map +1 -1
- package/dist/transition/useSkeletonPlaceholder.js.map +1 -1
- package/dist/tree/Tree.js.map +1 -1
- package/dist/tree/TreeItem.js.map +1 -1
- package/dist/tree/TreeProvider.js.map +1 -1
- package/dist/tree/styles.js.map +1 -1
- package/dist/tree/types.js.map +1 -1
- package/dist/tree/useTreeMovement.js.map +1 -1
- package/dist/typography/HighlightTextMark.js.map +1 -1
- package/dist/typography/Mark.js.map +1 -1
- package/dist/typography/TextContainer.js.map +1 -1
- package/dist/typography/Typography.js.map +1 -1
- package/dist/typography/_typography.scss +0 -1
- package/dist/useElementSize.js.map +1 -1
- package/dist/useIntersectionObserver.js.map +1 -1
- package/dist/useMutationObserver.js.map +1 -1
- package/dist/useWindowSize.js.map +1 -1
- package/dist/utils/getNumberOfDigits.d.ts +7 -0
- package/dist/utils/getNumberOfDigits.js +11 -0
- package/dist/utils/getNumberOfDigits.js.map +1 -0
- package/dist/utils/nearest.js +2 -1
- package/dist/utils/nearest.js.map +1 -1
- package/dist/utils/useDevEffect.d.ts +7 -0
- package/dist/utils/useDevEffect.js +8 -0
- package/dist/utils/useDevEffect.js.map +1 -0
- package/dist/window-splitter/WindowSplitter.js +3 -2
- package/dist/window-splitter/WindowSplitter.js.map +1 -1
- package/dist/window-splitter/_window-splitter.scss +65 -19
- package/dist/window-splitter/styles.d.ts +9 -0
- package/dist/window-splitter/styles.js +3 -2
- package/dist/window-splitter/styles.js.map +1 -1
- package/dist/window-splitter/useWindowSplitter.js.map +1 -1
- package/package.json +38 -30
- package/src/CoreProviders.tsx +1 -0
- package/src/app-bar/AppBar.tsx +1 -2
- package/src/app-bar/AppBarTitle.tsx +1 -2
- package/src/autocomplete/AutocompleteListboxChildren.tsx +3 -1
- package/src/autocomplete/types.ts +24 -19
- package/src/autocomplete/utils.ts +9 -6
- package/src/avatar/Avatar.tsx +2 -1
- package/src/button/Button.tsx +2 -1
- package/src/button/FloatingActionButton.tsx +2 -1
- package/src/card/Card.tsx +2 -1
- package/src/card/CardContent.tsx +1 -2
- package/src/card/ClickableCard.tsx +1 -2
- package/src/chip/Chip.tsx +2 -1
- package/src/datetime/NativeDateField.tsx +2 -1
- package/src/datetime/NativeTimeField.tsx +2 -1
- package/src/datetime/useDateField.ts +13 -8
- package/src/datetime/useTimeField.ts +13 -8
- package/src/dialog/Dialog.tsx +2 -1
- package/src/dialog/DialogContainer.tsx +1 -2
- package/src/dialog/DialogContent.tsx +1 -2
- package/src/dialog/DialogFooter.tsx +1 -2
- package/src/divider/Divider.tsx +1 -2
- package/src/draggable/useDraggable.ts +4 -4
- package/src/draggable/utils.ts +4 -2
- package/src/expansion-panel/ExpansionPanelHeader.tsx +1 -2
- package/src/files/FileInput.tsx +2 -1
- package/src/files/useFileUpload.ts +6 -6
- package/src/files/validation.ts +1 -2
- package/src/focus/useFocusContainer.ts +4 -4
- package/src/form/Fieldset.tsx +25 -3
- package/src/form/FormMessageContainer.tsx +1 -2
- package/src/form/FormMessageCounter.tsx +1 -2
- package/src/form/InputToggle.tsx +3 -3
- package/src/form/Legend.tsx +55 -10
- package/src/form/Listbox.tsx +1 -2
- package/src/form/ListboxProvider.ts +3 -2
- package/src/form/NativeSelect.tsx +2 -1
- package/src/form/Password.tsx +4 -2
- package/src/form/ResizingTextAreaWrapper.tsx +1 -2
- package/src/form/Select.tsx +55 -3
- package/src/form/SelectedOption.tsx +2 -4
- package/src/form/Slider.tsx +2 -1
- package/src/form/SliderContainer.tsx +1 -2
- package/src/form/SliderThumb.tsx +6 -3
- package/src/form/SliderTrack.tsx +2 -1
- package/src/form/SliderValueMarks.tsx +1 -2
- package/src/form/Switch.tsx +2 -1
- package/src/form/TextArea.tsx +1 -2
- package/src/form/TextField.tsx +2 -1
- package/src/form/TextFieldContainer.tsx +1 -2
- package/src/form/fieldsetStyles.ts +18 -3
- package/src/form/inputToggleStyles.ts +4 -2
- package/src/form/labelStyles.ts +1 -1
- package/src/form/legendStyles.ts +132 -0
- package/src/form/selectUtils.ts +3 -2
- package/src/form/textFieldContainerStyles.ts +1 -2
- package/src/form/types.ts +35 -17
- package/src/form/useCheckboxGroup.ts +3 -2
- package/src/form/useCombobox.ts +8 -3
- package/src/form/useNumberField.ts +36 -35
- package/src/form/useRangeSlider.ts +1 -2
- package/src/form/useSlider.ts +1 -2
- package/src/form/useTextField.ts +8 -3
- package/src/hoverMode/useHoverMode.ts +4 -8
- package/src/icon/FontIcon.tsx +1 -2
- package/src/icon/IconRotator.tsx +1 -2
- package/src/icon/MaterialIcon.tsx +2 -1
- package/src/icon/MaterialSymbol.tsx +2 -1
- package/src/icon/SVGIcon.tsx +1 -2
- package/src/icon/config.tsx +10 -7
- package/src/icon/materialConfig.ts +1 -2
- package/src/icon/styles.ts +1 -2
- package/src/interaction/UserInteractionModeProvider.tsx +9 -4
- package/src/interaction/types.ts +1 -2
- package/src/interaction/useElementInteraction.tsx +3 -2
- package/src/layout/LayoutAppBar.tsx +6 -6
- package/src/layout/LayoutNav.tsx +2 -1
- package/src/layout/LayoutWindowSplitter.tsx +2 -1
- package/src/layout/Main.tsx +1 -2
- package/src/layout/useExpandableLayout.ts +63 -5
- package/src/layout/useHorizontalLayoutTransition.ts +1 -2
- package/src/layout/useLayoutTree.ts +2 -2
- package/src/layout/useLayoutWindowSplitter.ts +6 -6
- package/src/layout/useResizableLayout.ts +3 -6
- package/src/link/Link.tsx +1 -2
- package/src/link/SkipToMainContent.tsx +20 -23
- package/src/list/List.tsx +1 -2
- package/src/list/ListItem.tsx +2 -1
- package/src/list/ListItemAddon.tsx +2 -1
- package/src/list/ListItemLink.tsx +2 -1
- package/src/list/ListSubheader.tsx +1 -2
- package/src/list/getListItemHeight.ts +8 -9
- package/src/list/listItemStyles.ts +1 -2
- package/src/list/types.ts +1 -2
- package/src/media-queries/AppSizeProvider.tsx +8 -10
- package/src/media-queries/appSize.ts +3 -0
- package/src/media-queries/config.ts +41 -0
- package/src/menu/DropdownMenu.tsx +4 -5
- package/src/menu/Menu.tsx +2 -1
- package/src/menu/MenuItemButton.tsx +1 -2
- package/src/menu/MenuItemFileInput.tsx +2 -1
- package/src/menu/MenuItemInputToggle.tsx +3 -3
- package/src/menu/MenuItemSeparator.tsx +2 -1
- package/src/menu/MenuVisibilityProvider.tsx +4 -2
- package/src/menu/MenuWidget.tsx +1 -2
- package/src/menu/useContextMenu.ts +4 -2
- package/src/movement/types.ts +52 -13
- package/src/movement/useKeyboardMovementProvider.ts +77 -38
- package/src/navigation/CollapsibleNavGroup.tsx +1 -2
- package/src/navigation/NavItem.tsx +1 -2
- package/src/navigation/NavItemButton.tsx +2 -1
- package/src/navigation/NavItemLink.tsx +2 -1
- package/src/navigation/getTableOfContentsHeadings.ts +1 -2
- package/src/navigation/types.ts +1 -2
- package/src/overlay/Overlay.tsx +2 -1
- package/src/positioning/createHorizontalPosition.ts +10 -12
- package/src/positioning/createVerticalPosition.ts +10 -11
- package/src/positioning/useFixedPositioning.ts +6 -3
- package/src/progress/CircularProgress.tsx +2 -1
- package/src/progress/LinearProgress.tsx +2 -1
- package/src/progress/linearProgressStyles.ts +1 -2
- package/src/responsive-item/ResponsiveItem.tsx +1 -2
- package/src/responsive-item/ResponsiveItemOverlay.tsx +2 -1
- package/src/searching/caseInsensitive.ts +2 -4
- package/src/segmented-button/SegmentedButton.tsx +2 -1
- package/src/segmented-button/SegmentedButtonContainer.tsx +2 -1
- package/src/segmented-button/segmentedButtonStyles.ts +1 -2
- package/src/sheet/Sheet.tsx +1 -2
- package/src/snackbar/Toast.tsx +2 -1
- package/src/spinbutton/SpinButton.tsx +98 -0
- package/src/spinbutton/SpinButtonGroupProvider.tsx +32 -0
- package/src/spinbutton/defaults.ts +45 -0
- package/src/spinbutton/types.ts +413 -0
- package/src/spinbutton/useSpinButton.ts +311 -0
- package/src/spinbutton/useSpinButtonGroupProvider.ts +104 -0
- package/src/spinbutton/utils/deselectNode.ts +17 -0
- package/src/spinbutton/utils/resolveInputEvent.ts +112 -0
- package/src/spinbutton/utils/selectNode.ts +15 -0
- package/src/table/StickyTableSection.tsx +2 -1
- package/src/table/Table.tsx +1 -2
- package/src/table/TableBody.tsx +2 -1
- package/src/table/TableCellContent.tsx +1 -2
- package/src/table/TableCheckbox.tsx +1 -2
- package/src/table/TableFooter.tsx +1 -2
- package/src/table/TableHeader.tsx +1 -2
- package/src/table/TableRadio.tsx +1 -2
- package/src/table/TableRow.tsx +1 -2
- package/src/table/useStickyTableSection.tsx +1 -2
- package/src/tabs/SimpleTabPanel.tsx +2 -1
- package/src/tabs/SimpleTabPanels.tsx +2 -1
- package/src/tabs/Tab.tsx +3 -6
- package/src/tabs/TabList.tsx +2 -1
- package/src/tabs/TabListScrollButton.tsx +1 -2
- package/src/tabs/useMaxTabPanelHeight.ts +7 -4
- package/src/test-utils/data-testid.ts +1 -2
- package/src/test-utils/mocks/match-media.ts +5 -10
- package/src/test-utils/vitest/timers.ts +1 -1
- package/src/tooltip/Tooltip.tsx +2 -1
- package/src/tooltip/TooltipHoverModeProvider.tsx +1 -2
- package/src/tooltip/useTooltip.ts +9 -5
- package/src/transition/CSSTransition.tsx +2 -1
- package/src/transition/Collapse.tsx +4 -2
- package/src/transition/CrossFade.tsx +2 -1
- package/src/transition/ScaleTransition.tsx +2 -1
- package/src/transition/SkeletonPlaceholder.tsx +1 -2
- package/src/transition/Slide.tsx +2 -1
- package/src/transition/SlideContainer.tsx +1 -2
- package/src/transition/types.ts +15 -16
- package/src/transition/useCollapseTransition.ts +6 -5
- package/src/transition/useCrossFadeTransition.ts +3 -2
- package/src/transition/useMaxWidthTransition.ts +1 -2
- package/src/transition/useScaleTransition.ts +3 -2
- package/src/transition/useSkeletonPlaceholder.ts +1 -2
- package/src/tree/Tree.tsx +2 -1
- package/src/tree/TreeItem.tsx +2 -1
- package/src/tree/TreeProvider.tsx +4 -4
- package/src/tree/styles.ts +1 -2
- package/src/tree/types.ts +1 -2
- package/src/tree/useTreeMovement.ts +1 -2
- package/src/typography/HighlightTextMark.tsx +1 -2
- package/src/typography/Mark.tsx +1 -2
- package/src/typography/TextContainer.tsx +1 -2
- package/src/typography/Typography.tsx +1 -2
- package/src/useElementSize.ts +7 -4
- package/src/useIntersectionObserver.ts +3 -2
- package/src/useMutationObserver.ts +3 -2
- package/src/useWindowSize.ts +4 -2
- package/src/utils/getNumberOfDigits.ts +18 -0
- package/src/utils/nearest.ts +2 -1
- package/src/utils/useDevEffect.ts +9 -0
- package/src/window-splitter/WindowSplitter.tsx +5 -2
- package/src/window-splitter/styles.ts +13 -2
- package/src/window-splitter/useWindowSplitter.ts +3 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/positioning/createHorizontalPosition.ts"],"sourcesContent":["import { type FixedPositionOptions, type HorizontalPosition } from \"./types.js\";\nimport {\n type XCoordConfig,\n getCenterXCoord,\n getInnerLeftCoord,\n getInnerRightCoord,\n getLeftCoord,\n getRightCoord,\n} from \"./utils.js\";\n\n/**\n * @internal\n */\ninterface XPosition {\n left: number;\n right?: number;\n width?: number;\n minWidth?: number;\n actualX: HorizontalPosition;\n}\n\n/**\n * @internal\n */\nexport interface HorizontalFixConfig extends XCoordConfig {\n vwMargin: number;\n screenRight: number;\n disableSwapping: boolean;\n}\n\n/**\n * @internal\n */\nexport interface CreateHorizontalPositionOptions\n extends Required<\n Pick<\n FixedPositionOptions,\n \"vwMargin\" | \"xMargin\" | \"width\" | \"disableSwapping\"\n >\n > {\n x: HorizontalPosition;\n vw: number;\n elWidth: number;\n initialX?: number;\n containerRect: DOMRect;\n}\n\n/**\n * Attempts to position the fixed element so that it will appear to the left of\n * the container element but also within the viewport boundaries. When swapping\n * is enabled, it will attempt to swap to the right position if it can't fit\n * within the viewport to the left. If it can't fit in the viewport even after\n * being swapped to the right or swapping is disabled, it will be positioned to\n * the viewport left boundary.\n *\n * @internal\n */\nexport function createAnchoredLeft(config: HorizontalFixConfig): XPosition {\n const { vwMargin, screenRight, elWidth, disableSwapping } = config;\n\n let left = getLeftCoord(config);\n let actualX: HorizontalPosition = \"left\";\n if (left >= vwMargin) {\n return { actualX, left };\n }\n\n const swappedLeft = getRightCoord(config);\n if (disableSwapping || swappedLeft + elWidth > screenRight) {\n left = vwMargin;\n } else {\n left = swappedLeft;\n actualX = \"right\";\n }\n\n return { actualX, left };\n}\n\n/**\n * Attempts to position the fixed element so that it will appear to the\n * inner-left of the container element but also within the viewport boundaries.\n * When swapping is enabled, it will attempt to swap to the right position if it\n * can't fit within the viewport to the left. If it can't fit in the viewport\n * even after being swapped to the right or swapping is disabled, it will be\n * positioned to the viewport left boundary.\n *\n * @internal\n */\nexport function createAnchoredInnerLeft(\n config: HorizontalFixConfig\n): XPosition {\n const { vwMargin, screenRight, elWidth, disableSwapping } = config;\n\n let left = getInnerLeftCoord(config);\n let actualX: HorizontalPosition = \"inner-left\";\n if (left + elWidth <= screenRight && left >= vwMargin) {\n return { actualX, left };\n }\n\n if (disableSwapping) {\n if (left + elWidth > screenRight) {\n left = screenRight - elWidth;\n } else {\n left = vwMargin;\n }\n\n return { actualX, left };\n }\n\n const swappedLeft = getInnerRightCoord(config);\n if (swappedLeft < vwMargin) {\n left = vwMargin;\n } else if (swappedLeft + elWidth > screenRight) {\n left = screenRight - elWidth;\n actualX = \"inner-right\";\n } else {\n left = swappedLeft;\n actualX = \"inner-right\";\n }\n\n return { actualX, left };\n}\n\n/**\n * Attempts to position the fixed element so that it will appear at the center\n * of the container element but also within the viewport boundaries. If the\n * centered element can't fit within the viewport, it will use the vwMargin\n * value if it overflowed to the left, it'll position to the screen right\n * boundary.\n *\n * @internal\n */\nexport function createAnchoredHorizontalCenter(\n config: HorizontalFixConfig\n): XPosition {\n const { vwMargin, screenRight, elWidth } = config;\n let left = getCenterXCoord(config);\n if (left < vwMargin) {\n left = vwMargin;\n } else if (left + elWidth > screenRight || left < vwMargin) {\n left = screenRight - elWidth;\n }\n\n return { actualX: \"center\", left };\n}\n\n/**\n * Attempts to position the fixed element so that it will appear to the\n * inner-right of the container element but also within the viewport boundaries.\n * When swapping is enabled, it will attempt to swap to the inner-left position\n * if it can't fit within the viewport to the right. If it can't fit in the\n * viewport even after being swapped to the left or swapping is disabled, it\n * will be positioned to the viewport right boundary.\n *\n * @internal\n */\nexport function createAnchoredInnerRight(\n config: HorizontalFixConfig\n): XPosition {\n const { screenRight, vwMargin, elWidth, disableSwapping } = config;\n\n let left = getInnerRightCoord(config);\n let actualX: HorizontalPosition = \"inner-right\";\n if (left >= vwMargin) {\n return { actualX, left: Math.min(left, screenRight - elWidth) };\n }\n\n const swappedLeft = getInnerLeftCoord(config);\n if (disableSwapping || swappedLeft + elWidth > screenRight) {\n left = vwMargin;\n } else {\n left = Math.max(swappedLeft, vwMargin);\n actualX = \"inner-left\";\n }\n\n return { actualX, left };\n}\n\n/**\n * Attempts to position the fixed element so that it will appear to the right of\n * the container element but also within the viewport boundaries. When swapping\n * is enabled, it will attempt to swap to the left position if it can't fit\n * within the viewport to the right. If it can't fit in the viewport even after\n * being swapped to the left or swapping is disabled, it will be positioned to\n * the viewport right boundary.\n *\n * @internal\n */\nexport function createAnchoredRight(config: HorizontalFixConfig): XPosition {\n const { screenRight, vwMargin, elWidth, disableSwapping } = config;\n\n let left = getRightCoord(config);\n let actualX: HorizontalPosition = \"right\";\n if (left + elWidth <= screenRight) {\n return { actualX, left };\n }\n\n const swappedLeft = getLeftCoord(config);\n if (disableSwapping || swappedLeft < vwMargin) {\n left = screenRight - elWidth;\n } else {\n left = swappedLeft;\n actualX = \"left\";\n }\n\n return { actualX, left };\n}\n\nexport interface EqualWidthOptions\n extends Pick<\n CreateHorizontalPositionOptions,\n \"x\" | \"elWidth\" | \"xMargin\" | \"vwMargin\" | \"containerRect\" | \"initialX\"\n > {\n screenRight: number;\n isMinWidth: boolean;\n}\n\n/**\n * @internal\n */\nexport function createEqualWidth(options: EqualWidthOptions): XPosition {\n const {\n x,\n elWidth,\n xMargin,\n vwMargin,\n initialX,\n containerRect,\n screenRight,\n isMinWidth,\n } = options;\n\n let left = initialX ?? containerRect.left + xMargin;\n\n let width: number | undefined = containerRect.width - xMargin * 2;\n let minWidth: number | undefined;\n let right: number | undefined;\n if (isMinWidth) {\n minWidth = width;\n // if the fixed element has a width greater than the element it is fixed to,\n // update the width to be the fixed element's width. since the \"min-width\"\n // option is only possible for horizontally centered elements, need to then\n // update the `left` position again.\n if (elWidth > width) {\n left -= (elWidth - width) / 2;\n minWidth = elWidth;\n }\n\n width = undefined;\n const elRight = left + elWidth;\n if (elRight > screenRight) {\n left -= elRight - screenRight;\n right = vwMargin;\n }\n\n left = Math.max(vwMargin, left);\n }\n\n // going to assume that the container element is visible in the DOM and just\n // make the fixed element have the same left and right corners\n return {\n left,\n right,\n width,\n minWidth,\n actualX: x,\n };\n}\n\n/**\n * Creates the horizontal position for a fixed element with the provided\n * options.\n * @internal\n */\nexport function createHorizontalPosition(\n options: CreateHorizontalPositionOptions\n): XPosition {\n const {\n x,\n vw,\n vwMargin,\n xMargin,\n width,\n elWidth,\n initialX,\n containerRect,\n disableSwapping,\n } = options;\n\n const screenRight = vw - vwMargin;\n if (width !== \"equal\" && elWidth > vw - vwMargin * 2) {\n // if the element's width is greater than the viewport's width minus the\n // margin on both sides, just make the element span the entire viewport with\n // the margin\n return {\n left: vwMargin,\n right: vwMargin,\n actualX: x,\n };\n }\n\n if (width === \"min\" || width === \"equal\") {\n return createEqualWidth({\n x,\n vwMargin,\n xMargin,\n elWidth,\n initialX,\n containerRect,\n screenRight,\n isMinWidth: width === \"min\",\n });\n }\n\n const config: HorizontalFixConfig = {\n vwMargin,\n xMargin,\n elWidth,\n initialX,\n screenRight,\n containerRect,\n disableSwapping,\n };\n\n switch (x) {\n case \"left\":\n return createAnchoredLeft(config);\n case \"inner-left\":\n return createAnchoredInnerLeft(config);\n case \"center\":\n return createAnchoredHorizontalCenter(config);\n case \"inner-right\":\n return createAnchoredInnerRight(config);\n case \"right\":\n return createAnchoredRight(config);\n }\n}\n"],"names":["getCenterXCoord","getInnerLeftCoord","getInnerRightCoord","getLeftCoord","getRightCoord","createAnchoredLeft","config","vwMargin","screenRight","elWidth","disableSwapping","left","actualX","swappedLeft","createAnchoredInnerLeft","createAnchoredHorizontalCenter","createAnchoredInnerRight","Math","min","max","createAnchoredRight","createEqualWidth","options","x","xMargin","initialX","containerRect","isMinWidth","width","minWidth","right","undefined","elRight","createHorizontalPosition","vw"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../src/positioning/createHorizontalPosition.ts"],"sourcesContent":["import { type FixedPositionOptions, type HorizontalPosition } from \"./types.js\";\nimport {\n type XCoordConfig,\n getCenterXCoord,\n getInnerLeftCoord,\n getInnerRightCoord,\n getLeftCoord,\n getRightCoord,\n} from \"./utils.js\";\n\n/**\n * @internal\n */\ninterface XPosition {\n left: number;\n right?: number;\n width?: number;\n minWidth?: number;\n actualX: HorizontalPosition;\n}\n\n/**\n * @internal\n */\nexport interface HorizontalFixConfig extends XCoordConfig {\n vwMargin: number;\n screenRight: number;\n disableSwapping: boolean;\n}\n\n/**\n * @internal\n */\nexport interface CreateHorizontalPositionOptions extends Required<\n Pick<\n FixedPositionOptions,\n \"vwMargin\" | \"xMargin\" | \"width\" | \"disableSwapping\"\n >\n> {\n x: HorizontalPosition;\n vw: number;\n elWidth: number;\n initialX?: number;\n containerRect: DOMRect;\n}\n\n/**\n * Attempts to position the fixed element so that it will appear to the left of\n * the container element but also within the viewport boundaries. When swapping\n * is enabled, it will attempt to swap to the right position if it can't fit\n * within the viewport to the left. If it can't fit in the viewport even after\n * being swapped to the right or swapping is disabled, it will be positioned to\n * the viewport left boundary.\n *\n * @internal\n */\nexport function createAnchoredLeft(config: HorizontalFixConfig): XPosition {\n const { vwMargin, screenRight, elWidth, disableSwapping } = config;\n\n let left = getLeftCoord(config);\n let actualX: HorizontalPosition = \"left\";\n if (left >= vwMargin) {\n return { actualX, left };\n }\n\n const swappedLeft = getRightCoord(config);\n if (disableSwapping || swappedLeft + elWidth > screenRight) {\n left = vwMargin;\n } else {\n left = swappedLeft;\n actualX = \"right\";\n }\n\n return { actualX, left };\n}\n\n/**\n * Attempts to position the fixed element so that it will appear to the\n * inner-left of the container element but also within the viewport boundaries.\n * When swapping is enabled, it will attempt to swap to the right position if it\n * can't fit within the viewport to the left. If it can't fit in the viewport\n * even after being swapped to the right or swapping is disabled, it will be\n * positioned to the viewport left boundary.\n *\n * @internal\n */\nexport function createAnchoredInnerLeft(\n config: HorizontalFixConfig\n): XPosition {\n const { vwMargin, screenRight, elWidth, disableSwapping } = config;\n\n let left = getInnerLeftCoord(config);\n let actualX: HorizontalPosition = \"inner-left\";\n if (left + elWidth <= screenRight && left >= vwMargin) {\n return { actualX, left };\n }\n\n if (disableSwapping) {\n if (left + elWidth > screenRight) {\n left = screenRight - elWidth;\n } else {\n left = vwMargin;\n }\n\n return { actualX, left };\n }\n\n const swappedLeft = getInnerRightCoord(config);\n if (swappedLeft < vwMargin) {\n left = vwMargin;\n } else if (swappedLeft + elWidth > screenRight) {\n left = screenRight - elWidth;\n actualX = \"inner-right\";\n } else {\n left = swappedLeft;\n actualX = \"inner-right\";\n }\n\n return { actualX, left };\n}\n\n/**\n * Attempts to position the fixed element so that it will appear at the center\n * of the container element but also within the viewport boundaries. If the\n * centered element can't fit within the viewport, it will use the vwMargin\n * value if it overflowed to the left, it'll position to the screen right\n * boundary.\n *\n * @internal\n */\nexport function createAnchoredHorizontalCenter(\n config: HorizontalFixConfig\n): XPosition {\n const { vwMargin, screenRight, elWidth } = config;\n let left = getCenterXCoord(config);\n if (left < vwMargin) {\n left = vwMargin;\n } else if (left + elWidth > screenRight || left < vwMargin) {\n left = screenRight - elWidth;\n }\n\n return { actualX: \"center\", left };\n}\n\n/**\n * Attempts to position the fixed element so that it will appear to the\n * inner-right of the container element but also within the viewport boundaries.\n * When swapping is enabled, it will attempt to swap to the inner-left position\n * if it can't fit within the viewport to the right. If it can't fit in the\n * viewport even after being swapped to the left or swapping is disabled, it\n * will be positioned to the viewport right boundary.\n *\n * @internal\n */\nexport function createAnchoredInnerRight(\n config: HorizontalFixConfig\n): XPosition {\n const { screenRight, vwMargin, elWidth, disableSwapping } = config;\n\n let left = getInnerRightCoord(config);\n let actualX: HorizontalPosition = \"inner-right\";\n if (left >= vwMargin) {\n return { actualX, left: Math.min(left, screenRight - elWidth) };\n }\n\n const swappedLeft = getInnerLeftCoord(config);\n if (disableSwapping || swappedLeft + elWidth > screenRight) {\n left = vwMargin;\n } else {\n left = Math.max(swappedLeft, vwMargin);\n actualX = \"inner-left\";\n }\n\n return { actualX, left };\n}\n\n/**\n * Attempts to position the fixed element so that it will appear to the right of\n * the container element but also within the viewport boundaries. When swapping\n * is enabled, it will attempt to swap to the left position if it can't fit\n * within the viewport to the right. If it can't fit in the viewport even after\n * being swapped to the left or swapping is disabled, it will be positioned to\n * the viewport right boundary.\n *\n * @internal\n */\nexport function createAnchoredRight(config: HorizontalFixConfig): XPosition {\n const { screenRight, vwMargin, elWidth, disableSwapping } = config;\n\n let left = getRightCoord(config);\n let actualX: HorizontalPosition = \"right\";\n if (left + elWidth <= screenRight) {\n return { actualX, left };\n }\n\n const swappedLeft = getLeftCoord(config);\n if (disableSwapping || swappedLeft < vwMargin) {\n left = screenRight - elWidth;\n } else {\n left = swappedLeft;\n actualX = \"left\";\n }\n\n return { actualX, left };\n}\n\nexport interface EqualWidthOptions extends Pick<\n CreateHorizontalPositionOptions,\n \"x\" | \"elWidth\" | \"xMargin\" | \"vwMargin\" | \"containerRect\" | \"initialX\"\n> {\n screenRight: number;\n isMinWidth: boolean;\n}\n\n/**\n * @internal\n */\nexport function createEqualWidth(options: EqualWidthOptions): XPosition {\n const {\n x,\n elWidth,\n xMargin,\n vwMargin,\n initialX,\n containerRect,\n screenRight,\n isMinWidth,\n } = options;\n\n let left = initialX ?? containerRect.left + xMargin;\n\n let width: number | undefined = containerRect.width - xMargin * 2;\n let minWidth: number | undefined;\n let right: number | undefined;\n if (isMinWidth) {\n minWidth = width;\n // if the fixed element has a width greater than the element it is fixed to,\n // update the width to be the fixed element's width. since the \"min-width\"\n // option is only possible for horizontally centered elements, need to then\n // update the `left` position again.\n if (elWidth > width) {\n left -= (elWidth - width) / 2;\n minWidth = elWidth;\n }\n\n width = undefined;\n const elRight = left + elWidth;\n if (elRight > screenRight) {\n left -= elRight - screenRight;\n right = vwMargin;\n }\n\n left = Math.max(vwMargin, left);\n }\n\n // going to assume that the container element is visible in the DOM and just\n // make the fixed element have the same left and right corners\n return {\n left,\n right,\n width,\n minWidth,\n actualX: x,\n };\n}\n\n/**\n * Creates the horizontal position for a fixed element with the provided\n * options.\n * @internal\n */\nexport function createHorizontalPosition(\n options: CreateHorizontalPositionOptions\n): XPosition {\n const {\n x,\n vw,\n vwMargin,\n xMargin,\n width,\n elWidth,\n initialX,\n containerRect,\n disableSwapping,\n } = options;\n\n const screenRight = vw - vwMargin;\n if (width !== \"equal\" && elWidth > vw - vwMargin * 2) {\n // if the element's width is greater than the viewport's width minus the\n // margin on both sides, just make the element span the entire viewport with\n // the margin\n return {\n left: vwMargin,\n right: vwMargin,\n actualX: x,\n };\n }\n\n if (width === \"min\" || width === \"equal\") {\n return createEqualWidth({\n x,\n vwMargin,\n xMargin,\n elWidth,\n initialX,\n containerRect,\n screenRight,\n isMinWidth: width === \"min\",\n });\n }\n\n const config: HorizontalFixConfig = {\n vwMargin,\n xMargin,\n elWidth,\n initialX,\n screenRight,\n containerRect,\n disableSwapping,\n };\n\n switch (x) {\n case \"left\":\n return createAnchoredLeft(config);\n case \"inner-left\":\n return createAnchoredInnerLeft(config);\n case \"center\":\n return createAnchoredHorizontalCenter(config);\n case \"inner-right\":\n return createAnchoredInnerRight(config);\n case \"right\":\n return createAnchoredRight(config);\n }\n}\n"],"names":["getCenterXCoord","getInnerLeftCoord","getInnerRightCoord","getLeftCoord","getRightCoord","createAnchoredLeft","config","vwMargin","screenRight","elWidth","disableSwapping","left","actualX","swappedLeft","createAnchoredInnerLeft","createAnchoredHorizontalCenter","createAnchoredInnerRight","Math","min","max","createAnchoredRight","createEqualWidth","options","x","xMargin","initialX","containerRect","isMinWidth","width","minWidth","right","undefined","elRight","createHorizontalPosition","vw"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/positioning/createVerticalPosition.ts"],"sourcesContent":["import { type FixedPositionOptions, type VerticalPosition } from \"./types.js\";\nimport {\n type YCoordConfig,\n getAboveCoord,\n getBelowCoord,\n getBottomCoord,\n getCenterYCoord,\n getTopCoord,\n} from \"./utils.js\";\n\n/** @internal */\ninterface YPosition {\n top: number;\n bottom?: number;\n actualY: VerticalPosition;\n /** @since 5.1.6 */\n transformOriginY?: number;\n}\n\n/** @internal */\nexport interface VerticalFixConfig extends YCoordConfig {\n vhMargin: number;\n screenBottom: number;\n preventOverlap: boolean;\n disableSwapping: boolean;\n disableVHBounds: boolean;\n}\n\n/** @internal */\nexport interface CreateVerticalPositionOptions\n extends Required<\n Pick<\n FixedPositionOptions,\n | \"yMargin\"\n | \"vhMargin\"\n | \"preventOverlap\"\n | \"disableSwapping\"\n | \"disableVHBounds\"\n >\n > {\n y: VerticalPosition;\n vh: number;\n initialY?: number;\n elHeight: number;\n containerRect: DOMRect;\n}\n\n/**\n * Attempts to position the fixed element so that it will appear completely\n * above the container element but also within the viewport boundaries. When\n * swapping is enabled, it will attempt to swap to the below position if it\n * can't fit within the viewport above the container element. If it can't fit in\n * the viewport even after being swapped below or swapping is disabled, it will\n * be positioned to the top viewport boundary.\n *\n * @internal\n */\nexport function createAnchoredAbove(config: VerticalFixConfig): YPosition {\n const {\n yMargin,\n vhMargin,\n screenBottom,\n elHeight,\n containerRect,\n preventOverlap,\n disableSwapping,\n disableVHBounds,\n } = config;\n let top = getAboveCoord(config);\n let actualY: VerticalPosition = \"above\";\n\n if (disableVHBounds) {\n // can't actually allow a top value as a negative number since browsers\n // won't scroll upwards past the normal page top\n return { actualY, top: Math.max(0, top) };\n }\n\n if (top > vhMargin) {\n // don't need to do anything else since the top is still in the viewport and\n // since it's positioned above, we already know it can't overlap the\n // container element\n return { actualY, top };\n }\n\n const swappedTop = getBelowCoord(config);\n if (disableSwapping || swappedTop + elHeight > screenBottom) {\n top = Math.min(top, vhMargin);\n } else {\n actualY = \"below\";\n top = swappedTop;\n }\n\n let bottom: number | undefined;\n if (\n preventOverlap &&\n // can't overlap if it's positioned below\n actualY === \"above\" &&\n top + elHeight > containerRect.top\n ) {\n bottom = screenBottom - containerRect.top + yMargin;\n }\n\n return { actualY, top, bottom };\n}\n\n/**\n * Attempts to position the fixed element so that it will appear fixed to the\n * top of the container element but also within the viewport boundaries. When\n * swapping is enabled, it will attempt to swap to the bottom position if it\n * can't fit within the viewport. If it can't fit in the viewport even after\n * being swapped to the bottom position or swapping is disabled, it will be\n * positioned to the top viewport boundary.\n *\n * @internal\n */\nexport function createAnchoredTop(config: VerticalFixConfig): YPosition {\n const { vhMargin, screenBottom, elHeight, disableSwapping, disableVHBounds } =\n config;\n let top = getTopCoord(config);\n let actualY: VerticalPosition = \"top\";\n\n if (disableVHBounds || top + elHeight <= screenBottom) {\n return { actualY, top };\n }\n\n const swappedTop = getBottomCoord(config);\n if (disableSwapping || swappedTop < vhMargin) {\n top = Math.max(top, vhMargin);\n } else {\n actualY = \"bottom\";\n top = swappedTop;\n }\n\n return { actualY, top };\n}\n\n/**\n * Attempts to position the fixed element so that it will appear at the center\n * of the container element but also within the viewport boundaries. If the\n * entered element can't fit within the viewport, it'll update the top value\n * to either be the vhMargin or position to the screen bottom boundary\n *\n * @internal\n */\nexport function createAnchoredVerticalCenter(\n config: VerticalFixConfig\n): YPosition {\n const { vhMargin, screenBottom, elHeight, disableVHBounds } = config;\n let top = getCenterYCoord(config);\n const actualY: VerticalPosition = \"center\";\n if (disableVHBounds) {\n return { actualY, top: Math.max(0, top) };\n }\n\n top = Math.max(vhMargin, top);\n if (top + elHeight > screenBottom) {\n top = screenBottom - elHeight;\n }\n\n return { actualY, top };\n}\n\n/**\n * Attempts to position the fixed element so that it will appear fixed to the\n * bottom of the container element but also within the viewport boundaries. When\n * swapping is enabled, it will attempt to swap to the top position if it can't\n * fit within the viewport. If it can't fit in the viewport even after being\n * swapped to the top position or swapping is disabled, it will be positioned to\n * the bottom viewport boundary.\n *\n * @internal\n */\nexport function createAnchoredBottom(config: VerticalFixConfig): YPosition {\n const { vhMargin, screenBottom, elHeight, disableSwapping, disableVHBounds } =\n config;\n let top = getBottomCoord(config);\n let actualY: VerticalPosition = \"bottom\";\n if (disableVHBounds || top > vhMargin) {\n return { actualY, top };\n }\n\n const swappedTop = getTopCoord(config);\n if (disableSwapping || swappedTop + elHeight > screenBottom) {\n top = Math.min(top, screenBottom - elHeight);\n } else {\n actualY = \"top\";\n top = swappedTop;\n }\n\n return { actualY, top };\n}\n\n/**\n * Attempts to position the fixed element so that it will appear completely\n * below the container element but also within the viewport boundaries. When\n * swapping is enabled, it will attempt to swap to the above position if it\n * can't fit within the viewport below the container element. If it can't fit in\n * the viewport even after being swapped above or swapping is disabled, it will\n * be positioned to the bottom viewport boundary.\n *\n * @internal\n */\nexport function createAnchoredBelow(config: VerticalFixConfig): YPosition {\n const {\n yMargin,\n vhMargin,\n elHeight,\n screenBottom,\n containerRect,\n preventOverlap,\n disableSwapping,\n disableVHBounds,\n } = config;\n let top = getBelowCoord(config);\n let actualY: VerticalPosition = \"below\";\n if (disableVHBounds || top + elHeight <= screenBottom) {\n return { actualY, top };\n }\n\n if (preventOverlap) {\n const availableTop = containerRect.top - yMargin;\n if (disableSwapping || availableTop < screenBottom - top) {\n return {\n actualY,\n top,\n bottom: vhMargin,\n };\n }\n\n return {\n actualY: \"above\",\n top: Math.max(vhMargin, availableTop - elHeight),\n // this makes it so that the bottom of the fixed element is the top of the container\n // element. this ensures that it won't ever overlap the container element\n bottom: window.innerHeight - availableTop,\n };\n }\n\n const swappedTop = getAboveCoord(config);\n if (disableSwapping || swappedTop < vhMargin) {\n top = Math.min(top, screenBottom - elHeight);\n } else {\n actualY = \"above\";\n top = swappedTop;\n }\n\n return { actualY, top };\n}\n\n/**\n * Creates the vertical position for a fixed element with the provided options.\n *\n * @internal\n */\nexport function createVerticalPosition(\n options: CreateVerticalPositionOptions\n): YPosition {\n const {\n y,\n vh,\n vhMargin,\n yMargin,\n elHeight,\n initialY,\n containerRect,\n disableSwapping,\n preventOverlap,\n disableVHBounds,\n } = options;\n\n if (!disableVHBounds && !preventOverlap && elHeight > vh - vhMargin * 2) {\n // the element is too big to be displayed in the viewport, so just span the\n // full viewport excluding margins\n return {\n top: vhMargin,\n bottom: vhMargin,\n actualY: \"center\",\n transformOriginY: containerRect.top,\n };\n }\n\n const config: VerticalFixConfig = {\n vhMargin,\n yMargin,\n elHeight,\n initialY,\n containerRect,\n screenBottom: vh - vhMargin,\n preventOverlap,\n disableSwapping,\n disableVHBounds,\n };\n\n switch (y) {\n case \"above\":\n return createAnchoredAbove(config);\n case \"top\":\n return createAnchoredTop(config);\n case \"center\":\n return createAnchoredVerticalCenter(config);\n case \"bottom\":\n return createAnchoredBottom(config);\n case \"below\":\n return createAnchoredBelow(config);\n }\n}\n"],"names":["getAboveCoord","getBelowCoord","getBottomCoord","getCenterYCoord","getTopCoord","createAnchoredAbove","config","yMargin","vhMargin","screenBottom","elHeight","containerRect","preventOverlap","disableSwapping","disableVHBounds","top","actualY","Math","max","swappedTop","min","bottom","createAnchoredTop","createAnchoredVerticalCenter","createAnchoredBottom","createAnchoredBelow","availableTop","window","innerHeight","createVerticalPosition","options","y","vh","initialY","transformOriginY"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../src/positioning/createVerticalPosition.ts"],"sourcesContent":["import { type FixedPositionOptions, type VerticalPosition } from \"./types.js\";\nimport {\n type YCoordConfig,\n getAboveCoord,\n getBelowCoord,\n getBottomCoord,\n getCenterYCoord,\n getTopCoord,\n} from \"./utils.js\";\n\n/** @internal */\ninterface YPosition {\n top: number;\n bottom?: number;\n actualY: VerticalPosition;\n /** @since 5.1.6 */\n transformOriginY?: number;\n}\n\n/** @internal */\nexport interface VerticalFixConfig extends YCoordConfig {\n vhMargin: number;\n screenBottom: number;\n preventOverlap: boolean;\n disableSwapping: boolean;\n disableVHBounds: boolean;\n}\n\n/** @internal */\nexport interface CreateVerticalPositionOptions extends Required<\n Pick<\n FixedPositionOptions,\n | \"yMargin\"\n | \"vhMargin\"\n | \"preventOverlap\"\n | \"disableSwapping\"\n | \"disableVHBounds\"\n >\n> {\n y: VerticalPosition;\n vh: number;\n initialY?: number;\n elHeight: number;\n containerRect: DOMRect;\n}\n\n/**\n * Attempts to position the fixed element so that it will appear completely\n * above the container element but also within the viewport boundaries. When\n * swapping is enabled, it will attempt to swap to the below position if it\n * can't fit within the viewport above the container element. If it can't fit in\n * the viewport even after being swapped below or swapping is disabled, it will\n * be positioned to the top viewport boundary.\n *\n * @internal\n */\nexport function createAnchoredAbove(config: VerticalFixConfig): YPosition {\n const {\n yMargin,\n vhMargin,\n screenBottom,\n elHeight,\n containerRect,\n preventOverlap,\n disableSwapping,\n disableVHBounds,\n } = config;\n let top = getAboveCoord(config);\n let actualY: VerticalPosition = \"above\";\n\n if (disableVHBounds) {\n // can't actually allow a top value as a negative number since browsers\n // won't scroll upwards past the normal page top\n return { actualY, top: Math.max(0, top) };\n }\n\n if (top > vhMargin) {\n // don't need to do anything else since the top is still in the viewport and\n // since it's positioned above, we already know it can't overlap the\n // container element\n return { actualY, top };\n }\n\n const swappedTop = getBelowCoord(config);\n if (disableSwapping || swappedTop + elHeight > screenBottom) {\n top = Math.min(top, vhMargin);\n } else {\n actualY = \"below\";\n top = swappedTop;\n }\n\n let bottom: number | undefined;\n if (\n preventOverlap &&\n // can't overlap if it's positioned below\n actualY === \"above\" &&\n top + elHeight > containerRect.top\n ) {\n bottom = screenBottom - containerRect.top + yMargin;\n }\n\n return { actualY, top, bottom };\n}\n\n/**\n * Attempts to position the fixed element so that it will appear fixed to the\n * top of the container element but also within the viewport boundaries. When\n * swapping is enabled, it will attempt to swap to the bottom position if it\n * can't fit within the viewport. If it can't fit in the viewport even after\n * being swapped to the bottom position or swapping is disabled, it will be\n * positioned to the top viewport boundary.\n *\n * @internal\n */\nexport function createAnchoredTop(config: VerticalFixConfig): YPosition {\n const { vhMargin, screenBottom, elHeight, disableSwapping, disableVHBounds } =\n config;\n let top = getTopCoord(config);\n let actualY: VerticalPosition = \"top\";\n\n if (disableVHBounds || top + elHeight <= screenBottom) {\n return { actualY, top };\n }\n\n const swappedTop = getBottomCoord(config);\n if (disableSwapping || swappedTop < vhMargin) {\n top = Math.max(top, vhMargin);\n } else {\n actualY = \"bottom\";\n top = swappedTop;\n }\n\n return { actualY, top };\n}\n\n/**\n * Attempts to position the fixed element so that it will appear at the center\n * of the container element but also within the viewport boundaries. If the\n * entered element can't fit within the viewport, it'll update the top value\n * to either be the vhMargin or position to the screen bottom boundary\n *\n * @internal\n */\nexport function createAnchoredVerticalCenter(\n config: VerticalFixConfig\n): YPosition {\n const { vhMargin, screenBottom, elHeight, disableVHBounds } = config;\n let top = getCenterYCoord(config);\n const actualY: VerticalPosition = \"center\";\n if (disableVHBounds) {\n return { actualY, top: Math.max(0, top) };\n }\n\n top = Math.max(vhMargin, top);\n if (top + elHeight > screenBottom) {\n top = screenBottom - elHeight;\n }\n\n return { actualY, top };\n}\n\n/**\n * Attempts to position the fixed element so that it will appear fixed to the\n * bottom of the container element but also within the viewport boundaries. When\n * swapping is enabled, it will attempt to swap to the top position if it can't\n * fit within the viewport. If it can't fit in the viewport even after being\n * swapped to the top position or swapping is disabled, it will be positioned to\n * the bottom viewport boundary.\n *\n * @internal\n */\nexport function createAnchoredBottom(config: VerticalFixConfig): YPosition {\n const { vhMargin, screenBottom, elHeight, disableSwapping, disableVHBounds } =\n config;\n let top = getBottomCoord(config);\n let actualY: VerticalPosition = \"bottom\";\n if (disableVHBounds || top > vhMargin) {\n return { actualY, top };\n }\n\n const swappedTop = getTopCoord(config);\n if (disableSwapping || swappedTop + elHeight > screenBottom) {\n top = Math.min(top, screenBottom - elHeight);\n } else {\n actualY = \"top\";\n top = swappedTop;\n }\n\n return { actualY, top };\n}\n\n/**\n * Attempts to position the fixed element so that it will appear completely\n * below the container element but also within the viewport boundaries. When\n * swapping is enabled, it will attempt to swap to the above position if it\n * can't fit within the viewport below the container element. If it can't fit in\n * the viewport even after being swapped above or swapping is disabled, it will\n * be positioned to the bottom viewport boundary.\n *\n * @internal\n */\nexport function createAnchoredBelow(config: VerticalFixConfig): YPosition {\n const {\n yMargin,\n vhMargin,\n elHeight,\n screenBottom,\n containerRect,\n preventOverlap,\n disableSwapping,\n disableVHBounds,\n } = config;\n let top = getBelowCoord(config);\n let actualY: VerticalPosition = \"below\";\n if (disableVHBounds || top + elHeight <= screenBottom) {\n return { actualY, top };\n }\n\n if (preventOverlap) {\n const availableTop = containerRect.top - yMargin;\n if (disableSwapping || availableTop < screenBottom - top) {\n return {\n actualY,\n top,\n bottom: vhMargin,\n };\n }\n\n return {\n actualY: \"above\",\n top: Math.max(vhMargin, availableTop - elHeight),\n // this makes it so that the bottom of the fixed element is the top of the container\n // element. this ensures that it won't ever overlap the container element\n bottom: window.innerHeight - availableTop,\n };\n }\n\n const swappedTop = getAboveCoord(config);\n if (disableSwapping || swappedTop < vhMargin) {\n top = Math.min(top, screenBottom - elHeight);\n } else {\n actualY = \"above\";\n top = swappedTop;\n }\n\n return { actualY, top };\n}\n\n/**\n * Creates the vertical position for a fixed element with the provided options.\n *\n * @internal\n */\nexport function createVerticalPosition(\n options: CreateVerticalPositionOptions\n): YPosition {\n const {\n y,\n vh,\n vhMargin,\n yMargin,\n elHeight,\n initialY,\n containerRect,\n disableSwapping,\n preventOverlap,\n disableVHBounds,\n } = options;\n\n if (!disableVHBounds && !preventOverlap && elHeight > vh - vhMargin * 2) {\n // the element is too big to be displayed in the viewport, so just span the\n // full viewport excluding margins\n return {\n top: vhMargin,\n bottom: vhMargin,\n actualY: \"center\",\n transformOriginY: containerRect.top,\n };\n }\n\n const config: VerticalFixConfig = {\n vhMargin,\n yMargin,\n elHeight,\n initialY,\n containerRect,\n screenBottom: vh - vhMargin,\n preventOverlap,\n disableSwapping,\n disableVHBounds,\n };\n\n switch (y) {\n case \"above\":\n return createAnchoredAbove(config);\n case \"top\":\n return createAnchoredTop(config);\n case \"center\":\n return createAnchoredVerticalCenter(config);\n case \"bottom\":\n return createAnchoredBottom(config);\n case \"below\":\n return createAnchoredBelow(config);\n }\n}\n"],"names":["getAboveCoord","getBelowCoord","getBottomCoord","getCenterYCoord","getTopCoord","createAnchoredAbove","config","yMargin","vhMargin","screenBottom","elHeight","containerRect","preventOverlap","disableSwapping","disableVHBounds","top","actualY","Math","max","swappedTop","min","bottom","createAnchoredTop","createAnchoredVerticalCenter","createAnchoredBottom","createAnchoredBelow","availableTop","window","innerHeight","createVerticalPosition","options","y","vh","initialY","transformOriginY"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/positioning/useFixedPositioning.ts"],"sourcesContent":["\"use client\";\n\nimport {\n type CSSProperties,\n type Ref,\n type RefCallback,\n type RefObject,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\n\nimport { delegateEvent } from \"../delegateEvent.js\";\nimport { type TransitionCallbacks } from \"../transition/types.js\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport { useIsomorphicLayoutEffect } from \"../useIsomorphicLayoutEffect.js\";\nimport { BELOW_CENTER_ANCHOR } from \"./constants.js\";\nimport { getFixedPosition } from \"./getFixedPosition.js\";\nimport {\n type CalculateFixedPositionOptions,\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n type FixedPositionStyle,\n} from \"./types.js\";\nimport { isWithinViewport } from \"./utils.js\";\n\nconst noop = (): undefined => undefined;\n\n/**\n * @since 4.0.0\n */\nexport type FixedPositioningTransitionCallbacks = Pick<\n TransitionCallbacks,\n \"onEnter\" | \"onEntering\" | \"onEntered\" | \"onExited\"\n>;\n\n/**\n * This options should be passed to the {@link useCSSTransition} for the styling\n * and positioning to work correctly.\n *\n * @typeParam E - An HTMLElement type used for the ref required for the\n * transition.\n * @since 4.0.0\n */\nexport interface FixedPositioningTransitionOptions<E extends HTMLElement>\n extends FixedPositioningTransitionCallbacks {\n /** {@inheritDoc TransitionOptions.nodeRef} */\n nodeRef?: Ref<E>;\n}\n\n/**\n * @typeParam FixedToElement - An HTMLElement type for the static element.\n * @typeParam FixedElement - An HTMLElement type for the fixed element.\n * @since 4.0.0\n */\nexport interface FixedPositioningScrollData<\n FixedToElement extends HTMLElement,\n FixedElement extends HTMLElement,\n> {\n fixedElement: FixedElement;\n fixedToElement: FixedToElement;\n\n /**\n * Boolean if the {@link fixedToElement} is visible within the viewport.\n */\n visible: boolean;\n}\n\n/**\n * This function is called when the page is scrolled while the fixed element is\n * visible. This is generally used to reposition the fixed element or hide it if\n * it is no longer visible within the viewport.\n *\n * @typeParam FixedToElement - An HTMLElement type for the static element.\n * @typeParam FixedElement - An HTMLElement type for the fixed element.\n * @param event - The scroll event\n * @param data - The {@link FixedPositioningScrollData} that can be used for\n * custom scroll behavior.\n * @since 4.0.0\n */\nexport type TransitionScrollCallback<\n FixedToElement extends HTMLElement,\n FixedElement extends HTMLElement,\n> = (\n event: Event,\n data: Readonly<FixedPositioningScrollData<FixedToElement, FixedElement>>\n) => void;\n\n/**\n * @typeParam FixedToElement - An HTMLElement type for the static element.\n * @typeParam FixedElement - An HTMLElement type for the fixed element.\n * @since 4.0.0\n */\nexport interface FixedPositioningOptions<\n FixedToElement extends HTMLElement,\n FixedElement extends HTMLElement,\n> extends FixedPositioningTransitionOptions<FixedElement>,\n CalculateFixedPositionOptions {\n /**\n * An optional style that will be merged with the fixed positioning required\n * styles.\n *\n * @see {@link FixedPositionStyle}\n */\n style?: CSSProperties;\n\n /**\n * A ref pointing to an element that another element should be fixed to. This\n * **must** be provided for the positioning to work.\n */\n fixedTo: RefObject<FixedToElement>;\n\n /**\n * An optional function that can be used to override positioning options if\n * some options require the element to be in the DOM for specific\n * calculations.\n */\n getFixedPositionOptions?: () => CalculateFixedPositionOptions;\n\n /**\n * An optional function to call if the page resizes while the `FixedElement`\n * is visible.\n */\n onResize?: EventListener;\n /** @see {@link TransitionScrollCallback} */\n onScroll?: TransitionScrollCallback<FixedToElement, FixedElement>;\n\n /**\n * Set this to `true` to disable the fixed positioning behavior so it can be\n * customized within CSS or manually instead. This was added mostly to just\n * support rendering menus inline with other content (like autocompletes\n * within a dialog).\n *\n * @defaultValue `false`\n * @since 6.0.0\n */\n disabled?: boolean;\n}\n\n/**\n * @typeParam E - An HTMLElement type for the fixed element.\n * @since 4.0.0\n * @since 6.0.0 Renamed from `FixedPositioningHookReturnValue` to\n * `FixedPositioningImplementation` to match naming conventions.\n */\nexport interface FixedPositioningImplementation<E extends HTMLElement> {\n /**\n * A ref that should be passed to a component for the fixed positioning\n * behavior to work correctly.\n *\n * This should really only be used if the {@link TransitionOptions} is not\n * being used.\n */\n ref: RefCallback<E>;\n\n /**\n * This is the {@link FixedPositionStyle} merged with the\n * {@link FixedPositioningOptions.style}. This will only return `undefined`\n * when {@link FixedPositioningOptions.disabled} is `true` and no `style` was\n * provided.\n */\n style: CSSProperties | undefined;\n\n /**\n * This should really only be used if the {@link transitionOptions} is not\n * being used.\n */\n callbacks: Readonly<Required<FixedPositioningTransitionCallbacks>>;\n\n /**\n * A function that can be called to update the style for the fixed element.\n */\n updateStyle: () => void;\n\n /** {@inheritDoc FixedPositioningTransitionOptions} */\n transitionOptions: Readonly<Required<FixedPositioningTransitionOptions<E>>>;\n}\n\n/**\n * This hook is used to attach a temporary (fixed) element to another element\n * within the page. In other words, this is a way to have an element with\n * `position: fixed` as if it were `position: absolute` to a parent element that\n * had `position: relative`.\n *\n * @example Simple Example\n * ```tsx\n * \"use client\";\n *\n * import { Button } from \"@react-md/core/button/Button\";\n * import { useFixedPositioning } from \"@react-md/core/positioning/useFixedPositioning\";\n * import { useCSSTransition } from \"@react-md/core/transition/useCSSTransition\";\n * import { type ReactElement, useRef, useState } from \"react\";\n *\n * function Example(): ReactElement {\n * const fixedTo = useRef<HTMLButtonElement>(null);\n * const [transitionIn, setTransitionIn] = useState(false);\n * const { style, transitionOptions } = useFixedPositioning({\n * fixedTo,\n * });\n * const { elementProps, rendered } = useCSSTransition({\n * ...transitionOptions,\n * transitionIn,\n * temporary: true,\n * timeout: {\n * enter: 200,\n * exit: 150,\n * },\n * classNames: {\n * enter: \"enter\",\n * enterActive: \"enter--active\",\n * exit: \"exit\",\n * exitActive: \"exit--active\",\n * },\n * });\n *\n * return (\n * <>\n * <Button ref={fixedTo} onClick={() => setTransitionIn(!transitionIn)}>\n * Toggle\n * </Button>\n * {rendered && (\n * <div {...elementProps} style={style}>\n * Fixed Temporary Element\n * </div>\n * )}\n * </>\n * );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/hooks/use-fixed-positioning | useFixedPositioning Demos}\n * @typeParam FixedToElement - An HTMLElement type for the static element.\n * @typeParam FixedElement - An HTMLElement type for the fixed element.\n * @since 4.0.0\n */\nexport function useFixedPositioning<\n FixedToElement extends HTMLElement,\n FixedElement extends HTMLElement,\n>(\n options: FixedPositioningOptions<FixedToElement, FixedElement>\n): FixedPositioningImplementation<FixedElement> {\n const {\n style: propStyle,\n nodeRef,\n fixedTo,\n disabled,\n onEnter = noop,\n onEntering = noop,\n onEntered = noop,\n onExited = noop,\n anchor = BELOW_CENTER_ANCHOR,\n disableSwapping,\n disableVHBounds,\n initialX,\n initialY,\n preventOverlap,\n transformOrigin,\n vhMargin,\n vwMargin,\n width,\n xMargin,\n yMargin,\n getFixedPositionOptions = noop,\n onScroll,\n onResize = noop,\n } = options;\n\n const [active, setActive] = useState(false);\n const [ref, refHandler] = useEnsuredRef(nodeRef);\n const optionsRef = useRef({\n ref,\n fixedTo,\n anchor,\n disableSwapping,\n disableVHBounds,\n preventOverlap,\n transformOrigin,\n vhMargin,\n vwMargin,\n width,\n xMargin,\n yMargin,\n getFixedPositionOptions,\n } as const);\n useIsomorphicLayoutEffect(() => {\n optionsRef.current = {\n ref,\n fixedTo,\n anchor,\n disableSwapping,\n disableVHBounds,\n preventOverlap,\n transformOrigin,\n vhMargin,\n vwMargin,\n width,\n xMargin,\n yMargin,\n getFixedPositionOptions,\n };\n }, [\n ref,\n fixedTo,\n anchor,\n disableSwapping,\n disableVHBounds,\n preventOverlap,\n transformOrigin,\n vhMargin,\n vwMargin,\n width,\n xMargin,\n yMargin,\n getFixedPositionOptions,\n ]);\n const [style, setStyle] = useState<CSSProperties | undefined>(\n () =>\n getFixedPosition({\n container: ref.current,\n element: fixedTo.current,\n anchor,\n disableSwapping,\n disableVHBounds,\n initialX,\n initialY,\n preventOverlap,\n transformOrigin,\n vhMargin,\n vwMargin,\n width,\n xMargin,\n yMargin,\n ...getFixedPositionOptions(),\n }).style\n );\n\n const updateStyle = useCallback(() => {\n if (disabled) {\n return;\n }\n\n const {\n ref,\n fixedTo,\n anchor,\n disableSwapping,\n disableVHBounds,\n preventOverlap,\n transformOrigin,\n vhMargin,\n vwMargin,\n width,\n xMargin,\n yMargin,\n getFixedPositionOptions,\n } = optionsRef.current;\n const element = ref.current;\n const container = fixedTo.current;\n const { style } = getFixedPosition({\n container,\n element,\n anchor,\n disableSwapping,\n disableVHBounds,\n initialX,\n initialY,\n preventOverlap,\n transformOrigin,\n vhMargin,\n vwMargin,\n width,\n xMargin,\n yMargin,\n ...getFixedPositionOptions(),\n });\n\n setStyle(style);\n setActive(!!element && !element.hidden);\n\n // Only changing the initialX, initialY, or disabled should cause the\n // useEffect below to trigger, which is why everything else is set in a ref.\n }, [disabled, initialX, initialY]);\n\n useEffect(() => {\n if (!active || disabled) {\n return;\n }\n\n const resizeCallback = (event: Event): void => {\n onResize(event);\n updateStyle();\n };\n const scrollCallback = (event: Event): void => {\n const fixedElement = ref.current;\n const fixedToElement = fixedTo.current;\n if (onScroll && fixedElement && fixedToElement) {\n onScroll(event, {\n visible: isWithinViewport({ fixedElement, fixedToElement }),\n fixedElement,\n fixedToElement,\n });\n }\n\n updateStyle();\n };\n\n const resizeHandler = delegateEvent(\"resize\", window, true);\n const scrollHandler = delegateEvent(\"scroll\", window, true, {\n passive: true,\n });\n resizeHandler.add(resizeCallback);\n scrollHandler.add(scrollCallback);\n return () => {\n resizeHandler.remove(resizeCallback);\n scrollHandler.remove(scrollCallback);\n };\n }, [active, disabled, fixedTo, onResize, onScroll, ref, updateStyle]);\n\n const callbacks: Required<FixedPositioningTransitionCallbacks> = {\n onEnter(appearing) {\n onEnter(appearing);\n updateStyle();\n },\n onEntering(appearing) {\n onEntering(appearing);\n updateStyle();\n },\n onEntered(appearing) {\n onEntered(appearing);\n updateStyle();\n },\n onExited() {\n onExited();\n setActive(false);\n },\n };\n\n return {\n ref: refHandler,\n style: disabled ? propStyle : { ...style, ...propStyle },\n callbacks,\n updateStyle,\n transitionOptions: {\n ...callbacks,\n nodeRef: refHandler,\n },\n };\n}\n"],"names":["useCallback","useEffect","useRef","useState","delegateEvent","useEnsuredRef","useIsomorphicLayoutEffect","BELOW_CENTER_ANCHOR","getFixedPosition","isWithinViewport","noop","undefined","useFixedPositioning","options","style","propStyle","nodeRef","fixedTo","disabled","onEnter","onEntering","onEntered","onExited","anchor","disableSwapping","disableVHBounds","initialX","initialY","preventOverlap","transformOrigin","vhMargin","vwMargin","width","xMargin","yMargin","getFixedPositionOptions","onScroll","onResize","active","setActive","ref","refHandler","optionsRef","current","setStyle","container","element","updateStyle","hidden","resizeCallback","event","scrollCallback","fixedElement","fixedToElement","visible","resizeHandler","window","scrollHandler","passive","add","remove","callbacks","appearing","transitionOptions"],"mappings":"AAAA;AAEA,SAKEA,WAAW,EACXC,SAAS,EACTC,MAAM,EACNC,QAAQ,QACH,QAAQ;AAEf,SAASC,aAAa,QAAQ,sBAAsB;AAEpD,SAASC,aAAa,QAAQ,sBAAsB;AACpD,SAASC,yBAAyB,QAAQ,kCAAkC;AAC5E,SAASC,mBAAmB,QAAQ,iBAAiB;AACrD,SAASC,gBAAgB,QAAQ,wBAAwB;AAMzD,SAASC,gBAAgB,QAAQ,aAAa;AAE9C,MAAMC,OAAO,IAAiBC;AAwJ9B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwDC,GACD,OAAO,SAASC,oBAIdC,OAA8D;IAE9D,MAAM,EACJC,OAAOC,SAAS,EAChBC,OAAO,EACPC,OAAO,EACPC,QAAQ,EACRC,UAAUT,IAAI,EACdU,aAAaV,IAAI,EACjBW,YAAYX,IAAI,EAChBY,WAAWZ,IAAI,EACfa,SAAShB,mBAAmB,EAC5BiB,eAAe,EACfC,eAAe,EACfC,QAAQ,EACRC,QAAQ,EACRC,cAAc,EACdC,eAAe,EACfC,QAAQ,EACRC,QAAQ,EACRC,KAAK,EACLC,OAAO,EACPC,OAAO,EACPC,0BAA0BzB,IAAI,EAC9B0B,QAAQ,EACRC,WAAW3B,IAAI,EAChB,GAAGG;IAEJ,MAAM,CAACyB,QAAQC,UAAU,GAAGpC,SAAS;IACrC,MAAM,CAACqC,KAAKC,WAAW,GAAGpC,cAAcW;IACxC,MAAM0B,aAAaxC,OAAO;QACxBsC;QACAvB;QACAM;QACAC;QACAC;QACAG;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;IACF;IACA7B,0BAA0B;QACxBoC,WAAWC,OAAO,GAAG;YACnBH;YACAvB;YACAM;YACAC;YACAC;YACAG;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;QACF;IACF,GAAG;QACDK;QACAvB;QACAM;QACAC;QACAC;QACAG;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;KACD;IACD,MAAM,CAACrB,OAAO8B,SAAS,GAAGzC,SACxB,IACEK,iBAAiB;YACfqC,WAAWL,IAAIG,OAAO;YACtBG,SAAS7B,QAAQ0B,OAAO;YACxBpB;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACA,GAAGC,yBAAyB;QAC9B,GAAGrB,KAAK;IAGZ,MAAMiC,cAAc/C,YAAY;QAC9B,IAAIkB,UAAU;YACZ;QACF;QAEA,MAAM,EACJsB,GAAG,EACHvB,OAAO,EACPM,MAAM,EACNC,eAAe,EACfC,eAAe,EACfG,cAAc,EACdC,eAAe,EACfC,QAAQ,EACRC,QAAQ,EACRC,KAAK,EACLC,OAAO,EACPC,OAAO,EACPC,uBAAuB,EACxB,GAAGO,WAAWC,OAAO;QACtB,MAAMG,UAAUN,IAAIG,OAAO;QAC3B,MAAME,YAAY5B,QAAQ0B,OAAO;QACjC,MAAM,EAAE7B,KAAK,EAAE,GAAGN,iBAAiB;YACjCqC;YACAC;YACAvB;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACA,GAAGC,yBAAyB;QAC9B;QAEAS,SAAS9B;QACTyB,UAAU,CAAC,CAACO,WAAW,CAACA,QAAQE,MAAM;IAEtC,qEAAqE;IACrE,4EAA4E;IAC9E,GAAG;QAAC9B;QAAUQ;QAAUC;KAAS;IAEjC1B,UAAU;QACR,IAAI,CAACqC,UAAUpB,UAAU;YACvB;QACF;QAEA,MAAM+B,iBAAiB,CAACC;YACtBb,SAASa;YACTH;QACF;QACA,MAAMI,iBAAiB,CAACD;YACtB,MAAME,eAAeZ,IAAIG,OAAO;YAChC,MAAMU,iBAAiBpC,QAAQ0B,OAAO;YACtC,IAAIP,YAAYgB,gBAAgBC,gBAAgB;gBAC9CjB,SAASc,OAAO;oBACdI,SAAS7C,iBAAiB;wBAAE2C;wBAAcC;oBAAe;oBACzDD;oBACAC;gBACF;YACF;YAEAN;QACF;QAEA,MAAMQ,gBAAgBnD,cAAc,UAAUoD,QAAQ;QACtD,MAAMC,gBAAgBrD,cAAc,UAAUoD,QAAQ,MAAM;YAC1DE,SAAS;QACX;QACAH,cAAcI,GAAG,CAACV;QAClBQ,cAAcE,GAAG,CAACR;QAClB,OAAO;YACLI,cAAcK,MAAM,CAACX;YACrBQ,cAAcG,MAAM,CAACT;QACvB;IACF,GAAG;QAACb;QAAQpB;QAAUD;QAASoB;QAAUD;QAAUI;QAAKO;KAAY;IAEpE,MAAMc,YAA2D;QAC/D1C,SAAQ2C,SAAS;YACf3C,QAAQ2C;YACRf;QACF;QACA3B,YAAW0C,SAAS;YAClB1C,WAAW0C;YACXf;QACF;QACA1B,WAAUyC,SAAS;YACjBzC,UAAUyC;YACVf;QACF;QACAzB;YACEA;YACAiB,UAAU;QACZ;IACF;IAEA,OAAO;QACLC,KAAKC;QACL3B,OAAOI,WAAWH,YAAY;YAAE,GAAGD,KAAK;YAAE,GAAGC,SAAS;QAAC;QACvD8C;QACAd;QACAgB,mBAAmB;YACjB,GAAGF,SAAS;YACZ7C,SAASyB;QACX;IACF;AACF"}
|
|
1
|
+
{"version":3,"sources":["../../src/positioning/useFixedPositioning.ts"],"sourcesContent":["\"use client\";\n\nimport {\n type CSSProperties,\n type Ref,\n type RefCallback,\n type RefObject,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\n\nimport { delegateEvent } from \"../delegateEvent.js\";\nimport { type TransitionCallbacks } from \"../transition/types.js\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport { useIsomorphicLayoutEffect } from \"../useIsomorphicLayoutEffect.js\";\nimport { BELOW_CENTER_ANCHOR } from \"./constants.js\";\nimport { getFixedPosition } from \"./getFixedPosition.js\";\nimport {\n type CalculateFixedPositionOptions,\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n type FixedPositionStyle,\n} from \"./types.js\";\nimport { isWithinViewport } from \"./utils.js\";\n\nconst noop = (): undefined => undefined;\n\n/**\n * @since 4.0.0\n */\nexport type FixedPositioningTransitionCallbacks = Pick<\n TransitionCallbacks,\n \"onEnter\" | \"onEntering\" | \"onEntered\" | \"onExited\"\n>;\n\n/**\n * This options should be passed to the {@link useCSSTransition} for the styling\n * and positioning to work correctly.\n *\n * @typeParam E - An HTMLElement type used for the ref required for the\n * transition.\n * @since 4.0.0\n */\nexport interface FixedPositioningTransitionOptions<\n E extends HTMLElement,\n> extends FixedPositioningTransitionCallbacks {\n /** {@inheritDoc TransitionOptions.nodeRef} */\n nodeRef?: Ref<E>;\n}\n\n/**\n * @typeParam FixedToElement - An HTMLElement type for the static element.\n * @typeParam FixedElement - An HTMLElement type for the fixed element.\n * @since 4.0.0\n */\nexport interface FixedPositioningScrollData<\n FixedToElement extends HTMLElement,\n FixedElement extends HTMLElement,\n> {\n fixedElement: FixedElement;\n fixedToElement: FixedToElement;\n\n /**\n * Boolean if the {@link fixedToElement} is visible within the viewport.\n */\n visible: boolean;\n}\n\n/**\n * This function is called when the page is scrolled while the fixed element is\n * visible. This is generally used to reposition the fixed element or hide it if\n * it is no longer visible within the viewport.\n *\n * @typeParam FixedToElement - An HTMLElement type for the static element.\n * @typeParam FixedElement - An HTMLElement type for the fixed element.\n * @param event - The scroll event\n * @param data - The {@link FixedPositioningScrollData} that can be used for\n * custom scroll behavior.\n * @since 4.0.0\n */\nexport type TransitionScrollCallback<\n FixedToElement extends HTMLElement,\n FixedElement extends HTMLElement,\n> = (\n event: Event,\n data: Readonly<FixedPositioningScrollData<FixedToElement, FixedElement>>\n) => void;\n\n/**\n * @typeParam FixedToElement - An HTMLElement type for the static element.\n * @typeParam FixedElement - An HTMLElement type for the fixed element.\n * @since 4.0.0\n */\nexport interface FixedPositioningOptions<\n FixedToElement extends HTMLElement,\n FixedElement extends HTMLElement,\n>\n extends\n FixedPositioningTransitionOptions<FixedElement>,\n CalculateFixedPositionOptions {\n /**\n * An optional style that will be merged with the fixed positioning required\n * styles.\n *\n * @see {@link FixedPositionStyle}\n */\n style?: CSSProperties;\n\n /**\n * A ref pointing to an element that another element should be fixed to. This\n * **must** be provided for the positioning to work.\n */\n fixedTo: RefObject<FixedToElement>;\n\n /**\n * An optional function that can be used to override positioning options if\n * some options require the element to be in the DOM for specific\n * calculations.\n */\n getFixedPositionOptions?: () => CalculateFixedPositionOptions;\n\n /**\n * An optional function to call if the page resizes while the `FixedElement`\n * is visible.\n */\n onResize?: EventListener;\n /** @see {@link TransitionScrollCallback} */\n onScroll?: TransitionScrollCallback<FixedToElement, FixedElement>;\n\n /**\n * Set this to `true` to disable the fixed positioning behavior so it can be\n * customized within CSS or manually instead. This was added mostly to just\n * support rendering menus inline with other content (like autocompletes\n * within a dialog).\n *\n * @defaultValue `false`\n * @since 6.0.0\n */\n disabled?: boolean;\n}\n\n/**\n * @typeParam E - An HTMLElement type for the fixed element.\n * @since 4.0.0\n * @since 6.0.0 Renamed from `FixedPositioningHookReturnValue` to\n * `FixedPositioningImplementation` to match naming conventions.\n */\nexport interface FixedPositioningImplementation<E extends HTMLElement> {\n /**\n * A ref that should be passed to a component for the fixed positioning\n * behavior to work correctly.\n *\n * This should really only be used if the {@link TransitionOptions} is not\n * being used.\n */\n ref: RefCallback<E>;\n\n /**\n * This is the {@link FixedPositionStyle} merged with the\n * {@link FixedPositioningOptions.style}. This will only return `undefined`\n * when {@link FixedPositioningOptions.disabled} is `true` and no `style` was\n * provided.\n */\n style: CSSProperties | undefined;\n\n /**\n * This should really only be used if the {@link transitionOptions} is not\n * being used.\n */\n callbacks: Readonly<Required<FixedPositioningTransitionCallbacks>>;\n\n /**\n * A function that can be called to update the style for the fixed element.\n */\n updateStyle: () => void;\n\n /** {@inheritDoc FixedPositioningTransitionOptions} */\n transitionOptions: Readonly<Required<FixedPositioningTransitionOptions<E>>>;\n}\n\n/**\n * This hook is used to attach a temporary (fixed) element to another element\n * within the page. In other words, this is a way to have an element with\n * `position: fixed` as if it were `position: absolute` to a parent element that\n * had `position: relative`.\n *\n * @example Simple Example\n * ```tsx\n * \"use client\";\n *\n * import { Button } from \"@react-md/core/button/Button\";\n * import { useFixedPositioning } from \"@react-md/core/positioning/useFixedPositioning\";\n * import { useCSSTransition } from \"@react-md/core/transition/useCSSTransition\";\n * import { type ReactElement, useRef, useState } from \"react\";\n *\n * function Example(): ReactElement {\n * const fixedTo = useRef<HTMLButtonElement>(null);\n * const [transitionIn, setTransitionIn] = useState(false);\n * const { style, transitionOptions } = useFixedPositioning({\n * fixedTo,\n * });\n * const { elementProps, rendered } = useCSSTransition({\n * ...transitionOptions,\n * transitionIn,\n * temporary: true,\n * timeout: {\n * enter: 200,\n * exit: 150,\n * },\n * classNames: {\n * enter: \"enter\",\n * enterActive: \"enter--active\",\n * exit: \"exit\",\n * exitActive: \"exit--active\",\n * },\n * });\n *\n * return (\n * <>\n * <Button ref={fixedTo} onClick={() => setTransitionIn(!transitionIn)}>\n * Toggle\n * </Button>\n * {rendered && (\n * <div {...elementProps} style={style}>\n * Fixed Temporary Element\n * </div>\n * )}\n * </>\n * );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/hooks/use-fixed-positioning | useFixedPositioning Demos}\n * @typeParam FixedToElement - An HTMLElement type for the static element.\n * @typeParam FixedElement - An HTMLElement type for the fixed element.\n * @since 4.0.0\n */\nexport function useFixedPositioning<\n FixedToElement extends HTMLElement,\n FixedElement extends HTMLElement,\n>(\n options: FixedPositioningOptions<FixedToElement, FixedElement>\n): FixedPositioningImplementation<FixedElement> {\n const {\n style: propStyle,\n nodeRef,\n fixedTo,\n disabled,\n onEnter = noop,\n onEntering = noop,\n onEntered = noop,\n onExited = noop,\n anchor = BELOW_CENTER_ANCHOR,\n disableSwapping,\n disableVHBounds,\n initialX,\n initialY,\n preventOverlap,\n transformOrigin,\n vhMargin,\n vwMargin,\n width,\n xMargin,\n yMargin,\n getFixedPositionOptions = noop,\n onScroll,\n onResize = noop,\n } = options;\n\n const [active, setActive] = useState(false);\n const [ref, refHandler] = useEnsuredRef(nodeRef);\n const optionsRef = useRef({\n ref,\n fixedTo,\n anchor,\n disableSwapping,\n disableVHBounds,\n preventOverlap,\n transformOrigin,\n vhMargin,\n vwMargin,\n width,\n xMargin,\n yMargin,\n getFixedPositionOptions,\n } as const);\n useIsomorphicLayoutEffect(() => {\n optionsRef.current = {\n ref,\n fixedTo,\n anchor,\n disableSwapping,\n disableVHBounds,\n preventOverlap,\n transformOrigin,\n vhMargin,\n vwMargin,\n width,\n xMargin,\n yMargin,\n getFixedPositionOptions,\n };\n }, [\n ref,\n fixedTo,\n anchor,\n disableSwapping,\n disableVHBounds,\n preventOverlap,\n transformOrigin,\n vhMargin,\n vwMargin,\n width,\n xMargin,\n yMargin,\n getFixedPositionOptions,\n ]);\n const [style, setStyle] = useState<CSSProperties | undefined>(\n () =>\n getFixedPosition({\n container: ref.current,\n element: fixedTo.current,\n anchor,\n disableSwapping,\n disableVHBounds,\n initialX,\n initialY,\n preventOverlap,\n transformOrigin,\n vhMargin,\n vwMargin,\n width,\n xMargin,\n yMargin,\n ...getFixedPositionOptions(),\n }).style\n );\n\n const updateStyle = useCallback(() => {\n if (disabled) {\n return;\n }\n\n const {\n ref,\n fixedTo,\n anchor,\n disableSwapping,\n disableVHBounds,\n preventOverlap,\n transformOrigin,\n vhMargin,\n vwMargin,\n width,\n xMargin,\n yMargin,\n getFixedPositionOptions,\n } = optionsRef.current;\n const element = ref.current;\n const container = fixedTo.current;\n const { style } = getFixedPosition({\n container,\n element,\n anchor,\n disableSwapping,\n disableVHBounds,\n initialX,\n initialY,\n preventOverlap,\n transformOrigin,\n vhMargin,\n vwMargin,\n width,\n xMargin,\n yMargin,\n ...getFixedPositionOptions(),\n });\n\n setStyle(style);\n setActive(!!element && !element.hidden);\n\n // Only changing the initialX, initialY, or disabled should cause the\n // useEffect below to trigger, which is why everything else is set in a ref.\n }, [disabled, initialX, initialY]);\n\n useEffect(() => {\n if (!active || disabled) {\n return;\n }\n\n const resizeCallback = (event: Event): void => {\n onResize(event);\n updateStyle();\n };\n const scrollCallback = (event: Event): void => {\n const fixedElement = ref.current;\n const fixedToElement = fixedTo.current;\n if (onScroll && fixedElement && fixedToElement) {\n onScroll(event, {\n visible: isWithinViewport({ fixedElement, fixedToElement }),\n fixedElement,\n fixedToElement,\n });\n }\n\n updateStyle();\n };\n\n const resizeHandler = delegateEvent(\"resize\", window, true);\n const scrollHandler = delegateEvent(\"scroll\", window, true, {\n passive: true,\n });\n resizeHandler.add(resizeCallback);\n scrollHandler.add(scrollCallback);\n return () => {\n resizeHandler.remove(resizeCallback);\n scrollHandler.remove(scrollCallback);\n };\n }, [active, disabled, fixedTo, onResize, onScroll, ref, updateStyle]);\n\n const callbacks: Required<FixedPositioningTransitionCallbacks> = {\n onEnter(appearing) {\n onEnter(appearing);\n updateStyle();\n },\n onEntering(appearing) {\n onEntering(appearing);\n updateStyle();\n },\n onEntered(appearing) {\n onEntered(appearing);\n updateStyle();\n },\n onExited() {\n onExited();\n setActive(false);\n },\n };\n\n return {\n ref: refHandler,\n style: disabled ? propStyle : { ...style, ...propStyle },\n callbacks,\n updateStyle,\n transitionOptions: {\n ...callbacks,\n nodeRef: refHandler,\n },\n };\n}\n"],"names":["useCallback","useEffect","useRef","useState","delegateEvent","useEnsuredRef","useIsomorphicLayoutEffect","BELOW_CENTER_ANCHOR","getFixedPosition","isWithinViewport","noop","undefined","useFixedPositioning","options","style","propStyle","nodeRef","fixedTo","disabled","onEnter","onEntering","onEntered","onExited","anchor","disableSwapping","disableVHBounds","initialX","initialY","preventOverlap","transformOrigin","vhMargin","vwMargin","width","xMargin","yMargin","getFixedPositionOptions","onScroll","onResize","active","setActive","ref","refHandler","optionsRef","current","setStyle","container","element","updateStyle","hidden","resizeCallback","event","scrollCallback","fixedElement","fixedToElement","visible","resizeHandler","window","scrollHandler","passive","add","remove","callbacks","appearing","transitionOptions"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/progress/CircularProgress.tsx"],"sourcesContent":["import {\n type CSSProperties,\n type HTMLAttributes,\n forwardRef,\n useMemo,\n} from \"react\";\n\nimport { type LabelRequiredForA11y } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { getPercentage } from \"../utils/getPercentage.js\";\nimport {\n type CircularProgressClassNameOptions,\n circularProgress,\n circularProgressCircle,\n circularProgressSvg,\n} from \"./circularProgressStyles.js\";\nimport { type ProgressProps } from \"./types.js\";\n\n/**\n * @since 6.0.0 Added the `disableShrink` prop.\n * @since 6.0.0 Renamed `small` to `dense`.\n * @since 6.0.0 Renamed `centered` to `disableCentered`.\n * @since 6.0.0 Removed the `maxRotation` prop since the determinate state no\n * longer rotates while increasing value.\n */\nexport interface CircularProgressProps\n extends
|
|
1
|
+
{"version":3,"sources":["../../src/progress/CircularProgress.tsx"],"sourcesContent":["import {\n type CSSProperties,\n type HTMLAttributes,\n forwardRef,\n useMemo,\n} from \"react\";\n\nimport { type LabelRequiredForA11y } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { getPercentage } from \"../utils/getPercentage.js\";\nimport {\n type CircularProgressClassNameOptions,\n circularProgress,\n circularProgressCircle,\n circularProgressSvg,\n} from \"./circularProgressStyles.js\";\nimport { type ProgressProps } from \"./types.js\";\n\n/**\n * @since 6.0.0 Added the `disableShrink` prop.\n * @since 6.0.0 Renamed `small` to `dense`.\n * @since 6.0.0 Renamed `centered` to `disableCentered`.\n * @since 6.0.0 Removed the `maxRotation` prop since the determinate state no\n * longer rotates while increasing value.\n */\nexport interface CircularProgressProps\n extends\n Omit<HTMLAttributes<HTMLSpanElement>, \"id\">,\n ProgressProps,\n CircularProgressClassNameOptions {\n /**\n * An optional style to apply to the svg within the circular progress. The\n * values of this style object will be merged with the current determinate\n * style (if it exists).\n */\n svgStyle?: CSSProperties;\n\n /**\n * An optional className to apply to the svg within the circular progress.\n */\n svgClassName?: string;\n\n /**\n * An optional style to apply to the circle within the circular progress. The\n * values of this style object will be merged with the current determinate\n * style (if it exists).\n */\n circleStyle?: CSSProperties;\n\n /**\n * An optional className to apply to the circle within the circular progress.\n */\n circleClassName?: string;\n\n /**\n * The radius for the circle. It is generally recommended to have the radius\n * be 1/2 of the viewbox and minus a few more pixels so that there is some\n * surrounding padding. You probably shouldn't really be changing this prop\n * though.\n *\n * @defaultValue `30`\n */\n radius?: number;\n\n /**\n * The center point for the circle. This should be half of the `viewBox` prop\n * 99% of the time and probably won't be changed.\n *\n * @defaultValue `33`\n */\n center?: number;\n\n /**\n * The viewbox for the child svg. I wouldn't recommend changing this value as\n * you will also need to update the `dashoffset` in both Sass and this prop to\n * get the animation to look nice again.\n *\n * @defaultValue `0 0 66 66`\n */\n viewBox?: string;\n\n /**\n * The `stroke-dashoffset` for the circle within the SVG. You probably won't\n * be changing this value that much as it should match the\n * `$rmd-progress-circle-dashoffset` Sass variable. This is really just used\n * to help to create the determinate progress animation.\n *\n * @defaultValue `187`\n */\n dashoffset?: number;\n\n /**\n * Set this to `true` to update the indeterminate behavior to only rotate\n * which will increase performance during CPU-intensive tasks or when many\n * loading spinners are displayed at once on the page.\n *\n * @defaultValue `false`\n * @since 6.0.0\n */\n disableShrink?: boolean;\n}\n\n/**\n * @example Indeterminate Example\n * ```tsx\n * import { CircularProgress } from \"@react-md/core/progress/CircularProgress\":\n * import { type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * return <CircularProgress aria-label=\"Loading\" />;\n * }\n * ```\n *\n * @example Determinate Example\n * ```tsx\n * import { CircularProgress } from \"@react-md/core/progress/CircularProgress\":\n * import { useState, type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * // a number from 0 - 100\n * const [progress, setProgress] = useState(0);\n *\n * return <CircularProgress aria-label=\"File upload\" value={progress} />;\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/progress#circular-progress | Progress Demos}\n * @since 6.0.0 Updated the determinate circular progress to no longer\n * rotate while increasing the value and require a label for accessibility.\n */\nexport const CircularProgress = forwardRef<\n HTMLSpanElement,\n LabelRequiredForA11y<CircularProgressProps>\n>(function CircularProgress(props, ref) {\n const {\n id: propId,\n className,\n svgStyle,\n svgClassName,\n circleStyle: propCircleStyle,\n circleClassName,\n value,\n min = 0,\n max = 100,\n radius = 30,\n center = 33,\n viewBox = \"0 0 66 66\",\n theme,\n dense,\n dashoffset = 187,\n disableShrink,\n disableCentered,\n disableTransition,\n ...remaining\n } = props;\n\n const id = useEnsuredId(propId, \"circular-progress\");\n let progress: number | undefined;\n if (typeof value === \"number\") {\n progress = getPercentage({ min, max, value, validate: true });\n }\n\n const circleStyle = useMemo(() => {\n if (typeof progress !== \"number\") {\n return propCircleStyle;\n }\n\n return {\n ...propCircleStyle,\n strokeDashoffset: dashoffset - dashoffset * progress,\n };\n }, [progress, propCircleStyle, dashoffset]);\n\n const indeterminate = typeof progress !== \"number\";\n return (\n <span\n {...remaining}\n id={id}\n ref={ref}\n role=\"progressbar\"\n aria-valuemin={min}\n aria-valuemax={max}\n aria-valuenow={value}\n className={circularProgress({\n theme,\n dense,\n disableCentered,\n className,\n })}\n >\n <svg\n style={svgStyle}\n className={circularProgressSvg({\n className: svgClassName,\n indeterminate,\n disableShrink,\n })}\n viewBox={viewBox}\n >\n <circle\n style={circleStyle}\n className={circularProgressCircle({\n className: circleClassName,\n indeterminate,\n disableShrink,\n disableTransition,\n })}\n r={radius}\n cx={center}\n cy={center}\n />\n </svg>\n </span>\n );\n});\n"],"names":["forwardRef","useMemo","useEnsuredId","getPercentage","circularProgress","circularProgressCircle","circularProgressSvg","CircularProgress","props","ref","id","propId","className","svgStyle","svgClassName","circleStyle","propCircleStyle","circleClassName","value","min","max","radius","center","viewBox","theme","dense","dashoffset","disableShrink","disableCentered","disableTransition","remaining","progress","validate","strokeDashoffset","indeterminate","span","role","aria-valuemin","aria-valuemax","aria-valuenow","svg","style","circle","r","cx","cy"],"mappings":";AAAA,SAGEA,UAAU,EACVC,OAAO,QACF,QAAQ;AAGf,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAEEC,gBAAgB,EAChBC,sBAAsB,EACtBC,mBAAmB,QACd,8BAA8B;AAuFrC;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BC,GACD,OAAO,MAAMC,iCAAmBP,WAG9B,SAASO,iBAAiBC,KAAK,EAAEC,GAAG;IACpC,MAAM,EACJC,IAAIC,MAAM,EACVC,SAAS,EACTC,QAAQ,EACRC,YAAY,EACZC,aAAaC,eAAe,EAC5BC,eAAe,EACfC,KAAK,EACLC,MAAM,CAAC,EACPC,MAAM,GAAG,EACTC,SAAS,EAAE,EACXC,SAAS,EAAE,EACXC,UAAU,WAAW,EACrBC,KAAK,EACLC,KAAK,EACLC,aAAa,GAAG,EAChBC,aAAa,EACbC,eAAe,EACfC,iBAAiB,EACjB,GAAGC,WACJ,GAAGtB;IAEJ,MAAME,KAAKR,aAAaS,QAAQ;IAChC,IAAIoB;IACJ,IAAI,OAAOb,UAAU,UAAU;QAC7Ba,WAAW5B,cAAc;YAAEgB;YAAKC;YAAKF;YAAOc,UAAU;QAAK;IAC7D;IAEA,MAAMjB,cAAcd,QAAQ;QAC1B,IAAI,OAAO8B,aAAa,UAAU;YAChC,OAAOf;QACT;QAEA,OAAO;YACL,GAAGA,eAAe;YAClBiB,kBAAkBP,aAAaA,aAAaK;QAC9C;IACF,GAAG;QAACA;QAAUf;QAAiBU;KAAW;IAE1C,MAAMQ,gBAAgB,OAAOH,aAAa;IAC1C,qBACE,KAACI;QACE,GAAGL,SAAS;QACbpB,IAAIA;QACJD,KAAKA;QACL2B,MAAK;QACLC,iBAAelB;QACfmB,iBAAelB;QACfmB,iBAAerB;QACfN,WAAWR,iBAAiB;YAC1BoB;YACAC;YACAG;YACAhB;QACF;kBAEA,cAAA,KAAC4B;YACCC,OAAO5B;YACPD,WAAWN,oBAAoB;gBAC7BM,WAAWE;gBACXoB;gBACAP;YACF;YACAJ,SAASA;sBAET,cAAA,KAACmB;gBACCD,OAAO1B;gBACPH,WAAWP,uBAAuB;oBAChCO,WAAWK;oBACXiB;oBACAP;oBACAE;gBACF;gBACAc,GAAGtB;gBACHuB,IAAItB;gBACJuB,IAAIvB;;;;AAKd,GAAG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/progress/LinearProgress.tsx"],"sourcesContent":["import {\n type CSSProperties,\n type HTMLAttributes,\n forwardRef,\n useMemo,\n} from \"react\";\n\nimport { type LabelRequiredForA11y, type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { getPercentage } from \"../utils/getPercentage.js\";\nimport {\n type BaseLinearProgressClassNameOptions,\n linearProgress,\n linearProgressBar,\n} from \"./linearProgressStyles.js\";\nimport { type ProgressProps } from \"./types.js\";\n\n/**\n * @since 6.0.0 Added the `theme` prop\n * @since 6.3.1 extends BaseLinearProgressClassNameOptions for CSSProperties\n * module augmentation.\n */\nexport interface LinearProgressProps\n extends
|
|
1
|
+
{"version":3,"sources":["../../src/progress/LinearProgress.tsx"],"sourcesContent":["import {\n type CSSProperties,\n type HTMLAttributes,\n forwardRef,\n useMemo,\n} from \"react\";\n\nimport { type LabelRequiredForA11y, type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { getPercentage } from \"../utils/getPercentage.js\";\nimport {\n type BaseLinearProgressClassNameOptions,\n linearProgress,\n linearProgressBar,\n} from \"./linearProgressStyles.js\";\nimport { type ProgressProps } from \"./types.js\";\n\n/**\n * @since 6.0.0 Added the `theme` prop\n * @since 6.3.1 extends BaseLinearProgressClassNameOptions for CSSProperties\n * module augmentation.\n */\nexport interface LinearProgressProps\n extends\n Omit<HTMLAttributes<HTMLSpanElement>, \"id\" | \"children\">,\n BaseLinearProgressClassNameOptions,\n ProgressProps {\n /**\n * An optional style to apply to the progress bar. This will be merged with\n * the current width or height tracking the progress when a `value` is also\n * provided.\n */\n barStyle?: CSSProperties;\n\n /**\n * An optional className to apply to the progress bar.\n */\n barClassName?: string;\n\n /**\n * @since 6.1.0\n */\n barProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>>;\n\n /**\n * Boolean if the progress should be reversed. This will change the progress\n * direction from `left-to-right` to be `right-to-left`. If the current\n * language is a rtl language and this prop is enabled, the direction will\n * still be `left-to-right`.\n *\n * @defaultValue `false`\n */\n reverse?: boolean;\n\n /**\n * Since there isn't really a good way to have \"auto height\", you'll need to\n * manually set the progress bar's height with this prop to some pixel value.\n * If you'd prefer to set the height in Sass/css, set this value to `null`\n * instead since this value would be passed down as a `height` inline style.\n *\n * @defaultValue `240`\n */\n verticalHeight?: number | null;\n}\n\n/**\n * @example Indeterminate Example\n * ```tsx\n * import { LinearProgress } from \"@react-md/core/progress/LinearProgress\";\n * import { type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * return <LinearProgress aria-label=\"Loading\" />;\n * }\n * ```\n *\n * @example Determinate Example\n * ```tsx\n * import { LinearProgress } from \"@react-md/core/progress/LinearProgress\";\n * import { useState, type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * // a number from 0 - 100\n * const [progress, setProgress] = useState(0);\n *\n * return <LinearProgress aria-label=\"File upload\" value={progress} />;\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/progress#linear-progress | Progress Demos}\n * @since 6.0.0 Supports rendering as any of the theme colors and\n * requires a label for accessibility.\n */\nexport const LinearProgress = forwardRef<\n HTMLSpanElement,\n LabelRequiredForA11y<LinearProgressProps>\n>(function LinearProgress(props, ref) {\n const {\n id: propId,\n style: propStyle,\n className,\n barStyle: propBarStyle,\n barClassName,\n barProps,\n min = 0,\n max = 100,\n value,\n reverse,\n theme,\n disableTransition,\n vertical,\n verticalHeight = 240,\n ...remaining\n } = props;\n\n const id = useEnsuredId(propId, \"linear-progress\");\n const style = useMemo(() => {\n if (!vertical || verticalHeight === null) {\n return propStyle;\n }\n\n return {\n ...propStyle,\n height: verticalHeight,\n };\n }, [propStyle, vertical, verticalHeight]);\n\n let progress: number | undefined;\n if (typeof value === \"number\") {\n progress = getPercentage({ min, max, value, validate: true });\n }\n const barStyle = useMemo(() => {\n if (typeof progress !== \"number\") {\n return propBarStyle;\n }\n\n const key = vertical ? \"height\" : \"width\";\n return {\n ...propBarStyle,\n [key]: `${progress * 100}%`,\n };\n }, [progress, propBarStyle, vertical]);\n\n const indeterminate = typeof progress !== \"number\";\n return (\n <span\n {...remaining}\n id={id}\n ref={ref}\n style={style}\n role=\"progressbar\"\n aria-valuemin={min}\n aria-valuemax={max}\n aria-valuenow={value}\n className={linearProgress({\n className,\n theme,\n vertical,\n indeterminate,\n })}\n >\n <span\n {...barProps}\n style={barStyle}\n className={linearProgressBar({\n className: barClassName,\n reverse,\n vertical,\n indeterminate,\n disableTransition,\n })}\n />\n </span>\n );\n});\n"],"names":["forwardRef","useMemo","useEnsuredId","getPercentage","linearProgress","linearProgressBar","LinearProgress","props","ref","id","propId","style","propStyle","className","barStyle","propBarStyle","barClassName","barProps","min","max","value","reverse","theme","disableTransition","vertical","verticalHeight","remaining","height","progress","validate","key","indeterminate","span","role","aria-valuemin","aria-valuemax","aria-valuenow"],"mappings":";AAAA,SAGEA,UAAU,EACVC,OAAO,QACF,QAAQ;AAGf,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAEEC,cAAc,EACdC,iBAAiB,QACZ,4BAA4B;AAmDnC;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BC,GACD,OAAO,MAAMC,+BAAiBN,WAG5B,SAASM,eAAeC,KAAK,EAAEC,GAAG;IAClC,MAAM,EACJC,IAAIC,MAAM,EACVC,OAAOC,SAAS,EAChBC,SAAS,EACTC,UAAUC,YAAY,EACtBC,YAAY,EACZC,QAAQ,EACRC,MAAM,CAAC,EACPC,MAAM,GAAG,EACTC,KAAK,EACLC,OAAO,EACPC,KAAK,EACLC,iBAAiB,EACjBC,QAAQ,EACRC,iBAAiB,GAAG,EACpB,GAAGC,WACJ,GAAGnB;IAEJ,MAAME,KAAKP,aAAaQ,QAAQ;IAChC,MAAMC,QAAQV,QAAQ;QACpB,IAAI,CAACuB,YAAYC,mBAAmB,MAAM;YACxC,OAAOb;QACT;QAEA,OAAO;YACL,GAAGA,SAAS;YACZe,QAAQF;QACV;IACF,GAAG;QAACb;QAAWY;QAAUC;KAAe;IAExC,IAAIG;IACJ,IAAI,OAAOR,UAAU,UAAU;QAC7BQ,WAAWzB,cAAc;YAAEe;YAAKC;YAAKC;YAAOS,UAAU;QAAK;IAC7D;IACA,MAAMf,WAAWb,QAAQ;QACvB,IAAI,OAAO2B,aAAa,UAAU;YAChC,OAAOb;QACT;QAEA,MAAMe,MAAMN,WAAW,WAAW;QAClC,OAAO;YACL,GAAGT,YAAY;YACf,CAACe,IAAI,EAAE,GAAGF,WAAW,IAAI,CAAC,CAAC;QAC7B;IACF,GAAG;QAACA;QAAUb;QAAcS;KAAS;IAErC,MAAMO,gBAAgB,OAAOH,aAAa;IAC1C,qBACE,KAACI;QACE,GAAGN,SAAS;QACbjB,IAAIA;QACJD,KAAKA;QACLG,OAAOA;QACPsB,MAAK;QACLC,iBAAehB;QACfiB,iBAAehB;QACfiB,iBAAehB;QACfP,WAAWT,eAAe;YACxBS;YACAS;YACAE;YACAO;QACF;kBAEA,cAAA,KAACC;YACE,GAAGf,QAAQ;YACZN,OAAOG;YACPD,WAAWR,kBAAkB;gBAC3BQ,WAAWG;gBACXK;gBACAG;gBACAO;gBACAR;YACF;;;AAIR,GAAG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/progress/linearProgressStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { cssUtils } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\nimport { type ProgressTheme } from \"./types.js\";\n\nconst styles = bem(\"rmd-linear-progress\");\n\ndeclare module \"react\" {\n interface CSSProperties {\n \"--rmd-progress-background-color\"?: string;\n \"--rmd-progress-color\"?: string;\n \"--rmd-progress-linear-size\"?: string | number;\n }\n}\n\nexport interface BaseLinearProgressClassNameOptions {\n className?: string;\n\n /**\n * @defaultValue `\"primary\"`\n * @since 6.0.0\n */\n theme?: ProgressTheme;\n\n /**\n * Boolean if the progress should be vertical instead of horizontal. When\n * this prop is set, you should also set the `verticalHeight` prop to a height\n * value you want for your progress bar.\n *\n * @defaultValue `false`\n */\n vertical?: boolean;\n}\n\n/**\n * @since 6.2.0\n */\nexport interface LinearProgressClassNameOptions
|
|
1
|
+
{"version":3,"sources":["../../src/progress/linearProgressStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { cssUtils } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\nimport { type ProgressTheme } from \"./types.js\";\n\nconst styles = bem(\"rmd-linear-progress\");\n\ndeclare module \"react\" {\n interface CSSProperties {\n \"--rmd-progress-background-color\"?: string;\n \"--rmd-progress-color\"?: string;\n \"--rmd-progress-linear-size\"?: string | number;\n }\n}\n\nexport interface BaseLinearProgressClassNameOptions {\n className?: string;\n\n /**\n * @defaultValue `\"primary\"`\n * @since 6.0.0\n */\n theme?: ProgressTheme;\n\n /**\n * Boolean if the progress should be vertical instead of horizontal. When\n * this prop is set, you should also set the `verticalHeight` prop to a height\n * value you want for your progress bar.\n *\n * @defaultValue `false`\n */\n vertical?: boolean;\n}\n\n/**\n * @since 6.2.0\n */\nexport interface LinearProgressClassNameOptions extends BaseLinearProgressClassNameOptions {\n /** @defaultValue `false` */\n indeterminate?: boolean;\n}\n\n/**\n * @since 6.2.0\n */\nexport function linearProgress(\n options: LinearProgressClassNameOptions = {}\n): string {\n const { className, theme = \"primary\", vertical, indeterminate } = options;\n\n return cnb(\n styles({\n vertical,\n horizontal: !vertical,\n determinate: !indeterminate,\n indeterminate,\n }),\n theme !== \"current-color\" && cssUtils({ textColor: theme }),\n className\n );\n}\n\n/**\n * @since 6.2.0\n */\nexport interface LinearProgressBarClassNameOptions {\n className?: string;\n\n /** @defaultValue `false` */\n reverse?: boolean;\n /** @defaultValue `false` */\n vertical?: boolean;\n /** @defaultValue `false` */\n indeterminate?: boolean;\n /** @defaultValue `false` */\n disableTransition?: boolean;\n}\n\n/**\n * @since 6.2.0\n */\nexport function linearProgressBar(\n options: LinearProgressBarClassNameOptions = {}\n): string {\n const { className, reverse, vertical, indeterminate, disableTransition } =\n options;\n\n return cnb(\n styles(\"bar\", {\n vertical,\n \"vertical-reverse\": vertical && reverse,\n horizontal: !vertical,\n \"horizontal-reverse\": !vertical && reverse,\n animate: !disableTransition && !indeterminate,\n determinate: !indeterminate,\n indeterminate,\n \"determinate-reverse\": !indeterminate && reverse && !vertical,\n \"determinate-vertical-reverse\": !indeterminate && reverse && vertical,\n \"indeterminate-reverse\": indeterminate && reverse && !vertical,\n \"indeterminate-vertical\": indeterminate && vertical,\n \"indeterminate-vertical-reverse\": indeterminate && reverse && vertical,\n }),\n className\n );\n}\n"],"names":["cnb","cssUtils","bem","styles","linearProgress","options","className","theme","vertical","indeterminate","horizontal","determinate","textColor","linearProgressBar","reverse","disableTransition","animate"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,GAAG,QAAQ,kBAAkB;AAGtC,MAAMC,SAASD,IAAI;AAqCnB;;CAEC,GACD,OAAO,SAASE,eACdC,UAA0C,CAAC,CAAC;IAE5C,MAAM,EAAEC,SAAS,EAAEC,QAAQ,SAAS,EAAEC,QAAQ,EAAEC,aAAa,EAAE,GAAGJ;IAElE,OAAOL,IACLG,OAAO;QACLK;QACAE,YAAY,CAACF;QACbG,aAAa,CAACF;QACdA;IACF,IACAF,UAAU,mBAAmBN,SAAS;QAAEW,WAAWL;IAAM,IACzDD;AAEJ;AAkBA;;CAEC,GACD,OAAO,SAASO,kBACdR,UAA6C,CAAC,CAAC;IAE/C,MAAM,EAAEC,SAAS,EAAEQ,OAAO,EAAEN,QAAQ,EAAEC,aAAa,EAAEM,iBAAiB,EAAE,GACtEV;IAEF,OAAOL,IACLG,OAAO,OAAO;QACZK;QACA,oBAAoBA,YAAYM;QAChCJ,YAAY,CAACF;QACb,sBAAsB,CAACA,YAAYM;QACnCE,SAAS,CAACD,qBAAqB,CAACN;QAChCE,aAAa,CAACF;QACdA;QACA,uBAAuB,CAACA,iBAAiBK,WAAW,CAACN;QACrD,gCAAgC,CAACC,iBAAiBK,WAAWN;QAC7D,yBAAyBC,iBAAiBK,WAAW,CAACN;QACtD,0BAA0BC,iBAAiBD;QAC3C,kCAAkCC,iBAAiBK,WAAWN;IAChE,IACAF;AAEJ"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/responsive-item/ResponsiveItem.tsx"],"sourcesContent":["import { type HTMLAttributes, forwardRef } from \"react\";\n\nimport {\n type ResponsiveItemClassNameOptions,\n responsiveItem,\n} from \"./responsiveItemStyles.js\";\n\n/**\n * @since 6.0.0 Renamed from `MediaContainerProps` to\n * `ResponsiveItemProps`\n * @since 6.0.0 The `height` and `width` props were removed in favor of the\n * `aspectRatio` prop since the latest typescript string interpolation supports\n * enforcing the correct format.\n * @since 6.0.0 The `auto` prop was removed in favor of the new\n * {@link ResponsiveItemProps.responsive} prop.\n */\nexport interface ResponsiveItemProps\n extends HTMLAttributes<HTMLSpanElement
|
|
1
|
+
{"version":3,"sources":["../../src/responsive-item/ResponsiveItem.tsx"],"sourcesContent":["import { type HTMLAttributes, forwardRef } from \"react\";\n\nimport {\n type ResponsiveItemClassNameOptions,\n responsiveItem,\n} from \"./responsiveItemStyles.js\";\n\n/**\n * @since 6.0.0 Renamed from `MediaContainerProps` to\n * `ResponsiveItemProps`\n * @since 6.0.0 The `height` and `width` props were removed in favor of the\n * `aspectRatio` prop since the latest typescript string interpolation supports\n * enforcing the correct format.\n * @since 6.0.0 The `auto` prop was removed in favor of the new\n * {@link ResponsiveItemProps.responsive} prop.\n */\nexport interface ResponsiveItemProps\n extends HTMLAttributes<HTMLSpanElement>, ResponsiveItemClassNameOptions {}\n\n/**\n * @example Image Example\n * ```tsx\n * import { ResponsiveItem } from \"@react-md/core/responsive-item/ResponsiveItem\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * return (\n * <ResponsiveItem>\n * <img alt=\"\" src=\"/some-image.png\" />\n * </ResponsiveItem>\n * );\n * }\n * ```\n *\n * @example Iframe Example\n * ```tsx\n * import { ResponsiveItem } from \"@react-md/core/responsive-item/ResponsiveItem\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * return (\n * <ResponsiveItem>\n * <iframe\n * src=\"https://youtube.com/some-video-url\"\n * title=\"Some YouTube video\"\n * allowFullScreen\n * />\n * </ResponsiveItem>\n * );\n * }\n * ```\n *\n * @example Forced Aspect Ratio\n * ```tsx\n * import { ResponsiveItem } from \"@react-md/core/responsive-item/ResponsiveItem\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * return (\n * <ResponsiveItem aspectRatio=\"16-9\">\n * <img alt=\"\" src=\"/some-image.png\" />\n * </ResponsiveItem>\n * );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/responsive-item | ResponsiveItem Demos}\n * @since 6.0.0 Renamed from `MediaContainer` to\n * `ResponsiveItem` and renders a `<span>` instead of a `<div>`.\n */\nexport const ResponsiveItem = forwardRef<HTMLSpanElement, ResponsiveItemProps>(\n function ResponsiveItem(props, ref) {\n const {\n className,\n fullWidth = false,\n aspectRatio,\n responsive = \"auto\",\n children,\n ...remaining\n } = props;\n\n return (\n <span\n {...remaining}\n ref={ref}\n className={responsiveItem({\n className,\n fullWidth,\n aspectRatio,\n responsive,\n })}\n >\n {children}\n </span>\n );\n }\n);\n"],"names":["forwardRef","responsiveItem","ResponsiveItem","props","ref","className","fullWidth","aspectRatio","responsive","children","remaining","span"],"mappings":";AAAA,SAA8BA,UAAU,QAAQ,QAAQ;AAExD,SAEEC,cAAc,QACT,4BAA4B;AAcnC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkDC,GACD,OAAO,MAAMC,+BAAiBF,WAC5B,SAASE,eAAeC,KAAK,EAAEC,GAAG;IAChC,MAAM,EACJC,SAAS,EACTC,YAAY,KAAK,EACjBC,WAAW,EACXC,aAAa,MAAM,EACnBC,QAAQ,EACR,GAAGC,WACJ,GAAGP;IAEJ,qBACE,KAACQ;QACE,GAAGD,SAAS;QACbN,KAAKA;QACLC,WAAWJ,eAAe;YACxBI;YACAC;YACAC;YACAC;QACF;kBAECC;;AAGP,GACA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/responsive-item/ResponsiveItemOverlay.tsx"],"sourcesContent":["import { type HTMLAttributes, forwardRef } from \"react\";\n\nimport {\n type ResponsiveItemOverlayClassNameOptions,\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n type ResponsiveItemOverlayPosition,\n responsiveItemOverlay,\n} from \"./responsiveItemOverlayStyles.js\";\n\n/**\n * @since 6.0.0 Renamed from `MediaOverlayProps` to\n * `ResponsiveItemOverlayProps`.\n */\nexport interface ResponsiveItemOverlayProps\n extends
|
|
1
|
+
{"version":3,"sources":["../../src/responsive-item/ResponsiveItemOverlay.tsx"],"sourcesContent":["import { type HTMLAttributes, forwardRef } from \"react\";\n\nimport {\n type ResponsiveItemOverlayClassNameOptions,\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n type ResponsiveItemOverlayPosition,\n responsiveItemOverlay,\n} from \"./responsiveItemOverlayStyles.js\";\n\n/**\n * @since 6.0.0 Renamed from `MediaOverlayProps` to\n * `ResponsiveItemOverlayProps`.\n */\nexport interface ResponsiveItemOverlayProps\n extends\n HTMLAttributes<HTMLSpanElement>,\n ResponsiveItemOverlayClassNameOptions {}\n\n/**\n * @example Simple Example\n * ```tsx\n * import { CardContent } from \"@react-md/core/card/CardContent\";\n * import { ResponsiveItemOverlay } from \"@react-md/core/responsive-item/ResponsiveItemOverlay\";\n * import { Typography } from \"@react-md/core/typography/Typography\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * return (\n * <CardContent>\n * <img alt=\"\" src=\"/some-image.png\" />\n * <ResponsiveItemOverlay>\n * <Typography type=\"headline-5\" margin=\"none\">\n * This appears at the bottom by default.\n * </Typography>\n * </ResponsiveItemOverlay>\n * </CardContent>\n * );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/responsive-item | ResponsiveItem Demos}\n * @see {@link ResponsiveItemOverlayPosition}\n * @since 6.0.0 Renamed from `MediaOverlay` to `ResponsiveItemOverlay`\n * and renders as a `<span>` instead of a `<div>`.\n */\nexport const ResponsiveItemOverlay = forwardRef<\n HTMLSpanElement,\n ResponsiveItemOverlayProps\n>(function ResponsiveItemOverlay(props, ref) {\n const { className, children, position = \"bottom\", ...remaining } = props;\n\n return (\n <span\n {...remaining}\n ref={ref}\n className={responsiveItemOverlay({ className, position })}\n >\n {children}\n </span>\n );\n});\n"],"names":["forwardRef","responsiveItemOverlay","ResponsiveItemOverlay","props","ref","className","children","position","remaining","span"],"mappings":";AAAA,SAA8BA,UAAU,QAAQ,QAAQ;AAExD,SAIEC,qBAAqB,QAChB,mCAAmC;AAW1C;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BC,GACD,OAAO,MAAMC,sCAAwBF,WAGnC,SAASE,sBAAsBC,KAAK,EAAEC,GAAG;IACzC,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,WAAW,QAAQ,EAAE,GAAGC,WAAW,GAAGL;IAEnE,qBACE,KAACM;QACE,GAAGD,SAAS;QACbJ,KAAKA;QACLC,WAAWJ,sBAAsB;YAAEI;YAAWE;QAAS;kBAEtDD;;AAGP,GAAG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/searching/caseInsensitive.ts"],"sourcesContent":["import { type AutomaticTextExtraction, type TextExtractor } from \"../types.js\";\nimport { type BaseSearchOptions } from \"./types.js\";\nimport { defaultExtractor, search } from \"./utils.js\";\n\n/**\n * @since 6.2.0\n * @internal\n */\nconst DEFAULT_EXTRACTOR = defaultExtractor(\"caseInsensitiveSearch\");\n\n/**\n * @since 6.0.0\n */\nexport interface CaseInsensitiveStartsWithOptions {\n /**\n * Set this to `true` if the item in the list must start with the query\n * instead of only including it.\n *\n * @example Search Example\n * ```ts\n * const fruits = [\"Banana\", \"Grape\", \"Apple\", \"Orange\"];\n *\n * caseInsensitiveSearch({\n * list: fruits,\n * query: \"ap\",\n * type: \"search\",\n * });\n * // \"Grape\"\n *\n * caseInsensitiveSearch({\n * list: fruits,\n * query: \"ap\",\n * type: \"search\",\n * startsWith: true,\n * });\n * // \"Apple\"\n * ```\n *\n * @example Filter Example\n * ```ts\n * const fruits = [\"Apple\", \"Banana\", \"Grape\", \"Orange\"];\n *\n * caseInsensitiveSearch({\n * list: fruits,\n * query: \"ap\",\n * });\n * // [\"Apple\", \"Grape\"]\n *\n * caseInsensitiveSearch({\n * list: fruits,\n * query: \"ap\",\n * startsWith: true,\n * });\n * // [\"Apple\"]\n * ```\n *\n * @defaultValue `false`\n */\n startsWith?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface IsCaseInsensitiveMatchOptions
|
|
1
|
+
{"version":3,"sources":["../../src/searching/caseInsensitive.ts"],"sourcesContent":["import { type AutomaticTextExtraction, type TextExtractor } from \"../types.js\";\nimport { type BaseSearchOptions } from \"./types.js\";\nimport { defaultExtractor, search } from \"./utils.js\";\n\n/**\n * @since 6.2.0\n * @internal\n */\nconst DEFAULT_EXTRACTOR = defaultExtractor(\"caseInsensitiveSearch\");\n\n/**\n * @since 6.0.0\n */\nexport interface CaseInsensitiveStartsWithOptions {\n /**\n * Set this to `true` if the item in the list must start with the query\n * instead of only including it.\n *\n * @example Search Example\n * ```ts\n * const fruits = [\"Banana\", \"Grape\", \"Apple\", \"Orange\"];\n *\n * caseInsensitiveSearch({\n * list: fruits,\n * query: \"ap\",\n * type: \"search\",\n * });\n * // \"Grape\"\n *\n * caseInsensitiveSearch({\n * list: fruits,\n * query: \"ap\",\n * type: \"search\",\n * startsWith: true,\n * });\n * // \"Apple\"\n * ```\n *\n * @example Filter Example\n * ```ts\n * const fruits = [\"Apple\", \"Banana\", \"Grape\", \"Orange\"];\n *\n * caseInsensitiveSearch({\n * list: fruits,\n * query: \"ap\",\n * });\n * // [\"Apple\", \"Grape\"]\n *\n * caseInsensitiveSearch({\n * list: fruits,\n * query: \"ap\",\n * startsWith: true,\n * });\n * // [\"Apple\"]\n * ```\n *\n * @defaultValue `false`\n */\n startsWith?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface IsCaseInsensitiveMatchOptions extends CaseInsensitiveStartsWithOptions {\n /**\n * The current search query.\n */\n query: string;\n\n /**\n * The current value to compare against.\n */\n value: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport function isCaseInsensitiveMatch(\n options: IsCaseInsensitiveMatchOptions\n): boolean {\n const { query, value, startsWith } = options;\n const matchIndex = value.indexOf(query);\n if (startsWith) {\n return matchIndex === 0;\n }\n\n return matchIndex !== -1;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface CaseInsensitiveOptions<T>\n extends BaseSearchOptions<T>, CaseInsensitiveStartsWithOptions {}\n\n/**\n * @example String list\n * ```ts\n * const fruits = [\"Apple\", \"Banana\", \"Grape\", \"Orange\"];\n *\n * caseInsensitiveSearch({\n * list: fruits,\n * query: \"ap\",\n * });\n * // [\"Apple\", \"Grape\"]\n *\n * caseInsensitiveSearch({\n * list: fruits,\n * query: \"ap\",\n * startsWith: true,\n * });\n * // [\"Apple\"]\n *\n * caseInsensitiveSearch({\n * list: fruits,\n * query: \" a p\",\n * });\n * // []\n *\n * caseInsensitiveSearch({\n * list: fruits,\n * query: \" a p\",\n * whitespace: \"ignore\",\n * });\n * // [\"Apple\", \"Grape\"]\n *\n * caseInsensitiveSearch({\n * list: fruits,\n * query: \" ap \",\n * whitespace: \"trim\",\n * });\n * // [\"Apple\", \"Grape\"]\n * ```\n *\n * @example Objects\n * ```ts\n * const fruits = [\n * { name: \"Apple\", value: 0 },\n * { name: \"Banana\", value: 1 },\n * { name: \"Grape\", value: 2 },\n * { name: \"Orange\", value: 3 },\n * ];\n *\n * caseInsensitiveSearch({\n * list: fruits,\n * query: \"ap\",\n * });\n * // [{ name: \"Apple\", value: 0 }, { name: \"Grape\", value: 2 }]\n * ```\n *\n * @example Objects With Custom Names\n * ```ts\n * const fruits = [\n * { nameField: \"Apple\", value: 0 },\n * { nameField: \"Banana\", value: 1 },\n * { nameField: \"Grape\", value: 2 },\n * { nameField: \"Orange\", value: 3 },\n * ];\n *\n * caseInsensitiveSearch({\n * list: fruits,\n * query: \"ap\",\n * extractor: (item) => item.nameField,\n * });\n * // [{ nameField: \"Apple\", value: 0 }, { nameField: \"Grape\", value: 2 }]\n * ```\n *\n * @since 6.0.0\n */\nexport function caseInsensitiveSearch<T extends AutomaticTextExtraction>(\n options: CaseInsensitiveOptions<T> & { type?: \"filter\" }\n): readonly T[];\nexport function caseInsensitiveSearch<T extends AutomaticTextExtraction>(\n options: CaseInsensitiveOptions<T> & { type: \"search\" }\n): T | undefined;\nexport function caseInsensitiveSearch<T>(\n options: CaseInsensitiveOptions<T> & {\n extractor: TextExtractor<T>;\n type?: \"filter\";\n }\n): readonly T[];\nexport function caseInsensitiveSearch<T>(\n options: CaseInsensitiveOptions<T> & {\n extractor: TextExtractor<T>;\n type: \"search\";\n }\n): T | undefined;\nexport function caseInsensitiveSearch<T>(\n options: CaseInsensitiveOptions<T>\n): readonly T[] | T | undefined {\n const {\n list,\n type = \"filter\",\n query,\n extractor = DEFAULT_EXTRACTOR,\n startsWith,\n whitespace,\n } = options;\n\n return search({\n type,\n list,\n query,\n extractor,\n whitespace,\n filter(q, value) {\n return isCaseInsensitiveMatch({\n query: q,\n value,\n startsWith,\n });\n },\n });\n}\n"],"names":["defaultExtractor","search","DEFAULT_EXTRACTOR","isCaseInsensitiveMatch","options","query","value","startsWith","matchIndex","indexOf","caseInsensitiveSearch","list","type","extractor","whitespace","filter","q"],"mappings":"AAEA,SAASA,gBAAgB,EAAEC,MAAM,QAAQ,aAAa;AAEtD;;;CAGC,GACD,MAAMC,oBAAoBF,iBAAiB;AAoE3C;;CAEC,GACD,OAAO,SAASG,uBACdC,OAAsC;IAEtC,MAAM,EAAEC,KAAK,EAAEC,KAAK,EAAEC,UAAU,EAAE,GAAGH;IACrC,MAAMI,aAAaF,MAAMG,OAAO,CAACJ;IACjC,IAAIE,YAAY;QACd,OAAOC,eAAe;IACxB;IAEA,OAAOA,eAAe,CAAC;AACzB;AAoGA,OAAO,SAASE,sBACdN,OAAkC;IAElC,MAAM,EACJO,IAAI,EACJC,OAAO,QAAQ,EACfP,KAAK,EACLQ,YAAYX,iBAAiB,EAC7BK,UAAU,EACVO,UAAU,EACX,GAAGV;IAEJ,OAAOH,OAAO;QACZW;QACAD;QACAN;QACAQ;QACAC;QACAC,QAAOC,CAAC,EAAEV,KAAK;YACb,OAAOH,uBAAuB;gBAC5BE,OAAOW;gBACPV;gBACAC;YACF;QACF;IACF;AACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/segmented-button/SegmentedButton.tsx"],"sourcesContent":["\"use client\";\n\nimport { type ButtonHTMLAttributes, type ReactNode, forwardRef } from \"react\";\n\nimport { getIcon } from \"../icon/config.js\";\nimport { type ComponentWithRippleProps } from \"../interaction/types.js\";\nimport { useElementInteraction } from \"../interaction/useElementInteraction.js\";\nimport { useHigherContrastChildren } from \"../interaction/useHigherContrastChildren.js\";\nimport {\n type BaseMaxWidthTransitionOptions,\n useMaxWidthTransition,\n} from \"../transition/useMaxWidthTransition.js\";\nimport {\n type BaseSegmentedButtonClassNameOptions,\n segmentedButton,\n} from \"./segmentedButtonStyles.js\";\n\n/**\n * @since 6.0.0\n * @since 6.3.1 Extends BaseMaxWidthTransitionOptions for CSS module\n * augmentation.\n * @since 6.3.1 Extends BaseSegmentedButtonClassNameOptions for CSSProperties\n * module augmentation.\n */\nexport interface SegmentedButtonProps\n extends
|
|
1
|
+
{"version":3,"sources":["../../src/segmented-button/SegmentedButton.tsx"],"sourcesContent":["\"use client\";\n\nimport { type ButtonHTMLAttributes, type ReactNode, forwardRef } from \"react\";\n\nimport { getIcon } from \"../icon/config.js\";\nimport { type ComponentWithRippleProps } from \"../interaction/types.js\";\nimport { useElementInteraction } from \"../interaction/useElementInteraction.js\";\nimport { useHigherContrastChildren } from \"../interaction/useHigherContrastChildren.js\";\nimport {\n type BaseMaxWidthTransitionOptions,\n useMaxWidthTransition,\n} from \"../transition/useMaxWidthTransition.js\";\nimport {\n type BaseSegmentedButtonClassNameOptions,\n segmentedButton,\n} from \"./segmentedButtonStyles.js\";\n\n/**\n * @since 6.0.0\n * @since 6.3.1 Extends BaseMaxWidthTransitionOptions for CSS module\n * augmentation.\n * @since 6.3.1 Extends BaseSegmentedButtonClassNameOptions for CSSProperties\n * module augmentation.\n */\nexport interface SegmentedButtonProps\n extends\n ButtonHTMLAttributes<HTMLButtonElement>,\n BaseMaxWidthTransitionOptions,\n BaseSegmentedButtonClassNameOptions,\n ComponentWithRippleProps {\n /** @defaultValue `getIcon(\"selected\")` */\n selectedIcon?: ReactNode;\n\n /**\n * Set this to `true` to not render the {@link selectedIcon} when\n * {@link selected} is `true`.\n *\n * @defaultValue `false`\n */\n disableSelectedIcon?: boolean;\n\n /**\n * Set this to `true` to disable the {@link selectedIcon} enter/exit\n * transition and instead just use `display: none`.\n *\n * @defaultValue `false`\n */\n disableSelectedTransition?: boolean;\n\n /**\n * An optional addon to render before the {@link children} and after the\n * {@link selectedIcon}. This is only useful when rendering text children so\n * it can appear above the interaction states.\n */\n leftAddon?: ReactNode;\n\n /**\n * An optional addon to render after the {@link children}. This is only useful\n * when rendering text children so it can appear above the interaction states.\n */\n rightAddon?: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * @example Simple Example\n * ```tsx\n * import { SegmentedButton } from \"@react-md/core/segmented-button/SegmentedButton\";\n * import { SegmentedButtonContainer } from \"@react-md/core/segmented-button/SegmentedButtonContainer\";\n * import type { ReactElement } from \"react\";\n * import { useState } from \"react\";\n *\n * function Example(): ReactElement {\n * const [value, setValue] = useState(\"a\");\n * return (\n * <SegmentedButtonContainer>\n * <SegmentedButton\n * onClick={() => setValue(\"a\")}\n * selected={value === \"a\"}\n * >\n * First\n * </SegmentedButton>\n * <SegmentedButton\n * onClick={() => setValue(\"b\")}\n * selected={value === \"b\"}\n * >\n * Second\n * </SegmentedButton>\n * <SegmentedButton\n * onClick={() => setValue(\"c\")}\n * selected={value === \"c\"}\n * disableSelectedIcon\n * >\n * Third\n * </SegmentedButton>\n * </SegmentedButtonContainer>\n * );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/segmented-button | SegmentedButton Demos}\n * @since 6.0.0\n */\nexport const SegmentedButton = forwardRef<\n HTMLButtonElement,\n SegmentedButtonProps\n>(function SegmentedButton(props, ref) {\n const {\n className,\n type = \"button\",\n leftAddon,\n rightAddon,\n children: propChildren,\n selected,\n selectedIcon: propSelectedIcon,\n selectedClassName,\n disableSelectedIcon,\n disableSelectedTransition,\n onBlur,\n onClick,\n onKeyDown,\n onKeyUp,\n onMouseDown,\n onMouseUp,\n onMouseLeave,\n onDragStart,\n onTouchStart,\n onTouchEnd,\n onTouchMove,\n disabled,\n disableRipple,\n ...remaining\n } = props;\n\n const children = useHigherContrastChildren(propChildren);\n const selectedIconNode = getIcon(\"selected\", propSelectedIcon);\n const selectedIcon = useMaxWidthTransition({\n element: selectedIconNode,\n transitionIn: !!selected,\n disabled: disableSelectedIcon,\n disableTransition: disableSelectedTransition,\n });\n const { pressedClassName, handlers, ripples } = useElementInteraction({\n mode: disableRipple ? \"none\" : undefined,\n onBlur,\n onClick,\n onKeyDown,\n onKeyUp,\n onMouseDown,\n onMouseUp,\n onMouseLeave,\n onDragStart,\n onTouchStart,\n onTouchEnd,\n onTouchMove,\n disabled,\n });\n\n return (\n <button\n {...remaining}\n {...handlers}\n aria-pressed={selected}\n ref={ref}\n type={type}\n disabled={disabled}\n className={segmentedButton({\n className,\n selected,\n selectedClassName,\n pressedClassName,\n })}\n >\n {!disableSelectedIcon && selectedIcon}\n {leftAddon}\n {children}\n {rightAddon}\n {ripples}\n </button>\n );\n});\n"],"names":["forwardRef","getIcon","useElementInteraction","useHigherContrastChildren","useMaxWidthTransition","segmentedButton","SegmentedButton","props","ref","className","type","leftAddon","rightAddon","children","propChildren","selected","selectedIcon","propSelectedIcon","selectedClassName","disableSelectedIcon","disableSelectedTransition","onBlur","onClick","onKeyDown","onKeyUp","onMouseDown","onMouseUp","onMouseLeave","onDragStart","onTouchStart","onTouchEnd","onTouchMove","disabled","disableRipple","remaining","selectedIconNode","element","transitionIn","disableTransition","pressedClassName","handlers","ripples","mode","undefined","button","aria-pressed"],"mappings":"AAAA;;AAEA,SAAoDA,UAAU,QAAQ,QAAQ;AAE9E,SAASC,OAAO,QAAQ,oBAAoB;AAE5C,SAASC,qBAAqB,QAAQ,0CAA0C;AAChF,SAASC,yBAAyB,QAAQ,8CAA8C;AACxF,SAEEC,qBAAqB,QAChB,yCAAyC;AAChD,SAEEC,eAAe,QACV,6BAA6B;AAgDpC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwCC,GACD,OAAO,MAAMC,gCAAkBN,WAG7B,SAASM,gBAAgBC,KAAK,EAAEC,GAAG;IACnC,MAAM,EACJC,SAAS,EACTC,OAAO,QAAQ,EACfC,SAAS,EACTC,UAAU,EACVC,UAAUC,YAAY,EACtBC,QAAQ,EACRC,cAAcC,gBAAgB,EAC9BC,iBAAiB,EACjBC,mBAAmB,EACnBC,yBAAyB,EACzBC,MAAM,EACNC,OAAO,EACPC,SAAS,EACTC,OAAO,EACPC,WAAW,EACXC,SAAS,EACTC,YAAY,EACZC,WAAW,EACXC,YAAY,EACZC,UAAU,EACVC,WAAW,EACXC,QAAQ,EACRC,aAAa,EACb,GAAGC,WACJ,GAAG3B;IAEJ,MAAMM,WAAWV,0BAA0BW;IAC3C,MAAMqB,mBAAmBlC,QAAQ,YAAYgB;IAC7C,MAAMD,eAAeZ,sBAAsB;QACzCgC,SAASD;QACTE,cAAc,CAAC,CAACtB;QAChBiB,UAAUb;QACVmB,mBAAmBlB;IACrB;IACA,MAAM,EAAEmB,gBAAgB,EAAEC,QAAQ,EAAEC,OAAO,EAAE,GAAGvC,sBAAsB;QACpEwC,MAAMT,gBAAgB,SAASU;QAC/BtB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;IACF;IAEA,qBACE,MAACY;QACE,GAAGV,SAAS;QACZ,GAAGM,QAAQ;QACZK,gBAAc9B;QACdP,KAAKA;QACLE,MAAMA;QACNsB,UAAUA;QACVvB,WAAWJ,gBAAgB;YACzBI;YACAM;YACAG;YACAqB;QACF;;YAEC,CAACpB,uBAAuBH;YACxBL;YACAE;YACAD;YACA6B;;;AAGP,GAAG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/segmented-button/SegmentedButtonContainer.tsx"],"sourcesContent":["import { type HTMLAttributes, type ReactNode, forwardRef } from \"react\";\n\nimport {\n type SegmentedButtonContainerClassNameOptions,\n segmentedButtonContainer,\n} from \"./segmentedButtonContainerStyles.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface SegmentedButtonContainerProps\n extends
|
|
1
|
+
{"version":3,"sources":["../../src/segmented-button/SegmentedButtonContainer.tsx"],"sourcesContent":["import { type HTMLAttributes, type ReactNode, forwardRef } from \"react\";\n\nimport {\n type SegmentedButtonContainerClassNameOptions,\n segmentedButtonContainer,\n} from \"./segmentedButtonContainerStyles.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface SegmentedButtonContainerProps\n extends\n HTMLAttributes<HTMLDivElement>,\n SegmentedButtonContainerClassNameOptions {\n children: ReactNode;\n}\n\n/**\n * Simple wrapper `div` to apply the segmented button container styles. You can\n * just use the {@link segmentedButtonContainer} util function instead.\n *\n * @example Without This Component\n * ```tsx\n * import { SegmentedButton } from \"@react-md/core/segmented-button/SegmentedButton\";\n * import { segmentedButtonContainer } from \"@react-md/core/segmented-button/SegmentedButtonContainer\";\n * import type { ReactElement } from \"react\";\n *\n * import { CustomWrapperComponent } from \"./CustomWrapperComponent.jsx\";\n *\n * function Example(): ReactElement {\n * return (\n * <CustomWrapperComponent className={segmentedButtonContainer()}>\n * <SegmentedButton>One</SegmentedButton>\n * <SegmentedButton>Two</SegmentedButton>\n * <SegmentedButton>Three</SegmentedButton>\n * </CustomWrapperComponent>\n * );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/segmented-button | SegmentedButton Demos}\n * @since 6.0.0\n */\nexport const SegmentedButtonContainer = forwardRef<\n HTMLDivElement,\n SegmentedButtonContainerProps\n>(function SegmentedButtonContainer(props, ref) {\n const { className, disableFullWidth, children, ...remaining } = props;\n\n return (\n <div\n {...remaining}\n ref={ref}\n className={segmentedButtonContainer({\n className,\n disableFullWidth,\n })}\n >\n {children}\n </div>\n );\n});\n"],"names":["forwardRef","segmentedButtonContainer","SegmentedButtonContainer","props","ref","className","disableFullWidth","children","remaining","div"],"mappings":";AAAA,SAA8CA,UAAU,QAAQ,QAAQ;AAExE,SAEEC,wBAAwB,QACnB,sCAAsC;AAY7C;;;;;;;;;;;;;;;;;;;;;;;;;CAyBC,GACD,OAAO,MAAMC,yCAA2BF,WAGtC,SAASE,yBAAyBC,KAAK,EAAEC,GAAG;IAC5C,MAAM,EAAEC,SAAS,EAAEC,gBAAgB,EAAEC,QAAQ,EAAE,GAAGC,WAAW,GAAGL;IAEhE,qBACE,KAACM;QACE,GAAGD,SAAS;QACbJ,KAAKA;QACLC,WAAWJ,yBAAyB;YAClCI;YACAC;QACF;kBAECC;;AAGP,GAAG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/segmented-button/segmentedButtonStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { cssUtils } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-segmented-button\");\n\ndeclare module \"react\" {\n interface CSSProperties {\n \"--rmd-segmented-button-border-radius\"?: string | number;\n \"--rmd-segmented-button-min-height\"?: string | number;\n \"--rmd-segmented-button-min-width\"?: string | number;\n \"--rmd-segmented-button-outline-width\"?: string | number;\n \"--rmd-segmented-button-outline-color\"?: string | number;\n \"--rmd-segmented-button-color\"?: string | number;\n \"--rmd-segmented-button-selected-background-color\"?: string | number;\n \"--rmd-segmented-button-selected-color\"?: string | number;\n }\n}\n\n/**\n * @since 6.3.1\n */\nexport interface BaseSegmentedButtonClassNameOptions {\n className?: string;\n\n /**\n * Set this to `true` to apply selected styles and an optional\n * {@link selectedIcon}\n *\n * @defaultValue `false`\n */\n selected?: boolean;\n\n /**\n * An optional className to apply when {@link selected} is `true`\n */\n selectedClassName?: string;\n}\n\n/**\n * @since 6.0.0\n * @since 6.3.1 Extends BaseSegmentedButtonClassNameOptions\n */\nexport interface SegmentedButtonClassNameOptions
|
|
1
|
+
{"version":3,"sources":["../../src/segmented-button/segmentedButtonStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { cssUtils } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-segmented-button\");\n\ndeclare module \"react\" {\n interface CSSProperties {\n \"--rmd-segmented-button-border-radius\"?: string | number;\n \"--rmd-segmented-button-min-height\"?: string | number;\n \"--rmd-segmented-button-min-width\"?: string | number;\n \"--rmd-segmented-button-outline-width\"?: string | number;\n \"--rmd-segmented-button-outline-color\"?: string | number;\n \"--rmd-segmented-button-color\"?: string | number;\n \"--rmd-segmented-button-selected-background-color\"?: string | number;\n \"--rmd-segmented-button-selected-color\"?: string | number;\n }\n}\n\n/**\n * @since 6.3.1\n */\nexport interface BaseSegmentedButtonClassNameOptions {\n className?: string;\n\n /**\n * Set this to `true` to apply selected styles and an optional\n * {@link selectedIcon}\n *\n * @defaultValue `false`\n */\n selected?: boolean;\n\n /**\n * An optional className to apply when {@link selected} is `true`\n */\n selectedClassName?: string;\n}\n\n/**\n * @since 6.0.0\n * @since 6.3.1 Extends BaseSegmentedButtonClassNameOptions\n */\nexport interface SegmentedButtonClassNameOptions extends BaseSegmentedButtonClassNameOptions {\n /** @internal */\n pressedClassName?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport function segmentedButton(\n options: SegmentedButtonClassNameOptions = {}\n): string {\n const { className, selected, selectedClassName, pressedClassName } = options;\n\n return cnb(\n styles({ selected }),\n selected && selectedClassName,\n pressedClassName,\n cssUtils({ surface: true }),\n className\n );\n}\n"],"names":["cnb","cssUtils","bem","styles","segmentedButton","options","className","selected","selectedClassName","pressedClassName","surface"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AA4CnB;;CAEC,GACD,OAAO,SAASE,gBACdC,UAA2C,CAAC,CAAC;IAE7C,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,iBAAiB,EAAEC,gBAAgB,EAAE,GAAGJ;IAErE,OAAOL,IACLG,OAAO;QAAEI;IAAS,IAClBA,YAAYC,mBACZC,kBACAR,SAAS;QAAES,SAAS;IAAK,IACzBJ;AAEJ"}
|
package/dist/sheet/Sheet.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/sheet/Sheet.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef } from \"react\";\n\nimport { type BaseDialogProps, Dialog } from \"../dialog/Dialog.js\";\nimport { type LabelRequiredForA11y } from \"../types.js\";\nimport {\n type BaseSheetClassNameOptions,\n DEFAULT_SHEET_CLASSNAMES,\n DEFAULT_SHEET_TIMEOUT,\n sheet,\n} from \"./styles.js\";\n\n/**\n * @since 6.0.0\n */\nexport type SheetDialogProps = Omit<BaseDialogProps, \"role\" | \"type\" | \"modal\">;\n\n/**\n * @since 6.0.0 extends the `SheetDialogProps` instead of `AllowedDialogProps`\n * and exports the `SheetDialogProps`.\n */\nexport interface BaseSheetProps\n extends SheetDialogProps
|
|
1
|
+
{"version":3,"sources":["../../src/sheet/Sheet.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef } from \"react\";\n\nimport { type BaseDialogProps, Dialog } from \"../dialog/Dialog.js\";\nimport { type LabelRequiredForA11y } from \"../types.js\";\nimport {\n type BaseSheetClassNameOptions,\n DEFAULT_SHEET_CLASSNAMES,\n DEFAULT_SHEET_TIMEOUT,\n sheet,\n} from \"./styles.js\";\n\n/**\n * @since 6.0.0\n */\nexport type SheetDialogProps = Omit<BaseDialogProps, \"role\" | \"type\" | \"modal\">;\n\n/**\n * @since 6.0.0 extends the `SheetDialogProps` instead of `AllowedDialogProps`\n * and exports the `SheetDialogProps`.\n */\nexport interface BaseSheetProps\n extends SheetDialogProps, BaseSheetClassNameOptions {\n /**\n * @defaultValue `\"dialog\"`\n */\n role?: \"dialog\" | \"menu\" | \"none\";\n\n /**\n * @defaultValue `true`\n * @see {@link SheetDialogProps.exitedHidden}\n * @since 6.0.0\n */\n exitedHidden?: boolean;\n}\n\nexport type SheetProps = LabelRequiredForA11y<BaseSheetProps>;\n\n/**\n * **Client Component**\n *\n * The `Sheet` component is a {@link Dialog} that is fixed to the top, right,\n * bottom, or left of the viewport.\n *\n * @example Simple Example\n * ```tsx\n * import { Button } from \"@react-md/core/button/Button\";\n * import { Sheet } from \"@react-md/core/sheet/Sheet\";\n * import { useToggle } from \"@react-md/core/useToggle\";\n * import { type ReactElement } from \"react\";\n *\n * export function Example(): ReactElement {\n * const { toggled, disable, enable } = useToggle();\n *\n * return (\n * <>\n * <Button onClick={enable}>Show</Button>\n * <Sheet aria-label=\"Customization\" visible={toggled} onRequestClose={disable}>\n * Whatever Content\n * </Sheet>\n * </>\n * );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/sheet | Sheet Demos}\n */\nexport const Sheet = forwardRef<HTMLDivElement, SheetProps>(\n function Sheet(props, ref) {\n const {\n role = \"dialog\",\n className,\n position = \"left\",\n horizontalSize = \"media\",\n verticalSize = \"recommended\",\n timeout = DEFAULT_SHEET_TIMEOUT,\n classNames = DEFAULT_SHEET_CLASSNAMES,\n visible,\n temporary = true,\n exitedHidden = true,\n raised,\n children,\n ...remaining\n } = props;\n const { disableOverlay } = props;\n\n return (\n <Dialog\n {...remaining}\n ref={ref}\n role={role}\n type=\"custom\"\n timeout={timeout}\n classNames={classNames}\n visible={visible}\n temporary={temporary}\n exitedHidden={exitedHidden}\n className={sheet({\n raised: raised ?? !disableOverlay,\n position,\n horizontalSize,\n verticalSize,\n className,\n })}\n >\n {children}\n </Dialog>\n );\n }\n);\n"],"names":["forwardRef","Dialog","DEFAULT_SHEET_CLASSNAMES","DEFAULT_SHEET_TIMEOUT","sheet","Sheet","props","ref","role","className","position","horizontalSize","verticalSize","timeout","classNames","visible","temporary","exitedHidden","raised","children","remaining","disableOverlay","type"],"mappings":"AAAA;;AAEA,SAASA,UAAU,QAAQ,QAAQ;AAEnC,SAA+BC,MAAM,QAAQ,sBAAsB;AAEnE,SAEEC,wBAAwB,EACxBC,qBAAqB,EACrBC,KAAK,QACA,cAAc;AA4BrB;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BC,GACD,OAAO,MAAMC,sBAAQL,WACnB,SAASK,MAAMC,KAAK,EAAEC,GAAG;IACvB,MAAM,EACJC,OAAO,QAAQ,EACfC,SAAS,EACTC,WAAW,MAAM,EACjBC,iBAAiB,OAAO,EACxBC,eAAe,aAAa,EAC5BC,UAAUV,qBAAqB,EAC/BW,aAAaZ,wBAAwB,EACrCa,OAAO,EACPC,YAAY,IAAI,EAChBC,eAAe,IAAI,EACnBC,MAAM,EACNC,QAAQ,EACR,GAAGC,WACJ,GAAGd;IACJ,MAAM,EAAEe,cAAc,EAAE,GAAGf;IAE3B,qBACE,KAACL;QACE,GAAGmB,SAAS;QACbb,KAAKA;QACLC,MAAMA;QACNc,MAAK;QACLT,SAASA;QACTC,YAAYA;QACZC,SAASA;QACTC,WAAWA;QACXC,cAAcA;QACdR,WAAWL,MAAM;YACfc,QAAQA,UAAU,CAACG;YACnBX;YACAC;YACAC;YACAH;QACF;kBAECU;;AAGP,GACA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/snackbar/Toast.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n type AriaRole,\n type HTMLAttributes,\n type ReactElement,\n type ReactNode,\n forwardRef,\n isValidElement,\n} from \"react\";\n\nimport { type ButtonProps } from \"../button/Button.js\";\nimport {\n type CSSTransitionClassNames,\n type TransitionCallbacks,\n type TransitionTimeout,\n} from \"../transition/types.js\";\nimport { useScaleTransition } from \"../transition/useScaleTransition.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { ToastActionButton } from \"./ToastActionButton.js\";\nimport { ToastCloseButton } from \"./ToastCloseButton.js\";\nimport { ToastContent, type ToastContentProps } from \"./ToastContent.js\";\nimport { type BaseToastClasNameOptions, toast } from \"./toastStyles.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface ConfigurableToastProps\n extends
|
|
1
|
+
{"version":3,"sources":["../../src/snackbar/Toast.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n type AriaRole,\n type HTMLAttributes,\n type ReactElement,\n type ReactNode,\n forwardRef,\n isValidElement,\n} from \"react\";\n\nimport { type ButtonProps } from \"../button/Button.js\";\nimport {\n type CSSTransitionClassNames,\n type TransitionCallbacks,\n type TransitionTimeout,\n} from \"../transition/types.js\";\nimport { useScaleTransition } from \"../transition/useScaleTransition.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { ToastActionButton } from \"./ToastActionButton.js\";\nimport { ToastCloseButton } from \"./ToastCloseButton.js\";\nimport { ToastContent, type ToastContentProps } from \"./ToastContent.js\";\nimport { type BaseToastClasNameOptions, toast } from \"./toastStyles.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface ConfigurableToastProps\n extends\n HTMLAttributes<HTMLDivElement>,\n BaseToastClasNameOptions,\n TransitionCallbacks {\n /**\n * Note: this default value will only be generated in the `Toast` component.\n *\n * @defaultValue `\"toast-\" + useId()`\n */\n id?: string;\n\n /**\n * Note: This is set while creating the toast.\n *\n * @defaultValue `visibleTime === null ? \"alert\" : \"status\"`\n */\n role?: AriaRole;\n\n /**\n * Set this to `true` to stack the content above the {@link action}. It is not\n * recommended to enable this prop if the {@link closeButton} is enabled.\n *\n * @defaultValue `false`\n */\n stacked?: boolean;\n\n /**\n * If this is not provided, a `ResizeObserver` will be used to determine if\n * there are multiple lines of content.\n */\n multiline?: boolean;\n\n /**\n * When this is a string or React element, it will be rendered as the\n * `children` within a `Button`\n */\n action?: ButtonProps | ReactElement | string;\n\n /**\n * This can be used to replace the custom action button behavior.\n */\n actionButton?: ReactNode;\n\n /**\n * @defaultValue `getIcon(\"close\")`\n */\n closeIcon?: ReactNode;\n\n /**\n * Set this to `true` if a close button should be rendered to the right of the\n * `children`.\n *\n * @defaultValue `!!closeButtonProps`\n */\n closeButton?: boolean;\n\n /**\n * Use this prop to override most of the close button behavior. The\n */\n closeButtonProps?: ButtonProps;\n\n /**\n * Any additional props that should be provided to the `<div>` that surrounds\n * the toast `children`.\n */\n contentProps?: PropsWithRef<ToastContentProps>;\n\n /**\n * Set this to `true` if the `children` for the toast should no longer be\n * wrapped in an additional `<div>` that applies some toast layout styles.\n * This should normally only be used for custom `Toast` implementations.\n *\n * @see the `Snackbar`'s `renderToast` prop for an example.\n */\n disableToastContent?: boolean;\n\n /**\n * The toast's transition timeout for entering and exiting. This is **not**\n * how long the toast should remain visible.\n *\n * @defaultValue `SCALE_TIMEOUT`\n */\n timeout?: TransitionTimeout;\n\n /**\n * The toast's transition class names for entering and exiting.\n *\n * @defaultValue `SCALE_CLASSNAMES`\n */\n classNames?: CSSTransitionClassNames;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ToastProps extends ConfigurableToastProps {\n paused?: boolean;\n visible: boolean;\n}\n\n/**\n * **Client Component**\n *\n * This component is just used for toast styling and does not implement any of\n * the visibility behavior.\n *\n * @see {@link https://react-md.dev/components/snackbar | Snackbar Demos}\n * @since 6.0.0\n */\nexport const Toast = forwardRef<HTMLDivElement, ToastProps>(\n function Toast(props, ref) {\n const {\n id: propId,\n className,\n timeout,\n classNames,\n theme = \"surface\",\n action: propAction,\n actionButton: propActionButton,\n paused,\n visible,\n closeIcon: propCloseIcon,\n closeButtonProps,\n closeButton = !!closeButtonProps,\n contentProps,\n disableToastContent,\n stacked,\n multiline,\n onEnter,\n onEntering,\n onEntered,\n onExit,\n onExiting,\n onExited,\n children,\n ...remaining\n } = props;\n const id = useEnsuredId(propId, \"toast\");\n\n let actionButton = propActionButton;\n if (propAction) {\n let overrides: ButtonProps = {};\n let buttonChildren: ReactNode;\n // have to use `any` to correctly filter out all react elements\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if (isValidElement<any>(propAction) || typeof propAction !== \"object\") {\n buttonChildren = propAction;\n } else {\n ({ children: buttonChildren, ...overrides } = propAction);\n }\n\n actionButton = (\n <ToastActionButton\n theme={theme === \"surface\" ? \"secondary\" : \"clear\"}\n reordered={stacked && closeButton}\n {...overrides}\n >\n {buttonChildren}\n </ToastActionButton>\n );\n }\n\n let closeIcon = propCloseIcon;\n if (typeof closeButtonProps?.children !== \"undefined\") {\n closeIcon = closeButtonProps.children;\n }\n\n const action = !!actionButton;\n const reordered = stacked && action && closeButton;\n const { elementProps, rendered } = useScaleTransition({\n appear: true,\n nodeRef: ref,\n className: toast({\n className,\n theme,\n action,\n paused,\n stacked,\n reordered,\n closeButton,\n }),\n timeout,\n classNames,\n onEnter,\n onEntering,\n onEntered,\n onExit,\n onExiting,\n onExited,\n temporary: true,\n transitionIn: visible,\n exitedHidden: true,\n });\n\n // this might get rid of the weird popping-back-in for a split second\n // that sometimes happens on mobile firefox\n if (!rendered) {\n return null;\n }\n\n return (\n <div {...remaining} {...elementProps} id={id}>\n <ToastContent\n action={action}\n stacked={stacked}\n multiline={multiline}\n closeButton={closeButton}\n disableWrapper={disableToastContent}\n {...contentProps}\n >\n {children}\n </ToastContent>\n {actionButton}\n {closeButton && (\n <ToastCloseButton reordered={reordered} {...closeButtonProps}>\n {closeIcon}\n </ToastCloseButton>\n )}\n </div>\n );\n }\n);\n"],"names":["forwardRef","isValidElement","useScaleTransition","useEnsuredId","ToastActionButton","ToastCloseButton","ToastContent","toast","Toast","props","ref","id","propId","className","timeout","classNames","theme","action","propAction","actionButton","propActionButton","paused","visible","closeIcon","propCloseIcon","closeButtonProps","closeButton","contentProps","disableToastContent","stacked","multiline","onEnter","onEntering","onEntered","onExit","onExiting","onExited","children","remaining","overrides","buttonChildren","reordered","elementProps","rendered","appear","nodeRef","temporary","transitionIn","exitedHidden","div","disableWrapper"],"mappings":"AAAA;;AAEA,SAKEA,UAAU,EACVC,cAAc,QACT,QAAQ;AAQf,SAASC,kBAAkB,QAAQ,sCAAsC;AAEzE,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,iBAAiB,QAAQ,yBAAyB;AAC3D,SAASC,gBAAgB,QAAQ,wBAAwB;AACzD,SAASC,YAAY,QAAgC,oBAAoB;AACzE,SAAwCC,KAAK,QAAQ,mBAAmB;AA0GxE;;;;;;;;CAQC,GACD,OAAO,MAAMC,sBAAQR,WACnB,SAASQ,MAAMC,KAAK,EAAEC,GAAG;IACvB,MAAM,EACJC,IAAIC,MAAM,EACVC,SAAS,EACTC,OAAO,EACPC,UAAU,EACVC,QAAQ,SAAS,EACjBC,QAAQC,UAAU,EAClBC,cAAcC,gBAAgB,EAC9BC,MAAM,EACNC,OAAO,EACPC,WAAWC,aAAa,EACxBC,gBAAgB,EAChBC,cAAc,CAAC,CAACD,gBAAgB,EAChCE,YAAY,EACZC,mBAAmB,EACnBC,OAAO,EACPC,SAAS,EACTC,OAAO,EACPC,UAAU,EACVC,SAAS,EACTC,MAAM,EACNC,SAAS,EACTC,QAAQ,EACRC,QAAQ,EACR,GAAGC,WACJ,GAAG7B;IACJ,MAAME,KAAKR,aAAaS,QAAQ;IAEhC,IAAIO,eAAeC;IACnB,IAAIF,YAAY;QACd,IAAIqB,YAAyB,CAAC;QAC9B,IAAIC;QACJ,+DAA+D;QAC/D,8DAA8D;QAC9D,kBAAIvC,eAAoBiB,eAAe,OAAOA,eAAe,UAAU;YACrEsB,iBAAiBtB;QACnB,OAAO;YACJ,CAAA,EAAEmB,UAAUG,cAAc,EAAE,GAAGD,WAAW,GAAGrB,UAAS;QACzD;QAEAC,6BACE,KAACf;YACCY,OAAOA,UAAU,YAAY,cAAc;YAC3CyB,WAAWZ,WAAWH;YACrB,GAAGa,SAAS;sBAEZC;;IAGP;IAEA,IAAIjB,YAAYC;IAChB,IAAI,OAAOC,kBAAkBY,aAAa,aAAa;QACrDd,YAAYE,iBAAiBY,QAAQ;IACvC;IAEA,MAAMpB,SAAS,CAAC,CAACE;IACjB,MAAMsB,YAAYZ,WAAWZ,UAAUS;IACvC,MAAM,EAAEgB,YAAY,EAAEC,QAAQ,EAAE,GAAGzC,mBAAmB;QACpD0C,QAAQ;QACRC,SAASnC;QACTG,WAAWN,MAAM;YACfM;YACAG;YACAC;YACAI;YACAQ;YACAY;YACAf;QACF;QACAZ;QACAC;QACAgB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAU,WAAW;QACXC,cAAczB;QACd0B,cAAc;IAChB;IAEA,qEAAqE;IACrE,2CAA2C;IAC3C,IAAI,CAACL,UAAU;QACb,OAAO;IACT;IAEA,qBACE,MAACM;QAAK,GAAGX,SAAS;QAAG,GAAGI,YAAY;QAAE/B,IAAIA;;0BACxC,KAACL;gBACCW,QAAQA;gBACRY,SAASA;gBACTC,WAAWA;gBACXJ,aAAaA;gBACbwB,gBAAgBtB;gBACf,GAAGD,YAAY;0BAEfU;;YAEFlB;YACAO,6BACC,KAACrB;gBAAiBoC,WAAWA;gBAAY,GAAGhB,gBAAgB;0BACzDF;;;;AAKX,GACA"}
|
|
@@ -152,10 +152,10 @@ $light-theme-color: a11y.contrast-color($light-theme-background-color) !default;
|
|
|
152
152
|
|
|
153
153
|
/// The background-color to use in the dark theme.
|
|
154
154
|
/// @type Color
|
|
155
|
+
// prettier-ignore
|
|
155
156
|
$dark-theme-background-color: if(
|
|
156
|
-
theme.$disable-dark-elevation
|
|
157
|
-
|
|
158
|
-
map.get(theme.$dark-elevation-colors, $elevation)
|
|
157
|
+
sass(theme.$disable-dark-elevation): $light-theme-background-color;
|
|
158
|
+
else: map.get(theme.$dark-elevation-colors, $elevation)
|
|
159
159
|
) !default;
|
|
160
160
|
|
|
161
161
|
/// The text color to use in the dark theme.
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { type HTMLAttributes } from "react";
|
|
2
|
+
import { type LabelRequiredForA11y } from "../types.js";
|
|
3
|
+
import { type SpinButtonOptions, type SpinButtonValueOptions } from "./types.js";
|
|
4
|
+
/**
|
|
5
|
+
* @since 6.4.0
|
|
6
|
+
*/
|
|
7
|
+
export interface SpinButtonProps extends Omit<HTMLAttributes<HTMLDivElement>, keyof SpinButtonOptions>, Omit<SpinButtonOptions<HTMLDivElement>, "ref" | "children"> {
|
|
8
|
+
}
|
|
9
|
+
/**
|
|
10
|
+
* The `SpinButton` component can be used as a simple wrapper around the
|
|
11
|
+
* {@link useSpinButton} hook if it should be rendered within a `<div>` and
|
|
12
|
+
* only the rendering behavior is required.
|
|
13
|
+
*
|
|
14
|
+
* @since 6.4.0
|
|
15
|
+
*/
|
|
16
|
+
export declare const SpinButton: import("react").ForwardRefExoticComponent<(LabelRequiredForA11y<SpinButtonProps> & SpinButtonValueOptions) & import("react").RefAttributes<HTMLDivElement>>;
|