carbon-react 162.10.0 → 162.12.0-beta.1

package/esm/components/pill/pill.style.d.ts

@@ -1,33 +0,0 @@
-import { MarginProps } from "styled-system";
-import type { ThemeObject } from "../../style/themes/theme.types";
-export interface StyledPillProps extends MarginProps {
-    /** Override color variant, provide any color from palette or any valid css color value. */
-    borderColor?: string;
-    /** Sets the max-width of the pill. */
-    maxWidth?: string;
-    /**
-     * Sets the size of the pill.
-     * @deprecated The `XL` size is deprecated and will be removed in a future release. Use `L` instead.
-     */
-    size?: "S" | "M" | "L" | "XL";
-    /** @private @ignore */
-    theme?: Partial<ThemeObject>;
-    /** Allow the text within pill to wrap. */
-    wrapText?: boolean;
-}
-interface AllStyledPillProps extends MarginProps {
-    $borderColor?: StyledPillProps["borderColor"];
-    $maxWidth?: StyledPillProps["maxWidth"];
-    $size?: StyledPillProps["size"];
-    $wrapText?: StyledPillProps["wrapText"];
-    $inFill?: boolean;
-    $isDeletable: boolean;
-    $inverse: boolean;
-    $colorVariant: "grey" | "green" | "red" | "orange" | "blue" | "purple" | "teal" | "lime" | "pink" | "slate";
-    $pillRole: "tag" | "status";
-}
-export declare const StyledDeleteButton: import("styled-components").StyledComponent<"button", any, {}, never>;
-declare const StyledPill: import("styled-components").StyledComponent<"span", any, {
-    theme: object;
-} & AllStyledPillProps, "theme">;
-export default StyledPill;

package/esm/components/pill/pill.style.js

@@ -1 +0,0 @@
-import o,{css as e}from"styled-components";import{margin as t}from"styled-system";import r from"./pill.style.config.js";import a from"../../style/themes/apply-base-theme.js";import i from"../icon/icon.style.js";import l from"../../style/utils/add-focus-styling.js";import{toColor as s}from"../../style/utils/color.js";import n from"../../style/utils/get-color-value.js";import c from"../../style/utils/get-hex-value.js";import p from"../../style/utils/get-accessible-foreground-color.js";const d=o.button.withConfig({displayName:"pill.style__StyledDeleteButton",componentId:"carbon_v162_9_1__sc-e085f6af-0"})([""]),g=o.span.attrs(a).withConfig({displayName:"pill.style__StyledPill",componentId:"carbon_v162_9_1__sc-e085f6af-1"})([""," ",""],t,(({$wrapText:o,$borderColor:t,$colorVariant:a,$inverse:g,$isDeletable:b,$inFill:m,$maxWidth:h,$size:u,theme:f})=>{let v,x,y,w,_,z,j;if(t){v=s(f,t),x=v,y=v;const o=n(v);z=p(c(o),!1,!0),j=z}else{const{status:o}=r(g),{varietyColor:e,varietyColorAlt:t,varietyBorderColor:i,buttonFocus:l,buttonFocusAlt:s,content:n,contentAlt:c}=o[a];v=e,x=t,y=i,w=l,_=s,z=n,j=c}const $=m||t?z:j,k=m||t?w:_;return e(["position:relative;display:inline-flex;text-align:center;align-items:center;justify-content:center;gap:var(--global-space-comp-xs);border:var(--global-borderwidth-s) solid ",";border-radius:var(--global-radius-container-s);height:auto;box-sizing:border-box;"," "," color:",";","{color:inherit;width:var(--global-size-2-xs);height:var(--global-size-2-xs);padding:var(--global-space-comp-xs);box-sizing:border-box;}"," "," font-family:var(--global-font-families-component);font-weight:500;line-height:1;"," "," "," "," "," ",""],y,!o&&e(["white-space:nowrap;"]),o&&e(["overflow-wrap:anywhere;hyphens:auto;-webkit-hyphens:manual;"]),z,i,m&&e(["background-color:",";"],v),!m&&e(["",""],t?e(["color:",";"],g?"var(--colorsUtilityYang100)":"var(--colorsUtilityYin090)"):e(["background-color:",";color:",";"],x,j)),"S"===u&&e(["min-height:var(--global-size-2-xs);font-size:14px;padding:0 var(--global-space-comp-s);"]),"M"===u&&e(["min-height:var(--global-size-xs);font-size:14px;padding:0 var(--global-space-comp-s);"]),"L"===u&&e(["min-height:28px;font-size:16px;padding:0 var(--global-space-comp-s);"]),"XL"===u&&e(["min-height:28px;font-size:16px;padding:0 12px;"]),b&&e(["","{-webkit-appearance:none;background:transparent;border-radius:0 var(--global-radius-container-s) var(--global-radius-container-s) 0;border:none;bottom:0;font-size:100%;position:absolute;right:0;top:0;width:20px;margin:0;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer;color:",";"," ","{color:currentColor;height:unset;width:unset;}&:focus{"," color:",";::-moz-focus-inner{border:0;}","}&:hover{background-color:",";color:",";}","}"," "," "," ",""],d,$,!m&&t&&e(["color:",";"],g?"var(--colorsUtilityYang100)":"var(--colorsUtilityYin090)"),i,l(),$,t?e(["&::before{border-radius:0 var(--global-radius-container-s) var(--global-radius-container-s) 0;}"]):e(["background-color:",";"],m?w:_),k,$,t&&e(['&:hover,&:focus{&::before{content:"";position:absolute;left:0;top:0;width:100%;height:100%;background-color:',";filter:brightness(0.9);}}"],v),"S"===u&&e(["padding:0 calc(20px + var(--global-space-comp-xs)) 0 var(--global-space-comp-s);"]),"M"===u&&e(["padding:0 calc(24px + var(--global-space-comp-xs)) 0 var(--global-space-comp-s);","{width:24px;padding:0;}"],d),"L"===u&&e(["padding:0 calc(28px + var(--global-space-comp-xs)) 0 var(--global-space-comp-s);","{width:28px;padding:0;}"],d),"XL"===u&&e(["padding:0 calc(32px + var(--global-space-comp-xs)) 0 12px;","{width:32px;padding:0;line-height:18px;}"],d)),h&&`max-width: ${h}`)}));export{d as StyledDeleteButton,g as default};

package/esm/components/pod/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from "./pod.component";
-export type { PodProps } from "./pod.component";

package/esm/components/pod/index.js

@@ -1 +0,0 @@
-export{default}from"./pod.component.js";

package/esm/components/pod/pod.component.d.ts

