carbon-react 158.41.1 → 158.42.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (37) hide show
  1. package/esm/__internal__/popover/popover.component.d.ts +5 -1
  2. package/esm/__internal__/popover/popover.component.js +1 -1
  3. package/esm/__internal__/popover/popover.style.d.ts +1 -1
  4. package/esm/__internal__/popover/popover.style.js +1 -1
  5. package/esm/components/accordion/accordion-group/accordion-group.component.d.ts +3 -0
  6. package/esm/components/accordion/accordion-group/accordion-group.component.js +1 -1
  7. package/esm/components/accordion/accordion.component.d.ts +52 -21
  8. package/esm/components/accordion/accordion.component.js +1 -1
  9. package/esm/components/accordion/accordion.style.d.ts +22 -46
  10. package/esm/components/accordion/accordion.style.js +1 -1
  11. package/esm/components/button/__next__/button.style.js +1 -1
  12. package/esm/components/multi-action-button/multi-action-button.component.js +1 -1
  13. package/esm/components/select/__internal__/select-list/select-list.component.d.ts +3 -2
  14. package/esm/components/select/__internal__/select-list/select-list.component.js +1 -1
  15. package/esm/components/split-button/split-button.component.js +1 -1
  16. package/esm/components/tile-select/__internal__/accordion/accordion.component.js +1 -1
  17. package/esm/components/tile-select/__internal__/accordion/accordion.style.d.ts +2 -2
  18. package/esm/components/tile-select/__internal__/accordion/accordion.style.js +1 -1
  19. package/lib/__internal__/popover/popover.component.d.ts +5 -1
  20. package/lib/__internal__/popover/popover.component.js +1 -1
  21. package/lib/__internal__/popover/popover.style.d.ts +1 -1
  22. package/lib/__internal__/popover/popover.style.js +1 -1
  23. package/lib/components/accordion/accordion-group/accordion-group.component.d.ts +3 -0
  24. package/lib/components/accordion/accordion-group/accordion-group.component.js +1 -1
  25. package/lib/components/accordion/accordion.component.d.ts +52 -21
  26. package/lib/components/accordion/accordion.component.js +1 -1
  27. package/lib/components/accordion/accordion.style.d.ts +22 -46
  28. package/lib/components/accordion/accordion.style.js +1 -1
  29. package/lib/components/button/__next__/button.style.js +1 -1
  30. package/lib/components/multi-action-button/multi-action-button.component.js +1 -1
  31. package/lib/components/select/__internal__/select-list/select-list.component.d.ts +3 -2
  32. package/lib/components/select/__internal__/select-list/select-list.component.js +1 -1
  33. package/lib/components/split-button/split-button.component.js +1 -1
  34. package/lib/components/tile-select/__internal__/accordion/accordion.component.js +1 -1
  35. package/lib/components/tile-select/__internal__/accordion/accordion.style.d.ts +2 -2
  36. package/lib/components/tile-select/__internal__/accordion/accordion.style.js +1 -1
  37. package/package.json +1 -1
@@ -27,9 +27,13 @@ export interface PopoverProps {
27
27
  */
28
28
  reference: RefObject<HTMLElement>;
29
29
  /**
30
- * Determines if the popover is currently open/visible or not. Defaults to true.
30
+ * Whether the Popover is open, determines if autoUpdate runs in useFloating.
31
31
  */
32
32
  isOpen?: boolean;
33
+ /**
34
+ * Applies display: none to the content wrapper.
35
+ */
36
+ hide?: boolean;
33
37
  /**
34
38
  * Whether to update the position of the floating element on every animation frame if required. This is optimized for performance but can still be costly. Use with caution!
35
39
  * [https://floating-ui.com/docs/autoUpdate#animationframe](https://floating-ui.com/docs/autoUpdate#animationframe)
@@ -1 +1 @@
1
- import{jsx as e}from"react/jsx-runtime";import r,{useContext as o,useRef as t}from"react";import{createPortal as n}from"react-dom";import{flip as l}from"@floating-ui/dom";import i from"../../hooks/__internal__/useFloating/useFloating.js";import{StyledPopoverContent as a,StyledBackdrop as c}from"./popover.style.js";import s from"../../style/design-tokens/carbon-scoped-tokens-provider/carbon-scoped-tokens-provider.component.js";import m from"../modal/modal.context.js";import p from"../../hooks/__internal__/useIsBrowser/index.js";function d(e,r,o){return r in e?Object.defineProperty(e,r,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[r]=o,e}function f(e){for(var r=1;r<arguments.length;r++){var o=null!=arguments[r]?arguments[r]:{},t=Object.keys(o);"function"==typeof Object.getOwnPropertySymbols&&(t=t.concat(Object.getOwnPropertySymbols(o).filter((function(e){return Object.getOwnPropertyDescriptor(o,e).enumerable})))),t.forEach((function(r){d(e,r,o[r])}))}return e}const u=[l({fallbackStrategy:"initialPlacement"})],b=({children:o,placement:n,reference:l,middleware:s=u,disableBackgroundUI:m,isOpen:p=!0,animationFrame:d,popoverStrategy:f="absolute",childRefOverride:b})=>{const y=b||r.Children.only(o).ref,O=t(null),g=y||O;let j;return j=y?o:r.cloneElement(o,{ref:g}),i({isOpen:p,reference:l,floating:g,placement:n,middleware:s,animationFrame:d,strategy:f}),e(a,{isOpen:p,children:m?e(c,{"data-role":"popup-backdrop",children:j}):j})},y=r=>{var t,{disablePortal:l}=r,i=function(e,r){if(null==e)return{};var o,t,n=function(e,r){if(null==e)return{};var o,t,n={},l=Object.keys(e);for(t=0;t<l.length;t++)o=l[t],r.indexOf(o)>=0||(n[o]=e[o]);return n}(e,r);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(t=0;t<l.length;t++)o=l[t],r.indexOf(o)>=0||Object.prototype.propertyIsEnumerable.call(e,o)&&(n[o]=e[o])}return n}(r,["disablePortal"]);const{isBrowser:a}=p(),{isInModal:c}=o(m),d=null===(t=i.reference.current)||void 0===t?void 0:t.closest("[role='dialog']");return l?e(b,f({},i)):a?n(e(s,{className:"carbon-portal-scoped-tokens-provider",children:e(b,f({},i))}),c&&d?d:document.body):null};export{y as default};
1
+ import{jsx as e}from"react/jsx-runtime";import r,{useContext as o,useRef as t}from"react";import{createPortal as n}from"react-dom";import{flip as l}from"@floating-ui/dom";import i from"../../hooks/__internal__/useFloating/useFloating.js";import{StyledPopoverContent as a,StyledBackdrop as c}from"./popover.style.js";import s from"../../style/design-tokens/carbon-scoped-tokens-provider/carbon-scoped-tokens-provider.component.js";import m from"../modal/modal.context.js";import p from"../../hooks/__internal__/useIsBrowser/index.js";function d(e,r,o){return r in e?Object.defineProperty(e,r,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[r]=o,e}function f(e){for(var r=1;r<arguments.length;r++){var o=null!=arguments[r]?arguments[r]:{},t=Object.keys(o);"function"==typeof Object.getOwnPropertySymbols&&(t=t.concat(Object.getOwnPropertySymbols(o).filter((function(e){return Object.getOwnPropertyDescriptor(o,e).enumerable})))),t.forEach((function(r){d(e,r,o[r])}))}return e}const u=[l({fallbackStrategy:"initialPlacement"})],b=({children:o,placement:n,reference:l,middleware:s=u,disableBackgroundUI:m,isOpen:p=!0,hide:d,animationFrame:f,popoverStrategy:b="absolute",childRefOverride:y})=>{const g=y||r.Children.only(o).ref,O=t(null),j=g||O;let v;return v=g?o:r.cloneElement(o,{ref:j}),i({isOpen:p,reference:l,floating:j,placement:n,middleware:s,animationFrame:f,strategy:b}),e(a,{hide:d,children:m?e(c,{"data-role":"popup-backdrop",children:v}):v})},y=r=>{var t,{disablePortal:l}=r,i=function(e,r){if(null==e)return{};var o,t,n=function(e,r){if(null==e)return{};var o,t,n={},l=Object.keys(e);for(t=0;t<l.length;t++)o=l[t],r.indexOf(o)>=0||(n[o]=e[o]);return n}(e,r);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(t=0;t<l.length;t++)o=l[t],r.indexOf(o)>=0||Object.prototype.propertyIsEnumerable.call(e,o)&&(n[o]=e[o])}return n}(r,["disablePortal"]);const{isBrowser:a}=p(),{isInModal:c}=o(m),d=null===(t=i.reference.current)||void 0===t?void 0:t.closest("[role='dialog']");return l?e(b,f({},i)):a?n(e(s,{className:"carbon-portal-scoped-tokens-provider",children:e(b,f({},i))}),c&&d?d:document.body):null};export{y as default};
@@ -2,7 +2,7 @@ export declare const StyledBackdrop: import("styled-components").StyledComponent
2
2
  theme: object;
3
3
  }, "theme">;
4
4
  type StyledPopoverContentProps = {
5
- isOpen?: boolean;
5
+ hide?: boolean;
6
6
  };
7
7
  export declare const StyledPopoverContent: import("styled-components").StyledComponent<"div", any, StyledPopoverContentProps, never>;
8
8
  export {};
@@ -1 +1 @@
1
- import e from"styled-components";import o from"../../style/themes/apply-base-theme.js";const t=e.div.attrs(o).withConfig({displayName:"popover.style__StyledBackdrop",componentId:"sc-914db531-0"})(["bottom:0;left:0;position:fixed;right:0;top:0;z-index:var( --adaptiveSidebarModalBackdrop,"," );background:transparent;"],(({theme:e})=>e.zIndex.popover)),p=e.div.withConfig({displayName:"popover.style__StyledPopoverContent",componentId:"sc-914db531-1"})(["",""],(({isOpen:e})=>!e&&"display: none;"));export{t as StyledBackdrop,p as StyledPopoverContent};
1
+ import e from"styled-components";import o from"../../style/themes/apply-base-theme.js";const t=e.div.attrs(o).withConfig({displayName:"popover.style__StyledBackdrop",componentId:"sc-fb4df9e5-0"})(["bottom:0;left:0;position:fixed;right:0;top:0;z-index:var( --adaptiveSidebarModalBackdrop,"," );background:transparent;"],(({theme:e})=>e.zIndex.popover)),p=e.div.withConfig({displayName:"popover.style__StyledPopoverContent",componentId:"sc-fb4df9e5-1"})(["",""],(({hide:e})=>e&&"display: none;"));export{t as StyledBackdrop,p as StyledPopoverContent};
@@ -2,6 +2,9 @@ import React from "react";
2
2
  import { MarginProps } from "styled-system";
3
3
  import { TagProps } from "../../../__internal__/utils/helpers/tags";
4
4
  type AccordionGroupChild = React.ReactElement | boolean | null | undefined | Array<AccordionGroupChild>;
5
+ /**
6
+ * @deprecated This component is deprecated and will be removed in a future release. Wrapping a group of Accordions in AccordionGroup is no longer required.
7
+ */
5
8
  export interface AccordionGroupProps extends MarginProps, TagProps {
6
9
  /** An Accordion or list of Accordion components to be rendered inside the AccordionGroup */
7
10
  children?: AccordionGroupChild;
@@ -1 +1 @@
1
- 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};
1
+ 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 u=!1;const f=f=>{var{children:y}=f,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}(f,["children"]);u||(u=!0,s.deprecate("`AccordionGroup` is deprecated and will be removed in a future release. Wrapping a group of Accordions in AccordionGroup is no longer required."));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]),g=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]),j=n(((e,r)=>{i.isUpKey(e)&&g(e,r-1),i.isDownKey(e)&&g(e,r+1),i.isHomeKey(e)&&g(e,0),i.isEndKey(e)&&g(e,O.length-1)}),[g,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:j})))})?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};f.displayName="AccordionGroup";export{f as AccordionGroup,f as default};
@@ -1,39 +1,70 @@
1
1
  import React from "react";
2
2
  import { SpaceProps } from "styled-system";
3
3
  import { TagProps } from "../../__internal__/utils/helpers/tags";
