@proyecto-viviana/solidaria-components 0.4.0 → 0.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (226) hide show
  1. package/dist/ActionBar.d.ts.map +1 -1
  2. package/dist/ActionBar.js +2 -11
  3. package/dist/ActionBar.js.map +1 -1
  4. package/dist/ActionBar.jsx +2 -11
  5. package/dist/ActionBar.jsx.map +1 -1
  6. package/dist/ActionGroup.d.ts.map +1 -1
  7. package/dist/ActionGroup.js +1 -1
  8. package/dist/ActionGroup.js.map +1 -1
  9. package/dist/ActionGroup.jsx +1 -1
  10. package/dist/ActionGroup.jsx.map +1 -1
  11. package/dist/Autocomplete.d.ts +2 -2
  12. package/dist/Autocomplete.d.ts.map +1 -1
  13. package/dist/Autocomplete.js +7 -7
  14. package/dist/Autocomplete.js.map +1 -1
  15. package/dist/Autocomplete.jsx +7 -7
  16. package/dist/Autocomplete.jsx.map +1 -1
  17. package/dist/Breadcrumbs.d.ts.map +1 -1
  18. package/dist/Breadcrumbs.js +18 -18
  19. package/dist/Breadcrumbs.js.map +1 -1
  20. package/dist/Breadcrumbs.jsx +21 -26
  21. package/dist/Breadcrumbs.jsx.map +1 -1
  22. package/dist/Calendar.d.ts.map +1 -1
  23. package/dist/Calendar.js +100 -65
  24. package/dist/Calendar.js.map +1 -1
  25. package/dist/Calendar.jsx +10 -1
  26. package/dist/Calendar.jsx.map +1 -1
  27. package/dist/Color.d.ts.map +1 -1
  28. package/dist/Color.js +15 -18
  29. package/dist/Color.js.map +1 -1
  30. package/dist/Color.jsx +15 -19
  31. package/dist/Color.jsx.map +1 -1
  32. package/dist/ComboBox.d.ts +4 -0
  33. package/dist/ComboBox.d.ts.map +1 -1
  34. package/dist/ComboBox.js +21 -13
  35. package/dist/ComboBox.js.map +1 -1
  36. package/dist/ComboBox.jsx +23 -13
  37. package/dist/ComboBox.jsx.map +1 -1
  38. package/dist/DateField.d.ts +11 -2
  39. package/dist/DateField.d.ts.map +1 -1
  40. package/dist/DateField2.js +237 -234
  41. package/dist/DateField2.js.map +1 -1
  42. package/dist/DateField2.jsx +134 -97
  43. package/dist/DateField2.jsx.map +1 -1
  44. package/dist/DatePicker.d.ts +42 -3
  45. package/dist/DatePicker.d.ts.map +1 -1
  46. package/dist/DatePicker.js +6 -990
  47. package/dist/DatePicker.jsx +6 -681
  48. package/dist/DatePicker2.js +1171 -0
  49. package/dist/DatePicker2.js.map +1 -0
  50. package/dist/DatePicker2.jsx +820 -0
  51. package/dist/DatePicker2.jsx.map +1 -0
  52. package/dist/DateRangePickerContext.d.ts +2 -0
  53. package/dist/DateRangePickerContext.d.ts.map +1 -1
  54. package/dist/Disclosure.d.ts.map +1 -1
  55. package/dist/Disclosure.js +3 -0
  56. package/dist/Disclosure.js.map +1 -1
  57. package/dist/Disclosure.jsx +1 -1
  58. package/dist/Disclosure.jsx.map +1 -1
  59. package/dist/ElementTag.d.ts +29 -0
  60. package/dist/ElementTag.d.ts.map +1 -0
  61. package/dist/ElementTag.js +220 -0
  62. package/dist/ElementTag.js.map +1 -0
  63. package/dist/ElementTag.jsx +67 -0
  64. package/dist/ElementTag.jsx.map +1 -0
  65. package/dist/GridList.d.ts.map +1 -1
  66. package/dist/GridList.js +2 -2
  67. package/dist/GridList.js.map +1 -1
  68. package/dist/GridList.jsx +2 -2
  69. package/dist/GridList.jsx.map +1 -1
  70. package/dist/Landmark.js +4 -3
  71. package/dist/Landmark.js.map +1 -1
  72. package/dist/Landmark.jsx +3 -3
  73. package/dist/Landmark.jsx.map +1 -1
  74. package/dist/Link.js +3 -2
  75. package/dist/Link.js.map +1 -1
  76. package/dist/Link.jsx +3 -3
  77. package/dist/Link.jsx.map +1 -1
  78. package/dist/ListBox.d.ts +2 -2
  79. package/dist/ListBox.d.ts.map +1 -1
  80. package/dist/ListBox.js +327 -166
  81. package/dist/ListBox.js.map +1 -1
  82. package/dist/ListBox.jsx +161 -25
  83. package/dist/ListBox.jsx.map +1 -1
  84. package/dist/Modal.d.ts.map +1 -1
  85. package/dist/Modal.js +7 -5
  86. package/dist/Modal.js.map +1 -1
  87. package/dist/Modal.jsx +5 -5
  88. package/dist/Modal.jsx.map +1 -1
  89. package/dist/Popover.d.ts.map +1 -1
  90. package/dist/Popover.js +16 -9
  91. package/dist/Popover.js.map +1 -1
  92. package/dist/Popover.jsx +25 -4
  93. package/dist/Popover.jsx.map +1 -1
  94. package/dist/RangeCalendar.d.ts.map +1 -1
  95. package/dist/RangeCalendar.js +182 -46
  96. package/dist/RangeCalendar.js.map +1 -1
  97. package/dist/RangeCalendar.jsx +72 -2
  98. package/dist/RangeCalendar.jsx.map +1 -1
  99. package/dist/SearchField.d.ts.map +1 -1
  100. package/dist/SearchField.js +26 -2
  101. package/dist/SearchField.js.map +1 -1
  102. package/dist/SearchField.jsx +26 -2
  103. package/dist/SearchField.jsx.map +1 -1
  104. package/dist/Select.d.ts +7 -0
  105. package/dist/Select.d.ts.map +1 -1
  106. package/dist/Select.js +64 -51
  107. package/dist/Select.js.map +1 -1
  108. package/dist/Select.jsx +35 -20
  109. package/dist/Select.jsx.map +1 -1
  110. package/dist/Separator.js +3 -2
  111. package/dist/Separator.js.map +1 -1
  112. package/dist/Separator.jsx +2 -2
  113. package/dist/Separator.jsx.map +1 -1
  114. package/dist/SharedElementTransition.d.ts.map +1 -1
  115. package/dist/SharedElementTransition.js +35 -33
  116. package/dist/SharedElementTransition.js.map +1 -1
  117. package/dist/SharedElementTransition.jsx +35 -33
  118. package/dist/SharedElementTransition.jsx.map +1 -1
  119. package/dist/StepList.d.ts.map +1 -1
  120. package/dist/StepList.js +2 -9
  121. package/dist/StepList.js.map +1 -1
  122. package/dist/StepList.jsx +1 -6
  123. package/dist/StepList.jsx.map +1 -1
  124. package/dist/Table.d.ts +2 -0
  125. package/dist/Table.d.ts.map +1 -1
  126. package/dist/Table.js +10 -3
  127. package/dist/Table.js.map +1 -1
  128. package/dist/Table.jsx +10 -3
  129. package/dist/Table.jsx.map +1 -1
  130. package/dist/Tabs.d.ts.map +1 -1
  131. package/dist/Tabs.js +3 -0
  132. package/dist/Tabs.js.map +1 -1
  133. package/dist/Tabs.jsx +1 -1
  134. package/dist/Tabs.jsx.map +1 -1
  135. package/dist/TagGroup.d.ts +3 -1
  136. package/dist/TagGroup.d.ts.map +1 -1
  137. package/dist/TagGroup.js +12 -8
  138. package/dist/TagGroup.js.map +1 -1
  139. package/dist/TagGroup.jsx +11 -8
  140. package/dist/TagGroup.jsx.map +1 -1
  141. package/dist/Text.d.ts.map +1 -1
  142. package/dist/Text.js +9 -8
  143. package/dist/Text.js.map +1 -1
  144. package/dist/Text.jsx +3 -3
  145. package/dist/Text.jsx.map +1 -1
  146. package/dist/TextField.js +4 -1
  147. package/dist/TextField.js.map +1 -1
  148. package/dist/TextField.jsx +4 -1
  149. package/dist/TextField.jsx.map +1 -1
  150. package/dist/TimeField.d.ts +14 -50
  151. package/dist/TimeField.d.ts.map +1 -1
  152. package/dist/TimeField.js +111 -205
  153. package/dist/TimeField.js.map +1 -1
  154. package/dist/TimeField.jsx +76 -82
  155. package/dist/TimeField.jsx.map +1 -1
  156. package/dist/Tree.d.ts.map +1 -1
  157. package/dist/Tree.js +3 -3
  158. package/dist/Tree.js.map +1 -1
  159. package/dist/Tree.jsx +3 -3
  160. package/dist/Tree.jsx.map +1 -1
  161. package/dist/VisuallyHidden.d.ts.map +1 -1
  162. package/dist/VisuallyHidden.js +3 -11
  163. package/dist/VisuallyHidden.js.map +1 -1
  164. package/dist/VisuallyHidden.jsx +3 -4
  165. package/dist/VisuallyHidden.jsx.map +1 -1
  166. package/dist/index.d.ts +3 -3
  167. package/dist/index.d.ts.map +1 -1
  168. package/dist/index.js +6 -6
  169. package/dist/index.jsx +6 -6
  170. package/dist/useDragAndDrop.d.ts +0 -8
  171. package/dist/useDragAndDrop.d.ts.map +1 -1
  172. package/dist/useDragAndDrop2.js +6 -2
  173. package/dist/useDragAndDrop2.js.map +1 -1
  174. package/dist/useDragAndDrop2.jsx +6 -2
  175. package/dist/useDragAndDrop2.jsx.map +1 -1
  176. package/dist/utils.d.ts +1 -0
  177. package/dist/utils.d.ts.map +1 -1
  178. package/dist/utils.js +2 -2
  179. package/dist/utils.js.map +1 -1
  180. package/dist/utils.jsx +2 -2
  181. package/dist/utils.jsx.map +1 -1
  182. package/package.json +3 -9
  183. package/src/ActionBar.tsx +10 -12
  184. package/src/ActionGroup.tsx +5 -3
  185. package/src/Autocomplete.tsx +14 -9
  186. package/src/Breadcrumbs.tsx +57 -42
  187. package/src/Calendar.tsx +30 -1
  188. package/src/Color.tsx +42 -27
  189. package/src/ComboBox.tsx +49 -17
  190. package/src/DateField.tsx +285 -52
  191. package/src/DatePicker.tsx +345 -57
  192. package/src/DateRangePickerContext.tsx +2 -0
  193. package/src/Disclosure.tsx +4 -0
  194. package/src/ElementTag.tsx +116 -0
  195. package/src/GridList.tsx +8 -2
  196. package/src/Landmark.tsx +4 -4
  197. package/src/Link.tsx +4 -4
  198. package/src/ListBox.tsx +323 -21
  199. package/src/Modal.tsx +21 -5
  200. package/src/Popover.tsx +28 -7
  201. package/src/RangeCalendar.tsx +120 -1
  202. package/src/SearchField.tsx +53 -1
  203. package/src/Select.tsx +114 -22
  204. package/src/Separator.tsx +3 -3
  205. package/src/SharedElementTransition.tsx +92 -36
  206. package/src/StepList.tsx +0 -7
  207. package/src/Table.tsx +19 -4
  208. package/src/Tabs.tsx +1 -0
  209. package/src/TagGroup.tsx +26 -6
  210. package/src/Text.tsx +5 -4
  211. package/src/TextField.tsx +1 -1
  212. package/src/TimeField.tsx +113 -196
  213. package/src/Tree.tsx +14 -4
  214. package/src/VisuallyHidden.tsx +8 -12
  215. package/src/index.ts +3 -8
  216. package/src/useDragAndDrop.ts +8 -10
  217. package/src/utils.tsx +3 -3
  218. package/dist/DatePicker.js.map +0 -1
  219. package/dist/DatePicker.jsx.map +0 -1
  220. package/dist/HiddenTimeInput.d.ts +0 -25
  221. package/dist/HiddenTimeInput.d.ts.map +0 -1
  222. package/dist/HiddenTimeInput.js +0 -104
  223. package/dist/HiddenTimeInput.js.map +0 -1
  224. package/dist/HiddenTimeInput.jsx +0 -69
  225. package/dist/HiddenTimeInput.jsx.map +0 -1
  226. package/src/HiddenTimeInput.tsx +0 -133
