@salt-ds/lab 1.0.0-alpha.86 → 1.0.0-alpha.88

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (132) hide show
  1. package/CHANGELOG.md +126 -0
  2. package/css/salt-lab.css +145 -212
  3. package/dist-cjs/calendar/internal/CalendarDay.css.js +1 -1
  4. package/dist-cjs/common-hooks/useSelection.js +0 -2
  5. package/dist-cjs/common-hooks/useSelection.js.map +1 -1
  6. package/dist-cjs/contact-details/ContactDetails.css.js +1 -1
  7. package/dist-cjs/date-input/DateInput.css.js +1 -1
  8. package/dist-cjs/date-input/DateInputRange.js +2 -8
  9. package/dist-cjs/date-input/DateInputRange.js.map +1 -1
  10. package/dist-cjs/date-input/DateInputSingle.js +1 -1
  11. package/dist-cjs/date-input/DateInputSingle.js.map +1 -1
  12. package/dist-cjs/index.js +6 -2
  13. package/dist-cjs/index.js.map +1 -1
  14. package/dist-cjs/list-deprecated/ListItem.js.map +1 -1
  15. package/dist-cjs/rating/Rating.css.js +1 -1
  16. package/dist-cjs/rating/Rating.js +8 -7
  17. package/dist-cjs/rating/Rating.js.map +1 -1
  18. package/dist-cjs/tabs-next/TabListNext.js +1 -1
  19. package/dist-cjs/tabs-next/TabListNext.js.map +1 -1
  20. package/dist-cjs/tokenized-input-next/TokenizedInputNext.js +2 -2
  21. package/dist-cjs/tokenized-input-next/TokenizedInputNext.js.map +1 -1
  22. package/dist-cjs/tree/Tree.css.js +1 -1
  23. package/dist-cjs/tree/Tree.js +274 -207
  24. package/dist-cjs/tree/Tree.js.map +1 -1
  25. package/dist-cjs/tree/TreeContext.js +31 -0
  26. package/dist-cjs/tree/TreeContext.js.map +1 -0
  27. package/dist-cjs/tree/TreeNode.css.js +1 -1
  28. package/dist-cjs/tree/TreeNode.js +86 -42
  29. package/dist-cjs/tree/TreeNode.js.map +1 -1
  30. package/dist-cjs/tree/TreeNodeExpansionIcon.css.js +6 -0
  31. package/dist-cjs/tree/TreeNodeExpansionIcon.css.js.map +1 -0
  32. package/dist-cjs/tree/TreeNodeExpansionIcon.js +62 -0
  33. package/dist-cjs/tree/TreeNodeExpansionIcon.js.map +1 -0
  34. package/dist-cjs/tree/TreeNodeLabel.css.js +6 -0
  35. package/dist-cjs/tree/TreeNodeLabel.css.js.map +1 -0
  36. package/dist-cjs/tree/TreeNodeLabel.js +26 -0
  37. package/dist-cjs/tree/TreeNodeLabel.js.map +1 -0
  38. package/dist-cjs/tree/TreeNodeTrigger.css.js +6 -0
  39. package/dist-cjs/tree/TreeNodeTrigger.css.js.map +1 -0
  40. package/dist-cjs/tree/TreeNodeTrigger.js +152 -0
  41. package/dist-cjs/tree/TreeNodeTrigger.js.map +1 -0
  42. package/dist-cjs/tree/useTree.js +305 -133
  43. package/dist-cjs/tree/useTree.js.map +1 -1
  44. package/dist-es/calendar/internal/CalendarDay.css.js +1 -1
  45. package/dist-es/combo-box-deprecated/internal/DefaultComboBox.js +1 -1
  46. package/dist-es/combo-box-deprecated/internal/MultiSelectComboBox.js +1 -1
  47. package/dist-es/combo-box-deprecated/internal/useComboBox.js +1 -1
  48. package/dist-es/combo-box-deprecated/internal/useMultiSelectComboBox.js +1 -1
  49. package/dist-es/common-hooks/useCollectionItems.js +1 -1
  50. package/dist-es/common-hooks/useSelection.js +1 -2
  51. package/dist-es/common-hooks/useSelection.js.map +1 -1
  52. package/dist-es/contact-details/ContactDetails.css.js +1 -1
  53. package/dist-es/date-input/DateInput.css.js +1 -1
  54. package/dist-es/date-input/DateInputRange.js +2 -8
  55. package/dist-es/date-input/DateInputRange.js.map +1 -1
  56. package/dist-es/date-input/DateInputSingle.js +1 -1
  57. package/dist-es/date-input/DateInputSingle.js.map +1 -1
  58. package/dist-es/dropdown/DropdownBase.js +1 -1
  59. package/dist-es/index.js +3 -1
  60. package/dist-es/index.js.map +1 -1
  61. package/dist-es/list-deprecated/ListItem.js.map +1 -1
  62. package/dist-es/rating/Rating.css.js +1 -1
  63. package/dist-es/rating/Rating.js +8 -7
  64. package/dist-es/rating/Rating.js.map +1 -1
  65. package/dist-es/tabs/drag-drop/useDragDropNaturalMovement.js +1 -1
  66. package/dist-es/tabs-next/TabListNext.js +1 -1
  67. package/dist-es/tabs-next/TabListNext.js.map +1 -1
  68. package/dist-es/tokenized-input/TokenizedInputBase.js +1 -1
  69. package/dist-es/tokenized-input-next/TokenizedInputNext.js +2 -2
  70. package/dist-es/tokenized-input-next/TokenizedInputNext.js.map +1 -1
  71. package/dist-es/tree/Tree.css.js +1 -1
  72. package/dist-es/tree/Tree.js +275 -208
  73. package/dist-es/tree/Tree.js.map +1 -1
  74. package/dist-es/tree/TreeContext.js +26 -0
  75. package/dist-es/tree/TreeContext.js.map +1 -0
  76. package/dist-es/tree/TreeNode.css.js +1 -1
  77. package/dist-es/tree/TreeNode.js +87 -43
  78. package/dist-es/tree/TreeNode.js.map +1 -1
  79. package/dist-es/tree/TreeNodeExpansionIcon.css.js +4 -0
  80. package/dist-es/tree/TreeNodeExpansionIcon.css.js.map +1 -0
  81. package/dist-es/tree/TreeNodeExpansionIcon.js +60 -0
  82. package/dist-es/tree/TreeNodeExpansionIcon.js.map +1 -0
  83. package/dist-es/tree/TreeNodeLabel.css.js +4 -0
  84. package/dist-es/tree/TreeNodeLabel.css.js.map +1 -0
  85. package/dist-es/tree/TreeNodeLabel.js +24 -0
  86. package/dist-es/tree/TreeNodeLabel.js.map +1 -0
  87. package/dist-es/tree/TreeNodeTrigger.css.js +4 -0
  88. package/dist-es/tree/TreeNodeTrigger.css.js.map +1 -0
  89. package/dist-es/tree/TreeNodeTrigger.js +150 -0
  90. package/dist-es/tree/TreeNodeTrigger.js.map +1 -0
  91. package/dist-es/tree/useTree.js +306 -134
  92. package/dist-es/tree/useTree.js.map +1 -1
  93. package/dist-types/date-input/DateInputRange.d.ts +1 -1
  94. package/dist-types/date-input/DateInputSingle.d.ts +1 -1
  95. package/dist-types/index.d.ts +0 -1
  96. package/dist-types/list-deprecated/ListItem.d.ts +1 -0
  97. package/dist-types/rating/Rating.d.ts +5 -6
  98. package/dist-types/tokenized-input/internal/InputPill.d.ts +1 -1
  99. package/dist-types/tokenized-input-next/internal/InputPill.d.ts +1 -1
  100. package/dist-types/tree/Tree.d.ts +36 -3
  101. package/dist-types/tree/TreeContext.d.ts +71 -0
  102. package/dist-types/tree/TreeNode.d.ts +23 -10
  103. package/dist-types/tree/TreeNodeExpansionIcon.d.ts +4 -0
  104. package/dist-types/tree/TreeNodeLabel.d.ts +4 -0
  105. package/dist-types/tree/TreeNodeTrigger.d.ts +8 -0
  106. package/dist-types/tree/index.d.ts +3 -0
  107. package/dist-types/tree/useTree.d.ts +79 -3
  108. package/package.json +3 -3
  109. package/dist-cjs/common-hooks/calcPreferredHeight.js +0 -27
  110. package/dist-cjs/common-hooks/calcPreferredHeight.js.map +0 -1
  111. package/dist-cjs/common-hooks/useAutoSizer.js +0 -33
  112. package/dist-cjs/common-hooks/useAutoSizer.js.map +0 -1
  113. package/dist-cjs/kbd/Kbd.css.js +0 -6
  114. package/dist-cjs/kbd/Kbd.css.js.map +0 -1
  115. package/dist-cjs/kbd/Kbd.js +0 -34
  116. package/dist-cjs/kbd/Kbd.js.map +0 -1
  117. package/dist-cjs/tree/use-tree-keyboard-navigation.js +0 -51
  118. package/dist-cjs/tree/use-tree-keyboard-navigation.js.map +0 -1
  119. package/dist-es/common-hooks/calcPreferredHeight.js +0 -25
  120. package/dist-es/common-hooks/calcPreferredHeight.js.map +0 -1
  121. package/dist-es/common-hooks/useAutoSizer.js +0 -31
  122. package/dist-es/common-hooks/useAutoSizer.js.map +0 -1
  123. package/dist-es/kbd/Kbd.css.js +0 -4
  124. package/dist-es/kbd/Kbd.css.js.map +0 -1
  125. package/dist-es/kbd/Kbd.js +0 -32
  126. package/dist-es/kbd/Kbd.js.map +0 -1
  127. package/dist-es/tree/use-tree-keyboard-navigation.js +0 -48
  128. package/dist-es/tree/use-tree-keyboard-navigation.js.map +0 -1
  129. package/dist-types/kbd/Kbd.d.ts +0 -8
  130. package/dist-types/kbd/index.d.ts +0 -1
  131. package/dist-types/tree/treeTypes.d.ts +0 -42
  132. package/dist-types/tree/use-tree-keyboard-navigation.d.ts +0 -15
@@ -1,7 +1,7 @@
1
1
  import { useState, useRef, useMemo, useCallback, isValidElement } from 'react';
2
2
  import { useCollection } from './collectionProvider.js';
3
3
  import { itemToString } from './itemToString.js';
4
- import { isFocusable, isDisabled, countChildItems, isHeader, isGroupNode, sourceItems, childItems, isParentPath, replaceCollectionItem } from './utils/collection-item-utils.js';
4
+ import { isFocusable, isDisabled, isHeader, isGroupNode, sourceItems, childItems, isParentPath, replaceCollectionItem, countChildItems } from './utils/collection-item-utils.js';
5
5
  import { getDefaultFilter, getDefaultFilterRegex } from './utils/filter-utils.js';
6
6
 
7
7
  const defaultCollectionOptions = {};
@@ -1,7 +1,6 @@
1
1
  import { useControlled } from '@salt-ds/core';
2
2
  import { useRef, useCallback } from 'react';
3
3
 
4
- const GROUP_SELECTION_NONE = "none";
5
4
  const defaultSelectionKeys = ["Enter", " "];
6
5
  const isSelectable = (item) => item && item.disabled !== true && item.selectable !== false;
7
6
  const byItemIndex = (i1, i2) => (i1.index ?? 0) - (i2.index ?? 0);
@@ -192,5 +191,5 @@ const useSelection = ({
192
191
  };
193
192
  };
194
193
 
195
- export { GROUP_SELECTION_NONE, useSelection };
194
+ export { useSelection };
196
195
  //# sourceMappingURL=useSelection.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"useSelection.js","sources":["../src/common-hooks/useSelection.ts"],"sourcesContent":["import { useControlled } from \"@salt-ds/core\";\nimport {\n type KeyboardEvent,\n type MouseEvent,\n type SyntheticEvent,\n useCallback,\n useRef,\n} from \"react\";\nimport type { CollectionItem } from \"./collectionTypes\";\nimport type {\n SelectionHookProps,\n SelectionHookResult,\n SelectionStrategy,\n SingleSelectionStrategy,\n} from \"./selectionTypes\";\n\nexport const CHECKBOX = \"checkbox\";\n\nexport const GROUP_SELECTION_NONE = \"none\";\nexport const GROUP_SELECTION_SINGLE = \"single\";\nexport const GROUP_SELECTION_CASCADE = \"cascade\";\n\nexport type GroupSelectionMode = \"none\" | \"single\" | \"cascade\";\n\nconst defaultSelectionKeys = [\"Enter\", \" \"];\n\nconst isSelectable = (item?: CollectionItem<unknown>) =>\n item && item.disabled !== true && item.selectable !== false;\n\nconst byItemIndex = (\n i1: CollectionItem<unknown>,\n i2: CollectionItem<unknown>,\n) => (i1.index ?? 0) - (i2.index ?? 0);\n\nexport const groupSelectionEnabled = (\n groupSelection: GroupSelectionMode,\n): boolean => groupSelection && groupSelection !== GROUP_SELECTION_NONE;\n\nexport const useSelection = <\n Item,\n Selection extends SelectionStrategy = \"default\",\n>({\n defaultSelected,\n disableSelection = false,\n // groupSelection = GROUP_SELECTION_NONE,\n highlightedIdx,\n indexPositions,\n label: _label = \"\",\n onSelect,\n onSelectionChange,\n selected: selectedProp,\n selectionStrategy,\n selectionKeys = defaultSelectionKeys,\n tabToSelect,\n}: SelectionHookProps<Item, Selection>): SelectionHookResult<\n Item,\n Selection\n> => {\n type collectionItem = CollectionItem<Item>;\n\n const isDeselectable = selectionStrategy === \"deselectable\";\n const isMultipleSelect = selectionStrategy === \"multiple\";\n const isExtendedSelect = selectionStrategy === \"extended\";\n\n const lastActive = useRef(-1);\n\n const isSelectionEvent = useCallback(\n (evt: KeyboardEvent) => selectionKeys.includes(evt.key),\n [selectionKeys],\n );\n\n const emptyValue = useCallback(<\n Item,\n >(): Selection extends SingleSelectionStrategy\n ? null\n : CollectionItem<Item>[] => {\n type returnType = Selection extends SingleSelectionStrategy\n ? null\n : CollectionItem<Item>[];\n return isMultipleSelect || isExtendedSelect\n ? ([] as unknown as returnType)\n : (null as returnType);\n }, [isMultipleSelect, isExtendedSelect]);\n\n const [selected, setSelected] = useControlled<\n Selection extends SingleSelectionStrategy\n ? CollectionItem<Item> | null\n : CollectionItem<Item>[]\n >({\n controlled: selectedProp,\n default: defaultSelected ?? emptyValue(),\n name: \"UseSelection\",\n state: \"selected\",\n });\n\n const isItemSelected = useCallback(\n (item: collectionItem) => {\n return Array.isArray(selected)\n ? selected.includes(item)\n : selected === item;\n },\n [selected],\n );\n\n const selectDefault = useCallback((item: collectionItem) => item, []);\n const selectDeselectable = useCallback(\n (item: collectionItem) => (isItemSelected(item) ? null : item),\n [isItemSelected],\n );\n const selectMultiple = useCallback(\n (item: collectionItem) => {\n const nextItems = isItemSelected(item)\n ? (selected as collectionItem[]).filter((i) => i !== item)\n : (selected as collectionItem[]).concat(item);\n nextItems.sort(byItemIndex);\n return nextItems;\n },\n [isItemSelected, selected],\n );\n const selectRange = useCallback(\n (idx: number, preserveExistingSelection?: boolean) => {\n const currentSelection = preserveExistingSelection\n ? (selected as collectionItem[])\n : ([] as collectionItem[]);\n\n const [lastSelectedItem] = (selected as collectionItem[]).slice(-1);\n const lastSelectedItemIndex = lastSelectedItem\n ? indexPositions.indexOf(lastSelectedItem)\n : 0;\n\n const startRegion = Math.min(idx, lastSelectedItemIndex);\n const endRegion = Math.max(idx, lastSelectedItemIndex);\n const rangeSelection = indexPositions.slice(startRegion, endRegion + 1);\n // concat the current selection with a new selection and remove duplicates for overlaps\n const nextItems = [...new Set([...currentSelection, ...rangeSelection])];\n nextItems.sort(byItemIndex);\n return nextItems;\n },\n [indexPositions, selected],\n );\n\n const selectItemAtIndex = useCallback(\n (\n evt: SyntheticEvent,\n idx: number,\n item: collectionItem,\n rangeSelect: boolean,\n preserveExistingSelection?: boolean,\n ) => {\n type returnType = Selection extends SingleSelectionStrategy\n ? CollectionItem<Item> | null\n : CollectionItem<Item>[];\n let newSelected: returnType;\n if (isMultipleSelect) {\n newSelected = selectMultiple(item) as returnType;\n } else if (isExtendedSelect) {\n if (preserveExistingSelection && !rangeSelect) {\n newSelected = selectMultiple(item) as returnType;\n } else if (rangeSelect) {\n newSelected = selectRange(\n idx,\n preserveExistingSelection,\n ) as returnType;\n } else {\n newSelected = [item] as returnType;\n }\n } else if (isDeselectable) {\n newSelected = selectDeselectable(item) as returnType;\n } else {\n newSelected = selectDefault(item) as returnType;\n }\n\n if (newSelected !== selected) {\n setSelected(newSelected);\n }\n\n // We fire onSelect irrespective of whether selection changes\n onSelect?.(evt, item);\n\n if (newSelected !== selected) {\n if (onSelectionChange) {\n onSelectionChange(evt, newSelected);\n }\n }\n },\n [\n isMultipleSelect,\n isExtendedSelect,\n isDeselectable,\n selected,\n onSelect,\n selectMultiple,\n selectRange,\n selectDeselectable,\n selectDefault,\n onSelectionChange,\n ],\n );\n\n const handleKeyDown = useCallback(\n (evt: KeyboardEvent) => {\n const item = indexPositions[highlightedIdx];\n if (isSelectable(item)) {\n if (isSelectionEvent(evt) || (tabToSelect && evt.key === \"Tab\")) {\n // We do not inhibit Tab behaviour, if we are selecting on Tab then we apply\n // selection as a side effect of the Tab, not as a replacement for Tabbing.\n if (evt.key !== \"Tab\") {\n evt.preventDefault();\n }\n selectItemAtIndex(\n evt,\n highlightedIdx,\n item,\n false,\n evt.ctrlKey || evt.metaKey,\n );\n if (isExtendedSelect) {\n lastActive.current = highlightedIdx;\n }\n }\n }\n },\n [\n indexPositions,\n highlightedIdx,\n isSelectionEvent,\n tabToSelect,\n selectItemAtIndex,\n isExtendedSelect,\n ],\n );\n\n const handleKeyboardNavigation = useCallback(\n (evt: KeyboardEvent, currentIndex: number) => {\n if (isExtendedSelect && evt.shiftKey) {\n const item = indexPositions[currentIndex];\n if (isSelectable(item)) {\n selectItemAtIndex(evt, currentIndex, item, true);\n }\n }\n },\n [isExtendedSelect, indexPositions, selectItemAtIndex],\n );\n\n const handleClick = useCallback(\n (evt: MouseEvent) => {\n const item = indexPositions[highlightedIdx];\n if (!disableSelection && isSelectable(item)) {\n // if (!isCollapsibleItem(item)) {\n evt.preventDefault();\n evt.stopPropagation();\n selectItemAtIndex(\n evt,\n highlightedIdx,\n item,\n evt.shiftKey,\n evt.ctrlKey || evt.metaKey,\n );\n if (isExtendedSelect) {\n lastActive.current = highlightedIdx;\n }\n // }\n }\n },\n [\n disableSelection,\n isExtendedSelect,\n highlightedIdx,\n indexPositions,\n selectItemAtIndex,\n ],\n );\n\n const listHandlers = {\n onClick: handleClick,\n onKeyDown: handleKeyDown,\n onKeyboardNavigation: handleKeyboardNavigation,\n };\n\n return {\n listHandlers,\n selected,\n setSelected,\n };\n};\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"useSelection.js","sources":["../src/common-hooks/useSelection.ts"],"sourcesContent":["import { useControlled } from \"@salt-ds/core\";\nimport {\n type KeyboardEvent,\n type MouseEvent,\n type SyntheticEvent,\n useCallback,\n useRef,\n} from \"react\";\nimport type { CollectionItem } from \"./collectionTypes\";\nimport type {\n SelectionHookProps,\n SelectionHookResult,\n SelectionStrategy,\n SingleSelectionStrategy,\n} from \"./selectionTypes\";\n\nexport const CHECKBOX = \"checkbox\";\n\nexport const GROUP_SELECTION_NONE = \"none\";\nexport const GROUP_SELECTION_SINGLE = \"single\";\nexport const GROUP_SELECTION_CASCADE = \"cascade\";\n\nexport type GroupSelectionMode = \"none\" | \"single\" | \"cascade\";\n\nconst defaultSelectionKeys = [\"Enter\", \" \"];\n\nconst isSelectable = (item?: CollectionItem<unknown>) =>\n item && item.disabled !== true && item.selectable !== false;\n\nconst byItemIndex = (\n i1: CollectionItem<unknown>,\n i2: CollectionItem<unknown>,\n) => (i1.index ?? 0) - (i2.index ?? 0);\n\nexport const groupSelectionEnabled = (\n groupSelection: GroupSelectionMode,\n): boolean => groupSelection && groupSelection !== GROUP_SELECTION_NONE;\n\nexport const useSelection = <\n Item,\n Selection extends SelectionStrategy = \"default\",\n>({\n defaultSelected,\n disableSelection = false,\n // groupSelection = GROUP_SELECTION_NONE,\n highlightedIdx,\n indexPositions,\n label: _label = \"\",\n onSelect,\n onSelectionChange,\n selected: selectedProp,\n selectionStrategy,\n selectionKeys = defaultSelectionKeys,\n tabToSelect,\n}: SelectionHookProps<Item, Selection>): SelectionHookResult<\n Item,\n Selection\n> => {\n type collectionItem = CollectionItem<Item>;\n\n const isDeselectable = selectionStrategy === \"deselectable\";\n const isMultipleSelect = selectionStrategy === \"multiple\";\n const isExtendedSelect = selectionStrategy === \"extended\";\n\n const lastActive = useRef(-1);\n\n const isSelectionEvent = useCallback(\n (evt: KeyboardEvent) => selectionKeys.includes(evt.key),\n [selectionKeys],\n );\n\n const emptyValue = useCallback(<\n Item,\n >(): Selection extends SingleSelectionStrategy\n ? null\n : CollectionItem<Item>[] => {\n type returnType = Selection extends SingleSelectionStrategy\n ? null\n : CollectionItem<Item>[];\n return isMultipleSelect || isExtendedSelect\n ? ([] as unknown as returnType)\n : (null as returnType);\n }, [isMultipleSelect, isExtendedSelect]);\n\n const [selected, setSelected] = useControlled<\n Selection extends SingleSelectionStrategy\n ? CollectionItem<Item> | null\n : CollectionItem<Item>[]\n >({\n controlled: selectedProp,\n default: defaultSelected ?? emptyValue(),\n name: \"UseSelection\",\n state: \"selected\",\n });\n\n const isItemSelected = useCallback(\n (item: collectionItem) => {\n return Array.isArray(selected)\n ? selected.includes(item)\n : selected === item;\n },\n [selected],\n );\n\n const selectDefault = useCallback((item: collectionItem) => item, []);\n const selectDeselectable = useCallback(\n (item: collectionItem) => (isItemSelected(item) ? null : item),\n [isItemSelected],\n );\n const selectMultiple = useCallback(\n (item: collectionItem) => {\n const nextItems = isItemSelected(item)\n ? (selected as collectionItem[]).filter((i) => i !== item)\n : (selected as collectionItem[]).concat(item);\n nextItems.sort(byItemIndex);\n return nextItems;\n },\n [isItemSelected, selected],\n );\n const selectRange = useCallback(\n (idx: number, preserveExistingSelection?: boolean) => {\n const currentSelection = preserveExistingSelection\n ? (selected as collectionItem[])\n : ([] as collectionItem[]);\n\n const [lastSelectedItem] = (selected as collectionItem[]).slice(-1);\n const lastSelectedItemIndex = lastSelectedItem\n ? indexPositions.indexOf(lastSelectedItem)\n : 0;\n\n const startRegion = Math.min(idx, lastSelectedItemIndex);\n const endRegion = Math.max(idx, lastSelectedItemIndex);\n const rangeSelection = indexPositions.slice(startRegion, endRegion + 1);\n // concat the current selection with a new selection and remove duplicates for overlaps\n const nextItems = [...new Set([...currentSelection, ...rangeSelection])];\n nextItems.sort(byItemIndex);\n return nextItems;\n },\n [indexPositions, selected],\n );\n\n const selectItemAtIndex = useCallback(\n (\n evt: SyntheticEvent,\n idx: number,\n item: collectionItem,\n rangeSelect: boolean,\n preserveExistingSelection?: boolean,\n ) => {\n type returnType = Selection extends SingleSelectionStrategy\n ? CollectionItem<Item> | null\n : CollectionItem<Item>[];\n let newSelected: returnType;\n if (isMultipleSelect) {\n newSelected = selectMultiple(item) as returnType;\n } else if (isExtendedSelect) {\n if (preserveExistingSelection && !rangeSelect) {\n newSelected = selectMultiple(item) as returnType;\n } else if (rangeSelect) {\n newSelected = selectRange(\n idx,\n preserveExistingSelection,\n ) as returnType;\n } else {\n newSelected = [item] as returnType;\n }\n } else if (isDeselectable) {\n newSelected = selectDeselectable(item) as returnType;\n } else {\n newSelected = selectDefault(item) as returnType;\n }\n\n if (newSelected !== selected) {\n setSelected(newSelected);\n }\n\n // We fire onSelect irrespective of whether selection changes\n onSelect?.(evt, item);\n\n if (newSelected !== selected) {\n if (onSelectionChange) {\n onSelectionChange(evt, newSelected);\n }\n }\n },\n [\n isMultipleSelect,\n isExtendedSelect,\n isDeselectable,\n selected,\n onSelect,\n selectMultiple,\n selectRange,\n selectDeselectable,\n selectDefault,\n onSelectionChange,\n ],\n );\n\n const handleKeyDown = useCallback(\n (evt: KeyboardEvent) => {\n const item = indexPositions[highlightedIdx];\n if (isSelectable(item)) {\n if (isSelectionEvent(evt) || (tabToSelect && evt.key === \"Tab\")) {\n // We do not inhibit Tab behaviour, if we are selecting on Tab then we apply\n // selection as a side effect of the Tab, not as a replacement for Tabbing.\n if (evt.key !== \"Tab\") {\n evt.preventDefault();\n }\n selectItemAtIndex(\n evt,\n highlightedIdx,\n item,\n false,\n evt.ctrlKey || evt.metaKey,\n );\n if (isExtendedSelect) {\n lastActive.current = highlightedIdx;\n }\n }\n }\n },\n [\n indexPositions,\n highlightedIdx,\n isSelectionEvent,\n tabToSelect,\n selectItemAtIndex,\n isExtendedSelect,\n ],\n );\n\n const handleKeyboardNavigation = useCallback(\n (evt: KeyboardEvent, currentIndex: number) => {\n if (isExtendedSelect && evt.shiftKey) {\n const item = indexPositions[currentIndex];\n if (isSelectable(item)) {\n selectItemAtIndex(evt, currentIndex, item, true);\n }\n }\n },\n [isExtendedSelect, indexPositions, selectItemAtIndex],\n );\n\n const handleClick = useCallback(\n (evt: MouseEvent) => {\n const item = indexPositions[highlightedIdx];\n if (!disableSelection && isSelectable(item)) {\n // if (!isCollapsibleItem(item)) {\n evt.preventDefault();\n evt.stopPropagation();\n selectItemAtIndex(\n evt,\n highlightedIdx,\n item,\n evt.shiftKey,\n evt.ctrlKey || evt.metaKey,\n );\n if (isExtendedSelect) {\n lastActive.current = highlightedIdx;\n }\n // }\n }\n },\n [\n disableSelection,\n isExtendedSelect,\n highlightedIdx,\n indexPositions,\n selectItemAtIndex,\n ],\n );\n\n const listHandlers = {\n onClick: handleClick,\n onKeyDown: handleKeyDown,\n onKeyboardNavigation: handleKeyboardNavigation,\n };\n\n return {\n listHandlers,\n selected,\n setSelected,\n };\n};\n"],"names":[],"mappings":"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"}
@@ -1,4 +1,4 @@
1
- var css_248z = ".salt-density-touch {\n --contactDetails-default-primary-fontSize: 30px;\n --contactDetails-default-secondary-fontSize: 16px;\n --contactDetails-compact-primary-fontSize: 16px;\n --contactDetails-compact-secondary-fontSize: 14px;\n --contactDetails-icon-size: 18px;\n --contactDetails-label-width: 80px;\n}\n\n.salt-density-low {\n --contactDetails-compact-primary-fontSize: 14px;\n --contactDetails-default-primary-fontSize: 24px;\n --contactDetails-compact-secondary-fontSize: 14px;\n --contactDetails-default-secondary-fontSize: 14px;\n --contactDetails-label-width: 70px;\n --contactDetails-icon-size: 16px;\n}\n\n.salt-density-medium {\n --contactDetails-compact-primary-fontSize: 12px;\n --contactDetails-default-primary-fontSize: 18px;\n --contactDetails-compact-secondary-fontSize: 12px;\n --contactDetails-default-secondary-fontSize: 12px;\n --contactDetails-label-width: 60px;\n --contactDetails-icon-size: 14px;\n}\n\n.salt-density-high {\n --contactDetails-compact-primary-fontSize: 11px;\n --contactDetails-default-primary-fontSize: 14px;\n --contactDetails-compact-secondary-fontSize: 11px;\n --contactDetails-default-secondary-fontSize: 11px;\n --contactDetails-label-width: 60px;\n --contactDetails-icon-size: 12px;\n}\n\n.saltContactDetails {\n --contactDetails-color: var(--salt-content-primary-foreground);\n --contactDetails-label-color: var(--salt-content-secondary-foreground);\n --contactDetails-noAvatar-color: var(--salt-accent-background);\n --contactDetails-noAvatar-indicator-width: 4px;\n --contactDetails-favoriteToggle-fill: var(--contactDetails-deselected-icon-color);\n --contactDetails-favoriteToggle-marginRight: 0px;\n --contactDetails-favoriteToggle-marginTop: 0px;\n --contactDetails-mini-secondaryInfo-marginLeft: var(--salt-size-unit);\n --contactDetails-mini-stacked-secondaryInfo-marginLeft: calc(var(--salt-size-unit) * 2);\n --contactDetails-compact-tertiaryInfo-marginLeft: var(--salt-size-unit);\n\n /* TODO: Check below tokens with design */\n --contactDetails-separator-color: var(--salt-separable-secondary-borderColor);\n}\n\n.saltContactDetails {\n display: grid;\n padding: var(--salt-size-unit);\n}\n\n.saltContactDetails.saltContactDetails-noAvatar {\n padding-left: 0;\n}\n\n.saltContactDetails.saltContactDetails-embedded {\n padding: 0;\n}\n\n.saltContactDetails-default,\n.saltContactDetails-default-stacked {\n --contactDetails-primary-fontSize: var(--contactDetails-default-primary-fontSize);\n --contactDetails-secondary-fontSize: var(--contactDetails-default-secondary-fontSize);\n}\n\n.saltContactDetails-compact,\n.saltContactDetails-compact-stacked {\n --contactDetails-primary-fontSize: var(--contactDetails-compact-primary-fontSize);\n --contactDetails-secondary-fontSize: var(--contactDetails-compact-secondary-fontSize);\n}\n\n.saltContactDetails-mini,\n.saltContactDetails-mini-stacked {\n --contactDetails-primary-fontSize: var(--contactDetails-compact-primary-fontSize);\n --contactDetails-secondary-fontSize: var(--contactDetails-compact-secondary-fontSize);\n}\n\n.saltContactDetails-default {\n color: var(--contactDetails-color);\n grid-template-columns: auto auto 1fr auto;\n grid-template-rows: auto auto auto auto auto;\n grid-template-areas:\n \"noAvatar avatar primary favorite\"\n \"noAvatar avatar secondary secondary\"\n \"noAvatar avatar tertiary tertiary\"\n \". . actions metadataExpander\"\n \". . metadata metadata\";\n}\n\n.saltContactDetails-default-stacked {\n grid-template-columns: auto 1fr auto;\n grid-template-rows: auto auto auto auto auto auto;\n grid-template-areas:\n \"noAvatar avatar avatar\"\n \"noAvatar primary favorite\"\n \"noAvatar secondary secondary\"\n \"noAvatar tertiary tertiary\"\n \". actions metadataExpander\"\n \". metadata metadata\";\n}\n\n.saltContactDetails-compact {\n grid-template-columns: auto auto auto 1fr auto;\n grid-template-rows: auto auto auto;\n grid-template-areas:\n \"noAvatar avatar primary primary favorite\"\n \"noAvatar avatar secondary tertiary tertiary\"\n \". . actions actions actions\";\n}\n\n.saltContactDetails-compact-stacked {\n grid-template-columns: auto auto 1fr auto;\n grid-template-rows: auto auto auto auto;\n grid-template-areas:\n \"noAvatar avatar primary favorite\"\n \"noAvatar avatar secondary favorite\"\n \"noAvatar avatar tertiary tertiary\"\n \". . actions actions\";\n}\n\n.saltContactDetails-mini,\n.saltContactDetails-mini-stacked {\n grid-template-columns: auto minmax(60px, 1fr) auto;\n grid-template-rows: auto;\n grid-template-areas: \"primary secondary favorite\";\n}\n\n.saltContactDetails-noAvatar-indicator {\n grid-area: noAvatar;\n width: var(--contactDetails-noAvatar-indicator-width);\n background: var(--contactDetails-noAvatar-color);\n margin-right: var(--salt-size-unit);\n}\n\n.saltContactAvatar {\n grid-area: avatar;\n margin-right: var(--salt-size-unit);\n}\n\n.saltContactAvatar-stacked {\n margin-bottom: var(--salt-size-unit);\n}\n\n.saltContactActions {\n grid-area: actions;\n display: flex;\n margin-top: var(--salt-size-unit);\n margin-left: calc(var(--salt-size-unit) * -1);\n}\n\n.saltContactPrimaryInfo {\n grid-area: primary;\n}\n\n.saltContactDetails-default .saltContactPrimaryInfo {\n margin-bottom: calc(var(--salt-size-unit) * 0.5);\n}\n\n.saltContactSecondaryInfo {\n grid-area: secondary;\n}\n\n.saltContactDetails-mini .saltContactSecondaryInfo {\n margin-left: var(--contactDetails-mini-secondaryInfo-marginLeft);\n}\n\n/* TODO Mini-stacked does not really look \"stacked\". Is it a bug? */\n.saltContactDetails-mini-stacked .saltContactSecondaryInfo {\n margin-left: var(--contactDetails-mini-stacked-secondaryInfo-marginLeft);\n}\n\n.saltContactSecondaryInfo-icon {\n margin-right: calc(var(--salt-size-unit) * 0.5);\n}\n\n.saltContactTertiaryInfo {\n grid-area: tertiary;\n}\n\n.saltContactDetails-compact .saltContactTertiaryInfo {\n margin-left: var(--contactDetails-compact-tertiaryInfo-marginLeft);\n}\n\n.saltContactTertiaryInfo-icon {\n margin-right: calc(var(--salt-size-unit) * 0.5);\n}\n\n.saltContactMetadata {\n grid-area: metadata;\n display: flex;\n flex-direction: column;\n padding-top: var(--salt-size-unit);\n padding-bottom: var(--salt-size-unit);\n}\n\n.saltContactMetadata-expander {\n grid-area: metadataExpander;\n margin-top: var(--salt-size-unit);\n}\n\n.saltContactMetadata-separator {\n width: 100%;\n height: 1px;\n background: var(--contactDetails-separator-color);\n margin-bottom: var(--salt-size-unit);\n}\n\n.saltContactMetadataItem {\n display: flex;\n flex-direction: row;\n align-items: center;\n margin-bottom: calc(var(--salt-size-unit) * 0.5);\n}\n\n.saltContactMetadataItem:last-child {\n margin-bottom: unset;\n}\n\n.saltContactMetadata-stacked .saltContactMetadataItem {\n flex-direction: column;\n align-items: flex-start;\n}\n\n.saltContactMetadataItem-icon {\n margin-right: calc(var(--salt-size-unit) * 2);\n padding-left: 1px;\n}\n\n.saltContactMetadataItem-label {\n flex-shrink: 0;\n color: var(--contactDetails-label-color);\n margin-right: calc(var(--salt-size-unit) * 2);\n width: var(--contactDetails-label-width);\n}\n\n.saltContactFavoriteToggle {\n align-self: start;\n grid-area: favorite;\n justify-self: center;\n line-height: var(--contactDetails-primary-fontSize);\n margin-right: var(--contactDetails-favoriteToggle-marginRight);\n margin-top: var(--contactDetails-favoriteToggle-marginTop);\n}\n\n.saltContactFavoriteToggle-svg {\n fill: var(--contactDetails-favoriteToggle-fill);\n}\n\n.saltContactFavoriteToggle-focusVisible {\n outline: none;\n}\n\n.saltContactFavoriteToggle-focused {\n outline: var(--salt-focused-outline);\n}\n\n.saltContactFavoriteToggle-deselected {\n --contactDetails-favoriteToggle-fill: var(--salt-accent-borderColor);\n}\n\n.saltContactFavoriteToggle-selecting {\n --contactDetails-favoriteToggle-fill: var(--salt-selectable-foreground-hover);\n}\n\n.saltContactFavoriteToggle-selected {\n --contactDetails-favoriteToggle-fill: var(--salt-selectable-foreground-selected);\n}\n\n.saltContactFavoriteToggle-deselecting {\n --contactDetails-favoriteToggle-fill: var(--salt-selectable-foreground-hover);\n}\n\n.saltContactFavoriteToggle-svg {\n height: var(--contactDetails-icon-size);\n width: var(--contactDetails-icon-size);\n}\n";
1
+ var css_248z = ".salt-density-touch {\n --contactDetails-default-primary-fontSize: 30px;\n --contactDetails-default-secondary-fontSize: 16px;\n --contactDetails-compact-primary-fontSize: 16px;\n --contactDetails-compact-secondary-fontSize: 14px;\n --contactDetails-icon-size: 18px;\n --contactDetails-label-width: 80px;\n}\n\n.salt-density-low {\n --contactDetails-compact-primary-fontSize: 14px;\n --contactDetails-default-primary-fontSize: 24px;\n --contactDetails-compact-secondary-fontSize: 14px;\n --contactDetails-default-secondary-fontSize: 14px;\n --contactDetails-label-width: 70px;\n --contactDetails-icon-size: 16px;\n}\n\n.salt-density-medium {\n --contactDetails-compact-primary-fontSize: 12px;\n --contactDetails-default-primary-fontSize: 18px;\n --contactDetails-compact-secondary-fontSize: 12px;\n --contactDetails-default-secondary-fontSize: 12px;\n --contactDetails-label-width: 60px;\n --contactDetails-icon-size: 14px;\n}\n\n.salt-density-high {\n --contactDetails-compact-primary-fontSize: 11px;\n --contactDetails-default-primary-fontSize: 14px;\n --contactDetails-compact-secondary-fontSize: 11px;\n --contactDetails-default-secondary-fontSize: 11px;\n --contactDetails-label-width: 60px;\n --contactDetails-icon-size: 12px;\n}\n\n.saltContactDetails {\n --contactDetails-color: var(--salt-content-primary-foreground);\n --contactDetails-label-color: var(--salt-content-secondary-foreground);\n --contactDetails-noAvatar-color: var(--salt-sentiment-accent-background);\n --contactDetails-noAvatar-indicator-width: 4px;\n --contactDetails-favoriteToggle-fill: var(--contactDetails-deselected-icon-color);\n --contactDetails-favoriteToggle-marginRight: 0px;\n --contactDetails-favoriteToggle-marginTop: 0px;\n --contactDetails-mini-secondaryInfo-marginLeft: var(--salt-size-unit);\n --contactDetails-mini-stacked-secondaryInfo-marginLeft: calc(var(--salt-size-unit) * 2);\n --contactDetails-compact-tertiaryInfo-marginLeft: var(--salt-size-unit);\n\n /* TODO: Check below tokens with design */\n --contactDetails-separator-color: var(--salt-separable-secondary-borderColor);\n}\n\n.saltContactDetails {\n display: grid;\n padding: var(--salt-size-unit);\n}\n\n.saltContactDetails.saltContactDetails-noAvatar {\n padding-left: 0;\n}\n\n.saltContactDetails.saltContactDetails-embedded {\n padding: 0;\n}\n\n.saltContactDetails-default,\n.saltContactDetails-default-stacked {\n --contactDetails-primary-fontSize: var(--contactDetails-default-primary-fontSize);\n --contactDetails-secondary-fontSize: var(--contactDetails-default-secondary-fontSize);\n}\n\n.saltContactDetails-compact,\n.saltContactDetails-compact-stacked {\n --contactDetails-primary-fontSize: var(--contactDetails-compact-primary-fontSize);\n --contactDetails-secondary-fontSize: var(--contactDetails-compact-secondary-fontSize);\n}\n\n.saltContactDetails-mini,\n.saltContactDetails-mini-stacked {\n --contactDetails-primary-fontSize: var(--contactDetails-compact-primary-fontSize);\n --contactDetails-secondary-fontSize: var(--contactDetails-compact-secondary-fontSize);\n}\n\n.saltContactDetails-default {\n color: var(--contactDetails-color);\n grid-template-columns: auto auto 1fr auto;\n grid-template-rows: auto auto auto auto auto;\n grid-template-areas:\n \"noAvatar avatar primary favorite\"\n \"noAvatar avatar secondary secondary\"\n \"noAvatar avatar tertiary tertiary\"\n \". . actions metadataExpander\"\n \". . metadata metadata\";\n}\n\n.saltContactDetails-default-stacked {\n grid-template-columns: auto 1fr auto;\n grid-template-rows: auto auto auto auto auto auto;\n grid-template-areas:\n \"noAvatar avatar avatar\"\n \"noAvatar primary favorite\"\n \"noAvatar secondary secondary\"\n \"noAvatar tertiary tertiary\"\n \". actions metadataExpander\"\n \". metadata metadata\";\n}\n\n.saltContactDetails-compact {\n grid-template-columns: auto auto auto 1fr auto;\n grid-template-rows: auto auto auto;\n grid-template-areas:\n \"noAvatar avatar primary primary favorite\"\n \"noAvatar avatar secondary tertiary tertiary\"\n \". . actions actions actions\";\n}\n\n.saltContactDetails-compact-stacked {\n grid-template-columns: auto auto 1fr auto;\n grid-template-rows: auto auto auto auto;\n grid-template-areas:\n \"noAvatar avatar primary favorite\"\n \"noAvatar avatar secondary favorite\"\n \"noAvatar avatar tertiary tertiary\"\n \". . actions actions\";\n}\n\n.saltContactDetails-mini,\n.saltContactDetails-mini-stacked {\n grid-template-columns: auto minmax(60px, 1fr) auto;\n grid-template-rows: auto;\n grid-template-areas: \"primary secondary favorite\";\n}\n\n.saltContactDetails-noAvatar-indicator {\n grid-area: noAvatar;\n width: var(--contactDetails-noAvatar-indicator-width);\n background: var(--contactDetails-noAvatar-color);\n margin-right: var(--salt-size-unit);\n}\n\n.saltContactAvatar {\n grid-area: avatar;\n margin-right: var(--salt-size-unit);\n}\n\n.saltContactAvatar-stacked {\n margin-bottom: var(--salt-size-unit);\n}\n\n.saltContactActions {\n grid-area: actions;\n display: flex;\n margin-top: var(--salt-size-unit);\n margin-left: calc(var(--salt-size-unit) * -1);\n}\n\n.saltContactPrimaryInfo {\n grid-area: primary;\n}\n\n.saltContactDetails-default .saltContactPrimaryInfo {\n margin-bottom: calc(var(--salt-size-unit) * 0.5);\n}\n\n.saltContactSecondaryInfo {\n grid-area: secondary;\n}\n\n.saltContactDetails-mini .saltContactSecondaryInfo {\n margin-left: var(--contactDetails-mini-secondaryInfo-marginLeft);\n}\n\n/* TODO Mini-stacked does not really look \"stacked\". Is it a bug? */\n.saltContactDetails-mini-stacked .saltContactSecondaryInfo {\n margin-left: var(--contactDetails-mini-stacked-secondaryInfo-marginLeft);\n}\n\n.saltContactSecondaryInfo-icon {\n margin-right: calc(var(--salt-size-unit) * 0.5);\n}\n\n.saltContactTertiaryInfo {\n grid-area: tertiary;\n}\n\n.saltContactDetails-compact .saltContactTertiaryInfo {\n margin-left: var(--contactDetails-compact-tertiaryInfo-marginLeft);\n}\n\n.saltContactTertiaryInfo-icon {\n margin-right: calc(var(--salt-size-unit) * 0.5);\n}\n\n.saltContactMetadata {\n grid-area: metadata;\n display: flex;\n flex-direction: column;\n padding-top: var(--salt-size-unit);\n padding-bottom: var(--salt-size-unit);\n}\n\n.saltContactMetadata-expander {\n grid-area: metadataExpander;\n margin-top: var(--salt-size-unit);\n}\n\n.saltContactMetadata-separator {\n width: 100%;\n height: 1px;\n background: var(--contactDetails-separator-color);\n margin-bottom: var(--salt-size-unit);\n}\n\n.saltContactMetadataItem {\n display: flex;\n flex-direction: row;\n align-items: center;\n margin-bottom: calc(var(--salt-size-unit) * 0.5);\n}\n\n.saltContactMetadataItem:last-child {\n margin-bottom: unset;\n}\n\n.saltContactMetadata-stacked .saltContactMetadataItem {\n flex-direction: column;\n align-items: flex-start;\n}\n\n.saltContactMetadataItem-icon {\n margin-right: calc(var(--salt-size-unit) * 2);\n padding-left: 1px;\n}\n\n.saltContactMetadataItem-label {\n flex-shrink: 0;\n color: var(--contactDetails-label-color);\n margin-right: calc(var(--salt-size-unit) * 2);\n width: var(--contactDetails-label-width);\n}\n\n.saltContactFavoriteToggle {\n align-self: start;\n grid-area: favorite;\n justify-self: center;\n line-height: var(--contactDetails-primary-fontSize);\n margin-right: var(--contactDetails-favoriteToggle-marginRight);\n margin-top: var(--contactDetails-favoriteToggle-marginTop);\n}\n\n.saltContactFavoriteToggle-svg {\n fill: var(--contactDetails-favoriteToggle-fill);\n}\n\n.saltContactFavoriteToggle-focusVisible {\n outline: none;\n}\n\n.saltContactFavoriteToggle-focused {\n outline: var(--salt-focused-outline);\n}\n\n.saltContactFavoriteToggle-deselected {\n --contactDetails-favoriteToggle-fill: var(--salt-sentiment-accent-borderColor);\n}\n\n.saltContactFavoriteToggle-selecting {\n --contactDetails-favoriteToggle-fill: var(--salt-selectable-foreground-hover);\n}\n\n.saltContactFavoriteToggle-selected {\n --contactDetails-favoriteToggle-fill: var(--salt-selectable-foreground-selected);\n}\n\n.saltContactFavoriteToggle-deselecting {\n --contactDetails-favoriteToggle-fill: var(--salt-selectable-foreground-hover);\n}\n\n.saltContactFavoriteToggle-svg {\n height: var(--contactDetails-icon-size);\n width: var(--contactDetails-icon-size);\n}\n";
2
2
 
