@salt-ds/core 1.45.0 → 1.46.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.
Files changed (194) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/css/salt-core.css +1 -1
  3. package/dist-cjs/accordion/Accordion.js.map +1 -1
  4. package/dist-cjs/accordion/AccordionContext.js.map +1 -1
  5. package/dist-cjs/accordion/AccordionHeader.js.map +1 -1
  6. package/dist-cjs/accordion/AccordionPanel.js.map +1 -1
  7. package/dist-cjs/aria-announcer/AriaAnnouncerContext.js.map +1 -1
  8. package/dist-cjs/aria-announcer/AriaAnnouncerProvider.js.map +1 -1
  9. package/dist-cjs/aria-announcer/useAriaAnnouncer.js +1 -9
  10. package/dist-cjs/aria-announcer/useAriaAnnouncer.js.map +1 -1
  11. package/dist-cjs/avatar/Avatar.js.map +1 -1
  12. package/dist-cjs/button/Button.js.map +1 -1
  13. package/dist-cjs/button/useButton.js.map +1 -1
  14. package/dist-cjs/checkbox/Checkbox.js.map +1 -1
  15. package/dist-cjs/checkbox/CheckboxGroup.js.map +1 -1
  16. package/dist-cjs/checkbox/internal/CheckboxGroupContext.js.map +1 -1
  17. package/dist-cjs/combo-box/ComboBox.js.map +1 -1
  18. package/dist-cjs/combo-box/useComboBox.js.map +1 -1
  19. package/dist-cjs/dialog/Dialog.js.map +1 -1
  20. package/dist-cjs/dialog/DialogContent.js.map +1 -1
  21. package/dist-cjs/dialog/DialogContext.js.map +1 -1
  22. package/dist-cjs/drawer/Drawer.js.map +1 -1
  23. package/dist-cjs/dropdown/Dropdown.js.map +1 -1
  24. package/dist-cjs/file-drop-zone/FileDropZone.js.map +1 -1
  25. package/dist-cjs/file-drop-zone/FileDropZoneTrigger.js.map +1 -1
  26. package/dist-cjs/file-drop-zone/internal/utils.js.map +1 -1
  27. package/dist-cjs/flex-layout/parseSpacing.js.map +1 -1
  28. package/dist-cjs/form-field/FormField.js.map +1 -1
  29. package/dist-cjs/form-field/FormFieldHelperText.js.map +1 -1
  30. package/dist-cjs/form-field/FormFieldLabel.js.map +1 -1
  31. package/dist-cjs/grid-layout/GridLayout.js.map +1 -1
  32. package/dist-cjs/input/Input.js.map +1 -1
  33. package/dist-cjs/interactable-card/InteractableCard.js.map +1 -1
  34. package/dist-cjs/interactable-card/InteractableCardGroup.js.map +1 -1
  35. package/dist-cjs/interactable-card/InteractableCardGroupContext.js.map +1 -1
  36. package/dist-cjs/interactable-card/useInteractableCard.js.map +1 -1
  37. package/dist-cjs/link/Link.js.map +1 -1
  38. package/dist-cjs/list-box/ListBox.js.map +1 -1
  39. package/dist-cjs/list-control/ListControlContext.js.map +1 -1
  40. package/dist-cjs/list-control/ListControlState.js.map +1 -1
  41. package/dist-cjs/menu/MenuBase.js.map +1 -1
  42. package/dist-cjs/menu/MenuContext.js.map +1 -1
  43. package/dist-cjs/menu/MenuGroup.js.map +1 -1
  44. package/dist-cjs/menu/MenuItem.js.map +1 -1
  45. package/dist-cjs/menu/MenuPanel.js.map +1 -1
  46. package/dist-cjs/menu/MenuPanelContext.js.map +1 -1
  47. package/dist-cjs/menu/MenuTrigger.js.map +1 -1
  48. package/dist-cjs/multiline-input/MultilineInput.js.map +1 -1
  49. package/dist-cjs/navigation-item/ExpansionIcon.js +1 -1
  50. package/dist-cjs/navigation-item/ExpansionIcon.js.map +1 -1
  51. package/dist-cjs/navigation-item/NavigationItem.js.map +1 -1
  52. package/dist-cjs/option/Option.js.map +1 -1
  53. package/dist-cjs/overlay/Overlay.js.map +1 -1
  54. package/dist-cjs/pagination/PageButton.js.map +1 -1
  55. package/dist-cjs/pagination/Pagination.js.map +1 -1
  56. package/dist-cjs/pagination/PaginationContext.js.map +1 -1
  57. package/dist-cjs/pagination/usePagination.js.map +1 -1
  58. package/dist-cjs/parent-child-layout/ParentChildLayout.js.map +1 -1
  59. package/dist-cjs/pill-input/PillInput.js.map +1 -1
  60. package/dist-cjs/progress/CircularProgress/CircularProgress.js.map +1 -1
  61. package/dist-cjs/progress/LinearProgress/LinearProgress.js.map +1 -1
  62. package/dist-cjs/radio-button/RadioButton.js.map +1 -1
  63. package/dist-cjs/radio-button/RadioButtonGroup.js.map +1 -1
  64. package/dist-cjs/radio-button/internal/RadioGroupContext.js.map +1 -1
  65. package/dist-cjs/salt-provider/SaltProvider.js.map +1 -1
  66. package/dist-cjs/skip-link/internal/useManageFocusOnTarget.js.map +1 -1
  67. package/dist-cjs/slider/RangeSlider.js.map +1 -1
  68. package/dist-cjs/slider/Slider.js.map +1 -1
  69. package/dist-cjs/slider/internal/SliderThumb.js.map +1 -1
  70. package/dist-cjs/slider/internal/SliderTrack.js.map +1 -1
  71. package/dist-cjs/slider/internal/useRangeSliderThumb.js.map +1 -1
  72. package/dist-cjs/slider/internal/useSliderThumb.js.map +1 -1
  73. package/dist-cjs/stack-layout/StackLayout.js.map +1 -1
  74. package/dist-cjs/stepper/Step.js +4 -3
  75. package/dist-cjs/stepper/Step.js.map +1 -1
  76. package/dist-cjs/stepper/internal/StepperProvider.js.map +1 -1
  77. package/dist-cjs/switch/Switch.js.map +1 -1
  78. package/dist-cjs/toggle-button/ToggleButton.js +2 -1
  79. package/dist-cjs/toggle-button/ToggleButton.js.map +1 -1
  80. package/dist-cjs/toggle-button-group/ToggleButtonGroup.js.map +1 -1
  81. package/dist-cjs/toggle-button-group/ToggleButtonGroupContext.js.map +1 -1
  82. package/dist-cjs/tooltip/Tooltip.js.map +1 -1
  83. package/dist-cjs/tooltip/TooltipBase.js.map +1 -1
  84. package/dist-cjs/tooltip/useAriaAnnounce.js.map +1 -1
  85. package/dist-cjs/tooltip/useTooltip.js.map +1 -1
  86. package/dist-cjs/utils/mergeProps.js.map +1 -1
  87. package/dist-cjs/utils/useControlled.js.map +1 -1
  88. package/dist-cjs/utils/useFloatingUI/useFloatingUI.js.map +1 -1
  89. package/dist-cjs/utils/useId.js.map +1 -1
  90. package/dist-cjs/utils/usePreventScroll.js.map +1 -1
  91. package/dist-cjs/utils/useResizeObserver.js.map +1 -1
  92. package/dist-cjs/utils/useResponsiveProp.js.map +1 -1
  93. package/dist-es/accordion/Accordion.js.map +1 -1
  94. package/dist-es/accordion/AccordionContext.js.map +1 -1
  95. package/dist-es/accordion/AccordionHeader.js.map +1 -1
  96. package/dist-es/accordion/AccordionPanel.js.map +1 -1
  97. package/dist-es/aria-announcer/AriaAnnouncerContext.js.map +1 -1
  98. package/dist-es/aria-announcer/AriaAnnouncerProvider.js.map +1 -1
  99. package/dist-es/aria-announcer/useAriaAnnouncer.js +1 -9
  100. package/dist-es/aria-announcer/useAriaAnnouncer.js.map +1 -1
  101. package/dist-es/avatar/Avatar.js.map +1 -1
  102. package/dist-es/breakpoints/BreakpointProvider.js +1 -1
  103. package/dist-es/button/Button.js.map +1 -1
  104. package/dist-es/button/useButton.js.map +1 -1
  105. package/dist-es/checkbox/Checkbox.js.map +1 -1
  106. package/dist-es/checkbox/CheckboxGroup.js.map +1 -1
  107. package/dist-es/checkbox/internal/CheckboxGroupContext.js.map +1 -1
  108. package/dist-es/combo-box/ComboBox.js.map +1 -1
  109. package/dist-es/combo-box/useComboBox.js.map +1 -1
  110. package/dist-es/dialog/Dialog.js.map +1 -1
  111. package/dist-es/dialog/DialogContent.js.map +1 -1
  112. package/dist-es/dialog/DialogContext.js.map +1 -1
  113. package/dist-es/drawer/Drawer.js.map +1 -1
  114. package/dist-es/dropdown/Dropdown.js.map +1 -1
  115. package/dist-es/file-drop-zone/FileDropZone.js +1 -1
  116. package/dist-es/file-drop-zone/FileDropZone.js.map +1 -1
  117. package/dist-es/file-drop-zone/FileDropZoneTrigger.js.map +1 -1
  118. package/dist-es/file-drop-zone/internal/utils.js.map +1 -1
  119. package/dist-es/flex-layout/parseSpacing.js.map +1 -1
  120. package/dist-es/form-field/FormField.js.map +1 -1
  121. package/dist-es/form-field/FormFieldHelperText.js.map +1 -1
  122. package/dist-es/form-field/FormFieldLabel.js.map +1 -1
  123. package/dist-es/grid-layout/GridLayout.js.map +1 -1
  124. package/dist-es/input/Input.js.map +1 -1
  125. package/dist-es/interactable-card/InteractableCard.js.map +1 -1
  126. package/dist-es/interactable-card/InteractableCardGroup.js.map +1 -1
  127. package/dist-es/interactable-card/InteractableCardGroupContext.js.map +1 -1
  128. package/dist-es/interactable-card/useInteractableCard.js.map +1 -1
  129. package/dist-es/link/Link.js.map +1 -1
  130. package/dist-es/list-box/ListBox.js.map +1 -1
  131. package/dist-es/list-control/ListControlContext.js.map +1 -1
  132. package/dist-es/list-control/ListControlState.js.map +1 -1
  133. package/dist-es/menu/MenuBase.js +1 -1
  134. package/dist-es/menu/MenuBase.js.map +1 -1
  135. package/dist-es/menu/MenuContext.js.map +1 -1
  136. package/dist-es/menu/MenuGroup.js.map +1 -1
  137. package/dist-es/menu/MenuItem.js.map +1 -1
  138. package/dist-es/menu/MenuPanel.js.map +1 -1
  139. package/dist-es/menu/MenuPanelContext.js.map +1 -1
  140. package/dist-es/menu/MenuTrigger.js.map +1 -1
  141. package/dist-es/multiline-input/MultilineInput.js.map +1 -1
  142. package/dist-es/navigation-item/ExpansionIcon.js +1 -1
  143. package/dist-es/navigation-item/ExpansionIcon.js.map +1 -1
  144. package/dist-es/navigation-item/NavigationItem.js.map +1 -1
  145. package/dist-es/option/Option.js.map +1 -1
  146. package/dist-es/overlay/Overlay.js +1 -1
  147. package/dist-es/overlay/Overlay.js.map +1 -1
  148. package/dist-es/pagination/PageButton.js.map +1 -1
  149. package/dist-es/pagination/Pagination.js.map +1 -1
  150. package/dist-es/pagination/PaginationContext.js.map +1 -1
  151. package/dist-es/pagination/usePagination.js.map +1 -1
  152. package/dist-es/parent-child-layout/ParentChildLayout.js.map +1 -1
  153. package/dist-es/pill-input/PillInput.js.map +1 -1
  154. package/dist-es/progress/CircularProgress/CircularProgress.js.map +1 -1
  155. package/dist-es/progress/LinearProgress/LinearProgress.js.map +1 -1
  156. package/dist-es/radio-button/RadioButton.js.map +1 -1
  157. package/dist-es/radio-button/RadioButtonGroup.js.map +1 -1
  158. package/dist-es/radio-button/internal/RadioGroupContext.js.map +1 -1
  159. package/dist-es/salt-provider/SaltProvider.js.map +1 -1
  160. package/dist-es/semantic-icon-provider/SemanticIconProvider.js +1 -1
  161. package/dist-es/skip-link/internal/useManageFocusOnTarget.js.map +1 -1
  162. package/dist-es/slider/RangeSlider.js.map +1 -1
  163. package/dist-es/slider/Slider.js.map +1 -1
  164. package/dist-es/slider/internal/SliderThumb.js.map +1 -1
  165. package/dist-es/slider/internal/SliderTrack.js.map +1 -1
  166. package/dist-es/slider/internal/useRangeSliderThumb.js.map +1 -1
  167. package/dist-es/slider/internal/useSliderThumb.js.map +1 -1
  168. package/dist-es/stack-layout/StackLayout.js.map +1 -1
  169. package/dist-es/stepper/Step.js +5 -4
  170. package/dist-es/stepper/Step.js.map +1 -1
  171. package/dist-es/stepper/internal/StepperProvider.js.map +1 -1
  172. package/dist-es/switch/Switch.js.map +1 -1
  173. package/dist-es/toggle-button/ToggleButton.js +2 -1
  174. package/dist-es/toggle-button/ToggleButton.js.map +1 -1
  175. package/dist-es/toggle-button-group/ToggleButtonGroup.js.map +1 -1
  176. package/dist-es/toggle-button-group/ToggleButtonGroupContext.js.map +1 -1
  177. package/dist-es/tooltip/Tooltip.js.map +1 -1
  178. package/dist-es/tooltip/TooltipBase.js.map +1 -1
  179. package/dist-es/tooltip/useAriaAnnounce.js.map +1 -1
  180. package/dist-es/tooltip/useTooltip.js +1 -1
  181. package/dist-es/tooltip/useTooltip.js.map +1 -1
  182. package/dist-es/utils/mergeProps.js.map +1 -1
  183. package/dist-es/utils/useControlled.js.map +1 -1
  184. package/dist-es/utils/useFloatingUI/useFloatingUI.js +2 -2
  185. package/dist-es/utils/useFloatingUI/useFloatingUI.js.map +1 -1
  186. package/dist-es/utils/useId.js.map +1 -1
  187. package/dist-es/utils/usePreventScroll.js.map +1 -1
  188. package/dist-es/utils/useResizeObserver.js.map +1 -1
  189. package/dist-es/utils/useResponsiveProp.js.map +1 -1
  190. package/dist-types/combo-box/ComboBox.d.ts +2 -2
  191. package/dist-types/form-field/FormFieldHelperText.d.ts +3 -1
  192. package/dist-types/stepper/Step.d.ts +1 -1
  193. package/dist-types/toggle-button/ToggleButton.d.ts +7 -2
  194. package/package.json +1 -1
