@oliasoft-open-source/react-ui-library 4.0.0-beta-10 → 4.0.0-beta-12

package/dist/index.js

@@ -11619,32 +11619,32 @@ Badge.propTypes = {
   margin: propTypes$1.exports.string,
   small: propTypes$1.exports.bool
 };
-const inputInTable$b = "_inputInTable_4glow_1";
-const inputHover$b = "_inputHover_4glow_13";
-const inputFocus$b = "_inputFocus_4glow_18";
-const inputError$b = "_inputError_4glow_25";
-const inputWarning$b = "_inputWarning_4glow_26";
-const inputDisabled$b = "_inputDisabled_4glow_61";
-const hideScrollbars$b = "_hideScrollbars_4glow_67";
-const button$3 = "_button_4glow_100";
-const active$7 = "_active_4glow_137";
-const green$1 = "_green_4glow_137";
-const red$1 = "_red_4glow_137";
-const orange$1 = "_orange_4glow_137";
-const icon$4 = "_icon_4glow_149";
-const iconOnly = "_iconOnly_4glow_154";
-const basic = "_basic_4glow_164";
-const muted$2 = "_muted_4glow_170";
-const disabled$7 = "_disabled_4glow_182";
-const small$c = "_small_4glow_192";
-const pill = "_pill_4glow_197";
-const round = "_round_4glow_198";
-const error$8 = "_error_4glow_265";
-const warning$c = "_warning_4glow_282";
-const inverted$1 = "_inverted_4glow_299";
-const groupOrderFirst$4 = "_groupOrderFirst_4glow_329";
-const groupOrderMiddle$4 = "_groupOrderMiddle_4glow_330";
-const groupOrderLast$4 = "_groupOrderLast_4glow_331";
+const inputInTable$b = "_inputInTable_1aa9x_1";
+const inputHover$b = "_inputHover_1aa9x_13";
+const inputFocus$b = "_inputFocus_1aa9x_18";
+const inputError$b = "_inputError_1aa9x_25";
+const inputWarning$b = "_inputWarning_1aa9x_26";
+const inputDisabled$b = "_inputDisabled_1aa9x_61";
+const hideScrollbars$b = "_hideScrollbars_1aa9x_67";
+const button$3 = "_button_1aa9x_103";
+const active$7 = "_active_1aa9x_140";
+const green$1 = "_green_1aa9x_140";
+const red$1 = "_red_1aa9x_140";
+const orange$1 = "_orange_1aa9x_140";
+const icon$4 = "_icon_1aa9x_152";
+const iconOnly = "_iconOnly_1aa9x_157";
+const basic = "_basic_1aa9x_167";
+const muted$2 = "_muted_1aa9x_173";
+const disabled$7 = "_disabled_1aa9x_185";
+const small$c = "_small_1aa9x_195";
+const pill = "_pill_1aa9x_200";
+const round = "_round_1aa9x_201";
+const error$8 = "_error_1aa9x_268";
+const warning$c = "_warning_1aa9x_285";
+const inverted$1 = "_inverted_1aa9x_302";
+const groupOrderFirst$4 = "_groupOrderFirst_1aa9x_332";
+const groupOrderMiddle$4 = "_groupOrderMiddle_1aa9x_333";
+const groupOrderLast$4 = "_groupOrderLast_1aa9x_334";
 const buttonStyles = {
   inputInTable: inputInTable$b,
   inputHover: inputHover$b,
@@ -27018,27 +27018,27 @@ Loader.propTypes = {
   testId: propTypes$1.exports.string,
   theme: propTypes$1.exports.string
 };
-const inputInTable$7 = "_inputInTable_17o1r_1";
-const inputHover$7 = "_inputHover_17o1r_13";
-const inputFocus$7 = "_inputFocus_17o1r_18";
-const inputError$7 = "_inputError_17o1r_25";
-const inputWarning$7 = "_inputWarning_17o1r_26";
-const inputDisabled$7 = "_inputDisabled_17o1r_61";
-const hideScrollbars$7 = "_hideScrollbars_17o1r_67";
-const container$1 = "_container_17o1r_83";
-const block$1 = "_block_17o1r_101";
-const info = "_info_17o1r_104";
-const success = "_success_17o1r_108";
-const warning$6 = "_warning_17o1r_112";
-const error$4 = "_error_17o1r_116";
-const content$1 = "_content_17o1r_120";
-const heading$2 = "_heading_17o1r_124";
-const icon$3 = "_icon_17o1r_131";
-const dismiss$1 = "_dismiss_17o1r_139";
-const absolute = "_absolute_17o1r_143";
-const legendToggle = "_legendToggle_17o1r_152";
-const detailsText = "_detailsText_17o1r_162";
-const footer$1 = "_footer_17o1r_166";
+const inputInTable$7 = "_inputInTable_i0gah_1";
+const inputHover$7 = "_inputHover_i0gah_13";
+const inputFocus$7 = "_inputFocus_i0gah_18";
+const inputError$7 = "_inputError_i0gah_25";
+const inputWarning$7 = "_inputWarning_i0gah_26";
+const inputDisabled$7 = "_inputDisabled_i0gah_61";
+const hideScrollbars$7 = "_hideScrollbars_i0gah_67";
+const container$1 = "_container_i0gah_83";
+const block$1 = "_block_i0gah_101";
+const info = "_info_i0gah_104";
+const success = "_success_i0gah_108";
+const warning$6 = "_warning_i0gah_112";
+const error$4 = "_error_i0gah_116";
+const content$1 = "_content_i0gah_120";
+const heading$2 = "_heading_i0gah_124";
+const icon$3 = "_icon_i0gah_131";
+const dismiss$1 = "_dismiss_i0gah_139";
+const absolute = "_absolute_i0gah_143";
+const legendToggle = "_legendToggle_i0gah_154";
+const detailsText = "_detailsText_i0gah_164";
+const footer$1 = "_footer_i0gah_168";
 const styles$r = {
   inputInTable: inputInTable$7,
   inputHover: inputHover$7,
@@ -27106,27 +27106,22 @@ const Details = ({ details: details2, visible, dispatch }) => {
   });
 };
 const DialogIcon = ({ type }) => {
-  const size2 = 16;
   switch (type) {
     case "Success":
       return /* @__PURE__ */ jsxRuntime.exports.jsx(Icon, {
-        icon: "success",
-        size: size2
+        icon: "success"
       });
     case "Warning":
       return /* @__PURE__ */ jsxRuntime.exports.jsx(Icon, {
-        icon: "warning",
-        size: size2
+        icon: "warning"
       });
     case "Error":
       return /* @__PURE__ */ jsxRuntime.exports.jsx(Icon, {
-        icon: "error",
-        size: size2
+        icon: "error"
       });
     default:
       return /* @__PURE__ */ jsxRuntime.exports.jsx(Icon, {
-        icon: "info",
-        size: size2
+        icon: "info"
       });
   }
 };