3
3
  export { css_248z as default };
4
4
  //# sourceMappingURL=ContactDetails.css.js.map
@@ -1,4 +1,4 @@
1
- var css_248z = "/* Style applied to the root element */\n.saltDateInput {\n align-items: center;\n background: var(--saltDateInput-background, var(--input-background));\n border-radius: var(--salt-palette-corner-weak, 0);\n color: var(--saltDateInput-color, var(--salt-content-primary-foreground));\n display: inline-flex;\n font-family: var(--salt-text-fontFamily);\n font-size: var(--saltDateInput-fontSize, var(--salt-text-fontSize));\n line-height: var(--saltDateInput-lineHeight, var(--salt-text-lineHeight));\n letter-spacing: var(--salt-text-letterSpacing);\n height: var(--saltDateInput-height, var(--salt-size-base));\n min-height: var(--saltDateInput-minHeight, var(--salt-size-base));\n min-width: var(--saltDateInput-minWidth, 4em);\n padding-left: var(--saltDateInput-paddingLeft, var(--salt-spacing-100));\n padding-right: var(--saltDateInput-paddingRight, var(--salt-spacing-100));\n position: relative;\n box-sizing: border-box;\n overflow: hidden;\n width: 100%;\n}\n\n.saltDateInput:hover {\n background: var(--saltDateInput-background-hover, var(--input-background-hover));\n cursor: var(--salt-cursor-text);\n}\n\n/* Style applied if `bordered={true}` */\n.saltDateInput-bordered.saltDateInput {\n border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--input-borderColor);\n}\n\n.saltDateInput-bordered.saltDateInput:hover {\n border-style: var(--salt-borderStyle-solid);\n border-color: var(--input-borderColor-hover);\n}\n\n.saltDateInput-bordered.saltDateInput-focused,\n.saltDateInput-bordered.saltDateInput-focused:hover {\n border-style: var(--salt-borderStyle-solid);\n border-color: var(--input-borderColor-active);\n}\n\n.saltDateInput-bordered.saltDateInput-readOnly,\n.saltDateInput-bordered.saltDateInput-readOnly:hover {\n border-style: var(--salt-borderStyle-solid);\n border-color: var(--salt-editable-borderColor-readonly);\n}\n\n.saltDateInput-bordered.saltDateInput-disabled,\n.saltDateInput-bordered.saltDateInput-disabled:hover {\n border-style: var(--salt-borderStyle-solid);\n border-color: var(--salt-editable-borderColor-disabled);\n}\n\n.saltDateInput-activationIndicator {\n left: 0;\n bottom: 0;\n width: 100%;\n position: absolute;\n border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--input-borderColor);\n}\n\n.saltDateInput:hover .saltDateInput-activationIndicator {\n border-bottom-style: var(--salt-borderStyle-solid);\n border-bottom-color: var(--input-borderColor-hover);\n}\n\n.saltDateInput-focused .saltDateInput-activationIndicator,\n.saltDateInput-focused:hover .saltDateInput-activationIndicator {\n border-bottom: var(--salt-size-fixed-200) var(--salt-borderStyle-solid) var(--input-borderColor-active);\n}\n\n.saltDateInput-readOnly .saltDateInput-activationIndicator,\n.saltDateInput-readOnly:hover .saltDateInput-activationIndicator {\n border-bottom-style: var(--salt-borderStyle-solid);\n border-bottom-color: var(--salt-editable-borderColor-readonly);\n}\n\n.saltDateInput-disabled .saltDateInput-activationIndicator,\n.saltDateInput-disabled:hover .saltDateInput-activationIndicator {\n border-bottom-style: var(--salt-borderStyle-solid);\n border-bottom-color: var(--salt-editable-borderColor-disabled);\n}\n\n.saltDateInput-bordered .saltDateInput-activationIndicator,\n.saltDateInput-bordered.saltDateInput-readOnly .saltDateInput-activationIndicator,\n.saltDateInput-bordered.saltDateInput-disabled:hover .saltDateInput-activationIndicator {\n border-bottom-width: 0;\n}\n\n.saltDateInput-bordered.saltDateInput-focused .saltDateInput-activationIndicator {\n /* Activation indicator width minus the border from the input. */\n border-bottom-width: var(--salt-size-fixed-100);\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltDateInput-primary {\n --input-background: var(--salt-editable-primary-background);\n --input-background-active: var(--salt-editable-primary-background-active);\n --input-background-hover: var(--salt-editable-primary-background-hover);\n --input-background-disabled: var(--salt-editable-primary-background-disabled);\n --input-background-readonly: var(--salt-editable-primary-background-readonly);\n --input-borderColor: var(--salt-editable-borderColor);\n --input-borderColor-active: var(--salt-editable-borderColor-active);\n --input-borderColor-hover: var(--salt-editable-borderColor-hover);\n --input-outlineColor: var(--salt-focused-outlineColor);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltDateInput-secondary {\n --input-background: var(--salt-editable-secondary-background);\n --input-background-active: var(--salt-editable-secondary-background-active);\n --input-background-hover: var(--salt-editable-secondary-background-active);\n --input-background-disabled: var(--salt-editable-secondary-background-disabled);\n --input-background-readonly: var(--salt-editable-secondary-background-readonly);\n --input-borderColor: var(--salt-editable-borderColor);\n --input-borderColor-active: var(--salt-editable-borderColor-active);\n --input-borderColor-hover: var(--salt-editable-borderColor-hover);\n --input-outlineColor: var(--salt-focused-outlineColor);\n}\n\n/* Style applied to input if `validationState=\"error\"` */\n.saltDateInput-error {\n --input-background: var(--salt-status-error-background);\n --input-background-active: var(--salt-status-error-background);\n --input-background-hover: var(--salt-status-error-background);\n --input-background-readonly: var(--salt-status-error-background);\n --input-borderColor: var(--salt-status-error-borderColor);\n --input-borderColor-active: var(--salt-status-error-borderColor);\n --input-borderColor-hover: var(--salt-status-error-borderColor);\n --input-outlineColor: var(--salt-status-error-borderColor);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltDateInput-warning {\n --input-background: var(--salt-status-warning-background);\n --input-background-active: var(--salt-status-warning-background);\n --input-background-hover: var(--salt-status-warning-background);\n --input-background-readonly: var(--salt-status-warning-background);\n --input-borderColor: var(--salt-status-warning-borderColor);\n --input-borderColor-active: var(--salt-status-warning-borderColor);\n --input-borderColor-hover: var(--salt-status-warning-borderColor);\n --input-outlineColor: var(--salt-status-warning-borderColor);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltDateInput-success {\n --input-background: var(--salt-status-success-background);\n --input-background-active: var(--salt-status-success-background);\n --input-background-hover: var(--salt-status-success-background);\n --input-background-readonly: var(--salt-status-success-background);\n --input-borderColor: var(--salt-status-success-borderColor);\n --input-borderColor-active: var(--salt-status-success-borderColor);\n --input-borderColor-hover: var(--salt-status-success-borderColor);\n --input-outlineColor: var(--salt-status-success-borderColor);\n}\n\n/* Styling when focused */\n.saltDateInput-focused,\n.saltDateInput-focused:hover {\n background: var(--saltDateInput-background-active, var(--input-background-active));\n cursor: var(--salt-cursor-text);\n outline: var(--saltDateInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--input-outlineColor));\n}\n\n/* Style applied if `readOnly={true}` */\n.saltDateInput.saltDateInput-readOnly {\n background: var(--input-background-readonly);\n cursor: var(--salt-cursor-readonly);\n}\n\n/* Styling when focused if `disabled={true}` */\n.saltDateInput-disabled,\n.saltDateInput-disabled:hover {\n background: var(--input-background-disabled);\n cursor: var(--salt-cursor-disabled);\n color: var(--saltDateInput-color-disabled, var(--salt-content-primary-foreground-disabled));\n}\n\n/* Style applied to start adornments */\n.saltDateInput-startAdornmentContainer {\n align-items: center;\n display: inline-flex;\n padding-right: var(--salt-spacing-100);\n column-gap: var(--salt-spacing-100);\n}\n\n/* Style applied to end adornments */\n.saltDateInput-endAdornmentContainer {\n display: inline-flex;\n column-gap: var(--salt-spacing-50);\n align-items: flex-end;\n}\n\n.saltDateInput-endAdornmentContainer .saltButton ~ .saltButton {\n margin-left: calc(-1 * var(--salt-spacing-50));\n}\n\n.saltDateInput-endAdornmentContainer .saltButton:last-child {\n margin-right: calc(var(--salt-spacing-50) * -1);\n}\n\n.saltDateInput-startAdornmentContainer > .saltButton,\n.saltDateInput-endAdornmentContainer > .saltButton {\n --saltButton-padding: calc(var(--salt-spacing-50) - var(--button-borderWidth));\n --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n --saltButton-borderRadius: var(--salt-palette-corner-weaker);\n}\n\n/* Style applied to inner input component */\n.saltDateInput-input {\n background: none;\n border: none;\n box-sizing: content-box;\n color: inherit;\n cursor: inherit;\n display: block;\n font: inherit;\n height: 100%;\n letter-spacing: var(--saltDateInput-letterSpacing, 0);\n margin: 0;\n min-width: 0;\n overflow: hidden;\n padding: 0;\n text-align: left;\n width: 100%;\n}\n\n/* Reset in the class */\n.saltDateInput-input:focus {\n outline: none;\n}\n\n/* Style applied to selected input if `disabled={true}` */\n.saltDateInput-disabled .saltDateInput-input::selection {\n background: none;\n}\n\n/* Style applied to placeholder text */\n.saltDateInput-input::placeholder {\n color: var(--salt-content-secondary-foreground);\n font-weight: var(--salt-text-fontWeight-small);\n}\n\n/* Style applied to the dash between two inputs in range date input */\n.saltDateInput-dash {\n margin: 0 var(--salt-spacing-50);\n}\n";
1
+ var css_248z = "/* Style applied to the root element */\n.saltDateInput {\n align-items: center;\n background: var(--saltDateInput-background, var(--input-background));\n border-radius: var(--salt-palette-corner-weak, 0);\n color: var(--saltDateInput-color, var(--salt-content-primary-foreground));\n display: inline-flex;\n font-family: var(--salt-text-fontFamily);\n font-size: var(--saltDateInput-fontSize, var(--salt-text-fontSize));\n line-height: var(--saltDateInput-lineHeight, var(--salt-text-lineHeight));\n letter-spacing: var(--salt-text-letterSpacing);\n height: var(--saltDateInput-height, var(--salt-size-base));\n min-height: var(--saltDateInput-minHeight, var(--salt-size-base));\n min-width: var(--saltDateInput-minWidth, 4em);\n padding-left: var(--saltDateInput-paddingLeft, var(--salt-spacing-100));\n padding-right: var(--saltDateInput-paddingRight, var(--salt-spacing-100));\n position: relative;\n box-sizing: border-box;\n overflow: hidden;\n width: 100%;\n}\n\n.saltDateInput:hover {\n cursor: var(--salt-cursor-text);\n}\n\n/* Style applied if `bordered={true}` */\n.saltDateInput-bordered.saltDateInput {\n border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--input-borderColor);\n}\n\n.saltDateInput-bordered.saltDateInput:hover {\n border-style: var(--salt-borderStyle-solid);\n border-color: var(--input-borderColor-hover);\n}\n\n.saltDateInput-bordered.saltDateInput-focused,\n.saltDateInput-bordered.saltDateInput-focused:hover {\n border-style: var(--salt-borderStyle-solid);\n border-color: var(--input-borderColor-active);\n}\n\n.saltDateInput-bordered.saltDateInput-readOnly,\n.saltDateInput-bordered.saltDateInput-readOnly:hover {\n border-style: var(--salt-borderStyle-solid);\n border-color: var(--salt-editable-borderColor-readonly);\n}\n\n.saltDateInput-bordered.saltDateInput-disabled,\n.saltDateInput-bordered.saltDateInput-disabled:hover {\n border-style: var(--salt-borderStyle-solid);\n border-color: var(--salt-editable-borderColor-disabled);\n}\n\n.saltDateInput-activationIndicator {\n left: 0;\n bottom: 0;\n width: 100%;\n position: absolute;\n border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--input-borderColor);\n}\n\n.saltDateInput:hover .saltDateInput-activationIndicator {\n border-bottom-style: var(--salt-borderStyle-solid);\n border-bottom-color: var(--input-borderColor-hover);\n}\n\n.saltDateInput-focused .saltDateInput-activationIndicator,\n.saltDateInput-focused:hover .saltDateInput-activationIndicator {\n border-bottom: var(--salt-size-fixed-200) var(--salt-borderStyle-solid) var(--input-borderColor-active);\n}\n\n.saltDateInput-readOnly .saltDateInput-activationIndicator,\n.saltDateInput-readOnly:hover .saltDateInput-activationIndicator {\n border-bottom-style: var(--salt-borderStyle-solid);\n border-bottom-color: var(--salt-editable-borderColor-readonly);\n}\n\n.saltDateInput-disabled .saltDateInput-activationIndicator,\n.saltDateInput-disabled:hover .saltDateInput-activationIndicator {\n border-bottom-style: var(--salt-borderStyle-solid);\n border-bottom-color: var(--salt-editable-borderColor-disabled);\n}\n\n.saltDateInput-bordered .saltDateInput-activationIndicator,\n.saltDateInput-bordered.saltDateInput-readOnly .saltDateInput-activationIndicator,\n.saltDateInput-bordered.saltDateInput-disabled:hover .saltDateInput-activationIndicator {\n border-bottom-width: 0;\n}\n\n.saltDateInput-bordered.saltDateInput-focused .saltDateInput-activationIndicator {\n /* Activation indicator width minus the border from the input. */\n border-bottom-width: var(--salt-size-fixed-100);\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltDateInput-primary {\n --input-background: var(--salt-editable-primary-background);\n --input-background-disabled: var(--salt-editable-primary-background-disabled);\n --input-background-readonly: var(--salt-editable-background-readonly);\n --input-borderColor: var(--salt-editable-borderColor);\n --input-borderColor-active: var(--salt-editable-borderColor-active);\n --input-borderColor-hover: var(--salt-editable-borderColor-hover);\n --input-outlineColor: var(--salt-focused-outlineColor);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltDateInput-secondary {\n --input-background: var(--salt-editable-secondary-background);\n --input-background-disabled: var(--salt-editable-secondary-background-disabled);\n --input-background-readonly: var(--salt-editable-background-readonly);\n --input-borderColor: var(--salt-editable-borderColor);\n --input-borderColor-active: var(--salt-editable-borderColor-active);\n --input-borderColor-hover: var(--salt-editable-borderColor-hover);\n --input-outlineColor: var(--salt-focused-outlineColor);\n}\n\n/* Class applied if `variant=\"tertiary\"` */\n.saltDateInput-tertiary {\n --input-background: var(--salt-editable-tertiary-background);\n --input-background-readonly: var(--salt-editable-background-readonly);\n --input-borderColor: var(--salt-editable-borderColor);\n --input-borderColor-active: var(--salt-editable-borderColor-active);\n --input-borderColor-hover: var(--salt-editable-borderColor-hover);\n --input-outlineColor: var(--salt-focused-outlineColor);\n}\n\n/* Style applied to input if `validationState=\"error\"` */\n.saltDateInput-error {\n --input-background: var(--salt-status-error-background);\n --input-background-readonly: var(--salt-status-error-background);\n --input-borderColor: var(--salt-status-error-borderColor);\n --input-borderColor-active: var(--salt-status-error-borderColor);\n --input-borderColor-hover: var(--salt-status-error-borderColor);\n --input-outlineColor: var(--salt-status-error-borderColor);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltDateInput-warning {\n --input-background: var(--salt-status-warning-background);\n --input-background-readonly: var(--salt-status-warning-background);\n --input-borderColor: var(--salt-status-warning-borderColor);\n --input-borderColor-active: var(--salt-status-warning-borderColor);\n --input-borderColor-hover: var(--salt-status-warning-borderColor);\n --input-outlineColor: var(--salt-status-warning-borderColor);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltDateInput-success {\n --input-background: var(--salt-status-success-background);\n --input-background-readonly: var(--salt-status-success-background);\n --input-borderColor: var(--salt-status-success-borderColor);\n --input-borderColor-active: var(--salt-status-success-borderColor);\n --input-borderColor-hover: var(--salt-status-success-borderColor);\n --input-outlineColor: var(--salt-status-success-borderColor);\n}\n\n/* Styling when focused */\n.saltDateInput-focused,\n.saltDateInput-focused:hover {\n cursor: var(--salt-cursor-text);\n outline: var(--saltDateInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--input-outlineColor));\n}\n\n/* Style applied if `readOnly={true}` */\n.saltDateInput.saltDateInput-readOnly {\n background: var(--input-background-readonly);\n cursor: var(--salt-cursor-readonly);\n}\n\n/* Styling when focused if `disabled={true}` */\n.saltDateInput-disabled,\n.saltDateInput-disabled:hover {\n background: var(--input-background-disabled);\n cursor: var(--salt-cursor-disabled);\n color: var(--saltDateInput-color-disabled, var(--salt-content-primary-foreground-disabled));\n}\n\n/* Style applied to start adornments */\n.saltDateInput-startAdornmentContainer {\n align-items: center;\n display: inline-flex;\n padding-right: var(--salt-spacing-100);\n column-gap: var(--salt-spacing-100);\n}\n\n/* Style applied to end adornments */\n.saltDateInput-endAdornmentContainer {\n display: inline-flex;\n column-gap: var(--salt-spacing-50);\n align-items: flex-end;\n}\n\n.saltDateInput-endAdornmentContainer .saltButton ~ .saltButton {\n margin-left: calc(-1 * var(--salt-spacing-50));\n}\n\n.saltDateInput-endAdornmentContainer .saltButton:last-child {\n margin-right: calc(var(--salt-spacing-50) * -1);\n}\n\n.saltDateInput-startAdornmentContainer > .saltButton,\n.saltDateInput-endAdornmentContainer > .saltButton {\n --saltButton-padding: calc(var(--salt-spacing-50) - var(--button-borderWidth));\n --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n --saltButton-borderRadius: var(--salt-palette-corner-weaker);\n}\n\n/* Style applied to inner input component */\n.saltDateInput-input {\n background: none;\n border: none;\n box-sizing: content-box;\n color: inherit;\n cursor: inherit;\n display: block;\n font: inherit;\n height: 100%;\n letter-spacing: var(--saltDateInput-letterSpacing, 0);\n margin: 0;\n min-width: 0;\n overflow: hidden;\n padding: 0;\n text-align: left;\n width: 100%;\n}\n\n/* Reset in the class */\n.saltDateInput-input:focus {\n outline: none;\n}\n\n/* Style applied to selected input if `disabled={true}` */\n.saltDateInput-disabled .saltDateInput-input::selection {\n background: none;\n}\n\n/* Style applied to placeholder text */\n.saltDateInput-input::placeholder {\n color: var(--salt-content-secondary-foreground);\n font-weight: var(--salt-text-fontWeight-small);\n}\n\n/* Style applied to the dash between two inputs in range date input */\n.saltDateInput-dash {\n margin: 0 var(--salt-spacing-50);\n}\n";
2
2
 
