@proyecto-viviana/solidaria 0.2.8 → 0.4.0

package/dist/_chunk/overlays.js

@@ -0,0 +1,186 @@
+import { i as access } from "./env.js";
+import { createId } from "../ssr/index.js";
+import { createContext, createEffect, createSignal, onCleanup, useContext } from "solid-js";
+import { Portal, createComponent, getNextElement, insert, isServer, runHydrationEvents, spread, template } from "solid-js/web";
+//#region src/overlays/createOverlayTrigger.ts
+/**
+* Handles the behavior and accessibility for an overlay trigger.
+* Based on @react-aria/overlays useOverlayTrigger.
+*/
+const onCloseMap = /* @__PURE__ */ new WeakMap();
+/**
+* Handles the behavior and accessibility for an overlay trigger, e.g. a button
+* that opens a popover, menu, or other overlay that is positioned relative to the trigger.
+*/
+function createOverlayTrigger(props, state, ref) {
+	const propsAccessor = () => access(props);
+	const overlayId = createId();
+	createEffect(() => {
+		const element = ref?.();
+		if (element) onCloseMap.set(element, state.close);
+	});
+	const getAriaHasPopup = () => {
+		const type = propsAccessor().type;
+		if (type === "menu") return true;
+		else if (type === "listbox") return "listbox";
+	};
+	return {
+		triggerProps: {
+			get "aria-haspopup"() {
+				return getAriaHasPopup();
+			},
+			get "aria-expanded"() {
+				return state.isOpen();
+			},
+			get "aria-controls"() {
+				return state.isOpen() ? overlayId : void 0;
+			},
+			onPress: state.toggle
+		},
+		overlayProps: { id: overlayId }
+	};
+}
+//#endregion
+//#region src/overlays/createModal.tsx
+/**
+* Modal context and hooks for managing modal accessibility.
+* Based on @react-aria/overlays useModal.
+*/
+var _tmpl$ = /*#__PURE__*/ template(`<div data-overlay-container>`);
+const ModalContext = createContext(null);
+const PortalContext = createContext({});
+/**
+* Each ModalProvider tracks how many modals are open in its subtree. On mount, the modals
+* trigger `addModal` to increment the count, and trigger `removeModal` on unmount to decrement it.
+* This is done recursively so that all parent providers are incremented and decremented.
+* If the modal count is greater than zero, we add `aria-hidden` to this provider to hide its
+* subtree from screen readers. This is done using SolidJS context in order to account for things
+* like portals, which can cause the component tree and the DOM tree to differ significantly in structure.
+*/
+const ModalProvider = (props) => {
+	const parent = useContext(ModalContext);
+	const [modalCount, setModalCount] = createSignal(0);
+	const context = {
+		parent,
+		modalCount,
+		addModal() {
+			setModalCount((count) => count + 1);
+			if (parent) parent.addModal();
+		},
+		removeModal() {
+			setModalCount((count) => count - 1);
+			if (parent) parent.removeModal();
+		}
+	};
+	return createComponent(ModalContext.Provider, {
+		value: context,
+		get children() {
+			return props.children;
+		}
+	});
+};
+/**
+* Sets the portal container for overlays rendered by descendants.
+*/
+const UNSAFE_PortalProvider = (props) => {
+	const parent = useUNSAFE_PortalContext();
+	return createComponent(PortalContext.Provider, {
+		get value() {
+			return { getContainer: props.getContainer === null ? void 0 : props.getContainer ?? parent.getContainer };
+		},
+		get children() {
+			return props.children;
+		}
+	});
+};
+/**
+* Returns the portal container configuration inherited from the nearest provider.
+*/
+function useUNSAFE_PortalContext() {
+	return useContext(PortalContext) ?? {};
+}
+/**
+* Used to determine if the tree should be aria-hidden based on how many
+* modals are open.
+*/
+function useModalProvider() {
+	const context = useContext(ModalContext);
+	return { modalProviderProps: { get "aria-hidden"() {
+		return context && context.modalCount() > 0 ? true : void 0;
+	} } };
+}
+/**
+* Creates a root node that will be aria-hidden if there are other modals open.
+*/
+const OverlayContainerDOM = (props) => {
+	const { modalProviderProps } = useModalProvider();
+	return (() => {
+		var _el$ = getNextElement(_tmpl$);
+		spread(_el$, modalProviderProps, false, true);
+		insert(_el$, () => props.children);
+		runHydrationEvents();
+		return _el$;
+	})();
+};
+/**
+* An OverlayProvider acts as a container for the top-level application.
+* Any application that uses modal dialogs or other overlays should
+* be wrapped in a `<OverlayProvider>`. This is used to ensure that
+* the main content of the application is hidden from screen readers
+* if a modal or other overlay is opened. Only the top-most modal or
+* overlay should be accessible at once.
+*/
+const OverlayProvider = (props) => {
+	return createComponent(ModalProvider, { get children() {
+		return createComponent(OverlayContainerDOM, { get children() {
+			return props.children;
+		} });
+	} });
+};
+/**
+* A container for overlays like modals and popovers. Renders the overlay
+* into a Portal which is placed at the end of the document body.
+* Also ensures that the overlay is hidden from screen readers if a
+* nested modal is opened. Only the top-most modal or overlay should
+* be accessible at once.
+*/
+const OverlayContainer = (props) => {
+	if (isServer) return null;
+	const portalContext = useUNSAFE_PortalContext();
+	const portalContainer = () => props.portalContainer ?? portalContext.getContainer?.() ?? document.body;
+	createEffect(() => {
+		if (portalContainer()?.closest("[data-overlay-container]")) throw new Error("An OverlayContainer must not be inside another container. Please change the portalContainer prop.");
+	});
+	return createComponent(Portal, {
+		get mount() {
+			return portalContainer();
+		},
+		get children() {
+			return createComponent(OverlayProvider, { get children() {
+				return props.children;
+			} });
+		}
+	});
+};
+/**
+* Hides content outside the current `<OverlayContainer>` from screen readers
+* on mount and restores it on unmount. Typically used by modal dialogs and
+* other types of overlays to ensure that only the top-most modal is
+* accessible at once.
+*/
+function createModal(options) {
+	const context = useContext(ModalContext);
+	if (!context) throw new Error("Modal is not contained within a provider");
+	createEffect(() => {
+		if (options?.isDisabled || !context.parent) return;
+		context.parent.addModal();
+		onCleanup(() => {
+			if (context.parent) context.parent.removeModal();
+		});
+	});
+	return { modalProps: { "data-ismodal": !options?.isDisabled } };
+}
+//#endregion
+export { createModal as a, createOverlayTrigger as c, UNSAFE_PortalProvider as i, onCloseMap as l, OverlayContainer as n, useModalProvider as o, OverlayProvider as r, useUNSAFE_PortalContext as s, ModalProvider as t };
+
+//# sourceMappingURL=overlays.js.map

