carbon-react 111.8.0 → 111.8.2

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

@@ -46,7 +46,7 @@ export const StyledDdDiv = styled.div`
 `;
 export const StyledDt = styled.dt`
   ${space}
-  font-size: 14px;
+  font-size: var(--fontSizes100);
   font-weight: 700;
   color: var(--colorsUtilityYin090);
 `;
@@ -54,8 +54,8 @@ StyledDt.defaultProps = {
   theme: baseTheme
 };
 export const StyledDd = styled.dd`
-  font-size: 14px;
-  font-weight: 700;
+  font-size: var(--fontSizes100);
+  font-weight: var(--fontWeights400);
   color: var(--colorsUtilityYin065);
   margin-left: 0px;
 

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

@@ -415,7 +415,6 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
     isOpen: isOpen
   }, children);
   return /*#__PURE__*/React.createElement(StyledSelect, _extends({
-    ref: containerRef,
     hasTextCursor: true,
     readOnly: readOnly,
     disabled: disabled,

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

@@ -1,12 +1,14 @@
 import styled from "styled-components";
+import { baseTheme } from "../../../style/themes";
 const StyledSelectListContainer = styled.div`
   background-color: white;
   box-shadow: var(--boxShadow100);
-  min-width: 100%;
-  max-width: 870px;
-  height: 100%;
   overflow: hidden;
   animation: fadeIn 250ms ease-out;
+  position: absolute;
+  z-index: ${({
+  theme
+}) => theme.zIndex.popover};
 
   @keyframes fadeIn {
     0% {
@@ -17,4 +19,7 @@ const StyledSelectListContainer = styled.div`
     }
   }
 `;
+StyledSelectListContainer.defaultProps = {
+  theme: baseTheme
+};
 export default StyledSelectListContainer;

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

@@ -2,9 +2,9 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import React, { useEffect, useState, useCallback, useLayoutEffect, useRef, useMemo } from "react";
 import PropTypes from "prop-types";
-import { flip, offset } from "@floating-ui/dom";
+import { flip, offset, size } from "@floating-ui/dom";
 import useScrollBlock from "../../../hooks/__internal__/useScrollBlock";
-import { StyledSelectList, StyledSelectLoaderContainer, StyledPopoverContainer, StyledSelectListTable, StyledSelectListTableHeader, StyledSelectListTableBody } from "./select-list.style";
+import { StyledSelectList, StyledSelectLoaderContainer, StyledSelectListTable, StyledSelectListTableHeader, StyledSelectListTableBody } from "./select-list.style";
 import Popover from "../../../__internal__/popover";
 import OptionRow from "../option-row/option-row.component";
 import updateListScrollTop from "./update-list-scroll";
@@ -42,8 +42,6 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
   ...listProps
 }, listContainerRef) => {
   const [currentOptionsListIndex, setCurrentOptionsListIndex] = useState(-1);
-  const [listHeight, setListHeight] = useState(0);
-  const [listWidth, setListWidth] = useState(null);
   const [scrollbarWidth, setScrollbarWidth] = useState(0);
   const lastFilter = useRef("");
   const listRef = useRef();
@@ -53,24 +51,6 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
     blockScroll,
     allowScroll
   } = useScrollBlock();
-  const updateListHeight = useCallback(() => {
-    if (isOpen) {
-      let newHeight = listRef.current.clientHeight;
-
-      if (listActionButtonRef.current) {
-        newHeight += listActionButtonRef.current.parentElement.clientHeight;
-      }
-
-      setListHeight(`${newHeight}px`);
-    }
-  }, [isOpen]);
-  const listCallbackRef = useCallback(element => {
-    listRef.current = element;
-
-    if (element) {
-      setTimeout(updateListHeight, 0);
-    }
-  }, [updateListHeight]);
   useEffect(() => {
     if (isOpen) {
       blockScroll();
@@ -228,21 +208,6 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
       onListScrollBottom();
     }
   }, [onListScrollBottom]);