@@ -1 +1 @@
1
- {"version":3,"file":"useSliderThumb.js","sources":["../src/slider/internal/useSliderThumb.ts"],"sourcesContent":["import { useWindow } from \"@salt-ds/window\";\nimport {\n type ChangeEvent,\n type Dispatch,\n type RefObject,\n type SetStateAction,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport type { SliderProps } from \"../Slider\";\nimport { getClickedPosition, getKeyboardValue } from \"./utils\";\n\ntype UseSliderThumbProps = Pick<SliderProps, \"min\" | \"max\" | \"step\"> & {\n decimalPlaces: number;\n handleInputChange: (event: ChangeEvent<HTMLInputElement>) => void;\n inputRef: RefObject<HTMLInputElement>;\n marks?: { label: string; value: number }[];\n onChange?: (event: Event, value: number) => void;\n onChangeEnd?: (event: Event, value: number) => void;\n restrictToMarks?: boolean;\n setValue: Dispatch<SetStateAction<number>>;\n stepMultiplier: number;\n value: number;\n};\n\nexport const useSliderThumb = ({\n decimalPlaces,\n handleInputChange,\n inputRef,\n marks,\n min = 0,\n max = 10,\n step = 1,\n onChange,\n onChangeEnd,\n restrictToMarks,\n setValue,\n stepMultiplier,\n value,\n}: UseSliderThumbProps) => {\n const [isDragging, setIsDragging] = useState(false);\n const [isFocusVisible, setIsFocusVisible] = useState(false);\n const lastValueRef = useRef<number>(value);\n const sliderRef = useRef<HTMLDivElement>(null);\n const targetWindow = useWindow();\n\n const handlePointerMove = useCallback(\n (event: PointerEvent) => {\n if (!sliderRef.current) return;\n const newValue = getClickedPosition(\n sliderRef,\n event.clientX,\n max,\n min,\n step,\n decimalPlaces,\n marks,\n restrictToMarks,\n );\n if (newValue === undefined || lastValueRef.current === newValue) {\n return;\n }\n lastValueRef.current = newValue;\n setValue(newValue);\n onChange?.(event, newValue);\n },\n [decimalPlaces, marks, max, min, onChange, setValue, restrictToMarks, step],\n );\n\n const handlePointerUp = useCallback(\n (event: PointerEvent) => {\n setIsDragging(false);\n setIsFocusVisible(false);\n onChangeEnd?.(event, lastValueRef.current);\n },\n [onChangeEnd],\n );\n\n useEffect(() => {\n if (isDragging) {\n targetWindow?.addEventListener(\"pointermove\", handlePointerMove);\n targetWindow?.addEventListener(\"pointerup\", handlePointerUp);\n } else {\n targetWindow?.removeEventListener(\"pointermove\", handlePointerMove);\n targetWindow?.removeEventListener(\"pointerup\", handlePointerUp);\n }\n return () => {\n targetWindow?.removeEventListener(\"pointermove\", handlePointerMove);\n targetWindow?.removeEventListener(\"pointerup\", handlePointerUp);\n };\n }, [handlePointerMove, handlePointerUp, isDragging, targetWindow]);\n\n const handlePointerDownOnThumb = useCallback(\n (event: React.PointerEvent<HTMLDivElement>) => {\n event.preventDefault();\n // To prevent the pointerdown event from bubbling up to the slider track\n // and triggering its pointerdown event\n event.stopPropagation();\n if (inputRef.current) inputRef.current.focus();\n setIsDragging(true);\n setIsFocusVisible(false);\n },\n [inputRef],\n );\n\n const handlePointerDownOnTrack = useCallback(\n (event: React.PointerEvent<HTMLDivElement>) => {\n event.preventDefault();\n if (inputRef.current) inputRef.current.focus();\n setIsDragging(true);\n setIsFocusVisible(false);\n const newValue = getClickedPosition(\n sliderRef,\n event.clientX,\n max,\n min,\n step,\n decimalPlaces,\n marks,\n restrictToMarks,\n );\n if (newValue === undefined || lastValueRef.current === newValue) {\n return;\n }\n lastValueRef.current = newValue;\n setValue(newValue);\n onChange?.(event.nativeEvent, newValue);\n },\n [\n decimalPlaces,\n inputRef,\n marks,\n max,\n min,\n onChange,\n restrictToMarks,\n setValue,\n step,\n ],\n );\n\n const handleKeydownOnThumb = useCallback(\n (event: React.KeyboardEvent) => {\n const newValue = getKeyboardValue(\n event,\n value,\n step,\n stepMultiplier,\n max,\n min,\n restrictToMarks,\n marks,\n );\n if (newValue === undefined || lastValueRef.current === newValue) {\n return;\n }\n setIsFocusVisible(true);\n lastValueRef.current = newValue;\n handleInputChange({\n target: { value: newValue.toString() },\n } as ChangeEvent<HTMLInputElement>);\n },\n [\n value,\n step,\n stepMultiplier,\n max,\n min,\n restrictToMarks,\n marks,\n handleInputChange,\n ],\n );\n\n const handleFocus = () => setIsFocusVisible(true);\n\n const handleBlur = () => setIsFocusVisible(false);\n\n return {\n handleBlur,\n handleFocus,\n handleKeydownOnThumb,\n handlePointerDownOnThumb,\n handlePointerDownOnTrack,\n isDragging,\n isFocusVisible,\n sliderRef,\n };\n};\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"useSliderThumb.js","sources":["../src/slider/internal/useSliderThumb.ts"],"sourcesContent":["import { useWindow } from \"@salt-ds/window\";\nimport {\n type ChangeEvent,\n type Dispatch,\n type RefObject,\n type SetStateAction,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport type { SliderProps } from \"../Slider\";\nimport { getClickedPosition, getKeyboardValue } from \"./utils\";\n\ntype UseSliderThumbProps = Pick<SliderProps, \"min\" | \"max\" | \"step\"> & {\n decimalPlaces: number;\n handleInputChange: (event: ChangeEvent<HTMLInputElement>) => void;\n inputRef: RefObject<HTMLInputElement>;\n marks?: { label: string; value: number }[];\n onChange?: (event: Event, value: number) => void;\n onChangeEnd?: (event: Event, value: number) => void;\n restrictToMarks?: boolean;\n setValue: Dispatch<SetStateAction<number>>;\n stepMultiplier: number;\n value: number;\n};\n\nexport const useSliderThumb = ({\n decimalPlaces,\n handleInputChange,\n inputRef,\n marks,\n min = 0,\n max = 10,\n step = 1,\n onChange,\n onChangeEnd,\n restrictToMarks,\n setValue,\n stepMultiplier,\n value,\n}: UseSliderThumbProps) => {\n const [isDragging, setIsDragging] = useState(false);\n const [isFocusVisible, setIsFocusVisible] = useState(false);\n const lastValueRef = useRef<number>(value);\n const sliderRef = useRef<HTMLDivElement>(null);\n const targetWindow = useWindow();\n\n const handlePointerMove = useCallback(\n (event: PointerEvent) => {\n if (!sliderRef.current) return;\n const newValue = getClickedPosition(\n sliderRef,\n event.clientX,\n max,\n min,\n step,\n decimalPlaces,\n marks,\n restrictToMarks,\n );\n if (newValue === undefined || lastValueRef.current === newValue) {\n return;\n }\n lastValueRef.current = newValue;\n setValue(newValue);\n onChange?.(event, newValue);\n },\n [decimalPlaces, marks, max, min, onChange, setValue, restrictToMarks, step],\n );\n\n const handlePointerUp = useCallback(\n (event: PointerEvent) => {\n setIsDragging(false);\n setIsFocusVisible(false);\n onChangeEnd?.(event, lastValueRef.current);\n },\n [onChangeEnd],\n );\n\n useEffect(() => {\n if (isDragging) {\n targetWindow?.addEventListener(\"pointermove\", handlePointerMove);\n targetWindow?.addEventListener(\"pointerup\", handlePointerUp);\n } else {\n targetWindow?.removeEventListener(\"pointermove\", handlePointerMove);\n targetWindow?.removeEventListener(\"pointerup\", handlePointerUp);\n }\n return () => {\n targetWindow?.removeEventListener(\"pointermove\", handlePointerMove);\n targetWindow?.removeEventListener(\"pointerup\", handlePointerUp);\n };\n }, [handlePointerMove, handlePointerUp, isDragging, targetWindow]);\n\n const handlePointerDownOnThumb = useCallback(\n (event: React.PointerEvent<HTMLDivElement>) => {\n event.preventDefault();\n // To prevent the pointerdown event from bubbling up to the slider track\n // and triggering its pointerdown event\n event.stopPropagation();\n if (inputRef.current) inputRef.current.focus();\n setIsDragging(true);\n setIsFocusVisible(false);\n },\n [inputRef],\n );\n\n const handlePointerDownOnTrack = useCallback(\n (event: React.PointerEvent<HTMLDivElement>) => {\n event.preventDefault();\n if (inputRef.current) inputRef.current.focus();\n setIsDragging(true);\n setIsFocusVisible(false);\n const newValue = getClickedPosition(\n sliderRef,\n event.clientX,\n max,\n min,\n step,\n decimalPlaces,\n marks,\n restrictToMarks,\n );\n if (newValue === undefined || lastValueRef.current === newValue) {\n return;\n }\n lastValueRef.current = newValue;\n setValue(newValue);\n onChange?.(event.nativeEvent, newValue);\n },\n [\n decimalPlaces,\n inputRef,\n marks,\n max,\n min,\n onChange,\n restrictToMarks,\n setValue,\n step,\n ],\n );\n\n const handleKeydownOnThumb = useCallback(\n (event: React.KeyboardEvent) => {\n const newValue = getKeyboardValue(\n event,\n value,\n step,\n stepMultiplier,\n max,\n min,\n restrictToMarks,\n marks,\n );\n if (newValue === undefined || lastValueRef.current === newValue) {\n return;\n }\n setIsFocusVisible(true);\n lastValueRef.current = newValue;\n handleInputChange({\n target: { value: newValue.toString() },\n } as ChangeEvent<HTMLInputElement>);\n },\n [\n value,\n step,\n stepMultiplier,\n max,\n min,\n restrictToMarks,\n marks,\n handleInputChange,\n ],\n );\n\n const handleFocus = () => setIsFocusVisible(true);\n\n const handleBlur = () => setIsFocusVisible(false);\n\n return {\n handleBlur,\n handleFocus,\n handleKeydownOnThumb,\n handlePointerDownOnThumb,\n handlePointerDownOnTrack,\n isDragging,\n isFocusVisible,\n sliderRef,\n };\n};\n"],"names":[],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"StackLayout.js","sources":["../src/stack-layout/StackLayout.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ElementType, type ReactElement, forwardRef } from \"react\";\nimport { useBreakpoint } from \"../breakpoints\";\nimport {\n FlexLayout,\n type FlexLayoutProps,\n type LayoutDirection,\n type LayoutSeparator,\n} from \"../flex-layout\";\nimport {\n type PolymorphicComponentPropWithRef,\n type PolymorphicRef,\n type ResponsiveProp,\n makePrefixer,\n resolveResponsiveValue,\n} from \"../utils\";\nimport stackLayoutCss from \"./StackLayout.css\";\n\nconst withBaseName = makePrefixer(\"saltStackLayout\");\n\nexport type StackLayoutProps<T extends ElementType> =\n PolymorphicComponentPropWithRef<\n T,\n {\n /**\n * Defines the default behavior for how flex items are laid out along the cross axis on the current line, default is \"stretch\".\n */\n align?: FlexLayoutProps<ElementType>[\"align\"];\n /**\n * Establishes the main-axis, defining the direction children are placed. Default is \"column\".\n */\n direction?: ResponsiveProp<LayoutDirection>;\n /**\n * Controls the space between items, default is 3.\n */\n gap?: FlexLayoutProps<ElementType>[\"gap\"];\n /**\n * Adds a separator between elements, default is false.\n */\n separators?: LayoutSeparator | boolean;\n /**\n * Defines the margin around the component. It can be specified as a number (which acts as a multiplier) or a string representing the margin value. Default is `0`.\n */\n margin?: FlexLayoutProps<ElementType>[\"margin\"];\n /**\n * Defines the padding within the component. It can be specified as a number (which acts as a multiplier) or a string representing the padding value. Default is `0`.\n */\n padding?: FlexLayoutProps<ElementType>[\"padding\"];\n }\n >;\n\ntype StackLayoutComponent = <T extends ElementType = \"div\">(\n props: StackLayoutProps<T>,\n) => ReactElement | null;\n\nfunction parseSpacing(value: number | string | undefined) {\n if (value === undefined || typeof value === \"string\") {\n return value;\n }\n\n return `calc(var(--salt-spacing-100) * ${value})`;\n}\n\nexport const StackLayout: StackLayoutComponent = forwardRef(\n <T extends ElementType = \"div\">(\n {\n children,\n className,\n direction = \"column\",\n gap = 3,\n separators,\n style,\n ...rest\n }: StackLayoutProps<T>,\n ref?: PolymorphicRef<T>,\n ) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-stack-layout\",\n css: stackLayoutCss,\n window: targetWindow,\n });\n\n const { matchedBreakpoints } = useBreakpoint();\n\n const flexGap = resolveResponsiveValue(gap, matchedBreakpoints);\n const separatorAlignment = separators === true ? \"center\" : separators;\n const flexDirection = resolveResponsiveValue(direction, matchedBreakpoints);\n const stackLayoutStyles = {\n ...style,\n \"--stackLayout-gap\": parseSpacing(flexGap),\n };\n return (\n <FlexLayout\n className={clsx(\n withBaseName(),\n {\n [withBaseName(flexDirection ?? \"\")]: flexDirection,\n [withBaseName(\"separator\")]: !!separatorAlignment,\n [separatorAlignment\n ? withBaseName(`separator-${separatorAlignment}`)\n : \"\"]: separatorAlignment,\n },\n className,\n )}\n ref={ref}\n direction={direction}\n style={stackLayoutStyles}\n wrap={false}\n gap={flexGap}\n {...rest}\n >\n {children}\n </FlexLayout>\n );\n },\n);\n"],"names":["stackLayoutCss"],"mappings":";;;;;;;;;;;;;AAoBA,MAAM,YAAA,GAAe,aAAa,iBAAiB,CAAA;AAqCnD,SAAS,aAAa,KAAoC,EAAA;AACxD,EAAA,IAAI,KAAU,KAAA,KAAA,CAAA,IAAa,OAAO,KAAA,KAAU,QAAU,EAAA;AACpD,IAAO,OAAA,KAAA;AAAA;AAGT,EAAA,OAAO,kCAAkC,KAAK,CAAA,CAAA,CAAA;AAChD;AAEO,MAAM,WAAoC,GAAA,UAAA;AAAA,EAC/C,CACE;AAAA,IACE,QAAA;AAAA,IACA,SAAA;AAAA,IACA,SAAY,GAAA,QAAA;AAAA,IACZ,GAAM,GAAA,CAAA;AAAA,IACN,UAAA;AAAA,IACA,KAAA;AAAA,IACA,GAAG;AAAA,KAEL,GACG,KAAA;AACH,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,mBAAA;AAAA,MACR,GAAK,EAAAA,QAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAM,MAAA,EAAE,kBAAmB,EAAA,GAAI,aAAc,EAAA;AAE7C,IAAM,MAAA,OAAA,GAAU,sBAAuB,CAAA,GAAA,EAAK,kBAAkB,CAAA;AAC9D,IAAM,MAAA,kBAAA,GAAqB,UAAe,KAAA,IAAA,GAAO,QAAW,GAAA,UAAA;AAC5D,IAAM,MAAA,aAAA,GAAgB,sBAAuB,CAAA,SAAA,EAAW,kBAAkB,CAAA;AAC1E,IAAA,MAAM,iBAAoB,GAAA;AAAA,MACxB,GAAG,KAAA;AAAA,MACH,mBAAA,EAAqB,aAAa,OAAO;AAAA,KAC3C;AACA,IACE,uBAAA,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAA,IAAA;AAAA,UACT,YAAa,EAAA;AAAA,UACb;AAAA,YACE,CAAC,YAAA,CAAa,aAAiB,IAAA,EAAE,CAAC,GAAG,aAAA;AAAA,YACrC,CAAC,YAAa,CAAA,WAAW,CAAC,GAAG,CAAC,CAAC,kBAAA;AAAA,YAC/B,CAAC,qBACG,YAAa,CAAA,CAAA,UAAA,EAAa,kBAAkB,CAAE,CAAA,CAAA,GAC9C,EAAE,GAAG;AAAA,WACX;AAAA,UACA;AAAA,SACF;AAAA,QACA,GAAA;AAAA,QACA,SAAA;AAAA,QACA,KAAO,EAAA,iBAAA;AAAA,QACP,IAAM,EAAA,KAAA;AAAA,QACN,GAAK,EAAA,OAAA;AAAA,QACJ,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA;AAGN;;;;"}
1
+ {"version":3,"file":"StackLayout.js","sources":["../src/stack-layout/StackLayout.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ElementType, type ReactElement, forwardRef } from \"react\";\nimport { useBreakpoint } from \"../breakpoints\";\nimport {\n FlexLayout,\n type FlexLayoutProps,\n type LayoutDirection,\n type LayoutSeparator,\n} from \"../flex-layout\";\nimport {\n type PolymorphicComponentPropWithRef,\n type PolymorphicRef,\n type ResponsiveProp,\n makePrefixer,\n resolveResponsiveValue,\n} from \"../utils\";\nimport stackLayoutCss from \"./StackLayout.css\";\n\nconst withBaseName = makePrefixer(\"saltStackLayout\");\n\nexport type StackLayoutProps<T extends ElementType> =\n PolymorphicComponentPropWithRef<\n T,\n {\n /**\n * Defines the default behavior for how flex items are laid out along the cross axis on the current line, default is \"stretch\".\n */\n align?: FlexLayoutProps<ElementType>[\"align\"];\n /**\n * Establishes the main-axis, defining the direction children are placed. Default is \"column\".\n */\n direction?: ResponsiveProp<LayoutDirection>;\n /**\n * Controls the space between items, default is 3.\n */\n gap?: FlexLayoutProps<ElementType>[\"gap\"];\n /**\n * Adds a separator between elements, default is false.\n */\n separators?: LayoutSeparator | boolean;\n /**\n * Defines the margin around the component. It can be specified as a number (which acts as a multiplier) or a string representing the margin value. Default is `0`.\n */\n margin?: FlexLayoutProps<ElementType>[\"margin\"];\n /**\n * Defines the padding within the component. It can be specified as a number (which acts as a multiplier) or a string representing the padding value. Default is `0`.\n */\n padding?: FlexLayoutProps<ElementType>[\"padding\"];\n }\n >;\n\ntype StackLayoutComponent = <T extends ElementType = \"div\">(\n props: StackLayoutProps<T>,\n) => ReactElement | null;\n\nfunction parseSpacing(value: number | string | undefined) {\n if (value === undefined || typeof value === \"string\") {\n return value;\n }\n\n return `calc(var(--salt-spacing-100) * ${value})`;\n}\n\nexport const StackLayout: StackLayoutComponent = forwardRef(\n <T extends ElementType = \"div\">(\n {\n children,\n className,\n direction = \"column\",\n gap = 3,\n separators,\n style,\n ...rest\n }: StackLayoutProps<T>,\n ref?: PolymorphicRef<T>,\n ) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-stack-layout\",\n css: stackLayoutCss,\n window: targetWindow,\n });\n\n const { matchedBreakpoints } = useBreakpoint();\n\n const flexGap = resolveResponsiveValue(gap, matchedBreakpoints);\n const separatorAlignment = separators === true ? \"center\" : separators;\n const flexDirection = resolveResponsiveValue(direction, matchedBreakpoints);\n const stackLayoutStyles = {\n ...style,\n \"--stackLayout-gap\": parseSpacing(flexGap),\n };\n return (\n <FlexLayout\n className={clsx(\n withBaseName(),\n {\n [withBaseName(flexDirection ?? \"\")]: flexDirection,\n [withBaseName(\"separator\")]: !!separatorAlignment,\n [separatorAlignment\n ? withBaseName(`separator-${separatorAlignment}`)\n : \"\"]: separatorAlignment,\n },\n className,\n )}\n ref={ref}\n direction={direction}\n style={stackLayoutStyles}\n wrap={false}\n gap={flexGap}\n {...rest}\n >\n {children}\n </FlexLayout>\n );\n },\n);\n"],"names":["stackLayoutCss"],"mappings":";;;;;;;;;;;;;AAoBA,MAAM,YAAA,GAAe,aAAa,iBAAiB,CAAA;AAqCnD,SAAS,aAAa,KAAoC,EAAA;AACxD,EAAA,IAAI,KAAU,KAAA,MAAA,IAAa,OAAO,KAAA,KAAU,QAAU,EAAA;AACpD,IAAO,OAAA,KAAA;AAAA;AAGT,EAAA,OAAO,kCAAkC,KAAK,CAAA,CAAA,CAAA;AAChD;AAEO,MAAM,WAAoC,GAAA,UAAA;AAAA,EAC/C,CACE;AAAA,IACE,QAAA;AAAA,IACA,SAAA;AAAA,IACA,SAAY,GAAA,QAAA;AAAA,IACZ,GAAM,GAAA,CAAA;AAAA,IACN,UAAA;AAAA,IACA,KAAA;AAAA,IACA,GAAG;AAAA,KAEL,GACG,KAAA;AACH,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,mBAAA;AAAA,MACR,GAAK,EAAAA,QAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAM,MAAA,EAAE,kBAAmB,EAAA,GAAI,aAAc,EAAA;AAE7C,IAAM,MAAA,OAAA,GAAU,sBAAuB,CAAA,GAAA,EAAK,kBAAkB,CAAA;AAC9D,IAAM,MAAA,kBAAA,GAAqB,UAAe,KAAA,IAAA,GAAO,QAAW,GAAA,UAAA;AAC5D,IAAM,MAAA,aAAA,GAAgB,sBAAuB,CAAA,SAAA,EAAW,kBAAkB,CAAA;AAC1E,IAAA,MAAM,iBAAoB,GAAA;AAAA,MACxB,GAAG,KAAA;AAAA,MACH,mBAAA,EAAqB,aAAa,OAAO;AAAA,KAC3C;AACA,IACE,uBAAA,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAA,IAAA;AAAA,UACT,YAAa,EAAA;AAAA,UACb;AAAA,YACE,CAAC,YAAA,CAAa,aAAiB,IAAA,EAAE,CAAC,GAAG,aAAA;AAAA,YACrC,CAAC,YAAa,CAAA,WAAW,CAAC,GAAG,CAAC,CAAC,kBAAA;AAAA,YAC/B,CAAC,qBACG,YAAa,CAAA,CAAA,UAAA,EAAa,kBAAkB,CAAE,CAAA,CAAA,GAC9C,EAAE,GAAG;AAAA,WACX;AAAA,UACA;AAAA,SACF;AAAA,QACA,GAAA;AAAA,QACA,SAAA;AAAA,QACA,KAAO,EAAA,iBAAA;AAAA,QACP,IAAM,EAAA,KAAA;AAAA,QACN,GAAK,EAAA,OAAA;AAAA,QACJ,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA;AAGN;;;;"}
@@ -2,7 +2,7 @@ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
2
2
  import { useComponentCssInjection } from '@salt-ds/styles';
3
3
  import { useWindow } from '@salt-ds/window';
4
4
  import clsx from 'clsx';
5
- import { useContext, useEffect } from 'react';
5
+ import { forwardRef, useContext, useEffect } from 'react';
6
6
  import { makePrefixer } from '../utils/makePrefixer.js';
7
7
  import { useControlled } from '../utils/useControlled.js';
8
8
  import '../utils/useFloatingUI/useFloatingUI.js';
@@ -19,7 +19,7 @@ import { StepText } from './internal/StepText.js';
19
19
  import { StepDepthContext, StepperOrientationContext } from './internal/StepperProvider.js';
20
20
 
21
21
  const withBaseName = makePrefixer("saltStep");