@@ -1,48 +0,0 @@
-import React from "react";
-import { MarginProps } from "styled-system";
-import { TagProps } from "../../__internal__/utils/helpers/tags";
-import { PodAlignment, PodSize, PodVariant } from "./pod.config";
-/**
- * @deprecated `Pod` has been deprecated. See the Carbon documentation for migration details.
- */
-export interface PodProps extends MarginProps, TagProps {
-    /** Aligns the title to left, right or center */
-    alignTitle?: PodAlignment;
-    /** Enables/disables the border around the pod. */
-    border?: boolean;
-    /** Children elements */
-    children?: React.ReactNode;
-    /** Determines the padding around the pod */
-    size?: PodSize;
-    /** Prop to apply a theme to the Pod */
-    variant?: PodVariant;
-    /** Title for the pod */
-    title?: React.ReactNode;
-    /** Optional subtitle for the pod */
-    subtitle?: React.ReactNode;
-    /** A component to render as a Pod footer */
-    footer?: string | React.ReactNode;
-    /** Supplies an edit action to the pod */
-    onEdit?: (ev: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void;
-    /** Supplies a delete action to the pod */
-    onDelete?: (ev: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void;
-    /** Supplies an undo action to the pod in soft delete state. */
-    onUndo?: (ev: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void;
-    /** Sets soft boolean delete state */
-    softDelete?: boolean;
-    /** Determines if the editable pod content should be full width */
-    editContentFullWidth?: boolean;
-    /** Determines if the edit button should be hidden until the user hovers over the content */
-    displayEditButtonOnHover?: boolean;
-    /** Determines if clicking the pod content calls the onEdit action */
-    triggerEditOnContent?: boolean;
-    /** Sets Pod height, number is changed to pixels and string is passed as raw css value */
-    height?: string | number;
-    /** Renders edit button inside the pod if it exists. */
-    internalEditButton?: boolean;
-}
-/**
- * @deprecated `Pod` has been deprecated. See the Carbon documentation for migration details.
- */
-declare const Pod: React.ForwardRefExoticComponent<PodProps & React.RefAttributes<HTMLDivElement>>;
-export default Pod;

package/esm/components/pod/pod.component.js

@@ -1 +0,0 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import n,{useState as o,useMemo as r}from"react";import i from"../../hooks/__internal__/useLocale/useLocale.js";import l from"../../__internal__/utils/helpers/tags/tags.js";import{StyledPod as a,StyledBlock as d,StyledContent as s,StyledHeader as c,StyledTitle as u,StyledSubtitle as p,StyledFooter as f,StyledActionsContainer as b,StyledUndoButton as y,StyledEditAction as m,StyledDeleteButton as O}from"./pod.style.js";import h from"../icon/icon.component.js";import"../icon/icon.style.js";import g from"../../__internal__/utils/helpers/events/events.js";function v(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function j(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},o=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),o.forEach((function(t){v(e,t,n[t])}))}return e}function E(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t.push.apply(t,n)}return t}(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))})),e}const B=n.forwardRef(((n,v)=>{var{alignTitle:B="left",border:w=!0,children:P,displayEditButtonOnHover:D,editContentFullWidth:_,footer:k,height:F,internalEditButton:z,onDelete:C,onEdit:H,onUndo:x,size:M="medium",softDelete:S,subtitle:T,title:L,triggerEditOnContent:K,variant:W="primary"}=n,I=function(e,t){if(null==e)return{};var n,o,r=function(e,t){if(null==e)return{};var n,o,r={},i=Object.keys(e);for(o=0;o<i.length;o++)n=i[o],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(o=0;o<i.length;o++)n=i[o],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}(n,["alignTitle","border","children","displayEditButtonOnHover","editContentFullWidth","footer","height","internalEditButton","onDelete","onEdit","onUndo","size","softDelete","subtitle","title","triggerEditOnContent","variant"]);const[U,N]=o(!1),[R,$]=o(!1),[q,A]=o(!1),[G,J]=o(!1),[Q,V]=o(!1),[X,Y]=o(!1),Z=i(),ee=r((()=>!(!H||!K&&!D)),[D,H,K]),te=r((()=>!!(H||C||x)),[H,C,x]),ne=e=>t=>{g.isKeyboardEvent(t)&&g.isEventType(t,"keydown")&&!g.isEnterKey(t)||(t.preventDefault(),e(t))},oe={onMouseEnter:()=>$(!0),onMouseLeave:()=>$(!1),onFocus:()=>N(!0),onBlur:()=>N(!1),onClick:H&&ne(H),onKeyDown:H&&ne(H)};return e(a,E(j({alignTitle:B,internalEditButton:z,height:"number"==typeof F?`${F}px`:F,ref:v},I,l("pod",I)),{children:[e(d,E(j({"data-element":"block","data-role":"pod-block",contentTriggersEdit:ee,hasButtons:te,fullWidth:_,internalEditButton:z,isFocused:U||q,isHovered:R||G,noBorder:!w,variant:W,softDelete:S},ee&&E(j({},oe),{tabIndex:0})),{children:[e(s,{"data-element":"content",size:M,children:[L&&e(c,{"data-role":"pod-content-header",alignTitle:B,internalEditButton:z,size:M,children:["string"==typeof L?t(u,{"data-element":"title",children:L}):L,"string"==typeof T?t(p,{"data-element":"subtitle",children:T}):T]}),P]}),k&&t(f,{"data-element":"footer",size:M,variant:W,softDelete:S,children:k})]})),te&&e(b,{"data-element":"action-button-container","data-role":"action-button-container",internalEditButton:z,children:[S&&x&&t(y,{"aria-label":Z.pod.undo(),onMouseEnter:()=>Y(!0),onMouseLeave:()=>Y(!1),onFocus:()=>V(!0),onBlur:()=>V(!1),"data-element":"undo",internalEditButton:z,isFocused:Q,isHovered:X,noBorder:!w,size:M,variant:W,onClick:ne(x),children:t(h,{type:"undo"})}),!S&&H&&t(m,E(j({},oe),{"aria-label":Z.actions.edit(),"data-element":"edit",displayOnlyOnHover:D,internalEditButton:z,isFocused:U,isHovered:R,noBorder:!w,size:M,variant:W,children:t(h,{type:"edit"})})),!S&&C&&t(O,{"aria-label":Z.actions.delete(),"data-element":"delete",onMouseEnter:()=>J(!0),onMouseLeave:()=>J(!1),onFocus:()=>A(!0),onBlur:()=>A(!1),internalEditButton:z,isFocused:q,isHovered:G,noBorder:!w,size:M,variant:W,onClick:ne(C),children:t(h,{type:"delete"})})]})]}))}));B.displayName="Pod";export{B as default};

package/esm/components/pod/pod.config.d.ts

@@ -1,6 +0,0 @@
-export declare const POD_SIZES: readonly ["extra-small", "small", "medium", "large", "extra-large"];
-export declare const POD_ALIGNMENTS: readonly ["left", "center", "right"];
-export declare const POD_VARIANTS: readonly ["primary", "secondary", "tertiary", "tile", "transparent"];
-export type PodSize = (typeof POD_SIZES)[number];
-export type PodAlignment = (typeof POD_ALIGNMENTS)[number];
-export type PodVariant = (typeof POD_VARIANTS)[number];

package/esm/components/pod/pod.config.js

@@ -1 +0,0 @@
-const r=["extra-small","small","medium","large","extra-large"],e=["left","center","right"],t=["primary","secondary","tertiary","tile","transparent"];export{e as POD_ALIGNMENTS,r as POD_SIZES,t as POD_VARIANTS};

package/esm/components/pod/pod.style.d.ts

@@ -1,45 +0,0 @@
-import { MarginProps } from "styled-system";
-import { PodProps } from "./pod.component";
-import { PodSize, PodVariant } from "./pod.config";
-declare const StyledPod: import("styled-components").StyledComponent<"div", any, {
-    theme: object;
-} & MarginProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & Pick<PodProps, "height" | "alignTitle" | "internalEditButton">, "theme">;
-interface StyledBlockProps extends Pick<PodProps, "softDelete" | "internalEditButton"> {
-    variant: PodVariant;
-    noBorder: boolean;
-    hasButtons: boolean;
-    contentTriggersEdit?: boolean;
-    fullWidth?: boolean;
-    isHovered?: boolean;
-    isFocused?: boolean;
-}
-declare const StyledBlock: import("styled-components").StyledComponent<"div", any, StyledBlockProps, never>;
-declare const StyledContent: import("styled-components").StyledComponent<"div", any, {
-    size: PodSize;
-}, never>;
-interface StyledFooterProps extends Pick<PodProps, "softDelete"> {
-    variant: PodVariant;
-    size: PodSize;
-}
-declare const StyledFooter: import("styled-components").StyledComponent<"div", any, StyledFooterProps, never>;
-declare const StyledActionsContainer: import("styled-components").StyledComponent<"div", any, Pick<PodProps, "internalEditButton">, never>;
-interface CommonPodButtonProps extends Pick<PodProps, "internalEditButton"> {
-    isHovered?: boolean;
-    isFocused?: boolean;
-    size: PodSize;
-    noBorder: boolean;
-    variant: PodVariant;
-}
-interface StyledEditActionProps extends CommonPodButtonProps {
-    displayOnlyOnHover?: boolean;
-}
-declare const StyledEditAction: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../icon-button").IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>, any, StyledEditActionProps, never>;
-declare const StyledDeleteButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../icon-button").IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>, any, CommonPodButtonProps, never>;
-declare const StyledUndoButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../icon-button").IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>, any, CommonPodButtonProps, never>;
-interface StyledHeaderProps extends Pick<PodProps, "alignTitle" | "internalEditButton"> {
-    size: PodSize;
-}
-declare const StyledHeader: import("styled-components").StyledComponent<"div", any, StyledHeaderProps, never>;
-declare const StyledSubtitle: import("styled-components").StyledComponent<"h5", any, {}, never>;
-declare const StyledTitle: import("styled-components").StyledComponent<"h4", any, {}, never>;
-export { StyledBlock, StyledContent, StyledEditAction, StyledActionsContainer, StyledDeleteButton, StyledUndoButton, StyledFooter, StyledPod, StyledHeader, StyledSubtitle, StyledTitle, };

package/esm/components/pod/pod.style.js

@@ -1 +0,0 @@
-import o,{css as r}from"styled-components";import{margin as t}from"styled-system";import i from"../../style/themes/apply-base-theme.js";import{StyledContent as e}from"../link/link.style.js";import n from"../icon-button/icon-button.component.js";import a from"../icon/icon.style.js";const l=o.div.attrs(i).withConfig({displayName:"pod.style__StyledPod",componentId:"carbon_v162_9_1__sc-b71164e0-0"})([""," display:flex;align-items:flex-start;width:100%;",";",";&:focus{outline:none;}"],t,(({internalEditButton:o})=>o&&"position: relative"),(({height:o})=>o&&`height: ${o}`)),s={primary:"var(--colorsUtilityYang100)",secondary:"var(--colorsUtilityMajor025)",tertiary:"var(--colorsUtilityMajor040)",transparent:"var(--colorsUtilityMajorTransparent)",tile:"var(--colorsUtilityYang100)"},c=o.div.withConfig({displayName:"pod.style__StyledBlock",componentId:"carbon_v162_9_1__sc-b71164e0-1"})(["",""],(({variant:o,softDelete:t,noBorder:i,hasButtons:e,contentTriggersEdit:n,fullWidth:a,internalEditButton:l,isHovered:c,isFocused:d})=>r(["box-sizing:border-box;border-radius:var(--borderRadius100);display:flex;flex-direction:column;background-color:",";width:100%;height:100%;",";",";",";",";"," "," ",";"],s[o],"tile"===o&&"box-shadow: 0 2px 3px 0 rgba(2, 18, 36, 0.2)",i?"border: none":"border: 1px solid var(--colorsUtilityMajor100)",e&&!(a||l)&&"width: auto;",n&&"cursor: pointer",(c||d)&&r(["background-color:var(--colorsUtilityMajor075);"," ",""],l&&"tile"===o&&"background-color: var(--colorsUtilityMajorTransparent);",n&&r(["background-color:var(--colorsActionMajor600);*{color:var(--colorsUtilityYang100);}"])),(!l||n)&&(d?r(["outline:3px solid var(--colorsSemanticFocus500);border:none;padding:","px;"],i?0:1):r(["outline:none;"])),t&&r(["border:none;background-color:var(--colorsActionDisabled500);& > *{color:var(--colorsUtilityYin065);}"])))),d={"extra-small":"8px",small:"8px",medium:"16px",large:"32px 24px","extra-large":"40px"},p=o.div.withConfig({displayName:"pod.style__StyledContent",componentId:"carbon_v162_9_1__sc-b71164e0-2"})(["text-align:left;padding:",";flex-grow:1;"],(({size:o})=>d[o])),b={"extra-small":"8px",small:"8px",medium:"8px 16px",large:"16px 24px","extra-large":"24px 40px"},x=o.div.withConfig({displayName:"pod.style__StyledFooter",componentId:"carbon_v162_9_1__sc-b71164e0-3"})(["",""],(({variant:o,size:t,softDelete:i})=>r(["background-color:var(--colorsUtilityMajor025);border-bottom-left-radius:var(--borderRadius100);border-bottom-right-radius:var(--borderRadius100);box-shadow:inset 0px 1px 1px 0 rgba(0,0,0,0.1);color:var(--colorsUtilityYin090);padding:",";",";",";"],b[t],i&&"color: var(--colorsUtilityYin055)","tile"===o&&"border-top: 1px solid var(--colorsUtilityMajor100)"))),g=o.div.withConfig({displayName:"pod.style__StyledActionsContainer",componentId:"carbon_v162_9_1__sc-b71164e0-4"})(["display:flex;flex-direction:column;",""],(({internalEditButton:o})=>o&&r(["position:absolute;right:2px;top:2px;z-index:10;"]))),m={"extra-small":34,small:34,medium:50,large:50,"extra-large":50},v={primary:"var(--colorsActionMajorYang100)",secondary:"var(--colorsActionMinor050)",tertiary:"var(--colorsActionMinor100)",transparent:"var(--colorsActionMajorTransparent)",tile:"var(--colorsActionMajorYang100)"},_=o(n).withConfig({displayName:"pod.style__StyledEditAction",componentId:"carbon_v162_9_1__sc-b71164e0-5"})(["&&{",";}","{clip:rect(1px,1px,1px,1px);position:absolute;}"],(({displayOnlyOnHover:o,isHovered:t,isFocused:i,variant:e,size:n,internalEditButton:l,noBorder:s})=>r(["cursor:pointer;background-color:",";border:1px solid var(--colorsActionMinor200);margin-left:8px;margin-bottom:8px;box-sizing:border-box;height:",";width:",";display:flex;align-items:center;justify-content:center;border-radius:var(--borderRadius100);","{top:-2px;height:16px;width:16px;color:var(--colorsActionMajor500);}"," "," "," "," ",";"],v[e],`${m[n]}px`,`${m[n]}px`,a,o&&!(t||i)&&"display: none",s&&"border: none;",l&&r(["border:none;background:var(--colorsActionMajorTransparent);"]),(t||i)&&!l&&r(["background-color:var(--colorsActionMajor600);color:var(--colorsActionMajorYang100);","{color:var(--colorsActionMajorYang100);}"],a),i&&r(["outline:3px solid var(--colorsSemanticFocus500);border:none;"]))),e),u=o(n).withConfig({displayName:"pod.style__StyledDeleteButton",componentId:"carbon_v162_9_1__sc-b71164e0-6"})(["&&{","}"],(({noBorder:o,internalEditButton:t,isHovered:i,isFocused:e,variant:n,size:l})=>r(["cursor:pointer;background-color:",";border:",";margin-left:8px;margin-bottom:8px;box-sizing:border-box;height:",";width:",";border-radius:var(--borderRadius100);","{top:-2px;height:16px;width:16px;color:var(--colorsSemanticNegative500);}"," "," ",";"],v[n],o?"none":"1px solid var(--colorsActionMinor200)",`${m[l]}px`,`${m[l]}px`,a,t&&r(["border:none;background:var(--colorsActionMajorTransparent);"]),(i||e)&&!t&&r(["background-color:var(--colorsSemanticNegative600);color:var(--colorsActionMajorYang100);","{color:var(--colorsActionMajorYang100);}"],a),e&&r(["outline:3px solid var(--colorsSemanticFocus500);border:none;"])))),y=o(n).withConfig({displayName:"pod.style__StyledUndoButton",componentId:"carbon_v162_9_1__sc-b71164e0-7"})(["&&{","}"],(({isHovered:o,isFocused:t,variant:i,size:e,noBorder:n,internalEditButton:l})=>r(["cursor:pointer;background-color:",";border:1px solid var(--colorsActionMinor200);margin-left:8px;margin-bottom:8px;box-sizing:border-box;height:",";width:",";border-radius:var(--borderRadius100);","{top:-2px;height:16px;width:16px;color:var(--colorsActionMajor500);}"," "," "," ",";"],v[i],`${m[e]}px`,`${m[e]}px`,a,n&&"border: none;",l&&r(["border:none;background:var(--colorsActionMajorTransparent);"]),(o||t)&&!l&&r(["background-color:var(--colorsActionMajor600);color:var(--colorsActionMajorYang100);","{color:var(--colorsActionMajorYang100);}"],a),t&&r(["outline:3px solid var(--colorsSemanticFocus500);border:none;"])))),h={"extra-small":20,small:25,medium:30,large:30,"extra-large":30},f=o.div.withConfig({displayName:"pod.style__StyledHeader",componentId:"carbon_v162_9_1__sc-b71164e0-8"})(["",""],(({alignTitle:o,internalEditButton:t,size:i})=>r(["margin-bottom:24px;text-align:",";",";"],o,"right"===o&&t&&r(["margin-right:","px;"],h[i])))),j=o.h5.withConfig({displayName:"pod.style__StyledSubtitle",componentId:"carbon_v162_9_1__sc-b71164e0-9"})(["margin-top:8px;font-size:14px;font-weight:normal;"]),M=o.h4.withConfig({displayName:"pod.style__StyledTitle",componentId:"carbon_v162_9_1__sc-b71164e0-10"})(["display:inline;font-size:18px;font-weight:500;"]);export{g as StyledActionsContainer,c as StyledBlock,p as StyledContent,u as StyledDeleteButton,_ as StyledEditAction,x as StyledFooter,f as StyledHeader,l as StyledPod,j as StyledSubtitle,M as StyledTitle,y as StyledUndoButton};

package/esm/components/popover-container/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from "./popover-container.component";
-export type { PopoverContainerProps, RenderCloseProps, RenderOpenProps, PopoverContainerHandle, } from "./popover-container.component";

package/esm/components/popover-container/index.js

@@ -1 +0,0 @@
-export{PopoverContainer as default}from"./popover-container.component.js";

package/esm/components/popover-container/popover-container.component.d.ts

@@ -1,115 +0,0 @@
-import React from "react";
-import { PaddingProps } from "styled-system";
-import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
-import { BoxProps } from "../box";
-type Size = "small" | "medium" | "large";
-export interface RenderOpenProps {
-    /**
-     * @deprecated
-     * The tabIndex prop is no longer required for the open button.
-     */
-    tabIndex?: number;
-    isOpen?: boolean;
-    "data-element"?: string;
-    onClick: (ev: React.KeyboardEvent<HTMLElement> | React.MouseEvent<HTMLElement>) => void;
-    ref: React.RefObject<HTMLButtonElement>;
-    "aria-label"?: string;
-    id?: string;
-    "aria-expanded": boolean;
-    "aria-haspopup": "dialog";
-    "data-popover-container-button"?: string;
-    children: React.ReactNode;
-    size: Size;
-}
-export declare const renderOpen: ({ onClick, "data-element": dataElement, ref, id, "aria-expanded": ariaExpanded, "aria-haspopup": ariaHasPopup, children, isOpen, size, }: RenderOpenProps) => React.JSX.Element;
-export interface RenderCloseProps {
-    "data-element"?: string;
-    /**
-     * @deprecated
-     * The tabIndex prop is no longer required for the close button.
-     */
-    tabIndex?: number;
-    onClick: (ev: React.KeyboardEvent<HTMLElement> | React.MouseEvent<HTMLElement>) => void;
-    ref: React.RefObject<HTMLButtonElement>;
-    "aria-label": string;
-    closeButtonDataProps?: Pick<TagProps, "data-role" | "data-element">;
-}
-export declare const renderClose: ({ "data-element": dataElement, onClick, ref, "aria-label": ariaLabel, closeButtonDataProps, }: RenderCloseProps) => React.JSX.Element;
-type Position = "left" | "right"
-/** @deprecated "center" is deprecated and will be removed in a future release */
- | "center";
-export interface PopoverContainerProps extends PaddingProps, TagProps {
-    /**
-     * A function that will render the open component.
-     *
-     * Please note that tabIndex is deprecated and no longer required for the open button.
-     *
-     * `({isOpen, data-element, onClick, ref, aria-label}) => ()`
-     *
-     */
-    renderOpenComponent?: (args: RenderOpenProps) => JSX.Element;
-    /**
-     * A function that will render the close component.
-     *
-     * Please note that tabIndex is deprecated and no longer required for the close button.
-     *
-     * `({data-element, tabIndex, onClick, ref, aria-label}) => ()`
-     */
-    renderCloseComponent?: (args: RenderCloseProps) => JSX.Element;
-    /** The content of the popover-container */
-    children?: React.ReactNode;
-    /**
-     * Sets rendering position of dialog.
-     * Please note the 'center' position is deprecated.
-     * */
-    position?: Position;
-    /** The popover offset from the reference element */
-    offset?: number;
-    /** Sets the popover container dialog header name */
-    title?: string;
-    /**
-     * Sets the border radius of the popover container
-     * @deprecated the `borderRadius` prop is being deprecated and will be removed in a future release.
-     * */
-    borderRadius?: BoxProps["borderRadius"];
-    /** Callback fires when close icon clicked */
-    onClose?: (ev: React.KeyboardEvent<HTMLElement> | React.MouseEvent<HTMLElement> | React.FocusEvent<HTMLElement> | Event) => void;
-    /** if `true` the popover-container is open */
-    open?: boolean;
-    /** Callback fires when open component is clicked */
-    onOpen?: (ev: React.KeyboardEvent<HTMLElement> | React.MouseEvent<HTMLElement>) => void;
-    /** if `true` the popover-container will cover open button */
-    shouldCoverButton?: boolean;
-    /** The id of the element that describe the dialog. */
-    ariaDescribedBy?: string;
-    /**
-     * @deprecated
-     * Accessible label passed to custom open button renderers. The default open button is named by its visible text.
-     * Please note this prop is no longer passed as the default button has text. If you are using an icon only button,
-     * set the aria-label on your custom button instead.
-     * */
-    openButtonAriaLabel?: string;
-    /**
-     * Close button aria label
-     * */
-    closeButtonAriaLabel?: string;
-    /**
-     * Data tag prop bag for close Button
-     */
-    closeButtonDataProps?: Pick<TagProps, "data-role" | "data-element">;
-    /** Container aria label */
-    containerAriaLabel?: string;
-    /** Disables the animation for the component */
-    disableAnimation?: boolean;
-    /** Flag to enable fullWidth Button styles */
-    hasFullWidth?: boolean;
-    /** Sets the roundness of the popover container corners*/
-    roundness?: "moderate" | "curved";
-    /** Sets the size of the popover container. */
-    size?: Size;
-}
-export type PopoverContainerHandle = {
-    focusButton: () => void;
-} | null;
-export declare const PopoverContainer: React.ForwardRefExoticComponent<PopoverContainerProps & React.RefAttributes<PopoverContainerHandle>>;
-export default PopoverContainer;

package/esm/components/popover-container/popover-container.component.js

@@ -1 +0,0 @@
-import{jsxs as e,Fragment as n,jsx as t}from"react/jsx-runtime";import{forwardRef as o,useState as r,useRef as i,useContext as l,useCallback as a,useEffect as s,useImperativeHandle as c,useMemo as u,useLayoutEffect as d}from"react";import{CSSTransition as p}from"react-transition-group";import{offset as m,flip as f,shift as b}from"@floating-ui/dom";import v from"../../hooks/useMediaQuery/useMediaQuery.js";import{PopoverContainerWrapperStyle as h,PopoverContainerContentStyle as _,PopoverContainerHeaderStyle as y,PopoverContainerTitleStyle as O,PopoverContainerHeaderContentStyle as g}from"./popover-container.style.js";import j from"../icon/icon.component.js";import"../icon/icon.style.js";import x from"../../__internal__/popover/popover.component.js";import P from"../../__internal__/utils/helpers/guid/index.js";import w from"../../style/utils/filter-styled-system-padding-props.js";import C from"../../hooks/__internal__/useClickAwayListener/useClickAwayListener.js";import k from"../../__internal__/utils/helpers/events/events.js";import A from"../../__internal__/focus-trap/focus-trap.component.js";import B from"../../__internal__/modal/modal.context.js";import D,{nextElementToFocus as L}from"../../hooks/__internal__/useFocusPortalContent/useFocusPortalContent.js";import E from"../../__internal__/utils/helpers/tags/tags.js";import S from"../flat-table/__internal__/flat-table.context.js";import{useGlobalHeader as z}from"../global-header/__internal__/global-header.context.js";import I from"../menu/__internal__/menu.context.js";import{Button as F}from"../button/__next__/button.component.js";import M from"../../hooks/__internal__/useLocale/useLocale.js";function $(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function R(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{},o=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),o.forEach((function(n){$(e,n,t[n])}))}return e}function T(e,n){return n=null!=n?n:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):function(e){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);n.push.apply(n,t)}return n}(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})),e}const W=({onClick:e,"data-element":n,ref:o,id:r,"aria-expanded":i,"aria-haspopup":l,children:a,isOpen:s,size:c})=>t(F,{onClick:e,"data-element":n,ref:o,"aria-haspopup":l,"aria-expanded":i,id:r,variantType:"secondary",className:s?"active":"",size:c,children:a}),K="undefined"!=typeof window?d:s,H=({"data-element":e,onClick:n,ref:o,"aria-label":r,closeButtonDataProps:i})=>t(F,T(R({onClick:n,ref:o,"aria-label":r,variantType:"subtle",size:"small"},E("close",R({"data-element":e},i))),{py:0,px:2,children:t(j,{type:"cross",size:"medium"})}));function Q(e,n,t){return u((()=>[m(e?({rects:e})=>({mainAxis:-e.reference.height}):t),f({fallbackStrategy:"initialPlacement"}),...n?[b()]:[]]),[e,n,t])}const G=o(((o,u)=>{var{children:d,title:m,borderRadius:f,position:b="right",offset:F=6,open:$,onOpen:G,onClose:N,renderOpenComponent:U=W,renderCloseComponent:q=H,shouldCoverButton:J=!1,ariaDescribedBy:V,openButtonAriaLabel:X,closeButtonAriaLabel:Y="close",containerAriaLabel:Z,closeButtonDataProps:ee,disableAnimation:ne=!1,hasFullWidth:te=!1,roundness:oe="moderate",size:re="medium"}=o,ie=function(e,n){if(null==e)return{};var t,o,r=function(e,n){if(null==e)return{};var t,o,r={},i=Object.keys(e);for(o=0;o<i.length;o++)t=i[o],n.indexOf(t)>=0||(r[t]=e[t]);return r}(e,n);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(o=0;o<i.length;o++)t=i[o],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(r[t]=e[t])}return r}(o,["children","title","borderRadius","position","offset","open","onOpen","onClose","renderOpenComponent","renderCloseComponent","shouldCoverButton","ariaDescribedBy","openButtonAriaLabel","closeButtonAriaLabel","containerAriaLabel","closeButtonDataProps","disableAnimation","hasFullWidth","roundness","size"]);const le=void 0!==$,[ae,se]=r(!1),ce=i(null),ue=i(null),[de,pe]=r(null),[me,fe]=r(null),be=i(P()),ve=i(null),he=m?`PopoverContainer_${be.current}`:void 0,{inMenu:_e}=l(I),ye=M(),Oe=le?$:ae,ge=!v("screen and (prefers-reduced-motion: no-preference)"),je=Q(J,"center"===b,F),{isInFlatTable:xe}=l(S),Pe=a((e=>{le||se(!1),null==N||N(e)}),[le,N]),we=a((e=>{var n;!k.composedPath(e).find((e=>e instanceof HTMLElement&&"input"===e.getAttribute("data-element")&&"true"===e.getAttribute("aria-expanded")))&&Oe&&k.isEscKey(e)&&(Pe(e),null===(n=ue.current)||void 0===n||n.focus({preventScroll:!0}))}),[Pe,Oe]);s((()=>(document.addEventListener("keydown",we),()=>{document.removeEventListener("keydown",we)})),[we]),s((()=>{var e;!J&&Oe&&(null===(e=ve.current)||void 0===e||e.focus({preventScroll:!0}))}),[Oe,J,ve]),D(J?void 0:ve,J?void 0:ue,Pe);const Ce={tabIndex:0,"aria-expanded":Oe,"aria-haspopup":"dialog",isOpen:Oe,"data-element":"popover-container-open-component",onClick:e=>{le||se(!Oe),Oe?null==N||N(e):null==G||G(e)},ref:ue,id:Oe?void 0:he,"data-popover-container-button":"true",children:e(n,{children:[ye.popoverContainer.openButton.text(),t(j,{type:"ellipsis_vertical"})]}),size:re},ke={"data-element":"popover-container-close-component",tabIndex:0,onClick:e=>{var n;Pe(e),null===(n=ue.current)||void 0===n||n.focus({preventScroll:!0})},ref:ce,"aria-label":Y,closeButtonDataProps:ee},Ae=C((e=>{le||se(!1),Oe&&(null==N||N(e))}),"mousedown"),[Be,De]=r(!1),{isWithinGlobalHeader:Le}=z();c(u,(()=>({focusButton(){var e;null===(e=ue.current)||void 0===e||e.focus()}})),[]);const Ee=()=>t(_,T(R({"data-element":"popover-container-content",role:"dialog","aria-labelledby":he,"aria-label":Z,"aria-describedby":V,$popoverOffset:F,$roundness:oe,$borderRadius:f,$size:re,ref:ve,tabIndex:-1,disableAnimation:ne||ge,zIndex:Le?1e4:2e3,$inMenu:_e},w(ie)),{children:e(I.Provider,{value:{inMenu:!1},children:[e(y,{onKeyDown:e=>{var n;!J&&"Tab"===e.key&&e.shiftKey&&ce.current===document.activeElement&&(e.preventDefault(),Pe(e),null===(n=ue.current)||void 0===n||n.focus())},children:[!m&&q(ke),m?t(O,{id:he,"data-element":"popover-container-title",children:m}):t(g,{children:d}),m&&q(ke)]}),m&&d]})}));K((()=>{var e;const n=_e?null==de?void 0:de.closest("[data-component='global-header']"):null,t=_e?null==de||null===(e=de.closest("[data-component='menu']"))||void 0===e?void 0:e.parentElement:null,o=null==de?void 0:de.closest("[data-component='tokens-wrapper']");var r,i;fe(null!==(i=null!==(r=null!=n?n:t)&&void 0!==r?r:o)&&void 0!==i?i:null)}),[_e,de]);const Se=null!=me?me:de;return e(h,T(R({onMouseDown:Ae,$hasFullWidth:te},E("popover-container",ie)),{children:[t("div",{ref:pe,children:U(Ce)}),t(p,{nodeRef:ve,timeout:{exit:ne?0:300},in:Oe,unmountOnExit:!0,onEntered:J?()=>De(!0):void 0,onExiting:J?()=>De(!1):void 0,children:t(x,{reference:{current:de},placement:"center"===b?"bottom":"right"===b?"bottom-start":"bottom-end",popoverStrategy:ne||ge?"fixed":"absolute",middleware:je,childRefOverride:ve,disableBackgroundUI:xe,portalTarget:Se,children:J?t(B.Provider,{value:{isAnimationComplete:Be},children:t(A,{wrapperRef:ve,isOpen:Oe,children:Ee()})}):e(n,{children:[Ee(),t("div",{"data-element":"tab-guard-bottom","data-focus-guard":!0,tabIndex:0,onFocus:e=>{if(Oe){Pe(e);const{current:t}=ue,{current:o}=ve;var n;t&&o&&(null!==(n=L(t,o))&&void 0!==n?n:t).focus()}}})]})})})]}))}));export{G as PopoverContainer,G as default,H as renderClose,W as renderOpen};

