carbon-react 154.3.2 → 154.3.3-beta.1

package/esm/__internal__/validations/validation-icon.component.js

@@ -1,90 +1 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useContext, useRef, useState } from "react";
-import invariant from "invariant";
-import guid from "../utils/helpers/guid";
-import Icon from "../../components/icon";
-import ValidationIconStyle from "./validation-icon.style";
-import { InputContext, InputGroupContext } from "../input-behaviour";
-import { filterStyledSystemMarginProps } from "../../style/utils";
-const getValidationType = ({
-  error,
-  warning,
-  info
-}) => {
-  if (error) return "error";
-  if (warning) return "warning";
-  if (info) return "info";
-  return null;
-};
-export const ValidationIcon = ({
-  error,
-  warning,
-  info,
-  size,
-  onFocus,
-  onBlur,
-  iconId,
-  tooltipId,
-  isPartOfInput,
-  tabIndex = -1,
-  onClick,
-  tooltipPosition = "right",
-  tooltipFlipOverrides,
-  ...rest
-}) => {
-  const validationTooltipId = useRef(tooltipId || guid());
-  const flipBehaviourCheck = Array.isArray(tooltipFlipOverrides) && tooltipFlipOverrides.every(override => ["bottom", "left", "right", "top"].includes(override));
-  if (tooltipFlipOverrides) {
-    !flipBehaviourCheck ? process.env.NODE_ENV !== "production" ? invariant(false, `The tooltipFlipOverrides prop supplied to ValidationIcon must be an array containing some or all of ["top", "bottom", "left", "right"].`) : invariant(false) : void 0;
-  }
-  const {
-    hasFocus,
-    hasMouseOver
-  } = useContext(InputContext);
-  const {
-    hasFocus: groupHasFocus,
-    hasMouseOver: groupHasMouseOver
-  } = useContext(InputGroupContext);
-  const [triggeredByIcon, setTriggeredByIcon] = useState(false);
-  const validationType = getValidationType({
-    error,
-    warning,
-    info
-  });
-  const validationMessage = error || warning || info;
-  if (typeof validationMessage !== "string" || !validationType) {
-    return null;
-  }
-  return /*#__PURE__*/React.createElement(ValidationIconStyle, _extends({
-    validationType: validationType,
-    onClick: onClick,
-    onMouseOver: () => setTriggeredByIcon(true),
-    onMouseLeave: () => setTriggeredByIcon(false),
-    onFocus: e => {
-      setTriggeredByIcon(true);
-      if (onFocus) onFocus(e);
-    },
-    onBlur: e => {
-      setTriggeredByIcon(false);
-      if (onBlur) onBlur(e);
-    },
-    isPartOfInput: isPartOfInput,
-    "data-role": "validation-icon-wrapper"
-  }, filterStyledSystemMarginProps(rest)), /*#__PURE__*/React.createElement(Icon, {
-    "aria-describedby": validationTooltipId.current,
-    key: `${validationType}-icon`,
-    type: validationType,
-    tabIndex: tabIndex,
-    tooltipId: validationTooltipId.current,
-    tooltipMessage: validationMessage,
-    tooltipPosition: tooltipPosition,
-    tooltipVisible: hasFocus || hasMouseOver || groupHasFocus || groupHasMouseOver || triggeredByIcon,
-    tooltipFlipOverrides: isPartOfInput && !tooltipFlipOverrides ? ["top", "bottom"] : tooltipFlipOverrides,
-    isPartOfInput: isPartOfInput,
-    inputSize: size,
-    id: iconId,
-    focusable: tabIndex !== -1,
-    "data-role": `icon-${validationType}`
-  }));
-};
-export default ValidationIcon;
+import{jsx as t}from"react/jsx-runtime";import{useRef as o,useContext as r,useState as e}from"react";import n from"invariant";import i from"../utils/helpers/guid/index.js";import p from"../../components/icon/icon.component.js";import s from"./validation-icon.style.js";import{InputContext as l}from"../input-behaviour/input-behaviour.component.js";import{InputGroupContext as a}from"../input-behaviour/input-group-behaviour.component.js";import"../../style/utils/filter-styled-system-padding-props.js";import c from"../../style/utils/filter-styled-system-margin-props.js";function u(t,o,r){return o in t?Object.defineProperty(t,o,{value:r,enumerable:!0,configurable:!0,writable:!0}):t[o]=r,t}const f=f=>{var{error:b,warning:m,info:O,size:y,onFocus:d,onBlur:g,iconId:v,tooltipId:j,isPartOfInput:h,tabIndex:P=-1,onClick:w,tooltipPosition:I="right",tooltipFlipOverrides:F}=f,x=function(t,o){if(null==t)return{};var r,e,n=function(t,o){if(null==t)return{};var r,e,n={},i=Object.keys(t);for(e=0;e<i.length;e++)r=i[e],o.indexOf(r)>=0||(n[r]=t[r]);return n}(t,o);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);for(e=0;e<i.length;e++)r=i[e],o.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(t,r)&&(n[r]=t[r])}return n}(f,["error","warning","info","size","onFocus","onBlur","iconId","tooltipId","isPartOfInput","tabIndex","onClick","tooltipPosition","tooltipFlipOverrides"]);const S=o(j||i()),k=Array.isArray(F)&&F.every((t=>["bottom","left","right","top"].includes(t)));F&&n(k,'The tooltipFlipOverrides prop supplied to ValidationIcon must be an array containing some or all of ["top", "bottom", "left", "right"].');const{hasFocus:M,hasMouseOver:D}=r(l),{hasFocus:z,hasMouseOver:B}=r(a),[C,E]=e(!1),A=(({error:t,warning:o,info:r})=>t?"error":o?"warning":r?"info":null)({error:b,warning:m,info:O}),T=b||m||O;return"string"==typeof T&&A?t(s,(V=function(t){for(var o=1;o<arguments.length;o++){var r=null!=arguments[o]?arguments[o]:{},e=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(e=e.concat(Object.getOwnPropertySymbols(r).filter((function(t){return Object.getOwnPropertyDescriptor(r,t).enumerable})))),e.forEach((function(o){u(t,o,r[o])}))}return t}({validationType:A,onClick:w,onMouseOver:()=>E(!0),onMouseLeave:()=>E(!1),onFocus:t=>{E(!0),d&&d(t)},onBlur:t=>{E(!1),g&&g(t)},isPartOfInput:h,"data-role":"validation-icon-wrapper"},c(x)),$=null!=($={children:t(p,{"aria-describedby":S.current,type:A,tabIndex:P,tooltipId:S.current,tooltipMessage:T,tooltipPosition:I,tooltipVisible:M||D||z||B||C,tooltipFlipOverrides:h&&!F?["top","bottom"]:F,isPartOfInput:h,inputSize:y,id:v,focusable:-1!==P,"data-role":`icon-${A}`},`${A}-icon`)})?$:{},Object.getOwnPropertyDescriptors?Object.defineProperties(V,Object.getOwnPropertyDescriptors($)):function(t){var o=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);o.push.apply(o,r)}return o}(Object($)).forEach((function(t){Object.defineProperty(V,t,Object.getOwnPropertyDescriptor($,t))})),V)):null;var V,$};export{f as ValidationIcon,f as default};

