carbon-react 159.11.1 → 159.12.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (35) hide show
  1. package/esm/components/button-toggle/button-toggle-group/__internal__/button-toggle-group.context.d.ts +2 -2
  2. package/esm/components/button-toggle/button-toggle-group/__internal__/button-toggle-group.context.js +1 -1
  3. package/esm/components/button-toggle/button-toggle-group/button-toggle-group.component.d.ts +36 -13
  4. package/esm/components/button-toggle/button-toggle-group/button-toggle-group.component.js +1 -1
  5. package/esm/components/button-toggle/button-toggle-group/button-toggle-group.style.d.ts +15 -7
  6. package/esm/components/button-toggle/button-toggle-group/button-toggle-group.style.js +1 -1
  7. package/esm/components/button-toggle/button-toggle.component.d.ts +20 -7
  8. package/esm/components/button-toggle/button-toggle.component.js +1 -1
  9. package/esm/components/button-toggle/button-toggle.style.d.ts +6 -36
  10. package/esm/components/button-toggle/button-toggle.style.js +1 -1
  11. package/esm/components/icon/icon.style.js +1 -1
  12. package/esm/components/loader/__next__/internal/star.style.js +1 -1
  13. package/esm/components/loader/__next__/loader.style.js +1 -1
  14. package/esm/components/select/multi-select/multi-select.component.js +1 -1
  15. package/esm/components/time/__internal__/time-toggle/time-toggle.component.js +1 -1
  16. package/lib/components/button-toggle/button-toggle-group/__internal__/button-toggle-group.context.d.ts +2 -2
  17. package/lib/components/button-toggle/button-toggle-group/__internal__/button-toggle-group.context.js +1 -1
  18. package/lib/components/button-toggle/button-toggle-group/button-toggle-group.component.d.ts +36 -13
  19. package/lib/components/button-toggle/button-toggle-group/button-toggle-group.component.js +1 -1
  20. package/lib/components/button-toggle/button-toggle-group/button-toggle-group.style.d.ts +15 -7
  21. package/lib/components/button-toggle/button-toggle-group/button-toggle-group.style.js +1 -1
  22. package/lib/components/button-toggle/button-toggle.component.d.ts +20 -7
  23. package/lib/components/button-toggle/button-toggle.component.js +1 -1
  24. package/lib/components/button-toggle/button-toggle.style.d.ts +6 -36
  25. package/lib/components/button-toggle/button-toggle.style.js +1 -1
  26. package/lib/components/icon/icon.style.js +1 -1
  27. package/lib/components/loader/__next__/internal/star.style.js +1 -1
  28. package/lib/components/loader/__next__/loader.style.js +1 -1
  29. package/lib/components/select/multi-select/multi-select.component.js +1 -1
  30. package/lib/components/time/__internal__/time-toggle/time-toggle.component.js +1 -1
  31. package/package.json +1 -1
  32. package/esm/components/button-toggle/button-toggle-icon.component.d.ts +0 -15
  33. package/esm/components/button-toggle/button-toggle-icon.component.js +0 -1
  34. package/lib/components/button-toggle/button-toggle-icon.component.d.ts +0 -15
  35. package/lib/components/button-toggle/button-toggle-icon.component.js +0 -1
@@ -1,15 +1,15 @@
1
1
  type ButtonToggleGroupContextType = {
2
- onButtonClick: (value: string) => void;
3
2
  handleKeyDown: (ev: React.KeyboardEvent<HTMLButtonElement>) => void;
4
3
  pressedButtonValue?: string;
5
4
  onChange?: (ev: React.MouseEvent<HTMLButtonElement>, value?: string) => void;
6
5
  allowDeselect: boolean;
7
- isInGroup: boolean;
8
6
  isDisabled: boolean;
9
7
  firstButton?: HTMLButtonElement;
10
8
  childButtonCallbackRef?: (button: HTMLButtonElement | null) => void;
11
9
  /** Identifier for the hint text, if it exists, that is rendered by ButtonToggleGroup */
12
10
  hintTextId?: string;
11
+ size: "small" | "medium" | "large";
12
+ fullWidth?: boolean;
13
13
  };
14
14
  declare const ButtonToggleGroupProvider: import("react").Provider<ButtonToggleGroupContextType | null>, useButtonToggleGroupContext: () => ButtonToggleGroupContextType;
15
15
  export { ButtonToggleGroupProvider, useButtonToggleGroupContext };
@@ -1 +1 @@
1
- import e from"../../../../__internal__/utils/createStrictContext/createStrictContext.js";const[t,o]=e({name:"ButtonToggleGroupContext",errorMessage:"Carbon ButtonToggleGroup: Context not found. Have you wrapped your Carbon subcomponents properly? See stack trace for more details.",defaultValue:{onButtonClick:()=>{},handleKeyDown:()=>{},pressedButtonValue:void 0,allowDeselect:!1,isInGroup:!1,isDisabled:!1}});export{t as ButtonToggleGroupProvider,o as useButtonToggleGroupContext};
1
+ import e from"../../../../__internal__/utils/createStrictContext/createStrictContext.js";const[t,o]=e({name:"ButtonToggleGroupContext",errorMessage:"Carbon ButtonToggleGroup: Context not found. Have you wrapped your Carbon subcomponents properly? See stack trace for more details.",defaultValue:{handleKeyDown:()=>{},pressedButtonValue:void 0,allowDeselect:!1,isDisabled:!1,size:"medium"}});export{t as ButtonToggleGroupProvider,o as useButtonToggleGroupContext};
@@ -2,29 +2,47 @@ import React from "react";
2
2
  import { MarginProps } from "styled-system";
3
3
  import { TagProps } from "../../../__internal__/utils/helpers/tags";
4
4
  export interface ButtonToggleGroupProps extends MarginProps, TagProps {
5
- /** Unique id for the root element of the component */
5
+ /** Unique id for the root element of the component. */
6
6
  id: string;
7
7
  /** Toggle buttons to be rendered. Only accepts children of type ButtonToggle */
8
8
  children?: React.ReactNode;
9
- /** aria-label for the group wrapper. Required for accessibility when no text label is provided */
9
+ /** Sets an aria-label for the group, must be provided if there is no visible label. */
10
10
  "aria-label"?: string;
11
- /** Text for the visible label of the button group. */
11
+ /** Visible label for the group. */
12
12
  label?: string;
13
- /** [Legacy] Text for the label's help tooltip. */
13
+ /**
14
+ * [Legacy] Text for the label's help tooltip.
15
+ * @deprecated Help tooltips are no longer supported, please use the `inputHint` prop instead.
16
+ */
14
17
  labelHelp?: React.ReactNode;
15
- /** [Legacy] Spacing between label and a field for inline label, given number will be multiplied by base spacing unit (8) */
18
+ /**
19
+ * [Legacy] Spacing between label and a field for inline label, given number will be multiplied by base spacing unit (8),
20
+ * @deprecated Custom label spacing is no longer supported for this component.
21
+ */
16
22
  labelSpacing?: 1 | 2;
17
23
  /** A hint string rendered before the input but after the label. Intended to describe the purpose or content of the input. */
18
24
  inputHint?: React.ReactNode;
19
25
  /** The percentage width of the ButtonToggleGroup. */
20
26
  inputWidth?: number | string;
21
- /** [Legacy] The text for the field help. */
27
+ /**
28
+ * [Legacy] The text for the field help.
29
+ * @deprecated `fieldHelp` is no longer supported, please use `inputHint` instead.
30
+ */
22
31
  fieldHelp?: string;
23
- /** [Legacy] Sets the field help to inline. */
32
+ /**
33
+ * [Legacy] Sets the field help to inline.
34
+ * @deprecated `fieldHelpInline` is no longer supported.
35
+ */
24
36
  fieldHelpInline?: boolean;
25
- /** [Legacy] Sets the label to be inline. */
37
+ /**
38
+ * [Legacy] Sets the label to be inline.
39
+ * @deprecated Inline labels are no longer supported.
40
+ */
26
41
  labelInline?: boolean;
27
- /** [Legacy] The percentage width of the label. */
42
+ /**
43
+ * [Legacy] The percentage width of the label.
44
+ * @deprecated `labelWidth` is no longer supported.
45
+ */
28
46
  labelWidth?: number;
29
47
  /** If true all ButtonToggle children will flex to the full width of the ButtonToggleGroup parent */
30
48
  fullWidth?: boolean;
@@ -32,17 +50,22 @@ export interface ButtonToggleGroupProps extends MarginProps, TagProps {
32
50
  onChange: (ev: React.MouseEvent<HTMLButtonElement>, value?: string) => void;
33
51
  /** Determines which child button is selected */
34
52
  value: string;
35
- /** [Legacy] Aria label for rendered help component */
53
+ /**
54
+ * [Legacy] Aria label for rendered help component.
55
+ * @deprecated Help tooltips are no longer supported.
56
+ */
36
57
  helpAriaLabel?: string;
37
- /** Allow buttons within the group to be deselected when already selected, leaving no selected button */
58
+ /** Allow selected buttons within the group to be deselected. */
38
59
  allowDeselect?: boolean;
39
- /** Disable all user interaction. */
60
+ /** Disable the group. */
40
61
  disabled?: boolean;
62
+ /** Size of the ButtonToggleGroup */
63
+ size?: "small" | "medium" | "large";
41
64
  /** @private @internal @ignore */
42
65
  "data-component"?: string;
43
66
  }
44
67
  declare const ButtonToggleGroup: {
45
- ({ children, fieldHelp, fieldHelpInline, "aria-label": ariaLabel, label, labelHelp, labelSpacing, inputHint, inputWidth, fullWidth, labelInline, labelWidth, onChange, value, helpAriaLabel, id, allowDeselect, disabled, ...props }: ButtonToggleGroupProps): React.JSX.Element;
68
+ ({ children, fieldHelp, fieldHelpInline, "aria-label": ariaLabel, label, labelHelp, labelSpacing, inputHint, inputWidth, fullWidth, labelInline, labelWidth, onChange, value, helpAriaLabel, id, allowDeselect, disabled, size, "data-component": dataComponent, ...props }: ButtonToggleGroupProps): React.JSX.Element;
46
69
  displayName: string;
47
70
  };
48
71
  export default ButtonToggleGroup;
@@ -1 +1 @@
1
- import{jsx as e,jsxs as t}from"react/jsx-runtime";import l,{useMemo as n,useRef as r,useContext as i,useState as o}from"react";import a from"invariant";import p from"../../../__internal__/form-field/form-field.component.js";import s from"../../../__internal__/utils/helpers/tags/tags.js";import u from"../../../__internal__/utils/helpers/guid/index.js";import c from"./button-toggle-group.style.js";import{ButtonToggle as d}from"../button-toggle.component.js";import"../../../style/utils/filter-styled-system-padding-props.js";import b from"../../../style/utils/filter-styled-system-margin-props.js";import{TooltipProvider as f}from"../../../__internal__/tooltip-provider/index.js";import{InputGroupBehaviour as m}from"../../../__internal__/input-behaviour/input-group-behaviour.component.js";import g from"../../../__internal__/utils/helpers/events/events.js";import y from"../../carbon-provider/__internal__/new-validation.context.js";import{ButtonToggleGroupProvider as h}from"./__internal__/button-toggle-group.context.js";import{HintText as _}from"../../../__internal__/legacy-hint-text/hint-text.component.js";function j(e,t,l){return t in e?Object.defineProperty(e,t,{value:l,enumerable:!0,configurable:!0,writable:!0}):e[t]=l,e}function v(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){j(e,t,l[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 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 w=j=>{var{children:w,fieldHelp:P,fieldHelpInline:x,"aria-label":H,label:I,labelHelp:D,labelSpacing:S,inputHint:B,inputWidth:W,fullWidth:A,labelInline:E,labelWidth:C,onChange:T,value:k,helpAriaLabel:L,id:G,allowDeselect:K=!1,disabled:N=!1}=j,R=function(e,t){if(null==e)return{};var l,n,r=function(e,t){if(null==e)return{};var l,n,r={},i=Object.keys(e);for(n=0;n<i.length;n++)l=i[n],t.indexOf(l)>=0||(r[l]=e[l]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)l=i[n],t.indexOf(l)>=0||Object.prototype.propertyIsEnumerable.call(e,l)&&(r[l]=e[l])}return r}(j,["children","fieldHelp","fieldHelpInline","aria-label","label","labelHelp","labelSpacing","inputHint","inputWidth","fullWidth","labelInline","labelWidth","onChange","value","helpAriaLabel","id","allowDeselect","disabled"]);const V=n((()=>!l.Children.toArray(w).find((e=>!l.isValidElement(e)||"ButtonToggle"!==e.type.displayName))),[w]);a(V,`\`ButtonToggleGroup\` only accepts children of type \`${d.displayName}\``);const q=r(u()),M=r(u()),$=r(null),{validationRedesignOptIn:z}=i(y),F=e=>z?void 0:e,J=()=>{var e;return null===(e=$.current)||void 0===e?void 0:e.querySelectorAll('[data-element="button-toggle-button"]')},[Q,U]=o();var X;return e(f,{helpAriaLabel:L,children:e(m,{children:e(p,O(v({label:I,labelHelp:F(D),labelSpacing:F(S),fieldHelp:F(P),fieldHelpInline:F(x),labelInline:F(E),labelWidth:F(C),labelId:q.current,id:G,labelAs:"span",disabled:N},b(R),s(null!==(X=R["data-component"])&&void 0!==X?X:"button-toggle-group",R)),{children:t(h,{value:{onButtonClick:()=>{},handleKeyDown:e=>{const t=J();if(!t||!document.activeElement)return;const l=Array.from(t).indexOf(document.activeElement);let n;g.isLeftKey(e)?n=t[0===l?t.length-1:l-1]:g.isRightKey(e)&&(n=t[(l+1)%t.length]),n instanceof HTMLButtonElement&&n.focus()},pressedButtonValue:k,onChange:T,allowDeselect:K,isInGroup:!0,isDisabled:N,firstButton:Q,childButtonCallbackRef:e=>{setTimeout((()=>{if(e){const t=J();t?e===t[0]&&U(e):U(void 0)}}),0)},hintTextId:B?M.current:void 0},children:[B&&e(_,{id:M.current,isDisabled:N,marginBottom:"var(--spacing150)",children:B}),e(c,O(v({ref:$},I?{"aria-labelledby":q.current}:{"aria-label":H}),{labelInline:E,inputWidth:W,fullWidth:A,role:"group",id:G,disabled:N,children:w}))]})}))})})};w.displayName="ButtonToggleGroup";export{w as default};
1
+ import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useRef as l,useState as r}from"react";import n from"../../../__internal__/utils/helpers/tags/tags.js";import{StyledButtonToggleGroup as i,StyledLabelWrapper as o,StyledButtonToggleWrapper as a}from"./button-toggle-group.style.js";import"../../../style/utils/filter-styled-system-padding-props.js";import s from"../../../style/utils/filter-styled-system-margin-props.js";import u from"../../../__internal__/utils/helpers/events/events.js";import{ButtonToggleGroupProvider as p}from"./__internal__/button-toggle-group.context.js";import c from"../../../__internal__/label/label.component.js";import{HintText as d}from"../../../__internal__/hint-text/hint-text.component.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 f(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){b(e,t,l[t])}))}return e}function m(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 g=b=>{var{children:g,fieldHelp:h,fieldHelpInline:y,"aria-label":O,label:j,labelHelp:v,labelSpacing:_,inputHint:w,inputWidth:P,fullWidth:D=!1,labelInline:x,labelWidth:S,onChange:W,value:H,helpAriaLabel:$,id:z,allowDeselect:I=!1,disabled:E=!1,size:k="medium","data-component":A}=b,B=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}(b,["children","fieldHelp","fieldHelpInline","aria-label","label","labelHelp","labelSpacing","inputHint","inputWidth","fullWidth","labelInline","labelWidth","onChange","value","helpAriaLabel","id","allowDeselect","disabled","size","data-component"]);const C=l(null),K=w||v,L=j?`${z}-label`:void 0,T=K?`${z}-hint`:void 0,R=()=>{var e;return null===(e=C.current)||void 0===e?void 0:e.querySelectorAll("[data-button-toggle-internal]")},[q,G]=r();return e(i,m(f(m(f({id:z,role:"group"},j&&{"aria-labelledby":L}),{"aria-label":O,$size:k,$fullWidth:D,$width:P}),s(B),n(A||"button-toggle-group",B)),{children:[(j||K)&&e(o,{children:[j&&t(c,{id:L,size:k,disabled:E,children:j}),K&&t(d,{id:T,disabled:E,size:k,children:K})]}),t(a,{"data-role":"button-toggle-group-wrapper",ref:C,$size:k,$isDisabled:E,$fullWidth:D,children:t(p,{value:{handleKeyDown:e=>{const t=R();if(!t||!document.activeElement)return;const l=Array.from(t).indexOf(document.activeElement);let r;u.isLeftKey(e)?(e.preventDefault(),r=t[0===l?t.length-1:l-1]):u.isRightKey(e)&&(e.preventDefault(),r=t[(l+1)%t.length]),null==r||r.focus()},pressedButtonValue:H,onChange:W,allowDeselect:I,isDisabled:E,firstButton:q,childButtonCallbackRef:e=>{setTimeout((()=>{if(e){const t=R();t?e===t[0]&&G(e):G(void 0)}}),0)},hintTextId:w?T:void 0,size:k,fullWidth:D},children:g})})]}))};g.displayName="ButtonToggleGroup";export{g as default};
@@ -1,8 +1,16 @@
1
- import { ButtonToggleGroupProps } from ".";
2
- type StyledButtonToggleGroupProps = Pick<ButtonToggleGroupProps, "inputWidth" | "fullWidth" | "disabled" | "labelInline">;
3
- declare const StyledButtonToggleGroup: import("styled-components").StyledComponent<"div", any, {
1
+ interface StyledButtonToggle {
2
+ $size: "small" | "medium" | "large";
3
+ $fullWidth?: boolean;
4
+ $width?: number | string;
5
+ }
6
+ export declare const StyledButtonToggleGroup: import("styled-components").StyledComponent<"div", any, {
4
7
  theme: object;
5
- } & {
6
- type: string;
7
- } & StyledButtonToggleGroupProps, "theme" | "type">;
8
- export default StyledButtonToggleGroup;
8
+ } & StyledButtonToggle, "theme">;
9
+ export declare const StyledLabelWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
10
+ interface StyledButtonToggleWrapper {
11
+ $size: "small" | "medium" | "large";
12
+ $isDisabled?: boolean;
13
+ $fullWidth?: boolean;
14
+ }
15
+ export declare const StyledButtonToggleWrapper: import("styled-components").StyledComponent<"div", any, StyledButtonToggleWrapper, never>;
16
+ export {};
@@ -1 +1 @@
1
- import t,{css as o}from"styled-components";import{margin as e}from"styled-system";import p from"../../../style/themes/apply-base-theme.js";import{StyledButtonToggle as i,StyledButtonToggleWrapper as r}from"../button-toggle.style.js";const s=t.div.attrs(p).attrs({type:"button"}).withConfig({displayName:"button-toggle-group.style__StyledButtonToggleGroup",componentId:"sc-e2730b28-0"})([""," display:flex;box-shadow:inset 0px 0px 0px 1px var(--colorsActionMinor500);border-radius:var(--borderRadius100);padding:4px;gap:4px;width:fit-content;height:fit-content;flex-wrap:",";"," "," ",""],e,(({labelInline:t})=>t?"nowrap":"wrap"),(({disabled:t})=>t&&o(["cursor:not-allowed;box-shadow:inset 0px 0px 0px 1px var(--button-typical-toggle-border-disabled);"])),(({fullWidth:t})=>t&&o(["width:100%;","{width:100%;}","{flex:auto;}"],i,r)),(({inputWidth:t})=>t&&o(["width:",";"],`${t}%`)));export{s as default};
1
+ import o,{css as a}from"styled-components";import{margin as l}from"styled-system";import e from"../../../style/themes/apply-base-theme.js";const t={small:{gap:"var(--global-space-comp-xs)",borderRadius:"var(--global-radius-action-l)"},medium:{gap:"var(--global-space-comp-s)",borderRadius:"var(--global-radius-action-xl)"},large:{gap:"var(--global-space-comp-m)",borderRadius:"var(--global-radius-action-2-xl)"}},r=o.div.attrs(e).withConfig({displayName:"button-toggle-group.style__StyledButtonToggleGroup",componentId:"sc-9691d771-0"})([""," ",""],(({$size:o,$fullWidth:l,$width:e})=>a(["display:flex;flex-direction:column;gap:",";"," ",""],t[o].gap,l&&a(["width:100%;"]),e&&a(["width:","%;"],e))),l),d=o.div.withConfig({displayName:"button-toggle-group.style__StyledLabelWrapper",componentId:"sc-9691d771-1"})(["display:flex;flex-direction:column;"]),i=o.div.withConfig({displayName:"button-toggle-group.style__StyledButtonToggleWrapper",componentId:"sc-9691d771-2"})(["",""],(({$size:o,$isDisabled:l,$fullWidth:e})=>a(["display:flex;flex-wrap:wrap;padding:var(--global-space-comp-xs);align-items:center;gap:var(--global-space-comp-s);"," border-radius:",";border:var(--global-borderwidth-xs) solid var(--button-typical-toggle-border-default);",""],!e&&a(["width:fit-content;"]),t[o].borderRadius,l&&a(["border-color:var(--button-typical-toggle-border-disabled);"]))));export{r as StyledButtonToggleGroup,i as StyledButtonToggleWrapper,d as StyledLabelWrapper};
@@ -1,12 +1,12 @@
1
1
  import React from "react";
2
- import { StyledButtonToggleProps } from "./button-toggle.style";
3
2
  import { TagProps } from "../../__internal__/utils/helpers/tags";
4
- export interface ButtonToggleProps extends Partial<StyledButtonToggleProps>, TagProps {
3
+ import { IconType } from "../icon";
4
+ export interface ButtonToggleProps extends TagProps {
5
5
  /** Prop to specify the aria-label of the component */
6
6
  "aria-label"?: string;
7
7
  /** Prop to specify the aria-labelledby property of the component */
8
8
  "aria-labelledby"?: string;
9
- /** Text to display for the button. */
9
+ /** Content to display within the button. */
10
10
  children?: React.ReactNode;
11
11
  /** Callback triggered by blur event on the button. */
12
12
  onBlur?: (ev: React.FocusEvent<HTMLButtonElement>) => void;
@@ -15,17 +15,30 @@ export interface ButtonToggleProps extends Partial<StyledButtonToggleProps>, Tag
15
15
  /** Callback triggered by click event on the button. */
16
16
  onClick?: (ev: React.MouseEvent<HTMLButtonElement>) => void;
17
17
  /**
18
- * Set the pressed state of the toggle button
19
- * @deprecated
18
+ * Set the pressed state of the toggle button.
19
+ * @deprecated Please control the state of selected buttons through ButtonToggleGroup.
20
20
  * */
21
21
  pressed?: boolean;
22
- /** An optional string by which to identify the button in either an onClick handler, or an onChange handler on the parent ButtonToggleGroup. */
22
+ /** An optional string by which to identify the button in an onChange handler on the parent ButtonToggleGroup. */
23
23
  value?: string;
24
+ /** Icon rendered within the button. Will not be rendered if size is small. */
25
+ buttonIcon?: IconType;
26
+ /**
27
+ * Sets the size of the buttonIcon
28
+ * @deprecated `buttonIconSize` is no longer supported.
29
+ */
30
+ buttonIconSize?: "small" | "large";
31
+ /** Disable the ButtonToggle. */
32
+ disabled?: boolean;
33
+ /** ButtonToggle size */
34
+ size?: "small" | "medium" | "large";
35
+ /** Allow a selected button to be deselected. */
36
+ allowDeselect?: boolean;
24
37
  /** @private @internal @ignore */
25
38
  "data-component"?: string;
26
39
  }
27
40
  export declare const ButtonToggle: {
28
- ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, buttonIcon, buttonIconSize, children, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, disabled, onBlur, onFocus, onClick, pressed, size, value, }: ButtonToggleProps): React.JSX.Element;
41
+ ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, buttonIcon, buttonIconSize, children, disabled, onBlur, onFocus, onClick, pressed, size, value, "data-component": dataComponent, ...rest }: ButtonToggleProps): React.JSX.Element;
29
42
  displayName: string;
30
43
  };
