@oliasoft-open-source/react-ui-library 4.20.8 → 4.20.9

package/dist/index.d.ts

@@ -9,6 +9,7 @@ import { FocusEventHandler } from 'react';
 import { Id } from 'react-toastify';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
 import { KeyboardEvent as KeyboardEvent_2 } from 'react';
+import { KeyboardEventHandler } from 'react';
 import { MouseEvent as MouseEvent_2 } from 'react';
 import { MouseEventHandler } from 'react';
 import { MutableRefObject } from 'react';
@@ -528,10 +529,11 @@ export declare interface IInputProps {
     name?: string;
     type?: string;
     onChange?: TChangeEventHandler;
-    onKeyPress?: default_2.KeyboardEventHandler<HTMLInputElement>;
+    onKeyPress?: KeyboardEventHandler<HTMLInputElement>;
     onFocus?: (evt: FocusEvent_2<HTMLInputElement>) => void;
     onBlur?: (evt: FocusEvent_2<HTMLInputElement>) => void;
     onPaste?: default_2.ClipboardEventHandler<HTMLInputElement>;
+    onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
     selectOnFocus?: boolean;
     small?: boolean;
     placeholder?: string | null;

package/dist/index.js

@@ -9092,6 +9092,8 @@ const Input$1 = forwardRef(
     },
     onPaste = () => {
     },
+    onKeyDown = () => {
+    },
     selectOnFocus = true,
     name: name2 = void 0,
     type = "text",
@@ -9146,6 +9148,7 @@ const Input$1 = forwardRef(
             value: value ?? "",
             onChange,
             onKeyPress,
+            onKeyDown,
             onFocus: handleFocus,
             onBlur,
             onPaste,
@@ -9807,9 +9810,9 @@ function isKeyboardEvent(event) {
     return false;
   }
   const {
-    KeyboardEvent: KeyboardEvent2
+    KeyboardEvent
   } = getWindow(event.target);
-  return KeyboardEvent2 && event instanceof KeyboardEvent2;
+  return KeyboardEvent && event instanceof KeyboardEvent;
 }
 function isTouchEvent$2(event) {
   if (!event) {
@@ -15495,182 +15498,6 @@ const NativeSelect = ({
     }
   );
 };
-var reactKeyboardEventHandler = { exports: {} };
-(function(module, exports) {
-  !function(e2, t) {
-    module.exports = t(React__default, PropTypes__default);
-  }(window, function(e2, t) {
-    return function(e3) {
-      var t2 = {};
-      function n2(r2) {
-        if (t2[r2]) return t2[r2].exports;
-        var o = t2[r2] = { i: r2, l: false, exports: {} };
-        return e3[r2].call(o.exports, o, o.exports, n2), o.l = true, o.exports;
-      }
-      return n2.m = e3, n2.c = t2, n2.d = function(e4, t3, r2) {
-        n2.o(e4, t3) || Object.defineProperty(e4, t3, { enumerable: true, get: r2 });
-      }, n2.r = function(e4) {
-        "undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(e4, Symbol.toStringTag, { value: "Module" }), Object.defineProperty(e4, "__esModule", { value: true });
-      }, n2.t = function(e4, t3) {
-        if (1 & t3 && (e4 = n2(e4)), 8 & t3) return e4;
-        if (4 & t3 && "object" == typeof e4 && e4 && e4.__esModule) return e4;
-        var r2 = /* @__PURE__ */ Object.create(null);
-        if (n2.r(r2), Object.defineProperty(r2, "default", { enumerable: true, value: e4 }), 2 & t3 && "string" != typeof e4) for (var o in e4) n2.d(r2, o, (function(t4) {
-          return e4[t4];
-        }).bind(null, o));
-        return r2;
-      }, n2.n = function(e4) {
-        var t3 = e4 && e4.__esModule ? function() {
-          return e4.default;
-        } : function() {
-          return e4;
-        };
-        return n2.d(t3, "a", t3), t3;
-      }, n2.o = function(e4, t3) {
-        return Object.prototype.hasOwnProperty.call(e4, t3);
-      }, n2.p = "", n2(n2.s = 0);
-    }([function(e3, t2, n2) {
-      Object.defineProperty(t2, "__esModule", { value: true });
-      var r2 = n2(1);
-      Object.defineProperty(t2, "default", { enumerable: true, get: function() {
-        return function(e4) {
-          return e4 && e4.__esModule ? e4 : { default: e4 };
-        }(r2).default;
-      } }), e3.exports = t2.default;
-    }, function(e3, t2, n2) {
-      Object.defineProperty(t2, "__esModule", { value: true });
-      var r2 = Object.assign || function(e4) {
-        for (var t3 = 1; t3 < arguments.length; t3++) {
-          var n3 = arguments[t3];
-          for (var r3 in n3) Object.prototype.hasOwnProperty.call(n3, r3) && (e4[r3] = n3[r3]);
-        }
-        return e4;
-      }, o = /* @__PURE__ */ function() {
-        function e4(e5, t3) {
-          for (var n3 = 0; n3 < t3.length; n3++) {
-            var r3 = t3[n3];
-            r3.enumerable = r3.enumerable || false, r3.configurable = true, "value" in r3 && (r3.writable = true), Object.defineProperty(e5, r3.key, r3);
-          }
-        }
-        return function(t3, n3, r3) {
-          return n3 && e4(t3.prototype, n3), r3 && e4(t3, r3), t3;
-        };
-      }(), i = l(n2(2)), u = l(n2(3)), a2 = n2(4);
-      function l(e4) {
-        return e4 && e4.__esModule ? e4 : { default: e4 };
-      }
-      var s = [], c2 = function(e4) {
-        function t3(e5) {
-          !function(e6, t4) {
-            if (!(e6 instanceof t4)) throw new TypeError("Cannot call a class as a function");
-          }(this, t3);
-          var n3 = function(e6, t4) {
-            if (!e6) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-            return !t4 || "object" != typeof t4 && "function" != typeof t4 ? e6 : t4;
-          }(this, (t3.__proto__ || Object.getPrototypeOf(t3)).call(this, e5));
-          return n3.handleKeyboardEvent = n3.handleKeyboardEvent.bind(n3), n3.registerExclusiveHandler = n3.registerExclusiveHandler.bind(n3), n3.deregisterExclusiveHandler = n3.deregisterExclusiveHandler.bind(n3), n3;
-        }
-        return function(e5, t4) {
-          if ("function" != typeof t4 && null !== t4) throw new TypeError("Super expression must either be null or a function, not " + typeof t4);
-          e5.prototype = Object.create(t4 && t4.prototype, { constructor: { value: e5, enumerable: false, writable: true, configurable: true } }), t4 && (Object.setPrototypeOf ? Object.setPrototypeOf(e5, t4) : e5.__proto__ = t4);
-        }(t3, i.default.Component), o(t3, [{ key: "componentDidMount", value: function() {
-          document.addEventListener("keydown", this.handleKeyboardEvent, false), document.addEventListener("keyup", this.handleKeyboardEvent, false), document.addEventListener("keypress", this.handleKeyboardEvent, false);
-          var e5 = this.props, t4 = e5.isExclusive, n3 = e5.isDisabled;
-          t4 && !n3 && this.registerExclusiveHandler();
-        } }, { key: "componentWillUnmount", value: function() {
-          document.removeEventListener("keydown", this.handleKeyboardEvent, false), document.removeEventListener("keyup", this.handleKeyboardEvent, false), document.removeEventListener("keypress", this.handleKeyboardEvent, false), this.deregisterExclusiveHandler();
-        } }, { key: "componentDidUpdate", value: function(e5) {
-          var t4 = e5.isExclusive, n3 = e5.isDisabled;
-          (this.props.isExclusive !== t4 || this.props.isDisabled !== n3) && (this.props.isExclusive && !this.props.isDisabled ? this.registerExclusiveHandler() : this.deregisterExclusiveHandler());
-        } }, { key: "registerExclusiveHandler", value: function() {
-          this.deregisterExclusiveHandler(), s.unshift(this);
-        } }, { key: "deregisterExclusiveHandler", value: function() {
-          var e5 = this;
-          s.includes(this) && (s = s.filter(function(t4) {
-            return t4 !== e5;
-          }));
-        } }, { key: "handleKeyboardEvent", value: function(e5) {
-          var t4 = this.props, n3 = t4.isDisabled, r3 = t4.handleKeys, o2 = t4.onKeyEvent, i2 = t4.handleEventType, u2 = t4.children, l2 = t4.handleFocusableElements;
-          if (n3) return false;
-          if (!(i2 === e5.type)) return false;
-          if (s.length > 0 && s[0] !== this) return false;
-          var c3 = e5.target === document.body || l2, d2 = this.childrenContainer && this.childrenContainer.contains(e5.target);
-          if (!(u2 ? d2 : c3)) return false;
-          var f2 = (0, a2.findMatchedKey)(e5, r3);
-          return !!f2 && (o2(f2, e5), true);
-        } }, { key: "render", value: function() {
-          var e5 = this, n3 = this.props.children, o2 = Object.assign({}, this.props), u2 = true, a3 = false, l2 = void 0;
-          try {
-            for (var s2, c3 = Object.keys(t3.propTypes)[Symbol.iterator](); !(u2 = (s2 = c3.next()).done); u2 = true) {
-              delete o2[s2.value];
-            }
-          } catch (e6) {
-            a3 = true, l2 = e6;
-          } finally {
-            try {
-              !u2 && c3.return && c3.return();
-            } finally {
-              if (a3) throw l2;
-            }
-          }
-          return n3 ? i.default.createElement("span", r2({ ref: function(t4) {
-            e5.childrenContainer = t4;
-          } }, o2), n3) : null;
-        } }]), t3;
-      }();
-      t2.default = c2, c2.propTypes = { handleKeys: u.default.array, handleEventType: u.default.oneOf(["keydown", "keyup", "keypress"]), handleFocusableElements: u.default.bool, onKeyEvent: u.default.func, isDisabled: u.default.bool, isExclusive: u.default.bool, children: u.default.any }, c2.defaultProps = { handleKeys: [], handleFocusableElements: false, handleEventType: "keydown", onKeyEvent: function() {
-        return null;
-      } }, e3.exports = t2.default;
-    }, function(t2, n2) {
-      t2.exports = e2;
-    }, function(e3, n2) {
-      e3.exports = t;
-    }, function(e3, t2, n2) {
-      function r2(e4, t3, n3) {
-        return t3 in e4 ? Object.defineProperty(e4, t3, { value: n3, enumerable: true, configurable: true, writable: true }) : e4[t3] = n3, e4;
-      }
-      Object.defineProperty(t2, "__esModule", { value: true }), t2.matchKeyEvent = p, t2.findMatchedKey = function(e4, t3) {
-        var n3 = t3.map(function(e5) {
-          var t4 = e5.toLowerCase(), n4 = f2[t4];
-          return n4 || [e5];
-        }).reduce(function(e5, t4) {
-          return e5.concat(t4);
-        }, []).find(function(t4) {
-          return p(e4, t4);
-        });
-        !n3 && t3.includes("all") && (n3 = "other");
-        return n3;
-      };
-      var o = { backspace: [8], del: [46], delete: [46], ins: [45], insert: [45], tab: [9], enter: [13], return: [13], esc: [27], space: [32], pageup: [33], pagedown: [34], end: [35], home: [36], left: [37], up: [38], right: [39], down: [40], shift: [16], ctrl: [17], alt: [18], cap: [20], num: [144], clear: [12], meta: [91], ";": [186, 59], "=": [187, 61], ",": [188, 44], "-": [189, 45, 173, 109], minus: [189, 45, 173, 109], ".": [190, 110], "/": [191, 111], "`": [192], "[": [219], "\\": [220], "]": [221], "*": [106], "+": [107], plus: [107], "'": [222], quote: [222] }, i = Object.keys(o).reduce(function(e4, t3) {
-        return Object.assign(e4, r2({}, t3.toUpperCase(), o[t3]));
-      }, {}), u = "0123456789".split("").reduce(function(e4, t3, n3) {
-        return Object.assign(e4, r2({}, t3, [n3 + 48, n3 + 96]));
-      }, {}), a2 = "ABCDEFGHIJKLMNOPQRSTUVWXYZ".split("").reduce(function(e4, t3, n3) {
-        return Object.assign(e4, r2({}, t3.toLowerCase(), [n3 + 65]), r2({}, t3, [n3 + 65]));
-      }, {}), l = "1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19".split(",").reduce(function(e4, t3, n3) {
-        return Object.assign(e4, r2({}, "f" + t3, [n3 + 112]));
-      }, {}), s = { control: "ctrl", ctrl: "ctrl", shift: "shift", meta: "meta", cmd: "meta", command: "meta", option: "alt", alt: "alt" }, c2 = t2.AllKeys = Object.assign({}, o, i, u, a2, l), d2 = Object.assign({}, u, a2), f2 = { all: Object.keys(c2), alphanumeric: Object.keys(d2), numeric: Object.keys(u), alphabetic: Object.keys(a2), function: Object.keys(l) };
-      function p(e4, t3) {
-        var n3 = e4.which || e4.keyCode, r3 = e4.type, o2 = Object.keys(s).filter(function(t4) {
-          return e4[t4 + "Key"];
-        }).sort(), i2 = t3.toLowerCase().trim(), u2 = "+" === i2 ? ["+"] : i2.split(/\s?\+\s?/), a3 = u2.pop(), l2 = c2[a3], d3 = u2;
-        if ("keypress" === r3) return t3 == String.fromCharCode(n3).toLowerCase();
-        if (0 === d3.length && 0 === o2.length) return l2.indexOf(n3) >= 0;
-        if (d3.length > 0 && o2.length > 0) {
-          var f3 = d3.map(function(e5) {
-            return s[e5];
-          }).sort(), p2 = f3.length === o2.length && f3.every(function(e5, t4) {
-            return o2[t4] === e5;
-          });
-          return l2.indexOf(n3) >= 0 && p2;
-        }
-        return 0 == d3.length && 1 === o2.length && a3 === o2[0];
-      }
-    }]);
-  });
-})(reactKeyboardEventHandler);
-var reactKeyboardEventHandlerExports = reactKeyboardEventHandler.exports;
-const KeyboardEventHandler = /* @__PURE__ */ getDefaultExportFromCjs(reactKeyboardEventHandlerExports);
 const useFocus = () => {
   const ref = useRef(null);
   const setFocus = () => {
@@ -16946,13 +16773,13 @@ var ActionTypes$1 = /* @__PURE__ */ ((ActionTypes2) => {
   return ActionTypes2;
 })(ActionTypes$1 || {});
 var EventKey = /* @__PURE__ */ ((EventKey2) => {
-  EventKey2["RIGHT"] = "right";
-  EventKey2["LEFT"] = "left";
-  EventKey2["UP"] = "up";
-  EventKey2["DOWN"] = "down";
-  EventKey2["ENTER"] = "enter";
-  EventKey2["ESC"] = "esc";
-  EventKey2["TAB"] = "tab";
+  EventKey2["RIGHT"] = "ArrowRight";
+  EventKey2["LEFT"] = "ArrowLeft";
+  EventKey2["UP"] = "ArrowUp";
+  EventKey2["DOWN"] = "ArrowDown";
+  EventKey2["ENTER"] = "Enter";
+  EventKey2["ESC"] = "Escape";
+  EventKey2["TAB"] = "Tab";
   return EventKey2;
 })(EventKey || {});
 const useCustomSelectLogic = ({
@@ -17140,20 +16967,23 @@ const useCustomSelectLogic = ({
   const onKeyEvent = (key2, evt) => {
     switch (key2) {
       case EventKey.UP: {
-        focusNextLayerOption(key2);
+        focusNextLayerOption("up");
         break;
       }
       case EventKey.DOWN: {
         if (state.isLayerOpen) {
-          focusNextLayerOption(key2);
+          focusNextLayerOption("down");
         } else {
           clickTrigger();
         }
         break;
       }
-      case EventKey.LEFT:
+      case EventKey.LEFT: {
+        focusTriggerInputs("left");
+        break;
+      }
       case EventKey.RIGHT: {
-        focusTriggerInputs(key2);
+        focusTriggerInputs("right");
         break;
       }
       case EventKey.ENTER: {
@@ -17264,71 +17094,69 @@ const CustomSelect = (props) => {
     createAble,
     listRef
   });
-  return /* @__PURE__ */ jsx("div", { style: { width: getTriggerWidth() }, children: /* @__PURE__ */ jsxs(
-    KeyboardEventHandler,
-    {
-      handleKeys: Object.values(EventKey),
-      onKeyEvent,
-      children: [
-        /* @__PURE__ */ jsx(
-          Trigger,
-          {
-            selectedOptions,
-            searchValue: state.searchValue,
-            isOpen: state.isLayerOpen,
-            focusedSelectedOptionIndex: state.triggerFocus.currentOption,
-            clearAllIsFocused,
-            searchable,
-            triggerRef: mergeRefs(triggerRef, triggerProps.ref),
-            error: error2,
-            warning: warning2,
-            tooltip: tooltip2,
-            small: small2,
-            isInTable: isInTable2,
-            disabled: disabled2 || disabledContext,
-            clearable,
-            tabIndex,
-            onClickTrigger,
-            onChangeSearch,
-            onClickDeselect: onClickDeselectOption,
-            onClickClear: onClickClearAll,
-            onFocus,
-            onBlur,
-            groupOrder,
-            maxTooltipWidth,
-            placeholder: placeholder2,
-            right: right2,
-            testId
-          }
-        ),
-        state.isLayerOpen && renderLayer(
-          /* @__PURE__ */ jsx("div", { ...layerProps, className: styles$o.layerContainer, children: /* @__PURE__ */ jsx(
-            Layer,
-            {
-              listRef,
-              isMulti: isMulti2,
-              sections: state.visibleOptions,
-              selectedOptions,
-              onSelectOption: (evt, option2) => {
-                const close2 = !isMulti2 ? closeLayer : void 0;
-                onSelectOption(evt, option2, close2);
-              },
-              closeLayer: () => {
-                if (closeOnOptionActionClick) {
-                  closeLayer();
-                }
-              },
-              width: getLayerWidth(triggerBounds),
-              small: small2,
-              focusedOptionIndex: state.layerFocus.current,
-              firstSelectedOptionIndex: firstSelectedOptionIndex ?? 0,
-              testId: testId && `${testId}-layer`
-            }
-          ) })
-        )
-      ]
+  const onKeyDown = (evt) => {
+    if (Object.values(EventKey).includes(evt.key)) {
+      onKeyEvent(evt.key, evt);
     }
-  ) });
+  };
+  return /* @__PURE__ */ jsxs("div", { style: { width: getTriggerWidth() }, onKeyDown, children: [
+    /* @__PURE__ */ jsx(
+      Trigger,
+      {
+        selectedOptions,
+        searchValue: state.searchValue,
+        isOpen: state.isLayerOpen,
+        focusedSelectedOptionIndex: state.triggerFocus.currentOption,
+        clearAllIsFocused,
+        searchable,
+        triggerRef: mergeRefs(triggerRef, triggerProps.ref),
+        error: error2,
+        warning: warning2,
+        tooltip: tooltip2,
+        small: small2,
+        isInTable: isInTable2,
+        disabled: disabled2 || disabledContext,
+        clearable,
+        tabIndex,
+        onClickTrigger,
+        onChangeSearch,
+        onClickDeselect: onClickDeselectOption,
+        onClickClear: onClickClearAll,
+        onFocus,
+        onBlur,
+        groupOrder,
+        maxTooltipWidth,
+        placeholder: placeholder2,
+        right: right2,
+        testId
+      }
+    ),
+    state.isLayerOpen && renderLayer(
+      /* @__PURE__ */ jsx("div", { ...layerProps, className: styles$o.layerContainer, children: /* @__PURE__ */ jsx(
+        Layer,
+        {
+          listRef,
+          isMulti: isMulti2,
+          sections: state.visibleOptions,
+          selectedOptions,
+          onSelectOption: (evt, option2) => {
+            const close2 = !isMulti2 ? closeLayer : void 0;
+            onSelectOption(evt, option2, close2);
+          },
+          closeLayer: () => {
+            if (closeOnOptionActionClick) {
+              closeLayer();
+            }
+          },
+          width: getLayerWidth(triggerBounds),
+          small: small2,
+          focusedOptionIndex: state.layerFocus.current,
+          firstSelectedOptionIndex: firstSelectedOptionIndex ?? 0,
+          testId: testId && `${testId}-layer`
+        }
+      ) })
+    )
+  ] });
 };
 const isEmptyNullOrUndefined = (value) => value === null || value === void 0 || value === "";
 const isMulti = (selectedOptions) => selectedOptions instanceof Array;
@@ -51551,7 +51379,7 @@ const NumberInput = ({
   }, [focus2, valid, error2]);
   const onChangeValue = (evt) => {
     var _a2, _b;
-    const value2 = evt instanceof KeyboardEvent ? displayValue : (_a2 = evt == null ? void 0 : evt.target) == null ? void 0 : _a2.value;
+    const value2 = "key" in evt ? displayValue : (_a2 = evt == null ? void 0 : evt.target) == null ? void 0 : _a2.value;
     const inputValue = cleanNumStr(
       value2.replaceAll(" ", "").replaceAll("|", "")
     );
@@ -51590,38 +51418,37 @@ const NumberInput = ({
   const defaultDisplayRound = (value2) => isInTable2 ? roundToFixed(value2, 2) : roundByMagnitude(value2, 4);
   const shouldDisplayRound = enableDisplayRounding && !focus2 && valid;
   const valueWithDisplayRounding = shouldDisplayRound ? roundDisplayValue ? safeToString(roundDisplayValue(displayValue)) : defaultDisplayRound(value) : displayValue;
+  const onKeyDown = (evt) => {
+    if (evt.key === EventKey.ENTER) {
+      onChangeValue(evt);
+    }
+  };
   return /* @__PURE__ */ jsx(
-    KeyboardEventHandler,
+    Input$1,
     {
-      handleKeys: [EventKey.ENTER],
-      onKeyEvent: (_key, evt) => onChangeValue(evt),
-      children: /* @__PURE__ */ jsx(
-        Input$1,
-        {
-          type: "text",
-          name: stringName,
-          testId,
-          disabled: disabled2,
-          placeholder: placeholder2,
-          value: valueWithDisplayRounding,
-          onChange: onChangeValue,
-          onFocus: onInputFocus,
-          onBlur: onInputBlur,
-          error: firstError || error2,
-          warning: warning2,
-          right: !left2,
-          small: small2,
-          width: width2,
-          isInTable: isInTable2,
-          groupOrder,
-          selectOnFocus,
-          tabIndex,
-          tooltip: tooltip2,
-          ref: inputRef
-        },
-        stringName
-      )
-    }
+      type: "text",
+      name: stringName,
+      testId,
+      disabled: disabled2,
+      placeholder: placeholder2,
+      value: valueWithDisplayRounding,
+      onChange: onChangeValue,
+      onFocus: onInputFocus,
+      onBlur: onInputBlur,
+      onKeyDown,
+      error: firstError || error2,
+      warning: warning2,
+      right: !left2,
+      small: small2,
+      width: width2,
+      isInTable: isInTable2,
+      groupOrder,
+      selectOnFocus,
+      tabIndex,
+      tooltip: tooltip2,
+      ref: inputRef
+    },
+    stringName
   );
 };
 const NumberInputCell = ({