@solid2-aria/components 0.0.0-stage → 0.0.1

package/dist/browser/tabs.js

@@ -0,0 +1,378 @@
+/*
+ * 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/Tabs.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, createSlottedContext, dom } from "./utils.js";
+import { CollectionRendererContext, DefaultCollectionRenderer } from "./collection.js";
+import { SelectionIndicatorContext } from "./selection-indicator.js";
+import { applyRef, createComponent, dynamic, mergeProps } from "@solidjs/web";
+import { mergeProps as mergeProps$1 } from "@solid2-aria/core/utils/merge-props";
+import { Show, 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 { createIsHidden } from "@solid2-aria/core/collections/hidden";
+import { createEnterAnimation, createExitAnimation } from "@solid2-aria/core/utils/animation";
+import { createTab } from "@solid2-aria/core/tabs/create-tab";
+import { createTabList } from "@solid2-aria/core/tabs/create-tab-list";
+import { createTabPanel } from "@solid2-aria/core/tabs/create-tab-panel";
+import { createTabListState } from "@solid2-aria/stately/tabs/create-tab-list-state";
+// src/tabs.tsx
+const TabsContext = createContext(null);
+const TabListStateContext = createContext(null);
+const TabCollection = createLeafComponent(ItemNode, (props, forwardedRef, node) => {
+	const state = useContext(TabListStateContext);
+	if (!state) throw new Error("Tab must be rendered in Tabs.");
+	const [ref, setRef] = createSignal(null, { ownedWrite: true });
+	const aria = createTab(mergeProps$1(props, { get key() {
+		return node.key;
+	} }), 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-Tab",
+		values: {
+			get isDisabled() {
+				return aria.isDisabled;
+			},
+			get isFocusVisible() {
+				return focus.isFocusVisible;
+			},
+			get isFocused() {
+				return focus.isFocused;
+			},
+			get isHovered() {
+				return hover.isHovered;
+			},
+			get isPressed() {
+				return aria.isPressed;
+			},
+			get isSelected() {
+				return aria.isSelected;
+			}
+		}
+	}));
+	const Element = dynamic(() => isTruthy(props.href) ? dom.a : dom.div);
+	return createComponent(Element, mergeProps(() => {
+		return mergeProps$1(omit(filterDOMProps(props, { global: true }), "id", "onClick"), merge(() => aria.tabProps ?? {}), merge(() => focus.focusProps ?? {}), merge(() => hover.hoverProps ?? {}), render);
+	}, {
+		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-pressed"() {
+			return aria.isPressed || void 0;
+		},
+		get "data-focused"() {
+			return focus.isFocused || void 0;
+		},
+		get "data-focus-visible"() {
+			return focus.isFocusVisible || void 0;
+		},
+		get children() {
+			return createComponent(SelectionIndicatorContext, {
+				value: { get isSelected() {
+					return aria.isSelected;
+				} },
+				get children() {
+					return render.children;
+				}
+			});
+		}
+	}));
+});
+function TabPanels(props) {
+	if (createIsHidden()) return null;
+	return createComponent(dom.div, mergeProps(() => {
+		return omit(filterDOMProps(props, {
+			global: true,
+			labelable: true
+		}), "id");
+	}, {
+		ref(r$) {
+			var _ref$ = props.ref;
+			typeof _ref$ === "function" || Array.isArray(_ref$) ? applyRef(_ref$, r$) : props.ref = r$;
+		},
+		get render() {
+			return props.render;
+		},
+		get "class"() {
+			return props.class ?? "solid2-aria-TabPanels";
+		},
+		get style() {
+			return props.style;
+		},
+		get children() {
+			return createComponent(Collection, props);
+		}
+	}));
+}
+function TabPanel(props) {
+	if (createIsHidden()) return null;
+	const state = useContext(TabListStateContext);
+	if (!state) throw new Error("TabPanel must be rendered in Tabs.");
+	const [panelRef, setPanelRef] = createSignal(null, { ownedWrite: true });
+	const initiallySelected = untrack(() => state.selectedKey === props.id);
+	const exiting = createExitAnimation(panelRef, () => state.selectedKey === props.id);
+	return createComponent(Show, {
+		get when() {
+			return (state.selectedKey === props.id || props.shouldForceMount) ?? exiting();
+		},
+		get children() {
+			return createComponent(TabPanelInner, {
+				props,
+				state,
+				panelRef,
+				setPanelRef: (element) => {
+					setPanelRef(element);
+				},
+				initiallySelected,
+				exiting
+			});
+		}
+	});
+}
+function TabPanelInner(input) {
+	const ref = untrack(() => input.panelRef);
+	const aria = createTabPanel(untrack(() => input.props), untrack(() => input.state), ref);
+	const focus = createFocusRing();
+	const selected = () => input.state.selectedKey === input.props.id;
+	const entering = createEnterAnimation(ref);
+	const values = {
+		get isEntering() {
+			return !input.initiallySelected && entering();
+		},
+		get isExiting() {
+			return input.exiting();
+		},
+		get isFocusVisible() {
+			return focus.isFocusVisible;
+		},
+		get isFocused() {
+			return focus.isFocused;
+		},
+		get isInert() {
+			return !selected();
+		},
+		get state() {
+			return input.state;
+		}
+	};
+	const render = createRenderProps(mergeProps$1(merge(() => input.props ?? {}), {
+		defaultClass: "solid2-aria-TabPanel",
+		values
+	}));
+	return createComponent(dom.div, mergeProps(() => {
+		return mergeProps$1(omit(filterDOMProps(input.props, { global: true }), "id"), merge(() => aria.tabPanelProps ?? {}), merge(() => focus.focusProps ?? {}), render);
+	}, {
+		ref: [(element) => {
+			input.setPanelRef(element);
+		}, (element) => {
+			assignRef(untrack(() => input.props.ref), element);
+		}],
+		get inert() {
+			return !selected() || input.props.inert;
+		},
+		get "data-entering"() {
+			return values.isEntering || void 0;
+		},
+		get "data-exiting"() {
+			return values.isExiting || void 0;
+		},
+		get "data-inert"() {
+			return !selected() || void 0;
+		},
+		get "data-focused"() {
+			return focus.isFocused || void 0;
+		},
+		get "data-focus-visible"() {
+			return focus.isFocusVisible || void 0;
+		},
+		get children() {
+			return createComponent(TabsContext, {
+				value: null,
+				get children() {
+					return createComponent(TabListStateContext, {
+						value: null,
+						get children() {
+							return createComponent(CollectionRendererContext, {
+								value: DefaultCollectionRenderer,
+								get children() {
+									return render.children;
+								}
+							});
+						}
+					});
+				}
+			});
+		}
+	}));
+}
+function Tab(props) {
+	return createComponent(TabCollection, mergeProps(props, { ref: (element) => {
+		assignRef(untrack(() => props.ref), element);
+	} }));
+}
+function Tabs(input) {
+	const [props, , setRef] = createContextProps(input, untrack(() => input.ref), TabsContext);
+	const values = { get orientation() {
+		return props.orientation ?? "horizontal";
+	} };
+	const content = () => {
+		const child = props.children;
+		return typeof child === "function" ? child({
+			...values,
+			defaultChildren: void 0
+		}) : child;
+	};
+	return createComponent(TabListStateContext, {
+		value: null,
+		get children() {
+			return createComponent(CollectionBuilder, {
+				createCollection: () => new BaseCollection(),
+				get content() {
+					return content();
+				},
+				children: (collection) => createComponent(TabsInner, {
+					props,
+					collection,
+					tabsRef: setRef
+				})
+			});
+		}
+	});
+}
+function TabsInner(input) {
+	const state = createTabListState(mergeProps$1(merge(() => input.props ?? {}), {
+		children: void 0,
+		get collection() {
+			return input.collection;
+		}
+	}));
+	const focus = createFocusRing({ within: true });
+	const values = { get orientation() {
+		return input.props.orientation ?? "horizontal";
+	} };
+	const render = createRenderProps(mergeProps$1(merge(() => input.props ?? {}), {
+		defaultClass: "solid2-aria-Tabs",
+		values
+	}));
+	const tabProps = merge(() => input.props);
+	return createComponent(dom.div, mergeProps(() => {
+		return mergeProps$1(filterDOMProps(input.props, { global: true }), merge(() => focus.focusProps ?? {}), render);
+	}, {
+		ref(r$) {
+			var _ref$2 = input.tabsRef;
+			typeof _ref$2 === "function" || Array.isArray(_ref$2) ? applyRef(_ref$2, r$) : input.tabsRef = r$;
+		},
+		get slot() {
+			return input.props.slot ?? void 0;
+		},
+		get "data-orientation"() {
+			return values.orientation;
+		},
+		get "data-focused"() {
+			return focus.isFocused || void 0;
+		},
+		get "data-focus-visible"() {
+			return focus.isFocusVisible || void 0;
+		},
+		get "data-disabled"() {
+			return state.isDisabled || void 0;
+		},
+		get children() {
+			return createComponent(TabsContext, {
+				value: tabProps,
+				get children() {
+					return createComponent(TabListStateContext, {
+						value: state,
+						get children() {
+							return render.children;
+						}
+					});
+				}
+			});
+		}
+	}));
+}
+function TabList(props) {
+	const state = useContext(TabListStateContext);
+	if (!state) return createComponent(Collection, props);
+	return createComponent(TabListInner, {
+		props,
+		state
+	});
+}
+function TabListInner(input) {
+	const context = createSlottedContext(TabsContext);
+	const [ref, setRef] = createSignal(null, { ownedWrite: true });
+	const Root = useContext(CollectionRendererContext).CollectionRoot;
+	const aria = createTabList(mergeProps$1(merge(() => input.props ?? {}), {
+		get keyboardActivation() {
+			return context?.keyboardActivation;
+		},
+		get orientation() {
+			return context?.orientation;
+		}
+	}), untrack(() => input.state), ref);
+	const values = {
+		get orientation() {
+			return context?.orientation ?? "horizontal";
+		},
+		get state() {
+			return input.state;
+		}
+	};
+	const render = createRenderProps(mergeProps$1(merge(() => input.props ?? {}), {
+		children: void 0,
+		defaultClass: "solid2-aria-TabList",
+		values
+	}));
+	return createComponent(dom.div, mergeProps(() => {
+		return mergeProps$1(omit(filterDOMProps(input.props, { global: true }), "id"), merge(() => aria.tabListProps ?? {}), render);
+	}, {
+		ref: [(element) => {
+			setRef(element);
+		}, (element) => {
+			assignRef(untrack(() => input.props.ref), element);
+		}],
+		get "data-orientation"() {
+			return values.orientation;
+		},
+		get children() {
+			return createComponent(Root, { get collection() {
+				return input.state.collection;
+			} });
+		}
+	}));
+}
+export { Tab, TabList, TabListStateContext, TabPanel, TabPanels, Tabs, TabsContext };
+
+//# sourceMappingURL=tabs.js.map

package/dist/browser/tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.js","names":["<Element\n        {...mergeProps(\n          omit(filterDOMProps(props, { global: true }), \"id\", \"onClick\"),\n          merge(() => aria.tabProps ?? {}),\n          merge(() => focus.focusProps ?? {}),\n          merge(() => hover.hoverProps ?? {}),\n          render\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-pressed={aria.isPressed || undefined}\n        data-focused={focus.isFocused || undefined}\n        data-focus-visible={focus.isFocusVisible || undefined}\n      >\n        <SelectionIndicatorContext\n          value={{\n            get isSelected() {\n              return aria.isSelected;\n            },\n          }}\n        >\n          {render.children}\n        </SelectionIndicatorContext>\n      </Element>","ref={[\n          (element: HTMLDivElement) => {\n            setRef(element);\n          },\n          (element: HTMLDivElement) => {\n            assignRef(forwardedRef, element);\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          }}","<dom.div\n      {\n        // oxlint-disable solid/reactivity -- Keep prop filtering in the renderer's lazy evaluation.\n        ...omit(filterDOMProps(props, { global: true, labelable: true }), \"id\")\n        // oxlint-enable solid/reactivity\n      }\n      ref={props.ref}\n      render={props.render}\n      class={props.class ?? \"solid2-aria-TabPanels\"}\n      style={props.style}\n    >\n      <Collection {...props} />\n    </dom.div>","dom.div","ref={props.ref}","<Collection {...props} />","<Show\n      when={\n        (state.selectedKey === props.id || props.shouldForceMount) ?? exiting()\n      }\n    >\n      <TabPanelInner\n        props={props}\n        state={state}\n        panelRef={panelRef}\n        setPanelRef={(element: HTMLDivElement) => {\n          setPanelRef(element);\n        }}\n        initiallySelected={initiallySelected}\n        exiting={exiting}\n      />\n    </Show>","<TabPanelInner\n        props={props}\n        state={state}\n        panelRef={panelRef}\n        setPanelRef={(element: HTMLDivElement) => {\n          setPanelRef(element);\n        }}\n        initiallySelected={initiallySelected}\n        exiting={exiting}\n      />","setPanelRef={(element: HTMLDivElement) => {\n          setPanelRef(element);\n        }}","<dom.div\n      {...mergeProps(\n        omit(filterDOMProps(input.props, { global: true }), \"id\"),\n        merge(() => aria.tabPanelProps ?? {}),\n        merge(() => focus.focusProps ?? {}),\n        render\n      )}\n      ref={[\n        (element: HTMLDivElement) => {\n          input.setPanelRef(element);\n        },\n        (element: HTMLDivElement) => {\n          assignRef(\n            untrack(() => input.props.ref),\n            element\n          );\n        },\n      ]}\n      inert={!selected() || input.props.inert}\n      data-entering={values.isEntering || undefined}\n      data-exiting={values.isExiting || undefined}\n      data-inert={!selected() || undefined}\n      data-focused={focus.isFocused || undefined}\n      data-focus-visible={focus.isFocusVisible || undefined}\n    >\n      <TabsContext value={null}>\n        <TabListStateContext value={null}>\n          <CollectionRendererContext value={DefaultCollectionRenderer}>\n            {render.children}\n          </CollectionRendererContext>\n        </TabListStateContext>\n      </TabsContext>\n    </dom.div>","ref={[\n        (element: HTMLDivElement) => {\n          input.setPanelRef(element);\n        },\n        (element: HTMLDivElement) => {\n          assignRef(\n            untrack(() => input.props.ref),\n            element\n          );\n        },\n      ]}","<TabsContext value={null}>\n        <TabListStateContext value={null}>\n          <CollectionRendererContext value={DefaultCollectionRenderer}>\n            {render.children}\n          </CollectionRendererContext>\n        </TabListStateContext>\n      </TabsContext>","value={null}","<TabListStateContext value={null}>\n          <CollectionRendererContext value={DefaultCollectionRenderer}>\n            {render.children}\n          </CollectionRendererContext>\n        </TabListStateContext>","<CollectionRendererContext value={DefaultCollectionRenderer}>\n            {render.children}\n          </CollectionRendererContext>","value={DefaultCollectionRenderer}","<TabCollection\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      }}","<TabListStateContext value={null}>\n      <CollectionBuilder\n        createCollection={() => new BaseCollection<object>()}\n        content={content()}\n      >\n        {(collection) => (\n          <TabsInner props={props} collection={collection} tabsRef={setRef} />\n        )}\n      </CollectionBuilder>\n    </TabListStateContext>","<CollectionBuilder\n        createCollection={() => new BaseCollection<object>()}\n        content={content()}\n      >\n        {(collection) => (\n          <TabsInner props={props} collection={collection} tabsRef={setRef} />\n        )}\n      </CollectionBuilder>","createCollection={() => new BaseCollection<object>()}","<TabsInner props={props} collection={collection} tabsRef={setRef} />","tabsRef={setRef}","<dom.div\n      {...mergeProps(\n        filterDOMProps(input.props, { global: true }),\n        merge(() => focus.focusProps ?? {}),\n        render\n      )}\n      ref={input.tabsRef}\n      slot={input.props.slot ?? undefined}\n      data-orientation={values.orientation}\n      data-focused={focus.isFocused || undefined}\n      data-focus-visible={focus.isFocusVisible || undefined}\n      data-disabled={state.isDisabled || undefined}\n    >\n      <TabsContext value={tabProps}>\n        <TabListStateContext value={state}>\n          {render.children}\n        </TabListStateContext>\n      </TabsContext>\n    </dom.div>","ref={input.tabsRef}","<TabsContext value={tabProps}>\n        <TabListStateContext value={state}>\n          {render.children}\n        </TabListStateContext>\n      </TabsContext>","value={tabProps}","<TabListStateContext value={state}>\n          {render.children}\n        </TabListStateContext>","value={state}","<TabListInner props={props} state={state} />","<dom.div\n      {...mergeProps(\n        omit(filterDOMProps(input.props, { global: true }), \"id\"),\n        merge(() => aria.tabListProps ?? {}),\n        render\n      )}\n      ref={[\n        (element: HTMLDivElement) => {\n          setRef(element);\n        },\n        (element: HTMLDivElement) => {\n          assignRef(\n            untrack(() => input.props.ref),\n            element\n          );\n        },\n      ]}\n      data-orientation={values.orientation}\n    >\n      <Root collection={input.state.collection} />\n    </dom.div>","ref={[\n        (element: HTMLDivElement) => {\n          setRef(element);\n        },\n        (element: HTMLDivElement) => {\n          assignRef(\n            untrack(() => input.props.ref),\n            element\n          );\n        },\n      ]}","<Root collection={input.state.collection} />","mergeProps","_$createComponent","_$mergeProps","_$applyRef"],"sources":["../../src/tabs.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/Tabs.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  ItemNode,\n  BaseCollection,\n} from \"@solid2-aria/core/collections/base-collection\";\nimport {\n  Collection,\n  CollectionBuilder,\n  createLeafComponent,\n} from \"@solid2-aria/core/collections/collection-builder\";\nimport { createIsHidden } from \"@solid2-aria/core/collections/hidden\";\nimport { createFocusRing } from \"@solid2-aria/core/focus/create-focus-ring\";\nimport { createHover } from \"@solid2-aria/core/interactions/create-hover\";\nimport { createTab } from \"@solid2-aria/core/tabs/create-tab\";\nimport { createTabList } from \"@solid2-aria/core/tabs/create-tab-list\";\nimport type { AriaTabListProps } from \"@solid2-aria/core/tabs/create-tab-list\";\nimport { createTabPanel } from \"@solid2-aria/core/tabs/create-tab-panel\";\nimport type { AriaTabPanelProps } from \"@solid2-aria/core/tabs/create-tab-panel\";\nimport {\n  createEnterAnimation,\n  createExitAnimation,\n} from \"@solid2-aria/core/utils/animation\";\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 { createTabListState } from \"@solid2-aria/stately/tabs/create-tab-list-state\";\nimport type { TabListState } from \"@solid2-aria/stately/tabs/create-tab-list-state\";\nimport type {\n  AriaLabelingProps,\n  FocusEvents,\n  HoverEvents,\n  Key,\n  LinkDOMProps,\n  PressEvents,\n  Orientation,\n  Node,\n} from \"@solid2-aria/types-shared\";\nimport type { GlobalDOMAttributes } from \"@solid2-aria/types-shared-web\";\nimport { dynamic } from \"@solidjs/web\";\nimport type { JSX } from \"@solidjs/web\";\nimport {\n  merge,\n  createSignal,\n  createContext,\n  useContext,\n  omit,\n  Show,\n  untrack,\n} from \"solid-js\";\nimport type { Accessor } from \"solid-js\";\n\nimport {\n  CollectionRendererContext,\n  DefaultCollectionRenderer,\n} from \"./collection\";\nimport type { CollectionProps } from \"./collection\";\nimport { SelectionIndicatorContext } from \"./selection-indicator\";\nimport {\n  dom,\n  createContextProps,\n  createRenderProps,\n  createSlottedContext,\n  assignRef,\n} from \"./utils\";\nimport type {\n  Ref,\n  ClassOrFunction,\n  DOMRenderProps,\n  PossibleLinkDOMRenderProps,\n  RenderProps,\n  SlotProps,\n  StyleProps,\n  StyleRenderProps,\n  ContextValue,\n} from \"./utils\";\n\nexport const TabsContext =\n  createContext<ContextValue<TabsProps, HTMLDivElement>>(null);\n\nexport const TabListStateContext = createContext<TabListState<unknown> | null>(\n  null\n);\n\nexport interface TabsProps\n  // oxlint-disable-next-line typescript/no-explicit-any -- Collection contexts erase item types; each typed factory restores its owner's item contract.\n  extends\n    Omit<AriaTabListProps<unknown>, \"items\" | \"children\">,\n    RenderProps<TabsRenderProps>,\n    SlotProps,\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-Tabs'\n   */\n  class?: ClassOrFunction<TabsRenderProps>;\n}\n\nexport interface TabsRenderProps {\n  /**\n   * The orientation of the tabs.\n   *\n   * @selector [data-orientation=\"horizontal | vertical\"]\n   */\n  orientation: Orientation;\n}\n\nexport interface TabListProps<T>\n  extends\n    StyleRenderProps<TabListRenderProps>,\n    AriaLabelingProps,\n    Omit<CollectionProps<T>, \"disabledKeys\">,\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-TabList'\n   */\n  class?: ClassOrFunction<TabListRenderProps>;\n}\n\nexport interface TabListRenderProps {\n  /**\n   * The orientation of the tab list.\n   *\n   * @selector [data-orientation=\"horizontal | vertical\"]\n   */\n  orientation: Orientation;\n  /**\n   * State of the tab list.\n   */\n  state: TabListState<unknown>;\n}\n\nexport interface TabProps\n  extends\n    Omit<RenderProps<TabRenderProps>, \"render\">,\n    PossibleLinkDOMRenderProps<\"div\", TabRenderProps>,\n    AriaLabelingProps,\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-Tab'\n   */\n  class?: ClassOrFunction<TabRenderProps>;\n  /** The unique id of the tab. */\n  id?: Key;\n  /** Whether the tab is disabled. */\n  isDisabled?: boolean;\n}\n\nexport interface TabRenderProps {\n  /**\n   * Whether the tab is currently hovered with a mouse.\n   *\n   * @selector [data-hovered]\n   */\n  isHovered: boolean;\n  /**\n   * Whether the tab is currently in a pressed state.\n   *\n   * @selector [data-pressed]\n   */\n  isPressed: boolean;\n  /**\n   * Whether the tab is currently selected.\n   *\n   * @selector [data-selected]\n   */\n  isSelected: boolean;\n  /**\n   * Whether the tab is currently focused.\n   *\n   * @selector [data-focused]\n   */\n  isFocused: boolean;\n  /**\n   * Whether the tab is currently keyboard focused.\n   *\n   * @selector [data-focus-visible]\n   */\n  isFocusVisible: boolean;\n  /**\n   * Whether the tab is disabled.\n   *\n   * @selector [data-disabled]\n   */\n  isDisabled: boolean;\n}\n\nexport interface TabPanelProps\n  extends\n    AriaTabPanelProps,\n    RenderProps<TabPanelRenderProps>,\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-TabPanel'\n   */\n  class?: ClassOrFunction<TabPanelRenderProps>;\n  /**\n   * Whether to mount the tab panel in the DOM even when it is not currently selected. Inactive tab\n   * panels are inert and cannot be interacted with. They must be styled appropriately so this is\n   * clear to the user visually.\n   *\n   * @default false\n   */\n  shouldForceMount?: boolean;\n}\n\nexport interface TabPanelRenderProps {\n  /**\n   * Whether the tab panel is currently focused.\n   *\n   * @selector [data-focused]\n   */\n  isFocused: boolean;\n  /**\n   * Whether the tab panel is currently keyboard focused.\n   *\n   * @selector [data-focus-visible]\n   */\n  isFocusVisible: boolean;\n  /**\n   * Whether the tab panel is currently non-interactive. This occurs when the\n   * `shouldForceMount` prop is true, and the corresponding tab is not selected.\n   *\n   * @selector [data-inert]\n   */\n  isInert: boolean;\n  /**\n   * Whether the tab panel is currently entering. Use this to apply animations.\n   *\n   * @selector [data-entering]\n   */\n  isEntering: boolean;\n  /**\n   * Whether the tab panel is currently exiting. Use this to apply animations.\n   *\n   * @selector [data-exiting]\n   */\n  isExiting: boolean;\n  /**\n   * State of the tab list.\n   */\n  state: TabListState<unknown>;\n}\n\nexport interface TabPanelsProps<T>\n  extends\n    Omit<CollectionProps<T>, \"disabledKeys\">,\n    StyleProps,\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-TabPanels'\n   */\n  class?: JSX.ClassValue;\n}\n\nconst TabCollection = createLeafComponent(\n  ItemNode,\n  (\n    props: TabProps,\n    forwardedRef: Ref<HTMLDivElement>,\n    node: Node<unknown>\n  ): JSX.Element => {\n    const state = useContext(TabListStateContext);\n\n    if (!state) {\n      throw new Error(\"Tab must be rendered in Tabs.\");\n    }\n\n    const [ref, setRef] = createSignal<HTMLDivElement | null>(null, {\n      ownedWrite: true,\n    });\n\n    const aria = createTab(\n      mergeProps(props, {\n        get key() {\n          return node.key;\n        },\n      }),\n      state,\n      ref\n    );\n\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: TabRenderProps = {\n      get isDisabled() {\n        return aria.isDisabled;\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 isPressed() {\n        return aria.isPressed;\n      },\n      get isSelected() {\n        return aria.isSelected;\n      },\n    };\n\n    const render = createRenderProps(\n      mergeProps(props, { defaultClass: \"solid2-aria-Tab\", values })\n    );\n\n    const Element = dynamic(() => (isTruthy(props.href) ? dom.a : dom.div));\n\n    return (\n      <Element\n        {...mergeProps(\n          omit(filterDOMProps(props, { global: true }), \"id\", \"onClick\"),\n          merge(() => aria.tabProps ?? {}),\n          merge(() => focus.focusProps ?? {}),\n          merge(() => hover.hoverProps ?? {}),\n          render\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-pressed={aria.isPressed || undefined}\n        data-focused={focus.isFocused || undefined}\n        data-focus-visible={focus.isFocusVisible || undefined}\n      >\n        <SelectionIndicatorContext\n          value={{\n            get isSelected() {\n              return aria.isSelected;\n            },\n          }}\n        >\n          {render.children}\n        </SelectionIndicatorContext>\n      </Element>\n    );\n  }\n);\n\nexport function TabPanels<T>(\n  props: TabPanelsProps<T> & { ref?: Ref<HTMLDivElement> }\n): JSX.Element {\n  if (createIsHidden()) {\n    // oxlint-disable-next-line solid/components-return-once -- Static collection traversal and context registration are fixed when the owner is created.\n    return null;\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, labelable: true }), \"id\")\n        // oxlint-enable solid/reactivity\n      }\n      ref={props.ref}\n      render={props.render}\n      class={props.class ?? \"solid2-aria-TabPanels\"}\n      style={props.style}\n    >\n      <Collection {...props} />\n    </dom.div>\n  );\n}\n\nexport function TabPanel(\n  props: TabPanelProps & { ref?: Ref<HTMLDivElement> }\n): JSX.Element {\n  if (createIsHidden()) {\n    // oxlint-disable-next-line solid/components-return-once -- Static collection traversal and context registration are fixed when the owner is created.\n    return null;\n  }\n\n  const state = useContext(TabListStateContext);\n\n  if (!state) {\n    throw new Error(\"TabPanel must be rendered in Tabs.\");\n  }\n\n  const [panelRef, setPanelRef] = createSignal<HTMLDivElement | null>(null, {\n    ownedWrite: true,\n  });\n\n  const initiallySelected = untrack(() => state.selectedKey === props.id);\n\n  const exiting = createExitAnimation(\n    panelRef,\n    () => state.selectedKey === props.id\n  );\n\n  return (\n    <Show\n      when={\n        (state.selectedKey === props.id || props.shouldForceMount) ?? exiting()\n      }\n    >\n      <TabPanelInner\n        props={props}\n        state={state}\n        panelRef={panelRef}\n        setPanelRef={(element: HTMLDivElement) => {\n          setPanelRef(element);\n        }}\n        initiallySelected={initiallySelected}\n        exiting={exiting}\n      />\n    </Show>\n  );\n}\n\nfunction TabPanelInner(input: {\n  props: TabPanelProps & { ref?: Ref<HTMLDivElement> };\n  state: TabListState<unknown>;\n  panelRef: Accessor<HTMLDivElement | null>;\n  setPanelRef: (element: HTMLDivElement) => void;\n  initiallySelected: boolean;\n  exiting: () => boolean;\n}): JSX.Element {\n  const ref = untrack(() => input.panelRef);\n\n  const aria = createTabPanel(\n    untrack(() => input.props),\n    untrack(() => input.state),\n    ref\n  );\n\n  const focus = createFocusRing();\n  const selected = () => input.state.selectedKey === input.props.id;\n  const entering = createEnterAnimation(ref);\n\n  const values: TabPanelRenderProps = {\n    get isEntering() {\n      return !input.initiallySelected && entering();\n    },\n    get isExiting() {\n      return input.exiting();\n    },\n    get isFocusVisible() {\n      return focus.isFocusVisible;\n    },\n    get isFocused() {\n      return focus.isFocused;\n    },\n    get isInert() {\n      return !selected();\n    },\n    get state() {\n      return input.state;\n    },\n  };\n\n  const render = createRenderProps(\n    mergeProps(\n      merge(() => input.props ?? {}),\n      { defaultClass: \"solid2-aria-TabPanel\", values }\n    )\n  );\n\n  return (\n    <dom.div\n      {...mergeProps(\n        omit(filterDOMProps(input.props, { global: true }), \"id\"),\n        merge(() => aria.tabPanelProps ?? {}),\n        merge(() => focus.focusProps ?? {}),\n        render\n      )}\n      ref={[\n        (element: HTMLDivElement) => {\n          input.setPanelRef(element);\n        },\n        (element: HTMLDivElement) => {\n          assignRef(\n            untrack(() => input.props.ref),\n            element\n          );\n        },\n      ]}\n      inert={!selected() || input.props.inert}\n      data-entering={values.isEntering || undefined}\n      data-exiting={values.isExiting || undefined}\n      data-inert={!selected() || undefined}\n      data-focused={focus.isFocused || undefined}\n      data-focus-visible={focus.isFocusVisible || undefined}\n    >\n      <TabsContext value={null}>\n        <TabListStateContext value={null}>\n          <CollectionRendererContext value={DefaultCollectionRenderer}>\n            {render.children}\n          </CollectionRendererContext>\n        </TabListStateContext>\n      </TabsContext>\n    </dom.div>\n  );\n}\n\nexport function Tab(\n  props: TabProps & { ref?: Ref<HTMLDivElement> }\n): JSX.Element {\n  return (\n    <TabCollection\n      {...props}\n      ref={(element: HTMLDivElement) => {\n        assignRef(\n          untrack(() => props.ref),\n          element\n        );\n      }}\n    />\n  );\n}\n\nexport function Tabs(\n  input: TabsProps & { ref?: Ref<HTMLDivElement> }\n): JSX.Element {\n  const [props, , setRef] = createContextProps(\n    input,\n    untrack(() => input.ref),\n    TabsContext\n  );\n\n  const values: TabsRenderProps = {\n    get orientation() {\n      return props.orientation ?? \"horizontal\";\n    },\n  };\n\n  const content = () => {\n    const child = props.children;\n\n    return typeof child === \"function\"\n      ? child({ ...values, defaultChildren: undefined })\n      : child;\n  };\n\n  return (\n    <TabListStateContext value={null}>\n      <CollectionBuilder\n        createCollection={() => new BaseCollection<object>()}\n        content={content()}\n      >\n        {(collection) => (\n          <TabsInner props={props} collection={collection} tabsRef={setRef} />\n        )}\n      </CollectionBuilder>\n    </TabListStateContext>\n  );\n}\n\nfunction TabsInner(input: {\n  props: TabsProps;\n  collection: BaseCollection<object>;\n  tabsRef: (element: HTMLDivElement) => void;\n}): JSX.Element {\n  const state = createTabListState(\n    mergeProps(\n      merge(() => input.props ?? {}),\n      {\n        children: undefined,\n        get collection() {\n          return input.collection;\n        },\n      }\n    )\n  );\n\n  const focus = createFocusRing({ within: true });\n\n  const values: TabsRenderProps = {\n    get orientation() {\n      return input.props.orientation ?? \"horizontal\";\n    },\n  };\n\n  const render = createRenderProps(\n    mergeProps(\n      merge(() => input.props ?? {}),\n      { defaultClass: \"solid2-aria-Tabs\", values }\n    )\n  );\n\n  const tabProps = merge(() => input.props);\n\n  return (\n    <dom.div\n      {...mergeProps(\n        filterDOMProps(input.props, { global: true }),\n        merge(() => focus.focusProps ?? {}),\n        render\n      )}\n      ref={input.tabsRef}\n      slot={input.props.slot ?? undefined}\n      data-orientation={values.orientation}\n      data-focused={focus.isFocused || undefined}\n      data-focus-visible={focus.isFocusVisible || undefined}\n      data-disabled={state.isDisabled || undefined}\n    >\n      <TabsContext value={tabProps}>\n        <TabListStateContext value={state}>\n          {render.children}\n        </TabListStateContext>\n      </TabsContext>\n    </dom.div>\n  );\n}\n\nexport function TabList<T>(\n  props: TabListProps<T> & { ref?: Ref<HTMLDivElement> }\n): JSX.Element {\n  const state = useContext(TabListStateContext);\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 {...props} />;\n  }\n\n  return <TabListInner props={props} state={state} />;\n}\n\nfunction TabListInner<T>(input: {\n  props: TabListProps<T> & { ref?: Ref<HTMLDivElement> };\n  state: TabListState<unknown>;\n}): JSX.Element {\n  const context = createSlottedContext(TabsContext);\n\n  const [ref, setRef] = createSignal<HTMLDivElement | null>(null, {\n    ownedWrite: true,\n  });\n\n  const renderer = useContext(CollectionRendererContext);\n  const Root = renderer.CollectionRoot;\n\n  const aria = createTabList(\n    mergeProps(\n      merge(() => input.props ?? {}),\n      {\n        get keyboardActivation() {\n          return context?.keyboardActivation;\n        },\n        get orientation() {\n          return context?.orientation;\n        },\n      }\n    ),\n    untrack(() => input.state),\n    ref\n  );\n\n  const values: TabListRenderProps = {\n    get orientation() {\n      return context?.orientation ?? \"horizontal\";\n    },\n    get state() {\n      return input.state;\n    },\n  };\n\n  const render = createRenderProps(\n    mergeProps(\n      merge(() => input.props ?? {}),\n      {\n        children: undefined,\n        defaultClass: \"solid2-aria-TabList\",\n        values,\n      }\n    )\n  );\n\n  return (\n    <dom.div\n      {...mergeProps(\n        omit(filterDOMProps(input.props, { global: true }), \"id\"),\n        merge(() => aria.tabListProps ?? {}),\n        render\n      )}\n      ref={[\n        (element: HTMLDivElement) => {\n          setRef(element);\n        },\n        (element: HTMLDivElement) => {\n          assignRef(\n            untrack(() => input.props.ref),\n            element\n          );\n        },\n      ]}\n      data-orientation={values.orientation}\n    >\n      <Root collection={input.state.collection} />\n    </dom.div>\n  );\n}\n"],"mappings":"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"}

