carbon-react 127.0.3 → 127.0.4

package/esm/__spec_helper__/mock-dom-rect.d.ts

@@ -0,0 +1,2 @@
+declare const mockDOMRect: (width: number, height: number, elementIdentifier: string) => void;
+export default mockDOMRect;

package/esm/__spec_helper__/mock-dom-rect.js

@@ -0,0 +1,20 @@
+const getDOMRect = (width, height) => ({
+  width,
+  height,
+  top: 0,
+  left: 0,
+  bottom: 0,
+  right: 0,
+  x: 0,
+  y: 0,
+  toJSON: () => {}
+});
+const mockDOMRect = (width, height, elementIdentifier) => {
+  Element.prototype.getBoundingClientRect = jest.fn(function () {
+    if (this.getAttribute("data-component") === elementIdentifier) {
+      return getDOMRect(width, height);
+    }
+    return getDOMRect(0, 0);
+  });
+};
+export default mockDOMRect;

package/esm/__spec_helper__/select-test-utils.js

@@ -1,6 +1,6 @@
 import { act } from "react-dom/test-utils";
 import { mockResizeObserver } from "jsdom-testing-mocks";
-import StyledSelectListContainer from "../components/select/select-list/select-list-container.style";
+import { StyledSelectListContainer } from "../components/select/select-list/select-list.style";
 const resizeObserver = mockResizeObserver();
 export function simulateSelectTextboxEvent(container, eventType,
 // eslint-disable-next-line @typescript-eslint/no-explicit-any

package/esm/components/select/list-action-button/list-action-button.style.js

@@ -9,6 +9,8 @@ const StyledListActionButtonWrapper = styled.div`
   position: sticky;
   bottom: 0;
   background-color: inherit;
+  border-bottom-left-radius: var(--borderRadius050);
+  border-bottom-right-radius: var(--borderRadius050);
 
   ${StyledButton} {
     border: none;

package/esm/components/select/option-row/option-row.style.js

@@ -1,10 +1,10 @@
 import styled, { css } from "styled-components";
 const StyledOptionRow = styled.tr`
   cursor: pointer;
+  width: 100%;
   position: absolute;
   top: 0;
   left: 0;
-  width: 100%;
 
   ${({
   hidden

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

@@ -7,14 +7,13 @@ import findLastIndex from "lodash/findLastIndex";
 import usePrevious from "../../../hooks/__internal__/usePrevious";
 import useScrollBlock from "../../../hooks/__internal__/useScrollBlock";
 import useModalManager from "../../../hooks/__internal__/useModalManager";
-import { StyledSelectList, StyledSelectLoaderContainer, StyledSelectListTable, StyledSelectListTableHeader, StyledSelectListTableBody } from "./select-list.style";
+import { StyledSelectList, StyledSelectLoaderContainer, StyledSelectListTable, StyledSelectListTableHeader, StyledSelectListTableBody, StyledSelectListContainer, StyledScrollableContainer } from "./select-list.style";
 import Popover from "../../../__internal__/popover";
 import OptionRow from "../option-row/option-row.component";
 import getNextChildByText from "../utils/get-next-child-by-text";
 import getNextIndexByKey from "../utils/get-next-index-by-key";
 import isNavigationKey from "../utils/is-navigation-key";
 import ListActionButton from "../list-action-button";
-import StyledSelectListContainer from "./select-list-container.style";
 import Loader from "../../loader";
 import Option from "../option";
 import SelectListContext from "../__internal__/select-list-context";
@@ -363,13 +362,11 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
   }), ...(flipEnabled ? [flip({
     fallbackStrategy: "initialPlacement"
   })] : [])], [flipEnabled]);