package/esm/components/popover-container/popover-container.style.d.ts

@@ -1,23 +0,0 @@
-import { TransitionStatus } from "react-transition-group";
-import { PopoverContainerProps } from "./popover-container.component";
-type PopoverContainerWrapperProps = {
-    $hasFullWidth?: boolean;
-};
-declare const PopoverContainerWrapperStyle: import("styled-components").StyledComponent<"div", any, PopoverContainerWrapperProps, never>;
-declare const PopoverContainerTitleStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
-declare const PopoverContainerHeaderContentStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
-declare const PopoverContainerHeaderStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
-type PopoverContainerContentStyleProps = {
-    animationState?: TransitionStatus;
-    disableAnimation?: boolean;
-    zIndex?: number;
-    $borderRadius?: PopoverContainerProps["borderRadius"];
-    $roundness: PopoverContainerProps["roundness"];
-    $popoverOffset?: number;
-    $inMenu?: boolean;
-    $size: PopoverContainerProps["size"];
-};
-declare const PopoverContainerContentStyle: import("styled-components").StyledComponent<"div", any, {
-    theme: object;
-} & PopoverContainerContentStyleProps, "theme">;
-export { PopoverContainerWrapperStyle, PopoverContainerHeaderStyle, PopoverContainerHeaderContentStyle, PopoverContainerContentStyle, PopoverContainerTitleStyle, };

