carbon-react 159.6.0 → 159.7.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 (46) hide show
  1. package/esm/__internal__/legacy-input/input-presentation.style.d.ts +1 -1
  2. package/esm/__internal__/validations/validation-icon.component.js +1 -1
  3. package/esm/components/advanced-color-picker/advanced-color-picker.style.js +1 -1
  4. package/esm/components/batch-selection/batch-selection.style.d.ts +1 -1
  5. package/esm/components/button/button.component.d.ts +8 -4
  6. package/esm/components/button/button.component.js +1 -1
  7. package/esm/components/flat-table/flat-table-row-header/flat-table-row-header.style.d.ts +1 -1
  8. package/esm/components/help/help.component.js +1 -1
  9. package/esm/components/icon/icon-config.js +1 -1
  10. package/esm/components/icon/icon.component.d.ts +55 -10
  11. package/esm/components/icon/icon.component.js +1 -1
  12. package/esm/components/icon/icon.style.d.ts +4 -1
  13. package/esm/components/icon/icon.style.js +1 -1
  14. package/esm/components/image/image.style.d.ts +1 -1
  15. package/esm/components/portrait/portrait.component.js +1 -1
  16. package/esm/components/portrait/portrait.config.d.ts +6 -0
  17. package/esm/components/portrait/portrait.config.js +1 -1
  18. package/esm/components/portrait/portrait.style.d.ts +4 -1
  19. package/esm/components/portrait/portrait.style.js +1 -1
  20. package/esm/components/progress-tracker/progress-tracker.style.d.ts +1 -1
  21. package/esm/components/tabs/__next__/tabs.context.js +1 -1
  22. package/esm/components/tile/tile.style.d.ts +1 -1
  23. package/esm/components/tooltip/tooltip.style.d.ts +1 -1
  24. package/lib/__internal__/legacy-input/input-presentation.style.d.ts +1 -1
  25. package/lib/__internal__/validations/validation-icon.component.js +1 -1
  26. package/lib/components/advanced-color-picker/advanced-color-picker.style.js +1 -1
  27. package/lib/components/batch-selection/batch-selection.style.d.ts +1 -1
  28. package/lib/components/button/button.component.d.ts +8 -4
  29. package/lib/components/button/button.component.js +1 -1
  30. package/lib/components/flat-table/flat-table-row-header/flat-table-row-header.style.d.ts +1 -1
  31. package/lib/components/help/help.component.js +1 -1
  32. package/lib/components/icon/icon-config.js +1 -1
  33. package/lib/components/icon/icon.component.d.ts +55 -10
  34. package/lib/components/icon/icon.component.js +1 -1
  35. package/lib/components/icon/icon.style.d.ts +4 -1
  36. package/lib/components/icon/icon.style.js +1 -1
  37. package/lib/components/image/image.style.d.ts +1 -1
  38. package/lib/components/portrait/portrait.component.js +1 -1
  39. package/lib/components/portrait/portrait.config.d.ts +6 -0
  40. package/lib/components/portrait/portrait.config.js +1 -1
  41. package/lib/components/portrait/portrait.style.d.ts +4 -1
  42. package/lib/components/portrait/portrait.style.js +1 -1
  43. package/lib/components/progress-tracker/progress-tracker.style.d.ts +1 -1
  44. package/lib/components/tile/tile.style.d.ts +1 -1
  45. package/lib/components/tooltip/tooltip.style.d.ts +1 -1
  46. package/package.json +1 -1
@@ -2,5 +2,5 @@ import { CommonInputPresentationProps } from "./input-presentation.component";
2
2
  import { InputContextProps } from "../input-behaviour";
3
3
  import { CarbonProviderProps } from "../../components/carbon-provider";
4
4
  export declare const StyledInputPresentationContainer: import("styled-components").StyledComponent<"div", any, Pick<CommonInputPresentationProps, "maxWidth" | "inputWidth">, never>;
5
- declare const InputPresentationStyle: import("styled-components").StyledComponent<"div", any, Pick<InputContextProps, "hasFocus"> & Pick<CommonInputPresentationProps, "disabled" | "error" | "info" | "warning" | "readOnly" | "size" | "align" | "borderRadius" | "hasIcon" | "hideBorders"> & Pick<CarbonProviderProps, "validationRedesignOptIn">, never>;
5
+ declare const InputPresentationStyle: import("styled-components").StyledComponent<"div", any, Pick<InputContextProps, "hasFocus"> & Pick<CommonInputPresentationProps, "size" | "disabled" | "error" | "info" | "warning" | "align" | "readOnly" | "borderRadius" | "hasIcon" | "hideBorders"> & Pick<CarbonProviderProps, "validationRedesignOptIn">, never>;
6
6
  export default InputPresentationStyle;
@@ -1 +1 @@
1
- import{jsx as t}from"react/jsx-runtime";import{useRef as o,useContext as r,useState as e}from"react";import n from"invariant";import i from"../utils/helpers/guid/index.js";import p from"../../components/icon/icon.component.js";import s from"./validation-icon.style.js";import{InputContext as l}from"../input-behaviour/input-behaviour.component.js";import{InputGroupContext as a}from"../input-behaviour/input-group-behaviour.component.js";import"../../style/utils/filter-styled-system-padding-props.js";import c from"../../style/utils/filter-styled-system-margin-props.js";function u(t,o,r){return o in t?Object.defineProperty(t,o,{value:r,enumerable:!0,configurable:!0,writable:!0}):t[o]=r,t}const f=f=>{var{error:b,warning:m,info:O,size:y,onFocus:d,onBlur:g,iconId:v,tooltipId:j,isPartOfInput:h,tabIndex:P=-1,onClick:w,tooltipPosition:I="right",tooltipFlipOverrides:F}=f,x=function(t,o){if(null==t)return{};var r,e,n=function(t,o){if(null==t)return{};var r,e,n={},i=Object.keys(t);for(e=0;e<i.length;e++)r=i[e],o.indexOf(r)>=0||(n[r]=t[r]);return n}(t,o);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);for(e=0;e<i.length;e++)r=i[e],o.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(t,r)&&(n[r]=t[r])}return n}(f,["error","warning","info","size","onFocus","onBlur","iconId","tooltipId","isPartOfInput","tabIndex","onClick","tooltipPosition","tooltipFlipOverrides"]);const S=o(j||i()),k=Array.isArray(F)&&F.every((t=>["bottom","left","right","top"].includes(t)));F&&n(k,'The tooltipFlipOverrides prop supplied to ValidationIcon must be an array containing some or all of ["top", "bottom", "left", "right"].');const{hasFocus:M,hasMouseOver:D}=r(l),{hasFocus:z,hasMouseOver:B}=r(a),[C,E]=e(!1),A=(({error:t,warning:o,info:r})=>t?"error":o?"warning":r?"info":null)({error:b,warning:m,info:O}),T=b||m||O;return"string"==typeof T&&A?t(s,(V=function(t){for(var o=1;o<arguments.length;o++){var r=null!=arguments[o]?arguments[o]:{},e=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(e=e.concat(Object.getOwnPropertySymbols(r).filter((function(t){return Object.getOwnPropertyDescriptor(r,t).enumerable})))),e.forEach((function(o){u(t,o,r[o])}))}return t}({validationType:A,onClick:w,onMouseOver:()=>E(!0),onMouseLeave:()=>E(!1),onFocus:t=>{E(!0),d&&d(t)},onBlur:t=>{E(!1),g&&g(t)},isPartOfInput:h,"data-role":"validation-icon-wrapper"},c(x)),$=null!=($={children:t(p,{"aria-describedby":S.current,type:A,tabIndex:P,tooltipId:S.current,tooltipMessage:T,tooltipPosition:I,tooltipVisible:M||D||z||B||C,tooltipFlipOverrides:h&&!F?["top","bottom"]:F,isPartOfInput:h,inputSize:y,id:v,focusable:-1!==P,"data-role":`icon-${A}`},`${A}-icon`)})?$:{},Object.getOwnPropertyDescriptors?Object.defineProperties(V,Object.getOwnPropertyDescriptors($)):function(t){var o=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);o.push.apply(o,r)}return o}(Object($)).forEach((function(t){Object.defineProperty(V,t,Object.getOwnPropertyDescriptor($,t))})),V)):null;var V,$};export{f as ValidationIcon,f as default};
1
+ import{jsx as t}from"react/jsx-runtime";import{useRef as o,useContext as r,useState as e}from"react";import n from"invariant";import i from"../utils/helpers/guid/index.js";import p from"../../components/icon/icon.component.js";import{Tooltip as s}from"../../components/tooltip/tooltip.component.js";import l from"./validation-icon.style.js";import{InputContext as a}from"../input-behaviour/input-behaviour.component.js";import{InputGroupContext as c}from"../input-behaviour/input-group-behaviour.component.js";import"../../style/utils/filter-styled-system-padding-props.js";import u from"../../style/utils/filter-styled-system-margin-props.js";import{TooltipContext as f}from"../tooltip-provider/index.js";function m(t,o,r){return o in t?Object.defineProperty(t,o,{value:r,enumerable:!0,configurable:!0,writable:!0}):t[o]=r,t}const b=b=>{var{error:O,warning:y,info:d,size:g,onFocus:j,onBlur:v,iconId:h,tooltipId:P,isPartOfInput:w,tabIndex:I=-1,onClick:x,tooltipPosition:F="right",tooltipFlipOverrides:S}=b,k=function(t,o){if(null==t)return{};var r,e,n=function(t,o){if(null==t)return{};var r,e,n={},i=Object.keys(t);for(e=0;e<i.length;e++)r=i[e],o.indexOf(r)>=0||(n[r]=t[r]);return n}(t,o);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);for(e=0;e<i.length;e++)r=i[e],o.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(t,r)&&(n[r]=t[r])}return n}(b,["error","warning","info","size","onFocus","onBlur","iconId","tooltipId","isPartOfInput","tabIndex","onClick","tooltipPosition","tooltipFlipOverrides"]);const z=o(P||i()),D=Array.isArray(S)&&S.every((t=>["bottom","left","right","top"].includes(t)));S&&n(D,'The tooltipFlipOverrides prop supplied to ValidationIcon must be an array containing some or all of ["top", "bottom", "left", "right"].');const{hasFocus:M,hasMouseOver:B}=r(a),{hasFocus:C,hasMouseOver:E}=r(c),{tooltipPosition:A}=r(f),[T,V]=e(!1),$=null!=A?A:F,L=(({error:t,warning:o,info:r})=>t?"error":o?"warning":r?"info":null)({error:O,warning:y,info:d}),q=O||y||d;return"string"==typeof q&&L?t(l,(G=function(t){for(var o=1;o<arguments.length;o++){var r=null!=arguments[o]?arguments[o]:{},e=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(e=e.concat(Object.getOwnPropertySymbols(r).filter((function(t){return Object.getOwnPropertyDescriptor(r,t).enumerable})))),e.forEach((function(o){m(t,o,r[o])}))}return t}({validationType:L,onClick:x,onMouseOver:()=>V(!0),onMouseLeave:()=>V(!1),onFocus:t=>{V(!0),j&&j(t)},onBlur:t=>{V(!1),v&&v(t)},isPartOfInput:w,"data-role":"validation-icon-wrapper"},u(k)),H=null!=(H={children:t(s,{message:q,isVisible:M||B||C||E||T,position:$,id:z.current,flipOverrides:w&&!S?["top","bottom"]:S,isPartOfInput:w,inputSize:g,children:t(p,{"aria-describedby":z.current,type:L,tabIndex:I,isPartOfInput:w,inputSize:g,id:h,focusable:-1!==I,"data-role":`icon-${L}`},`${L}-icon`)})})?H:{},Object.getOwnPropertyDescriptors?Object.defineProperties(G,Object.getOwnPropertyDescriptors(H)):function(t){var o=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);o.push.apply(o,r)}return o}(Object(H)).forEach((function(t){Object.defineProperty(G,t,Object.getOwnPropertyDescriptor(H,t))})),G)):null;var G,H};export{b as ValidationIcon,b as default};
@@ -1 +1 @@
1
- import o,{css as r}from"styled-components";import{margin as e}from"styled-system";export{default as StyledAdvancedColorPickerCell}from"./advanced-color-picker-cell.style.js";import{StyledColorOptions as i}from"../simple-color-picker/simple-color-picker.style.js";import{StyledSimpleColor as t}from"../simple-color-picker/simple-color/simple-color.style.js";import{StyledDialogContent as l}from"../dialog/__internal__/__next__/dialog.style.js";import{Dialog as d}from"../dialog/dialog.component.js";import n from"../simple-color-picker/simple-color/checker-board.svg";import s from"../../style/utils/visually-hidden.js";import c from"../definition-list/dl.component.js";import"../definition-list/dt/dt.component.js";import"../definition-list/dd/dd.component.js";import a from"../../style/themes/apply-base-theme.js";const p=o.div.attrs(a).withConfig({displayName:"advanced-color-picker.style__StyledAdvancedColorPickerWrapper",componentId:"sc-62bd57d3-0"})([""," display:inline-block;"],e),m=o(c).withConfig({displayName:"advanced-color-picker.style__HiddenCurrentColorList",componentId:"sc-62bd57d3-1"})(["",""],s),y=o.div.withConfig({displayName:"advanced-color-picker.style__StyledAdvancedColorPickerPreview",componentId:"sc-62bd57d3-2"})(["width:25px;height:25px;margin-bottom:15px;border:1px solid var(--colorsUtilityYin090);border-radius:var(--borderRadius050);"," "," &:hover{cursor:initial;}"],(({color:o})=>"transparent"!==o&&r(["background-color:",";"],o)),(({color:o})=>"transparent"===o&&r(['background-color:#eeeeee;background-image:url("','");background-size:10px 10px;'],n))),g=o(d).withConfig({displayName:"advanced-color-picker.style__DialogStyle",componentId:"sc-62bd57d3-3"})(["","{padding:var(--spacing200);}","{max-width:285px;","{border:1px solid var(--colorsUtilityYin090);margin-right:-1px;margin-bottom:-1px;transition:all 0.2s ease;&:hover{transform:scale(1.1);}}}",'{border:none;}[data-component="icon"]{color:var(--colorsActionMinor500);}'],l,i,t,i);export{g as DialogStyle,m as HiddenCurrentColorList,y as StyledAdvancedColorPickerPreview,p as StyledAdvancedColorPickerWrapper};
1
+ import o,{css as i}from"styled-components";import{margin as e}from"styled-system";export{default as StyledAdvancedColorPickerCell}from"./advanced-color-picker-cell.style.js";import{StyledColorOptions as r}from"../simple-color-picker/simple-color-picker.style.js";import{StyledSimpleColor as t}from"../simple-color-picker/simple-color/simple-color.style.js";import{StyledDialogContent as l}from"../dialog/__internal__/__next__/dialog.style.js";import{Dialog as n}from"../dialog/dialog.component.js";import a from"../simple-color-picker/simple-color/checker-board.svg";import d from"../../style/utils/visually-hidden.js";import s from"../definition-list/dl.component.js";import"../definition-list/dt/dt.component.js";import"../definition-list/dd/dd.component.js";import c from"../../style/themes/apply-base-theme.js";const p=o.div.attrs(c).withConfig({displayName:"advanced-color-picker.style__StyledAdvancedColorPickerWrapper",componentId:"sc-40bdb977-0"})([""," display:inline-block;"],e),m=o(s).withConfig({displayName:"advanced-color-picker.style__HiddenCurrentColorList",componentId:"sc-40bdb977-1"})(["",""],d),g=o.div.withConfig({displayName:"advanced-color-picker.style__StyledAdvancedColorPickerPreview",componentId:"sc-40bdb977-2"})(["width:25px;height:25px;margin-bottom:15px;border:1px solid var(--colorsUtilityYin090);border-radius:var(--borderRadius050);"," "," &:hover{cursor:initial;}"],(({color:o})=>"transparent"!==o&&i(["background-color:",";"],o)),(({color:o})=>"transparent"===o&&i(['background-color:#eeeeee;background-image:url("','");background-size:10px 10px;'],a))),y=o(n).withConfig({displayName:"advanced-color-picker.style__DialogStyle",componentId:"sc-40bdb977-3"})(['[data-component="dialog"]{max-width:fit-content;}','{padding:var(--spacing200);}[data-element="close"]{position:absolute;top:var(--spacing200);right:var(--spacing200);[data-component="icon"]{position:static;}}',"{max-width:285px;","{border:1px solid var(--colorsUtilityYin090);margin-right:-1px;margin-bottom:-1px;transition:all 0.2s ease;&:hover{transform:scale(1.1);}}}",'{border:none;}[data-component="icon"]{color:var(--colorsActionMinor500);}'],l,r,t,r);export{y as DialogStyle,m as HiddenCurrentColorList,g as StyledAdvancedColorPickerPreview,p as StyledAdvancedColorPickerWrapper};
@@ -1,4 +1,4 @@
1
1
  import { BatchSelectionProps } from ".";
2
- declare const StyledBatchSelection: import("styled-components").StyledComponent<"div", any, Pick<BatchSelectionProps, "disabled" | "hidden" | "colorTheme">, never>;
2
+ declare const StyledBatchSelection: import("styled-components").StyledComponent<"div", any, Pick<BatchSelectionProps, "hidden" | "disabled" | "colorTheme">, never>;
3
3
  declare const StyledSelectionCount: import("styled-components").StyledComponent<"span", any, {}, never>;
4
4
  export { StyledBatchSelection, StyledSelectionCount };
