@pnkx-lib/ui 1.9.15 → 1.9.16

package/es/chunks/{CategoryStatus-DMf5RJqc.js → CategoryStatus-5u7yUN20.js}

@@ -1,4 +1,4 @@
-import { j as jsxRuntimeExports, b as Icon, _ as _extends, c as _typeof, P as PnkxField, C as CheckboxField, u as useForm, I as Input, d as classNames, e as _arrayLikeToArray, f as _unsupportedIterableToArray, w as warningOnce, h as _createClass, i as _classCallCheck, k as _defineProperty, l as _slicedToArray, m as warning$1, n as canUseDom, o as _objectSpread2, p as updateCSS, r as removeCSS, q as _arrayWithHoles, s as _nonIterableRest, t as resetWarned$1, F as FastColor, v as generate, x as presetPrimaryColors, y as presetPalettes, z as _inherits, A as _createSuper, B as _assertThisInitialized, G as _objectWithoutProperties, H as IconContext } from './Switch-DQm0didM.js';
+import { j as jsxRuntimeExports, b as Icon, _ as _extends, c as _typeof, P as PnkxField, C as CheckboxField, u as useForm, I as Input, d as classNames, e as _arrayLikeToArray, f as _unsupportedIterableToArray, w as warningOnce, h as _createClass, i as _classCallCheck, k as _defineProperty, l as _slicedToArray, m as warning$1, n as canUseDom, o as _objectSpread2, p as updateCSS, r as removeCSS, q as _arrayWithHoles, s as _nonIterableRest, t as resetWarned$1, F as FastColor, v as generate, x as presetPrimaryColors, y as presetPalettes, z as _inherits, A as _createSuper, B as _assertThisInitialized, G as _objectWithoutProperties, H as IconContext } from './Switch-BUaKQ4cU.js';
 import { Button as Button$1, Cascader, Space as Space$1, Card, Skeleton as Skeleton$1, Modal as Modal$1, Tooltip as Tooltip$1, Popconfirm as Popconfirm$1, Typography, Table as Table$1, Tabs as Tabs$1, Popover as Popover$1, Badge as Badge$1, Col as Col$1, Row as Row$1, Dropdown as Dropdown$1, Breadcrumb as Breadcrumb$1, Flex as Flex$1, Splitter as Splitter$1, Menu as Menu$1, Pagination as Pagination$1, Steps as Steps$1, Tag as Tag$1, Divider as Divider$2, Alert as Alert$1, Spin as Spin$1, Drawer as Drawer$1, QRCode as QRCode$1, Result as Result$1, Rate as Rate$1, Segmented as Segmented$1, Statistic as Statistic$1, Timeline as Timeline$1, Tour as Tour$1, Tree as Tree$1, Watermark as Watermark$1, Anchor as Anchor$1, Affix, AutoComplete as AutoComplete$1, Input as Input$1, Collapse, ColorPicker, Empty as Empty$2, Image as Image$1 } from 'antd';
 import * as React from 'react';
 import React__default, { version as version$1, isValidElement, useLayoutEffect as useLayoutEffect$1, useEffect, useRef, useMemo as useMemo$1, useCallback, useState, createContext, memo, useReducer, useContext, Component } from 'react';