package/dist/browser/tag-group.d.ts

@@ -0,0 +1,112 @@
+/*
+ * 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 { ClassOrFunction, ContextValue, DOMProps as DOMProps$1, DOMRenderProps, Ref, RenderProps, SlotProps, StyleRenderProps } from "./utils.js";
+import { CollectionProps, ItemRenderProps } from "./collection.js";
+import { JSX } from "@solidjs/web";
+import { ListState } from "@solid2-aria/stately/list/create-list-state";
+import { AriaTagGroupProps } from "@solid2-aria/core/tag/create-tag-group";
+import { FocusEvents, HoverEvents, Key, LinkDOMProps, PressEvents } from "@solid2-aria/types-shared";
+import { DOMAttributes, GlobalDOMAttributes } from "@solid2-aria/types-shared-web";
+export declare const TagGroupContext: import("solid-js").Context<ContextValue<TagGroupProps, HTMLElement>>;
+export declare const TagListContext: import("solid-js").Context<ContextValue<TagListProps<unknown> & {
+  gridProps?: DOMAttributes;
+}, HTMLElement>>;
+export interface TagGroupProps extends Omit<AriaTagGroupProps<unknown>, "children" | "items" | "label" | "description" | "errorMessage" | "keyboardDelegate">, DOMProps$1, SlotProps, DOMRenderProps<"div", undefined>, GlobalDOMAttributes<HTMLDivElement> {
+  /**
+   * The CSS [class](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class) for the
+   * element.
+   *
+   * @default 'react-aria-TagGroup'
+   */
+  class?: JSX.ClassValue;
+}
+export interface TagListRenderProps {
+  /**
+   * Whether the tag list has no items and should display its empty state.
+   *
+   * @selector [data-empty]
+   */
+  isEmpty: boolean;
+  /**
+   * Whether the tag list is currently focused.
+   *
+   * @selector [data-focused]
+   */
+  isFocused: boolean;
+  /**
+   * Whether the tag list is currently keyboard focused.
+   *
+   * @selector [data-focus-visible]
+   */
+  isFocusVisible: boolean;
+  /**
+   * State of the TagGroup.
+   */
+  state: ListState<unknown>;
+}
+export interface TagListProps<T> extends Omit<CollectionProps<T>, "disabledKeys">, StyleRenderProps<TagListRenderProps>, 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-TagList'
+   */
+  class?: ClassOrFunction<TagListRenderProps>;
+  /** Provides content to display when there are no items in the tag list. */
+  renderEmptyState?: (props: TagListRenderProps) => JSX.Element;
+}
+export interface TagRenderProps extends Omit<ItemRenderProps, "allowsDragging" | "isDragging" | "isDropTarget"> {
+  /**
+   * Whether the tag group allows items to be removed.
+   *
+   * @selector [data-allows-removing]
+   */
+  allowsRemoving: boolean;
+}
+export interface TagProps extends RenderProps<TagRenderProps>, LinkDOMProps, HoverEvents, FocusEvents, PressEvents, Omit<GlobalDOMAttributes<HTMLDivElement>, "onClick"> {
+  /**
+   * 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-Tag'
+   */
+  class?: ClassOrFunction<TagRenderProps>;
+  /** A unique id for the tag. */
+  id?: Key;
+  /**
+   * A string representation of the tags's contents, used for accessibility.
+   * Required if children is not a plain text string.
+   */
+  textValue?: string;
+  /** Whether the tag is disabled. */
+  isDisabled?: boolean;
+  /**
+   * Handler that is called when a user performs an action on the item. The exact user event depends
+   * on the collection's `selectionBehavior` prop and the interaction modality.
+   */
+  onAction?: () => void;
+}
+export declare function Tag(props: TagProps & {
+  ref?: Ref<HTMLDivElement>;
+}): JSX.Element;
+export declare function TagGroup(input: TagGroupProps & {
+  ref?: Ref<HTMLDivElement>;
+}): JSX.Element;
+export declare function TagList<T>(input: TagListProps<T> & {
+  ref?: Ref<HTMLDivElement>;
+}): JSX.Element;
+//# sourceMappingURL=tag-group.d.ts.map