-  const assignListWidth = useCallback(() => {
-    if (anchorElement) {
-      const inputBoundingRect = anchorElement.getBoundingClientRect();
-      const width = `${inputBoundingRect.width}px`;
-      setListWidth(width);
-    }
-  }, [anchorElement]);
-  useLayoutEffect(() => {
-    assignListWidth();
-    window.addEventListener("resize", assignListWidth);
-    return () => {
-      window.removeEventListener("resize", assignListWidth);
-    };
-  }, [assignListWidth]);
-  useLayoutEffect(updateListHeight, [children, updateListHeight]);
   useEffect(() => {
     const keyboardEvent = "keydown";
     const listElement = listRef.current;
@@ -286,7 +251,17 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
       listRef.current.scrollTop = listRef.current.scrollHeight;
     }
   }, [children, currentOptionsListIndex, isLoading, lastOptionIndex]);
-  const popoverMiddleware = useMemo(() => [offset(3), ...(flipEnabled ? [flip({
+  const popoverMiddleware = useMemo(() => [offset(3), size({
+    apply({
+      rects,
+      elements
+    }) {
+      Object.assign(elements.floating.style, {
+        width: `${rects.reference.width}px`
+      });
+    }
+
+  }), ...(flipEnabled ? [flip({
     fallbackStrategy: "initialPlacement"
   })] : [])], [flipEnabled]);
 
@@ -307,7 +282,12 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
     }, childrenWithListProps));
   }
 
-  return /*#__PURE__*/React.createElement(Popover, {
+  return /*#__PURE__*/React.createElement(SelectListContext.Provider, {
+    value: {
+      currentOptionsListIndex,
+      multiselectValues
+    }
+  }, /*#__PURE__*/React.createElement(Popover, {
     placement: listPlacement,
     disablePortal: disablePortal,
     reference: anchorRef,
@@ -315,17 +295,9 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
     isOpen: isOpen,
     disableBackgroundUI: true,
     animationFrame: true
-  }, /*#__PURE__*/React.createElement(StyledPopoverContainer, {
-    height: listHeight,
-    width: listWidth,
-    ref: listContainerRef
-  }, /*#__PURE__*/React.createElement(SelectListContext.Provider, {
-    value: {
-      currentOptionsListIndex,
-      multiselectValues
-    }
   }, /*#__PURE__*/React.createElement(StyledSelectListContainer, _extends({
-    "data-element": "select-list-wrapper"
+    "data-element": "select-list-wrapper",
+    ref: listContainerRef
   }, listProps), /*#__PURE__*/React.createElement(StyledSelectList, {
     id: id,
     as: multiColumn ? "div" : "ul",
@@ -333,7 +305,7 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
     "data-element": "select-list",
     role: "listbox",
     "aria-multiselectable": multiselectValues ? true : undefined,
-    ref: listCallbackRef,
+    ref: listRef,
     tabIndex: "-1",
     isLoading: isLoading,
     multiColumn: multiColumn,
@@ -342,7 +314,7 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
     ref: listActionButtonRef,
     listActionButton: listActionButton,
     onListAction: onListAction
-  })))));
+  }))));
 });
 SelectList.propTypes = {
   /** The ID for the parent <div> */

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

@@ -1,25 +1,4 @@
 import styled, { css } from "styled-components";
-import { baseTheme } from "../../../style/themes";
-const overhang = 4; // TODO (design-tokens): no elovation/zindex tokens yet
-
-const StyledPopoverContainer = styled.div`
-  position: absolute;
-  z-index: ${({
-  theme
-}) => theme.zIndex.popover};
-  height: ${({
-  height
-}) => height};
-  width: calc(100% + ${2 * overhang}px);
-  ${({
-  width
-}) => css`
-      width: ${width};
-    `};
-`;
-StyledPopoverContainer.defaultProps = {
-  theme: baseTheme
-};
 const StyledSelectList = styled.ul`
   ${({
   isLoading,
@@ -115,4 +94,4 @@ const StyledSelectListTableBody = styled.tbody`
   table-layout: fixed;
   max-height: 132px;
 `;
-export { StyledPopoverContainer, StyledSelectList, StyledSelectLoaderContainer, StyledSelectListTable, StyledSelectListTableHeader, StyledSelectListTableBody };
+export { StyledSelectList, StyledSelectLoaderContainer, StyledSelectListTable, StyledSelectListTableHeader, StyledSelectListTableBody };

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

@@ -66,7 +66,7 @@ const StyledDdDiv = _styledComponents.default.div`
 exports.StyledDdDiv = StyledDdDiv;
 const StyledDt = _styledComponents.default.dt`
   ${_styledSystem.space}
-  font-size: 14px;
+  font-size: var(--fontSizes100);
   font-weight: 700;
   color: var(--colorsUtilityYin090);
 `;
@@ -75,8 +75,8 @@ StyledDt.defaultProps = {
   theme: _themes.baseTheme
 };
 const StyledDd = _styledComponents.default.dd`
-  font-size: 14px;
-  font-weight: 700;
+  font-size: var(--fontSizes100);
+  font-weight: var(--fontWeights400);
   color: var(--colorsUtilityYin065);
   margin-left: 0px;
 

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

@@ -441,7 +441,6 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
   }, children);
 
   return /*#__PURE__*/_react.default.createElement(_select.default, _extends({
-    ref: containerRef,
     hasTextCursor: true,
     readOnly: readOnly,
     disabled: disabled,

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

@@ -7,16 +7,19 @@ 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);
-  min-width: 100%;
-  max-width: 870px;
-  height: 100%;
   overflow: hidden;
   animation: fadeIn 250ms ease-out;
+  position: absolute;
+  z-index: ${({
+  theme
+}) => theme.zIndex.popover};
 
   @keyframes fadeIn {
     0% {
@@ -27,5 +30,8 @@ const StyledSelectListContainer = _styledComponents.default.div`
     }
   }
 `;
+StyledSelectListContainer.defaultProps = {
+  theme: _themes.baseTheme
+};
 var _default = StyledSelectListContainer;
 exports.default = _default;

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

@@ -72,8 +72,6 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
   ...listProps
 }, listContainerRef) => {
   const [currentOptionsListIndex, setCurrentOptionsListIndex] = (0, _react.useState)(-1);
-  const [listHeight, setListHeight] = (0, _react.useState)(0);
-  const [listWidth, setListWidth] = (0, _react.useState)(null);
   const [scrollbarWidth, setScrollbarWidth] = (0, _react.useState)(0);
   const lastFilter = (0, _react.useRef)("");
   const listRef = (0, _react.useRef)();
@@ -83,24 +81,6 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
     blockScroll,
     allowScroll
   } = (0, _useScrollBlock.default)();
-  const updateListHeight = (0, _react.useCallback)(() => {
-    if (isOpen) {
-      let newHeight = listRef.current.clientHeight;
-
-      if (listActionButtonRef.current) {
-        newHeight += listActionButtonRef.current.parentElement.clientHeight;
-      }
-
-      setListHeight(`${newHeight}px`);
-    }
-  }, [isOpen]);
-  const listCallbackRef = (0, _react.useCallback)(element => {
-    listRef.current = element;
-
-    if (element) {
-      setTimeout(updateListHeight, 0);
-    }
-  }, [updateListHeight]);
   (0, _react.useEffect)(() => {
     if (isOpen) {
       blockScroll();
@@ -258,21 +238,6 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
       onListScrollBottom();
     }
   }, [onListScrollBottom]);
-  const assignListWidth = (0, _react.useCallback)(() => {
-    if (anchorElement) {
-      const inputBoundingRect = anchorElement.getBoundingClientRect();
-      const width = `${inputBoundingRect.width}px`;
-      setListWidth(width);
-    }
-  }, [anchorElement]);
-  (0, _react.useLayoutEffect)(() => {
-    assignListWidth();
-    window.addEventListener("resize", assignListWidth);
-    return () => {
-      window.removeEventListener("resize", assignListWidth);
-    };
-  }, [assignListWidth]);
-  (0, _react.useLayoutEffect)(updateListHeight, [children, updateListHeight]);
   (0, _react.useEffect)(() => {
     const keyboardEvent = "keydown";
     const listElement = listRef.current;
@@ -316,7 +281,17 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
       listRef.current.scrollTop = listRef.current.scrollHeight;
     }
   }, [children, currentOptionsListIndex, isLoading, lastOptionIndex]);
-  const popoverMiddleware = (0, _react.useMemo)(() => [(0, _dom.offset)(3), ...(flipEnabled ? [(0, _dom.flip)({
+  const popoverMiddleware = (0, _react.useMemo)(() => [(0, _dom.offset)(3), (0, _dom.size)({
+    apply({
+      rects,
+      elements
+    }) {
+      Object.assign(elements.floating.style, {
+        width: `${rects.reference.width}px`
+      });
+    }
+
+  }), ...(flipEnabled ? [(0, _dom.flip)({
     fallbackStrategy: "initialPlacement"
   })] : [])], [flipEnabled]);
 
@@ -337,7 +312,12 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
     }, childrenWithListProps));
   }
 
-  return /*#__PURE__*/_react.default.createElement(_popover.default, {
+  return /*#__PURE__*/_react.default.createElement(_selectListContext.default.Provider, {
+    value: {
+      currentOptionsListIndex,
+      multiselectValues
+    }
+  }, /*#__PURE__*/_react.default.createElement(_popover.default, {
     placement: listPlacement,
     disablePortal: disablePortal,
     reference: anchorRef,
@@ -345,17 +325,9 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
     isOpen: isOpen,
     disableBackgroundUI: true,
     animationFrame: true
-  }, /*#__PURE__*/_react.default.createElement(_selectList.StyledPopoverContainer, {
-    height: listHeight,
-    width: listWidth,
-    ref: listContainerRef
-  }, /*#__PURE__*/_react.default.createElement(_selectListContext.default.Provider, {
-    value: {
-      currentOptionsListIndex,
-      multiselectValues
-    }
   }, /*#__PURE__*/_react.default.createElement(_selectListContainer.default, _extends({
-    "data-element": "select-list-wrapper"
+    "data-element": "select-list-wrapper",
+    ref: listContainerRef
   }, listProps), /*#__PURE__*/_react.default.createElement(_selectList.StyledSelectList, {
     id: id,
     as: multiColumn ? "div" : "ul",
@@ -363,7 +335,7 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
     "data-element": "select-list",
     role: "listbox",
     "aria-multiselectable": multiselectValues ? true : undefined,
-    ref: listCallbackRef,
+    ref: listRef,
     tabIndex: "-1",
     isLoading: isLoading,
     multiColumn: multiColumn,
@@ -372,7 +344,7 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
     ref: listActionButtonRef,
     listActionButton: listActionButton,
     onListAction: onListAction
-  })))));
+  }))));
 });
 
 SelectList.propTypes = {

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

@@ -3,37 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledSelectListTableBody = exports.StyledSelectListTableHeader = exports.StyledSelectListTable = exports.StyledSelectLoaderContainer = exports.StyledSelectList = exports.StyledPopoverContainer = void 0;
+exports.StyledSelectListTableBody = exports.StyledSelectListTableHeader = exports.StyledSelectListTable = exports.StyledSelectLoaderContainer = exports.StyledSelectList = void 0;
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _themes = require("../../../style/themes");
-
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-const overhang = 4; // TODO (design-tokens): no elovation/zindex tokens yet
-
-const StyledPopoverContainer = _styledComponents.default.div`
-  position: absolute;
-  z-index: ${({
-  theme
-}) => theme.zIndex.popover};
-  height: ${({
-  height
-}) => height};
-  width: calc(100% + ${2 * overhang}px);
-  ${({
-  width
-}) => (0, _styledComponents.css)`
-      width: ${width};
-    `};
-`;
-exports.StyledPopoverContainer = StyledPopoverContainer;
-StyledPopoverContainer.defaultProps = {
-  theme: _themes.baseTheme
-};
 const StyledSelectList = _styledComponents.default.ul`
   ${({
   isLoading,

package/package.json

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