@skbkontur/react-ui 0.0.0-0b8a8f7a39 → 0.0.0-0fe669bb2d

package/lib/utils.d.ts

@@ -4,14 +4,19 @@ export declare type Defaultize<P, D> = P extends any ? string extends keyof P ?
 export declare type DefaultizeProps<C, P> = C extends {
     defaultProps: infer D;
 } ? Defaultize<P, D> : P;
+export declare type AnyObject = Record<string, unknown>;
 export declare const delay: (ms: number) => Promise<unknown>;
 export declare const emptyHandler: () => void;
 export declare class CancelationError extends Error {
     code: string;
 }
 export declare function taskWithDelay(task: () => void, ms: number): () => void;
-export declare function isFunction<T>(x: T | Function): x is Function;
+export declare type FunctionWithParams<R = any> = (...args: any[]) => R;
+export declare function isFunction<T>(x: T | FunctionWithParams): x is FunctionWithParams;
 export declare function isFunctionalComponent(Component: ReactComponentLike): boolean;
+export declare function isClassComponent(Component: ReactComponentLike): boolean;
+export declare function isIntrinsicElement(element: React.ReactElement): boolean;
+export declare function isRefableElement(element: React.ReactElement): boolean;
 export declare function escapeRegExpSpecChars(s: string): string;
 export declare const getRandomID: () => string;
 export declare const isExternalLink: (link: string) => boolean;
@@ -19,3 +24,58 @@ export declare const isExternalLink: (link: string) => boolean;
  * Check if the given ReactNode is an element of the specified ReactUI component
  */
 export declare const isReactUINode: (componentName: string, node: React.ReactNode) => boolean;
+export declare const formatBytes: (bytes: number, decimals?: number) => string | null;
+/**
+ * Проверяет, не является ли переданный аргумент null или undefined и исключает типы null и undefined из типа аргумента
+ *
+ * @param value Значение, которое нужно проверить и исключить из него типы
+ * @returns Возвращает true, если переданный аргумент не является null или undefined иначе false
+ */
+export declare const isNonNullable: <T>(value: T) => value is NonNullable<T>;
+/**
+ * Checks if the value `null` or `undefined`.
+ *
+ * @param value Value to check for `null` and `undefined`.
+ * @returns Returns `true` if `value` is `null` or `undefined`, else `false`.
+ */
+export declare const isNullable: <T>(value: T) => value is null | undefined;
+/**
+ * Creates a function that checks if the given `child`
+ * is an instance of some component specified by `name`.
+ *
+ * @param name Component name for which function will be created.
+ * @returns A function that checks if the given `child` is an instance of the component specified by `name`.
+ */
+export declare const isReactUIComponent: <P = any>(name: string) => (child: React.ReactNode) => child is React.ReactElement<P, string | React.JSXElementConstructor<any>>;
+/**
+ * Merges two or more refs into one.
+ *
+ * @param refs Array of refs.
+ * @returns A single ref composing all the refs passed.
+ *
+ * @example
+ * const SomeComponent = forwardRef((props, ref) => {
+ *  const localRef = useRef();
+ *
+ *  return <div ref={mergeRefs([localRef, ref])} />;
+ * });
+ */
+export declare function mergeRefs<T = any>(refs: Array<React.MutableRefObject<T> | React.LegacyRef<T>>): React.RefCallback<T>;
+/**
+ * Extracts all data attributes from props and returns them as well as props.
+ *
+ * @param props Props object to extract data attributes from.
+ * @returns Separated data attributes and all other props.
+ */
+export declare const extractDataProps: <T>(props: T) => {
+    dataProps: Record<string, any>;
+    restWithoutDataProps: Record<string, any>;
+};
+/**
+ * Basically `.startsWith` for arrays.
+ *
+ * @param searchKeys Array of strings to test against `inputString`.
+ * @param inputString String on which search will be performed.
+ * @returns `true` if `inputString` starts with one of keys, else `false`.
+ */
+export declare const startsWithOneOf: (searchKeys: string[], inputString: string) => boolean;

package/lib/withClassWrapper/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../cjs/lib/withClassWrapper.js",
+  "module": "withClassWrapper",
+  "types": "../withClassWrapper.d.ts",
+  "sideEffects": false
+}

package/lib/withClassWrapper/withClassWrapper.js