package/esm/components/popover-container/popover-container.style.js

@@ -1 +0,0 @@
-import o,{css as t}from"styled-components";import{padding as e}from"styled-system";import r from"../../style/themes/apply-base-theme.js";import{StyledForm as a,StyledFormContent as i,StyledFormFooter as n}from"../form/form.style.js";const s=o.div.withConfig({displayName:"popover-container.style__PopoverContainerWrapperStyle",componentId:"carbon_v162_9_1__sc-e605c9f0-0"})(["position:relative;display:inline-block;",""],(({$hasFullWidth:o})=>o&&t(["width:100%;"]))),l=o.div.withConfig({displayName:"popover-container.style__PopoverContainerTitleStyle",componentId:"carbon_v162_9_1__sc-e605c9f0-1"})(["flex:1;min-width:0;font:var(--global-font-static-subheading-l);"]),d=o.div.withConfig({displayName:"popover-container.style__PopoverContainerHeaderContentStyle",componentId:"carbon_v162_9_1__sc-e605c9f0-2"})(["order:-1;flex:1;min-width:0;"]),p=o.div.withConfig({displayName:"popover-container.style__PopoverContainerHeaderStyle",componentId:"carbon_v162_9_1__sc-e605c9f0-3"})(["display:flex;align-items:flex-start;justify-content:flex-end;width:100%;&:has(","){margin-bottom:8px;}"],l),c=o.div.attrs(r).withConfig({displayName:"popover-container.style__PopoverContainerContentStyle",componentId:"carbon_v162_9_1__sc-e605c9f0-4"})(["background:var(--popover-bg-default);"," "," "," "," "," box-shadow:var(--global-depth-lvl1);min-width:300px;position:absolute;z-index:var(--adaptiveSidebarModalBackdrop,",");"," :focus{outline:none;}&:has(",".sticky){display:flex;flex-direction:column;padding:0;",".sticky{","{flex-grow:1;min-height:0;overflow-y:auto;}","{border-bottom-right-radius:var(--global-radius-action-m);border-bottom-left-radius:var(--global-radius-action-m);}}}"],(({$inMenu:o})=>o&&t(["color:var(--page-content-txt-default);"])),(({$roundness:o})=>t([""," ",""],"curved"===o&&t(["border-radius:var(--global-radius-container-xl);"]),"moderate"===o&&t(["border-radius:var(--global-radius-container-l);"]))),(({$size:o})=>t([""," "," ",""],"small"===o&&t(["padding:var(--global-space-comp-xs);"]),"medium"===o&&t(["padding:var(--global-space-comp-s);"]),"large"===o&&t(["padding:var(--global-space-comp-m);"]))),e,(({$borderRadius:o})=>{if(!o)return"";const e=o.split(" ").filter(Boolean);return t(["border-radius:",";"],e.map((o=>`var(--${o.trim()})`)).join(" "))}),(({zIndex:o})=>o),(({disableAnimation:o,$popoverOffset:e})=>o?t(["opacity:1;transform:none;"]):t(["&.enter{opacity:0;transform:translateY( ","px );}&.enter-done{opacity:1;transform:translateY(0);transition-property:opacity,transform;transition-duration:0.3s;transition-timing-function:cubic-bezier(0.25,0.25,0,1.5);}&.exit{opacity:0;transform:translateY(-8px);transition-property:opacity,transform;transition-duration:0.3s;transition-timing-function:cubic-bezier(0.25,0.25,0,1.5);}&.exit-done{opacity:0;transform:translateY(0);}"],e?-8:0)),a,a,i,n);export{c as PopoverContainerContentStyle,d as PopoverContainerHeaderContentStyle,p as PopoverContainerHeaderStyle,l as PopoverContainerTitleStyle,s as PopoverContainerWrapperStyle};

