carbon-react 146.4.1 → 146.4.3

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/tabs/__internal__/tabs-header/tabs-header.component.js

@@ -81,6 +81,7 @@ const TabsHeader = ({
     title: "Scroll Tabs Left",
     id: "tab-navigation-button-left",
     "data-role": "tab-navigation-button-left",
+    type: "button",
     onClick: () => {
       /* istanbul ignore if */
       if (current) {
@@ -107,6 +108,7 @@ const TabsHeader = ({
     title: "Scroll Tabs Right",
     id: "tab-navigation-button-right",
     "data-role": "tab-navigation-button-right",
+    type: "button",
     onClick: () => {
       /* istanbul ignore if */
       if (current) {

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/tabs/__internal__/tabs-header/tabs-header.component.js

@@ -90,6 +90,7 @@ const TabsHeader = ({
     title: "Scroll Tabs Left",
     id: "tab-navigation-button-left",
     "data-role": "tab-navigation-button-left",
+    type: "button",
     onClick: () => {
       /* istanbul ignore if */
       if (current) {
@@ -116,6 +117,7 @@ const TabsHeader = ({
     title: "Scroll Tabs Right",
     id: "tab-navigation-button-right",
     "data-role": "tab-navigation-button-right",
+    type: "button",
     onClick: () => {
       /* istanbul ignore if */
       if (current) {

package/package.json

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