4
- import { StyledAccordionContainerProps } from "./accordion.style";
5
- export interface AccordionProps extends StyledAccordionContainerProps, SpaceProps, TagProps {
4
+ export interface AccordionProps extends SpaceProps, TagProps {
5
+ id?: string;
6
6
  /** Content of the Accordion component */
7
7
  children?: React.ReactNode;
8
- /** Set the default state of expansion of the Accordion if component is meant to be used as uncontrolled */
8
+ /** Set the default state of expansion of the Accordion if component is to be used as uncontrolled */
9
9
  defaultExpanded?: boolean;
10
- /** Disable padding for the content */
10
+ /**
11
+ * Disable padding for the content.
12
+ * @deprecated Padding is no longer applied to the Accordion content by default. Any desired spacing can be applied directly to the provided content.
13
+ */
11
14
  disableContentPadding?: boolean;
12
- /** Sets the expansion state of the Accordion if component is meant to be used as controlled */
15
+ /** Sets the expansion state of the Accordion if component is to be used as controlled */
13
16
  expanded?: boolean;
14
- /** An error message to be displayed in the tooltip */
15
- error?: string;
16
17
  /** Styled system spacing props provided to Accordion Title */
17
18
  headerSpacing?: SpaceProps;
18
- id?: string;
19
- /** Sets icon type */
20
- iconType?: "chevron_down" | "chevron_down_thick" | "dropdown";
21
- /** Sets icon alignment */
22
- iconAlign?: "left" | "right";
23
- /** Sets accordion title */
19
+ /** Title of the Accordion */
24
20
  title: React.ReactNode;
25
- /** An info message to be displayed in the tooltip */
26
- info?: string;
27
- /** Callback fired when expansion state changes */
28
- onChange?: (event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>, isExpanded: boolean) => void;
29
- /** When the Accordion is open the title can change to this */
21
+ /** Title of the Accordion when it is open */
30
22
  openTitle?: string;
31
- /** Sets accordion size */
32
- size?: "large" | "small";
33
23
  /** Sets accordion sub title */
34
24
  subTitle?: string;
35
- /** A warning message to be displayed in the tooltip */
25
+ /** Callback fired when expansion state changes */
26
+ onChange?: (event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>, isExpanded: boolean) => void;
27
+ /** Sets Accordion size */
28
+ size?: "small" | "medium" | "large";
29
+ /**
30
+ * Sets Accordion borders.
31
+ *
32
+ * **Deprecation Warning:** The "full" borders are deprecated and will be removed in a future release.
33
+ */
34
+ borders?: "default" | "none" | "full";
35
+ /** Sets Accordion width */
36
+ width?: string;
37
+ /**
38
+ * Sets Accordion variant.
39
+ *
40
+ * **Deprecation Warning:** The "subtle" variant is deprecated, please use "simple" instead.
41
+ */
42
+ variant?: "standard" | "simple" | "subtle";
43
+ /**
44
+ * Sets icon type
45
+ * @deprecated Custom icon types on accordions are deprecated and will be removed in a future release.
46
+ */
47
+ iconType?: "chevron_down" | "chevron_down_thick" | "dropdown";
48
+ /**
49
+ * Sets icon alignment.
50
+ * @deprecated Icon alignment on accordions is deprecated and will be removed in a future release. Icons will now render on the left by default.
51
+ */
52
+ iconAlign?: "left" | "right";
53
+ /**
54
+ * An error message to be displayed in the tooltip.
55
+ * @deprecated Validation messages on accordions are no longer supported.
56
+ */
57
+ error?: string;
58
+ /**
59
+ * A warning message to be displayed in the tooltip.
60
+ * @deprecated Validation messages on accordions are no longer supported.
61
+ */
36
62
  warning?: string;
63
+ /**
64
+ * An info message to be displayed in the tooltip.
65
+ * @deprecated Validation messages on accordions are no longer supported.
66
+ */
67
+ info?: string;
37
68
  }
38
69
  export interface AccordionInternalProps {
39
70
  /** @ignore @private */
@@ -1 +1 @@
1
- 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 u from"../../__internal__/utils/helpers/events/events.js";import{StyledAccordionContainer as p,StyledAccordionTitleContainer as b,StyledAccordionHeadingsContainer as f,StyledAccordionTitle as h,StyledAccordionSubTitle as g,StyledAccordionIcon as m,StyledAccordionContentContainer as y,StyledAccordionContent as v}from"./accordion.style.js";import{ValidationIcon as O}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:D,iconAlign:T,size:K="large",subTitle:H,title:I,width:R,headerSpacing:$,disableContentPadding:L=!1,error:N,warning:V,info:q,openTitle:B,variant:F="standard"}=t,G=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 J=void 0!==A,[M,Q]=i(P||!1),[U,W]=i(M?"auto":0),X=o(null),Y=o(null),Z=J?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)}),[Z]);const ee=c((e=>{J||Q(!Z),null==E||E(e,!Z)}),[J,Z,E]);a((()=>{var e,n;Z?null===(e=Y.current)||void 0===e||e.removeAttribute("hidden"):null===(n=Y.current)||void 0===n||n.setAttribute("hidden","until-found")}),[Z]),a((()=>{const e=Y.current;if(!e)return;const n=e=>{ee(e)};return e.addEventListener("beforematch",n),()=>e.removeEventListener("beforematch",n)}),[ee,J,E]);const ne=c((e=>{C&&C(e,z),(u.isEnterKey(e)||u.isSpaceKey(e))&&(e.preventDefault(),ee(e))}),[C,z,ee]),re=o(s()),te=k||`Accordion_${re.current}`,ie=`AccordionHeader_${re.current}`,oe=`AccordionContent_${re.current}`,ae=!!(N||V||q);return e(p,w(j({id:te,width:R,borders:"subtle"===F?"none":x,variant:F},G,l("accordion",G)),{children:[e(b,w(j({"data-element":"accordion-title-container",id:ie,"aria-expanded":Z,"aria-controls":oe,onClick:ee,onKeyDown:ne,tabIndex:0,iconAlign:T||("standard"===F?"right":"left"),ref:_,size:K,isExpanded:Z,variant:F,role:"button"},$),{children:[e(f,{"data-element":"accordion-headings-container",hasValidationIcon:ae,children:["string"==typeof I?n(h,{"data-element":"accordion-title",size:K,variant:F,children:Z&&B||I}):Z&&B||I,"subtle"!==F&&e(r,{children:[ae&&n(O,{error:N,warning:V,info:q,tooltipPosition:"top",tabIndex:0,ml:1}),H&&"large"===K&&"standard"===F&&n(g,{children:H})]})]}),n(m,{"data-element":"accordion-icon",type:D||("small"===K||"subtle"===F?"chevron_down_thick":"chevron_down"),isExpanded:Z,iconAlign:T||("standard"===F?"right":"left")})]})),n(y,{ref:Y,isExpanded:Z,maxHeight:U,"data-role":"accordion-content-container",children:n(v,{role:"region","data-element":"accordion-content","data-role":"accordion-content",id:oe,"aria-labelledby":ie,ref:X,disableContentPadding:L,variant:F,children:S})})]}))}));x.displayName="Accordion";export{x as Accordion,x as default};
1
+ import{jsxs as e,jsx as r}from"react/jsx-runtime";import n,{useState as t,useRef as o,useEffect as i,useCallback as a}from"react";import c from"../../__internal__/utils/helpers/tags/tags.js";import l from"../../hooks/__internal__/useResizeObserver/useResizeObserver.js";import d from"../../__internal__/utils/helpers/guid/index.js";import s from"../../__internal__/utils/helpers/events/events.js";import{StyledAccordionContainer as u,StyledAccordionTitleContainer as p,StyledAccordionTitleWrapper as f,StyledAccordionSubTitle as b,StyledAccordionContentContainer as m,StyledAccordionLine as y,StyledAccordionContent as h,StyledAccordionIcon as v,StyledAccordionTitle as g}from"./accordion.style.js";import{Button as O}from"../button/__next__/button.component.js";import j from"../../hooks/useMediaQuery/useMediaQuery.js";function _(e,r,n){return r in e?Object.defineProperty(e,r,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[r]=n,e}function w(e){for(var r=1;r<arguments.length;r++){var n=null!=arguments[r]?arguments[r]:{},t=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(t=t.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),t.forEach((function(r){_(e,r,n[r])}))}return e}function x(e,r){return r=null!=r?r:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r.push.apply(r,n)}return r}(Object(r)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(r,n))})),e}const $=n.forwardRef(((n,_)=>{var{borders:$="default",defaultExpanded:P,expanded:A,onChange:E,children:S,handleKeyboardAccessibility:T,id:k,index:z,iconType:C,iconAlign:D,size:K="medium",subTitle:M,title:H,width:R,headerSpacing:I,disableContentPadding:L,error:N,warning:Q,info:q,openTitle:B,variant:F="standard"}=n,G=function(e,r){if(null==e)return{};var n,t,o=function(e,r){if(null==e)return{};var n,t,o={},i=Object.keys(e);for(t=0;t<i.length;t++)n=i[t],r.indexOf(n)>=0||(o[n]=e[n]);return o}(e,r);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(t=0;t<i.length;t++)n=i[t],r.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}(n,["borders","defaultExpanded","expanded","onChange","children","handleKeyboardAccessibility","id","index","iconType","iconAlign","size","subTitle","title","width","headerSpacing","disableContentPadding","error","warning","info","openTitle","variant"]);const J=void 0!==A,[U,V]=t(P||!1),[W,X]=t(U?"auto":0),Y=o(null),Z=o(null),ee=J?A:U;l(Y,(()=>{var e;X(null===(e=Y.current)||void 0===e?void 0:e.scrollHeight)})),i((()=>{var e;X(null===(e=Y.current)||void 0===e?void 0:e.scrollHeight)}),[ee]);const re=j("screen and (prefers-reduced-motion: no-preference)"),ne=a((e=>{J||V(!ee),null==E||E(e,!ee)}),[J,ee,E]),te=re?400:0;i((()=>{var e;if(!ee){const e=setTimeout((()=>{var e;null===(e=Z.current)||void 0===e||e.setAttribute("hidden","until-found")}),te);return()=>clearTimeout(e)}null===(e=Z.current)||void 0===e||e.removeAttribute("hidden")}),[ee,te]),i((()=>{const e=Z.current;if(!e)return;const r=e=>{ne(e)};return e.addEventListener("beforematch",r),()=>e.removeEventListener("beforematch",r)}),[ne,J,E]);const oe=a((e=>{T&&T(e,z),(s.isEnterKey(e)||s.isSpaceKey(e))&&(e.preventDefault(),ne(e))}),[T,z,ne]),ie=o(d()),ae=k||`Accordion_${ie.current}`,ce=`AccordionHeader_${ie.current}`,le=`AccordionContent_${ie.current}`,de="large"===K?"medium":K,se="subtle"===F?"simple":F,ue=()=>ee&&B||H,pe=()=>r(v,{"data-element":"accordion-icon","data-role":"accordion-icon",type:C||("standard"===F&&"medium"===de?"chevron_down":"chevron_down_thick"),$isExpanded:ee,$allowMotion:re});return e(u,x(w({id:ae,$width:R,$borders:$,$variant:se,$isExpanded:ee,$allowMotion:re},G,c("accordion",G)),{children:["simple"===se?e(O,{"data-role":"accordion-simple-button",id:ce,"aria-expanded":ee,"aria-controls":le,onClick:ne,variantType:"tertiary",size:K,className:ee?"active":"",children:[pe(),ue()]}):e(p,x(w({"data-element":"accordion-title-container",id:ce,"aria-expanded":ee,"aria-controls":le,onClick:ne,onKeyDown:oe,tabIndex:0,ref:_,role:"button",$size:de,$iconAlign:D},I),{children:[pe(),e(f,{children:["string"==typeof H?r(g,{"data-element":"accordion-title",$size:de,children:ue()}):ue(),M&&r(b,{"data-element":"accordion-subtitle",$size:de,children:M})]})]})),e(m,{ref:Z,$isExpanded:ee,$height:W,$allowMotion:re,"data-role":"accordion-content-container",children:["simple"===se&&r(y,{}),r(h,{role:"region","data-element":"accordion-content","data-role":"accordion-content",id:le,"aria-labelledby":ce,ref:Y,$variant:se,children:S})]})]}))}));$.displayName="Accordion";export{$ as Accordion,$ as default};
@@ -1,50 +1,26 @@
1
- declare const StyledAccordionGroup: import("styled-components").StyledComponent<"div", any, {
1
+ export interface StyledAccordionProps {
2
+ $borders?: "default" | "full" | "none";
3
+ $width?: string;
4
+ $variant?: "standard" | "simple";
5
+ $isExpanded?: boolean;
6
+ $allowMotion?: boolean;
7
+ $size?: "small" | "medium";
8
+ $iconAlign?: "left" | "right";
9
+ $height?: string | number;
10
+ }
11
+ export declare const StyledAccordionGroup: import("styled-components").StyledComponent<"div", any, {
2
12
  theme: object;
3
13
  }, "theme">;
4
- export interface StyledAccordionContainerProps {
5
- /** Toggles left and right borders, set to none when variant is subtle */
6
- borders?: "default" | "full" | "none";
7
- /** Sets accordion width */
8
- width?: string;
9
- /** Sets accordion variant */
10
- variant?: "standard" | "subtle";
11
- }
12
- declare const StyledAccordionContainer: import("styled-components").StyledComponent<"div", any, {
14
+ export declare const StyledAccordionContainer: import("styled-components").StyledComponent<"div", any, {
13
15
  theme: object;
14
- } & StyledAccordionContainerProps, "theme">;
15
- interface StyledAccordionTitleProps {
16
- size?: "large" | "small";
17
- variant?: "standard" | "subtle";
18
- }
19
- declare const StyledAccordionTitle: import("styled-components").StyledComponent<"h3", any, StyledAccordionTitleProps, never>;
20
- declare const StyledAccordionSubTitle: import("styled-components").StyledComponent<"span", any, {}, never>;
21
- interface StyledAccordionIconProps {
22
- isExpanded?: boolean;
23
- iconAlign?: "left" | "right";
24
- }
25
- declare const StyledAccordionIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../icon").IconProps & import("react").RefAttributes<HTMLSpanElement>>, any, StyledAccordionIconProps, never>;
26
- interface StyledAccordionHeadingsContainerProps {
27
- hasValidationIcon?: boolean;
28
- }
29
- declare const StyledAccordionHeadingsContainer: import("styled-components").StyledComponent<"div", any, StyledAccordionHeadingsContainerProps, never>;
30
- interface StyledAccordionTitleContainerProps {
31
- hasButtonProps?: boolean;
32
- iconAlign?: "left" | "right";
33
- size?: "large" | "small";
34
- isExpanded?: boolean;
35
- variant?: "standard" | "subtle";
36
- }
37
- declare const StyledAccordionTitleContainer: import("styled-components").StyledComponent<"div", any, {
16
+ } & StyledAccordionProps, "theme">;
17
+ export declare const StyledAccordionTitle: import("styled-components").StyledComponent<"h3", any, StyledAccordionProps, never>;
18
+ export declare const StyledAccordionSubTitle: import("styled-components").StyledComponent<"span", any, StyledAccordionProps, never>;
19
+ export declare const StyledAccordionIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../icon").IconProps & import("react").RefAttributes<HTMLSpanElement>>, any, StyledAccordionProps, never>;
20
+ export declare const StyledAccordionTitleWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
21
+ export declare const StyledAccordionTitleContainer: import("styled-components").StyledComponent<"div", any, {
38
22
  theme: object;
39
- } & StyledAccordionTitleContainerProps, "theme">;
40
- export interface StyledAccordionContentContainerProps {
41
- isExpanded?: boolean;
42
- maxHeight?: string | number;
43
- }
44
- declare const StyledAccordionContentContainer: import("styled-components").StyledComponent<"div", any, StyledAccordionContentContainerProps, never>;
45
- export interface StyledAccordionContentProps {
46
- disableContentPadding?: boolean;
47
- variant?: "standard" | "subtle";
48
- }
49
- declare const StyledAccordionContent: import("styled-components").StyledComponent<"div", any, StyledAccordionContentProps, never>;
50
- export { StyledAccordionGroup, StyledAccordionContainer, StyledAccordionHeadingsContainer, StyledAccordionSubTitle, StyledAccordionTitleContainer, StyledAccordionTitle, StyledAccordionIcon, StyledAccordionContent, StyledAccordionContentContainer, };
23
+ } & StyledAccordionProps, "theme">;
24
+ export declare const StyledAccordionLine: import("styled-components").StyledComponent<"div", any, {}, never>;
25
+ export declare const StyledAccordionContentContainer: import("styled-components").StyledComponent<"div", any, StyledAccordionProps, never>;
26
+ export declare const StyledAccordionContent: import("styled-components").StyledComponent<"div", any, StyledAccordionProps, never>;
@@ -1 +1 @@
1
- import o,{css as i}from"styled-components";import{margin as t,space as n}from"styled-system";import r from"../icon/icon.component.js";import a from"../../style/themes/apply-base-theme.js";import e from"../../__internal__/validations/validation-icon.style.js";import s from"../../style/utils/add-focus-styling.js";const c=o.div.attrs(a).withConfig({displayName:"accordion.style__StyledAccordionGroup",componentId:"sc-a73079b2-0"})(["",""],t),d=o.div.attrs(a).withConfig({displayName:"accordion.style__StyledAccordionContainer",componentId:"sc-a73079b2-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-a73079b2-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-a73079b2-3"})(["margin-top:8px;"]),g=o(r).withConfig({displayName:"accordion.style__StyledAccordionIcon",componentId:"sc-a73079b2-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-a73079b2-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;"]),e))),v=o.div.attrs(a).withConfig({displayName:"accordion.style__StyledAccordionTitleContainer",componentId:"sc-a73079b2-6"})(["",""],(({iconAlign:o,size:t,isExpanded:r,variant:a})=>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"===a&&i(["color:var(--colorsActionMajor500);padding:var(--spacing025);margin-bottom:",";width:fit-content;","{color:var(--colorsActionMajor500);",";}:hover{color:var(--colorsActionMajor600);","{color:var(--colorsActionMajor600);}}"],r&&"var(--spacing200)",g,"left"===o&&"margin-right: var(--spacing050)",g),"subtle"!==a&&i(["&:hover{background-color:var(--colorsUtilityMajor050);}"])))),y=o.div.withConfig({displayName:"accordion.style__StyledAccordionContentContainer",componentId:"sc-a73079b2-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"))),f=o.div.withConfig({displayName:"accordion.style__StyledAccordionContent",componentId:"sc-a73079b2-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;"])));export{d as StyledAccordionContainer,f as StyledAccordionContent,y as StyledAccordionContentContainer,c as StyledAccordionGroup,m as StyledAccordionHeadingsContainer,g as StyledAccordionIcon,p as StyledAccordionSubTitle,l as StyledAccordionTitle,v as StyledAccordionTitleContainer};
1
+ import o,{css as t}from"styled-components";import{margin as e,space as i}from"styled-system";import n from"../icon/icon.component.js";import a from"../../style/themes/apply-base-theme.js";import r from"../../style/utils/add-focus-styling.js";const l={small:{titleFont:"var(--global-font-static-section-heading-s)",subtitleFont:"var(--global-font-static-comp-medium-s)",headingPadding:"var(--global-space-comp-l)"},medium:{titleFont:"var(--global-font-static-section-heading-m)",subtitleFont:"var(--global-font-static-comp-medium-l)",headingPadding:"var(--global-space-comp-xl)"}},c=o.div.attrs(a).withConfig({displayName:"accordion.style__StyledAccordionGroup",componentId:"sc-5e39e462-0"})(["",""],e),d=o.div.attrs(a).withConfig({displayName:"accordion.style__StyledAccordionContainer",componentId:"sc-5e39e462-1"})(["display:flex;align-items:stretch;justify-content:center;flex-direction:column;box-sizing:border-box;width:",";"," &&{","}"],(({$width:o})=>o||"100%"),(({$variant:o,$borders:e,$isExpanded:i,$allowMotion:n})=>t([""," ",""],"standard"===o&&t(["& + &{margin-top:-1px;}border:1px solid var(--container-action-border-default);",";",";"],"default"===e&&t(["border-left:none;border-right:none;"]),"none"===e&&t(["border:none;"])),"simple"===o&&t(["gap:",";",""],i?"var(--global-space-comp-l)":"0px",n&&t(["transition:gap 0.4s;"])))),i),s=o.h3.withConfig({displayName:"accordion.style__StyledAccordionTitle",componentId:"sc-5e39e462-2"})([""," color:var(--container-action-txt-default);margin:0;"],(({$size:o})=>o&&t(["font:",";"],l[o].titleFont))),p=o.span.withConfig({displayName:"accordion.style__StyledAccordionSubTitle",componentId:"sc-5e39e462-3"})([""," color:var(--container-action-txt-alt-default);"],(({$size:o})=>o&&t(["font:",";"],l[o].subtitleFont))),m=o(n).withConfig({displayName:"accordion.style__StyledAccordionIcon",componentId:"sc-5e39e462-4"})(["width:var(--global-size-2-xs);height:var(--global-size-2-xs);color:var(--container-action-icon-default);",";"],(({$isExpanded:o,$allowMotion:e})=>t(["transform:rotate(0deg);"," ",""],o&&t(["transform:rotate(-180deg);"]),e&&t(["transition:transform 0.4s;"])))),g=o.div.withConfig({displayName:"accordion.style__StyledAccordionTitleWrapper",componentId:"sc-5e39e462-5"})(["display:flex;flex-direction:column;align-items:flex-start;gap:var(--global-space-comp-xs);flex:1 0 0;"]),f=o.div.attrs(a).withConfig({displayName:"accordion.style__StyledAccordionTitleContainer",componentId:"sc-5e39e462-6"})(["",""],(({$size:o,$iconAlign:e})=>o&&t(["display:flex;flex:1 0 0;align-items:center;align-self:stretch;background-color:transparent;border:none;text-align:left;gap:var(--global-space-comp-l);padding:",";"," "," &:hover{cursor:pointer;background-color:var(--container-action-bg-hover);}&:focus{"," z-index:1;}"],l[o].headingPadding,"right"===e&&t(["flex-direction:row-reverse;"]),i,r()))),y=o.div.withConfig({displayName:"accordion.style__StyledAccordionLine",componentId:"sc-5e39e462-7"})(["position:absolute;width:2px;background-color:var(--input-typical-border-alt);border-radius:var(--global-radius-action-xs);height:100%;"]),h=o.div.withConfig({displayName:"accordion.style__StyledAccordionContentContainer",componentId:"sc-5e39e462-8"})(["position:relative;overflow:hidden;height:0;opacity:0;",""],(({$height:o,$isExpanded:e,$allowMotion:i})=>t([""," ",""],i&&t(["transition:height 0.4s,opacity 0.2s;"]),e&&t(["height:","px;opacity:1;"],o)))),b=o.div.withConfig({displayName:"accordion.style__StyledAccordionContent",componentId:"sc-5e39e462-9"})(["",""],(({$variant:o})=>t(["overflow:hidden;",""],"simple"===o&&t(["margin-left:var(--global-space-comp-l);"]))));export{d as StyledAccordionContainer,b as StyledAccordionContent,h as StyledAccordionContentContainer,c as StyledAccordionGroup,m as StyledAccordionIcon,y as StyledAccordionLine,p as StyledAccordionSubTitle,s as StyledAccordionTitle,f as StyledAccordionTitleContainer,g as StyledAccordionTitleWrapper};
@@ -1 +1 @@
1
- import o,{css as e}from"styled-components";import{space as i}from"styled-system";import r from"../../../style/utils/add-focus-styling.js";import{gradientAnimation as n,propsForSize as a,inverseColourSettings as t,colourSettings as d}from"./button.config.js";const l=o.span.withConfig({displayName:"button.style__StyledContentContainer",componentId:"sc-c07486b9-0"})(["display:flex;gap:var(--global-space-comp-s);align-items:center;justify-content:center;"]),c=o.button.withConfig({displayName:"button.style__StyledButton",componentId:"sc-c07486b9-1"})([""," align-items:center;box-sizing:border-box;display:inline-flex;justify-content:center;outline-offset:0;text-decoration:none;vertical-align:middle;cursor:pointer;"," "," &:focus{"," position:relative;z-index:1;}"],i,(({$allowMotion:o,disabled:i,$inverse:r,$size:l,$variant:c,$variantType:s,$iconOnly:b})=>r?(({disabled:o,size:i,variantType:r,iconOnly:n})=>{const{background:d,border:l,label:c}=t[r],{borderRadius:s,font:b,height:u,paddingVertical:v,paddingHorizontal:g}=a[i];return e(["background-color:",";border:"," solid ",";border-radius:",";color:",";font:",";height:",";width:",";padding:"," ",";",""],d.default,"tertiary"===r?"1px":"2px",l.default,n?"var(--global-radius-action-circle)":s,c.default,b,u,n?u:"max-content",v,n?"":g,o?e(["background-color:",";border-color:",";color:",";cursor:not-allowed;"],d.disabled,l.disabled,c.disabled):e(["&:active{background-color:",";color:",";border-color:",";}&:hover{background-color:",";color:",";border-color:",";}"],d.active,c.active,l.active,d.hover,c.hover,l.hover))})({disabled:i,size:l,variantType:s,iconOnly:b}):"gradient"===c?e([""," ",""],n,(({allowMotion:o=!0,disabled:i,size:r,iconOnly:n})=>{const{background:t,border:l,label:c}=d.gradient.secondary||{},{borderRadius:s,font:b,height:u,paddingVertical:v,paddingHorizontal:g}=a[r];return e(["position:relative;z-index:0;border:none;border-radius:",";background:white;color:var(--button-ai-label-default);font:",";height:",";width:",";padding:"," ",';overflow:hidden;&::before{content:"";position:absolute;inset:0;padding:2px;border-radius:inherit;z-index:-1;background:var(--button-ai-border-default);background-position:0% 0;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;}&:hover{background:linear-gradient( 90deg,var(--mode-color-action-ai-hover-stop-1) 0%,var(--mode-color-action-ai-hover-stop-2) 40%,var(--mode-color-action-ai-hover-stop-3) 90% );}&:hover::before{',"}"," ",""],n?"var(--global-radius-action-circle)":s,b,u,n?u:"max-content",v,n?"":g,o&&e(["background-size:300% 100%;animation:gradient-loop 1000ms linear infinite;"]),i&&e(["opacity:0.6;pointer-events:none;cursor:not-allowed;&::before{animation:none;background:none;-webkit-mask:none;mask:none;border:2px solid var(--button-ai-border-disabled);padding:0;}color:var(--button-ai-label-disabled);"]),!i&&e(["&:active{background:",";color:",";border-color:",";}"],null==t?void 0:t.active,null==c?void 0:c.active,null==l?void 0:l.active))})({allowMotion:o,disabled:i,size:l,iconOnly:b})):(({disabled:o,size:i,variant:r,variantType:n,iconOnly:t})=>{const{background:l,border:c,label:s}=d[r][n]||{},{borderRadius:b,font:u,height:v,paddingVertical:g,paddingHorizontal:p}=a[i];return e(["background-color:",";border:"," solid ",";border-radius:",";color:",";font:",";height:",";width:",";padding:"," ",";",""],null==l?void 0:l.default,"tertiary"===n?"1px":"2px",null==c?void 0:c.default,t?"var(--global-radius-action-circle)":b,null==s?void 0:s.default,u,v,t?v:"max-content",g,t?"":p,o?e(["background-color:",";border-color:",";color:",";cursor:not-allowed;"],null==l?void 0:l.disabled,null==c?void 0:c.disabled,null==s?void 0:s.disabled):e(["&:active{background-color:",";color:",";border-color:",";}&:hover{background-color:",";color:",";border-color:",";}"],null==l?void 0:l.active,null==s?void 0:s.active,null==c?void 0:c.active,null==l?void 0:l.hover,null==s?void 0:s.hover,null==c?void 0:c.hover))})("xs"!==l||"primary"!==s&&"default"===c?"destructive"!==c||"tertiary"!==s&&"subtle"!==s?{disabled:i,size:l,variant:c,variantType:s,iconOnly:b}:{disabled:i,size:l,variant:c,variantType:"primary",iconOnly:b}:{disabled:i,size:"xs",variant:"default",variantType:"secondary",iconOnly:b})),(({$fullWidth:o,$size:i,$noWrap:r})=>e([""," ",""],o&&e(["width:100%;"]),r?"white-space: nowrap;":`\n flex-flow: wrap;\n min-height: ${a[i].height};\n height: unset;\n `)),r());export{c as StyledButton,l as StyledContentContainer,c as default};
1
+ import o,{css as e}from"styled-components";import{space as i}from"styled-system";import r from"../../../style/utils/add-focus-styling.js";import{gradientAnimation as n,propsForSize as a,inverseColourSettings as t,colourSettings as d}from"./button.config.js";const l=o.span.withConfig({displayName:"button.style__StyledContentContainer",componentId:"sc-1660f692-0"})(["display:flex;gap:var(--global-space-comp-s);align-items:center;justify-content:center;"]),c=o.button.withConfig({displayName:"button.style__StyledButton",componentId:"sc-1660f692-1"})([""," align-items:center;box-sizing:border-box;display:inline-flex;justify-content:center;outline-offset:0;text-decoration:none;vertical-align:middle;cursor:pointer;"," "," &:focus{"," position:relative;z-index:1;}"],i,(({$allowMotion:o,disabled:i,$inverse:r,$size:l,$variant:c,$variantType:s,$iconOnly:b})=>r?(({disabled:o,size:i,variantType:r,iconOnly:n})=>{const{background:d,border:l,label:c}=t[r],{borderRadius:s,font:b,height:u,paddingVertical:v,paddingHorizontal:g}=a[i];return e(["background-color:",";border:"," solid ",";border-radius:",";color:",";font:",";height:",";width:",";padding:"," ",";",""],d.default,"tertiary"===r?"1px":"2px",l.default,n?"var(--global-radius-action-circle)":s,c.default,b,u,n?u:"max-content",v,n?"":g,o?e(["background-color:",";border-color:",";color:",";cursor:not-allowed;"],d.disabled,l.disabled,c.disabled):e(["&:active,&.active{background-color:",";color:",";border-color:",";}&:hover{background-color:",";color:",";border-color:",";}"],d.active,c.active,l.active,d.hover,c.hover,l.hover))})({disabled:i,size:l,variantType:s,iconOnly:b}):"gradient"===c?e([""," ",""],n,(({allowMotion:o=!0,disabled:i,size:r,iconOnly:n})=>{const{background:t,border:l,label:c}=d.gradient.secondary||{},{borderRadius:s,font:b,height:u,paddingVertical:v,paddingHorizontal:g}=a[r];return e(["position:relative;z-index:0;border:none;border-radius:",";background:white;color:var(--button-ai-label-default);font:",";height:",";width:",";padding:"," ",';overflow:hidden;&::before{content:"";position:absolute;inset:0;padding:2px;border-radius:inherit;z-index:-1;background:var(--button-ai-border-default);background-position:0% 0;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;}&:hover{background:linear-gradient( 90deg,var(--mode-color-action-ai-hover-stop-1) 0%,var(--mode-color-action-ai-hover-stop-2) 40%,var(--mode-color-action-ai-hover-stop-3) 90% );}&:hover::before{',"}"," ",""],n?"var(--global-radius-action-circle)":s,b,u,n?u:"max-content",v,n?"":g,o&&e(["background-size:300% 100%;animation:gradient-loop 1000ms linear infinite;"]),i&&e(["opacity:0.6;pointer-events:none;cursor:not-allowed;&::before{animation:none;background:none;-webkit-mask:none;mask:none;border:2px solid var(--button-ai-border-disabled);padding:0;}color:var(--button-ai-label-disabled);"]),!i&&e(["&:active,&.active{background:",";color:",";border-color:",";}"],null==t?void 0:t.active,null==c?void 0:c.active,null==l?void 0:l.active))})({allowMotion:o,disabled:i,size:l,iconOnly:b})):(({disabled:o,size:i,variant:r,variantType:n,iconOnly:t})=>{const{background:l,border:c,label:s}=d[r][n]||{},{borderRadius:b,font:u,height:v,paddingVertical:g,paddingHorizontal:p}=a[i];return e(["background-color:",";border:"," solid ",";border-radius:",";color:",";font:",";height:",";width:",";padding:"," ",";",""],null==l?void 0:l.default,"tertiary"===n?"1px":"2px",null==c?void 0:c.default,t?"var(--global-radius-action-circle)":b,null==s?void 0:s.default,u,v,t?v:"max-content",g,t?"":p,o?e(["background-color:",";border-color:",";color:",";cursor:not-allowed;"],null==l?void 0:l.disabled,null==c?void 0:c.disabled,null==s?void 0:s.disabled):e(["&:active,&.active{background-color:",";color:",";border-color:",";}&:hover{background-color:",";color:",";border-color:",";}"],null==l?void 0:l.active,null==s?void 0:s.active,null==c?void 0:c.active,null==l?void 0:l.hover,null==s?void 0:s.hover,null==c?void 0:c.hover))})("xs"!==l||"primary"!==s&&"default"===c?"destructive"!==c||"tertiary"!==s&&"subtle"!==s?{disabled:i,size:l,variant:c,variantType:s,iconOnly:b}:{disabled:i,size:l,variant:c,variantType:"primary",iconOnly:b}:{disabled:i,size:"xs",variant:"default",variantType:"secondary",iconOnly:b})),(({$fullWidth:o,$size:i,$noWrap:r})=>e([""," ",""],o&&e(["width:100%;"]),r?"white-space: nowrap;":`\n flex-flow: wrap;\n min-height: ${a[i].height};\n height: unset;\n `)),r());export{c as StyledButton,l as StyledContentContainer,c as default};
@@ -1 +1 @@
1
- import{jsxs as t,jsx as e}from"react/jsx-runtime";import r,{forwardRef as o,useRef as n,useContext as i,useImperativeHandle as l}from"react";import{offset as a,flip as s}from"@floating-ui/dom";import u from"../../hooks/__internal__/useClickAwayListener/useClickAwayListener.js";import c from"../split-button/__internal__/split-button.context.js";import{StyledMultiActionButton as p,StyledButtonChildrenContainer as d}from"./multi-action-button.style.js";import f from"../button/button.component.js";import m from"../../__internal__/popover/popover.component.js";import"../../style/utils/filter-styled-system-padding-props.js";import b from"../../style/utils/filter-styled-system-margin-props.js";import y from"../../style/utils/filter-out-styled-system-spacing-props.js";import g from"../../hooks/__internal__/useChildButtons/useChildButtons.js";import j from"../../hooks/__internal__/useAdaptiveSidebarModalFocus/useAdaptiveSidebarModalFocus.js";import O from"../flat-table/__internal__/flat-table.context.js";import h from"../../__internal__/utils/helpers/guid/index.js";function _(t,e,r){return e in t?Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):t[e]=r,t}function w(t){for(var e=1;e<arguments.length;e++){var r=null!=arguments[e]?arguments[e]:{},o=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(r).filter((function(t){return Object.getOwnPropertyDescriptor(r,t).enumerable})))),o.forEach((function(e){_(t,e,r[e])}))}return t}function v(t,e){return e=null!=e?e:{},Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(e)):function(t){var e=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e.push.apply(e,r)}return e}(Object(e)).forEach((function(r){Object.defineProperty(t,r,Object.getOwnPropertyDescriptor(e,r))})),t}const P=o(((o,_)=>{var{align:P="left",position:x="left",disabled:k,buttonType:S,size:B,children:C,text:D,subtext:T,width:A,onClick:z,"data-element":E,"data-role":F}=o,I=function(t,e){if(null==t)return{};var r,o,n=function(t,e){if(null==t)return{};var r,o,n={},i=Object.keys(t);for(o=0;o<i.length;o++)r=i[o],e.indexOf(r)>=0||(n[r]=t[r]);return n}(t,e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);for(o=0;o<i.length;o++)r=i[o],e.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(t,r)&&(n[r]=t[r])}return n}(o,["align","position","disabled","buttonType","size","children","text","subtext","width","onClick","data-element","data-role"]);const M=n(null),{isInFlatTable:K}=i(O),L=n(h());l(_,(()=>({focusMainButton(){var t;null===(t=M.current)||void 0===t||t.focus({preventScroll:!0})}})),[]);const{showAdditionalButtons:N,showButtons:U,hideButtons:V,buttonNode:q,handleToggleButtonKeyDown:G,wrapperProps:H,contextValue:J}=g(M),Q=u(V);return j((()=>V())),t(p,v(w({ref:q,"data-component":"multi-action-button","data-element":E,"data-role":F,displayed:N,width:A},b(I)),{children:[e(f,v(w({"aria-expanded":N,"aria-controls":L.current,"data-element":"toggle-button",ref:M,iconPosition:"after",iconType:"dropdown",disabled:k,buttonType:S,size:B,subtext:T,onKeyDown:G,onClick:t=>{null==z||z(t),N?V():U(),Q()}},y(I)),{children:D}),"toggle-button"),e(m,{disableBackgroundUI:K&&N,disablePortal:!0,placement:"left"===x?"bottom-start":"bottom-end",reference:q,popoverStrategy:"fixed",middleware:[a(6),s({fallbackStrategy:"initialPlacement"})],children:e(d,v(w({id:L.current},H),{align:P,hidden:!N,children:e(c.Provider,{value:J,children:r.Children.map(C,(t=>e("li",{children:t})))})}))})]}))}));export{P as MultiActionButton,P as default};
1
+ import{jsxs as t,jsx as e}from"react/jsx-runtime";import r,{forwardRef as o,useRef as n,useContext as i,useImperativeHandle as l,useMemo as s}from"react";import{offset as a,flip as c}from"@floating-ui/dom";import u from"../../hooks/__internal__/useClickAwayListener/useClickAwayListener.js";import p from"../split-button/__internal__/split-button.context.js";import{StyledMultiActionButton as d,StyledButtonChildrenContainer as f}from"./multi-action-button.style.js";import m from"../button/button.component.js";import b from"../../__internal__/popover/popover.component.js";import"../../style/utils/filter-styled-system-padding-props.js";import y from"../../style/utils/filter-styled-system-margin-props.js";import g from"../../style/utils/filter-out-styled-system-spacing-props.js";import j from"../../hooks/__internal__/useChildButtons/useChildButtons.js";import O from"../../hooks/__internal__/useAdaptiveSidebarModalFocus/useAdaptiveSidebarModalFocus.js";import h from"../flat-table/__internal__/flat-table.context.js";import _ from"../../__internal__/utils/helpers/guid/index.js";function w(t,e,r){return e in t?Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):t[e]=r,t}function v(t){for(var e=1;e<arguments.length;e++){var r=null!=arguments[e]?arguments[e]:{},o=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(r).filter((function(t){return Object.getOwnPropertyDescriptor(r,t).enumerable})))),o.forEach((function(e){w(t,e,r[e])}))}return t}function P(t,e){return e=null!=e?e:{},Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(e)):function(t){var e=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e.push.apply(e,r)}return e}(Object(e)).forEach((function(r){Object.defineProperty(t,r,Object.getOwnPropertyDescriptor(e,r))})),t}const x=o(((o,w)=>{var{align:x="left",position:k="left",disabled:S,buttonType:B,size:C,children:D,text:T,subtext:A,width:z,onClick:E,"data-element":F,"data-role":I}=o,M=function(t,e){if(null==t)return{};var r,o,n=function(t,e){if(null==t)return{};var r,o,n={},i=Object.keys(t);for(o=0;o<i.length;o++)r=i[o],e.indexOf(r)>=0||(n[r]=t[r]);return n}(t,e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);for(o=0;o<i.length;o++)r=i[o],e.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(t,r)&&(n[r]=t[r])}return n}(o,["align","position","disabled","buttonType","size","children","text","subtext","width","onClick","data-element","data-role"]);const K=n(null),{isInFlatTable:L}=i(h),N=n(_());l(w,(()=>({focusMainButton(){var t;null===(t=K.current)||void 0===t||t.focus({preventScroll:!0})}})),[]);const{showAdditionalButtons:U,showButtons:V,hideButtons:q,buttonNode:G,handleToggleButtonKeyDown:H,wrapperProps:J,contextValue:Q}=j(K),R=u(q);O((()=>q()));const W=s((()=>[a(6),c({fallbackStrategy:"initialPlacement"})]),[]);return t(d,P(v({ref:G,"data-component":"multi-action-button","data-element":F,"data-role":I,displayed:U,width:z},y(M)),{children:[e(m,P(v({"aria-expanded":U,"aria-controls":N.current,"data-element":"toggle-button",ref:K,iconPosition:"after",iconType:"dropdown",disabled:S,buttonType:B,size:C,subtext:A,onKeyDown:H,onClick:t=>{null==E||E(t),U?q():V(),R()}},g(M)),{children:T}),"toggle-button"),e(b,{isOpen:U,disableBackgroundUI:L&&U,disablePortal:!0,placement:"left"===k?"bottom-start":"bottom-end",reference:G,popoverStrategy:"fixed",middleware:W,children:e(f,P(v({id:N.current},J),{align:x,hidden:!U,children:e(p.Provider,{value:Q,children:r.Children.map(D,(t=>e("li",{children:t})))})}))})]}))}));export{x as MultiActionButton,x as default};
@@ -42,8 +42,9 @@ export interface SelectListProps {
42
42
  listPlacement?: ListPlacement;
43
43
  /** Use the opposite list placement if the set placement does not fit */
44
44
  flipEnabled?: boolean;
45
- /** @private @ignore
46
- * Hides the list (with CSS display: none) if not set
45
+ /**
46
+ * @private @ignore
47
+ * Flag to determine if the list is open.
47
48
  */
48
49
  isOpen?: boolean;
49
50
  /** array of selected values, if rendered as part of a MultiSelect */
@@ -1 +1 @@
1
- import{jsxs as e,jsx as t}from"react/jsx-runtime";import l,{useState as n,useRef as r,useEffect as o,useMemo as i,useCallback as s,useLayoutEffect as a}from"react";import{offset as c,size as u,flip as d}from"@floating-ui/dom";import{useVirtualizer as p,defaultRangeExtractor as m}from"@tanstack/react-virtual";import f from"lodash/findLastIndex";import v from"lodash/debounce";import b from"../../../../hooks/__internal__/useScrollBlock/useScrollBlock.js";import y from"../../../../hooks/__internal__/useModalManager/useModalManager.js";import{StyledSelectListTable as h,StyledSelectListTableHeader as g,StyledSelectListTableBody as O,StyledSelectListContainer as x,StyledScrollableContainer as j,StyledSelectList as w,StyledSelectLoaderContainer as E}from"./select-list.style.js";import S from"../../../../__internal__/popover/popover.component.js";import k from"../../option-row/option-row.component.js";import P from"../utils/get-next-child-by-text.js";import L from"../utils/get-next-index-by-key.js";import T from"../utils/is-navigation-key.js";import C from"../list-action-button/list-action-button.component.js";import{Loader as V}from"../../../loader/loader.component.js";import I from"../../option/option.component.js";import _ from"./select-list.context.js";function B(e,t,l){return t in e?Object.defineProperty(e,t,{value:l,enumerable:!0,configurable:!0,writable:!0}):e[t]=l,e}function A(e){for(var t=1;t<arguments.length;t++){var l=null!=arguments[t]?arguments[t]:{},n=Object.keys(l);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(l).filter((function(e){return Object.getOwnPropertyDescriptor(l,e).enumerable})))),n.forEach((function(t){B(e,t,l[t])}))}return e}function H(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);t.push.apply(t,l)}return t}(Object(t)).forEach((function(l){Object.defineProperty(e,l,Object.getOwnPropertyDescriptor(t,l))})),e}const M={behavior:"auto",align:"end"},D=l.forwardRef(((B,D)=>{var{listMaxHeight:W=180,listActionButton:z,id:K,labelId:R,children:$,onSelect:F,onSelectListClose:N,filterText:U,anchorElement:Y,highlightedValue:q,onListAction:G,isLoading:J,onListScrollBottom:Q,multiColumn:X,tableHeader:Z,listPlacement:ee="bottom",flipEnabled:te=!0,isOpen:le,multiselectValues:ne,enableVirtualScroll:re,virtualScrollOverscan:oe=5,listWidth:ie}=B,se=function(e,t){if(null==e)return{};var l,n,r=function(e,t){if(null==e)return{};var l,n,r={},o=Object.keys(e);for(n=0;n<o.length;n++)l=o[n],t.indexOf(l)>=0||(r[l]=e[l]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)l=o[n],t.indexOf(l)>=0||Object.prototype.propertyIsEnumerable.call(e,l)&&(r[l]=e[l])}return r}(B,["listMaxHeight","listActionButton","id","labelId","children","onSelect","onSelectListClose","filterText","anchorElement","highlightedValue","onListAction","isLoading","onListScrollBottom","multiColumn","tableHeader","listPlacement","flipEnabled","isOpen","multiselectValues","enableVirtualScroll","virtualScrollOverscan","listWidth"]);const[ae,ce]=n(-1),[ue,de]=n(0),pe=r(""),me=r(null),fe=r(null),ve=r(null),be=r(null),{blockScroll:ye,allowScroll:he}=b(),ge=r(0),Oe=re?oe:l.Children.count($),xe=p({count:l.Children.toArray($).filter((e=>Boolean(e))).length,getScrollElement:()=>le?D.current:null,estimateSize:()=>40,overscan:Oe,paddingStart:X?48:0,scrollPaddingEnd:ge.current,rangeExtractor:e=>{const t=m(e);return-1===ae||t.includes(ae)||t.push(ae),t}});o((()=>{if(!le)return;const e=ae>-1?ae:0;xe.scrollToIndex(e,M)}),[ae,le,xe]);const je=xe.getVirtualItems(),we=i((()=>l.Children.toArray($)),[$]),Ee=s((e=>we.findIndex((t=>{return t.props.value&&"object"==typeof e?(n=t.props.value,r=e,Object.keys(n).every((e=>n[e]===r[e]))):l.isValidElement(t)&&t.props.value===e;var n,r}))),[we]);if(0===je.length){const e=q?Ee(q):ae;e>-1&&je.push({index:e})}const Se=xe.getTotalSize(),ke=0===Se?1:Se;o((()=>(le&&ye(),()=>{le&&he()})),[he,ye,le]),a((()=>{X&&de(fe.current?fe.current.offsetWidth-fe.current.clientWidth:0)}),[X]);const Pe=i((()=>({current:Y||null})),[Y]),Le=s((e=>{var t,l,n;F({id:null!==(t=e.id)&&void 0!==t?t:"",text:null!==(l=e.text)&&void 0!==l?l:"",value:null!==(n=e.value)&&void 0!==n?n:"",selectionType:"click",selectionConfirmed:!0})}),[F]),Te=r(Array.from({length:l.Children.count($)})),Ce=i((()=>we.filter((e=>l.isValidElement(e)&&(e.type===I||e.type===k)))),[we]),{measureElement:Ve}=xe,Ie=je.filter((e=>void 0!==e)).map((({index:e,start:t})=>{const n=we[e],r=Ce.indexOf(n),o=r>-1,i={index:e,onSelect:Le,hidden:J&&1===we.length,style:{transform:`translateY(${t}px)`},"aria-setsize":o?Ce.length:void 0,"aria-posinset":o?r+1:void 0,ref:t=>{le&&Ve(t),Te.current[e]=t},"data-index":e};return void 0!==n?l.cloneElement(n,i):null})).filter((e=>null!==e)),_e=f(we,(e=>l.isValidElement(e)&&(e.type===I||e.type===k))),Be=s(((e,t)=>{if(-1===_e)return-1;let n=L(e,t,_e,J);const r=we[n];return(l.isValidElement(r)&&r.type!==I&&r.type!==k||r.props.disabled)&&(n=Be(e,n)),n}),[we,_e,J]),Ae=s((e=>{var t;let l=ae;q&&(l=Ee(q));const n=Be(e,l);if(-1===n||l===n)return;const{text:r,value:o}=we[n].props;F({id:null===(t=Te.current[n])||void 0===t?void 0:t.id,text:null!=r?r:"",value:null!=o?o:"",selectionType:"navigationKey",selectionConfirmed:!1})}),[we,ae,Ee,Be,q,F]),He=s(((e,t)=>{var l;t?N():(e.preventDefault(),null===(l=be.current)||void 0===l||l.focus())}),[N]),Me=s((()=>{Y&&Y.getElementsByTagName("input")[0].focus()}),[Y]),De=s((e=>{if(!le)return;const{key:t}=e,n=document.activeElement===be.current;if("Tab"===t&&z)He(e,n);else if("Tab"===t)N();else if("Enter"!==t||n)T(t)&&(Me(),Ae(t));else{var r;e.preventDefault();const t=we[ae];if(!l.isValidElement(t))return N(),void F({id:"",text:"",value:"",selectionType:"enterKey",selectionConfirmed:!1});if(t.props.disabled)return;const{text:n,value:o}=t.props;F({id:null===(r=Te.current[ae])||void 0===r?void 0:r.id,text:null!=n?n:"",value:null!=o?o:"",selectionType:"enterKey",selectionConfirmed:!0})}}),[we,z,He,N,ae,F,Ae,Me,le]),We=s((e=>{"Escape"===e.key&&N()}),[N]);y({open:!!le,closeModal:We,modalRef:me,triggerRefocusOnClose:!1}),o((()=>{const e=D.current,t=v((e=>{const t=e.target;le&&t.scrollHeight-t.scrollTop===t.clientHeight&&(null==Q||Q())}),300);return null==e||e.addEventListener("scroll",t),()=>{null==e||e.removeEventListener("scroll",t)}}),[le,D,Q]),o((()=>(window.addEventListener("keydown",De),function(){window.removeEventListener("keydown",De)})),[De,D]),o((()=>{U&&U!==pe.current?(pe.current=U,ce((e=>{const t=P(U,we,e);if(!t)return-1;const l=Ee(t.props.value);return xe.scrollToIndex(l,M),l}))):pe.current=U||""}),[we,U,Ee,xe]),o((()=>{if(!(q&&0!==Object.keys(q).length||le))return void ce(-1);const e=Ee(q);-1!==e&&ce(e)}),[Ee,q,le]),o((()=>{J&&ae===_e&&_e>-1&&xe.scrollToIndex(_e,H(A({},M),{align:"start"}))}),[$,ae,J,_e,D,xe]);const ze=i((()=>[c(3),u({apply({rects:e,elements:t}){Object.assign(t.floating.style,{width:`${null!=ie?ie:e.reference.width}px`})}}),...te?[d({fallbackStrategy:"initialPlacement"})]:[]]),[ie,te]),Ke=J?t(E,{children:t(V,{"data-role":"select-list-loader"})},"loader"):void 0;let Re=Ie;const $e={role:"listbox",id:K,"aria-labelledby":R,"aria-multiselectable":!!ne||void 0};return a((()=>{var e,t;z&&le&&(ge.current=(null===(t=be.current)||void 0===t||null===(e=t.parentElement)||void 0===e?void 0:e.offsetHeight)||0)}),[z,le]),X&&(Re=e(h,{children:[t(g,{scrollbarWidth:ue,children:Z}),t(O,H(A({},$e),{"aria-labelledby":R,ref:fe,listHeight:ke-48,children:Ie}))]})),t(_.Provider,{value:{currentOptionsListIndex:ae,multiselectValues:ne},children:t(S,{placement:ee,disablePortal:!0,reference:Pe,middleware:ze,isOpen:le,disableBackgroundUI:!0,animationFrame:!0,children:e(x,H(A({ref:ve,"data-element":"select-list-wrapper","data-role":"select-list-wrapper",isLoading:J},se),{children:[e(j,{ref:D,maxHeight:W,"data-component":"select-list-scrollable-container","data-element":"select-list-scrollable-container","data-role":"select-list-scrollable-container",hasActionButton:!!z,children:[t(w,H(A({as:X?"div":"ul","data-element":"select-list"},X?{}:$e),{ref:me,tabIndex:-1,listHeight:X?void 0:ke,children:Re})),Ke]}),z&&t(C,{ref:be,listActionButton:z,onListAction:G})]}))})})}));export{D as default};
1
+ import{jsxs as e,jsx as t}from"react/jsx-runtime";import l,{useState as n,useRef as r,useEffect as o,useMemo as i,useCallback as s,useLayoutEffect as a}from"react";import{offset as c,size as u,flip as d}from"@floating-ui/dom";import{useVirtualizer as p,defaultRangeExtractor as m}from"@tanstack/react-virtual";import f from"lodash/findLastIndex";import v from"lodash/debounce";import b from"../../../../hooks/__internal__/useScrollBlock/useScrollBlock.js";import h from"../../../../hooks/__internal__/useModalManager/useModalManager.js";import{StyledSelectListTable as y,StyledSelectListTableHeader as g,StyledSelectListTableBody as O,StyledSelectListContainer as x,StyledScrollableContainer as j,StyledSelectList as w,StyledSelectLoaderContainer as E}from"./select-list.style.js";import S from"../../../../__internal__/popover/popover.component.js";import k from"../../option-row/option-row.component.js";import P from"../utils/get-next-child-by-text.js";import L from"../utils/get-next-index-by-key.js";import T from"../utils/is-navigation-key.js";import C from"../list-action-button/list-action-button.component.js";import{Loader as V}from"../../../loader/loader.component.js";import I from"../../option/option.component.js";import _ from"./select-list.context.js";function B(e,t,l){return t in e?Object.defineProperty(e,t,{value:l,enumerable:!0,configurable:!0,writable:!0}):e[t]=l,e}function A(e){for(var t=1;t<arguments.length;t++){var l=null!=arguments[t]?arguments[t]:{},n=Object.keys(l);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(l).filter((function(e){return Object.getOwnPropertyDescriptor(l,e).enumerable})))),n.forEach((function(t){B(e,t,l[t])}))}return e}function H(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);t.push.apply(t,l)}return t}(Object(t)).forEach((function(l){Object.defineProperty(e,l,Object.getOwnPropertyDescriptor(t,l))})),e}const M={behavior:"auto",align:"end"},D=l.forwardRef(((B,D)=>{var{listMaxHeight:W=180,listActionButton:z,id:K,labelId:R,children:$,onSelect:F,onSelectListClose:N,filterText:U,anchorElement:Y,highlightedValue:q,onListAction:G,isLoading:J,onListScrollBottom:Q,multiColumn:X,tableHeader:Z,listPlacement:ee="bottom",flipEnabled:te=!0,isOpen:le,multiselectValues:ne,enableVirtualScroll:re,virtualScrollOverscan:oe=5,listWidth:ie}=B,se=function(e,t){if(null==e)return{};var l,n,r=function(e,t){if(null==e)return{};var l,n,r={},o=Object.keys(e);for(n=0;n<o.length;n++)l=o[n],t.indexOf(l)>=0||(r[l]=e[l]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)l=o[n],t.indexOf(l)>=0||Object.prototype.propertyIsEnumerable.call(e,l)&&(r[l]=e[l])}return r}(B,["listMaxHeight","listActionButton","id","labelId","children","onSelect","onSelectListClose","filterText","anchorElement","highlightedValue","onListAction","isLoading","onListScrollBottom","multiColumn","tableHeader","listPlacement","flipEnabled","isOpen","multiselectValues","enableVirtualScroll","virtualScrollOverscan","listWidth"]);const[ae,ce]=n(-1),[ue,de]=n(0),pe=r(""),me=r(null),fe=r(null),ve=r(null),be=r(null),{blockScroll:he,allowScroll:ye}=b(),ge=r(0),Oe=re?oe:l.Children.count($),xe=p({count:l.Children.toArray($).filter((e=>Boolean(e))).length,getScrollElement:()=>le?D.current:null,estimateSize:()=>40,overscan:Oe,paddingStart:X?48:0,scrollPaddingEnd:ge.current,rangeExtractor:e=>{const t=m(e);return-1===ae||t.includes(ae)||t.push(ae),t}});o((()=>{if(!le)return;const e=ae>-1?ae:0;xe.scrollToIndex(e,M)}),[ae,le,xe]);const je=xe.getVirtualItems(),we=i((()=>l.Children.toArray($)),[$]),Ee=s((e=>we.findIndex((t=>{return t.props.value&&"object"==typeof e?(n=t.props.value,r=e,Object.keys(n).every((e=>n[e]===r[e]))):l.isValidElement(t)&&t.props.value===e;var n,r}))),[we]);if(0===je.length){const e=q?Ee(q):ae;e>-1&&je.push({index:e})}const Se=xe.getTotalSize(),ke=0===Se?1:Se;o((()=>(le&&he(),()=>{le&&ye()})),[ye,he,le]),a((()=>{X&&de(fe.current?fe.current.offsetWidth-fe.current.clientWidth:0)}),[X]);const Pe=i((()=>({current:Y||null})),[Y]),Le=s((e=>{var t,l,n;F({id:null!==(t=e.id)&&void 0!==t?t:"",text:null!==(l=e.text)&&void 0!==l?l:"",value:null!==(n=e.value)&&void 0!==n?n:"",selectionType:"click",selectionConfirmed:!0})}),[F]),Te=r(Array.from({length:l.Children.count($)})),Ce=i((()=>we.filter((e=>l.isValidElement(e)&&(e.type===I||e.type===k)))),[we]),{measureElement:Ve}=xe,Ie=je.filter((e=>void 0!==e)).map((({index:e,start:t})=>{const n=we[e],r=Ce.indexOf(n),o=r>-1,i={index:e,onSelect:Le,hidden:J&&1===we.length,style:{transform:`translateY(${t}px)`},"aria-setsize":o?Ce.length:void 0,"aria-posinset":o?r+1:void 0,ref:t=>{le&&Ve(t),Te.current[e]=t},"data-index":e};return void 0!==n?l.cloneElement(n,i):null})).filter((e=>null!==e)),_e=f(we,(e=>l.isValidElement(e)&&(e.type===I||e.type===k))),Be=s(((e,t)=>{if(-1===_e)return-1;let n=L(e,t,_e,J);const r=we[n];return(l.isValidElement(r)&&r.type!==I&&r.type!==k||r.props.disabled)&&(n=Be(e,n)),n}),[we,_e,J]),Ae=s((e=>{var t;let l=ae;q&&(l=Ee(q));const n=Be(e,l);if(-1===n||l===n)return;const{text:r,value:o}=we[n].props;F({id:null===(t=Te.current[n])||void 0===t?void 0:t.id,text:null!=r?r:"",value:null!=o?o:"",selectionType:"navigationKey",selectionConfirmed:!1})}),[we,ae,Ee,Be,q,F]),He=s(((e,t)=>{var l;t?N():(e.preventDefault(),null===(l=be.current)||void 0===l||l.focus())}),[N]),Me=s((()=>{Y&&Y.getElementsByTagName("input")[0].focus()}),[Y]),De=s((e=>{if(!le)return;const{key:t}=e,n=document.activeElement===be.current;if("Tab"===t&&z)He(e,n);else if("Tab"===t)N();else if("Enter"!==t||n)T(t)&&(Me(),Ae(t));else{var r;e.preventDefault();const t=we[ae];if(!l.isValidElement(t))return N(),void F({id:"",text:"",value:"",selectionType:"enterKey",selectionConfirmed:!1});if(t.props.disabled)return;const{text:n,value:o}=t.props;F({id:null===(r=Te.current[ae])||void 0===r?void 0:r.id,text:null!=n?n:"",value:null!=o?o:"",selectionType:"enterKey",selectionConfirmed:!0})}}),[we,z,He,N,ae,F,Ae,Me,le]),We=s((e=>{"Escape"===e.key&&N()}),[N]);h({open:!!le,closeModal:We,modalRef:me,triggerRefocusOnClose:!1}),o((()=>{const e=D.current,t=v((e=>{const t=e.target;le&&t.scrollHeight-t.scrollTop===t.clientHeight&&(null==Q||Q())}),300);return null==e||e.addEventListener("scroll",t),()=>{null==e||e.removeEventListener("scroll",t)}}),[le,D,Q]),o((()=>(window.addEventListener("keydown",De),function(){window.removeEventListener("keydown",De)})),[De,D]),o((()=>{U&&U!==pe.current?(pe.current=U,ce((e=>{const t=P(U,we,e);if(!t)return-1;const l=Ee(t.props.value);return xe.scrollToIndex(l,M),l}))):pe.current=U||""}),[we,U,Ee,xe]),o((()=>{if(!(q&&0!==Object.keys(q).length||le))return void ce(-1);const e=Ee(q);-1!==e&&ce(e)}),[Ee,q,le]),o((()=>{J&&ae===_e&&_e>-1&&xe.scrollToIndex(_e,H(A({},M),{align:"start"}))}),[$,ae,J,_e,D,xe]);const ze=i((()=>[c(3),u({apply({rects:e,elements:t}){Object.assign(t.floating.style,{width:`${null!=ie?ie:e.reference.width}px`})}}),...te?[d({fallbackStrategy:"initialPlacement"})]:[]]),[ie,te]),Ke=J?t(E,{children:t(V,{"data-role":"select-list-loader"})},"loader"):void 0;let Re=Ie;const $e={role:"listbox",id:K,"aria-labelledby":R,"aria-multiselectable":!!ne||void 0};return a((()=>{var e,t;z&&le&&(ge.current=(null===(t=be.current)||void 0===t||null===(e=t.parentElement)||void 0===e?void 0:e.offsetHeight)||0)}),[z,le]),X&&(Re=e(y,{children:[t(g,{scrollbarWidth:ue,children:Z}),t(O,H(A({},$e),{"aria-labelledby":R,ref:fe,listHeight:ke-48,children:Ie}))]})),t(_.Provider,{value:{currentOptionsListIndex:ae,multiselectValues:ne},children:t(S,{placement:ee,disablePortal:!0,reference:Pe,middleware:ze,isOpen:le,hide:!le,disableBackgroundUI:!0,animationFrame:!0,children:e(x,H(A({ref:ve,"data-element":"select-list-wrapper","data-role":"select-list-wrapper",isLoading:J},se),{children:[e(j,{ref:D,maxHeight:W,"data-component":"select-list-scrollable-container","data-element":"select-list-scrollable-container","data-role":"select-list-scrollable-container",hasActionButton:!!z,children:[t(w,H(A({as:X?"div":"ul","data-element":"select-list"},X?{}:$e),{ref:me,tabIndex:-1,listHeight:X?void 0:ke,children:Re})),Ke]}),z&&t(C,{ref:be,listActionButton:z,onListAction:G})]}))})})}));export{D as default};
@@ -1 +1 @@
1
- import{jsxs as t,Fragment as e,jsx as o}from"react/jsx-runtime";import r,{forwardRef as n,useContext as i,useRef as l,useImperativeHandle as s,useEffect as a}from"react";import{ThemeContext as c}from"styled-components";import{offset as p,flip as u}from"@floating-ui/dom";import d from"../../hooks/__internal__/useClickAwayListener/useClickAwayListener.js";import m from"../icon/icon.component.js";import b from"../button/button.component.js";import f from"./split-button.style.js";import y from"./split-button-toggle.style.js";import g from"./split-button-children.style.js";import h from"../../__internal__/utils/helpers/guid/index.js";import j from"../../__internal__/popover/popover.component.js";import"../../style/utils/filter-styled-system-padding-props.js";import _ from"../../style/utils/filter-styled-system-margin-props.js";import O from"../../style/utils/filter-out-styled-system-spacing-props.js";import"../../style/themes/sage/index.js";import v from"../../style/themes/base/index.js";import"../../style/themes/none/index.js";import w from"../../hooks/__internal__/useChildButtons/useChildButtons.js";import P from"../../hooks/__internal__/useAdaptiveSidebarModalFocus/useAdaptiveSidebarModalFocus.js";import k from"./__internal__/split-button.context.js";import x from"../../hooks/__internal__/useLocale/useLocale.js";import T from"../flat-table/__internal__/flat-table.context.js";function B(t,e,o){return e in t?Object.defineProperty(t,e,{value:o,enumerable:!0,configurable:!0,writable:!0}):t[e]=o,t}function C(t){for(var e=1;e<arguments.length;e++){var o=null!=arguments[e]?arguments[e]:{},r=Object.keys(o);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(o).filter((function(t){return Object.getOwnPropertyDescriptor(o,t).enumerable})))),r.forEach((function(e){B(t,e,o[e])}))}return t}function S(t,e){return e=null!=e?e:{},Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(e)):function(t){var e=Object.keys(t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(t);e.push.apply(e,o)}return e}(Object(e)).forEach((function(o){Object.defineProperty(t,o,Object.getOwnPropertyDescriptor(e,o))})),t}const L=n(((n,B)=>{var{align:L="left",position:D="right",buttonType:E="secondary",children:A,disabled:z=!1,iconPosition:M="before",iconType:W,onClick:F,size:I="medium",subtext:K,text:H,"data-element":N,"data-role":U,"aria-label":V,isWhite:q=!1}=n,G=function(t,e){if(null==t)return{};var o,r,n=function(t,e){if(null==t)return{};var o,r,n={},i=Object.keys(t);for(r=0;r<i.length;r++)o=i[r],e.indexOf(o)>=0||(n[o]=t[o]);return n}(t,e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);for(r=0;r<i.length;r++)o=i[r],e.indexOf(o)>=0||Object.prototype.propertyIsEnumerable.call(t,o)&&(n[o]=t[o])}return n}(n,["align","position","buttonType","children","disabled","iconPosition","iconType","onClick","size","subtext","text","data-element","data-role","aria-label","isWhite"]);const J=x(),Q=i(c)||v,R=l(h()),X=l(h()),Y=l(null),Z=l(null),{isInFlatTable:$}=i(T),tt="secondary"===E&&q;s(B,(()=>({focusMainButton(){var t;null===(t=Y.current)||void 0===t||t.focus()},focusToggleButton(){var t;null===(t=Z.current)||void 0===t||t.focus()}})),[]);const{showAdditionalButtons:et,showButtons:ot,hideButtons:rt,buttonNode:nt,handleToggleButtonKeyDown:it,wrapperProps:lt,contextValue:st}=w(Z,.75);a((()=>{if(!$)return;const t=t=>{t.target instanceof HTMLElement&&"popup-backdrop"===t.target.dataset.role&&et&&rt()};return document.addEventListener("click",t),()=>{document.removeEventListener("click",t)}}),[rt,$,et]);return P((()=>rt())),t(f,S(C({"data-component":"split-button","data-element":N,"data-role":U,onClick:d(rt),ref:nt},_(G)),{children:[t(e,{children:[o(b,S(C({"data-element":"main-button",id:R.current,ref:Y,isWhite:tt,subtext:K,size:I,iconType:W,disabled:z,buttonType:E,iconPosition:M,onClick:t=>{null==F||F(t),et&&rt()}},O(G)),{children:H}),"main-button"),o(y,{"aria-expanded":et,"aria-controls":X.current,"aria-label":V||J.splitButton.ariaLabel(),"data-element":"toggle-button",type:"button",ref:Z,isWhite:tt,disabled:z,displayed:et,buttonType:E,size:I,onKeyDown:it,onClick:()=>{et?rt():ot()},children:o(m,{type:"dropdown",color:{primary:Q.colors.white,secondary:Q.colors.primary}[E],bg:"transparent",disabled:z})},"toggle-button")]}),o(j,{disableBackgroundUI:$&&et,disablePortal:!0,placement:"left"===D?"bottom-start":"bottom-end",popoverStrategy:"fixed",reference:nt,middleware:[p(6),u({fallbackStrategy:"initialPlacement"})],children:o(g,S(C({"data-role":"split-button-children-container",id:X.current},lt),{align:L,hidden:!et,children:o(k.Provider,{value:st,children:r.Children.map(A,(t=>o("li",{children:t})))})}))})]}))}));export{L as SplitButton,L as default};
1
+ import{jsxs as t,Fragment as e,jsx as o}from"react/jsx-runtime";import r,{forwardRef as n,useContext as i,useRef as l,useImperativeHandle as s,useEffect as a,useMemo as c}from"react";import{ThemeContext as p}from"styled-components";import{offset as u,flip as d}from"@floating-ui/dom";import m from"../../hooks/__internal__/useClickAwayListener/useClickAwayListener.js";import b from"../icon/icon.component.js";import f from"../button/button.component.js";import y from"./split-button.style.js";import g from"./split-button-toggle.style.js";import h from"./split-button-children.style.js";import j from"../../__internal__/utils/helpers/guid/index.js";import _ from"../../__internal__/popover/popover.component.js";import"../../style/utils/filter-styled-system-padding-props.js";import O from"../../style/utils/filter-styled-system-margin-props.js";import v from"../../style/utils/filter-out-styled-system-spacing-props.js";import"../../style/themes/sage/index.js";import w from"../../style/themes/base/index.js";import"../../style/themes/none/index.js";import P from"../../hooks/__internal__/useChildButtons/useChildButtons.js";import k from"../../hooks/__internal__/useAdaptiveSidebarModalFocus/useAdaptiveSidebarModalFocus.js";import x from"./__internal__/split-button.context.js";import T from"../../hooks/__internal__/useLocale/useLocale.js";import B from"../flat-table/__internal__/flat-table.context.js";function C(t,e,o){return e in t?Object.defineProperty(t,e,{value:o,enumerable:!0,configurable:!0,writable:!0}):t[e]=o,t}function S(t){for(var e=1;e<arguments.length;e++){var o=null!=arguments[e]?arguments[e]:{},r=Object.keys(o);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(o).filter((function(t){return Object.getOwnPropertyDescriptor(o,t).enumerable})))),r.forEach((function(e){C(t,e,o[e])}))}return t}function L(t,e){return e=null!=e?e:{},Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(e)):function(t){var e=Object.keys(t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(t);e.push.apply(e,o)}return e}(Object(e)).forEach((function(o){Object.defineProperty(t,o,Object.getOwnPropertyDescriptor(e,o))})),t}const D=n(((n,C)=>{var{align:D="left",position:E="right",buttonType:A="secondary",children:z,disabled:M=!1,iconPosition:W="before",iconType:F,onClick:I,size:K="medium",subtext:H,text:N,"data-element":U,"data-role":V,"aria-label":q,isWhite:G=!1}=n,J=function(t,e){if(null==t)return{};var o,r,n=function(t,e){if(null==t)return{};var o,r,n={},i=Object.keys(t);for(r=0;r<i.length;r++)o=i[r],e.indexOf(o)>=0||(n[o]=t[o]);return n}(t,e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);for(r=0;r<i.length;r++)o=i[r],e.indexOf(o)>=0||Object.prototype.propertyIsEnumerable.call(t,o)&&(n[o]=t[o])}return n}(n,["align","position","buttonType","children","disabled","iconPosition","iconType","onClick","size","subtext","text","data-element","data-role","aria-label","isWhite"]);const Q=T(),R=i(p)||w,X=l(j()),Y=l(j()),Z=l(null),$=l(null),{isInFlatTable:tt}=i(B),et="secondary"===A&&G;s(C,(()=>({focusMainButton(){var t;null===(t=Z.current)||void 0===t||t.focus()},focusToggleButton(){var t;null===(t=$.current)||void 0===t||t.focus()}})),[]);const{showAdditionalButtons:ot,showButtons:rt,hideButtons:nt,buttonNode:it,handleToggleButtonKeyDown:lt,wrapperProps:st,contextValue:at}=P($,.75);a((()=>{if(!tt)return;const t=t=>{t.target instanceof HTMLElement&&"popup-backdrop"===t.target.dataset.role&&ot&&nt()};return document.addEventListener("click",t),()=>{document.removeEventListener("click",t)}}),[nt,tt,ot]);k((()=>nt()));const ct=c((()=>[u(6),d({fallbackStrategy:"initialPlacement"})]),[]);return t(y,L(S({"data-component":"split-button","data-element":U,"data-role":V,onClick:m(nt),ref:it},O(J)),{children:[t(e,{children:[o(f,L(S({"data-element":"main-button",id:X.current,ref:Z,isWhite:et,subtext:H,size:K,iconType:F,disabled:M,buttonType:A,iconPosition:W,onClick:t=>{null==I||I(t),ot&&nt()}},v(J)),{children:N}),"main-button"),o(g,{"aria-expanded":ot,"aria-controls":Y.current,"aria-label":q||Q.splitButton.ariaLabel(),"data-element":"toggle-button",type:"button",ref:$,isWhite:et,disabled:M,displayed:ot,buttonType:A,size:K,onKeyDown:lt,onClick:()=>{ot?nt():rt()},children:o(b,{type:"dropdown",color:{primary:R.colors.white,secondary:R.colors.primary}[A],bg:"transparent",disabled:M})},"toggle-button")]}),o(_,{isOpen:ot,disableBackgroundUI:tt&&ot,disablePortal:!0,placement:"left"===E?"bottom-start":"bottom-end",popoverStrategy:"fixed",reference:it,middleware:ct,children:o(h,L(S({"data-role":"split-button-children-container",id:Y.current},st),{align:D,hidden:!ot,children:o(x.Provider,{value:at,children:r.Children.map(z,(t=>o("li",{children:t})))})}))})]}))}));export{D as SplitButton,D as default};
@@ -1 +1 @@
1
- import{jsx as e}from"react/jsx-runtime";import{useState as r,useRef as t}from"react";import{StyledContentContainer as o,StyledContent as n}from"./accordion.style.js";import c from"../../../../hooks/__internal__/useResizeObserver/useResizeObserver.js";const i=({children:i,expanded:l,contentId:a,controlId:d})=>{const[s,m]=r(0),u=t(null);return c(u,(()=>{u.current&&m(u.current.scrollHeight)})),e(o,{isExpanded:l,maxHeight:s,"data-role":"tile-select-accordion-content-container",children:e(n,{role:"region","data-element":"tile-select-accordion-content","data-role":"tile-select-accordion-content",ref:u,id:a,"aria-labelledby":d,children:i})})};export{i as default};
1
+ import{jsx as e}from"react/jsx-runtime";import{useState as r,useRef as o}from"react";import{StyledContentContainer as t,StyledContent as n}from"./accordion.style.js";import c from"../../../../hooks/__internal__/useResizeObserver/useResizeObserver.js";import i from"../../../../hooks/useMediaQuery/useMediaQuery.js";const l=({children:l,expanded:a,contentId:s,controlId:d})=>{const[m,u]=r(0),p=o(null),f=i("screen and (prefers-reduced-motion: no-preference)");return c(p,(()=>{p.current&&u(p.current.scrollHeight)})),e(t,{$isExpanded:a,$height:m,$allowMotion:f,"data-role":"tile-select-accordion-content-container",children:e(n,{role:"region","data-element":"tile-select-accordion-content","data-role":"tile-select-accordion-content",ref:p,id:s,"aria-labelledby":d,children:l})})};export{l as default};
@@ -1,3 +1,3 @@
1
- declare const StyledContentContainer: import("styled-components").StyledComponent<"div", any, import("../../../accordion/accordion.style").StyledAccordionContentContainerProps, never>;
2
- declare const StyledContent: import("styled-components").StyledComponent<"div", any, import("../../../accordion/accordion.style").StyledAccordionContentProps, never>;
1
+ declare const StyledContentContainer: import("styled-components").StyledComponent<"div", any, import("../../../accordion/accordion.style").StyledAccordionProps, never>;
2
+ declare const StyledContent: import("styled-components").StyledComponent<"div", any, import("../../../accordion/accordion.style").StyledAccordionProps, never>;
3
3
  export { StyledContentContainer, StyledContent };