package/esm/__internal__/validations/validation-icon.style.js

@@ -1,43 +1 @@
-import styled, { css } from "styled-components";
-import { margin } from "styled-system";
-import BaseTheme from "../../style/themes/base";
-import StyledIcon from "../../components/icon/icon.style";
-import addFocusStyling from "../../style/utils/add-focus-styling";
-const validationIconTypes = {
-  error: "var(--colorsSemanticNegative500)",
-  info: "var(--colorsSemanticInfo500)",
-  warning: "var(--colorsSemanticCaution500)"
-};
-const ValidationIconStyle = styled.span`
-  background: none;
-  cursor: default;
-  display: flex;
-  align-items: center;
-  margin-top: 0;
-  margin-bottom: 0;
-  border: 0;
-  outline: none;
-
-  ${({
-  isPartOfInput
-}) => isPartOfInput && css`
-      cursor: pointer;
-    `}
-
-  ${StyledIcon}:before {
-    color: ${({
-  validationType
-}) => validationIconTypes[validationType]};
-  }
-
-  ${StyledIcon}:focus {
-    ${addFocusStyling()}
-  }
-
-  ${margin}
-`;
-ValidationIconStyle.defaultProps = {
-  validationType: "error",
-  theme: BaseTheme
-};
-export default ValidationIconStyle;
+import o,{css as t}from"styled-components";import{margin as e}from"styled-system";import n from"../../style/themes/base/index.js";import r from"../../components/icon/icon.style.js";import i from"../../style/utils/add-focus-styling.js";const s={error:"var(--colorsSemanticNegative500)",info:"var(--colorsSemanticInfo500)",warning:"var(--colorsSemanticCaution500)"},a=o.span.withConfig({displayName:"validation-icon.style__ValidationIconStyle",componentId:"sc-56bf463f-0"})(["background:none;cursor:default;display:flex;align-items:center;margin-top:0;margin-bottom:0;border:0;outline:none;"," ",":before{color:",";}",":focus{","}",""],(({isPartOfInput:o})=>o&&t(["cursor:pointer;"])),r,(({validationType:o})=>s[o]),r,i(),e);a.defaultProps={validationType:"error",theme:n};export{a as default};

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

@@ -1,20 +1 @@
-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;
+const t=(t,e)=>({width:t,height:e,top:0,left:0,bottom:0,right:0,x:0,y:0,toJSON:()=>{}}),e=(e,o,n)=>{Element.prototype.getBoundingClientRect=jest.fn((function(){return this.getAttribute("data-component")===n?t(e,o):t(0,0)}))};export{e as default};

package/esm/__spec_helper__/mock-element-scrollto.js

@@ -1,9 +1 @@
-const setupScrollToMock = () => {
-  // need to mock the `scrollTo` method, which is undefined in JSDOM. As we're not actually testing this behaviour, just make it
-  // do nothing.
-  if (typeof window === "undefined") {
-    return;
-  }
-  HTMLElement.prototype.scrollTo = () => {};
-};
-export default setupScrollToMock;
+const e=()=>{"undefined"!=typeof window&&(HTMLElement.prototype.scrollTo=()=>{})};export{e as default};