3
3
  export { css_248z as default };
4
4
  //# sourceMappingURL=DateInput.css.js.map
@@ -283,10 +283,7 @@ const DateInputRange = forwardRef(
283
283
  "input",
284
284
  {
285
285
  autoComplete: "off",
286
- "aria-describedby": clsx(
287
- formFieldDescribedBy,
288
- startInputPropsDescribedBy
289
- ),
286
+ "aria-describedby": clsx(formFieldDescribedBy, startInputPropsDescribedBy) || void 0,
290
287
  "aria-labelledby": clsx(
291
288
  formFieldLabelledBy,
292
289
  startInputPropsLabelledBy,
@@ -314,10 +311,7 @@ const DateInputRange = forwardRef(
314
311
  "input",
315
312
  {
316
313
  autoComplete: "off",
317
- "aria-describedby": clsx(
318
- formFieldDescribedBy,
319
- endInputPropsDescribedBy
320
- ),
314
+ "aria-describedby": clsx(formFieldDescribedBy, endInputPropsDescribedBy) || void 0,
321
315
  "aria-labelledby": clsx(
322
316
  formFieldLabelledBy,
323
317
  endInputPropsLabelledBy,
@@ -1 +1 @@
1
- {"version":3,"file":"DateInputRange.js","sources":["../src/date-input/DateInputRange.tsx"],"sourcesContent":["import {\n type InputProps,\n makePrefixer,\n StatusAdornment,\n useControlled,\n useForkRef,\n useFormFieldProps,\n useId,\n} from \"@salt-ds/core\";\nimport type {\n DateDetail,\n DateFrameworkType,\n ParserResult,\n TimeFields,\n Timezone,\n} from \"@salt-ds/date-adapters\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ChangeEvent,\n type ChangeEventHandler,\n type ComponentPropsWithoutRef,\n type FocusEventHandler,\n forwardRef,\n type InputHTMLAttributes,\n type KeyboardEventHandler,\n type MouseEventHandler,\n type ReactNode,\n type Ref,\n type SyntheticEvent,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport type { DateRangeSelection } from \"../calendar\";\nimport { useLocalization } from \"../localization-provider\";\nimport dateInputCss from \"./DateInput.css\";\n\nconst withBaseName = makePrefixer(\"saltDateInput\");\n\n/**\n * DateInputRange raw value or null if no date is defined.\n */\nexport type DateInputRangeValue = {\n startDate?: string | null;\n endDate?: string | null;\n};\n\n/**\n * Details of parsing the date range\n */\nexport type DateInputRangeDetails = {\n /** Details of parsing the start date and applying any validation */\n startDate?: DateDetail;\n /** Details of parsing the end date and applying any validation */\n endDate?: DateDetail;\n};\n\n/**\n * Enum to identify the field being parsed\n */\nexport enum DateParserField {\n START = \"start\",\n END = \"end\",\n}\n\n/**\n * Props for the DateInputRange component.\n * @template TDate - The type of the date object.\n */\nexport interface DateInputRangeProps<TDate extends DateFrameworkType>\n extends Omit<ComponentPropsWithoutRef<\"div\">, \"defaultValue\" | \"onChange\">,\n Omit<InputProps, \"defaultValue\" | \"inputRef\" | \"value\" | \"onChange\"> {\n /**\n * The aria-label for accessibility.\n */\n ariaLabel?: string;\n /**\n * Styling variant with full border. Defaults to false.\n */\n bordered?: boolean;\n /**\n * The marker to use in an empty read-only DateInput.\n * Use `''` to disable this feature. Defaults to '—'.\n */\n emptyReadOnlyMarker?: string;\n /**\n * End adornment component.\n */\n endAdornment?: ReactNode;\n /**\n * Attributes applied to the start `input` element.\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dateInput#Attributes\n */\n startInputProps?: InputHTMLAttributes<HTMLInputElement>;\n /**\n * Attributes applied to the end `input` element.\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dateInput#Attributes\n */\n endInputProps?: InputHTMLAttributes<HTMLInputElement>;\n /**\n * If `true`, the component is read-only.\n */\n readOnly?: boolean;\n /**\n * Validation status.\n */\n validationStatus?: \"error\" | \"warning\" | \"success\";\n /**\n * Styling variant. Defaults to \"primary\".\n */\n variant?: \"primary\" | \"secondary\";\n /**\n * Format string for date.\n */\n format?: string;\n /**\n * Optional ref for the start input component.\n */\n startInputRef?: Ref<HTMLInputElement>;\n /**\n * Optional ref for the end input component.\n */\n endInputRef?: Ref<HTMLInputElement>;\n /**\n * Parser callback, if not using the adapter's parser\n * @param value - date string to parse\n * @param field: DateParserField to identify value,\n * @param format - format required\n */\n parse?: (\n value: string,\n field: DateParserField,\n format: string,\n ) => ParserResult<TDate>;\n /**\n * Input value. Use when the input value is controlled.\n */\n value?: DateInputRangeValue;\n /**\n * The initial input value. Use when the component is uncontrolled.\n */\n defaultValue?: DateInputRangeValue;\n /**\n * The date value. Use when the component is controlled.\n */\n date?: DateRangeSelection<TDate> | null;\n /**\n * The initial selected date value. Use when the component is uncontrolled.\n */\n defaultDate?: DateRangeSelection<TDate> | null;\n /**\n * Callback fired when the input value changes.\n * @param event - The change event.\n * @param date - The new date input range value.\n */\n onChange?: (event: ChangeEvent<HTMLInputElement>) => void;\n /**\n * Callback fired when the selected date changes.\n * @param event - The synthetic event.\n * @param date - the selected date, invalid date if not a valid date or undefined (uncontrolled) or null (controlled) if not defined\n * @param details - The details of date selection, either a valid date or error\n */\n onDateChange?: (\n event: SyntheticEvent,\n date: DateRangeSelection<TDate> | null,\n details: DateInputRangeDetails,\n ) => void;\n /**\n * Called when input values change, either due to user interaction or programmatic formatting of valid dates.\n * @param event - The synthetic event or null if a programmatic change.\n * @param newValue - The new date input range value.\n */\n onDateValueChange?: (\n event: SyntheticEvent | null,\n newValue: DateInputRangeValue,\n ) => void;\n /**\n * Specifies the timezone behavior:\n * - If undefined, the timezone will be derived from the passed date, or from `defaultSelectedDate`/`selectedDate`.\n * - If set to \"default\", the default timezone of the date library will be used.\n * - If set to \"system\", the local system's timezone will be applied.\n * - If set to \"UTC\", the time will be returned in UTC.\n * - If set to a valid IANA timezone identifier, the time will be returned for that specific timezone.\n */\n timezone?: Timezone;\n}\n\nexport const DateInputRange = forwardRef<\n HTMLDivElement,\n DateInputRangeProps<DateFrameworkType>\n>(\n <TDate extends DateFrameworkType>(\n props: DateInputRangeProps<TDate>,\n ref: React.Ref<HTMLDivElement>,\n ) => {\n const { dateAdapter } = useLocalization<TDate>();\n const {\n bordered = false,\n className,\n disabled,\n \"aria-label\": ariaLabel,\n date: dateProp,\n defaultDate,\n onDateChange,\n value: valueProp,\n format = \"DD MMM YYYY\",\n defaultValue = {\n startDate: \"\",\n endDate: \"\",\n },\n onChange,\n onClick,\n onDateValueChange,\n emptyReadOnlyMarker = \"—\",\n endAdornment,\n startInputProps = {},\n endInputProps = {},\n startInputRef: startInputRefProp,\n endInputRef: endInputRefProp,\n parse: parseProp,\n placeholder = format.toLowerCase(),\n readOnly: readOnlyProp,\n validationStatus: validationStatusProp,\n variant = \"primary\",\n timezone = dateProp?.startDate || defaultDate?.startDate\n ? dateAdapter.getTimezone(\n (dateProp?.startDate ?? defaultDate?.startDate) as TDate,\n )\n : \"default\",\n ...rest\n } = props;\n const wrapperRef = useRef(null);\n const handleWrapperRef = useForkRef<HTMLDivElement>(ref, wrapperRef);\n\n const startInputRef = useRef<HTMLInputElement>(null);\n const handleStartInputRef = useForkRef(startInputRef, startInputRefProp);\n const endInputRef = useRef<HTMLInputElement>(null);\n const handleEndInputRef = useForkRef(endInputRef, endInputRefProp);\n\n const startInputID = useId();\n const endInputID = useId();\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-date-input-range\",\n css: dateInputCss,\n window: targetWindow,\n });\n\n const parseDateValue = (\n dateValue: string | null | undefined,\n field: DateParserField,\n ): ParserResult<TDate> | undefined =>\n parseProp\n ? parseProp(dateValue ?? \"\", field, format)\n : dateAdapter.parse.bind(dateAdapter)(dateValue ?? \"\", format);\n\n const [dateValue, setDateValue] = useControlled({\n controlled: valueProp,\n default: defaultValue,\n name: \"DateInputRange\",\n state: \"dateValue\",\n });\n\n const [date, setDate] = useControlled({\n controlled: dateProp,\n // biome-ignore lint/correctness/useExhaustiveDependencies: just on mount\n default: useMemo(() => {\n if (defaultDate) {\n return defaultDate;\n }\n if (!defaultValue) {\n return undefined;\n }\n const { date: startDate = undefined } =\n parseDateValue(defaultValue?.startDate, DateParserField.START) ?? {};\n const { date: endDate = undefined } =\n parseDateValue(defaultValue?.endDate, DateParserField.END) ?? {};\n return {\n startDate,\n endDate,\n };\n }, []),\n name: \"DateInputRange\",\n state: \"date\",\n });\n\n const lastAppliedValue = useRef<DateInputRangeValue>(dateValue);\n const preservedTime = useRef<{\n startTime: TimeFields | null;\n endTime: TimeFields | null;\n }>({ startTime: null, endTime: null });\n preservedTime.current = {\n startTime:\n date?.startDate && dateAdapter.isValid(date?.startDate)\n ? dateAdapter.getTime(date.startDate)\n : null,\n endTime:\n date?.endDate && dateAdapter.isValid(date?.endDate)\n ? dateAdapter.getTime(date.endDate)\n : null,\n };\n const setDateValueFromDate = (newDate: typeof date) => {\n let newDateValue = { startDate: \"\", endDate: \"\" };\n if (!newDate?.startDate) {\n newDateValue = { ...newDateValue, startDate: \"\" };\n } else if (!dateAdapter.isValid(newDate?.startDate)) {\n newDateValue = {\n ...newDateValue,\n startDate: dateValue?.startDate ?? \"\",\n };\n } else if (newDate?.startDate) {\n const formattedStartDateValue = dateAdapter.format(\n newDate.startDate,\n format,\n );\n newDateValue = { ...newDateValue, startDate: formattedStartDateValue };\n }\n if (!newDate?.endDate) {\n newDateValue = { ...newDateValue, endDate: \"\" };\n } else if (!dateAdapter.isValid(newDate?.endDate)) {\n newDateValue = { ...newDateValue, endDate: dateValue?.endDate ?? \"\" };\n } else if (newDate?.endDate && dateAdapter.isValid(newDate.endDate)) {\n const formattedEndDateValue = dateAdapter.format(\n newDate.endDate,\n format,\n );\n newDateValue = { ...newDateValue, endDate: formattedEndDateValue };\n }\n\n if (\n (!newDateValue?.startDate && !!dateValue?.startDate) ||\n (!newDateValue.endDate && !!dateValue?.endDate) ||\n newDateValue?.startDate !== dateValue?.startDate ||\n newDateValue?.endDate !== dateValue?.endDate\n ) {\n onDateValueChange?.(null, newDateValue);\n setDateValue(newDateValue);\n }\n return newDateValue;\n };\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: Update date string value ONLY when selected date changes, not when date string itself change\n useEffect(() => {\n lastAppliedValue.current = setDateValueFromDate(date);\n }, [date, date?.startDate, date?.endDate, dateAdapter.format, format]);\n\n const [focused, setFocused] = useState(false);\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 isReadOnly = readOnlyProp || formFieldReadOnly;\n const isDisabled = disabled || formFieldDisabled;\n\n const validationStatus = formFieldValidationStatus ?? validationStatusProp;\n\n const {\n \"aria-describedby\": startInputPropsDescribedBy,\n \"aria-labelledby\": startInputPropsLabelledBy,\n onBlur: startInputPropsOnBlur,\n onChange: startInputPropsOnChange,\n onKeyDown: startInputPropsOnKeyDown,\n onFocus: startInputPropsOnFocus,\n required: startInputPropsRequired,\n ...restStartInputProps\n } = startInputProps;\n\n const startInputIsRequired = formFieldRequired\n ? [\"required\", \"asterisk\"].includes(formFieldRequired)\n : startInputPropsRequired;\n\n const {\n \"aria-describedby\": endInputPropsDescribedBy,\n \"aria-labelledby\": endInputPropsLabelledBy,\n onBlur: endInputPropsOnBlur,\n onChange: endInputPropsOnChange,\n onKeyDown: endInputPropsOnKeyDown,\n onFocus: endInputPropsOnFocus,\n required: endInputPropsRequired,\n ...restEndInputProps\n } = endInputProps;\n\n const endInputIsRequired = formFieldRequired\n ? [\"required\", \"asterisk\"].includes(formFieldRequired)\n : endInputPropsRequired;\n\n const apply = (event: SyntheticEvent) => {\n const { date: startDate = undefined, ...startDateParseDetails } =\n parseDateValue(dateValue?.startDate, DateParserField.START) ?? {};\n const { date: endDate = undefined, ...endDateParseDetails } =\n parseDateValue(dateValue?.endDate, DateParserField.END) ?? {};\n\n const updatedDateRange: DateRangeSelection<TDate> = {\n startDate: dateValue?.startDate?.length ? startDate : null,\n endDate: dateValue?.endDate?.length ? endDate : null,\n };\n if (dateAdapter.isValid(startDate)) {\n updatedDateRange.startDate = dateAdapter.setTimezone(\n startDate,\n timezone,\n );\n if (preservedTime.current.startTime) {\n updatedDateRange.startDate = dateAdapter.set(\n updatedDateRange.startDate,\n preservedTime.current.startTime,\n );\n }\n }\n if (dateAdapter.isValid(endDate)) {\n updatedDateRange.endDate = dateAdapter.setTimezone(endDate, timezone);\n if (preservedTime.current.endTime) {\n updatedDateRange.endDate = dateAdapter.set(\n updatedDateRange.endDate,\n preservedTime.current.endTime,\n );\n }\n }\n const updatedDateValue = setDateValueFromDate(updatedDateRange);\n\n setDate(updatedDateRange);\n\n if (\n lastAppliedValue.current.startDate !== updatedDateValue.startDate ||\n lastAppliedValue.current.endDate !== updatedDateValue.endDate\n ) {\n onDateChange?.(event, updatedDateRange, {\n startDate: startDateParseDetails,\n endDate: endDateParseDetails,\n });\n onDateValueChange?.(event, updatedDateValue);\n lastAppliedValue.current = updatedDateValue;\n }\n };\n\n const handleStartInputChange: ChangeEventHandler<HTMLInputElement> = (\n event,\n ) => {\n const newDateValue = { ...dateValue, startDate: event.target.value };\n setDateValue(newDateValue);\n startInputPropsOnChange?.(event);\n onChange?.(event);\n onDateValueChange?.(event, newDateValue);\n };\n\n const handleEndInputChange: ChangeEventHandler<HTMLInputElement> = (\n event,\n ) => {\n const newDateValue = { ...dateValue, endDate: event.target.value };\n setDateValue(newDateValue);\n endInputPropsOnChange?.(event);\n onChange?.(event);\n onDateValueChange?.(event, newDateValue);\n };\n\n const handleStartInputFocus: FocusEventHandler<HTMLInputElement> = (\n event,\n ) => {\n setFocused(true);\n startInputPropsOnFocus?.(event);\n };\n\n const handleEndInputFocus: FocusEventHandler<HTMLInputElement> = (\n event,\n ) => {\n setFocused(true);\n endInputPropsOnFocus?.(event);\n };\n\n const handleStartInputBlur: FocusEventHandler<HTMLInputElement> = (\n event,\n ) => {\n setFocused(false);\n apply(event);\n startInputPropsOnBlur?.(event);\n };\n\n const handleEndInputBlur: FocusEventHandler<HTMLInputElement> = (event) => {\n setFocused(false);\n apply(event);\n endInputPropsOnBlur?.(event);\n };\n\n const handleStartInputKeyDown: KeyboardEventHandler<HTMLInputElement> = (\n event,\n ) => {\n if (event.key === \"Enter\") {\n apply(event);\n }\n startInputPropsOnKeyDown?.(event);\n };\n\n const handleEndInputKeyDown: KeyboardEventHandler<HTMLInputElement> = (\n event,\n ) => {\n if (event.key === \"Enter\") {\n apply(event);\n }\n endInputPropsOnKeyDown?.(event);\n };\n\n const handleWrapperClick: MouseEventHandler<HTMLDivElement> = (event) => {\n if (event.target === wrapperRef.current) {\n const input = startInputRef.current;\n input?.focus();\n input?.setSelectionRange(input.value.length, input.value.length);\n }\n onClick?.(event);\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(validationStatus ?? \"\")]: validationStatus,\n [withBaseName(\"bordered\")]: bordered,\n },\n className,\n )}\n ref={handleWrapperRef}\n onClick={handleWrapperClick}\n {...rest}\n >\n <input\n autoComplete=\"off\"\n aria-describedby={clsx(\n formFieldDescribedBy,\n startInputPropsDescribedBy,\n )}\n aria-labelledby={clsx(\n formFieldLabelledBy,\n startInputPropsLabelledBy,\n startInputID,\n )}\n aria-label={clsx(\"Start date\", ariaLabel)}\n id={startInputID}\n className={withBaseName(\"input\")}\n disabled={isDisabled}\n readOnly={isReadOnly}\n ref={handleStartInputRef}\n tabIndex={isDisabled ? -1 : 0}\n placeholder={placeholder}\n value={\n isReadOnly && !dateValue?.startDate\n ? emptyReadOnlyMarker\n : (dateValue.startDate ?? dateAdapter.format(undefined, format))\n }\n {...restStartInputProps}\n onBlur={handleStartInputBlur}\n onChange={handleStartInputChange}\n onKeyDown={handleStartInputKeyDown}\n onFocus={!isDisabled ? handleStartInputFocus : undefined}\n required={startInputIsRequired}\n />\n <span className={withBaseName(\"dash\")}>-</span>\n <input\n autoComplete=\"off\"\n aria-describedby={clsx(\n formFieldDescribedBy,\n endInputPropsDescribedBy,\n )}\n aria-labelledby={clsx(\n formFieldLabelledBy,\n endInputPropsLabelledBy,\n endInputID,\n )}\n aria-label={clsx(\"End date\", ariaLabel)}\n id={endInputID}\n className={withBaseName(\"input\")}\n disabled={isDisabled}\n readOnly={isReadOnly}\n ref={handleEndInputRef}\n tabIndex={isDisabled ? -1 : 0}\n placeholder={placeholder}\n value={\n isReadOnly && !dateValue?.endDate\n ? emptyReadOnlyMarker\n : (dateValue.endDate ?? dateAdapter.format(undefined, format))\n }\n {...restEndInputProps}\n onBlur={handleEndInputBlur}\n onChange={handleEndInputChange}\n onKeyDown={handleEndInputKeyDown}\n onFocus={!isDisabled ? handleEndInputFocus : undefined}\n required={endInputIsRequired}\n />\n <div className={withBaseName(\"endAdornmentContainer\")}>\n {!isDisabled && validationStatus && (\n <StatusAdornment status={validationStatus} />\n )}\n {endAdornment}\n </div>\n <div className={withBaseName(\"activationIndicator\")} />\n </div>\n );\n },\n);\n"],"names":["DateParserField","dateInputCss","dateValue"],"mappings":";;;;;;;;;AAwCA,MAAM,YAAA,GAAe,aAAa,eAAe,CAAA;AAuB1C,IAAK,eAAA,qBAAAA,gBAAAA,KAAL;AACL,EAAAA,iBAAA,OAAA,CAAA,GAAQ,OAAA;AACR,EAAAA,iBAAA,KAAA,CAAA,GAAM,KAAA;AAFI,EAAA,OAAAA,gBAAAA;AAAA,CAAA,EAAA,eAAA,IAAA,EAAA;AA+HL,MAAM,cAAA,GAAiB,UAAA;AAAA,EAI5B,CACE,OACA,GAAA,KACG;AACH,IAAA,MAAM,EAAE,WAAA,EAAY,GAAI,eAAA,EAAuB;AAC/C,IAAA,MAAM;AAAA,MACJ,QAAA,GAAW,KAAA;AAAA,MACX,SAAA;AAAA,MACA,QAAA;AAAA,MACA,YAAA,EAAc,SAAA;AAAA,MACd,IAAA,EAAM,QAAA;AAAA,MACN,WAAA;AAAA,MACA,YAAA;AAAA,MACA,KAAA,EAAO,SAAA;AAAA,MACP,MAAA,GAAS,aAAA;AAAA,MACT,YAAA,GAAe;AAAA,QACb,SAAA,EAAW,EAAA;AAAA,QACX,OAAA,EAAS;AAAA,OACX;AAAA,MACA,QAAA;AAAA,MACA,OAAA;AAAA,MACA,iBAAA;AAAA,MACA,mBAAA,GAAsB,QAAA;AAAA,MACtB,YAAA;AAAA,MACA,kBAAkB,EAAC;AAAA,MACnB,gBAAgB,EAAC;AAAA,MACjB,aAAA,EAAe,iBAAA;AAAA,MACf,WAAA,EAAa,eAAA;AAAA,MACb,KAAA,EAAO,SAAA;AAAA,MACP,WAAA,GAAc,OAAO,WAAA,EAAY;AAAA,MACjC,QAAA,EAAU,YAAA;AAAA,MACV,gBAAA,EAAkB,oBAAA;AAAA,MAClB,OAAA,GAAU,SAAA;AAAA,MACV,QAAA,GAAA,CAAW,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAU,SAAA,MAAa,WAAA,IAAA,IAAA,GAAA,MAAA,GAAA,WAAA,CAAa,aAC3C,WAAA,CAAY,WAAA;AAAA,QAAA,CACT,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAU,eAAa,WAAA,IAAA,IAAA,GAAA,MAAA,GAAA,WAAA,CAAa,SAAA;AAAA,OACvC,GACA,SAAA;AAAA,MACJ,GAAG;AAAA,KACL,GAAI,KAAA;AACJ,IAAA,MAAM,UAAA,GAAa,OAAO,IAAI,CAAA;AAC9B,IAAA,MAAM,gBAAA,GAAmB,UAAA,CAA2B,GAAA,EAAK,UAAU,CAAA;AAEnE,IAAA,MAAM,aAAA,GAAgB,OAAyB,IAAI,CAAA;AACnD,IAAA,MAAM,mBAAA,GAAsB,UAAA,CAAW,aAAA,EAAe,iBAAiB,CAAA;AACvE,IAAA,MAAM,WAAA,GAAc,OAAyB,IAAI,CAAA;AACjD,IAAA,MAAM,iBAAA,GAAoB,UAAA,CAAW,WAAA,EAAa,eAAe,CAAA;AAEjE,IAAA,MAAM,eAAe,KAAA,EAAM;AAC3B,IAAA,MAAM,aAAa,KAAA,EAAM;AAEzB,IAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,IAAA,wBAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,uBAAA;AAAA,MACR,GAAA,EAAKC,QAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,iBAAiB,CACrBC,UAAAA,EACA,UAEA,SAAA,GACI,SAAA,CAAUA,cAAa,EAAA,EAAI,KAAA,EAAO,MAAM,CAAA,GACxC,YAAY,KAAA,CAAM,IAAA,CAAK,WAAW,CAAA,CAAEA,UAAAA,IAAa,IAAI,MAAM,CAAA;AAEjE,IAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,aAAA,CAAc;AAAA,MAC9C,UAAA,EAAY,SAAA;AAAA,MACZ,OAAA,EAAS,YAAA;AAAA,MACT,IAAA,EAAM,gBAAA;AAAA,MACN,KAAA,EAAO;AAAA,KACR,CAAA;AAED,IAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,aAAA,CAAc;AAAA,MACpC,UAAA,EAAY,QAAA;AAAA;AAAA,MAEZ,OAAA,EAAS,QAAQ,MAAM;AACrB,QAAA,IAAI,WAAA,EAAa;AACf,UAAA,OAAO,WAAA;AAAA,QACT;AACA,QAAA,IAAI,CAAC,YAAA,EAAc;AACjB,UAAA,OAAO,MAAA;AAAA,QACT;AACA,QAAA,MAAM,EAAE,IAAA,EAAM,SAAA,GAAY,MAAA,EAAU,GAClC,eAAe,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAc,SAAA,EAAW,OAAA,aAAqB,IAAK,EAAC;AACrE,QAAA,MAAM,EAAE,IAAA,EAAM,OAAA,GAAU,MAAA,EAAU,GAChC,eAAe,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAc,OAAA,EAAS,KAAA,WAAmB,IAAK,EAAC;AACjE,QAAA,OAAO;AAAA,UACL,SAAA;AAAA,UACA;AAAA,SACF;AAAA,MACF,CAAA,EAAG,EAAE,CAAA;AAAA,MACL,IAAA,EAAM,gBAAA;AAAA,MACN,KAAA,EAAO;AAAA,KACR,CAAA;AAED,IAAA,MAAM,gBAAA,GAAmB,OAA4B,SAAS,CAAA;AAC9D,IAAA,MAAM,gBAAgB,MAAA,CAGnB,EAAE,WAAW,IAAA,EAAM,OAAA,EAAS,MAAM,CAAA;AACrC,IAAA,aAAA,CAAc,OAAA,GAAU;AAAA,MACtB,SAAA,EAAA,CACE,IAAA,IAAA,IAAA,GAAA,MAAA,GAAA,IAAA,CAAM,SAAA,KAAa,WAAA,CAAY,OAAA,CAAQ,IAAA,IAAA,IAAA,GAAA,MAAA,GAAA,IAAA,CAAM,SAAS,CAAA,GAClD,WAAA,CAAY,OAAA,CAAQ,IAAA,CAAK,SAAS,CAAA,GAClC,IAAA;AAAA,MACN,OAAA,EAAA,CACE,IAAA,IAAA,IAAA,GAAA,MAAA,GAAA,IAAA,CAAM,OAAA,KAAW,WAAA,CAAY,OAAA,CAAQ,IAAA,IAAA,IAAA,GAAA,MAAA,GAAA,IAAA,CAAM,OAAO,CAAA,GAC9C,WAAA,CAAY,OAAA,CAAQ,IAAA,CAAK,OAAO,CAAA,GAChC;AAAA,KACR;AACA,IAAA,MAAM,oBAAA,GAAuB,CAAC,OAAA,KAAyB;AACrD,MAAA,IAAI,YAAA,GAAe,EAAE,SAAA,EAAW,EAAA,EAAI,SAAS,EAAA,EAAG;AAChD,MAAA,IAAI,EAAC,mCAAS,SAAA,CAAA,EAAW;AACvB,QAAA,YAAA,GAAe,EAAE,GAAG,YAAA,EAAc,SAAA,EAAW,EAAA,EAAG;AAAA,MAClD,WAAW,CAAC,WAAA,CAAY,OAAA,CAAQ,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAS,SAAS,CAAA,EAAG;AACnD,QAAA,YAAA,GAAe;AAAA,UACb,GAAG,YAAA;AAAA,UACH,SAAA,EAAA,CAAW,uCAAW,SAAA,KAAa;AAAA,SACrC;AAAA,MACF,CAAA,MAAA,IAAW,mCAAS,SAAA,EAAW;AAC7B,QAAA,MAAM,0BAA0B,WAAA,CAAY,MAAA;AAAA,UAC1C,OAAA,CAAQ,SAAA;AAAA,UACR;AAAA,SACF;AACA,QAAA,YAAA,GAAe,EAAE,GAAG,YAAA,EAAc,SAAA,EAAW,uBAAA,EAAwB;AAAA,MACvE;AACA,MAAA,IAAI,EAAC,mCAAS,OAAA,CAAA,EAAS;AACrB,QAAA,YAAA,GAAe,EAAE,GAAG,YAAA,EAAc,OAAA,EAAS,EAAA,EAAG;AAAA,MAChD,WAAW,CAAC,WAAA,CAAY,OAAA,CAAQ,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAS,OAAO,CAAA,EAAG;AACjD,QAAA,YAAA,GAAe,EAAE,GAAG,YAAA,EAAc,OAAA,EAAA,CAAS,SAAA,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAW,YAAW,EAAA,EAAG;AAAA,MACtE,YAAW,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAS,OAAA,KAAW,YAAY,OAAA,CAAQ,OAAA,CAAQ,OAAO,CAAA,EAAG;AACnE,QAAA,MAAM,wBAAwB,WAAA,CAAY,MAAA;AAAA,UACxC,OAAA,CAAQ,OAAA;AAAA,UACR;AAAA,SACF;AACA,QAAA,YAAA,GAAe,EAAE,GAAG,YAAA,EAAc,OAAA,EAAS,qBAAA,EAAsB;AAAA,MACnE;AAEA,MAAA,IACG,EAAC,6CAAc,SAAA,CAAA,IAAa,CAAC,EAAC,SAAA,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAW,SAAA,CAAA,IACzC,CAAC,YAAA,CAAa,OAAA,IAAW,CAAC,EAAC,SAAA,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAW,aACvC,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAc,SAAA,OAAc,uCAAW,SAAA,CAAA,IAAA,CACvC,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAc,OAAA,OAAY,SAAA,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAW,OAAA,CAAA,EACrC;AACA,QAAA,iBAAA,IAAA,IAAA,GAAA,MAAA,GAAA,iBAAA,CAAoB,IAAA,EAAM,YAAA,CAAA;AAC1B,QAAA,YAAA,CAAa,YAAY,CAAA;AAAA,MAC3B;AACA,MAAA,OAAO,YAAA;AAAA,IACT,CAAA;AAGA,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,gBAAA,CAAiB,OAAA,GAAU,qBAAqB,IAAI,CAAA;AAAA,IACtD,CAAA,EAAG,CAAC,IAAA,EAAM,IAAA,IAAA,IAAA,GAAA,MAAA,GAAA,IAAA,CAAM,SAAA,EAAW,6BAAM,OAAA,EAAS,WAAA,CAAY,MAAA,EAAQ,MAAM,CAAC,CAAA;AAErE,IAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,SAAS,KAAK,CAAA;AAE5C,IAAA,MAAM;AAAA,MACJ,SAAA,EAAW;AAAA,QACT,kBAAA,EAAoB,oBAAA;AAAA,QACpB,iBAAA,EAAmB;AAAA,UACjB,EAAC;AAAA,MACL,QAAA,EAAU,iBAAA;AAAA,MACV,QAAA,EAAU,iBAAA;AAAA,MACV,SAAA,EAAW,iBAAA;AAAA,MACX,gBAAA,EAAkB;AAAA,QAChB,iBAAA,EAAkB;AAEtB,IAAA,MAAM,aAAa,YAAA,IAAgB,iBAAA;AACnC,IAAA,MAAM,aAAa,QAAA,IAAY,iBAAA;AAE/B,IAAA,MAAM,mBAAmB,yBAAA,IAA6B,oBAAA;AAEtD,IAAA,MAAM;AAAA,MACJ,kBAAA,EAAoB,0BAAA;AAAA,MACpB,iBAAA,EAAmB,yBAAA;AAAA,MACnB,MAAA,EAAQ,qBAAA;AAAA,MACR,QAAA,EAAU,uBAAA;AAAA,MACV,SAAA,EAAW,wBAAA;AAAA,MACX,OAAA,EAAS,sBAAA;AAAA,MACT,QAAA,EAAU,uBAAA;AAAA,MACV,GAAG;AAAA,KACL,GAAI,eAAA;AAEJ,IAAA,MAAM,oBAAA,GAAuB,oBACzB,CAAC,UAAA,EAAY,UAAU,CAAA,CAAE,QAAA,CAAS,iBAAiB,CAAA,GACnD,uBAAA;AAEJ,IAAA,MAAM;AAAA,MACJ,kBAAA,EAAoB,wBAAA;AAAA,MACpB,iBAAA,EAAmB,uBAAA;AAAA,MACnB,MAAA,EAAQ,mBAAA;AAAA,MACR,QAAA,EAAU,qBAAA;AAAA,MACV,SAAA,EAAW,sBAAA;AAAA,MACX,OAAA,EAAS,oBAAA;AAAA,MACT,QAAA,EAAU,qBAAA;AAAA,MACV,GAAG;AAAA,KACL,GAAI,aAAA;AAEJ,IAAA,MAAM,kBAAA,GAAqB,oBACvB,CAAC,UAAA,EAAY,UAAU,CAAA,CAAE,QAAA,CAAS,iBAAiB,CAAA,GACnD,qBAAA;AAEJ,IAAA,MAAM,KAAA,GAAQ,CAAC,KAAA,KAA0B;AA9Y7C,MAAA,IAAA,EAAA,EAAA,EAAA;AA+YM,MAAA,MAAM,EAAE,IAAA,EAAM,SAAA,GAAY,MAAA,EAAW,GAAG,qBAAA,EAAsB,GAC5D,cAAA,CAAe,SAAA,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAW,SAAA,EAAW,OAAA,aAAqB,IAAK,EAAC;AAClE,MAAA,MAAM,EAAE,IAAA,EAAM,OAAA,GAAU,MAAA,EAAW,GAAG,mBAAA,EAAoB,GACxD,cAAA,CAAe,SAAA,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAW,OAAA,EAAS,KAAA,WAAmB,IAAK,EAAC;AAE9D,MAAA,MAAM,gBAAA,GAA8C;AAAA,QAClD,SAAA,EAAA,CAAA,CAAW,EAAA,GAAA,SAAA,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAW,SAAA,KAAX,IAAA,GAAA,MAAA,GAAA,EAAA,CAAsB,UAAS,SAAA,GAAY,IAAA;AAAA,QACtD,OAAA,EAAA,CAAA,CAAS,EAAA,GAAA,SAAA,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAW,OAAA,KAAX,IAAA,GAAA,MAAA,GAAA,EAAA,CAAoB,UAAS,OAAA,GAAU;AAAA,OAClD;AACA,MAAA,IAAI,WAAA,CAAY,OAAA,CAAQ,SAAS,CAAA,EAAG;AAClC,QAAA,gBAAA,CAAiB,YAAY,WAAA,CAAY,WAAA;AAAA,UACvC,SAAA;AAAA,UACA;AAAA,SACF;AACA,QAAA,IAAI,aAAA,CAAc,QAAQ,SAAA,EAAW;AACnC,UAAA,gBAAA,CAAiB,YAAY,WAAA,CAAY,GAAA;AAAA,YACvC,gBAAA,CAAiB,SAAA;AAAA,YACjB,cAAc,OAAA,CAAQ;AAAA,WACxB;AAAA,QACF;AAAA,MACF;AACA,MAAA,IAAI,WAAA,CAAY,OAAA,CAAQ,OAAO,CAAA,EAAG;AAChC,QAAA,gBAAA,CAAiB,OAAA,GAAU,WAAA,CAAY,WAAA,CAAY,OAAA,EAAS,QAAQ,CAAA;AACpE,QAAA,IAAI,aAAA,CAAc,QAAQ,OAAA,EAAS;AACjC,UAAA,gBAAA,CAAiB,UAAU,WAAA,CAAY,GAAA;AAAA,YACrC,gBAAA,CAAiB,OAAA;AAAA,YACjB,cAAc,OAAA,CAAQ;AAAA,WACxB;AAAA,QACF;AAAA,MACF;AACA,MAAA,MAAM,gBAAA,GAAmB,qBAAqB,gBAAgB,CAAA;AAE9D,MAAA,OAAA,CAAQ,gBAAgB,CAAA;AAExB,MAAA,IACE,gBAAA,CAAiB,QAAQ,SAAA,KAAc,gBAAA,CAAiB,aACxD,gBAAA,CAAiB,OAAA,CAAQ,OAAA,KAAY,gBAAA,CAAiB,OAAA,EACtD;AACA,QAAA,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAe,OAAO,gBAAA,EAAkB;AAAA,UACtC,SAAA,EAAW,qBAAA;AAAA,UACX,OAAA,EAAS;AAAA,SACX,CAAA;AACA,QAAA,iBAAA,IAAA,IAAA,GAAA,MAAA,GAAA,iBAAA,CAAoB,KAAA,EAAO,gBAAA,CAAA;AAC3B,QAAA,gBAAA,CAAiB,OAAA,GAAU,gBAAA;AAAA,MAC7B;AAAA,IACF,CAAA;AAEA,IAAA,MAAM,sBAAA,GAA+D,CACnE,KAAA,KACG;AACH,MAAA,MAAM,eAAe,EAAE,GAAG,WAAW,SAAA,EAAW,KAAA,CAAM,OAAO,KAAA,EAAM;AACnE,MAAA,YAAA,CAAa,YAAY,CAAA;AACzB,MAAA,uBAAA,IAAA,IAAA,GAAA,MAAA,GAAA,uBAAA,CAA0B,KAAA,CAAA;AAC1B,MAAA,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAW,KAAA,CAAA;AACX,MAAA,iBAAA,IAAA,IAAA,GAAA,MAAA,GAAA,iBAAA,CAAoB,KAAA,EAAO,YAAA,CAAA;AAAA,IAC7B,CAAA;AAEA,IAAA,MAAM,oBAAA,GAA6D,CACjE,KAAA,KACG;AACH,MAAA,MAAM,eAAe,EAAE,GAAG,WAAW,OAAA,EAAS,KAAA,CAAM,OAAO,KAAA,EAAM;AACjE,MAAA,YAAA,CAAa,YAAY,CAAA;AACzB,MAAA,qBAAA,IAAA,IAAA,GAAA,MAAA,GAAA,qBAAA,CAAwB,KAAA,CAAA;AACxB,MAAA,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAW,KAAA,CAAA;AACX,MAAA,iBAAA,IAAA,IAAA,GAAA,MAAA,GAAA,iBAAA,CAAoB,KAAA,EAAO,YAAA,CAAA;AAAA,IAC7B,CAAA;AAEA,IAAA,MAAM,qBAAA,GAA6D,CACjE,KAAA,KACG;AACH,MAAA,UAAA,CAAW,IAAI,CAAA;AACf,MAAA,sBAAA,IAAA,IAAA,GAAA,MAAA,GAAA,sBAAA,CAAyB,KAAA,CAAA;AAAA,IAC3B,CAAA;AAEA,IAAA,MAAM,mBAAA,GAA2D,CAC/D,KAAA,KACG;AACH,MAAA,UAAA,CAAW,IAAI,CAAA;AACf,MAAA,oBAAA,IAAA,IAAA,GAAA,MAAA,GAAA,oBAAA,CAAuB,KAAA,CAAA;AAAA,IACzB,CAAA;AAEA,IAAA,MAAM,oBAAA,GAA4D,CAChE,KAAA,KACG;AACH,MAAA,UAAA,CAAW,KAAK,CAAA;AAChB,MAAA,KAAA,CAAM,KAAK,CAAA;AACX,MAAA,qBAAA,IAAA,IAAA,GAAA,MAAA,GAAA,qBAAA,CAAwB,KAAA,CAAA;AAAA,IAC1B,CAAA;AAEA,IAAA,MAAM,kBAAA,GAA0D,CAAC,KAAA,KAAU;AACzE,MAAA,UAAA,CAAW,KAAK,CAAA;AAChB,MAAA,KAAA,CAAM,KAAK,CAAA;AACX,MAAA,mBAAA,IAAA,IAAA,GAAA,MAAA,GAAA,mBAAA,CAAsB,KAAA,CAAA;AAAA,IACxB,CAAA;AAEA,IAAA,MAAM,uBAAA,GAAkE,CACtE,KAAA,KACG;AACH,MAAA,IAAI,KAAA,CAAM,QAAQ,OAAA,EAAS;AACzB,QAAA,KAAA,CAAM,KAAK,CAAA;AAAA,MACb;AACA,MAAA,wBAAA,IAAA,IAAA,GAAA,MAAA,GAAA,wBAAA,CAA2B,KAAA,CAAA;AAAA,IAC7B,CAAA;AAEA,IAAA,MAAM,qBAAA,GAAgE,CACpE,KAAA,KACG;AACH,MAAA,IAAI,KAAA,CAAM,QAAQ,OAAA,EAAS;AACzB,QAAA,KAAA,CAAM,KAAK,CAAA;AAAA,MACb;AACA,MAAA,sBAAA,IAAA,IAAA,GAAA,MAAA,GAAA,sBAAA,CAAyB,KAAA,CAAA;AAAA,IAC3B,CAAA;AAEA,IAAA,MAAM,kBAAA,GAAwD,CAAC,KAAA,KAAU;AACvE,MAAA,IAAI,KAAA,CAAM,MAAA,KAAW,UAAA,CAAW,OAAA,EAAS;AACvC,QAAA,MAAM,QAAQ,aAAA,CAAc,OAAA;AAC5B,QAAA,KAAA,IAAA,IAAA,GAAA,MAAA,GAAA,KAAA,CAAO,KAAA,EAAA;AACP,QAAA,KAAA,IAAA,IAAA,GAAA,MAAA,GAAA,KAAA,CAAO,iBAAA,CAAkB,KAAA,CAAM,KAAA,CAAM,MAAA,EAAQ,MAAM,KAAA,CAAM,MAAA,CAAA;AAAA,MAC3D;AACA,MAAA,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAU,KAAA,CAAA;AAAA,IACZ,CAAA;AAEA,IAAA,uBACE,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,IAAA;AAAA,UACT,YAAA,EAAa;AAAA,UACb,aAAa,OAAO,CAAA;AAAA,UACpB;AAAA,YACE,CAAC,YAAA,CAAa,SAAS,CAAC,GAAG,CAAC,UAAA,IAAc,OAAA;AAAA,YAC1C,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,UAAA;AAAA,YAC5B,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,UAAA;AAAA,YAC5B,CAAC,YAAA,CAAa,gBAAA,IAAoB,EAAE,CAAC,GAAG,gBAAA;AAAA,YACxC,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG;AAAA,WAC9B;AAAA,UACA;AAAA,SACF;AAAA,QACA,GAAA,EAAK,gBAAA;AAAA,QACL,OAAA,EAAS,kBAAA;AAAA,QACR,GAAG,IAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,OAAA;AAAA,YAAA;AAAA,cACC,YAAA,EAAa,KAAA;AAAA,cACb,kBAAA,EAAkB,IAAA;AAAA,gBAChB,oBAAA;AAAA,gBACA;AAAA,eACF;AAAA,cACA,iBAAA,EAAiB,IAAA;AAAA,gBACf,mBAAA;AAAA,gBACA,yBAAA;AAAA,gBACA;AAAA,eACF;AAAA,cACA,YAAA,EAAY,IAAA,CAAK,YAAA,EAAc,SAAS,CAAA;AAAA,cACxC,EAAA,EAAI,YAAA;AAAA,cACJ,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,cAC/B,QAAA,EAAU,UAAA;AAAA,cACV,QAAA,EAAU,UAAA;AAAA,cACV,GAAA,EAAK,mBAAA;AAAA,cACL,QAAA,EAAU,aAAa,EAAA,GAAK,CAAA;AAAA,cAC5B,WAAA;AAAA,cACA,KAAA,EACE,UAAA,IAAc,EAAC,SAAA,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAW,SAAA,CAAA,GACtB,mBAAA,GACC,SAAA,CAAU,SAAA,IAAa,WAAA,CAAY,MAAA,CAAO,MAAA,EAAW,MAAM,CAAA;AAAA,cAEjE,GAAG,mBAAA;AAAA,cACJ,MAAA,EAAQ,oBAAA;AAAA,cACR,QAAA,EAAU,sBAAA;AAAA,cACV,SAAA,EAAW,uBAAA;AAAA,cACX,OAAA,EAAS,CAAC,UAAA,GAAa,qBAAA,GAAwB,MAAA;AAAA,cAC/C,QAAA,EAAU;AAAA;AAAA,WACZ;AAAA,8BACC,MAAA,EAAA,EAAK,SAAA,EAAW,YAAA,CAAa,MAAM,GAAG,QAAA,EAAA,GAAA,EAAC,CAAA;AAAA,0BACxC,GAAA;AAAA,YAAC,OAAA;AAAA,YAAA;AAAA,cACC,YAAA,EAAa,KAAA;AAAA,cACb,kBAAA,EAAkB,IAAA;AAAA,gBAChB,oBAAA;AAAA,gBACA;AAAA,eACF;AAAA,cACA,iBAAA,EAAiB,IAAA;AAAA,gBACf,mBAAA;AAAA,gBACA,uBAAA;AAAA,gBACA;AAAA,eACF;AAAA,cACA,YAAA,EAAY,IAAA,CAAK,UAAA,EAAY,SAAS,CAAA;AAAA,cACtC,EAAA,EAAI,UAAA;AAAA,cACJ,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,cAC/B,QAAA,EAAU,UAAA;AAAA,cACV,QAAA,EAAU,UAAA;AAAA,cACV,GAAA,EAAK,iBAAA;AAAA,cACL,QAAA,EAAU,aAAa,EAAA,GAAK,CAAA;AAAA,cAC5B,WAAA;AAAA,cACA,KAAA,EACE,UAAA,IAAc,EAAC,SAAA,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAW,OAAA,CAAA,GACtB,mBAAA,GACC,SAAA,CAAU,OAAA,IAAW,WAAA,CAAY,MAAA,CAAO,MAAA,EAAW,MAAM,CAAA;AAAA,cAE/D,GAAG,iBAAA;AAAA,cACJ,MAAA,EAAQ,kBAAA;AAAA,cACR,QAAA,EAAU,oBAAA;AAAA,cACV,SAAA,EAAW,qBAAA;AAAA,cACX,OAAA,EAAS,CAAC,UAAA,GAAa,mBAAA,GAAsB,MAAA;AAAA,cAC7C,QAAA,EAAU;AAAA;AAAA,WACZ;AAAA,0BACA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,YAAA,CAAa,uBAAuB,CAAA,EACjD,QAAA,EAAA;AAAA,YAAA,CAAC,UAAA,IAAc,gBAAA,oBACd,GAAA,CAAC,eAAA,EAAA,EAAgB,QAAQ,gBAAA,EAAkB,CAAA;AAAA,YAE5C;AAAA,WAAA,EACH,CAAA;AAAA,0BACA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,YAAA,CAAa,qBAAqB,CAAA,EAAG;AAAA;AAAA;AAAA,KACvD;AAAA,EAEJ;AACF;;;;"}
1
+ {"version":3,"file":"DateInputRange.js","sources":["../src/date-input/DateInputRange.tsx"],"sourcesContent":["import {\n type InputProps,\n makePrefixer,\n StatusAdornment,\n useControlled,\n useForkRef,\n useFormFieldProps,\n useId,\n} from \"@salt-ds/core\";\nimport type {\n DateDetail,\n DateFrameworkType,\n ParserResult,\n TimeFields,\n Timezone,\n} from \"@salt-ds/date-adapters\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ChangeEvent,\n type ChangeEventHandler,\n type ComponentPropsWithoutRef,\n type FocusEventHandler,\n forwardRef,\n type InputHTMLAttributes,\n type KeyboardEventHandler,\n type MouseEventHandler,\n type ReactNode,\n type Ref,\n type SyntheticEvent,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport type { DateRangeSelection } from \"../calendar\";\nimport { useLocalization } from \"../localization-provider\";\nimport dateInputCss from \"./DateInput.css\";\n\nconst withBaseName = makePrefixer(\"saltDateInput\");\n\n/**\n * DateInputRange raw value or null if no date is defined.\n */\nexport type DateInputRangeValue = {\n startDate?: string | null;\n endDate?: string | null;\n};\n\n/**\n * Details of parsing the date range\n */\nexport type DateInputRangeDetails = {\n /** Details of parsing the start date and applying any validation */\n startDate?: DateDetail;\n /** Details of parsing the end date and applying any validation */\n endDate?: DateDetail;\n};\n\n/**\n * Enum to identify the field being parsed\n */\nexport enum DateParserField {\n START = \"start\",\n END = \"end\",\n}\n\n/**\n * Props for the DateInputRange component.\n * @template TDate - The type of the date object.\n */\nexport interface DateInputRangeProps<TDate extends DateFrameworkType>\n extends Omit<ComponentPropsWithoutRef<\"div\">, \"defaultValue\" | \"onChange\">,\n Omit<InputProps, \"defaultValue\" | \"inputRef\" | \"value\" | \"onChange\"> {\n /**\n * The aria-label for accessibility.\n */\n ariaLabel?: string;\n /**\n * Styling variant with full border. Defaults to false.\n */\n bordered?: boolean;\n /**\n * The marker to use in an empty read-only DateInput.\n * Use `''` to disable this feature. Defaults to '—'.\n */\n emptyReadOnlyMarker?: string;\n /**\n * End adornment component.\n */\n endAdornment?: ReactNode;\n /**\n * Attributes applied to the start `input` element.\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dateInput#Attributes\n */\n startInputProps?: InputHTMLAttributes<HTMLInputElement>;\n /**\n * Attributes applied to the end `input` element.\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dateInput#Attributes\n */\n endInputProps?: InputHTMLAttributes<HTMLInputElement>;\n /**\n * If `true`, the component is read-only.\n */\n readOnly?: boolean;\n /**\n * Validation status.\n */\n validationStatus?: \"error\" | \"warning\" | \"success\";\n /**\n * Styling variant. Defaults to \"primary\".\n */\n variant?: \"primary\" | \"secondary\" | \"tertiary\";\n /**\n * Format string for date.\n */\n format?: string;\n /**\n * Optional ref for the start input component.\n */\n startInputRef?: Ref<HTMLInputElement>;\n /**\n * Optional ref for the end input component.\n */\n endInputRef?: Ref<HTMLInputElement>;\n /**\n * Parser callback, if not using the adapter's parser\n * @param value - date string to parse\n * @param field: DateParserField to identify value,\n * @param format - format required\n */\n parse?: (\n value: string,\n field: DateParserField,\n format: string,\n ) => ParserResult<TDate>;\n /**\n * Input value. Use when the input value is controlled.\n */\n value?: DateInputRangeValue;\n /**\n * The initial input value. Use when the component is uncontrolled.\n */\n defaultValue?: DateInputRangeValue;\n /**\n * The date value. Use when the component is controlled.\n */\n date?: DateRangeSelection<TDate> | null;\n /**\n * The initial selected date value. Use when the component is uncontrolled.\n */\n defaultDate?: DateRangeSelection<TDate> | null;\n /**\n * Callback fired when the input value changes.\n * @param event - The change event.\n * @param date - The new date input range value.\n */\n onChange?: (event: ChangeEvent<HTMLInputElement>) => void;\n /**\n * Callback fired when the selected date changes.\n * @param event - The synthetic event.\n * @param date - the selected date, invalid date if not a valid date or undefined (uncontrolled) or null (controlled) if not defined\n * @param details - The details of date selection, either a valid date or error\n */\n onDateChange?: (\n event: SyntheticEvent,\n date: DateRangeSelection<TDate> | null,\n details: DateInputRangeDetails,\n ) => void;\n /**\n * Called when input values change, either due to user interaction or programmatic formatting of valid dates.\n * @param event - The synthetic event or null if a programmatic change.\n * @param newValue - The new date input range value.\n */\n onDateValueChange?: (\n event: SyntheticEvent | null,\n newValue: DateInputRangeValue,\n ) => void;\n /**\n * Specifies the timezone behavior:\n * - If undefined, the timezone will be derived from the passed date, or from `defaultSelectedDate`/`selectedDate`.\n * - If set to \"default\", the default timezone of the date library will be used.\n * - If set to \"system\", the local system's timezone will be applied.\n * - If set to \"UTC\", the time will be returned in UTC.\n * - If set to a valid IANA timezone identifier, the time will be returned for that specific timezone.\n */\n timezone?: Timezone;\n}\n\nexport const DateInputRange = forwardRef<\n HTMLDivElement,\n DateInputRangeProps<DateFrameworkType>\n>(\n <TDate extends DateFrameworkType>(\n props: DateInputRangeProps<TDate>,\n ref: React.Ref<HTMLDivElement>,\n ) => {\n const { dateAdapter } = useLocalization<TDate>();\n const {\n bordered = false,\n className,\n disabled,\n \"aria-label\": ariaLabel,\n date: dateProp,\n defaultDate,\n onDateChange,\n value: valueProp,\n format = \"DD MMM YYYY\",\n defaultValue = {\n startDate: \"\",\n endDate: \"\",\n },\n onChange,\n onClick,\n onDateValueChange,\n emptyReadOnlyMarker = \"—\",\n endAdornment,\n startInputProps = {},\n endInputProps = {},\n startInputRef: startInputRefProp,\n endInputRef: endInputRefProp,\n parse: parseProp,\n placeholder = format.toLowerCase(),\n readOnly: readOnlyProp,\n validationStatus: validationStatusProp,\n variant = \"primary\",\n timezone = dateProp?.startDate || defaultDate?.startDate\n ? dateAdapter.getTimezone(\n (dateProp?.startDate ?? defaultDate?.startDate) as TDate,\n )\n : \"default\",\n ...rest\n } = props;\n const wrapperRef = useRef(null);\n const handleWrapperRef = useForkRef<HTMLDivElement>(ref, wrapperRef);\n\n const startInputRef = useRef<HTMLInputElement>(null);\n const handleStartInputRef = useForkRef(startInputRef, startInputRefProp);\n const endInputRef = useRef<HTMLInputElement>(null);\n const handleEndInputRef = useForkRef(endInputRef, endInputRefProp);\n\n const startInputID = useId();\n const endInputID = useId();\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-date-input-range\",\n css: dateInputCss,\n window: targetWindow,\n });\n\n const parseDateValue = (\n dateValue: string | null | undefined,\n field: DateParserField,\n ): ParserResult<TDate> | undefined =>\n parseProp\n ? parseProp(dateValue ?? \"\", field, format)\n : dateAdapter.parse.bind(dateAdapter)(dateValue ?? \"\", format);\n\n const [dateValue, setDateValue] = useControlled({\n controlled: valueProp,\n default: defaultValue,\n name: \"DateInputRange\",\n state: \"dateValue\",\n });\n\n const [date, setDate] = useControlled({\n controlled: dateProp,\n // biome-ignore lint/correctness/useExhaustiveDependencies: just on mount\n default: useMemo(() => {\n if (defaultDate) {\n return defaultDate;\n }\n if (!defaultValue) {\n return undefined;\n }\n const { date: startDate = undefined } =\n parseDateValue(defaultValue?.startDate, DateParserField.START) ?? {};\n const { date: endDate = undefined } =\n parseDateValue(defaultValue?.endDate, DateParserField.END) ?? {};\n return {\n startDate,\n endDate,\n };\n }, []),\n name: \"DateInputRange\",\n state: \"date\",\n });\n\n const lastAppliedValue = useRef<DateInputRangeValue>(dateValue);\n const preservedTime = useRef<{\n startTime: TimeFields | null;\n endTime: TimeFields | null;\n }>({ startTime: null, endTime: null });\n preservedTime.current = {\n startTime:\n date?.startDate && dateAdapter.isValid(date?.startDate)\n ? dateAdapter.getTime(date.startDate)\n : null,\n endTime:\n date?.endDate && dateAdapter.isValid(date?.endDate)\n ? dateAdapter.getTime(date.endDate)\n : null,\n };\n const setDateValueFromDate = (newDate: typeof date) => {\n let newDateValue = { startDate: \"\", endDate: \"\" };\n if (!newDate?.startDate) {\n newDateValue = { ...newDateValue, startDate: \"\" };\n } else if (!dateAdapter.isValid(newDate?.startDate)) {\n newDateValue = {\n ...newDateValue,\n startDate: dateValue?.startDate ?? \"\",\n };\n } else if (newDate?.startDate) {\n const formattedStartDateValue = dateAdapter.format(\n newDate.startDate,\n format,\n );\n newDateValue = { ...newDateValue, startDate: formattedStartDateValue };\n }\n if (!newDate?.endDate) {\n newDateValue = { ...newDateValue, endDate: \"\" };\n } else if (!dateAdapter.isValid(newDate?.endDate)) {\n newDateValue = { ...newDateValue, endDate: dateValue?.endDate ?? \"\" };\n } else if (newDate?.endDate && dateAdapter.isValid(newDate.endDate)) {\n const formattedEndDateValue = dateAdapter.format(\n newDate.endDate,\n format,\n );\n newDateValue = { ...newDateValue, endDate: formattedEndDateValue };\n }\n\n if (\n (!newDateValue?.startDate && !!dateValue?.startDate) ||\n (!newDateValue.endDate && !!dateValue?.endDate) ||\n newDateValue?.startDate !== dateValue?.startDate ||\n newDateValue?.endDate !== dateValue?.endDate\n ) {\n onDateValueChange?.(null, newDateValue);\n setDateValue(newDateValue);\n }\n return newDateValue;\n };\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: Update date string value ONLY when selected date changes, not when date string itself change\n useEffect(() => {\n lastAppliedValue.current = setDateValueFromDate(date);\n }, [date, date?.startDate, date?.endDate, dateAdapter.format, format]);\n\n const [focused, setFocused] = useState(false);\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 isReadOnly = readOnlyProp || formFieldReadOnly;\n const isDisabled = disabled || formFieldDisabled;\n\n const validationStatus = formFieldValidationStatus ?? validationStatusProp;\n\n const {\n \"aria-describedby\": startInputPropsDescribedBy,\n \"aria-labelledby\": startInputPropsLabelledBy,\n onBlur: startInputPropsOnBlur,\n onChange: startInputPropsOnChange,\n onKeyDown: startInputPropsOnKeyDown,\n onFocus: startInputPropsOnFocus,\n required: startInputPropsRequired,\n ...restStartInputProps\n } = startInputProps;\n\n const startInputIsRequired = formFieldRequired\n ? [\"required\", \"asterisk\"].includes(formFieldRequired)\n : startInputPropsRequired;\n\n const {\n \"aria-describedby\": endInputPropsDescribedBy,\n \"aria-labelledby\": endInputPropsLabelledBy,\n onBlur: endInputPropsOnBlur,\n onChange: endInputPropsOnChange,\n onKeyDown: endInputPropsOnKeyDown,\n onFocus: endInputPropsOnFocus,\n required: endInputPropsRequired,\n ...restEndInputProps\n } = endInputProps;\n\n const endInputIsRequired = formFieldRequired\n ? [\"required\", \"asterisk\"].includes(formFieldRequired)\n : endInputPropsRequired;\n\n const apply = (event: SyntheticEvent) => {\n const { date: startDate = undefined, ...startDateParseDetails } =\n parseDateValue(dateValue?.startDate, DateParserField.START) ?? {};\n const { date: endDate = undefined, ...endDateParseDetails } =\n parseDateValue(dateValue?.endDate, DateParserField.END) ?? {};\n\n const updatedDateRange: DateRangeSelection<TDate> = {\n startDate: dateValue?.startDate?.length ? startDate : null,\n endDate: dateValue?.endDate?.length ? endDate : null,\n };\n if (dateAdapter.isValid(startDate)) {\n updatedDateRange.startDate = dateAdapter.setTimezone(\n startDate,\n timezone,\n );\n if (preservedTime.current.startTime) {\n updatedDateRange.startDate = dateAdapter.set(\n updatedDateRange.startDate,\n preservedTime.current.startTime,\n );\n }\n }\n if (dateAdapter.isValid(endDate)) {\n updatedDateRange.endDate = dateAdapter.setTimezone(endDate, timezone);\n if (preservedTime.current.endTime) {\n updatedDateRange.endDate = dateAdapter.set(\n updatedDateRange.endDate,\n preservedTime.current.endTime,\n );\n }\n }\n const updatedDateValue = setDateValueFromDate(updatedDateRange);\n\n setDate(updatedDateRange);\n\n if (\n lastAppliedValue.current.startDate !== updatedDateValue.startDate ||\n lastAppliedValue.current.endDate !== updatedDateValue.endDate\n ) {\n onDateChange?.(event, updatedDateRange, {\n startDate: startDateParseDetails,\n endDate: endDateParseDetails,\n });\n onDateValueChange?.(event, updatedDateValue);\n lastAppliedValue.current = updatedDateValue;\n }\n };\n\n const handleStartInputChange: ChangeEventHandler<HTMLInputElement> = (\n event,\n ) => {\n const newDateValue = { ...dateValue, startDate: event.target.value };\n setDateValue(newDateValue);\n startInputPropsOnChange?.(event);\n onChange?.(event);\n onDateValueChange?.(event, newDateValue);\n };\n\n const handleEndInputChange: ChangeEventHandler<HTMLInputElement> = (\n event,\n ) => {\n const newDateValue = { ...dateValue, endDate: event.target.value };\n setDateValue(newDateValue);\n endInputPropsOnChange?.(event);\n onChange?.(event);\n onDateValueChange?.(event, newDateValue);\n };\n\n const handleStartInputFocus: FocusEventHandler<HTMLInputElement> = (\n event,\n ) => {\n setFocused(true);\n startInputPropsOnFocus?.(event);\n };\n\n const handleEndInputFocus: FocusEventHandler<HTMLInputElement> = (\n event,\n ) => {\n setFocused(true);\n endInputPropsOnFocus?.(event);\n };\n\n const handleStartInputBlur: FocusEventHandler<HTMLInputElement> = (\n event,\n ) => {\n setFocused(false);\n apply(event);\n startInputPropsOnBlur?.(event);\n };\n\n const handleEndInputBlur: FocusEventHandler<HTMLInputElement> = (event) => {\n setFocused(false);\n apply(event);\n endInputPropsOnBlur?.(event);\n };\n\n const handleStartInputKeyDown: KeyboardEventHandler<HTMLInputElement> = (\n event,\n ) => {\n if (event.key === \"Enter\") {\n apply(event);\n }\n startInputPropsOnKeyDown?.(event);\n };\n\n const handleEndInputKeyDown: KeyboardEventHandler<HTMLInputElement> = (\n event,\n ) => {\n if (event.key === \"Enter\") {\n apply(event);\n }\n endInputPropsOnKeyDown?.(event);\n };\n\n const handleWrapperClick: MouseEventHandler<HTMLDivElement> = (event) => {\n if (event.target === wrapperRef.current) {\n const input = startInputRef.current;\n input?.focus();\n input?.setSelectionRange(input.value.length, input.value.length);\n }\n onClick?.(event);\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(validationStatus ?? \"\")]: validationStatus,\n [withBaseName(\"bordered\")]: bordered,\n },\n className,\n )}\n ref={handleWrapperRef}\n onClick={handleWrapperClick}\n {...rest}\n >\n <input\n autoComplete=\"off\"\n aria-describedby={\n clsx(formFieldDescribedBy, startInputPropsDescribedBy) || undefined\n }\n aria-labelledby={clsx(\n formFieldLabelledBy,\n startInputPropsLabelledBy,\n startInputID,\n )}\n aria-label={clsx(\"Start date\", ariaLabel)}\n id={startInputID}\n className={withBaseName(\"input\")}\n disabled={isDisabled}\n readOnly={isReadOnly}\n ref={handleStartInputRef}\n tabIndex={isDisabled ? -1 : 0}\n placeholder={placeholder}\n value={\n isReadOnly && !dateValue?.startDate\n ? emptyReadOnlyMarker\n : (dateValue.startDate ?? dateAdapter.format(undefined, format))\n }\n {...restStartInputProps}\n onBlur={handleStartInputBlur}\n onChange={handleStartInputChange}\n onKeyDown={handleStartInputKeyDown}\n onFocus={!isDisabled ? handleStartInputFocus : undefined}\n required={startInputIsRequired}\n />\n <span className={withBaseName(\"dash\")}>-</span>\n <input\n autoComplete=\"off\"\n aria-describedby={\n clsx(formFieldDescribedBy, endInputPropsDescribedBy) || undefined\n }\n aria-labelledby={clsx(\n formFieldLabelledBy,\n endInputPropsLabelledBy,\n endInputID,\n )}\n aria-label={clsx(\"End date\", ariaLabel)}\n id={endInputID}\n className={withBaseName(\"input\")}\n disabled={isDisabled}\n readOnly={isReadOnly}\n ref={handleEndInputRef}\n tabIndex={isDisabled ? -1 : 0}\n placeholder={placeholder}\n value={\n isReadOnly && !dateValue?.endDate\n ? emptyReadOnlyMarker\n : (dateValue.endDate ?? dateAdapter.format(undefined, format))\n }\n {...restEndInputProps}\n onBlur={handleEndInputBlur}\n onChange={handleEndInputChange}\n onKeyDown={handleEndInputKeyDown}\n onFocus={!isDisabled ? handleEndInputFocus : undefined}\n required={endInputIsRequired}\n />\n <div className={withBaseName(\"endAdornmentContainer\")}>\n {!isDisabled && validationStatus && (\n <StatusAdornment status={validationStatus} />\n )}\n {endAdornment}\n </div>\n <div className={withBaseName(\"activationIndicator\")} />\n </div>\n );\n },\n);\n"],"names":["DateParserField","dateInputCss","dateValue"],"mappings":"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"}
@@ -194,7 +194,7 @@ const DateInputSingle = forwardRef(
194
194
  "input",
195
195
  {
196
196
  autoComplete: "off",
197
- "aria-describedby": clsx(formFieldDescribedBy, dateInputDescribedBy),
197
+ "aria-describedby": clsx(formFieldDescribedBy, dateInputDescribedBy) || void 0,
198
198
  "aria-labelledby": clsx(
199
199
  formFieldLabelledBy,
200
200
  dateInputLabelledBy,
@@ -1 +1 @@
1
- {"version":3,"file":"DateInputSingle.js","sources":["../src/date-input/DateInputSingle.tsx"],"sourcesContent":["import {\n makePrefixer,\n StatusAdornment,\n useControlled,\n useForkRef,\n useFormFieldProps,\n useId,\n} from \"@salt-ds/core\";\nimport type {\n DateDetail,\n DateFrameworkType,\n ParserResult,\n TimeFields,\n Timezone,\n} from \"@salt-ds/date-adapters\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ChangeEventHandler,\n type ComponentPropsWithoutRef,\n type FocusEventHandler,\n forwardRef,\n type InputHTMLAttributes,\n type KeyboardEventHandler,\n type MouseEventHandler,\n type ReactNode,\n type Ref,\n type SyntheticEvent,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport type { SingleDateSelection } from \"../calendar\";\nimport { useLocalization } from \"../localization-provider\";\nimport dateInputCss from \"./DateInput.css\";\n\nconst withBaseName = makePrefixer(\"saltDateInput\");\n\n/**\n * Details of parsing the date\n */\nexport type DateInputSingleDetails = DateDetail;\n\n/**\n * Props for the DateInputSingle component.\n * @template TDate - The type of the date object.\n */\nexport interface DateInputSingleProps<TDate extends DateFrameworkType>\n extends Omit<ComponentPropsWithoutRef<\"div\">, \"defaultValue\">,\n Pick<\n ComponentPropsWithoutRef<\"input\">,\n \"disabled\" | \"value\" | \"defaultValue\" | \"placeholder\"\n > {\n /**\n * The aria-label for accessibility.\n */\n ariaLabel?: string;\n /**\n * Styling variant with full border. Defaults to false.\n */\n bordered?: boolean;\n /**\n * The marker to use in an empty read-only DateInput.\n * Use `''` to disable this feature. Defaults to '—'.\n */\n emptyReadOnlyMarker?: string;\n /**\n * End adornment component.\n */\n endAdornment?: ReactNode;\n /**\n * Attributes applied to the `input` element.\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dateInput#Attributes\n */\n inputProps?: InputHTMLAttributes<HTMLInputElement>;\n /**\n * If `true`, the component is read-only.\n */\n readOnly?: boolean;\n /**\n * Start adornment component\n */\n startAdornment?: ReactNode;\n /**\n * Validation status.\n */\n validationStatus?: \"error\" | \"warning\" | \"success\";\n /**\n * Styling variant. Defaults to \"primary\".\n */\n variant?: \"primary\" | \"secondary\";\n /**\n * Format string for date.\n */\n format?: string;\n /**\n * Reference for the input.\n */\n inputRef?: Ref<HTMLInputElement>;\n /**\n * Parser callback, if not using the adapter's parser\n * @param value - date string to parse\n * @param format - format required\n */\n parse?: (value: string, format: string) => ParserResult<TDate>;\n /**\n * Input value. Use when the input value is controlled.\n */\n value?: string;\n /**\n * The initial input value. Use when the component is uncontrolled.\n */\n defaultValue?: string;\n /**\n * The date value. Use when the component is controlled.\n */\n date?: TDate | null;\n /**\n * The initial selected date value. Use when the component is uncontrolled.\n */\n defaultDate?: TDate | null;\n /**\n * Callback fired when the selected date changes.\n * @param event - The synthetic event.\n * @param date - the selected date, invalid date if not a valid date or undefined (uncontrolled) or null (controlled) if not defined\n * @param details - The details of date selection, either a valid date or error\n */\n onDateChange?: (\n event: SyntheticEvent,\n date: SingleDateSelection<TDate> | null | undefined,\n details: DateInputSingleDetails,\n ) => void;\n /**\n * Called when input value changes, either due to user interaction or programmatic formatting of valid dates.\n * @param event - The synthetic event or null if a programmatic change.\n * @param newValue - The new date input value.\n */\n onDateValueChange?: (event: SyntheticEvent | null, newValue: string) => void;\n /**\n * Specifies the timezone behavior:\n * - If undefined, the timezone will be derived from the passed date, or from `defaultSelectedDate`/`selectedDate`.\n * - If set to \"default\", the default timezone of the date library will be used.\n * - If set to \"system\", the local system's timezone will be applied.\n * - If set to \"UTC\", the time will be returned in UTC.\n * - If set to a valid IANA timezone identifier, the time will be returned for that specific timezone.\n */\n timezone?: Timezone;\n}\n\nexport const DateInputSingle = forwardRef<\n HTMLDivElement,\n DateInputSingleProps<DateFrameworkType>\n>(\n <TDate extends DateFrameworkType>(\n props: DateInputSingleProps<TDate>,\n ref: React.Ref<HTMLDivElement>,\n ) => {\n const { dateAdapter } = useLocalization<TDate>();\n const {\n bordered = false,\n className,\n disabled,\n \"aria-label\": ariaLabel,\n date: dateProp,\n defaultDate,\n onDateChange,\n value: valueProp,\n format = \"DD MMM YYYY\",\n defaultValue = \"\",\n onChange,\n onClick,\n emptyReadOnlyMarker = \"—\",\n endAdornment,\n inputProps = {},\n inputRef: inputRefProp = null,\n parse: parseProp,\n placeholder = format.toLowerCase(),\n readOnly: readOnlyProp,\n startAdornment,\n validationStatus: validationStatusProp,\n variant = \"primary\",\n onDateValueChange,\n timezone = dateProp || defaultDate\n ? dateAdapter.getTimezone((dateProp ?? defaultDate) as TDate)\n : \"default\",\n ...rest\n } = props;\n const wrapperRef = useRef(null);\n const handleWrapperRef = useForkRef<HTMLDivElement>(ref, wrapperRef);\n const innerInputRef = useRef<HTMLInputElement>(null);\n const handleInputRef = useForkRef<HTMLInputElement>(\n innerInputRef,\n inputRefProp,\n );\n\n const inputId = useId();\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-date-input-single\",\n css: dateInputCss,\n window: targetWindow,\n });\n\n const [date, setDate] = useControlled({\n controlled: dateProp,\n // biome-ignore lint/correctness/useExhaustiveDependencies: just on mount\n default: useMemo(() => {\n if (defaultDate) {\n return defaultDate;\n }\n if (!defaultValue) {\n return undefined;\n }\n return dateAdapter.parse(defaultValue, format) as TDate;\n }, []),\n name: \"DateInputSingle\",\n state: \"date\",\n });\n const [dateValue, setDateValue] = useControlled({\n controlled: valueProp,\n default: defaultValue,\n name: \"DateInputSingle\",\n state: \"dateValue\",\n });\n const lastAppliedValue = useRef<string>(dateValue);\n const preservedTime = useRef<TimeFields | null>(null);\n preservedTime.current = dateAdapter.isValid(date)\n ? dateAdapter.getTime(date)\n : null;\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: Update date string value ONLY when selected date changes, not when date string itself change\n useEffect(() => {\n const formattedValue = dateAdapter.format(date, format);\n const hasValueChanged = formattedValue !== dateValue;\n if (\n // should not reset \"error\" input values\n (date === null || dateAdapter.isValid(date)) &&\n hasValueChanged\n ) {\n setDateValue(formattedValue);\n onDateValueChange?.(null, formattedValue);\n lastAppliedValue.current = formattedValue;\n }\n }, [date, dateAdapter.format, format]);\n\n const [focused, setFocused] = useState(false);\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 isReadOnly = readOnlyProp || formFieldReadOnly;\n const isDisabled = disabled || formFieldDisabled;\n\n const validationStatus = formFieldValidationStatus ?? validationStatusProp;\n\n const {\n \"aria-describedby\": dateInputDescribedBy,\n \"aria-labelledby\": dateInputLabelledBy,\n onBlur: inputPropsOnBlur,\n onChange: inputPropsOnChange,\n onKeyDown: inputPropsOnKeyDown,\n onFocus: inputPropsOnFocus,\n required: dateInputPropsRequired,\n ...restDateInputProps\n } = inputProps;\n\n const isRequired = formFieldRequired\n ? [\"required\", \"asterisk\"].includes(formFieldRequired)\n : dateInputPropsRequired;\n\n const apply = (event: SyntheticEvent) => {\n const parse = parseProp ?? dateAdapter.parse.bind(dateAdapter);\n const parseResult = parse(dateValue ?? \"\", format);\n let parsedDate: TDate | null;\n let parseDetails: DateDetail;\n ({ date: parsedDate, ...parseDetails } = parseResult);\n parsedDate = dateValue ? parsedDate : null;\n let formattedValue = \"\";\n const isDateValid = dateAdapter.isValid(parsedDate);\n if (isDateValid && parsedDate) {\n parsedDate = dateAdapter.setTimezone(parsedDate, timezone);\n if (preservedTime.current) {\n parsedDate = dateAdapter.set(parsedDate, preservedTime.current);\n }\n formattedValue = dateAdapter.format(parsedDate, format);\n }\n const hasValueChanged = formattedValue !== dateValue;\n const newValue = isDateValid ? formattedValue : dateValue;\n if (hasValueChanged) {\n setDateValue(newValue);\n onDateValueChange?.(event, newValue);\n }\n\n setDate(parsedDate);\n\n if (lastAppliedValue.current !== newValue) {\n onDateChange?.(event, parsedDate, parseDetails);\n }\n lastAppliedValue.current = newValue;\n };\n\n const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n const newDateValue = event.target.value;\n setDateValue(newDateValue);\n inputPropsOnChange?.(event);\n onChange?.(event);\n onDateValueChange?.(event, newDateValue);\n };\n\n const handleFocus: FocusEventHandler<HTMLInputElement> = (event) => {\n setFocused(true);\n inputPropsOnFocus?.(event);\n };\n const handleBlur: FocusEventHandler<HTMLInputElement> = (event) => {\n setFocused(false);\n apply(event);\n inputPropsOnBlur?.(event);\n };\n\n const handleKeyDown: KeyboardEventHandler<HTMLInputElement> = (event) => {\n if (event.key === \"Enter\") {\n apply(event);\n }\n inputPropsOnKeyDown?.(event);\n };\n\n const handleClick: MouseEventHandler<HTMLDivElement> = (event) => {\n if (event.target === wrapperRef.current) {\n innerInputRef?.current?.focus();\n }\n onClick?.(event);\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(validationStatus ?? \"\")]: validationStatus,\n [withBaseName(\"bordered\")]: bordered,\n },\n className,\n )}\n ref={handleWrapperRef}\n onClick={handleClick}\n {...rest}\n >\n {startAdornment && (\n <div className={withBaseName(\"startAdornmentContainer\")}>\n {startAdornment}\n </div>\n )}\n <input\n autoComplete=\"off\"\n aria-describedby={clsx(formFieldDescribedBy, dateInputDescribedBy)}\n aria-labelledby={clsx(\n formFieldLabelledBy,\n dateInputLabelledBy,\n inputId,\n )}\n aria-label={clsx(\"Selected date\", ariaLabel)}\n id={inputId}\n className={withBaseName(\"input\")}\n disabled={isDisabled}\n readOnly={isReadOnly}\n ref={handleInputRef}\n tabIndex={isDisabled ? -1 : 0}\n placeholder={placeholder}\n value={isReadOnly && !dateValue ? emptyReadOnlyMarker : dateValue}\n {...restDateInputProps}\n onBlur={handleBlur}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n onFocus={!isDisabled ? handleFocus : undefined}\n required={isRequired}\n />\n <div className={withBaseName(\"endAdornmentContainer\")}>\n {!isDisabled && validationStatus && (\n <StatusAdornment status={validationStatus} />\n )}\n {endAdornment}\n </div>\n <div className={withBaseName(\"activationIndicator\")} />\n </div>\n );\n },\n);\n"],"names":["dateInputCss"],"mappings":"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"}
1
+ {"version":3,"file":"DateInputSingle.js","sources":["../src/date-input/DateInputSingle.tsx"],"sourcesContent":["import {\n makePrefixer,\n StatusAdornment,\n useControlled,\n useForkRef,\n useFormFieldProps,\n useId,\n} from \"@salt-ds/core\";\nimport type {\n DateDetail,\n DateFrameworkType,\n ParserResult,\n TimeFields,\n Timezone,\n} from \"@salt-ds/date-adapters\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ChangeEventHandler,\n type ComponentPropsWithoutRef,\n type FocusEventHandler,\n forwardRef,\n type InputHTMLAttributes,\n type KeyboardEventHandler,\n type MouseEventHandler,\n type ReactNode,\n type Ref,\n type SyntheticEvent,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport type { SingleDateSelection } from \"../calendar\";\nimport { useLocalization } from \"../localization-provider\";\nimport dateInputCss from \"./DateInput.css\";\n\nconst withBaseName = makePrefixer(\"saltDateInput\");\n\n/**\n * Details of parsing the date\n */\nexport type DateInputSingleDetails = DateDetail;\n\n/**\n * Props for the DateInputSingle component.\n * @template TDate - The type of the date object.\n */\nexport interface DateInputSingleProps<TDate extends DateFrameworkType>\n extends Omit<ComponentPropsWithoutRef<\"div\">, \"defaultValue\">,\n Pick<\n ComponentPropsWithoutRef<\"input\">,\n \"disabled\" | \"value\" | \"defaultValue\" | \"placeholder\"\n > {\n /**\n * The aria-label for accessibility.\n */\n ariaLabel?: string;\n /**\n * Styling variant with full border. Defaults to false.\n */\n bordered?: boolean;\n /**\n * The marker to use in an empty read-only DateInput.\n * Use `''` to disable this feature. Defaults to '—'.\n */\n emptyReadOnlyMarker?: string;\n /**\n * End adornment component.\n */\n endAdornment?: ReactNode;\n /**\n * Attributes applied to the `input` element.\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dateInput#Attributes\n */\n inputProps?: InputHTMLAttributes<HTMLInputElement>;\n /**\n * If `true`, the component is read-only.\n */\n readOnly?: boolean;\n /**\n * Start adornment component\n */\n startAdornment?: ReactNode;\n /**\n * Validation status.\n */\n validationStatus?: \"error\" | \"warning\" | \"success\";\n /**\n * Styling variant. Defaults to \"primary\".\n */\n variant?: \"primary\" | \"secondary\" | \"tertiary\";\n /**\n * Format string for date.\n */\n format?: string;\n /**\n * Reference for the input.\n */\n inputRef?: Ref<HTMLInputElement>;\n /**\n * Parser callback, if not using the adapter's parser\n * @param value - date string to parse\n * @param format - format required\n */\n parse?: (value: string, format: string) => ParserResult<TDate>;\n /**\n * Input value. Use when the input value is controlled.\n */\n value?: string;\n /**\n * The initial input value. Use when the component is uncontrolled.\n */\n defaultValue?: string;\n /**\n * The date value. Use when the component is controlled.\n */\n date?: TDate | null;\n /**\n * The initial selected date value. Use when the component is uncontrolled.\n */\n defaultDate?: TDate | null;\n /**\n * Callback fired when the selected date changes.\n * @param event - The synthetic event.\n * @param date - the selected date, invalid date if not a valid date or undefined (uncontrolled) or null (controlled) if not defined\n * @param details - The details of date selection, either a valid date or error\n */\n onDateChange?: (\n event: SyntheticEvent,\n date: SingleDateSelection<TDate> | null | undefined,\n details: DateInputSingleDetails,\n ) => void;\n /**\n * Called when input value changes, either due to user interaction or programmatic formatting of valid dates.\n * @param event - The synthetic event or null if a programmatic change.\n * @param newValue - The new date input value.\n */\n onDateValueChange?: (event: SyntheticEvent | null, newValue: string) => void;\n /**\n * Specifies the timezone behavior:\n * - If undefined, the timezone will be derived from the passed date, or from `defaultSelectedDate`/`selectedDate`.\n * - If set to \"default\", the default timezone of the date library will be used.\n * - If set to \"system\", the local system's timezone will be applied.\n * - If set to \"UTC\", the time will be returned in UTC.\n * - If set to a valid IANA timezone identifier, the time will be returned for that specific timezone.\n */\n timezone?: Timezone;\n}\n\nexport const DateInputSingle = forwardRef<\n HTMLDivElement,\n DateInputSingleProps<DateFrameworkType>\n>(\n <TDate extends DateFrameworkType>(\n props: DateInputSingleProps<TDate>,\n ref: React.Ref<HTMLDivElement>,\n ) => {\n const { dateAdapter } = useLocalization<TDate>();\n const {\n bordered = false,\n className,\n disabled,\n \"aria-label\": ariaLabel,\n date: dateProp,\n defaultDate,\n onDateChange,\n value: valueProp,\n format = \"DD MMM YYYY\",\n defaultValue = \"\",\n onChange,\n onClick,\n emptyReadOnlyMarker = \"—\",\n endAdornment,\n inputProps = {},\n inputRef: inputRefProp = null,\n parse: parseProp,\n placeholder = format.toLowerCase(),\n readOnly: readOnlyProp,\n startAdornment,\n validationStatus: validationStatusProp,\n variant = \"primary\",\n onDateValueChange,\n timezone = dateProp || defaultDate\n ? dateAdapter.getTimezone((dateProp ?? defaultDate) as TDate)\n : \"default\",\n ...rest\n } = props;\n const wrapperRef = useRef(null);\n const handleWrapperRef = useForkRef<HTMLDivElement>(ref, wrapperRef);\n const innerInputRef = useRef<HTMLInputElement>(null);\n const handleInputRef = useForkRef<HTMLInputElement>(\n innerInputRef,\n inputRefProp,\n );\n\n const inputId = useId();\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-date-input-single\",\n css: dateInputCss,\n window: targetWindow,\n });\n\n const [date, setDate] = useControlled({\n controlled: dateProp,\n // biome-ignore lint/correctness/useExhaustiveDependencies: just on mount\n default: useMemo(() => {\n if (defaultDate) {\n return defaultDate;\n }\n if (!defaultValue) {\n return undefined;\n }\n return dateAdapter.parse(defaultValue, format) as TDate;\n }, []),\n name: \"DateInputSingle\",\n state: \"date\",\n });\n const [dateValue, setDateValue] = useControlled({\n controlled: valueProp,\n default: defaultValue,\n name: \"DateInputSingle\",\n state: \"dateValue\",\n });\n const lastAppliedValue = useRef<string>(dateValue);\n const preservedTime = useRef<TimeFields | null>(null);\n preservedTime.current = dateAdapter.isValid(date)\n ? dateAdapter.getTime(date)\n : null;\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: Update date string value ONLY when selected date changes, not when date string itself change\n useEffect(() => {\n const formattedValue = dateAdapter.format(date, format);\n const hasValueChanged = formattedValue !== dateValue;\n if (\n // should not reset \"error\" input values\n (date === null || dateAdapter.isValid(date)) &&\n hasValueChanged\n ) {\n setDateValue(formattedValue);\n onDateValueChange?.(null, formattedValue);\n lastAppliedValue.current = formattedValue;\n }\n }, [date, dateAdapter.format, format]);\n\n const [focused, setFocused] = useState(false);\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 isReadOnly = readOnlyProp || formFieldReadOnly;\n const isDisabled = disabled || formFieldDisabled;\n\n const validationStatus = formFieldValidationStatus ?? validationStatusProp;\n\n const {\n \"aria-describedby\": dateInputDescribedBy,\n \"aria-labelledby\": dateInputLabelledBy,\n onBlur: inputPropsOnBlur,\n onChange: inputPropsOnChange,\n onKeyDown: inputPropsOnKeyDown,\n onFocus: inputPropsOnFocus,\n required: dateInputPropsRequired,\n ...restDateInputProps\n } = inputProps;\n\n const isRequired = formFieldRequired\n ? [\"required\", \"asterisk\"].includes(formFieldRequired)\n : dateInputPropsRequired;\n\n const apply = (event: SyntheticEvent) => {\n const parse = parseProp ?? dateAdapter.parse.bind(dateAdapter);\n const parseResult = parse(dateValue ?? \"\", format);\n let parsedDate: TDate | null;\n let parseDetails: DateDetail;\n ({ date: parsedDate, ...parseDetails } = parseResult);\n parsedDate = dateValue ? parsedDate : null;\n let formattedValue = \"\";\n const isDateValid = dateAdapter.isValid(parsedDate);\n if (isDateValid && parsedDate) {\n parsedDate = dateAdapter.setTimezone(parsedDate, timezone);\n if (preservedTime.current) {\n parsedDate = dateAdapter.set(parsedDate, preservedTime.current);\n }\n formattedValue = dateAdapter.format(parsedDate, format);\n }\n const hasValueChanged = formattedValue !== dateValue;\n const newValue = isDateValid ? formattedValue : dateValue;\n if (hasValueChanged) {\n setDateValue(newValue);\n onDateValueChange?.(event, newValue);\n }\n\n setDate(parsedDate);\n\n if (lastAppliedValue.current !== newValue) {\n onDateChange?.(event, parsedDate, parseDetails);\n }\n lastAppliedValue.current = newValue;\n };\n\n const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n const newDateValue = event.target.value;\n setDateValue(newDateValue);\n inputPropsOnChange?.(event);\n onChange?.(event);\n onDateValueChange?.(event, newDateValue);\n };\n\n const handleFocus: FocusEventHandler<HTMLInputElement> = (event) => {\n setFocused(true);\n inputPropsOnFocus?.(event);\n };\n const handleBlur: FocusEventHandler<HTMLInputElement> = (event) => {\n setFocused(false);\n apply(event);\n inputPropsOnBlur?.(event);\n };\n\n const handleKeyDown: KeyboardEventHandler<HTMLInputElement> = (event) => {\n if (event.key === \"Enter\") {\n apply(event);\n }\n inputPropsOnKeyDown?.(event);\n };\n\n const handleClick: MouseEventHandler<HTMLDivElement> = (event) => {\n if (event.target === wrapperRef.current) {\n innerInputRef?.current?.focus();\n }\n onClick?.(event);\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(validationStatus ?? \"\")]: validationStatus,\n [withBaseName(\"bordered\")]: bordered,\n },\n className,\n )}\n ref={handleWrapperRef}\n onClick={handleClick}\n {...rest}\n >\n {startAdornment && (\n <div className={withBaseName(\"startAdornmentContainer\")}>\n {startAdornment}\n </div>\n )}\n <input\n autoComplete=\"off\"\n aria-describedby={\n clsx(formFieldDescribedBy, dateInputDescribedBy) || undefined\n }\n aria-labelledby={clsx(\n formFieldLabelledBy,\n dateInputLabelledBy,\n inputId,\n )}\n aria-label={clsx(\"Selected date\", ariaLabel)}\n id={inputId}\n className={withBaseName(\"input\")}\n disabled={isDisabled}\n readOnly={isReadOnly}\n ref={handleInputRef}\n tabIndex={isDisabled ? -1 : 0}\n placeholder={placeholder}\n value={isReadOnly && !dateValue ? emptyReadOnlyMarker : dateValue}\n {...restDateInputProps}\n onBlur={handleBlur}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n onFocus={!isDisabled ? handleFocus : undefined}\n required={isRequired}\n />\n <div className={withBaseName(\"endAdornmentContainer\")}>\n {!isDisabled && validationStatus && (\n <StatusAdornment status={validationStatus} />\n )}\n {endAdornment}\n </div>\n <div className={withBaseName(\"activationIndicator\")} />\n </div>\n );\n },\n);\n"],"names":["dateInputCss"],"mappings":"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"}
@@ -1,5 +1,5 @@
1
1
  import { jsxs, jsx } from 'react/jsx-runtime';
2
- import { flip, shift, size, limitShift } from '@floating-ui/react';
2
+ import { flip, shift, limitShift, size } from '@floating-ui/react';
3
3
  import { makePrefixer, useIdMemo, useFloatingUI, useForkRef } from '@salt-ds/core';
4
4
  import { useComponentCssInjection } from '@salt-ds/styles';
5
5
  import { useWindow } from '@salt-ds/window';
package/dist-es/index.js CHANGED
@@ -64,7 +64,6 @@ export { FormGroup } from './form-group/FormGroup.js';
64
64
  export { FormattedInput } from './formatted-input/FormattedInput.js';
65
65
  export { InputLegacy as Input } from './input-legacy/InputLegacy.js';
66
66
  export { StaticInputAdornment } from './input-legacy/StaticInputAdornment.js';
67
- export { Kbd } from './kbd/Kbd.js';
68
67
  export { LAYER_POSITIONS, LayerLayout } from './layer-layout/LayerLayout.js';
69
68
  export { Highlighter } from './list/Highlighter.js';
70
69
  export { List } from './list/List.js';
@@ -148,6 +147,9 @@ export { ToolbarButton } from './toolbar/ToolbarButton.js';
148
147
  export { Tooltray } from './toolbar/Tooltray.js';
149
148
  export { ToolbarField } from './toolbar/toolbar-field/ToolbarField.js';
150
149
  export { Tree } from './tree/Tree.js';
150
+ export { TreeNode } from './tree/TreeNode.js';
151
+ export { TreeNodeLabel } from './tree/TreeNodeLabel.js';
152
+ export { TreeNodeTrigger } from './tree/TreeNodeTrigger.js';
151
153
  export { ElectronWindow } from './window/ElectronWindow.js';
152
154
  export { Window, WindowContext, isDesktop, useWindow } from './window/WindowContext.js';
153
155
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"ListItem.js","sources":["../src/list-deprecated/ListItem.tsx"],"sourcesContent":["import { type ForwardedRef, forwardRef, type ReactElement } from \"react\";\nimport { useDescendant } from \"./internal/DescendantContext\";\nimport { isPlainObject } from \"./internal/helpers\";\nimport { ListItemBase, type ListItemBaseProps } from \"./ListItemBase\";\nimport { useListItem } from \"./useListItem\";\n\nexport interface ListItemProps<Item = string>\n extends Omit<\n ListItemBaseProps,\n \"focusVisible\" | \"highlighted\" | \"selected\" | \"tooltipText\"\n > {\n item?: Item;\n itemToString?: (item: Item) => string;\n}\n\nfunction ListItem<Item = string>(\n props: ListItemProps<Item>,\n ref?: ForwardedRef<HTMLDivElement>,\n) {\n const {\n children,\n item = props.item === undefined && !isPlainObject(children)\n ? (children as unknown as Item)\n : props.item,\n ...restProps\n } = props;\n\n const { itemToString, itemProps } = useListItem({\n index: useDescendant(item),\n item,\n ...restProps,\n });\n\n const itemText = itemToString(item as Item);\n\n return (\n <ListItemBase tooltipText={itemText} {...itemProps} ref={ref}>\n {children !== undefined ? children : itemText}\n </ListItemBase>\n );\n}\n\n// `const` could not be generic, but we has to use `forwardRef` so that React would use the component correctly..?\n// So we have to override the type definition of forwardRef to be our own\ntype GenericListItem = <Item = string>(\n p: ListItemProps<Item> & { ref?: ForwardedRef<HTMLDivElement> },\n) => ReactElement<ListItemProps<Item>>;\n\nconst _ListItem = forwardRef(ListItem) as GenericListItem;\n\nexport { _ListItem as ListItem };\n"],"names":[],"mappings":";;;;;;;AAeA,SAAS,QAAA,CACP,OACA,GAAA,EACA;AACA,EAAA,MAAM;AAAA,IACJ,QAAA;AAAA,IACA,IAAA,GAAO,MAAM,IAAA,KAAS,MAAA,IAAa,CAAC,aAAA,CAAc,QAAQ,CAAA,GACrD,QAAA,GACD,KAAA,CAAM,IAAA;AAAA,IACV,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM,EAAE,YAAA,EAAc,SAAA,EAAU,GAAI,WAAA,CAAY;AAAA,IAC9C,KAAA,EAAO,cAAc,IAAI,CAAA;AAAA,IACzB,IAAA;AAAA,IACA,GAAG;AAAA,GACJ,CAAA;AAED,EAAA,MAAM,QAAA,GAAW,aAAa,IAAY,CAAA;AAE1C,EAAA,uBACE,GAAA,CAAC,YAAA,EAAA,EAAa,WAAA,EAAa,QAAA,EAAW,GAAG,WAAW,GAAA,EACjD,QAAA,EAAA,QAAA,KAAa,MAAA,GAAY,QAAA,GAAW,QAAA,EACvC,CAAA;AAEJ;AAQA,MAAM,SAAA,GAAY,WAAW,QAAQ;;;;"}
1
+ {"version":3,"file":"ListItem.js","sources":["../src/list-deprecated/ListItem.tsx"],"sourcesContent":["/** biome-ignore-all lint/correctness/useHookAtTopLevel: biome doesn't recognise the component correctly */\nimport { type ForwardedRef, forwardRef, type ReactElement } from \"react\";\nimport { useDescendant } from \"./internal/DescendantContext\";\nimport { isPlainObject } from \"./internal/helpers\";\nimport { ListItemBase, type ListItemBaseProps } from \"./ListItemBase\";\nimport { useListItem } from \"./useListItem\";\n\nexport interface ListItemProps<Item = string>\n extends Omit<\n ListItemBaseProps,\n \"focusVisible\" | \"highlighted\" | \"selected\" | \"tooltipText\"\n > {\n item?: Item;\n itemToString?: (item: Item) => string;\n}\n\nfunction ListItem<Item = string>(\n props: ListItemProps<Item>,\n ref?: ForwardedRef<HTMLDivElement>,\n) {\n const {\n children,\n item = props.item === undefined && !isPlainObject(children)\n ? (children as unknown as Item)\n : props.item,\n ...restProps\n } = props;\n\n const { itemToString, itemProps } = useListItem({\n index: useDescendant(item),\n item,\n ...restProps,\n });\n\n const itemText = itemToString(item as Item);\n\n return (\n <ListItemBase tooltipText={itemText} {...itemProps} ref={ref}>\n {children !== undefined ? children : itemText}\n </ListItemBase>\n );\n}\n\n// `const` could not be generic, but we has to use `forwardRef` so that React would use the component correctly..?\n// So we have to override the type definition of forwardRef to be our own\ntype GenericListItem = <Item = string>(\n p: ListItemProps<Item> & { ref?: ForwardedRef<HTMLDivElement> },\n) => ReactElement<ListItemProps<Item>>;\n\nconst _ListItem = forwardRef(ListItem) as GenericListItem;\n\nexport { _ListItem as ListItem };\n"],"names":[],"mappings":";;;;;;;AAgBA,SAAS,QAAA,CACP,OACA,GAAA,EACA;AACA,EAAA,MAAM;AAAA,IACJ,QAAA;AAAA,IACA,IAAA,GAAO,MAAM,IAAA,KAAS,MAAA,IAAa,CAAC,aAAA,CAAc,QAAQ,CAAA,GACrD,QAAA,GACD,KAAA,CAAM,IAAA;AAAA,IACV,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM,EAAE,YAAA,EAAc,SAAA,EAAU,GAAI,WAAA,CAAY;AAAA,IAC9C,KAAA,EAAO,cAAc,IAAI,CAAA;AAAA,IACzB,IAAA;AAAA,IACA,GAAG;AAAA,GACJ,CAAA;AAED,EAAA,MAAM,QAAA,GAAW,aAAa,IAAY,CAAA;AAE1C,EAAA,uBACE,GAAA,CAAC,YAAA,EAAA,EAAa,WAAA,EAAa,QAAA,EAAW,GAAG,WAAW,GAAA,EACjD,QAAA,EAAA,QAAA,KAAa,MAAA,GAAY,QAAA,GAAW,QAAA,EACvC,CAAA;AAEJ;AAQA,MAAM,SAAA,GAAY,WAAW,QAAQ;;;;"}
@@ -1,4 +1,4 @@
1
- var css_248z = ".saltRating {\n display: flex;\n gap: calc(2 * var(--salt-spacing-fixed-600));\n align-items: center;\n box-sizing: border-box;\n}\n\n.saltFormField .saltRating {\n min-height: var(--salt-size-base);\n}\n\n.saltRating-wrapper-top,\n.saltRating-wrapper-bottom {\n flex-direction: column;\n}\n\n.saltRating-wrapper-left,\n.saltRating-wrapper-right {\n flex-direction: row;\n}\n\n.saltRating-container {\n display: flex;\n flex-direction: row;\n gap: calc(2 * var(--salt-spacing-fixed-600));\n flex-wrap: nowrap;\n justify-content: flex-start;\n align-items: stretch;\n}\n\n.saltRating-label {\n color: var(--salt-content-primary-foreground);\n font-family: var(--salt-text-fontFamily);\n font-size: var(--salt-text-fontSize);\n font-weight: var(--salt-text-fontWeight);\n line-height: var(--salt-text-lineHeight);\n}\n\n.saltRating-label.saltRating-label-top,\n.saltRating-label.saltRating-label-bottom {\n text-align: center;\n}\n\n.saltRating-label.saltRating-label-left {\n text-align: right;\n}\n";
1
+ var css_248z = ".saltRating {\n display: inline-flex;\n box-sizing: border-box;\n}\n\n.saltFormField .saltRating-container {\n height: var(--salt-size-base);\n padding-top: calc(var(--salt-spacing-100) + var(--salt-spacing-fixed-100));\n}\n\n.saltFormField .saltRating-label {\n min-height: var(--salt-size-base);\n padding-top: var(--salt-spacing-100);\n}\n\n.saltRating-labelTop,\n.saltRating-labelBottom {\n flex-direction: column;\n align-items: flex-start;\n gap: var(--salt-spacing-fixed-600);\n}\n\n.saltRating-labelLeft,\n.saltRating-labelRight {\n flex-direction: row;\n gap: var(--salt-spacing-fixed-1200);\n}\n\n.saltRating-container {\n display: flex;\n flex-direction: row;\n gap: var(--salt-spacing-fixed-1200);\n flex-wrap: nowrap;\n justify-content: flex-start;\n padding-top: var(--salt-spacing-fixed-100);\n padding-bottom: var(--salt-spacing-fixed-100);\n box-sizing: border-box;\n}\n\n.saltRating-label {\n color: var(--salt-content-primary-foreground);\n font-family: var(--salt-text-fontFamily);\n font-size: var(--salt-text-fontSize);\n font-weight: var(--salt-text-fontWeight);\n line-height: var(--salt-text-lineHeight);\n box-sizing: border-box;\n}\n\n.saltRating-label.saltRating-label-left {\n text-align: right;\n}\n";
2
2
 
3
3
  export { css_248z as default };
4
4
  //# sourceMappingURL=Rating.css.js.map
@@ -15,8 +15,8 @@ const Rating = forwardRef(function Rating2({
15
15
  name: nameProp,
16
16
  onChange,
17
17
  className,
18
- readOnly,
19
- disabled,
18
+ readOnly: readOnlyProp,
19
+ disabled: disabledProp,
20
20
  max = 5,
21
21
  getLabel = defaultGetLabel,
22
22
  getVisibleLabel,
@@ -33,11 +33,15 @@ const Rating = forwardRef(function Rating2({
33
33
  window: targetWindow
34
34
  });
35
35
  const {
36
+ disabled: formFieldDisabled,
37
+ readOnly: formFieldReadOnly,
36
38
  a11yProps: {
37
39
  "aria-describedby": formFieldDescribedBy,
38
40
  "aria-labelledby": formFieldLabelledBy
39
41
  } = {}
40
42
  } = useFormFieldProps();
43
+ const disabled = formFieldDisabled || disabledProp;
44
+ const readOnly = formFieldReadOnly || readOnlyProp;
41
45
  const [hoveredValue, setHoveredValue] = useState(0);
42
46
  const [selected, setSelected] = useControlled({
43
47
  controlled: valueProp,
@@ -47,10 +51,6 @@ const Rating = forwardRef(function Rating2({
47
51
  });
48
52
  const radioGroupRef = useRef(null);
49
53
  const name = useId(nameProp);
50
- const updateRating = (newValue, event) => {
51
- setSelected(newValue);
52
- onChange == null ? void 0 : onChange(event, newValue);
53
- };
54
54
  const handleMouseEnter = (event) => {
55
55
  if (readOnly || disabled) return;
56
56
  const itemValue = Number.parseInt(event.currentTarget.value, 10);
@@ -62,7 +62,8 @@ const Rating = forwardRef(function Rating2({
62
62
  return;
63
63
  }
64
64
  const itemValue = Number.parseInt(event.currentTarget.value, 10);
65
- updateRating(itemValue, event);
65
+ setSelected(itemValue);
66
+ onChange == null ? void 0 : onChange(event, itemValue);
66
67
  };
67
68
  const isTopLeft = labelPlacement === "top" || labelPlacement === "left";
68
69
  const displayLabel = getVisibleLabel && /* @__PURE__ */ jsx(