package/dist/_chunk/overlays.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"overlays.js","names":["createContext","createSignal","useContext","createEffect","onCleanup","JSX","Accessor","ParentComponent","Portal","isServer","ModalProviderProps","children","Element","PortalProviderProps","getContainer","PortalProviderContextValue","ModalContext","parent","modalCount","addModal","removeModal","PortalContext","ModalProvider","props","setModalCount","context","count","_$createComponent","Provider","value","UNSAFE_PortalProvider","useUNSAFE_PortalContext","undefined","ModalProviderAria","modalProviderProps","useModalProvider","aria-hidden","OverlayContainerDOM","_el$","_$getNextElement","_tmpl$","_$spread","_$insert","_$runHydrationEvents","OverlayProvider","OverlayContainerProps","portalContainer","OverlayContainer","portalContext","document","body","container","closest","Error","mount","AriaModalOptions","isDisabled","ModalAria","modalProps","createModal","options"],"sources":["../../src/overlays/createOverlayTrigger.ts","../../src/overlays/createModal.tsx"],"sourcesContent":["/**\n * Handles the behavior and accessibility for an overlay trigger.\n * Based on @react-aria/overlays useOverlayTrigger.\n */\n\nimport { createEffect } from \"solid-js\";\nimport type { OverlayTriggerState } from \"@proyecto-viviana/solid-stately\";\nimport { createId } from \"../ssr\";\nimport { access, type MaybeAccessor } from \"../utils\";\n\nexport interface OverlayTriggerProps {\n  /** Type of overlay that is opened by the trigger. */\n  type: \"dialog\" | \"menu\" | \"listbox\" | \"tree\" | \"grid\";\n}\n\nexport interface OverlayTriggerAria {\n  /** Props for the trigger element. */\n  triggerProps: {\n    \"aria-haspopup\"?: boolean | \"listbox\";\n    \"aria-expanded\": boolean;\n    \"aria-controls\"?: string;\n    onPress: () => void;\n  };\n  /** Props for the overlay container element. */\n  overlayProps: {\n    id: string;\n  };\n}\n\n// Map for storing close functions, used by useCloseOnScroll\nexport const onCloseMap = new WeakMap<Element, () => void>();\n\n/**\n * Handles the behavior and accessibility for an overlay trigger, e.g. a button\n * that opens a popover, menu, or other overlay that is positioned relative to the trigger.\n */\nexport function createOverlayTrigger(\n  props: MaybeAccessor<OverlayTriggerProps>,\n  state: OverlayTriggerState,\n  ref?: () => Element | null,\n): OverlayTriggerAria {\n  const propsAccessor = () => access(props);\n  const overlayId = createId();\n\n  // Backward compatibility. Share state close function with useOverlayPosition so it can close on scroll\n  // without forcing users to pass onClose.\n  createEffect(() => {\n    const element = ref?.();\n    if (element) {\n      onCloseMap.set(element, state.close);\n    }\n  });\n\n  // Aria 1.1 supports multiple values for aria-haspopup other than just menus.\n  // https://www.w3.org/TR/wai-aria-1.1/#aria-haspopup\n  // However, we only add it for menus for now because screen readers often\n  // announce it as a menu even for other values.\n  const getAriaHasPopup = (): boolean | \"listbox\" | undefined => {\n    const type = propsAccessor().type;\n    if (type === \"menu\") {\n      return true;\n    } else if (type === \"listbox\") {\n      return \"listbox\";\n    }\n    return undefined;\n  };\n\n  return {\n    triggerProps: {\n      get \"aria-haspopup\"() {\n        return getAriaHasPopup();\n      },\n      get \"aria-expanded\"() {\n        return state.isOpen();\n      },\n      get \"aria-controls\"() {\n        return state.isOpen() ? overlayId : undefined;\n      },\n      onPress: state.toggle,\n    },\n    overlayProps: {\n      id: overlayId,\n    },\n  };\n}\n","/**\n * Modal context and hooks for managing modal accessibility.\n * Based on @react-aria/overlays useModal.\n */\n\nimport {\n  createContext,\n  createSignal,\n  useContext,\n  createEffect,\n  onCleanup,\n  type JSX,\n  type Accessor,\n  type ParentComponent,\n} from \"solid-js\";\nimport { Portal } from \"solid-js/web\";\nimport { isServer } from \"solid-js/web\";\n\nexport interface ModalProviderProps {\n  children: JSX.Element;\n}\n\nexport interface PortalProviderProps {\n  /** Returns the element where overlays should portal. Pass null to clear inherited context. */\n  getContainer?: (() => Element | null) | null;\n  children: JSX.Element;\n}\n\nexport interface PortalProviderContextValue {\n  getContainer?: () => Element | null;\n}\n\ninterface ModalContext {\n  parent: ModalContext | null;\n  modalCount: Accessor<number>;\n  addModal: () => void;\n  removeModal: () => void;\n}\n\nconst ModalContext = createContext<ModalContext | null>(null);\nconst PortalContext = createContext<PortalProviderContextValue>({});\n\n/**\n * Each ModalProvider tracks how many modals are open in its subtree. On mount, the modals\n * trigger `addModal` to increment the count, and trigger `removeModal` on unmount to decrement it.\n * This is done recursively so that all parent providers are incremented and decremented.\n * If the modal count is greater than zero, we add `aria-hidden` to this provider to hide its\n * subtree from screen readers. This is done using SolidJS context in order to account for things\n * like portals, which can cause the component tree and the DOM tree to differ significantly in structure.\n */\nexport const ModalProvider: ParentComponent<ModalProviderProps> = (props) => {\n  const parent = useContext(ModalContext);\n  const [modalCount, setModalCount] = createSignal(0);\n\n  const context: ModalContext = {\n    parent,\n    modalCount,\n    addModal() {\n      setModalCount((count) => count + 1);\n      if (parent) {\n        parent.addModal();\n      }\n    },\n    removeModal() {\n      setModalCount((count) => count - 1);\n      if (parent) {\n        parent.removeModal();\n      }\n    },\n  };\n\n  return <ModalContext.Provider value={context}>{props.children}</ModalContext.Provider>;\n};\n\n/**\n * Sets the portal container for overlays rendered by descendants.\n */\nexport const UNSAFE_PortalProvider: ParentComponent<PortalProviderProps> = (props) => {\n  const parent = useUNSAFE_PortalContext();\n\n  return (\n    <PortalContext.Provider\n      value={{\n        getContainer:\n          props.getContainer === null ? undefined : (props.getContainer ?? parent.getContainer),\n      }}\n    >\n      {props.children}\n    </PortalContext.Provider>\n  );\n};\n\n/**\n * Returns the portal container configuration inherited from the nearest provider.\n */\nexport function useUNSAFE_PortalContext(): PortalProviderContextValue {\n  return useContext(PortalContext) ?? {};\n}\n\nexport interface ModalProviderAria {\n  /** Props to be spread on the container element. */\n  modalProviderProps: {\n    \"aria-hidden\"?: true;\n  };\n}\n\n/**\n * Used to determine if the tree should be aria-hidden based on how many\n * modals are open.\n */\nexport function useModalProvider(): ModalProviderAria {\n  const context = useContext(ModalContext);\n  return {\n    modalProviderProps: {\n      get \"aria-hidden\"() {\n        return context && context.modalCount() > 0 ? true : undefined;\n      },\n    },\n  };\n}\n\n/**\n * Creates a root node that will be aria-hidden if there are other modals open.\n */\nconst OverlayContainerDOM: ParentComponent<ModalProviderProps> = (props) => {\n  const { modalProviderProps } = useModalProvider();\n  return (\n    <div data-overlay-container {...modalProviderProps}>\n      {props.children}\n    </div>\n  );\n};\n\n/**\n * An OverlayProvider acts as a container for the top-level application.\n * Any application that uses modal dialogs or other overlays should\n * be wrapped in a `<OverlayProvider>`. This is used to ensure that\n * the main content of the application is hidden from screen readers\n * if a modal or other overlay is opened. Only the top-most modal or\n * overlay should be accessible at once.\n */\nexport const OverlayProvider: ParentComponent<ModalProviderProps> = (props) => {\n  return (\n    <ModalProvider>\n      <OverlayContainerDOM>{props.children}</OverlayContainerDOM>\n    </ModalProvider>\n  );\n};\n\nexport interface OverlayContainerProps extends ModalProviderProps {\n  /**\n   * The container element in which the overlay portal will be placed.\n   * @default document.body\n   */\n  portalContainer?: Element;\n}\n\n/**\n * A container for overlays like modals and popovers. Renders the overlay\n * into a Portal which is placed at the end of the document body.\n * Also ensures that the overlay is hidden from screen readers if a\n * nested modal is opened. Only the top-most modal or overlay should\n * be accessible at once.\n */\nexport const OverlayContainer: ParentComponent<OverlayContainerProps> = (props) => {\n  // Don't render portal on server\n  if (isServer) {\n    return null;\n  }\n\n  const portalContext = useUNSAFE_PortalContext();\n  const portalContainer = () =>\n    props.portalContainer ?? portalContext.getContainer?.() ?? document.body;\n\n  createEffect(() => {\n    const container = portalContainer();\n    if (container?.closest(\"[data-overlay-container]\")) {\n      throw new Error(\n        \"An OverlayContainer must not be inside another container. Please change the portalContainer prop.\",\n      );\n    }\n  });\n\n  return (\n    <Portal mount={portalContainer()}>\n      <OverlayProvider>{props.children}</OverlayProvider>\n    </Portal>\n  );\n};\n\nexport interface AriaModalOptions {\n  /** Whether the modal is disabled. */\n  isDisabled?: boolean;\n}\n\nexport interface ModalAria {\n  /** Props for the modal content element. */\n  modalProps: {\n    \"data-ismodal\": boolean;\n  };\n}\n\n/**\n * Hides content outside the current `<OverlayContainer>` from screen readers\n * on mount and restores it on unmount. Typically used by modal dialogs and\n * other types of overlays to ensure that only the top-most modal is\n * accessible at once.\n */\nexport function createModal(options?: AriaModalOptions): ModalAria {\n  // Add aria-hidden to all parent providers on mount, and restore on unmount.\n  const context = useContext(ModalContext);\n\n  if (!context) {\n    throw new Error(\"Modal is not contained within a provider\");\n  }\n\n  createEffect(() => {\n    if (options?.isDisabled || !context.parent) {\n      return;\n    }\n\n    // The immediate context is from the provider containing this modal, so we only\n    // want to trigger aria-hidden on its parents not on the modal provider itself.\n    context.parent.addModal();\n\n    onCleanup(() => {\n      if (context.parent) {\n        context.parent.removeModal();\n      }\n    });\n  });\n\n  return {\n    modalProps: {\n      \"data-ismodal\": !options?.isDisabled,\n    },\n  };\n}\n"],"mappings":"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"}

