carbon-react 104.58.4 → 104.58.7

package/esm/components/pager/pager.component.js

@@ -110,8 +110,7 @@ const Pager = ({
       onChange: ev => setValue(ev.target.value),
       onBlur: () => setValue(currentPageSize),
       onKeyDown: handleKeyDown,
-      "data-element": "page-select",
-      id: "page-select"
+      "data-element": "page-select"
     }, pageSizeSelectionOptions.map(sizeOption => /*#__PURE__*/React.createElement(Option, {
       key: sizeOption.id,
       text: sizeOption.id,

package/esm/components/textarea/textarea.component.js

@@ -11,7 +11,7 @@ import { InputBehaviour } from "../../__internal__/input-behaviour";
 import { filterStyledSystemMarginProps } from "../../style/utils";
 import InputIconToggle from "../../__internal__/input-icon-toggle";
 import guid from "../../__internal__/utils/helpers/guid";
-import StyledTextarea from "./textarea.style";
+import StyledTextarea, { MIN_HEIGHT } from "./textarea.style";
 import LocaleContext from "../../__internal__/i18n-context";
 import { TooltipProvider } from "../../__internal__/tooltip-provider";
 import useInputAccessibility from "../../hooks/__internal__/useInputAccessibility";
@@ -72,13 +72,12 @@ const Textarea = ({
     current: id
   } = useRef(idProp || guid());
   const inputRef = useRef();
-  const minHeight = useRef(0);
+  const minHeight = useRef(MIN_HEIGHT);
 
   const expandTextarea = () => {
     const textarea = inputRef.current;
 
     if (textarea.scrollHeight > minHeight.current) {
-      // Reset height to zero - IE specific
       textarea.style.height = "0px"; // Set the height so all content is shown
 
       textarea.style.height = `${Math.max(textarea.scrollHeight, minHeight.current)}px`;
@@ -99,6 +98,11 @@ const Textarea = ({
     label,
     fieldHelp
   });
+  useEffect(() => {
+    if (rows) {
+      minHeight.current = inputRef.current.scrollHeight;
+    }
+  }, [rows]);
   useEffect(() => {
     if (expandable) {
       expandTextarea();

package/esm/components/textarea/textarea.style.d.ts

@@ -1,2 +1,3 @@
+export const MIN_HEIGHT: 40;
 export default StyledTextarea;
 declare const StyledTextarea: import("styled-components").StyledComponent<"div", any, {}, never>;

package/esm/components/textarea/textarea.style.js

@@ -4,12 +4,13 @@ import StyledInput from "../../__internal__/input/input.style";
 import { StyledLabelContainer } from "../../__internal__/label/label.style";
 import InputIconToggleStyle from "../../__internal__/input-icon-toggle/input-icon-toggle.style";
 import BaseTheme from "../../style/themes/base";
+export const MIN_HEIGHT = 40;
 const StyledTextarea = styled.div`
   ${margin};
 
   ${StyledInput} {
     resize: none;
-    min-height: 40px;
+    min-height: ${MIN_HEIGHT}px;
     margin-top: 5px;
     margin-bottom: 5px;
   }

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

@@ -5,6 +5,8 @@ declare class ScrollBlockManager {
     registerComponent(id: any): void;
     unregisterComponent(id: any): void;
     saveOriginalValues(values: any): void;
+    saveRestoreValuesCallback(callback: any): void;
+    getRestoreValuesCallback(): any;
     getOriginalValues(): any;
     isBlocked(): boolean;
 }

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

@@ -4,6 +4,8 @@ function _defineProperties(target, props) { for (var i = 0; i < props.length; i+
 
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
 
+// TODO: This component can be refactored to remove redundant code after
+// we can confirm that all Sage products use version 105.0.0^
 let ScrollBlockManager = /*#__PURE__*/function () {
   function ScrollBlockManager() {
     _classCallCheck(this, ScrollBlockManager);
@@ -13,11 +15,13 @@ let ScrollBlockManager = /*#__PURE__*/function () {
     if (!window.__CARBON_INTERNALS_SCROLL_BLOCKERS) {
       window.__CARBON_INTERNALS_SCROLL_BLOCKERS = {
         components: {},
+        // originalValues can be removed
         originalValues: []
       };
     }
 
-    this.components = window.__CARBON_INTERNALS_SCROLL_BLOCKERS.components;
+    this.components = window.__CARBON_INTERNALS_SCROLL_BLOCKERS.components; // TODO: originalValues can be removed
+
     this.originalValues = window.__CARBON_INTERNALS_SCROLL_BLOCKERS.originalValues;
   }
 
@@ -30,13 +34,25 @@ let ScrollBlockManager = /*#__PURE__*/function () {
     key: "unregisterComponent",
     value: function unregisterComponent(id) {
       delete this.components[id];
-    }
+    } // TODO: saveOriginalValues can be removed
+
   }, {
     key: "saveOriginalValues",
     value: function saveOriginalValues(values) {
       this.originalValues.length = 0;
       this.originalValues.push(...values);
     }
+  }, {
+    key: "saveRestoreValuesCallback",
+    value: function saveRestoreValuesCallback(callback) {
+      window.__CARBON_INTERNALS_SCROLL_BLOCKERS.restoreValues = callback;
+    }
+  }, {
+    key: "getRestoreValuesCallback",
+    value: function getRestoreValuesCallback() {
+      return window.__CARBON_INTERNALS_SCROLL_BLOCKERS.restoreValues;
+    } // TODO: getOriginalValues can be removed
+
   }, {
     key: "getOriginalValues",
     value: function getOriginalValues() {

package/esm/hooks/__internal__/useScrollBlock/useScrollBlock.js

@@ -1,6 +1,8 @@
 import { useRef, useCallback, useMemo } from "react";
 import guid from "../../../__internal__/utils/helpers/guid";
-import ScrollBlockManager from "./scroll-block-manager";
+import ScrollBlockManager from "./scroll-block-manager"; // TODO: This component can be refactored to remove redundant code after
+// we can confirm that all Sage products use version 105.0.0^
+
 const scrollBlockManager = new ScrollBlockManager();
 /* istanbul ignore next */
 
@@ -10,6 +12,7 @@ const useScrollBlock = () => {
   const {
     current: containerGuid
   } = useRef(guid());
+  const originalValuesRef = useRef();
   const rules = useMemo(() => {
     const {
       documentElement,
@@ -17,7 +20,8 @@ const useScrollBlock = () => {
     } = safeDocument;
     const scrollBarWidth = window.innerWidth - documentElement.clientWidth;
     const bodyPaddingRight = parseInt(window.getComputedStyle(body).getPropertyValue("padding-right")) || 0;
-    return [{
+    return [// TODO: First two entries of this array with the documentElement can be removed
+    {
       element: documentElement,
       property: "position",
       blockingValue: "relative"
@@ -39,6 +43,14 @@ const useScrollBlock = () => {
       blockingValue: `${bodyPaddingRight + scrollBarWidth}px`
     }];
   }, []);
+  const restoreValues = useCallback(() => {
+    rules.forEach(({
+      element,
+      property
+    }, index) => {
+      element.style[property] = originalValuesRef.current[index];
+    });
+  }, [rules]);
   const blockScroll = useCallback(() => {
     const isBlocked = scrollBlockManager.isBlocked();
     scrollBlockManager.registerComponent(containerGuid);
@@ -51,19 +63,32 @@ const useScrollBlock = () => {
       element,
       property
     }) => element.style[property]);
-    scrollBlockManager.saveOriginalValues(originalValues);
-    rules.forEach(({
+    originalValuesRef.current = originalValues;
+    scrollBlockManager.saveRestoreValuesCallback(restoreValues); // TODO: saveOriginalValues can be removed
+
+    scrollBlockManager.saveOriginalValues(originalValues); // TODO: slice san be removed
+
+    rules.slice(-3).forEach(({
       element,
       property,
       blockingValue
     }) => {
       element.style[property] = blockingValue;
     });
-  }, [containerGuid, rules]);
+  }, [restoreValues, containerGuid, rules]);
   const allowScroll = useCallback(() => {
     scrollBlockManager.unregisterComponent(containerGuid);
     const isBlocked = scrollBlockManager.isBlocked();
     if (isBlocked) return;
+    const restoreValuesCallback = scrollBlockManager.getRestoreValuesCallback();
+
+    if (restoreValuesCallback) {
+      restoreValuesCallback();
+      scrollBlockManager.saveRestoreValuesCallback(null);
+      return;
+    } // TODO: all of the code below can be removed from this block
+
+
     const originalValues = scrollBlockManager.getOriginalValues();
     rules.forEach(({
       element,

package/lib/components/pager/pager.component.js

@@ -130,8 +130,7 @@ const Pager = ({
       onChange: ev => setValue(ev.target.value),
       onBlur: () => setValue(currentPageSize),
       onKeyDown: handleKeyDown,
-      "data-element": "page-select",
-      id: "page-select"
+      "data-element": "page-select"
     }, pageSizeSelectionOptions.map(sizeOption => /*#__PURE__*/_react.default.createElement(_option.default, {
       key: sizeOption.id,
       text: sizeOption.id,

package/lib/components/textarea/textarea.component.js

@@ -27,7 +27,7 @@ var _inputIconToggle = _interopRequireDefault(require("../../__internal__/input-
 
 var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/guid"));
 
-var _textarea = _interopRequireDefault(require("./textarea.style"));
+var _textarea = _interopRequireWildcard(require("./textarea.style"));
 
 var _i18nContext = _interopRequireDefault(require("../../__internal__/i18n-context"));
 
@@ -102,13 +102,12 @@ const Textarea = ({
     current: id
   } = (0, _react.useRef)(idProp || (0, _guid.default)());
   const inputRef = (0, _react.useRef)();
-  const minHeight = (0, _react.useRef)(0);
+  const minHeight = (0, _react.useRef)(_textarea.MIN_HEIGHT);
 
   const expandTextarea = () => {
     const textarea = inputRef.current;
 
     if (textarea.scrollHeight > minHeight.current) {
-      // Reset height to zero - IE specific
       textarea.style.height = "0px"; // Set the height so all content is shown
 
       textarea.style.height = `${Math.max(textarea.scrollHeight, minHeight.current)}px`;
@@ -129,6 +128,11 @@ const Textarea = ({
     label,
     fieldHelp
   });
+  (0, _react.useEffect)(() => {
+    if (rows) {
+      minHeight.current = inputRef.current.scrollHeight;
+    }
+  }, [rows]);
   (0, _react.useEffect)(() => {
     if (expandable) {
       expandTextarea();

package/lib/components/textarea/textarea.style.d.ts

@@ -1,2 +1,3 @@
+export const MIN_HEIGHT: 40;
 export default StyledTextarea;
 declare const StyledTextarea: import("styled-components").StyledComponent<"div", any, {}, never>;

package/lib/components/textarea/textarea.style.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.MIN_HEIGHT = void 0;
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
@@ -23,12 +23,14 @@ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return
 
 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 MIN_HEIGHT = 40;
+exports.MIN_HEIGHT = MIN_HEIGHT;
 const StyledTextarea = _styledComponents.default.div`
   ${_styledSystem.margin};
 
   ${_input.default} {
     resize: none;
-    min-height: 40px;
+    min-height: ${MIN_HEIGHT}px;
     margin-top: 5px;
     margin-bottom: 5px;
   }

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

@@ -5,6 +5,8 @@ declare class ScrollBlockManager {
     registerComponent(id: any): void;
     unregisterComponent(id: any): void;
     saveOriginalValues(values: any): void;
+    saveRestoreValuesCallback(callback: any): void;
+    getRestoreValuesCallback(): any;
     getOriginalValues(): any;
     isBlocked(): boolean;
 }

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

@@ -11,6 +11,8 @@ function _defineProperties(target, props) { for (var i = 0; i < props.length; i+
 
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
 
+// TODO: This component can be refactored to remove redundant code after
+// we can confirm that all Sage products use version 105.0.0^
 let ScrollBlockManager = /*#__PURE__*/function () {
   function ScrollBlockManager() {
     _classCallCheck(this, ScrollBlockManager);
@@ -20,11 +22,13 @@ let ScrollBlockManager = /*#__PURE__*/function () {
     if (!window.__CARBON_INTERNALS_SCROLL_BLOCKERS) {
       window.__CARBON_INTERNALS_SCROLL_BLOCKERS = {
         components: {},
+        // originalValues can be removed
         originalValues: []
       };
     }
 
-    this.components = window.__CARBON_INTERNALS_SCROLL_BLOCKERS.components;
+    this.components = window.__CARBON_INTERNALS_SCROLL_BLOCKERS.components; // TODO: originalValues can be removed
+
     this.originalValues = window.__CARBON_INTERNALS_SCROLL_BLOCKERS.originalValues;
   }
 
@@ -37,13 +41,25 @@ let ScrollBlockManager = /*#__PURE__*/function () {
     key: "unregisterComponent",
     value: function unregisterComponent(id) {
       delete this.components[id];
-    }
+    } // TODO: saveOriginalValues can be removed
+
   }, {
     key: "saveOriginalValues",
     value: function saveOriginalValues(values) {
       this.originalValues.length = 0;
       this.originalValues.push(...values);
     }
+  }, {
+    key: "saveRestoreValuesCallback",
+    value: function saveRestoreValuesCallback(callback) {
+      window.__CARBON_INTERNALS_SCROLL_BLOCKERS.restoreValues = callback;
+    }
+  }, {
+    key: "getRestoreValuesCallback",
+    value: function getRestoreValuesCallback() {
+      return window.__CARBON_INTERNALS_SCROLL_BLOCKERS.restoreValues;
+    } // TODO: getOriginalValues can be removed
+
   }, {
     key: "getOriginalValues",
     value: function getOriginalValues() {

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

@@ -13,6 +13,8 @@ var _scrollBlockManager = _interopRequireDefault(require("./scroll-block-manager
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+// TODO: This component can be refactored to remove redundant code after
+// we can confirm that all Sage products use version 105.0.0^
 const scrollBlockManager = new _scrollBlockManager.default();
 /* istanbul ignore next */
 
@@ -22,6 +24,7 @@ const useScrollBlock = () => {
   const {
     current: containerGuid
   } = (0, _react.useRef)((0, _guid.default)());
+  const originalValuesRef = (0, _react.useRef)();
   const rules = (0, _react.useMemo)(() => {
     const {
       documentElement,
@@ -29,7 +32,8 @@ const useScrollBlock = () => {
     } = safeDocument;
     const scrollBarWidth = window.innerWidth - documentElement.clientWidth;
     const bodyPaddingRight = parseInt(window.getComputedStyle(body).getPropertyValue("padding-right")) || 0;
-    return [{
+    return [// TODO: First two entries of this array with the documentElement can be removed
+    {
       element: documentElement,
       property: "position",
       blockingValue: "relative"
@@ -51,6 +55,14 @@ const useScrollBlock = () => {
       blockingValue: `${bodyPaddingRight + scrollBarWidth}px`
     }];
   }, []);
+  const restoreValues = (0, _react.useCallback)(() => {
+    rules.forEach(({
+      element,
+      property
+    }, index) => {
+      element.style[property] = originalValuesRef.current[index];
+    });
+  }, [rules]);
   const blockScroll = (0, _react.useCallback)(() => {
     const isBlocked = scrollBlockManager.isBlocked();
     scrollBlockManager.registerComponent(containerGuid);
@@ -63,19 +75,32 @@ const useScrollBlock = () => {
       element,
       property
     }) => element.style[property]);
-    scrollBlockManager.saveOriginalValues(originalValues);
-    rules.forEach(({
+    originalValuesRef.current = originalValues;
+    scrollBlockManager.saveRestoreValuesCallback(restoreValues); // TODO: saveOriginalValues can be removed
+
+    scrollBlockManager.saveOriginalValues(originalValues); // TODO: slice san be removed
+
+    rules.slice(-3).forEach(({
       element,
       property,
       blockingValue
     }) => {
       element.style[property] = blockingValue;
     });
-  }, [containerGuid, rules]);
+  }, [restoreValues, containerGuid, rules]);
   const allowScroll = (0, _react.useCallback)(() => {
     scrollBlockManager.unregisterComponent(containerGuid);
     const isBlocked = scrollBlockManager.isBlocked();
     if (isBlocked) return;
+    const restoreValuesCallback = scrollBlockManager.getRestoreValuesCallback();
+
+    if (restoreValuesCallback) {
+      restoreValuesCallback();
+      scrollBlockManager.saveRestoreValuesCallback(null);
+      return;
+    } // TODO: all of the code below can be removed from this block
+
+
     const originalValues = scrollBlockManager.getOriginalValues();
     rules.forEach(({
       element,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "104.58.4",
+  "version": "104.58.7",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {