carbon-react 114.14.0 → 114.15.0

package/esm/components/link/link.component.js

@@ -1,8 +1,9 @@
 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); }
 
-import React, { useMemo } from "react";
+import React, { useContext, useMemo } from "react";
 import PropTypes from "prop-types";
 import Icon from "../icon";
+import MenuContext from "../menu/menu.context";
 import Event from "../../__internal__/utils/helpers/events";
 import { StyledLink, StyledContent } from "./link.style";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
@@ -29,6 +30,9 @@ const Link = /*#__PURE__*/React.forwardRef(({
   ...rest
 }, ref) => {
   const l = useLocale();
+  const {
+    inMenu
+  } = useContext(MenuContext);
 
   const handleOnKeyDown = ev => {
     if (onKeyDown) {
@@ -99,7 +103,8 @@ const Link = /*#__PURE__*/React.forwardRef(({
     iconAlign: iconAlign,
     hasContent: Boolean(children),
     variant: variant,
-    isDarkBackground: isDarkBackground
+    isDarkBackground: isDarkBackground,
+    isMenuItem: inMenu
   }, tagComponent("link", rest), isSkipLink && {
     "data-element": "skip-link"
   }), createLinkBasedOnType());

package/esm/components/link/link.style.d.ts

@@ -13,6 +13,7 @@ export interface StyledLinkProps {
 }
 interface PrivateStyledLinkProps {
     hasContent: boolean;
+    isMenuItem?: boolean;
 }
 declare const StyledLink: import("styled-components").StyledComponent<"span", any, StyledLinkProps & PrivateStyledLinkProps, never>;
 declare const StyledContent: import("styled-components").StyledComponent<"span", any, {}, never>;

package/esm/components/link/link.style.js

@@ -45,7 +45,8 @@ const StyledLink = styled.span`
   hasContent,
   disabled,
   variant,
-  isDarkBackground
+  isDarkBackground,
+  isMenuItem
 }) => {
   const colorMapKey = isDarkBackground ? "dark" : "light";
   const {
@@ -54,8 +55,6 @@ const StyledLink = styled.span`
     disabledColor
   } = colorMap[colorMapKey](variant);
   return css`
-      display: inline-block;
-
       ${isSkipLink && css`
         a {
           position: absolute;
@@ -126,7 +125,7 @@ const StyledLink = styled.span`
       a,
       button {
         text-decoration: underline;
-        display: inline-block;
+        ${isMenuItem && "display: inline-block;"}
 
         ${StyledIcon} {
           display: inline-block;

package/esm/components/select/filterable-select/filterable-select.component.js

@@ -12,6 +12,7 @@ import SelectList from "../select-list/select-list.component";
 import isExpectedOption from "../utils/is-expected-option";
 import isNavigationKey from "../utils/is-navigation-key";
 import Logger from "../../../__internal__/utils/logger";
+import useStableCallback from "../../../hooks/__internal__/useStableCallback";
 let deprecateInputRefWarnTriggered = false;
 const FilterableSelectList = withFilter(SelectList);
 const FilterableSelect = /*#__PURE__*/React.forwardRef(({
@@ -21,9 +22,9 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
   name,
   label,
   children,
-  onOpen,
+  onOpen: onOpenProp,
   onChange,
-  onFilterChange,
+  onFilterChange: onFilterChangeProp,
   onClick,
   onKeyDown,
   onFocus,
@@ -206,13 +207,14 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
     // eslint-disable-next-line react-hooks/exhaustive-deps
 
   }, [value, onChange, children]);
+  const onOpen = useStableCallback(onOpenProp);
   useEffect(() => {
     if (!isOpen) {
       setFilterText("");
     } else if (onOpen) {
       onOpen();
     }
-  }, [isOpen, onOpen]);
+  }, [onOpen, isOpen]);
   useEffect(() => {
     const hasListActionButton = listActionButton !== undefined;
     const onListActionMissingMessage = "onListAction prop required when using listActionButton prop";
@@ -225,11 +227,16 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
     // eslint-disable-next-line react-hooks/exhaustive-deps
 
   }, [value, children]);
+  const onFilterChange = useStableCallback(onFilterChangeProp);
+  const isFirstRender = useRef(true);
   useEffect(() => {
-    if (onFilterChange) {
+    if (onFilterChange && !isFirstRender.current) {
       onFilterChange(filterText);
     }
-  }, [filterText, onFilterChange]);
+  }, [onFilterChange, filterText]);
+  useEffect(() => {
+    isFirstRender.current = false;
+  }, []);
   useEffect(() => {
     const clickEvent = "click";
     window.addEventListener(clickEvent, handleGlobalClick);
@@ -308,10 +315,6 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
           return true;
         }
 
-        if (onOpen) {
-          onOpen();
-        }
-
         if (onFocus && !isInputFocused.current) {
           triggerFocus();
           isInputFocused.current = true;

package/esm/components/select/multi-select/multi-select.component.js

@@ -14,6 +14,7 @@ import isExpectedOption from "../utils/is-expected-option";
 import isExpectedValue from "../utils/is-expected-value";
 import isNavigationKey from "../utils/is-navigation-key";
 import Logger from "../../../__internal__/utils/logger";
+import useStableCallback from "../../../hooks/__internal__/useStableCallback";
 let deprecateInputRefWarnTriggered = false;
 const FilterableSelectList = withFilter(SelectList);
 const MultiSelect = /*#__PURE__*/React.forwardRef(({
@@ -25,7 +26,7 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
   readOnly,
   children,
   onOpen,
-  onFilterChange,
+  onFilterChange: onFilterChangeProp,
   onChange,
   onClick,
   onFocus,
@@ -245,11 +246,16 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
       window.removeEventListener(clickEvent, handleGlobalClick);
     };
   }, [handleGlobalClick]);
+  const onFilterChange = useStableCallback(onFilterChangeProp);
+  const isFirstRender = useRef(true);
   useEffect(() => {
-    if (onFilterChange) {
+    if (onFilterChange && !isFirstRender.current) {
       onFilterChange(filterText);
     }
-  }, [filterText, onFilterChange]);
+  }, [onFilterChange, filterText]);
+  useEffect(() => {
+    isFirstRender.current = false;
+  }, []);
 
   function handleTextboxClick(event) {
     isMouseDownReported.current = false;

package/esm/hooks/__internal__/useStableCallback/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./useStableCallback";

package/esm/hooks/__internal__/useStableCallback/index.js

@@ -0,0 +1 @@
+export { default } from "./useStableCallback";

package/esm/hooks/__internal__/useStableCallback/useStableCallback.d.ts

@@ -0,0 +1,2 @@
+export declare function useStableCallback(callback?: (...args: unknown[]) => unknown): ((...args: any[]) => unknown) | undefined;
+export default useStableCallback;

package/esm/hooks/__internal__/useStableCallback/useStableCallback.js

@@ -0,0 +1,14 @@
+import { useRef, useCallback } from "react"; // This is a hook that returns a memoized callback that is guaranteed to be the same reference between renders.
+// This is useful when a stable reference is required to prevent unnecessary re-renders.
+
+export function useStableCallback(callback) {
+  const ref = useRef(callback);
+  ref.current = callback;
+  const stableCallback = useCallback((...args) => {
+    var _ref$current;
+
+    return (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.call(ref, ...args);
+  }, []);
+  return callback ? stableCallback : undefined;
+}
+export default useStableCallback;

package/lib/components/link/link.component.js

@@ -11,6 +11,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _icon = _interopRequireDefault(require("../icon"));
 
+var _menu = _interopRequireDefault(require("../menu/menu.context"));
+
 var _events = _interopRequireDefault(require("../../__internal__/utils/helpers/events"));
 
 var _link = require("./link.style");
@@ -49,6 +51,9 @@ const Link = /*#__PURE__*/_react.default.forwardRef(({
   ...rest
 }, ref) => {
   const l = (0, _useLocale.default)();
+  const {
+    inMenu
+  } = (0, _react.useContext)(_menu.default);
 
   const handleOnKeyDown = ev => {
     if (onKeyDown) {
@@ -119,7 +124,8 @@ const Link = /*#__PURE__*/_react.default.forwardRef(({
     iconAlign: iconAlign,
     hasContent: Boolean(children),
     variant: variant,
-    isDarkBackground: isDarkBackground
+    isDarkBackground: isDarkBackground,
+    isMenuItem: inMenu
   }, (0, _tags.default)("link", rest), isSkipLink && {
     "data-element": "skip-link"
   }), createLinkBasedOnType());

package/lib/components/link/link.style.d.ts

@@ -13,6 +13,7 @@ export interface StyledLinkProps {
 }
 interface PrivateStyledLinkProps {
     hasContent: boolean;
+    isMenuItem?: boolean;
 }
 declare const StyledLink: import("styled-components").StyledComponent<"span", any, StyledLinkProps & PrivateStyledLinkProps, never>;
 declare const StyledContent: import("styled-components").StyledComponent<"span", any, {}, never>;

package/lib/components/link/link.style.js

@@ -61,7 +61,8 @@ const StyledLink = _styledComponents.default.span`
   hasContent,
   disabled,
   variant,
-  isDarkBackground
+  isDarkBackground,
+  isMenuItem
 }) => {
   const colorMapKey = isDarkBackground ? "dark" : "light";
   const {
@@ -70,8 +71,6 @@ const StyledLink = _styledComponents.default.span`
     disabledColor
   } = colorMap[colorMapKey](variant);
   return (0, _styledComponents.css)`
-      display: inline-block;
-
       ${isSkipLink && (0, _styledComponents.css)`
         a {
           position: absolute;
@@ -142,7 +141,7 @@ const StyledLink = _styledComponents.default.span`
       a,
       button {
         text-decoration: underline;
-        display: inline-block;
+        ${isMenuItem && "display: inline-block;"}
 
         ${_icon.default} {
           display: inline-block;

package/lib/components/select/filterable-select/filterable-select.component.js

@@ -29,6 +29,8 @@ var _isNavigationKey = _interopRequireDefault(require("../utils/is-navigation-ke
 
 var _logger = _interopRequireDefault(require("../../../__internal__/utils/logger"));
 
+var _useStableCallback = _interopRequireDefault(require("../../../hooks/__internal__/useStableCallback"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -47,9 +49,9 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
   name,
   label,
   children,
-  onOpen,
+  onOpen: onOpenProp,
   onChange,
-  onFilterChange,
+  onFilterChange: onFilterChangeProp,
   onClick,
   onKeyDown,
   onFocus,
@@ -233,13 +235,14 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
     // eslint-disable-next-line react-hooks/exhaustive-deps
 
   }, [value, onChange, children]);
+  const onOpen = (0, _useStableCallback.default)(onOpenProp);
   (0, _react.useEffect)(() => {
     if (!isOpen) {
       setFilterText("");
     } else if (onOpen) {
       onOpen();
     }
-  }, [isOpen, onOpen]);
+  }, [onOpen, isOpen]);
   (0, _react.useEffect)(() => {
     const hasListActionButton = listActionButton !== undefined;
     const onListActionMissingMessage = "onListAction prop required when using listActionButton prop";
@@ -252,11 +255,16 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
     // eslint-disable-next-line react-hooks/exhaustive-deps
 
   }, [value, children]);
+  const onFilterChange = (0, _useStableCallback.default)(onFilterChangeProp);
+  const isFirstRender = (0, _react.useRef)(true);
   (0, _react.useEffect)(() => {
-    if (onFilterChange) {
+    if (onFilterChange && !isFirstRender.current) {
       onFilterChange(filterText);
     }
-  }, [filterText, onFilterChange]);
+  }, [onFilterChange, filterText]);
+  (0, _react.useEffect)(() => {
+    isFirstRender.current = false;
+  }, []);
   (0, _react.useEffect)(() => {
     const clickEvent = "click";
     window.addEventListener(clickEvent, handleGlobalClick);
@@ -335,10 +343,6 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
           return true;
         }
 
-        if (onOpen) {
-          onOpen();
-        }
-
         if (onFocus && !isInputFocused.current) {
           triggerFocus();
           isInputFocused.current = true;

package/lib/components/select/multi-select/multi-select.component.js

@@ -33,6 +33,8 @@ var _isNavigationKey = _interopRequireDefault(require("../utils/is-navigation-ke
 
 var _logger = _interopRequireDefault(require("../../../__internal__/utils/logger"));
 
+var _useStableCallback = _interopRequireDefault(require("../../../hooks/__internal__/useStableCallback"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -53,7 +55,7 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
   readOnly,
   children,
   onOpen,
-  onFilterChange,
+  onFilterChange: onFilterChangeProp,
   onChange,
   onClick,
   onFocus,
@@ -275,11 +277,16 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
       window.removeEventListener(clickEvent, handleGlobalClick);
     };
   }, [handleGlobalClick]);
+  const onFilterChange = (0, _useStableCallback.default)(onFilterChangeProp);
+  const isFirstRender = (0, _react.useRef)(true);
   (0, _react.useEffect)(() => {
-    if (onFilterChange) {
+    if (onFilterChange && !isFirstRender.current) {
       onFilterChange(filterText);
     }
-  }, [filterText, onFilterChange]);
+  }, [onFilterChange, filterText]);
+  (0, _react.useEffect)(() => {
+    isFirstRender.current = false;
+  }, []);
 
   function handleTextboxClick(event) {
     isMouseDownReported.current = false;

package/lib/hooks/__internal__/useStableCallback/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./useStableCallback";

package/lib/hooks/__internal__/useStableCallback/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _useStableCallback.default;
+  }
+});
+
+var _useStableCallback = _interopRequireDefault(require("./useStableCallback"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/hooks/__internal__/useStableCallback/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../../../../esm/hooks/__internal__/useStableCallback/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/lib/hooks/__internal__/useStableCallback/useStableCallback.d.ts

@@ -0,0 +1,2 @@
+export declare function useStableCallback(callback?: (...args: unknown[]) => unknown): ((...args: any[]) => unknown) | undefined;
+export default useStableCallback;

package/lib/hooks/__internal__/useStableCallback/useStableCallback.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useStableCallback = useStableCallback;
+exports.default = void 0;
+
+var _react = require("react");
+
+// This is a hook that returns a memoized callback that is guaranteed to be the same reference between renders.
+// This is useful when a stable reference is required to prevent unnecessary re-renders.
+function useStableCallback(callback) {
+  const ref = (0, _react.useRef)(callback);
+  ref.current = callback;
+  const stableCallback = (0, _react.useCallback)((...args) => {
+    var _ref$current;
+
+    return (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.call(ref, ...args);
+  }, []);
+  return callback ? stableCallback : undefined;
+}
+
+var _default = useStableCallback;
+exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "114.14.0",
+  "version": "114.15.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",
@@ -80,6 +80,7 @@
     "@storybook/theming": "^6.4.18",
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.3",
+    "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^14.4.3",
     "@types/crypto-js": "^4.1.1",
     "@types/draft-js": "^0.11.7",