carbon-react 104.12.2 → 104.16.0

package/lib/components/profile/profile-test.stories.js

@@ -0,0 +1,75 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DefaultStory = exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _specialCharacters = _interopRequireWildcard(require("../../../.storybook/utils/argTypes/specialCharacters"));
+
+var _profile = _interopRequireDefault(require("./profile.component"));
+
+var _profile2 = require("./profile.config");
+
+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; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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); }
+
+var _default = {
+  title: "Profile/Test",
+  parameters: {
+    info: {
+      disable: true
+    },
+    chromatic: {
+      disable: true
+    }
+  },
+  argTypes: {
+    size: {
+      control: {
+        type: "select",
+        options: _profile2.PROFILE_SIZES
+      }
+    },
+    emailSpecialCharacters: {
+      options: [..._specialCharacters.default.options, ..._specialCharacters.email.options],
+      mapping: { ..._specialCharacters.default.mapping,
+        ..._specialCharacters.email.mapping
+      }
+    },
+    nameSpecialCharacters: _specialCharacters.default
+  }
+};
+exports.default = _default;
+
+const DefaultStory = ({
+  email,
+  emailSpecialCharacters,
+  name,
+  nameSpecialCharacters,
+  ...args
+}) => /*#__PURE__*/_react.default.createElement(_profile.default, _extends({
+  email: email || emailSpecialCharacters,
+  name: name || nameSpecialCharacters
+}, args));
+
+exports.DefaultStory = DefaultStory;
+DefaultStory.story = {
+  name: "default",
+  args: {
+    email: "johnsmith@sage.com",
+    initials: "JS",
+    size: _profile2.PROFILE_SIZES[0],
+    name: "John Smith",
+    src: "",
+    emailSpecialCharacters: undefined,
+    nameSpecialCharacters: undefined
+  }
+};

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

