@ews-admin/global-design-system 1.1.27 → 1.6.0

package/dist/index.js

@@ -32545,7 +32545,7 @@ const UserIcon = ({ size = 24, color = "currentColor", className = "", ...props
     return jsxRuntime.jsx(User, { size: size, color: color, className: className, ...props });
 };
 
-const Input = React.forwardRef(({ className, variant = "default", size = "md", label, helperText, error, leftIcon, rightIcon, fullWidth = false, showPasswordToggle = false, required = false, countryCodeSelect, leftAddon, rightAddon, id, type = "text", ...props }, ref) => {
+const Input = React.forwardRef(({ className, variant = "default", size = "md", label, helperText, error, leftIcon, rightIcon, fullWidth = false, showPasswordToggle = false, required = false, countryCodeSelect, leftAddon, rightAddon, id, type = "text", onChange, onBlur, ...props }, ref) => {
     const inputId = id || `input-${Math.random().toString(36).substr(2, 9)}`;
     const hasError = Boolean(error);
     const actualVariant = hasError ? "error" : variant;
@@ -32554,6 +32554,24 @@ const Input = React.forwardRef(({ className, variant = "default", size = "md", l
     const isPasswordInput = type === "password";
     const shouldShowPasswordToggle = showPasswordToggle && isPasswordInput;
     const actualType = isPasswordInput && showPassword ? "text" : type;
+    // Normalize spaces for text-like inputs
+    const shouldNormalize = type !== "password" && type !== "number" && type !== "checkbox";
+    const handleChange = (e) => {
+        if (shouldNormalize) {
+            e.target.value = e.target.value.replace(/^\s+/, "").replace(/\s{2,}/g, " ");
+        }
+        onChange?.(e);
+    };
+    const handleBlur = (e) => {
+        if (shouldNormalize && onChange) {
+            const trimmed = e.target.value.replace(/\s+$/, "");
+            if (trimmed !== e.target.value) {
+                e.target.value = trimmed;
+                onChange(e);
+            }
+        }
+        onBlur?.(e);
+    };
     // Country code dropdown state
     const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
     const dropdownRef = React.useRef(null);
@@ -32604,7 +32622,7 @@ const Input = React.forwardRef(({ className, variant = "default", size = "md", l
                                                 countryCodeSelect.onChange(item.code);
                                                 setIsDropdownOpen(false);
                                             }, className: cn("px-3 py-2 text-sm cursor-pointer transition-colors", isSelected && "bg-ews-primary text-white", !isSelected && "hover:bg-ews-gray-50"), children: [jsxRuntime.jsx("span", { className: "font-medium", children: item.code }), item.country && (jsxRuntime.jsx("span", { className: cn("ml-2 text-xs", isSelected ? "text-white/80" : "text-ews-gray-500"), children: item.country }))] }, item.code));
-                                    }) }))] }) })), leftIcon && !countryCodeSelect && !leftAddon && (jsxRuntime.jsx("div", { className: "flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none", children: jsxRuntime.jsx("span", { className: cn("text-ews-gray-400", iconSizes[size]), children: leftIcon }) })), leftAddon && !countryCodeSelect && !leftIcon && (jsxRuntime.jsx("div", { className: "flex absolute inset-y-0 left-0 items-center pointer-events-none overflow-hidden rounded-l-md", children: jsxRuntime.jsx("span", { className: "flex items-center h-full px-3 text-sm font-medium whitespace-nowrap bg-ews-gray-50 border-r border-ews-gray-300 text-ews-gray-600", children: leftAddon }) })), jsxRuntime.jsx("input", { id: inputId, type: actualType, className: cn(baseStyles, variants[actualVariant], sizes[size], countryCodeSelect && "pl-24", leftIcon && !countryCodeSelect && !leftAddon && "pl-10", leftAddon && !countryCodeSelect && !leftIcon && "pl-16", (rightIcon || shouldShowPasswordToggle) && "pr-10", rightAddon && !rightIcon && !shouldShowPasswordToggle && "pr-16", className), ref: ref, ...props }), rightAddon && !rightIcon && !shouldShowPasswordToggle && (jsxRuntime.jsx("div", { className: "flex absolute inset-y-0 right-0 items-center pr-3 pointer-events-none", children: jsxRuntime.jsx("span", { className: "text-sm font-medium text-ews-gray-500", children: rightAddon }) })), rightIcon && !shouldShowPasswordToggle && (jsxRuntime.jsx("div", { className: "flex absolute inset-y-0 right-0 items-center pr-3 pointer-events-none", children: jsxRuntime.jsx("span", { className: cn("text-ews-gray-400", iconSizes[size]), children: rightIcon }) })), shouldShowPasswordToggle && (jsxRuntime.jsx("button", { type: "button", className: "flex absolute inset-y-0 right-0 items-center pr-3", onClick: () => setShowPassword(!showPassword), tabIndex: -1, children: jsxRuntime.jsx("span", { className: cn("transition-colors text-ews-gray-400 hover:text-ews-gray-600", iconSizes[size]), children: showPassword ? jsxRuntime.jsx(EyeOff, { size: 16 }) : jsxRuntime.jsx(Eye, { size: 16 }) }) }))] }), (error || helperText) && (jsxRuntime.jsx("p", { className: cn("text-sm", error ? "text-ews-error" : "text-ews-gray-500"), children: error || helperText }))] }));
+                                    }) }))] }) })), leftIcon && !countryCodeSelect && !leftAddon && (jsxRuntime.jsx("div", { className: "flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none", children: jsxRuntime.jsx("span", { className: cn("text-ews-gray-400", iconSizes[size]), children: leftIcon }) })), leftAddon && !countryCodeSelect && !leftIcon && (jsxRuntime.jsx("div", { className: "flex absolute inset-y-0 left-0 items-center pointer-events-none overflow-hidden rounded-l-md", children: jsxRuntime.jsx("span", { className: "flex items-center h-full px-3 text-sm font-medium whitespace-nowrap bg-ews-gray-50 border-r border-ews-gray-300 text-ews-gray-600", children: leftAddon }) })), jsxRuntime.jsx("input", { id: inputId, type: actualType, className: cn(baseStyles, variants[actualVariant], sizes[size], countryCodeSelect && "pl-24", leftIcon && !countryCodeSelect && !leftAddon && "pl-10", leftAddon && !countryCodeSelect && !leftIcon && "pl-16", (rightIcon || shouldShowPasswordToggle) && "pr-10", rightAddon && !rightIcon && !shouldShowPasswordToggle && "pr-16", className), ref: ref, onChange: handleChange, onBlur: handleBlur, ...props }), rightAddon && !rightIcon && !shouldShowPasswordToggle && (jsxRuntime.jsx("div", { className: "flex absolute inset-y-0 right-0 items-center pr-3 pointer-events-none", children: jsxRuntime.jsx("span", { className: "text-sm font-medium text-ews-gray-500", children: rightAddon }) })), rightIcon && !shouldShowPasswordToggle && (jsxRuntime.jsx("div", { className: "flex absolute inset-y-0 right-0 items-center pr-3 pointer-events-none", children: jsxRuntime.jsx("span", { className: cn("text-ews-gray-400", iconSizes[size]), children: rightIcon }) })), shouldShowPasswordToggle && (jsxRuntime.jsx("button", { type: "button", className: "flex absolute inset-y-0 right-0 items-center pr-3", onClick: () => setShowPassword(!showPassword), tabIndex: -1, children: jsxRuntime.jsx("span", { className: cn("transition-colors text-ews-gray-400 hover:text-ews-gray-600", iconSizes[size]), children: showPassword ? jsxRuntime.jsx(EyeOff, { size: 16 }) : jsxRuntime.jsx(Eye, { size: 16 }) }) }))] }), (error || helperText) && (jsxRuntime.jsx("p", { className: cn("text-sm", error ? "text-ews-error" : "text-ews-gray-500"), children: error || helperText }))] }));
 });
 Input.displayName = "Input";
 
