carbon-react 146.4.0 → 146.4.2

package/esm/components/select/__internal__/select-list/select-list.component.js

@@ -49,9 +49,11 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
 }, listContainerRef) => {
   const [currentOptionsListIndex, setCurrentOptionsListIndex] = useState(-1);
   const [scrollbarWidth, setScrollbarWidth] = useState(0);
+  const [actualPlacement, setActualPlacement] = useState(listPlacement);
   const lastFilter = useRef("");
   const listRef = useRef(null);
   const tableRef = useRef(null);
+  const listWrapperRef = useRef(null);
   const listActionButtonRef = useRef(null);
   const {
     blockScroll,
@@ -386,6 +388,21 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
   }), ...(flipEnabled ? [flip({
     fallbackStrategy: "initialPlacement"
   })] : /* istanbul ignore next: covered by Playwright tests for reliable positioning in a real browser */[])], [listWidth, flipEnabled]);
+
+  // set the placement of the list based on the floating placement
+  const setPlacement = useCallback(() => {
+    if (isOpen) {
+      const floatingPlacement = listWrapperRef.current?.getAttribute("data-floating-placement");
+      setActualPlacement(floatingPlacement);
+    }
+  }, [isOpen]);
+  useEffect(() => {
+    setPlacement();
+    window.addEventListener("resize", setPlacement);
+    return () => {
+      window.removeEventListener("resize", setPlacement);
+    };
+  }, [setPlacement]);
   const loader = isLoading ? /*#__PURE__*/React.createElement(StyledSelectLoaderContainer, {
     key: "loader"
   }, /*#__PURE__*/React.createElement(Loader, null)) : undefined;
