react-luna-form 0.0.40 → 0.0.42

package/dist/timezone/esm/input-timezone-E45Y56W6.js

@@ -0,0 +1,766 @@
+import {
+  formatMarkdown,
+  getEntity,
+  getSchema,
+  handleProxyEvent,
+  handleSourceEvent,
+  handleStateEvent,
+  handleValueEvent,
+  interpolateIfNeeded,
+  isCheckbox,
+  isClickable,
+  isOptions,
+  isRadio,
+  isValidValue,
+  loadTimezones,
+  mergeSource,
+  prepareInputProps,
+  prepareInputValue,
+  translate,
+  validateCustom
+} from "./chunk-EFQWCKYQ.js";
+
+// src/component/description.tsx
+import { jsx } from "react/jsx-runtime";
+function Description(props) {
+  return /* @__PURE__ */ jsx("p", { className: "-mt-2 text-xs leading-normal font-normal text-slate-600 dark:text-slate-400", children: props.children });
+}
+
+// src/lib/string.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function formatMarkdown2(text) {
+  return formatMarkdown(
+    text,
+    (index, url, text2) => {
+      return /* @__PURE__ */ jsx2(
+        "a",
+        {
+          className: "underline",
+          href: url,
+          rel: "noopener noreferrer",
+          target: "_blank",
+          children: text2
+        },
+        `${url}-${index}`
+      );
+    }
+  );
+}
+
+// src/component/formatted-description.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function FormattedDescription(props) {
+  const interpolateOpts = {
+    context: props.context,
+    env: props.config?.env
+  };
+  const text = translate(
+    interpolateIfNeeded(props.text, interpolateOpts),
+    props.translations
+  );
+  const content = formatMarkdown2(text);
+  if (content) {
+    return /* @__PURE__ */ jsx3(Description, { children: content });
+  }
+  return null;
+}
+
+// src/component/label.tsx
+import { twMerge } from "tailwind-merge";
+import { jsx as jsx4, jsxs } from "react/jsx-runtime";
+function Label(props) {
+  const showOptionalLabel = props.style?.showOptionalLabel ?? true;
+  const normal = isRadio(props.field) || isCheckbox(props.field);
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      "data-slot": "field-label",
+      "data-normal": normal,
+      className: twMerge(
+        "flex w-fit items-center gap-2 text-sm leading-snug font-medium select-none",
+        "data-[normal=true]:font-normal",
+        "group-data-[readonly=true]:cursor-not-allowed group-data-[readonly=true]:opacity-50"
+      ),
+      htmlFor: props.field.name,
+      children: [
+        props.children,
+        showOptionalLabel && !props.field.required && /* @__PURE__ */ jsx4("span", { className: "text-sm text-slate-600 dark:text-slate-400", children: translate("(Optional)", props.translations) })
+      ]
+    }
+  );
+}
+
+// src/component/input-label.tsx
+import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+function InputLabel(props) {
+  const interpolateOpts = {
+    context: props.context,
+    env: props.config?.env
+  };
+  const label = interpolateIfNeeded(props.field.label, interpolateOpts);
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      "data-slot": "field-content",
+      className: "flex w-full flex-1 flex-col gap-1.5 leading-snug",
+      children: [
+        /* @__PURE__ */ jsx5(
+          Label,
+          {
+            field: props.field,
+            style: props.config?.style,
+            translations: props.translations,
+            children: translate(label, props.translations)
+          }
+        ),
+        props.horizontal === true && /* @__PURE__ */ jsx5(
+          FormattedDescription,
+          {
+            config: props.config,
+            context: props.context,
+            text: props.field.description,
+            translations: props.translations
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/component/input-group.tsx
+import { Fragment, jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+function InputGroup(props) {
+  return /* @__PURE__ */ jsxs3(Fragment, { children: [
+    props.field.name && props.field.label && /* @__PURE__ */ jsx6(
+      InputLabel,
+      {
+        config: props.config,
+        context: props.context,
+        field: props.field,
+        horizontal: props.horizontal,
+        translations: props.translations
+      }
+    ),
+    props.children,
+    props.horizontal === false && /* @__PURE__ */ jsx6(
+      FormattedDescription,
+      {
+        config: props.config,
+        context: props.context,
+        text: props.field.description,
+        translations: props.translations
+      }
+    )
+  ] });
+}
+
+// src/lib/render-If-exists.ts
+function renderIfExists(value, render) {
+  if (!value) {
+    return null;
+  }
+  return render(value);
+}
+
+// src/client/component/input-base.tsx
+import { useCallback as useCallback4, useEffect as useEffect4, useRef as useRef4 } from "react";
+
+// src/client/lib/store-helper.ts
+import { atom } from "jotai";
+import { atomFamily } from "jotai-family";
+import { deepEqual } from "fast-equals";
+function omitKey(obj, key) {
+  const { [key]: _removed, ...rest } = obj;
+  return rest;
+}
+function createRecordAtomFamily(baseAtom) {
+  return atomFamily(
+    (name) => atom(
+      (get) => {
+        return get(baseAtom)[name] ?? void 0;
+      },
+      (get, set, newValue) => {
+        const current = get(baseAtom);
+        if (newValue !== void 0 && newValue !== null) {
+          const currentValue = current[name];
+          if (!deepEqual(currentValue, newValue)) {
+            set(baseAtom, { ...current, [name]: newValue });
+          }
+        } else if (name in current) {
+          set(baseAtom, omitKey(current, name));
+        }
+      }
+    )
+  );
+}
+function createClearAllAtom(baseAtom) {
+  return atom(null, (get, set) => {
+    const current = get(baseAtom);
+    if (current && Object.keys(current).length > 0) {
+      set(baseAtom, {});
+    }
+  });
+}
+function createClearAtom(baseAtom) {
+  return atom(null, (get, set, names) => {
+    const current = get(baseAtom);
+    const next = { ...current };
+    let hasChanges = false;
+    for (const name of names) {
+      if (name in next) {
+        delete next[name];
+        hasChanges = true;
+      }
+    }
+    if (hasChanges) {
+      set(baseAtom, next);
+    }
+  });
+}
+function createBulkReportAtom(baseAtom) {
+  return atom(null, (get, set, newValue) => {
+    const current = get(baseAtom);
+    if (!deepEqual(current, newValue)) {
+      set(baseAtom, newValue);
+    }
+  });
+}
+function createNestedRecordAtomFamily(baseAtom, options = {}) {
+  const { merge: merge2, validateTarget } = options;
+  return atomFamily(
+    (contributorName) => atom(
+      (get) => {
+        const current = get(baseAtom)[contributorName];
+        if (current && merge2) {
+          return merge2(Object.values(current));
+        }
+        return void 0;
+      },
+      (get, set, target, value) => {
+        if (validateTarget && !validateTarget(target)) {
+          return;
+        }
+        const current = get(baseAtom);
+        const targetContributions = { ...current[target] ?? {} };
+        if (value !== void 0 && value !== null) {
+          const currentContribution = targetContributions[contributorName];
+          if (!currentContribution || !deepEqual(currentContribution, value)) {
+            targetContributions[contributorName] = value;
+            set(baseAtom, {
+              ...current,
+              [target]: targetContributions
+            });
+          }
+        } else if (contributorName in targetContributions) {
+          delete targetContributions[contributorName];
+          if (Object.keys(targetContributions).length === 0) {
+            set(baseAtom, omitKey(current, target));
+          } else {
+            set(baseAtom, {
+              ...current,
+              [target]: targetContributions
+            });
+          }
+        }
+      }
+    )
+  );
+}
+function createNestedClearAtom(baseAtom) {
+  return atom(null, (get, set, contributorNames) => {
+    const current = get(baseAtom);
+    const next = { ...current };
+    let hasChanges = false;
+    for (const name of contributorNames) {
+      if (name in next) {
+        delete next[name];
+        hasChanges = true;
+      }
+    }
+    for (const target in next) {
+      const targetContributions = { ...next[target] };
+      let targetChanged = false;
+      for (const contributorName of contributorNames) {
+        if (contributorName in targetContributions) {
+          delete targetContributions[contributorName];
+          targetChanged = true;
+          hasChanges = true;
+        }
+      }
+      if (targetChanged) {
+        if (Object.keys(targetContributions).length === 0) {
+          delete next[target];
+        } else {
+          next[target] = targetContributions;
+        }
+      }
+    }
+    if (hasChanges) {
+      set(baseAtom, next);
+    }
+  });
+}
+function createAtomStore(initialValue = {}) {
+  const baseAtom = atom(initialValue);
+  return {
+    atom: baseAtom,
+    clearAll: createClearAllAtom(baseAtom),
+    clear: createClearAtom(baseAtom),
+    bulkReport: createBulkReportAtom(baseAtom),
+    report: createRecordAtomFamily(baseAtom)
+  };
+}
+
+// src/client/lib/state-store.ts
+var store = createAtomStore();
+var fieldStateAtom = store.atom;
+var reportFieldStateAtom = store.report;
+
+// src/client/lib/error-store.ts
+var store2 = createAtomStore();
+var clearInputErrorAtom = store2.clear;
+var reportErrorAtom = store2.bulkReport;
+var reportInputErrorAtom = store2.report;
+
+// src/client/lib/value-store.ts
+var store3 = createAtomStore();
+var valueAtom = store3.atom;
+var clearAllValueAtom = store3.clearAll;
+var clearInputValueAtom = store3.clear;
+var reportValueAtom = store3.report;
+
+// src/client/hook/use-input-core.ts
+import { useCallback as useCallback2, useRef as useRef2, useTransition } from "react";
+
+// src/client/hook/use-input.ts
+import { useEffect, useEffectEvent, useMemo } from "react";
+function useInput(field, onMount, onUnmount, translations) {
+  const { name } = field;
+  const schema = useMemo(
+    () => getSchema(field, translations),
+    [field, translations]
+  );
+  const onMountHandler = useEffectEvent((name2) => {
+    if (name2) {
+      onMount(name2, schema, field);
+    }
+  });
+  const onUnmountHandler = useEffectEvent((name2) => {
+    if (name2) {
+      onUnmount(name2);
+    }
+  });
+  useEffect(() => {
+    onMountHandler(name);
+    return () => {
+      onUnmountHandler(name);
+    };
+  }, [name]);
+  return schema;
+}
+
+// src/client/hook/use-input-core.ts
+import { useSetAtom, useStore } from "jotai";
+
+// src/client/hook/use-timeout.ts
+import { useCallback, useEffect as useEffect2, useRef } from "react";
+function useTimeout() {
+  const timeoutRef = useRef(null);
+  useEffect2(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+  const setTimeoutRef = useCallback((callback, delay) => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+    timeoutRef.current = setTimeout(callback, delay);
+  }, []);
+  return setTimeoutRef;
+}
+
+// src/client/hook/use-input-core.ts
+function useInputCore(props, deps) {
+  const store4 = useStore();
+  const entity = props.field.advanced?.entity;
+  const setTimeoutRef = useTimeout();
+  const [, startTransition] = useTransition();
+  const { setValue, shouldSkipOnChange, value, setSource } = deps;
+  const valueRef = useRef2(value);
+  valueRef.current = value;
+  const translationsRef = useRef2(props.translations);
+  translationsRef.current = props.translations;
+  const hasClickable = isClickable(props.field);
+  const setValues = useSetAtom(valueAtom);
+  const setFieldStates = useSetAtom(fieldStateAtom);
+  const setErrors = useSetAtom(reportInputErrorAtom(props.field.name));
+  const schema = useInput(
+    props.field,
+    props.onMount,
+    props.onUnmount,
+    props.translations
+  );
+  const placeholder = translate(
+    props.commonProps.placeholder,
+    props.translations
+  );
+  const commonProps = {
+    ...props.commonProps,
+    placeholder
+  };
+  const onValueChangeRef = useRef2(null);
+  onValueChangeRef.current = (value2) => {
+    setValue(value2);
+    if (props.onValueChange) {
+      const attributes = props.dataAttributes ?? {};
+      props.onValueChange({
+        data: Object.keys(attributes).length > 0 ? attributes : void 0,
+        name: props.field.name,
+        type: props.field.type,
+        value: value2
+      });
+    }
+  };
+  const applyChangeEventsRef = useRef2(
+    null
+  );
+  applyChangeEventsRef.current = (selected) => {
+    const events = props.field.event?.change;
+    if (!events) {
+      return;
+    }
+    handleProxyEvent(events, ({ sources, states, values }) => {
+      startTransition(() => {
+        handleSourceEvent(
+          selected,
+          sources,
+          (target, source) => setSource(target, source)
+        );
+        handleStateEvent(selected, states, (targets, state) => {
+          setFieldStates((prev) => {
+            if (state) {
+              return targets.reduce(
+                (acc, target) => ({
+                  ...acc,
+                  [target]: state
+                }),
+                prev
+              );
+            }
+            return targets.reduce((acc, target) => omitKey(acc, target), prev);
+          });
+        });
+        handleValueEvent(selected, values, (target, value2) => {
+          setValues((prev) => ({
+            ...prev,
+            [target]: value2
+          }));
+        });
+      });
+    });
+  };
+  const validated = useCallback2(
+    (value2) => {
+      const results = schema.safeParse(value2);
+      const errors = results.error?.issues.map((issue) => issue.message) ?? [];
+      const custom = props.field.validation?.custom;
+      const customErrors = custom ? validateCustom(
+        value2,
+        custom,
+        (name) => store4.get(reportValueAtom(name)),
+        translationsRef.current
+      ) : [];
+      setErrors([...errors, ...customErrors]);
+    },
+    [props.field.validation?.custom, schema, setErrors, store4]
+  );
+  const onBlur = useCallback2(
+    (event) => {
+      if (!hasClickable) {
+        const value2 = event.target.value;
+        if (props.config.validation.blur) {
+          validated(value2);
+        }
+      }
+    },
+    [hasClickable, props.config.validation.blur, validated]
+  );
+  return {
+    applyChangeEventsRef,
+    commonProps,
+    entity,
+    hasClickable,
+    onBlur,
+    onValueChangeRef,
+    setTimeoutRef,
+    shouldSkipOnChange,
+    validated,
+    valueRef
+  };
+}
+
+// src/client/hook/use-value.ts
+import { deepEqual as deepEqual2 } from "fast-equals";
+import { useAtom } from "jotai";
+import { useCallback as useCallback3, useEffect as useEffect3, useRef as useRef3, useEffectEvent as useEffectEvent2 } from "react";
+function useValue(field, currentValue) {
+  const { name } = field;
+  const skipNextOnChangeRef = useRef3(false);
+  const [value, setValue] = useAtom(reportValueAtom(name));
+  const onCurrentValueChange = useEffectEvent2(
+    (currentValue2) => {
+      const newValue = resolveValue(name, currentValue2);
+      if (isValidValue(newValue)) {
+        if (!deepEqual2(value, newValue)) {
+          skipNextOnChangeRef.current = true;
+        }
+        setValue(newValue);
+      }
+    }
+  );
+  useEffect3(() => {
+    if (!currentValue) {
+      return;
+    }
+    onCurrentValueChange(currentValue);
+  }, [currentValue]);
+  const shouldSkipOnChange = useCallback3(() => {
+    if (skipNextOnChangeRef.current) {
+      skipNextOnChangeRef.current = false;
+      return true;
+    }
+    return false;
+  }, []);
+  return {
+    setValue,
+    shouldSkipOnChange,
+    value
+  };
+}
+function resolveValue(name, currentValue) {
+  if (name in currentValue) {
+    return currentValue[name];
+  }
+  if (!name.includes(".")) {
+    return void 0;
+  }
+  const keys = name.split(".");
+  let result = currentValue;
+  for (const key of keys) {
+    if (result === null || result === void 0) {
+      return void 0;
+    }
+    if (Array.isArray(result)) {
+      const index = Number(key);
+      result = Number.isInteger(index) ? result[index] : void 0;
+    } else if (typeof result === "object") {
+      result = result[key];
+    } else {
+      return void 0;
+    }
+  }
+  return result;
+}
+
+// src/client/component/input-base.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+function InputBase(props) {
+  const {
+    useSource,
+    useExtraProps,
+    getValue,
+    shouldSkipChange,
+    dispatchChange,
+    buildInitialSelected,
+    isInitialReady
+  } = props.strategies;
+  const { setValue, shouldSkipOnChange, value } = useValue(
+    props.field,
+    props.value
+  );
+  const { data, setSource } = useSource(props.field, props.config, value);
+  const {
+    applyChangeEventsRef,
+    commonProps,
+    entity,
+    hasClickable,
+    onBlur,
+    onValueChangeRef,
+    setTimeoutRef,
+    validated,
+    valueRef
+  } = useInputCore(props, { setValue, shouldSkipOnChange, value, setSource });
+  const extraProps = useExtraProps?.(props.field);
+  const initialEventsProcessedRef = useRef4(false);
+  const { commonPropsWithOptions, defaultValue } = prepareInputProps(
+    props.field,
+    commonProps,
+    data,
+    value
+  );
+  const inputProps = prepareInputValue(props.field, defaultValue);
+  useEffect4(() => {
+    if (initialEventsProcessedRef.current || !props.value) {
+      return;
+    }
+    if (!props.field.event?.change) {
+      initialEventsProcessedRef.current = true;
+      return;
+    }
+    if (!isValidValue(defaultValue)) {
+      return;
+    }
+    if (!isInitialReady(props.field, defaultValue, data)) {
+      return;
+    }
+    initialEventsProcessedRef.current = true;
+    const selected = buildInitialSelected(defaultValue, data, entity);
+    applyChangeEventsRef.current?.(selected);
+  }, [
+    applyChangeEventsRef,
+    buildInitialSelected,
+    data,
+    defaultValue,
+    entity,
+    isInitialReady,
+    props.field,
+    props.value
+  ]);
+  const onChange = useCallback4(
+    (event) => {
+      const inputValue = getValue(event, props.field);
+      if (shouldSkipChange({
+        shouldSkipOnChange,
+        hasClickable,
+        inputValue,
+        valueRef
+      })) {
+        return;
+      }
+      onValueChangeRef.current?.(inputValue);
+      if (props.config.validation.change) {
+        validated(inputValue);
+      }
+      if (props.field.event?.change) {
+        dispatchChange({
+          applyChangeEventsRef,
+          data,
+          entity,
+          inputValue,
+          setTimeoutRef
+        });
+      }
+    },
+    [
+      applyChangeEventsRef,
+      data,
+      dispatchChange,
+      entity,
+      getValue,
+      hasClickable,
+      onValueChangeRef,
+      props.config.validation.change,
+      props.field,
+      setTimeoutRef,
+      shouldSkipChange,
+      shouldSkipOnChange,
+      validated,
+      valueRef
+    ]
+  );
+  return renderIfExists(props.config.inputs[props.field.type], (Component) => /* @__PURE__ */ jsx7(
+    InputGroup,
+    {
+      config: props.config,
+      context: props.context,
+      field: props.field,
+      horizontal: props.horizontal,
+      translations: props.translations,
+      children: /* @__PURE__ */ jsx7(
+        Component,
+        {
+          ...commonPropsWithOptions,
+          ...props.ariaAttributes,
+          ...props.dataAttributes,
+          ...extraProps,
+          ...inputProps,
+          onBlur,
+          onChange
+        }
+      )
+    }
+  ));
+}
+
+// src/client/component/input-create.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+function createInput(strategies) {
+  return function CreateInput(props) {
+    return /* @__PURE__ */ jsx8(InputBase, { ...props, strategies });
+  };
+}
+
+// src/client/lib/source-store.ts
+import { atom as atom2 } from "jotai";
+var merge = (values) => {
+  const merged = mergeSource(values);
+  if (merged) {
+    return merged;
+  }
+  return void 0;
+};
+var validate = (target) => target.trim() !== "";
+var sourceAtom = atom2({});
+var reportSourceAtom = createNestedRecordAtomFamily(
+  sourceAtom,
+  {
+    merge,
+    validateTarget: validate
+  }
+);
+var clearInputSourceAtom = createNestedClearAtom(sourceAtom);
+
+// src/client/hook/use-timezone-options.ts
+import { useEffect as useEffect5, useState } from "react";
+import { useSetAtom as useSetAtom2 } from "jotai";
+var cache = null;
+function useTimezoneOptions(field) {
+  const setSource = useSetAtom2(reportSourceAtom(field.name));
+  const [data, setData] = useState(cache);
+  useEffect5(() => {
+    if (cache) {
+      return;
+    }
+    let cancelled = false;
+    loadTimezones().then((groups) => {
+      cache = groups;
+      if (!cancelled) {
+        setData(groups);
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+  return { data, setSource };
+}
+
+// src/client/component/input-timezone.tsx
+var InputTimezone = createInput({
+  useSource: useTimezoneOptions,
+  getValue: (event) => event.target.value,
+  shouldSkipChange: ({ shouldSkipOnChange, hasClickable }) => !hasClickable && shouldSkipOnChange(),
+  dispatchChange: ({ applyChangeEventsRef, data, entity, inputValue }) => {
+    applyChangeEventsRef.current?.(getEntity(inputValue, data, entity));
+  },
+  buildInitialSelected: (defaultValue, data, entity) => getEntity(String(defaultValue), data, entity),
+  isInitialReady: (field, defaultValue, data) => (!isOptions(field) || !!data && data.length > 0) && isValidValue(defaultValue)
+});
+var input_timezone_default = InputTimezone;
+export {
+  input_timezone_default as default
+};