@@ -1 +1 @@
1
- import o from"styled-components";import{StyledAccordionContentContainer as n,StyledAccordionContent as t}from"../../../accordion/accordion.style.js";const c=o(n).withConfig({displayName:"accordion.style__StyledContentContainer",componentId:"sc-fa18ab9c-0"})(["background-color:var(--colorsActionMinor050);"]),i=o(t).withConfig({displayName:"accordion.style__StyledContent",componentId:"sc-fa18ab9c-1"})(["padding:24px;position:relative;z-index:200;"]);export{i as StyledContent,c as StyledContentContainer};
1
+ import o from"styled-components";import{StyledAccordionContentContainer as n,StyledAccordionContent as t}from"../../../accordion/accordion.style.js";const i=o(n).withConfig({displayName:"accordion.style__StyledContentContainer",componentId:"sc-80dffb5e-0"})(["background-color:var(--colorsActionMinor050);opacity:1;"]),e=o(t).withConfig({displayName:"accordion.style__StyledContent",componentId:"sc-80dffb5e-1"})(["padding:24px;position:relative;z-index:200;"]);export{e as StyledContent,i as StyledContentContainer};
@@ -27,9 +27,13 @@ export interface PopoverProps {
27
27
  */
28
28
  reference: RefObject<HTMLElement>;
29
29
  /**
30
- * Determines if the popover is currently open/visible or not. Defaults to true.
30
+ * Whether the Popover is open, determines if autoUpdate runs in useFloating.
31
31
  */
32
32
  isOpen?: boolean;
33
+ /**
34
+ * Applies display: none to the content wrapper.
35
+ */
36
+ hide?: boolean;
33
37
  /**
34
38
  * Whether to update the position of the floating element on every animation frame if required. This is optimized for performance but can still be costly. Use with caution!
35
39
  * [https://floating-ui.com/docs/autoUpdate#animationframe](https://floating-ui.com/docs/autoUpdate#animationframe)
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("react-dom"),n=require("@floating-ui/dom"),o=require("../../hooks/__internal__/useFloating/useFloating.js"),l=require("./popover.style.js"),a=require("../../style/design-tokens/carbon-scoped-tokens-provider/carbon-scoped-tokens-provider.component.js"),i=require("../modal/modal.context.js"),s=require("../../hooks/__internal__/useIsBrowser/index.js");function u(e){return e&&e.__esModule?e:{default:e}}var c=u(r);function d(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function f(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){d(e,r,t[r])}))}return e}const p=[n.flip({fallbackStrategy:"initialPlacement"})],b=({children:t,placement:n,reference:a,middleware:i=p,disableBackgroundUI:s,isOpen:u=!0,animationFrame:d,popoverStrategy:f="absolute",childRefOverride:b})=>{const m=b||c.default.Children.only(t).ref,y=r.useRef(null),j=m||y;let O;return O=m?t:c.default.cloneElement(t,{ref:j}),o.default({isOpen:u,reference:a,floating:j,placement:n,middleware:i,animationFrame:d,strategy:f}),e.jsx(l.StyledPopoverContent,{isOpen:u,children:s?e.jsx(l.StyledBackdrop,{"data-role":"popup-backdrop",children:O}):O})};exports.default=n=>{var o,{disablePortal:l}=n,u=function(e,r){if(null==e)return{};var t,n,o=function(e,r){if(null==e)return{};var t,n,o={},l=Object.keys(e);for(n=0;n<l.length;n++)t=l[n],r.indexOf(t)>=0||(o[t]=e[t]);return o}(e,r);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(n=0;n<l.length;n++)t=l[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}(n,["disablePortal"]);const{isBrowser:c}=s.default(),{isInModal:d}=r.useContext(i.default),p=null===(o=u.reference.current)||void 0===o?void 0:o.closest("[role='dialog']");return l?e.jsx(b,f({},u)):c?t.createPortal(e.jsx(a.default,{className:"carbon-portal-scoped-tokens-provider",children:e.jsx(b,f({},u))}),d&&p?p:document.body):null};
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("react-dom"),n=require("@floating-ui/dom"),o=require("../../hooks/__internal__/useFloating/useFloating.js"),l=require("./popover.style.js"),a=require("../../style/design-tokens/carbon-scoped-tokens-provider/carbon-scoped-tokens-provider.component.js"),i=require("../modal/modal.context.js"),u=require("../../hooks/__internal__/useIsBrowser/index.js");function s(e){return e&&e.__esModule?e:{default:e}}var c=s(r);function d(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function f(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){d(e,r,t[r])}))}return e}const p=[n.flip({fallbackStrategy:"initialPlacement"})],b=({children:t,placement:n,reference:a,middleware:i=p,disableBackgroundUI:u,isOpen:s=!0,hide:d,animationFrame:f,popoverStrategy:b="absolute",childRefOverride:m})=>{const y=m||c.default.Children.only(t).ref,j=r.useRef(null),O=y||j;let g;return g=y?t:c.default.cloneElement(t,{ref:O}),o.default({isOpen:s,reference:a,floating:O,placement:n,middleware:i,animationFrame:f,strategy:b}),e.jsx(l.StyledPopoverContent,{hide:d,children:u?e.jsx(l.StyledBackdrop,{"data-role":"popup-backdrop",children:g}):g})};exports.default=n=>{var o,{disablePortal:l}=n,s=function(e,r){if(null==e)return{};var t,n,o=function(e,r){if(null==e)return{};var t,n,o={},l=Object.keys(e);for(n=0;n<l.length;n++)t=l[n],r.indexOf(t)>=0||(o[t]=e[t]);return o}(e,r);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(n=0;n<l.length;n++)t=l[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}(n,["disablePortal"]);const{isBrowser:c}=u.default(),{isInModal:d}=r.useContext(i.default),p=null===(o=s.reference.current)||void 0===o?void 0:o.closest("[role='dialog']");return l?e.jsx(b,f({},s)):c?t.createPortal(e.jsx(a.default,{className:"carbon-portal-scoped-tokens-provider",children:e.jsx(b,f({},s))}),d&&p?p:document.body):null};
@@ -2,7 +2,7 @@ export declare const StyledBackdrop: import("styled-components").StyledComponent
2
2
  theme: object;
3
3
  }, "theme">;
4
4
  type StyledPopoverContentProps = {
5
- isOpen?: boolean;
5
+ hide?: boolean;
6
6
  };
7
7
  export declare const StyledPopoverContent: import("styled-components").StyledComponent<"div", any, StyledPopoverContentProps, never>;
8
8
  export {};
@@ -1 +1 @@
1
- "use strict";var e=require("styled-components"),t=require("../../style/themes/apply-base-theme.js");function o(e){return e&&e.__esModule?e:{default:e}}var d=o(e);const p=d.default.div.attrs(t.default).withConfig({displayName:"popover.style__StyledBackdrop",componentId:"sc-914db531-0"})(["bottom:0;left:0;position:fixed;right:0;top:0;z-index:var( --adaptiveSidebarModalBackdrop,"," );background:transparent;"],(({theme:e})=>e.zIndex.popover)),r=d.default.div.withConfig({displayName:"popover.style__StyledPopoverContent",componentId:"sc-914db531-1"})(["",""],(({isOpen:e})=>!e&&"display: none;"));exports.StyledBackdrop=p,exports.StyledPopoverContent=r;
1
+ "use strict";var e=require("styled-components"),t=require("../../style/themes/apply-base-theme.js");function o(e){return e&&e.__esModule?e:{default:e}}var d=o(e);const r=d.default.div.attrs(t.default).withConfig({displayName:"popover.style__StyledBackdrop",componentId:"sc-fb4df9e5-0"})(["bottom:0;left:0;position:fixed;right:0;top:0;z-index:var( --adaptiveSidebarModalBackdrop,"," );background:transparent;"],(({theme:e})=>e.zIndex.popover)),a=d.default.div.withConfig({displayName:"popover.style__StyledPopoverContent",componentId:"sc-fb4df9e5-1"})(["",""],(({hide:e})=>e&&"display: none;"));exports.StyledBackdrop=r,exports.StyledPopoverContent=a;
@@ -2,6 +2,9 @@ import React from "react";
2
2
  import { MarginProps } from "styled-system";
3
3
  import { TagProps } from "../../../__internal__/utils/helpers/tags";
4
4
  type AccordionGroupChild = React.ReactElement | boolean | null | undefined | Array<AccordionGroupChild>;
5
+ /**
6
+ * @deprecated This component is deprecated and will be removed in a future release. Wrapping a group of Accordions in AccordionGroup is no longer required.
7
+ */
5
8
  export interface AccordionGroupProps extends MarginProps, TagProps {
6
9
  /** An Accordion or list of Accordion components to be rendered inside the AccordionGroup */
7
10
  children?: AccordionGroupChild;
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("invariant"),n=require("../../../__internal__/utils/helpers/events/events.js"),o=require("../accordion.component.js"),l=require("../accordion.style.js"),i=require("../../../__internal__/utils/helpers/tags/tags.js"),c=require("../../../__internal__/utils/logger/index.js");function u(e){return e&&e.__esModule?e:{default:e}}var a=u(r),s=u(t);function d(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 p=t=>{var{children:u}=t,p=function(e,r){if(null==e)return{};var t,n,o=function(e,r){if(null==e)return{};var t,n,o={},l=Object.keys(e);for(n=0;n<l.length;n++)t=l[n],r.indexOf(t)>=0||(o[t]=e[t]);return o}(e,r);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(n=0;n<l.length;n++)t=l[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}(t,["children"]);f||(f=!0,c.default.deprecate("`AccordionGroup` is deprecated and will soon be removed."));const y=r.useMemo((()=>{let e=!0;return a.default.Children.toArray(u).forEach((r=>{("string"==typeof r||a.default.isValidElement(r)&&"Accordion"!==r.type.displayName)&&(e=!1)})),e}),[u]);s.default(y,`AccordionGroup accepts only children of type \`${o.Accordion.displayName}\`.`);const b=r.useMemo((()=>a.default.Children.toArray(u).filter((e=>a.default.isValidElement(e)))),[u]),O=r.useMemo((()=>b.map((e=>e.ref||a.default.createRef()))),[b]),j=r.useCallback(((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]),m=r.useCallback(((e,r)=>{n.default.isUpKey(e)&&j(e,r-1),n.default.isDownKey(e)&&j(e,r+1),n.default.isHomeKey(e)&&j(e,0),n.default.isEndKey(e)&&j(e,O.length-1)}),[j,O]);return e.jsx(l.StyledAccordionGroup,(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){d(e,r,t[r])}))}return e}({},p,i.default("accordion-group",p)),g=null!=(g={children:b.map(((e,r)=>a.default.cloneElement(e,{ref:O[r],index:r,handleKeyboardAccessibility:m})))})?g:{},Object.getOwnPropertyDescriptors?Object.defineProperties(v,Object.getOwnPropertyDescriptors(g)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(g)).forEach((function(e){Object.defineProperty(v,e,Object.getOwnPropertyDescriptor(g,e))})),v));var v,g};p.displayName="AccordionGroup",exports.AccordionGroup=p,exports.default=p;
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("invariant"),n=require("../../../__internal__/utils/helpers/events/events.js"),o=require("../accordion.component.js"),l=require("../accordion.style.js"),i=require("../../../__internal__/utils/helpers/tags/tags.js"),c=require("../../../__internal__/utils/logger/index.js");function u(e){return e&&e.__esModule?e:{default:e}}var a=u(r),s=u(t);function d(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 p=t=>{var{children:u}=t,p=function(e,r){if(null==e)return{};var t,n,o=function(e,r){if(null==e)return{};var t,n,o={},l=Object.keys(e);for(n=0;n<l.length;n++)t=l[n],r.indexOf(t)>=0||(o[t]=e[t]);return o}(e,r);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(n=0;n<l.length;n++)t=l[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}(t,["children"]);f||(f=!0,c.default.deprecate("`AccordionGroup` is deprecated and will be removed in a future release. Wrapping a group of Accordions in AccordionGroup is no longer required."));const y=r.useMemo((()=>{let e=!0;return a.default.Children.toArray(u).forEach((r=>{("string"==typeof r||a.default.isValidElement(r)&&"Accordion"!==r.type.displayName)&&(e=!1)})),e}),[u]);s.default(y,`AccordionGroup accepts only children of type \`${o.Accordion.displayName}\`.`);const b=r.useMemo((()=>a.default.Children.toArray(u).filter((e=>a.default.isValidElement(e)))),[u]),O=r.useMemo((()=>b.map((e=>e.ref||a.default.createRef()))),[b]),g=r.useCallback(((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]),j=r.useCallback(((e,r)=>{n.default.isUpKey(e)&&g(e,r-1),n.default.isDownKey(e)&&g(e,r+1),n.default.isHomeKey(e)&&g(e,0),n.default.isEndKey(e)&&g(e,O.length-1)}),[g,O]);return e.jsx(l.StyledAccordionGroup,(m=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){d(e,r,t[r])}))}return e}({},p,i.default("accordion-group",p)),v=null!=(v={children:b.map(((e,r)=>a.default.cloneElement(e,{ref:O[r],index:r,handleKeyboardAccessibility:j})))})?v:{},Object.getOwnPropertyDescriptors?Object.defineProperties(m,Object.getOwnPropertyDescriptors(v)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(v)).forEach((function(e){Object.defineProperty(m,e,Object.getOwnPropertyDescriptor(v,e))})),m));var m,v};p.displayName="AccordionGroup",exports.AccordionGroup=p,exports.default=p;
@@ -1,39 +1,70 @@
1
1
  import React from "react";
