@octanejs/base-ui 0.1.30 → 0.1.32

package/dist/cjs/form.cjs

@@ -0,0 +1,177 @@
+"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 form_exports = {};
+__export(form_exports, {
+  Form: () => Form
+});
+module.exports = __toCommonJS(form_exports);
+var import_octane = require("octane");
+var import_internal = require("./internal.cjs");
+var import_useRenderElement = require("./utils/useRenderElement.cjs");
+var import_useStableCallback = require("./utils/useStableCallback.cjs");
+var import_useValueChanged = require("./utils/useValueChanged.cjs");
+var import_FormContext = require("./utils/field/FormContext.cjs");
+var import_createChangeEventDetails = require("./utils/createChangeEventDetails.cjs");
+function Form(props) {
+  const slot = (0, import_internal.S)("Form");
+  const {
+    render,
+    className,
+    validationMode = "onSubmit",
+    errors: externalErrors,
+    onSubmit,
+    onFormSubmit,
+    actionsRef,
+    style,
+    ref,
+    ...elementProps
+  } = props;
+  const formRef = (0, import_octane.useRef)(
+    { fields: /* @__PURE__ */ new Map() },
+    (0, import_internal.subSlot)(slot, "formRef")
+  );
+  const submittedRef = (0, import_octane.useRef)(false, (0, import_internal.subSlot)(slot, "submitted"));
+  const submitAttemptedRef = (0, import_octane.useRef)(false, (0, import_internal.subSlot)(slot, "attempted"));
+  const focusControl = (0, import_useStableCallback.useStableCallback)(
+    (control) => {
+      if (!control) {
+        return;
+      }
+      control.focus();
+      if (control.tagName === "INPUT") {
+        control.select();
+      }
+    },
+    (0, import_internal.subSlot)(slot, "focusControl")
+  );
+  const [errors, setErrors] = (0, import_octane.useState)(externalErrors, (0, import_internal.subSlot)(slot, "errors"));
+  (0, import_useValueChanged.useValueChanged)(
+    externalErrors,
+    () => {
+      setErrors(externalErrors);
+    },
+    (0, import_internal.subSlot)(slot, "errorsChanged")
+  );
+  (0, import_octane.useEffect)(
+    () => {
+      if (!submittedRef.current) {
+        return;
+      }
+      submittedRef.current = false;
+      const invalidFields = Array.from(formRef.current.fields.values()).filter(
+        (field) => field.validityData.state.valid === false
+      );
+      if (invalidFields.length) {
+        focusControl(invalidFields[0].controlRef.current);
+      }
+    },
+    [errors, focusControl],
+    (0, import_internal.subSlot)(slot, "e:focus")
+  );
+  const handleImperativeValidate = (0, import_useStableCallback.useStableCallback)(
+    (fieldName) => {
+      const values = Array.from(formRef.current.fields.values());
+      if (fieldName) {
+        const namedField = values.find((field) => field.name === fieldName);
+        if (namedField) {
+          namedField.validate();
+        }
+      } else {
+        values.forEach((field) => {
+          field.validate();
+        });
+      }
+    },
+    (0, import_internal.subSlot)(slot, "imperativeValidate")
+  );
+  (0, import_octane.useImperativeHandle)(
+    actionsRef,
+    () => ({ validate: handleImperativeValidate }),
+    [handleImperativeValidate],
+    (0, import_internal.subSlot)(slot, "imperative")
+  );
+  const element = (0, import_useRenderElement.useRenderElement)(
+    "form",
+    { render, className, style },
+    {
+      ref,
+      props: [
+        {
+          noValidate: true,
+          onSubmit(event) {
+            submitAttemptedRef.current = true;
+            let values = Array.from(formRef.current.fields.values());
+            values.forEach((field) => {
+              field.validate();
+            });
+            values = Array.from(formRef.current.fields.values());
+            const invalidField = values.find(
+              (field) => field.validityData.state.valid === false
+            );
+            if (invalidField) {
+              event.preventDefault();
+              focusControl(invalidField.controlRef.current);
+            } else {
+              submittedRef.current = true;
+              onSubmit?.(event);
+              if (onFormSubmit) {
+                event.preventDefault();
+                const formValues = values.reduce((acc, field) => {
+                  if (field.name) {
+                    acc[field.name] = field.getValue();
+                  }
+                  return acc;
+                }, {});
+                onFormSubmit(formValues, (0, import_createChangeEventDetails.createChangeEventDetails)(import_createChangeEventDetails.REASONS.none, event));
+              }
+            }
+          }
+        },
+        elementProps
+      ]
+    },
+    (0, import_internal.subSlot)(slot, "re")
+  );
+  const clearErrors = (0, import_useStableCallback.useStableCallback)(
+    (name) => {
+      if (name && errors && Object.prototype.hasOwnProperty.call(errors, name)) {
+        const nextErrors = { ...errors };
+        delete nextErrors[name];
+        setErrors(nextErrors);
+      }
+    },
+    (0, import_internal.subSlot)(slot, "clearErrors")
+  );
+  const contextValue = (0, import_octane.useMemo)(
+    () => ({
+      formRef,
+      validationMode,
+      errors: errors ?? {},
+      clearErrors,
+      submitAttemptedRef
+    }),
+    [formRef, validationMode, errors, clearErrors],
+    (0, import_internal.subSlot)(slot, "ctx")
+  );
+  return (0, import_octane.createElement)(import_FormContext.FormContext.Provider, { value: contextValue, children: element });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Form
+});

