@oliasoft-open-source/react-ui-library 4.19.6-beta-5 → 4.19.7

package/README.md

@@ -9,6 +9,7 @@ The React UI Library by Oliasoft is a versatile set of React UI components desig
 To install the React UI Library, you can use either npm or yarn as follows:
 
 Using npm:
+
 ```bash
 npm install @oliasoft-open-source/react-ui-library
 ```
@@ -1359,6 +1360,7 @@ The `OptionDropdown` component is used to display a dropdown menu with selectabl
 | `onChange`    | A function to be called when the selected options change.                                      | -             |
 | `showHeader`  | A boolean indicating whether to display a header above the dropdown options.                  | `true`        |
 | `maxHeight`   | The maximum height of the dropdown menu.                                                      | `'40vh'`      |
+| `testId`      | Test ID used for testing purposes.                                                            | -              |
 
 ### Usage Example
 

package/dist/index.d.ts

@@ -43,7 +43,7 @@ export declare enum BreadcrumbLinkType {
     CUSTOM = "custom"
 }
 
-export declare const Button: ({ active, basic, colored, disabled, ignoreDisabledContext, groupOrder, icon, label, loading, name, pill, round, small, styles, width, title, type, onClick, error, warning, testId, tooltip, inverted, component: Component, url, tabIndex, }: IButtonProps) => JSX_2.Element;
+export declare const Button: ({ active, basic, colored, disabled, ignoreDisabledContext, groupOrder, icon, label, loading, name, pill, round, small, styles, width, title, type, onClick, error, warning, testId, tooltip, inverted, component: Component, url, }: IButtonProps) => JSX_2.Element;
 
 export declare const ButtonGroup: (props: IButtonGroupProps) => JSX_2.Element;
 
