@oliasoft-open-source/react-ui-library 3.9.5 → 3.9.7

package/dist/global.css

@@ -14063,10 +14063,13 @@ html[data-theme='dark'] {
 /*
   Z-INDEX
 */
-._layerContainer_18lrn_333 {
+._wrapper_w3cwc_333 {
+  flex-shrink: 0;
+}
+._layerContainer_w3cwc_336 {
   z-index: 2002;
 }
-._layer_18lrn_333 {
+._layer_w3cwc_336 {
   border: 1px solid var(--color-border);
   border-radius: 4px;
   overflow: hidden;
@@ -14076,29 +14079,29 @@ html[data-theme='dark'] {
   position: relative;
   font-size: 14px;
 }
-._layer_18lrn_333 ul {
+._layer_w3cwc_336 ul {
   margin: 0;
   padding: 0;
   list-style-type: none;
 }
-._layer_18lrn_333 ul li {
+._layer_w3cwc_336 ul li {
   list-style: none;
   display: block;
 }
-._layer_18lrn_333._small_18lrn_355 {
+._layer_w3cwc_336._small_w3cwc_358 {
   font-size: 12px;
 }
-._heading_18lrn_358,
-._option_18lrn_359,
-._message_18lrn_360 {
+._heading_w3cwc_361,
+._option_w3cwc_362,
+._message_w3cwc_363 {
   padding: 9.5px 0 9.5px 14px;
 }
-._small_18lrn_355 ._heading_18lrn_358,
-._small_18lrn_355 ._option_18lrn_359,
-._small_18lrn_355 ._message_18lrn_360 {
+._small_w3cwc_358 ._heading_w3cwc_361,
+._small_w3cwc_358 ._option_w3cwc_362,
+._small_w3cwc_358 ._message_w3cwc_363 {
   padding: 3.5px 0 3.5px 7px;
 }
-._heading_18lrn_358 {
+._heading_w3cwc_361 {
   color: var(--color-text-muted);
   letter-spacing: 0.1em;
   text-transform: uppercase;
@@ -14109,13 +14112,13 @@ html[data-theme='dark'] {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-._small_18lrn_355 ._heading_18lrn_358 {
+._small_w3cwc_358 ._heading_w3cwc_361 {
   font-size: 10px;
 }
-._message_18lrn_360 {
+._message_w3cwc_363 {
   color: var(--color-text-faint);
 }
-._option_18lrn_359 {
+._option_w3cwc_362 {
   line-height: 20px;
   display: flex;
   align-items: center;
@@ -14124,22 +14127,22 @@ html[data-theme='dark'] {
   height: 100%;
   cursor: pointer;
 }
-._option_18lrn_359._focused_18lrn_394,
-._option_18lrn_359:hover {
+._option_w3cwc_362._focused_w3cwc_397,
+._option_w3cwc_362:hover {
   background-color: var(--color-background-menuitem-hover);
 }
-._option_18lrn_359._selected_18lrn_398 {
+._option_w3cwc_362._selected_w3cwc_401 {
   background-color: var(--color-background-menuitem-active);
 }
-._option_18lrn_359._selected_18lrn_398._focused_18lrn_394,
-._option_18lrn_359._selected_18lrn_398:hover {
+._option_w3cwc_362._selected_w3cwc_401._focused_w3cwc_397,
+._option_w3cwc_362._selected_w3cwc_401:hover {
   background-color: var(--color-background-menuitem-activehover);
 }
-._option_18lrn_359._disabled_18lrn_405 {
+._option_w3cwc_362._disabled_w3cwc_408 {
   opacity: 0.2;
   cursor: inherit;
 }
-._option_18lrn_359 ._check_18lrn_409 {
+._option_w3cwc_362 ._check_w3cwc_412 {
   color: var(--color-text-primary);
   font-size: 0.75em;
   width: var(--size);
@@ -14147,29 +14150,29 @@ html[data-theme='dark'] {
   justify-content: center;
   flex-shrink: 0;
 }
-._small_18lrn_355 ._option_18lrn_359 ._check_18lrn_409 {
+._small_w3cwc_358 ._option_w3cwc_362 ._check_w3cwc_412 {
   width: var(--size-sm);
 }
-._option_18lrn_359 ._check_18lrn_409 svg {
+._option_w3cwc_362 ._check_w3cwc_412 svg {
   display: block;
 }
-._option_18lrn_359 ._optionContent_18lrn_423 {
+._option_w3cwc_362 ._optionContent_w3cwc_426 {
   flex-wrap: wrap;
   margin-right: auto;
   overflow: hidden;
 }
-._option_18lrn_359 ._optionContent_18lrn_423 ._label_18lrn_428 {
+._option_w3cwc_362 ._optionContent_w3cwc_426 ._label_w3cwc_431 {
   max-width: 100%;
   display: block;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-._option_18lrn_359 ._optionContent_18lrn_423 ._icon_18lrn_435 {
+._option_w3cwc_362 ._optionContent_w3cwc_426 ._icon_w3cwc_438 {
   margin-left: 8px;
   line-height: 0;
 }
-._details_18lrn_439 {
+._details_w3cwc_442 {
   float: right;
   display: inline;
   white-space: nowrap;

package/dist/index.js

@@ -6,7 +6,7 @@ var __publicField = (obj, key2, value) => {
 };
 import { jsx, Fragment as Fragment$1, jsxs } from "react/jsx-runtime";
 import * as React$4 from "react";
-import React__default, { useState, useRef, useEffect, useCallback as useCallback$1, createElement, forwardRef, useContext, useMemo as useMemo$1, useLayoutEffect as useLayoutEffect$1, createContext, isValidElement, useReducer, useDebugValue, Fragment as Fragment$2, Component as Component$1, PureComponent, memo, cloneElement as cloneElement$1, useImperativeHandle } from "react";
+import React__default, { useState, useRef, useEffect, useCallback as useCallback$1, createElement, forwardRef, useContext, useMemo as useMemo$1, useLayoutEffect as useLayoutEffect$1, createContext, isValidElement, useReducer, useDebugValue, Fragment as Fragment$2, Component as Component$1, PureComponent, useImperativeHandle, memo, cloneElement as cloneElement$1 } from "react";
 import * as PropTypes from "prop-types";
 import PropTypes__default from "prop-types";
 import ReactDOM, { createPortal, unstable_batchedUpdates, render } from "react-dom";
@@ -8994,12 +8994,12 @@ const DeprecatedIcon = ({ icon: icon2 }) => {
       return /* @__PURE__ */ jsx(FaRegCircle, {});
   }
 };
-const wrapper$4 = "_wrapper_xr2gg_333";
+const wrapper$5 = "_wrapper_xr2gg_333";
 const customSvg = "_customSvg_xr2gg_340";
 const customPng = "_customPng_xr2gg_343";
 const clickable = "_clickable_xr2gg_348";
 const styles$N = {
-  wrapper: wrapper$4,
+  wrapper: wrapper$5,
   customSvg,
   customPng,
   clickable
@@ -9052,7 +9052,7 @@ Icon.propTypes = {
   clickable: PropTypes__default.bool,
   testId: PropTypes__default.string
 };
-const wrapper$3 = "_wrapper_4b1ge_333";
+const wrapper$4 = "_wrapper_4b1ge_333";
 const layer$1 = "_layer_4b1ge_337";
 const layerContainer$1 = "_layerContainer_4b1ge_340";
 const nested = "_nested_4b1ge_355";
@@ -9081,7 +9081,7 @@ const component = "_component_4b1ge_520";
 const right$7 = "_right_4b1ge_526";
 const actions$2 = "_actions_4b1ge_531";
 const styles$M = {
-  wrapper: wrapper$3,
+  wrapper: wrapper$4,
   layer: layer$1,
   layerContainer: layerContainer$1,
   nested,
@@ -9330,7 +9330,7 @@ const placementOptions$1 = (placement, isNested = false) => ({
   preferY: "bottom",
   placement: placement || (isNested ? "right-start" : "bottom-start")
 });
-const wrapper$2 = "_wrapper_1n3f1_333";
+const wrapper$3 = "_wrapper_1n3f1_333";
 const badge = "_badge_1n3f1_337";
 const label$9 = "_label_1n3f1_342";
 const dark$1 = "_dark_1n3f1_354";
@@ -9339,7 +9339,7 @@ const small$d = "_small_1n3f1_360";
 const dot = "_dot_1n3f1_366";
 const hasChildren = "_hasChildren_1n3f1_371";
 const styles$L = {
-  wrapper: wrapper$2,
+  wrapper: wrapper$3,
   badge,
   label: label$9,
   dark: dark$1,
@@ -25184,12 +25184,12 @@ const Portal = ({ id: id2, children }) => {
 Portal.propTypes = {
   id: PropTypes__default.string.isRequired
 };
-const wrapper$1 = "_wrapper_1d6pq_333";
+const wrapper$2 = "_wrapper_1d6pq_333";
 const contentContainer = "_contentContainer_1d6pq_347";
 const centered = "_centered_1d6pq_359";
 const newLine = "_newLine_1d6pq_363";
 const styles$q = {
-  wrapper: wrapper$1,
+  wrapper: wrapper$2,
   contentContainer,
   centered,
   newLine
@@ -26381,21 +26381,23 @@ var FixedSizeList = /* @__PURE__ */ createListComponent({
     }
   }
 });
-const layerContainer = "_layerContainer_18lrn_333";
-const layer = "_layer_18lrn_333";
-const small$5 = "_small_18lrn_355";
-const heading = "_heading_18lrn_358";
-const option = "_option_18lrn_359";
-const message = "_message_18lrn_360";
-const focused = "_focused_18lrn_394";
-const selected = "_selected_18lrn_398";
-const disabled$5 = "_disabled_18lrn_405";
-const check = "_check_18lrn_409";
-const optionContent = "_optionContent_18lrn_423";
-const label$5 = "_label_18lrn_428";
-const icon$2 = "_icon_18lrn_435";
-const details = "_details_18lrn_439";
+const wrapper$1 = "_wrapper_w3cwc_333";
+const layerContainer = "_layerContainer_w3cwc_336";
+const layer = "_layer_w3cwc_336";
+const small$5 = "_small_w3cwc_358";
+const heading = "_heading_w3cwc_361";
+const option = "_option_w3cwc_362";
+const message = "_message_w3cwc_363";
+const focused = "_focused_w3cwc_397";
+const selected = "_selected_w3cwc_401";
+const disabled$5 = "_disabled_w3cwc_408";
+const check = "_check_w3cwc_412";
+const optionContent = "_optionContent_w3cwc_426";
+const label$5 = "_label_w3cwc_431";
+const icon$2 = "_icon_w3cwc_438";
+const details = "_details_w3cwc_442";
 const styles$m = {
+  wrapper: wrapper$1,
   layerContainer,
   layer,
   small: small$5,
@@ -27270,6 +27272,7 @@ const CustomSelect = ({
   };
   return /* @__PURE__ */ jsx("div", {
     style: { width: getTriggerWidth() },
+    className: styles$m.wrapper,
     children: /* @__PURE__ */ jsxs(KeyboardEventHandler, {
       handleKeys: ["tab", "up", "down", "left", "right", "enter", "esc"],
       onKeyEvent,
@@ -54768,49 +54771,48 @@ const styles$e = {
   hideScrollbars: hideScrollbars$4,
   richTextInput
 };
-const RichTextInput = ({
-  placeholder: placeholder3,
-  onChange,
-  value,
-  disabled: disabledProp
-}) => {
-  const disabledContext = useContext(DisabledContext);
-  const disabled2 = disabledProp || disabledContext;
-  const { manager, state } = useRemirror({
-    extensions: () => [
-      new BoldExtension(),
-      new BulletListExtension(),
-      new CodeExtension(),
-      new ItalicExtension(),
-      new MarkdownExtension(),
-      new OrderedListExtension(),
-      new PlaceholderExtension({ placeholder: placeholder3 })
-    ],
-    content: value,
-    selection: "start",
-    stringHandler: "markdown"
-  });
-  const handleChange = ({ helpers }) => {
-    const markdown = helpers.getMarkdown();
-    onChange(markdown);
-  };
-  return /* @__PURE__ */ jsx("div", {
-    className: styles$e.richTextInput,
-    children: /* @__PURE__ */ jsxs(Remirror, {
-      manager,
-      initialContent: state,
-      placeholder: placeholder3,
-      onChange: handleChange,
-      editable: !disabled2,
-      children: [
-        /* @__PURE__ */ jsx(RichTextToolbar, {
-          disabled: disabled2
-        }),
-        /* @__PURE__ */ jsx(EditorComponent, {})
-      ]
-    })
-  });
-};
+const RichTextInput = forwardRef(
+  ({ placeholder: placeholder3, onChange, value, disabled: disabledProp }, ref2) => {
+    const disabledContext = useContext(DisabledContext);
+    const disabled2 = disabledProp || disabledContext;
+    const { manager, state, setState, getContext: getContext2 } = useRemirror({
+      extensions: () => [
+        new BoldExtension(),
+        new BulletListExtension(),
+        new CodeExtension(),
+        new ItalicExtension(),
+        new MarkdownExtension(),
+        new OrderedListExtension(),
+        new PlaceholderExtension({ placeholder: placeholder3 })
+      ],
+      content: value,
+      selection: "start",
+      stringHandler: "markdown"
+    });
+    useImperativeHandle(ref2, () => getContext2(), [getContext2]);
+    const handleChange = ({ helpers, state: state2 }) => {
+      const markdown = helpers.getMarkdown();
+      setState(state2);
+      onChange(markdown);
+    };
+    return /* @__PURE__ */ jsx("div", {
+      className: styles$e.richTextInput,
+      children: /* @__PURE__ */ jsxs(Remirror, {
+        manager,
+        state,
+        placeholder: placeholder3,
+        onChange: handleChange,
+        editable: !disabled2,
+        children: [
+          /* @__PURE__ */ jsx(RichTextToolbar, {
+            disabled: disabled2
+          }),
+          /* @__PURE__ */ jsx(EditorComponent, {})
+        ]
+      })
+    });
+  }
+);
 RichTextInput.defaultProps = {
   disabled: false,
   onChange: null,
@@ -57689,7 +57691,8 @@ const NumberInput = ({
   warning: warning2,
   validationCallback,
   allowEmpty,
-  isInTable: isInTable2
+  isInTable: isInTable2,
+  groupOrder
 }) => {
   const [displayValue, setDisplayValue] = useState(value);
   const [validationError, setValidationError] = useState(null);
@@ -57752,7 +57755,8 @@ const NumberInput = ({
     right: !left2,
     small: small2,
     width,
-    isInTable: isInTable2
+    isInTable: isInTable2,
+    groupOrder
   }, stringName);
 };
 NumberInput.defaultProps = {