@oliasoft-open-source/react-ui-library 4.7.8 → 4.7.9

package/dist/index.d.ts

@@ -3,6 +3,7 @@ import { Context } from 'react';
 import { CSSProperties } from 'react';
 import { default as default_2 } from 'react';
 import { DependencyList } from 'react';
+import { ElementType as ElementType_2 } from 'react';
 import { FocusEvent as FocusEvent_2 } from 'react';
 import { FocusEventHandler } from 'react';
 import { Id } from 'react-toastify';
@@ -240,7 +241,7 @@ declare interface ICheckBoxCell extends TCommonCell {
     label?: string | null;
     checked: boolean;
     type: TCellType;
-    onChange: (ev: default_2.ChangeEvent<HTMLInputElement>) => void;
+    onChange: TChangeEventHandler;
     disabled?: boolean;
 }
 
@@ -250,7 +251,7 @@ export declare interface ICheckBoxProps {
     label?: string | null;
     name?: string;
     noMargin?: boolean;
-    onChange: (evt: default_2.ChangeEvent<HTMLInputElement>) => void;
+    onChange: TChangeEventHandler;
     tabIndex?: number;
     disabled?: boolean;
     small?: boolean;
@@ -405,7 +406,7 @@ export declare interface IFileButtonProps extends IButtonProps {
     accept?: string;
     multi?: boolean;
     name?: string;
-    onChange?: (evt: any) => void;
+    onChange?: TChangeEventHandler;
 }
 
 export declare interface IFileInputProps {
@@ -418,7 +419,7 @@ export declare interface IFileInputProps {
     multi?: boolean;
     name?: string;
     width?: TStringOrNumber;
-    onChange?: (evt: any) => void;
+    onChange?: TChangeEventHandler;
     testId?: string;
 }
 
@@ -493,7 +494,7 @@ declare interface IInputCell extends TCommonCell {
     type: TCellType;
     name?: string;
     value?: TStringOrNumber;
-    onChange?: (ev: default_2.ChangeEvent<HTMLInputElement>) => void;
+    onChange?: TChangeEventHandler;
     onFocus?: (evt: default_2.FocusEvent<HTMLInputElement>) => void;
     onBlur?: (evt: default_2.FocusEvent<HTMLInputElement>) => void;
     onPaste?: default_2.ClipboardEventHandler<HTMLInputElement>;
@@ -523,7 +524,7 @@ export declare interface IInputProps {
     tooltip?: TStringOrNumber | default_2.ReactNode;
     name?: string;
     type?: string;
-    onChange?: default_2.ChangeEventHandler<HTMLInputElement>;
+    onChange?: TChangeEventHandler;
     onKeyPress?: default_2.KeyboardEventHandler<HTMLInputElement>;
     onFocus?: (evt: FocusEvent_2<HTMLInputElement>) => void;
     onBlur?: (evt: FocusEvent_2<HTMLInputElement>) => void;
@@ -773,14 +774,14 @@ declare interface IMenuSection {
     inline?: boolean;
     title?: string;
     download?: boolean;
-    onChange?: TFunction;
+    onChange?: TChangeEventHandler;
     menu?: any;
     visible?: boolean;
     closeOnOptionClick?: boolean;
     actions?: any[];
     url?: string;
     upload?: boolean;
-    component?: React.ElementType;
+    component?: ElementType_2;
 }
 
 declare interface IMenuShowAllButton {
@@ -892,7 +893,7 @@ declare interface INumberInputCell extends TCommonCell {
     name?: string;
     value?: TStringOrNumber;
     type: TCellType;
-    onChange?: (ev: any) => void;
+    onChange?: TChangeEventHandler;
     onFocus?: (evt: default_2.FocusEvent<HTMLInputElement>) => void;
     onBlur?: (evt: default_2.FocusEvent<HTMLInputElement>) => void;
     placeholder?: string;
@@ -918,7 +919,7 @@ export declare interface INumberInputProps {
     small?: boolean;
     width?: TStringOrNumber;
     value?: TStringOrNumber;
-    onChange?: (evt: ChangeEvent<HTMLInputElement>) => void;
+    onChange?: TChangeEventHandler;
     onFocus?: (evt: FocusEvent_2<HTMLInputElement>) => void;
     onBlur?: (evt: FocusEvent_2<HTMLInputElement>) => void;
     tabIndex?: number;
@@ -939,10 +940,7 @@ export declare interface IOptionDropdownProps {
     name?: string;
     label: string;
     options: IOptionType[];
-    onChange: (evt: ChangeEvent<HTMLInputElement & {
-        name?: string;
-        value: IOptionType[];
-    }>) => void;
+    onChange: TChangeEventHandler;
     showHeader?: boolean;
     maxHeight?: string;
 }
@@ -988,7 +986,7 @@ declare interface IPaginationOptionType {
 }
 
 declare interface IPaginationPerPageType {
-    onChange?: (evt: default_2.ChangeEvent<HTMLInputElement>) => void;
+    onChange?: TChangeEventHandler;
     options?: IPaginationOptionType[];
     value?: TStringOrNumber;
 }
@@ -1085,7 +1083,7 @@ export declare interface IRadioButtonProps {
     inline?: boolean;
     disabled?: boolean;
     small?: boolean;
-    onChange?: (evt: ChangeEvent<HTMLInputElement>) => void;
+    onChange?: TChangeEventHandler;
     noMargin?: boolean;
     mainLabel?: string;
     onClick?: (target: HTMLInputElement) => void;
@@ -1132,7 +1130,7 @@ declare interface ISelectCell extends TCommonCell {
     type: TCellType;
     name?: string;
     value?: TStringOrNumber;
-    onChange?: (ev: any) => void;
+    onChange?: TChangeEventHandler;
     onCreate?: (ev: any) => void;
     error?: StringNumberOrNode;
     warning?: StringNumberOrNode;
@@ -1155,7 +1153,7 @@ export declare interface ISelectProps {
     options?: ISelectSelectedOption[];
     value?: any;
     native?: boolean;
-    onChange?: (value: any) => void;
+    onChange?: TChangeEventHandler;
     deprecatedEventHandler?: boolean;
     autoScroll?: boolean;
     warning?: TStringOrNumber | ReactNode;
@@ -1212,7 +1210,7 @@ declare interface ISliderCell extends TCommonCell {
     max: number;
     step?: number;
     marks?: TSliderMark[];
-    onChange: (ev: any) => void;
+    onChange: TChangeEventHandler;
     showArrows?: boolean;
     showTooltip?: boolean;
     tooltipFormatter?: (value: any) => any;
@@ -1240,13 +1238,7 @@ export declare interface ISliderProps {
         width?: string;
         height?: string;
     };
-    onChange: (evt: {
-        target: {
-            name?: string;
-            value: number | number[];
-            label?: TStringNumberNull | ReactNode;
-        };
-    }) => void;
+    onChange: TChangeEventHandler;
 }
 
 export declare type ISmartUploadModalProps = {
@@ -1382,7 +1374,7 @@ export declare interface ITabsProps {
     options?: ITabOption[] | null;
     children?: any;
     value?: ITabSelectedOption;
-    onChange?: (evt: ChangeEvent<any>) => void;
+    onChange?: TChangeEventHandler;
     padding?: boolean;
     margin?: boolean;
     contentPadding?: boolean;
@@ -1399,7 +1391,7 @@ export declare interface ITextAreaProps {
     cols?: number;
     rows?: number;
     disabled?: boolean;
-    onChange?: (evt: ChangeEvent<HTMLTextAreaElement>) => void;
+    onChange?: TChangeEventHandler<HTMLTextAreaElement>;
     onKeyPress?: (evt: KeyboardEvent_2<HTMLTextAreaElement>) => void;
     onFocus?: (evt: FocusEvent_2<HTMLTextAreaElement>) => void;
     onBlur?: (evt: FocusEvent_2<HTMLTextAreaElement>) => void;
@@ -1450,7 +1442,7 @@ export declare interface IToggleProps {
     disabled?: boolean;
     display?: string;
     small?: boolean;
-    onChange: (evt: default_2.ChangeEvent<HTMLInputElement>) => void;
+    onChange: TChangeEventHandler;
     noMargin?: boolean;
     testId?: string;
     helpText?: string;
@@ -1588,7 +1580,7 @@ export declare interface IUnitInputProps {
     disabledValidation?: boolean;
     allowEmpty?: boolean;
     autoValue?: string;
-    onChange: (event: ChangeEvent<HTMLInputElement> | ICustomChangeEvent) => void;
+    onChange?: (event: TChangeEvent | ICustomChangeEvent) => void;
     onSwitchUnit?: (unit: string) => void;
     onClick?: MouseEventHandler<HTMLInputElement>;
     onFocus?: FocusEventHandler<HTMLInputElement>;
@@ -1743,6 +1735,19 @@ declare type TCellShape = IPopoverCell | IStaticCell | ISelectCell | IHelpIconCe
 
 declare type TCellType = 'Static' | 'Icon' | 'Select' | 'Input' | 'NumberInput' | 'Popover' | 'CheckBox' | 'Actions' | 'Link' | 'Slider' | 'Unit' | string;
 
+export declare type TChangeEvent<T extends HTMLElement = HTMLInputElement> = ChangeEvent<T> & {
+    target: T | {
+        name: string;
+        value: any;
+        label?: string;
+        files?: FileList | null;
+    };
+};
+
+export declare type TChangeEventHandler<T extends HTMLElement = HTMLInputElement> = (event: TChangeEvent<T>, ...additionalProps: {
+    [key: string]: any;
+}[]) => void;
+
 export declare type TColor = 'danger' | 'red' | 'white' | 'success' | 'green' | 'muted';
 
 declare interface TCommonCell {

package/dist/index.js

@@ -15,7 +15,7 @@ import React__default, { useContext, isValidElement, useState, useRef, useEffect
 import * as PropTypes from "prop-types";
 import PropTypes__default from "prop-types";
 import ReactDOM, { createPortal, unstable_batchedUpdates, render } from "react-dom";
-import _$1, { set, get as get$2, isString as isString$3, isNumber as isNumber$1, isBoolean as isBoolean$2, isFunction as isFunction$3, isEmpty, isArray as isArray$1, toNumber, debounce as debounce$2, isObject as isObject$5, isObjectLike, has as has$1, isEqual as isEqual$4 } from "lodash";
+import { noop as noop$3, set, get as get$2, isString as isString$3, isNumber as isNumber$1, isBoolean as isBoolean$2, isFunction as isFunction$3, isEmpty, isArray as isArray$1, toNumber, debounce as debounce$2, isObject as isObject$5, isObjectLike, has as has$1, isEqual as isEqual$4 } from "lodash";
 import { roundToFixed, validateNumber, cleanNumStr, unitFromQuantity, isValueWithUnit, withUnit, convertSamePrecision, getValue as getValue$1, getUnit, KNOWN_UNITS, split as split$1, checkAndCleanDecimalComma, label as label$b, altUnitsList, getUnitsForQuantity, convertAndGetValue, isScientificStringNum, roundToPrecision, roundByMagnitudeToFixed } from "@oliasoft-open-source/units";
 import { isValueWithUnit as isValueWithUnit$1 } from "@oliasoft-open-source/units/dist/units";
 var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
@@ -4270,7 +4270,7 @@ const Option$2 = ({
   inline: inline2,
   title: title2,
   upload,
-  onChange,
+  onChange = noop$3,
   testId,
   component: Component2 = "a"
 }) => {
@@ -4286,6 +4286,22 @@ const Option$2 = ({
     }
     onClick == null ? void 0 : onClick(evt);
   };
+  const handleFileChange = (evt) => {
+    const { files } = (evt == null ? void 0 : evt.target) ?? {};
+    if (files) {
+      const customEvent = {
+        ...evt,
+        target: {
+          ...evt.target,
+          value: files,
+          name: evt.target.name,
+          files
+        }
+      };
+      onChange == null ? void 0 : onChange(customEvent);
+      close2 == null ? void 0 : close2();
+    }
+  };
   return /* @__PURE__ */ jsxs(
     Component2,
     {
@@ -4307,10 +4323,7 @@ const Option$2 = ({
             {
               type: "file",
               className: styles$L.fileInput,
-              onChange: (evt) => {
-                onChange == null ? void 0 : onChange(evt.target.files);
-                close2 == null ? void 0 : close2();
-              }
+              onChange: handleFileChange
             }
           ),
           /* @__PURE__ */ jsx("span", { className: styles$L.label, title: `${title2 || label2}`, children: label2 }),
@@ -8937,8 +8950,7 @@ const FileButton = ({
   multi,
   name: name2,
   disabled: disabled2,
-  onChange = () => {
-  },
+  onChange = noop$3,
   ...buttonProps
 }) => {
   const disabledContext = useContext(DisabledContext);
@@ -8950,7 +8962,15 @@ const FileButton = ({
   const handleChange = (evt) => {
     var _a2;
     const files = multi ? evt.target.files : (_a2 = evt.target.files) == null ? void 0 : _a2[0];
-    onChange({ ...evt, target: { ...evt.target, value: files } });
+    const customEvent = {
+      ...evt,
+      target: {
+        ...evt.target,
+        value: files,
+        name: evt.target.name
+      }
+    };
+    onChange(customEvent);
     if (inputRef.current) {
       inputRef.current.value = "";
     }
@@ -9044,8 +9064,7 @@ const Input$1 = forwardRef(
     isInTable: isInTable2,
     width: propWidth = void 0,
     small: small2 = false,
-    onChange = () => {
-    },
+    onChange = noop$3,
     placeholder: placeholder3 = "",
     value = "",
     onKeyPress = () => {
@@ -9177,8 +9196,7 @@ const FileInput = ({
   multi,
   name: name2,
   width: width2,
-  onChange = () => {
-  },
+  onChange = noop$3,
   testId
 }) => {
   const disabledContext = useContext(DisabledContext);
@@ -9191,7 +9209,15 @@ const FileInput = ({
   const handleChange = (evt) => {
     var _a2, _b, _c;
     const files = multi ? (_a2 = evt == null ? void 0 : evt.target) == null ? void 0 : _a2.files : (_c = (_b = evt == null ? void 0 : evt.target) == null ? void 0 : _b.files) == null ? void 0 : _c[0];
-    onChange({ ...evt, target: { ...evt.target, value: files } });
+    const customEvent = {
+      ...evt,
+      target: {
+        ...evt.target,
+        value: files,
+        name: evt.target.name
+      }
+    };
+    onChange(customEvent);
     if (inputRef.current) {
       inputRef.current.value = "";
     }
@@ -19622,12 +19648,9 @@ const NativeSelect = ({
   warning: warning2 = null,
   tooltip: tooltip2 = null,
   options,
-  onChange = () => {
-  },
-  onFocus = () => {
-  },
-  onBlur = () => {
-  },
+  onChange = noop$3,
+  onFocus = noop$3,
+  onBlur = noop$3,
   right: right2 = false,
   small: small2 = false,
   tabIndex = 0,
@@ -20790,8 +20813,7 @@ const Input = ({
   selectedOptions,
   searchable = false,
   searchValue,
-  onChange = () => {
-  },
+  onChange = noop$3,
   inputRef,
   error: error2,
   placeholder: placeholder3 = "Select...",
@@ -21605,8 +21627,7 @@ const Select = (props) => {
     options: rawOptions = [],
     value: rawSelectedOptions,
     native = false,
-    onChange = () => {
-    },
+    onChange = noop$3,
     deprecatedEventHandler = false,
     autoScroll: autoScroll2 = true,
     warning: warning2,
@@ -21649,7 +21670,9 @@ const Select = (props) => {
       const newSelectedOptions = multi ? selectedOptions2.map(
         (o) => simpleInputs ? o.value : o
       ) : simpleInputs ? selectedOptions2.value : selectedOptions2;
-      onChange(newSelectedOptions);
+      if (newSelectedOptions) {
+        onChange(newSelectedOptions);
+      }
     } else {
       const isSyntheticEvent = !(evt instanceof Event);
       const value = multi ? selectedOptions2 : selectedOptions2.value;
@@ -21661,17 +21684,16 @@ const Select = (props) => {
         }
         onChange(evt);
       } else {
-        onChange({
+        const customEvent = {
           ...evt,
           target: {
             ...evt.target,
             name: name2,
             value,
-            ...!multi && {
-              label: selectedOptions2.label
-            }
+            label: !multi ? selectedOptions2.label : void 0
           }
-        });
+        };
+        onChange(customEvent);
       }
     }
   };
@@ -55253,16 +55275,18 @@ const Slider = ({
     width: "100px",
     height: "400px"
   },
-  onChange
+  onChange = noop$3
 }) => {
   const disabledContext = useContext(DisabledContext);
   const formattedMarks = memoizedFormatMarkers(marks);
   const onChangeValue = (value2) => {
+    const eventLabel = typeof label2 === "string" ? label2 : String(label2);
+    const eventName = name2 ?? "";
     onChange({
       target: {
-        name: name2,
+        name: eventName,
         value: value2,
-        label: label2
+        label: eventLabel
       }
     });
   };
@@ -55303,7 +55327,7 @@ const Slider = ({
         styles$c.container,
         small2 ? styles$c.small : "",
         vertical2.enabled ? styles$c.vertical : "",
-        !_$1.isEmpty(marks) ? styles$c.hasMarks : ""
+        !isEmpty(marks) ? styles$c.hasMarks : ""
       ),
       style: vertical2.enabled ? { width: vertical2.width, height: vertical2.height } : { width: width2 },
       children: [
@@ -56585,8 +56609,7 @@ const Tabs = ({
   options: rawOptions = null,
   children = null,
   value: rawValue = void 0,
-  onChange = () => {
-  },
+  onChange = noop$3,
   padding: padding2 = false,
   margin: margin2 = true,
   contentPadding: contentPadding2 = true,
@@ -56622,6 +56645,18 @@ const Tabs = ({
   const selectedValue = isDeprecated || value === void 0 || value === null ? void 0 : simpleInputs ? value : value.value;
   const activeTabIndexBase = rawActiveTabIndex !== void 0 ? rawActiveTabIndex : tabs2 == null ? void 0 : tabs2.findIndex((t) => t.value === selectedValue);
   const activeTabIndex = activeTabIndexBase === -1 ? 0 : activeTabIndexBase;
+  const handleTabClick = (index2, tab2, event) => {
+    if (isDeprecated) {
+      const value2 = tab2.key || tab2.label || null;
+      onChangeTab(index2, value2);
+    } else {
+      const target = event.target;
+      target.name = name2;
+      target.value = tab2.value;
+      target.label = tab2.label;
+      onChange(event);
+    }
+  };
   const renderTab = (tab2, index2) => {
     const {
       label: label2,
@@ -56645,16 +56680,7 @@ const Tabs = ({
         badge: badge2,
         right: right2,
         active: isDeprecated ? index2 === activeTabIndex : value2 === selectedValue,
-        onClick: isDeprecated ? () => {
-          const value3 = tab2.key || label2 || null;
-          onChangeTab(index2, value3);
-        } : (evt) => {
-          const target = evt.target;
-          target.name = name2;
-          target.value = tab2.value;
-          target.label = label2;
-          onChange(evt);
-        },
+        onClick: (event) => handleTabClick(index2, tab2, event),
         testId: testId2
       },
       index2
@@ -56739,14 +56765,10 @@ const TextArea = ({
   cols,
   rows,
   disabled: disabled2 = false,
-  onChange = () => {
-  },
-  onKeyPress = () => {
-  },
-  onFocus = () => {
-  },
-  onBlur = () => {
-  },
+  onChange = noop$3,
+  onKeyPress = noop$3,
+  onFocus = noop$3,
+  onBlur = noop$3,
   tabIndex = 0,
   error: error2 = null,
   warning: warning2 = null,
@@ -70270,14 +70292,10 @@ const UnitInput = ({
   unitkey = "",
   initUnit,
   noConversion = false,
-  onChange = () => {
-  },
-  onClick = () => {
-  },
-  onFocus = () => {
-  },
-  onSwitchUnit = () => {
-  },
+  onChange = noop$3,
+  onClick = noop$3,
+  onFocus = noop$3,
+  onSwitchUnit = noop$3,
   unitTemplate,
   doNotConvertValue = false,
   testId,