@react-md/core 1.0.0-next.20 → 1.0.0-next.21
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 +1 -0
- package/dist/CoreProviders.js.map +1 -1
- package/dist/NoSsr.d.ts +3 -1
- package/dist/NoSsr.js +3 -1
- package/dist/NoSsr.js.map +1 -1
- package/dist/RootHtml.d.ts +1 -1
- package/dist/RootHtml.js +1 -1
- package/dist/RootHtml.js.map +1 -1
- package/dist/SsrProvider.d.ts +1 -0
- package/dist/SsrProvider.js +1 -0
- package/dist/SsrProvider.js.map +1 -1
- package/dist/_a11y.scss +187 -0
- package/dist/_base.scss +479 -0
- package/dist/_box-shadows.scss +80 -71
- package/dist/_colors.scss +283 -279
- package/dist/_core.scss +5 -483
- package/dist/_object-fit.scss +27 -23
- package/dist/_utils.scss +225 -225
- package/dist/app-bar/AppBar.d.ts +3 -1
- package/dist/app-bar/AppBar.js +3 -1
- package/dist/app-bar/AppBar.js.map +1 -1
- package/dist/app-bar/AppBarTitle.d.ts +2 -1
- package/dist/app-bar/AppBarTitle.js +2 -1
- package/dist/app-bar/AppBarTitle.js.map +1 -1
- package/dist/app-bar/_app-bar.scss +112 -105
- package/dist/autocomplete/Autocomplete.d.ts +81 -2
- package/dist/autocomplete/Autocomplete.js +4 -2
- package/dist/autocomplete/Autocomplete.js.map +1 -1
- package/dist/autocomplete/AutocompleteChip.d.ts +1 -0
- package/dist/autocomplete/AutocompleteChip.js +1 -0
- package/dist/autocomplete/AutocompleteChip.js.map +1 -1
- package/dist/autocomplete/AutocompleteCircularProgress.d.ts +1 -0
- package/dist/autocomplete/AutocompleteCircularProgress.js +1 -0
- package/dist/autocomplete/AutocompleteCircularProgress.js.map +1 -1
- package/dist/autocomplete/AutocompleteClearButton.d.ts +1 -0
- package/dist/autocomplete/AutocompleteClearButton.js +4 -2
- package/dist/autocomplete/AutocompleteClearButton.js.map +1 -1
- package/dist/autocomplete/AutocompleteDropdownButton.d.ts +1 -0
- package/dist/autocomplete/AutocompleteDropdownButton.js +1 -0
- package/dist/autocomplete/AutocompleteDropdownButton.js.map +1 -1
- package/dist/autocomplete/AutocompleteListboxChildren.d.ts +1 -3
- package/dist/autocomplete/AutocompleteListboxChildren.js.map +1 -1
- package/dist/autocomplete/_autocomplete.scss +125 -71
- package/dist/autocomplete/autocompleteStyles.d.ts +3 -0
- package/dist/autocomplete/autocompleteStyles.js +5 -2
- package/dist/autocomplete/autocompleteStyles.js.map +1 -1
- package/dist/autocomplete/types.d.ts +128 -82
- package/dist/autocomplete/types.js.map +1 -1
- package/dist/autocomplete/useAutocomplete.d.ts +3 -0
- package/dist/autocomplete/useAutocomplete.js +17 -17
- package/dist/autocomplete/useAutocomplete.js.map +1 -1
- package/dist/autocomplete/utils.d.ts +3 -6
- package/dist/autocomplete/utils.js.map +1 -1
- package/dist/avatar/Avatar.d.ts +2 -1
- package/dist/avatar/Avatar.js +2 -1
- package/dist/avatar/Avatar.js.map +1 -1
- package/dist/avatar/_avatar.scss +81 -77
- package/dist/badge/Badge.d.ts +8 -4
- package/dist/badge/Badge.js +8 -4
- package/dist/badge/Badge.js.map +1 -1
- package/dist/badge/_badge.scss +72 -68
- package/dist/box/Box.d.ts +4 -3
- package/dist/box/Box.js +4 -3
- package/dist/box/Box.js.map +1 -1
- package/dist/box/_box.scss +115 -119
- package/dist/button/AsyncButton.d.ts +3 -2
- package/dist/button/AsyncButton.js +4 -3
- package/dist/button/AsyncButton.js.map +1 -1
- package/dist/button/Button.d.ts +11 -9
- package/dist/button/Button.js +11 -9
- package/dist/button/Button.js.map +1 -1
- package/dist/button/ButtonUnstyled.d.ts +1 -0
- package/dist/button/ButtonUnstyled.js +2 -1
- package/dist/button/ButtonUnstyled.js.map +1 -1
- package/dist/button/TooltippedButton.d.ts +3 -2
- package/dist/button/TooltippedButton.js +2 -1
- package/dist/button/TooltippedButton.js.map +1 -1
- package/dist/button/_button.scss +128 -98
- package/dist/button/{buttonStyles.d.ts → styles.d.ts} +10 -0
- package/dist/button/{buttonStyles.js → styles.js} +9 -1
- package/dist/button/styles.js.map +1 -0
- package/dist/card/Card.d.ts +9 -10
- package/dist/card/Card.js +9 -10
- package/dist/card/Card.js.map +1 -1
- package/dist/card/CardContent.d.ts +1 -0
- package/dist/card/CardContent.js +1 -0
- package/dist/card/CardContent.js.map +1 -1
- package/dist/card/CardFooter.d.ts +1 -0
- package/dist/card/CardFooter.js +1 -0
- package/dist/card/CardFooter.js.map +1 -1
- package/dist/card/CardHeader.d.ts +1 -0
- package/dist/card/CardHeader.js +1 -0
- package/dist/card/CardHeader.js.map +1 -1
- package/dist/card/CardSubtitle.d.ts +1 -0
- package/dist/card/CardSubtitle.js +1 -0
- package/dist/card/CardSubtitle.js.map +1 -1
- package/dist/card/CardTitle.d.ts +2 -1
- package/dist/card/CardTitle.js +1 -0
- package/dist/card/CardTitle.js.map +1 -1
- package/dist/card/ClickableCard.d.ts +3 -1
- package/dist/card/ClickableCard.js +3 -1
- package/dist/card/ClickableCard.js.map +1 -1
- package/dist/card/_card.scss +76 -71
- package/dist/chip/Chip.d.ts +5 -3
- package/dist/chip/Chip.js +5 -3
- package/dist/chip/Chip.js.map +1 -1
- package/dist/chip/_chip.scss +247 -33
- package/dist/cssUtils.d.ts +1 -1
- package/dist/cssUtils.js.map +1 -1
- package/dist/dialog/Dialog.d.ts +9 -10
- package/dist/dialog/Dialog.js +9 -10
- package/dist/dialog/Dialog.js.map +1 -1
- package/dist/dialog/DialogContent.d.ts +2 -0
- package/dist/dialog/DialogContent.js +5 -2
- package/dist/dialog/DialogContent.js.map +1 -1
- package/dist/dialog/DialogFooter.d.ts +2 -0
- package/dist/dialog/DialogFooter.js +5 -2
- package/dist/dialog/DialogFooter.js.map +1 -1
- package/dist/dialog/DialogHeader.d.ts +14 -2
- package/dist/dialog/DialogHeader.js +8 -2
- package/dist/dialog/DialogHeader.js.map +1 -1
- package/dist/dialog/DialogTitle.d.ts +2 -0
- package/dist/dialog/DialogTitle.js +5 -2
- package/dist/dialog/DialogTitle.js.map +1 -1
- package/dist/dialog/FixedDialog.d.ts +11 -10
- package/dist/dialog/FixedDialog.js +13 -12
- package/dist/dialog/FixedDialog.js.map +1 -1
- package/dist/dialog/_dialog.scss +167 -22
- package/dist/dialog/styles.d.ts +12 -6
- package/dist/dialog/styles.js +11 -5
- package/dist/dialog/styles.js.map +1 -1
- package/dist/divider/Divider.d.ts +3 -1
- package/dist/divider/Divider.js +3 -1
- package/dist/divider/Divider.js.map +1 -1
- package/dist/divider/_divider.scss +68 -0
- package/dist/divider/styles.js.map +1 -1
- package/dist/draggable/_draggable.scss +16 -0
- package/dist/draggable/useDraggable.d.ts +1 -0
- package/dist/draggable/useDraggable.js +1 -0
- package/dist/draggable/useDraggable.js.map +1 -1
- package/dist/error-boundary/ErrorBoundary.d.ts +58 -0
- package/dist/error-boundary/ErrorBoundary.js +99 -0
- package/dist/error-boundary/ErrorBoundary.js.map +1 -0
- package/dist/error-boundary/context.d.ts +11 -0
- package/dist/error-boundary/context.js +12 -0
- package/dist/error-boundary/context.js.map +1 -0
- package/dist/error-boundary/types.d.ts +16 -0
- package/dist/error-boundary/types.js +7 -0
- package/dist/error-boundary/types.js.map +1 -0
- package/dist/error-boundary/useErrorBoundary.d.ts +25 -0
- package/dist/error-boundary/useErrorBoundary.js +33 -0
- package/dist/error-boundary/useErrorBoundary.js.map +1 -0
- package/dist/expansion-panel/ExpansionList.d.ts +1 -0
- package/dist/expansion-panel/ExpansionList.js +1 -0
- package/dist/expansion-panel/ExpansionList.js.map +1 -1
- package/dist/expansion-panel/ExpansionPanel.d.ts +32 -0
- package/dist/expansion-panel/ExpansionPanel.js +32 -0
- package/dist/expansion-panel/ExpansionPanel.js.map +1 -1
- package/dist/expansion-panel/ExpansionPanelHeader.d.ts +4 -7
- package/dist/expansion-panel/ExpansionPanelHeader.js +9 -10
- package/dist/expansion-panel/ExpansionPanelHeader.js.map +1 -1
- package/dist/expansion-panel/_expansion-panel.scss +45 -0
- package/dist/expansion-panel/expansionPanelStyles.d.ts +20 -0
- package/dist/expansion-panel/expansionPanelStyles.js +12 -0
- package/dist/expansion-panel/expansionPanelStyles.js.map +1 -1
- package/dist/expansion-panel/useExpansionList.d.ts +7 -8
- package/dist/expansion-panel/useExpansionList.js +7 -8
- package/dist/expansion-panel/useExpansionList.js.map +1 -1
- package/dist/expansion-panel/useExpansionPanels.d.ts +7 -10
- package/dist/expansion-panel/useExpansionPanels.js +7 -10
- package/dist/expansion-panel/useExpansionPanels.js.map +1 -1
- package/dist/files/FileInput.d.ts +4 -2
- package/dist/files/FileInput.js +3 -1
- package/dist/files/FileInput.js.map +1 -1
- package/dist/files/_files.scss +9 -0
- package/dist/files/styles.d.ts +1 -1
- package/dist/files/styles.js +1 -1
- package/dist/files/styles.js.map +1 -1
- package/dist/files/useFileUpload.d.ts +2 -0
- package/dist/files/useFileUpload.js +2 -0
- package/dist/files/useFileUpload.js.map +1 -1
- package/dist/focus/useFocusContainer.js +24 -23
- package/dist/focus/useFocusContainer.js.map +1 -1
- package/dist/form/Checkbox.d.ts +3 -1
- package/dist/form/Checkbox.js +3 -1
- package/dist/form/Checkbox.js.map +1 -1
- package/dist/form/Fieldset.d.ts +6 -20
- package/dist/form/Fieldset.js +6 -13
- package/dist/form/Fieldset.js.map +1 -1
- package/dist/form/Form.d.ts +2 -0
- package/dist/form/Form.js +2 -0
- package/dist/form/Form.js.map +1 -1
- package/dist/form/FormMessage.d.ts +2 -0
- package/dist/form/FormMessage.js +2 -0
- package/dist/form/FormMessage.js.map +1 -1
- package/dist/form/FormMessageContainer.d.ts +1 -0
- package/dist/form/FormMessageContainer.js +1 -0
- package/dist/form/FormMessageContainer.js.map +1 -1
- package/dist/form/FormMessageCounter.d.ts +2 -0
- package/dist/form/FormMessageCounter.js +2 -0
- package/dist/form/FormMessageCounter.js.map +1 -1
- package/dist/form/InputToggle.d.ts +4 -2
- package/dist/form/InputToggle.js +2 -0
- package/dist/form/InputToggle.js.map +1 -1
- package/dist/form/Label.d.ts +4 -5
- package/dist/form/Label.js +4 -32
- package/dist/form/Label.js.map +1 -1
- package/dist/form/Legend.d.ts +1 -0
- package/dist/form/Legend.js +1 -0
- package/dist/form/Legend.js.map +1 -1
- package/dist/form/Listbox.d.ts +1 -1
- package/dist/form/Listbox.js.map +1 -1
- package/dist/form/MenuItemCheckbox.d.ts +3 -1
- package/dist/form/MenuItemCheckbox.js +3 -1
- package/dist/form/MenuItemCheckbox.js.map +1 -1
- package/dist/form/MenuItemFileInput.d.ts +1 -0
- package/dist/form/MenuItemFileInput.js +1 -0
- package/dist/form/MenuItemFileInput.js.map +1 -1
- package/dist/form/MenuItemInputToggle.d.ts +3 -2
- package/dist/form/MenuItemInputToggle.js +1 -0
- package/dist/form/MenuItemInputToggle.js.map +1 -1
- package/dist/form/MenuItemRadio.d.ts +8 -8
- package/dist/form/MenuItemRadio.js +8 -8
- package/dist/form/MenuItemRadio.js.map +1 -1
- package/dist/form/MenuItemSwitch.d.ts +3 -1
- package/dist/form/MenuItemSwitch.js +3 -1
- package/dist/form/MenuItemSwitch.js.map +1 -1
- package/dist/form/MenuItemTextField.d.ts +1 -0
- package/dist/form/MenuItemTextField.js +1 -0
- package/dist/form/MenuItemTextField.js.map +1 -1
- package/dist/form/NativeSelect.d.ts +2 -0
- package/dist/form/NativeSelect.js +2 -0
- package/dist/form/NativeSelect.js.map +1 -1
- package/dist/form/OptGroup.d.ts +4 -1
- package/dist/form/OptGroup.js +4 -1
- package/dist/form/OptGroup.js.map +1 -1
- package/dist/form/Option.d.ts +2 -1
- package/dist/form/Option.js +1 -0
- package/dist/form/Option.js.map +1 -1
- package/dist/form/Password.d.ts +3 -1
- package/dist/form/Password.js +3 -1
- package/dist/form/Password.js.map +1 -1
- package/dist/form/Radio.d.ts +2 -0
- package/dist/form/Radio.js +2 -0
- package/dist/form/Radio.js.map +1 -1
- package/dist/form/Select.d.ts +5 -28
- package/dist/form/Select.js +4 -27
- package/dist/form/Select.js.map +1 -1
- package/dist/form/Slider.d.ts +9 -2
- package/dist/form/Slider.js.map +1 -1
- package/dist/form/SliderContainer.js +7 -11
- package/dist/form/SliderContainer.js.map +1 -1
- package/dist/form/SliderMark.js +5 -8
- package/dist/form/SliderMark.js.map +1 -1
- package/dist/form/SliderMarkLabel.js +5 -7
- package/dist/form/SliderMarkLabel.js.map +1 -1
- package/dist/form/SliderThumb.js +2 -27
- package/dist/form/SliderThumb.js.map +1 -1
- package/dist/form/SliderTrack.js +6 -12
- package/dist/form/SliderTrack.js.map +1 -1
- package/dist/form/SliderValueTooltip.js +7 -7
- package/dist/form/SliderValueTooltip.js.map +1 -1
- package/dist/form/Switch.d.ts +9 -1
- package/dist/form/Switch.js +3 -1
- package/dist/form/Switch.js.map +1 -1
- package/dist/form/SwitchTrack.js +8 -8
- package/dist/form/SwitchTrack.js.map +1 -1
- package/dist/form/TextArea.d.ts +9 -1
- package/dist/form/TextArea.js +3 -1
- package/dist/form/TextArea.js.map +1 -1
- package/dist/form/TextField.d.ts +3 -1
- package/dist/form/TextField.js +3 -1
- package/dist/form/TextField.js.map +1 -1
- package/dist/form/TextFieldAddon.d.ts +1 -34
- package/dist/form/TextFieldAddon.js +1 -16
- package/dist/form/TextFieldAddon.js.map +1 -1
- package/dist/form/TextFieldContainer.d.ts +13 -0
- package/dist/form/TextFieldContainer.js.map +1 -1
- package/dist/form/_form.scss +737 -10
- package/dist/form/fieldsetStyles.d.ts +19 -0
- package/dist/form/fieldsetStyles.js +14 -0
- package/dist/form/fieldsetStyles.js.map +1 -0
- package/dist/form/formConfig.js +22 -3
- package/dist/form/formConfig.js.map +1 -1
- package/dist/form/labelStyles.d.ts +5 -0
- package/dist/form/labelStyles.js +34 -0
- package/dist/form/labelStyles.js.map +1 -0
- package/dist/form/sliderStyles.d.ts +89 -0
- package/dist/form/sliderStyles.js +96 -0
- package/dist/form/sliderStyles.js.map +1 -0
- package/dist/form/switchStyles.d.ts +24 -6
- package/dist/form/switchStyles.js +18 -0
- package/dist/form/switchStyles.js.map +1 -1
- package/dist/form/textAreaStyles.d.ts +0 -6
- package/dist/form/textAreaStyles.js.map +1 -1
- package/dist/form/textFieldAddonStyles.d.ts +17 -0
- package/dist/form/textFieldAddonStyles.js +18 -0
- package/dist/form/textFieldAddonStyles.js.map +1 -0
- package/dist/form/textFieldContainerStyles.d.ts +0 -13
- package/dist/form/textFieldContainerStyles.js.map +1 -1
- package/dist/form/types.d.ts +23 -2
- package/dist/form/types.js.map +1 -1
- package/dist/form/useCheckboxGroup.d.ts +8 -0
- package/dist/form/useCheckboxGroup.js +6 -1
- package/dist/form/useCheckboxGroup.js.map +1 -1
- package/dist/form/useCombobox.d.ts +0 -1
- package/dist/form/useCombobox.js +66 -63
- package/dist/form/useCombobox.js.map +1 -1
- package/dist/form/useNumberField.d.ts +17 -7
- package/dist/form/useNumberField.js +2 -0
- package/dist/form/useNumberField.js.map +1 -1
- package/dist/form/useRadioGroup.d.ts +6 -0
- package/dist/form/useRadioGroup.js +3 -0
- package/dist/form/useRadioGroup.js.map +1 -1
- package/dist/form/useRangeSlider.d.ts +6 -1
- package/dist/form/useRangeSlider.js +6 -1
- package/dist/form/useRangeSlider.js.map +1 -1
- package/dist/form/useSlider.d.ts +4 -1
- package/dist/form/useSlider.js +4 -1
- package/dist/form/useSlider.js.map +1 -1
- package/dist/form/useTextField.d.ts +7 -1
- package/dist/form/useTextField.js +5 -1
- package/dist/form/useTextField.js.map +1 -1
- package/dist/form/validation.d.ts +1 -0
- package/dist/form/validation.js.map +1 -1
- package/dist/icon/FontIcon.d.ts +1 -0
- package/dist/icon/FontIcon.js +1 -0
- package/dist/icon/FontIcon.js.map +1 -1
- package/dist/icon/IconRotator.d.ts +2 -0
- package/dist/icon/IconRotator.js +2 -0
- package/dist/icon/IconRotator.js.map +1 -1
- package/dist/icon/MaterialIcon.d.ts +2 -0
- package/dist/icon/MaterialIcon.js +2 -0
- package/dist/icon/MaterialIcon.js.map +1 -1
- package/dist/icon/MaterialSymbol.d.ts +3 -1
- package/dist/icon/MaterialSymbol.js +3 -1
- package/dist/icon/MaterialSymbol.js.map +1 -1
- package/dist/icon/SVGIcon.d.ts +2 -0
- package/dist/icon/SVGIcon.js +2 -0
- package/dist/icon/SVGIcon.js.map +1 -1
- package/dist/icon/TextIconSpacing.d.ts +6 -2
- package/dist/icon/TextIconSpacing.js +6 -2
- package/dist/icon/TextIconSpacing.js.map +1 -1
- package/dist/icon/_icon.scss +137 -129
- package/dist/icon/config.d.ts +2 -2
- package/dist/icon/config.js +2 -2
- package/dist/icon/config.js.map +1 -1
- package/dist/icon/material.d.ts +1 -1
- package/dist/icon/material.js.map +1 -1
- package/dist/icon/styles.d.ts +2 -1
- package/dist/icon/styles.js.map +1 -1
- package/dist/interaction/Ripple.d.ts +11 -2
- package/dist/interaction/Ripple.js.map +1 -1
- package/dist/interaction/UserInteractionModeProvider.d.ts +1 -1
- package/dist/interaction/UserInteractionModeProvider.js +1 -1
- package/dist/interaction/UserInteractionModeProvider.js.map +1 -1
- package/dist/interaction/_interaction.scss +279 -13
- package/dist/layout/LayoutAppBar.d.ts +1 -0
- package/dist/layout/LayoutAppBar.js +1 -0
- package/dist/layout/LayoutAppBar.js.map +1 -1
- package/dist/layout/LayoutNav.d.ts +9 -12
- package/dist/layout/LayoutNav.js +9 -12
- package/dist/layout/LayoutNav.js.map +1 -1
- package/dist/layout/LayoutWindowSplitter.d.ts +7 -8
- package/dist/layout/LayoutWindowSplitter.js +7 -8
- package/dist/layout/LayoutWindowSplitter.js.map +1 -1
- package/dist/layout/Main.d.ts +2 -1
- package/dist/layout/Main.js +2 -1
- package/dist/layout/Main.js.map +1 -1
- package/dist/layout/_layout.scss +106 -23
- package/dist/layout/useExpandableLayout.d.ts +1 -0
- package/dist/layout/useExpandableLayout.js +1 -0
- package/dist/layout/useExpandableLayout.js.map +1 -1
- package/dist/layout/useHorizontalLayoutTransition.d.ts +9 -6
- package/dist/layout/useHorizontalLayoutTransition.js +4 -1
- package/dist/layout/useHorizontalLayoutTransition.js.map +1 -1
- package/dist/layout/useLayoutAppBarHeight.d.ts +7 -10
- package/dist/layout/useLayoutAppBarHeight.js +7 -10
- package/dist/layout/useLayoutAppBarHeight.js.map +1 -1
- package/dist/layout/useLayoutTree.d.ts +3 -0
- package/dist/layout/useLayoutTree.js +3 -0
- package/dist/layout/useLayoutTree.js.map +1 -1
- package/dist/layout/useLayoutWindowSplitter.d.ts +4 -2
- package/dist/layout/useLayoutWindowSplitter.js +4 -2
- package/dist/layout/useLayoutWindowSplitter.js.map +1 -1
- package/dist/layout/useResizableLayout.d.ts +1 -0
- package/dist/layout/useResizableLayout.js +3 -1
- package/dist/layout/useResizableLayout.js.map +1 -1
- package/dist/layout/useTemporaryLayout.d.ts +1 -0
- package/dist/layout/useTemporaryLayout.js +1 -0
- package/dist/layout/useTemporaryLayout.js.map +1 -1
- package/dist/link/Link.d.ts +3 -1
- package/dist/link/Link.js +3 -1
- package/dist/link/Link.js.map +1 -1
- package/dist/link/SkipToMainContent.d.ts +22 -0
- package/dist/link/SkipToMainContent.js +22 -0
- package/dist/link/SkipToMainContent.js.map +1 -1
- package/dist/link/_link.scss +55 -6
- package/dist/list/List.d.ts +11 -1
- package/dist/list/List.js +5 -1
- package/dist/list/List.js.map +1 -1
- package/dist/list/ListItem.d.ts +22 -2
- package/dist/list/ListItem.js +6 -2
- package/dist/list/ListItem.js.map +1 -1
- package/dist/list/ListItemChildren.d.ts +3 -1
- package/dist/list/ListItemChildren.js +3 -1
- package/dist/list/ListItemChildren.js.map +1 -1
- package/dist/list/ListItemLink.d.ts +32 -1
- package/dist/list/ListItemLink.js +32 -1
- package/dist/list/ListItemLink.js.map +1 -1
- package/dist/list/ListSubheader.d.ts +2 -0
- package/dist/list/ListSubheader.js +2 -0
- package/dist/list/ListSubheader.js.map +1 -1
- package/dist/list/_list.scss +224 -1
- package/dist/list/listItemStyles.d.ts +0 -16
- package/dist/list/listItemStyles.js.map +1 -1
- package/dist/list/listStyles.d.ts +0 -6
- package/dist/list/listStyles.js.map +1 -1
- package/dist/media-queries/AppSizeProvider.d.ts +2 -0
- package/dist/media-queries/AppSizeProvider.js +2 -0
- package/dist/media-queries/AppSizeProvider.js.map +1 -1
- package/dist/media-queries/_media-queries.scss +111 -4
- package/dist/media-queries/useMediaQuery.d.ts +2 -0
- package/dist/media-queries/useMediaQuery.js +2 -0
- package/dist/media-queries/useMediaQuery.js.map +1 -1
- package/dist/menu/DropdownMenu.d.ts +5 -2
- package/dist/menu/DropdownMenu.js +5 -2
- package/dist/menu/DropdownMenu.js.map +1 -1
- package/dist/menu/Menu.d.ts +1 -0
- package/dist/menu/Menu.js +1 -0
- package/dist/menu/Menu.js.map +1 -1
- package/dist/menu/MenuBar.d.ts +4 -1
- package/dist/menu/MenuBar.js +4 -1
- package/dist/menu/MenuBar.js.map +1 -1
- package/dist/menu/MenuButton.d.ts +1 -0
- package/dist/menu/MenuButton.js +1 -0
- package/dist/menu/MenuButton.js.map +1 -1
- package/dist/menu/MenuItem.d.ts +1 -0
- package/dist/menu/MenuItem.js +1 -0
- package/dist/menu/MenuItem.js.map +1 -1
- package/dist/menu/MenuItemCircularProgress.d.ts +4 -6
- package/dist/menu/MenuItemCircularProgress.js +4 -6
- package/dist/menu/MenuItemCircularProgress.js.map +1 -1
- package/dist/menu/MenuItemGroup.d.ts +6 -7
- package/dist/menu/MenuItemGroup.js +6 -7
- package/dist/menu/MenuItemGroup.js.map +1 -1
- package/dist/menu/MenuItemSeparator.d.ts +1 -0
- package/dist/menu/MenuItemSeparator.js +1 -0
- package/dist/menu/MenuItemSeparator.js.map +1 -1
- package/dist/menu/MenuWidget.d.ts +0 -12
- package/dist/menu/MenuWidget.js +1 -12
- package/dist/menu/MenuWidget.js.map +1 -1
- package/dist/menu/_menu.scss +61 -0
- package/dist/menu/styles.d.ts +12 -0
- package/dist/menu/styles.js +14 -0
- package/dist/menu/styles.js.map +1 -0
- package/dist/menu/useContextMenu.d.ts +4 -1
- package/dist/menu/useContextMenu.js +4 -1
- package/dist/menu/useContextMenu.js.map +1 -1
- package/dist/movement/useKeyboardMovementProvider.d.ts +3 -3
- package/dist/movement/useKeyboardMovementProvider.js +3 -3
- package/dist/movement/useKeyboardMovementProvider.js.map +1 -1
- package/dist/navigation/CollapsibleNavGroup.d.ts +1 -0
- package/dist/navigation/CollapsibleNavGroup.js +1 -0
- package/dist/navigation/CollapsibleNavGroup.js.map +1 -1
- package/dist/navigation/DefaultNavigationRenderer.d.ts +1 -0
- package/dist/navigation/DefaultNavigationRenderer.js +1 -0
- package/dist/navigation/DefaultNavigationRenderer.js.map +1 -1
- package/dist/navigation/NavGroup.d.ts +1 -0
- package/dist/navigation/NavGroup.js +1 -0
- package/dist/navigation/NavGroup.js.map +1 -1
- package/dist/navigation/NavItem.d.ts +1 -0
- package/dist/navigation/NavItem.js +1 -0
- package/dist/navigation/NavItem.js.map +1 -1
- package/dist/navigation/NavItemButton.d.ts +1 -0
- package/dist/navigation/NavItemButton.js +1 -0
- package/dist/navigation/NavItemButton.js.map +1 -1
- package/dist/navigation/NavItemLink.d.ts +1 -0
- package/dist/navigation/NavItemLink.js +1 -0
- package/dist/navigation/NavItemLink.js.map +1 -1
- package/dist/navigation/NavSubheader.d.ts +1 -0
- package/dist/navigation/NavSubheader.js +1 -0
- package/dist/navigation/NavSubheader.js.map +1 -1
- package/dist/navigation/Navigation.d.ts +44 -0
- package/dist/navigation/Navigation.js +44 -0
- package/dist/navigation/Navigation.js.map +1 -1
- package/dist/navigation/_navigation.scss +47 -5
- package/dist/navigation/getTableOfContentsHeadings.d.ts +20 -0
- package/dist/navigation/getTableOfContentsHeadings.js +53 -0
- package/dist/navigation/getTableOfContentsHeadings.js.map +1 -0
- package/dist/navigation/navItemStyles.js +1 -1
- package/dist/navigation/navItemStyles.js.map +1 -1
- package/dist/navigation/types.d.ts +47 -0
- package/dist/navigation/types.js +1 -3
- package/dist/navigation/types.js.map +1 -1
- package/dist/navigation/useActiveHeadingId.d.ts +2 -12
- package/dist/navigation/useActiveHeadingId.js +1 -0
- package/dist/navigation/useActiveHeadingId.js.map +1 -1
- package/dist/navigation/useNavigationExpansion.d.ts +2 -0
- package/dist/navigation/useNavigationExpansion.js +2 -0
- package/dist/navigation/useNavigationExpansion.js.map +1 -1
- package/dist/navigation/useTableOfContentsHeadings.d.ts +3 -37
- package/dist/navigation/useTableOfContentsHeadings.js +18 -41
- package/dist/navigation/useTableOfContentsHeadings.js.map +1 -1
- package/dist/overlay/Overlay.d.ts +10 -1
- package/dist/overlay/Overlay.js +5 -2
- package/dist/overlay/Overlay.js.map +1 -1
- package/dist/overlay/_overlay.scss +35 -0
- package/dist/overlay/{overlayStyles.d.ts → styles.d.ts} +0 -6
- package/dist/overlay/{overlayStyles.js → styles.js} +1 -1
- package/dist/overlay/styles.js.map +1 -0
- package/dist/portal/Portal.d.ts +1 -0
- package/dist/portal/Portal.js +1 -0
- package/dist/portal/Portal.js.map +1 -1
- package/dist/portal/PortalContainerProvider.d.ts +1 -0
- package/dist/portal/PortalContainerProvider.js +1 -0
- package/dist/portal/PortalContainerProvider.js.map +1 -1
- package/dist/positioning/createHorizontalPosition.d.ts +6 -6
- package/dist/positioning/createHorizontalPosition.js +12 -12
- package/dist/positioning/createHorizontalPosition.js.map +1 -1
- package/dist/positioning/createVerticalPosition.d.ts +6 -6
- package/dist/positioning/createVerticalPosition.js +2 -2
- package/dist/positioning/createVerticalPosition.js.map +1 -1
- package/dist/positioning/useFixedPositioning.d.ts +1 -0
- package/dist/positioning/useFixedPositioning.js +1 -0
- package/dist/positioning/useFixedPositioning.js.map +1 -1
- package/dist/progress/CircularProgress.d.ts +3 -2
- package/dist/progress/CircularProgress.js +3 -2
- package/dist/progress/CircularProgress.js.map +1 -1
- package/dist/progress/LinearProgress.d.ts +3 -2
- package/dist/progress/LinearProgress.js +3 -2
- package/dist/progress/LinearProgress.js.map +1 -1
- package/dist/progress/_progress.scss +164 -38
- package/dist/responsive-item/ResponsiveItem.d.ts +4 -3
- package/dist/responsive-item/ResponsiveItem.js +4 -3
- package/dist/responsive-item/ResponsiveItem.js.map +1 -1
- package/dist/responsive-item/ResponsiveItemOverlay.d.ts +6 -4
- package/dist/responsive-item/ResponsiveItemOverlay.js +6 -4
- package/dist/responsive-item/ResponsiveItemOverlay.js.map +1 -1
- package/dist/responsive-item/_responsive-item.scss +89 -0
- package/dist/scroll/useScrollLock.d.ts +1 -0
- package/dist/scroll/useScrollLock.js +1 -0
- package/dist/scroll/useScrollLock.js.map +1 -1
- package/dist/searching/fuzzy.d.ts +2 -1
- package/dist/searching/fuzzy.js +2 -1
- package/dist/searching/fuzzy.js.map +1 -1
- package/dist/segmented-button/SegmentedButton.d.ts +3 -4
- package/dist/segmented-button/SegmentedButton.js +3 -4
- package/dist/segmented-button/SegmentedButton.js.map +1 -1
- package/dist/segmented-button/SegmentedButtonContainer.d.ts +5 -6
- package/dist/segmented-button/SegmentedButtonContainer.js +7 -8
- package/dist/segmented-button/SegmentedButtonContainer.js.map +1 -1
- package/dist/segmented-button/_segmented-button.scss +79 -33
- package/dist/segmented-button/segmentedButtonContainerStyles.d.ts +1 -1
- package/dist/segmented-button/segmentedButtonContainerStyles.js +1 -1
- package/dist/segmented-button/segmentedButtonContainerStyles.js.map +1 -1
- package/dist/sheet/Sheet.d.ts +14 -0
- package/dist/sheet/Sheet.js +2 -0
- package/dist/sheet/Sheet.js.map +1 -1
- package/dist/sheet/_sheet.scss +84 -0
- package/dist/sheet/styles.d.ts +19 -15
- package/dist/sheet/styles.js +6 -2
- package/dist/sheet/styles.js.map +1 -1
- package/dist/snackbar/DefaultToastRenderer.d.ts +1 -0
- package/dist/snackbar/DefaultToastRenderer.js +1 -0
- package/dist/snackbar/DefaultToastRenderer.js.map +1 -1
- package/dist/snackbar/Snackbar.d.ts +10 -9
- package/dist/snackbar/Snackbar.js +4 -1
- package/dist/snackbar/Snackbar.js.map +1 -1
- package/dist/snackbar/Toast.d.ts +8 -0
- package/dist/snackbar/Toast.js +1 -0
- package/dist/snackbar/Toast.js.map +1 -1
- package/dist/snackbar/ToastActionButton.d.ts +2 -1
- package/dist/snackbar/ToastActionButton.js +1 -0
- package/dist/snackbar/ToastActionButton.js.map +1 -1
- package/dist/snackbar/ToastCloseButton.d.ts +2 -1
- package/dist/snackbar/ToastCloseButton.js +1 -0
- package/dist/snackbar/ToastCloseButton.js.map +1 -1
- package/dist/snackbar/ToastContent.d.ts +1 -0
- package/dist/snackbar/ToastContent.js +1 -0
- package/dist/snackbar/ToastContent.js.map +1 -1
- package/dist/snackbar/ToastManager.d.ts +1 -1
- package/dist/snackbar/ToastManager.js +1 -1
- package/dist/snackbar/ToastManager.js.map +1 -1
- package/dist/snackbar/ToastManagerProvider.d.ts +1 -0
- package/dist/snackbar/ToastManagerProvider.js +1 -0
- package/dist/snackbar/ToastManagerProvider.js.map +1 -1
- package/dist/snackbar/_snackbar.scss +131 -3
- package/dist/snackbar/toastStyles.d.ts +0 -7
- package/dist/snackbar/toastStyles.js.map +1 -1
- package/dist/snackbar/useCurrentToastActions.d.ts +1 -0
- package/dist/snackbar/useCurrentToastActions.js +1 -0
- package/dist/snackbar/useCurrentToastActions.js.map +1 -1
- package/dist/storage/useStorage.d.ts +1 -0
- package/dist/storage/useStorage.js +1 -0
- package/dist/storage/useStorage.js.map +1 -1
- package/dist/suspense/CircularProgressSuspense.d.ts +2 -1
- package/dist/suspense/CircularProgressSuspense.js +2 -1
- package/dist/suspense/CircularProgressSuspense.js.map +1 -1
- package/dist/suspense/NullSuspense.d.ts +2 -1
- package/dist/suspense/NullSuspense.js +2 -1
- package/dist/suspense/NullSuspense.js.map +1 -1
- package/dist/table/StickyTableSection.d.ts +2 -0
- package/dist/table/StickyTableSection.js +2 -0
- package/dist/table/StickyTableSection.js.map +1 -1
- package/dist/table/Table.d.ts +8 -8
- package/dist/table/Table.js +8 -8
- package/dist/table/Table.js.map +1 -1
- package/dist/table/TableBody.d.ts +2 -0
- package/dist/table/TableBody.js +2 -0
- package/dist/table/TableBody.js.map +1 -1
- package/dist/table/TableCell.d.ts +6 -2
- package/dist/table/TableCell.js +2 -0
- package/dist/table/TableCell.js.map +1 -1
- package/dist/table/TableCheckbox.d.ts +11 -12
- package/dist/table/TableCheckbox.js +10 -11
- package/dist/table/TableCheckbox.js.map +1 -1
- package/dist/table/TableConfigurationProvider.js +1 -1
- package/dist/table/TableConfigurationProvider.js.map +1 -1
- package/dist/table/TableContainer.d.ts +2 -0
- package/dist/table/TableContainer.js +2 -0
- package/dist/table/TableContainer.js.map +1 -1
- package/dist/table/TableContainerProvider.js +1 -1
- package/dist/table/TableContainerProvider.js.map +1 -1
- package/dist/table/TableFooter.d.ts +2 -0
- package/dist/table/TableFooter.js +2 -0
- package/dist/table/TableFooter.js.map +1 -1
- package/dist/table/TableHeader.d.ts +2 -0
- package/dist/table/TableHeader.js +2 -0
- package/dist/table/TableHeader.js.map +1 -1
- package/dist/table/TableRadio.d.ts +13 -13
- package/dist/table/TableRadio.js +10 -10
- package/dist/table/TableRadio.js.map +1 -1
- package/dist/table/TableRow.d.ts +2 -0
- package/dist/table/TableRow.js +2 -0
- package/dist/table/TableRow.js.map +1 -1
- package/dist/table/_table.scss +209 -11
- package/dist/table/tableCellStyles.js +3 -2
- package/dist/table/tableCellStyles.js.map +1 -1
- package/dist/tabs/SimpleTabPanel.d.ts +2 -0
- package/dist/tabs/SimpleTabPanel.js +2 -0
- package/dist/tabs/SimpleTabPanel.js.map +1 -1
- package/dist/tabs/SimpleTabPanels.d.ts +2 -0
- package/dist/tabs/SimpleTabPanels.js +2 -0
- package/dist/tabs/SimpleTabPanels.js.map +1 -1
- package/dist/tabs/Tab.d.ts +19 -1
- package/dist/tabs/Tab.js +1 -1
- package/dist/tabs/Tab.js.map +1 -1
- package/dist/tabs/TabList.d.ts +1 -1
- package/dist/tabs/TabList.js +1 -1
- package/dist/tabs/TabList.js.map +1 -1
- package/dist/tabs/TabListScrollButton.d.ts +1 -1
- package/dist/tabs/TabListScrollButton.js.map +1 -1
- package/dist/tabs/_tabs.scss +142 -5
- package/dist/tabs/tabStyles.d.ts +0 -18
- package/dist/tabs/tabStyles.js.map +1 -1
- package/dist/tabs/useTabs.d.ts +4 -0
- package/dist/tabs/useTabs.js +3 -2
- package/dist/tabs/useTabs.js.map +1 -1
- package/dist/test-utils/jest-globals/match-media.d.ts +1 -2
- package/dist/test-utils/jest-globals/match-media.js +1 -1
- package/dist/test-utils/jest-globals/match-media.js.map +1 -1
- package/dist/test-utils/jest-globals/resize-observer.js +2 -2
- package/dist/test-utils/jest-globals/resize-observer.js.map +1 -1
- package/dist/test-utils/mocks/ResizeObserver.d.ts +7 -7
- package/dist/test-utils/mocks/ResizeObserver.js +7 -7
- package/dist/test-utils/mocks/ResizeObserver.js.map +1 -1
- package/dist/test-utils/mocks/match-media.d.ts +31 -0
- package/dist/test-utils/mocks/match-media.js.map +1 -1
- package/dist/test-utils/utils/createMatchMediaSpy.d.ts +40 -0
- package/dist/test-utils/{mocks/match-media-implementation.js → utils/createMatchMediaSpy.js} +33 -4
- package/dist/test-utils/utils/createMatchMediaSpy.js.map +1 -0
- package/dist/test-utils/vitest/match-media.d.ts +1 -2
- package/dist/test-utils/vitest/match-media.js +1 -1
- package/dist/test-utils/vitest/match-media.js.map +1 -1
- package/dist/test-utils/vitest/resize-observer.js +2 -2
- package/dist/test-utils/vitest/resize-observer.js.map +1 -1
- package/dist/theme/LocalStorageColorSchemeProvider.d.ts +6 -6
- package/dist/theme/LocalStorageColorSchemeProvider.js +6 -6
- package/dist/theme/LocalStorageColorSchemeProvider.js.map +1 -1
- package/dist/theme/ThemeProvider.d.ts +10 -11
- package/dist/theme/ThemeProvider.js +7 -9
- package/dist/theme/ThemeProvider.js.map +1 -1
- package/dist/theme/_a11y.scss +62 -62
- package/dist/theme/_colors.scss +283 -279
- package/dist/theme/_theme.scss +298 -249
- package/dist/theme/colors.d.ts +2 -2
- package/dist/theme/colors.js +2 -2
- package/dist/theme/colors.js.map +1 -1
- package/dist/theme/useColorScheme.d.ts +1 -1
- package/dist/theme/useColorScheme.js +1 -1
- package/dist/theme/useColorScheme.js.map +1 -1
- package/dist/tooltip/Tooltip.d.ts +12 -1
- package/dist/tooltip/Tooltip.js +6 -2
- package/dist/tooltip/Tooltip.js.map +1 -1
- package/dist/tooltip/TooltipHoverModeProvider.d.ts +1 -0
- package/dist/tooltip/TooltipHoverModeProvider.js +1 -0
- package/dist/tooltip/TooltipHoverModeProvider.js.map +1 -1
- package/dist/tooltip/_tooltip.scss +109 -5
- package/dist/tooltip/constants.d.ts +13 -3
- package/dist/tooltip/constants.js +4 -4
- package/dist/tooltip/constants.js.map +1 -1
- package/dist/tooltip/{tooltipStyles.d.ts → styles.d.ts} +1 -1
- package/dist/tooltip/{tooltipStyles.js → styles.js} +1 -1
- package/dist/tooltip/styles.js.map +1 -0
- package/dist/tooltip/useTooltip.d.ts +8 -15
- package/dist/tooltip/useTooltip.js +8 -8
- package/dist/tooltip/useTooltip.js.map +1 -1
- package/dist/transition/CSSTransition.d.ts +3 -1
- package/dist/transition/CSSTransition.js +3 -1
- package/dist/transition/CSSTransition.js.map +1 -1
- package/dist/transition/Collapse.d.ts +1 -0
- package/dist/transition/Collapse.js +1 -0
- package/dist/transition/Collapse.js.map +1 -1
- package/dist/transition/CrossFade.d.ts +1 -0
- package/dist/transition/CrossFade.js +1 -0
- package/dist/transition/CrossFade.js.map +1 -1
- package/dist/transition/ScaleTransition.d.ts +4 -1
- package/dist/transition/ScaleTransition.js +4 -1
- package/dist/transition/ScaleTransition.js.map +1 -1
- package/dist/transition/SkeletonPlaceholder.d.ts +3 -2
- package/dist/transition/SkeletonPlaceholder.js +3 -2
- package/dist/transition/SkeletonPlaceholder.js.map +1 -1
- package/dist/transition/Slide.d.ts +1 -0
- package/dist/transition/Slide.js +1 -0
- package/dist/transition/Slide.js.map +1 -1
- package/dist/transition/SlideContainer.d.ts +10 -7
- package/dist/transition/SlideContainer.js +12 -8
- package/dist/transition/SlideContainer.js.map +1 -1
- package/dist/transition/_transition.scss +178 -6
- package/dist/transition/getTransitionCallbacks.d.ts +76 -0
- package/dist/transition/getTransitionCallbacks.js +57 -0
- package/dist/transition/getTransitionCallbacks.js.map +1 -0
- package/dist/transition/skeletonPlaceholderUtils.d.ts +4 -1
- package/dist/transition/skeletonPlaceholderUtils.js +4 -1
- package/dist/transition/skeletonPlaceholderUtils.js.map +1 -1
- package/dist/transition/types.d.ts +26 -1
- package/dist/transition/types.js.map +1 -1
- package/dist/transition/useCSSTransition.d.ts +2 -0
- package/dist/transition/useCSSTransition.js +2 -0
- package/dist/transition/useCSSTransition.js.map +1 -1
- package/dist/transition/useCarousel.d.ts +6 -2
- package/dist/transition/useCarousel.js +11 -7
- package/dist/transition/useCarousel.js.map +1 -1
- package/dist/transition/useCollapseTransition.d.ts +7 -2
- package/dist/transition/useCollapseTransition.js +2 -0
- package/dist/transition/useCollapseTransition.js.map +1 -1
- package/dist/transition/useCrossFadeTransition.d.ts +22 -45
- package/dist/transition/useCrossFadeTransition.js +17 -49
- package/dist/transition/useCrossFadeTransition.js.map +1 -1
- package/dist/transition/useScaleTransition.d.ts +22 -16
- package/dist/transition/useScaleTransition.js +20 -14
- package/dist/transition/useScaleTransition.js.map +1 -1
- package/dist/transition/useSkeletonPlaceholder.d.ts +6 -3
- package/dist/transition/useSkeletonPlaceholder.js +3 -0
- package/dist/transition/useSkeletonPlaceholder.js.map +1 -1
- package/dist/transition/useSlideTransition.d.ts +9 -3
- package/dist/transition/useSlideTransition.js +1 -0
- package/dist/transition/useSlideTransition.js.map +1 -1
- package/dist/transition/useTransition.d.ts +1 -0
- package/dist/transition/useTransition.js +3 -2
- package/dist/transition/useTransition.js.map +1 -1
- package/dist/tree/DefaultTreeItemRenderer.d.ts +1 -0
- package/dist/tree/DefaultTreeItemRenderer.js +1 -0
- package/dist/tree/DefaultTreeItemRenderer.js.map +1 -1
- package/dist/tree/Tree.d.ts +8 -9
- package/dist/tree/Tree.js +4 -3
- package/dist/tree/Tree.js.map +1 -1
- package/dist/tree/TreeItem.d.ts +1 -0
- package/dist/tree/TreeItem.js +1 -0
- package/dist/tree/TreeItem.js.map +1 -1
- package/dist/tree/_tree.scss +71 -1
- package/dist/tree/types.d.ts +1 -1
- package/dist/tree/types.js.map +1 -1
- package/dist/tree/useTree.d.ts +4 -2
- package/dist/tree/useTree.js +4 -2
- package/dist/tree/useTree.js.map +1 -1
- package/dist/tree/useTreeExpansion.d.ts +1 -0
- package/dist/tree/useTreeExpansion.js +1 -0
- package/dist/tree/useTreeExpansion.js.map +1 -1
- package/dist/tree/useTreeItems.d.ts +1 -0
- package/dist/tree/useTreeItems.js +1 -0
- package/dist/tree/useTreeItems.js.map +1 -1
- package/dist/tree/useTreeSelection.d.ts +1 -0
- package/dist/tree/useTreeSelection.js +1 -0
- package/dist/tree/useTreeSelection.js.map +1 -1
- package/dist/types.d.ts +1 -1
- package/dist/types.js.map +1 -1
- package/dist/typography/HighlightText.d.ts +76 -0
- package/dist/typography/HighlightText.js +60 -0
- package/dist/typography/HighlightText.js.map +1 -0
- package/dist/typography/HighlightTextMark.d.ts +16 -0
- package/dist/typography/HighlightTextMark.js +16 -0
- package/dist/typography/HighlightTextMark.js.map +1 -0
- package/dist/typography/Mark.d.ts +27 -0
- package/dist/typography/Mark.js +34 -0
- package/dist/typography/Mark.js.map +1 -0
- package/dist/typography/SrOnly.d.ts +3 -1
- package/dist/typography/SrOnly.js +3 -1
- package/dist/typography/SrOnly.js.map +1 -1
- package/dist/typography/TextContainer.d.ts +9 -1
- package/dist/typography/TextContainer.js +3 -1
- package/dist/typography/TextContainer.js.map +1 -1
- package/dist/typography/Typography.d.ts +2 -1
- package/dist/typography/Typography.js +2 -1
- package/dist/typography/Typography.js.map +1 -1
- package/dist/typography/WritingDirectionProvider.d.ts +8 -8
- package/dist/typography/WritingDirectionProvider.js +8 -8
- package/dist/typography/WritingDirectionProvider.js.map +1 -1
- package/dist/typography/_typography.scss +392 -51
- package/dist/typography/markStyles.d.ts +10 -0
- package/dist/typography/markStyles.js +11 -0
- package/dist/typography/markStyles.js.map +1 -0
- package/dist/typography/textContainerStyles.d.ts +2 -7
- package/dist/typography/textContainerStyles.js +2 -1
- package/dist/typography/textContainerStyles.js.map +1 -1
- package/dist/typography/typographyStyles.d.ts +2 -2
- package/dist/typography/typographyStyles.js +2 -2
- package/dist/typography/typographyStyles.js.map +1 -1
- package/dist/useAsyncFunction.d.ts +10 -68
- package/dist/useAsyncFunction.js +9 -67
- package/dist/useAsyncFunction.js.map +1 -1
- package/dist/useDebouncedFunction.d.ts +3 -1
- package/dist/useDebouncedFunction.js +3 -1
- package/dist/useDebouncedFunction.js.map +1 -1
- package/dist/useDropzone.d.ts +3 -2
- package/dist/useDropzone.js +3 -2
- package/dist/useDropzone.js.map +1 -1
- package/dist/useThrottledFunction.d.ts +3 -1
- package/dist/useThrottledFunction.js +3 -1
- package/dist/useThrottledFunction.js.map +1 -1
- package/dist/useUnmounted.d.ts +1 -1
- package/dist/useUnmounted.js +1 -1
- package/dist/useUnmounted.js.map +1 -1
- package/dist/utils/RenderRecursively.d.ts +1 -0
- package/dist/utils/RenderRecursively.js +1 -0
- package/dist/utils/RenderRecursively.js.map +1 -1
- package/dist/utils/applyRef.d.ts +1 -1
- package/dist/utils/applyRef.js +1 -1
- package/dist/utils/applyRef.js.map +1 -1
- package/dist/window-splitter/WindowSplitter.d.ts +11 -0
- package/dist/window-splitter/WindowSplitter.js +1 -0
- package/dist/window-splitter/WindowSplitter.js.map +1 -1
- package/dist/window-splitter/_window-splitter.scss +46 -0
- package/dist/window-splitter/useWindowSplitter.d.ts +0 -10
- package/dist/window-splitter/useWindowSplitter.js.map +1 -1
- package/package.json +43 -17
- package/src/CoreProviders.tsx +1 -0
- package/src/NoSsr.tsx +3 -1
- package/src/RootHtml.tsx +1 -1
- package/src/SsrProvider.tsx +1 -0
- package/src/app-bar/AppBar.tsx +3 -1
- package/src/app-bar/AppBarTitle.tsx +2 -1
- package/src/autocomplete/Autocomplete.tsx +85 -3
- package/src/autocomplete/AutocompleteChip.tsx +1 -0
- package/src/autocomplete/AutocompleteCircularProgress.tsx +1 -0
- package/src/autocomplete/AutocompleteClearButton.tsx +3 -1
- package/src/autocomplete/AutocompleteDropdownButton.tsx +1 -0
- package/src/autocomplete/AutocompleteListboxChildren.tsx +2 -3
- package/src/autocomplete/autocompleteStyles.ts +11 -2
- package/src/autocomplete/types.ts +140 -86
- package/src/autocomplete/useAutocomplete.ts +21 -26
- package/src/autocomplete/utils.ts +6 -8
- package/src/avatar/Avatar.tsx +2 -1
- package/src/badge/Badge.tsx +8 -4
- package/src/box/Box.tsx +4 -3
- package/src/button/AsyncButton.tsx +4 -3
- package/src/button/Button.tsx +11 -9
- package/src/button/ButtonUnstyled.tsx +2 -1
- package/src/button/TooltippedButton.tsx +3 -2
- package/src/button/{buttonStyles.ts → styles.ts} +18 -0
- package/src/card/Card.tsx +9 -10
- package/src/card/CardContent.tsx +1 -0
- package/src/card/CardFooter.tsx +1 -0
- package/src/card/CardHeader.tsx +1 -0
- package/src/card/CardSubtitle.tsx +1 -0
- package/src/card/CardTitle.tsx +2 -1
- package/src/card/ClickableCard.tsx +3 -1
- package/src/chip/Chip.tsx +5 -3
- package/src/cssUtils.ts +1 -1
- package/src/dialog/Dialog.tsx +9 -10
- package/src/dialog/DialogContent.tsx +5 -5
- package/src/dialog/DialogFooter.tsx +5 -2
- package/src/dialog/DialogHeader.tsx +31 -5
- package/src/dialog/DialogTitle.tsx +8 -7
- package/src/dialog/FixedDialog.tsx +13 -12
- package/src/dialog/styles.ts +16 -10
- package/src/divider/Divider.tsx +3 -1
- package/src/divider/styles.ts +2 -2
- package/src/draggable/useDraggable.ts +1 -0
- package/src/error-boundary/ErrorBoundary.tsx +103 -0
- package/src/error-boundary/context.ts +16 -0
- package/src/error-boundary/types.ts +19 -0
- package/src/error-boundary/useErrorBoundary.ts +36 -0
- package/src/expansion-panel/ExpansionList.tsx +1 -0
- package/src/expansion-panel/ExpansionPanel.tsx +32 -0
- package/src/expansion-panel/ExpansionPanelHeader.tsx +10 -10
- package/src/expansion-panel/expansionPanelStyles.ts +33 -0
- package/src/expansion-panel/useExpansionList.ts +7 -8
- package/src/expansion-panel/useExpansionPanels.ts +7 -10
- package/src/files/FileInput.tsx +4 -2
- package/src/files/styles.ts +1 -1
- package/src/files/useFileUpload.ts +2 -0
- package/src/focus/useFocusContainer.ts +29 -43
- package/src/form/Checkbox.tsx +3 -1
- package/src/form/Fieldset.tsx +6 -35
- package/src/form/Form.tsx +2 -0
- package/src/form/FormMessage.tsx +2 -0
- package/src/form/FormMessageContainer.tsx +1 -0
- package/src/form/FormMessageCounter.tsx +2 -0
- package/src/form/InputToggle.tsx +4 -2
- package/src/form/Label.tsx +5 -54
- package/src/form/Legend.tsx +1 -0
- package/src/form/Listbox.tsx +1 -1
- package/src/form/MenuItemCheckbox.tsx +3 -1
- package/src/form/MenuItemFileInput.tsx +1 -0
- package/src/form/MenuItemInputToggle.tsx +3 -2
- package/src/form/MenuItemRadio.tsx +8 -8
- package/src/form/MenuItemSwitch.tsx +3 -1
- package/src/form/MenuItemTextField.tsx +1 -0
- package/src/form/NativeSelect.tsx +2 -0
- package/src/form/OptGroup.tsx +4 -1
- package/src/form/Option.tsx +2 -1
- package/src/form/Password.tsx +3 -1
- package/src/form/Radio.tsx +2 -0
- package/src/form/Select.tsx +6 -29
- package/src/form/Slider.tsx +9 -2
- package/src/form/SliderContainer.tsx +7 -15
- package/src/form/SliderMark.tsx +2 -13
- package/src/form/SliderMarkLabel.tsx +2 -5
- package/src/form/SliderThumb.tsx +2 -50
- package/src/form/SliderTrack.tsx +8 -18
- package/src/form/SliderValueTooltip.tsx +2 -10
- package/src/form/Switch.tsx +10 -1
- package/src/form/SwitchTrack.tsx +3 -6
- package/src/form/TextArea.tsx +10 -1
- package/src/form/TextField.tsx +3 -1
- package/src/form/TextFieldAddon.tsx +2 -59
- package/src/form/TextFieldContainer.tsx +14 -0
- package/src/form/fieldsetStyles.ts +35 -0
- package/src/form/formConfig.ts +29 -4
- package/src/form/labelStyles.ts +55 -0
- package/src/form/sliderStyles.ts +204 -0
- package/src/form/switchStyles.ts +36 -7
- package/src/form/textAreaStyles.ts +0 -7
- package/src/form/textFieldAddonStyles.ts +41 -0
- package/src/form/textFieldContainerStyles.ts +0 -14
- package/src/form/types.ts +25 -2
- package/src/form/useCheckboxGroup.ts +14 -0
- package/src/form/useCombobox.ts +78 -84
- package/src/form/useNumberField.ts +19 -7
- package/src/form/useRadioGroup.ts +9 -0
- package/src/form/useRangeSlider.ts +6 -1
- package/src/form/useSlider.ts +4 -1
- package/src/form/useTextField.ts +12 -1
- package/src/form/validation.ts +1 -0
- package/src/icon/FontIcon.tsx +1 -0
- package/src/icon/IconRotator.tsx +2 -0
- package/src/icon/MaterialIcon.tsx +2 -0
- package/src/icon/MaterialSymbol.tsx +3 -1
- package/src/icon/SVGIcon.tsx +2 -0
- package/src/icon/TextIconSpacing.tsx +6 -2
- package/src/icon/config.tsx +2 -2
- package/src/icon/material.ts +260 -17
- package/src/icon/styles.ts +5 -1
- package/src/interaction/Ripple.tsx +4 -4
- package/src/interaction/UserInteractionModeProvider.tsx +1 -1
- package/src/layout/LayoutAppBar.tsx +1 -0
- package/src/layout/LayoutNav.tsx +9 -12
- package/src/layout/LayoutWindowSplitter.tsx +7 -8
- package/src/layout/Main.tsx +2 -1
- package/src/layout/useExpandableLayout.ts +1 -0
- package/src/layout/useHorizontalLayoutTransition.ts +5 -2
- package/src/layout/useLayoutAppBarHeight.ts +7 -10
- package/src/layout/useLayoutTree.ts +3 -0
- package/src/layout/useLayoutWindowSplitter.ts +4 -2
- package/src/layout/useResizableLayout.ts +3 -0
- package/src/layout/useTemporaryLayout.ts +1 -0
- package/src/link/Link.tsx +3 -1
- package/src/link/SkipToMainContent.tsx +22 -0
- package/src/list/List.tsx +12 -1
- package/src/list/ListItem.tsx +23 -2
- package/src/list/ListItemChildren.tsx +3 -1
- package/src/list/ListItemLink.tsx +32 -1
- package/src/list/ListSubheader.tsx +2 -0
- package/src/list/listItemStyles.ts +0 -17
- package/src/list/listStyles.ts +0 -7
- package/src/media-queries/AppSizeProvider.tsx +2 -0
- package/src/media-queries/useMediaQuery.ts +2 -0
- package/src/menu/DropdownMenu.tsx +5 -2
- package/src/menu/Menu.tsx +1 -0
- package/src/menu/MenuBar.tsx +4 -1
- package/src/menu/MenuButton.tsx +1 -0
- package/src/menu/MenuItem.tsx +1 -0
- package/src/menu/MenuItemCircularProgress.tsx +4 -6
- package/src/menu/MenuItemGroup.tsx +6 -7
- package/src/menu/MenuItemSeparator.tsx +1 -0
- package/src/menu/MenuWidget.tsx +1 -21
- package/src/menu/styles.ts +23 -0
- package/src/menu/useContextMenu.ts +4 -1
- package/src/movement/useKeyboardMovementProvider.ts +3 -3
- package/src/navigation/CollapsibleNavGroup.tsx +1 -0
- package/src/navigation/DefaultNavigationRenderer.tsx +1 -0
- package/src/navigation/NavGroup.tsx +1 -0
- package/src/navigation/NavItem.tsx +1 -0
- package/src/navigation/NavItemButton.tsx +1 -0
- package/src/navigation/NavItemLink.tsx +1 -0
- package/src/navigation/NavSubheader.tsx +1 -0
- package/src/navigation/Navigation.tsx +44 -0
- package/src/navigation/getTableOfContentsHeadings.ts +70 -0
- package/src/navigation/navItemStyles.ts +1 -1
- package/src/navigation/types.ts +57 -0
- package/src/navigation/useActiveHeadingId.ts +3 -15
- package/src/navigation/useNavigationExpansion.ts +2 -0
- package/src/navigation/useTableOfContentsHeadings.ts +22 -89
- package/src/overlay/Overlay.tsx +12 -2
- package/src/overlay/{overlayStyles.ts → styles.ts} +1 -7
- package/src/portal/Portal.tsx +1 -0
- package/src/portal/PortalContainerProvider.tsx +1 -0
- package/src/positioning/createHorizontalPosition.ts +25 -19
- package/src/positioning/createVerticalPosition.ts +10 -8
- package/src/positioning/useFixedPositioning.ts +1 -0
- package/src/progress/CircularProgress.tsx +3 -2
- package/src/progress/LinearProgress.tsx +3 -2
- package/src/responsive-item/ResponsiveItem.tsx +4 -3
- package/src/responsive-item/ResponsiveItemOverlay.tsx +6 -4
- package/src/scroll/useScrollLock.ts +1 -0
- package/src/searching/fuzzy.ts +2 -1
- package/src/segmented-button/SegmentedButton.tsx +3 -4
- package/src/segmented-button/SegmentedButtonContainer.tsx +7 -8
- package/src/segmented-button/segmentedButtonContainerStyles.ts +1 -1
- package/src/sheet/Sheet.tsx +15 -0
- package/src/sheet/styles.ts +10 -17
- package/src/snackbar/DefaultToastRenderer.tsx +1 -0
- package/src/snackbar/Snackbar.tsx +10 -9
- package/src/snackbar/Toast.tsx +9 -0
- package/src/snackbar/ToastActionButton.tsx +2 -1
- package/src/snackbar/ToastCloseButton.tsx +2 -1
- package/src/snackbar/ToastContent.tsx +1 -0
- package/src/snackbar/{ToastManager.tsx → ToastManager.ts} +1 -1
- package/src/snackbar/ToastManagerProvider.tsx +1 -0
- package/src/snackbar/toastStyles.ts +0 -8
- package/src/snackbar/useCurrentToastActions.ts +1 -0
- package/src/storage/useStorage.ts +1 -0
- package/src/suspense/CircularProgressSuspense.tsx +2 -1
- package/src/suspense/NullSuspense.tsx +2 -1
- package/src/table/StickyTableSection.tsx +2 -0
- package/src/table/Table.tsx +8 -8
- package/src/table/TableBody.tsx +2 -0
- package/src/table/TableCell.tsx +6 -2
- package/src/table/TableCheckbox.tsx +11 -12
- package/src/table/TableContainer.tsx +2 -0
- package/src/table/TableFooter.tsx +2 -0
- package/src/table/TableHeader.tsx +2 -0
- package/src/table/TableRadio.tsx +13 -13
- package/src/table/TableRow.tsx +2 -0
- package/src/table/tableCellStyles.ts +1 -1
- package/src/tabs/SimpleTabPanel.tsx +2 -0
- package/src/tabs/SimpleTabPanels.tsx +2 -0
- package/src/tabs/Tab.tsx +21 -1
- package/src/tabs/TabList.tsx +1 -1
- package/src/tabs/TabListScrollButton.tsx +1 -1
- package/src/tabs/tabStyles.ts +0 -20
- package/src/tabs/useTabs.ts +7 -2
- package/src/test-utils/jest-globals/match-media.ts +4 -3
- package/src/test-utils/jest-globals/resize-observer.ts +2 -2
- package/src/test-utils/mocks/ResizeObserver.ts +7 -7
- package/src/test-utils/mocks/match-media.ts +32 -0
- package/src/test-utils/{mocks/match-media-implementation.ts → utils/createMatchMediaSpy.ts} +34 -36
- package/src/test-utils/vitest/match-media.ts +4 -3
- package/src/test-utils/vitest/resize-observer.ts +2 -2
- package/src/theme/LocalStorageColorSchemeProvider.tsx +6 -6
- package/src/theme/ThemeProvider.tsx +10 -11
- package/src/theme/colors.ts +2 -2
- package/src/theme/useColorScheme.ts +1 -1
- package/src/tooltip/Tooltip.tsx +14 -2
- package/src/tooltip/TooltipHoverModeProvider.tsx +1 -0
- package/src/tooltip/constants.ts +11 -11
- package/src/tooltip/{tooltipStyles.ts → styles.ts} +1 -1
- package/src/tooltip/useTooltip.ts +8 -16
- package/src/transition/CSSTransition.tsx +3 -1
- package/src/transition/Collapse.tsx +1 -0
- package/src/transition/CrossFade.tsx +1 -0
- package/src/transition/ScaleTransition.tsx +4 -1
- package/src/transition/SkeletonPlaceholder.tsx +3 -2
- package/src/transition/Slide.tsx +1 -0
- package/src/transition/SlideContainer.tsx +15 -11
- package/src/transition/getTransitionCallbacks.ts +140 -0
- package/src/transition/skeletonPlaceholderUtils.ts +4 -1
- package/src/transition/types.ts +28 -7
- package/src/transition/useCSSTransition.ts +2 -0
- package/src/transition/useCarousel.ts +11 -7
- package/src/transition/useCollapseTransition.ts +4 -3
- package/src/transition/useCrossFadeTransition.ts +23 -57
- package/src/transition/useScaleTransition.ts +27 -19
- package/src/transition/useSkeletonPlaceholder.ts +6 -3
- package/src/transition/useSlideTransition.ts +14 -13
- package/src/transition/useTransition.ts +3 -2
- package/src/tree/DefaultTreeItemRenderer.tsx +1 -0
- package/src/tree/Tree.tsx +8 -9
- package/src/tree/TreeItem.tsx +1 -0
- package/src/tree/types.ts +1 -1
- package/src/tree/useTree.ts +4 -2
- package/src/tree/useTreeExpansion.ts +1 -0
- package/src/tree/useTreeItems.ts +1 -0
- package/src/tree/useTreeSelection.ts +1 -0
- package/src/types.ts +1 -1
- package/src/typography/HighlightText.tsx +201 -0
- package/src/typography/HighlightTextMark.tsx +25 -0
- package/src/typography/Mark.tsx +41 -0
- package/src/typography/SrOnly.tsx +3 -1
- package/src/typography/TextContainer.tsx +10 -1
- package/src/typography/Typography.tsx +2 -1
- package/src/typography/WritingDirectionProvider.tsx +8 -8
- package/src/typography/markStyles.ts +20 -0
- package/src/typography/textContainerStyles.ts +2 -8
- package/src/typography/typographyStyles.ts +2 -2
- package/src/useAsyncFunction.ts +12 -68
- package/src/useDebouncedFunction.ts +3 -1
- package/src/useDropzone.ts +3 -2
- package/src/useThrottledFunction.ts +3 -1
- package/src/useUnmounted.ts +1 -1
- package/src/utils/RenderRecursively.tsx +1 -0
- package/src/utils/applyRef.ts +1 -1
- package/src/window-splitter/WindowSplitter.tsx +12 -0
- package/src/window-splitter/useWindowSplitter.ts +0 -11
- package/dist/button/buttonStyles.js.map +0 -1
- package/dist/button/buttonUnstyledStyles.d.ts +0 -10
- package/dist/button/buttonUnstyledStyles.js +0 -11
- package/dist/button/buttonUnstyledStyles.js.map +0 -1
- package/dist/overlay/overlayStyles.js.map +0 -1
- package/dist/test-utils/mocks/match-media-implementation.d.ts +0 -42
- package/dist/test-utils/mocks/match-media-implementation.js.map +0 -1
- package/dist/tooltip/tooltipStyles.js.map +0 -1
- package/src/button/buttonUnstyledStyles.ts +0 -19
- /package/src/table/{TableConfigurationProvider.tsx → TableConfigurationProvider.ts} +0 -0
- /package/src/table/{TableContainerProvider.tsx → TableContainerProvider.ts} +0 -0
|
@@ -13,7 +13,7 @@ interface XPosition {
|
|
|
13
13
|
/**
|
|
14
14
|
* @internal
|
|
15
15
|
*/
|
|
16
|
-
export interface
|
|
16
|
+
export interface HorizontalFixConfig extends XCoordConfig {
|
|
17
17
|
vwMargin: number;
|
|
18
18
|
screenRight: number;
|
|
19
19
|
disableSwapping: boolean;
|
|
@@ -38,7 +38,7 @@ export interface CreateHorizontalPositionOptions extends Required<Pick<FixedPosi
|
|
|
38
38
|
*
|
|
39
39
|
* @internal
|
|
40
40
|
*/
|
|
41
|
-
export declare function createAnchoredLeft(config:
|
|
41
|
+
export declare function createAnchoredLeft(config: HorizontalFixConfig): XPosition;
|
|
42
42
|
/**
|
|
43
43
|
* Attempts to position the fixed element so that it will appear to the
|
|
44
44
|
* inner-left of the container element but also within the viewport boundaries.
|
|
@@ -49,7 +49,7 @@ export declare function createAnchoredLeft(config: FixConfig): XPosition;
|
|
|
49
49
|
*
|
|
50
50
|
* @internal
|
|
51
51
|
*/
|
|
52
|
-
export declare function createAnchoredInnerLeft(config:
|
|
52
|
+
export declare function createAnchoredInnerLeft(config: HorizontalFixConfig): XPosition;
|
|
53
53
|
/**
|
|
54
54
|
* Attempts to position the fixed element so that it will appear at the center
|
|
55
55
|
* of the container element but also within the viewport boundaries. If the
|
|
@@ -59,7 +59,7 @@ export declare function createAnchoredInnerLeft(config: FixConfig): XPosition;
|
|
|
59
59
|
*
|
|
60
60
|
* @internal
|
|
61
61
|
*/
|
|
62
|
-
export declare function
|
|
62
|
+
export declare function createAnchoredHorizontalCenter(config: HorizontalFixConfig): XPosition;
|
|
63
63
|
/**
|
|
64
64
|
* Attempts to position the fixed element so that it will appear to the
|
|
65
65
|
* inner-right of the container element but also within the viewport boundaries.
|
|
@@ -70,7 +70,7 @@ export declare function createAnchoredCenter(config: FixConfig): XPosition;
|
|
|
70
70
|
*
|
|
71
71
|
* @internal
|
|
72
72
|
*/
|
|
73
|
-
export declare function createAnchoredInnerRight(config:
|
|
73
|
+
export declare function createAnchoredInnerRight(config: HorizontalFixConfig): XPosition;
|
|
74
74
|
/**
|
|
75
75
|
* Attempts to position the fixed element so that it will appear to the right of
|
|
76
76
|
* the container element but also within the viewport boundaries. When swapping
|
|
@@ -81,7 +81,7 @@ export declare function createAnchoredInnerRight(config: FixConfig): XPosition;
|
|
|
81
81
|
*
|
|
82
82
|
* @internal
|
|
83
83
|
*/
|
|
84
|
-
export declare function createAnchoredRight(config:
|
|
84
|
+
export declare function createAnchoredRight(config: HorizontalFixConfig): XPosition;
|
|
85
85
|
export interface EqualWidthOptions extends Pick<CreateHorizontalPositionOptions, "x" | "elWidth" | "xMargin" | "vwMargin" | "containerRect" | "initialX"> {
|
|
86
86
|
screenRight: number;
|
|
87
87
|
isMinWidth: boolean;
|
|
@@ -83,7 +83,7 @@ import { getCenterXCoord, getInnerLeftCoord, getInnerRightCoord, getLeftCoord, g
|
|
|
83
83
|
* boundary.
|
|
84
84
|
*
|
|
85
85
|
* @internal
|
|
86
|
-
*/ export function
|
|
86
|
+
*/ export function createAnchoredHorizontalCenter(config) {
|
|
87
87
|
const { vwMargin, screenRight, elWidth } = config;
|
|
88
88
|
let left = getCenterXCoord(config);
|
|
89
89
|
if (left < vwMargin) {
|
|
@@ -201,6 +201,16 @@ import { getCenterXCoord, getInnerLeftCoord, getInnerRightCoord, getLeftCoord, g
|
|
|
201
201
|
*/ export function createHorizontalPosition(options) {
|
|
202
202
|
const { x, vw, vwMargin, xMargin, width, elWidth, initialX, containerRect, disableSwapping } = options;
|
|
203
203
|
const screenRight = vw - vwMargin;
|
|
204
|
+
if (width !== "equal" && elWidth > vw - vwMargin * 2) {
|
|
205
|
+
// if the element's width is greater than the viewport's width minus the
|
|
206
|
+
// margin on both sides, just make the element span the entire viewport with
|
|
207
|
+
// the margin
|
|
208
|
+
return {
|
|
209
|
+
left: vwMargin,
|
|
210
|
+
right: vwMargin,
|
|
211
|
+
actualX: x
|
|
212
|
+
};
|
|
213
|
+
}
|
|
204
214
|
if (width === "min" || width === "equal") {
|
|
205
215
|
return createEqualWidth({
|
|
206
216
|
x,
|
|
@@ -213,16 +223,6 @@ import { getCenterXCoord, getInnerLeftCoord, getInnerRightCoord, getLeftCoord, g
|
|
|
213
223
|
isMinWidth: width === "min"
|
|
214
224
|
});
|
|
215
225
|
}
|
|
216
|
-
if (elWidth > vw - vwMargin * 2) {
|
|
217
|
-
// if the element's width is greater than the viewport's width minus the
|
|
218
|
-
// margin on both sides, just make the element span the entire viewport with
|
|
219
|
-
// the margin
|
|
220
|
-
return {
|
|
221
|
-
left: vwMargin,
|
|
222
|
-
right: vwMargin,
|
|
223
|
-
actualX: x
|
|
224
|
-
};
|
|
225
|
-
}
|
|
226
226
|
const config = {
|
|
227
227
|
vwMargin,
|
|
228
228
|
xMargin,
|
|
@@ -238,7 +238,7 @@ import { getCenterXCoord, getInnerLeftCoord, getInnerRightCoord, getLeftCoord, g
|
|
|
238
238
|
case "inner-left":
|
|
239
239
|
return createAnchoredInnerLeft(config);
|
|
240
240
|
case "center":
|
|
241
|
-
return
|
|
241
|
+
return createAnchoredHorizontalCenter(config);
|
|
242
242
|
case "inner-right":
|
|
243
243
|
return createAnchoredInnerRight(config);
|
|
244
244
|
case "right":
|
|
@@ -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 FixConfig 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: FixConfig): 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(config: FixConfig): 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 createAnchoredCenter(config: FixConfig): 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(config: FixConfig): 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: FixConfig): 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 === \"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 if (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 const config: FixConfig = {\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 createAnchoredCenter(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","createAnchoredCenter","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\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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"}
|
|
@@ -9,7 +9,7 @@ interface YPosition {
|
|
|
9
9
|
transformOriginY?: number;
|
|
10
10
|
}
|
|
11
11
|
/** @internal */
|
|
12
|
-
export interface
|
|
12
|
+
export interface VerticalFixConfig extends YCoordConfig {
|
|
13
13
|
vhMargin: number;
|
|
14
14
|
screenBottom: number;
|
|
15
15
|
preventOverlap: boolean;
|
|
@@ -34,7 +34,7 @@ export interface CreateVerticalPositionOptions extends Required<Pick<FixedPositi
|
|
|
34
34
|
*
|
|
35
35
|
* @internal
|
|
36
36
|
*/
|
|
37
|
-
export declare function createAnchoredAbove(config:
|
|
37
|
+
export declare function createAnchoredAbove(config: VerticalFixConfig): YPosition;
|
|
38
38
|
/**
|
|
39
39
|
* Attempts to position the fixed element so that it will appear fixed to the
|
|
40
40
|
* top of the container element but also within the viewport boundaries. When
|
|
@@ -45,7 +45,7 @@ export declare function createAnchoredAbove(config: FixConfig): YPosition;
|
|
|
45
45
|
*
|
|
46
46
|
* @internal
|
|
47
47
|
*/
|
|
48
|
-
export declare function createAnchoredTop(config:
|
|
48
|
+
export declare function createAnchoredTop(config: VerticalFixConfig): YPosition;
|
|
49
49
|
/**
|
|
50
50
|
* Attempts to position the fixed element so that it will appear at the center
|
|
51
51
|
* of the container element but also within the viewport boundaries. If the
|
|
@@ -54,7 +54,7 @@ export declare function createAnchoredTop(config: FixConfig): YPosition;
|
|
|
54
54
|
*
|
|
55
55
|
* @internal
|
|
56
56
|
*/
|
|
57
|
-
export declare function
|
|
57
|
+
export declare function createAnchoredVerticalCenter(config: VerticalFixConfig): YPosition;
|
|
58
58
|
/**
|
|
59
59
|
* Attempts to position the fixed element so that it will appear fixed to the
|
|
60
60
|
* bottom of the container element but also within the viewport boundaries. When
|
|
@@ -65,7 +65,7 @@ export declare function createAnchoredCenter(config: FixConfig): YPosition;
|
|
|
65
65
|
*
|
|
66
66
|
* @internal
|
|
67
67
|
*/
|
|
68
|
-
export declare function createAnchoredBottom(config:
|
|
68
|
+
export declare function createAnchoredBottom(config: VerticalFixConfig): YPosition;
|
|
69
69
|
/**
|
|
70
70
|
* Attempts to position the fixed element so that it will appear completely
|
|
71
71
|
* below the container element but also within the viewport boundaries. When
|
|
@@ -76,7 +76,7 @@ export declare function createAnchoredBottom(config: FixConfig): YPosition;
|
|
|
76
76
|
*
|
|
77
77
|
* @internal
|
|
78
78
|
*/
|
|
79
|
-
export declare function createAnchoredBelow(config:
|
|
79
|
+
export declare function createAnchoredBelow(config: VerticalFixConfig): YPosition;
|
|
80
80
|
/**
|
|
81
81
|
* Creates the vertical position for a fixed element with the provided options.
|
|
82
82
|
*
|
|
@@ -85,7 +85,7 @@ import { getAboveCoord, getBelowCoord, getBottomCoord, getCenterYCoord, getTopCo
|
|
|
85
85
|
* to either be the vhMargin or position to the screen bottom boundary
|
|
86
86
|
*
|
|
87
87
|
* @internal
|
|
88
|
-
*/ export function
|
|
88
|
+
*/ export function createAnchoredVerticalCenter(config) {
|
|
89
89
|
const { vhMargin, screenBottom, elHeight, disableVHBounds } = config;
|
|
90
90
|
let top = getCenterYCoord(config);
|
|
91
91
|
const actualY = "center";
|
|
@@ -216,7 +216,7 @@ import { getAboveCoord, getBelowCoord, getBottomCoord, getCenterYCoord, getTopCo
|
|
|
216
216
|
case "top":
|
|
217
217
|
return createAnchoredTop(config);
|
|
218
218
|
case "center":
|
|
219
|
-
return
|
|
219
|
+
return createAnchoredVerticalCenter(config);
|
|
220
220
|
case "bottom":
|
|
221
221
|
return createAnchoredBottom(config);
|
|
222
222
|
case "below":
|
|
@@ -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 FixConfig 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: FixConfig): 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: FixConfig): 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 createAnchoredCenter(config: FixConfig): 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: FixConfig): 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: FixConfig): 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: FixConfig = {\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 createAnchoredCenter(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","createAnchoredCenter","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\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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"}
|
|
@@ -171,6 +171,7 @@ export interface FixedPositioningImplementation<E extends HTMLElement> {
|
|
|
171
171
|
* }
|
|
172
172
|
* ```
|
|
173
173
|
*
|
|
174
|
+
* @see {@link https://next.react-md.dev/hooks/use-fixed-positioning | useFixedPositioning Demos}
|
|
174
175
|
* @typeParam FixedToElement - An HTMLElement type for the static element.
|
|
175
176
|
* @typeParam FixedElement - An HTMLElement type for the fixed element.
|
|
176
177
|
* @since 4.0.0
|
|
@@ -59,6 +59,7 @@ const noop = ()=>undefined;
|
|
|
59
59
|
* }
|
|
60
60
|
* ```
|
|
61
61
|
*
|
|
62
|
+
* @see {@link https://next.react-md.dev/hooks/use-fixed-positioning | useFixedPositioning Demos}
|
|
62
63
|
* @typeParam FixedToElement - An HTMLElement type for the static element.
|
|
63
64
|
* @typeParam FixedElement - An HTMLElement type for the fixed element.
|
|
64
65
|
* @since 4.0.0
|
|
@@ -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 * @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
|
+
{"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://next.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"}
|
|
@@ -91,7 +91,7 @@ export interface CircularProgressProps extends Omit<HTMLAttributes<HTMLSpanEleme
|
|
|
91
91
|
/**
|
|
92
92
|
* @example Indeterminate Example
|
|
93
93
|
* ```tsx
|
|
94
|
-
* import { CircularProgress } from "@react-md/core":
|
|
94
|
+
* import { CircularProgress } from "@react-md/core/progress/CircularProgress":
|
|
95
95
|
* import { type ReactElement } from "react";
|
|
96
96
|
*
|
|
97
97
|
* function Example(): ReactElement {
|
|
@@ -101,7 +101,7 @@ export interface CircularProgressProps extends Omit<HTMLAttributes<HTMLSpanEleme
|
|
|
101
101
|
*
|
|
102
102
|
* @example Determinate Example
|
|
103
103
|
* ```tsx
|
|
104
|
-
* import { CircularProgress } from "@react-md/core":
|
|
104
|
+
* import { CircularProgress } from "@react-md/core/progress/CircularProgress":
|
|
105
105
|
* import { useState, type ReactElement } from "react";
|
|
106
106
|
*
|
|
107
107
|
* function Example(): ReactElement {
|
|
@@ -112,6 +112,7 @@ export interface CircularProgressProps extends Omit<HTMLAttributes<HTMLSpanEleme
|
|
|
112
112
|
* }
|
|
113
113
|
* ```
|
|
114
114
|
*
|
|
115
|
+
* @see {@link https://next.react-md.dev/components/progress#circular-progress | Progress Demos}
|
|
115
116
|
* @since 6.0.0 Updated the determinate circular progress to no longer
|
|
116
117
|
* rotate while increasing the value and require a label for accessibility.
|
|
117
118
|
*/
|
|
@@ -9,7 +9,7 @@ const styles = bem("rmd-circular-progress");
|
|
|
9
9
|
/**
|
|
10
10
|
* @example Indeterminate Example
|
|
11
11
|
* ```tsx
|
|
12
|
-
* import { CircularProgress } from "@react-md/core":
|
|
12
|
+
* import { CircularProgress } from "@react-md/core/progress/CircularProgress":
|
|
13
13
|
* import { type ReactElement } from "react";
|
|
14
14
|
*
|
|
15
15
|
* function Example(): ReactElement {
|
|
@@ -19,7 +19,7 @@ const styles = bem("rmd-circular-progress");
|
|
|
19
19
|
*
|
|
20
20
|
* @example Determinate Example
|
|
21
21
|
* ```tsx
|
|
22
|
-
* import { CircularProgress } from "@react-md/core":
|
|
22
|
+
* import { CircularProgress } from "@react-md/core/progress/CircularProgress":
|
|
23
23
|
* import { useState, type ReactElement } from "react";
|
|
24
24
|
*
|
|
25
25
|
* function Example(): ReactElement {
|
|
@@ -30,6 +30,7 @@ const styles = bem("rmd-circular-progress");
|
|
|
30
30
|
* }
|
|
31
31
|
* ```
|
|
32
32
|
*
|
|
33
|
+
* @see {@link https://next.react-md.dev/components/progress#circular-progress | Progress Demos}
|
|
33
34
|
* @since 6.0.0 Updated the determinate circular progress to no longer
|
|
34
35
|
* rotate while increasing the value and require a label for accessibility.
|
|
35
36
|
*/ export const CircularProgress = /*#__PURE__*/ forwardRef(function CircularProgress(props, ref) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/progress/CircularProgress.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport {\n type CSSProperties,\n type HTMLAttributes,\n forwardRef,\n useMemo,\n} from \"react\";\n\nimport { cssUtils } from \"../cssUtils.js\";\nimport { type LabelRequiredForA11y } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { bem } from \"../utils/bem.js\";\nimport { getPercentage } from \"../utils/getPercentage.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 Omit<HTMLAttributes<HTMLSpanElement>, \"id\">,\n ProgressProps {\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 * Boolean if the circular progress should be centered using left and right\n * margins.\n *\n * @defaultValue `false`\n * @since 6.0.0 Renamed from `centered`\n */\n disableCentered?: boolean;\n\n /**\n * Set to `true` to render as a smaller size.\n *\n * @defaultValue `false`\n * @since 2.3.0\n * @since 6.0.0 Renamed from `small`\n */\n dense?: boolean;\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\nconst styles = bem(\"rmd-circular-progress\");\n\n/**\n * @example Indeterminate Example\n * ```tsx\n * import { CircularProgress } from \"@react-md/core\":\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\":\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 * @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 = \"primary\",\n dense = false,\n dashoffset = 187,\n disableShrink = false,\n disableCentered = false,\n disableTransition = false,\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 determinate = typeof progress === \"number\";\n const indeterminate = !determinate;\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={cnb(\n styles({ dense, centered: !disableCentered }),\n theme !== \"current-color\" && cssUtils({ textColor: theme }),\n className\n )}\n >\n <svg\n style={svgStyle}\n className={cnb(\n styles(\"svg\", {\n determinate,\n indeterminate: indeterminate && !disableShrink,\n \"rotate-only\": indeterminate && disableShrink,\n }),\n svgClassName\n )}\n viewBox={viewBox}\n >\n <circle\n style={circleStyle}\n className={cnb(\n styles(\"circle\", {\n animate: !disableTransition && determinate,\n determinate,\n indeterminate: indeterminate && !disableShrink,\n \"rotate-only\": indeterminate && disableShrink,\n }),\n circleClassName\n )}\n r={radius}\n cx={center}\n cy={center}\n />\n </svg>\n </span>\n );\n});\n"],"names":["cnb","forwardRef","useMemo","cssUtils","useEnsuredId","bem","getPercentage","styles","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","determinate","indeterminate","span","role","aria-valuemin","aria-valuemax","aria-valuenow","centered","textColor","svg","style","circle","animate","r","cx","cy"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAGEC,UAAU,EACVC,OAAO,QACF,QAAQ;AAEf,SAASC,QAAQ,QAAQ,iBAAiB;AAE1C,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,GAAG,QAAQ,kBAAkB;AACtC,SAASC,aAAa,QAAQ,4BAA4B;AAuG1D,MAAMC,SAASF,IAAI;AAEnB
|
|
1
|
+
{"version":3,"sources":["../../src/progress/CircularProgress.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport {\n type CSSProperties,\n type HTMLAttributes,\n forwardRef,\n useMemo,\n} from \"react\";\n\nimport { cssUtils } from \"../cssUtils.js\";\nimport { type LabelRequiredForA11y } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { bem } from \"../utils/bem.js\";\nimport { getPercentage } from \"../utils/getPercentage.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 Omit<HTMLAttributes<HTMLSpanElement>, \"id\">,\n ProgressProps {\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 * Boolean if the circular progress should be centered using left and right\n * margins.\n *\n * @defaultValue `false`\n * @since 6.0.0 Renamed from `centered`\n */\n disableCentered?: boolean;\n\n /**\n * Set to `true` to render as a smaller size.\n *\n * @defaultValue `false`\n * @since 2.3.0\n * @since 6.0.0 Renamed from `small`\n */\n dense?: boolean;\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\nconst styles = bem(\"rmd-circular-progress\");\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://next.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 = \"primary\",\n dense = false,\n dashoffset = 187,\n disableShrink = false,\n disableCentered = false,\n disableTransition = false,\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 determinate = typeof progress === \"number\";\n const indeterminate = !determinate;\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={cnb(\n styles({ dense, centered: !disableCentered }),\n theme !== \"current-color\" && cssUtils({ textColor: theme }),\n className\n )}\n >\n <svg\n style={svgStyle}\n className={cnb(\n styles(\"svg\", {\n determinate,\n indeterminate: indeterminate && !disableShrink,\n \"rotate-only\": indeterminate && disableShrink,\n }),\n svgClassName\n )}\n viewBox={viewBox}\n >\n <circle\n style={circleStyle}\n className={cnb(\n styles(\"circle\", {\n animate: !disableTransition && determinate,\n determinate,\n indeterminate: indeterminate && !disableShrink,\n \"rotate-only\": indeterminate && disableShrink,\n }),\n circleClassName\n )}\n r={radius}\n cx={center}\n cy={center}\n />\n </svg>\n </span>\n );\n});\n"],"names":["cnb","forwardRef","useMemo","cssUtils","useEnsuredId","bem","getPercentage","styles","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","determinate","indeterminate","span","role","aria-valuemin","aria-valuemax","aria-valuenow","centered","textColor","svg","style","circle","animate","r","cx","cy"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAGEC,UAAU,EACVC,OAAO,QACF,QAAQ;AAEf,SAASC,QAAQ,QAAQ,iBAAiB;AAE1C,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,GAAG,QAAQ,kBAAkB;AACtC,SAASC,aAAa,QAAQ,4BAA4B;AAuG1D,MAAMC,SAASF,IAAI;AAEnB;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BC,GACD,OAAO,MAAMG,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,QAAQ,SAAS,EACjBC,QAAQ,KAAK,EACbC,aAAa,GAAG,EAChBC,gBAAgB,KAAK,EACrBC,kBAAkB,KAAK,EACvBC,oBAAoB,KAAK,EACzB,GAAGC,WACJ,GAAGtB;IAEJ,MAAME,KAAKP,aAAaQ,QAAQ;IAChC,IAAIoB;IACJ,IAAI,OAAOb,UAAU,UAAU;QAC7Ba,WAAW1B,cAAc;YAAEc;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,cAAc,OAAOH,aAAa;IACxC,MAAMI,gBAAgB,CAACD;IACvB,qBACE,KAACE;QACE,GAAGN,SAAS;QACbpB,IAAIA;QACJD,KAAKA;QACL4B,MAAK;QACLC,iBAAenB;QACfoB,iBAAenB;QACfoB,iBAAetB;QACfN,WAAWb,IACTO,OAAO;YAAEmB;YAAOgB,UAAU,CAACb;QAAgB,IAC3CJ,UAAU,mBAAmBtB,SAAS;YAAEwC,WAAWlB;QAAM,IACzDZ;kBAGF,cAAA,KAAC+B;YACCC,OAAO/B;YACPD,WAAWb,IACTO,OAAO,OAAO;gBACZ4B;gBACAC,eAAeA,iBAAiB,CAACR;gBACjC,eAAeQ,iBAAiBR;YAClC,IACAb;YAEFS,SAASA;sBAET,cAAA,KAACsB;gBACCD,OAAO7B;gBACPH,WAAWb,IACTO,OAAO,UAAU;oBACfwC,SAAS,CAACjB,qBAAqBK;oBAC/BA;oBACAC,eAAeA,iBAAiB,CAACR;oBACjC,eAAeQ,iBAAiBR;gBAClC,IACAV;gBAEF8B,GAAG1B;gBACH2B,IAAI1B;gBACJ2B,IAAI3B;;;;AAKd,GAAG"}
|
|
@@ -45,7 +45,7 @@ export interface LinearProgressProps extends Omit<HTMLAttributes<HTMLSpanElement
|
|
|
45
45
|
/**
|
|
46
46
|
* @example Indeterminate Example
|
|
47
47
|
* ```tsx
|
|
48
|
-
* import { LinearProgress } from "@react-md/core";
|
|
48
|
+
* import { LinearProgress } from "@react-md/core/progress/LinearProgress";
|
|
49
49
|
* import { type ReactElement } from "react";
|
|
50
50
|
*
|
|
51
51
|
* function Example(): ReactElement {
|
|
@@ -55,7 +55,7 @@ export interface LinearProgressProps extends Omit<HTMLAttributes<HTMLSpanElement
|
|
|
55
55
|
*
|
|
56
56
|
* @example Determinate Example
|
|
57
57
|
* ```tsx
|
|
58
|
-
* import { LinearProgress } from "@react-md/core";
|
|
58
|
+
* import { LinearProgress } from "@react-md/core/progress/LinearProgress";
|
|
59
59
|
* import { useState, type ReactElement } from "react";
|
|
60
60
|
*
|
|
61
61
|
* function Example(): ReactElement {
|
|
@@ -66,6 +66,7 @@ export interface LinearProgressProps extends Omit<HTMLAttributes<HTMLSpanElement
|
|
|
66
66
|
* }
|
|
67
67
|
* ```
|
|
68
68
|
*
|
|
69
|
+
* @see {@link https://next.react-md.dev/components/progress#linear-progress | Progress Demos}
|
|
69
70
|
* @since 6.0.0 Supports rendering as any of the theme colors and
|
|
70
71
|
* requires a label for accessibility.
|
|
71
72
|
*/
|
|
@@ -9,7 +9,7 @@ const styles = bem("rmd-linear-progress");
|
|
|
9
9
|
/**
|
|
10
10
|
* @example Indeterminate Example
|
|
11
11
|
* ```tsx
|
|
12
|
-
* import { LinearProgress } from "@react-md/core";
|
|
12
|
+
* import { LinearProgress } from "@react-md/core/progress/LinearProgress";
|
|
13
13
|
* import { type ReactElement } from "react";
|
|
14
14
|
*
|
|
15
15
|
* function Example(): ReactElement {
|
|
@@ -19,7 +19,7 @@ const styles = bem("rmd-linear-progress");
|
|
|
19
19
|
*
|
|
20
20
|
* @example Determinate Example
|
|
21
21
|
* ```tsx
|
|
22
|
-
* import { LinearProgress } from "@react-md/core";
|
|
22
|
+
* import { LinearProgress } from "@react-md/core/progress/LinearProgress";
|
|
23
23
|
* import { useState, type ReactElement } from "react";
|
|
24
24
|
*
|
|
25
25
|
* function Example(): ReactElement {
|
|
@@ -30,6 +30,7 @@ const styles = bem("rmd-linear-progress");
|
|
|
30
30
|
* }
|
|
31
31
|
* ```
|
|
32
32
|
*
|
|
33
|
+
* @see {@link https://next.react-md.dev/components/progress#linear-progress | Progress Demos}
|
|
33
34
|
* @since 6.0.0 Supports rendering as any of the theme colors and
|
|
34
35
|
* requires a label for accessibility.
|
|
35
36
|
*/ export const LinearProgress = /*#__PURE__*/ forwardRef(function LinearProgress(props, ref) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/progress/LinearProgress.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport {\n type CSSProperties,\n type HTMLAttributes,\n forwardRef,\n useMemo,\n} from \"react\";\n\nimport { cssUtils } from \"../cssUtils.js\";\nimport { type LabelRequiredForA11y } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { bem } from \"../utils/bem.js\";\nimport { getPercentage } from \"../utils/getPercentage.js\";\nimport { type ProgressProps } from \"./types.js\";\n\n/**\n * @since 6.0.0 Added the `theme` prop\n */\nexport interface LinearProgressProps\n extends Omit<HTMLAttributes<HTMLSpanElement>, \"id\" | \"children\">,\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 * 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 * 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 * 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\nconst styles = bem(\"rmd-linear-progress\");\n\n/**\n * @example Indeterminate Example\n * ```tsx\n * import { LinearProgress } from \"@react-md/core\";\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\";\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 * @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 min = 0,\n max = 100,\n value,\n reverse = false,\n theme = \"primary\",\n disableTransition = false,\n vertical = false,\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 determinate = typeof progress === \"number\";\n const indeterminate = !determinate;\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={cnb(\n styles({\n vertical,\n horizontal: !vertical,\n determinate,\n indeterminate,\n }),\n theme !== \"current-color\" && cssUtils({ textColor: theme }),\n className\n )}\n >\n <span\n style={barStyle}\n className={cnb(\n styles(\"bar\", {\n vertical,\n \"vertical-reverse\": vertical && reverse,\n horizontal: !vertical,\n \"horizontal-reverse\": !vertical && reverse,\n animate: !disableTransition && determinate,\n determinate,\n indeterminate,\n \"determinate-reverse\": determinate && reverse && !vertical,\n \"determinate-vertical-reverse\": determinate && reverse && vertical,\n \"indeterminate-reverse\": indeterminate && reverse && !vertical,\n \"indeterminate-vertical\": indeterminate && vertical,\n \"indeterminate-vertical-reverse\":\n indeterminate && reverse && vertical,\n }),\n barClassName\n )}\n />\n </span>\n );\n});\n"],"names":["cnb","forwardRef","useMemo","cssUtils","useEnsuredId","bem","getPercentage","styles","LinearProgress","props","ref","id","propId","style","propStyle","className","barStyle","propBarStyle","barClassName","min","max","value","reverse","theme","disableTransition","vertical","verticalHeight","remaining","height","progress","validate","key","determinate","indeterminate","span","role","aria-valuemin","aria-valuemax","aria-valuenow","horizontal","textColor","animate"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAGEC,UAAU,EACVC,OAAO,QACF,QAAQ;AAEf,SAASC,QAAQ,QAAQ,iBAAiB;AAE1C,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,GAAG,QAAQ,kBAAkB;AACtC,SAASC,aAAa,QAAQ,4BAA4B;AAmD1D,MAAMC,SAASF,IAAI;AAEnB
|
|
1
|
+
{"version":3,"sources":["../../src/progress/LinearProgress.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport {\n type CSSProperties,\n type HTMLAttributes,\n forwardRef,\n useMemo,\n} from \"react\";\n\nimport { cssUtils } from \"../cssUtils.js\";\nimport { type LabelRequiredForA11y } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { bem } from \"../utils/bem.js\";\nimport { getPercentage } from \"../utils/getPercentage.js\";\nimport { type ProgressProps } from \"./types.js\";\n\n/**\n * @since 6.0.0 Added the `theme` prop\n */\nexport interface LinearProgressProps\n extends Omit<HTMLAttributes<HTMLSpanElement>, \"id\" | \"children\">,\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 * 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 * 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 * 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\nconst styles = bem(\"rmd-linear-progress\");\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://next.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 min = 0,\n max = 100,\n value,\n reverse = false,\n theme = \"primary\",\n disableTransition = false,\n vertical = false,\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 determinate = typeof progress === \"number\";\n const indeterminate = !determinate;\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={cnb(\n styles({\n vertical,\n horizontal: !vertical,\n determinate,\n indeterminate,\n }),\n theme !== \"current-color\" && cssUtils({ textColor: theme }),\n className\n )}\n >\n <span\n style={barStyle}\n className={cnb(\n styles(\"bar\", {\n vertical,\n \"vertical-reverse\": vertical && reverse,\n horizontal: !vertical,\n \"horizontal-reverse\": !vertical && reverse,\n animate: !disableTransition && determinate,\n determinate,\n indeterminate,\n \"determinate-reverse\": determinate && reverse && !vertical,\n \"determinate-vertical-reverse\": determinate && reverse && vertical,\n \"indeterminate-reverse\": indeterminate && reverse && !vertical,\n \"indeterminate-vertical\": indeterminate && vertical,\n \"indeterminate-vertical-reverse\":\n indeterminate && reverse && vertical,\n }),\n barClassName\n )}\n />\n </span>\n );\n});\n"],"names":["cnb","forwardRef","useMemo","cssUtils","useEnsuredId","bem","getPercentage","styles","LinearProgress","props","ref","id","propId","style","propStyle","className","barStyle","propBarStyle","barClassName","min","max","value","reverse","theme","disableTransition","vertical","verticalHeight","remaining","height","progress","validate","key","determinate","indeterminate","span","role","aria-valuemin","aria-valuemax","aria-valuenow","horizontal","textColor","animate"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAGEC,UAAU,EACVC,OAAO,QACF,QAAQ;AAEf,SAASC,QAAQ,QAAQ,iBAAiB;AAE1C,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,GAAG,QAAQ,kBAAkB;AACtC,SAASC,aAAa,QAAQ,4BAA4B;AAmD1D,MAAMC,SAASF,IAAI;AAEnB;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BC,GACD,OAAO,MAAMG,+BAAiBP,WAG5B,SAASO,eAAeC,KAAK,EAAEC,GAAG;IAClC,MAAM,EACJC,IAAIC,MAAM,EACVC,OAAOC,SAAS,EAChBC,SAAS,EACTC,UAAUC,YAAY,EACtBC,YAAY,EACZC,MAAM,CAAC,EACPC,MAAM,GAAG,EACTC,KAAK,EACLC,UAAU,KAAK,EACfC,QAAQ,SAAS,EACjBC,oBAAoB,KAAK,EACzBC,WAAW,KAAK,EAChBC,iBAAiB,GAAG,EACpB,GAAGC,WACJ,GAAGlB;IAEJ,MAAME,KAAKP,aAAaQ,QAAQ;IAChC,MAAMC,QAAQX,QAAQ;QACpB,IAAI,CAACuB,YAAYC,mBAAmB,MAAM;YACxC,OAAOZ;QACT;QAEA,OAAO;YACL,GAAGA,SAAS;YACZc,QAAQF;QACV;IACF,GAAG;QAACZ;QAAWW;QAAUC;KAAe;IAExC,IAAIG;IACJ,IAAI,OAAOR,UAAU,UAAU;QAC7BQ,WAAWvB,cAAc;YAAEa;YAAKC;YAAKC;YAAOS,UAAU;QAAK;IAC7D;IACA,MAAMd,WAAWd,QAAQ;QACvB,IAAI,OAAO2B,aAAa,UAAU;YAChC,OAAOZ;QACT;QAEA,MAAMc,MAAMN,WAAW,WAAW;QAClC,OAAO;YACL,GAAGR,YAAY;YACf,CAACc,IAAI,EAAE,GAAGF,WAAW,IAAI,CAAC,CAAC;QAC7B;IACF,GAAG;QAACA;QAAUZ;QAAcQ;KAAS;IAErC,MAAMO,cAAc,OAAOH,aAAa;IACxC,MAAMI,gBAAgB,CAACD;IACvB,qBACE,KAACE;QACE,GAAGP,SAAS;QACbhB,IAAIA;QACJD,KAAKA;QACLG,OAAOA;QACPsB,MAAK;QACLC,iBAAejB;QACfkB,iBAAejB;QACfkB,iBAAejB;QACfN,WAAWf,IACTO,OAAO;YACLkB;YACAc,YAAY,CAACd;YACbO;YACAC;QACF,IACAV,UAAU,mBAAmBpB,SAAS;YAAEqC,WAAWjB;QAAM,IACzDR;kBAGF,cAAA,KAACmB;YACCrB,OAAOG;YACPD,WAAWf,IACTO,OAAO,OAAO;gBACZkB;gBACA,oBAAoBA,YAAYH;gBAChCiB,YAAY,CAACd;gBACb,sBAAsB,CAACA,YAAYH;gBACnCmB,SAAS,CAACjB,qBAAqBQ;gBAC/BA;gBACAC;gBACA,uBAAuBD,eAAeV,WAAW,CAACG;gBAClD,gCAAgCO,eAAeV,WAAWG;gBAC1D,yBAAyBQ,iBAAiBX,WAAW,CAACG;gBACtD,0BAA0BQ,iBAAiBR;gBAC3C,kCACEQ,iBAAiBX,WAAWG;YAChC,IACAP;;;AAKV,GAAG"}
|