kelt-ui-kit-react 1.3.6 → 1.3.7

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "kelt-ui-kit-react",
   "type": "module",
-  "version": "1.3.6",
+  "version": "1.3.7",
   "private": false,
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/form/Form.tsx

@@ -174,10 +174,12 @@ export const DynamicForm = forwardRef(
                 <Select
                   id={v.name}
                   label={undefined}
+                  name={v.name}
                   options={v.options ?? []}
                   disabled={disabled}
                   multiple={v.multiple}
                   value={values[v.name] as any}
+                  required={required}
                   defaultValue={v.value as string | string[]}
                   placeholder={v.placeholder}
                   onChangeMultiple={(newValue) =>

package/src/form/input/Input.tsx

@@ -52,7 +52,7 @@ export const Input = ({
   const [showPassword, setShowPassword] = useState(false);
   return (
     <div className="input-container">
-      <input type="text" style={{ display: "none" }} />
+      <input name={`hide-${name}`} type="text" style={{ display: "none" }} />
 
       <input
         ref={ref}

package/src/select/Select.tsx

@@ -8,8 +8,10 @@ export interface SelectProps {
   label?: string;
   title?: string;
   disabled?: boolean;
+  name?: string;
   defaultValue?: string | string[];
   multiple?: boolean;
+  required?: boolean;
   value?: string | string[];
   className?: string;
   options: SelectOptionInterface[];
@@ -25,7 +27,9 @@ export const Select = ({
   className,
   disabled,
   multiple = false,
+  required = false,
   defaultValue,
+  name,
   onChange,
   onChangeMultiple,
   value,
@@ -64,7 +68,8 @@ export const Select = ({
       )}
       <select
         defaultValue=""
-        required
+        required={required}
+        name={name}
         disabled={disabled}
         id={`select-${id}`}
         className="select-container-select"

package/src/select/select.css

@@ -8,7 +8,7 @@
     right: 1rem;
     pointer-events: none;
   }
-  select:invalid {
+  select:has(option[value=""]:checked) {
     color: gray;
   }
   option {