31
44
  export default ButtonToggle;
@@ -1 +1 @@
1
- import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useRef as n,useContext as o}from"react";import r from"invariant";import{StyledButtonToggleWrapper as l,StyledButtonToggle as i}from"./button-toggle.style.js";import a from"../../__internal__/utils/helpers/guid/index.js";import{useButtonToggleGroupContext as u}from"./button-toggle-group/__internal__/button-toggle-group.context.js";import c from"./button-toggle-icon.component.js";import{InputGroupContext as s}from"../../__internal__/input-behaviour/input-group-behaviour.component.js";import b from"../../__internal__/utils/logger/index.js";function p(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function d(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},o=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),o.forEach((function(t){p(e,t,n[t])}))}return e}let m=!1;const f=({"aria-label":p,"aria-labelledby":f,buttonIcon:g,buttonIconSize:y="small",children:O,"data-component":j,"data-element":h,"data-role":_,disabled:v,onBlur:w,onFocus:I,onClick:P,pressed:D,size:x="medium",value:B})=>{r(!(!O&&!g),"Either prop `buttonIcon` must be defined, or this node must have children"),D&&!m&&(b.deprecate("The `pressed` prop is deprecated."),m=!0);const S=n(null),{onMouseEnter:k,onMouseLeave:C,onBlur:z,onFocus:E}=o(s),{onButtonClick:M,handleKeyDown:F,pressedButtonValue:T,onChange:K,allowDeselect:L,isInGroup:G,isDisabled:N,firstButton:R,childButtonCallbackRef:V,hintTextId:q}=u(),A=n(a()),H=G?T&&T===B:D,J=S.current===R,Q=!G||H||!T&&J;return e(l,{"data-component":j||"button-toggle","data-element":h,"data-role":_,children:t(i,(U=d({"aria-label":p,"aria-labelledby":f,"aria-describedby":q,"aria-pressed":!!H,buttonIcon:g,buttonIconSize:y,"data-element":"button-toggle-button",disabled:v||N,id:A.current,onMouseEnter:k,onMouseLeave:C,size:x,value:B,onFocus:function(e){null==I||I(e),null==E||E()},onBlur:function(e){null==w||w(e),null==z||z()},onClick:function(e){P&&P(e),null==K||K(e,L&&T&&T===B?void 0:B),B&&M(B)},onKeyDown:F},Q?{tabIndex:0}:{tabIndex:-1}),W={allowDeselect:L,ref:e=>{S.current=e,null==V||V(e)},children:[g&&e(c,{buttonIcon:g,buttonIconSize:y,disabled:v,hasContent:!!O}),O]},W=null!=W?W:{},Object.getOwnPropertyDescriptors?Object.defineProperties(U,Object.getOwnPropertyDescriptors(W)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t.push.apply(t,n)}return t}(Object(W)).forEach((function(e){Object.defineProperty(U,e,Object.getOwnPropertyDescriptor(W,e))})),U))});var U,W};f.displayName="ButtonToggle";export{f as ButtonToggle,f as default};
1
+ import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useRef as n}from"react";import r from"invariant";import o from"./button-toggle.style.js";import l from"../../__internal__/utils/helpers/guid/index.js";import{useButtonToggleGroupContext as i}from"./button-toggle-group/__internal__/button-toggle-group.context.js";import a from"../../__internal__/utils/helpers/tags/tags.js";import u from"../icon/icon.component.js";import c from"../button/__next__/__internal__/utils/is-icon-only.js";function s(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function b(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),r.forEach((function(t){s(e,t,n[t])}))}return e}function p(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 n=Object.getOwnPropertySymbols(e);t.push.apply(t,n)}return t}(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))})),e}const d=s=>{var{"aria-label":d,"aria-labelledby":f,buttonIcon:m,buttonIconSize:y,children:g,disabled:O,onBlur:j,onFocus:h,onClick:_,pressed:v,size:w,value:P,"data-component":x}=s,I=function(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},l=Object.keys(e);for(r=0;r<l.length;r++)n=l[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(r=0;r<l.length;r++)n=l[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}(s,["aria-label","aria-labelledby","buttonIcon","buttonIconSize","children","disabled","onBlur","onFocus","onClick","pressed","size","value","data-component"]);const D=n(null),S=n(l()),{handleKeyDown:k,pressedButtonValue:z,onChange:B,allowDeselect:C,isDisabled:E,firstButton:$,childButtonCallbackRef:F,hintTextId:K,size:N,fullWidth:T}=i(),W=z===P||v,R=D.current===$,V=W||!z&&R,q=w||N,A=m&&!g||c(g);return r(!(!g&&!m),"Either prop `buttonIcon` must be defined, or this node must have children"),r(!(A&&"small"===q),"Cannot render an icon-only button in small size."),e(o,p(b(p(b({className:"button-toggle","data-button-toggle-internal":!0,"aria-label":d,"aria-labelledby":f,"aria-describedby":K,"aria-pressed":!!W,disabled:O||E,id:S.current,$size:q,$active:!!W,$iconOnly:A,$fullWidth:T,value:P,onFocus:h,onBlur:j,onClick:function(e){null==_||_(e),null==B||B(e,C&&z===P?void 0:P)},onKeyDown:k},V?{tabIndex:0}:{tabIndex:-1}),{ref:e=>{D.current=e,null==F||F(e)}}),I,a(x||"button-toggle",I)),{children:[m&&"small"!==q&&t(u,{"aria-hidden":!0,type:m}),g]}))};d.displayName="ButtonToggle";export{d as ButtonToggle,d as default};
@@ -1,41 +1,11 @@
1
- import { IconType } from "../icon";
2
- export type ButtonToggleIconSizes = "small" | "large";
3
- export declare const heightConfig: {
4
- small: number;
5
- medium: number;
6
- large: number;
7
- };
8
- export declare const fontSizeConfig: {
9
- small: number;
10
- medium: number;
11
- large: number;
12
- };
13
- export declare const paddingConfig: {
14
- small: number;
15
- medium: number;
16
- large: number;
17
- };
18
- declare const StyledButtonToggleContentWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
19
- export interface StyledButtonToggleProps {
20
- /** The icon to be rendered inside of the button */
21
- buttonIcon?: IconType;
22
- /** Sets the size of the buttonIcon (eg. large) */
23
- buttonIconSize?: ButtonToggleIconSizes;
24
- /** Disable all user interaction. */
1
+ interface StyledButtonToggleProps {
25
2
  disabled?: boolean;
26
- /** ButtonToggle size */
27
- size: "small" | "medium" | "large";
28
- /** Allow button to be deselected when already selected */
29
- allowDeselect?: boolean;
3
+ $size: "small" | "medium" | "large";
4
+ $active?: boolean;
5
+ $iconOnly?: boolean;
6
+ $fullWidth?: boolean;
30
7
  }
31
8
  declare const StyledButtonToggle: import("styled-components").StyledComponent<"button", any, {
32
9
  theme: object;
33
10
  } & StyledButtonToggleProps, "theme">;
34
- export interface StyledButtonToggleIconProps {
35
- /** Sets the size of the buttonIcon (eg. large) */
36
- buttonIconSize?: ButtonToggleIconSizes;
37
- hasContent?: boolean;
38
- }
39
- declare const StyledButtonToggleIcon: import("styled-components").StyledComponent<"div", any, StyledButtonToggleIconProps, never>;
40
- declare const StyledButtonToggleWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
41
- export { StyledButtonToggle, StyledButtonToggleWrapper, StyledButtonToggleIcon, StyledButtonToggleContentWrapper, };
11
+ export default StyledButtonToggle;
@@ -1 +1 @@
1
- import o,{css as i}from"styled-components";import t from"../icon/icon.style.js";import r from"../../style/themes/apply-base-theme.js";import n from"../../style/utils/add-focus-styling.js";const e={small:24,medium:32,large:40},a={small:14,medium:14,large:16},l={small:8,medium:8,large:12},s={small:72,medium:88,large:120},c={small:"var(--spacing100)",medium:"var(--spacing100) var(--spacing150) var(--spacing000)",large:"var(--spacing100) var(--spacing300)"},g=o.div.withConfig({displayName:"button-toggle.style__StyledButtonToggleContentWrapper",componentId:"sc-d02b9d63-0"})(["display:flex;justify-content:center;align-items:center;width:100%;height:100%;flex-flow:wrap;"]),d=o.button.attrs(r).withConfig({displayName:"button-toggle.style__StyledButtonToggle",componentId:"sc-d02b9d63-1"})(["display:inline-flex;justify-content:center;align-items:center;position:relative;box-sizing:border-box;max-width:100%;font-weight:500;background-color:transparent;cursor:pointer;text-align:center;color:var(--colorsActionMinor500);border:none;","{color:var(--colorsActionMinor500);height:var(--sizing250);width:var(--sizing250);}"," "," &:focus{"," z-index:100;}&:not(:disabled):hover{background-color:var(--colorsActionMinor600);color:var(--colorsActionMinorYang100);",'{color:var(--colorsActionMinorYang100);}}&[aria-pressed="true"]{background-color:var(--colorsActionMinor850);color:var(--colorsActionMinorYang100);',"{color:var(--colorsActionMinorYang100);}","}",""],t,(({size:o})=>i(["min-height:","px;padding:0 ","px;font-size:","px;"],e[o],l[o],a[o])),(({buttonIcon:o,buttonIconSize:t,size:r})=>o&&"large"===t&&i(["min-height:","px;padding:",";flex-direction:column;"],s[r],c[r])),n(),t,t,(({allowDeselect:o})=>!o&&i(["cursor:auto;"])),(({disabled:o})=>o&&i(["cursor:not-allowed;&{color:var(--button-typical-toggle-label-disabled);",'{color:var(--button-typical-toggle-label-disabled);}}&[aria-pressed="true"]{cursor:not-allowed;background-color:var(--colorsActionMinorYin030);}'],t))),m=o.div.withConfig({displayName:"button-toggle.style__StyledButtonToggleIcon",componentId:"sc-d02b9d63-2"})([""," ",""],(({hasContent:o})=>o&&"margin-right: 8px;"),(({buttonIconSize:o})=>"large"===o&&i(["margin-right:0;","{margin-left:0;margin-right:0;margin-bottom:8px;height:var(--sizing400);width:var(--sizing400);}","::before{font-size:var(--sizing400);line-height:var(--sizing400);}.carbon-icon__svg--credit-card-slash{margin-left:6px;}"],t,t))),p=o.div.withConfig({displayName:"button-toggle.style__StyledButtonToggleWrapper",componentId:"sc-d02b9d63-3"})(["display:inline-block;vertical-align:middle;&&&&{","{border-radius:var(--borderRadius050);}}"],d);export{d as StyledButtonToggle,g as StyledButtonToggleContentWrapper,m as StyledButtonToggleIcon,p as StyledButtonToggleWrapper,a as fontSizeConfig,e as heightConfig,l as paddingConfig};
1
+ import a,{css as o}from"styled-components";import l from"../../style/themes/apply-base-theme.js";import t from"../../style/utils/add-focus-styling.js";const e={small:{size:"var(--global-size-xs)",padding:"var(--global-space-comp-2-xs) var(--global-space-comp-s)",borderRadius:"12px"},medium:{size:"var(--global-size-s)",padding:"var(--global-space-comp-xs) var(--global-space-comp-m)",borderRadius:"var(--global-radius-action-l)"},large:{size:"var(--global-size-m)",padding:"var(--global-space-comp-s) var(--global-space-comp-l)",borderRadius:"var(--global-radius-action-xl)"}},r=a.button.attrs(l).withConfig({displayName:"button-toggle.style__StyledButtonToggle",componentId:"sc-c4bff221-0"})(["",""],(({$active:a,$size:l,disabled:r,$iconOnly:i,$fullWidth:s})=>o(["display:inline-flex;justify-content:center;align-items:center;flex-wrap:nowrap;white-space:nowrap;cursor:pointer;gap:var(--global-space-comp-s);height:",";"," "," "," border-radius:",";border:none;background-color:transparent;color:var(--button-typical-toggle-label-default);font:var(--global-font-static-comp-medium-m);text-align:center;"," "," ",""],e[l].size,!i&&o(["padding:",";"],e[l].padding),i&&o(["width:",";"],e[l].size),s&&o(["flex:1 1 auto;"]),e[l].borderRadius,a&&o(["background:var(--button-typical-toggle-bg-active);color:var(--button-typical-toggle-label-active);"]),r&&o(["cursor:not-allowed;color:var(--button-typical-toggle-label-disabled);",""],a&&o(["background:var(--button-typical-toggle-bg-active-disabled);color:var(--button-typical-toggle-label-active-disabled);"])),!r&&o(["&:focus{","}&:hover{background:var(--button-typical-toggle-bg-hover);color:var(--button-typical-toggle-label-hover);}"],t()))));export{r as default};
@@ -1 +1 @@
1
- import o,{css as t}from"styled-components";import{margin as e}from"styled-system";import r from"../../style/themes/apply-base-theme.js";import i from"../../style/utils/add-focus-styling.js";import n from"../../style/utils/color.js";import{getWindow as s,getNavigator as l}from"../../__internal__/dom/globals.js";import c,{isSafari as a}from"../../__internal__/utils/helpers/browser-type-check/index.js";import m from"./icon-config.js";import d from"./icon-unicodes.js";import{StyledButton as f}from"../button/__next__/button.style.js";const p=t([""," &{color:currentColor;}.mentions-list-item &&{color:currentColor;}.mentions-list-item:hover &&,.mentions-list-item.selected &&{color:currentColor;}.search &{color:var(--colorsUtilityYin065);&:hover{color:var(--colorsUtilityYin100);}}.search.dark-background:not(.with-button) &{color:var(--colorsUtilityYang080);:hover{color:var(--colorsUtilityYang100);}}.multi-select &,.filterable-select &{cursor:pointer;}"],f),g=o.span.attrs(r).withConfig({displayName:"icon.style__StyledIcon",componentId:"sc-88df3881-0"})(["",""],(({theme:o,color:r,bg:f,isInteractive:g,bgSize:h,bgShape:b,type:u,fontSize:y,disabled:v,tabIndex:_,inverse:j})=>{let k=j?"var(--container-standard-inverse-icon)":"var(--container-standard-icon)",x="transparent";const S=s(),z=l(),w=h?m.backgroundSize[h]:void 0;if(v)k="var(--colorsYin030)";else if(r){const{color:t}=n({color:r,theme:o});k=t}if(f){const{backgroundColor:t}=n({bg:f,theme:o});x=t}return t(["position:relative;color:",";background-color:",";vertical-align:middle;align-items:center;display:inline-flex;justify-content:center;height:",";width:",";",";",' &::before{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:CarbonIcons;content:"','";font-style:normal;font-weight:normal;vertical-align:middle;'," "," "," display:block;}"," "," ",""],k,x,w,w,b?`border-radius: ${m.backgroundShape[b]}`:"",g&&t(["&:not(:focus):hover{filter:brightness(0.9);}"]),d[u],y&&t(["font-size:",";line-height:",";"],m.iconSize[y],m.iconSize[y]),S&&"services"===u&&c(S)&&t(["margin-top:",";"],"small"===y?"-7px":"-8px"),z&&S&&"services"===u&&a(z)&&!c(S)&&t(["margin-top:-6px;"]),void 0!==_&&`\n :focus {\n ${i()}\n }\n `,e,p)}));export{g as default};
1
+ import o,{css as t}from"styled-components";import{margin as e}from"styled-system";import r from"../../style/themes/apply-base-theme.js";import i from"../../style/utils/add-focus-styling.js";import n from"../../style/utils/color.js";import{getWindow as s,getNavigator as l}from"../../__internal__/dom/globals.js";import c,{isSafari as a}from"../../__internal__/utils/helpers/browser-type-check/index.js";import m from"./icon-config.js";import d from"./icon-unicodes.js";import{StyledButton as f}from"../button/__next__/button.style.js";const p=t([""," &{color:currentColor;}.mentions-list-item &&{color:currentColor;}.mentions-list-item:hover &&,.mentions-list-item.selected &&{color:currentColor;}.search &{color:var(--colorsUtilityYin065);&:hover{color:var(--colorsUtilityYin100);}}.search.dark-background:not(.with-button) &{color:var(--colorsUtilityYang080);:hover{color:var(--colorsUtilityYang100);}}.multi-select &,.filterable-select &{cursor:pointer;}.button-toggle &&{color:currentColor;}"],f),g=o.span.attrs(r).withConfig({displayName:"icon.style__StyledIcon",componentId:"sc-f9838ea5-0"})(["",""],(({theme:o,color:r,bg:f,isInteractive:g,bgSize:h,bgShape:u,type:b,fontSize:y,disabled:v,tabIndex:_,inverse:j})=>{let k=j?"var(--container-standard-inverse-icon)":"var(--container-standard-icon)",x="transparent";const S=s(),z=l(),C=h?m.backgroundSize[h]:void 0;if(v)k="var(--colorsYin030)";else if(r){const{color:t}=n({color:r,theme:o});k=t}if(f){const{backgroundColor:t}=n({bg:f,theme:o});x=t}return t(["position:relative;color:",";background-color:",";vertical-align:middle;align-items:center;display:inline-flex;justify-content:center;height:",";width:",";",";",' &::before{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:CarbonIcons;content:"','";font-style:normal;font-weight:normal;vertical-align:middle;'," "," "," display:block;}"," "," ",""],k,x,C,C,u?`border-radius: ${m.backgroundShape[u]}`:"",g&&t(["&:not(:focus):hover{filter:brightness(0.9);}"]),d[b],y&&t(["font-size:",";line-height:",";"],m.iconSize[y],m.iconSize[y]),S&&"services"===b&&c(S)&&t(["margin-top:",";"],"small"===y?"-7px":"-8px"),z&&S&&"services"===b&&a(z)&&!c(S)&&t(["margin-top:-6px;"]),void 0!==_&&`\n :focus {\n ${i()}\n }\n `,e,p)}));export{g as default};
@@ -1 +1 @@
1
- import a,{keyframes as t}from"styled-components";const o=t(["0%{transform:translate3d(0px,0px,0px) scale(0.3);opacity:0;}10%{transform:translate3d(0px,0px,0px) scale(0.3);opacity:0;}20%{transform:translate3d(0px,0px,0px) scale(0.6);opacity:1;}35%{transform:translate3d(0px,0px,0px) scale(0.6);opacity:1;}55%{transform:translate3d(16px,-12px,0px) scale(1.4);opacity:1;}60%{transform:translate3d(16px,-12px,0px) scale(1.4);opacity:1;}90%{transform:translate3d(0px,-24px,0px) scale(0.8);opacity:1;}100%{transform:translate3d(0px,-24px,0px) scale(0.6);opacity:0;}"]),i=t(["0%{stop-color:#13a038;}10%{stop-color:#13a038;}50%{stop-color:#0092db;}90%{stop-color:#8f49fe;}100%{stop-color:#8f49fe;}"]),s=t(["0%{stop-color:#13a038;}10%{stop-color:#13a038;}50%{stop-color:#13a038;}90%{stop-color:#0092db;}100%{stop-color:#0092db;}"]),n="3s",r=a.svg.withConfig({displayName:"star.style__StyledStarSVG",componentId:"sc-1b60e449-0"})(["animation:"," "," ease-in-out forwards infinite;height:var(--sizing200);opacity:0;width:var(--sizing200);"],o,n),e=a.stop.withConfig({displayName:"star.style__GradientStopTop",componentId:"sc-1b60e449-1"})(["animation:"," "," ease-in-out forwards infinite;"],i,n),p=a.stop.withConfig({displayName:"star.style__GradientStopBottom",componentId:"sc-1b60e449-2"})(["animation:"," "," ease-in-out forwards infinite;"],s,n),l=a.div.withConfig({displayName:"star.style__StyledLoaderStarContainer",componentId:"sc-1b60e449-3"})(["bottom:0;height:var(--sizing200);left:0;position:absolute;width:var(--sizing200);&.star-1{.ai-star-path{fill:url(#gradient1);}","{animation-delay:-2s;}#gradient1{","{animation-delay:-2s;}","{animation-delay:-2s;}}}&.star-2{.ai-star-path{fill:url(#gradient2);}","{animation-delay:-1s;}#gradient2{","{animation-delay:-1s;}","{animation-delay:-1s;}}}&.star-3{.ai-star-path{fill:url(#gradient3);}","{animation-delay:0s;}#gradient3{","{animation-delay:0s;}","{animation-delay:0s;}}}"],r,e,p,r,e,p,r,e,p);export{p as GradientStopBottom,e as GradientStopTop,l as StyledLoaderStarContainer,r as StyledStarSVG};
1
+ import a,{keyframes as o}from"styled-components";const t=o(["0%{transform:translate3d(0px,0px,0px) scale(0.3);opacity:0;}10%{transform:translate3d(0px,0px,0px) scale(0.3);opacity:0;}20%{transform:translate3d(0px,0px,0px) scale(0.6);opacity:1;}35%{transform:translate3d(0px,0px,0px) scale(0.6);opacity:1;}55%{transform:translate3d(16px,-12px,0px) scale(1.4);opacity:1;}60%{transform:translate3d(16px,-12px,0px) scale(1.4);opacity:1;}90%{transform:translate3d(0px,-24px,0px) scale(0.8);opacity:1;}100%{transform:translate3d(0px,-24px,0px) scale(0.6);opacity:0;}"]),s=o(["0%{stop-color:var(--mode-color-ai-alt-stop-1);}10%{stop-color:var(--mode-color-ai-alt-stop-1);}50%{stop-color:var(--mode-color-ai-alt-stop-2);}90%{stop-color:var(--mode-color-ai-alt-stop-3);}100%{stop-color:var(--mode-color-ai-alt-stop-3);}"]),i=o(["0%{stop-color:var(--mode-color-ai-alt-stop-1);}10%{stop-color:var(--mode-color-ai-alt-stop-1);}50%{stop-color:var(--mode-color-ai-alt-stop-1);}90%{stop-color:var(--mode-color-ai-alt-stop-2);}100%{stop-color:var(--mode-color-ai-alt-stop-2);}"]),r="3s",l=a.svg.withConfig({displayName:"star.style__StyledStarSVG",componentId:"sc-8f59fe79-0"})(["animation:"," "," ease-in-out forwards infinite;height:var(--global-size-3-xs);opacity:0;width:var(--global-size-3-xs);"],t,r),e=a.stop.withConfig({displayName:"star.style__GradientStopTop",componentId:"sc-8f59fe79-1"})(["animation:"," "," ease-in-out forwards infinite;"],s,r),n=a.stop.withConfig({displayName:"star.style__GradientStopBottom",componentId:"sc-8f59fe79-2"})(["animation:"," "," ease-in-out forwards infinite;"],i,r),p=a.div.withConfig({displayName:"star.style__StyledLoaderStarContainer",componentId:"sc-8f59fe79-3"})(["bottom:0;height:var(--global-size-3-xs);left:0;position:absolute;width:var(--global-size-3-xs);&.star-1{.ai-star-path{fill:url(#gradient1);}","{animation-delay:-2s;}#gradient1{","{animation-delay:-2s;}","{animation-delay:-2s;}}}&.star-2{.ai-star-path{fill:url(#gradient2);}","{animation-delay:-1s;}#gradient2{","{animation-delay:-1s;}","{animation-delay:-1s;}}}&.star-3{.ai-star-path{fill:url(#gradient3);}","{animation-delay:0s;}#gradient3{","{animation-delay:0s;}","{animation-delay:0s;}}}"],l,e,n,l,e,n,l,e,n);export{n as GradientStopBottom,e as GradientStopTop,p as StyledLoaderStarContainer,l as StyledStarSVG};
@@ -1 +1 @@
1
- import e,{keyframes as t,css as a}from"styled-components";import{margin as i}from"styled-system";import r from"../../../style/themes/apply-base-theme.js";import{Typography as o}from"../../typography/typography.component.js";import"react/jsx-runtime";import"react";import n from"../../button/button.style.js";import{StyledButton as s}from"../../button/__next__/button.style.js";const l={"extra-small":20,small:32,medium:64,large:80},d={"extra-small":2.7,small:2.7,medium:2.7,large:2.7},c={small:"4px",medium:"8px",large:"16px"},m={"extra-small":"8px",small:"8px",medium:"12px",large:"16px"},p=t(["0%{left:0%;animation-timing-function:linear;}30%{left:10px;animation-timing-function:cubic-bezier(0.5,0.6,0.4,1);}100%{left:calc(100% - 15px);}"]),g=t(["0%{width:15px;animation-timing-function:cubic-bezier(0.7,0,0.8,1);}50%{width:35%;}100%{width:15px;}"]),f=t(["from{stroke-dasharray:100;stroke-dashoffset:100;}to{stroke-dasharray:100;stroke-dashoffset:20;}"]),x=t(["0%{transform:rotate(-90deg);stroke-dashoffset:95;}50%{transform:rotate(90deg);stroke-dashoffset:80;}100%{transform:rotate(270deg);stroke-dashoffset:95;}"]),h=(e,t)=>{const a=t?"rgba(255, 255, 255, 0.08)":"rgba(0, 0, 0, 0.08)";return"ai"===e?{outerBarBackground:a,innerBarBackground:t?"linear-gradient(90deg, var(--mode-color-ai-alt-stop-1, #00D639) 0%, var(--mode-color-ai-alt-stop-2, #00D6DE) 40%, var(--mode-color-ai-alt-stop-3, #9D60FF) 90%)":"linear-gradient(90deg, var(--mode-color-ai-stop-1, #13A038) 0%, var(--mode-color-ai-stop-2, #149197) 40%, var(--mode-color-ai-stop-3, #A87CFB) 90%)"}:{outerBarBackground:a,innerBarBackground:t?"#FFFFFF":"#000000"}},u=a(["display:flex;justify-content:center;text-align:center;"]),y=e.div.withConfig({displayName:"loader.style__StyledLoaderPlaceholder",componentId:"sc-c561a0b8-0"})(["display:inline-block;min-width:var(--sizing800);"]),b=e.div.attrs(r).withConfig({displayName:"loader.style__StyledLoader",componentId:"sc-c561a0b8-1"})([""," text-align:center;white-space:nowrap;"],i),v=e.div.withConfig({displayName:"loader.style__OuterBar",componentId:"sc-c561a0b8-2"})(["",""],(({size:e,variant:t,inverse:i})=>a(["border-radius:var(--borderRadius400);height:",";width:100%;background:",";overflow:hidden;position:relative;"],c[e],h(t,i).outerBarBackground))),w=e.div.withConfig({displayName:"loader.style__InnerBar",componentId:"sc-c561a0b8-3"})(["",""],(({size:e,variant:t,inverse:i,animationTime:r,hasMotion:o})=>a(["position:absolute;background:",";width:15px;height:",";border-radius:var(--borderRadius400);animation-name:",",",";"," animation-iteration-count:",";"],h(t,i).innerBarBackground,c[e],p,g,o&&`animation-duration: ${r}s, ${r}s;`,o?"infinite, infinite":"none, none"))),k=e.svg.withConfig({displayName:"loader.style__StyledRingCircleSvg",componentId:"sc-c561a0b8-4"})(["",""],(({inverse:e,size:t,hasMotion:i,isTracked:r,isError:o,isSuccess:c,isGradientVariant:m,animationTime:p})=>{const g=`${l[t]}px`,h=d[t];return a(["height:",";min-height:",';circle[data-role="outer-arc"]{fill:transparent;stroke-width:',"px;stroke:",';cx:12px;cy:12px;r:10px;}circle[data-role="inner-arc"]{fill:transparent;stroke-width:',"px;stroke:",";stroke-linecap:round;stroke-dasharray:100px;stroke-dashoffset:95px;transform-origin:12px 12px 0px;cx:12px;cy:12px;r:10px;transform:rotate(-90deg);animation-name:",";"," animation-timing-function:cubic-bezier(0,0,1,1);animation-iteration-count:",";}"," ",""],g,g,h,e?"rgba(255,255,255,0.08)":"rgba(0,0,0,0.08)",h,m?"none":(({inverse:e,isSuccess:t,isError:a})=>a?"#DB004E;":t?"#00811F;":e?"#FFF;":"#000000")({inverse:e,isSuccess:c,isError:o}),r?f:x,i&&`animation-duration: ${p}s;`,i?"infinite":"none",m&&a(['circle[data-role="gradient-mask-arc"]{fill:none;stroke:white;stroke-width:',"px;stroke-linecap:round;stroke-dasharray:100px;stroke-dashoffset:95px;transform-origin:12px 12px 0px;cx:12px;cy:12px;r:10px;transform:rotate(-90deg);animation-name:",";"," animation-timing-function:cubic-bezier(0,0,1,1);animation-iteration-count:",";}"],h,x,i&&`animation-duration: ${p}s;`,i?"infinite":"none"),!m&&a(["",' & circle[data-role="inner-arc"],',' & circle[data-role="inner-arc"]{stroke:currentColor;}'],s,n))})),_=e.div.withConfig({displayName:"loader.style__StyledGradientFill",componentId:"sc-c561a0b8-5"})(["width:100%;height:100%;background:radial-gradient( 1514.52% 80.26% at 56.89% 94.74%,var(--mode-color-ai-alt-stop-1) 0%,var(--mode-color-ai-alt-stop-2) 51.22%,var(--mode-color-ai-stop-3) 100% );"]),B="40px",C=e.div.withConfig({displayName:"loader.style__StyledStars",componentId:"sc-c561a0b8-6"})(["position:relative;width:",";height:",";"],B,B),S={standalone:{small:"4px",medium:"8px",large:"12px"},ring:{"extra-small":"4px",small:"8px",medium:"8px",large:"12px"}},F=e.div.withConfig({displayName:"loader.style__StyledStarLoaderWrapper",componentId:"sc-c561a0b8-7"})(["position:relative;display:flex;align-items:center;justify-content:center;"]),z=e(o).withConfig({displayName:"loader.style__StyledLoaderLabel",componentId:"sc-c561a0b8-8"})([""," line-height:150%;color:",";"," &,"," &{color:currentColor;}",""],u,(({inverse:e})=>e?"rgba(255, 255, 255, 0.55)":"rgba(0, 0, 0, 0.65)"),s,n,(({$size:e="medium",loaderType:t,loaderVariant:i})=>{const r=e;return"star"===t?a(["font-size:16px;font-weight:400;margin-left:12px;width:min-content;"]):"standalone"===t?a(["font-size:",";font-weight:500;width:100%;margin-top:",";"],"large"===r?"16px":"14px",S[t][r]):a(["font-size:",";font-weight:500;width:",";",";"],"large"===r?"16px":"extra-small"===r?"13px":"14px","inline"===i?"auto":"100%","inline"===i?`margin-left: ${m[r]}`:`margin-top: ${S[t][r]}`)})),I=e.div.withConfig({displayName:"loader.style__StyledRingLoaderWrapper",componentId:"sc-c561a0b8-9"})(["",""],(({loaderVariant:e})=>a(["display:flex;flex-direction:",";align-items:center;justify-content:center;width:",";"],"inline"===e?"row":"column","inline"===e?"auto":"100%"))),N=e.span.withConfig({displayName:"loader.style__StyledLabel",componentId:"sc-c561a0b8-10"})(["",";"],(({inverse:e})=>a(["color:",";"," &,"," &{color:currentColor;}"],e?"rgba(255, 255, 255, 0.90)":"rgba(0, 0, 0, 0.90)",s,n)));export{w as InnerBar,v as OuterBar,_ as StyledGradientFill,N as StyledLabel,b as StyledLoader,z as StyledLoaderLabel,y as StyledLoaderPlaceholder,k as StyledRingCircleSvg,I as StyledRingLoaderWrapper,F as StyledStarLoaderWrapper,C as StyledStars};
1
+ import e,{keyframes as a,css as r}from"styled-components";import{margin as o}from"styled-system";import t from"../../../style/themes/apply-base-theme.js";import{Typography as i}from"../../typography/typography.component.js";import"react/jsx-runtime";import"react";import n from"../../button/button.style.js";import{StyledButton as l}from"../../button/__next__/button.style.js";const s={"extra-small":20,small:32,medium:64,large:80},d={"extra-small":2.7,small:2.7,medium:2.7,large:2.7},m={small:"var(--global-radius-container-2-xs)",medium:"var(--global-radius-container-xs)",large:"var(--global-radius-container-m)"},c={small:"var(--global-size-5-xs)",medium:"var(--global-size-4-xs)",large:"var(--global-size-3-xs)"},p={"extra-small":"var(--global-space-comp-s)",small:"var(--global-space-comp-s)",medium:"var(--global-space-comp-m)",large:"var(--global-space-comp-l)"},g=a(["0%{left:0%;animation-timing-function:linear;}30%{left:10px;animation-timing-function:cubic-bezier(0.5,0.6,0.4,1);}100%{left:calc(100% - 15px);}"]),f=a(["0%{width:15px;animation-timing-function:cubic-bezier(0.7,0,0.8,1);}50%{width:35%;}100%{width:15px;}"]),u=a(["from{stroke-dasharray:100;stroke-dashoffset:100;}to{stroke-dasharray:100;stroke-dashoffset:20;}"]),v=a(["0%{transform:rotate(-90deg);stroke-dashoffset:95;}50%{transform:rotate(90deg);stroke-dashoffset:80;}100%{transform:rotate(270deg);stroke-dashoffset:95;}"]),h=(e,a)=>{const r=a?"var(--progress-loader-inverse-bg-default)":"var(--progress-loader-bg-default)";return"ai"===e?{outerBarBackground:r,innerBarBackground:"linear-gradient(90deg, var(--mode-color-ai-alt-stop-1) 0%, var(--mode-color-ai-alt-stop-2) 40%, var(--mode-color-ai-alt-stop-3) 90%)"}:{outerBarBackground:r,innerBarBackground:a?"var(--progress-loader-inverse-fg-default)":"var(--progress-loader-fg-default)"}},y=r(["display:flex;justify-content:center;text-align:center;"]),b=e.div.withConfig({displayName:"loader.style__StyledLoaderPlaceholder",componentId:"sc-53e25df6-0"})(["display:inline-block;min-width:var(--global-size-2-xl);"]),x=e.div.attrs(t).withConfig({displayName:"loader.style__StyledLoader",componentId:"sc-53e25df6-1"})([""," text-align:center;white-space:nowrap;"],o),k=e.div.withConfig({displayName:"loader.style__OuterBar",componentId:"sc-53e25df6-2"})(["",""],(({size:e,variant:a,inverse:o})=>r(["border-radius:",";height:",";width:100%;background:",";overflow:hidden;position:relative;"],m[e],c[e],h(a,o).outerBarBackground))),w=e.div.withConfig({displayName:"loader.style__InnerBar",componentId:"sc-53e25df6-3"})(["",""],(({size:e,variant:a,inverse:o,animationTime:t,hasMotion:i})=>r(["position:absolute;background:",";width:15px;height:",";border-radius:",";animation-name:",",",";"," animation-iteration-count:",";"],h(a,o).innerBarBackground,c[e],m[e],g,f,i&&`animation-duration: ${t}s, ${t}s;`,i?"infinite, infinite":"none, none"))),_=e.svg.withConfig({displayName:"loader.style__StyledRingCircleSvg",componentId:"sc-53e25df6-4"})(["",""],(({inverse:e,size:a,hasMotion:o,isTracked:t,isError:i,isSuccess:m,isGradientVariant:c,animationTime:p})=>{const g=`${s[a]}px`,f=d[a];return r(["height:",";min-height:",';circle[data-role="outer-arc"]{fill:transparent;stroke-width:',"px;stroke:",';cx:12px;cy:12px;r:10px;}circle[data-role="inner-arc"]{fill:transparent;stroke-width:',"px;stroke:",";stroke-linecap:round;stroke-dasharray:100px;stroke-dashoffset:95px;transform-origin:12px 12px 0px;cx:12px;cy:12px;r:10px;transform:rotate(-90deg);animation-name:",";"," animation-timing-function:cubic-bezier(0,0,1,1);animation-iteration-count:",";}"," ",""],g,g,f,e?"var(--progress-loader-inverse-bg-default)":"var(--progress-loader-bg-default)",f,c?"none":(({inverse:e,isSuccess:a,isError:r})=>r?"var(--progress-loader-fg-error);":a?"var(--progress-loader-fg-complete);":e?"var(--progress-loader-inverse-fg-default)":"var(--progress-loader-fg-default)")({inverse:e,isSuccess:m,isError:i}),t?u:v,o&&`animation-duration: ${p}s;`,o?"infinite":"none",c&&r(['circle[data-role="gradient-mask-arc"]{fill:none;stroke:white;stroke-width:',"px;stroke-linecap:round;stroke-dasharray:100px;stroke-dashoffset:95px;transform-origin:12px 12px 0px;cx:12px;cy:12px;r:10px;transform:rotate(-90deg);animation-name:",";"," animation-timing-function:cubic-bezier(0,0,1,1);animation-iteration-count:",";}"],f,v,o&&`animation-duration: ${p}s;`,o?"infinite":"none"),!c&&r(["",' & circle[data-role="inner-arc"],',' & circle[data-role="inner-arc"]{stroke:currentColor;}'],l,n))})),C=e.div.withConfig({displayName:"loader.style__StyledGradientFill",componentId:"sc-53e25df6-5"})(["width:100%;height:100%;background:radial-gradient( 1514.52% 80.26% at 56.89% 94.74%,var(--mode-color-ai-alt-stop-1) 0%,var(--mode-color-ai-alt-stop-2) 51.22%,var(--mode-color-ai-stop-3) 100% );"]),S="var(--global-size-m)",z=e.div.withConfig({displayName:"loader.style__StyledStars",componentId:"sc-53e25df6-6"})(["position:relative;width:",";height:",";"],S,S),B={standalone:{small:"var(--global-space-comp-xs)",medium:"var(--global-space-comp-s)",large:"var(--global-space-comp-m)"},ring:{"extra-small":"var(--global-space-comp-xs)",small:"var(--global-space-comp-s)",medium:"var(--global-space-comp-s)",large:"var(--global-space-comp-m)"}},I=e.div.withConfig({displayName:"loader.style__StyledStarLoaderWrapper",componentId:"sc-53e25df6-7"})(["position:relative;display:flex;align-items:center;justify-content:center;"]),N=e(i).withConfig({displayName:"loader.style__StyledLoaderLabel",componentId:"sc-53e25df6-8"})([""," line-height:150%;color:",";"," &,"," &{color:currentColor;}",""],y,(({inverse:e})=>e?"var(--progress-inverse-label-alt)":"var(--progress-label-alt)"),l,n,(({$size:e="medium",loaderType:a,loaderVariant:o})=>{const t=e;return"star"===a?r(["font-size:16px;font-weight:400;margin-left:12px;width:min-content;"]):"standalone"===a?r(["font:",";width:100%;margin-top:",";"],"large"===t?"var(--global-font-static-comp-medium-l)":"small"===t?"var(--global-font-static-comp-medium-s)":"var(--global-font-static-comp-medium-m)",B[a][t]):r(["font:",";width:",";",";"],"large"===t?"var(--global-font-static-comp-medium-l)":"extra-small"===t?"var(--global-font-static-comp-medium-xs)":"small"===t?"var(--global-font-static-comp-medium-s)":"var(--global-font-static-comp-medium-m)","inline"===o?"auto":"100%","inline"===o?`margin-left: ${p[t]}`:`margin-top: ${B[a][t]}`)})),j=e.div.withConfig({displayName:"loader.style__StyledRingLoaderWrapper",componentId:"sc-53e25df6-9"})(["",""],(({loaderVariant:e})=>r(["display:flex;flex-direction:",";align-items:center;justify-content:center;width:",";"],"inline"===e?"row":"column","inline"===e?"auto":"100%"))),$=e.span.withConfig({displayName:"loader.style__StyledLabel",componentId:"sc-53e25df6-10"})(["",";"],(({inverse:e})=>r(["color:",";"," &,"," &{color:currentColor;}"],e?"var(--progress-inverse-label-alt)":"var(--progress-label-alt)",l,n)));export{w as InnerBar,k as OuterBar,C as StyledGradientFill,$ as StyledLabel,x as StyledLoader,N as StyledLoaderLabel,b as StyledLoaderPlaceholder,_ as StyledRingCircleSvg,j as StyledRingLoaderWrapper,I as StyledStarLoaderWrapper,z as StyledStars};
@@ -1 +1 @@
1
- import{jsx as e,jsxs as t}from"react/jsx-runtime";import r,{useState as n,useRef as l,useCallback as o,useMemo as i,useEffect as a}from"react";import"../../../style/utils/filter-styled-system-padding-props.js";import s from"../../../style/utils/filter-styled-system-margin-props.js";import c from"../../../style/utils/filter-out-styled-system-spacing-props.js";import u from"../__internal__/select-textbox/select-textbox.component.js";import d from"../../../__internal__/utils/helpers/guid/index.js";import p from"../__internal__/utils/with-filter.hoc.js";import m from"../__internal__/select-list/select-list.component.js";import{StyledSelectPillContainer as f,StyledSelectMultiSelect as b,StyledAccessibilityLabelContainer as v}from"./multi-select.style.js";import{Pill as y}from"../../pill/pill.component.js";import h from"../__internal__/utils/is-expected-option.js";import g from"../__internal__/utils/is-expected-value.js";import O from"../__internal__/utils/is-navigation-key.js";import _ from"../../../hooks/__internal__/useStableCallback/useStableCallback.js";import j from"../../../hooks/__internal__/useInputAccessibility/useInputAccessibility.js";import w from"../../../hooks/__internal__/useAdaptiveSidebarModalFocus/useAdaptiveSidebarModalFocus.js";function C(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function x(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){C(e,t,r[t])}))}return e}function P(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 S=p(m),k=r.forwardRef(((p,m)=>{var{"aria-label":C,"aria-labelledby":k,value:D,id:L,label:E,name:M,disabled:V,readOnly:F,children:I,onOpen:T,onFilterChange:B,onChange:A,onClick:H,onFocus:z,onBlur:K,onKeyDown:R,openOnFocus:q=!1,noResultsMessage:W,placeholder:$,isLoading:N,onListScrollBottom:G,tableHeader:J,multiColumn:Q,tooltipPosition:U,size:X="medium","data-element":Y,"data-role":Z,listPlacement:ee="bottom",listMaxHeight:te,flipEnabled:re=!0,wrapPillText:ne=!0,enableVirtualScroll:le,virtualScrollOverscan:oe,required:ie,listWidth:ae}=p,se=function(e,t){if(null==e)return{};var r,n,l=function(e,t){if(null==e)return{};var r,n,l={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(l[r]=e[r]);return l}(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)&&(l[r]=e[r])}return l}(p,["aria-label","aria-labelledby","value","id","label","name","disabled","readOnly","children","onOpen","onFilterChange","onChange","onClick","onFocus","onBlur","onKeyDown","openOnFocus","noResultsMessage","placeholder","isLoading","onListScrollBottom","tableHeader","multiColumn","tooltipPosition","size","data-element","data-role","listPlacement","listMaxHeight","flipEnabled","wrapPillText","enableVirtualScroll","virtualScrollOverscan","required","listWidth"]);const[ce,ue]=n(""),de=l(d()),pe=l(d()),me=l(null),fe=l(null),be=l(!1),ve=l(!1),ye=l(!1),he=l(!1),ge=l(!1),[Oe,_e]=n(),[je,we]=n(!1),[Ce,xe]=n(""),[Pe,Se]=n(""),[ke,De]=n(""),[Le,Ee]=n(),Me=l(L||d()),{labelId:Ve}=j({id:Me.current,label:E}),Fe=l(null),Ie=o((()=>{we((e=>(!e&&T&&T(),!0)))}),[T]),Te=o(((e,t)=>({target:P(x({},M&&{name:M},L&&{id:L}),{value:e}),selectionConfirmed:t})),[M,L]),Be=o(((e,t)=>{const r=e(D);r.length!==(null==D?void 0:D.length)&&A(Te(r,t))}),[Te,A,D]),Ae=o((e=>{const t=e.target.value,n=(l=t,o=I,r.Children.toArray(o).find((e=>{const{text:t}=e.props;return-1!==(null==t?void 0:t.toLowerCase().indexOf(null==l?void 0:l.toLowerCase()))})));var l,o;n&&Se(n.props.value),De(t),xe(t),Ie()}),[I,Ie]),He=o((e=>{ve.current=!0,Be((t=>{if(!t.length)return t;const r=t.slice();return r.splice(e,1),r}),!0)}),[Be]),ze=o((e=>{const{key:t}=e,r="Backspace"===t||"Delete"===t;R&&R(e),F||(!e.defaultPrevented&&O(t)&&(e.preventDefault(),Ie()),!r||""!==ke&&""!==Ce||He(-1))}),[R,F,ke,Ce,Ie,He]),Ke=i((()=>{var e;return D&&D.length?null===(e=r.Children.map(I,(e=>!(!r.isValidElement(e)||!D.includes(e.props.value))&&e.props.text)))||void 0===e?void 0:e.filter((e=>e)).reduce(((e,t)=>e?`${e}, ${t}`:t),""):null}),[I,D]),Re=o((e=>{if(ye.current=!1,!je)return;const t=me.current&&!me.current.contains(e.target),r=fe.current&&!fe.current.contains(e.target);t&&r&&!ve.current&&(xe(""),De(""),Se(""),we(!1)),ve.current=!1}),[je]),qe=i((()=>{const t=!V&&!F;let n;return(null==D?void 0:D.length)?D.map(((l,o)=>{const i=r.Children.toArray(I).find((e=>r.isValidElement(e)&&h(e,l)));let a={};if(!i)return null;var s,c;r.isValidElement(i)&&(n=void 0!==(null==i||null===(s=i.props.value)||void 0===s?void 0:s.value)?null==i||null===(c=i.props.value)||void 0===c?void 0:c.value:null==i?void 0:i.props.value,a={title:i.props.text,fill:i.props.fill,borderColor:i.props.borderColor});const u=a.title||"",d=u+n||o;return e(f,{children:e(y,P(x({onDelete:t?()=>He(o):void 0,wrapText:ne},a),{children:u}))},d)})):""}),[I,V,F,D]);a((()=>{const e=null==D?void 0:D.length;Ee(e?" ":$)}),[D,$]),a((()=>{const e="click";return window.addEventListener(e,Re),function(){window.removeEventListener(e,Re)}}),[Re]);const We=_(B),$e=l(!0);function Ne(e){if(ye.current=!1,H&&H(e),!q||q&&!ge.current){if(je)return De(""),void we(!1);null==T||T(),we(!0)}else ge.current=!1}function Ge(e){ye.current=!1,H&&H(e),we((e=>e?(De(""),!1):(T&&T(),!0)))}function Je(e){he.current=!1,ye.current||(be.current=!1,K&&K(e))}function Qe(e){var t;ye.current=!0;const r=e.target;"input"!==(null===(t=r.dataset)||void 0===t?void 0:t.element)&&e.preventDefault(),"input"===r.dataset.element&&(he.current=!0)}function Ue(e){const t=()=>null==z?void 0:z(e);q?(Fe.current&&clearTimeout(Fe.current),Fe.current=setTimeout((()=>{we((e=>(e||(T&&T(),z&&!be.current&&(t(),be.current=!0),ge.current=he.current),!0)))}))):z&&!be.current&&(t(),be.current=!0)}a((()=>{We&&!$e.current&&We(ke)}),[We,ke]),a((()=>{$e.current=!1}),[]),w((()=>we(!1)));const Xe=o((e=>{const{value:t,selectionType:r,id:n,selectionConfirmed:l}=e;if("navigationKey"===r)return Se(t),void ue(n);"click"===r&&(ve.current=!0),xe("");const o=-1!==(null==D?void 0:D.findIndex((e=>g(e,t))));null==Oe||Oe.focus(),ye.current=!1,Be((e=>o?e:[...e,t]),l)}),[Oe,D,Be]),Ye=o((()=>{we(!1),De("")}),[]),Ze=o((e=>{e&&(_e(e),m&&("function"==typeof m?m(e):m.current=e))}),[m]);function et(){return P(x({id:Me.current,name:M,disabled:V,label:E,readOnly:F,placeholder:Le,leftChildren:qe,formattedValue:Ce,selectedValue:D,onClick:Ne,onMouseDown:Qe,onFocus:Ue,onBlur:Je,iconOnClick:Ge,iconOnMouseDown:Qe,onKeyDown:ze,onChange:Ae,tooltipPosition:U,size:X,required:ie},c(se)),{"data-component":void 0})}let tt;switch(ee){case"top":tt="top-end";break;case"bottom":tt="bottom-end";break;default:tt=ee}const rt=e(S,{ref:fe,id:de.current,labelId:Ve,anchorElement:(null==Oe?void 0:Oe.parentElement)||void 0,onSelect:Xe,onSelectListClose:Ye,onMouseDown:function(){ye.current=!0},filterText:ke.trim(),highlightedValue:Pe,noResultsMessage:W,isLoading:N,onListScrollBottom:G,tableHeader:J,multiColumn:Q,listPlacement:void 0!==ae?tt:ee,listMaxHeight:te,flipEnabled:re,multiselectValues:D,isOpen:je,enableVirtualScroll:le,virtualScrollOverscan:oe,listWidth:ae,children:I}),nt=s(se);return t(b,P(x({disabled:V,readOnly:F,hasTextCursor:!0,size:X,"data-component":"multiselect","data-role":Z,"data-element":Y,isOpen:je,className:"multi-select"},nt),{children:[t("div",{ref:me,children:[e(v,{"data-element":"accessibility-label",id:pe.current,children:Ke}),e(u,x({ref:Ze,accessibilityLabelId:pe.current,activeDescendantId:ce,"aria-controls":de.current,ariaLabel:C,ariaLabelledby:k,isOpen:je,labelId:Ve,value:et().formattedValue,selectType:"multi"},et()))]}),rt]}))}));export{k as MultiSelect,k as default};
1
+ import{jsx as e,jsxs as t}from"react/jsx-runtime";import r,{useState as n,useRef as l,useCallback as o,useMemo as i,useEffect as a}from"react";import"../../../style/utils/filter-styled-system-padding-props.js";import s from"../../../style/utils/filter-styled-system-margin-props.js";import c from"../../../style/utils/filter-out-styled-system-spacing-props.js";import u from"../__internal__/select-textbox/select-textbox.component.js";import d from"../../../__internal__/utils/helpers/guid/index.js";import p from"../__internal__/utils/with-filter.hoc.js";import m from"../__internal__/select-list/select-list.component.js";import{StyledSelectPillContainer as f,StyledSelectMultiSelect as b,StyledAccessibilityLabelContainer as v}from"./multi-select.style.js";import{Pill as y}from"../../pill/pill.component.js";import h from"../__internal__/utils/is-expected-option.js";import g from"../__internal__/utils/is-expected-value.js";import O from"../__internal__/utils/is-navigation-key.js";import _ from"../../../hooks/__internal__/useStableCallback/useStableCallback.js";import j from"../../../hooks/__internal__/useInputAccessibility/useInputAccessibility.js";import w from"../../../hooks/__internal__/useAdaptiveSidebarModalFocus/useAdaptiveSidebarModalFocus.js";function C(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function x(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){C(e,t,r[t])}))}return e}function P(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 S=p(m),k=r.forwardRef(((p,m)=>{var{"aria-label":C,"aria-labelledby":k,value:D,id:L,label:E,name:M,disabled:V,readOnly:F,children:I,onOpen:T,onFilterChange:B,onChange:A,onClick:H,onFocus:z,onBlur:K,onKeyDown:R,openOnFocus:q=!1,noResultsMessage:W,placeholder:$,isLoading:N,onListScrollBottom:G,tableHeader:J,multiColumn:Q,tooltipPosition:U,size:X="medium","data-element":Y,"data-role":Z,listPlacement:ee="bottom",listMaxHeight:te,flipEnabled:re=!0,wrapPillText:ne=!0,enableVirtualScroll:le,virtualScrollOverscan:oe,required:ie,listWidth:ae}=p,se=function(e,t){if(null==e)return{};var r,n,l=function(e,t){if(null==e)return{};var r,n,l={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(l[r]=e[r]);return l}(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)&&(l[r]=e[r])}return l}(p,["aria-label","aria-labelledby","value","id","label","name","disabled","readOnly","children","onOpen","onFilterChange","onChange","onClick","onFocus","onBlur","onKeyDown","openOnFocus","noResultsMessage","placeholder","isLoading","onListScrollBottom","tableHeader","multiColumn","tooltipPosition","size","data-element","data-role","listPlacement","listMaxHeight","flipEnabled","wrapPillText","enableVirtualScroll","virtualScrollOverscan","required","listWidth"]);const[ce,ue]=n(""),de=l(d()),pe=l(d()),me=l(null),fe=l(null),be=l(!1),ve=l(!1),ye=l(!1),he=l(!1),ge=l(!1),[Oe,_e]=n(),[je,we]=n(!1),[Ce,xe]=n(""),[Pe,Se]=n(""),[ke,De]=n(""),[Le,Ee]=n(),Me=l(L||d()),{labelId:Ve}=j({id:Me.current,label:E}),Fe=l(null),Ie=o((()=>{we((e=>(!e&&T&&T(),!0)))}),[T]),Te=o(((e,t)=>({target:P(x({},M&&{name:M},L&&{id:L}),{value:e}),selectionConfirmed:t})),[M,L]),Be=o(((e,t)=>{const r=e(D).filter((e=>""!==e));r.length!==(null==D?void 0:D.length)&&A(Te(r,t))}),[Te,A,D]),Ae=o((e=>{const t=e.target.value,n=(l=t,o=I,r.Children.toArray(o).find((e=>{const{text:t}=e.props;return-1!==(null==t?void 0:t.toLowerCase().indexOf(null==l?void 0:l.toLowerCase()))})));var l,o;n&&Se(n.props.value),De(t),xe(t),Ie()}),[I,Ie]),He=o((e=>{ve.current=!0,Be((t=>{if(!t.length)return t;const r=t.slice();return r.splice(e,1),r}),!0)}),[Be]),ze=o((e=>{const{key:t}=e,r="Backspace"===t||"Delete"===t;R&&R(e),F||(!e.defaultPrevented&&O(t)&&(e.preventDefault(),Ie()),!r||""!==ke&&""!==Ce||He(-1))}),[R,F,ke,Ce,Ie,He]),Ke=i((()=>{var e;return D&&D.length?null===(e=r.Children.map(I,(e=>!(!r.isValidElement(e)||!D.includes(e.props.value))&&e.props.text)))||void 0===e?void 0:e.filter((e=>e)).reduce(((e,t)=>e?`${e}, ${t}`:t),""):null}),[I,D]),Re=o((e=>{if(ye.current=!1,!je)return;const t=me.current&&!me.current.contains(e.target),r=fe.current&&!fe.current.contains(e.target);t&&r&&!ve.current&&(xe(""),De(""),Se(""),we(!1)),ve.current=!1}),[je]),qe=i((()=>{const t=!V&&!F;let n;return(null==D?void 0:D.length)?D.map(((l,o)=>{const i=r.Children.toArray(I).find((e=>r.isValidElement(e)&&h(e,l)));let a={};if(!i)return null;var s,c;r.isValidElement(i)&&(n=void 0!==(null==i||null===(s=i.props.value)||void 0===s?void 0:s.value)?null==i||null===(c=i.props.value)||void 0===c?void 0:c.value:null==i?void 0:i.props.value,a={title:i.props.text,fill:i.props.fill,borderColor:i.props.borderColor});const u=a.title||"",d=u+n||o;return e(f,{children:e(y,P(x({onDelete:t?()=>He(o):void 0,wrapText:ne},a),{children:u}))},d)})):""}),[I,V,F,D]);a((()=>{const e=null==D?void 0:D.length;Ee(e?" ":$)}),[D,$]),a((()=>{const e="click";return window.addEventListener(e,Re),function(){window.removeEventListener(e,Re)}}),[Re]);const We=_(B),$e=l(!0);function Ne(e){if(ye.current=!1,H&&H(e),!q||q&&!ge.current){if(je)return De(""),void we(!1);null==T||T(),we(!0)}else ge.current=!1}function Ge(e){ye.current=!1,H&&H(e),we((e=>e?(De(""),!1):(T&&T(),!0)))}function Je(e){he.current=!1,ye.current||(be.current=!1,K&&K(e))}function Qe(e){var t;ye.current=!0;const r=e.target;"input"!==(null===(t=r.dataset)||void 0===t?void 0:t.element)&&e.preventDefault(),"input"===r.dataset.element&&(he.current=!0)}function Ue(e){const t=()=>null==z?void 0:z(e);q?(Fe.current&&clearTimeout(Fe.current),Fe.current=setTimeout((()=>{we((e=>(e||(T&&T(),z&&!be.current&&(t(),be.current=!0),ge.current=he.current),!0)))}))):z&&!be.current&&(t(),be.current=!0)}a((()=>{We&&!$e.current&&We(ke)}),[We,ke]),a((()=>{$e.current=!1}),[]),w((()=>we(!1)));const Xe=o((e=>{const{value:t,selectionType:r,id:n,selectionConfirmed:l}=e;if("navigationKey"===r)return Se(t),void ue(n);"click"===r&&(ve.current=!0),xe("");const o=-1!==(null==D?void 0:D.findIndex((e=>g(e,t))));null==Oe||Oe.focus(),ye.current=!1,Be((e=>o?e:[...e,t]),l)}),[Oe,D,Be]),Ye=o((()=>{we(!1),De("")}),[]),Ze=o((e=>{e&&(_e(e),m&&("function"==typeof m?m(e):m.current=e))}),[m]);function et(){return P(x({id:Me.current,name:M,disabled:V,label:E,readOnly:F,placeholder:Le,leftChildren:qe,formattedValue:Ce,selectedValue:D,onClick:Ne,onMouseDown:Qe,onFocus:Ue,onBlur:Je,iconOnClick:Ge,iconOnMouseDown:Qe,onKeyDown:ze,onChange:Ae,tooltipPosition:U,size:X,required:ie},c(se)),{"data-component":void 0})}let tt;switch(ee){case"top":tt="top-end";break;case"bottom":tt="bottom-end";break;default:tt=ee}const rt=e(S,{ref:fe,id:de.current,labelId:Ve,anchorElement:(null==Oe?void 0:Oe.parentElement)||void 0,onSelect:Xe,onSelectListClose:Ye,onMouseDown:function(){ye.current=!0},filterText:ke.trim(),highlightedValue:Pe,noResultsMessage:W,isLoading:N,onListScrollBottom:G,tableHeader:J,multiColumn:Q,listPlacement:void 0!==ae?tt:ee,listMaxHeight:te,flipEnabled:re,multiselectValues:D,isOpen:je,enableVirtualScroll:le,virtualScrollOverscan:oe,listWidth:ae,children:I}),nt=s(se);return t(b,P(x({disabled:V,readOnly:F,hasTextCursor:!0,size:X,"data-component":"multiselect","data-role":Z,"data-element":Y,isOpen:je,className:"multi-select"},nt),{children:[t("div",{ref:me,children:[e(v,{"data-element":"accessibility-label",id:pe.current,children:Ke}),e(u,x({ref:Ze,accessibilityLabelId:pe.current,activeDescendantId:ce,"aria-controls":de.current,ariaLabel:C,ariaLabelledby:k,isOpen:je,labelId:Ve,value:et().formattedValue,selectType:"multi"},et()))]}),rt]}))}));export{k as MultiSelect,k as default};
@@ -1 +1 @@
1
- import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useRef as o,useCallback as r}from"react";import n from"../../../../__internal__/utils/helpers/guid/index.js";import p from"../../../../hooks/__internal__/useLocale/useLocale.js";import{ButtonToggle as c}from"../../../button-toggle/button-toggle.component.js";import l from"../../../button-toggle/button-toggle-group/button-toggle-group.component.js";function i(e,t,o){return t in e?Object.defineProperty(e,t,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[t]=o,e}function u(e){for(var t=1;t<arguments.length;t++){var o=null!=arguments[t]?arguments[t]:{},r=Object.keys(o);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(o).filter((function(e){return Object.getOwnPropertyDescriptor(o,e).enumerable})))),r.forEach((function(t){i(e,t,o[t])}))}return e}function a(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 o=Object.getOwnPropertySymbols(e);t.push.apply(t,o)}return t}(Object(t)).forEach((function(o){Object.defineProperty(e,o,Object.getOwnPropertyDescriptor(t,o))})),e}const g=({size:i,onChange:g,toggleValue:s,disabled:m,toggleProps:b})=>{const f=p(),O=f.time.amText(),j=f.time.pmText(),y=o(n()),{wrapperProps:d,amToggleProps:P,pmToggleProps:h}=b||{},w=r((e=>{const t=e.target.value;t!==s&&g(t)}),[s,g]);return e(l,a(u({},d),{"data-component":"time-button-toggle-group",m:"0px 0px 0px 16px",id:y.current,onChange:w,value:s,disabled:m,children:[t(c,a(u({},P),{"data-component":"am-button-toggle",value:"AM",size:i,children:O})),t(c,a(u({},h),{"data-component":"pm-button-toggle",value:"PM",size:i,children:j}))]}))};g.displayName="Toggle";export{g as default};
1
+ import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useRef as o,useCallback as r}from"react";import n from"../../../../__internal__/utils/helpers/guid/index.js";import p from"../../../../hooks/__internal__/useLocale/useLocale.js";import{ButtonToggle as c}from"../../../button-toggle/button-toggle.component.js";import l from"../../../button-toggle/button-toggle-group/button-toggle-group.component.js";function i(e,t,o){return t in e?Object.defineProperty(e,t,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[t]=o,e}function u(e){for(var t=1;t<arguments.length;t++){var o=null!=arguments[t]?arguments[t]:{},r=Object.keys(o);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(o).filter((function(e){return Object.getOwnPropertyDescriptor(o,e).enumerable})))),r.forEach((function(t){i(e,t,o[t])}))}return e}function a(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 o=Object.getOwnPropertySymbols(e);t.push.apply(t,o)}return t}(Object(t)).forEach((function(o){Object.defineProperty(e,o,Object.getOwnPropertyDescriptor(t,o))})),e}const g=({size:i,onChange:g,toggleValue:s,disabled:m,toggleProps:b})=>{const f=p(),O=f.time.amText(),j=f.time.pmText(),y=o(n()),{wrapperProps:d,amToggleProps:P,pmToggleProps:h}=b||{},w=r((e=>{const t=e.target.value;t!==s&&g(t)}),[s,g]);return e(l,a(u({},d),{"data-component":"time-button-toggle-group",m:"0px 0px 0px 16px",id:y.current,onChange:w,value:s,disabled:m,size:i,children:[t(c,a(u({},P),{"data-component":"am-button-toggle",value:"AM",children:O})),t(c,a(u({},h),{"data-component":"pm-button-toggle",value:"PM",children:j}))]}))};g.displayName="Toggle";export{g as default};
@@ -1,15 +1,15 @@
1
1
  type ButtonToggleGroupContextType = {
2
- onButtonClick: (value: string) => void;
3
2
  handleKeyDown: (ev: React.KeyboardEvent<HTMLButtonElement>) => void;
4
3
  pressedButtonValue?: string;
5
4
  onChange?: (ev: React.MouseEvent<HTMLButtonElement>, value?: string) => void;
6
5
  allowDeselect: boolean;
7
- isInGroup: boolean;
8
6
  isDisabled: boolean;
9
7
  firstButton?: HTMLButtonElement;
10
8
  childButtonCallbackRef?: (button: HTMLButtonElement | null) => void;
11
9
  /** Identifier for the hint text, if it exists, that is rendered by ButtonToggleGroup */
12
10
  hintTextId?: string;
11
+ size: "small" | "medium" | "large";
12
+ fullWidth?: boolean;
13
13
  };
