@solid2-aria/components 0.0.0-stage → 0.0.1

package/dist/browser/color-wheel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-wheel.js","names":["<dom.div\n      {\n        // oxlint-disable solid/reactivity -- Keep prop filtering in the renderer's lazy evaluation.\n        ...omit(filterDOMProps(props, { global: true }), \"id\")\n        // oxlint-enable solid/reactivity\n      }\n      {...render}\n      ref={(element: HTMLDivElement) => {\n        setRef(element);\n      }}\n      slot={\n        typeof props.slot === \"string\" && props.slot.length > 0\n          ? props.slot\n          : undefined\n      }\n      data-disabled={props.isDisabled === true ? true : undefined}\n    >\n      <ColorWheelStateContext value={state}>\n        <ColorWheelTrackContext\n          value={\n            // oxlint-disable solid/reactivity -- Keep prop filtering in the renderer's lazy evaluation.\n            merge(() => aria.trackProps)\n            // oxlint-enable solid/reactivity\n          }\n        >\n          <InternalColorThumbContext value={thumb}>\n            {render.children}\n          </InternalColorThumbContext>\n        </ColorWheelTrackContext>\n      </ColorWheelStateContext>\n    </dom.div>","dom.div","ref={(element: HTMLDivElement) => {\n        setRef(element);\n      }}","typeof props.slot === \"string\" && props.slot.length > 0\n          ? props.slot\n          : undefined","<ColorWheelStateContext value={state}>\n        <ColorWheelTrackContext\n          value={\n            // oxlint-disable solid/reactivity -- Keep prop filtering in the renderer's lazy evaluation.\n            merge(() => aria.trackProps)\n            // oxlint-enable solid/reactivity\n          }\n        >\n          <InternalColorThumbContext value={thumb}>\n            {render.children}\n          </InternalColorThumbContext>\n        </ColorWheelTrackContext>\n      </ColorWheelStateContext>","value={state}","<ColorWheelTrackContext\n          value={\n            // oxlint-disable solid/reactivity -- Keep prop filtering in the renderer's lazy evaluation.\n            merge(() => aria.trackProps)\n            // oxlint-enable solid/reactivity\n          }\n        >\n          <InternalColorThumbContext value={thumb}>\n            {render.children}\n          </InternalColorThumbContext>\n        </ColorWheelTrackContext>","<InternalColorThumbContext value={thumb}>\n            {render.children}\n          </InternalColorThumbContext>","value={thumb}","<dom.div\n      {\n        // oxlint-disable solid/reactivity -- Keep prop filtering in the renderer's lazy evaluation.\n        ...omit(props, \"ref\")\n        // oxlint-enable solid/reactivity\n      }\n      {...render}\n      ref={(element: HTMLDivElement) => {\n        setRef(element);\n      }}\n      data-disabled={state.isDisabled || undefined}\n    />","mergeProps","_$createComponent","_$mergeProps","_$memo"],"sources":["../../src/color-wheel.tsx"],"sourcesContent":["/*\n * Derived from Adobe React Spectrum: packages/react-aria-components/src/ColorWheel.tsx.\n * Modified for Solid Aria: composed Solid Aria and Stately primitives with Solid 2 contexts, reactive getters, and DOM refs; uses Solid class props.\n * Licensed under Apache-2.0. See LICENSES/Apache-2.0.txt and NOTICE.txt at the repository root.\n */\n\nimport { createColorWheel } from \"@solid2-aria/core/color/create-color-wheel\";\nimport type { AriaColorWheelOptions } from \"@solid2-aria/core/color/create-color-wheel\";\nimport { filterDOMProps } from \"@solid2-aria/core/utils/filter-dom-props\";\nimport { mergeProps } from \"@solid2-aria/core/utils/merge-props\";\nimport { requireValue } from \"@solid2-aria/core/utils/require-value\";\nimport { createColorWheelState } from \"@solid2-aria/stately/color/create-color-wheel-state\";\nimport type { ColorWheelState } from \"@solid2-aria/stately/color/create-color-wheel-state\";\nimport type { GlobalDOMAttributes } from \"@solid2-aria/types-shared-web\";\nimport type { JSX } from \"@solidjs/web\";\nimport {\n  untrack,\n  createSignal,\n  merge,\n  createContext,\n  omit,\n  useContext,\n} from \"solid-js\";\n\nimport { InternalColorThumbContext } from \"./color-thumb\";\nimport { dom, createContextProps, createRenderProps } from \"./utils\";\nimport type {\n  ContextValue,\n  RenderProps,\n  SlotProps,\n  Ref,\n  StyleRenderProps,\n} from \"./utils\";\n\nexport interface ColorWheelRenderProps {\n  isDisabled: boolean;\n  state: ColorWheelState;\n}\n\nexport interface ColorWheelProps\n  extends\n    AriaColorWheelOptions,\n    RenderProps<ColorWheelRenderProps>,\n    SlotProps,\n    GlobalDOMAttributes<HTMLDivElement> {\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport type ColorWheelTrackRenderProps = ColorWheelRenderProps;\n\nexport interface ColorWheelTrackProps\n  extends\n    StyleRenderProps<ColorWheelTrackRenderProps>,\n    GlobalDOMAttributes<HTMLDivElement> {\n  ref?: Ref<HTMLDivElement>;\n}\n\ntype TrackContext = Omit<\n  ColorWheelTrackProps,\n  keyof JSX.HTMLAttributes<HTMLDivElement>\n> &\n  Omit<\n    JSX.HTMLAttributes<HTMLDivElement>,\n    \"ref\" | \"class\" | \"style\" | \"children\"\n  > &\n  Pick<ColorWheelTrackProps, \"class\" | \"style\">;\n\nexport const ColorWheelContext =\n  createContext<ContextValue<Partial<ColorWheelProps>, HTMLDivElement>>(null);\n\nexport const ColorWheelStateContext = createContext<ColorWheelState | null>(\n  null\n);\n\nexport const ColorWheelTrackContext =\n  createContext<ContextValue<TrackContext, HTMLDivElement>>(null);\n\nexport function ColorWheel(input: ColorWheelProps): JSX.Element {\n  const [props, , setRef] = createContextProps(\n    input,\n    untrack(() => input.ref),\n    ColorWheelContext\n  );\n\n  const state = createColorWheelState(props);\n\n  const [inputRef, setInputRef] = createSignal<HTMLInputElement | null>(null, {\n    ownedWrite: true,\n  });\n\n  const aria = createColorWheel(props, state, inputRef);\n\n  const values: ColorWheelRenderProps = {\n    get isDisabled() {\n      return props.isDisabled ?? false;\n    },\n    state,\n  };\n\n  const render = createRenderProps(\n    mergeProps(props, {\n      defaultClass: \"solid2-aria-ColorWheel\",\n      defaultStyle: { position: \"relative\" as const },\n      values,\n    })\n  );\n\n  const thumb = {\n    inputXRef: inputRef,\n    get isDisabled() {\n      return props.isDisabled;\n    },\n    setInputXRef: setInputRef,\n    state,\n    get thumbProps() {\n      return aria.thumbProps;\n    },\n    get xInputProps() {\n      return aria.inputProps;\n    },\n  };\n\n  return (\n    <dom.div\n      {\n        // oxlint-disable solid/reactivity -- Keep prop filtering in the renderer's lazy evaluation.\n        ...omit(filterDOMProps(props, { global: true }), \"id\")\n        // oxlint-enable solid/reactivity\n      }\n      {...render}\n      ref={(element: HTMLDivElement) => {\n        setRef(element);\n      }}\n      slot={\n        typeof props.slot === \"string\" && props.slot.length > 0\n          ? props.slot\n          : undefined\n      }\n      data-disabled={props.isDisabled === true ? true : undefined}\n    >\n      <ColorWheelStateContext value={state}>\n        <ColorWheelTrackContext\n          value={\n            // oxlint-disable solid/reactivity -- Keep prop filtering in the renderer's lazy evaluation.\n            merge(() => aria.trackProps)\n            // oxlint-enable solid/reactivity\n          }\n        >\n          <InternalColorThumbContext value={thumb}>\n            {render.children}\n          </InternalColorThumbContext>\n        </ColorWheelTrackContext>\n      </ColorWheelStateContext>\n    </dom.div>\n  );\n}\n\nexport function ColorWheelTrack(input: ColorWheelTrackProps): JSX.Element {\n  const [props, , setRef] = createContextProps(\n    input,\n    untrack(() => input.ref),\n    ColorWheelTrackContext\n  );\n\n  const state = requireValue(\n    useContext(ColorWheelStateContext),\n    \"Expected required component value\"\n  );\n\n  const render = createRenderProps(\n    mergeProps(props, {\n      defaultClass: \"solid2-aria-ColorWheelTrack\",\n      values: {\n        get isDisabled() {\n          return state.isDisabled;\n        },\n        state,\n      },\n    })\n  );\n\n  return (\n    <dom.div\n      {\n        // oxlint-disable solid/reactivity -- Keep prop filtering in the renderer's lazy evaluation.\n        ...omit(props, \"ref\")\n        // oxlint-enable solid/reactivity\n      }\n      {...render}\n      ref={(element: HTMLDivElement) => {\n        setRef(element);\n      }}\n      data-disabled={state.isDisabled || undefined}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;AAmEA,MAAa,oBACX,cAAsE,IAAI;AAE5E,MAAa,yBAAyB,cACpC,IACF;AAEA,MAAa,yBACX,cAA0D,IAAI;AAEhE,SAAgB,WAAW,OAAqC;CAC9D,MAAM,CAAC,SAAS,UAAU,mBACxB,OACA,cAAc,MAAM,GAAG,GACvB,iBACF;CAEA,MAAM,QAAQ,sBAAsB,KAAK;CAEzC,MAAM,CAAC,UAAU,eAAe,aAAsC,MAAM,EAC1E,YAAY,KACd,CAAC;CAED,MAAM,OAAO,iBAAiB,OAAO,OAAO,QAAQ;CASpD,MAAM,SAAS,kBACbU,aAAW,OAAO;EAChB,cAAc;EACd,cAAc,EAAE,UAAU,WAAoB;EAC9C,QAAA;GAVF,IAAI,aAAa;IACf,OAAO,MAAM,cAAc;GAC7B;GACA;EAOE;CACF,CAAC,CACH;CAEA,MAAM,QAAQ;EACZ,WAAW;EACX,IAAI,aAAa;GACf,OAAO,MAAM;EACf;EACA,cAAc;EACd;EACA,IAAI,aAAa;GACf,OAAO,KAAK;EACd;EACA,IAAI,cAAc;GAChB,OAAO,KAAK;EACd;CACF;CAEA,OACEV,gBAAAA,IAACC,KAADD,iBACE;EAEK,OAAA,KAAK,eAAe,OAAO,EAAE,QAAQ,KAAK,CAAC,GAAG,IAAI;CAEvD,GACI,QANN;EAOEE,MAAM,YAA4B;GAChC,OAAO,OAAO;EAChB;EACA,IAAA,OAAA;GACEC,OAAAA,WAAAA;IAAO,OAAA,CAAA,EAAA,OAAA,MAAM,SAAS,YAAY,MAAM,KAAK,SAAS;GAE1C,CAAA,CAAC,CAAD,IADR,MAAM,OACN,KAAA;EACN;EACA,IAAA,kBAAA;GAAe,OAAA,MAAM,eAAe,OAAO,OAAO,KAAA;EAAS;EAf7D,IAAA,WAAA;GAiBEC,OAAAA,gBAAAA,wBAAAA;IAAwBC,OAAO;IAA/B,IAAA,WAAA;KACEC,OAAAA,gBAAAA,wBAAAA;MACE,IAAA,QAAA;OAEE,OAAA,YAAY,KAAK,UAAU;MAE7B;MALF,IAAA,WAAA;OAOEC,OAAAA,gBAAAA,2BAAAA;QAA2BC,OAAO;QAAlC,IAAA,WAAA;SACG,OAAA,OAAO;QACiB;;MACL;;IACF;;EACjB;;AAEb;AAEA,SAAgB,gBAAgB,OAA0C;CACxE,MAAM,CAAC,SAAS,UAAU,mBACxB,OACA,cAAc,MAAM,GAAG,GACvB,sBACF;CAEA,MAAM,QAAQ,aACZ,WAAW,sBAAsB,GACjC,mCACF;CAEA,MAAM,SAAS,kBACbE,aAAW,OAAO;EAChB,cAAc;EACd,QAAQ;GACN,IAAI,aAAa;IACf,OAAO,MAAM;GACf;GACA;EACF;CACF,CAAC,CACH;CAEA,OACED,gBAAAA,IAACR,KAADQ,iBACE;EAEK,OAAA,KAAK,OAAO,KAAK;CAEtB,GACI,QANN;EAOEP,MAAM,YAA4B;GAChC,OAAO,OAAO;EAChB;EACA,IAAA,kBAAA;GAAe,OAAA,MAAM,cAAc,KAAA;EAAS;CAC7C,CAAA,CAAA;AAEL"}

package/dist/browser/combo-box.d.ts

@@ -0,0 +1,113 @@
+/*
+ * 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/ComboBox.tsx.
+ * Modified for Solid Aria: adapted collection ownership, contexts, accessibility primitives, and reactive properties for Solid 2; uses Solid class props.
+ * Licensed under Apache-2.0. See LICENSES/Apache-2.0.txt and NOTICE.txt at the repository root.
+ */
+import { ClassOrFunction, ContextValue, RACValidation, Ref, RenderProps, SlotProps } from "./utils.js";
+import { JSX } from "@solidjs/web";
+import { AriaComboBoxProps } from "@solid2-aria/core/combobox/create-combo-box";
+import { ComboBoxState } from "@solid2-aria/stately/combobox/create-combo-box-state";
+import { GlobalDOMAttributes } from "@solid2-aria/types-shared-web";
+export declare const ComboBoxContext: import("solid-js").Context<ContextValue<ComboBoxProps<any, SelectionMode>, HTMLDivElement>>;
+export declare const ComboBoxStateContext: import("solid-js").Context<ComboBoxState<unknown, SelectionMode> | null>;
+export declare const ComboBoxValueContext: import("solid-js").Context<ContextValue<ComboBoxValueProps<any>, HTMLDivElement>>;
+type SelectionMode = "single" | "multiple";
+export interface ComboBoxRenderProps {
+  /**
+   * Whether the combobox is currently open.
+   *
+   * @selector [data-open]
+   */
+  isOpen: boolean;
+  /**
+   * Whether the combobox is disabled.
+   *
+   * @selector [data-disabled]
+   */
+  isDisabled: boolean;
+  /**
+   * Whether the combobox is invalid.
+   *
+   * @selector [data-invalid]
+   */
+  isInvalid: boolean;
+  /**
+   * Whether the combobox is required.
+   *
+   * @selector [data-required]
+   */
+  isRequired: boolean;
+  /**
+   * Whether the combobox is read only.
+   *
+   * @selector [data-readonly]
+   */
+  isReadOnly: boolean;
+}
+export interface ComboBoxProps<T, M extends SelectionMode = "single"> extends Omit<AriaComboBoxProps<T, M>, "children" | "placeholder" | "label" | "description" | "errorMessage" | "validationState" | "validationBehavior">, RACValidation, RenderProps<ComboBoxRenderProps>, SlotProps, GlobalDOMAttributes<HTMLDivElement> {
+  /**
+   * The CSS [class](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class) for the
+   * element. A function may be provided to compute the class based on component state.
+   *
+   * @default 'react-aria-ComboBox'
+   */
+  class?: ClassOrFunction<ComboBoxRenderProps>;
+  /**
+   * The filter function used to determine if an option should be included in the combo box list.
+   * By default, a language-sensitive "contains" filter from `createFilter` is used.
+   */
+  defaultFilter?: (textValue: string, inputValue: string) => boolean;
+  /**
+   * Whether the text or key of the selected item is submitted as part of an HTML form. When
+   * `allowsCustomValue` is `true`, this option does not apply and the text is always submitted.
+   *
+   * @default 'key'
+   */
+  formValue?: "text" | "key";
+  /** Whether the combo box allows the menu to be open when the collection is empty. */
+  allowsEmptyCollection?: boolean;
+}
+export interface ComboBoxValueRenderProps<T> {
+  /**
+   * Whether the value is a placeholder.
+   *
+   * @selector [data-placeholder]
+   */
+  isPlaceholder: boolean;
+  /** The object values of the currently selected items. */
+  selectedItems: (T | null)[];
+  /** The textValue of the currently selected items. */
+  selectedText: string;
+  /** The state of the ComboBox. */
+  state: ComboBoxState<T, "single" | "multiple">;
+}
+export interface ComboBoxValueProps<T> extends Omit<JSX.HTMLAttributes<HTMLElement>, keyof RenderProps<unknown> | "ref">, RenderProps<ComboBoxValueRenderProps<T>> {
+  /**
+   * The CSS [class](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class) for the
+   * element. A function may be provided to compute the class based on component state.
+   *
+   * @default 'react-aria-ComboBoxValue'
+   */
+  class?: ClassOrFunction<ComboBoxValueRenderProps<T>>;
+  /** A value to display when no items are selected. */
+  placeholder?: JSX.Element;
+}
+export declare function ComboBox<T extends object, M extends SelectionMode = "single">(input: ComboBoxProps<T, M> & {
+  ref?: Ref<HTMLDivElement>;
+}): JSX.Element;
+export declare function ComboBoxValue<T>(input: ComboBoxValueProps<T> & {
+  ref?: Ref<HTMLDivElement>;
+}): JSX.Element;
+export {};
+//# sourceMappingURL=combo-box.d.ts.map

package/dist/browser/combo-box.js

@@ -0,0 +1,394 @@
+/*
+ * 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/ComboBox.tsx.
+ * Modified for Solid Aria: adapted collection ownership, contexts, accessibility primitives, and reactive properties for Solid 2; 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 } from "./utils.js";
+import { FieldInputContext } from "./autocomplete.js";
+import { LabelContext } from "./label.js";
+import { ButtonContext } from "./button.js";
+import { TextContext } from "./text.js";
+import { FieldErrorContext } from "./field-error.js";
+import { FormContext } from "./form.js";
+import { GroupContext } from "./group.js";
+import { InputContext } from "./input.js";
+import { ListBoxContext, ListStateContext } from "./list-box.js";
+import { OverlayTriggerStateContext } from "./overlay-contexts.js";
+import { PopoverContext } from "./popover.js";
+import { applyRef, createComponent, effect, getNextElement, memo, mergeProps, setAttribute, setProperty, template } from "@solidjs/web";
+import { mergeProps as mergeProps$1 } from "@solid2-aria/core/utils/merge-props";
+import { For, createContext, createMemo, createSignal, merge, omit, untrack, useContext } from "solid-js";
+import { BaseCollection } from "@solid2-aria/core/collections/base-collection";
+import { CollectionBuilder } from "@solid2-aria/core/collections/collection-builder";
+import { filterDOMProps } from "@solid2-aria/core/utils/filter-dom-props";
+import { isTruthy } from "@solid2-aria/core/utils/truthy";
+import { createIsHidden } from "@solid2-aria/core/collections/hidden";
+import { createComboBox } from "@solid2-aria/core/combobox/create-combo-box";
+import { createFilter } from "@solid2-aria/core/i18n/create-filter";
+import { createListFormatter } from "@solid2-aria/core/i18n/create-list-formatter";
+import { createComboBoxState } from "@solid2-aria/stately/combobox/create-combo-box-state";
+// src/combo-box.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<input type=hidden>`);
+const ComboBoxContext = createContext(null);
+const ComboBoxStateContext = createContext(null);
+const ComboBoxValueContext = createContext(null);
+function ComboBox(input) {
+	if (createIsHidden()) return null;
+	const [props, , setRef] = createContextProps(input, untrack(() => input.ref), ComboBoxContext);
+	const values = {
+		get isDisabled() {
+			return props.isDisabled === true;
+		},
+		get isInvalid() {
+			return props.isInvalid === true;
+		},
+		isOpen: false,
+		get isReadOnly() {
+			return props.isReadOnly === true;
+		},
+		get isRequired() {
+			return props.isRequired === true;
+		}
+	};
+	const content = () => {
+		const child = props.children;
+		return typeof child === "function" ? child({
+			...values,
+			defaultChildren: void 0
+		}) : child;
+	};
+	return createComponent(ListStateContext, {
+		value: null,
+		get children() {
+			return createComponent(CollectionBuilder, {
+				createCollection: () => new BaseCollection(),
+				get content() {
+					return createComponent(ListBoxContext, {
+						value: { get items() {
+							return props.items ?? props.defaultItems;
+						} },
+						get children() {
+							return content();
+						}
+					});
+				},
+				children: (collection) => createComponent(ComboBoxInner, {
+					props,
+					collection,
+					comboRef: setRef
+				})
+			});
+		}
+	});
+}
+function ComboBoxInner(input) {
+	const [buttonRef, setButtonRef] = createSignal(null, { ownedWrite: true });
+	const [popoverRef, setPopoverRef] = createSignal(null, { ownedWrite: true });
+	const { props } = untrack(() => input);
+	const form = createSlottedContext(FormContext);
+	const filter = createFilter({ sensitivity: "base" });
+	const state = createComboBoxState(mergeProps$1(props, {
+		children: void 0,
+		get collection() {
+			return input.collection;
+		},
+		get defaultFilter() {
+			return props.defaultFilter ?? filter.contains;
+		},
+		get validationBehavior() {
+			return props.validationBehavior ?? form?.validationBehavior ?? "native";
+		}
+	}));
+	const [inputRef, setInputRef] = createSignal(null, { ownedWrite: true });
+	const [groupRef, setGroupRef] = createSignal(null, { ownedWrite: true });
+	const [listBoxRef, setListBoxRef] = createSignal(null, { ownedWrite: true });
+	const [registerLabel, label] = createSlot(() => !isTruthy(props["aria-label"]) && !isTruthy(props["aria-labelledby"]));
+	const textFormValue = () => props.allowsCustomValue ?? props.formValue === "text";
+	const aria = createComboBox(mergeProps$1(props, {
+		buttonRef,
+		inputRef,
+		get label() {
+			return label();
+		},
+		listBoxRef,
+		get name() {
+			return textFormValue() ? props.name : void 0;
+		},
+		popoverRef,
+		get validationBehavior() {
+			return props.validationBehavior ?? form?.validationBehavior ?? "native";
+		}
+	}), state);
+	const triggerRef = () => groupRef() ?? inputRef();
+	const render = createRenderProps(mergeProps$1(props, {
+		defaultClass: "solid2-aria-ComboBox",
+		values: {
+			get isDisabled() {
+				return props.isDisabled === true;
+			},
+			get isInvalid() {
+				return aria.isInvalid;
+			},
+			get isOpen() {
+				return state.isOpen;
+			},
+			get isReadOnly() {
+				return props.isReadOnly === true;
+			},
+			get isRequired() {
+				return props.isRequired === true;
+			}
+		}
+	}));
+	const hiddenValues = () => {
+		if (Array.isArray(state.value)) return state.value.length > 0 ? state.value : [null];
+		return [state.value];
+	};
+	return createComponent(ComboBoxStateContext, {
+		value: state,
+		get children() {
+			return createComponent(LabelContext, {
+				get value() {
+					return mergeProps$1(merge(() => aria.labelProps ?? {}), {
+						get elementType() {
+							return "label";
+						},
+						registerSlot: registerLabel
+					});
+				},
+				get children() {
+					return createComponent(ButtonContext, {
+						get value() {
+							return mergeProps$1(merge(() => aria.buttonProps ?? {}), {
+								get isPressed() {
+									return state.isOpen;
+								},
+								ref: (element) => {
+									setButtonRef(element);
+								}
+							});
+						},
+						get children() {
+							return createComponent(InputContext, {
+								get value() {
+									return mergeProps$1(merge(() => aria.inputProps ?? {}), { ref: (element) => {
+										setInputRef(element);
+									} });
+								},
+								get children() {
+									return createComponent(FieldInputContext, {
+										get value() {
+											return mergeProps$1(omit(merge(() => aria.inputProps), "value", "onChange", "id", "onFocus", "onBlur"), {
+												onChange: (value) => {
+													state.setInputValue(value);
+												},
+												ref: (element) => {
+													setInputRef(element);
+												},
+												get value() {
+													return state.inputValue;
+												}
+											});
+										},
+										get children() {
+											return createComponent(OverlayTriggerStateContext, {
+												value: state,
+												get children() {
+													return createComponent(PopoverContext, {
+														value: {
+															clearContexts: [
+																LabelContext,
+																ButtonContext,
+																InputContext,
+																FieldInputContext,
+																GroupContext,
+																TextContext
+															],
+															isNonModal: true,
+															get placement() {
+																return "bottom start";
+															},
+															ref: (element) => {
+																setPopoverRef(element);
+															},
+															scrollRef: listBoxRef,
+															trigger: "ComboBox",
+															triggerRef
+														},
+														get children() {
+															return createComponent(ListBoxContext, {
+																get value() {
+																	return mergeProps$1(merge(() => aria.listBoxProps ?? {}), { ref: (element) => {
+																		setListBoxRef(element);
+																	} });
+																},
+																get children() {
+																	return createComponent(ListStateContext, {
+																		value: state,
+																		get children() {
+																			return createComponent(TextContext, {
+																				value: { slots: {
+																					get description() {
+																						return aria.descriptionProps;
+																					},
+																					get errorMessage() {
+																						return aria.errorMessageProps;
+																					}
+																				} },
+																				get children() {
+																					return createComponent(GroupContext, {
+																						value: {
+																							get isDisabled() {
+																								return props.isDisabled === true;
+																							},
+																							get isInvalid() {
+																								return aria.isInvalid;
+																							},
+																							ref: (element) => {
+																								setGroupRef(element);
+																							}
+																						},
+																						get children() {
+																							return createComponent(FieldErrorContext, {
+																								value: aria,
+																								get children() {
+																									return createComponent(ComboBoxValueContext, {
+																										get value() {
+																											return aria.valueProps;
+																										},
+																										get children() {
+																											return createComponent(dom.div, mergeProps(() => {
+																												return omit(filterDOMProps(props, { global: true }), "id");
+																											}, render, {
+																												ref(r$) {
+																													var _ref$ = input.comboRef;
+																													typeof _ref$ === "function" || Array.isArray(_ref$) ? applyRef(_ref$, r$) : input.comboRef = r$;
+																												},
+																												get slot() {
+																													return props.slot ?? void 0;
+																												},
+																												get "data-focused"() {
+																													return state.isFocused || void 0;
+																												},
+																												get "data-open"() {
+																													return state.isOpen || void 0;
+																												},
+																												get "data-disabled"() {
+																													return props.isDisabled ?? void 0;
+																												},
+																												get "data-invalid"() {
+																													return aria.isInvalid || void 0;
+																												},
+																												get "data-required"() {
+																													return props.isRequired ?? void 0;
+																												},
+																												get "data-readonly"() {
+																													return props.isReadOnly ?? void 0;
+																												},
+																												get children() {
+																													return [memo(() => {
+																														return render.children;
+																													}), memo(() => {
+																														return memo(() => {
+																															return !!(Boolean(props.name) && !textFormValue());
+																														})() ? createComponent(For, {
+																															get each() {
+																																return hiddenValues();
+																															},
+																															children: (value) => (() => {
+																																var _el$ = getNextElement(_tmpl$);
+																																setProperty(_el$, "value", value ?? "");
+																																effect(() => {
+																																	return {
+																																		e: props.name,
+																																		t: props.form
+																																	};
+																																}, ({ e, t }, _p$) => {
+																																	e !== _p$?.e && setAttribute(_el$, "name", e);
+																																	t !== _p$?.t && setAttribute(_el$, "form", t);
+																																});
+																																return _el$;
+																															})()
+																														}) : null;
+																													})];
+																												}
+																											}));
+																										}
+																									});
+																								}
+																							});
+																						}
+																					});
+																				}
+																			});
+																		}
+																	});
+																}
+															});
+														}
+													});
+												}
+											});
+										}
+									});
+								}
+							});
+						}
+					});
+				}
+			});
+		}
+	});
+}
+function ComboBoxValue(input) {
+	if (createIsHidden()) return null;
+	const [props, , setRef] = createContextProps(input, untrack(() => input.ref), ComboBoxValueContext);
+	const context = useContext(ComboBoxStateContext);
+	if (!context) throw new Error("ComboBoxValue must be rendered in a ComboBox.");
+	const state = context;
+	const formatter = createListFormatter();
+	const selectedText = createMemo(() => formatter.format(state.selectedItems.map((item) => item.textValue).filter(Boolean)));
+	const values = {
+		get isPlaceholder() {
+			return state.selectedItems.length === 0;
+		},
+		get selectedItems() {
+			return state.selectedItems.map((item) => item.value);
+		},
+		get selectedText() {
+			return selectedText();
+		},
+		state
+	};
+	const render = createRenderProps(mergeProps$1(props, {
+		get defaultChildren() {
+			return selectedText() || props.placeholder;
+		},
+		defaultClass: "solid2-aria-ComboBoxValue",
+		values
+	}));
+	return createComponent(dom.div, mergeProps(() => {
+		return filterDOMProps(props, { global: true });
+	}, render, {
+		ref: (element) => {
+			setRef(element);
+		},
+		get "data-placeholder"() {
+			return values.isPlaceholder || void 0;
+		}
+	}));
+}
+export { ComboBox, ComboBoxContext, ComboBoxStateContext, ComboBoxValue, ComboBoxValueContext };
+
+//# sourceMappingURL=combo-box.js.map