@@ -227,7 +227,6 @@ export declare interface IButtonProps {
     inverted?: boolean;
     component?: default_2.ElementType;
     url?: string;
-    tabIndex?: number;
 }
 
 export declare interface ICardProps {
@@ -767,7 +766,6 @@ export declare interface IMenuProps {
     warning?: any;
     title?: string;
     selected?: boolean;
-    tabIndex?: number;
 }
 
 export declare interface IMenuSection {
@@ -957,6 +955,7 @@ export declare interface IOptionDropdownProps {
     showHeader?: boolean;
     maxHeight?: string;
     small?: boolean;
+    testId?: string;
 }
 
 declare interface IOptionItem {
@@ -1695,7 +1694,7 @@ export declare const NativeSelect: ({ disabled, error, warning, tooltip, options
 
 export declare const NumberInput: ({ name, placeholder, disabled, error, left, small, width, value, onChange, onFocus, onBlur, selectOnFocus, tabIndex, testId, tooltip, warning, validationCallback, allowEmpty, isInTable, groupOrder, enableCosmeticRounding, enableDisplayRounding, roundDisplayValue, disableInternalErrorValidationMessages, }: INumberInputProps) => JSX_2.Element;
 
-export declare const OptionDropdown: ({ name, label, options, onChange, small, showHeader, maxHeight, }: IOptionDropdownProps) => ReactElement;
+export declare const OptionDropdown: ({ name, label, options, onChange, small, showHeader, maxHeight, testId, }: IOptionDropdownProps) => ReactElement;
 
 export declare const Page: ({ children, left, padding: paddingProp, scroll, top, }: ILayoutPageProps) => JSX_2.Element;
 

package/dist/index.js

@@ -4101,8 +4101,7 @@ const Button$1 = ({
   inverted: inverted2 = false,
   // *Deprecated*
   component: Component2 = "button",
-  url,
-  tabIndex
+  url
 }) => {
   const disabledContext = useContext(DisabledContext);
   const color2 = (() => {
@@ -4163,7 +4162,6 @@ const Button$1 = ({
       "data-warning": warning2 || null,
       "data-testid": testId,
       to: url,
-      tabIndex,
       children: [
         icon2 && /* @__PURE__ */ jsx("span", { className: buttonStyles.icon, children: /* @__PURE__ */ jsx(Icon, { icon: icon2 }) }),
         loading && /* @__PURE__ */ jsx("span", { className: buttonStyles.icon, children: /* @__PURE__ */ jsx(
@@ -4571,8 +4569,7 @@ const Button = ({
   loading,
   error: error2,
   warning: warning2,
-  active: active2,
-  tabIndex
+  active: active2
 }) => {
   const disabledContext = useContext(DisabledContext);
   const buttonLabel2 = trigger2 === TriggerType.BUTTON ? label2 : trigger2 === TriggerType.DROP_DOWN_BUTTON ? /* @__PURE__ */ jsxs("span", { className: styles$M.middleAlignedInline, children: [
@@ -4601,8 +4598,7 @@ const Button = ({
           disabled: disabled2,
           error: error2,
           warning: warning2,
-          active: active2,
-          tabIndex
+          active: active2
         }
       )
     }
@@ -4696,7 +4692,6 @@ const Trigger$1 = React__default.forwardRef(
     tooltip: tooltip2,
     testId,
     selected: selected2,
-    tabIndex,
     ...restProps
   }, ref) => {
     const triggerElement = trigger2 === TriggerType.BUTTON || trigger2 === TriggerType.DROP_DOWN_BUTTON ? /* @__PURE__ */ jsx(
@@ -4712,8 +4707,7 @@ const Trigger$1 = React__default.forwardRef(
         loading,
         error: error2,
         warning: warning2,
-        active: isOpen2,
-        tabIndex
+        active: isOpen2
       }
     ) : trigger2 === TriggerType.TEXT ? /* @__PURE__ */ jsx(
       Text$1,
@@ -4879,8 +4873,7 @@ const DropDownMenu = ({
   tooltip: tooltip2,
   error: error2,
   warning: warning2,
-  selected: selected2,
-  tabIndex
+  selected: selected2
 }) => {
   const disabledContext = useContext(DisabledContext);
   const {
@@ -4950,8 +4943,7 @@ const DropDownMenu = ({
         error: error2,
         warning: warning2,
         testId,
-        selected: selected2,
-        tabIndex
+        selected: selected2
       }
     ),
     isOpen2 && renderLayer(
@@ -9092,7 +9084,7 @@ const Input$1 = forwardRef(
     },
     onPaste = () => {
     },
-    selectOnFocus = true,
+    selectOnFocus = false,
     name: name2 = void 0,
     type = "text",
     tabIndex = 0,
@@ -9124,7 +9116,7 @@ const Input$1 = forwardRef(
     const handleFocus = (e2) => {
       onFocus(e2);
       if (selectOnFocus) {
-        setTimeout(() => e2.target.select(), 50);
+        e2.target.select();
       }
     };
     return /* @__PURE__ */ jsx("div", { style: { width: width2 }, className: order2, children: /* @__PURE__ */ jsx(
@@ -15196,77 +15188,86 @@ const Layer$1 = ({
   options,
   onChangeOptions,
   showHeader,
-  maxHeight
+  maxHeight,
+  testId
 }) => {
-  return /* @__PURE__ */ jsxs("div", { className: cx$2("menu", styles$r.menu), style: { maxHeight }, children: [
-    showHeader && /* @__PURE__ */ jsxs(Fragment$1, { children: [
-      /* @__PURE__ */ jsxs("div", { className: styles$r.header, children: [
-        /* @__PURE__ */ jsx(
-          "a",
-          {
-            onClick: (evt) => {
-              const next2 = options.map((option2) => ({
-                ...option2,
-                selected: true
-              }));
-              onChangeOptions(evt, next2);
-            },
-            children: "All"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "a",
-          {
-            onClick: (evt) => {
-              const next2 = options.map((option2) => ({
-                ...option2,
-                selected: false
-              }));
-              onChangeOptions(evt, next2);
-            },
-            children: "Clear"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "a",
-          {
-            onClick: (evt) => {
-              const next2 = options.map((option2) => ({
-                ...option2,
-                selected: !(option2 == null ? void 0 : option2.selected)
-              }));
-              onChangeOptions(evt, next2);
-            },
-            children: "Invert"
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsx(Divider, { margin: 0 })
-    ] }),
-    options.map((option2, index2) => {
-      switch (option2.type) {
-        case DropdownType.HEADING:
-          return /* @__PURE__ */ jsx(Heading$1, { label: option2.label }, index2);
-        case DropdownType.DIVIDER:
-          return /* @__PURE__ */ jsx(Divider, { margin: 0 }, index2);
-        default:
-          return /* @__PURE__ */ jsx(
-            Option$1,
-            {
-              option: option2,
-              onChange: (evt) => {
-                const { value } = option2;
-                const next2 = options.map(
-                  (option22) => option22.value !== value ? option22 : { ...option22, selected: !(option22 == null ? void 0 : option22.selected) }
-                );
-                onChangeOptions(evt, next2);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx$2("menu", styles$r.menu),
+      style: { maxHeight },
+      "data-testid": testId ? `${testId}-option-dropdown-layer` : void 0,
+      children: [
+        showHeader && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+          /* @__PURE__ */ jsxs("div", { className: styles$r.header, children: [
+            /* @__PURE__ */ jsx(
+              "a",
+              {
+                onClick: (evt) => {
+                  const next2 = options.map((option2) => ({
+                    ...option2,
+                    selected: true
+                  }));
+                  onChangeOptions(evt, next2);
+                },
+                children: "All"
               }
-            },
-            index2
-          );
-      }
-    })
-  ] });
+            ),
+            /* @__PURE__ */ jsx(
+              "a",
+              {
+                onClick: (evt) => {
+                  const next2 = options.map((option2) => ({
+                    ...option2,
+                    selected: false
+                  }));
+                  onChangeOptions(evt, next2);
+                },
+                children: "Clear"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "a",
+              {
+                onClick: (evt) => {
+                  const next2 = options.map((option2) => ({
+                    ...option2,
+                    selected: !(option2 == null ? void 0 : option2.selected)
+                  }));
+                  onChangeOptions(evt, next2);
+                },
+                children: "Invert"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(Divider, { margin: 0 })
+        ] }),
+        options.map((option2, index2) => {
+          switch (option2.type) {
+            case DropdownType.HEADING:
+              return /* @__PURE__ */ jsx(Heading$1, { label: option2.label }, index2);
+            case DropdownType.DIVIDER:
+              return /* @__PURE__ */ jsx(Divider, { margin: 0 }, index2);
+            default:
+              return /* @__PURE__ */ jsx(
+                Option$1,
+                {
+                  option: option2,
+                  onChange: (evt) => {
+                    const { value } = option2;
+                    const next2 = options.map(
+                      (option22) => option22.value !== value ? option22 : { ...option22, selected: !(option22 == null ? void 0 : option22.selected) }
+                    );
+                    onChangeOptions(evt, next2);
+                  }
+                },
+                index2
+              );
+          }
+        })
+      ]
+    }
+  );
 };
 const OptionDropdown = ({
   name: name2,
@@ -15275,12 +15276,15 @@ const OptionDropdown = ({
   onChange,
   small: small2 = false,
   showHeader = true,
-  maxHeight = "40vh"
+  maxHeight = "40vh",
+  testId
 }) => {
   return /* @__PURE__ */ jsx(
     Menu,
     {
+      testId,
       menu: {
+        testId: testId ? `${testId}-menu-layer` : void 0,
         small: small2,
         label: label2,
         trigger: TriggerType.DROP_DOWN_BUTTON,
@@ -15288,6 +15292,7 @@ const OptionDropdown = ({
         sections: /* @__PURE__ */ jsx(
           Layer$1,
           {
+            testId,
             options,
             onChangeOptions: (evt, nextOptions) => {
               evt.target.name = name2;
@@ -51468,7 +51473,7 @@ const NumberInput = ({
   },
   onBlur = () => {
   },
-  selectOnFocus,
+  selectOnFocus = false,
   tabIndex = 0,
   testId,
   tooltip: tooltip2 = null,
@@ -51553,7 +51558,11 @@ const NumberInput = ({
   useEffect(() => {
     if (inputRef && (inputRef == null ? void 0 : inputRef.current) && enableDisplayRounding && focus2) {
       const textInput = inputRef.current;
-      if (textInput && !selectOnFocus) {
+      if (textInput) {
+        if (selectOnFocus) {
+          textInput.select();
+          return;
+        }
         setTimeout(() => {
           const { length: length2 } = safeToString(displayValue);
           textInput.setSelectionRange(length2, length2);
@@ -66435,7 +66444,7 @@ const UnitInput = ({
   enableCosmeticRounding = true,
   enableDisplayRounding = false,
   roundDisplayValue,
-  selectOnFocus
+  selectOnFocus = false
 }) => {
   const context2 = useUnitContext();
   const runAfterUpdate = useRunAfterUpdate();
@@ -66710,7 +66719,6 @@ const UnitInput = ({
             groupOrder: "last",
             disabled: disabledUnit,
             testId: testId && `${testId}-menu`,
-            tabIndex: -1,
             menu: {
               label: displayUnitLabel,
               trigger: "DropDownButton",