@spaced-out/ui-design-system 0.4.12 → 0.4.13-beta.0

package/lib/components/Tabs/Tab/Tab.stories.tsx

@@ -0,0 +1,151 @@
+import * as React from 'react';
+
+import type {TabProps} from './Tab';
+import {Tab, tabSizeOptions} from '.';
+
+
+export default {
+  tags: ['autodocs'],
+  title: 'Components/Tabs/Anatomy',
+  argTypes: {
+    size: {
+      description: 'Tab supports two size variants namely small, medium',
+      control: {
+        type: 'select',
+      },
+      options: tabSizeOptions,
+      table: {
+        type: {summary: 'enum'},
+        defaultValue: {summary: 'medium'},
+      },
+    },
+    disabled: {
+      name: 'disabled',
+      description: `Disabled Tab. When true, User can not interact with the the Tab.`,
+      options: [false, true],
+      control: 'boolean',
+      table: {
+        type: {summary: 'boolean'},
+        defaultValue: {summary: false},
+      },
+    },
+    iconName: {
+      name: 'iconName',
+      description: 'Icon name for tab with Icon',
+      table: {
+        type: {summary: 'string'},
+      },
+    },
+    iconType: {
+      description:
+        'Type of Icon for tab with Icon. Type represents 4 unique icon styles :- Solid, Regular, Duotone and Brands',
+      options: ['regular', 'solid', 'duotone', 'brands'],
+      control: {type: 'select'},
+      table: {
+        type: {summary: 'string'},
+        defaultValue: {summary: 'regular'},
+      },
+    },
+    label: {
+      description: 'Pass label for Tab',
+      table: {
+        type: {summary: 'string'},
+      },
+    },
+    tabId: {
+      description:
+        'Pass tabId for each Tab. It should be unique for among a TabList',
+      table: {
+        type: {summary: 'string'},
+      },
+    },
+    onSelect: {
+      description:
+        '**onSelect** handler is triggered when there is a change in selected tab',
+      action: 'clicked',
+      table: {
+        type: {summary: '({tabId: string, label: string}) => mixed'},
+      },
+    },
+    selectedTab: {
+      description: 'Pass the tabId and label(optional) of selected tab',
+      control: {
+        type: 'object',
+      },
+      table: {
+        type: {summary: '{tabId?: string, label?: string}'},
+      },
+    },
+    width: {
+      description:
+        'Manual width control. This overrides the default width consideration tab',
+      control: {
+        type: 'text',
+      },
+      table: {
+        type: {summary: 'string'},
+      },
+    },
+    onClick: {
+      description:
+        '**onClick** handler that is applied to the root `<button>` element',
+      action: 'clicked',
+      table: {
+        type: {summary: '(SyntheticEvent<HTMLElement>) => mixed'},
+      },
+    },
+    classNames: {
+      description: 'External classNames to be applied',
+      control: {
+        type: 'object',
+      },
+      table: {
+        type: {summary: '{wrapper?: string, iconTextWrap?: string}'},
+      },
+    },
+  },
+  parameters: {
+    docs: {
+      subtitle: 'Generates a Tabs component.',
+      description: {
+        component: `
+\`\`\`js
+import { Tab } from "@spaced-out/ui-design-system/lib/components/Tabs";
+\`\`\`
+Tab has to be used as child of <a href="../?path=/docs/components-tablist--docs">TabList</a>.
+Tabs make it easy to switch between different views. A controlled value can be provided using the selectedTab prop.
+Tab accepts an onSelect prop, when  Tab is clicked this function will be called and you will receive
+the tabId and label.
+      `,
+      },
+    },
+    storySource: {
+      componentPath: '/src/components/Tabs/Tab/Tab.jsx',
+    },
+  },
+};
+
+export const _Anatomy = (args: TabProps) => {
+  const [selectedTab, setSelectedTab] = React.useState(args.selectedTab);
+  const onSelectHandler = (
+    params: {
+      label?: string;
+      tabId?: string;
+    },
+  ): void => {
+    args.onSelect && args.onSelect(params);
+    setSelectedTab(params);
+  };
+
+  return <Tab {...args} onSelect={onSelectHandler} selectedTab={selectedTab} />;
+};
+
+_Anatomy.args = {
+  size: 'medium',
+  selectedTab: {key: '', value: ''},
+  disabled: false,
+  iconName: 'face-party',
+  iconType: 'regular',
+  label: 'Tab Link',
+  tabId: 'tab-0',
+};