package/esm/__spec_helper__/mock-match-media.js

@@ -1,30 +1 @@
-let mocked = false;
-let _matches = false;
-const removeEventListener = jest.fn();
-export const setupMatchMediaMock = () => {
-  if (typeof window === "undefined") {
-    return;
-  }
-  const noop = () => {};
-  Object.defineProperty(global.window, "matchMedia", {
-    writable: true,
-    value: query => ({
-      matches: _matches,
-      media: query,
-      onchange: null,
-      addEventListener: noop,
-      removeEventListener,
-      dispatchEvent: noop
-    })
-  });
-  mocked = true;
-};
-export const mockMatchMedia = matches => {
-  if (!mocked) {
-    throw new Error("window.matchMedia has not been mocked. Did you call setupMatchMediaMock()?");
-  }
-  _matches = matches;
-  return {
-    removeEventListener
-  };
-};
+let e=!1,t=!1;const n=jest.fn(),o=()=>{if("undefined"==typeof window)return;const o=()=>{};Object.defineProperty(global.window,"matchMedia",{writable:!0,value:e=>({matches:t,media:e,onchange:null,addEventListener:o,removeEventListener:n,dispatchEvent:o})}),e=!0},i=o=>{if(!e)throw new Error("window.matchMedia has not been mocked. Did you call setupMatchMediaMock()?");return t=o,{removeEventListener:n}};export{i as mockMatchMedia,o as setupMatchMediaMock};

package/esm/__spec_helper__/mock-resize-observer.js

@@ -1,26 +1 @@
-const setupResizeObserverMock = () => {
-  if (typeof window === "undefined") {
-    return;
-  }
-  window.ResizeObserver = window.ResizeObserver || jest.fn().mockImplementation(callback => {
-    let hasCalledCallback = false;
-    const observer = {
-      disconnect: jest.fn(),
-      // observe mock needs to actually call the callback straight away, as this is what a real ResizeObserver does
-      // and this behaviour is needed for the FixedNavigationBarContextProvider to work properly.
-      // Note that we must only call the callback once per ResizeObserver instance, to avoid stack overflows in
-      // react-virtual.
-      observe: jest.fn(target => {
-        if (!hasCalledCallback) {
-          hasCalledCallback = true;
-          callback([{
-            target
-          }], observer);
-        }
-      }),
-      unobserve: jest.fn()
-    };
-    return observer;
-  });
-};
-export default setupResizeObserverMock;
+const e=()=>{"undefined"!=typeof window&&(window.ResizeObserver=window.ResizeObserver||jest.fn().mockImplementation((e=>{let n=!1;const t={disconnect:jest.fn(),observe:jest.fn((s=>{n||(n=!0,e([{target:s}],t))})),unobserve:jest.fn()};return t})))};export{e as default};

package/esm/components/accordion/accordion-group/accordion-group.component.js