package/dist/_chunk/overlays.jsx

@@ -0,0 +1,162 @@
+import { i as access } from "./env.jsx";
+import { createId } from "../ssr/index.jsx";
+import { createContext, createEffect, createSignal, onCleanup, useContext } from "solid-js";
+import { Portal, isServer } from "solid-js/web";
+//#region src/overlays/createOverlayTrigger.ts
+/**
+* Handles the behavior and accessibility for an overlay trigger.
+* Based on @react-aria/overlays useOverlayTrigger.
+*/
+const onCloseMap = /* @__PURE__ */ new WeakMap();
+/**
+* Handles the behavior and accessibility for an overlay trigger, e.g. a button
+* that opens a popover, menu, or other overlay that is positioned relative to the trigger.
+*/
+function createOverlayTrigger(props, state, ref) {
+	const propsAccessor = () => access(props);
+	const overlayId = createId();
+	createEffect(() => {
+		const element = ref?.();
+		if (element) onCloseMap.set(element, state.close);
+	});
+	const getAriaHasPopup = () => {
+		const type = propsAccessor().type;
+		if (type === "menu") return true;
+		else if (type === "listbox") return "listbox";
+	};
+	return {
+		triggerProps: {
+			get "aria-haspopup"() {
+				return getAriaHasPopup();
+			},
+			get "aria-expanded"() {
+				return state.isOpen();
+			},
+			get "aria-controls"() {
+				return state.isOpen() ? overlayId : void 0;
+			},
+			onPress: state.toggle
+		},
+		overlayProps: { id: overlayId }
+	};
+}
+//#endregion
+//#region src/overlays/createModal.tsx
+/**
+* Modal context and hooks for managing modal accessibility.
+* Based on @react-aria/overlays useModal.
+*/
+const ModalContext = createContext(null);
+const PortalContext = createContext({});
+/**
+* Each ModalProvider tracks how many modals are open in its subtree. On mount, the modals
+* trigger `addModal` to increment the count, and trigger `removeModal` on unmount to decrement it.
+* This is done recursively so that all parent providers are incremented and decremented.
+* If the modal count is greater than zero, we add `aria-hidden` to this provider to hide its
+* subtree from screen readers. This is done using SolidJS context in order to account for things
+* like portals, which can cause the component tree and the DOM tree to differ significantly in structure.
+*/
+const ModalProvider = (props) => {
+	const parent = useContext(ModalContext);
+	const [modalCount, setModalCount] = createSignal(0);
+	const context = {
+		parent,
+		modalCount,
+		addModal() {
+			setModalCount((count) => count + 1);
+			if (parent) parent.addModal();
+		},
+		removeModal() {
+			setModalCount((count) => count - 1);
+			if (parent) parent.removeModal();
+		}
+	};
+	return <ModalContext.Provider value={context}>{props.children}</ModalContext.Provider>;
+};
+/**
+* Sets the portal container for overlays rendered by descendants.
+*/
+const UNSAFE_PortalProvider = (props) => {
+	const parent = useUNSAFE_PortalContext();
+	return <PortalContext.Provider value={{ getContainer: props.getContainer === null ? void 0 : props.getContainer ?? parent.getContainer }}>
+      {props.children}
+    </PortalContext.Provider>;
+};
+/**
+* Returns the portal container configuration inherited from the nearest provider.
+*/
+function useUNSAFE_PortalContext() {
+	return useContext(PortalContext) ?? {};
+}
+/**
+* Used to determine if the tree should be aria-hidden based on how many
+* modals are open.
+*/
+function useModalProvider() {
+	const context = useContext(ModalContext);
+	return { modalProviderProps: { get "aria-hidden"() {
+		return context && context.modalCount() > 0 ? true : void 0;
+	} } };
+}
+/**
+* Creates a root node that will be aria-hidden if there are other modals open.
+*/
+const OverlayContainerDOM = (props) => {
+	const { modalProviderProps } = useModalProvider();
+	return <div data-overlay-container {...modalProviderProps}>
+      {props.children}
+    </div>;
+};
+/**
+* An OverlayProvider acts as a container for the top-level application.
+* Any application that uses modal dialogs or other overlays should
+* be wrapped in a `<OverlayProvider>`. This is used to ensure that
+* the main content of the application is hidden from screen readers
+* if a modal or other overlay is opened. Only the top-most modal or
+* overlay should be accessible at once.
+*/
+const OverlayProvider = (props) => {
+	return <ModalProvider>
+      <OverlayContainerDOM>{props.children}</OverlayContainerDOM>
+    </ModalProvider>;
+};
+/**
+* A container for overlays like modals and popovers. Renders the overlay
+* into a Portal which is placed at the end of the document body.
+* Also ensures that the overlay is hidden from screen readers if a
+* nested modal is opened. Only the top-most modal or overlay should
+* be accessible at once.
+*/
+const OverlayContainer = (props) => {
+	if (isServer) return null;
+	const portalContext = useUNSAFE_PortalContext();
+	const portalContainer = () => props.portalContainer ?? portalContext.getContainer?.() ?? document.body;
+	createEffect(() => {
+		if (portalContainer()?.closest("[data-overlay-container]")) throw new Error("An OverlayContainer must not be inside another container. Please change the portalContainer prop.");
+	});
+	return <Portal mount={portalContainer()}>
+      <OverlayProvider>{props.children}</OverlayProvider>
+    </Portal>;
+};
+/**
+* Hides content outside the current `<OverlayContainer>` from screen readers
+* on mount and restores it on unmount. Typically used by modal dialogs and
+* other types of overlays to ensure that only the top-most modal is
+* accessible at once.
+*/
+function createModal(options) {
+	const context = useContext(ModalContext);
+	if (!context) throw new Error("Modal is not contained within a provider");
+	createEffect(() => {
+		if (options?.isDisabled || !context.parent) return;
+		context.parent.addModal();
+		onCleanup(() => {
+			if (context.parent) context.parent.removeModal();
+		});
+	});
+	return { modalProps: { "data-ismodal": !options?.isDisabled } };
+}
+//#endregion
+export { createModal as a, createOverlayTrigger as c, UNSAFE_PortalProvider as i, onCloseMap as l, OverlayContainer as n, useModalProvider as o, OverlayProvider as r, useUNSAFE_PortalContext as s, ModalProvider as t };
+
+//# sourceMappingURL=overlays.jsx.map

