@octanejs/base-ui 0.1.30 → 0.1.32

package/dist/cjs/accordion.cjs

@@ -0,0 +1,497 @@
+"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,
+  AccordionHeader: () => AccordionHeader,
+  AccordionItem: () => AccordionItem,
+  AccordionPanel: () => AccordionPanel,
+  AccordionPanelCssVars: () => AccordionPanelCssVars,
+  AccordionRoot: () => AccordionRoot,
+  AccordionTrigger: () => AccordionTrigger,
+  useAccordionItemContext: () => useAccordionItemContext,
+  useAccordionRootContext: () => useAccordionRootContext
+});
+module.exports = __toCommonJS(accordion_exports);
+var import_octane = require("octane");
+var import_internal = require("./internal.cjs");
+var import_useRenderElement = require("./utils/useRenderElement.cjs");
+var import_useBaseUiId = require("./utils/useBaseUiId.cjs");
+var import_useButton = require("./utils/useButton.cjs");
+var import_useControlled = require("./utils/useControlled.cjs");
+var import_useStableCallback = require("./utils/useStableCallback.cjs");
+var import_resolveStyle = require("./utils/resolveStyle.cjs");
+var import_useTransitionStatus = require("./utils/useTransitionStatus.cjs");
+var import_CompositeList = require("./utils/composite/CompositeList.cjs");
+var import_useCompositeListItem = require("./utils/composite/useCompositeListItem.cjs");
+var import_DirectionContext = require("./utils/DirectionContext.cjs");
+var import_collapsibleOpenStateMapping = require("./utils/collapsibleOpenStateMapping.cjs");
+var import_collapsible = require("./collapsible.cjs");
+const rootStateAttributesMapping = {
+  value: () => null
+};
+const accordionStateAttributesMapping = {
+  ...import_collapsibleOpenStateMapping.collapsibleOpenStateMapping,
+  index(value) {
+    return Number.isInteger(value) ? { "data-index": String(value) } : null;
+  },
+  ...import_useTransitionStatus.transitionStatusMapping,
+  value: () => null
+};
+const triggerStateAttributesMapping = {
+  ...import_collapsibleOpenStateMapping.collapsibleTriggerOpenStateMapping
+};
+const AccordionPanelCssVars = {
+  accordionPanelHeight: "--accordion-panel-height",
+  accordionPanelWidth: "--accordion-panel-width"
+};
+const AccordionRootContext = (0, import_octane.createContext)(void 0);
+function useAccordionRootContext() {
+  const context = (0, import_octane.useContext)(AccordionRootContext);
+  if (context === void 0) {
+    throw new Error(
+      "Base UI: AccordionRootContext is missing. Accordion parts must be placed within <Accordion.Root>."
+    );
+  }
+  return context;
+}
+const AccordionItemContext = (0, import_octane.createContext)(void 0);
+function useAccordionItemContext() {
+  const context = (0, import_octane.useContext)(AccordionItemContext);
+  if (context === void 0) {
+    throw new Error(
+      "Base UI: AccordionItemContext is missing. Accordion parts must be placed within <Accordion.Item>."
+    );
+  }
+  return context;
+}
+function AccordionRoot(props) {
+  const slot = (0, import_internal.S)("AccordionRoot");
+  const {
+    render,
+    className,
+    disabled = false,
+    hiddenUntilFound: hiddenUntilFoundProp,
+    keepMounted: keepMountedProp,
+    loopFocus,
+    onValueChange,
+    multiple = false,
+    orientation = "vertical",
+    value: valueProp,
+    defaultValue: defaultValueProp,
+    style,
+    ref,
+    ...elementProps
+  } = props;
+  const direction = (0, import_DirectionContext.useDirection)();
+  (0, import_octane.useLayoutEffect)(
+    () => {
+      if (hiddenUntilFoundProp && keepMountedProp === false) {
+        console.warn(
+          "Base UI: The `keepMounted={false}` prop on `Accordion.Root` is ignored when `hiddenUntilFound` is enabled, since panels must remain mounted while closed."
+        );
+      }
+    },
+    [hiddenUntilFoundProp, keepMountedProp],
+    (0, import_internal.subSlot)(slot, "warn")
+  );
+  const defaultValue = (0, import_octane.useMemo)(
+    () => {
+      if (valueProp === void 0) {
+        return defaultValueProp ?? [];
+      }
+      return void 0;
+    },
+    [valueProp, defaultValueProp],
+    (0, import_internal.subSlot)(slot, "defaultValue")
+  );
+  const accordionItemRefs = (0, import_octane.useRef)([], (0, import_internal.subSlot)(slot, "itemRefs"));
+  const [value, setValue] = (0, import_useControlled.useControlled)(
+    { controlled: valueProp, default: defaultValue, name: "Accordion", state: "value" },
+    (0, import_internal.subSlot)(slot, "ctrl")
+  );
+  const handleValueChange = (0, import_useStableCallback.useStableCallback)(
+    (newValue, nextOpen, details) => {
+      if (!multiple) {
+        const nextValue = value[0] === newValue ? [] : [newValue];
+        onValueChange?.(nextValue, details);
+        if (details.isCanceled) {
+          return;
+        }
+        setValue(nextValue);
+      } else if (nextOpen) {
+        const nextOpenValues = value.slice();
+        nextOpenValues.push(newValue);
+        onValueChange?.(nextOpenValues, details);
+        if (details.isCanceled) {
+          return;
+        }
+        setValue(nextOpenValues);
+      } else {
+        const nextOpenValues = value.filter((v) => v !== newValue);
+        onValueChange?.(nextOpenValues, details);
+        if (details.isCanceled) {
+          return;
+        }
+        setValue(nextOpenValues);
+      }
+    },
+    (0, import_internal.subSlot)(slot, "valueChange")
+  );
+  const state = (0, import_octane.useMemo)(
+    () => ({ value, disabled, orientation }),
+    [value, disabled, orientation],
+    (0, import_internal.subSlot)(slot, "state")
+  );
+  const contextValue = (0, import_octane.useMemo)(
+    () => ({
+      disabled,
+      handleValueChange,
+      hiddenUntilFound: hiddenUntilFoundProp ?? false,
+      keepMounted: keepMountedProp ?? false,
+      state,
+      value
+    }),
+    [disabled, handleValueChange, hiddenUntilFoundProp, keepMountedProp, state, value],
+    (0, import_internal.subSlot)(slot, "ctx")
+  );
+  const element = (0, import_useRenderElement.useRenderElement)(
+    "div",
+    { render, className, style },
+    {
+      state,
+      ref,
+      props: [{ dir: direction }, elementProps],
+      stateAttributesMapping: rootStateAttributesMapping
+    },
+    (0, import_internal.subSlot)(slot, "re")
+  );
+  return (0, import_octane.createElement)(AccordionRootContext.Provider, {
+    value: contextValue,
+    children: (0, import_octane.createElement)(import_CompositeList.CompositeList, {
+      elementsRef: accordionItemRefs,
+      children: element
+    })
+  });
+}
+function AccordionItem(props) {
+  const slot = (0, import_internal.S)("AccordionItem");
+  const {
+    className,
+    disabled: disabledProp = false,
+    onOpenChange: onOpenChangeProp,
+    render,
+    value: valueProp,
+    style,
+    ref,
+    ...elementProps
+  } = props;
+  const { ref: listItemRef, index } = (0, import_useCompositeListItem.useCompositeListItem)((0, import_internal.subSlot)(slot, "listItem"));
+  const {
+    disabled: contextDisabled,
+    handleValueChange,
+    state: rootState,
+    value: openValues
+  } = useAccordionRootContext();
+  const fallbackValue = (0, import_useBaseUiId.useBaseUiId)(void 0, (0, import_internal.subSlot)(slot, "fallbackValue"));
+  const value = valueProp ?? fallbackValue;
+  const disabled = disabledProp || contextDisabled;
+  const isOpen = (0, import_octane.useMemo)(
+    () => {
+      if (!openValues) {
+        return false;
+      }
+      for (let i = 0; i < openValues.length; i += 1) {
+        if (openValues[i] === value) {
+          return true;
+        }
+      }
+      return false;
+    },
+    [openValues, value],
+    (0, import_internal.subSlot)(slot, "isOpen")
+  );
+  const onOpenChange = (0, import_useStableCallback.useStableCallback)(
+    (nextOpen, eventDetails) => {
+      onOpenChangeProp?.(nextOpen, eventDetails);
+      if (eventDetails.isCanceled) {
+        return;
+      }
+      handleValueChange(value, nextOpen, eventDetails);
+    },
+    (0, import_internal.subSlot)(slot, "onOpenChange")
+  );
+  const collapsible = (0, import_collapsible.useCollapsibleRoot)(
+    { open: isOpen, onOpenChange, disabled },
+    (0, import_internal.subSlot)(slot, "collapsible")
+  );
+  const collapsibleState = (0, import_octane.useMemo)(
+    () => ({
+      open: collapsible.open,
+      disabled: collapsible.disabled,
+      transitionStatus: collapsible.transitionStatus
+    }),
+    [collapsible.open, collapsible.disabled, collapsible.transitionStatus],
+    (0, import_internal.subSlot)(slot, "collapsibleState")
+  );
+  const collapsibleContext = (0, import_octane.useMemo)(
+    () => ({ ...collapsible, onOpenChange, state: collapsibleState }),
+    [collapsible, collapsibleState, onOpenChange],
+    (0, import_internal.subSlot)(slot, "collapsibleCtx")
+  );
+  const state = (0, import_octane.useMemo)(
+    () => ({
+      ...rootState,
+      hidden: !isOpen && !collapsible.mounted,
+      index,
+      disabled,
+      open: isOpen
+    }),
+    [collapsible.mounted, disabled, index, isOpen, rootState],
+    (0, import_internal.subSlot)(slot, "state")
+  );
+  const defaultTriggerId = (0, import_useBaseUiId.useBaseUiId)(void 0, (0, import_internal.subSlot)(slot, "defaultTriggerId"));
+  const [triggerId, setTriggerId] = (0, import_octane.useState)(
+    void 0,
+    (0, import_internal.subSlot)(slot, "triggerId")
+  );
+  const accordionItemContext = (0, import_octane.useMemo)(
+    () => ({
+      open: isOpen,
+      state,
+      setTriggerId,
+      triggerId: triggerId ?? defaultTriggerId
+    }),
+    [defaultTriggerId, isOpen, state, setTriggerId, triggerId],
+    (0, import_internal.subSlot)(slot, "itemCtx")
+  );
+  const element = (0, import_useRenderElement.useRenderElement)(
+    "div",
+    { render, className, style },
+    {
+      state,
+      ref: [ref, listItemRef],
+      props: elementProps,
+      stateAttributesMapping: accordionStateAttributesMapping
+    },
+    (0, import_internal.subSlot)(slot, "re")
+  );
+  return (0, import_octane.createElement)(import_collapsible.CollapsibleRootContext.Provider, {
+    value: collapsibleContext,
+    children: (0, import_octane.createElement)(AccordionItemContext.Provider, {
+      value: accordionItemContext,
+      children: element
+    })
+  });
+}
+function AccordionHeader(props) {
+  const slot = (0, import_internal.S)("AccordionHeader");
+  const { render, className, style, ref, ...elementProps } = props;
+  const { state } = useAccordionItemContext();
+  return (0, import_useRenderElement.useRenderElement)(
+    "h3",
+    { render, className, style },
+    {
+      state,
+      ref,
+      props: elementProps,
+      stateAttributesMapping: accordionStateAttributesMapping
+    },
+    (0, import_internal.subSlot)(slot, "re")
+  );
+}
+function AccordionTrigger(props) {
+  const slot = (0, import_internal.S)("AccordionTrigger");
+  const {
+    disabled: disabledProp,
+    className,
+    id: idProp,
+    render,
+    nativeButton = true,
+    style,
+    ref,
+    ...elementProps
+  } = props;
+  const { panelId, open, handleTrigger, disabled: contextDisabled } = (0, import_collapsible.useCollapsibleRootContext)();
+  const disabled = disabledProp || contextDisabled;
+  const { getButtonProps, buttonRef } = (0, import_useButton.useButton)(
+    { disabled, focusableWhenDisabled: true, native: nativeButton },
+    (0, import_internal.subSlot)(slot, "button")
+  );
+  const { state, setTriggerId, triggerId: id } = useAccordionItemContext();
+  (0, import_octane.useLayoutEffect)(
+    () => {
+      if (idProp) {
+        setTriggerId(idProp);
+      }
+      return () => {
+        setTriggerId(void 0);
+      };
+    },
+    [idProp, setTriggerId],
+    (0, import_internal.subSlot)(slot, "registerId")
+  );
+  return (0, import_useRenderElement.useRenderElement)(
+    "button",
+    { render, className, style },
+    {
+      state,
+      ref: [ref, buttonRef],
+      props: [
+        {
+          "aria-controls": open ? panelId : void 0,
+          "aria-expanded": open,
+          id,
+          onClick: handleTrigger
+        },
+        elementProps,
+        getButtonProps
+      ],
+      stateAttributesMapping: triggerStateAttributesMapping
+    },
+    (0, import_internal.subSlot)(slot, "re")
+  );
+}
+function AccordionPanel(props) {
+  const slot = (0, import_internal.S)("AccordionPanel");
+  const {
+    className,
+    hiddenUntilFound: hiddenUntilFoundProp,
+    keepMounted: keepMountedProp,
+    id: idProp,
+    render,
+    style,
+    ref,
+    ...elementProps
+  } = props;
+  const { hiddenUntilFound: contextHiddenUntilFound, keepMounted: contextKeepMounted } = useAccordionRootContext();
+  const {
+    mounted,
+    onOpenChange,
+    open,
+    panelId,
+    setMounted,
+    setOpen,
+    setPanelIdState,
+    transitionStatus
+  } = (0, import_collapsible.useCollapsibleRootContext)();
+  const hiddenUntilFound = hiddenUntilFoundProp ?? contextHiddenUntilFound;
+  const keepMounted = keepMountedProp ?? contextKeepMounted;
+  (0, import_octane.useLayoutEffect)(
+    () => {
+      if (keepMountedProp === false && hiddenUntilFound) {
+        console.warn(
+          "Base UI: The `keepMounted={false}` prop on an `Accordion.Panel` is ignored when `hiddenUntilFound` is enabled on the panel or root, since the panel must remain mounted while closed."
+        );
+      }
+    },
+    [hiddenUntilFound, keepMountedProp],
+    (0, import_internal.subSlot)(slot, "warn")
+  );
+  (0, import_octane.useLayoutEffect)(
+    () => {
+      if (idProp) {
+        setPanelIdState(idProp);
+        return () => {
+          setPanelIdState(void 0);
+        };
+      }
+      return void 0;
+    },
+    [idProp, setPanelIdState],
+    (0, import_internal.subSlot)(slot, "registerId")
+  );
+  const {
+    height,
+    props: panelProps,
+    panelRef,
+    shouldPreventOpenAnimation,
+    shouldRender,
+    transitionStatus: panelTransitionStatus,
+    width
+  } = (0, import_collapsible.useCollapsiblePanel)(
+    {
+      hiddenUntilFound,
+      id: idProp ?? panelId,
+      keepMounted,
+      mounted,
+      onOpenChange,
+      open,
+      setMounted,
+      setOpen,
+      transitionStatus
+    },
+    (0, import_internal.subSlot)(slot, "panel")
+  );
+  const { state, triggerId } = useAccordionItemContext();
+  const panelState = {
+    ...state,
+    transitionStatus: panelTransitionStatus
+  };
+  const resolvedStyle = (0, import_resolveStyle.resolveStyle)(style, panelState);
+  const element = (0, import_useRenderElement.useRenderElement)(
+    "div",
+    { render, className, style: void 0 },
+    {
+      state: panelState,
+      ref: [ref, panelRef],
+      props: [
+        panelProps,
+        {
+          "aria-labelledby": triggerId,
+          role: "region",
+          style: {
+            [AccordionPanelCssVars.accordionPanelHeight]: height === void 0 ? "auto" : `${height}px`,
+            [AccordionPanelCssVars.accordionPanelWidth]: width === void 0 ? "auto" : `${width}px`
+          }
+        },
+        elementProps,
+        resolvedStyle ? { style: resolvedStyle } : void 0,
+        // The public `style` prop is resolved above so a temporary `animationName: 'none'`
+        // can still win after the user's inline styles have been merged.
+        shouldPreventOpenAnimation ? { style: { animationName: "none" } } : void 0
+      ],
+      stateAttributesMapping: accordionStateAttributesMapping
+    },
+    (0, import_internal.subSlot)(slot, "re")
+  );
+  if (!shouldRender) {
+    return null;
+  }
+  return element;
+}
+const Accordion = {
+  Root: AccordionRoot,
+  Item: AccordionItem,
+  Header: AccordionHeader,
+  Trigger: AccordionTrigger,
+  Panel: AccordionPanel
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Accordion,
+  AccordionHeader,
+  AccordionItem,
+  AccordionPanel,
+  AccordionPanelCssVars,
+  AccordionRoot,
+  AccordionTrigger,
+  useAccordionItemContext,
+  useAccordionRootContext
+});

