@oliasoft-open-source/react-ui-library 4.20.0-beta-1 → 4.20.0-beta-2

package/README.md

@@ -376,6 +376,7 @@ The `Button` component is a versatile interface element that supports various st
 | `testId`      | A test identifier for the button.                          | None (optional) |
 | `tooltip`     | Tooltip content. Can be text or a ReactNode.               | None (optional) |
 | `inverted`    | Deprecated.                                                | `false`        |
+| `tabIndex`      | The tab index of the button.                             | None (optional) |
 
 ### Usage Example
 
@@ -1360,6 +1361,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

@@ -957,6 +957,7 @@ export declare interface IOptionDropdownProps {
     showHeader?: boolean;
     maxHeight?: string;
     small?: boolean;
+    testId?: string;
 }
 
 declare interface IOptionItem {
@@ -1695,7 +1696,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

@@ -15196,77 +15196,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 +15284,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 +15300,7 @@ const OptionDropdown = ({
         sections: /* @__PURE__ */ jsx(
           Layer$1,
           {
+            testId,
             options,
             onChangeOptions: (evt, nextOptions) => {
               evt.target.name = name2;