@@ -424,9 +441,11 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
     disableBackgroundUI: true,
     animationFrame: true
   }, /*#__PURE__*/React.createElement(StyledSelectListContainer, _extends({
+    ref: listWrapperRef,
     "data-element": "select-list-wrapper",
     "data-role": "select-list-wrapper",
-    isLoading: isLoading
+    isLoading: isLoading,
+    placement: actualPlacement
   }, listProps), /*#__PURE__*/React.createElement(StyledScrollableContainer, {
     ref: listContainerRef,
     maxHeight: listMaxHeight,

package/esm/components/select/__internal__/select-list/select-list.style.d.ts

@@ -1,4 +1,3 @@
-import { SelectListProps } from ".";
 interface StyledSelectListProps {
     listHeight?: number;
 }
@@ -10,7 +9,11 @@ interface StyledSelectListTableHeaderProps {
 }
 declare const StyledSelectListTableHeader: import("styled-components").StyledComponent<"thead", any, StyledSelectListTableHeaderProps, never>;
 declare const StyledSelectListTableBody: import("styled-components").StyledComponent<"tbody", any, StyledSelectListProps, never>;
-declare const StyledSelectListContainer: import("styled-components").StyledComponent<"div", any, Pick<SelectListProps, "isLoading">, never>;
+interface StyledSelectListContainerProps {
+    isLoading?: boolean;
+    placement?: string;
+}
+declare const StyledSelectListContainer: import("styled-components").StyledComponent<"div", any, StyledSelectListContainerProps, never>;
 declare const StyledScrollableContainer: import("styled-components").StyledComponent<"div", any, {
     maxHeight: number;
     hasActionButton: boolean;

package/esm/components/select/__internal__/select-list/select-list.style.js

@@ -94,7 +94,9 @@ const StyledSelectListTableBody = styled.tbody`
 `;
 const StyledSelectListContainer = styled.div`
   background-color: white;
-  box-shadow: var(--boxShadow100);
+  box-shadow: ${({
+  placement
+}) => placement?.includes("top") ? "0 -5px 5px 0 #00141e33, 0 -10px 10px 0 #00141e1a" : "var(--boxShadow100)"};
   animation: fadeIn 250ms ease-out;
   position: absolute;
   z-index: ${({

package/esm/components/select/__internal__/utils/are-objects-equal.d.ts

@@ -0,0 +1 @@
+export default function areObjectsEqual(obj1: Record<string, unknown>, obj2: Record<string, unknown>): boolean;

package/esm/components/select/__internal__/utils/are-objects-equal.js

@@ -0,0 +1,20 @@
+export default function areObjectsEqual(obj1, obj2) {
+  // Check if both arguments are objects
+  if (typeof obj1 !== "object" || typeof obj2 !== "object" || obj1 === null || obj2 === null) {
+    return false;
+  }
+  // Get the keys of both objects
+  const keys1 = Object.keys(obj1);
+  const keys2 = Object.keys(obj2);
+  // If the number of keys is different, objects aren't equal
+  if (keys1.length !== keys2.length) {
+    return false;
+  } // Compare keys and values
+  for (const key of keys1) {
+    // Check if obj2 has the key and values are strictly equal
+    if (!Object.prototype.hasOwnProperty.call(obj2, key) || obj1[key] !== obj2[key]) {
+      return false;
+    }
+  }
+  return true;
+}

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

@@ -9,6 +9,7 @@ import withFilter from "../__internal__/utils/with-filter.hoc";
 import StyledSelect from "../select.style";
 import SelectList from "../__internal__/select-list/select-list.component";
 import isExpectedOption from "../__internal__/utils/is-expected-option";
+import areObjectsEqual from "../__internal__/utils/are-objects-equal";
 import isNavigationKey from "../__internal__/utils/is-navigation-key";
 import Logger from "../../../__internal__/utils/logger";
 import useStableCallback from "../../../hooks/__internal__/useStableCallback";
@@ -69,6 +70,7 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
   const [isOpen, setOpen] = useState(false);
   const [textValue, setTextValue] = useState("");
   const [selectedValue, setSelectedValue] = useState(value || defaultValue || "");
+  const receivedValue = useRef(value);
   const [highlightedValue, setHighlightedValue] = useState("");
   const [filterText, setFilterText] = useState("");
   const inputId = useRef(id || guid());
@@ -234,15 +236,27 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
     const onListActionMissingMessage = "onListAction prop required when using listActionButton prop";
     !(!hasListActionButton || hasListActionButton && onListAction) ? process.env.NODE_ENV !== "production" ? invariant(false, onListActionMissingMessage) : invariant(false) : void 0;
   }, [listActionButton, onListAction]);
+  const isFirstRender = useRef(true);
   useEffect(() => {
+    // when we render for the first time, we run setMatchingText to populate the input with the correct text
+    if (isFirstRender.current) {
+      setMatchingText(selectedValue);
+    }
     if (isControlled.current) {
-      setMatchingText(value);
+      // when value is an object we should only run setMatchingText if the object changes between renders
+      if (typeof value === "object" && typeof receivedValue.current === "object") {
+        if (!areObjectsEqual(value, receivedValue.current)) {
+          setMatchingText(value);
+          receivedValue.current = value;
+        }
+      } else {
+        setMatchingText(value);
+      }
     }
     // update text value only when children are changing
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [value, children]);
   const onFilterChange = useStableCallback(onFilterChangeProp);
-  const isFirstRender = useRef(true);
   useEffect(() => {
     if (onFilterChange && !isFirstRender.current) {
       onFilterChange(filterText);

package/lib/components/select/__internal__/select-list/select-list.component.js

@@ -58,9 +58,11 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
 }, listContainerRef) => {
   const [currentOptionsListIndex, setCurrentOptionsListIndex] = (0, _react.useState)(-1);
   const [scrollbarWidth, setScrollbarWidth] = (0, _react.useState)(0);
+  const [actualPlacement, setActualPlacement] = (0, _react.useState)(listPlacement);
   const lastFilter = (0, _react.useRef)("");
   const listRef = (0, _react.useRef)(null);
   const tableRef = (0, _react.useRef)(null);
+  const listWrapperRef = (0, _react.useRef)(null);
   const listActionButtonRef = (0, _react.useRef)(null);
   const {
     blockScroll,
@@ -395,6 +397,21 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
   }), ...(flipEnabled ? [(0, _dom.flip)({
     fallbackStrategy: "initialPlacement"
   })] : /* istanbul ignore next: covered by Playwright tests for reliable positioning in a real browser */[])], [listWidth, flipEnabled]);
+
+  // set the placement of the list based on the floating placement
+  const setPlacement = (0, _react.useCallback)(() => {
+    if (isOpen) {
+      const floatingPlacement = listWrapperRef.current?.getAttribute("data-floating-placement");
+      setActualPlacement(floatingPlacement);
+    }
+  }, [isOpen]);
+  (0, _react.useEffect)(() => {
+    setPlacement();
+    window.addEventListener("resize", setPlacement);
+    return () => {
+      window.removeEventListener("resize", setPlacement);
+    };
+  }, [setPlacement]);
   const loader = isLoading ? /*#__PURE__*/_react.default.createElement(_selectList.StyledSelectLoaderContainer, {
     key: "loader"
   }, /*#__PURE__*/_react.default.createElement(_loader.default, null)) : undefined;
@@ -433,9 +450,11 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
     disableBackgroundUI: true,
     animationFrame: true
   }, /*#__PURE__*/_react.default.createElement(_selectList.StyledSelectListContainer, _extends({
+    ref: listWrapperRef,
     "data-element": "select-list-wrapper",
     "data-role": "select-list-wrapper",
-    isLoading: isLoading
+    isLoading: isLoading,
+    placement: actualPlacement
   }, listProps), /*#__PURE__*/_react.default.createElement(_selectList.StyledScrollableContainer, {
     ref: listContainerRef,
     maxHeight: listMaxHeight,

package/lib/components/select/__internal__/select-list/select-list.style.d.ts

@@ -1,4 +1,3 @@
-import { SelectListProps } from ".";
 interface StyledSelectListProps {
     listHeight?: number;
 }
@@ -10,7 +9,11 @@ interface StyledSelectListTableHeaderProps {
 }
 declare const StyledSelectListTableHeader: import("styled-components").StyledComponent<"thead", any, StyledSelectListTableHeaderProps, never>;
 declare const StyledSelectListTableBody: import("styled-components").StyledComponent<"tbody", any, StyledSelectListProps, never>;
-declare const StyledSelectListContainer: import("styled-components").StyledComponent<"div", any, Pick<SelectListProps, "isLoading">, never>;
+interface StyledSelectListContainerProps {
+    isLoading?: boolean;
+    placement?: string;
+}
+declare const StyledSelectListContainer: import("styled-components").StyledComponent<"div", any, StyledSelectListContainerProps, never>;
 declare const StyledScrollableContainer: import("styled-components").StyledComponent<"div", any, {
     maxHeight: number;
     hasActionButton: boolean;

package/lib/components/select/__internal__/select-list/select-list.style.js

@@ -102,7 +102,9 @@ const StyledSelectListTableBody = exports.StyledSelectListTableBody = _styledCom
 `;
 const StyledSelectListContainer = exports.StyledSelectListContainer = _styledComponents.default.div`
   background-color: white;
-  box-shadow: var(--boxShadow100);
+  box-shadow: ${({
+  placement
+}) => placement?.includes("top") ? "0 -5px 5px 0 #00141e33, 0 -10px 10px 0 #00141e1a" : "var(--boxShadow100)"};
   animation: fadeIn 250ms ease-out;
   position: absolute;
   z-index: ${({

package/lib/components/select/__internal__/utils/are-objects-equal.d.ts

@@ -0,0 +1 @@
+export default function areObjectsEqual(obj1: Record<string, unknown>, obj2: Record<string, unknown>): boolean;

package/lib/components/select/__internal__/utils/are-objects-equal.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = areObjectsEqual;
+function areObjectsEqual(obj1, obj2) {
+  // Check if both arguments are objects
+  if (typeof obj1 !== "object" || typeof obj2 !== "object" || obj1 === null || obj2 === null) {
+    return false;
+  }
+  // Get the keys of both objects
+  const keys1 = Object.keys(obj1);
+  const keys2 = Object.keys(obj2);
+  // If the number of keys is different, objects aren't equal
+  if (keys1.length !== keys2.length) {
+    return false;
+  } // Compare keys and values
+  for (const key of keys1) {
+    // Check if obj2 has the key and values are strictly equal
+    if (!Object.prototype.hasOwnProperty.call(obj2, key) || obj1[key] !== obj2[key]) {
+      return false;
+    }
+  }
+  return true;
+}

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

@@ -14,6 +14,7 @@ var _withFilter = _interopRequireDefault(require("../__internal__/utils/with-fil
 var _select = _interopRequireDefault(require("../select.style"));
 var _selectList = _interopRequireDefault(require("../__internal__/select-list/select-list.component"));
 var _isExpectedOption = _interopRequireDefault(require("../__internal__/utils/is-expected-option"));
+var _areObjectsEqual = _interopRequireDefault(require("../__internal__/utils/are-objects-equal"));
 var _isNavigationKey = _interopRequireDefault(require("../__internal__/utils/is-navigation-key"));
 var _logger = _interopRequireDefault(require("../../../__internal__/utils/logger"));
 var _useStableCallback = _interopRequireDefault(require("../../../hooks/__internal__/useStableCallback"));
@@ -78,6 +79,7 @@ const FilterableSelect = exports.FilterableSelect = /*#__PURE__*/_react.default.
   const [isOpen, setOpen] = (0, _react.useState)(false);
   const [textValue, setTextValue] = (0, _react.useState)("");
   const [selectedValue, setSelectedValue] = (0, _react.useState)(value || defaultValue || "");
+  const receivedValue = (0, _react.useRef)(value);
   const [highlightedValue, setHighlightedValue] = (0, _react.useState)("");
   const [filterText, setFilterText] = (0, _react.useState)("");
   const inputId = (0, _react.useRef)(id || (0, _guid.default)());
@@ -243,15 +245,27 @@ const FilterableSelect = exports.FilterableSelect = /*#__PURE__*/_react.default.
     const onListActionMissingMessage = "onListAction prop required when using listActionButton prop";
     !(!hasListActionButton || hasListActionButton && onListAction) ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, onListActionMissingMessage) : (0, _invariant.default)(false) : void 0;
   }, [listActionButton, onListAction]);
+  const isFirstRender = (0, _react.useRef)(true);
   (0, _react.useEffect)(() => {
+    // when we render for the first time, we run setMatchingText to populate the input with the correct text
+    if (isFirstRender.current) {
+      setMatchingText(selectedValue);
+    }
     if (isControlled.current) {
-      setMatchingText(value);
+      // when value is an object we should only run setMatchingText if the object changes between renders
+      if (typeof value === "object" && typeof receivedValue.current === "object") {
+        if (!(0, _areObjectsEqual.default)(value, receivedValue.current)) {
+          setMatchingText(value);
+          receivedValue.current = value;
+        }
+      } else {
+        setMatchingText(value);
+      }
     }
     // update text value only when children are changing
     // 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 && !isFirstRender.current) {
       onFilterChange(filterText);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "146.4.0",
+  "version": "146.4.2",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",