@canonical/react-components 0.32.0 → 0.33.0

package/dist/components/Chip/Chip.d.ts

@@ -1,12 +1,12 @@
-import type { MouseEvent } from "react";
-import { ValueOf } from "../../types";
+import type { MouseEvent, HTMLProps } from "react";
+import { ValueOf, PropsWithSpread } from "../../types";
 export declare const ChipType: {
     readonly CAUTION: "caution";
     readonly INFORMATION: "information";
     readonly NEGATIVE: "negative";
     readonly POSITIVE: "positive";
 };
-export declare type Props = {
+export declare type Props = PropsWithSpread<{
     /**
      * The appearance of the chip.
      */
@@ -43,6 +43,6 @@ export declare type Props = {
      * The value of the chip.
      */
     value: string;
-};
-declare const Chip: ({ appearance, lead, onClick, onDismiss, quoteValue, selected, subString, value, }: Props) => JSX.Element;
+}, HTMLProps<HTMLSpanElement>>;
+declare const Chip: ({ appearance, lead, onClick, onDismiss, quoteValue, selected, subString, value, ...props }: Props) => JSX.Element;
 export default Chip;

package/dist/components/Chip/Chip.js

@@ -11,10 +11,18 @@ var _utils = require("../../utils");
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _excluded = ["appearance", "lead", "onClick", "onDismiss", "quoteValue", "selected", "subString", "value"];
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
 var ChipType = {
   CAUTION: "caution",
   INFORMATION: "information",
@@ -35,7 +43,8 @@ var Chip = function Chip(_ref) {
       selected = _ref.selected,
       _ref$subString = _ref.subString,
       subString = _ref$subString === void 0 ? "" : _ref$subString,
-      value = _ref.value;
+      value = _ref.value,
+      props = _objectWithoutProperties(_ref, _excluded);
 
   // When user tabs over chip and presses Enter or Space key, chip will trigger
   // click functionality
@@ -65,14 +74,12 @@ var Chip = function Chip(_ref) {
   var chipClassName = (0, _classnames.default)((_classNames = {}, _defineProperty(_classNames, "p-chip--".concat(appearance), !!appearance), _defineProperty(_classNames, "p-chip", !appearance), _classNames));
 
   if (onDismiss) {
-    return /*#__PURE__*/_react.default.createElement("span", {
+    return /*#__PURE__*/_react.default.createElement("span", _extends({
       className: chipClassName,
       "aria-pressed": selected
-    }, chipContent, /*#__PURE__*/_react.default.createElement("button", {
+    }, props), chipContent, /*#__PURE__*/_react.default.createElement("button", {
       className: "p-chip__dismiss",
-      onClick: function onClick() {
-        return onDismiss();
-      }
+      onClick: onDismiss
     }, /*#__PURE__*/_react.default.createElement("i", {
       className: "p-icon--close"
     }, "Dismiss")));

package/dist/components/CodeSnippet/CodeSnippet.d.ts

@@ -1,6 +1,7 @@
+import { HTMLProps } from "react";
 import type { Props as CodeSnippetBlockProps } from "./CodeSnippetBlock";
-import type { ClassName } from "../../types";
-export declare type Props = {
+import type { ClassName, PropsWithSpread } from "../../types";
+export declare type Props = PropsWithSpread<{
     /**
      * Optional class(es) to pass to the wrapping div element.
      */
@@ -9,5 +10,5 @@ export declare type Props = {
      * A list of code blocks to display.
      */
     blocks: CodeSnippetBlockProps[];
-};
-export default function CodeSnippet({ className, blocks }: Props): JSX.Element;
+}, HTMLProps<HTMLDivElement>>;
+export default function CodeSnippet({ className, blocks, ...props }: Props): JSX.Element;

package/dist/components/CodeSnippet/CodeSnippet.js

@@ -5,34 +5,36 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = CodeSnippet;
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _react = _interopRequireDefault(require("react"));
 
 var _CodeSnippetBlock = _interopRequireDefault(require("./CodeSnippetBlock"));
 
+var _excluded = ["className", "blocks"];
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
 function CodeSnippet(_ref) {
   var className = _ref.className,
-      blocks = _ref.blocks;
-  return /*#__PURE__*/_react.default.createElement("div", {
+      blocks = _ref.blocks,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/_react.default.createElement("div", _extends({
     className: (0, _classnames.default)("p-code-snippet", {
       "is-bordered": blocks.some(function (block) {
         return block.content;
       })
     }, className)
-  }, blocks.map(function (props, i) {
+  }, props), blocks.map(function (blockProps, i) {
     return /*#__PURE__*/_react.default.createElement(_CodeSnippetBlock.default, _extends({
       key: "code-snippet-block-".concat(i)
-    }, props));
+    }, blockProps));
   }));
-}
-
-CodeSnippet.propTypes = {
-  blocks: _propTypes.default.array.isRequired
-};
+}

package/dist/components/ModularTable/ModularTable.d.ts

@@ -1,6 +1,8 @@
-import { ReactNode } from "react";
-import type { Column } from "react-table";
-export declare type Props<D extends Record<string, unknown>> = {
+import { ReactNode, HTMLProps } from "react";
+import { TableCellProps, TableHeaderProps, TableRowProps } from "react-table";
+import type { Column, UseTableOptions, Cell, Row, HeaderGroup } from "react-table";
+import { PropsWithSpread } from "../../types";
+export declare type Props<D extends Record<string, unknown>> = PropsWithSpread<{
     /**
      * The columns of the table.
      */
@@ -17,6 +19,19 @@ export declare type Props<D extends Record<string, unknown>> = {
      * Optional extra row to display underneath the main table content.
      */
     footer?: ReactNode;
-};
-declare function ModularTable({ data, columns, emptyMsg, footer, }: Props<Record<string, unknown>>): JSX.Element;
+    /**
+     * This function is used to resolve any props needed for a particular column's header cell.
+     */
+    getHeaderProps?: (header: HeaderGroup<D>) => Partial<TableHeaderProps & HTMLProps<HTMLTableHeaderCellElement>>;
+    /**
+     * This function is used to resolve any props needed for a particular row.
+     */
+    getRowProps?: (row: Row<D>) => Partial<TableRowProps & HTMLProps<HTMLTableRowElement>>;
+    /**
+     * This function is used to resolve any props needed for a particular cell.
+     */
+    getCellProps?: (cell: Cell<D>) => Partial<TableCellProps & HTMLProps<HTMLTableCellElement>>;
+    getRowId?: UseTableOptions<D>["getRowId"];
+}, HTMLProps<HTMLTableElement>>;
+declare function ModularTable({ data, columns, emptyMsg, footer, getHeaderProps, getRowProps, getCellProps, getRowId, ...props }: Props<Record<string, unknown>>): JSX.Element;
 export default ModularTable;

package/dist/components/ModularTable/ModularTable.js

@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireDefault(require("react"));
 
 var _reactTable = require("react-table");
@@ -21,17 +19,37 @@ var _TableCell = _interopRequireDefault(require("../TableCell"));
 
 var _Icon = _interopRequireDefault(require("../Icon"));
 
+var _excluded = ["data", "columns", "emptyMsg", "footer", "getHeaderProps", "getRowProps", "getCellProps", "getRowId"];
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
 function ModularTable(_ref) {
   var data = _ref.data,
       columns = _ref.columns,
       emptyMsg = _ref.emptyMsg,
-      footer = _ref.footer;
+      footer = _ref.footer,
+      getHeaderProps = _ref.getHeaderProps,
+      getRowProps = _ref.getRowProps,
+      getCellProps = _ref.getCellProps,
+      getRowId = _ref.getRowId,
+      props = _objectWithoutProperties(_ref, _excluded);
 
   var _useTable = (0, _reactTable.useTable)({
     columns: columns,
-    data: data
+    data: data,
+    getRowId: getRowId || undefined
   }),
       getTableProps = _useTable.getTableProps,
       getTableBodyProps = _useTable.getTableBodyProps,
@@ -39,28 +57,30 @@ function ModularTable(_ref) {
       rows = _useTable.rows,
       prepareRow = _useTable.prepareRow;
 
-  var showEmpty = emptyMsg && (!rows || rows.length === 0);
-  return /*#__PURE__*/_react.default.createElement(_Table.default, getTableProps(), /*#__PURE__*/_react.default.createElement("thead", null, headerGroups.map(function (headerGroup) {
+  var showEmpty = !!emptyMsg && (!rows || rows.length === 0);
+  return /*#__PURE__*/_react.default.createElement(_Table.default, _extends({}, getTableProps(), props), /*#__PURE__*/_react.default.createElement("thead", null, headerGroups.map(function (headerGroup) {
     return /*#__PURE__*/_react.default.createElement(_TableRow.default, headerGroup.getHeaderGroupProps(), headerGroup.headers.map(function (column) {
       return /*#__PURE__*/_react.default.createElement(_TableHeader.default, column.getHeaderProps([{
         className: column.className
       }, {
         className: column.getCellIcon ? "p-table__cell--icon-placeholder" : ""
-      }]), column.render("Header"));
+      }, _objectSpread({}, getHeaderProps === null || getHeaderProps === void 0 ? void 0 : getHeaderProps(column))]), column.render("Header"));
     }));
   })), /*#__PURE__*/_react.default.createElement("tbody", getTableBodyProps(), rows.map(function (row) {
     // This function is responsible for lazily preparing a row for rendering.
     // Any row that you intend to render in your table needs to be passed to this function before every render.
     // see: https://react-table.tanstack.com/docs/api/useTable#instance-properties
     prepareRow(row);
-    return /*#__PURE__*/_react.default.createElement(_TableRow.default, row.getRowProps(), row.cells.map(function (cell) {
+    return /*#__PURE__*/_react.default.createElement(_TableRow.default, row.getRowProps(getRowProps === null || getRowProps === void 0 ? void 0 : getRowProps(row)), row.cells.map(function (cell) {
+      var _cell$column$getCellI, _cell$column;
+
       var hasColumnIcon = cell.column.getCellIcon;
-      var iconName = hasColumnIcon && cell.column.getCellIcon(cell);
+      var iconName = hasColumnIcon && ((_cell$column$getCellI = (_cell$column = cell.column).getCellIcon) === null || _cell$column$getCellI === void 0 ? void 0 : _cell$column$getCellI.call(_cell$column, cell));
       return /*#__PURE__*/_react.default.createElement(_TableCell.default, cell.getCellProps([{
         className: cell.column.className
       }, {
         className: hasColumnIcon ? "p-table__cell--icon-placeholder" : ""
-      }]), iconName && /*#__PURE__*/_react.default.createElement(_Icon.default, {
+      }, _objectSpread({}, getCellProps === null || getCellProps === void 0 ? void 0 : getCellProps(cell))]), iconName && /*#__PURE__*/_react.default.createElement(_Icon.default, {
         name: iconName
       }), cell.render("Cell"));
     }));
@@ -71,11 +91,5 @@ function ModularTable(_ref) {
   }, footer))));
 }
 
-ModularTable.propTypes = {
-  columns: _propTypes.default.array.isRequired,
-  data: _propTypes.default.array.isRequired,
-  emptyMsg: _propTypes.default.string,
-  footer: _propTypes.default.node
-};
 var _default = ModularTable;
 exports.default = _default;

package/dist/components/SearchBox/SearchBox.d.ts

@@ -1,5 +1,6 @@
-import type { ClassName } from "../../types";
-export declare type Props = {
+import { HTMLProps } from "react";
+import type { ClassName, PropsWithSpread } from "../../types";
+export declare type Props = PropsWithSpread<{
     /**
      * Whether autocomplete should be enabled for the search input.
      */
@@ -32,9 +33,9 @@ export declare type Props = {
      * The value of the search input when the state is externally controlled.
      */
     value?: string;
-};
+}, HTMLProps<HTMLInputElement>>;
 declare const SearchBox: {
-    ({ autocomplete, className, disabled, externallyControlled, onChange, onSearch, placeholder, value, }: Props): JSX.Element;
+    ({ autocomplete, className, disabled, externallyControlled, onChange, onSearch, placeholder, value, ...props }: Props): JSX.Element;
     displayName: string;
 };
 export default SearchBox;

package/dist/components/SearchBox/SearchBox.js

@@ -5,16 +5,22 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _react = _interopRequireDefault(require("react"));
 
 var _Icon = _interopRequireDefault(require("../Icon"));
 
+var _excluded = ["autocomplete", "className", "disabled", "externallyControlled", "onChange", "onSearch", "placeholder", "value"];
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
 var SearchBox = function SearchBox(_ref) {
   var _ref$autocomplete = _ref.autocomplete,
       autocomplete = _ref$autocomplete === void 0 ? "on" : _ref$autocomplete,
@@ -25,7 +31,8 @@ var SearchBox = function SearchBox(_ref) {
       onSearch = _ref.onSearch,
       _ref$placeholder = _ref.placeholder,
       placeholder = _ref$placeholder === void 0 ? "Search" : _ref$placeholder,
-      value = _ref.value;
+      value = _ref.value,
+      props = _objectWithoutProperties(_ref, _excluded);
 
   var input = /*#__PURE__*/_react.default.createRef();
 
@@ -46,7 +53,7 @@ var SearchBox = function SearchBox(_ref) {
   }, /*#__PURE__*/_react.default.createElement("label", {
     className: "u-off-screen",
     htmlFor: "search"
-  }, placeholder || "Search"), /*#__PURE__*/_react.default.createElement("input", {
+  }, placeholder || "Search"), /*#__PURE__*/_react.default.createElement("input", _extends({
     autoComplete: autocomplete,
     className: "p-search-box__input",
     disabled: disabled,
@@ -60,7 +67,7 @@ var SearchBox = function SearchBox(_ref) {
     type: "search",
     defaultValue: externallyControlled ? undefined : value,
     value: externallyControlled ? value : undefined
-  }), value && /*#__PURE__*/_react.default.createElement("button", {
+  }, props)), value && /*#__PURE__*/_react.default.createElement("button", {
     className: "p-search-box__reset",
     disabled: disabled,
     onClick: resetInput,
@@ -76,15 +83,6 @@ var SearchBox = function SearchBox(_ref) {
   }, "Search")));
 };
 
-SearchBox.propTypes = {
-  autocomplete: _propTypes.default.oneOf(["on", "off"]),
-  disabled: _propTypes.default.bool,
-  externallyControlled: _propTypes.default.bool,
-  onChange: _propTypes.default.func,
-  onSearch: _propTypes.default.func,
-  placeholder: _propTypes.default.string,
-  value: _propTypes.default.string
-};
 SearchBox.displayName = "SearchBox";
 var _default = SearchBox;
 exports.default = _default;

package/dist/components/Spinner/Spinner.js

@@ -40,7 +40,7 @@ var Spinner = function Spinner(_ref) {
     className: (0, _classnames.default)("p-icon--spinner", "u-animation--spin", {
       "is-light": isLight
     })
-  }, text ? text : "Loading"), text && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "\u2002", /*#__PURE__*/_react.default.createElement("span", null, text)));
+  }, text ? "" : "Loading"), text && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "\u2002", /*#__PURE__*/_react.default.createElement("span", null, text)));
 };
 
 Spinner.propTypes = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/react-components",
-  "version": "0.32.0",
+  "version": "0.33.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "author": "Huw Wilkins <huw.wilkins@canonical.com>",
@@ -22,76 +22,76 @@
   },
   "homepage": "/react-components/",
   "devDependencies": {
-    "@babel/cli": "7.17.0",
+    "@babel/cli": "7.17.6",
     "@babel/eslint-parser": "7.17.0",
     "@babel/preset-typescript": "7.16.7",
-    "@percy/cli": "1.0.0-beta.74",
+    "@percy/cli": "1.0.0-beta.76",
     "@percy/storybook": "4.1.0",
-    "@storybook/addon-a11y": "6.4.18",
-    "@storybook/addon-controls": "6.4.18",
-    "@storybook/addon-docs": "6.4.18",
-    "@storybook/addons": "6.4.18",
-    "@storybook/react": "6.4.18",
-    "@storybook/theming": "6.4.18",
+    "@storybook/addon-a11y": "6.4.19",
+    "@storybook/addon-controls": "6.4.19",
+    "@storybook/addon-docs": "6.4.19",
+    "@storybook/addons": "6.4.19",
+    "@storybook/react": "6.4.19",
+    "@storybook/theming": "6.4.19",
     "@testing-library/cypress": "8.0.2",
     "@testing-library/dom": "8.11.3",
     "@testing-library/jest-dom": "5.16.2",
-    "@testing-library/react": "12.1.2",
+    "@testing-library/react": "12.1.3",
     "@testing-library/react-hooks": "7.0.2",
     "@testing-library/user-event": "13.5.0",
-    "@typescript-eslint/eslint-plugin": "5.10.2",
-    "@typescript-eslint/parser": "5.10.2",
+    "@typescript-eslint/eslint-plugin": "5.13.0",
+    "@typescript-eslint/parser": "5.13.0",
     "@wojtekmaj/enzyme-adapter-react-17": "0.6.6",
-    "babel-jest": "27.4.6",
+    "babel-jest": "27.5.1",
     "babel-loader": "8.2.3",
     "babel-plugin-module-resolver": "4.1.0",
     "babel-plugin-typescript-to-proptypes": "2.0.0",
     "concurrently": "7.0.0",
     "css-loader": "5.2.7",
-    "cypress": "9.4.1",
+    "cypress": "9.5.1",
     "deepmerge": "4.2.2",
     "enzyme": "3.11.0",
     "enzyme-adapter-react-16": "1.15.6",
     "enzyme-to-json": "3.6.2",
-    "eslint": "8.8.0",
-    "eslint-config-prettier": "8.3.0",
+    "eslint": "8.10.0",
+    "eslint-config-prettier": "8.5.0",
     "eslint-config-react-app": "7.0.0",
     "eslint-plugin-cypress": "2.12.1",
     "eslint-plugin-flowtype": "8.0.3",
     "eslint-plugin-import": "2.25.4",
     "eslint-plugin-jsx-a11y": "6.5.1",
     "eslint-plugin-prettier": "4.0.0",
-    "eslint-plugin-react": "7.28.0",
+    "eslint-plugin-react": "7.29.2",
     "eslint-plugin-react-hooks": "4.3.0",
     "eslint-plugin-testing-library": "5.0.5",
-    "jest": "27.4.7",
+    "jest": "27.5.1",
     "npm-package-json-lint": "5.4.2",
     "prettier": "2.5.1",
     "react": "17.0.2",
     "react-docgen-typescript-loader": "3.7.2",
     "react-dom": "17.0.2",
-    "sass": "1.49.7",
+    "sass": "1.49.9",
     "sass-loader": "10.2.1",
     "style-loader": "2.0.0",
-    "stylelint": "14.3.0",
+    "stylelint": "14.5.3",
     "stylelint-config-prettier": "9.0.3",
     "stylelint-config-recommended-scss": "5.0.2",
     "stylelint-order": "5.0.0",
     "stylelint-prettier": "2.0.0",
     "ts-jest": "27.1.3",
-    "tsc-alias": "1.5.0",
-    "typescript": "4.5.5",
+    "tsc-alias": "1.6.3",
+    "typescript": "4.6.2",
     "vanilla-framework": "3.1.1",
     "wait-on": "5.3.0"
   },
   "dependencies": {
-    "@types/jest": "27.4.0",
-    "@types/node": "16.11.22",
+    "@types/jest": "27.4.1",
+    "@types/node": "16.11.26",
     "@types/react": "17.0.39",
-    "@types/react-dom": "17.0.11",
+    "@types/react-dom": "17.0.13",
     "@types/react-table": "7.7.9",
     "classnames": "2.3.1",
-    "nanoid": "3.2.0",
+    "nanoid": "3.3.1",
     "prop-types": "15.8.1",
     "react-table": "7.7.0",
     "react-useportal": "1.0.16"