@solid2-aria/components 0.0.0-stage → 0.0.1

package/dist/browser/disclosure.js

@@ -0,0 +1,180 @@
+/*
+ * Copyright 2024 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/Disclosure.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 { DEFAULT_SLOT, assignRef, createContextProps, createRenderProps, dom } from "./utils.js";
+import { ButtonContext } from "./button.js";
+import { createComponent, mergeProps } from "@solidjs/web";
+import { mergeProps as mergeProps$1 } from "@solid2-aria/core/utils/merge-props";
+import { createContext, createSignal, createUniqueId, merge, omit, untrack, useContext } from "solid-js";
+import { filterDOMProps } from "@solid2-aria/core/utils/filter-dom-props";
+import { createFocusRing } from "@solid2-aria/core/focus/create-focus-ring";
+import { createDisclosure } from "@solid2-aria/core/disclosure/create-disclosure";
+import { createDisclosureGroupState } from "@solid2-aria/stately/disclosure/create-disclosure-group-state";
+import { createDisclosureState } from "@solid2-aria/stately/disclosure/create-disclosure-state";
+// src/disclosure.tsx
+const DisclosureGroupStateContext = createContext(null);
+const DisclosureStateContext = createContext(null);
+const DisclosureContext = createContext(null);
+const PanelContext = createContext(null);
+function DisclosureGroup(props) {
+	const state = createDisclosureGroupState(props);
+	const render = createRenderProps(mergeProps$1(props, {
+		defaultClass: "solid2-aria-DisclosureGroup",
+		values: {
+			get isDisabled() {
+				return state.isDisabled;
+			},
+			state
+		}
+	}));
+	return createComponent(dom.div, mergeProps(() => {
+		return filterDOMProps(props, { global: true });
+	}, render, {
+		ref: (element) => {
+			assignRef(untrack(() => props.ref), element);
+		},
+		get "data-disabled"() {
+			return state.isDisabled || void 0;
+		},
+		get children() {
+			return createComponent(DisclosureGroupStateContext, {
+				value: state,
+				get children() {
+					return render.children;
+				}
+			});
+		}
+	}));
+}
+function Disclosure(input) {
+	const [props, , setRef] = createContextProps(input, untrack(() => input.ref), DisclosureContext);
+	const group = useContext(DisclosureGroupStateContext);
+	const defaultId = createUniqueId();
+	const id = () => props.id ?? defaultId;
+	const options = mergeProps$1(props, {
+		get isDisabled() {
+			return props.isDisabled ?? group?.isDisabled;
+		},
+		get isExpanded() {
+			return group ? group.expandedKeys.has(id()) : props.isExpanded;
+		},
+		onExpandedChange(expanded) {
+			group?.toggleKey(id());
+			props.onExpandedChange?.(expanded);
+		}
+	});
+	const state = createDisclosureState(options);
+	const [panelRef, setPanelRef] = createSignal(null, { ownedWrite: true });
+	const aria = createDisclosure(options, state, panelRef);
+	const focus = createFocusRing({ within: true });
+	const values = {
+		get isDisabled() {
+			return options.isDisabled === true;
+		},
+		get isExpanded() {
+			return state.isExpanded;
+		},
+		get isFocusVisibleWithin() {
+			return focus.isFocusVisible;
+		},
+		state
+	};
+	const render = createRenderProps(mergeProps$1(props, {
+		defaultClass: "solid2-aria-Disclosure",
+		values
+	}));
+	const panel = {
+		get panelProps() {
+			return aria.panelProps;
+		},
+		panelRef,
+		setPanelRef: (element) => {
+			setPanelRef(element);
+		}
+	};
+	return createComponent(dom.div, mergeProps(() => {
+		return mergeProps$1(omit(filterDOMProps(props, { global: true }), "id"), merge(() => focus.focusProps ?? {}), render);
+	}, {
+		ref: (element) => {
+			setRef(element);
+		},
+		get "data-expanded"() {
+			return state.isExpanded || void 0;
+		},
+		get "data-disabled"() {
+			return values.isDisabled || void 0;
+		},
+		get "data-focus-visible-within"() {
+			return values.isFocusVisibleWithin || void 0;
+		},
+		get children() {
+			return createComponent(DisclosureStateContext, {
+				value: state,
+				get children() {
+					return createComponent(PanelContext, {
+						value: panel,
+						get children() {
+							return createComponent(ButtonContext, {
+								value: { slots: {
+									[DEFAULT_SLOT]: {},
+									get trigger() {
+										return aria.buttonProps;
+									}
+								} },
+								get children() {
+									return render.children;
+								}
+							});
+						}
+					});
+				}
+			});
+		}
+	}));
+}
+function DisclosurePanel(props) {
+	const context = useContext(PanelContext);
+	if (!context) throw new Error("DisclosurePanel requires Disclosure");
+	const focus = createFocusRing({ within: true });
+	const values = { get isFocusVisibleWithin() {
+		return focus.isFocusVisible;
+	} };
+	const render = createRenderProps(mergeProps$1(props, {
+		defaultClass: "solid2-aria-DisclosurePanel",
+		values
+	}));
+	return createComponent(dom.div, mergeProps(() => {
+		return mergeProps$1(filterDOMProps(props, { global: true }), merge(() => context.panelProps ?? {}), merge(() => focus.focusProps ?? {}), render);
+	}, {
+		get role() {
+			return props.role ?? "group";
+		},
+		ref: [(element) => {
+			context.setPanelRef(element);
+		}, (element) => {
+			assignRef(untrack(() => props.ref), element);
+		}],
+		get "data-focus-visible-within"() {
+			return values.isFocusVisibleWithin || void 0;
+		},
+		get children() {
+			return render.children;
+		}
+	}));
+}
+export { Disclosure, DisclosureContext, DisclosureGroup, DisclosureGroupStateContext, DisclosurePanel, DisclosureStateContext };
+
+//# sourceMappingURL=disclosure.js.map

package/dist/browser/disclosure.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"disclosure.js","names":["<dom.div\n      {...filterDOMProps(props, { global: true })}\n      {...render}\n      ref={(element: HTMLDivElement) => {\n        assignRef(\n          untrack(() => props.ref),\n          element\n        );\n      }}\n      data-disabled={state.isDisabled || undefined}\n    >\n      <DisclosureGroupStateContext value={state}>\n        {render.children}\n      </DisclosureGroupStateContext>\n    </dom.div>","dom.div","ref={(element: HTMLDivElement) => {\n        assignRef(\n          untrack(() => props.ref),\n          element\n        );\n      }}","<DisclosureGroupStateContext value={state}>\n        {render.children}\n      </DisclosureGroupStateContext>","value={state}","<dom.div\n      {...mergeProps(\n        omit(filterDOMProps(props, { global: true }), \"id\"),\n        merge(() => focus.focusProps ?? {}),\n        render\n      )}\n      ref={(element: HTMLDivElement) => {\n        setRef(element);\n      }}\n      data-expanded={state.isExpanded || undefined}\n      data-disabled={values.isDisabled || undefined}\n      data-focus-visible-within={values.isFocusVisibleWithin || undefined}\n    >\n      <DisclosureStateContext value={state}>\n        <PanelContext value={panel}>\n          <ButtonContext\n            value={{\n              slots: {\n                [DEFAULT_SLOT]: {},\n                get trigger() {\n                  return aria.buttonProps;\n                },\n              },\n            }}\n          >\n            {render.children}\n          </ButtonContext>\n        </PanelContext>\n      </DisclosureStateContext>\n    </dom.div>","ref={(element: HTMLDivElement) => {\n        setRef(element);\n      }}","<DisclosureStateContext value={state}>\n        <PanelContext value={panel}>\n          <ButtonContext\n            value={{\n              slots: {\n                [DEFAULT_SLOT]: {},\n                get trigger() {\n                  return aria.buttonProps;\n                },\n              },\n            }}\n          >\n            {render.children}\n          </ButtonContext>\n        </PanelContext>\n      </DisclosureStateContext>","<PanelContext value={panel}>\n          <ButtonContext\n            value={{\n              slots: {\n                [DEFAULT_SLOT]: {},\n                get trigger() {\n                  return aria.buttonProps;\n                },\n              },\n            }}\n          >\n            {render.children}\n          </ButtonContext>\n        </PanelContext>","value={panel}","<ButtonContext\n            value={{\n              slots: {\n                [DEFAULT_SLOT]: {},\n                get trigger() {\n                  return aria.buttonProps;\n                },\n              },\n            }}\n          >\n            {render.children}\n          </ButtonContext>","value={{\n              slots: {\n                [DEFAULT_SLOT]: {},\n                get trigger() {\n                  return aria.buttonProps;\n                },\n              },\n            }}","<dom.div\n      {...mergeProps(\n        filterDOMProps(props, { global: true }),\n        merge(() => context.panelProps ?? {}),\n        merge(() => focus.focusProps ?? {}),\n        render\n      )}\n      role={props.role ?? \"group\"}\n      ref={[\n        (element: HTMLDivElement) => {\n          context.setPanelRef(element);\n        },\n        (element: HTMLDivElement) => {\n          assignRef(\n            untrack(() => props.ref),\n            element\n          );\n        },\n      ]}\n      data-focus-visible-within={values.isFocusVisibleWithin || undefined}\n    >\n      {render.children}\n    </dom.div>","ref={[\n        (element: HTMLDivElement) => {\n          context.setPanelRef(element);\n        },\n        (element: HTMLDivElement) => {\n          assignRef(\n            untrack(() => props.ref),\n            element\n          );\n        },\n      ]}","mergeProps","_$createComponent","_$mergeProps"],"sources":["../../src/disclosure.tsx"],"sourcesContent":["/*\n * Copyright 2024 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/Disclosure.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 { createDisclosure } from \"@solid2-aria/core/disclosure/create-disclosure\";\nimport type { AriaDisclosureProps } from \"@solid2-aria/core/disclosure/create-disclosure\";\nimport { createFocusRing } from \"@solid2-aria/core/focus/create-focus-ring\";\nimport { filterDOMProps } from \"@solid2-aria/core/utils/filter-dom-props\";\nimport { mergeProps } from \"@solid2-aria/core/utils/merge-props\";\nimport { createDisclosureGroupState } from \"@solid2-aria/stately/disclosure/create-disclosure-group-state\";\nimport type {\n  DisclosureGroupState,\n  DisclosureGroupProps as GroupOptions,\n} from \"@solid2-aria/stately/disclosure/create-disclosure-group-state\";\nimport { createDisclosureState } from \"@solid2-aria/stately/disclosure/create-disclosure-state\";\nimport type { DisclosureState } from \"@solid2-aria/stately/disclosure/create-disclosure-state\";\nimport type { Key } from \"@solid2-aria/types-shared\";\nimport type { JSX } from \"@solidjs/web\";\nimport {\n  merge,\n  untrack,\n  createSignal,\n  createContext,\n  createUniqueId,\n  useContext,\n  omit,\n} from \"solid-js\";\nimport type { Accessor } from \"solid-js\";\n\nimport { ButtonContext } from \"./button\";\nimport {\n  assignRef,\n  dom,\n  DEFAULT_SLOT,\n  createContextProps,\n  createRenderProps,\n} from \"./utils\";\nimport type { ContextValue, Ref, RenderProps, SlotProps } from \"./utils\";\n\nexport interface DisclosureGroupRenderProps {\n  isDisabled: boolean;\n  state: DisclosureGroupState;\n}\n\nexport interface DisclosureGroupProps\n  extends GroupOptions, RenderProps<DisclosureGroupRenderProps> {\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport interface DisclosureRenderProps {\n  isExpanded: boolean;\n  isFocusVisibleWithin: boolean;\n  isDisabled: boolean;\n  state: DisclosureState;\n}\n\nexport interface DisclosureProps\n  extends AriaDisclosureProps, RenderProps<DisclosureRenderProps>, SlotProps {\n  id?: Key;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport interface DisclosurePanelRenderProps {\n  isFocusVisibleWithin: boolean;\n}\n\nexport interface DisclosurePanelProps extends RenderProps<DisclosurePanelRenderProps> {\n  ref?: Ref<HTMLDivElement>;\n  role?: \"group\" | \"region\";\n  shouldForceMount?: boolean;\n  \"aria-label\"?: string;\n  \"aria-labelledby\"?: string;\n}\n\nexport const DisclosureGroupStateContext =\n  createContext<DisclosureGroupState | null>(null);\n\nexport const DisclosureStateContext = createContext<DisclosureState | null>(\n  null\n);\n\nexport const DisclosureContext =\n  createContext<ContextValue<DisclosureProps, HTMLDivElement>>(null);\n\nconst PanelContext = createContext<{\n  panelProps: JSX.HTMLAttributes<HTMLElement>;\n  panelRef: Accessor<HTMLDivElement | null>;\n  setPanelRef: (element: HTMLDivElement) => void;\n} | null>(null);\n\nexport function DisclosureGroup(props: DisclosureGroupProps): JSX.Element {\n  const state = createDisclosureGroupState(props);\n\n  const values = {\n    get isDisabled() {\n      return state.isDisabled;\n    },\n    state,\n  };\n\n  const render = createRenderProps(\n    mergeProps(props, {\n      defaultClass: \"solid2-aria-DisclosureGroup\",\n      values,\n    })\n  );\n\n  return (\n    <dom.div\n      {...filterDOMProps(props, { global: true })}\n      {...render}\n      ref={(element: HTMLDivElement) => {\n        assignRef(\n          untrack(() => props.ref),\n          element\n        );\n      }}\n      data-disabled={state.isDisabled || undefined}\n    >\n      <DisclosureGroupStateContext value={state}>\n        {render.children}\n      </DisclosureGroupStateContext>\n    </dom.div>\n  );\n}\n\nexport function Disclosure(input: DisclosureProps): JSX.Element {\n  const [props, , setRef] = createContextProps(\n    input,\n    untrack(() => input.ref),\n    DisclosureContext\n  );\n\n  const group = useContext(DisclosureGroupStateContext);\n  const defaultId = createUniqueId();\n  const id = () => props.id ?? defaultId;\n\n  const options = mergeProps(props, {\n    get isDisabled() {\n      return props.isDisabled ?? group?.isDisabled;\n    },\n    get isExpanded() {\n      return group ? group.expandedKeys.has(id()) : props.isExpanded;\n    },\n    onExpandedChange(expanded: boolean) {\n      group?.toggleKey(id());\n      props.onExpandedChange?.(expanded);\n    },\n  });\n\n  const state = createDisclosureState(options);\n\n  const [panelRef, setPanelRef] = createSignal<HTMLDivElement | null>(null, {\n    ownedWrite: true,\n  });\n\n  const aria = createDisclosure(options, state, panelRef);\n  const focus = createFocusRing({ within: true });\n\n  const values: DisclosureRenderProps = {\n    get isDisabled() {\n      return options.isDisabled === true;\n    },\n    get isExpanded() {\n      return state.isExpanded;\n    },\n    get isFocusVisibleWithin() {\n      return focus.isFocusVisible;\n    },\n    state,\n  };\n\n  const render = createRenderProps(\n    mergeProps(props, { defaultClass: \"solid2-aria-Disclosure\", values })\n  );\n\n  const panel = {\n    get panelProps() {\n      return aria.panelProps;\n    },\n    panelRef,\n    setPanelRef: (element: HTMLDivElement) => {\n      setPanelRef(element);\n    },\n  };\n\n  return (\n    <dom.div\n      {...mergeProps(\n        omit(filterDOMProps(props, { global: true }), \"id\"),\n        merge(() => focus.focusProps ?? {}),\n        render\n      )}\n      ref={(element: HTMLDivElement) => {\n        setRef(element);\n      }}\n      data-expanded={state.isExpanded || undefined}\n      data-disabled={values.isDisabled || undefined}\n      data-focus-visible-within={values.isFocusVisibleWithin || undefined}\n    >\n      <DisclosureStateContext value={state}>\n        <PanelContext value={panel}>\n          <ButtonContext\n            value={{\n              slots: {\n                [DEFAULT_SLOT]: {},\n                get trigger() {\n                  return aria.buttonProps;\n                },\n              },\n            }}\n          >\n            {render.children}\n          </ButtonContext>\n        </PanelContext>\n      </DisclosureStateContext>\n    </dom.div>\n  );\n}\n\nexport function DisclosurePanel(props: DisclosurePanelProps): JSX.Element {\n  const context = useContext(PanelContext);\n\n  if (!context) {\n    throw new Error(\"DisclosurePanel requires Disclosure\");\n  }\n\n  const focus = createFocusRing({ within: true });\n\n  const values = {\n    get isFocusVisibleWithin() {\n      return focus.isFocusVisible;\n    },\n  };\n\n  const render = createRenderProps(\n    mergeProps(props, {\n      defaultClass: \"solid2-aria-DisclosurePanel\",\n      values,\n    })\n  );\n\n  return (\n    <dom.div\n      {...mergeProps(\n        filterDOMProps(props, { global: true }),\n        merge(() => context.panelProps ?? {}),\n        merge(() => focus.focusProps ?? {}),\n        render\n      )}\n      role={props.role ?? \"group\"}\n      ref={[\n        (element: HTMLDivElement) => {\n          context.setPanelRef(element);\n        },\n        (element: HTMLDivElement) => {\n          assignRef(\n            untrack(() => props.ref),\n            element\n          );\n        },\n      ]}\n      data-focus-visible-within={values.isFocusVisibleWithin || undefined}\n    >\n      {render.children}\n    </dom.div>\n  );\n}\n"],"mappings":"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"}

package/dist/browser/drag-and-drop.d.ts

@@ -0,0 +1,43 @@
+/*
+ * Copyright 2024 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/DragAndDrop.tsx.
+ * Modified for Solid Aria: contexts and indicator rendering use Solid reactive ownership.
+ * Licensed under Apache-2.0. See LICENSES/Apache-2.0.txt and NOTICE.txt at the repository root.
+ */
+import { Ref, RenderProps } from "./utils.js";
+import { DragAndDropHooks } from "./create-drag-and-drop.js";
+import { JSX } from "@solidjs/web";
+import { DropIndicatorProps as DropIndicatorProps$1 } from "@solid2-aria/core/dnd/create-drop-indicator";
+import { DraggableCollectionState } from "@solid2-aria/stately/dnd/create-draggable-collection-state";
+import { DroppableCollectionState } from "@solid2-aria/stately/dnd/create-droppable-collection-state";
+import { ItemDropTarget, Key } from "@solid2-aria/types-shared";
+import { MultipleSelectionManager } from "@solid2-aria/stately/selection/types";
+export interface DragAndDropContextValue {
+  dragAndDropHooks?: DragAndDropHooks<any>;
+  dragState?: DraggableCollectionState;
+  dropState?: DroppableCollectionState;
+}
+export interface DropIndicatorRenderProps {
+  isDropTarget: boolean;
+}
+export interface DropIndicatorProps extends Omit<DropIndicatorProps$1, "activateButtonRef">, RenderProps<DropIndicatorRenderProps> {
+  ref?: Ref<HTMLElement>;
+}
+export declare const DragAndDropContext: import("solid-js").Context<DragAndDropContextValue>;
+export declare const DropIndicatorContext: import("solid-js").Context<{
+  render: (props: DropIndicatorProps, ref?: Ref<HTMLElement>) => JSX.Element;
+} | null>;
+export declare function DropIndicator(props: DropIndicatorProps): JSX.Element;
+export declare function createRenderDropIndicator<T>(hooks?: DragAndDropHooks<T>, state?: DroppableCollectionState): ((target: ItemDropTarget) => JSX.Element) | undefined;
+export declare function createDndPersistedKeys<T>(manager: MultipleSelectionManager, hooks?: DragAndDropHooks<T>, state?: DroppableCollectionState): Set<Key>;
+//# sourceMappingURL=drag-and-drop.d.ts.map

