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

package/dist/index.js

@@ -27455,23 +27455,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 +28551,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 +28635,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 +28656,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 +28720,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([]);