@react-md/core 1.0.0-next.14 → 1.0.0-next.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/CoreProviders.js.map +1 -1
- package/dist/NoSsr.js.map +1 -1
- package/dist/RootHtml.d.ts +0 -2
- package/dist/RootHtml.js +0 -2
- package/dist/RootHtml.js.map +1 -1
- package/dist/SsrProvider.js.map +1 -1
- package/dist/app-bar/AppBar.d.ts +0 -2
- package/dist/app-bar/AppBar.js +0 -2
- package/dist/app-bar/AppBar.js.map +1 -1
- package/dist/app-bar/AppBarTitle.d.ts +8 -7
- package/dist/app-bar/AppBarTitle.js +3 -4
- package/dist/app-bar/AppBarTitle.js.map +1 -1
- package/dist/autocomplete/Autocomplete.js.map +1 -1
- package/dist/autocomplete/AutocompleteCircularProgress.js.map +1 -1
- package/dist/autocomplete/AutocompleteDropdownButton.js.map +1 -1
- package/dist/autocomplete/FilterAutocompleteOptions.js.map +1 -1
- package/dist/autocomplete/autocompleteStyles.js.map +1 -1
- package/dist/autocomplete/defaults.d.ts +2 -2
- package/dist/autocomplete/defaults.js +3 -3
- package/dist/autocomplete/defaults.js.map +1 -1
- package/dist/autocomplete/types.js.map +1 -1
- package/dist/avatar/Avatar.d.ts +1 -4
- package/dist/avatar/Avatar.js +1 -4
- package/dist/avatar/Avatar.js.map +1 -1
- package/dist/avatar/styles.js.map +1 -1
- package/dist/badge/Badge.d.ts +1 -3
- package/dist/badge/Badge.js +0 -2
- package/dist/badge/Badge.js.map +1 -1
- package/dist/box/Box.d.ts +0 -2
- package/dist/box/Box.js +0 -2
- package/dist/box/Box.js.map +1 -1
- package/dist/box/styles.js.map +1 -1
- package/dist/button/AsyncButton.js.map +1 -1
- package/dist/button/Button.js.map +1 -1
- package/dist/button/ButtonUnstyled.d.ts +0 -2
- package/dist/button/ButtonUnstyled.js +0 -2
- package/dist/button/ButtonUnstyled.js.map +1 -1
- package/dist/button/FloatingActionButton.js.map +1 -1
- package/dist/button/TooltippedButton.js.map +1 -1
- package/dist/button/buttonStyles.js.map +1 -1
- package/dist/button/buttonUnstyledStyles.js.map +1 -1
- package/dist/card/Card.d.ts +2 -3
- package/dist/card/Card.js +0 -2
- package/dist/card/Card.js.map +1 -1
- package/dist/card/CardContent.d.ts +0 -2
- package/dist/card/CardContent.js +0 -2
- package/dist/card/CardContent.js.map +1 -1
- package/dist/card/CardFooter.d.ts +0 -3
- package/dist/card/CardFooter.js +0 -2
- package/dist/card/CardFooter.js.map +1 -1
- package/dist/card/CardHeader.d.ts +0 -2
- package/dist/card/CardHeader.js +0 -2
- package/dist/card/CardHeader.js.map +1 -1
- package/dist/card/CardSubtitle.d.ts +6 -3
- package/dist/card/CardSubtitle.js +2 -3
- package/dist/card/CardSubtitle.js.map +1 -1
- package/dist/card/CardTitle.d.ts +0 -3
- package/dist/card/CardTitle.js +0 -2
- package/dist/card/CardTitle.js.map +1 -1
- package/dist/card/ClickableCard.js.map +1 -1
- package/dist/card/styles.js +2 -4
- package/dist/card/styles.js.map +1 -1
- package/dist/chip/Chip.d.ts +0 -2
- package/dist/chip/Chip.js +0 -2
- package/dist/chip/Chip.js.map +1 -1
- package/dist/chip/styles.js.map +1 -1
- package/dist/cssUtils.d.ts +1 -1
- package/dist/cssUtils.js.map +1 -1
- package/dist/delegateEvent.js.map +1 -1
- package/dist/dialog/Dialog.js.map +1 -1
- package/dist/dialog/DialogContainer.d.ts +0 -2
- package/dist/dialog/DialogContainer.js +0 -2
- package/dist/dialog/DialogContainer.js.map +1 -1
- package/dist/dialog/DialogContent.d.ts +3 -3
- package/dist/dialog/DialogContent.js +3 -3
- package/dist/dialog/DialogContent.js.map +1 -1
- package/dist/dialog/DialogFooter.d.ts +2 -3
- package/dist/dialog/DialogFooter.js +2 -3
- package/dist/dialog/DialogFooter.js.map +1 -1
- package/dist/dialog/DialogHeader.d.ts +3 -3
- package/dist/dialog/DialogHeader.js +3 -3
- package/dist/dialog/DialogHeader.js.map +1 -1
- package/dist/dialog/DialogTitle.d.ts +3 -4
- package/dist/dialog/DialogTitle.js +3 -3
- package/dist/dialog/DialogTitle.js.map +1 -1
- package/dist/dialog/FixedDialog.js.map +1 -1
- package/dist/dialog/NestedDialogProvider.d.ts +0 -1
- package/dist/dialog/NestedDialogProvider.js.map +1 -1
- package/dist/dialog/styles.js.map +1 -1
- package/dist/divider/Divider.d.ts +0 -2
- package/dist/divider/Divider.js +0 -2
- package/dist/divider/Divider.js.map +1 -1
- package/dist/divider/styles.js.map +1 -1
- package/dist/draggable/useDraggable.js.map +1 -1
- package/dist/draggable/utils.js.map +1 -1
- package/dist/expansion-panel/ExpansionList.d.ts +1 -1
- package/dist/expansion-panel/ExpansionList.js +1 -1
- package/dist/expansion-panel/ExpansionList.js.map +1 -1
- package/dist/expansion-panel/ExpansionPanel.d.ts +8 -24
- package/dist/expansion-panel/ExpansionPanel.js +1 -12
- package/dist/expansion-panel/ExpansionPanel.js.map +1 -1
- package/dist/expansion-panel/ExpansionPanelHeader.d.ts +0 -1
- package/dist/expansion-panel/ExpansionPanelHeader.js +0 -1
- package/dist/expansion-panel/ExpansionPanelHeader.js.map +1 -1
- package/dist/expansion-panel/expansionPanelStyles.d.ts +19 -0
- package/dist/expansion-panel/expansionPanelStyles.js +14 -0
- package/dist/expansion-panel/expansionPanelStyles.js.map +1 -0
- package/dist/expansion-panel/useExpansionList.js.map +1 -1
- package/dist/expansion-panel/useExpansionPanels.js.map +1 -1
- package/dist/focus/useFocusContainer.js.map +1 -1
- package/dist/focus/utils.js.map +1 -1
- package/dist/form/Checkbox.d.ts +0 -1
- package/dist/form/Checkbox.js.map +1 -1
- package/dist/form/Fieldset.d.ts +0 -2
- package/dist/form/Fieldset.js.map +1 -1
- package/dist/form/FileInput.js.map +1 -1
- package/dist/form/Form.js.map +1 -1
- package/dist/form/FormMessage.d.ts +0 -3
- package/dist/form/FormMessage.js +0 -2
- package/dist/form/FormMessage.js.map +1 -1
- package/dist/form/FormMessageContainer.d.ts +0 -1
- package/dist/form/FormMessageContainer.js +0 -1
- package/dist/form/FormMessageContainer.js.map +1 -1
- package/dist/form/FormMessageCounter.d.ts +0 -2
- package/dist/form/FormMessageCounter.js +0 -2
- package/dist/form/FormMessageCounter.js.map +1 -1
- package/dist/form/InputToggle.js.map +1 -1
- package/dist/form/InputToggleIcon.d.ts +0 -2
- package/dist/form/InputToggleIcon.js +0 -2
- package/dist/form/InputToggleIcon.js.map +1 -1
- package/dist/form/Label.d.ts +0 -3
- package/dist/form/Label.js +0 -2
- package/dist/form/Label.js.map +1 -1
- package/dist/form/Legend.d.ts +0 -3
- package/dist/form/Legend.js +0 -2
- package/dist/form/Legend.js.map +1 -1
- package/dist/form/MenuItemCheckbox.d.ts +0 -1
- package/dist/form/MenuItemCheckbox.js.map +1 -1
- package/dist/form/MenuItemFileInput.js.map +1 -1
- package/dist/form/MenuItemInputToggle.js.map +1 -1
- package/dist/form/MenuItemRadio.d.ts +0 -1
- package/dist/form/MenuItemRadio.js.map +1 -1
- package/dist/form/MenuItemSwitch.d.ts +0 -1
- package/dist/form/MenuItemSwitch.js.map +1 -1
- package/dist/form/MenuItemTextField.js.map +1 -1
- package/dist/form/NativeSelect.d.ts +0 -2
- package/dist/form/NativeSelect.js +0 -2
- package/dist/form/NativeSelect.js.map +1 -1
- package/dist/form/OptGroup.js.map +1 -1
- package/dist/form/Option.js.map +1 -1
- package/dist/form/Password.js.map +1 -1
- package/dist/form/Radio.d.ts +0 -1
- package/dist/form/Radio.js.map +1 -1
- package/dist/form/ResizingTextAreaWrapper.js.map +1 -1
- package/dist/form/Select.js.map +1 -1
- package/dist/form/SelectedOption.d.ts +0 -2
- package/dist/form/SelectedOption.js +0 -2
- package/dist/form/SelectedOption.js.map +1 -1
- package/dist/form/Slider.js.map +1 -1
- package/dist/form/SliderContainer.d.ts +0 -2
- package/dist/form/SliderContainer.js +0 -2
- package/dist/form/SliderContainer.js.map +1 -1
- package/dist/form/SliderMark.d.ts +0 -2
- package/dist/form/SliderMark.js +0 -2
- package/dist/form/SliderMark.js.map +1 -1
- package/dist/form/SliderMarkLabel.d.ts +0 -2
- package/dist/form/SliderMarkLabel.js +0 -2
- package/dist/form/SliderMarkLabel.js.map +1 -1
- package/dist/form/SliderThumb.js.map +1 -1
- package/dist/form/SliderTrack.d.ts +0 -2
- package/dist/form/SliderTrack.js +0 -2
- package/dist/form/SliderTrack.js.map +1 -1
- package/dist/form/SliderValueMarks.d.ts +0 -2
- package/dist/form/SliderValueMarks.js +0 -2
- package/dist/form/SliderValueMarks.js.map +1 -1
- package/dist/form/SliderValueTooltip.js.map +1 -1
- package/dist/form/Switch.d.ts +0 -2
- package/dist/form/Switch.js +0 -2
- package/dist/form/Switch.js.map +1 -1
- package/dist/form/SwitchTrack.d.ts +2 -1
- package/dist/form/SwitchTrack.js +2 -1
- package/dist/form/SwitchTrack.js.map +1 -1
- package/dist/form/TextArea.js.map +1 -1
- package/dist/form/TextField.d.ts +0 -2
- package/dist/form/TextField.js +0 -2
- package/dist/form/TextField.js.map +1 -1
- package/dist/form/TextFieldAddon.d.ts +1 -4
- package/dist/form/TextFieldAddon.js +1 -3
- package/dist/form/TextFieldAddon.js.map +1 -1
- package/dist/form/TextFieldContainer.js.map +1 -1
- package/dist/form/fileUtils.js.map +1 -1
- package/dist/form/formConfig.js.map +1 -1
- package/dist/form/formMessageStyles.js.map +1 -1
- package/dist/form/inputToggleStyles.js.map +1 -1
- package/dist/form/menuItemInputToggleStyles.js.map +1 -1
- package/dist/form/nativeSelectStyles.js.map +1 -1
- package/dist/form/optionStyles.js.map +1 -1
- package/dist/form/passwordStyles.js.map +1 -1
- package/dist/form/selectStyles.js.map +1 -1
- package/dist/form/selectUtils.js.map +1 -1
- package/dist/form/sliderUtils.js.map +1 -1
- package/dist/form/switchStyles.js.map +1 -1
- package/dist/form/textAreaStyles.js.map +1 -1
- package/dist/form/textFieldContainerStyles.js.map +1 -1
- package/dist/form/textFieldStyles.js.map +1 -1
- package/dist/form/types.js.map +1 -1
- package/dist/form/useCheckboxGroup.js.map +1 -1
- package/dist/form/useCombobox.js.map +1 -1
- package/dist/form/useEditableCombobox.js.map +1 -1
- package/dist/form/useFileUpload.js.map +1 -1
- package/dist/form/useFormReset.js.map +1 -1
- package/dist/form/useListboxProvider.js.map +1 -1
- package/dist/form/useNumberField.js.map +1 -1
- package/dist/form/useRadioGroup.js.map +1 -1
- package/dist/form/useRangeSlider.js.map +1 -1
- package/dist/form/useResizingTextArea.js.map +1 -1
- package/dist/form/useSelectCombobox.js.map +1 -1
- package/dist/form/useSlider.js.map +1 -1
- package/dist/form/useTextField.js.map +1 -1
- package/dist/form/useTextFieldContainerAddons.js.map +1 -1
- package/dist/form/utils.js.map +1 -1
- package/dist/form/validation.js.map +1 -1
- package/dist/hoverMode/useHoverMode.js.map +1 -1
- package/dist/hoverMode/useHoverModeProvider.js.map +1 -1
- package/dist/icon/FontIcon.d.ts +10 -8
- package/dist/icon/FontIcon.js +1 -7
- package/dist/icon/FontIcon.js.map +1 -1
- package/dist/icon/IconRotator.d.ts +0 -2
- package/dist/icon/IconRotator.js +0 -2
- package/dist/icon/IconRotator.js.map +1 -1
- package/dist/icon/MaterialIcon.d.ts +18 -3
- package/dist/icon/MaterialIcon.js +13 -3
- package/dist/icon/MaterialIcon.js.map +1 -1
- package/dist/icon/MaterialSymbol.d.ts +0 -1
- package/dist/icon/MaterialSymbol.js +0 -1
- package/dist/icon/MaterialSymbol.js.map +1 -1
- package/dist/icon/SVGIcon.d.ts +3 -2
- package/dist/icon/SVGIcon.js +0 -2
- package/dist/icon/SVGIcon.js.map +1 -1
- package/dist/icon/TextIconSpacing.d.ts +0 -2
- package/dist/icon/TextIconSpacing.js +0 -2
- package/dist/icon/TextIconSpacing.js.map +1 -1
- package/dist/icon/_icon.scss +2 -2
- package/dist/icon/iconConfig.d.ts +1 -0
- package/dist/icon/iconConfig.js +1 -0
- package/dist/icon/iconConfig.js.map +1 -1
- package/dist/icon/material.d.ts +1 -1
- package/dist/icon/material.js.map +1 -1
- package/dist/icon/materialConfig.js.map +1 -1
- package/dist/icon/styles.js +1 -1
- package/dist/icon/styles.js.map +1 -1
- package/dist/interaction/Ripple.js.map +1 -1
- package/dist/interaction/RippleContainer.d.ts +0 -2
- package/dist/interaction/RippleContainer.js +0 -2
- package/dist/interaction/RippleContainer.js.map +1 -1
- package/dist/interaction/UserInteractionModeProvider.js.map +1 -1
- package/dist/interaction/config.js.map +1 -1
- package/dist/interaction/types.js.map +1 -1
- package/dist/interaction/useElementInteraction.js.map +1 -1
- package/dist/interaction/useHigherContrastChildren.js.map +1 -1
- package/dist/interaction/utils.js.map +1 -1
- package/dist/layout/LayoutAppBar.d.ts +0 -1
- package/dist/layout/LayoutAppBar.js.map +1 -1
- package/dist/layout/LayoutNav.js +1 -2
- package/dist/layout/LayoutNav.js.map +1 -1
- package/dist/layout/LayoutWindowSplitter.d.ts +0 -1
- package/dist/layout/LayoutWindowSplitter.js.map +1 -1
- package/dist/layout/Main.js.map +1 -1
- package/dist/layout/layoutNavStyles.js.map +1 -1
- package/dist/layout/layoutWindowSplitterStyles.js.map +1 -1
- package/dist/layout/mainStyles.js.map +1 -1
- package/dist/layout/useExpandableLayout.js.map +1 -1
- package/dist/layout/useHorizontalLayoutTransition.js +1 -1
- package/dist/layout/useHorizontalLayoutTransition.js.map +1 -1
- package/dist/layout/useLayoutAppBarHeight.js.map +1 -1
- package/dist/layout/useLayoutTree.d.ts +2 -2
- package/dist/layout/useLayoutTree.js.map +1 -1
- package/dist/layout/useLayoutWindowSplitter.js.map +1 -1
- package/dist/layout/useMainTabIndex.js.map +1 -1
- package/dist/layout/useResizableLayout.js.map +1 -1
- package/dist/layout/useTemporaryLayout.js.map +1 -1
- package/dist/link/Link.d.ts +2 -6
- package/dist/link/Link.js +1 -4
- package/dist/link/Link.js.map +1 -1
- package/dist/link/SkipToMainContent.d.ts +10 -3
- package/dist/link/SkipToMainContent.js +4 -1
- package/dist/link/SkipToMainContent.js.map +1 -1
- package/dist/link/styles.d.ts +2 -2
- package/dist/link/styles.js.map +1 -1
- package/dist/list/List.d.ts +0 -20
- package/dist/list/List.js +1 -14
- package/dist/list/List.js.map +1 -1
- package/dist/list/ListItem.d.ts +0 -16
- package/dist/list/ListItem.js.map +1 -1
- package/dist/list/ListItemAddon.d.ts +0 -2
- package/dist/list/ListItemAddon.js +0 -2
- package/dist/list/ListItemAddon.js.map +1 -1
- package/dist/list/ListItemChildren.d.ts +0 -2
- package/dist/list/ListItemChildren.js +0 -2
- package/dist/list/ListItemChildren.js.map +1 -1
- package/dist/list/ListItemLink.js.map +1 -1
- package/dist/list/ListItemText.d.ts +0 -2
- package/dist/list/ListItemText.js +0 -2
- package/dist/list/ListItemText.js.map +1 -1
- package/dist/list/ListSubheader.d.ts +3 -2
- package/dist/list/ListSubheader.js +0 -2
- package/dist/list/ListSubheader.js.map +1 -1
- package/dist/list/getListItemHeight.d.ts +2 -2
- package/dist/list/getListItemHeight.js +2 -2
- package/dist/list/getListItemHeight.js.map +1 -1
- package/dist/list/listItemStyles.d.ts +17 -1
- package/dist/list/listItemStyles.js.map +1 -1
- package/dist/list/listStyles.d.ts +18 -0
- package/dist/list/listStyles.js +14 -0
- package/dist/list/listStyles.js.map +1 -0
- package/dist/list/types.d.ts +9 -3
- package/dist/list/types.js +6 -1
- package/dist/list/types.js.map +1 -1
- package/dist/media-queries/AppSizeProvider.d.ts +8 -0
- package/dist/media-queries/AppSizeProvider.js +2 -0
- package/dist/media-queries/AppSizeProvider.js.map +1 -1
- package/dist/media-queries/appSize.d.ts +5 -5
- package/dist/media-queries/appSize.js.map +1 -1
- package/dist/media-queries/useMediaQuery.d.ts +1 -1
- package/dist/media-queries/useMediaQuery.js +1 -1
- package/dist/media-queries/useMediaQuery.js.map +1 -1
- package/dist/menu/DropdownMenu.js.map +1 -1
- package/dist/menu/Menu.js.map +1 -1
- package/dist/menu/MenuBar.d.ts +0 -1
- package/dist/menu/MenuBar.js.map +1 -1
- package/dist/menu/MenuButton.d.ts +0 -1
- package/dist/menu/MenuButton.js.map +1 -1
- package/dist/menu/MenuConfigurationProvider.js.map +1 -1
- package/dist/menu/MenuItem.d.ts +0 -1
- package/dist/menu/MenuItem.js.map +1 -1
- package/dist/menu/MenuItemButton.d.ts +0 -1
- package/dist/menu/MenuItemButton.js.map +1 -1
- package/dist/menu/MenuItemCircularProgress.js.map +1 -1
- package/dist/menu/MenuItemGroup.js.map +1 -1
- package/dist/menu/MenuItemSeparator.js.map +1 -1
- package/dist/menu/MenuSheet.js.map +1 -1
- package/dist/menu/MenuVisibilityProvider.js.map +1 -1
- package/dist/menu/MenuWidget.js.map +1 -1
- package/dist/menu/MenuWidgetKeyboardProvider.js.map +1 -1
- package/dist/menu/useContextMenu.js.map +1 -1
- package/dist/menu/useMenuBarProvider.d.ts +0 -1
- package/dist/menu/useMenuBarProvider.js.map +1 -1
- package/dist/menu/utils.js.map +1 -1
- package/dist/movement/constants.js.map +1 -1
- package/dist/movement/findMatchIndex.js.map +1 -1
- package/dist/movement/types.js.map +1 -1
- package/dist/movement/useKeyboardMovementProvider.d.ts +0 -1
- package/dist/movement/useKeyboardMovementProvider.js.map +1 -1
- package/dist/movement/utils.js.map +1 -1
- package/dist/navigation/CollapsibleNavGroup.js.map +1 -1
- package/dist/navigation/DefaultNavigationRenderer.js.map +1 -1
- package/dist/navigation/NavGroup.d.ts +0 -2
- package/dist/navigation/NavGroup.js +0 -2
- package/dist/navigation/NavGroup.js.map +1 -1
- package/dist/navigation/NavItem.d.ts +0 -2
- package/dist/navigation/NavItem.js +0 -2
- package/dist/navigation/NavItem.js.map +1 -1
- package/dist/navigation/NavItemButton.js.map +1 -1
- package/dist/navigation/NavItemLink.js.map +1 -1
- package/dist/navigation/NavSubheader.d.ts +0 -3
- package/dist/navigation/NavSubheader.js +0 -2
- package/dist/navigation/NavSubheader.js.map +1 -1
- package/dist/navigation/Navigation.js.map +1 -1
- package/dist/navigation/getHrefFromParents.js.map +1 -1
- package/dist/navigation/navGroupStyles.js.map +1 -1
- package/dist/navigation/navItemStyles.js.map +1 -1
- package/dist/navigation/types.js.map +1 -1
- package/dist/navigation/useActiveHeadingId.js.map +1 -1
- package/dist/overlay/Overlay.d.ts +1 -0
- package/dist/overlay/Overlay.js.map +1 -1
- package/dist/overlay/overlayStyles.js.map +1 -1
- package/dist/portal/Portal.d.ts +4 -0
- package/dist/portal/Portal.js.map +1 -1
- package/dist/portal/PortalContainerProvider.d.ts +8 -3
- package/dist/portal/PortalContainerProvider.js +1 -0
- package/dist/portal/PortalContainerProvider.js.map +1 -1
- package/dist/positioning/constants.js.map +1 -1
- package/dist/positioning/createHorizontalPosition.js.map +1 -1
- package/dist/positioning/createVerticalPosition.js.map +1 -1
- package/dist/positioning/getFixedPosition.js.map +1 -1
- package/dist/positioning/types.js.map +1 -1
- package/dist/positioning/useFixedPositioning.js.map +1 -1
- package/dist/positioning/utils.js.map +1 -1
- package/dist/progress/CircularProgress.d.ts +5 -6
- package/dist/progress/CircularProgress.js +0 -2
- package/dist/progress/CircularProgress.js.map +1 -1
- package/dist/progress/LinearProgress.d.ts +0 -2
- package/dist/progress/LinearProgress.js +0 -2
- package/dist/progress/LinearProgress.js.map +1 -1
- package/dist/progress/getProgressA11y.js.map +1 -1
- package/dist/progress/types.js.map +1 -1
- package/dist/responsive-item/ResponsiveItemContainer.d.ts +0 -2
- package/dist/responsive-item/ResponsiveItemContainer.js +0 -2
- package/dist/responsive-item/ResponsiveItemContainer.js.map +1 -1
- package/dist/responsive-item/ResponsiveItemOverlay.d.ts +0 -2
- package/dist/responsive-item/ResponsiveItemOverlay.js +0 -2
- package/dist/responsive-item/ResponsiveItemOverlay.js.map +1 -1
- package/dist/responsive-item/styles.js.map +1 -1
- package/dist/scroll/ScrollLock.js.map +1 -1
- package/dist/scroll/getScrollbarWidth.js.map +1 -1
- package/dist/scroll/useScrollLock.js.map +1 -1
- package/dist/searching/caseInsensitive.js.map +1 -1
- package/dist/searching/fuzzy.js.map +1 -1
- package/dist/searching/toSearchQuery.js.map +1 -1
- package/dist/searching/types.js.map +1 -1
- package/dist/searching/useFuzzyMatch.js.map +1 -1
- package/dist/searching/utils.js.map +1 -1
- package/dist/segmented-button/SegmentedButton.js.map +1 -1
- package/dist/segmented-button/SegmentedButtonContainer.d.ts +0 -2
- package/dist/segmented-button/SegmentedButtonContainer.js +0 -2
- package/dist/segmented-button/SegmentedButtonContainer.js.map +1 -1
- package/dist/segmented-button/segmentedButtonContainerStyles.js.map +1 -1
- package/dist/segmented-button/segmentedButtonStyles.js.map +1 -1
- package/dist/sheet/Sheet.d.ts +30 -16
- package/dist/sheet/Sheet.js +24 -14
- package/dist/sheet/Sheet.js.map +1 -1
- package/dist/sheet/styles.d.ts +29 -0
- package/dist/sheet/styles.js +13 -0
- package/dist/sheet/styles.js.map +1 -1
- package/dist/snackbar/DefaultToastRenderer.js.map +1 -1
- package/dist/snackbar/Snackbar.js.map +1 -1
- package/dist/snackbar/Toast.js.map +1 -1
- package/dist/snackbar/ToastActionButton.d.ts +0 -1
- package/dist/snackbar/ToastActionButton.js.map +1 -1
- package/dist/snackbar/ToastCloseButton.d.ts +0 -1
- package/dist/snackbar/ToastCloseButton.js.map +1 -1
- package/dist/snackbar/ToastContent.js.map +1 -1
- package/dist/snackbar/ToastManager.js.map +1 -1
- package/dist/snackbar/ToastManagerProvider.js.map +1 -1
- package/dist/snackbar/snackbarStyles.js.map +1 -1
- package/dist/snackbar/toastContentStyles.js.map +1 -1
- package/dist/snackbar/toastStyles.js.map +1 -1
- package/dist/snackbar/useCurrentToastActions.d.ts +0 -1
- package/dist/snackbar/useCurrentToastActions.js.map +1 -1
- package/dist/suspense/CircularProgressSuspense.d.ts +0 -2
- package/dist/suspense/CircularProgressSuspense.js +0 -2
- package/dist/suspense/CircularProgressSuspense.js.map +1 -1
- package/dist/suspense/NullSuspense.d.ts +0 -2
- package/dist/suspense/NullSuspense.js +0 -2
- package/dist/suspense/NullSuspense.js.map +1 -1
- package/dist/table/StickyTableSection.d.ts +23 -0
- package/dist/table/StickyTableSection.js +56 -0
- package/dist/table/StickyTableSection.js.map +1 -0
- package/dist/table/Table.d.ts +1 -1
- package/dist/table/Table.js.map +1 -1
- package/dist/table/TableBody.d.ts +1 -1
- package/dist/table/TableBody.js.map +1 -1
- package/dist/table/TableCell.d.ts +3 -2
- package/dist/table/TableCell.js.map +1 -1
- package/dist/table/TableCellContent.d.ts +1 -5
- package/dist/table/TableCellContent.js +0 -3
- package/dist/table/TableCellContent.js.map +1 -1
- package/dist/table/TableCheckbox.js.map +1 -1
- package/dist/table/TableConfigurationProvider.d.ts +1 -74
- package/dist/table/TableConfigurationProvider.js.map +1 -1
- package/dist/table/TableContainer.js.map +1 -1
- package/dist/table/TableContainerProvider.js.map +1 -1
- package/dist/table/TableFooter.d.ts +8 -17
- package/dist/table/TableFooter.js +17 -80
- package/dist/table/TableFooter.js.map +1 -1
- package/dist/table/TableHeader.d.ts +8 -17
- package/dist/table/TableHeader.js +20 -87
- package/dist/table/TableHeader.js.map +1 -1
- package/dist/table/TableRadio.js.map +1 -1
- package/dist/table/TableRow.d.ts +1 -1
- package/dist/table/TableRow.js.map +1 -1
- package/dist/table/tableCellStyles.d.ts +1 -1
- package/dist/table/tableCellStyles.js.map +1 -1
- package/dist/table/tableContainerStyles.js.map +1 -1
- package/dist/table/tableFooterStyles.js.map +1 -1
- package/dist/table/tableHeaderStyles.js.map +1 -1
- package/dist/table/tableRowStyles.js.map +1 -1
- package/dist/table/tableStyles.js.map +1 -1
- package/dist/table/types.d.ts +89 -9
- package/dist/table/types.js.map +1 -1
- package/dist/table/useStickyTableSection.d.ts +27 -0
- package/dist/table/useStickyTableSection.js +84 -0
- package/dist/table/useStickyTableSection.js.map +1 -0
- package/dist/table/useTableSectionConfig.d.ts +13 -0
- package/dist/table/useTableSectionConfig.js +33 -0
- package/dist/table/useTableSectionConfig.js.map +1 -0
- package/dist/tabs/Tab.d.ts +3 -0
- package/dist/tabs/Tab.js.map +1 -1
- package/dist/tabs/TabList.js.map +1 -1
- package/dist/tabs/TabListScrollButton.js +5 -1
- package/dist/tabs/TabListScrollButton.js.map +1 -1
- package/dist/tabs/_tabs.scss +21 -3
- package/dist/tabs/tabIndicatorStyles.js.map +1 -1
- package/dist/tabs/tabListScrollButtonStyles.d.ts +2 -0
- package/dist/tabs/tabListScrollButtonStyles.js +9 -5
- package/dist/tabs/tabListScrollButtonStyles.js.map +1 -1
- package/dist/tabs/tabListStyles.js.map +1 -1
- package/dist/tabs/tabStyles.js.map +1 -1
- package/dist/tabs/useTabList.d.ts +2 -0
- package/dist/tabs/useTabList.js +4 -2
- package/dist/tabs/useTabList.js.map +1 -1
- package/dist/tabs/useTabs.d.ts +33 -11
- package/dist/tabs/useTabs.js +9 -3
- package/dist/tabs/useTabs.js.map +1 -1
- package/dist/tabs/utils.js.map +1 -1
- package/dist/test-utils/IntersectionObserver.js.map +1 -1
- package/dist/test-utils/ResizeObserver.js.map +1 -1
- package/dist/test-utils/data-testid.d.ts +0 -1
- package/dist/test-utils/data-testid.js.map +1 -1
- package/dist/test-utils/index.js.map +1 -1
- package/dist/test-utils/jest-setup.js.map +1 -1
- package/dist/test-utils/matchMedia.js.map +1 -1
- package/dist/test-utils/polyfills/IntersectionObserver.js.map +1 -1
- package/dist/test-utils/polyfills/ResizeObserver.js.map +1 -1
- package/dist/test-utils/polyfills/TextDecoder.js.map +1 -1
- package/dist/test-utils/polyfills/TextEncoder.js.map +1 -1
- package/dist/test-utils/polyfills/index.js.map +1 -1
- package/dist/test-utils/polyfills/matchMedia.js.map +1 -1
- package/dist/test-utils/polyfills/offsetParent.js.map +1 -1
- package/dist/test-utils/polyfills/scrollIntoView.js.map +1 -1
- package/dist/test-utils/render.js.map +1 -1
- package/dist/test-utils/timers.js.map +1 -1
- package/dist/theme/LocalStorageColorSchemeProvider.js.map +1 -1
- package/dist/theme/ThemeProvider.js.map +1 -1
- package/dist/theme/_theme.scss +2 -1
- package/dist/theme/colors.js.map +1 -1
- package/dist/theme/cssVars.js.map +1 -1
- package/dist/theme/types.js.map +1 -1
- package/dist/theme/useCSSVariables.js.map +1 -1
- package/dist/theme/useColorScheme.d.ts +0 -1
- package/dist/theme/useColorScheme.js.map +1 -1
- package/dist/theme/useColorSchemeMetaTag.js.map +1 -1
- package/dist/theme/useColorSchemeProvider.js.map +1 -1
- package/dist/theme/usePrefersColorScheme.js.map +1 -1
- package/dist/theme/utils.js.map +1 -1
- package/dist/tooltip/Tooltip.d.ts +20 -9
- package/dist/tooltip/Tooltip.js.map +1 -1
- package/dist/tooltip/TooltipHoverModeProvider.js.map +1 -1
- package/dist/tooltip/constants.js.map +1 -1
- package/dist/tooltip/tooltipStyles.js.map +1 -1
- package/dist/tooltip/useTooltip.d.ts +30 -16
- package/dist/tooltip/useTooltip.js.map +1 -1
- package/dist/tooltip/useTooltipPosition.d.ts +2 -4
- package/dist/tooltip/useTooltipPosition.js.map +1 -1
- package/dist/tooltip/utils.js.map +1 -1
- package/dist/transition/CSSTransition.js.map +1 -1
- package/dist/transition/Collapse.js.map +1 -1
- package/dist/transition/CrossFade.js.map +1 -1
- package/dist/transition/ScaleTransition.js.map +1 -1
- package/dist/transition/SkeletonPlaceholder.js.map +1 -1
- package/dist/transition/Slide.js.map +1 -1
- package/dist/transition/SlideContainer.d.ts +2 -48
- package/dist/transition/SlideContainer.js +2 -48
- package/dist/transition/SlideContainer.js.map +1 -1
- package/dist/transition/collapseStyles.js.map +1 -1
- package/dist/transition/config.js.map +1 -1
- package/dist/transition/maxWidthTransition.js.map +1 -1
- package/dist/transition/skeletonPlaceholderUtils.js.map +1 -1
- package/dist/transition/types.d.ts +19 -24
- package/dist/transition/types.js.map +1 -1
- package/dist/transition/useCSSTransition.js.map +1 -1
- package/dist/transition/useCarousel.js.map +1 -1
- package/dist/transition/useCollapseTransition.js.map +1 -1
- package/dist/transition/useCrossFadeTransition.js.map +1 -1
- package/dist/transition/useMaxWidthTransition.js.map +1 -1
- package/dist/transition/useScaleTransition.js.map +1 -1
- package/dist/transition/useSkeletonPlaceholder.js.map +1 -1
- package/dist/transition/useSlideTransition.js.map +1 -1
- package/dist/transition/useTransition.d.ts +1 -0
- package/dist/transition/useTransition.js +1 -0
- package/dist/transition/useTransition.js.map +1 -1
- package/dist/transition/utils.js.map +1 -1
- package/dist/tree/DefaultTreeItemRenderer.d.ts +2 -3
- package/dist/tree/DefaultTreeItemRenderer.js +1 -1
- package/dist/tree/DefaultTreeItemRenderer.js.map +1 -1
- package/dist/tree/Tree.d.ts +3 -4
- package/dist/tree/Tree.js.map +1 -1
- package/dist/tree/TreeGroup.js.map +1 -1
- package/dist/tree/TreeItem.d.ts +10 -3
- package/dist/tree/TreeItem.js +5 -2
- package/dist/tree/TreeItem.js.map +1 -1
- package/dist/tree/TreeItemExpander.js.map +1 -1
- package/dist/tree/TreeProvider.js.map +1 -1
- package/dist/tree/styles.js.map +1 -1
- package/dist/tree/types.d.ts +11 -6
- package/dist/tree/types.js +1 -26
- package/dist/tree/types.js.map +1 -1
- package/dist/tree/useTree.d.ts +5 -5
- package/dist/tree/useTree.js.map +1 -1
- package/dist/tree/useTreeExpansion.d.ts +3 -3
- package/dist/tree/useTreeExpansion.js.map +1 -1
- package/dist/tree/useTreeItems.js.map +1 -1
- package/dist/tree/useTreeMovement.js.map +1 -1
- package/dist/tree/useTreeSelection.d.ts +3 -3
- package/dist/tree/useTreeSelection.js.map +1 -1
- package/dist/tree/utils.js.map +1 -1
- package/dist/types.js.map +1 -1
- package/dist/typography/SrOnly.d.ts +2 -1
- package/dist/typography/SrOnly.js +2 -1
- package/dist/typography/SrOnly.js.map +1 -1
- package/dist/typography/TextContainer.d.ts +4 -2
- package/dist/typography/TextContainer.js +2 -2
- package/dist/typography/TextContainer.js.map +1 -1
- package/dist/typography/Typography.d.ts +10 -2
- package/dist/typography/Typography.js +3 -2
- package/dist/typography/Typography.js.map +1 -1
- package/dist/typography/WritingDirectionProvider.d.ts +2 -2
- package/dist/typography/WritingDirectionProvider.js +2 -2
- package/dist/typography/WritingDirectionProvider.js.map +1 -1
- package/dist/typography/textContainerStyles.js.map +1 -1
- package/dist/typography/typographyStyles.js.map +1 -1
- package/dist/useAsyncFunction.js.map +1 -1
- package/dist/useDebouncedFunction.js.map +1 -1
- package/dist/useDropzone.js.map +1 -1
- package/dist/useElementSize.js.map +1 -1
- package/dist/useEnsuredId.js.map +1 -1
- package/dist/useEnsuredRef.js.map +1 -1
- package/dist/useEnsuredState.js.map +1 -1
- package/dist/useHtmlClassName.js.map +1 -1
- package/dist/useIntersectionObserver.js.map +1 -1
- package/dist/useIsomorphicLayoutEffect.js.map +1 -1
- package/dist/useLocalStorage.js.map +1 -1
- package/dist/useMutationObserver.js.map +1 -1
- package/dist/useOrientation.js.map +1 -1
- package/dist/usePageInactive.js.map +1 -1
- package/dist/useResizeListener.d.ts +7 -1
- package/dist/useResizeListener.js.map +1 -1
- package/dist/useResizeObserver.d.ts +3 -3
- package/dist/useResizeObserver.js.map +1 -1
- package/dist/useThrottledFunction.js.map +1 -1
- package/dist/useToggle.d.ts +4 -4
- package/dist/useToggle.js +1 -1
- package/dist/useToggle.js.map +1 -1
- package/dist/useUnmounted.js.map +1 -1
- package/dist/useWindowSize.js.map +1 -1
- package/dist/utils/RenderRecursively.js.map +1 -1
- package/dist/utils/alphaNumericSort.js.map +1 -1
- package/dist/utils/applyRef.js.map +1 -1
- package/dist/utils/bem.js.map +1 -1
- package/dist/utils/getClientPosition.js.map +1 -1
- package/dist/utils/getMiddleOfRange.js.map +1 -1
- package/dist/utils/getPercentage.js.map +1 -1
- package/dist/utils/getRangeDefaultValue.js.map +1 -1
- package/dist/utils/getRangeSteps.js.map +1 -1
- package/dist/utils/identity.js.map +1 -1
- package/dist/utils/isElementVisible.js.map +1 -1
- package/dist/utils/loop.js.map +1 -1
- package/dist/utils/nearest.js.map +1 -1
- package/dist/utils/parseCssLengthUnit.js.map +1 -1
- package/dist/utils/randomInt.js.map +1 -1
- package/dist/utils/wait.js.map +1 -1
- package/dist/utils/withinRange.js.map +1 -1
- package/dist/window-splitter/WindowSplitter.d.ts +2 -2
- package/dist/window-splitter/WindowSplitter.js +2 -2
- package/dist/window-splitter/WindowSplitter.js.map +1 -1
- package/dist/window-splitter/useWindowSplitter.js.map +1 -1
- package/package.json +25 -24
- package/src/RootHtml.tsx +0 -2
- package/src/app-bar/AppBar.tsx +0 -2
- package/src/app-bar/AppBarTitle.tsx +8 -6
- package/src/autocomplete/defaults.ts +3 -3
- package/src/avatar/Avatar.tsx +1 -4
- package/src/badge/Badge.tsx +1 -3
- package/src/box/Box.tsx +0 -2
- package/src/button/ButtonUnstyled.tsx +0 -2
- package/src/card/Card.tsx +2 -3
- package/src/card/CardContent.tsx +0 -2
- package/src/card/CardFooter.tsx +0 -2
- package/src/card/CardHeader.tsx +0 -2
- package/src/card/CardSubtitle.tsx +9 -2
- package/src/card/CardTitle.tsx +0 -2
- package/src/card/styles.ts +2 -6
- package/src/chip/Chip.tsx +0 -2
- package/src/cssUtils.ts +1 -1
- package/src/dialog/DialogContainer.tsx +0 -2
- package/src/dialog/DialogContent.tsx +3 -3
- package/src/dialog/DialogFooter.tsx +2 -3
- package/src/dialog/DialogHeader.tsx +3 -3
- package/src/dialog/DialogTitle.tsx +3 -3
- package/src/divider/Divider.tsx +0 -2
- package/src/expansion-panel/ExpansionList.tsx +1 -1
- package/src/expansion-panel/ExpansionPanel.tsx +9 -38
- package/src/expansion-panel/ExpansionPanelHeader.tsx +0 -1
- package/src/expansion-panel/expansionPanelStyles.ts +33 -0
- package/src/form/Fieldset.tsx +0 -2
- package/src/form/FormMessage.tsx +0 -2
- package/src/form/FormMessageContainer.tsx +0 -1
- package/src/form/FormMessageCounter.tsx +0 -2
- package/src/form/InputToggle.tsx +1 -1
- package/src/form/InputToggleIcon.tsx +0 -2
- package/src/form/Label.tsx +0 -2
- package/src/form/Legend.tsx +0 -2
- package/src/form/NativeSelect.tsx +0 -2
- package/src/form/Option.tsx +1 -1
- package/src/form/SelectedOption.tsx +0 -2
- package/src/form/SliderContainer.tsx +0 -2
- package/src/form/SliderMark.tsx +0 -2
- package/src/form/SliderMarkLabel.tsx +0 -2
- package/src/form/SliderTrack.tsx +0 -2
- package/src/form/SliderValueMarks.tsx +0 -2
- package/src/form/Switch.tsx +0 -2
- package/src/form/SwitchTrack.tsx +2 -1
- package/src/form/TextField.tsx +0 -2
- package/src/form/TextFieldAddon.tsx +1 -3
- package/src/icon/FontIcon.tsx +19 -11
- package/src/icon/IconRotator.tsx +0 -2
- package/src/icon/MaterialIcon.tsx +22 -5
- package/src/icon/MaterialSymbol.tsx +0 -1
- package/src/icon/SVGIcon.tsx +3 -2
- package/src/icon/TextIconSpacing.tsx +0 -2
- package/src/icon/iconConfig.tsx +1 -0
- package/src/icon/material.ts +276 -19
- package/src/icon/styles.ts +1 -1
- package/src/interaction/RippleContainer.tsx +0 -2
- package/src/layout/LayoutNav.tsx +3 -2
- package/src/layout/useHorizontalLayoutTransition.ts +1 -1
- package/src/layout/useLayoutTree.ts +2 -2
- package/src/link/Link.tsx +2 -6
- package/src/link/SkipToMainContent.tsx +11 -4
- package/src/link/styles.ts +2 -2
- package/src/list/List.tsx +1 -33
- package/src/list/ListItem.tsx +0 -17
- package/src/list/ListItemAddon.tsx +0 -2
- package/src/list/ListItemChildren.tsx +0 -2
- package/src/list/ListItemText.tsx +0 -2
- package/src/list/ListSubheader.tsx +3 -2
- package/src/list/getListItemHeight.ts +2 -2
- package/src/list/listItemStyles.ts +21 -4
- package/src/list/listStyles.ts +31 -0
- package/src/list/types.ts +9 -3
- package/src/media-queries/AppSizeProvider.tsx +8 -0
- package/src/media-queries/useMediaQuery.ts +1 -1
- package/src/menu/MenuConfigurationProvider.tsx +2 -2
- package/src/navigation/NavGroup.tsx +0 -2
- package/src/navigation/NavItem.tsx +0 -2
- package/src/navigation/NavSubheader.tsx +0 -2
- package/src/overlay/Overlay.tsx +1 -0
- package/src/portal/Portal.tsx +5 -0
- package/src/portal/PortalContainerProvider.tsx +16 -7
- package/src/progress/CircularProgress.tsx +5 -6
- package/src/progress/LinearProgress.tsx +0 -2
- package/src/responsive-item/ResponsiveItemContainer.tsx +0 -2
- package/src/responsive-item/ResponsiveItemOverlay.tsx +0 -2
- package/src/segmented-button/SegmentedButtonContainer.tsx +0 -2
- package/src/sheet/Sheet.tsx +36 -33
- package/src/sheet/styles.ts +50 -0
- package/src/suspense/CircularProgressSuspense.tsx +0 -2
- package/src/suspense/NullSuspense.tsx +0 -2
- package/src/table/StickyTableSection.tsx +91 -0
- package/src/table/Table.tsx +2 -5
- package/src/table/TableBody.tsx +1 -2
- package/src/table/TableCell.tsx +3 -5
- package/src/table/TableCellContent.tsx +1 -6
- package/src/table/TableConfigurationProvider.tsx +1 -86
- package/src/table/TableFooter.tsx +19 -116
- package/src/table/TableHeader.tsx +20 -118
- package/src/table/TableRow.tsx +2 -4
- package/src/table/tableCellStyles.ts +1 -1
- package/src/table/types.ts +105 -10
- package/src/table/useStickyTableSection.tsx +126 -0
- package/src/table/useTableSectionConfig.ts +45 -0
- package/src/tabs/Tab.tsx +3 -0
- package/src/tabs/TabListScrollButton.tsx +9 -2
- package/src/tabs/tabListScrollButtonStyles.ts +9 -5
- package/src/tabs/useTabList.ts +4 -0
- package/src/tabs/useTabs.ts +61 -14
- package/src/test-utils/IntersectionObserver.ts +1 -1
- package/src/tooltip/Tooltip.tsx +24 -8
- package/src/tooltip/useTooltip.ts +52 -27
- package/src/tooltip/useTooltipPosition.ts +2 -4
- package/src/transition/SlideContainer.tsx +2 -48
- package/src/transition/types.ts +23 -27
- package/src/transition/useTransition.ts +1 -0
- package/src/tree/DefaultTreeItemRenderer.tsx +3 -4
- package/src/tree/Tree.tsx +4 -6
- package/src/tree/TreeItem.tsx +11 -4
- package/src/tree/types.ts +16 -6
- package/src/tree/useTree.ts +5 -7
- package/src/tree/useTreeExpansion.ts +3 -3
- package/src/tree/useTreeSelection.ts +3 -3
- package/src/typography/SrOnly.tsx +2 -1
- package/src/typography/TextContainer.tsx +4 -2
- package/src/typography/Typography.tsx +10 -2
- package/src/typography/WritingDirectionProvider.tsx +2 -2
- package/src/useResizeListener.ts +8 -2
- package/src/useResizeObserver.ts +3 -3
- package/src/useToggle.ts +4 -4
- package/src/window-splitter/WindowSplitter.tsx +2 -2
- package/.eslintrc.cjs +0 -26
- package/.stylelintrc.json +0 -14
- package/.swcrc +0 -17
- package/.turbo/turbo-build.log +0 -22
- package/.turbo/turbo-lint.log +0 -12
- package/.turbo/turbo-test.log +0 -5498
- package/.turbo/turbo-typecheck.log +0 -26
- package/CHANGELOG.md +0 -310
- package/coverage/clover.xml +0 -775
- package/coverage/coverage-final.json +0 -5
- package/coverage/lcov-report/autocomplete/Autocomplete.tsx.html +0 -967
- package/coverage/lcov-report/autocomplete/index.html +0 -116
- package/coverage/lcov-report/base.css +0 -224
- package/coverage/lcov-report/block-navigation.js +0 -87
- package/coverage/lcov-report/button/Button.tsx.html +0 -676
- package/coverage/lcov-report/button/index.html +0 -116
- package/coverage/lcov-report/createHorizontalPosition.ts.html +0 -1075
- package/coverage/lcov-report/createVerticalPosition.ts.html +0 -997
- package/coverage/lcov-report/favicon.png +0 -0
- package/coverage/lcov-report/index.html +0 -161
- package/coverage/lcov-report/prettify.css +0 -1
- package/coverage/lcov-report/prettify.js +0 -2
- package/coverage/lcov-report/searching/fuzzy.ts.html +0 -607
- package/coverage/lcov-report/searching/index.html +0 -116
- package/coverage/lcov-report/sort-arrow-sprite.png +0 -0
- package/coverage/lcov-report/sorter.js +0 -196
- package/coverage/lcov-report/typography/SrOnly.tsx.html +0 -325
- package/coverage/lcov-report/typography/index.html +0 -116
- package/coverage/lcov-report/utils.ts.html +0 -1225
- package/coverage/lcov.info +0 -836
- package/jest.config.ts +0 -68
- package/jest.setup.ts +0 -3
- package/scripts/copySassFiles.ts +0 -70
- package/scripts/tsconfig.json +0 -18
- package/src/__tests__/NoSsr.node.tsx +0 -26
- package/src/__tests__/NoSsr.tsx +0 -89
- package/src/__tests__/RootHtml.node.tsx +0 -46
- package/src/__tests__/__snapshots__/RootHtml.node.tsx.snap +0 -19
- package/src/__tests__/useAsyncFunction.tsx +0 -124
- package/src/__tests__/useDebouncedFunction.tsx +0 -108
- package/src/__tests__/useDropzone.tsx +0 -131
- package/src/__tests__/useElementSize.tsx +0 -181
- package/src/__tests__/useEnsuredId.tsx +0 -25
- package/src/__tests__/useEnsuredState.tsx +0 -74
- package/src/__tests__/useHtmlClassName.tsx +0 -54
- package/src/__tests__/useLocalStorage.tsx +0 -377
- package/src/__tests__/useOrientation.node.tsx +0 -20
- package/src/__tests__/useOrientation.tsx +0 -63
- package/src/__tests__/useResizeObserver.tsx +0 -258
- package/src/__tests__/useThrottledFunction.tsx +0 -226
- package/src/__tests__/useToggle.tsx +0 -78
- package/src/__tests__/useWindowSize.node.tsx +0 -56
- package/src/__tests__/useWindowSize.tsx +0 -155
- package/src/_box-shadows.scss +0 -219
- package/src/_core.scss +0 -432
- package/src/_utils.scss +0 -348
- package/src/app-bar/__tests__/AppBar.tsx +0 -121
- package/src/app-bar/__tests__/AppBarTitle.tsx +0 -39
- package/src/app-bar/__tests__/__snapshots__/AppBar.tsx.snap +0 -186
- package/src/app-bar/__tests__/__snapshots__/AppBarTitle.tsx.snap +0 -47
- package/src/app-bar/_app-bar.scss +0 -248
- package/src/autocomplete/__tests__/Autocomplete.tsx +0 -458
- package/src/autocomplete/__tests__/__snapshots__/Autocomplete.tsx.snap +0 -144
- package/src/autocomplete/_autocomplete.scss +0 -75
- package/src/avatar/__tests__/Avatar.tsx +0 -75
- package/src/avatar/__tests__/__snapshots__/Avatar.tsx.snap +0 -73
- package/src/avatar/_avatar.scss +0 -157
- package/src/badge/__tests__/Badge.tsx +0 -42
- package/src/badge/__tests__/__snapshots__/Badge.tsx.snap +0 -54
- package/src/badge/_badge.scss +0 -145
- package/src/box/__tests__/Box.tsx +0 -158
- package/src/box/__tests__/__snapshots__/Box.tsx.snap +0 -544
- package/src/box/_box.scss +0 -168
- package/src/button/__tests__/AsyncButton.tsx +0 -211
- package/src/button/__tests__/Button.tsx +0 -198
- package/src/button/__tests__/ButtonUnstyled.tsx +0 -37
- package/src/button/__tests__/TooltippedButton.tsx +0 -60
- package/src/button/__tests__/__snapshots__/AsyncButton.tsx.snap +0 -418
- package/src/button/__tests__/__snapshots__/Button.tsx.snap +0 -573
- package/src/button/__tests__/__snapshots__/ButtonUnstyled.tsx.snap +0 -22
- package/src/button/__tests__/__snapshots__/TooltippedButton.tsx.snap +0 -26
- package/src/button/__tests__/__snapshots__/buttonStyles.ts.snap +0 -11
- package/src/button/__tests__/buttonStyles.ts +0 -15
- package/src/button/_button.scss +0 -330
- package/src/card/__tests__/Card.tsx +0 -37
- package/src/card/__tests__/CardContent.tsx +0 -40
- package/src/card/__tests__/CardFooter.tsx +0 -34
- package/src/card/__tests__/CardHeader.tsx +0 -66
- package/src/card/__tests__/CardSubtitle.tsx +0 -30
- package/src/card/__tests__/CardTitle.tsx +0 -30
- package/src/card/__tests__/ClickableCard.tsx +0 -66
- package/src/card/__tests__/__snapshots__/Card.tsx.snap +0 -40
- package/src/card/__tests__/__snapshots__/CardContent.tsx.snap +0 -50
- package/src/card/__tests__/__snapshots__/CardFooter.tsx.snap +0 -30
- package/src/card/__tests__/__snapshots__/CardHeader.tsx.snap +0 -74
- package/src/card/__tests__/__snapshots__/CardSubtitle.tsx.snap +0 -18
- package/src/card/__tests__/__snapshots__/CardTitle.tsx.snap +0 -18
- package/src/card/__tests__/__snapshots__/ClickableCard.tsx.snap +0 -20
- package/src/card/__tests__/__snapshots__/styles.ts.snap +0 -13
- package/src/card/__tests__/styles.ts +0 -45
- package/src/card/_card.scss +0 -189
- package/src/chip/__tests__/Chip.tsx +0 -327
- package/src/chip/__tests__/__snapshots__/Chip.tsx.snap +0 -597
- package/src/chip/__tests__/__snapshots__/styles.ts.snap +0 -5
- package/src/chip/__tests__/styles.ts +0 -14
- package/src/chip/_chip.scss +0 -324
- package/src/dialog/__tests__/Dialog.tsx +0 -316
- package/src/dialog/__tests__/DialogContent.tsx +0 -53
- package/src/dialog/__tests__/DialogFooter.tsx +0 -70
- package/src/dialog/__tests__/DialogHeader.tsx +0 -37
- package/src/dialog/__tests__/DialogTitle.tsx +0 -41
- package/src/dialog/__tests__/__snapshots__/Dialog.tsx.snap +0 -84
- package/src/dialog/__tests__/__snapshots__/DialogContent.tsx.snap +0 -36
- package/src/dialog/__tests__/__snapshots__/DialogFooter.tsx.snap +0 -186
- package/src/dialog/__tests__/__snapshots__/DialogHeader.tsx.snap +0 -18
- package/src/dialog/__tests__/__snapshots__/DialogTitle.tsx.snap +0 -26
- package/src/dialog/_dialog.scss +0 -273
- package/src/divider/__tests__/Divider.tsx +0 -36
- package/src/divider/__tests__/__snapshots__/Divider.tsx.snap +0 -26
- package/src/divider/_divider.scss +0 -124
- package/src/draggable/__tests__/__snapshots__/useDraggable.tsx.snap +0 -49
- package/src/draggable/__tests__/useDraggable.tsx +0 -540
- package/src/draggable/_draggable.scss +0 -29
- package/src/expansion-panel/__tests__/ExpansionPanel.tsx +0 -290
- package/src/expansion-panel/__tests__/__snapshots__/ExpansionPanel.tsx.snap +0 -197
- package/src/expansion-panel/_expansion-panel.scss +0 -107
- package/src/focus/__tests__/useFocusContainer.tsx +0 -280
- package/src/form/__tests__/Checkbox.tsx +0 -42
- package/src/form/__tests__/Fieldset.tsx +0 -44
- package/src/form/__tests__/FileInput.tsx +0 -120
- package/src/form/__tests__/Label.tsx +0 -69
- package/src/form/__tests__/Legend.tsx +0 -34
- package/src/form/__tests__/MenuItemCheckbox.tsx +0 -53
- package/src/form/__tests__/MenuItemRadio.tsx +0 -53
- package/src/form/__tests__/Radio.tsx +0 -35
- package/src/form/__tests__/Select.tsx +0 -439
- package/src/form/__tests__/Switch.tsx +0 -152
- package/src/form/__tests__/TextArea.tsx +0 -433
- package/src/form/__tests__/TextField.tsx +0 -195
- package/src/form/__tests__/__snapshots__/Checkbox.tsx.snap +0 -99
- package/src/form/__tests__/__snapshots__/Fieldset.tsx.snap +0 -58
- package/src/form/__tests__/__snapshots__/FileInput.tsx.snap +0 -612
- package/src/form/__tests__/__snapshots__/Label.tsx.snap +0 -140
- package/src/form/__tests__/__snapshots__/Legend.tsx.snap +0 -30
- package/src/form/__tests__/__snapshots__/MenuItemCheckbox.tsx.snap +0 -96
- package/src/form/__tests__/__snapshots__/MenuItemRadio.tsx.snap +0 -96
- package/src/form/__tests__/__snapshots__/Radio.tsx.snap +0 -99
- package/src/form/__tests__/__snapshots__/Select.tsx.snap +0 -492
- package/src/form/__tests__/__snapshots__/Switch.tsx.snap +0 -428
- package/src/form/__tests__/__snapshots__/TextArea.tsx.snap +0 -548
- package/src/form/__tests__/__snapshots__/TextField.tsx.snap +0 -279
- package/src/form/__tests__/__snapshots__/useCheckboxGroup.tsx.snap +0 -481
- package/src/form/__tests__/__snapshots__/useRadioGroup.tsx.snap +0 -704
- package/src/form/__tests__/useCheckboxGroup.tsx +0 -292
- package/src/form/__tests__/useFileUpload.tsx +0 -289
- package/src/form/__tests__/useFormReset.tsx +0 -194
- package/src/form/__tests__/useRadioGroup.tsx +0 -227
- package/src/form/__tests__/utils.ts +0 -247
- package/src/form/_form.scss +0 -2190
- package/src/icon/__tests__/FontIcon.tsx +0 -45
- package/src/icon/__tests__/IconRotator.tsx +0 -120
- package/src/icon/__tests__/MaterialIcon.tsx +0 -79
- package/src/icon/__tests__/MaterialSymbol.tsx +0 -100
- package/src/icon/__tests__/SVGIcon.tsx +0 -40
- package/src/icon/__tests__/TextIconSpacing.tsx +0 -108
- package/src/icon/__tests__/__snapshots__/FontIcon.tsx.snap +0 -35
- package/src/icon/__tests__/__snapshots__/IconRotator.tsx.snap +0 -165
- package/src/icon/__tests__/__snapshots__/MaterialIcon.tsx.snap +0 -82
- package/src/icon/__tests__/__snapshots__/MaterialSymbol.tsx.snap +0 -42
- package/src/icon/__tests__/__snapshots__/SVGIcon.tsx.snap +0 -47
- package/src/icon/__tests__/__snapshots__/TextIconSpacing.tsx.snap +0 -101
- package/src/icon/__tests__/__snapshots__/styles.ts.snap +0 -29
- package/src/icon/__tests__/styles.ts +0 -28
- package/src/icon/_icon.scss +0 -213
- package/src/interaction/__tests__/UserInteractionModeProvider.tsx +0 -121
- package/src/interaction/__tests__/__snapshots__/useHigherContrastChildren.tsx.snap +0 -79
- package/src/interaction/__tests__/useHigherContrastChildren.tsx +0 -97
- package/src/interaction/_interaction.scss +0 -436
- package/src/layout/__tests__/LayoutAppBar.tsx +0 -117
- package/src/layout/__tests__/LayoutNav.tsx +0 -78
- package/src/layout/__tests__/LayoutWindowSplitter.tsx +0 -63
- package/src/layout/__tests__/Main.tsx +0 -51
- package/src/layout/__tests__/__snapshots__/LayoutAppBar.tsx.snap +0 -78
- package/src/layout/__tests__/__snapshots__/LayoutNav.tsx.snap +0 -31
- package/src/layout/__tests__/__snapshots__/LayoutWindowSplitter.tsx.snap +0 -60
- package/src/layout/__tests__/__snapshots__/Main.tsx.snap +0 -32
- package/src/layout/__tests__/__snapshots__/useExpandableLayout.tsx.snap +0 -116
- package/src/layout/__tests__/__snapshots__/useLayoutTree.tsx.snap +0 -676
- package/src/layout/__tests__/__snapshots__/useResizableLayout.tsx.snap +0 -95
- package/src/layout/__tests__/__snapshots__/useTemporaryLayout.tsx.snap +0 -141
- package/src/layout/__tests__/useExpandableLayout.tsx +0 -279
- package/src/layout/__tests__/useLayoutTree.tsx +0 -212
- package/src/layout/__tests__/useResizableLayout.tsx +0 -170
- package/src/layout/__tests__/useTemporaryLayout.tsx +0 -109
- package/src/layout/_layout.scss +0 -163
- package/src/link/__tests__/Link.tsx +0 -31
- package/src/link/__tests__/SkipToMainContent.tsx +0 -125
- package/src/link/__tests__/__snapshots__/Link.tsx.snap +0 -20
- package/src/link/__tests__/__snapshots__/SkipToMainContent.tsx.snap +0 -22
- package/src/link/_link.scss +0 -149
- package/src/list/__tests__/List.tsx +0 -58
- package/src/list/__tests__/ListItem.tsx +0 -280
- package/src/list/__tests__/ListItemLink.tsx +0 -89
- package/src/list/__tests__/ListSubheader.tsx +0 -81
- package/src/list/__tests__/__snapshots__/List.tsx.snap +0 -41
- package/src/list/__tests__/__snapshots__/ListItem.tsx.snap +0 -414
- package/src/list/__tests__/__snapshots__/ListItemLink.tsx.snap +0 -73
- package/src/list/__tests__/__snapshots__/ListSubheader.tsx.snap +0 -99
- package/src/list/__tests__/getListItemHeight.ts +0 -176
- package/src/list/_list.scss +0 -322
- package/src/media-queries/__tests__/AppSizeProvider.node.tsx +0 -37
- package/src/media-queries/__tests__/AppSizeProvider.tsx +0 -119
- package/src/media-queries/__tests__/useMediaQuery.node.tsx +0 -20
- package/src/media-queries/__tests__/useMediaQuery.tsx +0 -59
- package/src/media-queries/_media-queries.scss +0 -63
- package/src/menu/__tests__/DropdownMenu.tsx +0 -627
- package/src/menu/__tests__/MenuBar.tsx +0 -354
- package/src/menu/__tests__/MenuItemCircularProgress.tsx +0 -39
- package/src/menu/__tests__/MenuVisibilityProvider.tsx +0 -34
- package/src/menu/__tests__/__snapshots__/DropdownMenu.tsx.snap +0 -292
- package/src/menu/__tests__/__snapshots__/MenuBar.tsx.snap +0 -87
- package/src/menu/__tests__/__snapshots__/MenuItemCircularProgress.tsx.snap +0 -68
- package/src/menu/__tests__/__snapshots__/useContextMenu.tsx.snap +0 -54
- package/src/menu/__tests__/useContextMenu.tsx +0 -41
- package/src/menu/__tests__/utils.ts +0 -121
- package/src/menu/_menu.scss +0 -116
- package/src/movement/__tests__/findMatchIndex.ts +0 -244
- package/src/movement/__tests__/utils.ts +0 -710
- package/src/navigation/__tests__/Navigation.tsx +0 -97
- package/src/navigation/__tests__/__snapshots__/Navigation.tsx.snap +0 -165
- package/src/navigation/_navigation.scss +0 -99
- package/src/overlay/__tests__/Overlay.tsx +0 -198
- package/src/overlay/__tests__/__snapshots__/Overlay.tsx.snap +0 -77
- package/src/overlay/_overlay.scss +0 -74
- package/src/portal/__tests__/PortalContainerProvider.node.tsx +0 -26
- package/src/portal/__tests__/PortalContainerProvider.tsx +0 -84
- package/src/positioning/__tests__/__snapshots__/useFixedPositioning.tsx.snap +0 -87
- package/src/positioning/__tests__/createHorizontalPosition.ts +0 -777
- package/src/positioning/__tests__/createVerticalPosition.ts +0 -464
- package/src/positioning/__tests__/useFixedPositioning.tsx +0 -205
- package/src/positioning/__tests__/utils.ts +0 -1311
- package/src/progress/__tests__/CircularProgress.tsx +0 -153
- package/src/progress/__tests__/LinearProgress.tsx +0 -131
- package/src/progress/__tests__/__snapshots__/CircularProgress.tsx.snap +0 -499
- package/src/progress/__tests__/__snapshots__/LinearProgress.tsx.snap +0 -321
- package/src/progress/__tests__/getProgressA11y.ts +0 -16
- package/src/progress/_progress.scss +0 -577
- package/src/responsive-item/__tests__/ResponsiveItemContainer.tsx +0 -56
- package/src/responsive-item/__tests__/ResponsiveItemOverlay.tsx +0 -66
- package/src/responsive-item/__tests__/__snapshots__/ResponsiveItemContainer.tsx.snap +0 -85
- package/src/responsive-item/__tests__/__snapshots__/ResponsiveItemOverlay.tsx.snap +0 -151
- package/src/responsive-item/__tests__/__snapshots__/styles.ts.snap +0 -9
- package/src/responsive-item/__tests__/styles.ts +0 -32
- package/src/responsive-item/_responsive-item.scss +0 -199
- package/src/searching/__tests__/caseInsensitive.ts +0 -165
- package/src/searching/__tests__/fuzzy.ts +0 -169
- package/src/searching/__tests__/toSearchQuery.ts +0 -21
- package/src/searching/__tests__/useFuzzyMatch.tsx +0 -200
- package/src/segmented-button/__tests__/SegmentedButton.tsx +0 -61
- package/src/segmented-button/__tests__/SegmentedButtonContainer.tsx +0 -38
- package/src/segmented-button/__tests__/__snapshots__/SegmentedButton.tsx.snap +0 -116
- package/src/segmented-button/__tests__/__snapshots__/SegmentedButtonContainer.tsx.snap +0 -22
- package/src/segmented-button/_segmented-button.scss +0 -208
- package/src/sheet/_sheet.scss +0 -189
- package/src/snackbar/__tests__/Snackbar.tsx +0 -85
- package/src/snackbar/__tests__/Toast.tsx +0 -105
- package/src/snackbar/__tests__/ToastActionButton.tsx +0 -112
- package/src/snackbar/__tests__/ToastCloseButton.tsx +0 -140
- package/src/snackbar/__tests__/ToastContent.tsx +0 -88
- package/src/snackbar/__tests__/ToastManagerProvider.tsx +0 -852
- package/src/snackbar/__tests__/__snapshots__/Snackbar.tsx.snap +0 -176
- package/src/snackbar/__tests__/__snapshots__/Toast.tsx.snap +0 -52
- package/src/snackbar/__tests__/__snapshots__/ToastActionButton.tsx.snap +0 -36
- package/src/snackbar/__tests__/__snapshots__/ToastCloseButton.tsx.snap +0 -104
- package/src/snackbar/__tests__/__snapshots__/ToastContent.tsx.snap +0 -26
- package/src/snackbar/__tests__/__snapshots__/ToastManagerProvider.tsx.snap +0 -290
- package/src/snackbar/_snackbar.scss +0 -266
- package/src/suspense/__tests__/CircularProgressSuspense.tsx +0 -90
- package/src/suspense/__tests__/NullSuspense.tsx +0 -46
- package/src/suspense/__tests__/__snapshots__/CircularProgressSuspense.tsx.snap +0 -24
- package/src/table/__tests__/Table.tsx +0 -314
- package/src/table/__tests__/TableBody.tsx +0 -52
- package/src/table/__tests__/TableCheckbox.tsx +0 -89
- package/src/table/__tests__/TableContainer.tsx +0 -31
- package/src/table/__tests__/TableRadio.tsx +0 -112
- package/src/table/__tests__/TableRow.tsx +0 -63
- package/src/table/__tests__/__snapshots__/Table.tsx.snap +0 -2426
- package/src/table/__tests__/__snapshots__/TableBody.tsx.snap +0 -54
- package/src/table/__tests__/__snapshots__/TableCheckbox.tsx.snap +0 -142
- package/src/table/__tests__/__snapshots__/TableContainer.tsx.snap +0 -16
- package/src/table/__tests__/__snapshots__/TableRadio.tsx.snap +0 -138
- package/src/table/__tests__/__snapshots__/TableRow.tsx.snap +0 -56
- package/src/table/__tests__/__snapshots__/tableContainerStyles.ts.snap +0 -3
- package/src/table/__tests__/__snapshots__/tableRowStyles.ts.snap +0 -3
- package/src/table/__tests__/__snapshots__/tableStyles.ts.snap +0 -3
- package/src/table/__tests__/tableContainerStyles.ts +0 -8
- package/src/table/__tests__/tableRowStyles.ts +0 -8
- package/src/table/__tests__/tableStyles.ts +0 -8
- package/src/table/_table.scss +0 -447
- package/src/tabs/__tests__/Tab.tsx +0 -51
- package/src/tabs/__tests__/TabList.tsx +0 -640
- package/src/tabs/__tests__/__snapshots__/Tab.tsx.snap +0 -85
- package/src/tabs/__tests__/__snapshots__/TabList.tsx.snap +0 -51
- package/src/tabs/__tests__/useTabs.tsx +0 -212
- package/src/tabs/_tabs.scss +0 -273
- package/src/test-utils/__tests__/ResizeObserver.ts +0 -171
- package/src/theme/__tests__/LocalStorageColorSchemeProvider.tsx +0 -162
- package/src/theme/__tests__/ThemeProvider.tsx +0 -90
- package/src/theme/__tests__/__snapshots__/useCSSVariables.tsx.snap +0 -27
- package/src/theme/__tests__/__snapshots__/useColorSchemeMetaTag.tsx.snap +0 -15
- package/src/theme/__tests__/useCSSVariables.tsx +0 -177
- package/src/theme/__tests__/useColorSchemeMetaTag.tsx +0 -36
- package/src/theme/__tests__/utils.ts +0 -67
- package/src/theme/_a11y.scss +0 -114
- package/src/theme/_colors.scss +0 -1057
- package/src/theme/_theme.scss +0 -519
- package/src/tooltip/__tests__/Tooltip.tsx +0 -501
- package/src/tooltip/__tests__/TooltipHoverModeProvider.tsx +0 -94
- package/src/tooltip/__tests__/__snapshots__/Tooltip.tsx.snap +0 -34
- package/src/tooltip/__tests__/utils.ts +0 -94
- package/src/tooltip/_tooltip.scss +0 -155
- package/src/transition/__tests__/CSSTransition.tsx +0 -182
- package/src/transition/__tests__/Collapse.tsx +0 -209
- package/src/transition/__tests__/CrossFade.tsx +0 -227
- package/src/transition/__tests__/ScaleTransition.tsx +0 -204
- package/src/transition/__tests__/SkeletonPlaceholder.tsx +0 -72
- package/src/transition/__tests__/__snapshots__/CSSTransition.tsx.snap +0 -145
- package/src/transition/__tests__/__snapshots__/Collapse.tsx.snap +0 -224
- package/src/transition/__tests__/__snapshots__/CrossFade.tsx.snap +0 -240
- package/src/transition/__tests__/__snapshots__/ScaleTransition.tsx.snap +0 -239
- package/src/transition/__tests__/__snapshots__/SkeletonPlaceholder.tsx.snap +0 -24
- package/src/transition/__tests__/__snapshots__/useCollapseTransition.tsx.snap +0 -361
- package/src/transition/__tests__/__snapshots__/useCrossFadeTransition.tsx.snap +0 -258
- package/src/transition/__tests__/__snapshots__/useMaxWidthTransition.tsx.snap +0 -68
- package/src/transition/__tests__/__snapshots__/useScaleTransition.tsx.snap +0 -209
- package/src/transition/__tests__/useCSSTransition.tsx +0 -190
- package/src/transition/__tests__/useCollapseTransition.tsx +0 -316
- package/src/transition/__tests__/useCrossFadeTransition.tsx +0 -229
- package/src/transition/__tests__/useMaxWidthTransition.tsx +0 -123
- package/src/transition/__tests__/useScaleTransition.tsx +0 -212
- package/src/transition/__tests__/useTransition.tsx +0 -569
- package/src/transition/__tests__/utils.ts +0 -620
- package/src/transition/_transition.scss +0 -365
- package/src/tree/__tests__/Tree.tsx +0 -735
- package/src/tree/__tests__/TreeGroup.tsx +0 -76
- package/src/tree/__tests__/TreeItemExpander.tsx +0 -74
- package/src/tree/__tests__/__snapshots__/Tree.tsx.snap +0 -3618
- package/src/tree/__tests__/__snapshots__/TreeItemExpander.tsx.snap +0 -11
- package/src/tree/__tests__/utils.ts +0 -98
- package/src/tree/_tree.scss +0 -176
- package/src/typography/__tests__/SrOnly.tsx +0 -43
- package/src/typography/__tests__/TextContainer.tsx +0 -45
- package/src/typography/__tests__/Typography.tsx +0 -87
- package/src/typography/__tests__/WritingDirectionProvider.node.tsx +0 -27
- package/src/typography/__tests__/WritingDirectionProvider.tsx +0 -119
- package/src/typography/__tests__/__snapshots__/SrOnly.tsx.snap +0 -56
- package/src/typography/__tests__/__snapshots__/TextContainer.tsx.snap +0 -29
- package/src/typography/__tests__/__snapshots__/Typography.tsx.snap +0 -112
- package/src/typography/_typography.scss +0 -399
- package/src/utils/__tests__/RenderRecursively.tsx +0 -87
- package/src/utils/__tests__/__snapshots__/RenderRecursively.tsx.snap +0 -80
- package/src/utils/__tests__/applyRef.ts +0 -30
- package/src/utils/__tests__/bem.ts +0 -54
- package/src/utils/__tests__/getMiddleOfRange.ts +0 -12
- package/src/utils/__tests__/getPercentage.ts +0 -104
- package/src/utils/__tests__/getRangeDefaultValue.ts +0 -47
- package/src/utils/__tests__/getRangeSteps.ts +0 -14
- package/src/utils/__tests__/loop.ts +0 -50
- package/src/utils/__tests__/nearest.ts +0 -83
- package/src/utils/__tests__/parseCssLengthUnit.node.ts +0 -28
- package/src/utils/__tests__/parseCssLengthUnit.ts +0 -47
- package/src/utils/__tests__/wait.ts +0 -12
- package/src/utils/__tests__/withinRange.ts +0 -24
- package/src/window-splitter/_window-splitter.scss +0 -143
- package/tsconfig.json +0 -19
- package/tsconfig.types.json +0 -12
- package/tsdoc.json +0 -14
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/form/textFieldStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-text-field\");\n\n/** @since 6.0.0 */\nexport interface TextFieldClassNameOptions {\n className?: string;\n\n /**\n * Set this value to `true` when a text field has a floating label the text\n * field is not focused or valued so that the placeholder is hidden by setting\n * the opacity to 0. This makes it so the placeholder and label to not cover\n * each other.\n *\n * @defaultValue `false`\n */\n placeholderHidden?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function textField(options: TextFieldClassNameOptions = {}): string {\n const { className, placeholderHidden = false } = options;\n\n return cnb(\n styles({\n \"placeholder-hidden\": placeholderHidden,\n }),\n className\n );\n}\n"],"names":["cnb","bem","styles","textField","options","className","placeholderHidden"],"
|
|
1
|
+
{"version":3,"sources":["../../src/form/textFieldStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-text-field\");\n\n/** @since 6.0.0 */\nexport interface TextFieldClassNameOptions {\n className?: string;\n\n /**\n * Set this value to `true` when a text field has a floating label the text\n * field is not focused or valued so that the placeholder is hidden by setting\n * the opacity to 0. This makes it so the placeholder and label to not cover\n * each other.\n *\n * @defaultValue `false`\n */\n placeholderHidden?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function textField(options: TextFieldClassNameOptions = {}): string {\n const { className, placeholderHidden = false } = options;\n\n return cnb(\n styles({\n \"placeholder-hidden\": placeholderHidden,\n }),\n className\n );\n}\n"],"names":["cnb","bem","styles","textField","options","className","placeholderHidden"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAiBnB;;CAEC,GACD,OAAO,SAASE,UAAUC,UAAqC,CAAC,CAAC;IAC/D,MAAM,EAAEC,SAAS,EAAEC,oBAAoB,KAAK,EAAE,GAAGF;IAEjD,OAAOJ,IACLE,OAAO;QACL,sBAAsBI;IACxB,IACAD;AAEJ"}
|
package/dist/form/types.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/form/types.ts"],"sourcesContent":["import {\n type CSSProperties,\n type HTMLAttributes,\n type InputHTMLAttributes,\n type LabelHTMLAttributes,\n type ReactNode,\n} from \"react\";\nimport { type PropsWithRef } from \"../types.js\";\n\ndeclare module \"react\" {\n interface CSSProperties {\n \"--rmd-form-active-color\"?: string;\n \"--rmd-form-focus-color\"?: string;\n }\n}\n\n/**\n * The supported themes for the `TextField`, `TextArea`, and `Select`\n * components.\n *\n * - \"none\" - display as an unstyled text field without any border or background\n * colors.\n * - \"underline\" - display with only an underline that gains the form active\n * color and animates from the left or right to the other side when the field\n * is focused.\n * - \"filled\" - an extension of the `\"underline\"` state that will also have a\n * slightly dark background applied.\n * - \"outline\" - outlines the entire text field in a border and applies the\n * active color as box shadow when the field is focused.\n */\nexport type FormTheme = \"none\" | \"underline\" | \"filled\" | \"outline\";\n\n/**\n * The direction that the underline should appear from when the theme is\n * `\"underline\"` or `\"filled\"`.\n */\nexport type FormUnderlineDirection = \"left\" | \"center\" | \"right\";\n\nexport interface FormThemeOptions {\n /**\n * The current theme type.\n *\n * @defaultValue `\"outline\"`\n */\n theme?: FormTheme;\n\n /**\n * The current underline direction.\n *\n * @defaultValue `\"left\"`\n */\n underlineDirection?: FormUnderlineDirection;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface FormConfiguration extends Required<FormThemeOptions> {\n /**\n * Set this to `false` if the `$disable-uncontrolled-input-toggles` variable\n * is set to `true` in the Sass configuration.\n *\n * Since the `checked` state only changes for the radio that has been clicked,\n * the previously checked radio would also be shown as checked with no way of\n * fixing it without controlling the radio component. When this flag is\n * enabled, the checked icons and state are handled through css instead of\n * `useState`.\n *\n * @defaultValue `true`\n */\n uncontrolledToggles: boolean;\n}\n\nexport interface FormComponentStates {\n /** @defaultValue `false` */\n error?: boolean;\n\n /** @defaultValue `false` */\n active?: boolean;\n\n /** @defaultValue `false` */\n disabled?: boolean;\n\n /** @defaultValue `false` */\n readOnly?: boolean;\n}\n\n/**\n * @since 6.0.0\n * @see https://html.spec.whatwg.org/multipage/forms.html#autofill\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values\n */\nexport type AutocompleteValue =\n | \"off\"\n | \"on\"\n | \"name\"\n | \"honorific-prefix\"\n | \"given-name\"\n | \"additional-name\"\n | \"family-name\"\n | \"honorific-suffix\"\n | \"nickname\"\n | \"email\"\n | \"username\"\n | \"new-password\"\n | \"current-password\"\n | \"one-time-code\"\n | \"organization-title\"\n | \"organization\"\n | \"street-address\"\n | \"address-line1\"\n | \"address-line2\"\n | \"address-line3\"\n | \"address-level1\"\n | \"address-level2\"\n | \"address-level3\"\n | \"address-level4\"\n | \"country\"\n | \"country-name\"\n | \"postal-code\"\n | \"cc-name\"\n | \"cc-given-name\"\n | \"cc-additional-name\"\n | \"cc-family-name\"\n | \"cc-number\"\n | \"cc-exp\"\n | \"cc-exp-month\"\n | \"cc-exp-year\"\n | \"cc-csc\"\n | \"cc-type\"\n | \"transaction-currency\"\n | \"transaction-amount\"\n | \"language\"\n | \"bday\"\n | \"bday-day\"\n | \"bday-month\"\n | \"bday-year\"\n | \"sex\"\n | \"tel\"\n | \"tel-country-code\"\n | \"tel-national\"\n | \"tek-area-code\"\n | \"tel-local\"\n | \"tel-extension\"\n | \"impp\"\n | \"url\"\n | \"photo\";\n\n/**\n * @since 6.0.0\n */\nexport interface UserAgentAutocompleteProps {\n /**\n * Set this to enable additional autocompletion suggestions for a user for\n * different form fields. Using this prop will update the\n * {@link UserAgentAutocompleteProps.name} and {@link autoComplete} to default to\n * this value.\n *\n * @example\n * ```tsx\n * <Form>\n * <TextField\n * label=\"Enter your credit card number\"\n * autoCompleteValue=\"cc-number\"\n * {...creditCardProps}\n * inputMode=\"number\"\n * />\n * <TextField\n * label=\"Name on card\"\n * autoCompleteValue=\"cc-name\"\n * {...creditCardNameProps}\n * />\n * <TextField\n * label=\"Security code\"\n * autoCompleteValue=\"cc-csc\"\n * {...securityCodeProps}\n * inputMode=\"number\"\n * />\n * <Button type=\"submit\">Submit</Button>\n * </Form>\n * ```\n *\n * @see https://html.spec.whatwg.org/multipage/forms.html#autofill\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values\n * @see {@link AutocompleteValue}\n * @see {@link autoComplete}\n * @see {@link UserAgentAutocompleteProps.name}\n */\n autoCompleteValue?: AutocompleteValue;\n\n /**\n * @see {@link autoCompleteValue}\n * @defaultValue `autoCompleteValue`\n */\n autoComplete?: InputHTMLAttributes<HTMLInputElement>[\"autoComplete\"];\n\n /**\n * @see {@link autoCompleteValue}\n * @defaultValue `autoCompleteValue`\n */\n name?: string;\n}\n\nexport interface FormMessageClassNameOptions {\n className?: string;\n\n /**\n * Boolean if the message should gain the error state which changes the text\n * color to `red` by default.\n *\n * @defaultValue `false`\n */\n error?: boolean;\n\n /**\n * The current theme for the related text field. This is really only used to\n * match the current horizontal padding of the text field.\n *\n * @defaultValue `\"outline\"`\n */\n theme?: FormTheme;\n}\n\nexport interface FormMessageProps\n extends Omit<HTMLAttributes<HTMLDivElement>, \"minLength\" | \"maxLength\">,\n FormMessageClassNameOptions {\n /**\n * If this component is acting as a form-level error message handler, the role\n * should be updated to be `\"alert\"` for additional accessibility.\n *\n * Note: when creating a form-level error message handler, the messages should\n * no longer appear as the user types and instead once the user tries to\n * submit the form. Having an alert role disrupts normal screen reader\n * behavior by immediately reading changes in this element.\n *\n * @defaultValue `undefined`\n */\n role?: \"alert\";\n\n /**\n * Boolean if the children should no longer be wrapped in a `<p>` tag. This\n * should normally only be disabled if using a custom error message wrapper or\n * the counter behavior is not being used. To get correct alignments of the\n * message and counter, the `children` must be wrapped in some element and\n * cannot be plain test.\n *\n * Note: this will always be considered `true` if the `role` is set to\n * `\"alert\"`.\n *\n * @defaultValue `false`\n */\n disableWrap?: boolean;\n\n /**\n * An optional style to apply to the `<p>` tag that surrounds the `children`.\n * This will not be used if `role=\"alert\"` or `disableWrap={true}`.\n */\n messageStyle?: CSSProperties;\n\n /**\n * An optional className to apply to the `<p>` tag that surrounds the\n * `children`. This will not be used if `role=\"alert\"` or\n * `disableWrap={true}`.\n */\n messageClassName?: string;\n}\n\n/**\n * Props that are used to automatically add a counter for the remaining letters\n * available for the text field. The counter will always be created to the right\n * of the optional message.\n *\n * The counter is really a simple string of: `${length} / ${maxLength}`.\n *\n * If you need additional customization, it is recommended to create your own\n * implementation such as:\n *\n * ```tsx\n * <FormMessage>\n * {errorMessage}\n * <MyCounter {...props} />\n * </FormMessage>\n * ```\n *\n * Note: this should not be used alongside form-level messages.\n *\n * @since 2.9.0 Renamed from `FormMessageCounterProps` to\n * `FormMessageInputLengthCounterProps` since a `FormMessageCounter` component\n * was added\n */\nexport interface FormMessageInputLengthCounterProps {\n /**\n * The current length of the value in the related text field.\n */\n length: number;\n\n /**\n * The max length allowed for the value in the related text field.\n */\n maxLength: number;\n\n /**\n * An optional style to apply to the counter wrapper element.\n */\n counterStyle?: CSSProperties;\n\n /**\n * An optional className to apply to the counter wrapper element.\n */\n counterClassName?: string;\n}\n\nexport interface FormMessageWithCounterProps\n extends FormMessageProps,\n FormMessageInputLengthCounterProps {}\n\n/**\n * @since 6.0.0\n */\nexport interface FormMessageWithoutCounterProps extends FormMessageProps {\n length?: never;\n maxLength?: never;\n counterStyle?: never;\n counterClassName?: never;\n}\n\nexport interface FormMessageContainerExtension {\n /**\n * If the extension doesn't actually want to render the `FormMessage`\n * component, these props are optional. It kind of eliminates the whole\n * purpose of this component though.\n */\n messageProps?: PropsWithRef<\n FormMessageProps & Partial<FormMessageInputLengthCounterProps>,\n HTMLDivElement\n >;\n\n /**\n * Any props (and an optional ref) to provide to the `<div>` surrounding the\n * children and `FormMessage` component.\n *\n * Note: This will not be used if the `messageProps` are not provided since\n * only the `children` will be returned without the container.\n */\n messageContainerProps?: PropsWithRef<\n HTMLAttributes<HTMLDivElement>,\n HTMLDivElement\n >;\n}\n\n/** @since 6.0.0 */\nexport interface LabelClassNameOptions {\n className?: string;\n\n /**\n * Set this to `true` to remove the `gap` style from the label.\n *\n * @see `$label-gap`\n * @defaultValue `false`\n */\n gap?: boolean;\n\n /**\n * Set this to `true` when the parent `TextFieldContainer` has the `dense`\n * spec enabled. This updates the floating styles to match the smaller height.\n *\n * @defaultValue `false`\n */\n dense?: boolean;\n\n /**\n * Set this to `true` to update the label's color to the error color.\n *\n * @see `$error-color`\n * @defaultValue `false`\n */\n error?: boolean;\n\n /**\n * Set this to `true` to update the label's color to the active color.\n *\n * @see `$active-color`\n * @defaultValue `false`\n */\n active?: boolean;\n\n /**\n * Set this to `true` if the label should gain `flex-direction: column`\n * styling.\n *\n * @defaultValue `false`\n */\n stacked?: boolean;\n\n /**\n * Set this to `true` to update the label's color to be the disabled color.\n *\n * @see `$disabled-color`\n * @defaultValue `false`\n */\n disabled?: boolean;\n\n /**\n * Set this to true when label can floating above an input, textarea, or\n * select inside of a `TextFieldContainer`.\n *\n * @defaultValue `false`\n */\n floating?: boolean;\n\n /**\n * Set this to true when label is currently floating above an input,\n * textarea, or selected inside of a `TextFieldContainer`.\n *\n * @see {@link active}\n * @defaultValue `active`\n */\n floatingActive?: boolean;\n\n /**\n * Set this to `true` to gain `flex-direction: row-reversed` styling. If the\n * {@link stacked} prop is also `true`, `flex-direction: column-reversed` will\n * be applied.\n *\n * @defaultValue `false`\n */\n reversed?: boolean;\n\n /**\n * @defaultValue `false`\n */\n inactive?: boolean;\n}\n\nexport interface LabelProps\n extends LabelHTMLAttributes<HTMLLabelElement>,\n LabelClassNameOptions {}\n\n/**\n * @since 6.0.0\n */\nexport interface ConfigurableTextFieldAddonProps\n extends HTMLAttributes<HTMLSpanElement> {\n /**\n * Boolean if the addon should be presentational only and prevent pointer\n * events.\n *\n * @defaultValue `false`\n */\n pointerEvents?: boolean;\n}\n\n/**\n * @since 6.0.0 Added support for `leftAddonProps` and\n * `rightAddonProps`.\n */\nexport interface TextFieldContainerOptions\n extends FormThemeOptions,\n FormComponentStates {\n /**\n * Set this to `true` to enable the dense spec which reduces the height.\n *\n * @defaultValue `false`\n */\n dense?: boolean;\n\n /**\n * Set this to `true` to change the style from `display: flex` to\n * `display: inline-flex`.\n *\n * @defaultValue `false`\n */\n inline?: boolean;\n\n /**\n * Set this to `true` if this component should stretch to fill a flex or grid\n * container using `flex: 1 1 auto`.\n *\n * @defaultValue `false`\n */\n stretch?: boolean;\n\n /**\n * This should generally be an icon or a button that will be placed before the\n * `TextField` or `TextArea`.\n */\n leftAddon?: ReactNode;\n\n /**\n * Any additional props to pass to the `<span>` surrounding the {@link leftAddon}.\n *\n * @since 6.0.0\n */\n leftAddonProps?: PropsWithRef<\n ConfigurableTextFieldAddonProps,\n HTMLSpanElement\n >;\n\n /**\n * @see {@link TextFieldAddonProps.disabled}\n *\n * @defaultValue `false`\n */\n disableLeftAddonStyles?: boolean;\n\n /**\n * This should generally be an icon or a button that will be placed after the\n * `TextField` or `TextArea`.\n */\n rightAddon?: ReactNode;\n\n /**\n * Any additional props to pass to the `<span>` surrounding the {@link rightAddon}.\n *\n * @since 6.0.0\n */\n rightAddonProps?: PropsWithRef<\n ConfigurableTextFieldAddonProps,\n HTMLSpanElement\n >;\n\n /**\n * @see {@link TextFieldAddonProps.disabled}\n *\n * @defaultValue `false`\n */\n disableRightAddonStyles?: boolean;\n}\n\nexport interface FormFieldOptions\n extends TextFieldContainerOptions,\n FormMessageContainerExtension {\n /**\n * An optional floating label to use with the text field. A label is generally\n * recommended for accessibility, but can be omitted if an `aria-label` or\n * `aria-labelledby` is provided.\n */\n label?: ReactNode;\n\n /**\n * Any additional props and/or ref that should be passed to the `<label>`\n * element when a {@link label} is provided.\n *\n * @example\n * ```tsx\n * labelProps={{\n * ref: labelRef,\n * style: {},\n * className: \"some-custom-class-name\",\n * onClick: (event) => {\n * // do something\n * }\n * }}\n * ```\n */\n labelProps?: PropsWithRef<LabelProps, HTMLLabelElement>;\n\n /**\n * A convenience prop to apply a custom style to a label. This is equivalent\n * to:\n *\n * ```ts\n * labelProps={{\n * style: // some style here\n * }}\n * ```\n */\n labelStyle?: CSSProperties;\n\n /**\n * A convenience prop to apply a custom className to a label. This is\n * equivalent to:\n *\n * ```ts\n * labelProps={{\n * className: \"some-class-name\",\n * }}\n * ```\n */\n labelClassName?: string;\n}\n"],"names":[],"rangeMappings":"","mappings":"AAihBA,WAmDC"}
|
|
1
|
+
{"version":3,"sources":["../../src/form/types.ts"],"sourcesContent":["import {\n type CSSProperties,\n type HTMLAttributes,\n type InputHTMLAttributes,\n type LabelHTMLAttributes,\n type ReactNode,\n} from \"react\";\nimport { type PropsWithRef } from \"../types.js\";\n\ndeclare module \"react\" {\n interface CSSProperties {\n \"--rmd-form-active-color\"?: string;\n \"--rmd-form-focus-color\"?: string;\n }\n}\n\n/**\n * The supported themes for the `TextField`, `TextArea`, and `Select`\n * components.\n *\n * - \"none\" - display as an unstyled text field without any border or background\n * colors.\n * - \"underline\" - display with only an underline that gains the form active\n * color and animates from the left or right to the other side when the field\n * is focused.\n * - \"filled\" - an extension of the `\"underline\"` state that will also have a\n * slightly dark background applied.\n * - \"outline\" - outlines the entire text field in a border and applies the\n * active color as box shadow when the field is focused.\n */\nexport type FormTheme = \"none\" | \"underline\" | \"filled\" | \"outline\";\n\n/**\n * The direction that the underline should appear from when the theme is\n * `\"underline\"` or `\"filled\"`.\n */\nexport type FormUnderlineDirection = \"left\" | \"center\" | \"right\";\n\nexport interface FormThemeOptions {\n /**\n * The current theme type.\n *\n * @defaultValue `\"outline\"`\n */\n theme?: FormTheme;\n\n /**\n * The current underline direction.\n *\n * @defaultValue `\"left\"`\n */\n underlineDirection?: FormUnderlineDirection;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface FormConfiguration extends Required<FormThemeOptions> {\n /**\n * Set this to `false` if the `$disable-uncontrolled-input-toggles` variable\n * is set to `true` in the Sass configuration.\n *\n * Since the `checked` state only changes for the radio that has been clicked,\n * the previously checked radio would also be shown as checked with no way of\n * fixing it without controlling the radio component. When this flag is\n * enabled, the checked icons and state are handled through css instead of\n * `useState`.\n *\n * @defaultValue `true`\n */\n uncontrolledToggles: boolean;\n}\n\nexport interface FormComponentStates {\n /** @defaultValue `false` */\n error?: boolean;\n\n /** @defaultValue `false` */\n active?: boolean;\n\n /** @defaultValue `false` */\n disabled?: boolean;\n\n /** @defaultValue `false` */\n readOnly?: boolean;\n}\n\n/**\n * @since 6.0.0\n * @see https://html.spec.whatwg.org/multipage/forms.html#autofill\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values\n */\nexport type AutocompleteValue =\n | \"off\"\n | \"on\"\n | \"name\"\n | \"honorific-prefix\"\n | \"given-name\"\n | \"additional-name\"\n | \"family-name\"\n | \"honorific-suffix\"\n | \"nickname\"\n | \"email\"\n | \"username\"\n | \"new-password\"\n | \"current-password\"\n | \"one-time-code\"\n | \"organization-title\"\n | \"organization\"\n | \"street-address\"\n | \"address-line1\"\n | \"address-line2\"\n | \"address-line3\"\n | \"address-level1\"\n | \"address-level2\"\n | \"address-level3\"\n | \"address-level4\"\n | \"country\"\n | \"country-name\"\n | \"postal-code\"\n | \"cc-name\"\n | \"cc-given-name\"\n | \"cc-additional-name\"\n | \"cc-family-name\"\n | \"cc-number\"\n | \"cc-exp\"\n | \"cc-exp-month\"\n | \"cc-exp-year\"\n | \"cc-csc\"\n | \"cc-type\"\n | \"transaction-currency\"\n | \"transaction-amount\"\n | \"language\"\n | \"bday\"\n | \"bday-day\"\n | \"bday-month\"\n | \"bday-year\"\n | \"sex\"\n | \"tel\"\n | \"tel-country-code\"\n | \"tel-national\"\n | \"tek-area-code\"\n | \"tel-local\"\n | \"tel-extension\"\n | \"impp\"\n | \"url\"\n | \"photo\";\n\n/**\n * @since 6.0.0\n */\nexport interface UserAgentAutocompleteProps {\n /**\n * Set this to enable additional autocompletion suggestions for a user for\n * different form fields. Using this prop will update the\n * {@link UserAgentAutocompleteProps.name} and {@link autoComplete} to default to\n * this value.\n *\n * @example\n * ```tsx\n * <Form>\n * <TextField\n * label=\"Enter your credit card number\"\n * autoCompleteValue=\"cc-number\"\n * {...creditCardProps}\n * inputMode=\"number\"\n * />\n * <TextField\n * label=\"Name on card\"\n * autoCompleteValue=\"cc-name\"\n * {...creditCardNameProps}\n * />\n * <TextField\n * label=\"Security code\"\n * autoCompleteValue=\"cc-csc\"\n * {...securityCodeProps}\n * inputMode=\"number\"\n * />\n * <Button type=\"submit\">Submit</Button>\n * </Form>\n * ```\n *\n * @see https://html.spec.whatwg.org/multipage/forms.html#autofill\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values\n * @see {@link AutocompleteValue}\n * @see {@link autoComplete}\n * @see {@link UserAgentAutocompleteProps.name}\n */\n autoCompleteValue?: AutocompleteValue;\n\n /**\n * @see {@link autoCompleteValue}\n * @defaultValue `autoCompleteValue`\n */\n autoComplete?: InputHTMLAttributes<HTMLInputElement>[\"autoComplete\"];\n\n /**\n * @see {@link autoCompleteValue}\n * @defaultValue `autoCompleteValue`\n */\n name?: string;\n}\n\nexport interface FormMessageClassNameOptions {\n className?: string;\n\n /**\n * Boolean if the message should gain the error state which changes the text\n * color to `red` by default.\n *\n * @defaultValue `false`\n */\n error?: boolean;\n\n /**\n * The current theme for the related text field. This is really only used to\n * match the current horizontal padding of the text field.\n *\n * @defaultValue `\"outline\"`\n */\n theme?: FormTheme;\n}\n\nexport interface FormMessageProps\n extends Omit<HTMLAttributes<HTMLDivElement>, \"minLength\" | \"maxLength\">,\n FormMessageClassNameOptions {\n /**\n * If this component is acting as a form-level error message handler, the role\n * should be updated to be `\"alert\"` for additional accessibility.\n *\n * Note: when creating a form-level error message handler, the messages should\n * no longer appear as the user types and instead once the user tries to\n * submit the form. Having an alert role disrupts normal screen reader\n * behavior by immediately reading changes in this element.\n *\n * @defaultValue `undefined`\n */\n role?: \"alert\";\n\n /**\n * Boolean if the children should no longer be wrapped in a `<p>` tag. This\n * should normally only be disabled if using a custom error message wrapper or\n * the counter behavior is not being used. To get correct alignments of the\n * message and counter, the `children` must be wrapped in some element and\n * cannot be plain test.\n *\n * Note: this will always be considered `true` if the `role` is set to\n * `\"alert\"`.\n *\n * @defaultValue `false`\n */\n disableWrap?: boolean;\n\n /**\n * An optional style to apply to the `<p>` tag that surrounds the `children`.\n * This will not be used if `role=\"alert\"` or `disableWrap={true}`.\n */\n messageStyle?: CSSProperties;\n\n /**\n * An optional className to apply to the `<p>` tag that surrounds the\n * `children`. This will not be used if `role=\"alert\"` or\n * `disableWrap={true}`.\n */\n messageClassName?: string;\n}\n\n/**\n * Props that are used to automatically add a counter for the remaining letters\n * available for the text field. The counter will always be created to the right\n * of the optional message.\n *\n * The counter is really a simple string of: `${length} / ${maxLength}`.\n *\n * If you need additional customization, it is recommended to create your own\n * implementation such as:\n *\n * ```tsx\n * <FormMessage>\n * {errorMessage}\n * <MyCounter {...props} />\n * </FormMessage>\n * ```\n *\n * Note: this should not be used alongside form-level messages.\n *\n * @since 2.9.0 Renamed from `FormMessageCounterProps` to\n * `FormMessageInputLengthCounterProps` since a `FormMessageCounter` component\n * was added\n */\nexport interface FormMessageInputLengthCounterProps {\n /**\n * The current length of the value in the related text field.\n */\n length: number;\n\n /**\n * The max length allowed for the value in the related text field.\n */\n maxLength: number;\n\n /**\n * An optional style to apply to the counter wrapper element.\n */\n counterStyle?: CSSProperties;\n\n /**\n * An optional className to apply to the counter wrapper element.\n */\n counterClassName?: string;\n}\n\nexport interface FormMessageWithCounterProps\n extends FormMessageProps,\n FormMessageInputLengthCounterProps {}\n\n/**\n * @since 6.0.0\n */\nexport interface FormMessageWithoutCounterProps extends FormMessageProps {\n length?: never;\n maxLength?: never;\n counterStyle?: never;\n counterClassName?: never;\n}\n\nexport interface FormMessageContainerExtension {\n /**\n * If the extension doesn't actually want to render the `FormMessage`\n * component, these props are optional. It kind of eliminates the whole\n * purpose of this component though.\n */\n messageProps?: PropsWithRef<\n FormMessageProps & Partial<FormMessageInputLengthCounterProps>,\n HTMLDivElement\n >;\n\n /**\n * Any props (and an optional ref) to provide to the `<div>` surrounding the\n * children and `FormMessage` component.\n *\n * Note: This will not be used if the `messageProps` are not provided since\n * only the `children` will be returned without the container.\n */\n messageContainerProps?: PropsWithRef<\n HTMLAttributes<HTMLDivElement>,\n HTMLDivElement\n >;\n}\n\n/** @since 6.0.0 */\nexport interface LabelClassNameOptions {\n className?: string;\n\n /**\n * Set this to `true` to remove the `gap` style from the label.\n *\n * @see `$label-gap`\n * @defaultValue `false`\n */\n gap?: boolean;\n\n /**\n * Set this to `true` when the parent `TextFieldContainer` has the `dense`\n * spec enabled. This updates the floating styles to match the smaller height.\n *\n * @defaultValue `false`\n */\n dense?: boolean;\n\n /**\n * Set this to `true` to update the label's color to the error color.\n *\n * @see `$error-color`\n * @defaultValue `false`\n */\n error?: boolean;\n\n /**\n * Set this to `true` to update the label's color to the active color.\n *\n * @see `$active-color`\n * @defaultValue `false`\n */\n active?: boolean;\n\n /**\n * Set this to `true` if the label should gain `flex-direction: column`\n * styling.\n *\n * @defaultValue `false`\n */\n stacked?: boolean;\n\n /**\n * Set this to `true` to update the label's color to be the disabled color.\n *\n * @see `$disabled-color`\n * @defaultValue `false`\n */\n disabled?: boolean;\n\n /**\n * Set this to true when label can floating above an input, textarea, or\n * select inside of a `TextFieldContainer`.\n *\n * @defaultValue `false`\n */\n floating?: boolean;\n\n /**\n * Set this to true when label is currently floating above an input,\n * textarea, or selected inside of a `TextFieldContainer`.\n *\n * @see {@link active}\n * @defaultValue `active`\n */\n floatingActive?: boolean;\n\n /**\n * Set this to `true` to gain `flex-direction: row-reversed` styling. If the\n * {@link stacked} prop is also `true`, `flex-direction: column-reversed` will\n * be applied.\n *\n * @defaultValue `false`\n */\n reversed?: boolean;\n\n /**\n * @defaultValue `false`\n */\n inactive?: boolean;\n}\n\nexport interface LabelProps\n extends LabelHTMLAttributes<HTMLLabelElement>,\n LabelClassNameOptions {}\n\n/**\n * @since 6.0.0\n */\nexport interface ConfigurableTextFieldAddonProps\n extends HTMLAttributes<HTMLSpanElement> {\n /**\n * Boolean if the addon should be presentational only and prevent pointer\n * events.\n *\n * @defaultValue `false`\n */\n pointerEvents?: boolean;\n}\n\n/**\n * @since 6.0.0 Added support for `leftAddonProps` and\n * `rightAddonProps`.\n */\nexport interface TextFieldContainerOptions\n extends FormThemeOptions,\n FormComponentStates {\n /**\n * Set this to `true` to enable the dense spec which reduces the height.\n *\n * @defaultValue `false`\n */\n dense?: boolean;\n\n /**\n * Set this to `true` to change the style from `display: flex` to\n * `display: inline-flex`.\n *\n * @defaultValue `false`\n */\n inline?: boolean;\n\n /**\n * Set this to `true` if this component should stretch to fill a flex or grid\n * container using `flex: 1 1 auto`.\n *\n * @defaultValue `false`\n */\n stretch?: boolean;\n\n /**\n * This should generally be an icon or a button that will be placed before the\n * `TextField` or `TextArea`.\n */\n leftAddon?: ReactNode;\n\n /**\n * Any additional props to pass to the `<span>` surrounding the {@link leftAddon}.\n *\n * @since 6.0.0\n */\n leftAddonProps?: PropsWithRef<\n ConfigurableTextFieldAddonProps,\n HTMLSpanElement\n >;\n\n /**\n * @see {@link TextFieldAddonProps.disabled}\n *\n * @defaultValue `false`\n */\n disableLeftAddonStyles?: boolean;\n\n /**\n * This should generally be an icon or a button that will be placed after the\n * `TextField` or `TextArea`.\n */\n rightAddon?: ReactNode;\n\n /**\n * Any additional props to pass to the `<span>` surrounding the {@link rightAddon}.\n *\n * @since 6.0.0\n */\n rightAddonProps?: PropsWithRef<\n ConfigurableTextFieldAddonProps,\n HTMLSpanElement\n >;\n\n /**\n * @see {@link TextFieldAddonProps.disabled}\n *\n * @defaultValue `false`\n */\n disableRightAddonStyles?: boolean;\n}\n\nexport interface FormFieldOptions\n extends TextFieldContainerOptions,\n FormMessageContainerExtension {\n /**\n * An optional floating label to use with the text field. A label is generally\n * recommended for accessibility, but can be omitted if an `aria-label` or\n * `aria-labelledby` is provided.\n */\n label?: ReactNode;\n\n /**\n * Any additional props and/or ref that should be passed to the `<label>`\n * element when a {@link label} is provided.\n *\n * @example\n * ```tsx\n * labelProps={{\n * ref: labelRef,\n * style: {},\n * className: \"some-custom-class-name\",\n * onClick: (event) => {\n * // do something\n * }\n * }}\n * ```\n */\n labelProps?: PropsWithRef<LabelProps, HTMLLabelElement>;\n\n /**\n * A convenience prop to apply a custom style to a label. This is equivalent\n * to:\n *\n * ```ts\n * labelProps={{\n * style: // some style here\n * }}\n * ```\n */\n labelStyle?: CSSProperties;\n\n /**\n * A convenience prop to apply a custom className to a label. This is\n * equivalent to:\n *\n * ```ts\n * labelProps={{\n * className: \"some-class-name\",\n * }}\n * ```\n */\n labelClassName?: string;\n}\n"],"names":[],"mappings":"AAihBA,WAmDC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/form/useCheckboxGroup.ts"],"sourcesContent":["\"use client\";\nimport { useCallback, useRef, useState } from \"react\";\nimport { type UseStateInitializer, type UseStateSetter } from \"../types.js\";\n\nconst EMPTY_LIST = [] as const;\n\n/** @since 6.0.0 */\nexport interface CheckboxGroupOptions<V> {\n /**\n * A `name` to apply to all the checkboxes within the group. This is required\n * if the {@link menu} option is set to `true`.\n */\n name?: string;\n\n /**\n * Set this to `true` if using the `MenuItemCheckbox` component instead of the\n * `Checkbox` so the correct props can be provided.\n *\n * @defaultValue `false`\n */\n menu?: boolean;\n\n /**\n * This prop **must** be defined to enable the indeterminate checkbox feature\n * from the hook. This should be a list of all the possible checkbox values in\n * the group. This will be used to select all values when the indeterminate\n * checkbox is checked and determine if all the checkboxes have manually be\n * selected.\n *\n * @example Indeterminate Behavior\n * ```tsx\n * const OPTIONS = [\n * { label: \"First\", value: \"a\" },\n * { label: \"Second\", value: \"b\" },\n * { label: \"Third\", value: \"c\" },\n * ] as const:\n * const VALUES = OPTIONS.map(({ value }) => value) as const;\n *\n * const {\n * getCheckboxProps,\n * getIndeterminateProps,\n * checkedValues,\n * } = useCheckboxGroup({ name: \"group\", values: VALUES });\n * ```\n */\n values?: readonly V[];\n\n /**\n * Set this to a list of checkbox values that should be checked by default.\n *\n * @defaultValue `[]`\n */\n defaultCheckedValues?: UseStateInitializer<readonly V[]>;\n}\n\n/** @since 6.0.0 */\nexport interface CheckboxGroupImplementation<V extends string> {\n reset(): void;\n checkedValues: ReadonlySet<V>;\n setCheckedValues: UseStateSetter<ReadonlySet<V>>;\n getCheckboxProps(value: V): {\n name: string;\n value: V;\n checked: boolean;\n onChange(): void;\n };\n}\n\n/** @since 6.0.0 */\nexport interface IndeterminateCheckboxGroupImplementation<V extends string>\n extends CheckboxGroupImplementation<V> {\n getIndeterminateProps(): {\n \"aria-checked\": \"mixed\" | undefined;\n name: string;\n checked: boolean;\n indeterminate: boolean;\n onChange(): void;\n };\n}\n\n/** @since 6.0.0 */\nexport interface MenuItemCheckboxGroupImplementation<V extends string> {\n reset(): void;\n checkedValues: ReadonlySet<V>;\n setCheckedValues: UseStateSetter<ReadonlySet<V>>;\n getCheckboxProps(value: V): {\n checked: boolean;\n onCheckedChange(): void;\n };\n}\n\n/** @since 6.0.0 */\nexport interface IndeterminateMenuItemCheckboxGroupImplementation<\n V extends string,\n> extends MenuItemCheckboxGroupImplementation<V> {\n getIndeterminateProps(): {\n \"aria-checked\": \"mixed\" | undefined;\n checked: boolean;\n indeterminate: boolean;\n onCheckedChange(): void;\n };\n}\n\n/** @since 6.0.0 */\nexport interface CombinedCheckboxGroupReturnValue<V extends string> {\n reset(): void;\n checkedValues: ReadonlySet<V>;\n setCheckedValues: UseStateSetter<ReadonlySet<V>>;\n getCheckboxProps(value: V): {\n name?: string;\n value?: V;\n checked: boolean;\n onChange?(): void;\n onCheckedChange?(): void;\n };\n getIndeterminateProps?(): {\n \"aria-checked\": \"mixed\" | undefined;\n name?: string;\n checked: boolean;\n indeterminate: boolean;\n onChange?(): void;\n onCheckedChange?(): void;\n };\n}\n\n/**\n * @example Checkbox Group\n * ```tsx\n * const { getCheckboxProps, checkedValues } = useCheckboxGroup({ name: \"example\" });\n *\n * return (\n * <>\n * <Checkbox {...getCheckboxProps(\"a\")}>\n * First\n * </Checkbox>\n * <Checkbox {...getCheckboxProps(\"b\")}>\n * Second\n * </Checkbox>\n * <Checkbox {...getCheckboxProps(\"c\")}>\n * Third\n * </Checkbox>\n * </>\n * );\n * ```\n *\n * @since 6.0.0\n */\nexport function useCheckboxGroup<V extends string>(\n options: CheckboxGroupOptions<V> & {\n menu?: false;\n name: string;\n values?: never;\n }\n): CheckboxGroupImplementation<V>;\n/**\n * @example Indeterminate Checkbox Group\n * ```tsx\n * const OPTIONS = [\n * { label: \"First\", value: \"a\" },\n * { label: \"Second\", value: \"b\" },\n * { label: \"Third\", value: \"c\" },\n * ] as const:\n * const VALUES = OPTIONS.map(({ value }) => value) as const;\n *\n * const {\n * getCheckboxProps,\n * getIndeterminateProps,\n * checkedValues\n * } = useCheckboxGroup({\n * name: \"example\",\n * values: VALUES,\n * });\n *\n * return (\n * <>\n * <Checkbox {...getIndeterminateProps()} label=\"Select all\" />\n * {VALUES.map(({ label, value }) => (\n * <Checkbox key={value} label={label} {...getCheckboxProps(value)} />\n * ))}\n * </>\n * );\n * ```\n *\n * @since 6.0.0\n */\nexport function useCheckboxGroup<V extends string>(\n options: CheckboxGroupOptions<V> & {\n menu?: false;\n name: string;\n values: readonly V[];\n }\n): IndeterminateCheckboxGroupImplementation<V>;\n/**\n * @example MenuItemCheckbox Group\n * ```tsx\n * const { getCheckboxProps, checkedValues } = useCheckboxGroup({ menu: true });\n *\n * return (\n * <>\n * <MenuItemCheckbox {...getCheckboxProps(\"a\")}>\n * First\n * </MenuItemCheckbox>\n * <MenuItemCheckbox {...getCheckboxProps(\"b\")}>\n * Second\n * </MenuItemCheckbox>\n * <MenuItemCheckbox {...getCheckboxProps(\"c\")}>\n * Third\n * </MenuItemCheckbox>\n * </>\n * );\n * ```\n *\n * @since 6.0.0\n */\nexport function useCheckboxGroup<V extends string>(\n options: CheckboxGroupOptions<V> & {\n menu: true;\n name?: never;\n values?: never;\n }\n): MenuItemCheckboxGroupImplementation<V>;\n/**\n * @example Indeterminate MenuItemCheckbox Group\n * ```tsx\n * const OPTIONS = [\n * { label: \"First\", value: \"a\" },\n * { label: \"Second\", value: \"b\" },\n * { label: \"Third\", value: \"c\" },\n * ] as const:\n * const VALUES = OPTIONS.map(({ value }) => value) as const;\n *\n * const { getCheckboxProps, getIndeterminateProps, checkedValues } = useCheckboxGroup({\n * menu: true,\n * values: VALUES,\n * });\n *\n * return (\n * <>\n * <MenuItemCheckbox {...getIndeterminateProps()}>\n * All\n * <MenuItemCheckbox>\n * {OPTIONS.map(({ label, value }) => (\n * <MenuItemCheckbox key={value} {...getCheckboxProps(value)}>\n * {label}\n * </MenuItemCheckbox>\n * ))}\n * </>\n * );\n * ```\n *\n * @since 6.0.0\n */\nexport function useCheckboxGroup<V extends string>(\n options: CheckboxGroupOptions<V> & {\n menu: true;\n name?: never;\n values: readonly V[];\n }\n): IndeterminateMenuItemCheckboxGroupImplementation<V>;\nexport function useCheckboxGroup<V extends string>(\n options: CheckboxGroupOptions<V>\n): CombinedCheckboxGroupReturnValue<V> {\n const {\n name,\n menu = false,\n values,\n defaultCheckedValues = EMPTY_LIST,\n } = options;\n const [checkedValues, setCheckedValues] = useState<ReadonlySet<V>>(() => {\n if (typeof defaultCheckedValues === \"function\") {\n return new Set(defaultCheckedValues());\n }\n\n return new Set(defaultCheckedValues);\n });\n const initial = useRef(checkedValues);\n\n let getIndeterminateProps: CombinedCheckboxGroupReturnValue<V>[\"getIndeterminateProps\"];\n if (values) {\n getIndeterminateProps = () => {\n const checked = checkedValues.size > 0;\n const indeterminate = checked && checkedValues.size < values.length;\n\n return {\n \"aria-checked\": indeterminate ? \"mixed\" : undefined,\n name,\n checked,\n indeterminate,\n [menu ? \"onCheckedChange\" : \"onChange\"]() {\n setCheckedValues(() => {\n if (checkedValues.size === 0 || indeterminate) {\n return new Set(values);\n }\n\n return new Set();\n });\n },\n };\n };\n }\n\n return {\n reset: useCallback(() => {\n setCheckedValues(initial.current);\n }, []),\n checkedValues,\n setCheckedValues,\n getIndeterminateProps,\n getCheckboxProps(value) {\n return {\n name,\n value: menu ? undefined : value,\n checked: checkedValues.has(value),\n [menu ? \"onCheckedChange\" : \"onChange\"]() {\n setCheckedValues((prevValues) => {\n const nextValues = new Set(prevValues);\n if (prevValues.has(value)) {\n nextValues.delete(value);\n } else {\n nextValues.add(value);\n }\n\n return nextValues;\n });\n },\n };\n },\n };\n}\n"],"names":["useCallback","useRef","useState","EMPTY_LIST","useCheckboxGroup","options","name","menu","values","defaultCheckedValues","checkedValues","setCheckedValues","Set","initial","getIndeterminateProps","checked","size","indeterminate","length","undefined","reset","current","getCheckboxProps","value","has","prevValues","nextValues","delete","add"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AACA,SAASA,WAAW,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AAGtD,MAAMC,aAAa,EAAE;AA+PrB,OAAO,SAASC,iBACdC,OAAgC;IAEhC,MAAM,EACJC,IAAI,EACJC,OAAO,KAAK,EACZC,MAAM,EACNC,uBAAuBN,UAAU,EAClC,GAAGE;IACJ,MAAM,CAACK,eAAeC,iBAAiB,GAAGT,SAAyB;QACjE,IAAI,OAAOO,yBAAyB,YAAY;YAC9C,OAAO,IAAIG,IAAIH;QACjB;QAEA,OAAO,IAAIG,IAAIH;IACjB;IACA,MAAMI,UAAUZ,OAAOS;IAEvB,IAAII;IACJ,IAAIN,QAAQ;QACVM,wBAAwB;YACtB,MAAMC,UAAUL,cAAcM,IAAI,GAAG;YACrC,MAAMC,gBAAgBF,WAAWL,cAAcM,IAAI,GAAGR,OAAOU,MAAM;YAEnE,OAAO;gBACL,gBAAgBD,gBAAgB,UAAUE;gBAC1Cb;gBACAS;gBACAE;gBACA,CAACV,OAAO,oBAAoB,WAAW;oBACrCI,iBAAiB;wBACf,IAAID,cAAcM,IAAI,KAAK,KAAKC,eAAe;4BAC7C,OAAO,IAAIL,IAAIJ;wBACjB;wBAEA,OAAO,IAAII;oBACb;gBACF;YACF;QACF;IACF;IAEA,OAAO;QACLQ,OAAOpB,YAAY;YACjBW,iBAAiBE,QAAQQ,OAAO;QAClC,GAAG,EAAE;QACLX;QACAC;QACAG;QACAQ,kBAAiBC,KAAK;YACpB,OAAO;gBACLjB;gBACAiB,OAAOhB,OAAOY,YAAYI;gBAC1BR,SAASL,cAAcc,GAAG,CAACD;gBAC3B,CAAChB,OAAO,oBAAoB,WAAW;oBACrCI,iBAAiB,CAACc;wBAChB,MAAMC,aAAa,IAAId,IAAIa;wBAC3B,IAAIA,WAAWD,GAAG,CAACD,QAAQ;4BACzBG,WAAWC,MAAM,CAACJ;wBACpB,OAAO;4BACLG,WAAWE,GAAG,CAACL;wBACjB;wBAEA,OAAOG;oBACT;gBACF;YACF;QACF;IACF;AACF"}
|
|
1
|
+
{"version":3,"sources":["../../src/form/useCheckboxGroup.ts"],"sourcesContent":["\"use client\";\nimport { useCallback, useRef, useState } from \"react\";\nimport { type UseStateInitializer, type UseStateSetter } from \"../types.js\";\n\nconst EMPTY_LIST = [] as const;\n\n/** @since 6.0.0 */\nexport interface CheckboxGroupOptions<V> {\n /**\n * A `name` to apply to all the checkboxes within the group. This is required\n * if the {@link menu} option is set to `true`.\n */\n name?: string;\n\n /**\n * Set this to `true` if using the `MenuItemCheckbox` component instead of the\n * `Checkbox` so the correct props can be provided.\n *\n * @defaultValue `false`\n */\n menu?: boolean;\n\n /**\n * This prop **must** be defined to enable the indeterminate checkbox feature\n * from the hook. This should be a list of all the possible checkbox values in\n * the group. This will be used to select all values when the indeterminate\n * checkbox is checked and determine if all the checkboxes have manually be\n * selected.\n *\n * @example Indeterminate Behavior\n * ```tsx\n * const OPTIONS = [\n * { label: \"First\", value: \"a\" },\n * { label: \"Second\", value: \"b\" },\n * { label: \"Third\", value: \"c\" },\n * ] as const:\n * const VALUES = OPTIONS.map(({ value }) => value) as const;\n *\n * const {\n * getCheckboxProps,\n * getIndeterminateProps,\n * checkedValues,\n * } = useCheckboxGroup({ name: \"group\", values: VALUES });\n * ```\n */\n values?: readonly V[];\n\n /**\n * Set this to a list of checkbox values that should be checked by default.\n *\n * @defaultValue `[]`\n */\n defaultCheckedValues?: UseStateInitializer<readonly V[]>;\n}\n\n/** @since 6.0.0 */\nexport interface CheckboxGroupImplementation<V extends string> {\n reset(): void;\n checkedValues: ReadonlySet<V>;\n setCheckedValues: UseStateSetter<ReadonlySet<V>>;\n getCheckboxProps(value: V): {\n name: string;\n value: V;\n checked: boolean;\n onChange(): void;\n };\n}\n\n/** @since 6.0.0 */\nexport interface IndeterminateCheckboxGroupImplementation<V extends string>\n extends CheckboxGroupImplementation<V> {\n getIndeterminateProps(): {\n \"aria-checked\": \"mixed\" | undefined;\n name: string;\n checked: boolean;\n indeterminate: boolean;\n onChange(): void;\n };\n}\n\n/** @since 6.0.0 */\nexport interface MenuItemCheckboxGroupImplementation<V extends string> {\n reset(): void;\n checkedValues: ReadonlySet<V>;\n setCheckedValues: UseStateSetter<ReadonlySet<V>>;\n getCheckboxProps(value: V): {\n checked: boolean;\n onCheckedChange(): void;\n };\n}\n\n/** @since 6.0.0 */\nexport interface IndeterminateMenuItemCheckboxGroupImplementation<\n V extends string,\n> extends MenuItemCheckboxGroupImplementation<V> {\n getIndeterminateProps(): {\n \"aria-checked\": \"mixed\" | undefined;\n checked: boolean;\n indeterminate: boolean;\n onCheckedChange(): void;\n };\n}\n\n/** @since 6.0.0 */\nexport interface CombinedCheckboxGroupReturnValue<V extends string> {\n reset(): void;\n checkedValues: ReadonlySet<V>;\n setCheckedValues: UseStateSetter<ReadonlySet<V>>;\n getCheckboxProps(value: V): {\n name?: string;\n value?: V;\n checked: boolean;\n onChange?(): void;\n onCheckedChange?(): void;\n };\n getIndeterminateProps?(): {\n \"aria-checked\": \"mixed\" | undefined;\n name?: string;\n checked: boolean;\n indeterminate: boolean;\n onChange?(): void;\n onCheckedChange?(): void;\n };\n}\n\n/**\n * @example Checkbox Group\n * ```tsx\n * const { getCheckboxProps, checkedValues } = useCheckboxGroup({ name: \"example\" });\n *\n * return (\n * <>\n * <Checkbox {...getCheckboxProps(\"a\")}>\n * First\n * </Checkbox>\n * <Checkbox {...getCheckboxProps(\"b\")}>\n * Second\n * </Checkbox>\n * <Checkbox {...getCheckboxProps(\"c\")}>\n * Third\n * </Checkbox>\n * </>\n * );\n * ```\n *\n * @since 6.0.0\n */\nexport function useCheckboxGroup<V extends string>(\n options: CheckboxGroupOptions<V> & {\n menu?: false;\n name: string;\n values?: never;\n }\n): CheckboxGroupImplementation<V>;\n/**\n * @example Indeterminate Checkbox Group\n * ```tsx\n * const OPTIONS = [\n * { label: \"First\", value: \"a\" },\n * { label: \"Second\", value: \"b\" },\n * { label: \"Third\", value: \"c\" },\n * ] as const:\n * const VALUES = OPTIONS.map(({ value }) => value) as const;\n *\n * const {\n * getCheckboxProps,\n * getIndeterminateProps,\n * checkedValues\n * } = useCheckboxGroup({\n * name: \"example\",\n * values: VALUES,\n * });\n *\n * return (\n * <>\n * <Checkbox {...getIndeterminateProps()} label=\"Select all\" />\n * {VALUES.map(({ label, value }) => (\n * <Checkbox key={value} label={label} {...getCheckboxProps(value)} />\n * ))}\n * </>\n * );\n * ```\n *\n * @since 6.0.0\n */\nexport function useCheckboxGroup<V extends string>(\n options: CheckboxGroupOptions<V> & {\n menu?: false;\n name: string;\n values: readonly V[];\n }\n): IndeterminateCheckboxGroupImplementation<V>;\n/**\n * @example MenuItemCheckbox Group\n * ```tsx\n * const { getCheckboxProps, checkedValues } = useCheckboxGroup({ menu: true });\n *\n * return (\n * <>\n * <MenuItemCheckbox {...getCheckboxProps(\"a\")}>\n * First\n * </MenuItemCheckbox>\n * <MenuItemCheckbox {...getCheckboxProps(\"b\")}>\n * Second\n * </MenuItemCheckbox>\n * <MenuItemCheckbox {...getCheckboxProps(\"c\")}>\n * Third\n * </MenuItemCheckbox>\n * </>\n * );\n * ```\n *\n * @since 6.0.0\n */\nexport function useCheckboxGroup<V extends string>(\n options: CheckboxGroupOptions<V> & {\n menu: true;\n name?: never;\n values?: never;\n }\n): MenuItemCheckboxGroupImplementation<V>;\n/**\n * @example Indeterminate MenuItemCheckbox Group\n * ```tsx\n * const OPTIONS = [\n * { label: \"First\", value: \"a\" },\n * { label: \"Second\", value: \"b\" },\n * { label: \"Third\", value: \"c\" },\n * ] as const:\n * const VALUES = OPTIONS.map(({ value }) => value) as const;\n *\n * const { getCheckboxProps, getIndeterminateProps, checkedValues } = useCheckboxGroup({\n * menu: true,\n * values: VALUES,\n * });\n *\n * return (\n * <>\n * <MenuItemCheckbox {...getIndeterminateProps()}>\n * All\n * <MenuItemCheckbox>\n * {OPTIONS.map(({ label, value }) => (\n * <MenuItemCheckbox key={value} {...getCheckboxProps(value)}>\n * {label}\n * </MenuItemCheckbox>\n * ))}\n * </>\n * );\n * ```\n *\n * @since 6.0.0\n */\nexport function useCheckboxGroup<V extends string>(\n options: CheckboxGroupOptions<V> & {\n menu: true;\n name?: never;\n values: readonly V[];\n }\n): IndeterminateMenuItemCheckboxGroupImplementation<V>;\nexport function useCheckboxGroup<V extends string>(\n options: CheckboxGroupOptions<V>\n): CombinedCheckboxGroupReturnValue<V> {\n const {\n name,\n menu = false,\n values,\n defaultCheckedValues = EMPTY_LIST,\n } = options;\n const [checkedValues, setCheckedValues] = useState<ReadonlySet<V>>(() => {\n if (typeof defaultCheckedValues === \"function\") {\n return new Set(defaultCheckedValues());\n }\n\n return new Set(defaultCheckedValues);\n });\n const initial = useRef(checkedValues);\n\n let getIndeterminateProps: CombinedCheckboxGroupReturnValue<V>[\"getIndeterminateProps\"];\n if (values) {\n getIndeterminateProps = () => {\n const checked = checkedValues.size > 0;\n const indeterminate = checked && checkedValues.size < values.length;\n\n return {\n \"aria-checked\": indeterminate ? \"mixed\" : undefined,\n name,\n checked,\n indeterminate,\n [menu ? \"onCheckedChange\" : \"onChange\"]() {\n setCheckedValues(() => {\n if (checkedValues.size === 0 || indeterminate) {\n return new Set(values);\n }\n\n return new Set();\n });\n },\n };\n };\n }\n\n return {\n reset: useCallback(() => {\n setCheckedValues(initial.current);\n }, []),\n checkedValues,\n setCheckedValues,\n getIndeterminateProps,\n getCheckboxProps(value) {\n return {\n name,\n value: menu ? undefined : value,\n checked: checkedValues.has(value),\n [menu ? \"onCheckedChange\" : \"onChange\"]() {\n setCheckedValues((prevValues) => {\n const nextValues = new Set(prevValues);\n if (prevValues.has(value)) {\n nextValues.delete(value);\n } else {\n nextValues.add(value);\n }\n\n return nextValues;\n });\n },\n };\n },\n };\n}\n"],"names":["useCallback","useRef","useState","EMPTY_LIST","useCheckboxGroup","options","name","menu","values","defaultCheckedValues","checkedValues","setCheckedValues","Set","initial","getIndeterminateProps","checked","size","indeterminate","length","undefined","reset","current","getCheckboxProps","value","has","prevValues","nextValues","delete","add"],"mappings":"AAAA;AACA,SAASA,WAAW,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AAGtD,MAAMC,aAAa,EAAE;AA+PrB,OAAO,SAASC,iBACdC,OAAgC;IAEhC,MAAM,EACJC,IAAI,EACJC,OAAO,KAAK,EACZC,MAAM,EACNC,uBAAuBN,UAAU,EAClC,GAAGE;IACJ,MAAM,CAACK,eAAeC,iBAAiB,GAAGT,SAAyB;QACjE,IAAI,OAAOO,yBAAyB,YAAY;YAC9C,OAAO,IAAIG,IAAIH;QACjB;QAEA,OAAO,IAAIG,IAAIH;IACjB;IACA,MAAMI,UAAUZ,OAAOS;IAEvB,IAAII;IACJ,IAAIN,QAAQ;QACVM,wBAAwB;YACtB,MAAMC,UAAUL,cAAcM,IAAI,GAAG;YACrC,MAAMC,gBAAgBF,WAAWL,cAAcM,IAAI,GAAGR,OAAOU,MAAM;YAEnE,OAAO;gBACL,gBAAgBD,gBAAgB,UAAUE;gBAC1Cb;gBACAS;gBACAE;gBACA,CAACV,OAAO,oBAAoB,WAAW;oBACrCI,iBAAiB;wBACf,IAAID,cAAcM,IAAI,KAAK,KAAKC,eAAe;4BAC7C,OAAO,IAAIL,IAAIJ;wBACjB;wBAEA,OAAO,IAAII;oBACb;gBACF;YACF;QACF;IACF;IAEA,OAAO;QACLQ,OAAOpB,YAAY;YACjBW,iBAAiBE,QAAQQ,OAAO;QAClC,GAAG,EAAE;QACLX;QACAC;QACAG;QACAQ,kBAAiBC,KAAK;YACpB,OAAO;gBACLjB;gBACAiB,OAAOhB,OAAOY,YAAYI;gBAC1BR,SAASL,cAAcc,GAAG,CAACD;gBAC3B,CAAChB,OAAO,oBAAoB,WAAW;oBACrCI,iBAAiB,CAACc;wBAChB,MAAMC,aAAa,IAAId,IAAIa;wBAC3B,IAAIA,WAAWD,GAAG,CAACD,QAAQ;4BACzBG,WAAWC,MAAM,CAACJ;wBACpB,OAAO;4BACLG,WAAWE,GAAG,CAACL;wBACjB;wBAEA,OAAOG;oBACT;gBACF;YACF;QACF;IACF;AACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/form/useCombobox.ts"],"sourcesContent":["\"use client\";\nimport {\n useRef,\n type FocusEventHandler,\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n type InputHTMLAttributes,\n type KeyboardEventHandler,\n type MouseEventHandler,\n type Ref,\n type RefCallback,\n type RefObject,\n} from \"react\";\nimport { type MenuProps } from \"../menu/Menu.js\";\nimport { type MenuSheetConfigurableProps } from \"../menu/MenuSheet.js\";\nimport {\n type GetDefaultFocusedIndex,\n type GetFocusableElements,\n type KeyboardMovementExtensionData,\n type KeyboardMovementProviderImplementation,\n type KeyboardMovementProviderOptions,\n} from \"../movement/types.js\";\nimport { useKeyboardMovementProvider } from \"../movement/useKeyboardMovementProvider.js\";\nimport { BELOW_CENTER_ANCHOR } from \"../positioning/constants.js\";\nimport {\n type PositionAnchor,\n type PositionWidth,\n} from \"../positioning/types.js\";\nimport { TRANSITION_CONFIG } from \"../transition/config.js\";\nimport {\n type TransitionCallbacks,\n type TransitionEnterHandler,\n type TransitionExitHandler,\n} from \"../transition/types.js\";\nimport {\n type NonNullMutableRef,\n type UseStateInitializer,\n type UseStateSetter,\n} from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport { useToggle } from \"../useToggle.js\";\nimport { tryToSubmitRelatedForm } from \"./utils.js\";\n\nconst noop = (): void => {\n // do nothing\n};\n\n/**\n * @since 6.0.0\n */\nexport const getNonDisabledOptions = (\n container: HTMLElement\n): readonly HTMLElement[] => [\n ...container.querySelectorAll<HTMLLIElement>(\n '[role=\"option\"]:not([aria-disabled])'\n ),\n];\n\n/**\n * @since 6.0.0\n */\nexport type SupportedComboboxPopup = \"listbox\" | \"grid\" | \"dialog\";\n\n/**\n * @since 6.0.0\n */\nexport interface ComboboxKeyboardMovementData<\n E extends HTMLElement = HTMLInputElement,\n> extends KeyboardMovementExtensionData<E> {\n show(): void;\n hide(): void;\n visible: boolean;\n focusLast: NonNullMutableRef<boolean>;\n}\n\n/**\n * @since 6.0.0\n */\nexport type ExtendComboboxKeyDown<E extends HTMLElement = HTMLInputElement> = (\n movementData: ComboboxKeyboardMovementData<E>\n) => void;\n\n/**\n * @since 6.0.0\n */\nexport type ComboboxKeyboardMovementOptions<\n ComboboxEl extends HTMLElement = HTMLInputElement,\n> = Pick<\n KeyboardMovementProviderOptions<ComboboxEl>,\n | \"onClick\"\n | \"onFocus\"\n | \"onKeyDown\"\n | \"disabled\"\n | \"loopable\"\n | \"searchable\"\n | \"onFocusChange\"\n | \"isNegativeOneAllowed\"\n>;\n\n/**\n * @since 6.0.0\n */\nexport interface BaseComboboxOptions<\n ComboboxEl extends HTMLElement = HTMLInputElement,\n PopupEl extends HTMLElement = HTMLElement,\n> extends ComboboxKeyboardMovementOptions<ComboboxEl> {\n /**\n * This is the {@link InputHTMLAttributes.form} attribute and is used to\n * attempt submitting a form when the enter key is pressed.\n */\n form?: string;\n\n /**\n * @defaultValue `\"combobox-popup-\" + useId()`\n */\n popupId?: string;\n popupRef?: Ref<PopupEl>;\n\n /**\n * @defaultValue `\"combobox-\" + useId()`\n */\n comboboxId?: string;\n comboboxRef?: Ref<ComboboxEl>;\n\n /**\n * @defaultValue `\"listbox\"`\n */\n popup?: \"listbox\" | \"grid\" | \"dialog\";\n\n /**\n * @defaultValue `false`\n */\n defaultVisible?: UseStateInitializer<boolean>;\n\n extendKeyDown?: ExtendComboboxKeyDown<ComboboxEl>;\n\n /**\n * @defaultValue {@link getNonDisabledOptions}\n */\n getFocusableElements?: GetFocusableElements;\n\n getDefaultFocusedIndex?: GetDefaultFocusedIndex;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ComboboxOptions<\n ComboboxEl extends HTMLElement = HTMLInputElement,\n PopupEl extends HTMLElement = HTMLElement,\n> extends BaseComboboxOptions<ComboboxEl, PopupEl> {\n getEnterDefaultFocusedIndex(options: {\n focusLast: boolean;\n focusables: readonly HTMLElement[];\n currentFocusIndex: number;\n }): number;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ComboboxWidgetProps<\n ComboboxEl extends HTMLElement = HTMLInputElement,\n> {\n \"aria-controls\": string;\n \"aria-disabled\": true | undefined;\n \"aria-expanded\": boolean;\n \"aria-haspopup\": SupportedComboboxPopup;\n id: string;\n ref: RefCallback<ComboboxEl>;\n role: \"combobox\";\n onClick: MouseEventHandler<ComboboxEl>;\n onFocus: FocusEventHandler<ComboboxEl>;\n onKeyDown: KeyboardEventHandler<ComboboxEl>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ComboboxWidgetPopupProps<\n PopupEl extends HTMLElement = HTMLElement,\n> {\n id: string;\n ref: RefCallback<PopupEl>;\n role: \"listbox\" | \"dialog\" | \"grid\";\n}\n\n/**\n * @since 6.0.0\n */\nexport type ComboboxTransitionCallbacks = Pick<\n TransitionCallbacks,\n \"onEntering\" | \"onEntered\" | \"onExiting\" | \"onExited\"\n>;\n\n/**\n * @since 6.0.0\n */\nexport interface ComboboxTransitionOptions extends ComboboxTransitionCallbacks {\n disableTransition?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport type ConfigurableComboboxMenuProps = Partial<\n Omit<MenuProps, \"visible\" | \"onRequestClose\" | keyof ComboboxWidgetPopupProps>\n>;\n\n/**\n * @since 6.0.0\n */\nexport interface ProvidedComboboxMenuProps<\n PopupEl extends HTMLElement = HTMLDivElement,\n> extends Required<ComboboxTransitionCallbacks>,\n ComboboxWidgetPopupProps<PopupEl> {\n visible: boolean;\n onRequestClose(): void;\n\n /** @defaultValue `\"min\"` */\n width: PositionWidth;\n\n /** @defaultValue `BELOW_CENTER_ANCHOR` */\n anchor: PositionAnchor;\n\n fixedTo: RefObject<HTMLElement>;\n\n sheetProps: MenuSheetConfigurableProps &\n Required<ComboboxTransitionCallbacks>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ComboboxMenuProps<PopupEl extends HTMLElement = HTMLDivElement>\n extends Omit<ConfigurableComboboxMenuProps, keyof ProvidedComboboxMenuProps>,\n ProvidedComboboxMenuProps<PopupEl> {}\n\n/**\n * Since the combobox usually uses the `Menu` as a popup element, this is a\n * helper util to create the required props and merge any additional props\n * with reasonable defaults.\n */\nexport type ComboboxGetMenuProps<PopupEl extends HTMLElement = HTMLDivElement> =\n (props?: ConfigurableComboboxMenuProps) => ComboboxMenuProps<PopupEl>;\n\n/**\n * @since 6.0.0\n */\nexport interface ComboboxImplementation<\n ComboboxEl extends HTMLElement = HTMLInputElement,\n PopupEl extends HTMLElement = HTMLElement,\n> extends KeyboardMovementProviderImplementation<ComboboxEl> {\n show(): void;\n hide(): void;\n visible: boolean;\n setVisible: UseStateSetter<boolean>;\n focusLast: NonNullMutableRef<boolean>;\n popupRef: RefObject<PopupEl>;\n popupProps: ComboboxWidgetPopupProps<PopupEl>;\n comboboxRef: RefObject<ComboboxEl>;\n comboboxProps: ComboboxWidgetProps<ComboboxEl>;\n\n getMenuProps: ComboboxGetMenuProps<PopupEl>;\n getTransitionCallbacks(\n options: ComboboxTransitionOptions\n ): Required<ComboboxTransitionCallbacks>;\n}\n\n/**\n * @since 6.0.0\n */\nexport function useCombobox<\n ComboboxEl extends HTMLElement = HTMLInputElement,\n PopupEl extends HTMLElement = HTMLElement,\n>(\n options: ComboboxOptions<ComboboxEl, PopupEl>\n): ComboboxImplementation<ComboboxEl, PopupEl> {\n const {\n form,\n popup = \"listbox\",\n onClick = noop,\n onFocus,\n onKeyDown,\n searchable,\n isNegativeOneAllowed,\n loopable,\n disabled,\n comboboxId: propComboboxId,\n comboboxRef: propComboboxRef,\n popupId: propPopupId,\n popupRef: propPopupRef,\n defaultVisible = false,\n onFocusChange = noop,\n extendKeyDown = noop,\n getFocusableElements = getNonDisabledOptions,\n getEnterDefaultFocusedIndex,\n getDefaultFocusedIndex,\n } = options;\n\n const {\n toggled: visible,\n enable: show,\n disable: hide,\n setToggled: setVisible,\n } = useToggle(defaultVisible);\n const popupId = useEnsuredId(propPopupId, \"combobox-popup\");\n const comboboxId = useEnsuredId(propComboboxId, \"combobox\");\n const [comboboxRef, comboboxRefCallback] = useEnsuredRef(propComboboxRef);\n const [popupRef, popupRefCallback] = useEnsuredRef(propPopupRef);\n const focusLast = useRef(false);\n const {\n movementProps,\n movementContext,\n currentFocusIndex,\n activeDescendantId,\n setActiveDescendantId,\n } = useKeyboardMovementProvider<ComboboxEl>({\n onFocus,\n onKeyDown,\n onClick(event) {\n onClick(event);\n if (disabled) {\n return;\n }\n\n show();\n },\n extendKeyDown(movementData) {\n extendKeyDown({\n ...movementData,\n show,\n hide,\n visible,\n focusLast,\n });\n const { event } = movementData;\n if (event.isPropagationStopped()) {\n return;\n }\n\n if (visible) {\n switch (event.key) {\n case \"Tab\":\n case \"Escape\":\n event.stopPropagation();\n hide();\n break;\n case \"Enter\":\n event.preventDefault();\n break;\n }\n\n // while visible, always use the default keyboard movement behavior\n return;\n }\n\n switch (event.key) {\n case \"ArrowUp\":\n case \"ArrowDown\":\n event.preventDefault();\n event.stopPropagation();\n focusLast.current = event.key === \"ArrowUp\";\n show();\n break;\n case \"Enter\":\n tryToSubmitRelatedForm(event, form);\n break;\n }\n },\n disabled,\n loopable,\n searchable,\n onFocusChange,\n programmatic: true,\n includeDisabled: false,\n tabIndexBehavior: \"virtual\",\n getFocusableElements(container, programmatic) {\n const popup = popupRef.current;\n if (!popup) {\n return [];\n }\n\n return getFocusableElements(popup || container, programmatic);\n },\n isNegativeOneAllowed,\n getDefaultFocusedIndex,\n });\n const getTransitionCallbacks = (\n options: ComboboxTransitionOptions = {}\n ): Required<ComboboxTransitionCallbacks> => {\n const { onEntered, onEntering, onExiting, onExited, disableTransition } =\n options;\n\n const handleEntering =\n (callback: TransitionEnterHandler = noop, skipped: boolean) =>\n (appearing: boolean) => {\n callback(appearing);\n\n const popup = popupRef.current;\n if (!popup || skipped) {\n // Chrome does not trigger the scrollIntoView behavior correctly while\n // using a scale transition, so need to trigger this on the entered\n // flow to really make sure the item is in view.\n // An alternative would be to implement a custom scrollIntoView\n // behavior again like the previous versions of react-md, but this is\n // less lines of code\n const activeOption = document.getElementById(activeDescendantId);\n if (activeOption) {\n activeOption.scrollIntoView({ block: \"nearest\" });\n }\n return;\n }\n\n const focusables = getFocusableElements(popup, true);\n const index = getEnterDefaultFocusedIndex({\n focusLast: focusLast.current,\n focusables,\n currentFocusIndex: currentFocusIndex.current,\n });\n focusLast.current = false;\n currentFocusIndex.current = index;\n\n const option = focusables[index];\n if (!option) {\n return;\n }\n\n onFocusChange({\n index,\n element: option,\n });\n\n option.scrollIntoView({ block: \"nearest\" });\n setActiveDescendantId(option.id || \"\");\n };\n const handleExiting =\n (callback: TransitionExitHandler = noop, skipped: boolean) =>\n (): void => {\n callback();\n\n if (!skipped) {\n // since the menu is unmounted or set to hidden while not visible, need\n // to clear the aria-activedescendant and current focus index when\n // hiding\n currentFocusIndex.current = -1;\n setActiveDescendantId(\"\");\n }\n };\n\n const isTransitionCompleteSkipped =\n !disableTransition && !TRANSITION_CONFIG.disabled;\n\n return {\n onEntering: handleEntering(onEntering, false),\n onEntered: handleEntering(onEntered, isTransitionCompleteSkipped),\n onExiting: handleExiting(onExiting, false),\n onExited: handleExiting(onExited, isTransitionCompleteSkipped),\n };\n };\n\n const popupProps: ComboboxWidgetPopupProps<PopupEl> = {\n id: popupId,\n ref: popupRefCallback,\n role: popup,\n };\n\n return {\n show,\n hide,\n visible,\n setVisible,\n focusLast,\n popupRef,\n popupProps,\n comboboxRef,\n comboboxProps: {\n ...movementProps,\n \"aria-controls\": popupId,\n \"aria-disabled\": disabled || undefined,\n \"aria-expanded\": visible,\n \"aria-haspopup\": popup,\n id: comboboxId,\n ref: comboboxRefCallback,\n role: \"combobox\",\n },\n movementProps,\n movementContext,\n currentFocusIndex,\n activeDescendantId,\n setActiveDescendantId,\n getTransitionCallbacks,\n getMenuProps(props = {}) {\n const { sheetProps, disableTransition } = props;\n return {\n anchor: BELOW_CENTER_ANCHOR,\n width: \"min\",\n fixedTo: comboboxRef,\n ...props,\n ...popupProps,\n visible,\n onRequestClose: hide,\n ...getTransitionCallbacks(props),\n sheetProps: {\n ...sheetProps,\n ...getTransitionCallbacks({\n ...sheetProps,\n disableTransition:\n sheetProps?.disableTransition ?? disableTransition,\n }),\n },\n };\n },\n };\n}\n"],"names":["useRef","useKeyboardMovementProvider","BELOW_CENTER_ANCHOR","TRANSITION_CONFIG","useEnsuredId","useEnsuredRef","useToggle","tryToSubmitRelatedForm","noop","getNonDisabledOptions","container","querySelectorAll","useCombobox","options","form","popup","onClick","onFocus","onKeyDown","searchable","isNegativeOneAllowed","loopable","disabled","comboboxId","propComboboxId","comboboxRef","propComboboxRef","popupId","propPopupId","popupRef","propPopupRef","defaultVisible","onFocusChange","extendKeyDown","getFocusableElements","getEnterDefaultFocusedIndex","getDefaultFocusedIndex","toggled","visible","enable","show","disable","hide","setToggled","setVisible","comboboxRefCallback","popupRefCallback","focusLast","movementProps","movementContext","currentFocusIndex","activeDescendantId","setActiveDescendantId","event","movementData","isPropagationStopped","key","stopPropagation","preventDefault","current","programmatic","includeDisabled","tabIndexBehavior","getTransitionCallbacks","onEntered","onEntering","onExiting","onExited","disableTransition","handleEntering","callback","skipped","appearing","activeOption","document","getElementById","scrollIntoView","block","focusables","index","option","element","id","handleExiting","isTransitionCompleteSkipped","popupProps","ref","role","comboboxProps","undefined","getMenuProps","props","sheetProps","anchor","width","fixedTo","onRequestClose"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AACA,SACEA,MAAM,QASD,QAAQ;AAUf,SAASC,2BAA2B,QAAQ,6CAA6C;AACzF,SAASC,mBAAmB,QAAQ,8BAA8B;AAKlE,SAASC,iBAAiB,QAAQ,0BAA0B;AAW5D,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,aAAa,QAAQ,sBAAsB;AACpD,SAASC,SAAS,QAAQ,kBAAkB;AAC5C,SAASC,sBAAsB,QAAQ,aAAa;AAEpD,MAAMC,OAAO;AACX,aAAa;AACf;AAEA;;CAEC,GACD,OAAO,MAAMC,wBAAwB,CACnCC,YAC2B;WACxBA,UAAUC,gBAAgB,CAC3B;KAEH,CAAC;AAqNF;;CAEC,GACD,OAAO,SAASC,YAIdC,OAA6C;IAE7C,MAAM,EACJC,IAAI,EACJC,QAAQ,SAAS,EACjBC,UAAUR,IAAI,EACdS,OAAO,EACPC,SAAS,EACTC,UAAU,EACVC,oBAAoB,EACpBC,QAAQ,EACRC,QAAQ,EACRC,YAAYC,cAAc,EAC1BC,aAAaC,eAAe,EAC5BC,SAASC,WAAW,EACpBC,UAAUC,YAAY,EACtBC,iBAAiB,KAAK,EACtBC,gBAAgBxB,IAAI,EACpByB,gBAAgBzB,IAAI,EACpB0B,uBAAuBzB,qBAAqB,EAC5C0B,2BAA2B,EAC3BC,sBAAsB,EACvB,GAAGvB;IAEJ,MAAM,EACJwB,SAASC,OAAO,EAChBC,QAAQC,IAAI,EACZC,SAASC,IAAI,EACbC,YAAYC,UAAU,EACvB,GAAGtC,UAAUyB;IACd,MAAMJ,UAAUvB,aAAawB,aAAa;IAC1C,MAAML,aAAanB,aAAaoB,gBAAgB;IAChD,MAAM,CAACC,aAAaoB,oBAAoB,GAAGxC,cAAcqB;IACzD,MAAM,CAACG,UAAUiB,iBAAiB,GAAGzC,cAAcyB;IACnD,MAAMiB,YAAY/C,OAAO;IACzB,MAAM,EACJgD,aAAa,EACbC,eAAe,EACfC,iBAAiB,EACjBC,kBAAkB,EAClBC,qBAAqB,EACtB,GAAGnD,4BAAwC;QAC1CgB;QACAC;QACAF,SAAQqC,KAAK;YACXrC,QAAQqC;YACR,IAAI/B,UAAU;gBACZ;YACF;YAEAkB;QACF;QACAP,eAAcqB,YAAY;YACxBrB,cAAc;gBACZ,GAAGqB,YAAY;gBACfd;gBACAE;gBACAJ;gBACAS;YACF;YACA,MAAM,EAAEM,KAAK,EAAE,GAAGC;YAClB,IAAID,MAAME,oBAAoB,IAAI;gBAChC;YACF;YAEA,IAAIjB,SAAS;gBACX,OAAQe,MAAMG,GAAG;oBACf,KAAK;oBACL,KAAK;wBACHH,MAAMI,eAAe;wBACrBf;wBACA;oBACF,KAAK;wBACHW,MAAMK,cAAc;wBACpB;gBACJ;gBAEA,mEAAmE;gBACnE;YACF;YAEA,OAAQL,MAAMG,GAAG;gBACf,KAAK;gBACL,KAAK;oBACHH,MAAMK,cAAc;oBACpBL,MAAMI,eAAe;oBACrBV,UAAUY,OAAO,GAAGN,MAAMG,GAAG,KAAK;oBAClChB;oBACA;gBACF,KAAK;oBACHjC,uBAAuB8C,OAAOvC;oBAC9B;YACJ;QACF;QACAQ;QACAD;QACAF;QACAa;QACA4B,cAAc;QACdC,iBAAiB;QACjBC,kBAAkB;QAClB5B,sBAAqBxB,SAAS,EAAEkD,YAAY;YAC1C,MAAM7C,QAAQc,SAAS8B,OAAO;YAC9B,IAAI,CAAC5C,OAAO;gBACV,OAAO,EAAE;YACX;YAEA,OAAOmB,qBAAqBnB,SAASL,WAAWkD;QAClD;QACAxC;QACAgB;IACF;IACA,MAAM2B,yBAAyB,CAC7BlD,UAAqC,CAAC,CAAC;QAEvC,MAAM,EAAEmD,SAAS,EAAEC,UAAU,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,iBAAiB,EAAE,GACrEvD;QAEF,MAAMwD,iBACJ,CAACC,WAAmC9D,IAAI,EAAE+D,UAC1C,CAACC;gBACCF,SAASE;gBAET,MAAMzD,QAAQc,SAAS8B,OAAO;gBAC9B,IAAI,CAAC5C,SAASwD,SAAS;oBACrB,sEAAsE;oBACtE,mEAAmE;oBACnE,gDAAgD;oBAChD,+DAA+D;oBAC/D,qEAAqE;oBACrE,qBAAqB;oBACrB,MAAME,eAAeC,SAASC,cAAc,CAACxB;oBAC7C,IAAIsB,cAAc;wBAChBA,aAAaG,cAAc,CAAC;4BAAEC,OAAO;wBAAU;oBACjD;oBACA;gBACF;gBAEA,MAAMC,aAAa5C,qBAAqBnB,OAAO;gBAC/C,MAAMgE,QAAQ5C,4BAA4B;oBACxCY,WAAWA,UAAUY,OAAO;oBAC5BmB;oBACA5B,mBAAmBA,kBAAkBS,OAAO;gBAC9C;gBACAZ,UAAUY,OAAO,GAAG;gBACpBT,kBAAkBS,OAAO,GAAGoB;gBAE5B,MAAMC,SAASF,UAAU,CAACC,MAAM;gBAChC,IAAI,CAACC,QAAQ;oBACX;gBACF;gBAEAhD,cAAc;oBACZ+C;oBACAE,SAASD;gBACX;gBAEAA,OAAOJ,cAAc,CAAC;oBAAEC,OAAO;gBAAU;gBACzCzB,sBAAsB4B,OAAOE,EAAE,IAAI;YACrC;QACF,MAAMC,gBACJ,CAACb,WAAkC9D,IAAI,EAAE+D,UACzC;gBACED;gBAEA,IAAI,CAACC,SAAS;oBACZ,uEAAuE;oBACvE,kEAAkE;oBAClE,SAAS;oBACTrB,kBAAkBS,OAAO,GAAG,CAAC;oBAC7BP,sBAAsB;gBACxB;YACF;QAEF,MAAMgC,8BACJ,CAAChB,qBAAqB,CAACjE,kBAAkBmB,QAAQ;QAEnD,OAAO;YACL2C,YAAYI,eAAeJ,YAAY;YACvCD,WAAWK,eAAeL,WAAWoB;YACrClB,WAAWiB,cAAcjB,WAAW;YACpCC,UAAUgB,cAAchB,UAAUiB;QACpC;IACF;IAEA,MAAMC,aAAgD;QACpDH,IAAIvD;QACJ2D,KAAKxC;QACLyC,MAAMxE;IACR;IAEA,OAAO;QACLyB;QACAE;QACAJ;QACAM;QACAG;QACAlB;QACAwD;QACA5D;QACA+D,eAAe;YACb,GAAGxC,aAAa;YAChB,iBAAiBrB;YACjB,iBAAiBL,YAAYmE;YAC7B,iBAAiBnD;YACjB,iBAAiBvB;YACjBmE,IAAI3D;YACJ+D,KAAKzC;YACL0C,MAAM;QACR;QACAvC;QACAC;QACAC;QACAC;QACAC;QACAW;QACA2B,cAAaC,QAAQ,CAAC,CAAC;YACrB,MAAM,EAAEC,UAAU,EAAExB,iBAAiB,EAAE,GAAGuB;YAC1C,OAAO;gBACLE,QAAQ3F;gBACR4F,OAAO;gBACPC,SAAStE;gBACT,GAAGkE,KAAK;gBACR,GAAGN,UAAU;gBACb/C;gBACA0D,gBAAgBtD;gBAChB,GAAGqB,uBAAuB4B,MAAM;gBAChCC,YAAY;oBACV,GAAGA,UAAU;oBACb,GAAG7B,uBAAuB;wBACxB,GAAG6B,UAAU;wBACbxB,mBACEwB,YAAYxB,qBAAqBA;oBACrC,EAAE;gBACJ;YACF;QACF;IACF;AACF"}
|
|
1
|
+
{"version":3,"sources":["../../src/form/useCombobox.ts"],"sourcesContent":["\"use client\";\nimport {\n useRef,\n type FocusEventHandler,\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n type InputHTMLAttributes,\n type KeyboardEventHandler,\n type MouseEventHandler,\n type Ref,\n type RefCallback,\n type RefObject,\n} from \"react\";\nimport { type MenuProps } from \"../menu/Menu.js\";\nimport { type MenuSheetConfigurableProps } from \"../menu/MenuSheet.js\";\nimport {\n type GetDefaultFocusedIndex,\n type GetFocusableElements,\n type KeyboardMovementExtensionData,\n type KeyboardMovementProviderImplementation,\n type KeyboardMovementProviderOptions,\n} from \"../movement/types.js\";\nimport { useKeyboardMovementProvider } from \"../movement/useKeyboardMovementProvider.js\";\nimport { BELOW_CENTER_ANCHOR } from \"../positioning/constants.js\";\nimport {\n type PositionAnchor,\n type PositionWidth,\n} from \"../positioning/types.js\";\nimport { TRANSITION_CONFIG } from \"../transition/config.js\";\nimport {\n type TransitionCallbacks,\n type TransitionEnterHandler,\n type TransitionExitHandler,\n} from \"../transition/types.js\";\nimport {\n type NonNullMutableRef,\n type UseStateInitializer,\n type UseStateSetter,\n} from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport { useToggle } from \"../useToggle.js\";\nimport { tryToSubmitRelatedForm } from \"./utils.js\";\n\nconst noop = (): void => {\n // do nothing\n};\n\n/**\n * @since 6.0.0\n */\nexport const getNonDisabledOptions = (\n container: HTMLElement\n): readonly HTMLElement[] => [\n ...container.querySelectorAll<HTMLLIElement>(\n '[role=\"option\"]:not([aria-disabled])'\n ),\n];\n\n/**\n * @since 6.0.0\n */\nexport type SupportedComboboxPopup = \"listbox\" | \"grid\" | \"dialog\";\n\n/**\n * @since 6.0.0\n */\nexport interface ComboboxKeyboardMovementData<\n E extends HTMLElement = HTMLInputElement,\n> extends KeyboardMovementExtensionData<E> {\n show(): void;\n hide(): void;\n visible: boolean;\n focusLast: NonNullMutableRef<boolean>;\n}\n\n/**\n * @since 6.0.0\n */\nexport type ExtendComboboxKeyDown<E extends HTMLElement = HTMLInputElement> = (\n movementData: ComboboxKeyboardMovementData<E>\n) => void;\n\n/**\n * @since 6.0.0\n */\nexport type ComboboxKeyboardMovementOptions<\n ComboboxEl extends HTMLElement = HTMLInputElement,\n> = Pick<\n KeyboardMovementProviderOptions<ComboboxEl>,\n | \"onClick\"\n | \"onFocus\"\n | \"onKeyDown\"\n | \"disabled\"\n | \"loopable\"\n | \"searchable\"\n | \"onFocusChange\"\n | \"isNegativeOneAllowed\"\n>;\n\n/**\n * @since 6.0.0\n */\nexport interface BaseComboboxOptions<\n ComboboxEl extends HTMLElement = HTMLInputElement,\n PopupEl extends HTMLElement = HTMLElement,\n> extends ComboboxKeyboardMovementOptions<ComboboxEl> {\n /**\n * This is the {@link InputHTMLAttributes.form} attribute and is used to\n * attempt submitting a form when the enter key is pressed.\n */\n form?: string;\n\n /**\n * @defaultValue `\"combobox-popup-\" + useId()`\n */\n popupId?: string;\n popupRef?: Ref<PopupEl>;\n\n /**\n * @defaultValue `\"combobox-\" + useId()`\n */\n comboboxId?: string;\n comboboxRef?: Ref<ComboboxEl>;\n\n /**\n * @defaultValue `\"listbox\"`\n */\n popup?: \"listbox\" | \"grid\" | \"dialog\";\n\n /**\n * @defaultValue `false`\n */\n defaultVisible?: UseStateInitializer<boolean>;\n\n extendKeyDown?: ExtendComboboxKeyDown<ComboboxEl>;\n\n /**\n * @defaultValue {@link getNonDisabledOptions}\n */\n getFocusableElements?: GetFocusableElements;\n\n getDefaultFocusedIndex?: GetDefaultFocusedIndex;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ComboboxOptions<\n ComboboxEl extends HTMLElement = HTMLInputElement,\n PopupEl extends HTMLElement = HTMLElement,\n> extends BaseComboboxOptions<ComboboxEl, PopupEl> {\n getEnterDefaultFocusedIndex(options: {\n focusLast: boolean;\n focusables: readonly HTMLElement[];\n currentFocusIndex: number;\n }): number;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ComboboxWidgetProps<\n ComboboxEl extends HTMLElement = HTMLInputElement,\n> {\n \"aria-controls\": string;\n \"aria-disabled\": true | undefined;\n \"aria-expanded\": boolean;\n \"aria-haspopup\": SupportedComboboxPopup;\n id: string;\n ref: RefCallback<ComboboxEl>;\n role: \"combobox\";\n onClick: MouseEventHandler<ComboboxEl>;\n onFocus: FocusEventHandler<ComboboxEl>;\n onKeyDown: KeyboardEventHandler<ComboboxEl>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ComboboxWidgetPopupProps<\n PopupEl extends HTMLElement = HTMLElement,\n> {\n id: string;\n ref: RefCallback<PopupEl>;\n role: \"listbox\" | \"dialog\" | \"grid\";\n}\n\n/**\n * @since 6.0.0\n */\nexport type ComboboxTransitionCallbacks = Pick<\n TransitionCallbacks,\n \"onEntering\" | \"onEntered\" | \"onExiting\" | \"onExited\"\n>;\n\n/**\n * @since 6.0.0\n */\nexport interface ComboboxTransitionOptions extends ComboboxTransitionCallbacks {\n disableTransition?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport type ConfigurableComboboxMenuProps = Partial<\n Omit<MenuProps, \"visible\" | \"onRequestClose\" | keyof ComboboxWidgetPopupProps>\n>;\n\n/**\n * @since 6.0.0\n */\nexport interface ProvidedComboboxMenuProps<\n PopupEl extends HTMLElement = HTMLDivElement,\n> extends Required<ComboboxTransitionCallbacks>,\n ComboboxWidgetPopupProps<PopupEl> {\n visible: boolean;\n onRequestClose(): void;\n\n /** @defaultValue `\"min\"` */\n width: PositionWidth;\n\n /** @defaultValue `BELOW_CENTER_ANCHOR` */\n anchor: PositionAnchor;\n\n fixedTo: RefObject<HTMLElement>;\n\n sheetProps: MenuSheetConfigurableProps &\n Required<ComboboxTransitionCallbacks>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ComboboxMenuProps<PopupEl extends HTMLElement = HTMLDivElement>\n extends Omit<ConfigurableComboboxMenuProps, keyof ProvidedComboboxMenuProps>,\n ProvidedComboboxMenuProps<PopupEl> {}\n\n/**\n * Since the combobox usually uses the `Menu` as a popup element, this is a\n * helper util to create the required props and merge any additional props\n * with reasonable defaults.\n */\nexport type ComboboxGetMenuProps<PopupEl extends HTMLElement = HTMLDivElement> =\n (props?: ConfigurableComboboxMenuProps) => ComboboxMenuProps<PopupEl>;\n\n/**\n * @since 6.0.0\n */\nexport interface ComboboxImplementation<\n ComboboxEl extends HTMLElement = HTMLInputElement,\n PopupEl extends HTMLElement = HTMLElement,\n> extends KeyboardMovementProviderImplementation<ComboboxEl> {\n show(): void;\n hide(): void;\n visible: boolean;\n setVisible: UseStateSetter<boolean>;\n focusLast: NonNullMutableRef<boolean>;\n popupRef: RefObject<PopupEl>;\n popupProps: ComboboxWidgetPopupProps<PopupEl>;\n comboboxRef: RefObject<ComboboxEl>;\n comboboxProps: ComboboxWidgetProps<ComboboxEl>;\n\n getMenuProps: ComboboxGetMenuProps<PopupEl>;\n getTransitionCallbacks(\n options: ComboboxTransitionOptions\n ): Required<ComboboxTransitionCallbacks>;\n}\n\n/**\n * @since 6.0.0\n */\nexport function useCombobox<\n ComboboxEl extends HTMLElement = HTMLInputElement,\n PopupEl extends HTMLElement = HTMLElement,\n>(\n options: ComboboxOptions<ComboboxEl, PopupEl>\n): ComboboxImplementation<ComboboxEl, PopupEl> {\n const {\n form,\n popup = \"listbox\",\n onClick = noop,\n onFocus,\n onKeyDown,\n searchable,\n isNegativeOneAllowed,\n loopable,\n disabled,\n comboboxId: propComboboxId,\n comboboxRef: propComboboxRef,\n popupId: propPopupId,\n popupRef: propPopupRef,\n defaultVisible = false,\n onFocusChange = noop,\n extendKeyDown = noop,\n getFocusableElements = getNonDisabledOptions,\n getEnterDefaultFocusedIndex,\n getDefaultFocusedIndex,\n } = options;\n\n const {\n toggled: visible,\n enable: show,\n disable: hide,\n setToggled: setVisible,\n } = useToggle(defaultVisible);\n const popupId = useEnsuredId(propPopupId, \"combobox-popup\");\n const comboboxId = useEnsuredId(propComboboxId, \"combobox\");\n const [comboboxRef, comboboxRefCallback] = useEnsuredRef(propComboboxRef);\n const [popupRef, popupRefCallback] = useEnsuredRef(propPopupRef);\n const focusLast = useRef(false);\n const {\n movementProps,\n movementContext,\n currentFocusIndex,\n activeDescendantId,\n setActiveDescendantId,\n } = useKeyboardMovementProvider<ComboboxEl>({\n onFocus,\n onKeyDown,\n onClick(event) {\n onClick(event);\n if (disabled) {\n return;\n }\n\n show();\n },\n extendKeyDown(movementData) {\n extendKeyDown({\n ...movementData,\n show,\n hide,\n visible,\n focusLast,\n });\n const { event } = movementData;\n if (event.isPropagationStopped()) {\n return;\n }\n\n if (visible) {\n switch (event.key) {\n case \"Tab\":\n case \"Escape\":\n event.stopPropagation();\n hide();\n break;\n case \"Enter\":\n event.preventDefault();\n break;\n }\n\n // while visible, always use the default keyboard movement behavior\n return;\n }\n\n switch (event.key) {\n case \"ArrowUp\":\n case \"ArrowDown\":\n event.preventDefault();\n event.stopPropagation();\n focusLast.current = event.key === \"ArrowUp\";\n show();\n break;\n case \"Enter\":\n tryToSubmitRelatedForm(event, form);\n break;\n }\n },\n disabled,\n loopable,\n searchable,\n onFocusChange,\n programmatic: true,\n includeDisabled: false,\n tabIndexBehavior: \"virtual\",\n getFocusableElements(container, programmatic) {\n const popup = popupRef.current;\n if (!popup) {\n return [];\n }\n\n return getFocusableElements(popup || container, programmatic);\n },\n isNegativeOneAllowed,\n getDefaultFocusedIndex,\n });\n const getTransitionCallbacks = (\n options: ComboboxTransitionOptions = {}\n ): Required<ComboboxTransitionCallbacks> => {\n const { onEntered, onEntering, onExiting, onExited, disableTransition } =\n options;\n\n const handleEntering =\n (callback: TransitionEnterHandler = noop, skipped: boolean) =>\n (appearing: boolean) => {\n callback(appearing);\n\n const popup = popupRef.current;\n if (!popup || skipped) {\n // Chrome does not trigger the scrollIntoView behavior correctly while\n // using a scale transition, so need to trigger this on the entered\n // flow to really make sure the item is in view.\n // An alternative would be to implement a custom scrollIntoView\n // behavior again like the previous versions of react-md, but this is\n // less lines of code\n const activeOption = document.getElementById(activeDescendantId);\n if (activeOption) {\n activeOption.scrollIntoView({ block: \"nearest\" });\n }\n return;\n }\n\n const focusables = getFocusableElements(popup, true);\n const index = getEnterDefaultFocusedIndex({\n focusLast: focusLast.current,\n focusables,\n currentFocusIndex: currentFocusIndex.current,\n });\n focusLast.current = false;\n currentFocusIndex.current = index;\n\n const option = focusables[index];\n if (!option) {\n return;\n }\n\n onFocusChange({\n index,\n element: option,\n });\n\n option.scrollIntoView({ block: \"nearest\" });\n setActiveDescendantId(option.id || \"\");\n };\n const handleExiting =\n (callback: TransitionExitHandler = noop, skipped: boolean) =>\n (): void => {\n callback();\n\n if (!skipped) {\n // since the menu is unmounted or set to hidden while not visible, need\n // to clear the aria-activedescendant and current focus index when\n // hiding\n currentFocusIndex.current = -1;\n setActiveDescendantId(\"\");\n }\n };\n\n const isTransitionCompleteSkipped =\n !disableTransition && !TRANSITION_CONFIG.disabled;\n\n return {\n onEntering: handleEntering(onEntering, false),\n onEntered: handleEntering(onEntered, isTransitionCompleteSkipped),\n onExiting: handleExiting(onExiting, false),\n onExited: handleExiting(onExited, isTransitionCompleteSkipped),\n };\n };\n\n const popupProps: ComboboxWidgetPopupProps<PopupEl> = {\n id: popupId,\n ref: popupRefCallback,\n role: popup,\n };\n\n return {\n show,\n hide,\n visible,\n setVisible,\n focusLast,\n popupRef,\n popupProps,\n comboboxRef,\n comboboxProps: {\n ...movementProps,\n \"aria-controls\": popupId,\n \"aria-disabled\": disabled || undefined,\n \"aria-expanded\": visible,\n \"aria-haspopup\": popup,\n id: comboboxId,\n ref: comboboxRefCallback,\n role: \"combobox\",\n },\n movementProps,\n movementContext,\n currentFocusIndex,\n activeDescendantId,\n setActiveDescendantId,\n getTransitionCallbacks,\n getMenuProps(props = {}) {\n const { sheetProps, disableTransition } = props;\n return {\n anchor: BELOW_CENTER_ANCHOR,\n width: \"min\",\n fixedTo: comboboxRef,\n ...props,\n ...popupProps,\n visible,\n onRequestClose: hide,\n ...getTransitionCallbacks(props),\n sheetProps: {\n ...sheetProps,\n ...getTransitionCallbacks({\n ...sheetProps,\n disableTransition:\n sheetProps?.disableTransition ?? disableTransition,\n }),\n },\n };\n },\n };\n}\n"],"names":["useRef","useKeyboardMovementProvider","BELOW_CENTER_ANCHOR","TRANSITION_CONFIG","useEnsuredId","useEnsuredRef","useToggle","tryToSubmitRelatedForm","noop","getNonDisabledOptions","container","querySelectorAll","useCombobox","options","form","popup","onClick","onFocus","onKeyDown","searchable","isNegativeOneAllowed","loopable","disabled","comboboxId","propComboboxId","comboboxRef","propComboboxRef","popupId","propPopupId","popupRef","propPopupRef","defaultVisible","onFocusChange","extendKeyDown","getFocusableElements","getEnterDefaultFocusedIndex","getDefaultFocusedIndex","toggled","visible","enable","show","disable","hide","setToggled","setVisible","comboboxRefCallback","popupRefCallback","focusLast","movementProps","movementContext","currentFocusIndex","activeDescendantId","setActiveDescendantId","event","movementData","isPropagationStopped","key","stopPropagation","preventDefault","current","programmatic","includeDisabled","tabIndexBehavior","getTransitionCallbacks","onEntered","onEntering","onExiting","onExited","disableTransition","handleEntering","callback","skipped","appearing","activeOption","document","getElementById","scrollIntoView","block","focusables","index","option","element","id","handleExiting","isTransitionCompleteSkipped","popupProps","ref","role","comboboxProps","undefined","getMenuProps","props","sheetProps","anchor","width","fixedTo","onRequestClose"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/form/useEditableCombobox.ts"],"sourcesContent":["\"use client\";\nimport { useRef } from \"react\";\nimport { isTypeEvent } from \"../movement/utils.js\";\nimport {\n useCombobox,\n type BaseComboboxOptions,\n type ComboboxImplementation,\n} from \"./useCombobox.js\";\nimport { isChangeableHTMLElement, triggerManualChangeEvent } from \"./utils.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface EditableComboboxOptions<\n ComboboxEl extends HTMLElement = HTMLInputElement,\n PopupEl extends HTMLElement = HTMLElement,\n> extends BaseComboboxOptions<ComboboxEl, PopupEl> {}\n\n/**\n * @since 6.0.0\n */\nexport interface EditableComboboxImplementation<\n ComboboxEl extends HTMLElement = HTMLInputElement,\n PopupEl extends HTMLElement = HTMLElement,\n> extends ComboboxImplementation<ComboboxEl, PopupEl> {}\n\n/**\n * @since 6.0.0\n */\nexport function useEditableCombobox<\n ComboboxEl extends HTMLElement = HTMLInputElement,\n PopupEl extends HTMLElement = HTMLElement,\n>(\n options: EditableComboboxOptions<ComboboxEl, PopupEl> = {}\n): EditableComboboxImplementation<ComboboxEl, PopupEl> {\n const focusFirst = useRef(false);\n const { getMenuProps, ...combobox } = useCombobox({\n ...options,\n loopable: true,\n searchable: false,\n isNegativeOneAllowed: true,\n getEnterDefaultFocusedIndex(options) {\n const { focusLast, focusables, currentFocusIndex } = options;\n if (focusFirst.current) {\n focusFirst.current = false;\n return 0;\n }\n\n if (focusLast) {\n return focusables.length - 1;\n }\n\n return currentFocusIndex;\n },\n extendKeyDown(movementData) {\n const {\n event,\n show,\n hide,\n visible,\n currentFocusIndex,\n setActiveDescendantId,\n } = movementData;\n\n const resetFocus = (): void => {\n currentFocusIndex.current = -1;\n setActiveDescendantId(\"\");\n };\n\n switch (event.key) {\n case \"Escape\":\n if (!visible && isChangeableHTMLElement(event.currentTarget)) {\n event.preventDefault();\n event.stopPropagation();\n triggerManualChangeEvent(event.currentTarget, \"\");\n }\n break;\n case \"Home\":\n case \"End\":\n // do not attempt to jump to the start or end of the listbox so\n // natural text editing occurs\n event.stopPropagation();\n if (visible) {\n resetFocus();\n }\n break;\n case \"ArrowLeft\":\n case \"ArrowRight\":\n if (visible) {\n resetFocus();\n }\n break;\n case \"ArrowUp\":\n // Note: The non-altKey version is handled in the `useCombobox` hook\n //\n // if the popup is available and the altKey was pressed, return focus\n // to the combobox without closing. If the focus was already on the\n // combobox, hide the popup\n if (visible && event.altKey) {\n event.preventDefault();\n event.stopPropagation();\n\n if (currentFocusIndex.current !== -1) {\n resetFocus();\n } else {\n hide();\n }\n }\n break;\n case \"ArrowDown\":\n // if the popup is available, display the popup keep the focus on the\n // combobox if the altKey was pressed. Otherwise, move focus into the\n // listbox\n if (!visible) {\n event.preventDefault();\n event.stopPropagation();\n focusFirst.current = !event.altKey;\n show();\n }\n break;\n default:\n if (isTypeEvent(event)) {\n show();\n resetFocus();\n }\n }\n },\n });\n\n return {\n ...combobox,\n getMenuProps(props) {\n return {\n // override the inherited renderAsSheet context since the sheet makes it\n // so the user can't actually type in the combobox\n renderAsSheet: false,\n preventOverlap: true,\n ...getMenuProps(props),\n };\n },\n };\n}\n"],"names":["useRef","isTypeEvent","useCombobox","isChangeableHTMLElement","triggerManualChangeEvent","useEditableCombobox","options","focusFirst","getMenuProps","combobox","loopable","searchable","isNegativeOneAllowed","getEnterDefaultFocusedIndex","focusLast","focusables","currentFocusIndex","current","length","extendKeyDown","movementData","event","show","hide","visible","setActiveDescendantId","resetFocus","key","currentTarget","preventDefault","stopPropagation","altKey","props","renderAsSheet","preventOverlap"],"
|
|
1
|
+
{"version":3,"sources":["../../src/form/useEditableCombobox.ts"],"sourcesContent":["\"use client\";\nimport { useRef } from \"react\";\nimport { isTypeEvent } from \"../movement/utils.js\";\nimport {\n useCombobox,\n type BaseComboboxOptions,\n type ComboboxImplementation,\n} from \"./useCombobox.js\";\nimport { isChangeableHTMLElement, triggerManualChangeEvent } from \"./utils.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface EditableComboboxOptions<\n ComboboxEl extends HTMLElement = HTMLInputElement,\n PopupEl extends HTMLElement = HTMLElement,\n> extends BaseComboboxOptions<ComboboxEl, PopupEl> {}\n\n/**\n * @since 6.0.0\n */\nexport interface EditableComboboxImplementation<\n ComboboxEl extends HTMLElement = HTMLInputElement,\n PopupEl extends HTMLElement = HTMLElement,\n> extends ComboboxImplementation<ComboboxEl, PopupEl> {}\n\n/**\n * @since 6.0.0\n */\nexport function useEditableCombobox<\n ComboboxEl extends HTMLElement = HTMLInputElement,\n PopupEl extends HTMLElement = HTMLElement,\n>(\n options: EditableComboboxOptions<ComboboxEl, PopupEl> = {}\n): EditableComboboxImplementation<ComboboxEl, PopupEl> {\n const focusFirst = useRef(false);\n const { getMenuProps, ...combobox } = useCombobox({\n ...options,\n loopable: true,\n searchable: false,\n isNegativeOneAllowed: true,\n getEnterDefaultFocusedIndex(options) {\n const { focusLast, focusables, currentFocusIndex } = options;\n if (focusFirst.current) {\n focusFirst.current = false;\n return 0;\n }\n\n if (focusLast) {\n return focusables.length - 1;\n }\n\n return currentFocusIndex;\n },\n extendKeyDown(movementData) {\n const {\n event,\n show,\n hide,\n visible,\n currentFocusIndex,\n setActiveDescendantId,\n } = movementData;\n\n const resetFocus = (): void => {\n currentFocusIndex.current = -1;\n setActiveDescendantId(\"\");\n };\n\n switch (event.key) {\n case \"Escape\":\n if (!visible && isChangeableHTMLElement(event.currentTarget)) {\n event.preventDefault();\n event.stopPropagation();\n triggerManualChangeEvent(event.currentTarget, \"\");\n }\n break;\n case \"Home\":\n case \"End\":\n // do not attempt to jump to the start or end of the listbox so\n // natural text editing occurs\n event.stopPropagation();\n if (visible) {\n resetFocus();\n }\n break;\n case \"ArrowLeft\":\n case \"ArrowRight\":\n if (visible) {\n resetFocus();\n }\n break;\n case \"ArrowUp\":\n // Note: The non-altKey version is handled in the `useCombobox` hook\n //\n // if the popup is available and the altKey was pressed, return focus\n // to the combobox without closing. If the focus was already on the\n // combobox, hide the popup\n if (visible && event.altKey) {\n event.preventDefault();\n event.stopPropagation();\n\n if (currentFocusIndex.current !== -1) {\n resetFocus();\n } else {\n hide();\n }\n }\n break;\n case \"ArrowDown\":\n // if the popup is available, display the popup keep the focus on the\n // combobox if the altKey was pressed. Otherwise, move focus into the\n // listbox\n if (!visible) {\n event.preventDefault();\n event.stopPropagation();\n focusFirst.current = !event.altKey;\n show();\n }\n break;\n default:\n if (isTypeEvent(event)) {\n show();\n resetFocus();\n }\n }\n },\n });\n\n return {\n ...combobox,\n getMenuProps(props) {\n return {\n // override the inherited renderAsSheet context since the sheet makes it\n // so the user can't actually type in the combobox\n renderAsSheet: false,\n preventOverlap: true,\n ...getMenuProps(props),\n };\n },\n };\n}\n"],"names":["useRef","isTypeEvent","useCombobox","isChangeableHTMLElement","triggerManualChangeEvent","useEditableCombobox","options","focusFirst","getMenuProps","combobox","loopable","searchable","isNegativeOneAllowed","getEnterDefaultFocusedIndex","focusLast","focusables","currentFocusIndex","current","length","extendKeyDown","movementData","event","show","hide","visible","setActiveDescendantId","resetFocus","key","currentTarget","preventDefault","stopPropagation","altKey","props","renderAsSheet","preventOverlap"],"mappings":"AAAA;AACA,SAASA,MAAM,QAAQ,QAAQ;AAC/B,SAASC,WAAW,QAAQ,uBAAuB;AACnD,SACEC,WAAW,QAGN,mBAAmB;AAC1B,SAASC,uBAAuB,EAAEC,wBAAwB,QAAQ,aAAa;AAkB/E;;CAEC,GACD,OAAO,SAASC,oBAIdC,UAAwD,CAAC,CAAC;IAE1D,MAAMC,aAAaP,OAAO;IAC1B,MAAM,EAAEQ,YAAY,EAAE,GAAGC,UAAU,GAAGP,YAAY;QAChD,GAAGI,OAAO;QACVI,UAAU;QACVC,YAAY;QACZC,sBAAsB;QACtBC,6BAA4BP,OAAO;YACjC,MAAM,EAAEQ,SAAS,EAAEC,UAAU,EAAEC,iBAAiB,EAAE,GAAGV;YACrD,IAAIC,WAAWU,OAAO,EAAE;gBACtBV,WAAWU,OAAO,GAAG;gBACrB,OAAO;YACT;YAEA,IAAIH,WAAW;gBACb,OAAOC,WAAWG,MAAM,GAAG;YAC7B;YAEA,OAAOF;QACT;QACAG,eAAcC,YAAY;YACxB,MAAM,EACJC,KAAK,EACLC,IAAI,EACJC,IAAI,EACJC,OAAO,EACPR,iBAAiB,EACjBS,qBAAqB,EACtB,GAAGL;YAEJ,MAAMM,aAAa;gBACjBV,kBAAkBC,OAAO,GAAG,CAAC;gBAC7BQ,sBAAsB;YACxB;YAEA,OAAQJ,MAAMM,GAAG;gBACf,KAAK;oBACH,IAAI,CAACH,WAAWrB,wBAAwBkB,MAAMO,aAAa,GAAG;wBAC5DP,MAAMQ,cAAc;wBACpBR,MAAMS,eAAe;wBACrB1B,yBAAyBiB,MAAMO,aAAa,EAAE;oBAChD;oBACA;gBACF,KAAK;gBACL,KAAK;oBACH,+DAA+D;oBAC/D,8BAA8B;oBAC9BP,MAAMS,eAAe;oBACrB,IAAIN,SAAS;wBACXE;oBACF;oBACA;gBACF,KAAK;gBACL,KAAK;oBACH,IAAIF,SAAS;wBACXE;oBACF;oBACA;gBACF,KAAK;oBACH,oEAAoE;oBACpE,EAAE;oBACF,qEAAqE;oBACrE,mEAAmE;oBACnE,2BAA2B;oBAC3B,IAAIF,WAAWH,MAAMU,MAAM,EAAE;wBAC3BV,MAAMQ,cAAc;wBACpBR,MAAMS,eAAe;wBAErB,IAAId,kBAAkBC,OAAO,KAAK,CAAC,GAAG;4BACpCS;wBACF,OAAO;4BACLH;wBACF;oBACF;oBACA;gBACF,KAAK;oBACH,qEAAqE;oBACrE,qEAAqE;oBACrE,UAAU;oBACV,IAAI,CAACC,SAAS;wBACZH,MAAMQ,cAAc;wBACpBR,MAAMS,eAAe;wBACrBvB,WAAWU,OAAO,GAAG,CAACI,MAAMU,MAAM;wBAClCT;oBACF;oBACA;gBACF;oBACE,IAAIrB,YAAYoB,QAAQ;wBACtBC;wBACAI;oBACF;YACJ;QACF;IACF;IAEA,OAAO;QACL,GAAGjB,QAAQ;QACXD,cAAawB,KAAK;YAChB,OAAO;gBACL,wEAAwE;gBACxE,kDAAkD;gBAClDC,eAAe;gBACfC,gBAAgB;gBAChB,GAAG1B,aAAawB,MAAM;YACxB;QACF;IACF;AACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/form/useFileUpload.ts"],"sourcesContent":["\"use client\";\nimport { nanoid } from \"nanoid\";\nimport {\n useCallback,\n useEffect,\n useReducer,\n type ChangeEvent,\n type DragEvent,\n} from \"react\";\nimport {\n FileAccessError,\n getFileParser as defaultGetFileParser,\n isValidFileName as defaultIsValidFileName,\n validateFiles as defaultValidateFiles,\n type CompletedFileUploadStats,\n type FileReaderResult,\n type FileUploadHandlers,\n type FileUploadStats,\n type FileValidationError,\n type FileValidationOptions,\n type FilesValidator,\n type GetFileParser,\n type ProcessingFileUploadStats,\n} from \"./fileUtils.js\";\n\nconst noop = (): void => {\n // do nothing\n};\n\n/**\n *\n * @typeParam CustomError - An optional error type that gets returned from the\n * {@link FilesValidator}.\n * @since 2.9.0\n */\nexport interface FileUploadState<CustomError = never> {\n /**\n * All the files that have been validated and are either:\n * - pending upload\n * - uploading\n * - complete\n *\n * Each key in this object is the {@link BaseFileUploadStats.key} generated\n * once the upload starts pending.\n */\n stats: Readonly<Record<string, Readonly<FileUploadStats>>>;\n\n /**\n * A list of validation errors that have occurred before starting the upload\n * process.\n *\n * @see {@link FileAccessError}\n * @see {@link TooManyFilesError}\n * @see {@link FileValidationError}\n */\n errors: readonly FileValidationError<CustomError>[];\n}\n\n/**\n *\n * @typeParam CustomError - An optional error type that gets returned from the\n * {@link FilesValidator}.\n * @since 2.9.0\n * @internal\n */\nexport interface FileUploadHookState<CustomError = never>\n extends FileUploadState<CustomError> {\n /**\n * All the current readers used for uploading files to the browser.\n *\n * Note: Once an upload has completed, the reader will be removed.\n */\n readers: Readonly<Record<string, FileReader>>;\n}\n\n/**\n *\n * @typeParam E - An optional HTMLElement type that is used for the\n * {@link FileUploadHandlers}.\n * @typeParam CustomError - An optional error type that gets returned from the\n * {@link FilesValidator}.\n * @since 2.9.0\n */\nexport interface FileUploadOptions<E extends HTMLElement, CustomError = never>\n extends FileUploadHandlers<E>,\n FileValidationOptions {\n /**\n * Setting this value to a number greater than `0` will update the browser\n * upload process to queue the uploads in chunks instead of all at once. This\n * can help prevent the browser from freezing if dealing with large files that\n * are being converted to data urls.\n *\n * @defaultValue `-1`\n */\n concurrency?: number;\n\n /** {@inheritDoc FilesValidator} */\n validateFiles?: FilesValidator<CustomError>;\n /** {@inheritDoc GetFileParser} */\n getFileParser?: GetFileParser;\n}\n\n/** @internal */\ntype Action<E = never> =\n | {\n type: \"queue\";\n errors: readonly FileValidationError<E>[];\n files: readonly File[];\n }\n | { type: \"reset\" }\n | { type: \"remove\"; files: readonly string[] }\n | { type: \"start\"; key: string; reader: FileReader }\n | { type: \"progress\"; key: string; progress: number }\n | { type: \"complete\"; key: string; result: FileReaderResult }\n | { type: \"clearErrors\" };\n\n/** @since 2.9.0 */\nexport interface FileUploadActions {\n /**\n * Reset everything related to uploads ensuring that all file readers have\n * been aborted.\n */\n reset(): void;\n\n /**\n * Removes all the errors that exist in state without cancelling any of the\n * uploads already in progress.\n */\n clearErrors(): void;\n\n /**\n * This function is used to cancel pending and uploading files or removing\n * completed files.\n *\n * @param keyOrKeys - A single or list of {@link BaseFileUploadStats.key} to\n * remove from state.\n */\n remove(keyOrKeys: string | readonly string[]): void;\n}\n\n/**\n *\n * @typeParam E - An optional HTMLElement type that is used for the\n * {@link FileUploadHandlers}.\n * @typeParam CustomError - An optional error type that gets returned from the\n * {@link FilesValidator}.\n * @since 2.9.0\n */\nexport interface FileUploadHookReturnValue<\n E extends HTMLElement = HTMLElement,\n CustomError = never,\n> extends FileUploadActions,\n Required<FileUploadHandlers<E>> {\n /** {@inheritDoc FileUploadState.errors} */\n errors: readonly FileValidationError<CustomError>[];\n\n /**\n * A list of all the {@link FileUploadStats}.\n *\n * @see {@link getSplitFileUploads} for separating by status\n */\n stats: readonly Readonly<FileUploadStats>[];\n\n /**\n * The total number of bytes for all the files that exist in the\n * {@link stats} list.\n */\n totalBytes: number;\n\n /**\n * The total number of files in the {@link stats} list.\n */\n totalFiles: number;\n\n /**\n * An `accept` string that can be passed to the {@link FileInput} component\n * when the {@link FileValidationOptions.extensions} list has been provided to\n * limit which files the OS will _attempt_ to allow access to.\n *\n * @example Simple example\n * ```ts\n * const extensions = ['pdf', 'docx', 'ppt'];\n * const { accept } = useFileUpload({ extensions, ...others });\n *\n * expect(accept).toBe(\"*.pdf,*.docx,*.ppt\")\n * ```\n *\n * @defaultValue `\"*\"`\n */\n accept: string;\n}\n\n/** @internal */\nconst EMPTY_LIST = [] as const;\n/** @internal */\nconst EMPTY_OBJECT = {} as const;\n\n/**\n * This hook is generally used to upload files **to the browser** in different\n * formats to be previewed `<img>`, `<video>`, `<embed>`, etc tags. However, it\n * can also be used to upload the files as an `ArrayBuffer` and then uploaded to\n * a server.\n *\n * Note: If using the `aws-sdk` to upload files directly to S3, **do not use\n * this hook** since it uses its own upload process.\n *\n * @typeParam E - An optional HTMLElement type that is used for the\n * {@link FileUploadHandlers}.\n * @typeParam CustomError - An optional error type that gets returned from the\n * {@link FilesValidator}.\n * @param options - All the {@link FileUploadOptions}\n * @returns the {@link FileUploadHookReturnValue}\n * @since 2.9.0\n */\nexport function useFileUpload<E extends HTMLElement, CustomError = never>({\n maxFiles = -1,\n extensions = EMPTY_LIST,\n minFileSize = -1,\n maxFileSize = -1,\n totalFileSize = -1,\n concurrency = -1,\n onDrop: propOnDrop = noop,\n onChange: propOnChange = noop,\n validateFiles = defaultValidateFiles,\n getFileParser = defaultGetFileParser,\n isValidFileName = defaultIsValidFileName,\n}: FileUploadOptions<E, CustomError> = {}): Readonly<\n FileUploadHookReturnValue<E, CustomError>\n> {\n const [state, dispatch] = useReducer(\n function reducer(\n state: FileUploadHookState<CustomError>,\n action: Action<CustomError>\n ): FileUploadHookState<CustomError> {\n switch (action.type) {\n case \"reset\":\n // need to reuse constants so that calling reset doesn't cause an\n // infinite loop in an effect\n return {\n stats: EMPTY_OBJECT,\n errors: EMPTY_LIST,\n readers: EMPTY_OBJECT,\n };\n case \"remove\": {\n const stats: Record<string, FileUploadStats> = {};\n for (const key in state.stats) {\n if (!action.files.includes(key)) {\n stats[key] = state.stats[key];\n }\n }\n\n return {\n ...state,\n stats,\n };\n }\n case \"queue\":\n return {\n ...state,\n stats: {\n ...state.stats,\n ...action.files.reduce<Record<string, ProcessingFileUploadStats>>(\n (files, file) => {\n const key = nanoid();\n files[key] = {\n key,\n file,\n progress: 0,\n status: \"pending\",\n };\n\n return files;\n },\n {}\n ),\n },\n errors: [...state.errors, ...action.errors],\n };\n case \"start\": {\n const { key, reader } = action;\n const fileStats: ProcessingFileUploadStats = {\n key,\n file: state.stats[key].file,\n progress: 0,\n status: \"uploading\",\n };\n\n return {\n ...state,\n readers: {\n ...state.readers,\n [key]: reader,\n },\n stats: {\n ...state.stats,\n [key]: fileStats,\n },\n };\n }\n case \"progress\": {\n const { key, progress } = action;\n return {\n ...state,\n stats: {\n ...state.stats,\n [key]: {\n ...state.stats[key],\n progress,\n },\n },\n };\n }\n case \"complete\": {\n const { key, result } = action;\n const file: CompletedFileUploadStats = {\n key,\n file: state.stats[key].file,\n status: \"complete\",\n result,\n progress: 100,\n };\n const { [key]: _reader, ...readers } = state.readers;\n\n return {\n ...state,\n readers,\n stats: {\n ...state.stats,\n [key]: file,\n },\n };\n }\n case \"clearErrors\":\n return { ...state, errors: [] };\n }\n },\n {\n stats: EMPTY_OBJECT,\n errors: EMPTY_LIST,\n readers: EMPTY_OBJECT,\n }\n );\n const { stats, errors, readers } = state;\n\n const statsList = Object.values(stats);\n const totalFiles = statsList.length;\n const totalBytes = statsList.reduce(\n (result, { file: { size } }) => result + size,\n 0\n );\n const queueFiles = useCallback(\n (files: readonly File[]) => {\n const { pending, errors } = validateFiles(files, {\n maxFiles,\n extensions,\n minFileSize,\n maxFileSize,\n totalBytes,\n totalFiles,\n totalFileSize,\n isValidFileName,\n });\n\n dispatch({ type: \"queue\", errors, files: pending });\n },\n [\n validateFiles,\n maxFiles,\n extensions,\n minFileSize,\n maxFileSize,\n totalBytes,\n totalFiles,\n totalFileSize,\n isValidFileName,\n ]\n );\n const onDrop = useCallback(\n (event: DragEvent<E>) => {\n propOnDrop(event);\n event.preventDefault();\n event.stopPropagation();\n\n try {\n const files = event.dataTransfer.files;\n if (files) {\n queueFiles(Array.from(files));\n }\n } catch (e) {\n dispatch({\n type: \"queue\",\n files: [],\n errors: [\n new FileAccessError(e instanceof Error ? e.message : undefined),\n ],\n });\n }\n },\n [queueFiles, propOnDrop]\n );\n const onChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n propOnChange(event);\n try {\n const files = event.currentTarget.files;\n if (files) {\n queueFiles(Array.from(files));\n } else {\n throw new Error();\n }\n } catch (e) {\n dispatch({\n type: \"queue\",\n files: [],\n errors: [\n new FileAccessError(e instanceof Error ? e.message : undefined),\n ],\n });\n }\n },\n [queueFiles, propOnChange]\n );\n\n const remove = useCallback(\n (keyOrKeys: string | readonly string[]) => {\n const files = typeof keyOrKeys === \"string\" ? [keyOrKeys] : keyOrKeys;\n files.forEach((fileKey) => {\n readers[fileKey]?.abort();\n });\n\n dispatch({ type: \"remove\", files });\n },\n [readers]\n );\n const reset = useCallback(() => {\n Object.values(readers).forEach((reader) => {\n reader.abort();\n });\n\n dispatch({ type: \"reset\" });\n }, [readers]);\n const clearErrors = useCallback(() => {\n dispatch({ type: \"clearErrors\" });\n }, []);\n const start = useCallback((key: string, reader: FileReader) => {\n dispatch({ type: \"start\", key, reader });\n }, []);\n const complete = useCallback(\n (key: string, result: FileReaderResult = null) => {\n dispatch({ type: \"complete\", key, result });\n },\n []\n );\n const createProgressEventHandler = useCallback(\n (key: string) => (event: ProgressEvent) => {\n if (event.lengthComputable) {\n const percentage = Math.round((event.loaded * 100) / event.total);\n dispatch({ type: \"progress\", key, progress: percentage });\n }\n },\n []\n );\n\n useEffect(() => {\n const pending: ProcessingFileUploadStats[] = [];\n const uploading: ProcessingFileUploadStats[] = [];\n Object.values(stats).forEach((file) => {\n if (file.status === \"pending\") {\n pending.push(file);\n } else if (file.status === \"uploading\") {\n uploading.push(file);\n }\n });\n\n const lastIndex =\n concurrency === -1\n ? pending.length\n : Math.max(0, concurrency - uploading.length);\n const queue = pending.slice(0, lastIndex);\n if (!queue.length) {\n return;\n }\n\n queue.forEach((stats) => {\n const { key, file } = stats;\n const reader = new FileReader();\n\n // using `addEventListener` instead of directly setting to\n // `reader.progress`/`reader.load` so it's easier to test\n reader.addEventListener(\"progress\", createProgressEventHandler(key));\n reader.addEventListener(\"load\", () => {\n complete(key, reader.result);\n });\n\n start(key, reader);\n const parser = getFileParser(file);\n /* istanbul ignore next */\n if (\n process.env.NODE_ENV !== \"production\" &&\n ![\n \"readAsText\",\n \"readAsDataURL\",\n \"readAsArrayBuffer\",\n \"readAsBinaryString\",\n ].includes(parser)\n ) {\n throw new Error(\"Invalid file reader parser\");\n }\n\n reader[parser](file);\n });\n }, [\n concurrency,\n stats,\n getFileParser,\n createProgressEventHandler,\n start,\n complete,\n ]);\n\n let accept = \"\";\n if (extensions.length) {\n accept = extensions.reduce((s, ext) => `${s ? `${s},` : \"\"}.${ext}`, \"\");\n }\n\n return {\n stats: statsList,\n errors,\n accept,\n totalBytes,\n totalFiles,\n onDrop,\n onChange,\n reset,\n remove,\n clearErrors,\n };\n}\n"],"names":["nanoid","useCallback","useEffect","useReducer","FileAccessError","getFileParser","defaultGetFileParser","isValidFileName","defaultIsValidFileName","validateFiles","defaultValidateFiles","noop","EMPTY_LIST","EMPTY_OBJECT","useFileUpload","maxFiles","extensions","minFileSize","maxFileSize","totalFileSize","concurrency","onDrop","propOnDrop","onChange","propOnChange","state","dispatch","reducer","action","type","stats","errors","readers","key","files","includes","reduce","file","progress","status","reader","fileStats","result","_reader","statsList","Object","values","totalFiles","length","totalBytes","size","queueFiles","pending","event","preventDefault","stopPropagation","dataTransfer","Array","from","e","Error","message","undefined","currentTarget","remove","keyOrKeys","forEach","fileKey","abort","reset","clearErrors","start","complete","createProgressEventHandler","lengthComputable","percentage","Math","round","loaded","total","uploading","push","lastIndex","max","queue","slice","FileReader","addEventListener","parser","process","env","NODE_ENV","accept","s","ext"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../src/form/useFileUpload.ts"],"sourcesContent":["\"use client\";\nimport { nanoid } from \"nanoid\";\nimport {\n useCallback,\n useEffect,\n useReducer,\n type ChangeEvent,\n type DragEvent,\n} from \"react\";\nimport {\n FileAccessError,\n getFileParser as defaultGetFileParser,\n isValidFileName as defaultIsValidFileName,\n validateFiles as defaultValidateFiles,\n type CompletedFileUploadStats,\n type FileReaderResult,\n type FileUploadHandlers,\n type FileUploadStats,\n type FileValidationError,\n type FileValidationOptions,\n type FilesValidator,\n type GetFileParser,\n type ProcessingFileUploadStats,\n} from \"./fileUtils.js\";\n\nconst noop = (): void => {\n // do nothing\n};\n\n/**\n *\n * @typeParam CustomError - An optional error type that gets returned from the\n * {@link FilesValidator}.\n * @since 2.9.0\n */\nexport interface FileUploadState<CustomError = never> {\n /**\n * All the files that have been validated and are either:\n * - pending upload\n * - uploading\n * - complete\n *\n * Each key in this object is the {@link BaseFileUploadStats.key} generated\n * once the upload starts pending.\n */\n stats: Readonly<Record<string, Readonly<FileUploadStats>>>;\n\n /**\n * A list of validation errors that have occurred before starting the upload\n * process.\n *\n * @see {@link FileAccessError}\n * @see {@link TooManyFilesError}\n * @see {@link FileValidationError}\n */\n errors: readonly FileValidationError<CustomError>[];\n}\n\n/**\n *\n * @typeParam CustomError - An optional error type that gets returned from the\n * {@link FilesValidator}.\n * @since 2.9.0\n * @internal\n */\nexport interface FileUploadHookState<CustomError = never>\n extends FileUploadState<CustomError> {\n /**\n * All the current readers used for uploading files to the browser.\n *\n * Note: Once an upload has completed, the reader will be removed.\n */\n readers: Readonly<Record<string, FileReader>>;\n}\n\n/**\n *\n * @typeParam E - An optional HTMLElement type that is used for the\n * {@link FileUploadHandlers}.\n * @typeParam CustomError - An optional error type that gets returned from the\n * {@link FilesValidator}.\n * @since 2.9.0\n */\nexport interface FileUploadOptions<E extends HTMLElement, CustomError = never>\n extends FileUploadHandlers<E>,\n FileValidationOptions {\n /**\n * Setting this value to a number greater than `0` will update the browser\n * upload process to queue the uploads in chunks instead of all at once. This\n * can help prevent the browser from freezing if dealing with large files that\n * are being converted to data urls.\n *\n * @defaultValue `-1`\n */\n concurrency?: number;\n\n /** {@inheritDoc FilesValidator} */\n validateFiles?: FilesValidator<CustomError>;\n /** {@inheritDoc GetFileParser} */\n getFileParser?: GetFileParser;\n}\n\n/** @internal */\ntype Action<E = never> =\n | {\n type: \"queue\";\n errors: readonly FileValidationError<E>[];\n files: readonly File[];\n }\n | { type: \"reset\" }\n | { type: \"remove\"; files: readonly string[] }\n | { type: \"start\"; key: string; reader: FileReader }\n | { type: \"progress\"; key: string; progress: number }\n | { type: \"complete\"; key: string; result: FileReaderResult }\n | { type: \"clearErrors\" };\n\n/** @since 2.9.0 */\nexport interface FileUploadActions {\n /**\n * Reset everything related to uploads ensuring that all file readers have\n * been aborted.\n */\n reset(): void;\n\n /**\n * Removes all the errors that exist in state without cancelling any of the\n * uploads already in progress.\n */\n clearErrors(): void;\n\n /**\n * This function is used to cancel pending and uploading files or removing\n * completed files.\n *\n * @param keyOrKeys - A single or list of {@link BaseFileUploadStats.key} to\n * remove from state.\n */\n remove(keyOrKeys: string | readonly string[]): void;\n}\n\n/**\n *\n * @typeParam E - An optional HTMLElement type that is used for the\n * {@link FileUploadHandlers}.\n * @typeParam CustomError - An optional error type that gets returned from the\n * {@link FilesValidator}.\n * @since 2.9.0\n */\nexport interface FileUploadHookReturnValue<\n E extends HTMLElement = HTMLElement,\n CustomError = never,\n> extends FileUploadActions,\n Required<FileUploadHandlers<E>> {\n /** {@inheritDoc FileUploadState.errors} */\n errors: readonly FileValidationError<CustomError>[];\n\n /**\n * A list of all the {@link FileUploadStats}.\n *\n * @see {@link getSplitFileUploads} for separating by status\n */\n stats: readonly Readonly<FileUploadStats>[];\n\n /**\n * The total number of bytes for all the files that exist in the\n * {@link stats} list.\n */\n totalBytes: number;\n\n /**\n * The total number of files in the {@link stats} list.\n */\n totalFiles: number;\n\n /**\n * An `accept` string that can be passed to the {@link FileInput} component\n * when the {@link FileValidationOptions.extensions} list has been provided to\n * limit which files the OS will _attempt_ to allow access to.\n *\n * @example Simple example\n * ```ts\n * const extensions = ['pdf', 'docx', 'ppt'];\n * const { accept } = useFileUpload({ extensions, ...others });\n *\n * expect(accept).toBe(\"*.pdf,*.docx,*.ppt\")\n * ```\n *\n * @defaultValue `\"*\"`\n */\n accept: string;\n}\n\n/** @internal */\nconst EMPTY_LIST = [] as const;\n/** @internal */\nconst EMPTY_OBJECT = {} as const;\n\n/**\n * This hook is generally used to upload files **to the browser** in different\n * formats to be previewed `<img>`, `<video>`, `<embed>`, etc tags. However, it\n * can also be used to upload the files as an `ArrayBuffer` and then uploaded to\n * a server.\n *\n * Note: If using the `aws-sdk` to upload files directly to S3, **do not use\n * this hook** since it uses its own upload process.\n *\n * @typeParam E - An optional HTMLElement type that is used for the\n * {@link FileUploadHandlers}.\n * @typeParam CustomError - An optional error type that gets returned from the\n * {@link FilesValidator}.\n * @param options - All the {@link FileUploadOptions}\n * @returns the {@link FileUploadHookReturnValue}\n * @since 2.9.0\n */\nexport function useFileUpload<E extends HTMLElement, CustomError = never>({\n maxFiles = -1,\n extensions = EMPTY_LIST,\n minFileSize = -1,\n maxFileSize = -1,\n totalFileSize = -1,\n concurrency = -1,\n onDrop: propOnDrop = noop,\n onChange: propOnChange = noop,\n validateFiles = defaultValidateFiles,\n getFileParser = defaultGetFileParser,\n isValidFileName = defaultIsValidFileName,\n}: FileUploadOptions<E, CustomError> = {}): Readonly<\n FileUploadHookReturnValue<E, CustomError>\n> {\n const [state, dispatch] = useReducer(\n function reducer(\n state: FileUploadHookState<CustomError>,\n action: Action<CustomError>\n ): FileUploadHookState<CustomError> {\n switch (action.type) {\n case \"reset\":\n // need to reuse constants so that calling reset doesn't cause an\n // infinite loop in an effect\n return {\n stats: EMPTY_OBJECT,\n errors: EMPTY_LIST,\n readers: EMPTY_OBJECT,\n };\n case \"remove\": {\n const stats: Record<string, FileUploadStats> = {};\n for (const key in state.stats) {\n if (!action.files.includes(key)) {\n stats[key] = state.stats[key];\n }\n }\n\n return {\n ...state,\n stats,\n };\n }\n case \"queue\":\n return {\n ...state,\n stats: {\n ...state.stats,\n ...action.files.reduce<Record<string, ProcessingFileUploadStats>>(\n (files, file) => {\n const key = nanoid();\n files[key] = {\n key,\n file,\n progress: 0,\n status: \"pending\",\n };\n\n return files;\n },\n {}\n ),\n },\n errors: [...state.errors, ...action.errors],\n };\n case \"start\": {\n const { key, reader } = action;\n const fileStats: ProcessingFileUploadStats = {\n key,\n file: state.stats[key].file,\n progress: 0,\n status: \"uploading\",\n };\n\n return {\n ...state,\n readers: {\n ...state.readers,\n [key]: reader,\n },\n stats: {\n ...state.stats,\n [key]: fileStats,\n },\n };\n }\n case \"progress\": {\n const { key, progress } = action;\n return {\n ...state,\n stats: {\n ...state.stats,\n [key]: {\n ...state.stats[key],\n progress,\n },\n },\n };\n }\n case \"complete\": {\n const { key, result } = action;\n const file: CompletedFileUploadStats = {\n key,\n file: state.stats[key].file,\n status: \"complete\",\n result,\n progress: 100,\n };\n const { [key]: _reader, ...readers } = state.readers;\n\n return {\n ...state,\n readers,\n stats: {\n ...state.stats,\n [key]: file,\n },\n };\n }\n case \"clearErrors\":\n return { ...state, errors: [] };\n }\n },\n {\n stats: EMPTY_OBJECT,\n errors: EMPTY_LIST,\n readers: EMPTY_OBJECT,\n }\n );\n const { stats, errors, readers } = state;\n\n const statsList = Object.values(stats);\n const totalFiles = statsList.length;\n const totalBytes = statsList.reduce(\n (result, { file: { size } }) => result + size,\n 0\n );\n const queueFiles = useCallback(\n (files: readonly File[]) => {\n const { pending, errors } = validateFiles(files, {\n maxFiles,\n extensions,\n minFileSize,\n maxFileSize,\n totalBytes,\n totalFiles,\n totalFileSize,\n isValidFileName,\n });\n\n dispatch({ type: \"queue\", errors, files: pending });\n },\n [\n validateFiles,\n maxFiles,\n extensions,\n minFileSize,\n maxFileSize,\n totalBytes,\n totalFiles,\n totalFileSize,\n isValidFileName,\n ]\n );\n const onDrop = useCallback(\n (event: DragEvent<E>) => {\n propOnDrop(event);\n event.preventDefault();\n event.stopPropagation();\n\n try {\n const files = event.dataTransfer.files;\n if (files) {\n queueFiles(Array.from(files));\n }\n } catch (e) {\n dispatch({\n type: \"queue\",\n files: [],\n errors: [\n new FileAccessError(e instanceof Error ? e.message : undefined),\n ],\n });\n }\n },\n [queueFiles, propOnDrop]\n );\n const onChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n propOnChange(event);\n try {\n const files = event.currentTarget.files;\n if (files) {\n queueFiles(Array.from(files));\n } else {\n throw new Error();\n }\n } catch (e) {\n dispatch({\n type: \"queue\",\n files: [],\n errors: [\n new FileAccessError(e instanceof Error ? e.message : undefined),\n ],\n });\n }\n },\n [queueFiles, propOnChange]\n );\n\n const remove = useCallback(\n (keyOrKeys: string | readonly string[]) => {\n const files = typeof keyOrKeys === \"string\" ? [keyOrKeys] : keyOrKeys;\n files.forEach((fileKey) => {\n readers[fileKey]?.abort();\n });\n\n dispatch({ type: \"remove\", files });\n },\n [readers]\n );\n const reset = useCallback(() => {\n Object.values(readers).forEach((reader) => {\n reader.abort();\n });\n\n dispatch({ type: \"reset\" });\n }, [readers]);\n const clearErrors = useCallback(() => {\n dispatch({ type: \"clearErrors\" });\n }, []);\n const start = useCallback((key: string, reader: FileReader) => {\n dispatch({ type: \"start\", key, reader });\n }, []);\n const complete = useCallback(\n (key: string, result: FileReaderResult = null) => {\n dispatch({ type: \"complete\", key, result });\n },\n []\n );\n const createProgressEventHandler = useCallback(\n (key: string) => (event: ProgressEvent) => {\n if (event.lengthComputable) {\n const percentage = Math.round((event.loaded * 100) / event.total);\n dispatch({ type: \"progress\", key, progress: percentage });\n }\n },\n []\n );\n\n useEffect(() => {\n const pending: ProcessingFileUploadStats[] = [];\n const uploading: ProcessingFileUploadStats[] = [];\n Object.values(stats).forEach((file) => {\n if (file.status === \"pending\") {\n pending.push(file);\n } else if (file.status === \"uploading\") {\n uploading.push(file);\n }\n });\n\n const lastIndex =\n concurrency === -1\n ? pending.length\n : Math.max(0, concurrency - uploading.length);\n const queue = pending.slice(0, lastIndex);\n if (!queue.length) {\n return;\n }\n\n queue.forEach((stats) => {\n const { key, file } = stats;\n const reader = new FileReader();\n\n // using `addEventListener` instead of directly setting to\n // `reader.progress`/`reader.load` so it's easier to test\n reader.addEventListener(\"progress\", createProgressEventHandler(key));\n reader.addEventListener(\"load\", () => {\n complete(key, reader.result);\n });\n\n start(key, reader);\n const parser = getFileParser(file);\n /* istanbul ignore next */\n if (\n process.env.NODE_ENV !== \"production\" &&\n ![\n \"readAsText\",\n \"readAsDataURL\",\n \"readAsArrayBuffer\",\n \"readAsBinaryString\",\n ].includes(parser)\n ) {\n throw new Error(\"Invalid file reader parser\");\n }\n\n reader[parser](file);\n });\n }, [\n concurrency,\n stats,\n getFileParser,\n createProgressEventHandler,\n start,\n complete,\n ]);\n\n let accept = \"\";\n if (extensions.length) {\n accept = extensions.reduce((s, ext) => `${s ? `${s},` : \"\"}.${ext}`, \"\");\n }\n\n return {\n stats: statsList,\n errors,\n accept,\n totalBytes,\n totalFiles,\n onDrop,\n onChange,\n reset,\n remove,\n clearErrors,\n };\n}\n"],"names":["nanoid","useCallback","useEffect","useReducer","FileAccessError","getFileParser","defaultGetFileParser","isValidFileName","defaultIsValidFileName","validateFiles","defaultValidateFiles","noop","EMPTY_LIST","EMPTY_OBJECT","useFileUpload","maxFiles","extensions","minFileSize","maxFileSize","totalFileSize","concurrency","onDrop","propOnDrop","onChange","propOnChange","state","dispatch","reducer","action","type","stats","errors","readers","key","files","includes","reduce","file","progress","status","reader","fileStats","result","_reader","statsList","Object","values","totalFiles","length","totalBytes","size","queueFiles","pending","event","preventDefault","stopPropagation","dataTransfer","Array","from","e","Error","message","undefined","currentTarget","remove","keyOrKeys","forEach","fileKey","abort","reset","clearErrors","start","complete","createProgressEventHandler","lengthComputable","percentage","Math","round","loaded","total","uploading","push","lastIndex","max","queue","slice","FileReader","addEventListener","parser","process","env","NODE_ENV","accept","s","ext"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/form/useFormReset.ts"],"sourcesContent":["\"use client\";\nimport { useEffect, type RefObject } from \"react\";\nimport {\n triggerManualChangeEvent,\n type ChangeableHTMLElement,\n} from \"./utils.js\";\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface FormResetOptions {\n form?: string;\n elementRef: RefObject<ChangeableHTMLElement>;\n defaultValue: string;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport function useFormReset(options: FormResetOptions): void {\n const { form, elementRef, defaultValue } = options;\n\n useEffect(() => {\n const element = elementRef.current;\n if (!element) {\n return;\n }\n\n const formElement =\n (form && document.getElementById(form)) ||\n element.closest<HTMLFormElement>(\"form\") ||\n null;\n if (!formElement) {\n return;\n }\n\n const handleReset = (): void => {\n triggerManualChangeEvent(element, defaultValue);\n };\n\n formElement.addEventListener(\"reset\", handleReset);\n return () => {\n formElement.removeEventListener(\"reset\", handleReset);\n };\n }, [defaultValue, elementRef, form]);\n}\n"],"names":["useEffect","triggerManualChangeEvent","useFormReset","options","form","elementRef","defaultValue","element","current","formElement","document","getElementById","closest","handleReset","addEventListener","removeEventListener"],"
|
|
1
|
+
{"version":3,"sources":["../../src/form/useFormReset.ts"],"sourcesContent":["\"use client\";\nimport { useEffect, type RefObject } from \"react\";\nimport {\n triggerManualChangeEvent,\n type ChangeableHTMLElement,\n} from \"./utils.js\";\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface FormResetOptions {\n form?: string;\n elementRef: RefObject<ChangeableHTMLElement>;\n defaultValue: string;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport function useFormReset(options: FormResetOptions): void {\n const { form, elementRef, defaultValue } = options;\n\n useEffect(() => {\n const element = elementRef.current;\n if (!element) {\n return;\n }\n\n const formElement =\n (form && document.getElementById(form)) ||\n element.closest<HTMLFormElement>(\"form\") ||\n null;\n if (!formElement) {\n return;\n }\n\n const handleReset = (): void => {\n triggerManualChangeEvent(element, defaultValue);\n };\n\n formElement.addEventListener(\"reset\", handleReset);\n return () => {\n formElement.removeEventListener(\"reset\", handleReset);\n };\n }, [defaultValue, elementRef, form]);\n}\n"],"names":["useEffect","triggerManualChangeEvent","useFormReset","options","form","elementRef","defaultValue","element","current","formElement","document","getElementById","closest","handleReset","addEventListener","removeEventListener"],"mappings":"AAAA;AACA,SAASA,SAAS,QAAwB,QAAQ;AAClD,SACEC,wBAAwB,QAEnB,aAAa;AAYpB;;;CAGC,GACD,OAAO,SAASC,aAAaC,OAAyB;IACpD,MAAM,EAAEC,IAAI,EAAEC,UAAU,EAAEC,YAAY,EAAE,GAAGH;IAE3CH,UAAU;QACR,MAAMO,UAAUF,WAAWG,OAAO;QAClC,IAAI,CAACD,SAAS;YACZ;QACF;QAEA,MAAME,cACJ,AAACL,QAAQM,SAASC,cAAc,CAACP,SACjCG,QAAQK,OAAO,CAAkB,WACjC;QACF,IAAI,CAACH,aAAa;YAChB;QACF;QAEA,MAAMI,cAAc;YAClBZ,yBAAyBM,SAASD;QACpC;QAEAG,YAAYK,gBAAgB,CAAC,SAASD;QACtC,OAAO;YACLJ,YAAYM,mBAAmB,CAAC,SAASF;QAC3C;IACF,GAAG;QAACP;QAAcD;QAAYD;KAAK;AACrC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/form/useListboxProvider.ts"],"sourcesContent":["\"use client\";\nimport { createContext, useContext, type RefObject } from \"react\";\nimport { type ChangeableHTMLElement } from \"./utils.js\";\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport interface ListboxContext {\n /**\n * This ref is used to trigger the change event when an option is clicked.\n */\n inputRef: RefObject<ChangeableHTMLElement>;\n\n /**\n * This is used within the `Option` component to determine if it is currently\n * selected or not.\n */\n currentValue: string | number | null;\n\n selectedIconAfter: boolean;\n disableSelectedIcon: boolean;\n}\n\nconst context = createContext<ListboxContext | null>(null);\n\n/**\n * **Client Component**\n *\n * @internal\n * @since 6.0.0\n */\nexport const { Provider: ListboxProvider } = context;\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport function useListboxContext(): ListboxContext {\n const value = useContext(context);\n if (!value) {\n throw new Error(\"The `ListboxProvider` must be a parent component\");\n }\n return value;\n}\n"],"names":["createContext","useContext","context","Provider","ListboxProvider","useListboxContext","value","Error"],"
|
|
1
|
+
{"version":3,"sources":["../../src/form/useListboxProvider.ts"],"sourcesContent":["\"use client\";\nimport { createContext, useContext, type RefObject } from \"react\";\nimport { type ChangeableHTMLElement } from \"./utils.js\";\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport interface ListboxContext {\n /**\n * This ref is used to trigger the change event when an option is clicked.\n */\n inputRef: RefObject<ChangeableHTMLElement>;\n\n /**\n * This is used within the `Option` component to determine if it is currently\n * selected or not.\n */\n currentValue: string | number | null;\n\n selectedIconAfter: boolean;\n disableSelectedIcon: boolean;\n}\n\nconst context = createContext<ListboxContext | null>(null);\n\n/**\n * **Client Component**\n *\n * @internal\n * @since 6.0.0\n */\nexport const { Provider: ListboxProvider } = context;\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport function useListboxContext(): ListboxContext {\n const value = useContext(context);\n if (!value) {\n throw new Error(\"The `ListboxProvider` must be a parent component\");\n }\n return value;\n}\n"],"names":["createContext","useContext","context","Provider","ListboxProvider","useListboxContext","value","Error"],"mappings":"AAAA;AACA,SAASA,aAAa,EAAEC,UAAU,QAAwB,QAAQ;AAuBlE,MAAMC,UAAUF,cAAqC;AAErD;;;;;CAKC,GACD,OAAO,MAAM,EAAEG,UAAUC,eAAe,EAAE,GAAGF,QAAQ;AAErD;;;CAGC,GACD,OAAO,SAASG;IACd,MAAMC,QAAQL,WAAWC;IACzB,IAAI,CAACI,OAAO;QACV,MAAM,IAAIC,MAAM;IAClB;IACA,OAAOD;AACT"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/form/useNumberField.ts"],"sourcesContent":["\"use client\";\nimport { useCallback, useRef, useState } from \"react\";\nimport { type UseStateInitializer, type UseStateSetter } from \"../types.js\";\nimport { withinRange } from \"../utils/withinRange.js\";\nimport {\n useTextField,\n type ProvidedTextFieldMessageProps,\n type ProvidedTextFieldProps,\n type TextFieldHookOptions,\n type TextFieldHookState,\n type TextFieldImplementation,\n type ValidatedTextFieldImplementation,\n} from \"./useTextField.js\";\n\nconst noop = (): void => {\n // do nothing\n};\n\n/** @since 2.5.0 */\nexport interface NumberFieldConstraints {\n /**\n * An optional min value for the number field.\n */\n min?: number;\n\n /**\n * An optional max value for the number field.\n */\n max?: number;\n\n /**\n * An optional step amount to use.\n *\n * Note: The `min` and `max` values must be divisible by this value when any\n * are defined.\n */\n step?: number;\n}\n\n/**\n * @since 2.5.0\n * @since 6.0.0\n * - Removed `updateOnChange` in favor of `updateValue`\n * - Renamed `fixOnBlur` to `updateValueOnBlur`\n */\nexport interface NumberFieldHookOptions\n extends Omit<\n TextFieldHookOptions<HTMLInputElement>,\n \"defaultValue\" | \"isNumber\"\n >,\n NumberFieldConstraints {\n /**\n * @defaultValue `undefined`\n */\n defaultValue?: UseStateInitializer<number>;\n\n /**\n * This controls the behavior for the `value` returned by this hook. If you\n * need access to the current value immediately as the user types to update\n * other components, keep this as the default of `\"change\"`. Otherwise, set\n * this to `\"blur\"`.\n *\n * @example Deferring Updates on Blur\n * ```tsx\n * import { TextField, useNumberField } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * const { fieldProps, value } = useNumberField({\n * min: 0,\n * max: 100,\n * name: \"someName\",\n * defaultValue: 0,\n * updateValue: \"blur\",\n * });\n *\n * const result = useMemo(() => someExpensiveComputation(value), [value]);\n *\n * return <TextField {...fieldProps} label=\"Label\" />;\n * }\n * ```\n *\n * @defaultValue `\"change\"`\n */\n updateValue?: \"blur\" | \"change\";\n\n /**\n * This option is used to update the `number` value and text field value to be\n * within the `min` and `max` range or just format the text field value when\n * the input is blurred. This update will only be applied if the text field\n * contains a valid number. Using `min = 0` and `max = 10`:\n *\n * | text value | updated value |\n * | ---------- | ------------- |\n * | 000001 | 1 |\n * | -1 | 0 |\n * | 20 | 10 |\n * | -12 | 0 |\n * | --1 | --1 |\n * | fjdka | fjdka |\n *\n *\n * Set this to `false` if no changed should be applied and force the user to\n * fix any min/max errors manually and maintain weird formatting.\n *\n * @defaultValue `true`\n * @since 6.0.0 This was renamed from `fixOnBlur` and removed the\n * `\"min\"` and `\"max\"` behavior.\n */\n updateValueOnBlur?: boolean;\n}\n\n/** @since 6.0.0 */\nexport interface NumberFieldHookState\n extends Omit<TextFieldHookState, \"value\"> {\n value: number | undefined;\n}\n\n/** @since 2.5.6 */\nexport interface ProvidedNumberFieldProps\n extends ProvidedTextFieldProps<HTMLInputElement>,\n NumberFieldConstraints {\n type: \"number\";\n}\n\n/** @since 2.5.6 */\nexport interface ProvidedNumberFieldMessageProps\n extends ProvidedTextFieldMessageProps<HTMLInputElement>,\n NumberFieldConstraints {\n type: \"number\";\n}\n\n/** @since 6.0.0 */\nexport interface NumberFieldImplementation\n extends Omit<\n TextFieldImplementation<HTMLInputElement>,\n \"value\" | \"setState\"\n > {\n value: number | undefined;\n setState: UseStateSetter<NumberFieldHookState>;\n fieldProps: ProvidedNumberFieldProps;\n}\n\n/** @since 6.0.0 */\nexport interface NumberFieldWithMessageImplementation\n extends NumberFieldImplementation {\n fieldProps: ProvidedNumberFieldMessageProps;\n}\n\n/** @since 6.0.0 */\nexport interface ValidatedNumberFieldImplementation\n extends Omit<\n ValidatedTextFieldImplementation<HTMLInputElement>,\n \"value\" | \"setState\"\n > {\n value: number | undefined;\n setState: UseStateSetter<NumberFieldHookState>;\n fieldProps: ProvidedNumberFieldProps | ProvidedNumberFieldMessageProps;\n}\n\n/**\n * @example Enforce Number Value and No Error Messages\n * ```tsx\n * import { TextField, useNumberField } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * const { fieldProps, value } = useNumberField({\n * min: 0,\n * max: 100,\n * name: \"someName\",\n * defaultValue: 0,\n * disableMessage: true,\n * });\n *\n * // this is safe since `value` will always be a number even if there is a\n * // validation error. since the min and max options were provided as well,\n * // number will be between that range as well.\n * const computed = value * 10;\n *\n * return <TextField {...fieldProps} label=\"Label\" />;\n * }\n *\n * @see {@link useTextField}\n * @see {@link useNumberField} overrides for other examples.\n * ```\n */\nexport function useNumberField(\n options: NumberFieldHookOptions & {\n disableMessage: true;\n defaultValue: UseStateInitializer<number>;\n }\n): NumberFieldImplementation & {\n value: number;\n setState: UseStateSetter<NumberFieldHookState & { value: number }>;\n};\n\n/**\n * @example No Error Messages\n * ```tsx\n * import { TextField, useNumberField } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * const { fieldProps, value } = useNumberField({\n * min: 0,\n * max: 100,\n * name: \"someName\",\n * disableMessage: true,\n * });\n *\n * // `value` will be `undefined` until the user enters a valid value once\n * // there is a valid value, `value` will be a `number`. So this might cause\n * // `computed` to be `NaN | number`\n * //\n * // const computed = value * 10;\n *\n * return <TextField {...fieldProps} label=\"Label\" />;\n * }\n * ```\n *\n * @see {@link useTextField}\n * @see {@link useNumberField} overrides for other examples.\n */\nexport function useNumberField(\n options: NumberFieldHookOptions & { disableMessage: true }\n): NumberFieldImplementation;\n\n/**\n * @example Enforce Number Value\n * ```tsx\n * import { TextField, useNumberField } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * const { fieldProps, value } = useNumberField({\n * min: 0,\n * max: 100,\n * name: \"someName\",\n * defaultValue: 0,\n * });\n *\n * // this is safe since `value` will always be a number even if there is a\n * // validation error. since the min and max options were provided as well,\n * // number will be between that range as well.\n * const computed = value * 10;\n *\n * return <TextField {...fieldProps} label=\"Label\" />;\n * }\n * ```\n *\n * @example Enforce Number Value and Deferring Updates\n * ```tsx\n * import { TextField, useNumberField } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * const { fieldProps, value } = useNumberField({\n * min: 0,\n * max: 100,\n * name: \"someName\",\n * defaultValue: 0,\n * updateValue: \"blur\",\n * });\n *\n * // the `value` will only be updated whenever the `TextField` is blurred.\n * // This is helpful if the `value` is used in expensive computations or\n * // updates that do not need to be updated as the user types\n * const computed = value * 10;\n *\n * return <TextField {...fieldProps} label=\"Label\" />;\n * }\n * ```\n *\n * @see {@link useTextField}\n * @see {@link useNumberField} overrides for other examples.\n */\nexport function useNumberField(\n options: NumberFieldHookOptions & {\n defaultValue: UseStateInitializer<number>;\n }\n): NumberFieldWithMessageImplementation & {\n value: number;\n setState: UseStateSetter<NumberFieldHookState & { value: number }>;\n};\n\n/**\n * The `useNumberField` hook is used to control the state of a `TextField` or\n * `<input type=\"number\">`\n *\n * @example Default Implementation\n * ```tsx\n * import { TextField, useNumberField } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * const { fieldProps, value } = useNumberField({\n * name: \"someName\",\n * });\n *\n * // `value` will be `undefined` until the user enters a valid value once\n * // there is a valid value, `value` will be a `number`. So this might cause\n * // `computed` to be `NaN | number`\n * //\n * // const computed = value * 10;\n *\n * // whenever there is an error, an error message will be displayed below the\n * // `TextField`\n * return <TextField {...fieldProps} label=\"Label\" />;\n * }\n * ```\n *\n * @example Adding Constraints\n * ```tsx\n * import { TextField, useNumberField } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * const { fieldProps, value } = useNumberField({\n * name: \"someName\",\n * min: 0,\n * max: 100,\n * step: 2,\n * required: true,\n * });\n *\n * return <TextField {...fieldProps} label=\"Label\" />;\n * }\n * ```\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation\n * @see {@link useTextField}\n */\nexport function useNumberField(\n options: NumberFieldHookOptions\n): NumberFieldWithMessageImplementation;\n\n/**\n * @internal\n * @see {@link useTextField}\n * @see {@link useNumberField} overrides for other examples.\n */\nexport function useNumberField(\n options: NumberFieldHookOptions\n): ValidatedNumberFieldImplementation {\n const {\n min,\n max,\n step,\n onBlur = noop,\n onChange = noop,\n updateValue = \"change\",\n updateValueOnBlur = true,\n defaultValue,\n ...textOptions\n } = options;\n\n const [number, setNumber] = useState(defaultValue);\n const initial = useRef(number);\n const {\n value: _value,\n reset: resetTextField,\n fieldProps,\n setState: setTextFieldState,\n ...remaining\n } = useTextField({\n ...textOptions,\n isNumber: true,\n defaultValue: `${number ?? \"\"}`,\n onBlur(event) {\n onBlur(event);\n if (event.isPropagationStopped()) {\n return;\n }\n\n const input = event.currentTarget;\n input.setCustomValidity(\"\");\n input.checkValidity();\n if (\n !updateValueOnBlur ||\n // do nothing else since it's a weird value like: `\"--0\"` which causes\n // the value to be `\"\"` and `numberAsValue` to be `NaN`\n input.validity.badInput\n ) {\n return;\n }\n\n let value = input.valueAsNumber;\n if (input.value === \"\" && typeof initial.current === \"number\") {\n value = min ?? initial.current;\n }\n\n // can't have both rangeUnderflow and rangeOverflow at the same time, so\n // it's \"safe\" to always provide both\n value = withinRange({ min, max, value });\n if (!Number.isNaN(value)) {\n setNumber(value);\n input.value = `${value}`;\n } else if (typeof initial.current === \"undefined\") {\n setNumber(undefined);\n }\n },\n onChange(event) {\n onChange(event);\n if (event.isPropagationStopped() || updateValue === \"blur\") {\n return;\n }\n\n const input = event.currentTarget;\n input.checkValidity();\n const value = withinRange({\n min,\n max,\n value: event.currentTarget.valueAsNumber,\n });\n if (\n !input.validity.valid &&\n !input.validity.rangeUnderflow &&\n !input.validity.rangeOverflow\n ) {\n return;\n }\n\n if (!Number.isNaN(value)) {\n setNumber(value);\n } else if (initial.current === undefined) {\n setNumber(undefined);\n }\n },\n });\n\n const reset = useCallback(() => {\n resetTextField();\n setNumber(initial.current);\n }, [resetTextField]);\n const setState = useCallback<UseStateSetter<NumberFieldHookState>>(\n (nextState) => {\n if (typeof nextState === \"function\") {\n setNumber((prevNumber) => {\n let nextNumber: number | undefined = prevNumber;\n setTextFieldState((prevState) => {\n const updated = nextState({\n ...prevState,\n value: prevNumber,\n });\n\n nextNumber = updated.value;\n\n return {\n ...updated,\n value: `${nextNumber ?? \"\"}`,\n };\n });\n\n return nextNumber;\n });\n return;\n }\n\n const { value, error, errorMessage } = nextState;\n setNumber(value);\n setTextFieldState({\n value: `${value ?? \"\"}`,\n error,\n errorMessage,\n });\n },\n [setTextFieldState]\n );\n\n return {\n ...remaining,\n reset,\n value: number,\n setState,\n fieldProps: {\n ...fieldProps,\n min,\n max,\n step,\n type: \"number\",\n },\n };\n}\n"],"names":["useCallback","useRef","useState","withinRange","useTextField","noop","useNumberField","options","min","max","step","onBlur","onChange","updateValue","updateValueOnBlur","defaultValue","textOptions","number","setNumber","initial","value","_value","reset","resetTextField","fieldProps","setState","setTextFieldState","remaining","isNumber","event","isPropagationStopped","input","currentTarget","setCustomValidity","checkValidity","validity","badInput","valueAsNumber","current","Number","isNaN","undefined","valid","rangeUnderflow","rangeOverflow","nextState","prevNumber","nextNumber","prevState","updated","error","errorMessage","type"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../src/form/useNumberField.ts"],"sourcesContent":["\"use client\";\nimport { useCallback, useRef, useState } from \"react\";\nimport { type UseStateInitializer, type UseStateSetter } from \"../types.js\";\nimport { withinRange } from \"../utils/withinRange.js\";\nimport {\n useTextField,\n type ProvidedTextFieldMessageProps,\n type ProvidedTextFieldProps,\n type TextFieldHookOptions,\n type TextFieldHookState,\n type TextFieldImplementation,\n type ValidatedTextFieldImplementation,\n} from \"./useTextField.js\";\n\nconst noop = (): void => {\n // do nothing\n};\n\n/** @since 2.5.0 */\nexport interface NumberFieldConstraints {\n /**\n * An optional min value for the number field.\n */\n min?: number;\n\n /**\n * An optional max value for the number field.\n */\n max?: number;\n\n /**\n * An optional step amount to use.\n *\n * Note: The `min` and `max` values must be divisible by this value when any\n * are defined.\n */\n step?: number;\n}\n\n/**\n * @since 2.5.0\n * @since 6.0.0\n * - Removed `updateOnChange` in favor of `updateValue`\n * - Renamed `fixOnBlur` to `updateValueOnBlur`\n */\nexport interface NumberFieldHookOptions\n extends Omit<\n TextFieldHookOptions<HTMLInputElement>,\n \"defaultValue\" | \"isNumber\"\n >,\n NumberFieldConstraints {\n /**\n * @defaultValue `undefined`\n */\n defaultValue?: UseStateInitializer<number>;\n\n /**\n * This controls the behavior for the `value` returned by this hook. If you\n * need access to the current value immediately as the user types to update\n * other components, keep this as the default of `\"change\"`. Otherwise, set\n * this to `\"blur\"`.\n *\n * @example Deferring Updates on Blur\n * ```tsx\n * import { TextField, useNumberField } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * const { fieldProps, value } = useNumberField({\n * min: 0,\n * max: 100,\n * name: \"someName\",\n * defaultValue: 0,\n * updateValue: \"blur\",\n * });\n *\n * const result = useMemo(() => someExpensiveComputation(value), [value]);\n *\n * return <TextField {...fieldProps} label=\"Label\" />;\n * }\n * ```\n *\n * @defaultValue `\"change\"`\n */\n updateValue?: \"blur\" | \"change\";\n\n /**\n * This option is used to update the `number` value and text field value to be\n * within the `min` and `max` range or just format the text field value when\n * the input is blurred. This update will only be applied if the text field\n * contains a valid number. Using `min = 0` and `max = 10`:\n *\n * | text value | updated value |\n * | ---------- | ------------- |\n * | 000001 | 1 |\n * | -1 | 0 |\n * | 20 | 10 |\n * | -12 | 0 |\n * | --1 | --1 |\n * | fjdka | fjdka |\n *\n *\n * Set this to `false` if no changed should be applied and force the user to\n * fix any min/max errors manually and maintain weird formatting.\n *\n * @defaultValue `true`\n * @since 6.0.0 This was renamed from `fixOnBlur` and removed the\n * `\"min\"` and `\"max\"` behavior.\n */\n updateValueOnBlur?: boolean;\n}\n\n/** @since 6.0.0 */\nexport interface NumberFieldHookState\n extends Omit<TextFieldHookState, \"value\"> {\n value: number | undefined;\n}\n\n/** @since 2.5.6 */\nexport interface ProvidedNumberFieldProps\n extends ProvidedTextFieldProps<HTMLInputElement>,\n NumberFieldConstraints {\n type: \"number\";\n}\n\n/** @since 2.5.6 */\nexport interface ProvidedNumberFieldMessageProps\n extends ProvidedTextFieldMessageProps<HTMLInputElement>,\n NumberFieldConstraints {\n type: \"number\";\n}\n\n/** @since 6.0.0 */\nexport interface NumberFieldImplementation\n extends Omit<\n TextFieldImplementation<HTMLInputElement>,\n \"value\" | \"setState\"\n > {\n value: number | undefined;\n setState: UseStateSetter<NumberFieldHookState>;\n fieldProps: ProvidedNumberFieldProps;\n}\n\n/** @since 6.0.0 */\nexport interface NumberFieldWithMessageImplementation\n extends NumberFieldImplementation {\n fieldProps: ProvidedNumberFieldMessageProps;\n}\n\n/** @since 6.0.0 */\nexport interface ValidatedNumberFieldImplementation\n extends Omit<\n ValidatedTextFieldImplementation<HTMLInputElement>,\n \"value\" | \"setState\"\n > {\n value: number | undefined;\n setState: UseStateSetter<NumberFieldHookState>;\n fieldProps: ProvidedNumberFieldProps | ProvidedNumberFieldMessageProps;\n}\n\n/**\n * @example Enforce Number Value and No Error Messages\n * ```tsx\n * import { TextField, useNumberField } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * const { fieldProps, value } = useNumberField({\n * min: 0,\n * max: 100,\n * name: \"someName\",\n * defaultValue: 0,\n * disableMessage: true,\n * });\n *\n * // this is safe since `value` will always be a number even if there is a\n * // validation error. since the min and max options were provided as well,\n * // number will be between that range as well.\n * const computed = value * 10;\n *\n * return <TextField {...fieldProps} label=\"Label\" />;\n * }\n *\n * @see {@link useTextField}\n * @see {@link useNumberField} overrides for other examples.\n * ```\n */\nexport function useNumberField(\n options: NumberFieldHookOptions & {\n disableMessage: true;\n defaultValue: UseStateInitializer<number>;\n }\n): NumberFieldImplementation & {\n value: number;\n setState: UseStateSetter<NumberFieldHookState & { value: number }>;\n};\n\n/**\n * @example No Error Messages\n * ```tsx\n * import { TextField, useNumberField } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * const { fieldProps, value } = useNumberField({\n * min: 0,\n * max: 100,\n * name: \"someName\",\n * disableMessage: true,\n * });\n *\n * // `value` will be `undefined` until the user enters a valid value once\n * // there is a valid value, `value` will be a `number`. So this might cause\n * // `computed` to be `NaN | number`\n * //\n * // const computed = value * 10;\n *\n * return <TextField {...fieldProps} label=\"Label\" />;\n * }\n * ```\n *\n * @see {@link useTextField}\n * @see {@link useNumberField} overrides for other examples.\n */\nexport function useNumberField(\n options: NumberFieldHookOptions & { disableMessage: true }\n): NumberFieldImplementation;\n\n/**\n * @example Enforce Number Value\n * ```tsx\n * import { TextField, useNumberField } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * const { fieldProps, value } = useNumberField({\n * min: 0,\n * max: 100,\n * name: \"someName\",\n * defaultValue: 0,\n * });\n *\n * // this is safe since `value` will always be a number even if there is a\n * // validation error. since the min and max options were provided as well,\n * // number will be between that range as well.\n * const computed = value * 10;\n *\n * return <TextField {...fieldProps} label=\"Label\" />;\n * }\n * ```\n *\n * @example Enforce Number Value and Deferring Updates\n * ```tsx\n * import { TextField, useNumberField } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * const { fieldProps, value } = useNumberField({\n * min: 0,\n * max: 100,\n * name: \"someName\",\n * defaultValue: 0,\n * updateValue: \"blur\",\n * });\n *\n * // the `value` will only be updated whenever the `TextField` is blurred.\n * // This is helpful if the `value` is used in expensive computations or\n * // updates that do not need to be updated as the user types\n * const computed = value * 10;\n *\n * return <TextField {...fieldProps} label=\"Label\" />;\n * }\n * ```\n *\n * @see {@link useTextField}\n * @see {@link useNumberField} overrides for other examples.\n */\nexport function useNumberField(\n options: NumberFieldHookOptions & {\n defaultValue: UseStateInitializer<number>;\n }\n): NumberFieldWithMessageImplementation & {\n value: number;\n setState: UseStateSetter<NumberFieldHookState & { value: number }>;\n};\n\n/**\n * The `useNumberField` hook is used to control the state of a `TextField` or\n * `<input type=\"number\">`\n *\n * @example Default Implementation\n * ```tsx\n * import { TextField, useNumberField } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * const { fieldProps, value } = useNumberField({\n * name: \"someName\",\n * });\n *\n * // `value` will be `undefined` until the user enters a valid value once\n * // there is a valid value, `value` will be a `number`. So this might cause\n * // `computed` to be `NaN | number`\n * //\n * // const computed = value * 10;\n *\n * // whenever there is an error, an error message will be displayed below the\n * // `TextField`\n * return <TextField {...fieldProps} label=\"Label\" />;\n * }\n * ```\n *\n * @example Adding Constraints\n * ```tsx\n * import { TextField, useNumberField } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * const { fieldProps, value } = useNumberField({\n * name: \"someName\",\n * min: 0,\n * max: 100,\n * step: 2,\n * required: true,\n * });\n *\n * return <TextField {...fieldProps} label=\"Label\" />;\n * }\n * ```\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation\n * @see {@link useTextField}\n */\nexport function useNumberField(\n options: NumberFieldHookOptions\n): NumberFieldWithMessageImplementation;\n\n/**\n * @internal\n * @see {@link useTextField}\n * @see {@link useNumberField} overrides for other examples.\n */\nexport function useNumberField(\n options: NumberFieldHookOptions\n): ValidatedNumberFieldImplementation {\n const {\n min,\n max,\n step,\n onBlur = noop,\n onChange = noop,\n updateValue = \"change\",\n updateValueOnBlur = true,\n defaultValue,\n ...textOptions\n } = options;\n\n const [number, setNumber] = useState(defaultValue);\n const initial = useRef(number);\n const {\n value: _value,\n reset: resetTextField,\n fieldProps,\n setState: setTextFieldState,\n ...remaining\n } = useTextField({\n ...textOptions,\n isNumber: true,\n defaultValue: `${number ?? \"\"}`,\n onBlur(event) {\n onBlur(event);\n if (event.isPropagationStopped()) {\n return;\n }\n\n const input = event.currentTarget;\n input.setCustomValidity(\"\");\n input.checkValidity();\n if (\n !updateValueOnBlur ||\n // do nothing else since it's a weird value like: `\"--0\"` which causes\n // the value to be `\"\"` and `numberAsValue` to be `NaN`\n input.validity.badInput\n ) {\n return;\n }\n\n let value = input.valueAsNumber;\n if (input.value === \"\" && typeof initial.current === \"number\") {\n value = min ?? initial.current;\n }\n\n // can't have both rangeUnderflow and rangeOverflow at the same time, so\n // it's \"safe\" to always provide both\n value = withinRange({ min, max, value });\n if (!Number.isNaN(value)) {\n setNumber(value);\n input.value = `${value}`;\n } else if (typeof initial.current === \"undefined\") {\n setNumber(undefined);\n }\n },\n onChange(event) {\n onChange(event);\n if (event.isPropagationStopped() || updateValue === \"blur\") {\n return;\n }\n\n const input = event.currentTarget;\n input.checkValidity();\n const value = withinRange({\n min,\n max,\n value: event.currentTarget.valueAsNumber,\n });\n if (\n !input.validity.valid &&\n !input.validity.rangeUnderflow &&\n !input.validity.rangeOverflow\n ) {\n return;\n }\n\n if (!Number.isNaN(value)) {\n setNumber(value);\n } else if (initial.current === undefined) {\n setNumber(undefined);\n }\n },\n });\n\n const reset = useCallback(() => {\n resetTextField();\n setNumber(initial.current);\n }, [resetTextField]);\n const setState = useCallback<UseStateSetter<NumberFieldHookState>>(\n (nextState) => {\n if (typeof nextState === \"function\") {\n setNumber((prevNumber) => {\n let nextNumber: number | undefined = prevNumber;\n setTextFieldState((prevState) => {\n const updated = nextState({\n ...prevState,\n value: prevNumber,\n });\n\n nextNumber = updated.value;\n\n return {\n ...updated,\n value: `${nextNumber ?? \"\"}`,\n };\n });\n\n return nextNumber;\n });\n return;\n }\n\n const { value, error, errorMessage } = nextState;\n setNumber(value);\n setTextFieldState({\n value: `${value ?? \"\"}`,\n error,\n errorMessage,\n });\n },\n [setTextFieldState]\n );\n\n return {\n ...remaining,\n reset,\n value: number,\n setState,\n fieldProps: {\n ...fieldProps,\n min,\n max,\n step,\n type: \"number\",\n },\n };\n}\n"],"names":["useCallback","useRef","useState","withinRange","useTextField","noop","useNumberField","options","min","max","step","onBlur","onChange","updateValue","updateValueOnBlur","defaultValue","textOptions","number","setNumber","initial","value","_value","reset","resetTextField","fieldProps","setState","setTextFieldState","remaining","isNumber","event","isPropagationStopped","input","currentTarget","setCustomValidity","checkValidity","validity","badInput","valueAsNumber","current","Number","isNaN","undefined","valid","rangeUnderflow","rangeOverflow","nextState","prevNumber","nextNumber","prevState","updated","error","errorMessage","type"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/form/useRadioGroup.ts"],"sourcesContent":["\"use client\";\nimport {\n useCallback,\n useRef,\n useState,\n type ChangeEventHandler,\n type FormEventHandler,\n} from \"react\";\nimport { type UseStateInitializer, type UseStateSetter } from \"../types.js\";\n\nconst noop = (): void => {\n // do nothing\n};\n\n/** @since 6.0.0 */\nexport interface RadioGroupOptions<T extends string | number> {\n /**\n * A `name` to apply to all the radios within the group. This is required if\n * unless {@link menu} is set to `true`.\n */\n name?: string;\n\n /**\n * Set this to `true` if using the `MenuItemRadio` component instead of the\n * `Radio` so the correct props can be provided.\n *\n * @defaultValue `false`\n */\n menu?: boolean;\n\n /**\n * The value of a radio that should be checked by default. If you want to\n * force the user to select one of the radios, keep this as the empty string\n * or set it to a string or number that does not represent a valid radio\n * value.\n *\n * @defaultValue `\"\"`\n */\n defaultValue?: UseStateInitializer<T>;\n\n /**\n * Set this to `true` if one of the radios within the group must be checked before\n * a form can be submitted.\n *\n * This option is invalid and will be ignored if {@link menu} is `true`.\n *\n * @defaultValue `false`\n */\n required?: boolean;\n\n /**\n * If you need to prevent the default behavior in a radio group for some\n * reason, you can provide a custom `onChange` event handler and call\n * `event.stopPropagation()`. This will be called whenever a new radio button\n * is checked.\n *\n * This option is invalid and will be ignored if {@link menu} is `true`.\n *\n * @defaultValue `() => {}`\n */\n onChange?: ChangeEventHandler<HTMLInputElement>;\n\n /**\n * If the radio group has {@link required} set to `true`, the radios will gain\n * the `error` state if a form is submitted without a checked radio. If you\n * want to prevent that behavior for some reason, you can provide this\n * function and call `event.stopPropagation()`.\n *\n * This option is invalid and will be ignored if {@link menu} is `true`.\n *\n * @defaultValue `() => {}`\n */\n onInvalid?: FormEventHandler<HTMLInputElement>;\n}\n\n/** @since 6.0.0 */\nexport interface ProvidedRadioGroupProps<V extends string | number> {\n name: string;\n value: V;\n checked: boolean;\n onChange: ChangeEventHandler<HTMLInputElement>;\n error: boolean;\n required: boolean;\n onInvalid: FormEventHandler<HTMLInputElement>;\n}\n\n/** @since 6.0.0 */\nexport type GetRadioGroupProps<V extends string | number> = (\n value: V\n) => Readonly<ProvidedRadioGroupProps<V>>;\n\n/** @since 6.0.0 */\nexport interface RadioGroupImplementation<V extends string | number> {\n reset(): void;\n value: V;\n setValue: UseStateSetter<V>;\n getRadioProps: GetRadioGroupProps<V>;\n}\n\nexport type GetMenuItemRadioGroupProps<V extends string | number> = (\n value: V\n) => Readonly<{ checked: boolean; onCheckedChange(): void }>;\n\n/** @since 6.0.0 */\nexport interface MenuItemRadioGroupImplementation<V extends string | number> {\n reset(): void;\n value: V;\n setValue: UseStateSetter<V>;\n getRadioProps: GetMenuItemRadioGroupProps<V>;\n}\n\n/** @since 6.0.0 */\nexport interface CombinedRadioGroupReturnValue<V extends string | number> {\n reset(): void;\n value: V;\n setValue: UseStateSetter<V>;\n getRadioProps?(value: V): {\n name?: string;\n value?: V;\n checked: boolean;\n error?: boolean;\n required?: boolean;\n onChange?: ChangeEventHandler<HTMLInputElement>;\n onCheckedChange?(): void;\n onInvalid?: FormEventHandler<HTMLInputElement>;\n };\n}\n\n// Note: These overrides are set up so that the value will default to any\n// string.\n\n/**\n * @example Generic Number Example\n * ```tsx\n * const { value, getRadioProps } = useRadioGroup<number>({\n * name: \"group\",\n * defaultValue: -1\n * });\n *\n *\n * return (\n * <>\n * <Radio {...getRadioProps(0)} label=\"First\" />\n * <Radio {...getRadioProps(1)} label=\"Second\" />\n * <Radio {...getRadioProps(2)} label=\"Third\" />\n * </>\n * );\n * ```\n * @since 6.0.0\n */\nexport function useRadioGroup<V extends number>(\n options: RadioGroupOptions<V> & {\n menu?: false;\n name: string;\n defaultValue: UseStateInitializer<V>;\n }\n): RadioGroupImplementation<V>;\nexport function useRadioGroup<V extends number>(\n options: RadioGroupOptions<V> & {\n menu: true;\n name?: never;\n required?: never;\n onChange?: never;\n onInvalid?: never;\n defaultValue: UseStateInitializer<V>;\n }\n): MenuItemRadioGroupImplementation<V>;\n/**\n * @example Generic String Example\n * ```tsx\n * const { value, getRadioProps } = useRadioGroup({ name: \"group\" });\n *\n * return (\n * <>\n * <Radio {...getRadioProps(\"a\")} label=\"First\" />\n * <Radio {...getRadioProps(\"b\")} label=\"Second\" />\n * <Radio {...getRadioProps(\"c\")} label=\"Third\" />\n * </>\n * );\n * ```\n *\n * @example String Union Example\n * ```tsx\n * const values = [\n * { label: \"First\", value: \"a\" },\n * { label: \"Second\", value: \"b\" },\n * { label: \"Third\", value: \"c\" },\n * ] as const;\n *\n * type Values = typeof values[number][\"value\"];\n * // ^ \"a\" | \"b\" | \"c\"\n *\n * const { value, getRadioProps } = useRadioGroup<Values | \"\">({\n * name: \"group\",\n * defaultValue: \"\",\n * });\n *\n *\n * return (\n * <>\n * {values.map(({ label, value }) => (\n * <Radio {...getRadioProps(value)} key={value} label={label} />\n * ))}\n * </>\n * );\n * ```\n * @since 6.0.0\n */\nexport function useRadioGroup<V extends string>(\n options: RadioGroupOptions<V> & {\n menu?: false;\n name: string;\n defaultValue?: UseStateInitializer<V>;\n }\n): RadioGroupImplementation<V>;\nexport function useRadioGroup<V extends string>(\n options: RadioGroupOptions<V> & {\n menu: true;\n name?: never;\n required?: never;\n onChange?: never;\n onInvalid?: never;\n defaultValue?: UseStateInitializer<V>;\n }\n): MenuItemRadioGroupImplementation<V>;\n/**\n * @example Strict Union Example\n * ```tsx\n * type ValidValues = 1 | 2 | 3 | 4 | \"\" | \"a\" | \"b\";\n *\n * const { value, getRadioProps } = useRadioGroup<ValidValues>({\n * name: \"group\",\n * defaultValue: \"\"\n * });\n *\n *\n * return (\n * <>\n * <Radio {...getRadioProps(1)} label=\"First\" />\n * <Radio {...getRadioProps(2)} label=\"Second\" />\n * <Radio {...getRadioProps(3)} label=\"Third\" />\n * <Radio {...getRadioProps(4)} label=\"Forth\" />\n * <Radio {...getRadioProps(\"a\")} label=\"Fifth\" />\n * <Radio {...getRadioProps(\"b\")} label=\"Sixth\" />\n * <Radio {...getRadioProps(\"c\")} label=\"Seventh\" />\n * </>\n * );\n * ```\n * @since 6.0.0\n */\nexport function useRadioGroup<V extends string | number>(\n options: RadioGroupOptions<V>\n): CombinedRadioGroupReturnValue<V> {\n const {\n name,\n defaultValue,\n menu = false,\n required,\n onChange = noop,\n onInvalid = noop,\n } = options;\n const [value, setValue] = useState<V>(() => {\n if (typeof defaultValue === \"function\") {\n return defaultValue();\n }\n\n return defaultValue ?? (\"\" as V);\n });\n const initial = useRef(value);\n const [error, setError] = useState(false);\n\n return {\n reset: useCallback(() => {\n setError(false);\n setValue(initial.current);\n }, []),\n value,\n setValue,\n getRadioProps(radioValue) {\n const checked = value === radioValue;\n if (menu) {\n return {\n checked,\n onCheckedChange() {\n setValue(radioValue);\n },\n };\n }\n\n return {\n name,\n value: radioValue,\n error,\n checked,\n required,\n onChange(event) {\n onChange(event);\n setError(false);\n setValue(radioValue);\n },\n onInvalid(event) {\n onInvalid(event);\n setError(true);\n },\n };\n },\n };\n}\n"],"names":["useCallback","useRef","useState","noop","useRadioGroup","options","name","defaultValue","menu","required","onChange","onInvalid","value","setValue","initial","error","setError","reset","current","getRadioProps","radioValue","checked","onCheckedChange","event"],"
|
|
1
|
+
{"version":3,"sources":["../../src/form/useRadioGroup.ts"],"sourcesContent":["\"use client\";\nimport {\n useCallback,\n useRef,\n useState,\n type ChangeEventHandler,\n type FormEventHandler,\n} from \"react\";\nimport { type UseStateInitializer, type UseStateSetter } from \"../types.js\";\n\nconst noop = (): void => {\n // do nothing\n};\n\n/** @since 6.0.0 */\nexport interface RadioGroupOptions<T extends string | number> {\n /**\n * A `name` to apply to all the radios within the group. This is required if\n * unless {@link menu} is set to `true`.\n */\n name?: string;\n\n /**\n * Set this to `true` if using the `MenuItemRadio` component instead of the\n * `Radio` so the correct props can be provided.\n *\n * @defaultValue `false`\n */\n menu?: boolean;\n\n /**\n * The value of a radio that should be checked by default. If you want to\n * force the user to select one of the radios, keep this as the empty string\n * or set it to a string or number that does not represent a valid radio\n * value.\n *\n * @defaultValue `\"\"`\n */\n defaultValue?: UseStateInitializer<T>;\n\n /**\n * Set this to `true` if one of the radios within the group must be checked before\n * a form can be submitted.\n *\n * This option is invalid and will be ignored if {@link menu} is `true`.\n *\n * @defaultValue `false`\n */\n required?: boolean;\n\n /**\n * If you need to prevent the default behavior in a radio group for some\n * reason, you can provide a custom `onChange` event handler and call\n * `event.stopPropagation()`. This will be called whenever a new radio button\n * is checked.\n *\n * This option is invalid and will be ignored if {@link menu} is `true`.\n *\n * @defaultValue `() => {}`\n */\n onChange?: ChangeEventHandler<HTMLInputElement>;\n\n /**\n * If the radio group has {@link required} set to `true`, the radios will gain\n * the `error` state if a form is submitted without a checked radio. If you\n * want to prevent that behavior for some reason, you can provide this\n * function and call `event.stopPropagation()`.\n *\n * This option is invalid and will be ignored if {@link menu} is `true`.\n *\n * @defaultValue `() => {}`\n */\n onInvalid?: FormEventHandler<HTMLInputElement>;\n}\n\n/** @since 6.0.0 */\nexport interface ProvidedRadioGroupProps<V extends string | number> {\n name: string;\n value: V;\n checked: boolean;\n onChange: ChangeEventHandler<HTMLInputElement>;\n error: boolean;\n required: boolean;\n onInvalid: FormEventHandler<HTMLInputElement>;\n}\n\n/** @since 6.0.0 */\nexport type GetRadioGroupProps<V extends string | number> = (\n value: V\n) => Readonly<ProvidedRadioGroupProps<V>>;\n\n/** @since 6.0.0 */\nexport interface RadioGroupImplementation<V extends string | number> {\n reset(): void;\n value: V;\n setValue: UseStateSetter<V>;\n getRadioProps: GetRadioGroupProps<V>;\n}\n\nexport type GetMenuItemRadioGroupProps<V extends string | number> = (\n value: V\n) => Readonly<{ checked: boolean; onCheckedChange(): void }>;\n\n/** @since 6.0.0 */\nexport interface MenuItemRadioGroupImplementation<V extends string | number> {\n reset(): void;\n value: V;\n setValue: UseStateSetter<V>;\n getRadioProps: GetMenuItemRadioGroupProps<V>;\n}\n\n/** @since 6.0.0 */\nexport interface CombinedRadioGroupReturnValue<V extends string | number> {\n reset(): void;\n value: V;\n setValue: UseStateSetter<V>;\n getRadioProps?(value: V): {\n name?: string;\n value?: V;\n checked: boolean;\n error?: boolean;\n required?: boolean;\n onChange?: ChangeEventHandler<HTMLInputElement>;\n onCheckedChange?(): void;\n onInvalid?: FormEventHandler<HTMLInputElement>;\n };\n}\n\n// Note: These overrides are set up so that the value will default to any\n// string.\n\n/**\n * @example Generic Number Example\n * ```tsx\n * const { value, getRadioProps } = useRadioGroup<number>({\n * name: \"group\",\n * defaultValue: -1\n * });\n *\n *\n * return (\n * <>\n * <Radio {...getRadioProps(0)} label=\"First\" />\n * <Radio {...getRadioProps(1)} label=\"Second\" />\n * <Radio {...getRadioProps(2)} label=\"Third\" />\n * </>\n * );\n * ```\n * @since 6.0.0\n */\nexport function useRadioGroup<V extends number>(\n options: RadioGroupOptions<V> & {\n menu?: false;\n name: string;\n defaultValue: UseStateInitializer<V>;\n }\n): RadioGroupImplementation<V>;\nexport function useRadioGroup<V extends number>(\n options: RadioGroupOptions<V> & {\n menu: true;\n name?: never;\n required?: never;\n onChange?: never;\n onInvalid?: never;\n defaultValue: UseStateInitializer<V>;\n }\n): MenuItemRadioGroupImplementation<V>;\n/**\n * @example Generic String Example\n * ```tsx\n * const { value, getRadioProps } = useRadioGroup({ name: \"group\" });\n *\n * return (\n * <>\n * <Radio {...getRadioProps(\"a\")} label=\"First\" />\n * <Radio {...getRadioProps(\"b\")} label=\"Second\" />\n * <Radio {...getRadioProps(\"c\")} label=\"Third\" />\n * </>\n * );\n * ```\n *\n * @example String Union Example\n * ```tsx\n * const values = [\n * { label: \"First\", value: \"a\" },\n * { label: \"Second\", value: \"b\" },\n * { label: \"Third\", value: \"c\" },\n * ] as const;\n *\n * type Values = typeof values[number][\"value\"];\n * // ^ \"a\" | \"b\" | \"c\"\n *\n * const { value, getRadioProps } = useRadioGroup<Values | \"\">({\n * name: \"group\",\n * defaultValue: \"\",\n * });\n *\n *\n * return (\n * <>\n * {values.map(({ label, value }) => (\n * <Radio {...getRadioProps(value)} key={value} label={label} />\n * ))}\n * </>\n * );\n * ```\n * @since 6.0.0\n */\nexport function useRadioGroup<V extends string>(\n options: RadioGroupOptions<V> & {\n menu?: false;\n name: string;\n defaultValue?: UseStateInitializer<V>;\n }\n): RadioGroupImplementation<V>;\nexport function useRadioGroup<V extends string>(\n options: RadioGroupOptions<V> & {\n menu: true;\n name?: never;\n required?: never;\n onChange?: never;\n onInvalid?: never;\n defaultValue?: UseStateInitializer<V>;\n }\n): MenuItemRadioGroupImplementation<V>;\n/**\n * @example Strict Union Example\n * ```tsx\n * type ValidValues = 1 | 2 | 3 | 4 | \"\" | \"a\" | \"b\";\n *\n * const { value, getRadioProps } = useRadioGroup<ValidValues>({\n * name: \"group\",\n * defaultValue: \"\"\n * });\n *\n *\n * return (\n * <>\n * <Radio {...getRadioProps(1)} label=\"First\" />\n * <Radio {...getRadioProps(2)} label=\"Second\" />\n * <Radio {...getRadioProps(3)} label=\"Third\" />\n * <Radio {...getRadioProps(4)} label=\"Forth\" />\n * <Radio {...getRadioProps(\"a\")} label=\"Fifth\" />\n * <Radio {...getRadioProps(\"b\")} label=\"Sixth\" />\n * <Radio {...getRadioProps(\"c\")} label=\"Seventh\" />\n * </>\n * );\n * ```\n * @since 6.0.0\n */\nexport function useRadioGroup<V extends string | number>(\n options: RadioGroupOptions<V>\n): CombinedRadioGroupReturnValue<V> {\n const {\n name,\n defaultValue,\n menu = false,\n required,\n onChange = noop,\n onInvalid = noop,\n } = options;\n const [value, setValue] = useState<V>(() => {\n if (typeof defaultValue === \"function\") {\n return defaultValue();\n }\n\n return defaultValue ?? (\"\" as V);\n });\n const initial = useRef(value);\n const [error, setError] = useState(false);\n\n return {\n reset: useCallback(() => {\n setError(false);\n setValue(initial.current);\n }, []),\n value,\n setValue,\n getRadioProps(radioValue) {\n const checked = value === radioValue;\n if (menu) {\n return {\n checked,\n onCheckedChange() {\n setValue(radioValue);\n },\n };\n }\n\n return {\n name,\n value: radioValue,\n error,\n checked,\n required,\n onChange(event) {\n onChange(event);\n setError(false);\n setValue(radioValue);\n },\n onInvalid(event) {\n onInvalid(event);\n setError(true);\n },\n };\n },\n };\n}\n"],"names":["useCallback","useRef","useState","noop","useRadioGroup","options","name","defaultValue","menu","required","onChange","onInvalid","value","setValue","initial","error","setError","reset","current","getRadioProps","radioValue","checked","onCheckedChange","event"],"mappings":"AAAA;AACA,SACEA,WAAW,EACXC,MAAM,EACNC,QAAQ,QAGH,QAAQ;AAGf,MAAMC,OAAO;AACX,aAAa;AACf;AAqNA;;;;;;;;;;;;;;;;;;;;;;;;CAwBC,GACD,OAAO,SAASC,cACdC,OAA6B;IAE7B,MAAM,EACJC,IAAI,EACJC,YAAY,EACZC,OAAO,KAAK,EACZC,QAAQ,EACRC,WAAWP,IAAI,EACfQ,YAAYR,IAAI,EACjB,GAAGE;IACJ,MAAM,CAACO,OAAOC,SAAS,GAAGX,SAAY;QACpC,IAAI,OAAOK,iBAAiB,YAAY;YACtC,OAAOA;QACT;QAEA,OAAOA,gBAAiB;IAC1B;IACA,MAAMO,UAAUb,OAAOW;IACvB,MAAM,CAACG,OAAOC,SAAS,GAAGd,SAAS;IAEnC,OAAO;QACLe,OAAOjB,YAAY;YACjBgB,SAAS;YACTH,SAASC,QAAQI,OAAO;QAC1B,GAAG,EAAE;QACLN;QACAC;QACAM,eAAcC,UAAU;YACtB,MAAMC,UAAUT,UAAUQ;YAC1B,IAAIZ,MAAM;gBACR,OAAO;oBACLa;oBACAC;wBACET,SAASO;oBACX;gBACF;YACF;YAEA,OAAO;gBACLd;gBACAM,OAAOQ;gBACPL;gBACAM;gBACAZ;gBACAC,UAASa,KAAK;oBACZb,SAASa;oBACTP,SAAS;oBACTH,SAASO;gBACX;gBACAT,WAAUY,KAAK;oBACbZ,UAAUY;oBACVP,SAAS;gBACX;YACF;QACF;IACF;AACF"}
|