package/dist/browser/drag-and-drop.js

@@ -0,0 +1,66 @@
+/*
+ * Copyright 2024 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/DragAndDrop.tsx.
+ * Modified for Solid Aria: contexts and indicator rendering use Solid reactive ownership.
+ * Licensed under Apache-2.0. See LICENSES/Apache-2.0.txt and NOTICE.txt at the repository root.
+ */
+import { createComponent, memo } from "@solidjs/web";
+import { createContext, untrack, useContext } from "solid-js";
+import { isPresent } from "@solid2-aria/core/utils/is-present";
+// src/drag-and-drop.tsx
+const DragAndDropContext = createContext({});
+const DropIndicatorContext = createContext(null);
+function DropIndicator(props) {
+	const context = useContext(DropIndicatorContext);
+	if (!context) throw new Error("DropIndicator must be rendered in a droppable collection.");
+	return context.render(props, untrack(() => props.ref));
+}
+function createRenderDropIndicator(hooks, state) {
+	if (!hooks?.createDropIndicator) return;
+	return (target) => {
+		if (hooks.isVirtualDragging?.() !== true && state?.isDropTarget(target) !== true) return null;
+		return memo(() => {
+			return memo(() => {
+				return !!hooks.renderDropIndicator;
+			})() ? hooks.renderDropIndicator(target) : createComponent(DropIndicator, { target });
+		});
+	};
+}
+function createDndPersistedKeys(manager, hooks, state) {
+	let dropKey = null;
+	if (hooks?.isVirtualDragging?.() === true && state?.target?.type === "item") {
+		dropKey = state.target.key;
+		if (state.target.dropPosition === "after") {
+			let next = state.collection.getKeyAfter(dropKey);
+			let last = null;
+			const level = state.collection.getItem(dropKey)?.level ?? 0;
+			while (isPresent(next)) {
+				const node = state.collection.getItem(next);
+				if (!node) break;
+				if (node.type === "item") {
+					if ((node.level ?? 0) <= level) break;
+					last = next;
+				}
+				next = state.collection.getKeyAfter(next);
+			}
+			dropKey = next ?? last ?? dropKey;
+		}
+	}
+	const keys = /* @__PURE__ */ new Set();
+	if (isPresent(manager.focusedKey)) keys.add(manager.focusedKey);
+	if (isPresent(dropKey)) keys.add(dropKey);
+	return keys;
+}
+export { DragAndDropContext, DropIndicator, DropIndicatorContext, createDndPersistedKeys, createRenderDropIndicator };
+
+//# sourceMappingURL=drag-and-drop.js.map

