npm - @oliasoft-open-source/react-ui-library - Versions diffs - 4.1.7 → 4.1.9 - Mend

@oliasoft-open-source/react-ui-library 4.1.7 → 4.1.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (43) hide show

package/dist/404.html CHANGED Viewed

	@@ -1 +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-~~0fee18b2~~.js"></script><link rel="stylesheet" href="/react-ui-library/assets/index-~~f2b208e6~~.css"></head><body><div id="content"></div></body>
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-cfa07a3f.js"></script><link rel="stylesheet" href="/react-ui-library/assets/index-9e4179c3.css"></head><body><div id="content"></div></body>

package/dist/assets/{index-f2b208e6.css → index-9e4179c3.css} RENAMED Viewed

@@ -8910,80 +8910,80 @@ button:active .remirror-menu-pane-shortcut,
   min-height: 0;
   flex-shrink: 0;
 }
-._inputInTable_1n7o1_1 {
+._inputInTable_1ube5_1 {
   background-color: transparent;
   border-radius: inherit !important;
   height: var(--size);
   min-height: 100%;
 }
-._inputInTable_1n7o1_1:not(:hover) {
+._inputInTable_1ube5_1:not(:hover) {
   border-color: transparent;
 }
-._inputInTable_1n7o1_1:not(:focus) {
+._inputInTable_1ube5_1:not(:focus) {
   box-shadow: none;
 }
-._inputHover_1n7o1_13 {
+._inputHover_1ube5_13 {
   position: relative;
   border-color: var(--color-border-hover);
   z-index: 2;
 }
-._inputFocus_1n7o1_18 {
+._inputFocus_1ube5_18 {
   position: relative;
   outline: none !important;
   border-color: var(--color-border-focus) !important;
   box-shadow: var(--shadow-focus);
   z-index: 3;
 }
-._inputError_1n7o1_25,
-._inputWarning_1n7o1_26 {
+._inputError_1ube5_25,
+._inputWarning_1ube5_26 {
   position: relative;
 }
-._inputError_1n7o1_25 {
+._inputError_1ube5_25 {
   z-index: 2;
   border-color: var(--color-border-error);
   color: var(--color-text-error) !important;
   background-color: var(--color-background-error-muted);
 }
-._inputError_1n7o1_25:hover {
+._inputError_1ube5_25:hover {
   border-color: var(--color-border-error-hover) !important;
 }
-._inputError_1n7o1_25:focus {
+._inputError_1ube5_25:focus {
   position: relative;
   outline: none !important;
   border-color: var(--color-border-focus) !important;
   box-shadow: var(--shadow-focus);
   z-index: 3;
 }
-._inputWarning_1n7o1_26 {
+._inputWarning_1ube5_26 {
   z-index: 1;
   border-color: var(--color-border-warning);
   color: var(--color-text-warning) !important;
   background-color: var(--color-background-warning-muted);
 }
-._inputWarning_1n7o1_26:hover {
+._inputWarning_1ube5_26:hover {
   border-color: var(--color-border-warning-hover) !important;
 }
-._inputWarning_1n7o1_26:focus {
+._inputWarning_1ube5_26:focus {
   position: relative;
   outline: none !important;
   border-color: var(--color-border-focus) !important;
   box-shadow: var(--shadow-focus);
   z-index: 3;
 }
-._inputDisabled_1n7o1_61 {
+._inputDisabled_1ube5_61 {
   pointer-events: none;
   background-color: var(--color-background-disabled);
   color: var(--color-text-muted);
   box-shadow: none;
 }
-._hideScrollbars_1n7o1_67 {
+._hideScrollbars_1ube5_67 {
   /* Firefox */
   scrollbar-width: none;
   /* IE 10+ */
   -ms-overflow-style: none;
   /* Chrome, Safari and Opera */
 }
-._hideScrollbars_1n7o1_67::-webkit-scrollbar {
+._hideScrollbars_1ube5_67::-webkit-scrollbar {
   display: none;
 }
 :root {
@@ -8991,42 +8991,42 @@ button:active .remirror-menu-pane-shortcut,
   --size-sidebar-icon: var(--size);
   --color-background-sidebar: black;
 }
-._sidebar_1n7o1_82 {
+._sidebar_1ube5_82 {
   background-color: var(--color-background-sidebar);
   color: white;
   position: relative;
   padding: var(--padding) 0;
 }
 @media print {
-  ._sidebar_1n7o1_82 {
+  ._sidebar_1ube5_82 {
     display: none;
   }
 }
-._inner_1n7o1_93 {
+._inner_1ube5_93 {
   /* Firefox */
   scrollbar-width: none;
   /* IE 10+ */
   -ms-overflow-style: none;
   /* Chrome, Safari and Opera */
 }
-._inner_1n7o1_93::-webkit-scrollbar {
+._inner_1ube5_93::-webkit-scrollbar {
   display: none;
 }
-._title_1n7o1_103,
-._subtitle_1n7o1_104,
-._label_1n7o1_105 {
+._title_1ube5_103,
+._subtitle_1ube5_104,
+._label_1ube5_105 {
   transition: opacity 0.2s, max-height 0.2s, margin 0.2s, color 0.2s;
   max-height: 50px;
 }
-._collapsed_1n7o1_109 ._title_1n7o1_103,
-._collapsed_1n7o1_109 ._subtitle_1n7o1_104,
-._collapsed_1n7o1_109 ._label_1n7o1_105 {
+._collapsed_1ube5_109 ._title_1ube5_103,
+._collapsed_1ube5_109 ._subtitle_1ube5_104,
+._collapsed_1ube5_109 ._label_1ube5_105 {
   opacity: 0;
   max-height: 0;
   margin-bottom: 0;
   margin-top: 0;
 }
-._title_1n7o1_103 {
+._title_1ube5_103 {
   overflow: hidden;
   max-width: 100%;
   text-overflow: ellipsis;
@@ -9035,7 +9035,7 @@ button:active .remirror-menu-pane-shortcut,
   font-size: var(--font-size-xl);
   padding: 0 var(--padding);
 }
-._subtitle_1n7o1_104 {
+._subtitle_1ube5_104 {
   margin-bottom: var(--padding-xs);
   white-space: nowrap;
   font-size: var(--font-size);
@@ -9043,47 +9043,48 @@ button:active .remirror-menu-pane-shortcut,
   color: var(--color-neutral-700);
   padding: 0 var(--padding);
 }
-._list_1n7o1_134 {
+._list_1ube5_134 {
   margin-bottom: var(--padding-xl);
   margin-top: 0;
+  position: relative;
+  z-index: 1;
 }
-._item_1n7o1_138 {
+._item_1ube5_140 {
   transition: padding 0.2s, color 0.2s;
   font-size: var(--font-size-lg);
   font-weight: normal;
   display: flex;
-  padding: var(--padding-xxs) var(--padding);
+  padding: 0 var(--padding-xxs);
   align-items: center;
   color: var(--color-neutral-500);
 }
-._collapsed_1n7o1_109 ._item_1n7o1_138 {
-  padding: var(--padding-xxs) calc((var(--size-sidebar) - var(--size-sidebar-icon)) / 2);
+._collapsed_1ube5_109 ._item_1ube5_140 {
+  padding: 0;
 }
-._item_1n7o1_138:hover {
+._item_1ube5_140:hover {
   color: var(--color-neutral-200);
 }
-._item_1n7o1_138._experimental_1n7o1_153 {
+._item_1ube5_140._experimental_1ube5_155 {
   background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.1) 8px, rgba(255, 255, 255, 0.1) 16px, transparent 16px, transparent 24px);
 }
-._item_1n7o1_138:active,
-._item_1n7o1_138._active_1n7o1_157 {
+._item_1ube5_140:active,
+._item_1ube5_140._active_1ube5_159 {
   color: var(--color-neutral-0);
   background-color: var(--color-primary-700);
 }
-._icon_1n7o1_161 {
-  margin-right: var(--padding-sm);
+._icon_1ube5_163 {
   line-height: 0;
   flex-shrink: 0;
-  display: block;
+  display: flex;
+  width: var(--size-sidebar);
+  justify-content: center;
   font-size: var(--size-sidebar-icon);
+  padding: var(--padding-xxs) 0;
 }
-._icon_1n7o1_161 > span {
-  display: block;
-}
-._icon_1n7o1_161 svg {
+._icon_1ube5_163 svg {
   stroke-width: 1;
 }
-._label_1n7o1_105 {
+._label_1ube5_105 {
   white-space: nowrap;
   overflow: hidden;
 }

package/dist/assets/{index-0fee18b2.js → index-cfa07a3f.js} RENAMED Viewed

@@ -56175,24 +56175,24 @@ var reactFastCompare = function isEqual3(a2, b2) {
   }
 };
 const isEqual4 = /* @__PURE__ */ getDefaultExportFromCjs(reactFastCompare);
-const inputInTable$3 = "_inputInTable_1n7o1_1";
-const inputHover$3 = "_inputHover_1n7o1_13";
-const inputFocus$3 = "_inputFocus_1n7o1_18";
-const inputError$3 = "_inputError_1n7o1_25";
-const inputWarning$3 = "_inputWarning_1n7o1_26";
-const inputDisabled$3 = "_inputDisabled_1n7o1_61";
-const hideScrollbars$3 = "_hideScrollbars_1n7o1_67";
-const sidebar = "_sidebar_1n7o1_82";
-const inner = "_inner_1n7o1_93";
-const title$3 = "_title_1n7o1_103";
-const subtitle = "_subtitle_1n7o1_104";
-const label$2 = "_label_1n7o1_105";
-const collapsed = "_collapsed_1n7o1_109";
-const list = "_list_1n7o1_134";
-const item$2 = "_item_1n7o1_138";
-const experimental = "_experimental_1n7o1_153";
-const active$2 = "_active_1n7o1_157";
-const icon$1 = "_icon_1n7o1_161";
+const inputInTable$3 = "_inputInTable_1ube5_1";
+const inputHover$3 = "_inputHover_1ube5_13";
+const inputFocus$3 = "_inputFocus_1ube5_18";
+const inputError$3 = "_inputError_1ube5_25";
+const inputWarning$3 = "_inputWarning_1ube5_26";
+const inputDisabled$3 = "_inputDisabled_1ube5_61";
+const hideScrollbars$3 = "_hideScrollbars_1ube5_67";
+const sidebar = "_sidebar_1ube5_82";
+const inner = "_inner_1ube5_93";
+const title$3 = "_title_1ube5_103";
+const subtitle = "_subtitle_1ube5_104";
+const label$2 = "_label_1ube5_105";
+const collapsed = "_collapsed_1ube5_109";
+const list = "_list_1ube5_134";
+const item$2 = "_item_1ube5_140";
+const experimental = "_experimental_1ube5_155";
+const active$2 = "_active_1ube5_159";
+const icon$1 = "_icon_1ube5_163";
 const styles$e = {
   inputInTable: inputInTable$3,
   inputHover: inputHover$3,
@@ -56215,23 +56215,20 @@ const styles$e = {
 };
 const TooltipIcon = reactExports.memo(
   ({ isOpen: isOpen2, label: label2, icon: icon2, invalid }) => {
-    const Unbadged = () => /* @__PURE__ */ jsxRuntimeExports.jsx(
-      Tooltip,
-      {
-        text: label2,
-        enabled: !isOpen2,
-        placement: "right-center",
-        possiblePlacements: ["right-center"],
-        triggerOffset: 24,
-        fontSize: 16,
-        padding: "var(--padding-sm)",
-        display: "block",
-        children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { icon: icon2 })
-      }
-    );
-    const Badged = () => /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { small: true, title: "!", margin: 4, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Unbadged, {}) });
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$e.icon, children: invalid ? /* @__PURE__ */ jsxRuntimeExports.jsx(Badged, {}) : /* @__PURE__ */ jsxRuntimeExports.jsx(Unbadged, {}) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        Tooltip,
+        {
+          text: label2,
+          enabled: !isOpen2,
+          placement: "right-center",
+          possiblePlacements: ["right-center"],
+          fontSize: 16,
+          padding: "var(--padding-sm)",
+          display: "block",
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$e.icon, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { small: true, title: invalid ? "!" : void 0, margin: 4, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { icon: icon2 }) }) })
+        }
+      ),
       /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$e.label, children: label2 })
     ] });
   },

package/dist/index.d.ts CHANGED Viewed

@@ -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, 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 CHANGED Viewed

	@@ -1 +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-~~0fee18b2~~.js"></script><link rel="stylesheet" href="/react-ui-library/assets/index-~~f2b208e6~~.css"></head><body><div id="content"></div></body>
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-cfa07a3f.js"></script><link rel="stylesheet" href="/react-ui-library/assets/index-9e4179c3.css"></head><body><div id="content"></div></body>

package/dist/index.js CHANGED Viewed

@@ -19445,6 +19445,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);
@@ -19464,7 +19477,22 @@ const styles$q = {
   centered,
   newLine
 };
-const Wrapper = ({ children }) => /* @__PURE__ */ jsx("div", { className: cx$2(styles$q.wrapper), children });
+const Wrapper = ({ children }) => {
+  const wrapperRef = useRef(null);
+  useEffect(() => {
+    if (wrapperRef.current) {
+      const firstFocusableElement = wrapperRef.current.querySelector(
+        '[tabindex="0"]'
+      );
+      if (firstFocusableElement) {
+        firstFocusableElement.focus();
+      } else {
+        wrapperRef.current.focus();
+      }
+    }
+  }, []);
+  return /* @__PURE__ */ jsx("div", { ref: wrapperRef, tabIndex: -1, className: cx$2(styles$q.wrapper), children });
+};
 const Content$2 = ({ children, width: width2, centered: centered2 }) => /* @__PURE__ */ jsx(
   "div",
   {
@@ -19477,11 +19505,33 @@ const Modal = ({
   children,
   visible = false,
   centered: centered2 = false,
-  width: width2 = "100%"
-}) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
-  /* @__PURE__ */ jsx(Portal, { id: "modalContainer", children: visible ? /* @__PURE__ */ jsx(Wrapper, { children: /* @__PURE__ */ jsx(Content$2, { width: width2, centered: centered2, children }) }) : null }),
-  /* @__PURE__ */ jsx("div", { id: "modalContainer" })
-] });
+  width: width2 = "100%",
+  onEnter,
+  onEscape
+}) => {
+  useKeyboardEvent(
+    "Enter",
+    () => {
+      if (visible && onEnter) {
+        onEnter();
+      }
+    },
+    [visible, onEnter]
+  );
+  useKeyboardEvent(
+    "Escape",
+    () => {
+      if (visible && onEscape) {
+        onEscape();
+      }
+    },
+    [visible, onEscape]
+  );
+  return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+    /* @__PURE__ */ jsx(Portal, { id: "modalContainer", children: visible ? /* @__PURE__ */ jsx(Wrapper, { children: /* @__PURE__ */ jsx(Content$2, { width: width2, centered: centered2, children }) }) : null }),
+    /* @__PURE__ */ jsx("div", { id: "modalContainer" })
+  ] });
+};
 const menu$1 = "_menu_12x4u_1";
 const header = "_header_12x4u_11";
 const item$3 = "_item_12x4u_27";
@@ -19994,19 +20044,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 = () => {