@@ -1,70 +1 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useMemo, useCallback } from "react";
-import invariant from "invariant";
-import Events from "../../../__internal__/utils/helpers/events";
-import Accordion from "../accordion.component";
-import { StyledAccordionGroup } from "../accordion.style";
-import tagComponent from "../../../__internal__/utils/helpers/tags";
-import Logger from "../../../__internal__/utils/logger";
-
-// typescript-to-proptypes breaks on recursive type references so it has to be an interface
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-
-let deprecatedWarnTriggered = false;
-export const AccordionGroup = ({
-  children,
-  ...rest
-}) => {
-  if (!deprecatedWarnTriggered) {
-    deprecatedWarnTriggered = true;
-    Logger.deprecate("`AccordionGroup` is deprecated and will soon be removed.");
-  }
-  const hasProperChildren = useMemo(() => {
-    let hasAccordionChildren = true;
-    React.Children.toArray(children).forEach(child => {
-      if (typeof child === "string" || /*#__PURE__*/React.isValidElement(child) && child.type.displayName !== "Accordion") {
-        hasAccordionChildren = false;
-      }
-    });
-    return hasAccordionChildren;
-  }, [children]);
-  !hasProperChildren ? process.env.NODE_ENV !== "production" ? invariant(false, `AccordionGroup accepts only children of type \`${Accordion.displayName}\`.`) : invariant(false) : void 0;
-  const filteredChildren = useMemo(() => React.Children.toArray(children).filter(child => {
-    return /*#__PURE__*/React.isValidElement(child);
-  }), [children]);
-  const refs = useMemo(() => filteredChildren.map(child => child.ref || /*#__PURE__*/React.createRef()), [filteredChildren]);
-  const focusAccordion = useCallback((ev, index) => {
-    ev.preventDefault();
-    if (index === -1) {
-      refs[refs.length - 1].current?.focus();
-    } else if (index === refs.length) {
-      refs[0].current?.focus();
-    } else {
-      refs[index].current?.focus();
-    }
-  }, [refs]);
-  const handleKeyboardAccessibility = useCallback((ev, index) => {
-    if (Events.isUpKey(ev)) {
-      focusAccordion(ev, index - 1);
-    }
-    if (Events.isDownKey(ev)) {
-      focusAccordion(ev, index + 1);
-    }
-    if (Events.isHomeKey(ev)) {
-      focusAccordion(ev, 0);
-    }
-    if (Events.isEndKey(ev)) {
-      focusAccordion(ev, refs.length - 1);
-    }
-  }, [focusAccordion, refs]);
-  return /*#__PURE__*/React.createElement(StyledAccordionGroup, _extends({}, rest, tagComponent("accordion-group", rest)), filteredChildren.map((child, index) =>
-  /*#__PURE__*/
-  // casted to ReactElement as there is no overload for an FunctionComponentElement in cloneElement
-  React.cloneElement(child, {
-    ref: refs[index],
-    index,
-    handleKeyboardAccessibility
-  })));
-};
-AccordionGroup.displayName = "AccordionGroup";
-export default AccordionGroup;
+import{jsx as e}from"react/jsx-runtime";import r,{useMemo as t,useCallback as n}from"react";import o from"invariant";import i from"../../../__internal__/utils/helpers/events/events.js";import{Accordion as c}from"../accordion.component.js";import{StyledAccordionGroup as l}from"../accordion.style.js";import a from"../../../__internal__/utils/helpers/tags/tags.js";import s from"../../../__internal__/utils/logger/index.js";function p(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}let f=!1;const u=u=>{var{children:y}=u,d=function(e,r){if(null==e)return{};var t,n,o=function(e,r){if(null==e)return{};var t,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)t=i[n],r.indexOf(t)>=0||(o[t]=e[t]);return o}(e,r);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)t=i[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}(u,["children"]);f||(f=!0,s.deprecate("`AccordionGroup` is deprecated and will soon be removed."));const m=t((()=>{let e=!0;return r.Children.toArray(y).forEach((t=>{("string"==typeof t||r.isValidElement(t)&&"Accordion"!==t.type.displayName)&&(e=!1)})),e}),[y]);o(m,`AccordionGroup accepts only children of type \`${c.displayName}\`.`);const b=t((()=>r.Children.toArray(y).filter((e=>r.isValidElement(e)))),[y]),O=t((()=>b.map((e=>e.ref||r.createRef()))),[b]),j=n(((e,r)=>{var t;if(e.preventDefault(),-1===r)null===(t=O[O.length-1].current)||void 0===t||t.focus();else if(r===O.length){var n;null===(n=O[0].current)||void 0===n||n.focus()}else{var o;null===(o=O[r].current)||void 0===o||o.focus()}}),[O]),g=n(((e,r)=>{i.isUpKey(e)&&j(e,r-1),i.isDownKey(e)&&j(e,r+1),i.isHomeKey(e)&&j(e,0),i.isEndKey(e)&&j(e,O.length-1)}),[j,O]);return e(l,(v=function(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},n=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),n.forEach((function(r){p(e,r,t[r])}))}return e}({},d,a("accordion-group",d)),h=null!=(h={children:b.map(((e,t)=>r.cloneElement(e,{ref:O[t],index:t,handleKeyboardAccessibility:g})))})?h:{},Object.getOwnPropertyDescriptors?Object.defineProperties(v,Object.getOwnPropertyDescriptors(h)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(h)).forEach((function(e){Object.defineProperty(v,e,Object.getOwnPropertyDescriptor(h,e))})),v));var v,h};u.displayName="AccordionGroup";export{u as AccordionGroup,u as default};

package/esm/components/accordion/accordion.component.js

