@carbon/react 1.39.0 → 1.40.0

package/es/components/DataTable/TableSelectAll.js

@@ -24,6 +24,7 @@ const TableSelectAll = _ref => {
   } = _ref;
   const prefix = usePrefix();
   return /*#__PURE__*/React__default.createElement("th", {
+    "aria-live": "off",
     scope: "col",
     className: cx(`${prefix}--table-column-checkbox`, className)
   }, /*#__PURE__*/React__default.createElement(InlineCheckbox, {

package/es/components/DataTable/TableSelectRow.js

@@ -42,7 +42,8 @@ const TableSelectRow = _ref => {
     [`${prefix}--table-column-radio`]: radio
   });
   return /*#__PURE__*/React__default.createElement("td", {
-    className: tableSelectRowClasses
+    className: tableSelectRowClasses,
+    "aria-live": "off"
   }, /*#__PURE__*/React__default.createElement(InlineInputComponent, _extends({}, selectionInputProps, radio && {
     labelText: ariaLabel,
     hideLabel: true

package/es/components/FileUploader/FileUploaderItem.d.ts

@@ -28,6 +28,10 @@ export interface FileUploaderItemProps extends ReactAttr<HTMLSpanElement> {
      * Name of the uploaded file
      */
     name?: string;
+    /**
+     * Event handler that is called after files are added to the uploader
+     */
+    onAddFiles?: (event: React.ChangeEvent<HTMLInputElement>) => void;
     /**
      * Event handler that is called after removing a file from the file uploader
      * The event handler signature looks like `onDelete(evt, { uuid })`

package/es/components/FileUploader/FileUploaderItem.js

@@ -8,10 +8,12 @@
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React__default, { useRef } from 'react';
+import React__default, { useState, useRef, useLayoutEffect } from 'react';
 import Filename from './Filename.js';
 import uniqueId from '../../tools/uniqueId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
+import '../Tooltip/DefinitionTooltip.js';
+import { Tooltip } from '../Tooltip/Tooltip.js';
 import { matches } from '../../internal/keyboard/match.js';
 import { Enter, Space } from '../../internal/keyboard/keys.js';
 
@@ -28,6 +30,7 @@ function FileUploaderItem(_ref) {
     size,
     ...other
   } = _ref;
+  const [isEllipsisApplied, setIsEllipsisApplied] = useState(false);
   const prefix = usePrefix();
   const {
     current: id
@@ -37,13 +40,37 @@ function FileUploaderItem(_ref) {
     [`${prefix}--file__selected-file--md`]: size === 'md',
     [`${prefix}--file__selected-file--sm`]: size === 'sm'
   });
+  const isInvalid = invalid ? `${prefix}--file-filename-container-wrap-invalid` : `${prefix}--file-filename-container-wrap`;
+  const isEllipsisActive = element => {
+    setIsEllipsisApplied(element.offsetWidth < element.scrollWidth);
+    return element.offsetWidth < element.scrollWidth;
+  };
+  useLayoutEffect(() => {
+    const element = document.querySelector(`[title="${name}"]`);
+    isEllipsisActive(element);
+  }, [prefix, name]);
   return /*#__PURE__*/React__default.createElement("span", _extends({
     className: classes
-  }, other), /*#__PURE__*/React__default.createElement("p", {
-    className: `${prefix}--file-filename`,
+  }, other), isEllipsisApplied ? /*#__PURE__*/React__default.createElement("div", {
+    className: isInvalid
+  }, /*#__PURE__*/React__default.createElement(Tooltip, {
+    label: name,
+    align: "bottom",
+    className: `${prefix}--file-filename-tooltip`
+  }, /*#__PURE__*/React__default.createElement("button", {
+    className: `${prefix}--file-filename-button`,
+    type: "button"
+  }, /*#__PURE__*/React__default.createElement("p", {
+    title: name,
+    className: `${prefix}--file-filename-button`,
+    id: name
+  }, name)))) : /*#__PURE__*/React__default.createElement("p", {
     title: name,
+    className: `${prefix}--file-filename`,
     id: name
-  }, name), /*#__PURE__*/React__default.createElement("span", {
+  }, name), /*#__PURE__*/React__default.createElement("div", {
+    className: `${prefix}--file-container-item`
+  }, /*#__PURE__*/React__default.createElement("span", {
     className: `${prefix}--file__state-container`
   }, /*#__PURE__*/React__default.createElement(Filename, {
     name: name,
@@ -68,7 +95,7 @@ function FileUploaderItem(_ref) {
         });
       }
     }
-  })), invalid && errorSubject && /*#__PURE__*/React__default.createElement("div", {
+  }))), invalid && errorSubject && /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--form-requirement`,
     role: "alert",
     id: `${name}-id-error`

package/es/components/FileUploader/Filename.js

@@ -28,7 +28,8 @@ function Filename(_ref) {
       return /*#__PURE__*/React__default.createElement(Loading, {
         description: iconDescription,
         small: true,
-        withOverlay: false
+        withOverlay: false,
+        className: `${prefix}--file-loading`
       });
     case 'edit':
       return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, invalid && /*#__PURE__*/React__default.createElement(WarningFilled, {

package/es/components/Search/Search.js

@@ -125,7 +125,7 @@ const Search = /*#__PURE__*/React__default.forwardRef(function Search(_ref, forw
     className: `${prefix}--search-magnifier`,
     onClick: onExpand,
     onKeyDown: handleExpandButtonKeyDown,
-    tabIndex: onExpand && !isExpanded ? 1 : -1,
+    tabIndex: onExpand && !isExpanded ? 0 : -1,
     ref: expandButtonRef,
     "aria-expanded": onExpand && isExpanded ? true : undefined,
     "aria-controls": onExpand ? uniqueId : undefined

package/es/components/UIShell/SideNavLinkText.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { ReactNode } from 'react';
+import PropTypes from 'prop-types';
+export interface SideNavLinkTextProps {
+    children: ReactNode;
+    className?: string;
+}
+declare function SideNavLinkText({ className: customClassName, children, ...rest }: SideNavLinkTextProps): JSX.Element;
+declare namespace SideNavLinkText {
+    var propTypes: {
+        /**
+         * Provide the content for the link text
+         */
+        children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
+        /**
+         * Provide an optional class to be applied to the containing node
+         */
+        className: PropTypes.Requireable<string>;
+    };
+}
+export default SideNavLinkText;

package/es/components/UIShell/SideNavLinkText.js

@@ -7,9 +7,9 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
-import PropTypes from 'prop-types';
 import React__default from 'react';
 import { usePrefix } from '../../internal/usePrefix.js';
+import PropTypes from 'prop-types';
 
 function SideNavLinkText(_ref) {
   let {

package/es/components/UIShell/SideNavMenu.d.ts

@@ -0,0 +1,46 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+interface SideNavMenuProps {
+    /**
+     * An optional CSS class to apply to the component.
+     */
+    className?: string;
+    /**
+     * The content to render within the SideNavMenu component.
+     */
+    children?: React.ReactNode;
+    /**
+     * Specifies whether the menu should be expanded by default.
+     */
+    defaultExpanded?: boolean;
+    /**
+     * Indicates whether the SideNavMenu is active.
+     */
+    isActive?: boolean;
+    /**
+     * Specifies whether the SideNavMenu is in a large variation.
+     */
+    large?: boolean;
+    /**
+     * A custom icon to render next to the SideNavMenu title. This can be a function returning JSX or JSX itself.
+     */
+    renderIcon?: React.ComponentType;
+    /**
+     * Indicates if the side navigation container is expanded or collapsed.
+     */
+    isSideNavExpanded?: boolean;
+    /**
+     * The tabIndex for the button element.
+     * If not specified, the default validation will be applied.
+     */
+    tabIndex?: number;
+    title: string;
+}
+declare const SideNavMenu: React.ForwardRefExoticComponent<SideNavMenuProps & React.RefAttributes<HTMLElement>>;
+export default SideNavMenu;
+export { SideNavMenu };

package/es/components/UIShell/SideNavMenu.js

@@ -16,8 +16,8 @@ import { match } from '../../internal/keyboard/match.js';
 import { Escape } from '../../internal/keyboard/keys.js';
 
 var _ChevronDown;
-const SideNavMenu = /*#__PURE__*/React__default.forwardRef(function SideNavMenu(props, ref) {
-  const {
+const SideNavMenu = /*#__PURE__*/React__default.forwardRef(function SideNavMenu(_ref, ref) {
+  let {
     className: customClassName,
     children,
     defaultExpanded = false,
@@ -27,7 +27,7 @@ const SideNavMenu = /*#__PURE__*/React__default.forwardRef(function SideNavMenu(
     isSideNavExpanded,
     tabIndex,
     title
-  } = props;
+  } = _ref;
   const isRail = useContext(SideNavContext);
   const prefix = usePrefix();
   const [isExpanded, setIsExpanded] = useState(defaultExpanded);
@@ -111,6 +111,7 @@ SideNavMenu.propTypes = {
   /**
    * Pass in a custom icon to render next to the `SideNavMenu` title
    */
+  // @ts-expect-error - PropTypes are unable to cover this case.
   renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /**
    * Optional prop to specify the tabIndex of the button. If undefined, it will be applied default validation
@@ -121,29 +122,38 @@ SideNavMenu.propTypes = {
    */
   title: PropTypes.string.isRequired
 };
+
+/**
+Defining the children parameter with the type ReactNode | ReactNode[]. This allows for various possibilities:
+a single element, an array of elements, or null or undefined.
+**/
 function hasActiveChild(children) {
-  // if we have children, either a single or multiple, find if it is active
   if (Array.isArray(children)) {
     return children.some(child => {
-      if (!child.props) {
+      if (! /*#__PURE__*/React__default.isValidElement(child)) {
         return false;
       }
-      if (child.props.isActive === true) {
-        return true;
-      }
-      if (child.props['aria-current']) {
+
+      /** Explicitly defining the expected prop types (isActive and 'aria-current) for the children to ensure type
+      safety when accessing their props.
+      **/
+      const props = child.props;
+      if (props.isActive === true || props['aria-current']) {
         return true;
       }
       return false;
     });
   }
-  if (children.props) {
-    if (children.props.isActive === true || children.props['aria-current']) {
+
+  // We use React.isValidElement(child) to check if the child is a valid React element before accessing its props
+
+  if ( /*#__PURE__*/React__default.isValidElement(children)) {
+    const props = children.props;
+    if (props.isActive === true || props['aria-current']) {
       return true;
     }
   }
   return false;
 }
-var SideNavMenu$1 = SideNavMenu;
 
-export { SideNavMenu, SideNavMenu$1 as default };
+export { SideNavMenu, SideNavMenu as default };

package/lib/components/DataTable/TableSelectAll.js

@@ -34,6 +34,7 @@ const TableSelectAll = _ref => {
   } = _ref;
   const prefix = usePrefix.usePrefix();
   return /*#__PURE__*/React__default["default"].createElement("th", {
+    "aria-live": "off",
     scope: "col",
     className: cx__default["default"](`${prefix}--table-column-checkbox`, className)
   }, /*#__PURE__*/React__default["default"].createElement(InlineCheckbox["default"], {

package/lib/components/DataTable/TableSelectRow.js

@@ -52,7 +52,8 @@ const TableSelectRow = _ref => {
     [`${prefix}--table-column-radio`]: radio
   });
   return /*#__PURE__*/React__default["default"].createElement("td", {
-    className: tableSelectRowClasses
+    className: tableSelectRowClasses,
+    "aria-live": "off"
   }, /*#__PURE__*/React__default["default"].createElement(InlineInputComponent, _rollupPluginBabelHelpers["extends"]({}, selectionInputProps, radio && {
     labelText: ariaLabel,
     hideLabel: true

package/lib/components/FileUploader/FileUploaderItem.d.ts

@@ -28,6 +28,10 @@ export interface FileUploaderItemProps extends ReactAttr<HTMLSpanElement> {
      * Name of the uploaded file
      */
     name?: string;
+    /**
+     * Event handler that is called after files are added to the uploader
+     */
+    onAddFiles?: (event: React.ChangeEvent<HTMLInputElement>) => void;
     /**
      * Event handler that is called after removing a file from the file uploader
      * The event handler signature looks like `onDelete(evt, { uuid })`

package/lib/components/FileUploader/FileUploaderItem.js

@@ -16,6 +16,8 @@ var React = require('react');
 var Filename = require('./Filename.js');
 var uniqueId = require('../../tools/uniqueId.js');
 var usePrefix = require('../../internal/usePrefix.js');
+require('../Tooltip/DefinitionTooltip.js');
+var Tooltip = require('../Tooltip/Tooltip.js');
 var match = require('../../internal/keyboard/match.js');
 var keys = require('../../internal/keyboard/keys.js');
 
@@ -38,6 +40,7 @@ function FileUploaderItem(_ref) {
     size,
     ...other
   } = _ref;
+  const [isEllipsisApplied, setIsEllipsisApplied] = React.useState(false);
   const prefix = usePrefix.usePrefix();
   const {
     current: id
@@ -47,13 +50,37 @@ function FileUploaderItem(_ref) {
     [`${prefix}--file__selected-file--md`]: size === 'md',
     [`${prefix}--file__selected-file--sm`]: size === 'sm'
   });
+  const isInvalid = invalid ? `${prefix}--file-filename-container-wrap-invalid` : `${prefix}--file-filename-container-wrap`;
+  const isEllipsisActive = element => {
+    setIsEllipsisApplied(element.offsetWidth < element.scrollWidth);
+    return element.offsetWidth < element.scrollWidth;
+  };
+  React.useLayoutEffect(() => {
+    const element = document.querySelector(`[title="${name}"]`);
+    isEllipsisActive(element);
+  }, [prefix, name]);
   return /*#__PURE__*/React__default["default"].createElement("span", _rollupPluginBabelHelpers["extends"]({
     className: classes
-  }, other), /*#__PURE__*/React__default["default"].createElement("p", {
-    className: `${prefix}--file-filename`,
+  }, other), isEllipsisApplied ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: isInvalid
+  }, /*#__PURE__*/React__default["default"].createElement(Tooltip.Tooltip, {
+    label: name,
+    align: "bottom",
+    className: `${prefix}--file-filename-tooltip`
+  }, /*#__PURE__*/React__default["default"].createElement("button", {
+    className: `${prefix}--file-filename-button`,
+    type: "button"
+  }, /*#__PURE__*/React__default["default"].createElement("p", {
+    title: name,
+    className: `${prefix}--file-filename-button`,
+    id: name
+  }, name)))) : /*#__PURE__*/React__default["default"].createElement("p", {
     title: name,
+    className: `${prefix}--file-filename`,
     id: name
-  }, name), /*#__PURE__*/React__default["default"].createElement("span", {
+  }, name), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: `${prefix}--file-container-item`
+  }, /*#__PURE__*/React__default["default"].createElement("span", {
     className: `${prefix}--file__state-container`
   }, /*#__PURE__*/React__default["default"].createElement(Filename["default"], {
     name: name,
@@ -78,7 +105,7 @@ function FileUploaderItem(_ref) {
         });
       }
     }
-  })), invalid && errorSubject && /*#__PURE__*/React__default["default"].createElement("div", {
+  }))), invalid && errorSubject && /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--form-requirement`,
     role: "alert",
     id: `${name}-id-error`

package/lib/components/FileUploader/Filename.js

@@ -37,7 +37,8 @@ function Filename(_ref) {
       return /*#__PURE__*/React__default["default"].createElement(Loading["default"], {
         description: iconDescription,
         small: true,
-        withOverlay: false
+        withOverlay: false,
+        className: `${prefix}--file-loading`
       });
     case 'edit':
       return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, invalid && /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningFilled, {

package/lib/components/Search/Search.js

@@ -135,7 +135,7 @@ const Search = /*#__PURE__*/React__default["default"].forwardRef(function Search
     className: `${prefix}--search-magnifier`,
     onClick: onExpand,
     onKeyDown: handleExpandButtonKeyDown,
-    tabIndex: onExpand && !isExpanded ? 1 : -1,
+    tabIndex: onExpand && !isExpanded ? 0 : -1,
     ref: expandButtonRef,
     "aria-expanded": onExpand && isExpanded ? true : undefined,
     "aria-controls": onExpand ? uniqueId : undefined

package/lib/components/UIShell/SideNavLinkText.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { ReactNode } from 'react';
+import PropTypes from 'prop-types';
+export interface SideNavLinkTextProps {
+    children: ReactNode;
+    className?: string;
+}
+declare function SideNavLinkText({ className: customClassName, children, ...rest }: SideNavLinkTextProps): JSX.Element;
+declare namespace SideNavLinkText {
+    var propTypes: {
+        /**
+         * Provide the content for the link text
+         */
+        children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
+        /**
+         * Provide an optional class to be applied to the containing node
+         */
+        className: PropTypes.Requireable<string>;
+    };
+}
+export default SideNavLinkText;

package/lib/components/UIShell/SideNavLinkText.js

@@ -11,15 +11,15 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var cx = require('classnames');
-var PropTypes = require('prop-types');
 var React = require('react');
 var usePrefix = require('../../internal/usePrefix.js');
+var PropTypes = require('prop-types');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
 function SideNavLinkText(_ref) {
   let {

package/lib/components/UIShell/SideNavMenu.d.ts

@@ -0,0 +1,46 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+interface SideNavMenuProps {
+    /**
+     * An optional CSS class to apply to the component.
+     */
+    className?: string;
+    /**
+     * The content to render within the SideNavMenu component.
+     */
+    children?: React.ReactNode;
+    /**
+     * Specifies whether the menu should be expanded by default.
+     */
+    defaultExpanded?: boolean;
+    /**
+     * Indicates whether the SideNavMenu is active.
+     */
+    isActive?: boolean;
+    /**
+     * Specifies whether the SideNavMenu is in a large variation.
+     */
+    large?: boolean;
+    /**
+     * A custom icon to render next to the SideNavMenu title. This can be a function returning JSX or JSX itself.
+     */
+    renderIcon?: React.ComponentType;
+    /**
+     * Indicates if the side navigation container is expanded or collapsed.
+     */
+    isSideNavExpanded?: boolean;
+    /**
+     * The tabIndex for the button element.
+     * If not specified, the default validation will be applied.
+     */
+    tabIndex?: number;
+    title: string;
+}
+declare const SideNavMenu: React.ForwardRefExoticComponent<SideNavMenuProps & React.RefAttributes<HTMLElement>>;
+export default SideNavMenu;
+export { SideNavMenu };

package/lib/components/UIShell/SideNavMenu.js

@@ -26,8 +26,8 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var _ChevronDown;
-const SideNavMenu = /*#__PURE__*/React__default["default"].forwardRef(function SideNavMenu(props, ref) {
-  const {
+const SideNavMenu = /*#__PURE__*/React__default["default"].forwardRef(function SideNavMenu(_ref, ref) {
+  let {
     className: customClassName,
     children,
     defaultExpanded = false,
@@ -37,7 +37,7 @@ const SideNavMenu = /*#__PURE__*/React__default["default"].forwardRef(function S
     isSideNavExpanded,
     tabIndex,
     title
-  } = props;
+  } = _ref;
   const isRail = React.useContext(SideNav.SideNavContext);
   const prefix = usePrefix.usePrefix();
   const [isExpanded, setIsExpanded] = React.useState(defaultExpanded);
@@ -121,6 +121,7 @@ SideNavMenu.propTypes = {
   /**
    * Pass in a custom icon to render next to the `SideNavMenu` title
    */
+  // @ts-expect-error - PropTypes are unable to cover this case.
   renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object]),
   /**
    * Optional prop to specify the tabIndex of the button. If undefined, it will be applied default validation
@@ -131,30 +132,39 @@ SideNavMenu.propTypes = {
    */
   title: PropTypes__default["default"].string.isRequired
 };
+
+/**
+Defining the children parameter with the type ReactNode | ReactNode[]. This allows for various possibilities:
+a single element, an array of elements, or null or undefined.
+**/
 function hasActiveChild(children) {
-  // if we have children, either a single or multiple, find if it is active
   if (Array.isArray(children)) {
     return children.some(child => {
-      if (!child.props) {
+      if (! /*#__PURE__*/React__default["default"].isValidElement(child)) {
         return false;
       }
-      if (child.props.isActive === true) {
-        return true;
-      }
-      if (child.props['aria-current']) {
+
+      /** Explicitly defining the expected prop types (isActive and 'aria-current) for the children to ensure type
+      safety when accessing their props.
+      **/
+      const props = child.props;
+      if (props.isActive === true || props['aria-current']) {
         return true;
       }
       return false;
     });
   }
-  if (children.props) {
-    if (children.props.isActive === true || children.props['aria-current']) {
+
+  // We use React.isValidElement(child) to check if the child is a valid React element before accessing its props
+
+  if ( /*#__PURE__*/React__default["default"].isValidElement(children)) {
+    const props = children.props;
+    if (props.isActive === true || props['aria-current']) {
       return true;
     }
   }
   return false;
 }
-var SideNavMenu$1 = SideNavMenu;
 
 exports.SideNavMenu = SideNavMenu;
-exports["default"] = SideNavMenu$1;
+exports["default"] = SideNavMenu;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.39.0",
+  "version": "1.40.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -49,11 +49,11 @@
     "@carbon/feature-flags": "^0.16.0",
     "@carbon/icons-react": "^11.28.0",
     "@carbon/layout": "^11.19.0",
-    "@carbon/styles": "^1.39.0",
+    "@carbon/styles": "^1.40.0",
     "@carbon/telemetry": "0.1.0",
     "classnames": "2.3.2",
     "copy-to-clipboard": "^3.3.1",
-    "downshift": "8.2.0",
+    "downshift": "8.2.1",
     "flatpickr": "4.6.9",
     "invariant": "^2.2.3",
     "lodash.debounce": "^4.0.8",
@@ -87,6 +87,7 @@
     "@storybook/addon-docs": "^7.1.0",
     "@storybook/addon-essentials": "^7.1.0",
     "@storybook/addon-knobs": "^7.0.2",
+    "@storybook/addon-links": "^7.4.5",
     "@storybook/addon-notes": "^5.3.21",
     "@storybook/addon-storysource": "^7.1.0",
     "@storybook/react": "^7.1.0",
@@ -138,5 +139,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "7c151d929564f2cf414f3a0fef4a5fc888242fae"
+  "gitHead": "99314f69da3f5791c3c0f46564a47ef9ee7c9e0f"
 }