kelt-ui-kit-react 1.8.9 → 1.9.1

package/dist/select/Select.d.ts

@@ -5,6 +5,7 @@ export interface SelectProps {
     label?: string;
     title?: string;
     disabled?: boolean;
+    style?: React.CSSProperties;
     name?: string;
     defaultValue?: string | string[];
     multiple?: boolean;
@@ -16,4 +17,4 @@ export interface SelectProps {
     onChange?: (value: string) => void;
     placeholder?: string;
 }
-export declare const Select: ({ id, label, options, className, disabled, multiple, required, defaultValue, name, onChange, onChangeMultiple, value, placeholder, }: SelectProps) => JSX.Element;
+export declare const Select: ({ id, label, options, className, disabled, style, multiple, required, defaultValue, name, onChange, onChangeMultiple, value, placeholder, }: SelectProps) => JSX.Element;

package/package.json

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

package/src/dataTable/DataTable.tsx

@@ -59,13 +59,20 @@ export function DataTable<T>(props: DataTableProps<T>) {
   );
 
   const isInteractiveClick = useCallback((target: EventTarget | null) => {
-    if (!(target instanceof HTMLElement)) {
+    const element =
+      target instanceof Element
+        ? target
+        : target instanceof Node
+          ? target.parentElement
+          : null;
+
+    if (!element) {
       return false;
     }
 
     return Boolean(
-      target.closest(
-        "input,button,a,select,textarea,label,[role='button'],[role='checkbox'],[data-stop-row-click='true']",
+      element.closest(
+        "input,button,a,select,textarea,label,option,[role='button'],[role='checkbox'],[role='option'],[contenteditable='true'],[data-stop-row-click='true']",
       ),
     );
   }, []);

package/src/dataTable/dataTableRow/DataTableRow.tsx

@@ -36,21 +36,34 @@ export const DataTableRow = ({ column, idx, row }: DataTableRowProps) => {
         )
       ) : column.editable ? (
         column.type === "select" ? (
-          <Select
-            options={column.options ?? []}
-            value={value}
-            onChange={(e) => {
-              if (column.onEdit) {
-                column.onEdit(e, row);
-              }
-            }}
-          />
+          <div onClick={(e) => e.stopPropagation()}>
+            <Select
+              style={{
+                minWidth: column.minWidth,
+                maxWidth: column.maxWidth,
+                width: column.width,
+              }}
+              options={column.options ?? []}
+              value={value}
+              onChange={(e) => {
+                if (column.onEdit) {
+                  column.onEdit(e, row);
+                }
+              }}
+            />
+          </div>
         ) : (
           <input
             type={column.type}
             value={value}
             step="0.01"
-            style={{ textAlign: column.align || "left" }}
+            style={{
+              textAlign: column.align || "left",
+              minWidth: column.minWidth,
+              maxWidth: column.maxWidth,
+              width: column.width,
+            }}
+            onClick={(e) => e.stopPropagation()}
             onChange={(e) => {
               if (column.onEdit) {
                 column.onEdit(e.target.value, row);

package/src/select/Select.tsx

@@ -8,6 +8,7 @@ export interface SelectProps {
   label?: string;
   title?: string;
   disabled?: boolean;
+  style?: React.CSSProperties;
   name?: string;
   defaultValue?: string | string[];
   multiple?: boolean;
@@ -26,6 +27,7 @@ export const Select = ({
   options,
   className,
   disabled,
+  style,
   multiple = false,
   required = false,
   defaultValue,
@@ -42,7 +44,7 @@ export const Select = ({
     if (multiple) {
       selectedValue = Array.from(
         event.target.selectedOptions,
-        (opt) => opt.value
+        (opt) => opt.value,
       );
       if (onChangeMultiple) {
         onChangeMultiple(selectedValue as string[]);
@@ -70,6 +72,7 @@ export const Select = ({
         defaultValue=""
         required={required}
         name={name}
+        style={style}
         disabled={disabled}
         id={`select-${id}`}
         className="select-container-select"