@crossed/primitive/lib/commonjs/Accordion/index.js

A universal & performant styling library for React Native, Next.js & React

"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);
var Accordion_exports = {};
__export(Accordion_exports, {
  Accordion: () => Accordion,
  AccordionItem: () => AccordionItem,
  AccordionPanel: () => AccordionPanel,
  AccordionTrigger: () => AccordionTrigger,
  createAccordion: () => createAccordion
});
module.exports = __toCommonJS(Accordion_exports);
var import_jsx_runtime = require("react/jsx-runtime");
var import_react = require("react");
var import_react_native = require("react-native");
var import_Focus = require("./Focus");
var import_core = require("@crossed/core");
var import_VisibilityHidden = require("../VisibilityHidden");
const createAccordion = () => {
  const rootContext = (0, import_react.createContext)(
    {}
  );
  const itemContext = (0, import_react.createContext)({});
  const Accordion2 = (props) => {
    const {
      children,
      allowMultiple = false,
      defaultValues,
      values: valueProps,
      onChange,
      ...restProps
    } = props;
    const [values, setValues] = (0, import_core.useUncontrolled)({
      defaultValue: defaultValues,
      value: valueProps,
      onChange
    });
    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Focus.Focus, { ...restProps, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(rootContext.Provider, { value: { values, setValues, allowMultiple }, children }) });
  };
  const AccordionItem2 = (0, import_react.forwardRef)(
    ({ value, ...props }, ref) => {
      const buttonId = (0, import_react.useRef)();
      const panelId = (0, import_react.useRef)();
      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(itemContext.Provider, { value: { value, buttonId, panelId }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.View, { ...props, ref }) });
    }
  );
  const AccordionTrigger2 = (0, import_react.forwardRef)(
    (props, ref) => {
      const id = (0, import_react.useId)();
      const propsId = props.id || props.nativeID || `accordion-trigger-${id}`;
      const { setValues, values, allowMultiple } = (0, import_react.useContext)(rootContext);
      const { value, buttonId, panelId } = (0, import_react.useContext)(itemContext);
      const onPress = (0, import_react.useCallback)(() => {
        setValues(
          allowMultiple ? values.includes(value) ? values.filter((e) => e !== value) : [...values, value] : [value]
        );
      }, [setValues, value, allowMultiple, values]);
      const propsFocus = (0, import_Focus.useFocus)({ onPress });
      buttonId.current = propsId;
      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
        import_react_native.Pressable,
        {
          role: "button",
          ...props,
          ...propsFocus,
          id: propsId,
          "aria-controls": panelId.current,
          "aria-expanded": values.includes(value),
          onPress: (0, import_core.composeEventHandlers)(onPress, props.onPress),
          ref
        }
      );
    }
  );
  const AccordionPanel2 = (0, import_react.forwardRef)((props, ref) => {
    const { values } = (0, import_react.useContext)(rootContext);
    const { value, buttonId, panelId } = (0, import_react.useContext)(itemContext);
    const id = (0, import_react.useId)();
    const propsId = props.id || props.nativeID || `accordion-panel-${id}`;
    panelId.current = propsId;
    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
      import_VisibilityHidden.VisibilityHidden,
      {
        role: "region",
        ref,
        id: propsId,
        "aria-labelledby": buttonId.current,
        hide: !values.includes(value),
        ...props
      }
    );
  });
  Accordion2.displayName = "Accordion";
  AccordionItem2.displayName = "Accordion.Item";
  AccordionTrigger2.displayName = "Accordion.Trigger";
  AccordionPanel2.displayName = "Accordion.Panel";
  return {
    Accordion: Accordion2,
    AccordionItem: AccordionItem2,
    AccordionTrigger: AccordionTrigger2,
    AccordionPanel: AccordionPanel2,
    rootContext,
    itemContext
  };
};
const { Accordion, AccordionItem, AccordionTrigger, AccordionPanel } = createAccordion();
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  Accordion,
  AccordionItem,
  AccordionPanel,
  AccordionTrigger,
  createAccordion
});
//# sourceMappingURL=index.js.map