14
14
  declare const ButtonToggleGroupProvider: import("react").Provider<ButtonToggleGroupContextType | null>, useButtonToggleGroupContext: () => ButtonToggleGroupContextType;
15
15
  export { ButtonToggleGroupProvider, useButtonToggleGroupContext };
@@ -1 +1 @@
1
- "use strict";var e=require("../../../../__internal__/utils/createStrictContext/createStrictContext.js");const[t,o]=e.default({name:"ButtonToggleGroupContext",errorMessage:"Carbon ButtonToggleGroup: Context not found. Have you wrapped your Carbon subcomponents properly? See stack trace for more details.",defaultValue:{onButtonClick:()=>{},handleKeyDown:()=>{},pressedButtonValue:void 0,allowDeselect:!1,isInGroup:!1,isDisabled:!1}});exports.ButtonToggleGroupProvider=t,exports.useButtonToggleGroupContext=o;
1
+ "use strict";var e=require("../../../../__internal__/utils/createStrictContext/createStrictContext.js");const[t,o]=e.default({name:"ButtonToggleGroupContext",errorMessage:"Carbon ButtonToggleGroup: Context not found. Have you wrapped your Carbon subcomponents properly? See stack trace for more details.",defaultValue:{handleKeyDown:()=>{},pressedButtonValue:void 0,allowDeselect:!1,isDisabled:!1,size:"medium"}});exports.ButtonToggleGroupProvider=t,exports.useButtonToggleGroupContext=o;
@@ -2,29 +2,47 @@ import React from "react";
2
2
  import { MarginProps } from "styled-system";