package/dist/cjs/alert-dialog.cjs

@@ -0,0 +1,65 @@
+"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 alert_dialog_exports = {};
+__export(alert_dialog_exports, {
+  AlertDialog: () => AlertDialog,
+  AlertDialogHandle: () => AlertDialogHandle,
+  createAlertDialogHandle: () => createAlertDialogHandle
+});
+module.exports = __toCommonJS(alert_dialog_exports);
+var import_dialog = require("./dialog.cjs");
+const alertDialogState = {
+  modal: true,
+  disablePointerDismissal: true,
+  role: "alertdialog"
+};
+class AlertDialogHandle extends import_dialog.DialogHandle {
+  constructor(store) {
+    const alertDialogStore = store ?? new import_dialog.DialogStore(alertDialogState);
+    super(alertDialogStore);
+    if (store) {
+      this.store.update(alertDialogState);
+    }
+  }
+}
+function createAlertDialogHandle() {
+  return new AlertDialogHandle();
+}
+function AlertDialogRoot(props) {
+  return (0, import_dialog.useRenderDialogRoot)(props, "alert-dialog");
+}
+const AlertDialog = {
+  Root: AlertDialogRoot,
+  Trigger: import_dialog.Dialog.Trigger,
+  Portal: import_dialog.Dialog.Portal,
+  Backdrop: import_dialog.Dialog.Backdrop,
+  Popup: import_dialog.Dialog.Popup,
+  Viewport: import_dialog.Dialog.Viewport,
+  Title: import_dialog.Dialog.Title,
+  Description: import_dialog.Dialog.Description,
+  Close: import_dialog.Dialog.Close,
+  createHandle: createAlertDialogHandle,
+  Handle: AlertDialogHandle
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AlertDialog,
+  AlertDialogHandle,
+  createAlertDialogHandle
+});