@homecode/ui 4.27.27 → 4.28.1

package/dist/esm/index.js

@@ -18,6 +18,7 @@ export { Icon, icons } from './src/components/Icon/Icon.js';
 export { Input } from './src/components/Input/Input.js';
 export { InputFile } from './src/components/InputFile/InputFile.js';
 export { Label } from './src/components/Label/Label.js';
+export { LangSelector } from './src/components/LangSelector/LangSelector.js';
 export { Lazy } from './src/components/Lazy/Lazy.js';
 export { LightBox } from './src/components/LightBox/LightBox.js';
 export { Menu } from './src/components/Menu/Menu.js';

package/dist/esm/src/components/Form/Form.js

@@ -11,7 +11,7 @@ import '../Button/Button.styl.js';
 import './SubmitButtons/SubmitButtons.styl.js';
 
 const Field = function Field(props) {
-    const { value, error, markEdited, isChanged, isTouched, clearMargins, component: Control = Input, className, onChange, onBlur, handleChange, handleBlur, children, ...controlProps } = props;
+    const { value, error, markEdited, isChanged, isTouched, clearMargins, component: Control = Input, className, onChange, onBlur, handleChange, handleBlur, children, disableErrorReporting, ...controlProps } = props;
     const { name, isHidden } = controlProps;
     const valField = typeof value === 'boolean' ? 'checked' : 'value';
     const classes = cn(className, S.field, isHidden && S.hidden, clearMargins && S.clearMargins, markEdited && isChanged && S.changed);
@@ -31,12 +31,12 @@ const Field = function Field(props) {
         [valField]: value,
         onChange: handleFieldChange,
         onBlur: handleFieldBlur,
-        error: isTouched && error?.message,
+        error: disableErrorReporting ? undefined : isTouched && error?.message,
     });
     return (jsxs("div", { className: classes, children: [jsx(Control, { ...controlProps }), children] }));
 };
 function Form(props) {
-    const { className, children, initialValues = {}, validationSchema, defaultDisabled = {}, defaultValues, markEdited, onInit, onChange, onSubmit, ...restProps } = props;
+    const { className, children, initialValues = {}, validationSchema, defaultDisabled = {}, defaultValues, markEdited, disableErrorReporting, onInit, onChange, onSubmit, ...restProps } = props;
     const validationSchemaRef = useRef(validationSchema);
     const defaultValuesRef = useRef({});
     // Update default values helper
@@ -182,14 +182,13 @@ function Form(props) {
         if (valuesRef.current[field] === val)
             return;
         const newValues = { ...valuesRef.current, [field]: val };
-        if (onChangeRef.current && !onChangeRef.current(newValues))
-            return;
+        onChange?.(newValues);
         const isTouched = !compare(val, initialValues[field]);
         setValue(field, val);
         setFieldTouched(field, isTouched);
         calcChanged(field, val);
         validate();
-    }, [calcChanged, validate, initialValues]);
+    }, [calcChanged, validate, initialValues, onChange]);
     const onBlurHandler = useCallback((name) => {
         setFieldTouched(name, true);
     }, []);