@@ -9592,13 +9592,17 @@ const SettingTable = (props) => {
   };
   const footer = () => {
     const handleCancel = () => {
-      setDefaultSettingColumnItems && setDefaultSettingColumnItems(defaultSettingColumnItems);
+      if (setDefaultSettingColumnItems) {
+        setDefaultSettingColumnItems(defaultSettingColumnItems);
+      }
       setColumns(defaultSettingColumnItems);
       setOpen(false);
     };
     const handleSubmit2 = () => {
       setOpen(false);
-      setDefaultSettingColumnItems && setDefaultSettingColumnItems(columns);
+      if (setDefaultSettingColumnItems) {
+        setDefaultSettingColumnItems(columns);
+      }
     };
     return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -9637,7 +9641,7 @@ const SettingTable = (props) => {
         {
           items: columns.map((item) => String(item.key)),
           strategy: verticalListSortingStrategy,
-          children: columns.map((item, index) => {
+          children: columns.filter((i) => i.key).map((item, index) => {
             return /* @__PURE__ */ jsxRuntimeExports.jsx(
               SortableItem,
               {
@@ -9776,7 +9780,7 @@ const Table = ({
   };
   //! Function
   useEffect(() => {
-    setData(dataSource);
+    setData(Array.isArray(dataSource) ? dataSource : []);
   }, [JSON.stringify(dataSource)]);
   const columnsEditable = [
     ...columns,
@@ -9905,7 +9909,7 @@ const Table = ({
         setOpen: setOpenStting,
         title: titleSettingTableModal,
         showSetting,
-        defaultSettingColumnItems: columns,
+        defaultSettingColumnItems: editable ? mergedColumns : columns,
         setDefaultSettingColumnItems: setColumns
       }
     )
@@ -17327,5 +17331,6 @@ const CategoryStatus = ({ status }) => {
   //! Render
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(ItemStatus, { color: bagde.color, statusName: bagde.text }) });
 };
+React__default.memo(CategoryStatus);
 
-export { Alert as A, Button as B, CascaderField as C, Dropdown as D, Anchor as E, Flex as F, Appfix as G, Heading as H, AutoComplete as I, PnkxCollapse as J, PnkxColorPicker as K, Layout as L, Modal as M, Empty as N, Image as O, Popover as P, QRCode as Q, Row as R, Skeleton as S, Table as T, BulkAction as U, ConfirmModal as V, Watermark as W, ErrorBoundary as X, CategoryStatus as Y, Tooltip as a, Tabs as b, SearchFiltersForm as c, Container as d, Badge as e, Col as f, Breadcrumb as g, Space as h, Splitter as i, Menu as j, Pagination as k, Steps as l, Sidebar as m, Tag as n, Divider as o, Spin as p, Drawer as q, Popconfirm as r, Result as s, typeColorMap as t, Rate as u, Segmented as v, Statistic as w, Timeline as x, Tour as y, Tree as z };
+export { Alert as A, Button as B, CascaderField as C, Dropdown as D, Anchor as E, Flex as F, Appfix as G, Heading as H, AutoComplete as I, PnkxCollapse as J, PnkxColorPicker as K, Layout as L, Modal as M, Empty as N, Image as O, Popover as P, QRCode as Q, Row as R, Skeleton as S, Table as T, BulkAction as U, ConfirmModal as V, Watermark as W, ErrorBoundary as X, Tooltip as a, Tabs as b, SearchFiltersForm as c, Container as d, Badge as e, Col as f, Breadcrumb as g, Space as h, Splitter as i, Menu as j, Pagination as k, Steps as l, Sidebar as m, Tag as n, Divider as o, Spin as p, Drawer as q, Popconfirm as r, Result as s, typeColorMap as t, Rate as u, Segmented as v, Statistic as w, Timeline as x, Tour as y, Tree as z };

package/es/chunks/{Radio-DA0U4ozV.js → Radio-C3c5Olf1.js}

@@ -1,4 +1,4 @@
-import { g as get, j as jsxRuntimeExports, L as Label, E as ErrorMessage, T as Typography } from './Switch-DQm0didM.js';
+import { g as get, j as jsxRuntimeExports, L as Label, E as ErrorMessage, T as Typography } from './Switch-BUaKQ4cU.js';
 import { Select as Select$1, Radio } from 'antd';
 
 const Select = (props) => {

package/es/chunks/{Switch-DQm0didM.js → Switch-BUaKQ4cU.js}

@@ -3495,6 +3495,48 @@ var getProxyFormState = (formState, control, localProxyFormState, isRoot = true)
     return result;
 };
 
+var isPrimitive = (value) => isNullOrUndefined(value) || !isObjectType(value);
+
+function deepEqual(object1, object2) {
+    if (isPrimitive(object1) || isPrimitive(object2)) {
+        return object1 === object2;
+    }
+    if (isDateObject(object1) && isDateObject(object2)) {
+        return object1.getTime() === object2.getTime();
+    }
+    const keys1 = Object.keys(object1);
+    const keys2 = Object.keys(object2);
+    if (keys1.length !== keys2.length) {
+        return false;
+    }
+    for (const key of keys1) {
+        const val1 = object1[key];
+        if (!keys2.includes(key)) {
+            return false;
+        }
+        if (key !== 'ref') {
+            const val2 = object2[key];
+            if ((isDateObject(val1) && isDateObject(val2)) ||
+                (isObject(val1) && isObject(val2)) ||
+                (Array.isArray(val1) && Array.isArray(val2))
+                ? !deepEqual(val1, val2)
+                : val1 !== val2) {
+                return false;
+            }
+        }
+    }
+    return true;
+}
+
+const useDeepEqualEffect = (effect, deps) => {
+    const ref = useRef(deps);
+    if (!deepEqual(deps, ref.current)) {
+        ref.current = deps;
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useEffect(effect, ref.current);
+};
+
 /**
  * This custom hook allows you to subscribe to each form state, and isolate the re-render at the custom hook level. It has its scope in terms of form state subscription, so it would not affect other useFormState and useForm. Using this hook can reduce the re-render impact on large and complex form application.
  *
@@ -3539,10 +3581,8 @@ function useFormState(props) {
         isValid: false,
         errors: false,
     });
-    const _name = React__default.useRef(name);
-    _name.current = name;
-    React__default.useEffect(() => control._subscribe({
-        name: _name.current,
+    useDeepEqualEffect(() => control._subscribe({
+        name: name,
         formState: _localProxyFormState.current,
         exact,
         callback: (formState) => {
@@ -3552,7 +3592,7 @@ function useFormState(props) {
                     ...formState,
                 });
         },
-    }), [control, disabled, exact]);
+    }), [name, disabled, exact]);
     React__default.useEffect(() => {
         _localProxyFormState.current.isValid && control._setValid(true);
     }, [control]);
@@ -3592,19 +3632,16 @@ var generateWatchOutput = (names, _names, formValues, isGlobal, defaultValue) =>
 function useWatch(props) {
     const methods = useFormContext();
     const { control = methods.control, name, defaultValue, disabled, exact, } = props || {};
-    const _name = React__default.useRef(name);
-    const _defaultValue = React__default.useRef(defaultValue);
-    _name.current = name;
-    React__default.useEffect(() => control._subscribe({
-        name: _name.current,
+    const [value, updateValue] = React__default.useState(control._getWatch(name, defaultValue));
+    useDeepEqualEffect(() => control._subscribe({
+        name: name,
         formState: {
             values: true,
         },
         exact,
         callback: (formState) => !disabled &&
-            updateValue(generateWatchOutput(_name.current, control._names, formState.values || control._formValues, false, _defaultValue.current)),
-    }), [control, disabled, exact]);
-    const [value, updateValue] = React__default.useState(control._getWatch(name, defaultValue));
+            updateValue(generateWatchOutput(name, control._names, formState.values || control._formValues, false, defaultValue)),
+    }), [name, defaultValue, disabled, exact]);
     React__default.useEffect(() => control._removeUnmounted());
     return value;
 }
@@ -3839,39 +3876,6 @@ var createSubject = () => {
     };
 };
 
-var isPrimitive = (value) => isNullOrUndefined(value) || !isObjectType(value);
-
-function deepEqual(object1, object2) {
-    if (isPrimitive(object1) || isPrimitive(object2)) {
-        return object1 === object2;
-    }
-    if (isDateObject(object1) && isDateObject(object2)) {
-        return object1.getTime() === object2.getTime();
-    }
-    const keys1 = Object.keys(object1);
-    const keys2 = Object.keys(object2);
-    if (keys1.length !== keys2.length) {
-        return false;
-    }
-    for (const key of keys1) {
-        const val1 = object1[key];
-        if (!keys2.includes(key)) {
-            return false;
-        }
-        if (key !== 'ref') {
-            const val2 = object2[key];
-            if ((isDateObject(val1) && isDateObject(val2)) ||
-                (isObject(val1) && isObject(val2)) ||
-                (Array.isArray(val1) && Array.isArray(val2))
-                ? !deepEqual(val1, val2)
-                : val1 !== val2) {
-                return false;
-            }
-        }
-    }
-    return true;
-}
-
 var isEmptyObject = (value) => isObject(value) && !Object.keys(value).length;
 
 var isFileInput = (element) => element.type === 'file';
@@ -4420,6 +4424,7 @@ function createFormControl(props = {}) {
     let _formState = {
         submitCount: 0,
         isDirty: false,
+        isReady: false,
         isLoading: isFunction$1(_options.defaultValues),
         isValidating: false,
         isSubmitted: false,
@@ -5439,6 +5444,7 @@ function createFormControl(props = {}) {
     };
 }
 
+const useIsomorphicLayoutEffect$1 = typeof window !== 'undefined' ? React__default.useLayoutEffect : React__default.useEffect;
 /**
  * Custom hook to manage the entire form.
  *
@@ -5485,6 +5491,7 @@ function useForm(props = {}) {
         validatingFields: {},
         errors: props.errors || {},
         disabled: props.disabled || false,
+        isReady: false,
         defaultValues: isFunction$1(props.defaultValues)
             ? undefined
             : props.defaultValues,
@@ -5502,12 +5509,36 @@ function useForm(props = {}) {
     }
     const control = _formControl.current.control;
     control._options = props;
-    React__default.useLayoutEffect(() => control._subscribe({
-        formState: control._proxyFormState,
-        callback: () => updateFormState({ ...control._formState }),
-        reRenderRoot: true,
-    }), [control]);
+    useIsomorphicLayoutEffect$1(() => {
+        const sub = control._subscribe({
+            formState: control._proxyFormState,
+            callback: () => updateFormState({ ...control._formState }),
+            reRenderRoot: true,
+        });
+        updateFormState((data) => ({
+            ...data,
+            isReady: true,
+        }));
+        return sub;
+    }, [control]);
     React__default.useEffect(() => control._disableForm(props.disabled), [control, props.disabled]);
+    React__default.useEffect(() => {
+        if (props.mode) {
+            control._options.mode = props.mode;
+        }
+        if (props.reValidateMode) {
+            control._options.reValidateMode = props.reValidateMode;
+        }
+        if (props.errors && !isEmptyObject(props.errors)) {
+            control._setErrors(props.errors);
+        }
+    }, [control, props.errors, props.mode, props.reValidateMode]);
+    React__default.useEffect(() => {
+        props.shouldUnregister &&
+            control._subjects.state.next({
+                values: control._getWatch(),
+            });
+    }, [control, props.shouldUnregister]);
     React__default.useEffect(() => {
         if (control._proxyFormState.isDirty) {
             const isDirty = control._getDirty();
@@ -5527,12 +5558,7 @@ function useForm(props = {}) {
         else {
             control._resetDefaultValues();
         }
-    }, [props.values, control]);
-    React__default.useEffect(() => {
-        if (props.errors && !isEmptyObject(props.errors)) {
-            control._setErrors(props.errors);
-        }
-    }, [props.errors, control]);
+    }, [control, props.values]);
     React__default.useEffect(() => {
         if (!control._state.mount) {
             control._setValid();
@@ -5544,12 +5570,6 @@ function useForm(props = {}) {
         }
         control._removeUnmounted();
     });
-    React__default.useEffect(() => {
-        props.shouldUnregister &&
-            control._subjects.state.next({
-                values: control._getWatch(),
-            });
-    }, [props.shouldUnregister, control]);
     _formControl.current.formState = getProxyFormState(formState, control);
     return _formControl.current;
 }

package/es/fields/index.js

@@ -1,2 +1,2 @@
-export { C as CheckboxField, D as DatePickerField, I as Input, P as PnkxField, R as RangePickerField, a as TinyMCE } from '../chunks/Switch-DQm0didM.js';
-export { R as RadioGroup, S as Select } from '../chunks/Radio-DA0U4ozV.js';
+export { C as CheckboxField, D as DatePickerField, I as Input, P as PnkxField, R as RangePickerField, a as TinyMCE } from '../chunks/Switch-BUaKQ4cU.js';
+export { R as RadioGroup, S as Select } from '../chunks/Radio-C3c5Olf1.js';

package/es/index.js

@@ -1,6 +1,6 @@
-export { A as Alert, E as Anchor, G as Appfix, I as AutoComplete, e as Badge, g as Breadcrumb, U as BulkAction, B as Button, C as CascaderField, Y as CategoryStatus, f as Col, V as ConfirmModal, d as Container, o as Divider, q as Drawer, D as Dropdown, N as Empty, X as ErrorBoundary, F as Flex, H as Heading, O as Image, L as Layout, j as Menu, M as Modal, k as Pagination, J as PnkxCollapse, K as PnkxColorPicker, r as Popconfirm, P as Popover, Q as QRCode, u as Rate, s as Result, R as Row, c as SearchFiltersForm, v as Segmented, m as Sidebar, S as Skeleton, h as Space, p as Spin, i as Splitter, w as Statistic, l as Steps, T as Table, b as Tabs, n as Tag, x as Timeline, a as Tooltip, y as Tour, z as Tree, W as Watermark, t as typeColorMap } from './chunks/CategoryStatus-DMf5RJqc.js';
-export { C as CheckboxField, D as DatePickerField, E as ErrorMessage, I as Input, L as Label, P as PnkxField, R as RangePickerField, a as TinyMCE, T as Typography } from './chunks/Switch-DQm0didM.js';
+export { A as Alert, E as Anchor, G as Appfix, I as AutoComplete, e as Badge, g as Breadcrumb, U as BulkAction, B as Button, C as CascaderField, f as Col, V as ConfirmModal, d as Container, o as Divider, q as Drawer, D as Dropdown, N as Empty, X as ErrorBoundary, F as Flex, H as Heading, O as Image, L as Layout, j as Menu, M as Modal, k as Pagination, J as PnkxCollapse, K as PnkxColorPicker, r as Popconfirm, P as Popover, Q as QRCode, u as Rate, s as Result, R as Row, c as SearchFiltersForm, v as Segmented, m as Sidebar, S as Skeleton, h as Space, p as Spin, i as Splitter, w as Statistic, l as Steps, T as Table, b as Tabs, n as Tag, x as Timeline, a as Tooltip, y as Tour, z as Tree, W as Watermark, t as typeColorMap } from './chunks/CategoryStatus-5u7yUN20.js';
+export { C as CheckboxField, D as DatePickerField, E as ErrorMessage, I as Input, L as Label, P as PnkxField, R as RangePickerField, a as TinyMCE, T as Typography } from './chunks/Switch-BUaKQ4cU.js';
 import 'react-router';
-export { R as RadioGroup, S as Select } from './chunks/Radio-DA0U4ozV.js';
+export { R as RadioGroup, S as Select } from './chunks/Radio-C3c5Olf1.js';
 export { u as useToast } from './chunks/cloneDeep-BLYi2V0G.js';
 export { u as useFiltersHandler, a as useMessage } from './chunks/useMessage-D_-VT5B4.js';

package/es/ui/index.js

@@ -1,3 +1,3 @@
-export { A as Alert, E as Anchor, G as Appfix, I as AutoComplete, e as Badge, g as Breadcrumb, U as BulkAction, B as Button, C as CascaderField, Y as CategoryStatus, f as Col, V as ConfirmModal, d as Container, o as Divider, q as Drawer, D as Dropdown, N as Empty, X as ErrorBoundary, F as Flex, H as Heading, O as Image, L as Layout, j as Menu, M as Modal, k as Pagination, J as PnkxCollapse, K as PnkxColorPicker, r as Popconfirm, P as Popover, Q as QRCode, u as Rate, s as Result, R as Row, c as SearchFiltersForm, v as Segmented, m as Sidebar, S as Skeleton, h as Space, p as Spin, i as Splitter, w as Statistic, l as Steps, T as Table, b as Tabs, n as Tag, x as Timeline, a as Tooltip, y as Tour, z as Tree, W as Watermark, t as typeColorMap } from '../chunks/CategoryStatus-DMf5RJqc.js';
-export { E as ErrorMessage, L as Label, T as Typography } from '../chunks/Switch-DQm0didM.js';
+export { A as Alert, E as Anchor, G as Appfix, I as AutoComplete, e as Badge, g as Breadcrumb, U as BulkAction, B as Button, C as CascaderField, f as Col, V as ConfirmModal, d as Container, o as Divider, q as Drawer, D as Dropdown, N as Empty, X as ErrorBoundary, F as Flex, H as Heading, O as Image, L as Layout, j as Menu, M as Modal, k as Pagination, J as PnkxCollapse, K as PnkxColorPicker, r as Popconfirm, P as Popover, Q as QRCode, u as Rate, s as Result, R as Row, c as SearchFiltersForm, v as Segmented, m as Sidebar, S as Skeleton, h as Space, p as Spin, i as Splitter, w as Statistic, l as Steps, T as Table, b as Tabs, n as Tag, x as Timeline, a as Tooltip, y as Tour, z as Tree, W as Watermark, t as typeColorMap } from '../chunks/CategoryStatus-5u7yUN20.js';
+export { E as ErrorMessage, L as Label, T as Typography } from '../chunks/Switch-BUaKQ4cU.js';
 import 'react-router';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pnkx-lib/ui",
   "private": false,
-  "version": "1.9.15",
+  "version": "1.9.16",
   "type": "module",
   "main": "./es/index.js",
   "module": "./es/index.js",

package/types/index.d.ts

@@ -226,12 +226,6 @@ export declare const CascaderField: (props: CascaderFieldProps) => JSX.Element;
 
 export declare type CascaderFieldProps = BaseProps & (SingleCascaderProps | MultipleCascaderProps);
 
-export declare const CategoryStatus: ({ status }: CategoryStatusProps) => JSX.Element;
-
-declare interface CategoryStatusProps {
-    status: number;
-}
-
 export declare const CheckboxField: (props: CheckboxFieldProps) => JSX.Element;
 
 export declare interface CheckboxFieldProps extends Omit<CheckboxProps, "onChange" | "checked"> {

package/types/ui.d.ts

@@ -207,12 +207,6 @@ export declare const CascaderField: (props: CascaderFieldProps) => JSX.Element;
 
 export declare type CascaderFieldProps = BaseProps & (SingleCascaderProps | MultipleCascaderProps);
 
-export declare const CategoryStatus: ({ status }: CategoryStatusProps) => JSX.Element;
-
-declare interface CategoryStatusProps {
-    status: number;
-}
-
 export declare const Col: (props: ColPropsUnion) => JSX.Element;
 
 export declare interface ColProps extends ColProps_2, Partial<Record<Breakpoint, ColSpanType | ColSize>> {