@octanejs/radix 0.1.32 → 0.1.34

package/dist/cjs/Avatar.cjs

@@ -0,0 +1,150 @@
+"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 Avatar_exports = {};
+__export(Avatar_exports, {
+  Avatar: () => Root,
+  AvatarFallback: () => Fallback,
+  AvatarImage: () => Image,
+  Fallback: () => Fallback,
+  Image: () => Image,
+  Root: () => Root,
+  createAvatarScope: () => createAvatarScope
+});
+module.exports = __toCommonJS(Avatar_exports);
+var import_octane = require("octane");
+var import_context = require("./context.cjs");
+var import_internal = require("./internal.cjs");
+var import_Primitive = require("./Primitive.cjs");
+const [createAvatarContext, createAvatarScope] = (0, import_context.createContextScope)("Avatar");
+const [AvatarProvider, useAvatarContext] = createAvatarContext("Avatar");
+function Root(props) {
+  const slot = (0, import_internal.S)("Avatar.Root");
+  const { __scopeAvatar, ...avatarProps } = props ?? {};
+  const [imageLoadingStatus, setImageLoadingStatus] = (0, import_octane.useState)(
+    "idle",
+    (0, import_internal.subSlot)(slot, "status")
+  );
+  return (0, import_octane.createElement)(AvatarProvider, {
+    scope: __scopeAvatar,
+    imageLoadingStatus,
+    setImageLoadingStatus,
+    children: (0, import_octane.createElement)(import_Primitive.Primitive.span, avatarProps)
+  });
+}
+function Image(props) {
+  const slot = (0, import_internal.S)("Avatar.Image");
+  const { __scopeAvatar, src, onLoadingStatusChange, ...imageProps } = props ?? {};
+  const context = useAvatarContext("AvatarImage", __scopeAvatar);
+  const imageLoadingStatus = useImageLoadingStatus(
+    src,
+    {
+      referrerPolicy: imageProps.referrerPolicy,
+      crossOrigin: imageProps.crossOrigin,
+      loadingStatus: context.imageLoadingStatus,
+      setLoadingStatus: context.setImageLoadingStatus
+    },
+    slot
+  );
+  const handleLoadingStatusChange = (0, import_octane.useEffectEvent)(
+    (status) => {
+      onLoadingStatusChange?.(status);
+    },
+    (0, import_internal.subSlot)(slot, "cb")
+  );
+  const loadingStatusRef = (0, import_octane.useRef)(imageLoadingStatus, (0, import_internal.subSlot)(slot, "prev"));
+  (0, import_octane.useLayoutEffect)(
+    () => {
+      const previousLoadingStatus = loadingStatusRef.current;
+      loadingStatusRef.current = imageLoadingStatus;
+      if (imageLoadingStatus !== previousLoadingStatus) {
+        handleLoadingStatusChange(imageLoadingStatus);
+      }
+    },
+    [imageLoadingStatus],
+    (0, import_internal.subSlot)(slot, "e:change")
+  );
+  return imageLoadingStatus === "loaded" ? (0, import_octane.createElement)(import_Primitive.Primitive.img, { ...imageProps, src }) : null;
+}
+function Fallback(props) {
+  const slot = (0, import_internal.S)("Avatar.Fallback");
+  const { __scopeAvatar, delayMs, ...fallbackProps } = props ?? {};
+  const context = useAvatarContext("AvatarFallback", __scopeAvatar);
+  const [canRender, setCanRender] = (0, import_octane.useState)(delayMs === void 0, (0, import_internal.subSlot)(slot, "can"));
+  (0, import_octane.useEffect)(
+    () => {
+      if (delayMs !== void 0) {
+        const timerId = window.setTimeout(() => setCanRender(true), delayMs);
+        return () => window.clearTimeout(timerId);
+      }
+    },
+    [delayMs],
+    (0, import_internal.subSlot)(slot, "e:delay")
+  );
+  return canRender && context.imageLoadingStatus !== "loaded" ? (0, import_octane.createElement)(import_Primitive.Primitive.span, fallbackProps) : null;
+}
+function useImageLoadingStatus(src, {
+  loadingStatus,
+  setLoadingStatus,
+  referrerPolicy,
+  crossOrigin
+}, slot) {
+  (0, import_octane.useLayoutEffect)(
+    () => {
+      if (!src) {
+        setLoadingStatus("error");
+        return;
+      }
+      const image = new window.Image();
+      const handleLoad = (event) => {
+        const img = event.currentTarget;
+        setLoadingStatus(getImageLoadingStatus(img));
+      };
+      const handleError = () => setLoadingStatus("error");
+      image.addEventListener("load", handleLoad);
+      image.addEventListener("error", handleError);
+      if (referrerPolicy) {
+        image.referrerPolicy = referrerPolicy;
+      }
+      image.crossOrigin = crossOrigin ?? null;
+      image.src = src;
+      setLoadingStatus(getImageLoadingStatus(image));
+      return () => {
+        image.removeEventListener("load", handleLoad);
+        image.removeEventListener("error", handleError);
+        setLoadingStatus("idle");
+      };
+    },
+    [src, crossOrigin, referrerPolicy],
+    (0, import_internal.subSlot)(slot, "e:load")
+  );
+  return loadingStatus;
+}
+function getImageLoadingStatus(image) {
+  return image.complete ? image.naturalWidth > 0 ? "loaded" : "error" : "loading";
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  Fallback,
+  Image,
+  Root,
+  createAvatarScope
+});