package/lib/components/Tabs/Tab/Tab.tsx

@@ -0,0 +1,152 @@
+import {Flow} from 'flow-to-typescript-codemod';
+
+import * as React from 'react';
+
+import {TEXT_COLORS} from '../../../types/typography';
+import {classify} from '../../../utils/classify';
+import {UnstyledButton} from '../../Button';
+import type {IconType} from '../../Icon';
+import {Icon} from '../../Icon';
+import {ButtonTextMedium, ButtonTextSmall} from '../../Text';
+
+import css from './Tab.module.css';
+
+
+type ClassNames = Readonly<{
+  wrapper?: string;
+  iconTextWrap?: string;
+}>;
+
+export const TAB_SIZE = Object.freeze({
+  small: 'small',
+  medium: 'medium',
+});
+
+export const tabSizeOptions: Array<unknown> = [...Object.keys(TAB_SIZE)];
+
+export type TabSize = keyof typeof TAB_SIZE;
+
+export type TabProps = {
+  classNames?: ClassNames;
+  onSelect?: (
+    arg1: {
+      tabId?: string;
+      label?: string;
+    },
+  ) => unknown;
+  size?: TabSize;
+  selectedTab?: {
+    tabId?: string;
+    label?: string;
+  };
+  disabled?: boolean;
+  tabId?: string;
+  label?: string;
+  iconName?: string;
+  iconType?: IconType;
+  width?: string;
+  onClick?: ((arg1: React.SyntheticEvent<HTMLElement>) => unknown) | null | undefined;
+};
+
+export const Tab: Flow.AbstractComponent<TabProps, HTMLButtonElement> =
+  React.forwardRef<HTMLButtonElement, TabProps>((
+    {
+      classNames,
+      onSelect,
+      size = 'medium',
+      selectedTab,
+      disabled = false,
+      tabId,
+      label,
+      iconName,
+      iconType,
+      onClick,
+      width,
+      ...props
+    }: TabProps,
+    forwardRef,
+  ) => {
+    const tabRef = React.useRef(null);
+// @ts-ignore - TS2322 - Type 'null' is not assignable to type 'HTMLButtonElement'.
+    React.useImperativeHandle(forwardRef, () => tabRef.current);
+    const selected = tabId && tabId === selectedTab?.tabId;
+    const onClickHandler = (e: React.SyntheticEvent<HTMLElement>) => {
+      if (!disabled) {
+        e.preventDefault();
+        onSelect && onSelect({tabId, label});
+        onClick && onClick(e);
+// @ts-ignore - TS2339 - Property 'blur' does not exist on type 'never'.
+        tabRef.current?.blur();
+      }
+    };
+    return (
+      <UnstyledButton
+        {...props}
+        disabled={disabled}
+        className={classify(
+          css.button,
+          {
+            [css.selected]: selected === true,
+            [css.disabled]: disabled === true,
+            [css.mediumSize]: size === 'medium',
+            [css.smallSize]: size === 'small',
+          },
+          classNames?.wrapper,
+        )}
+        onClick={onClickHandler}
+// @ts-ignore - TS2769 - No overload matches this call.
+        style={{width}}
+        tabIndex={disabled ? -1 : 0}
+        ref={tabRef}
+      >
+        <span
+          className={classify(
+            css.iconTextWrap,
+            {
+              [css.selected]: selected === true,
+              [css.disabled]: disabled === true,
+            },
+            classNames?.iconTextWrap,
+          )}
+        >
+          {iconName ? (
+            <Icon
+              name={iconName}
+              type={iconType}
+              size={size}
+              className={classify(css.icon, {
+                [css.disabled]: disabled === true,
+              })}
+            />
+          ) : null}
+
+          {label && (
+            <>
+              {size === TAB_SIZE.medium ? (
+                <ButtonTextMedium
+                  color={TEXT_COLORS.secondary}
+                  className={classify(css.tabContainer, {
+                    [css.disabled]: disabled === true,
+                  })}
+                >
+                  {label}
+                </ButtonTextMedium>
+              ) : (
+                <ButtonTextSmall
+                  color={TEXT_COLORS.secondary}
+                  className={classify(css.tabContainer, {
+                    [css.selected]: selected === true,
+                    [css.disabled]: disabled === true,
+                  })}
+                >
+                  {label}
+                </ButtonTextSmall>
+              )}
+            </>
+          )}
+        </span>
+      </UnstyledButton>
+    );
+  });
+
+Tab.displayName = 'Tab';

