@oliasoft-open-source/react-ui-library 4.1.4 → 4.1.6-beta-1

package/dist/assets/{index-b17ea451.js → index-0fee18b2.js}

@@ -68319,16 +68319,16 @@ function requireUnits() {
     return comparison_1.isCloseToOrGreaterThan;
   } });
 })(dist$2);
-const tabs = "_tabs_twdtr_1";
-const padding = "_padding_twdtr_7";
-const margin = "_margin_twdtr_11";
-const contentPadding = "_contentPadding_twdtr_14";
-const item$1 = "_item_twdtr_17";
-const active$1 = "_active_twdtr_38";
-const hidden = "_hidden_twdtr_57";
-const disabled$1 = "_disabled_twdtr_60";
-const left$1 = "_left_twdtr_64";
-const right$1 = "_right_twdtr_64";
+const tabs = "_tabs_1y79t_1";
+const padding = "_padding_1y79t_7";
+const margin = "_margin_1y79t_11";
+const contentPadding = "_contentPadding_1y79t_14";
+const item$1 = "_item_1y79t_17";
+const active$1 = "_active_1y79t_39";
+const hidden = "_hidden_1y79t_58";
+const disabled$1 = "_disabled_1y79t_61";
+const left$1 = "_left_1y79t_65";
+const right$1 = "_right_1y79t_65";
 const styles$7 = {
   tabs,
   padding,

package/dist/assets/{index-4e076e2d.css → index-f2b208e6.css}

@@ -9891,23 +9891,23 @@ tbody ._staticCell_u3xdj_116 ._staticCellContent_u3xdj_119 {
 ._disabledPointerEvents_u3xdj_204 {
   pointer-events: none;
 }
-._tabs_twdtr_1 {
+._tabs_1y79t_1 {
   display: flex;
   flex-wrap: wrap;
   border-bottom: 1px solid var(--color-border);
   flex-shrink: 0;
 }
-._tabs_twdtr_1._padding_twdtr_7 {
+._tabs_1y79t_1._padding_1y79t_7 {
   padding-left: var(--padding);
   padding-right: var(--padding);
 }
-._tabs_twdtr_1._margin_twdtr_11 {
+._tabs_1y79t_1._margin_1y79t_11 {
   margin: var(--padding) 0;
 }
-._contentPadding_twdtr_14 {
+._contentPadding_1y79t_14 {
   padding-top: var(--padding);
 }
-._item_twdtr_17 {
+._item_1y79t_17 {
   align-self: flex-end;
   display: flex;
   align-items: center;
@@ -9924,37 +9924,38 @@ tbody ._staticCell_u3xdj_116 ._staticCellContent_u3xdj_119 {
   font-size: var(--font-size-lg);
   color: var(--color-text-primary);
   cursor: pointer;
+  text-transform: capitalize;
 }
-._item_twdtr_17:not(:last-child) {
+._item_1y79t_17:not(:last-child) {
   margin-right: var(--padding);
 }
-._item_twdtr_17:hover:not(._active_twdtr_38) {
+._item_1y79t_17:hover:not(._active_1y79t_39) {
   color: var(--color-text-primary-hover);
   background: rgba(0, 0, 0, 0.025);
 }
-[data-theme='dark'] ._item_twdtr_17:hover:not(._active_twdtr_38) {
+[data-theme='dark'] ._item_1y79t_17:hover:not(._active_1y79t_39) {
   background: rgba(255, 255, 255, 0.1);
 }
-._item_twdtr_17:active:not(._active_twdtr_38) {
+._item_1y79t_17:active:not(._active_1y79t_39) {
   color: var(--color-text-primary-active);
   background: rgba(0, 0, 0, 0.05);
 }
-[data-theme='dark'] ._item_twdtr_17:active:not(._active_twdtr_38) {
+[data-theme='dark'] ._item_1y79t_17:active:not(._active_1y79t_39) {
   background: rgba(255, 255, 255, 0.2);
 }
-._item_twdtr_17._active_twdtr_38 {
+._item_1y79t_17._active_1y79t_39 {
   border-color: var(--color-text);
   color: var(--color-text);
   cursor: default;
 }
-._item_twdtr_17._hidden_twdtr_57 {
+._item_1y79t_17._hidden_1y79t_58 {
   display: none !important;
 }
-._item_twdtr_17._disabled_twdtr_60 {
+._item_1y79t_17._disabled_1y79t_61 {
   color: var(--color-text-faint);
   pointer-events: none;
 }
-._item_twdtr_17._left_twdtr_64 + ._item_twdtr_17._right_twdtr_64 {
+._item_1y79t_17._left_1y79t_65 + ._item_1y79t_17._right_1y79t_65 {
   margin-left: auto;
 }
 ._inputInTable_66zck_1 {

package/dist/global.css

@@ -9891,23 +9891,23 @@ tbody ._staticCell_u3xdj_116 ._staticCellContent_u3xdj_119 {
 ._disabledPointerEvents_u3xdj_204 {
   pointer-events: none;
 }
-._tabs_twdtr_1 {
+._tabs_1y79t_1 {
   display: flex;
   flex-wrap: wrap;
   border-bottom: 1px solid var(--color-border);
   flex-shrink: 0;
 }
-._tabs_twdtr_1._padding_twdtr_7 {
+._tabs_1y79t_1._padding_1y79t_7 {
   padding-left: var(--padding);
   padding-right: var(--padding);
 }
-._tabs_twdtr_1._margin_twdtr_11 {
+._tabs_1y79t_1._margin_1y79t_11 {
   margin: var(--padding) 0;
 }
-._contentPadding_twdtr_14 {
+._contentPadding_1y79t_14 {
   padding-top: var(--padding);
 }
-._item_twdtr_17 {
+._item_1y79t_17 {
   align-self: flex-end;
   display: flex;
   align-items: center;
@@ -9924,37 +9924,38 @@ tbody ._staticCell_u3xdj_116 ._staticCellContent_u3xdj_119 {
   font-size: var(--font-size-lg);
   color: var(--color-text-primary);
   cursor: pointer;
+  text-transform: capitalize;
 }
-._item_twdtr_17:not(:last-child) {
+._item_1y79t_17:not(:last-child) {
   margin-right: var(--padding);
 }
-._item_twdtr_17:hover:not(._active_twdtr_38) {
+._item_1y79t_17:hover:not(._active_1y79t_39) {
   color: var(--color-text-primary-hover);
   background: rgba(0, 0, 0, 0.025);
 }
-[data-theme='dark'] ._item_twdtr_17:hover:not(._active_twdtr_38) {
+[data-theme='dark'] ._item_1y79t_17:hover:not(._active_1y79t_39) {
   background: rgba(255, 255, 255, 0.1);
 }
-._item_twdtr_17:active:not(._active_twdtr_38) {
+._item_1y79t_17:active:not(._active_1y79t_39) {
   color: var(--color-text-primary-active);
   background: rgba(0, 0, 0, 0.05);
 }
-[data-theme='dark'] ._item_twdtr_17:active:not(._active_twdtr_38) {
+[data-theme='dark'] ._item_1y79t_17:active:not(._active_1y79t_39) {
   background: rgba(255, 255, 255, 0.2);
 }
-._item_twdtr_17._active_twdtr_38 {
+._item_1y79t_17._active_1y79t_39 {
   border-color: var(--color-text);
   color: var(--color-text);
   cursor: default;
 }
-._item_twdtr_17._hidden_twdtr_57 {
+._item_1y79t_17._hidden_1y79t_58 {
   display: none !important;
 }
-._item_twdtr_17._disabled_twdtr_60 {
+._item_1y79t_17._disabled_1y79t_61 {
   color: var(--color-text-faint);
   pointer-events: none;
 }
-._item_twdtr_17._left_twdtr_64 + ._item_twdtr_17._right_twdtr_64 {
+._item_1y79t_17._left_1y79t_65 + ._item_1y79t_17._right_1y79t_65 {
   margin-left: auto;
 }
 ._inputInTable_66zck_1 {

package/dist/index.d.ts

@@ -808,6 +808,8 @@ export declare interface IModalProps {
     visible?: boolean;
     centered?: boolean;
     width?: TStringOrNumber;
+    onEnter?: () => void;
+    onEscape?: () => void;
 }
 
 export declare interface INativeSelectProps {
@@ -1501,7 +1503,7 @@ export declare enum MessageType {
     ERROR = "Error"
 }
 
-export declare const Modal: ({ children, visible, centered, width, }: IModalProps) => JSX_2.Element;
+export declare const Modal: ({ children, visible: inputVisible, centered, width, onEnter, onEscape, }: IModalProps) => JSX_2.Element;
 
 export declare const NativeSelect: ({ disabled, error, warning, tooltip, options, onChange, onFocus, onBlur, right, small, tabIndex, selectedOption, width, groupOrder, testId, isInTable, clearable, placeholder, hasNonExistentValue, maxTooltipWidth, borderRadius, }: INativeSelectProps) => JSX_2.Element;
 

package/dist/index.html

@@ -1 +1 @@
-<!doctype html><head><title>React UI Library</title><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1" user-scalable="no"><meta name="apple-mobile-web-app-capable" content="yes"><script type="module" crossorigin src="/react-ui-library/assets/index-b17ea451.js"></script><link rel="stylesheet" href="/react-ui-library/assets/index-4e076e2d.css"></head><body><div id="content"></div></body>
+<!doctype html><head><title>React UI Library</title><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1" user-scalable="no"><meta name="apple-mobile-web-app-capable" content="yes"><script type="module" crossorigin src="/react-ui-library/assets/index-0fee18b2.js"></script><link rel="stylesheet" href="/react-ui-library/assets/index-f2b208e6.css"></head><body><div id="content"></div></body>

package/dist/index.js

@@ -2492,14 +2492,21 @@ function requireFactoryWithThrowingShims() {
   };
   return factoryWithThrowingShims;
 }
-if (process.env.NODE_ENV !== "production") {
-  var ReactIs = requireReactIs();
-  var throwOnDirectAccess = true;
-  propTypes$1.exports = requireFactoryWithTypeCheckers()(ReactIs.isElement, throwOnDirectAccess);
-} else {
-  propTypes$1.exports = requireFactoryWithThrowingShims()();
+var hasRequiredPropTypes;
+function requirePropTypes() {
+  if (hasRequiredPropTypes)
+    return propTypes$1.exports;
+  hasRequiredPropTypes = 1;
+  if (process.env.NODE_ENV !== "production") {
+    var ReactIs = requireReactIs();
+    var throwOnDirectAccess = true;
+    propTypes$1.exports = requireFactoryWithTypeCheckers()(ReactIs.isElement, throwOnDirectAccess);
+  } else {
+    propTypes$1.exports = requireFactoryWithThrowingShims()();
+  }
+  return propTypes$1.exports;
 }
-var propTypesExports = propTypes$1.exports;
+var propTypesExports = requirePropTypes();
 const PropTypes = /* @__PURE__ */ getDefaultExportFromCjs(propTypesExports);
 var ownerWindow = function ownerWindow2(node2) {
   var doc2 = (node2 == null ? void 0 : node2.ownerDocument) || document;
@@ -14648,7 +14655,7 @@ Object.defineProperty(DraggableCore$2, "__esModule", {
 });
 DraggableCore$2.default = void 0;
 var React$3 = _interopRequireWildcard$3(React__default);
-var _propTypes$3 = _interopRequireDefault$4(propTypesExports);
+var _propTypes$3 = _interopRequireDefault$4(requirePropTypes());
 var _reactDom = _interopRequireDefault$4(ReactDOM);
 var _domFns = domFns;
 var _positionFns = positionFns;
@@ -15062,7 +15069,7 @@ _defineProperty$b(DraggableCore$1, "defaultProps", {
   });
   exports.default = void 0;
   var React2 = _interopRequireWildcard2(React__default);
-  var _propTypes3 = _interopRequireDefault2(propTypesExports);
+  var _propTypes3 = _interopRequireDefault2(requirePropTypes());
   var _reactDom2 = _interopRequireDefault2(ReactDOM);
   var _clsx = _interopRequireDefault2(require$$3);
   var _domFns2 = domFns;
@@ -15527,7 +15534,7 @@ function cloneElement(element, props) {
 var propTypes = {};
 propTypes.__esModule = true;
 propTypes.resizableProps = void 0;
-var _propTypes$2 = _interopRequireDefault$2(propTypesExports);
+var _propTypes$2 = _interopRequireDefault$2(requirePropTypes());
 function _interopRequireDefault$2(obj) {
   return obj && obj.__esModule ? obj : { default: obj };
 }
@@ -15938,7 +15945,7 @@ var ResizableBox$1 = {};
 ResizableBox$1.__esModule = true;
 ResizableBox$1.default = void 0;
 var React$1 = _interopRequireWildcard$1(React__default);
-var _propTypes = _interopRequireDefault$1(propTypesExports);
+var _propTypes = _interopRequireDefault$1(requirePropTypes());
 var _Resizable = _interopRequireDefault$1(Resizable$2);
 var _propTypes2 = propTypes;
 var _excluded$8 = ["handle", "handleSize", "onResize", "onResizeStart", "onResizeStop", "draggableOpts", "minConstraints", "maxConstraints", "lockAspectRatio", "axis", "width", "height", "resizeHandles", "style", "transformScale"];
@@ -26773,6 +26780,19 @@ const Message = ({ message: message2 }) => {
     }
   ) : null });
 };
+const useKeyboardEvent = (key2, fn, dependencyList = []) => {
+  useEffect(() => {
+    const handler = (evt) => {
+      if (evt.key === key2) {
+        fn();
+      }
+    };
+    window.addEventListener("keydown", handler);
+    return () => {
+      window.removeEventListener("keydown", handler);
+    };
+  }, dependencyList);
+};
 const Portal = ({ id: id2, children }) => {
   const parent = document.querySelector(`#${id2}`);
   const [mounted, setMounted] = useState(false);
@@ -26792,7 +26812,15 @@ const styles$q = {
   centered,
   newLine
 };
-const Wrapper = ({ children }) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: cx$2(styles$q.wrapper), children });
+const Wrapper = ({ children }) => {
+  const wrapperRef = useRef(null);
+  useEffect(() => {
+    if (wrapperRef.current) {
+      wrapperRef.current.focus();
+    }
+  }, []);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: wrapperRef, tabIndex: -1, className: cx$2(styles$q.wrapper), children });
+};
 const Content$2 = ({ children, width: width2, centered: centered2 }) => /* @__PURE__ */ jsxRuntimeExports.jsx(
   "div",
   {
@@ -26803,13 +26831,45 @@ const Content$2 = ({ children, width: width2, centered: centered2 }) => /* @__PU
 );
 const Modal = ({
   children,
-  visible = false,
+  visible: inputVisible = false,
   centered: centered2 = false,
-  width: width2 = "100%"
-}) => /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-  /* @__PURE__ */ jsxRuntimeExports.jsx(Portal, { id: "modalContainer", children: visible ? /* @__PURE__ */ jsxRuntimeExports.jsx(Wrapper, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(Content$2, { width: width2, centered: centered2, children }) }) : null }),
-  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { id: "modalContainer" })
-] });
+  width: width2 = "100%",
+  onEnter,
+  onEscape
+}) => {
+  const [visible, setVisible] = useState(inputVisible);
+  useEffect(() => {
+    setVisible(inputVisible);
+  }, [inputVisible]);
+  useKeyboardEvent(
+    "Enter",
+    () => {
+      if (visible) {
+        if (onEnter) {
+          onEnter();
+          setVisible(false);
+        }
+      }
+    },
+    [visible, onEnter]
+  );
+  useKeyboardEvent(
+    "Escape",
+    () => {
+      if (visible) {
+        if (onEscape) {
+          onEscape();
+          setVisible(false);
+        }
+      }
+    },
+    [visible, onEscape]
+  );
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(Portal, { id: "modalContainer", children: visible ? /* @__PURE__ */ jsxRuntimeExports.jsx(Wrapper, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(Content$2, { width: width2, centered: centered2, children }) }) : null }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { id: "modalContainer" })
+  ] });
+};
 const menu$1 = "_menu_12x4u_1";
 const header = "_header_12x4u_11";
 const item$3 = "_item_12x4u_27";
@@ -27133,7 +27193,7 @@ const NativeSelect = ({
 var reactKeyboardEventHandler = { exports: {} };
 (function(module, exports) {
   !function(e2, t) {
-    module.exports = t(React__default, propTypesExports);
+    module.exports = t(React__default, requirePropTypes());
   }(window, function(e2, t) {
     return function(e3) {
       var t2 = {};
@@ -27322,19 +27382,6 @@ var reactKeyboardEventHandler = { exports: {} };
 })(reactKeyboardEventHandler);
 var reactKeyboardEventHandlerExports = reactKeyboardEventHandler.exports;
 const KeyboardEventHandler = /* @__PURE__ */ getDefaultExportFromCjs(reactKeyboardEventHandlerExports);
-const useKeyboardEvent = (key2, fn, dependencyList = []) => {
-  useEffect(() => {
-    const handler = (evt) => {
-      if (evt.key === key2) {
-        fn();
-      }
-    };
-    window.addEventListener("keydown", handler);
-    return () => {
-      window.removeEventListener("keydown", handler);
-    };
-  }, dependencyList);
-};
 const useFocus = () => {
   const ref2 = useRef(null);
   const setFocus = () => {
@@ -63831,16 +63878,16 @@ const Table = (props) => {
     )
   ] });
 };
-const tabs = "_tabs_twdtr_1";
-const padding = "_padding_twdtr_7";
-const margin = "_margin_twdtr_11";
-const contentPadding = "_contentPadding_twdtr_14";
-const item$1 = "_item_twdtr_17";
-const active$1 = "_active_twdtr_38";
-const hidden = "_hidden_twdtr_57";
-const disabled$1 = "_disabled_twdtr_60";
-const left$1 = "_left_twdtr_64";
-const right$1 = "_right_twdtr_64";
+const tabs = "_tabs_1y79t_1";
+const padding = "_padding_1y79t_7";
+const margin = "_margin_1y79t_11";
+const contentPadding = "_contentPadding_1y79t_14";
+const item$1 = "_item_1y79t_17";
+const active$1 = "_active_1y79t_39";
+const hidden = "_hidden_1y79t_58";
+const disabled$1 = "_disabled_1y79t_61";
+const left$1 = "_left_1y79t_65";
+const right$1 = "_right_1y79t_65";
 const styles$5 = {
   tabs,
   padding,