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

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
 ```

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 {

package/dist/index.js

@@ -199,21 +199,27 @@ function _objectWithoutPropertiesLoose$5(r2, e2) {
   }
   return t;
 }
-function _extends$4() {
-  return _extends$4 = Object.assign ? Object.assign.bind() : function(n2) {
-    for (var e2 = 1; e2 < arguments.length; e2++) {
-      var t = arguments[e2];
-      for (var r2 in t) ({}).hasOwnProperty.call(t, r2) && (n2[r2] = t[r2]);
+var _extends$6 = { exports: {} };
+var hasRequired_extends;
+function require_extends() {
+  if (hasRequired_extends) return _extends$6.exports;
+  hasRequired_extends = 1;
+  (function(module) {
+    function _extends3() {
+      return module.exports = _extends3 = Object.assign ? Object.assign.bind() : function(n2) {
+        for (var e2 = 1; e2 < arguments.length; e2++) {
+          var t = arguments[e2];
+          for (var r2 in t) ({}).hasOwnProperty.call(t, r2) && (n2[r2] = t[r2]);
+        }
+        return n2;
+      }, module.exports.__esModule = true, module.exports["default"] = module.exports, _extends3.apply(null, arguments);
     }
-    return n2;
-  }, _extends$4.apply(null, arguments);
+    module.exports = _extends3, module.exports.__esModule = true, module.exports["default"] = module.exports;
+  })(_extends$6);
+  return _extends$6.exports;
 }
-const _extends$5 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-  __proto__: null,
-  get default() {
-    return _extends$4;
-  }
-}, Symbol.toStringTag, { value: "Module" }));
+var _extendsExports = require_extends();
+const _extends$5 = /* @__PURE__ */ getDefaultExportFromCjs(_extendsExports);
 function _setPrototypeOf$3(t, e2) {
   return _setPrototypeOf$3 = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function(t2, e3) {
     return t2.__proto__ = e3, t2;
@@ -792,7 +798,7 @@ var ReactSVG = /* @__PURE__ */ function(_React$Component) {
   };
   _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
     var _this3 = this;
-    if (shallowDiffers(_extends$4({}, prevProps), this.props)) {
+    if (shallowDiffers(_extends$5({}, prevProps), this.props)) {
       this.setState(function() {
         return _this3.initialState;
       }, function() {
@@ -820,7 +826,7 @@ var ReactSVG = /* @__PURE__ */ function(_React$Component) {
     _this$props2.useRequestCache;
     var wrapper2 = _this$props2.wrapper, rest = _objectWithoutPropertiesLoose$5(_this$props2, _excluded$8);
     var Wrapper2 = wrapper2;
-    return /* @__PURE__ */ React$4.createElement(Wrapper2, _extends$4({}, rest, {
+    return /* @__PURE__ */ React$4.createElement(Wrapper2, _extends$5({}, rest, {
       ref: this.refCallback
     }, wrapper2 === "svg" ? {
       xmlns: svgNamespace,
@@ -2235,8 +2241,8 @@ function _createClass(Constructor, protoProps, staticProps) {
   if (protoProps) _defineProperties(Constructor.prototype, protoProps);
   return Constructor;
 }
-function _extends$3() {
-  _extends$3 = Object.assign || function(target) {
+function _extends$4() {
+  _extends$4 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key2 in source) {
@@ -2247,7 +2253,7 @@ function _extends$3() {
     }
     return target;
   };
-  return _extends$3.apply(this, arguments);
+  return _extends$4.apply(this, arguments);
 }
 function _inheritsLoose$2(subClass, superClass) {
   subClass.prototype = Object.create(superClass.prototype);
@@ -2571,7 +2577,7 @@ function useTrackElements(_ref) {
   var layerRef = useTrackRef(useCallback(function(layer2) {
     var _get3 = get3(), previousLayer = _get3.layer;
     set2(function(state) {
-      return _extends$3({}, state, {
+      return _extends$4({}, state, {
         layer: layer2
       });
     });
@@ -2594,7 +2600,7 @@ function useTrackElements(_ref) {
     var scrollContainers = getScrollContainers(trigger2);
     var _get4 = get3(), previousTrigger = _get4.trigger;
     set2(function(state) {
-      return _extends$3({}, state, {
+      return _extends$4({}, state, {
         trigger: trigger2,
         scrollContainers
       });
@@ -2607,7 +2613,7 @@ function useTrackElements(_ref) {
       return;
     }
     set2(function(state) {
-      return _extends$3({}, state, {
+      return _extends$4({}, state, {
         scrollContainers: getScrollContainers(triggerOptionParent)
       });
     });
@@ -2774,7 +2780,7 @@ var BoundSide = {
   left: /* @__PURE__ */ createSide("left"),
   right: /* @__PURE__ */ createSide("right")
 };
-var Side = /* @__PURE__ */ _extends$3({}, BoundSide, {
+var Side = /* @__PURE__ */ _extends$4({}, BoundSide, {
   center: /* @__PURE__ */ createSide("center")
 });
 var SIDES = ["top", "left", "bottom", "right"];
@@ -2870,7 +2876,7 @@ var Bounds = /* @__PURE__ */ function() {
       var _environment$getCompu = environment2.getComputedStyle(element), width2 = _environment$getCompu.width, height2 = _environment$getCompu.height, boxSizing = _environment$getCompu.boxSizing, borderLeft = _environment$getCompu.borderLeft, borderRight = _environment$getCompu.borderRight, borderTop = _environment$getCompu.borderTop, borderBottom = _environment$getCompu.borderBottom, paddingLeft = _environment$getCompu.paddingLeft, paddingRight = _environment$getCompu.paddingRight, paddingTop = _environment$getCompu.paddingTop, paddingBottom = _environment$getCompu.paddingBottom;
       var boxWidth = boxSizing === "border-box" ? getPixelValue(width2) : sumOfPropertyValues(width2, borderLeft, borderRight, paddingLeft, paddingRight);
       var boxHeight = boxSizing === "border-box" ? getPixelValue(height2) : sumOfPropertyValues(height2, borderTop, borderBottom, paddingTop, paddingBottom);
-      bounds = new Bounds2(_extends$3({}, bounds, {
+      bounds = new Bounds2(_extends$4({}, bounds, {
         width: boxWidth,
         height: boxHeight
       }));
@@ -2917,7 +2923,7 @@ var Bounds = /* @__PURE__ */ function() {
   };
   _proto.merge = function merge(partialBoundsOrMergeFn) {
     var current = this.toObject();
-    return new Bounds2(_extends$3({}, current, typeof partialBoundsOrMergeFn === "function" ? partialBoundsOrMergeFn(current) : partialBoundsOrMergeFn));
+    return new Bounds2(_extends$4({}, current, typeof partialBoundsOrMergeFn === "function" ? partialBoundsOrMergeFn(current) : partialBoundsOrMergeFn));
   };
   _proto.substract = function substract(bounds) {
     var result = this.toObject();
@@ -2984,7 +2990,7 @@ var Placement = /* @__PURE__ */ function() {
       typeof layerDimensions === "function" ? layerDimensions(this.primary.prop) : layerDimensions
     );
     this.subjectsBounds = subjectBounds.merge({
-      layer: _extends$3({}, subjectBounds.layer, dimensions)
+      layer: _extends$4({}, subjectBounds.layer, dimensions)
     });
   };
   _proto.getLayerBounds = function getLayerBounds(secondaryOffset) {
@@ -3159,7 +3165,7 @@ function getArrowStyle(subjectsBounds, placement, arrowOffset) {
   var primarySide = placement.primary.prop;
   var secondarySide = placement.primary.oppositeCssProp;
   var secondaryValue = triggerIsBigger ? layer2[sizeProperty] / 2 + negativeOffset : trigger2[secondarySide] + trigger2[sizeProperty] / 2 - layer2[secondarySide];
-  return _extends$3({}, STYLE_BASE, (_extends22 = {}, _extends22[primarySide] = "100%", _extends22[secondarySide] = limit(secondaryValue, min, max), _extends22));
+  return _extends$4({}, STYLE_BASE, (_extends22 = {}, _extends22[primarySide] = "100%", _extends22[secondarySide] = limit(secondaryValue, min, max), _extends22));
 }
 var Placements = /* @__PURE__ */ function() {
   function Placements2(placements, config, subjectsBounds) {
@@ -3288,11 +3294,11 @@ var Placements = /* @__PURE__ */ function() {
     var arrow2 = getArrowStyle(this.subjectsBounds.merge({
       layer: layerBounds
     }), placement, this.config.arrowOffset);
-    var layer2 = this.config.overflowContainer ? _extends$3({}, layerStyleBase, {
+    var layer2 = this.config.overflowContainer ? _extends$4({}, layerStyleBase, {
       position: "fixed",
       top: layerBounds.top,
       left: layerBounds.left
-    }) : _extends$3({}, layerStyleBase, {
+    }) : _extends$4({}, layerStyleBase, {
       position: "absolute",
       top: layerBounds.top - this.subjectsBounds.parent.top + scrollOffsets.top - borderOffsets.top,
       left: layerBounds.left - this.subjectsBounds.parent.left + scrollOffsets.left - borderOffsets.left
@@ -3367,7 +3373,7 @@ var SubjectsBounds = /* @__PURE__ */ function() {
   };
   var _proto = SubjectsBounds2.prototype;
   _proto.merge = function merge(subjectsBounds) {
-    return new SubjectsBounds2(_extends$3({}, this, subjectsBounds), this.overflowContainer);
+    return new SubjectsBounds2(_extends$4({}, this, subjectsBounds), this.overflowContainer);
   };
   _proto.offsetsToScrollContainers = function offsetsToScrollContainers(subject, allContainers) {
     if (allContainers === void 0) {
@@ -3602,10 +3608,10 @@ var Arrow = /* @__PURE__ */ forwardRef(function Arrow2(_ref2, ref) {
   var sizeA = size2;
   var sizeB = getWidthBasedOnAngle(angle, size2) * 2;
   var maxSize = Math.max(sizeA, sizeB);
-  return createElement("svg", _extends$3({
+  return createElement("svg", _extends$4({
     ref
   }, rest, {
-    style: _extends$3({}, style, {
+    style: _extends$4({}, style, {
       transform: "translate" + (side.isHorizontal ? "Y" : "X") + "(-50%)"
     }),
     width: maxSize,
@@ -4101,8 +4107,7 @@ const Button$1 = ({
   inverted: inverted2 = false,
   // *Deprecated*
   component: Component2 = "button",
-  url,
-  tabIndex
+  url
 }) => {
   const disabledContext = useContext(DisabledContext);
   const color2 = (() => {
@@ -4163,7 +4168,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 +4575,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 +4604,7 @@ const Button = ({
           disabled: disabled2,
           error: error2,
           warning: warning2,
-          active: active2,
-          tabIndex
+          active: active2
         }
       )
     }
@@ -4696,7 +4698,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 +4713,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 +4879,7 @@ const DropDownMenu = ({
   tooltip: tooltip2,
   error: error2,
   warning: warning2,
-  selected: selected2,
-  tabIndex
+  selected: selected2
 }) => {
   const disabledContext = useContext(DisabledContext);
   const {
@@ -4950,8 +4949,7 @@ const DropDownMenu = ({
         error: error2,
         warning: warning2,
         testId,
-        selected: selected2,
-        tabIndex
+        selected: selected2
       }
     ),
     isOpen2 && renderLayer(
@@ -8277,8 +8275,8 @@ function _interopRequireWildcard$2(obj, nodeInterop) {
   }
   return newObj;
 }
-function _extends$2() {
-  _extends$2 = Object.assign ? Object.assign.bind() : function(target) {
+function _extends$3() {
+  _extends$3 = Object.assign ? Object.assign.bind() : function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key2 in source) {
@@ -8289,7 +8287,7 @@ function _extends$2() {
     }
     return target;
   };
-  return _extends$2.apply(this, arguments);
+  return _extends$3.apply(this, arguments);
 }
 function _objectWithoutPropertiesLoose$3(source, excluded) {
   if (source == null) return {};
@@ -8494,7 +8492,7 @@ var Resizable$1 = /* @__PURE__ */ function(_React$Component) {
       children: [].concat(children.props.children, resizeHandles.map(function(handleAxis) {
         var _this3$handleRefs$han;
         var ref = (_this3$handleRefs$han = _this3.handleRefs[handleAxis]) != null ? _this3$handleRefs$han : _this3.handleRefs[handleAxis] = /* @__PURE__ */ React$2.createRef();
-        return /* @__PURE__ */ React$2.createElement(_reactDraggable.DraggableCore, _extends$2({}, draggableOpts, {
+        return /* @__PURE__ */ React$2.createElement(_reactDraggable.DraggableCore, _extends$3({}, draggableOpts, {
           nodeRef: ref,
           key: "resizableHandle-" + handleAxis,
           onStop: _this3.resizeHandler("onResizeStop", handleAxis),
@@ -8565,8 +8563,8 @@ function _interopRequireWildcard$1(obj, nodeInterop) {
   }
   return newObj;
 }
-function _extends$1() {
-  _extends$1 = Object.assign ? Object.assign.bind() : function(target) {
+function _extends$2() {
+  _extends$2 = Object.assign ? Object.assign.bind() : function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key2 in source) {
@@ -8577,7 +8575,7 @@ function _extends$1() {
     }
     return target;
   };
-  return _extends$1.apply(this, arguments);
+  return _extends$2.apply(this, arguments);
 }
 function ownKeys$1(object2, enumerableOnly) {
   var keys2 = Object.keys(object2);
@@ -8708,7 +8706,7 @@ var ResizableBox = /* @__PURE__ */ function(_React$Component) {
       resizeHandles,
       transformScale,
       width: this.state.width
-    }, /* @__PURE__ */ React$1.createElement("div", _extends$1({}, props, {
+    }, /* @__PURE__ */ React$1.createElement("div", _extends$2({}, props, {
       style: _objectSpread$5(_objectSpread$5({}, style), {}, {
         width: this.state.width + "px",
         height: this.state.height + "px"
@@ -9092,7 +9090,7 @@ const Input$1 = forwardRef(
     },
     onPaste = () => {
     },
-    selectOnFocus = true,
+    selectOnFocus = false,
     name: name2 = void 0,
     type = "text",
     tabIndex = 0,
@@ -9124,7 +9122,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(
@@ -15700,6 +15698,15 @@ const useWindowWidth = () => {
   }, []);
   return width2;
 };
+function _extends$1() {
+  return _extends$1 = Object.assign ? Object.assign.bind() : function(n2) {
+    for (var e2 = 1; e2 < arguments.length; e2++) {
+      var t = arguments[e2];
+      for (var r2 in t) ({}).hasOwnProperty.call(t, r2) && (n2[r2] = t[r2]);
+    }
+    return n2;
+  }, _extends$1.apply(null, arguments);
+}
 function _assertThisInitialized(e2) {
   if (void 0 === e2) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
   return e2;
@@ -16072,7 +16079,7 @@ function createListComponent(_ref) {
         className,
         onScroll,
         ref: this._outerRefSetter,
-        style: _extends$4({
+        style: _extends$1({
           position: "relative",
           height: height2,
           width: width2,
@@ -48160,7 +48167,6 @@ var interopRequireDefault = { exports: {} };
   module.exports = _interopRequireDefault2, module.exports.__esModule = true, module.exports["default"] = module.exports;
 })(interopRequireDefault);
 var interopRequireDefaultExports = interopRequireDefault.exports;
-const require$$2 = /* @__PURE__ */ getAugmentedNamespace(_extends$5);
 const richTextToolbar = "_richTextToolbar_1gbkk_1";
 const richTextToolbarContainer = "_richTextToolbarContainer_1gbkk_5";
 const styles$h = {
@@ -49461,7 +49467,7 @@ var Handle$2 = /* @__PURE__ */ React$4.forwardRef(function(props, ref) {
     }
   };
   var positionStyle = getDirectionStyle(direction, value, min, max);
-  var handleNode = /* @__PURE__ */ React$4.createElement("div", _extends$4({
+  var handleNode = /* @__PURE__ */ React$4.createElement("div", _extends$1({
     ref,
     className: cx$2(handlePrefixCls, (_classNames = {}, _defineProperty$7(_classNames, "".concat(handlePrefixCls, "-").concat(valueIndex + 1), range2), _defineProperty$7(_classNames, "".concat(handlePrefixCls, "-dragging"), dragging), _classNames)),
     style: _objectSpread2$1(_objectSpread2$1({}, positionStyle), style),
@@ -49505,7 +49511,7 @@ var Handles = /* @__PURE__ */ React$4.forwardRef(function(props, ref) {
     };
   });
   return /* @__PURE__ */ React$4.createElement(React$4.Fragment, null, values2.map(function(value, index2) {
-    return /* @__PURE__ */ React$4.createElement(Handle$2, _extends$4({
+    return /* @__PURE__ */ React$4.createElement(Handle$2, _extends$1({
       ref: function ref2(node2) {
         if (!node2) {
           delete handlesRef.current[index2];
@@ -50875,7 +50881,7 @@ Object.defineProperty(Handle$1, "__esModule", {
   value: true
 });
 var default_1 = Handle$1.default = void 0;
-var _extends2 = _interopRequireDefault(require$$2);
+var _extends2 = _interopRequireDefault(require_extends());
 var _objectSpread2 = _interopRequireDefault(requireObjectSpread2());
 var _defineProperty2 = _interopRequireDefault(requireDefineProperty());
 var _objectWithoutProperties2 = _interopRequireDefault(requireObjectWithoutProperties());
@@ -51468,7 +51474,7 @@ const NumberInput = ({
   },
   onBlur = () => {
   },
-  selectOnFocus,
+  selectOnFocus = false,
   tabIndex = 0,
   testId,
   tooltip: tooltip2 = null,
@@ -51553,7 +51559,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 +66445,7 @@ const UnitInput = ({
   enableCosmeticRounding = true,
   enableDisplayRounding = false,
   roundDisplayValue,
-  selectOnFocus
+  selectOnFocus = false
 }) => {
   const context2 = useUnitContext();
   const runAfterUpdate = useRunAfterUpdate();
@@ -66710,7 +66720,6 @@ const UnitInput = ({
             groupOrder: "last",
             disabled: disabledUnit,
             testId: testId && `${testId}-menu`,
-            tabIndex: -1,
             menu: {
               label: displayUnitLabel,
               trigger: "DropDownButton",