@@ -27455,23 +27450,23 @@ Page.propTypes = {
   scroll: propTypes$1.exports.bool,
   top: propTypes$1.exports.oneOfType([propTypes$1.exports.number, propTypes$1.exports.string])
 };
-const inputInTable$6 = "_inputInTable_brru0_1";
-const inputHover$6 = "_inputHover_brru0_13";
-const inputFocus$6 = "_inputFocus_brru0_18";
-const inputError$6 = "_inputError_brru0_25";
-const inputWarning$6 = "_inputWarning_brru0_26";
-const inputDisabled$6 = "_inputDisabled_brru0_61";
-const hideScrollbars$6 = "_hideScrollbars_brru0_67";
-const select = "_select_brru0_77";
-const isInTable$2 = "_isInTable_brru0_121";
-const unSelected = "_unSelected_brru0_133";
-const error$3 = "_error_brru0_140";
-const warning$5 = "_warning_brru0_157";
-const small$6 = "_small_brru0_174";
-const right$3 = "_right_brru0_182";
-const groupOrderFirst$1 = "_groupOrderFirst_brru0_193";
-const groupOrderMiddle$1 = "_groupOrderMiddle_brru0_194";
-const groupOrderLast$1 = "_groupOrderLast_brru0_198";
+const inputInTable$6 = "_inputInTable_1cli0_1";
+const inputHover$6 = "_inputHover_1cli0_13";
+const inputFocus$6 = "_inputFocus_1cli0_18";
+const inputError$6 = "_inputError_1cli0_25";
+const inputWarning$6 = "_inputWarning_1cli0_26";
+const inputDisabled$6 = "_inputDisabled_1cli0_61";
+const hideScrollbars$6 = "_hideScrollbars_1cli0_67";
+const select = "_select_1cli0_77";
+const isInTable$2 = "_isInTable_1cli0_121";
+const unSelected = "_unSelected_1cli0_133";
+const error$3 = "_error_1cli0_140";
+const warning$5 = "_warning_1cli0_157";
+const small$6 = "_small_1cli0_174";
+const right$3 = "_right_1cli0_182";
+const groupOrderFirst$1 = "_groupOrderFirst_1cli0_193";
+const groupOrderMiddle$1 = "_groupOrderMiddle_1cli0_194";
+const groupOrderLast$1 = "_groupOrderLast_1cli0_198";
 const styles$n = {
   inputInTable: inputInTable$6,
   inputHover: inputHover$6,
@@ -28551,6 +28546,58 @@ const Section = ({
       });
   }
 };