@@ -42,12 +42,16 @@ export interface ButtonProps extends SpaceProps, TagProps {
42
42
  href?: string;
43
43
  /** Defines an Icon position related to the children: "before" | "after" */
44
44
  iconPosition?: ButtonIconPosition;
45
- /** [Legacy] Provides a tooltip message when the icon is hovered. */
46
- iconTooltipMessage?: string;
47
- /** [Legacy] Provides positioning when the tooltip is displayed. */
48
- iconTooltipPosition?: TooltipPositions;
49
45
  /** Defines an Icon type within the button */
50
46
  iconType?: IconType;
47
+ /**
48
+ * @deprecated [Legacy] Provides a tooltip message when the icon is hovered.
49
+ * */
50
+ iconTooltipMessage?: string;
51
+ /**
52
+ * @deprecated [Legacy] Provides positioning when the tooltip is displayed.
53
+ * */
54
+ iconTooltipPosition?: TooltipPositions;
51
55
  /** id attribute */
52
56
  id?: string;
53
57
  /**
@@ -1 +1 @@
1
- import{jsx as e,jsxs as t,Fragment as o}from"react/jsx-runtime";import i,{useContext as n,useState as r,useCallback as l}from"react";import a from"invariant";import c from"../icon/icon.component.js";import s,{StyledButtonMainText as p,StyledButtonSubtext as b}from"./button.style.js";import u from"../../__internal__/utils/helpers/tags/tags.js";import{TooltipProvider as d}from"../../__internal__/tooltip-provider/index.js";import f from"../button-bar/__internal__/button-bar.context.js";import y from"../split-button/__internal__/split-button.context.js";import m from"../batch-selection/__internal__/batch-selection.context.js";function h(e,t,o){return t in e?Object.defineProperty(e,t,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[t]=o,e}function g(e){for(var t=1;t<arguments.length;t++){var o=null!=arguments[t]?arguments[t]:{},i=Object.keys(o);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(o).filter((function(e){return Object.getOwnPropertyDescriptor(o,e).enumerable})))),i.forEach((function(t){h(e,t,o[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 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}function j({iconType:i,iconPosition:n,size:r,subtext:l,children:a,disabled:s,buttonType:u,iconTooltipMessage:f,iconTooltipPosition:y,tooltipTarget:m}){const h={"aria-hidden":!0,disabled:s,color:"primary"===u?"--colorsActionMajorYang100":u.includes("gradient")?"--colorsActionMinorYin090":"--colorsActionMajor500",bg:"transparent"},j=void 0!==a&&!1!==a;return t(o,{children:[i&&"before"===n&&j&&e(c,g({type:i},h)),j&&t("span",{children:[e(p,{"data-element":"main-text",children:a}),"large"===r&&e(b,{"data-element":"subtext","data-role":"subtext",children:l})]}),i&&!j&&e(d,{disabled:s,focusable:!1,target:m,children:e(c,O(g({type:i},h),{tooltipMessage:f,tooltipPosition:y}))}),i&&"after"===n&&a&&e(c,g({type:i},h))]})}const v=i.forwardRef(((t,o)=>{var{"aria-describedby":i,"aria-label":c,"aria-labelledby":p,buttonType:b="secondary",children:d,destructive:h=!1,disabled:v=!1,isWhite:P=!1,fullWidth:T=!1,href:_,iconPosition:x="before",iconTooltipMessage:w,iconTooltipPosition:k,iconType:W,m:S=0,noWrap:M,onClick:D,px:z,rel:C,size:E="medium",subtext:A="",target:B}=t,Y=function(e,t){if(null==e)return{};var o,i,n=function(e,t){if(null==e)return{};var o,i,n={},r=Object.keys(e);for(i=0;i<r.length;i++)o=r[i],t.indexOf(o)>=0||(n[o]=e[o]);return n}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(i=0;i<r.length;i++)o=r[i],t.indexOf(o)>=0||Object.prototype.propertyIsEnumerable.call(e,o)&&(n[o]=e[o])}return n}(t,["aria-describedby","aria-label","aria-labelledby","buttonType","children","destructive","disabled","isWhite","fullWidth","href","iconPosition","iconTooltipMessage","iconTooltipPosition","iconType","m","noWrap","onClick","px","rel","size","subtext","target"]);const{buttonType:I,size:K,iconPosition:N,fullWidth:R}=n(f),{batchSelectionDisabled:q}=n(m),F=I||b,G=K||E,H=N||x,J=R||T,L=v||q;a(void 0!==d||!!W,"Either prop `iconType` must be defined or this node must have children."),A&&a("large"===G,"subtext prop has no effect unless the button is large.");const[Q,U]=r(null),{inSplitButton:V,onChildButtonClick:X}=n(y);let Z;switch(G){case"small":Z=2;break;case"large":Z=4;break;default:Z=3}const $=l((e=>{U(e),o&&("object"==typeof o&&(o.current=e),"function"==typeof o&&o(e))}),[o]),ee=void 0!==d&&!1!==d;return e(s,O(g({"aria-label":!ee&&W?c||W:c,"aria-labelledby":p,"aria-describedby":i,as:!L&&_?"a":"button",onKeyDown:_?e=>{" "===e.key&&(e.preventDefault(),null==Q||Q.click())}:void 0,onClick:e=>{var t;null==Q||Q.focus({preventScroll:!0}),V?null==X||null===(t=X(D))||void 0===t||t(e):D&&D(e)},draggable:!1,buttonType:F,disabled:L,destructive:h,isWhite:P,type:_?void 0:"button",iconType:W,size:G,px:null!=z?z:Z,m:S,noWrap:M,iconOnly:!ee&&!!W,iconPosition:H,target:B,rel:C,fullWidth:J},u("button",Y),Y,_&&{href:_}),{ref:$,children:j({iconType:W,iconPosition:H,size:G,subtext:A,children:d,disabled:L,buttonType:F,iconTooltipMessage:w,iconTooltipPosition:k,tooltipTarget:Q})}))}));v.displayName="Button";export{v as default};
1
+ import{jsx as e,jsxs as t,Fragment as r}from"react/jsx-runtime";import n,{useContext as o,useState as i,useCallback as l}from"react";import a from"invariant";import c from"../icon/icon.component.js";import s,{StyledButtonMainText as b,StyledButtonSubtext as u}from"./button.style.js";import p from"../../__internal__/utils/helpers/tags/tags.js";import d from"../button-bar/__internal__/button-bar.context.js";import f from"../split-button/__internal__/split-button.context.js";import y from"../batch-selection/__internal__/batch-selection.context.js";function m(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function h(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){m(e,t,r[t])}))}return e}function O({iconType:n,iconPosition:o,size:i,subtext:l,children:a,disabled:s,buttonType:p}){const d={"aria-hidden":!0,disabled:s,color:"primary"===p?"--colorsActionMajorYang100":p.includes("gradient")?"--colorsActionMinorYin090":"--colorsActionMajor500",bg:"transparent"},f=void 0!==a&&!1!==a;return t(r,{children:[n&&"before"===o&&f&&e(c,h({type:n},d)),f&&t("span",{children:[e(b,{"data-element":"main-text",children:a}),"large"===i&&e(u,{"data-element":"subtext","data-role":"subtext",children:l})]}),n&&!f&&e(c,h({type:n},d)),n&&"after"===o&&a&&e(c,h({type:n},d))]})}const g=n.forwardRef(((t,r)=>{var{"aria-describedby":n,"aria-label":c,"aria-labelledby":b,buttonType:u="secondary",children:m,destructive:g=!1,disabled:j=!1,isWhite:v=!1,fullWidth:P=!1,href:x,iconPosition:_="before",iconType:w,m:T=0,noWrap:k,onClick:W,px:S,rel:D,size:z="medium",subtext:C="",target:E}=t,A=function(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}(t,["aria-describedby","aria-label","aria-labelledby","buttonType","children","destructive","disabled","isWhite","fullWidth","href","iconPosition","iconType","m","noWrap","onClick","px","rel","size","subtext","target"]);const{buttonType:B,size:M,iconPosition:Y,fullWidth:I}=o(d),{batchSelectionDisabled:K}=o(y),N=B||u,R=M||z,q=Y||_,F=I||P,G=j||K;a(void 0!==m||!!w,"Either prop `iconType` must be defined or this node must have children."),C&&a("large"===R,"subtext prop has no effect unless the button is large.");const[H,J]=i(null),{inSplitButton:L,onChildButtonClick:Q}=o(f);let U;switch(R){case"small":U=2;break;case"large":U=4;break;default:U=3}const V=l((e=>{J(e),r&&("object"==typeof r&&(r.current=e),"function"==typeof r&&r(e))}),[r]),X=void 0!==m&&!1!==m;return e(s,function(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}(h({"aria-label":!X&&w?c||w:c,"aria-labelledby":b,"aria-describedby":n,as:!G&&x?"a":"button",onKeyDown:x?e=>{" "===e.key&&(e.preventDefault(),null==H||H.click())}:void 0,onClick:e=>{var t;null==H||H.focus({preventScroll:!0}),L?null==Q||null===(t=Q(W))||void 0===t||t(e):W&&W(e)},draggable:!1,buttonType:N,disabled:G,destructive:g,isWhite:v,type:x?void 0:"button",iconType:w,size:R,px:null!=S?S:U,m:T,noWrap:k,iconOnly:!X&&!!w,iconPosition:q,target:E,rel:D,fullWidth:F},p("button",A),A,x&&{href:x}),{ref:V,children:O({iconType:w,iconPosition:q,size:R,subtext:C,children:m,disabled:G,buttonType:N})}))}));g.displayName="Button";export{g as default};
@@ -2,7 +2,7 @@ import { FlatTableRowHeaderProps } from "./flat-table-row-header.component";
2
2
  declare const StyledFlatTableRowHeader: import("styled-components").StyledComponent<"th", any, {
3
3
  theme: object;
4
4
  } & {
5
- "data-sticky-align": "left" | "right" | undefined;
5
+ "data-sticky-align": "right" | "left" | undefined;
6
6
  } & FlatTableRowHeaderProps & {
7
7
  expandable?: boolean;
8
8
  leftPosition?: number;
@@ -1 +1 @@
1
- import{jsx as e}from"react/jsx-runtime";import{useRef as t,useState as r,useContext as o,useEffect as n}from"react";import i from"../../__internal__/utils/helpers/tags/tags.js";import l from"../icon/icon.component.js";import p from"./help.style.js";import s from"../../__internal__/utils/helpers/events/events.js";import{TooltipContext as c}from"../../__internal__/tooltip-provider/index.js";import"../../style/utils/filter-styled-system-padding-props.js";import a from"../../style/utils/filter-styled-system-margin-props.js";import u from"../../__internal__/utils/helpers/guid/index.js";function f(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}const d=d=>{var{as:b,ariaLabel:y="help",children:m,href:O,helpId:j,isFocused:v,tabIndex:g=0,tooltipBgColor:h,tooltipFontColor:_,tooltipFlipOverrides:P,tooltipId:w,tooltipPosition:x="top",type:F="help"}=d,I=function(e,t){if(null==e)return{};var r,o,n=function(e,t){if(null==e)return{};var r,o,n={},i=Object.keys(e);for(o=0;o<i.length;o++)r=i[o],t.indexOf(r)>=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(o=0;o<i.length;o++)r=i[o],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}(d,["as","ariaLabel","children","href","helpId","isFocused","tabIndex","tooltipBgColor","tooltipFontColor","tooltipFlipOverrides","tooltipId","tooltipPosition","type"]);const k=t(u()),C=t(null),[E,L]=r(!1),{helpAriaLabel:S}=o(c);n((()=>{function e(e){var t;s.isEscKey(e)&&(null==C||null===(t=C.current)||void 0===t||t.blur(),L(!1))}return document.addEventListener("keydown",e),function(){document.removeEventListener("keydown",e)}}));const B=b||O&&"a"||"div";function D(e){return()=>{L(e)}}return e(p,(M=function(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){f(e,t,r[t])}))}return e}({"aria-describedby":v||E?w||k.current:void 0,"aria-label":S||y,as:B,href:O,id:j,ref:C,onClick:()=>{var e;null==C||null===(e=C.current)||void 0===e||e.focus()},onFocus:D(!0),onBlur:D(!1),onMouseOver:D(!0),onMouseLeave:D(!1),tabIndex:g},O?{target:"_blank",rel:"noopener noreferrer"}:{role:"button"},a(I),I,i("help",I)),A=null!=(A={children:e(l,{"aria-hidden":!0,type:F,tooltipMessage:m,tooltipPosition:x,tooltipVisible:v||E,tooltipBgColor:h,tooltipFontColor:_,tooltipFlipOverrides:P,focusable:!1,tooltipId:w||k.current})})?A:{},Object.getOwnPropertyDescriptors?Object.defineProperties(M,Object.getOwnPropertyDescriptors(A)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(A)).forEach((function(e){Object.defineProperty(M,e,Object.getOwnPropertyDescriptor(A,e))})),M));var M,A};d.displayName="Help";export{d as Help,d as default};
1
+ import{jsx as e}from"react/jsx-runtime";import{useRef as t,useState as r,useContext as o,useEffect as n}from"react";import i from"../../__internal__/utils/helpers/tags/tags.js";import l from"../icon/icon.component.js";import{Tooltip as s}from"../tooltip/tooltip.component.js";import p from"./help.style.js";import c from"../../__internal__/utils/helpers/events/events.js";import{TooltipContext as a}from"../../__internal__/tooltip-provider/index.js";import"../../style/utils/filter-styled-system-padding-props.js";import u from"../../style/utils/filter-styled-system-margin-props.js";import f from"../../__internal__/utils/helpers/guid/index.js";function d(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}const b=b=>{var{as:m,ariaLabel:y="help",children:O,href:j,helpId:v,isFocused:h,tabIndex:g=0,tooltipBgColor:_,tooltipFontColor:P,tooltipFlipOverrides:w,tooltipId:x,tooltipPosition:I="top",type:k="help"}=b,C=function(e,t){if(null==e)return{};var r,o,n=function(e,t){if(null==e)return{};var r,o,n={},i=Object.keys(e);for(o=0;o<i.length;o++)r=i[o],t.indexOf(r)>=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(o=0;o<i.length;o++)r=i[o],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}(b,["as","ariaLabel","children","href","helpId","isFocused","tabIndex","tooltipBgColor","tooltipFontColor","tooltipFlipOverrides","tooltipId","tooltipPosition","type"]);const F=t(f()),E=t(null),[L,S]=r(!1),{helpAriaLabel:D}=o(a);n((()=>{function e(e){var t;c.isEscKey(e)&&(null==E||null===(t=E.current)||void 0===t||t.blur(),S(!1))}return document.addEventListener("keydown",e),function(){document.removeEventListener("keydown",e)}}));const B=m||j&&"a"||"div";function M(e){return()=>{S(e)}}return e(p,(A=function(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){d(e,t,r[t])}))}return e}({"aria-describedby":h||L?x||F.current:void 0,"aria-label":D||y,as:B,href:j,id:v,ref:E,onClick:()=>{var e;null==E||null===(e=E.current)||void 0===e||e.focus()},onFocus:M(!0),onBlur:M(!1),onMouseOver:M(!0),onMouseLeave:M(!1),tabIndex:g},j?{target:"_blank",rel:"noopener noreferrer"}:{role:"button"},u(C),C,i("help",C)),H=null!=(H={children:O?e(s,{message:O,isVisible:h||L,position:I,id:x||F.current,bgColor:_,fontColor:P,flipOverrides:w,children:e(l,{"aria-hidden":!0,type:k,focusable:!1})}):e(l,{"aria-hidden":!0,type:k,focusable:!1})})?H:{},Object.getOwnPropertyDescriptors?Object.defineProperties(A,Object.getOwnPropertyDescriptors(H)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(H)).forEach((function(e){Object.defineProperty(A,e,Object.getOwnPropertyDescriptor(H,e))})),A));var A,H};b.displayName="Help";export{b as Help,b as default};
@@ -1 +1 @@
1
- const e={backgroundSize:{"extra-small":"16px",small:"24px",medium:"32px",large:"40px","extra-large":"56px"},backgroundShape:{square:"0%","rounded-rect":"20%",circle:"50%"},iconSize:{small:"var(--sizing250)",medium:"var(--sizing300)",large:"var(--sizing400)","extra-large":"var(--sizing600)"}},r=["bottom","left","right","top"],a=["circle","rounded-rect","square"],t=["small","medium","large","extra-large"],i=["small","medium","large","extra-large"],_=["accessibility_web","add","admin","airplay","alert","alert_on","analysis","app_facebook","app_instagram","app_tiktok","app_twitter","app_youtube","apps","arrow","arrow_bottom_right_circle","arrow_down","arrow_left","arrow_left_boxed","arrow_left_right_small","arrow_left_small","arrow_right","arrow_right_small","arrow_top_left_circle","arrow_top_right_circle","arrow_up","arrows_left_right","at_sign","attach","bank","bank_with_card","basket","basket_with_squares","batch","bed","bill_paid","bill_unpaid","bin","biometric","blocked","blocked_square","block_arrow_right","bold","box_arrow_left","box_arrow_right","boxed_shapes","bulk_destroy","bullet_list","bullet_list_dotted","bullet_list_numbers","business","calendar","calendar_today","call","calendar_pay_date","camera","car_lock","car_money","car_repair","card_view","card_wallet","caret_down","caret_left","caret_right","caret_up","caret_up_down","caret_large_down","caret_large_left","caret_large_right","caret_large_up","cart","cash","chat","chart_bar","chart_bar_arrow_up","chart_line","chart_pie","chat_notes","check_all","check_none","chevron_down","chevron_first","chevron_first_pagination","chevron_last","chevron_last_pagination","chevron_left","chevron_right","chevron_up","chevron_down_thick","chevron_left_thick","chevron_right_thick","chevron_up_thick","chromecast","circle_with_dots","circles_connection","clear","clock","close","code","cloud_co2","coins","collaborate","computer_clock","connect","connect_circle","connect_off","construction","contacts","contact_card","copy","create","credit_card","credit_card_slash","cross","cross_circle","csv","dashboard","delete","delivery","diagonal_arrows_up","disconnect","disputed","document_right_align","document_tick","document_vertical_lines","download","double_tick","drag","drag_hover","drag_vertical","draft","drill","dropdown","duplicate","edit","edited","email","email_switch","entry","ellipsis_horizontal","ellipsis_vertical","envelope_dollar","envelope_euro","error","error_square","euro","expand","export","factory","favourite","favourite_lined","fax","feedback","file_excel","file_generic","file_image","file_pdf","file_word","files_leaning","filter","filter_new","fit_height","fit_width","flag","flash","folder","form_refresh","framerate","fullscreen","gift","get_quote","go","graduation_hat","graph","grid","heart","heart_pulse","help","hide","hierarchy","hand_cash_coins","hand_cash_note","home","image","import","in_progress","in_transit","individual","info","intranet","ipad","italic","job_seeked","key","laptop","leaf","ledger","ledger_arrow_left","ledger_arrow_right","lightbulb_off","lightbulb_on","like","like_no","link","link_card","link_cloud","link_on","list_view","locked","location","login","logout","lookup","marker","message","microphone","minimise","minus","minus_large","mobile","money_bag","mute","none","normalscreen","old_warning","page","palm_tree","pause","pause_circle","petrol_pump","pdf","pin","people","people_switch","percentage_boxed","person","person_info","person_tick","phone","picture_in_picture","piggy_bank","placeholder","plane","play","play_circle","plus","plus_circle","plus_large","pound","print","progress","progressed","protect","question","question_hollow","question_mark","recruiting","refresh","refresh_clock","remove","replay","reset","sage_coin","save","scan","search","send","services","settings","settings_old","share","shield_with_tick","shield_with_tick_outline","shop","sort_down","sort_up","source_code","spanner","speaker","split","split_container","squares_nine","stacked_boxes","stacked_squares","stop","stop_circle","submitted","subtitles","support_online","sync","tag","talk","target","target_man","theatre_masks","three_boxes","tick","tick_circle","tick_thick","time_zone","true_tick","u_turn_left","u_turn_right","underline","undo","unlocked","upload","uploaded","user_groups","video","view","volume_high","volume_low","volume_medium","volunteering","warning","website","welfare","worldwide_location"];export{_ as ICONS,i as ICON_FONT_SIZES,a as ICON_SHAPES,t as ICON_SIZES,r as ICON_TOOLTIP_POSITIONS,e as default};
1
+ const e={backgroundSize:{"extra-small":"var(--global-size-2-xs)",small:"var(--global-size-xs)",medium:"var(--global-size-s)",large:"var(--global-size-m)","extra-large":"var(--global-size-m)"},backgroundShape:{square:"0%","rounded-rect":"20%",circle:"50%"},iconSize:{small:"var(--global-size-2-xs)",medium:"var(--global-size-xs)",large:"var(--global-size-s)","extra-large":"var(--global-size-s)"}},r=["bottom","left","right","top"],a=["circle","rounded-rect","square"],t=["small","medium","large","extra-large"],l=["small","medium","large","extra-large"],o=["accessibility_web","add","admin","airplay","alert","alert_on","analysis","app_facebook","app_instagram","app_tiktok","app_twitter","app_youtube","apps","arrow","arrow_bottom_right_circle","arrow_down","arrow_left","arrow_left_boxed","arrow_left_right_small","arrow_left_small","arrow_right","arrow_right_small","arrow_top_left_circle","arrow_top_right_circle","arrow_up","arrows_left_right","at_sign","attach","bank","bank_with_card","basket","basket_with_squares","batch","bed","bill_paid","bill_unpaid","bin","biometric","blocked","blocked_square","block_arrow_right","bold","box_arrow_left","box_arrow_right","boxed_shapes","bulk_destroy","bullet_list","bullet_list_dotted","bullet_list_numbers","business","calendar","calendar_today","call","calendar_pay_date","camera","car_lock","car_money","car_repair","card_view","card_wallet","caret_down","caret_left","caret_right","caret_up","caret_up_down","caret_large_down","caret_large_left","caret_large_right","caret_large_up","cart","cash","chat","chart_bar","chart_bar_arrow_up","chart_line","chart_pie","chat_notes","check_all","check_none","chevron_down","chevron_first","chevron_first_pagination","chevron_last","chevron_last_pagination","chevron_left","chevron_right","chevron_up","chevron_down_thick","chevron_left_thick","chevron_right_thick","chevron_up_thick","chromecast","circle_with_dots","circles_connection","clear","clock","close","code","cloud_co2","coins","collaborate","computer_clock","connect","connect_circle","connect_off","construction","contacts","contact_card","copy","create","credit_card","credit_card_slash","cross","cross_circle","csv","dashboard","delete","delivery","diagonal_arrows_up","disconnect","disputed","document_right_align","document_tick","document_vertical_lines","download","double_tick","drag","drag_hover","drag_vertical","draft","drill","dropdown","duplicate","edit","edited","email","email_switch","entry","ellipsis_horizontal","ellipsis_vertical","envelope_dollar","envelope_euro","error","error_square","euro","expand","export","factory","favourite","favourite_lined","fax","feedback","file_excel","file_generic","file_image","file_pdf","file_word","files_leaning","filter","filter_new","fit_height","fit_width","flag","flash","folder","form_refresh","framerate","fullscreen","gift","get_quote","go","graduation_hat","graph","grid","heart","heart_pulse","help","hide","hierarchy","hand_cash_coins","hand_cash_note","home","image","import","in_progress","in_transit","individual","info","intranet","ipad","italic","job_seeked","key","laptop","leaf","ledger","ledger_arrow_left","ledger_arrow_right","lightbulb_off","lightbulb_on","like","like_no","link","link_card","link_cloud","link_on","list_view","locked","location","login","logout","lookup","marker","message","microphone","minimise","minus","minus_large","mobile","money_bag","mute","none","normalscreen","old_warning","page","palm_tree","pause","pause_circle","petrol_pump","pdf","pin","people","people_switch","percentage_boxed","person","person_info","person_tick","phone","picture_in_picture","piggy_bank","placeholder","plane","play","play_circle","plus","plus_circle","plus_large","pound","print","progress","progressed","protect","question","question_hollow","question_mark","recruiting","refresh","refresh_clock","remove","replay","reset","sage_coin","save","scan","search","send","services","settings","settings_old","share","shield_with_tick","shield_with_tick_outline","shop","sort_down","sort_up","source_code","spanner","speaker","split","split_container","squares_nine","stacked_boxes","stacked_squares","stop","stop_circle","submitted","subtitles","support_online","sync","tag","talk","target","target_man","theatre_masks","three_boxes","tick","tick_circle","tick_thick","time_zone","true_tick","u_turn_left","u_turn_right","underline","undo","unlocked","upload","uploaded","user_groups","video","view","volume_high","volume_low","volume_medium","volunteering","warning","website","welfare","worldwide_location"];export{o as ICONS,l as ICON_FONT_SIZES,a as ICON_SHAPES,t as ICON_SIZES,r as ICON_TOOLTIP_POSITIONS,e as default};
@@ -1,11 +1,15 @@
1
1
  import React from "react";
2
2
  import { MarginProps } from "styled-system";
3
3
  import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
4
- import { StyledIconProps } from "./icon.style";
4
+ import { BackgroundShape, BgSize, FontSize, StyledIconProps } from "./icon.style";
5
5
  import { IconType } from "./icon-type";
6
6
  import { TooltipPositions } from "../tooltip/tooltip.config";
7
7
  export type LegacyIconTypes = "help" | "maintenance" | "new" | "success" | "messages";
8
- export interface IconProps extends Omit<StyledIconProps, "type">, MarginProps, TagProps {
8
+ /**
9
+ * The size of the Icon.
10
+ */
11
+ export type IconSize = "small" | "medium" | "large";
12
+ export interface IconProps extends Pick<StyledIconProps, "className" | "inverse">, MarginProps, TagProps {
9
13
  /** Set whether icon should be recognised by assistive technologies */
10
14
  "aria-hidden"?: boolean;
11
15
  /** Aria label for accessibility purposes */
@@ -14,22 +18,38 @@ export interface IconProps extends Omit<StyledIconProps, "type">, MarginProps, T
14
18
  id?: string;
15
19
  /** The ARIA role to be applied to the Icon */
16
20
  role?: string;
17
- /** [Legacy] The message to be displayed within the tooltip */
21
+ /**
22
+ * @deprecated Tooltip support has been removed from `Icon` and the use of tooltips
23
+ * is discouraged. This prop no longer has any effect.
24
+ */
18
25
  tooltipMessage?: React.ReactNode;
19
- /** [Legacy] The position to display the tooltip */
26
+ /** @deprecated */
20
27
  tooltipPosition?: TooltipPositions;
21
- /** [Legacy] Control whether the tooltip is visible */
28
+ /** @deprecated */
22
29
  tooltipVisible?: boolean;
23
- /** [Legacy] Override background color of the Tooltip, provide any color from palette or any valid css color value. */
30
+ /** @deprecated */
24
31
  tooltipBgColor?: string;
25
- /** [Legacy] Override font color of the Tooltip, provide any color from palette or any valid css color value. */
32
+ /** @deprecated */
26
33
  tooltipFontColor?: string;
27
- /** [Legacy] Overrides the default flip behaviour of the Tooltip */
34
+ /** @deprecated */
28
35
  tooltipFlipOverrides?: TooltipPositions[];
29
- /** [Legacy] Id passed to the tooltip container, used for accessibility purposes */
36
+ /** @deprecated */
30
37
  tooltipId?: string;
31
38
  /**
32
- * Icon type
39
+ * Icon type.
40
+ *
41
+ * Icons use a `snake_case` naming convention and are organised into the following categories:
42
+ *
43
+ * - **Navigation** — `arrow_*`, `chevron_*`, `caret_*`, `caret_large_*`
44
+ * - **Actions** — `add`, `bin`, `close`, `copy`, `create`, `delete`, `drag`, `download`,
45
+ * `edit`, `export`, `filter`, `link`, `search`, `settings`, `upload`, and more.
46
+ * - **Status** — `alert`, `blocked`, `double_tick`, `error`, `error_square`, `info`,
47
+ * `tick`, `warning`, and more.
48
+ * - **Communication** — `call`, `chat`, `email`, `fax`, `message`, and more.
49
+ * - **Finance** — `bank`, `cash`, `coins`, `credit_card`, `euro`, `receipt`, and more.
50
+ * - **Social / App** — `app_facebook`, `app_instagram`, `app_tiktok`, `app_twitter`, `app_youtube`.
51
+ * - **Documents & Files** — `attach`, `document_*`, `file_*`, and more.
52
+ * - **Charts** — `chart_bar`, `chart_bar_arrow_up`, `chart_line`, `chart_pie`.
33
53
  *
34
54
  * The full list of types can be seen [here](https://carbon.sage.com/?path=/docs/icon--list-of-icons#list-of-icons).
35
55
  */
@@ -42,6 +62,31 @@ export interface IconProps extends Omit<StyledIconProps, "type">, MarginProps, T
42
62
  inputSize?: "small" | "medium" | "large";
43
63
  /** @ignore @private */
44
64
  tabIndex?: number;
65
+ /**
66
+ * Size of the Icon.
67
+ *
68
+ * - `small` — 24px (default)
69
+ * - `medium` — 32px
70
+ * - `large` — 40px
71
+ */
72
+ size?: IconSize;
73
+ /** Renders the Icon in a light colour, suitable for use on dark backgrounds. */
74
+ inverse?: boolean;
75
+ /**
76
+ * @deprecated Use the `size` prop instead. The `extra-large` value is no longer
77
+ * supported and will be mapped to `large`.
78
+ */
79
+ fontSize?: FontSize;
80
+ /** @deprecated Use CSS or a wrapper element to apply a background colour. */
81
+ bg?: string;
82
+ /** @deprecated Use CSS or a wrapper element to apply a background shape. */
83
+ bgShape?: BackgroundShape;
84
+ /** @deprecated Use CSS or a wrapper element to control background size. */
85
+ bgSize?: BgSize;
86
+ /** @deprecated Use CSS or a wrapper element to control icon colour. */
87
+ color?: string;
88
+ /** @deprecated Applies disabled styling to the icon. */
89
+ disabled?: boolean;
45
90
  }
46
91
  declare const Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<HTMLSpanElement>>;
47
92
  export default Icon;
@@ -1 +1 @@
1
- import{jsx as t}from"react/jsx-runtime";import e,{useContext as o,useMemo as i}from"react";import r from"invariant";import{Tooltip as n}from"../tooltip/tooltip.component.js";import"../../style/utils/filter-styled-system-padding-props.js";import l from"../../style/utils/filter-styled-system-margin-props.js";import{TooltipContext as a}from"../../__internal__/tooltip-provider/index.js";import s from"./icon.style.js";import{ICON_TOOLTIP_POSITIONS as p}from"./icon-config.js";import{useTabs as c}from"../tabs/__next__/tabs.context.js";function d(t,e,o){return e in t?Object.defineProperty(t,e,{value:o,enumerable:!0,configurable:!0,writable:!0}):t[e]=o,t}function f(t){for(var e=1;e<arguments.length;e++){var o=null!=arguments[e]?arguments[e]:{},i=Object.keys(o);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(o).filter((function(t){return Object.getOwnPropertyDescriptor(o,t).enumerable})))),i.forEach((function(e){d(t,e,o[e])}))}return t}const u=e.forwardRef(((e,d)=>{var{"aria-hidden":u,ariaLabel:b,bg:m,bgShape:g,bgSize:y,className:O,color:v,"data-element":j,"data-role":h,disabled:S,focusable:I=!0,fontSize:P="small",id:x,inputSize:w,isPartOfInput:z,tabIndex:_,tooltipMessage:C,tooltipPosition:F,tooltipVisible:N,tooltipBgColor:V,tooltipFontColor:k,tooltipFlipOverrides:T,tooltipId:A,type:B,role:E}=e,L=function(t,e){if(null==t)return{};var o,i,r=function(t,e){if(null==t)return{};var o,i,r={},n=Object.keys(t);for(i=0;i<n.length;i++)o=n[i],e.indexOf(o)>=0||(r[o]=t[o]);return r}(t,e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(t);for(i=0;i<n.length;i++)o=n[i],e.indexOf(o)>=0||Object.prototype.propertyIsEnumerable.call(t,o)&&(r[o]=t[o])}return r}(e,["aria-hidden","ariaLabel","bg","bgShape","bgSize","className","color","data-element","data-role","disabled","focusable","fontSize","id","inputSize","isPartOfInput","tabIndex","tooltipMessage","tooltipPosition","tooltipVisible","tooltipBgColor","tooltipFontColor","tooltipFlipOverrides","tooltipId","type","role"]);const M=Array.isArray(T)&&T.every((t=>p.includes(t)));T&&r(M,'The tooltipFlipOverrides prop supplied to `Icon` must be an array containing some or all of ["top", "bottom", "left", "right"].');const q=!!C&&!S,{tooltipPosition:D,focusable:R,tooltipVisible:G,disabled:H,target:J}=o(a),{isInTab:K}=c(),Q=i((()=>{switch(B){case"help":return"question";case"maintenance":return"settings";case"new":return"gift";case"success":return"tick";case"messages":case"email":return"message";default:return B}}),[B]),U=!S&&!H&&!!C&&(void 0!==R?R:I),W=i((()=>{if(!K)return U&&void 0===_?0:_}),[K,U,_]),X=f({"aria-hidden":u,"aria-label":b,bg:m,bgSize:y||P,bgShape:g,className:O||void 0,color:v,"data-component":"icon","data-element":null!=j?j:Q,"data-role":null!=h?h:"icon",disabled:H||S,fontSize:P,hasTooltip:U,id:x,isInteractive:q,ref:d,role:E,tabIndex:W,type:Q},l(L));return C?t(n,{message:C,position:D||F,type:B,id:A,isVisible:!S&&(void 0!==G?G:N),isPartOfInput:z,inputSize:w,bgColor:V,fontColor:k,flipOverrides:T,target:J,children:t(s,f({},X))}):t(s,f({},X))}));u.displayName="Icon";export{u as default};
1
+ import{jsx as e}from"react/jsx-runtime";import t,{useMemo as r}from"react";import o from"../../__internal__/utils/logger/index.js";import"../../style/utils/filter-styled-system-padding-props.js";import i from"../../style/utils/filter-styled-system-margin-props.js";import n from"./icon.style.js";function a(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function l(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){a(e,t,r[t])}))}return e}const s=t.forwardRef(((t,a)=>{var{"aria-hidden":s,ariaLabel:p,bg:c,bgShape:u,bgSize:d,className:b,color:f,"data-element":m,"data-role":g,disabled:y,focusable:O,fontSize:S,id:h,inputSize:j,isPartOfInput:v,inverse:z,size:w="small",tabIndex:x,tooltipMessage:I,tooltipPosition:P,tooltipVisible:C,tooltipBgColor:F,tooltipFontColor:N,tooltipFlipOverrides:_,tooltipId:k,type:B,role:E}=t,L=function(e,t){if(null==e)return{};var r,o,i=function(e,t){if(null==e)return{};var r,o,i={},n=Object.keys(e);for(o=0;o<n.length;o++)r=n[o],t.indexOf(r)>=0||(i[r]=e[r]);return i}(e,t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);for(o=0;o<n.length;o++)r=n[o],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(i[r]=e[r])}return i}(t,["aria-hidden","ariaLabel","bg","bgShape","bgSize","className","color","data-element","data-role","disabled","focusable","fontSize","id","inputSize","isPartOfInput","inverse","size","tabIndex","tooltipMessage","tooltipPosition","tooltipVisible","tooltipBgColor","tooltipFontColor","tooltipFlipOverrides","tooltipId","type","role"]);const M=r((()=>{switch(B){case"help":return"question";case"maintenance":return"settings";case"new":return"gift";case"success":return"tick";case"messages":case"email":return"message";default:return B}}),[B]),V=r((()=>S?"extra-large"===S?(o.warn('[Icon] The `fontSize` value "extra-large" is no longer supported and has been mapped to "large".'),"large"):S:w),[S,w]),q=l({"aria-hidden":s,"aria-label":p,bg:c,bgSize:d||V,bgShape:u,className:b||void 0,color:f,"data-component":"icon","data-element":null!=m?m:M,"data-role":null!=g?g:"icon",disabled:y,fontSize:V,id:h,inverse:z,ref:a,role:E,tabIndex:x,type:M},i(L));return e(n,l({},q))}));s.displayName="Icon";export{s as default};
@@ -28,10 +28,13 @@ export interface StyledIconProps {
28
28
  * The full list of types can be seen [here](https://github.com/Sage/carbon/blob/master/src/components/icon/icon-config.js).
29
29
  */
30
30
  type: IconType;
31
+ /**
32
+ * Renders the Icon using the inverse colour token, suitable for use on dark backgrounds.
33
+ */
34
+ inverse?: boolean;
31
35
  }
32
36
  export interface StyledIconInternalProps {
33
37
  isInteractive?: boolean;
34
- hasTooltip?: boolean;
35
38
  theme?: ThemeObject;
36
39
  }
37
40
  declare const StyledIcon: import("styled-components").StyledComponent<"span", any, {
@@ -1 +1 @@
1
- import o,{css as e}from"styled-components";import{margin as t}from"styled-system";import r from"../../__internal__/utils/logger/index.js";import i from"../../style/themes/apply-base-theme.js";import n from"../../style/utils/add-focus-styling.js";import l from"../../style/utils/color.js";import{getWindow as s,getNavigator as a}from"../../__internal__/dom/globals.js";import c,{isSafari as m}from"../../__internal__/utils/helpers/browser-type-check/index.js";import d from"./icon-config.js";import g from"./icon-unicodes.js";import{StyledButton as f}from"../button/__next__/button.style.js";const p=e([""," &{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),u=o.span.attrs(i).withConfig({displayName:"icon.style__StyledIcon",componentId:"sc-56ac9ede-0"})(["",""],(({theme:o,color:i,bg:f,isInteractive:u,bgSize:h,bgShape:b,type:y,fontSize:_,disabled:v,hasTooltip:z})=>{let S="var(--colorsYin090)",j="transparent";const k=s(),x=a(),w=function(o,e){const t={small:1,medium:2,large:3,"extra-large":4};return o&&e?t[e]<t[o]?(r.warn(`[WARNING - Icon] The "${e}" \`bgSize\` is smaller than "${o}" \`fontSize\`, the \`bgSize\` has been auto adjusted to a larger size.`),d.backgroundSize[o]):d.backgroundSize[e]:e?d.backgroundSize[e]:void 0}(_,h);if(v)S="var(--colorsYin030)";else if(i){const{color:e}=l({color:i,theme:o});S=e}if(f){const{backgroundColor:e}=l({bg:f,theme:o});j=e}return e(["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;}"," "," ",""],S,j,w,w,b?`border-radius: ${d.backgroundShape[b]}`:"",u&&e(["&:not(:focus):hover{filter:brightness(0.9);}"]),g[y],_&&e(["font-size:",";line-height:",";"],d.iconSize[_],d.iconSize[_]),k&&"services"===y&&c(k)&&e(["margin-top:",";"],"small"===_?"-7px":"-8px"),x&&k&&"services"===y&&m(x)&&!c(k)&&e(["margin-top:-6px;"]),z&&`\n :focus {\n ${n()}\n }\n `,t,p)}));export{u 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;}"],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};
@@ -38,5 +38,5 @@ declare const StyledImage: import("styled-components").StyledComponent<"div", an
38
38
  backgroundPosition: import("styled-system").ResponsiveValue<import("csstype").Property.BackgroundPosition<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>;
39
39
  backgroundRepeat: import("styled-system").ResponsiveValue<import("csstype").Property.BackgroundRepeat, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>;
40
40
  backgroundSize: import("styled-system").ResponsiveValue<import("csstype").Property.BackgroundSize<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>;
41
- } & StyledImageProps, "theme" | "children" | "hidden" | "src" | "as" | "left" | "right" | "position" | "bottom" | "top" | "backgroundRepeat" | "backgroundSize" | "backgroundPosition">;
41
+ } & StyledImageProps, "position" | "top" | "right" | "bottom" | "left" | "hidden" | "theme" | "children" | "as" | "src" | "backgroundRepeat" | "backgroundSize" | "backgroundPosition">;
42
42
  export { StyledImage };