package/esm/components/portal/__internal__/safe-portal.d.ts

@@ -1,14 +0,0 @@
-export interface SafePortalProps {
-    children: React.ReactNode;
-    id: string;
-    className: string;
-    attributes: Record<string, string>;
-}
-/**
- * Renders content within a React Portal.
- *
- * Portal is attached to a DOM node with a matching id. If this node doesn't exist, the component
- * will trigger the creation of one, then re-render.
- */
-declare const SafePortal: ({ children, id, className, attributes, }: SafePortalProps) => import("react").ReactPortal | null;
-export default SafePortal;

package/esm/components/portal/__internal__/safe-portal.js

@@ -1 +0,0 @@
-import{useState as t,useEffect as e}from"react";import{createPortal as r}from"react-dom";const o=({children:o,id:n,className:s,attributes:c})=>{const[u,i]=t(null),[l,m]=t(!1);return e((()=>{let t=document.getElementById(n);const e=!t;return e&&(t=document.createElement("div"),t.setAttribute("id",n),document.body.appendChild(t)),m(e),i(t),()=>{e&&(null==t||t.remove())}}),[n]),e((()=>{if(u&&l){u.setAttribute("class",s);for(const[t,e]of Object.entries(c))u.setAttribute(t,e);return()=>{u.removeAttribute("class");for(const t of Object.keys(c))u.removeAttribute(t)}}}),[c,s,u,l]),u?r(o,u):null};export{o as default};

