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

package/dist/index.js

@@ -11619,32 +11619,32 @@ Badge.propTypes = {
   margin: propTypes$1.exports.string,
   small: propTypes$1.exports.bool
 };
-const inputInTable$b = "_inputInTable_1z38r_1";
-const inputHover$b = "_inputHover_1z38r_13";
-const inputFocus$b = "_inputFocus_1z38r_18";
-const inputError$b = "_inputError_1z38r_25";
-const inputWarning$b = "_inputWarning_1z38r_26";
-const inputDisabled$b = "_inputDisabled_1z38r_61";
-const hideScrollbars$b = "_hideScrollbars_1z38r_67";
-const button$3 = "_button_1z38r_100";
-const active$7 = "_active_1z38r_137";
-const green$1 = "_green_1z38r_137";
-const red$1 = "_red_1z38r_137";
-const orange$1 = "_orange_1z38r_137";
-const icon$4 = "_icon_1z38r_149";
-const iconOnly = "_iconOnly_1z38r_154";
-const basic = "_basic_1z38r_164";
-const muted$2 = "_muted_1z38r_170";
-const disabled$7 = "_disabled_1z38r_182";
-const small$c = "_small_1z38r_192";
-const pill = "_pill_1z38r_197";
-const round = "_round_1z38r_198";
-const error$8 = "_error_1z38r_268";
-const warning$c = "_warning_1z38r_285";
-const inverted$1 = "_inverted_1z38r_302";
-const groupOrderFirst$4 = "_groupOrderFirst_1z38r_332";
-const groupOrderMiddle$4 = "_groupOrderMiddle_1z38r_333";
-const groupOrderLast$4 = "_groupOrderLast_1z38r_334";
+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 buttonStyles = {
   inputInTable: inputInTable$b,
   inputHover: inputHover$b,
@@ -11871,7 +11871,8 @@ const Button = ({
   groupOrder,
   loading,
   error: error2,
-  warning: warning2
+  warning: warning2,
+  active: active2
 }) => {
   const disabledContext = useContext(DisabledContext);
   const buttonLabel2 = trigger2 === "Button" ? label2 : trigger2 === "DropDownButton" ? /* @__PURE__ */ jsxRuntime.exports.jsxs("span", {
@@ -11906,7 +11907,8 @@ const Button = ({
       loading,
       disabled: disabled2,
       error: error2,
-      warning: warning2
+      warning: warning2,
+      active: active2
     })
   });
 };
@@ -11991,7 +11993,8 @@ const Trigger$1 = React__default.forwardRef(
       groupOrder,
       loading,
       error: error2,
-      warning: warning2
+      warning: warning2,
+      active: isOpen2
     }) : trigger2 === "Text" ? /* @__PURE__ */ jsxRuntime.exports.jsx(Text$1, {
       label: label2,
       title: title2,
@@ -27452,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,
@@ -28548,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,
@@ -28580,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,
@@ -28601,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,
@@ -28665,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([]);