@@ -1 +1 @@
1
- import{jsx as t}from"react/jsx-runtime";import{useState as o,useEffect as e}from"react";import{Tooltip as r}from"../tooltip/tooltip.component.js";import i from"../../__internal__/utils/helpers/tags/tags.js";import{StyledPortraitInitials as n,StyledPortraitContainer as l,StyledIcon as s,StyledCustomImg as a}from"./portrait.style.js";import"../../style/utils/filter-styled-system-padding-props.js";import p from"../../style/utils/filter-styled-system-margin-props.js";function c(t,o,e){return o in t?Object.defineProperty(t,o,{value:e,enumerable:!0,configurable:!0,writable:!0}):t[o]=e,t}function u(t){for(var o=1;o<arguments.length;o++){var e=null!=arguments[o]?arguments[o]:{},r=Object.keys(e);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(e).filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})))),r.forEach((function(o){c(t,o,e[o])}))}return t}function f(t,o){return o=null!=o?o:{},Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(o)):function(t){var o=Object.keys(t);if(Object.getOwnPropertySymbols){var e=Object.getOwnPropertySymbols(t);o.push.apply(o,e)}return o}(Object(o)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(o,e))})),t}const d=c=>{var{alt:d,backgroundColor:g,foregroundColor:m,className:y,name:b,darkBackground:O=!1,iconType:j="individual",initials:k,shape:C="circle",size:h="M",src:v,onClick:P,tooltipMessage:w,tooltipId:z,tooltipIsVisible:S,tooltipPosition:B,tooltipType:I,tooltipSize:V,tooltipBgColor:x,tooltipFontColor:D,variant:E}=c,N=function(t,o){if(null==t)return{};var e,r,i=function(t,o){if(null==t)return{};var e,r,i={},n=Object.keys(t);for(r=0;r<n.length;r++)e=n[r],o.indexOf(e)>=0||(i[e]=t[e]);return i}(t,o);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(t);for(r=0;r<n.length;r++)e=n[r],o.indexOf(e)>=0||Object.prototype.propertyIsEnumerable.call(t,e)&&(i[e]=t[e])}return i}(c,["alt","backgroundColor","foregroundColor","className","name","darkBackground","iconType","initials","shape","size","src","onClick","tooltipMessage","tooltipId","tooltipIsVisible","tooltipPosition","tooltipType","tooltipSize","tooltipBgColor","tooltipFontColor","variant"]);const[T,_]=o(!1),M=Boolean(v)&&!T;e((()=>{_(!1)}),[v]);const F=i("portrait",N);return(()=>{let o=t(s,{type:j,size:h,variant:E});return k&&(o=t(n,{size:h,"data-element":"initials",variant:E,children:k.slice(0,3).toUpperCase()})),v&&!T&&(o=t(a,{src:v,alt:d||b||"","data-element":"user-image",onError:()=>_(!0)})),w?t(r,{message:w,id:z,position:B,type:I,size:V,isVisible:S,bgColor:x,fontColor:D,children:t(l,f(u(f(u({},p(N)),{onClick:P,className:y}),F),{hasValidImg:M,darkBackground:O,size:h,shape:C,backgroundColor:g,foregroundColor:m,variant:E,children:o}))}):t(l,f(u(f(u({},p(N)),{onClick:P,className:y}),F),{hasValidImg:M,darkBackground:O,size:h,shape:C,backgroundColor:g,foregroundColor:m,variant:E,children:o}))})()};export{d as Portrait,d as default};
1
+ import{jsx as t}from"react/jsx-runtime";import{useState as o,useEffect as e}from"react";import{Tooltip as r}from"../tooltip/tooltip.component.js";import i from"../../__internal__/utils/helpers/tags/tags.js";import{StyledPortraitInitials as n,StyledPortraitContainer as l,StyledIcon as s,StyledCustomImg as a}from"./portrait.style.js";import"../../style/utils/filter-styled-system-padding-props.js";import p from"../../style/utils/filter-styled-system-margin-props.js";function c(t,o,e){return o in t?Object.defineProperty(t,o,{value:e,enumerable:!0,configurable:!0,writable:!0}):t[o]=e,t}function u(t){for(var o=1;o<arguments.length;o++){var e=null!=arguments[o]?arguments[o]:{},r=Object.keys(e);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(e).filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})))),r.forEach((function(o){c(t,o,e[o])}))}return t}function f(t,o){return o=null!=o?o:{},Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(o)):function(t){var o=Object.keys(t);if(Object.getOwnPropertySymbols){var e=Object.getOwnPropertySymbols(t);o.push.apply(o,e)}return o}(Object(o)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(o,e))})),t}const d=c=>{var{alt:d,backgroundColor:g,foregroundColor:m,className:y,name:b,darkBackground:O=!1,iconType:j="individual",initials:k,shape:C="circle",size:h="M",src:v,onClick:P,tooltipMessage:w,tooltipId:z,tooltipIsVisible:S,tooltipPosition:B,tooltipType:I,tooltipSize:V,tooltipBgColor:x,tooltipFontColor:D,variant:E}=c,N=function(t,o){if(null==t)return{};var e,r,i=function(t,o){if(null==t)return{};var e,r,i={},n=Object.keys(t);for(r=0;r<n.length;r++)e=n[r],o.indexOf(e)>=0||(i[e]=t[e]);return i}(t,o);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(t);for(r=0;r<n.length;r++)e=n[r],o.indexOf(e)>=0||Object.prototype.propertyIsEnumerable.call(t,e)&&(i[e]=t[e])}return i}(c,["alt","backgroundColor","foregroundColor","className","name","darkBackground","iconType","initials","shape","size","src","onClick","tooltipMessage","tooltipId","tooltipIsVisible","tooltipPosition","tooltipType","tooltipSize","tooltipBgColor","tooltipFontColor","variant"]);const[T,_]=o(!1),M=Boolean(v)&&!T;e((()=>{_(!1)}),[v]);const F=i("portrait",N);return(()=>{let o=t(s,{type:j,$portraitSize:h});return k&&(o=t(n,{size:h,"data-element":"initials",variant:E,children:k.slice(0,3).toUpperCase()})),v&&!T&&(o=t(a,{src:v,alt:d||b||"","data-element":"user-image",onError:()=>_(!0)})),w?t(r,{message:w,id:z,position:B,type:I,size:V,isVisible:S,bgColor:x,fontColor:D,children:t(l,f(u(f(u({},p(N)),{onClick:P,className:y}),F),{hasValidImg:M,darkBackground:O,size:h,shape:C,backgroundColor:g,foregroundColor:m,variant:E,children:o}))}):t(l,f(u(f(u({},p(N)),{onClick:P,className:y}),F),{hasValidImg:M,darkBackground:O,size:h,shape:C,backgroundColor:g,foregroundColor:m,variant:E,children:o}))})()};export{d as Portrait,d as default};
@@ -1,3 +1,9 @@
1
1
  import { PortraitShapes, PortraitSizes } from "./portrait.component";
