@solid2-aria/components 0.0.0-stage → 0.0.1

package/dist/browser/tag-group.js

@@ -0,0 +1,291 @@
+/*
+ * 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/TagGroup.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 { assignRef, createContextProps, createRenderProps, createSlot, createSlottedContext, dom } from "./utils.js";
+import { SelectableCollectionContext } from "./autocomplete.js";
+import { CollectionRendererContext } from "./collection.js";
+import { LabelContext } from "./label.js";
+import { ButtonContext } from "./button.js";
+import { TextContext } from "./text.js";
+import { SelectionIndicatorContext } from "./selection-indicator.js";
+import { ListStateContext } from "./list-box.js";
+import { applyRef, createComponent, memo, mergeProps } from "@solidjs/web";
+import { mergeProps as mergeProps$1 } from "@solid2-aria/core/utils/merge-props";
+import { createContext, createSignal, merge, omit, untrack, useContext } from "solid-js";
+import { BaseCollection, ItemNode } from "@solid2-aria/core/collections/base-collection";
+import { Collection, CollectionBuilder, createLeafComponent } from "@solid2-aria/core/collections/collection-builder";
+import { filterDOMProps } from "@solid2-aria/core/utils/filter-dom-props";
+import { createFocusRing } from "@solid2-aria/core/focus/create-focus-ring";
+import { createHover } from "@solid2-aria/core/interactions/create-hover";
+import { isTruthy } from "@solid2-aria/core/utils/truthy";
+import { createListState } from "@solid2-aria/stately/list/create-list-state";
+import { createTag } from "@solid2-aria/core/tag/create-tag";
+import { createTagGroup } from "@solid2-aria/core/tag/create-tag-group";
+// src/tag-group.tsx
+const TagGroupContext = createContext(null);
+const TagListContext = createContext(null);
+const TagCollection = createLeafComponent(ItemNode, (props, forwardedRef, item) => {
+	const state = useContext(ListStateContext);
+	if (!state) throw new Error("Tag must be rendered in a TagGroup.");
+	const [ref, setRef] = createSignal(null, { ownedWrite: true });
+	const aria = createTag({ item }, state, ref);
+	const focus = createFocusRing();
+	const hover = createHover(mergeProps$1(props, { get isDisabled() {
+		return aria.isDisabled;
+	} }));
+	const render = createRenderProps(mergeProps$1(props, {
+		defaultClass: "solid2-aria-Tag",
+		values: {
+			get allowsRemoving() {
+				return aria.allowsRemoving;
+			},
+			get isDisabled() {
+				return aria.isDisabled;
+			},
+			get isFocusVisible() {
+				return focus.isFocusVisible;
+			},
+			get isFocused() {
+				return aria.isFocused;
+			},
+			get isHovered() {
+				return hover.isHovered;
+			},
+			get isPressed() {
+				return aria.isPressed;
+			},
+			get isSelected() {
+				return aria.isSelected;
+			},
+			get selectionBehavior() {
+				return state.selectionManager.selectionBehavior;
+			},
+			get selectionMode() {
+				return state.selectionManager.selectionMode;
+			}
+		}
+	}));
+	return createComponent(dom.div, mergeProps(() => {
+		return mergeProps$1(omit(filterDOMProps(props, { global: true }), "id", "onClick"), render, merge(() => aria.rowProps ?? {}), merge(() => focus.focusProps ?? {}), merge(() => hover.hoverProps ?? {}));
+	}, {
+		ref: [(element) => {
+			setRef(element);
+		}, (element) => {
+			assignRef(forwardedRef, element);
+		}],
+		get "data-selected"() {
+			return aria.isSelected || void 0;
+		},
+		get "data-disabled"() {
+			return aria.isDisabled || void 0;
+		},
+		get "data-hovered"() {
+			return hover.isHovered || void 0;
+		},
+		get "data-focused"() {
+			return aria.isFocused || void 0;
+		},
+		get "data-focus-visible"() {
+			return focus.isFocusVisible || void 0;
+		},
+		get "data-pressed"() {
+			return aria.isPressed || void 0;
+		},
+		get "data-allows-removing"() {
+			return aria.allowsRemoving || void 0;
+		},
+		get "data-selection-mode"() {
+			return memo(() => {
+				return state.selectionManager.selectionMode === "none";
+			})() ? void 0 : state.selectionManager.selectionMode;
+		},
+		get children() {
+			return createComponent(dom.div, mergeProps(() => {
+				return aria.gridCellProps;
+			}, { get children() {
+				return createComponent(ButtonContext, {
+					value: { slots: { get remove() {
+						return aria.removeButtonProps;
+					} } },
+					get children() {
+						return createComponent(SelectionIndicatorContext, {
+							value: { get isSelected() {
+								return aria.isSelected;
+							} },
+							get children() {
+								return render.children;
+							}
+						});
+					}
+				});
+			} }));
+		}
+	}));
+});
+function Tag(props) {
+	return createComponent(TagCollection, mergeProps(props, { ref: (element) => {
+		assignRef(untrack(() => props.ref), element);
+	} }));
+}
+function TagGroup(input) {
+	const [props, , setRef] = createContextProps(input, untrack(() => input.ref), TagGroupContext);
+	return createComponent(ListStateContext, {
+		value: null,
+		get children() {
+			return createComponent(CollectionBuilder, {
+				createCollection: () => new BaseCollection(),
+				get content() {
+					return props.children;
+				},
+				children: (collection) => createComponent(TagGroupInner, {
+					props,
+					collection,
+					groupRef: setRef
+				})
+			});
+		}
+	});
+}
+function TagGroupInner(input) {
+	const [props, listRef, setListRef] = createContextProps(untrack(() => input.props), void 0, SelectableCollectionContext);
+	const [registerLabel, label] = createSlot(() => !isTruthy(props["aria-label"]) && !isTruthy(props["aria-labelledby"]));
+	const state = createListState(mergeProps$1(omit(props, "filter"), {
+		children: void 0,
+		get collection() {
+			return props.filter ? input.collection.filter(props.filter) : input.collection;
+		}
+	}));
+	const aria = createTagGroup(mergeProps$1(props, { get label() {
+		return label();
+	} }), state, listRef);
+	return createComponent(dom.div, mergeProps(() => {
+		return filterDOMProps(input.props, { global: true });
+	}, {
+		ref(r$) {
+			var _ref$ = input.groupRef;
+			typeof _ref$ === "function" || Array.isArray(_ref$) ? applyRef(_ref$, r$) : input.groupRef = r$;
+		},
+		get render() {
+			return props.render;
+		},
+		get "class"() {
+			return props.class ?? "solid2-aria-TagGroup";
+		},
+		get style() {
+			return props.style;
+		},
+		get slot() {
+			return props.slot ?? void 0;
+		},
+		get children() {
+			return createComponent(LabelContext, {
+				get value() {
+					return mergeProps$1(merge(() => aria.labelProps ?? {}), {
+						get elementType() {
+							return "span";
+						},
+						registerSlot: registerLabel
+					});
+				},
+				get children() {
+					return createComponent(TagListContext, {
+						value: {
+							get gridProps() {
+								return aria.gridProps;
+							},
+							ref: (element) => {
+								setListRef(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 props.children;
+										}
+									});
+								}
+							});
+						}
+					});
+				}
+			});
+		}
+	}));
+}
+function TagList(input) {
+	const state = useContext(ListStateContext);
+	if (!state) return createComponent(Collection, input);
+	const [props, , setRef] = createContextProps(input, untrack(() => input.ref), TagListContext);
+	const context = createSlottedContext(TagListContext);
+	const Root = useContext(CollectionRendererContext).CollectionRoot;
+	const focus = createFocusRing();
+	const values = {
+		get isEmpty() {
+			return state.collection.size === 0;
+		},
+		get isFocusVisible() {
+			return focus.isFocusVisible;
+		},
+		get isFocused() {
+			return focus.isFocused;
+		},
+		state
+	};
+	const render = createRenderProps(mergeProps$1(props, {
+		children: void 0,
+		defaultClass: "solid2-aria-TagList",
+		values
+	}));
+	return createComponent(dom.div, mergeProps(() => {
+		return mergeProps$1(filterDOMProps(props, { global: true }), merge(() => context?.gridProps ?? {}), merge(() => focus.focusProps ?? {}), render);
+	}, {
+		ref: (element) => {
+			setRef(element);
+		},
+		get "data-empty"() {
+			return values.isEmpty || void 0;
+		},
+		get "data-focused"() {
+			return focus.isFocused || void 0;
+		},
+		get "data-focus-visible"() {
+			return focus.isFocusVisible || void 0;
+		},
+		get children() {
+			return [createComponent(Root, { get collection() {
+				return state.collection;
+			} }), memo(() => {
+				return memo(() => {
+					return !!(values.isEmpty && props.renderEmptyState);
+				})() ? props.renderEmptyState(values) : null;
+			})];
+		}
+	}));
+}
+export { Tag, TagGroup, TagGroupContext, TagList, TagListContext };
+
+//# sourceMappingURL=tag-group.js.map

package/dist/browser/tag-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag-group.js","names":["<dom.div\n        {...mergeProps(\n          omit(filterDOMProps(props, { global: true }), \"id\", \"onClick\"),\n          render,\n          merge(() => aria.rowProps ?? {}),\n          merge(() => focus.focusProps ?? {}),\n          merge(() => hover.hoverProps ?? {})\n        )}\n        ref={[\n          (element: HTMLDivElement) => {\n            setRef(element);\n          },\n          (element: HTMLDivElement) => {\n            assignRef(forwardedRef, element);\n          },\n        ]}\n        data-selected={aria.isSelected || undefined}\n        data-disabled={aria.isDisabled || undefined}\n        data-hovered={hover.isHovered || undefined}\n        data-focused={aria.isFocused || undefined}\n        data-focus-visible={focus.isFocusVisible || undefined}\n        data-pressed={aria.isPressed || undefined}\n        data-allows-removing={aria.allowsRemoving || undefined}\n        data-selection-mode={\n          state.selectionManager.selectionMode === \"none\"\n            ? undefined\n            : state.selectionManager.selectionMode\n        }\n      >\n        <dom.div {...aria.gridCellProps}>\n          <ButtonContext\n            value={{\n              slots: {\n                get remove() {\n                  return aria.removeButtonProps;\n                },\n              },\n            }}\n          >\n            <SelectionIndicatorContext\n              value={{\n                get isSelected() {\n                  return aria.isSelected;\n                },\n              }}\n            >\n              {render.children}\n            </SelectionIndicatorContext>\n          </ButtonContext>\n        </dom.div>\n      </dom.div>","dom.div","ref={[\n          (element: HTMLDivElement) => {\n            setRef(element);\n          },\n          (element: HTMLDivElement) => {\n            assignRef(forwardedRef, element);\n          },\n        ]}","state.selectionManager.selectionMode === \"none\"\n            ? undefined\n            : state.selectionManager.selectionMode","<dom.div {...aria.gridCellProps}>\n          <ButtonContext\n            value={{\n              slots: {\n                get remove() {\n                  return aria.removeButtonProps;\n                },\n              },\n            }}\n          >\n            <SelectionIndicatorContext\n              value={{\n                get isSelected() {\n                  return aria.isSelected;\n                },\n              }}\n            >\n              {render.children}\n            </SelectionIndicatorContext>\n          </ButtonContext>\n        </dom.div>","<ButtonContext\n            value={{\n              slots: {\n                get remove() {\n                  return aria.removeButtonProps;\n                },\n              },\n            }}\n          >\n            <SelectionIndicatorContext\n              value={{\n                get isSelected() {\n                  return aria.isSelected;\n                },\n              }}\n            >\n              {render.children}\n            </SelectionIndicatorContext>\n          </ButtonContext>","value={{\n              slots: {\n                get remove() {\n                  return aria.removeButtonProps;\n                },\n              },\n            }}","<SelectionIndicatorContext\n              value={{\n                get isSelected() {\n                  return aria.isSelected;\n                },\n              }}\n            >\n              {render.children}\n            </SelectionIndicatorContext>","value={{\n                get isSelected() {\n                  return aria.isSelected;\n                },\n              }}","<TagCollection\n      {...props}\n      ref={(element: HTMLDivElement) => {\n        assignRef(\n          untrack(() => props.ref),\n          element\n        );\n      }}\n    />","ref={(element: HTMLDivElement) => {\n        assignRef(\n          untrack(() => props.ref),\n          element\n        );\n      }}","<ListStateContext value={null}>\n      <CollectionBuilder\n        createCollection={() => new BaseCollection<object>()}\n        content={props.children}\n      >\n        {(collection) => (\n          <TagGroupInner\n            props={props}\n            collection={collection}\n            groupRef={setRef}\n          />\n        )}\n      </CollectionBuilder>\n    </ListStateContext>","value={null}","<CollectionBuilder\n        createCollection={() => new BaseCollection<object>()}\n        content={props.children}\n      >\n        {(collection) => (\n          <TagGroupInner\n            props={props}\n            collection={collection}\n            groupRef={setRef}\n          />\n        )}\n      </CollectionBuilder>","createCollection={() => new BaseCollection<object>()}","<TagGroupInner\n            props={props}\n            collection={collection}\n            groupRef={setRef}\n          />","groupRef={setRef}","<dom.div\n      {...filterDOMProps(input.props, { global: true })}\n      ref={input.groupRef}\n      render={props.render}\n      class={props.class ?? \"solid2-aria-TagGroup\"}\n      style={props.style}\n      slot={props.slot ?? undefined}\n    >\n      <LabelContext\n        value={mergeProps(\n          merge(() => aria.labelProps ?? {}),\n          {\n            get elementType(): \"span\" {\n              return \"span\";\n            },\n            registerSlot: registerLabel,\n          }\n        )}\n      >\n        <TagListContext\n          value={{\n            get gridProps() {\n              return aria.gridProps;\n            },\n            ref: (element: HTMLElement) => {\n              setListRef(element);\n            },\n          }}\n        >\n          <ListStateContext value={state}>\n            <TextContext\n              value={{\n                slots: {\n                  get description() {\n                    return aria.descriptionProps;\n                  },\n                  get errorMessage() {\n                    return aria.errorMessageProps;\n                  },\n                },\n              }}\n            >\n              {props.children}\n            </TextContext>\n          </ListStateContext>\n        </TagListContext>\n      </LabelContext>\n    </dom.div>","ref={input.groupRef}","<LabelContext\n        value={mergeProps(\n          merge(() => aria.labelProps ?? {}),\n          {\n            get elementType(): \"span\" {\n              return \"span\";\n            },\n            registerSlot: registerLabel,\n          }\n        )}\n      >\n        <TagListContext\n          value={{\n            get gridProps() {\n              return aria.gridProps;\n            },\n            ref: (element: HTMLElement) => {\n              setListRef(element);\n            },\n          }}\n        >\n          <ListStateContext value={state}>\n            <TextContext\n              value={{\n                slots: {\n                  get description() {\n                    return aria.descriptionProps;\n                  },\n                  get errorMessage() {\n                    return aria.errorMessageProps;\n                  },\n                },\n              }}\n            >\n              {props.children}\n            </TextContext>\n          </ListStateContext>\n        </TagListContext>\n      </LabelContext>","<TagListContext\n          value={{\n            get gridProps() {\n              return aria.gridProps;\n            },\n            ref: (element: HTMLElement) => {\n              setListRef(element);\n            },\n          }}\n        >\n          <ListStateContext value={state}>\n            <TextContext\n              value={{\n                slots: {\n                  get description() {\n                    return aria.descriptionProps;\n                  },\n                  get errorMessage() {\n                    return aria.errorMessageProps;\n                  },\n                },\n              }}\n            >\n              {props.children}\n            </TextContext>\n          </ListStateContext>\n        </TagListContext>","value={{\n            get gridProps() {\n              return aria.gridProps;\n            },\n            ref: (element: HTMLElement) => {\n              setListRef(element);\n            },\n          }}","<ListStateContext value={state}>\n            <TextContext\n              value={{\n                slots: {\n                  get description() {\n                    return aria.descriptionProps;\n                  },\n                  get errorMessage() {\n                    return aria.errorMessageProps;\n                  },\n                },\n              }}\n            >\n              {props.children}\n            </TextContext>\n          </ListStateContext>","value={state}","<TextContext\n              value={{\n                slots: {\n                  get description() {\n                    return aria.descriptionProps;\n                  },\n                  get errorMessage() {\n                    return aria.errorMessageProps;\n                  },\n                },\n              }}\n            >\n              {props.children}\n            </TextContext>","value={{\n                slots: {\n                  get description() {\n                    return aria.descriptionProps;\n                  },\n                  get errorMessage() {\n                    return aria.errorMessageProps;\n                  },\n                },\n              }}","<Collection {...input} />","<dom.div\n      {...mergeProps(\n        filterDOMProps(props, { global: true }),\n        merge(() => context?.gridProps ?? {}),\n        merge(() => focus.focusProps ?? {}),\n        render\n      )}\n      ref={(element: HTMLDivElement) => {\n        setRef(element);\n      }}\n      data-empty={values.isEmpty || undefined}\n      data-focused={focus.isFocused || undefined}\n      data-focus-visible={focus.isFocusVisible || undefined}\n    >\n      <Root collection={state.collection} />\n      {values.isEmpty && props.renderEmptyState\n        ? props.renderEmptyState(values)\n        : null}\n    </dom.div>","ref={(element: HTMLDivElement) => {\n        setRef(element);\n      }}","<Root collection={state.collection} />","{values.isEmpty && props.renderEmptyState\n        ? props.renderEmptyState(values)\n        : null}","mergeProps","_$createComponent","_$mergeProps","_$memo","_$applyRef"],"sources":["../../src/tag-group.tsx"],"sourcesContent":["/*\n * Copyright 2022 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n/*\n * Derived from Adobe React Spectrum: packages/react-aria-components/src/TagGroup.tsx.\n * Modified for Solid Aria: adapted collection ownership, contexts, accessibility primitives, and reactive properties for Solid 2; 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 {\n  BaseCollection,\n  ItemNode,\n} from \"@solid2-aria/core/collections/base-collection\";\nimport {\n  Collection,\n  CollectionBuilder,\n  createLeafComponent,\n} from \"@solid2-aria/core/collections/collection-builder\";\nimport { createFocusRing } from \"@solid2-aria/core/focus/create-focus-ring\";\nimport { createHover } from \"@solid2-aria/core/interactions/create-hover\";\nimport { createTag } from \"@solid2-aria/core/tag/create-tag\";\nimport { createTagGroup } from \"@solid2-aria/core/tag/create-tag-group\";\nimport type { AriaTagGroupProps } from \"@solid2-aria/core/tag/create-tag-group\";\nimport { filterDOMProps } from \"@solid2-aria/core/utils/filter-dom-props\";\nimport { mergeProps } from \"@solid2-aria/core/utils/merge-props\";\nimport { isTruthy } from \"@solid2-aria/core/utils/truthy\";\nimport { createListState } from \"@solid2-aria/stately/list/create-list-state\";\nimport type { ListState } from \"@solid2-aria/stately/list/create-list-state\";\nimport type {\n  FocusEvents,\n  HoverEvents,\n  Key,\n  LinkDOMProps,\n  PressEvents,\n  Node,\n} from \"@solid2-aria/types-shared\";\nimport type {\n  DOMAttributes,\n  GlobalDOMAttributes,\n} from \"@solid2-aria/types-shared-web\";\nimport type { JSX } from \"@solidjs/web\";\nimport {\n  merge,\n  untrack,\n  createSignal,\n  createContext,\n  useContext,\n  omit,\n} from \"solid-js\";\n\nimport { SelectableCollectionContext } from \"./autocomplete\";\nimport type { SelectableCollectionContextValue } from \"./autocomplete\";\nimport { ButtonContext } from \"./button\";\nimport { CollectionRendererContext } from \"./collection\";\nimport type { CollectionProps, ItemRenderProps } from \"./collection\";\nimport { LabelContext } from \"./label\";\nimport { ListStateContext } from \"./list-box\";\nimport { SelectionIndicatorContext } from \"./selection-indicator\";\nimport { TextContext } from \"./text\";\nimport {\n  dom,\n  createContextProps,\n  createRenderProps,\n  createSlot,\n  createSlottedContext,\n  assignRef,\n} from \"./utils\";\nimport type {\n  Ref,\n  ClassOrFunction,\n  DOMProps,\n  DOMRenderProps,\n  RenderProps,\n  SlotProps,\n  StyleRenderProps,\n  ContextValue,\n} from \"./utils\";\n\nexport const TagGroupContext =\n  createContext<ContextValue<TagGroupProps, HTMLElement>>(null);\n\nexport const TagListContext = createContext<\n  ContextValue<\n    TagListProps<unknown> & {\n      gridProps?: DOMAttributes;\n    },\n    HTMLElement\n  >\n>(null);\n\nexport interface TagGroupProps\n  extends\n    Omit<\n      AriaTagGroupProps<unknown>,\n      | \"children\"\n      | \"items\"\n      | \"label\"\n      | \"description\"\n      | \"errorMessage\"\n      | \"keyboardDelegate\"\n    >,\n    DOMProps,\n    SlotProps,\n    DOMRenderProps<\"div\", undefined>,\n    GlobalDOMAttributes<HTMLDivElement> {\n  /**\n   * The CSS [class](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class) for the\n   * element.\n   *\n   * @default 'react-aria-TagGroup'\n   */\n  class?: JSX.ClassValue;\n}\n\nexport interface TagListRenderProps {\n  /**\n   * Whether the tag list has no items and should display its empty state.\n   *\n   * @selector [data-empty]\n   */\n  isEmpty: boolean;\n  /**\n   * Whether the tag list is currently focused.\n   *\n   * @selector [data-focused]\n   */\n  isFocused: boolean;\n  /**\n   * Whether the tag list is currently keyboard focused.\n   *\n   * @selector [data-focus-visible]\n   */\n  isFocusVisible: boolean;\n  /**\n   * State of the TagGroup.\n   */\n  state: ListState<unknown>;\n}\n\nexport interface TagListProps<T>\n  extends\n    Omit<CollectionProps<T>, \"disabledKeys\">,\n    StyleRenderProps<TagListRenderProps>,\n    GlobalDOMAttributes<HTMLDivElement> {\n  /**\n   * The CSS [class](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class) for the\n   * element. A function may be provided to compute the class based on component state.\n   *\n   * @default 'react-aria-TagList'\n   */\n  class?: ClassOrFunction<TagListRenderProps>;\n  /** Provides content to display when there are no items in the tag list. */\n  renderEmptyState?: (props: TagListRenderProps) => JSX.Element;\n}\n\nexport interface TagRenderProps extends Omit<\n  ItemRenderProps,\n  \"allowsDragging\" | \"isDragging\" | \"isDropTarget\"\n> {\n  /**\n   * Whether the tag group allows items to be removed.\n   *\n   * @selector [data-allows-removing]\n   */\n  allowsRemoving: boolean;\n}\n\nexport interface TagProps\n  extends\n    RenderProps<TagRenderProps>,\n    LinkDOMProps,\n    HoverEvents,\n    FocusEvents,\n    PressEvents,\n    Omit<GlobalDOMAttributes<HTMLDivElement>, \"onClick\"> {\n  /**\n   * The CSS [class](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class) for the\n   * element. A function may be provided to compute the class based on component state.\n   *\n   * @default 'react-aria-Tag'\n   */\n  class?: ClassOrFunction<TagRenderProps>;\n  /** A unique id for the tag. */\n  id?: Key;\n  /**\n   * A string representation of the tags's contents, used for accessibility.\n   * Required if children is not a plain text string.\n   */\n  textValue?: string;\n  /** Whether the tag is disabled. */\n  isDisabled?: boolean;\n  /**\n   * Handler that is called when a user performs an action on the item. The exact user event depends\n   * on the collection's `selectionBehavior` prop and the interaction modality.\n   */\n  onAction?: () => void;\n}\n\nconst TagCollection = createLeafComponent(\n  ItemNode,\n  (\n    props: TagProps,\n    forwardedRef: Ref<HTMLDivElement>,\n    item: Node<unknown>\n  ): JSX.Element => {\n    const state = useContext(ListStateContext);\n\n    if (!state) {\n      throw new Error(\"Tag must be rendered in a TagGroup.\");\n    }\n\n    const [ref, setRef] = createSignal<HTMLDivElement | null>(null, {\n      ownedWrite: true,\n    });\n\n    const aria = createTag({ item }, state, ref);\n    const focus = createFocusRing();\n\n    const hover = createHover(\n      mergeProps(props, {\n        get isDisabled() {\n          return aria.isDisabled;\n        },\n      })\n    );\n\n    const values: TagRenderProps = {\n      get allowsRemoving() {\n        return aria.allowsRemoving;\n      },\n      get isDisabled() {\n        return aria.isDisabled;\n      },\n      get isFocusVisible() {\n        return focus.isFocusVisible;\n      },\n      get isFocused() {\n        return aria.isFocused;\n      },\n      get isHovered() {\n        return hover.isHovered;\n      },\n      get isPressed() {\n        return aria.isPressed;\n      },\n      get isSelected() {\n        return aria.isSelected;\n      },\n      get selectionBehavior() {\n        return state.selectionManager.selectionBehavior;\n      },\n      get selectionMode() {\n        return state.selectionManager.selectionMode;\n      },\n    };\n\n    const render = createRenderProps(\n      mergeProps(props, { defaultClass: \"solid2-aria-Tag\", values })\n    );\n\n    return (\n      <dom.div\n        {...mergeProps(\n          omit(filterDOMProps(props, { global: true }), \"id\", \"onClick\"),\n          render,\n          merge(() => aria.rowProps ?? {}),\n          merge(() => focus.focusProps ?? {}),\n          merge(() => hover.hoverProps ?? {})\n        )}\n        ref={[\n          (element: HTMLDivElement) => {\n            setRef(element);\n          },\n          (element: HTMLDivElement) => {\n            assignRef(forwardedRef, element);\n          },\n        ]}\n        data-selected={aria.isSelected || undefined}\n        data-disabled={aria.isDisabled || undefined}\n        data-hovered={hover.isHovered || undefined}\n        data-focused={aria.isFocused || undefined}\n        data-focus-visible={focus.isFocusVisible || undefined}\n        data-pressed={aria.isPressed || undefined}\n        data-allows-removing={aria.allowsRemoving || undefined}\n        data-selection-mode={\n          state.selectionManager.selectionMode === \"none\"\n            ? undefined\n            : state.selectionManager.selectionMode\n        }\n      >\n        <dom.div {...aria.gridCellProps}>\n          <ButtonContext\n            value={{\n              slots: {\n                get remove() {\n                  return aria.removeButtonProps;\n                },\n              },\n            }}\n          >\n            <SelectionIndicatorContext\n              value={{\n                get isSelected() {\n                  return aria.isSelected;\n                },\n              }}\n            >\n              {render.children}\n            </SelectionIndicatorContext>\n          </ButtonContext>\n        </dom.div>\n      </dom.div>\n    );\n  }\n);\n\nexport function Tag(\n  props: TagProps & { ref?: Ref<HTMLDivElement> }\n): JSX.Element {\n  return (\n    <TagCollection\n      {...props}\n      ref={(element: HTMLDivElement) => {\n        assignRef(\n          untrack(() => props.ref),\n          element\n        );\n      }}\n    />\n  );\n}\n\nexport function TagGroup(\n  input: TagGroupProps & { ref?: Ref<HTMLDivElement> }\n): JSX.Element {\n  const [props, , setRef] = createContextProps(\n    input,\n    untrack(() => input.ref),\n    TagGroupContext\n  );\n\n  return (\n    <ListStateContext value={null}>\n      <CollectionBuilder\n        createCollection={() => new BaseCollection<object>()}\n        content={props.children}\n      >\n        {(collection) => (\n          <TagGroupInner\n            props={props}\n            collection={collection}\n            groupRef={setRef}\n          />\n        )}\n      </CollectionBuilder>\n    </ListStateContext>\n  );\n}\n\nfunction TagGroupInner(input: {\n  props: TagGroupProps & SelectableCollectionContextValue<object>;\n  collection: BaseCollection<object>;\n  groupRef: (element: HTMLDivElement) => void;\n}): JSX.Element {\n  const [props, listRef, setListRef] = createContextProps(\n    untrack(() => input.props),\n    undefined,\n    SelectableCollectionContext\n  );\n\n  const [registerLabel, label] = createSlot(\n    () => !isTruthy(props[\"aria-label\"]) && !isTruthy(props[\"aria-labelledby\"])\n  );\n\n  const state = createListState(\n    mergeProps(omit(props, \"filter\"), {\n      children: undefined,\n      get collection() {\n        return props.filter\n          ? input.collection.filter(props.filter)\n          : input.collection;\n      },\n    })\n  );\n\n  const aria = createTagGroup(\n    mergeProps(props, {\n      get label() {\n        return label();\n      },\n    }),\n    state,\n    listRef\n  );\n\n  return (\n    <dom.div\n      {...filterDOMProps(input.props, { global: true })}\n      ref={input.groupRef}\n      render={props.render}\n      class={props.class ?? \"solid2-aria-TagGroup\"}\n      style={props.style}\n      slot={props.slot ?? undefined}\n    >\n      <LabelContext\n        value={mergeProps(\n          merge(() => aria.labelProps ?? {}),\n          {\n            get elementType(): \"span\" {\n              return \"span\";\n            },\n            registerSlot: registerLabel,\n          }\n        )}\n      >\n        <TagListContext\n          value={{\n            get gridProps() {\n              return aria.gridProps;\n            },\n            ref: (element: HTMLElement) => {\n              setListRef(element);\n            },\n          }}\n        >\n          <ListStateContext value={state}>\n            <TextContext\n              value={{\n                slots: {\n                  get description() {\n                    return aria.descriptionProps;\n                  },\n                  get errorMessage() {\n                    return aria.errorMessageProps;\n                  },\n                },\n              }}\n            >\n              {props.children}\n            </TextContext>\n          </ListStateContext>\n        </TagListContext>\n      </LabelContext>\n    </dom.div>\n  );\n}\n\nexport function TagList<T>(\n  input: TagListProps<T> & { ref?: Ref<HTMLDivElement> }\n): JSX.Element {\n  const state = useContext(ListStateContext);\n\n  if (!state) {\n    // oxlint-disable-next-line solid/components-return-once -- Static collection traversal and context registration are fixed when the owner is created.\n    return <Collection {...input} />;\n  }\n\n  const [props, , setRef] = createContextProps(\n    input,\n    untrack(() => input.ref),\n    TagListContext\n  );\n\n  const context = createSlottedContext(TagListContext);\n  const renderer = useContext(CollectionRendererContext);\n  const Root = renderer.CollectionRoot;\n  const focus = createFocusRing();\n\n  const values: TagListRenderProps = {\n    get isEmpty() {\n      return state.collection.size === 0;\n    },\n    get isFocusVisible() {\n      return focus.isFocusVisible;\n    },\n    get isFocused() {\n      return focus.isFocused;\n    },\n    state,\n  };\n\n  const render = createRenderProps(\n    mergeProps(props, {\n      children: undefined,\n      defaultClass: \"solid2-aria-TagList\",\n      values,\n    })\n  );\n\n  return (\n    <dom.div\n      {...mergeProps(\n        filterDOMProps(props, { global: true }),\n        merge(() => context?.gridProps ?? {}),\n        merge(() => focus.focusProps ?? {}),\n        render\n      )}\n      ref={(element: HTMLDivElement) => {\n        setRef(element);\n      }}\n      data-empty={values.isEmpty || undefined}\n      data-focused={focus.isFocused || undefined}\n      data-focus-visible={focus.isFocusVisible || undefined}\n    >\n      <Root collection={state.collection} />\n      {values.isEmpty && props.renderEmptyState\n        ? props.renderEmptyState(values)\n        : null}\n    </dom.div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsFA,MAAa,kBACX,cAAwD,IAAI;AAE9D,MAAa,iBAAiB,cAO5B,IAAI;AA8GN,MAAM,gBAAgB,oBACpB,WAEE,OACA,cACA,SACgB;CAChB,MAAM,QAAQ,WAAW,gBAAgB;CAEzC,IAAI,CAAC,OACH,MAAM,IAAI,MAAM,qCAAqC;CAGvD,MAAM,CAAC,KAAK,UAAU,aAAoC,MAAM,EAC9D,YAAY,KACd,CAAC;CAED,MAAM,OAAO,UAAU,EAAE,KAAK,GAAG,OAAO,GAAG;CAC3C,MAAM,QAAQ,gBAAgB;CAE9B,MAAM,QAAQ,YACZ+B,aAAW,OAAO,EAChB,IAAI,aAAa;EACf,OAAO,KAAK;CACd,EACF,CAAC,CACH;CAgCA,MAAM,SAAS,kBACbA,aAAW,OAAO;EAAE,cAAc;EAAmB,QAAA;GA9BrD,IAAI,iBAAiB;IACnB,OAAO,KAAK;GACd;GACA,IAAI,aAAa;IACf,OAAO,KAAK;GACd;GACA,IAAI,iBAAiB;IACnB,OAAO,MAAM;GACf;GACA,IAAI,YAAY;IACd,OAAO,KAAK;GACd;GACA,IAAI,YAAY;IACd,OAAO,MAAM;GACf;GACA,IAAI,YAAY;IACd,OAAO,KAAK;GACd;GACA,IAAI,aAAa;IACf,OAAO,KAAK;GACd;GACA,IAAI,oBAAoB;IACtB,OAAO,MAAM,iBAAiB;GAChC;GACA,IAAI,gBAAgB;IAClB,OAAO,MAAM,iBAAiB;GAChC;EAIqD;CAAO,CAAC,CAC/D;CAEA,OACE/B,gBAAAA,IAACC,KAADD,iBACE;EAAI,OAAA+B,aACF,KAAK,eAAe,OAAO,EAAE,QAAQ,KAAK,CAAC,GAAG,MAAM,SAAS,GAC7D,QACA,YAAY,KAAK,YAAY,CAAC,CAAC,GAC/B,YAAY,MAAM,cAAc,CAAC,CAAC,GAClC,YAAY,MAAM,cAAc,CAAC,CAAC,CACpC;CAAC,GAPH;EAQE7B,KAAK,EACF,YAA4B;GAC3B,OAAO,OAAO;EAChB,IACC,YAA4B;GAC3B,UAAU,cAAc,OAAO;EACjC,CACF;EACA,IAAA,kBAAA;GAAe,OAAA,KAAK,cAAc,KAAA;EAAS;EAC3C,IAAA,kBAAA;GAAe,OAAA,KAAK,cAAc,KAAA;EAAS;EAC3C,IAAA,iBAAA;GAAc,OAAA,MAAM,aAAa,KAAA;EAAS;EAC1C,IAAA,iBAAA;GAAc,OAAA,KAAK,aAAa,KAAA;EAAS;EACzC,IAAA,uBAAA;GAAoB,OAAA,MAAM,kBAAkB,KAAA;EAAS;EACrD,IAAA,iBAAA;GAAc,OAAA,KAAK,aAAa,KAAA;EAAS;EACzC,IAAA,yBAAA;GAAsB,OAAA,KAAK,kBAAkB,KAAA;EAAS;EACtD,IAAA,wBAAA;GACEC,OAAAA,WAAAA;IAAM,OAAA,MAAA,iBAAiB,kBAAkB;GAEF,CAAA,CAAC,CAAD,IADnC,KAAA,IACA,MAAM,iBAAiB;EAC7B;EA3BF,IAAA,WAAA;GA6BEC,OAAAA,gBAAAA,IAACH,KAADG,iBAAS;IAAI,OAAA,KAAK;GAAa,GAA/B,EAAA,IAAA,WAAA;IACEC,OAAAA,gBAAAA,eAAAA;KACEC,OAAO,EACL,OAAO,EACL,IAAI,SAAS;MACX,OAAO,KAAK;KACd,EACF,EACF;KAPF,IAAA,WAAA;MASEC,OAAAA,gBAAAA,2BAAAA;OACEC,OAAO,EACL,IAAI,aAAa;QACf,OAAO,KAAK;OACd,EACF;OALF,IAAA,WAAA;QAOG,OAAA,OAAO;OACiB;;KACd;;GACR,EAAA,CAAA,CAAA;EACF;;AAEb,CACF;AAEA,SAAgB,IACd,OACa;CACb,OACEC,gBAAAA,eAAAA,WACM,OADN,EAEEC,MAAM,YAA4B;EAChC,UACE,cAAc,MAAM,GAAG,GACvB,OACF;CACF,EACD,CAAA,CAAA;AAEL;AAEA,SAAgB,SACd,OACa;CACb,MAAM,CAAC,SAAS,UAAU,mBACxB,OACA,cAAc,MAAM,GAAG,GACvB,eACF;CAEA,OACEC,gBAAAA,kBAAAA;EAAkBC,OAAO;EAAzB,IAAA,WAAA;GACEC,OAAAA,gBAAAA,mBAAAA;IACEC,wBAAwB,IAAI,eAAuB;IACnD,IAAA,UAAA;KAAS,OAAA,MAAM;IAAQ;IAFzBD,WAII,eACAE,gBAAAA,eAAAA;KACS;KACK;KACZC,UAAU;IACX,CAAA;GAEc,CAAA;EACH;;AAEtB;AAEA,SAAS,cAAc,OAIP;CACd,MAAM,CAAC,OAAO,SAAS,cAAc,mBACnC,cAAc,MAAM,KAAK,GACzB,KAAA,GACA,2BACF;CAEA,MAAM,CAAC,eAAe,SAAS,iBACvB,CAAC,SAAS,MAAM,aAAa,KAAK,CAAC,SAAS,MAAM,kBAAkB,CAC5E;CAEA,MAAM,QAAQ,gBACZe,aAAW,KAAK,OAAO,QAAQ,GAAG;EAChC,UAAU,KAAA;EACV,IAAI,aAAa;GACf,OAAO,MAAM,SACT,MAAM,WAAW,OAAO,MAAM,MAAM,IACpC,MAAM;EACZ;CACF,CAAC,CACH;CAEA,MAAM,OAAO,eACXA,aAAW,OAAO,EAChB,IAAI,QAAQ;EACV,OAAO,MAAM;CACf,EACF,CAAC,GACD,OACA,OACF;CAEA,OACEd,gBAAAA,IAAChB,KAADgB,iBACE;EAAI,OAAA,eAAe,MAAM,OAAO,EAAE,QAAQ,KAAK,CAAC;CAAC,GADnD;EAEE,IAAA,IAAA;GAAK,IAAA,QAAA,MAAM;GAAX,OAAA,UAAA,cAAA,MAAA,QAAA,KAAmB,IAAnBC,SAAAA,OAAAA,EAAmB,IAAnB,MAAW,WAAXA;EAAmB;EACnB,IAAA,SAAA;GAAQ,OAAA,MAAM;EAAM;EACpB,IAAA,UAAA;GAAO,OAAA,MAAM,SAAS;EAAsB;EAC5C,IAAA,QAAA;GAAO,OAAA,MAAM;EAAK;EAClB,IAAA,OAAA;GAAM,OAAA,MAAM,QAAQ,KAAA;EAAS;EAN/B,IAAA,WAAA;GAQEC,OAAAA,gBAAAA,cAAAA;IACE,IAAA,QAAA;KAAO,OAAAY,aACL,YAAY,KAAK,cAAc,CAAC,CAAC,GACjC;MACE,IAAI,cAAsB;OACxB,OAAO;MACT;MACA,cAAc;KAChB,CACF;IAAC;IATH,IAAA,WAAA;KAWEX,OAAAA,gBAAAA,gBAAAA;MACEC,OAAO;OACL,IAAI,YAAY;QACd,OAAO,KAAK;OACd;OACA,MAAM,YAAyB;QAC7B,WAAW,OAAO;OACpB;MACF;MARF,IAAA,WAAA;OAUEC,OAAAA,gBAAAA,kBAAAA;QAAkBC,OAAO;QAAzB,IAAA,WAAA;SACEC,OAAAA,gBAAAA,aAAAA;UACEC,OAAO,EACL,OAAO;WACL,IAAI,cAAc;YAChB,OAAO,KAAK;WACd;WACA,IAAI,eAAe;YACjB,OAAO,KAAK;WACd;UACF,EACF;UAVF,IAAA,WAAA;WAYG,OAAA,MAAM;UACI;;QACG;;MACJ;;IACJ;;EACP;;AAEb;AAEA,SAAgB,QACd,OACa;CACb,MAAM,QAAQ,WAAW,gBAAgB;CAEzC,IAAI,CAAC,OAEH,OAAOC,gBAAAA,YAAgB,KAAQ;CAGjC,MAAM,CAAC,SAAS,UAAU,mBACxB,OACA,cAAc,MAAM,GAAG,GACvB,cACF;CAEA,MAAM,UAAU,qBAAqB,cAAc;CAEnD,MAAM,OADW,WAAW,yBACf,CAAA,CAAS;CACtB,MAAM,QAAQ,gBAAgB;CAE9B,MAAM,SAA6B;EACjC,IAAI,UAAU;GACZ,OAAO,MAAM,WAAW,SAAS;EACnC;EACA,IAAI,iBAAiB;GACnB,OAAO,MAAM;EACf;EACA,IAAI,YAAY;GACd,OAAO,MAAM;EACf;EACA;CACF;CAEA,MAAM,SAAS,kBACbK,aAAW,OAAO;EAChB,UAAU,KAAA;EACV,cAAc;EACd;CACF,CAAC,CACH;CAEA,OACEJ,gBAAAA,IAAC1B,KAAD0B,iBACE;EAAI,OAAAI,aACF,eAAe,OAAO,EAAE,QAAQ,KAAK,CAAC,GACtC,YAAY,SAAS,aAAa,CAAC,CAAC,GACpC,YAAY,MAAM,cAAc,CAAC,CAAC,GAClC,MACF;CAAC,GANH;EAOEH,MAAM,YAA4B;GAChC,OAAO,OAAO;EAChB;EACA,IAAA,eAAA;GAAY,OAAA,OAAO,WAAW,KAAA;EAAS;EACvC,IAAA,iBAAA;GAAc,OAAA,MAAM,aAAa,KAAA;EAAS;EAC1C,IAAA,uBAAA;GAAoB,OAAA,MAAM,kBAAkB,KAAA;EAAS;EAZvD,IAAA,WAAA;GAaC,OAAA,CACCC,gBAAAA,MAAAA,EAAM,IAAA,aAAA;IAAY,OAAA,MAAM;GAAU,EAAG,CAAA,GACrCC,WAAAA;;KAAC,OAAA,CAAA,EAAA,OAAO,WAAW,MAAM;IAEjB,CAAA,CAAC,CAAD,IADJ,MAAM,iBAAiB,MAAM,IAC7B;GAAI,CAAA,CAHT;EAIQ;;AAEb"}