@@ -0,0 +1,67 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+import React from 'react';
+import { getDisplayName } from "../getDisplayName";
+
+var removePostfix = function removePostfix(word, postfixRegex) {
+  var regexContent = postfixRegex.source.replace(/\$$/, '');
+  var isCorrectPostfix = postfixRegex.test(word);
+
+  if (!isCorrectPostfix) {
+    throw new Error("Component's displayName property must end with '" + regexContent + "' in order to be wrapped in withClassWrapper HOC");
+  }
+
+  return word.replace(postfixRegex, '');
+};
+/**
+ * HOC for moving from Class to Functional components.
+ *
+ * Used to remove distinctions between Class and Functional refs.
+ *
+ * @param RFC Functional component wrapped in forwardRefAndName.
+ * @returns Class component that wraps Functional component.
+ */
+
+
+export function withClassWrapper(RFC) {
+  var _class, _temp;
+
+  var fullName = getDisplayName(RFC);
+  var nameWithoutPostfix = removePostfix(fullName, /FC$/);
+  return _temp = _class = /*#__PURE__*/function (_React$Component) {
+    _inheritsLoose(ClassWrapper, _React$Component);
+
+    function ClassWrapper() {
+      var _this;
+
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+
+      _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+      _this.instancePropertiesRef = /*#__PURE__*/React.createRef();
+      return _this;
+    }
+
+    var _proto = ClassWrapper.prototype;
+
+    _proto.componentDidMount = function componentDidMount() {
+      if (this.instancePropertiesRef.current) {
+        Object.defineProperties(this, Object.getOwnPropertyDescriptors(this.instancePropertiesRef.current));
+      }
+    };
+
+    _proto.render = function render() {
+      return (
+        /*#__PURE__*/
+        // @ts-expect-error: TypeScript is not able to understand that both types (class one and functional one) have ref.
+        React.createElement(ClassWrapper.FC, _extends({
+          // Returns methods defined in useImperativeHandle.
+          instanceRef: this.instancePropertiesRef
+        }, this.props))
+      );
+    };
+
+    return ClassWrapper;
+  }(React.Component), _class.__KONTUR_REACT_UI__ = nameWithoutPostfix, _class.displayName = nameWithoutPostfix, _class.FC = RFC, _temp;
+}

