@octanejs/base-ui 0.1.31 → 0.1.33

package/dist/cjs/menubar.cjs

@@ -0,0 +1,132 @@
+"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 menubar_exports = {};
+__export(menubar_exports, {
+  Menubar: () => Menubar
+});
+module.exports = __toCommonJS(menubar_exports);
+var import_octane = require("octane");
+var import_internal = require("./internal.cjs");
+var import_useBaseUiId = require("./utils/useBaseUiId.cjs");
+var import_CompositeRoot = require("./utils/composite/CompositeRoot.cjs");
+var import_FloatingTree = require("./utils/floating/FloatingTree.cjs");
+var import_MenubarContext = require("./utils/MenubarContext.cjs");
+var import_createChangeEventDetails = require("./utils/createChangeEventDetails.cjs");
+const menubarStateAttributesMapping = {
+  hasSubmenuOpen(value) {
+    return value ? { "data-has-submenu-open": "" } : null;
+  }
+};
+function MenubarContent(props) {
+  const slot = (0, import_internal.S)("MenubarContent");
+  const nodeId = (0, import_FloatingTree.useFloatingNodeId)(void 0, (0, import_internal.subSlot)(slot, "nodeId"));
+  const tree = (0, import_FloatingTree.useFloatingTree)();
+  const menuEvents = tree.events;
+  const rootContext = (0, import_MenubarContext.useMenubarContext)();
+  (0, import_octane.useEffect)(
+    () => {
+      function onSubmenuOpenChange(details) {
+        if (!details.nodeId || details.parentNodeId !== nodeId) {
+          return;
+        }
+        if (details.open) {
+          if (!rootContext.hasSubmenuOpen) {
+            rootContext.setHasSubmenuOpen(true);
+          }
+        } else if (details.reason !== import_createChangeEventDetails.REASONS.siblingOpen && details.reason !== import_createChangeEventDetails.REASONS.listNavigation) {
+          rootContext.setHasSubmenuOpen(false);
+        }
+      }
+      menuEvents.on("menuopenchange", onSubmenuOpenChange);
+      return () => {
+        menuEvents.off("menuopenchange", onSubmenuOpenChange);
+      };
+    },
+    [menuEvents, nodeId, rootContext],
+    (0, import_internal.subSlot)(slot, "e")
+  );
+  return (0, import_octane.createElement)(import_FloatingTree.FloatingNode, { id: nodeId, children: props.children });
+}
+function Menubar(props) {
+  const slot = (0, import_internal.S)("Menubar");
+  const {
+    orientation = "horizontal",
+    loopFocus = true,
+    render,
+    className,
+    modal = true,
+    disabled = false,
+    id: idProp,
+    style,
+    ref: forwardedRef,
+    ...elementProps
+  } = props;
+  const [contentElement, setContentElement] = (0, import_octane.useState)(
+    null,
+    (0, import_internal.subSlot)(slot, "content")
+  );
+  const [hasSubmenuOpen, setHasSubmenuOpen] = (0, import_octane.useState)(false, (0, import_internal.subSlot)(slot, "hasSub"));
+  const id = (0, import_useBaseUiId.useBaseUiId)(idProp, (0, import_internal.subSlot)(slot, "id"));
+  const state = {
+    orientation,
+    modal,
+    hasSubmenuOpen
+  };
+  const contentRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "contentRef"));
+  const allowMouseUpTriggerRef = (0, import_octane.useRef)(false, (0, import_internal.subSlot)(slot, "amut"));
+  const context = (0, import_octane.useMemo)(
+    () => ({
+      contentElement,
+      setContentElement,
+      setHasSubmenuOpen,
+      hasSubmenuOpen,
+      modal,
+      disabled,
+      orientation,
+      allowMouseUpTriggerRef,
+      rootId: id
+    }),
+    [contentElement, hasSubmenuOpen, modal, disabled, orientation, id],
+    (0, import_internal.subSlot)(slot, "ctx")
+  );
+  return (0, import_octane.createElement)(import_MenubarContext.MenubarContext.Provider, {
+    value: context,
+    children: (0, import_octane.createElement)(import_FloatingTree.FloatingTree, {
+      children: (0, import_octane.createElement)(MenubarContent, {
+        children: (0, import_octane.createElement)(import_CompositeRoot.CompositeRoot, {
+          render,
+          className,
+          style,
+          state,
+          stateAttributesMapping: menubarStateAttributesMapping,
+          refs: [forwardedRef, setContentElement, contentRef],
+          props: [{ role: "menubar", id, "aria-orientation": orientation }, elementProps],
+          orientation,
+          loopFocus,
+          enableHomeAndEndKeys: true,
+          highlightItemOnHover: hasSubmenuOpen
+        })
+      })
+    })
+  });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Menubar
+});