package/dist/browser/drag-and-drop.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drag-and-drop.js","names":["{hooks.renderDropIndicator ? (\n          hooks.renderDropIndicator(target)\n        ) : (\n          <DropIndicator target={target} />\n        )}","<DropIndicator target={target} />","_$memo","_$createComponent"],"sources":["../../src/drag-and-drop.tsx"],"sourcesContent":["/*\n * Copyright 2024 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/DragAndDrop.tsx.\n * Modified for Solid Aria: contexts and indicator rendering use Solid reactive ownership.\n * Licensed under Apache-2.0. See LICENSES/Apache-2.0.txt and NOTICE.txt at the repository root.\n */\n\nimport type { DropIndicatorProps as AriaDropIndicatorProps } from \"@solid2-aria/core/dnd/create-drop-indicator\";\nimport { isPresent } from \"@solid2-aria/core/utils/is-present\";\nimport type { DraggableCollectionState } from \"@solid2-aria/stately/dnd/create-draggable-collection-state\";\nimport type { DroppableCollectionState } from \"@solid2-aria/stately/dnd/create-droppable-collection-state\";\nimport type { MultipleSelectionManager } from \"@solid2-aria/stately/selection/types\";\nimport type { ItemDropTarget, Key } from \"@solid2-aria/types-shared\";\nimport type { JSX } from \"@solidjs/web\";\nimport { untrack, createContext, useContext } from \"solid-js\";\n\nimport type { DragAndDropHooks } from \"./create-drag-and-drop\";\nimport type { Ref, RenderProps } from \"./utils\";\n\nexport interface DragAndDropContextValue {\n  // oxlint-disable-next-line typescript/no-explicit-any -- The collection owner and its descendants share one item type through this context.\n  dragAndDropHooks?: DragAndDropHooks<any>;\n  dragState?: DraggableCollectionState;\n  dropState?: DroppableCollectionState;\n}\n\nexport interface DropIndicatorRenderProps {\n  isDropTarget: boolean;\n}\n\nexport interface DropIndicatorProps\n  extends\n    Omit<AriaDropIndicatorProps, \"activateButtonRef\">,\n    RenderProps<DropIndicatorRenderProps> {\n  ref?: Ref<HTMLElement>;\n}\n\nexport const DragAndDropContext = createContext<DragAndDropContextValue>({});\n\nexport const DropIndicatorContext = createContext<{\n  render: (props: DropIndicatorProps, ref?: Ref<HTMLElement>) => JSX.Element;\n} | null>(null);\n\nexport function DropIndicator(props: DropIndicatorProps): JSX.Element {\n  const context = useContext(DropIndicatorContext);\n\n  if (!context) {\n    throw new Error(\n      \"DropIndicator must be rendered in a droppable collection.\"\n    );\n  }\n\n  return context.render(\n    props,\n    untrack(() => props.ref)\n  );\n}\n\nexport function createRenderDropIndicator<T>(\n  hooks?: DragAndDropHooks<T>,\n  state?: DroppableCollectionState\n): ((target: ItemDropTarget) => JSX.Element) | undefined {\n  if (!hooks?.createDropIndicator) {\n    return undefined;\n  }\n\n  return (target): JSX.Element => {\n    if (\n      hooks.isVirtualDragging?.() !== true &&\n      state?.isDropTarget(target) !== true\n    ) {\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      <>\n        {hooks.renderDropIndicator ? (\n          hooks.renderDropIndicator(target)\n        ) : (\n          <DropIndicator target={target} />\n        )}\n      </>\n    );\n  };\n}\n\nexport function createDndPersistedKeys<T>(\n  manager: MultipleSelectionManager,\n  hooks?: DragAndDropHooks<T>,\n  state?: DroppableCollectionState\n): Set<Key> {\n  let dropKey: Key | null = null;\n\n  if (hooks?.isVirtualDragging?.() === true && state?.target?.type === \"item\") {\n    dropKey = state.target.key;\n\n    if (state.target.dropPosition === \"after\") {\n      let next = state.collection.getKeyAfter(dropKey);\n      let last: Key | null = null;\n      const level = state.collection.getItem(dropKey)?.level ?? 0;\n\n      while (isPresent(next)) {\n        const node = state.collection.getItem(next);\n\n        if (!node) {\n          break;\n        }\n\n        if (node.type === \"item\") {\n          if ((node.level ?? 0) <= level) {\n            break;\n          }\n\n          last = next;\n        }\n\n        next = state.collection.getKeyAfter(next);\n      }\n\n      dropKey = next ?? last ?? dropKey;\n    }\n  }\n\n  const keys = new Set<Key>();\n\n  if (isPresent(manager.focusedKey)) {\n    keys.add(manager.focusedKey);\n  }\n\n  if (isPresent(dropKey)) {\n    keys.add(dropKey);\n  }\n\n  return keys;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AA+CA,MAAa,qBAAqB,cAAuC,CAAC,CAAC;AAE3E,MAAa,uBAAuB,cAE1B,IAAI;AAEd,SAAgB,cAAc,OAAwC;CACpE,MAAM,UAAU,WAAW,oBAAoB;CAE/C,IAAI,CAAC,SACH,MAAM,IAAI,MACR,2DACF;CAGF,OAAO,QAAQ,OACb,OACA,cAAc,MAAM,GAAG,CACzB;AACF;AAEA,SAAgB,0BACd,OACA,OACuD;CACvD,IAAI,CAAC,OAAO,qBACV;CAGF,QAAQ,WAAwB;EAC9B,IACE,MAAM,oBAAoB,MAAM,QAChC,OAAO,aAAa,MAAM,MAAM,MAGhC,OAAO;EAGT,OAEIA,WAAAA;;IAAC,OAAA,CAAA,CAAA,MAAM;GAIN,CAAA,CAAC,CAAD,IAHC,MAAM,oBAAoB,MAAM,IAEhCC,gBAAAA,eAAAA,EAAuB,OAAS,CAAA;EACjC,CAAA;CAGP;AACF;AAEA,SAAgB,uBACd,SACA,OACA,OACU;CACV,IAAI,UAAsB;CAE1B,IAAI,OAAO,oBAAoB,MAAM,QAAQ,OAAO,QAAQ,SAAS,QAAQ;EAC3E,UAAU,MAAM,OAAO;EAEvB,IAAI,MAAM,OAAO,iBAAiB,SAAS;GACzC,IAAI,OAAO,MAAM,WAAW,YAAY,OAAO;GAC/C,IAAI,OAAmB;GACvB,MAAM,QAAQ,MAAM,WAAW,QAAQ,OAAO,CAAC,EAAE,SAAS;GAE1D,OAAO,UAAU,IAAI,GAAG;IACtB,MAAM,OAAO,MAAM,WAAW,QAAQ,IAAI;IAE1C,IAAI,CAAC,MACH;IAGF,IAAI,KAAK,SAAS,QAAQ;KACxB,KAAK,KAAK,SAAS,MAAM,OACvB;KAGF,OAAO;IACT;IAEA,OAAO,MAAM,WAAW,YAAY,IAAI;GAC1C;GAEA,UAAU,QAAQ,QAAQ;EAC5B;CACF;CAEA,MAAM,uBAAO,IAAI,IAAS;CAE1B,IAAI,UAAU,QAAQ,UAAU,GAC9B,KAAK,IAAI,QAAQ,UAAU;CAG7B,IAAI,UAAU,OAAO,GACnB,KAAK,IAAI,OAAO;CAGlB,OAAO;AACT"}

