@arun-dev/headless 4.12.0 → 4.14.0

package/dist/toggle-group/index.cjs

@@ -0,0 +1,292 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/toggle-group/index.ts
+var toggle_group_exports = {};
+__export(toggle_group_exports, {
+  ToggleGroup: () => ToggleGroup
+});
+module.exports = __toCommonJS(toggle_group_exports);
+
+// src/toggle-group/ToggleGroup.tsx
+var import_react5 = require("react");
+
+// src/core/useRender.ts
+var import_react = require("react");
+
+// src/core/mergeProps.ts
+function isEventHandler(key) {
+  return key.length > 2 && key.startsWith("on") && key[2] === key[2]?.toUpperCase();
+}
+function mergeRefs(...refs) {
+  return (node) => {
+    const cleanups = refs.map((ref) => {
+      if (typeof ref === "function") {
+        const result = ref(node);
+        return typeof result === "function" ? result : () => ref(null);
+      }
+      if (ref && typeof ref === "object") {
+        ref.current = node;
+        return () => {
+          ref.current = null;
+        };
+      }
+      return void 0;
+    });
+    return () => {
+      cleanups.forEach((cleanup) => {
+        if (typeof cleanup === "function") cleanup();
+      });
+    };
+  };
+}
+function isSyntheticEvent(event) {
+  return typeof event === "object" && event !== null && "nativeEvent" in event;
+}
+function makeEventPreventable(event) {
+  if (Object.prototype.hasOwnProperty.call(event, "preventComponentHandler")) return;
+  const target = event;
+  target.preventComponentHandler = () => {
+    target.componentHandlerPrevented = true;
+  };
+}
+function isComponentHandlerPrevented(event) {
+  return typeof event === "object" && event !== null && event.componentHandlerPrevented === true;
+}
+function chainHandlers(earlier, value) {
+  return (...args) => {
+    const event = args[0];
+    if (isSyntheticEvent(event)) makeEventPreventable(event);
+    value(...args);
+    if (isComponentHandlerPrevented(event)) return;
+    earlier(...args);
+  };
+}
+function mergeProps(...objects) {
+  const merged = {};
+  for (const props of objects) {
+    if (!props) continue;
+    for (const key of Object.keys(props)) {
+      const value = props[key];
+      if (value === void 0) continue;
+      if (isEventHandler(key) && typeof value === "function") {
+        const earlier = merged[key];
+        merged[key] = typeof earlier === "function" ? chainHandlers(earlier, value) : value;
+      } else if (key === "className") {
+        merged.className = merged.className ? `${String(merged.className)} ${String(value)}` : value;
+      } else if (key === "style") {
+        merged.style = { ...merged.style, ...value };
+      } else if (key === "ref") {
+        merged.ref = merged.ref ? mergeRefs(merged.ref, value) : value;
+      } else {
+        merged[key] = value;
+      }
+    }
+  }
+  return merged;
+}
+
+// src/core/useRender.ts
+function useRender({
+  render,
+  defaultTagName,
+  props,
+  consumerProps
+}) {
+  const merged = mergeProps(props, consumerProps);
+  if ((0, import_react.isValidElement)(render)) {
+    return (0, import_react.cloneElement)(render, mergeProps(merged, render.props));
+  }
+  return (0, import_react.createElement)(defaultTagName, merged);
+}
+
+// src/core/useControlled.ts
+var import_react2 = require("react");
+function useControlled({
+  controlled,
+  default: defaultValue,
+  name = "Component",
+  state = "value"
+}) {
+  const { current: isControlled } = (0, import_react2.useRef)(controlled !== void 0);
+  const [uncontrolled, setUncontrolled] = (0, import_react2.useState)(defaultValue);
+  const defaultRef = (0, import_react2.useRef)(defaultValue);
+  const value = isControlled ? controlled : uncontrolled;
+  if (process.env.NODE_ENV !== "production") {
+    if (isControlled !== (controlled !== void 0)) {
+      console.error(
+        `${name}: cannot switch between controlled and uncontrolled \`${state}\`. Decide which one this component is for the whole of its life.`
+      );
+    }
+    if (!isControlled && defaultRef.current !== defaultValue) {
+      console.error(
+        `${name}: cannot change the default \`${state}\` after mount. It is only read once, so later changes are silently ignored.`
+      );
+    }
+  }
+  const setValue = (0, import_react2.useCallback)(
+    (next) => {
+      if (!isControlled) setUncontrolled(next);
+    },
+    [isControlled]
+  );
+  return [value, setValue];
+}
+
+// src/core/rovingGroup.ts
+var import_react3 = require("react");
+
+// src/core/rovingFocus.ts
+function byDocumentOrder(a, b) {
+  const x = a.ref.current;
+  const y = b.ref.current;
+  if (!x || !y) return 0;
+  return x.compareDocumentPosition(y) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;
+}
+function rovingIndex(key, {
+  count,
+  current,
+  orientation,
+  rtl
+}) {
+  if (count === 0) return null;
+  const [prevKey, nextKey] = orientation === "vertical" ? ["ArrowUp", "ArrowDown"] : rtl ? ["ArrowRight", "ArrowLeft"] : ["ArrowLeft", "ArrowRight"];
+  switch (key) {
+    case nextKey:
+      return current < 0 ? 0 : (current + 1) % count;
+    case prevKey:
+      return current < 0 ? count - 1 : (current - 1 + count) % count;
+    case "Home":
+      return 0;
+    case "End":
+      return count - 1;
+    default:
+      return null;
+  }
+}
+
+// src/core/rovingGroup.ts
+var RovingGroupContext = (0, import_react3.createContext)(null);
+function useRovingGroupContext() {
+  return (0, import_react3.useContext)(RovingGroupContext);
+}
+function keyBelongsToField(event, orientation) {
+  const target = event.target;
+  if (!(target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement)) return false;
+  if (target instanceof HTMLInputElement && !/^(text|search|url|tel|email|password|number)$/.test(target.type)) {
+    return false;
+  }
+  const { key } = event;
+  const along = orientation === "horizontal" ? ["ArrowLeft", "ArrowRight", "Home", "End"] : [];
+  if (!along.includes(key)) return false;
+  const start = target.selectionStart ?? 0;
+  const end = target.selectionEnd ?? 0;
+  const atStart = start === 0 && end === 0;
+  const atEnd = start === target.value.length && end === target.value.length;
+  const rtl = getComputedStyle(target).direction === "rtl";
+  const towardStart = key === (rtl ? "ArrowRight" : "ArrowLeft") || key === "Home";
+  return towardStart ? !atStart : !atEnd;
+}
+function useRovingGroup({ orientation }) {
+  const [items, setItems] = (0, import_react3.useState)([]);
+  const register = (0, import_react3.useCallback)((item) => {
+    setItems((current) => [...current, item].sort(byDocumentOrder));
+    return () => setItems((current) => current.filter((i) => i !== item));
+  }, []);
+  const [chosen, setTabStop] = (0, import_react3.useState)(null);
+  const enabled = items.filter((item) => !item.disabled);
+  const tabStop = (
+    // Matched by element: an item re-registers when its props change.
+    chosen && enabled.find((item) => item.ref === chosen.ref) || enabled.find((item) => item.selected) || enabled[0] || null
+  );
+  const onKeyDown = (0, import_react3.useCallback)(
+    (event) => {
+      if (event.defaultPrevented || keyBelongsToField(event, orientation)) return;
+      const current = enabled.findIndex((item2) => item2.ref.current?.contains(event.target));
+      const rtl = getComputedStyle(event.currentTarget).direction === "rtl";
+      const next = rovingIndex(event.key, { count: enabled.length, current, orientation, rtl });
+      if (next === null) return;
+      const item = enabled[next];
+      if (!item) return;
+      event.preventDefault();
+      item.ref.current?.focus();
+      setTabStop(item);
+    },
+    [enabled, orientation]
+  );
+  const context = (0, import_react3.useMemo)(() => ({ tabStop, register, setTabStop }), [tabStop, register]);
+  return { context, onKeyDown };
+}
+
+// src/toggle-group/ToggleGroupContext.ts
+var import_react4 = require("react");
+var ToggleGroupContext = (0, import_react4.createContext)(null);
+
+// src/toggle-group/ToggleGroup.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function ToggleGroup({
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  multiple = false,
+  disabled = false,
+  orientation = "horizontal",
+  className,
+  children,
+  render,
+  ...rest
+}) {
+  const [value, setValueState] = useControlled({
+    controlled: valueProp,
+    default: defaultValue ?? [],
+    name: "ToggleGroup",
+    state: "value"
+  });
+  const toggle = (0, import_react5.useCallback)(
+    (item) => {
+      const pressed = value.includes(item);
+      const next = multiple ? pressed ? value.filter((v) => v !== item) : [...value, item] : pressed ? [] : [item];
+      setValueState(next);
+      onValueChange?.(next);
+    },
+    [value, multiple, setValueState, onValueChange]
+  );
+  const outer = useRovingGroupContext();
+  const roving = useRovingGroup({ orientation });
+  const context = (0, import_react5.useMemo)(() => ({ value, disabled, toggle }), [value, disabled, toggle]);
+  const element = useRender({
+    render,
+    defaultTagName: "div",
+    props: {
+      role: "group",
+      "data-orientation": orientation,
+      "data-disabled": disabled ? "" : void 0,
+      className,
+      children,
+      // In a Toolbar, the Toolbar moves focus.
+      onKeyDown: outer ? void 0 : roving.onKeyDown
+    },
+    consumerProps: rest
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToggleGroupContext.Provider, { value: context, children: outer ? element : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RovingGroupContext.Provider, { value: roving.context, children: element }) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ToggleGroup
+});

package/dist/toggle-group/index.d.cts

@@ -0,0 +1,31 @@
+import * as react from 'react';
+import { ReactElement, Ref, ComponentPropsWithRef } from 'react';
+import { O as Orientation } from '../rovingFocus-BZB3yicE.cjs';
+
+type ToggleGroupOwnProps = {
+    /** Controlled: the pressed Toggles' values. Provide `onValueChange` alongside it. */
+    value?: readonly string[];
+    /** Initial value when uncontrolled. Read once, at mount. */
+    defaultValue?: readonly string[];
+    onValueChange?: (value: string[]) => void;
+    /** Lets more than one Toggle be pressed. Without it, pressing one releases the others. */
+    multiple?: boolean;
+    /** Disables every Toggle in it. */
+    disabled?: boolean;
+    /** Which arrow keys move between the Toggles. */
+    orientation?: Orientation;
+    /** Element to render instead of the default `<div>`. Props and ref are merged onto it. */
+    render?: ReactElement;
+    /** Ref to the rendered element. Merged with any ref on the `render` element. */
+    ref?: Ref<HTMLElement>;
+};
+type ToggleGroupProps = ToggleGroupOwnProps & Omit<ComponentPropsWithRef<'div'>, keyof ToggleGroupOwnProps>;
+/**
+ * Toggles that share one value (decision 17): `role="group"`, one Tab stop — the pressed Toggle,
+ * or the first — and the arrow keys between them. Pressing the pressed Toggle releases it, so the
+ * value may be empty. Inside a Toolbar its Toggles join the Toolbar's arrow keys instead. Name it
+ * with `aria-label`.
+ */
+declare function ToggleGroup({ value: valueProp, defaultValue, onValueChange, multiple, disabled, orientation, className, children, render, ...rest }: ToggleGroupProps): react.JSX.Element;
+
+export { ToggleGroup, type ToggleGroupProps };

package/dist/toggle-group/index.d.ts

@@ -0,0 +1,31 @@
+import * as react from 'react';
+import { ReactElement, Ref, ComponentPropsWithRef } from 'react';
+import { O as Orientation } from '../rovingFocus-BZB3yicE.js';
+
+type ToggleGroupOwnProps = {
+    /** Controlled: the pressed Toggles' values. Provide `onValueChange` alongside it. */
+    value?: readonly string[];
+    /** Initial value when uncontrolled. Read once, at mount. */
+    defaultValue?: readonly string[];
+    onValueChange?: (value: string[]) => void;
+    /** Lets more than one Toggle be pressed. Without it, pressing one releases the others. */
+    multiple?: boolean;
+    /** Disables every Toggle in it. */
+    disabled?: boolean;
+    /** Which arrow keys move between the Toggles. */
+    orientation?: Orientation;
+    /** Element to render instead of the default `<div>`. Props and ref are merged onto it. */
+    render?: ReactElement;
+    /** Ref to the rendered element. Merged with any ref on the `render` element. */
+    ref?: Ref<HTMLElement>;
+};
+type ToggleGroupProps = ToggleGroupOwnProps & Omit<ComponentPropsWithRef<'div'>, keyof ToggleGroupOwnProps>;
+/**
+ * Toggles that share one value (decision 17): `role="group"`, one Tab stop — the pressed Toggle,
+ * or the first — and the arrow keys between them. Pressing the pressed Toggle releases it, so the
+ * value may be empty. Inside a Toolbar its Toggles join the Toolbar's arrow keys instead. Name it
+ * with `aria-label`.
+ */
+declare function ToggleGroup({ value: valueProp, defaultValue, onValueChange, multiple, disabled, orientation, className, children, render, ...rest }: ToggleGroupProps): react.JSX.Element;
+
+export { ToggleGroup, type ToggleGroupProps };

package/dist/toggle-group/index.js

@@ -0,0 +1,68 @@
+import {
+  ToggleGroupContext
+} from "../chunk-E4JBFRMM.js";
+import {
+  RovingGroupContext,
+  useRovingGroup,
+  useRovingGroupContext
+} from "../chunk-36N5DD5K.js";
+import "../chunk-2S4XG4VD.js";
+import {
+  useControlled
+} from "../chunk-UEIB3I3T.js";
+import {
+  useRender
+} from "../chunk-OQTWWZ4B.js";
+
+// src/toggle-group/ToggleGroup.tsx
+import { useCallback, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+function ToggleGroup({
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  multiple = false,
+  disabled = false,
+  orientation = "horizontal",
+  className,
+  children,
+  render,
+  ...rest
+}) {
+  const [value, setValueState] = useControlled({
+    controlled: valueProp,
+    default: defaultValue ?? [],
+    name: "ToggleGroup",
+    state: "value"
+  });
+  const toggle = useCallback(
+    (item) => {
+      const pressed = value.includes(item);
+      const next = multiple ? pressed ? value.filter((v) => v !== item) : [...value, item] : pressed ? [] : [item];
+      setValueState(next);
+      onValueChange?.(next);
+    },
+    [value, multiple, setValueState, onValueChange]
+  );
+  const outer = useRovingGroupContext();
+  const roving = useRovingGroup({ orientation });
+  const context = useMemo(() => ({ value, disabled, toggle }), [value, disabled, toggle]);
+  const element = useRender({
+    render,
+    defaultTagName: "div",
+    props: {
+      role: "group",
+      "data-orientation": orientation,
+      "data-disabled": disabled ? "" : void 0,
+      className,
+      children,
+      // In a Toolbar, the Toolbar moves focus.
+      onKeyDown: outer ? void 0 : roving.onKeyDown
+    },
+    consumerProps: rest
+  });
+  return /* @__PURE__ */ jsx(ToggleGroupContext.Provider, { value: context, children: outer ? element : /* @__PURE__ */ jsx(RovingGroupContext.Provider, { value: roving.context, children: element }) });
+}
+export {
+  ToggleGroup
+};