package/dist/browser/text-area.d.ts

@@ -0,0 +1,16 @@
+/*
+ * Derived from Adobe React Spectrum: packages/react-aria-components/src/TextArea.tsx.
+ * Modified for Solid Aria: adapted components, contexts, refs, 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 { ContextValue, Ref, RenderProps, SlotProps } from "./utils.js";
+import { InputRenderProps } from "./input.js";
+import { JSX } from "@solidjs/web";
+import { HoverEvents } from "@solid2-aria/types-shared";
+export interface TextAreaProps extends Omit<JSX.TextareaHTMLAttributes<HTMLTextAreaElement>, "ref" | "class" | "style" | "children" | "slot">, HoverEvents, SlotProps, RenderProps<InputRenderProps, "textarea"> {
+  ref?: Ref<HTMLTextAreaElement>;
+  autoFocus?: boolean;
+}
+export declare const TextAreaContext: import("solid-js").Context<ContextValue<TextAreaProps, HTMLTextAreaElement>>;
+export declare function TextArea(input: TextAreaProps): JSX.Element;
+//# sourceMappingURL=text-area.d.ts.map

package/dist/browser/text-area.js

@@ -0,0 +1,75 @@
+/*
+ * Derived from Adobe React Spectrum: packages/react-aria-components/src/TextArea.tsx.
+ * Modified for Solid Aria: adapted components, contexts, refs, 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, dom } from "./utils.js";
+import { createComponent, mergeProps } from "@solidjs/web";
+import { mergeProps as mergeProps$1 } from "@solid2-aria/core/utils/merge-props";
+import { createContext, merge, omit, untrack } from "solid-js";
+import { createFocusRing } from "@solid2-aria/core/focus/create-focus-ring";
+import { createHover } from "@solid2-aria/core/interactions/create-hover";
+import { isTruthy } from "@solid2-aria/core/utils/truthy";
+// src/text-area.tsx
+const TextAreaContext = createContext(null);
+function TextArea(input) {
+	const [props, , setRef] = createContextProps(input, untrack(() => input.ref), TextAreaContext);
+	const focus = createFocusRing({
+		get autoFocus() {
+			return props.autoFocus ?? isTruthy(props.autofocus);
+		},
+		isTextInput: true
+	});
+	const hover = createHover(mergeProps$1(props, { get isDisabled() {
+		return isTruthy(props.disabled);
+	} }));
+	const values = {
+		get isDisabled() {
+			return isTruthy(props.disabled);
+		},
+		get isFocusVisible() {
+			return focus.isFocusVisible;
+		},
+		get isFocused() {
+			return focus.isFocused;
+		},
+		get isHovered() {
+			return hover.isHovered;
+		},
+		get isInvalid() {
+			return isTruthy(props["aria-invalid"]) && props["aria-invalid"] !== "false";
+		}
+	};
+	const render = createRenderProps(mergeProps$1(props, {
+		defaultClass: "solid2-aria-TextArea",
+		values
+	}));
+	return createComponent(dom.textarea, mergeProps(() => {
+		return mergeProps$1(omit(props, "onHoverStart", "onHoverChange", "onHoverEnd", "autoFocus", "slot", "children"), merge(() => focus.focusProps ?? {}), merge(() => hover.hoverProps ?? {}), render);
+	}, {
+		ref: (element) => {
+			setRef(element);
+		},
+		get slot() {
+			return props.slot ?? void 0;
+		},
+		get "data-focused"() {
+			return focus.isFocused || void 0;
+		},
+		get "data-focus-visible"() {
+			return focus.isFocusVisible || void 0;
+		},
+		get "data-hovered"() {
+			return hover.isHovered || void 0;
+		},
+		get "data-disabled"() {
+			return props.disabled ?? void 0;
+		},
+		get "data-invalid"() {
+			return values.isInvalid || void 0;
+		}
+	}));
+}
+export { TextArea, TextAreaContext };
+
+//# sourceMappingURL=text-area.js.map

package/dist/browser/text-area.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-area.js","names":["<dom.textarea\n      {...mergeProps(\n        omit(\n          props,\n          \"onHoverStart\",\n          \"onHoverChange\",\n          \"onHoverEnd\",\n          \"autoFocus\",\n          \"slot\",\n          \"children\"\n        ),\n        merge(() => focus.focusProps ?? {}),\n        merge(() => hover.hoverProps ?? {}),\n        render\n      )}\n      ref={(element: HTMLTextAreaElement) => {\n        setRef(element);\n      }}\n      slot={props.slot ?? undefined}\n      data-focused={focus.isFocused || undefined}\n      data-focus-visible={focus.isFocusVisible || undefined}\n      data-hovered={hover.isHovered || undefined}\n      data-disabled={props.disabled ?? undefined}\n      data-invalid={values.isInvalid || undefined}\n    />","dom.textarea","ref={(element: HTMLTextAreaElement) => {\n        setRef(element);\n      }}","mergeProps","_$createComponent","_$mergeProps"],"sources":["../../src/text-area.tsx"],"sourcesContent":["/*\n * Derived from Adobe React Spectrum: packages/react-aria-components/src/TextArea.tsx.\n * Modified for Solid Aria: adapted components, contexts, refs, and reactive properties for Solid 2; 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 { createFocusRing } from \"@solid2-aria/core/focus/create-focus-ring\";\nimport { createHover } from \"@solid2-aria/core/interactions/create-hover\";\nimport { mergeProps } from \"@solid2-aria/core/utils/merge-props\";\nimport { isTruthy } from \"@solid2-aria/core/utils/truthy\";\nimport type { HoverEvents } from \"@solid2-aria/types-shared\";\nimport type { JSX } from \"@solidjs/web\";\nimport { merge, untrack, createContext, omit } from \"solid-js\";\n\nimport type { InputRenderProps } from \"./input\";\nimport { dom, createContextProps, createRenderProps } from \"./utils\";\nimport type { Ref, ContextValue, SlotProps, RenderProps } from \"./utils\";\n\nexport interface TextAreaProps\n  extends\n    Omit<\n      JSX.TextareaHTMLAttributes<HTMLTextAreaElement>,\n      \"ref\" | \"class\" | \"style\" | \"children\" | \"slot\"\n    >,\n    HoverEvents,\n    SlotProps,\n    RenderProps<InputRenderProps, \"textarea\"> {\n  ref?: Ref<HTMLTextAreaElement>;\n  autoFocus?: boolean;\n}\n\nexport const TextAreaContext =\n  createContext<ContextValue<TextAreaProps, HTMLTextAreaElement>>(null);\n\nexport function TextArea(input: TextAreaProps): JSX.Element {\n  const [props, , setRef] = createContextProps(\n    input,\n    untrack(() => input.ref),\n    TextAreaContext\n  );\n\n  const focus = createFocusRing({\n    get autoFocus() {\n      return props.autoFocus ?? isTruthy(props.autofocus);\n    },\n    isTextInput: true,\n  });\n\n  const hover = createHover(\n    mergeProps(props, {\n      get isDisabled() {\n        return isTruthy(props.disabled);\n      },\n    })\n  );\n\n  const values: InputRenderProps = {\n    get isDisabled() {\n      return isTruthy(props.disabled);\n    },\n    get isFocusVisible() {\n      return focus.isFocusVisible;\n    },\n    get isFocused() {\n      return focus.isFocused;\n    },\n    get isHovered() {\n      return hover.isHovered;\n    },\n    get isInvalid() {\n      return (\n        isTruthy(props[\"aria-invalid\"]) && props[\"aria-invalid\"] !== \"false\"\n      );\n    },\n  };\n\n  const render = createRenderProps(\n    mergeProps(props, { defaultClass: \"solid2-aria-TextArea\", values })\n  );\n\n  return (\n    <dom.textarea\n      {...mergeProps(\n        omit(\n          props,\n          \"onHoverStart\",\n          \"onHoverChange\",\n          \"onHoverEnd\",\n          \"autoFocus\",\n          \"slot\",\n          \"children\"\n        ),\n        merge(() => focus.focusProps ?? {}),\n        merge(() => hover.hoverProps ?? {}),\n        render\n      )}\n      ref={(element: HTMLTextAreaElement) => {\n        setRef(element);\n      }}\n      slot={props.slot ?? undefined}\n      data-focused={focus.isFocused || undefined}\n      data-focus-visible={focus.isFocusVisible || undefined}\n      data-hovered={hover.isHovered || undefined}\n      data-disabled={props.disabled ?? undefined}\n      data-invalid={values.isInvalid || undefined}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AA+BA,MAAa,kBACX,cAAgE,IAAI;AAEtE,SAAgB,SAAS,OAAmC;CAC1D,MAAM,CAAC,SAAS,UAAU,mBACxB,OACA,cAAc,MAAM,GAAG,GACvB,eACF;CAEA,MAAM,QAAQ,gBAAgB;EAC5B,IAAI,YAAY;GACd,OAAO,MAAM,aAAa,SAAS,MAAM,SAAS;EACpD;EACA,aAAa;CACf,CAAC;CAED,MAAM,QAAQ,YACZG,aAAW,OAAO,EAChB,IAAI,aAAa;EACf,OAAO,SAAS,MAAM,QAAQ;CAChC,EACF,CAAC,CACH;CAEA,MAAM,SAA2B;EAC/B,IAAI,aAAa;GACf,OAAO,SAAS,MAAM,QAAQ;EAChC;EACA,IAAI,iBAAiB;GACnB,OAAO,MAAM;EACf;EACA,IAAI,YAAY;GACd,OAAO,MAAM;EACf;EACA,IAAI,YAAY;GACd,OAAO,MAAM;EACf;EACA,IAAI,YAAY;GACd,OACE,SAAS,MAAM,eAAe,KAAK,MAAM,oBAAoB;EAEjE;CACF;CAEA,MAAM,SAAS,kBACbA,aAAW,OAAO;EAAE,cAAc;EAAwB;CAAO,CAAC,CACpE;CAEA,OACEH,gBAAAA,IAACC,UAADD,iBACE;EAAI,OAAAG,aACF,KACE,OACA,gBACA,iBACA,cACA,aACA,QACA,UACF,GACA,YAAY,MAAM,cAAc,CAAC,CAAC,GAClC,YAAY,MAAM,cAAc,CAAC,CAAC,GAClC,MACF;CAAC,GAdH;EAeED,MAAM,YAAiC;GACrC,OAAO,OAAO;EAChB;EACA,IAAA,OAAA;GAAM,OAAA,MAAM,QAAQ,KAAA;EAAS;EAC7B,IAAA,iBAAA;GAAc,OAAA,MAAM,aAAa,KAAA;EAAS;EAC1C,IAAA,uBAAA;GAAoB,OAAA,MAAM,kBAAkB,KAAA;EAAS;EACrD,IAAA,iBAAA;GAAc,OAAA,MAAM,aAAa,KAAA;EAAS;EAC1C,IAAA,kBAAA;GAAe,OAAA,MAAM,YAAY,KAAA;EAAS;EAC1C,IAAA,iBAAA;GAAc,OAAA,OAAO,aAAa,KAAA;EAAS;CAC5C,CAAA,CAAA;AAEL"}

package/dist/browser/text-field.d.ts

@@ -0,0 +1,31 @@
+/*
+ * 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/TextField.tsx.
+ * Modified for Solid Aria: adapted components, contexts, refs, 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 { ContextValue, Ref, RenderProps, SlotProps } from "./utils.js";
+import { JSX } from "@solidjs/web";
+import { AriaTextFieldProps } from "@solid2-aria/core/textfield/create-text-field";
+export interface TextFieldRenderProps {
+  isDisabled: boolean;
+  isInvalid: boolean;
+  isReadOnly: boolean;
+  isRequired: boolean;
+}
+export interface TextFieldProps extends Omit<AriaTextFieldProps<HTMLInputElement | HTMLTextAreaElement>, "label" | "description" | "errorMessage" | "children">, SlotProps, RenderProps<TextFieldRenderProps> {
+  ref?: Ref<HTMLDivElement>;
+}
+export declare const TextFieldContext: import("solid-js").Context<ContextValue<TextFieldProps, HTMLDivElement>>;
+export declare function TextField(input: TextFieldProps): JSX.Element;
+//# sourceMappingURL=text-field.d.ts.map

package/dist/browser/text-field.js

@@ -0,0 +1,152 @@
+/*
+ * 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/TextField.tsx.
+ * Modified for Solid Aria: adapted components, contexts, refs, 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 { assignRef, createContextProps, createRenderProps, createSlot, createSlottedContext, dom } from "./utils.js";
+import { FieldInputContext } from "./autocomplete.js";
+import { LabelContext } from "./label.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 { TextAreaContext } from "./text-area.js";
+import { createComponent, mergeProps } from "@solidjs/web";
+import { mergeProps as mergeProps$1 } from "@solid2-aria/core/utils/merge-props";
+import { createContext, createMemo, createSignal, merge, omit, untrack } from "solid-js";
+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 { createTextField } from "@solid2-aria/core/textfield/create-text-field";
+// src/text-field.tsx
+const TextFieldContext = createContext(null);
+function TextField(input) {
+	if (createIsHidden()) return null;
+	const [ownProps, , setRef] = createContextProps(input, untrack(() => input.ref), TextFieldContext);
+	const fieldInput = createSlottedContext(FieldInputContext);
+	const props = mergeProps$1(fieldInput ? omit(fieldInput, "ref") : {}, ownProps);
+	const form = createSlottedContext(FormContext);
+	const [inputRef, setInputRef] = createSignal(null, { ownedWrite: true });
+	const [inputType, setInputType] = createSignal("input", { ownedWrite: true });
+	const [registerLabel, label] = createSlot(() => !isTruthy(props["aria-label"]) && !isTruthy(props["aria-labelledby"]));
+	const aria = createTextField(mergeProps$1(props, {
+		get inputElementType() {
+			return inputType();
+		},
+		get label() {
+			return label();
+		},
+		get validationBehavior() {
+			return props.validationBehavior ?? form?.validationBehavior ?? "native";
+		}
+	}), inputRef);
+	const render = createRenderProps(mergeProps$1(props, {
+		defaultClass: "solid2-aria-TextField",
+		values: {
+			get isDisabled() {
+				return props.isDisabled === true;
+			},
+			get isInvalid() {
+				return aria.isInvalid;
+			},
+			get isReadOnly() {
+				return props.isReadOnly === true;
+			},
+			get isRequired() {
+				return props.isRequired === true;
+			}
+		}
+	}));
+	const labelProps = mergeProps$1(merge(() => aria.labelProps), { registerSlot: registerLabel });
+	const readInput = createMemo(() => aria.inputProps);
+	const inputProps = mergeProps$1(merge(readInput), { ref: (el) => {
+		setInputRef(el);
+		assignRef(untrack(() => fieldInput?.ref), el);
+		if (el) setInputType(el.localName === "textarea" ? "textarea" : "input");
+	} });
+	return createComponent(dom.div, mergeProps(() => {
+		return omit(filterDOMProps(props, { global: true }), "id");
+	}, render, {
+		ref: (element) => {
+			setRef(element);
+		},
+		get slot() {
+			return props.slot ?? void 0;
+		},
+		get "data-disabled"() {
+			return props.isDisabled ?? void 0;
+		},
+		get "data-invalid"() {
+			return aria.isInvalid || void 0;
+		},
+		get "data-readonly"() {
+			return props.isReadOnly ?? void 0;
+		},
+		get "data-required"() {
+			return props.isRequired ?? void 0;
+		},
+		get children() {
+			return createComponent(LabelContext, {
+				value: labelProps,
+				get children() {
+					return createComponent(InputContext, {
+						value: inputProps,
+						get children() {
+							return createComponent(TextAreaContext, {
+								value: inputProps,
+								get children() {
+									return createComponent(GroupContext, {
+										value: {
+											get isDisabled() {
+												return props.isDisabled === true;
+											},
+											get isInvalid() {
+												return aria.isInvalid;
+											},
+											role: "presentation"
+										},
+										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 render.children;
+														}
+													});
+												}
+											});
+										}
+									});
+								}
+							});
+						}
+					});
+				}
+			});
+		}
+	}));
+}
+export { TextField, TextFieldContext };
+
+//# sourceMappingURL=text-field.js.map