unifyedx-storybook-new 0.1.43 → 0.1.45

package/dist/unifyedx-storybook-new.es.js

@@ -6814,7 +6814,63 @@ class DateLib {
     formatNumber(value) {
         return this.replaceDigits(value.toString());
     }
-}
+    /**
+     * Returns the preferred ordering for month and year labels for the current
+     * locale.
+     */
+    getMonthYearOrder() {
+        const code = this.options.locale?.code;
+        if (!code) {
+            return "month-first";
+        }
+        return DateLib.yearFirstLocales.has(code) ? "year-first" : "month-first";
+    }
+    /**
+     * Formats the month/year pair respecting locale conventions.
+     *
+     * @since 9.11.0
+     */
+    formatMonthYear(date) {
+        const { locale, timeZone, numerals } = this.options;
+        const localeCode = locale?.code;
+        if (localeCode && DateLib.yearFirstLocales.has(localeCode)) {
+            try {
+                const intl = new Intl.DateTimeFormat(localeCode, {
+                    month: "long",
+                    year: "numeric",
+                    timeZone,
+                    numberingSystem: numerals,
+                });
+                const formatted = intl.format(date);
+                return formatted;
+            }
+            catch {
+                // Fallback to date-fns formatting below.
+            }
+        }
+        const pattern = this.getMonthYearOrder() === "year-first" ? "y LLLL" : "LLLL y";
+        return this.format(date, pattern);
+    }
+}
+DateLib.yearFirstLocales = new Set([
+    "eu",
+    "hu",
+    "ja",
+    "ja-Hira",
+    "ja-JP",
+    "ko",
+    "ko-KR",
+    "lt",
+    "lt-LT",
+    "lv",
+    "lv-LV",
+    "mn",
+    "mn-MN",
+    "zh",
+    "zh-CN",
+    "zh-HK",
+    "zh-TW",
+]);
 /**
  * The default date library with English locale.
  *
@@ -7710,7 +7766,7 @@ function getDefaultClassNames() {
 /**
  * Formats the caption of the month.
  *
- * @defaultValue `LLLL y` (e.g., "November 2022").
+ * @defaultValue Locale-specific month/year order (e.g., "November 2022").
  * @param month The date representing the month.
  * @param options Configuration options for the date library.
  * @param dateLib The date library to use for formatting. If not provided, a new
@@ -7720,7 +7776,8 @@ function getDefaultClassNames() {
  * @see https://daypicker.dev/docs/translation#custom-formatters
  */
 function formatCaption(month, options, dateLib) {
-    return (dateLib ?? new DateLib(options)).format(month, "LLLL y");
+    const lib = dateLib ?? new DateLib(options);
+    return lib.formatMonthYear(month);
 }
 /**
  * @private
@@ -8012,7 +8069,7 @@ const labelDay = labelDayButton;
  * Generates the ARIA label for the month grid, which is announced when entering
  * the grid.
  *
- * @defaultValue `LLLL y` (e.g., "November 2022").
+ * @defaultValue Locale-specific month/year order (e.g., "November 2022").
  * @param date - The date representing the month.
  * @param options - Optional configuration for the date formatting library.
  * @param dateLib - An optional instance of the date formatting library.
@@ -8021,7 +8078,8 @@ const labelDay = labelDayButton;
  * @see https://daypicker.dev/docs/translation#aria-labels
  */
 function labelGrid(date, options, dateLib) {
-    return (dateLib ?? new DateLib(options)).format(date, "LLLL y");
+    const lib = dateLib ?? new DateLib(options);
+    return lib.formatMonthYear(date);
 }
 /**
  * @ignore
@@ -9504,7 +9562,7 @@ function DayPicker(initialProps) {
         formatters,
     };
     return (React__default.createElement(dayPickerContext.Provider, { value: contextValue },
-        React__default.createElement(components.Root, { rootRef: props.animate ? rootElRef : undefined, className: className, style: style, dir: props.dir, id: props.id, lang: props.lang, nonce: props.nonce, title: props.title, role: props.role, "aria-label": props["aria-label"], ...dataAttributes },
+        React__default.createElement(components.Root, { rootRef: props.animate ? rootElRef : undefined, className: className, style: style, dir: props.dir, id: props.id, lang: props.lang, nonce: props.nonce, title: props.title, role: props.role, "aria-label": props["aria-label"], "aria-labelledby": props["aria-labelledby"], ...dataAttributes },
             React__default.createElement(components.Months, { className: classNames[UI.Months], style: styles?.[UI.Months] },
                 !props.hideNavigation && !navLayout && (React__default.createElement(components.Nav, { "data-animated-nav": props.animate ? "true" : undefined, className: classNames[UI.Nav], style: styles?.[UI.Nav], "aria-label": labelNav(), onPreviousClick: handlePreviousClick, onNextClick: handleNextClick, previousMonth: previousMonth, nextMonth: nextMonth })),
                 months.map((calendarMonth, displayIndex) => {
@@ -9516,10 +9574,16 @@ function DayPicker(initialProps) {
                             displayIndex === 0 && (React__default.createElement(components.PreviousMonthButton, { type: "button", className: classNames[UI.PreviousMonthButton], tabIndex: previousMonth ? undefined : -1, "aria-disabled": previousMonth ? undefined : true, "aria-label": labelPrevious(previousMonth), onClick: handlePreviousClick, "data-animated-button": props.animate ? "true" : undefined },
                             React__default.createElement(components.Chevron, { disabled: previousMonth ? undefined : true, className: classNames[UI.Chevron], orientation: props.dir === "rtl" ? "right" : "left" }))),
                         React__default.createElement(components.MonthCaption, { "data-animated-caption": props.animate ? "true" : undefined, className: classNames[UI.MonthCaption], style: styles?.[UI.MonthCaption], calendarMonth: calendarMonth, displayIndex: displayIndex }, captionLayout?.startsWith("dropdown") ? (React__default.createElement(components.DropdownNav, { className: classNames[UI.Dropdowns], style: styles?.[UI.Dropdowns] },
-                            captionLayout === "dropdown" ||
-                                captionLayout === "dropdown-months" ? (React__default.createElement(components.MonthsDropdown, { className: classNames[UI.MonthsDropdown], "aria-label": labelMonthDropdown(), classNames: classNames, components: components, disabled: Boolean(props.disableNavigation), onChange: handleMonthChange(calendarMonth.date), options: getMonthOptions(calendarMonth.date, navStart, navEnd, formatters, dateLib), style: styles?.[UI.Dropdown], value: dateLib.getMonth(calendarMonth.date) })) : (React__default.createElement("span", null, formatMonthDropdown(calendarMonth.date, dateLib))),
-                            captionLayout === "dropdown" ||
-                                captionLayout === "dropdown-years" ? (React__default.createElement(components.YearsDropdown, { className: classNames[UI.YearsDropdown], "aria-label": labelYearDropdown(dateLib.options), classNames: classNames, components: components, disabled: Boolean(props.disableNavigation), onChange: handleYearChange(calendarMonth.date), options: getYearOptions(navStart, navEnd, formatters, dateLib, Boolean(props.reverseYears)), style: styles?.[UI.Dropdown], value: dateLib.getYear(calendarMonth.date) })) : (React__default.createElement("span", null, formatYearDropdown(calendarMonth.date, dateLib))),
+                            (() => {
+                                const monthControl = captionLayout === "dropdown" ||
+                                    captionLayout === "dropdown-months" ? (React__default.createElement(components.MonthsDropdown, { key: "month", className: classNames[UI.MonthsDropdown], "aria-label": labelMonthDropdown(), classNames: classNames, components: components, disabled: Boolean(props.disableNavigation), onChange: handleMonthChange(calendarMonth.date), options: getMonthOptions(calendarMonth.date, navStart, navEnd, formatters, dateLib), style: styles?.[UI.Dropdown], value: dateLib.getMonth(calendarMonth.date) })) : (React__default.createElement("span", { key: "month" }, formatMonthDropdown(calendarMonth.date, dateLib)));
+                                const yearControl = captionLayout === "dropdown" ||
+                                    captionLayout === "dropdown-years" ? (React__default.createElement(components.YearsDropdown, { key: "year", className: classNames[UI.YearsDropdown], "aria-label": labelYearDropdown(dateLib.options), classNames: classNames, components: components, disabled: Boolean(props.disableNavigation), onChange: handleYearChange(calendarMonth.date), options: getYearOptions(navStart, navEnd, formatters, dateLib, Boolean(props.reverseYears)), style: styles?.[UI.Dropdown], value: dateLib.getYear(calendarMonth.date) })) : (React__default.createElement("span", { key: "year" }, formatYearDropdown(calendarMonth.date, dateLib)));
+                                const controls = dateLib.getMonthYearOrder() === "year-first"
+                                    ? [yearControl, monthControl]
+                                    : [monthControl, yearControl];
+                                return controls;
+                            })(),
                             React__default.createElement("span", { role: "status", "aria-live": "polite", style: {
                                     border: 0,
                                     clip: "rect(0 0 0 0)",
@@ -43733,6 +43797,26 @@ var createSubject = () => {
     };
 };
 
+function extractFormValues(fieldsState, formValues) {
+    const values = {};
+    for (const key in fieldsState) {
+        if (fieldsState.hasOwnProperty(key)) {
+            const fieldState = fieldsState[key];
+            const fieldValue = formValues[key];
+            if (fieldState && isObject$2(fieldState) && fieldValue) {
+                const nestedFieldsState = extractFormValues(fieldState, fieldValue);
+                if (isObject$2(nestedFieldsState)) {
+                    values[key] = nestedFieldsState;
+                }
+            }
+            else if (fieldsState[key]) {
+                values[key] = fieldValue;
+            }
+        }
+    }
+    return values;
+}
+
 var isEmptyObject$1 = (value) => isObject$2(value) && !Object.keys(value).length;
 
 var isFileInput = (element) => element.type === 'file';
@@ -43801,46 +43885,40 @@ var objectHasFunction = (data) => {
     return false;
 };
 
+function isTraversable(value) {
+    return Array.isArray(value) || (isObject$2(value) && !objectHasFunction(value));
+}
 function markFieldsDirty(data, fields = {}) {
-    const isParentNodeArray = Array.isArray(data);
-    if (isObject$2(data) || isParentNodeArray) {
-        for (const key in data) {
-            if (Array.isArray(data[key]) ||
-                (isObject$2(data[key]) && !objectHasFunction(data[key]))) {
-                fields[key] = Array.isArray(data[key]) ? [] : {};
-                markFieldsDirty(data[key], fields[key]);
-            }
-            else if (!isNullOrUndefined(data[key])) {
-                fields[key] = true;
-            }
+    for (const key in data) {
+        if (isTraversable(data[key])) {
+            fields[key] = Array.isArray(data[key]) ? [] : {};
+            markFieldsDirty(data[key], fields[key]);
+        }
+        else if (!isNullOrUndefined(data[key])) {
+            fields[key] = true;
         }
     }
     return fields;
 }
-function getDirtyFieldsFromDefaultValues(data, formValues, dirtyFieldsFromValues) {
-    const isParentNodeArray = Array.isArray(data);
-    if (isObject$2(data) || isParentNodeArray) {
-        for (const key in data) {
-            if (Array.isArray(data[key]) ||
-                (isObject$2(data[key]) && !objectHasFunction(data[key]))) {
-                if (isUndefined$1(formValues) ||
-                    isPrimitive(dirtyFieldsFromValues[key])) {
-                    dirtyFieldsFromValues[key] = Array.isArray(data[key])
-                        ? markFieldsDirty(data[key], [])
-                        : { ...markFieldsDirty(data[key]) };
-                }
-                else {
-                    getDirtyFieldsFromDefaultValues(data[key], isNullOrUndefined(formValues) ? {} : formValues[key], dirtyFieldsFromValues[key]);
-                }
+function getDirtyFields(data, formValues, dirtyFieldsFromValues) {
+    if (!dirtyFieldsFromValues) {
+        dirtyFieldsFromValues = markFieldsDirty(formValues);
+    }
+    for (const key in data) {
+        if (isTraversable(data[key])) {
+            if (isUndefined$1(formValues) || isPrimitive(dirtyFieldsFromValues[key])) {
+                dirtyFieldsFromValues[key] = markFieldsDirty(data[key], Array.isArray(data[key]) ? [] : {});
             }
             else {
-                dirtyFieldsFromValues[key] = !deepEqual(data[key], formValues[key]);
+                getDirtyFields(data[key], isNullOrUndefined(formValues) ? {} : formValues[key], dirtyFieldsFromValues[key]);
             }
         }
+        else {
+            dirtyFieldsFromValues[key] = !deepEqual(data[key], formValues[key]);
+        }
     }
     return dirtyFieldsFromValues;
 }
-var getDirtyFields = (defaultValues, formValues) => getDirtyFieldsFromDefaultValues(defaultValues, formValues, markFieldsDirty(formValues));
 
 const defaultResult = {
     value: false,
@@ -44074,15 +44152,13 @@ var updateFieldArrayRootError = (errors, error, name) => {
     return errors;
 };
 
-var isMessage = (value) => isString$1(value);
-
 function getValidateError(result, ref, type = 'validate') {
-    if (isMessage(result) ||
-        (Array.isArray(result) && result.every(isMessage)) ||
+    if (isString$1(result) ||
+        (Array.isArray(result) && result.every(isString$1)) ||
         (isBoolean$1(result) && !result)) {
         return {
             type,
-            message: isMessage(result) ? result : '',
+            message: isString$1(result) ? result : '',
             ref,
         };
     }
@@ -44135,7 +44211,7 @@ var validateField = async (field, disabledFieldNames, formValues, validateAllFie
                 (isBoolean$1(inputValue) && !inputValue) ||
                 (isCheckBox && !getCheckboxValue(refs).isValid) ||
                 (isRadio && !getRadioValue(refs).isValid))) {
-        const { value, message } = isMessage(required)
+        const { value, message } = isString$1(required)
             ? { value: !!required, message: required }
             : getValueAndMessage(required);
         if (value) {
@@ -44541,11 +44617,11 @@ function createFormControl(props = {}) {
                     const isFieldArrayRoot = _names.array.has(_f.name);
                     const isPromiseFunction = field._f && hasPromiseValidation(field._f);
                     if (isPromiseFunction && _proxyFormState.validatingFields) {
-                        _updateIsValidating([name], true);
+                        _updateIsValidating([_f.name], true);
                     }
                     const fieldError = await validateField(field, _names.disabled, _formValues, shouldDisplayAllAssociatedErrors, _options.shouldUseNativeValidation && !shouldOnlyCheckValid, isFieldArrayRoot);
                     if (isPromiseFunction && _proxyFormState.validatingFields) {
-                        _updateIsValidating([name]);
+                        _updateIsValidating([_f.name]);
                     }
                     if (fieldError[_f.name]) {
                         context.valid = false;
@@ -44778,6 +44854,7 @@ function createFormControl(props = {}) {
             }
             if (isFieldValueUpdated) {
                 field._f.deps &&
+                    (!Array.isArray(field._f.deps) || field._f.deps.length > 0) &&
                     trigger(field._f.deps);
                 shouldRenderByError(name, isValid, error, fieldState);
             }
@@ -44825,10 +44902,13 @@ function createFormControl(props = {}) {
             iterateFieldsByAction(_fields, _focusInput, name ? fieldNames : _names.mount);
         return validationResult;
     };
-    const getValues = (fieldNames) => {
-        const values = {
+    const getValues = (fieldNames, config) => {
+        let values = {
             ...(_state.mount ? _formValues : _defaultValues),
         };
+        if (config) {
+            values = extractFormValues(config.dirtyFields ? _formState.dirtyFields : _formState.touchedFields, values);
+        }
         return isUndefined$1(fieldNames)
             ? values
             : isString$1(fieldNames)
@@ -46849,9 +46929,12 @@ class Schema {
    */
 
   cast(value, options = {}) {
-    let resolvedSchema = this.resolve(Object.assign({
+    let resolvedSchema = this.resolve(Object.assign({}, options, {
       value
-    }, options));
+      // parent: options.parent,
+      // context: options.context,
+    }));
+
     let allowOptionality = options.assert === 'ignore-optionality';
     let result = resolvedSchema._cast(value, options);
     if (options.assert !== false && !resolvedSchema.isType(result)) {
@@ -46865,7 +46948,7 @@ class Schema {
     return result;
   }
   _cast(rawValue, options) {
-    let value = rawValue === undefined ? rawValue : this.transforms.reduce((prevValue, fn) => fn.call(this, prevValue, rawValue, this), rawValue);
+    let value = rawValue === undefined ? rawValue : this.transforms.reduce((prevValue, fn) => fn.call(this, prevValue, rawValue, this, options), rawValue);
     if (value === undefined) {
       value = this.getDefault(options);
     }
@@ -47388,10 +47471,10 @@ class DateSchema extends Schema {
       }
     });
     this.withMutation(() => {
-      this.transform((value, _raw, ctx) => {
+      this.transform((value, _raw) => {
         // null -> InvalidDate isn't useful; treat all nulls as null and let it fail on
         // nullability check vs TypeErrors
-        if (!ctx.spec.coerce || ctx.isType(value) || value === null) return value;
+        if (!this.spec.coerce || this.isType(value) || value === null) return value;
         value = parseIsoDate(value);
 
         // 0 is a valid timestamp equivalent to 1970-01-01T00:00:00Z(unix epoch) or before.
@@ -47478,7 +47561,7 @@ function sortByKeyOrder(keys) {
   };
 }
 
-const parseJson = (value, _, ctx) => {
+const parseJson = (value, _, schema) => {
   if (typeof value !== 'string') {
     return value;
   }
@@ -47488,7 +47571,7 @@ const parseJson = (value, _, ctx) => {
   } catch (err) {
     /* */
   }
-  return ctx.isType(parsed) ? parsed : value;
+  return schema.isType(parsed) ? parsed : value;
 };
 
 // @ts-ignore
@@ -47568,9 +47651,9 @@ class ObjectSchema extends Schema {
     for (const prop of props) {
       let field = fields[prop];
       let exists = (prop in value);
+      let inputValue = value[prop];
       if (field) {
         let fieldValue;
-        let inputValue = value[prop];
 
         // safe to mutate since this is fired in sequence
         innerOptions.path = (options.path ? `${options.path}.` : '') + prop;
@@ -47585,16 +47668,14 @@ class ObjectSchema extends Schema {
           isChanged = isChanged || prop in value;
           continue;
         }
-        fieldValue = !options.__validating || !strict ?
-        // TODO: use _cast, this is double resolving
-        field.cast(value[prop], innerOptions) : value[prop];
+        fieldValue = !options.__validating || !strict ? field.cast(inputValue, innerOptions) : inputValue;
         if (fieldValue !== undefined) {
           intermediateValue[prop] = fieldValue;
         }
       } else if (exists && !strip) {
-        intermediateValue[prop] = value[prop];
+        intermediateValue[prop] = inputValue;
       }
-      if (exists !== prop in intermediateValue || intermediateValue[prop] !== value[prop]) {
+      if (exists !== prop in intermediateValue || intermediateValue[prop] !== inputValue) {
         isChanged = true;
       }
     }
@@ -47868,7 +47949,11 @@ class ArraySchema extends Schema {
     let isChanged = false;
     const castArray = value.map((v, idx) => {
       const castElement = this.innerType.cast(v, Object.assign({}, _opts, {
-        path: `${_opts.path || ''}[${idx}]`
+        path: `${_opts.path || ''}[${idx}]`,
+        parent: value,
+        originalValue: v,
+        value: v,
+        index: idx
       }));
       if (castElement !== v) {
         isChanged = true;
@@ -75441,7 +75526,7 @@ function SectionRenderer({ item, data: initialData, updateHandler, validationErr
         /* @__PURE__ */ jsx(
           RadioGroup,
           {
-            selectedValue: data[field.key] || "",
+            selectedValue: typeof data[field.key] !== "undefined" ? data[field.key] : field.default || "",
             onValueChange: (value) => {
               const newData = { ...data, [field.key]: value };
               setData(newData);
@@ -76050,7 +76135,7 @@ function DataTableRenderer({ item, data: initialData, updateHandler, validationE
       ] }),
       /* @__PURE__ */ jsx("p", { style: { fontSize: "14px", marginBottom: "10px" }, children: section.description })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs("table", { className: "min-w-full bg-white border border-gray-300", children: [
+    /* @__PURE__ */ jsx("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs("table", { className: "min-w-full bg-white border border-gray-300", style: { marginBottom: "20px" }, children: [
       /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { className: "bg-gray-50", children: [
         /* @__PURE__ */ jsx("th", { className: "px-4 py-2 w-10" }),
         section.fields.map((field, idx) => /* @__PURE__ */ jsx(
@@ -76903,17 +76988,17 @@ const CustomGridToolbar = ({
             const rect = target.getBoundingClientRect();
             const viewportWidth = window.innerWidth;
             const viewportHeight = window.innerHeight;
-            let x = rect.left - 130;
-            let y = rect.bottom - 80;
+            let x = rect.left - 115;
+            let y = rect.bottom + 10;
             x = Math.max(10, Math.min(x, viewportWidth - 320));
             y = Math.max(10, Math.min(y, viewportHeight - 400));
-            grid.columnChooserModule?.openColumnChooser(x, y);
+            grid.openColumnChooser?.(x, y);
           } else {
             const fallbackX = Math.min(1240, window.innerWidth - 320);
-            grid.columnChooserModule?.openColumnChooser(fallbackX, 55);
+            grid.openColumnChooser?.(fallbackX, 55);
           }
         } else {
-          grid.columnChooserModule?.openColumnChooser();
+          grid.openColumnChooser?.();
         }
         break;
       case "Print":