@solid2-aria/components 0.0.0-stage → 0.0.1

package/dist/browser/date-picker.d.ts

@@ -0,0 +1,50 @@
+/*
+ * Copyright 2022 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+/*
+ * Derived from Adobe React Spectrum: packages/react-aria-components/src/DatePicker.tsx.
+ * Modified for Solid Aria: composed Solid Aria and Stately primitives with Solid 2 contexts, reactive getters, and DOM refs; uses Solid class props.
+ * Licensed under Apache-2.0. See LICENSES/Apache-2.0.txt and NOTICE.txt at the repository root.
+ */
+import { ContextValue, RACValidation, Ref, RenderProps, SlotProps } from "./utils.js";
+import { JSX } from "@solidjs/web";
+import { AriaDatePickerProps } from "@solid2-aria/core/datepicker/create-date-picker";
+import { AriaDateRangePickerProps } from "@solid2-aria/core/datepicker/create-date-range-picker";
+import { DatePickerState, DatePickerStateOptions } from "@solid2-aria/stately/datepicker/create-date-picker-state";
+import { DateRangePickerState, DateRangePickerStateOptions } from "@solid2-aria/stately/datepicker/create-date-range-picker-state";
+import { GlobalDOMAttributes } from "@solid2-aria/types-shared-web";
+import { DateValue } from "@solid2-aria/stately/datepicker/types";
+export interface DatePickerRenderProps {
+  isFocusWithin: boolean;
+  isFocusVisible: boolean;
+  isDisabled: boolean;
+  isReadOnly: boolean;
+  isInvalid: boolean;
+  isRequired: boolean;
+  isOpen: boolean;
+  state: DatePickerState;
+}
+export interface DateRangePickerRenderProps extends Omit<DatePickerRenderProps, "state"> {
+  state: DateRangePickerState;
+}
+export interface DatePickerProps<T extends DateValue> extends Omit<AriaDatePickerProps<T>, "label" | "description" | "errorMessage" | "validationState" | "validationBehavior">, Pick<DatePickerStateOptions<T>, "shouldCloseOnSelect">, RACValidation, RenderProps<DatePickerRenderProps>, SlotProps, GlobalDOMAttributes<HTMLDivElement> {
+  ref?: Ref<HTMLDivElement>;
+}
+export interface DateRangePickerProps<T extends DateValue> extends Omit<AriaDateRangePickerProps<T>, "label" | "description" | "errorMessage" | "validationState" | "validationBehavior">, Pick<DateRangePickerStateOptions<T>, "shouldCloseOnSelect">, RACValidation, RenderProps<DateRangePickerRenderProps>, SlotProps, GlobalDOMAttributes<HTMLDivElement> {
+  ref?: Ref<HTMLDivElement>;
+}
+export declare const DatePickerContext: import("solid-js").Context<ContextValue<DatePickerProps<DateValue>, HTMLDivElement>>;
+export declare const DateRangePickerContext: import("solid-js").Context<ContextValue<DateRangePickerProps<DateValue>, HTMLDivElement>>;
+export declare const DatePickerStateContext: import("solid-js").Context<DatePickerState | null>;
+export declare const DateRangePickerStateContext: import("solid-js").Context<DateRangePickerState | null>;
+export declare function DatePicker<T extends DateValue>(input: DatePickerProps<T>): JSX.Element;
+export declare function DateRangePicker<T extends DateValue>(input: DateRangePickerProps<T>): JSX.Element;
+//# sourceMappingURL=date-picker.d.ts.map

package/dist/browser/date-picker.js