package/dist/cjs/Checkbox.cjs

@@ -0,0 +1,281 @@
+"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 Checkbox_exports = {};
+__export(Checkbox_exports, {
+  BubbleInput: () => BubbleInput,
+  Checkbox: () => Root,
+  CheckboxBubbleInput: () => BubbleInput,
+  CheckboxIndicator: () => Indicator,
+  CheckboxProvider: () => Provider,
+  CheckboxTrigger: () => Trigger,
+  Indicator: () => Indicator,
+  Provider: () => Provider,
+  Root: () => Root,
+  Trigger: () => Trigger,
+  createCheckboxScope: () => createCheckboxScope
+});
+module.exports = __toCommonJS(Checkbox_exports);
+var import_octane = require("octane");
+var import_compose_event_handlers = require("./compose-event-handlers.cjs");
+var import_compose_refs = require("./compose-refs.cjs");
+var import_context = require("./context.cjs");
+var import_internal = require("./internal.cjs");
+var import_Presence = require("./Presence.cjs");
+var import_Primitive = require("./Primitive.cjs");
+var import_use_previous = require("./use-previous.cjs");
+var import_use_size = require("./use-size.cjs");
+var import_useControllableState = require("./useControllableState.cjs");
+const CHECKBOX_NAME = "Checkbox";
+const [createCheckboxContext, createCheckboxScope] = (0, import_context.createContextScope)(CHECKBOX_NAME);
+const [CheckboxProviderImpl, useCheckboxContext] = createCheckboxContext(CHECKBOX_NAME);
+function Provider(props) {
+  const slot = (0, import_internal.S)("Checkbox.Provider");
+  const {
+    __scopeCheckbox,
+    checked: checkedProp,
+    children,
+    defaultChecked,
+    disabled,
+    form,
+    name,
+    onCheckedChange,
+    required,
+    value = "on",
+    internal_do_not_use_render
+  } = props ?? {};
+  const [checked, setChecked] = (0, import_useControllableState.useControllableState)(
+    { prop: checkedProp, defaultProp: defaultChecked ?? false, onChange: onCheckedChange },
+    (0, import_internal.subSlot)(slot, "checked")
+  );
+  const [control, setControl] = (0, import_octane.useState)(null, (0, import_internal.subSlot)(slot, "control"));
+  const [bubbleInput, setBubbleInput] = (0, import_octane.useState)(
+    null,
+    (0, import_internal.subSlot)(slot, "input")
+  );
+  const hasConsumerStoppedPropagationRef = (0, import_octane.useRef)(false, (0, import_internal.subSlot)(slot, "stopped"));
+  const isFormControl = control ? !!form || !!control.closest("form") : (
+    // We set this to true by default so that events bubble to forms without JS (SSR)
+    true
+  );
+  const context = {
+    checked,
+    disabled,
+    setChecked,
+    control,
+    setControl,
+    name,
+    form,
+    value,
+    hasConsumerStoppedPropagationRef,
+    required,
+    defaultChecked: isIndeterminate(defaultChecked) ? false : defaultChecked,
+    isFormControl,
+    bubbleInput,
+    setBubbleInput
+  };
+  return (0, import_octane.createElement)(CheckboxProviderImpl, {
+    scope: __scopeCheckbox,
+    ...context,
+    children: isFunction(internal_do_not_use_render) ? internal_do_not_use_render(context) : children
+  });
+}
+function Trigger(props) {
+  const slot = (0, import_internal.S)("Checkbox.Trigger");
+  const { __scopeCheckbox, onKeyDown, onClick, ref: forwardedRef, ...checkboxProps } = props ?? {};
+  const {
+    control,
+    value,
+    disabled,
+    checked,
+    required,
+    setControl,
+    setChecked,
+    hasConsumerStoppedPropagationRef,
+    isFormControl,
+    bubbleInput
+  } = useCheckboxContext("CheckboxTrigger", __scopeCheckbox);
+  const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, setControl, (0, import_internal.subSlot)(slot, "refs"));
+  const initialCheckedStateRef = (0, import_octane.useRef)(checked, (0, import_internal.subSlot)(slot, "initial"));
+  (0, import_octane.useEffect)(
+    () => {
+      const form = control?.form;
+      if (form) {
+        const reset = () => setChecked(initialCheckedStateRef.current);
+        form.addEventListener("reset", reset);
+        return () => form.removeEventListener("reset", reset);
+      }
+    },
+    [control, setChecked],
+    (0, import_internal.subSlot)(slot, "e:reset")
+  );
+  return (0, import_octane.createElement)(import_Primitive.Primitive.button, {
+    type: "button",
+    role: "checkbox",
+    "aria-checked": isIndeterminate(checked) ? "mixed" : checked,
+    "aria-required": required,
+    "data-state": getState(checked),
+    "data-disabled": disabled ? "" : void 0,
+    disabled,
+    value,
+    ...checkboxProps,
+    ref: composedRefs,
+    onKeyDown: (0, import_compose_event_handlers.composeEventHandlers)(onKeyDown, (event) => {
+      if (event.key === "Enter") event.preventDefault();
+    }),
+    onClick: (0, import_compose_event_handlers.composeEventHandlers)(onClick, (event) => {
+      setChecked((prevChecked) => isIndeterminate(prevChecked) ? true : !prevChecked);
+      if (bubbleInput && isFormControl) {
+        hasConsumerStoppedPropagationRef.current = event.cancelBubble;
+        if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation();
+      }
+    })
+  });
+}
+function Root(props) {
+  const {
+    __scopeCheckbox,
+    name,
+    checked,
+    defaultChecked,
+    required,
+    disabled,
+    value,
+    onCheckedChange,
+    form,
+    ref: forwardedRef,
+    ...checkboxProps
+  } = props ?? {};
+  return (0, import_octane.createElement)(Provider, {
+    __scopeCheckbox,
+    checked,
+    defaultChecked,
+    disabled,
+    required,
+    onCheckedChange,
+    name,
+    form,
+    value,
+    internal_do_not_use_render: ({ isFormControl }) => [
+      (0, import_octane.createElement)(Trigger, {
+        key: "trigger",
+        ...checkboxProps,
+        ref: forwardedRef,
+        __scopeCheckbox
+      }),
+      isFormControl ? (0, import_octane.createElement)(BubbleInput, { key: "bubble", __scopeCheckbox }) : null
+    ]
+  });
+}
+function Indicator(props) {
+  const { __scopeCheckbox, forceMount, ...indicatorProps } = props ?? {};
+  const context = useCheckboxContext("CheckboxIndicator", __scopeCheckbox);
+  return (0, import_octane.createElement)(import_Presence.Presence, {
+    present: forceMount || isIndeterminate(context.checked) || context.checked === true,
+    children: (0, import_octane.createElement)(import_Primitive.Primitive.span, {
+      "data-state": getState(context.checked),
+      "data-disabled": context.disabled ? "" : void 0,
+      ...indicatorProps,
+      style: { pointerEvents: "none", ...props?.style }
+    })
+  });
+}
+function BubbleInput(props) {
+  const slot = (0, import_internal.S)("Checkbox.BubbleInput");
+  const { __scopeCheckbox, ref: forwardedRef, ...inputProps } = props ?? {};
+  const {
+    control,
+    hasConsumerStoppedPropagationRef,
+    checked,
+    required,
+    disabled,
+    name,
+    value,
+    form,
+    bubbleInput,
+    setBubbleInput
+  } = useCheckboxContext("CheckboxBubbleInput", __scopeCheckbox);
+  const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, setBubbleInput, (0, import_internal.subSlot)(slot, "refs"));
+  const prevChecked = (0, import_use_previous.usePrevious)(checked, (0, import_internal.subSlot)(slot, "prev"));
+  const controlSize = (0, import_use_size.useSize)(control, (0, import_internal.subSlot)(slot, "size"));
+  (0, import_octane.useEffect)(
+    () => {
+      const input = bubbleInput;
+      if (!input) return;
+      const bubbles = !hasConsumerStoppedPropagationRef.current;
+      if (prevChecked !== checked) {
+        input.indeterminate = isIndeterminate(checked);
+        input.dispatchEvent(new Event("click", { bubbles }));
+        input.dispatchEvent(new Event("change", { bubbles }));
+      }
+    },
+    [bubbleInput, prevChecked, checked, hasConsumerStoppedPropagationRef],
+    (0, import_internal.subSlot)(slot, "e:bubble")
+  );
+  return (0, import_octane.createElement)(import_Primitive.Primitive.input, {
+    type: "checkbox",
+    "aria-hidden": true,
+    // Live CONTROLLED checked (octane React-parity): the runtime writes the DOM
+    // property, mirrors only the INITIAL state to the attribute, and reasserts
+    // the property on every commit / after event flushes.
+    checked: isIndeterminate(checked) ? false : checked,
+    required,
+    disabled,
+    name,
+    value,
+    form,
+    ...inputProps,
+    tabIndex: -1,
+    ref: composedRefs,
+    style: {
+      ...props?.style,
+      ...controlSize,
+      position: "absolute",
+      pointerEvents: "none",
+      opacity: 0,
+      margin: 0,
+      // We transform because the input is absolutely positioned but we have
+      // rendered it **after** the button. This pulls it back to sit on top
+      // of the button.
+      transform: "translateX(-100%)"
+    }
+  });
+}
+function isFunction(value) {
+  return typeof value === "function";
+}
+function isIndeterminate(checked) {
+  return checked === "indeterminate";
+}
+function getState(checked) {
+  return isIndeterminate(checked) ? "indeterminate" : checked ? "checked" : "unchecked";
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  BubbleInput,
+  Checkbox,
+  CheckboxBubbleInput,
+  CheckboxIndicator,
+  CheckboxProvider,
+  CheckboxTrigger,
+  Indicator,
+  Provider,
+  Root,
+  Trigger,
+  createCheckboxScope
+});

