@salt-ds/core 1.22.0 → 1.24.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/css/salt-core.css +201 -96
- package/dist-cjs/accordion/Accordion.js +9 -2
- package/dist-cjs/accordion/Accordion.js.map +1 -1
- package/dist-cjs/accordion/AccordionContext.js +9 -2
- package/dist-cjs/accordion/AccordionContext.js.map +1 -1
- package/dist-cjs/accordion/AccordionGroup.js +9 -2
- package/dist-cjs/accordion/AccordionGroup.js.map +1 -1
- package/dist-cjs/accordion/AccordionHeader.js +10 -2
- package/dist-cjs/accordion/AccordionHeader.js.map +1 -1
- package/dist-cjs/accordion/AccordionPanel.js +9 -2
- package/dist-cjs/accordion/AccordionPanel.js.map +1 -1
- package/dist-cjs/aria-announcer/useAriaAnnouncer.js +9 -2
- package/dist-cjs/aria-announcer/useAriaAnnouncer.js.map +1 -1
- package/dist-cjs/avatar/Avatar.js +9 -2
- package/dist-cjs/avatar/Avatar.js.map +1 -1
- package/dist-cjs/avatar/useAvatarImage.js +9 -2
- package/dist-cjs/avatar/useAvatarImage.js.map +1 -1
- package/dist-cjs/badge/Badge.js +9 -2
- package/dist-cjs/badge/Badge.js.map +1 -1
- package/dist-cjs/banner/Banner.js +9 -2
- package/dist-cjs/banner/Banner.js.map +1 -1
- package/dist-cjs/banner/BannerActions.js +9 -2
- package/dist-cjs/banner/BannerActions.js.map +1 -1
- package/dist-cjs/banner/BannerContent.js +9 -2
- package/dist-cjs/banner/BannerContent.js.map +1 -1
- package/dist-cjs/border-item/BorderItem.js +9 -2
- package/dist-cjs/border-item/BorderItem.js.map +1 -1
- package/dist-cjs/border-layout/BorderLayout.js +9 -2
- package/dist-cjs/border-layout/BorderLayout.js.map +1 -1
- package/dist-cjs/button/Button.js +9 -2
- package/dist-cjs/button/Button.js.map +1 -1
- package/dist-cjs/card/Card.css.js +1 -1
- package/dist-cjs/card/Card.js +9 -2
- package/dist-cjs/card/Card.js.map +1 -1
- package/dist-cjs/checkbox/Checkbox.js +10 -3
- package/dist-cjs/checkbox/Checkbox.js.map +1 -1
- package/dist-cjs/checkbox/CheckboxGroup.js +9 -2
- package/dist-cjs/checkbox/CheckboxGroup.js.map +1 -1
- package/dist-cjs/checkbox/CheckboxIcon.js +9 -2
- package/dist-cjs/checkbox/CheckboxIcon.js.map +1 -1
- package/dist-cjs/checkbox/internal/CheckboxGroupContext.js +9 -2
- package/dist-cjs/checkbox/internal/CheckboxGroupContext.js.map +1 -1
- package/dist-cjs/combo-box/ComboBox.js +8 -1
- package/dist-cjs/combo-box/ComboBox.js.map +1 -1
- package/dist-cjs/combo-box/useComboBox.js +9 -2
- package/dist-cjs/combo-box/useComboBox.js.map +1 -1
- package/dist-cjs/dialog/Dialog.js +10 -3
- package/dist-cjs/dialog/Dialog.js.map +1 -1
- package/dist-cjs/dialog/DialogActions.js +9 -2
- package/dist-cjs/dialog/DialogActions.js.map +1 -1
- package/dist-cjs/dialog/DialogCloseButton.js +12 -3
- package/dist-cjs/dialog/DialogCloseButton.js.map +1 -1
- package/dist-cjs/dialog/DialogContent.js +9 -2
- package/dist-cjs/dialog/DialogContent.js.map +1 -1
- package/dist-cjs/dialog/DialogHeader.js +9 -2
- package/dist-cjs/dialog/DialogHeader.js.map +1 -1
- package/dist-cjs/drawer/Drawer.js +8 -1
- package/dist-cjs/drawer/Drawer.js.map +1 -1
- package/dist-cjs/drawer/DrawerCloseButton.js +9 -2
- package/dist-cjs/drawer/DrawerCloseButton.js.map +1 -1
- package/dist-cjs/dropdown/Dropdown.js +9 -2
- package/dist-cjs/dropdown/Dropdown.js.map +1 -1
- package/dist-cjs/file-drop-zone/FileDropZone.js +9 -2
- package/dist-cjs/file-drop-zone/FileDropZone.js.map +1 -1
- package/dist-cjs/file-drop-zone/FileDropZoneTrigger.js +9 -2
- package/dist-cjs/file-drop-zone/FileDropZoneTrigger.js.map +1 -1
- package/dist-cjs/flex-item/FlexItem.js +9 -2
- package/dist-cjs/flex-item/FlexItem.js.map +1 -1
- package/dist-cjs/flex-layout/FlexLayout.js +9 -2
- package/dist-cjs/flex-layout/FlexLayout.js.map +1 -1
- package/dist-cjs/form-field/FormField.js +9 -2
- package/dist-cjs/form-field/FormField.js.map +1 -1
- package/dist-cjs/form-field/FormFieldHelperText.js +9 -2
- package/dist-cjs/form-field/FormFieldHelperText.js.map +1 -1
- package/dist-cjs/form-field/FormFieldLabel.js +9 -2
- package/dist-cjs/form-field/FormFieldLabel.js.map +1 -1
- package/dist-cjs/form-field-context/FormFieldContext.js +9 -2
- package/dist-cjs/form-field-context/FormFieldContext.js.map +1 -1
- package/dist-cjs/grid-item/GridItem.js +9 -2
- package/dist-cjs/grid-item/GridItem.js.map +1 -1
- package/dist-cjs/grid-layout/GridLayout.js +9 -2
- package/dist-cjs/grid-layout/GridLayout.js.map +1 -1
- package/dist-cjs/index.js +19 -2
- package/dist-cjs/index.js.map +1 -1
- package/dist-cjs/input/Input.js +9 -2
- package/dist-cjs/input/Input.js.map +1 -1
- package/dist-cjs/interactable-card/InteractableCard.css.js +6 -0
- package/dist-cjs/interactable-card/InteractableCard.js +201 -0
- package/dist-cjs/interactable-card/InteractableCard.js.map +1 -0
- package/dist-cjs/interactable-card/InteractableCardGroup.css.js +6 -0
- package/dist-cjs/interactable-card/InteractableCardGroup.css.js.map +1 -0
- package/dist-cjs/interactable-card/InteractableCardGroup.js +232 -0
- package/dist-cjs/interactable-card/InteractableCardGroup.js.map +1 -0
- package/dist-cjs/interactable-card/InteractableCardGroupContext.js +107 -0
- package/dist-cjs/interactable-card/InteractableCardGroupContext.js.map +1 -0
- package/dist-cjs/{card → interactable-card}/useInteractableCard.js +5 -2
- package/dist-cjs/interactable-card/useInteractableCard.js.map +1 -0
- package/dist-cjs/link/Link.js +9 -2
- package/dist-cjs/link/Link.js.map +1 -1
- package/dist-cjs/link-card/LinkCard.css.js +1 -1
- package/dist-cjs/link-card/LinkCard.js +9 -2
- package/dist-cjs/link-card/LinkCard.js.map +1 -1
- package/dist-cjs/list-control/ListControlContext.js +9 -2
- package/dist-cjs/list-control/ListControlContext.js.map +1 -1
- package/dist-cjs/list-control/ListControlState.js +9 -2
- package/dist-cjs/list-control/ListControlState.js.map +1 -1
- package/dist-cjs/multiline-input/MultilineInput.js +9 -2
- package/dist-cjs/multiline-input/MultilineInput.js.map +1 -1
- package/dist-cjs/navigation-item/NavigationItem.js +9 -2
- package/dist-cjs/navigation-item/NavigationItem.js.map +1 -1
- package/dist-cjs/option/Option.js +9 -2
- package/dist-cjs/option/Option.js.map +1 -1
- package/dist-cjs/option/OptionGroup.js +9 -2
- package/dist-cjs/option/OptionGroup.js.map +1 -1
- package/dist-cjs/option/OptionList.js +9 -2
- package/dist-cjs/option/OptionList.js.map +1 -1
- package/dist-cjs/option/OptionListBase.js +9 -2
- package/dist-cjs/option/OptionListBase.js.map +1 -1
- package/dist-cjs/overlay/Overlay.js +164 -0
- package/dist-cjs/overlay/Overlay.js.map +1 -0
- package/dist-cjs/overlay/OverlayContext.js +127 -0
- package/dist-cjs/overlay/OverlayContext.js.map +1 -0
- package/dist-cjs/overlay/OverlayPanel.css.js +6 -0
- package/dist-cjs/overlay/OverlayPanel.css.js.map +1 -0
- package/dist-cjs/overlay/OverlayPanel.js +166 -0
- package/dist-cjs/overlay/OverlayPanel.js.map +1 -0
- package/dist-cjs/overlay/OverlayPanelCloseButton.css.js +6 -0
- package/dist-cjs/overlay/OverlayPanelCloseButton.css.js.map +1 -0
- package/dist-cjs/overlay/OverlayPanelCloseButton.js +129 -0
- package/dist-cjs/overlay/OverlayPanelCloseButton.js.map +1 -0
- package/dist-cjs/overlay/OverlayPanelContent.css.js +6 -0
- package/dist-cjs/overlay/OverlayPanelContent.css.js.map +1 -0
- package/dist-cjs/{card/InteractableCard.js → overlay/OverlayPanelContent.js} +24 -44
- package/dist-cjs/overlay/OverlayPanelContent.js.map +1 -0
- package/dist-cjs/overlay/OverlayTrigger.js +123 -0
- package/dist-cjs/overlay/OverlayTrigger.js.map +1 -0
- package/dist-cjs/pagination/CompactInput.js +9 -2
- package/dist-cjs/pagination/CompactInput.js.map +1 -1
- package/dist-cjs/pagination/CompactPaginator.js +9 -2
- package/dist-cjs/pagination/CompactPaginator.js.map +1 -1
- package/dist-cjs/pagination/GoToInput.js +9 -2
- package/dist-cjs/pagination/GoToInput.js.map +1 -1
- package/dist-cjs/pagination/PageButton.js +9 -2
- package/dist-cjs/pagination/PageButton.js.map +1 -1
- package/dist-cjs/pagination/PageRanges.js +9 -2
- package/dist-cjs/pagination/PageRanges.js.map +1 -1
- package/dist-cjs/pagination/Pagination.js +9 -2
- package/dist-cjs/pagination/Pagination.js.map +1 -1
- package/dist-cjs/pagination/Paginator.js +9 -2
- package/dist-cjs/pagination/Paginator.js.map +1 -1
- package/dist-cjs/panel/Panel.js +9 -2
- package/dist-cjs/panel/Panel.js.map +1 -1
- package/dist-cjs/pill/Pill.js +10 -2
- package/dist-cjs/pill/Pill.js.map +1 -1
- package/dist-cjs/pill-input/PillInput.js +9 -2
- package/dist-cjs/pill-input/PillInput.js.map +1 -1
- package/dist-cjs/progress/CircularProgress/CircularProgress.js +9 -2
- package/dist-cjs/progress/CircularProgress/CircularProgress.js.map +1 -1
- package/dist-cjs/progress/LinearProgress/LinearProgress.js +11 -4
- package/dist-cjs/progress/LinearProgress/LinearProgress.js.map +1 -1
- package/dist-cjs/radio-button/RadioButton.js +10 -3
- package/dist-cjs/radio-button/RadioButton.js.map +1 -1
- package/dist-cjs/radio-button/RadioButtonGroup.js +9 -2
- package/dist-cjs/radio-button/RadioButtonGroup.js.map +1 -1
- package/dist-cjs/radio-button/RadioButtonIcon.js +9 -2
- package/dist-cjs/radio-button/RadioButtonIcon.js.map +1 -1
- package/dist-cjs/radio-button/internal/RadioGroupContext.js +9 -2
- package/dist-cjs/radio-button/internal/RadioGroupContext.js.map +1 -1
- package/dist-cjs/salt-provider/SaltProvider.js +9 -2
- package/dist-cjs/salt-provider/SaltProvider.js.map +1 -1
- package/dist-cjs/scrim/Scrim.js +9 -2
- package/dist-cjs/scrim/Scrim.js.map +1 -1
- package/dist-cjs/segmented-button-group/SegmentedButtonGroup.css.js +6 -0
- package/dist-cjs/segmented-button-group/SegmentedButtonGroup.css.js.map +1 -0
- package/dist-cjs/segmented-button-group/SegmentedButtonGroup.js +118 -0
- package/dist-cjs/segmented-button-group/SegmentedButtonGroup.js.map +1 -0
- package/dist-cjs/spinner/Spinner.js +9 -2
- package/dist-cjs/spinner/Spinner.js.map +1 -1
- package/dist-cjs/spinner/svgSpinners/SpinnerSVG.js +9 -2
- package/dist-cjs/spinner/svgSpinners/SpinnerSVG.js.map +1 -1
- package/dist-cjs/split-layout/SplitLayout.js +9 -2
- package/dist-cjs/split-layout/SplitLayout.js.map +1 -1
- package/dist-cjs/stack-layout/StackLayout.js +9 -2
- package/dist-cjs/stack-layout/StackLayout.js.map +1 -1
- package/dist-cjs/status-adornment/StatusAdornment.js +9 -2
- package/dist-cjs/status-adornment/StatusAdornment.js.map +1 -1
- package/dist-cjs/status-indicator/StatusIndicator.js +9 -2
- package/dist-cjs/status-indicator/StatusIndicator.js.map +1 -1
- package/dist-cjs/switch/Switch.js +10 -2
- package/dist-cjs/switch/Switch.js.map +1 -1
- package/dist-cjs/text/Text.js +9 -2
- package/dist-cjs/text/Text.js.map +1 -1
- package/dist-cjs/toast/Toast.js +9 -2
- package/dist-cjs/toast/Toast.js.map +1 -1
- package/dist-cjs/toast/ToastContent.js +9 -2
- package/dist-cjs/toast/ToastContent.js.map +1 -1
- package/dist-cjs/toggle-button/ToggleButton.js +10 -2
- package/dist-cjs/toggle-button/ToggleButton.js.map +1 -1
- package/dist-cjs/toggle-button-group/ToggleButtonGroup.js +9 -2
- package/dist-cjs/toggle-button-group/ToggleButtonGroup.js.map +1 -1
- package/dist-cjs/toggle-button-group/ToggleButtonGroupContext.js +9 -2
- package/dist-cjs/toggle-button-group/ToggleButtonGroupContext.js.map +1 -1
- package/dist-cjs/tooltip/Tooltip.css.js +1 -1
- package/dist-cjs/tooltip/Tooltip.js +15 -3
- package/dist-cjs/tooltip/Tooltip.js.map +1 -1
- package/dist-cjs/tooltip/TooltipBase.js +9 -2
- package/dist-cjs/tooltip/TooltipBase.js.map +1 -1
- package/dist-cjs/tooltip/useAriaAnnounce.js +9 -2
- package/dist-cjs/tooltip/useAriaAnnounce.js.map +1 -1
- package/dist-cjs/tooltip/useTooltip.js +8 -1
- package/dist-cjs/tooltip/useTooltip.js.map +1 -1
- package/dist-cjs/utils/useFloatingUI/useFloatingUI.js +3 -5
- package/dist-cjs/utils/useFloatingUI/useFloatingUI.js.map +1 -1
- package/dist-cjs/utils/useValueEffect.js +9 -2
- package/dist-cjs/utils/useValueEffect.js.map +1 -1
- package/dist-cjs/viewport/ViewportProvider.js +9 -2
- package/dist-cjs/viewport/ViewportProvider.js.map +1 -1
- package/dist-es/accordion/Accordion.js +9 -2
- package/dist-es/accordion/Accordion.js.map +1 -1
- package/dist-es/accordion/AccordionContext.js +9 -2
- package/dist-es/accordion/AccordionContext.js.map +1 -1
- package/dist-es/accordion/AccordionGroup.js +9 -2
- package/dist-es/accordion/AccordionGroup.js.map +1 -1
- package/dist-es/accordion/AccordionHeader.js +10 -2
- package/dist-es/accordion/AccordionHeader.js.map +1 -1
- package/dist-es/accordion/AccordionPanel.js +9 -2
- package/dist-es/accordion/AccordionPanel.js.map +1 -1
- package/dist-es/aria-announcer/useAriaAnnouncer.js +9 -2
- package/dist-es/aria-announcer/useAriaAnnouncer.js.map +1 -1
- package/dist-es/avatar/Avatar.js +9 -2
- package/dist-es/avatar/Avatar.js.map +1 -1
- package/dist-es/avatar/useAvatarImage.js +9 -2
- package/dist-es/avatar/useAvatarImage.js.map +1 -1
- package/dist-es/badge/Badge.js +9 -2
- package/dist-es/badge/Badge.js.map +1 -1
- package/dist-es/banner/Banner.js +9 -2
- package/dist-es/banner/Banner.js.map +1 -1
- package/dist-es/banner/BannerActions.js +9 -2
- package/dist-es/banner/BannerActions.js.map +1 -1
- package/dist-es/banner/BannerContent.js +9 -2
- package/dist-es/banner/BannerContent.js.map +1 -1
- package/dist-es/border-item/BorderItem.js +9 -2
- package/dist-es/border-item/BorderItem.js.map +1 -1
- package/dist-es/border-layout/BorderLayout.js +9 -2
- package/dist-es/border-layout/BorderLayout.js.map +1 -1
- package/dist-es/button/Button.js +9 -2
- package/dist-es/button/Button.js.map +1 -1
- package/dist-es/card/Card.css.js +1 -1
- package/dist-es/card/Card.js +9 -2
- package/dist-es/card/Card.js.map +1 -1
- package/dist-es/checkbox/Checkbox.js +10 -3
- package/dist-es/checkbox/Checkbox.js.map +1 -1
- package/dist-es/checkbox/CheckboxGroup.js +9 -2
- package/dist-es/checkbox/CheckboxGroup.js.map +1 -1
- package/dist-es/checkbox/CheckboxIcon.js +9 -2
- package/dist-es/checkbox/CheckboxIcon.js.map +1 -1
- package/dist-es/checkbox/internal/CheckboxGroupContext.js +9 -2
- package/dist-es/checkbox/internal/CheckboxGroupContext.js.map +1 -1
- package/dist-es/combo-box/ComboBox.js +8 -1
- package/dist-es/combo-box/ComboBox.js.map +1 -1
- package/dist-es/combo-box/useComboBox.js +9 -2
- package/dist-es/combo-box/useComboBox.js.map +1 -1
- package/dist-es/dialog/Dialog.js +10 -3
- package/dist-es/dialog/Dialog.js.map +1 -1
- package/dist-es/dialog/DialogActions.js +9 -2
- package/dist-es/dialog/DialogActions.js.map +1 -1
- package/dist-es/dialog/DialogCloseButton.js +12 -3
- package/dist-es/dialog/DialogCloseButton.js.map +1 -1
- package/dist-es/dialog/DialogContent.js +9 -2
- package/dist-es/dialog/DialogContent.js.map +1 -1
- package/dist-es/dialog/DialogHeader.js +9 -2
- package/dist-es/dialog/DialogHeader.js.map +1 -1
- package/dist-es/drawer/Drawer.js +8 -1
- package/dist-es/drawer/Drawer.js.map +1 -1
- package/dist-es/drawer/DrawerCloseButton.js +9 -2
- package/dist-es/drawer/DrawerCloseButton.js.map +1 -1
- package/dist-es/dropdown/Dropdown.js +9 -2
- package/dist-es/dropdown/Dropdown.js.map +1 -1
- package/dist-es/file-drop-zone/FileDropZone.js +9 -2
- package/dist-es/file-drop-zone/FileDropZone.js.map +1 -1
- package/dist-es/file-drop-zone/FileDropZoneTrigger.js +9 -2
- package/dist-es/file-drop-zone/FileDropZoneTrigger.js.map +1 -1
- package/dist-es/flex-item/FlexItem.js +9 -2
- package/dist-es/flex-item/FlexItem.js.map +1 -1
- package/dist-es/flex-layout/FlexLayout.js +9 -2
- package/dist-es/flex-layout/FlexLayout.js.map +1 -1
- package/dist-es/form-field/FormField.js +9 -2
- package/dist-es/form-field/FormField.js.map +1 -1
- package/dist-es/form-field/FormFieldHelperText.js +9 -2
- package/dist-es/form-field/FormFieldHelperText.js.map +1 -1
- package/dist-es/form-field/FormFieldLabel.js +9 -2
- package/dist-es/form-field/FormFieldLabel.js.map +1 -1
- package/dist-es/form-field-context/FormFieldContext.js +9 -2
- package/dist-es/form-field-context/FormFieldContext.js.map +1 -1
- package/dist-es/grid-item/GridItem.js +9 -2
- package/dist-es/grid-item/GridItem.js.map +1 -1
- package/dist-es/grid-layout/GridLayout.js +9 -2
- package/dist-es/grid-layout/GridLayout.js.map +1 -1
- package/dist-es/index.js +9 -1
- package/dist-es/index.js.map +1 -1
- package/dist-es/input/Input.js +9 -2
- package/dist-es/input/Input.js.map +1 -1
- package/dist-es/interactable-card/InteractableCard.css.js +4 -0
- package/dist-es/interactable-card/InteractableCard.js +197 -0
- package/dist-es/interactable-card/InteractableCard.js.map +1 -0
- package/dist-es/interactable-card/InteractableCardGroup.css.js +4 -0
- package/dist-es/interactable-card/InteractableCardGroup.css.js.map +1 -0
- package/dist-es/interactable-card/InteractableCardGroup.js +228 -0
- package/dist-es/interactable-card/InteractableCardGroup.js.map +1 -0
- package/dist-es/interactable-card/InteractableCardGroupContext.js +102 -0
- package/dist-es/interactable-card/InteractableCardGroupContext.js.map +1 -0
- package/dist-es/{card → interactable-card}/useInteractableCard.js +5 -2
- package/dist-es/interactable-card/useInteractableCard.js.map +1 -0
- package/dist-es/link/Link.js +9 -2
- package/dist-es/link/Link.js.map +1 -1
- package/dist-es/link-card/LinkCard.css.js +1 -1
- package/dist-es/link-card/LinkCard.js +9 -2
- package/dist-es/link-card/LinkCard.js.map +1 -1
- package/dist-es/list-control/ListControlContext.js +9 -2
- package/dist-es/list-control/ListControlContext.js.map +1 -1
- package/dist-es/list-control/ListControlState.js +9 -2
- package/dist-es/list-control/ListControlState.js.map +1 -1
- package/dist-es/multiline-input/MultilineInput.js +9 -2
- package/dist-es/multiline-input/MultilineInput.js.map +1 -1
- package/dist-es/navigation-item/NavigationItem.js +9 -2
- package/dist-es/navigation-item/NavigationItem.js.map +1 -1
- package/dist-es/option/Option.js +9 -2
- package/dist-es/option/Option.js.map +1 -1
- package/dist-es/option/OptionGroup.js +9 -2
- package/dist-es/option/OptionGroup.js.map +1 -1
- package/dist-es/option/OptionList.js +9 -2
- package/dist-es/option/OptionList.js.map +1 -1
- package/dist-es/option/OptionListBase.js +9 -2
- package/dist-es/option/OptionListBase.js.map +1 -1
- package/dist-es/overlay/Overlay.js +160 -0
- package/dist-es/overlay/Overlay.js.map +1 -0
- package/dist-es/overlay/OverlayContext.js +122 -0
- package/dist-es/overlay/OverlayContext.js.map +1 -0
- package/dist-es/overlay/OverlayPanel.css.js +4 -0
- package/dist-es/overlay/OverlayPanel.css.js.map +1 -0
- package/dist-es/overlay/OverlayPanel.js +162 -0
- package/dist-es/overlay/OverlayPanel.js.map +1 -0
- package/dist-es/overlay/OverlayPanelCloseButton.css.js +4 -0
- package/dist-es/overlay/OverlayPanelCloseButton.css.js.map +1 -0
- package/dist-es/overlay/OverlayPanelCloseButton.js +121 -0
- package/dist-es/overlay/OverlayPanelCloseButton.js.map +1 -0
- package/dist-es/overlay/OverlayPanelContent.css.js +4 -0
- package/dist-es/overlay/OverlayPanelContent.css.js.map +1 -0
- package/dist-es/overlay/OverlayPanelContent.js +115 -0
- package/dist-es/overlay/OverlayPanelContent.js.map +1 -0
- package/dist-es/overlay/OverlayTrigger.js +119 -0
- package/dist-es/overlay/OverlayTrigger.js.map +1 -0
- package/dist-es/pagination/CompactInput.js +9 -2
- package/dist-es/pagination/CompactInput.js.map +1 -1
- package/dist-es/pagination/CompactPaginator.js +9 -2
- package/dist-es/pagination/CompactPaginator.js.map +1 -1
- package/dist-es/pagination/GoToInput.js +9 -2
- package/dist-es/pagination/GoToInput.js.map +1 -1
- package/dist-es/pagination/PageButton.js +9 -2
- package/dist-es/pagination/PageButton.js.map +1 -1
- package/dist-es/pagination/PageRanges.js +9 -2
- package/dist-es/pagination/PageRanges.js.map +1 -1
- package/dist-es/pagination/Pagination.js +9 -2
- package/dist-es/pagination/Pagination.js.map +1 -1
- package/dist-es/pagination/Paginator.js +9 -2
- package/dist-es/pagination/Paginator.js.map +1 -1
- package/dist-es/panel/Panel.js +9 -2
- package/dist-es/panel/Panel.js.map +1 -1
- package/dist-es/pill/Pill.js +10 -2
- package/dist-es/pill/Pill.js.map +1 -1
- package/dist-es/pill-input/PillInput.js +9 -2
- package/dist-es/pill-input/PillInput.js.map +1 -1
- package/dist-es/progress/CircularProgress/CircularProgress.js +9 -2
- package/dist-es/progress/CircularProgress/CircularProgress.js.map +1 -1
- package/dist-es/progress/LinearProgress/LinearProgress.js +11 -4
- package/dist-es/progress/LinearProgress/LinearProgress.js.map +1 -1
- package/dist-es/radio-button/RadioButton.js +10 -3
- package/dist-es/radio-button/RadioButton.js.map +1 -1
- package/dist-es/radio-button/RadioButtonGroup.js +9 -2
- package/dist-es/radio-button/RadioButtonGroup.js.map +1 -1
- package/dist-es/radio-button/RadioButtonIcon.js +9 -2
- package/dist-es/radio-button/RadioButtonIcon.js.map +1 -1
- package/dist-es/radio-button/internal/RadioGroupContext.js +9 -2
- package/dist-es/radio-button/internal/RadioGroupContext.js.map +1 -1
- package/dist-es/salt-provider/SaltProvider.js +9 -2
- package/dist-es/salt-provider/SaltProvider.js.map +1 -1
- package/dist-es/scrim/Scrim.js +9 -2
- package/dist-es/scrim/Scrim.js.map +1 -1
- package/dist-es/segmented-button-group/SegmentedButtonGroup.css.js +4 -0
- package/dist-es/segmented-button-group/SegmentedButtonGroup.css.js.map +1 -0
- package/dist-es/{card/InteractableCard.js → segmented-button-group/SegmentedButtonGroup.js} +20 -45
- package/dist-es/segmented-button-group/SegmentedButtonGroup.js.map +1 -0
- package/dist-es/spinner/Spinner.js +9 -2
- package/dist-es/spinner/Spinner.js.map +1 -1
- package/dist-es/spinner/svgSpinners/SpinnerSVG.js +9 -2
- package/dist-es/spinner/svgSpinners/SpinnerSVG.js.map +1 -1
- package/dist-es/split-layout/SplitLayout.js +9 -2
- package/dist-es/split-layout/SplitLayout.js.map +1 -1
- package/dist-es/stack-layout/StackLayout.js +9 -2
- package/dist-es/stack-layout/StackLayout.js.map +1 -1
- package/dist-es/status-adornment/StatusAdornment.js +9 -2
- package/dist-es/status-adornment/StatusAdornment.js.map +1 -1
- package/dist-es/status-indicator/StatusIndicator.js +9 -2
- package/dist-es/status-indicator/StatusIndicator.js.map +1 -1
- package/dist-es/switch/Switch.js +10 -2
- package/dist-es/switch/Switch.js.map +1 -1
- package/dist-es/text/Text.js +9 -2
- package/dist-es/text/Text.js.map +1 -1
- package/dist-es/toast/Toast.js +9 -2
- package/dist-es/toast/Toast.js.map +1 -1
- package/dist-es/toast/ToastContent.js +9 -2
- package/dist-es/toast/ToastContent.js.map +1 -1
- package/dist-es/toggle-button/ToggleButton.js +10 -2
- package/dist-es/toggle-button/ToggleButton.js.map +1 -1
- package/dist-es/toggle-button-group/ToggleButtonGroup.js +9 -2
- package/dist-es/toggle-button-group/ToggleButtonGroup.js.map +1 -1
- package/dist-es/toggle-button-group/ToggleButtonGroupContext.js +9 -2
- package/dist-es/toggle-button-group/ToggleButtonGroupContext.js.map +1 -1
- package/dist-es/tooltip/Tooltip.css.js +1 -1
- package/dist-es/tooltip/Tooltip.js +15 -3
- package/dist-es/tooltip/Tooltip.js.map +1 -1
- package/dist-es/tooltip/TooltipBase.js +9 -2
- package/dist-es/tooltip/TooltipBase.js.map +1 -1
- package/dist-es/tooltip/useAriaAnnounce.js +9 -2
- package/dist-es/tooltip/useAriaAnnounce.js.map +1 -1
- package/dist-es/tooltip/useTooltip.js +8 -1
- package/dist-es/tooltip/useTooltip.js.map +1 -1
- package/dist-es/utils/useFloatingUI/useFloatingUI.js +3 -5
- package/dist-es/utils/useFloatingUI/useFloatingUI.js.map +1 -1
- package/dist-es/utils/useValueEffect.js +9 -2
- package/dist-es/utils/useValueEffect.js.map +1 -1
- package/dist-es/viewport/ViewportProvider.js +9 -2
- package/dist-es/viewport/ViewportProvider.js.map +1 -1
- package/dist-types/card/index.d.ts +0 -1
- package/dist-types/index.d.ts +3 -0
- package/dist-types/{card → interactable-card}/InteractableCard.d.ts +15 -1
- package/dist-types/interactable-card/InteractableCardGroup.d.ts +27 -0
- package/dist-types/interactable-card/InteractableCardGroupContext.d.ts +12 -0
- package/dist-types/interactable-card/index.d.ts +3 -0
- package/dist-types/overlay/Overlay.d.ts +13 -0
- package/dist-types/overlay/OverlayContext.d.ts +21 -0
- package/dist-types/overlay/OverlayPanel.d.ts +8 -0
- package/dist-types/overlay/OverlayPanelCloseButton.d.ts +2 -0
- package/dist-types/overlay/OverlayPanelContent.d.ts +8 -0
- package/dist-types/overlay/OverlayTrigger.d.ts +5 -0
- package/dist-types/overlay/index.d.ts +5 -0
- package/dist-types/segmented-button-group/SegmentedButtonGroup.d.ts +4 -0
- package/dist-types/segmented-button-group/index.d.ts +1 -0
- package/dist-types/tooltip/Tooltip.d.ts +2 -1
- package/dist-types/tooltip/TooltipBase.d.ts +2 -2
- package/dist-types/utils/useFloatingUI/useFloatingUI.d.ts +1 -1
- package/package.json +2 -2
- package/dist-cjs/card/InteractableCard.css.js +0 -6
- package/dist-cjs/card/InteractableCard.js.map +0 -1
- package/dist-cjs/card/useInteractableCard.js.map +0 -1
- package/dist-es/card/InteractableCard.css.js +0 -4
- package/dist-es/card/InteractableCard.js.map +0 -1
- package/dist-es/card/useInteractableCard.js.map +0 -1
- /package/dist-cjs/{card → interactable-card}/InteractableCard.css.js.map +0 -0
- /package/dist-es/{card → interactable-card}/InteractableCard.css.js.map +0 -0
- /package/dist-types/{card → interactable-card}/useInteractableCard.d.ts +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PillInput.js","sources":["../src/pill-input/PillInput.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n ChangeEvent,\n KeyboardEvent,\n SyntheticEvent,\n ComponentPropsWithoutRef,\n MouseEvent,\n ForwardedRef,\n forwardRef,\n InputHTMLAttributes,\n ReactNode,\n Ref,\n useState,\n useRef,\n} from \"react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { CloseIcon, OverflowMenuIcon } from \"@salt-ds/icons\";\nimport { makePrefixer, useControlled, useId, useForkRef } from \"../utils\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { StatusAdornment } from \"../status-adornment\";\nimport { Pill } from \"../pill\";\nimport { useTruncatePills } from \"./useTruncatePills\";\n\nimport pillInputCss from \"./PillInput.css\";\n\nconst withBaseName = makePrefixer(\"saltPillInput\");\n\nexport interface PillInputProps\n extends Omit<ComponentPropsWithoutRef<\"div\">, \"defaultValue\">,\n Pick<\n ComponentPropsWithoutRef<\"input\">,\n \"disabled\" | \"value\" | \"defaultValue\" | \"placeholder\"\n > {\n /**\n * The marker to use in an empty read only Input.\n * Use `''` to disable this feature. Defaults to '—'.\n */\n emptyReadOnlyMarker?: string;\n /**\n * End adornment component\n */\n endAdornment?: ReactNode;\n /**\n * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.\n */\n inputProps?: InputHTMLAttributes<HTMLInputElement>;\n /**\n * Optional ref for the input component\n */\n inputRef?: Ref<HTMLInputElement>;\n /**\n * If `true`, the component is read only.\n */\n readOnly?: boolean;\n /**\n * The tokens to display in the input.\n */\n pills?: string[];\n onPillRemove?: (event: SyntheticEvent, index: number) => void;\n /**\n * Start adornment component\n */\n startAdornment?: ReactNode;\n /**\n * Alignment of text within container. Defaults to \"left\"\n */\n textAlign?: \"left\" | \"center\" | \"right\";\n /**\n * Validation status.\n */\n validationStatus?: \"error\" | \"warning\" | \"success\";\n /**\n * Styling variant. Defaults to \"primary\".\n */\n variant?: \"primary\" | \"secondary\";\n hidePillClose?: boolean;\n truncate?: boolean;\n}\n\nexport const PillInput = forwardRef(function PillInput(\n {\n \"aria-activedescendant\": ariaActiveDescendant,\n \"aria-expanded\": ariaExpanded,\n \"aria-owns\": ariaOwns,\n className: classNameProp,\n disabled,\n emptyReadOnlyMarker = \"—\",\n endAdornment,\n hidePillClose,\n id: idProp,\n inputProps = {},\n inputRef: inputRefProp,\n placeholder,\n pills = [],\n onPillRemove,\n readOnly: readOnlyProp,\n role,\n startAdornment,\n style,\n textAlign = \"left\",\n value: valueProp,\n defaultValue: defaultValueProp = valueProp === undefined ? \"\" : undefined,\n validationStatus: validationStatusProp,\n variant = \"primary\",\n truncate,\n ...other\n }: PillInputProps,\n ref: ForwardedRef<HTMLDivElement>\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-pill-input\",\n css: pillInputCss,\n window: targetWindow,\n });\n\n const {\n a11yProps: {\n \"aria-describedby\": formFieldDescribedBy,\n \"aria-labelledby\": formFieldLabelledBy,\n } = {},\n disabled: formFieldDisabled,\n readOnly: formFieldReadOnly,\n necessity: formFieldRequired,\n validationStatus: formFieldValidationStatus,\n } = useFormFieldProps();\n\n const restA11yProps = {\n \"aria-activedescendant\": ariaActiveDescendant,\n \"aria-expanded\": ariaExpanded,\n \"aria-owns\": ariaOwns,\n };\n\n const isDisabled = disabled || formFieldDisabled;\n const isReadOnly = readOnlyProp || formFieldReadOnly;\n const validationStatus = formFieldValidationStatus ?? validationStatusProp;\n\n const [focusedPillIndex, setFocusedPillIndex] = useState(-1);\n\n const isEmptyReadOnly = isReadOnly && !defaultValueProp && !valueProp;\n const defaultValue = isEmptyReadOnly ? emptyReadOnlyMarker : defaultValueProp;\n\n const {\n \"aria-describedby\": inputDescribedBy,\n \"aria-labelledby\": inputLabelledBy,\n onChange,\n required: inputPropsRequired,\n onKeyDown: inputOnKeyDown,\n ...restInputProps\n } = inputProps;\n\n const isRequired = formFieldRequired\n ? [\"required\", \"asterisk\"].includes(formFieldRequired)\n : inputPropsRequired;\n\n const [value, setValue] = useControlled({\n controlled: valueProp,\n default: defaultValue,\n name: \"Input\",\n state: \"value\",\n });\n\n const { visiblePills, pillListRef } = useTruncatePills({\n pills,\n enable: truncate && pills.length > 0,\n });\n\n const id = useId(idProp);\n const pillListId = `${id}-optionsList`;\n\n const pillElementsRef = useRef<HTMLElement[]>([]);\n const inputRef = useRef<HTMLInputElement>(null);\n\n const handleInputRef = useForkRef(inputRef, inputRefProp);\n\n const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n const value = event.target.value;\n setValue(value);\n onChange?.(event);\n };\n\n const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n const target = event.currentTarget;\n if (target.selectionStart === 0 && target.selectionEnd == 0) {\n const lastPillIndex = pills.length - 1;\n const lastPill = pills[lastPillIndex];\n if (event.key === \"Backspace\" && lastPill) {\n event.preventDefault();\n onPillRemove?.(event, lastPillIndex);\n } else if (event.key === \"ArrowLeft\") {\n event.preventDefault();\n // Move focus to last pill\n pillElementsRef.current[lastPillIndex]?.focus();\n }\n }\n\n inputOnKeyDown?.(event);\n };\n\n const handlePillKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n const target = event.currentTarget;\n const index = Number(target.dataset.index);\n if (event.key === \"ArrowLeft\") {\n event.preventDefault();\n // Move focus to previous pill\n pillElementsRef.current[index - 1]?.focus();\n } else if (event.key === \"ArrowRight\") {\n event.preventDefault();\n // Move focus to next pill or input\n if (index === pills.length - 1) {\n inputRef?.current?.focus();\n } else {\n pillElementsRef.current[index + 1]?.focus();\n }\n } else if (event.key == \"Delete\" || event.key === \"Backspace\") {\n event.preventDefault();\n onPillRemove?.(event, index);\n\n if (pills.length === 1) {\n inputRef.current?.focus();\n } else if (index === pills.length - 1) {\n pillElementsRef.current[pills.length - 2]?.focus();\n } else {\n pillElementsRef.current[index]?.focus();\n }\n }\n };\n\n const handlePillClick = (event: MouseEvent<HTMLButtonElement>) => {\n const target = event.currentTarget;\n const index = Number(target.dataset.index);\n onPillRemove?.(event, index);\n inputRef.current?.focus();\n };\n\n const inputStyle = {\n \"--input-textAlign\": textAlign,\n ...style,\n };\n\n return (\n <div\n className={clsx(\n withBaseName(),\n withBaseName(variant),\n {\n [withBaseName(\"disabled\")]: isDisabled,\n [withBaseName(\"readOnly\")]: isReadOnly,\n [withBaseName(\"truncate\")]: truncate,\n [withBaseName(validationStatus ?? \"\")]: validationStatus,\n },\n classNameProp\n )}\n ref={ref}\n style={inputStyle}\n {...other}\n >\n {startAdornment && (\n <div className={withBaseName(\"startAdornmentContainer\")}>\n {startAdornment}\n </div>\n )}\n <div className={withBaseName(\"inputWrapper\")} ref={pillListRef}>\n <div\n role=\"list\"\n className={withBaseName(\"pillList\")}\n aria-labelledby={clsx(formFieldLabelledBy, pillListId)}\n aria-label=\"Selected Options\"\n id={pillListId}\n >\n {visiblePills?.map((pill, index) => (\n <div role=\"listitem\" key={index}>\n <Pill\n data-index={index}\n disabled={disabled}\n ref={(element) => {\n if (element) {\n pillElementsRef.current[index] = element;\n } else {\n pillElementsRef.current = pillElementsRef.current.filter(\n (pillEl) => pillEl !== element\n );\n }\n }}\n onFocus={() => setFocusedPillIndex(index)}\n onKeyDown={handlePillKeyDown}\n onClick={handlePillClick}\n tabIndex={\n focusedPillIndex === -1 || focusedPillIndex === index ? 0 : -1\n }\n >\n {pill}\n {!hidePillClose && <CloseIcon aria-label=\"click to close\" />}\n </Pill>\n </div>\n ))}\n {visiblePills.length < pills.length && (\n <div role=\"listitem\">\n <div\n data-overflowindicator\n className={withBaseName(\"overflowIndicator\")}\n >\n <OverflowMenuIcon aria-hidden />\n </div>\n </div>\n )}\n </div>\n <input\n aria-describedby={clsx(formFieldDescribedBy, inputDescribedBy)}\n aria-labelledby={clsx(formFieldLabelledBy, inputLabelledBy)}\n className={clsx(withBaseName(\"input\"), inputProps?.className)}\n disabled={isDisabled}\n id={id}\n readOnly={isReadOnly}\n ref={handleInputRef}\n role={role}\n tabIndex={isDisabled ? -1 : 0}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n placeholder={placeholder}\n value={value}\n {...restA11yProps}\n {...restInputProps}\n required={isRequired}\n />\n </div>\n {!isDisabled && !isReadOnly && validationStatus && (\n <StatusAdornment status={validationStatus} />\n )}\n {endAdornment && (\n <div className={withBaseName(\"endAdornmentContainer\")}>\n {endAdornment}\n </div>\n )}\n <div className={withBaseName(\"activationIndicator\")} />\n </div>\n );\n});\n"],"names":["PillInput","pillInputCss","value"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"PillInput.js","sources":["../src/pill-input/PillInput.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n ChangeEvent,\n KeyboardEvent,\n SyntheticEvent,\n ComponentPropsWithoutRef,\n MouseEvent,\n ForwardedRef,\n forwardRef,\n InputHTMLAttributes,\n ReactNode,\n Ref,\n useState,\n useRef,\n} from \"react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { CloseIcon, OverflowMenuIcon } from \"@salt-ds/icons\";\nimport { makePrefixer, useControlled, useId, useForkRef } from \"../utils\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { StatusAdornment } from \"../status-adornment\";\nimport { Pill } from \"../pill\";\nimport { useTruncatePills } from \"./useTruncatePills\";\n\nimport pillInputCss from \"./PillInput.css\";\n\nconst withBaseName = makePrefixer(\"saltPillInput\");\n\nexport interface PillInputProps\n extends Omit<ComponentPropsWithoutRef<\"div\">, \"defaultValue\">,\n Pick<\n ComponentPropsWithoutRef<\"input\">,\n \"disabled\" | \"value\" | \"defaultValue\" | \"placeholder\"\n > {\n /**\n * The marker to use in an empty read only Input.\n * Use `''` to disable this feature. Defaults to '—'.\n */\n emptyReadOnlyMarker?: string;\n /**\n * End adornment component\n */\n endAdornment?: ReactNode;\n /**\n * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.\n */\n inputProps?: InputHTMLAttributes<HTMLInputElement>;\n /**\n * Optional ref for the input component\n */\n inputRef?: Ref<HTMLInputElement>;\n /**\n * If `true`, the component is read only.\n */\n readOnly?: boolean;\n /**\n * The tokens to display in the input.\n */\n pills?: string[];\n onPillRemove?: (event: SyntheticEvent, index: number) => void;\n /**\n * Start adornment component\n */\n startAdornment?: ReactNode;\n /**\n * Alignment of text within container. Defaults to \"left\"\n */\n textAlign?: \"left\" | \"center\" | \"right\";\n /**\n * Validation status.\n */\n validationStatus?: \"error\" | \"warning\" | \"success\";\n /**\n * Styling variant. Defaults to \"primary\".\n */\n variant?: \"primary\" | \"secondary\";\n hidePillClose?: boolean;\n truncate?: boolean;\n}\n\nexport const PillInput = forwardRef(function PillInput(\n {\n \"aria-activedescendant\": ariaActiveDescendant,\n \"aria-expanded\": ariaExpanded,\n \"aria-owns\": ariaOwns,\n className: classNameProp,\n disabled,\n emptyReadOnlyMarker = \"—\",\n endAdornment,\n hidePillClose,\n id: idProp,\n inputProps = {},\n inputRef: inputRefProp,\n placeholder,\n pills = [],\n onPillRemove,\n readOnly: readOnlyProp,\n role,\n startAdornment,\n style,\n textAlign = \"left\",\n value: valueProp,\n defaultValue: defaultValueProp = valueProp === undefined ? \"\" : undefined,\n validationStatus: validationStatusProp,\n variant = \"primary\",\n truncate,\n ...other\n }: PillInputProps,\n ref: ForwardedRef<HTMLDivElement>\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-pill-input\",\n css: pillInputCss,\n window: targetWindow,\n });\n\n const {\n a11yProps: {\n \"aria-describedby\": formFieldDescribedBy,\n \"aria-labelledby\": formFieldLabelledBy,\n } = {},\n disabled: formFieldDisabled,\n readOnly: formFieldReadOnly,\n necessity: formFieldRequired,\n validationStatus: formFieldValidationStatus,\n } = useFormFieldProps();\n\n const restA11yProps = {\n \"aria-activedescendant\": ariaActiveDescendant,\n \"aria-expanded\": ariaExpanded,\n \"aria-owns\": ariaOwns,\n };\n\n const isDisabled = disabled || formFieldDisabled;\n const isReadOnly = readOnlyProp || formFieldReadOnly;\n const validationStatus = formFieldValidationStatus ?? validationStatusProp;\n\n const [focusedPillIndex, setFocusedPillIndex] = useState(-1);\n\n const isEmptyReadOnly = isReadOnly && !defaultValueProp && !valueProp;\n const defaultValue = isEmptyReadOnly ? emptyReadOnlyMarker : defaultValueProp;\n\n const {\n \"aria-describedby\": inputDescribedBy,\n \"aria-labelledby\": inputLabelledBy,\n onChange,\n required: inputPropsRequired,\n onKeyDown: inputOnKeyDown,\n ...restInputProps\n } = inputProps;\n\n const isRequired = formFieldRequired\n ? [\"required\", \"asterisk\"].includes(formFieldRequired)\n : inputPropsRequired;\n\n const [value, setValue] = useControlled({\n controlled: valueProp,\n default: defaultValue,\n name: \"Input\",\n state: \"value\",\n });\n\n const { visiblePills, pillListRef } = useTruncatePills({\n pills,\n enable: truncate && pills.length > 0,\n });\n\n const id = useId(idProp);\n const pillListId = `${id}-optionsList`;\n\n const pillElementsRef = useRef<HTMLElement[]>([]);\n const inputRef = useRef<HTMLInputElement>(null);\n\n const handleInputRef = useForkRef(inputRef, inputRefProp);\n\n const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n const value = event.target.value;\n setValue(value);\n onChange?.(event);\n };\n\n const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n const target = event.currentTarget;\n if (target.selectionStart === 0 && target.selectionEnd == 0) {\n const lastPillIndex = pills.length - 1;\n const lastPill = pills[lastPillIndex];\n if (event.key === \"Backspace\" && lastPill) {\n event.preventDefault();\n onPillRemove?.(event, lastPillIndex);\n } else if (event.key === \"ArrowLeft\") {\n event.preventDefault();\n // Move focus to last pill\n pillElementsRef.current[lastPillIndex]?.focus();\n }\n }\n\n inputOnKeyDown?.(event);\n };\n\n const handlePillKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n const target = event.currentTarget;\n const index = Number(target.dataset.index);\n if (event.key === \"ArrowLeft\") {\n event.preventDefault();\n // Move focus to previous pill\n pillElementsRef.current[index - 1]?.focus();\n } else if (event.key === \"ArrowRight\") {\n event.preventDefault();\n // Move focus to next pill or input\n if (index === pills.length - 1) {\n inputRef?.current?.focus();\n } else {\n pillElementsRef.current[index + 1]?.focus();\n }\n } else if (event.key == \"Delete\" || event.key === \"Backspace\") {\n event.preventDefault();\n onPillRemove?.(event, index);\n\n if (pills.length === 1) {\n inputRef.current?.focus();\n } else if (index === pills.length - 1) {\n pillElementsRef.current[pills.length - 2]?.focus();\n } else {\n pillElementsRef.current[index]?.focus();\n }\n }\n };\n\n const handlePillClick = (event: MouseEvent<HTMLButtonElement>) => {\n const target = event.currentTarget;\n const index = Number(target.dataset.index);\n onPillRemove?.(event, index);\n inputRef.current?.focus();\n };\n\n const inputStyle = {\n \"--input-textAlign\": textAlign,\n ...style,\n };\n\n return (\n <div\n className={clsx(\n withBaseName(),\n withBaseName(variant),\n {\n [withBaseName(\"disabled\")]: isDisabled,\n [withBaseName(\"readOnly\")]: isReadOnly,\n [withBaseName(\"truncate\")]: truncate,\n [withBaseName(validationStatus ?? \"\")]: validationStatus,\n },\n classNameProp\n )}\n ref={ref}\n style={inputStyle}\n {...other}\n >\n {startAdornment && (\n <div className={withBaseName(\"startAdornmentContainer\")}>\n {startAdornment}\n </div>\n )}\n <div className={withBaseName(\"inputWrapper\")} ref={pillListRef}>\n <div\n role=\"list\"\n className={withBaseName(\"pillList\")}\n aria-labelledby={clsx(formFieldLabelledBy, pillListId)}\n aria-label=\"Selected Options\"\n id={pillListId}\n >\n {visiblePills?.map((pill, index) => (\n <div role=\"listitem\" key={index}>\n <Pill\n data-index={index}\n disabled={disabled}\n ref={(element) => {\n if (element) {\n pillElementsRef.current[index] = element;\n } else {\n pillElementsRef.current = pillElementsRef.current.filter(\n (pillEl) => pillEl !== element\n );\n }\n }}\n onFocus={() => setFocusedPillIndex(index)}\n onKeyDown={handlePillKeyDown}\n onClick={handlePillClick}\n tabIndex={\n focusedPillIndex === -1 || focusedPillIndex === index ? 0 : -1\n }\n >\n {pill}\n {!hidePillClose && <CloseIcon aria-label=\"click to close\" />}\n </Pill>\n </div>\n ))}\n {visiblePills.length < pills.length && (\n <div role=\"listitem\">\n <div\n data-overflowindicator\n className={withBaseName(\"overflowIndicator\")}\n >\n <OverflowMenuIcon aria-hidden />\n </div>\n </div>\n )}\n </div>\n <input\n aria-describedby={clsx(formFieldDescribedBy, inputDescribedBy)}\n aria-labelledby={clsx(formFieldLabelledBy, inputLabelledBy)}\n className={clsx(withBaseName(\"input\"), inputProps?.className)}\n disabled={isDisabled}\n id={id}\n readOnly={isReadOnly}\n ref={handleInputRef}\n role={role}\n tabIndex={isDisabled ? -1 : 0}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n placeholder={placeholder}\n value={value}\n {...restA11yProps}\n {...restInputProps}\n required={isRequired}\n />\n </div>\n {!isDisabled && !isReadOnly && validationStatus && (\n <StatusAdornment status={validationStatus} />\n )}\n {endAdornment && (\n <div className={withBaseName(\"endAdornmentContainer\")}>\n {endAdornment}\n </div>\n )}\n <div className={withBaseName(\"activationIndicator\")} />\n </div>\n );\n});\n"],"names":["PillInput","pillInputCss","value"],"mappings":"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"}
|
|
@@ -20,7 +20,6 @@ import '../../border-item/BorderItem.js';
|
|
|
20
20
|
import '../../border-layout/BorderLayout.js';
|
|
21
21
|
import '../../button/Button.js';
|
|
22
22
|
import '../../card/Card.js';
|
|
23
|
-
import '../../card/InteractableCard.js';
|
|
24
23
|
import '../../checkbox/Checkbox.js';
|
|
25
24
|
import '../../checkbox/CheckboxGroup.js';
|
|
26
25
|
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
@@ -55,6 +54,9 @@ import '../../form-field-context/FormFieldContext.js';
|
|
|
55
54
|
import '../../grid-item/GridItem.js';
|
|
56
55
|
import '../../grid-layout/GridLayout.js';
|
|
57
56
|
import '../../input/Input.js';
|
|
57
|
+
import '../../interactable-card/InteractableCard.js';
|
|
58
|
+
import '../../interactable-card/InteractableCardGroup.js';
|
|
59
|
+
import '../../interactable-card/InteractableCardGroupContext.js';
|
|
58
60
|
import '../../link/Link.js';
|
|
59
61
|
import '../../link-card/LinkCard.js';
|
|
60
62
|
import '../../list-control/ListControlContext.js';
|
|
@@ -62,6 +64,11 @@ import '../../multiline-input/MultilineInput.js';
|
|
|
62
64
|
import '../../navigation-item/NavigationItem.js';
|
|
63
65
|
import '../../option/Option.js';
|
|
64
66
|
import '../../option/OptionGroup.js';
|
|
67
|
+
import '../../overlay/OverlayContext.js';
|
|
68
|
+
import '@floating-ui/react';
|
|
69
|
+
import '../../overlay/OverlayPanel.js';
|
|
70
|
+
import '../../overlay/OverlayPanelCloseButton.js';
|
|
71
|
+
import '../../overlay/OverlayPanelContent.js';
|
|
65
72
|
import '../../pagination/Pagination.js';
|
|
66
73
|
import '../../pagination/Paginator.js';
|
|
67
74
|
import '../../pagination/CompactInput.js';
|
|
@@ -73,6 +80,7 @@ import '../LinearProgress/LinearProgress.js';
|
|
|
73
80
|
import '../../radio-button/RadioButton.js';
|
|
74
81
|
import '../../radio-button/RadioButtonGroup.js';
|
|
75
82
|
import '../../scrim/Scrim.js';
|
|
83
|
+
import '../../segmented-button-group/SegmentedButtonGroup.js';
|
|
76
84
|
import '../../spinner/Spinner.js';
|
|
77
85
|
import '../../stack-layout/StackLayout.js';
|
|
78
86
|
import '../../status-adornment/StatusAdornment.js';
|
|
@@ -84,7 +92,6 @@ import '../../toggle-button/ToggleButton.js';
|
|
|
84
92
|
import '../../toggle-button-group/ToggleButtonGroup.js';
|
|
85
93
|
import '../../toggle-button-group/ToggleButtonGroupContext.js';
|
|
86
94
|
import '../../tooltip/Tooltip.js';
|
|
87
|
-
import '@floating-ui/react';
|
|
88
95
|
import css_248z from './CircularProgress.css.js';
|
|
89
96
|
|
|
90
97
|
const withBaseName = makePrefixer("saltCircularProgress");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CircularProgress.js","sources":["../src/progress/CircularProgress/CircularProgress.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, CSSProperties, forwardRef } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"../../utils\";\nimport { Text } from \"../../text\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport circularProgressCSS from \"./CircularProgress.css\";\n\nconst withBaseName = makePrefixer(\"saltCircularProgress\");\n\nconst getRotationAngle = (bar: number, shift = 0) => {\n return -180 + ((bar - shift) / 50) * 180;\n};\n\nexport interface CircularProgressProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * The value of the buffer indicator.\n * Value between 0 and max.\n */\n bufferValue?: number;\n /**\n * Whether to hide the text label within the progress. Defaults to `false`.\n */\n hideLabel?: boolean;\n /**\n * The value of the max progress indicator.\n * Default value is 100.\n */\n max?: number;\n /**\n * The value of the min progress indicator.\n * Default value is 0.\n */\n min?: number;\n /**\n * The value of the progress indicator.\n * Value between 0 and max.\n */\n value?: number;\n}\n\nexport const CircularProgress = forwardRef<\n HTMLDivElement,\n CircularProgressProps\n>(function CircularProgress(\n {\n className,\n hideLabel = false,\n max = 100,\n min = 0,\n value = 0,\n bufferValue = 0,\n ...rest\n },\n ref\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-circular-progress\",\n css: circularProgressCSS,\n window: targetWindow,\n });\n\n const bufferSubOverlayRightStyle: CSSProperties = {};\n const bufferSubOverlayLeftStyle: CSSProperties = {};\n const barSubOverlayRightStyle: CSSProperties = {};\n const barSubOverlayLeftStyle: CSSProperties = {};\n\n const buffer = ((bufferValue - min) / (max - min)) * 100;\n const progress = ((value - min) / (max - min)) * 100;\n\n if (progress <= 50) {\n const rotationAngle = getRotationAngle(progress);\n barSubOverlayRightStyle.transform = `rotate(${rotationAngle}deg)`;\n barSubOverlayLeftStyle.transform = \"rotate(-180deg)\";\n } else {\n const rotationAngle = getRotationAngle(progress, 50);\n barSubOverlayRightStyle.transform = \"rotate(0deg)\";\n barSubOverlayLeftStyle.transform = `rotate(${rotationAngle}deg)`;\n }\n if (buffer <= 50) {\n const rotationAngle = getRotationAngle(buffer);\n bufferSubOverlayRightStyle.transform = `rotate(${rotationAngle}deg)`;\n bufferSubOverlayLeftStyle.transform = \"rotate(-180deg)\";\n } else {\n const rotationAngle = getRotationAngle(buffer, 50);\n bufferSubOverlayRightStyle.transform = \"rotate(0deg)\";\n bufferSubOverlayLeftStyle.transform = `rotate(${rotationAngle}deg)`;\n }\n\n return (\n <div\n className={clsx(withBaseName(), className)}\n ref={ref}\n role=\"progressbar\"\n aria-valuemax={max}\n aria-valuemin={min}\n aria-valuenow={Math.round(value)}\n {...rest}\n >\n <div className={withBaseName(\"track\")} />\n <div className={withBaseName(\"bars\")}>\n {buffer > 0 && (\n <div className={withBaseName(\"bufferOverlayRight\")}>\n <div\n className={clsx(withBaseName(\"bufferSubOverlayRight\"), {\n [withBaseName(\"bufferSubOverlay\")]: buffer <= 50,\n })}\n style={bufferSubOverlayRightStyle}\n >\n <div className={withBaseName(\"bufferBackground\")} />\n <div className={withBaseName(\"bufferBorder\")} />\n </div>\n </div>\n )}\n <div className={withBaseName(\"barOverlayRight\")}>\n <div\n className={withBaseName(\"barSubOverlayRight\")}\n style={barSubOverlayRightStyle}\n >\n <div className={withBaseName(\"bar\")} />\n </div>\n </div>\n {buffer > 0 && (\n <div className={withBaseName(\"bufferOverlayLeft\")}>\n <div\n className={clsx(\n withBaseName(\"bufferSubOverlay\"),\n withBaseName(\"bufferSubOverlayLeft\")\n )}\n style={bufferSubOverlayLeftStyle}\n >\n <div className={withBaseName(\"bufferBorder\")} />\n <div className={withBaseName(\"bufferBackground\")} />\n </div>\n </div>\n )}\n <div className={withBaseName(\"barOverlayLeft\")}>\n <div\n className={withBaseName(\"barSubOverlayLeft\")}\n style={barSubOverlayLeftStyle}\n >\n <div className={withBaseName(\"bar\")} />\n </div>\n </div>\n </div>\n {!hideLabel && (\n <Text styleAs=\"h2\" className={withBaseName(\"progressLabel\")}>\n {`${Math.round(progress)} %`}\n </Text>\n )}\n </div>\n );\n});\n"],"names":["CircularProgress","circularProgressCSS"],"mappings":"
|
|
1
|
+
{"version":3,"file":"CircularProgress.js","sources":["../src/progress/CircularProgress/CircularProgress.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, CSSProperties, forwardRef } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"../../utils\";\nimport { Text } from \"../../text\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport circularProgressCSS from \"./CircularProgress.css\";\n\nconst withBaseName = makePrefixer(\"saltCircularProgress\");\n\nconst getRotationAngle = (bar: number, shift = 0) => {\n return -180 + ((bar - shift) / 50) * 180;\n};\n\nexport interface CircularProgressProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * The value of the buffer indicator.\n * Value between 0 and max.\n */\n bufferValue?: number;\n /**\n * Whether to hide the text label within the progress. Defaults to `false`.\n */\n hideLabel?: boolean;\n /**\n * The value of the max progress indicator.\n * Default value is 100.\n */\n max?: number;\n /**\n * The value of the min progress indicator.\n * Default value is 0.\n */\n min?: number;\n /**\n * The value of the progress indicator.\n * Value between 0 and max.\n */\n value?: number;\n}\n\nexport const CircularProgress = forwardRef<\n HTMLDivElement,\n CircularProgressProps\n>(function CircularProgress(\n {\n className,\n hideLabel = false,\n max = 100,\n min = 0,\n value = 0,\n bufferValue = 0,\n ...rest\n },\n ref\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-circular-progress\",\n css: circularProgressCSS,\n window: targetWindow,\n });\n\n const bufferSubOverlayRightStyle: CSSProperties = {};\n const bufferSubOverlayLeftStyle: CSSProperties = {};\n const barSubOverlayRightStyle: CSSProperties = {};\n const barSubOverlayLeftStyle: CSSProperties = {};\n\n const buffer = ((bufferValue - min) / (max - min)) * 100;\n const progress = ((value - min) / (max - min)) * 100;\n\n if (progress <= 50) {\n const rotationAngle = getRotationAngle(progress);\n barSubOverlayRightStyle.transform = `rotate(${rotationAngle}deg)`;\n barSubOverlayLeftStyle.transform = \"rotate(-180deg)\";\n } else {\n const rotationAngle = getRotationAngle(progress, 50);\n barSubOverlayRightStyle.transform = \"rotate(0deg)\";\n barSubOverlayLeftStyle.transform = `rotate(${rotationAngle}deg)`;\n }\n if (buffer <= 50) {\n const rotationAngle = getRotationAngle(buffer);\n bufferSubOverlayRightStyle.transform = `rotate(${rotationAngle}deg)`;\n bufferSubOverlayLeftStyle.transform = \"rotate(-180deg)\";\n } else {\n const rotationAngle = getRotationAngle(buffer, 50);\n bufferSubOverlayRightStyle.transform = \"rotate(0deg)\";\n bufferSubOverlayLeftStyle.transform = `rotate(${rotationAngle}deg)`;\n }\n\n return (\n <div\n className={clsx(withBaseName(), className)}\n ref={ref}\n role=\"progressbar\"\n aria-valuemax={max}\n aria-valuemin={min}\n aria-valuenow={Math.round(value)}\n {...rest}\n >\n <div className={withBaseName(\"track\")} />\n <div className={withBaseName(\"bars\")}>\n {buffer > 0 && (\n <div className={withBaseName(\"bufferOverlayRight\")}>\n <div\n className={clsx(withBaseName(\"bufferSubOverlayRight\"), {\n [withBaseName(\"bufferSubOverlay\")]: buffer <= 50,\n })}\n style={bufferSubOverlayRightStyle}\n >\n <div className={withBaseName(\"bufferBackground\")} />\n <div className={withBaseName(\"bufferBorder\")} />\n </div>\n </div>\n )}\n <div className={withBaseName(\"barOverlayRight\")}>\n <div\n className={withBaseName(\"barSubOverlayRight\")}\n style={barSubOverlayRightStyle}\n >\n <div className={withBaseName(\"bar\")} />\n </div>\n </div>\n {buffer > 0 && (\n <div className={withBaseName(\"bufferOverlayLeft\")}>\n <div\n className={clsx(\n withBaseName(\"bufferSubOverlay\"),\n withBaseName(\"bufferSubOverlayLeft\")\n )}\n style={bufferSubOverlayLeftStyle}\n >\n <div className={withBaseName(\"bufferBorder\")} />\n <div className={withBaseName(\"bufferBackground\")} />\n </div>\n </div>\n )}\n <div className={withBaseName(\"barOverlayLeft\")}>\n <div\n className={withBaseName(\"barSubOverlayLeft\")}\n style={barSubOverlayLeftStyle}\n >\n <div className={withBaseName(\"bar\")} />\n </div>\n </div>\n </div>\n {!hideLabel && (\n <Text styleAs=\"h2\" className={withBaseName(\"progressLabel\")}>\n {`${Math.round(progress)} %`}\n </Text>\n )}\n </div>\n );\n});\n"],"names":["CircularProgress","circularProgressCSS"],"mappings":"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"}
|
|
@@ -20,7 +20,6 @@ import '../../border-item/BorderItem.js';
|
|
|
20
20
|
import '../../border-layout/BorderLayout.js';
|
|
21
21
|
import '../../button/Button.js';
|
|
22
22
|
import '../../card/Card.js';
|
|
23
|
-
import '../../card/InteractableCard.js';
|
|
24
23
|
import '../../checkbox/Checkbox.js';
|
|
25
24
|
import '../../checkbox/CheckboxGroup.js';
|
|
26
25
|
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
@@ -55,6 +54,9 @@ import '../../form-field-context/FormFieldContext.js';
|
|
|
55
54
|
import '../../grid-item/GridItem.js';
|
|
56
55
|
import '../../grid-layout/GridLayout.js';
|
|
57
56
|
import '../../input/Input.js';
|
|
57
|
+
import '../../interactable-card/InteractableCard.js';
|
|
58
|
+
import '../../interactable-card/InteractableCardGroup.js';
|
|
59
|
+
import '../../interactable-card/InteractableCardGroupContext.js';
|
|
58
60
|
import '../../link/Link.js';
|
|
59
61
|
import '../../link-card/LinkCard.js';
|
|
60
62
|
import '../../list-control/ListControlContext.js';
|
|
@@ -62,6 +64,11 @@ import '../../multiline-input/MultilineInput.js';
|
|
|
62
64
|
import '../../navigation-item/NavigationItem.js';
|
|
63
65
|
import '../../option/Option.js';
|
|
64
66
|
import '../../option/OptionGroup.js';
|
|
67
|
+
import '../../overlay/OverlayContext.js';
|
|
68
|
+
import '@floating-ui/react';
|
|
69
|
+
import '../../overlay/OverlayPanel.js';
|
|
70
|
+
import '../../overlay/OverlayPanelCloseButton.js';
|
|
71
|
+
import '../../overlay/OverlayPanelContent.js';
|
|
65
72
|
import '../../pagination/Pagination.js';
|
|
66
73
|
import '../../pagination/Paginator.js';
|
|
67
74
|
import '../../pagination/CompactInput.js';
|
|
@@ -73,6 +80,7 @@ import '../CircularProgress/CircularProgress.js';
|
|
|
73
80
|
import '../../radio-button/RadioButton.js';
|
|
74
81
|
import '../../radio-button/RadioButtonGroup.js';
|
|
75
82
|
import '../../scrim/Scrim.js';
|
|
83
|
+
import '../../segmented-button-group/SegmentedButtonGroup.js';
|
|
76
84
|
import '../../spinner/Spinner.js';
|
|
77
85
|
import '../../stack-layout/StackLayout.js';
|
|
78
86
|
import '../../status-adornment/StatusAdornment.js';
|
|
@@ -84,7 +92,6 @@ import '../../toggle-button/ToggleButton.js';
|
|
|
84
92
|
import '../../toggle-button-group/ToggleButtonGroup.js';
|
|
85
93
|
import '../../toggle-button-group/ToggleButtonGroupContext.js';
|
|
86
94
|
import '../../tooltip/Tooltip.js';
|
|
87
|
-
import '@floating-ui/react';
|
|
88
95
|
import css_248z from './LinearProgress.css.js';
|
|
89
96
|
|
|
90
97
|
const withBaseName = makePrefixer("saltLinearProgress");
|
|
@@ -126,10 +133,10 @@ const LinearProgress = forwardRef(
|
|
|
126
133
|
className: withBaseName("bar"),
|
|
127
134
|
style: barStyle
|
|
128
135
|
}),
|
|
129
|
-
bufferValue
|
|
136
|
+
bufferValue > 0 ? /* @__PURE__ */ jsx("div", {
|
|
130
137
|
className: withBaseName("buffer"),
|
|
131
138
|
style: bufferStyle
|
|
132
|
-
}),
|
|
139
|
+
}) : null,
|
|
133
140
|
/* @__PURE__ */ jsx("div", {
|
|
134
141
|
className: withBaseName("track")
|
|
135
142
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LinearProgress.js","sources":["../src/progress/LinearProgress/LinearProgress.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, CSSProperties, forwardRef } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"../../utils\";\nimport { Text } from \"../../text\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport linearProgressCss from \"./LinearProgress.css\";\n\nconst withBaseName = makePrefixer(\"saltLinearProgress\");\n\nexport interface LinearProgressProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * The value of the buffer indicator.\n * Value between 0 and max.\n */\n bufferValue?: number;\n /**\n * Whether to hide the text label within the progress. Defaults to `false`.\n */\n hideLabel?: boolean;\n /**\n * The value of the max progress indicator.\n * Default value is 100.\n */\n max?: number;\n /**\n * The value of the min progress indicator.\n * Default value is 0.\n */\n min?: number;\n /**\n * The value of the progress indicator.\n * Value between 0 and max.\n */\n value?: number;\n}\n\nexport const LinearProgress = forwardRef<HTMLDivElement, LinearProgressProps>(\n function LinearProgress(\n {\n className,\n hideLabel = false,\n max = 100,\n min = 0,\n value = 0,\n bufferValue = 0,\n ...rest\n },\n ref\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-linear-progress\",\n css: linearProgressCss,\n window: targetWindow,\n });\n\n const progress = ((value - min) / (max - min)) * 100;\n const buffer = ((bufferValue - min) / (max - min)) * 100;\n const barStyle: CSSProperties = {};\n const bufferStyle: CSSProperties = {};\n\n barStyle.width = `${progress}%`;\n bufferStyle.width = `${buffer}%`;\n\n return (\n <div\n className={clsx(withBaseName(), className)}\n ref={ref}\n role=\"progressbar\"\n aria-valuemax={max}\n aria-valuemin={min}\n aria-valuenow={Math.round(value)}\n {...rest}\n >\n <div className={withBaseName(\"barContainer\")}>\n <div className={withBaseName(\"bar\")} style={barStyle} />\n {bufferValue
|
|
1
|
+
{"version":3,"file":"LinearProgress.js","sources":["../src/progress/LinearProgress/LinearProgress.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, CSSProperties, forwardRef } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"../../utils\";\nimport { Text } from \"../../text\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport linearProgressCss from \"./LinearProgress.css\";\n\nconst withBaseName = makePrefixer(\"saltLinearProgress\");\n\nexport interface LinearProgressProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * The value of the buffer indicator.\n * Value between 0 and max.\n */\n bufferValue?: number;\n /**\n * Whether to hide the text label within the progress. Defaults to `false`.\n */\n hideLabel?: boolean;\n /**\n * The value of the max progress indicator.\n * Default value is 100.\n */\n max?: number;\n /**\n * The value of the min progress indicator.\n * Default value is 0.\n */\n min?: number;\n /**\n * The value of the progress indicator.\n * Value between 0 and max.\n */\n value?: number;\n}\n\nexport const LinearProgress = forwardRef<HTMLDivElement, LinearProgressProps>(\n function LinearProgress(\n {\n className,\n hideLabel = false,\n max = 100,\n min = 0,\n value = 0,\n bufferValue = 0,\n ...rest\n },\n ref\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-linear-progress\",\n css: linearProgressCss,\n window: targetWindow,\n });\n\n const progress = ((value - min) / (max - min)) * 100;\n const buffer = ((bufferValue - min) / (max - min)) * 100;\n const barStyle: CSSProperties = {};\n const bufferStyle: CSSProperties = {};\n\n barStyle.width = `${progress}%`;\n bufferStyle.width = `${buffer}%`;\n\n return (\n <div\n className={clsx(withBaseName(), className)}\n ref={ref}\n role=\"progressbar\"\n aria-valuemax={max}\n aria-valuemin={min}\n aria-valuenow={Math.round(value)}\n {...rest}\n >\n <div className={withBaseName(\"barContainer\")}>\n <div className={withBaseName(\"bar\")} style={barStyle} />\n {bufferValue > 0 ? (\n <div className={withBaseName(\"buffer\")} style={bufferStyle} />\n ) : null}\n <div className={withBaseName(\"track\")} />\n </div>\n {!hideLabel && (\n <Text styleAs=\"h2\" className={withBaseName(\"progressLabel\")}>\n {`${Math.round(progress)} %`}\n </Text>\n )}\n </div>\n );\n }\n);\n"],"names":["LinearProgress","linearProgressCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,MAAM,YAAA,GAAe,aAAa,oBAAoB,CAAA,CAAA;AA6B/C,MAAM,cAAiB,GAAA,UAAA;AAAA,EAC5B,SAASA,eACP,CAAA;AAAA,IACE,SAAA;AAAA,IACA,SAAY,GAAA,KAAA;AAAA,IACZ,GAAM,GAAA,GAAA;AAAA,IACN,GAAM,GAAA,CAAA;AAAA,IACN,KAAQ,GAAA,CAAA;AAAA,IACR,WAAc,GAAA,CAAA;AAAA,IACX,GAAA,IAAA;AAAA,KAEL,GACA,EAAA;AACA,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,sBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,QAAa,GAAA,CAAA,KAAA,GAAQ,GAAQ,KAAA,GAAA,GAAM,GAAQ,CAAA,GAAA,GAAA,CAAA;AACjD,IAAA,MAAM,MAAW,GAAA,CAAA,WAAA,GAAc,GAAQ,KAAA,GAAA,GAAM,GAAQ,CAAA,GAAA,GAAA,CAAA;AACrD,IAAA,MAAM,WAA0B,EAAC,CAAA;AACjC,IAAA,MAAM,cAA6B,EAAC,CAAA;AAEpC,IAAA,QAAA,CAAS,QAAQ,CAAG,EAAA,QAAA,CAAA,CAAA,CAAA,CAAA;AACpB,IAAA,WAAA,CAAY,QAAQ,CAAG,EAAA,MAAA,CAAA,CAAA,CAAA,CAAA;AAEvB,IAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,MACC,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,GAAA;AAAA,MACA,IAAK,EAAA,aAAA;AAAA,MACL,eAAe,EAAA,GAAA;AAAA,MACf,eAAe,EAAA,GAAA;AAAA,MACf,eAAA,EAAe,IAAK,CAAA,KAAA,CAAM,KAAK,CAAA;AAAA,MAC9B,GAAG,IAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAC,IAAA,CAAA,KAAA,EAAA;AAAA,UAAI,SAAA,EAAW,aAAa,cAAc,CAAA;AAAA,UACzC,QAAA,EAAA;AAAA,4BAAC,GAAA,CAAA,KAAA,EAAA;AAAA,cAAI,SAAA,EAAW,aAAa,KAAK,CAAA;AAAA,cAAG,KAAO,EAAA,QAAA;AAAA,aAAU,CAAA;AAAA,YACrD,WAAA,GAAc,oBACZ,GAAA,CAAA,KAAA,EAAA;AAAA,cAAI,SAAA,EAAW,aAAa,QAAQ,CAAA;AAAA,cAAG,KAAO,EAAA,WAAA;AAAA,aAAa,CAC1D,GAAA,IAAA;AAAA,4BACH,GAAA,CAAA,KAAA,EAAA;AAAA,cAAI,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,aAAG,CAAA;AAAA,WAAA;AAAA,SACzC,CAAA;AAAA,QACC,CAAC,6BACC,GAAA,CAAA,IAAA,EAAA;AAAA,UAAK,OAAQ,EAAA,IAAA;AAAA,UAAK,SAAA,EAAW,aAAa,eAAe,CAAA;AAAA,UACvD,QAAA,EAAA,CAAA,EAAG,IAAK,CAAA,KAAA,CAAM,QAAQ,CAAA,CAAA,EAAA,CAAA;AAAA,SACzB,CAAA;AAAA,OAAA;AAAA,KAEJ,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
|
|
@@ -21,7 +21,6 @@ import '../border-item/BorderItem.js';
|
|
|
21
21
|
import '../border-layout/BorderLayout.js';
|
|
22
22
|
import '../button/Button.js';
|
|
23
23
|
import '../card/Card.js';
|
|
24
|
-
import '../card/InteractableCard.js';
|
|
25
24
|
import '../checkbox/Checkbox.js';
|
|
26
25
|
import '../checkbox/CheckboxGroup.js';
|
|
27
26
|
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
@@ -57,6 +56,9 @@ import { useFormFieldProps } from '../form-field-context/useFormFieldProps.js';
|
|
|
57
56
|
import '../grid-item/GridItem.js';
|
|
58
57
|
import '../grid-layout/GridLayout.js';
|
|
59
58
|
import '../input/Input.js';
|
|
59
|
+
import '../interactable-card/InteractableCard.js';
|
|
60
|
+
import '../interactable-card/InteractableCardGroup.js';
|
|
61
|
+
import '../interactable-card/InteractableCardGroupContext.js';
|
|
60
62
|
import '../link/Link.js';
|
|
61
63
|
import '../link-card/LinkCard.js';
|
|
62
64
|
import '../list-control/ListControlContext.js';
|
|
@@ -64,6 +66,11 @@ import '../multiline-input/MultilineInput.js';
|
|
|
64
66
|
import '../navigation-item/NavigationItem.js';
|
|
65
67
|
import '../option/Option.js';
|
|
66
68
|
import '../option/OptionGroup.js';
|
|
69
|
+
import '../overlay/OverlayContext.js';
|
|
70
|
+
import '@floating-ui/react';
|
|
71
|
+
import '../overlay/OverlayPanel.js';
|
|
72
|
+
import '../overlay/OverlayPanelCloseButton.js';
|
|
73
|
+
import '../overlay/OverlayPanelContent.js';
|
|
67
74
|
import '../pagination/Pagination.js';
|
|
68
75
|
import '../pagination/Paginator.js';
|
|
69
76
|
import '../pagination/CompactInput.js';
|
|
@@ -76,6 +83,7 @@ import '../progress/LinearProgress/LinearProgress.js';
|
|
|
76
83
|
import './RadioButtonGroup.js';
|
|
77
84
|
import { RadioButtonIcon } from './RadioButtonIcon.js';
|
|
78
85
|
import '../scrim/Scrim.js';
|
|
86
|
+
import '../segmented-button-group/SegmentedButtonGroup.js';
|
|
79
87
|
import '../spinner/Spinner.js';
|
|
80
88
|
import '../stack-layout/StackLayout.js';
|
|
81
89
|
import '../status-adornment/StatusAdornment.js';
|
|
@@ -87,7 +95,6 @@ import '../toggle-button/ToggleButton.js';
|
|
|
87
95
|
import '../toggle-button-group/ToggleButtonGroup.js';
|
|
88
96
|
import '../toggle-button-group/ToggleButtonGroupContext.js';
|
|
89
97
|
import '../tooltip/Tooltip.js';
|
|
90
|
-
import '@floating-ui/react';
|
|
91
98
|
import { useRadioGroup } from './internal/useRadioGroup.js';
|
|
92
99
|
import css_248z from './RadioButton.css.js';
|
|
93
100
|
|
|
@@ -134,7 +141,7 @@ const RadioButton = forwardRef(
|
|
|
134
141
|
const disabled = (radioGroup == null ? void 0 : radioGroup.disabled) || formFieldDisabled || disabledProp;
|
|
135
142
|
const readOnly = (radioGroup == null ? void 0 : radioGroup.readOnly) || formFieldReadOnly || readOnlyProp;
|
|
136
143
|
const validationStatus = !disabled ? (_b = (_a = radioGroup == null ? void 0 : radioGroup.validationStatus) != null ? _a : formFieldValidationStatus) != null ? _b : validationStatusProp : void 0;
|
|
137
|
-
const radioGroupChecked =
|
|
144
|
+
const radioGroupChecked = checkedProp != null ? checkedProp : radioGroup && value ? radioGroup.value === value : checkedProp;
|
|
138
145
|
const name = nameProp != null ? nameProp : radioGroup == null ? void 0 : radioGroup.name;
|
|
139
146
|
const [checked, setCheckedState] = useControlled({
|
|
140
147
|
controlled: radioGroupChecked,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioButton.js","sources":["../src/radio-button/RadioButton.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n ChangeEventHandler,\n ComponentPropsWithoutRef,\n FocusEventHandler,\n forwardRef,\n InputHTMLAttributes,\n ReactNode,\n} from \"react\";\nimport { makePrefixer, useControlled } from \"../utils\";\nimport { useRadioGroup } from \"./internal/useRadioGroup\";\nimport { RadioButtonIcon } from \"./RadioButtonIcon\";\n\nimport radioButtonCss from \"./RadioButton.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { AdornmentValidationStatus } from \"../status-adornment\";\n\nconst withBaseName = makePrefixer(\"saltRadioButton\");\n\nexport interface RadioButtonProps\n extends Omit<\n ComponentPropsWithoutRef<\"label\">,\n \"onChange\" | \"onBlur\" | \"onFocus\"\n > {\n /**\n * Set the default selected radio button in the group\n */\n checked?: boolean;\n /**\n * Set the disabled state\n */\n disabled?: boolean;\n /**\n * **Deprecated**: Use validationStatus instead\n * Set the error state\n */\n error?: boolean;\n /**\n * Props to be passed to the radio input\n */\n inputProps?: Partial<InputHTMLAttributes<HTMLInputElement>>;\n /**\n * The label to be shown next to the radio icon\n */\n label?: ReactNode;\n /**\n * Name of the radio group\n */\n name?: string;\n /**\n * Callback for blur event\n */\n onBlur?: FocusEventHandler<HTMLInputElement>;\n /**\n * Callback for change event\n */\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /**\n * Callback for focus event\n */\n onFocus?: FocusEventHandler<HTMLInputElement>;\n /**\n * Set the read only state.\n * **Note**: Setting a standalone radio button as read-only is not accessible. The whole radio buttton group should be set as read-only instead.\n */\n readOnly?: boolean;\n /**\n * Value of radio button\n */\n value?: string;\n /**\n * Validation status, one of \"warning\" | \"error\" | \"success\"\n *\n * RadioButton has styling variants for \"error\" and \"warning\".\n * No visual styling will be applied on \"success\" variant.\n */\n validationStatus?: AdornmentValidationStatus;\n}\n\nexport const RadioButton = forwardRef<HTMLLabelElement, RadioButtonProps>(\n function RadioButton(props, ref) {\n const {\n checked: checkedProp,\n className,\n disabled: disabledProp,\n error,\n inputProps = {},\n label,\n name: nameProp,\n onFocus,\n onBlur,\n onChange,\n readOnly: readOnlyProp,\n value,\n validationStatus: validationStatusProp,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-radio-button\",\n css: radioButtonCss,\n window: targetWindow,\n });\n\n const {\n a11yProps: formFieldA11yProps,\n disabled: formFieldDisabled,\n readOnly: formFieldReadOnly,\n validationStatus: formFieldValidationStatus,\n } = useFormFieldProps();\n\n const radioGroup = useRadioGroup();\n\n const {\n \"aria-describedby\": inputDescribedBy,\n \"aria-labelledby\": inputLabelledBy,\n className: inputClassName,\n onChange: inputOnChange,\n ...restInputProps\n } = inputProps;\n\n const disabled = radioGroup?.disabled || formFieldDisabled || disabledProp;\n const readOnly = radioGroup?.readOnly || formFieldReadOnly || readOnlyProp;\n const validationStatus = !disabled\n ? radioGroup?.validationStatus ??\n formFieldValidationStatus ??\n validationStatusProp\n : undefined;\n\n const radioGroupChecked =\n radioGroup
|
|
1
|
+
{"version":3,"file":"RadioButton.js","sources":["../src/radio-button/RadioButton.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n ChangeEventHandler,\n ComponentPropsWithoutRef,\n FocusEventHandler,\n forwardRef,\n InputHTMLAttributes,\n ReactNode,\n} from \"react\";\nimport { makePrefixer, useControlled } from \"../utils\";\nimport { useRadioGroup } from \"./internal/useRadioGroup\";\nimport { RadioButtonIcon } from \"./RadioButtonIcon\";\n\nimport radioButtonCss from \"./RadioButton.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { AdornmentValidationStatus } from \"../status-adornment\";\n\nconst withBaseName = makePrefixer(\"saltRadioButton\");\n\nexport interface RadioButtonProps\n extends Omit<\n ComponentPropsWithoutRef<\"label\">,\n \"onChange\" | \"onBlur\" | \"onFocus\"\n > {\n /**\n * Set the default selected radio button in the group\n */\n checked?: boolean;\n /**\n * Set the disabled state\n */\n disabled?: boolean;\n /**\n * **Deprecated**: Use validationStatus instead\n * Set the error state\n */\n error?: boolean;\n /**\n * Props to be passed to the radio input\n */\n inputProps?: Partial<InputHTMLAttributes<HTMLInputElement>>;\n /**\n * The label to be shown next to the radio icon\n */\n label?: ReactNode;\n /**\n * Name of the radio group\n */\n name?: string;\n /**\n * Callback for blur event\n */\n onBlur?: FocusEventHandler<HTMLInputElement>;\n /**\n * Callback for change event\n */\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /**\n * Callback for focus event\n */\n onFocus?: FocusEventHandler<HTMLInputElement>;\n /**\n * Set the read only state.\n * **Note**: Setting a standalone radio button as read-only is not accessible. The whole radio buttton group should be set as read-only instead.\n */\n readOnly?: boolean;\n /**\n * Value of radio button\n */\n value?: string;\n /**\n * Validation status, one of \"warning\" | \"error\" | \"success\"\n *\n * RadioButton has styling variants for \"error\" and \"warning\".\n * No visual styling will be applied on \"success\" variant.\n */\n validationStatus?: AdornmentValidationStatus;\n}\n\nexport const RadioButton = forwardRef<HTMLLabelElement, RadioButtonProps>(\n function RadioButton(props, ref) {\n const {\n checked: checkedProp,\n className,\n disabled: disabledProp,\n error,\n inputProps = {},\n label,\n name: nameProp,\n onFocus,\n onBlur,\n onChange,\n readOnly: readOnlyProp,\n value,\n validationStatus: validationStatusProp,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-radio-button\",\n css: radioButtonCss,\n window: targetWindow,\n });\n\n const {\n a11yProps: formFieldA11yProps,\n disabled: formFieldDisabled,\n readOnly: formFieldReadOnly,\n validationStatus: formFieldValidationStatus,\n } = useFormFieldProps();\n\n const radioGroup = useRadioGroup();\n\n const {\n \"aria-describedby\": inputDescribedBy,\n \"aria-labelledby\": inputLabelledBy,\n className: inputClassName,\n onChange: inputOnChange,\n ...restInputProps\n } = inputProps;\n\n const disabled = radioGroup?.disabled || formFieldDisabled || disabledProp;\n const readOnly = radioGroup?.readOnly || formFieldReadOnly || readOnlyProp;\n const validationStatus = !disabled\n ? radioGroup?.validationStatus ??\n formFieldValidationStatus ??\n validationStatusProp\n : undefined;\n\n const radioGroupChecked =\n checkedProp ??\n (radioGroup && value ? radioGroup.value === value : checkedProp);\n const name = nameProp ?? radioGroup?.name;\n\n const [checked, setCheckedState] = useControlled({\n controlled: radioGroupChecked,\n default: Boolean(checkedProp),\n name: \"RadioBase\",\n state: \"checked\",\n });\n\n const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n if (readOnly) return;\n\n const newChecked = event.target.checked;\n setCheckedState(newChecked);\n\n onChange?.(event);\n inputOnChange?.(event);\n radioGroup?.onChange?.(event);\n };\n\n return (\n <label\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(\"readOnly\")]: readOnly,\n [withBaseName(\"error\")]: error /* **Deprecated** */,\n [withBaseName(validationStatus || \"\")]: validationStatus,\n },\n className\n )}\n ref={ref}\n {...rest}\n >\n <input\n aria-describedby={\n clsx(\n radioGroup == undefined\n ? formFieldA11yProps?.[\"aria-describedby\"]\n : undefined,\n inputDescribedBy\n ) || undefined\n }\n aria-labelledby={\n clsx(\n radioGroup == undefined\n ? formFieldA11yProps?.[\"aria-labelledby\"]\n : undefined,\n inputLabelledBy\n ) || undefined\n }\n className={clsx(withBaseName(\"input\"), inputClassName)}\n checked={checked}\n disabled={disabled}\n readOnly={readOnly}\n name={name}\n value={value}\n onBlur={onBlur}\n onChange={handleChange}\n onFocus={onFocus}\n type=\"radio\"\n {...restInputProps}\n />\n <RadioButtonIcon\n checked={checked}\n disabled={disabled}\n readOnly={readOnly}\n validationStatus={validationStatus}\n error={error}\n />\n {label}\n </label>\n );\n }\n);\n"],"names":["RadioButton","radioButtonCss","_a"],"mappings":"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"}
|
|
@@ -21,7 +21,6 @@ import '../border-item/BorderItem.js';
|
|
|
21
21
|
import '../border-layout/BorderLayout.js';
|
|
22
22
|
import '../button/Button.js';
|
|
23
23
|
import '../card/Card.js';
|
|
24
|
-
import '../card/InteractableCard.js';
|
|
25
24
|
import '../checkbox/Checkbox.js';
|
|
26
25
|
import '../checkbox/CheckboxGroup.js';
|
|
27
26
|
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
@@ -57,6 +56,9 @@ import { useFormFieldProps } from '../form-field-context/useFormFieldProps.js';
|
|
|
57
56
|
import '../grid-item/GridItem.js';
|
|
58
57
|
import '../grid-layout/GridLayout.js';
|
|
59
58
|
import '../input/Input.js';
|
|
59
|
+
import '../interactable-card/InteractableCard.js';
|
|
60
|
+
import '../interactable-card/InteractableCardGroup.js';
|
|
61
|
+
import '../interactable-card/InteractableCardGroupContext.js';
|
|
60
62
|
import '../link/Link.js';
|
|
61
63
|
import '../link-card/LinkCard.js';
|
|
62
64
|
import '../list-control/ListControlContext.js';
|
|
@@ -64,6 +66,11 @@ import '../multiline-input/MultilineInput.js';
|
|
|
64
66
|
import '../navigation-item/NavigationItem.js';
|
|
65
67
|
import '../option/Option.js';
|
|
66
68
|
import '../option/OptionGroup.js';
|
|
69
|
+
import '../overlay/OverlayContext.js';
|
|
70
|
+
import '@floating-ui/react';
|
|
71
|
+
import '../overlay/OverlayPanel.js';
|
|
72
|
+
import '../overlay/OverlayPanelCloseButton.js';
|
|
73
|
+
import '../overlay/OverlayPanelContent.js';
|
|
67
74
|
import '../pagination/Pagination.js';
|
|
68
75
|
import '../pagination/Paginator.js';
|
|
69
76
|
import '../pagination/CompactInput.js';
|
|
@@ -75,6 +82,7 @@ import '../progress/CircularProgress/CircularProgress.js';
|
|
|
75
82
|
import '../progress/LinearProgress/LinearProgress.js';
|
|
76
83
|
import './RadioButton.js';
|
|
77
84
|
import '../scrim/Scrim.js';
|
|
85
|
+
import '../segmented-button-group/SegmentedButtonGroup.js';
|
|
78
86
|
import '../spinner/Spinner.js';
|
|
79
87
|
import '../stack-layout/StackLayout.js';
|
|
80
88
|
import '../status-adornment/StatusAdornment.js';
|
|
@@ -86,7 +94,6 @@ import '../toggle-button/ToggleButton.js';
|
|
|
86
94
|
import '../toggle-button-group/ToggleButtonGroup.js';
|
|
87
95
|
import '../toggle-button-group/ToggleButtonGroupContext.js';
|
|
88
96
|
import '../tooltip/Tooltip.js';
|
|
89
|
-
import '@floating-ui/react';
|
|
90
97
|
import { RadioGroupContext } from './internal/RadioGroupContext.js';
|
|
91
98
|
import css_248z from './RadioButtonGroup.css.js';
|
|
92
99
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioButtonGroup.js","sources":["../src/radio-button/RadioButtonGroup.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n ChangeEventHandler,\n ComponentPropsWithoutRef,\n forwardRef,\n} from \"react\";\nimport { makePrefixer, useControlled, useId } from \"../utils\";\nimport { RadioGroupContext } from \"./internal/RadioGroupContext\";\n\nimport radioButtonGroupCss from \"./RadioButtonGroup.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useFormFieldProps } from \"../form-field-context\";\n\nconst withBaseName = makePrefixer(\"saltRadioButtonGroup\");\n\nexport interface RadioButtonGroupProps\n extends Omit<ComponentPropsWithoutRef<\"fieldset\">, \"onChange\"> {\n /**\n * Set the selected value when initialized.\n */\n defaultValue?: string;\n /**\n * Set the group direction.\n */\n direction?: \"horizontal\" | \"vertical\";\n /**\n * Disable the RadioButton group\n */\n disabled?: boolean;\n /**\n * Only for horizontal direction. When `true` the text in radio button label will wrap to fit within the container. Otherwise the radio buttons will wrap onto the next line.\n */\n wrap?: boolean;\n /**\n * The name to be set on each radio button within the group. If not set, then one will be generated for you.\n */\n name?: string;\n /**\n * Callback for change event.\n */\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /**\n * Set the RadioButton group to read only.\n */\n readOnly?: boolean;\n /**\n * The value of the radio group, required for a controlled component.\n */\n value?: string;\n /**\n * Validation status.\n */\n validationStatus?: \"error\" | \"warning\";\n}\n\nexport const RadioButtonGroup = forwardRef<\n HTMLFieldSetElement,\n RadioButtonGroupProps\n>(function RadioButtonGroup(props, ref) {\n const {\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n children,\n className,\n defaultValue,\n direction = \"vertical\",\n disabled: disabledProp,\n wrap = true,\n name: nameProp,\n onChange,\n readOnly: readOnlyProp,\n value: valueProp,\n validationStatus: validationStatusProp,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-radio-button-group\",\n css: radioButtonGroupCss,\n window: targetWindow,\n });\n\n const {\n a11yProps,\n disabled: formFieldDisabled,\n readOnly: formFieldReadOnly,\n validationStatus: formFieldValidationStatus,\n } = useFormFieldProps();\n\n const disabled = formFieldDisabled || disabledProp;\n const readOnly = formFieldReadOnly || readOnlyProp;\n const validationStatus = formFieldValidationStatus ?? validationStatusProp;\n\n const [value, setStateValue] = useControlled({\n controlled: valueProp,\n default: defaultValue,\n state: \"value\",\n name: \"RadioButtonGroup\",\n });\n\n const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n setStateValue(event.target.value);\n onChange?.(event);\n };\n\n const name = useId(nameProp);\n\n return (\n <fieldset\n role=\"radiogroup\"\n aria-readonly={readOnly}\n aria-labelledby={\n clsx(a11yProps?.[\"aria-labelledby\"], ariaLabelledBy) || undefined\n }\n aria-describedby={\n clsx(a11yProps?.[\"aria-describedby\"], ariaDescribedBy) || undefined\n }\n className={clsx(\n withBaseName(),\n withBaseName(direction),\n {\n [withBaseName(\"noWrap\")]: !wrap,\n },\n className\n )}\n data-testid=\"radio-button-group\"\n ref={ref}\n {...rest}\n >\n <RadioGroupContext.Provider\n value={{\n disabled,\n name,\n onChange: handleChange,\n readOnly,\n validationStatus,\n value,\n }}\n >\n {children}\n </RadioGroupContext.Provider>\n </fieldset>\n );\n});\n"],"names":["RadioButtonGroup","radioButtonGroupCss"],"mappings":"
|
|
1
|
+
{"version":3,"file":"RadioButtonGroup.js","sources":["../src/radio-button/RadioButtonGroup.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n ChangeEventHandler,\n ComponentPropsWithoutRef,\n forwardRef,\n} from \"react\";\nimport { makePrefixer, useControlled, useId } from \"../utils\";\nimport { RadioGroupContext } from \"./internal/RadioGroupContext\";\n\nimport radioButtonGroupCss from \"./RadioButtonGroup.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useFormFieldProps } from \"../form-field-context\";\n\nconst withBaseName = makePrefixer(\"saltRadioButtonGroup\");\n\nexport interface RadioButtonGroupProps\n extends Omit<ComponentPropsWithoutRef<\"fieldset\">, \"onChange\"> {\n /**\n * Set the selected value when initialized.\n */\n defaultValue?: string;\n /**\n * Set the group direction.\n */\n direction?: \"horizontal\" | \"vertical\";\n /**\n * Disable the RadioButton group\n */\n disabled?: boolean;\n /**\n * Only for horizontal direction. When `true` the text in radio button label will wrap to fit within the container. Otherwise the radio buttons will wrap onto the next line.\n */\n wrap?: boolean;\n /**\n * The name to be set on each radio button within the group. If not set, then one will be generated for you.\n */\n name?: string;\n /**\n * Callback for change event.\n */\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /**\n * Set the RadioButton group to read only.\n */\n readOnly?: boolean;\n /**\n * The value of the radio group, required for a controlled component.\n */\n value?: string;\n /**\n * Validation status.\n */\n validationStatus?: \"error\" | \"warning\";\n}\n\nexport const RadioButtonGroup = forwardRef<\n HTMLFieldSetElement,\n RadioButtonGroupProps\n>(function RadioButtonGroup(props, ref) {\n const {\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n children,\n className,\n defaultValue,\n direction = \"vertical\",\n disabled: disabledProp,\n wrap = true,\n name: nameProp,\n onChange,\n readOnly: readOnlyProp,\n value: valueProp,\n validationStatus: validationStatusProp,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-radio-button-group\",\n css: radioButtonGroupCss,\n window: targetWindow,\n });\n\n const {\n a11yProps,\n disabled: formFieldDisabled,\n readOnly: formFieldReadOnly,\n validationStatus: formFieldValidationStatus,\n } = useFormFieldProps();\n\n const disabled = formFieldDisabled || disabledProp;\n const readOnly = formFieldReadOnly || readOnlyProp;\n const validationStatus = formFieldValidationStatus ?? validationStatusProp;\n\n const [value, setStateValue] = useControlled({\n controlled: valueProp,\n default: defaultValue,\n state: \"value\",\n name: \"RadioButtonGroup\",\n });\n\n const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n setStateValue(event.target.value);\n onChange?.(event);\n };\n\n const name = useId(nameProp);\n\n return (\n <fieldset\n role=\"radiogroup\"\n aria-readonly={readOnly}\n aria-labelledby={\n clsx(a11yProps?.[\"aria-labelledby\"], ariaLabelledBy) || undefined\n }\n aria-describedby={\n clsx(a11yProps?.[\"aria-describedby\"], ariaDescribedBy) || undefined\n }\n className={clsx(\n withBaseName(),\n withBaseName(direction),\n {\n [withBaseName(\"noWrap\")]: !wrap,\n },\n className\n )}\n data-testid=\"radio-button-group\"\n ref={ref}\n {...rest}\n >\n <RadioGroupContext.Provider\n value={{\n disabled,\n name,\n onChange: handleChange,\n readOnly,\n validationStatus,\n value,\n }}\n >\n {children}\n </RadioGroupContext.Provider>\n </fieldset>\n );\n});\n"],"names":["RadioButtonGroup","radioButtonGroupCss"],"mappings":"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"}
|
|
@@ -20,7 +20,6 @@ import '../border-item/BorderItem.js';
|
|
|
20
20
|
import '../border-layout/BorderLayout.js';
|
|
21
21
|
import '../button/Button.js';
|
|
22
22
|
import '../card/Card.js';
|
|
23
|
-
import '../card/InteractableCard.js';
|
|
24
23
|
import '../checkbox/Checkbox.js';
|
|
25
24
|
import '../checkbox/CheckboxGroup.js';
|
|
26
25
|
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
@@ -55,6 +54,9 @@ import '../form-field-context/FormFieldContext.js';
|
|
|
55
54
|
import '../grid-item/GridItem.js';
|
|
56
55
|
import '../grid-layout/GridLayout.js';
|
|
57
56
|
import '../input/Input.js';
|
|
57
|
+
import '../interactable-card/InteractableCard.js';
|
|
58
|
+
import '../interactable-card/InteractableCardGroup.js';
|
|
59
|
+
import '../interactable-card/InteractableCardGroupContext.js';
|
|
58
60
|
import '../link/Link.js';
|
|
59
61
|
import '../link-card/LinkCard.js';
|
|
60
62
|
import '../list-control/ListControlContext.js';
|
|
@@ -62,6 +64,11 @@ import '../multiline-input/MultilineInput.js';
|
|
|
62
64
|
import '../navigation-item/NavigationItem.js';
|
|
63
65
|
import '../option/Option.js';
|
|
64
66
|
import '../option/OptionGroup.js';
|
|
67
|
+
import '../overlay/OverlayContext.js';
|
|
68
|
+
import '@floating-ui/react';
|
|
69
|
+
import '../overlay/OverlayPanel.js';
|
|
70
|
+
import '../overlay/OverlayPanelCloseButton.js';
|
|
71
|
+
import '../overlay/OverlayPanelContent.js';
|
|
65
72
|
import '../pagination/Pagination.js';
|
|
66
73
|
import '../pagination/Paginator.js';
|
|
67
74
|
import '../pagination/CompactInput.js';
|
|
@@ -75,6 +82,7 @@ import './RadioButton.js';
|
|
|
75
82
|
import './RadioButtonGroup.js';
|
|
76
83
|
import css_248z from './RadioButtonIcon.css.js';
|
|
77
84
|
import '../scrim/Scrim.js';
|
|
85
|
+
import '../segmented-button-group/SegmentedButtonGroup.js';
|
|
78
86
|
import '../spinner/Spinner.js';
|
|
79
87
|
import '../stack-layout/StackLayout.js';
|
|
80
88
|
import '../status-adornment/StatusAdornment.js';
|
|
@@ -86,7 +94,6 @@ import '../toggle-button/ToggleButton.js';
|
|
|
86
94
|
import '../toggle-button-group/ToggleButtonGroup.js';
|
|
87
95
|
import '../toggle-button-group/ToggleButtonGroupContext.js';
|
|
88
96
|
import '../tooltip/Tooltip.js';
|
|
89
|
-
import '@floating-ui/react';
|
|
90
97
|
|
|
91
98
|
const withBaseName = makePrefixer("saltRadioButtonIcon");
|
|
92
99
|
const RadioButtonIcon = ({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioButtonIcon.js","sources":["../src/radio-button/RadioButtonIcon.tsx"],"sourcesContent":["import { makePrefixer } from \"../utils\";\nimport { clsx } from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { AdornmentValidationStatus } from \"../status-adornment\";\nimport radioButtonIconCss from \"./RadioButtonIcon.css\";\nimport { ComponentPropsWithoutRef } from \"react\";\n\nconst withBaseName = makePrefixer(\"saltRadioButtonIcon\");\n\nexport interface RadioButtonIconProps extends ComponentPropsWithoutRef<\"div\"> {\n checked?: boolean;\n disabled?: boolean;\n /**\n * @deprecated Use validationStatus instead\n */\n error?: boolean;\n readOnly?: boolean;\n validationStatus?: AdornmentValidationStatus;\n}\n\n/**\n * Default radio icon\n */\nexport const RadioButtonIcon = ({\n checked,\n className,\n error,\n disabled,\n validationStatus,\n readOnly,\n ...rest\n}: RadioButtonIconProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-radio-button-icon\",\n css: radioButtonIconCss,\n window: targetWindow,\n });\n return (\n <div\n aria-hidden=\"true\"\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"checked\")]: checked,\n [withBaseName(\"error\")]: error,\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(validationStatus || \"\")]: validationStatus,\n [withBaseName(\"readOnly\")]: readOnly,\n },\n className\n )}\n {...rest}\n >\n {checked && !readOnly && (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 12 12\"\n fill=\"currentColor\"\n >\n <path\n fillRule=\"evenodd\"\n d=\"M0 6a6 6 0 1 1 12 0A6 6 0 0 1 0 6Zm6 3a3 3 0 1 1 0-6 3 3 0 0 1 0 6Z\"\n clipRule=\"evenodd\"\n />\n </svg>\n )}\n {checked && readOnly && (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 12 12\"\n >\n <path\n fill=\"#161616\"\n d=\"M9.5 6a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z\"\n />\n </svg>\n )}\n </div>\n );\n};\n"],"names":["radioButtonIconCss"],"mappings":"
|
|
1
|
+
{"version":3,"file":"RadioButtonIcon.js","sources":["../src/radio-button/RadioButtonIcon.tsx"],"sourcesContent":["import { makePrefixer } from \"../utils\";\nimport { clsx } from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { AdornmentValidationStatus } from \"../status-adornment\";\nimport radioButtonIconCss from \"./RadioButtonIcon.css\";\nimport { ComponentPropsWithoutRef } from \"react\";\n\nconst withBaseName = makePrefixer(\"saltRadioButtonIcon\");\n\nexport interface RadioButtonIconProps extends ComponentPropsWithoutRef<\"div\"> {\n checked?: boolean;\n disabled?: boolean;\n /**\n * @deprecated Use validationStatus instead\n */\n error?: boolean;\n readOnly?: boolean;\n validationStatus?: AdornmentValidationStatus;\n}\n\n/**\n * Default radio icon\n */\nexport const RadioButtonIcon = ({\n checked,\n className,\n error,\n disabled,\n validationStatus,\n readOnly,\n ...rest\n}: RadioButtonIconProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-radio-button-icon\",\n css: radioButtonIconCss,\n window: targetWindow,\n });\n return (\n <div\n aria-hidden=\"true\"\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"checked\")]: checked,\n [withBaseName(\"error\")]: error,\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(validationStatus || \"\")]: validationStatus,\n [withBaseName(\"readOnly\")]: readOnly,\n },\n className\n )}\n {...rest}\n >\n {checked && !readOnly && (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 12 12\"\n fill=\"currentColor\"\n >\n <path\n fillRule=\"evenodd\"\n d=\"M0 6a6 6 0 1 1 12 0A6 6 0 0 1 0 6Zm6 3a3 3 0 1 1 0-6 3 3 0 0 1 0 6Z\"\n clipRule=\"evenodd\"\n />\n </svg>\n )}\n {checked && readOnly && (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 12 12\"\n >\n <path\n fill=\"#161616\"\n d=\"M9.5 6a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z\"\n />\n </svg>\n )}\n </div>\n );\n};\n"],"names":["radioButtonIconCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,MAAM,YAAA,GAAe,aAAa,qBAAqB,CAAA,CAAA;AAgBhD,MAAM,kBAAkB,CAAC;AAAA,EAC9B,OAAA;AAAA,EACA,SAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,gBAAA;AAAA,EACA,QAAA;AAAA,EACG,GAAA,IAAA;AACL,CAA4B,KAAA;AAC1B,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,wBAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AACD,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,IACC,aAAY,EAAA,MAAA;AAAA,IACZ,SAAW,EAAA,IAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb;AAAA,QACE,CAAC,YAAa,CAAA,SAAS,CAAI,GAAA,OAAA;AAAA,QAC3B,CAAC,YAAa,CAAA,OAAO,CAAI,GAAA,KAAA;AAAA,QACzB,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,QAC5B,CAAC,YAAA,CAAa,gBAAoB,IAAA,EAAE,CAAI,GAAA,gBAAA;AAAA,QACxC,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,OAC9B;AAAA,MACA,SAAA;AAAA,KACF;AAAA,IACC,GAAG,IAAA;AAAA,IAEH,QAAA,EAAA;AAAA,MAAW,OAAA,IAAA,CAAC,4BACV,GAAA,CAAA,KAAA,EAAA;AAAA,QACC,KAAM,EAAA,4BAAA;AAAA,QACN,OAAQ,EAAA,WAAA;AAAA,QACR,IAAK,EAAA,cAAA;AAAA,QAEL,QAAC,kBAAA,GAAA,CAAA,MAAA,EAAA;AAAA,UACC,QAAS,EAAA,SAAA;AAAA,UACT,CAAE,EAAA,qEAAA;AAAA,UACF,QAAS,EAAA,SAAA;AAAA,SACX,CAAA;AAAA,OACF,CAAA;AAAA,MAED,OAAA,IAAW,4BACT,GAAA,CAAA,KAAA,EAAA;AAAA,QACC,KAAM,EAAA,4BAAA;AAAA,QACN,IAAK,EAAA,cAAA;AAAA,QACL,OAAQ,EAAA,WAAA;AAAA,QAER,QAAC,kBAAA,GAAA,CAAA,MAAA,EAAA;AAAA,UACC,IAAK,EAAA,SAAA;AAAA,UACL,CAAE,EAAA,6CAAA;AAAA,SACJ,CAAA;AAAA,OACF,CAAA;AAAA,KAAA;AAAA,GAEJ,CAAA,CAAA;AAEJ;;;;"}
|
|
@@ -20,7 +20,6 @@ import '../../border-item/BorderItem.js';
|
|
|
20
20
|
import '../../border-layout/BorderLayout.js';
|
|
21
21
|
import '../../button/Button.js';
|
|
22
22
|
import '../../card/Card.js';
|
|
23
|
-
import '../../card/InteractableCard.js';
|
|
24
23
|
import '../../checkbox/Checkbox.js';
|
|
25
24
|
import '../../checkbox/CheckboxGroup.js';
|
|
26
25
|
import '@salt-ds/styles';
|
|
@@ -55,6 +54,9 @@ import '../../form-field-context/FormFieldContext.js';
|
|
|
55
54
|
import '../../grid-item/GridItem.js';
|
|
56
55
|
import '../../grid-layout/GridLayout.js';
|
|
57
56
|
import '../../input/Input.js';
|
|
57
|
+
import '../../interactable-card/InteractableCard.js';
|
|
58
|
+
import '../../interactable-card/InteractableCardGroup.js';
|
|
59
|
+
import '../../interactable-card/InteractableCardGroupContext.js';
|
|
58
60
|
import '../../link/Link.js';
|
|
59
61
|
import '../../link-card/LinkCard.js';
|
|
60
62
|
import '../../list-control/ListControlContext.js';
|
|
@@ -62,6 +64,11 @@ import '../../multiline-input/MultilineInput.js';
|
|
|
62
64
|
import '../../navigation-item/NavigationItem.js';
|
|
63
65
|
import '../../option/Option.js';
|
|
64
66
|
import '../../option/OptionGroup.js';
|
|
67
|
+
import '../../overlay/OverlayContext.js';
|
|
68
|
+
import '@floating-ui/react';
|
|
69
|
+
import '../../overlay/OverlayPanel.js';
|
|
70
|
+
import '../../overlay/OverlayPanelCloseButton.js';
|
|
71
|
+
import '../../overlay/OverlayPanelContent.js';
|
|
65
72
|
import '../../pagination/Pagination.js';
|
|
66
73
|
import '../../pagination/Paginator.js';
|
|
67
74
|
import '../../pagination/CompactInput.js';
|
|
@@ -74,6 +81,7 @@ import '../../progress/LinearProgress/LinearProgress.js';
|
|
|
74
81
|
import '../RadioButton.js';
|
|
75
82
|
import '../RadioButtonGroup.js';
|
|
76
83
|
import '../../scrim/Scrim.js';
|
|
84
|
+
import '../../segmented-button-group/SegmentedButtonGroup.js';
|
|
77
85
|
import '../../spinner/Spinner.js';
|
|
78
86
|
import '../../stack-layout/StackLayout.js';
|
|
79
87
|
import '../../status-adornment/StatusAdornment.js';
|
|
@@ -85,7 +93,6 @@ import '../../toggle-button/ToggleButton.js';
|
|
|
85
93
|
import '../../toggle-button-group/ToggleButtonGroup.js';
|
|
86
94
|
import '../../toggle-button-group/ToggleButtonGroupContext.js';
|
|
87
95
|
import '../../tooltip/Tooltip.js';
|
|
88
|
-
import '@floating-ui/react';
|
|
89
96
|
|
|
90
97
|
const RadioGroupContext = createContext("RadioGroupContext", void 0);
|
|
91
98
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioGroupContext.js","sources":["../src/radio-button/internal/RadioGroupContext.tsx"],"sourcesContent":["import { ChangeEventHandler } from \"react\";\nimport { AdornmentValidationStatus } from \"../../status-adornment\";\nimport { createContext } from \"../../utils\";\n\nexport interface RadioGroupContextValue {\n disabled?: boolean;\n name?: string;\n value?: string;\n onChange?: ChangeEventHandler<HTMLElement>;\n readOnly?: boolean;\n validationStatus?: AdornmentValidationStatus;\n}\n\nexport const RadioGroupContext = createContext<\n RadioGroupContextValue | undefined\n>(\"RadioGroupContext\", undefined);\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"RadioGroupContext.js","sources":["../src/radio-button/internal/RadioGroupContext.tsx"],"sourcesContent":["import { ChangeEventHandler } from \"react\";\nimport { AdornmentValidationStatus } from \"../../status-adornment\";\nimport { createContext } from \"../../utils\";\n\nexport interface RadioGroupContextValue {\n disabled?: boolean;\n name?: string;\n value?: string;\n onChange?: ChangeEventHandler<HTMLElement>;\n readOnly?: boolean;\n validationStatus?: AdornmentValidationStatus;\n}\n\nexport const RadioGroupContext = createContext<\n RadioGroupContextValue | undefined\n>(\"RadioGroupContext\", undefined);\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaa,MAAA,iBAAA,GAAoB,aAE/B,CAAA,mBAAA,EAAqB,KAAS,CAAA;;;;"}
|