package/lib/withClassWrapper/withClassWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["withClassWrapper.tsx"],"names":["React","getDisplayName","removePostfix","word","postfixRegex","regexContent","source","replace","isCorrectPostfix","test","Error","withClassWrapper","RFC","fullName","nameWithoutPostfix","instancePropertiesRef","createRef","componentDidMount","current","Object","defineProperties","getOwnPropertyDescriptors","render","props","Component","__KONTUR_REACT_UI__","displayName","FC"],"mappings":"gIAAA,OAAOA,KAAP,MAAkB,OAAlB;;;AAGA,SAASC,cAAT,QAA+B,kBAA/B;;AAEA,IAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAACC,IAAD,EAAeC,YAAf,EAAwC;AAC5D,MAAMC,YAAY,GAAGD,YAAY,CAACE,MAAb,CAAoBC,OAApB,CAA4B,KAA5B,EAAmC,EAAnC,CAArB;;AAEA,MAAMC,gBAAgB,GAAGJ,YAAY,CAACK,IAAb,CAAkBN,IAAlB,CAAzB;AACA,MAAI,CAACK,gBAAL,EAAuB;AACrB,UAAM,IAAIE,KAAJ;AAC+CL,IAAAA,YAD/C,sDAAN;;AAGD;;AAED,SAAOF,IAAI,CAACI,OAAL,CAAaH,YAAb,EAA2B,EAA3B,CAAP;AACD,CAXD;;AAaA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASO,gBAAT,CAAgCC,GAAhC,EAAoE;AACzE,MAAMC,QAAQ,GAAGZ,cAAc,CAACW,GAAD,CAA/B;AACA,MAAME,kBAAkB,GAAGZ,aAAa,CAACW,QAAD,EAAW,KAAX,CAAxC;;AAEA;AACSE,MAAAA,qBADT,gBACiCf,KAAK,CAACgB,SAAN,EADjC;;AAGEC,IAAAA,iBAHF,GAGE,6BAAoB;AAClB,UAAI,KAAKF,qBAAL,CAA2BG,OAA/B,EAAwC;AACtCC,QAAAA,MAAM,CAACC,gBAAP,CAAwB,IAAxB,EAA8BD,MAAM,CAACE,yBAAP,CAAiC,KAAKN,qBAAL,CAA2BG,OAA5D,CAA9B;AACD;AACF,KAPH;;;;;;;AAcEI,IAAAA,MAdF,GAcE,kBAAS;AACP;AACE;AACA,4BAAC,YAAD,CAAc,EAAd;AACE;AACA,UAAA,WAAW,EAAE,KAAKP,qBAFpB;AAGM,aAAKQ,KAHX,EAFF;;;AAQD,KAvBH,uBAAkCvB,KAAK,CAACwB,SAAxC,UASgBC,mBAThB,GASsCX,kBATtC,SAUgBY,WAVhB,GAU8BZ,kBAV9B,SAYgBa,EAZhB,GAYqBf,GAZrB;;AAyBD","sourcesContent":["import React from 'react';\n\nimport { ReactUIComponentWithRef } from './forwardRefAndName';\nimport { getDisplayName } from './getDisplayName';\n\nconst removePostfix = (word: string, postfixRegex: RegExp) => {\n  const regexContent = postfixRegex.source.replace(/\\$$/, '');\n\n  const isCorrectPostfix = postfixRegex.test(word);\n  if (!isCorrectPostfix) {\n    throw new Error(\n      `Component's displayName property must end with '${regexContent}' in order to be wrapped in withClassWrapper HOC`,\n    );\n  }\n\n  return word.replace(postfixRegex, '');\n};\n\n/**\n * HOC for moving from Class to Functional components.\n *\n * Used to remove distinctions between Class and Functional refs.\n *\n * @param RFC Functional component wrapped in forwardRefAndName.\n * @returns Class component that wraps Functional component.\n */\nexport function withClassWrapper<T, P>(RFC: ReactUIComponentWithRef<T, P>) {\n  const fullName = getDisplayName(RFC);\n  const nameWithoutPostfix = removePostfix(fullName, /FC$/);\n\n  return class ClassWrapper extends React.Component<P> {\n    public instancePropertiesRef = React.createRef<T>();\n\n    componentDidMount() {\n      if (this.instancePropertiesRef.current) {\n        Object.defineProperties(this, Object.getOwnPropertyDescriptors(this.instancePropertiesRef.current));\n      }\n    }\n\n    public static __KONTUR_REACT_UI__ = nameWithoutPostfix;\n    public static displayName = nameWithoutPostfix;\n\n    public static FC = RFC;\n\n    render() {\n      return (\n        // @ts-expect-error: TypeScript is not able to understand that both types (class one and functional one) have ref.\n        <ClassWrapper.FC\n          // Returns methods defined in useImperativeHandle.\n          instanceRef={this.instancePropertiesRef}\n          {...this.props}\n        />\n      );\n    }\n  };\n}\n\nexport interface InstanceRefType<T> {\n  instanceRef: React.MutableRefObject<T>;\n}\n"]}

package/lib/withClassWrapper.d.ts

@@ -0,0 +1,71 @@
+import React from 'react';
+import { ReactUIComponentWithRef } from './forwardRefAndName';
+/**
+ * HOC for moving from Class to Functional components.
+ *
+ * Used to remove distinctions between Class and Functional refs.
+ *
+ * @param RFC Functional component wrapped in forwardRefAndName.
+ * @returns Class component that wraps Functional component.
+ */
+export declare function withClassWrapper<T, P>(RFC: ReactUIComponentWithRef<T, P>): {
+    new (props: P | Readonly<P>): {
+        instancePropertiesRef: React.RefObject<T>;
+        componentDidMount(): void;
+        render(): JSX.Element;
+        context: any;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<P>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<P> & Readonly<{
+            children?: React.ReactNode;
+        }>;
+        state: Readonly<{}>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        shouldComponentUpdate?(nextProps: Readonly<P>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<P>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<P>, prevState: Readonly<{}>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<P>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<P>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<P>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<P>, nextState: Readonly<{}>, nextContext: any): void;
+    };
+    new (props: P, context: any): {
+        instancePropertiesRef: React.RefObject<T>;
+        componentDidMount(): void;
+        render(): JSX.Element;
+        context: any;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<P>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<P> & Readonly<{
+            children?: React.ReactNode;
+        }>;
+        state: Readonly<{}>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        shouldComponentUpdate?(nextProps: Readonly<P>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<P>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<P>, prevState: Readonly<{}>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<P>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<P>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<P>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<P>, nextState: Readonly<{}>, nextContext: any): void;
+    };
+    __KONTUR_REACT_UI__: string;
+    displayName: string;
+    FC: ReactUIComponentWithRef<T, P>;
+    contextType?: React.Context<any> | undefined;
+};
+export interface InstanceRefType<T> {
+    instanceRef: React.MutableRefObject<T>;
+}

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@skbkontur/react-ui",
-  "version": "0.0.0-0b8a8f7a39",
+  "version": "0.0.0-0fe669bb2d",
   "description": "UI Components",
   "main": "cjs/index.js",
   "module": "index.js",
   "sideEffects": false,