@@ -32921,29 +32939,23 @@ var isWeb = typeof window !== 'undefined' &&
     typeof document !== 'undefined';
 
 function cloneObject(data) {
-    let copy;
-    const isArray = Array.isArray(data);
-    const isFileListInstance = typeof FileList !== 'undefined' ? data instanceof FileList : false;
     if (data instanceof Date) {
-        copy = new Date(data);
+        return new Date(data);
     }
-    else if (!(isWeb && (data instanceof Blob || isFileListInstance)) &&
-        (isArray || isObject(data))) {
-        copy = isArray ? [] : Object.create(Object.getPrototypeOf(data));
-        if (!isArray && !isPlainObject(data)) {
-            copy = data;
-        }
-        else {
-            for (const key in data) {
-                if (data.hasOwnProperty(key)) {
-                    copy[key] = cloneObject(data[key]);
-                }
-            }
-        }
+    const isFileListInstance = typeof FileList !== 'undefined' && data instanceof FileList;
+    if (isWeb && (data instanceof Blob || isFileListInstance)) {
+        return data;
     }
-    else {
+    const isArray = Array.isArray(data);
+    if (!isArray && !(isObject(data) && isPlainObject(data))) {
         return data;
     }
+    const copy = isArray ? [] : Object.create(Object.getPrototypeOf(data));
+    for (const key in data) {
+        if (Object.prototype.hasOwnProperty.call(data, key)) {
+            copy[key] = cloneObject(data[key]);
+        }
+    }
     return copy;
 }
 
@@ -32969,6 +32981,8 @@ var get = (object, path, defaultValue) => {
 
 var isBoolean = (value) => typeof value === 'boolean';
 
+var isFunction = (value) => typeof value === 'function';
+
 var set = (object, path, value) => {
     let index = -1;
     const tempPath = isKey(path) ? [path] : stringToPath(path);
@@ -32996,45 +33010,21 @@ var set = (object, path, value) => {
 
 const EVENTS = {
     BLUR: 'blur',
-    CHANGE: 'change',
-};
+    CHANGE: 'change'};
 const VALIDATION_MODE = {
     all: 'all',
 };
 
-const HookFormContext = React.createContext(null);
-HookFormContext.displayName = 'HookFormContext';
 /**
- * This custom hook allows you to access the form context. useFormContext is intended to be used in deeply nested structures, where it would become inconvenient to pass the context as a prop. To be used with {@link FormProvider}.
- *
- * @remarks
- * [API](https://react-hook-form.com/docs/useformcontext) • [Demo](https://codesandbox.io/s/react-hook-form-v7-form-context-ytudi)
- *
- * @returns return all useForm methods
- *
- * @example
- * ```tsx
- * function App() {
- *   const methods = useForm();
- *   const onSubmit = data => console.log(data);
- *
- *   return (
- *     <FormProvider {...methods} >
- *       <form onSubmit={methods.handleSubmit(onSubmit)}>
- *         <NestedInput />
- *         <input type="submit" />
- *       </form>
- *     </FormProvider>
- *   );
- * }
- *
- *  function NestedInput() {
- *   const { register } = useFormContext(); // retrieve all hook methods
- *   return <input {...register("test")} />;
- * }
- * ```
+ * Separate context for `control` to prevent unnecessary rerenders.
+ * Internal hooks that only need control use this instead of full form context.
+ */
+const HookFormControlContext = React.createContext(null);
+HookFormControlContext.displayName = 'HookFormControlContext';
+/**
+ * @internal Internal hook to access only control from context.
  */
-const useFormContext = () => React.useContext(HookFormContext);
+const useFormControlContext = () => React.useContext(HookFormControlContext);
 
 var getProxyFormState = (formState, control, localProxyFormState, isRoot = true) => {
     const result = {
@@ -33088,8 +33078,8 @@ const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayou
  * ```
  */
 function useFormState(props) {
-    const methods = useFormContext();
-    const { control = methods.control, disabled, name, exact } = props || {};
+    const formControl = useFormControlContext();
+    const { control = formControl, disabled, name, exact } = props || {};
     const [formState, updateFormState] = React.useState(control._formState);
     const _localProxyFormState = React.useRef({
         isDirty: false,
@@ -33135,10 +33125,10 @@ var isPrimitive = (value) => isNullOrUndefined(value) || !isObjectType(value);
 
 function deepEqual(object1, object2, _internal_visited = new WeakSet()) {
     if (isPrimitive(object1) || isPrimitive(object2)) {
-        return object1 === object2;
+        return Object.is(object1, object2);
     }
     if (isDateObject(object1) && isDateObject(object2)) {
-        return object1.getTime() === object2.getTime();
+        return Object.is(object1.getTime(), object2.getTime());
     }
     const keys1 = Object.keys(object1);
     const keys2 = Object.keys(object2);
@@ -33161,7 +33151,7 @@ function deepEqual(object1, object2, _internal_visited = new WeakSet()) {
                 (isObject(val1) && isObject(val2)) ||
                 (Array.isArray(val1) && Array.isArray(val2))
                 ? !deepEqual(val1, val2, _internal_visited)
-                : val1 !== val2) {
+                : !Object.is(val1, val2)) {
                 return false;
             }
         }
@@ -33186,8 +33176,8 @@ function deepEqual(object1, object2, _internal_visited = new WeakSet()) {
  * ```
  */
 function useWatch(props) {
-    const methods = useFormContext();
-    const { control = methods.control, name, defaultValue, disabled, exact, compute, } = props || {};
+    const formControl = useFormControlContext();
+    const { control = formControl, name, defaultValue, disabled, exact, compute, } = props || {};
     const _defaultValue = React.useRef(defaultValue);
     const _compute = React.useRef(compute);
     const _computeFormValues = React.useRef(undefined);
@@ -33280,20 +33270,20 @@ function useWatch(props) {
  * ```
  */
 function useController(props) {
-    const methods = useFormContext();
-    const { name, disabled, control = methods.control, shouldUnregister, defaultValue, } = props;
+    const formControl = useFormControlContext();
+    const { name, disabled, control = formControl, shouldUnregister, defaultValue, exact = true, } = props;
     const isArrayField = isNameInFieldArray(control._names.array, name);
     const defaultValueMemo = React.useMemo(() => get(control._formValues, name, get(control._defaultValues, name, defaultValue)), [control, name, defaultValue]);
     const value = useWatch({
         control,
         name,
         defaultValue: defaultValueMemo,
-        exact: true,
+        exact,
     });
     const formState = useFormState({
         control,
         name,
-        exact: true,
+        exact,
     });
     const _props = React.useRef(props);
     const _previousNameRef = React.useRef(undefined);
@@ -33341,12 +33331,12 @@ function useController(props) {
     }), [name, control._formValues]);
     const ref = React.useCallback((elm) => {
         const field = get(control._fields, name);
-        if (field && elm) {
+        if (field && field._f && elm) {
             field._f.ref = {
-                focus: () => elm.focus && elm.focus(),
-                select: () => elm.select && elm.select(),
-                setCustomValidity: (message) => elm.setCustomValidity(message),
-                reportValidity: () => elm.reportValidity(),
+                focus: () => isFunction(elm.focus) && elm.focus(),
+                select: () => isFunction(elm.select) && elm.select(),
+                setCustomValidity: (message) => isFunction(elm.setCustomValidity) && elm.setCustomValidity(message),
+                reportValidity: () => isFunction(elm.reportValidity) && elm.reportValidity(),
             };
         }
     }, [control._fields, name]);
@@ -33453,6 +33443,9 @@ function useController(props) {
  */
 const Controller = (props) => props.render(useController(props));
 
+const HookFormContext = React.createContext(null);
+HookFormContext.displayName = 'HookFormContext';
+
 function useSelectField({ name, control, options: _options, rules, defaultValue, }) {
     const { field, fieldState: { error, invalid }, } = useController({
         name,