package/esm/components/portal/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from "./portal";
-export type { PortalProps } from "./portal";

package/esm/components/portal/index.js

@@ -1 +0,0 @@
-export{Portal as default}from"./portal.js";

package/esm/components/portal/portal.d.ts

@@ -1,23 +0,0 @@
-import React from "react";
-export interface PortalProps {
-    /** The content of the portal. */
-    children?: React.ReactNode;
-    /**
-     * @private
-     * @internal
-     * @ignore
-     * Sets className for component. INTERNAL USE ONLY. */
-    className?: string;
-    /** Id attribute attached to portal container. */
-    id?: string;
-    /** Callback function triggered when parent element is scrolled or window resized. */
-    onReposition?: () => void;
-    /** A flag to ensure the portal content will remain interactive with by both mouse
-     * users and screenreader users, even if a modal is opened outside of or on top of
-     * the portal.
-     * To be used with caution.
-     */
-    inertOptOut?: boolean;
-}
-export declare const Portal: ({ children, className, id: externalId, onReposition, inertOptOut, }: PortalProps) => React.JSX.Element;
-export default Portal;

package/esm/components/portal/portal.js

@@ -1 +0,0 @@
-import{jsx as e}from"react/jsx-runtime";import{useRef as t,useContext as r,useState as o,useEffect as n}from"react";import a,{css as i}from"styled-components";import c from"./__internal__/safe-portal.js";import s from"./portal.style.js";import p from"../../__internal__/utils/helpers/guid/index.js";import l from"../../style/themes/apply-base-theme.js";import d from"../../style/design-tokens/carbon-scoped-tokens-provider/carbon-scoped-tokens-provider.component.js";import b from"../tokens-wrapper/__internal__/context/tokens-wrapper.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 u(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){m(e,t,r[t])}))}return e}const f=a.div.attrs(l).withConfig({displayName:"portal__Container",componentId:"carbon_v162_9_1__sc-1b79295f-0"})(["",""],(({theme:e})=>i(["{position:relative;z-index:",";}"],e.zIndex.aboveAll))),v=({children:a,className:i,id:l,onReposition:m,inertOptOut:v})=>{const{current:O}=t(p()),y=null!=l?l:O,j=t(null),{wrapperId:h}=r(b),[w,_]=o();return n((()=>(m&&(m(),window.addEventListener("resize",m)),()=>{m&&window.removeEventListener("resize",m)})),[m]),n((()=>{var e;const t=null===(e=j.current)||void 0===e?void 0:e.closest("[data-carbon-theme]");if(!t)return;var r;_(null!==(r=t.getAttribute("data-carbon-theme"))&&void 0!==r?r:void 0);const o=new MutationObserver((()=>{var e;_(null!==(e=t.getAttribute("data-carbon-theme"))&&void 0!==e?e:void 0)}));return o.observe(t,{attributes:!0,attributeFilter:["data-carbon-theme"]}),()=>o.disconnect()}),[]),e(s,{"data-role":"data-portal-entrance","data-portal-entrance":y,ref:j,children:e(c,{id:y,className:`carbon-portal ${null!=i?i:""}`.trim(),attributes:u({"data-portal-exit":y,"data-role":"carbon-portal-exit"},h&&{"data-tokens-wrapper-id":h},w&&{"data-carbon-theme":w},v&&{"data-not-inert":"true"}),children:e(d,(g=u({className:"carbon-portal-scoped-tokens-provider","data-role":"carbon-portal-scoped-tokens-provider","data-tokens-wrapper-id":h},w&&{"data-carbon-theme":w}),k={children:v?e(f,{children:a}):a},k=null!=k?k:{},Object.getOwnPropertyDescriptors?Object.defineProperties(g,Object.getOwnPropertyDescriptors(k)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(k)).forEach((function(e){Object.defineProperty(g,e,Object.getOwnPropertyDescriptor(k,e))})),g))})});var g,k};export{v as Portal,v as default};

