@proyecto-viviana/solidaria 0.3.0 → 0.4.0

package/dist/_chunk/disclosure.jsx

@@ -0,0 +1,185 @@
+import { t as createPress } from "./createPress.jsx";
+import { o as mergeProps } from "./env.jsx";
+import { canUseDOM, createId } from "../ssr/index.jsx";
+import { createEffect, onCleanup } from "solid-js";
+//#region src/disclosure/createDisclosure.ts
+/**
+* createDisclosure hook for Solidaria
+*
+* Provides the behavior and accessibility implementation for a disclosure component.
+*
+* Port of @react-aria/disclosure useDisclosure.
+*/
+function getDisclosurePanelHiddenAttribute(isExpanded, hasDOM = canUseDOM) {
+	return hasDOM ? void 0 : !isExpanded || void 0;
+}
+/**
+* Provides the behavior and accessibility implementation for a disclosure component.
+*
+* A disclosure is a widget that can be toggled to show or hide content.
+* It consists of a trigger button and a panel.
+*
+* @example
+* ```tsx
+* import { createDisclosure } from 'solidaria';
+* import { createDisclosureState } from 'solid-stately';
+*
+* function Disclosure(props) {
+*   const state = createDisclosureState(props);
+*   let panelRef;
+*   const { buttonProps, panelProps } = createDisclosure(
+*     { get isDisabled() { return props.isDisabled; } },
+*     state,
+*     () => panelRef
+*   );
+*
+*   return (
+*     <div>
+*       <button {...buttonProps}>Toggle</button>
+*       <div {...panelProps} ref={panelRef}>
+*         {props.children}
+*       </div>
+*     </div>
+*   );
+* }
+* ```
+*/
+function createDisclosure(props, state, panelRef) {
+	const getProps = typeof props === "function" ? props : () => props;
+	const triggerId = createId();
+	const panelId = createId();
+	let raf = null;
+	let isExpandedRef = null;
+	const requestFrame = (callback) => {
+		if (typeof requestAnimationFrame === "function") return requestAnimationFrame(callback);
+		return window.setTimeout(() => callback(performance.now()), 16);
+	};
+	const cancelFrame = (id) => {
+		if (typeof cancelAnimationFrame === "function") cancelAnimationFrame(id);
+		else window.clearTimeout(id);
+	};
+	const cancelPendingRaf = () => {
+		if (raf != null && canUseDOM) {
+			cancelFrame(raf);
+			raf = null;
+		}
+	};
+	const setPanelSize = (panel, width, height) => {
+		panel.style.setProperty("--disclosure-panel-width", width);
+		panel.style.setProperty("--disclosure-panel-height", height);
+	};
+	const getPanelAnimations = (panel) => {
+		return typeof panel.getAnimations === "function" ? panel.getAnimations() : [];
+	};
+	createEffect(() => {
+		if (!canUseDOM) return;
+		const panel = panelRef();
+		if (!panel) return;
+		const handleBeforeMatch = () => {
+			cancelPendingRaf();
+			raf = requestFrame(() => {
+				if (panelRef() === panel) panel.setAttribute("hidden", "until-found");
+				raf = null;
+			});
+			state.toggle();
+		};
+		panel.addEventListener("beforematch", handleBeforeMatch);
+		onCleanup(() => {
+			panel.removeEventListener("beforematch", handleBeforeMatch);
+		});
+	});
+	createEffect(() => {
+		if (!canUseDOM) return;
+		const panel = panelRef();
+		if (!panel) return;
+		const isExpanded = state.isExpanded();
+		cancelPendingRaf();
+		if (isExpandedRef === null || typeof panel.getAnimations !== "function") if (isExpanded) {
+			panel.removeAttribute("hidden");
+			setPanelSize(panel, "auto", "auto");
+		} else {
+			panel.setAttribute("hidden", "until-found");
+			setPanelSize(panel, "0px", "0px");
+		}
+		else if (isExpanded !== isExpandedRef) if (isExpanded) {
+			panel.removeAttribute("hidden");
+			setPanelSize(panel, `${panel.scrollWidth}px`, `${panel.scrollHeight}px`);
+			Promise.all(getPanelAnimations(panel).map((animation) => animation.finished)).then(() => {
+				if (panelRef() === panel && state.isExpanded()) setPanelSize(panel, "auto", "auto");
+			}).catch(() => {});
+		} else {
+			setPanelSize(panel, `${panel.scrollWidth}px`, `${panel.scrollHeight}px`);
+			window.getComputedStyle(panel).height;
+			setPanelSize(panel, "0px", "0px");
+			Promise.all(getPanelAnimations(panel).map((animation) => animation.finished)).then(() => {
+				if (panelRef() === panel && !state.isExpanded()) panel.setAttribute("hidden", "until-found");
+			}).catch(() => {});
+		}
+		isExpandedRef = isExpanded;
+	});
+	onCleanup(cancelPendingRaf);
+	const { pressProps, isPressed } = createPress({
+		get isDisabled() {
+			return getProps().isDisabled;
+		},
+		onPressStart(event) {
+			if (event.pointerType === "keyboard") state.toggle();
+		},
+		onPress(event) {
+			if (event.pointerType !== "keyboard") state.toggle();
+		}
+	});
+	return {
+		isPressed,
+		get buttonProps() {
+			const p = getProps();
+			return mergeProps(pressProps, {
+				id: triggerId,
+				type: "button",
+				"aria-expanded": state.isExpanded(),
+				"aria-controls": panelId,
+				disabled: p.isDisabled
+			});
+		},
+		get panelProps() {
+			return {
+				id: panelId,
+				role: "group",
+				"aria-labelledby": triggerId,
+				"aria-hidden": !state.isExpanded(),
+				hidden: getDisclosurePanelHiddenAttribute(state.isExpanded())
+			};
+		}
+	};
+}
+//#endregion
+//#region src/disclosure/createDisclosureGroup.ts
+/**
+* Provides accessibility implementation for a group of disclosures (accordion).
+*
+* @example
+* ```tsx
+* import { createDisclosureGroup } from 'solidaria';
+* import { createDisclosureGroupState } from 'solid-stately';
+*
+* function Accordion(props) {
+*   const state = createDisclosureGroupState(props);
+*   const { groupProps } = createDisclosureGroup(props, state);
+*
+*   return (
+*     <div {...groupProps}>
+*       {props.children}
+*     </div>
+*   );
+* }
+* ```
+*/
+function createDisclosureGroup(_props, _state) {
+	return { get groupProps() {
+		return {};
+	} };
+}
+//#endregion
+export { createDisclosure as n, createDisclosureGroup as t };
+
+//# sourceMappingURL=disclosure.jsx.map