@@ -206,7 +205,7 @@ function Form(props) {
         setIsLoading(false);
     };
     const FieldComponent = useRef((fieldProps) => {
-        const { name } = fieldProps;
+        const { name, disableErrorReporting: fieldDisableErrorReporting } = fieldProps;
         const fullProps = {
             ...fieldProps,
             value: valuesRef.current[name],
@@ -216,6 +215,7 @@ function Form(props) {
             isTouched: touchedRef.current[name],
             handleChange: (...args) => onChangeHandlerRef.current(...args),
             handleBlur: (...args) => onBlurHandlerRef.current(...args),
+            disableErrorReporting: fieldDisableErrorReporting ?? disableErrorReporting,
         };
         if (validationSchemaRef.current?.[name]?.empty === false) {
             fullProps.required = true;
@@ -265,7 +265,6 @@ function Form(props) {
         if (onInit)
             onInit(formAPI);
     }, []);
-    console.log('FORM: initialValues', initialValues);
     const classes = cn(S.root, className, isLoading && S.isLoading);
     return (jsx("form", { className: classes, ...restProps, onSubmit: onSubmitHandler, children: children(formAPI) }));
 }

package/dist/esm/src/components/InputFile/InputFile.js

@@ -42,6 +42,7 @@ import '../Form/Validator.js';
 import '../Form/SubmitButtons/SubmitButtons.styl.js';
 import '../Gallery/Gallery.styl.js';
 import '../Heading/Heading.js';
+import '../../services/i18n.js';
 import '../LightBox/LightBox.styl.js';
 import '../Menu/Menu.js';
 import '../Notifications/store.js';
@@ -58,7 +59,6 @@ import '../Virtualized/Virtualized.styl.js';
 import '../Virtualized/List/List.styl.js';
 import '../Virtualized/List/ListScroll.styl.js';
 import '../Toggle/Toggle.styl.js';
-import '../../services/i18n.js';
 
 const SCROLL_OFFSET = {
     s: 10,

package/dist/esm/src/components/LangSelector/LangSelector.js

@@ -0,0 +1,10 @@
+import { jsx } from 'react/jsx-runtime';
+import { Select2 } from '../Select/Select2.js';
+import { useI18N } from '../../services/i18n.js';
+
+function LangSelector(props) {
+    const i18n = useI18N();
+    return jsx(Select2, { value: i18n.lang, onChange: i18n.changeLang, ...props });
+}
+
+export { LangSelector };

package/dist/esm/src/components/Select/Select.styl.js

@@ -1,6 +1,6 @@
 import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
 
-var css_248z = ".Select_root__mjOjv{max-height:200px;max-width:100%;position:relative}.Select_root__mjOjv.Select_disabled__AlOQi{opacity:.4;pointer-events:none}.Select_additionalLabel__K0--Z{flex-grow:1;overflow:hidden;text-align:left;text-overflow:ellipsis}.Select_trigger__OH48f{position:relative;z-index:1}.Select_triggerArrow__1LEop{flex-shrink:0;margin-left:.3em;margin-right:-.1em;transition:transform .2s ease-out}.Select_triggerArrow__1LEop.Select_isOpen__WlMUH{transform:rotateX(-180deg)}.Select_disabled__AlOQi .Select_triggerArrow__1LEop{color:var(--text3-color)}.Select_triggerButton__lErtt{justify-content:space-between;text-align:left;width:100%}.Select_triggerButton__lErtt.Select_hasTriggerArrow__vPLad>span{max-width:calc(100% - 22px)}.Select_triggerButton__lErtt.Select_isError__WJJLq{box-shadow:inset 0 0 0 2px var(--danger-color)}.Select_triggerButton__lErtt .Select_triggerButtonLabel__XXLzh{line-height:1.2em;opacity:0;overflow:hidden;text-overflow:ellipsis}.Select_triggerButton__lErtt .Select_triggerButtonLabel__XXLzh.Select_hasSelected__zQhBV{opacity:1}.Select_presetPanel__Yu94r{box-shadow:inset 0 -1px 0 var(--decent-color-alpha-100);display:flex;padding:5px}.Select_presetButton__BAl0q{flex-grow:1;justify-content:center}.Select_presetButton__BAl0q+.Select_presetButton__BAl0q{margin-left:8px}.Select_options__3C0-v{max-height:200px;overflow-y:auto}.keyboard .Select_options__3C0-v{pointer-events:none}.Select_option__iJkfJ{align-items:center;cursor:pointer;display:flex;overflow:hidden;padding-bottom:0!important;padding-top:0!important;position:relative;text-align:left;text-overflow:ellipsis;-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap;width:100%}.Select_isTree__SiTaD .Select_option__iJkfJ{min-height:36px}.Select_size-s__qBK9t .Select_option__iJkfJ{font-size:12px;height:26px;padding:0 14px}.Select_size-m__jp7n- .Select_option__iJkfJ{font-size:16px;height:34px;padding:0 16px}.Select_size-l__b4EEy .Select_option__iJkfJ{font-size:20px;height:42px;padding:0 18px}.Select_size-xl__0OerX .Select_option__iJkfJ{font-size:24px;height:50px;padding:0 20px}.Select_option__iJkfJ:first-child{border-top-left-radius:2px;border-top-right-radius:2px}.Select_option__iJkfJ:last-child{border-bottom-left-radius:2px;border-bottom-right-radius:2px}.Select_isTree__SiTaD .Select_option__iJkfJ{padding-left:30px}.Select_option__iJkfJ.Select_isGroup__aP1lY{color:var(--accent-color);font-weight:500;pointer-events:none}.Select_isExpanded__rG8R1>.Select_option__iJkfJ{display:flex}.Select_option__iJkfJ>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Select_option__iJkfJ:before{content:\"\";display:inline-block}.Select_option__iJkfJ.Select_level-0__vu03A:before{content:none}.Select_option__iJkfJ.Select_level-1__ozH2U:before{min-width:24px;width:24px}.Select_option__iJkfJ.Select_level-2__XDqeh:before{min-width:48px;width:48px}.Select_option__iJkfJ.Select_level-3__Bc9XS:before{min-width:72px;width:72px}.Select_option__iJkfJ.Select_level-4__KfQcQ:before{min-width:96px;width:96px}.Select_option__iJkfJ.Select_level-5__DGSDM:before{min-width:120px;width:120px}.Select_option__iJkfJ.Select_level-6__p688A:before{min-width:144px;width:144px}.Select_option__iJkfJ.Select_isIndeterminate__dy-xV,.Select_option__iJkfJ.Select_isSelected__n3ZeN{background-color:var(--active-color-alpha-500)}.keyboard .Select_option__iJkfJ.Select_isFocused__oZSgY,.pointer .Select_option__iJkfJ:hover{box-shadow:inset 100vw 0 0 0 var(--accent-color-alpha-200)}.Select_expandButton__UTwlR{background-color:transparent!important;display:flex;height:100%;justify-content:flex-end;overflow:visible;padding:0;position:relative;width:30px}.Select_expandButton__UTwlR:before{content:\"\";display:block;height:calc(100% + 20px);position:absolute;right:0;top:-10;width:100px}.Select_size-m__jp7n- .Select_expandButton__UTwlR{margin-left:-40px}.Select_size-l__b4EEy .Select_expandButton__UTwlR{margin-left:-46px}.Select_expandIcon__gWAIB{-webkit-backface-visibility:hidden;backface-visibility:hidden;transition:transform .1s ease-out}.Select_isExpanded__rG8R1 .Select_expandIcon__gWAIB{transform:rotate(90deg) translateZ(0)}.Select_expandButton__UTwlR:hover .Select_expandIcon__gWAIB{color:var(--primary-color)}@keyframes Select_fadeIn__QpAwZ{0%{opacity:0}10%{opacity:0}to{opacity:1}}";
+var css_248z = ".Select_root__mjOjv{max-height:200px;max-width:100%;position:relative}.Select_root__mjOjv.Select_disabled__AlOQi{opacity:.4;pointer-events:none}.Select_additionalLabel__K0--Z{flex-grow:1;overflow:hidden;text-align:left;text-overflow:ellipsis}.Select_trigger__OH48f{position:relative;z-index:1}.Select_triggerArrow__1LEop{flex-shrink:0;margin-left:.3em;margin-right:-.3em;transition:transform .2s ease-out}.Select_triggerArrow__1LEop.Select_isOpen__WlMUH{transform:rotateX(-180deg)}.Select_disabled__AlOQi .Select_triggerArrow__1LEop{color:var(--text3-color)}.Select_triggerButton__lErtt{justify-content:space-between;text-align:left;width:100%}.Select_triggerButton__lErtt.Select_hasTriggerArrow__vPLad>span{max-width:calc(100% - 22px)}.Select_triggerButton__lErtt.Select_isError__WJJLq{box-shadow:inset 0 0 0 2px var(--danger-color)}.Select_triggerButton__lErtt .Select_triggerButtonLabel__XXLzh{line-height:1.2em;opacity:0;overflow:hidden;text-overflow:ellipsis}.Select_triggerButton__lErtt .Select_triggerButtonLabel__XXLzh.Select_hasSelected__zQhBV{opacity:1}.Select_presetPanel__Yu94r{box-shadow:inset 0 -1px 0 var(--decent-color-alpha-100);display:flex;padding:5px}.Select_presetButton__BAl0q{flex-grow:1;justify-content:center}.Select_presetButton__BAl0q+.Select_presetButton__BAl0q{margin-left:8px}.Select_options__3C0-v{max-height:200px;overflow-y:auto}.keyboard .Select_options__3C0-v{pointer-events:none}.Select_option__iJkfJ{align-items:center;cursor:pointer;display:flex;overflow:hidden;padding-bottom:0!important;padding-top:0!important;position:relative;text-align:left;text-overflow:ellipsis;-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap;width:100%}.Select_isTree__SiTaD .Select_option__iJkfJ{min-height:36px}.Select_size-s__qBK9t .Select_option__iJkfJ{font-size:12px;height:26px;padding:0 14px}.Select_size-m__jp7n- .Select_option__iJkfJ{font-size:16px;height:34px;padding:0 16px}.Select_size-l__b4EEy .Select_option__iJkfJ{font-size:20px;height:42px;padding:0 18px}.Select_size-xl__0OerX .Select_option__iJkfJ{font-size:24px;height:50px;padding:0 20px}.Select_option__iJkfJ:first-child{border-top-left-radius:2px;border-top-right-radius:2px}.Select_option__iJkfJ:last-child{border-bottom-left-radius:2px;border-bottom-right-radius:2px}.Select_isTree__SiTaD .Select_option__iJkfJ{padding-left:30px}.Select_option__iJkfJ.Select_isGroup__aP1lY{color:var(--accent-color);font-weight:500;pointer-events:none}.Select_isExpanded__rG8R1>.Select_option__iJkfJ{display:flex}.Select_option__iJkfJ>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Select_option__iJkfJ:before{content:\"\";display:inline-block}.Select_option__iJkfJ.Select_level-0__vu03A:before{content:none}.Select_option__iJkfJ.Select_level-1__ozH2U:before{min-width:24px;width:24px}.Select_option__iJkfJ.Select_level-2__XDqeh:before{min-width:48px;width:48px}.Select_option__iJkfJ.Select_level-3__Bc9XS:before{min-width:72px;width:72px}.Select_option__iJkfJ.Select_level-4__KfQcQ:before{min-width:96px;width:96px}.Select_option__iJkfJ.Select_level-5__DGSDM:before{min-width:120px;width:120px}.Select_option__iJkfJ.Select_level-6__p688A:before{min-width:144px;width:144px}.Select_option__iJkfJ.Select_isIndeterminate__dy-xV,.Select_option__iJkfJ.Select_isSelected__n3ZeN{background-color:var(--active-color-alpha-500)}.keyboard .Select_option__iJkfJ.Select_isFocused__oZSgY,.pointer .Select_option__iJkfJ:hover{box-shadow:inset 100vw 0 0 0 var(--accent-color-alpha-200)}.Select_expandButton__UTwlR{background-color:transparent!important;display:flex;height:100%;justify-content:flex-end;overflow:visible;padding:0;position:relative;width:30px}.Select_expandButton__UTwlR:before{content:\"\";display:block;height:calc(100% + 20px);position:absolute;right:0;top:-10;width:100px}.Select_size-m__jp7n- .Select_expandButton__UTwlR{margin-left:-40px}.Select_size-l__b4EEy .Select_expandButton__UTwlR{margin-left:-46px}.Select_expandIcon__gWAIB{-webkit-backface-visibility:hidden;backface-visibility:hidden;transition:transform .1s ease-out}.Select_isExpanded__rG8R1 .Select_expandIcon__gWAIB{transform:rotate(90deg) translateZ(0)}.Select_expandButton__UTwlR:hover .Select_expandIcon__gWAIB{color:var(--primary-color)}@keyframes Select_fadeIn__QpAwZ{0%{opacity:0}10%{opacity:0}to{opacity:1}}";
 var S = {"root":"Select_root__mjOjv","disabled":"Select_disabled__AlOQi","additionalLabel":"Select_additionalLabel__K0--Z","trigger":"Select_trigger__OH48f","triggerArrow":"Select_triggerArrow__1LEop","isOpen":"Select_isOpen__WlMUH","triggerButton":"Select_triggerButton__lErtt","hasTriggerArrow":"Select_hasTriggerArrow__vPLad","isError":"Select_isError__WJJLq","triggerButtonLabel":"Select_triggerButtonLabel__XXLzh","hasSelected":"Select_hasSelected__zQhBV","presetPanel":"Select_presetPanel__Yu94r","presetButton":"Select_presetButton__BAl0q","options":"Select_options__3C0-v","option":"Select_option__iJkfJ","isTree":"Select_isTree__SiTaD","size-s":"Select_size-s__qBK9t","size-m":"Select_size-m__jp7n-","size-l":"Select_size-l__b4EEy","size-xl":"Select_size-xl__0OerX","isGroup":"Select_isGroup__aP1lY","isExpanded":"Select_isExpanded__rG8R1","level-0":"Select_level-0__vu03A","level-1":"Select_level-1__ozH2U","level-2":"Select_level-2__XDqeh","level-3":"Select_level-3__Bc9XS","level-4":"Select_level-4__KfQcQ","level-5":"Select_level-5__DGSDM","level-6":"Select_level-6__p688A","isSelected":"Select_isSelected__n3ZeN","isIndeterminate":"Select_isIndeterminate__dy-xV","isFocused":"Select_isFocused__oZSgY","expandButton":"Select_expandButton__UTwlR","expandIcon":"Select_expandIcon__gWAIB","fadeIn":"Select_fadeIn__QpAwZ"};
 styleInject(css_248z);
 

package/dist/esm/src/services/i18n.js

@@ -31,8 +31,46 @@ function init(config) {
         }
         return null;
     };
-    function getTrans(key, props = []) {
-        return _getText(store.lang, key, props) || key;
+    function getTrans(key, props) {
+        // Handle different prop formats according to roddeh-i18n
+        if (!props) {
+            return _getText(store.lang, key, []) || key;
+        }
+        // If props is a number, it's for pluralization
+        if (typeof props === 'number') {
+            return _getText(store.lang, key, [props]) || key;
+        }
+        // If props is an object, handle different cases
+        if (typeof props === 'object') {
+            const args = [];
+            // For plural forms with parameters
+            if ('plural' in props) {
+                args.push(props.plural);
+            }
+            // For parameters/formatting
+            if ('params' in props) {
+                args.push(props.params);
+            }
+            else if ('plural' in props && 'params' in props) ;
+            else if (!('plural' in props) && !('context' in props)) {
+                // If it's just a plain object without our special keys, treat it as params
+                args.push(props);
+            }
+            // Context comes last
+            if ('context' in props) {
+                // If we don't have params but have context, add empty params
+                if (!('params' in props) && !('plural' in props)) {
+                    args.push({});
+                }
+                args.push(props.context);
+            }
+            return _getText(store.lang, key, args) || key;
+        }
+        // For backward compatibility with array format
+        if (Array.isArray(props)) {
+            return _getText(store.lang, key, props) || key;
+        }
+        return key;
     }
     const storeName = `i18n-${nanoid()}`;
     const componentStore = createStore(storeName, { _updated: '' });
@@ -48,26 +86,27 @@ function init(config) {
             return callLoader(loader, lang);
         modules[lang].push(() => callLoader(loader, lang));
     });
-    // TODO: revert ability to register modules
+    // TODO: bring back the ability to register modules
     return {
         storeName,
         componentStore,
         // hook (update when componentStore._updated changed)
         withI18N: Component => props => {
-            useStore({ [storeName]: [] });
+            useStore({ [storeName]: ['_updated'] });
             return jsx(Component, { ...props });
         },
         i18n: (key, props) => getTrans(key, props),
         I18N: memo(function I18N({ id, children, props }) {
             useStore({
                 i18n: ['lang'],
-                [storeName]: [],
+                [storeName]: ['_updated'], // explicitly subscribe to _updated
             });
             const key = id ?? children;
             // @ts-ignore
             return jsx(Fragment, { children: getTrans(key, props) });
         }),
     };
-}
+}
+const useI18N = (fields = 'lang') => useStore({ i18n: [fields] }).i18n;
 