+const getTextWidth = (text2, font) => {
+  const element = document.createElement("canvas");
+  const context2 = element.getContext("2d");
+  context2.font = font;
+  return context2.measureText(text2).width;
+};
+const FONT_SIZE = "14px";
+const FONT_SIZE_SMALL = "12px";
+const FONT_FAMILY = "Roobert";
+const FONT_FAMILY_FALLBACK = "sans-serif";
+const PADDING = 10;
+const PADDING_SMALL = 7;
+const TOGGLE_SIZE = 38;
+const TOGGLE_SIZE_SMALL = 24;
+const TAG_PADDING = 5;
+const TAG_PADDING_SMALL = 3;
+const TAG_BORDER_WIDTH = 1;
+const TAG_MARGIN = 2;
+const MAX_OPTIONS_LENGTH = 10;
+const getFont = (small2 = false, isFontLoaded = false) => {
+  const fontSize = small2 ? FONT_SIZE_SMALL : FONT_SIZE;
+  const fontFamily = isFontLoaded ? FONT_FAMILY : FONT_FAMILY_FALLBACK;
+  return `${fontSize} ${fontFamily}`;
+};
+const getExtraOptionWidth = (small2 = false, scrollbar = false) => {
+  const SCROLLBAR_WIDTH = 17;
+  return (small2 ? PADDING_SMALL : PADDING) + (small2 ? TOGGLE_SIZE_SMALL : TOGGLE_SIZE) + (scrollbar ? SCROLLBAR_WIDTH : 0);
+};
+const getWidestOptionWidth = (options, small2, isFontLoaded, placeholder3) => {
+  const font = getFont(small2, isFontLoaded);
+  const placeholderWidth = placeholder3 ? getTextWidth(placeholder3, font) : 0;
+  const widestTextWidth = Math.ceil(
+    options.reduce((acc, option2) => {
+      var _a, _b;
+      const optionActionsWidth = ((_b = (_a = option2 == null ? void 0 : option2.actions) == null ? void 0 : _a.length) != null ? _b : 0) * 24;
+      const optionIconWidth = option2.icon ? (small2 ? FONT_SIZE_SMALL : FONT_SIZE) + 7 : 0;
+      const optionsText = `${option2.label} ${option2.details || ""}`;
+      const optionWidth = getTextWidth(optionsText, font) + optionActionsWidth + optionIconWidth;
+      acc = optionWidth > acc ? optionWidth : acc;
+      return acc;
+    }, placeholderWidth)
+  );
+  const hasScrollbar = (options == null ? void 0 : options.length) > MAX_OPTIONS_LENGTH;
+  const extraWidth = getExtraOptionWidth(small2, hasScrollbar);
+  return widestTextWidth + extraWidth;
+};
+const getMultiOptionWidth = (option2, small2, isFontLoaded) => {
+  const font = getFont(true, isFontLoaded);
+  const textWidth = getTextWidth(option2.label, font);
+  const extraWidth = (small2 ? TAG_PADDING_SMALL : TAG_PADDING) * 2 + TAG_BORDER_WIDTH * 2 + TAG_MARGIN;
+  return Math.ceil(textWidth + extraWidth);
+};
 const Layer = ({
   listRef,
   isMulti: isMulti2,
@@ -28583,7 +28630,7 @@ const Layer = ({
       })
     }) : /* @__PURE__ */ jsxRuntime.exports.jsx(FixedSizeList, {
       ref: listRef,
-      height: sections.length < 10 ? optionHeight * sections.length : optionHeight * 10,
+      height: sections.length < MAX_OPTIONS_LENGTH ? optionHeight * sections.length : optionHeight * MAX_OPTIONS_LENGTH,
       itemCount: sections.length,
       itemSize: optionHeight,
       width,
@@ -28604,37 +28651,37 @@ const Layer = ({
     })
   });
 };
