@oliasoft-open-source/react-ui-library 4.20.7 → 4.20.9-beta-1

package/dist/global.css

@@ -996,80 +996,80 @@ a {
 ._contentWrapper_1cgsf_16 {
   border-radius: inherit;
 }
-._inputInTable_1m45a_1 {
+._inputInTable_1vpoe_1 {
   background-color: transparent;
   border-radius: inherit !important;
   height: var(--size);
   min-height: 100%;
 }
-._inputInTable_1m45a_1:not(:hover):not([data-error]):not([data-warning]) {
+._inputInTable_1vpoe_1:not(:hover):not([data-error]):not([data-warning]) {
   border-color: transparent;
 }
-._inputInTable_1m45a_1:not(:focus) {
+._inputInTable_1vpoe_1:not(:focus) {
   box-shadow: none;
 }
-._inputHover_1m45a_13 {
+._inputHover_1vpoe_13 {
   position: relative;
   border-color: var(--color-border-hover);
   z-index: 2;
 }
-._inputFocus_1m45a_18 {
+._inputFocus_1vpoe_18 {
   position: relative;
   outline: none !important;
   border-color: var(--color-border-focus) !important;
   box-shadow: var(--shadow-focus);
   z-index: 3;
 }
-._inputError_1m45a_25,
-._inputWarning_1m45a_26 {
+._inputError_1vpoe_25,
+._inputWarning_1vpoe_26 {
   position: relative;
 }
-._inputError_1m45a_25 {
+._inputError_1vpoe_25 {
   z-index: 2;
   border-color: var(--color-border-error);
   color: var(--color-text-error) !important;
   background-color: var(--color-background-error-muted);
 }
-._inputError_1m45a_25:hover {
+._inputError_1vpoe_25:hover {
   border-color: var(--color-border-error-hover) !important;
 }
-._inputError_1m45a_25:focus {
+._inputError_1vpoe_25:focus {
   position: relative;
   outline: none !important;
   border-color: var(--color-border-focus) !important;
   box-shadow: var(--shadow-focus);
   z-index: 3;
 }
-._inputWarning_1m45a_26 {
+._inputWarning_1vpoe_26 {
   z-index: 1;
   border-color: var(--color-border-warning);
   color: var(--color-text-warning) !important;
   background-color: var(--color-background-warning-muted);
 }
-._inputWarning_1m45a_26:hover {
+._inputWarning_1vpoe_26:hover {
   border-color: var(--color-border-warning-hover) !important;
 }
-._inputWarning_1m45a_26:focus {
+._inputWarning_1vpoe_26:focus {
   position: relative;
   outline: none !important;
   border-color: var(--color-border-focus) !important;
   box-shadow: var(--shadow-focus);
   z-index: 3;
 }
-._inputDisabled_1m45a_61 {
+._inputDisabled_1vpoe_61 {
   pointer-events: none;
   background-color: var(--color-background-disabled);
   color: var(--color-text-muted);
   box-shadow: none;
 }
-._hideScrollbars_1m45a_67 {
+._hideScrollbars_1vpoe_67 {
   /* Firefox */
   scrollbar-width: none;
   /* IE 10+ */
   -ms-overflow-style: none;
   /* Chrome, Safari and Opera */
 }
-._hideScrollbars_1m45a_67::-webkit-scrollbar {
+._hideScrollbars_1vpoe_67::-webkit-scrollbar {
   display: none;
 }
 :root {
@@ -1095,7 +1095,7 @@ html[data-theme='dark'] {
   --color-background-button-default-hover: var(--color-neutral-750);
   --color-background-button-default-active: var(--color-neutral-700);
 }
-._button_1m45a_100 {
+._button_1vpoe_100 {
   cursor: pointer;
   display: inline-flex;
   align-items: center;
@@ -1120,233 +1120,232 @@ html[data-theme='dark'] {
   box-shadow: var(--shadow-button);
   font-weight: bold;
 }
-._button_1m45a_100:hover {
+._button_1vpoe_100:hover {
   background: var(--color-background-button-default-hover);
 }
-._button_1m45a_100:focus {
+._button_1vpoe_100:focus {
   box-shadow: var(--shadow-focus) !important;
 }
-._button_1m45a_100:active {
+._button_1vpoe_100:active {
   background: var(--color-background-button-default-active);
   box-shadow: none;
 }
-._button_1m45a_100._active_1m45a_135:not(._green_1m45a_135):not(._red_1m45a_135):not(._orange_1m45a_135) {
+._button_1vpoe_100._active_1vpoe_135:not(._green_1vpoe_135):not(._red_1vpoe_135):not(._orange_1vpoe_135) {
   border-color: var(--color-border-button-default-active);
   color: var(--color-text-button-default-active);
   position: relative;
   z-index: 2;
 }
-._button_1m45a_100:hover,
-._button_1m45a_100:focus,
-._button_1m45a_100:active {
+._button_1vpoe_100:hover,
+._button_1vpoe_100:focus,
+._button_1vpoe_100:active {
   position: relative;
   z-index: 1;
 }
-._button_1m45a_100 ._icon_1m45a_147 {
+._button_1vpoe_100 ._icon_1vpoe_147 {
   margin: -2px;
   margin-right: var(--padding-xxs);
   font-size: var(--size-xs);
   display: flex;
 }
-._iconOnly_1m45a_153 {
+._iconOnly_1vpoe_153 {
   width: var(--size);
   display: inline-flex;
   align-items: center;
   justify-content: center;
 }
-._iconOnly_1m45a_153 ._icon_1m45a_147 {
+._iconOnly_1vpoe_153 ._icon_1vpoe_147 {
   margin: 0;
   line-height: 0;
 }
-._basic_1m45a_163 {
+._basic_1vpoe_163 {
   color: var(--color-text-primary);
   background: transparent;
   box-shadow: none !important;
   border: none !important;
 }
-._basic_1m45a_163._muted_1m45a_169 {
+._basic_1vpoe_163._muted_1vpoe_169 {
   color: var(--color-text-muted);
 }
-._basic_1m45a_163:hover {
+._basic_1vpoe_163:hover {
   color: var(--color-text-primary-hover);
   background: rgba(0, 0, 0, 0.05);
 }
-[data-theme='dark'] ._basic_1m45a_163:hover {
+[data-theme='dark'] ._basic_1vpoe_163:hover {
   background: rgba(255, 255, 255, 0.1);
 }
-._basic_1m45a_163:active,
-._basic_1m45a_163._active_1m45a_135 {
+._basic_1vpoe_163:active,
+._basic_1vpoe_163._active_1vpoe_135 {
   color: var(--color-text-primary-active);
   background: rgba(0, 0, 0, 0.1);
 }
-[data-theme='dark'] ._basic_1m45a_163:active,
-[data-theme='dark'] ._basic_1m45a_163._active_1m45a_135 {
+[data-theme='dark'] ._basic_1vpoe_163:active,
+[data-theme='dark'] ._basic_1vpoe_163._active_1vpoe_135 {
   background: rgba(255, 255, 255, 0.2);
 }
-._disabled_1m45a_188 {
+._disabled_1vpoe_188 {
   cursor: default;
-  pointer-events: none !important;
   color: var(--color-text-faint) !important;
   box-shadow: none !important;
 }
-._disabled_1m45a_188:not(._active_1m45a_135):not(._basic_1m45a_163) {
+._disabled_1vpoe_188:not(._active_1vpoe_135):not(._basic_1vpoe_163) {
   background: var(--color-background-disabled) !important;
   border: 1px solid var(--color-border) !important;
 }
-._small_1m45a_198 {
+._small_1vpoe_197 {
   font-size: var(--font-size-sm);
   min-height: var(--size-sm);
   padding: var(--padding-input-sm);
 }
-._pill_1m45a_203,
-._round_1m45a_204 {
+._pill_1vpoe_202,
+._round_1vpoe_203 {
   border-radius: 19px;
   display: inline-flex;
   align-items: center;
 }
-._round_1m45a_204 {
+._round_1vpoe_203 {
   padding: 0;
   width: var(--size);
   line-height: 1;
 }
-._round_1m45a_204._small_1m45a_198 {
+._round_1vpoe_203._small_1vpoe_197 {
   width: var(--size-sm);
 }
-._orange_1m45a_135:not(._basic_1m45a_163) {
+._orange_1vpoe_135:not(._basic_1vpoe_163) {
   background-color: var(--color-background-button-primary);
 }
-._orange_1m45a_135:not(._basic_1m45a_163):hover {
+._orange_1vpoe_135:not(._basic_1vpoe_163):hover {
   background-color: var(--color-background-button-primary-hover);
 }
-._orange_1m45a_135:not(._basic_1m45a_163):active,
-._orange_1m45a_135:not(._basic_1m45a_163)._active_1m45a_135 {
+._orange_1vpoe_135:not(._basic_1vpoe_163):active,
+._orange_1vpoe_135:not(._basic_1vpoe_163)._active_1vpoe_135 {
   background-color: var(--color-background-button-primary-active);
 }
-._red_1m45a_135:not(._basic_1m45a_163) {
+._red_1vpoe_135:not(._basic_1vpoe_163) {
   background-color: var(--color-background-button-error);
 }
-._red_1m45a_135:not(._basic_1m45a_163):hover {
+._red_1vpoe_135:not(._basic_1vpoe_163):hover {
   background-color: var(--color-background-button-error-hover);
 }
-._red_1m45a_135:not(._basic_1m45a_163):active,
-._red_1m45a_135:not(._basic_1m45a_163)._active_1m45a_135 {
+._red_1vpoe_135:not(._basic_1vpoe_163):active,
+._red_1vpoe_135:not(._basic_1vpoe_163)._active_1vpoe_135 {
   background-color: var(--color-background-button-error-active);
 }
-._red_1m45a_135._basic_1m45a_163 {
+._red_1vpoe_135._basic_1vpoe_163 {
   color: var(--color-text-error);
 }
-._green_1m45a_135:not(._basic_1m45a_163) {
+._green_1vpoe_135:not(._basic_1vpoe_163) {
   background-color: var(--color-background-button-success);
 }
-._green_1m45a_135:not(._basic_1m45a_163):hover {
+._green_1vpoe_135:not(._basic_1vpoe_163):hover {
   background-color: var(--color-background-button-success-hover);
 }
-._green_1m45a_135:not(._basic_1m45a_163):active,
-._green_1m45a_135:not(._basic_1m45a_163)._active_1m45a_135 {
+._green_1vpoe_135:not(._basic_1vpoe_163):active,
+._green_1vpoe_135:not(._basic_1vpoe_163)._active_1vpoe_135 {
   background-color: var(--color-background-button-success-active);
 }
-._green_1m45a_135._basic_1m45a_163 {
+._green_1vpoe_135._basic_1vpoe_163 {
   color: var(--color-text-success);
 }
-._orange_1m45a_135,
-._red_1m45a_135,
-._green_1m45a_135 {
+._orange_1vpoe_135,
+._red_1vpoe_135,
+._green_1vpoe_135 {
   border-color: var(--color-border-button);
 }
-._orange_1m45a_135:not(._basic_1m45a_163),
-._red_1m45a_135:not(._basic_1m45a_163),
-._green_1m45a_135:not(._basic_1m45a_163) {
+._orange_1vpoe_135:not(._basic_1vpoe_163),
+._red_1vpoe_135:not(._basic_1vpoe_163),
+._green_1vpoe_135:not(._basic_1vpoe_163) {
   color: #fff;
 }
-._orange_1m45a_135:not(._basic_1m45a_163):hover,
-._red_1m45a_135:not(._basic_1m45a_163):hover,
-._green_1m45a_135:not(._basic_1m45a_163):hover {
+._orange_1vpoe_135:not(._basic_1vpoe_163):hover,
+._red_1vpoe_135:not(._basic_1vpoe_163):hover,
+._green_1vpoe_135:not(._basic_1vpoe_163):hover {
   color: #fff;
 }
-._orange_1m45a_135:not(._basic_1m45a_163):active,
-._red_1m45a_135:not(._basic_1m45a_163):active,
-._green_1m45a_135:not(._basic_1m45a_163):active,
-._orange_1m45a_135:not(._basic_1m45a_163)._active_1m45a_135,
-._red_1m45a_135:not(._basic_1m45a_163)._active_1m45a_135,
-._green_1m45a_135:not(._basic_1m45a_163)._active_1m45a_135 {
+._orange_1vpoe_135:not(._basic_1vpoe_163):active,
+._red_1vpoe_135:not(._basic_1vpoe_163):active,
+._green_1vpoe_135:not(._basic_1vpoe_163):active,
+._orange_1vpoe_135:not(._basic_1vpoe_163)._active_1vpoe_135,
+._red_1vpoe_135:not(._basic_1vpoe_163)._active_1vpoe_135,
+._green_1vpoe_135:not(._basic_1vpoe_163)._active_1vpoe_135 {
   color: #fff;
 }
-._button_1m45a_100[data-warning] {
+._button_1vpoe_100[data-warning] {
   position: relative;
   z-index: 1;
   border-color: var(--color-border-warning);
   color: var(--color-text-warning) !important;
   background-color: var(--color-background-warning-muted);
 }
-._button_1m45a_100[data-warning]:hover {
+._button_1vpoe_100[data-warning]:hover {
   border-color: var(--color-border-warning-hover) !important;
 }
-._button_1m45a_100[data-warning]:focus {
+._button_1vpoe_100[data-warning]:focus {
   position: relative;
   outline: none !important;
   border-color: var(--color-border-focus) !important;
   box-shadow: var(--shadow-focus);
   z-index: 3;
 }
-._button_1m45a_100[data-error] {
+._button_1vpoe_100[data-error] {
   position: relative;
   z-index: 2;
   border-color: var(--color-border-error);
   color: var(--color-text-error) !important;
   background-color: var(--color-background-error-muted);
 }
-._button_1m45a_100[data-error]:hover {
+._button_1vpoe_100[data-error]:hover {
   border-color: var(--color-border-error-hover) !important;
 }
-._button_1m45a_100[data-error]:focus {
+._button_1vpoe_100[data-error]:focus {
   position: relative;
   outline: none !important;
   border-color: var(--color-border-focus) !important;
   box-shadow: var(--shadow-focus);
   z-index: 3;
 }
-._inverted_1m45a_310 {
+._inverted_1vpoe_309 {
   background-color: transparent;
   border-color: var(--color-text);
   box-shadow: none;
 }
-._inverted_1m45a_310:hover,
-._inverted_1m45a_310:active {
+._inverted_1vpoe_309:hover,
+._inverted_1vpoe_309:active {
   box-shadow: none;
 }
-._inverted_1m45a_310._orange_1m45a_135 {
+._inverted_1vpoe_309._orange_1vpoe_135 {
   color: var(--color-background-button-primary);
   border-color: var(--color-background-button-primary);
 }
-._inverted_1m45a_310._red_1m45a_135 {
+._inverted_1vpoe_309._red_1vpoe_135 {
   color: var(--color-background-button-error);
   border-color: var(--color-background-button-error);
 }
-._inverted_1m45a_310._green_1m45a_135 {
+._inverted_1vpoe_309._green_1vpoe_135 {
   color: var(--color-background-button-success);
   border-color: var(--color-background-button-success);
 }
-._inverted_1m45a_310._orange_1m45a_135:hover,
-._inverted_1m45a_310._red_1m45a_135:hover,
-._inverted_1m45a_310._green_1m45a_135:hover,
-._inverted_1m45a_310._orange_1m45a_135:active,
-._inverted_1m45a_310._red_1m45a_135:active,
-._inverted_1m45a_310._green_1m45a_135:active {
+._inverted_1vpoe_309._orange_1vpoe_135:hover,
+._inverted_1vpoe_309._red_1vpoe_135:hover,
+._inverted_1vpoe_309._green_1vpoe_135:hover,
+._inverted_1vpoe_309._orange_1vpoe_135:active,
+._inverted_1vpoe_309._red_1vpoe_135:active,
+._inverted_1vpoe_309._green_1vpoe_135:active {
   color: white;
   box-shadow: none;
 }
-._groupOrderFirst_1m45a_340,
-._groupOrderMiddle_1m45a_341,
-._groupOrderLast_1m45a_342 {
+._groupOrderFirst_1vpoe_339,
+._groupOrderMiddle_1vpoe_340,
+._groupOrderLast_1vpoe_341 {
   margin-right: 0;
 }
-._groupOrderFirst_1m45a_340,
-._groupOrderMiddle_1m45a_341 {
+._groupOrderFirst_1vpoe_339,
+._groupOrderMiddle_1vpoe_340 {
   border-top-right-radius: 0 !important;
   border-bottom-right-radius: 0 !important;
 }
-._groupOrderLast_1m45a_342,
-._groupOrderMiddle_1m45a_341 {
+._groupOrderLast_1vpoe_341,
+._groupOrderMiddle_1vpoe_340 {
   border-top-left-radius: 0 !important;
   border-bottom-left-radius: 0 !important;
 }

package/dist/index.d.ts

@@ -744,6 +744,7 @@ export declare interface IMenuProps {
         testId?: string;
         fullHeightTrigger?: boolean;
     };
+    active?: boolean;
     contextMenu?: boolean;
     width?: TStringOrNumber;
     disabled?: boolean;

package/dist/index.js

@@ -3994,30 +3994,30 @@ const AccordionWithDefaultToggle = ({
     /* @__PURE__ */ jsx("div", { className: cx$2(styles$P.bordered, padding2 ? styles$P.padding : ""), children: content2 })
   ] });
 };
-const inputInTable$b = "_inputInTable_1m45a_1";
-const inputHover$b = "_inputHover_1m45a_13";
-const inputFocus$b = "_inputFocus_1m45a_18";
-const inputError$b = "_inputError_1m45a_25";
-const inputWarning$b = "_inputWarning_1m45a_26";
-const inputDisabled$b = "_inputDisabled_1m45a_61";
-const hideScrollbars$b = "_hideScrollbars_1m45a_67";
-const button$3 = "_button_1m45a_100";
-const active$8 = "_active_1m45a_135";
-const green$1 = "_green_1m45a_135";
-const red$1 = "_red_1m45a_135";
-const orange$1 = "_orange_1m45a_135";
-const icon$5 = "_icon_1m45a_147";
-const iconOnly = "_iconOnly_1m45a_153";
-const basic = "_basic_1m45a_163";
-const muted$2 = "_muted_1m45a_169";
-const disabled$9 = "_disabled_1m45a_188";
-const small$c = "_small_1m45a_198";
-const pill = "_pill_1m45a_203";
-const round = "_round_1m45a_204";
-const inverted$1 = "_inverted_1m45a_310";
-const groupOrderFirst$4 = "_groupOrderFirst_1m45a_340";
-const groupOrderMiddle$4 = "_groupOrderMiddle_1m45a_341";
-const groupOrderLast$4 = "_groupOrderLast_1m45a_342";
+const inputInTable$b = "_inputInTable_1vpoe_1";
+const inputHover$b = "_inputHover_1vpoe_13";
+const inputFocus$b = "_inputFocus_1vpoe_18";
+const inputError$b = "_inputError_1vpoe_25";
+const inputWarning$b = "_inputWarning_1vpoe_26";
+const inputDisabled$b = "_inputDisabled_1vpoe_61";
+const hideScrollbars$b = "_hideScrollbars_1vpoe_67";
+const button$3 = "_button_1vpoe_100";
+const active$8 = "_active_1vpoe_135";
+const green$1 = "_green_1vpoe_135";
+const red$1 = "_red_1vpoe_135";
+const orange$1 = "_orange_1vpoe_135";
+const icon$5 = "_icon_1vpoe_147";
+const iconOnly = "_iconOnly_1vpoe_153";
+const basic = "_basic_1vpoe_163";
+const muted$2 = "_muted_1vpoe_169";
+const disabled$9 = "_disabled_1vpoe_188";
+const small$c = "_small_1vpoe_197";
+const pill = "_pill_1vpoe_202";
+const round = "_round_1vpoe_203";
+const inverted$1 = "_inverted_1vpoe_309";
+const groupOrderFirst$4 = "_groupOrderFirst_1vpoe_339";
+const groupOrderMiddle$4 = "_groupOrderMiddle_1vpoe_340";
+const groupOrderLast$4 = "_groupOrderLast_1vpoe_341";
 const buttonStyles = {
   inputInTable: inputInTable$b,
   inputHover: inputHover$b,
@@ -4674,6 +4674,7 @@ const TriggerTooltip = ({
 };
 const Trigger$1 = React__default.forwardRef(
   ({
+    active: active2,
     isDisabled,
     badgeTitle,
     badgeDot,
@@ -4712,7 +4713,7 @@ const Trigger$1 = React__default.forwardRef(
         loading,
         error: error2,
         warning: warning2,
-        active: isOpen2,
+        active: isOpen2 || active2,
         tabIndex
       }
     ) : trigger2 === TriggerType.TEXT ? /* @__PURE__ */ jsx(
@@ -4880,7 +4881,8 @@ const DropDownMenu = ({
   error: error2,
   warning: warning2,
   selected: selected2,
-  tabIndex
+  tabIndex,
+  active: active2
 }) => {
   const disabledContext = useContext(DisabledContext);
   const {
@@ -4946,6 +4948,7 @@ const DropDownMenu = ({
         component: component2,
         groupOrder,
         isOpen: isOpen2,
+        active: active2,
         tooltip: tooltip2,
         error: error2,
         warning: warning2,
@@ -67109,7 +67112,7 @@ const SettingField = ({
   return /* @__PURE__ */ jsxs("div", { className: styles.settingField, children: [
     /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", wrap: false, children: [
       children,
-      !noPermission && /* @__PURE__ */ jsx(
+      !noPermission && /* @__PURE__ */ jsx("div", { style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx(
         Select,
         {
           small: true,
@@ -67122,7 +67125,7 @@ const SettingField = ({
           "aria-label": "Select user type",
           width: "auto"
         }
-      )
+      ) })
     ] }),
     helpText && /* @__PURE__ */ jsx(Text, { muted: true, children: renderHelpText(helpText) })
   ] });