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

package/lib/components/InContextAlert/InContextAlert.stories.js

@@ -0,0 +1,184 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports._Dismissable = exports._Default = exports._Actionable = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _common = require("../../types/common");
+var _InContextAlert = require("./InContextAlert");
+var _InContextAlertStoriesModule = _interopRequireDefault(require("./InContextAlert.stories.module.css"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const semanticOptions = [...Object.values(_common.ALERT_SEMANTIC)];
+var _default = exports.default = {
+  tags: ['autodocs'],
+  title: 'Components/In-Context Alert',
+  argTypes: {
+    actionText: {
+      name: 'actionText',
+      description: 'Action text to be displayed on **right** of Alert',
+      control: {
+        type: 'text'
+      },
+      table: {
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    onAction: {
+      name: 'onAction',
+      action: 'Action Click',
+      description: 'Callback function for action text click',
+      type: {
+        summary: '(SyntheticEvent<HTMLElement>) => mixed'
+      }
+    },
+    semantic: {
+      options: semanticOptions,
+      description: 'Semantic type of In-Context Alert. It will have different Icon and background color for different semantic type',
+      control: {
+        type: 'select'
+      },
+      table: {
+        type: {
+          summary: 'enum'
+        },
+        defaultValue: {
+          summary: _common.ALERT_SEMANTIC.neutral
+        }
+      }
+    },
+    onCloseClick: {
+      name: 'onCloseClick',
+      action: 'Close Click',
+      description: 'Callback function for dismissable alert',
+      type: {
+        summary: '(SyntheticEvent<HTMLElement>) => mixed'
+      }
+    },
+    dismissable: {
+      description: 'Close Icon will appear in right side in case it is true',
+      name: 'dismissable',
+      options: [false, true],
+      control: 'boolean',
+      table: {
+        type: {
+          summary: 'boolean'
+        },
+        defaultValue: {
+          summary: false
+        }
+      }
+    },
+    selfDismiss: {
+      description: `This prop is valid only in case dismissable is true.
+      It handles whether the dismissal should be handled by the component or it will just pass callback onclick of closeIcon and dismissal will be handled externally`,
+      name: 'selfDismiss',
+      options: [false, true],
+      control: 'boolean',
+      table: {
+        type: {
+          summary: 'boolean'
+        },
+        defaultValue: {
+          summary: false
+        }
+      }
+    },
+    leftIconName: {
+      name: 'leftIconName',
+      control: {
+        type: 'text'
+      },
+      description: 'Custom left icon. This overrides the default semantic icon',
+      table: {
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    leftIconType: {
+      description: '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'
+        }
+      }
+    },
+    children: {
+      description: 'Pass the alert message text as children',
+      table: {
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    classNames: {
+      description: 'Provide an optional className to be applied to the wrapper, alertText',
+      control: {
+        type: 'object'
+      },
+      table: {
+        type: {
+          summary: '{wrapper?: string, alertText?: string, actionContainer?: string, icon?: string}'
+        }
+      }
+    }
+  },
+  parameters: {
+    docs: {
+      subtitle: 'Generates a In-Context Alert component',
+      description: {
+        component: `
+\`\`\`js
+import { InContextAlert } from "@spaced-out/ui-design-system/lib/components/InContextAlert";
+\`\`\`
+Use In-Context Alert component to show alert message of different semantics like - success, warning etc. It will take width of the container
+and will show only two lines of text. Post that it will get truncated. As there is no way for user to see the truncated message, it is recommended
+to use it for messages up to two lines only or add a tooltip along with it for showcasing complete message.
+        `
+      }
+    },
+    storySource: {
+      componentPath: '/src/components/InContextAlert/InContextAlert.jsx'
+    }
+  }
+};
+const _Default = args => /*#__PURE__*/React.createElement("div", {
+  className: _InContextAlertStoriesModule.default.storyContainer
+}, /*#__PURE__*/React.createElement(_InContextAlert.InContextAlert, args));
+exports._Default = _Default;
+_Default.args = {
+  children: 'The quick brown fox jumps over the lazy dog is an English-language pangram—a sentence that contains all the letters of the alphabet. The phrase is commonly used for touch-typing practice, testing typewriters and computer keyboards, displaying examples of fonts, and other applications involving text where the use of all letters in the alphabet is desired.',
+  semantic: 'neutral',
+  leftIconName: 'envelope'
+};
+const _Dismissable = args => /*#__PURE__*/React.createElement("div", {
+  className: _InContextAlertStoriesModule.default.storyContainer
+}, /*#__PURE__*/React.createElement(_InContextAlert.InContextAlert, args));
+exports._Dismissable = _Dismissable;
+_Dismissable.args = {
+  children: 'The quick brown fox jumps over the lazy dog is an English-language pangram—a sentence that contains all the letters of the alphabet. The phrase is commonly used for touch-typing practice, testing typewriters and computer keyboards, displaying examples of fonts, and other applications involving text where the use of all letters in the alphabet is desired.',
+  semantic: 'neutral',
+  dismissable: true,
+  selfDismiss: false,
+  leftIconName: 'house'
+};
+const _Actionable = args => /*#__PURE__*/React.createElement("div", {
+  className: _InContextAlertStoriesModule.default.storyContainer
+}, /*#__PURE__*/React.createElement(_InContextAlert.InContextAlert, args));
+exports._Actionable = _Actionable;
+_Actionable.args = {
+  children: 'Message could not be delivered',
+  semantic: 'danger',
+  actionText: 'Resend'
+};

package/lib/components/InContextAlert/InContextAlert.stories.tsx

@@ -0,0 +1,164 @@
+import * as React from 'react';
+
+import {ALERT_SEMANTIC} from '../../types/common';
+
+import type {InContextAlertProps} from './InContextAlert';
+import {InContextAlert} from './InContextAlert';
+
+import css from './InContextAlert.stories.module.css';
+
+
+const semanticOptions: Array<unknown> = [...Object.values(ALERT_SEMANTIC)];
+
+export default {
+  tags: ['autodocs'],
+  title: 'Components/In-Context Alert',
+  argTypes: {
+    actionText: {
+      name: 'actionText',
+      description: 'Action text to be displayed on **right** of Alert',
+      control: {
+        type: 'text',
+      },
+      table: {
+        type: {summary: 'string'},
+      },
+    },
+    onAction: {
+      name: 'onAction',
+      action: 'Action Click',
+      description: 'Callback function for action text click',
+      type: {summary: '(SyntheticEvent<HTMLElement>) => mixed'},
+    },
+    semantic: {
+      options: semanticOptions,
+      description:
+        'Semantic type of In-Context Alert. It will have different Icon and background color for different semantic type',
+      control: {
+        type: 'select',
+      },
+      table: {
+        type: {summary: 'enum'},
+        defaultValue: {summary: ALERT_SEMANTIC.neutral},
+      },
+    },
+    onCloseClick: {
+      name: 'onCloseClick',
+      action: 'Close Click',
+      description: 'Callback function for dismissable alert',
+      type: {summary: '(SyntheticEvent<HTMLElement>) => mixed'},
+    },
+    dismissable: {
+      description: 'Close Icon will appear in right side in case it is true',
+      name: 'dismissable',
+      options: [false, true],
+      control: 'boolean',
+      table: {
+        type: {summary: 'boolean'},
+        defaultValue: {summary: false},
+      },
+    },
+    selfDismiss: {
+      description: `This prop is valid only in case dismissable is true.
+      It handles whether the dismissal should be handled by the component or it will just pass callback onclick of closeIcon and dismissal will be handled externally`,
+      name: 'selfDismiss',
+      options: [false, true],
+      control: 'boolean',
+      table: {
+        type: {summary: 'boolean'},
+        defaultValue: {summary: false},
+      },
+    },
+    leftIconName: {
+      name: 'leftIconName',
+      control: {
+        type: 'text',
+      },
+      description: 'Custom left icon. This overrides the default semantic icon',
+      table: {
+        type: {summary: 'string'},
+      },
+    },
+    leftIconType: {
+      description:
+        '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'},
+      },
+    },
+    children: {
+      description: 'Pass the alert message text as children',
+      table: {
+        type: {summary: 'string'},
+      },
+    },
+    classNames: {
+      description:
+        'Provide an optional className to be applied to the wrapper, alertText',
+      control: {
+        type: 'object',
+      },
+      table: {
+        type: {
+          summary:
+            '{wrapper?: string, alertText?: string, actionContainer?: string, icon?: string}',
+        },
+      },
+    },
+  },
+  parameters: {
+    docs: {
+      subtitle: 'Generates a In-Context Alert component',
+      description: {
+        component: `
+\`\`\`js
+import { InContextAlert } from "@spaced-out/ui-design-system/lib/components/InContextAlert";
+\`\`\`
+Use In-Context Alert component to show alert message of different semantics like - success, warning etc. It will take width of the container
+and will show only two lines of text. Post that it will get truncated. As there is no way for user to see the truncated message, it is recommended
+to use it for messages up to two lines only or add a tooltip along with it for showcasing complete message.
+        `,
+      },
+    },
+    storySource: {
+      componentPath: '/src/components/InContextAlert/InContextAlert.jsx',
+    },
+  },
+};
+
+export const _Default = (args: InContextAlertProps) => (<div className={css.storyContainer}>
+  <InContextAlert {...args} />
+</div>);
+
+_Default.args = {
+  children:
+    'The quick brown fox jumps over the lazy dog is an English-language pangram—a sentence that contains all the letters of the alphabet. The phrase is commonly used for touch-typing practice, testing typewriters and computer keyboards, displaying examples of fonts, and other applications involving text where the use of all letters in the alphabet is desired.',
+  semantic: 'neutral',
+  leftIconName: 'envelope',
+};
+
+export const _Dismissable = (args: InContextAlertProps) => (<div className={css.storyContainer}>
+  <InContextAlert {...args} />
+</div>);
+
+_Dismissable.args = {
+  children:
+    'The quick brown fox jumps over the lazy dog is an English-language pangram—a sentence that contains all the letters of the alphabet. The phrase is commonly used for touch-typing practice, testing typewriters and computer keyboards, displaying examples of fonts, and other applications involving text where the use of all letters in the alphabet is desired.',
+  semantic: 'neutral',
+  dismissable: true,
+  selfDismiss: false,
+  leftIconName: 'house',
+};
+
+export const _Actionable = (args: InContextAlertProps) => (<div className={css.storyContainer}>
+  <InContextAlert {...args} />
+</div>);
+
+_Actionable.args = {
+  children: 'Message could not be delivered',
+  semantic: 'danger',
+  actionText: 'Resend',
+};

package/lib/components/InContextAlert/InContextAlert.tsx

@@ -0,0 +1,204 @@
+import {Flow} from 'flow-to-typescript-codemod';
+
+import * as React from 'react';
+
+import type {AlertSemanticType} from '../../types/common';
+import {ALERT_SEMANTIC} from '../../types/common';
+import {TEXT_COLORS} from '../../types/typography';
+import {classify} from '../../utils/classify';
+import type {IconType} from '../Icon';
+import {ClickableIcon, Icon} from '../Icon';
+import {Link} from '../Link';
+import {SubTitleExtraSmall} from '../Text';
+import {Truncate} from '../Truncate';
+
+import css from './InContextAlert.module.css';
+
+
+type ClassNames = Readonly<{
+  wrapper?: string;
+  alertText?: string;
+  actionContainer?: string;
+  icon?: string;
+}>;
+
+type InContextAlertBaseProps = ({
+  classNames?: ClassNames;
+} & ({
+  dismissable: true;
+  onCloseClick?: ((arg1: React.SyntheticEvent<HTMLElement>) => unknown) | null | undefined;
+  selfDismiss?: boolean;
+} | {
+  dismissable?: false;
+}) & {
+  children?: string;
+  actionText?: string;
+  onAction?: ((arg1: React.SyntheticEvent<HTMLElement>) => unknown) | null | undefined;
+});
+
+export type InContextAlertProps = ((InContextAlertBaseProps) & {
+  semantic?: AlertSemanticType;
+  leftIconName?: string;
+  leftIconType?: IconType;
+});
+
+const AlertIcon = ({
+  semantic,
+  leftIconName,
+  leftIconType,
+  iconClassName,
+}: {
+  semantic: AlertSemanticType;
+  leftIconName: string;
+  leftIconType?: IconType;
+  iconClassName?: string;
+}) => {
+  switch (semantic) {
+  case ALERT_SEMANTIC.neutral:
+    return (
+      <Icon
+        color={TEXT_COLORS.neutral}
+        name={leftIconName ? leftIconName : 'face-smile'}
+        size="small"
+        type={leftIconType}
+        className={iconClassName}
+      />
+    );
+  case ALERT_SEMANTIC.success:
+    return (
+      <Icon
+        name={leftIconName ? leftIconName : 'circle-check'}
+        size="small"
+        color={TEXT_COLORS.success}
+        type={leftIconType}
+        className={iconClassName}
+      />
+    );
+
+  case ALERT_SEMANTIC.information:
+    return (
+      <Icon
+        name={leftIconName ? leftIconName : 'circle-info'}
+        size="small"
+        color={TEXT_COLORS.information}
+        type={leftIconType}
+        className={iconClassName}
+      />
+    );
+
+  case ALERT_SEMANTIC.warning:
+    return (
+      <Icon
+        name={leftIconName ? leftIconName : 'circle-exclamation'}
+        size="small"
+        color={TEXT_COLORS.warning}
+        type={leftIconType}
+        className={iconClassName}
+      />
+    );
+
+  case ALERT_SEMANTIC.danger:
+    return (
+      <Icon
+        name={leftIconName ? leftIconName : 'shield-exclamation'}
+        size="small"
+        color={TEXT_COLORS.danger}
+        type={leftIconType}
+        className={iconClassName}
+      />
+    );
+
+  default:
+    return (
+      <Icon
+        color={TEXT_COLORS.neutral}
+        name={leftIconName ? leftIconName : 'face-smile'}
+        size="small"
+        type={leftIconType}
+        className={iconClassName}
+      />
+    );
+  }
+};
+
+export const InContextAlert: Flow.AbstractComponent<InContextAlertProps, HTMLDivElement> = React.forwardRef<HTMLDivElement, InContextAlertProps>((props: InContextAlertProps, ref) => {
+  const {
+    classNames,
+    semantic = ALERT_SEMANTIC.neutral,
+    dismissable,
+    children,
+// @ts-ignore - TS2339 - Property 'selfDismiss' does not exist on type 'InContextAlertProps'.
+    selfDismiss = false,
+    leftIconName = '',
+// @ts-ignore - TS2339 - Property 'onCloseClick' does not exist on type 'InContextAlertProps'.
+    onCloseClick,
+    actionText = '',
+    onAction,
+    leftIconType,
+  } = props;
+  const [dismissed, setDismissed] = React.useState(false);
+  const closeClickHandler = (e: React.SyntheticEvent<HTMLElement>) => {
+    onCloseClick && onCloseClick(e);
+    selfDismiss && setDismissed(true);
+  };
+
+  return (
+    <>
+      {!dismissed && (
+        <div
+          className={classify(
+            css.alertContainer,
+            {
+              [css.neutral]: semantic === ALERT_SEMANTIC.neutral,
+              [css.success]: semantic === ALERT_SEMANTIC.success,
+              [css.information]: semantic === ALERT_SEMANTIC.information,
+              [css.warning]: semantic === ALERT_SEMANTIC.warning,
+              [css.danger]: semantic === ALERT_SEMANTIC.danger,
+            },
+            classNames?.wrapper,
+          )}
+          ref={ref}
+        >
+          <AlertIcon
+            semantic={semantic}
+            leftIconName={leftIconName}
+            leftIconType={leftIconType}
+            iconClassName={classNames?.icon}
+          />
+          {React.Children.count(children) > 0 && (
+            <SubTitleExtraSmall className={classify(classNames?.alertText)}>
+              <Truncate line={2} wordBreak="initial">
+                {children}
+              </Truncate>
+            </SubTitleExtraSmall>
+          )}
+          {!!(actionText || dismissable) && (
+            <div
+              className={classify(
+                css.actionContainer,
+                classNames?.actionContainer,
+              )}
+            >
+              {!!actionText && (
+                <Link onClick={onAction} color="primary">
+                  {actionText}
+                </Link>
+              )}
+              {!!dismissable && (
+                <ClickableIcon
+                  color={TEXT_COLORS.primary}
+                  ariaLabel="close"
+                  name="close"
+                  size="small"
+                  type="regular"
+                  onClick={closeClickHandler}
+                  className={css.closeIcon}
+                />
+              )}
+            </div>
+          )}
+        </div>
+      )}
+    </>
+  );
+});

package/lib/components/InContextAlert/index.d.ts

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

package/lib/components/InContextAlert/index.d.ts.map

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

package/lib/components/InContextAlert/index.ts

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

package/lib/components/InfinitePagination/InfinitePagination.d.ts

@@ -0,0 +1,26 @@
+import { Flow } from 'flow-to-typescript-codemod';
+import * as React from 'react';
+import type { GenericObject } from '../Table';
+type ClassNames = Readonly<{
+    wrapper?: string;
+}>;
+export type InfinitePaginationProps = ({
+    items: Array<GenericObject>;
+    width: string;
+    threshold?: number;
+    classNames?: ClassNames;
+    renderItem: (item: GenericObject, index: number) => React.ReactNode;
+    getItemKey?: (item: GenericObject, index: number) => string | number;
+    hasNextPage: boolean;
+    loadMoreItems: () => Promise<void>;
+} & // to make Flow happy with the disjoint union isVariableSizeList is a mandatory prop
+({
+    itemSize: (index: number) => number;
+    isVariableSizeList: true;
+} | {
+    itemSize: number;
+    isVariableSizeList?: false;
+}));
+export declare const InfinitePagination: Flow.AbstractComponent<InfinitePaginationProps, HTMLDivElement>;
+export {};
+//# sourceMappingURL=InfinitePagination.d.ts.map

package/lib/components/InfinitePagination/InfinitePagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InfinitePagination.d.ts","sourceRoot":"","sources":["../../../src/components/InfinitePagination/InfinitePagination.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAChD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,UAAU,CAAC;AAK5C,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC,CAAC;AAIH,MAAM,MAAM,uBAAuB,GAAG,CAAC;IACrC,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,UAAU,EAAE,CAAC,IAAI,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IACpE,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,MAAM,CAAC;IACrE,WAAW,EAAE,OAAO,CAAC;IACrB,aAAa,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CACpC,GAAG,oFAAoF;AACxF,CAAC;IACC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACpC,kBAAkB,EAAE,IAAI,CAAC;CAC1B,GAAG;IACF,QAAQ,EAAE,MAAM,CAAC;IACjB,kBAAkB,CAAC,EAAE,KAAK,CAAC;CAC5B,CAAC,CAAC,CAAC;AAEJ,eAAO,MAAM,kBAAkB,EAAE,IAAI,CAAC,iBAAiB,CAAC,uBAAuB,EAAE,cAAc,CAmF7F,CAAC"}

package/lib/components/InfinitePagination/InfinitePagination.js

@@ -13,7 +13,6 @@ var _CircularLoader = require("../CircularLoader");
 var _InfinitePaginationModule = _interopRequireDefault(require("./InfinitePagination.module.css"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-// $FlowFixMe[nonstrict-import]
 const DEFAULT_THRESHOLD = 200;
 const InfinitePagination = exports.InfinitePagination = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
@@ -32,9 +31,12 @@ const InfinitePagination = exports.InfinitePagination = /*#__PURE__*/React.forwa
   const itemsLength = items.length;
   const totalItemsCount = itemsLength + (hasNextPage ? 1 : 0);
   const [containerRef, containerHeight] = (0, _hooks.useResizeObserver)();
+
+  // @ts-ignore - TS2322 - Type 'null' is not assignable to type 'HTMLDivElement'.
   React.useImperativeHandle(ref, () => listRef.current);
   React.useEffect(() => {
     if (listRef.current) {
+      // @ts-ignore - TS2339 - Property 'scrollToItem' does not exist on type 'never'.
       listRef.current.scrollToItem(0);
     }
   }, [itemsLength === 0]);
@@ -47,6 +49,8 @@ const InfinitePagination = exports.InfinitePagination = /*#__PURE__*/React.forwa
     containerHeight,
     isVariableSizeList
   });
+
+  // @ts-ignore - TS7031 - Binding element 'index' implicitly has an 'any' type. | TS7031 - Binding element 'style' implicitly has an 'any' type.
   const Row = _ref => {
     let {
       index,
@@ -62,9 +66,12 @@ const InfinitePagination = exports.InfinitePagination = /*#__PURE__*/React.forwa
       className: _InfinitePaginationModule.default.listRow
     }, renderItem(items[index], index));
   };
-  const itemKey = React.useCallback(index => index === itemsLength ? 'loading-indicator' : getItemKey ? getItemKey(items[index], index) : index, [items, getItemKey]);
+  const itemKey = React.useCallback(
+  // @ts-ignore - TS7006 - Parameter 'index' implicitly has an 'any' type.
+  index => index === itemsLength ? 'loading-indicator' : getItemKey ? getItemKey(items[index], index) : index, [items, getItemKey]);
   const ListComponent = isVariableSizeList ? _reactWindow.VariableSizeList : _reactWindow.FixedSizeList;
   return /*#__PURE__*/React.createElement("div", {
+    // @ts-ignore - TS2322 - Type 'Ref<"div">' is not assignable to type 'Ref<HTMLDivElement> | undefined'.
     ref: containerRef,
     "data-testid": "InfinitePagination",
     className: (0, _classify.default)(_InfinitePaginationModule.default.wrapper, classNames?.wrapper)