-  "homepage": "https://tech.skbkontur.ru/react-ui/unstable/0.0.0-0b8a8f7a39/",
+  "homepage": "https://tech.skbkontur.ru/react-ui/unstable/0.0.0-0fe669bb2d/",
   "repository": {
     "type": "git",
     "url": "git@github.com:skbkontur/retail-ui.git"
@@ -26,145 +26,131 @@
     "predeploy": "rimraf .styleguide/deploy && yarn run styleguide:build",
     "deploy": "gh-pages -a -d .styleguide/deploy -r git@github.com:skbkontur/react-ui.git",
     "storybook": "start-storybook -p 6060",
-    "storybook:old": "cross-env STORYBOOK_OLD=true start-storybook -p 6060",
-    "storybook:flat": "cross-env STORYBOOK_FLAT=true start-storybook -p 6060",
-    "storybook:flatOld": "cross-env STORYBOOK_FLAT_OLD=true start-storybook -p 6060",
-    "storybook:build": "run-s storybook:build:*",
-    "storybook:build:default": "cross-env NODE_ENV=test build-storybook -o .storybook/build/default",
-    "storybook:build:defaultOld": "cross-env NODE_ENV=test STORYBOOK_OLD=true build-storybook -o .storybook/build/defaultOld",
-    "storybook:build:flat": "cross-env NODE_ENV=test STORYBOOK_FLAT=true build-storybook -o .storybook/build/flat",
-    "storybook:build:flatOld": "cross-env NODE_ENV=test STORYBOOK_FLAT_OLD=true build-storybook -o .storybook/build/flatOld",
-    "storybook:test": "run-p storybook:test:*",
-    "storybook:test:default": "cross-env NODE_ENV=test start-storybook --ci -p 6060",
-    "storybook:test:flat": "cross-env NODE_ENV=test STORYBOOK_FLAT=true start-storybook --ci -p 6062",
-    "storybook:test:defaultOld": "cross-env NODE_ENV=test STORYBOOK_OLD=true start-storybook --ci -p 6061",
-    "storybook:test:flatOld": "cross-env NODE_ENV=test STORYBOOK_FLAT_OLD=true start-storybook --ci -p 6063",
-    "storybook:serve": "run-p storybook:serve:*",
-    "storybook:serve:default": "serve -l 6060 .storybook/build/default",
-    "storybook:serve:defaultOld": "serve -l 6061 .storybook/build/defaultOld",
-    "storybook:serve:flat": "serve -l 6062 .storybook/build/flat",
-    "storybook:serve:flatOld": "serve -l 6063 .storybook/build/flatOld",
+    "storybook:build": "cross-env STORYBOOK_REACT_UI_TEST=true build-storybook -o .storybook/build --quiet",
+    "storybook:test": "cross-env STORYBOOK_REACT_UI_TEST=true start-storybook --ci -p 6060",
+    "storybook:serve": "serve -l 6060 .storybook/build",
     "styleguide": "styleguidist server --config .styleguide/config/dev.config.js",
     "styleguide:build": "node .styleguide/build",
     "lint": "run-p -c lint:*",
     "lint:eslint": "cross-env TIMING=1 yarn eslint --ext .js,.jsx,.ts,.tsx ./",
     "lint:tsc": "tsc --noEmit --diagnostics",
+    "lint:prettier": "prettier --check .",
+    "fix": "run-s -c fix:*",
     "fix:eslint": "yarn lint:eslint --fix",
-    "test": "cross-env BABEL_ENV=cjs jest",
+    "fix:prettier": "yarn prettier --write .",
+    "test": "cross-env BABEL_ENV=cjs jest --detectOpenHandles",
     "test:watch": "yarn test --watch",
-    "creevey": "wait-on -t 300000 http-get://localhost:6060/ http-get://localhost:6062/ http-get://localhost:6061/ http-get://localhost:6063/ && cross-env BABEL_ENV=cjs creevey -c .creevey/config.js",
+    "creevey": "wait-on -t 300000 http-get://localhost:6060/ && cross-env BABEL_ENV=cjs creevey -c .creevey/config.js",
+    "creevey:update": "cross-env BABEL_ENV=cjs creevey -c .creevey/config.js --update",
     "creevey:ui": "yarn creevey --ui",
     "report:eslint": "yarn eslint -f eslint-html-reporter/reporter.js -o reports/eslint/index.html"
   },
   "license": "MIT",
   "dependencies": {
-    "@babel/runtime": "7.13.10",
-    "@emotion/css": "^11.1.3",
-    "classnames": "^2.3.1",
+    "@babel/runtime": "7.16.5",
+    "@emotion/css": "^11.7.1",
     "eventemitter3": "^4.0.7",
     "invariant": "2.2.4",
     "lodash.debounce": "^4.0.8",
     "lodash.isequal": "^4.5.0",
     "lodash.throttle": "^4.1.1",
     "normalize-wheel": "^1.0.1",
-    "prop-types": "^15.7.2",
+    "prop-types": "^15.8.0",
     "raf": "^3.4.1",
-    "react-focus-lock": "^2.2.1",
+    "react-focus-lock": "^2.7.1",
     "react-input-mask": "2.0.4",
-    "react-transition-group": "^4.3.0",
+    "react-is": "^17.0.2",
+    "react-transition-group": "^4.4.2",
     "shallowequal": "^1.1.0",
     "stylis-plugin-extra-scope": "^0.3.0",
-    "tabbable": "^5.1.5",
+    "tabbable": "5.2.1",
     "warning": "^4.0.3"
   },
   "devDependencies": {
-    "@babel/core": "^7.13.14",
-    "@babel/plugin-proposal-class-properties": "^7.12.1",
-    "@babel/plugin-proposal-decorators": "7.13.5",
-    "@babel/plugin-transform-runtime": "^7.13.10",
-    "@babel/preset-env": "^7.13.12",
-    "@babel/preset-react": "^7.13.13",
-    "@babel/preset-typescript": "7.13.0",
-    "@babel/register": "^7.13.14",
-    "@skbkontur/react-icons": "4.4.0",
+    "@babel/core": "^7.16.5",
+    "@babel/plugin-proposal-class-properties": "^7.16.5",
+    "@babel/plugin-proposal-decorators": "7.16.5",
+    "@babel/plugin-transform-runtime": "^7.16.5",
+    "@babel/preset-env": "^7.16.5",
+    "@babel/preset-react": "^7.16.5",
+    "@babel/preset-typescript": "7.16.5",
+    "@babel/register": "^7.16.5",
+    "@skbkontur/react-icons": "5.2.0",
     "@skbkontur/react-props2attrs": "0.1.2",
     "@skbkontur/react-sorge": "0.1.0",
-    "@storybook/addon-actions": "5.3.14",
-    "@storybook/addon-links": "^5.3.14",
-    "@storybook/addons": "5.3.14",
-    "@storybook/react": "5.3.14",
-    "@types/classnames": "^2.2.9",
-    "@types/enzyme": "^3.10.8",
-    "@types/invariant": "^2.2.33",
-    "@types/jest": "^26.0.22",
+    "@storybook/addon-a11y": "6.3.2",
+    "@storybook/addon-essentials": "6.3.2",
+    "@storybook/addon-links": "6.3.2",
+    "@storybook/react": "6.3.2",
+    "@testing-library/jest-dom": "5.16.1",
+    "@testing-library/react": "12.1.2",
+    "@testing-library/react-hooks": "^7.0.2",
+    "@testing-library/user-event": "13.5.0",
+    "@types/enzyme": "^3.10.10",
+    "@types/invariant": "^2.2.35",
+    "@types/jest": "27.0.3",
+    "@types/jest-axe": "^3.5.3",
     "@types/lodash.debounce": "^4.0.6",
     "@types/lodash.isequal": "^4.5.5",
     "@types/lodash.throttle": "^4.1.6",
-    "@types/mockdate": "^2.0.0",
-    "@types/prop-types": "15.7.3",
+    "@types/prop-types": "15.7.4",
     "@types/raf": "^3.4.0",
-    "@types/react": "16.14.4",
-    "@types/react-dom": "16.9.11",
+    "@types/react": "17.0.38",
+    "@types/react-dom": "17.0.11",
     "@types/react-input-mask": "2.0.5",
-    "@types/react-transition-group": "^4.2.3",
+    "@types/react-is": "^17.0.3",
+    "@types/react-transition-group": "^4.4.4",
     "@types/shallowequal": "^1.1.1",
     "@types/warning": "^3.0.0",
-    "babel-jest": "^26.6.3",
-    "babel-loader": "^8.2.2",
+    "@wojtekmaj/enzyme-adapter-react-17": "0.6.6",
+    "axios": "^0.24.0",
+    "babel-jest": "27.4.5",
+    "babel-loader": "^8.2.3",
     "chalk": "4.1.0",
     "copyfiles": "^2.4.1",
-    "core-js": "^3.10.1",
-    "creevey": "0.6.2",
+    "core-js": "^3.20.1",
+    "creevey": "0.7.35",
     "cross-env": "^7.0.3",
     "css-loader": "5.2.0",
-    "dts-css-modules-loader": "1.2.1",
+    "dotenv": "^10.0.0",
+    "dts-css-modules-loader": "1.2.4",
     "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.6",
+    "eslint-plugin-jest": "26.1.1",
+    "eslint-plugin-jest-dom": "^4.0.1",
+    "eslint-plugin-react-hooks": "^4.3.0",
+    "eslint-plugin-storybook": "^0.5.6",
+    "eslint-plugin-testing-library": "^5.0.5",
     "file-loader": "^6.2.0",
-    "fork-ts-checker-webpack-plugin": "^6.2.0",
-    "fs-extra": "^9.1.0",
+    "fork-ts-checker-webpack-plugin": "^6.5.0",
+    "fs-extra": "^10.0.0",
     "fs-readdir-recursive": "^1.1.0",
-    "gh-pages": "^3.1.0",
+    "gh-pages": "^3.2.3",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "26.6.3",
+    "jest": "27.4.5",
+    "jest-axe": "^5.0.1",
     "jest-teamcity-reporter": "^0.9.0",
     "npm-run-all": "^4.1.5",
     "output-file-sync": "^2.0.1",
-    "prettier": "^1.14.2",
-    "react": "16.14.0",
-    "react-docgen-typescript": "^1.22.0",
-    "react-dom": "^16.14.0",
-    "react-styleguidist": "^11.1.6",
-    "rimraf": "^3.0.0",
+    "react": "17.0.2",
+    "react-docgen-typescript": "^2.2.2",
+    "react-dom": "^17.0.2",
+    "react-styleguidist": "^11.1.7",
+    "rimraf": "^3.0.2",
     "semver": "^7.3.5",
-    "serve": "^11.2.0",
+    "serve": "^13.0.2",
     "style-loader": "^2.0.0",
-    "stylelint": "^13.12.0",
-    "stylelint-config-standard": "^21.0.0",
-    "typescript": "4.2.4",
+    "stylelint": "^14.2.0",
+    "stylelint-config-standard": "^24.0.0",
+    "typescript": "4.5.4",
     "upath": "^2.0.1",
     "url-loader": "^4.1.1",
-    "wait-on": "^5.3.0",
+    "wait-on": "^6.0.0",
     "webpack": "^4.41.2"
   },
   "peerDependencies": {
     "react": ">=16.9",
     "react-dom": ">=16.9"
   },