2
2
  export declare const PORTRAIT_SHAPES: PortraitShapes[];
3
3
  export declare const PORTRAIT_SIZES: PortraitSizes[];
4
+ type PortraitSizeParams = Record<PortraitSizes, {
5
+ dimensions: number;
6
+ iconDimensions: number;
7
+ }>;
8
+ export declare const PORTRAIT_SIZE_PARAMS: PortraitSizeParams;
9
+ export {};
@@ -1 +1 @@
1
- const L=["circle","square"],X=["XS","S","M","ML","L","XL","XXL"];export{L as PORTRAIT_SHAPES,X as PORTRAIT_SIZES};
1
+ const i=["circle","square"],n=["XS","S","M","ML","L","XL","XXL"],s={XS:{dimensions:32,iconDimensions:16},S:{dimensions:32,iconDimensions:20},M:{dimensions:40,iconDimensions:24},ML:{dimensions:56,iconDimensions:32},L:{dimensions:72,iconDimensions:40},XL:{dimensions:104,iconDimensions:56},XXL:{dimensions:128,iconDimensions:64}};export{i as PORTRAIT_SHAPES,n as PORTRAIT_SIZES,s as PORTRAIT_SIZE_PARAMS};
@@ -13,7 +13,10 @@ type StyledPortraitProps = {
13
13
  };
14
14
  export declare const StyledPortraitInitials: import("styled-components").StyledComponent<"div", any, Pick<StyledPortraitProps, "size" | "variant">, never>;
15
15
  export declare const StyledCustomImg: import("styled-components").StyledComponent<"img", any, {}, never>;
16
- export declare const StyledIcon: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<import("../icon").IconProps & React.RefAttributes<HTMLSpanElement>>, any, Pick<StyledPortraitProps, "size" | "variant">, never>;
16
+ export declare const StyledIcon: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<import("../icon").IconProps & React.RefAttributes<HTMLSpanElement>>, any, {
17
+ $portraitSize: PortraitSizes;
18
+ variant?: PortraitVariant;
19
+ }, never>;
17
20
  export declare const StyledPortraitContainer: import("styled-components").StyledComponent<"div", any, {
18
21
  theme: object;
19
22
  } & StyledPortraitProps & MarginProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>, "theme">;
@@ -1 +1 @@
1
- import"react";import t from"styled-components";import{margin as e}from"styled-system";import i from"../icon/icon.component.js";import o from"../../style/themes/apply-base-theme.js";import r,{getPortraitFontSize as n,getPortraitColors as s,getPortraitDimensions as l,getPortraitIconFontSize as a,getPortraitBorderRadius as d}from"./__internal__/get-properties.js";const m=t.div.withConfig({displayName:"portrait.style__StyledPortraitInitials",componentId:"sc-fbaa2f3e-0"})(["font:",";display:flex;white-space:nowrap;align-items:center;justify-content:center;height:inherit;width:inherit;.mentions-list-item &&{color:var(--input-dropdown-label-default);}.mentions-list-item:hover &&,.mentions-list-item.selected &&{color:var(--popover-label-hover);}"],(({size:t})=>n(t))),c=t.img.withConfig({displayName:"portrait.style__StyledCustomImg",componentId:"sc-fbaa2f3e-1"})(["height:inherit;min-width:inherit;"]),h=t(i).withConfig({displayName:"portrait.style__StyledIcon",componentId:"sc-fbaa2f3e-2"})(["&&{color:",";height:",";min-width:",";::before{font-size:",";}}"],(({variant:t})=>s(t).color),(({size:t})=>l(t).height),(({size:t})=>l(t).width),(({size:t})=>a(t))),p=t.div.attrs(o).withConfig({displayName:"portrait.style__StyledPortraitContainer",componentId:"sc-fbaa2f3e-3"})([""," ",";"," min-width:",";height:",";overflow:hidden;border-radius:",";border:var(--global-borderwidth-xs) solid var(--profile-border-default);display:inline-block;"," "," .mentions-list-item &&{color:currentColor;}.mentions-list-item:hover &&,.mentions-list-item.selected &&{color:currentColor;}"],(({variant:t})=>`\n background-color: ${s(t).backgroundColor};\n color: ${s(t).color};\n `),(({darkBackground:t,backgroundColor:e,size:i,foregroundColor:o,variant:n})=>!n&&r(e,t,!["XS","S"].includes(i),!0,o)),(({hasValidImg:t,size:e})=>t&&`max-width: ${l(e).width};`),(({size:t})=>l(t).width),(({size:t})=>l(t).height),(({shape:t,size:e})=>d(t,e)),(({onClick:t})=>t&&"cursor: pointer"),e);export{c as StyledCustomImg,h as StyledIcon,p as StyledPortraitContainer,m as StyledPortraitInitials};
1
+ import"react";import t from"styled-components";import{margin as i}from"styled-system";import o from"../icon/icon.component.js";import e from"../../style/themes/apply-base-theme.js";import r,{getPortraitFontSize as n,getPortraitColors as s,getPortraitDimensions as l,getPortraitIconFontSize as a,getPortraitBorderRadius as d}from"./__internal__/get-properties.js";const m=t.div.withConfig({displayName:"portrait.style__StyledPortraitInitials",componentId:"sc-67607789-0"})(["font:",";display:flex;white-space:nowrap;align-items:center;justify-content:center;height:inherit;width:inherit;.mentions-list-item &&{color:var(--input-dropdown-label-default);}.mentions-list-item:hover &&,.mentions-list-item.selected &&{color:var(--popover-label-hover);}"],(({size:t})=>n(t))),c=t.img.withConfig({displayName:"portrait.style__StyledCustomImg",componentId:"sc-67607789-1"})(["height:inherit;min-width:inherit;"]),p=t(o).withConfig({displayName:"portrait.style__StyledIcon",componentId:"sc-67607789-2"})(["&&{color:",";height:",";min-width:",";::before{font-size:",";}}"],(({variant:t})=>s(t).color),(({$portraitSize:t})=>l(t).height),(({$portraitSize:t})=>l(t).width),(({$portraitSize:t})=>a(t))),h=t.div.attrs(e).withConfig({displayName:"portrait.style__StyledPortraitContainer",componentId:"sc-67607789-3"})([""," ",";"," min-width:",";height:",";overflow:hidden;border-radius:",";border:var(--global-borderwidth-xs) solid var(--profile-border-default);display:inline-block;"," "," .mentions-list-item &&{color:currentColor;}.mentions-list-item:hover &&,.mentions-list-item.selected &&{color:currentColor;}"],(({variant:t})=>`\n background-color: ${s(t).backgroundColor};\n color: ${s(t).color};\n `),(({darkBackground:t,backgroundColor:i,size:o,foregroundColor:e,variant:n})=>!n&&r(i,t,!["XS","S"].includes(o),!0,e)),(({hasValidImg:t,size:i})=>t&&`max-width: ${l(i).width};`),(({size:t})=>l(t).width),(({size:t})=>l(t).height),(({shape:t,size:i})=>d(t,i)),(({onClick:t})=>t&&"cursor: pointer"),i);export{c as StyledCustomImg,p as StyledIcon,h as StyledPortraitContainer,m as StyledPortraitInitials};
@@ -8,5 +8,5 @@ declare const StyledProgressBar: import("styled-components").StyledComponent<"sp
8
8
  declare const StyledValue: import("styled-components").StyledComponent<"span", any, {}, never>;
9
9
  declare const StyledDescription: import("styled-components").StyledComponent<"span", any, {}, never>;
10
10
  declare const StyledValuesLabel: import("styled-components").StyledComponent<"span", any, Pick<ProgressTrackerProps, "size" | "labelWidth" | "labelsPosition">, never>;
11
- declare const InnerBar: import("styled-components").StyledComponent<"span", any, Required<Pick<ProgressTrackerProps, "error" | "progress" | "size">>, never>;
11
+ declare const InnerBar: import("styled-components").StyledComponent<"span", any, Required<Pick<ProgressTrackerProps, "size" | "error" | "progress">>, never>;
12
12
  export { StyledProgressBar, InnerBar, StyledProgressTracker, StyledValuesLabel, StyledValue, StyledDescription, };
