widenarrow-ui 1.1.42 → 1.1.44

package/lib/components/FormSkeleton/FormSkeleton.types.d.ts

@@ -1,4 +1,4 @@
-import { ColorTypes } from 'src/constants';
+import { ColorTypes } from '../../constants';
 export interface Block {
     height: number;
     col: number;

package/lib/components/IconButton/IconButton.types.d.ts

@@ -16,6 +16,7 @@ export interface IconButtonProps extends IconStyleInterface {
     iconColor?: Partial<ColorTypes>;
     href?: string;
     disabled?: boolean;
+    tabIndex?: number;
     toolTip?: string;
     ariaLabel?: string;
 }

package/lib/components/InlineButton/InlineButton.types.d.ts

@@ -23,5 +23,6 @@ export interface InlineButtonProps {
     withEllipsis?: boolean;
     disabled?: boolean | undefined;
     style?: CSSProperties;
+    tabIndex?: number;
     toolTip?: string;
 }

package/lib/components/Input/Input.stories.d.ts

@@ -5,3 +5,4 @@ export default meta;
 type Story = StoryObj<typeof Input>;
 export declare const Default: Story;
 export declare const SearchInput: Story;
+export declare const InputWithButtons: Story;

package/lib/components/Input/Input.types.d.ts

@@ -5,6 +5,7 @@ export interface IconInterface {
     disabled?: boolean;
     icon: Partial<IconTypes>;
     toolTip?: string;
+    tabIndex?: number;
     onClickCallback: () => void;
 }
 export interface InputProps {

package/lib/components/NoDataMessage/NoDataMessage.types.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { IconTypes } from 'src/constants';
+import { IconTypes } from '../../constants';
 export interface NoDataMessageProps {
     className?: string;
     icon?: Partial<IconTypes>;

package/lib/components/Pagination/Pagination.types.d.ts

@@ -1,4 +1,4 @@
-import { HierarchyTypes } from 'src/constants';
+import { HierarchyTypes } from '../../constants';
 import { SearchResultInterface } from '../../types/common.types';
 export interface PaginationProps {
     pagination: SearchResultInterface;

package/lib/components/SwitchButton/SwitchButton.types.d.ts

@@ -1,7 +1,7 @@
 export interface SwitchButtonProps {
     checked: boolean;
     name?: string;
-    label: string;
+    label?: string;
     withLabel?: boolean;
     withInlineLabel?: boolean;
     ariaLabel?: string;

package/lib/index.d.ts

@@ -1,7 +1,6 @@
 import * as react from 'react';
 import react__default, { CSSProperties, MouseEvent, ReactNode, FC, ChangeEvent, RefObject, FocusEvent, KeyboardEvent } from 'react';
 import { Placement, PositioningStrategy } from '@popperjs/core';
-import { HierarchyTypes as HierarchyTypes$1, ColorTypes as ColorTypes$1, IconTypes as IconTypes$1 } from 'src/constants';
 
 declare enum IconTypes {
     ACCOUNT_SETTINGS = "iconAccountSettings",
@@ -579,7 +578,7 @@ interface PaginationProps {
     withTablePagination?: boolean;
     withFastForwardButtons?: boolean;
     pageSizeOptions?: Array<number>;
-    buttonType?: HierarchyTypes$1.PRIMARY | HierarchyTypes$1.SECONDARY;
+    buttonType?: HierarchyTypes.PRIMARY | HierarchyTypes.SECONDARY;
     className?: string;
     nextPageTitle?: string;
     previousPageTitle?: string;
@@ -602,7 +601,7 @@ interface Block {
 interface FormSkeletonProps {
     className?: string;
     blocks: Array<Block>;
-    color?: Partial<ColorTypes$1>;
+    color?: Partial<ColorTypes>;
 }
 
 declare const FormSkeleton: FC<FormSkeletonProps>;
@@ -681,6 +680,7 @@ interface IconButtonProps extends IconStyleInterface {
     iconColor?: Partial<ColorTypes>;
     href?: string;
     disabled?: boolean;
+    tabIndex?: number;
     toolTip?: string;
     ariaLabel?: string;
 }
@@ -692,6 +692,7 @@ interface IconInterface {
     disabled?: boolean;
     icon: Partial<IconTypes>;
     toolTip?: string;
+    tabIndex?: number;
     onClickCallback: () => void;
 }
 interface InputProps {
@@ -769,6 +770,7 @@ interface InlineButtonProps {
     withEllipsis?: boolean;
     disabled?: boolean | undefined;
     style?: CSSProperties;
+    tabIndex?: number;
     toolTip?: string;
 }
 
@@ -944,7 +946,7 @@ declare const SortableTable: FC<SortableTableProps>;
 interface SwitchButtonProps {
     checked: boolean;
     name?: string;
-    label: string;
+    label?: string;
     withLabel?: boolean;
     withInlineLabel?: boolean;
     ariaLabel?: string;
@@ -1054,7 +1056,7 @@ declare const SkeletonItem: FC<SkeletonItemProps>;
 
 interface NoDataMessageProps {
     className?: string;
-    icon?: Partial<IconTypes$1>;
+    icon?: Partial<IconTypes>;
     title?: string;
     message?: string;
     absoluteCenter?: boolean;
@@ -1062,7 +1064,7 @@ interface NoDataMessageProps {
     button?: {
         onClickCallback: () => void;
         text: string;
-        icon: Partial<IconTypes$1>;
+        icon: Partial<IconTypes>;
     };
 }
 

package/lib/index.esm.js

@@ -354,7 +354,7 @@ var getPaginationArray = function (pagination) {
 };
 /**
  * @function pickAttributes
- * @param {Object} attr
+ * @param attributes
  * @returns {Object}
  */
 var pickAttributes = function (attributes) { return pickBy(function (val) { return val !== undefined; }, attributes); };
@@ -700,7 +700,10 @@ var ToolTip = function (_a) {
     if (!children) {
         return null;
     }
-    if (disabled || !text) {
+    if (disabled) {
+        return jsx(Fragment, { children: children });
+    }
+    if (!text && !component) {
         return jsx(Fragment, { children: children });
     }
     var uniq = id ? "".concat(id) : uuid();
@@ -2765,7 +2768,7 @@ var styles$f = {"body":"InlineButton-module_aw3KLt","container":"InlineButton-mo
 var s$f = classNames.bind(styles$f);
 var InlineButton = memo(function (_a) {
     var _b, _c;
-    var className = _a.className, id = _a.id, loading = _a.loading, ariaLabel = _a.ariaLabel, text = _a.text, style = _a.style, _d = _a.size, size = _d === void 0 ? SizeTypes.MEDIUM : _d, sizeMd = _a.sizeMd, sizeLg = _a.sizeLg, sizeXl = _a.sizeXl, _e = _a.type, type = _e === void 0 ? HierarchyTypes.PRIMARY : _e, textClassName = _a.textClassName, children = _a.children, icon = _a.icon, withIconRight = _a.withIconRight, iconSize = _a.iconSize, iconClassName = _a.iconClassName, rotateIcon = _a.rotateIcon, rotateIconByDegree = _a.rotateIconByDegree, onClickCallback = _a.onClickCallback, withEllipsis = _a.withEllipsis, disabled = _a.disabled, toolTip = _a.toolTip;
+    var className = _a.className, id = _a.id, loading = _a.loading, ariaLabel = _a.ariaLabel, text = _a.text, style = _a.style, _d = _a.size, size = _d === void 0 ? SizeTypes.MEDIUM : _d, sizeMd = _a.sizeMd, sizeLg = _a.sizeLg, sizeXl = _a.sizeXl, _e = _a.type, type = _e === void 0 ? HierarchyTypes.PRIMARY : _e, textClassName = _a.textClassName, children = _a.children, icon = _a.icon, withIconRight = _a.withIconRight, iconSize = _a.iconSize, iconClassName = _a.iconClassName, tabIndex = _a.tabIndex, rotateIcon = _a.rotateIcon, rotateIconByDegree = _a.rotateIconByDegree, onClickCallback = _a.onClickCallback, withEllipsis = _a.withEllipsis, disabled = _a.disabled, toolTip = _a.toolTip;
     var mergedClassNames = s$f('container', (_b = {},
         _b["container_".concat(type)] = !!type,
         _b["container_sizeSm_".concat(size)] = !!size,
@@ -2792,6 +2795,7 @@ var InlineButton = memo(function (_a) {
     var baseAttributes = (_c = {
             className: mergedClassNames,
             id: id,
+            tabIndex: tabIndex,
             disabled: loading || disabled,
             onClick: !!onClickCallback && !loading ? onClickCallback : undefined
         },
@@ -2961,7 +2965,7 @@ var styles$a = {"body":"IconButton-module_DV09bK","container":"IconButton-module
 var s$a = classNames.bind(styles$a);
 var IconButton = memo(function (_a) {
     var _b, _c;
-    var className = _a.className, disabled = _a.disabled, style = _a.style, icon = _a.icon, id = _a.id, text = _a.text, _d = _a.size, size = _d === void 0 ? SizeTypes.MEDIUM : _d, _e = _a.type, type = _e === void 0 ? HierarchyTypes.SECONDARY : _e, href = _a.href, iconColor = _a.iconColor, iconSize = _a.iconSize, iconClassName = _a.iconClassName, onClickCallback = _a.onClickCallback, rotateIcon = _a.rotateIcon, rotateIconByDegree = _a.rotateIconByDegree, toolTip = _a.toolTip, ariaLabel = _a.ariaLabel;
+    var className = _a.className, disabled = _a.disabled, style = _a.style, icon = _a.icon, id = _a.id, text = _a.text, _d = _a.size, size = _d === void 0 ? SizeTypes.MEDIUM : _d, _e = _a.type, type = _e === void 0 ? HierarchyTypes.SECONDARY : _e, href = _a.href, iconColor = _a.iconColor, iconSize = _a.iconSize, iconClassName = _a.iconClassName, onClickCallback = _a.onClickCallback, rotateIcon = _a.rotateIcon, tabIndex = _a.tabIndex, rotateIconByDegree = _a.rotateIconByDegree, toolTip = _a.toolTip, ariaLabel = _a.ariaLabel;
     var mergedClassNames = s$a('container', (_b = {},
         _b["container_".concat(size)] = size,
         _b["container_".concat(type)] = type,
@@ -2990,6 +2994,7 @@ var IconButton = memo(function (_a) {
         _c['aria-label'] = ariaLabel || text,
         _c.style = style,
         _c.href = href,
+        _c.tabIndex = tabIndex,
         _c.target = href ? '_blank' : undefined,
         _c.rel = href ? 'noopener noreferrer' : undefined,
         _c);
@@ -3050,7 +3055,7 @@ var Input = function (_a) {
                             icon_displayNone: iconObject.loading
                         },
                         _a[iconClassName] = iconClassName,
-                        _a)), disabled: has('disabled', iconObject) ? iconObject.disabled : disabled, toolTip: iconObject.toolTip, icon: iconObject.icon, onClickCallback: iconObject.onClickCallback }))] }));
+                        _a)), tabIndex: iconObject.tabIndex, disabled: has('disabled', iconObject) ? iconObject.disabled : disabled, toolTip: iconObject.toolTip, icon: iconObject.icon, onClickCallback: iconObject.onClickCallback }))] }));
     };
     var containerAttributes = {
         htmlFor: name
@@ -3391,7 +3396,7 @@ var SwitchButton = function (_a) {
                     label_alignCenter: alignCenter,
                     label_withInlineLabel: withInlineLabel,
                     label_disabled: disabled
-                }), children: label }), jsx("input", __assign({ className: s$2('input'), type: 'checkbox', onChange: function () { return undefined; } }, pickAttributes(inputAttributes))), jsxs("div", { className: s$2('button', {
+                }), children: label || ariaLabel }), jsx("input", __assign({ className: s$2('input'), type: 'checkbox', onChange: function () { return undefined; } }, pickAttributes(inputAttributes))), jsxs("div", { className: s$2('button', {
                     button_alignCenter: alignCenter
                 }), children: [jsx("span", { className: s$2('line') }), jsx("span", { className: s$2('circle') })] })] })));
 };