@octanejs/base-ui 0.1.31 → 0.1.32

package/dist/cjs/toggle-group.cjs

@@ -0,0 +1,118 @@
+"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 toggle_group_exports = {};
+__export(toggle_group_exports, {
+  ToggleGroup: () => ToggleGroup
+});
+module.exports = __toCommonJS(toggle_group_exports);
+var import_octane = require("octane");
+var import_internal = require("./internal.cjs");
+var import_useControlled = require("./utils/useControlled.cjs");
+var import_useStableCallback = require("./utils/useStableCallback.cjs");
+var import_CompositeRoot = require("./utils/composite/CompositeRoot.cjs");
+var import_ToggleGroupContext = require("./utils/ToggleGroupContext.cjs");
+const EMPTY_ARRAY = [];
+const stateAttributesMapping = {
+  multiple(value) {
+    if (value) {
+      return { "data-multiple": "" };
+    }
+    return null;
+  }
+};
+function ToggleGroup(props) {
+  const slot = (0, import_internal.S)("ToggleGroup");
+  const {
+    defaultValue: defaultValueProp,
+    disabled: disabledProp = false,
+    loopFocus = true,
+    onValueChange,
+    orientation = "horizontal",
+    multiple = false,
+    value: valueProp,
+    className,
+    render,
+    style,
+    ref,
+    ...elementProps
+  } = props;
+  const isValueInitialized = (0, import_octane.useMemo)(
+    () => valueProp !== void 0 || defaultValueProp !== void 0,
+    [valueProp, defaultValueProp],
+    (0, import_internal.subSlot)(slot, "init")
+  );
+  const disabled = disabledProp;
+  const [groupValue, setValueState] = (0, import_useControlled.useControlled)(
+    {
+      controlled: valueProp,
+      default: valueProp === void 0 ? defaultValueProp ?? EMPTY_ARRAY : void 0,
+      name: "ToggleGroup",
+      state: "value"
+    },
+    (0, import_internal.subSlot)(slot, "value")
+  );
+  const setGroupValue = (0, import_useStableCallback.useStableCallback)(
+    (newValue, nextPressed, eventDetails) => {
+      let newGroupValue;
+      if (multiple) {
+        newGroupValue = groupValue.slice();
+        if (nextPressed) {
+          newGroupValue.push(newValue);
+        } else {
+          newGroupValue.splice(groupValue.indexOf(newValue), 1);
+        }
+      } else {
+        newGroupValue = nextPressed ? [newValue] : [];
+      }
+      onValueChange?.(newGroupValue, eventDetails);
+      if (eventDetails.isCanceled) {
+        return;
+      }
+      setValueState(newGroupValue);
+    },
+    (0, import_internal.subSlot)(slot, "setGroup")
+  );
+  const state = { disabled, multiple, orientation };
+  const contextValue = (0, import_octane.useMemo)(
+    () => ({ disabled, orientation, setGroupValue, value: groupValue, isValueInitialized }),
+    [disabled, orientation, setGroupValue, groupValue, isValueInitialized],
+    (0, import_internal.subSlot)(slot, "ctx")
+  );
+  const defaultProps = { role: "group" };
+  const compositeRoot = (0, import_octane.createElement)(import_CompositeRoot.CompositeRoot, {
+    render,
+    className,
+    style,
+    state,
+    refs: [ref],
+    props: [defaultProps, elementProps],
+    stateAttributesMapping,
+    loopFocus,
+    enableHomeAndEndKeys: true,
+    orientation
+  });
+  return (0, import_octane.createElement)(import_ToggleGroupContext.ToggleGroupContext.Provider, {
+    value: contextValue,
+    children: compositeRoot
+  });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ToggleGroup
+});

package/dist/cjs/toggle.cjs

@@ -0,0 +1,121 @@
+"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 toggle_exports = {};
+__export(toggle_exports, {
+  Toggle: () => Toggle
+});
+module.exports = __toCommonJS(toggle_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_ToggleGroupContext = require("./utils/ToggleGroupContext.cjs");
+var import_createChangeEventDetails = require("./utils/createChangeEventDetails.cjs");
+var import_CompositeItem = require("./utils/composite/CompositeItem.cjs");
+function Toggle(props) {
+  const slot = (0, import_internal.S)("Toggle");
+  const {
+    className,
+    defaultPressed: defaultPressedProp = false,
+    disabled: disabledProp = false,
+    form,
+    // never participates in form validation
+    onPressedChange,
+    pressed: pressedProp,
+    render,
+    type,
+    // cannot change button type
+    value: valueProp,
+    nativeButton = true,
+    style,
+    ...elementProps
+  } = props;
+  const value = (0, import_useBaseUiId.useBaseUiId)(valueProp || void 0, (0, import_internal.subSlot)(slot, "value"));
+  const groupContext = (0, import_ToggleGroupContext.useToggleGroupContext)();
+  const groupValue = groupContext?.value ?? [];
+  const defaultPressed = groupContext ? void 0 : defaultPressedProp;
+  const disabled = (disabledProp || groupContext?.disabled) ?? false;
+  const [pressed, setPressedState] = (0, import_useControlled.useControlled)(
+    {
+      controlled: groupContext ? value !== void 0 && groupValue.indexOf(value) > -1 : pressedProp,
+      default: defaultPressed,
+      name: "Toggle",
+      state: "pressed"
+    },
+    (0, import_internal.subSlot)(slot, "pressed")
+  );
+  const { getButtonProps, buttonRef } = (0, import_useButton.useButton)(
+    { disabled, native: nativeButton },
+    (0, import_internal.subSlot)(slot, "btn")
+  );
+  const state = { disabled, pressed };
+  const refs = [buttonRef, props.ref];
+  const buttonProps = [
+    {
+      "aria-pressed": pressed,
+      onClick(event) {
+        const nextPressed = !pressed;
+        const details = (0, import_createChangeEventDetails.createChangeEventDetails)(import_createChangeEventDetails.REASONS.none, event);
+        onPressedChange?.(nextPressed, details);
+        if (details.isCanceled) {
+          return;
+        }
+        if (value) {
+          groupContext?.setGroupValue?.(value, nextPressed, details);
+        }
+        if (details.isCanceled) {
+          return;
+        }
+        setPressedState(nextPressed);
+      }
+    },
+    elementProps,
+    getButtonProps
+  ];
+  const element = (0, import_useRenderElement.useRenderElement)(
+    "button",
+    { render, className, style },
+    { enabled: !groupContext, state, ref: refs, props: buttonProps },
+    (0, import_internal.subSlot)(slot, "re")
+  );
+  const itemMetadata = (0, import_octane.useMemo)(
+    () => ({ disabled, focusableWhenDisabled: false }),
+    [disabled],
+    (0, import_internal.subSlot)(slot, "meta")
+  );
+  if (groupContext) {
+    return (0, import_octane.createElement)(import_CompositeItem.CompositeItem, {
+      tag: "button",
+      render,
+      className,
+      style,
+      metadata: itemMetadata,
+      state,
+      refs,
+      props: buttonProps
+    });
+  }
+  return element;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Toggle
+});