akeyless-client-commons 1.0.105 → 1.0.107

package/dist/components/index.d.mts

@@ -311,6 +311,7 @@ interface ModularFormProps {
     labelsCommonClassName?: string;
     errorClassName?: string;
     onLoad?: (e: EventTarget & HTMLFormElement) => void;
+    autoFixLabelsWidth?: boolean;
 }
 interface ConfirmFormProps {
     onV: () => Promise<void> | void;
@@ -534,9 +535,9 @@ declare const TableProvider: (props: TableProps & {
 }) => react_jsx_runtime.JSX.Element;
 declare const Table: React__default.MemoExoticComponent<(props: TableProps) => react_jsx_runtime.JSX.Element>;
 
-declare const ModularForm: ({ submitFunction, elements, headerContent, buttonContent, formClassName, headerClassName, direction, buttonClassName, submitRef, footerClassName, errorClassName, labelsCommonClassName: labelsCommonClassNameProps, onLoad, }: ModularFormProps) => react_jsx_runtime.JSX.Element;
+declare const ModularForm: ({ submitFunction, elements, headerContent, buttonContent, formClassName, headerClassName, direction, buttonClassName, submitRef, footerClassName, errorClassName, labelsCommonClassName, autoFixLabelsWidth, onLoad, }: ModularFormProps) => react_jsx_runtime.JSX.Element;
 
-declare function InternationalPhonePicker({ setPhoneValue, phoneValue, placeholder, className, containerClassName, defaultCountry, flagContainerClassName, inputClassName, defaultValue, name, style, onEnter, labelContent, labelClassName, required, direction, defaultFocus, }: InternationalInputProps): react_jsx_runtime.JSX.Element;
+declare function InternationalPhonePicker({ setPhoneValue, phoneValue, placeholder, className, containerClassName, defaultCountry, flagContainerClassName, inputClassName, defaultValue, name, style, onEnter, labelContent, labelClassName, required, direction, defaultFocus, labelsCommonClassName, }: InternationalInputProps): react_jsx_runtime.JSX.Element;
 
 declare const useSortValues: (options: any[], sortDirection: "abc" | "cba", sortAsNumber?: boolean) => any[];
 declare const InputContainer: ({ validationError, name, inputType, labelContent, defaultValue, validationName, containerClassName, labelClassName, elementClassName, required, placeholder, props, minLength, onKeyDown, onChange, direction, value, labelWithDots, labelsCommonClassName, }: InputContainerProps) => react_jsx_runtime.JSX.Element;

package/dist/components/index.d.ts

@@ -311,6 +311,7 @@ interface ModularFormProps {
     labelsCommonClassName?: string;
     errorClassName?: string;
     onLoad?: (e: EventTarget & HTMLFormElement) => void;
+    autoFixLabelsWidth?: boolean;
 }
 interface ConfirmFormProps {
     onV: () => Promise<void> | void;
@@ -534,9 +535,9 @@ declare const TableProvider: (props: TableProps & {
 }) => react_jsx_runtime.JSX.Element;
 declare const Table: React__default.MemoExoticComponent<(props: TableProps) => react_jsx_runtime.JSX.Element>;
 
-declare const ModularForm: ({ submitFunction, elements, headerContent, buttonContent, formClassName, headerClassName, direction, buttonClassName, submitRef, footerClassName, errorClassName, labelsCommonClassName: labelsCommonClassNameProps, onLoad, }: ModularFormProps) => react_jsx_runtime.JSX.Element;
+declare const ModularForm: ({ submitFunction, elements, headerContent, buttonContent, formClassName, headerClassName, direction, buttonClassName, submitRef, footerClassName, errorClassName, labelsCommonClassName, autoFixLabelsWidth, onLoad, }: ModularFormProps) => react_jsx_runtime.JSX.Element;
 
-declare function InternationalPhonePicker({ setPhoneValue, phoneValue, placeholder, className, containerClassName, defaultCountry, flagContainerClassName, inputClassName, defaultValue, name, style, onEnter, labelContent, labelClassName, required, direction, defaultFocus, }: InternationalInputProps): react_jsx_runtime.JSX.Element;
+declare function InternationalPhonePicker({ setPhoneValue, phoneValue, placeholder, className, containerClassName, defaultCountry, flagContainerClassName, inputClassName, defaultValue, name, style, onEnter, labelContent, labelClassName, required, direction, defaultFocus, labelsCommonClassName, }: InternationalInputProps): react_jsx_runtime.JSX.Element;
 
 declare const useSortValues: (options: any[], sortDirection: "abc" | "cba", sortAsNumber?: boolean) => any[];
 declare const InputContainer: ({ validationError, name, inputType, labelContent, defaultValue, validationName, containerClassName, labelClassName, elementClassName, required, placeholder, props, minLength, onKeyDown, onChange, direction, value, labelWithDots, labelsCommonClassName, }: InputContainerProps) => react_jsx_runtime.JSX.Element;

package/dist/components/index.js

@@ -5389,7 +5389,7 @@ var RPNInput = __toESM(require("react-phone-number-input"));
 var import_flags = __toESM(require("react-phone-number-input/flags"));
 var import_jsx_runtime19 = require("react/jsx-runtime");
 function InternationalPhonePicker(param) {
-    var setPhoneValue = param.setPhoneValue, _param_phoneValue = param.phoneValue, phoneValue = _param_phoneValue === void 0 ? "" : _param_phoneValue, _param_placeholder = param.placeholder, placeholder = _param_placeholder === void 0 ? "" : _param_placeholder, _param_className = param.className, className = _param_className === void 0 ? "" : _param_className, _param_containerClassName = param.containerClassName, containerClassName = _param_containerClassName === void 0 ? "" : _param_containerClassName, _param_defaultCountry = param.defaultCountry, defaultCountry = _param_defaultCountry === void 0 ? "IL" : _param_defaultCountry, _param_flagContainerClassName = param.flagContainerClassName, flagContainerClassName = _param_flagContainerClassName === void 0 ? "" : _param_flagContainerClassName, _param_inputClassName = param.inputClassName, inputClassName = _param_inputClassName === void 0 ? "" : _param_inputClassName, defaultValue = param.defaultValue, name = param.name, style = param.style, onEnter = param.onEnter, labelContent = param.labelContent, labelClassName = param.labelClassName, required = param.required, direction = param.direction, _param_defaultFocus = param.defaultFocus, defaultFocus = _param_defaultFocus === void 0 ? true : _param_defaultFocus;
+    var setPhoneValue = param.setPhoneValue, _param_phoneValue = param.phoneValue, phoneValue = _param_phoneValue === void 0 ? "" : _param_phoneValue, _param_placeholder = param.placeholder, placeholder = _param_placeholder === void 0 ? "" : _param_placeholder, _param_className = param.className, className = _param_className === void 0 ? "" : _param_className, _param_containerClassName = param.containerClassName, containerClassName = _param_containerClassName === void 0 ? "" : _param_containerClassName, _param_defaultCountry = param.defaultCountry, defaultCountry = _param_defaultCountry === void 0 ? "IL" : _param_defaultCountry, _param_flagContainerClassName = param.flagContainerClassName, flagContainerClassName = _param_flagContainerClassName === void 0 ? "" : _param_flagContainerClassName, _param_inputClassName = param.inputClassName, inputClassName = _param_inputClassName === void 0 ? "" : _param_inputClassName, defaultValue = param.defaultValue, name = param.name, style = param.style, onEnter = param.onEnter, labelContent = param.labelContent, labelClassName = param.labelClassName, required = param.required, direction = param.direction, _param_defaultFocus = param.defaultFocus, defaultFocus = _param_defaultFocus === void 0 ? true : _param_defaultFocus, labelsCommonClassName = param.labelsCommonClassName;
     var handleKeyDown = function(e) {
         if (e.key === "Enter") {
             if (onEnter) {
@@ -5414,9 +5414,10 @@ function InternationalPhonePicker(param) {
         style: {
             direction: direction
         },
-        className: cn("space-y-2", "".concat(labelContent ? "flex gap-1 items-center" : ""), containerClassName),
+        className: cn("".concat(labelContent ? "flex justify-start items-center gap-3 w-full" : "w-full"), containerClassName),
         children: [
             labelContent && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ElementLabel, {
+                labelsCommonClassName: labelsCommonClassName,
                 labelContent: labelContent,
                 labelClassName: labelClassName,
                 name: name,
@@ -5844,14 +5845,12 @@ var ModularForm = function(param) {
         return function(form) {
             return _ref.apply(this, arguments);
         };
-    }() : _param_submitFunction, _param_elements = param.elements, elements = _param_elements === void 0 ? [] : _param_elements, headerContent = param.headerContent, buttonContent = param.buttonContent, _param_formClassName = param.formClassName, formClassName = _param_formClassName === void 0 ? "" : _param_formClassName, _param_headerClassName = param.headerClassName, headerClassName = _param_headerClassName === void 0 ? "" : _param_headerClassName, _param_direction = param.direction, direction = _param_direction === void 0 ? "rtl" : _param_direction, _param_buttonClassName = param.buttonClassName, buttonClassName = _param_buttonClassName === void 0 ? "" : _param_buttonClassName, submitRef = param.submitRef, _param_footerClassName = param.footerClassName, footerClassName = _param_footerClassName === void 0 ? "" : _param_footerClassName, _param_errorClassName = param.errorClassName, errorClassName = _param_errorClassName === void 0 ? "" : _param_errorClassName, labelsCommonClassNameProps = param.labelsCommonClassName, onLoad = param.onLoad;
+    }() : _param_submitFunction, _param_elements = param.elements, elements = _param_elements === void 0 ? [] : _param_elements, headerContent = param.headerContent, buttonContent = param.buttonContent, _param_formClassName = param.formClassName, formClassName = _param_formClassName === void 0 ? "" : _param_formClassName, _param_headerClassName = param.headerClassName, headerClassName = _param_headerClassName === void 0 ? "" : _param_headerClassName, _param_direction = param.direction, direction = _param_direction === void 0 ? "rtl" : _param_direction, _param_buttonClassName = param.buttonClassName, buttonClassName = _param_buttonClassName === void 0 ? "" : _param_buttonClassName, submitRef = param.submitRef, _param_footerClassName = param.footerClassName, footerClassName = _param_footerClassName === void 0 ? "" : _param_footerClassName, _param_errorClassName = param.errorClassName, errorClassName = _param_errorClassName === void 0 ? "" : _param_errorClassName, labelsCommonClassName = param.labelsCommonClassName, _param_autoFixLabelsWidth = param.autoFixLabelsWidth, autoFixLabelsWidth = _param_autoFixLabelsWidth === void 0 ? true : _param_autoFixLabelsWidth, onLoad = param.onLoad;
     var _ref = _sliced_to_array((0, import_react13.useState)(""), 2), errorMsg = _ref[0], setErrorMsg = _ref[1];
     var _ref1 = _sliced_to_array((0, import_react13.useState)(false), 2), isLoading = _ref1[0], setIsLoading = _ref1[1];
     var formRef = (0, import_react13.useRef)(null);
-    var _ref2 = _sliced_to_array((0, import_react13.useState)(labelsCommonClassNameProps), 2), labelsCommonClassName = _ref2[0], setLabelsCommonClassName = _ref2[1];
     (0, import_react13.useEffect)(function() {
-        if (formRef.current) {
-            onLoad === null || onLoad === void 0 ? void 0 : onLoad(formRef.current);
+        if (formRef.current && autoFixLabelsWidth) {
             var labels = formRef.current.getElementsByClassName("form-label");
             var max_width = 0;
             Array.from(labels).forEach(function(label) {
@@ -5860,7 +5859,17 @@ var ModularForm = function(param) {
                     max_width = label_width;
                 }
             });
-            setLabelsCommonClassName(cn("min-w-[".concat(max_width, "px]"), labelsCommonClassNameProps));
+            Array.from(labels).forEach(function(label) {
+                label.style.minWidth = "".concat(max_width, "px");
+            });
+        }
+    }, [
+        formRef.current,
+        autoFixLabelsWidth
+    ]);
+    (0, import_react13.useEffect)(function() {
+        if (formRef.current) {
+            onLoad === null || onLoad === void 0 ? void 0 : onLoad(formRef.current);
         }
     }, []);
     var onSubmit = /*#__PURE__*/ function() {

package/dist/components/index.mjs

@@ -5185,7 +5185,7 @@ import * as RPNInput from "react-phone-number-input";
 import flags from "react-phone-number-input/flags";
 import { jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
 function InternationalPhonePicker(param) {
-    var setPhoneValue = param.setPhoneValue, _param_phoneValue = param.phoneValue, phoneValue = _param_phoneValue === void 0 ? "" : _param_phoneValue, _param_placeholder = param.placeholder, placeholder = _param_placeholder === void 0 ? "" : _param_placeholder, _param_className = param.className, className = _param_className === void 0 ? "" : _param_className, _param_containerClassName = param.containerClassName, containerClassName = _param_containerClassName === void 0 ? "" : _param_containerClassName, _param_defaultCountry = param.defaultCountry, defaultCountry = _param_defaultCountry === void 0 ? "IL" : _param_defaultCountry, _param_flagContainerClassName = param.flagContainerClassName, flagContainerClassName = _param_flagContainerClassName === void 0 ? "" : _param_flagContainerClassName, _param_inputClassName = param.inputClassName, inputClassName = _param_inputClassName === void 0 ? "" : _param_inputClassName, defaultValue = param.defaultValue, name = param.name, style = param.style, onEnter = param.onEnter, labelContent = param.labelContent, labelClassName = param.labelClassName, required = param.required, direction = param.direction, _param_defaultFocus = param.defaultFocus, defaultFocus = _param_defaultFocus === void 0 ? true : _param_defaultFocus;
+    var setPhoneValue = param.setPhoneValue, _param_phoneValue = param.phoneValue, phoneValue = _param_phoneValue === void 0 ? "" : _param_phoneValue, _param_placeholder = param.placeholder, placeholder = _param_placeholder === void 0 ? "" : _param_placeholder, _param_className = param.className, className = _param_className === void 0 ? "" : _param_className, _param_containerClassName = param.containerClassName, containerClassName = _param_containerClassName === void 0 ? "" : _param_containerClassName, _param_defaultCountry = param.defaultCountry, defaultCountry = _param_defaultCountry === void 0 ? "IL" : _param_defaultCountry, _param_flagContainerClassName = param.flagContainerClassName, flagContainerClassName = _param_flagContainerClassName === void 0 ? "" : _param_flagContainerClassName, _param_inputClassName = param.inputClassName, inputClassName = _param_inputClassName === void 0 ? "" : _param_inputClassName, defaultValue = param.defaultValue, name = param.name, style = param.style, onEnter = param.onEnter, labelContent = param.labelContent, labelClassName = param.labelClassName, required = param.required, direction = param.direction, _param_defaultFocus = param.defaultFocus, defaultFocus = _param_defaultFocus === void 0 ? true : _param_defaultFocus, labelsCommonClassName = param.labelsCommonClassName;
     var handleKeyDown = function(e) {
         if (e.key === "Enter") {
             if (onEnter) {
@@ -5210,9 +5210,10 @@ function InternationalPhonePicker(param) {
         style: {
             direction: direction
         },
-        className: cn("space-y-2", "".concat(labelContent ? "flex gap-1 items-center" : ""), containerClassName),
+        className: cn("".concat(labelContent ? "flex justify-start items-center gap-3 w-full" : "w-full"), containerClassName),
         children: [
             labelContent && /* @__PURE__ */ jsx18(ElementLabel, {
+                labelsCommonClassName: labelsCommonClassName,
                 labelContent: labelContent,
                 labelClassName: labelClassName,
                 name: name,
@@ -5640,14 +5641,12 @@ var ModularForm = function(param) {
         return function(form) {
             return _ref.apply(this, arguments);
         };
-    }() : _param_submitFunction, _param_elements = param.elements, elements = _param_elements === void 0 ? [] : _param_elements, headerContent = param.headerContent, buttonContent = param.buttonContent, _param_formClassName = param.formClassName, formClassName = _param_formClassName === void 0 ? "" : _param_formClassName, _param_headerClassName = param.headerClassName, headerClassName = _param_headerClassName === void 0 ? "" : _param_headerClassName, _param_direction = param.direction, direction = _param_direction === void 0 ? "rtl" : _param_direction, _param_buttonClassName = param.buttonClassName, buttonClassName = _param_buttonClassName === void 0 ? "" : _param_buttonClassName, submitRef = param.submitRef, _param_footerClassName = param.footerClassName, footerClassName = _param_footerClassName === void 0 ? "" : _param_footerClassName, _param_errorClassName = param.errorClassName, errorClassName = _param_errorClassName === void 0 ? "" : _param_errorClassName, labelsCommonClassNameProps = param.labelsCommonClassName, onLoad = param.onLoad;
+    }() : _param_submitFunction, _param_elements = param.elements, elements = _param_elements === void 0 ? [] : _param_elements, headerContent = param.headerContent, buttonContent = param.buttonContent, _param_formClassName = param.formClassName, formClassName = _param_formClassName === void 0 ? "" : _param_formClassName, _param_headerClassName = param.headerClassName, headerClassName = _param_headerClassName === void 0 ? "" : _param_headerClassName, _param_direction = param.direction, direction = _param_direction === void 0 ? "rtl" : _param_direction, _param_buttonClassName = param.buttonClassName, buttonClassName = _param_buttonClassName === void 0 ? "" : _param_buttonClassName, submitRef = param.submitRef, _param_footerClassName = param.footerClassName, footerClassName = _param_footerClassName === void 0 ? "" : _param_footerClassName, _param_errorClassName = param.errorClassName, errorClassName = _param_errorClassName === void 0 ? "" : _param_errorClassName, labelsCommonClassName = param.labelsCommonClassName, _param_autoFixLabelsWidth = param.autoFixLabelsWidth, autoFixLabelsWidth = _param_autoFixLabelsWidth === void 0 ? true : _param_autoFixLabelsWidth, onLoad = param.onLoad;
     var _useState8 = _sliced_to_array(useState8(""), 2), errorMsg = _useState8[0], setErrorMsg = _useState8[1];
     var _useState81 = _sliced_to_array(useState8(false), 2), isLoading = _useState81[0], setIsLoading = _useState81[1];
     var formRef = useRef5(null);
-    var _useState82 = _sliced_to_array(useState8(labelsCommonClassNameProps), 2), labelsCommonClassName = _useState82[0], setLabelsCommonClassName = _useState82[1];
     useEffect7(function() {
-        if (formRef.current) {
-            onLoad === null || onLoad === void 0 ? void 0 : onLoad(formRef.current);
+        if (formRef.current && autoFixLabelsWidth) {
             var labels = formRef.current.getElementsByClassName("form-label");
             var max_width = 0;
             Array.from(labels).forEach(function(label) {
@@ -5656,7 +5655,17 @@ var ModularForm = function(param) {
                     max_width = label_width;
                 }
             });
-            setLabelsCommonClassName(cn("min-w-[".concat(max_width, "px]"), labelsCommonClassNameProps));
+            Array.from(labels).forEach(function(label) {
+                label.style.minWidth = "".concat(max_width, "px");
+            });
+        }
+    }, [
+        formRef.current,
+        autoFixLabelsWidth
+    ]);
+    useEffect7(function() {
+        if (formRef.current) {
+            onLoad === null || onLoad === void 0 ? void 0 : onLoad(formRef.current);
         }
     }, []);
     var onSubmit = /*#__PURE__*/ function() {

package/dist/types/index.d.mts

@@ -259,6 +259,7 @@ interface ModularFormProps {
     labelsCommonClassName?: string;
     errorClassName?: string;
     onLoad?: (e: EventTarget & HTMLFormElement) => void;
+    autoFixLabelsWidth?: boolean;
 }
 interface ConfirmFormProps {
     onV: () => Promise<void> | void;

package/dist/types/index.d.ts

@@ -259,6 +259,7 @@ interface ModularFormProps {
     labelsCommonClassName?: string;
     errorClassName?: string;
     onLoad?: (e: EventTarget & HTMLFormElement) => void;
+    autoFixLabelsWidth?: boolean;
 }
 interface ConfirmFormProps {
     onV: () => Promise<void> | void;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "akeyless-client-commons",
-    "version": "1.0.105",
+    "version": "1.0.107",
     "scripts": {
         "build": "tsup",
         "deploy": "npm run build && npm version patch --no-git-tag-version && npm publish",