@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.
- package/CHANGELOG.md +11 -0
- package/css/salt-core.css +1 -1
- package/dist-cjs/accordion/Accordion.js.map +1 -1
- package/dist-cjs/accordion/AccordionContext.js.map +1 -1
- package/dist-cjs/accordion/AccordionHeader.js.map +1 -1
- package/dist-cjs/accordion/AccordionPanel.js.map +1 -1
- package/dist-cjs/aria-announcer/AriaAnnouncerContext.js.map +1 -1
- package/dist-cjs/aria-announcer/AriaAnnouncerProvider.js.map +1 -1
- package/dist-cjs/aria-announcer/useAriaAnnouncer.js +1 -9
- package/dist-cjs/aria-announcer/useAriaAnnouncer.js.map +1 -1
- package/dist-cjs/avatar/Avatar.js.map +1 -1
- package/dist-cjs/button/Button.js.map +1 -1
- package/dist-cjs/button/useButton.js.map +1 -1
- package/dist-cjs/checkbox/Checkbox.js.map +1 -1
- package/dist-cjs/checkbox/CheckboxGroup.js.map +1 -1
- package/dist-cjs/checkbox/internal/CheckboxGroupContext.js.map +1 -1
- package/dist-cjs/combo-box/ComboBox.js.map +1 -1
- package/dist-cjs/combo-box/useComboBox.js.map +1 -1
- package/dist-cjs/dialog/Dialog.js.map +1 -1
- package/dist-cjs/dialog/DialogContent.js.map +1 -1
- package/dist-cjs/dialog/DialogContext.js.map +1 -1
- package/dist-cjs/drawer/Drawer.js.map +1 -1
- package/dist-cjs/dropdown/Dropdown.js.map +1 -1
- package/dist-cjs/file-drop-zone/FileDropZone.js.map +1 -1
- package/dist-cjs/file-drop-zone/FileDropZoneTrigger.js.map +1 -1
- package/dist-cjs/file-drop-zone/internal/utils.js.map +1 -1
- package/dist-cjs/flex-layout/parseSpacing.js.map +1 -1
- package/dist-cjs/form-field/FormField.js.map +1 -1
- package/dist-cjs/form-field/FormFieldHelperText.js.map +1 -1
- package/dist-cjs/form-field/FormFieldLabel.js.map +1 -1
- package/dist-cjs/grid-layout/GridLayout.js.map +1 -1
- package/dist-cjs/input/Input.js.map +1 -1
- package/dist-cjs/interactable-card/InteractableCard.js.map +1 -1
- package/dist-cjs/interactable-card/InteractableCardGroup.js.map +1 -1
- package/dist-cjs/interactable-card/InteractableCardGroupContext.js.map +1 -1
- package/dist-cjs/interactable-card/useInteractableCard.js.map +1 -1
- package/dist-cjs/link/Link.js.map +1 -1
- package/dist-cjs/list-box/ListBox.js.map +1 -1
- package/dist-cjs/list-control/ListControlContext.js.map +1 -1
- package/dist-cjs/list-control/ListControlState.js.map +1 -1
- package/dist-cjs/menu/MenuBase.js.map +1 -1
- package/dist-cjs/menu/MenuContext.js.map +1 -1
- package/dist-cjs/menu/MenuGroup.js.map +1 -1
- package/dist-cjs/menu/MenuItem.js.map +1 -1
- package/dist-cjs/menu/MenuPanel.js.map +1 -1
- package/dist-cjs/menu/MenuPanelContext.js.map +1 -1
- package/dist-cjs/menu/MenuTrigger.js.map +1 -1
- package/dist-cjs/multiline-input/MultilineInput.js.map +1 -1
- package/dist-cjs/navigation-item/ExpansionIcon.js +1 -1
- package/dist-cjs/navigation-item/ExpansionIcon.js.map +1 -1
- package/dist-cjs/navigation-item/NavigationItem.js.map +1 -1
- package/dist-cjs/option/Option.js.map +1 -1
- package/dist-cjs/overlay/Overlay.js.map +1 -1
- package/dist-cjs/pagination/PageButton.js.map +1 -1
- package/dist-cjs/pagination/Pagination.js.map +1 -1
- package/dist-cjs/pagination/PaginationContext.js.map +1 -1
- package/dist-cjs/pagination/usePagination.js.map +1 -1
- package/dist-cjs/parent-child-layout/ParentChildLayout.js.map +1 -1
- package/dist-cjs/pill-input/PillInput.js.map +1 -1
- package/dist-cjs/progress/CircularProgress/CircularProgress.js.map +1 -1
- package/dist-cjs/progress/LinearProgress/LinearProgress.js.map +1 -1
- package/dist-cjs/radio-button/RadioButton.js.map +1 -1
- package/dist-cjs/radio-button/RadioButtonGroup.js.map +1 -1
- package/dist-cjs/radio-button/internal/RadioGroupContext.js.map +1 -1
- package/dist-cjs/salt-provider/SaltProvider.js.map +1 -1
- package/dist-cjs/skip-link/internal/useManageFocusOnTarget.js.map +1 -1
- package/dist-cjs/slider/RangeSlider.js.map +1 -1
- package/dist-cjs/slider/Slider.js.map +1 -1
- package/dist-cjs/slider/internal/SliderThumb.js.map +1 -1
- package/dist-cjs/slider/internal/SliderTrack.js.map +1 -1
- package/dist-cjs/slider/internal/useRangeSliderThumb.js.map +1 -1
- package/dist-cjs/slider/internal/useSliderThumb.js.map +1 -1
- package/dist-cjs/stack-layout/StackLayout.js.map +1 -1
- package/dist-cjs/stepper/Step.js +4 -3
- package/dist-cjs/stepper/Step.js.map +1 -1
- package/dist-cjs/stepper/internal/StepperProvider.js.map +1 -1
- package/dist-cjs/switch/Switch.js.map +1 -1
- package/dist-cjs/toggle-button/ToggleButton.js +2 -1
- package/dist-cjs/toggle-button/ToggleButton.js.map +1 -1
- package/dist-cjs/toggle-button-group/ToggleButtonGroup.js.map +1 -1
- package/dist-cjs/toggle-button-group/ToggleButtonGroupContext.js.map +1 -1
- package/dist-cjs/tooltip/Tooltip.js.map +1 -1
- package/dist-cjs/tooltip/TooltipBase.js.map +1 -1
- package/dist-cjs/tooltip/useAriaAnnounce.js.map +1 -1
- package/dist-cjs/tooltip/useTooltip.js.map +1 -1
- package/dist-cjs/utils/mergeProps.js.map +1 -1
- package/dist-cjs/utils/useControlled.js.map +1 -1
- package/dist-cjs/utils/useFloatingUI/useFloatingUI.js.map +1 -1
- package/dist-cjs/utils/useId.js.map +1 -1
- package/dist-cjs/utils/usePreventScroll.js.map +1 -1
- package/dist-cjs/utils/useResizeObserver.js.map +1 -1
- package/dist-cjs/utils/useResponsiveProp.js.map +1 -1
- package/dist-es/accordion/Accordion.js.map +1 -1
- package/dist-es/accordion/AccordionContext.js.map +1 -1
- package/dist-es/accordion/AccordionHeader.js.map +1 -1
- package/dist-es/accordion/AccordionPanel.js.map +1 -1
- package/dist-es/aria-announcer/AriaAnnouncerContext.js.map +1 -1
- package/dist-es/aria-announcer/AriaAnnouncerProvider.js.map +1 -1
- package/dist-es/aria-announcer/useAriaAnnouncer.js +1 -9
- package/dist-es/aria-announcer/useAriaAnnouncer.js.map +1 -1
- package/dist-es/avatar/Avatar.js.map +1 -1
- package/dist-es/breakpoints/BreakpointProvider.js +1 -1
- package/dist-es/button/Button.js.map +1 -1
- package/dist-es/button/useButton.js.map +1 -1
- package/dist-es/checkbox/Checkbox.js.map +1 -1
- package/dist-es/checkbox/CheckboxGroup.js.map +1 -1
- package/dist-es/checkbox/internal/CheckboxGroupContext.js.map +1 -1
- package/dist-es/combo-box/ComboBox.js.map +1 -1
- package/dist-es/combo-box/useComboBox.js.map +1 -1
- package/dist-es/dialog/Dialog.js.map +1 -1
- package/dist-es/dialog/DialogContent.js.map +1 -1
- package/dist-es/dialog/DialogContext.js.map +1 -1
- package/dist-es/drawer/Drawer.js.map +1 -1
- package/dist-es/dropdown/Dropdown.js.map +1 -1
- package/dist-es/file-drop-zone/FileDropZone.js +1 -1
- package/dist-es/file-drop-zone/FileDropZone.js.map +1 -1
- package/dist-es/file-drop-zone/FileDropZoneTrigger.js.map +1 -1
- package/dist-es/file-drop-zone/internal/utils.js.map +1 -1
- package/dist-es/flex-layout/parseSpacing.js.map +1 -1
- package/dist-es/form-field/FormField.js.map +1 -1
- package/dist-es/form-field/FormFieldHelperText.js.map +1 -1
- package/dist-es/form-field/FormFieldLabel.js.map +1 -1
- package/dist-es/grid-layout/GridLayout.js.map +1 -1
- package/dist-es/input/Input.js.map +1 -1
- package/dist-es/interactable-card/InteractableCard.js.map +1 -1
- package/dist-es/interactable-card/InteractableCardGroup.js.map +1 -1
- package/dist-es/interactable-card/InteractableCardGroupContext.js.map +1 -1
- package/dist-es/interactable-card/useInteractableCard.js.map +1 -1
- package/dist-es/link/Link.js.map +1 -1
- package/dist-es/list-box/ListBox.js.map +1 -1
- package/dist-es/list-control/ListControlContext.js.map +1 -1
- package/dist-es/list-control/ListControlState.js.map +1 -1
- package/dist-es/menu/MenuBase.js +1 -1
- package/dist-es/menu/MenuBase.js.map +1 -1
- package/dist-es/menu/MenuContext.js.map +1 -1
- package/dist-es/menu/MenuGroup.js.map +1 -1
- package/dist-es/menu/MenuItem.js.map +1 -1
- package/dist-es/menu/MenuPanel.js.map +1 -1
- package/dist-es/menu/MenuPanelContext.js.map +1 -1
- package/dist-es/menu/MenuTrigger.js.map +1 -1
- package/dist-es/multiline-input/MultilineInput.js.map +1 -1
- package/dist-es/navigation-item/ExpansionIcon.js +1 -1
- package/dist-es/navigation-item/ExpansionIcon.js.map +1 -1
- package/dist-es/navigation-item/NavigationItem.js.map +1 -1
- package/dist-es/option/Option.js.map +1 -1
- package/dist-es/overlay/Overlay.js +1 -1
- package/dist-es/overlay/Overlay.js.map +1 -1
- package/dist-es/pagination/PageButton.js.map +1 -1
- package/dist-es/pagination/Pagination.js.map +1 -1
- package/dist-es/pagination/PaginationContext.js.map +1 -1
- package/dist-es/pagination/usePagination.js.map +1 -1
- package/dist-es/parent-child-layout/ParentChildLayout.js.map +1 -1
- package/dist-es/pill-input/PillInput.js.map +1 -1
- package/dist-es/progress/CircularProgress/CircularProgress.js.map +1 -1
- package/dist-es/progress/LinearProgress/LinearProgress.js.map +1 -1
- package/dist-es/radio-button/RadioButton.js.map +1 -1
- package/dist-es/radio-button/RadioButtonGroup.js.map +1 -1
- package/dist-es/radio-button/internal/RadioGroupContext.js.map +1 -1
- package/dist-es/salt-provider/SaltProvider.js.map +1 -1
- package/dist-es/semantic-icon-provider/SemanticIconProvider.js +1 -1
- package/dist-es/skip-link/internal/useManageFocusOnTarget.js.map +1 -1
- package/dist-es/slider/RangeSlider.js.map +1 -1
- package/dist-es/slider/Slider.js.map +1 -1
- package/dist-es/slider/internal/SliderThumb.js.map +1 -1
- package/dist-es/slider/internal/SliderTrack.js.map +1 -1
- package/dist-es/slider/internal/useRangeSliderThumb.js.map +1 -1
- package/dist-es/slider/internal/useSliderThumb.js.map +1 -1
- package/dist-es/stack-layout/StackLayout.js.map +1 -1
- package/dist-es/stepper/Step.js +5 -4
- package/dist-es/stepper/Step.js.map +1 -1
- package/dist-es/stepper/internal/StepperProvider.js.map +1 -1
- package/dist-es/switch/Switch.js.map +1 -1
- package/dist-es/toggle-button/ToggleButton.js +2 -1
- package/dist-es/toggle-button/ToggleButton.js.map +1 -1
- package/dist-es/toggle-button-group/ToggleButtonGroup.js.map +1 -1
- package/dist-es/toggle-button-group/ToggleButtonGroupContext.js.map +1 -1
- package/dist-es/tooltip/Tooltip.js.map +1 -1
- package/dist-es/tooltip/TooltipBase.js.map +1 -1
- package/dist-es/tooltip/useAriaAnnounce.js.map +1 -1
- package/dist-es/tooltip/useTooltip.js +1 -1
- package/dist-es/tooltip/useTooltip.js.map +1 -1
- package/dist-es/utils/mergeProps.js.map +1 -1
- package/dist-es/utils/useControlled.js.map +1 -1
- package/dist-es/utils/useFloatingUI/useFloatingUI.js +2 -2
- package/dist-es/utils/useFloatingUI/useFloatingUI.js.map +1 -1
- package/dist-es/utils/useId.js.map +1 -1
- package/dist-es/utils/usePreventScroll.js.map +1 -1
- package/dist-es/utils/useResizeObserver.js.map +1 -1
- package/dist-es/utils/useResponsiveProp.js.map +1 -1
- package/dist-types/combo-box/ComboBox.d.ts +2 -2
- package/dist-types/form-field/FormFieldHelperText.d.ts +3 -1
- package/dist-types/stepper/Step.d.ts +1 -1
- package/dist-types/toggle-button/ToggleButton.d.ts +7 -2
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuBase.js","sources":["../src/menu/MenuBase.tsx"],"sourcesContent":["import {\n FloatingNode,\n type ReferenceType,\n flip,\n limitShift,\n offset,\n safePolygon,\n shift,\n size,\n useClick,\n useDismiss,\n useFloatingNodeId,\n useFloatingParentNodeId,\n useFloatingTree,\n useHover,\n useInteractions,\n useListNavigation,\n useRole,\n} from \"@floating-ui/react\";\nimport {\n type ReactNode,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport {\n type UseFloatingUIProps,\n useControlled,\n useFloatingUI,\n useIsomorphicLayoutEffect,\n} from \"../utils\";\nimport { MenuContext } from \"./MenuContext\";\n\nexport interface MenuBaseProps {\n children?: ReactNode;\n /**\n * Display or hide the component.\n */\n open?: boolean;\n /**\n * If true, the menu will be open by default.\n */\n defaultOpen?: boolean;\n /**\n * Callback function triggered when open state changes.\n */\n onOpenChange?: (newOpen: boolean) => void;\n /**\n * Set the placement of the Menu component relative to the trigger element. Defaults to `bottom-start` if it's the root menu or `right-start` if it's nested.\n */\n placement?: UseFloatingUIProps[\"placement\"];\n /**\n * Function that returns a [virtual element](https://floating-ui.com/docs/virtual-elements). If this is provided, it will override MenuTrigger.\n */\n getVirtualElement?: () => ReferenceType | null;\n}\n\nexport function MenuBase(props: MenuBaseProps) {\n const {\n children,\n defaultOpen,\n open,\n onOpenChange,\n placement,\n getVirtualElement,\n } = props;\n const parentId = useFloatingParentNodeId();\n const nodeId = useFloatingNodeId();\n const tree = useFloatingTree();\n const elementsRef = useRef<(HTMLDivElement | null)[]>([]);\n\n const [openState, setOpenState] = useControlled({\n controlled: open,\n default: Boolean(defaultOpen),\n name: \"ListControl\",\n state: \"open\",\n });\n\n const setOpen = useCallback(\n (newOpen: boolean) => {\n setOpenState(newOpen);\n onOpenChange?.(newOpen);\n },\n [onOpenChange],\n );\n\n const [activeIndex, setActiveIndex] = useState<number | null>(null);\n const [focusInside, setFocusInside] = useState(false);\n\n const isNested = parentId != null;\n\n const { x, y, strategy, elements, refs, context } = useFloatingUI({\n nodeId,\n open: openState,\n onOpenChange: setOpen,\n strategy: !getVirtualElement ? \"absolute\" : \"fixed\",\n placement:\n placement ??\n (isNested || getVirtualElement ? \"right-start\" : \"bottom-start\"),\n middleware: [\n // Align the nested menu by shifting it by var(--salt-size-border)\n offset(\n isNested ? { crossAxis: -1, mainAxis: 2 } : !getVirtualElement ? 1 : 0,\n ),\n flip({}),\n shift({ limiter: limitShift() }),\n size({\n apply({ elements, availableHeight }) {\n Object.assign(elements.floating.style, {\n maxHeight: `${availableHeight}px`,\n });\n },\n }),\n ],\n });\n\n useIsomorphicLayoutEffect(() => {\n if (getVirtualElement) {\n refs.setPositionReference(getVirtualElement());\n }\n }, [getVirtualElement, refs]);\n\n const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions(\n [\n useHover(context, {\n enabled: isNested && !focusInside,\n handleClose: safePolygon({ blockPointerEvents: true }),\n }),\n useClick(context, {\n event: \"mousedown\",\n toggle: !isNested,\n ignoreMouse: isNested,\n }),\n useRole(context, { role: \"menu\" }),\n useDismiss(context, { bubbles: true }),\n useListNavigation(context, {\n listRef: elementsRef,\n activeIndex,\n nested: isNested,\n onNavigate: setActiveIndex,\n }),\n ],\n );\n\n const getPanelPosition = () => ({\n top: y ?? 0,\n left: x ?? 0,\n position: strategy,\n width: elements.floating?.offsetWidth,\n height: elements.floating?.offsetHeight,\n });\n\n useEffect(() => {\n if (!tree) return;\n\n function handleItemClick() {\n setOpen(false);\n }\n\n tree.events.on(\"click\", handleItemClick);\n\n return () => {\n tree.events.off(\"click\", handleItemClick);\n };\n }, [tree, setOpen]);\n\n return (\n <FloatingNode id={nodeId}>\n <MenuContext.Provider\n value={{\n openState,\n getReferenceProps,\n getFloatingProps,\n refs,\n getPanelPosition,\n getItemProps,\n activeIndex,\n context,\n elementsRef,\n focusInside,\n setFocusInside,\n isNested,\n }}\n >\n {children}\n </MenuContext.Provider>\n </FloatingNode>\n );\n}\n"],"names":["elements"],"mappings":";;;;;;;;;;;;AA0DO,SAAS,SAAS,KAAsB,EAAA;AAC7C,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,WAAA;AAAA,IACA,IAAA;AAAA,IACA,YAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,GACE,GAAA,KAAA;AACJ,EAAA,MAAM,WAAW,uBAAwB,EAAA;AACzC,EAAA,MAAM,SAAS,iBAAkB,EAAA;AACjC,EAAA,MAAM,OAAO,eAAgB,EAAA;AAC7B,EAAM,MAAA,WAAA,GAAc,MAAkC,CAAA,EAAE,CAAA;AAExD,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,aAAc,CAAA;AAAA,IAC9C,UAAY,EAAA,IAAA;AAAA,IACZ,OAAA,EAAS,QAAQ,WAAW,CAAA;AAAA,IAC5B,IAAM,EAAA,aAAA;AAAA,IACN,KAAO,EAAA;AAAA,GACR,CAAA;AAED,EAAA,MAAM,OAAU,GAAA,WAAA;AAAA,IACd,CAAC,OAAqB,KAAA;AACpB,MAAA,YAAA,CAAa,OAAO,CAAA;AACpB,MAAe,YAAA,IAAA,IAAA,GAAA,
|
|
1
|
+
{"version":3,"file":"MenuBase.js","sources":["../src/menu/MenuBase.tsx"],"sourcesContent":["import {\n FloatingNode,\n type ReferenceType,\n flip,\n limitShift,\n offset,\n safePolygon,\n shift,\n size,\n useClick,\n useDismiss,\n useFloatingNodeId,\n useFloatingParentNodeId,\n useFloatingTree,\n useHover,\n useInteractions,\n useListNavigation,\n useRole,\n} from \"@floating-ui/react\";\nimport {\n type ReactNode,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport {\n type UseFloatingUIProps,\n useControlled,\n useFloatingUI,\n useIsomorphicLayoutEffect,\n} from \"../utils\";\nimport { MenuContext } from \"./MenuContext\";\n\nexport interface MenuBaseProps {\n children?: ReactNode;\n /**\n * Display or hide the component.\n */\n open?: boolean;\n /**\n * If true, the menu will be open by default.\n */\n defaultOpen?: boolean;\n /**\n * Callback function triggered when open state changes.\n */\n onOpenChange?: (newOpen: boolean) => void;\n /**\n * Set the placement of the Menu component relative to the trigger element. Defaults to `bottom-start` if it's the root menu or `right-start` if it's nested.\n */\n placement?: UseFloatingUIProps[\"placement\"];\n /**\n * Function that returns a [virtual element](https://floating-ui.com/docs/virtual-elements). If this is provided, it will override MenuTrigger.\n */\n getVirtualElement?: () => ReferenceType | null;\n}\n\nexport function MenuBase(props: MenuBaseProps) {\n const {\n children,\n defaultOpen,\n open,\n onOpenChange,\n placement,\n getVirtualElement,\n } = props;\n const parentId = useFloatingParentNodeId();\n const nodeId = useFloatingNodeId();\n const tree = useFloatingTree();\n const elementsRef = useRef<(HTMLDivElement | null)[]>([]);\n\n const [openState, setOpenState] = useControlled({\n controlled: open,\n default: Boolean(defaultOpen),\n name: \"ListControl\",\n state: \"open\",\n });\n\n const setOpen = useCallback(\n (newOpen: boolean) => {\n setOpenState(newOpen);\n onOpenChange?.(newOpen);\n },\n [onOpenChange],\n );\n\n const [activeIndex, setActiveIndex] = useState<number | null>(null);\n const [focusInside, setFocusInside] = useState(false);\n\n const isNested = parentId != null;\n\n const { x, y, strategy, elements, refs, context } = useFloatingUI({\n nodeId,\n open: openState,\n onOpenChange: setOpen,\n strategy: !getVirtualElement ? \"absolute\" : \"fixed\",\n placement:\n placement ??\n (isNested || getVirtualElement ? \"right-start\" : \"bottom-start\"),\n middleware: [\n // Align the nested menu by shifting it by var(--salt-size-border)\n offset(\n isNested ? { crossAxis: -1, mainAxis: 2 } : !getVirtualElement ? 1 : 0,\n ),\n flip({}),\n shift({ limiter: limitShift() }),\n size({\n apply({ elements, availableHeight }) {\n Object.assign(elements.floating.style, {\n maxHeight: `${availableHeight}px`,\n });\n },\n }),\n ],\n });\n\n useIsomorphicLayoutEffect(() => {\n if (getVirtualElement) {\n refs.setPositionReference(getVirtualElement());\n }\n }, [getVirtualElement, refs]);\n\n const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions(\n [\n useHover(context, {\n enabled: isNested && !focusInside,\n handleClose: safePolygon({ blockPointerEvents: true }),\n }),\n useClick(context, {\n event: \"mousedown\",\n toggle: !isNested,\n ignoreMouse: isNested,\n }),\n useRole(context, { role: \"menu\" }),\n useDismiss(context, { bubbles: true }),\n useListNavigation(context, {\n listRef: elementsRef,\n activeIndex,\n nested: isNested,\n onNavigate: setActiveIndex,\n }),\n ],\n );\n\n const getPanelPosition = () => ({\n top: y ?? 0,\n left: x ?? 0,\n position: strategy,\n width: elements.floating?.offsetWidth,\n height: elements.floating?.offsetHeight,\n });\n\n useEffect(() => {\n if (!tree) return;\n\n function handleItemClick() {\n setOpen(false);\n }\n\n tree.events.on(\"click\", handleItemClick);\n\n return () => {\n tree.events.off(\"click\", handleItemClick);\n };\n }, [tree, setOpen]);\n\n return (\n <FloatingNode id={nodeId}>\n <MenuContext.Provider\n value={{\n openState,\n getReferenceProps,\n getFloatingProps,\n refs,\n getPanelPosition,\n getItemProps,\n activeIndex,\n context,\n elementsRef,\n focusInside,\n setFocusInside,\n isNested,\n }}\n >\n {children}\n </MenuContext.Provider>\n </FloatingNode>\n );\n}\n"],"names":["elements"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuContext.js","sources":["../src/menu/MenuContext.ts"],"sourcesContent":["import type { useInteractions } from \"@floating-ui/react\";\nimport {\n type Dispatch,\n type MutableRefObject,\n type SetStateAction,\n useContext,\n} from \"react\";\nimport { type UseFloatingUIReturn, createContext } from \"../utils\";\n\ntype UseInteractionsReturn = ReturnType<typeof useInteractions>;\n\nexport interface MenuContextValue\n extends Pick<\n UseInteractionsReturn,\n \"getItemProps\" | \"getReferenceProps\" | \"getFloatingProps\"\n >,\n Partial<Pick<UseFloatingUIReturn, \"context\" | \"refs\">> {\n openState: boolean;\n activeIndex: number | null;\n getPanelPosition: () => Record<string, unknown>;\n elementsRef: MutableRefObject<(HTMLDivElement | null)[]>;\n focusInside: boolean;\n setFocusInside: Dispatch<SetStateAction<boolean>>;\n isNested: boolean;\n}\n\nexport const MenuContext = createContext<MenuContextValue>(\"MenuContext\", {\n openState: false,\n getReferenceProps: () => ({}),\n getFloatingProps: () => ({}),\n getPanelPosition: () => ({}),\n getItemProps: () => ({}),\n activeIndex: null,\n elementsRef: { current: [] },\n focusInside: false,\n setFocusInside: () => undefined,\n isNested: false,\n});\n\nexport function useMenuContext() {\n return useContext(MenuContext);\n}\n"],"names":[],"mappings":";;;;;;;;;AA0Ba,MAAA,WAAA,GAAc,cAAgC,aAAe,EAAA;AAAA,EACxE,SAAW,EAAA,KAAA;AAAA,EACX,iBAAA,EAAmB,OAAO,EAAC,CAAA;AAAA,EAC3B,gBAAA,EAAkB,OAAO,EAAC,CAAA;AAAA,EAC1B,gBAAA,EAAkB,OAAO,EAAC,CAAA;AAAA,EAC1B,YAAA,EAAc,OAAO,EAAC,CAAA;AAAA,EACtB,WAAa,EAAA,IAAA;AAAA,EACb,WAAa,EAAA,EAAE,OAAS,EAAA,EAAG,EAAA;AAAA,EAC3B,WAAa,EAAA,KAAA;AAAA,EACb,gBAAgB,MAAM,
|
|
1
|
+
{"version":3,"file":"MenuContext.js","sources":["../src/menu/MenuContext.ts"],"sourcesContent":["import type { useInteractions } from \"@floating-ui/react\";\nimport {\n type Dispatch,\n type MutableRefObject,\n type SetStateAction,\n useContext,\n} from \"react\";\nimport { type UseFloatingUIReturn, createContext } from \"../utils\";\n\ntype UseInteractionsReturn = ReturnType<typeof useInteractions>;\n\nexport interface MenuContextValue\n extends Pick<\n UseInteractionsReturn,\n \"getItemProps\" | \"getReferenceProps\" | \"getFloatingProps\"\n >,\n Partial<Pick<UseFloatingUIReturn, \"context\" | \"refs\">> {\n openState: boolean;\n activeIndex: number | null;\n getPanelPosition: () => Record<string, unknown>;\n elementsRef: MutableRefObject<(HTMLDivElement | null)[]>;\n focusInside: boolean;\n setFocusInside: Dispatch<SetStateAction<boolean>>;\n isNested: boolean;\n}\n\nexport const MenuContext = createContext<MenuContextValue>(\"MenuContext\", {\n openState: false,\n getReferenceProps: () => ({}),\n getFloatingProps: () => ({}),\n getPanelPosition: () => ({}),\n getItemProps: () => ({}),\n activeIndex: null,\n elementsRef: { current: [] },\n focusInside: false,\n setFocusInside: () => undefined,\n isNested: false,\n});\n\nexport function useMenuContext() {\n return useContext(MenuContext);\n}\n"],"names":[],"mappings":";;;;;;;;;AA0Ba,MAAA,WAAA,GAAc,cAAgC,aAAe,EAAA;AAAA,EACxE,SAAW,EAAA,KAAA;AAAA,EACX,iBAAA,EAAmB,OAAO,EAAC,CAAA;AAAA,EAC3B,gBAAA,EAAkB,OAAO,EAAC,CAAA;AAAA,EAC1B,gBAAA,EAAkB,OAAO,EAAC,CAAA;AAAA,EAC1B,YAAA,EAAc,OAAO,EAAC,CAAA;AAAA,EACtB,WAAa,EAAA,IAAA;AAAA,EACb,WAAa,EAAA,EAAE,OAAS,EAAA,EAAG,EAAA;AAAA,EAC3B,WAAa,EAAA,KAAA;AAAA,EACb,gBAAgB,MAAM,MAAA;AAAA,EACtB,QAAU,EAAA;AACZ,CAAC;AAEM,SAAS,cAAiB,GAAA;AAC/B,EAAA,OAAO,WAAW,WAAW,CAAA;AAC/B;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuGroup.js","sources":["../src/menu/MenuGroup.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n type ReactNode,\n forwardRef,\n} from \"react\";\nimport { makePrefixer, useId } from \"../utils\";\nimport menuGroupCss from \"./MenuGroup.css\";\n\nexport interface MenuGroupProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * The label of the menu group.\n */\n label?: string;\n /**\n * Menus to be rendered inside the menu group.\n */\n children?: ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltMenuGroup\");\n\nexport const MenuGroup = forwardRef<HTMLDivElement, MenuGroupProps>(\n function MenuGroup(props, ref) {\n const { className, children, label, ...rest } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-menu-group\",\n css: menuGroupCss,\n window: targetWindow,\n });\n\n const labelId = useId();\n\n return (\n <div\n aria-labelledby={label ? labelId : undefined}\n className={clsx(withBaseName(), className)}\n role=\"group\"\n ref={ref}\n {...rest}\n >\n {label && (\n <div aria-hidden className={withBaseName(\"label\")} id={labelId}>\n {label}\n </div>\n )}\n {children}\n </div>\n );\n },\n);\n"],"names":["MenuGroup","menuGroupCss"],"mappings":";;;;;;;;;;;;AAsBA,MAAM,YAAA,GAAe,aAAa,eAAe,CAAA;AAE1C,MAAM,SAAY,GAAA,UAAA;AAAA,EACvB,SAASA,UAAU,CAAA,KAAA,EAAO,GAAK,EAAA;AAC7B,IAAA,MAAM,EAAE,SAAW,EAAA,QAAA,EAAU,KAAO,EAAA,GAAG,MAAS,GAAA,KAAA;AAEhD,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,iBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAA,MAAM,UAAU,KAAM,EAAA;AAEtB,IACE,uBAAA,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,iBAAA,EAAiB,QAAQ,OAAU,GAAA,
|
|
1
|
+
{"version":3,"file":"MenuGroup.js","sources":["../src/menu/MenuGroup.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n type ReactNode,\n forwardRef,\n} from \"react\";\nimport { makePrefixer, useId } from \"../utils\";\nimport menuGroupCss from \"./MenuGroup.css\";\n\nexport interface MenuGroupProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * The label of the menu group.\n */\n label?: string;\n /**\n * Menus to be rendered inside the menu group.\n */\n children?: ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltMenuGroup\");\n\nexport const MenuGroup = forwardRef<HTMLDivElement, MenuGroupProps>(\n function MenuGroup(props, ref) {\n const { className, children, label, ...rest } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-menu-group\",\n css: menuGroupCss,\n window: targetWindow,\n });\n\n const labelId = useId();\n\n return (\n <div\n aria-labelledby={label ? labelId : undefined}\n className={clsx(withBaseName(), className)}\n role=\"group\"\n ref={ref}\n {...rest}\n >\n {label && (\n <div aria-hidden className={withBaseName(\"label\")} id={labelId}>\n {label}\n </div>\n )}\n {children}\n </div>\n );\n },\n);\n"],"names":["MenuGroup","menuGroupCss"],"mappings":";;;;;;;;;;;;AAsBA,MAAM,YAAA,GAAe,aAAa,eAAe,CAAA;AAE1C,MAAM,SAAY,GAAA,UAAA;AAAA,EACvB,SAASA,UAAU,CAAA,KAAA,EAAO,GAAK,EAAA;AAC7B,IAAA,MAAM,EAAE,SAAW,EAAA,QAAA,EAAU,KAAO,EAAA,GAAG,MAAS,GAAA,KAAA;AAEhD,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,iBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAA,MAAM,UAAU,KAAM,EAAA;AAEtB,IACE,uBAAA,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,iBAAA,EAAiB,QAAQ,OAAU,GAAA,MAAA;AAAA,QACnC,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QACzC,IAAK,EAAA,OAAA;AAAA,QACL,GAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UACC,KAAA,oBAAA,GAAA,CAAC,KAAI,EAAA,EAAA,aAAA,EAAW,IAAC,EAAA,SAAA,EAAW,aAAa,OAAO,CAAA,EAAG,EAAI,EAAA,OAAA,EACpD,QACH,EAAA,KAAA,EAAA,CAAA;AAAA,UAED;AAAA;AAAA;AAAA,KACH;AAAA;AAGN;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuItem.js","sources":["../src/menu/MenuItem.tsx"],"sourcesContent":["import { useFloatingTree, useListItem } from \"@floating-ui/react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n type FocusEvent,\n type KeyboardEvent,\n type MouseEvent,\n forwardRef,\n} from \"react\";\nimport { makePrefixer, useForkRef } from \"../utils\";\n\nimport { useIcon } from \"../semantic-icon-provider\";\nimport menuItemCss from \"./MenuItem.css\";\nimport { useMenuPanelContext } from \"./MenuPanelContext\";\nimport { useIsMenuTrigger } from \"./MenuTriggerContext\";\nexport interface MenuItemProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * If `true`, the item will be disabled.\n */\n disabled?: boolean;\n}\n\nconst withBaseName = makePrefixer(\"saltMenuItem\");\n\nexport const MenuItem = forwardRef<HTMLDivElement, MenuItemProps>(\n function MenuItem(props, ref) {\n const {\n children,\n className,\n disabled,\n onClick,\n onFocus,\n onKeyDown,\n ...rest\n } = props;\n\n const { triggersSubmenu, blurActive } = useIsMenuTrigger();\n const { ExpandGroupIcon } = useIcon();\n const { activeIndex, getItemProps, setFocusInside } = useMenuPanelContext();\n const item = useListItem();\n const tree = useFloatingTree();\n const active = item.index === activeIndex;\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-menu-item\",\n css: menuItemCss,\n window: targetWindow,\n });\n const handleRef = useForkRef<HTMLDivElement>(ref, item.ref);\n return (\n <div\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"blurActive\")]: blurActive,\n },\n className,\n )}\n role=\"menuitem\"\n aria-disabled={disabled || undefined}\n {...getItemProps({\n tabIndex: disabled ? undefined : active ? 0 : -1,\n onKeyDown(event: KeyboardEvent<HTMLDivElement>) {\n const element = event.currentTarget;\n onKeyDown?.(event);\n if (\n (event.key === \" \" || event.key === \"Enter\") &&\n !triggersSubmenu &&\n !disabled\n ) {\n event.preventDefault();\n const { view, ...eventInit } = event;\n queueMicrotask(() => {\n element.dispatchEvent(\n new window.MouseEvent(\"click\", eventInit),\n );\n });\n tree?.events.emit(\"click\");\n }\n },\n onClick(event: MouseEvent<HTMLDivElement>) {\n if (!disabled) {\n onClick?.(event);\n if (!triggersSubmenu) {\n tree?.events.emit(\"click\");\n }\n }\n },\n onFocus(event: FocusEvent<HTMLDivElement>) {\n onFocus?.(event);\n setFocusInside(true);\n },\n ...rest,\n })}\n ref={handleRef}\n >\n {children}\n {triggersSubmenu && (\n <ExpandGroupIcon className={withBaseName(\"expandIcon\")} aria-hidden />\n )}\n </div>\n );\n },\n);\n"],"names":["MenuItem","menuItemCss"],"mappings":";;;;;;;;;;;;;;;;;AAwBA,MAAM,YAAA,GAAe,aAAa,cAAc,CAAA;AAEzC,MAAM,QAAW,GAAA,UAAA;AAAA,EACtB,SAASA,SAAS,CAAA,KAAA,EAAO,GAAK,EAAA;AAC5B,IAAM,MAAA;AAAA,MACJ,QAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAA;AAAA,MACA,OAAA;AAAA,MACA,OAAA;AAAA,MACA,SAAA;AAAA,MACA,GAAG;AAAA,KACD,GAAA,KAAA;AAEJ,IAAA,MAAM,EAAE,eAAA,EAAiB,UAAW,EAAA,GAAI,gBAAiB,EAAA;AACzD,IAAM,MAAA,EAAE,eAAgB,EAAA,GAAI,OAAQ,EAAA;AACpC,IAAA,MAAM,EAAE,WAAA,EAAa,YAAc,EAAA,cAAA,KAAmB,mBAAoB,EAAA;AAC1E,IAAA,MAAM,OAAO,WAAY,EAAA;AACzB,IAAA,MAAM,OAAO,eAAgB,EAAA;AAC7B,IAAM,MAAA,MAAA,GAAS,KAAK,KAAU,KAAA,WAAA;AAC9B,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,gBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AACD,IAAA,MAAM,SAAY,GAAA,UAAA,CAA2B,GAAK,EAAA,IAAA,CAAK,GAAG,CAAA;AAC1D,IACE,uBAAA,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAA,IAAA;AAAA,UACT,YAAa,EAAA;AAAA,UACb;AAAA,YACE,CAAC,YAAA,CAAa,YAAY,CAAC,GAAG;AAAA,WAChC;AAAA,UACA;AAAA,SACF;AAAA,QACA,IAAK,EAAA,UAAA;AAAA,QACL,iBAAe,QAAY,IAAA,
|
|
1
|
+
{"version":3,"file":"MenuItem.js","sources":["../src/menu/MenuItem.tsx"],"sourcesContent":["import { useFloatingTree, useListItem } from \"@floating-ui/react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n type FocusEvent,\n type KeyboardEvent,\n type MouseEvent,\n forwardRef,\n} from \"react\";\nimport { makePrefixer, useForkRef } from \"../utils\";\n\nimport { useIcon } from \"../semantic-icon-provider\";\nimport menuItemCss from \"./MenuItem.css\";\nimport { useMenuPanelContext } from \"./MenuPanelContext\";\nimport { useIsMenuTrigger } from \"./MenuTriggerContext\";\nexport interface MenuItemProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * If `true`, the item will be disabled.\n */\n disabled?: boolean;\n}\n\nconst withBaseName = makePrefixer(\"saltMenuItem\");\n\nexport const MenuItem = forwardRef<HTMLDivElement, MenuItemProps>(\n function MenuItem(props, ref) {\n const {\n children,\n className,\n disabled,\n onClick,\n onFocus,\n onKeyDown,\n ...rest\n } = props;\n\n const { triggersSubmenu, blurActive } = useIsMenuTrigger();\n const { ExpandGroupIcon } = useIcon();\n const { activeIndex, getItemProps, setFocusInside } = useMenuPanelContext();\n const item = useListItem();\n const tree = useFloatingTree();\n const active = item.index === activeIndex;\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-menu-item\",\n css: menuItemCss,\n window: targetWindow,\n });\n const handleRef = useForkRef<HTMLDivElement>(ref, item.ref);\n return (\n <div\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"blurActive\")]: blurActive,\n },\n className,\n )}\n role=\"menuitem\"\n aria-disabled={disabled || undefined}\n {...getItemProps({\n tabIndex: disabled ? undefined : active ? 0 : -1,\n onKeyDown(event: KeyboardEvent<HTMLDivElement>) {\n const element = event.currentTarget;\n onKeyDown?.(event);\n if (\n (event.key === \" \" || event.key === \"Enter\") &&\n !triggersSubmenu &&\n !disabled\n ) {\n event.preventDefault();\n const { view, ...eventInit } = event;\n queueMicrotask(() => {\n element.dispatchEvent(\n new window.MouseEvent(\"click\", eventInit),\n );\n });\n tree?.events.emit(\"click\");\n }\n },\n onClick(event: MouseEvent<HTMLDivElement>) {\n if (!disabled) {\n onClick?.(event);\n if (!triggersSubmenu) {\n tree?.events.emit(\"click\");\n }\n }\n },\n onFocus(event: FocusEvent<HTMLDivElement>) {\n onFocus?.(event);\n setFocusInside(true);\n },\n ...rest,\n })}\n ref={handleRef}\n >\n {children}\n {triggersSubmenu && (\n <ExpandGroupIcon className={withBaseName(\"expandIcon\")} aria-hidden />\n )}\n </div>\n );\n },\n);\n"],"names":["MenuItem","menuItemCss"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuPanel.js","sources":["../src/menu/MenuPanel.tsx"],"sourcesContent":["import { FloatingList } from \"@floating-ui/react\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n type ReactNode,\n forwardRef,\n} from \"react\";\nimport { makePrefixer, useFloatingComponent, useForkRef } from \"../utils\";\nimport { useMenuContext } from \"./MenuContext\";\nimport { MenuPanelBase } from \"./MenuPanelBase\";\nimport { MenuPanelContext } from \"./MenuPanelContext\";\n\nexport interface MenuPanelProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * The content of the menu panel.\n */\n children?: ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltMenuPanel\");\n\nexport const MenuPanel = forwardRef<HTMLDivElement, MenuPanelProps>(\n function MenuPanel(props, ref) {\n const { children, className, ...rest } = props;\n const { Component: FloatingComponent } = useFloatingComponent();\n\n const {\n getItemProps,\n openState,\n getFloatingProps,\n refs,\n getPanelPosition,\n context,\n elementsRef,\n activeIndex,\n setFocusInside,\n isNested,\n } = useMenuContext();\n\n const handleRef = useForkRef<HTMLDivElement>(ref, refs?.setFloating);\n\n return (\n <MenuPanelContext.Provider\n value={{ activeIndex, getItemProps, setFocusInside }}\n >\n <FloatingList elementsRef={elementsRef}>\n <FloatingComponent\n open={openState}\n role=\"menu\"\n {...getFloatingProps()}\n {...getPanelPosition()}\n className={clsx(withBaseName(), className)}\n focusManagerProps={\n context\n ? {\n context,\n initialFocus: isNested ? -1 : 0,\n returnFocus: !isNested,\n modal: false,\n }\n : undefined\n }\n tabIndex={-1}\n ref={handleRef}\n {...rest}\n >\n <MenuPanelBase>{children}</MenuPanelBase>\n </FloatingComponent>\n </FloatingList>\n </MenuPanelContext.Provider>\n );\n },\n);\n"],"names":["MenuPanel"],"mappings":";;;;;;;;;;;;;;AAmBA,MAAM,YAAA,GAAe,aAAa,eAAe,CAAA;AAE1C,MAAM,SAAY,GAAA,UAAA;AAAA,EACvB,SAASA,UAAU,CAAA,KAAA,EAAO,GAAK,EAAA;AAC7B,IAAA,MAAM,EAAE,QAAA,EAAU,SAAW,EAAA,GAAG,MAAS,GAAA,KAAA;AACzC,IAAA,MAAM,EAAE,SAAA,EAAW,iBAAkB,EAAA,GAAI,oBAAqB,EAAA;AAE9D,IAAM,MAAA;AAAA,MACJ,YAAA;AAAA,MACA,SAAA;AAAA,MACA,gBAAA;AAAA,MACA,IAAA;AAAA,MACA,gBAAA;AAAA,MACA,OAAA;AAAA,MACA,WAAA;AAAA,MACA,WAAA;AAAA,MACA,cAAA;AAAA,MACA;AAAA,QACE,cAAe,EAAA;AAEnB,IAAA,MAAM,SAAY,GAAA,UAAA,CAA2B,GAAK,EAAA,IAAA,IAAA,IAAA,GAAA,
|
|
1
|
+
{"version":3,"file":"MenuPanel.js","sources":["../src/menu/MenuPanel.tsx"],"sourcesContent":["import { FloatingList } from \"@floating-ui/react\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n type ReactNode,\n forwardRef,\n} from \"react\";\nimport { makePrefixer, useFloatingComponent, useForkRef } from \"../utils\";\nimport { useMenuContext } from \"./MenuContext\";\nimport { MenuPanelBase } from \"./MenuPanelBase\";\nimport { MenuPanelContext } from \"./MenuPanelContext\";\n\nexport interface MenuPanelProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * The content of the menu panel.\n */\n children?: ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltMenuPanel\");\n\nexport const MenuPanel = forwardRef<HTMLDivElement, MenuPanelProps>(\n function MenuPanel(props, ref) {\n const { children, className, ...rest } = props;\n const { Component: FloatingComponent } = useFloatingComponent();\n\n const {\n getItemProps,\n openState,\n getFloatingProps,\n refs,\n getPanelPosition,\n context,\n elementsRef,\n activeIndex,\n setFocusInside,\n isNested,\n } = useMenuContext();\n\n const handleRef = useForkRef<HTMLDivElement>(ref, refs?.setFloating);\n\n return (\n <MenuPanelContext.Provider\n value={{ activeIndex, getItemProps, setFocusInside }}\n >\n <FloatingList elementsRef={elementsRef}>\n <FloatingComponent\n open={openState}\n role=\"menu\"\n {...getFloatingProps()}\n {...getPanelPosition()}\n className={clsx(withBaseName(), className)}\n focusManagerProps={\n context\n ? {\n context,\n initialFocus: isNested ? -1 : 0,\n returnFocus: !isNested,\n modal: false,\n }\n : undefined\n }\n tabIndex={-1}\n ref={handleRef}\n {...rest}\n >\n <MenuPanelBase>{children}</MenuPanelBase>\n </FloatingComponent>\n </FloatingList>\n </MenuPanelContext.Provider>\n );\n },\n);\n"],"names":["MenuPanel"],"mappings":";;;;;;;;;;;;;;AAmBA,MAAM,YAAA,GAAe,aAAa,eAAe,CAAA;AAE1C,MAAM,SAAY,GAAA,UAAA;AAAA,EACvB,SAASA,UAAU,CAAA,KAAA,EAAO,GAAK,EAAA;AAC7B,IAAA,MAAM,EAAE,QAAA,EAAU,SAAW,EAAA,GAAG,MAAS,GAAA,KAAA;AACzC,IAAA,MAAM,EAAE,SAAA,EAAW,iBAAkB,EAAA,GAAI,oBAAqB,EAAA;AAE9D,IAAM,MAAA;AAAA,MACJ,YAAA;AAAA,MACA,SAAA;AAAA,MACA,gBAAA;AAAA,MACA,IAAA;AAAA,MACA,gBAAA;AAAA,MACA,OAAA;AAAA,MACA,WAAA;AAAA,MACA,WAAA;AAAA,MACA,cAAA;AAAA,MACA;AAAA,QACE,cAAe,EAAA;AAEnB,IAAA,MAAM,SAAY,GAAA,UAAA,CAA2B,GAAK,EAAA,IAAA,IAAA,IAAA,GAAA,MAAA,GAAA,IAAA,CAAM,WAAW,CAAA;AAEnE,IACE,uBAAA,GAAA;AAAA,MAAC,gBAAiB,CAAA,QAAA;AAAA,MAAjB;AAAA,QACC,KAAO,EAAA,EAAE,WAAa,EAAA,YAAA,EAAc,cAAe,EAAA;AAAA,QAEnD,QAAA,kBAAA,GAAA,CAAC,gBAAa,WACZ,EAAA,QAAA,kBAAA,GAAA;AAAA,UAAC,iBAAA;AAAA,UAAA;AAAA,YACC,IAAM,EAAA,SAAA;AAAA,YACN,IAAK,EAAA,MAAA;AAAA,YACJ,GAAG,gBAAiB,EAAA;AAAA,YACpB,GAAG,gBAAiB,EAAA;AAAA,YACrB,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,YACzC,mBACE,OACI,GAAA;AAAA,cACE,OAAA;AAAA,cACA,YAAA,EAAc,WAAW,EAAK,GAAA,CAAA;AAAA,cAC9B,aAAa,CAAC,QAAA;AAAA,cACd,KAAO,EAAA;AAAA,aAET,GAAA,MAAA;AAAA,YAEN,QAAU,EAAA,EAAA;AAAA,YACV,GAAK,EAAA,SAAA;AAAA,YACJ,GAAG,IAAA;AAAA,YAEJ,QAAA,kBAAA,GAAA,CAAC,iBAAe,QAAS,EAAA;AAAA;AAAA,SAE7B,EAAA;AAAA;AAAA,KACF;AAAA;AAGN;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuPanelContext.js","sources":["../src/menu/MenuPanelContext.ts"],"sourcesContent":["import { useContext } from \"react\";\nimport { createContext } from \"../utils\";\nimport type { MenuContextValue } from \"./MenuContext\";\n\nexport interface MenuPanelContextValue\n extends Pick<\n MenuContextValue,\n \"getItemProps\" | \"activeIndex\" | \"setFocusInside\"\n > {}\n\nexport const MenuPanelContext = createContext<MenuPanelContextValue>(\n \"MenuPanelContext\",\n {\n activeIndex: null,\n getItemProps: () => ({}),\n setFocusInside: () => undefined,\n },\n);\n\nexport function useMenuPanelContext() {\n return useContext(MenuPanelContext);\n}\n"],"names":[],"mappings":";;;;;;;;;AAUO,MAAM,gBAAmB,GAAA,aAAA;AAAA,EAC9B,kBAAA;AAAA,EACA;AAAA,IACE,WAAa,EAAA,IAAA;AAAA,IACb,YAAA,EAAc,OAAO,EAAC,CAAA;AAAA,IACtB,gBAAgB,MAAM
|
|
1
|
+
{"version":3,"file":"MenuPanelContext.js","sources":["../src/menu/MenuPanelContext.ts"],"sourcesContent":["import { useContext } from \"react\";\nimport { createContext } from \"../utils\";\nimport type { MenuContextValue } from \"./MenuContext\";\n\nexport interface MenuPanelContextValue\n extends Pick<\n MenuContextValue,\n \"getItemProps\" | \"activeIndex\" | \"setFocusInside\"\n > {}\n\nexport const MenuPanelContext = createContext<MenuPanelContextValue>(\n \"MenuPanelContext\",\n {\n activeIndex: null,\n getItemProps: () => ({}),\n setFocusInside: () => undefined,\n },\n);\n\nexport function useMenuPanelContext() {\n return useContext(MenuPanelContext);\n}\n"],"names":[],"mappings":";;;;;;;;;AAUO,MAAM,gBAAmB,GAAA,aAAA;AAAA,EAC9B,kBAAA;AAAA,EACA;AAAA,IACE,WAAa,EAAA,IAAA;AAAA,IACb,YAAA,EAAc,OAAO,EAAC,CAAA;AAAA,IACtB,gBAAgB,MAAM;AAAA;AAE1B;AAEO,SAAS,mBAAsB,GAAA;AACpC,EAAA,OAAO,WAAW,gBAAgB,CAAA;AACpC;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuTrigger.js","sources":["../src/menu/MenuTrigger.tsx"],"sourcesContent":["import { type ReactNode, cloneElement, isValidElement } from \"react\";\nimport { getRefFromChildren, mergeProps, useForkRef } from \"../utils\";\nimport { useMenuContext } from \"./MenuContext\";\nimport { useMenuPanelContext } from \"./MenuPanelContext\";\nimport { MenuTriggerContext } from \"./MenuTriggerContext\";\n\nexport interface MenuTriggerProps {\n /**\n * The trigger element for the menu. This should be a single child element and accept a ref.\n */\n children?: ReactNode;\n}\n\nexport function MenuTrigger(props: MenuTriggerProps) {\n const { children } = props;\n\n const { getReferenceProps, refs, setFocusInside, focusInside, openState } =\n useMenuContext();\n const { setFocusInside: setFocusInsideParent } = useMenuPanelContext();\n\n const handleRef = useForkRef(\n getRefFromChildren(children),\n refs?.setReference,\n );\n\n if (!children || !isValidElement(children)) {\n // Should we log or throw error?\n return <>{children}</>;\n }\n\n return (\n <MenuTriggerContext.Provider\n value={{ triggersSubmenu: true, blurActive: focusInside && openState }}\n >\n {cloneElement(children, {\n ...mergeProps(\n getReferenceProps({\n onFocus() {\n setFocusInsideParent(true);\n setFocusInside(false);\n },\n }),\n children.props,\n ),\n ref: handleRef,\n })}\n </MenuTriggerContext.Provider>\n );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;AAaO,SAAS,YAAY,KAAyB,EAAA;AACnD,EAAM,MAAA,EAAE,UAAa,GAAA,KAAA;AAErB,EAAA,MAAM,EAAE,iBAAmB,EAAA,IAAA,EAAM,gBAAgB,WAAa,EAAA,SAAA,KAC5D,cAAe,EAAA;AACjB,EAAA,MAAM,EAAE,cAAA,EAAgB,oBAAqB,EAAA,GAAI,mBAAoB,EAAA;AAErE,EAAA,MAAM,SAAY,GAAA,UAAA;AAAA,IAChB,mBAAmB,QAAQ,CAAA;AAAA,IAC3B,IAAM,IAAA,IAAA,GAAA,
|
|
1
|
+
{"version":3,"file":"MenuTrigger.js","sources":["../src/menu/MenuTrigger.tsx"],"sourcesContent":["import { type ReactNode, cloneElement, isValidElement } from \"react\";\nimport { getRefFromChildren, mergeProps, useForkRef } from \"../utils\";\nimport { useMenuContext } from \"./MenuContext\";\nimport { useMenuPanelContext } from \"./MenuPanelContext\";\nimport { MenuTriggerContext } from \"./MenuTriggerContext\";\n\nexport interface MenuTriggerProps {\n /**\n * The trigger element for the menu. This should be a single child element and accept a ref.\n */\n children?: ReactNode;\n}\n\nexport function MenuTrigger(props: MenuTriggerProps) {\n const { children } = props;\n\n const { getReferenceProps, refs, setFocusInside, focusInside, openState } =\n useMenuContext();\n const { setFocusInside: setFocusInsideParent } = useMenuPanelContext();\n\n const handleRef = useForkRef(\n getRefFromChildren(children),\n refs?.setReference,\n );\n\n if (!children || !isValidElement(children)) {\n // Should we log or throw error?\n return <>{children}</>;\n }\n\n return (\n <MenuTriggerContext.Provider\n value={{ triggersSubmenu: true, blurActive: focusInside && openState }}\n >\n {cloneElement(children, {\n ...mergeProps(\n getReferenceProps({\n onFocus() {\n setFocusInsideParent(true);\n setFocusInside(false);\n },\n }),\n children.props,\n ),\n ref: handleRef,\n })}\n </MenuTriggerContext.Provider>\n );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;AAaO,SAAS,YAAY,KAAyB,EAAA;AACnD,EAAM,MAAA,EAAE,UAAa,GAAA,KAAA;AAErB,EAAA,MAAM,EAAE,iBAAmB,EAAA,IAAA,EAAM,gBAAgB,WAAa,EAAA,SAAA,KAC5D,cAAe,EAAA;AACjB,EAAA,MAAM,EAAE,cAAA,EAAgB,oBAAqB,EAAA,GAAI,mBAAoB,EAAA;AAErE,EAAA,MAAM,SAAY,GAAA,UAAA;AAAA,IAChB,mBAAmB,QAAQ,CAAA;AAAA,IAC3B,IAAM,IAAA,IAAA,GAAA,MAAA,GAAA,IAAA,CAAA;AAAA,GACR;AAEA,EAAA,IAAI,CAAC,QAAA,IAAY,CAAC,cAAA,CAAe,QAAQ,CAAG,EAAA;AAE1C,IAAA,uCAAU,QAAS,EAAA,CAAA;AAAA;AAGrB,EACE,uBAAA,GAAA;AAAA,IAAC,kBAAmB,CAAA,QAAA;AAAA,IAAnB;AAAA,MACC,OAAO,EAAE,eAAA,EAAiB,IAAM,EAAA,UAAA,EAAY,eAAe,SAAU,EAAA;AAAA,MAEpE,uBAAa,QAAU,EAAA;AAAA,QACtB,GAAG,UAAA;AAAA,UACD,iBAAkB,CAAA;AAAA,YAChB,OAAU,GAAA;AACR,cAAA,oBAAA,CAAqB,IAAI,CAAA;AACzB,cAAA,cAAA,CAAe,KAAK,CAAA;AAAA;AACtB,WACD,CAAA;AAAA,UACD,QAAS,CAAA;AAAA,SACX;AAAA,QACA,GAAK,EAAA;AAAA,OACN;AAAA;AAAA,GACH;AAEJ;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MultilineInput.js","sources":["../src/multiline-input/MultilineInput.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ChangeEvent,\n type ComponentPropsWithoutRef,\n type FocusEvent,\n type ReactNode,\n type Ref,\n type TextareaHTMLAttributes,\n forwardRef,\n useCallback,\n useLayoutEffect,\n useRef,\n useState,\n} from \"react\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { StatusAdornment } from \"../status-adornment\";\nimport type { DataAttributes } from \"../types\";\nimport { makePrefixer, useControlled, useForkRef } from \"../utils\";\n\nimport multilineInputCss from \"./MultilineInput.css\";\n\nconst withBaseName = makePrefixer(\"saltMultilineInput\");\n\nexport interface MultilineInputProps\n extends Omit<ComponentPropsWithoutRef<\"div\">, \"defaultValue\">,\n Pick<\n ComponentPropsWithoutRef<\"textarea\">,\n \"disabled\" | \"value\" | \"defaultValue\" | \"placeholder\"\n > {\n /**\n * Styling variant with full border. Defaults to false\n */\n bordered?: boolean;\n /**\n * End adornment component\n */\n endAdornment?: ReactNode;\n /**\n * If `true`, the component is read only.\n */\n readOnly?: boolean;\n /**\n * The default minimum number of rows. Defaults to 3\n */\n rows?: number;\n /**\n * Start adornment component\n */\n startAdornment?: ReactNode;\n /**\n * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#Attributes) applied to the `textarea` element.\n */\n textAreaProps?: Partial<TextareaHTMLAttributes<HTMLTextAreaElement>> &\n DataAttributes;\n /**\n * Optional ref for the textarea component\n */\n textAreaRef?: Ref<HTMLTextAreaElement>;\n /**\n * Validation status.\n */\n validationStatus?: \"error\" | \"warning\" | \"success\";\n /**\n * Styling variant. Defaults to \"primary\".\n */\n variant?: \"primary\" | \"secondary\";\n}\n\nexport const MultilineInput = forwardRef<HTMLDivElement, MultilineInputProps>(\n function MultilineInput(\n {\n \"aria-activedescendant\": ariaActiveDescendant,\n \"aria-expanded\": ariaExpanded,\n \"aria-owns\": ariaOwns,\n bordered = false,\n className: classNameProp,\n disabled,\n endAdornment,\n id,\n placeholder,\n readOnly,\n role,\n rows = 3,\n startAdornment,\n style,\n textAreaProps = {},\n textAreaRef,\n value: valueProp,\n defaultValue: defaultValueProp = valueProp === undefined ? \"\" : undefined,\n validationStatus: validationStatusProp,\n variant = \"primary\",\n ...other\n },\n ref,\n ) {\n const inputRef = useRef<HTMLTextAreaElement>(null);\n const handleRef = useForkRef(inputRef, textAreaRef);\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-multiline-input\",\n css: multilineInputCss,\n window: targetWindow,\n });\n\n const restA11yProps = {\n \"aria-activedescendant\": ariaActiveDescendant,\n \"aria-expanded\": ariaExpanded,\n \"aria-owns\": ariaOwns,\n };\n\n const [focused, setFocused] = useState(false);\n\n const {\n \"aria-describedby\": textAreaDescribedBy,\n \"aria-labelledby\": textAreaLabelledBy,\n onBlur,\n onChange,\n onFocus,\n required: textAreaRequired,\n ...restTextAreaProps\n } = textAreaProps;\n\n const {\n a11yProps: {\n \"aria-describedby\": formFieldDescribedBy,\n \"aria-labelledby\": formFieldLabelledBy,\n } = {},\n disabled: formFieldDisabled,\n readOnly: formFieldReadOnly,\n necessity: formFieldRequired,\n validationStatus: formFieldValidationStatus,\n } = useFormFieldProps();\n\n const isDisabled = disabled || formFieldDisabled;\n const isReadOnly = readOnly || formFieldReadOnly;\n const validationStatus = formFieldValidationStatus ?? validationStatusProp;\n const isRequired = formFieldRequired\n ? [\"required\", \"asterisk\"].includes(formFieldRequired)\n : textAreaRequired;\n\n const [value, setValue] = useControlled({\n controlled: valueProp,\n default: defaultValueProp,\n name: \"MultilineInput\",\n state: \"value\",\n });\n\n const previousHeight = useRef<string | undefined>(undefined);\n const input = inputRef.current;\n\n const changeHeight = useCallback(() => {\n if (!input) return;\n const hasBeenManuallyResized =\n previousHeight.current !== undefined &&\n input.style.height !== previousHeight.current;\n if (!hasBeenManuallyResized) {\n const previousOverflow = input.style.overflow;\n input.style.overflow = \"hidden\";\n input.style.height = \"auto\";\n input.scrollHeight; // Needed to work around Firefox bug. https://bugzilla.mozilla.org/show_bug.cgi?id=1787062\n const newHeight = `${\n input.scrollHeight + (input.offsetHeight - input.clientHeight)\n }px`;\n input.style.height = newHeight;\n previousHeight.current = newHeight;\n input.style.overflow = previousOverflow;\n }\n }, [input]);\n\n const handleChange = (event: ChangeEvent<HTMLTextAreaElement>) => {\n const value = event.target.value;\n setValue(value);\n onChange?.(event);\n changeHeight();\n };\n\n useLayoutEffect(() => {\n changeHeight();\n }, [value, changeHeight]);\n\n const handleBlur = (event: FocusEvent<HTMLTextAreaElement>) => {\n onBlur?.(event);\n setFocused(false);\n };\n\n const handleFocus = (event: FocusEvent<HTMLTextAreaElement>) => {\n onFocus?.(event);\n setFocused(true);\n };\n\n const multilineInputStyles = {\n \"--saltMultilineInput-rows\": rows,\n ...style,\n };\n\n return (\n <div\n className={clsx(\n withBaseName(),\n withBaseName(variant),\n {\n [withBaseName(\"withAdornmentRow\")]: endAdornment,\n [withBaseName(\"bordered\")]: bordered,\n [withBaseName(\"focused\")]: !isDisabled && focused,\n [withBaseName(\"disabled\")]: isDisabled,\n [withBaseName(\"readOnly\")]: isReadOnly,\n [withBaseName(validationStatus ?? \"\")]: validationStatus,\n },\n classNameProp,\n )}\n ref={ref}\n style={multilineInputStyles}\n {...other}\n >\n {startAdornment && (\n <div className={withBaseName(\"startAdornmentContainer\")}>\n {startAdornment}\n </div>\n )}\n <textarea\n aria-describedby={clsx(formFieldDescribedBy, textAreaDescribedBy)}\n aria-labelledby={clsx(formFieldLabelledBy, textAreaLabelledBy)}\n className={clsx(withBaseName(\"textarea\"), textAreaProps?.className)}\n disabled={isDisabled}\n id={id}\n readOnly={isReadOnly}\n ref={handleRef}\n required={isRequired}\n role={role}\n rows={rows}\n tabIndex={isDisabled ? -1 : 0}\n onBlur={handleBlur}\n onChange={handleChange}\n onFocus={!isDisabled ? handleFocus : undefined}\n placeholder={placeholder}\n value={value}\n {...restA11yProps}\n {...restTextAreaProps}\n />\n <div className={withBaseName(\"suffixAdornments\")}>\n {!isDisabled && validationStatus && (\n <div className={withBaseName(\"statusAdornmentContainer\")}>\n <StatusAdornment status={validationStatus} />\n </div>\n )}\n {endAdornment && (\n <div className={withBaseName(\"endAdornmentContainer\")}>\n {endAdornment}\n </div>\n )}\n </div>\n <div className={withBaseName(\"activationIndicator\")} />\n </div>\n );\n },\n);\n"],"names":["MultilineInput","multilineInputCss","value"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"MultilineInput.js","sources":["../src/multiline-input/MultilineInput.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ChangeEvent,\n type ComponentPropsWithoutRef,\n type FocusEvent,\n type ReactNode,\n type Ref,\n type TextareaHTMLAttributes,\n forwardRef,\n useCallback,\n useLayoutEffect,\n useRef,\n useState,\n} from \"react\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { StatusAdornment } from \"../status-adornment\";\nimport type { DataAttributes } from \"../types\";\nimport { makePrefixer, useControlled, useForkRef } from \"../utils\";\n\nimport multilineInputCss from \"./MultilineInput.css\";\n\nconst withBaseName = makePrefixer(\"saltMultilineInput\");\n\nexport interface MultilineInputProps\n extends Omit<ComponentPropsWithoutRef<\"div\">, \"defaultValue\">,\n Pick<\n ComponentPropsWithoutRef<\"textarea\">,\n \"disabled\" | \"value\" | \"defaultValue\" | \"placeholder\"\n > {\n /**\n * Styling variant with full border. Defaults to false\n */\n bordered?: boolean;\n /**\n * End adornment component\n */\n endAdornment?: ReactNode;\n /**\n * If `true`, the component is read only.\n */\n readOnly?: boolean;\n /**\n * The default minimum number of rows. Defaults to 3\n */\n rows?: number;\n /**\n * Start adornment component\n */\n startAdornment?: ReactNode;\n /**\n * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#Attributes) applied to the `textarea` element.\n */\n textAreaProps?: Partial<TextareaHTMLAttributes<HTMLTextAreaElement>> &\n DataAttributes;\n /**\n * Optional ref for the textarea component\n */\n textAreaRef?: Ref<HTMLTextAreaElement>;\n /**\n * Validation status.\n */\n validationStatus?: \"error\" | \"warning\" | \"success\";\n /**\n * Styling variant. Defaults to \"primary\".\n */\n variant?: \"primary\" | \"secondary\";\n}\n\nexport const MultilineInput = forwardRef<HTMLDivElement, MultilineInputProps>(\n function MultilineInput(\n {\n \"aria-activedescendant\": ariaActiveDescendant,\n \"aria-expanded\": ariaExpanded,\n \"aria-owns\": ariaOwns,\n bordered = false,\n className: classNameProp,\n disabled,\n endAdornment,\n id,\n placeholder,\n readOnly,\n role,\n rows = 3,\n startAdornment,\n style,\n textAreaProps = {},\n textAreaRef,\n value: valueProp,\n defaultValue: defaultValueProp = valueProp === undefined ? \"\" : undefined,\n validationStatus: validationStatusProp,\n variant = \"primary\",\n ...other\n },\n ref,\n ) {\n const inputRef = useRef<HTMLTextAreaElement>(null);\n const handleRef = useForkRef(inputRef, textAreaRef);\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-multiline-input\",\n css: multilineInputCss,\n window: targetWindow,\n });\n\n const restA11yProps = {\n \"aria-activedescendant\": ariaActiveDescendant,\n \"aria-expanded\": ariaExpanded,\n \"aria-owns\": ariaOwns,\n };\n\n const [focused, setFocused] = useState(false);\n\n const {\n \"aria-describedby\": textAreaDescribedBy,\n \"aria-labelledby\": textAreaLabelledBy,\n onBlur,\n onChange,\n onFocus,\n required: textAreaRequired,\n ...restTextAreaProps\n } = textAreaProps;\n\n const {\n a11yProps: {\n \"aria-describedby\": formFieldDescribedBy,\n \"aria-labelledby\": formFieldLabelledBy,\n } = {},\n disabled: formFieldDisabled,\n readOnly: formFieldReadOnly,\n necessity: formFieldRequired,\n validationStatus: formFieldValidationStatus,\n } = useFormFieldProps();\n\n const isDisabled = disabled || formFieldDisabled;\n const isReadOnly = readOnly || formFieldReadOnly;\n const validationStatus = formFieldValidationStatus ?? validationStatusProp;\n const isRequired = formFieldRequired\n ? [\"required\", \"asterisk\"].includes(formFieldRequired)\n : textAreaRequired;\n\n const [value, setValue] = useControlled({\n controlled: valueProp,\n default: defaultValueProp,\n name: \"MultilineInput\",\n state: \"value\",\n });\n\n const previousHeight = useRef<string | undefined>(undefined);\n const input = inputRef.current;\n\n const changeHeight = useCallback(() => {\n if (!input) return;\n const hasBeenManuallyResized =\n previousHeight.current !== undefined &&\n input.style.height !== previousHeight.current;\n if (!hasBeenManuallyResized) {\n const previousOverflow = input.style.overflow;\n input.style.overflow = \"hidden\";\n input.style.height = \"auto\";\n input.scrollHeight; // Needed to work around Firefox bug. https://bugzilla.mozilla.org/show_bug.cgi?id=1787062\n const newHeight = `${\n input.scrollHeight + (input.offsetHeight - input.clientHeight)\n }px`;\n input.style.height = newHeight;\n previousHeight.current = newHeight;\n input.style.overflow = previousOverflow;\n }\n }, [input]);\n\n const handleChange = (event: ChangeEvent<HTMLTextAreaElement>) => {\n const value = event.target.value;\n setValue(value);\n onChange?.(event);\n changeHeight();\n };\n\n useLayoutEffect(() => {\n changeHeight();\n }, [value, changeHeight]);\n\n const handleBlur = (event: FocusEvent<HTMLTextAreaElement>) => {\n onBlur?.(event);\n setFocused(false);\n };\n\n const handleFocus = (event: FocusEvent<HTMLTextAreaElement>) => {\n onFocus?.(event);\n setFocused(true);\n };\n\n const multilineInputStyles = {\n \"--saltMultilineInput-rows\": rows,\n ...style,\n };\n\n return (\n <div\n className={clsx(\n withBaseName(),\n withBaseName(variant),\n {\n [withBaseName(\"withAdornmentRow\")]: endAdornment,\n [withBaseName(\"bordered\")]: bordered,\n [withBaseName(\"focused\")]: !isDisabled && focused,\n [withBaseName(\"disabled\")]: isDisabled,\n [withBaseName(\"readOnly\")]: isReadOnly,\n [withBaseName(validationStatus ?? \"\")]: validationStatus,\n },\n classNameProp,\n )}\n ref={ref}\n style={multilineInputStyles}\n {...other}\n >\n {startAdornment && (\n <div className={withBaseName(\"startAdornmentContainer\")}>\n {startAdornment}\n </div>\n )}\n <textarea\n aria-describedby={clsx(formFieldDescribedBy, textAreaDescribedBy)}\n aria-labelledby={clsx(formFieldLabelledBy, textAreaLabelledBy)}\n className={clsx(withBaseName(\"textarea\"), textAreaProps?.className)}\n disabled={isDisabled}\n id={id}\n readOnly={isReadOnly}\n ref={handleRef}\n required={isRequired}\n role={role}\n rows={rows}\n tabIndex={isDisabled ? -1 : 0}\n onBlur={handleBlur}\n onChange={handleChange}\n onFocus={!isDisabled ? handleFocus : undefined}\n placeholder={placeholder}\n value={value}\n {...restA11yProps}\n {...restTextAreaProps}\n />\n <div className={withBaseName(\"suffixAdornments\")}>\n {!isDisabled && validationStatus && (\n <div className={withBaseName(\"statusAdornmentContainer\")}>\n <StatusAdornment status={validationStatus} />\n </div>\n )}\n {endAdornment && (\n <div className={withBaseName(\"endAdornmentContainer\")}>\n {endAdornment}\n </div>\n )}\n </div>\n <div className={withBaseName(\"activationIndicator\")} />\n </div>\n );\n },\n);\n"],"names":["MultilineInput","multilineInputCss","value"],"mappings":"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"}
|
|
@@ -5,7 +5,7 @@ const ExpansionIcon = ({
|
|
|
5
5
|
expanded = false,
|
|
6
6
|
orientation = "horizontal"
|
|
7
7
|
}) => {
|
|
8
|
-
const { ExpandGroupIcon,
|
|
8
|
+
const { ExpandGroupIcon, CollapseGroupIcon } = useIcon();
|
|
9
9
|
const iconExpansionMap = {
|
|
10
10
|
vertical: {
|
|
11
11
|
expanded: CollapseGroupIcon,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ExpansionIcon.js","sources":["../src/navigation-item/ExpansionIcon.tsx"],"sourcesContent":["import { useIcon } from \"../semantic-icon-provider\";\n\ninterface ExpansionIconProps {\n /**\n * Whether the navigation item is expanded.\n */\n expanded?: boolean;\n /**\n * The orientation of the navigation item.\n */\n orientation?: \"horizontal\" | \"vertical\";\n}\n\nexport const ExpansionIcon = ({\n expanded = false,\n orientation = \"horizontal\",\n}: ExpansionIconProps) => {\n const { ExpandGroupIcon, ExpandIcon, CollapseGroupIcon } = useIcon();\n const iconExpansionMap = {\n vertical: {\n expanded: CollapseGroupIcon,\n collapsed: ExpandGroupIcon,\n },\n horizontal: {\n expanded: CollapseGroupIcon,\n collapsed: CollapseGroupIcon,\n },\n };\n\n const Icon =\n iconExpansionMap[orientation][expanded ? \"expanded\" : \"collapsed\"];\n return <Icon aria-hidden=\"true\" />;\n};\n"],"names":[],"mappings":";;;AAaO,MAAM,gBAAgB,CAAC;AAAA,EAC5B,QAAW,GAAA,KAAA;AAAA,EACX,WAAc,GAAA;AAChB,CAA0B,KAAA;AACxB,EAAA,MAAM,EAAE,eAAA,
|
|
1
|
+
{"version":3,"file":"ExpansionIcon.js","sources":["../src/navigation-item/ExpansionIcon.tsx"],"sourcesContent":["import { useIcon } from \"../semantic-icon-provider\";\n\ninterface ExpansionIconProps {\n /**\n * Whether the navigation item is expanded.\n */\n expanded?: boolean;\n /**\n * The orientation of the navigation item.\n */\n orientation?: \"horizontal\" | \"vertical\";\n}\n\nexport const ExpansionIcon = ({\n expanded = false,\n orientation = \"horizontal\",\n}: ExpansionIconProps) => {\n const { ExpandGroupIcon, ExpandIcon, CollapseGroupIcon } = useIcon();\n const iconExpansionMap = {\n vertical: {\n expanded: CollapseGroupIcon,\n collapsed: ExpandGroupIcon,\n },\n horizontal: {\n expanded: CollapseGroupIcon,\n collapsed: CollapseGroupIcon,\n },\n };\n\n const Icon =\n iconExpansionMap[orientation][expanded ? \"expanded\" : \"collapsed\"];\n return <Icon aria-hidden=\"true\" />;\n};\n"],"names":[],"mappings":";;;AAaO,MAAM,gBAAgB,CAAC;AAAA,EAC5B,QAAW,GAAA,KAAA;AAAA,EACX,WAAc,GAAA;AAChB,CAA0B,KAAA;AACxB,EAAA,MAAM,EAAE,eAAA,EAA6B,iBAAA,KAAsB,OAAQ,EAAA;AACnE,EAAA,MAAM,gBAAmB,GAAA;AAAA,IACvB,QAAU,EAAA;AAAA,MACR,QAAU,EAAA,iBAAA;AAAA,MACV,SAAW,EAAA;AAAA,KACb;AAAA,IACA,UAAY,EAAA;AAAA,MACV,QAAU,EAAA,iBAAA;AAAA,MACV,SAAW,EAAA;AAAA;AACb,GACF;AAEA,EAAA,MAAM,OACJ,gBAAiB,CAAA,WAAW,CAAE,CAAA,QAAA,GAAW,aAAa,WAAW,CAAA;AACnE,EAAO,uBAAA,GAAA,CAAC,IAAK,EAAA,EAAA,aAAA,EAAY,MAAO,EAAA,CAAA;AAClC;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavigationItem.js","sources":["../src/navigation-item/NavigationItem.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n type MouseEvent,\n type MouseEventHandler,\n forwardRef,\n} from \"react\";\nimport { makePrefixer } from \"../utils\";\nimport { ExpansionIcon } from \"./ExpansionIcon\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport type { RenderPropsType } from \"../utils\";\nimport navigationItemCss from \"./NavigationItem.css\";\nimport { NavigationItemAction } from \"./NavigationItemAction\";\n\nexport interface NavigationItemProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * Whether the navigation item is active.\n */\n active?: boolean;\n /**\n * Whether the nested group is collapsed and there is an active nested item within it.\n */\n blurActive?: boolean;\n /**\n * Whether the navigation item is expanded.\n */\n expanded?: boolean;\n /**\n * Level of nesting.\n */\n level?: number;\n /**\n * The orientation of the navigation item.\n */\n orientation?: \"horizontal\" | \"vertical\";\n /**\n * Whether the navigation item is a parent with nested items.\n */\n parent?: boolean;\n /**\n * Render prop to enable customisation of navigation item element.\n */\n render?: RenderPropsType[\"render\"];\n /**\n * Action to be triggered when the navigation item is expanded.\n */\n onExpand?: MouseEventHandler<HTMLButtonElement>;\n /**\n * Href to be passed to the Link element.\n */\n href?: string;\n}\n\nconst withBaseName = makePrefixer(\"saltNavigationItem\");\n\nexport const NavigationItem = forwardRef<HTMLDivElement, NavigationItemProps>(\n function NavigationItem(props, ref) {\n const {\n active,\n blurActive,\n render,\n children,\n className,\n expanded = false,\n href,\n orientation = \"horizontal\",\n parent,\n level = 0,\n onExpand,\n style: styleProp,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-navigation-item\",\n css: navigationItemCss,\n window: targetWindow,\n });\n\n const style = {\n ...styleProp,\n \"--saltNavigationItem-level\": `${level}`,\n };\n\n const isLink = href !== undefined;\n\n const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n onExpand?.(event);\n };\n\n return (\n <div\n ref={ref}\n className={clsx(withBaseName(), className)}\n style={style}\n {...rest}\n >\n <NavigationItemAction\n className={clsx(\n withBaseName(\"wrapper\"),\n {\n [withBaseName(\"active\")]: active || blurActive,\n [withBaseName(\"blurActive\")]: blurActive,\n [withBaseName(\"rootItem\")]: level === 0,\n },\n withBaseName(orientation),\n )}\n render={render ?? (isLink ? undefined : <button type=\"button\" />)}\n aria-expanded={isLink ? undefined : expanded}\n onClick={handleClick}\n aria-current={isLink && active ? \"page\" : undefined}\n href={href}\n >\n <span className={withBaseName(\"label\")}>{children}</span>\n {parent ? (\n <ExpansionIcon expanded={expanded} orientation={orientation} />\n ) : null}\n </NavigationItemAction>\n </div>\n );\n },\n);\n"],"names":["NavigationItem","navigationItemCss"],"mappings":";;;;;;;;;;;;;;AAwDA,MAAM,YAAA,GAAe,aAAa,oBAAoB,CAAA;AAE/C,MAAM,cAAiB,GAAA,UAAA;AAAA,EAC5B,SAASA,eAAe,CAAA,KAAA,EAAO,GAAK,EAAA;AAClC,IAAM,MAAA;AAAA,MACJ,MAAA;AAAA,MACA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAW,GAAA,KAAA;AAAA,MACX,IAAA;AAAA,MACA,WAAc,GAAA,YAAA;AAAA,MACd,MAAA;AAAA,MACA,KAAQ,GAAA,CAAA;AAAA,MACR,QAAA;AAAA,MACA,KAAO,EAAA,SAAA;AAAA,MACP,GAAG;AAAA,KACD,GAAA,KAAA;AAEJ,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,sBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAA,MAAM,KAAQ,GAAA;AAAA,MACZ,GAAG,SAAA;AAAA,MACH,4BAAA,EAA8B,GAAG,KAAK,CAAA;AAAA,KACxC;AAEA,IAAA,MAAM,SAAS,IAAS,KAAA,
|
|
1
|
+
{"version":3,"file":"NavigationItem.js","sources":["../src/navigation-item/NavigationItem.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n type MouseEvent,\n type MouseEventHandler,\n forwardRef,\n} from \"react\";\nimport { makePrefixer } from \"../utils\";\nimport { ExpansionIcon } from \"./ExpansionIcon\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport type { RenderPropsType } from \"../utils\";\nimport navigationItemCss from \"./NavigationItem.css\";\nimport { NavigationItemAction } from \"./NavigationItemAction\";\n\nexport interface NavigationItemProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * Whether the navigation item is active.\n */\n active?: boolean;\n /**\n * Whether the nested group is collapsed and there is an active nested item within it.\n */\n blurActive?: boolean;\n /**\n * Whether the navigation item is expanded.\n */\n expanded?: boolean;\n /**\n * Level of nesting.\n */\n level?: number;\n /**\n * The orientation of the navigation item.\n */\n orientation?: \"horizontal\" | \"vertical\";\n /**\n * Whether the navigation item is a parent with nested items.\n */\n parent?: boolean;\n /**\n * Render prop to enable customisation of navigation item element.\n */\n render?: RenderPropsType[\"render\"];\n /**\n * Action to be triggered when the navigation item is expanded.\n */\n onExpand?: MouseEventHandler<HTMLButtonElement>;\n /**\n * Href to be passed to the Link element.\n */\n href?: string;\n}\n\nconst withBaseName = makePrefixer(\"saltNavigationItem\");\n\nexport const NavigationItem = forwardRef<HTMLDivElement, NavigationItemProps>(\n function NavigationItem(props, ref) {\n const {\n active,\n blurActive,\n render,\n children,\n className,\n expanded = false,\n href,\n orientation = \"horizontal\",\n parent,\n level = 0,\n onExpand,\n style: styleProp,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-navigation-item\",\n css: navigationItemCss,\n window: targetWindow,\n });\n\n const style = {\n ...styleProp,\n \"--saltNavigationItem-level\": `${level}`,\n };\n\n const isLink = href !== undefined;\n\n const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n onExpand?.(event);\n };\n\n return (\n <div\n ref={ref}\n className={clsx(withBaseName(), className)}\n style={style}\n {...rest}\n >\n <NavigationItemAction\n className={clsx(\n withBaseName(\"wrapper\"),\n {\n [withBaseName(\"active\")]: active || blurActive,\n [withBaseName(\"blurActive\")]: blurActive,\n [withBaseName(\"rootItem\")]: level === 0,\n },\n withBaseName(orientation),\n )}\n render={render ?? (isLink ? undefined : <button type=\"button\" />)}\n aria-expanded={isLink ? undefined : expanded}\n onClick={handleClick}\n aria-current={isLink && active ? \"page\" : undefined}\n href={href}\n >\n <span className={withBaseName(\"label\")}>{children}</span>\n {parent ? (\n <ExpansionIcon expanded={expanded} orientation={orientation} />\n ) : null}\n </NavigationItemAction>\n </div>\n );\n },\n);\n"],"names":["NavigationItem","navigationItemCss"],"mappings":";;;;;;;;;;;;;;AAwDA,MAAM,YAAA,GAAe,aAAa,oBAAoB,CAAA;AAE/C,MAAM,cAAiB,GAAA,UAAA;AAAA,EAC5B,SAASA,eAAe,CAAA,KAAA,EAAO,GAAK,EAAA;AAClC,IAAM,MAAA;AAAA,MACJ,MAAA;AAAA,MACA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAW,GAAA,KAAA;AAAA,MACX,IAAA;AAAA,MACA,WAAc,GAAA,YAAA;AAAA,MACd,MAAA;AAAA,MACA,KAAQ,GAAA,CAAA;AAAA,MACR,QAAA;AAAA,MACA,KAAO,EAAA,SAAA;AAAA,MACP,GAAG;AAAA,KACD,GAAA,KAAA;AAEJ,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,sBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAA,MAAM,KAAQ,GAAA;AAAA,MACZ,GAAG,SAAA;AAAA,MACH,4BAAA,EAA8B,GAAG,KAAK,CAAA;AAAA,KACxC;AAEA,IAAA,MAAM,SAAS,IAAS,KAAA,MAAA;AAExB,IAAM,MAAA,WAAA,GAAc,CAAC,KAAyC,KAAA;AAC5D,MAAW,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAA,KAAA,CAAA;AAAA,KACb;AAEA,IACE,uBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QACzC,KAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEJ,QAAA,kBAAA,IAAA;AAAA,UAAC,oBAAA;AAAA,UAAA;AAAA,YACC,SAAW,EAAA,IAAA;AAAA,cACT,aAAa,SAAS,CAAA;AAAA,cACtB;AAAA,gBACE,CAAC,YAAA,CAAa,QAAQ,CAAC,GAAG,MAAU,IAAA,UAAA;AAAA,gBACpC,CAAC,YAAA,CAAa,YAAY,CAAC,GAAG,UAAA;AAAA,gBAC9B,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,KAAU,KAAA;AAAA,eACxC;AAAA,cACA,aAAa,WAAW;AAAA,aAC1B;AAAA,YACA,QAAQ,MAAW,KAAA,MAAA,GAAS,yBAAa,GAAA,CAAA,QAAA,EAAA,EAAO,MAAK,QAAS,EAAA,CAAA,CAAA;AAAA,YAC9D,eAAA,EAAe,SAAS,MAAY,GAAA,QAAA;AAAA,YACpC,OAAS,EAAA,WAAA;AAAA,YACT,cAAA,EAAc,MAAU,IAAA,MAAA,GAAS,MAAS,GAAA,MAAA;AAAA,YAC1C,IAAA;AAAA,YAEA,QAAA,EAAA;AAAA,8BAAA,GAAA,CAAC,MAAK,EAAA,EAAA,SAAA,EAAW,YAAa,CAAA,OAAO,GAAI,QAAS,EAAA,CAAA;AAAA,cACjD,MACC,mBAAA,GAAA,CAAC,aAAc,EAAA,EAAA,QAAA,EAAoB,aAA0B,CAC3D,GAAA;AAAA;AAAA;AAAA;AACN;AAAA,KACF;AAAA;AAGN;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Option.js","sources":["../src/option/Option.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n type MouseEvent,\n type ReactNode,\n forwardRef,\n useEffect,\n useMemo,\n useRef,\n} from \"react\";\nimport { CheckboxIcon } from \"../checkbox\";\nimport {\n type OptionValue,\n useListControlContext,\n} from \"../list-control/ListControlContext\";\nimport { makePrefixer, useForkRef, useId } from \"../utils\";\nimport optionCss from \"./Option.css\";\n\nexport interface OptionProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * If `true`, the option will be disabled.\n */\n disabled?: boolean;\n /**\n * The value of the option.\n */\n value: unknown;\n /**\n * The content of the option.\n */\n children?: ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltOption\");\n\nexport const Option = forwardRef<HTMLDivElement, OptionProps>(\n function Option(props, ref) {\n const {\n className,\n children,\n disabled: disabledProp,\n onClick,\n id: idProp,\n value,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-option\",\n css: optionCss,\n window: targetWindow,\n });\n\n const optionRef = useRef(null);\n const id = useId(idProp);\n\n const {\n setActive,\n activeState,\n multiselect,\n select,\n register,\n selectedState,\n focusVisibleState,\n valueToString,\n disabled: listDisabled,\n } = useListControlContext();\n\n const disabled = disabledProp || listDisabled;\n\n const selected = selectedState.includes(value);\n const active = activeState?.id === id;\n\n const optionValue: OptionValue<unknown> = useMemo(\n () => ({\n id: String(id),\n disabled: Boolean(disabled),\n value,\n }),\n [id, disabled, value],\n );\n\n const handleClick = (event: MouseEvent<HTMLDivElement>) => {\n if (disabled || id === undefined) {\n return;\n }\n\n // set active descendent\n setActive(optionValue);\n\n // handle selection\n select(event, optionValue);\n\n onClick?.(event);\n };\n\n const handleMouseOver = () => {\n setActive(optionValue);\n };\n\n useEffect(() => {\n if (id && optionRef.current) {\n return register(optionValue, optionRef.current);\n }\n }, [optionValue, id, register]);\n\n const handleRef = useForkRef(optionRef, ref);\n\n return (\n <div\n aria-disabled={disabled ? \"true\" : undefined}\n aria-selected={selected}\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"active\")]: active,\n [withBaseName(\"focusVisible\")]: focusVisibleState && active,\n },\n className,\n )}\n ref={handleRef}\n role=\"option\"\n id={id}\n onClick={handleClick}\n onMouseOver={handleMouseOver}\n {...rest}\n >\n {multiselect && <CheckboxIcon checked={selected} disabled={disabled} />}\n {children ?? valueToString(value)}\n </div>\n );\n },\n);\n"],"names":["Option","optionCss"],"mappings":";;;;;;;;;;;;;;;;;AAmCA,MAAM,YAAA,GAAe,aAAa,YAAY,CAAA;AAEvC,MAAM,MAAS,GAAA,UAAA;AAAA,EACpB,SAASA,OAAO,CAAA,KAAA,EAAO,GAAK,EAAA;AAC1B,IAAM,MAAA;AAAA,MACJ,SAAA;AAAA,MACA,QAAA;AAAA,MACA,QAAU,EAAA,YAAA;AAAA,MACV,OAAA;AAAA,MACA,EAAI,EAAA,MAAA;AAAA,MACJ,KAAA;AAAA,MACA,GAAG;AAAA,KACD,GAAA,KAAA;AAEJ,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,aAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAM,MAAA,SAAA,GAAY,OAAO,IAAI,CAAA;AAC7B,IAAM,MAAA,EAAA,GAAK,MAAM,MAAM,CAAA;AAEvB,IAAM,MAAA;AAAA,MACJ,SAAA;AAAA,MACA,WAAA;AAAA,MACA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,QAAA;AAAA,MACA,aAAA;AAAA,MACA,iBAAA;AAAA,MACA,aAAA;AAAA,MACA,QAAU,EAAA;AAAA,QACR,qBAAsB,EAAA;AAE1B,IAAA,MAAM,WAAW,YAAgB,IAAA,YAAA;AAEjC,IAAM,MAAA,QAAA,GAAW,aAAc,CAAA,QAAA,CAAS,KAAK,CAAA;AAC7C,IAAM,MAAA,MAAA,GAAA,CAAS,2CAAa,EAAO,MAAA,EAAA;AAEnC,IAAA,MAAM,WAAoC,GAAA,OAAA;AAAA,MACxC,OAAO;AAAA,QACL,EAAA,EAAI,OAAO,EAAE,CAAA;AAAA,QACb,QAAA,EAAU,QAAQ,QAAQ,CAAA;AAAA,QAC1B;AAAA,OACF,CAAA;AAAA,MACA,CAAC,EAAI,EAAA,QAAA,EAAU,KAAK;AAAA,KACtB;AAEA,IAAM,MAAA,WAAA,GAAc,CAAC,KAAsC,KAAA;AACzD,MAAI,IAAA,QAAA,IAAY,OAAO,
|
|
1
|
+
{"version":3,"file":"Option.js","sources":["../src/option/Option.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n type MouseEvent,\n type ReactNode,\n forwardRef,\n useEffect,\n useMemo,\n useRef,\n} from \"react\";\nimport { CheckboxIcon } from \"../checkbox\";\nimport {\n type OptionValue,\n useListControlContext,\n} from \"../list-control/ListControlContext\";\nimport { makePrefixer, useForkRef, useId } from \"../utils\";\nimport optionCss from \"./Option.css\";\n\nexport interface OptionProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * If `true`, the option will be disabled.\n */\n disabled?: boolean;\n /**\n * The value of the option.\n */\n value: unknown;\n /**\n * The content of the option.\n */\n children?: ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltOption\");\n\nexport const Option = forwardRef<HTMLDivElement, OptionProps>(\n function Option(props, ref) {\n const {\n className,\n children,\n disabled: disabledProp,\n onClick,\n id: idProp,\n value,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-option\",\n css: optionCss,\n window: targetWindow,\n });\n\n const optionRef = useRef(null);\n const id = useId(idProp);\n\n const {\n setActive,\n activeState,\n multiselect,\n select,\n register,\n selectedState,\n focusVisibleState,\n valueToString,\n disabled: listDisabled,\n } = useListControlContext();\n\n const disabled = disabledProp || listDisabled;\n\n const selected = selectedState.includes(value);\n const active = activeState?.id === id;\n\n const optionValue: OptionValue<unknown> = useMemo(\n () => ({\n id: String(id),\n disabled: Boolean(disabled),\n value,\n }),\n [id, disabled, value],\n );\n\n const handleClick = (event: MouseEvent<HTMLDivElement>) => {\n if (disabled || id === undefined) {\n return;\n }\n\n // set active descendent\n setActive(optionValue);\n\n // handle selection\n select(event, optionValue);\n\n onClick?.(event);\n };\n\n const handleMouseOver = () => {\n setActive(optionValue);\n };\n\n useEffect(() => {\n if (id && optionRef.current) {\n return register(optionValue, optionRef.current);\n }\n }, [optionValue, id, register]);\n\n const handleRef = useForkRef(optionRef, ref);\n\n return (\n <div\n aria-disabled={disabled ? \"true\" : undefined}\n aria-selected={selected}\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"active\")]: active,\n [withBaseName(\"focusVisible\")]: focusVisibleState && active,\n },\n className,\n )}\n ref={handleRef}\n role=\"option\"\n id={id}\n onClick={handleClick}\n onMouseOver={handleMouseOver}\n {...rest}\n >\n {multiselect && <CheckboxIcon checked={selected} disabled={disabled} />}\n {children ?? valueToString(value)}\n </div>\n );\n },\n);\n"],"names":["Option","optionCss"],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { offset, flip, shift,
|
|
2
|
+
import { offset, flip, shift, arrow, limitShift, useInteractions, useRole, useClick, useDismiss } from '@floating-ui/react';
|
|
3
3
|
import { useRef, useMemo } from 'react';
|
|
4
4
|
import 'clsx';
|
|
5
5
|
import { useControlled } from '../utils/useControlled.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Overlay.js","sources":["../src/overlay/Overlay.tsx"],"sourcesContent":["import {\n arrow,\n flip,\n limitShift,\n offset,\n shift,\n useClick,\n useDismiss,\n useInteractions,\n useRole,\n} from \"@floating-ui/react\";\nimport { type ComponentPropsWithoutRef, useMemo, useRef } from \"react\";\nimport { useControlled, useFloatingUI } from \"../utils\";\nimport { OverlayContext } from \"./OverlayContext\";\n\nexport interface OverlayProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * Display or hide the component.\n */\n open?: boolean;\n /**\n * Callback function triggered when open state changes.\n */\n onOpenChange?: (open: boolean) => void;\n /*\n * Set the placement of the Overlay component relative to the trigger element. Defaults to `top`.\n */\n placement?: \"top\" | \"bottom\" | \"left\" | \"right\";\n}\n\nexport const Overlay = ({\n children,\n open,\n onOpenChange,\n placement: placementProp = \"top\",\n}: OverlayProps) => {\n const arrowRef = useRef<SVGSVGElement | null>(null);\n\n const [openState, setOpenState] = useControlled({\n controlled: open,\n default: false,\n name: \"Overlay\",\n state: \"open\",\n });\n\n const handleOpenChange = (newOpen: boolean) => {\n setOpenState(newOpen);\n onOpenChange?.(newOpen);\n };\n\n const { x, y, strategy, context, elements, floating, reference } =\n useFloatingUI({\n open: openState,\n onOpenChange: handleOpenChange,\n placement: placementProp,\n middleware: [\n offset(11),\n flip(),\n shift({ limiter: limitShift() }),\n arrow({ element: arrowRef }),\n ],\n });\n\n const { getReferenceProps, getFloatingProps } = useInteractions([\n useRole(context, { role: \"dialog\" }),\n useClick(context),\n useDismiss(context),\n ]);\n\n const floatingStyles = useMemo(() => {\n return {\n top: y ?? 0,\n left: x ?? 0,\n position: strategy,\n width: elements.floating?.offsetWidth,\n height: elements.floating?.offsetHeight,\n };\n }, [elements.floating, strategy, x, y]);\n\n const arrowProps = {\n ref: arrowRef,\n context,\n };\n\n return (\n <OverlayContext.Provider\n value={{\n openState,\n floatingStyles,\n context,\n arrowProps,\n floating,\n reference,\n getFloatingProps,\n getReferenceProps,\n }}\n >\n {children}\n </OverlayContext.Provider>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;AA8BO,MAAM,UAAU,CAAC;AAAA,EACtB,QAAA;AAAA,EACA,IAAA;AAAA,EACA,YAAA;AAAA,EACA,WAAW,aAAgB,GAAA;AAC7B,CAAoB,KAAA;AAClB,EAAM,MAAA,QAAA,GAAW,OAA6B,IAAI,CAAA;AAElD,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,aAAc,CAAA;AAAA,IAC9C,UAAY,EAAA,IAAA;AAAA,IACZ,OAAS,EAAA,KAAA;AAAA,IACT,IAAM,EAAA,SAAA;AAAA,IACN,KAAO,EAAA;AAAA,GACR,CAAA;AAED,EAAM,MAAA,gBAAA,GAAmB,CAAC,OAAqB,KAAA;AAC7C,IAAA,YAAA,CAAa,OAAO,CAAA;AACpB,IAAe,YAAA,IAAA,IAAA,GAAA,
|
|
1
|
+
{"version":3,"file":"Overlay.js","sources":["../src/overlay/Overlay.tsx"],"sourcesContent":["import {\n arrow,\n flip,\n limitShift,\n offset,\n shift,\n useClick,\n useDismiss,\n useInteractions,\n useRole,\n} from \"@floating-ui/react\";\nimport { type ComponentPropsWithoutRef, useMemo, useRef } from \"react\";\nimport { useControlled, useFloatingUI } from \"../utils\";\nimport { OverlayContext } from \"./OverlayContext\";\n\nexport interface OverlayProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * Display or hide the component.\n */\n open?: boolean;\n /**\n * Callback function triggered when open state changes.\n */\n onOpenChange?: (open: boolean) => void;\n /*\n * Set the placement of the Overlay component relative to the trigger element. Defaults to `top`.\n */\n placement?: \"top\" | \"bottom\" | \"left\" | \"right\";\n}\n\nexport const Overlay = ({\n children,\n open,\n onOpenChange,\n placement: placementProp = \"top\",\n}: OverlayProps) => {\n const arrowRef = useRef<SVGSVGElement | null>(null);\n\n const [openState, setOpenState] = useControlled({\n controlled: open,\n default: false,\n name: \"Overlay\",\n state: \"open\",\n });\n\n const handleOpenChange = (newOpen: boolean) => {\n setOpenState(newOpen);\n onOpenChange?.(newOpen);\n };\n\n const { x, y, strategy, context, elements, floating, reference } =\n useFloatingUI({\n open: openState,\n onOpenChange: handleOpenChange,\n placement: placementProp,\n middleware: [\n offset(11),\n flip(),\n shift({ limiter: limitShift() }),\n arrow({ element: arrowRef }),\n ],\n });\n\n const { getReferenceProps, getFloatingProps } = useInteractions([\n useRole(context, { role: \"dialog\" }),\n useClick(context),\n useDismiss(context),\n ]);\n\n const floatingStyles = useMemo(() => {\n return {\n top: y ?? 0,\n left: x ?? 0,\n position: strategy,\n width: elements.floating?.offsetWidth,\n height: elements.floating?.offsetHeight,\n };\n }, [elements.floating, strategy, x, y]);\n\n const arrowProps = {\n ref: arrowRef,\n context,\n };\n\n return (\n <OverlayContext.Provider\n value={{\n openState,\n floatingStyles,\n context,\n arrowProps,\n floating,\n reference,\n getFloatingProps,\n getReferenceProps,\n }}\n >\n {children}\n </OverlayContext.Provider>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;AA8BO,MAAM,UAAU,CAAC;AAAA,EACtB,QAAA;AAAA,EACA,IAAA;AAAA,EACA,YAAA;AAAA,EACA,WAAW,aAAgB,GAAA;AAC7B,CAAoB,KAAA;AAClB,EAAM,MAAA,QAAA,GAAW,OAA6B,IAAI,CAAA;AAElD,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,aAAc,CAAA;AAAA,IAC9C,UAAY,EAAA,IAAA;AAAA,IACZ,OAAS,EAAA,KAAA;AAAA,IACT,IAAM,EAAA,SAAA;AAAA,IACN,KAAO,EAAA;AAAA,GACR,CAAA;AAED,EAAM,MAAA,gBAAA,GAAmB,CAAC,OAAqB,KAAA;AAC7C,IAAA,YAAA,CAAa,OAAO,CAAA;AACpB,IAAe,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAA,OAAA,CAAA;AAAA,GACjB;AAEA,EAAM,MAAA,EAAE,GAAG,CAAG,EAAA,QAAA,EAAU,SAAS,QAAU,EAAA,QAAA,EAAU,SAAU,EAAA,GAC7D,aAAc,CAAA;AAAA,IACZ,IAAM,EAAA,SAAA;AAAA,IACN,YAAc,EAAA,gBAAA;AAAA,IACd,SAAW,EAAA,aAAA;AAAA,IACX,UAAY,EAAA;AAAA,MACV,OAAO,EAAE,CAAA;AAAA,MACT,IAAK,EAAA;AAAA,MACL,KAAM,CAAA,EAAE,OAAS,EAAA,UAAA,IAAc,CAAA;AAAA,MAC/B,KAAM,CAAA,EAAE,OAAS,EAAA,QAAA,EAAU;AAAA;AAC7B,GACD,CAAA;AAEH,EAAA,MAAM,EAAE,iBAAA,EAAmB,gBAAiB,EAAA,GAAI,eAAgB,CAAA;AAAA,IAC9D,OAAQ,CAAA,OAAA,EAAS,EAAE,IAAA,EAAM,UAAU,CAAA;AAAA,IACnC,SAAS,OAAO,CAAA;AAAA,IAChB,WAAW,OAAO;AAAA,GACnB,CAAA;AAED,EAAM,MAAA,cAAA,GAAiB,QAAQ,MAAM;AArEvC,IAAA,IAAA,EAAA,EAAA,EAAA;AAsEI,IAAO,OAAA;AAAA,MACL,KAAK,CAAK,IAAA,CAAA;AAAA,MACV,MAAM,CAAK,IAAA,CAAA;AAAA,MACX,QAAU,EAAA,QAAA;AAAA,MACV,KAAA,EAAA,CAAO,EAAS,GAAA,QAAA,CAAA,QAAA,KAAT,IAAmB,GAAA,MAAA,GAAA,EAAA,CAAA,WAAA;AAAA,MAC1B,MAAA,EAAA,CAAQ,EAAS,GAAA,QAAA,CAAA,QAAA,KAAT,IAAmB,GAAA,MAAA,GAAA,EAAA,CAAA;AAAA,KAC7B;AAAA,KACC,CAAC,QAAA,CAAS,UAAU,QAAU,EAAA,CAAA,EAAG,CAAC,CAAC,CAAA;AAEtC,EAAA,MAAM,UAAa,GAAA;AAAA,IACjB,GAAK,EAAA,QAAA;AAAA,IACL;AAAA,GACF;AAEA,EACE,uBAAA,GAAA;AAAA,IAAC,cAAe,CAAA,QAAA;AAAA,IAAf;AAAA,MACC,KAAO,EAAA;AAAA,QACL,SAAA;AAAA,QACA,cAAA;AAAA,QACA,OAAA;AAAA,QACA,UAAA;AAAA,QACA,QAAA;AAAA,QACA,SAAA;AAAA,QACA,gBAAA;AAAA,QACA;AAAA,OACF;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PageButton.js","sources":["../src/pagination/PageButton.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { type MouseEventHandler, forwardRef } from \"react\";\nimport { makePrefixer } from \"../utils\";\nimport { usePaginationContext } from \"./usePaginationContext\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport pageButtonCss from \"./PageButton.css\";\n\nconst withBaseName = makePrefixer(\"saltPageButton\");\n\nexport interface PageButtonProps {\n page: number;\n selected?: boolean;\n disabled?: boolean;\n}\nexport const PageButton = forwardRef<HTMLButtonElement, PageButtonProps>(\n function PageButton({ page, selected, disabled }: PageButtonProps, ref) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-page-button\",\n css: pageButtonCss,\n window: targetWindow,\n });\n\n const { count, onPageChange } = usePaginationContext();\n\n const onClick: MouseEventHandler<HTMLButtonElement> = (event) => {\n onPageChange(event, page);\n };\n\n return (\n <button\n aria-label={`Page ${page} of ${count}`}\n aria-current={selected ? \"page\" : undefined}\n className={clsx(withBaseName(), {\n [withBaseName(\"selected\")]: selected,\n [withBaseName(\"fixed\")]: page < 100,\n })}\n onClick={onClick}\n disabled={disabled}\n ref={ref}\n type=\"button\"\n >\n {page}\n </button>\n );\n },\n);\n"],"names":["PageButton","pageButtonCss"],"mappings":";;;;;;;;;;;;;AAUA,MAAM,YAAA,GAAe,aAAa,gBAAgB,CAAA;AAO3C,MAAM,UAAa,GAAA,UAAA;AAAA,EACxB,SAASA,WAAW,CAAA,EAAE,MAAM,QAAU,EAAA,QAAA,IAA6B,GAAK,EAAA;AACtE,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,kBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAA,MAAM,EAAE,KAAA,EAAO,YAAa,EAAA,GAAI,oBAAqB,EAAA;AAErD,IAAM,MAAA,OAAA,GAAgD,CAAC,KAAU,KAAA;AAC/D,MAAA,YAAA,CAAa,OAAO,IAAI,CAAA;AAAA,KAC1B;AAEA,IACE,uBAAA,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,YAAY,EAAA,CAAA,KAAA,EAAQ,IAAI,CAAA,IAAA,EAAO,KAAK,CAAA,CAAA;AAAA,QACpC,cAAA,EAAc,WAAW,MAAS,GAAA,
|
|
1
|
+
{"version":3,"file":"PageButton.js","sources":["../src/pagination/PageButton.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { type MouseEventHandler, forwardRef } from \"react\";\nimport { makePrefixer } from \"../utils\";\nimport { usePaginationContext } from \"./usePaginationContext\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport pageButtonCss from \"./PageButton.css\";\n\nconst withBaseName = makePrefixer(\"saltPageButton\");\n\nexport interface PageButtonProps {\n page: number;\n selected?: boolean;\n disabled?: boolean;\n}\nexport const PageButton = forwardRef<HTMLButtonElement, PageButtonProps>(\n function PageButton({ page, selected, disabled }: PageButtonProps, ref) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-page-button\",\n css: pageButtonCss,\n window: targetWindow,\n });\n\n const { count, onPageChange } = usePaginationContext();\n\n const onClick: MouseEventHandler<HTMLButtonElement> = (event) => {\n onPageChange(event, page);\n };\n\n return (\n <button\n aria-label={`Page ${page} of ${count}`}\n aria-current={selected ? \"page\" : undefined}\n className={clsx(withBaseName(), {\n [withBaseName(\"selected\")]: selected,\n [withBaseName(\"fixed\")]: page < 100,\n })}\n onClick={onClick}\n disabled={disabled}\n ref={ref}\n type=\"button\"\n >\n {page}\n </button>\n );\n },\n);\n"],"names":["PageButton","pageButtonCss"],"mappings":";;;;;;;;;;;;;AAUA,MAAM,YAAA,GAAe,aAAa,gBAAgB,CAAA;AAO3C,MAAM,UAAa,GAAA,UAAA;AAAA,EACxB,SAASA,WAAW,CAAA,EAAE,MAAM,QAAU,EAAA,QAAA,IAA6B,GAAK,EAAA;AACtE,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,kBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAA,MAAM,EAAE,KAAA,EAAO,YAAa,EAAA,GAAI,oBAAqB,EAAA;AAErD,IAAM,MAAA,OAAA,GAAgD,CAAC,KAAU,KAAA;AAC/D,MAAA,YAAA,CAAa,OAAO,IAAI,CAAA;AAAA,KAC1B;AAEA,IACE,uBAAA,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,YAAY,EAAA,CAAA,KAAA,EAAQ,IAAI,CAAA,IAAA,EAAO,KAAK,CAAA,CAAA;AAAA,QACpC,cAAA,EAAc,WAAW,MAAS,GAAA,MAAA;AAAA,QAClC,SAAA,EAAW,IAAK,CAAA,YAAA,EAAgB,EAAA;AAAA,UAC9B,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,QAAA;AAAA,UAC5B,CAAC,YAAA,CAAa,OAAO,CAAC,GAAG,IAAO,GAAA;AAAA,SACjC,CAAA;AAAA,QACD,OAAA;AAAA,QACA,QAAA;AAAA,QACA,GAAA;AAAA,QACA,IAAK,EAAA,QAAA;AAAA,QAEJ,QAAA,EAAA;AAAA;AAAA,KACH;AAAA;AAGN;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Pagination.js","sources":["../src/pagination/Pagination.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n type HTMLAttributes,\n type SyntheticEvent,\n forwardRef,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n} from \"react\";\nimport { useAriaAnnouncer } from \"../aria-announcer\";\nimport { makePrefixer, useControlled } from \"../utils\";\nimport { type PaginationContext, paginationContext } from \"./PaginationContext\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport paginationCss from \"./Pagination.css\";\n\nconst withBaseName = makePrefixer(\"saltPagination\");\n\nconst { Provider } = paginationContext;\n\nexport interface PaginationProps extends HTMLAttributes<HTMLElement> {\n /**\n * Number of pages.\n */\n count: number;\n /**\n * Current/active page.\n */\n page?: number;\n /**\n * Default current/active page.\n */\n defaultPage?: number;\n /**\n * Callback function triggered when current page changed.\n */\n onPageChange?: (event: SyntheticEvent, page: number) => void;\n}\n\nexport const Pagination = forwardRef<HTMLElement, PaginationProps>(\n function Pagination(\n {\n className,\n count,\n children,\n defaultPage = 1,\n page: pageProp,\n onPageChange: onPageChangeProp,\n ...restProps\n },\n ref,\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-pagination\",\n css: paginationCss,\n window: targetWindow,\n });\n\n const [pageState, setPageState] = useControlled({\n controlled: pageProp,\n default: defaultPage,\n name: \"Pagination\",\n state: \"page\",\n });\n\n const onPageChange = useCallback(\n (event: SyntheticEvent, page: number) => {\n setPageState(page);\n onPageChangeProp?.(event, page);\n },\n [onPageChangeProp],\n );\n\n const contextValue: PaginationContext = useMemo(\n () => ({\n page: pageState,\n count,\n onPageChange,\n }),\n [pageState, count, onPageChange],\n );\n\n const { announce } = useAriaAnnouncer();\n const mounted = useRef<boolean>(false);\n\n useEffect(() => {\n if (mounted.current) {\n announce(`Page ${pageState}`);\n } else {\n mounted.current = true;\n }\n }, [announce, pageState]);\n\n if (count < 2) {\n return null;\n }\n\n return (\n <Provider value={contextValue}>\n <nav\n className={clsx(withBaseName(), className)}\n ref={ref}\n {...restProps}\n >\n {children}\n </nav>\n </Provider>\n );\n },\n);\n"],"names":["Pagination","paginationCss"],"mappings":";;;;;;;;;;;;;;;;AAmBA,MAAM,YAAA,GAAe,aAAa,gBAAgB,CAAA;AAElD,MAAM,EAAE,UAAa,GAAA,iBAAA;AAqBd,MAAM,UAAa,GAAA,UAAA;AAAA,EACxB,SAASA,WACP,CAAA;AAAA,IACE,SAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,WAAc,GAAA,CAAA;AAAA,IACd,IAAM,EAAA,QAAA;AAAA,IACN,YAAc,EAAA,gBAAA;AAAA,IACd,GAAG;AAAA,KAEL,GACA,EAAA;AACA,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,iBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,aAAc,CAAA;AAAA,MAC9C,UAAY,EAAA,QAAA;AAAA,MACZ,OAAS,EAAA,WAAA;AAAA,MACT,IAAM,EAAA,YAAA;AAAA,MACN,KAAO,EAAA;AAAA,KACR,CAAA;AAED,IAAA,MAAM,YAAe,GAAA,WAAA;AAAA,MACnB,CAAC,OAAuB,IAAiB,KAAA;AACvC,QAAA,YAAA,CAAa,IAAI,CAAA;AACjB,QAAA,gBAAA,IAAA,IAAA,GAAA,
|
|
1
|
+
{"version":3,"file":"Pagination.js","sources":["../src/pagination/Pagination.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n type HTMLAttributes,\n type SyntheticEvent,\n forwardRef,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n} from \"react\";\nimport { useAriaAnnouncer } from \"../aria-announcer\";\nimport { makePrefixer, useControlled } from \"../utils\";\nimport { type PaginationContext, paginationContext } from \"./PaginationContext\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport paginationCss from \"./Pagination.css\";\n\nconst withBaseName = makePrefixer(\"saltPagination\");\n\nconst { Provider } = paginationContext;\n\nexport interface PaginationProps extends HTMLAttributes<HTMLElement> {\n /**\n * Number of pages.\n */\n count: number;\n /**\n * Current/active page.\n */\n page?: number;\n /**\n * Default current/active page.\n */\n defaultPage?: number;\n /**\n * Callback function triggered when current page changed.\n */\n onPageChange?: (event: SyntheticEvent, page: number) => void;\n}\n\nexport const Pagination = forwardRef<HTMLElement, PaginationProps>(\n function Pagination(\n {\n className,\n count,\n children,\n defaultPage = 1,\n page: pageProp,\n onPageChange: onPageChangeProp,\n ...restProps\n },\n ref,\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-pagination\",\n css: paginationCss,\n window: targetWindow,\n });\n\n const [pageState, setPageState] = useControlled({\n controlled: pageProp,\n default: defaultPage,\n name: \"Pagination\",\n state: \"page\",\n });\n\n const onPageChange = useCallback(\n (event: SyntheticEvent, page: number) => {\n setPageState(page);\n onPageChangeProp?.(event, page);\n },\n [onPageChangeProp],\n );\n\n const contextValue: PaginationContext = useMemo(\n () => ({\n page: pageState,\n count,\n onPageChange,\n }),\n [pageState, count, onPageChange],\n );\n\n const { announce } = useAriaAnnouncer();\n const mounted = useRef<boolean>(false);\n\n useEffect(() => {\n if (mounted.current) {\n announce(`Page ${pageState}`);\n } else {\n mounted.current = true;\n }\n }, [announce, pageState]);\n\n if (count < 2) {\n return null;\n }\n\n return (\n <Provider value={contextValue}>\n <nav\n className={clsx(withBaseName(), className)}\n ref={ref}\n {...restProps}\n >\n {children}\n </nav>\n </Provider>\n );\n },\n);\n"],"names":["Pagination","paginationCss"],"mappings":";;;;;;;;;;;;;;;;AAmBA,MAAM,YAAA,GAAe,aAAa,gBAAgB,CAAA;AAElD,MAAM,EAAE,UAAa,GAAA,iBAAA;AAqBd,MAAM,UAAa,GAAA,UAAA;AAAA,EACxB,SAASA,WACP,CAAA;AAAA,IACE,SAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,WAAc,GAAA,CAAA;AAAA,IACd,IAAM,EAAA,QAAA;AAAA,IACN,YAAc,EAAA,gBAAA;AAAA,IACd,GAAG;AAAA,KAEL,GACA,EAAA;AACA,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,iBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,aAAc,CAAA;AAAA,MAC9C,UAAY,EAAA,QAAA;AAAA,MACZ,OAAS,EAAA,WAAA;AAAA,MACT,IAAM,EAAA,YAAA;AAAA,MACN,KAAO,EAAA;AAAA,KACR,CAAA;AAED,IAAA,MAAM,YAAe,GAAA,WAAA;AAAA,MACnB,CAAC,OAAuB,IAAiB,KAAA;AACvC,QAAA,YAAA,CAAa,IAAI,CAAA;AACjB,QAAA,gBAAA,IAAA,IAAA,GAAA,MAAA,GAAA,gBAAA,CAAmB,KAAO,EAAA,IAAA,CAAA;AAAA,OAC5B;AAAA,MACA,CAAC,gBAAgB;AAAA,KACnB;AAEA,IAAA,MAAM,YAAkC,GAAA,OAAA;AAAA,MACtC,OAAO;AAAA,QACL,IAAM,EAAA,SAAA;AAAA,QACN,KAAA;AAAA,QACA;AAAA,OACF,CAAA;AAAA,MACA,CAAC,SAAW,EAAA,KAAA,EAAO,YAAY;AAAA,KACjC;AAEA,IAAM,MAAA,EAAE,QAAS,EAAA,GAAI,gBAAiB,EAAA;AACtC,IAAM,MAAA,OAAA,GAAU,OAAgB,KAAK,CAAA;AAErC,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,IAAI,QAAQ,OAAS,EAAA;AACnB,QAAS,QAAA,CAAA,CAAA,KAAA,EAAQ,SAAS,CAAE,CAAA,CAAA;AAAA,OACvB,MAAA;AACL,QAAA,OAAA,CAAQ,OAAU,GAAA,IAAA;AAAA;AACpB,KACC,EAAA,CAAC,QAAU,EAAA,SAAS,CAAC,CAAA;AAExB,IAAA,IAAI,QAAQ,CAAG,EAAA;AACb,MAAO,OAAA,IAAA;AAAA;AAGT,IACE,uBAAA,GAAA,CAAC,QAAS,EAAA,EAAA,KAAA,EAAO,YACf,EAAA,QAAA,kBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QACzC,GAAA;AAAA,QACC,GAAG,SAAA;AAAA,QAEH;AAAA;AAAA,KAEL,EAAA,CAAA;AAAA;AAGN;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PaginationContext.js","sources":["../src/pagination/PaginationContext.ts"],"sourcesContent":["import { type SyntheticEvent, createContext } from \"react\";\n\nexport interface PaginationContext {\n page: number;\n count: number;\n onPageChange: (event: SyntheticEvent, page: number) => void;\n}\n\nexport const paginationContext = createContext<PaginationContext>({\n page: 0,\n count: 0,\n onPageChange: () => undefined,\n});\n\nif (process.env.NODE_ENV !== \"production\") {\n paginationContext.displayName = \"PaginationContext\";\n}\n"],"names":[],"mappings":";;AAQO,MAAM,oBAAoB,aAAiC,CAAA;AAAA,EAChE,IAAM,EAAA,CAAA;AAAA,EACN,KAAO,EAAA,CAAA;AAAA,EACP,cAAc,MAAM
|
|
1
|
+
{"version":3,"file":"PaginationContext.js","sources":["../src/pagination/PaginationContext.ts"],"sourcesContent":["import { type SyntheticEvent, createContext } from \"react\";\n\nexport interface PaginationContext {\n page: number;\n count: number;\n onPageChange: (event: SyntheticEvent, page: number) => void;\n}\n\nexport const paginationContext = createContext<PaginationContext>({\n page: 0,\n count: 0,\n onPageChange: () => undefined,\n});\n\nif (process.env.NODE_ENV !== \"production\") {\n paginationContext.displayName = \"PaginationContext\";\n}\n"],"names":[],"mappings":";;AAQO,MAAM,oBAAoB,aAAiC,CAAA;AAAA,EAChE,IAAM,EAAA,CAAA;AAAA,EACN,KAAO,EAAA,CAAA;AAAA,EACP,cAAc,MAAM;AACtB,CAAC;AAED,IAAI,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,EAAA,iBAAA,CAAkB,WAAc,GAAA,mBAAA;AAClC;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"usePagination.js","sources":["../src/pagination/usePagination.ts"],"sourcesContent":["export type PageRange = [number, number];\n\nexport function usePagination(\n page: number,\n count: number,\n boundaryCount: number,\n siblingCount: number,\n) {\n const totalButtonsVisible = 2 * (boundaryCount + siblingCount) + 3;\n const isEnoughSpace = totalButtonsVisible >= count;\n\n const isLeftEllipsis =\n !isEnoughSpace && page - boundaryCount - siblingCount > 2;\n\n const isRightEllipsis =\n !isEnoughSpace && page + boundaryCount + siblingCount + 1 < count;\n\n const leftPages = isLeftEllipsis\n ? ([1, boundaryCount] as PageRange)\n : undefined;\n\n const rightPages = isRightEllipsis\n ? ([count - boundaryCount + 1, count] as PageRange)\n : undefined;\n\n let middlePages: PageRange;\n\n if (!isLeftEllipsis) {\n middlePages = [\n 1,\n isRightEllipsis ? boundaryCount + 2 + 2 * siblingCount : count,\n ];\n } else if (!isRightEllipsis) {\n middlePages = [count - boundaryCount - 1 - 2 * siblingCount, count];\n } else {\n middlePages = [page - siblingCount, page + siblingCount];\n }\n\n return [leftPages, middlePages, rightPages] as const;\n}\n"],"names":[],"mappings":"AAEO,SAAS,aACd,CAAA,IAAA,EACA,KACA,EAAA,aAAA,EACA,YACA,EAAA;AACA,EAAM,MAAA,mBAAA,GAAsB,CAAK,IAAA,aAAA,GAAgB,YAAgB,CAAA,GAAA,CAAA;AACjE,EAAA,MAAM,gBAAgB,mBAAuB,IAAA,KAAA;AAE7C,EAAA,MAAM,cACJ,GAAA,CAAC,aAAiB,IAAA,IAAA,GAAO,gBAAgB,YAAe,GAAA,CAAA;AAE1D,EAAA,MAAM,kBACJ,CAAC,aAAA,IAAiB,IAAO,GAAA,aAAA,GAAgB,eAAe,CAAI,GAAA,KAAA;AAE9D,EAAA,MAAM,SAAY,GAAA,cAAA,GACb,CAAC,CAAA,EAAG,aAAa,CAClB,GAAA,
|
|
1
|
+
{"version":3,"file":"usePagination.js","sources":["../src/pagination/usePagination.ts"],"sourcesContent":["export type PageRange = [number, number];\n\nexport function usePagination(\n page: number,\n count: number,\n boundaryCount: number,\n siblingCount: number,\n) {\n const totalButtonsVisible = 2 * (boundaryCount + siblingCount) + 3;\n const isEnoughSpace = totalButtonsVisible >= count;\n\n const isLeftEllipsis =\n !isEnoughSpace && page - boundaryCount - siblingCount > 2;\n\n const isRightEllipsis =\n !isEnoughSpace && page + boundaryCount + siblingCount + 1 < count;\n\n const leftPages = isLeftEllipsis\n ? ([1, boundaryCount] as PageRange)\n : undefined;\n\n const rightPages = isRightEllipsis\n ? ([count - boundaryCount + 1, count] as PageRange)\n : undefined;\n\n let middlePages: PageRange;\n\n if (!isLeftEllipsis) {\n middlePages = [\n 1,\n isRightEllipsis ? boundaryCount + 2 + 2 * siblingCount : count,\n ];\n } else if (!isRightEllipsis) {\n middlePages = [count - boundaryCount - 1 - 2 * siblingCount, count];\n } else {\n middlePages = [page - siblingCount, page + siblingCount];\n }\n\n return [leftPages, middlePages, rightPages] as const;\n}\n"],"names":[],"mappings":"AAEO,SAAS,aACd,CAAA,IAAA,EACA,KACA,EAAA,aAAA,EACA,YACA,EAAA;AACA,EAAM,MAAA,mBAAA,GAAsB,CAAK,IAAA,aAAA,GAAgB,YAAgB,CAAA,GAAA,CAAA;AACjE,EAAA,MAAM,gBAAgB,mBAAuB,IAAA,KAAA;AAE7C,EAAA,MAAM,cACJ,GAAA,CAAC,aAAiB,IAAA,IAAA,GAAO,gBAAgB,YAAe,GAAA,CAAA;AAE1D,EAAA,MAAM,kBACJ,CAAC,aAAA,IAAiB,IAAO,GAAA,aAAA,GAAgB,eAAe,CAAI,GAAA,KAAA;AAE9D,EAAA,MAAM,SAAY,GAAA,cAAA,GACb,CAAC,CAAA,EAAG,aAAa,CAClB,GAAA,MAAA;AAEJ,EAAA,MAAM,aAAa,eACd,GAAA,CAAC,QAAQ,aAAgB,GAAA,CAAA,EAAG,KAAK,CAClC,GAAA,MAAA;AAEJ,EAAI,IAAA,WAAA;AAEJ,EAAA,IAAI,CAAC,cAAgB,EAAA;AACnB,IAAc,WAAA,GAAA;AAAA,MACZ,CAAA;AAAA,MACA,eAAkB,GAAA,aAAA,GAAgB,CAAI,GAAA,CAAA,GAAI,YAAe,GAAA;AAAA,KAC3D;AAAA,GACF,MAAA,IAAW,CAAC,eAAiB,EAAA;AAC3B,IAAA,WAAA,GAAc,CAAC,KAAQ,GAAA,aAAA,GAAgB,CAAI,GAAA,CAAA,GAAI,cAAc,KAAK,CAAA;AAAA,GAC7D,MAAA;AACL,IAAA,WAAA,GAAc,CAAC,IAAA,GAAO,YAAc,EAAA,IAAA,GAAO,YAAY,CAAA;AAAA;AAGzD,EAAO,OAAA,CAAC,SAAW,EAAA,WAAA,EAAa,UAAU,CAAA;AAC5C;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ParentChildLayout.js","sources":["../src/parent-child-layout/ParentChildLayout.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n type ReactNode,\n forwardRef,\n useEffect,\n} from \"react\";\nimport type { Breakpoints } from \"../breakpoints\";\nimport { makePrefixer } from \"../utils\";\nimport { useIsViewportLargerThanBreakpoint } from \"./useIsViewportLargerThanBreakpoint\";\n\nimport parentChildLayoutCss from \"./ParentChildLayout.css\";\nexport interface ParentChildLayoutProps\n extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * Breakpoint at which the parent and child will stack.\n */\n collapseAtBreakpoint?: keyof Breakpoints;\n /**\n * View that is displayed when in a collapsed state.\n */\n visibleView?: \"child\" | \"parent\";\n /**\n * Controls the space between parent and child components, default is 0.\n */\n gap?: number;\n /**\n * Parent component to be rendered\n */\n parent: ReactNode;\n /**\n * Child component to be rendered\n */\n child: ReactNode;\n /**\n * Function called when the viewport size equal to or less than the collapseAtBreakpoint variable\n */\n onCollapseChange?: (isCollapsed: boolean) => void;\n}\n\nconst withBaseName = makePrefixer(\"saltParentChildLayout\");\n\nexport const ParentChildLayout = forwardRef<\n HTMLDivElement,\n ParentChildLayoutProps\n>(function ParentChildLayout(\n {\n collapseAtBreakpoint = \"sm\",\n visibleView = \"child\",\n parent,\n child,\n className,\n gap = 0,\n onCollapseChange,\n style,\n ...rest\n },\n ref,\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-parent-child-layout\",\n css: parentChildLayoutCss,\n window: targetWindow,\n });\n\n const isCollapsed = useIsViewportLargerThanBreakpoint(collapseAtBreakpoint);\n\n useEffect(() => {\n onCollapseChange?.(isCollapsed);\n }, [isCollapsed, onCollapseChange]);\n\n const parentChildLayoutStyles = {\n ...style,\n \"--parentChildLayout-gap\": `calc(var(--salt-spacing-100) * ${gap})`,\n };\n\n return (\n <div\n ref={ref}\n className={clsx(withBaseName(), className)}\n style={parentChildLayoutStyles}\n {...rest}\n >\n {isCollapsed ? (\n <div\n key={visibleView}\n className={clsx({\n [withBaseName(\"collapsed\")]: isCollapsed,\n [withBaseName(\"childAnimation\")]: visibleView === \"child\",\n [withBaseName(\"parentAnimation\")]: visibleView === \"parent\",\n })}\n >\n {isCollapsed && visibleView === \"child\" ? child : parent}\n </div>\n ) : (\n <>\n <div className={withBaseName(\"parent\")}>{parent}</div>\n <div className={withBaseName(\"child\")}>{child}</div>\n </>\n )}\n </div>\n );\n});\n"],"names":["ParentChildLayout","parentChildLayoutCss"],"mappings":";;;;;;;;;;;;;AA0CA,MAAM,YAAA,GAAe,aAAa,uBAAuB,CAAA;AAE5C,MAAA,iBAAA,GAAoB,UAG/B,CAAA,SAASA,kBACT,CAAA;AAAA,EACE,oBAAuB,GAAA,IAAA;AAAA,EACvB,WAAc,GAAA,OAAA;AAAA,EACd,MAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAM,GAAA,CAAA;AAAA,EACN,gBAAA;AAAA,EACA,KAAA;AAAA,EACA,GAAG;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,0BAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,WAAA,GAAc,kCAAkC,oBAAoB,CAAA;AAE1E,EAAA,SAAA,CAAU,MAAM;AACd,IAAmB,gBAAA,IAAA,IAAA,GAAA,
|
|
1
|
+
{"version":3,"file":"ParentChildLayout.js","sources":["../src/parent-child-layout/ParentChildLayout.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n type ReactNode,\n forwardRef,\n useEffect,\n} from \"react\";\nimport type { Breakpoints } from \"../breakpoints\";\nimport { makePrefixer } from \"../utils\";\nimport { useIsViewportLargerThanBreakpoint } from \"./useIsViewportLargerThanBreakpoint\";\n\nimport parentChildLayoutCss from \"./ParentChildLayout.css\";\nexport interface ParentChildLayoutProps\n extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * Breakpoint at which the parent and child will stack.\n */\n collapseAtBreakpoint?: keyof Breakpoints;\n /**\n * View that is displayed when in a collapsed state.\n */\n visibleView?: \"child\" | \"parent\";\n /**\n * Controls the space between parent and child components, default is 0.\n */\n gap?: number;\n /**\n * Parent component to be rendered\n */\n parent: ReactNode;\n /**\n * Child component to be rendered\n */\n child: ReactNode;\n /**\n * Function called when the viewport size equal to or less than the collapseAtBreakpoint variable\n */\n onCollapseChange?: (isCollapsed: boolean) => void;\n}\n\nconst withBaseName = makePrefixer(\"saltParentChildLayout\");\n\nexport const ParentChildLayout = forwardRef<\n HTMLDivElement,\n ParentChildLayoutProps\n>(function ParentChildLayout(\n {\n collapseAtBreakpoint = \"sm\",\n visibleView = \"child\",\n parent,\n child,\n className,\n gap = 0,\n onCollapseChange,\n style,\n ...rest\n },\n ref,\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-parent-child-layout\",\n css: parentChildLayoutCss,\n window: targetWindow,\n });\n\n const isCollapsed = useIsViewportLargerThanBreakpoint(collapseAtBreakpoint);\n\n useEffect(() => {\n onCollapseChange?.(isCollapsed);\n }, [isCollapsed, onCollapseChange]);\n\n const parentChildLayoutStyles = {\n ...style,\n \"--parentChildLayout-gap\": `calc(var(--salt-spacing-100) * ${gap})`,\n };\n\n return (\n <div\n ref={ref}\n className={clsx(withBaseName(), className)}\n style={parentChildLayoutStyles}\n {...rest}\n >\n {isCollapsed ? (\n <div\n key={visibleView}\n className={clsx({\n [withBaseName(\"collapsed\")]: isCollapsed,\n [withBaseName(\"childAnimation\")]: visibleView === \"child\",\n [withBaseName(\"parentAnimation\")]: visibleView === \"parent\",\n })}\n >\n {isCollapsed && visibleView === \"child\" ? child : parent}\n </div>\n ) : (\n <>\n <div className={withBaseName(\"parent\")}>{parent}</div>\n <div className={withBaseName(\"child\")}>{child}</div>\n </>\n )}\n </div>\n );\n});\n"],"names":["ParentChildLayout","parentChildLayoutCss"],"mappings":";;;;;;;;;;;;;AA0CA,MAAM,YAAA,GAAe,aAAa,uBAAuB,CAAA;AAE5C,MAAA,iBAAA,GAAoB,UAG/B,CAAA,SAASA,kBACT,CAAA;AAAA,EACE,oBAAuB,GAAA,IAAA;AAAA,EACvB,WAAc,GAAA,OAAA;AAAA,EACd,MAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAM,GAAA,CAAA;AAAA,EACN,gBAAA;AAAA,EACA,KAAA;AAAA,EACA,GAAG;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,0BAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,WAAA,GAAc,kCAAkC,oBAAoB,CAAA;AAE1E,EAAA,SAAA,CAAU,MAAM;AACd,IAAmB,gBAAA,IAAA,IAAA,GAAA,MAAA,GAAA,gBAAA,CAAA,WAAA,CAAA;AAAA,GAClB,EAAA,CAAC,WAAa,EAAA,gBAAgB,CAAC,CAAA;AAElC,EAAA,MAAM,uBAA0B,GAAA;AAAA,IAC9B,GAAG,KAAA;AAAA,IACH,yBAAA,EAA2B,kCAAkC,GAAG,CAAA,CAAA;AAAA,GAClE;AAEA,EACE,uBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,KAAO,EAAA,uBAAA;AAAA,MACN,GAAG,IAAA;AAAA,MAEH,QACC,EAAA,WAAA,mBAAA,GAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UAEC,WAAW,IAAK,CAAA;AAAA,YACd,CAAC,YAAA,CAAa,WAAW,CAAC,GAAG,WAAA;AAAA,YAC7B,CAAC,YAAA,CAAa,gBAAgB,CAAC,GAAG,WAAgB,KAAA,OAAA;AAAA,YAClD,CAAC,YAAA,CAAa,iBAAiB,CAAC,GAAG,WAAgB,KAAA;AAAA,WACpD,CAAA;AAAA,UAEA,QAAA,EAAA,WAAA,IAAe,WAAgB,KAAA,OAAA,GAAU,KAAQ,GAAA;AAAA,SAAA;AAAA,QAP7C;AAAA,0BAWL,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,YAAa,CAAA,QAAQ,GAAI,QAAO,EAAA,MAAA,EAAA,CAAA;AAAA,4BAC/C,KAAI,EAAA,EAAA,SAAA,EAAW,YAAa,CAAA,OAAO,GAAI,QAAM,EAAA,KAAA,EAAA;AAAA,OAChD,EAAA;AAAA;AAAA,GAEJ;AAEJ,CAAC;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PillInput.js","sources":["../src/pill-input/PillInput.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ChangeEvent,\n type ComponentPropsWithoutRef,\n type FocusEvent,\n type ForwardedRef,\n type InputHTMLAttributes,\n type KeyboardEvent,\n type MouseEvent,\n type ReactNode,\n type Ref,\n type SyntheticEvent,\n forwardRef,\n useRef,\n useState,\n} from \"react\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { Pill } from \"../pill\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { StatusAdornment } from \"../status-adornment\";\nimport type { DataAttributes } from \"../types\";\nimport { makePrefixer, useControlled, useForkRef, useId } from \"../utils\";\nimport { useTruncatePills } from \"./useTruncatePills\";\n\nimport pillInputCss from \"./PillInput.css\";\n\nconst withBaseName = makePrefixer(\"saltPillInput\");\n\nexport interface PillInputProps\n extends Omit<ComponentPropsWithoutRef<\"div\">, \"defaultValue\">,\n Pick<\n ComponentPropsWithoutRef<\"input\">,\n \"disabled\" | \"value\" | \"defaultValue\" | \"placeholder\"\n > {\n /**\n * The marker to use in an empty read only Input.\n * Use `''` to disable this feature. Defaults to '—'.\n */\n emptyReadOnlyMarker?: string;\n /**\n * End adornment component\n */\n endAdornment?: ReactNode;\n /**\n * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.\n */\n inputProps?: Partial<InputHTMLAttributes<HTMLInputElement>> & DataAttributes;\n /**\n * Optional ref for the input component\n */\n inputRef?: Ref<HTMLInputElement>;\n /**\n * If `true`, the component is read only.\n */\n readOnly?: boolean;\n /**\n * The tokens to display in the input.\n */\n pills?: string[];\n onPillRemove?: (event: SyntheticEvent, index: number) => void;\n /**\n * Start adornment component\n */\n startAdornment?: ReactNode;\n /**\n * Alignment of text within container. Defaults to \"left\"\n */\n textAlign?: \"left\" | \"center\" | \"right\";\n /**\n * Validation status.\n */\n validationStatus?: \"error\" | \"warning\" | \"success\";\n /**\n * Styling variant. Defaults to \"primary\".\n */\n variant?: \"primary\" | \"secondary\";\n hidePillClose?: boolean;\n truncate?: boolean;\n /** Styling variant with full border. Defaults to false\n */\n bordered?: boolean;\n}\n\nexport const PillInput = forwardRef(function PillInput(\n {\n \"aria-activedescendant\": ariaActiveDescendant,\n \"aria-expanded\": ariaExpanded,\n \"aria-owns\": ariaOwns,\n className: classNameProp,\n disabled,\n emptyReadOnlyMarker = \"—\",\n endAdornment,\n hidePillClose,\n id: idProp,\n inputProps = {},\n inputRef: inputRefProp,\n placeholder,\n pills = [],\n onPillRemove,\n readOnly: readOnlyProp,\n role,\n startAdornment,\n style,\n textAlign = \"left\",\n value: valueProp,\n defaultValue: defaultValueProp = valueProp === undefined ? \"\" : undefined,\n validationStatus: validationStatusProp,\n variant = \"primary\",\n truncate,\n bordered = false,\n ...other\n }: PillInputProps,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const targetWindow = useWindow();\n const { OverflowIcon, CloseIcon } = useIcon();\n useComponentCssInjection({\n testId: \"salt-pill-input\",\n css: pillInputCss,\n window: targetWindow,\n });\n\n const {\n a11yProps: {\n \"aria-describedby\": formFieldDescribedBy,\n \"aria-labelledby\": formFieldLabelledBy,\n } = {},\n disabled: formFieldDisabled,\n readOnly: formFieldReadOnly,\n necessity: formFieldRequired,\n validationStatus: formFieldValidationStatus,\n } = useFormFieldProps();\n\n const restA11yProps = {\n \"aria-activedescendant\": ariaActiveDescendant,\n \"aria-expanded\": ariaExpanded,\n \"aria-owns\": ariaOwns,\n };\n\n const isDisabled = disabled || formFieldDisabled;\n const isReadOnly = readOnlyProp || formFieldReadOnly;\n const validationStatus = formFieldValidationStatus ?? validationStatusProp;\n\n const [focused, setFocused] = useState(false);\n const [focusedPillIndex, setFocusedPillIndex] = useState(-1);\n\n const isEmptyReadOnly = isReadOnly && !defaultValueProp && !valueProp;\n const defaultValue = isEmptyReadOnly ? emptyReadOnlyMarker : defaultValueProp;\n\n const {\n \"aria-describedby\": inputDescribedBy,\n \"aria-labelledby\": inputLabelledBy,\n onBlur,\n onFocus,\n onChange,\n required: inputPropsRequired,\n onKeyDown: inputOnKeyDown,\n ...restInputProps\n } = inputProps;\n\n const isRequired = formFieldRequired\n ? [\"required\", \"asterisk\"].includes(formFieldRequired)\n : inputPropsRequired;\n\n const [value, setValue] = useControlled({\n controlled: valueProp,\n default: defaultValue,\n name: \"Input\",\n state: \"value\",\n });\n\n const { visiblePills, pillListRef } = useTruncatePills({\n pills,\n enable: truncate && pills.length > 0,\n });\n\n const id = useId(idProp);\n const pillListId = `${id}-optionsList`;\n\n const pillElementsRef = useRef<HTMLElement[]>([]);\n const inputRef = useRef<HTMLInputElement>(null);\n\n const handleInputRef = useForkRef(inputRef, inputRefProp);\n\n const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n const value = event.target.value;\n setValue(value);\n onChange?.(event);\n };\n\n const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n const target = event.currentTarget;\n if (target.selectionStart === 0 && target.selectionEnd === 0) {\n const lastPillIndex = pills.length - 1;\n const lastPill = pills[lastPillIndex];\n if (event.key === \"Backspace\" && lastPill) {\n event.preventDefault();\n onPillRemove?.(event, lastPillIndex);\n } else if (event.key === \"ArrowLeft\") {\n event.preventDefault();\n // Move focus to last pill\n pillElementsRef.current[lastPillIndex]?.focus();\n }\n }\n\n inputOnKeyDown?.(event);\n };\n\n const handlePillKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n const target = event.currentTarget;\n const index = Number(target.dataset.index);\n if (event.key === \"ArrowLeft\") {\n event.preventDefault();\n // Move focus to previous pill\n pillElementsRef.current[index - 1]?.focus();\n } else if (event.key === \"ArrowRight\") {\n event.preventDefault();\n // Move focus to next pill or input\n if (index === pills.length - 1) {\n inputRef?.current?.focus();\n } else {\n pillElementsRef.current[index + 1]?.focus();\n }\n } else if (event.key === \"Delete\" || event.key === \"Backspace\") {\n event.preventDefault();\n onPillRemove?.(event, index);\n\n if (pills.length === 1) {\n inputRef.current?.focus();\n } else if (index === pills.length - 1) {\n pillElementsRef.current[pills.length - 2]?.focus();\n } else {\n pillElementsRef.current[index]?.focus();\n }\n }\n };\n\n const handlePillClick = (event: MouseEvent<HTMLButtonElement>) => {\n const target = event.currentTarget;\n const index = Number(target.dataset.index);\n onPillRemove?.(event, index);\n inputRef.current?.focus();\n };\n\n const handleBlur = (event: FocusEvent<HTMLInputElement>) => {\n onBlur?.(event);\n setFocused(false);\n };\n\n const handleFocus = (event: FocusEvent<HTMLInputElement>) => {\n onFocus?.(event);\n setFocused(true);\n };\n\n const inputStyle = {\n \"--input-textAlign\": textAlign,\n ...style,\n };\n\n return (\n <div\n className={clsx(\n withBaseName(),\n withBaseName(variant),\n {\n [withBaseName(\"focused\")]: !isDisabled && focused,\n [withBaseName(\"disabled\")]: isDisabled,\n [withBaseName(\"readOnly\")]: isReadOnly,\n [withBaseName(\"truncate\")]: truncate,\n [withBaseName(validationStatus ?? \"\")]: validationStatus,\n [withBaseName(\"bordered\")]: bordered,\n },\n classNameProp,\n )}\n ref={ref}\n style={inputStyle}\n {...other}\n >\n {startAdornment && (\n <div className={withBaseName(\"startAdornmentContainer\")}>\n {startAdornment}\n </div>\n )}\n <div className={withBaseName(\"inputWrapper\")} ref={pillListRef}>\n <div\n role=\"list\"\n className={withBaseName(\"pillList\")}\n aria-labelledby={clsx(formFieldLabelledBy, pillListId)}\n aria-label=\"Selected Options\"\n id={pillListId}\n >\n {visiblePills?.map((pill, index) => (\n <div role=\"listitem\" key={pill}>\n <Pill\n data-index={index}\n disabled={disabled}\n ref={(element) => {\n if (element) {\n pillElementsRef.current[index] = element;\n } else {\n pillElementsRef.current = pillElementsRef.current.filter(\n (pillEl) => pillEl !== element,\n );\n }\n }}\n onFocus={() => setFocusedPillIndex(index)}\n onKeyDown={handlePillKeyDown}\n onClick={handlePillClick}\n tabIndex={\n focusedPillIndex === -1 || focusedPillIndex === index ? 0 : -1\n }\n >\n {pill}\n {!hidePillClose && <CloseIcon aria-label=\"click to close\" />}\n </Pill>\n </div>\n ))}\n {visiblePills.length < pills.length && (\n <div role=\"listitem\">\n <div\n data-overflowindicator\n className={withBaseName(\"overflowIndicator\")}\n >\n <OverflowIcon aria-hidden />\n </div>\n </div>\n )}\n </div>\n <input\n aria-describedby={clsx(formFieldDescribedBy, inputDescribedBy)}\n aria-labelledby={clsx(formFieldLabelledBy, inputLabelledBy)}\n autoComplete=\"off\"\n className={clsx(withBaseName(\"input\"), inputProps?.className)}\n disabled={isDisabled}\n id={id}\n readOnly={isReadOnly}\n ref={handleInputRef}\n role={role}\n tabIndex={isDisabled ? -1 : 0}\n onBlur={handleBlur}\n onChange={handleChange}\n onFocus={!isDisabled ? handleFocus : undefined}\n onKeyDown={handleKeyDown}\n placeholder={placeholder}\n value={value}\n {...restA11yProps}\n {...restInputProps}\n required={isRequired}\n />\n </div>\n {!isDisabled && validationStatus && (\n <div className={withBaseName(\"statusAdornmentContainer\")}>\n <StatusAdornment status={validationStatus} />\n </div>\n )}\n {endAdornment && (\n <div className={withBaseName(\"endAdornmentContainer\")}>\n {endAdornment}\n </div>\n )}\n <div className={withBaseName(\"activationIndicator\")} />\n </div>\n );\n});\n"],"names":["PillInput","pillInputCss","value"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"PillInput.js","sources":["../src/pill-input/PillInput.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ChangeEvent,\n type ComponentPropsWithoutRef,\n type FocusEvent,\n type ForwardedRef,\n type InputHTMLAttributes,\n type KeyboardEvent,\n type MouseEvent,\n type ReactNode,\n type Ref,\n type SyntheticEvent,\n forwardRef,\n useRef,\n useState,\n} from \"react\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { Pill } from \"../pill\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { StatusAdornment } from \"../status-adornment\";\nimport type { DataAttributes } from \"../types\";\nimport { makePrefixer, useControlled, useForkRef, useId } from \"../utils\";\nimport { useTruncatePills } from \"./useTruncatePills\";\n\nimport pillInputCss from \"./PillInput.css\";\n\nconst withBaseName = makePrefixer(\"saltPillInput\");\n\nexport interface PillInputProps\n extends Omit<ComponentPropsWithoutRef<\"div\">, \"defaultValue\">,\n Pick<\n ComponentPropsWithoutRef<\"input\">,\n \"disabled\" | \"value\" | \"defaultValue\" | \"placeholder\"\n > {\n /**\n * The marker to use in an empty read only Input.\n * Use `''` to disable this feature. Defaults to '—'.\n */\n emptyReadOnlyMarker?: string;\n /**\n * End adornment component\n */\n endAdornment?: ReactNode;\n /**\n * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.\n */\n inputProps?: Partial<InputHTMLAttributes<HTMLInputElement>> & DataAttributes;\n /**\n * Optional ref for the input component\n */\n inputRef?: Ref<HTMLInputElement>;\n /**\n * If `true`, the component is read only.\n */\n readOnly?: boolean;\n /**\n * The tokens to display in the input.\n */\n pills?: string[];\n onPillRemove?: (event: SyntheticEvent, index: number) => void;\n /**\n * Start adornment component\n */\n startAdornment?: ReactNode;\n /**\n * Alignment of text within container. Defaults to \"left\"\n */\n textAlign?: \"left\" | \"center\" | \"right\";\n /**\n * Validation status.\n */\n validationStatus?: \"error\" | \"warning\" | \"success\";\n /**\n * Styling variant. Defaults to \"primary\".\n */\n variant?: \"primary\" | \"secondary\";\n hidePillClose?: boolean;\n truncate?: boolean;\n /** Styling variant with full border. Defaults to false\n */\n bordered?: boolean;\n}\n\nexport const PillInput = forwardRef(function PillInput(\n {\n \"aria-activedescendant\": ariaActiveDescendant,\n \"aria-expanded\": ariaExpanded,\n \"aria-owns\": ariaOwns,\n className: classNameProp,\n disabled,\n emptyReadOnlyMarker = \"—\",\n endAdornment,\n hidePillClose,\n id: idProp,\n inputProps = {},\n inputRef: inputRefProp,\n placeholder,\n pills = [],\n onPillRemove,\n readOnly: readOnlyProp,\n role,\n startAdornment,\n style,\n textAlign = \"left\",\n value: valueProp,\n defaultValue: defaultValueProp = valueProp === undefined ? \"\" : undefined,\n validationStatus: validationStatusProp,\n variant = \"primary\",\n truncate,\n bordered = false,\n ...other\n }: PillInputProps,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const targetWindow = useWindow();\n const { OverflowIcon, CloseIcon } = useIcon();\n useComponentCssInjection({\n testId: \"salt-pill-input\",\n css: pillInputCss,\n window: targetWindow,\n });\n\n const {\n a11yProps: {\n \"aria-describedby\": formFieldDescribedBy,\n \"aria-labelledby\": formFieldLabelledBy,\n } = {},\n disabled: formFieldDisabled,\n readOnly: formFieldReadOnly,\n necessity: formFieldRequired,\n validationStatus: formFieldValidationStatus,\n } = useFormFieldProps();\n\n const restA11yProps = {\n \"aria-activedescendant\": ariaActiveDescendant,\n \"aria-expanded\": ariaExpanded,\n \"aria-owns\": ariaOwns,\n };\n\n const isDisabled = disabled || formFieldDisabled;\n const isReadOnly = readOnlyProp || formFieldReadOnly;\n const validationStatus = formFieldValidationStatus ?? validationStatusProp;\n\n const [focused, setFocused] = useState(false);\n const [focusedPillIndex, setFocusedPillIndex] = useState(-1);\n\n const isEmptyReadOnly = isReadOnly && !defaultValueProp && !valueProp;\n const defaultValue = isEmptyReadOnly ? emptyReadOnlyMarker : defaultValueProp;\n\n const {\n \"aria-describedby\": inputDescribedBy,\n \"aria-labelledby\": inputLabelledBy,\n onBlur,\n onFocus,\n onChange,\n required: inputPropsRequired,\n onKeyDown: inputOnKeyDown,\n ...restInputProps\n } = inputProps;\n\n const isRequired = formFieldRequired\n ? [\"required\", \"asterisk\"].includes(formFieldRequired)\n : inputPropsRequired;\n\n const [value, setValue] = useControlled({\n controlled: valueProp,\n default: defaultValue,\n name: \"Input\",\n state: \"value\",\n });\n\n const { visiblePills, pillListRef } = useTruncatePills({\n pills,\n enable: truncate && pills.length > 0,\n });\n\n const id = useId(idProp);\n const pillListId = `${id}-optionsList`;\n\n const pillElementsRef = useRef<HTMLElement[]>([]);\n const inputRef = useRef<HTMLInputElement>(null);\n\n const handleInputRef = useForkRef(inputRef, inputRefProp);\n\n const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n const value = event.target.value;\n setValue(value);\n onChange?.(event);\n };\n\n const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n const target = event.currentTarget;\n if (target.selectionStart === 0 && target.selectionEnd === 0) {\n const lastPillIndex = pills.length - 1;\n const lastPill = pills[lastPillIndex];\n if (event.key === \"Backspace\" && lastPill) {\n event.preventDefault();\n onPillRemove?.(event, lastPillIndex);\n } else if (event.key === \"ArrowLeft\") {\n event.preventDefault();\n // Move focus to last pill\n pillElementsRef.current[lastPillIndex]?.focus();\n }\n }\n\n inputOnKeyDown?.(event);\n };\n\n const handlePillKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n const target = event.currentTarget;\n const index = Number(target.dataset.index);\n if (event.key === \"ArrowLeft\") {\n event.preventDefault();\n // Move focus to previous pill\n pillElementsRef.current[index - 1]?.focus();\n } else if (event.key === \"ArrowRight\") {\n event.preventDefault();\n // Move focus to next pill or input\n if (index === pills.length - 1) {\n inputRef?.current?.focus();\n } else {\n pillElementsRef.current[index + 1]?.focus();\n }\n } else if (event.key === \"Delete\" || event.key === \"Backspace\") {\n event.preventDefault();\n onPillRemove?.(event, index);\n\n if (pills.length === 1) {\n inputRef.current?.focus();\n } else if (index === pills.length - 1) {\n pillElementsRef.current[pills.length - 2]?.focus();\n } else {\n pillElementsRef.current[index]?.focus();\n }\n }\n };\n\n const handlePillClick = (event: MouseEvent<HTMLButtonElement>) => {\n const target = event.currentTarget;\n const index = Number(target.dataset.index);\n onPillRemove?.(event, index);\n inputRef.current?.focus();\n };\n\n const handleBlur = (event: FocusEvent<HTMLInputElement>) => {\n onBlur?.(event);\n setFocused(false);\n };\n\n const handleFocus = (event: FocusEvent<HTMLInputElement>) => {\n onFocus?.(event);\n setFocused(true);\n };\n\n const inputStyle = {\n \"--input-textAlign\": textAlign,\n ...style,\n };\n\n return (\n <div\n className={clsx(\n withBaseName(),\n withBaseName(variant),\n {\n [withBaseName(\"focused\")]: !isDisabled && focused,\n [withBaseName(\"disabled\")]: isDisabled,\n [withBaseName(\"readOnly\")]: isReadOnly,\n [withBaseName(\"truncate\")]: truncate,\n [withBaseName(validationStatus ?? \"\")]: validationStatus,\n [withBaseName(\"bordered\")]: bordered,\n },\n classNameProp,\n )}\n ref={ref}\n style={inputStyle}\n {...other}\n >\n {startAdornment && (\n <div className={withBaseName(\"startAdornmentContainer\")}>\n {startAdornment}\n </div>\n )}\n <div className={withBaseName(\"inputWrapper\")} ref={pillListRef}>\n <div\n role=\"list\"\n className={withBaseName(\"pillList\")}\n aria-labelledby={clsx(formFieldLabelledBy, pillListId)}\n aria-label=\"Selected Options\"\n id={pillListId}\n >\n {visiblePills?.map((pill, index) => (\n <div role=\"listitem\" key={pill}>\n <Pill\n data-index={index}\n disabled={disabled}\n ref={(element) => {\n if (element) {\n pillElementsRef.current[index] = element;\n } else {\n pillElementsRef.current = pillElementsRef.current.filter(\n (pillEl) => pillEl !== element,\n );\n }\n }}\n onFocus={() => setFocusedPillIndex(index)}\n onKeyDown={handlePillKeyDown}\n onClick={handlePillClick}\n tabIndex={\n focusedPillIndex === -1 || focusedPillIndex === index ? 0 : -1\n }\n >\n {pill}\n {!hidePillClose && <CloseIcon aria-label=\"click to close\" />}\n </Pill>\n </div>\n ))}\n {visiblePills.length < pills.length && (\n <div role=\"listitem\">\n <div\n data-overflowindicator\n className={withBaseName(\"overflowIndicator\")}\n >\n <OverflowIcon aria-hidden />\n </div>\n </div>\n )}\n </div>\n <input\n aria-describedby={clsx(formFieldDescribedBy, inputDescribedBy)}\n aria-labelledby={clsx(formFieldLabelledBy, inputLabelledBy)}\n autoComplete=\"off\"\n className={clsx(withBaseName(\"input\"), inputProps?.className)}\n disabled={isDisabled}\n id={id}\n readOnly={isReadOnly}\n ref={handleInputRef}\n role={role}\n tabIndex={isDisabled ? -1 : 0}\n onBlur={handleBlur}\n onChange={handleChange}\n onFocus={!isDisabled ? handleFocus : undefined}\n onKeyDown={handleKeyDown}\n placeholder={placeholder}\n value={value}\n {...restA11yProps}\n {...restInputProps}\n required={isRequired}\n />\n </div>\n {!isDisabled && validationStatus && (\n <div className={withBaseName(\"statusAdornmentContainer\")}>\n <StatusAdornment status={validationStatus} />\n </div>\n )}\n {endAdornment && (\n <div className={withBaseName(\"endAdornmentContainer\")}>\n {endAdornment}\n </div>\n )}\n <div className={withBaseName(\"activationIndicator\")} />\n </div>\n );\n});\n"],"names":["PillInput","pillInputCss","value"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CircularProgress.js","sources":["../src/progress/CircularProgress/CircularProgress.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 forwardRef,\n} from \"react\";\nimport { Text } from \"../../text\";\nimport { makePrefixer } from \"../../utils\";\n\nimport circularProgressCSS from \"./CircularProgress.css\";\n\nconst withBaseName = makePrefixer(\"saltCircularProgress\");\n\nconst getRotationAngle = (bar: number, shift = 0) => {\n return -180 + ((bar - shift) / 50) * 180;\n};\n\nexport interface CircularProgressProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * The value of the buffer indicator.\n * Value between 0 and max.\n */\n bufferValue?: number;\n /**\n * Whether to hide the text label within the progress. Defaults to `false`.\n */\n hideLabel?: boolean;\n /**\n * The value of the max progress indicator.\n * Default value is 100.\n */\n max?: number;\n /**\n * The value of the min progress indicator.\n * Default value is 0.\n */\n min?: number;\n /**\n * The value of the progress indicator.\n * Value between 0 and max.\n */\n value?: number;\n}\n\nexport const CircularProgress = forwardRef<\n HTMLDivElement,\n CircularProgressProps\n>(function CircularProgress(\n {\n className,\n hideLabel = false,\n max = 100,\n min = 0,\n value = 0,\n bufferValue = 0,\n ...rest\n },\n ref,\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-circular-progress\",\n css: circularProgressCSS,\n window: targetWindow,\n });\n\n const bufferSubOverlayRightStyle: CSSProperties = {};\n const bufferSubOverlayLeftStyle: CSSProperties = {};\n const barSubOverlayRightStyle: CSSProperties = {};\n const barSubOverlayLeftStyle: CSSProperties = {};\n\n const buffer = ((bufferValue - min) / (max - min)) * 100;\n const progress = ((value - min) / (max - min)) * 100;\n\n if (progress <= 50) {\n const rotationAngle = getRotationAngle(progress);\n barSubOverlayRightStyle.transform = `rotate(${rotationAngle}deg)`;\n barSubOverlayLeftStyle.transform = \"rotate(-180deg)\";\n } else {\n const rotationAngle = getRotationAngle(progress, 50);\n barSubOverlayRightStyle.transform = \"rotate(0deg)\";\n barSubOverlayLeftStyle.transform = `rotate(${rotationAngle}deg)`;\n }\n if (buffer <= 50) {\n const rotationAngle = getRotationAngle(buffer);\n bufferSubOverlayRightStyle.transform = `rotate(${rotationAngle}deg)`;\n bufferSubOverlayLeftStyle.transform = \"rotate(-180deg)\";\n } else {\n const rotationAngle = getRotationAngle(buffer, 50);\n bufferSubOverlayRightStyle.transform = \"rotate(0deg)\";\n bufferSubOverlayLeftStyle.transform = `rotate(${rotationAngle}deg)`;\n }\n\n return (\n <div\n className={clsx(withBaseName(), className)}\n ref={ref}\n role=\"progressbar\"\n aria-valuemax={max}\n aria-valuemin={min}\n aria-valuenow={Math.round(value)}\n {...rest}\n >\n <div className={withBaseName(\"track\")} />\n <div className={withBaseName(\"bars\")}>\n {buffer > 0 && (\n <div className={withBaseName(\"bufferOverlayRight\")}>\n <div\n className={clsx(withBaseName(\"bufferSubOverlayRight\"), {\n [withBaseName(\"bufferSubOverlay\")]: buffer <= 50,\n })}\n style={bufferSubOverlayRightStyle}\n >\n <div className={withBaseName(\"bufferBackground\")} />\n <div className={withBaseName(\"bufferBorder\")} />\n </div>\n </div>\n )}\n <div className={withBaseName(\"barOverlayRight\")}>\n <div\n className={withBaseName(\"barSubOverlayRight\")}\n style={barSubOverlayRightStyle}\n >\n <div className={withBaseName(\"bar\")} />\n </div>\n </div>\n {buffer > 0 && (\n <div className={withBaseName(\"bufferOverlayLeft\")}>\n <div\n className={clsx(\n withBaseName(\"bufferSubOverlay\"),\n withBaseName(\"bufferSubOverlayLeft\"),\n )}\n style={bufferSubOverlayLeftStyle}\n >\n <div className={withBaseName(\"bufferBorder\")} />\n <div className={withBaseName(\"bufferBackground\")} />\n </div>\n </div>\n )}\n <div className={withBaseName(\"barOverlayLeft\")}>\n <div\n className={withBaseName(\"barSubOverlayLeft\")}\n style={barSubOverlayLeftStyle}\n >\n <div className={withBaseName(\"bar\")} />\n </div>\n </div>\n </div>\n {!hideLabel && (\n <Text styleAs=\"h2\" className={withBaseName(\"progressLabel\")}>\n {`${Math.round(progress)} %`}\n </Text>\n )}\n </div>\n );\n});\n"],"names":["CircularProgress","circularProgressCSS"],"mappings":";;;;;;;;;;;;;;;;;;;AAaA,MAAM,YAAA,GAAe,aAAa,sBAAsB,CAAA;AAExD,MAAM,gBAAmB,GAAA,CAAC,GAAa,EAAA,KAAA,GAAQ,CAAM,KAAA;AACnD,EAAO,OAAA,
|
|
1
|
+
{"version":3,"file":"CircularProgress.js","sources":["../src/progress/CircularProgress/CircularProgress.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 forwardRef,\n} from \"react\";\nimport { Text } from \"../../text\";\nimport { makePrefixer } from \"../../utils\";\n\nimport circularProgressCSS from \"./CircularProgress.css\";\n\nconst withBaseName = makePrefixer(\"saltCircularProgress\");\n\nconst getRotationAngle = (bar: number, shift = 0) => {\n return -180 + ((bar - shift) / 50) * 180;\n};\n\nexport interface CircularProgressProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * The value of the buffer indicator.\n * Value between 0 and max.\n */\n bufferValue?: number;\n /**\n * Whether to hide the text label within the progress. Defaults to `false`.\n */\n hideLabel?: boolean;\n /**\n * The value of the max progress indicator.\n * Default value is 100.\n */\n max?: number;\n /**\n * The value of the min progress indicator.\n * Default value is 0.\n */\n min?: number;\n /**\n * The value of the progress indicator.\n * Value between 0 and max.\n */\n value?: number;\n}\n\nexport const CircularProgress = forwardRef<\n HTMLDivElement,\n CircularProgressProps\n>(function CircularProgress(\n {\n className,\n hideLabel = false,\n max = 100,\n min = 0,\n value = 0,\n bufferValue = 0,\n ...rest\n },\n ref,\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-circular-progress\",\n css: circularProgressCSS,\n window: targetWindow,\n });\n\n const bufferSubOverlayRightStyle: CSSProperties = {};\n const bufferSubOverlayLeftStyle: CSSProperties = {};\n const barSubOverlayRightStyle: CSSProperties = {};\n const barSubOverlayLeftStyle: CSSProperties = {};\n\n const buffer = ((bufferValue - min) / (max - min)) * 100;\n const progress = ((value - min) / (max - min)) * 100;\n\n if (progress <= 50) {\n const rotationAngle = getRotationAngle(progress);\n barSubOverlayRightStyle.transform = `rotate(${rotationAngle}deg)`;\n barSubOverlayLeftStyle.transform = \"rotate(-180deg)\";\n } else {\n const rotationAngle = getRotationAngle(progress, 50);\n barSubOverlayRightStyle.transform = \"rotate(0deg)\";\n barSubOverlayLeftStyle.transform = `rotate(${rotationAngle}deg)`;\n }\n if (buffer <= 50) {\n const rotationAngle = getRotationAngle(buffer);\n bufferSubOverlayRightStyle.transform = `rotate(${rotationAngle}deg)`;\n bufferSubOverlayLeftStyle.transform = \"rotate(-180deg)\";\n } else {\n const rotationAngle = getRotationAngle(buffer, 50);\n bufferSubOverlayRightStyle.transform = \"rotate(0deg)\";\n bufferSubOverlayLeftStyle.transform = `rotate(${rotationAngle}deg)`;\n }\n\n return (\n <div\n className={clsx(withBaseName(), className)}\n ref={ref}\n role=\"progressbar\"\n aria-valuemax={max}\n aria-valuemin={min}\n aria-valuenow={Math.round(value)}\n {...rest}\n >\n <div className={withBaseName(\"track\")} />\n <div className={withBaseName(\"bars\")}>\n {buffer > 0 && (\n <div className={withBaseName(\"bufferOverlayRight\")}>\n <div\n className={clsx(withBaseName(\"bufferSubOverlayRight\"), {\n [withBaseName(\"bufferSubOverlay\")]: buffer <= 50,\n })}\n style={bufferSubOverlayRightStyle}\n >\n <div className={withBaseName(\"bufferBackground\")} />\n <div className={withBaseName(\"bufferBorder\")} />\n </div>\n </div>\n )}\n <div className={withBaseName(\"barOverlayRight\")}>\n <div\n className={withBaseName(\"barSubOverlayRight\")}\n style={barSubOverlayRightStyle}\n >\n <div className={withBaseName(\"bar\")} />\n </div>\n </div>\n {buffer > 0 && (\n <div className={withBaseName(\"bufferOverlayLeft\")}>\n <div\n className={clsx(\n withBaseName(\"bufferSubOverlay\"),\n withBaseName(\"bufferSubOverlayLeft\"),\n )}\n style={bufferSubOverlayLeftStyle}\n >\n <div className={withBaseName(\"bufferBorder\")} />\n <div className={withBaseName(\"bufferBackground\")} />\n </div>\n </div>\n )}\n <div className={withBaseName(\"barOverlayLeft\")}>\n <div\n className={withBaseName(\"barSubOverlayLeft\")}\n style={barSubOverlayLeftStyle}\n >\n <div className={withBaseName(\"bar\")} />\n </div>\n </div>\n </div>\n {!hideLabel && (\n <Text styleAs=\"h2\" className={withBaseName(\"progressLabel\")}>\n {`${Math.round(progress)} %`}\n </Text>\n )}\n </div>\n );\n});\n"],"names":["CircularProgress","circularProgressCSS"],"mappings":";;;;;;;;;;;;;;;;;;;AAaA,MAAM,YAAA,GAAe,aAAa,sBAAsB,CAAA;AAExD,MAAM,gBAAmB,GAAA,CAAC,GAAa,EAAA,KAAA,GAAQ,CAAM,KAAA;AACnD,EAAO,OAAA,IAAA,GAAA,CAAS,GAAM,GAAA,KAAA,IAAS,EAAM,GAAA,GAAA;AACvC,CAAA;AA6Ba,MAAA,gBAAA,GAAmB,UAG9B,CAAA,SAASA,iBACT,CAAA;AAAA,EACE,SAAA;AAAA,EACA,SAAY,GAAA,KAAA;AAAA,EACZ,GAAM,GAAA,GAAA;AAAA,EACN,GAAM,GAAA,CAAA;AAAA,EACN,KAAQ,GAAA,CAAA;AAAA,EACR,WAAc,GAAA,CAAA;AAAA,EACd,GAAG;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,wBAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,6BAA4C,EAAC;AACnD,EAAA,MAAM,4BAA2C,EAAC;AAClD,EAAA,MAAM,0BAAyC,EAAC;AAChD,EAAA,MAAM,yBAAwC,EAAC;AAE/C,EAAA,MAAM,MAAW,GAAA,CAAA,WAAA,GAAc,GAAQ,KAAA,GAAA,GAAM,GAAQ,CAAA,GAAA,GAAA;AACrD,EAAA,MAAM,QAAa,GAAA,CAAA,KAAA,GAAQ,GAAQ,KAAA,GAAA,GAAM,GAAQ,CAAA,GAAA,GAAA;AAEjD,EAAA,IAAI,YAAY,EAAI,EAAA;AAClB,IAAM,MAAA,aAAA,GAAgB,iBAAiB,QAAQ,CAAA;AAC/C,IAAwB,uBAAA,CAAA,SAAA,GAAY,UAAU,aAAa,CAAA,IAAA,CAAA;AAC3D,IAAA,sBAAA,CAAuB,SAAY,GAAA,iBAAA;AAAA,GAC9B,MAAA;AACL,IAAM,MAAA,aAAA,GAAgB,gBAAiB,CAAA,QAAA,EAAU,EAAE,CAAA;AACnD,IAAA,uBAAA,CAAwB,SAAY,GAAA,cAAA;AACpC,IAAuB,sBAAA,CAAA,SAAA,GAAY,UAAU,aAAa,CAAA,IAAA,CAAA;AAAA;AAE5D,EAAA,IAAI,UAAU,EAAI,EAAA;AAChB,IAAM,MAAA,aAAA,GAAgB,iBAAiB,MAAM,CAAA;AAC7C,IAA2B,0BAAA,CAAA,SAAA,GAAY,UAAU,aAAa,CAAA,IAAA,CAAA;AAC9D,IAAA,yBAAA,CAA0B,SAAY,GAAA,iBAAA;AAAA,GACjC,MAAA;AACL,IAAM,MAAA,aAAA,GAAgB,gBAAiB,CAAA,MAAA,EAAQ,EAAE,CAAA;AACjD,IAAA,0BAAA,CAA2B,SAAY,GAAA,cAAA;AACvC,IAA0B,yBAAA,CAAA,SAAA,GAAY,UAAU,aAAa,CAAA,IAAA,CAAA;AAAA;AAG/D,EACE,uBAAA,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,GAAA;AAAA,MACA,IAAK,EAAA,aAAA;AAAA,MACL,eAAe,EAAA,GAAA;AAAA,MACf,eAAe,EAAA,GAAA;AAAA,MACf,eAAA,EAAe,IAAK,CAAA,KAAA,CAAM,KAAK,CAAA;AAAA,MAC9B,GAAG,IAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,YAAa,CAAA,OAAO,CAAG,EAAA,CAAA;AAAA,wBACtC,IAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,YAAA,CAAa,MAAM,CAChC,EAAA,QAAA,EAAA;AAAA,UAAA,MAAA,GAAS,qBACP,GAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,YAAA,CAAa,oBAAoB,CAC/C,EAAA,QAAA,kBAAA,IAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,uBAAuB,CAAG,EAAA;AAAA,gBACrD,CAAC,YAAA,CAAa,kBAAkB,CAAC,GAAG,MAAU,IAAA;AAAA,eAC/C,CAAA;AAAA,cACD,KAAO,EAAA,0BAAA;AAAA,cAEP,QAAA,EAAA;AAAA,gCAAA,GAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,YAAa,CAAA,kBAAkB,CAAG,EAAA,CAAA;AAAA,gCACjD,GAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,YAAA,CAAa,cAAc,CAAG,EAAA;AAAA;AAAA;AAAA,WAElD,EAAA,CAAA;AAAA,0BAED,GAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,YAAA,CAAa,iBAAiB,CAC5C,EAAA,QAAA,kBAAA,GAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,aAAa,oBAAoB,CAAA;AAAA,cAC5C,KAAO,EAAA,uBAAA;AAAA,cAEP,QAAC,kBAAA,GAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,YAAA,CAAa,KAAK,CAAG,EAAA;AAAA;AAAA,WAEzC,EAAA,CAAA;AAAA,UACC,SAAS,CACR,oBAAA,GAAA,CAAC,SAAI,SAAW,EAAA,YAAA,CAAa,mBAAmB,CAC9C,EAAA,QAAA,kBAAA,IAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,SAAW,EAAA,IAAA;AAAA,gBACT,aAAa,kBAAkB,CAAA;AAAA,gBAC/B,aAAa,sBAAsB;AAAA,eACrC;AAAA,cACA,KAAO,EAAA,yBAAA;AAAA,cAEP,QAAA,EAAA;AAAA,gCAAA,GAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,YAAa,CAAA,cAAc,CAAG,EAAA,CAAA;AAAA,gCAC7C,GAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,YAAA,CAAa,kBAAkB,CAAG,EAAA;AAAA;AAAA;AAAA,WAEtD,EAAA,CAAA;AAAA,0BAED,GAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,YAAA,CAAa,gBAAgB,CAC3C,EAAA,QAAA,kBAAA,GAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,aAAa,mBAAmB,CAAA;AAAA,cAC3C,KAAO,EAAA,sBAAA;AAAA,cAEP,QAAC,kBAAA,GAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,YAAA,CAAa,KAAK,CAAG,EAAA;AAAA;AAAA,WAEzC,EAAA;AAAA,SACF,EAAA,CAAA;AAAA,QACC,CAAC,SAAA,oBACC,GAAA,CAAA,IAAA,EAAA,EAAK,SAAQ,IAAK,EAAA,SAAA,EAAW,YAAa,CAAA,eAAe,GACvD,QAAG,EAAA,CAAA,EAAA,IAAA,CAAK,KAAM,CAAA,QAAQ,CAAC,CAC1B,EAAA,CAAA,EAAA;AAAA;AAAA;AAAA,GAEJ;AAEJ,CAAC;;;;"}
|