3
3
  import { TagProps } from "../../../__internal__/utils/helpers/tags";
4
4
  export interface ButtonToggleGroupProps extends MarginProps, TagProps {
5
- /** Unique id for the root element of the component */
5
+ /** Unique id for the root element of the component. */
6
6
  id: string;
7
7
  /** Toggle buttons to be rendered. Only accepts children of type ButtonToggle */
8
8
  children?: React.ReactNode;
9
- /** aria-label for the group wrapper. Required for accessibility when no text label is provided */
9
+ /** Sets an aria-label for the group, must be provided if there is no visible label. */
10
10
  "aria-label"?: string;
11
- /** Text for the visible label of the button group. */
11
+ /** Visible label for the group. */
12
12
  label?: string;
13
- /** [Legacy] Text for the label's help tooltip. */
13
+ /**
14
+ * [Legacy] Text for the label's help tooltip.
15
+ * @deprecated Help tooltips are no longer supported, please use the `inputHint` prop instead.
16
+ */
14
17
  labelHelp?: React.ReactNode;
15
- /** [Legacy] Spacing between label and a field for inline label, given number will be multiplied by base spacing unit (8) */
18
+ /**
19
+ * [Legacy] Spacing between label and a field for inline label, given number will be multiplied by base spacing unit (8),
20
+ * @deprecated Custom label spacing is no longer supported for this component.
21
+ */
16
22
  labelSpacing?: 1 | 2;
17
23
  /** A hint string rendered before the input but after the label. Intended to describe the purpose or content of the input. */
18
24
  inputHint?: React.ReactNode;
19
25
  /** The percentage width of the ButtonToggleGroup. */
20
26
  inputWidth?: number | string;
21
- /** [Legacy] The text for the field help. */
27
+ /**
28
+ * [Legacy] The text for the field help.
29
+ * @deprecated `fieldHelp` is no longer supported, please use `inputHint` instead.
30
+ */
22
31
  fieldHelp?: string;
23
- /** [Legacy] Sets the field help to inline. */
32
+ /**
33
+ * [Legacy] Sets the field help to inline.
34
+ * @deprecated `fieldHelpInline` is no longer supported.
35
+ */
24
36
  fieldHelpInline?: boolean;
25
- /** [Legacy] Sets the label to be inline. */
37
+ /**
38
+ * [Legacy] Sets the label to be inline.
39
+ * @deprecated Inline labels are no longer supported.
40
+ */
26
41
  labelInline?: boolean;
27
- /** [Legacy] The percentage width of the label. */
42
+ /**
43
+ * [Legacy] The percentage width of the label.
44
+ * @deprecated `labelWidth` is no longer supported.
45
+ */
28
46
  labelWidth?: number;
29
47
  /** If true all ButtonToggle children will flex to the full width of the ButtonToggleGroup parent */
30
48
  fullWidth?: boolean;
@@ -32,17 +50,22 @@ export interface ButtonToggleGroupProps extends MarginProps, TagProps {
32
50
  onChange: (ev: React.MouseEvent<HTMLButtonElement>, value?: string) => void;
33
51
  /** Determines which child button is selected */
34
52
  value: string;
35
- /** [Legacy] Aria label for rendered help component */
53
+ /**
54
+ * [Legacy] Aria label for rendered help component.
55
+ * @deprecated Help tooltips are no longer supported.
56
+ */
36
57
  helpAriaLabel?: string;
37
- /** Allow buttons within the group to be deselected when already selected, leaving no selected button */
58
+ /** Allow selected buttons within the group to be deselected. */
38
59
  allowDeselect?: boolean;
39
- /** Disable all user interaction. */
60
+ /** Disable the group. */
40
61
  disabled?: boolean;
62
+ /** Size of the ButtonToggleGroup */
63
+ size?: "small" | "medium" | "large";
41
64
  /** @private @internal @ignore */
42
65
  "data-component"?: string;
43
66
  }
44
67
  declare const ButtonToggleGroup: {
45
- ({ children, fieldHelp, fieldHelpInline, "aria-label": ariaLabel, label, labelHelp, labelSpacing, inputHint, inputWidth, fullWidth, labelInline, labelWidth, onChange, value, helpAriaLabel, id, allowDeselect, disabled, ...props }: ButtonToggleGroupProps): React.JSX.Element;
68
+ ({ children, fieldHelp, fieldHelpInline, "aria-label": ariaLabel, label, labelHelp, labelSpacing, inputHint, inputWidth, fullWidth, labelInline, labelWidth, onChange, value, helpAriaLabel, id, allowDeselect, disabled, size, "data-component": dataComponent, ...props }: ButtonToggleGroupProps): React.JSX.Element;
46
69
  displayName: string;
47
70
  };
48
71
  export default ButtonToggleGroup;
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),l=require("invariant"),r=require("../../../__internal__/form-field/form-field.component.js"),n=require("../../../__internal__/utils/helpers/tags/tags.js"),i=require("../../../__internal__/utils/helpers/guid/index.js"),o=require("./button-toggle-group.style.js"),a=require("../button-toggle.component.js");require("../../../style/utils/filter-styled-system-padding-props.js");var u=require("../../../style/utils/filter-styled-system-margin-props.js"),s=require("../../../__internal__/tooltip-provider/index.js"),d=require("../../../__internal__/input-behaviour/input-group-behaviour.component.js"),c=require("../../../__internal__/utils/helpers/events/events.js"),p=require("../../carbon-provider/__internal__/new-validation.context.js"),f=require("./__internal__/button-toggle-group.context.js"),b=require("../../../__internal__/legacy-hint-text/hint-text.component.js");function g(e){return e&&e.__esModule?e:{default:e}}var y=g(t),h=g(l);function _(e,t,l){return t in e?Object.defineProperty(e,t,{value:l,enumerable:!0,configurable:!0,writable:!0}):e[t]=l,e}function j(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){_(e,t,l[t])}))}return e}function v(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=l=>{var{children:g,fieldHelp:_,fieldHelpInline:m,"aria-label":O,label:x,labelHelp:q,labelSpacing:w,inputHint:P,inputWidth:H,fullWidth:I,labelInline:B,labelWidth:S,onChange:D,value:T,helpAriaLabel:W,id:A,allowDeselect:C=!1,disabled:E=!1}=l,R=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}(l,["children","fieldHelp","fieldHelpInline","aria-label","label","labelHelp","labelSpacing","inputHint","inputWidth","fullWidth","labelInline","labelWidth","onChange","value","helpAriaLabel","id","allowDeselect","disabled"]);const k=t.useMemo((()=>!y.default.Children.toArray(g).find((e=>!y.default.isValidElement(e)||"ButtonToggle"!==e.type.displayName))),[g]);h.default(k,`\`ButtonToggleGroup\` only accepts children of type \`${a.ButtonToggle.displayName}\``);const G=t.useRef(i.default()),L=t.useRef(i.default()),M=t.useRef(null),{validationRedesignOptIn:K}=t.useContext(p.default),N=e=>K?void 0:e,V=()=>{var e;return null===(e=M.current)||void 0===e?void 0:e.querySelectorAll('[data-element="button-toggle-button"]')},[$,z]=t.useState();var F;return e.jsx(s.TooltipProvider,{helpAriaLabel:W,children:e.jsx(d.InputGroupBehaviour,{children:e.jsx(r.default,v(j({label:x,labelHelp:N(q),labelSpacing:N(w),fieldHelp:N(_),fieldHelpInline:N(m),labelInline:N(B),labelWidth:N(S),labelId:G.current,id:A,labelAs:"span",disabled:E},u.default(R),n.default(null!==(F=R["data-component"])&&void 0!==F?F:"button-toggle-group",R)),{children:e.jsxs(f.ButtonToggleGroupProvider,{value:{onButtonClick:()=>{},handleKeyDown:e=>{const t=V();if(!t||!document.activeElement)return;const l=Array.from(t).indexOf(document.activeElement);let r;c.default.isLeftKey(e)?r=t[0===l?t.length-1:l-1]:c.default.isRightKey(e)&&(r=t[(l+1)%t.length]),r instanceof HTMLButtonElement&&r.focus()},pressedButtonValue:T,onChange:D,allowDeselect:C,isInGroup:!0,isDisabled:E,firstButton:$,childButtonCallbackRef:e=>{setTimeout((()=>{if(e){const t=V();t?e===t[0]&&z(e):z(void 0)}}),0)},hintTextId:P?L.current:void 0},children:[P&&e.jsx(b.HintText,{id:L.current,isDisabled:E,marginBottom:"var(--spacing150)",children:P}),e.jsx(o.default,v(j({ref:M},x?{"aria-labelledby":G.current}:{"aria-label":O}),{labelInline:B,inputWidth:H,fullWidth:I,role:"group",id:A,disabled:E,children:g}))]})}))})})};m.displayName="ButtonToggleGroup",exports.default=m;
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),l=require("../../../__internal__/utils/helpers/tags/tags.js"),r=require("./button-toggle-group.style.js");require("../../../style/utils/filter-styled-system-padding-props.js");var n=require("../../../style/utils/filter-styled-system-margin-props.js"),i=require("../../../__internal__/utils/helpers/events/events.js"),o=require("./__internal__/button-toggle-group.context.js"),a=require("../../../__internal__/label/label.component.js"),u=require("../../../__internal__/hint-text/hint-text.component.js");function s(e,t,l){return t in e?Object.defineProperty(e,t,{value:l,enumerable:!0,configurable:!0,writable:!0}):e[t]=l,e}function d(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){s(e,t,l[t])}))}return e}function c(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 p=s=>{var{children:p,fieldHelp:b,fieldHelpInline:f,"aria-label":g,label:y,labelHelp:h,labelSpacing:j,inputHint:O,inputWidth:v,fullWidth:m=!1,labelInline:_,labelWidth:w,onChange:x,value:P,helpAriaLabel:S,id:D,allowDeselect:q=!1,disabled:W=!1,size:H="medium","data-component":$}=s,z=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}(s,["children","fieldHelp","fieldHelpInline","aria-label","label","labelHelp","labelSpacing","inputHint","inputWidth","fullWidth","labelInline","labelWidth","onChange","value","helpAriaLabel","id","allowDeselect","disabled","size","data-component"]);const B=t.useRef(null),T=O||h,I=y?`${D}-label`:void 0,E=T?`${D}-hint`:void 0,k=()=>{var e;return null===(e=B.current)||void 0===e?void 0:e.querySelectorAll("[data-button-toggle-internal]")},[A,C]=t.useState();return e.jsxs(r.StyledButtonToggleGroup,c(d(c(d({id:D,role:"group"},y&&{"aria-labelledby":I}),{"aria-label":g,$size:H,$fullWidth:m,$width:v}),n.default(z),l.default($||"button-toggle-group",z)),{children:[(y||T)&&e.jsxs(r.StyledLabelWrapper,{children:[y&&e.jsx(a.default,{id:I,size:H,disabled:W,children:y}),T&&e.jsx(u.HintText,{id:E,disabled:W,size:H,children:T})]}),e.jsx(r.StyledButtonToggleWrapper,{"data-role":"button-toggle-group-wrapper",ref:B,$size:H,$isDisabled:W,$fullWidth:m,children:e.jsx(o.ButtonToggleGroupProvider,{value:{handleKeyDown:e=>{const t=k();if(!t||!document.activeElement)return;const l=Array.from(t).indexOf(document.activeElement);let r;i.default.isLeftKey(e)?(e.preventDefault(),r=t[0===l?t.length-1:l-1]):i.default.isRightKey(e)&&(e.preventDefault(),r=t[(l+1)%t.length]),null==r||r.focus()},pressedButtonValue:P,onChange:x,allowDeselect:q,isDisabled:W,firstButton:A,childButtonCallbackRef:e=>{setTimeout((()=>{if(e){const t=k();t?e===t[0]&&C(e):C(void 0)}}),0)},hintTextId:O?E:void 0,size:H,fullWidth:m},children:p})})]}))};p.displayName="ButtonToggleGroup",exports.default=p;
@@ -1,8 +1,16 @@
1
- import { ButtonToggleGroupProps } from ".";
2
- type StyledButtonToggleGroupProps = Pick<ButtonToggleGroupProps, "inputWidth" | "fullWidth" | "disabled" | "labelInline">;
3
- declare const StyledButtonToggleGroup: import("styled-components").StyledComponent<"div", any, {
1
+ interface StyledButtonToggle {
2
+ $size: "small" | "medium" | "large";
3
+ $fullWidth?: boolean;
4
+ $width?: number | string;
5
+ }
6
+ export declare const StyledButtonToggleGroup: import("styled-components").StyledComponent<"div", any, {
4
7
  theme: object;
5
- } & {
6
- type: string;
7
- } & StyledButtonToggleGroupProps, "theme" | "type">;
8
- export default StyledButtonToggleGroup;
8
+ } & StyledButtonToggle, "theme">;
9
+ export declare const StyledLabelWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
10
+ interface StyledButtonToggleWrapper {
11
+ $size: "small" | "medium" | "large";
12
+ $isDisabled?: boolean;
13
+ $fullWidth?: boolean;
14
+ }
15
+ export declare const StyledButtonToggleWrapper: import("styled-components").StyledComponent<"div", any, StyledButtonToggleWrapper, never>;
16
+ export {};
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("styled-components"),e=require("styled-system"),o=require("../../../style/themes/apply-base-theme.js"),r=require("../button-toggle.style.js");function s(t){return t&&t.__esModule?t:{default:t}}const l=s(t).default.div.attrs(o.default).attrs({type:"button"}).withConfig({displayName:"button-toggle-group.style__StyledButtonToggleGroup",componentId:"sc-e2730b28-0"})([""," display:flex;box-shadow:inset 0px 0px 0px 1px var(--colorsActionMinor500);border-radius:var(--borderRadius100);padding:4px;gap:4px;width:fit-content;height:fit-content;flex-wrap:",";"," "," ",""],e.margin,(({labelInline:t})=>t?"nowrap":"wrap"),(({disabled:e})=>e&&t.css(["cursor:not-allowed;box-shadow:inset 0px 0px 0px 1px var(--button-typical-toggle-border-disabled);"])),(({fullWidth:e})=>e&&t.css(["width:100%;","{width:100%;}","{flex:auto;}"],r.StyledButtonToggle,r.StyledButtonToggleWrapper)),(({inputWidth:e})=>e&&t.css(["width:",";"],`${e}%`)));exports.default=l;
1
+ "use strict";var e=require("styled-components"),l=require("styled-system"),t=require("../../../style/themes/apply-base-theme.js");function a(e){return e&&e.__esModule?e:{default:e}}var o=a(e);const r={small:{gap:"var(--global-space-comp-xs)",borderRadius:"var(--global-radius-action-l)"},medium:{gap:"var(--global-space-comp-s)",borderRadius:"var(--global-radius-action-xl)"},large:{gap:"var(--global-space-comp-m)",borderRadius:"var(--global-radius-action-2-xl)"}},s=o.default.div.attrs(t.default).withConfig({displayName:"button-toggle-group.style__StyledButtonToggleGroup",componentId:"sc-9691d771-0"})([""," ",""],(({$size:l,$fullWidth:t,$width:a})=>e.css(["display:flex;flex-direction:column;gap:",";"," ",""],r[l].gap,t&&e.css(["width:100%;"]),a&&e.css(["width:","%;"],a))),l.margin),d=o.default.div.withConfig({displayName:"button-toggle-group.style__StyledLabelWrapper",componentId:"sc-9691d771-1"})(["display:flex;flex-direction:column;"]),i=o.default.div.withConfig({displayName:"button-toggle-group.style__StyledButtonToggleWrapper",componentId:"sc-9691d771-2"})(["",""],(({$size:l,$isDisabled:t,$fullWidth:a})=>e.css(["display:flex;flex-wrap:wrap;padding:var(--global-space-comp-xs);align-items:center;gap:var(--global-space-comp-s);"," border-radius:",";border:var(--global-borderwidth-xs) solid var(--button-typical-toggle-border-default);",""],!a&&e.css(["width:fit-content;"]),r[l].borderRadius,t&&e.css(["border-color:var(--button-typical-toggle-border-disabled);"]))));exports.StyledButtonToggleGroup=s,exports.StyledButtonToggleWrapper=i,exports.StyledLabelWrapper=d;
@@ -1,12 +1,12 @@
1
1
  import React from "react";