package/dist/_chunk/disclosure.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"disclosure.jsx","names":[],"sources":["../../src/disclosure/createDisclosure.ts","../../src/disclosure/createDisclosureGroup.ts"],"sourcesContent":["/**\n * createDisclosure hook for Solidaria\n *\n * Provides the behavior and accessibility implementation for a disclosure component.\n *\n * Port of @react-aria/disclosure useDisclosure.\n */\n\nimport { type JSX, createEffect, onCleanup } from \"solid-js\";\nimport { type DisclosureState } from \"@proyecto-viviana/solid-stately\";\nimport { createId, canUseDOM } from \"../ssr\";\nimport { createPress } from \"../interactions/createPress\";\nimport { mergeProps } from \"../utils/mergeProps\";\n\nexport interface AriaDisclosureProps {\n  /** Whether the disclosure is disabled. */\n  isDisabled?: boolean;\n}\n\nexport interface DisclosureAria {\n  /** Props for the disclosure trigger button. */\n  buttonProps: JSX.ButtonHTMLAttributes<HTMLButtonElement>;\n  /** Props for the disclosure panel. */\n  panelProps: JSX.HTMLAttributes<HTMLElement>;\n  /** Whether the disclosure trigger is currently pressed. */\n  isPressed: () => boolean;\n}\n\nexport function getDisclosurePanelHiddenAttribute(\n  isExpanded: boolean,\n  hasDOM = canUseDOM,\n): true | undefined {\n  return hasDOM ? undefined : !isExpanded || undefined;\n}\n\n/**\n * Provides the behavior and accessibility implementation for a disclosure component.\n *\n * A disclosure is a widget that can be toggled to show or hide content.\n * It consists of a trigger button and a panel.\n *\n * @example\n * ```tsx\n * import { createDisclosure } from 'solidaria';\n * import { createDisclosureState } from 'solid-stately';\n *\n * function Disclosure(props) {\n *   const state = createDisclosureState(props);\n *   let panelRef;\n *   const { buttonProps, panelProps } = createDisclosure(\n *     { get isDisabled() { return props.isDisabled; } },\n *     state,\n *     () => panelRef\n *   );\n *\n *   return (\n *     <div>\n *       <button {...buttonProps}>Toggle</button>\n *       <div {...panelProps} ref={panelRef}>\n *         {props.children}\n *       </div>\n *     </div>\n *   );\n * }\n * ```\n */\nexport function createDisclosure(\n  props: AriaDisclosureProps | (() => AriaDisclosureProps),\n  state: DisclosureState,\n  panelRef: () => HTMLElement | null,\n): DisclosureAria {\n  // Handle both plain object and accessor function patterns\n  const getProps = typeof props === \"function\" ? props : () => props;\n\n  const triggerId = createId();\n  const panelId = createId();\n\n  let raf: number | null = null;\n  let isExpandedRef: boolean | null = null;\n\n  const requestFrame = (callback: FrameRequestCallback): number => {\n    if (typeof requestAnimationFrame === \"function\") {\n      return requestAnimationFrame(callback);\n    }\n\n    return window.setTimeout(() => callback(performance.now()), 16);\n  };\n\n  const cancelFrame = (id: number) => {\n    if (typeof cancelAnimationFrame === \"function\") {\n      cancelAnimationFrame(id);\n    } else {\n      window.clearTimeout(id);\n    }\n  };\n\n  const cancelPendingRaf = () => {\n    if (raf != null && canUseDOM) {\n      cancelFrame(raf);\n      raf = null;\n    }\n  };\n\n  const setPanelSize = (panel: HTMLElement, width: string, height: string) => {\n    panel.style.setProperty(\"--disclosure-panel-width\", width);\n    panel.style.setProperty(\"--disclosure-panel-height\", height);\n  };\n\n  const getPanelAnimations = (panel: HTMLElement): Animation[] => {\n    return typeof panel.getAnimations === \"function\" ? panel.getAnimations() : [];\n  };\n\n  // Handle browser find-in-page reveal for collapsed panels.\n  createEffect(() => {\n    if (!canUseDOM) return;\n\n    const panel = panelRef();\n    if (!panel) return;\n\n    const handleBeforeMatch = () => {\n      cancelPendingRaf();\n      raf = requestFrame(() => {\n        if (panelRef() === panel) {\n          panel.setAttribute(\"hidden\", \"until-found\");\n        }\n        raf = null;\n      });\n\n      state.toggle();\n    };\n\n    panel.addEventListener(\"beforematch\", handleBeforeMatch);\n    onCleanup(() => {\n      panel.removeEventListener(\"beforematch\", handleBeforeMatch);\n    });\n  });\n\n  // Handle panel visibility and animation sizing.\n  createEffect(() => {\n    if (!canUseDOM) return;\n\n    const panel = panelRef();\n    if (!panel) return;\n\n    const isExpanded = state.isExpanded();\n    cancelPendingRaf();\n\n    if (isExpandedRef === null || typeof panel.getAnimations !== \"function\") {\n      if (isExpanded) {\n        panel.removeAttribute(\"hidden\");\n        setPanelSize(panel, \"auto\", \"auto\");\n      } else {\n        panel.setAttribute(\"hidden\", \"until-found\");\n        setPanelSize(panel, \"0px\", \"0px\");\n      }\n    } else if (isExpanded !== isExpandedRef) {\n      if (isExpanded) {\n        panel.removeAttribute(\"hidden\");\n        setPanelSize(panel, `${panel.scrollWidth}px`, `${panel.scrollHeight}px`);\n\n        Promise.all(getPanelAnimations(panel).map((animation) => animation.finished))\n          .then(() => {\n            if (panelRef() === panel && state.isExpanded()) {\n              setPanelSize(panel, \"auto\", \"auto\");\n            }\n          })\n          .catch(() => {});\n      } else {\n        setPanelSize(panel, `${panel.scrollWidth}px`, `${panel.scrollHeight}px`);\n\n        // Force style recalculation before animating to zero.\n        window.getComputedStyle(panel).height;\n\n        setPanelSize(panel, \"0px\", \"0px\");\n\n        Promise.all(getPanelAnimations(panel).map((animation) => animation.finished))\n          .then(() => {\n            if (panelRef() === panel && !state.isExpanded()) {\n              panel.setAttribute(\"hidden\", \"until-found\");\n            }\n          })\n          .catch(() => {});\n      }\n    }\n\n    isExpandedRef = isExpanded;\n  });\n\n  onCleanup(cancelPendingRaf);\n\n  // Use createPress for proper interaction handling (matches Select/Menu pattern)\n  const { pressProps, isPressed } = createPress({\n    get isDisabled() {\n      return getProps().isDisabled;\n    },\n    onPressStart(event) {\n      if (event.pointerType === \"keyboard\") {\n        state.toggle();\n      }\n    },\n    onPress(event) {\n      if (event.pointerType !== \"keyboard\") {\n        state.toggle();\n      }\n    },\n  });\n\n  return {\n    isPressed,\n    // Button props - merge with pressProps for consistent interaction handling\n    // Using getter (not createMemo) to match createSelect pattern\n    get buttonProps(): JSX.ButtonHTMLAttributes<HTMLButtonElement> {\n      const p = getProps();\n      return mergeProps(\n        pressProps as Record<string, unknown>,\n        {\n          id: triggerId,\n          type: \"button\",\n          \"aria-expanded\": state.isExpanded(),\n          \"aria-controls\": panelId,\n          disabled: p.isDisabled,\n        } as Record<string, unknown>,\n      ) as JSX.ButtonHTMLAttributes<HTMLButtonElement>;\n    },\n    // Panel props\n    get panelProps(): JSX.HTMLAttributes<HTMLElement> {\n      return {\n        id: panelId,\n        role: \"group\",\n        \"aria-labelledby\": triggerId,\n        \"aria-hidden\": !state.isExpanded(),\n        hidden: getDisclosurePanelHiddenAttribute(state.isExpanded()),\n      };\n    },\n  };\n}\n","/**\n * createDisclosureGroup hook for Solidaria\n *\n * Provides accessibility implementation for a group of disclosures (accordion).\n *\n * Port of @react-aria/disclosure.\n */\n\nimport { type JSX } from \"solid-js\";\nimport { type DisclosureGroupState } from \"@proyecto-viviana/solid-stately\";\nimport { type MaybeAccessor } from \"../utils/reactivity\";\n\nexport interface AriaDisclosureGroupProps {\n  /** Whether the disclosure group is disabled. */\n  isDisabled?: boolean;\n}\n\nexport interface DisclosureGroupAria {\n  /** Props for the disclosure group container. */\n  groupProps: JSX.HTMLAttributes<HTMLElement>;\n}\n\n/**\n * Provides accessibility implementation for a group of disclosures (accordion).\n *\n * @example\n * ```tsx\n * import { createDisclosureGroup } from 'solidaria';\n * import { createDisclosureGroupState } from 'solid-stately';\n *\n * function Accordion(props) {\n *   const state = createDisclosureGroupState(props);\n *   const { groupProps } = createDisclosureGroup(props, state);\n *\n *   return (\n *     <div {...groupProps}>\n *       {props.children}\n *     </div>\n *   );\n * }\n * ```\n */\nexport function createDisclosureGroup(\n  _props: MaybeAccessor<AriaDisclosureGroupProps>,\n  _state: DisclosureGroupState,\n): DisclosureGroupAria {\n  return {\n    get groupProps() {\n      return {};\n    },\n  };\n}\n"],"mappings":"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"}