package/dist/browser/drop-zone.d.ts

@@ -0,0 +1,33 @@
+/*
+ * Copyright 2023 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/DropZone.tsx.
+ * Modified for Solid Aria: DOM refs, focus, drag, clipboard and render state use Solid factories; 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 { DropOptions } from "@solid2-aria/core/dnd/create-drop";
+import { AriaLabelingProps, HoverEvents } from "@solid2-aria/types-shared";
+import { GlobalDOMAttributes } from "@solid2-aria/types-shared-web";
+export interface DropZoneRenderProps {
+  isHovered: boolean;
+  isFocused: boolean;
+  isFocusVisible: boolean;
+  isDropTarget: boolean;
+  isDisabled: boolean;
+}
+export interface DropZoneProps extends Omit<DropOptions, "getDropOperationForPoint" | "ref" | "hasDropButton">, HoverEvents, RenderProps<DropZoneRenderProps>, SlotProps, AriaLabelingProps, GlobalDOMAttributes<HTMLDivElement> {
+  ref?: Ref<HTMLDivElement>;
+}
+export declare const DropZoneContext: import("solid-js").Context<ContextValue<DropZoneProps, HTMLDivElement>>;
+export declare function DropZone(input: DropZoneProps): import("@solidjs/web").JSX.Element;
+//# sourceMappingURL=drop-zone.d.ts.map

package/dist/browser/drop-zone.js

@@ -0,0 +1,161 @@
+/*
+ * Copyright 2023 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/DropZone.tsx.
+ * Modified for Solid Aria: DOM refs, focus, drag, clipboard and render state use Solid factories; 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 { TextContext } from "./text.js";
+import intl_default from "./intl/index.js";
+import { createComponent, getNextElement, memo, mergeProps, ref, runHydrationEvents, spread, template } from "@solidjs/web";
+import { mergeProps as mergeProps$1 } from "@solid2-aria/core/utils/merge-props";
+import { createContext, createSignal, merge, untrack } from "solid-js";
+import { filterDOMProps } from "@solid2-aria/core/utils/filter-dom-props";
+import { createFocusRing } from "@solid2-aria/core/focus/create-focus-ring";
+import { createHover } from "@solid2-aria/core/interactions/create-hover";
+import { createButton } from "@solid2-aria/core/button/create-button";
+import { createVisuallyHidden } from "@solid2-aria/core/visually-hidden/visually-hidden";
+import { createLocalizedStringFormatter } from "@solid2-aria/core/i18n/create-localized-string-formatter";
+import { createClipboard } from "@solid2-aria/core/dnd/create-clipboard";
+import { createDrop } from "@solid2-aria/core/dnd/create-drop";
+import { createSlotId } from "@solid2-aria/core/utils/create-id";
+import { createLabels } from "@solid2-aria/core/utils/create-labels";
+import { focusWithoutScrolling } from "@solid2-aria/core/utils/focus-without-scrolling";
+import { isFocusable } from "@solid2-aria/core/utils/is-focusable";
+// src/drop-zone.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<div><button>`);
+const DropZoneContext = createContext(null);
+function DropZone(input) {
+	const [props, ref$1, setRef] = createContextProps(input, untrack(() => input.ref), DropZoneContext);
+	const [buttonRef, setButtonRef] = createSignal(null, { ownedWrite: true });
+	const drop = createDrop(mergeProps$1(props, {
+		hasDropButton: true,
+		ref: buttonRef
+	}));
+	const button = createButton(mergeProps$1({ get children() {
+		return props.children;
+	} }, drop.dropButtonProps ?? {}), buttonRef);
+	const hover = createHover(props);
+	const focus = createFocusRing();
+	const hidden = createVisuallyHidden();
+	const textId = createSlotId();
+	const formatter = createLocalizedStringFormatter(intl_default, "@solid2-aria/components");
+	const labels = createLabels({
+		get "aria-label"() {
+			return props["aria-label"] ?? formatter.format("dropzoneLabel");
+		},
+		get "aria-labelledby"() {
+			return [textId(), props["aria-labelledby"]].filter(Boolean).join(" ") || void 0;
+		}
+	});
+	const clipboard = createClipboard({
+		get isDisabled() {
+			return props.isDisabled;
+		},
+		onPaste: (items) => props.onDrop?.({
+			dropOperation: "copy",
+			items,
+			type: "drop",
+			x: 0,
+			y: 0
+		})
+	});
+	const render = createRenderProps(mergeProps$1(props, {
+		defaultClass: "solid2-aria-DropZone",
+		values: {
+			get isDisabled() {
+				return props.isDisabled === true;
+			},
+			get isDropTarget() {
+				return drop.isDropTarget;
+			},
+			get isFocusVisible() {
+				return focus.isFocusVisible;
+			},
+			get isFocused() {
+				return focus.isFocused;
+			},
+			get isHovered() {
+				return hover.isHovered;
+			}
+		}
+	}));
+	return createComponent(TextContext, {
+		value: { slots: { label: { get id() {
+			return textId();
+		} } } },
+		get children() {
+			return createComponent(dom.div, mergeProps(() => {
+				return mergeProps$1(filterDOMProps(props, { global: true }), render, merge(() => drop.dropProps ?? {}), merge(() => hover.hoverProps ?? {}));
+			}, {
+				ref: (element) => {
+					setRef(element);
+				},
+				get slot() {
+					return props.slot ?? void 0;
+				},
+				get "data-hovered"() {
+					return hover.isHovered || void 0;
+				},
+				get "data-focused"() {
+					return focus.isFocused || void 0;
+				},
+				get "data-focus-visible"() {
+					return focus.isFocusVisible || void 0;
+				},
+				get "data-drop-target"() {
+					return drop.isDropTarget || void 0;
+				},
+				get "data-disabled"() {
+					return props.isDisabled ?? void 0;
+				},
+				onClick: (event) => {
+					let target = event.target instanceof HTMLElement ? event.target : null;
+					while (target && ref$1()?.contains(target) === true) {
+						if (isFocusable(target)) break;
+						const focusTarget = buttonRef();
+						if (target === ref$1() && focusTarget) {
+							focusWithoutScrolling(focusTarget);
+							break;
+						}
+						target = target.parentElement;
+					}
+				},
+				get children() {
+					return [(() => {
+						var _el$ = getNextElement(_tmpl$);
+						var _el$2 = _el$.firstChild;
+						spread(_el$, () => {
+							return hidden.visuallyHiddenProps;
+						}, true);
+						spread(_el$2, () => {
+							return mergeProps$1(merge(() => button.buttonProps ?? {}), merge(() => focus.focusProps ?? {}), merge(() => clipboard.clipboardProps ?? {}), labels);
+						}, false);
+						ref(() => {
+							return (element) => {
+								setButtonRef(element);
+							};
+						}, _el$2);
+						runHydrationEvents();
+						return _el$;
+					})(), memo(() => {
+						return render.children;
+					})];
+				}
+			}));
+		}
+	});
+}
+export { DropZone, DropZoneContext };
+
+//# sourceMappingURL=drop-zone.js.map

package/dist/browser/drop-zone.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drop-zone.js","names":["<TextContext\n      value={{\n        slots: {\n          label: {\n            get id() {\n              return textId();\n            },\n          },\n        },\n      }}\n    >\n      <dom.div\n        {...mergeProps(\n          filterDOMProps(props, { global: true }),\n          render,\n          merge(() => drop.dropProps ?? {}),\n          merge(() => hover.hoverProps ?? {})\n        )}\n        ref={(element: HTMLDivElement) => {\n          setRef(element);\n        }}\n        slot={props.slot ?? undefined}\n        data-hovered={hover.isHovered || undefined}\n        data-focused={focus.isFocused || undefined}\n        data-focus-visible={focus.isFocusVisible || undefined}\n        data-drop-target={drop.isDropTarget || undefined}\n        data-disabled={props.isDisabled ?? undefined}\n        onClick={(event) => {\n          let target =\n            event.target instanceof HTMLElement ? event.target : null;\n\n          while (target && ref()?.contains(target) === true) {\n            if (isFocusable(target)) {\n              break;\n            }\n\n            const focusTarget = buttonRef();\n\n            if (target === ref() && focusTarget) {\n              focusWithoutScrolling(focusTarget);\n              break;\n            }\n\n            target = target.parentElement;\n          }\n        }}\n      >\n        <div {...hidden.visuallyHiddenProps}>\n          <button\n            {...mergeProps(\n              merge(() => button.buttonProps ?? {}),\n              merge(() => focus.focusProps ?? {}),\n              merge(() => clipboard.clipboardProps ?? {}),\n              labels\n            )}\n\n            ref={(element: HTMLButtonElement) => {\n              setButtonRef(element);\n            }}\n          />\n        </div>\n        {render.children}\n      </dom.div>\n    </TextContext>","value={{\n        slots: {\n          label: {\n            get id() {\n              return textId();\n            },\n          },\n        },\n      }}","<dom.div\n        {...mergeProps(\n          filterDOMProps(props, { global: true }),\n          render,\n          merge(() => drop.dropProps ?? {}),\n          merge(() => hover.hoverProps ?? {})\n        )}\n        ref={(element: HTMLDivElement) => {\n          setRef(element);\n        }}\n        slot={props.slot ?? undefined}\n        data-hovered={hover.isHovered || undefined}\n        data-focused={focus.isFocused || undefined}\n        data-focus-visible={focus.isFocusVisible || undefined}\n        data-drop-target={drop.isDropTarget || undefined}\n        data-disabled={props.isDisabled ?? undefined}\n        onClick={(event) => {\n          let target =\n            event.target instanceof HTMLElement ? event.target : null;\n\n          while (target && ref()?.contains(target) === true) {\n            if (isFocusable(target)) {\n              break;\n            }\n\n            const focusTarget = buttonRef();\n\n            if (target === ref() && focusTarget) {\n              focusWithoutScrolling(focusTarget);\n              break;\n            }\n\n            target = target.parentElement;\n          }\n        }}\n      >\n        <div {...hidden.visuallyHiddenProps}>\n          <button\n            {...mergeProps(\n              merge(() => button.buttonProps ?? {}),\n              merge(() => focus.focusProps ?? {}),\n              merge(() => clipboard.clipboardProps ?? {}),\n              labels\n            )}\n\n            ref={(element: HTMLButtonElement) => {\n              setButtonRef(element);\n            }}\n          />\n        </div>\n        {render.children}\n      </dom.div>","dom.div","ref={(element: HTMLDivElement) => {\n          setRef(element);\n        }}","onClick={(event) => {\n          let target =\n            event.target instanceof HTMLElement ? event.target : null;\n\n          while (target && ref()?.contains(target) === true) {\n            if (isFocusable(target)) {\n              break;\n            }\n\n            const focusTarget = buttonRef();\n\n            if (target === ref() && focusTarget) {\n              focusWithoutScrolling(focusTarget);\n              break;\n            }\n\n            target = target.parentElement;\n          }\n        }}","ref={(element: HTMLButtonElement) => {\n              setButtonRef(element);\n            }}","render.children","ref","mergeProps","intlMessages","_$createComponent","_$mergeProps","_$getNextElement","_$memo"],"sources":["../../src/drop-zone.tsx"],"sourcesContent":["/*\n * Copyright 2023 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/DropZone.tsx.\n * Modified for Solid Aria: DOM refs, focus, drag, clipboard and render state use Solid factories; 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 { createButton } from \"@solid2-aria/core/button/create-button\";\nimport { createClipboard } from \"@solid2-aria/core/dnd/create-clipboard\";\nimport { createDrop } from \"@solid2-aria/core/dnd/create-drop\";\nimport type { DropOptions } from \"@solid2-aria/core/dnd/create-drop\";\nimport { createFocusRing } from \"@solid2-aria/core/focus/create-focus-ring\";\nimport { createLocalizedStringFormatter } from \"@solid2-aria/core/i18n/create-localized-string-formatter\";\nimport { createHover } from \"@solid2-aria/core/interactions/create-hover\";\nimport { createSlotId } from \"@solid2-aria/core/utils/create-id\";\nimport { createLabels } from \"@solid2-aria/core/utils/create-labels\";\nimport { filterDOMProps } from \"@solid2-aria/core/utils/filter-dom-props\";\nimport { focusWithoutScrolling } from \"@solid2-aria/core/utils/focus-without-scrolling\";\nimport { isFocusable } from \"@solid2-aria/core/utils/is-focusable\";\nimport { mergeProps } from \"@solid2-aria/core/utils/merge-props\";\nimport { createVisuallyHidden } from \"@solid2-aria/core/visually-hidden/visually-hidden\";\nimport type { AriaLabelingProps, HoverEvents } from \"@solid2-aria/types-shared\";\nimport type { GlobalDOMAttributes } from \"@solid2-aria/types-shared-web\";\nimport { merge, untrack, createSignal, createContext } from \"solid-js\";\n\nimport intlMessages from \"../intl\";\nimport { TextContext } from \"./text\";\nimport { dom, createContextProps, createRenderProps } from \"./utils\";\nimport type { ContextValue, RenderProps, SlotProps, Ref } from \"./utils\";\n\nexport interface DropZoneRenderProps {\n  isHovered: boolean;\n  isFocused: boolean;\n  isFocusVisible: boolean;\n  isDropTarget: boolean;\n  isDisabled: boolean;\n}\n\nexport interface DropZoneProps\n  extends\n    Omit<DropOptions, \"getDropOperationForPoint\" | \"ref\" | \"hasDropButton\">,\n    HoverEvents,\n    RenderProps<DropZoneRenderProps>,\n    SlotProps,\n    AriaLabelingProps,\n    GlobalDOMAttributes<HTMLDivElement> {\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport const DropZoneContext =\n  createContext<ContextValue<DropZoneProps, HTMLDivElement>>(null);\n\nexport function DropZone(input: DropZoneProps) {\n  const [props, ref, setRef] = createContextProps(\n    input,\n    untrack(() => input.ref),\n    DropZoneContext\n  );\n\n  const [buttonRef, setButtonRef] = createSignal<HTMLButtonElement | null>(\n    null,\n    { ownedWrite: true }\n  );\n\n  const drop = createDrop(\n    mergeProps(props, { hasDropButton: true, ref: buttonRef })\n  );\n\n  const button = createButton(\n    mergeProps(\n      {\n        get children() {\n          return props.children;\n        },\n      },\n      drop.dropButtonProps ?? {}\n    ),\n    buttonRef\n  );\n\n  const hover = createHover(props);\n  const focus = createFocusRing();\n  const hidden = createVisuallyHidden();\n  const textId = createSlotId();\n\n  const formatter = createLocalizedStringFormatter(\n    intlMessages,\n    \"@solid2-aria/components\"\n  );\n\n  const labels = createLabels({\n    get \"aria-label\"() {\n      return props[\"aria-label\"] ?? formatter.format(\"dropzoneLabel\");\n    },\n    get \"aria-labelledby\"() {\n      return (\n        [textId(), props[\"aria-labelledby\"]].filter(Boolean).join(\" \") ||\n        undefined\n      );\n    },\n  });\n\n  const clipboard = createClipboard({\n    get isDisabled() {\n      return props.isDisabled;\n    },\n    onPaste: (items) =>\n      props.onDrop?.({\n        dropOperation: \"copy\",\n        items,\n        type: \"drop\",\n        x: 0,\n        y: 0,\n      }),\n  });\n\n  const values = {\n    get isDisabled() {\n      return props.isDisabled === true;\n    },\n    get isDropTarget() {\n      return drop.isDropTarget;\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  };\n\n  const render = createRenderProps(\n    mergeProps(props, { defaultClass: \"solid2-aria-DropZone\", values })\n  );\n\n  return (\n    <TextContext\n      value={{\n        slots: {\n          label: {\n            get id() {\n              return textId();\n            },\n          },\n        },\n      }}\n    >\n      <dom.div\n        {...mergeProps(\n          filterDOMProps(props, { global: true }),\n          render,\n          merge(() => drop.dropProps ?? {}),\n          merge(() => hover.hoverProps ?? {})\n        )}\n        ref={(element: HTMLDivElement) => {\n          setRef(element);\n        }}\n        slot={props.slot ?? undefined}\n        data-hovered={hover.isHovered || undefined}\n        data-focused={focus.isFocused || undefined}\n        data-focus-visible={focus.isFocusVisible || undefined}\n        data-drop-target={drop.isDropTarget || undefined}\n        data-disabled={props.isDisabled ?? undefined}\n        onClick={(event) => {\n          let target =\n            event.target instanceof HTMLElement ? event.target : null;\n\n          while (target && ref()?.contains(target) === true) {\n            if (isFocusable(target)) {\n              break;\n            }\n\n            const focusTarget = buttonRef();\n\n            if (target === ref() && focusTarget) {\n              focusWithoutScrolling(focusTarget);\n              break;\n            }\n\n            target = target.parentElement;\n          }\n        }}\n      >\n        <div {...hidden.visuallyHiddenProps}>\n          <button\n            {...mergeProps(\n              merge(() => button.buttonProps ?? {}),\n              merge(() => focus.focusProps ?? {}),\n              merge(() => clipboard.clipboardProps ?? {}),\n              labels\n            )}\n\n            ref={(element: HTMLButtonElement) => {\n              setButtonRef(element);\n            }}\n          />\n        </div>\n        {render.children}\n      </dom.div>\n    </TextContext>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2DA,MAAa,kBACX,cAA2D,IAAI;AAEjE,SAAgB,SAAS,OAAsB;CAC7C,MAAM,CAAC,OAAOQ,OAAK,UAAU,mBAC3B,OACA,cAAc,MAAM,GAAG,GACvB,eACF;CAEA,MAAM,CAAC,WAAW,gBAAgB,aAChC,MACA,EAAE,YAAY,KAAK,CACrB;CAEA,MAAM,OAAO,WACXC,aAAW,OAAO;EAAE,eAAe;EAAM,KAAK;CAAU,CAAC,CAC3D;CAEA,MAAM,SAAS,aACbA,aACE,EACE,IAAI,WAAW;EACb,OAAO,MAAM;CACf,EACF,GACA,KAAK,mBAAmB,CAAC,CAC3B,GACA,SACF;CAEA,MAAM,QAAQ,YAAY,KAAK;CAC/B,MAAM,QAAQ,gBAAgB;CAC9B,MAAM,SAAS,qBAAqB;CACpC,MAAM,SAAS,aAAa;CAE5B,MAAM,YAAY,+BAChBC,cACA,yBACF;CAEA,MAAM,SAAS,aAAa;EAC1B,IAAI,eAAe;GACjB,OAAO,MAAM,iBAAiB,UAAU,OAAO,eAAe;EAChE;EACA,IAAI,oBAAoB;GACtB,OACE,CAAC,OAAO,GAAG,MAAM,kBAAkB,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,KAC7D,KAAA;EAEJ;CACF,CAAC;CAED,MAAM,YAAY,gBAAgB;EAChC,IAAI,aAAa;GACf,OAAO,MAAM;EACf;EACA,UAAU,UACR,MAAM,SAAS;GACb,eAAe;GACf;GACA,MAAM;GACN,GAAG;GACH,GAAG;EACL,CAAC;CACL,CAAC;CAoBD,MAAM,SAAS,kBACbD,aAAW,OAAO;EAAE,cAAc;EAAwB,QAAA;GAlB1D,IAAI,aAAa;IACf,OAAO,MAAM,eAAe;GAC9B;GACA,IAAI,eAAe;IACjB,OAAO,KAAK;GACd;GACA,IAAI,iBAAiB;IACnB,OAAO,MAAM;GACf;GACA,IAAI,YAAY;IACd,OAAO,MAAM;GACf;GACA,IAAI,YAAY;IACd,OAAO,MAAM;GACf;EAI0D;CAAO,CAAC,CACpE;CAEA,OACET,gBAAAA,aAAAA;EACEC,OAAO,EACL,OAAO,EACL,OAAO,EACL,IAAI,KAAK;GACP,OAAO,OAAO;EAChB,EACF,EACF,EACF;EATF,IAAA,WAAA;GAWEC,OAAAA,gBAAAA,IAACC,KAADD,iBACE;IAAI,OAAAO,aACF,eAAe,OAAO,EAAE,QAAQ,KAAK,CAAC,GACtC,QACA,YAAY,KAAK,aAAa,CAAC,CAAC,GAChC,YAAY,MAAM,cAAc,CAAC,CAAC,CACpC;GAAC,GANH;IAOEL,MAAM,YAA4B;KAChC,OAAO,OAAO;IAChB;IACA,IAAA,OAAA;KAAM,OAAA,MAAM,QAAQ,KAAA;IAAS;IAC7B,IAAA,iBAAA;KAAc,OAAA,MAAM,aAAa,KAAA;IAAS;IAC1C,IAAA,iBAAA;KAAc,OAAA,MAAM,aAAa,KAAA;IAAS;IAC1C,IAAA,uBAAA;KAAoB,OAAA,MAAM,kBAAkB,KAAA;IAAS;IACrD,IAAA,qBAAA;KAAkB,OAAA,KAAK,gBAAgB,KAAA;IAAS;IAChD,IAAA,kBAAA;KAAe,OAAA,MAAM,cAAc,KAAA;IAAS;IAC5CC,UAAU,UAAU;KAClB,IAAI,SACF,MAAM,kBAAkB,cAAc,MAAM,SAAS;KAEvD,OAAO,UAAUG,MAAI,CAAC,EAAE,SAAS,MAAM,MAAM,MAAM;MACjD,IAAI,YAAY,MAAM,GACpB;MAGF,MAAM,cAAc,UAAU;MAE9B,IAAI,WAAWA,MAAI,KAAK,aAAa;OACnC,sBAAsB,WAAW;OACjC;MACF;MAEA,SAAS,OAAO;KAClB;IACF;IAlCF,IAAA,WAAA;KAmCC,OAAA,QACC;MAaK,IAAA,OAAAK,eAAA,MAAA;MAZH,IAAA,QAAA,KAAA;MADG,OAAA,YAAA;OAAI,OAAA,OAAO;MAAmB,GAAA,IAAA;MAE/B,OAAA,aAAA;OAAI,OAAAJ,aACF,YAAY,OAAO,eAAe,CAAC,CAAC,GACpC,YAAY,MAAM,cAAc,CAAC,CAAC,GAClC,YAAY,UAAU,kBAAkB,CAAC,CAAC,GAC1C,MACF;MAAC,GAAA,KAAA;MAED,UAAA;OAAM,QAAA,YAA+B;QACnC,aAAa,OAAO;OACtB;MAAC,GAFDH,KAEC;MAXL,mBAaK;MAbL,OAAA;KAaK,EAAA,CAAA,GACJC,WAAAA;MAAO,OAAA,OAAA;KAAO,CAAA,CAdhB;IAeQ;;EACE;;AAEjB"}

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

@@ -0,0 +1,28 @@
+/*
+ * Copyright 2023 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/FieldError.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 { Ref, RenderProps, SlotProps } from "./utils.js";
+import { JSX } from "@solidjs/web";
+import { ValidationResult } from "@solid2-aria/types-shared";
+export type FieldErrorRenderProps = ValidationResult;
+export interface FieldErrorProps extends RenderProps<FieldErrorRenderProps>, SlotProps {
+  id?: string;
+  elementType?: keyof JSX.IntrinsicElements;
+  ref?: Ref<HTMLElement>;
+}
+export declare const FieldErrorContext: import("solid-js").Context<ValidationResult | null>;
+export declare function FieldError(props: FieldErrorProps): JSX.Element;
+//# sourceMappingURL=field-error.d.ts.map