@@ -0,0 +1,403 @@
+/*
+ * Copyright 2022 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+/*
+ * Derived from Adobe React Spectrum: packages/react-aria-components/src/DatePicker.tsx.
+ * Modified for Solid Aria: composed Solid Aria and Stately primitives with Solid 2 contexts, reactive getters, and DOM refs; uses Solid class props.
+ * Licensed under Apache-2.0. See LICENSES/Apache-2.0.txt and NOTICE.txt at the repository root.
+ */
+import { createContextProps, createRenderProps, createSlot, createSlottedContext, dom, removeDataAttributes } from "./utils.js";
+import { LabelContext } from "./label.js";
+import { ButtonContext } from "./button.js";
+import { TextContext } from "./text.js";
+import { CalendarContext, RangeCalendarContext } from "./calendar.js";
+import { FieldErrorContext } from "./field-error.js";
+import { FormContext } from "./form.js";
+import { GroupContext } from "./group.js";
+import { OverlayTriggerStateContext } from "./overlay-contexts.js";
+import { PopoverContext } from "./popover.js";
+import { DialogContext } from "./dialog.js";
+import { HiddenDateInput } from "./hidden-date-input.js";
+import { DateFieldContext } from "./date-field.js";
+import { createComponent, memo, mergeProps } from "@solidjs/web";
+import { mergeProps as mergeProps$1 } from "@solid2-aria/core/utils/merge-props";
+import { createContext, createSignal, merge, omit, untrack } from "solid-js";
+import { filterDOMProps } from "@solid2-aria/core/utils/filter-dom-props";
+import { createFocusRing } from "@solid2-aria/core/focus/create-focus-ring";
+import { createDatePicker } from "@solid2-aria/core/datepicker/create-date-picker";
+import { createDateRangePicker } from "@solid2-aria/core/datepicker/create-date-range-picker";
+import { createDatePickerState } from "@solid2-aria/stately/datepicker/create-date-picker-state";
+import { createDateRangePickerState } from "@solid2-aria/stately/datepicker/create-date-range-picker-state";
+// src/date-picker.tsx
+const DatePickerContext = createContext(null);
+const DateRangePickerContext = createContext(null);
+const DatePickerStateContext = createContext(null);
+const DateRangePickerStateContext = createContext(null);
+const CLEAR_CONTEXTS = [
+	GroupContext,
+	ButtonContext,
+	LabelContext,
+	TextContext
+];
+function DatePicker(input) {
+	const [props, , setRef] = createContextProps(input, untrack(() => input.ref), DatePickerContext);
+	const form = createSlottedContext(FormContext);
+	const options = mergeProps$1(props, { get validationBehavior() {
+		return props.validationBehavior ?? form?.validationBehavior ?? "native";
+	} });
+	const state = createDatePickerState(options);
+	const [groupRef, setGroupRef] = createSignal(null, { ownedWrite: true });
+	const [registerLabel, label] = createSlot(() => (props["aria-label"]?.length ?? 0) === 0 && (props["aria-labelledby"]?.length ?? 0) === 0);
+	const aria = createDatePicker(mergeProps$1(removeDataAttributes(options), { get label() {
+		return label();
+	} }), state, groupRef);
+	const calendarProps = merge(() => aria.calendarProps);
+	const focus = createFocusRing({ within: true });
+	const render = createRenderProps(mergeProps$1(props, {
+		defaultClass: "solid2-aria-DatePicker",
+		values: {
+			get isDisabled() {
+				return props.isDisabled ?? false;
+			},
+			get isFocusVisible() {
+				return focus.isFocusVisible;
+			},
+			get isFocusWithin() {
+				return focus.isFocused;
+			},
+			get isInvalid() {
+				return state.isInvalid;
+			},
+			get isOpen() {
+				return state.isOpen;
+			},
+			get isReadOnly() {
+				return props.isReadOnly ?? false;
+			},
+			get isRequired() {
+				return props.isRequired ?? false;
+			},
+			state
+		}
+	}));
+	return createComponent(DatePickerStateContext, {
+		value: state,
+		get children() {
+			return createComponent(GroupContext, {
+				get value() {
+					return mergeProps$1(merge(() => aria.groupProps), {
+						get isInvalid() {
+							return state.isInvalid;
+						},
+						ref: (element) => {
+							setGroupRef(element);
+						}
+					});
+				},
+				get children() {
+					return createComponent(DateFieldContext, {
+						get value() {
+							return merge(() => aria.fieldProps);
+						},
+						get children() {
+							return createComponent(ButtonContext, {
+								get value() {
+									return mergeProps$1(merge(() => aria.buttonProps), { get isPressed() {
+										return state.isOpen;
+									} });
+								},
+								get children() {
+									return createComponent(LabelContext, {
+										get value() {
+											return mergeProps$1(merge(() => aria.labelProps), {
+												elementType: "span",
+												registerSlot: registerLabel
+											});
+										},
+										get children() {
+											return createComponent(CalendarContext, {
+												value: calendarProps,
+												get children() {
+													return createComponent(OverlayTriggerStateContext, {
+														value: state,
+														get children() {
+															return createComponent(PopoverContext, {
+																value: {
+																	clearContexts: CLEAR_CONTEXTS,
+																	placement: "bottom start",
+																	trigger: "DatePicker",
+																	triggerRef: groupRef
+																},
+																get children() {
+																	return createComponent(DialogContext, {
+																		get value() {
+																			return merge(() => aria.dialogProps);
+																		},
+																		get children() {
+																			return createComponent(TextContext, {
+																				value: { slots: {
+																					get description() {
+																						return aria.descriptionProps;
+																					},
+																					get errorMessage() {
+																						return aria.errorMessageProps;
+																					}
+																				} },
+																				get children() {
+																					return createComponent(FieldErrorContext, {
+																						value: aria,
+																						get children() {
+																							return [createComponent(dom.div, mergeProps(() => {
+																								return mergeProps$1(omit(filterDOMProps(props, { global: true }), "id"), render, merge(() => focus.focusProps ?? {}));
+																							}, {
+																								ref: (element) => {
+																									setRef(element);
+																								},
+																								get slot() {
+																									return memo(() => {
+																										return !!(typeof props.slot === "string" && props.slot.length > 0);
+																									})() ? props.slot : void 0;
+																								},
+																								get "data-focus-within"() {
+																									return focus.isFocused || void 0;
+																								},
+																								get "data-invalid"() {
+																									return state.isInvalid || void 0;
+																								},
+																								get "data-focus-visible"() {
+																									return focus.isFocusVisible || void 0;
+																								},
+																								get "data-disabled"() {
+																									return props.isDisabled === true ? true : void 0;
+																								},
+																								get "data-readonly"() {
+																									return props.isReadOnly === true ? true : void 0;
+																								},
+																								get "data-required"() {
+																									return props.isRequired === true ? true : void 0;
+																								},
+																								get "data-open"() {
+																									return state.isOpen || void 0;
+																								},
+																								get children() {
+																									return render.children;
+																								}
+																							})), createComponent(HiddenDateInput, {
+																								get autoComplete() {
+																									return props.autoComplete;
+																								},
+																								get name() {
+																									return props.name;
+																								},
+																								get isDisabled() {
+																									return props.isDisabled;
+																								},
+																								state
+																							})];
+																						}
+																					});
+																				}
+																			});
+																		}
+																	});
+																}
+															});
+														}
+													});
+												}
+											});
+										}
+									});
+								}
+							});
+						}
+					});
+				}
+			});
+		}
+	});
+}
+function DateRangePicker(input) {
+	const [props, , setRef] = createContextProps(input, untrack(() => input.ref), DateRangePickerContext);
+	const form = createSlottedContext(FormContext);
+	const options = mergeProps$1(props, { get validationBehavior() {
+		return props.validationBehavior ?? form?.validationBehavior ?? "native";
+	} });
+	const state = createDateRangePickerState(options);
+	const [groupRef, setGroupRef] = createSignal(null, { ownedWrite: true });
+	const [registerLabel, label] = createSlot(() => (props["aria-label"]?.length ?? 0) === 0 && (props["aria-labelledby"]?.length ?? 0) === 0);
+	const aria = createDateRangePicker(mergeProps$1(removeDataAttributes(options), { get label() {
+		return label();
+	} }), state, groupRef);
+	const focus = createFocusRing({ within: true });
+	const render = createRenderProps(mergeProps$1(props, {
+		defaultClass: "solid2-aria-DateRangePicker",
+		values: {
+			get isDisabled() {
+				return props.isDisabled ?? false;
+			},
+			get isFocusVisible() {
+				return focus.isFocusVisible;
+			},
+			get isFocusWithin() {
+				return focus.isFocused;
+			},
+			get isInvalid() {
+				return state.isInvalid;
+			},
+			get isOpen() {
+				return state.isOpen;
+			},
+			get isReadOnly() {
+				return props.isReadOnly ?? false;
+			},
+			get isRequired() {
+				return props.isRequired ?? false;
+			},
+			state
+		}
+	}));
+	return createComponent(DateRangePickerStateContext, {
+		value: state,
+		get children() {
+			return createComponent(GroupContext, {
+				get value() {
+					return mergeProps$1(merge(() => aria.groupProps), {
+						get isInvalid() {
+							return state.isInvalid;
+						},
+						ref: (element) => {
+							setGroupRef(element);
+						}
+					});
+				},
+				get children() {
+					return createComponent(DateFieldContext, {
+						value: { slots: {
+							get end() {
+								return aria.endFieldProps;
+							},
+							get start() {
+								return aria.startFieldProps;
+							}
+						} },
+						get children() {
+							return createComponent(ButtonContext, {
+								get value() {
+									return mergeProps$1(merge(() => aria.buttonProps), { get isPressed() {
+										return state.isOpen;
+									} });
+								},
+								get children() {
+									return createComponent(LabelContext, {
+										get value() {
+											return mergeProps$1(merge(() => aria.labelProps), {
+												elementType: "span",
+												registerSlot: registerLabel
+											});
+										},
+										get children() {
+											return createComponent(RangeCalendarContext, {
+												get value() {
+													return merge(() => aria.calendarProps);
+												},
+												get children() {
+													return createComponent(OverlayTriggerStateContext, {
+														value: state,
+														get children() {
+															return createComponent(PopoverContext, {
+																value: {
+																	clearContexts: CLEAR_CONTEXTS,
+																	placement: "bottom start",
+																	trigger: "DateRangePicker",
+																	triggerRef: groupRef
+																},
+																get children() {
+																	return createComponent(DialogContext, {
+																		get value() {
+																			return merge(() => aria.dialogProps);
+																		},
+																		get children() {
+																			return createComponent(TextContext, {
+																				value: { slots: {
+																					get description() {
+																						return aria.descriptionProps;
+																					},
+																					get errorMessage() {
+																						return aria.errorMessageProps;
+																					}
+																				} },
+																				get children() {
+																					return createComponent(FieldErrorContext, {
+																						value: aria,
+																						get children() {
+																							return createComponent(dom.div, mergeProps(() => {
+																								return mergeProps$1(omit(filterDOMProps(props, { global: true }), "id"), render, merge(() => focus.focusProps ?? {}));
+																							}, {
+																								ref: (element) => {
+																									setRef(element);
+																								},
+																								get slot() {
+																									return memo(() => {
+																										return !!(typeof props.slot === "string" && props.slot.length > 0);
+																									})() ? props.slot : void 0;
+																								},
+																								get "data-focus-within"() {
+																									return focus.isFocused || void 0;
+																								},
+																								get "data-invalid"() {
+																									return state.isInvalid || void 0;
+																								},
+																								get "data-focus-visible"() {
+																									return focus.isFocusVisible || void 0;
+																								},
+																								get "data-disabled"() {
+																									return props.isDisabled === true ? true : void 0;
+																								},
+																								get "data-readonly"() {
+																									return props.isReadOnly === true ? true : void 0;
+																								},
+																								get "data-required"() {
+																									return props.isRequired === true ? true : void 0;
+																								},
+																								get "data-open"() {
+																									return state.isOpen || void 0;
+																								},
+																								get children() {
+																									return render.children;
+																								}
+																							}));
+																						}
+																					});
+																				}
+																			});
+																		}
+																	});
+																}
+															});
+														}
+													});
+												}
+											});
+										}
+									});
+								}
+							});
+						}
+					});
+				}
+			});
+		}
+	});
+}
+export { DatePicker, DatePickerContext, DatePickerStateContext, DateRangePicker, DateRangePickerContext, DateRangePickerStateContext };
+
+//# sourceMappingURL=date-picker.js.map