package/dist/cjs/Collapsible.cjs

@@ -0,0 +1,176 @@
+"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 Collapsible_exports = {};
+__export(Collapsible_exports, {
+  Collapsible: () => Root,
+  Content: () => Content,
+  Root: () => Root,
+  Trigger: () => Trigger,
+  createCollapsibleContext: () => createCollapsibleContext,
+  createCollapsibleScope: () => createCollapsibleScope,
+  useCollapsibleContext: () => useCollapsibleContext
+});
+module.exports = __toCommonJS(Collapsible_exports);
+var import_octane = require("octane");
+var import_compose_event_handlers = require("./compose-event-handlers.cjs");
+var import_compose_refs = require("./compose-refs.cjs");
+var import_context = require("./context.cjs");
+var import_internal = require("./internal.cjs");
+var import_Presence = require("./Presence.cjs");
+var import_Primitive = require("./Primitive.cjs");
+var import_useControllableState = require("./useControllableState.cjs");
+var import_useId = require("./useId.cjs");
+const [createCollapsibleContext, createCollapsibleScope] = (0, import_context.createContextScope)("Collapsible");
+const [CollapsibleProvider, useCollapsibleContext] = createCollapsibleContext("Collapsible");
+function getState(open) {
+  return open ? "open" : "closed";
+}
+function Root(props) {
+  const slot = (0, import_internal.S)("Collapsible.Root");
+  const {
+    __scopeCollapsible,
+    open: openProp,
+    defaultOpen,
+    disabled,
+    onOpenChange,
+    ...rest
+  } = props ?? {};
+  const [open, setOpen] = (0, import_useControllableState.useControllableState)(
+    { prop: openProp, defaultProp: defaultOpen ?? false, onChange: onOpenChange },
+    (0, import_internal.subSlot)(slot, "open")
+  );
+  const contentId = (0, import_useId.useId)((0, import_internal.subSlot)(slot, "id"));
+  const onOpenToggle = (0, import_octane.useCallback)(
+    () => setOpen((prev) => !prev),
+    [setOpen],
+    (0, import_internal.subSlot)(slot, "toggle")
+  );
+  return (0, import_octane.createElement)(CollapsibleProvider, {
+    scope: __scopeCollapsible,
+    contentId,
+    disabled,
+    open,
+    onOpenToggle,
+    children: (0, import_octane.createElement)(import_Primitive.Primitive.div, {
+      "data-state": getState(open),
+      "data-disabled": disabled ? "" : void 0,
+      ...rest
+    })
+  });
+}
+function Trigger(props) {
+  const { __scopeCollapsible, ...rest } = props ?? {};
+  const context = useCollapsibleContext("CollapsibleTrigger", __scopeCollapsible);
+  return (0, import_octane.createElement)(import_Primitive.Primitive.button, {
+    type: "button",
+    // Radix parity: only reference the content while it's expanded.
+    "aria-controls": context.open ? context.contentId : void 0,
+    "aria-expanded": context.open || false,
+    "data-state": getState(context.open),
+    "data-disabled": context.disabled ? "" : void 0,
+    disabled: context.disabled,
+    ...rest,
+    onClick: (0, import_compose_event_handlers.composeEventHandlers)(rest.onClick, context.onOpenToggle)
+  });
+}
+function Content(props) {
+  const { __scopeCollapsible, forceMount, ...contentProps } = props ?? {};
+  const context = useCollapsibleContext("CollapsibleContent", __scopeCollapsible);
+  return (0, import_octane.createElement)(import_Presence.Presence, {
+    present: forceMount || context.open,
+    children: ({ present }) => (0, import_octane.createElement)(ContentImpl, { ...contentProps, __scopeCollapsible, present })
+  });
+}
+function ContentImpl(props) {
+  const slot = (0, import_internal.S)("Collapsible.ContentImpl");
+  const {
+    __scopeCollapsible,
+    present,
+    children,
+    ref: forwardedRef,
+    style,
+    ...contentProps
+  } = props;
+  const context = useCollapsibleContext("CollapsibleContent", __scopeCollapsible);
+  const [isPresent, setIsPresent] = (0, import_octane.useState)(present, (0, import_internal.subSlot)(slot, "present"));
+  const rRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "ref"));
+  const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, rRef, (0, import_internal.subSlot)(slot, "refs"));
+  const heightRef = (0, import_octane.useRef)(0, (0, import_internal.subSlot)(slot, "h"));
+  const widthRef = (0, import_octane.useRef)(0, (0, import_internal.subSlot)(slot, "w"));
+  const isOpen = context.open || isPresent;
+  const isMountAnimationPreventedRef = (0, import_octane.useRef)(isOpen, (0, import_internal.subSlot)(slot, "prevent"));
+  const originalStylesRef = (0, import_octane.useRef)(void 0, (0, import_internal.subSlot)(slot, "orig"));
+  (0, import_octane.useEffect)(
+    () => {
+      const raf = requestAnimationFrame(() => isMountAnimationPreventedRef.current = false);
+      return () => cancelAnimationFrame(raf);
+    },
+    [],
+    (0, import_internal.subSlot)(slot, "e:mount")
+  );
+  (0, import_octane.useLayoutEffect)(
+    () => {
+      const node = rRef.current;
+      if (node) {
+        originalStylesRef.current = originalStylesRef.current || {
+          transitionDuration: node.style.transitionDuration,
+          animationName: node.style.animationName
+        };
+        node.style.transitionDuration = "0s";
+        node.style.animationName = "none";
+        const rect = node.getBoundingClientRect();
+        heightRef.current = rect.height;
+        widthRef.current = rect.width;
+        if (!isMountAnimationPreventedRef.current) {
+          node.style.transitionDuration = originalStylesRef.current.transitionDuration;
+          node.style.animationName = originalStylesRef.current.animationName;
+        }
+        setIsPresent(present);
+      }
+    },
+    [context.open, present],
+    (0, import_internal.subSlot)(slot, "e:measure")
+  );
+  const height = heightRef.current;
+  const width = widthRef.current;
+  return (0, import_octane.createElement)(import_Primitive.Primitive.div, {
+    "data-state": getState(context.open),
+    "data-disabled": context.disabled ? "" : void 0,
+    id: context.contentId,
+    hidden: !isOpen,
+    ...contentProps,
+    ref: composedRefs,
+    style: {
+      "--radix-collapsible-content-height": height ? `${height}px` : void 0,
+      "--radix-collapsible-content-width": width ? `${width}px` : void 0,
+      ...style
+    },
+    children: isOpen ? children : null
+  });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Collapsible,
+  Content,
+  Root,
+  Trigger,
+  createCollapsibleContext,
+  createCollapsibleScope,
+  useCollapsibleContext
+});