@@ -1 +1 @@
1
- import{jsx as e}from"react/jsx-runtime";import{useContext as r,createContext as t,useState as n,useCallback as o,useEffect as s}from"react";import i from"../../../hooks/__internal__/usePrevious/index.js";function a(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function c(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},n=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),n.forEach((function(r){a(e,r,t[r])}))}return e}const b=t({activeTab:"",currentTabId:"",focusIndex:"",isInTab:!1,labelledBy:"",orientation:"horizontal",selectedTabId:"",setActiveTab:()=>{},setFocusIndex:()=>{},setCurrentTabId:()=>{},setErrors:()=>{},setWarnings:()=>{},size:"medium",errors:{},warnings:{},infos:{},setInfos:()=>{}}),l=()=>r(b),u=({children:r,isInTab:t=!0,labelledBy:a,orientation:l,selectedTabId:u="",size:d})=>{const[f,I]=n(u),[m,T]=n(u),[y,p]=n(""),[v,g]=n({}),[O,j]=n({}),[x,h]=n({}),w=o(((e,r,t)=>{const n={[r]:{[e]:t}};g((o=>(o[r]||(o[r]={}),o[r][e]!==t?c({},o,n):o)))}),[]),P=o(((e,r,t)=>{const n={[r]:{[e]:t}};j((o=>(o[r]||(o[r]={}),o[r][e]!==t?c({},o,n):o)))}),[]),z=o(((e,r,t)=>{const n={[r]:{[e]:t}};h((o=>(o[r]||(o[r]={}),o[r][e]!==t?c({},o,n):o)))}),[]),_=i(u);return s((()=>{u&&u!==_&&(I(u),T(u))}),[u,_]),e(b.Provider,{value:{activeTab:f,currentTabId:m,focusIndex:y,isInTab:t,labelledBy:a,orientation:l,setActiveTab:I,setCurrentTabId:T,setFocusIndex:p,setErrors:w,setWarnings:P,size:d,errors:v,warnings:O,infos:x,setInfos:z},children:r})};export{b as TabsContext,u as TabsProvider,l as useTabs};
1
+ import{jsx as e}from"react/jsx-runtime";import{createContext as r,useState as t,useCallback as n,useEffect as o,useContext as s}from"react";import i from"../../../hooks/__internal__/usePrevious/index.js";function a(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function c(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},n=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),n.forEach((function(r){a(e,r,t[r])}))}return e}const b=r({activeTab:"",currentTabId:"",focusIndex:"",isInTab:!1,labelledBy:"",orientation:"horizontal",selectedTabId:"",setActiveTab:()=>{},setFocusIndex:()=>{},setCurrentTabId:()=>{},setErrors:()=>{},setWarnings:()=>{},size:"medium",errors:{},warnings:{},infos:{},setInfos:()=>{}}),l=()=>s(b),u=({children:r,isInTab:s=!0,labelledBy:a,orientation:l,selectedTabId:u="",size:d})=>{const[f,I]=t(u),[m,T]=t(u),[y,p]=t(""),[v,g]=t({}),[O,j]=t({}),[x,h]=t({}),w=n(((e,r,t)=>{const n={[r]:{[e]:t}};g((o=>(o[r]||(o[r]={}),o[r][e]!==t?c({},o,n):o)))}),[]),P=n(((e,r,t)=>{const n={[r]:{[e]:t}};j((o=>(o[r]||(o[r]={}),o[r][e]!==t?c({},o,n):o)))}),[]),z=n(((e,r,t)=>{const n={[r]:{[e]:t}};h((o=>(o[r]||(o[r]={}),o[r][e]!==t?c({},o,n):o)))}),[]),_=i(u);return o((()=>{u&&u!==_&&(I(u),T(u))}),[u,_]),e(b.Provider,{value:{activeTab:f,currentTabId:m,focusIndex:y,isInTab:s,labelledBy:a,orientation:l,setActiveTab:I,setCurrentTabId:T,setFocusIndex:p,setErrors:w,setWarnings:P,size:d,errors:v,warnings:O,infos:x,setInfos:z},children:r})};export{b as TabsContext,u as TabsProvider,l as useTabs};
@@ -2,7 +2,7 @@ import { SpaceProps } from "styled-system";
2
2
  import { TileProps } from "./tile.component";
3
3
  declare const StyledTile: import("styled-components").StyledComponent<"div", any, {
4
4
  theme: object;
5
- } & Pick<TileProps, "height" | "width" | "variant" | "borderWidth" | "highlightVariant" | "roundness" | "borderVariant"> & {
5
+ } & Pick<TileProps, "width" | "height" | "variant" | "borderWidth" | "highlightVariant" | "roundness" | "borderVariant"> & {
6
6
  isHorizontal?: boolean;
7
7
  } & SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol>, "theme">;
8
8
  export default StyledTile;
@@ -1,5 +1,5 @@
1
1
  import { TooltipProps } from "./tooltip.component";
2
2
  declare const StyledTooltip: import("styled-components").StyledComponent<"div", any, {
3
3
  theme: object;
4
- } & Pick<TooltipProps, "type" | "size" | "bgColor" | "fontColor">, "theme">;
4
+ } & Pick<TooltipProps, "size" | "type" | "bgColor" | "fontColor">, "theme">;
5
5
  export default StyledTooltip;
@@ -2,5 +2,5 @@ import { CommonInputPresentationProps } from "./input-presentation.component";
2
2
  import { InputContextProps } from "../input-behaviour";
3
3
  import { CarbonProviderProps } from "../../components/carbon-provider";
4
4
  export declare const StyledInputPresentationContainer: import("styled-components").StyledComponent<"div", any, Pick<CommonInputPresentationProps, "maxWidth" | "inputWidth">, never>;
5
- declare const InputPresentationStyle: import("styled-components").StyledComponent<"div", any, Pick<InputContextProps, "hasFocus"> & Pick<CommonInputPresentationProps, "disabled" | "error" | "info" | "warning" | "readOnly" | "size" | "align" | "borderRadius" | "hasIcon" | "hideBorders"> & Pick<CarbonProviderProps, "validationRedesignOptIn">, never>;
5
+ declare const InputPresentationStyle: import("styled-components").StyledComponent<"div", any, Pick<InputContextProps, "hasFocus"> & Pick<CommonInputPresentationProps, "size" | "disabled" | "error" | "info" | "warning" | "align" | "readOnly" | "borderRadius" | "hasIcon" | "hideBorders"> & Pick<CarbonProviderProps, "validationRedesignOptIn">, never>;
6
6
  export default InputPresentationStyle;
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("invariant"),o=require("../utils/helpers/guid/index.js"),n=require("../../components/icon/icon.component.js"),i=require("./validation-icon.style.js"),u=require("../input-behaviour/input-behaviour.component.js"),s=require("../input-behaviour/input-group-behaviour.component.js");require("../../style/utils/filter-styled-system-padding-props.js");var l=require("../../style/utils/filter-styled-system-margin-props.js");function a(e){return e&&e.__esModule?e:{default:e}}var p=a(r);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}const f=r=>{var{error:a,warning:f,info:d,size:b,onFocus:O,onBlur:y,iconId:v,tooltipId:g,isPartOfInput:j,tabIndex:m=-1,onClick:P,tooltipPosition:h="right",tooltipFlipOverrides:w}=r,I=function(e,t){if(null==e)return{};var r,o,n=function(e,t){if(null==e)return{};var r,o,n={},i=Object.keys(e);for(o=0;o<i.length;o++)r=i[o],t.indexOf(r)>=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(o=0;o<i.length;o++)r=i[o],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}(r,["error","warning","info","size","onFocus","onBlur","iconId","tooltipId","isPartOfInput","tabIndex","onClick","tooltipPosition","tooltipFlipOverrides"]);const x=t.useRef(g||o.default()),q=Array.isArray(w)&&w.every((e=>["bottom","left","right","top"].includes(e)));w&&p.default(q,'The tooltipFlipOverrides prop supplied to ValidationIcon must be an array containing some or all of ["top", "bottom", "left", "right"].');const{hasFocus:F,hasMouseOver:S}=t.useContext(u.InputContext),{hasFocus:C,hasMouseOver:M}=t.useContext(s.InputGroupContext),[k,D]=t.useState(!1),_=(({error:e,warning:t,info:r})=>e?"error":t?"warning":r?"info":null)({error:a,warning:f,info:d}),z=a||f||d;return"string"==typeof z&&_?e.jsx(i.default,(B=function(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){c(e,t,r[t])}))}return e}({validationType:_,onClick:P,onMouseOver:()=>D(!0),onMouseLeave:()=>D(!1),onFocus:e=>{D(!0),O&&O(e)},onBlur:e=>{D(!1),y&&y(e)},isPartOfInput:j,"data-role":"validation-icon-wrapper"},l.default(I)),E=null!=(E={children:e.jsx(n.default,{"aria-describedby":x.current,type:_,tabIndex:m,tooltipId:x.current,tooltipMessage:z,tooltipPosition:h,tooltipVisible:F||S||C||M||k,tooltipFlipOverrides:j&&!w?["top","bottom"]:w,isPartOfInput:j,inputSize:b,id:v,focusable:-1!==m,"data-role":`icon-${_}`},`${_}-icon`)})?E:{},Object.getOwnPropertyDescriptors?Object.defineProperties(B,Object.getOwnPropertyDescriptors(E)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(E)).forEach((function(e){Object.defineProperty(B,e,Object.getOwnPropertyDescriptor(E,e))})),B)):null;var B,E};exports.ValidationIcon=f,exports.default=f;
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("invariant"),o=require("../utils/helpers/guid/index.js"),n=require("../../components/icon/icon.component.js"),i=require("../../components/tooltip/tooltip.component.js"),s=require("./validation-icon.style.js"),u=require("../input-behaviour/input-behaviour.component.js"),l=require("../input-behaviour/input-group-behaviour.component.js");require("../../style/utils/filter-styled-system-padding-props.js");var p=require("../../style/utils/filter-styled-system-margin-props.js"),a=require("../tooltip-provider/index.js");function c(e){return e&&e.__esModule?e:{default:e}}var f=c(r);function d(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}const b=r=>{var{error:c,warning:b,info:O,size:y,onFocus:j,onBlur:v,iconId:g,tooltipId:m,isPartOfInput:P,tabIndex:h=-1,onClick:x,tooltipPosition:w="right",tooltipFlipOverrides:I}=r,q=function(e,t){if(null==e)return{};var r,o,n=function(e,t){if(null==e)return{};var r,o,n={},i=Object.keys(e);for(o=0;o<i.length;o++)r=i[o],t.indexOf(r)>=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(o=0;o<i.length;o++)r=i[o],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}(r,["error","warning","info","size","onFocus","onBlur","iconId","tooltipId","isPartOfInput","tabIndex","onClick","tooltipPosition","tooltipFlipOverrides"]);const C=t.useRef(m||o.default()),S=Array.isArray(I)&&I.every((e=>["bottom","left","right","top"].includes(e)));I&&f.default(S,'The tooltipFlipOverrides prop supplied to ValidationIcon must be an array containing some or all of ["top", "bottom", "left", "right"].');const{hasFocus:F,hasMouseOver:k}=t.useContext(u.InputContext),{hasFocus:M,hasMouseOver:z}=t.useContext(l.InputGroupContext),{tooltipPosition:D}=t.useContext(a.TooltipContext),[T,_]=t.useState(!1),B=null!=D?D:w,E=(({error:e,warning:t,info:r})=>e?"error":t?"warning":r?"info":null)({error:c,warning:b,info:O}),V=c||b||O;return"string"==typeof V&&E?e.jsx(s.default,(A=function(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){d(e,t,r[t])}))}return e}({validationType:E,onClick:x,onMouseOver:()=>_(!0),onMouseLeave:()=>_(!1),onFocus:e=>{_(!0),j&&j(e)},onBlur:e=>{_(!1),v&&v(e)},isPartOfInput:P,"data-role":"validation-icon-wrapper"},p.default(q)),$=null!=($={children:e.jsx(i.Tooltip,{message:V,isVisible:F||k||M||z||T,position:B,id:C.current,flipOverrides:P&&!I?["top","bottom"]:I,isPartOfInput:P,inputSize:y,children:e.jsx(n.default,{"aria-describedby":C.current,type:E,tabIndex:h,isPartOfInput:P,inputSize:y,id:g,focusable:-1!==h,"data-role":`icon-${E}`},`${E}-icon`)})})?$:{},Object.getOwnPropertyDescriptors?Object.defineProperties(A,Object.getOwnPropertyDescriptors($)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object($)).forEach((function(e){Object.defineProperty(A,e,Object.getOwnPropertyDescriptor($,e))})),A)):null;var A,$};exports.ValidationIcon=b,exports.default=b;
@@ -1 +1 @@
1
- "use strict";var e=require("styled-components"),r=require("styled-system"),o=require("./advanced-color-picker-cell.style.js"),i=require("../simple-color-picker/simple-color-picker.style.js"),l=require("../simple-color-picker/simple-color/simple-color.style.js"),t=require("../dialog/__internal__/__next__/dialog.style.js"),d=require("../dialog/dialog.component.js"),a=require("../simple-color-picker/simple-color/checker-board.svg"),s=require("../../style/utils/visually-hidden.js"),n=require("../definition-list/dl.component.js");require("../definition-list/dt/dt.component.js"),require("../definition-list/dd/dd.component.js");var c=require("../../style/themes/apply-base-theme.js");function p(e){return e&&e.__esModule?e:{default:e}}var u=p(e),m=p(a);const y=u.default.div.attrs(c.default).withConfig({displayName:"advanced-color-picker.style__StyledAdvancedColorPickerWrapper",componentId:"sc-62bd57d3-0"})([""," display:inline-block;"],r.margin),g=u.default(n.default).withConfig({displayName:"advanced-color-picker.style__HiddenCurrentColorList",componentId:"sc-62bd57d3-1"})(["",""],s.default),v=u.default.div.withConfig({displayName:"advanced-color-picker.style__StyledAdvancedColorPickerPreview",componentId:"sc-62bd57d3-2"})(["width:25px;height:25px;margin-bottom:15px;border:1px solid var(--colorsUtilityYin090);border-radius:var(--borderRadius050);"," "," &:hover{cursor:initial;}"],(({color:r})=>"transparent"!==r&&e.css(["background-color:",";"],r)),(({color:r})=>"transparent"===r&&e.css(['background-color:#eeeeee;background-image:url("','");background-size:10px 10px;'],m.default))),k=u.default(d.Dialog).withConfig({displayName:"advanced-color-picker.style__DialogStyle",componentId:"sc-62bd57d3-3"})(["","{padding:var(--spacing200);}","{max-width:285px;","{border:1px solid var(--colorsUtilityYin090);margin-right:-1px;margin-bottom:-1px;transition:all 0.2s ease;&:hover{transform:scale(1.1);}}}",'{border:none;}[data-component="icon"]{color:var(--colorsActionMinor500);}'],t.StyledDialogContent,i.StyledColorOptions,l.StyledSimpleColor,i.StyledColorOptions);exports.StyledAdvancedColorPickerCell=o.default,exports.DialogStyle=k,exports.HiddenCurrentColorList=g,exports.StyledAdvancedColorPickerPreview=v,exports.StyledAdvancedColorPickerWrapper=y;
1
+ "use strict";var e=require("styled-components"),o=require("styled-system"),r=require("./advanced-color-picker-cell.style.js"),i=require("../simple-color-picker/simple-color-picker.style.js"),t=require("../simple-color-picker/simple-color/simple-color.style.js"),l=require("../dialog/__internal__/__next__/dialog.style.js"),d=require("../dialog/dialog.component.js"),a=require("../simple-color-picker/simple-color/checker-board.svg"),n=require("../../style/utils/visually-hidden.js"),s=require("../definition-list/dl.component.js");require("../definition-list/dt/dt.component.js"),require("../definition-list/dd/dd.component.js");var c=require("../../style/themes/apply-base-theme.js");function p(e){return e&&e.__esModule?e:{default:e}}var u=p(e),m=p(a);const y=u.default.div.attrs(c.default).withConfig({displayName:"advanced-color-picker.style__StyledAdvancedColorPickerWrapper",componentId:"sc-40bdb977-0"})([""," display:inline-block;"],o.margin),g=u.default(s.default).withConfig({displayName:"advanced-color-picker.style__HiddenCurrentColorList",componentId:"sc-40bdb977-1"})(["",""],n.default),v=u.default.div.withConfig({displayName:"advanced-color-picker.style__StyledAdvancedColorPickerPreview",componentId:"sc-40bdb977-2"})(["width:25px;height:25px;margin-bottom:15px;border:1px solid var(--colorsUtilityYin090);border-radius:var(--borderRadius050);"," "," &:hover{cursor:initial;}"],(({color:o})=>"transparent"!==o&&e.css(["background-color:",";"],o)),(({color:o})=>"transparent"===o&&e.css(['background-color:#eeeeee;background-image:url("','");background-size:10px 10px;'],m.default))),b=u.default(d.Dialog).withConfig({displayName:"advanced-color-picker.style__DialogStyle",componentId:"sc-40bdb977-3"})(['[data-component="dialog"]{max-width:fit-content;}','{padding:var(--spacing200);}[data-element="close"]{position:absolute;top:var(--spacing200);right:var(--spacing200);[data-component="icon"]{position:static;}}',"{max-width:285px;","{border:1px solid var(--colorsUtilityYin090);margin-right:-1px;margin-bottom:-1px;transition:all 0.2s ease;&:hover{transform:scale(1.1);}}}",'{border:none;}[data-component="icon"]{color:var(--colorsActionMinor500);}'],l.StyledDialogContent,i.StyledColorOptions,t.StyledSimpleColor,i.StyledColorOptions);exports.StyledAdvancedColorPickerCell=r.default,exports.DialogStyle=b,exports.HiddenCurrentColorList=g,exports.StyledAdvancedColorPickerPreview=v,exports.StyledAdvancedColorPickerWrapper=y;
@@ -1,4 +1,4 @@
1
1
  import { BatchSelectionProps } from ".";
2
- declare const StyledBatchSelection: import("styled-components").StyledComponent<"div", any, Pick<BatchSelectionProps, "disabled" | "hidden" | "colorTheme">, never>;
2
+ declare const StyledBatchSelection: import("styled-components").StyledComponent<"div", any, Pick<BatchSelectionProps, "hidden" | "disabled" | "colorTheme">, never>;
3
3
  declare const StyledSelectionCount: import("styled-components").StyledComponent<"span", any, {}, never>;
4
4
  export { StyledBatchSelection, StyledSelectionCount };