package/dist/cjs/index.cjs

@@ -0,0 +1,133 @@
+"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 index_exports = {};
+__export(index_exports, {
+  Accordion: () => import_accordion.Accordion,
+  AlertDialog: () => import_alert_dialog.AlertDialog,
+  Avatar: () => import_avatar.Avatar,
+  Button: () => import_button.Button,
+  CSPProvider: () => import_csp_provider.CSPProvider,
+  Checkbox: () => import_checkbox.Checkbox,
+  CheckboxGroup: () => import_checkbox_group.CheckboxGroup,
+  Collapsible: () => import_collapsible.Collapsible,
+  ContextMenu: () => import_context_menu.ContextMenu,
+  Dialog: () => import_dialog.Dialog,
+  DirectionProvider: () => import_direction_provider.DirectionProvider,
+  Field: () => import_field.Field,
+  Fieldset: () => import_fieldset.Fieldset,
+  Form: () => import_form.Form,
+  Input: () => import_input.Input,
+  Menu: () => import_menu.Menu,
+  Menubar: () => import_menubar.Menubar,
+  Meter: () => import_meter.Meter,
+  NumberField: () => import_number_field.NumberField,
+  Popover: () => import_popover.Popover,
+  PreviewCard: () => import_preview_card.PreviewCard,
+  Progress: () => import_progress.Progress,
+  Radio: () => import_radio.Radio,
+  RadioGroup: () => import_radio_group.RadioGroup,
+  Separator: () => import_separator.Separator,
+  Slider: () => import_slider.Slider,
+  Switch: () => import_switch.Switch,
+  Toast: () => import_toast.Toast,
+  Toggle: () => import_toggle.Toggle,
+  ToggleGroup: () => import_toggle_group.ToggleGroup,
+  Tooltip: () => import_tooltip.Tooltip,
+  mergeClassNames: () => import_merge_props.mergeClassNames,
+  mergeProps: () => import_merge_props.mergeProps,
+  mergePropsN: () => import_merge_props.mergePropsN,
+  useDirection: () => import_direction_provider.useDirection,
+  useMediaQuery: () => import_unstable_use_media_query.useMediaQuery,
+  useRender: () => import_use_render.useRender
+});
+module.exports = __toCommonJS(index_exports);
+var import_separator = require("./separator.cjs");
+var import_accordion = require("./accordion.cjs");
+var import_alert_dialog = require("./alert-dialog.cjs");
+var import_avatar = require("./avatar.cjs");
+var import_button = require("./button.cjs");
+var import_csp_provider = require("./csp-provider.cjs");
+var import_direction_provider = require("./direction-provider.cjs");
+var import_unstable_use_media_query = require("./unstable-use-media-query.cjs");
+var import_checkbox = require("./checkbox.cjs");
+var import_collapsible = require("./collapsible.cjs");
+var import_context_menu = require("./context-menu.cjs");
+var import_checkbox_group = require("./checkbox-group.cjs");
+var import_dialog = require("./dialog.cjs");
+var import_field = require("./field.cjs");
+var import_fieldset = require("./fieldset.cjs");
+var import_form = require("./form.cjs");
+var import_input = require("./input.cjs");
+var import_menu = require("./menu.cjs");
+var import_menubar = require("./menubar.cjs");
+var import_meter = require("./meter.cjs");
+var import_number_field = require("./number-field.cjs");
+var import_progress = require("./progress.cjs");
+var import_radio = require("./radio.cjs");
+var import_radio_group = require("./radio-group.cjs");
+var import_popover = require("./popover.cjs");
+var import_preview_card = require("./preview-card.cjs");
+var import_tooltip = require("./tooltip.cjs");
+var import_slider = require("./slider.cjs");
+var import_switch = require("./switch.cjs");
+var import_toast = require("./toast.cjs");
+var import_toggle = require("./toggle.cjs");
+var import_toggle_group = require("./toggle-group.cjs");
+var import_use_render = require("./use-render.cjs");
+var import_merge_props = require("./merge-props.cjs");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Accordion,
+  AlertDialog,
+  Avatar,
+  Button,
+  CSPProvider,
+  Checkbox,
+  CheckboxGroup,
+  Collapsible,
+  ContextMenu,
+  Dialog,
+  DirectionProvider,
+  Field,
+  Fieldset,
+  Form,
+  Input,
+  Menu,
+  Menubar,
+  Meter,
+  NumberField,
+  Popover,
+  PreviewCard,
+  Progress,
+  Radio,
+  RadioGroup,
+  Separator,
+  Slider,
+  Switch,
+  Toast,
+  Toggle,
+  ToggleGroup,
+  Tooltip,
+  mergeClassNames,
+  mergeProps,
+  mergePropsN,
+  useDirection,
+  useMediaQuery,
+  useRender
+});