-  "jest": {
-    "testResultsProcessor": "jest-teamcity-reporter",
-    "moduleNameMapper": {
-      "\\.(jpg|jpeg|png|gif|eot|otf||svg|ttf|woff|woff2)$": "<rootDir>/components/__mocks__/fileMock.ts",
-      "\\.(css)$": "identity-obj-proxy"
-    },
-    "transform": {
-      "^.+\\.(j|t)sx?$": "babel-jest"
-    },
-    "testRegex": "__tests__(\\\\|/).*(\\.|-)test\\.(j|t)sx?$",
-    "setupFilesAfterEnv": [
-      "<rootDir>/test-setup.js"
-    ]
-  },
   "publishConfig": {
     "tag": "unstable"
   }

package/typings/console.d.ts

@@ -1,3 +1,3 @@
-declare module 'console' {
-  export = typeof import('console');
-}
+declare module 'console' {
+  export = typeof import('console');
+}

package/typings/event-types.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
-
-export type MouseEventType<T extends HTMLElement = HTMLElement> = React.MouseEvent<T> | MouseEvent;
-export type FocusEventType<T extends HTMLElement = HTMLElement> = React.FocusEvent<T> | FocusEvent;
+import React from 'react';
+
+export type MouseEventType<T extends Element = Element> = React.MouseEvent<T> | MouseEvent;
+export type FocusEventType<T extends Element = Element> = React.FocusEvent<T> | FocusEvent;