22
- function Step({
22
+ const Step = forwardRef(function Step2({
23
23
  id: idProp,
24
24
  label,
25
25
  description,
@@ -32,7 +32,7 @@ function Step({
32
32
  style,
33
33
  children,
34
34
  ...rest
35
- }) {
35
+ }, ref) {
36
36
  const id = useId(idProp);
37
37
  const targetWindow = useWindow();
38
38
  const depth = useContext(StepDepthContext);
@@ -100,6 +100,7 @@ function Step({
100
100
  ...style
101
101
  },
102
102
  ...rest,
103
+ ref,
103
104
  children: [
104
105
  /* @__PURE__ */ jsx(StepScreenReaderOnly, { children: `${label} ${description !== void 0 ? description : ""} ${screenReaderOnly.stateText}` }),
105
106
  hasNestedSteps && /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -158,7 +159,7 @@ function Step({
158
159
  ]
159
160
  }
160
161
  );
161
- }
162
+ });
162
163
 
163
164
  export { Step };
164
165
  //# sourceMappingURL=Step.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Step.js","sources":["../src/stepper/Step.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport clsx from \"clsx\";\nimport {\n type CSSProperties,\n type ComponentPropsWithoutRef,\n type ReactNode,\n useContext,\n useEffect,\n} from \"react\";\nimport { makePrefixer, useControlled, useId } from \"../utils\";\n\nimport type { ButtonProps } from \"../button\";\nimport stepCSS from \"./Step.css\";\nimport { Stepper } from \"./Stepper\";\nimport { StepConnector } from \"./internal/StepConnector\";\nimport { StepExpandTrigger } from \"./internal/StepExpandTrigger\";\nimport { StepIcon } from \"./internal/StepIcon\";\nimport { StepScreenReaderOnly } from \"./internal/StepScreenReaderOnly\";\nimport { StepText } from \"./internal/StepText\";\nimport {\n StepDepthContext,\n StepperOrientationContext,\n} from \"./internal/StepperProvider\";\n\nexport interface StepProps\n extends Omit<ComponentPropsWithoutRef<\"li\">, \"onToggle\"> {\n /**\n * The label of the step\n */\n label?: ReactNode;\n /**\n * Description text is displayed just below the label\n **/\n description?: ReactNode;\n /**\n * Optional string to determine the status of the step.\n */\n status?: StepStatus;\n /**\n * The stage of the step\n */\n stage?: StepStage;\n /**\n * Whether the step item is expanded.\n */\n expanded?: boolean;\n /**\n * Initial expanded state of the step.\n */\n defaultExpanded?: boolean;\n /**\n * Callback fired when the step is toggled.\n */\n onToggle?: ButtonProps[\"onClick\"];\n}\n\nexport type StepId = string;\n\nexport type StepStatus = \"warning\" | \"error\";\n\nexport type StepStage =\n | \"pending\"\n | \"locked\"\n | \"completed\"\n | \"inprogress\"\n | \"active\";\n\nexport type StepDepth = number;\n\nexport interface StepProps\n extends Omit<ComponentPropsWithoutRef<\"li\">, \"onToggle\"> {\n label?: ReactNode;\n description?: ReactNode;\n status?: StepStatus;\n stage?: StepStage;\n expanded?: boolean;\n defaultExpanded?: boolean;\n onToggle?: ButtonProps[\"onClick\"];\n}\n\nconst withBaseName = makePrefixer(\"saltStep\");\n\nexport function Step({\n id: idProp,\n label,\n description,\n status,\n stage = \"pending\",\n expanded: expandedProp,\n defaultExpanded,\n onToggle,\n className,\n style,\n children,\n ...rest\n}: StepProps) {\n const id = useId(idProp);\n const targetWindow = useWindow();\n const depth = useContext(StepDepthContext);\n const orientation = useContext(StepperOrientationContext);\n\n const hasNestedSteps = !!children;\n\n const [expanded, setExpanded] = useControlled({\n name: \"Step\",\n state: \"expanded\",\n controlled: expandedProp,\n default: Boolean(defaultExpanded),\n });\n\n useComponentCssInjection({\n testId: \"salt-step\",\n css: stepCSS,\n window: targetWindow,\n });\n\n useEffect(() => {\n if (process.env.NODE_ENV !== \"production\") {\n if (depth === -1) {\n console.warn(\"<Step /> should be used within a <Stepper /> component!\");\n }\n if (depth > 2) {\n console.warn(\"<Step /> should not be nested more than 2 levels deep!\");\n }\n if (orientation === \"horizontal\" && hasNestedSteps) {\n console.warn(\n \"<Stepper /> does not support nested steps in horizontal orientation!\",\n );\n }\n }\n }, [depth, orientation]);\n\n const ariaCurrent = stage === \"active\" ? \"step\" : undefined;\n const iconSizeMultiplier = depth === 0 ? 1.5 : 1;\n const stageText = stage === \"inprogress\" ? \"in progress\" : stage;\n const state = status || stageText;\n\n const labelId = `${id}-label`;\n const descriptionId = `${id}-description`;\n const expandTriggerId = `${id}-expand-trigger`;\n const nestedStepperId = `${id}-nested-stepper`;\n\n const screenReaderOnly = {\n stateId: `${id}-sr-only-state`,\n stateText: state !== \"active\" ? state : \"\",\n substepsId: `${id}-sr-only-substeps`,\n substepsText: \"substeps\",\n toggleSubstepsId: `${id}-sr-only-toggle-substeps`,\n toggleSubstepsText: \"toggle substeps\",\n };\n\n return (\n <li\n id={id}\n aria-current={ariaCurrent}\n className={clsx(\n withBaseName(),\n withBaseName(`stage-${stage}`),\n withBaseName(`depth-${depth}`),\n status && withBaseName(`status-${status}`),\n !hasNestedSteps && withBaseName(\"terminal\"),\n hasNestedSteps && expanded && withBaseName(\"expanded\"),\n hasNestedSteps && !expanded && withBaseName(\"collapsed\"),\n className,\n )}\n style={\n {\n \"--saltStep-depth\": depth,\n ...style,\n } as CSSProperties\n }\n {...rest}\n >\n <StepScreenReaderOnly>\n {`${label} ${description !== undefined ? description : \"\"} ${screenReaderOnly.stateText}`}\n </StepScreenReaderOnly>\n {hasNestedSteps && (\n <>\n <StepScreenReaderOnly\n id={screenReaderOnly.toggleSubstepsId}\n aria-hidden\n >\n {screenReaderOnly.toggleSubstepsText}\n </StepScreenReaderOnly>\n <StepScreenReaderOnly id={screenReaderOnly.substepsId} aria-hidden>\n {screenReaderOnly.substepsText}\n </StepScreenReaderOnly>\n <StepScreenReaderOnly id={screenReaderOnly.stateId} aria-hidden>\n {screenReaderOnly.stateText}\n </StepScreenReaderOnly>\n </>\n )}\n <StepConnector />\n <StepIcon\n stage={stage}\n status={status}\n sizeMultiplier={iconSizeMultiplier}\n aria-hidden\n />\n {label && (\n <StepText id={labelId} purpose=\"label\" aria-hidden>\n {label}\n </StepText>\n )}\n {description && (\n <StepText id={descriptionId} purpose=\"description\" aria-hidden>\n {description}\n </StepText>\n )}\n {hasNestedSteps && orientation === \"vertical\" && (\n <StepExpandTrigger\n id={expandTriggerId}\n aria-expanded={expanded}\n aria-controls={nestedStepperId}\n aria-labelledby={[\n labelId,\n descriptionId,\n screenReaderOnly.stateId,\n screenReaderOnly.toggleSubstepsId,\n ].join(\" \")}\n expanded={expanded}\n onClick={(event) => {\n onToggle?.(event);\n setExpanded(!expanded);\n }}\n />\n )}\n {hasNestedSteps && orientation === \"vertical\" && (\n <Stepper\n id={nestedStepperId}\n aria-labelledby={[labelId, screenReaderOnly.substepsId].join(\" \")}\n aria-hidden={!expanded}\n hidden={!expanded}\n >\n {children}\n </Stepper>\n )}\n </li>\n );\n}\n"],"names":["stepCSS"],"mappings":"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"}
1
+ {"version":3,"file":"Step.js","sources":["../src/stepper/Step.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport clsx from \"clsx\";\nimport {\n type CSSProperties,\n type ComponentPropsWithoutRef,\n type ReactNode,\n forwardRef,\n useContext,\n useEffect,\n} from \"react\";\nimport { makePrefixer, useControlled, useId } from \"../utils\";\n\nimport type { ButtonProps } from \"../button\";\nimport stepCSS from \"./Step.css\";\nimport { Stepper } from \"./Stepper\";\nimport { StepConnector } from \"./internal/StepConnector\";\nimport { StepExpandTrigger } from \"./internal/StepExpandTrigger\";\nimport { StepIcon } from \"./internal/StepIcon\";\nimport { StepScreenReaderOnly } from \"./internal/StepScreenReaderOnly\";\nimport { StepText } from \"./internal/StepText\";\nimport {\n StepDepthContext,\n StepperOrientationContext,\n} from \"./internal/StepperProvider\";\n\nexport interface StepProps\n extends Omit<ComponentPropsWithoutRef<\"li\">, \"onToggle\"> {\n /**\n * The label of the step\n */\n label?: ReactNode;\n /**\n * Description text is displayed just below the label\n **/\n description?: ReactNode;\n /**\n * Optional string to determine the status of the step.\n */\n status?: StepStatus;\n /**\n * The stage of the step\n */\n stage?: StepStage;\n /**\n * Whether the step item is expanded.\n */\n expanded?: boolean;\n /**\n * Initial expanded state of the step.\n */\n defaultExpanded?: boolean;\n /**\n * Callback fired when the step is toggled.\n */\n onToggle?: ButtonProps[\"onClick\"];\n}\n\nexport type StepId = string;\n\nexport type StepStatus = \"warning\" | \"error\";\n\nexport type StepStage =\n | \"pending\"\n | \"locked\"\n | \"completed\"\n | \"inprogress\"\n | \"active\";\n\nexport type StepDepth = number;\n\nexport interface StepProps\n extends Omit<ComponentPropsWithoutRef<\"li\">, \"onToggle\"> {\n label?: ReactNode;\n description?: ReactNode;\n status?: StepStatus;\n stage?: StepStage;\n expanded?: boolean;\n defaultExpanded?: boolean;\n onToggle?: ButtonProps[\"onClick\"];\n}\n\nconst withBaseName = makePrefixer(\"saltStep\");\n\nexport const Step = forwardRef<HTMLLIElement, StepProps>(function Step(\n {\n id: idProp,\n label,\n description,\n status,\n stage = \"pending\",\n expanded: expandedProp,\n defaultExpanded,\n onToggle,\n className,\n style,\n children,\n ...rest\n },\n ref,\n) {\n const id = useId(idProp);\n const targetWindow = useWindow();\n const depth = useContext(StepDepthContext);\n const orientation = useContext(StepperOrientationContext);\n\n const hasNestedSteps = !!children;\n\n const [expanded, setExpanded] = useControlled({\n name: \"Step\",\n state: \"expanded\",\n controlled: expandedProp,\n default: Boolean(defaultExpanded),\n });\n\n useComponentCssInjection({\n testId: \"salt-step\",\n css: stepCSS,\n window: targetWindow,\n });\n\n useEffect(() => {\n if (process.env.NODE_ENV !== \"production\") {\n if (depth === -1) {\n console.warn(\"<Step /> should be used within a <Stepper /> component!\");\n }\n if (depth > 2) {\n console.warn(\"<Step /> should not be nested more than 2 levels deep!\");\n }\n if (orientation === \"horizontal\" && hasNestedSteps) {\n console.warn(\n \"<Stepper /> does not support nested steps in horizontal orientation!\",\n );\n }\n }\n }, [depth, orientation]);\n\n const ariaCurrent = stage === \"active\" ? \"step\" : undefined;\n const iconSizeMultiplier = depth === 0 ? 1.5 : 1;\n const stageText = stage === \"inprogress\" ? \"in progress\" : stage;\n const state = status || stageText;\n\n const labelId = `${id}-label`;\n const descriptionId = `${id}-description`;\n const expandTriggerId = `${id}-expand-trigger`;\n const nestedStepperId = `${id}-nested-stepper`;\n\n const screenReaderOnly = {\n stateId: `${id}-sr-only-state`,\n stateText: state !== \"active\" ? state : \"\",\n substepsId: `${id}-sr-only-substeps`,\n substepsText: \"substeps\",\n toggleSubstepsId: `${id}-sr-only-toggle-substeps`,\n toggleSubstepsText: \"toggle substeps\",\n };\n\n return (\n <li\n id={id}\n aria-current={ariaCurrent}\n className={clsx(\n withBaseName(),\n withBaseName(`stage-${stage}`),\n withBaseName(`depth-${depth}`),\n status && withBaseName(`status-${status}`),\n !hasNestedSteps && withBaseName(\"terminal\"),\n hasNestedSteps && expanded && withBaseName(\"expanded\"),\n hasNestedSteps && !expanded && withBaseName(\"collapsed\"),\n className,\n )}\n style={\n {\n \"--saltStep-depth\": depth,\n ...style,\n } as CSSProperties\n }\n {...rest}\n ref={ref}\n >\n <StepScreenReaderOnly>\n {`${label} ${description !== undefined ? description : \"\"} ${screenReaderOnly.stateText}`}\n </StepScreenReaderOnly>\n {hasNestedSteps && (\n <>\n <StepScreenReaderOnly\n id={screenReaderOnly.toggleSubstepsId}\n aria-hidden\n >\n {screenReaderOnly.toggleSubstepsText}\n </StepScreenReaderOnly>\n <StepScreenReaderOnly id={screenReaderOnly.substepsId} aria-hidden>\n {screenReaderOnly.substepsText}\n </StepScreenReaderOnly>\n <StepScreenReaderOnly id={screenReaderOnly.stateId} aria-hidden>\n {screenReaderOnly.stateText}\n </StepScreenReaderOnly>\n </>\n )}\n <StepConnector />\n <StepIcon\n stage={stage}\n status={status}\n sizeMultiplier={iconSizeMultiplier}\n aria-hidden\n />\n {label && (\n <StepText id={labelId} purpose=\"label\" aria-hidden>\n {label}\n </StepText>\n )}\n {description && (\n <StepText id={descriptionId} purpose=\"description\" aria-hidden>\n {description}\n </StepText>\n )}\n {hasNestedSteps && orientation === \"vertical\" && (\n <StepExpandTrigger\n id={expandTriggerId}\n aria-expanded={expanded}\n aria-controls={nestedStepperId}\n aria-labelledby={[\n labelId,\n descriptionId,\n screenReaderOnly.stateId,\n screenReaderOnly.toggleSubstepsId,\n ].join(\" \")}\n expanded={expanded}\n onClick={(event) => {\n onToggle?.(event);\n setExpanded(!expanded);\n }}\n />\n )}\n {hasNestedSteps && orientation === \"vertical\" && (\n <Stepper\n id={nestedStepperId}\n aria-labelledby={[labelId, screenReaderOnly.substepsId].join(\" \")}\n aria-hidden={!expanded}\n hidden={!expanded}\n >\n {children}\n </Stepper>\n )}\n </li>\n );\n});\n"],"names":["Step","stepCSS"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"StepperProvider.js","sources":["../src/stepper/internal/StepperProvider.tsx"],"sourcesContent":["import { type ReactNode, createContext, useContext } from \"react\";\n\nimport type { StepDepth } from \"../Step\";\nimport type { StepperOrientation } from \"../Stepper\";\n\nexport const StepperOrientationContext =\n createContext<StepperOrientation>(\"horizontal\");\nexport const StepDepthContext = createContext<StepDepth>(-1);\n\nexport interface StepperProviderProps {\n orientation: StepperOrientation;\n children: ReactNode;\n}\n\nexport function StepperProvider({\n orientation: orientationProp,\n children,\n}: StepperProviderProps) {\n const depth = useContext(StepDepthContext);\n\n return (\n <StepperOrientationContext.Provider value={orientationProp}>\n <StepDepthContext.Provider value={depth + 1}>\n {children}\n </StepDepthContext.Provider>\n </StepperOrientationContext.Provider>\n );\n}\n"],"names":[],"mappings":";;;AAKa,MAAA,yBAAA,GACX,cAAkC,YAAY;AACnC,MAAA,gBAAA,GAAmB,cAAyB,CAAE,CAAA;AAOpD,SAAS,eAAgB,CAAA;AAAA,EAC9B,WAAa,EAAA,eAAA;AAAA,EACb;AACF,CAAyB,EAAA;AACvB,EAAM,MAAA,KAAA,GAAQ,WAAW,gBAAgB,CAAA;AAEzC,EAAA,uBACG,GAAA,CAAA,yBAAA,CAA0B,QAA1B,EAAA,EAAmC,OAAO,eACzC,EAAA,QAAA,kBAAA,GAAA,CAAC,gBAAiB,CAAA,QAAA,EAAjB,EAA0B,KAAA,EAAO,KAAQ,GAAA,CAAA,EACvC,UACH,CACF,EAAA,CAAA;AAEJ;;;;"}
1
+ {"version":3,"file":"StepperProvider.js","sources":["../src/stepper/internal/StepperProvider.tsx"],"sourcesContent":["import { type ReactNode, createContext, useContext } from \"react\";\n\nimport type { StepDepth } from \"../Step\";\nimport type { StepperOrientation } from \"../Stepper\";\n\nexport const StepperOrientationContext =\n createContext<StepperOrientation>(\"horizontal\");\nexport const StepDepthContext = createContext<StepDepth>(-1);\n\nexport interface StepperProviderProps {\n orientation: StepperOrientation;\n children: ReactNode;\n}\n\nexport function StepperProvider({\n orientation: orientationProp,\n children,\n}: StepperProviderProps) {\n const depth = useContext(StepDepthContext);\n\n return (\n <StepperOrientationContext.Provider value={orientationProp}>\n <StepDepthContext.Provider value={depth + 1}>\n {children}\n </StepDepthContext.Provider>\n </StepperOrientationContext.Provider>\n );\n}\n"],"names":[],"mappings":";;;AAKa,MAAA,yBAAA,GACX,cAAkC,YAAY;AACnC,MAAA,gBAAA,GAAmB,cAAyB,EAAE;AAOpD,SAAS,eAAgB,CAAA;AAAA,EAC9B,WAAa,EAAA,eAAA;AAAA,EACb;AACF,CAAyB,EAAA;AACvB,EAAM,MAAA,KAAA,GAAQ,WAAW,gBAAgB,CAAA;AAEzC,EAAA,uBACG,GAAA,CAAA,yBAAA,CAA0B,QAA1B,EAAA,EAAmC,OAAO,eACzC,EAAA,QAAA,kBAAA,GAAA,CAAC,gBAAiB,CAAA,QAAA,EAAjB,EAA0B,KAAA,EAAO,KAAQ,GAAA,CAAA,EACvC,UACH,CACF,EAAA,CAAA;AAEJ;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"Switch.js","sources":["../src/switch/Switch.tsx"],"sourcesContent":["import {\n type IconProps,\n SuccessSmallSolidIcon,\n SuccessSolidIcon,\n} from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ChangeEventHandler,\n type ComponentPropsWithoutRef,\n type FocusEventHandler,\n type ReactNode,\n forwardRef,\n} from \"react\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { useDensity } from \"../salt-provider\";\nimport type { DataAttributes } from \"../types\";\nimport { makePrefixer, useControlled } from \"../utils\";\n\nimport switchCss from \"./Switch.css\";\n\nexport interface SwitchProps\n extends Omit<\n ComponentPropsWithoutRef<\"label\">,\n \"children\" | \"onFocus\" | \"onBlur\" | \"onChange\"\n > {\n /**\n * If `true`, the switch will be checked.\n */\n checked?: boolean;\n /**\n * Whether the switch component is checked by default\n * This will be disregarded if checked is already set.\n */\n defaultChecked?: boolean;\n /**\n * If `true`, the switch will be disabled.\n */\n disabled?: boolean;\n /**\n * Properties applied to the input element.\n */\n inputProps?: Partial<ComponentPropsWithoutRef<\"input\">> & DataAttributes;\n /**\n * The label to be shown next to the switch.\n */\n label?: ReactNode;\n /**\n * The name applied to the input.\n */\n name?: string;\n /**\n * Callback when switch loses focus.\n */\n onBlur?: FocusEventHandler<HTMLInputElement>;\n /**\n * Callback when checked state is changed.\n */\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /**\n * Callback when switch gains focus.\n */\n onFocus?: FocusEventHandler<HTMLInputElement>;\n /**\n * The value of the switch.\n */\n value?: string;\n}\n\nconst withBaseName = makePrefixer(\"saltSwitch\");\n\nfunction CheckedIcon(props: IconProps) {\n const density = useDensity();\n return density === \"high\" ? (\n <SuccessSmallSolidIcon {...props} />\n ) : (\n <SuccessSolidIcon {...props} />\n );\n}\n\nexport const Switch = forwardRef<HTMLLabelElement, SwitchProps>(\n function Switch(props, ref) {\n const {\n checked: checkedProp,\n className,\n defaultChecked,\n disabled: disabledProp,\n inputProps = {},\n label,\n name,\n onBlur,\n onChange,\n onFocus,\n value,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-switch\",\n css: switchCss,\n window: targetWindow,\n });\n\n const {\n \"aria-describedby\": inputDescribedBy,\n \"aria-labelledby\": inputLabelledBy,\n className: inputClassName,\n onChange: inputOnChange,\n ...restInputProps\n } = inputProps;\n\n const [checked, setChecked] = useControlled({\n controlled: checkedProp,\n default: Boolean(defaultChecked),\n name: \"Switch\",\n state: \"checked\",\n });\n\n const { a11yProps: formFieldA11yProps, disabled: formFieldDisabled } =\n useFormFieldProps();\n\n const disabled = formFieldDisabled || disabledProp;\n\n const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n // Workaround for https://github.com/facebook/react/issues/9023\n if (event.nativeEvent.defaultPrevented) {\n return;\n }\n\n const value = event.target.checked;\n setChecked(value);\n onChange?.(event);\n inputOnChange?.(event);\n };\n\n return (\n <label\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(\"checked\")]: checked,\n },\n className,\n )}\n ref={ref}\n {...rest}\n >\n <input\n aria-describedby={clsx(\n formFieldA11yProps?.[\"aria-describedby\"],\n inputDescribedBy,\n )}\n aria-labelledby={clsx(\n formFieldA11yProps?.[\"aria-labelledby\"],\n inputLabelledBy,\n )}\n name={name}\n value={value}\n checked={checked}\n className={clsx(withBaseName(\"input\"), inputClassName)}\n defaultChecked={defaultChecked}\n disabled={disabled}\n onBlur={onBlur}\n onChange={handleChange}\n onFocus={onFocus}\n type=\"checkbox\"\n role=\"switch\"\n {...restInputProps}\n />\n <span className={withBaseName(\"track\")}>\n <span className={withBaseName(\"thumb\")}>\n {checked && (\n <CheckedIcon aria-hidden className={withBaseName(\"icon\")} />\n )}\n </span>\n </span>\n {label && <span className={withBaseName(\"label\")}>{label}</span>}\n </label>\n );\n },\n);\n"],"names":["Switch","switchCss","value"],"mappings":"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"}
1
+ {"version":3,"file":"Switch.js","sources":["../src/switch/Switch.tsx"],"sourcesContent":["import {\n type IconProps,\n SuccessSmallSolidIcon,\n SuccessSolidIcon,\n} from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ChangeEventHandler,\n type ComponentPropsWithoutRef,\n type FocusEventHandler,\n type ReactNode,\n forwardRef,\n} from \"react\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { useDensity } from \"../salt-provider\";\nimport type { DataAttributes } from \"../types\";\nimport { makePrefixer, useControlled } from \"../utils\";\n\nimport switchCss from \"./Switch.css\";\n\nexport interface SwitchProps\n extends Omit<\n ComponentPropsWithoutRef<\"label\">,\n \"children\" | \"onFocus\" | \"onBlur\" | \"onChange\"\n > {\n /**\n * If `true`, the switch will be checked.\n */\n checked?: boolean;\n /**\n * Whether the switch component is checked by default\n * This will be disregarded if checked is already set.\n */\n defaultChecked?: boolean;\n /**\n * If `true`, the switch will be disabled.\n */\n disabled?: boolean;\n /**\n * Properties applied to the input element.\n */\n inputProps?: Partial<ComponentPropsWithoutRef<\"input\">> & DataAttributes;\n /**\n * The label to be shown next to the switch.\n */\n label?: ReactNode;\n /**\n * The name applied to the input.\n */\n name?: string;\n /**\n * Callback when switch loses focus.\n */\n onBlur?: FocusEventHandler<HTMLInputElement>;\n /**\n * Callback when checked state is changed.\n */\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /**\n * Callback when switch gains focus.\n */\n onFocus?: FocusEventHandler<HTMLInputElement>;\n /**\n * The value of the switch.\n */\n value?: string;\n}\n\nconst withBaseName = makePrefixer(\"saltSwitch\");\n\nfunction CheckedIcon(props: IconProps) {\n const density = useDensity();\n return density === \"high\" ? (\n <SuccessSmallSolidIcon {...props} />\n ) : (\n <SuccessSolidIcon {...props} />\n );\n}\n\nexport const Switch = forwardRef<HTMLLabelElement, SwitchProps>(\n function Switch(props, ref) {\n const {\n checked: checkedProp,\n className,\n defaultChecked,\n disabled: disabledProp,\n inputProps = {},\n label,\n name,\n onBlur,\n onChange,\n onFocus,\n value,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-switch\",\n css: switchCss,\n window: targetWindow,\n });\n\n const {\n \"aria-describedby\": inputDescribedBy,\n \"aria-labelledby\": inputLabelledBy,\n className: inputClassName,\n onChange: inputOnChange,\n ...restInputProps\n } = inputProps;\n\n const [checked, setChecked] = useControlled({\n controlled: checkedProp,\n default: Boolean(defaultChecked),\n name: \"Switch\",\n state: \"checked\",\n });\n\n const { a11yProps: formFieldA11yProps, disabled: formFieldDisabled } =\n useFormFieldProps();\n\n const disabled = formFieldDisabled || disabledProp;\n\n const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n // Workaround for https://github.com/facebook/react/issues/9023\n if (event.nativeEvent.defaultPrevented) {\n return;\n }\n\n const value = event.target.checked;\n setChecked(value);\n onChange?.(event);\n inputOnChange?.(event);\n };\n\n return (\n <label\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(\"checked\")]: checked,\n },\n className,\n )}\n ref={ref}\n {...rest}\n >\n <input\n aria-describedby={clsx(\n formFieldA11yProps?.[\"aria-describedby\"],\n inputDescribedBy,\n )}\n aria-labelledby={clsx(\n formFieldA11yProps?.[\"aria-labelledby\"],\n inputLabelledBy,\n )}\n name={name}\n value={value}\n checked={checked}\n className={clsx(withBaseName(\"input\"), inputClassName)}\n defaultChecked={defaultChecked}\n disabled={disabled}\n onBlur={onBlur}\n onChange={handleChange}\n onFocus={onFocus}\n type=\"checkbox\"\n role=\"switch\"\n {...restInputProps}\n />\n <span className={withBaseName(\"track\")}>\n <span className={withBaseName(\"thumb\")}>\n {checked && (\n <CheckedIcon aria-hidden className={withBaseName(\"icon\")} />\n )}\n </span>\n </span>\n {label && <span className={withBaseName(\"label\")}>{label}</span>}\n </label>\n );\n },\n);\n"],"names":["Switch","switchCss","value"],"mappings":"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"}
@@ -28,6 +28,7 @@ const ToggleButton = forwardRef(
28
28
  onChange,
29
29
  readOnly: readOnlyProp,
30
30
  selected: selectedProp,
31
+ defaultSelected,
31
32
  sentiment: sentimenentProp,
32
33
  ...rest
33
34
  } = props;
@@ -48,7 +49,7 @@ const ToggleButton = forwardRef(
48
49
  const readOnly = (toggleButtonGroup == null ? void 0 : toggleButtonGroup.readOnly) || readOnlyProp;
49
50
  const [selected, setSelected] = useControlled({
50
51
  controlled: toggleButtonGroupSelected,
51
- default: Boolean(selectedProp),
52
+ default: Boolean(defaultSelected),
52
53
  name: "ToggleButton",
53
54
  state: "selected"
54
55
  });
@@ -1 +1 @@
1
- {"version":3,"file":"ToggleButton.js","sources":["../src/toggle-button/ToggleButton.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n type FocusEvent,\n type MouseEvent,\n forwardRef,\n useRef,\n} from \"react\";\nimport type { ButtonAppearance, ButtonSentiment } from \"../button\";\nimport { useToggleButtonGroup } from \"../toggle-button-group\";\nimport { makePrefixer, useControlled, useForkRef } from \"../utils\";\n\nimport toggleButtonCss from \"./ToggleButton.css\";\n\nexport interface ToggleButtonProps extends ComponentPropsWithoutRef<\"button\"> {\n /**\n * The appearance of the toggle button.\n * @default solid\n */\n appearance?: Extract<ButtonAppearance, \"bordered\" | \"solid\">;\n /**\n * Callback fired when the toggle button's selection state is changed.\n */\n onChange?: (event: MouseEvent<HTMLButtonElement>) => void;\n /**\n * If `true`, the toggle button will be read-only.\n */\n readOnly?: boolean;\n /**\n * The sentiment of the toggle button.\n * @default neutral\n */\n sentiment?: ButtonSentiment;\n /**\n * Whether the toggle button is a selected state.\n */\n selected?: boolean;\n /**\n * Value of the toggle button, to be used when in a controlled state.\n */\n value: string | ReadonlyArray<string> | number | undefined;\n}\n\nconst withBaseName = makePrefixer(\"saltToggleButton\");\n\nexport const ToggleButton = forwardRef<HTMLButtonElement, ToggleButtonProps>(\n function ToggleButton(props, ref) {\n const {\n appearance: appearanceProp,\n children,\n className,\n disabled: disabledProp,\n value,\n onClick,\n onFocus,\n onChange,\n readOnly: readOnlyProp,\n selected: selectedProp,\n sentiment: sentimenentProp,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-toggle-button\",\n css: toggleButtonCss,\n window: targetWindow,\n });\n\n const buttonRef = useRef<HTMLButtonElement>(null);\n const handleRef = useForkRef(ref, buttonRef);\n\n const toggleButtonGroup = useToggleButtonGroup();\n\n const toggleButtonGroupSelected = toggleButtonGroup\n ? toggleButtonGroup.isSelected(value)\n : selectedProp;\n const focusable = toggleButtonGroup\n ? toggleButtonGroup?.isFocused(value)\n : true;\n\n const sentiment =\n sentimenentProp || toggleButtonGroup?.sentiment || \"neutral\";\n const appearance =\n appearanceProp || toggleButtonGroup?.appearance || \"solid\";\n const disabled = toggleButtonGroup?.disabled || disabledProp;\n const readOnly = toggleButtonGroup?.readOnly || readOnlyProp;\n\n const [selected, setSelected] = useControlled({\n controlled: toggleButtonGroupSelected,\n default: Boolean(selectedProp),\n name: \"ToggleButton\",\n state: \"selected\",\n });\n\n const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n if (disabled || readOnly) {\n return;\n }\n toggleButtonGroup?.select(event);\n setSelected(!selected);\n onChange?.(event);\n onClick?.(event);\n };\n\n const handleFocus = (event: FocusEvent<HTMLButtonElement>) => {\n toggleButtonGroup?.focus(value);\n onFocus?.(event);\n };\n\n const toggleButtonProps: ToggleButtonProps = {\n \"aria-readonly\": readOnlyProp,\n \"aria-pressed\": !toggleButtonGroup ? selected : undefined,\n \"aria-checked\": toggleButtonGroup ? selected : undefined,\n \"aria-disabled\": disabled,\n role: toggleButtonGroup ? \"radio\" : undefined,\n className: clsx(\n withBaseName(),\n withBaseName(sentiment),\n withBaseName(appearance),\n readOnly && withBaseName(\"readOnly\"),\n className,\n ),\n onClick: handleClick,\n onFocus: handleFocus,\n tabIndex: focusable ? 0 : -1,\n value: value,\n type: \"button\",\n disabled: disabled,\n readOnly: readOnlyProp,\n ...rest,\n };\n\n return (\n <button ref={handleRef} {...toggleButtonProps}>\n {children}\n </button>\n );\n },\n);\n"],"names":["ToggleButton","toggleButtonCss"],"mappings":"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"}
1
+ {"version":3,"file":"ToggleButton.js","sources":["../src/toggle-button/ToggleButton.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n type FocusEvent,\n type MouseEvent,\n forwardRef,\n useRef,\n} from \"react\";\nimport type { ButtonAppearance, ButtonSentiment } from \"../button\";\nimport { useToggleButtonGroup } from \"../toggle-button-group\";\nimport { makePrefixer, useControlled, useForkRef } from \"../utils\";\n\nimport toggleButtonCss from \"./ToggleButton.css\";\n\nexport interface ToggleButtonProps extends ComponentPropsWithoutRef<\"button\"> {\n /**\n * The appearance of the toggle button when `selected` is true.\n * @default solid\n */\n appearance?: Extract<ButtonAppearance, \"bordered\" | \"solid\">;\n /**\n * Callback fired when the toggle button's selection state is changed.\n */\n onChange?: (event: MouseEvent<HTMLButtonElement>) => void;\n /**\n * If `true`, the toggle button will be read-only.\n */\n readOnly?: boolean;\n /**\n * The sentiment of the toggle button.\n * @default neutral\n */\n sentiment?: ButtonSentiment;\n /**\n * Whether the toggle button is in a selected state.\n */\n selected?: boolean;\n /**\n * Whether the toggle button is selected by default.\n * This will be disregarded if `selected` is already set.\n */\n defaultSelected?: boolean;\n /**\n * Value of the toggle button, to be used when in a controlled state.\n */\n value: string | ReadonlyArray<string> | number | undefined;\n}\n\nconst withBaseName = makePrefixer(\"saltToggleButton\");\n\nexport const ToggleButton = forwardRef<HTMLButtonElement, ToggleButtonProps>(\n function ToggleButton(props, ref) {\n const {\n appearance: appearanceProp,\n children,\n className,\n disabled: disabledProp,\n value,\n onClick,\n onFocus,\n onChange,\n readOnly: readOnlyProp,\n selected: selectedProp,\n defaultSelected,\n sentiment: sentimenentProp,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-toggle-button\",\n css: toggleButtonCss,\n window: targetWindow,\n });\n\n const buttonRef = useRef<HTMLButtonElement>(null);\n const handleRef = useForkRef(ref, buttonRef);\n\n const toggleButtonGroup = useToggleButtonGroup();\n\n const toggleButtonGroupSelected = toggleButtonGroup\n ? toggleButtonGroup.isSelected(value)\n : selectedProp;\n const focusable = toggleButtonGroup\n ? toggleButtonGroup?.isFocused(value)\n : true;\n\n const sentiment =\n sentimenentProp || toggleButtonGroup?.sentiment || \"neutral\";\n const appearance =\n appearanceProp || toggleButtonGroup?.appearance || \"solid\";\n const disabled = toggleButtonGroup?.disabled || disabledProp;\n const readOnly = toggleButtonGroup?.readOnly || readOnlyProp;\n\n const [selected, setSelected] = useControlled({\n controlled: toggleButtonGroupSelected,\n default: Boolean(defaultSelected),\n name: \"ToggleButton\",\n state: \"selected\",\n });\n\n const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n if (disabled || readOnly) {\n return;\n }\n toggleButtonGroup?.select(event);\n setSelected(!selected);\n onChange?.(event);\n onClick?.(event);\n };\n\n const handleFocus = (event: FocusEvent<HTMLButtonElement>) => {\n toggleButtonGroup?.focus(value);\n onFocus?.(event);\n };\n\n const toggleButtonProps: ToggleButtonProps = {\n \"aria-readonly\": readOnlyProp,\n \"aria-pressed\": !toggleButtonGroup ? selected : undefined,\n \"aria-checked\": toggleButtonGroup ? selected : undefined,\n \"aria-disabled\": disabled,\n role: toggleButtonGroup ? \"radio\" : undefined,\n className: clsx(\n withBaseName(),\n withBaseName(sentiment),\n withBaseName(appearance),\n readOnly && withBaseName(\"readOnly\"),\n className,\n ),\n onClick: handleClick,\n onFocus: handleFocus,\n tabIndex: focusable ? 0 : -1,\n value: value,\n type: \"button\",\n disabled: disabled,\n readOnly: readOnlyProp,\n ...rest,\n };\n\n return (\n <button ref={handleRef} {...toggleButtonProps}>\n {children}\n </button>\n );\n },\n);\n"],"names":["ToggleButton","toggleButtonCss"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"ToggleButtonGroup.js","sources":["../src/toggle-button-group/ToggleButtonGroup.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n type KeyboardEvent,\n type SyntheticEvent,\n forwardRef,\n useCallback,\n useMemo,\n useRef,\n useState,\n} from \"react\";\n\nimport type { ButtonAppearance, ButtonSentiment } from \"../button\";\nimport { makePrefixer, useControlled, useForkRef } from \"../utils\";\nimport toggleButtonGroupCss from \"./ToggleButtonGroup.css\";\nimport {\n ToggleButtonGroupContext,\n type Value,\n} from \"./ToggleButtonGroupContext\";\n\nexport interface ToggleButtonGroupProps\n extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n /**\n * The appearance of all the toggle buttons within the group.\n * @default solid\n */\n appearance?: Extract<ButtonAppearance, \"bordered\" | \"solid\">;\n /**\n * The default value. Use when the component is not controlled.\n */\n defaultValue?: Value;\n /**\n * If `true`, the Toggle Button Group will be disabled.\n */\n disabled?: boolean;\n /**\n * Value of the toggle button group, to be used when the component is controlled.\n */\n value?: Value;\n /**\n * Callback fired when the selection changes.\n */\n onChange?: (event: SyntheticEvent<HTMLButtonElement>) => void;\n /**\n * If `true`, the toggle button group will be read-only.\n */\n readOnly?: boolean;\n /**\n * The orientation of the toggle buttons.\n */\n orientation?: \"horizontal\" | \"vertical\";\n /**\n * The visual sentimenent of all the toggle buttons within the group.\n * @default neutral\n */\n sentiment?: ButtonSentiment;\n}\n\nconst withBaseName = makePrefixer(\"saltToggleButtonGroup\");\n\nexport const ToggleButtonGroup = forwardRef<\n HTMLDivElement,\n ToggleButtonGroupProps\n>(function ToggleButtonGroup(props, ref) {\n const {\n appearance,\n children,\n className,\n value: valueProp,\n defaultValue,\n disabled,\n onChange,\n onKeyDown,\n orientation = \"horizontal\",\n readOnly,\n sentiment,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-toggle-button-group\",\n css: toggleButtonGroupCss,\n window: targetWindow,\n });\n\n const groupRef = useRef<HTMLDivElement>(null);\n const handleRef = useForkRef(ref, groupRef);\n\n const [value, setValue] = useControlled({\n default: defaultValue,\n controlled: valueProp,\n name: \"ToggleButtonGroup\",\n state: \"value\",\n });\n const [focused, setFocused] = useState<Value>(value);\n\n const select = useCallback(\n (event: SyntheticEvent<HTMLButtonElement>) => {\n const newValue = event.currentTarget.value;\n setValue(newValue);\n if (value !== newValue) {\n onChange?.(event);\n }\n },\n [onChange, value],\n );\n\n const isSelected = useCallback(\n (id: Value) => {\n return value === id;\n },\n [value],\n );\n\n const focus = useCallback((id: Value) => {\n setFocused(id);\n }, []);\n\n const isFocused = useCallback(\n (id: Value) => {\n return focused === id || !focused;\n },\n [focused],\n );\n\n const contextValue = useMemo(\n () => ({\n appearance,\n disabled,\n focus,\n isFocused,\n isSelected,\n orientation,\n readOnly,\n select,\n sentiment,\n }),\n [\n appearance,\n disabled,\n focus,\n isFocused,\n isSelected,\n orientation,\n readOnly,\n select,\n sentiment,\n ],\n );\n\n const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n const elements: HTMLElement[] = Array.from(\n groupRef.current?.querySelectorAll(\"button:not([disabled])\") ?? [],\n );\n const currentIndex = elements.findIndex(\n (element) => element === document.activeElement,\n );\n switch (event.key) {\n case \"ArrowDown\":\n case \"ArrowRight\":\n elements[(currentIndex + 1) % elements.length]?.focus();\n break;\n case \"ArrowUp\":\n case \"ArrowLeft\":\n elements[\n (currentIndex - 1 + elements.length) % elements.length\n ]?.focus();\n break;\n }\n\n onKeyDown?.(event);\n };\n\n return (\n <ToggleButtonGroupContext.Provider value={contextValue}>\n <div\n aria-disabled={disabled}\n aria-readonly={readOnly}\n className={clsx(\n withBaseName(),\n withBaseName(orientation),\n disabled && withBaseName(\"disabled\"),\n readOnly && withBaseName(\"readOnly\"),\n className,\n )}\n role=\"radiogroup\"\n ref={handleRef}\n onKeyDown={handleKeyDown}\n {...rest}\n >\n {children}\n </div>\n </ToggleButtonGroupContext.Provider>\n );\n});\n"],"names":["ToggleButtonGroup","toggleButtonGroupCss"],"mappings":"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"}
1
+ {"version":3,"file":"ToggleButtonGroup.js","sources":["../src/toggle-button-group/ToggleButtonGroup.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n type KeyboardEvent,\n type SyntheticEvent,\n forwardRef,\n useCallback,\n useMemo,\n useRef,\n useState,\n} from \"react\";\n\nimport type { ButtonAppearance, ButtonSentiment } from \"../button\";\nimport { makePrefixer, useControlled, useForkRef } from \"../utils\";\nimport toggleButtonGroupCss from \"./ToggleButtonGroup.css\";\nimport {\n ToggleButtonGroupContext,\n type Value,\n} from \"./ToggleButtonGroupContext\";\n\nexport interface ToggleButtonGroupProps\n extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n /**\n * The appearance of all the toggle buttons within the group.\n * @default solid\n */\n appearance?: Extract<ButtonAppearance, \"bordered\" | \"solid\">;\n /**\n * The default value. Use when the component is not controlled.\n */\n defaultValue?: Value;\n /**\n * If `true`, the Toggle Button Group will be disabled.\n */\n disabled?: boolean;\n /**\n * Value of the toggle button group, to be used when the component is controlled.\n */\n value?: Value;\n /**\n * Callback fired when the selection changes.\n */\n onChange?: (event: SyntheticEvent<HTMLButtonElement>) => void;\n /**\n * If `true`, the toggle button group will be read-only.\n */\n readOnly?: boolean;\n /**\n * The orientation of the toggle buttons.\n */\n orientation?: \"horizontal\" | \"vertical\";\n /**\n * The visual sentimenent of all the toggle buttons within the group.\n * @default neutral\n */\n sentiment?: ButtonSentiment;\n}\n\nconst withBaseName = makePrefixer(\"saltToggleButtonGroup\");\n\nexport const ToggleButtonGroup = forwardRef<\n HTMLDivElement,\n ToggleButtonGroupProps\n>(function ToggleButtonGroup(props, ref) {\n const {\n appearance,\n children,\n className,\n value: valueProp,\n defaultValue,\n disabled,\n onChange,\n onKeyDown,\n orientation = \"horizontal\",\n readOnly,\n sentiment,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-toggle-button-group\",\n css: toggleButtonGroupCss,\n window: targetWindow,\n });\n\n const groupRef = useRef<HTMLDivElement>(null);\n const handleRef = useForkRef(ref, groupRef);\n\n const [value, setValue] = useControlled({\n default: defaultValue,\n controlled: valueProp,\n name: \"ToggleButtonGroup\",\n state: \"value\",\n });\n const [focused, setFocused] = useState<Value>(value);\n\n const select = useCallback(\n (event: SyntheticEvent<HTMLButtonElement>) => {\n const newValue = event.currentTarget.value;\n setValue(newValue);\n if (value !== newValue) {\n onChange?.(event);\n }\n },\n [onChange, value],\n );\n\n const isSelected = useCallback(\n (id: Value) => {\n return value === id;\n },\n [value],\n );\n\n const focus = useCallback((id: Value) => {\n setFocused(id);\n }, []);\n\n const isFocused = useCallback(\n (id: Value) => {\n return focused === id || !focused;\n },\n [focused],\n );\n\n const contextValue = useMemo(\n () => ({\n appearance,\n disabled,\n focus,\n isFocused,\n isSelected,\n orientation,\n readOnly,\n select,\n sentiment,\n }),\n [\n appearance,\n disabled,\n focus,\n isFocused,\n isSelected,\n orientation,\n readOnly,\n select,\n sentiment,\n ],\n );\n\n const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n const elements: HTMLElement[] = Array.from(\n groupRef.current?.querySelectorAll(\"button:not([disabled])\") ?? [],\n );\n const currentIndex = elements.findIndex(\n (element) => element === document.activeElement,\n );\n switch (event.key) {\n case \"ArrowDown\":\n case \"ArrowRight\":\n elements[(currentIndex + 1) % elements.length]?.focus();\n break;\n case \"ArrowUp\":\n case \"ArrowLeft\":\n elements[\n (currentIndex - 1 + elements.length) % elements.length\n ]?.focus();\n break;\n }\n\n onKeyDown?.(event);\n };\n\n return (\n <ToggleButtonGroupContext.Provider value={contextValue}>\n <div\n aria-disabled={disabled}\n aria-readonly={readOnly}\n className={clsx(\n withBaseName(),\n withBaseName(orientation),\n disabled && withBaseName(\"disabled\"),\n readOnly && withBaseName(\"readOnly\"),\n className,\n )}\n role=\"radiogroup\"\n ref={handleRef}\n onKeyDown={handleKeyDown}\n {...rest}\n >\n {children}\n </div>\n </ToggleButtonGroupContext.Provider>\n );\n});\n"],"names":["ToggleButtonGroup","toggleButtonGroupCss"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"ToggleButtonGroupContext.js","sources":["../src/toggle-button-group/ToggleButtonGroupContext.ts"],"sourcesContent":["import { type SyntheticEvent, useContext } from \"react\";\nimport type { ButtonAppearance, ButtonSentiment } from \"../button\";\nimport { createContext } from \"../utils\";\n\nexport type Value = string | readonly string[] | number | undefined;\n\nexport interface ToggleButtonGroupContextValue {\n appearance?: Extract<ButtonAppearance, \"bordered\" | \"solid\">;\n disabled?: boolean;\n focus: (id: Value) => void;\n isFocused: (id: Value) => boolean;\n isSelected: (id: Value) => boolean;\n orientation: \"horizontal\" | \"vertical\";\n readOnly?: boolean;\n select: (event: SyntheticEvent<HTMLButtonElement>) => void;\n sentiment?: ButtonSentiment;\n}\n\nexport const ToggleButtonGroupContext = createContext<\n ToggleButtonGroupContextValue | undefined\n>(\"ToggleButtonGroupContext\", undefined);\n\nexport function useToggleButtonGroup() {\n return useContext(ToggleButtonGroupContext);\n}\n"],"names":[],"mappings":";;;;;;;;;AAkBa,MAAA,wBAAA,GAA2B,aAEtC,CAAA,0BAAA,EAA4B,KAAS,CAAA;AAEhC,SAAS,oBAAuB,GAAA;AACrC,EAAA,OAAO,WAAW,wBAAwB,CAAA;AAC5C;;;;"}
1
+ {"version":3,"file":"ToggleButtonGroupContext.js","sources":["../src/toggle-button-group/ToggleButtonGroupContext.ts"],"sourcesContent":["import { type SyntheticEvent, useContext } from \"react\";\nimport type { ButtonAppearance, ButtonSentiment } from \"../button\";\nimport { createContext } from \"../utils\";\n\nexport type Value = string | readonly string[] | number | undefined;\n\nexport interface ToggleButtonGroupContextValue {\n appearance?: Extract<ButtonAppearance, \"bordered\" | \"solid\">;\n disabled?: boolean;\n focus: (id: Value) => void;\n isFocused: (id: Value) => boolean;\n isSelected: (id: Value) => boolean;\n orientation: \"horizontal\" | \"vertical\";\n readOnly?: boolean;\n select: (event: SyntheticEvent<HTMLButtonElement>) => void;\n sentiment?: ButtonSentiment;\n}\n\nexport const ToggleButtonGroupContext = createContext<\n ToggleButtonGroupContextValue | undefined\n>(\"ToggleButtonGroupContext\", undefined);\n\nexport function useToggleButtonGroup() {\n return useContext(ToggleButtonGroupContext);\n}\n"],"names":[],"mappings":";;;;;;;;;AAkBa,MAAA,wBAAA,GAA2B,aAEtC,CAAA,0BAAA,EAA4B,MAAS;AAEhC,SAAS,oBAAuB,GAAA;AACrC,EAAA,OAAO,WAAW,wBAAwB,CAAA;AAC5C;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"Tooltip.js","sources":["../src/tooltip/Tooltip.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n type HTMLAttributes,\n type ReactNode,\n cloneElement,\n forwardRef,\n isValidElement,\n} from \"react\";\n\nimport {\n VALIDATION_NAMED_STATUS,\n type ValidationStatus,\n} from \"../status-indicator\";\nimport {\n type UseFloatingUIProps,\n getRefFromChildren,\n makePrefixer,\n mergeProps,\n useFloatingComponent,\n useForkRef,\n} from \"../utils\";\n\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { TooltipBase } from \"./TooltipBase\";\nimport { type UseTooltipProps, useTooltip } from \"./useTooltip\";\n\nconst withBaseName = makePrefixer(\"saltTooltip\");\n\nexport interface TooltipProps\n extends Pick<UseFloatingUIProps, \"open\" | \"onOpenChange\" | \"placement\">,\n Omit<HTMLAttributes<HTMLDivElement>, \"content\"> {\n /**\n * The children will be the Tooltip's trigger.\n */\n children: ReactNode;\n /**\n * Whether to hide the Tooltip arrow. Defaults to `false`.\n */\n hideArrow?: boolean;\n /**\n * Whether to hide the status icon within the Tooltip. Defaults to `false`.\n * If no status is provided, icon will also be hidden.\n */\n hideIcon?: boolean;\n /**\n * Content displayed inside the Tooltip. Can be a string or a React component.\n */\n content: ReactNode;\n /**\n * Optional string to determine the status of the Tooltip.\n */\n status?: ValidationStatus;\n /**\n * Delay in milliseconds before the Tooltip is shown.\n */\n enterDelay?: number;\n /**\n * Delay in milliseconds before the Tooltip is hidden. Defaults to 300ms.\n */\n leaveDelay?: number;\n /**\n * Option to not display the Tooltip. Can be used in conditional situations like text truncation. Defaults to 0.\n */\n disabled?: boolean;\n /**\n * Option to remove the hover listener.\n */\n disableHoverListener?: boolean;\n /**\n * Option to remove the focus listener.\n */\n disableFocusListener?: boolean;\n}\n\nexport const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(\n function Tooltip(props, ref) {\n const {\n children,\n className,\n disabled: disabledProp = false,\n hideArrow = false,\n hideIcon = false,\n open: openProp,\n content,\n status: statusProp,\n placement = \"right\",\n enterDelay = 300,\n leaveDelay = 0,\n ...rest\n } = props;\n\n const {\n disabled: formFieldDisabled,\n validationStatus: formFieldValidationStatus,\n } = useFormFieldProps();\n\n const disabled = disabledProp || formFieldDisabled;\n const status =\n statusProp ??\n (formFieldValidationStatus !== undefined &&\n VALIDATION_NAMED_STATUS.includes(formFieldValidationStatus)\n ? formFieldValidationStatus\n : undefined);\n const { Component: FloatingComponent } = useFloatingComponent();\n\n const hookProps: UseTooltipProps = {\n open: openProp,\n disabled,\n placement,\n enterDelay,\n leaveDelay,\n ...rest,\n };\n\n const {\n arrowProps,\n open,\n floating,\n reference,\n getTriggerProps,\n getTooltipProps,\n getTooltipPosition,\n } = useTooltip(hookProps);\n\n const triggerRef = useForkRef(getRefFromChildren(children), reference);\n\n const floatingRef = useForkRef<HTMLDivElement>(floating, ref);\n const hasContent = content !== undefined && content !== \"\";\n\n return (\n <>\n {isValidElement(children) &&\n cloneElement(children, {\n ...mergeProps(getTriggerProps(), children.props),\n ref: triggerRef,\n })}\n\n <FloatingComponent\n className={clsx(\n withBaseName(),\n { [withBaseName(status ?? \"\")]: status },\n className,\n )}\n open={open && !disabled && hasContent}\n {...getTooltipProps()}\n ref={floatingRef}\n {...getTooltipPosition()}\n >\n <TooltipBase\n hideIcon={hideIcon}\n status={status}\n content={content}\n hideArrow={hideArrow}\n arrowProps={arrowProps}\n />\n </FloatingComponent>\n </>\n );\n },\n);\n"],"names":["Tooltip"],"mappings":";;;;;;;;;;;;;;;;;;AA0BA,MAAM,YAAA,GAAe,aAAa,aAAa,CAAA;AAgDxC,MAAM,OAAU,GAAA,UAAA;AAAA,EACrB,SAASA,QAAQ,CAAA,KAAA,EAAO,GAAK,EAAA;AAC3B,IAAM,MAAA;AAAA,MACJ,QAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAU,YAAe,GAAA,KAAA;AAAA,MACzB,SAAY,GAAA,KAAA;AAAA,MACZ,QAAW,GAAA,KAAA;AAAA,MACX,IAAM,EAAA,QAAA;AAAA,MACN,OAAA;AAAA,MACA,MAAQ,EAAA,UAAA;AAAA,MACR,SAAY,GAAA,OAAA;AAAA,MACZ,UAAa,GAAA,GAAA;AAAA,MACb,UAAa,GAAA,CAAA;AAAA,MACb,GAAG;AAAA,KACD,GAAA,KAAA;AAEJ,IAAM,MAAA;AAAA,MACJ,QAAU,EAAA,iBAAA;AAAA,MACV,gBAAkB,EAAA;AAAA,QAChB,iBAAkB,EAAA;AAEtB,IAAA,MAAM,WAAW,YAAgB,IAAA,iBAAA;AACjC,IAAM,MAAA,MAAA,GACJ,eACC,yBAA8B,KAAA,KAAA,CAAA,IAC/B,wBAAwB,QAAS,CAAA,yBAAyB,IACtD,yBACA,GAAA,KAAA,CAAA,CAAA;AACN,IAAA,MAAM,EAAE,SAAA,EAAW,iBAAkB,EAAA,GAAI,oBAAqB,EAAA;AAE9D,IAAA,MAAM,SAA6B,GAAA;AAAA,MACjC,IAAM,EAAA,QAAA;AAAA,MACN,QAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAA;AAAA,MACA,UAAA;AAAA,MACA,GAAG;AAAA,KACL;AAEA,IAAM,MAAA;AAAA,MACJ,UAAA;AAAA,MACA,IAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,eAAA;AAAA,MACA,eAAA;AAAA,MACA;AAAA,KACF,GAAI,WAAW,SAAS,CAAA;AAExB,IAAA,MAAM,UAAa,GAAA,UAAA,CAAW,kBAAmB,CAAA,QAAQ,GAAG,SAAS,CAAA;AAErE,IAAM,MAAA,WAAA,GAAc,UAA2B,CAAA,QAAA,EAAU,GAAG,CAAA;AAC5D,IAAM,MAAA,UAAA,GAAa,OAAY,KAAA,KAAA,CAAA,IAAa,OAAY,KAAA,EAAA;AAExD,IAAA,uBAEK,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,MAAe,cAAA,CAAA,QAAQ,CACtB,IAAA,YAAA,CAAa,QAAU,EAAA;AAAA,QACrB,GAAG,UAAA,CAAW,eAAgB,EAAA,EAAG,SAAS,KAAK,CAAA;AAAA,QAC/C,GAAK,EAAA;AAAA,OACN,CAAA;AAAA,sBAEH,GAAA;AAAA,QAAC,iBAAA;AAAA,QAAA;AAAA,UACC,SAAW,EAAA,IAAA;AAAA,YACT,YAAa,EAAA;AAAA,YACb,EAAE,CAAC,YAAA,CAAa,UAAU,EAAE,CAAC,GAAG,MAAO,EAAA;AAAA,YACvC;AAAA,WACF;AAAA,UACA,IAAA,EAAM,IAAQ,IAAA,CAAC,QAAY,IAAA,UAAA;AAAA,UAC1B,GAAG,eAAgB,EAAA;AAAA,UACpB,GAAK,EAAA,WAAA;AAAA,UACJ,GAAG,kBAAmB,EAAA;AAAA,UAEvB,QAAA,kBAAA,GAAA;AAAA,YAAC,WAAA;AAAA,YAAA;AAAA,cACC,QAAA;AAAA,cACA,MAAA;AAAA,cACA,OAAA;AAAA,cACA,SAAA;AAAA,cACA;AAAA;AAAA;AACF;AAAA;AACF,KACF,EAAA,CAAA;AAAA;AAGN;;;;"}
1
+ {"version":3,"file":"Tooltip.js","sources":["../src/tooltip/Tooltip.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n type HTMLAttributes,\n type ReactNode,\n cloneElement,\n forwardRef,\n isValidElement,\n} from \"react\";\n\nimport {\n VALIDATION_NAMED_STATUS,\n type ValidationStatus,\n} from \"../status-indicator\";\nimport {\n type UseFloatingUIProps,\n getRefFromChildren,\n makePrefixer,\n mergeProps,\n useFloatingComponent,\n useForkRef,\n} from \"../utils\";\n\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { TooltipBase } from \"./TooltipBase\";\nimport { type UseTooltipProps, useTooltip } from \"./useTooltip\";\n\nconst withBaseName = makePrefixer(\"saltTooltip\");\n\nexport interface TooltipProps\n extends Pick<UseFloatingUIProps, \"open\" | \"onOpenChange\" | \"placement\">,\n Omit<HTMLAttributes<HTMLDivElement>, \"content\"> {\n /**\n * The children will be the Tooltip's trigger.\n */\n children: ReactNode;\n /**\n * Whether to hide the Tooltip arrow. Defaults to `false`.\n */\n hideArrow?: boolean;\n /**\n * Whether to hide the status icon within the Tooltip. Defaults to `false`.\n * If no status is provided, icon will also be hidden.\n */\n hideIcon?: boolean;\n /**\n * Content displayed inside the Tooltip. Can be a string or a React component.\n */\n content: ReactNode;\n /**\n * Optional string to determine the status of the Tooltip.\n */\n status?: ValidationStatus;\n /**\n * Delay in milliseconds before the Tooltip is shown.\n */\n enterDelay?: number;\n /**\n * Delay in milliseconds before the Tooltip is hidden. Defaults to 300ms.\n */\n leaveDelay?: number;\n /**\n * Option to not display the Tooltip. Can be used in conditional situations like text truncation. Defaults to 0.\n */\n disabled?: boolean;\n /**\n * Option to remove the hover listener.\n */\n disableHoverListener?: boolean;\n /**\n * Option to remove the focus listener.\n */\n disableFocusListener?: boolean;\n}\n\nexport const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(\n function Tooltip(props, ref) {\n const {\n children,\n className,\n disabled: disabledProp = false,\n hideArrow = false,\n hideIcon = false,\n open: openProp,\n content,\n status: statusProp,\n placement = \"right\",\n enterDelay = 300,\n leaveDelay = 0,\n ...rest\n } = props;\n\n const {\n disabled: formFieldDisabled,\n validationStatus: formFieldValidationStatus,\n } = useFormFieldProps();\n\n const disabled = disabledProp || formFieldDisabled;\n const status =\n statusProp ??\n (formFieldValidationStatus !== undefined &&\n VALIDATION_NAMED_STATUS.includes(formFieldValidationStatus)\n ? formFieldValidationStatus\n : undefined);\n const { Component: FloatingComponent } = useFloatingComponent();\n\n const hookProps: UseTooltipProps = {\n open: openProp,\n disabled,\n placement,\n enterDelay,\n leaveDelay,\n ...rest,\n };\n\n const {\n arrowProps,\n open,\n floating,\n reference,\n getTriggerProps,\n getTooltipProps,\n getTooltipPosition,\n } = useTooltip(hookProps);\n\n const triggerRef = useForkRef(getRefFromChildren(children), reference);\n\n const floatingRef = useForkRef<HTMLDivElement>(floating, ref);\n const hasContent = content !== undefined && content !== \"\";\n\n return (\n <>\n {isValidElement(children) &&\n cloneElement(children, {\n ...mergeProps(getTriggerProps(), children.props),\n ref: triggerRef,\n })}\n\n <FloatingComponent\n className={clsx(\n withBaseName(),\n { [withBaseName(status ?? \"\")]: status },\n className,\n )}\n open={open && !disabled && hasContent}\n {...getTooltipProps()}\n ref={floatingRef}\n {...getTooltipPosition()}\n >\n <TooltipBase\n hideIcon={hideIcon}\n status={status}\n content={content}\n hideArrow={hideArrow}\n arrowProps={arrowProps}\n />\n </FloatingComponent>\n </>\n );\n },\n);\n"],"names":["Tooltip"],"mappings":";;;;;;;;;;;;;;;;;;AA0BA,MAAM,YAAA,GAAe,aAAa,aAAa,CAAA;AAgDxC,MAAM,OAAU,GAAA,UAAA;AAAA,EACrB,SAASA,QAAQ,CAAA,KAAA,EAAO,GAAK,EAAA;AAC3B,IAAM,MAAA;AAAA,MACJ,QAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAU,YAAe,GAAA,KAAA;AAAA,MACzB,SAAY,GAAA,KAAA;AAAA,MACZ,QAAW,GAAA,KAAA;AAAA,MACX,IAAM,EAAA,QAAA;AAAA,MACN,OAAA;AAAA,MACA,MAAQ,EAAA,UAAA;AAAA,MACR,SAAY,GAAA,OAAA;AAAA,MACZ,UAAa,GAAA,GAAA;AAAA,MACb,UAAa,GAAA,CAAA;AAAA,MACb,GAAG;AAAA,KACD,GAAA,KAAA;AAEJ,IAAM,MAAA;AAAA,MACJ,QAAU,EAAA,iBAAA;AAAA,MACV,gBAAkB,EAAA;AAAA,QAChB,iBAAkB,EAAA;AAEtB,IAAA,MAAM,WAAW,YAAgB,IAAA,iBAAA;AACjC,IAAM,MAAA,MAAA,GACJ,eACC,yBAA8B,KAAA,MAAA,IAC/B,wBAAwB,QAAS,CAAA,yBAAyB,IACtD,yBACA,GAAA,MAAA,CAAA;AACN,IAAA,MAAM,EAAE,SAAA,EAAW,iBAAkB,EAAA,GAAI,oBAAqB,EAAA;AAE9D,IAAA,MAAM,SAA6B,GAAA;AAAA,MACjC,IAAM,EAAA,QAAA;AAAA,MACN,QAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAA;AAAA,MACA,UAAA;AAAA,MACA,GAAG;AAAA,KACL;AAEA,IAAM,MAAA;AAAA,MACJ,UAAA;AAAA,MACA,IAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,eAAA;AAAA,MACA,eAAA;AAAA,MACA;AAAA,KACF,GAAI,WAAW,SAAS,CAAA;AAExB,IAAA,MAAM,UAAa,GAAA,UAAA,CAAW,kBAAmB,CAAA,QAAQ,GAAG,SAAS,CAAA;AAErE,IAAM,MAAA,WAAA,GAAc,UAA2B,CAAA,QAAA,EAAU,GAAG,CAAA;AAC5D,IAAM,MAAA,UAAA,GAAa,OAAY,KAAA,MAAA,IAAa,OAAY,KAAA,EAAA;AAExD,IAAA,uBAEK,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,MAAe,cAAA,CAAA,QAAQ,CACtB,IAAA,YAAA,CAAa,QAAU,EAAA;AAAA,QACrB,GAAG,UAAA,CAAW,eAAgB,EAAA,EAAG,SAAS,KAAK,CAAA;AAAA,QAC/C,GAAK,EAAA;AAAA,OACN,CAAA;AAAA,sBAEH,GAAA;AAAA,QAAC,iBAAA;AAAA,QAAA;AAAA,UACC,SAAW,EAAA,IAAA;AAAA,YACT,YAAa,EAAA;AAAA,YACb,EAAE,CAAC,YAAA,CAAa,UAAU,EAAE,CAAC,GAAG,MAAO,EAAA;AAAA,YACvC;AAAA,WACF;AAAA,UACA,IAAA,EAAM,IAAQ,IAAA,CAAC,QAAY,IAAA,UAAA;AAAA,UAC1B,GAAG,eAAgB,EAAA;AAAA,UACpB,GAAK,EAAA,WAAA;AAAA,UACJ,GAAG,kBAAmB,EAAA;AAAA,UAEvB,QAAA,kBAAA,GAAA;AAAA,YAAC,WAAA;AAAA,YAAA;AAAA,cACC,QAAA;AAAA,cACA,MAAA;AAAA,cACA,OAAA;AAAA,cACA,SAAA;AAAA,cACA;AAAA;AAAA;AACF;AAAA;AACF,KACF,EAAA,CAAA;AAAA;AAGN;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"TooltipBase.js","sources":["../src/tooltip/TooltipBase.tsx"],"sourcesContent":["import { FloatingArrow, type FloatingArrowProps } from \"@floating-ui/react\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { StatusIndicator, type ValidationStatus } from \"../status-indicator\";\nimport { makePrefixer } from \"../utils\";\nimport type { TooltipProps } from \"./Tooltip\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport tooltipCss from \"./Tooltip.css\";\n\nconst withBaseName = makePrefixer(\"saltTooltip\");\n\ninterface TooltipBaseProps extends Omit<TooltipProps, \"children\"> {\n arrowProps: FloatingArrowProps;\n /**\n * Optional string to determine the status of the Tooltip.\n */\n status?: ValidationStatus;\n}\n\nexport const TooltipBase = (props: TooltipBaseProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-tooltip\",\n css: tooltipCss,\n window: targetWindow,\n });\n\n const { a11yProps } = useFormFieldProps();\n\n const { arrowProps, content, hideArrow, hideIcon, status } = props;\n\n return (\n <>\n <div className={withBaseName(\"container\")}>\n {!hideIcon && status && (\n <StatusIndicator\n status={status}\n size={1}\n className={withBaseName(\"icon\")}\n />\n )}\n <span\n id={a11yProps?.[\"aria-describedby\"]}\n className={withBaseName(\"content\")}\n >\n {content}\n </span>\n </div>\n {!hideArrow && (\n <FloatingArrow\n {...arrowProps}\n className={withBaseName(\"arrow\")}\n strokeWidth={1}\n fill=\"var(--salt-container-primary-background)\"\n stroke=\"var(--tooltip-status-borderColor)\"\n height={5}\n width={10}\n />\n )}\n </>\n );\n};\n"],"names":["tooltipCss"],"mappings":";;;;;;;;;;;;;;;;AAUA,MAAM,YAAA,GAAe,aAAa,aAAa,CAAA;AAUlC,MAAA,WAAA,GAAc,CAAC,KAA4B,KAAA;AACtD,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,cAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,EAAE,SAAU,EAAA,GAAI,iBAAkB,EAAA;AAExC,EAAA,MAAM,EAAE,UAAY,EAAA,OAAA,EAAS,SAAW,EAAA,QAAA,EAAU,QAAW,GAAA,KAAA;AAE7D,EAAA,uBAEI,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,YAAa,CAAA,WAAW,CACrC,EAAA,QAAA,EAAA;AAAA,MAAA,CAAC,YAAY,MACZ,oBAAA,GAAA;AAAA,QAAC,eAAA;AAAA,QAAA;AAAA,UACC,MAAA;AAAA,UACA,IAAM,EAAA,CAAA;AAAA,UACN,SAAA,EAAW,aAAa,MAAM;AAAA;AAAA,OAChC;AAAA,sBAEF,GAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,IAAI,SAAY,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,SAAA,CAAA,kBAAA,CAAA;AAAA,UAChB,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,UAEhC,QAAA,EAAA;AAAA;AAAA;AACH,KACF,EAAA,CAAA;AAAA,IACC,CAAC,SACA,oBAAA,GAAA;AAAA,MAAC,aAAA;AAAA,MAAA;AAAA,QACE,GAAG,UAAA;AAAA,QACJ,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,QAC/B,WAAa,EAAA,CAAA;AAAA,QACb,IAAK,EAAA,0CAAA;AAAA,QACL,MAAO,EAAA,mCAAA;AAAA,QACP,MAAQ,EAAA,CAAA;AAAA,QACR,KAAO,EAAA;AAAA;AAAA;AACT,GAEJ,EAAA,CAAA;AAEJ;;;;"}
1
+ {"version":3,"file":"TooltipBase.js","sources":["../src/tooltip/TooltipBase.tsx"],"sourcesContent":["import { FloatingArrow, type FloatingArrowProps } from \"@floating-ui/react\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { StatusIndicator, type ValidationStatus } from \"../status-indicator\";\nimport { makePrefixer } from \"../utils\";\nimport type { TooltipProps } from \"./Tooltip\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport tooltipCss from \"./Tooltip.css\";\n\nconst withBaseName = makePrefixer(\"saltTooltip\");\n\ninterface TooltipBaseProps extends Omit<TooltipProps, \"children\"> {\n arrowProps: FloatingArrowProps;\n /**\n * Optional string to determine the status of the Tooltip.\n */\n status?: ValidationStatus;\n}\n\nexport const TooltipBase = (props: TooltipBaseProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-tooltip\",\n css: tooltipCss,\n window: targetWindow,\n });\n\n const { a11yProps } = useFormFieldProps();\n\n const { arrowProps, content, hideArrow, hideIcon, status } = props;\n\n return (\n <>\n <div className={withBaseName(\"container\")}>\n {!hideIcon && status && (\n <StatusIndicator\n status={status}\n size={1}\n className={withBaseName(\"icon\")}\n />\n )}\n <span\n id={a11yProps?.[\"aria-describedby\"]}\n className={withBaseName(\"content\")}\n >\n {content}\n </span>\n </div>\n {!hideArrow && (\n <FloatingArrow\n {...arrowProps}\n className={withBaseName(\"arrow\")}\n strokeWidth={1}\n fill=\"var(--salt-container-primary-background)\"\n stroke=\"var(--tooltip-status-borderColor)\"\n height={5}\n width={10}\n />\n )}\n </>\n );\n};\n"],"names":["tooltipCss"],"mappings":";;;;;;;;;;;;;;;;AAUA,MAAM,YAAA,GAAe,aAAa,aAAa,CAAA;AAUlC,MAAA,WAAA,GAAc,CAAC,KAA4B,KAAA;AACtD,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,cAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,EAAE,SAAU,EAAA,GAAI,iBAAkB,EAAA;AAExC,EAAA,MAAM,EAAE,UAAY,EAAA,OAAA,EAAS,SAAW,EAAA,QAAA,EAAU,QAAW,GAAA,KAAA;AAE7D,EAAA,uBAEI,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,YAAa,CAAA,WAAW,CACrC,EAAA,QAAA,EAAA;AAAA,MAAA,CAAC,YAAY,MACZ,oBAAA,GAAA;AAAA,QAAC,eAAA;AAAA,QAAA;AAAA,UACC,MAAA;AAAA,UACA,IAAM,EAAA,CAAA;AAAA,UACN,SAAA,EAAW,aAAa,MAAM;AAAA;AAAA,OAChC;AAAA,sBAEF,GAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,IAAI,SAAY,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAA,kBAAA,CAAA;AAAA,UAChB,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,UAEhC,QAAA,EAAA;AAAA;AAAA;AACH,KACF,EAAA,CAAA;AAAA,IACC,CAAC,SACA,oBAAA,GAAA;AAAA,MAAC,aAAA;AAAA,MAAA;AAAA,QACE,GAAG,UAAA;AAAA,QACJ,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,QAC/B,WAAa,EAAA,CAAA;AAAA,QACb,IAAK,EAAA,0CAAA;AAAA,QACL,MAAO,EAAA,mCAAA;AAAA,QACP,MAAQ,EAAA,CAAA;AAAA,QACR,KAAO,EAAA;AAAA;AAAA;AACT,GAEJ,EAAA,CAAA;AAEJ;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"useAriaAnnounce.js","sources":["../src/tooltip/useAriaAnnounce.ts"],"sourcesContent":["import type { ElementProps, FloatingContext } from \"@floating-ui/react\";\nimport { type PointerEvent, useEffect, useRef } from \"react\";\nimport { useAriaAnnouncer } from \"../aria-announcer\";\nimport { useIsomorphicLayoutEffect } from \"../utils\";\n\nfunction getDocument(floating: HTMLElement | null) {\n return floating?.ownerDocument ?? document;\n}\n\n// TODO: Check whether can be anything more restrictive than `any`\n// biome-ignore lint/suspicious/noExplicitAny: see comment above\nfunction getWindow(value: any) {\n return getDocument(value).defaultView ?? window;\n}\n\nfunction isElement(value: unknown): value is HTMLElement {\n return value ? value instanceof getWindow(value).Element : false;\n}\n\nfunction getDelay(\n value: Props[\"delay\"],\n prop: \"open\" | \"close\",\n pointerType?: PointerEvent[\"pointerType\"],\n) {\n if (pointerType && pointerType !== \"mouse\") {\n return 0;\n }\n\n if (typeof value === \"number\") {\n return value;\n }\n\n return value?.[prop];\n}\n\ntype Props = {\n delay?: number | Partial<{ open: number; close: number }>;\n};\n\nexport const useAriaAnnounce = (\n context: FloatingContext,\n { delay = 0 }: Props,\n): ElementProps => {\n const { open, dataRef, refs } = context;\n\n const pointerTypeRef = useRef<PointerEvent[\"pointerType\"]>();\n const timeoutRef = useRef<number>();\n const blockMouseMoveRef = useRef(true);\n const { announce } = useAriaAnnouncer();\n\n useIsomorphicLayoutEffect(() => {\n if (!open) {\n pointerTypeRef.current = undefined;\n }\n });\n\n useEffect(() => {\n const reference = refs.reference.current;\n function announceFloating() {\n const tooltipContent = refs.floating.current?.innerText;\n\n if (tooltipContent) {\n announce(tooltipContent);\n }\n }\n\n function onMouseEnter(event: MouseEvent) {\n clearTimeout(timeoutRef.current);\n\n if (open) {\n return;\n }\n\n blockMouseMoveRef.current = false;\n dataRef.current.openEvent = event;\n\n if (delay) {\n timeoutRef.current = window.setTimeout(\n () => {\n announceFloating();\n },\n getDelay(delay, \"open\", pointerTypeRef.current),\n );\n } else {\n announceFloating();\n }\n }\n\n if (isElement(reference)) {\n reference.addEventListener(\"mouseenter\", onMouseEnter);\n return () => {\n reference.removeEventListener(\"mouseenter\", onMouseEnter);\n };\n }\n }, [dataRef, delay, open, refs.reference, refs.floating, announce]);\n\n function setPointerRef(event: PointerEvent) {\n pointerTypeRef.current = event.pointerType;\n }\n\n return {\n reference: {\n onPointerDown: setPointerRef,\n onPointerEnter: setPointerRef,\n },\n floating: {\n onMouseEnter() {\n clearTimeout(timeoutRef.current);\n },\n },\n };\n};\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"useAriaAnnounce.js","sources":["../src/tooltip/useAriaAnnounce.ts"],"sourcesContent":["import type { ElementProps, FloatingContext } from \"@floating-ui/react\";\nimport { type PointerEvent, useEffect, useRef } from \"react\";\nimport { useAriaAnnouncer } from \"../aria-announcer\";\nimport { useIsomorphicLayoutEffect } from \"../utils\";\n\nfunction getDocument(floating: HTMLElement | null) {\n return floating?.ownerDocument ?? document;\n}\n\n// TODO: Check whether can be anything more restrictive than `any`\n// biome-ignore lint/suspicious/noExplicitAny: see comment above\nfunction getWindow(value: any) {\n return getDocument(value).defaultView ?? window;\n}\n\nfunction isElement(value: unknown): value is HTMLElement {\n return value ? value instanceof getWindow(value).Element : false;\n}\n\nfunction getDelay(\n value: Props[\"delay\"],\n prop: \"open\" | \"close\",\n pointerType?: PointerEvent[\"pointerType\"],\n) {\n if (pointerType && pointerType !== \"mouse\") {\n return 0;\n }\n\n if (typeof value === \"number\") {\n return value;\n }\n\n return value?.[prop];\n}\n\ntype Props = {\n delay?: number | Partial<{ open: number; close: number }>;\n};\n\nexport const useAriaAnnounce = (\n context: FloatingContext,\n { delay = 0 }: Props,\n): ElementProps => {\n const { open, dataRef, refs } = context;\n\n const pointerTypeRef = useRef<PointerEvent[\"pointerType\"]>();\n const timeoutRef = useRef<number>();\n const blockMouseMoveRef = useRef(true);\n const { announce } = useAriaAnnouncer();\n\n useIsomorphicLayoutEffect(() => {\n if (!open) {\n pointerTypeRef.current = undefined;\n }\n });\n\n useEffect(() => {\n const reference = refs.reference.current;\n function announceFloating() {\n const tooltipContent = refs.floating.current?.innerText;\n\n if (tooltipContent) {\n announce(tooltipContent);\n }\n }\n\n function onMouseEnter(event: MouseEvent) {\n clearTimeout(timeoutRef.current);\n\n if (open) {\n return;\n }\n\n blockMouseMoveRef.current = false;\n dataRef.current.openEvent = event;\n\n if (delay) {\n timeoutRef.current = window.setTimeout(\n () => {\n announceFloating();\n },\n getDelay(delay, \"open\", pointerTypeRef.current),\n );\n } else {\n announceFloating();\n }\n }\n\n if (isElement(reference)) {\n reference.addEventListener(\"mouseenter\", onMouseEnter);\n return () => {\n reference.removeEventListener(\"mouseenter\", onMouseEnter);\n };\n }\n }, [dataRef, delay, open, refs.reference, refs.floating, announce]);\n\n function setPointerRef(event: PointerEvent) {\n pointerTypeRef.current = event.pointerType;\n }\n\n return {\n reference: {\n onPointerDown: setPointerRef,\n onPointerEnter: setPointerRef,\n },\n floating: {\n onMouseEnter() {\n clearTimeout(timeoutRef.current);\n },\n },\n };\n};\n"],"names":[],"mappings":"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"}
@@ -1,4 +1,4 @@
1
- import { offset, shift, limitShift, flip, arrow, useInteractions, useHover, safePolygon, useFocus, useRole, useDismiss } from '@floating-ui/react';
1
+ import { offset, shift, flip, arrow, limitShift, useInteractions, useHover, useFocus, useRole, useDismiss, safePolygon } from '@floating-ui/react';
2
2
  import { useRef } from 'react';
3
3
  import 'react/jsx-runtime';
4
4
  import 'clsx';
@@ -1 +1 @@
1
- {"version":3,"file":"useTooltip.js","sources":["../src/tooltip/useTooltip.ts"],"sourcesContent":["import {\n arrow,\n flip,\n limitShift,\n offset,\n safePolygon,\n shift,\n useDismiss,\n useFocus,\n useHover,\n useInteractions,\n useRole,\n} from \"@floating-ui/react\";\nimport { type HTMLProps, useRef } from \"react\";\nimport {\n type UseFloatingUIProps,\n useControlled,\n useFloatingUI,\n} from \"../utils\";\nimport { useAriaAnnounce } from \"./useAriaAnnounce\";\n\nexport interface UseTooltipProps\n extends Partial<\n Pick<UseFloatingUIProps, \"onOpenChange\" | \"open\" | \"placement\">\n > {\n /**\n * When `true`, the tooltip will be disabled.\n */\n disabled?: boolean;\n /**\n * Do not respond to focus events.\n */\n disableFocusListener?: boolean;\n /**\n * Do not respond to hover events.\n */\n disableHoverListener?: boolean;\n /**\n * The number of milliseconds to wait before showing the tooltip.\n * This prop won't impact the enter touch delay (`enterTouchDelay`).\n */\n enterDelay?: number;\n /**\n * The number of milliseconds to wait before hiding the tooltip.\n * This prop won't impact the leave touch delay (`leaveTouchDelay`).\n */\n leaveDelay?: number;\n}\n\nexport function useTooltip(props?: UseTooltipProps) {\n const {\n enterDelay,\n disabled,\n leaveDelay,\n open: openProp,\n onOpenChange,\n placement: placementProp,\n disableHoverListener,\n disableFocusListener,\n } = props ?? {};\n\n const arrowRef = useRef<SVGSVGElement | null>(null);\n\n const [open, setOpen] = useControlled({\n controlled: openProp,\n default: false,\n name: \"Tooltip\",\n state: \"open\",\n });\n const handleOpenChange = (open: boolean) => {\n setOpen(open);\n onOpenChange?.(open);\n };\n\n const { floating, reference, x, y, strategy, placement, context, elements } =\n useFloatingUI({\n open: disabled ? false : open,\n onOpenChange: handleOpenChange,\n placement: placementProp,\n middleware: [\n offset(8),\n shift({ limiter: limitShift() }),\n flip({\n fallbackAxisSideDirection: \"end\",\n fallbackStrategy: \"initialPlacement\",\n }),\n arrow({ element: arrowRef }),\n ],\n });\n\n const { getReferenceProps, getFloatingProps } = useInteractions([\n useHover(context, {\n delay: {\n open: enterDelay,\n close: leaveDelay,\n },\n enabled: !(disableHoverListener || disabled),\n handleClose: safePolygon(),\n }),\n useFocus(context, { enabled: !(disableFocusListener || disabled) }),\n useRole(context, { role: \"tooltip\" }),\n useDismiss(context, { enabled: !disabled }),\n useAriaAnnounce(context, {\n delay: {\n open: enterDelay,\n close: leaveDelay,\n },\n }),\n ]);\n\n const arrowProps = {\n ref: arrowRef,\n context,\n };\n\n const getTooltipProps = (): HTMLProps<HTMLDivElement> => {\n // tabIndex raises false positives because it is set to \"-1\".\n const { tabIndex, ...tooltipProps } = getFloatingProps({\n // @ts-expect-error - `data-*` props need extra typing when not used on a DOM element.\n \"data-placement\": placement,\n ref: floating,\n });\n\n return tooltipProps;\n };\n\n const getTriggerProps = () =>\n getReferenceProps({\n ref: reference,\n });\n\n const getTooltipPosition = () => ({\n top: y ?? 0,\n left: x ?? 0,\n position: strategy,\n width: elements.floating?.offsetWidth,\n height: elements.floating?.offsetHeight,\n });\n\n return {\n arrowProps,\n open,\n floating,\n reference,\n getTooltipProps,\n getTriggerProps,\n getTooltipPosition,\n };\n}\n"],"names":["open"],"mappings":"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"}
1
+ {"version":3,"file":"useTooltip.js","sources":["../src/tooltip/useTooltip.ts"],"sourcesContent":["import {\n arrow,\n flip,\n limitShift,\n offset,\n safePolygon,\n shift,\n useDismiss,\n useFocus,\n useHover,\n useInteractions,\n useRole,\n} from \"@floating-ui/react\";\nimport { type HTMLProps, useRef } from \"react\";\nimport {\n type UseFloatingUIProps,\n useControlled,\n useFloatingUI,\n} from \"../utils\";\nimport { useAriaAnnounce } from \"./useAriaAnnounce\";\n\nexport interface UseTooltipProps\n extends Partial<\n Pick<UseFloatingUIProps, \"onOpenChange\" | \"open\" | \"placement\">\n > {\n /**\n * When `true`, the tooltip will be disabled.\n */\n disabled?: boolean;\n /**\n * Do not respond to focus events.\n */\n disableFocusListener?: boolean;\n /**\n * Do not respond to hover events.\n */\n disableHoverListener?: boolean;\n /**\n * The number of milliseconds to wait before showing the tooltip.\n * This prop won't impact the enter touch delay (`enterTouchDelay`).\n */\n enterDelay?: number;\n /**\n * The number of milliseconds to wait before hiding the tooltip.\n * This prop won't impact the leave touch delay (`leaveTouchDelay`).\n */\n leaveDelay?: number;\n}\n\nexport function useTooltip(props?: UseTooltipProps) {\n const {\n enterDelay,\n disabled,\n leaveDelay,\n open: openProp,\n onOpenChange,\n placement: placementProp,\n disableHoverListener,\n disableFocusListener,\n } = props ?? {};\n\n const arrowRef = useRef<SVGSVGElement | null>(null);\n\n const [open, setOpen] = useControlled({\n controlled: openProp,\n default: false,\n name: \"Tooltip\",\n state: \"open\",\n });\n const handleOpenChange = (open: boolean) => {\n setOpen(open);\n onOpenChange?.(open);\n };\n\n const { floating, reference, x, y, strategy, placement, context, elements } =\n useFloatingUI({\n open: disabled ? false : open,\n onOpenChange: handleOpenChange,\n placement: placementProp,\n middleware: [\n offset(8),\n shift({ limiter: limitShift() }),\n flip({\n fallbackAxisSideDirection: \"end\",\n fallbackStrategy: \"initialPlacement\",\n }),\n arrow({ element: arrowRef }),\n ],\n });\n\n const { getReferenceProps, getFloatingProps } = useInteractions([\n useHover(context, {\n delay: {\n open: enterDelay,\n close: leaveDelay,\n },\n enabled: !(disableHoverListener || disabled),\n handleClose: safePolygon(),\n }),\n useFocus(context, { enabled: !(disableFocusListener || disabled) }),\n useRole(context, { role: \"tooltip\" }),\n useDismiss(context, { enabled: !disabled }),\n useAriaAnnounce(context, {\n delay: {\n open: enterDelay,\n close: leaveDelay,\n },\n }),\n ]);\n\n const arrowProps = {\n ref: arrowRef,\n context,\n };\n\n const getTooltipProps = (): HTMLProps<HTMLDivElement> => {\n // tabIndex raises false positives because it is set to \"-1\".\n const { tabIndex, ...tooltipProps } = getFloatingProps({\n // @ts-expect-error - `data-*` props need extra typing when not used on a DOM element.\n \"data-placement\": placement,\n ref: floating,\n });\n\n return tooltipProps;\n };\n\n const getTriggerProps = () =>\n getReferenceProps({\n ref: reference,\n });\n\n const getTooltipPosition = () => ({\n top: y ?? 0,\n left: x ?? 0,\n position: strategy,\n width: elements.floating?.offsetWidth,\n height: elements.floating?.offsetHeight,\n });\n\n return {\n arrowProps,\n open,\n floating,\n reference,\n getTooltipProps,\n getTriggerProps,\n getTooltipPosition,\n };\n}\n"],"names":["open"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"mergeProps.js","sources":["../src/utils/mergeProps.ts"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { createChainedFunction } from \"./createChainedFunction\";\n\ninterface Props {\n [key: string]: unknown;\n}\n\n/**\n * This utility merges two prop objects according to the following rules:\n *\n * - If the prop is a function and begins with \"on\" then chain the functions together\n * - If the prop key is \"className\" then merge them using `clsx`\n * - If the prop is anything else, then use the value from the second parameter unless it's undefined then use the value from the first parameter\n */\nexport function mergeProps(\n propsA: Props,\n propsB: Props,\n): Record<string, unknown> {\n const props = { ...propsA };\n\n Object.keys(propsB).forEach((key) => {\n const a: any = props[key];\n const b: any = propsB[key];\n\n if (\n typeof a === \"function\" &&\n typeof b === \"function\" &&\n key.indexOf(\"on\") === 0\n ) {\n props[key] = createChainedFunction(a, b);\n } else if (\n typeof a === \"string\" &&\n typeof b === \"string\" &&\n key === \"className\"\n ) {\n props[key] = clsx(a, b);\n } else {\n props[key] = b !== undefined ? b : a;\n }\n });\n\n return props;\n}\n"],"names":[],"mappings":";;;AAcgB,SAAA,UAAA,CACd,QACA,MACyB,EAAA;AACzB,EAAM,MAAA,KAAA,GAAQ,EAAE,GAAG,MAAO,EAAA;AAE1B,EAAA,MAAA,CAAO,IAAK,CAAA,MAAM,CAAE,CAAA,OAAA,CAAQ,CAAC,GAAQ,KAAA;AACnC,IAAM,MAAA,CAAA,GAAS,MAAM,GAAG,CAAA;AACxB,IAAM,MAAA,CAAA,GAAS,OAAO,GAAG,CAAA;AAEzB,IACE,IAAA,OAAO,CAAM,KAAA,UAAA,IACb,OAAO,CAAA,KAAM,cACb,GAAI,CAAA,OAAA,CAAQ,IAAI,CAAA,KAAM,CACtB,EAAA;AACA,MAAA,KAAA,CAAM,GAAG,CAAA,GAAI,qBAAsB,CAAA,CAAA,EAAG,CAAC,CAAA;AAAA,KACzC,MAAA,IACE,OAAO,CAAM,KAAA,QAAA,IACb,OAAO,CAAM,KAAA,QAAA,IACb,QAAQ,WACR,EAAA;AACA,MAAA,KAAA,CAAM,GAAG,CAAA,GAAI,IAAK,CAAA,CAAA,EAAG,CAAC,CAAA;AAAA,KACjB,MAAA;AACL,MAAA,KAAA,CAAM,GAAG,CAAA,GAAI,CAAM,KAAA,KAAA,CAAA,GAAY,CAAI,GAAA,CAAA;AAAA;AACrC,GACD,CAAA;AAED,EAAO,OAAA,KAAA;AACT;;;;"}
1
+ {"version":3,"file":"mergeProps.js","sources":["../src/utils/mergeProps.ts"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { createChainedFunction } from \"./createChainedFunction\";\n\ninterface Props {\n [key: string]: unknown;\n}\n\n/**\n * This utility merges two prop objects according to the following rules:\n *\n * - If the prop is a function and begins with \"on\" then chain the functions together\n * - If the prop key is \"className\" then merge them using `clsx`\n * - If the prop is anything else, then use the value from the second parameter unless it's undefined then use the value from the first parameter\n */\nexport function mergeProps(\n propsA: Props,\n propsB: Props,\n): Record<string, unknown> {\n const props = { ...propsA };\n\n Object.keys(propsB).forEach((key) => {\n const a: any = props[key];\n const b: any = propsB[key];\n\n if (\n typeof a === \"function\" &&\n typeof b === \"function\" &&\n key.indexOf(\"on\") === 0\n ) {\n props[key] = createChainedFunction(a, b);\n } else if (\n typeof a === \"string\" &&\n typeof b === \"string\" &&\n key === \"className\"\n ) {\n props[key] = clsx(a, b);\n } else {\n props[key] = b !== undefined ? b : a;\n }\n });\n\n return props;\n}\n"],"names":[],"mappings":";;;AAcgB,SAAA,UAAA,CACd,QACA,MACyB,EAAA;AACzB,EAAM,MAAA,KAAA,GAAQ,EAAE,GAAG,MAAO,EAAA;AAE1B,EAAA,MAAA,CAAO,IAAK,CAAA,MAAM,CAAE,CAAA,OAAA,CAAQ,CAAC,GAAQ,KAAA;AACnC,IAAM,MAAA,CAAA,GAAS,MAAM,GAAG,CAAA;AACxB,IAAM,MAAA,CAAA,GAAS,OAAO,GAAG,CAAA;AAEzB,IACE,IAAA,OAAO,CAAM,KAAA,UAAA,IACb,OAAO,CAAA,KAAM,cACb,GAAI,CAAA,OAAA,CAAQ,IAAI,CAAA,KAAM,CACtB,EAAA;AACA,MAAA,KAAA,CAAM,GAAG,CAAA,GAAI,qBAAsB,CAAA,CAAA,EAAG,CAAC,CAAA;AAAA,KACzC,MAAA,IACE,OAAO,CAAM,KAAA,QAAA,IACb,OAAO,CAAM,KAAA,QAAA,IACb,QAAQ,WACR,EAAA;AACA,MAAA,KAAA,CAAM,GAAG,CAAA,GAAI,IAAK,CAAA,CAAA,EAAG,CAAC,CAAA;AAAA,KACjB,MAAA;AACL,MAAA,KAAA,CAAM,GAAG,CAAA,GAAI,CAAM,KAAA,MAAA,GAAY,CAAI,GAAA,CAAA;AAAA;AACrC,GACD,CAAA;AAED,EAAO,OAAA,KAAA;AACT;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"useControlled.js","sources":["../src/utils/useControlled.ts"],"sourcesContent":["import {\n type Dispatch,\n type SetStateAction,\n isValidElement,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\n\nexport interface UseControlledProps<T> {\n /**\n * Holds the component value when it's controlled.\n */\n controlled?: T;\n /**\n * The default value when uncontrolled.\n */\n default: T;\n /**\n * The component name displayed in warnings.\n */\n name: string;\n /**\n * The name of the state variable displayed in warnings.\n */\n state?: string;\n}\n\n/**\n * Copied from MUI (v5) useControlled hook with one additional returned value\n * @see https://github.com/mui-org/material-ui/blob/0979e6a54ba47c278d1f535953c0520a86349811/packages/material-ui-utils/src/useControlled.js\n */\nexport function useControlled<S>({\n controlled,\n default: defaultProp,\n name,\n state = \"value\",\n}: UseControlledProps<S>): [S, Dispatch<SetStateAction<S>>, boolean] {\n const { current: isControlled } = useRef(controlled !== undefined);\n const [valueState, setValue] = useState<S>(defaultProp);\n const value = controlled !== undefined ? controlled : valueState;\n const { current: defaultValue } = useRef(defaultProp);\n\n useEffect(() => {\n if (process.env.NODE_ENV !== \"production\") {\n if (isControlled !== (controlled !== undefined)) {\n console.error(\n [\n `Salt: A component is changing the ${\n isControlled ? \"\" : \"un\"\n }controlled ${state} state of ${name} to be ${\n isControlled ? \"un\" : \"\"\n }controlled.`,\n \"Elements should not switch from uncontrolled to controlled (or vice versa).\",\n `Decide between using a controlled or uncontrolled ${name} element for the lifetime of the component.`,\n \"The nature of the state is determined during the first render, it's considered controlled if the value is not `undefined`.\",\n \"More info: https://reactjs.org/link/controlled-components\",\n ].join(\"\\n\"),\n );\n }\n }\n return undefined;\n }, [state, name, controlled]);\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: uses JSON.stringify to compare defaultProp\n useEffect(() => {\n if (process.env.NODE_ENV !== \"production\") {\n if (!isControlled && defaultValue !== defaultProp) {\n console.error(\n [\n `Salt: A component is changing the default ${state} state of an uncontrolled ${name} after being initialized. ` +\n `To suppress this warning opt to use a controlled ${name}.`,\n ].join(\"\\n\"),\n );\n }\n }\n return undefined;\n }, [JSON.stringify(defaultProp, ignoreReactElements)]);\n\n const setValueIfUncontrolled: Dispatch<SetStateAction<S>> = useCallback(\n (newValue) => {\n if (!isControlled) {\n setValue(newValue);\n }\n },\n [],\n );\n\n return [value, setValueIfUncontrolled, isControlled];\n}\n\n// Ignore ReactElements in JSON, they contain circular refs\nfunction ignoreReactElements<T>(key: string, value: T): T | null {\n return isValidElement(value) ? null : value;\n}\n"],"names":[],"mappings":";;AAiCO,SAAS,aAAiB,CAAA;AAAA,EAC/B,UAAA;AAAA,EACA,OAAS,EAAA,WAAA;AAAA,EACT,IAAA;AAAA,EACA,KAAQ,GAAA;AACV,CAAqE,EAAA;AACnE,EAAA,MAAM,EAAE,OAAS,EAAA,YAAA,EAAiB,GAAA,MAAA,CAAO,eAAe,KAAS,CAAA,CAAA;AACjE,EAAA,MAAM,CAAC,UAAA,EAAY,QAAQ,CAAA,GAAI,SAAY,WAAW,CAAA;AACtD,EAAM,MAAA,KAAA,GAAQ,UAAe,KAAA,KAAA,CAAA,GAAY,UAAa,GAAA,UAAA;AACtD,EAAA,MAAM,EAAE,OAAA,EAAS,YAAa,EAAA,GAAI,OAAO,WAAW,CAAA;AAEpD,EAAA,SAAA,CAAU,MAAM;AACd,IAAI,IAAA,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,MAAI,IAAA,YAAA,MAAkB,eAAe,KAAY,CAAA,CAAA,EAAA;AAC/C,QAAQ,OAAA,CAAA,KAAA;AAAA,UACN;AAAA,YACE,CAAA,kCAAA,EACE,YAAe,GAAA,EAAA,GAAK,IACtB,CAAA,WAAA,EAAc,KAAK,CAAA,UAAA,EAAa,IAAI,CAAA,OAAA,EAClC,YAAe,GAAA,IAAA,GAAO,EACxB,CAAA,WAAA,CAAA;AAAA,YACA,6EAAA;AAAA,YACA,qDAAqD,IAAI,CAAA,2CAAA,CAAA;AAAA,YACzD,4HAAA;AAAA,YACA;AAAA,WACF,CAAE,KAAK,IAAI;AAAA,SACb;AAAA;AACF;AAEF,IAAO,OAAA,KAAA,CAAA;AAAA,GACN,EAAA,CAAC,KAAO,EAAA,IAAA,EAAM,UAAU,CAAC,CAAA;AAG5B,EAAA,SAAA,CAAU,MAAM;AACd,IAAI,IAAA,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,MAAI,IAAA,CAAC,YAAgB,IAAA,YAAA,KAAiB,WAAa,EAAA;AACjD,QAAQ,OAAA,CAAA,KAAA;AAAA,UACN;AAAA,YACE,CAA6C,0CAAA,EAAA,KAAK,CAA6B,0BAAA,EAAA,IAAI,8EAC7B,IAAI,CAAA,CAAA;AAAA,WAC5D,CAAE,KAAK,IAAI;AAAA,SACb;AAAA;AACF;AAEF,IAAO,OAAA,KAAA,CAAA;AAAA,KACN,CAAC,IAAA,CAAK,UAAU,WAAa,EAAA,mBAAmB,CAAC,CAAC,CAAA;AAErD,EAAA,MAAM,sBAAsD,GAAA,WAAA;AAAA,IAC1D,CAAC,QAAa,KAAA;AACZ,MAAA,IAAI,CAAC,YAAc,EAAA;AACjB,QAAA,QAAA,CAAS,QAAQ,CAAA;AAAA;AACnB,KACF;AAAA,IACA;AAAC,GACH;AAEA,EAAO,OAAA,CAAC,KAAO,EAAA,sBAAA,EAAwB,YAAY,CAAA;AACrD;AAGA,SAAS,mBAAA,CAAuB,KAAa,KAAoB,EAAA;AAC/D,EAAO,OAAA,cAAA,CAAe,KAAK,CAAA,GAAI,IAAO,GAAA,KAAA;AACxC;;;;"}
1
+ {"version":3,"file":"useControlled.js","sources":["../src/utils/useControlled.ts"],"sourcesContent":["import {\n type Dispatch,\n type SetStateAction,\n isValidElement,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\n\nexport interface UseControlledProps<T> {\n /**\n * Holds the component value when it's controlled.\n */\n controlled?: T;\n /**\n * The default value when uncontrolled.\n */\n default: T;\n /**\n * The component name displayed in warnings.\n */\n name: string;\n /**\n * The name of the state variable displayed in warnings.\n */\n state?: string;\n}\n\n/**\n * Copied from MUI (v5) useControlled hook with one additional returned value\n * @see https://github.com/mui-org/material-ui/blob/0979e6a54ba47c278d1f535953c0520a86349811/packages/material-ui-utils/src/useControlled.js\n */\nexport function useControlled<S>({\n controlled,\n default: defaultProp,\n name,\n state = \"value\",\n}: UseControlledProps<S>): [S, Dispatch<SetStateAction<S>>, boolean] {\n const { current: isControlled } = useRef(controlled !== undefined);\n const [valueState, setValue] = useState<S>(defaultProp);\n const value = controlled !== undefined ? controlled : valueState;\n const { current: defaultValue } = useRef(defaultProp);\n\n useEffect(() => {\n if (process.env.NODE_ENV !== \"production\") {\n if (isControlled !== (controlled !== undefined)) {\n console.error(\n [\n `Salt: A component is changing the ${\n isControlled ? \"\" : \"un\"\n }controlled ${state} state of ${name} to be ${\n isControlled ? \"un\" : \"\"\n }controlled.`,\n \"Elements should not switch from uncontrolled to controlled (or vice versa).\",\n `Decide between using a controlled or uncontrolled ${name} element for the lifetime of the component.`,\n \"The nature of the state is determined during the first render, it's considered controlled if the value is not `undefined`.\",\n \"More info: https://reactjs.org/link/controlled-components\",\n ].join(\"\\n\"),\n );\n }\n }\n return undefined;\n }, [state, name, controlled]);\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: uses JSON.stringify to compare defaultProp\n useEffect(() => {\n if (process.env.NODE_ENV !== \"production\") {\n if (!isControlled && defaultValue !== defaultProp) {\n console.error(\n [\n `Salt: A component is changing the default ${state} state of an uncontrolled ${name} after being initialized. ` +\n `To suppress this warning opt to use a controlled ${name}.`,\n ].join(\"\\n\"),\n );\n }\n }\n return undefined;\n }, [JSON.stringify(defaultProp, ignoreReactElements)]);\n\n const setValueIfUncontrolled: Dispatch<SetStateAction<S>> = useCallback(\n (newValue) => {\n if (!isControlled) {\n setValue(newValue);\n }\n },\n [],\n );\n\n return [value, setValueIfUncontrolled, isControlled];\n}\n\n// Ignore ReactElements in JSON, they contain circular refs\nfunction ignoreReactElements<T>(key: string, value: T): T | null {\n return isValidElement(value) ? null : value;\n}\n"],"names":[],"mappings":";;AAiCO,SAAS,aAAiB,CAAA;AAAA,EAC/B,UAAA;AAAA,EACA,OAAS,EAAA,WAAA;AAAA,EACT,IAAA;AAAA,EACA,KAAQ,GAAA;AACV,CAAqE,EAAA;AACnE,EAAA,MAAM,EAAE,OAAS,EAAA,YAAA,EAAiB,GAAA,MAAA,CAAO,eAAe,MAAS,CAAA;AACjE,EAAA,MAAM,CAAC,UAAA,EAAY,QAAQ,CAAA,GAAI,SAAY,WAAW,CAAA;AACtD,EAAM,MAAA,KAAA,GAAQ,UAAe,KAAA,MAAA,GAAY,UAAa,GAAA,UAAA;AACtD,EAAA,MAAM,EAAE,OAAA,EAAS,YAAa,EAAA,GAAI,OAAO,WAAW,CAAA;AAEpD,EAAA,SAAA,CAAU,MAAM;AACd,IAAI,IAAA,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,MAAI,IAAA,YAAA,MAAkB,eAAe,MAAY,CAAA,EAAA;AAC/C,QAAQ,OAAA,CAAA,KAAA;AAAA,UACN;AAAA,YACE,CAAA,kCAAA,EACE,YAAe,GAAA,EAAA,GAAK,IACtB,CAAA,WAAA,EAAc,KAAK,CAAA,UAAA,EAAa,IAAI,CAAA,OAAA,EAClC,YAAe,GAAA,IAAA,GAAO,EACxB,CAAA,WAAA,CAAA;AAAA,YACA,6EAAA;AAAA,YACA,qDAAqD,IAAI,CAAA,2CAAA,CAAA;AAAA,YACzD,4HAAA;AAAA,YACA;AAAA,WACF,CAAE,KAAK,IAAI;AAAA,SACb;AAAA;AACF;AAEF,IAAO,OAAA,MAAA;AAAA,GACN,EAAA,CAAC,KAAO,EAAA,IAAA,EAAM,UAAU,CAAC,CAAA;AAG5B,EAAA,SAAA,CAAU,MAAM;AACd,IAAI,IAAA,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,MAAI,IAAA,CAAC,YAAgB,IAAA,YAAA,KAAiB,WAAa,EAAA;AACjD,QAAQ,OAAA,CAAA,KAAA;AAAA,UACN;AAAA,YACE,CAA6C,0CAAA,EAAA,KAAK,CAA6B,0BAAA,EAAA,IAAI,8EAC7B,IAAI,CAAA,CAAA;AAAA,WAC5D,CAAE,KAAK,IAAI;AAAA,SACb;AAAA;AACF;AAEF,IAAO,OAAA,MAAA;AAAA,KACN,CAAC,IAAA,CAAK,UAAU,WAAa,EAAA,mBAAmB,CAAC,CAAC,CAAA;AAErD,EAAA,MAAM,sBAAsD,GAAA,WAAA;AAAA,IAC1D,CAAC,QAAa,KAAA;AACZ,MAAA,IAAI,CAAC,YAAc,EAAA;AACjB,QAAA,QAAA,CAAS,QAAQ,CAAA;AAAA;AACnB,KACF;AAAA,IACA;AAAC,GACH;AAEA,EAAO,OAAA,CAAC,KAAO,EAAA,sBAAA,EAAwB,YAAY,CAAA;AACrD;AAGA,SAAS,mBAAA,CAAuB,KAAa,KAAoB,EAAA;AAC/D,EAAO,OAAA,cAAA,CAAe,KAAK,CAAA,GAAI,IAAO,GAAA,KAAA;AACxC;;;;"}
@@ -1,6 +1,6 @@
1
1
  import { jsx } from 'react/jsx-runtime';
2
- import { FloatingPortal, FloatingFocusManager, flip, shift, limitShift, platform, useFloating, autoUpdate } from '@floating-ui/react';
3
- import { forwardRef, createContext, useMemo, useContext } from 'react';
2
+ import { FloatingPortal, FloatingFocusManager, platform, flip, shift, limitShift, useFloating, autoUpdate } from '@floating-ui/react';
3
+ import { forwardRef, createContext, useContext, useMemo } from 'react';
4
4
  import { useTheme, SaltProviderNext, SaltProvider } from '../../salt-provider/SaltProvider.js';
5
5
  import { usePreventScroll } from '../usePreventScroll.js';
6
6
 
@@ -1 +1 @@
1
- {"version":3,"file":"useFloatingUI.js","sources":["../src/utils/useFloatingUI/useFloatingUI.tsx"],"sourcesContent":["import {\n FloatingFocusManager,\n type FloatingFocusManagerProps,\n FloatingPortal,\n type Middleware,\n type Platform,\n type Strategy,\n type UseFloatingOptions,\n autoUpdate,\n flip,\n limitShift,\n platform,\n shift,\n useFloating,\n} from \"@floating-ui/react\";\nimport {\n type ComponentPropsWithoutRef,\n type ReactNode,\n createContext,\n forwardRef,\n useContext,\n useMemo,\n} from \"react\";\nimport { SaltProvider, SaltProviderNext, useTheme } from \"../../salt-provider\";\nimport { usePreventScroll } from \"../usePreventScroll\";\n\nexport interface FloatingComponentProps\n extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * Whether the floating component is open (used for determining whether to show the component)\n * We pass this as a prop rather than not rendering the component to allow more advanced use-cases e.g.\n * for caching windows and reusing them, rather than always spawning a new one\n */\n open: boolean;\n /**\n * Use this prop when `FloatingFocusManager` is needed for floating component\n */\n focusManagerProps?: Omit<FloatingFocusManagerProps, \"children\">;\n /**\n * Position and sizing optional props for the floating component. `top`, `left`, and `position` for floating elements where they aren't positioned with relative to the trigger.\n * `width` and `height` are used to define the size of the floating element.\n *\n */\n top?: number;\n left?: number;\n width?: number;\n height?: number;\n position?: Strategy;\n /**\n * Makes the page unscrollable when the floating component is open.\n */\n lockScroll?: boolean;\n}\n\nconst DefaultFloatingComponent = forwardRef<\n HTMLDivElement,\n FloatingComponentProps\n>(function DefaultFloatingComponent(props, ref) {\n const {\n open,\n top,\n left,\n position,\n width,\n height,\n focusManagerProps,\n lockScroll,\n ...rest\n } = props;\n const style = {\n top,\n left,\n position,\n };\n\n const { themeNext } = useTheme();\n usePreventScroll({ isDisabled: !lockScroll || !open });\n\n const ChosenSaltProvider = themeNext ? SaltProviderNext : SaltProvider;\n\n if (focusManagerProps && open) {\n return (\n <FloatingPortal>\n <ChosenSaltProvider applyClassesTo=\"scope\">\n <FloatingFocusManager {...focusManagerProps}>\n <div style={style} {...rest} ref={ref} />\n </FloatingFocusManager>\n </ChosenSaltProvider>\n </FloatingPortal>\n );\n }\n\n return open ? (\n <FloatingPortal>\n <ChosenSaltProvider applyClassesTo=\"scope\">\n <div style={style} {...rest} ref={ref} />\n </ChosenSaltProvider>\n </FloatingPortal>\n ) : null;\n});\n\nexport interface FloatingComponentContextType {\n Component: typeof DefaultFloatingComponent;\n}\n\nconst FloatingComponentContext = createContext<FloatingComponentContextType>({\n Component: DefaultFloatingComponent,\n});\n\nif (process.env.NODE_ENV !== \"production\") {\n FloatingComponentContext.displayName = \"FloatingComponentContext\";\n}\n\nexport interface FloatingComponentProviderProps\n extends FloatingComponentContextType {\n children: ReactNode;\n}\n\nexport function FloatingComponentProvider(\n props: FloatingComponentProviderProps,\n) {\n const { Component, children } = props;\n const value = useMemo(() => ({ Component }), [Component]);\n\n return (\n <FloatingComponentContext.Provider value={value}>\n {children}\n </FloatingComponentContext.Provider>\n );\n}\n\nexport function useFloatingComponent() {\n return useContext(FloatingComponentContext);\n}\n\nexport interface UseFloatingUIProps\n extends Pick<\n UseFloatingOptions,\n \"placement\" | \"strategy\" | \"open\" | \"onOpenChange\" | \"nodeId\"\n > {\n /**\n * Function to update the default middleware used to extend or replace it\n */\n middleware?: Middleware[];\n}\n\ntype GetMiddleware = (middleware: Middleware[]) => Middleware[];\n\nconst defaultGetMiddleware: GetMiddleware = (defaultMiddleware) =>\n defaultMiddleware;\n\ninterface FloatingPlatformContextType {\n platform: Platform;\n middleware: GetMiddleware;\n animationFrame: boolean;\n}\n\nconst defaultFloatingPlaform: FloatingPlatformContextType = {\n platform,\n middleware: defaultGetMiddleware,\n animationFrame: false,\n};\n\nconst FloatingPlatformContext = createContext<FloatingPlatformContextType>(\n defaultFloatingPlaform,\n);\n\nexport interface FloatingPlatformProviderProps {\n platform?: Platform;\n middleware?: GetMiddleware;\n children: ReactNode;\n animationFrame?: boolean;\n}\n\nexport function FloatingPlatformProvider(props: FloatingPlatformProviderProps) {\n const {\n platform: platformProp,\n middleware,\n animationFrame,\n children,\n } = props;\n\n const floatingPlatformContextValue = useMemo<FloatingPlatformContextType>(\n () => ({\n platform: platformProp ?? platform,\n middleware: middleware ?? defaultGetMiddleware,\n animationFrame: animationFrame || false,\n }),\n [platformProp, middleware, animationFrame],\n );\n\n return (\n <FloatingPlatformContext.Provider value={floatingPlatformContextValue}>\n {children}\n </FloatingPlatformContext.Provider>\n );\n}\n\nexport function useFloatingPlatform() {\n return useContext(FloatingPlatformContext);\n}\n\nexport const DEFAULT_FLOATING_UI_MIDDLEWARE = [\n flip(),\n shift({ limiter: limitShift() }),\n];\n\ntype UseFloatingRefs = ReturnType<typeof useFloating>[\"refs\"];\n\nexport interface UseFloatingUIReturn extends ReturnType<typeof useFloating> {\n reference: UseFloatingRefs[\"setReference\"];\n floating: UseFloatingRefs[\"setFloating\"];\n}\n\nexport function useFloatingUI(props: UseFloatingUIProps): UseFloatingUIReturn {\n const {\n middleware = DEFAULT_FLOATING_UI_MIDDLEWARE,\n open = false,\n onOpenChange,\n ...other\n } = props;\n\n const handleOpenChange: UseFloatingUIProps[\"onOpenChange\"] = (\n open,\n boolean,\n reason,\n ) => {\n update();\n onOpenChange?.(open, boolean, reason);\n };\n\n const {\n platform: contextPlatform,\n middleware: contextMiddleware,\n animationFrame,\n } = useFloatingPlatform();\n\n const { refs, update, ...rest } = useFloating({\n ...other,\n middleware: contextMiddleware(middleware),\n open,\n onOpenChange: handleOpenChange,\n whileElementsMounted: (...args) => {\n const cleanup = autoUpdate(...args, { animationFrame });\n\n return cleanup;\n },\n platform: contextPlatform,\n });\n\n return {\n reference: refs.setReference,\n floating: refs.setFloating,\n refs,\n update,\n ...rest,\n };\n}\n"],"names":["DefaultFloatingComponent","open"],"mappings":"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"}
1
+ {"version":3,"file":"useFloatingUI.js","sources":["../src/utils/useFloatingUI/useFloatingUI.tsx"],"sourcesContent":["import {\n FloatingFocusManager,\n type FloatingFocusManagerProps,\n FloatingPortal,\n type Middleware,\n type Platform,\n type Strategy,\n type UseFloatingOptions,\n autoUpdate,\n flip,\n limitShift,\n platform,\n shift,\n useFloating,\n} from \"@floating-ui/react\";\nimport {\n type ComponentPropsWithoutRef,\n type ReactNode,\n createContext,\n forwardRef,\n useContext,\n useMemo,\n} from \"react\";\nimport { SaltProvider, SaltProviderNext, useTheme } from \"../../salt-provider\";\nimport { usePreventScroll } from \"../usePreventScroll\";\n\nexport interface FloatingComponentProps\n extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * Whether the floating component is open (used for determining whether to show the component)\n * We pass this as a prop rather than not rendering the component to allow more advanced use-cases e.g.\n * for caching windows and reusing them, rather than always spawning a new one\n */\n open: boolean;\n /**\n * Use this prop when `FloatingFocusManager` is needed for floating component\n */\n focusManagerProps?: Omit<FloatingFocusManagerProps, \"children\">;\n /**\n * Position and sizing optional props for the floating component. `top`, `left`, and `position` for floating elements where they aren't positioned with relative to the trigger.\n * `width` and `height` are used to define the size of the floating element.\n *\n */\n top?: number;\n left?: number;\n width?: number;\n height?: number;\n position?: Strategy;\n /**\n * Makes the page unscrollable when the floating component is open.\n */\n lockScroll?: boolean;\n}\n\nconst DefaultFloatingComponent = forwardRef<\n HTMLDivElement,\n FloatingComponentProps\n>(function DefaultFloatingComponent(props, ref) {\n const {\n open,\n top,\n left,\n position,\n width,\n height,\n focusManagerProps,\n lockScroll,\n ...rest\n } = props;\n const style = {\n top,\n left,\n position,\n };\n\n const { themeNext } = useTheme();\n usePreventScroll({ isDisabled: !lockScroll || !open });\n\n const ChosenSaltProvider = themeNext ? SaltProviderNext : SaltProvider;\n\n if (focusManagerProps && open) {\n return (\n <FloatingPortal>\n <ChosenSaltProvider applyClassesTo=\"scope\">\n <FloatingFocusManager {...focusManagerProps}>\n <div style={style} {...rest} ref={ref} />\n </FloatingFocusManager>\n </ChosenSaltProvider>\n </FloatingPortal>\n );\n }\n\n return open ? (\n <FloatingPortal>\n <ChosenSaltProvider applyClassesTo=\"scope\">\n <div style={style} {...rest} ref={ref} />\n </ChosenSaltProvider>\n </FloatingPortal>\n ) : null;\n});\n\nexport interface FloatingComponentContextType {\n Component: typeof DefaultFloatingComponent;\n}\n\nconst FloatingComponentContext = createContext<FloatingComponentContextType>({\n Component: DefaultFloatingComponent,\n});\n\nif (process.env.NODE_ENV !== \"production\") {\n FloatingComponentContext.displayName = \"FloatingComponentContext\";\n}\n\nexport interface FloatingComponentProviderProps\n extends FloatingComponentContextType {\n children: ReactNode;\n}\n\nexport function FloatingComponentProvider(\n props: FloatingComponentProviderProps,\n) {\n const { Component, children } = props;\n const value = useMemo(() => ({ Component }), [Component]);\n\n return (\n <FloatingComponentContext.Provider value={value}>\n {children}\n </FloatingComponentContext.Provider>\n );\n}\n\nexport function useFloatingComponent() {\n return useContext(FloatingComponentContext);\n}\n\nexport interface UseFloatingUIProps\n extends Pick<\n UseFloatingOptions,\n \"placement\" | \"strategy\" | \"open\" | \"onOpenChange\" | \"nodeId\"\n > {\n /**\n * Function to update the default middleware used to extend or replace it\n */\n middleware?: Middleware[];\n}\n\ntype GetMiddleware = (middleware: Middleware[]) => Middleware[];\n\nconst defaultGetMiddleware: GetMiddleware = (defaultMiddleware) =>\n defaultMiddleware;\n\ninterface FloatingPlatformContextType {\n platform: Platform;\n middleware: GetMiddleware;\n animationFrame: boolean;\n}\n\nconst defaultFloatingPlaform: FloatingPlatformContextType = {\n platform,\n middleware: defaultGetMiddleware,\n animationFrame: false,\n};\n\nconst FloatingPlatformContext = createContext<FloatingPlatformContextType>(\n defaultFloatingPlaform,\n);\n\nexport interface FloatingPlatformProviderProps {\n platform?: Platform;\n middleware?: GetMiddleware;\n children: ReactNode;\n animationFrame?: boolean;\n}\n\nexport function FloatingPlatformProvider(props: FloatingPlatformProviderProps) {\n const {\n platform: platformProp,\n middleware,\n animationFrame,\n children,\n } = props;\n\n const floatingPlatformContextValue = useMemo<FloatingPlatformContextType>(\n () => ({\n platform: platformProp ?? platform,\n middleware: middleware ?? defaultGetMiddleware,\n animationFrame: animationFrame || false,\n }),\n [platformProp, middleware, animationFrame],\n );\n\n return (\n <FloatingPlatformContext.Provider value={floatingPlatformContextValue}>\n {children}\n </FloatingPlatformContext.Provider>\n );\n}\n\nexport function useFloatingPlatform() {\n return useContext(FloatingPlatformContext);\n}\n\nexport const DEFAULT_FLOATING_UI_MIDDLEWARE = [\n flip(),\n shift({ limiter: limitShift() }),\n];\n\ntype UseFloatingRefs = ReturnType<typeof useFloating>[\"refs\"];\n\nexport interface UseFloatingUIReturn extends ReturnType<typeof useFloating> {\n reference: UseFloatingRefs[\"setReference\"];\n floating: UseFloatingRefs[\"setFloating\"];\n}\n\nexport function useFloatingUI(props: UseFloatingUIProps): UseFloatingUIReturn {\n const {\n middleware = DEFAULT_FLOATING_UI_MIDDLEWARE,\n open = false,\n onOpenChange,\n ...other\n } = props;\n\n const handleOpenChange: UseFloatingUIProps[\"onOpenChange\"] = (\n open,\n boolean,\n reason,\n ) => {\n update();\n onOpenChange?.(open, boolean, reason);\n };\n\n const {\n platform: contextPlatform,\n middleware: contextMiddleware,\n animationFrame,\n } = useFloatingPlatform();\n\n const { refs, update, ...rest } = useFloating({\n ...other,\n middleware: contextMiddleware(middleware),\n open,\n onOpenChange: handleOpenChange,\n whileElementsMounted: (...args) => {\n const cleanup = autoUpdate(...args, { animationFrame });\n\n return cleanup;\n },\n platform: contextPlatform,\n });\n\n return {\n reference: refs.setReference,\n floating: refs.setFloating,\n refs,\n update,\n ...rest,\n };\n}\n"],"names":["DefaultFloatingComponent","open"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"useId.js","sources":["../src/utils/useId.ts"],"sourcesContent":["import * as React from \"react\";\n\n// Workaround for https://github.com/webpack/webpack/issues/14814#issuecomment-1536757985\n// Without `toString()`, downstream library using webpack to re-bundle will error\nconst maybeReactUseId: undefined | (() => string) = (React as any)[\n \"useId\".toString()\n];\n\nlet globalId = BigInt(0);\nfunction useIdLegacy(idOverride?: string): string | undefined {\n const [defaultId, setDefaultId] = React.useState(idOverride);\n const id = idOverride || defaultId;\n React.useEffect(() => {\n if (defaultId == null) {\n setDefaultId(`salt-${++globalId}`);\n }\n }, [defaultId]);\n return id;\n}\n\nexport function useId(idOverride?: string): string | undefined {\n if (maybeReactUseId !== undefined) {\n const reactId = maybeReactUseId();\n return idOverride ?? reactId;\n }\n // `React.useId` is invariant at runtime.\n return useIdLegacy(idOverride);\n}\n\n// Note: Some usages require that an id is returned on first call, not only post-first-render\n// (as with the useEffect solution). This can go away once we totally move to React 18\nexport function useIdMemo(idOverride?: string): string {\n return React.useMemo(() => {\n return idOverride ?? `salt-${++globalId}`;\n }, [idOverride]);\n}\n"],"names":[],"mappings":";;AAIA,MAAM,eAA+C,GAAA,KAAA,CACnD,OAAQ,CAAA,QAAA,EACV,CAAA;AAEA,IAAI,QAAA,GAAW,OAAO,CAAC,CAAA;AACvB,SAAS,YAAY,UAAyC,EAAA;AAC5D,EAAA,MAAM,CAAC,SAAW,EAAA,YAAY,CAAI,GAAA,KAAA,CAAM,SAAS,UAAU,CAAA;AAC3D,EAAA,MAAM,KAAK,UAAc,IAAA,SAAA;AACzB,EAAA,KAAA,CAAM,UAAU,MAAM;AACpB,IAAA,IAAI,aAAa,IAAM,EAAA;AACrB,MAAa,YAAA,CAAA,CAAA,KAAA,EAAQ,EAAE,QAAQ,CAAE,CAAA,CAAA;AAAA;AACnC,GACF,EAAG,CAAC,SAAS,CAAC,CAAA;AACd,EAAO,OAAA,EAAA;AACT;AAEO,SAAS,MAAM,UAAyC,EAAA;AAC7D,EAAA,IAAI,oBAAoB,KAAW,CAAA,EAAA;AACjC,IAAA,MAAM,UAAU,eAAgB,EAAA;AAChC,IAAA,OAAO,UAAc,IAAA,OAAA;AAAA;AAGvB,EAAA,OAAO,YAAY,UAAU,CAAA;AAC/B;AAIO,SAAS,UAAU,UAA6B,EAAA;AACrD,EAAO,OAAA,KAAA,CAAM,QAAQ,MAAM;AACzB,IAAO,OAAA,UAAA,IAAc,CAAQ,KAAA,EAAA,EAAE,QAAQ,CAAA,CAAA;AAAA,GACzC,EAAG,CAAC,UAAU,CAAC,CAAA;AACjB;;;;"}
1
+ {"version":3,"file":"useId.js","sources":["../src/utils/useId.ts"],"sourcesContent":["import * as React from \"react\";\n\n// Workaround for https://github.com/webpack/webpack/issues/14814#issuecomment-1536757985\n// Without `toString()`, downstream library using webpack to re-bundle will error\nconst maybeReactUseId: undefined | (() => string) = (React as any)[\n \"useId\".toString()\n];\n\nlet globalId = BigInt(0);\nfunction useIdLegacy(idOverride?: string): string | undefined {\n const [defaultId, setDefaultId] = React.useState(idOverride);\n const id = idOverride || defaultId;\n React.useEffect(() => {\n if (defaultId == null) {\n setDefaultId(`salt-${++globalId}`);\n }\n }, [defaultId]);\n return id;\n}\n\nexport function useId(idOverride?: string): string | undefined {\n if (maybeReactUseId !== undefined) {\n const reactId = maybeReactUseId();\n return idOverride ?? reactId;\n }\n // `React.useId` is invariant at runtime.\n return useIdLegacy(idOverride);\n}\n\n// Note: Some usages require that an id is returned on first call, not only post-first-render\n// (as with the useEffect solution). This can go away once we totally move to React 18\nexport function useIdMemo(idOverride?: string): string {\n return React.useMemo(() => {\n return idOverride ?? `salt-${++globalId}`;\n }, [idOverride]);\n}\n"],"names":[],"mappings":";;AAIA,MAAM,eAA+C,GAAA,KAAA,CACnD,OAAQ,CAAA,QAAA,EACV,CAAA;AAEA,IAAI,QAAA,GAAW,OAAO,CAAC,CAAA;AACvB,SAAS,YAAY,UAAyC,EAAA;AAC5D,EAAA,MAAM,CAAC,SAAW,EAAA,YAAY,CAAI,GAAA,KAAA,CAAM,SAAS,UAAU,CAAA;AAC3D,EAAA,MAAM,KAAK,UAAc,IAAA,SAAA;AACzB,EAAA,KAAA,CAAM,UAAU,MAAM;AACpB,IAAA,IAAI,aAAa,IAAM,EAAA;AACrB,MAAa,YAAA,CAAA,CAAA,KAAA,EAAQ,EAAE,QAAQ,CAAE,CAAA,CAAA;AAAA;AACnC,GACF,EAAG,CAAC,SAAS,CAAC,CAAA;AACd,EAAO,OAAA,EAAA;AACT;AAEO,SAAS,MAAM,UAAyC,EAAA;AAC7D,EAAA,IAAI,oBAAoB,MAAW,EAAA;AACjC,IAAA,MAAM,UAAU,eAAgB,EAAA;AAChC,IAAA,OAAO,UAAc,IAAA,OAAA;AAAA;AAGvB,EAAA,OAAO,YAAY,UAAU,CAAA;AAC/B;AAIO,SAAS,UAAU,UAA6B,EAAA;AACrD,EAAO,OAAA,KAAA,CAAM,QAAQ,MAAM;AACzB,IAAO,OAAA,UAAA,IAAc,CAAQ,KAAA,EAAA,EAAE,QAAQ,CAAA,CAAA;AAAA,GACzC,EAAG,CAAC,UAAU,CAAC,CAAA;AACjB;;;;"}