@@ -1 +1 @@
1
- {"version":3,"file":"TagGroup.js","names":["JSX","createContext","createMemo","createSignal","splitProps","useContext","For","Show","createTagGroup","createTag","AriaTagGroupProps","createListState","ListState","Key","SelectionMode","SelectionBehavior","RenderChildren","ClassNameOrFunction","StyleOrFunction","SlotProps","useRenderProps","filterDOMProps","dataAttr","SharedElementTransition","SelectionIndicatorContext","SelectionIndicatorContextValue","TagGroupRenderProps","isDisabled","isEmpty","TagGroupProps","Omit","HTMLAttributes","HTMLDivElement","children","Element","class","style","TagListRenderProps","isFocused","TagListProps","items","T","item","renderEmptyState","selectionMode","selectionBehavior","selectedKeys","Iterable","defaultSelectedKeys","onSelectionChange","keys","Set","disabledKeys","getKey","label","onRemove","TagRenderProps","isSelected","isPressed","allowsRemoving","removeButtonProps","Record","TagProps","id","textValue","onAction","key","TagGroupContextValue","state","TagContextValue","TagGroupContext","TagListStateContext","TagContext","useTagGroupContext","TagGroup","props","local","domProps","_el$","_$getNextElement","_tmpl$","_$spread","_$mergeProps","_$memo","undefined","slot","_$insert","_$runHydrationEvents","TagList","gridRef","setGridRef","String","tagGroupAria","aria-label","aria-labelledby","aria-describedby","setIsFocused","renderValues","length","renderProps","defaultClassName","contextValue","_$createComponent","Provider","value","_el$2","_$use","gridProps","onFocus","setFocused","e","nextTarget","relatedTarget","Node","currentTarget","contains","data-empty","data-focused","when","fallback","each","Tag","rest","groupContext","tagRef","setTagRef","tagAria","role","normalizedRemoveButtonProps","raw","rawHandler","onPress","selectionIndicatorContext","global","_el$3","_tmpl$2","_el$4","firstChild","rowProps","event","rowClick","onClick","EventHandler","MouseEvent","target","closest","data-selected","data-disabled","data-pressed","data-allows-removing","gridCellProps","display","renderChildren","TagRemoveButtonProps","CSSProperties","buttonProps","TagRemoveButton","tagContext","getRemoveButtonProps","getIsDisabled","Boolean","rawId","rawAriaLabel","rawAriaLabelledBy","buttonId","ariaLabel","ariaLabelledBy","handleClick","HTMLButtonElement","stopPropagation","handler","stopRowPress","PointerEvent","_el$5","_tmpl$3","$$click","$$pointerdown","_$setAttribute","_$effect","_p$","_v$","_v$2","_v$3","_v$4","_$className","t","_$style","a","_$setProperty","o","_$delegateEvents"],"sources":["../src/TagGroup.tsx"],"sourcesContent":["/**\n * TagGroup component for solidaria-components\n *\n * Pre-wired headless tag group component that combines aria hooks.\n * Port of react-aria-components/src/TagGroup.tsx\n *\n * A tag group is a focusable list of labels, categories, keywords, filters, or other items,\n * with support for keyboard navigation, selection, and removal.\n */\n\nimport {\n type JSX,\n createContext,\n createMemo,\n createSignal,\n splitProps,\n useContext,\n For,\n Show,\n} from \"solid-js\";\nimport { createTagGroup, createTag, type AriaTagGroupProps } from \"@proyecto-viviana/solidaria\";\nimport {\n createListState,\n type ListState,\n type Key,\n type SelectionMode,\n type SelectionBehavior,\n} from \"@proyecto-viviana/solid-stately\";\nimport {\n type RenderChildren,\n type ClassNameOrFunction,\n type StyleOrFunction,\n type SlotProps,\n useRenderProps,\n filterDOMProps,\n dataAttr,\n} from \"./utils\";\nimport { SharedElementTransition } from \"./SharedElementTransition\";\nimport {\n SelectionIndicatorContext,\n type SelectionIndicatorContextValue,\n} from \"./SelectionIndicator\";\n\nexport interface TagGroupRenderProps {\n /** Whether the tag group is disabled. */\n isDisabled: boolean;\n /** Whether the tag list is empty. */\n isEmpty: boolean;\n}\n\nexport interface TagGroupProps\n extends\n Omit<AriaTagGroupProps, \"id\">,\n SlotProps,\n Omit<JSX.HTMLAttributes<HTMLDivElement>, \"class\" | \"style\" | \"children\"> {\n /** The children of the component. */\n children?: JSX.Element;\n /** The CSS className for the element. */\n class?: ClassNameOrFunction<TagGroupRenderProps>;\n /** The inline style for the element. */\n style?: StyleOrFunction<TagGroupRenderProps>;\n}\n\nexport interface TagListRenderProps {\n /** Whether the tag list is empty. */\n isEmpty: boolean;\n /** Whether the tag list is focused. */\n isFocused: boolean;\n}\n\nexport interface TagListProps<T>\n extends\n SlotProps,\n Omit<JSX.HTMLAttributes<HTMLDivElement>, \"class\" | \"style\" | \"children\" | \"onSelectionChange\"> {\n /** The items to display in the tag list. */\n items: T[];\n /** Function to render each item. */\n children: (item: T) => JSX.Element;\n /** The CSS className for the element. */\n class?: ClassNameOrFunction<TagListRenderProps>;\n /** The inline style for the element. */\n style?: StyleOrFunction<TagListRenderProps>;\n /** Content to render when the list is empty. */\n renderEmptyState?: () => JSX.Element;\n /** The selection mode for the tag list. */\n selectionMode?: SelectionMode;\n /** How selection behaves in the collection. */\n selectionBehavior?: SelectionBehavior;\n /** The currently selected keys (controlled). */\n selectedKeys?: Iterable<Key>;\n /** The default selected keys (uncontrolled). */\n defaultSelectedKeys?: Iterable<Key>;\n /** Handler called when selection changes. */\n onSelectionChange?: (keys: \"all\" | Set<Key>) => void;\n /** Keys that are disabled. */\n disabledKeys?: Iterable<Key>;\n /** Function to get a unique key from an item. */\n getKey?: (item: T) => Key;\n /** Accessibility label. */\n label?: string;\n /** Custom aria-label. */\n \"aria-label\"?: string;\n /** Reference to external label element. */\n \"aria-labelledby\"?: string;\n /** Reference to description element. */\n \"aria-describedby\"?: string;\n /** Whether the tag list is disabled. */\n isDisabled?: boolean;\n /** Handler called when tags are removed. */\n onRemove?: (keys: Set<Key>) => void;\n}\n\nexport interface TagRenderProps {\n /** Whether the tag is selected. */\n isSelected: boolean;\n /** Whether the tag is disabled. */\n isDisabled: boolean;\n /** Whether the tag is focused. */\n isFocused: boolean;\n /** Whether the tag is pressed. */\n isPressed: boolean;\n /** Whether the tag allows removal. */\n allowsRemoving: boolean;\n /** The selection mode. */\n selectionMode: SelectionMode;\n /** Props for the remove button when removal is allowed. */\n removeButtonProps: Record<string, unknown>;\n}\n\nexport interface TagProps extends SlotProps {\n /** A unique key for this tag. */\n id: Key;\n /** Whether the tag is disabled. */\n isDisabled?: boolean;\n /** A text value for accessibility. */\n textValue?: string;\n /** The children of the component. A function may be provided to receive render props. */\n children?: RenderChildren<TagRenderProps>;\n /** The CSS className for the element. */\n class?: ClassNameOrFunction<TagRenderProps>;\n /** The inline style for the element. */\n style?: StyleOrFunction<TagRenderProps>;\n /** Handler called when the tag is activated. */\n onAction?: (key: Key) => void;\n}\n\ninterface TagGroupContextValue {\n state: ListState;\n onRemove?: (keys: Set<Key>) => void;\n isDisabled?: boolean;\n}\n\ninterface TagContextValue {\n removeButtonProps: Record<string, unknown>;\n allowsRemoving: boolean;\n}\n\nexport const TagGroupContext = createContext<TagGroupContextValue | null>(null);\nexport const TagListStateContext = createContext<ListState | null>(null);\nexport const TagContext = createContext<TagContextValue | null>(null);\n\nexport function useTagGroupContext(): TagGroupContextValue | null {\n return useContext(TagGroupContext);\n}\n\n/**\n * A tag group is a focusable list of labels, categories, keywords, filters, or other items,\n * with support for keyboard navigation, selection, and removal.\n *\n * @example\n * ```tsx\n * <TagGroup label=\"Categories\" onRemove={(keys) => removeItems(keys)}>\n * <TagList items={items}>\n * {(item) => <Tag id={item.id}>{item.name}</Tag>}\n * </TagList>\n * </TagGroup>\n * ```\n */\nexport function TagGroup(props: TagGroupProps): JSX.Element {\n const [local, domProps] = splitProps(props, [\"class\", \"style\", \"slot\", \"children\"]);\n\n // We need TagList to provide the state, so TagGroup just provides context\n return (\n <div\n {...domProps}\n class={typeof local.class === \"string\" ? local.class : \"solidaria-TagGroup\"}\n style={typeof local.style === \"object\" ? local.style : undefined}\n slot={local.slot}\n >\n {props.children}\n </div>\n );\n}\n\n/**\n * TagList contains the list of tags within a TagGroup.\n */\nexport function TagList<T extends { id?: Key; key?: Key }>(props: TagListProps<T>): JSX.Element {\n const [local, domProps] = splitProps(props, [\n \"items\",\n \"class\",\n \"style\",\n \"slot\",\n \"renderEmptyState\",\n \"children\",\n \"selectionMode\",\n \"selectionBehavior\",\n \"selectedKeys\",\n \"defaultSelectedKeys\",\n \"onSelectionChange\",\n \"disabledKeys\",\n \"getKey\",\n \"label\",\n \"aria-label\",\n \"aria-labelledby\",\n \"aria-describedby\",\n \"isDisabled\",\n \"onRemove\",\n ]);\n\n // Create a ref for the grid\n const [gridRef, setGridRef] = createSignal<HTMLDivElement | null>(null);\n\n // Default getKey function\n const getKey = (item: T): Key => {\n if (local.getKey) return local.getKey(item);\n if (item.id !== undefined) return item.id;\n if (item.key !== undefined) return item.key;\n return String(item);\n };\n\n const state = createListState({\n get items() {\n return local.items;\n },\n getKey,\n get selectionMode() {\n return local.selectionMode ?? \"none\";\n },\n get selectionBehavior() {\n return local.selectionBehavior ?? \"toggle\";\n },\n get selectedKeys() {\n return local.selectedKeys;\n },\n get defaultSelectedKeys() {\n return local.defaultSelectedKeys;\n },\n get onSelectionChange() {\n return local.onSelectionChange;\n },\n get disabledKeys() {\n return local.disabledKeys;\n },\n });\n\n // Create tag group accessibility props\n const tagGroupAria = createTagGroup(\n {\n get \"aria-label\"() {\n return local[\"aria-label\"] ?? (!local[\"aria-labelledby\"] ? local.label : undefined);\n },\n get \"aria-labelledby\"() {\n return local[\"aria-labelledby\"];\n },\n get \"aria-describedby\"() {\n return local[\"aria-describedby\"];\n },\n get isDisabled() {\n return local.isDisabled;\n },\n get onRemove() {\n return local.onRemove;\n },\n },\n state,\n gridRef,\n );\n\n const [isFocused, setIsFocused] = createSignal(false);\n\n const renderValues = createMemo<TagListRenderProps>(() => ({\n isEmpty: local.items.length === 0,\n isFocused: isFocused(),\n }));\n\n const renderProps = useRenderProps(\n {\n class: local.class,\n style: local.style,\n defaultClassName: \"solidaria-TagList\",\n },\n renderValues,\n );\n\n const contextValue: TagGroupContextValue = {\n state,\n get onRemove() {\n return local.onRemove;\n },\n get isDisabled() {\n return local.isDisabled;\n },\n };\n\n return (\n <TagGroupContext.Provider value={contextValue}>\n <TagListStateContext.Provider value={state}>\n <div\n ref={setGridRef}\n {...domProps}\n {...tagGroupAria.gridProps}\n class={renderProps.class()}\n style={renderProps.style()}\n onFocus={() => {\n setIsFocused(true);\n state.setFocused(true);\n }}\n onBlur={(e) => {\n const nextTarget = e.relatedTarget as Node | null;\n if (nextTarget && e.currentTarget.contains(nextTarget)) {\n return;\n }\n\n setIsFocused(false);\n state.setFocused(false);\n }}\n data-empty={dataAttr(local.items.length === 0)}\n data-focused={dataAttr(isFocused())}\n >\n <SharedElementTransition>\n <Show when={local.items.length > 0} fallback={local.renderEmptyState?.()}>\n <For each={local.items}>{(item) => props.children(item)}</For>\n </Show>\n </SharedElementTransition>\n </div>\n </TagListStateContext.Provider>\n </TagGroupContext.Provider>\n );\n}\n\n/**\n * A Tag is an individual item within a TagList.\n */\nexport function Tag(props: TagProps): JSX.Element {\n const [local, rest] = splitProps(props, [\n \"id\",\n \"class\",\n \"style\",\n \"slot\",\n \"isDisabled\",\n \"textValue\",\n \"onAction\",\n ]);\n\n const state = useContext(TagListStateContext);\n const groupContext = useContext(TagGroupContext);\n\n // Create a ref for the tag\n const [tagRef, setTagRef] = createSignal<HTMLDivElement | null>(null);\n\n // Create tag accessibility props\n const tagAria = createTag(\n {\n get key() {\n return local.id;\n },\n role: \"row\",\n get isDisabled() {\n return local.isDisabled || groupContext?.isDisabled;\n },\n get textValue() {\n return local.textValue;\n },\n },\n state!,\n tagRef,\n );\n\n const normalizedRemoveButtonProps = createMemo<Record<string, unknown>>(() => {\n const raw = tagAria.removeButtonProps;\n const rawHandler = typeof raw.onPress === \"function\" ? (raw.onPress as () => void) : undefined;\n return {\n ...raw,\n onPress: () => {\n if (!tagAria.isDisabled && groupContext?.onRemove) {\n groupContext.onRemove(new Set([local.id]));\n return;\n }\n rawHandler?.();\n },\n };\n });\n\n const renderValues = createMemo<TagRenderProps>(() => ({\n isSelected: tagAria.isSelected,\n isDisabled: tagAria.isDisabled,\n isFocused: tagAria.isFocused,\n isPressed: tagAria.isPressed,\n allowsRemoving: tagAria.allowsRemoving,\n selectionMode: state?.selectionMode() ?? \"none\",\n removeButtonProps: normalizedRemoveButtonProps(),\n }));\n\n const renderProps = useRenderProps(\n {\n get children() {\n return props.children;\n },\n class: local.class,\n style: local.style,\n defaultClassName: \"solidaria-Tag\",\n },\n renderValues,\n );\n\n const selectionIndicatorContext = createMemo<SelectionIndicatorContextValue>(() => ({\n isSelected: () => tagAria.isSelected,\n }));\n\n const domProps = createMemo(() => filterDOMProps(rest, { global: true }));\n\n return (\n <SelectionIndicatorContext.Provider value={selectionIndicatorContext()}>\n <TagContext.Provider\n value={{\n get removeButtonProps() {\n return normalizedRemoveButtonProps();\n },\n get allowsRemoving() {\n return tagAria.allowsRemoving;\n },\n }}\n >\n <div\n ref={setTagRef}\n {...domProps()}\n {...tagAria.rowProps}\n class={renderProps.class()}\n style={renderProps.style()}\n onClick={(event) => {\n const rowClick = tagAria.rowProps.onClick;\n if (typeof rowClick === \"function\") {\n (rowClick as JSX.EventHandler<HTMLDivElement, MouseEvent>)(event);\n }\n\n if (!tagAria.isDisabled && !(event.target as Element | null)?.closest(\"button\")) {\n local.onAction?.(local.id);\n }\n }}\n data-selected={dataAttr(tagAria.isSelected)}\n data-disabled={dataAttr(tagAria.isDisabled)}\n data-focused={dataAttr(tagAria.isFocused)}\n data-pressed={dataAttr(tagAria.isPressed)}\n data-allows-removing={dataAttr(tagAria.allowsRemoving)}\n >\n <div {...tagAria.gridCellProps} style={{ display: \"contents\" }}>\n {renderProps.renderChildren()}\n </div>\n </div>\n </TagContext.Provider>\n </SelectionIndicatorContext.Provider>\n );\n}\n\nexport interface TagRemoveButtonProps {\n /** The children of the button (usually an X icon). */\n children?: JSX.Element;\n /** The CSS className for the element. */\n class?: string;\n /** The inline style for the element. */\n style?: JSX.CSSProperties;\n /** Explicit button props from Tag render props. */\n buttonProps?: Record<string, unknown>;\n}\n\n/**\n * TagRemoveButton is the button used to remove a tag.\n * It should be placed inside a Tag component.\n */\nexport function TagRemoveButton(props: TagRemoveButtonProps): JSX.Element {\n const tagContext = useContext(TagContext);\n const getRemoveButtonProps = () => props.buttonProps ?? tagContext?.removeButtonProps ?? {};\n const getIsDisabled = () => Boolean(getRemoveButtonProps().isDisabled);\n const rawId = getRemoveButtonProps().id;\n const rawAriaLabel = getRemoveButtonProps()[\"aria-label\"];\n const rawAriaLabelledBy = getRemoveButtonProps()[\"aria-labelledby\"];\n const buttonId: string | undefined = typeof rawId === \"string\" ? rawId : undefined;\n const ariaLabel: string = typeof rawAriaLabel === \"string\" ? rawAriaLabel : \"Remove\";\n const ariaLabelledBy: string | undefined =\n typeof rawAriaLabelledBy === \"string\" ? rawAriaLabelledBy : undefined;\n\n const handleClick: JSX.EventHandler<HTMLButtonElement, MouseEvent> = (event) => {\n event.stopPropagation();\n const handler = getRemoveButtonProps().onPress;\n if (typeof handler === \"function\" && !getIsDisabled()) {\n (handler as () => void)();\n }\n };\n const stopRowPress: JSX.EventHandler<HTMLButtonElement, PointerEvent> = (event) => {\n event.stopPropagation();\n };\n\n return (\n <button\n type=\"button\"\n class={props.class ?? \"solidaria-TagRemoveButton\"}\n style={props.style}\n id={buttonId}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n disabled={getIsDisabled()}\n data-allows-removing={dataAttr(tagContext?.allowsRemoving ?? false)}\n onPointerDown={stopRowPress}\n onClick={handleClick}\n >\n {props.children ?? \"×\"}\n </button>\n );\n}\n\nexport type { Key, SelectionMode, SelectionBehavior };\n"],"mappings":"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"}
1
+ {"version":3,"file":"TagGroup.js","names":["JSX","createContext","createMemo","createSignal","splitProps","useContext","For","Show","createTagGroup","createTag","useLocale","AriaTagGroupProps","createListState","ListState","Key","SelectionMode","SelectionBehavior","RenderChildren","ClassNameOrFunction","StyleOrFunction","SlotProps","RefLike","useRenderProps","filterDOMProps","dataAttr","mergeRefs","SharedElementTransition","SelectionIndicatorContext","SelectionIndicatorContextValue","TagGroupRenderProps","isDisabled","isEmpty","TagGroupProps","Omit","HTMLAttributes","HTMLDivElement","children","Element","class","style","TagListRenderProps","isFocused","TagListProps","items","T","item","renderEmptyState","selectionMode","selectionBehavior","selectedKeys","Iterable","defaultSelectedKeys","onSelectionChange","keys","Set","disabledKeys","getKey","label","onRemove","TagRenderProps","isSelected","isPressed","allowsRemoving","removeButtonProps","Record","TagProps","id","textValue","ref","onAction","key","TagGroupContextValue","state","TagContextValue","TagGroupContext","TagListStateContext","TagContext","useTagGroupContext","TagGroup","props","local","domProps","_el$","_$getNextElement","_tmpl$","_$spread","_$mergeProps","_$memo","undefined","slot","_$insert","_$runHydrationEvents","TagList","gridRef","setGridRef","String","locale","tagGroupAria","aria-label","aria-labelledby","aria-describedby","direction","setIsFocused","renderValues","length","renderProps","defaultClassName","contextValue","_$createComponent","Provider","value","_el$2","_$use","gridProps","onFocusIn","e","nextTarget","relatedTarget","Node","currentTarget","contains","data-empty","data-focused","when","fallback","each","Tag","rest","groupContext","tagRef","setTagRef","tagAria","role","normalizedRemoveButtonProps","raw","rawHandler","onPress","selectionIndicatorContext","global","_el$3","_tmpl$2","_el$4","firstChild","_ref$","rowProps","event","rowClick","onClick","EventHandler","MouseEvent","target","closest","data-selected","data-disabled","data-pressed","data-allows-removing","gridCellProps","display","renderChildren","TagRemoveButtonProps","CSSProperties","buttonProps","TagRemoveButton","tagContext","getRemoveButtonProps","getIsDisabled","Boolean","rawId","rawAriaLabel","rawAriaLabelledBy","buttonId","ariaLabel","ariaLabelledBy","handleClick","HTMLButtonElement","stopPropagation","handler","stopRowPress","PointerEvent","_el$5","_tmpl$3","$$click","$$pointerdown","_$setAttribute","_$effect","_p$","_v$","_v$2","_v$3","_v$4","_$className","t","_$style","a","_$setProperty","o","_$delegateEvents"],"sources":["../src/TagGroup.tsx"],"sourcesContent":["/**\n * TagGroup component for solidaria-components\n *\n * Pre-wired headless tag group component that combines aria hooks.\n * Port of react-aria-components/src/TagGroup.tsx\n *\n * A tag group is a focusable list of labels, categories, keywords, filters, or other items,\n * with support for keyboard navigation, selection, and removal.\n */\n\nimport {\n type JSX,\n createContext,\n createMemo,\n createSignal,\n splitProps,\n useContext,\n For,\n Show,\n} from \"solid-js\";\nimport {\n createTagGroup,\n createTag,\n useLocale,\n type AriaTagGroupProps,\n} from \"@proyecto-viviana/solidaria\";\nimport {\n createListState,\n type ListState,\n type Key,\n type SelectionMode,\n type SelectionBehavior,\n} from \"@proyecto-viviana/solid-stately\";\nimport {\n type RenderChildren,\n type ClassNameOrFunction,\n type StyleOrFunction,\n type SlotProps,\n type RefLike,\n useRenderProps,\n filterDOMProps,\n dataAttr,\n mergeRefs,\n} from \"./utils\";\nimport { SharedElementTransition } from \"./SharedElementTransition\";\nimport {\n SelectionIndicatorContext,\n type SelectionIndicatorContextValue,\n} from \"./SelectionIndicator\";\n\nexport interface TagGroupRenderProps {\n /** Whether the tag group is disabled. */\n isDisabled: boolean;\n /** Whether the tag list is empty. */\n isEmpty: boolean;\n}\n\nexport interface TagGroupProps\n extends\n Omit<AriaTagGroupProps, \"id\">,\n SlotProps,\n Omit<JSX.HTMLAttributes<HTMLDivElement>, \"class\" | \"style\" | \"children\"> {\n /** The children of the component. */\n children?: JSX.Element;\n /** The CSS className for the element. */\n class?: ClassNameOrFunction<TagGroupRenderProps>;\n /** The inline style for the element. */\n style?: StyleOrFunction<TagGroupRenderProps>;\n}\n\nexport interface TagListRenderProps {\n /** Whether the tag list is empty. */\n isEmpty: boolean;\n /** Whether the tag list is focused. */\n isFocused: boolean;\n}\n\nexport interface TagListProps<T>\n extends\n SlotProps,\n Omit<JSX.HTMLAttributes<HTMLDivElement>, \"class\" | \"style\" | \"children\" | \"onSelectionChange\"> {\n /** The items to display in the tag list. */\n items: T[];\n /** Function to render each item. */\n children: (item: T) => JSX.Element;\n /** The CSS className for the element. */\n class?: ClassNameOrFunction<TagListRenderProps>;\n /** The inline style for the element. */\n style?: StyleOrFunction<TagListRenderProps>;\n /** Content to render when the list is empty. */\n renderEmptyState?: () => JSX.Element;\n /** The selection mode for the tag list. */\n selectionMode?: SelectionMode;\n /** How selection behaves in the collection. */\n selectionBehavior?: SelectionBehavior;\n /** The currently selected keys (controlled). */\n selectedKeys?: Iterable<Key>;\n /** The default selected keys (uncontrolled). */\n defaultSelectedKeys?: Iterable<Key>;\n /** Handler called when selection changes. */\n onSelectionChange?: (keys: \"all\" | Set<Key>) => void;\n /** Keys that are disabled. */\n disabledKeys?: Iterable<Key>;\n /** Function to get a unique key from an item. */\n getKey?: (item: T) => Key;\n /** Accessibility label. */\n label?: string;\n /** Custom aria-label. */\n \"aria-label\"?: string;\n /** Reference to external label element. */\n \"aria-labelledby\"?: string;\n /** Reference to description element. */\n \"aria-describedby\"?: string;\n /** Whether the tag list is disabled. */\n isDisabled?: boolean;\n /** Handler called when tags are removed. */\n onRemove?: (keys: Set<Key>) => void;\n}\n\nexport interface TagRenderProps {\n /** Whether the tag is selected. */\n isSelected: boolean;\n /** Whether the tag is disabled. */\n isDisabled: boolean;\n /** Whether the tag is focused. */\n isFocused: boolean;\n /** Whether the tag is pressed. */\n isPressed: boolean;\n /** Whether the tag allows removal. */\n allowsRemoving: boolean;\n /** The selection mode. */\n selectionMode: SelectionMode;\n /** Props for the remove button when removal is allowed. */\n removeButtonProps: Record<string, unknown>;\n}\n\nexport interface TagProps extends SlotProps {\n /** A unique key for this tag. */\n id: Key;\n /** Whether the tag is disabled. */\n isDisabled?: boolean;\n /** A text value for accessibility. */\n textValue?: string;\n /** The children of the component. A function may be provided to receive render props. */\n children?: RenderChildren<TagRenderProps>;\n /** The CSS className for the element. */\n class?: ClassNameOrFunction<TagRenderProps>;\n /** The inline style for the element. */\n style?: StyleOrFunction<TagRenderProps>;\n /** A ref to the tag's DOM element (merged with the internal collection ref). */\n ref?: RefLike<HTMLDivElement>;\n /** Handler called when the tag is activated. */\n onAction?: (key: Key) => void;\n}\n\ninterface TagGroupContextValue {\n state: ListState;\n onRemove?: (keys: Set<Key>) => void;\n isDisabled?: boolean;\n}\n\ninterface TagContextValue {\n removeButtonProps: Record<string, unknown>;\n allowsRemoving: boolean;\n}\n\nexport const TagGroupContext = createContext<TagGroupContextValue | null>(null);\nexport const TagListStateContext = createContext<ListState | null>(null);\nexport const TagContext = createContext<TagContextValue | null>(null);\n\nexport function useTagGroupContext(): TagGroupContextValue | null {\n return useContext(TagGroupContext);\n}\n\n/**\n * A tag group is a focusable list of labels, categories, keywords, filters, or other items,\n * with support for keyboard navigation, selection, and removal.\n *\n * @example\n * ```tsx\n * <TagGroup label=\"Categories\" onRemove={(keys) => removeItems(keys)}>\n * <TagList items={items}>\n * {(item) => <Tag id={item.id}>{item.name}</Tag>}\n * </TagList>\n * </TagGroup>\n * ```\n */\nexport function TagGroup(props: TagGroupProps): JSX.Element {\n const [local, domProps] = splitProps(props, [\"class\", \"style\", \"slot\", \"children\"]);\n\n // We need TagList to provide the state, so TagGroup just provides context\n return (\n <div\n {...domProps}\n class={typeof local.class === \"string\" ? local.class : \"solidaria-TagGroup\"}\n style={typeof local.style === \"object\" ? local.style : undefined}\n slot={local.slot}\n >\n {props.children}\n </div>\n );\n}\n\n/**\n * TagList contains the list of tags within a TagGroup.\n */\nexport function TagList<T extends { id?: Key; key?: Key }>(props: TagListProps<T>): JSX.Element {\n const [local, domProps] = splitProps(props, [\n \"items\",\n \"class\",\n \"style\",\n \"slot\",\n \"renderEmptyState\",\n \"children\",\n \"selectionMode\",\n \"selectionBehavior\",\n \"selectedKeys\",\n \"defaultSelectedKeys\",\n \"onSelectionChange\",\n \"disabledKeys\",\n \"getKey\",\n \"label\",\n \"aria-label\",\n \"aria-labelledby\",\n \"aria-describedby\",\n \"isDisabled\",\n \"onRemove\",\n ]);\n\n // Create a ref for the grid\n const [gridRef, setGridRef] = createSignal<HTMLDivElement | null>(null);\n\n // Default getKey function\n const getKey = (item: T): Key => {\n if (local.getKey) return local.getKey(item);\n if (item.id !== undefined) return item.id;\n if (item.key !== undefined) return item.key;\n return String(item);\n };\n\n const state = createListState({\n get items() {\n return local.items;\n },\n getKey,\n get selectionMode() {\n return local.selectionMode ?? \"none\";\n },\n get selectionBehavior() {\n return local.selectionBehavior ?? \"toggle\";\n },\n get selectedKeys() {\n return local.selectedKeys;\n },\n get defaultSelectedKeys() {\n return local.defaultSelectedKeys;\n },\n get onSelectionChange() {\n return local.onSelectionChange;\n },\n get disabledKeys() {\n return local.disabledKeys;\n },\n });\n\n // The tag group navigates on the inline axis, so ArrowLeft/ArrowRight flip\n // under RTL. Thread the resolved layout direction into the hook (mirrors\n // ListBox, and useTagGroup passing `direction` to the ListKeyboardDelegate).\n const locale = useLocale();\n\n // Create tag group accessibility props\n const tagGroupAria = createTagGroup(\n {\n get \"aria-label\"() {\n return local[\"aria-label\"] ?? (!local[\"aria-labelledby\"] ? local.label : undefined);\n },\n get \"aria-labelledby\"() {\n return local[\"aria-labelledby\"];\n },\n get \"aria-describedby\"() {\n return local[\"aria-describedby\"];\n },\n get isDisabled() {\n return local.isDisabled;\n },\n get onRemove() {\n return local.onRemove;\n },\n get direction() {\n return locale().direction;\n },\n },\n state,\n gridRef,\n );\n\n const [isFocused, setIsFocused] = createSignal(false);\n\n const renderValues = createMemo<TagListRenderProps>(() => ({\n isEmpty: local.items.length === 0,\n isFocused: isFocused(),\n }));\n\n const renderProps = useRenderProps(\n {\n class: local.class,\n style: local.style,\n defaultClassName: \"solidaria-TagList\",\n },\n renderValues,\n );\n\n const contextValue: TagGroupContextValue = {\n state,\n get onRemove() {\n return local.onRemove;\n },\n get isDisabled() {\n return local.isDisabled;\n },\n };\n\n return (\n <TagGroupContext.Provider value={contextValue}>\n <TagListStateContext.Provider value={state}>\n <div\n ref={setGridRef}\n {...domProps}\n {...tagGroupAria.gridProps}\n class={renderProps.class()}\n style={renderProps.style()}\n // Track focus-within via the BUBBLING focusin/focusout pair (not the\n // non-bubbling focus/blur the hook's trampoline uses) so this render-prop\n // signal never clobbers `gridProps.onFocus` — the container focus\n // trampoline that marshals entry onto the first/last row.\n onFocusIn={() => {\n setIsFocused(true);\n }}\n onFocusOut={(e) => {\n const nextTarget = e.relatedTarget as Node | null;\n if (nextTarget && e.currentTarget.contains(nextTarget)) {\n return;\n }\n\n setIsFocused(false);\n }}\n data-empty={dataAttr(local.items.length === 0)}\n data-focused={dataAttr(isFocused())}\n >\n <SharedElementTransition>\n <Show when={local.items.length > 0} fallback={local.renderEmptyState?.()}>\n <For each={local.items}>{(item) => props.children(item)}</For>\n </Show>\n </SharedElementTransition>\n </div>\n </TagListStateContext.Provider>\n </TagGroupContext.Provider>\n );\n}\n\n/**\n * A Tag is an individual item within a TagList.\n */\nexport function Tag(props: TagProps): JSX.Element {\n const [local, rest] = splitProps(props, [\n \"id\",\n \"class\",\n \"style\",\n \"slot\",\n \"isDisabled\",\n \"textValue\",\n \"onAction\",\n \"ref\",\n ]);\n\n const state = useContext(TagListStateContext);\n const groupContext = useContext(TagGroupContext);\n\n // Create a ref for the tag\n const [tagRef, setTagRef] = createSignal<HTMLDivElement | null>(null);\n\n // Create tag accessibility props\n const tagAria = createTag(\n {\n get key() {\n return local.id;\n },\n role: \"row\",\n get isDisabled() {\n return local.isDisabled || groupContext?.isDisabled;\n },\n get textValue() {\n return local.textValue;\n },\n },\n state!,\n tagRef,\n );\n\n const normalizedRemoveButtonProps = createMemo<Record<string, unknown>>(() => {\n const raw = tagAria.removeButtonProps;\n const rawHandler = typeof raw.onPress === \"function\" ? (raw.onPress as () => void) : undefined;\n return {\n ...raw,\n onPress: () => {\n if (!tagAria.isDisabled && groupContext?.onRemove) {\n groupContext.onRemove(new Set([local.id]));\n return;\n }\n rawHandler?.();\n },\n };\n });\n\n const renderValues = createMemo<TagRenderProps>(() => ({\n isSelected: tagAria.isSelected,\n isDisabled: tagAria.isDisabled,\n isFocused: tagAria.isFocused,\n isPressed: tagAria.isPressed,\n allowsRemoving: tagAria.allowsRemoving,\n selectionMode: state?.selectionMode() ?? \"none\",\n removeButtonProps: normalizedRemoveButtonProps(),\n }));\n\n const renderProps = useRenderProps(\n {\n get children() {\n return props.children;\n },\n class: local.class,\n style: local.style,\n defaultClassName: \"solidaria-Tag\",\n },\n renderValues,\n );\n\n const selectionIndicatorContext = createMemo<SelectionIndicatorContextValue>(() => ({\n isSelected: () => tagAria.isSelected,\n }));\n\n const domProps = createMemo(() => filterDOMProps(rest, { global: true }));\n\n return (\n <SelectionIndicatorContext.Provider value={selectionIndicatorContext()}>\n <TagContext.Provider\n value={{\n get removeButtonProps() {\n return normalizedRemoveButtonProps();\n },\n get allowsRemoving() {\n return tagAria.allowsRemoving;\n },\n }}\n >\n <div\n ref={mergeRefs(setTagRef, local.ref)}\n {...domProps()}\n {...tagAria.rowProps}\n class={renderProps.class()}\n style={renderProps.style()}\n onClick={(event) => {\n const rowClick = tagAria.rowProps.onClick;\n if (typeof rowClick === \"function\") {\n (rowClick as JSX.EventHandler<HTMLDivElement, MouseEvent>)(event);\n }\n\n if (!tagAria.isDisabled && !(event.target as Element | null)?.closest(\"button\")) {\n local.onAction?.(local.id);\n }\n }}\n data-selected={dataAttr(tagAria.isSelected)}\n data-disabled={dataAttr(tagAria.isDisabled)}\n data-focused={dataAttr(tagAria.isFocused)}\n data-pressed={dataAttr(tagAria.isPressed)}\n data-allows-removing={dataAttr(tagAria.allowsRemoving)}\n >\n <div {...tagAria.gridCellProps} style={{ display: \"contents\" }}>\n {renderProps.renderChildren()}\n </div>\n </div>\n </TagContext.Provider>\n </SelectionIndicatorContext.Provider>\n );\n}\n\nexport interface TagRemoveButtonProps {\n /** The children of the button (usually an X icon). */\n children?: JSX.Element;\n /** The CSS className for the element. */\n class?: string;\n /** The inline style for the element. */\n style?: JSX.CSSProperties;\n /** Explicit button props from Tag render props. */\n buttonProps?: Record<string, unknown>;\n}\n\n/**\n * TagRemoveButton is the button used to remove a tag.\n * It should be placed inside a Tag component.\n */\nexport function TagRemoveButton(props: TagRemoveButtonProps): JSX.Element {\n const tagContext = useContext(TagContext);\n const getRemoveButtonProps = () => props.buttonProps ?? tagContext?.removeButtonProps ?? {};\n const getIsDisabled = () => Boolean(getRemoveButtonProps().isDisabled);\n const rawId = getRemoveButtonProps().id;\n const rawAriaLabel = getRemoveButtonProps()[\"aria-label\"];\n const rawAriaLabelledBy = getRemoveButtonProps()[\"aria-labelledby\"];\n const buttonId: string | undefined = typeof rawId === \"string\" ? rawId : undefined;\n const ariaLabel: string = typeof rawAriaLabel === \"string\" ? rawAriaLabel : \"Remove\";\n const ariaLabelledBy: string | undefined =\n typeof rawAriaLabelledBy === \"string\" ? rawAriaLabelledBy : undefined;\n\n const handleClick: JSX.EventHandler<HTMLButtonElement, MouseEvent> = (event) => {\n event.stopPropagation();\n const handler = getRemoveButtonProps().onPress;\n if (typeof handler === \"function\" && !getIsDisabled()) {\n (handler as () => void)();\n }\n };\n const stopRowPress: JSX.EventHandler<HTMLButtonElement, PointerEvent> = (event) => {\n event.stopPropagation();\n };\n\n return (\n <button\n type=\"button\"\n class={props.class ?? \"solidaria-TagRemoveButton\"}\n style={props.style}\n id={buttonId}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n disabled={getIsDisabled()}\n data-allows-removing={dataAttr(tagContext?.allowsRemoving ?? false)}\n onPointerDown={stopRowPress}\n onClick={handleClick}\n >\n {props.children ?? \"×\"}\n </button>\n );\n}\n\nexport type { Key, SelectionMode, SelectionBehavior };\n"],"mappings":"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"}
package/dist/TagGroup.jsx CHANGED
@@ -1,8 +1,8 @@
1
- import { dataAttr, filterDOMProps, useRenderProps } from "./utils.jsx";
1
+ import { dataAttr, filterDOMProps, mergeRefs, useRenderProps } from "./utils.jsx";
2
2
  import { SharedElementTransition } from "./SharedElementTransition.jsx";