@@ -1,119 +1 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useState, useRef, useEffect, useCallback } from "react";
-import tagComponent from "../../__internal__/utils/helpers/tags";
-import useResizeObserver from "../../hooks/__internal__/useResizeObserver";
-import createGuid from "../../__internal__/utils/helpers/guid";
-import Events from "../../__internal__/utils/helpers/events";
-import { StyledAccordionContainer, StyledAccordionHeadingsContainer, StyledAccordionTitleContainer, StyledAccordionTitle, StyledAccordionSubTitle, StyledAccordionIcon, StyledAccordionContentContainer, StyledAccordionContent } from "./accordion.style";
-import ValidationIcon from "../../__internal__/validations";
-export const Accordion = /*#__PURE__*/React.forwardRef(({
-  borders = "default",
-  defaultExpanded,
-  expanded,
-  onChange,
-  children,
-  handleKeyboardAccessibility,
-  id,
-  index,
-  iconType,
-  iconAlign,
-  size = "large",
-  subTitle,
-  title,
-  width,
-  headerSpacing,
-  disableContentPadding = false,
-  error,
-  warning,
-  info,
-  openTitle,
-  variant = "standard",
-  ...rest
-}, ref) => {
-  const isControlled = expanded !== undefined;
-  const [isExpandedInternal, setIsExpandedInternal] = useState(defaultExpanded || false);
-  const [contentHeight, setContentHeight] = useState(isExpandedInternal ? "auto" : 0);
-  const accordionContent = useRef(null);
-  const isExpanded = isControlled ? expanded : isExpandedInternal;
-  useResizeObserver(accordionContent, () => {
-    setContentHeight(accordionContent.current?.scrollHeight);
-  });
-  useEffect(() => {
-    setContentHeight(accordionContent.current?.scrollHeight);
-  }, [isExpanded]);
-  const toggleAccordion = useCallback(ev => {
-    if (!isControlled) {
-      setIsExpandedInternal(!isExpanded);
-    }
-    onChange?.(ev, !isExpanded);
-  }, [isControlled, isExpanded, onChange]);
-  const handleKeyDown = useCallback(ev => {
-    if (handleKeyboardAccessibility) {
-      handleKeyboardAccessibility(ev, index);
-    }
-    if (Events.isEnterKey(ev) || Events.isSpaceKey(ev)) {
-      toggleAccordion(ev);
-    }
-  }, [handleKeyboardAccessibility, index, toggleAccordion]);
-  const guid = useRef(createGuid());
-  const accordionId = id || `Accordion_${guid.current}`;
-  const headerId = `AccordionHeader_${guid.current}`;
-  const contentId = `AccordionContent_${guid.current}`;
-  const showValidationIcon = !!(error || warning || info);
-  const getTitle = () => isExpanded ? openTitle || title : title;
-  const getIconType = () => size === "small" || variant === "subtle" ? "chevron_down_thick" : "chevron_down";
-  return /*#__PURE__*/React.createElement(StyledAccordionContainer, _extends({
-    id: accordionId,
-    width: width,
-    borders: variant === "subtle" ? "none" : borders,
-    variant: variant
-  }, rest, tagComponent("accordion", rest)), /*#__PURE__*/React.createElement(StyledAccordionTitleContainer, _extends({
-    "data-element": "accordion-title-container",
-    id: headerId,
-    "aria-expanded": isExpanded,
-    "aria-controls": contentId,
-    onClick: toggleAccordion,
-    onKeyDown: handleKeyDown,
-    tabIndex: 0,
-    iconAlign: iconAlign || (variant === "standard" ? "right" : "left"),
-    ref: ref,
-    size: size,
-    isExpanded: isExpanded,
-    variant: variant,
-    role: "button"
-  }, headerSpacing), /*#__PURE__*/React.createElement(StyledAccordionHeadingsContainer, {
-    "data-element": "accordion-headings-container",
-    hasValidationIcon: showValidationIcon
-  }, typeof title === "string" ? /*#__PURE__*/React.createElement(StyledAccordionTitle, {
-    "data-element": "accordion-title",
-    size: size,
-    variant: variant
-  }, isExpanded ? openTitle || title : title) : getTitle(), variant !== "subtle" && /*#__PURE__*/React.createElement(React.Fragment, null, showValidationIcon && /*#__PURE__*/React.createElement(ValidationIcon, {
-    error: error,
-    warning: warning,
-    info: info,
-    tooltipPosition: "top",
-    tabIndex: 0,
-    ml: 1
-  }), subTitle && size === "large" && variant === "standard" && /*#__PURE__*/React.createElement(StyledAccordionSubTitle, null, subTitle))), /*#__PURE__*/React.createElement(StyledAccordionIcon, {
-    "data-element": "accordion-icon",
-    type: iconType || getIconType(),
-    isExpanded: isExpanded,
-    iconAlign: iconAlign || (variant === "standard" ? "right" : "left")
-  })), /*#__PURE__*/React.createElement(StyledAccordionContentContainer, {
-    isExpanded: isExpanded,
-    maxHeight: contentHeight,
-    "data-role": "accordion-content-container"
-  }, /*#__PURE__*/React.createElement(StyledAccordionContent, {
-    role: "region",
-    "data-element": "accordion-content",
-    "data-role": "accordion-content",
-    id: contentId,
-    "aria-labelledby": headerId,
-    ref: accordionContent,
-    disableContentPadding: disableContentPadding,
-    variant: variant
-  }, children)));
-});
-Accordion.displayName = "Accordion";
-export default Accordion;
+import{jsxs as e,jsx as n,Fragment as r}from"react/jsx-runtime";import t,{useState as i,useRef as o,useEffect as a,useCallback as c}from"react";import l from"../../__internal__/utils/helpers/tags/tags.js";import d from"../../hooks/__internal__/useResizeObserver/useResizeObserver.js";import s from"../../__internal__/utils/helpers/guid/index.js";import p from"../../__internal__/utils/helpers/events/events.js";import{StyledAccordionContainer as u,StyledAccordionTitleContainer as b,StyledAccordionHeadingsContainer as f,StyledAccordionTitle as g,StyledAccordionSubTitle as h,StyledAccordionIcon as y,StyledAccordionContentContainer as m,StyledAccordionContent as O}from"./accordion.style.js";import{ValidationIcon as v}from"../../__internal__/validations/validation-icon.component.js";function _(e,n,r){return n in e?Object.defineProperty(e,n,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[n]=r,e}function j(e){for(var n=1;n<arguments.length;n++){var r=null!=arguments[n]?arguments[n]:{},t=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(t=t.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),t.forEach((function(n){_(e,n,r[n])}))}return e}function w(e,n){return n=null!=n?n:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):function(e){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n.push.apply(n,r)}return n}(Object(n)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(n,r))})),e}const x=t.forwardRef(((t,_)=>{var{borders:x="default",defaultExpanded:P,expanded:A,onChange:E,children:S,handleKeyboardAccessibility:C,id:k,index:z,iconType:T,iconAlign:D,size:K="large",subTitle:H,title:I,width:R,headerSpacing:$,disableContentPadding:N=!1,error:V,warning:q,info:B,openTitle:F,variant:G="standard"}=t,J=function(e,n){if(null==e)return{};var r,t,i=function(e,n){if(null==e)return{};var r,t,i={},o=Object.keys(e);for(t=0;t<o.length;t++)r=o[t],n.indexOf(r)>=0||(i[r]=e[r]);return i}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(t=0;t<o.length;t++)r=o[t],n.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(i[r]=e[r])}return i}(t,["borders","defaultExpanded","expanded","onChange","children","handleKeyboardAccessibility","id","index","iconType","iconAlign","size","subTitle","title","width","headerSpacing","disableContentPadding","error","warning","info","openTitle","variant"]);const L=void 0!==A,[M,Q]=i(P||!1),[U,W]=i(M?"auto":0),X=o(null),Y=L?A:M;d(X,(()=>{var e;W(null===(e=X.current)||void 0===e?void 0:e.scrollHeight)})),a((()=>{var e;W(null===(e=X.current)||void 0===e?void 0:e.scrollHeight)}),[Y]);const Z=c((e=>{L||Q(!Y),null==E||E(e,!Y)}),[L,Y,E]),ee=c((e=>{C&&C(e,z),(p.isEnterKey(e)||p.isSpaceKey(e))&&Z(e)}),[C,z,Z]),ne=o(s()),re=k||`Accordion_${ne.current}`,te=`AccordionHeader_${ne.current}`,ie=`AccordionContent_${ne.current}`,oe=!!(V||q||B);return e(u,w(j({id:re,width:R,borders:"subtle"===G?"none":x,variant:G},J,l("accordion",J)),{children:[e(b,w(j({"data-element":"accordion-title-container",id:te,"aria-expanded":Y,"aria-controls":ie,onClick:Z,onKeyDown:ee,tabIndex:0,iconAlign:D||("standard"===G?"right":"left"),ref:_,size:K,isExpanded:Y,variant:G,role:"button"},$),{children:[e(f,{"data-element":"accordion-headings-container",hasValidationIcon:oe,children:["string"==typeof I?n(g,{"data-element":"accordion-title",size:K,variant:G,children:Y&&F||I}):Y&&F||I,"subtle"!==G&&e(r,{children:[oe&&n(v,{error:V,warning:q,info:B,tooltipPosition:"top",tabIndex:0,ml:1}),H&&"large"===K&&"standard"===G&&n(h,{children:H})]})]}),n(y,{"data-element":"accordion-icon",type:T||("small"===K||"subtle"===G?"chevron_down_thick":"chevron_down"),isExpanded:Y,iconAlign:D||("standard"===G?"right":"left")})]})),n(m,{isExpanded:Y,maxHeight:U,"data-role":"accordion-content-container",children:n(O,{role:"region","data-element":"accordion-content","data-role":"accordion-content",id:ie,"aria-labelledby":te,ref:X,disableContentPadding:N,variant:G,children:S})})]}))}));x.displayName="Accordion";export{x as Accordion,x as default};