2
- import { StyledButtonToggleProps } from "./button-toggle.style";
3
2
  import { TagProps } from "../../__internal__/utils/helpers/tags";
4
- export interface ButtonToggleProps extends Partial<StyledButtonToggleProps>, TagProps {
3
+ import { IconType } from "../icon";
4
+ export interface ButtonToggleProps extends TagProps {
5
5
  /** Prop to specify the aria-label of the component */
6
6
  "aria-label"?: string;
7
7
  /** Prop to specify the aria-labelledby property of the component */
8
8
  "aria-labelledby"?: string;
9
- /** Text to display for the button. */
9
+ /** Content to display within the button. */
10
10
  children?: React.ReactNode;
11
11
  /** Callback triggered by blur event on the button. */
12
12
  onBlur?: (ev: React.FocusEvent<HTMLButtonElement>) => void;
@@ -15,17 +15,30 @@ export interface ButtonToggleProps extends Partial<StyledButtonToggleProps>, Tag
15
15
  /** Callback triggered by click event on the button. */
16
16
  onClick?: (ev: React.MouseEvent<HTMLButtonElement>) => void;
17
17
  /**
18
- * Set the pressed state of the toggle button
19
- * @deprecated
18
+ * Set the pressed state of the toggle button.
19
+ * @deprecated Please control the state of selected buttons through ButtonToggleGroup.
20
20
  * */
21
21
  pressed?: boolean;
22
- /** An optional string by which to identify the button in either an onClick handler, or an onChange handler on the parent ButtonToggleGroup. */
22
+ /** An optional string by which to identify the button in an onChange handler on the parent ButtonToggleGroup. */
23
23
  value?: string;
24
+ /** Icon rendered within the button. Will not be rendered if size is small. */
25
+ buttonIcon?: IconType;
26
+ /**
27
+ * Sets the size of the buttonIcon
28
+ * @deprecated `buttonIconSize` is no longer supported.
29
+ */
30
+ buttonIconSize?: "small" | "large";
31
+ /** Disable the ButtonToggle. */
32
+ disabled?: boolean;
33
+ /** ButtonToggle size */
34
+ size?: "small" | "medium" | "large";
35
+ /** Allow a selected button to be deselected. */
36
+ allowDeselect?: boolean;
24
37
  /** @private @internal @ignore */
25
38
  "data-component"?: string;
26
39
  }
27
40
  export declare const ButtonToggle: {
28
- ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, buttonIcon, buttonIconSize, children, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, disabled, onBlur, onFocus, onClick, pressed, size, value, }: ButtonToggleProps): React.JSX.Element;
41
+ ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, buttonIcon, buttonIconSize, children, disabled, onBlur, onFocus, onClick, pressed, size, value, "data-component": dataComponent, ...rest }: ButtonToggleProps): React.JSX.Element;
29
42
  displayName: string;
30
43
  };