-  const loader = () => {
-    return /*#__PURE__*/React.createElement(StyledSelectLoaderContainer, {
-      key: "loader"
-    }, /*#__PURE__*/React.createElement(Loader, {
-      "data-role": loaderDataRole
-    }));
-  };
+  const loader = isLoading ? /*#__PURE__*/React.createElement(StyledSelectLoaderContainer, {
+    key: "loader"
+  }, /*#__PURE__*/React.createElement(Loader, {
+    "data-role": loaderDataRole
+  })) : undefined;
   let selectListContent = renderedChildren;
   const listBoxProps = {
     role: "listbox",
@@ -406,17 +403,20 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
     animationFrame: true
   }, /*#__PURE__*/React.createElement(StyledSelectListContainer, _extends({
     "data-element": "select-list-wrapper",
-    ref: listContainerRef,
-    maxHeight: listMaxHeight + actionButtonHeight.current,
     isLoading: isLoading
-  }, listProps), /*#__PURE__*/React.createElement(StyledSelectList, _extends({
+  }, listProps), /*#__PURE__*/React.createElement(StyledScrollableContainer, {
+    ref: listContainerRef,
+    maxHeight: listMaxHeight,
+    "data-component": "select-list-scrollable-container",
+    hasActionButton: !!listActionButton
+  }, /*#__PURE__*/React.createElement(StyledSelectList, _extends({
     as: multiColumn ? "div" : "ul",
     "data-element": "select-list"
   }, multiColumn ? {} : listBoxProps, {
     ref: listRef,
     tabIndex: -1,
     listHeight: multiColumn ? undefined : listHeight
-  }), selectListContent), isLoading && loader(), listActionButton && /*#__PURE__*/React.createElement(ListActionButton, {
+  }), selectListContent), loader), listActionButton && /*#__PURE__*/React.createElement(ListActionButton, {
     ref: listActionButtonRef,
     listActionButton: listActionButton,
     onListAction: onListAction

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

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

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

@@ -1,4 +1,5 @@
 import styled, { css } from "styled-components";
+import { baseTheme } from "../../../style/themes";
 const StyledSelectList = styled.ul`
   ${({
   listHeight
@@ -91,4 +92,48 @@ const StyledSelectListTableBody = styled.tbody`
   listHeight
 }) => `${listHeight}px`};
 `;
-export { StyledSelectList, StyledSelectLoaderContainer, StyledSelectListTable, StyledSelectListTableHeader, StyledSelectListTableBody };
+const StyledSelectListContainer = styled.div`
+  background-color: white;
+  box-shadow: var(--boxShadow100);
+  animation: fadeIn 250ms ease-out;
+  position: absolute;
+  z-index: ${({
+  theme
+}) => theme.zIndex.popover};
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  border-radius: var(--borderRadius050);
+  ${({
+  isLoading
+}) => isLoading && "min-height: 150px"};
+
+  @keyframes fadeIn {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+`;
+const StyledScrollableContainer = styled.div`
+  max-height: ${({
+  maxHeight
+}) => `${maxHeight}px`};
+  width: 100%;
+  border-top-left-radius: var(--borderRadius050);
+  border-top-right-radius: var(--borderRadius050);
+  overflow-y: auto;
+
+  ${({
+  hasActionButton
+}) => !hasActionButton && css`
+      border-bottom-left-radius: var(--borderRadius050);
+      border-bottom-right-radius: var(--borderRadius050);
+    `}
+`;
+StyledSelectListContainer.defaultProps = {
+  theme: baseTheme
+};
+export { StyledSelectList, StyledSelectLoaderContainer, StyledSelectListTable, StyledSelectListTableHeader, StyledSelectListTableBody, StyledSelectListContainer, StyledScrollableContainer };

package/lib/__spec_helper__/mock-dom-rect.d.ts

@@ -0,0 +1,2 @@
+declare const mockDOMRect: (width: number, height: number, elementIdentifier: string) => void;
+export default mockDOMRect;

package/lib/__spec_helper__/mock-dom-rect.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+const getDOMRect = (width, height) => ({
+  width,
+  height,
+  top: 0,
+  left: 0,
+  bottom: 0,
+  right: 0,
+  x: 0,
+  y: 0,
+  toJSON: () => {}
+});
+const mockDOMRect = (width, height, elementIdentifier) => {
+  Element.prototype.getBoundingClientRect = jest.fn(function () {
+    if (this.getAttribute("data-component") === elementIdentifier) {
+      return getDOMRect(width, height);
+    }
+    return getDOMRect(0, 0);
+  });
+};
+var _default = exports.default = mockDOMRect;

package/lib/__spec_helper__/select-test-utils.js

@@ -7,15 +7,14 @@ exports.simulateDropdownEvent = simulateDropdownEvent;
 exports.simulateSelectTextboxEvent = simulateSelectTextboxEvent;
 var _testUtils = require("react-dom/test-utils");
 var _jsdomTestingMocks = require("jsdom-testing-mocks");
-var _selectListContainer = _interopRequireDefault(require("../components/select/select-list/select-list-container.style"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _selectList = require("../components/select/select-list/select-list.style");
 const resizeObserver = (0, _jsdomTestingMocks.mockResizeObserver)();
 function simulateSelectTextboxEvent(container, eventType,
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 ...eventArgs) {
   const selectText = container.find('input[type="text"]').first();
   selectText.simulate(eventType, ...eventArgs);
-  const selectList = container.find(_selectListContainer.default).getDOMNode();
+  const selectList = container.find(_selectList.StyledSelectListContainer).getDOMNode();
   // need to manually trigger a resize to make react-virtual realise that child options should be rendered
   (0, _testUtils.act)(() => {
     resizeObserver.mockElementSize(selectList, {
@@ -32,7 +31,7 @@ function simulateSelectTextboxEvent(container, eventType,
 function simulateDropdownEvent(container, eventType) {
   const dropdown = container.find('[type="dropdown"]').first();
   dropdown.simulate(eventType);
-  const selectList = container.find(_selectListContainer.default).getDOMNode();
+  const selectList = container.find(_selectList.StyledSelectListContainer).getDOMNode();
   // need to manually trigger a resize to make react-virtual realise that child options should be rendered
   (0, _testUtils.act)(() => {
     resizeObserver.mockElementSize(selectList, {

package/lib/components/select/list-action-button/list-action-button.style.js

@@ -16,6 +16,8 @@ const StyledListActionButtonWrapper = _styledComponents.default.div`
   position: sticky;
   bottom: 0;
   background-color: inherit;
+  border-bottom-left-radius: var(--borderRadius050);
+  border-bottom-right-radius: var(--borderRadius050);
 
   ${_button.default} {
     border: none;

package/lib/components/select/option-row/option-row.style.js

@@ -9,10 +9,10 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const StyledOptionRow = _styledComponents.default.tr`
   cursor: pointer;
+  width: 100%;
   position: absolute;
   top: 0;
   left: 0;
-  width: 100%;
 
   ${({
   hidden

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

@@ -19,7 +19,6 @@ var _getNextChildByText = _interopRequireDefault(require("../utils/get-next-chil
 var _getNextIndexByKey = _interopRequireDefault(require("../utils/get-next-index-by-key"));
 var _isNavigationKey = _interopRequireDefault(require("../utils/is-navigation-key"));
 var _listActionButton = _interopRequireDefault(require("../list-action-button"));
-var _selectListContainer = _interopRequireDefault(require("./select-list-container.style"));
 var _loader = _interopRequireDefault(require("../../loader"));
 var _option = _interopRequireDefault(require("../option"));
 var _selectListContext = _interopRequireDefault(require("../__internal__/select-list-context"));
@@ -372,13 +371,11 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
   }), ...(flipEnabled ? [(0, _dom.flip)({
     fallbackStrategy: "initialPlacement"
   })] : [])], [flipEnabled]);
-  const loader = () => {
-    return /*#__PURE__*/_react.default.createElement(_selectList.StyledSelectLoaderContainer, {
-      key: "loader"
-    }, /*#__PURE__*/_react.default.createElement(_loader.default, {
-      "data-role": loaderDataRole
-    }));
-  };
+  const loader = isLoading ? /*#__PURE__*/_react.default.createElement(_selectList.StyledSelectLoaderContainer, {
+    key: "loader"
+  }, /*#__PURE__*/_react.default.createElement(_loader.default, {
+    "data-role": loaderDataRole
+  })) : undefined;
   let selectListContent = renderedChildren;
   const listBoxProps = {
     role: "listbox",
@@ -413,19 +410,22 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
     isOpen: isOpen,
     disableBackgroundUI: true,
     animationFrame: true
-  }, /*#__PURE__*/_react.default.createElement(_selectListContainer.default, _extends({
+  }, /*#__PURE__*/_react.default.createElement(_selectList.StyledSelectListContainer, _extends({
     "data-element": "select-list-wrapper",
-    ref: listContainerRef,
-    maxHeight: listMaxHeight + actionButtonHeight.current,
     isLoading: isLoading
-  }, listProps), /*#__PURE__*/_react.default.createElement(_selectList.StyledSelectList, _extends({
+  }, listProps), /*#__PURE__*/_react.default.createElement(_selectList.StyledScrollableContainer, {
+    ref: listContainerRef,
+    maxHeight: listMaxHeight,
+    "data-component": "select-list-scrollable-container",
+    hasActionButton: !!listActionButton
+  }, /*#__PURE__*/_react.default.createElement(_selectList.StyledSelectList, _extends({
     as: multiColumn ? "div" : "ul",
     "data-element": "select-list"
   }, multiColumn ? {} : listBoxProps, {
     ref: listRef,
     tabIndex: -1,
     listHeight: multiColumn ? undefined : listHeight
-  }), selectListContent), isLoading && loader(), listActionButton && /*#__PURE__*/_react.default.createElement(_listActionButton.default, {
+  }), selectListContent), loader), listActionButton && /*#__PURE__*/_react.default.createElement(_listActionButton.default, {
     ref: listActionButtonRef,
     listActionButton: listActionButton,
     onListAction: onListAction

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

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

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

@@ -3,8 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledSelectLoaderContainer = exports.StyledSelectListTableHeader = exports.StyledSelectListTableBody = exports.StyledSelectListTable = exports.StyledSelectList = void 0;
+exports.StyledSelectLoaderContainer = exports.StyledSelectListTableHeader = exports.StyledSelectListTableBody = exports.StyledSelectListTable = exports.StyledSelectListContainer = exports.StyledSelectList = exports.StyledScrollableContainer = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _themes = require("../../../style/themes");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const StyledSelectList = exports.StyledSelectList = _styledComponents.default.ul`
@@ -98,4 +99,48 @@ const StyledSelectListTableBody = exports.StyledSelectListTableBody = _styledCom
   height: ${({
   listHeight
 }) => `${listHeight}px`};
-`;
+`;
+const StyledSelectListContainer = exports.StyledSelectListContainer = _styledComponents.default.div`
+  background-color: white;
+  box-shadow: var(--boxShadow100);
+  animation: fadeIn 250ms ease-out;
+  position: absolute;
+  z-index: ${({
+  theme
+}) => theme.zIndex.popover};
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  border-radius: var(--borderRadius050);
+  ${({
+  isLoading
+}) => isLoading && "min-height: 150px"};
+
+  @keyframes fadeIn {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+`;
+const StyledScrollableContainer = exports.StyledScrollableContainer = _styledComponents.default.div`
+  max-height: ${({
+  maxHeight
+}) => `${maxHeight}px`};
+  width: 100%;
+  border-top-left-radius: var(--borderRadius050);
+  border-top-right-radius: var(--borderRadius050);
+  overflow-y: auto;
+
+  ${({
+  hasActionButton
+}) => !hasActionButton && (0, _styledComponents.css)`
+      border-bottom-left-radius: var(--borderRadius050);
+      border-bottom-right-radius: var(--borderRadius050);
+    `}
+`;
+StyledSelectListContainer.defaultProps = {
+  theme: _themes.baseTheme
+};

package/package.json

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

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

@@ -1,6 +0,0 @@
-import { SelectListProps } from ".";
-interface StyledSelectListContainerProps extends Pick<SelectListProps, "isLoading"> {
-    maxHeight: number;
-}
-declare const StyledSelectListContainer: import("styled-components").StyledComponent<"div", any, StyledSelectListContainerProps, never>;
-export default StyledSelectListContainer;

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

@@ -1,36 +0,0 @@
-import styled from "styled-components";
-import { baseTheme } from "../../../style/themes";
-const StyledSelectListContainer = styled.div`
-  background-color: white;
-  box-shadow: var(--boxShadow100);
-  animation: fadeIn 250ms ease-out;
-  position: absolute;
-  z-index: ${({
-  theme
-}) => theme.zIndex.popover};
-  max-height: ${({
-  maxHeight
-}) => `${maxHeight}px`};
-  overflow-y: auto;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: flex-start;
-  border-radius: var(--borderRadius050);
-
-  ${({
-  isLoading
-}) => isLoading && "min-height: 150px"};
-
-  @keyframes fadeIn {
-    0% {
-      opacity: 0;
-    }
-    100% {
-      opacity: 1;
-    }
-  }
-`;
-StyledSelectListContainer.defaultProps = {
-  theme: baseTheme
-};
-export default StyledSelectListContainer;

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

@@ -1,6 +0,0 @@
-import { SelectListProps } from ".";
-interface StyledSelectListContainerProps extends Pick<SelectListProps, "isLoading"> {
-    maxHeight: number;
-}
-declare const StyledSelectListContainer: import("styled-components").StyledComponent<"div", any, StyledSelectListContainerProps, never>;
-export default StyledSelectListContainer;

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

@@ -1,43 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _themes = require("../../../style/themes");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const StyledSelectListContainer = _styledComponents.default.div`
-  background-color: white;
-  box-shadow: var(--boxShadow100);
-  animation: fadeIn 250ms ease-out;
-  position: absolute;
-  z-index: ${({
-  theme
-}) => theme.zIndex.popover};
-  max-height: ${({
-  maxHeight
-}) => `${maxHeight}px`};
-  overflow-y: auto;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: flex-start;
-  border-radius: var(--borderRadius050);
-
-  ${({
-  isLoading
-}) => isLoading && "min-height: 150px"};
-
-  @keyframes fadeIn {
-    0% {
-      opacity: 0;
-    }
-    100% {
-      opacity: 1;
-    }
-  }
-`;
-StyledSelectListContainer.defaultProps = {
-  theme: _themes.baseTheme
-};
-var _default = exports.default = StyledSelectListContainer;