2
2
  import { SpaceProps } from "styled-system";
3
3
  import { TagProps } from "../../__internal__/utils/helpers/tags";
4
- import { StyledAccordionContainerProps } from "./accordion.style";
5
- export interface AccordionProps extends StyledAccordionContainerProps, SpaceProps, TagProps {
4
+ export interface AccordionProps extends SpaceProps, TagProps {
5
+ id?: string;
6
6
  /** Content of the Accordion component */
7
7
  children?: React.ReactNode;
8
- /** Set the default state of expansion of the Accordion if component is meant to be used as uncontrolled */
8
+ /** Set the default state of expansion of the Accordion if component is to be used as uncontrolled */
9
9
  defaultExpanded?: boolean;
10
- /** Disable padding for the content */
10
+ /**
11
+ * Disable padding for the content.
12
+ * @deprecated Padding is no longer applied to the Accordion content by default. Any desired spacing can be applied directly to the provided content.
13
+ */
11
14
  disableContentPadding?: boolean;
12
- /** Sets the expansion state of the Accordion if component is meant to be used as controlled */
15
+ /** Sets the expansion state of the Accordion if component is to be used as controlled */
13
16
  expanded?: boolean;
14
- /** An error message to be displayed in the tooltip */
15
- error?: string;
16
17
  /** Styled system spacing props provided to Accordion Title */
17
18
  headerSpacing?: SpaceProps;
18
- id?: string;
19
- /** Sets icon type */
20
- iconType?: "chevron_down" | "chevron_down_thick" | "dropdown";
21
- /** Sets icon alignment */
22
- iconAlign?: "left" | "right";
23
- /** Sets accordion title */
19
+ /** Title of the Accordion */
24
20
  title: React.ReactNode;
25
- /** An info message to be displayed in the tooltip */
26
- info?: string;
27
- /** Callback fired when expansion state changes */
28
- onChange?: (event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>, isExpanded: boolean) => void;
29
- /** When the Accordion is open the title can change to this */
21
+ /** Title of the Accordion when it is open */
30
22
  openTitle?: string;
31
- /** Sets accordion size */
32
- size?: "large" | "small";
33
23
  /** Sets accordion sub title */
34
24
  subTitle?: string;
35
- /** A warning message to be displayed in the tooltip */
25
+ /** Callback fired when expansion state changes */
26
+ onChange?: (event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>, isExpanded: boolean) => void;
27
+ /** Sets Accordion size */
28
+ size?: "small" | "medium" | "large";
29
+ /**
30
+ * Sets Accordion borders.
31
+ *
32
+ * **Deprecation Warning:** The "full" borders are deprecated and will be removed in a future release.
33
+ */
34
+ borders?: "default" | "none" | "full";
35
+ /** Sets Accordion width */
36
+ width?: string;
37
+ /**
38
+ * Sets Accordion variant.
39
+ *
40
+ * **Deprecation Warning:** The "subtle" variant is deprecated, please use "simple" instead.
41
+ */
42
+ variant?: "standard" | "simple" | "subtle";
43
+ /**
44
+ * Sets icon type
45
+ * @deprecated Custom icon types on accordions are deprecated and will be removed in a future release.
46
+ */
47
+ iconType?: "chevron_down" | "chevron_down_thick" | "dropdown";
48
+ /**
49
+ * Sets icon alignment.
50
+ * @deprecated Icon alignment on accordions is deprecated and will be removed in a future release. Icons will now render on the left by default.
51
+ */
52
+ iconAlign?: "left" | "right";
53
+ /**
54
+ * An error message to be displayed in the tooltip.
55
+ * @deprecated Validation messages on accordions are no longer supported.
56
+ */
57
+ error?: string;
58
+ /**
59
+ * A warning message to be displayed in the tooltip.
60
+ * @deprecated Validation messages on accordions are no longer supported.
61
+ */
36
62
  warning?: string;
63
+ /**
64
+ * An info message to be displayed in the tooltip.
65
+ * @deprecated Validation messages on accordions are no longer supported.
66
+ */
67
+ info?: string;
37
68
  }
38
69
  export interface AccordionInternalProps {
39
70
  /** @ignore @private */
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),n=require("react"),t=require("../../__internal__/utils/helpers/tags/tags.js"),r=require("../../hooks/__internal__/useResizeObserver/useResizeObserver.js"),i=require("../../__internal__/utils/helpers/guid/index.js"),o=require("../../__internal__/utils/helpers/events/events.js"),a=require("./accordion.style.js"),c=require("../../__internal__/validations/validation-icon.component.js");function d(e){return e&&e.__esModule?e:{default:e}}function l(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function s(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{},r=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),r.forEach((function(n){l(e,n,t[n])}))}return e}function u(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 t=Object.getOwnPropertySymbols(e);n.push.apply(n,t)}return n}(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})),e}const f=d(n).default.forwardRef(((d,l)=>{var{borders:f="default",defaultExpanded:b,expanded:p,onChange:y,children:g,handleKeyboardAccessibility:h,id:v,index:j,iconType:O,iconAlign:x,size:_="large",subTitle:m,title:w,width:A,headerSpacing:S,disableContentPadding:P=!1,error:C,warning:E,info:T,openTitle:k,variant:q="standard"}=d,z=function(e,n){if(null==e)return{};var t,r,i=function(e,n){if(null==e)return{};var t,r,i={},o=Object.keys(e);for(r=0;r<o.length;r++)t=o[r],n.indexOf(t)>=0||(i[t]=e[t]);return i}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)t=o[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(i[t]=e[t])}return i}(d,["borders","defaultExpanded","expanded","onChange","children","handleKeyboardAccessibility","id","index","iconType","iconAlign","size","subTitle","title","width","headerSpacing","disableContentPadding","error","warning","info","openTitle","variant"]);const D=void 0!==p,[I,R]=n.useState(b||!1),[H,K]=n.useState(I?"auto":0),$=n.useRef(null),L=n.useRef(null),M=D?p:I;r.default($,(()=>{var e;K(null===(e=$.current)||void 0===e?void 0:e.scrollHeight)})),n.useEffect((()=>{var e;K(null===(e=$.current)||void 0===e?void 0:e.scrollHeight)}),[M]);const V=n.useCallback((e=>{D||R(!M),null==y||y(e,!M)}),[D,M,y]);n.useEffect((()=>{var e,n;M?null===(e=L.current)||void 0===e||e.removeAttribute("hidden"):null===(n=L.current)||void 0===n||n.setAttribute("hidden","until-found")}),[M]),n.useEffect((()=>{const e=L.current;if(!e)return;const n=e=>{V(e)};return e.addEventListener("beforematch",n),()=>e.removeEventListener("beforematch",n)}),[V,D,y]);const F=n.useCallback((e=>{h&&h(e,j),(o.default.isEnterKey(e)||o.default.isSpaceKey(e))&&(e.preventDefault(),V(e))}),[h,j,V]),N=n.useRef(i.default()),B=v||`Accordion_${N.current}`,G=`AccordionHeader_${N.current}`,J=`AccordionContent_${N.current}`,Q=!!(C||E||T);return e.jsxs(a.StyledAccordionContainer,u(s({id:B,width:A,borders:"subtle"===q?"none":f,variant:q},z,t.default("accordion",z)),{children:[e.jsxs(a.StyledAccordionTitleContainer,u(s({"data-element":"accordion-title-container",id:G,"aria-expanded":M,"aria-controls":J,onClick:V,onKeyDown:F,tabIndex:0,iconAlign:x||("standard"===q?"right":"left"),ref:l,size:_,isExpanded:M,variant:q,role:"button"},S),{children:[e.jsxs(a.StyledAccordionHeadingsContainer,{"data-element":"accordion-headings-container",hasValidationIcon:Q,children:["string"==typeof w?e.jsx(a.StyledAccordionTitle,{"data-element":"accordion-title",size:_,variant:q,children:M&&k||w}):M&&k||w,"subtle"!==q&&e.jsxs(e.Fragment,{children:[Q&&e.jsx(c.ValidationIcon,{error:C,warning:E,info:T,tooltipPosition:"top",tabIndex:0,ml:1}),m&&"large"===_&&"standard"===q&&e.jsx(a.StyledAccordionSubTitle,{children:m})]})]}),e.jsx(a.StyledAccordionIcon,{"data-element":"accordion-icon",type:O||("small"===_||"subtle"===q?"chevron_down_thick":"chevron_down"),isExpanded:M,iconAlign:x||("standard"===q?"right":"left")})]})),e.jsx(a.StyledAccordionContentContainer,{ref:L,isExpanded:M,maxHeight:H,"data-role":"accordion-content-container",children:e.jsx(a.StyledAccordionContent,{role:"region","data-element":"accordion-content","data-role":"accordion-content",id:J,"aria-labelledby":G,ref:$,disableContentPadding:P,variant:q,children:g})})]}))}));f.displayName="Accordion",exports.Accordion=f,exports.default=f;
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("../../__internal__/utils/helpers/tags/tags.js"),n=require("../../hooks/__internal__/useResizeObserver/useResizeObserver.js"),i=require("../../__internal__/utils/helpers/guid/index.js"),o=require("../../__internal__/utils/helpers/events/events.js"),c=require("./accordion.style.js"),a=require("../button/__next__/button.component.js"),d=require("../../hooks/useMediaQuery/useMediaQuery.js");function l(e){return e&&e.__esModule?e:{default:e}}function s(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function u(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){s(e,t,r[t])}))}return e}function f(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}const p=l(t).default.forwardRef(((l,s)=>{var{borders:p="default",defaultExpanded:b,expanded:y,onChange:h,children:v,handleKeyboardAccessibility:j,id:m,index:g,iconType:O,iconAlign:x,size:_="medium",subTitle:w,title:A,width:S,headerSpacing:$,disableContentPadding:P,error:C,warning:E,info:T,openTitle:k,variant:q="standard"}=l,z=function(e,t){if(null==e)return{};var r,n,i=function(e,t){if(null==e)return{};var r,n,i={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(i[r]=e[r]);return i}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(i[r]=e[r])}return i}(l,["borders","defaultExpanded","expanded","onChange","children","handleKeyboardAccessibility","id","index","iconType","iconAlign","size","subTitle","title","width","headerSpacing","disableContentPadding","error","warning","info","openTitle","variant"]);const M=void 0!==y,[D,R]=t.useState(b||!1),[K,H]=t.useState(D?"auto":0),I=t.useRef(null),L=t.useRef(null),N=M?y:D;n.default(I,(()=>{var e;H(null===(e=I.current)||void 0===e?void 0:e.scrollHeight)})),t.useEffect((()=>{var e;H(null===(e=I.current)||void 0===e?void 0:e.scrollHeight)}),[N]);const Q=d.default("screen and (prefers-reduced-motion: no-preference)"),B=t.useCallback((e=>{M||R(!N),null==h||h(e,!N)}),[M,N,h]),W=Q?400:0;t.useEffect((()=>{var e;if(!N){const e=setTimeout((()=>{var e;null===(e=L.current)||void 0===e||e.setAttribute("hidden","until-found")}),W);return()=>clearTimeout(e)}null===(e=L.current)||void 0===e||e.removeAttribute("hidden")}),[N,W]),t.useEffect((()=>{const e=L.current;if(!e)return;const t=e=>{B(e)};return e.addEventListener("beforematch",t),()=>e.removeEventListener("beforematch",t)}),[B,M,h]);const F=t.useCallback((e=>{j&&j(e,g),(o.default.isEnterKey(e)||o.default.isSpaceKey(e))&&(e.preventDefault(),B(e))}),[j,g,B]),G=t.useRef(i.default()),J=m||`Accordion_${G.current}`,U=`AccordionHeader_${G.current}`,V=`AccordionContent_${G.current}`,X="large"===_?"medium":_,Y="subtle"===q?"simple":q,Z=()=>N&&k||A,ee=()=>e.jsx(c.StyledAccordionIcon,{"data-element":"accordion-icon","data-role":"accordion-icon",type:O||("standard"===q&&"medium"===X?"chevron_down":"chevron_down_thick"),$isExpanded:N,$allowMotion:Q});return e.jsxs(c.StyledAccordionContainer,f(u({id:J,$width:S,$borders:p,$variant:Y,$isExpanded:N,$allowMotion:Q},z,r.default("accordion",z)),{children:["simple"===Y?e.jsxs(a.Button,{"data-role":"accordion-simple-button",id:U,"aria-expanded":N,"aria-controls":V,onClick:B,variantType:"tertiary",size:_,className:N?"active":"",children:[ee(),Z()]}):e.jsxs(c.StyledAccordionTitleContainer,f(u({"data-element":"accordion-title-container",id:U,"aria-expanded":N,"aria-controls":V,onClick:B,onKeyDown:F,tabIndex:0,ref:s,role:"button",$size:X,$iconAlign:x},$),{children:[ee(),e.jsxs(c.StyledAccordionTitleWrapper,{children:["string"==typeof A?e.jsx(c.StyledAccordionTitle,{"data-element":"accordion-title",$size:X,children:Z()}):Z(),w&&e.jsx(c.StyledAccordionSubTitle,{"data-element":"accordion-subtitle",$size:X,children:w})]})]})),e.jsxs(c.StyledAccordionContentContainer,{ref:L,$isExpanded:N,$height:K,$allowMotion:Q,"data-role":"accordion-content-container",children:["simple"===Y&&e.jsx(c.StyledAccordionLine,{}),e.jsx(c.StyledAccordionContent,{role:"region","data-element":"accordion-content","data-role":"accordion-content",id:V,"aria-labelledby":U,ref:I,$variant:Y,children:v})]})]}))}));p.displayName="Accordion",exports.Accordion=p,exports.default=p;
@@ -1,50 +1,26 @@
1
- declare const StyledAccordionGroup: import("styled-components").StyledComponent<"div", any, {
1
+ export interface StyledAccordionProps {
2
+ $borders?: "default" | "full" | "none";
3
+ $width?: string;
4
+ $variant?: "standard" | "simple";
5
+ $isExpanded?: boolean;
6
+ $allowMotion?: boolean;
7
+ $size?: "small" | "medium";
8
+ $iconAlign?: "left" | "right";
9
+ $height?: string | number;
10
+ }
11
+ export declare const StyledAccordionGroup: import("styled-components").StyledComponent<"div", any, {
2
12
  theme: object;
3
13
  }, "theme">;
4
- export interface StyledAccordionContainerProps {
5
- /** Toggles left and right borders, set to none when variant is subtle */
6
- borders?: "default" | "full" | "none";
7
- /** Sets accordion width */
8
- width?: string;
9
- /** Sets accordion variant */
10
- variant?: "standard" | "subtle";
11
- }
12
- declare const StyledAccordionContainer: import("styled-components").StyledComponent<"div", any, {
14
+ export declare const StyledAccordionContainer: import("styled-components").StyledComponent<"div", any, {
13
15
  theme: object;
14
- } & StyledAccordionContainerProps, "theme">;
15
- interface StyledAccordionTitleProps {
16
- size?: "large" | "small";
17
- variant?: "standard" | "subtle";
18
- }
19
- declare const StyledAccordionTitle: import("styled-components").StyledComponent<"h3", any, StyledAccordionTitleProps, never>;
20
- declare const StyledAccordionSubTitle: import("styled-components").StyledComponent<"span", any, {}, never>;
21
- interface StyledAccordionIconProps {
22
- isExpanded?: boolean;
23
- iconAlign?: "left" | "right";
24
- }
25
- declare const StyledAccordionIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../icon").IconProps & import("react").RefAttributes<HTMLSpanElement>>, any, StyledAccordionIconProps, never>;
26
- interface StyledAccordionHeadingsContainerProps {
27
- hasValidationIcon?: boolean;
28
- }
29
- declare const StyledAccordionHeadingsContainer: import("styled-components").StyledComponent<"div", any, StyledAccordionHeadingsContainerProps, never>;
30
- interface StyledAccordionTitleContainerProps {
31
- hasButtonProps?: boolean;
32
- iconAlign?: "left" | "right";
33
- size?: "large" | "small";
34
- isExpanded?: boolean;
35
- variant?: "standard" | "subtle";
36
- }
37
- declare const StyledAccordionTitleContainer: import("styled-components").StyledComponent<"div", any, {
16
+ } & StyledAccordionProps, "theme">;
17
+ export declare const StyledAccordionTitle: import("styled-components").StyledComponent<"h3", any, StyledAccordionProps, never>;
18
+ export declare const StyledAccordionSubTitle: import("styled-components").StyledComponent<"span", any, StyledAccordionProps, never>;
19
+ export declare const StyledAccordionIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../icon").IconProps & import("react").RefAttributes<HTMLSpanElement>>, any, StyledAccordionProps, never>;
20
+ export declare const StyledAccordionTitleWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
21
+ export declare const StyledAccordionTitleContainer: import("styled-components").StyledComponent<"div", any, {
38
22
  theme: object;
39
- } & StyledAccordionTitleContainerProps, "theme">;
40
- export interface StyledAccordionContentContainerProps {
41
- isExpanded?: boolean;
42
- maxHeight?: string | number;
43
- }
44
- declare const StyledAccordionContentContainer: import("styled-components").StyledComponent<"div", any, StyledAccordionContentContainerProps, never>;
45
- export interface StyledAccordionContentProps {
46
- disableContentPadding?: boolean;
47
- variant?: "standard" | "subtle";
48
- }
49
- declare const StyledAccordionContent: import("styled-components").StyledComponent<"div", any, StyledAccordionContentProps, never>;
50
- export { StyledAccordionGroup, StyledAccordionContainer, StyledAccordionHeadingsContainer, StyledAccordionSubTitle, StyledAccordionTitleContainer, StyledAccordionTitle, StyledAccordionIcon, StyledAccordionContent, StyledAccordionContentContainer, };
23
+ } & StyledAccordionProps, "theme">;
24
+ export declare const StyledAccordionLine: import("styled-components").StyledComponent<"div", any, {}, never>;
25
+ export declare const StyledAccordionContentContainer: import("styled-components").StyledComponent<"div", any, StyledAccordionProps, never>;
26
+ export declare const StyledAccordionContent: import("styled-components").StyledComponent<"div", any, StyledAccordionProps, never>;
@@ -1 +1 @@
1
- "use strict";var o=require("styled-components"),t=require("styled-system"),i=require("../icon/icon.component.js"),e=require("../../style/themes/apply-base-theme.js"),n=require("../../__internal__/validations/validation-icon.style.js"),r=require("../../style/utils/add-focus-styling.js");function a(o){return o&&o.__esModule?o:{default:o}}var s=a(o);const c=s.default.div.attrs(e.default).withConfig({displayName:"accordion.style__StyledAccordionGroup",componentId:"sc-a73079b2-0"})(["",""],t.margin),d=s.default.div.attrs(e.default).withConfig({displayName:"accordion.style__StyledAccordionContainer",componentId:"sc-a73079b2-1"})([""," display:flex;",";justify-content:center;flex-direction:column;box-sizing:border-box;width:",";color:var(--colorsUtilityYin090);background-color:",";border:1px solid var(--colorsUtilityMajor100);"," "," ",""],t.space,(({variant:t})=>t&&o.css(["align-items:stretch;"])),(({width:o})=>o||"100%"),(({variant:o})=>"subtle"!==o?"var(--colorsUtilityYang100)":"var(--colorsUtilityMajorTransparent)"),(({borders:t})=>"default"===t&&o.css(["border-left:none;border-right:none;"])),(({borders:t})=>"none"===t&&o.css(["border:none;"])),(({variant:t})=>"subtle"!==t&&o.css(["& + &{margin-top:-1px;border-top:1px solid var(--colorsUtilityMajor100);border-bottom:1px solid var(--colorsUtilityMajor100);}"]))),l=s.default.h3.withConfig({displayName:"accordion.style__StyledAccordionTitle",componentId:"sc-a73079b2-2"})(["font-size:",";font-weight:500;line-height:1;user-select:none;margin:0;"],(({size:o,variant:t})=>"small"===o||"subtle"===t?"var(--fontSizes200)":"var(--fontSizes400)")),p=s.default.span.withConfig({displayName:"accordion.style__StyledAccordionSubTitle",componentId:"sc-a73079b2-3"})(["margin-top:8px;"]),g=s.default(i.default).withConfig({displayName:"accordion.style__StyledAccordionIcon",componentId:"sc-a73079b2-4"})(["transition:transform 0.3s;transform:rotate(0deg);margin-right:",";"," color:var(--colorsActionMinor500);"],(({iconAlign:o})=>"left"===o?"var(--spacing200)":"var(--spacing000)"),(({isExpanded:o,iconAlign:t})=>o&&("right"===t?"transform: rotate(180deg);":"transform: rotate(-180deg);"))),y=s.default.div.withConfig({displayName:"accordion.style__StyledAccordionHeadingsContainer",componentId:"sc-a73079b2-5"})(["padding-right:var(--sizing300);",""],(({hasValidationIcon:t})=>o.css(["display:grid;"," "," ","{height:20px;position:relative;top:2px;}"],t&&o.css(["grid-template-columns:min-content auto;","{grid-column:span 3;}"],p),!t&&o.css(["grid-template-rows:auto auto;"]),n.default))),f=s.default.div.attrs(e.default).withConfig({displayName:"accordion.style__StyledAccordionTitleContainer",componentId:"sc-a73079b2-6"})(["",""],(({iconAlign:i,size:e,isExpanded:n,variant:a})=>o.css(["padding:",";"," display:flex;align-items:center;justify-content:space-between;"," cursor:pointer;z-index:1;&:focus{","}"," ",""],"small"===e?"var(--spacing200)":"var(--spacing300)",t.space,"left"===i&&o.css(["justify-content:flex-end;flex-direction:row-reverse;"]),r.default(),"subtle"===a&&o.css(["color:var(--colorsActionMajor500);padding:var(--spacing025);margin-bottom:",";width:fit-content;","{color:var(--colorsActionMajor500);",";}:hover{color:var(--colorsActionMajor600);","{color:var(--colorsActionMajor600);}}"],n&&"var(--spacing200)",g,"left"===i&&"margin-right: var(--spacing050)",g),"subtle"!==a&&o.css(["&:hover{background-color:var(--colorsUtilityMajor050);}"])))),u=s.default.div.withConfig({displayName:"accordion.style__StyledAccordionContentContainer",componentId:"sc-a73079b2-7"})(["flex-grow:1;box-sizing:border-box;overflow:hidden;transition:all 0.3s;",""],(({maxHeight:t,isExpanded:i})=>o.css(["max-height:",";height:",";"],i?`${t}px`:"0px",i?`${t}px`:"0px"))),v=s.default.div.withConfig({displayName:"accordion.style__StyledAccordionContent",componentId:"sc-a73079b2-8"})(["padding:var(--spacing300);padding-top:var(--spacing100);overflow:hidden;"," ",""],(({variant:t})=>"subtle"===t&&o.css(["margin-left:var(--spacing150);padding:var(--spacing100) var(--spacing200) var(--spacing300);border-left:2px solid var(--colorsUtilityMajor100);"])),(({disableContentPadding:t})=>t&&o.css(["padding:0;"])));exports.StyledAccordionContainer=d,exports.StyledAccordionContent=v,exports.StyledAccordionContentContainer=u,exports.StyledAccordionGroup=c,exports.StyledAccordionHeadingsContainer=y,exports.StyledAccordionIcon=g,exports.StyledAccordionSubTitle=p,exports.StyledAccordionTitle=l,exports.StyledAccordionTitleContainer=f;
1
+ "use strict";var e=require("styled-components"),o=require("styled-system"),t=require("../icon/icon.component.js"),i=require("../../style/themes/apply-base-theme.js"),n=require("../../style/utils/add-focus-styling.js");function a(e){return e&&e.__esModule?e:{default:e}}var c=a(e);const s={small:{titleFont:"var(--global-font-static-section-heading-s)",subtitleFont:"var(--global-font-static-comp-medium-s)",headingPadding:"var(--global-space-comp-l)"},medium:{titleFont:"var(--global-font-static-section-heading-m)",subtitleFont:"var(--global-font-static-comp-medium-l)",headingPadding:"var(--global-space-comp-xl)"}},r=c.default.div.attrs(i.default).withConfig({displayName:"accordion.style__StyledAccordionGroup",componentId:"sc-5e39e462-0"})(["",""],o.margin),l=c.default.div.attrs(i.default).withConfig({displayName:"accordion.style__StyledAccordionContainer",componentId:"sc-5e39e462-1"})(["display:flex;align-items:stretch;justify-content:center;flex-direction:column;box-sizing:border-box;width:",";"," &&{","}"],(({$width:e})=>e||"100%"),(({$variant:o,$borders:t,$isExpanded:i,$allowMotion:n})=>e.css([""," ",""],"standard"===o&&e.css(["& + &{margin-top:-1px;}border:1px solid var(--container-action-border-default);",";",";"],"default"===t&&e.css(["border-left:none;border-right:none;"]),"none"===t&&e.css(["border:none;"])),"simple"===o&&e.css(["gap:",";",""],i?"var(--global-space-comp-l)":"0px",n&&e.css(["transition:gap 0.4s;"])))),o.space),d=c.default.h3.withConfig({displayName:"accordion.style__StyledAccordionTitle",componentId:"sc-5e39e462-2"})([""," color:var(--container-action-txt-default);margin:0;"],(({$size:o})=>o&&e.css(["font:",";"],s[o].titleFont))),p=c.default.span.withConfig({displayName:"accordion.style__StyledAccordionSubTitle",componentId:"sc-5e39e462-3"})([""," color:var(--container-action-txt-alt-default);"],(({$size:o})=>o&&e.css(["font:",";"],s[o].subtitleFont))),g=c.default(t.default).withConfig({displayName:"accordion.style__StyledAccordionIcon",componentId:"sc-5e39e462-4"})(["width:var(--global-size-2-xs);height:var(--global-size-2-xs);color:var(--container-action-icon-default);",";"],(({$isExpanded:o,$allowMotion:t})=>e.css(["transform:rotate(0deg);"," ",""],o&&e.css(["transform:rotate(-180deg);"]),t&&e.css(["transition:transform 0.4s;"])))),f=c.default.div.withConfig({displayName:"accordion.style__StyledAccordionTitleWrapper",componentId:"sc-5e39e462-5"})(["display:flex;flex-direction:column;align-items:flex-start;gap:var(--global-space-comp-xs);flex:1 0 0;"]),m=c.default.div.attrs(i.default).withConfig({displayName:"accordion.style__StyledAccordionTitleContainer",componentId:"sc-5e39e462-6"})(["",""],(({$size:t,$iconAlign:i})=>t&&e.css(["display:flex;flex:1 0 0;align-items:center;align-self:stretch;background-color:transparent;border:none;text-align:left;gap:var(--global-space-comp-l);padding:",";"," "," &:hover{cursor:pointer;background-color:var(--container-action-bg-hover);}&:focus{"," z-index:1;}"],s[t].headingPadding,"right"===i&&e.css(["flex-direction:row-reverse;"]),o.space,n.default()))),y=c.default.div.withConfig({displayName:"accordion.style__StyledAccordionLine",componentId:"sc-5e39e462-7"})(["position:absolute;width:2px;background-color:var(--input-typical-border-alt);border-radius:var(--global-radius-action-xs);height:100%;"]),u=c.default.div.withConfig({displayName:"accordion.style__StyledAccordionContentContainer",componentId:"sc-5e39e462-8"})(["position:relative;overflow:hidden;height:0;opacity:0;",""],(({$height:o,$isExpanded:t,$allowMotion:i})=>e.css([""," ",""],i&&e.css(["transition:height 0.4s,opacity 0.2s;"]),t&&e.css(["height:","px;opacity:1;"],o)))),h=c.default.div.withConfig({displayName:"accordion.style__StyledAccordionContent",componentId:"sc-5e39e462-9"})(["",""],(({$variant:o})=>e.css(["overflow:hidden;",""],"simple"===o&&e.css(["margin-left:var(--global-space-comp-l);"]))));exports.StyledAccordionContainer=l,exports.StyledAccordionContent=h,exports.StyledAccordionContentContainer=u,exports.StyledAccordionGroup=r,exports.StyledAccordionIcon=g,exports.StyledAccordionLine=y,exports.StyledAccordionSubTitle=p,exports.StyledAccordionTitle=d,exports.StyledAccordionTitleContainer=m,exports.StyledAccordionTitleWrapper=f;
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var o=require("styled-components"),e=require("styled-system"),r=require("../../../style/utils/add-focus-styling.js"),i=require("./button.config.js");function n(o){return o&&o.__esModule?o:{default:o}}var t=n(o);const a=t.default.span.withConfig({displayName:"button.style__StyledContentContainer",componentId:"sc-c07486b9-0"})(["display:flex;gap:var(--global-space-comp-s);align-items:center;justify-content:center;"]),d=t.default.button.withConfig({displayName:"button.style__StyledButton",componentId:"sc-c07486b9-1"})([""," align-items:center;box-sizing:border-box;display:inline-flex;justify-content:center;outline-offset:0;text-decoration:none;vertical-align:middle;cursor:pointer;"," "," &:focus{"," position:relative;z-index:1;}"],e.space,(({$allowMotion:e,disabled:r,$inverse:n,$size:t,$variant:a,$variantType:d,$iconOnly:l})=>n?(({disabled:e,size:r,variantType:n,iconOnly:t})=>{const{background:a,border:d,label:l}=i.inverseColourSettings[n],{borderRadius:s,font:c,height:u,paddingVertical:b,paddingHorizontal:v}=i.propsForSize[r];return o.css(["background-color:",";border:"," solid ",";border-radius:",";color:",";font:",";height:",";width:",";padding:"," ",";",""],a.default,"tertiary"===n?"1px":"2px",d.default,t?"var(--global-radius-action-circle)":s,l.default,c,u,t?u:"max-content",b,t?"":v,e?o.css(["background-color:",";border-color:",";color:",";cursor:not-allowed;"],a.disabled,d.disabled,l.disabled):o.css(["&:active{background-color:",";color:",";border-color:",";}&:hover{background-color:",";color:",";border-color:",";}"],a.active,l.active,d.active,a.hover,l.hover,d.hover))})({disabled:r,size:t,variantType:d,iconOnly:l}):"gradient"===a?o.css([""," ",""],i.gradientAnimation,(({allowMotion:e=!0,disabled:r,size:n,iconOnly:t})=>{const{background:a,border:d,label:l}=i.colourSettings.gradient.secondary||{},{borderRadius:s,font:c,height:u,paddingVertical:b,paddingHorizontal:v}=i.propsForSize[n];return o.css(["position:relative;z-index:0;border:none;border-radius:",";background:white;color:var(--button-ai-label-default);font:",";height:",";width:",";padding:"," ",';overflow:hidden;&::before{content:"";position:absolute;inset:0;padding:2px;border-radius:inherit;z-index:-1;background:var(--button-ai-border-default);background-position:0% 0;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;}&:hover{background:linear-gradient( 90deg,var(--mode-color-action-ai-hover-stop-1) 0%,var(--mode-color-action-ai-hover-stop-2) 40%,var(--mode-color-action-ai-hover-stop-3) 90% );}&:hover::before{',"}"," ",""],t?"var(--global-radius-action-circle)":s,c,u,t?u:"max-content",b,t?"":v,e&&o.css(["background-size:300% 100%;animation:gradient-loop 1000ms linear infinite;"]),r&&o.css(["opacity:0.6;pointer-events:none;cursor:not-allowed;&::before{animation:none;background:none;-webkit-mask:none;mask:none;border:2px solid var(--button-ai-border-disabled);padding:0;}color:var(--button-ai-label-disabled);"]),!r&&o.css(["&:active{background:",";color:",";border-color:",";}"],null==a?void 0:a.active,null==l?void 0:l.active,null==d?void 0:d.active))})({allowMotion:e,disabled:r,size:t,iconOnly:l})):(({disabled:e,size:r,variant:n,variantType:t,iconOnly:a})=>{const{background:d,border:l,label:s}=i.colourSettings[n][t]||{},{borderRadius:c,font:u,height:b,paddingVertical:v,paddingHorizontal:p}=i.propsForSize[r];return o.css(["background-color:",";border:"," solid ",";border-radius:",";color:",";font:",";height:",";width:",";padding:"," ",";",""],null==d?void 0:d.default,"tertiary"===t?"1px":"2px",null==l?void 0:l.default,a?"var(--global-radius-action-circle)":c,null==s?void 0:s.default,u,b,a?b:"max-content",v,a?"":p,e?o.css(["background-color:",";border-color:",";color:",";cursor:not-allowed;"],null==d?void 0:d.disabled,null==l?void 0:l.disabled,null==s?void 0:s.disabled):o.css(["&:active{background-color:",";color:",";border-color:",";}&:hover{background-color:",";color:",";border-color:",";}"],null==d?void 0:d.active,null==s?void 0:s.active,null==l?void 0:l.active,null==d?void 0:d.hover,null==s?void 0:s.hover,null==l?void 0:l.hover))})("xs"!==t||"primary"!==d&&"default"===a?"destructive"!==a||"tertiary"!==d&&"subtle"!==d?{disabled:r,size:t,variant:a,variantType:d,iconOnly:l}:{disabled:r,size:t,variant:a,variantType:"primary",iconOnly:l}:{disabled:r,size:"xs",variant:"default",variantType:"secondary",iconOnly:l})),(({$fullWidth:e,$size:r,$noWrap:n})=>o.css([""," ",""],e&&o.css(["width:100%;"]),n?"white-space: nowrap;":`\n flex-flow: wrap;\n min-height: ${i.propsForSize[r].height};\n height: unset;\n `)),r.default());exports.StyledButton=d,exports.StyledContentContainer=a,exports.default=d;
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var o=require("styled-components"),e=require("styled-system"),i=require("../../../style/utils/add-focus-styling.js"),r=require("./button.config.js");function n(o){return o&&o.__esModule?o:{default:o}}var t=n(o);const a=t.default.span.withConfig({displayName:"button.style__StyledContentContainer",componentId:"sc-1660f692-0"})(["display:flex;gap:var(--global-space-comp-s);align-items:center;justify-content:center;"]),d=t.default.button.withConfig({displayName:"button.style__StyledButton",componentId:"sc-1660f692-1"})([""," align-items:center;box-sizing:border-box;display:inline-flex;justify-content:center;outline-offset:0;text-decoration:none;vertical-align:middle;cursor:pointer;"," "," &:focus{"," position:relative;z-index:1;}"],e.space,(({$allowMotion:e,disabled:i,$inverse:n,$size:t,$variant:a,$variantType:d,$iconOnly:l})=>n?(({disabled:e,size:i,variantType:n,iconOnly:t})=>{const{background:a,border:d,label:l}=r.inverseColourSettings[n],{borderRadius:s,font:c,height:u,paddingVertical:b,paddingHorizontal:v}=r.propsForSize[i];return o.css(["background-color:",";border:"," solid ",";border-radius:",";color:",";font:",";height:",";width:",";padding:"," ",";",""],a.default,"tertiary"===n?"1px":"2px",d.default,t?"var(--global-radius-action-circle)":s,l.default,c,u,t?u:"max-content",b,t?"":v,e?o.css(["background-color:",";border-color:",";color:",";cursor:not-allowed;"],a.disabled,d.disabled,l.disabled):o.css(["&:active,&.active{background-color:",";color:",";border-color:",";}&:hover{background-color:",";color:",";border-color:",";}"],a.active,l.active,d.active,a.hover,l.hover,d.hover))})({disabled:i,size:t,variantType:d,iconOnly:l}):"gradient"===a?o.css([""," ",""],r.gradientAnimation,(({allowMotion:e=!0,disabled:i,size:n,iconOnly:t})=>{const{background:a,border:d,label:l}=r.colourSettings.gradient.secondary||{},{borderRadius:s,font:c,height:u,paddingVertical:b,paddingHorizontal:v}=r.propsForSize[n];return o.css(["position:relative;z-index:0;border:none;border-radius:",";background:white;color:var(--button-ai-label-default);font:",";height:",";width:",";padding:"," ",';overflow:hidden;&::before{content:"";position:absolute;inset:0;padding:2px;border-radius:inherit;z-index:-1;background:var(--button-ai-border-default);background-position:0% 0;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;}&:hover{background:linear-gradient( 90deg,var(--mode-color-action-ai-hover-stop-1) 0%,var(--mode-color-action-ai-hover-stop-2) 40%,var(--mode-color-action-ai-hover-stop-3) 90% );}&:hover::before{',"}"," ",""],t?"var(--global-radius-action-circle)":s,c,u,t?u:"max-content",b,t?"":v,e&&o.css(["background-size:300% 100%;animation:gradient-loop 1000ms linear infinite;"]),i&&o.css(["opacity:0.6;pointer-events:none;cursor:not-allowed;&::before{animation:none;background:none;-webkit-mask:none;mask:none;border:2px solid var(--button-ai-border-disabled);padding:0;}color:var(--button-ai-label-disabled);"]),!i&&o.css(["&:active,&.active{background:",";color:",";border-color:",";}"],null==a?void 0:a.active,null==l?void 0:l.active,null==d?void 0:d.active))})({allowMotion:e,disabled:i,size:t,iconOnly:l})):(({disabled:e,size:i,variant:n,variantType:t,iconOnly:a})=>{const{background:d,border:l,label:s}=r.colourSettings[n][t]||{},{borderRadius:c,font:u,height:b,paddingVertical:v,paddingHorizontal:p}=r.propsForSize[i];return o.css(["background-color:",";border:"," solid ",";border-radius:",";color:",";font:",";height:",";width:",";padding:"," ",";",""],null==d?void 0:d.default,"tertiary"===t?"1px":"2px",null==l?void 0:l.default,a?"var(--global-radius-action-circle)":c,null==s?void 0:s.default,u,b,a?b:"max-content",v,a?"":p,e?o.css(["background-color:",";border-color:",";color:",";cursor:not-allowed;"],null==d?void 0:d.disabled,null==l?void 0:l.disabled,null==s?void 0:s.disabled):o.css(["&:active,&.active{background-color:",";color:",";border-color:",";}&:hover{background-color:",";color:",";border-color:",";}"],null==d?void 0:d.active,null==s?void 0:s.active,null==l?void 0:l.active,null==d?void 0:d.hover,null==s?void 0:s.hover,null==l?void 0:l.hover))})("xs"!==t||"primary"!==d&&"default"===a?"destructive"!==a||"tertiary"!==d&&"subtle"!==d?{disabled:i,size:t,variant:a,variantType:d,iconOnly:l}:{disabled:i,size:t,variant:a,variantType:"primary",iconOnly:l}:{disabled:i,size:"xs",variant:"default",variantType:"secondary",iconOnly:l})),(({$fullWidth:e,$size:i,$noWrap:n})=>o.css([""," ",""],e&&o.css(["width:100%;"]),n?"white-space: nowrap;":`\n flex-flow: wrap;\n min-height: ${r.propsForSize[i].height};\n height: unset;\n `)),i.default());exports.StyledButton=d,exports.StyledContentContainer=a,exports.default=d;
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("@floating-ui/dom"),n=require("../../hooks/__internal__/useClickAwayListener/useClickAwayListener.js"),o=require("../split-button/__internal__/split-button.context.js"),i=require("./multi-action-button.style.js"),l=require("../button/button.component.js"),u=require("../../__internal__/popover/popover.component.js");require("../../style/utils/filter-styled-system-padding-props.js");var a=require("../../style/utils/filter-styled-system-margin-props.js"),s=require("../../style/utils/filter-out-styled-system-spacing-props.js"),d=require("../../hooks/__internal__/useChildButtons/useChildButtons.js"),c=require("../../hooks/__internal__/useAdaptiveSidebarModalFocus/useAdaptiveSidebarModalFocus.js"),p=require("../flat-table/__internal__/flat-table.context.js"),f=require("../../__internal__/utils/helpers/guid/index.js");function b(e){return e&&e.__esModule?e:{default:e}}var y=b(t);function j(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function _(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){j(e,t,r[t])}))}return e}function g(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}const m=t.forwardRef(((b,j)=>{var{align:m="left",position:O="left",disabled:h,buttonType:v,size:w,children:x,text:P,subtext:q,width:k,onClick:S,"data-element":B,"data-role":C}=b,A=function(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}(b,["align","position","disabled","buttonType","size","children","text","subtext","width","onClick","data-element","data-role"]);const M=t.useRef(null),{isInFlatTable:D}=t.useContext(p.default),T=t.useRef(f.default());t.useImperativeHandle(j,(()=>({focusMainButton(){var e;null===(e=M.current)||void 0===e||e.focus({preventScroll:!0})}})),[]);const{showAdditionalButtons:I,showButtons:z,hideButtons:E,buttonNode:F,handleToggleButtonKeyDown:R,wrapperProps:K,contextValue:L}=d.default(M),H=n.default(E);return c.default((()=>E())),e.jsxs(i.StyledMultiActionButton,g(_({ref:F,"data-component":"multi-action-button","data-element":B,"data-role":C,displayed:I,width:k},a.default(A)),{children:[e.jsx(l.default,g(_({"aria-expanded":I,"aria-controls":T.current,"data-element":"toggle-button",ref:M,iconPosition:"after",iconType:"dropdown",disabled:h,buttonType:v,size:w,subtext:q,onKeyDown:R,onClick:e=>{null==S||S(e),I?E():z(),H()}},s.default(A)),{children:P}),"toggle-button"),e.jsx(u.default,{disableBackgroundUI:D&&I,disablePortal:!0,placement:"left"===O?"bottom-start":"bottom-end",reference:F,popoverStrategy:"fixed",middleware:[r.offset(6),r.flip({fallbackStrategy:"initialPlacement"})],children:e.jsx(i.StyledButtonChildrenContainer,g(_({id:T.current},K),{align:m,hidden:!I,children:e.jsx(o.default.Provider,{value:L,children:y.default.Children.map(x,(t=>e.jsx("li",{children:t})))})}))})]}))}));exports.MultiActionButton=m,exports.default=m;
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("@floating-ui/dom"),n=require("../../hooks/__internal__/useClickAwayListener/useClickAwayListener.js"),o=require("../split-button/__internal__/split-button.context.js"),i=require("./multi-action-button.style.js"),l=require("../button/button.component.js"),u=require("../../__internal__/popover/popover.component.js");require("../../style/utils/filter-styled-system-padding-props.js");var s=require("../../style/utils/filter-styled-system-margin-props.js"),a=require("../../style/utils/filter-out-styled-system-spacing-props.js"),d=require("../../hooks/__internal__/useChildButtons/useChildButtons.js"),c=require("../../hooks/__internal__/useAdaptiveSidebarModalFocus/useAdaptiveSidebarModalFocus.js"),p=require("../flat-table/__internal__/flat-table.context.js"),f=require("../../__internal__/utils/helpers/guid/index.js");function b(e){return e&&e.__esModule?e:{default:e}}var y=b(t);function j(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function m(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){j(e,t,r[t])}))}return e}function O(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}const _=t.forwardRef(((b,j)=>{var{align:_="left",position:g="left",disabled:h,buttonType:v,size:w,children:x,text:P,subtext:q,width:k,onClick:S,"data-element":B,"data-role":C}=b,M=function(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}(b,["align","position","disabled","buttonType","size","children","text","subtext","width","onClick","data-element","data-role"]);const A=t.useRef(null),{isInFlatTable:D}=t.useContext(p.default),T=t.useRef(f.default());t.useImperativeHandle(j,(()=>({focusMainButton(){var e;null===(e=A.current)||void 0===e||e.focus({preventScroll:!0})}})),[]);const{showAdditionalButtons:I,showButtons:z,hideButtons:E,buttonNode:F,handleToggleButtonKeyDown:R,wrapperProps:K,contextValue:L}=d.default(A),H=n.default(E);c.default((()=>E()));const N=t.useMemo((()=>[r.offset(6),r.flip({fallbackStrategy:"initialPlacement"})]),[]);return e.jsxs(i.StyledMultiActionButton,O(m({ref:F,"data-component":"multi-action-button","data-element":B,"data-role":C,displayed:I,width:k},s.default(M)),{children:[e.jsx(l.default,O(m({"aria-expanded":I,"aria-controls":T.current,"data-element":"toggle-button",ref:A,iconPosition:"after",iconType:"dropdown",disabled:h,buttonType:v,size:w,subtext:q,onKeyDown:R,onClick:e=>{null==S||S(e),I?E():z(),H()}},a.default(M)),{children:P}),"toggle-button"),e.jsx(u.default,{isOpen:I,disableBackgroundUI:D&&I,disablePortal:!0,placement:"left"===g?"bottom-start":"bottom-end",reference:F,popoverStrategy:"fixed",middleware:N,children:e.jsx(i.StyledButtonChildrenContainer,O(m({id:T.current},K),{align:_,hidden:!I,children:e.jsx(o.default.Provider,{value:L,children:y.default.Children.map(x,(t=>e.jsx("li",{children:t})))})}))})]}))}));exports.MultiActionButton=_,exports.default=_;
@@ -42,8 +42,9 @@ export interface SelectListProps {
42
42
  listPlacement?: ListPlacement;
43
43
  /** Use the opposite list placement if the set placement does not fit */
44
44
  flipEnabled?: boolean;
45
- /** @private @ignore
46
- * Hides the list (with CSS display: none) if not set
45
+ /**
46
+ * @private @ignore
47
+ * Flag to determine if the list is open.
47
48
  */
48
49
  isOpen?: boolean;
49
50
  /** array of selected values, if rendered as part of a MultiSelect */
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),l=require("@floating-ui/dom"),r=require("@tanstack/react-virtual"),n=require("lodash/findLastIndex"),i=require("lodash/debounce"),o=require("../../../../hooks/__internal__/useScrollBlock/useScrollBlock.js"),a=require("../../../../hooks/__internal__/useModalManager/useModalManager.js"),s=require("./select-list.style.js"),u=require("../../../../__internal__/popover/popover.component.js"),c=require("../../option-row/option-row.component.js"),d=require("../utils/get-next-child-by-text.js"),f=require("../utils/get-next-index-by-key.js"),p=require("../utils/is-navigation-key.js"),b=require("../list-action-button/list-action-button.component.js"),v=require("../../../loader/loader.component.js"),m=require("../../option/option.component.js"),y=require("./select-list.context.js");function g(e){return e&&e.__esModule?e:{default:e}}var h=g(t),x=g(n),j=g(i);function O(e,t,l){return t in e?Object.defineProperty(e,t,{value:l,enumerable:!0,configurable:!0,writable:!0}):e[t]=l,e}function S(e){for(var t=1;t<arguments.length;t++){var l=null!=arguments[t]?arguments[t]:{},r=Object.keys(l);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(l).filter((function(e){return Object.getOwnPropertyDescriptor(l,e).enumerable})))),r.forEach((function(t){O(e,t,l[t])}))}return e}function E(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);t.push.apply(t,l)}return t}(Object(t)).forEach((function(l){Object.defineProperty(e,l,Object.getOwnPropertyDescriptor(t,l))})),e}const k={behavior:"auto",align:"end"},w=h.default.forwardRef(((n,i)=>{var{listMaxHeight:g=180,listActionButton:O,id:w,labelId:L,children:C,onSelect:P,onSelectListClose:q,filterText:T,anchorElement:_,highlightedValue:V,onListAction:M,isLoading:B,onListScrollBottom:I,multiColumn:H,tableHeader:R,listPlacement:A="bottom",flipEnabled:D=!0,isOpen:z,multiselectValues:W,enableVirtualScroll:K,virtualScrollOverscan:$=5,listWidth:F}=n,N=function(e,t){if(null==e)return{};var l,r,n=function(e,t){if(null==e)return{};var l,r,n={},i=Object.keys(e);for(r=0;r<i.length;r++)l=i[r],t.indexOf(l)>=0||(n[l]=e[l]);return n}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)l=i[r],t.indexOf(l)>=0||Object.prototype.propertyIsEnumerable.call(e,l)&&(n[l]=e[l])}return n}(n,["listMaxHeight","listActionButton","id","labelId","children","onSelect","onSelectListClose","filterText","anchorElement","highlightedValue","onListAction","isLoading","onListScrollBottom","multiColumn","tableHeader","listPlacement","flipEnabled","isOpen","multiselectValues","enableVirtualScroll","virtualScrollOverscan","listWidth"]);const[U,Y]=t.useState(-1),[G,J]=t.useState(0),Q=t.useRef(""),X=t.useRef(null),Z=t.useRef(null),ee=t.useRef(null),te=t.useRef(null),{blockScroll:le,allowScroll:re}=o.default(),ne=t.useRef(0),ie=K?$:h.default.Children.count(C),oe=r.useVirtualizer({count:h.default.Children.toArray(C).filter((e=>Boolean(e))).length,getScrollElement:()=>z?i.current:null,estimateSize:()=>40,overscan:ie,paddingStart:H?48:0,scrollPaddingEnd:ne.current,rangeExtractor:e=>{const t=r.defaultRangeExtractor(e);return-1===U||t.includes(U)||t.push(U),t}});t.useEffect((()=>{if(!z)return;const e=U>-1?U:0;oe.scrollToIndex(e,k)}),[U,z,oe]);const ae=oe.getVirtualItems(),se=t.useMemo((()=>h.default.Children.toArray(C)),[C]),ue=t.useCallback((e=>se.findIndex((t=>{return t.props.value&&"object"==typeof e?(l=t.props.value,r=e,Object.keys(l).every((e=>l[e]===r[e]))):h.default.isValidElement(t)&&t.props.value===e;var l,r}))),[se]);if(0===ae.length){const e=V?ue(V):U;e>-1&&ae.push({index:e})}const ce=oe.getTotalSize(),de=0===ce?1:ce;t.useEffect((()=>(z&&le(),()=>{z&&re()})),[re,le,z]),t.useLayoutEffect((()=>{H&&J(Z.current?Z.current.offsetWidth-Z.current.clientWidth:0)}),[H]);const fe=t.useMemo((()=>({current:_||null})),[_]),pe=t.useCallback((e=>{var t,l,r;P({id:null!==(t=e.id)&&void 0!==t?t:"",text:null!==(l=e.text)&&void 0!==l?l:"",value:null!==(r=e.value)&&void 0!==r?r:"",selectionType:"click",selectionConfirmed:!0})}),[P]),be=t.useRef(Array.from({length:h.default.Children.count(C)})),ve=t.useMemo((()=>se.filter((e=>h.default.isValidElement(e)&&(e.type===m.default||e.type===c.default)))),[se]),{measureElement:me}=oe,ye=ae.filter((e=>void 0!==e)).map((({index:e,start:t})=>{const l=se[e],r=ve.indexOf(l),n=r>-1,i={index:e,onSelect:pe,hidden:B&&1===se.length,style:{transform:`translateY(${t}px)`},"aria-setsize":n?ve.length:void 0,"aria-posinset":n?r+1:void 0,ref:t=>{z&&me(t),be.current[e]=t},"data-index":e};return void 0!==l?h.default.cloneElement(l,i):null})).filter((e=>null!==e)),ge=x.default(se,(e=>h.default.isValidElement(e)&&(e.type===m.default||e.type===c.default))),he=t.useCallback(((e,t)=>{const l=ge;if(-1===l)return-1;let r=f.default(e,t,l,B);const n=se[r];return(h.default.isValidElement(n)&&n.type!==m.default&&n.type!==c.default||n.props.disabled)&&(r=he(e,r)),r}),[se,ge,B]),xe=t.useCallback((e=>{var t;let l=U;V&&(l=ue(V));const r=he(e,l);if(-1===r||l===r)return;const{text:n,value:i}=se[r].props;P({id:null===(t=be.current[r])||void 0===t?void 0:t.id,text:null!=n?n:"",value:null!=i?i:"",selectionType:"navigationKey",selectionConfirmed:!1})}),[se,U,ue,he,V,P]),je=t.useCallback(((e,t)=>{var l;t?q():(e.preventDefault(),null===(l=te.current)||void 0===l||l.focus())}),[q]),Oe=t.useCallback((()=>{_&&_.getElementsByTagName("input")[0].focus()}),[_]),Se=t.useCallback((e=>{if(!z)return;const{key:t}=e,l=document.activeElement===te.current;if("Tab"===t&&O)je(e,l);else if("Tab"===t)q();else if("Enter"!==t||l)p.default(t)&&(Oe(),xe(t));else{var r;e.preventDefault();const t=se[U];if(!h.default.isValidElement(t))return q(),void P({id:"",text:"",value:"",selectionType:"enterKey",selectionConfirmed:!1});if(t.props.disabled)return;const{text:l,value:n}=t.props;P({id:null===(r=be.current[U])||void 0===r?void 0:r.id,text:null!=l?l:"",value:null!=n?n:"",selectionType:"enterKey",selectionConfirmed:!0})}}),[se,O,je,q,U,P,xe,Oe,z]),Ee=t.useCallback((e=>{"Escape"===e.key&&q()}),[q]);a.default({open:!!z,closeModal:Ee,modalRef:X,triggerRefocusOnClose:!1}),t.useEffect((()=>{const e=i.current,t=j.default((e=>{const t=e.target;z&&t.scrollHeight-t.scrollTop===t.clientHeight&&(null==I||I())}),300);return null==e||e.addEventListener("scroll",t),()=>{null==e||e.removeEventListener("scroll",t)}}),[z,i,I]),t.useEffect((()=>(window.addEventListener("keydown",Se),function(){window.removeEventListener("keydown",Se)})),[Se,i]),t.useEffect((()=>{T&&T!==Q.current?(Q.current=T,Y((e=>{const t=d.default(T,se,e);if(!t)return-1;const l=ue(t.props.value);return oe.scrollToIndex(l,k),l}))):Q.current=T||""}),[se,T,ue,oe]),t.useEffect((()=>{if(!(V&&0!==Object.keys(V).length||z))return void Y(-1);const e=ue(V);-1!==e&&Y(e)}),[ue,V,z]),t.useEffect((()=>{B&&U===ge&&ge>-1&&oe.scrollToIndex(ge,E(S({},k),{align:"start"}))}),[C,U,B,ge,i,oe]);const ke=t.useMemo((()=>[l.offset(3),l.size({apply({rects:e,elements:t}){Object.assign(t.floating.style,{width:`${null!=F?F:e.reference.width}px`})}}),...D?[l.flip({fallbackStrategy:"initialPlacement"})]:[]]),[F,D]),we=B?e.jsx(s.StyledSelectLoaderContainer,{children:e.jsx(v.Loader,{"data-role":"select-list-loader"})},"loader"):void 0;let Le=ye;const Ce={role:"listbox",id:w,"aria-labelledby":L,"aria-multiselectable":!!W||void 0};return t.useLayoutEffect((()=>{var e,t;O&&z&&(ne.current=(null===(t=te.current)||void 0===t||null===(e=t.parentElement)||void 0===e?void 0:e.offsetHeight)||0)}),[O,z]),H&&(Le=e.jsxs(s.StyledSelectListTable,{children:[e.jsx(s.StyledSelectListTableHeader,{scrollbarWidth:G,children:R}),e.jsx(s.StyledSelectListTableBody,E(S({},Ce),{"aria-labelledby":L,ref:Z,listHeight:de-48,children:ye}))]})),e.jsx(y.default.Provider,{value:{currentOptionsListIndex:U,multiselectValues:W},children:e.jsx(u.default,{placement:A,disablePortal:!0,reference:fe,middleware:ke,isOpen:z,disableBackgroundUI:!0,animationFrame:!0,children:e.jsxs(s.StyledSelectListContainer,E(S({ref:ee,"data-element":"select-list-wrapper","data-role":"select-list-wrapper",isLoading:B},N),{children:[e.jsxs(s.StyledScrollableContainer,{ref:i,maxHeight:g,"data-component":"select-list-scrollable-container","data-element":"select-list-scrollable-container","data-role":"select-list-scrollable-container",hasActionButton:!!O,children:[e.jsx(s.StyledSelectList,E(S({as:H?"div":"ul","data-element":"select-list"},H?{}:Ce),{ref:X,tabIndex:-1,listHeight:H?void 0:de,children:Le})),we]}),O&&e.jsx(b.default,{ref:te,listActionButton:O,onListAction:M})]}))})})}));exports.default=w;
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),l=require("@floating-ui/dom"),r=require("@tanstack/react-virtual"),n=require("lodash/findLastIndex"),i=require("lodash/debounce"),o=require("../../../../hooks/__internal__/useScrollBlock/useScrollBlock.js"),a=require("../../../../hooks/__internal__/useModalManager/useModalManager.js"),s=require("./select-list.style.js"),u=require("../../../../__internal__/popover/popover.component.js"),c=require("../../option-row/option-row.component.js"),d=require("../utils/get-next-child-by-text.js"),f=require("../utils/get-next-index-by-key.js"),p=require("../utils/is-navigation-key.js"),b=require("../list-action-button/list-action-button.component.js"),v=require("../../../loader/loader.component.js"),m=require("../../option/option.component.js"),y=require("./select-list.context.js");function h(e){return e&&e.__esModule?e:{default:e}}var g=h(t),x=h(n),j=h(i);function O(e,t,l){return t in e?Object.defineProperty(e,t,{value:l,enumerable:!0,configurable:!0,writable:!0}):e[t]=l,e}function S(e){for(var t=1;t<arguments.length;t++){var l=null!=arguments[t]?arguments[t]:{},r=Object.keys(l);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(l).filter((function(e){return Object.getOwnPropertyDescriptor(l,e).enumerable})))),r.forEach((function(t){O(e,t,l[t])}))}return e}function E(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);t.push.apply(t,l)}return t}(Object(t)).forEach((function(l){Object.defineProperty(e,l,Object.getOwnPropertyDescriptor(t,l))})),e}const k={behavior:"auto",align:"end"},w=g.default.forwardRef(((n,i)=>{var{listMaxHeight:h=180,listActionButton:O,id:w,labelId:L,children:C,onSelect:P,onSelectListClose:q,filterText:T,anchorElement:_,highlightedValue:V,onListAction:M,isLoading:B,onListScrollBottom:I,multiColumn:H,tableHeader:R,listPlacement:A="bottom",flipEnabled:D=!0,isOpen:z,multiselectValues:W,enableVirtualScroll:K,virtualScrollOverscan:$=5,listWidth:F}=n,N=function(e,t){if(null==e)return{};var l,r,n=function(e,t){if(null==e)return{};var l,r,n={},i=Object.keys(e);for(r=0;r<i.length;r++)l=i[r],t.indexOf(l)>=0||(n[l]=e[l]);return n}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)l=i[r],t.indexOf(l)>=0||Object.prototype.propertyIsEnumerable.call(e,l)&&(n[l]=e[l])}return n}(n,["listMaxHeight","listActionButton","id","labelId","children","onSelect","onSelectListClose","filterText","anchorElement","highlightedValue","onListAction","isLoading","onListScrollBottom","multiColumn","tableHeader","listPlacement","flipEnabled","isOpen","multiselectValues","enableVirtualScroll","virtualScrollOverscan","listWidth"]);const[U,Y]=t.useState(-1),[G,J]=t.useState(0),Q=t.useRef(""),X=t.useRef(null),Z=t.useRef(null),ee=t.useRef(null),te=t.useRef(null),{blockScroll:le,allowScroll:re}=o.default(),ne=t.useRef(0),ie=K?$:g.default.Children.count(C),oe=r.useVirtualizer({count:g.default.Children.toArray(C).filter((e=>Boolean(e))).length,getScrollElement:()=>z?i.current:null,estimateSize:()=>40,overscan:ie,paddingStart:H?48:0,scrollPaddingEnd:ne.current,rangeExtractor:e=>{const t=r.defaultRangeExtractor(e);return-1===U||t.includes(U)||t.push(U),t}});t.useEffect((()=>{if(!z)return;const e=U>-1?U:0;oe.scrollToIndex(e,k)}),[U,z,oe]);const ae=oe.getVirtualItems(),se=t.useMemo((()=>g.default.Children.toArray(C)),[C]),ue=t.useCallback((e=>se.findIndex((t=>{return t.props.value&&"object"==typeof e?(l=t.props.value,r=e,Object.keys(l).every((e=>l[e]===r[e]))):g.default.isValidElement(t)&&t.props.value===e;var l,r}))),[se]);if(0===ae.length){const e=V?ue(V):U;e>-1&&ae.push({index:e})}const ce=oe.getTotalSize(),de=0===ce?1:ce;t.useEffect((()=>(z&&le(),()=>{z&&re()})),[re,le,z]),t.useLayoutEffect((()=>{H&&J(Z.current?Z.current.offsetWidth-Z.current.clientWidth:0)}),[H]);const fe=t.useMemo((()=>({current:_||null})),[_]),pe=t.useCallback((e=>{var t,l,r;P({id:null!==(t=e.id)&&void 0!==t?t:"",text:null!==(l=e.text)&&void 0!==l?l:"",value:null!==(r=e.value)&&void 0!==r?r:"",selectionType:"click",selectionConfirmed:!0})}),[P]),be=t.useRef(Array.from({length:g.default.Children.count(C)})),ve=t.useMemo((()=>se.filter((e=>g.default.isValidElement(e)&&(e.type===m.default||e.type===c.default)))),[se]),{measureElement:me}=oe,ye=ae.filter((e=>void 0!==e)).map((({index:e,start:t})=>{const l=se[e],r=ve.indexOf(l),n=r>-1,i={index:e,onSelect:pe,hidden:B&&1===se.length,style:{transform:`translateY(${t}px)`},"aria-setsize":n?ve.length:void 0,"aria-posinset":n?r+1:void 0,ref:t=>{z&&me(t),be.current[e]=t},"data-index":e};return void 0!==l?g.default.cloneElement(l,i):null})).filter((e=>null!==e)),he=x.default(se,(e=>g.default.isValidElement(e)&&(e.type===m.default||e.type===c.default))),ge=t.useCallback(((e,t)=>{const l=he;if(-1===l)return-1;let r=f.default(e,t,l,B);const n=se[r];return(g.default.isValidElement(n)&&n.type!==m.default&&n.type!==c.default||n.props.disabled)&&(r=ge(e,r)),r}),[se,he,B]),xe=t.useCallback((e=>{var t;let l=U;V&&(l=ue(V));const r=ge(e,l);if(-1===r||l===r)return;const{text:n,value:i}=se[r].props;P({id:null===(t=be.current[r])||void 0===t?void 0:t.id,text:null!=n?n:"",value:null!=i?i:"",selectionType:"navigationKey",selectionConfirmed:!1})}),[se,U,ue,ge,V,P]),je=t.useCallback(((e,t)=>{var l;t?q():(e.preventDefault(),null===(l=te.current)||void 0===l||l.focus())}),[q]),Oe=t.useCallback((()=>{_&&_.getElementsByTagName("input")[0].focus()}),[_]),Se=t.useCallback((e=>{if(!z)return;const{key:t}=e,l=document.activeElement===te.current;if("Tab"===t&&O)je(e,l);else if("Tab"===t)q();else if("Enter"!==t||l)p.default(t)&&(Oe(),xe(t));else{var r;e.preventDefault();const t=se[U];if(!g.default.isValidElement(t))return q(),void P({id:"",text:"",value:"",selectionType:"enterKey",selectionConfirmed:!1});if(t.props.disabled)return;const{text:l,value:n}=t.props;P({id:null===(r=be.current[U])||void 0===r?void 0:r.id,text:null!=l?l:"",value:null!=n?n:"",selectionType:"enterKey",selectionConfirmed:!0})}}),[se,O,je,q,U,P,xe,Oe,z]),Ee=t.useCallback((e=>{"Escape"===e.key&&q()}),[q]);a.default({open:!!z,closeModal:Ee,modalRef:X,triggerRefocusOnClose:!1}),t.useEffect((()=>{const e=i.current,t=j.default((e=>{const t=e.target;z&&t.scrollHeight-t.scrollTop===t.clientHeight&&(null==I||I())}),300);return null==e||e.addEventListener("scroll",t),()=>{null==e||e.removeEventListener("scroll",t)}}),[z,i,I]),t.useEffect((()=>(window.addEventListener("keydown",Se),function(){window.removeEventListener("keydown",Se)})),[Se,i]),t.useEffect((()=>{T&&T!==Q.current?(Q.current=T,Y((e=>{const t=d.default(T,se,e);if(!t)return-1;const l=ue(t.props.value);return oe.scrollToIndex(l,k),l}))):Q.current=T||""}),[se,T,ue,oe]),t.useEffect((()=>{if(!(V&&0!==Object.keys(V).length||z))return void Y(-1);const e=ue(V);-1!==e&&Y(e)}),[ue,V,z]),t.useEffect((()=>{B&&U===he&&he>-1&&oe.scrollToIndex(he,E(S({},k),{align:"start"}))}),[C,U,B,he,i,oe]);const ke=t.useMemo((()=>[l.offset(3),l.size({apply({rects:e,elements:t}){Object.assign(t.floating.style,{width:`${null!=F?F:e.reference.width}px`})}}),...D?[l.flip({fallbackStrategy:"initialPlacement"})]:[]]),[F,D]),we=B?e.jsx(s.StyledSelectLoaderContainer,{children:e.jsx(v.Loader,{"data-role":"select-list-loader"})},"loader"):void 0;let Le=ye;const Ce={role:"listbox",id:w,"aria-labelledby":L,"aria-multiselectable":!!W||void 0};return t.useLayoutEffect((()=>{var e,t;O&&z&&(ne.current=(null===(t=te.current)||void 0===t||null===(e=t.parentElement)||void 0===e?void 0:e.offsetHeight)||0)}),[O,z]),H&&(Le=e.jsxs(s.StyledSelectListTable,{children:[e.jsx(s.StyledSelectListTableHeader,{scrollbarWidth:G,children:R}),e.jsx(s.StyledSelectListTableBody,E(S({},Ce),{"aria-labelledby":L,ref:Z,listHeight:de-48,children:ye}))]})),e.jsx(y.default.Provider,{value:{currentOptionsListIndex:U,multiselectValues:W},children:e.jsx(u.default,{placement:A,disablePortal:!0,reference:fe,middleware:ke,isOpen:z,hide:!z,disableBackgroundUI:!0,animationFrame:!0,children:e.jsxs(s.StyledSelectListContainer,E(S({ref:ee,"data-element":"select-list-wrapper","data-role":"select-list-wrapper",isLoading:B},N),{children:[e.jsxs(s.StyledScrollableContainer,{ref:i,maxHeight:h,"data-component":"select-list-scrollable-container","data-element":"select-list-scrollable-container","data-role":"select-list-scrollable-container",hasActionButton:!!O,children:[e.jsx(s.StyledSelectList,E(S({as:H?"div":"ul","data-element":"select-list"},H?{}:Ce),{ref:X,tabIndex:-1,listHeight:H?void 0:de,children:Le})),we]}),O&&e.jsx(b.default,{ref:te,listActionButton:O,onListAction:M})]}))})})}));exports.default=w;
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("styled-components"),n=require("@floating-ui/dom"),o=require("../../hooks/__internal__/useClickAwayListener/useClickAwayListener.js"),i=require("../icon/icon.component.js"),l=require("../button/button.component.js"),s=require("./split-button.style.js"),a=require("./split-button-toggle.style.js"),u=require("./split-button-children.style.js"),c=require("../../__internal__/utils/helpers/guid/index.js"),d=require("../../__internal__/popover/popover.component.js");require("../../style/utils/filter-styled-system-padding-props.js");var p=require("../../style/utils/filter-styled-system-margin-props.js"),f=require("../../style/utils/filter-out-styled-system-spacing-props.js");require("../../style/themes/sage/index.js");var b=require("../../style/themes/base/index.js");require("../../style/themes/none/index.js");var y=require("../../hooks/__internal__/useChildButtons/useChildButtons.js"),j=require("../../hooks/__internal__/useAdaptiveSidebarModalFocus/useAdaptiveSidebarModalFocus.js"),m=require("./__internal__/split-button.context.js"),g=require("../../hooks/__internal__/useLocale/useLocale.js"),h=require("../flat-table/__internal__/flat-table.context.js");function _(e){return e&&e.__esModule?e:{default:e}}var x=_(t);function O(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function v(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){O(e,t,r[t])}))}return e}function q(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}const w=t.forwardRef(((_,O)=>{var{align:w="left",position:P="right",buttonType:k="secondary",children:C,disabled:T=!1,iconPosition:B="before",iconType:S,onClick:L,size:E="medium",subtext:D,text:M,"data-element":A,"data-role":R,"aria-label":z,isWhite:F=!1}=_,I=function(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}(_,["align","position","buttonType","children","disabled","iconPosition","iconType","onClick","size","subtext","text","data-element","data-role","aria-label","isWhite"]);const W=g.default(),H=t.useContext(r.ThemeContext)||b.default,K=t.useRef(c.default()),N=t.useRef(c.default()),U=t.useRef(null),V=t.useRef(null),{isInFlatTable:G}=t.useContext(h.default),J="secondary"===k&&F;t.useImperativeHandle(O,(()=>({focusMainButton(){var e;null===(e=U.current)||void 0===e||e.focus()},focusToggleButton(){var e;null===(e=V.current)||void 0===e||e.focus()}})),[]);const{showAdditionalButtons:Q,showButtons:X,hideButtons:Y,buttonNode:Z,handleToggleButtonKeyDown:$,wrapperProps:ee,contextValue:te}=y.default(V,.75);t.useEffect((()=>{if(!G)return;const e=e=>{e.target instanceof HTMLElement&&"popup-backdrop"===e.target.dataset.role&&Q&&Y()};return document.addEventListener("click",e),()=>{document.removeEventListener("click",e)}}),[Y,G,Q]);return j.default((()=>Y())),e.jsxs(s.default,q(v({"data-component":"split-button","data-element":A,"data-role":R,onClick:o.default(Y),ref:Z},p.default(I)),{children:[e.jsxs(e.Fragment,{children:[e.jsx(l.default,q(v({"data-element":"main-button",id:K.current,ref:U,isWhite:J,subtext:D,size:E,iconType:S,disabled:T,buttonType:k,iconPosition:B,onClick:e=>{null==L||L(e),Q&&Y()}},f.default(I)),{children:M}),"main-button"),e.jsx(a.default,{"aria-expanded":Q,"aria-controls":N.current,"aria-label":z||W.splitButton.ariaLabel(),"data-element":"toggle-button",type:"button",ref:V,isWhite:J,disabled:T,displayed:Q,buttonType:k,size:E,onKeyDown:$,onClick:()=>{Q?Y():X()},children:e.jsx(i.default,{type:"dropdown",color:{primary:H.colors.white,secondary:H.colors.primary}[k],bg:"transparent",disabled:T})},"toggle-button")]}),e.jsx(d.default,{disableBackgroundUI:G&&Q,disablePortal:!0,placement:"left"===P?"bottom-start":"bottom-end",popoverStrategy:"fixed",reference:Z,middleware:[n.offset(6),n.flip({fallbackStrategy:"initialPlacement"})],children:e.jsx(u.default,q(v({"data-role":"split-button-children-container",id:N.current},ee),{align:w,hidden:!Q,children:e.jsx(m.default.Provider,{value:te,children:x.default.Children.map(C,(t=>e.jsx("li",{children:t})))})}))})]}))}));exports.SplitButton=w,exports.default=w;
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("styled-components"),n=require("@floating-ui/dom"),o=require("../../hooks/__internal__/useClickAwayListener/useClickAwayListener.js"),i=require("../icon/icon.component.js"),l=require("../button/button.component.js"),s=require("./split-button.style.js"),a=require("./split-button-toggle.style.js"),u=require("./split-button-children.style.js"),c=require("../../__internal__/utils/helpers/guid/index.js"),d=require("../../__internal__/popover/popover.component.js");require("../../style/utils/filter-styled-system-padding-props.js");var p=require("../../style/utils/filter-styled-system-margin-props.js"),f=require("../../style/utils/filter-out-styled-system-spacing-props.js");require("../../style/themes/sage/index.js");var b=require("../../style/themes/base/index.js");require("../../style/themes/none/index.js");var y=require("../../hooks/__internal__/useChildButtons/useChildButtons.js"),j=require("../../hooks/__internal__/useAdaptiveSidebarModalFocus/useAdaptiveSidebarModalFocus.js"),m=require("./__internal__/split-button.context.js"),g=require("../../hooks/__internal__/useLocale/useLocale.js"),h=require("../flat-table/__internal__/flat-table.context.js");function _(e){return e&&e.__esModule?e:{default:e}}var x=_(t);function O(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function v(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){O(e,t,r[t])}))}return e}function q(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}const w=t.forwardRef(((_,O)=>{var{align:w="left",position:P="right",buttonType:k="secondary",children:C,disabled:T=!1,iconPosition:B="before",iconType:S,onClick:L,size:E="medium",subtext:M,text:D,"data-element":A,"data-role":R,"aria-label":z,isWhite:F=!1}=_,I=function(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}(_,["align","position","buttonType","children","disabled","iconPosition","iconType","onClick","size","subtext","text","data-element","data-role","aria-label","isWhite"]);const W=g.default(),H=t.useContext(r.ThemeContext)||b.default,K=t.useRef(c.default()),N=t.useRef(c.default()),U=t.useRef(null),V=t.useRef(null),{isInFlatTable:G}=t.useContext(h.default),J="secondary"===k&&F;t.useImperativeHandle(O,(()=>({focusMainButton(){var e;null===(e=U.current)||void 0===e||e.focus()},focusToggleButton(){var e;null===(e=V.current)||void 0===e||e.focus()}})),[]);const{showAdditionalButtons:Q,showButtons:X,hideButtons:Y,buttonNode:Z,handleToggleButtonKeyDown:$,wrapperProps:ee,contextValue:te}=y.default(V,.75);t.useEffect((()=>{if(!G)return;const e=e=>{e.target instanceof HTMLElement&&"popup-backdrop"===e.target.dataset.role&&Q&&Y()};return document.addEventListener("click",e),()=>{document.removeEventListener("click",e)}}),[Y,G,Q]);j.default((()=>Y()));const re=t.useMemo((()=>[n.offset(6),n.flip({fallbackStrategy:"initialPlacement"})]),[]);return e.jsxs(s.default,q(v({"data-component":"split-button","data-element":A,"data-role":R,onClick:o.default(Y),ref:Z},p.default(I)),{children:[e.jsxs(e.Fragment,{children:[e.jsx(l.default,q(v({"data-element":"main-button",id:K.current,ref:U,isWhite:J,subtext:M,size:E,iconType:S,disabled:T,buttonType:k,iconPosition:B,onClick:e=>{null==L||L(e),Q&&Y()}},f.default(I)),{children:D}),"main-button"),e.jsx(a.default,{"aria-expanded":Q,"aria-controls":N.current,"aria-label":z||W.splitButton.ariaLabel(),"data-element":"toggle-button",type:"button",ref:V,isWhite:J,disabled:T,displayed:Q,buttonType:k,size:E,onKeyDown:$,onClick:()=>{Q?Y():X()},children:e.jsx(i.default,{type:"dropdown",color:{primary:H.colors.white,secondary:H.colors.primary}[k],bg:"transparent",disabled:T})},"toggle-button")]}),e.jsx(d.default,{isOpen:Q,disableBackgroundUI:G&&Q,disablePortal:!0,placement:"left"===P?"bottom-start":"bottom-end",popoverStrategy:"fixed",reference:Z,middleware:re,children:e.jsx(u.default,q(v({"data-role":"split-button-children-container",id:N.current},ee),{align:w,hidden:!Q,children:e.jsx(m.default.Provider,{value:te,children:x.default.Children.map(C,(t=>e.jsx("li",{children:t})))})}))})]}))}));exports.SplitButton=w,exports.default=w;
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("./accordion.style.js"),n=require("../../../../hooks/__internal__/useResizeObserver/useResizeObserver.js");exports.default=({children:o,expanded:l,contentId:c,controlId:i})=>{const[a,s]=t.useState(0),d=t.useRef(null);return n.default(d,(()=>{d.current&&s(d.current.scrollHeight)})),e.jsx(r.StyledContentContainer,{isExpanded:l,maxHeight:a,"data-role":"tile-select-accordion-content-container",children:e.jsx(r.StyledContent,{role:"region","data-element":"tile-select-accordion-content","data-role":"tile-select-accordion-content",ref:d,id:c,"aria-labelledby":i,children:o})})};
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("./accordion.style.js"),n=require("../../../../hooks/__internal__/useResizeObserver/useResizeObserver.js"),o=require("../../../../hooks/useMediaQuery/useMediaQuery.js");exports.default=({children:i,expanded:l,contentId:s,controlId:c})=>{const[a,d]=r.useState(0),u=r.useRef(null),f=o.default("screen and (prefers-reduced-motion: no-preference)");return n.default(u,(()=>{u.current&&d(u.current.scrollHeight)})),e.jsx(t.StyledContentContainer,{$isExpanded:l,$height:a,$allowMotion:f,"data-role":"tile-select-accordion-content-container",children:e.jsx(t.StyledContent,{role:"region","data-element":"tile-select-accordion-content","data-role":"tile-select-accordion-content",ref:u,id:s,"aria-labelledby":c,children:i})})};
@@ -1,3 +1,3 @@
1
- declare const StyledContentContainer: import("styled-components").StyledComponent<"div", any, import("../../../accordion/accordion.style").StyledAccordionContentContainerProps, never>;
2
- declare const StyledContent: import("styled-components").StyledComponent<"div", any, import("../../../accordion/accordion.style").StyledAccordionContentProps, never>;
1
+ declare const StyledContentContainer: import("styled-components").StyledComponent<"div", any, import("../../../accordion/accordion.style").StyledAccordionProps, never>;
2
+ declare const StyledContent: import("styled-components").StyledComponent<"div", any, import("../../../accordion/accordion.style").StyledAccordionProps, never>;
3
3
  export { StyledContentContainer, StyledContent };