-const inputInTable$5 = "_inputInTable_1dpp2_1";
-const inputHover$5 = "_inputHover_1dpp2_13";
-const inputFocus$5 = "_inputFocus_1dpp2_18";
-const inputError$5 = "_inputError_1dpp2_25";
-const inputWarning$5 = "_inputWarning_1dpp2_26";
-const inputDisabled$5 = "_inputDisabled_1dpp2_61";
-const hideScrollbars$5 = "_hideScrollbars_1dpp2_67";
-const trigger$1 = "_trigger_1dpp2_81";
-const isInTable$1 = "_isInTable_1dpp2_97";
-const input = "_input_1dpp2_1";
-const isOpen = "_isOpen_1dpp2_118";
-const error$2 = "_error_1dpp2_126";
-const warning$4 = "_warning_1dpp2_143";
-const disabled$3 = "_disabled_1dpp2_160";
-const icons = "_icons_1dpp2_166";
-const clearAll = "_clearAll_1dpp2_173";
-const iconOpen = "_iconOpen_1dpp2_174";
-const small$4 = "_small_1dpp2_183";
-const triggerInputContainer = "_triggerInputContainer_1dpp2_192";
-const right$2 = "_right_1dpp2_201";
-const multiOptions = "_multiOptions_1dpp2_214";
-const multiOption = "_multiOption_1dpp2_214";
-const label$4 = "_label_1dpp2_246";
-const closeMultiOption = "_closeMultiOption_1dpp2_249";
-const focus = "_focus_1dpp2_260";
-const selectedSingleValue = "_selectedSingleValue_1dpp2_264";
-const placeHolder = "_placeHolder_1dpp2_265";
-const groupOrderFirst = "_groupOrderFirst_1dpp2_304";
-const groupOrderMiddle = "_groupOrderMiddle_1dpp2_305";
-const groupOrderLast = "_groupOrderLast_1dpp2_309";
-const detailedLabel = "_detailedLabel_1dpp2_314";
+const inputInTable$5 = "_inputInTable_1nzsx_1";
+const inputHover$5 = "_inputHover_1nzsx_13";
+const inputFocus$5 = "_inputFocus_1nzsx_18";
+const inputError$5 = "_inputError_1nzsx_25";
+const inputWarning$5 = "_inputWarning_1nzsx_26";
+const inputDisabled$5 = "_inputDisabled_1nzsx_61";
+const hideScrollbars$5 = "_hideScrollbars_1nzsx_67";
+const trigger$1 = "_trigger_1nzsx_77";
+const isInTable$1 = "_isInTable_1nzsx_93";
+const input = "_input_1nzsx_1";
+const isOpen = "_isOpen_1nzsx_114";
+const error$2 = "_error_1nzsx_122";
+const warning$4 = "_warning_1nzsx_139";
+const disabled$3 = "_disabled_1nzsx_156";
+const icons = "_icons_1nzsx_162";
+const clearAll = "_clearAll_1nzsx_169";
+const iconOpen = "_iconOpen_1nzsx_170";
+const small$4 = "_small_1nzsx_178";
+const triggerInputContainer = "_triggerInputContainer_1nzsx_186";
+const right$2 = "_right_1nzsx_195";
+const multiOptions = "_multiOptions_1nzsx_208";
+const multiOption = "_multiOption_1nzsx_208";
+const label$4 = "_label_1nzsx_240";
+const closeMultiOption = "_closeMultiOption_1nzsx_243";
+const focus = "_focus_1nzsx_254";
+const selectedSingleValue = "_selectedSingleValue_1nzsx_258";
+const placeHolder = "_placeHolder_1nzsx_259";
+const groupOrderFirst = "_groupOrderFirst_1nzsx_298";
+const groupOrderMiddle = "_groupOrderMiddle_1nzsx_299";
+const groupOrderLast = "_groupOrderLast_1nzsx_303";
+const detailedLabel = "_detailedLabel_1nzsx_308";
 const styles$l = {
   inputInTable: inputInTable$5,
   inputHover: inputHover$5,
@@ -28668,56 +28715,6 @@ const styles$l = {
   groupOrderLast,
   detailedLabel
 };
-const getTextWidth = (text2, font) => {
-  const element = document.createElement("canvas");
-  const context2 = element.getContext("2d");
-  context2.font = font;
-  return context2.measureText(text2).width;
-};
-const FONT_SIZE = "14px";
-const FONT_SIZE_SMALL = "12px";
-const FONT_FAMILY = "Roobert";
-const FONT_FAMILY_FALLBACK = "sans-serif";
-const PADDING = 14;
-const PADDING_SMALL = 7;
-const TOGGLE_SIZE = 38;
-const TOGGLE_SIZE_SMALL = 24;
-const TAG_PADDING = 5;
-const TAG_PADDING_SMALL = 3;
-const TAG_BORDER_WIDTH = 1;
-const TAG_MARGIN = 2;
-const getFont = (small2 = false, isFontLoaded = false) => {
-  const fontSize = small2 ? FONT_SIZE_SMALL : FONT_SIZE;
-  const fontFamily = isFontLoaded ? FONT_FAMILY : FONT_FAMILY_FALLBACK;
-  return `${fontSize} ${fontFamily}`;
-};
-const getExtraOptionWidth = (small2 = false, scrollbar = false) => {
-  const SCROLLBAR_WIDTH = 17;
-  return (small2 ? PADDING_SMALL : PADDING) + (small2 ? TOGGLE_SIZE_SMALL : TOGGLE_SIZE) + (scrollbar ? SCROLLBAR_WIDTH : 0);
-};
-const getWidestOptionWidth = (options, small2, isFontLoaded, placeholder3) => {
-  const font = getFont(small2, isFontLoaded);
-  const placeholderWidth = placeholder3 ? getTextWidth(placeholder3, font) : 0;
-  const widestTextWidth = Math.ceil(
-    options.reduce((acc, option2) => {
-      var _a, _b;
-      const optionActionsWidth = ((_b = (_a = option2 == null ? void 0 : option2.actions) == null ? void 0 : _a.length) != null ? _b : 0) * 24;
-      const optionIconWidth = option2.icon ? (small2 ? FONT_SIZE_SMALL : FONT_SIZE) + 7 : 0;
-      const optionsText = `${option2.label} ${option2.details || ""}`;
-      const optionWidth = getTextWidth(optionsText, font) + optionActionsWidth + optionIconWidth;
-      acc = optionWidth > acc ? optionWidth : acc;
-      return acc;
-    }, placeholderWidth)
-  );
-  const extraWidth = getExtraOptionWidth(small2, true);
-  return widestTextWidth + extraWidth;
-};
-const getMultiOptionWidth = (option2, small2, isFontLoaded) => {
-  const font = getFont(true, isFontLoaded);
-  const textWidth = getTextWidth(option2.label, font);
-  const extraWidth = (small2 ? TAG_PADDING_SMALL : TAG_PADDING) * 2 + TAG_BORDER_WIDTH * 2 + TAG_MARGIN;
-  return Math.ceil(textWidth + extraWidth);
-};
 const MultiSelectedOptions = ({ selectedOptions, small: small2, width }) => {
   const isFontLoaded = useFontsReady();
   const [displayedOptions, setDisplayedOptions] = useState([]);