carbon-react 88.0.0 → 89.3.0

package/lib/components/text-editor/text-editor.component.js

@@ -65,7 +65,8 @@ const TextEditor = /*#__PURE__*/_react.default.forwardRef(({
   const [inlines, setInlines] = (0, _react.useState)([]);
   const [activeInlines, setActiveInlines] = (0, _react.useState)({});
   const [focusToolbar, setFocusToolbar] = (0, _react.useState)(false);
-  const editor = ref || (0, _react.useRef)();
+  const editorRef = (0, _react.useRef)();
+  const editor = ref || editorRef;
   const contentLength = (0, _utils.getContent)(value).getPlainText("").length;
   const moveCursor = (0, _react.useRef)(contentLength > 0);
   const lastKeyPressed = (0, _react.useRef)();

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

@@ -245,9 +245,7 @@ let Textarea = /*#__PURE__*/function (_React$Component) {
 }(_react.default.Component);
 
 exports.OriginalTextarea = Textarea;
-
-_defineProperty(Textarea, "contextType", _i18nContext.default);
-
+Textarea.contextType = _i18nContext.default;
 Textarea.propTypes = { ...marginPropTypes,
 
   /** id of the input */

package/lib/components/{pod/pod-manager.component.js → tile-select/__internal__/accordion/accordion.component.js}

@@ -9,9 +9,9 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _podContext = _interopRequireDefault(require("./pod-context"));
+var _accordion = require("./accordion.style");
 
-var _logger = _interopRequireDefault(require("../../utils/logger/logger"));
+var _useResizeObserver = _interopRequireDefault(require("../../../../hooks/__internal__/useResizeObserver"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -19,38 +19,38 @@ 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; }
 
-let deprecatedWarnTriggered = false;
-
-const PodManager = ({
-  children
+const Accordion = ({
+  children,
+  expanded,
+  contentId,
+  controlId
 }) => {
-  if (!deprecatedWarnTriggered) {
-    deprecatedWarnTriggered = true; // eslint-disable-next-line max-len
-
-    _logger.default.deprecate("`PodManager` component is deprecated and will soon be removed.");
-  }
-
-  const podManagerRef = (0, _react.useRef)();
-  const [heightOfTheLongestPod, setHeightOfTheLongestPod] = (0, _react.useState)();
+  const [contentHeight, setContentHeight] = (0, _react.useState)(0);
+  const contentRef = (0, _react.useRef)(null);
+  (0, _useResizeObserver.default)(contentRef, () => {
+    setContentHeight(contentRef.current.scrollHeight);
+  });
   (0, _react.useEffect)(() => {
-    const allHeights = [];
-    const allPodNodeList = podManagerRef.current.querySelectorAll(`[data-component="pod"]`);
-    const allPodsArray = Array.from(allPodNodeList);
-    allPodsArray.map(el => allHeights.push(el.scrollHeight));
-    const tallerValue = Math.max(...allHeights);
-    setHeightOfTheLongestPod(tallerValue);
-  }, []);
-  return /*#__PURE__*/_react.default.createElement(_podContext.default.Provider, {
-    value: {
-      heightOfTheLongestPod
-    }
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    ref: podManagerRef
+    setContentHeight(contentRef.current.scrollHeight);
+  }, [contentRef]);
+  return /*#__PURE__*/_react.default.createElement(_accordion.StyledContentContainer, {
+    "aria-expanded": expanded,
+    isExpanded: expanded,
+    maxHeight: contentHeight
+  }, /*#__PURE__*/_react.default.createElement(_accordion.StyledContent, {
+    role: "region",
+    "data-element": "tile-select-accordion-content",
+    ref: contentRef,
+    id: contentId,
+    "aria-labelledby": controlId
   }, children));
 };
 
-PodManager.propTypes = {
-  children: _propTypes.default.node
+Accordion.propTypes = {
+  children: _propTypes.default.node.isRequired,
+  expanded: _propTypes.default.bool,
+  contentId: _propTypes.default.string,
+  controlId: _propTypes.default.string
 };
-var _default = PodManager;
+var _default = Accordion;
 exports.default = _default;

package/lib/components/tile-select/__internal__/accordion/accordion.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+import { SpaceProps } from "styled-system";
+
+export interface AccordionProps extends SpaceProps {
+  children: React.ReactNode;
+  expanded?: boolean;
+  contentId?: string;
+  controlId?: string;
+}
+
+declare function Accordion(props: AccordionProps): JSX.Element;
+
+export default Accordion;

package/lib/components/tile-select/__internal__/accordion/accordion.style.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledContent = exports.StyledContentContainer = void 0;
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _accordion = require("../../../accordion/accordion.style");
+
+var _base = _interopRequireDefault(require("../../../../style/themes/base"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const StyledContentContainer = (0, _styledComponents.default)(_accordion.StyledAccordionContentContainer)`
+  background-color: ${({
+  theme
+}) => theme.tileSelect.hoverBackground};
+`;
+exports.StyledContentContainer = StyledContentContainer;
+const StyledContent = (0, _styledComponents.default)(_accordion.StyledAccordionContent)`
+  padding: 24px;
+  position: relative;
+  z-index: 200;
+`;
+exports.StyledContent = StyledContent;
+StyledContentContainer.defaultProps = {
+  theme: _base.default
+};

package/lib/components/tile-select/__internal__/accordion/index.js

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

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

@@ -5,30 +5,34 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireWildcard(require("react"));
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _propTypes2 = _interopRequireDefault(require("@styled-system/prop-types"));
 
 var _tags = _interopRequireDefault(require("../../utils/helpers/tags/tags"));
 
 var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
 
+var _guid = _interopRequireDefault(require("../../utils/helpers/guid"));
+
 var _button = _interopRequireDefault(require("../button"));
 
 var _box = _interopRequireDefault(require("../box"));
 
+var _accordion = _interopRequireDefault(require("./__internal__/accordion"));
+
 var _tileSelect = require("./tile-select.style");
 
 var _utils = require("../../style/utils");
 
+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; }
 
 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); }
 
 const marginPropTypes = (0, _utils.filterStyledSystemMarginProps)(_propTypes2.default.space);
@@ -57,6 +61,9 @@ const TileSelect = ({
   footer,
   prefixAdornment,
   additionalInformation,
+  accordionContent,
+  accordionControl,
+  accordionExpanded,
   ...rest
 }) => {
   const l = (0, _useLocale.default)();
@@ -88,6 +95,9 @@ const TileSelect = ({
       setHasFocus(false);
     }
   }, [disabled, hasFocus]);
+  const guid = (0, _react.useRef)((0, _guid.default)());
+  const contentId = `AccordionContent_${guid.current}`;
+  const controlId = `AccordionControl_${guid.current}`;
   return /*#__PURE__*/_react.default.createElement(_tileSelect.StyledTileSelectContainer, _extends({
     checked: checked,
     className: className,
@@ -121,14 +131,21 @@ const TileSelect = ({
     checked: checked
   }, /*#__PURE__*/_react.default.createElement(_box.default, {
     display: "flex",
-    justifyContent: "space-between"
-  }, prefixAdornment && /*#__PURE__*/_react.default.createElement(_box.default, {
-    mr: 3
-  }, prefixAdornment), /*#__PURE__*/_react.default.createElement(_box.default, {
+    justifyContent: "space-between",
+    flexDirection: "row-reverse"
+  }, (customActionButton || checked) && renderActionButton(), /*#__PURE__*/_react.default.createElement(_box.default, {
     flexGrow: "1"
   }, /*#__PURE__*/_react.default.createElement(_tileSelect.StyledTitleContainer, null, title && /*#__PURE__*/_react.default.createElement(_tileSelect.StyledTitle, checkPropTypeIsNode(title), title), subtitle && /*#__PURE__*/_react.default.createElement(_tileSelect.StyledSubtitle, checkPropTypeIsNode(subtitle), subtitle), titleAdornment && /*#__PURE__*/_react.default.createElement(_tileSelect.StyledAdornment, {
     hasAdditionalInformation: !!additionalInformation
-  }, titleAdornment)), additionalInformation && /*#__PURE__*/_react.default.createElement("div", null, additionalInformation), /*#__PURE__*/_react.default.createElement(_tileSelect.StyledDescription, checkPropTypeIsNode(description), description), footer && /*#__PURE__*/_react.default.createElement(_tileSelect.StyledFooterWrapper, null, footer)), (customActionButton || checked) && renderActionButton()))));
+  }, titleAdornment)), additionalInformation && /*#__PURE__*/_react.default.createElement("div", null, additionalInformation), /*#__PURE__*/_react.default.createElement(_tileSelect.StyledDescription, checkPropTypeIsNode(description), description), footer && /*#__PURE__*/_react.default.createElement(_tileSelect.StyledFooterWrapper, null, footer), accordionContent && accordionControl && /*#__PURE__*/_react.default.createElement(_tileSelect.StyledAccordionFooterWrapper, {
+    accordionExpanded: accordionExpanded
+  }, accordionControl(controlId, contentId))), prefixAdornment && /*#__PURE__*/_react.default.createElement(_box.default, {
+    mr: 3
+  }, prefixAdornment))), accordionContent && /*#__PURE__*/_react.default.createElement(_accordion.default, {
+    contentId: contentId,
+    controlId: controlId,
+    expanded: accordionExpanded
+  }, accordionContent)));
 };
 
 TileSelect.defaultProps = {
@@ -192,7 +209,19 @@ TileSelect.propTypes = { ...marginPropTypes,
   prefixAdornment: _propTypes.default.node,
 
   /** Component to render additional information row between title and description */
-  additionalInformation: _propTypes.default.node
+  additionalInformation: _propTypes.default.node,
+
+  /** Components to render in the TileSelect Accordion */
+  accordionContent: _propTypes.default.node,
+
+  /**
+   * Render prop to support rendering the control to handle the expanded state of the TileSelect Accordion.
+   * `(controlId, contentId) => <Button id={controlId} aria-controls={contentId}>...</Button>`
+   */
+  accordionControl: _propTypes.default.func,
+
+  /** Flag to control the open state of TileSelect Accordion */
+  accordionExpanded: _propTypes.default.bool
 };
 TileSelect.displayName = "TileSelect";
 var _default = TileSelect;

package/lib/components/tile-select/tile-select.d.ts

@@ -38,6 +38,12 @@ export interface TileSelectProps extends MarginProps {
   prefixAdornment?: React.ReactNode;
   /** Component to render additional information row between title and description */
   additionalInformation?: React.ReactNode;
+  /** Components to render in the TileSelect Accordion */
+  accordionContent?: React.ReactNode;
+  /** Callback to toggle expanded state of TileSelect Accordion */
+  accordionControl?: (controlId: string, contentId: string) => JSX.Element;
+  /** Flag to control the open state of TileSelect Accordion */
+  accordionExpanded?: boolean;
 }
 
 declare function TileSelect(props: TileSelectProps): JSX.Element;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledFocusWrapper = exports.StyledFooterWrapper = exports.StyledDeselectWrapper = exports.StyledDescription = exports.StyledAdornment = exports.StyledSubtitle = exports.StyledTitle = exports.StyledTitleContainer = exports.StyledTileSelectInput = exports.StyledTileSelect = exports.StyledTileSelectContainer = exports.StyledGroupDescription = exports.StyledTileSelectFieldset = void 0;
+exports.StyledAccordionFooterWrapper = exports.StyledFocusWrapper = exports.StyledFooterWrapper = exports.StyledDeselectWrapper = exports.StyledDescription = exports.StyledAdornment = exports.StyledSubtitle = exports.StyledTitle = exports.StyledTitleContainer = exports.StyledTileSelectInput = exports.StyledTileSelect = exports.StyledTileSelectContainer = exports.StyledGroupDescription = exports.StyledTileSelectFieldset = void 0;
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
@@ -131,6 +131,22 @@ const StyledFooterWrapper = _styledComponents.default.div`
   z-index: 200;
 `;
 exports.StyledFooterWrapper = StyledFooterWrapper;
+const StyledAccordionFooterWrapper = _styledComponents.default.div`
+  width: fit-content;
+  position: relative;
+  z-index: 200;
+  left: -12px;
+
+  ${({
+  accordionExpanded
+}) => `
+      span[data-element="chevron_down"] {
+        transition: transform 0.3s;
+        ${!accordionExpanded && "transform: rotate(-90deg)"};
+      }
+  `}
+`;
+exports.StyledAccordionFooterWrapper = StyledAccordionFooterWrapper;
 const StyledTileSelectInput = (0, _styledComponents.default)(_input.Input)`
   position: absolute;
   top: 0;

package/lib/locales/en-gb.d.ts

@@ -0,0 +1,5 @@
+import Locale from ".";
+
+declare const EnGb: Locale;
+
+export default EnGb;

package/lib/locales/en-gb.js

@@ -3,11 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.isSingular = void 0;
+exports.default = void 0;
 
-const isSingular = count => parseInt(count, 10) === 1;
+const isSingular = count => (typeof count === "string" ? parseInt(count) : count) === 1;
 
-exports.isSingular = isSingular;
 var _default = {
   locale: () => "en-GB",
   actions: {

package/lib/locales/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./locale";
+export { default as EnGb } from "./en-gb";

package/lib/locales/locale.d.ts

@@ -0,0 +1,96 @@
+interface Locale {
+  locale: () => string;
+  actions: {
+    edit: () => string;
+    delete: () => string;
+    reset: () => string;
+  };
+  actionPopover: {
+    ariaLabel: () => string;
+  };
+  actionToolbar: {
+    selected: () => string;
+  };
+  batchSelection: {
+    selected: (count: number | string) => string;
+  };
+  confirm: {
+    no: () => string;
+    yes: () => string;
+  };
+  date: {
+    formats: {
+      inputs: () => [string];
+      javascript: () => string;
+    };
+  };
+  errors: {
+    messages: {
+      formSummary: (
+        errors: number,
+        warnings: number,
+        type: string
+      ) => [string, string];
+    };
+  };
+  message: {
+    closeButtonAriaLabel: () => string;
+  };
+  numeralDate: {
+    validation: {
+      day: () => string;
+      month: () => string;
+      year: () => string;
+    };
+  };
+  pager: {
+    show: () => string;
+    records: (count: number | string, showNumber: boolean) => string;
+    first: () => string;
+    last: () => string;
+    next: () => string;
+    previous: () => string;
+    pageX: () => string;
+    ofY: (count: string | number) => string;
+  };
+  select: {
+    actionButtonText: () => string;
+    placeholder: () => string;
+    noResultsForTerm: (term: string) => string;
+  };
+  switch: {
+    on: () => string;
+    off: () => string;
+  };
+  table: {
+    noData: () => string;
+  };
+  textEditor: {
+    tooltipMessages: {
+      bold: () => string;
+      italic: () => string;
+      bulletList: () => string;
+      numberList: () => string;
+    };
+    ariaLabels: {
+      bold: () => string;
+      italic: () => string;
+      bulletList: () => string;
+      numberList: () => string;
+    };
+  };
+  titleSelect: {
+    deselect: () => string;
+  };
+  wizards: {
+    multiStep: {
+      buttons: {
+        submit: () => string;
+        next: () => string;
+        back: () => string;
+      };
+    };
+  };
+}
+
+export default Locale;

package/lib/patterns/configurable-items/configurable-items-content/configurable-items-content.js

@@ -87,7 +87,7 @@ let ConfigurableItemsContent = /*#__PURE__*/function (_React$Component) {
   return ConfigurableItemsContent;
 }(_react.default.Component);
 
-_defineProperty(ConfigurableItemsContent, "propTypes", {
+ConfigurableItemsContent.propTypes = {
   /**
    * The configurable item data.
    *
@@ -135,7 +135,6 @@ _defineProperty(ConfigurableItemsContent, "propTypes", {
    * @type {Function}
    */
   onSave: _propTypes.default.func.isRequired
-});
-
+};
 var _default = ConfigurableItemsContent;
 exports.default = _default;

package/lib/patterns/configurable-items/configurable-items.js

@@ -161,7 +161,7 @@ let ConfigurableItemsPattern = /*#__PURE__*/function (_React$Component) {
   return ConfigurableItemsPattern;
 }(_react.default.Component);
 
-_defineProperty(ConfigurableItemsPattern, "propTypes", {
+ConfigurableItemsPattern.propTypes = {
   /**
    * A custom class name for the component.
    *
@@ -209,7 +209,7 @@ _defineProperty(ConfigurableItemsPattern, "propTypes", {
    * @type {Object}
    */
   title: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object])
-});
+};
 
 var _default = (0, _flux.connect)(ConfigurableItemsPattern, _store.default);
 

package/lib/utils/helpers/with-unique-id-props/with-unique-id-props.hoc.js

@@ -76,10 +76,10 @@ const withUniqueIdProps = WrappedComponent => {
     return WithUniqueIdProps;
   }(_react.default.Component);
 
-  _defineProperty(WithUniqueIdProps, "propTypes", {
+  WithUniqueIdProps.propTypes = {
     forwardedRef: _propTypes.default.object,
     id: _propTypes.default.string
-  });
+  };
 
   const Component = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     return /*#__PURE__*/_react.default.createElement(WithUniqueIdProps, _extends({}, props, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "88.0.0",
+  "version": "89.3.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {
@@ -101,14 +101,16 @@
     "enzyme-adapter-react-16": "^1.14.0",
     "enzyme-to-json": "^3.4.0",
     "eslint": "^7.25.0",
-    "eslint-config-airbnb": "17.0.0",
+    "eslint-config-airbnb": "^18.2.0",
     "eslint-config-prettier": "^6.15.0",
     "eslint-plugin-cypress": "^2.0.1",
-    "eslint-plugin-import": "2.13.0",
-    "eslint-plugin-jsx-a11y": "6.1.1",
+    "eslint-plugin-import": "^2.22.0",
+    "eslint-plugin-jest": "^24.1.3",
+    "eslint-plugin-jest-dom": "^3.6.5",
+    "eslint-plugin-jsx-a11y": "^6.3.1",
     "eslint-plugin-no-unsanitized": "^3.1.4",
-    "eslint-plugin-react": "7.19.0",
-    "eslint-plugin-react-hooks": "2.3.0",
+    "eslint-plugin-react": "^7.20.3",
+    "eslint-plugin-react-hooks": "^4.2.0",
     "events": "~1.1.1",
     "flux": "^4.0.1",
     "husky": "^4.3.6",

package/lib/components/pod/pod-context.js

@@ -1,12 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = require("react");
-
-const PodContext = /*#__PURE__*/(0, _react.createContext)({});
-var _default = PodContext;
-exports.default = _default;

package/lib/components/pod/pod-manager.d.ts

@@ -1,9 +0,0 @@
-import * as React from "react";
-
-export interface PodManagerProps {
-  children: React.ReactNode;
-}
-
-declare function PodManager(props: PodManagerProps): JSX.Element;
-
-export default PodManager;