@@ -437,21 +437,26 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
   }, children);
 
   return /*#__PURE__*/_react.default.createElement(_select.default, _extends({
+    "aria-expanded": isOpen,
+    "aria-haspopup": "listbox",
     ref: containerRef,
     hasTextCursor: true,
     readOnly: readOnly,
     disabled: disabled,
     "data-component": dataComponent,
     "data-role": dataRole,
-    "data-element": dataElement
-  }, (0, _utils.filterStyledSystemMarginProps)(textboxProps)), /*#__PURE__*/_react.default.createElement(_selectTextbox.default, _extends({
+    "data-element": dataElement,
+    isOpen: isOpen
+  }, (0, _utils.filterStyledSystemMarginProps)(textboxProps)), /*#__PURE__*/_react.default.createElement("div", {
+    ref: containerRef
+  }, /*#__PURE__*/_react.default.createElement(_selectTextbox.default, _extends({
     activeDescendantId: activeDescendantId,
     "aria-controls": isOpen ? selectListId.current : undefined,
     isOpen: isOpen,
     hasTextCursor: true,
     labelId: labelId.current,
-    positionedChildren: disablePortal && isOpen && selectList
-  }, getTextboxProps())), !disablePortal && isOpen && selectList);
+    textboxRef: textboxRef
+  }, getTextboxProps()))), isOpen && selectList);
 });
 
 FilterableSelect.propTypes = { ..._selectTextbox.formInputPropTypes,

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

@@ -456,15 +456,19 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
   }, children);
 
   return /*#__PURE__*/_react.default.createElement(_multiSelect.StyledSelectMultiSelect, _extends({
-    ref: containerRef,
+    "aria-expanded": isOpen,
+    "aria-haspopup": "listbox",
     disabled: disabled,
     readOnly: readOnly,
     hasTextCursor: true,
     size: size,
     "data-component": dataComponent,
     "data-role": dataRole,
-    "data-element": dataElement
-  }, (0, _utils.filterStyledSystemMarginProps)(textboxProps)), /*#__PURE__*/_react.default.createElement(_multiSelect.StyledAccessibilityLabelContainer, {
+    "data-element": dataElement,
+    isOpen: isOpen
+  }, (0, _utils.filterStyledSystemMarginProps)(textboxProps)), /*#__PURE__*/_react.default.createElement("div", {
+    ref: containerRef
+  }, /*#__PURE__*/_react.default.createElement(_multiSelect.StyledAccessibilityLabelContainer, {
     "data-element": "accessibility-label",
     id: accessibilityLabelId.current
   }, accessibilityLabel), /*#__PURE__*/_react.default.createElement(_selectTextbox.default, _extends({
@@ -474,8 +478,8 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
     hasTextCursor: true,
     isOpen: isOpen,
     labelId: labelId.current,
-    positionedChildren: disablePortal && isOpen && selectList
-  }, getTextboxProps())), !disablePortal && isOpen && selectList);
+    textboxRef: textboxRef
+  }, getTextboxProps()))), isOpen && selectList);
 });
 
 MultiSelect.propTypes = { ..._selectTextbox.formInputPropTypes,

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

@@ -44,6 +44,7 @@ const StyledSelectMultiSelect = (0, _styledComponents.default)(_select.default)`
     padding-right: ${({
   size
 }) => _inputSizes.default[size].height};
+    position: relative;
   }
 `;
 exports.StyledSelectMultiSelect = StyledSelectMultiSelect;

package/lib/components/select/option-group-header/option-group-header.style.js

@@ -26,16 +26,16 @@ const StyledOptionGroupHeader = _styledComponents.default.div`
     line-height: 18px;
     text-align: left;
     margin: 0;
-    color: var(--colorsYin055);
+    color: var(--colorsUtilityYin055);
   }
 
   ${_icon.default} {
     margin-right: 4px;
     margin-left: -5px;
-    color: var(--colorsYin055);
+    color: var(--colorsUtilityYin055);
 
     &:hover {
-      color: var(--colorsYin055);
+      color: var(--colorsUtilityYin055);
     }
   }
 `;

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

@@ -9,6 +9,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _useScrollBlock = _interopRequireDefault(require("../../../hooks/__internal__/useScrollBlock"));
+
 var _selectList = require("./select-list.style");
 
 var _popover = _interopRequireDefault(require("../../../__internal__/popover"));
@@ -82,6 +84,16 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
   const listRef = (0, _react.useRef)();
   const tableRef = (0, _react.useRef)();
   const listActionButtonRef = (0, _react.useRef)();
+  const {
+    blockScroll,
+    allowScroll
+  } = (0, _useScrollBlock.default)();
+  (0, _react.useEffect)(() => {
+    blockScroll();
+    return () => {
+      allowScroll();
+    };
+  }, [allowScroll, blockScroll]);
   const setPlacementCallback = (0, _react.useCallback)(popper => {
     placement.current = popper.placement;
   }, [placement]);
@@ -222,12 +234,12 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
     }
   }, [onListScrollBottom]);
   const assignListWidth = (0, _react.useCallback)(() => {
-    if (!disablePortal && anchorElement) {
+    if (anchorElement) {
       const inputBoundingRect = anchorElement.getBoundingClientRect();
       const width = `${inputBoundingRect.width}px`;
       setListWidth(width);
     }
-  }, [anchorElement, disablePortal]);
+  }, [anchorElement]);
   (0, _react.useLayoutEffect)(() => {
     assignListWidth();
     window.addEventListener("resize", assignListWidth);
@@ -288,10 +300,10 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
       listRef.current.scrollTop = listRef.current.scrollHeight;
     }
   }, [children, currentOptionsListIndex, isLoading, lastOptionIndex]);
-  const popoverModifiers = [...fixedPopoverModifiers, {
+  const popoverModifiers = (0, _react.useMemo)(() => [...fixedPopoverModifiers, {
     name: "flip",
     enabled: flipEnabled
-  }];
+  }], [flipEnabled]);
 
   function isNavigationKey(keyEvent) {
     return keyEvent === "ArrowDown" || keyEvent === "ArrowUp" || keyEvent === "Home" || keyEvent === "End";
@@ -317,7 +329,8 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
     disablePortal: disablePortal,
     reference: anchorRef,
     onFirstUpdate: setPlacementCallback,
-    modifiers: popoverModifiers
+    modifiers: popoverModifiers,
+    disableBackgroundUI: true
   }, /*#__PURE__*/_react.default.createElement(_selectList.StyledPopoverContainer, {
     height: listHeight,
     width: listWidth,

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

@@ -101,7 +101,7 @@ const StyledSelectListTableHeader = _styledComponents.default.thead`
     font-weight: 900;
     font-size: 12px;
     text-transform: uppercase;
-    color: var(--colorsYin055);
+    color: var(--colorsUtilityYin055);
     :after {
       content: "";
       display: block;
@@ -110,7 +110,7 @@ const StyledSelectListTableHeader = _styledComponents.default.thead`
       left: 0px;
       background-image: linear-gradient(
         var(--colorsComponentsNavigationYin100),
-        var(--colorsYang100)
+        var(--colorsUtilityYang100)
       );
       opacity: 0.03;
       height: 8px;

package/lib/components/select/select-textbox/select-textbox.component.d.ts

@@ -1,5 +1,5 @@
 export default SelectTextbox;
-declare function SelectTextbox({ accessibilityLabelId, "aria-controls": ariaControls, value, disabled, isOpen, readOnly, placeholder, labelId, size, onClick, onFocus, onBlur, onChange, selectedValue, required, hasTextCursor, transparent, activeDescendantId, ...restProps }: {
+declare function SelectTextbox({ accessibilityLabelId, "aria-controls": ariaControls, value, disabled, isOpen, readOnly, placeholder, labelId, size, onClick, onFocus, onBlur, onChange, selectedValue, required, textboxRef, hasTextCursor, transparent, activeDescendantId, ...restProps }: {
     [x: string]: any;
     accessibilityLabelId?: string | undefined;
     "aria-controls": any;
@@ -16,6 +16,7 @@ declare function SelectTextbox({ accessibilityLabelId, "aria-controls": ariaCont
     onChange: any;
     selectedValue: any;
     required: any;
+    textboxRef: any;
     hasTextCursor: any;
     transparent: any;
     activeDescendantId: any;

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

@@ -9,14 +9,18 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _textbox = _interopRequireDefault(require("../../textbox"));
+var _core = require("@popperjs/core");
 
-var _useLocale = _interopRequireDefault(require("../../../hooks/__internal__/useLocale"));
+var _textbox = _interopRequireDefault(require("../../textbox"));
 
 var _selectText = _interopRequireDefault(require("../__internal__/select-text/select-text.component"));
 
 var _guid = _interopRequireDefault(require("../../../__internal__/utils/helpers/guid/guid"));
 
+var _useLocale = _interopRequireDefault(require("../../../hooks/__internal__/useLocale"));
+
+var _useResizeObserver = _interopRequireDefault(require("../../../hooks/__internal__/useResizeObserver"));
+
 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; }
@@ -25,6 +29,42 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 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); }
 
+const modifiers = [{
+  name: "flip",
+  enabled: false
+}, {
+  name: "offset",
+  options: {
+    offset: ({
+      placement,
+      reference
+    }) => {
+      if (placement === "bottom") {
+        return [0, -reference.height];
+      }
+
+      return [];
+    }
+  }
+}, {
+  name: "sameDimensions",
+  enabled: true,
+  phase: "beforeWrite",
+  requires: ["computeStyles"],
+  fn: ({
+    state
+  }) => {
+    state.styles.popper.width = `${state.rects.reference.width}px`;
+    state.styles.reference.height = `${state.rects.popper.height}px`;
+  },
+  effect: ({
+    state
+  }) => {
+    state.elements.popper.style.width = `${state.elements.reference.offsetWidth}px`;
+    state.elements.reference.height = `${state.elements.popper.height}px`;
+  }
+}];
+
 const SelectTextbox = ({
   accessibilityLabelId = "",
   "aria-controls": ariaControls,
@@ -41,11 +81,36 @@ const SelectTextbox = ({
   onChange,
   selectedValue,
   required,
+  textboxRef,
   hasTextCursor,
   transparent,
   activeDescendantId,
   ...restProps
 }) => {
+  const popperInstance = (0, _react.useRef)();
+  (0, _react.useLayoutEffect)(() => {
+    if (textboxRef && isOpen) {
+      popperInstance.current = (0, _core.createPopper)(textboxRef.parentElement.parentElement, textboxRef.parentElement, {
+        strategy: "fixed",
+        modifiers
+      });
+    }
+
+    return () => {
+      if (popperInstance.current) {
+        popperInstance.current.destroy();
+        popperInstance.current = null;
+      }
+    };
+  }, [textboxRef, isOpen]);
+  const resizeObserverRef = (0, _react.useMemo)(() => ({
+    current: textboxRef === null || textboxRef === void 0 ? void 0 : textboxRef.parentElement
+  }), [textboxRef]);
+  (0, _useResizeObserver.default)(resizeObserverRef, () => {
+    var _popperInstance$curre;
+
+    popperInstance === null || popperInstance === void 0 ? void 0 : (_popperInstance$curre = popperInstance.current) === null || _popperInstance$curre === void 0 ? void 0 : _popperInstance$curre.update();
+  }, !isOpen);
   const l = (0, _useLocale.default)();
   const textId = (0, _react.useRef)((0, _guid.default)());
 

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

@@ -28,7 +28,9 @@ const StyledSelect = _styledComponents.default.div`
   hasTextCursor,
   disabled,
   readOnly,
-  transparent
+  theme,
+  transparent,
+  isOpen
 }) => (0, _styledComponents.css)`
     ${_styledSystem.margin}
 
@@ -44,8 +46,8 @@ const StyledSelect = _styledComponents.default.div`
       `}
 
       ${readOnly && (0, _styledComponents.css)`
-        cursor: "text";
-        color: var(--colorsYin065);
+        cursor: ${hasTextCursor ? "text" : "default"};
+        color: var(--colorsActionMinorYin090);
         text-shadow: none;
       `}
     }
@@ -54,6 +56,10 @@ const StyledSelect = _styledComponents.default.div`
       cursor: ${hasTextCursor ? "text" : "pointer"};
       padding-right: 0;
 
+      ${isOpen && (0, _styledComponents.css)`
+        z-index: ${theme.zIndex.aboveAll};
+      `}
+
       ${disabled && (0, _styledComponents.css)`
         cursor: not-allowed;
       `}

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

@@ -365,18 +365,21 @@ const SimpleSelect = /*#__PURE__*/_react.default.forwardRef(({
     transparent: transparent,
     disabled: disabled,
     readOnly: readOnly,
-    ref: containerRef,
+    "aria-expanded": isOpen,
+    "aria-haspopup": "listbox",
     "data-component": dataComponent,
     "data-role": dataRole,
-    "data-element": dataElement
-  }, (0, _utils.filterStyledSystemMarginProps)(props)), /*#__PURE__*/_react.default.createElement(_selectTextbox.default, _extends({
-    isOpen: isOpen,
-    labelId: labelId.current,
+    "data-element": dataElement,
+    isOpen: isOpen
+  }, (0, _utils.filterStyledSystemMarginProps)(props)), /*#__PURE__*/_react.default.createElement("div", {
+    ref: containerRef
+  }, /*#__PURE__*/_react.default.createElement(_selectTextbox.default, _extends({
+    "aria-controls": isOpen ? selectListId.current : undefined,
     activeDescendantId: activeDescendantId,
-    "aria-controls": isOpen ? selectListId.current : undefined
-  }, getTextboxProps(), {
-    positionedChildren: disablePortal && isOpen && selectList
-  })), !disablePortal && isOpen && selectList);
+    labelId: labelId.current,
+    isOpen: isOpen,
+    textboxRef: textboxRef
+  }, getTextboxProps()))), isOpen && selectList);
 });
 
 SimpleSelect.propTypes = {

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

@@ -0,0 +1,4 @@
+export default function useScrollBlock(): {
+  blockScroll: () => void;
+  allowScroll: () => void;
+};

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

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

package/lib/hooks/__internal__/useScrollBlock/scroll-block-manager.d.ts

@@ -0,0 +1,10 @@
+export default ScrollBlockManager;
+declare class ScrollBlockManager {
+    components: any;
+    originalValues: any;
+    registerComponent(id: any): void;
+    unregisterComponent(id: any): void;
+    saveOriginalValues(values: any): void;
+    getOriginalValues(): any;
+    isBlocked(): boolean;
+}

package/lib/hooks/__internal__/useScrollBlock/scroll-block-manager.js

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+let ScrollBlockManager = /*#__PURE__*/function () {
+  function ScrollBlockManager() {
+    _classCallCheck(this, ScrollBlockManager);
+
+    // Due to possibility of multiple carbon versions using it
+    // it is necessary to maintain same structure in this global variable
+    if (!window.__CARBON_INTERNALS_SCROLL_BLOCKERS) {
+      window.__CARBON_INTERNALS_SCROLL_BLOCKERS = {
+        components: {},
+        originalValues: []
+      };
+    }
+
+    this.components = window.__CARBON_INTERNALS_SCROLL_BLOCKERS.components;
+    this.originalValues = window.__CARBON_INTERNALS_SCROLL_BLOCKERS.originalValues;
+  }
+
+  _createClass(ScrollBlockManager, [{
+    key: "registerComponent",
+    value: function registerComponent(id) {
+      this.components[id] = true;
+    }
+  }, {
+    key: "unregisterComponent",
+    value: function unregisterComponent(id) {
+      delete this.components[id];
+    }
+  }, {
+    key: "saveOriginalValues",
+    value: function saveOriginalValues(values) {
+      this.originalValues.length = 0;
+      this.originalValues.push(...values);
+    }
+  }, {
+    key: "getOriginalValues",
+    value: function getOriginalValues() {
+      return this.originalValues;
+    }
+  }, {
+    key: "isBlocked",
+    value: function isBlocked() {
+      return Object.entries(this.components).length !== 0;
+    }
+  }]);
+
+  return ScrollBlockManager;
+}();
+
+var _default = ScrollBlockManager;
+exports.default = _default;

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

@@ -0,0 +1,5 @@
+export default useScrollBlock;
+declare function useScrollBlock(): {
+    blockScroll: () => void;
+    allowScroll: () => void;
+};

package/lib/hooks/__internal__/useScrollBlock/useScrollBlock.js

@@ -0,0 +1,95 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _guid = _interopRequireDefault(require("../../../__internal__/utils/helpers/guid"));
+
+var _scrollBlockManager = _interopRequireDefault(require("./scroll-block-manager"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const scrollBlockManager = new _scrollBlockManager.default();
+/* istanbul ignore next */
+
+const safeDocument = typeof document !== "undefined" ? document : {};
+
+const useScrollBlock = () => {
+  const {
+    current: containerGuid
+  } = (0, _react.useRef)((0, _guid.default)());
+  const rules = (0, _react.useMemo)(() => {
+    const {
+      documentElement,
+      body
+    } = safeDocument;
+    const scrollBarWidth = window.innerWidth - documentElement.clientWidth;
+    const bodyPaddingRight = parseInt(window.getComputedStyle(body).getPropertyValue("padding-right")) || 0;
+    return [{
+      element: documentElement,
+      property: "position",
+      blockingValue: "relative"
+    }, {
+      element: documentElement,
+      property: "overflow",
+      blockingValue: "hidden"
+    }, {
+      element: body,
+      property: "position",
+      blockingValue: "relative"
+    }, {
+      element: body,
+      property: "overflow",
+      blockingValue: "hidden"
+    }, {
+      element: body,
+      property: "paddingRight",
+      blockingValue: `${bodyPaddingRight + scrollBarWidth}px`
+    }];
+  }, []);
+  const blockScroll = (0, _react.useCallback)(() => {
+    const isBlocked = scrollBlockManager.isBlocked();
+    scrollBlockManager.registerComponent(containerGuid);
+
+    if (isBlocked) {
+      return;
+    }
+
+    const originalValues = rules.map(({
+      element,
+      property
+    }) => element.style[property]);
+    scrollBlockManager.saveOriginalValues(originalValues);
+    rules.forEach(({
+      element,
+      property,
+      blockingValue
+    }) => {
+      element.style[property] = blockingValue;
+    });
+  }, [containerGuid, rules]);
+  const allowScroll = (0, _react.useCallback)(() => {
+    scrollBlockManager.unregisterComponent(containerGuid);
+    const isBlocked = scrollBlockManager.isBlocked();
+    if (isBlocked) return;
+    const originalValues = scrollBlockManager.getOriginalValues();
+    rules.forEach(({
+      element,
+      property
+    }, index) => {
+      element.style[property] = originalValues[index];
+    });
+    scrollBlockManager.saveOriginalValues([]);
+  }, [containerGuid, rules]);
+  return {
+    blockScroll,
+    allowScroll
+  };
+};
+
+var _default = useScrollBlock;
+exports.default = _default;

package/lib/style/themes/base/base-theme.config.d.ts

@@ -336,9 +336,6 @@ declare function _default(palette: any): {
         background: any;
         altHover: any;
     };
-    note: {
-        timeStamp: string;
-    };
     editorLinkPreview: {
         background: any;
         hoverBackground: any;
@@ -348,11 +345,11 @@ declare function _default(palette: any): {
     zIndex: {
         smallOverlay: number;
         overlay: number;
-        popover: number;
         nav: number;
         modal: number;
         header: number;
         fullScreenModal: number;
+        popover: number;
         notification: number;
         aboveAll: number;
     };
@@ -546,6 +543,7 @@ declare function _default(palette: any): {
         colorsSemanticNegativeYang100: string;
         colorsSemanticCaution400: string;
         colorsSemanticCaution600: string;
+        colorsSemanticCaution650: string;
         colorsSemanticCautionTransparent: string;
         colorsSemanticCautionYin030: string;
         colorsSemanticCautionYin055: string;