@@ -42,12 +42,16 @@ export interface ButtonProps extends SpaceProps, TagProps {
42
42
  href?: string;
43
43
  /** Defines an Icon position related to the children: "before" | "after" */
44
44
  iconPosition?: ButtonIconPosition;
45
- /** [Legacy] Provides a tooltip message when the icon is hovered. */
46
- iconTooltipMessage?: string;
47
- /** [Legacy] Provides positioning when the tooltip is displayed. */
48
- iconTooltipPosition?: TooltipPositions;
49
45
  /** Defines an Icon type within the button */
50
46
  iconType?: IconType;
47
+ /**
48
+ * @deprecated [Legacy] Provides a tooltip message when the icon is hovered.
49
+ * */
50
+ iconTooltipMessage?: string;
51
+ /**
52
+ * @deprecated [Legacy] Provides positioning when the tooltip is displayed.
53
+ * */
54
+ iconTooltipPosition?: TooltipPositions;
51
55
  /** id attribute */
52
56
  id?: string;
53
57
  /**
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),o=require("invariant"),n=require("../icon/icon.component.js"),r=require("./button.style.js"),i=require("../../__internal__/utils/helpers/tags/tags.js"),l=require("../../__internal__/tooltip-provider/index.js"),a=require("../button-bar/__internal__/button-bar.context.js"),s=require("../split-button/__internal__/split-button.context.js"),c=require("../batch-selection/__internal__/batch-selection.context.js");function u(e){return e&&e.__esModule?e:{default:e}}var b=u(t),d=u(o);function p(e,t,o){return t in e?Object.defineProperty(e,t,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[t]=o,e}function f(e){for(var t=1;t<arguments.length;t++){var o=null!=arguments[t]?arguments[t]:{},n=Object.keys(o);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(o).filter((function(e){return Object.getOwnPropertyDescriptor(o,e).enumerable})))),n.forEach((function(t){p(e,t,o[t])}))}return e}function y(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}function h({iconType:t,iconPosition:o,size:i,subtext:a,children:s,disabled:c,buttonType:u,iconTooltipMessage:b,iconTooltipPosition:d,tooltipTarget:p}){const h={"aria-hidden":!0,disabled:c,color:"primary"===u?"--colorsActionMajorYang100":u.includes("gradient")?"--colorsActionMinorYin090":"--colorsActionMajor500",bg:"transparent"},j=void 0!==s&&!1!==s;return e.jsxs(e.Fragment,{children:[t&&"before"===o&&j&&e.jsx(n.default,f({type:t},h)),j&&e.jsxs("span",{children:[e.jsx(r.StyledButtonMainText,{"data-element":"main-text",children:s}),"large"===i&&e.jsx(r.StyledButtonSubtext,{"data-element":"subtext","data-role":"subtext",children:a})]}),t&&!j&&e.jsx(l.TooltipProvider,{disabled:c,focusable:!1,target:p,children:e.jsx(n.default,y(f({type:t},h),{tooltipMessage:b,tooltipPosition:d}))}),t&&"after"===o&&s&&e.jsx(n.default,f({type:t},h))]})}const j=b.default.forwardRef(((o,n)=>{var{"aria-describedby":l,"aria-label":u,"aria-labelledby":b,buttonType:p="secondary",children:j,destructive:g=!1,disabled:x=!1,isWhite:O=!1,fullWidth:v=!1,href:P,iconPosition:m="before",iconTooltipMessage:T,iconTooltipPosition:_,iconType:w,m:S=0,noWrap:k,onClick:M,px:q,rel:W,size:C="medium",subtext:D="",target:z}=o,B=function(e,t){if(null==e)return{};var o,n,r=function(e,t){if(null==e)return{};var o,n,r={},i=Object.keys(e);for(n=0;n<i.length;n++)o=i[n],t.indexOf(o)>=0||(r[o]=e[o]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)o=i[n],t.indexOf(o)>=0||Object.prototype.propertyIsEnumerable.call(e,o)&&(r[o]=e[o])}return r}(o,["aria-describedby","aria-label","aria-labelledby","buttonType","children","destructive","disabled","isWhite","fullWidth","href","iconPosition","iconTooltipMessage","iconTooltipPosition","iconType","m","noWrap","onClick","px","rel","size","subtext","target"]);const{buttonType:E,size:A,iconPosition:Y,fullWidth:F}=t.useContext(a.default),{batchSelectionDisabled:I}=t.useContext(c.default),K=E||p,N=A||C,R=Y||m,G=F||v,H=x||I;d.default(void 0!==j||!!w,"Either prop `iconType` must be defined or this node must have children."),D&&d.default("large"===N,"subtext prop has no effect unless the button is large.");const[J,L]=t.useState(null),{inSplitButton:Q,onChildButtonClick:U}=t.useContext(s.default);let V;switch(N){case"small":V=2;break;case"large":V=4;break;default:V=3}const X=t.useCallback((e=>{L(e),n&&("object"==typeof n&&(n.current=e),"function"==typeof n&&n(e))}),[n]),Z=void 0!==j&&!1!==j;return e.jsx(r.default,y(f({"aria-label":!Z&&w?u||w:u,"aria-labelledby":b,"aria-describedby":l,as:!H&&P?"a":"button",onKeyDown:P?e=>{" "===e.key&&(e.preventDefault(),null==J||J.click())}:void 0,onClick:e=>{var t;null==J||J.focus({preventScroll:!0}),Q?null==U||null===(t=U(M))||void 0===t||t(e):M&&M(e)},draggable:!1,buttonType:K,disabled:H,destructive:g,isWhite:O,type:P?void 0:"button",iconType:w,size:N,px:null!=q?q:V,m:S,noWrap:k,iconOnly:!Z&&!!w,iconPosition:R,target:z,rel:W,fullWidth:G},i.default("button",B),B,P&&{href:P}),{ref:X,children:h({iconType:w,iconPosition:R,size:N,subtext:D,children:j,disabled:H,buttonType:K,iconTooltipMessage:T,iconTooltipPosition:_,tooltipTarget:J})}))}));j.displayName="Button",exports.default=j;
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("invariant"),n=require("../icon/icon.component.js"),i=require("./button.style.js"),o=require("../../__internal__/utils/helpers/tags/tags.js"),l=require("../button-bar/__internal__/button-bar.context.js"),a=require("../split-button/__internal__/split-button.context.js"),u=require("../batch-selection/__internal__/batch-selection.context.js");function s(e){return e&&e.__esModule?e:{default:e}}var c=s(t),b=s(r);function d(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function p(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){d(e,t,r[t])}))}return e}function f({iconType:t,iconPosition:r,size:o,subtext:l,children:a,disabled:u,buttonType:s}){const c={"aria-hidden":!0,disabled:u,color:"primary"===s?"--colorsActionMajorYang100":s.includes("gradient")?"--colorsActionMinorYin090":"--colorsActionMajor500",bg:"transparent"},b=void 0!==a&&!1!==a;return e.jsxs(e.Fragment,{children:[t&&"before"===r&&b&&e.jsx(n.default,p({type:t},c)),b&&e.jsxs("span",{children:[e.jsx(i.StyledButtonMainText,{"data-element":"main-text",children:a}),"large"===o&&e.jsx(i.StyledButtonSubtext,{"data-element":"subtext","data-role":"subtext",children:l})]}),t&&!b&&e.jsx(n.default,p({type:t},c)),t&&"after"===r&&a&&e.jsx(n.default,p({type:t},c))]})}const y=c.default.forwardRef(((r,n)=>{var{"aria-describedby":s,"aria-label":c,"aria-labelledby":d,buttonType:y="secondary",children:h,destructive:j=!1,disabled:x=!1,isWhite:O=!1,fullWidth:g=!1,href:v,iconPosition:m="before",iconType:P,m:_=0,noWrap:w,onClick:S,px:T,rel:k,size:W="medium",subtext:q="",target:C}=r,D=function(e,t){if(null==e)return{};var r,n,i=function(e,t){if(null==e)return{};var r,n,i={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(i[r]=e[r]);return i}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(i[r]=e[r])}return i}(r,["aria-describedby","aria-label","aria-labelledby","buttonType","children","destructive","disabled","isWhite","fullWidth","href","iconPosition","iconType","m","noWrap","onClick","px","rel","size","subtext","target"]);const{buttonType:z,size:M,iconPosition:B,fullWidth:E}=t.useContext(l.default),{batchSelectionDisabled:A}=t.useContext(u.default),Y=z||y,F=M||W,I=B||m,K=E||g,N=x||A;b.default(void 0!==h||!!P,"Either prop `iconType` must be defined or this node must have children."),q&&b.default("large"===F,"subtext prop has no effect unless the button is large.");const[R,G]=t.useState(null),{inSplitButton:H,onChildButtonClick:J}=t.useContext(a.default);let L;switch(F){case"small":L=2;break;case"large":L=4;break;default:L=3}const Q=t.useCallback((e=>{G(e),n&&("object"==typeof n&&(n.current=e),"function"==typeof n&&n(e))}),[n]),U=void 0!==h&&!1!==h;return e.jsx(i.default,function(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}(p({"aria-label":!U&&P?c||P:c,"aria-labelledby":d,"aria-describedby":s,as:!N&&v?"a":"button",onKeyDown:v?e=>{" "===e.key&&(e.preventDefault(),null==R||R.click())}:void 0,onClick:e=>{var t;null==R||R.focus({preventScroll:!0}),H?null==J||null===(t=J(S))||void 0===t||t(e):S&&S(e)},draggable:!1,buttonType:Y,disabled:N,destructive:j,isWhite:O,type:v?void 0:"button",iconType:P,size:F,px:null!=T?T:L,m:_,noWrap:w,iconOnly:!U&&!!P,iconPosition:I,target:C,rel:k,fullWidth:K},o.default("button",D),D,v&&{href:v}),{ref:Q,children:f({iconType:P,iconPosition:I,size:F,subtext:q,children:h,disabled:N,buttonType:Y})}))}));y.displayName="Button",exports.default=y;
@@ -2,7 +2,7 @@ import { FlatTableRowHeaderProps } from "./flat-table-row-header.component";
2
2
  declare const StyledFlatTableRowHeader: import("styled-components").StyledComponent<"th", any, {
3
3
  theme: object;
4
4
  } & {
5
- "data-sticky-align": "left" | "right" | undefined;
5
+ "data-sticky-align": "right" | "left" | undefined;
6
6
  } & FlatTableRowHeaderProps & {
7
7
  expandable?: boolean;
8
8
  leftPosition?: number;
@@ -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/tags/tags.js"),o=require("../icon/icon.component.js"),n=require("./help.style.js"),l=require("../../__internal__/utils/helpers/events/events.js"),i=require("../../__internal__/tooltip-provider/index.js");require("../../style/utils/filter-styled-system-padding-props.js");var s=require("../../style/utils/filter-styled-system-margin-props.js"),u=require("../../__internal__/utils/helpers/guid/index.js");function p(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}const a=a=>{var{as:c,ariaLabel:d="help",children:f,href:b,helpId:y,isFocused:O,tabIndex:j=0,tooltipBgColor:v,tooltipFontColor:g,tooltipFlipOverrides:h,tooltipId:_,tooltipPosition:m="top",type:P="help"}=a,x=function(e,t){if(null==e)return{};var r,o,n=function(e,t){if(null==e)return{};var r,o,n={},l=Object.keys(e);for(o=0;o<l.length;o++)r=l[o],t.indexOf(r)>=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(o=0;o<l.length;o++)r=l[o],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}(a,["as","ariaLabel","children","href","helpId","isFocused","tabIndex","tooltipBgColor","tooltipFontColor","tooltipFlipOverrides","tooltipId","tooltipPosition","type"]);const w=t.useRef(u.default()),q=t.useRef(null),[C,F]=t.useState(!1),{helpAriaLabel:I}=t.useContext(i.TooltipContext);t.useEffect((()=>{function e(e){var t;l.default.isEscKey(e)&&(null==q||null===(t=q.current)||void 0===t||t.blur(),F(!1))}return document.addEventListener("keydown",e),function(){document.removeEventListener("keydown",e)}}));const k=c||b&&"a"||"div";function E(e){return()=>{F(e)}}return e.jsx(n.default,(S=function(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){p(e,t,r[t])}))}return e}({"aria-describedby":O||C?_||w.current:void 0,"aria-label":I||d,as:k,href:b,id:y,ref:q,onClick:()=>{var e;null==q||null===(e=q.current)||void 0===e||e.focus()},onFocus:E(!0),onBlur:E(!1),onMouseOver:E(!0),onMouseLeave:E(!1),tabIndex:j},b?{target:"_blank",rel:"noopener noreferrer"}:{role:"button"},s.default(x),x,r.default("help",x)),L=null!=(L={children:e.jsx(o.default,{"aria-hidden":!0,type:P,tooltipMessage:f,tooltipPosition:m,tooltipVisible:O||C,tooltipBgColor:v,tooltipFontColor:g,tooltipFlipOverrides:h,focusable:!1,tooltipId:_||w.current})})?L:{},Object.getOwnPropertyDescriptors?Object.defineProperties(S,Object.getOwnPropertyDescriptors(L)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(L)).forEach((function(e){Object.defineProperty(S,e,Object.getOwnPropertyDescriptor(L,e))})),S));var S,L};a.displayName="Help",exports.Help=a,exports.default=a;
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("../../__internal__/utils/helpers/tags/tags.js"),o=require("../icon/icon.component.js"),n=require("../tooltip/tooltip.component.js"),i=require("./help.style.js"),l=require("../../__internal__/utils/helpers/events/events.js"),s=require("../../__internal__/tooltip-provider/index.js");require("../../style/utils/filter-styled-system-padding-props.js");var u=require("../../style/utils/filter-styled-system-margin-props.js"),a=require("../../__internal__/utils/helpers/guid/index.js");function p(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}const c=c=>{var{as:d,ariaLabel:f="help",children:b,href:y,helpId:O,isFocused:j,tabIndex:v=0,tooltipBgColor:h,tooltipFontColor:g,tooltipFlipOverrides:m,tooltipId:_,tooltipPosition:x="top",type:P="help"}=c,w=function(e,t){if(null==e)return{};var r,o,n=function(e,t){if(null==e)return{};var r,o,n={},i=Object.keys(e);for(o=0;o<i.length;o++)r=i[o],t.indexOf(r)>=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(o=0;o<i.length;o++)r=i[o],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}(c,["as","ariaLabel","children","href","helpId","isFocused","tabIndex","tooltipBgColor","tooltipFontColor","tooltipFlipOverrides","tooltipId","tooltipPosition","type"]);const q=t.useRef(a.default()),C=t.useRef(null),[I,k]=t.useState(!1),{helpAriaLabel:E}=t.useContext(s.TooltipContext);t.useEffect((()=>{function e(e){var t;l.default.isEscKey(e)&&(null==C||null===(t=C.current)||void 0===t||t.blur(),k(!1))}return document.addEventListener("keydown",e),function(){document.removeEventListener("keydown",e)}}));const F=d||y&&"a"||"div";function S(e){return()=>{k(e)}}return e.jsx(i.default,(L=function(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){p(e,t,r[t])}))}return e}({"aria-describedby":j||I?_||q.current:void 0,"aria-label":E||f,as:F,href:y,id:O,ref:C,onClick:()=>{var e;null==C||null===(e=C.current)||void 0===e||e.focus()},onFocus:S(!0),onBlur:S(!1),onMouseOver:S(!0),onMouseLeave:S(!1),tabIndex:v},y?{target:"_blank",rel:"noopener noreferrer"}:{role:"button"},u.default(w),w,r.default("help",w)),D=null!=(D={children:b?e.jsx(n.Tooltip,{message:b,isVisible:j||I,position:x,id:_||q.current,bgColor:h,fontColor:g,flipOverrides:m,children:e.jsx(o.default,{"aria-hidden":!0,type:P,focusable:!1})}):e.jsx(o.default,{"aria-hidden":!0,type:P,focusable:!1})})?D:{},Object.getOwnPropertyDescriptors?Object.defineProperties(L,Object.getOwnPropertyDescriptors(D)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(D)).forEach((function(e){Object.defineProperty(L,e,Object.getOwnPropertyDescriptor(D,e))})),L));var L,D};c.displayName="Help",exports.Help=c,exports.default=c;
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.ICONS=["accessibility_web","add","admin","airplay","alert","alert_on","analysis","app_facebook","app_instagram","app_tiktok","app_twitter","app_youtube","apps","arrow","arrow_bottom_right_circle","arrow_down","arrow_left","arrow_left_boxed","arrow_left_right_small","arrow_left_small","arrow_right","arrow_right_small","arrow_top_left_circle","arrow_top_right_circle","arrow_up","arrows_left_right","at_sign","attach","bank","bank_with_card","basket","basket_with_squares","batch","bed","bill_paid","bill_unpaid","bin","biometric","blocked","blocked_square","block_arrow_right","bold","box_arrow_left","box_arrow_right","boxed_shapes","bulk_destroy","bullet_list","bullet_list_dotted","bullet_list_numbers","business","calendar","calendar_today","call","calendar_pay_date","camera","car_lock","car_money","car_repair","card_view","card_wallet","caret_down","caret_left","caret_right","caret_up","caret_up_down","caret_large_down","caret_large_left","caret_large_right","caret_large_up","cart","cash","chat","chart_bar","chart_bar_arrow_up","chart_line","chart_pie","chat_notes","check_all","check_none","chevron_down","chevron_first","chevron_first_pagination","chevron_last","chevron_last_pagination","chevron_left","chevron_right","chevron_up","chevron_down_thick","chevron_left_thick","chevron_right_thick","chevron_up_thick","chromecast","circle_with_dots","circles_connection","clear","clock","close","code","cloud_co2","coins","collaborate","computer_clock","connect","connect_circle","connect_off","construction","contacts","contact_card","copy","create","credit_card","credit_card_slash","cross","cross_circle","csv","dashboard","delete","delivery","diagonal_arrows_up","disconnect","disputed","document_right_align","document_tick","document_vertical_lines","download","double_tick","drag","drag_hover","drag_vertical","draft","drill","dropdown","duplicate","edit","edited","email","email_switch","entry","ellipsis_horizontal","ellipsis_vertical","envelope_dollar","envelope_euro","error","error_square","euro","expand","export","factory","favourite","favourite_lined","fax","feedback","file_excel","file_generic","file_image","file_pdf","file_word","files_leaning","filter","filter_new","fit_height","fit_width","flag","flash","folder","form_refresh","framerate","fullscreen","gift","get_quote","go","graduation_hat","graph","grid","heart","heart_pulse","help","hide","hierarchy","hand_cash_coins","hand_cash_note","home","image","import","in_progress","in_transit","individual","info","intranet","ipad","italic","job_seeked","key","laptop","leaf","ledger","ledger_arrow_left","ledger_arrow_right","lightbulb_off","lightbulb_on","like","like_no","link","link_card","link_cloud","link_on","list_view","locked","location","login","logout","lookup","marker","message","microphone","minimise","minus","minus_large","mobile","money_bag","mute","none","normalscreen","old_warning","page","palm_tree","pause","pause_circle","petrol_pump","pdf","pin","people","people_switch","percentage_boxed","person","person_info","person_tick","phone","picture_in_picture","piggy_bank","placeholder","plane","play","play_circle","plus","plus_circle","plus_large","pound","print","progress","progressed","protect","question","question_hollow","question_mark","recruiting","refresh","refresh_clock","remove","replay","reset","sage_coin","save","scan","search","send","services","settings","settings_old","share","shield_with_tick","shield_with_tick_outline","shop","sort_down","sort_up","source_code","spanner","speaker","split","split_container","squares_nine","stacked_boxes","stacked_squares","stop","stop_circle","submitted","subtitles","support_online","sync","tag","talk","target","target_man","theatre_masks","three_boxes","tick","tick_circle","tick_thick","time_zone","true_tick","u_turn_left","u_turn_right","underline","undo","unlocked","upload","uploaded","user_groups","video","view","volume_high","volume_low","volume_medium","volunteering","warning","website","welfare","worldwide_location"],exports.ICON_FONT_SIZES=["small","medium","large","extra-large"],exports.ICON_SHAPES=["circle","rounded-rect","square"],exports.ICON_SIZES=["small","medium","large","extra-large"],exports.ICON_TOOLTIP_POSITIONS=["bottom","left","right","top"],exports.default={backgroundSize:{"extra-small":"16px",small:"24px",medium:"32px",large:"40px","extra-large":"56px"},backgroundShape:{square:"0%","rounded-rect":"20%",circle:"50%"},iconSize:{small:"var(--sizing250)",medium:"var(--sizing300)",large:"var(--sizing400)","extra-large":"var(--sizing600)"}};
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.ICONS=["accessibility_web","add","admin","airplay","alert","alert_on","analysis","app_facebook","app_instagram","app_tiktok","app_twitter","app_youtube","apps","arrow","arrow_bottom_right_circle","arrow_down","arrow_left","arrow_left_boxed","arrow_left_right_small","arrow_left_small","arrow_right","arrow_right_small","arrow_top_left_circle","arrow_top_right_circle","arrow_up","arrows_left_right","at_sign","attach","bank","bank_with_card","basket","basket_with_squares","batch","bed","bill_paid","bill_unpaid","bin","biometric","blocked","blocked_square","block_arrow_right","bold","box_arrow_left","box_arrow_right","boxed_shapes","bulk_destroy","bullet_list","bullet_list_dotted","bullet_list_numbers","business","calendar","calendar_today","call","calendar_pay_date","camera","car_lock","car_money","car_repair","card_view","card_wallet","caret_down","caret_left","caret_right","caret_up","caret_up_down","caret_large_down","caret_large_left","caret_large_right","caret_large_up","cart","cash","chat","chart_bar","chart_bar_arrow_up","chart_line","chart_pie","chat_notes","check_all","check_none","chevron_down","chevron_first","chevron_first_pagination","chevron_last","chevron_last_pagination","chevron_left","chevron_right","chevron_up","chevron_down_thick","chevron_left_thick","chevron_right_thick","chevron_up_thick","chromecast","circle_with_dots","circles_connection","clear","clock","close","code","cloud_co2","coins","collaborate","computer_clock","connect","connect_circle","connect_off","construction","contacts","contact_card","copy","create","credit_card","credit_card_slash","cross","cross_circle","csv","dashboard","delete","delivery","diagonal_arrows_up","disconnect","disputed","document_right_align","document_tick","document_vertical_lines","download","double_tick","drag","drag_hover","drag_vertical","draft","drill","dropdown","duplicate","edit","edited","email","email_switch","entry","ellipsis_horizontal","ellipsis_vertical","envelope_dollar","envelope_euro","error","error_square","euro","expand","export","factory","favourite","favourite_lined","fax","feedback","file_excel","file_generic","file_image","file_pdf","file_word","files_leaning","filter","filter_new","fit_height","fit_width","flag","flash","folder","form_refresh","framerate","fullscreen","gift","get_quote","go","graduation_hat","graph","grid","heart","heart_pulse","help","hide","hierarchy","hand_cash_coins","hand_cash_note","home","image","import","in_progress","in_transit","individual","info","intranet","ipad","italic","job_seeked","key","laptop","leaf","ledger","ledger_arrow_left","ledger_arrow_right","lightbulb_off","lightbulb_on","like","like_no","link","link_card","link_cloud","link_on","list_view","locked","location","login","logout","lookup","marker","message","microphone","minimise","minus","minus_large","mobile","money_bag","mute","none","normalscreen","old_warning","page","palm_tree","pause","pause_circle","petrol_pump","pdf","pin","people","people_switch","percentage_boxed","person","person_info","person_tick","phone","picture_in_picture","piggy_bank","placeholder","plane","play","play_circle","plus","plus_circle","plus_large","pound","print","progress","progressed","protect","question","question_hollow","question_mark","recruiting","refresh","refresh_clock","remove","replay","reset","sage_coin","save","scan","search","send","services","settings","settings_old","share","shield_with_tick","shield_with_tick_outline","shop","sort_down","sort_up","source_code","spanner","speaker","split","split_container","squares_nine","stacked_boxes","stacked_squares","stop","stop_circle","submitted","subtitles","support_online","sync","tag","talk","target","target_man","theatre_masks","three_boxes","tick","tick_circle","tick_thick","time_zone","true_tick","u_turn_left","u_turn_right","underline","undo","unlocked","upload","uploaded","user_groups","video","view","volume_high","volume_low","volume_medium","volunteering","warning","website","welfare","worldwide_location"],exports.ICON_FONT_SIZES=["small","medium","large","extra-large"],exports.ICON_SHAPES=["circle","rounded-rect","square"],exports.ICON_SIZES=["small","medium","large","extra-large"],exports.ICON_TOOLTIP_POSITIONS=["bottom","left","right","top"],exports.default={backgroundSize:{"extra-small":"var(--global-size-2-xs)",small:"var(--global-size-xs)",medium:"var(--global-size-s)",large:"var(--global-size-m)","extra-large":"var(--global-size-m)"},backgroundShape:{square:"0%","rounded-rect":"20%",circle:"50%"},iconSize:{small:"var(--global-size-2-xs)",medium:"var(--global-size-xs)",large:"var(--global-size-s)","extra-large":"var(--global-size-s)"}};
@@ -1,11 +1,15 @@
1
1
  import React from "react";
2
2
  import { MarginProps } from "styled-system";
3
3
  import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
4
- import { StyledIconProps } from "./icon.style";
4
+ import { BackgroundShape, BgSize, FontSize, StyledIconProps } from "./icon.style";
5
5
  import { IconType } from "./icon-type";
6
6
  import { TooltipPositions } from "../tooltip/tooltip.config";
7
7
  export type LegacyIconTypes = "help" | "maintenance" | "new" | "success" | "messages";
8
- export interface IconProps extends Omit<StyledIconProps, "type">, MarginProps, TagProps {
8
+ /**
9
+ * The size of the Icon.
10
+ */
11
+ export type IconSize = "small" | "medium" | "large";
12
+ export interface IconProps extends Pick<StyledIconProps, "className" | "inverse">, MarginProps, TagProps {
9
13
  /** Set whether icon should be recognised by assistive technologies */
10
14
  "aria-hidden"?: boolean;
11
15
  /** Aria label for accessibility purposes */
@@ -14,22 +18,38 @@ export interface IconProps extends Omit<StyledIconProps, "type">, MarginProps, T
14
18
  id?: string;
15
19
  /** The ARIA role to be applied to the Icon */
16
20
  role?: string;
17
- /** [Legacy] The message to be displayed within the tooltip */
21
+ /**
22
+ * @deprecated Tooltip support has been removed from `Icon` and the use of tooltips
23
+ * is discouraged. This prop no longer has any effect.
24
+ */
18
25
  tooltipMessage?: React.ReactNode;
19
- /** [Legacy] The position to display the tooltip */
26
+ /** @deprecated */
20
27
  tooltipPosition?: TooltipPositions;
21
- /** [Legacy] Control whether the tooltip is visible */
28
+ /** @deprecated */
22
29
  tooltipVisible?: boolean;
23
- /** [Legacy] Override background color of the Tooltip, provide any color from palette or any valid css color value. */
30
+ /** @deprecated */
24
31
  tooltipBgColor?: string;
25
- /** [Legacy] Override font color of the Tooltip, provide any color from palette or any valid css color value. */
32
+ /** @deprecated */
26
33
  tooltipFontColor?: string;
27
- /** [Legacy] Overrides the default flip behaviour of the Tooltip */
34
+ /** @deprecated */
28
35
  tooltipFlipOverrides?: TooltipPositions[];
29
- /** [Legacy] Id passed to the tooltip container, used for accessibility purposes */
36
+ /** @deprecated */
30
37
  tooltipId?: string;
31
38
  /**
32
- * Icon type
39
+ * Icon type.
40
+ *
41
+ * Icons use a `snake_case` naming convention and are organised into the following categories:
42
+ *
43
+ * - **Navigation** — `arrow_*`, `chevron_*`, `caret_*`, `caret_large_*`
44
+ * - **Actions** — `add`, `bin`, `close`, `copy`, `create`, `delete`, `drag`, `download`,
45
+ * `edit`, `export`, `filter`, `link`, `search`, `settings`, `upload`, and more.
46
+ * - **Status** — `alert`, `blocked`, `double_tick`, `error`, `error_square`, `info`,
47
+ * `tick`, `warning`, and more.
48
+ * - **Communication** — `call`, `chat`, `email`, `fax`, `message`, and more.
49
+ * - **Finance** — `bank`, `cash`, `coins`, `credit_card`, `euro`, `receipt`, and more.
50
+ * - **Social / App** — `app_facebook`, `app_instagram`, `app_tiktok`, `app_twitter`, `app_youtube`.
51
+ * - **Documents & Files** — `attach`, `document_*`, `file_*`, and more.
52
+ * - **Charts** — `chart_bar`, `chart_bar_arrow_up`, `chart_line`, `chart_pie`.
33
53
  *
34
54
  * The full list of types can be seen [here](https://carbon.sage.com/?path=/docs/icon--list-of-icons#list-of-icons).
35
55
  */
@@ -42,6 +62,31 @@ export interface IconProps extends Omit<StyledIconProps, "type">, MarginProps, T
42
62
  inputSize?: "small" | "medium" | "large";
43
63
  /** @ignore @private */
44
64
  tabIndex?: number;
65
+ /**
66
+ * Size of the Icon.
67
+ *
68
+ * - `small` — 24px (default)
69
+ * - `medium` — 32px
70
+ * - `large` — 40px
71
+ */
72
+ size?: IconSize;
73
+ /** Renders the Icon in a light colour, suitable for use on dark backgrounds. */
74
+ inverse?: boolean;
75
+ /**
76
+ * @deprecated Use the `size` prop instead. The `extra-large` value is no longer
77
+ * supported and will be mapped to `large`.
78
+ */
79
+ fontSize?: FontSize;
80
+ /** @deprecated Use CSS or a wrapper element to apply a background colour. */
81
+ bg?: string;
82
+ /** @deprecated Use CSS or a wrapper element to apply a background shape. */
83
+ bgShape?: BackgroundShape;
84
+ /** @deprecated Use CSS or a wrapper element to control background size. */
85
+ bgSize?: BgSize;
86
+ /** @deprecated Use CSS or a wrapper element to control icon colour. */
87
+ color?: string;
88
+ /** @deprecated Applies disabled styling to the icon. */
89
+ disabled?: boolean;
45
90
  }
46
91
  declare const Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<HTMLSpanElement>>;
47
92
  export default Icon;
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),o=require("invariant"),r=require("../tooltip/tooltip.component.js");require("../../style/utils/filter-styled-system-padding-props.js");var i=require("../../style/utils/filter-styled-system-margin-props.js"),n=require("../../__internal__/tooltip-provider/index.js"),l=require("./icon.style.js"),a=require("./icon-config.js"),s=require("../tabs/__next__/tabs.context.js");function u(e){return e&&e.__esModule?e:{default:e}}var p=u(t),c=u(o);function d(e,t,o){return t in e?Object.defineProperty(e,t,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[t]=o,e}function b(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){d(e,t,o[t])}))}return e}const f=p.default.forwardRef(((o,u)=>{var{"aria-hidden":p,ariaLabel:d,bg:f,bgShape:g,bgSize:y,className:m,color:O,"data-element":v,"data-role":j,disabled:S,focusable:I=!0,fontSize:h="small",id:x,inputSize:P,isPartOfInput:_,tabIndex:q,tooltipMessage:w,tooltipPosition:z,tooltipVisible:C,tooltipBgColor:T,tooltipFontColor:M,tooltipFlipOverrides:N,tooltipId:F,type:V,role:k}=o,L=function(e,t){if(null==e)return{};var o,r,i=function(e,t){if(null==e)return{};var o,r,i={},n=Object.keys(e);for(r=0;r<n.length;r++)o=n[r],t.indexOf(o)>=0||(i[o]=e[o]);return i}(e,t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);for(r=0;r<n.length;r++)o=n[r],t.indexOf(o)>=0||Object.prototype.propertyIsEnumerable.call(e,o)&&(i[o]=e[o])}return i}(o,["aria-hidden","ariaLabel","bg","bgShape","bgSize","className","color","data-element","data-role","disabled","focusable","fontSize","id","inputSize","isPartOfInput","tabIndex","tooltipMessage","tooltipPosition","tooltipVisible","tooltipBgColor","tooltipFontColor","tooltipFlipOverrides","tooltipId","type","role"]);const A=Array.isArray(N)&&N.every((e=>a.ICON_TOOLTIP_POSITIONS.includes(e)));N&&c.default(A,'The tooltipFlipOverrides prop supplied to `Icon` must be an array containing some or all of ["top", "bottom", "left", "right"].');const B=!!w&&!S,{tooltipPosition:E,focusable:D,tooltipVisible:R,disabled:G,target:H}=t.useContext(n.TooltipContext),{isInTab:J}=s.useTabs(),K=t.useMemo((()=>{switch(V){case"help":return"question";case"maintenance":return"settings";case"new":return"gift";case"success":return"tick";case"messages":case"email":return"message";default:return V}}),[V]),Q=!S&&!G&&!!w&&(void 0!==D?D:I),U=t.useMemo((()=>{if(!J)return Q&&void 0===q?0:q}),[J,Q,q]),W=b({"aria-hidden":p,"aria-label":d,bg:f,bgSize:y||h,bgShape:g,className:m||void 0,color:O,"data-component":"icon","data-element":null!=v?v:K,"data-role":null!=j?j:"icon",disabled:G||S,fontSize:h,hasTooltip:Q,id:x,isInteractive:B,ref:u,role:k,tabIndex:U,type:K},i.default(L));if(w){const t=!S&&(void 0!==R?R:C);return e.jsx(r.Tooltip,{message:w,position:E||z,type:V,id:F,isVisible:t,isPartOfInput:_,inputSize:P,bgColor:T,fontColor:M,flipOverrides:N,target:H,children:e.jsx(l.default,b({},W))})}return e.jsx(l.default,b({},W))}));f.displayName="Icon",exports.default=f;
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("../../__internal__/utils/logger/index.js");require("../../style/utils/filter-styled-system-padding-props.js");var o=require("../../style/utils/filter-styled-system-margin-props.js"),i=require("./icon.style.js");function a(e){return e&&e.__esModule?e:{default:e}}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 n(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}const s=a(t).default.forwardRef(((a,l)=>{var{"aria-hidden":s,ariaLabel:u,bg:c,bgShape:d,bgSize:p,className:f,color:b,"data-element":g,"data-role":m,disabled:y,focusable:O,fontSize:v,id:j,inputSize:S,isPartOfInput:h,inverse:x,size:z="small",tabIndex:P,tooltipMessage:w,tooltipPosition:I,tooltipVisible:_,tooltipBgColor:q,tooltipFontColor:M,tooltipFlipOverrides:C,tooltipId:F,type:N,role:k}=a,B=function(e,t){if(null==e)return{};var r,o,i=function(e,t){if(null==e)return{};var r,o,i={},a=Object.keys(e);for(o=0;o<a.length;o++)r=a[o],t.indexOf(r)>=0||(i[r]=e[r]);return i}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(o=0;o<a.length;o++)r=a[o],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(i[r]=e[r])}return i}(a,["aria-hidden","ariaLabel","bg","bgShape","bgSize","className","color","data-element","data-role","disabled","focusable","fontSize","id","inputSize","isPartOfInput","inverse","size","tabIndex","tooltipMessage","tooltipPosition","tooltipVisible","tooltipBgColor","tooltipFontColor","tooltipFlipOverrides","tooltipId","type","role"]);const E=t.useMemo((()=>{switch(N){case"help":return"question";case"maintenance":return"settings";case"new":return"gift";case"success":return"tick";case"messages":case"email":return"message";default:return N}}),[N]),L=t.useMemo((()=>v?"extra-large"===v?(r.default.warn('[Icon] The `fontSize` value "extra-large" is no longer supported and has been mapped to "large".'),"large"):v:z),[v,z]),V=n({"aria-hidden":s,"aria-label":u,bg:c,bgSize:p||L,bgShape:d,className:f||void 0,color:b,"data-component":"icon","data-element":null!=g?g:E,"data-role":null!=m?m:"icon",disabled:y,fontSize:L,id:j,inverse:x,ref:l,role:k,tabIndex:P,type:E},o.default(B));return e.jsx(i.default,n({},V))}));s.displayName="Icon",exports.default=s;
@@ -28,10 +28,13 @@ export interface StyledIconProps {
28
28
  * The full list of types can be seen [here](https://github.com/Sage/carbon/blob/master/src/components/icon/icon-config.js).
29
29
  */
30
30
  type: IconType;
31
+ /**
32
+ * Renders the Icon using the inverse colour token, suitable for use on dark backgrounds.
33
+ */
34
+ inverse?: boolean;
31
35
  }
32
36
  export interface StyledIconInternalProps {
33
37
  isInteractive?: boolean;
34
- hasTooltip?: boolean;
35
38
  theme?: ThemeObject;
36
39
  }
37
40
  declare const StyledIcon: import("styled-components").StyledComponent<"span", any, {
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("styled-system"),o=require("../../__internal__/utils/logger/index.js"),r=require("../../style/themes/apply-base-theme.js"),i=require("../../style/utils/add-focus-styling.js"),l=require("../../style/utils/color.js"),s=require("../../__internal__/dom/globals.js"),n=require("../../__internal__/utils/helpers/browser-type-check/index.js"),a=require("./icon-config.js"),c=require("./icon-unicodes.js"),u=require("../button/__next__/button.style.js");function d(e){return e&&e.__esModule?e:{default:e}}var f=d(e);const g=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;}"],u.StyledButton),m=f.default.span.attrs(r.default).withConfig({displayName:"icon.style__StyledIcon",componentId:"sc-56ac9ede-0"})(["",""],(({theme:r,color:u,bg:d,isInteractive:f,bgSize:m,bgShape:h,type:b,fontSize:y,disabled:p,hasTooltip:_})=>{let v="var(--colorsYin090)",S="transparent";const z=s.getWindow(),j=s.getNavigator(),k=function(e,t){const r={small:1,medium:2,large:3,"extra-large":4};return e&&t?r[t]<r[e]?(o.default.warn(`[WARNING - Icon] The "${t}" \`bgSize\` is smaller than "${e}" \`fontSize\`, the \`bgSize\` has been auto adjusted to a larger size.`),a.default.backgroundSize[e]):a.default.backgroundSize[t]:t?a.default.backgroundSize[t]:void 0}(y,m);if(p)v="var(--colorsYin030)";else if(u){const{color:e}=l.default({color:u,theme:r});v=e}if(d){const{backgroundColor:e}=l.default({bg:d,theme:r});S=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;}"," "," ",""],v,S,k,k,h?`border-radius: ${a.default.backgroundShape[h]}`:"",f&&e.css(["&:not(:focus):hover{filter:brightness(0.9);}"]),c.default[b],y&&e.css(["font-size:",";line-height:",";"],a.default.iconSize[y],a.default.iconSize[y]),z&&"services"===b&&n.default(z)&&e.css(["margin-top:",";"],"small"===y?"-7px":"-8px"),j&&z&&"services"===b&&n.isSafari(j)&&!n.default(z)&&e.css(["margin-top:-6px;"]),_&&`\n :focus {\n ${i.default()}\n }\n `,t.margin,g)}));exports.default=m;
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;
@@ -38,5 +38,5 @@ declare const StyledImage: import("styled-components").StyledComponent<"div", an
38
38
  backgroundPosition: import("styled-system").ResponsiveValue<import("csstype").Property.BackgroundPosition<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>;