package/esm/components/portal/portal.style.d.ts

@@ -1,2 +0,0 @@
-declare const StyledPortalEntrance: import("styled-components").StyledComponent<"span", any, {}, never>;
-export default StyledPortalEntrance;

package/esm/components/portal/portal.style.js

@@ -1 +0,0 @@
-import t from"styled-components";const o=t.span.withConfig({displayName:"portal.style__StyledPortalEntrance",componentId:"carbon_v162_9_1__sc-9fd1b647-0"})(["display:none;height:0;width:0;"]);export{o as default};

package/esm/components/portrait/__internal__/get-properties.d.ts

@@ -1,22 +0,0 @@
-import type { PortraitSizes, PortraitShapes, PortraitVariant } from "../portrait.component";
-type GetPortraitColors = {
-    backgroundColor: string;
-    color: string;
-};
-type GetPortraitDimensions = {
-    height: string;
-    width: string;
-};
-declare const getColoursForPortrait: (backgroundColour: string | undefined, darkBackground?: boolean, largeText?: boolean, 
-/**
- * Whether to use strict contrast (i.e., WCAG AAA). If this is false, it uses WCAG AA contrast
- * ratios (4.5:1 for normal text, 3:1 for large text). If true, it uses 7:1 for normal text and
- * 4.5:1 for large text.
- */
-strict?: boolean, foregroundColor?: string | undefined) => string;
-export declare const getPortraitBorderRadius: (shape?: PortraitShapes, size?: PortraitSizes) => string;
-export declare const getPortraitColors: (variant?: PortraitVariant) => GetPortraitColors;
-export declare const getPortraitDimensions: (size: PortraitSizes) => GetPortraitDimensions;
-export declare const getPortraitFontSize: (size: PortraitSizes) => string;
-export declare const getPortraitIconFontSize: (size: PortraitSizes) => string;
-export default getColoursForPortrait;

package/esm/components/portrait/__internal__/get-properties.js

@@ -1 +0,0 @@
-import r from"../../../style/utils/get-accessible-foreground-color.js";const e=(e,i=!1,o=!1,a=!1,l=void 0)=>{let s="var(--colorsUtilityYin090)",t="var(--colorsUtilityReadOnly400)";return!i||e||l||(t="var(--colorsUtilityYin090)",s="var(--colorsUtilityReadOnly600)"),e&&(t=e,s=r(e,o,a)),l&&(s=l),`background-color: ${t}; color: ${s};`},i=(r,e)=>"square"===r?"XS"===e||"S"===e?"var(--global-radius-container-xs)":"M"===e||"ML"===e||"L"===e?"var(--global-radius-container-m)":"var(--global-radius-container-l)":"var(--global-radius-container-circle)",o=r=>{const e={backgroundColor:"inherit",color:"inherit"};return"black"===r?(e.backgroundColor="var(--profile-bg-def)",e.color="var(--profile-label-default)"):(e.backgroundColor=`var(--profile-swatches-${r}-bg-default)`,e.color=`var(--profile-swatches-${r}-label-default)`),e},a=r=>({height:`var(--profile-size-outside-${r.toLowerCase()})`,width:`var(--profile-size-outside-${r.toLowerCase()})`}),l=r=>`var(--profile-font-initials-${r.toLowerCase()})`,s=r=>{switch(r){case"XS":return"var(--profile-size-inside-xs)";case"S":return"var(--profile-size-inside-s)";case"ML":return"var(--profile-size-inside-ml)";case"L":return"var(--profile-size-inside-l)";case"XL":return"var(--profile-size-inside-xl)";case"XXL":return"var(--profile-size-inside-xxl)";default:return"var(--profile-size-inside-m)"}};export{e as default,i as getPortraitBorderRadius,o as getPortraitColors,a as getPortraitDimensions,l as getPortraitFontSize,s as getPortraitIconFontSize};