package/dist/cjs/input.cjs

@@ -0,0 +1,32 @@
+"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 input_exports = {};
+__export(input_exports, {
+  Input: () => Input
+});
+module.exports = __toCommonJS(input_exports);
+var import_octane = require("octane");
+var import_field = require("./field.cjs");
+function Input(props) {
+  return (0, import_octane.createElement)(import_field.Field.Control, props);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Input
+});

package/dist/cjs/internal.cjs

@@ -0,0 +1,51 @@
+"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 internal_exports = {};
+__export(internal_exports, {
+  S: () => S,
+  splitSlot: () => splitSlot,
+  subSlot: () => subSlot
+});
+module.exports = __toCommonJS(internal_exports);
+const subSlotCache = /* @__PURE__ */ new Map();
+function subSlot(slot, tag) {
+  if (slot === void 0) return void 0;
+  let byTag = subSlotCache.get(slot);
+  if (byTag === void 0) subSlotCache.set(slot, byTag = /* @__PURE__ */ new Map());
+  let sym = byTag.get(tag);
+  if (sym === void 0) byTag.set(tag, sym = /* @__PURE__ */ Symbol.for((slot.description ?? "") + ":" + tag));
+  return sym;
+}
+function splitSlot(args) {
+  const tail = args[args.length - 1];
+  const slot = typeof tail === "symbol" ? tail : void 0;
+  return [slot !== void 0 ? args.slice(0, -1) : args, slot];
+}
+const sCache = /* @__PURE__ */ new Map();
+function S(tag) {
+  let sym = sCache.get(tag);
+  if (sym === void 0) sCache.set(tag, sym = /* @__PURE__ */ Symbol.for("@octanejs/base-ui:" + tag));
+  return sym;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  S,
+  splitSlot,
+  subSlot
+});