@oliasoft-open-source/react-ui-library 4.19.7 → 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
 

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, }: 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, tabIndex, }: IButtonProps) => JSX_2.Element;
 
 export declare const ButtonGroup: (props: IButtonGroupProps) => JSX_2.Element;
 
@@ -227,6 +227,7 @@ export declare interface IButtonProps {
     inverted?: boolean;
     component?: default_2.ElementType;
     url?: string;
+    tabIndex?: number;
 }
 
 export declare interface ICardProps {
@@ -766,6 +767,7 @@ export declare interface IMenuProps {
     warning?: any;
     title?: string;
     selected?: boolean;
+    tabIndex?: number;
 }
 
 export declare interface IMenuSection {

package/dist/index.js

@@ -4101,7 +4101,8 @@ const Button$1 = ({
   inverted: inverted2 = false,
   // *Deprecated*
   component: Component2 = "button",
-  url
+  url,
+  tabIndex
 }) => {
   const disabledContext = useContext(DisabledContext);
   const color2 = (() => {
@@ -4162,6 +4163,7 @@ 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(
@@ -4569,7 +4571,8 @@ const Button = ({
   loading,
   error: error2,
   warning: warning2,
-  active: active2
+  active: active2,
+  tabIndex
 }) => {
   const disabledContext = useContext(DisabledContext);
   const buttonLabel2 = trigger2 === TriggerType.BUTTON ? label2 : trigger2 === TriggerType.DROP_DOWN_BUTTON ? /* @__PURE__ */ jsxs("span", { className: styles$M.middleAlignedInline, children: [
@@ -4598,7 +4601,8 @@ const Button = ({
           disabled: disabled2,
           error: error2,
           warning: warning2,
-          active: active2
+          active: active2,
+          tabIndex
         }
       )
     }
@@ -4692,6 +4696,7 @@ 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(
@@ -4707,7 +4712,8 @@ const Trigger$1 = React__default.forwardRef(
         loading,
         error: error2,
         warning: warning2,
-        active: isOpen2
+        active: isOpen2,
+        tabIndex
       }
     ) : trigger2 === TriggerType.TEXT ? /* @__PURE__ */ jsx(
       Text$1,
@@ -4873,7 +4879,8 @@ const DropDownMenu = ({
   tooltip: tooltip2,
   error: error2,
   warning: warning2,
-  selected: selected2
+  selected: selected2,
+  tabIndex
 }) => {
   const disabledContext = useContext(DisabledContext);
   const {
@@ -4943,7 +4950,8 @@ const DropDownMenu = ({
         error: error2,
         warning: warning2,
         testId,
-        selected: selected2
+        selected: selected2,
+        tabIndex
       }
     ),
     isOpen2 && renderLayer(
@@ -9084,7 +9092,7 @@ const Input$1 = forwardRef(
     },
     onPaste = () => {
     },
-    selectOnFocus = false,
+    selectOnFocus = true,
     name: name2 = void 0,
     type = "text",
     tabIndex = 0,
@@ -9116,7 +9124,7 @@ const Input$1 = forwardRef(
     const handleFocus = (e2) => {
       onFocus(e2);
       if (selectOnFocus) {
-        e2.target.select();
+        setTimeout(() => e2.target.select(), 0);
       }
     };
     return /* @__PURE__ */ jsx("div", { style: { width: width2 }, className: order2, children: /* @__PURE__ */ jsx(
@@ -51473,7 +51481,7 @@ const NumberInput = ({
   },
   onBlur = () => {
   },
-  selectOnFocus = false,
+  selectOnFocus,
   tabIndex = 0,
   testId,
   tooltip: tooltip2 = null,
@@ -51558,11 +51566,7 @@ const NumberInput = ({
   useEffect(() => {
     if (inputRef && (inputRef == null ? void 0 : inputRef.current) && enableDisplayRounding && focus2) {
       const textInput = inputRef.current;
-      if (textInput) {
-        if (selectOnFocus) {
-          textInput.select();
-          return;
-        }
+      if (textInput && !selectOnFocus) {
         setTimeout(() => {
           const { length: length2 } = safeToString(displayValue);
           textInput.setSelectionRange(length2, length2);
@@ -66444,7 +66448,7 @@ const UnitInput = ({
   enableCosmeticRounding = true,
   enableDisplayRounding = false,
   roundDisplayValue,
-  selectOnFocus = false
+  selectOnFocus
 }) => {
   const context2 = useUnitContext();
   const runAfterUpdate = useRunAfterUpdate();
@@ -66719,6 +66723,7 @@ const UnitInput = ({
             groupOrder: "last",
             disabled: disabledUnit,
             testId: testId && `${testId}-menu`,
+            tabIndex: -1,
             menu: {
               label: displayUnitLabel,
               trigger: "DropDownButton",