package/esm/components/portrait/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from "./portrait.component";
-export type { PortraitProps } from "./portrait.component";

package/esm/components/portrait/index.js

@@ -1 +0,0 @@
-export{Portrait as default}from"./portrait.component.js";

package/esm/components/portrait/portrait.component.d.ts

@@ -1,75 +0,0 @@
-import React from "react";
-import { MarginProps } from "styled-system";
-import { IconType } from "../icon";
-import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
-export type PortraitShapes = "circle" | "square";
-export type PortraitSizes = "XS" | "S" | "M" | "ML" | "L" | "XL" | "XXL";
-export type PortraitVariant = "black" | "blue" | "teal" | "green" | "lime" | "orange" | "red" | "pink" | "purple" | "slate" | "gray";
-export interface PortraitProps extends MarginProps, TagProps {
-    /** @private @ignore */
-    className?: string;
-    /** A custom image URL. */
-    src?: string;
-    /** The size of the Portrait. */
-    size?: PortraitSizes;
-    /** @private @ignore */
-    name?: string;
-    /** The `alt` HTML string. */
-    alt?: string;
-    /** The shape of the Portrait. */
-    shape?: PortraitShapes;
-    /** Icon to be rendered as a fallback. */
-    iconType?: IconType;
-    /** The initials to render in the Portrait. */
-    initials?: string;
-    /** Use a dark background.
-     * @deprecated This prop is deprecated and will be removed in a future release.
-     */
-    darkBackground?: boolean;
-    /** Prop for `onClick` events. */
-    onClick?: (ev: React.MouseEvent<HTMLElement>) => void;
-    /** [Legacy] The message to be displayed within the tooltip
-     * @deprecated This prop is deprecated and will be removed in a future release.
-     */
-    tooltipMessage?: React.ReactNode;
-    /** [Legacy] The id attribute to use for the tooltip
-     * @deprecated This prop is deprecated and will be removed in a future release.
-     */
-    tooltipId?: string;
-    /** [Legacy] Whether to to show the Tooltip
-     * @deprecated This prop is deprecated and will be removed in a future release.
-     */
-    tooltipIsVisible?: boolean;
-    /** [Legacy] Sets position of the tooltip
-     * @deprecated This prop is deprecated and will be removed in a future release.
-     */
-    tooltipPosition?: "top" | "bottom" | "left" | "right";
-    /** [Legacy] Defines the message type
-     * @deprecated This prop is deprecated and will be removed in a future release.
-     */
-    tooltipType?: string;
-    /** [Legacy] Defines the size of the tooltip content
-     * @deprecated This prop is deprecated and will be removed in a future release.
-     */
-    tooltipSize?: "medium" | "large";
-    /** [Legacy] Override background color of the Tooltip, provide any color from palette or any valid css color value.
-     * @deprecated This prop is deprecated and will be removed in a future release.
-     */
-    tooltipBgColor?: string;
-    /** [Legacy] Override font color of the Tooltip, provide any color from palette or any valid css color value.
-     * @deprecated This prop is deprecated and will be removed in a future release.
-     */
-    tooltipFontColor?: string;
-    /** The hex code of the background colour
-     * @deprecated This prop is deprecated and will be removed in a future release.
-     */
-    backgroundColor?: string;
-    /** The hex code of the foreground colour. This will only take effect if use in conjunction with `backgroundColor`
-     * @deprecated This prop is deprecated and will be removed in a future release.
-     */
-    foregroundColor?: string;
-    /** Color variant*/
-    variant?: PortraitVariant;
-}
-export declare const Portrait: ({ alt, backgroundColor, foregroundColor, className, name, darkBackground, iconType, initials, shape, size, src, onClick, tooltipMessage, tooltipId, tooltipIsVisible, tooltipPosition, tooltipType, tooltipSize, tooltipBgColor, tooltipFontColor, variant, ...rest }: PortraitProps) => React.JSX.Element;
-export default Portrait;

package/esm/components/portrait/portrait.component.js

@@ -1 +0,0 @@
-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};

package/esm/components/portrait/portrait.config.d.ts

@@ -1,9 +0,0 @@
-import { PortraitShapes, PortraitSizes } from "./portrait.component";
-export declare const PORTRAIT_SHAPES: PortraitShapes[];
-export declare const PORTRAIT_SIZES: PortraitSizes[];
-type PortraitSizeParams = Record<PortraitSizes, {
-    dimensions: number;
-    iconDimensions: number;
-}>;
-export declare const PORTRAIT_SIZE_PARAMS: PortraitSizeParams;
-export {};

package/esm/components/portrait/portrait.config.js

@@ -1 +0,0 @@
-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};

package/esm/components/portrait/portrait.style.d.ts

@@ -1,23 +0,0 @@
-import React from "react";
-import { MarginProps } from "styled-system";
-import { PortraitSizes, PortraitShapes, PortraitVariant } from "./portrait.component";
-type StyledPortraitProps = {
-    backgroundColor?: string;
-    foregroundColor?: string;
-    darkBackground?: boolean;
-    size: PortraitSizes;
-    shape?: PortraitShapes;
-    hasValidImg?: boolean;
-    onClick?: (ev: React.MouseEvent<HTMLElement>) => void;
-    variant?: PortraitVariant;
-};
-export declare const StyledPortraitInitials: import("styled-components").StyledComponent<"div", any, Pick<StyledPortraitProps, "size" | "variant">, never>;
-export declare const StyledCustomImg: import("styled-components").StyledComponent<"img", any, {}, never>;
-export declare const StyledIcon: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<import("../icon").IconProps & React.RefAttributes<HTMLSpanElement>>, any, {
-    $portraitSize: PortraitSizes;
-    variant?: PortraitVariant;
-}, never>;
-export declare const StyledPortraitContainer: import("styled-components").StyledComponent<"div", any, {
-    theme: object;
-} & StyledPortraitProps & MarginProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>, "theme">;
-export {};

package/esm/components/portrait/portrait.style.js

@@ -1 +0,0 @@
-import"react";import t from"styled-components";import{margin as o}from"styled-system";import i from"../icon/icon.component.js";import"../icon/icon.style.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 c=t.div.withConfig({displayName:"portrait.style__StyledPortraitInitials",componentId:"carbon_v162_9_1__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))),m=t.img.withConfig({displayName:"portrait.style__StyledCustomImg",componentId:"carbon_v162_9_1__sc-67607789-1"})(["height:inherit;min-width:inherit;"]),p=t(i).withConfig({displayName:"portrait.style__StyledIcon",componentId:"carbon_v162_9_1__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:"carbon_v162_9_1__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:o,size:i,foregroundColor:e,variant:n})=>!n&&r(o,t,!["XS","S"].includes(i),!0,e)),(({hasValidImg:t,size:o})=>t&&`max-width: ${l(o).width};`),(({size:t})=>l(t).width),(({size:t})=>l(t).height),(({shape:t,size:o})=>d(t,o)),(({onClick:t})=>t&&"cursor: pointer"),o);export{m as StyledCustomImg,p as StyledIcon,h as StyledPortraitContainer,c as StyledPortraitInitials};