package/lib/components/Tabs/Tab/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Tab';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/Tabs/Tab/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Tabs/Tab/index.ts"],"names":[],"mappings":"AAAA,cAAc,OAAO,CAAC"}

package/lib/components/Tabs/Tab/index.ts

@@ -0,0 +1 @@
+export * from './Tab';

package/lib/components/Tabs/TabList/TabDropdown.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import type { AnchorType } from '../../ButtonDropdown';
+import type { MenuOption, MenuProps } from '../../Menu';
+import type { ElevationType } from '../../Tooltip';
+import type { TabProps } from '../Tab';
+type ClassNames = Readonly<{
+    wrapper?: string;
+}>;
+export type TabDropdownProps = {
+    anchorPosition?: AnchorType;
+    size?: 'medium' | 'small';
+    props?: {
+        tab: TabProps;
+        menu: MenuProps;
+    };
+    onOptionSelect?: (option: MenuOption, arg2?: React.SyntheticEvent<HTMLElement> | null | undefined) => unknown;
+    classNames?: ClassNames;
+    selected?: boolean;
+    disabled?: boolean;
+    elevation?: ElevationType;
+};
+export declare const TabDropdown: ({ anchorPosition, size, onOptionSelect, props, elevation, classNames, }: TabDropdownProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=TabDropdown.d.ts.map

package/lib/components/Tabs/TabList/TabDropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabDropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/Tabs/TabList/TabDropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAe/B,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,sBAAsB,CAAC;AACrD,OAAO,KAAK,EAAC,UAAU,EAAE,SAAS,EAAC,MAAM,YAAY,CAAC;AAEtD,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,eAAe,CAAC;AAEjD,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,QAAQ,CAAC;AAMrC,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC,CAAC;AAEH,MAAM,MAAM,gBAAgB,GAAG;IAC7B,cAAc,CAAC,EAAE,UAAU,CAAC;IAC5B,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC1B,KAAK,CAAC,EAAE;QACN,GAAG,EAAE,QAAQ,CAAC;QACd,IAAI,EAAE,SAAS,CAAC;KACjB,CAAC;IACF,cAAc,CAAC,EAAE,CACf,MAAM,EAAE,UAAU,EAClB,IAAI,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GAAG,IAAI,GAAG,SAAS,KACxD,OAAO,CAAC;IACb,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,aAAa,CAAC;CAC3B,CAAC;AAEF,eAAO,MAAM,WAAW,GACtB,yEAOG,gBAAgB,sBAqEpB,CAAC"}

package/lib/components/Tabs/TabList/TabDropdown.js

@@ -35,6 +35,7 @@ const TabDropdown = _ref => {
   } = (0, _react2.useFloating)({
     open: true,
     strategy: 'absolute',
+    // @ts-ignore - TS2322 - Type 'string' is not assignable to type 'Placement | undefined'.
     placement: anchorPosition,
     whileElementsMounted: _react2.autoUpdate,
     middleware: [(0, _react2.shift)(), (0, _react2.flip)(), (0, _react2.offset)(parseInt(_space.spaceXXSmall))]
@@ -51,7 +52,9 @@ const TabDropdown = _ref => {
       "data-testid": "TabDropdown",
       className: (0, _classify.classify)(_TabDropdownModule.default.tabDropdownContainer, classNames?.wrapper)
     }, /*#__PURE__*/React.createElement(_Tab.Tab, _extends({}, props?.tab, {
-      size: size,
+      size: size
+      // @ts-ignore - TS2322 - Type '((node: ReferenceType | null) => void) & ((node: ReferenceType | null) => void)' is not assignable to type '{ current: HTMLElement | null | undefined; }'.
+      ,
       ref: (0, _mergeRefs.mergeRefs)([refs.setReference, triggerRef]),
       onClick: e => {
         e.stopPropagation();
@@ -63,9 +66,12 @@ const TabDropdown = _ref => {
       }
     })), isOpen && props?.menu && /*#__PURE__*/React.createElement(_react2.FloatingPortal, null, /*#__PURE__*/React.createElement(_react2.FloatingFocusManager, {
       modal: false,
-      context: context,
+      context: context
+      // @ts-ignore - TS2322 - Type 'MutableRefObject<ReferenceType | null> & MutableRefObject<ReferenceType | null>' is not assignable to type 'number | MutableRefObject<HTMLElement | null> | undefined'.
+      ,
       initialFocus: refs.reference
     }, /*#__PURE__*/React.createElement("div", {
+      // @ts-ignore - TS2322 - Type '((node: HTMLElement | null) => void) & ((node: HTMLElement | null) => void)' is not assignable to type '{ current: HTMLElement | null | undefined; }'.
       ref: (0, _mergeRefs.mergeRefs)([refs.setFloating, boundaryRef]),
       className: _TabDropdownModule.default.menuWrapper,
       style: {

package/lib/components/Tabs/TabList/TabDropdown.tsx

@@ -0,0 +1,125 @@
+import * as React from 'react';
+import {
+  autoUpdate,
+  flip,
+  FloatingFocusManager,
+  FloatingPortal,
+  offset,
+  shift,
+  useFloating,
+} from '@floating-ui/react';
+
+import {spaceNone, spaceXXSmall} from '../../../styles/variables/_space';
+import {classify} from '../../../utils/classify';
+import {ClickAway} from '../../../utils/click-away';
+import {mergeRefs} from '../../../utils/merge-refs';
+import type {AnchorType} from '../../ButtonDropdown';
+import type {MenuOption, MenuProps} from '../../Menu';
+import {Menu} from '../../Menu';
+import type {ElevationType} from '../../Tooltip';
+import {getElevationValue} from '../../Tooltip';
+import type {TabProps} from '../Tab';
+import {Tab} from '../Tab';
+
+import css from './TabDropdown.module.css';
+
+
+type ClassNames = Readonly<{
+  wrapper?: string;
+}>;
+
+export type TabDropdownProps = {
+  anchorPosition?: AnchorType;
+  size?: 'medium' | 'small';
+  props?: {
+    tab: TabProps;
+    menu: MenuProps;
+  };
+  onOptionSelect?: (
+    option: MenuOption,
+    arg2?: React.SyntheticEvent<HTMLElement> | null | undefined,
+  ) => unknown;
+  classNames?: ClassNames;
+  selected?: boolean;
+  disabled?: boolean;
+  elevation?: ElevationType;
+};
+
+export const TabDropdown = (
+  {
+    anchorPosition = 'bottom-start',
+    size,
+    onOptionSelect,
+    props,
+    elevation = 'modal',
+    classNames,
+  }: TabDropdownProps,
+) => {
+  const {x, y, refs, strategy, context} = useFloating({
+    open: true,
+    strategy: 'absolute',
+// @ts-ignore - TS2322 - Type 'string' is not assignable to type 'Placement | undefined'.
+    placement: anchorPosition,
+    whileElementsMounted: autoUpdate,
+    middleware: [shift(), flip(), offset(parseInt(spaceXXSmall))],
+  });
+
+  return (
+    <ClickAway>
+      {({isOpen, onOpen, clickAway, boundaryRef, triggerRef}) => (
+        <div
+          data-testid="TabDropdown"
+          className={classify(css.tabDropdownContainer, classNames?.wrapper)}
+        >
+          <Tab
+            {...props?.tab}
+            size={size}
+// @ts-ignore - TS2322 - Type '((node: ReferenceType | null) => void) & ((node: ReferenceType | null) => void)' is not assignable to type '{ current: HTMLElement | null | undefined; }'.
+            ref={mergeRefs([refs.setReference, triggerRef])}
+            onClick={(e) => {
+              e.stopPropagation();
+              onOpen();
+            }}
+            classNames={{
+              wrapper: css.dotTabWrapper,
+              iconTextWrap: css.dotTextWrap,
+            }}
+          />
+          {isOpen && props?.menu && (
+            <FloatingPortal>
+              <FloatingFocusManager
+                modal={false}
+                context={context}
+// @ts-ignore - TS2322 - Type 'MutableRefObject<ReferenceType | null> & MutableRefObject<ReferenceType | null>' is not assignable to type 'number | MutableRefObject<HTMLElement | null> | undefined'.
+                initialFocus={refs.reference}
+              >
+                <div
+// @ts-ignore - TS2322 - Type '((node: HTMLElement | null) => void) & ((node: HTMLElement | null) => void)' is not assignable to type '{ current: HTMLElement | null | undefined; }'.
+                  ref={mergeRefs([refs.setFloating, boundaryRef])}
+                  className={css.menuWrapper}
+                  style={{
+                    display: 'flex',
+                    position: strategy,
+                    top: y ?? spaceNone,
+                    left: x ?? spaceNone,
+                    '--menu-elevation': getElevationValue(elevation),
+                  }}
+                >
+                  <Menu
+                    {...props.menu}
+                    onSelect={(option, e) => {
+                      onOptionSelect && onOptionSelect(option, e);
+                      clickAway();
+                    }}
+                    size={props.menu.size || size}
+                    onTabOut={clickAway}
+                  />
+                </div>
+              </FloatingFocusManager>
+            </FloatingPortal>
+          )}
+        </div>
+      )}
+    </ClickAway>
+  );
+};

package/lib/components/Tabs/TabList/TabList.d.ts

@@ -0,0 +1,24 @@
+import { Flow } from 'flow-to-typescript-codemod';
+import * as React from 'react';
+import type { ElevationType } from '../../Tooltip';
+type ClassNames = Readonly<{
+    wrapper?: string;
+}>;
+export type TabListProps = {
+    classNames?: ClassNames;
+    onSelect?: (arg1: {
+        tabId: string;
+        label?: string;
+    }) => unknown;
+    children?: React.ReactNode;
+    size?: 'medium';
+    selectedTab?: {
+        tabId: string;
+        label?: string;
+    };
+    menuWidth?: string;
+    elevation?: ElevationType;
+};
+export declare const TabList: Flow.AbstractComponent<TabListProps, HTMLDivElement>;
+export {};
+//# sourceMappingURL=TabList.d.ts.map

package/lib/components/Tabs/TabList/TabList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabList.d.ts","sourceRoot":"","sources":["../../../../src/components/Tabs/TabList/TabList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAEhD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,eAAe,CAAC;AAOjD,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC,CAAC;AAEH,MAAM,MAAM,YAAY,GAAG;IACzB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,CAAC,EAAE,CACT,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,KACE,OAAO,CAAC;IACb,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,WAAW,CAAC,EAAE;QACZ,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,aAAa,CAAC;CAC3B,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,IAAI,CAAC,iBAAiB,CAAC,YAAY,EAAE,cAAc,CA4IrE,CAAC"}

package/lib/components/Tabs/TabList/TabList.js

@@ -24,6 +24,7 @@ const TabList = exports.TabList = /*#__PURE__*/React.forwardRef((_ref, forwardRe
     elevation = 'modal'
   } = _ref;
   const ref = React.useRef(null);
+  // @ts-ignore - TS2322 - Type 'null' is not assignable to type 'HTMLDivElement'.
   React.useImperativeHandle(forwardRef, () => ref.current);
   const {
     width
@@ -33,6 +34,7 @@ const TabList = exports.TabList = /*#__PURE__*/React.forwardRef((_ref, forwardRe
     const childrenArray = React.Children.toArray(children);
     const totalChildCount = childrenArray.length;
     let tabListWidth = 0;
+    // @ts-ignore - TS2322 - Type 'MenuOption' is not assignable to type 'MenuOption'.
     const menuOptions = [];
     let nodes = [];
     const tabListNodes = [];
@@ -45,6 +47,7 @@ const TabList = exports.TabList = /*#__PURE__*/React.forwardRef((_ref, forwardRe
         disabled,
         iconName,
         iconType
+        // @ts-ignore - TS2339 - Property 'props' does not exist on type 'string | number | bigint | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<React.ReactNode> | ReactPortal | Promise<...>'.
       } = child.props;
       const widthInt = parseInt(width);
       tabListWidth = tabListWidth + widthInt;
@@ -52,7 +55,10 @@ const TabList = exports.TabList = /*#__PURE__*/React.forwardRef((_ref, forwardRe
         const childOnSelect = params => {
           onSelect && onSelect(params); // call the tab level onSelect
         };
-        tabListNodes.push(/*#__PURE__*/React.cloneElement(child, {
+        tabListNodes.push(
+        /*#__PURE__*/
+        // @ts-ignore - TS2769 - No overload matches this call.
+        React.cloneElement(child, {
           size,
           onSelect: childOnSelect,
           selectedTab
@@ -67,6 +73,8 @@ const TabList = exports.TabList = /*#__PURE__*/React.forwardRef((_ref, forwardRe
         });
       }
     }
+
+    // @ts-ignore - TS7031 - Binding element 'key' implicitly has an 'any' type. | TS7031 - Binding element 'label' implicitly has an 'any' type.
     const menuOnSelect = _ref2 => {
       let {
         key,
@@ -88,7 +96,9 @@ const TabList = exports.TabList = /*#__PURE__*/React.forwardRef((_ref, forwardRe
     })();
     const tabDropDownNode = menuOptions.length ? /*#__PURE__*/React.createElement(_TabDropdown.TabDropdown, {
       key: 'tabDropdown' + menuOptions.length,
-      size: size,
+      size: size
+      // @ts-ignore - TS2322 - Type '({ key, label }: { key: any; label: any; }) => void' is not assignable to type '(option: MenuOption, arg2?: SyntheticEvent<HTMLElement, Event> | null | undefined) => unknown'.
+      ,
       onOptionSelect: menuOnSelect,
       props: {
         tab: {
@@ -112,8 +122,11 @@ const TabList = exports.TabList = /*#__PURE__*/React.forwardRef((_ref, forwardRe
     return nodes;
   };
   React.useLayoutEffect(() => {
+    // @ts-ignore - TS2339 - Property 'offsetWidth' does not exist on type 'never'.
     if (ref.current && ref.current.offsetWidth) {
-      const availableContainerWidth = ref.current.offsetWidth - (parseInt(_size.size36) + parseInt(_space.spaceMedium));
+      const availableContainerWidth =
+      // @ts-ignore - TS2339 - Property 'offsetWidth' does not exist on type 'never'.
+      ref.current.offsetWidth - (parseInt(_size.size36) + parseInt(_space.spaceMedium));
       setContainerWidth(availableContainerWidth);
     }
     // it depends on width of the screen as ref.current.offsetWidth will not provide the events when changed.
@@ -123,6 +136,7 @@ const TabList = exports.TabList = /*#__PURE__*/React.forwardRef((_ref, forwardRe
     "data-testid": "Tabs",
     className: (0, _classify.classify)(_TabListModule.default.tabsContainer, {
       [_TabListModule.default.mediumSize]: size === 'medium',
+      // @ts-ignore - TS2367 - This condition will always return 'false' since the types '"medium" | undefined' and '"small"' have no overlap.
       [_TabListModule.default.smallSize]: size === 'small'
     }, classNames?.wrapper)
   }, containerWidth ? childrenWithProps() : null);