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.
- package/esm/__internal__/popover/popover.component.d.ts +5 -1
- package/esm/__internal__/popover/popover.component.js +1 -1
- package/esm/__internal__/popover/popover.style.d.ts +1 -1
- package/esm/__internal__/popover/popover.style.js +1 -1
- package/esm/components/accordion/accordion-group/accordion-group.component.d.ts +3 -0
- package/esm/components/accordion/accordion-group/accordion-group.component.js +1 -1
- package/esm/components/accordion/accordion.component.d.ts +52 -21
- package/esm/components/accordion/accordion.component.js +1 -1
- package/esm/components/accordion/accordion.style.d.ts +22 -46
- package/esm/components/accordion/accordion.style.js +1 -1
- package/esm/components/button/__next__/button.style.js +1 -1
- package/esm/components/multi-action-button/multi-action-button.component.js +1 -1
- package/esm/components/select/__internal__/select-list/select-list.component.d.ts +3 -2
- package/esm/components/select/__internal__/select-list/select-list.component.js +1 -1
- package/esm/components/split-button/split-button.component.js +1 -1
- package/esm/components/tile-select/__internal__/accordion/accordion.component.js +1 -1
- package/esm/components/tile-select/__internal__/accordion/accordion.style.d.ts +2 -2
- package/esm/components/tile-select/__internal__/accordion/accordion.style.js +1 -1
- package/lib/__internal__/popover/popover.component.d.ts +5 -1
- package/lib/__internal__/popover/popover.component.js +1 -1
- package/lib/__internal__/popover/popover.style.d.ts +1 -1
- package/lib/__internal__/popover/popover.style.js +1 -1
- package/lib/components/accordion/accordion-group/accordion-group.component.d.ts +3 -0
- package/lib/components/accordion/accordion-group/accordion-group.component.js +1 -1
- package/lib/components/accordion/accordion.component.d.ts +52 -21
- package/lib/components/accordion/accordion.component.js +1 -1
- package/lib/components/accordion/accordion.style.d.ts +22 -46
- package/lib/components/accordion/accordion.style.js +1 -1
- package/lib/components/button/__next__/button.style.js +1 -1
- package/lib/components/multi-action-button/multi-action-button.component.js +1 -1
- package/lib/components/select/__internal__/select-list/select-list.component.d.ts +3 -2
- package/lib/components/select/__internal__/select-list/select-list.component.js +1 -1
- package/lib/components/split-button/split-button.component.js +1 -1
- package/lib/components/tile-select/__internal__/accordion/accordion.component.js +1 -1
- package/lib/components/tile-select/__internal__/accordion/accordion.style.d.ts +2 -2
- package/lib/components/tile-select/__internal__/accordion/accordion.style.js +1 -1
- package/package.json +1 -1
|
@@ -27,9 +27,13 @@ export interface PopoverProps {
|
|
|
27
27
|
*/
|
|
28
28
|
reference: RefObject<HTMLElement>;
|
|
29
29
|
/**
|
|
30
|
-
*
|
|
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,
|
|
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
|
-
|
|
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-
|
|
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
|
|
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
|
-
|
|
5
|
-
|
|
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
|
|
8
|
+
/** Set the default state of expansion of the Accordion if component is to be used as uncontrolled */
|
|
9
9
|
defaultExpanded?: boolean;
|
|
10
|
-
/**
|
|
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
|
|
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
|
-
|
|
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
|
-
/**
|
|
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
|
-
/**
|
|
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
|
|
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
|
-
|
|
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
|
|
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
|
-
} &
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
}
|
|
19
|
-
declare const
|
|
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
|
-
} &
|
|
40
|
-
export
|
|
41
|
-
|
|
42
|
-
|
|
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
|
|
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-
|
|
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
|
|
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
|
-
/**
|
|
46
|
-
*
|
|
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
|
|
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
|
|
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
|
|
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").
|
|
2
|
-
declare const StyledContent: import("styled-components").StyledComponent<"div", any, import("../../../accordion/accordion.style").
|
|
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
|
|
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
|
-
*
|
|
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"),
|
|
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
|
-
|
|
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
|
|
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
|
|
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
|
-
|
|
5
|
-
|
|
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
|
|
8
|
+
/** Set the default state of expansion of the Accordion if component is to be used as uncontrolled */
|
|
9
9
|
defaultExpanded?: boolean;
|
|
10
|
-
/**
|
|
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
|
|
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
|
-
|
|
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
|
-
/**
|
|
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
|
-
/**
|
|
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"),
|
|
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
|
-
|
|
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
|
|
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
|
-
} &
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
}
|
|
19
|
-
declare const
|
|
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
|
-
} &
|
|
40
|
-
export
|
|
41
|
-
|
|
42
|
-
|
|
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
|
|
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"),
|
|
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
|
|
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
|
-
/**
|
|
46
|
-
*
|
|
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
|
|
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:
|
|
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"),
|
|
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").
|
|
2
|
-
declare const StyledContent: import("styled-components").StyledComponent<"div", any, import("../../../accordion/accordion.style").
|
|
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
|
|
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;
|