39
39
  backgroundRepeat: import("styled-system").ResponsiveValue<import("csstype").Property.BackgroundRepeat, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>;
40
40
  backgroundSize: import("styled-system").ResponsiveValue<import("csstype").Property.BackgroundSize<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>;
41
- } & StyledImageProps, "theme" | "children" | "hidden" | "src" | "as" | "left" | "right" | "position" | "bottom" | "top" | "backgroundRepeat" | "backgroundSize" | "backgroundPosition">;
41
+ } & StyledImageProps, "position" | "top" | "right" | "bottom" | "left" | "hidden" | "theme" | "children" | "as" | "src" | "backgroundRepeat" | "backgroundSize" | "backgroundPosition">;
42
42
  export { StyledImage };
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("../tooltip/tooltip.component.js"),o=require("../../__internal__/utils/helpers/tags/tags.js"),i=require("./portrait.style.js");require("../../style/utils/filter-styled-system-padding-props.js");var n=require("../../style/utils/filter-styled-system-margin-props.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 s(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 c=l=>{var{alt:c,backgroundColor:p,foregroundColor:u,className:d,name:y,darkBackground:f=!1,iconType:g="individual",initials:b,shape:j="circle",size:O="M",src:m,onClick:C,tooltipMessage:P,tooltipId:k,tooltipIsVisible:v,tooltipPosition:h,tooltipType:S,tooltipSize:x,tooltipBgColor:w,tooltipFontColor:I,variant:z}=l,q=function(e,t){if(null==e)return{};var r,o,i=function(e,t){if(null==e)return{};var r,o,i={},n=Object.keys(e);for(o=0;o<n.length;o++)r=n[o],t.indexOf(r)>=0||(i[r]=e[r]);return i}(e,t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);for(o=0;o<n.length;o++)r=n[o],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(i[r]=e[r])}return i}(l,["alt","backgroundColor","foregroundColor","className","name","darkBackground","iconType","initials","shape","size","src","onClick","tooltipMessage","tooltipId","tooltipIsVisible","tooltipPosition","tooltipType","tooltipSize","tooltipBgColor","tooltipFontColor","variant"]);const[B,_]=t.useState(!1),E=Boolean(m)&&!B;t.useEffect((()=>{_(!1)}),[m]);const T=o.default("portrait",q);return(()=>{let t=e.jsx(i.StyledIcon,{type:g,size:O,variant:z});return b&&(t=e.jsx(i.StyledPortraitInitials,{size:O,"data-element":"initials",variant:z,children:b.slice(0,3).toUpperCase()})),m&&!B&&(t=e.jsx(i.StyledCustomImg,{src:m,alt:c||y||"","data-element":"user-image",onError:()=>_(!0)})),P?e.jsx(r.Tooltip,{message:P,id:k,position:h,type:S,size:x,isVisible:v,bgColor:w,fontColor:I,children:e.jsx(i.StyledPortraitContainer,a(s(a(s({},n.default(q)),{onClick:C,className:d}),T),{hasValidImg:E,darkBackground:f,size:O,shape:j,backgroundColor:p,foregroundColor:u,variant:z,children:t}))}):e.jsx(i.StyledPortraitContainer,a(s(a(s({},n.default(q)),{onClick:C,className:d}),T),{hasValidImg:E,darkBackground:f,size:O,shape:j,backgroundColor:p,foregroundColor:u,variant:z,children:t}))})()};exports.Portrait=c,exports.default=c;
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("../tooltip/tooltip.component.js"),o=require("../../__internal__/utils/helpers/tags/tags.js"),i=require("./portrait.style.js");require("../../style/utils/filter-styled-system-padding-props.js");var n=require("../../style/utils/filter-styled-system-margin-props.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 s(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 c=l=>{var{alt:c,backgroundColor:p,foregroundColor:u,className:d,name:y,darkBackground:f=!1,iconType:g="individual",initials:b,shape:j="circle",size:O="M",src:m,onClick:C,tooltipMessage:P,tooltipId:k,tooltipIsVisible:v,tooltipPosition:h,tooltipType:S,tooltipSize:x,tooltipBgColor:w,tooltipFontColor:I,variant:z}=l,q=function(e,t){if(null==e)return{};var r,o,i=function(e,t){if(null==e)return{};var r,o,i={},n=Object.keys(e);for(o=0;o<n.length;o++)r=n[o],t.indexOf(r)>=0||(i[r]=e[r]);return i}(e,t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);for(o=0;o<n.length;o++)r=n[o],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(i[r]=e[r])}return i}(l,["alt","backgroundColor","foregroundColor","className","name","darkBackground","iconType","initials","shape","size","src","onClick","tooltipMessage","tooltipId","tooltipIsVisible","tooltipPosition","tooltipType","tooltipSize","tooltipBgColor","tooltipFontColor","variant"]);const[B,_]=t.useState(!1),E=Boolean(m)&&!B;t.useEffect((()=>{_(!1)}),[m]);const T=o.default("portrait",q);return(()=>{let t=e.jsx(i.StyledIcon,{type:g,$portraitSize:O});return b&&(t=e.jsx(i.StyledPortraitInitials,{size:O,"data-element":"initials",variant:z,children:b.slice(0,3).toUpperCase()})),m&&!B&&(t=e.jsx(i.StyledCustomImg,{src:m,alt:c||y||"","data-element":"user-image",onError:()=>_(!0)})),P?e.jsx(r.Tooltip,{message:P,id:k,position:h,type:S,size:x,isVisible:v,bgColor:w,fontColor:I,children:e.jsx(i.StyledPortraitContainer,a(s(a(s({},n.default(q)),{onClick:C,className:d}),T),{hasValidImg:E,darkBackground:f,size:O,shape:j,backgroundColor:p,foregroundColor:u,variant:z,children:t}))}):e.jsx(i.StyledPortraitContainer,a(s(a(s({},n.default(q)),{onClick:C,className:d}),T),{hasValidImg:E,darkBackground:f,size:O,shape:j,backgroundColor:p,foregroundColor:u,variant:z,children:t}))})()};exports.Portrait=c,exports.default=c;
@@ -1,3 +1,9 @@
1
1
  import { PortraitShapes, PortraitSizes } from "./portrait.component";
2
2
  export declare const PORTRAIT_SHAPES: PortraitShapes[];
3
3
  export declare const PORTRAIT_SIZES: PortraitSizes[];
4
+ type PortraitSizeParams = Record<PortraitSizes, {
5
+ dimensions: number;
6
+ iconDimensions: number;
7
+ }>;
8
+ export declare const PORTRAIT_SIZE_PARAMS: PortraitSizeParams;
9
+ export {};
@@ -1 +1 @@
1
- "use strict";exports.PORTRAIT_SHAPES=["circle","square"],exports.PORTRAIT_SIZES=["XS","S","M","ML","L","XL","XXL"];
1
+ "use strict";exports.PORTRAIT_SHAPES=["circle","square"],exports.PORTRAIT_SIZES=["XS","S","M","ML","L","XL","XXL"],exports.PORTRAIT_SIZE_PARAMS={XS:{dimensions:32,iconDimensions:16},S:{dimensions:32,iconDimensions:20},M:{dimensions:40,iconDimensions:24},ML:{dimensions:56,iconDimensions:32},L:{dimensions:72,iconDimensions:40},XL:{dimensions:104,iconDimensions:56},XXL:{dimensions:128,iconDimensions:64}};
@@ -13,7 +13,10 @@ type StyledPortraitProps = {
13
13
  };
14
14
  export declare const StyledPortraitInitials: import("styled-components").StyledComponent<"div", any, Pick<StyledPortraitProps, "size" | "variant">, never>;
15
15
  export declare const StyledCustomImg: import("styled-components").StyledComponent<"img", any, {}, never>;
16
- export declare const StyledIcon: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<import("../icon").IconProps & React.RefAttributes<HTMLSpanElement>>, any, Pick<StyledPortraitProps, "size" | "variant">, never>;
16
+ export declare const StyledIcon: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<import("../icon").IconProps & React.RefAttributes<HTMLSpanElement>>, any, {
17
+ $portraitSize: PortraitSizes;
18
+ variant?: PortraitVariant;
19
+ }, never>;
17
20
  export declare const StyledPortraitContainer: import("styled-components").StyledComponent<"div", any, {
18
21
  theme: object;
19
22
  } & StyledPortraitProps & MarginProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>, "theme">;
@@ -1 +1 @@
1
- "use strict";require("react");var t=require("styled-components"),e=require("styled-system"),i=require("../icon/icon.component.js"),o=require("../../style/themes/apply-base-theme.js"),r=require("./__internal__/get-properties.js");function n(t){return t&&t.__esModule?t:{default:t}}var s=n(t);const a=s.default.div.withConfig({displayName:"portrait.style__StyledPortraitInitials",componentId:"sc-fbaa2f3e-0"})(["font:",";display:flex;white-space:nowrap;align-items:center;justify-content:center;height:inherit;width:inherit;.mentions-list-item &&{color:var(--input-dropdown-label-default);}.mentions-list-item:hover &&,.mentions-list-item.selected &&{color:var(--popover-label-hover);}"],(({size:t})=>r.getPortraitFontSize(t))),l=s.default.img.withConfig({displayName:"portrait.style__StyledCustomImg",componentId:"sc-fbaa2f3e-1"})(["height:inherit;min-width:inherit;"]),d=s.default(i.default).withConfig({displayName:"portrait.style__StyledIcon",componentId:"sc-fbaa2f3e-2"})(["&&{color:",";height:",";min-width:",";::before{font-size:",";}}"],(({variant:t})=>r.getPortraitColors(t).color),(({size:t})=>r.getPortraitDimensions(t).height),(({size:t})=>r.getPortraitDimensions(t).width),(({size:t})=>r.getPortraitIconFontSize(t))),c=s.default.div.attrs(o.default).withConfig({displayName:"portrait.style__StyledPortraitContainer",componentId:"sc-fbaa2f3e-3"})([""," ",";"," min-width:",";height:",";overflow:hidden;border-radius:",";border:var(--global-borderwidth-xs) solid var(--profile-border-default);display:inline-block;"," "," .mentions-list-item &&{color:currentColor;}.mentions-list-item:hover &&,.mentions-list-item.selected &&{color:currentColor;}"],(({variant:t})=>`\n background-color: ${r.getPortraitColors(t).backgroundColor};\n color: ${r.getPortraitColors(t).color};\n `),(({darkBackground:t,backgroundColor:e,size:i,foregroundColor:o,variant:n})=>!n&&r.default(e,t,!["XS","S"].includes(i),!0,o)),(({hasValidImg:t,size:e})=>t&&`max-width: ${r.getPortraitDimensions(e).width};`),(({size:t})=>r.getPortraitDimensions(t).width),(({size:t})=>r.getPortraitDimensions(t).height),(({shape:t,size:e})=>r.getPortraitBorderRadius(t,e)),(({onClick:t})=>t&&"cursor: pointer"),e.margin);exports.StyledCustomImg=l,exports.StyledIcon=d,exports.StyledPortraitContainer=c,exports.StyledPortraitInitials=a;
1
+ "use strict";require("react");var t=require("styled-components"),e=require("styled-system"),i=require("../icon/icon.component.js"),r=require("../../style/themes/apply-base-theme.js"),o=require("./__internal__/get-properties.js");function n(t){return t&&t.__esModule?t:{default:t}}var s=n(t);const a=s.default.div.withConfig({displayName:"portrait.style__StyledPortraitInitials",componentId:"sc-67607789-0"})(["font:",";display:flex;white-space:nowrap;align-items:center;justify-content:center;height:inherit;width:inherit;.mentions-list-item &&{color:var(--input-dropdown-label-default);}.mentions-list-item:hover &&,.mentions-list-item.selected &&{color:var(--popover-label-hover);}"],(({size:t})=>o.getPortraitFontSize(t))),l=s.default.img.withConfig({displayName:"portrait.style__StyledCustomImg",componentId:"sc-67607789-1"})(["height:inherit;min-width:inherit;"]),d=s.default(i.default).withConfig({displayName:"portrait.style__StyledIcon",componentId:"sc-67607789-2"})(["&&{color:",";height:",";min-width:",";::before{font-size:",";}}"],(({variant:t})=>o.getPortraitColors(t).color),(({$portraitSize:t})=>o.getPortraitDimensions(t).height),(({$portraitSize:t})=>o.getPortraitDimensions(t).width),(({$portraitSize:t})=>o.getPortraitIconFontSize(t))),c=s.default.div.attrs(r.default).withConfig({displayName:"portrait.style__StyledPortraitContainer",componentId:"sc-67607789-3"})([""," ",";"," min-width:",";height:",";overflow:hidden;border-radius:",";border:var(--global-borderwidth-xs) solid var(--profile-border-default);display:inline-block;"," "," .mentions-list-item &&{color:currentColor;}.mentions-list-item:hover &&,.mentions-list-item.selected &&{color:currentColor;}"],(({variant:t})=>`\n background-color: ${o.getPortraitColors(t).backgroundColor};\n color: ${o.getPortraitColors(t).color};\n `),(({darkBackground:t,backgroundColor:e,size:i,foregroundColor:r,variant:n})=>!n&&o.default(e,t,!["XS","S"].includes(i),!0,r)),(({hasValidImg:t,size:e})=>t&&`max-width: ${o.getPortraitDimensions(e).width};`),(({size:t})=>o.getPortraitDimensions(t).width),(({size:t})=>o.getPortraitDimensions(t).height),(({shape:t,size:e})=>o.getPortraitBorderRadius(t,e)),(({onClick:t})=>t&&"cursor: pointer"),e.margin);exports.StyledCustomImg=l,exports.StyledIcon=d,exports.StyledPortraitContainer=c,exports.StyledPortraitInitials=a;
@@ -8,5 +8,5 @@ declare const StyledProgressBar: import("styled-components").StyledComponent<"sp
8
8
  declare const StyledValue: import("styled-components").StyledComponent<"span", any, {}, never>;
9
9
  declare const StyledDescription: import("styled-components").StyledComponent<"span", any, {}, never>;
10
10
  declare const StyledValuesLabel: import("styled-components").StyledComponent<"span", any, Pick<ProgressTrackerProps, "size" | "labelWidth" | "labelsPosition">, never>;
11
- declare const InnerBar: import("styled-components").StyledComponent<"span", any, Required<Pick<ProgressTrackerProps, "error" | "progress" | "size">>, never>;
11
+ declare const InnerBar: import("styled-components").StyledComponent<"span", any, Required<Pick<ProgressTrackerProps, "size" | "error" | "progress">>, never>;
12
12
  export { StyledProgressBar, InnerBar, StyledProgressTracker, StyledValuesLabel, StyledValue, StyledDescription, };
@@ -2,7 +2,7 @@ import { SpaceProps } from "styled-system";
2
2
  import { TileProps } from "./tile.component";
3
3
  declare const StyledTile: import("styled-components").StyledComponent<"div", any, {
4
4
  theme: object;
5
- } & Pick<TileProps, "height" | "width" | "variant" | "borderWidth" | "highlightVariant" | "roundness" | "borderVariant"> & {
5
+ } & Pick<TileProps, "width" | "height" | "variant" | "borderWidth" | "highlightVariant" | "roundness" | "borderVariant"> & {
6
6
  isHorizontal?: boolean;
7
7
  } & SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol>, "theme">;
8
8
  export default StyledTile;
@@ -1,5 +1,5 @@
1
1
  import { TooltipProps } from "./tooltip.component";
2
2
  declare const StyledTooltip: import("styled-components").StyledComponent<"div", any, {
3
3
  theme: object;
4
- } & Pick<TooltipProps, "type" | "size" | "bgColor" | "fontColor">, "theme">;
4
+ } & Pick<TooltipProps, "size" | "type" | "bgColor" | "fontColor">, "theme">;
5
5
  export default StyledTooltip;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "carbon-react",
3
- "version": "159.6.0",
3
+ "version": "159.7.1",
4
4
  "description": "A library of reusable React components for easily building user interfaces.",
5
5
  "files": [
6
6
  "lib",