package/dist/cjs/merge-props.cjs

@@ -0,0 +1,34 @@
+"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 merge_props_exports = {};
+__export(merge_props_exports, {
+  makeEventPreventable: () => import_mergeProps.makeEventPreventable,
+  mergeClassNames: () => import_mergeProps.mergeClassNames,
+  mergeProps: () => import_mergeProps.mergeProps,
+  mergePropsN: () => import_mergeProps.mergePropsN
+});
+module.exports = __toCommonJS(merge_props_exports);
+var import_mergeProps = require("./utils/mergeProps.cjs");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  makeEventPreventable,
+  mergeClassNames,
+  mergeProps,
+  mergePropsN
+});

package/dist/cjs/meter.cjs

@@ -0,0 +1,169 @@
+"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 meter_exports = {};
+__export(meter_exports, {
+  Meter: () => Meter
+});
+module.exports = __toCommonJS(meter_exports);
+var import_octane = require("octane");
+var import_internal = require("./internal.cjs");
+var import_useRenderElement = require("./utils/useRenderElement.cjs");
+var import_useRegisteredLabelId = require("./utils/useRegisteredLabelId.cjs");
+var import_valueToPercent = require("./utils/valueToPercent.cjs");
+var import_clamp = require("./utils/clamp.cjs");
+var import_formatNumber = require("./utils/formatNumber.cjs");
+var import_visuallyHidden = require("./utils/visuallyHidden.cjs");
+const MeterRootContext = (0, import_octane.createContext)(void 0);
+function useMeterRootContext() {
+  const context = (0, import_octane.useContext)(MeterRootContext);
+  if (context === void 0) {
+    throw new Error(
+      "Base UI: MeterRootContext is missing. Meter parts must be placed within <Meter.Root>."
+    );
+  }
+  return context;
+}
+function MeterRoot(props) {
+  const slot = (0, import_internal.S)("MeterRoot");
+  const {
+    format,
+    getAriaValueText,
+    locale,
+    max = 100,
+    min = 0,
+    value: valueProp,
+    render,
+    className,
+    children,
+    style,
+    ref,
+    ...elementProps
+  } = props;
+  const [labelId, setLabelId] = (0, import_octane.useState)(void 0, (0, import_internal.subSlot)(slot, "labelId"));
+  const rawPercentage = (0, import_valueToPercent.valueToPercent)(valueProp, min, max);
+  const percentageValue = (0, import_clamp.clamp)(Number.isNaN(rawPercentage) ? 0 : rawPercentage, 0, 100);
+  const clampedValue = (0, import_clamp.clamp)(Number.isNaN(valueProp) ? min : valueProp, min, max);
+  const formattedValue = format ? (0, import_formatNumber.formatNumber)(valueProp, locale, format) : (0, import_formatNumber.formatNumber)(percentageValue / 100, locale, { style: "percent" });
+  let ariaValuetext = formattedValue;
+  if (getAriaValueText) {
+    ariaValuetext = getAriaValueText(formattedValue, valueProp);
+  }
+  const defaultProps = {
+    "aria-labelledby": labelId,
+    "aria-valuemax": max,
+    "aria-valuemin": min,
+    "aria-valuenow": clampedValue,
+    "aria-valuetext": ariaValuetext,
+    role: "meter",
+    // Octane reconciles an ARRAY child as a keyed list, so each slot carries a stable key;
+    // values that cannot be keyed in place go through a keyed Fragment.
+    children: [
+      (0, import_octane.createElement)(import_octane.Fragment, { key: "children", children }),
+      // force NVDA to read the label (mui/base-ui#4184)
+      (0, import_octane.createElement)("span", {
+        key: "sr-hint",
+        role: "presentation",
+        style: import_visuallyHidden.visuallyHidden,
+        children: "x"
+      })
+    ]
+  };
+  const contextValue = (0, import_octane.useMemo)(
+    () => ({ formattedValue, max, min, percentageValue, setLabelId, value: valueProp }),
+    [formattedValue, max, min, percentageValue, setLabelId, valueProp],
+    (0, import_internal.subSlot)(slot, "ctx")
+  );
+  const element = (0, import_useRenderElement.useRenderElement)(
+    "div",
+    { render, className, style },
+    { ref, props: [defaultProps, elementProps] },
+    (0, import_internal.subSlot)(slot, "re")
+  );
+  return (0, import_octane.createElement)(MeterRootContext.Provider, { value: contextValue, children: element });
+}
+function MeterTrack(props) {
+  const slot = (0, import_internal.S)("MeterTrack");
+  const { render, className, style, ref, ...elementProps } = props;
+  return (0, import_useRenderElement.useRenderElement)(
+    "div",
+    { render, className, style },
+    { ref, props: elementProps },
+    (0, import_internal.subSlot)(slot, "re")
+  );
+}
+function MeterIndicator(props) {
+  const slot = (0, import_internal.S)("MeterIndicator");
+  const { render, className, style, ref, ...elementProps } = props;
+  const { percentageValue } = useMeterRootContext();
+  return (0, import_useRenderElement.useRenderElement)(
+    "div",
+    { render, className, style },
+    {
+      ref,
+      props: [
+        { style: { insetInlineStart: 0, height: "inherit", width: `${percentageValue}%` } },
+        elementProps
+      ]
+    },
+    (0, import_internal.subSlot)(slot, "re")
+  );
+}
+function MeterValue(props) {
+  const slot = (0, import_internal.S)("MeterValue");
+  const { className, render, children, style, ref, ...elementProps } = props;
+  const { value, formattedValue } = useMeterRootContext();
+  return (0, import_useRenderElement.useRenderElement)(
+    "span",
+    { render, className, style },
+    {
+      ref,
+      props: [
+        {
+          "aria-hidden": true,
+          children: typeof children === "function" ? children(formattedValue, value) : formattedValue
+        },
+        elementProps
+      ]
+    },
+    (0, import_internal.subSlot)(slot, "re")
+  );
+}
+function MeterLabel(props) {
+  const slot = (0, import_internal.S)("MeterLabel");
+  const { render, className, style, id: idProp, ref, ...elementProps } = props;
+  const { setLabelId } = useMeterRootContext();
+  const id = (0, import_useRegisteredLabelId.useRegisteredLabelId)(idProp, setLabelId, (0, import_internal.subSlot)(slot, "labelId"));
+  return (0, import_useRenderElement.useRenderElement)(
+    "span",
+    { render, className, style },
+    { ref, props: [{ id, role: "presentation" }, elementProps] },
+    (0, import_internal.subSlot)(slot, "re")
+  );
+}
+const Meter = {
+  Root: MeterRoot,
+  Track: MeterTrack,
+  Indicator: MeterIndicator,
+  Value: MeterValue,
+  Label: MeterLabel
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Meter
+});