-export { init, store };
+export { init, store, useI18N };

package/dist/esm/types/src/components/Form/Form.types.d.ts

@@ -48,6 +48,7 @@ export type Props = ComponentType & {
     defaultDisabled?: FieldsFlags;
     validationSchema?: FormValidationSchema;
     markEdited?: boolean;
+    disableErrorReporting?: boolean;
     children: (api: FormAPI) => ReactNode | ReactNode[];
     onInit?: (api: FormAPI) => boolean | void;
     onChange?: (values: FormValues) => void | boolean;
@@ -61,6 +62,7 @@ export type FieldProps = {
     markEdited?: Props['markEdited'];
     value: any;
     isHidden: boolean;
+    disableErrorReporting?: boolean;
     component?: (props: FormFieldProps) => ReactNode;
     children?: ReactNode;
 };

package/dist/esm/types/src/components/LangSelector/LangSelector.d.ts

@@ -0,0 +1,2 @@
+import { LangSelectorProps } from './LangSelector.types';
+export declare function LangSelector(props: LangSelectorProps): JSX.Element;

package/dist/esm/types/src/components/LangSelector/LangSelector.types.d.ts

@@ -0,0 +1,8 @@
+import { Props as SelectProps } from '../Select/Select.types';
+export interface LangOption {
+    id: string;
+    label: string;
+}
+export interface LangSelectorProps extends Omit<SelectProps, 'value' | 'onChange' | 'options'> {
+    options: LangOption[];
+}

package/dist/esm/types/src/components/index.d.ts

@@ -18,6 +18,7 @@ export * from './Icon/Icon';
 export * from './Input/Input';
 export * from './InputFile/InputFile';
 export * from './Label/Label';
+export * from './LangSelector/LangSelector';
 export * from './Lazy/Lazy';
 export * from './LightBox/LightBox';
 export * from './Menu/Menu';

package/dist/esm/types/src/services/i18n.d.ts

@@ -1,26 +1,15 @@
-type LangLoader = () => Promise<{
-    default: object;
-}>;
-type RegisterConfig = {
-    [lang: string]: LangLoader;
-};
-type I18NProps = {
-    id?: string;
-    children?: React.ReactNode;
-    props?: number | Record<string, any>;
-};
+import * as T from './i18n.types';
 export declare const store: import("justorm/dist/esm/proxy").ProxyStore<{
     lang: string | void;
     changeLang(lang: any): Promise<void>;
 }>;
-export declare function init(config: RegisterConfig): {
+export declare function init(config: T.RegisterConfig): {
     storeName: string;
     componentStore: import("justorm/dist/esm/proxy").ProxyStore<{
         _updated: string;
     }>;
     withI18N: (Component: any) => (props: any) => JSX.Element;
     i18n: (key: any, props?: any) => any;
-    I18N: import("react").NamedExoticComponent<I18NProps>;
+    I18N: import("react").NamedExoticComponent<T.I18NProps>;
 };
-export type I18NStore = typeof store;
-export {};
+export declare const useI18N: (fields?: keyof T.I18NStore) => any;

package/dist/esm/types/src/services/i18n.types.d.ts

@@ -0,0 +1,18 @@
+export type LangLoader = Record<string, any> | (() => Promise<{
+    default: object;
+}>);
+export type RegisterConfig = Record<string, LangLoader>;
+export type I18NPropsField = number | {
+    plural?: number;
+    params?: Record<string, any>;
+    context?: string;
+};
+export type I18NProps = {
+    id?: string;
+    children?: React.ReactNode;
+    props?: I18NPropsField;
+};
+export type I18NStore = {
+    lang: string;
+    changeLang: (lang: string) => Promise<void>;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homecode/ui",
-  "version": "4.27.27",
+  "version": "4.28.1",
   "description": "React UI components library",
   "scripts": {
     "tests": "jest",