package/dist/_chunk/overlays.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"overlays.jsx","names":[],"sources":["../../src/overlays/createOverlayTrigger.ts","../../src/overlays/createModal.tsx"],"sourcesContent":["/**\n * Handles the behavior and accessibility for an overlay trigger.\n * Based on @react-aria/overlays useOverlayTrigger.\n */\n\nimport { createEffect } from \"solid-js\";\nimport type { OverlayTriggerState } from \"@proyecto-viviana/solid-stately\";\nimport { createId } from \"../ssr\";\nimport { access, type MaybeAccessor } from \"../utils\";\n\nexport interface OverlayTriggerProps {\n  /** Type of overlay that is opened by the trigger. */\n  type: \"dialog\" | \"menu\" | \"listbox\" | \"tree\" | \"grid\";\n}\n\nexport interface OverlayTriggerAria {\n  /** Props for the trigger element. */\n  triggerProps: {\n    \"aria-haspopup\"?: boolean | \"listbox\";\n    \"aria-expanded\": boolean;\n    \"aria-controls\"?: string;\n    onPress: () => void;\n  };\n  /** Props for the overlay container element. */\n  overlayProps: {\n    id: string;\n  };\n}\n\n// Map for storing close functions, used by useCloseOnScroll\nexport const onCloseMap = new WeakMap<Element, () => void>();\n\n/**\n * Handles the behavior and accessibility for an overlay trigger, e.g. a button\n * that opens a popover, menu, or other overlay that is positioned relative to the trigger.\n */\nexport function createOverlayTrigger(\n  props: MaybeAccessor<OverlayTriggerProps>,\n  state: OverlayTriggerState,\n  ref?: () => Element | null,\n): OverlayTriggerAria {\n  const propsAccessor = () => access(props);\n  const overlayId = createId();\n\n  // Backward compatibility. Share state close function with useOverlayPosition so it can close on scroll\n  // without forcing users to pass onClose.\n  createEffect(() => {\n    const element = ref?.();\n    if (element) {\n      onCloseMap.set(element, state.close);\n    }\n  });\n\n  // Aria 1.1 supports multiple values for aria-haspopup other than just menus.\n  // https://www.w3.org/TR/wai-aria-1.1/#aria-haspopup\n  // However, we only add it for menus for now because screen readers often\n  // announce it as a menu even for other values.\n  const getAriaHasPopup = (): boolean | \"listbox\" | undefined => {\n    const type = propsAccessor().type;\n    if (type === \"menu\") {\n      return true;\n    } else if (type === \"listbox\") {\n      return \"listbox\";\n    }\n    return undefined;\n  };\n\n  return {\n    triggerProps: {\n      get \"aria-haspopup\"() {\n        return getAriaHasPopup();\n      },\n      get \"aria-expanded\"() {\n        return state.isOpen();\n      },\n      get \"aria-controls\"() {\n        return state.isOpen() ? overlayId : undefined;\n      },\n      onPress: state.toggle,\n    },\n    overlayProps: {\n      id: overlayId,\n    },\n  };\n}\n","/**\n * Modal context and hooks for managing modal accessibility.\n * Based on @react-aria/overlays useModal.\n */\n\nimport {\n  createContext,\n  createSignal,\n  useContext,\n  createEffect,\n  onCleanup,\n  type JSX,\n  type Accessor,\n  type ParentComponent,\n} from \"solid-js\";\nimport { Portal } from \"solid-js/web\";\nimport { isServer } from \"solid-js/web\";\n\nexport interface ModalProviderProps {\n  children: JSX.Element;\n}\n\nexport interface PortalProviderProps {\n  /** Returns the element where overlays should portal. Pass null to clear inherited context. */\n  getContainer?: (() => Element | null) | null;\n  children: JSX.Element;\n}\n\nexport interface PortalProviderContextValue {\n  getContainer?: () => Element | null;\n}\n\ninterface ModalContext {\n  parent: ModalContext | null;\n  modalCount: Accessor<number>;\n  addModal: () => void;\n  removeModal: () => void;\n}\n\nconst ModalContext = createContext<ModalContext | null>(null);\nconst PortalContext = createContext<PortalProviderContextValue>({});\n\n/**\n * Each ModalProvider tracks how many modals are open in its subtree. On mount, the modals\n * trigger `addModal` to increment the count, and trigger `removeModal` on unmount to decrement it.\n * This is done recursively so that all parent providers are incremented and decremented.\n * If the modal count is greater than zero, we add `aria-hidden` to this provider to hide its\n * subtree from screen readers. This is done using SolidJS context in order to account for things\n * like portals, which can cause the component tree and the DOM tree to differ significantly in structure.\n */\nexport const ModalProvider: ParentComponent<ModalProviderProps> = (props) => {\n  const parent = useContext(ModalContext);\n  const [modalCount, setModalCount] = createSignal(0);\n\n  const context: ModalContext = {\n    parent,\n    modalCount,\n    addModal() {\n      setModalCount((count) => count + 1);\n      if (parent) {\n        parent.addModal();\n      }\n    },\n    removeModal() {\n      setModalCount((count) => count - 1);\n      if (parent) {\n        parent.removeModal();\n      }\n    },\n  };\n\n  return <ModalContext.Provider value={context}>{props.children}</ModalContext.Provider>;\n};\n\n/**\n * Sets the portal container for overlays rendered by descendants.\n */\nexport const UNSAFE_PortalProvider: ParentComponent<PortalProviderProps> = (props) => {\n  const parent = useUNSAFE_PortalContext();\n\n  return (\n    <PortalContext.Provider\n      value={{\n        getContainer:\n          props.getContainer === null ? undefined : (props.getContainer ?? parent.getContainer),\n      }}\n    >\n      {props.children}\n    </PortalContext.Provider>\n  );\n};\n\n/**\n * Returns the portal container configuration inherited from the nearest provider.\n */\nexport function useUNSAFE_PortalContext(): PortalProviderContextValue {\n  return useContext(PortalContext) ?? {};\n}\n\nexport interface ModalProviderAria {\n  /** Props to be spread on the container element. */\n  modalProviderProps: {\n    \"aria-hidden\"?: true;\n  };\n}\n\n/**\n * Used to determine if the tree should be aria-hidden based on how many\n * modals are open.\n */\nexport function useModalProvider(): ModalProviderAria {\n  const context = useContext(ModalContext);\n  return {\n    modalProviderProps: {\n      get \"aria-hidden\"() {\n        return context && context.modalCount() > 0 ? true : undefined;\n      },\n    },\n  };\n}\n\n/**\n * Creates a root node that will be aria-hidden if there are other modals open.\n */\nconst OverlayContainerDOM: ParentComponent<ModalProviderProps> = (props) => {\n  const { modalProviderProps } = useModalProvider();\n  return (\n    <div data-overlay-container {...modalProviderProps}>\n      {props.children}\n    </div>\n  );\n};\n\n/**\n * An OverlayProvider acts as a container for the top-level application.\n * Any application that uses modal dialogs or other overlays should\n * be wrapped in a `<OverlayProvider>`. This is used to ensure that\n * the main content of the application is hidden from screen readers\n * if a modal or other overlay is opened. Only the top-most modal or\n * overlay should be accessible at once.\n */\nexport const OverlayProvider: ParentComponent<ModalProviderProps> = (props) => {\n  return (\n    <ModalProvider>\n      <OverlayContainerDOM>{props.children}</OverlayContainerDOM>\n    </ModalProvider>\n  );\n};\n\nexport interface OverlayContainerProps extends ModalProviderProps {\n  /**\n   * The container element in which the overlay portal will be placed.\n   * @default document.body\n   */\n  portalContainer?: Element;\n}\n\n/**\n * A container for overlays like modals and popovers. Renders the overlay\n * into a Portal which is placed at the end of the document body.\n * Also ensures that the overlay is hidden from screen readers if a\n * nested modal is opened. Only the top-most modal or overlay should\n * be accessible at once.\n */\nexport const OverlayContainer: ParentComponent<OverlayContainerProps> = (props) => {\n  // Don't render portal on server\n  if (isServer) {\n    return null;\n  }\n\n  const portalContext = useUNSAFE_PortalContext();\n  const portalContainer = () =>\n    props.portalContainer ?? portalContext.getContainer?.() ?? document.body;\n\n  createEffect(() => {\n    const container = portalContainer();\n    if (container?.closest(\"[data-overlay-container]\")) {\n      throw new Error(\n        \"An OverlayContainer must not be inside another container. Please change the portalContainer prop.\",\n      );\n    }\n  });\n\n  return (\n    <Portal mount={portalContainer()}>\n      <OverlayProvider>{props.children}</OverlayProvider>\n    </Portal>\n  );\n};\n\nexport interface AriaModalOptions {\n  /** Whether the modal is disabled. */\n  isDisabled?: boolean;\n}\n\nexport interface ModalAria {\n  /** Props for the modal content element. */\n  modalProps: {\n    \"data-ismodal\": boolean;\n  };\n}\n\n/**\n * Hides content outside the current `<OverlayContainer>` from screen readers\n * on mount and restores it on unmount. Typically used by modal dialogs and\n * other types of overlays to ensure that only the top-most modal is\n * accessible at once.\n */\nexport function createModal(options?: AriaModalOptions): ModalAria {\n  // Add aria-hidden to all parent providers on mount, and restore on unmount.\n  const context = useContext(ModalContext);\n\n  if (!context) {\n    throw new Error(\"Modal is not contained within a provider\");\n  }\n\n  createEffect(() => {\n    if (options?.isDisabled || !context.parent) {\n      return;\n    }\n\n    // The immediate context is from the provider containing this modal, so we only\n    // want to trigger aria-hidden on its parents not on the modal provider itself.\n    context.parent.addModal();\n\n    onCleanup(() => {\n      if (context.parent) {\n        context.parent.removeModal();\n      }\n    });\n  });\n\n  return {\n    modalProps: {\n      \"data-ismodal\": !options?.isDisabled,\n    },\n  };\n}\n"],"mappings":"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"}