3
3
  import { SelectionIndicatorContext } from "./SelectionIndicator.jsx";
4
4
  import { For, Show, createContext, createMemo, createSignal, splitProps, useContext } from "solid-js";
5
- import { createTag, createTagGroup } from "@proyecto-viviana/solidaria";
5
+ import { createTag, createTagGroup, useLocale } from "@proyecto-viviana/solidaria";
6
6
  import { createListState } from "@proyecto-viviana/solid-stately";
7
7
  //#region src/TagGroup.tsx
8
8
  /**
@@ -100,6 +100,7 @@ function TagList(props) {
100
100
  return local.disabledKeys;
101
101
  }
102
102
  });
103
+ const locale = useLocale();
103
104
  const tagGroupAria = createTagGroup({
104
105
  get "aria-label"() {
105
106
  return local["aria-label"] ?? (!local["aria-labelledby"] ? local.label : void 0);
@@ -115,6 +116,9 @@ function TagList(props) {
115
116
  },
116
117
  get onRemove() {
117
118
  return local.onRemove;
119
+ },
120
+ get direction() {
121
+ return locale().direction;
118
122
  }
119
123
  }, state, gridRef);
120
124
  const [isFocused, setIsFocused] = createSignal(false);
@@ -138,14 +142,12 @@ function TagList(props) {
138
142
  };
139
143
  return <TagGroupContext.Provider value={contextValue}>
140
144
  <TagListStateContext.Provider value={state}>
141
- <div ref={setGridRef} {...domProps} {...tagGroupAria.gridProps} class={renderProps.class()} style={renderProps.style()} onFocus={() => {
145
+ <div ref={setGridRef} {...domProps} {...tagGroupAria.gridProps} class={renderProps.class()} style={renderProps.style()} onFocusIn={() => {
142
146
  setIsFocused(true);
143
- state.setFocused(true);
144
- }} onBlur={(e) => {
147
+ }} onFocusOut={(e) => {
145
148
  const nextTarget = e.relatedTarget;
146
149
  if (nextTarget && e.currentTarget.contains(nextTarget)) return;
147
150
  setIsFocused(false);
148
- state.setFocused(false);
149
151
  }} data-empty={dataAttr(local.items.length === 0)} data-focused={dataAttr(isFocused())}>
150
152
  <SharedElementTransition>
151
153
  <Show when={local.items.length > 0} fallback={local.renderEmptyState?.()}>
@@ -167,7 +169,8 @@ function Tag(props) {
167
169
  "slot",
168
170
  "isDisabled",
169
171
  "textValue",
170
- "onAction"
172
+ "onAction",
173
+ "ref"
171
174
  ]);
172
175
  const state = useContext(TagListStateContext);
173
176
  const groupContext = useContext(TagGroupContext);
@@ -226,7 +229,7 @@ function Tag(props) {
226
229
  return tagAria.allowsRemoving;
227
230
  }
228
231
  }}>
229
- <div ref={setTagRef} {...domProps()} {...tagAria.rowProps} class={renderProps.class()} style={renderProps.style()} onClick={(event) => {
232
+ <div ref={mergeRefs(setTagRef, local.ref)} {...domProps()} {...tagAria.rowProps} class={renderProps.class()} style={renderProps.style()} onClick={(event) => {
230
233
  const rowClick = tagAria.rowProps.onClick;
231
234
  if (typeof rowClick === "function") rowClick(event);
232
235
  if (!tagAria.isDisabled && !event.target?.closest("button")) local.onAction?.(local.id);
@@ -1 +1 @@
1
- {"version":3,"file":"TagGroup.jsx","names":[],"sources":["../src/TagGroup.tsx"],"sourcesContent":["/**\n * TagGroup component for solidaria-components\n *\n * Pre-wired headless tag group component that combines aria hooks.\n * Port of react-aria-components/src/TagGroup.tsx\n *\n * A tag group is a focusable list of labels, categories, keywords, filters, or other items,\n * with support for keyboard navigation, selection, and removal.\n */\n\nimport {\n type JSX,\n createContext,\n createMemo,\n createSignal,\n splitProps,\n useContext,\n For,\n Show,\n} from \"solid-js\";\nimport { createTagGroup, createTag, type AriaTagGroupProps } from \"@proyecto-viviana/solidaria\";\nimport {\n createListState,\n type ListState,\n type Key,\n type SelectionMode,\n type SelectionBehavior,\n} from \"@proyecto-viviana/solid-stately\";\nimport {\n type RenderChildren,\n type ClassNameOrFunction,\n type StyleOrFunction,\n type SlotProps,\n useRenderProps,\n filterDOMProps,\n dataAttr,\n} from \"./utils\";\nimport { SharedElementTransition } from \"./SharedElementTransition\";\nimport {\n SelectionIndicatorContext,\n type SelectionIndicatorContextValue,\n} from \"./SelectionIndicator\";\n\nexport interface TagGroupRenderProps {\n /** Whether the tag group is disabled. */\n isDisabled: boolean;\n /** Whether the tag list is empty. */\n isEmpty: boolean;\n}\n\nexport interface TagGroupProps\n extends\n Omit<AriaTagGroupProps, \"id\">,\n SlotProps,\n Omit<JSX.HTMLAttributes<HTMLDivElement>, \"class\" | \"style\" | \"children\"> {\n /** The children of the component. */\n children?: JSX.Element;\n /** The CSS className for the element. */\n class?: ClassNameOrFunction<TagGroupRenderProps>;\n /** The inline style for the element. */\n style?: StyleOrFunction<TagGroupRenderProps>;\n}\n\nexport interface TagListRenderProps {\n /** Whether the tag list is empty. */\n isEmpty: boolean;\n /** Whether the tag list is focused. */\n isFocused: boolean;\n}\n\nexport interface TagListProps<T>\n extends\n SlotProps,\n Omit<JSX.HTMLAttributes<HTMLDivElement>, \"class\" | \"style\" | \"children\" | \"onSelectionChange\"> {\n /** The items to display in the tag list. */\n items: T[];\n /** Function to render each item. */\n children: (item: T) => JSX.Element;\n /** The CSS className for the element. */\n class?: ClassNameOrFunction<TagListRenderProps>;\n /** The inline style for the element. */\n style?: StyleOrFunction<TagListRenderProps>;\n /** Content to render when the list is empty. */\n renderEmptyState?: () => JSX.Element;\n /** The selection mode for the tag list. */\n selectionMode?: SelectionMode;\n /** How selection behaves in the collection. */\n selectionBehavior?: SelectionBehavior;\n /** The currently selected keys (controlled). */\n selectedKeys?: Iterable<Key>;\n /** The default selected keys (uncontrolled). */\n defaultSelectedKeys?: Iterable<Key>;\n /** Handler called when selection changes. */\n onSelectionChange?: (keys: \"all\" | Set<Key>) => void;\n /** Keys that are disabled. */\n disabledKeys?: Iterable<Key>;\n /** Function to get a unique key from an item. */\n getKey?: (item: T) => Key;\n /** Accessibility label. */\n label?: string;\n /** Custom aria-label. */\n \"aria-label\"?: string;\n /** Reference to external label element. */\n \"aria-labelledby\"?: string;\n /** Reference to description element. */\n \"aria-describedby\"?: string;\n /** Whether the tag list is disabled. */\n isDisabled?: boolean;\n /** Handler called when tags are removed. */\n onRemove?: (keys: Set<Key>) => void;\n}\n\nexport interface TagRenderProps {\n /** Whether the tag is selected. */\n isSelected: boolean;\n /** Whether the tag is disabled. */\n isDisabled: boolean;\n /** Whether the tag is focused. */\n isFocused: boolean;\n /** Whether the tag is pressed. */\n isPressed: boolean;\n /** Whether the tag allows removal. */\n allowsRemoving: boolean;\n /** The selection mode. */\n selectionMode: SelectionMode;\n /** Props for the remove button when removal is allowed. */\n removeButtonProps: Record<string, unknown>;\n}\n\nexport interface TagProps extends SlotProps {\n /** A unique key for this tag. */\n id: Key;\n /** Whether the tag is disabled. */\n isDisabled?: boolean;\n /** A text value for accessibility. */\n textValue?: string;\n /** The children of the component. A function may be provided to receive render props. */\n children?: RenderChildren<TagRenderProps>;\n /** The CSS className for the element. */\n class?: ClassNameOrFunction<TagRenderProps>;\n /** The inline style for the element. */\n style?: StyleOrFunction<TagRenderProps>;\n /** Handler called when the tag is activated. */\n onAction?: (key: Key) => void;\n}\n\ninterface TagGroupContextValue {\n state: ListState;\n onRemove?: (keys: Set<Key>) => void;\n isDisabled?: boolean;\n}\n\ninterface TagContextValue {\n removeButtonProps: Record<string, unknown>;\n allowsRemoving: boolean;\n}\n\nexport const TagGroupContext = createContext<TagGroupContextValue | null>(null);\nexport const TagListStateContext = createContext<ListState | null>(null);\nexport const TagContext = createContext<TagContextValue | null>(null);\n\nexport function useTagGroupContext(): TagGroupContextValue | null {\n return useContext(TagGroupContext);\n}\n\n/**\n * A tag group is a focusable list of labels, categories, keywords, filters, or other items,\n * with support for keyboard navigation, selection, and removal.\n *\n * @example\n * ```tsx\n * <TagGroup label=\"Categories\" onRemove={(keys) => removeItems(keys)}>\n * <TagList items={items}>\n * {(item) => <Tag id={item.id}>{item.name}</Tag>}\n * </TagList>\n * </TagGroup>\n * ```\n */\nexport function TagGroup(props: TagGroupProps): JSX.Element {\n const [local, domProps] = splitProps(props, [\"class\", \"style\", \"slot\", \"children\"]);\n\n // We need TagList to provide the state, so TagGroup just provides context\n return (\n <div\n {...domProps}\n class={typeof local.class === \"string\" ? local.class : \"solidaria-TagGroup\"}\n style={typeof local.style === \"object\" ? local.style : undefined}\n slot={local.slot}\n >\n {props.children}\n </div>\n );\n}\n\n/**\n * TagList contains the list of tags within a TagGroup.\n */\nexport function TagList<T extends { id?: Key; key?: Key }>(props: TagListProps<T>): JSX.Element {\n const [local, domProps] = splitProps(props, [\n \"items\",\n \"class\",\n \"style\",\n \"slot\",\n \"renderEmptyState\",\n \"children\",\n \"selectionMode\",\n \"selectionBehavior\",\n \"selectedKeys\",\n \"defaultSelectedKeys\",\n \"onSelectionChange\",\n \"disabledKeys\",\n \"getKey\",\n \"label\",\n \"aria-label\",\n \"aria-labelledby\",\n \"aria-describedby\",\n \"isDisabled\",\n \"onRemove\",\n ]);\n\n // Create a ref for the grid\n const [gridRef, setGridRef] = createSignal<HTMLDivElement | null>(null);\n\n // Default getKey function\n const getKey = (item: T): Key => {\n if (local.getKey) return local.getKey(item);\n if (item.id !== undefined) return item.id;\n if (item.key !== undefined) return item.key;\n return String(item);\n };\n\n const state = createListState({\n get items() {\n return local.items;\n },\n getKey,\n get selectionMode() {\n return local.selectionMode ?? \"none\";\n },\n get selectionBehavior() {\n return local.selectionBehavior ?? \"toggle\";\n },\n get selectedKeys() {\n return local.selectedKeys;\n },\n get defaultSelectedKeys() {\n return local.defaultSelectedKeys;\n },\n get onSelectionChange() {\n return local.onSelectionChange;\n },\n get disabledKeys() {\n return local.disabledKeys;\n },\n });\n\n // Create tag group accessibility props\n const tagGroupAria = createTagGroup(\n {\n get \"aria-label\"() {\n return local[\"aria-label\"] ?? (!local[\"aria-labelledby\"] ? local.label : undefined);\n },\n get \"aria-labelledby\"() {\n return local[\"aria-labelledby\"];\n },\n get \"aria-describedby\"() {\n return local[\"aria-describedby\"];\n },\n get isDisabled() {\n return local.isDisabled;\n },\n get onRemove() {\n return local.onRemove;\n },\n },\n state,\n gridRef,\n );\n\n const [isFocused, setIsFocused] = createSignal(false);\n\n const renderValues = createMemo<TagListRenderProps>(() => ({\n isEmpty: local.items.length === 0,\n isFocused: isFocused(),\n }));\n\n const renderProps = useRenderProps(\n {\n class: local.class,\n style: local.style,\n defaultClassName: \"solidaria-TagList\",\n },\n renderValues,\n );\n\n const contextValue: TagGroupContextValue = {\n state,\n get onRemove() {\n return local.onRemove;\n },\n get isDisabled() {\n return local.isDisabled;\n },\n };\n\n return (\n <TagGroupContext.Provider value={contextValue}>\n <TagListStateContext.Provider value={state}>\n <div\n ref={setGridRef}\n {...domProps}\n {...tagGroupAria.gridProps}\n class={renderProps.class()}\n style={renderProps.style()}\n onFocus={() => {\n setIsFocused(true);\n state.setFocused(true);\n }}\n onBlur={(e) => {\n const nextTarget = e.relatedTarget as Node | null;\n if (nextTarget && e.currentTarget.contains(nextTarget)) {\n return;\n }\n\n setIsFocused(false);\n state.setFocused(false);\n }}\n data-empty={dataAttr(local.items.length === 0)}\n data-focused={dataAttr(isFocused())}\n >\n <SharedElementTransition>\n <Show when={local.items.length > 0} fallback={local.renderEmptyState?.()}>\n <For each={local.items}>{(item) => props.children(item)}</For>\n </Show>\n </SharedElementTransition>\n </div>\n </TagListStateContext.Provider>\n </TagGroupContext.Provider>\n );\n}\n\n/**\n * A Tag is an individual item within a TagList.\n */\nexport function Tag(props: TagProps): JSX.Element {\n const [local, rest] = splitProps(props, [\n \"id\",\n \"class\",\n \"style\",\n \"slot\",\n \"isDisabled\",\n \"textValue\",\n \"onAction\",\n ]);\n\n const state = useContext(TagListStateContext);\n const groupContext = useContext(TagGroupContext);\n\n // Create a ref for the tag\n const [tagRef, setTagRef] = createSignal<HTMLDivElement | null>(null);\n\n // Create tag accessibility props\n const tagAria = createTag(\n {\n get key() {\n return local.id;\n },\n role: \"row\",\n get isDisabled() {\n return local.isDisabled || groupContext?.isDisabled;\n },\n get textValue() {\n return local.textValue;\n },\n },\n state!,\n tagRef,\n );\n\n const normalizedRemoveButtonProps = createMemo<Record<string, unknown>>(() => {\n const raw = tagAria.removeButtonProps;\n const rawHandler = typeof raw.onPress === \"function\" ? (raw.onPress as () => void) : undefined;\n return {\n ...raw,\n onPress: () => {\n if (!tagAria.isDisabled && groupContext?.onRemove) {\n groupContext.onRemove(new Set([local.id]));\n return;\n }\n rawHandler?.();\n },\n };\n });\n\n const renderValues = createMemo<TagRenderProps>(() => ({\n isSelected: tagAria.isSelected,\n isDisabled: tagAria.isDisabled,\n isFocused: tagAria.isFocused,\n isPressed: tagAria.isPressed,\n allowsRemoving: tagAria.allowsRemoving,\n selectionMode: state?.selectionMode() ?? \"none\",\n removeButtonProps: normalizedRemoveButtonProps(),\n }));\n\n const renderProps = useRenderProps(\n {\n get children() {\n return props.children;\n },\n class: local.class,\n style: local.style,\n defaultClassName: \"solidaria-Tag\",\n },\n renderValues,\n );\n\n const selectionIndicatorContext = createMemo<SelectionIndicatorContextValue>(() => ({\n isSelected: () => tagAria.isSelected,\n }));\n\n const domProps = createMemo(() => filterDOMProps(rest, { global: true }));\n\n return (\n <SelectionIndicatorContext.Provider value={selectionIndicatorContext()}>\n <TagContext.Provider\n value={{\n get removeButtonProps() {\n return normalizedRemoveButtonProps();\n },\n get allowsRemoving() {\n return tagAria.allowsRemoving;\n },\n }}\n >\n <div\n ref={setTagRef}\n {...domProps()}\n {...tagAria.rowProps}\n class={renderProps.class()}\n style={renderProps.style()}\n onClick={(event) => {\n const rowClick = tagAria.rowProps.onClick;\n if (typeof rowClick === \"function\") {\n (rowClick as JSX.EventHandler<HTMLDivElement, MouseEvent>)(event);\n }\n\n if (!tagAria.isDisabled && !(event.target as Element | null)?.closest(\"button\")) {\n local.onAction?.(local.id);\n }\n }}\n data-selected={dataAttr(tagAria.isSelected)}\n data-disabled={dataAttr(tagAria.isDisabled)}\n data-focused={dataAttr(tagAria.isFocused)}\n data-pressed={dataAttr(tagAria.isPressed)}\n data-allows-removing={dataAttr(tagAria.allowsRemoving)}\n >\n <div {...tagAria.gridCellProps} style={{ display: \"contents\" }}>\n {renderProps.renderChildren()}\n </div>\n </div>\n </TagContext.Provider>\n </SelectionIndicatorContext.Provider>\n );\n}\n\nexport interface TagRemoveButtonProps {\n /** The children of the button (usually an X icon). */\n children?: JSX.Element;\n /** The CSS className for the element. */\n class?: string;\n /** The inline style for the element. */\n style?: JSX.CSSProperties;\n /** Explicit button props from Tag render props. */\n buttonProps?: Record<string, unknown>;\n}\n\n/**\n * TagRemoveButton is the button used to remove a tag.\n * It should be placed inside a Tag component.\n */\nexport function TagRemoveButton(props: TagRemoveButtonProps): JSX.Element {\n const tagContext = useContext(TagContext);\n const getRemoveButtonProps = () => props.buttonProps ?? tagContext?.removeButtonProps ?? {};\n const getIsDisabled = () => Boolean(getRemoveButtonProps().isDisabled);\n const rawId = getRemoveButtonProps().id;\n const rawAriaLabel = getRemoveButtonProps()[\"aria-label\"];\n const rawAriaLabelledBy = getRemoveButtonProps()[\"aria-labelledby\"];\n const buttonId: string | undefined = typeof rawId === \"string\" ? rawId : undefined;\n const ariaLabel: string = typeof rawAriaLabel === \"string\" ? rawAriaLabel : \"Remove\";\n const ariaLabelledBy: string | undefined =\n typeof rawAriaLabelledBy === \"string\" ? rawAriaLabelledBy : undefined;\n\n const handleClick: JSX.EventHandler<HTMLButtonElement, MouseEvent> = (event) => {\n event.stopPropagation();\n const handler = getRemoveButtonProps().onPress;\n if (typeof handler === \"function\" && !getIsDisabled()) {\n (handler as () => void)();\n }\n };\n const stopRowPress: JSX.EventHandler<HTMLButtonElement, PointerEvent> = (event) => {\n event.stopPropagation();\n };\n\n return (\n <button\n type=\"button\"\n class={props.class ?? \"solidaria-TagRemoveButton\"}\n style={props.style}\n id={buttonId}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n disabled={getIsDisabled()}\n data-allows-removing={dataAttr(tagContext?.allowsRemoving ?? false)}\n onPointerDown={stopRowPress}\n onClick={handleClick}\n >\n {props.children ?? \"×\"}\n </button>\n );\n}\n\nexport type { Key, SelectionMode, SelectionBehavior };\n"],"mappings":"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"}
1
+ {"version":3,"file":"TagGroup.jsx","names":[],"sources":["../src/TagGroup.tsx"],"sourcesContent":["/**\n * TagGroup component for solidaria-components\n *\n * Pre-wired headless tag group component that combines aria hooks.\n * Port of react-aria-components/src/TagGroup.tsx\n *\n * A tag group is a focusable list of labels, categories, keywords, filters, or other items,\n * with support for keyboard navigation, selection, and removal.\n */\n\nimport {\n type JSX,\n createContext,\n createMemo,\n createSignal,\n splitProps,\n useContext,\n For,\n Show,\n} from \"solid-js\";\nimport {\n createTagGroup,\n createTag,\n useLocale,\n type AriaTagGroupProps,\n} from \"@proyecto-viviana/solidaria\";\nimport {\n createListState,\n type ListState,\n type Key,\n type SelectionMode,\n type SelectionBehavior,\n} from \"@proyecto-viviana/solid-stately\";\nimport {\n type RenderChildren,\n type ClassNameOrFunction,\n type StyleOrFunction,\n type SlotProps,\n type RefLike,\n useRenderProps,\n filterDOMProps,\n dataAttr,\n mergeRefs,\n} from \"./utils\";\nimport { SharedElementTransition } from \"./SharedElementTransition\";\nimport {\n SelectionIndicatorContext,\n type SelectionIndicatorContextValue,\n} from \"./SelectionIndicator\";\n\nexport interface TagGroupRenderProps {\n /** Whether the tag group is disabled. */\n isDisabled: boolean;\n /** Whether the tag list is empty. */\n isEmpty: boolean;\n}\n\nexport interface TagGroupProps\n extends\n Omit<AriaTagGroupProps, \"id\">,\n SlotProps,\n Omit<JSX.HTMLAttributes<HTMLDivElement>, \"class\" | \"style\" | \"children\"> {\n /** The children of the component. */\n children?: JSX.Element;\n /** The CSS className for the element. */\n class?: ClassNameOrFunction<TagGroupRenderProps>;\n /** The inline style for the element. */\n style?: StyleOrFunction<TagGroupRenderProps>;\n}\n\nexport interface TagListRenderProps {\n /** Whether the tag list is empty. */\n isEmpty: boolean;\n /** Whether the tag list is focused. */\n isFocused: boolean;\n}\n\nexport interface TagListProps<T>\n extends\n SlotProps,\n Omit<JSX.HTMLAttributes<HTMLDivElement>, \"class\" | \"style\" | \"children\" | \"onSelectionChange\"> {\n /** The items to display in the tag list. */\n items: T[];\n /** Function to render each item. */\n children: (item: T) => JSX.Element;\n /** The CSS className for the element. */\n class?: ClassNameOrFunction<TagListRenderProps>;\n /** The inline style for the element. */\n style?: StyleOrFunction<TagListRenderProps>;\n /** Content to render when the list is empty. */\n renderEmptyState?: () => JSX.Element;\n /** The selection mode for the tag list. */\n selectionMode?: SelectionMode;\n /** How selection behaves in the collection. */\n selectionBehavior?: SelectionBehavior;\n /** The currently selected keys (controlled). */\n selectedKeys?: Iterable<Key>;\n /** The default selected keys (uncontrolled). */\n defaultSelectedKeys?: Iterable<Key>;\n /** Handler called when selection changes. */\n onSelectionChange?: (keys: \"all\" | Set<Key>) => void;\n /** Keys that are disabled. */\n disabledKeys?: Iterable<Key>;\n /** Function to get a unique key from an item. */\n getKey?: (item: T) => Key;\n /** Accessibility label. */\n label?: string;\n /** Custom aria-label. */\n \"aria-label\"?: string;\n /** Reference to external label element. */\n \"aria-labelledby\"?: string;\n /** Reference to description element. */\n \"aria-describedby\"?: string;\n /** Whether the tag list is disabled. */\n isDisabled?: boolean;\n /** Handler called when tags are removed. */\n onRemove?: (keys: Set<Key>) => void;\n}\n\nexport interface TagRenderProps {\n /** Whether the tag is selected. */\n isSelected: boolean;\n /** Whether the tag is disabled. */\n isDisabled: boolean;\n /** Whether the tag is focused. */\n isFocused: boolean;\n /** Whether the tag is pressed. */\n isPressed: boolean;\n /** Whether the tag allows removal. */\n allowsRemoving: boolean;\n /** The selection mode. */\n selectionMode: SelectionMode;\n /** Props for the remove button when removal is allowed. */\n removeButtonProps: Record<string, unknown>;\n}\n\nexport interface TagProps extends SlotProps {\n /** A unique key for this tag. */\n id: Key;\n /** Whether the tag is disabled. */\n isDisabled?: boolean;\n /** A text value for accessibility. */\n textValue?: string;\n /** The children of the component. A function may be provided to receive render props. */\n children?: RenderChildren<TagRenderProps>;\n /** The CSS className for the element. */\n class?: ClassNameOrFunction<TagRenderProps>;\n /** The inline style for the element. */\n style?: StyleOrFunction<TagRenderProps>;\n /** A ref to the tag's DOM element (merged with the internal collection ref). */\n ref?: RefLike<HTMLDivElement>;\n /** Handler called when the tag is activated. */\n onAction?: (key: Key) => void;\n}\n\ninterface TagGroupContextValue {\n state: ListState;\n onRemove?: (keys: Set<Key>) => void;\n isDisabled?: boolean;\n}\n\ninterface TagContextValue {\n removeButtonProps: Record<string, unknown>;\n allowsRemoving: boolean;\n}\n\nexport const TagGroupContext = createContext<TagGroupContextValue | null>(null);\nexport const TagListStateContext = createContext<ListState | null>(null);\nexport const TagContext = createContext<TagContextValue | null>(null);\n\nexport function useTagGroupContext(): TagGroupContextValue | null {\n return useContext(TagGroupContext);\n}\n\n/**\n * A tag group is a focusable list of labels, categories, keywords, filters, or other items,\n * with support for keyboard navigation, selection, and removal.\n *\n * @example\n * ```tsx\n * <TagGroup label=\"Categories\" onRemove={(keys) => removeItems(keys)}>\n * <TagList items={items}>\n * {(item) => <Tag id={item.id}>{item.name}</Tag>}\n * </TagList>\n * </TagGroup>\n * ```\n */\nexport function TagGroup(props: TagGroupProps): JSX.Element {\n const [local, domProps] = splitProps(props, [\"class\", \"style\", \"slot\", \"children\"]);\n\n // We need TagList to provide the state, so TagGroup just provides context\n return (\n <div\n {...domProps}\n class={typeof local.class === \"string\" ? local.class : \"solidaria-TagGroup\"}\n style={typeof local.style === \"object\" ? local.style : undefined}\n slot={local.slot}\n >\n {props.children}\n </div>\n );\n}\n\n/**\n * TagList contains the list of tags within a TagGroup.\n */\nexport function TagList<T extends { id?: Key; key?: Key }>(props: TagListProps<T>): JSX.Element {\n const [local, domProps] = splitProps(props, [\n \"items\",\n \"class\",\n \"style\",\n \"slot\",\n \"renderEmptyState\",\n \"children\",\n \"selectionMode\",\n \"selectionBehavior\",\n \"selectedKeys\",\n \"defaultSelectedKeys\",\n \"onSelectionChange\",\n \"disabledKeys\",\n \"getKey\",\n \"label\",\n \"aria-label\",\n \"aria-labelledby\",\n \"aria-describedby\",\n \"isDisabled\",\n \"onRemove\",\n ]);\n\n // Create a ref for the grid\n const [gridRef, setGridRef] = createSignal<HTMLDivElement | null>(null);\n\n // Default getKey function\n const getKey = (item: T): Key => {\n if (local.getKey) return local.getKey(item);\n if (item.id !== undefined) return item.id;\n if (item.key !== undefined) return item.key;\n return String(item);\n };\n\n const state = createListState({\n get items() {\n return local.items;\n },\n getKey,\n get selectionMode() {\n return local.selectionMode ?? \"none\";\n },\n get selectionBehavior() {\n return local.selectionBehavior ?? \"toggle\";\n },\n get selectedKeys() {\n return local.selectedKeys;\n },\n get defaultSelectedKeys() {\n return local.defaultSelectedKeys;\n },\n get onSelectionChange() {\n return local.onSelectionChange;\n },\n get disabledKeys() {\n return local.disabledKeys;\n },\n });\n\n // The tag group navigates on the inline axis, so ArrowLeft/ArrowRight flip\n // under RTL. Thread the resolved layout direction into the hook (mirrors\n // ListBox, and useTagGroup passing `direction` to the ListKeyboardDelegate).\n const locale = useLocale();\n\n // Create tag group accessibility props\n const tagGroupAria = createTagGroup(\n {\n get \"aria-label\"() {\n return local[\"aria-label\"] ?? (!local[\"aria-labelledby\"] ? local.label : undefined);\n },\n get \"aria-labelledby\"() {\n return local[\"aria-labelledby\"];\n },\n get \"aria-describedby\"() {\n return local[\"aria-describedby\"];\n },\n get isDisabled() {\n return local.isDisabled;\n },\n get onRemove() {\n return local.onRemove;\n },\n get direction() {\n return locale().direction;\n },\n },\n state,\n gridRef,\n );\n\n const [isFocused, setIsFocused] = createSignal(false);\n\n const renderValues = createMemo<TagListRenderProps>(() => ({\n isEmpty: local.items.length === 0,\n isFocused: isFocused(),\n }));\n\n const renderProps = useRenderProps(\n {\n class: local.class,\n style: local.style,\n defaultClassName: \"solidaria-TagList\",\n },\n renderValues,\n );\n\n const contextValue: TagGroupContextValue = {\n state,\n get onRemove() {\n return local.onRemove;\n },\n get isDisabled() {\n return local.isDisabled;\n },\n };\n\n return (\n <TagGroupContext.Provider value={contextValue}>\n <TagListStateContext.Provider value={state}>\n <div\n ref={setGridRef}\n {...domProps}\n {...tagGroupAria.gridProps}\n class={renderProps.class()}\n style={renderProps.style()}\n // Track focus-within via the BUBBLING focusin/focusout pair (not the\n // non-bubbling focus/blur the hook's trampoline uses) so this render-prop\n // signal never clobbers `gridProps.onFocus` — the container focus\n // trampoline that marshals entry onto the first/last row.\n onFocusIn={() => {\n setIsFocused(true);\n }}\n onFocusOut={(e) => {\n const nextTarget = e.relatedTarget as Node | null;\n if (nextTarget && e.currentTarget.contains(nextTarget)) {\n return;\n }\n\n setIsFocused(false);\n }}\n data-empty={dataAttr(local.items.length === 0)}\n data-focused={dataAttr(isFocused())}\n >\n <SharedElementTransition>\n <Show when={local.items.length > 0} fallback={local.renderEmptyState?.()}>\n <For each={local.items}>{(item) => props.children(item)}</For>\n </Show>\n </SharedElementTransition>\n </div>\n </TagListStateContext.Provider>\n </TagGroupContext.Provider>\n );\n}\n\n/**\n * A Tag is an individual item within a TagList.\n */\nexport function Tag(props: TagProps): JSX.Element {\n const [local, rest] = splitProps(props, [\n \"id\",\n \"class\",\n \"style\",\n \"slot\",\n \"isDisabled\",\n \"textValue\",\n \"onAction\",\n \"ref\",\n ]);\n\n const state = useContext(TagListStateContext);\n const groupContext = useContext(TagGroupContext);\n\n // Create a ref for the tag\n const [tagRef, setTagRef] = createSignal<HTMLDivElement | null>(null);\n\n // Create tag accessibility props\n const tagAria = createTag(\n {\n get key() {\n return local.id;\n },\n role: \"row\",\n get isDisabled() {\n return local.isDisabled || groupContext?.isDisabled;\n },\n get textValue() {\n return local.textValue;\n },\n },\n state!,\n tagRef,\n );\n\n const normalizedRemoveButtonProps = createMemo<Record<string, unknown>>(() => {\n const raw = tagAria.removeButtonProps;\n const rawHandler = typeof raw.onPress === \"function\" ? (raw.onPress as () => void) : undefined;\n return {\n ...raw,\n onPress: () => {\n if (!tagAria.isDisabled && groupContext?.onRemove) {\n groupContext.onRemove(new Set([local.id]));\n return;\n }\n rawHandler?.();\n },\n };\n });\n\n const renderValues = createMemo<TagRenderProps>(() => ({\n isSelected: tagAria.isSelected,\n isDisabled: tagAria.isDisabled,\n isFocused: tagAria.isFocused,\n isPressed: tagAria.isPressed,\n allowsRemoving: tagAria.allowsRemoving,\n selectionMode: state?.selectionMode() ?? \"none\",\n removeButtonProps: normalizedRemoveButtonProps(),\n }));\n\n const renderProps = useRenderProps(\n {\n get children() {\n return props.children;\n },\n class: local.class,\n style: local.style,\n defaultClassName: \"solidaria-Tag\",\n },\n renderValues,\n );\n\n const selectionIndicatorContext = createMemo<SelectionIndicatorContextValue>(() => ({\n isSelected: () => tagAria.isSelected,\n }));\n\n const domProps = createMemo(() => filterDOMProps(rest, { global: true }));\n\n return (\n <SelectionIndicatorContext.Provider value={selectionIndicatorContext()}>\n <TagContext.Provider\n value={{\n get removeButtonProps() {\n return normalizedRemoveButtonProps();\n },\n get allowsRemoving() {\n return tagAria.allowsRemoving;\n },\n }}\n >\n <div\n ref={mergeRefs(setTagRef, local.ref)}\n {...domProps()}\n {...tagAria.rowProps}\n class={renderProps.class()}\n style={renderProps.style()}\n onClick={(event) => {\n const rowClick = tagAria.rowProps.onClick;\n if (typeof rowClick === \"function\") {\n (rowClick as JSX.EventHandler<HTMLDivElement, MouseEvent>)(event);\n }\n\n if (!tagAria.isDisabled && !(event.target as Element | null)?.closest(\"button\")) {\n local.onAction?.(local.id);\n }\n }}\n data-selected={dataAttr(tagAria.isSelected)}\n data-disabled={dataAttr(tagAria.isDisabled)}\n data-focused={dataAttr(tagAria.isFocused)}\n data-pressed={dataAttr(tagAria.isPressed)}\n data-allows-removing={dataAttr(tagAria.allowsRemoving)}\n >\n <div {...tagAria.gridCellProps} style={{ display: \"contents\" }}>\n {renderProps.renderChildren()}\n </div>\n </div>\n </TagContext.Provider>\n </SelectionIndicatorContext.Provider>\n );\n}\n\nexport interface TagRemoveButtonProps {\n /** The children of the button (usually an X icon). */\n children?: JSX.Element;\n /** The CSS className for the element. */\n class?: string;\n /** The inline style for the element. */\n style?: JSX.CSSProperties;\n /** Explicit button props from Tag render props. */\n buttonProps?: Record<string, unknown>;\n}\n\n/**\n * TagRemoveButton is the button used to remove a tag.\n * It should be placed inside a Tag component.\n */\nexport function TagRemoveButton(props: TagRemoveButtonProps): JSX.Element {\n const tagContext = useContext(TagContext);\n const getRemoveButtonProps = () => props.buttonProps ?? tagContext?.removeButtonProps ?? {};\n const getIsDisabled = () => Boolean(getRemoveButtonProps().isDisabled);\n const rawId = getRemoveButtonProps().id;\n const rawAriaLabel = getRemoveButtonProps()[\"aria-label\"];\n const rawAriaLabelledBy = getRemoveButtonProps()[\"aria-labelledby\"];\n const buttonId: string | undefined = typeof rawId === \"string\" ? rawId : undefined;\n const ariaLabel: string = typeof rawAriaLabel === \"string\" ? rawAriaLabel : \"Remove\";\n const ariaLabelledBy: string | undefined =\n typeof rawAriaLabelledBy === \"string\" ? rawAriaLabelledBy : undefined;\n\n const handleClick: JSX.EventHandler<HTMLButtonElement, MouseEvent> = (event) => {\n event.stopPropagation();\n const handler = getRemoveButtonProps().onPress;\n if (typeof handler === \"function\" && !getIsDisabled()) {\n (handler as () => void)();\n }\n };\n const stopRowPress: JSX.EventHandler<HTMLButtonElement, PointerEvent> = (event) => {\n event.stopPropagation();\n };\n\n return (\n <button\n type=\"button\"\n class={props.class ?? \"solidaria-TagRemoveButton\"}\n style={props.style}\n id={buttonId}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n disabled={getIsDisabled()}\n data-allows-removing={dataAttr(tagContext?.allowsRemoving ?? false)}\n onPointerDown={stopRowPress}\n onClick={handleClick}\n >\n {props.children ?? \"×\"}\n </button>\n );\n}\n\nexport type { Key, SelectionMode, SelectionBehavior };\n"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../src/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,GAAG,EAA6B,MAAM,UAAU,CAAC;AAE/D,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,SAAS,EAAmC,MAAM,SAAS,CAAC;AAE7F,MAAM,WAAW,SAAU,SAAQ,GAAG,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,SAAS;IAC3E,qDAAqD;IACrD,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;;;;GAMG;AACH,eAAO,MAAM,WAAW,kEAA0D,CAAC;AAEnF;;;;;GAKG;AACH,wBAAgB,IAAI,CAAC,KAAK,EAAE,SAAS,GAAG,GAAG,CAAC,OAAO,CAclD"}
1
+ {"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../src/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,GAAG,EAA6B,MAAM,UAAU,CAAC;AAE/D,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,SAAS,EAAmC,MAAM,SAAS,CAAC;AAE7F,MAAM,WAAW,SAAU,SAAQ,GAAG,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,SAAS;IAC3E,qDAAqD;IACrD,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;;;;GAMG;AACH,eAAO,MAAM,WAAW,kEAA0D,CAAC;AAEnF;;;;;GAKG;AACH,wBAAgB,IAAI,CAAC,KAAK,EAAE,SAAS,GAAG,GAAG,CAAC,OAAO,CAelD"}
package/dist/Text.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import { filterDOMProps, useContextProps } from "./utils.js";
2
- import { Dynamic, createComponent, mergeProps } from "solid-js/web";
2
+ import { ElementTag } from "./ElementTag.js";
3
+ import { createComponent, mergeProps } from "solid-js/web";
3
4
  import { createContext, splitProps } from "solid-js";
4
5
  //#region src/Text.tsx
5
6
  /**
@@ -25,16 +26,16 @@ function Text(props) {
25
26
  "slot",
26
27
  "ref"
27
28
  ]);
28
- return createComponent(Dynamic, mergeProps({
29
- get component() {
29
+ return createComponent(ElementTag, mergeProps({ get ["class"]() {
30
+ return local.class ?? "solidaria-Text";
31
+ } }, () => filterDOMProps(domProps, { global: true }), {
32
+ get tag() {
30
33
  return local.elementType ?? "span";
31
34
  },
32
- get ["class"]() {
33
- return local.class ?? "solidaria-Text";
35
+ get children() {
36
+ return local.children;
34
37
  }
35
- }, () => filterDOMProps(domProps, { global: true }), { get children() {
36
- return local.children;
37
- } }));
38
+ }));
38
39
  }
39
40
  //#endregion
40
41
  export { Text, TextContext };
package/dist/Text.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Text.js","names":["JSX","createContext","splitProps","Dynamic","ContextValue","SlotProps","useContextProps","filterDOMProps","TextProps","HTMLAttributes","HTMLElement","elementType","TextContext","Text","props","Element","merged","undefined","local","domProps","_$createComponent","_$mergeProps","component","class","global","children"],"sources":["../src/Text.tsx"],"sourcesContent":["import { type JSX, createContext, splitProps } from \"solid-js\";\nimport { Dynamic } from \"solid-js/web\";\nimport { type ContextValue, type SlotProps, useContextProps, filterDOMProps } from \"./utils\";\n\nexport interface TextProps extends JSX.HTMLAttributes<HTMLElement>, SlotProps {\n /** The element type to render as. @default 'span' */\n elementType?: string;\n}\n\n/**\n * Slotted context for `Text`. A field provides description / errorMessage props\n * (each carrying the `id` its `aria-describedby` references) under named slots,\n * so a `<Text slot=\"description\">` child picks up the right `id` without the field\n * threading it manually. Mirrors react-aria-components' `TextContext` (default\n * `{}` so an unprovided `Text` merges against an empty context and renders as-is).\n */\nexport const TextContext = createContext<ContextValue<TextProps, HTMLElement>>({});\n\n/**\n * A piece of text, typically a label, description, or error message inside a\n * field. Port of react-aria-components' `Text`: it consumes its slot from\n * `TextContext` (via `useContextProps`) so a field can supply the `id` and other\n * props for the matching slot, then renders them onto the element.\n */\nexport function Text(props: TextProps): JSX.Element {\n const [merged] = useContextProps(props, undefined, TextContext);\n // `slot` stays a logical prop (not a DOM attribute) and `ref`/`class`/`children`\n // are rendered explicitly; everything else (notably the slotted `id`) is spread.\n const [local, domProps] = splitProps(merged, [\"elementType\", \"class\", \"children\", \"slot\", \"ref\"]);\n return (\n <Dynamic\n component={local.elementType ?? \"span\"}\n class={local.class ?? \"solidaria-Text\"}\n {...filterDOMProps(domProps, { global: true })}\n >\n {local.children}\n </Dynamic>\n );\n}\n"],"mappings":";;;;;;;;;;;AAgBA,MAAaY,cAAcX,cAAoD,CAAC,CAAC;;;;;;;AAQjF,SAAgBY,KAAKC,OAA+B;CAClD,MAAM,CAACE,UAAUV,gBAAgBQ,OAAOG,KAAAA,GAAWL,WAAW;CAG9D,MAAM,CAACM,OAAOC,YAAYjB,WAAWc,QAAQ;EAAC;EAAe;EAAS;EAAY;EAAQ;CAAK,CAAC;CAChG,OAAAI,gBACGjB,SAAOkB,WAAA;EAAA,IACNC,YAAS;GAAA,OAAEJ,MAAMP,eAAe;EAAM;EAAA,KAAA,WAAA;GAAA,OAC/BO,MAAMK,SAAS;EAAgB;CAAA,SAClChB,eAAeY,UAAU,EAAEK,QAAQ,KAAK,CAAC,GAAC,EAAA,IAAAC,WAAA;EAAA,OAE7CP,MAAMO;CAAQ,EAAA,CAAA,CAAA;AAGrB"}
1
+ {"version":3,"file":"Text.js","names":["JSX","createContext","splitProps","ElementTag","ContextValue","SlotProps","useContextProps","filterDOMProps","TextProps","HTMLAttributes","HTMLElement","elementType","TextContext","Text","props","Element","merged","undefined","local","domProps","_$createComponent","_$mergeProps","class","global","tag","children"],"sources":["../src/Text.tsx"],"sourcesContent":["import { type JSX, createContext, splitProps } from \"solid-js\";\nimport { ElementTag } from \"./ElementTag\";\nimport { type ContextValue, type SlotProps, useContextProps, filterDOMProps } from \"./utils\";\n\nexport interface TextProps extends JSX.HTMLAttributes<HTMLElement>, SlotProps {\n /** The element type to render as. @default 'span' */\n elementType?: string;\n}\n\n/**\n * Slotted context for `Text`. A field provides description / errorMessage props\n * (each carrying the `id` its `aria-describedby` references) under named slots,\n * so a `<Text slot=\"description\">` child picks up the right `id` without the field\n * threading it manually. Mirrors react-aria-components' `TextContext` (default\n * `{}` so an unprovided `Text` merges against an empty context and renders as-is).\n */\nexport const TextContext = createContext<ContextValue<TextProps, HTMLElement>>({});\n\n/**\n * A piece of text, typically a label, description, or error message inside a\n * field. Port of react-aria-components' `Text`: it consumes its slot from\n * `TextContext` (via `useContextProps`) so a field can supply the `id` and other\n * props for the matching slot, then renders them onto the element.\n */\nexport function Text(props: TextProps): JSX.Element {\n const [merged] = useContextProps(props, undefined, TextContext);\n // `slot` stays a logical prop (not a DOM attribute) and `ref`/`class`/`children`\n // are rendered explicitly; everything else (notably the slotted `id`) is spread.\n const [local, domProps] = splitProps(merged, [\"elementType\", \"class\", \"children\", \"slot\", \"ref\"]);\n return (\n <ElementTag\n class={local.class ?? \"solidaria-Text\"}\n {...filterDOMProps(domProps, { global: true })}\n // last, so a stray `tag` in the spread can never redirect the element\n tag={local.elementType ?? \"span\"}\n >\n {local.children}\n </ElementTag>\n );\n}\n"],"mappings":";;;;;;;;;;;;AAgBA,MAAaY,cAAcX,cAAoD,CAAC,CAAC;;;;;;;AAQjF,SAAgBY,KAAKC,OAA+B;CAClD,MAAM,CAACE,UAAUV,gBAAgBQ,OAAOG,KAAAA,GAAWL,WAAW;CAG9D,MAAM,CAACM,OAAOC,YAAYjB,WAAWc,QAAQ;EAAC;EAAe;EAAS;EAAY;EAAQ;CAAK,CAAC;CAChG,OAAAI,gBACGjB,YAAUkB,WAAA,EAAA,KAAA,WAAA;EAAA,OACFH,MAAMI,SAAS;CAAgB,EAAA,SAClCf,eAAeY,UAAU,EAAEI,QAAQ,KAAK,CAAC,GAAC;EAAA,IAE9CC,MAAG;GAAA,OAAEN,MAAMP,eAAe;EAAM;EAAA,IAAAc,WAAA;GAAA,OAE/BP,MAAMO;EAAQ;CAAA,CAAA,CAAA;AAGrB"}
package/dist/Text.jsx CHANGED
@@ -1,6 +1,6 @@
1
1
  import { filterDOMProps, useContextProps } from "./utils.jsx";
2
+ import { ElementTag } from "./ElementTag.jsx";
2
3
  import { createContext, splitProps } from "solid-js";
3
- import { Dynamic } from "solid-js/web";
4
4
  //#region src/Text.tsx
5
5
  /**
6
6
  * Slotted context for `Text`. A field provides description / errorMessage props
@@ -25,9 +25,9 @@ function Text(props) {
25
25
  "slot",
26
26
  "ref"
27
27
  ]);
28
- return <Dynamic component={local.elementType ?? "span"} class={local.class ?? "solidaria-Text"} {...filterDOMProps(domProps, { global: true })}>
28
+ return <ElementTag class={local.class ?? "solidaria-Text"} {...filterDOMProps(domProps, { global: true })} tag={local.elementType ?? "span"}>
29
29
  {local.children}
30
- </Dynamic>;
30
+ </ElementTag>;
31
31
  }
32
32
  //#endregion
33
33
  export { Text, TextContext };
package/dist/Text.jsx.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Text.jsx","names":[],"sources":["../src/Text.tsx"],"sourcesContent":["import { type JSX, createContext, splitProps } from \"solid-js\";\nimport { Dynamic } from \"solid-js/web\";\nimport { type ContextValue, type SlotProps, useContextProps, filterDOMProps } from \"./utils\";\n\nexport interface TextProps extends JSX.HTMLAttributes<HTMLElement>, SlotProps {\n /** The element type to render as. @default 'span' */\n elementType?: string;\n}\n\n/**\n * Slotted context for `Text`. A field provides description / errorMessage props\n * (each carrying the `id` its `aria-describedby` references) under named slots,\n * so a `<Text slot=\"description\">` child picks up the right `id` without the field\n * threading it manually. Mirrors react-aria-components' `TextContext` (default\n * `{}` so an unprovided `Text` merges against an empty context and renders as-is).\n */\nexport const TextContext = createContext<ContextValue<TextProps, HTMLElement>>({});\n\n/**\n * A piece of text, typically a label, description, or error message inside a\n * field. Port of react-aria-components' `Text`: it consumes its slot from\n * `TextContext` (via `useContextProps`) so a field can supply the `id` and other\n * props for the matching slot, then renders them onto the element.\n */\nexport function Text(props: TextProps): JSX.Element {\n const [merged] = useContextProps(props, undefined, TextContext);\n // `slot` stays a logical prop (not a DOM attribute) and `ref`/`class`/`children`\n // are rendered explicitly; everything else (notably the slotted `id`) is spread.\n const [local, domProps] = splitProps(merged, [\"elementType\", \"class\", \"children\", \"slot\", \"ref\"]);\n return (\n <Dynamic\n component={local.elementType ?? \"span\"}\n class={local.class ?? \"solidaria-Text\"}\n {...filterDOMProps(domProps, { global: true })}\n >\n {local.children}\n </Dynamic>\n );\n}\n"],"mappings":";;;;;;;;;;;AAgBA,MAAa,cAAc,cAAoD,CAAC,CAAC;;;;;;;AAQjF,SAAgB,KAAK,OAA+B;CAClD,MAAM,CAAC,UAAU,gBAAgB,OAAO,KAAA,GAAW,WAAW;CAG9D,MAAM,CAAC,OAAO,YAAY,WAAW,QAAQ;EAAC;EAAe;EAAS;EAAY;EAAQ;CAAK,CAAC;CAChG,OACE,CAAC,QACC,WAAW,MAAM,eAAe,QAChC,OAAO,MAAM,SAAS,sBAClB,eAAe,UAAU,EAAE,QAAQ,KAAK,CAAC,GAC9C;OACE,MAAM,SAAS;IAClB,EAAE;AAEN"}
1
+ {"version":3,"file":"Text.jsx","names":[],"sources":["../src/Text.tsx"],"sourcesContent":["import { type JSX, createContext, splitProps } from \"solid-js\";\nimport { ElementTag } from \"./ElementTag\";\nimport { type ContextValue, type SlotProps, useContextProps, filterDOMProps } from \"./utils\";\n\nexport interface TextProps extends JSX.HTMLAttributes<HTMLElement>, SlotProps {\n /** The element type to render as. @default 'span' */\n elementType?: string;\n}\n\n/**\n * Slotted context for `Text`. A field provides description / errorMessage props\n * (each carrying the `id` its `aria-describedby` references) under named slots,\n * so a `<Text slot=\"description\">` child picks up the right `id` without the field\n * threading it manually. Mirrors react-aria-components' `TextContext` (default\n * `{}` so an unprovided `Text` merges against an empty context and renders as-is).\n */\nexport const TextContext = createContext<ContextValue<TextProps, HTMLElement>>({});\n\n/**\n * A piece of text, typically a label, description, or error message inside a\n * field. Port of react-aria-components' `Text`: it consumes its slot from\n * `TextContext` (via `useContextProps`) so a field can supply the `id` and other\n * props for the matching slot, then renders them onto the element.\n */\nexport function Text(props: TextProps): JSX.Element {\n const [merged] = useContextProps(props, undefined, TextContext);\n // `slot` stays a logical prop (not a DOM attribute) and `ref`/`class`/`children`\n // are rendered explicitly; everything else (notably the slotted `id`) is spread.\n const [local, domProps] = splitProps(merged, [\"elementType\", \"class\", \"children\", \"slot\", \"ref\"]);\n return (\n <ElementTag\n class={local.class ?? \"solidaria-Text\"}\n {...filterDOMProps(domProps, { global: true })}\n // last, so a stray `tag` in the spread can never redirect the element\n tag={local.elementType ?? \"span\"}\n >\n {local.children}\n </ElementTag>\n );\n}\n"],"mappings":";;;;;;;;;;;AAgBA,MAAa,cAAc,cAAoD,CAAC,CAAC;;;;;;;AAQjF,SAAgB,KAAK,OAA+B;CAClD,MAAM,CAAC,UAAU,gBAAgB,OAAO,KAAA,GAAW,WAAW;CAG9D,MAAM,CAAC,OAAO,YAAY,WAAW,QAAQ;EAAC;EAAe;EAAS;EAAY;EAAQ;CAAK,CAAC;CAChG,OACE,CAAC,WACC,OAAO,MAAM,SAAS,sBAClB,eAAe,UAAU,EAAE,QAAQ,KAAK,CAAC,GAE7C,KAAK,MAAM,eAAe,QAC3B;OACE,MAAM,SAAS;IAClB,EAAE;AAEN"}
package/dist/TextField.js CHANGED
@@ -324,7 +324,10 @@ function TextField(props) {
324
324
  }
325
325
  };
326
326
  const domProps = createMemo(() => {
327
- const filtered = filterDOMProps(ariaProps, { global: true });
327
+ const filtered = filterDOMProps(ariaProps, {
328
+ global: true,
329
+ events: false
330
+ });
328
331
  delete filtered.id;
329
332
  return filtered;
330
333
  });
@@ -1 +1 @@
1
- {"version":3,"file":"TextField.js","names":["JSX","Context","createContext","useContext","createMemo","createSignal","createEffect","onCleanup","onMount","splitProps","untrack","createTextField","createFocusRing","createHover","mergeProps","AriaTextFieldProps","createTextFieldState","VALID_VALIDITY_STATE","ValidationResult","FormContext","FormProps","FieldErrorContext","FieldErrorContextValue","RenderChildren","ClassNameOrFunction","StyleOrFunction","SlotProps","useRenderProps","filterDOMProps","Provider","TextContext","TextFieldRenderProps","isDisabled","isInvalid","isReadOnly","isRequired","isHovered","isFocused","isFocusVisible","TextFieldProps","Omit","children","class","style","render","props","HTMLAttributes","HTMLDivElement","renderProps","Element","TextFieldContextValue","labelProps","LabelHTMLAttributes","HTMLLabelElement","inputProps","InputHTMLAttributes","HTMLInputElement","descriptionProps","HTMLElement","errorMessageProps","slots","Record","inputId","setInputId","id","TextFieldContext","LabelContext","InputContext","TextAreaContext","FieldInputContext","withFormValidationBehavior","formContext","validationBehavior","Proxy","get","target","property","receiver","localValue","Reflect","undefined","has","ownKeys","keys","Set","add","Array","from","getOwnPropertyDescriptor","descriptor","enumerable","configurable","LabelProps","Label","context","localDOMProps","result","propsRecord","key","mergedProps","localProps","ref","_ref","contextLabelProps","merged","for","_el$","_$getNextElement","_tmpl$","_$spread","_$mergeProps","_$insert","_$runHydrationEvents","InputProps","eventWithCurrentTarget","event","Event","element","T","value","bind","clearDelegatedTextEntryHandlers","delegatedElement","$$input","$$change","Input","inputElement","contextInputProps","inputHandler","handler","onInput","EventHandler","InputEvent","currentTarget","stopPropagation","changeHandler","onChange","addEventListener","removeEventListener","_el$2","_tmpl$2","_$use","TextAreaProps","TextareaHTMLAttributes","HTMLTextAreaElement","TextArea","textAreaElement","type","_type","_el$3","_tmpl$3","TextField","contextProps","contextSlotProps","slot","contextBaseProps","_labelProps","_inputProps","_descriptionProps","_errorMessageProps","_isInvalid","_slots","_setInputId","rest","baseProps","local","ariaProps","state","defaultValue","inputAriaProps","clean","startsWith","textFieldAria","setValue","focusProps","hoverProps","inputIdOverride","setInputIdOverride","renderValues","defaultClassName","childRenderValues","domProps","filtered","global","cleanHoverProps","fieldValidation","errorMessage","validationErrors","validationDetails","customError","valid","fieldErrorContext","validation","contextValue","FieldChildren","textSlots","description","FieldChildrenSlotted","_$createComponent","values","rootProps","customRootProps","_$memo","_el$4","_tmpl$4"],"sources":["../src/TextField.tsx"],"sourcesContent":["/**\n * TextField component for solidaria-components\n *\n * A pre-wired headless text field that combines state + aria hooks.\n * Port of react-aria-components/src/TextField.tsx\n */\n\nimport {\n type JSX,\n type Context,\n createContext,\n useContext,\n createMemo,\n createSignal,\n createEffect,\n onCleanup,\n onMount,\n splitProps,\n untrack,\n} from \"solid-js\";\nimport {\n createTextField,\n createFocusRing,\n createHover,\n mergeProps,\n type AriaTextFieldProps,\n} from \"@proyecto-viviana/solidaria\";\nimport {\n createTextFieldState,\n VALID_VALIDITY_STATE,\n type ValidationResult,\n} from \"@proyecto-viviana/solid-stately\";\nimport { FormContext, type FormProps } from \"./Form\";\nimport { FieldErrorContext, type FieldErrorContextValue } from \"./FieldError\";\nimport {\n type RenderChildren,\n type ClassNameOrFunction,\n type StyleOrFunction,\n type SlotProps,\n useRenderProps,\n filterDOMProps,\n Provider,\n} from \"./utils\";\nimport { TextContext } from \"./Text\";\n\nexport interface TextFieldRenderProps {\n /** Whether the text field is disabled. */\n isDisabled: boolean;\n /** Whether the value is invalid. */\n isInvalid: boolean;\n /** Whether the text field is read only. */\n isReadOnly: boolean;\n /** Whether the text field is required. */\n isRequired: boolean;\n /** Whether the text field is currently hovered with a mouse. */\n isHovered: boolean;\n /** Whether the text field is focused, either via a mouse or keyboard. */\n isFocused: boolean;\n /** Whether the text field is keyboard focused. */\n isFocusVisible: boolean;\n}\n\nexport interface TextFieldProps extends Omit<AriaTextFieldProps, \"children\">, SlotProps {\n /** The children of the component. A function may be provided to receive render props. */\n children?: RenderChildren<TextFieldRenderProps>;\n /** The CSS className for the element. */\n class?: ClassNameOrFunction<TextFieldRenderProps>;\n /** The inline style for the element. */\n style?: StyleOrFunction<TextFieldRenderProps>;\n /** Custom renderer for the outer text field element. */\n render?: (\n props: JSX.HTMLAttributes<HTMLDivElement>,\n renderProps: TextFieldRenderProps,\n ) => JSX.Element;\n}\n\nexport interface TextFieldContextValue {\n labelProps?: JSX.LabelHTMLAttributes<HTMLLabelElement>;\n inputProps?: JSX.InputHTMLAttributes<HTMLInputElement>;\n descriptionProps?: JSX.HTMLAttributes<HTMLElement>;\n errorMessageProps?: JSX.HTMLAttributes<HTMLElement>;\n isInvalid?: boolean;\n slots?: Record<string, TextFieldProps>;\n inputId?: string;\n setInputId?: (id: string | undefined) => void;\n}\n\nexport const TextFieldContext = createContext<TextFieldContextValue | null>(null);\nexport const LabelContext = TextFieldContext;\nexport const InputContext = TextFieldContext;\nexport const TextAreaContext = TextFieldContext;\nexport const FieldInputContext = TextFieldContext;\n\nfunction withFormValidationBehavior(\n props: TextFieldProps,\n formContext: FormProps | null,\n): TextFieldProps {\n if (!formContext?.validationBehavior) {\n return props;\n }\n\n return new Proxy(props, {\n get(target, property, receiver) {\n const localValue = Reflect.get(target, property, receiver);\n if (property === \"validationBehavior\" && localValue === undefined) {\n return formContext.validationBehavior;\n }\n\n return localValue;\n },\n has(target, property) {\n return (\n Reflect.has(target, property) ||\n (property === \"validationBehavior\" && formContext.validationBehavior !== undefined)\n );\n },\n ownKeys(target) {\n const keys = new Set(Reflect.ownKeys(target));\n if (formContext.validationBehavior !== undefined) {\n keys.add(\"validationBehavior\");\n }\n\n return Array.from(keys);\n },\n getOwnPropertyDescriptor(target, property) {\n const descriptor = Reflect.getOwnPropertyDescriptor(target, property);\n if (descriptor) {\n return descriptor;\n }\n\n if (property === \"validationBehavior\" && formContext.validationBehavior !== undefined) {\n return {\n enumerable: true,\n configurable: true,\n get: () => formContext.validationBehavior,\n };\n }\n\n return undefined;\n },\n });\n}\n\nexport interface LabelProps extends JSX.LabelHTMLAttributes<HTMLLabelElement> {\n children?: JSX.Element;\n}\n\n/**\n * A label element that automatically wires up to the parent TextField context.\n * This enables the proper htmlFor/id relationship between label and input.\n */\nexport function Label(props: LabelProps): JSX.Element {\n const context = useContext(TextFieldContext);\n\n const localDOMProps = () => {\n const result: Record<string, unknown> = {};\n const propsRecord = props as Record<string, unknown>;\n\n for (const key in propsRecord) {\n if (key !== \"children\") {\n result[key] = propsRecord[key];\n }\n }\n return result;\n };\n\n // Merge context labelProps with local props (local props take precedence)\n const mergedProps = () => {\n const localProps = localDOMProps();\n if (context) {\n const { ref: _ref, ...contextLabelProps } = (context.labelProps ?? {}) as Record<\n string,\n unknown\n >;\n const merged = {\n ...contextLabelProps,\n ...(context.inputId ? { for: context.inputId } : {}),\n ...localProps,\n } as Record<string, unknown>;\n if (merged.class == null) {\n merged.class = \"solidaria-Label\";\n }\n return merged;\n }\n return localProps.class == null ? { ...localProps, class: \"solidaria-Label\" } : localProps;\n };\n\n return <label {...mergedProps()}>{props.children}</label>;\n}\n\nexport interface InputProps extends Omit<JSX.InputHTMLAttributes<HTMLInputElement>, \"children\"> {}\n\nfunction eventWithCurrentTarget<T extends HTMLElement>(event: Event, element: T): Event {\n return new Proxy(event, {\n get(target, property, receiver) {\n if (property === \"target\" || property === \"currentTarget\") {\n return element;\n }\n\n const value = Reflect.get(target, property, receiver);\n return typeof value === \"function\" ? value.bind(target) : value;\n },\n });\n}\n\nfunction clearDelegatedTextEntryHandlers(element: HTMLElement) {\n const delegatedElement = element as HTMLElement & {\n $$input?: unknown;\n $$change?: unknown;\n };\n delete delegatedElement.$$input;\n delete delegatedElement.$$change;\n}\n\n/**\n * An input element that automatically wires up to the parent TextField context.\n * This enables focus tracking, validation, and accessibility props to flow from\n * the TextField to the actual input element.\n */\nexport function Input(props: InputProps): JSX.Element {\n const context = useContext(TextFieldContext);\n let inputElement: HTMLInputElement | undefined;\n\n createEffect(() => {\n context?.setInputId?.(props.id);\n });\n\n onCleanup(() => {\n context?.setInputId?.(undefined);\n });\n\n // Merge context inputProps with local props (local props take precedence)\n const mergedProps = () => {\n if (context) {\n // Remove ref from context props to avoid conflicts\n const { ref: _ref, ...contextInputProps } = (context.inputProps ?? {}) as Record<\n string,\n unknown\n >;\n const merged = { ...contextInputProps, ...props } as Record<string, unknown>;\n if (merged.class == null) {\n merged.class = \"solidaria-Input\";\n }\n return merged;\n }\n return props.class == null ? { ...props, class: \"solidaria-Input\" } : props;\n };\n\n onMount(() => {\n const element = inputElement;\n if (!element) {\n return;\n }\n\n const inputHandler = (event: Event) => {\n const handler = mergedProps().onInput as\n | JSX.EventHandler<HTMLInputElement, InputEvent>\n | undefined;\n handler?.(\n eventWithCurrentTarget(event, element) as InputEvent & {\n currentTarget: HTMLInputElement;\n target: Element;\n },\n );\n clearDelegatedTextEntryHandlers(element);\n event.stopPropagation();\n };\n const changeHandler = (event: Event) => {\n const handler = mergedProps().onChange as\n | JSX.EventHandler<HTMLInputElement, Event>\n | undefined;\n handler?.(\n eventWithCurrentTarget(event, element) as Event & {\n currentTarget: HTMLInputElement;\n target: Element;\n },\n );\n clearDelegatedTextEntryHandlers(element);\n event.stopPropagation();\n };\n\n element.addEventListener(\"input\", inputHandler);\n element.addEventListener(\"change\", changeHandler);\n clearDelegatedTextEntryHandlers(element);\n onCleanup(() => {\n element.removeEventListener(\"input\", inputHandler);\n element.removeEventListener(\"change\", changeHandler);\n });\n });\n\n return (\n <input\n {...mergedProps()}\n ref={(element) => {\n inputElement = element;\n const ref = props.ref;\n if (typeof ref === \"function\") {\n ref(element);\n }\n }}\n />\n );\n}\n\nexport interface TextAreaProps extends Omit<\n JSX.TextareaHTMLAttributes<HTMLTextAreaElement>,\n \"children\"\n> {}\n\n/**\n * A textarea element that automatically wires up to the parent TextField context.\n * This enables focus tracking, validation, and accessibility props to flow from\n * the TextField to the actual textarea element.\n */\nexport function TextArea(props: TextAreaProps): JSX.Element {\n const context = useContext(TextFieldContext);\n let textAreaElement: HTMLTextAreaElement | undefined;\n\n createEffect(() => {\n context?.setInputId?.(props.id);\n });\n\n onCleanup(() => {\n context?.setInputId?.(undefined);\n });\n\n // Merge context inputProps with local props (local props take precedence)\n // Note: TextArea uses inputProps from context since it's an input variant\n const mergedProps = () => {\n if (context) {\n const {\n ref: _ref,\n type: _type,\n ...contextInputProps\n } = (context.inputProps ?? {}) as Record<string, unknown>;\n const merged = { ...contextInputProps, ...props } as Record<string, unknown>;\n if (merged.class == null) {\n merged.class = \"solidaria-TextArea\";\n }\n return merged;\n }\n return props.class == null ? { ...props, class: \"solidaria-TextArea\" } : props;\n };\n\n onMount(() => {\n const element = textAreaElement;\n if (!element) {\n return;\n }\n\n const inputHandler = (event: Event) => {\n const handler = mergedProps().onInput as\n | JSX.EventHandler<HTMLTextAreaElement, InputEvent>\n | undefined;\n handler?.(\n eventWithCurrentTarget(event, element) as InputEvent & {\n currentTarget: HTMLTextAreaElement;\n target: Element;\n },\n );\n clearDelegatedTextEntryHandlers(element);\n event.stopPropagation();\n };\n const changeHandler = (event: Event) => {\n const handler = mergedProps().onChange as\n | JSX.EventHandler<HTMLTextAreaElement, Event>\n | undefined;\n handler?.(\n eventWithCurrentTarget(event, element) as Event & {\n currentTarget: HTMLTextAreaElement;\n target: Element;\n },\n );\n clearDelegatedTextEntryHandlers(element);\n event.stopPropagation();\n };\n\n element.addEventListener(\"input\", inputHandler);\n element.addEventListener(\"change\", changeHandler);\n clearDelegatedTextEntryHandlers(element);\n onCleanup(() => {\n element.removeEventListener(\"input\", inputHandler);\n element.removeEventListener(\"change\", changeHandler);\n });\n });\n\n return (\n <textarea\n {...mergedProps()}\n ref={(element) => {\n textAreaElement = element;\n const ref = props.ref;\n if (typeof ref === \"function\") {\n ref(element);\n }\n }}\n />\n );\n}\n\n/**\n * A text field allows a user to enter a plain text value with a keyboard.\n *\n * This is a headless component that provides accessibility and state management.\n * Style it using the render props pattern or data attributes.\n *\n * @example\n * ```tsx\n * <TextField>\n * {({ isInvalid }) => (\n * <>\n * <Label>Email</Label>\n * <Input class={isInvalid ? 'border-red-500' : 'border-gray-300'} />\n * </>\n * )}\n * </TextField>\n * ```\n */\nexport function TextField(props: TextFieldProps): JSX.Element {\n const formContext = useContext(FormContext);\n const contextProps = useContext(TextFieldContext);\n const contextSlotProps = contextProps?.slots?.[props.slot ?? \"default\"];\n const contextBaseProps = createMemo<TextFieldProps>(() => {\n if (!contextProps) return {};\n const {\n labelProps: _labelProps,\n inputProps: _inputProps,\n descriptionProps: _descriptionProps,\n errorMessageProps: _errorMessageProps,\n isInvalid: _isInvalid,\n slots: _slots,\n setInputId: _setInputId,\n ...rest\n } = contextProps;\n return rest as TextFieldProps;\n });\n const baseProps = (\n contextProps ? mergeProps(contextBaseProps(), contextSlotProps ?? {}, props) : props\n ) as TextFieldProps;\n const mergedProps = withFormValidationBehavior(baseProps, formContext);\n\n const [local, ariaProps] = splitProps(mergedProps, [\n \"children\",\n \"class\",\n \"style\",\n \"render\",\n \"slot\",\n ]);\n\n // Use getters to ensure props are read lazily inside reactive contexts\n const state = createTextFieldState({\n get value() {\n return ariaProps.value;\n },\n get defaultValue() {\n return ariaProps.defaultValue;\n },\n get onChange() {\n return ariaProps.onChange;\n },\n });\n\n const inputAriaProps = createMemo(() => {\n const clean: Record<string, unknown> = {};\n for (const key in ariaProps as Record<string, unknown>) {\n if (!key.startsWith(\"data-\")) {\n clean[key] = (ariaProps as Record<string, unknown>)[key];\n }\n }\n return clean as typeof ariaProps;\n });\n\n const textFieldAria = createTextField(() => ({\n ...inputAriaProps(),\n value: state.value(),\n onChange: state.setValue,\n }));\n\n const { isFocused, isFocusVisible, focusProps } = createFocusRing();\n\n const { isHovered, hoverProps } = createHover({\n get isDisabled() {\n return ariaProps.isDisabled;\n },\n });\n const [inputIdOverride, setInputIdOverride] = createSignal<string | undefined>();\n\n const renderValues = createMemo<TextFieldRenderProps>(() => ({\n isDisabled: ariaProps.isDisabled || false,\n isInvalid: textFieldAria.isInvalid,\n isReadOnly: ariaProps.isReadOnly || false,\n isRequired: ariaProps.isRequired || false,\n isHovered: isHovered(),\n isFocused: isFocused(),\n isFocusVisible: isFocusVisible(),\n }));\n\n const renderProps = useRenderProps(\n {\n get children() {\n return local.children;\n },\n class: local.class,\n style: local.style,\n defaultClassName: \"solidaria-TextField\",\n },\n renderValues,\n );\n const childRenderValues: TextFieldRenderProps = {\n get isDisabled() {\n return ariaProps.isDisabled || false;\n },\n get isInvalid() {\n return textFieldAria.isInvalid;\n },\n get isReadOnly() {\n return ariaProps.isReadOnly || false;\n },\n get isRequired() {\n return ariaProps.isRequired || false;\n },\n get isHovered() {\n return isHovered();\n },\n get isFocused() {\n return isFocused();\n },\n get isFocusVisible() {\n return isFocusVisible();\n },\n };\n\n const domProps = createMemo(() => {\n const filtered = filterDOMProps(ariaProps, { global: true });\n delete (filtered as Record<string, unknown>).id;\n return filtered;\n });\n\n const cleanHoverProps = () => {\n const { ref: _ref, ...rest } = hoverProps as Record<string, unknown>;\n return rest;\n };\n\n // Context value for sub-components.\n // Use property getters so sub-components always read the latest aria/focus state.\n const fieldValidation = createMemo<ValidationResult>(() => {\n const isInvalid = textFieldAria.isInvalid;\n const errorMessage = ariaProps.errorMessage;\n const validationErrors = isInvalid && typeof errorMessage === \"string\" ? [errorMessage] : [];\n\n return {\n isInvalid,\n validationErrors,\n validationDetails: isInvalid\n ? { ...VALID_VALIDITY_STATE, customError: true, valid: false }\n : VALID_VALIDITY_STATE,\n };\n });\n const fieldErrorContext: FieldErrorContextValue = {\n get validation() {\n return fieldValidation();\n },\n get errorMessageProps() {\n return textFieldAria.errorMessageProps as JSX.HTMLAttributes<HTMLElement>;\n },\n };\n const contextValue: TextFieldContextValue = {\n get labelProps() {\n return textFieldAria.labelProps as JSX.LabelHTMLAttributes<HTMLLabelElement>;\n },\n get inputProps() {\n return mergeProps(\n textFieldAria.inputProps as Record<string, unknown>,\n focusProps as Record<string, unknown>,\n ) as JSX.InputHTMLAttributes<HTMLInputElement>;\n },\n get descriptionProps() {\n return textFieldAria.descriptionProps as JSX.HTMLAttributes<HTMLElement>;\n },\n get errorMessageProps() {\n return textFieldAria.errorMessageProps as JSX.HTMLAttributes<HTMLElement>;\n },\n get isInvalid() {\n return textFieldAria.isInvalid;\n },\n // Deterministic at render (createTextField generates it via createUniqueId),\n // so the Label's `for` is stable across SSR + hydration. A signal set from an\n // onMount effect would flip undefined->id post-mount and re-execute the Label\n // template — crashing hydration if the re-run lands mid-hydration (dev).\n get inputId() {\n return inputIdOverride() ?? (textFieldAria.inputProps as { id?: string }).id;\n },\n setInputId(id: string | undefined) {\n setInputIdOverride(id);\n },\n };\n // Resolve the render-prop children ONCE (untracked). Re-invoking it on a\n // reactive update re-clones its templates; if that lands mid-hydration it\n // throws a Hydration Mismatch (worst in dev, where slow unbundled modules widen\n // the hydration window). The children carry their own fine-grained reactivity\n // (render-value getters + <Show>s), so they update without being re-created.\n const FieldChildren = () =>\n untrack(() => {\n const children = local.children;\n return typeof children === \"function\" ? children(childRenderValues) : children;\n });\n // Provide the description / errorMessage props as `TextContext` slots (mirrors\n // react-aria-components' TextField), so a `<Text slot=\"description\">` /\n // `<Text slot=\"errorMessage\">` child picks up the `id` its `aria-describedby`\n // references. Additive: existing consumers reading these off `TextFieldContext`\n // are unaffected.\n const textSlots = {\n slots: {\n get description() {\n return textFieldAria.descriptionProps as JSX.HTMLAttributes<HTMLElement>;\n },\n get errorMessage() {\n return textFieldAria.errorMessageProps as JSX.HTMLAttributes<HTMLElement>;\n },\n },\n };\n const FieldChildrenSlotted = () => (\n <Provider values={[[TextContext, textSlots]] as Array<[Context<unknown>, unknown]>}>\n <FieldChildren />\n </Provider>\n );\n const rootProps = () =>\n ({\n ...domProps(),\n ...cleanHoverProps(),\n class: renderProps.class(),\n style: renderProps.style(),\n slot: local.slot,\n \"data-disabled\": ariaProps.isDisabled || undefined,\n \"data-invalid\": textFieldAria.isInvalid || undefined,\n \"data-readonly\": ariaProps.isReadOnly || undefined,\n \"data-required\": ariaProps.isRequired || undefined,\n \"data-hovered\": isHovered() || undefined,\n \"data-focused\": isFocused() || undefined,\n \"data-focus-visible\": isFocusVisible() || undefined,\n }) as JSX.HTMLAttributes<HTMLDivElement>;\n const customRootProps = () =>\n ({\n ...rootProps(),\n children: <FieldChildrenSlotted />,\n }) as JSX.HTMLAttributes<HTMLDivElement>;\n\n return (\n <FieldErrorContext.Provider value={fieldErrorContext}>\n <TextFieldContext.Provider value={contextValue}>\n {local.render ? (\n local.render(customRootProps(), renderValues())\n ) : (\n <div {...rootProps()}>\n <FieldChildrenSlotted />\n </div>\n )}\n </TextFieldContext.Provider>\n </FieldErrorContext.Provider>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAuFA,MAAaiE,mBAAmB/D,cAA4C,IAAI;AAChF,MAAagE,eAAeD;AAC5B,MAAaE,eAAeF;AAC5B,MAAaG,kBAAkBH;AAC/B,MAAaI,oBAAoBJ;AAEjC,SAASK,2BACPzB,OACA0B,aACgB;CAChB,IAAI,CAACA,aAAaC,oBAChB,OAAO3B;CAGT,OAAO,IAAI4B,MAAM5B,OAAO;EACtB6B,IAAIC,QAAQC,UAAUC,UAAU;GAC9B,MAAMC,aAAaC,QAAQL,IAAIC,QAAQC,UAAUC,QAAQ;GACzD,IAAID,aAAa,wBAAwBE,eAAeE,KAAAA,GACtD,OAAOT,YAAYC;GAGrB,OAAOM;EACT;EACAG,IAAIN,QAAQC,UAAU;GACpB,OACEG,QAAQE,IAAIN,QAAQC,QAAQ,KAC3BA,aAAa,wBAAwBL,YAAYC,uBAAuBQ,KAAAA;EAE7E;EACAE,QAAQP,QAAQ;GACd,MAAMQ,OAAO,IAAIC,IAAIL,QAAQG,QAAQP,MAAM,CAAC;GAC5C,IAAIJ,YAAYC,uBAAuBQ,KAAAA,GACrCG,KAAKE,IAAI,oBAAoB;GAG/B,OAAOC,MAAMC,KAAKJ,IAAI;EACxB;EACAK,yBAAyBb,QAAQC,UAAU;GACzC,MAAMa,aAAaV,QAAQS,yBAAyBb,QAAQC,QAAQ;GACpE,IAAIa,YACF,OAAOA;GAGT,IAAIb,aAAa,wBAAwBL,YAAYC,uBAAuBQ,KAAAA,GAC1E,OAAO;IACLU,YAAY;IACZC,cAAc;IACdjB,WAAWH,YAAYC;GACzB;EAIJ;CACF,CAAC;AACH;;;;;AAUA,SAAgBqB,MAAMhD,OAAgC;CACpD,MAAMiD,UAAU3F,WAAW8D,gBAAgB;CAE3C,MAAM8B,sBAAsB;EAC1B,MAAMC,SAAkC,CAAC;EACzC,MAAMC,cAAcpD;EAEpB,KAAK,MAAMqD,OAAOD,aAChB,IAAIC,QAAQ,YACVF,OAAOE,OAAOD,YAAYC;EAG9B,OAAOF;CACT;CAGA,MAAMG,oBAAoB;EACxB,MAAMC,aAAaL,cAAc;EACjC,IAAID,SAAS;GACX,MAAM,EAAEO,KAAKC,MAAM,GAAGC,sBAAuBT,QAAQ3C,cAAc,CAAC;GAIpE,MAAMqD,SAAS;IACb,GAAGD;IACH,GAAIT,QAAQhC,UAAU,EAAE2C,KAAKX,QAAQhC,QAAQ,IAAI,CAAC;IAClD,GAAGsC;GACL;GACA,IAAII,OAAO9D,SAAS,MAClB8D,OAAO9D,QAAQ;GAEjB,OAAO8D;EACT;EACA,OAAOJ,WAAW1D,SAAS,OAAO;GAAE,GAAG0D;GAAY1D,OAAO;EAAkB,IAAI0D;CAClF;CAEA,cAAA;EAAA,IAAAM,OAAAC,eAAAC,MAAA;EAAAC,OAAAH,MAAAI,WAAkBX,WAAW,GAAA,OAAA,IAAA;EAAAY,OAAAL,YAAK7D,MAAMJ,QAAQ;EAAAuE,mBAAA;EAAA,OAAAN;CAAA,EAAA,CAAA;AAClD;AAIA,SAASQ,uBAA8CC,OAAcE,SAAmB;CACtF,OAAO,IAAI5C,MAAM0C,OAAO,EACtBzC,IAAIC,QAAQC,UAAUC,UAAU;EAC9B,IAAID,aAAa,YAAYA,aAAa,iBACxC,OAAOyC;EAGT,MAAME,QAAQxC,QAAQL,IAAIC,QAAQC,UAAUC,QAAQ;EACpD,OAAO,OAAO0C,UAAU,aAAaA,MAAMC,KAAK7C,MAAM,IAAI4C;CAC5D,EACF,CAAC;AACH;AAEA,SAASE,gCAAgCJ,SAAsB;CAC7D,MAAMK,mBAAmBL;CAIzB,OAAOK,iBAAiBC;CACxB,OAAOD,iBAAiBE;AAC1B;;;;;;AAOA,SAAgBC,MAAMhF,OAAgC;CACpD,MAAMiD,UAAU3F,WAAW8D,gBAAgB;CAC3C,IAAI6D;CAEJxH,mBAAmB;EACjBwF,SAAS/B,aAAalB,MAAMmB,EAAE;CAChC,CAAC;CAEDzD,gBAAgB;EACduF,SAAS/B,aAAaiB,KAAAA,CAAS;CACjC,CAAC;CAGD,MAAMmB,oBAAoB;EACxB,IAAIL,SAAS;GAEX,MAAM,EAAEO,KAAKC,MAAM,GAAGyB,sBAAuBjC,QAAQxC,cAAc,CAAC;GAIpE,MAAMkD,SAAS;IAAE,GAAGuB;IAAmB,GAAGlF;GAAM;GAChD,IAAI2D,OAAO9D,SAAS,MAClB8D,OAAO9D,QAAQ;GAEjB,OAAO8D;EACT;EACA,OAAO3D,MAAMH,SAAS,OAAO;GAAE,GAAGG;GAAOH,OAAO;EAAkB,IAAIG;CACxE;CAEArC,cAAc;EACZ,MAAM6G,UAAUS;EAChB,IAAI,CAACT,SACH;EAGF,MAAMW,gBAAgBb,UAAiB;GACrC,MAAMc,UAAU9B,YAAY,CAAC,CAAC+B;GAG9BD,UACEf,uBAAuBC,OAAOE,OAAO,CAIvC;GACAI,gCAAgCJ,OAAO;GACvCF,MAAMmB,gBAAgB;EACxB;EACA,MAAMC,iBAAiBpB,UAAiB;GACtC,MAAMc,UAAU9B,YAAY,CAAC,CAACqC;GAG9BP,UACEf,uBAAuBC,OAAOE,OAAO,CAIvC;GACAI,gCAAgCJ,OAAO;GACvCF,MAAMmB,gBAAgB;EACxB;EAEAjB,QAAQoB,iBAAiB,SAAST,YAAY;EAC9CX,QAAQoB,iBAAiB,UAAUF,aAAa;EAChDd,gCAAgCJ,OAAO;EACvC9G,gBAAgB;GACd8G,QAAQqB,oBAAoB,SAASV,YAAY;GACjDX,QAAQqB,oBAAoB,UAAUH,aAAa;EACrD,CAAC;CACH,CAAC;CAED,cAAA;EAAA,IAAAI,QAAAhC,eAAAiC,OAAA;EAAAC,KAGUxB,YAAY;GAChBS,eAAeT;GACf,MAAMhB,MAAMxD,MAAMwD;GAClB,IAAI,OAAOA,QAAQ,YACjBA,IAAIgB,OAAO;EAEf,GAACsB,KAAA;EAAA9B,OAAA8B,OAAA7B,WAPGX,WAAW,GAAA,OAAA,KAAA;EAAAa,mBAAA;EAAA,OAAA2B;CAAA,EAAA,CAAA;AAUrB;;;;;;AAYA,SAAgBM,SAASpG,OAAmC;CAC1D,MAAMiD,UAAU3F,WAAW8D,gBAAgB;CAC3C,IAAIiF;CAEJ5I,mBAAmB;EACjBwF,SAAS/B,aAAalB,MAAMmB,EAAE;CAChC,CAAC;CAEDzD,gBAAgB;EACduF,SAAS/B,aAAaiB,KAAAA,CAAS;CACjC,CAAC;CAID,MAAMmB,oBAAoB;EACxB,IAAIL,SAAS;GACX,MAAM,EACJO,KAAKC,MACL6C,MAAMC,OACN,GAAGrB,sBACAjC,QAAQxC,cAAc,CAAC;GAC5B,MAAMkD,SAAS;IAAE,GAAGuB;IAAmB,GAAGlF;GAAM;GAChD,IAAI2D,OAAO9D,SAAS,MAClB8D,OAAO9D,QAAQ;GAEjB,OAAO8D;EACT;EACA,OAAO3D,MAAMH,SAAS,OAAO;GAAE,GAAGG;GAAOH,OAAO;EAAqB,IAAIG;CAC3E;CAEArC,cAAc;EACZ,MAAM6G,UAAU6B;EAChB,IAAI,CAAC7B,SACH;EAGF,MAAMW,gBAAgBb,UAAiB;GACrC,MAAMc,UAAU9B,YAAY,CAAC,CAAC+B;GAG9BD,UACEf,uBAAuBC,OAAOE,OAAO,CAIvC;GACAI,gCAAgCJ,OAAO;GACvCF,MAAMmB,gBAAgB;EACxB;EACA,MAAMC,iBAAiBpB,UAAiB;GACtC,MAAMc,UAAU9B,YAAY,CAAC,CAACqC;GAG9BP,UACEf,uBAAuBC,OAAOE,OAAO,CAIvC;GACAI,gCAAgCJ,OAAO;GACvCF,MAAMmB,gBAAgB;EACxB;EAEAjB,QAAQoB,iBAAiB,SAAST,YAAY;EAC9CX,QAAQoB,iBAAiB,UAAUF,aAAa;EAChDd,gCAAgCJ,OAAO;EACvC9G,gBAAgB;GACd8G,QAAQqB,oBAAoB,SAASV,YAAY;GACjDX,QAAQqB,oBAAoB,UAAUH,aAAa;EACrD,CAAC;CACH,CAAC;CAED,cAAA;EAAA,IAAAc,QAAA1C,eAAA2C,OAAA;EAAAT,KAGUxB,YAAY;GAChB6B,kBAAkB7B;GAClB,MAAMhB,MAAMxD,MAAMwD;GAClB,IAAI,OAAOA,QAAQ,YACjBA,IAAIgB,OAAO;EAEf,GAACgC,KAAA;EAAAxC,OAAAwC,OAAAvC,WAPGX,WAAW,GAAA,OAAA,KAAA;EAAAa,mBAAA;EAAA,OAAAqC;CAAA,EAAA,CAAA;AAUrB;;;;;;;;;;;;;;;;;;;AAoBA,SAAgBE,UAAU1G,OAAoC;CAC5D,MAAM0B,cAAcpE,WAAWgB,WAAW;CAC1C,MAAMqI,eAAerJ,WAAW8D,gBAAgB;CAChD,MAAMwF,mBAAmBD,cAAc5F,QAAQf,MAAM6G,QAAQ;CAC7D,MAAMC,mBAAmBvJ,iBAAiC;EACxD,IAAI,CAACoJ,cAAc,OAAO,CAAC;EAC3B,MAAM,EACJrG,YAAYyG,aACZtG,YAAYuG,aACZpG,kBAAkBqG,mBAClBnG,mBAAmBoG,oBACnB9H,WAAW+H,YACXpG,OAAOqG,QACPlG,YAAYmG,aACZ,GAAGC,SACDX;EACJ,OAAOW;CACT,CAAC;CAMD,MAAM,CAACE,OAAOC,aAAa7J,WAFP6D,2BAFlBkF,eAAe1I,aAAW6I,iBAAiB,GAAGF,oBAAoB,CAAC,GAAG5G,KAAK,IAAIA,OAEvB0B,WAEpB4B,GAAa;EACjD;EACA;EACA;EACA;EACA;CAAM,CACP;CAGD,MAAMoE,QAAQvJ,qBAAqB;EACjC,IAAIuG,QAAQ;GACV,OAAO+C,UAAU/C;EACnB;EACA,IAAIiD,eAAe;GACjB,OAAOF,UAAUE;EACnB;EACA,IAAIhC,WAAW;GACb,OAAO8B,UAAU9B;EACnB;CACF,CAAC;CAED,MAAMiC,iBAAiBrK,iBAAiB;EACtC,MAAMsK,QAAiC,CAAC;EACxC,KAAK,MAAMxE,OAAOoE,WAChB,IAAI,CAACpE,IAAIyE,WAAW,OAAO,GACzBD,MAAMxE,OAAQoE,UAAsCpE;EAGxD,OAAOwE;CACT,CAAC;CAED,MAAME,gBAAgBjK,uBAAuB;EAC3C,GAAG8J,eAAe;EAClBlD,OAAOgD,MAAMhD,MAAM;EACnBiB,UAAU+B,MAAMM;CAClB,EAAE;CAEF,MAAM,EAAExI,WAAWC,gBAAgBwI,eAAelK,gBAAgB;CAElE,MAAM,EAAEwB,WAAW2I,eAAelK,YAAY,EAC5C,IAAImB,aAAa;EACf,OAAOsI,UAAUtI;CACnB,EACF,CAAC;CACD,MAAM,CAACgJ,iBAAiBC,sBAAsB5K,aAAiC;CAE/E,MAAM6K,eAAe9K,kBAAwC;EAC3D4B,YAAYsI,UAAUtI,cAAc;EACpCC,WAAW2I,cAAc3I;EACzBC,YAAYoI,UAAUpI,cAAc;EACpCC,YAAYmI,UAAUnI,cAAc;EACpCC,WAAWA,UAAU;EACrBC,WAAWA,UAAU;EACrBC,gBAAgBA,eAAe;CACjC,EAAE;CAEF,MAAMU,cAAcrB,eAClB;EACE,IAAIc,WAAW;GACb,OAAO4H,MAAM5H;EACf;EACAC,OAAO2H,MAAM3H;EACbC,OAAO0H,MAAM1H;EACbwI,kBAAkB;CACpB,GACAD,YACF;CACA,MAAME,oBAA0C;EAC9C,IAAIpJ,aAAa;GACf,OAAOsI,UAAUtI,cAAc;EACjC;EACA,IAAIC,YAAY;GACd,OAAO2I,cAAc3I;EACvB;EACA,IAAIC,aAAa;GACf,OAAOoI,UAAUpI,cAAc;EACjC;EACA,IAAIC,aAAa;GACf,OAAOmI,UAAUnI,cAAc;EACjC;EACA,IAAIC,YAAY;GACd,OAAOA,UAAU;EACnB;EACA,IAAIC,YAAY;GACd,OAAOA,UAAU;EACnB;EACA,IAAIC,iBAAiB;GACnB,OAAOA,eAAe;EACxB;CACF;CAEA,MAAM+I,WAAWjL,iBAAiB;EAChC,MAAMkL,WAAW1J,eAAe0I,WAAW,EAAEiB,QAAQ,KAAK,CAAC;EAC3D,OAAQD,SAAqCtH;EAC7C,OAAOsH;CACT,CAAC;CAED,MAAME,wBAAwB;EAC5B,MAAM,EAAEnF,KAAKC,MAAM,GAAG6D,SAASY;EAC/B,OAAOZ;CACT;CAIA,MAAMsB,kBAAkBrL,iBAAmC;EACzD,MAAM6B,YAAY2I,cAAc3I;EAChC,MAAMyJ,eAAepB,UAAUoB;EAG/B,OAAO;GACLzJ;GACA0J,kBAJuB1J,aAAa,OAAOyJ,iBAAiB,WAAW,CAACA,YAAY,IAAI,CAAA;GAKxFE,mBAAmB3J,YACf;IAAE,GAAGhB;IAAsB4K,aAAa;IAAMC,OAAO;GAAM,IAC3D7K;EACN;CACF,CAAC;CACD,MAAM8K,oBAA4C;EAChD,IAAIC,aAAa;GACf,OAAOP,gBAAgB;EACzB;EACA,IAAI9H,oBAAoB;GACtB,OAAOiH,cAAcjH;EACvB;CACF;CACA,MAAMsI,eAAsC;EAC1C,IAAI9I,aAAa;GACf,OAAOyH,cAAczH;EACvB;EACA,IAAIG,aAAa;GACf,OAAOxC,aACL8J,cAActH,YACdwH,UACF;EACF;EACA,IAAIrH,mBAAmB;GACrB,OAAOmH,cAAcnH;EACvB;EACA,IAAIE,oBAAoB;GACtB,OAAOiH,cAAcjH;EACvB;EACA,IAAI1B,YAAY;GACd,OAAO2I,cAAc3I;EACvB;EAKA,IAAI6B,UAAU;GACZ,OAAOkH,gBAAgB,KAAMJ,cAActH,WAA+BU;EAC5E;EACAD,WAAWC,IAAwB;GACjCiH,mBAAmBjH,EAAE;EACvB;CACF;CAMA,MAAMkI,sBACJxL,cAAc;EACZ,MAAM+B,WAAW4H,MAAM5H;EACvB,OAAO,OAAOA,aAAa,aAAaA,SAAS2I,iBAAiB,IAAI3I;CACxE,CAAC;CAMH,MAAM0J,YAAY,EAChBvI,OAAO;EACL,IAAIwI,cAAc;GAChB,OAAOxB,cAAcnH;EACvB;EACA,IAAIiI,eAAe;GACjB,OAAOd,cAAcjH;EACvB;CACF,EACF;CACA,MAAM0I,6BAAuBC,gBAC1BzK,UAAQ;EAAC0K,QAAQ,CAAC,CAACzK,aAAaqK,SAAS,CAAC;EAAuC,IAAA1J,WAAA;GAAA,OAAA6J,gBAC/EJ,eAAa,CAAA,CAAA;EAAA;CAAA,CAAA;CAGlB,MAAMM,mBACH;EACC,GAAGnB,SAAS;EACZ,GAAGG,gBAAgB;EACnB9I,OAAOM,YAAYN,MAAM;EACzBC,OAAOK,YAAYL,MAAM;EACzB+G,MAAMW,MAAMX;EACZ,iBAAiBY,UAAUtI,cAAcgD,KAAAA;EACzC,gBAAgB4F,cAAc3I,aAAa+C,KAAAA;EAC3C,iBAAiBsF,UAAUpI,cAAc8C,KAAAA;EACzC,iBAAiBsF,UAAUnI,cAAc6C,KAAAA;EACzC,gBAAgB5C,UAAU,KAAK4C,KAAAA;EAC/B,gBAAgB3C,UAAU,KAAK2C,KAAAA;EAC/B,sBAAsB1C,eAAe,KAAK0C,KAAAA;CAC5C;CACF,MAAMyH,yBACH;EACC,GAAGD,UAAU;EACb/J,UAAQ6J,gBAAGD,sBAAoB,CAAA,CAAA;CACjC;CAEF,OAAAC,gBACGjL,kBAAkBQ,UAAQ;EAAC0F,OAAOwE;EAAiB,IAAAtJ,WAAA;GAAA,OAAA6J,gBACjDrI,iBAAiBpC,UAAQ;IAAC0F,OAAO0E;IAAY,IAAAxJ,WAAA;KAAA,OAC3CiK,WAAA,CAAA,CAAArC,MAAMzH,MAAM,CAAA,CAAA,IACXyH,MAAMzH,OAAO6J,gBAAgB,GAAGvB,aAAa,CAAC,WAAC;MAAA,IAAAyB,QAAAhG,eAAAiG,OAAA;MAAA/F,OAAA8F,OAAA7F,WAEtC0F,SAAS,GAAA,OAAA,IAAA;MAAAzF,OAAA4F,OAAAL,gBACfD,sBAAoB,CAAA,CAAA,CAAA;MAAArF,mBAAA;MAAA,OAAA2F;KAAA,EAAA,CAAA;IAExB;GAAA,CAAA;EAAA;CAAA,CAAA;AAIT"}
1
+ {"version":3,"file":"TextField.js","names":["JSX","Context","createContext","useContext","createMemo","createSignal","createEffect","onCleanup","onMount","splitProps","untrack","createTextField","createFocusRing","createHover","mergeProps","AriaTextFieldProps","createTextFieldState","VALID_VALIDITY_STATE","ValidationResult","FormContext","FormProps","FieldErrorContext","FieldErrorContextValue","RenderChildren","ClassNameOrFunction","StyleOrFunction","SlotProps","useRenderProps","filterDOMProps","Provider","TextContext","TextFieldRenderProps","isDisabled","isInvalid","isReadOnly","isRequired","isHovered","isFocused","isFocusVisible","TextFieldProps","Omit","children","class","style","render","props","HTMLAttributes","HTMLDivElement","renderProps","Element","TextFieldContextValue","labelProps","LabelHTMLAttributes","HTMLLabelElement","inputProps","InputHTMLAttributes","HTMLInputElement","descriptionProps","HTMLElement","errorMessageProps","slots","Record","inputId","setInputId","id","TextFieldContext","LabelContext","InputContext","TextAreaContext","FieldInputContext","withFormValidationBehavior","formContext","validationBehavior","Proxy","get","target","property","receiver","localValue","Reflect","undefined","has","ownKeys","keys","Set","add","Array","from","getOwnPropertyDescriptor","descriptor","enumerable","configurable","LabelProps","Label","context","localDOMProps","result","propsRecord","key","mergedProps","localProps","ref","_ref","contextLabelProps","merged","for","_el$","_$getNextElement","_tmpl$","_$spread","_$mergeProps","_$insert","_$runHydrationEvents","InputProps","eventWithCurrentTarget","event","Event","element","T","value","bind","clearDelegatedTextEntryHandlers","delegatedElement","$$input","$$change","Input","inputElement","contextInputProps","inputHandler","handler","onInput","EventHandler","InputEvent","currentTarget","stopPropagation","changeHandler","onChange","addEventListener","removeEventListener","_el$2","_tmpl$2","_$use","TextAreaProps","TextareaHTMLAttributes","HTMLTextAreaElement","TextArea","textAreaElement","type","_type","_el$3","_tmpl$3","TextField","contextProps","contextSlotProps","slot","contextBaseProps","_labelProps","_inputProps","_descriptionProps","_errorMessageProps","_isInvalid","_slots","_setInputId","rest","baseProps","local","ariaProps","state","defaultValue","inputAriaProps","clean","startsWith","textFieldAria","setValue","focusProps","hoverProps","inputIdOverride","setInputIdOverride","renderValues","defaultClassName","childRenderValues","domProps","filtered","global","events","cleanHoverProps","fieldValidation","errorMessage","validationErrors","validationDetails","customError","valid","fieldErrorContext","validation","contextValue","FieldChildren","textSlots","description","FieldChildrenSlotted","_$createComponent","values","rootProps","customRootProps","_$memo","_el$4","_tmpl$4"],"sources":["../src/TextField.tsx"],"sourcesContent":["/**\n * TextField component for solidaria-components\n *\n * A pre-wired headless text field that combines state + aria hooks.\n * Port of react-aria-components/src/TextField.tsx\n */\n\nimport {\n type JSX,\n type Context,\n createContext,\n useContext,\n createMemo,\n createSignal,\n createEffect,\n onCleanup,\n onMount,\n splitProps,\n untrack,\n} from \"solid-js\";\nimport {\n createTextField,\n createFocusRing,\n createHover,\n mergeProps,\n type AriaTextFieldProps,\n} from \"@proyecto-viviana/solidaria\";\nimport {\n createTextFieldState,\n VALID_VALIDITY_STATE,\n type ValidationResult,\n} from \"@proyecto-viviana/solid-stately\";\nimport { FormContext, type FormProps } from \"./Form\";\nimport { FieldErrorContext, type FieldErrorContextValue } from \"./FieldError\";\nimport {\n type RenderChildren,\n type ClassNameOrFunction,\n type StyleOrFunction,\n type SlotProps,\n useRenderProps,\n filterDOMProps,\n Provider,\n} from \"./utils\";\nimport { TextContext } from \"./Text\";\n\nexport interface TextFieldRenderProps {\n /** Whether the text field is disabled. */\n isDisabled: boolean;\n /** Whether the value is invalid. */\n isInvalid: boolean;\n /** Whether the text field is read only. */\n isReadOnly: boolean;\n /** Whether the text field is required. */\n isRequired: boolean;\n /** Whether the text field is currently hovered with a mouse. */\n isHovered: boolean;\n /** Whether the text field is focused, either via a mouse or keyboard. */\n isFocused: boolean;\n /** Whether the text field is keyboard focused. */\n isFocusVisible: boolean;\n}\n\nexport interface TextFieldProps extends Omit<AriaTextFieldProps, \"children\">, SlotProps {\n /** The children of the component. A function may be provided to receive render props. */\n children?: RenderChildren<TextFieldRenderProps>;\n /** The CSS className for the element. */\n class?: ClassNameOrFunction<TextFieldRenderProps>;\n /** The inline style for the element. */\n style?: StyleOrFunction<TextFieldRenderProps>;\n /** Custom renderer for the outer text field element. */\n render?: (\n props: JSX.HTMLAttributes<HTMLDivElement>,\n renderProps: TextFieldRenderProps,\n ) => JSX.Element;\n}\n\nexport interface TextFieldContextValue {\n labelProps?: JSX.LabelHTMLAttributes<HTMLLabelElement>;\n inputProps?: JSX.InputHTMLAttributes<HTMLInputElement>;\n descriptionProps?: JSX.HTMLAttributes<HTMLElement>;\n errorMessageProps?: JSX.HTMLAttributes<HTMLElement>;\n isInvalid?: boolean;\n slots?: Record<string, TextFieldProps>;\n inputId?: string;\n setInputId?: (id: string | undefined) => void;\n}\n\nexport const TextFieldContext = createContext<TextFieldContextValue | null>(null);\nexport const LabelContext = TextFieldContext;\nexport const InputContext = TextFieldContext;\nexport const TextAreaContext = TextFieldContext;\nexport const FieldInputContext = TextFieldContext;\n\nfunction withFormValidationBehavior(\n props: TextFieldProps,\n formContext: FormProps | null,\n): TextFieldProps {\n if (!formContext?.validationBehavior) {\n return props;\n }\n\n return new Proxy(props, {\n get(target, property, receiver) {\n const localValue = Reflect.get(target, property, receiver);\n if (property === \"validationBehavior\" && localValue === undefined) {\n return formContext.validationBehavior;\n }\n\n return localValue;\n },\n has(target, property) {\n return (\n Reflect.has(target, property) ||\n (property === \"validationBehavior\" && formContext.validationBehavior !== undefined)\n );\n },\n ownKeys(target) {\n const keys = new Set(Reflect.ownKeys(target));\n if (formContext.validationBehavior !== undefined) {\n keys.add(\"validationBehavior\");\n }\n\n return Array.from(keys);\n },\n getOwnPropertyDescriptor(target, property) {\n const descriptor = Reflect.getOwnPropertyDescriptor(target, property);\n if (descriptor) {\n return descriptor;\n }\n\n if (property === \"validationBehavior\" && formContext.validationBehavior !== undefined) {\n return {\n enumerable: true,\n configurable: true,\n get: () => formContext.validationBehavior,\n };\n }\n\n return undefined;\n },\n });\n}\n\nexport interface LabelProps extends JSX.LabelHTMLAttributes<HTMLLabelElement> {\n children?: JSX.Element;\n}\n\n/**\n * A label element that automatically wires up to the parent TextField context.\n * This enables the proper htmlFor/id relationship between label and input.\n */\nexport function Label(props: LabelProps): JSX.Element {\n const context = useContext(TextFieldContext);\n\n const localDOMProps = () => {\n const result: Record<string, unknown> = {};\n const propsRecord = props as Record<string, unknown>;\n\n for (const key in propsRecord) {\n if (key !== \"children\") {\n result[key] = propsRecord[key];\n }\n }\n return result;\n };\n\n // Merge context labelProps with local props (local props take precedence)\n const mergedProps = () => {\n const localProps = localDOMProps();\n if (context) {\n const { ref: _ref, ...contextLabelProps } = (context.labelProps ?? {}) as Record<\n string,\n unknown\n >;\n const merged = {\n ...contextLabelProps,\n ...(context.inputId ? { for: context.inputId } : {}),\n ...localProps,\n } as Record<string, unknown>;\n if (merged.class == null) {\n merged.class = \"solidaria-Label\";\n }\n return merged;\n }\n return localProps.class == null ? { ...localProps, class: \"solidaria-Label\" } : localProps;\n };\n\n return <label {...mergedProps()}>{props.children}</label>;\n}\n\nexport interface InputProps extends Omit<JSX.InputHTMLAttributes<HTMLInputElement>, \"children\"> {}\n\nfunction eventWithCurrentTarget<T extends HTMLElement>(event: Event, element: T): Event {\n return new Proxy(event, {\n get(target, property, receiver) {\n if (property === \"target\" || property === \"currentTarget\") {\n return element;\n }\n\n const value = Reflect.get(target, property, receiver);\n return typeof value === \"function\" ? value.bind(target) : value;\n },\n });\n}\n\nfunction clearDelegatedTextEntryHandlers(element: HTMLElement) {\n const delegatedElement = element as HTMLElement & {\n $$input?: unknown;\n $$change?: unknown;\n };\n delete delegatedElement.$$input;\n delete delegatedElement.$$change;\n}\n\n/**\n * An input element that automatically wires up to the parent TextField context.\n * This enables focus tracking, validation, and accessibility props to flow from\n * the TextField to the actual input element.\n */\nexport function Input(props: InputProps): JSX.Element {\n const context = useContext(TextFieldContext);\n let inputElement: HTMLInputElement | undefined;\n\n createEffect(() => {\n context?.setInputId?.(props.id);\n });\n\n onCleanup(() => {\n context?.setInputId?.(undefined);\n });\n\n // Merge context inputProps with local props (local props take precedence)\n const mergedProps = () => {\n if (context) {\n // Remove ref from context props to avoid conflicts\n const { ref: _ref, ...contextInputProps } = (context.inputProps ?? {}) as Record<\n string,\n unknown\n >;\n const merged = { ...contextInputProps, ...props } as Record<string, unknown>;\n if (merged.class == null) {\n merged.class = \"solidaria-Input\";\n }\n return merged;\n }\n return props.class == null ? { ...props, class: \"solidaria-Input\" } : props;\n };\n\n onMount(() => {\n const element = inputElement;\n if (!element) {\n return;\n }\n\n const inputHandler = (event: Event) => {\n const handler = mergedProps().onInput as\n | JSX.EventHandler<HTMLInputElement, InputEvent>\n | undefined;\n handler?.(\n eventWithCurrentTarget(event, element) as InputEvent & {\n currentTarget: HTMLInputElement;\n target: Element;\n },\n );\n clearDelegatedTextEntryHandlers(element);\n event.stopPropagation();\n };\n const changeHandler = (event: Event) => {\n const handler = mergedProps().onChange as\n | JSX.EventHandler<HTMLInputElement, Event>\n | undefined;\n handler?.(\n eventWithCurrentTarget(event, element) as Event & {\n currentTarget: HTMLInputElement;\n target: Element;\n },\n );\n clearDelegatedTextEntryHandlers(element);\n event.stopPropagation();\n };\n\n element.addEventListener(\"input\", inputHandler);\n element.addEventListener(\"change\", changeHandler);\n clearDelegatedTextEntryHandlers(element);\n onCleanup(() => {\n element.removeEventListener(\"input\", inputHandler);\n element.removeEventListener(\"change\", changeHandler);\n });\n });\n\n return (\n <input\n {...mergedProps()}\n ref={(element) => {\n inputElement = element;\n const ref = props.ref;\n if (typeof ref === \"function\") {\n ref(element);\n }\n }}\n />\n );\n}\n\nexport interface TextAreaProps extends Omit<\n JSX.TextareaHTMLAttributes<HTMLTextAreaElement>,\n \"children\"\n> {}\n\n/**\n * A textarea element that automatically wires up to the parent TextField context.\n * This enables focus tracking, validation, and accessibility props to flow from\n * the TextField to the actual textarea element.\n */\nexport function TextArea(props: TextAreaProps): JSX.Element {\n const context = useContext(TextFieldContext);\n let textAreaElement: HTMLTextAreaElement | undefined;\n\n createEffect(() => {\n context?.setInputId?.(props.id);\n });\n\n onCleanup(() => {\n context?.setInputId?.(undefined);\n });\n\n // Merge context inputProps with local props (local props take precedence)\n // Note: TextArea uses inputProps from context since it's an input variant\n const mergedProps = () => {\n if (context) {\n const {\n ref: _ref,\n type: _type,\n ...contextInputProps\n } = (context.inputProps ?? {}) as Record<string, unknown>;\n const merged = { ...contextInputProps, ...props } as Record<string, unknown>;\n if (merged.class == null) {\n merged.class = \"solidaria-TextArea\";\n }\n return merged;\n }\n return props.class == null ? { ...props, class: \"solidaria-TextArea\" } : props;\n };\n\n onMount(() => {\n const element = textAreaElement;\n if (!element) {\n return;\n }\n\n const inputHandler = (event: Event) => {\n const handler = mergedProps().onInput as\n | JSX.EventHandler<HTMLTextAreaElement, InputEvent>\n | undefined;\n handler?.(\n eventWithCurrentTarget(event, element) as InputEvent & {\n currentTarget: HTMLTextAreaElement;\n target: Element;\n },\n );\n clearDelegatedTextEntryHandlers(element);\n event.stopPropagation();\n };\n const changeHandler = (event: Event) => {\n const handler = mergedProps().onChange as\n | JSX.EventHandler<HTMLTextAreaElement, Event>\n | undefined;\n handler?.(\n eventWithCurrentTarget(event, element) as Event & {\n currentTarget: HTMLTextAreaElement;\n target: Element;\n },\n );\n clearDelegatedTextEntryHandlers(element);\n event.stopPropagation();\n };\n\n element.addEventListener(\"input\", inputHandler);\n element.addEventListener(\"change\", changeHandler);\n clearDelegatedTextEntryHandlers(element);\n onCleanup(() => {\n element.removeEventListener(\"input\", inputHandler);\n element.removeEventListener(\"change\", changeHandler);\n });\n });\n\n return (\n <textarea\n {...mergedProps()}\n ref={(element) => {\n textAreaElement = element;\n const ref = props.ref;\n if (typeof ref === \"function\") {\n ref(element);\n }\n }}\n />\n );\n}\n\n/**\n * A text field allows a user to enter a plain text value with a keyboard.\n *\n * This is a headless component that provides accessibility and state management.\n * Style it using the render props pattern or data attributes.\n *\n * @example\n * ```tsx\n * <TextField>\n * {({ isInvalid }) => (\n * <>\n * <Label>Email</Label>\n * <Input class={isInvalid ? 'border-red-500' : 'border-gray-300'} />\n * </>\n * )}\n * </TextField>\n * ```\n */\nexport function TextField(props: TextFieldProps): JSX.Element {\n const formContext = useContext(FormContext);\n const contextProps = useContext(TextFieldContext);\n const contextSlotProps = contextProps?.slots?.[props.slot ?? \"default\"];\n const contextBaseProps = createMemo<TextFieldProps>(() => {\n if (!contextProps) return {};\n const {\n labelProps: _labelProps,\n inputProps: _inputProps,\n descriptionProps: _descriptionProps,\n errorMessageProps: _errorMessageProps,\n isInvalid: _isInvalid,\n slots: _slots,\n setInputId: _setInputId,\n ...rest\n } = contextProps;\n return rest as TextFieldProps;\n });\n const baseProps = (\n contextProps ? mergeProps(contextBaseProps(), contextSlotProps ?? {}, props) : props\n ) as TextFieldProps;\n const mergedProps = withFormValidationBehavior(baseProps, formContext);\n\n const [local, ariaProps] = splitProps(mergedProps, [\n \"children\",\n \"class\",\n \"style\",\n \"render\",\n \"slot\",\n ]);\n\n // Use getters to ensure props are read lazily inside reactive contexts\n const state = createTextFieldState({\n get value() {\n return ariaProps.value;\n },\n get defaultValue() {\n return ariaProps.defaultValue;\n },\n get onChange() {\n return ariaProps.onChange;\n },\n });\n\n const inputAriaProps = createMemo(() => {\n const clean: Record<string, unknown> = {};\n for (const key in ariaProps as Record<string, unknown>) {\n if (!key.startsWith(\"data-\")) {\n clean[key] = (ariaProps as Record<string, unknown>)[key];\n }\n }\n return clean as typeof ariaProps;\n });\n\n const textFieldAria = createTextField(() => ({\n ...inputAriaProps(),\n value: state.value(),\n onChange: state.setValue,\n }));\n\n const { isFocused, isFocusVisible, focusProps } = createFocusRing();\n\n const { isHovered, hoverProps } = createHover({\n get isDisabled() {\n return ariaProps.isDisabled;\n },\n });\n const [inputIdOverride, setInputIdOverride] = createSignal<string | undefined>();\n\n const renderValues = createMemo<TextFieldRenderProps>(() => ({\n isDisabled: ariaProps.isDisabled || false,\n isInvalid: textFieldAria.isInvalid,\n isReadOnly: ariaProps.isReadOnly || false,\n isRequired: ariaProps.isRequired || false,\n isHovered: isHovered(),\n isFocused: isFocused(),\n isFocusVisible: isFocusVisible(),\n }));\n\n const renderProps = useRenderProps(\n {\n get children() {\n return local.children;\n },\n class: local.class,\n style: local.style,\n defaultClassName: \"solidaria-TextField\",\n },\n renderValues,\n );\n const childRenderValues: TextFieldRenderProps = {\n get isDisabled() {\n return ariaProps.isDisabled || false;\n },\n get isInvalid() {\n return textFieldAria.isInvalid;\n },\n get isReadOnly() {\n return ariaProps.isReadOnly || false;\n },\n get isRequired() {\n return ariaProps.isRequired || false;\n },\n get isHovered() {\n return isHovered();\n },\n get isFocused() {\n return isFocused();\n },\n get isFocusVisible() {\n return isFocusVisible();\n },\n };\n\n const domProps = createMemo(() => {\n const filtered = filterDOMProps(ariaProps, { global: true, events: false });\n delete (filtered as Record<string, unknown>).id;\n return filtered;\n });\n\n const cleanHoverProps = () => {\n const { ref: _ref, ...rest } = hoverProps as Record<string, unknown>;\n return rest;\n };\n\n // Context value for sub-components.\n // Use property getters so sub-components always read the latest aria/focus state.\n const fieldValidation = createMemo<ValidationResult>(() => {\n const isInvalid = textFieldAria.isInvalid;\n const errorMessage = ariaProps.errorMessage;\n const validationErrors = isInvalid && typeof errorMessage === \"string\" ? [errorMessage] : [];\n\n return {\n isInvalid,\n validationErrors,\n validationDetails: isInvalid\n ? { ...VALID_VALIDITY_STATE, customError: true, valid: false }\n : VALID_VALIDITY_STATE,\n };\n });\n const fieldErrorContext: FieldErrorContextValue = {\n get validation() {\n return fieldValidation();\n },\n get errorMessageProps() {\n return textFieldAria.errorMessageProps as JSX.HTMLAttributes<HTMLElement>;\n },\n };\n const contextValue: TextFieldContextValue = {\n get labelProps() {\n return textFieldAria.labelProps as JSX.LabelHTMLAttributes<HTMLLabelElement>;\n },\n get inputProps() {\n return mergeProps(\n textFieldAria.inputProps as Record<string, unknown>,\n focusProps as Record<string, unknown>,\n ) as JSX.InputHTMLAttributes<HTMLInputElement>;\n },\n get descriptionProps() {\n return textFieldAria.descriptionProps as JSX.HTMLAttributes<HTMLElement>;\n },\n get errorMessageProps() {\n return textFieldAria.errorMessageProps as JSX.HTMLAttributes<HTMLElement>;\n },\n get isInvalid() {\n return textFieldAria.isInvalid;\n },\n // Deterministic at render (createTextField generates it via createUniqueId),\n // so the Label's `for` is stable across SSR + hydration. A signal set from an\n // onMount effect would flip undefined->id post-mount and re-execute the Label\n // template — crashing hydration if the re-run lands mid-hydration (dev).\n get inputId() {\n return inputIdOverride() ?? (textFieldAria.inputProps as { id?: string }).id;\n },\n setInputId(id: string | undefined) {\n setInputIdOverride(id);\n },\n };\n // Resolve the render-prop children ONCE (untracked). Re-invoking it on a\n // reactive update re-clones its templates; if that lands mid-hydration it\n // throws a Hydration Mismatch (worst in dev, where slow unbundled modules widen\n // the hydration window). The children carry their own fine-grained reactivity\n // (render-value getters + <Show>s), so they update without being re-created.\n const FieldChildren = () =>\n untrack(() => {\n const children = local.children;\n return typeof children === \"function\" ? children(childRenderValues) : children;\n });\n // Provide the description / errorMessage props as `TextContext` slots (mirrors\n // react-aria-components' TextField), so a `<Text slot=\"description\">` /\n // `<Text slot=\"errorMessage\">` child picks up the `id` its `aria-describedby`\n // references. Additive: existing consumers reading these off `TextFieldContext`\n // are unaffected.\n const textSlots = {\n slots: {\n get description() {\n return textFieldAria.descriptionProps as JSX.HTMLAttributes<HTMLElement>;\n },\n get errorMessage() {\n return textFieldAria.errorMessageProps as JSX.HTMLAttributes<HTMLElement>;\n },\n },\n };\n const FieldChildrenSlotted = () => (\n <Provider values={[[TextContext, textSlots]] as Array<[Context<unknown>, unknown]>}>\n <FieldChildren />\n </Provider>\n );\n const rootProps = () =>\n ({\n ...domProps(),\n ...cleanHoverProps(),\n class: renderProps.class(),\n style: renderProps.style(),\n slot: local.slot,\n \"data-disabled\": ariaProps.isDisabled || undefined,\n \"data-invalid\": textFieldAria.isInvalid || undefined,\n \"data-readonly\": ariaProps.isReadOnly || undefined,\n \"data-required\": ariaProps.isRequired || undefined,\n \"data-hovered\": isHovered() || undefined,\n \"data-focused\": isFocused() || undefined,\n \"data-focus-visible\": isFocusVisible() || undefined,\n }) as JSX.HTMLAttributes<HTMLDivElement>;\n const customRootProps = () =>\n ({\n ...rootProps(),\n children: <FieldChildrenSlotted />,\n }) as JSX.HTMLAttributes<HTMLDivElement>;\n\n return (\n <FieldErrorContext.Provider value={fieldErrorContext}>\n <TextFieldContext.Provider value={contextValue}>\n {local.render ? (\n local.render(customRootProps(), renderValues())\n ) : (\n <div {...rootProps()}>\n <FieldChildrenSlotted />\n </div>\n )}\n </TextFieldContext.Provider>\n </FieldErrorContext.Provider>\n );\n}\n"],"mappings":"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"}
@@ -304,7 +304,10 @@ function TextField(props) {
304
304
  }
305
305
  };
306
306
  const domProps = createMemo(() => {
307
- const filtered = filterDOMProps(ariaProps, { global: true });
307
+ const filtered = filterDOMProps(ariaProps, {
308
+ global: true,
309
+ events: false
310
+ });
308
311
  delete filtered.id;
309
312
  return filtered;
310
313
  });