package/esm/components/accordion/accordion.style.js

@@ -1,201 +1 @@
-import styled, { css } from "styled-components";
-import { space, margin } from "styled-system";
-import Icon from "../icon";
-import { baseTheme } from "../../style/themes";
-import ValidationIconStyle from "../../__internal__/validations/validation-icon.style";
-import addFocusStyling from "../../style/utils/add-focus-styling";
-const StyledAccordionGroup = styled.div`
-  ${margin}
-`;
-const StyledAccordionContainer = styled.div`
-  ${space}
-  display: flex;
-  ${({
-  variant
-}) => variant && css`
-      align-items: stretch;
-    `};
-  justify-content: center;
-  flex-direction: column;
-  box-sizing: border-box;
-  width: ${({
-  width
-}) => width || "100%"};
-  color: var(--colorsUtilityYin090);
-  background-color: ${({
-  variant
-}) => variant !== "subtle" ? "var(--colorsUtilityYang100)" : "var(--colorsUtilityMajorTransparent)"};
-  border: 1px solid var(--colorsUtilityMajor100);
-  ${({
-  borders
-}) => borders === "default" && css`
-      border-left: none;
-      border-right: none;
-    `}
-  ${({
-  borders
-}) => borders === "none" && css`
-      border: none;
-    `}
-
-  ${({
-  variant
-}) => variant !== "subtle" && css`
-      & + & {
-        margin-top: -1px;
-        border-top: 1px solid var(--colorsUtilityMajor100);
-        border-bottom: 1px solid var(--colorsUtilityMajor100);
-      }
-    `}
-`;
-const StyledAccordionTitle = styled.h3`
-  font-size: ${({
-  size,
-  variant
-}) => size === "small" || variant === "subtle" ? "var(--fontSizes200)" : "var(--fontSizes400)"};
-  font-weight: 500;
-  line-height: 1;
-  user-select: none;
-  margin: 0;
-`;
-const StyledAccordionSubTitle = styled.span`
-  margin-top: 8px;
-`;
-const StyledAccordionIcon = styled(Icon)`
-  transition: transform 0.3s;
-  transform: rotate(0deg);
-  margin-right: ${({
-  iconAlign
-}) => iconAlign === "left" ? "var(--spacing200)" : "var(--spacing000)"};
-
-  ${({
-  isExpanded,
-  iconAlign
-}) => {
-  return isExpanded && (iconAlign === "right" ? "transform: rotate(180deg);" : "transform: rotate(-180deg);");
-}}
-
-  color: var(--colorsActionMinor500);
-`;
-const StyledAccordionHeadingsContainer = styled.div`
-  padding-right: var(--sizing300);
-  ${({
-  hasValidationIcon
-}) => css`
-    display: grid;
-    ${hasValidationIcon && css`
-      grid-template-columns: min-content auto;
-
-      ${StyledAccordionSubTitle} {
-        grid-column: span 3;
-      }
-    `}
-
-    ${!hasValidationIcon && css`
-      grid-template-rows: auto auto;
-    `}
-
-    ${ValidationIconStyle} {
-      height: 20px;
-      position: relative;
-      top: 2px;
-    }
-  `}
-`;
-const StyledAccordionTitleContainer = styled.div`
-  ${({
-  iconAlign,
-  size,
-  isExpanded,
-  variant
-}) => css`
-    padding: ${size === "small" ? "var(--spacing200)" : "var(--spacing300)"};
-    ${space}
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    ${iconAlign === "left" && css`
-      justify-content: flex-end;
-      flex-direction: row-reverse;
-    `}
-
-    cursor: pointer;
-    z-index: 1;
-
-    &:focus {
-      ${addFocusStyling()}
-    }
-
-    ${variant === "subtle" && css`
-      color: var(--colorsActionMajor500);
-      padding: var(--spacing025);
-      margin-bottom: ${isExpanded && "var(--spacing200)"};
-      width: fit-content;
-
-      ${StyledAccordionIcon} {
-        color: var(--colorsActionMajor500);
-        ${iconAlign === "left" && "margin-right: var(--spacing050)"};
-      }
-
-      :hover {
-        color: var(--colorsActionMajor600);
-        ${StyledAccordionIcon} {
-          color: var(--colorsActionMajor600);
-        }
-      }
-    `}
-
-    ${variant !== "subtle" && css`
-      &:hover {
-        background-color: var(--colorsUtilityMajor050);
-      }
-    `}
-  `}
-`;
-const StyledAccordionContentContainer = styled.div`
-  flex-grow: 1;
-  box-sizing: border-box;
-  overflow: hidden;
-  transition: all 0.3s;
-  ${({
-  maxHeight,
-  isExpanded
-}) => css`
-    max-height: ${isExpanded ? `${maxHeight}px` : "0px"};
-    height: ${isExpanded ? `${maxHeight}px` : "0px"};
-
-    ${!isExpanded && `
-      visibility: hidden;
-    `}
-  `}
-`;
-const StyledAccordionContent = styled.div`
-  padding: var(--spacing300);
-  padding-top: var(--spacing100);
-  overflow: hidden;
-
-  ${({
-  variant
-}) => variant === "subtle" && css`
-      margin-left: var(--spacing150);
-      padding: var(--spacing100) var(--spacing200) var(--spacing300);
-      border-left: 2px solid var(--colorsUtilityMajor100);
-    `}
-
-  ${({
-  disableContentPadding
-}) => disableContentPadding && css`
-      padding: 0;
-    `}
-`;
-StyledAccordionGroup.defaultProps = {
-  theme: baseTheme
-};
-StyledAccordionContainer.defaultProps = {
-  theme: baseTheme
-};
-StyledAccordionTitleContainer.defaultProps = {
-  theme: baseTheme
-};
-export { StyledAccordionGroup, StyledAccordionContainer, StyledAccordionHeadingsContainer, StyledAccordionSubTitle, StyledAccordionTitleContainer, StyledAccordionTitle, StyledAccordionIcon, StyledAccordionContent, StyledAccordionContentContainer };
+import o,{css as i}from"styled-components";import{margin as t,space as n}from"styled-system";import e from"../icon/icon.component.js";import"../../style/themes/sage/index.js";import r from"../../style/themes/base/index.js";import"../../style/themes/none/index.js";import a from"../../__internal__/validations/validation-icon.style.js";import s from"../../style/utils/add-focus-styling.js";const d=o.div.withConfig({displayName:"accordion.style__StyledAccordionGroup",componentId:"sc-d6e43b7a-0"})(["",""],t),c=o.div.withConfig({displayName:"accordion.style__StyledAccordionContainer",componentId:"sc-d6e43b7a-1"})([""," display:flex;",";justify-content:center;flex-direction:column;box-sizing:border-box;width:",";color:var(--colorsUtilityYin090);background-color:",";border:1px solid var(--colorsUtilityMajor100);"," "," ",""],n,(({variant:o})=>o&&i(["align-items:stretch;"])),(({width:o})=>o||"100%"),(({variant:o})=>"subtle"!==o?"var(--colorsUtilityYang100)":"var(--colorsUtilityMajorTransparent)"),(({borders:o})=>"default"===o&&i(["border-left:none;border-right:none;"])),(({borders:o})=>"none"===o&&i(["border:none;"])),(({variant:o})=>"subtle"!==o&&i(["& + &{margin-top:-1px;border-top:1px solid var(--colorsUtilityMajor100);border-bottom:1px solid var(--colorsUtilityMajor100);}"]))),l=o.h3.withConfig({displayName:"accordion.style__StyledAccordionTitle",componentId:"sc-d6e43b7a-2"})(["font-size:",";font-weight:500;line-height:1;user-select:none;margin:0;"],(({size:o,variant:i})=>"small"===o||"subtle"===i?"var(--fontSizes200)":"var(--fontSizes400)")),p=o.span.withConfig({displayName:"accordion.style__StyledAccordionSubTitle",componentId:"sc-d6e43b7a-3"})(["margin-top:8px;"]),g=o(e).withConfig({displayName:"accordion.style__StyledAccordionIcon",componentId:"sc-d6e43b7a-4"})(["transition:transform 0.3s;transform:rotate(0deg);margin-right:",";"," color:var(--colorsActionMinor500);"],(({iconAlign:o})=>"left"===o?"var(--spacing200)":"var(--spacing000)"),(({isExpanded:o,iconAlign:i})=>o&&("right"===i?"transform: rotate(180deg);":"transform: rotate(-180deg);"))),m=o.div.withConfig({displayName:"accordion.style__StyledAccordionHeadingsContainer",componentId:"sc-d6e43b7a-5"})(["padding-right:var(--sizing300);",""],(({hasValidationIcon:o})=>i(["display:grid;"," "," ","{height:20px;position:relative;top:2px;}"],o&&i(["grid-template-columns:min-content auto;","{grid-column:span 3;}"],p),!o&&i(["grid-template-rows:auto auto;"]),a))),y=o.div.withConfig({displayName:"accordion.style__StyledAccordionTitleContainer",componentId:"sc-d6e43b7a-6"})(["",""],(({iconAlign:o,size:t,isExpanded:e,variant:r})=>i(["padding:",";"," display:flex;align-items:center;justify-content:space-between;"," cursor:pointer;z-index:1;&:focus{","}"," ",""],"small"===t?"var(--spacing200)":"var(--spacing300)",n,"left"===o&&i(["justify-content:flex-end;flex-direction:row-reverse;"]),s(),"subtle"===r&&i(["color:var(--colorsActionMajor500);padding:var(--spacing025);margin-bottom:",";width:fit-content;","{color:var(--colorsActionMajor500);",";}:hover{color:var(--colorsActionMajor600);","{color:var(--colorsActionMajor600);}}"],e&&"var(--spacing200)",g,"left"===o&&"margin-right: var(--spacing050)",g),"subtle"!==r&&i(["&:hover{background-color:var(--colorsUtilityMajor050);}"])))),v=o.div.withConfig({displayName:"accordion.style__StyledAccordionContentContainer",componentId:"sc-d6e43b7a-7"})(["flex-grow:1;box-sizing:border-box;overflow:hidden;transition:all 0.3s;",""],(({maxHeight:o,isExpanded:t})=>i(["max-height:",";height:",";",""],t?`${o}px`:"0px",t?`${o}px`:"0px",!t&&"\n      visibility: hidden;\n    "))),f=o.div.withConfig({displayName:"accordion.style__StyledAccordionContent",componentId:"sc-d6e43b7a-8"})(["padding:var(--spacing300);padding-top:var(--spacing100);overflow:hidden;"," ",""],(({variant:o})=>"subtle"===o&&i(["margin-left:var(--spacing150);padding:var(--spacing100) var(--spacing200) var(--spacing300);border-left:2px solid var(--colorsUtilityMajor100);"])),(({disableContentPadding:o})=>o&&i(["padding:0;"])));d.defaultProps={theme:r},c.defaultProps={theme:r},y.defaultProps={theme:r};export{c as StyledAccordionContainer,f as StyledAccordionContent,v as StyledAccordionContentContainer,d as StyledAccordionGroup,m as StyledAccordionHeadingsContainer,g as StyledAccordionIcon,p as StyledAccordionSubTitle,l as StyledAccordionTitle,y as StyledAccordionTitleContainer};

package/esm/components/accordion/index.js

@@ -1,2 +1 @@
-export { default as Accordion } from "./accordion.component";
-export { default as AccordionGroup } from "./accordion-group/accordion-group.component";
+export{Accordion}from"./accordion.component.js";export{AccordionGroup}from"./accordion-group/accordion-group.component.js";