package/typings/fonts.d.ts

@@ -1,12 +1,12 @@
-declare module '*.eot' {
-  const font: string;
-  export = font;
-}
-declare module '*.woff' {
-  const font: string;
-  export = font;
-}
-declare module '*.woff2' {
-  const font: string;
-  export = font;
-}
+declare module '*.eot' {
+  const font: string;
+  export = font;
+}
+declare module '*.woff' {
+  const font: string;
+  export = font;
+}
+declare module '*.woff2' {
+  const font: string;
+  export = font;
+}

package/typings/global.d.ts

@@ -1,6 +1,6 @@
-declare interface Window {
-  RetailUIVerticalScrollCounter: number;
-  ReactTesting: any;
-}
-
-declare var __RetailUiZIndexes: number[];
+declare interface Window {
+  RetailUIVerticalScrollCounter: number;
+  ReactTesting: any;
+}
+
+declare var __RetailUiZIndexes: number[];

package/typings/html-props.d.ts

@@ -0,0 +1,123 @@
+import React from 'react';
+
+export type HTMLProps = {
+  a: React.AnchorHTMLAttributes<HTMLAnchorElement>;
+  abbr: React.HTMLAttributes<HTMLElement>;
+  div: React.HTMLAttributes<HTMLDivElement>;
+  address: React.HTMLAttributes<HTMLElement>;
+  area: React.AreaHTMLAttributes<HTMLAreaElement>;
+  article: React.HTMLAttributes<HTMLElement>;
+  aside: React.HTMLAttributes<HTMLElement>;
+  audio: React.AudioHTMLAttributes<HTMLAudioElement>;
+  b: React.HTMLAttributes<HTMLElement>;
+  base: React.BaseHTMLAttributes<HTMLBaseElement>;
+  bdi: React.HTMLAttributes<HTMLElement>;
+  bdo: React.HTMLAttributes<HTMLElement>;
+  big: React.HTMLAttributes<HTMLElement>;
+  blockquote: React.BlockquoteHTMLAttributes<HTMLElement>;
+  body: React.HTMLAttributes<HTMLBodyElement>;
+  br: React.HTMLAttributes<HTMLBRElement>;
+  button: React.ButtonHTMLAttributes<HTMLButtonElement>;
+  canvas: React.CanvasHTMLAttributes<HTMLCanvasElement>;
+  caption: React.HTMLAttributes<HTMLElement>;
+  cite: React.HTMLAttributes<HTMLElement>;
+  code: React.HTMLAttributes<HTMLElement>;
+  col: React.ColHTMLAttributes<HTMLTableColElement>;
+  colgroup: React.ColgroupHTMLAttributes<HTMLTableColElement>;
+  data: React.DataHTMLAttributes<HTMLDataElement>;
+  datalist: React.HTMLAttributes<HTMLDataListElement>;
+  dd: React.HTMLAttributes<HTMLElement>;
+  del: React.DelHTMLAttributes<HTMLElement>;
+  details: React.DetailsHTMLAttributes<HTMLElement>;
+  dfn: React.HTMLAttributes<HTMLElement>;
+  dialog: React.DialogHTMLAttributes<HTMLDialogElement>;
+  div: React.HTMLAttributes<HTMLDivElement>;
+  dl: React.HTMLAttributes<HTMLDListElement>;
+  dt: React.HTMLAttributes<HTMLElement>;
+  em: React.HTMLAttributes<HTMLElement>;
+  embed: React.EmbedHTMLAttributes<HTMLEmbedElement>;
+  fieldset: React.FieldsetHTMLAttributes<HTMLFieldSetElement>;
+  figcaption: React.HTMLAttributes<HTMLElement>;
+  figure: React.HTMLAttributes<HTMLElement>;
+  footer: React.HTMLAttributes<HTMLElement>;
+  form: React.FormHTMLAttributes<HTMLFormElement>;
+  h1: React.HTMLAttributes<HTMLHeadingElement>;
+  h2: React.HTMLAttributes<HTMLHeadingElement>;
+  h3: React.HTMLAttributes<HTMLHeadingElement>;
+  h4: React.HTMLAttributes<HTMLHeadingElement>;
+  h5: React.HTMLAttributes<HTMLHeadingElement>;
+  h6: React.HTMLAttributes<HTMLHeadingElement>;
+  head: React.HTMLAttributes<HTMLHeadElement>;
+  header: React.HTMLAttributes<HTMLElement>;
+  hgroup: React.HTMLAttributes<HTMLElement>;
+  hr: React.HTMLAttributes<HTMLHRElement>;
+  html: React.HtmlHTMLAttributes<HTMLHtmlElement>;
+  i: React.HTMLAttributes<HTMLElement>;
+  iframe: React.IframeHTMLAttributes<HTMLIFrameElement>;
+  img: React.ImgHTMLAttributes<HTMLImageElement>;
+  input: React.InputHTMLAttributes<HTMLInputElement>;
+  ins: React.InsHTMLAttributes<HTMLModElement>;
+  kbd: React.HTMLAttributes<HTMLElement>;
+  keygen: React.KeygenHTMLAttributes<HTMLElement>;
+  label: React.LabelHTMLAttributes<HTMLLabelElement>;
+  legend: React.HTMLAttributes<HTMLLegendElement>;
+  li: React.LiHTMLAttributes<HTMLLIElement>;
+  link: React.LinkHTMLAttributes<HTMLLinkElement>;
+  main: React.HTMLAttributes<HTMLElement>;
+  map: React.MapHTMLAttributes<HTMLMapElement>;
+  mark: React.HTMLAttributes<HTMLElement>;
+  menu: React.MenuHTMLAttributes<HTMLElement>;
+  menuitem: React.HTMLAttributes<HTMLElement>;
+  meta: React.MetaHTMLAttributes<HTMLMetaElement>;
+  meter: React.MeterHTMLAttributes<HTMLElement>;
+  nav: React.HTMLAttributes<HTMLElement>;
+  noindex: React.HTMLAttributes<HTMLElement>;
+  noscript: React.HTMLAttributes<HTMLElement>;
+  object: React.ObjectHTMLAttributes<HTMLObjectElement>;
+  ol: React.OlHTMLAttributes<HTMLOListElement>;
+  optgroup: React.OptgroupHTMLAttributes<HTMLOptGroupElement>;
+  option: React.OptionHTMLAttributes<HTMLOptionElement>;
+  output: React.OutputHTMLAttributes<HTMLElement>;
+  p: React.HTMLAttributes<HTMLParagraphElement>;
+  param: React.ParamHTMLAttributes<HTMLParamElement>;
+  picture: React.HTMLAttributes<HTMLElement>;
+  pre: React.HTMLAttributes<HTMLPreElement>;
+  progress: React.ProgressHTMLAttributes<HTMLProgressElement>;
+  q: React.QuoteHTMLAttributes<HTMLQuoteElement>;
+  rp: React.HTMLAttributes<HTMLElement>;
+  rt: React.HTMLAttributes<HTMLElement>;
+  ruby: React.HTMLAttributes<HTMLElement>;
+  s: React.HTMLAttributes<HTMLElement>;
+  samp: React.HTMLAttributes<HTMLElement>;
+  slot: React.SlotHTMLAttributes<HTMLSlotElement>;
+  script: React.ScriptHTMLAttributes<HTMLScriptElement>;
+  section: React.HTMLAttributes<HTMLElement>;
+  select: React.SelectHTMLAttributes<HTMLSelectElement>;
+  small: React.HTMLAttributes<HTMLElement>;
+  source: React.SourceHTMLAttributes<HTMLSourceElement>;
+  span: React.HTMLAttributes<HTMLSpanElement>;
+  strong: React.HTMLAttributes<HTMLElement>;
+  style: React.StyleHTMLAttributes<HTMLStyleElement>;
+  sub: React.HTMLAttributes<HTMLElement>;
+  summary: React.HTMLAttributes<HTMLElement>;
+  sup: React.HTMLAttributes<HTMLElement>;
+  table: React.TableHTMLAttributes<HTMLTableElement>;
+  template: React.HTMLAttributes<HTMLTemplateElement>;
+  tbody: React.HTMLAttributes<HTMLTableSectionElement>;
+  td: React.TdHTMLAttributes<HTMLTableDataCellElement>;
+  textarea: React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+  tfoot: React.HTMLAttributes<HTMLTableSectionElement>;
+  th: React.ThHTMLAttributes<HTMLTableHeaderCellElement>;
+  thead: React.HTMLAttributes<HTMLTableSectionElement>;
+  time: React.TimeHTMLAttributes<HTMLElement>;
+  title: React.HTMLAttributes<HTMLTitleElement>;
+  tr: React.HTMLAttributes<HTMLTableRowElement>;
+  track: React.TrackHTMLAttributes<HTMLTrackElement>;
+  u: React.HTMLAttributes<HTMLElement>;
+  ul: React.HTMLAttributes<HTMLUListElement>;
+  var: React.HTMLAttributes<HTMLElement>;
+  video: React.VideoHTMLAttributes<HTMLVideoElement>;
+  wbr: React.HTMLAttributes<HTMLElement>;
+  webview: React.WebViewHTMLAttributes<HTMLWebViewElement>;
+  svg: React.SVGProps<SVGSVGElement>;
+};