@@ -1 +1 @@
1
- "use strict";var o=require("styled-components"),t=require("../../../accordion/accordion.style.js");function n(o){return o&&o.__esModule?o:{default:o}}var e=n(o);const c=e.default(t.StyledAccordionContentContainer).withConfig({displayName:"accordion.style__StyledContentContainer",componentId:"sc-fa18ab9c-0"})(["background-color:var(--colorsActionMinor050);"]),i=e.default(t.StyledAccordionContent).withConfig({displayName:"accordion.style__StyledContent",componentId:"sc-fa18ab9c-1"})(["padding:24px;position:relative;z-index:200;"]);exports.StyledContent=i,exports.StyledContentContainer=c;
1
+ "use strict";var o=require("styled-components"),t=require("../../../accordion/accordion.style.js");function e(o){return o&&o.__esModule?o:{default:o}}var n=e(o);const d=n.default(t.StyledAccordionContentContainer).withConfig({displayName:"accordion.style__StyledContentContainer",componentId:"sc-80dffb5e-0"})(["background-color:var(--colorsActionMinor050);opacity:1;"]),i=n.default(t.StyledAccordionContent).withConfig({displayName:"accordion.style__StyledContent",componentId:"sc-80dffb5e-1"})(["padding:24px;position:relative;z-index:200;"]);exports.StyledContent=i,exports.StyledContentContainer=d;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "carbon-react",
3
- "version": "158.41.1",
3
+ "version": "158.42.0",
4
4
  "description": "A library of reusable React components for easily building user interfaces.",
5
5
  "files": [
6
6
  "lib",