31
44
  export default ButtonToggle;
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),n=require("invariant"),o=require("./button-toggle.style.js"),r=require("../../__internal__/utils/helpers/guid/index.js"),u=require("./button-toggle-group/__internal__/button-toggle-group.context.js"),l=require("./button-toggle-icon.component.js"),a=require("../../__internal__/input-behaviour/input-group-behaviour.component.js"),i=require("../../__internal__/utils/logger/index.js");function s(e){return e&&e.__esModule?e:{default:e}}var c=s(n);function d(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function b(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},o=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),o.forEach((function(t){d(e,t,n[t])}))}return e}let p=!1;const g=({"aria-label":n,"aria-labelledby":s,buttonIcon:d,buttonIconSize:g="small",children:f,"data-component":y,"data-element":j,"data-role":O,disabled:h,onBlur:m,onFocus:_,onClick:v,pressed:x,size:w="medium",value:B})=>{c.default(!(!f&&!d),"Either prop `buttonIcon` must be defined, or this node must have children"),x&&!p&&(i.default.deprecate("The `pressed` prop is deprecated."),p=!0);const I=t.useRef(null),{onMouseEnter:P,onMouseLeave:q,onBlur:C,onFocus:D}=t.useContext(a.InputGroupContext),{onButtonClick:S,handleKeyDown:T,pressedButtonValue:k,onChange:M,allowDeselect:z,isInGroup:E,isDisabled:F,firstButton:G,childButtonCallbackRef:R,hintTextId:K}=u.useButtonToggleGroupContext(),L=t.useRef(r.default()),N=E?k&&k===B:x,V=I.current===G,W=!E||N||!k&&V;return e.jsx(o.StyledButtonToggleWrapper,{"data-component":y||"button-toggle","data-element":j,"data-role":O,children:e.jsxs(o.StyledButtonToggle,(A=b({"aria-label":n,"aria-labelledby":s,"aria-describedby":K,"aria-pressed":!!N,buttonIcon:d,buttonIconSize:g,"data-element":"button-toggle-button",disabled:h||F,id:L.current,onMouseEnter:P,onMouseLeave:q,size:w,value:B,onFocus:function(e){null==_||_(e),null==D||D()},onBlur:function(e){null==m||m(e),null==C||C()},onClick:function(e){v&&v(e),null==M||M(e,z&&k&&k===B?void 0:B),B&&S(B)},onKeyDown:T},W?{tabIndex:0}:{tabIndex:-1}),H={allowDeselect:z,ref:e=>{I.current=e,null==R||R(e)},children:[d&&e.jsx(l.default,{buttonIcon:d,buttonIconSize:g,disabled:h,hasContent:!!f}),f]},H=null!=H?H:{},Object.getOwnPropertyDescriptors?Object.defineProperties(A,Object.getOwnPropertyDescriptors(H)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t.push.apply(t,n)}return t}(Object(H)).forEach((function(e){Object.defineProperty(A,e,Object.getOwnPropertyDescriptor(H,e))})),A))});var A,H};g.displayName="ButtonToggle",exports.ButtonToggle=g,exports.default=g;
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),n=require("invariant"),r=require("./button-toggle.style.js"),o=require("../../__internal__/utils/helpers/guid/index.js"),l=require("./button-toggle-group/__internal__/button-toggle-group.context.js"),u=require("../../__internal__/utils/helpers/tags/tags.js"),i=require("../icon/icon.component.js"),a=require("../button/__next__/__internal__/utils/is-icon-only.js");function s(e){return e&&e.__esModule?e:{default:e}}var c=s(n);function b(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function d(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),r.forEach((function(t){b(e,t,n[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 n=Object.getOwnPropertySymbols(e);t.push.apply(t,n)}return t}(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))})),e}const p=n=>{var{"aria-label":s,"aria-labelledby":b,buttonIcon:p,buttonIconSize:g,children:y,disabled:O,onBlur:j,onFocus:_,onClick:h,pressed:m,size:v,value:x,"data-component":w}=n,P=function(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},l=Object.keys(e);for(r=0;r<l.length;r++)n=l[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(r=0;r<l.length;r++)n=l[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}(n,["aria-label","aria-labelledby","buttonIcon","buttonIconSize","children","disabled","onBlur","onFocus","onClick","pressed","size","value","data-component"]);const q=t.useRef(null),B=t.useRef(o.default()),{handleKeyDown:I,pressedButtonValue:D,onChange:S,allowDeselect:k,isDisabled:z,firstButton:C,childButtonCallbackRef:E,hintTextId:T,size:$,fullWidth:F}=l.useButtonToggleGroupContext(),R=D===x||m,K=q.current===C,M=R||!D&&K,N=v||$,W=p&&!y||a.default(y);return c.default(!(!y&&!p),"Either prop `buttonIcon` must be defined, or this node must have children"),c.default(!(W&&"small"===N),"Cannot render an icon-only button in small size."),e.jsxs(r.default,f(d(f(d({className:"button-toggle","data-button-toggle-internal":!0,"aria-label":s,"aria-labelledby":b,"aria-describedby":T,"aria-pressed":!!R,disabled:O||z,id:B.current,$size:N,$active:!!R,$iconOnly:W,$fullWidth:F,value:x,onFocus:_,onBlur:j,onClick:function(e){null==h||h(e),null==S||S(e,k&&D===x?void 0:x)},onKeyDown:I},M?{tabIndex:0}:{tabIndex:-1}),{ref:e=>{q.current=e,null==E||E(e)}}),P,u.default(w||"button-toggle",P)),{children:[p&&"small"!==N&&e.jsx(i.default,{"aria-hidden":!0,type:p}),y]}))};p.displayName="ButtonToggle",exports.ButtonToggle=p,exports.default=p;
@@ -1,41 +1,11 @@
1
- import { IconType } from "../icon";
2
- export type ButtonToggleIconSizes = "small" | "large";
3
- export declare const heightConfig: {
4
- small: number;
5
- medium: number;
6
- large: number;
7
- };
8
- export declare const fontSizeConfig: {
9
- small: number;
10
- medium: number;
11
- large: number;
12
- };
13
- export declare const paddingConfig: {
14
- small: number;
15
- medium: number;
16
- large: number;
17
- };
18
- declare const StyledButtonToggleContentWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
19
- export interface StyledButtonToggleProps {
20
- /** The icon to be rendered inside of the button */
21
- buttonIcon?: IconType;
22
- /** Sets the size of the buttonIcon (eg. large) */
23
- buttonIconSize?: ButtonToggleIconSizes;
24
- /** Disable all user interaction. */
1
+ interface StyledButtonToggleProps {
25
2
  disabled?: boolean;
26
- /** ButtonToggle size */
27
- size: "small" | "medium" | "large";
28
- /** Allow button to be deselected when already selected */
29
- allowDeselect?: boolean;
3
+ $size: "small" | "medium" | "large";
4
+ $active?: boolean;
5
+ $iconOnly?: boolean;
6
+ $fullWidth?: boolean;
30
7
  }
31
8
  declare const StyledButtonToggle: import("styled-components").StyledComponent<"button", any, {
32
9
  theme: object;
33
10
  } & StyledButtonToggleProps, "theme">;
34
- export interface StyledButtonToggleIconProps {
35
- /** Sets the size of the buttonIcon (eg. large) */
36
- buttonIconSize?: ButtonToggleIconSizes;
37
- hasContent?: boolean;
38
- }
39
- declare const StyledButtonToggleIcon: import("styled-components").StyledComponent<"div", any, StyledButtonToggleIconProps, never>;
40
- declare const StyledButtonToggleWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
41
- export { StyledButtonToggle, StyledButtonToggleWrapper, StyledButtonToggleIcon, StyledButtonToggleContentWrapper, };
11
+ export default StyledButtonToggle;
@@ -1 +1 @@
1
- "use strict";var o=require("styled-components"),e=require("../icon/icon.style.js"),t=require("../../style/themes/apply-base-theme.js"),r=require("../../style/utils/add-focus-styling.js");function i(o){return o&&o.__esModule?o:{default:o}}var n=i(o);const l={small:24,medium:32,large:40},a={small:14,medium:14,large:16},s={small:8,medium:8,large:12},d={small:72,medium:88,large:120},g={small:"var(--spacing100)",medium:"var(--spacing100) var(--spacing150) var(--spacing000)",large:"var(--spacing100) var(--spacing300)"},c=n.default.div.withConfig({displayName:"button-toggle.style__StyledButtonToggleContentWrapper",componentId:"sc-d02b9d63-0"})(["display:flex;justify-content:center;align-items:center;width:100%;height:100%;flex-flow:wrap;"]),u=n.default.button.attrs(t.default).withConfig({displayName:"button-toggle.style__StyledButtonToggle",componentId:"sc-d02b9d63-1"})(["display:inline-flex;justify-content:center;align-items:center;position:relative;box-sizing:border-box;max-width:100%;font-weight:500;background-color:transparent;cursor:pointer;text-align:center;color:var(--colorsActionMinor500);border:none;","{color:var(--colorsActionMinor500);height:var(--sizing250);width:var(--sizing250);}"," "," &:focus{"," z-index:100;}&:not(:disabled):hover{background-color:var(--colorsActionMinor600);color:var(--colorsActionMinorYang100);",'{color:var(--colorsActionMinorYang100);}}&[aria-pressed="true"]{background-color:var(--colorsActionMinor850);color:var(--colorsActionMinorYang100);',"{color:var(--colorsActionMinorYang100);}","}",""],e.default,(({size:e})=>o.css(["min-height:","px;padding:0 ","px;font-size:","px;"],l[e],s[e],a[e])),(({buttonIcon:e,buttonIconSize:t,size:r})=>e&&"large"===t&&o.css(["min-height:","px;padding:",";flex-direction:column;"],d[r],g[r])),r.default(),e.default,e.default,(({allowDeselect:e})=>!e&&o.css(["cursor:auto;"])),(({disabled:t})=>t&&o.css(["cursor:not-allowed;&{color:var(--button-typical-toggle-label-disabled);",'{color:var(--button-typical-toggle-label-disabled);}}&[aria-pressed="true"]{cursor:not-allowed;background-color:var(--colorsActionMinorYin030);}'],e.default))),p=n.default.div.withConfig({displayName:"button-toggle.style__StyledButtonToggleIcon",componentId:"sc-d02b9d63-2"})([""," ",""],(({hasContent:o})=>o&&"margin-right: 8px;"),(({buttonIconSize:t})=>"large"===t&&o.css(["margin-right:0;","{margin-left:0;margin-right:0;margin-bottom:8px;height:var(--sizing400);width:var(--sizing400);}","::before{font-size:var(--sizing400);line-height:var(--sizing400);}.carbon-icon__svg--credit-card-slash{margin-left:6px;}"],e.default,e.default))),m=n.default.div.withConfig({displayName:"button-toggle.style__StyledButtonToggleWrapper",componentId:"sc-d02b9d63-3"})(["display:inline-block;vertical-align:middle;&&&&{","{border-radius:var(--borderRadius050);}}"],u);exports.StyledButtonToggle=u,exports.StyledButtonToggleContentWrapper=c,exports.StyledButtonToggleIcon=p,exports.StyledButtonToggleWrapper=m,exports.fontSizeConfig=a,exports.heightConfig=l,exports.paddingConfig=s;
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var a=require("styled-components"),e=require("../../style/themes/apply-base-theme.js"),l=require("../../style/utils/add-focus-styling.js");function t(a){return a&&a.__esModule?a:{default:a}}const o={small:{size:"var(--global-size-xs)",padding:"var(--global-space-comp-2-xs) var(--global-space-comp-s)",borderRadius:"12px"},medium:{size:"var(--global-size-s)",padding:"var(--global-space-comp-xs) var(--global-space-comp-m)",borderRadius:"var(--global-radius-action-l)"},large:{size:"var(--global-size-m)",padding:"var(--global-space-comp-s) var(--global-space-comp-l)",borderRadius:"var(--global-radius-action-xl)"}},s=t(a).default.button.attrs(e.default).withConfig({displayName:"button-toggle.style__StyledButtonToggle",componentId:"sc-c4bff221-0"})(["",""],(({$active:e,$size:t,disabled:s,$iconOnly:r,$fullWidth:c})=>a.css(["display:inline-flex;justify-content:center;align-items:center;flex-wrap:nowrap;white-space:nowrap;cursor:pointer;gap:var(--global-space-comp-s);height:",";"," "," "," border-radius:",";border:none;background-color:transparent;color:var(--button-typical-toggle-label-default);font:var(--global-font-static-comp-medium-m);text-align:center;"," "," ",""],o[t].size,!r&&a.css(["padding:",";"],o[t].padding),r&&a.css(["width:",";"],o[t].size),c&&a.css(["flex:1 1 auto;"]),o[t].borderRadius,e&&a.css(["background:var(--button-typical-toggle-bg-active);color:var(--button-typical-toggle-label-active);"]),s&&a.css(["cursor:not-allowed;color:var(--button-typical-toggle-label-disabled);",""],e&&a.css(["background:var(--button-typical-toggle-bg-active-disabled);color:var(--button-typical-toggle-label-active-disabled);"])),!s&&a.css(["&:focus{","}&:hover{background:var(--button-typical-toggle-bg-hover);color:var(--button-typical-toggle-label-hover);}"],l.default()))));exports.default=s;
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("styled-system"),o=require("../../style/themes/apply-base-theme.js"),r=require("../../style/utils/add-focus-styling.js"),i=require("../../style/utils/color.js"),n=require("../../__internal__/dom/globals.js"),s=require("../../__internal__/utils/helpers/browser-type-check/index.js"),l=require("./icon-config.js"),a=require("./icon-unicodes.js"),c=require("../button/__next__/button.style.js");function d(e){return e&&e.__esModule?e:{default:e}}var u=d(e);const f=e.css([""," &{color:currentColor;}.mentions-list-item &&{color:currentColor;}.mentions-list-item:hover &&,.mentions-list-item.selected &&{color:currentColor;}.search &{color:var(--colorsUtilityYin065);&:hover{color:var(--colorsUtilityYin100);}}.search.dark-background:not(.with-button) &{color:var(--colorsUtilityYang080);:hover{color:var(--colorsUtilityYang100);}}.multi-select &,.filterable-select &{cursor:pointer;}"],c.StyledButton),g=u.default.span.attrs(o.default).withConfig({displayName:"icon.style__StyledIcon",componentId:"sc-88df3881-0"})(["",""],(({theme:o,color:c,bg:d,isInteractive:u,bgSize:g,bgShape:m,type:h,fontSize:y,disabled:b,tabIndex:v,inverse:p})=>{let _=p?"var(--container-standard-inverse-icon)":"var(--container-standard-icon)",j="transparent";const q=n.getWindow(),x=n.getNavigator(),S=g?l.default.backgroundSize[g]:void 0;if(b)_="var(--colorsYin030)";else if(c){const{color:e}=i.default({color:c,theme:o});_=e}if(d){const{backgroundColor:e}=i.default({bg:d,theme:o});j=e}return e.css(["position:relative;color:",";background-color:",";vertical-align:middle;align-items:center;display:inline-flex;justify-content:center;height:",";width:",";",";",' &::before{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:CarbonIcons;content:"','";font-style:normal;font-weight:normal;vertical-align:middle;'," "," "," display:block;}"," "," ",""],_,j,S,S,m?`border-radius: ${l.default.backgroundShape[m]}`:"",u&&e.css(["&:not(:focus):hover{filter:brightness(0.9);}"]),a.default[h],y&&e.css(["font-size:",";line-height:",";"],l.default.iconSize[y],l.default.iconSize[y]),q&&"services"===h&&s.default(q)&&e.css(["margin-top:",";"],"small"===y?"-7px":"-8px"),x&&q&&"services"===h&&s.isSafari(x)&&!s.default(q)&&e.css(["margin-top:-6px;"]),void 0!==v&&`\n :focus {\n ${r.default()}\n }\n `,t.margin,f)}));exports.default=g;
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("styled-system"),o=require("../../style/themes/apply-base-theme.js"),r=require("../../style/utils/add-focus-styling.js"),i=require("../../style/utils/color.js"),n=require("../../__internal__/dom/globals.js"),s=require("../../__internal__/utils/helpers/browser-type-check/index.js"),l=require("./icon-config.js"),a=require("./icon-unicodes.js"),c=require("../button/__next__/button.style.js");function u(e){return e&&e.__esModule?e:{default:e}}var d=u(e);const f=e.css([""," &{color:currentColor;}.mentions-list-item &&{color:currentColor;}.mentions-list-item:hover &&,.mentions-list-item.selected &&{color:currentColor;}.search &{color:var(--colorsUtilityYin065);&:hover{color:var(--colorsUtilityYin100);}}.search.dark-background:not(.with-button) &{color:var(--colorsUtilityYang080);:hover{color:var(--colorsUtilityYang100);}}.multi-select &,.filterable-select &{cursor:pointer;}.button-toggle &&{color:currentColor;}"],c.StyledButton),g=d.default.span.attrs(o.default).withConfig({displayName:"icon.style__StyledIcon",componentId:"sc-f9838ea5-0"})(["",""],(({theme:o,color:c,bg:u,isInteractive:d,bgSize:g,bgShape:m,type:b,fontSize:h,disabled:y,tabIndex:v,inverse:p})=>{let _=p?"var(--container-standard-inverse-icon)":"var(--container-standard-icon)",j="transparent";const q=n.getWindow(),x=n.getNavigator(),S=g?l.default.backgroundSize[g]:void 0;if(y)_="var(--colorsYin030)";else if(c){const{color:e}=i.default({color:c,theme:o});_=e}if(u){const{backgroundColor:e}=i.default({bg:u,theme:o});j=e}return e.css(["position:relative;color:",";background-color:",";vertical-align:middle;align-items:center;display:inline-flex;justify-content:center;height:",";width:",";",";",' &::before{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:CarbonIcons;content:"','";font-style:normal;font-weight:normal;vertical-align:middle;'," "," "," display:block;}"," "," ",""],_,j,S,S,m?`border-radius: ${l.default.backgroundShape[m]}`:"",d&&e.css(["&:not(:focus):hover{filter:brightness(0.9);}"]),a.default[b],h&&e.css(["font-size:",";line-height:",";"],l.default.iconSize[h],l.default.iconSize[h]),q&&"services"===b&&s.default(q)&&e.css(["margin-top:",";"],"small"===h?"-7px":"-8px"),x&&q&&"services"===b&&s.isSafari(x)&&!s.default(q)&&e.css(["margin-top:-6px;"]),void 0!==v&&`\n :focus {\n ${r.default()}\n }\n `,t.margin,f)}));exports.default=g;
@@ -1 +1 @@
1
- "use strict";var a=require("styled-components");function t(a){return a&&a.__esModule?a:{default:a}}var o=t(a);const e=a.keyframes(["0%{transform:translate3d(0px,0px,0px) scale(0.3);opacity:0;}10%{transform:translate3d(0px,0px,0px) scale(0.3);opacity:0;}20%{transform:translate3d(0px,0px,0px) scale(0.6);opacity:1;}35%{transform:translate3d(0px,0px,0px) scale(0.6);opacity:1;}55%{transform:translate3d(16px,-12px,0px) scale(1.4);opacity:1;}60%{transform:translate3d(16px,-12px,0px) scale(1.4);opacity:1;}90%{transform:translate3d(0px,-24px,0px) scale(0.8);opacity:1;}100%{transform:translate3d(0px,-24px,0px) scale(0.6);opacity:0;}"]),s=a.keyframes(["0%{stop-color:#13a038;}10%{stop-color:#13a038;}50%{stop-color:#0092db;}90%{stop-color:#8f49fe;}100%{stop-color:#8f49fe;}"]),i=a.keyframes(["0%{stop-color:#13a038;}10%{stop-color:#13a038;}50%{stop-color:#13a038;}90%{stop-color:#0092db;}100%{stop-color:#0092db;}"]),r="3s",n=o.default.svg.withConfig({displayName:"star.style__StyledStarSVG",componentId:"sc-1b60e449-0"})(["animation:"," "," ease-in-out forwards infinite;height:var(--sizing200);opacity:0;width:var(--sizing200);"],e,r),p=o.default.stop.withConfig({displayName:"star.style__GradientStopTop",componentId:"sc-1b60e449-1"})(["animation:"," "," ease-in-out forwards infinite;"],s,r),l=o.default.stop.withConfig({displayName:"star.style__GradientStopBottom",componentId:"sc-1b60e449-2"})(["animation:"," "," ease-in-out forwards infinite;"],i,r),d=o.default.div.withConfig({displayName:"star.style__StyledLoaderStarContainer",componentId:"sc-1b60e449-3"})(["bottom:0;height:var(--sizing200);left:0;position:absolute;width:var(--sizing200);&.star-1{.ai-star-path{fill:url(#gradient1);}","{animation-delay:-2s;}#gradient1{","{animation-delay:-2s;}","{animation-delay:-2s;}}}&.star-2{.ai-star-path{fill:url(#gradient2);}","{animation-delay:-1s;}#gradient2{","{animation-delay:-1s;}","{animation-delay:-1s;}}}&.star-3{.ai-star-path{fill:url(#gradient3);}","{animation-delay:0s;}#gradient3{","{animation-delay:0s;}","{animation-delay:0s;}}}"],n,p,l,n,p,l,n,p,l);exports.GradientStopBottom=l,exports.GradientStopTop=p,exports.StyledLoaderStarContainer=d,exports.StyledStarSVG=n;
1
+ "use strict";var a=require("styled-components");function t(a){return a&&a.__esModule?a:{default:a}}var o=t(a);const e=a.keyframes(["0%{transform:translate3d(0px,0px,0px) scale(0.3);opacity:0;}10%{transform:translate3d(0px,0px,0px) scale(0.3);opacity:0;}20%{transform:translate3d(0px,0px,0px) scale(0.6);opacity:1;}35%{transform:translate3d(0px,0px,0px) scale(0.6);opacity:1;}55%{transform:translate3d(16px,-12px,0px) scale(1.4);opacity:1;}60%{transform:translate3d(16px,-12px,0px) scale(1.4);opacity:1;}90%{transform:translate3d(0px,-24px,0px) scale(0.8);opacity:1;}100%{transform:translate3d(0px,-24px,0px) scale(0.6);opacity:0;}"]),r=a.keyframes(["0%{stop-color:var(--mode-color-ai-alt-stop-1);}10%{stop-color:var(--mode-color-ai-alt-stop-1);}50%{stop-color:var(--mode-color-ai-alt-stop-2);}90%{stop-color:var(--mode-color-ai-alt-stop-3);}100%{stop-color:var(--mode-color-ai-alt-stop-3);}"]),s=a.keyframes(["0%{stop-color:var(--mode-color-ai-alt-stop-1);}10%{stop-color:var(--mode-color-ai-alt-stop-1);}50%{stop-color:var(--mode-color-ai-alt-stop-1);}90%{stop-color:var(--mode-color-ai-alt-stop-2);}100%{stop-color:var(--mode-color-ai-alt-stop-2);}"]),i="3s",l=o.default.svg.withConfig({displayName:"star.style__StyledStarSVG",componentId:"sc-8f59fe79-0"})(["animation:"," "," ease-in-out forwards infinite;height:var(--global-size-3-xs);opacity:0;width:var(--global-size-3-xs);"],e,i),n=o.default.stop.withConfig({displayName:"star.style__GradientStopTop",componentId:"sc-8f59fe79-1"})(["animation:"," "," ease-in-out forwards infinite;"],r,i),p=o.default.stop.withConfig({displayName:"star.style__GradientStopBottom",componentId:"sc-8f59fe79-2"})(["animation:"," "," ease-in-out forwards infinite;"],s,i),d=o.default.div.withConfig({displayName:"star.style__StyledLoaderStarContainer",componentId:"sc-8f59fe79-3"})(["bottom:0;height:var(--global-size-3-xs);left:0;position:absolute;width:var(--global-size-3-xs);&.star-1{.ai-star-path{fill:url(#gradient1);}","{animation-delay:-2s;}#gradient1{","{animation-delay:-2s;}","{animation-delay:-2s;}}}&.star-2{.ai-star-path{fill:url(#gradient2);}","{animation-delay:-1s;}#gradient2{","{animation-delay:-1s;}","{animation-delay:-1s;}}}&.star-3{.ai-star-path{fill:url(#gradient3);}","{animation-delay:0s;}#gradient3{","{animation-delay:0s;}","{animation-delay:0s;}}}"],l,n,p,l,n,p,l,n,p);exports.GradientStopBottom=p,exports.GradientStopTop=n,exports.StyledLoaderStarContainer=d,exports.StyledStarSVG=l;
@@ -1 +1 @@
1
- "use strict";var e=require("styled-components"),t=require("styled-system"),a=require("../../../style/themes/apply-base-theme.js"),r=require("../../typography/typography.component.js");require("react/jsx-runtime"),require("react");var i=require("../../button/button.style.js"),o=require("../../button/__next__/button.style.js");function n(e){return e&&e.__esModule?e:{default:e}}var s=n(e);const l={"extra-small":20,small:32,medium:64,large:80},d={"extra-small":2.7,small:2.7,medium:2.7,large:2.7},c={small:"4px",medium:"8px",large:"16px"},p={"extra-small":"8px",small:"8px",medium:"12px",large:"16px"},m=e.keyframes(["0%{left:0%;animation-timing-function:linear;}30%{left:10px;animation-timing-function:cubic-bezier(0.5,0.6,0.4,1);}100%{left:calc(100% - 15px);}"]),u=e.keyframes(["0%{width:15px;animation-timing-function:cubic-bezier(0.7,0,0.8,1);}50%{width:35%;}100%{width:15px;}"]),f=e.keyframes(["from{stroke-dasharray:100;stroke-dashoffset:100;}to{stroke-dasharray:100;stroke-dashoffset:20;}"]),g=e.keyframes(["0%{transform:rotate(-90deg);stroke-dashoffset:95;}50%{transform:rotate(90deg);stroke-dashoffset:80;}100%{transform:rotate(270deg);stroke-dashoffset:95;}"]),x=(e,t)=>{const a=t?"rgba(255, 255, 255, 0.08)":"rgba(0, 0, 0, 0.08)";return"ai"===e?{outerBarBackground:a,innerBarBackground:t?"linear-gradient(90deg, var(--mode-color-ai-alt-stop-1, #00D639) 0%, var(--mode-color-ai-alt-stop-2, #00D6DE) 40%, var(--mode-color-ai-alt-stop-3, #9D60FF) 90%)":"linear-gradient(90deg, var(--mode-color-ai-stop-1, #13A038) 0%, var(--mode-color-ai-stop-2, #149197) 40%, var(--mode-color-ai-stop-3, #A87CFB) 90%)"}:{outerBarBackground:a,innerBarBackground:t?"#FFFFFF":"#000000"}},y=e.css(["display:flex;justify-content:center;text-align:center;"]),h=s.default.div.withConfig({displayName:"loader.style__StyledLoaderPlaceholder",componentId:"sc-c561a0b8-0"})(["display:inline-block;min-width:var(--sizing800);"]),b=s.default.div.attrs(a.default).withConfig({displayName:"loader.style__StyledLoader",componentId:"sc-c561a0b8-1"})([""," text-align:center;white-space:nowrap;"],t.margin),v=s.default.div.withConfig({displayName:"loader.style__OuterBar",componentId:"sc-c561a0b8-2"})(["",""],(({size:t,variant:a,inverse:r})=>e.css(["border-radius:var(--borderRadius400);height:",";width:100%;background:",";overflow:hidden;position:relative;"],c[t],x(a,r).outerBarBackground))),k=s.default.div.withConfig({displayName:"loader.style__InnerBar",componentId:"sc-c561a0b8-3"})(["",""],(({size:t,variant:a,inverse:r,animationTime:i,hasMotion:o})=>e.css(["position:absolute;background:",";width:15px;height:",";border-radius:var(--borderRadius400);animation-name:",",",";"," animation-iteration-count:",";"],x(a,r).innerBarBackground,c[t],m,u,o&&`animation-duration: ${i}s, ${i}s;`,o?"infinite, infinite":"none, none"))),w=s.default.svg.withConfig({displayName:"loader.style__StyledRingCircleSvg",componentId:"sc-c561a0b8-4"})(["",""],(({inverse:t,size:a,hasMotion:r,isTracked:n,isError:s,isSuccess:c,isGradientVariant:p,animationTime:m})=>{const u=`${l[a]}px`,x=d[a];return e.css(["height:",";min-height:",';circle[data-role="outer-arc"]{fill:transparent;stroke-width:',"px;stroke:",';cx:12px;cy:12px;r:10px;}circle[data-role="inner-arc"]{fill:transparent;stroke-width:',"px;stroke:",";stroke-linecap:round;stroke-dasharray:100px;stroke-dashoffset:95px;transform-origin:12px 12px 0px;cx:12px;cy:12px;r:10px;transform:rotate(-90deg);animation-name:",";"," animation-timing-function:cubic-bezier(0,0,1,1);animation-iteration-count:",";}"," ",""],u,u,x,t?"rgba(255,255,255,0.08)":"rgba(0,0,0,0.08)",x,p?"none":(({inverse:e,isSuccess:t,isError:a})=>a?"#DB004E;":t?"#00811F;":e?"#FFF;":"#000000")({inverse:t,isSuccess:c,isError:s}),n?f:g,r&&`animation-duration: ${m}s;`,r?"infinite":"none",p&&e.css(['circle[data-role="gradient-mask-arc"]{fill:none;stroke:white;stroke-width:',"px;stroke-linecap:round;stroke-dasharray:100px;stroke-dashoffset:95px;transform-origin:12px 12px 0px;cx:12px;cy:12px;r:10px;transform:rotate(-90deg);animation-name:",";"," animation-timing-function:cubic-bezier(0,0,1,1);animation-iteration-count:",";}"],x,g,r&&`animation-duration: ${m}s;`,r?"infinite":"none"),!p&&e.css(["",' & circle[data-role="inner-arc"],',' & circle[data-role="inner-arc"]{stroke:currentColor;}'],o.StyledButton,i.default))})),S=s.default.div.withConfig({displayName:"loader.style__StyledGradientFill",componentId:"sc-c561a0b8-5"})(["width:100%;height:100%;background:radial-gradient( 1514.52% 80.26% at 56.89% 94.74%,var(--mode-color-ai-alt-stop-1) 0%,var(--mode-color-ai-alt-stop-2) 51.22%,var(--mode-color-ai-stop-3) 100% );"]),_="40px",B=s.default.div.withConfig({displayName:"loader.style__StyledStars",componentId:"sc-c561a0b8-6"})(["position:relative;width:",";height:",";"],_,_),C={standalone:{small:"4px",medium:"8px",large:"12px"},ring:{"extra-small":"4px",small:"8px",medium:"8px",large:"12px"}},F=s.default.div.withConfig({displayName:"loader.style__StyledStarLoaderWrapper",componentId:"sc-c561a0b8-7"})(["position:relative;display:flex;align-items:center;justify-content:center;"]),L=s.default(r.Typography).withConfig({displayName:"loader.style__StyledLoaderLabel",componentId:"sc-c561a0b8-8"})([""," line-height:150%;color:",";"," &,"," &{color:currentColor;}",""],y,(({inverse:e})=>e?"rgba(255, 255, 255, 0.55)":"rgba(0, 0, 0, 0.65)"),o.StyledButton,i.default,(({$size:t="medium",loaderType:a,loaderVariant:r})=>{const i=t;return"star"===a?e.css(["font-size:16px;font-weight:400;margin-left:12px;width:min-content;"]):"standalone"===a?e.css(["font-size:",";font-weight:500;width:100%;margin-top:",";"],"large"===i?"16px":"14px",C[a][i]):e.css(["font-size:",";font-weight:500;width:",";",";"],"large"===i?"16px":"extra-small"===i?"13px":"14px","inline"===r?"auto":"100%","inline"===r?`margin-left: ${p[i]}`:`margin-top: ${C[a][i]}`)})),I=s.default.div.withConfig({displayName:"loader.style__StyledRingLoaderWrapper",componentId:"sc-c561a0b8-9"})(["",""],(({loaderVariant:t})=>e.css(["display:flex;flex-direction:",";align-items:center;justify-content:center;width:",";"],"inline"===t?"row":"column","inline"===t?"auto":"100%"))),z=s.default.span.withConfig({displayName:"loader.style__StyledLabel",componentId:"sc-c561a0b8-10"})(["",";"],(({inverse:t})=>e.css(["color:",";"," &,"," &{color:currentColor;}"],t?"rgba(255, 255, 255, 0.90)":"rgba(0, 0, 0, 0.90)",o.StyledButton,i.default)));exports.InnerBar=k,exports.OuterBar=v,exports.StyledGradientFill=S,exports.StyledLabel=z,exports.StyledLoader=b,exports.StyledLoaderLabel=L,exports.StyledLoaderPlaceholder=h,exports.StyledRingCircleSvg=w,exports.StyledRingLoaderWrapper=I,exports.StyledStarLoaderWrapper=F,exports.StyledStars=B;
1
+ "use strict";var e=require("styled-components"),a=require("styled-system"),r=require("../../../style/themes/apply-base-theme.js"),t=require("../../typography/typography.component.js");require("react/jsx-runtime"),require("react");var o=require("../../button/button.style.js"),i=require("../../button/__next__/button.style.js");function s(e){return e&&e.__esModule?e:{default:e}}var l=s(e);const n={"extra-small":20,small:32,medium:64,large:80},d={"extra-small":2.7,small:2.7,medium:2.7,large:2.7},c={small:"var(--global-radius-container-2-xs)",medium:"var(--global-radius-container-xs)",large:"var(--global-radius-container-m)"},m={small:"var(--global-size-5-xs)",medium:"var(--global-size-4-xs)",large:"var(--global-size-3-xs)"},p={"extra-small":"var(--global-space-comp-s)",small:"var(--global-space-comp-s)",medium:"var(--global-space-comp-m)",large:"var(--global-space-comp-l)"},g=e.keyframes(["0%{left:0%;animation-timing-function:linear;}30%{left:10px;animation-timing-function:cubic-bezier(0.5,0.6,0.4,1);}100%{left:calc(100% - 15px);}"]),f=e.keyframes(["0%{width:15px;animation-timing-function:cubic-bezier(0.7,0,0.8,1);}50%{width:35%;}100%{width:15px;}"]),u=e.keyframes(["from{stroke-dasharray:100;stroke-dashoffset:100;}to{stroke-dasharray:100;stroke-dashoffset:20;}"]),v=e.keyframes(["0%{transform:rotate(-90deg);stroke-dashoffset:95;}50%{transform:rotate(90deg);stroke-dashoffset:80;}100%{transform:rotate(270deg);stroke-dashoffset:95;}"]),y=(e,a)=>{const r=a?"var(--progress-loader-inverse-bg-default)":"var(--progress-loader-bg-default)";return"ai"===e?{outerBarBackground:r,innerBarBackground:"linear-gradient(90deg, var(--mode-color-ai-alt-stop-1) 0%, var(--mode-color-ai-alt-stop-2) 40%, var(--mode-color-ai-alt-stop-3) 90%)"}:{outerBarBackground:r,innerBarBackground:a?"var(--progress-loader-inverse-fg-default)":"var(--progress-loader-fg-default)"}},x=e.css(["display:flex;justify-content:center;text-align:center;"]),h=l.default.div.withConfig({displayName:"loader.style__StyledLoaderPlaceholder",componentId:"sc-53e25df6-0"})(["display:inline-block;min-width:var(--global-size-2-xl);"]),b=l.default.div.attrs(r.default).withConfig({displayName:"loader.style__StyledLoader",componentId:"sc-53e25df6-1"})([""," text-align:center;white-space:nowrap;"],a.margin),k=l.default.div.withConfig({displayName:"loader.style__OuterBar",componentId:"sc-53e25df6-2"})(["",""],(({size:a,variant:r,inverse:t})=>e.css(["border-radius:",";height:",";width:100%;background:",";overflow:hidden;position:relative;"],c[a],m[a],y(r,t).outerBarBackground))),w=l.default.div.withConfig({displayName:"loader.style__InnerBar",componentId:"sc-53e25df6-3"})(["",""],(({size:a,variant:r,inverse:t,animationTime:o,hasMotion:i})=>e.css(["position:absolute;background:",";width:15px;height:",";border-radius:",";animation-name:",",",";"," animation-iteration-count:",";"],y(r,t).innerBarBackground,m[a],c[a],g,f,i&&`animation-duration: ${o}s, ${o}s;`,i?"infinite, infinite":"none, none"))),S=l.default.svg.withConfig({displayName:"loader.style__StyledRingCircleSvg",componentId:"sc-53e25df6-4"})(["",""],(({inverse:a,size:r,hasMotion:t,isTracked:s,isError:l,isSuccess:c,isGradientVariant:m,animationTime:p})=>{const g=`${n[r]}px`,f=d[r];return e.css(["height:",";min-height:",';circle[data-role="outer-arc"]{fill:transparent;stroke-width:',"px;stroke:",';cx:12px;cy:12px;r:10px;}circle[data-role="inner-arc"]{fill:transparent;stroke-width:',"px;stroke:",";stroke-linecap:round;stroke-dasharray:100px;stroke-dashoffset:95px;transform-origin:12px 12px 0px;cx:12px;cy:12px;r:10px;transform:rotate(-90deg);animation-name:",";"," animation-timing-function:cubic-bezier(0,0,1,1);animation-iteration-count:",";}"," ",""],g,g,f,a?"var(--progress-loader-inverse-bg-default)":"var(--progress-loader-bg-default)",f,m?"none":(({inverse:e,isSuccess:a,isError:r})=>r?"var(--progress-loader-fg-error);":a?"var(--progress-loader-fg-complete);":e?"var(--progress-loader-inverse-fg-default)":"var(--progress-loader-fg-default)")({inverse:a,isSuccess:c,isError:l}),s?u:v,t&&`animation-duration: ${p}s;`,t?"infinite":"none",m&&e.css(['circle[data-role="gradient-mask-arc"]{fill:none;stroke:white;stroke-width:',"px;stroke-linecap:round;stroke-dasharray:100px;stroke-dashoffset:95px;transform-origin:12px 12px 0px;cx:12px;cy:12px;r:10px;transform:rotate(-90deg);animation-name:",";"," animation-timing-function:cubic-bezier(0,0,1,1);animation-iteration-count:",";}"],f,v,t&&`animation-duration: ${p}s;`,t?"infinite":"none"),!m&&e.css(["",' & circle[data-role="inner-arc"],',' & circle[data-role="inner-arc"]{stroke:currentColor;}'],i.StyledButton,o.default))})),_=l.default.div.withConfig({displayName:"loader.style__StyledGradientFill",componentId:"sc-53e25df6-5"})(["width:100%;height:100%;background:radial-gradient( 1514.52% 80.26% at 56.89% 94.74%,var(--mode-color-ai-alt-stop-1) 0%,var(--mode-color-ai-alt-stop-2) 51.22%,var(--mode-color-ai-stop-3) 100% );"]),B="var(--global-size-m)",C=l.default.div.withConfig({displayName:"loader.style__StyledStars",componentId:"sc-53e25df6-6"})(["position:relative;width:",";height:",";"],B,B),z={standalone:{small:"var(--global-space-comp-xs)",medium:"var(--global-space-comp-s)",large:"var(--global-space-comp-m)"},ring:{"extra-small":"var(--global-space-comp-xs)",small:"var(--global-space-comp-s)",medium:"var(--global-space-comp-s)",large:"var(--global-space-comp-m)"}},L=l.default.div.withConfig({displayName:"loader.style__StyledStarLoaderWrapper",componentId:"sc-53e25df6-7"})(["position:relative;display:flex;align-items:center;justify-content:center;"]),I=l.default(t.Typography).withConfig({displayName:"loader.style__StyledLoaderLabel",componentId:"sc-53e25df6-8"})([""," line-height:150%;color:",";"," &,"," &{color:currentColor;}",""],x,(({inverse:e})=>e?"var(--progress-inverse-label-alt)":"var(--progress-label-alt)"),i.StyledButton,o.default,(({$size:a="medium",loaderType:r,loaderVariant:t})=>{const o=a;return"star"===r?e.css(["font-size:16px;font-weight:400;margin-left:12px;width:min-content;"]):"standalone"===r?e.css(["font:",";width:100%;margin-top:",";"],"large"===o?"var(--global-font-static-comp-medium-l)":"small"===o?"var(--global-font-static-comp-medium-s)":"var(--global-font-static-comp-medium-m)",z[r][o]):e.css(["font:",";width:",";",";"],"large"===o?"var(--global-font-static-comp-medium-l)":"extra-small"===o?"var(--global-font-static-comp-medium-xs)":"small"===o?"var(--global-font-static-comp-medium-s)":"var(--global-font-static-comp-medium-m)","inline"===t?"auto":"100%","inline"===t?`margin-left: ${p[o]}`:`margin-top: ${z[r][o]}`)})),N=l.default.div.withConfig({displayName:"loader.style__StyledRingLoaderWrapper",componentId:"sc-53e25df6-9"})(["",""],(({loaderVariant:a})=>e.css(["display:flex;flex-direction:",";align-items:center;justify-content:center;width:",";"],"inline"===a?"row":"column","inline"===a?"auto":"100%"))),j=l.default.span.withConfig({displayName:"loader.style__StyledLabel",componentId:"sc-53e25df6-10"})(["",";"],(({inverse:a})=>e.css(["color:",";"," &,"," &{color:currentColor;}"],a?"var(--progress-inverse-label-alt)":"var(--progress-label-alt)",i.StyledButton,o.default)));exports.InnerBar=w,exports.OuterBar=k,exports.StyledGradientFill=_,exports.StyledLabel=j,exports.StyledLoader=b,exports.StyledLoaderLabel=I,exports.StyledLoaderPlaceholder=h,exports.StyledRingCircleSvg=S,exports.StyledRingLoaderWrapper=N,exports.StyledStarLoaderWrapper=L,exports.StyledStars=C;
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react");require("../../../style/utils/filter-styled-system-padding-props.js");var l=require("../../../style/utils/filter-styled-system-margin-props.js"),r=require("../../../style/utils/filter-out-styled-system-spacing-props.js"),n=require("../__internal__/select-textbox/select-textbox.component.js"),i=require("../../../__internal__/utils/helpers/guid/index.js"),u=require("../__internal__/utils/with-filter.hoc.js"),o=require("../__internal__/select-list/select-list.component.js"),a=require("./multi-select.style.js"),s=require("../../pill/pill.component.js"),c=require("../__internal__/utils/is-expected-option.js"),d=require("../__internal__/utils/is-expected-value.js"),f=require("../__internal__/utils/is-navigation-key.js"),p=require("../../../hooks/__internal__/useStableCallback/useStableCallback.js"),b=require("../../../hooks/__internal__/useInputAccessibility/useInputAccessibility.js"),v=require("../../../hooks/__internal__/useAdaptiveSidebarModalFocus/useAdaptiveSidebarModalFocus.js");function m(e){return e&&e.__esModule?e:{default:e}}var y=m(t);function h(e,t,l){return t in e?Object.defineProperty(e,t,{value:l,enumerable:!0,configurable:!0,writable:!0}):e[t]=l,e}function O(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){h(e,t,l[t])}))}return e}function g(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var 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 _=u.default(o.default),j=y.default.forwardRef(((u,o)=>{var{"aria-label":m,"aria-labelledby":h,value:j,id:C,label:S,name:x,disabled:k,readOnly:w,children:P,onOpen:q,onFilterChange:E,onChange:M,onClick:R,onFocus:D,onBlur:L,onKeyDown:V,openOnFocus:F=!1,noResultsMessage:I,placeholder:T,isLoading:A,onListScrollBottom:B,tableHeader:H,multiColumn:z,tooltipPosition:K,size:W="medium","data-element":$,"data-role":N,listPlacement:G="bottom",listMaxHeight:J,flipEnabled:Q=!0,wrapPillText:U=!0,enableVirtualScroll:X,virtualScrollOverscan:Y,required:Z,listWidth:ee}=u,te=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}(u,["aria-label","aria-labelledby","value","id","label","name","disabled","readOnly","children","onOpen","onFilterChange","onChange","onClick","onFocus","onBlur","onKeyDown","openOnFocus","noResultsMessage","placeholder","isLoading","onListScrollBottom","tableHeader","multiColumn","tooltipPosition","size","data-element","data-role","listPlacement","listMaxHeight","flipEnabled","wrapPillText","enableVirtualScroll","virtualScrollOverscan","required","listWidth"]);const[le,re]=t.useState(""),ne=t.useRef(i.default()),ie=t.useRef(i.default()),ue=t.useRef(null),oe=t.useRef(null),ae=t.useRef(!1),se=t.useRef(!1),ce=t.useRef(!1),de=t.useRef(!1),fe=t.useRef(!1),[pe,be]=t.useState(),[ve,me]=t.useState(!1),[ye,he]=t.useState(""),[Oe,ge]=t.useState(""),[_e,je]=t.useState(""),[Ce,Se]=t.useState(),xe=t.useRef(C||i.default()),{labelId:ke}=b.default({id:xe.current,label:S}),we=t.useRef(null),Pe=t.useCallback((()=>{me((e=>(!e&&q&&q(),!0)))}),[q]),qe=t.useCallback(((e,t)=>({target:g(O({},x&&{name:x},C&&{id:C}),{value:e}),selectionConfirmed:t})),[x,C]),Ee=t.useCallback(((e,t)=>{const l=e(j);l.length!==(null==j?void 0:j.length)&&M(qe(l,t))}),[qe,M,j]),Me=t.useCallback((e=>{const t=e.target.value,l=(r=t,n=P,y.default.Children.toArray(n).find((e=>{const{text:t}=e.props;return-1!==(null==t?void 0:t.toLowerCase().indexOf(null==r?void 0:r.toLowerCase()))})));var r,n;l&&ge(l.props.value),je(t),he(t),Pe()}),[P,Pe]),Re=t.useCallback((e=>{se.current=!0,Ee((t=>{if(!t.length)return t;const l=t.slice();return l.splice(e,1),l}),!0)}),[Ee]),De=t.useCallback((e=>{const{key:t}=e,l="Backspace"===t||"Delete"===t;V&&V(e),w||(!e.defaultPrevented&&f.default(t)&&(e.preventDefault(),Pe()),!l||""!==_e&&""!==ye||Re(-1))}),[V,w,_e,ye,Pe,Re]),Le=t.useMemo((()=>{var e;return j&&j.length?null===(e=y.default.Children.map(P,(e=>!(!y.default.isValidElement(e)||!j.includes(e.props.value))&&e.props.text)))||void 0===e?void 0:e.filter((e=>e)).reduce(((e,t)=>e?`${e}, ${t}`:t),""):null}),[P,j]),Ve=t.useCallback((e=>{if(ce.current=!1,!ve)return;const t=ue.current&&!ue.current.contains(e.target),l=oe.current&&!oe.current.contains(e.target);t&&l&&!se.current&&(he(""),je(""),ge(""),me(!1)),se.current=!1}),[ve]),Fe=t.useMemo((()=>{const t=!k&&!w;let l;return(null==j?void 0:j.length)?j.map(((r,n)=>{const i=y.default.Children.toArray(P).find((e=>y.default.isValidElement(e)&&c.default(e,r)));let u={};if(!i)return null;var o,d;y.default.isValidElement(i)&&(l=void 0!==(null==i||null===(o=i.props.value)||void 0===o?void 0:o.value)?null==i||null===(d=i.props.value)||void 0===d?void 0:d.value:null==i?void 0:i.props.value,u={title:i.props.text,fill:i.props.fill,borderColor:i.props.borderColor});const f=u.title||"",p=f+l||n;return e.jsx(a.StyledSelectPillContainer,{children:e.jsx(s.Pill,g(O({onDelete:t?()=>Re(n):void 0,wrapText:U},u),{children:f}))},p)})):""}),[P,k,w,j]);t.useEffect((()=>{const e=null==j?void 0:j.length;Se(e?" ":T)}),[j,T]),t.useEffect((()=>{const e="click";return window.addEventListener(e,Ve),function(){window.removeEventListener(e,Ve)}}),[Ve]);const Ie=p.default(E),Te=t.useRef(!0);function Ae(e){if(ce.current=!1,R&&R(e),!F||F&&!fe.current){if(ve)return je(""),void me(!1);null==q||q(),me(!0)}else fe.current=!1}function Be(e){ce.current=!1,R&&R(e),me((e=>e?(je(""),!1):(q&&q(),!0)))}function He(e){de.current=!1,ce.current||(ae.current=!1,L&&L(e))}function ze(e){var t;ce.current=!0;const l=e.target;"input"!==(null===(t=l.dataset)||void 0===t?void 0:t.element)&&e.preventDefault(),"input"===l.dataset.element&&(de.current=!0)}function Ke(e){const t=()=>null==D?void 0:D(e);F?(we.current&&clearTimeout(we.current),we.current=setTimeout((()=>{me((e=>(e||(q&&q(),D&&!ae.current&&(t(),ae.current=!0),fe.current=de.current),!0)))}))):D&&!ae.current&&(t(),ae.current=!0)}t.useEffect((()=>{Ie&&!Te.current&&Ie(_e)}),[Ie,_e]),t.useEffect((()=>{Te.current=!1}),[]),v.default((()=>me(!1)));const We=t.useCallback((e=>{const{value:t,selectionType:l,id:r,selectionConfirmed:n}=e;if("navigationKey"===l)return ge(t),void re(r);"click"===l&&(se.current=!0),he("");const i=-1!==(null==j?void 0:j.findIndex((e=>d.default(e,t))));null==pe||pe.focus(),ce.current=!1,Ee((e=>i?e:[...e,t]),n)}),[pe,j,Ee]),$e=t.useCallback((()=>{me(!1),je("")}),[]),Ne=t.useCallback((e=>{e&&(be(e),o&&("function"==typeof o?o(e):o.current=e))}),[o]);function Ge(){return g(O({id:xe.current,name:x,disabled:k,label:S,readOnly:w,placeholder:Ce,leftChildren:Fe,formattedValue:ye,selectedValue:j,onClick:Ae,onMouseDown:ze,onFocus:Ke,onBlur:He,iconOnClick:Be,iconOnMouseDown:ze,onKeyDown:De,onChange:Me,tooltipPosition:K,size:W,required:Z},r.default(te)),{"data-component":void 0})}let Je;switch(G){case"top":Je="top-end";break;case"bottom":Je="bottom-end";break;default:Je=G}const Qe=e.jsx(_,{ref:oe,id:ne.current,labelId:ke,anchorElement:(null==pe?void 0:pe.parentElement)||void 0,onSelect:We,onSelectListClose:$e,onMouseDown:function(){ce.current=!0},filterText:_e.trim(),highlightedValue:Oe,noResultsMessage:I,isLoading:A,onListScrollBottom:B,tableHeader:H,multiColumn:z,listPlacement:void 0!==ee?Je:G,listMaxHeight:J,flipEnabled:Q,multiselectValues:j,isOpen:ve,enableVirtualScroll:X,virtualScrollOverscan:Y,listWidth:ee,children:P}),Ue=l.default(te);return e.jsxs(a.StyledSelectMultiSelect,g(O({disabled:k,readOnly:w,hasTextCursor:!0,size:W,"data-component":"multiselect","data-role":N,"data-element":$,isOpen:ve,className:"multi-select"},Ue),{children:[e.jsxs("div",{ref:ue,children:[e.jsx(a.StyledAccessibilityLabelContainer,{"data-element":"accessibility-label",id:ie.current,children:Le}),e.jsx(n.default,O({ref:Ne,accessibilityLabelId:ie.current,activeDescendantId:le,"aria-controls":ne.current,ariaLabel:m,ariaLabelledby:h,isOpen:ve,labelId:ke,value:Ge().formattedValue,selectType:"multi"},Ge()))]}),Qe]}))}));exports.MultiSelect=j,exports.default=j;
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react");require("../../../style/utils/filter-styled-system-padding-props.js");var l=require("../../../style/utils/filter-styled-system-margin-props.js"),r=require("../../../style/utils/filter-out-styled-system-spacing-props.js"),n=require("../__internal__/select-textbox/select-textbox.component.js"),i=require("../../../__internal__/utils/helpers/guid/index.js"),u=require("../__internal__/utils/with-filter.hoc.js"),o=require("../__internal__/select-list/select-list.component.js"),a=require("./multi-select.style.js"),s=require("../../pill/pill.component.js"),c=require("../__internal__/utils/is-expected-option.js"),d=require("../__internal__/utils/is-expected-value.js"),f=require("../__internal__/utils/is-navigation-key.js"),p=require("../../../hooks/__internal__/useStableCallback/useStableCallback.js"),b=require("../../../hooks/__internal__/useInputAccessibility/useInputAccessibility.js"),v=require("../../../hooks/__internal__/useAdaptiveSidebarModalFocus/useAdaptiveSidebarModalFocus.js");function m(e){return e&&e.__esModule?e:{default:e}}var y=m(t);function h(e,t,l){return t in e?Object.defineProperty(e,t,{value:l,enumerable:!0,configurable:!0,writable:!0}):e[t]=l,e}function O(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){h(e,t,l[t])}))}return e}function g(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var 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 _=u.default(o.default),j=y.default.forwardRef(((u,o)=>{var{"aria-label":m,"aria-labelledby":h,value:j,id:C,label:S,name:x,disabled:k,readOnly:w,children:P,onOpen:q,onFilterChange:E,onChange:M,onClick:R,onFocus:D,onBlur:L,onKeyDown:V,openOnFocus:F=!1,noResultsMessage:I,placeholder:T,isLoading:A,onListScrollBottom:B,tableHeader:H,multiColumn:z,tooltipPosition:K,size:W="medium","data-element":$,"data-role":N,listPlacement:G="bottom",listMaxHeight:J,flipEnabled:Q=!0,wrapPillText:U=!0,enableVirtualScroll:X,virtualScrollOverscan:Y,required:Z,listWidth:ee}=u,te=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}(u,["aria-label","aria-labelledby","value","id","label","name","disabled","readOnly","children","onOpen","onFilterChange","onChange","onClick","onFocus","onBlur","onKeyDown","openOnFocus","noResultsMessage","placeholder","isLoading","onListScrollBottom","tableHeader","multiColumn","tooltipPosition","size","data-element","data-role","listPlacement","listMaxHeight","flipEnabled","wrapPillText","enableVirtualScroll","virtualScrollOverscan","required","listWidth"]);const[le,re]=t.useState(""),ne=t.useRef(i.default()),ie=t.useRef(i.default()),ue=t.useRef(null),oe=t.useRef(null),ae=t.useRef(!1),se=t.useRef(!1),ce=t.useRef(!1),de=t.useRef(!1),fe=t.useRef(!1),[pe,be]=t.useState(),[ve,me]=t.useState(!1),[ye,he]=t.useState(""),[Oe,ge]=t.useState(""),[_e,je]=t.useState(""),[Ce,Se]=t.useState(),xe=t.useRef(C||i.default()),{labelId:ke}=b.default({id:xe.current,label:S}),we=t.useRef(null),Pe=t.useCallback((()=>{me((e=>(!e&&q&&q(),!0)))}),[q]),qe=t.useCallback(((e,t)=>({target:g(O({},x&&{name:x},C&&{id:C}),{value:e}),selectionConfirmed:t})),[x,C]),Ee=t.useCallback(((e,t)=>{const l=e(j).filter((e=>""!==e));l.length!==(null==j?void 0:j.length)&&M(qe(l,t))}),[qe,M,j]),Me=t.useCallback((e=>{const t=e.target.value,l=(r=t,n=P,y.default.Children.toArray(n).find((e=>{const{text:t}=e.props;return-1!==(null==t?void 0:t.toLowerCase().indexOf(null==r?void 0:r.toLowerCase()))})));var r,n;l&&ge(l.props.value),je(t),he(t),Pe()}),[P,Pe]),Re=t.useCallback((e=>{se.current=!0,Ee((t=>{if(!t.length)return t;const l=t.slice();return l.splice(e,1),l}),!0)}),[Ee]),De=t.useCallback((e=>{const{key:t}=e,l="Backspace"===t||"Delete"===t;V&&V(e),w||(!e.defaultPrevented&&f.default(t)&&(e.preventDefault(),Pe()),!l||""!==_e&&""!==ye||Re(-1))}),[V,w,_e,ye,Pe,Re]),Le=t.useMemo((()=>{var e;return j&&j.length?null===(e=y.default.Children.map(P,(e=>!(!y.default.isValidElement(e)||!j.includes(e.props.value))&&e.props.text)))||void 0===e?void 0:e.filter((e=>e)).reduce(((e,t)=>e?`${e}, ${t}`:t),""):null}),[P,j]),Ve=t.useCallback((e=>{if(ce.current=!1,!ve)return;const t=ue.current&&!ue.current.contains(e.target),l=oe.current&&!oe.current.contains(e.target);t&&l&&!se.current&&(he(""),je(""),ge(""),me(!1)),se.current=!1}),[ve]),Fe=t.useMemo((()=>{const t=!k&&!w;let l;return(null==j?void 0:j.length)?j.map(((r,n)=>{const i=y.default.Children.toArray(P).find((e=>y.default.isValidElement(e)&&c.default(e,r)));let u={};if(!i)return null;var o,d;y.default.isValidElement(i)&&(l=void 0!==(null==i||null===(o=i.props.value)||void 0===o?void 0:o.value)?null==i||null===(d=i.props.value)||void 0===d?void 0:d.value:null==i?void 0:i.props.value,u={title:i.props.text,fill:i.props.fill,borderColor:i.props.borderColor});const f=u.title||"",p=f+l||n;return e.jsx(a.StyledSelectPillContainer,{children:e.jsx(s.Pill,g(O({onDelete:t?()=>Re(n):void 0,wrapText:U},u),{children:f}))},p)})):""}),[P,k,w,j]);t.useEffect((()=>{const e=null==j?void 0:j.length;Se(e?" ":T)}),[j,T]),t.useEffect((()=>{const e="click";return window.addEventListener(e,Ve),function(){window.removeEventListener(e,Ve)}}),[Ve]);const Ie=p.default(E),Te=t.useRef(!0);function Ae(e){if(ce.current=!1,R&&R(e),!F||F&&!fe.current){if(ve)return je(""),void me(!1);null==q||q(),me(!0)}else fe.current=!1}function Be(e){ce.current=!1,R&&R(e),me((e=>e?(je(""),!1):(q&&q(),!0)))}function He(e){de.current=!1,ce.current||(ae.current=!1,L&&L(e))}function ze(e){var t;ce.current=!0;const l=e.target;"input"!==(null===(t=l.dataset)||void 0===t?void 0:t.element)&&e.preventDefault(),"input"===l.dataset.element&&(de.current=!0)}function Ke(e){const t=()=>null==D?void 0:D(e);F?(we.current&&clearTimeout(we.current),we.current=setTimeout((()=>{me((e=>(e||(q&&q(),D&&!ae.current&&(t(),ae.current=!0),fe.current=de.current),!0)))}))):D&&!ae.current&&(t(),ae.current=!0)}t.useEffect((()=>{Ie&&!Te.current&&Ie(_e)}),[Ie,_e]),t.useEffect((()=>{Te.current=!1}),[]),v.default((()=>me(!1)));const We=t.useCallback((e=>{const{value:t,selectionType:l,id:r,selectionConfirmed:n}=e;if("navigationKey"===l)return ge(t),void re(r);"click"===l&&(se.current=!0),he("");const i=-1!==(null==j?void 0:j.findIndex((e=>d.default(e,t))));null==pe||pe.focus(),ce.current=!1,Ee((e=>i?e:[...e,t]),n)}),[pe,j,Ee]),$e=t.useCallback((()=>{me(!1),je("")}),[]),Ne=t.useCallback((e=>{e&&(be(e),o&&("function"==typeof o?o(e):o.current=e))}),[o]);function Ge(){return g(O({id:xe.current,name:x,disabled:k,label:S,readOnly:w,placeholder:Ce,leftChildren:Fe,formattedValue:ye,selectedValue:j,onClick:Ae,onMouseDown:ze,onFocus:Ke,onBlur:He,iconOnClick:Be,iconOnMouseDown:ze,onKeyDown:De,onChange:Me,tooltipPosition:K,size:W,required:Z},r.default(te)),{"data-component":void 0})}let Je;switch(G){case"top":Je="top-end";break;case"bottom":Je="bottom-end";break;default:Je=G}const Qe=e.jsx(_,{ref:oe,id:ne.current,labelId:ke,anchorElement:(null==pe?void 0:pe.parentElement)||void 0,onSelect:We,onSelectListClose:$e,onMouseDown:function(){ce.current=!0},filterText:_e.trim(),highlightedValue:Oe,noResultsMessage:I,isLoading:A,onListScrollBottom:B,tableHeader:H,multiColumn:z,listPlacement:void 0!==ee?Je:G,listMaxHeight:J,flipEnabled:Q,multiselectValues:j,isOpen:ve,enableVirtualScroll:X,virtualScrollOverscan:Y,listWidth:ee,children:P}),Ue=l.default(te);return e.jsxs(a.StyledSelectMultiSelect,g(O({disabled:k,readOnly:w,hasTextCursor:!0,size:W,"data-component":"multiselect","data-role":N,"data-element":$,isOpen:ve,className:"multi-select"},Ue),{children:[e.jsxs("div",{ref:ue,children:[e.jsx(a.StyledAccessibilityLabelContainer,{"data-element":"accessibility-label",id:ie.current,children:Le}),e.jsx(n.default,O({ref:Ne,accessibilityLabelId:ie.current,activeDescendantId:le,"aria-controls":ne.current,ariaLabel:m,ariaLabelledby:h,isOpen:ve,labelId:ke,value:Ge().formattedValue,selectType:"multi"},Ge()))]}),Qe]}))}));exports.MultiSelect=j,exports.default=j;
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("../../../../__internal__/utils/helpers/guid/index.js"),o=require("../../../../hooks/__internal__/useLocale/useLocale.js"),n=require("../../../button-toggle/button-toggle.component.js"),u=require("../../../button-toggle/button-toggle-group/button-toggle-group.component.js");function l(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function c(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},o=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),o.forEach((function(t){l(e,t,r[t])}))}return e}function a(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 i=({size:l,onChange:i,toggleValue:s,disabled:g,toggleProps:p})=>{const b=o.default(),f=b.time.amText(),d=b.time.pmText(),j=t.useRef(r.default()),{wrapperProps:m,amToggleProps:O,pmToggleProps:y}=p||{},P=t.useCallback((e=>{const t=e.target.value;t!==s&&i(t)}),[s,i]);return e.jsxs(u.default,a(c({},m),{"data-component":"time-button-toggle-group",m:"0px 0px 0px 16px",id:j.current,onChange:P,value:s,disabled:g,children:[e.jsx(n.ButtonToggle,a(c({},O),{"data-component":"am-button-toggle",value:"AM",size:l,children:f})),e.jsx(n.ButtonToggle,a(c({},y),{"data-component":"pm-button-toggle",value:"PM",size:l,children:d}))]}))};i.displayName="Toggle",exports.default=i;
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("../../../../__internal__/utils/helpers/guid/index.js"),o=require("../../../../hooks/__internal__/useLocale/useLocale.js"),n=require("../../../button-toggle/button-toggle.component.js"),u=require("../../../button-toggle/button-toggle-group/button-toggle-group.component.js");function l(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function c(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},o=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),o.forEach((function(t){l(e,t,r[t])}))}return e}function a(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 g=({size:l,onChange:g,toggleValue:i,disabled:s,toggleProps:p})=>{const b=o.default(),f=b.time.amText(),d=b.time.pmText(),j=t.useRef(r.default()),{wrapperProps:m,amToggleProps:O,pmToggleProps:y}=p||{},P=t.useCallback((e=>{const t=e.target.value;t!==i&&g(t)}),[i,g]);return e.jsxs(u.default,a(c({},m),{"data-component":"time-button-toggle-group",m:"0px 0px 0px 16px",id:j.current,onChange:P,value:i,disabled:s,size:l,children:[e.jsx(n.ButtonToggle,a(c({},O),{"data-component":"am-button-toggle",value:"AM",children:f})),e.jsx(n.ButtonToggle,a(c({},y),{"data-component":"pm-button-toggle",value:"PM",children:d}))]}))};g.displayName="Toggle",exports.default=g;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "carbon-react",
3
- "version": "159.11.1",
3
+ "version": "159.12.1",
4
4
  "description": "A library of reusable React components for easily building user interfaces.",
5
5
  "files": [
6
6
  "lib",
@@ -1,15 +0,0 @@
1
- import React from "react";
2
- import { StyledButtonToggleIconProps } from "./button-toggle.style";
3
- import { IconType } from "../icon";
4
- export interface ButtonToggleIconProps extends StyledButtonToggleIconProps {
5
- /**
6
- * <a href="https://brand.sage.com/d/NdbrveWvNheA/foundations#/icons/icons" target="_blank">List of supported icons</a>
7
- *
8
- * buttonIcon to render.
9
- */
10
- buttonIcon: IconType;
11
- /** Sets the icon in the disabled state */
12
- disabled?: boolean;
13
- }
14
- declare const ButtonToggleIcon: ({ buttonIcon, buttonIconSize, disabled, hasContent, }: ButtonToggleIconProps) => React.JSX.Element;
15
- export default ButtonToggleIcon;
@@ -1 +0,0 @@
1
- import{jsx as t}from"react/jsx-runtime";import"react";import{StyledButtonToggleIcon as o}from"./button-toggle.style.js";import n from"../icon/icon.component.js";const e=({buttonIcon:e,buttonIconSize:i,disabled:r,hasContent:a})=>t(o,{buttonIconSize:i,hasContent:a,"data-role":"button-toggle-icon",children:t(n,{"aria-hidden":!0,type:e,fontSize:i,disabled:r})});export{e as default};
@@ -1,15 +0,0 @@
1
- import React from "react";
2
- import { StyledButtonToggleIconProps } from "./button-toggle.style";
3
- import { IconType } from "../icon";
4
- export interface ButtonToggleIconProps extends StyledButtonToggleIconProps {
5
- /**
6
- * <a href="https://brand.sage.com/d/NdbrveWvNheA/foundations#/icons/icons" target="_blank">List of supported icons</a>
7
- *
8
- * buttonIcon to render.
9
- */
10
- buttonIcon: IconType;
11
- /** Sets the icon in the disabled state */
12
- disabled?: boolean;
13
- }
14
- declare const ButtonToggleIcon: ({ buttonIcon, buttonIconSize, disabled, hasContent, }: ButtonToggleIconProps) => React.JSX.Element;
15
- export default ButtonToggleIcon;
@@ -1 +0,0 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime");require("react");var t=require("./button-toggle.style.js"),o=require("../icon/icon.component.js");exports.default=({buttonIcon:n,buttonIconSize:r,disabled:i,hasContent:u})=>e.jsx(t.StyledButtonToggleIcon,{buttonIconSize:r,hasContent:u,"data-role":"button-toggle-icon",children:e.jsx(o.default,{"aria-hidden":!0,type:n,fontSize:r,disabled:i})});