@proyecto-viviana/solidaria-components 0.4.0 → 0.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/ActionBar.d.ts.map +1 -1
- package/dist/ActionBar.js +2 -11
- package/dist/ActionBar.js.map +1 -1
- package/dist/ActionBar.jsx +2 -11
- package/dist/ActionBar.jsx.map +1 -1
- package/dist/ActionGroup.d.ts.map +1 -1
- package/dist/ActionGroup.js +1 -1
- package/dist/ActionGroup.js.map +1 -1
- package/dist/ActionGroup.jsx +1 -1
- package/dist/ActionGroup.jsx.map +1 -1
- package/dist/Autocomplete.d.ts +2 -2
- package/dist/Autocomplete.d.ts.map +1 -1
- package/dist/Autocomplete.js +7 -7
- package/dist/Autocomplete.js.map +1 -1
- package/dist/Autocomplete.jsx +7 -7
- package/dist/Autocomplete.jsx.map +1 -1
- package/dist/Breadcrumbs.d.ts.map +1 -1
- package/dist/Breadcrumbs.js +15 -16
- package/dist/Breadcrumbs.js.map +1 -1
- package/dist/Breadcrumbs.jsx +19 -24
- package/dist/Breadcrumbs.jsx.map +1 -1
- package/dist/Calendar.d.ts.map +1 -1
- package/dist/Calendar.js +100 -65
- package/dist/Calendar.js.map +1 -1
- package/dist/Calendar.jsx +10 -1
- package/dist/Calendar.jsx.map +1 -1
- package/dist/Color.d.ts.map +1 -1
- package/dist/Color.js +15 -18
- package/dist/Color.js.map +1 -1
- package/dist/Color.jsx +15 -19
- package/dist/Color.jsx.map +1 -1
- package/dist/ComboBox.d.ts +4 -0
- package/dist/ComboBox.d.ts.map +1 -1
- package/dist/ComboBox.js +21 -13
- package/dist/ComboBox.js.map +1 -1
- package/dist/ComboBox.jsx +23 -13
- package/dist/ComboBox.jsx.map +1 -1
- package/dist/DateField.d.ts +11 -2
- package/dist/DateField.d.ts.map +1 -1
- package/dist/DateField2.js +237 -234
- package/dist/DateField2.js.map +1 -1
- package/dist/DateField2.jsx +134 -97
- package/dist/DateField2.jsx.map +1 -1
- package/dist/DatePicker.d.ts +42 -3
- package/dist/DatePicker.d.ts.map +1 -1
- package/dist/DatePicker.js +6 -990
- package/dist/DatePicker.jsx +6 -681
- package/dist/DatePicker2.js +1171 -0
- package/dist/DatePicker2.js.map +1 -0
- package/dist/DatePicker2.jsx +820 -0
- package/dist/DatePicker2.jsx.map +1 -0
- package/dist/DateRangePickerContext.d.ts +2 -0
- package/dist/DateRangePickerContext.d.ts.map +1 -1
- package/dist/Disclosure.d.ts.map +1 -1
- package/dist/Disclosure.js +3 -0
- package/dist/Disclosure.js.map +1 -1
- package/dist/Disclosure.jsx +1 -1
- package/dist/Disclosure.jsx.map +1 -1
- package/dist/GridList.d.ts.map +1 -1
- package/dist/GridList.js +2 -2
- package/dist/GridList.js.map +1 -1
- package/dist/GridList.jsx +2 -2
- package/dist/GridList.jsx.map +1 -1
- package/dist/ListBox.d.ts +2 -2
- package/dist/ListBox.d.ts.map +1 -1
- package/dist/ListBox.js +327 -166
- package/dist/ListBox.js.map +1 -1
- package/dist/ListBox.jsx +161 -25
- package/dist/ListBox.jsx.map +1 -1
- package/dist/Modal.d.ts.map +1 -1
- package/dist/Modal.js +7 -5
- package/dist/Modal.js.map +1 -1
- package/dist/Modal.jsx +5 -5
- package/dist/Modal.jsx.map +1 -1
- package/dist/Popover.d.ts.map +1 -1
- package/dist/Popover.js +16 -9
- package/dist/Popover.js.map +1 -1
- package/dist/Popover.jsx +25 -4
- package/dist/Popover.jsx.map +1 -1
- package/dist/RangeCalendar.d.ts.map +1 -1
- package/dist/RangeCalendar.js +182 -46
- package/dist/RangeCalendar.js.map +1 -1
- package/dist/RangeCalendar.jsx +72 -2
- package/dist/RangeCalendar.jsx.map +1 -1
- package/dist/SearchField.d.ts.map +1 -1
- package/dist/SearchField.js +26 -2
- package/dist/SearchField.js.map +1 -1
- package/dist/SearchField.jsx +26 -2
- package/dist/SearchField.jsx.map +1 -1
- package/dist/Select.d.ts +7 -0
- package/dist/Select.d.ts.map +1 -1
- package/dist/Select.js +62 -49
- package/dist/Select.js.map +1 -1
- package/dist/Select.jsx +33 -18
- package/dist/Select.jsx.map +1 -1
- package/dist/SharedElementTransition.d.ts.map +1 -1
- package/dist/SharedElementTransition.js +35 -33
- package/dist/SharedElementTransition.js.map +1 -1
- package/dist/SharedElementTransition.jsx +35 -33
- package/dist/SharedElementTransition.jsx.map +1 -1
- package/dist/StepList.d.ts.map +1 -1
- package/dist/StepList.js +2 -9
- package/dist/StepList.js.map +1 -1
- package/dist/StepList.jsx +1 -6
- package/dist/StepList.jsx.map +1 -1
- package/dist/Table.d.ts +2 -0
- package/dist/Table.d.ts.map +1 -1
- package/dist/Table.js +10 -3
- package/dist/Table.js.map +1 -1
- package/dist/Table.jsx +10 -3
- package/dist/Table.jsx.map +1 -1
- package/dist/Tabs.d.ts.map +1 -1
- package/dist/Tabs.js +3 -0
- package/dist/Tabs.js.map +1 -1
- package/dist/Tabs.jsx +1 -1
- package/dist/Tabs.jsx.map +1 -1
- package/dist/TagGroup.d.ts +3 -1
- package/dist/TagGroup.d.ts.map +1 -1
- package/dist/TagGroup.js +12 -8
- package/dist/TagGroup.js.map +1 -1
- package/dist/TagGroup.jsx +11 -8
- package/dist/TagGroup.jsx.map +1 -1
- package/dist/TextField.js +4 -1
- package/dist/TextField.js.map +1 -1
- package/dist/TextField.jsx +4 -1
- package/dist/TextField.jsx.map +1 -1
- package/dist/TimeField.d.ts +14 -50
- package/dist/TimeField.d.ts.map +1 -1
- package/dist/TimeField.js +111 -205
- package/dist/TimeField.js.map +1 -1
- package/dist/TimeField.jsx +76 -82
- package/dist/TimeField.jsx.map +1 -1
- package/dist/Tree.d.ts.map +1 -1
- package/dist/Tree.js +3 -3
- package/dist/Tree.js.map +1 -1
- package/dist/Tree.jsx +3 -3
- package/dist/Tree.jsx.map +1 -1
- package/dist/index.d.ts +2 -3
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +5 -6
- package/dist/index.jsx +5 -6
- package/dist/useDragAndDrop.d.ts +0 -8
- package/dist/useDragAndDrop.d.ts.map +1 -1
- package/dist/useDragAndDrop2.js +6 -2
- package/dist/useDragAndDrop2.js.map +1 -1
- package/dist/useDragAndDrop2.jsx +6 -2
- package/dist/useDragAndDrop2.jsx.map +1 -1
- package/dist/utils.d.ts +1 -0
- package/dist/utils.d.ts.map +1 -1
- package/dist/utils.js +2 -2
- package/dist/utils.js.map +1 -1
- package/dist/utils.jsx +2 -2
- package/dist/utils.jsx.map +1 -1
- package/package.json +3 -9
- package/src/ActionBar.tsx +10 -12
- package/src/ActionGroup.tsx +5 -3
- package/src/Autocomplete.tsx +14 -9
- package/src/Breadcrumbs.tsx +55 -38
- package/src/Calendar.tsx +30 -1
- package/src/Color.tsx +42 -27
- package/src/ComboBox.tsx +49 -17
- package/src/DateField.tsx +285 -52
- package/src/DatePicker.tsx +345 -57
- package/src/DateRangePickerContext.tsx +2 -0
- package/src/Disclosure.tsx +4 -0
- package/src/GridList.tsx +8 -2
- package/src/ListBox.tsx +323 -21
- package/src/Modal.tsx +21 -5
- package/src/Popover.tsx +28 -7
- package/src/RangeCalendar.tsx +120 -1
- package/src/SearchField.tsx +53 -1
- package/src/Select.tsx +101 -20
- package/src/SharedElementTransition.tsx +92 -36
- package/src/StepList.tsx +0 -7
- package/src/Table.tsx +19 -4
- package/src/Tabs.tsx +1 -0
- package/src/TagGroup.tsx +26 -6
- package/src/TextField.tsx +1 -1
- package/src/TimeField.tsx +113 -196
- package/src/Tree.tsx +14 -4
- package/src/index.ts +1 -8
- package/src/useDragAndDrop.ts +8 -10
- package/src/utils.tsx +3 -3
- package/dist/DatePicker.js.map +0 -1
- package/dist/DatePicker.jsx.map +0 -1
- package/dist/HiddenTimeInput.d.ts +0 -25
- package/dist/HiddenTimeInput.d.ts.map +0 -1
- package/dist/HiddenTimeInput.js +0 -104
- package/dist/HiddenTimeInput.js.map +0 -1
- package/dist/HiddenTimeInput.jsx +0 -69
- package/dist/HiddenTimeInput.jsx.map +0 -1
- package/src/HiddenTimeInput.tsx +0 -133
package/dist/TimeField.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TimeField.js","names":["JSX","Context","createContext","createMemo","createSignal","splitProps","useContext","For","Show","createTimeField","createTimeSegment","AriaTimeFieldProps","createTimeFieldState","access","TimeFieldState","TimeFieldStateProps","TimeSegment","TimeSegmentType","TimeValue","RenderChildren","ClassNameOrFunction","StyleOrFunction","SlotProps","useRenderProps","dataAttr","useIsHydrated","Provider","TextContext","HiddenTimeInput","FormContext","FormProps","TimeFieldRenderProps","isDisabled","isReadOnly","isRequired","isInvalid","TimeFieldProps","Omit","T","children","Element","segment","class","style","locale","TimeInputRenderProps","isFocused","TimeInputProps","TimeSegmentRenderProps","isEditable","isPlaceholder","type","text","TimeSegmentProps","TimeFieldContextValue","state","aria","labelProps","Record","inputProps","descriptionProps","errorMessageProps","TimeFieldContext","TimeFieldStateContext","withFormValidationBehavior","props","P","formContext","validationBehavior","Proxy","get","target","property","receiver","localValue","Reflect","undefined","has","ownKeys","keys","Set","add","Array","from","getOwnPropertyDescriptor","descriptor","enumerable","configurable","useTimeFieldContextValue","context","Error","useTimeFieldContext","TimeField","isHydrated","_$createComponent","when","fallback","_$getNextElement","_tmpl$","TimeFieldInner","_$mergeProps","__formContext","TimeFieldInnerProps","mergedProps","local","stateProps","rest","fieldRef","setFieldRef","HTMLDivElement","fieldAria","description","errorMessage","renderValues","renderProps","defaultClassName","textSlots","slots","value","_el$2","_tmpl$2","_$use","_$spread","fieldProps","data-disabled","data-readonly","data-required","data-invalid","_$insert","values","_$runHydrationEvents","name","form","autoComplete","validationState","focus","querySelector","HTMLElement","minValue","maxValue","granularity","TimeInput","setIsFocused","_el$3","data-focused","onFocusIn","onFocusOut","each","segments","segmentRef","setSegmentRef","segmentAria","getChildren","renderChildren","_el$4","segmentProps","data-editable","data-placeholder","data-type","TimeFieldLabelProps","TimeFieldLabel","_el$5","_tmpl$3","TimeFieldDescriptionProps","TimeFieldDescription","_el$6","_tmpl$4","TimeFieldErrorMessageProps","TimeFieldErrorMessage","_el$7"],"sources":["../src/TimeField.tsx"],"sourcesContent":["/**\n * TimeField component for solidaria-components\n *\n * Pre-wired headless time field component with segment-based editing.\n * Port of react-aria-components/src/TimeField.tsx\n */\n\nimport {\n type JSX,\n type Context,\n createContext,\n createMemo,\n createSignal,\n splitProps,\n useContext,\n For,\n Show,\n} from \"solid-js\";\nimport {\n createTimeField,\n createTimeSegment,\n type AriaTimeFieldProps,\n} from \"@proyecto-viviana/solidaria\";\nimport {\n createTimeFieldState,\n access,\n type TimeFieldState,\n type TimeFieldStateProps,\n type TimeSegment as TimeSegmentType,\n type TimeValue,\n} from \"@proyecto-viviana/solid-stately\";\nimport {\n type RenderChildren,\n type ClassNameOrFunction,\n type StyleOrFunction,\n type SlotProps,\n useRenderProps,\n dataAttr,\n useIsHydrated,\n Provider,\n} from \"./utils\";\nimport { TextContext } from \"./Text\";\nimport { HiddenTimeInput } from \"./HiddenTimeInput\";\nimport { FormContext, type FormProps } from \"./Form\";\n\nexport interface TimeFieldRenderProps {\n /** Whether the field is disabled. */\n isDisabled: boolean;\n /** Whether the field is read-only. */\n isReadOnly: boolean;\n /** Whether the field is required. */\n isRequired: boolean;\n /** Whether the field is invalid. */\n isInvalid: boolean;\n}\n\nexport interface TimeFieldProps<T extends TimeValue = TimeValue>\n extends\n Omit<AriaTimeFieldProps, \"id\" | \"isDisabled\" | \"isReadOnly\" | \"isRequired\">,\n Omit<TimeFieldStateProps<T>, \"locale\">,\n SlotProps {\n /** The children of the component. */\n children?: JSX.Element | ((segment: TimeSegmentType) => JSX.Element);\n /** The CSS className for the element. */\n class?: ClassNameOrFunction<TimeFieldRenderProps>;\n /** The inline style for the element. */\n style?: StyleOrFunction<TimeFieldRenderProps>;\n /** The locale to use for formatting. */\n locale?: string;\n}\n\nexport interface TimeInputRenderProps {\n /** Whether the input is disabled. */\n isDisabled: boolean;\n /** Whether the input is focused. */\n isFocused: boolean;\n}\n\nexport interface TimeInputProps extends SlotProps {\n /** The children of the component (render function receiving segments). */\n children?: (segment: TimeSegmentType) => JSX.Element;\n /** The CSS className for the element. */\n class?: ClassNameOrFunction<TimeInputRenderProps>;\n /** The inline style for the element. */\n style?: StyleOrFunction<TimeInputRenderProps>;\n}\n\nexport interface TimeSegmentRenderProps {\n /** Whether the segment is focused. */\n isFocused: boolean;\n /** Whether the segment is editable. */\n isEditable: boolean;\n /** Whether the segment is a placeholder. */\n isPlaceholder: boolean;\n /** The segment type. */\n type: TimeSegmentType[\"type\"];\n /** The text to display. */\n text: string;\n}\n\nexport interface TimeSegmentProps extends SlotProps {\n /** The segment data. */\n segment: TimeSegmentType;\n /** The children of the component. A function may be provided to receive render props. */\n children?: RenderChildren<TimeSegmentRenderProps>;\n /** The CSS className for the element. */\n class?: ClassNameOrFunction<TimeSegmentRenderProps>;\n /** The inline style for the element. */\n style?: StyleOrFunction<TimeSegmentRenderProps>;\n}\n\nexport interface TimeFieldContextValue {\n state: TimeFieldState<TimeValue>;\n aria: {\n labelProps: Record<string, unknown>;\n inputProps: Record<string, unknown>;\n descriptionProps: Record<string, unknown>;\n errorMessageProps: Record<string, unknown>;\n };\n}\n\nexport const TimeFieldContext = createContext<TimeFieldContextValue | null>(null);\nexport const TimeFieldStateContext = createContext<TimeFieldState<TimeValue> | null>(null);\n\nfunction withFormValidationBehavior<P extends object>(props: P, formContext: FormProps | null): P {\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\nfunction useTimeFieldContextValue(): TimeFieldContextValue {\n const context = useContext(TimeFieldContext);\n if (!context) {\n throw new Error(\"TimeField components must be used within a TimeField\");\n }\n return context;\n}\n\nexport function useTimeFieldContext(): TimeFieldState<TimeValue> {\n return useTimeFieldContextValue().state;\n}\n\n/**\n * A time field allows users to enter and edit time values using a keyboard.\n *\n * @example\n * ```tsx\n * <TimeField label=\"Time\">\n * <Label>Time</Label>\n * <TimeInput>\n * {(segment) => <TimeSegment segment={segment} />}\n * </TimeInput>\n * </TimeField>\n * ```\n */\nexport function TimeField<T extends TimeValue = TimeValue>(props: TimeFieldProps<T>): JSX.Element {\n // Use hydration-safe pattern for client-only rendering\n const isHydrated = useIsHydrated();\n const formContext = useContext(FormContext);\n\n return (\n <Show\n when={isHydrated()}\n fallback={\n <div class=\"solidaria-TimeField solidaria-TimeField--placeholder\" aria-hidden=\"true\" />\n }\n >\n <TimeFieldInner {...props} __formContext={formContext} />\n </Show>\n );\n}\n\ntype TimeFieldInnerProps<T extends TimeValue = TimeValue> = TimeFieldProps<T> & {\n __formContext?: FormProps | null;\n};\n\n/**\n * Internal TimeField component that renders after client mount.\n */\nfunction TimeFieldInner<T extends TimeValue = TimeValue>(\n props: TimeFieldInnerProps<T>,\n): JSX.Element {\n const formContext = props.__formContext ?? useContext(FormContext);\n const mergedProps = withFormValidationBehavior(props, formContext);\n const [local, stateProps, rest] = splitProps(\n mergedProps,\n [\"children\", \"class\", \"style\", \"slot\", \"__formContext\"],\n [\n \"value\",\n \"defaultValue\",\n \"onChange\",\n \"minValue\",\n \"maxValue\",\n \"isInvalid\",\n \"isDisabled\",\n \"isReadOnly\",\n \"isRequired\",\n \"locale\",\n \"granularity\",\n \"hourCycle\",\n \"shouldForceLeadingZeros\",\n \"validationState\",\n \"validationBehavior\",\n \"validate\",\n \"description\",\n \"errorMessage\",\n \"placeholderValue\",\n ],\n );\n\n const [fieldRef, setFieldRef] = createSignal<HTMLDivElement | null>(null);\n\n const state = createTimeFieldState(stateProps);\n\n const fieldAria = createTimeField(\n () => ({\n ...(rest as Record<string, unknown>),\n description: stateProps.description,\n errorMessage: stateProps.errorMessage,\n }),\n state as unknown as TimeFieldState<TimeValue>,\n fieldRef,\n );\n\n const renderValues = createMemo<TimeFieldRenderProps>(() => ({\n isDisabled: state.isDisabled(),\n isReadOnly: state.isReadOnly(),\n isRequired: state.isRequired(),\n isInvalid: state.isInvalid(),\n }));\n\n const renderProps = useRenderProps(\n {\n class: local.class,\n style: local.style,\n defaultClassName: \"solidaria-TimeField\",\n },\n renderValues,\n );\n\n const validationBehavior = () =>\n (stateProps as { validationBehavior?: \"aria\" | \"native\" }).validationBehavior ??\n formContext?.validationBehavior ??\n \"native\";\n\n const textSlots = {\n slots: {\n get description() {\n return fieldAria.descriptionProps;\n },\n get errorMessage() {\n return fieldAria.errorMessageProps;\n },\n },\n };\n\n return (\n <TimeFieldStateContext.Provider value={state as unknown as TimeFieldState<TimeValue>}>\n <TimeFieldContext.Provider\n value={{\n state: state as unknown as TimeFieldState<TimeValue>,\n aria: {\n labelProps: fieldAria.labelProps,\n inputProps: fieldAria.inputProps,\n descriptionProps: fieldAria.descriptionProps,\n errorMessageProps: fieldAria.errorMessageProps,\n },\n }}\n >\n <div\n ref={setFieldRef}\n {...fieldAria.fieldProps}\n class={renderProps.class()}\n style={renderProps.style()}\n data-disabled={dataAttr(state.isDisabled())}\n data-readonly={dataAttr(state.isReadOnly())}\n data-required={dataAttr(state.isRequired())}\n data-invalid={dataAttr(state.isInvalid())}\n >\n <Provider values={[[TextContext, textSlots]] as Array<[Context<unknown>, unknown]>}>\n {local.children as JSX.Element}\n </Provider>\n </div>\n <Show when={(rest as Record<string, unknown>).name}>\n <HiddenTimeInput\n name={(rest as Record<string, unknown>).name as string | undefined}\n form={(rest as Record<string, unknown>).form as string | undefined}\n value={state.value()}\n autoComplete={(rest as Record<string, unknown>).autoComplete as string | undefined}\n isDisabled={state.isDisabled()}\n isRequired={state.isRequired()}\n validationBehavior={validationBehavior()}\n validationState={state}\n focus={() => {\n fieldRef()?.querySelector<HTMLElement>('[role=\"spinbutton\"]')?.focus();\n }}\n minValue={access(stateProps.minValue) as TimeValue | undefined}\n maxValue={access(stateProps.maxValue) as TimeValue | undefined}\n granularity={state.granularity}\n />\n </Show>\n </TimeFieldContext.Provider>\n </TimeFieldStateContext.Provider>\n );\n}\n\n/**\n * The input area containing time segments.\n */\nexport function TimeInput(props: TimeInputProps): JSX.Element {\n const { state, aria } = useTimeFieldContextValue();\n const [isFocused, setIsFocused] = createSignal(false);\n\n const renderValues = createMemo<TimeInputRenderProps>(() => ({\n isDisabled: state.isDisabled(),\n isFocused: isFocused(),\n }));\n\n const renderProps = useRenderProps(\n {\n class: props.class,\n style: props.style,\n defaultClassName: \"solidaria-TimeInput\",\n },\n renderValues,\n );\n\n return (\n <div\n {...aria.inputProps}\n class={renderProps.class()}\n style={renderProps.style()}\n data-disabled={dataAttr(state.isDisabled())}\n data-focused={dataAttr(isFocused())}\n onFocusIn={() => setIsFocused(true)}\n onFocusOut={() => setIsFocused(false)}\n >\n <For each={state.segments()}>{(segment) => props.children?.(segment)}</For>\n </div>\n );\n}\n\n/**\n * A segment of a time field (hour, minute, second, AM/PM).\n */\nexport function TimeSegment(props: TimeSegmentProps): JSX.Element {\n const state = useTimeFieldContext();\n const [segmentRef, setSegmentRef] = createSignal<HTMLDivElement | null>(null);\n\n const segmentAria = createTimeSegment(\n { segment: props.segment },\n state as unknown as TimeFieldState,\n segmentRef,\n );\n\n const renderValues = createMemo<TimeSegmentRenderProps>(() => ({\n isFocused: segmentAria.isFocused,\n isEditable: segmentAria.isEditable,\n isPlaceholder: segmentAria.isPlaceholder,\n type: props.segment.type,\n text: segmentAria.text,\n }));\n\n const renderProps = useRenderProps(\n {\n get children() {\n return props.children;\n },\n class: props.class,\n style: props.style,\n defaultClassName: \"solidaria-TimeSegment\",\n },\n renderValues,\n );\n\n // Determine children content - avoid Show for SSR hydration compatibility\n const getChildren = () => {\n if (typeof props.children === \"function\") {\n return renderProps.renderChildren();\n }\n return segmentAria.text;\n };\n\n return (\n <div\n ref={setSegmentRef}\n {...segmentAria.segmentProps}\n class={renderProps.class()}\n style={renderProps.style()}\n data-focused={dataAttr(segmentAria.isFocused)}\n data-editable={dataAttr(segmentAria.isEditable)}\n data-placeholder={dataAttr(segmentAria.isPlaceholder)}\n data-type={props.segment.type}\n >\n {getChildren()}\n </div>\n );\n}\n\nexport interface TimeFieldLabelProps {\n children?: JSX.Element;\n class?: string;\n}\n\nexport function TimeFieldLabel(props: TimeFieldLabelProps): JSX.Element {\n const { aria } = useTimeFieldContextValue();\n return (\n <span {...aria.labelProps} class={props.class}>\n {props.children}\n </span>\n );\n}\n\nexport interface TimeFieldDescriptionProps {\n children?: JSX.Element;\n class?: string;\n}\n\nexport function TimeFieldDescription(props: TimeFieldDescriptionProps): JSX.Element {\n const { aria } = useTimeFieldContextValue();\n return (\n <p {...aria.descriptionProps} class={props.class}>\n {props.children}\n </p>\n );\n}\n\nexport interface TimeFieldErrorMessageProps {\n children?: JSX.Element;\n class?: string;\n}\n\nexport function TimeFieldErrorMessage(props: TimeFieldErrorMessageProps): JSX.Element {\n const { aria } = useTimeFieldContextValue();\n return (\n <p {...aria.errorMessageProps} class={props.class}>\n {props.children}\n </p>\n );\n}\n\nexport type { TimeFieldState, TimeSegmentType, TimeValue };\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"TimeField.js","names":["JSX","Context","createContext","createMemo","createSignal","splitProps","useContext","Show","createTimeField","mergeProps","AriaTimeFieldProps","createTimeFieldState","access","TimeFieldState","TimeFieldStateProps","TimeSegment","TimeSegmentType","TimeValue","DateFieldContext","DateFieldStateContext","DateFieldContextValue","ClassNameOrFunction","StyleOrFunction","SlotProps","useRenderProps","dataAttr","useIsHydrated","Provider","TextContext","FormContext","FormProps","TimeFieldRenderProps","isDisabled","isReadOnly","isRequired","isInvalid","TimeFieldProps","Omit","T","children","Element","segment","class","style","locale","TimeFieldContextValue","state","aria","labelProps","Record","inputProps","descriptionProps","errorMessageProps","TimeFieldContext","TimeFieldStateContext","withFormValidationBehavior","props","P","formContext","validationBehavior","Proxy","get","target","property","receiver","localValue","Reflect","undefined","has","ownKeys","keys","Set","add","Array","from","getOwnPropertyDescriptor","descriptor","enumerable","configurable","useTimeFieldContextValue","context","Error","useTimeFieldContext","TimeField","isHydrated","_$createComponent","when","fallback","_$getNextElement","_tmpl$","TimeFieldInner","_$mergeProps","__formContext","TimeFieldInnerProps","mergedProps","local","stateProps","rest","fieldRef","setFieldRef","HTMLDivElement","validationInputRef","setValidationInputRef","HTMLInputElement","fieldAria","description","errorMessage","inputRef","renderValues","renderProps","defaultClassName","textSlots","slots","dateFieldContextValue","fieldProps","hiddenInputProps","ref","value","_el$2","_tmpl$2","_$use","_$insert","values","_$effect","_p$","_v$","_v$2","_v$3","_v$4","_v$5","_v$6","e","_$className","t","_$style","a","_$setAttribute","o","i","n","TimeFieldLabelProps","TimeFieldLabel","_el$3","_tmpl$3","_$spread","_$runHydrationEvents","TimeFieldDescriptionProps","TimeFieldDescription","_el$4","TimeFieldErrorMessageProps","TimeFieldErrorMessage","_el$5"],"sources":["../src/TimeField.tsx"],"sourcesContent":["/**\n * TimeField component for solidaria-components\n *\n * Pre-wired headless time field. Faithful port of react-aria-components'\n * TimeField, which does NOT define its own segment primitives — it reuses\n * `DateInput`/`DateSegment` (there is no `TimeInput`/`TimeSegment` upstream).\n * `TimeFieldState` IS a `DateFieldState` (plus `timeValue`), so this component\n * drives the certified DateField segment/group stack directly: it provides the\n * shared `DateFieldContext`/`DateFieldStateContext` that `DateInput`/`DateSegment`\n * read, plus a `TimeFieldContext` for the time-field label/description/error\n * chrome. Unlike DateField, TimeField renders NO root hidden autofill input (RAC\n * TimeField renders none); its native-validation `<input>` is still emitted by\n * the inner DateInput sibling.\n */\n\nimport {\n type JSX,\n type Context,\n createContext,\n createMemo,\n createSignal,\n splitProps,\n useContext,\n Show,\n} from \"solid-js\";\nimport { createTimeField, mergeProps, type AriaTimeFieldProps } from \"@proyecto-viviana/solidaria\";\nimport {\n createTimeFieldState,\n access,\n type TimeFieldState,\n type TimeFieldStateProps,\n type TimeSegment as TimeSegmentType,\n type TimeValue,\n} from \"@proyecto-viviana/solid-stately\";\nimport {\n DateFieldContext,\n DateFieldStateContext,\n type DateFieldContextValue,\n} from \"./DateField\";\nimport {\n type ClassNameOrFunction,\n type StyleOrFunction,\n type SlotProps,\n useRenderProps,\n dataAttr,\n useIsHydrated,\n Provider,\n} from \"./utils\";\nimport { TextContext } from \"./Text\";\nimport { FormContext, type FormProps } from \"./Form\";\n\nexport interface TimeFieldRenderProps {\n /** Whether the field is disabled. */\n isDisabled: boolean;\n /** Whether the field is read-only. */\n isReadOnly: boolean;\n /** Whether the field is required. */\n isRequired: boolean;\n /** Whether the field is invalid. */\n isInvalid: boolean;\n}\n\nexport interface TimeFieldProps<T extends TimeValue = TimeValue>\n extends\n Omit<AriaTimeFieldProps, \"id\" | \"isDisabled\" | \"isReadOnly\" | \"isRequired\">,\n Omit<TimeFieldStateProps<T>, \"locale\">,\n SlotProps {\n /** The children of the component. */\n children?: JSX.Element | ((segment: TimeSegmentType) => JSX.Element);\n /** The CSS className for the element. */\n class?: ClassNameOrFunction<TimeFieldRenderProps>;\n /** The inline style for the element. */\n style?: StyleOrFunction<TimeFieldRenderProps>;\n /** The locale to use for formatting. */\n locale?: string;\n}\n\nexport interface TimeFieldContextValue {\n state: TimeFieldState<TimeValue>;\n aria: {\n labelProps: Record<string, unknown>;\n inputProps: Record<string, unknown>;\n descriptionProps: Record<string, unknown>;\n errorMessageProps: Record<string, unknown>;\n };\n}\n\nexport const TimeFieldContext = createContext<TimeFieldContextValue | null>(null);\nexport const TimeFieldStateContext = createContext<TimeFieldState<TimeValue> | null>(null);\n\nfunction withFormValidationBehavior<P extends object>(props: P, formContext: FormProps | null): P {\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\nfunction useTimeFieldContextValue(): TimeFieldContextValue {\n const context = useContext(TimeFieldContext);\n if (!context) {\n throw new Error(\"TimeField components must be used within a TimeField\");\n }\n return context;\n}\n\nexport function useTimeFieldContext(): TimeFieldState<TimeValue> {\n return useTimeFieldContextValue().state;\n}\n\n/**\n * A time field allows users to enter and edit time values using a keyboard.\n *\n * @example\n * ```tsx\n * <TimeField label=\"Time\">\n * <Label>Time</Label>\n * <DateInput>\n * {(segment) => <DateSegment segment={segment} />}\n * </DateInput>\n * </TimeField>\n * ```\n */\nexport function TimeField<T extends TimeValue = TimeValue>(props: TimeFieldProps<T>): JSX.Element {\n // Use hydration-safe pattern for client-only rendering\n const isHydrated = useIsHydrated();\n const formContext = useContext(FormContext);\n\n return (\n <Show\n when={isHydrated()}\n fallback={\n <div class=\"solidaria-TimeField solidaria-TimeField--placeholder\" aria-hidden=\"true\" />\n }\n >\n <TimeFieldInner {...props} __formContext={formContext} />\n </Show>\n );\n}\n\ntype TimeFieldInnerProps<T extends TimeValue = TimeValue> = TimeFieldProps<T> & {\n __formContext?: FormProps | null;\n};\n\n/**\n * Internal TimeField component that renders after client mount.\n */\nfunction TimeFieldInner<T extends TimeValue = TimeValue>(\n props: TimeFieldInnerProps<T>,\n): JSX.Element {\n const formContext = props.__formContext ?? useContext(FormContext);\n const mergedProps = withFormValidationBehavior(props, formContext);\n const [local, stateProps, rest] = splitProps(\n mergedProps,\n [\"children\", \"class\", \"style\", \"slot\", \"__formContext\"],\n [\n \"value\",\n \"defaultValue\",\n \"onChange\",\n \"minValue\",\n \"maxValue\",\n \"isInvalid\",\n \"isDisabled\",\n \"isReadOnly\",\n \"isRequired\",\n \"locale\",\n \"granularity\",\n \"hourCycle\",\n \"hideTimeZone\",\n \"shouldForceLeadingZeros\",\n \"validationState\",\n \"validationBehavior\",\n \"validate\",\n \"description\",\n \"errorMessage\",\n \"placeholderValue\",\n ],\n );\n\n const [fieldRef, setFieldRef] = createSignal<HTMLDivElement | null>(null);\n // Ref to the hidden validation <input> (the DateInput's `<Input>` sibling).\n // Mirrors DateField: create it here, hand it to createTimeField below, and\n // attach it to the same input through the DateFieldContext getter.\n const [validationInputRef, setValidationInputRef] =\n createSignal<HTMLInputElement | null>(null);\n\n const state = createTimeFieldState(stateProps);\n\n const fieldAria = createTimeField(\n () => ({\n ...(rest as Record<string, unknown>),\n // RAC threads these props into both useTimeFieldState and useTimeField;\n // they live in `stateProps` here, so forward them for the field hook's\n // aria-disabled and the native validation <input> (type/required).\n isDisabled: access(stateProps.isDisabled),\n isReadOnly: access(stateProps.isReadOnly),\n isRequired: access(stateProps.isRequired),\n // Standalone default flips the hidden input to type=\"text\" so an empty\n // required value blocks HTML form submission (mirrors DateField).\n validationBehavior: stateProps.validationBehavior ?? \"native\",\n description: stateProps.description,\n errorMessage: stateProps.errorMessage,\n inputRef: () => validationInputRef() ?? undefined,\n }),\n state as unknown as TimeFieldState<TimeValue>,\n fieldRef,\n );\n\n const renderValues = createMemo<TimeFieldRenderProps>(() => ({\n isDisabled: state.isDisabled(),\n isReadOnly: state.isReadOnly(),\n isRequired: state.isRequired(),\n isInvalid: state.isInvalid(),\n }));\n\n const renderProps = useRenderProps(\n {\n class: local.class,\n style: local.style,\n defaultClassName: \"solidaria-TimeField\",\n },\n renderValues,\n );\n\n const textSlots = {\n slots: {\n get description() {\n return fieldAria.descriptionProps;\n },\n get errorMessage() {\n return fieldAria.errorMessageProps;\n },\n },\n };\n\n // The shared context read by the reused DateInput/DateSegment. Read through\n // getters so consumers see the LIVE memo values (createDescription appends the\n // value-description id via a deferred effect; a frozen snapshot would miss it).\n const dateFieldContextValue: DateFieldContextValue = {\n get state() {\n return state as unknown as DateFieldContextValue[\"state\"];\n },\n aria: {\n get labelProps() {\n return fieldAria.labelProps;\n },\n // The segment group props (role=\"group\", aria-labelledby, unicode-bidi\n // isolate, arrow-key nav, focus-within handlers) are routed to the\n // DateInput element; the outer wrapper stays roleless.\n get inputProps() {\n return fieldAria.fieldProps;\n },\n // The native validation <input> props (type/hidden/required/onChange under\n // native validation), rendered as the DateInput's sibling. Thread the\n // validation-input ref so createTimeField's form-reset/validation wiring\n // resolves to the mounted element.\n get hiddenInputProps() {\n return mergeProps(fieldAria.inputProps, { ref: setValidationInputRef });\n },\n get descriptionProps() {\n return fieldAria.descriptionProps;\n },\n get errorMessageProps() {\n return fieldAria.errorMessageProps;\n },\n },\n };\n\n return (\n <TimeFieldStateContext.Provider value={state as unknown as TimeFieldState<TimeValue>}>\n <DateFieldStateContext.Provider\n value={state as unknown as DateFieldContextValue[\"state\"]}\n >\n <DateFieldContext.Provider value={dateFieldContextValue}>\n <TimeFieldContext.Provider\n value={{\n state: state as unknown as TimeFieldState<TimeValue>,\n aria: {\n get labelProps() {\n return fieldAria.labelProps;\n },\n get inputProps() {\n return fieldAria.fieldProps;\n },\n get descriptionProps() {\n return fieldAria.descriptionProps;\n },\n get errorMessageProps() {\n return fieldAria.errorMessageProps;\n },\n },\n }}\n >\n <div\n ref={setFieldRef}\n class={renderProps.class()}\n style={renderProps.style()}\n data-disabled={dataAttr(state.isDisabled())}\n data-readonly={dataAttr(state.isReadOnly())}\n data-required={dataAttr(state.isRequired())}\n data-invalid={dataAttr(state.isInvalid())}\n >\n <Provider values={[[TextContext, textSlots]] as Array<[Context<unknown>, unknown]>}>\n {local.children as JSX.Element}\n </Provider>\n </div>\n {/*\n Unlike DateField, TimeField renders NO root hidden autofill input —\n RAC TimeField renders none (react-aria-components TimeField.mjs). The\n native-validation <input> is emitted by the inner DateInput sibling.\n */}\n </TimeFieldContext.Provider>\n </DateFieldContext.Provider>\n </DateFieldStateContext.Provider>\n </TimeFieldStateContext.Provider>\n );\n}\n\nexport interface TimeFieldLabelProps {\n children?: JSX.Element;\n class?: string;\n}\n\nexport function TimeFieldLabel(props: TimeFieldLabelProps): JSX.Element {\n const { aria } = useTimeFieldContextValue();\n return (\n <span {...aria.labelProps} class={props.class}>\n {props.children}\n </span>\n );\n}\n\nexport interface TimeFieldDescriptionProps {\n children?: JSX.Element;\n class?: string;\n}\n\nexport function TimeFieldDescription(props: TimeFieldDescriptionProps): JSX.Element {\n const { aria } = useTimeFieldContextValue();\n return (\n <span {...aria.descriptionProps} class={props.class}>\n {props.children}\n </span>\n );\n}\n\nexport interface TimeFieldErrorMessageProps {\n children?: JSX.Element;\n class?: string;\n}\n\nexport function TimeFieldErrorMessage(props: TimeFieldErrorMessageProps): JSX.Element {\n const { aria } = useTimeFieldContextValue();\n return (\n <span {...aria.errorMessageProps} class={props.class}>\n {props.children}\n </span>\n );\n}\n\nexport type { TimeFieldState, TimeSegmentType, TimeValue };\n"],"mappings":"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"}
|
package/dist/TimeField.jsx
CHANGED
|
@@ -1,16 +1,24 @@
|
|
|
1
1
|
import { Provider, dataAttr, useIsHydrated, useRenderProps } from "./utils.jsx";
|
|
2
2
|
import { TextContext } from "./Text.jsx";
|
|
3
3
|
import { FormContext } from "./Form.jsx";
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import { createTimeField,
|
|
4
|
+
import { n as DateFieldContext, o as DateFieldStateContext } from "./DateField2.jsx";
|
|
5
|
+
import { Show, createContext, createMemo, createSignal, splitProps, useContext } from "solid-js";
|
|
6
|
+
import { createTimeField, mergeProps as mergeProps$1 } from "@proyecto-viviana/solidaria";
|
|
7
7
|
import { access, createTimeFieldState } from "@proyecto-viviana/solid-stately";
|
|
8
8
|
//#region src/TimeField.tsx
|
|
9
9
|
/**
|
|
10
10
|
* TimeField component for solidaria-components
|
|
11
11
|
*
|
|
12
|
-
* Pre-wired headless time field
|
|
13
|
-
*
|
|
12
|
+
* Pre-wired headless time field. Faithful port of react-aria-components'
|
|
13
|
+
* TimeField, which does NOT define its own segment primitives — it reuses
|
|
14
|
+
* `DateInput`/`DateSegment` (there is no `TimeInput`/`TimeSegment` upstream).
|
|
15
|
+
* `TimeFieldState` IS a `DateFieldState` (plus `timeValue`), so this component
|
|
16
|
+
* drives the certified DateField segment/group stack directly: it provides the
|
|
17
|
+
* shared `DateFieldContext`/`DateFieldStateContext` that `DateInput`/`DateSegment`
|
|
18
|
+
* read, plus a `TimeFieldContext` for the time-field label/description/error
|
|
19
|
+
* chrome. Unlike DateField, TimeField renders NO root hidden autofill input (RAC
|
|
20
|
+
* TimeField renders none); its native-validation `<input>` is still emitted by
|
|
21
|
+
* the inner DateInput sibling.
|
|
14
22
|
*/
|
|
15
23
|
const TimeFieldContext = createContext(null);
|
|
16
24
|
const TimeFieldStateContext = createContext(null);
|
|
@@ -56,9 +64,9 @@ function useTimeFieldContext() {
|
|
|
56
64
|
* ```tsx
|
|
57
65
|
* <TimeField label="Time">
|
|
58
66
|
* <Label>Time</Label>
|
|
59
|
-
* <
|
|
60
|
-
* {(segment) => <
|
|
61
|
-
* </
|
|
67
|
+
* <DateInput>
|
|
68
|
+
* {(segment) => <DateSegment segment={segment} />}
|
|
69
|
+
* </DateInput>
|
|
62
70
|
* </TimeField>
|
|
63
71
|
* ```
|
|
64
72
|
*/
|
|
@@ -73,8 +81,7 @@ function TimeField(props) {
|
|
|
73
81
|
* Internal TimeField component that renders after client mount.
|
|
74
82
|
*/
|
|
75
83
|
function TimeFieldInner(props) {
|
|
76
|
-
const
|
|
77
|
-
const [local, stateProps, rest] = splitProps(withFormValidationBehavior(props, formContext), [
|
|
84
|
+
const [local, stateProps, rest] = splitProps(withFormValidationBehavior(props, props.__formContext ?? useContext(FormContext)), [
|
|
78
85
|
"children",
|
|
79
86
|
"class",
|
|
80
87
|
"style",
|
|
@@ -93,6 +100,7 @@ function TimeFieldInner(props) {
|
|
|
93
100
|
"locale",
|
|
94
101
|
"granularity",
|
|
95
102
|
"hourCycle",
|
|
103
|
+
"hideTimeZone",
|
|
96
104
|
"shouldForceLeadingZeros",
|
|
97
105
|
"validationState",
|
|
98
106
|
"validationBehavior",
|
|
@@ -102,11 +110,17 @@ function TimeFieldInner(props) {
|
|
|
102
110
|
"placeholderValue"
|
|
103
111
|
]);
|
|
104
112
|
const [fieldRef, setFieldRef] = createSignal(null);
|
|
113
|
+
const [validationInputRef, setValidationInputRef] = createSignal(null);
|
|
105
114
|
const state = createTimeFieldState(stateProps);
|
|
106
115
|
const fieldAria = createTimeField(() => ({
|
|
107
116
|
...rest,
|
|
117
|
+
isDisabled: access(stateProps.isDisabled),
|
|
118
|
+
isReadOnly: access(stateProps.isReadOnly),
|
|
119
|
+
isRequired: access(stateProps.isRequired),
|
|
120
|
+
validationBehavior: stateProps.validationBehavior ?? "native",
|
|
108
121
|
description: stateProps.description,
|
|
109
|
-
errorMessage: stateProps.errorMessage
|
|
122
|
+
errorMessage: stateProps.errorMessage,
|
|
123
|
+
inputRef: () => validationInputRef() ?? void 0
|
|
110
124
|
}), state, fieldRef);
|
|
111
125
|
const renderValues = createMemo(() => ({
|
|
112
126
|
isDisabled: state.isDisabled(),
|
|
@@ -119,7 +133,6 @@ function TimeFieldInner(props) {
|
|
|
119
133
|
style: local.style,
|
|
120
134
|
defaultClassName: "solidaria-TimeField"
|
|
121
135
|
}, renderValues);
|
|
122
|
-
const validationBehavior = () => stateProps.validationBehavior ?? formContext?.validationBehavior ?? "native";
|
|
123
136
|
const textSlots = { slots: {
|
|
124
137
|
get description() {
|
|
125
138
|
return fieldAria.descriptionProps;
|
|
@@ -128,78 +141,59 @@ function TimeFieldInner(props) {
|
|
|
128
141
|
return fieldAria.errorMessageProps;
|
|
129
142
|
}
|
|
130
143
|
} };
|
|
144
|
+
const dateFieldContextValue = {
|
|
145
|
+
get state() {
|
|
146
|
+
return state;
|
|
147
|
+
},
|
|
148
|
+
aria: {
|
|
149
|
+
get labelProps() {
|
|
150
|
+
return fieldAria.labelProps;
|
|
151
|
+
},
|
|
152
|
+
get inputProps() {
|
|
153
|
+
return fieldAria.fieldProps;
|
|
154
|
+
},
|
|
155
|
+
get hiddenInputProps() {
|
|
156
|
+
return mergeProps$1(fieldAria.inputProps, { ref: setValidationInputRef });
|
|
157
|
+
},
|
|
158
|
+
get descriptionProps() {
|
|
159
|
+
return fieldAria.descriptionProps;
|
|
160
|
+
},
|
|
161
|
+
get errorMessageProps() {
|
|
162
|
+
return fieldAria.errorMessageProps;
|
|
163
|
+
}
|
|
164
|
+
}
|
|
165
|
+
};
|
|
131
166
|
return <TimeFieldStateContext.Provider value={state}>
|
|
132
|
-
<
|
|
167
|
+
<DateFieldStateContext.Provider value={state}>
|
|
168
|
+
<DateFieldContext.Provider value={dateFieldContextValue}>
|
|
169
|
+
<TimeFieldContext.Provider value={{
|
|
133
170
|
state,
|
|
134
171
|
aria: {
|
|
135
|
-
labelProps
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
172
|
+
get labelProps() {
|
|
173
|
+
return fieldAria.labelProps;
|
|
174
|
+
},
|
|
175
|
+
get inputProps() {
|
|
176
|
+
return fieldAria.fieldProps;
|
|
177
|
+
},
|
|
178
|
+
get descriptionProps() {
|
|
179
|
+
return fieldAria.descriptionProps;
|
|
180
|
+
},
|
|
181
|
+
get errorMessageProps() {
|
|
182
|
+
return fieldAria.errorMessageProps;
|
|
183
|
+
}
|
|
139
184
|
}
|
|
140
185
|
}}>
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
</Show>
|
|
151
|
-
</TimeFieldContext.Provider>
|
|
186
|
+
<div ref={setFieldRef} class={renderProps.class()} style={renderProps.style()} data-disabled={dataAttr(state.isDisabled())} data-readonly={dataAttr(state.isReadOnly())} data-required={dataAttr(state.isRequired())} data-invalid={dataAttr(state.isInvalid())}>
|
|
187
|
+
<Provider values={[[TextContext, textSlots]]}>
|
|
188
|
+
{local.children}
|
|
189
|
+
</Provider>
|
|
190
|
+
</div>
|
|
191
|
+
{}
|
|
192
|
+
</TimeFieldContext.Provider>
|
|
193
|
+
</DateFieldContext.Provider>
|
|
194
|
+
</DateFieldStateContext.Provider>
|
|
152
195
|
</TimeFieldStateContext.Provider>;
|
|
153
196
|
}
|
|
154
|
-
/**
|
|
155
|
-
* The input area containing time segments.
|
|
156
|
-
*/
|
|
157
|
-
function TimeInput(props) {
|
|
158
|
-
const { state, aria } = useTimeFieldContextValue();
|
|
159
|
-
const [isFocused, setIsFocused] = createSignal(false);
|
|
160
|
-
const renderValues = createMemo(() => ({
|
|
161
|
-
isDisabled: state.isDisabled(),
|
|
162
|
-
isFocused: isFocused()
|
|
163
|
-
}));
|
|
164
|
-
const renderProps = useRenderProps({
|
|
165
|
-
class: props.class,
|
|
166
|
-
style: props.style,
|
|
167
|
-
defaultClassName: "solidaria-TimeInput"
|
|
168
|
-
}, renderValues);
|
|
169
|
-
return <div {...aria.inputProps} class={renderProps.class()} style={renderProps.style()} data-disabled={dataAttr(state.isDisabled())} data-focused={dataAttr(isFocused())} onFocusIn={() => setIsFocused(true)} onFocusOut={() => setIsFocused(false)}>
|
|
170
|
-
<For each={state.segments()}>{(segment) => props.children?.(segment)}</For>
|
|
171
|
-
</div>;
|
|
172
|
-
}
|
|
173
|
-
/**
|
|
174
|
-
* A segment of a time field (hour, minute, second, AM/PM).
|
|
175
|
-
*/
|
|
176
|
-
function TimeSegment(props) {
|
|
177
|
-
const state = useTimeFieldContext();
|
|
178
|
-
const [segmentRef, setSegmentRef] = createSignal(null);
|
|
179
|
-
const segmentAria = createTimeSegment({ segment: props.segment }, state, segmentRef);
|
|
180
|
-
const renderValues = createMemo(() => ({
|
|
181
|
-
isFocused: segmentAria.isFocused,
|
|
182
|
-
isEditable: segmentAria.isEditable,
|
|
183
|
-
isPlaceholder: segmentAria.isPlaceholder,
|
|
184
|
-
type: props.segment.type,
|
|
185
|
-
text: segmentAria.text
|
|
186
|
-
}));
|
|
187
|
-
const renderProps = useRenderProps({
|
|
188
|
-
get children() {
|
|
189
|
-
return props.children;
|
|
190
|
-
},
|
|
191
|
-
class: props.class,
|
|
192
|
-
style: props.style,
|
|
193
|
-
defaultClassName: "solidaria-TimeSegment"
|
|
194
|
-
}, renderValues);
|
|
195
|
-
const getChildren = () => {
|
|
196
|
-
if (typeof props.children === "function") return renderProps.renderChildren();
|
|
197
|
-
return segmentAria.text;
|
|
198
|
-
};
|
|
199
|
-
return <div ref={setSegmentRef} {...segmentAria.segmentProps} class={renderProps.class()} style={renderProps.style()} data-focused={dataAttr(segmentAria.isFocused)} data-editable={dataAttr(segmentAria.isEditable)} data-placeholder={dataAttr(segmentAria.isPlaceholder)} data-type={props.segment.type}>
|
|
200
|
-
{getChildren()}
|
|
201
|
-
</div>;
|
|
202
|
-
}
|
|
203
197
|
function TimeFieldLabel(props) {
|
|
204
198
|
const { aria } = useTimeFieldContextValue();
|
|
205
199
|
return <span {...aria.labelProps} class={props.class}>
|
|
@@ -208,17 +202,17 @@ function TimeFieldLabel(props) {
|
|
|
208
202
|
}
|
|
209
203
|
function TimeFieldDescription(props) {
|
|
210
204
|
const { aria } = useTimeFieldContextValue();
|
|
211
|
-
return <
|
|
205
|
+
return <span {...aria.descriptionProps} class={props.class}>
|
|
212
206
|
{props.children}
|
|
213
|
-
</
|
|
207
|
+
</span>;
|
|
214
208
|
}
|
|
215
209
|
function TimeFieldErrorMessage(props) {
|
|
216
210
|
const { aria } = useTimeFieldContextValue();
|
|
217
|
-
return <
|
|
211
|
+
return <span {...aria.errorMessageProps} class={props.class}>
|
|
218
212
|
{props.children}
|
|
219
|
-
</
|
|
213
|
+
</span>;
|
|
220
214
|
}
|
|
221
215
|
//#endregion
|
|
222
|
-
export { TimeField, TimeFieldContext, TimeFieldDescription, TimeFieldErrorMessage, TimeFieldLabel, TimeFieldStateContext,
|
|
216
|
+
export { TimeField, TimeFieldContext, TimeFieldDescription, TimeFieldErrorMessage, TimeFieldLabel, TimeFieldStateContext, useTimeFieldContext };
|
|
223
217
|
|
|
224
218
|
//# sourceMappingURL=TimeField.jsx.map
|
package/dist/TimeField.jsx.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TimeField.jsx","names":[],"sources":["../src/TimeField.tsx"],"sourcesContent":["/**\n * TimeField component for solidaria-components\n *\n * Pre-wired headless time field component with segment-based editing.\n * Port of react-aria-components/src/TimeField.tsx\n */\n\nimport {\n type JSX,\n type Context,\n createContext,\n createMemo,\n createSignal,\n splitProps,\n useContext,\n For,\n Show,\n} from \"solid-js\";\nimport {\n createTimeField,\n createTimeSegment,\n type AriaTimeFieldProps,\n} from \"@proyecto-viviana/solidaria\";\nimport {\n createTimeFieldState,\n access,\n type TimeFieldState,\n type TimeFieldStateProps,\n type TimeSegment as TimeSegmentType,\n type TimeValue,\n} from \"@proyecto-viviana/solid-stately\";\nimport {\n type RenderChildren,\n type ClassNameOrFunction,\n type StyleOrFunction,\n type SlotProps,\n useRenderProps,\n dataAttr,\n useIsHydrated,\n Provider,\n} from \"./utils\";\nimport { TextContext } from \"./Text\";\nimport { HiddenTimeInput } from \"./HiddenTimeInput\";\nimport { FormContext, type FormProps } from \"./Form\";\n\nexport interface TimeFieldRenderProps {\n /** Whether the field is disabled. */\n isDisabled: boolean;\n /** Whether the field is read-only. */\n isReadOnly: boolean;\n /** Whether the field is required. */\n isRequired: boolean;\n /** Whether the field is invalid. */\n isInvalid: boolean;\n}\n\nexport interface TimeFieldProps<T extends TimeValue = TimeValue>\n extends\n Omit<AriaTimeFieldProps, \"id\" | \"isDisabled\" | \"isReadOnly\" | \"isRequired\">,\n Omit<TimeFieldStateProps<T>, \"locale\">,\n SlotProps {\n /** The children of the component. */\n children?: JSX.Element | ((segment: TimeSegmentType) => JSX.Element);\n /** The CSS className for the element. */\n class?: ClassNameOrFunction<TimeFieldRenderProps>;\n /** The inline style for the element. */\n style?: StyleOrFunction<TimeFieldRenderProps>;\n /** The locale to use for formatting. */\n locale?: string;\n}\n\nexport interface TimeInputRenderProps {\n /** Whether the input is disabled. */\n isDisabled: boolean;\n /** Whether the input is focused. */\n isFocused: boolean;\n}\n\nexport interface TimeInputProps extends SlotProps {\n /** The children of the component (render function receiving segments). */\n children?: (segment: TimeSegmentType) => JSX.Element;\n /** The CSS className for the element. */\n class?: ClassNameOrFunction<TimeInputRenderProps>;\n /** The inline style for the element. */\n style?: StyleOrFunction<TimeInputRenderProps>;\n}\n\nexport interface TimeSegmentRenderProps {\n /** Whether the segment is focused. */\n isFocused: boolean;\n /** Whether the segment is editable. */\n isEditable: boolean;\n /** Whether the segment is a placeholder. */\n isPlaceholder: boolean;\n /** The segment type. */\n type: TimeSegmentType[\"type\"];\n /** The text to display. */\n text: string;\n}\n\nexport interface TimeSegmentProps extends SlotProps {\n /** The segment data. */\n segment: TimeSegmentType;\n /** The children of the component. A function may be provided to receive render props. */\n children?: RenderChildren<TimeSegmentRenderProps>;\n /** The CSS className for the element. */\n class?: ClassNameOrFunction<TimeSegmentRenderProps>;\n /** The inline style for the element. */\n style?: StyleOrFunction<TimeSegmentRenderProps>;\n}\n\nexport interface TimeFieldContextValue {\n state: TimeFieldState<TimeValue>;\n aria: {\n labelProps: Record<string, unknown>;\n inputProps: Record<string, unknown>;\n descriptionProps: Record<string, unknown>;\n errorMessageProps: Record<string, unknown>;\n };\n}\n\nexport const TimeFieldContext = createContext<TimeFieldContextValue | null>(null);\nexport const TimeFieldStateContext = createContext<TimeFieldState<TimeValue> | null>(null);\n\nfunction withFormValidationBehavior<P extends object>(props: P, formContext: FormProps | null): P {\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\nfunction useTimeFieldContextValue(): TimeFieldContextValue {\n const context = useContext(TimeFieldContext);\n if (!context) {\n throw new Error(\"TimeField components must be used within a TimeField\");\n }\n return context;\n}\n\nexport function useTimeFieldContext(): TimeFieldState<TimeValue> {\n return useTimeFieldContextValue().state;\n}\n\n/**\n * A time field allows users to enter and edit time values using a keyboard.\n *\n * @example\n * ```tsx\n * <TimeField label=\"Time\">\n * <Label>Time</Label>\n * <TimeInput>\n * {(segment) => <TimeSegment segment={segment} />}\n * </TimeInput>\n * </TimeField>\n * ```\n */\nexport function TimeField<T extends TimeValue = TimeValue>(props: TimeFieldProps<T>): JSX.Element {\n // Use hydration-safe pattern for client-only rendering\n const isHydrated = useIsHydrated();\n const formContext = useContext(FormContext);\n\n return (\n <Show\n when={isHydrated()}\n fallback={\n <div class=\"solidaria-TimeField solidaria-TimeField--placeholder\" aria-hidden=\"true\" />\n }\n >\n <TimeFieldInner {...props} __formContext={formContext} />\n </Show>\n );\n}\n\ntype TimeFieldInnerProps<T extends TimeValue = TimeValue> = TimeFieldProps<T> & {\n __formContext?: FormProps | null;\n};\n\n/**\n * Internal TimeField component that renders after client mount.\n */\nfunction TimeFieldInner<T extends TimeValue = TimeValue>(\n props: TimeFieldInnerProps<T>,\n): JSX.Element {\n const formContext = props.__formContext ?? useContext(FormContext);\n const mergedProps = withFormValidationBehavior(props, formContext);\n const [local, stateProps, rest] = splitProps(\n mergedProps,\n [\"children\", \"class\", \"style\", \"slot\", \"__formContext\"],\n [\n \"value\",\n \"defaultValue\",\n \"onChange\",\n \"minValue\",\n \"maxValue\",\n \"isInvalid\",\n \"isDisabled\",\n \"isReadOnly\",\n \"isRequired\",\n \"locale\",\n \"granularity\",\n \"hourCycle\",\n \"shouldForceLeadingZeros\",\n \"validationState\",\n \"validationBehavior\",\n \"validate\",\n \"description\",\n \"errorMessage\",\n \"placeholderValue\",\n ],\n );\n\n const [fieldRef, setFieldRef] = createSignal<HTMLDivElement | null>(null);\n\n const state = createTimeFieldState(stateProps);\n\n const fieldAria = createTimeField(\n () => ({\n ...(rest as Record<string, unknown>),\n description: stateProps.description,\n errorMessage: stateProps.errorMessage,\n }),\n state as unknown as TimeFieldState<TimeValue>,\n fieldRef,\n );\n\n const renderValues = createMemo<TimeFieldRenderProps>(() => ({\n isDisabled: state.isDisabled(),\n isReadOnly: state.isReadOnly(),\n isRequired: state.isRequired(),\n isInvalid: state.isInvalid(),\n }));\n\n const renderProps = useRenderProps(\n {\n class: local.class,\n style: local.style,\n defaultClassName: \"solidaria-TimeField\",\n },\n renderValues,\n );\n\n const validationBehavior = () =>\n (stateProps as { validationBehavior?: \"aria\" | \"native\" }).validationBehavior ??\n formContext?.validationBehavior ??\n \"native\";\n\n const textSlots = {\n slots: {\n get description() {\n return fieldAria.descriptionProps;\n },\n get errorMessage() {\n return fieldAria.errorMessageProps;\n },\n },\n };\n\n return (\n <TimeFieldStateContext.Provider value={state as unknown as TimeFieldState<TimeValue>}>\n <TimeFieldContext.Provider\n value={{\n state: state as unknown as TimeFieldState<TimeValue>,\n aria: {\n labelProps: fieldAria.labelProps,\n inputProps: fieldAria.inputProps,\n descriptionProps: fieldAria.descriptionProps,\n errorMessageProps: fieldAria.errorMessageProps,\n },\n }}\n >\n <div\n ref={setFieldRef}\n {...fieldAria.fieldProps}\n class={renderProps.class()}\n style={renderProps.style()}\n data-disabled={dataAttr(state.isDisabled())}\n data-readonly={dataAttr(state.isReadOnly())}\n data-required={dataAttr(state.isRequired())}\n data-invalid={dataAttr(state.isInvalid())}\n >\n <Provider values={[[TextContext, textSlots]] as Array<[Context<unknown>, unknown]>}>\n {local.children as JSX.Element}\n </Provider>\n </div>\n <Show when={(rest as Record<string, unknown>).name}>\n <HiddenTimeInput\n name={(rest as Record<string, unknown>).name as string | undefined}\n form={(rest as Record<string, unknown>).form as string | undefined}\n value={state.value()}\n autoComplete={(rest as Record<string, unknown>).autoComplete as string | undefined}\n isDisabled={state.isDisabled()}\n isRequired={state.isRequired()}\n validationBehavior={validationBehavior()}\n validationState={state}\n focus={() => {\n fieldRef()?.querySelector<HTMLElement>('[role=\"spinbutton\"]')?.focus();\n }}\n minValue={access(stateProps.minValue) as TimeValue | undefined}\n maxValue={access(stateProps.maxValue) as TimeValue | undefined}\n granularity={state.granularity}\n />\n </Show>\n </TimeFieldContext.Provider>\n </TimeFieldStateContext.Provider>\n );\n}\n\n/**\n * The input area containing time segments.\n */\nexport function TimeInput(props: TimeInputProps): JSX.Element {\n const { state, aria } = useTimeFieldContextValue();\n const [isFocused, setIsFocused] = createSignal(false);\n\n const renderValues = createMemo<TimeInputRenderProps>(() => ({\n isDisabled: state.isDisabled(),\n isFocused: isFocused(),\n }));\n\n const renderProps = useRenderProps(\n {\n class: props.class,\n style: props.style,\n defaultClassName: \"solidaria-TimeInput\",\n },\n renderValues,\n );\n\n return (\n <div\n {...aria.inputProps}\n class={renderProps.class()}\n style={renderProps.style()}\n data-disabled={dataAttr(state.isDisabled())}\n data-focused={dataAttr(isFocused())}\n onFocusIn={() => setIsFocused(true)}\n onFocusOut={() => setIsFocused(false)}\n >\n <For each={state.segments()}>{(segment) => props.children?.(segment)}</For>\n </div>\n );\n}\n\n/**\n * A segment of a time field (hour, minute, second, AM/PM).\n */\nexport function TimeSegment(props: TimeSegmentProps): JSX.Element {\n const state = useTimeFieldContext();\n const [segmentRef, setSegmentRef] = createSignal<HTMLDivElement | null>(null);\n\n const segmentAria = createTimeSegment(\n { segment: props.segment },\n state as unknown as TimeFieldState,\n segmentRef,\n );\n\n const renderValues = createMemo<TimeSegmentRenderProps>(() => ({\n isFocused: segmentAria.isFocused,\n isEditable: segmentAria.isEditable,\n isPlaceholder: segmentAria.isPlaceholder,\n type: props.segment.type,\n text: segmentAria.text,\n }));\n\n const renderProps = useRenderProps(\n {\n get children() {\n return props.children;\n },\n class: props.class,\n style: props.style,\n defaultClassName: \"solidaria-TimeSegment\",\n },\n renderValues,\n );\n\n // Determine children content - avoid Show for SSR hydration compatibility\n const getChildren = () => {\n if (typeof props.children === \"function\") {\n return renderProps.renderChildren();\n }\n return segmentAria.text;\n };\n\n return (\n <div\n ref={setSegmentRef}\n {...segmentAria.segmentProps}\n class={renderProps.class()}\n style={renderProps.style()}\n data-focused={dataAttr(segmentAria.isFocused)}\n data-editable={dataAttr(segmentAria.isEditable)}\n data-placeholder={dataAttr(segmentAria.isPlaceholder)}\n data-type={props.segment.type}\n >\n {getChildren()}\n </div>\n );\n}\n\nexport interface TimeFieldLabelProps {\n children?: JSX.Element;\n class?: string;\n}\n\nexport function TimeFieldLabel(props: TimeFieldLabelProps): JSX.Element {\n const { aria } = useTimeFieldContextValue();\n return (\n <span {...aria.labelProps} class={props.class}>\n {props.children}\n </span>\n );\n}\n\nexport interface TimeFieldDescriptionProps {\n children?: JSX.Element;\n class?: string;\n}\n\nexport function TimeFieldDescription(props: TimeFieldDescriptionProps): JSX.Element {\n const { aria } = useTimeFieldContextValue();\n return (\n <p {...aria.descriptionProps} class={props.class}>\n {props.children}\n </p>\n );\n}\n\nexport interface TimeFieldErrorMessageProps {\n children?: JSX.Element;\n class?: string;\n}\n\nexport function TimeFieldErrorMessage(props: TimeFieldErrorMessageProps): JSX.Element {\n const { aria } = useTimeFieldContextValue();\n return (\n <p {...aria.errorMessageProps} class={props.class}>\n {props.children}\n </p>\n );\n}\n\nexport type { TimeFieldState, TimeSegmentType, TimeValue };\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"TimeField.jsx","names":["mergeProps"],"sources":["../src/TimeField.tsx"],"sourcesContent":["/**\n * TimeField component for solidaria-components\n *\n * Pre-wired headless time field. Faithful port of react-aria-components'\n * TimeField, which does NOT define its own segment primitives — it reuses\n * `DateInput`/`DateSegment` (there is no `TimeInput`/`TimeSegment` upstream).\n * `TimeFieldState` IS a `DateFieldState` (plus `timeValue`), so this component\n * drives the certified DateField segment/group stack directly: it provides the\n * shared `DateFieldContext`/`DateFieldStateContext` that `DateInput`/`DateSegment`\n * read, plus a `TimeFieldContext` for the time-field label/description/error\n * chrome. Unlike DateField, TimeField renders NO root hidden autofill input (RAC\n * TimeField renders none); its native-validation `<input>` is still emitted by\n * the inner DateInput sibling.\n */\n\nimport {\n type JSX,\n type Context,\n createContext,\n createMemo,\n createSignal,\n splitProps,\n useContext,\n Show,\n} from \"solid-js\";\nimport { createTimeField, mergeProps, type AriaTimeFieldProps } from \"@proyecto-viviana/solidaria\";\nimport {\n createTimeFieldState,\n access,\n type TimeFieldState,\n type TimeFieldStateProps,\n type TimeSegment as TimeSegmentType,\n type TimeValue,\n} from \"@proyecto-viviana/solid-stately\";\nimport {\n DateFieldContext,\n DateFieldStateContext,\n type DateFieldContextValue,\n} from \"./DateField\";\nimport {\n type ClassNameOrFunction,\n type StyleOrFunction,\n type SlotProps,\n useRenderProps,\n dataAttr,\n useIsHydrated,\n Provider,\n} from \"./utils\";\nimport { TextContext } from \"./Text\";\nimport { FormContext, type FormProps } from \"./Form\";\n\nexport interface TimeFieldRenderProps {\n /** Whether the field is disabled. */\n isDisabled: boolean;\n /** Whether the field is read-only. */\n isReadOnly: boolean;\n /** Whether the field is required. */\n isRequired: boolean;\n /** Whether the field is invalid. */\n isInvalid: boolean;\n}\n\nexport interface TimeFieldProps<T extends TimeValue = TimeValue>\n extends\n Omit<AriaTimeFieldProps, \"id\" | \"isDisabled\" | \"isReadOnly\" | \"isRequired\">,\n Omit<TimeFieldStateProps<T>, \"locale\">,\n SlotProps {\n /** The children of the component. */\n children?: JSX.Element | ((segment: TimeSegmentType) => JSX.Element);\n /** The CSS className for the element. */\n class?: ClassNameOrFunction<TimeFieldRenderProps>;\n /** The inline style for the element. */\n style?: StyleOrFunction<TimeFieldRenderProps>;\n /** The locale to use for formatting. */\n locale?: string;\n}\n\nexport interface TimeFieldContextValue {\n state: TimeFieldState<TimeValue>;\n aria: {\n labelProps: Record<string, unknown>;\n inputProps: Record<string, unknown>;\n descriptionProps: Record<string, unknown>;\n errorMessageProps: Record<string, unknown>;\n };\n}\n\nexport const TimeFieldContext = createContext<TimeFieldContextValue | null>(null);\nexport const TimeFieldStateContext = createContext<TimeFieldState<TimeValue> | null>(null);\n\nfunction withFormValidationBehavior<P extends object>(props: P, formContext: FormProps | null): P {\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\nfunction useTimeFieldContextValue(): TimeFieldContextValue {\n const context = useContext(TimeFieldContext);\n if (!context) {\n throw new Error(\"TimeField components must be used within a TimeField\");\n }\n return context;\n}\n\nexport function useTimeFieldContext(): TimeFieldState<TimeValue> {\n return useTimeFieldContextValue().state;\n}\n\n/**\n * A time field allows users to enter and edit time values using a keyboard.\n *\n * @example\n * ```tsx\n * <TimeField label=\"Time\">\n * <Label>Time</Label>\n * <DateInput>\n * {(segment) => <DateSegment segment={segment} />}\n * </DateInput>\n * </TimeField>\n * ```\n */\nexport function TimeField<T extends TimeValue = TimeValue>(props: TimeFieldProps<T>): JSX.Element {\n // Use hydration-safe pattern for client-only rendering\n const isHydrated = useIsHydrated();\n const formContext = useContext(FormContext);\n\n return (\n <Show\n when={isHydrated()}\n fallback={\n <div class=\"solidaria-TimeField solidaria-TimeField--placeholder\" aria-hidden=\"true\" />\n }\n >\n <TimeFieldInner {...props} __formContext={formContext} />\n </Show>\n );\n}\n\ntype TimeFieldInnerProps<T extends TimeValue = TimeValue> = TimeFieldProps<T> & {\n __formContext?: FormProps | null;\n};\n\n/**\n * Internal TimeField component that renders after client mount.\n */\nfunction TimeFieldInner<T extends TimeValue = TimeValue>(\n props: TimeFieldInnerProps<T>,\n): JSX.Element {\n const formContext = props.__formContext ?? useContext(FormContext);\n const mergedProps = withFormValidationBehavior(props, formContext);\n const [local, stateProps, rest] = splitProps(\n mergedProps,\n [\"children\", \"class\", \"style\", \"slot\", \"__formContext\"],\n [\n \"value\",\n \"defaultValue\",\n \"onChange\",\n \"minValue\",\n \"maxValue\",\n \"isInvalid\",\n \"isDisabled\",\n \"isReadOnly\",\n \"isRequired\",\n \"locale\",\n \"granularity\",\n \"hourCycle\",\n \"hideTimeZone\",\n \"shouldForceLeadingZeros\",\n \"validationState\",\n \"validationBehavior\",\n \"validate\",\n \"description\",\n \"errorMessage\",\n \"placeholderValue\",\n ],\n );\n\n const [fieldRef, setFieldRef] = createSignal<HTMLDivElement | null>(null);\n // Ref to the hidden validation <input> (the DateInput's `<Input>` sibling).\n // Mirrors DateField: create it here, hand it to createTimeField below, and\n // attach it to the same input through the DateFieldContext getter.\n const [validationInputRef, setValidationInputRef] =\n createSignal<HTMLInputElement | null>(null);\n\n const state = createTimeFieldState(stateProps);\n\n const fieldAria = createTimeField(\n () => ({\n ...(rest as Record<string, unknown>),\n // RAC threads these props into both useTimeFieldState and useTimeField;\n // they live in `stateProps` here, so forward them for the field hook's\n // aria-disabled and the native validation <input> (type/required).\n isDisabled: access(stateProps.isDisabled),\n isReadOnly: access(stateProps.isReadOnly),\n isRequired: access(stateProps.isRequired),\n // Standalone default flips the hidden input to type=\"text\" so an empty\n // required value blocks HTML form submission (mirrors DateField).\n validationBehavior: stateProps.validationBehavior ?? \"native\",\n description: stateProps.description,\n errorMessage: stateProps.errorMessage,\n inputRef: () => validationInputRef() ?? undefined,\n }),\n state as unknown as TimeFieldState<TimeValue>,\n fieldRef,\n );\n\n const renderValues = createMemo<TimeFieldRenderProps>(() => ({\n isDisabled: state.isDisabled(),\n isReadOnly: state.isReadOnly(),\n isRequired: state.isRequired(),\n isInvalid: state.isInvalid(),\n }));\n\n const renderProps = useRenderProps(\n {\n class: local.class,\n style: local.style,\n defaultClassName: \"solidaria-TimeField\",\n },\n renderValues,\n );\n\n const textSlots = {\n slots: {\n get description() {\n return fieldAria.descriptionProps;\n },\n get errorMessage() {\n return fieldAria.errorMessageProps;\n },\n },\n };\n\n // The shared context read by the reused DateInput/DateSegment. Read through\n // getters so consumers see the LIVE memo values (createDescription appends the\n // value-description id via a deferred effect; a frozen snapshot would miss it).\n const dateFieldContextValue: DateFieldContextValue = {\n get state() {\n return state as unknown as DateFieldContextValue[\"state\"];\n },\n aria: {\n get labelProps() {\n return fieldAria.labelProps;\n },\n // The segment group props (role=\"group\", aria-labelledby, unicode-bidi\n // isolate, arrow-key nav, focus-within handlers) are routed to the\n // DateInput element; the outer wrapper stays roleless.\n get inputProps() {\n return fieldAria.fieldProps;\n },\n // The native validation <input> props (type/hidden/required/onChange under\n // native validation), rendered as the DateInput's sibling. Thread the\n // validation-input ref so createTimeField's form-reset/validation wiring\n // resolves to the mounted element.\n get hiddenInputProps() {\n return mergeProps(fieldAria.inputProps, { ref: setValidationInputRef });\n },\n get descriptionProps() {\n return fieldAria.descriptionProps;\n },\n get errorMessageProps() {\n return fieldAria.errorMessageProps;\n },\n },\n };\n\n return (\n <TimeFieldStateContext.Provider value={state as unknown as TimeFieldState<TimeValue>}>\n <DateFieldStateContext.Provider\n value={state as unknown as DateFieldContextValue[\"state\"]}\n >\n <DateFieldContext.Provider value={dateFieldContextValue}>\n <TimeFieldContext.Provider\n value={{\n state: state as unknown as TimeFieldState<TimeValue>,\n aria: {\n get labelProps() {\n return fieldAria.labelProps;\n },\n get inputProps() {\n return fieldAria.fieldProps;\n },\n get descriptionProps() {\n return fieldAria.descriptionProps;\n },\n get errorMessageProps() {\n return fieldAria.errorMessageProps;\n },\n },\n }}\n >\n <div\n ref={setFieldRef}\n class={renderProps.class()}\n style={renderProps.style()}\n data-disabled={dataAttr(state.isDisabled())}\n data-readonly={dataAttr(state.isReadOnly())}\n data-required={dataAttr(state.isRequired())}\n data-invalid={dataAttr(state.isInvalid())}\n >\n <Provider values={[[TextContext, textSlots]] as Array<[Context<unknown>, unknown]>}>\n {local.children as JSX.Element}\n </Provider>\n </div>\n {/*\n Unlike DateField, TimeField renders NO root hidden autofill input —\n RAC TimeField renders none (react-aria-components TimeField.mjs). The\n native-validation <input> is emitted by the inner DateInput sibling.\n */}\n </TimeFieldContext.Provider>\n </DateFieldContext.Provider>\n </DateFieldStateContext.Provider>\n </TimeFieldStateContext.Provider>\n );\n}\n\nexport interface TimeFieldLabelProps {\n children?: JSX.Element;\n class?: string;\n}\n\nexport function TimeFieldLabel(props: TimeFieldLabelProps): JSX.Element {\n const { aria } = useTimeFieldContextValue();\n return (\n <span {...aria.labelProps} class={props.class}>\n {props.children}\n </span>\n );\n}\n\nexport interface TimeFieldDescriptionProps {\n children?: JSX.Element;\n class?: string;\n}\n\nexport function TimeFieldDescription(props: TimeFieldDescriptionProps): JSX.Element {\n const { aria } = useTimeFieldContextValue();\n return (\n <span {...aria.descriptionProps} class={props.class}>\n {props.children}\n </span>\n );\n}\n\nexport interface TimeFieldErrorMessageProps {\n children?: JSX.Element;\n class?: string;\n}\n\nexport function TimeFieldErrorMessage(props: TimeFieldErrorMessageProps): JSX.Element {\n const { aria } = useTimeFieldContextValue();\n return (\n <span {...aria.errorMessageProps} class={props.class}>\n {props.children}\n </span>\n );\n}\n\nexport type { TimeFieldState, TimeSegmentType, TimeValue };\n"],"mappings":"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"}
|
package/dist/Tree.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tree.d.ts","sourceRoot":"","sources":["../src/Tree.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,EACL,KAAK,GAAG,EAUT,MAAM,UAAU,CAAC;AAClB,OAAO,EAQL,KAAK,aAAa,EACnB,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAGL,KAAK,SAAS,EACd,KAAK,cAAc,EACnB,KAAK,QAAQ,EACb,KAAK,YAAY,EACjB,KAAK,GAAG,
|
|
1
|
+
{"version":3,"file":"Tree.d.ts","sourceRoot":"","sources":["../src/Tree.tsx"],"names":[],"mappings":"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"}
|
package/dist/Tree.js
CHANGED
|
@@ -490,7 +490,7 @@ function Tree(props) {
|
|
|
490
490
|
}
|
|
491
491
|
});
|
|
492
492
|
const treeDirection = createMemo(() => ariaProps.direction ?? resolveTreeDirection(ref()));
|
|
493
|
-
const
|
|
493
|
+
const treeAria = createTree(() => ({
|
|
494
494
|
id: ariaProps.id,
|
|
495
495
|
"aria-label": ariaProps["aria-label"],
|
|
496
496
|
"aria-labelledby": ariaProps["aria-labelledby"],
|
|
@@ -517,7 +517,7 @@ function Tree(props) {
|
|
|
517
517
|
return filterDOMProps(ariaProps, { global: true });
|
|
518
518
|
});
|
|
519
519
|
const cleanTreeProps = () => {
|
|
520
|
-
const { ref: _ref1, ...rest } = treeProps;
|
|
520
|
+
const { ref: _ref1, ...rest } = treeAria.treeProps;
|
|
521
521
|
return rest;
|
|
522
522
|
};
|
|
523
523
|
const cleanFocusProps = () => {
|
|
@@ -1254,7 +1254,7 @@ function TreeSelectionCheckbox(props) {
|
|
|
1254
1254
|
return props.style;
|
|
1255
1255
|
},
|
|
1256
1256
|
get tabIndex() {
|
|
1257
|
-
return props.excludeFromTabOrder ? -1 :
|
|
1257
|
+
return props.excludeFromTabOrder ? -1 : 0;
|
|
1258
1258
|
},
|
|
1259
1259
|
get ["aria-label"]() {
|
|
1260
1260
|
return props["aria-label"] ?? treeSelectionCheckboxAria.checkboxProps["aria-label"];
|