carbon-react 162.12.0-beta.1 → 162.13.0

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

@@ -0,0 +1,12 @@
+import React from "react";
+import { TextInputProps } from "../textbox/__internal__/__next__";
+export interface PasswordProps extends Omit<TextInputProps, "data-component"> {
+    /** When `true` input `type` is `password` and text is obscured. */
+    forceObscurity?: boolean;
+    /** @deprecated `characterLimit` has been deprecated and will be removed in a future release. */
+    characterLimit?: number;
+    /** @deprecated `prefix` has been deprecated and will be removed in a future release. */
+    prefix?: string;
+}
+export declare const Password: ({ id, disabled, forceObscurity, characterLimit, inputIcon, size, ...rest }: PasswordProps) => React.JSX.Element;
+export default Password;

package/esm/components/password/password.component.js

@@ -0,0 +1 @@
+import{jsxs as e,Fragment as r,jsx as t}from"react/jsx-runtime";import{useRef as o,useState as i}from"react";import n from"./password.style.js";import{Button as a}from"../button/__next__/button.component.js";import l from"../../__internal__/utils/helpers/guid/index.js";import s from"../../__internal__/utils/helpers/tags/tags.js";import c from"../../hooks/__internal__/useLocale/useLocale.js";import{Divider as p}from"../divider/divider.component.js";import{TextInput as d}from"../textbox/__internal__/__next__/text-input.component.js";function u(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function b(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},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(r){u(e,r,t[r])}))}return e}const f=u=>{var f,m,v,y,O,j,w,_,{id:h,disabled:g,forceObscurity:P=!1,characterLimit:x,inputIcon:L,size:S}=u,k=function(e,r){if(null==e)return{};var t,o,i=function(e,r){if(null==e)return{};var t,o,i={},n=Object.keys(e);for(o=0;o<n.length;o++)t=n[o],r.indexOf(t)>=0||(i[t]=e[t]);return i}(e,r);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);for(o=0;o<n.length;o++)t=n[o],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(i[t]=e[t])}return i}(u,["id","disabled","forceObscurity","characterLimit","inputIcon","size"]);const z=o(h||l()),D=c(),[I,E]=i(!1),H=!P&&I;return e(r,{children:[t(d,(C=b({"data-element":"styled-password-container",id:z.current,autoComplete:"off",type:H?"text":"password",disabled:g,size:S},k,s("password",k)),M={inputIcon:e(r,{children:[t(p,{"aria-hidden":!0,"data-role":"password-divider",height:`calc(100% - var(--global-space-comp-${(null==S?void 0:S.charAt(0))||"m"}))`,p:0,type:"vertical"}),t(a,{"aria-label":H?null===(m=D.password)||void 0===m||null===(f=m.ariaLabelHide)||void 0===f?void 0:f.call(m):null===(y=D.password)||void 0===y||null===(v=y.ariaLabelShow)||void 0===v?void 0:v.call(y),"aria-controls":z.current,onClick:()=>E(!I),variantType:"subtle",iconType:H?"hide":"view",iconPosition:"before",size:S,disabled:P||g,children:H?null===(j=D.password)||void 0===j||null===(O=j.buttonLabelHide)||void 0===O?void 0:O.call(j):null===(_=D.password)||void 0===_||null===(w=_.buttonLabelShow)||void 0===w?void 0:w.call(_)})]})},M=null!=M?M:{},Object.getOwnPropertyDescriptors?Object.defineProperties(C,Object.getOwnPropertyDescriptors(M)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(M)).forEach((function(e){Object.defineProperty(C,e,Object.getOwnPropertyDescriptor(M,e))})),C)),t(n,{role:"status","aria-live":"polite",children:H?D.password.ariaLiveShownMessage():D.password.ariaLiveHiddenMessage()})]});var C,M};export{f as Password,f as default};

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

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

package/esm/components/password/password.style.js

@@ -0,0 +1 @@
+import o from"styled-components";import s from"../../style/utils/visually-hidden.js";const t=o.p.withConfig({displayName:"password.style__HiddenAriaLive",componentId:"carbon_v162_12_0__sc-213d9b67-0"})(["",""],s);export{t as default};

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

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

package/esm/components/pill/index.js

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

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

@@ -0,0 +1,46 @@
+import React from "react";
+import { StyledPillProps } from "./pill.style";
+import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
+export interface PillProps extends StyledPillProps, TagProps {
+    /** The content to display inside of the pill.  */
+    children: string;
+    /**
+     * Determines the colour variant of the pill.
+     * @deprecated Use `variant` prop instead.
+     */
+    colorVariant?: "neutral" | "negative" | "positive" | "warning" | "information" | "neutralWhite";
+    /** Sets the colour variant of a status pill. */
+    variant?: "grey" | "green" | "red" | "orange" | "blue" | "purple" | "teal" | "lime" | "pink" | "slate";
+    /**
+     * Apply inverse styling for use on dark backgrounds.
+     * @deprecated Use `inverse` prop instead.
+     */
+    isDarkBackground?: boolean;
+    /** Whether to apply inverse styling to the pill. */
+    inverse?: boolean;
+    /**
+     * A React node displayed to the left of the pill content.
+     * Recommended for use with `size="L"` pills.
+     */
+    icon?: React.ReactNode;
+    /** Fills the pill background with colour. When fill is false only the border is coloured. */
+    fill?: boolean;
+    /** Callback function for when the pill is clicked. */
+    onClick?: (ev: React.MouseEvent<HTMLSpanElement>) => void;
+    /**
+     * Callback fired when the remove button is activated.
+     * Receives the click event.
+     */
+    onDelete?: (ev?: React.KeyboardEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Sets the type of pill in use.
+     * @deprecated The pillRole prop is no longer used. Pill styling is determined by the `variant`, `fill`, and `inverse` props.
+     */
+    pillRole?: "tag" | "status";
+    /** Sets custom aria-label attribute on the remove button */
+    ariaLabelOfRemoveButton?: string;
+    /** @private @ignore title attribute passed down to underlying element */
+    title?: string;
+}
+export declare const Pill: ({ wrapText, borderColor, colorVariant, variant, isDarkBackground, inverse, icon, children, fill, maxWidth, onClick, onDelete, pillRole, size, ariaLabelOfRemoveButton, ...rest }: PillProps) => React.JSX.Element;
+export default Pill;

package/esm/components/pill/pill.component.js

@@ -0,0 +1 @@
+import{jsxs as e,jsx as r}from"react/jsx-runtime";import"react";import t,{StyledDeleteButton as o}from"./pill.style.js";import n from"../icon/icon.component.js";import"../icon/icon.style.js";import i from"../../__internal__/utils/helpers/tags/tags.js";import l from"../../hooks/__internal__/useLocale/useLocale.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}const c={neutral:"grey",positive:"green",negative:"red",warning:"orange",information:"blue",neutralWhite:"grey"},s=s=>{var{wrapText:p,borderColor:u,colorVariant:b,variant:f,isDarkBackground:y=!1,inverse:O=!1,icon:m,children:g,fill:j=!1,maxWidth:d,onClick:v,onDelete:h,pillRole:w,size:P="M",ariaLabelOfRemoveButton:k}=s,x=function(e,r){if(null==e)return{};var t,o,n=function(e,r){if(null==e)return{};var t,o,n={},i=Object.keys(e);for(o=0;o<i.length;o++)t=i[o],r.indexOf(t)>=0||(n[t]=e[t]);return n}(e,r);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(o=0;o<i.length;o++)t=i[o],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(n[t]=e[t])}return n}(s,["wrapText","borderColor","colorVariant","variant","isDarkBackground","inverse","icon","children","fill","maxWidth","onClick","onDelete","pillRole","size","ariaLabelOfRemoveButton"]);const D=l(),$=null!=w?w:"tag",_=((e,r)=>void 0!==e?e:void 0!==r?c[r]:"grey")(f,b);return e(t,(C=function(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},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(r){a(e,r,t[r])}))}return e}({$inFill:j,$colorVariant:_,$inverse:O||y,$isDeletable:!!h,$pillRole:$,$size:P,$borderColor:u,onClick:v,$maxWidth:d,$wrapText:p},x,i("pill",x)),S=null!=(S={children:[m,g,h&&r(o,{type:"button",onClick:e=>h(e),"data-element":"close","aria-label":k||D.pill.remove(g),children:r(n,{type:"cross"})})]})?S:{},Object.getOwnPropertyDescriptors?Object.defineProperties(C,Object.getOwnPropertyDescriptors(S)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(S)).forEach((function(e){Object.defineProperty(C,e,Object.getOwnPropertyDescriptor(S,e))})),C));var C,S};export{s as Pill,s as default};

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

@@ -0,0 +1,25 @@
+interface StyledPillInnerConfigProps {
+    varietyColor: string;
+    varietyColorAlt: string;
+    varietyBorderColor: string;
+    buttonFocus: string;
+    buttonFocusAlt: string;
+    content: string;
+    contentAlt: string;
+}
+interface StyledPillConfig {
+    status: {
+        grey: StyledPillInnerConfigProps;
+        green: StyledPillInnerConfigProps;
+        red: StyledPillInnerConfigProps;
+        orange: StyledPillInnerConfigProps;
+        blue: StyledPillInnerConfigProps;
+        purple: StyledPillInnerConfigProps;
+        teal: StyledPillInnerConfigProps;
+        lime: StyledPillInnerConfigProps;
+        pink: StyledPillInnerConfigProps;
+        slate: StyledPillInnerConfigProps;
+    };
+}
+declare const _default: (inverse: boolean) => StyledPillConfig;
+export default _default;

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

@@ -0,0 +1 @@
+var l=l=>{const e=l?"var(--pill-generic-inverse-label-default)":"var(--pill-generic-label-default)",r=l?"var(--pill-generic-inverse-label-alt-default)":"var(--pill-generic-label-alt-default)";return{status:{grey:{varietyColor:l?"var(--pill-gray-inverse-bg-default)":"var(--pill-gray-bg-default)",varietyColorAlt:l?"var(--pill-gray-inverse-bg-alt-default)":"var(--pill-gray-bg-alt-default)",varietyBorderColor:l?"var(--pill-gray-inverse-border-default)":"var(--pill-gray-border-default)",buttonFocus:l?"var(--pill-gray-inverse-bg-hover)":"var(--pill-gray-bg-hover)",buttonFocusAlt:l?"var(--pill-gray-inverse-bg-alt-hover)":"var(--pill-gray-bg-alt-hover)",content:e,contentAlt:r},green:{varietyColor:l?"var(--pill-green-inverse-bg-default)":"var(--pill-green-bg-default)",varietyColorAlt:l?"var(--pill-green-inverse-bg-alt-default)":"var(--pill-green-bg-alt-default)",varietyBorderColor:l?"var(--pill-green-inverse-border-default)":"var(--pill-green-border-default)",buttonFocus:l?"var(--pill-green-inverse-bg-hover)":"var(--pill-green-bg-hover)",buttonFocusAlt:l?"var(--pill-green-inverse-bg-alt-hover)":"var(--pill-green-bg-alt-hover)",content:e,contentAlt:r},red:{varietyColor:l?"var(--pill-red-inverse-bg-default)":"var(--pill-red-bg-default)",varietyColorAlt:l?"var(--pill-red-inverse-bg-alt-default)":"var(--pill-red-bg-alt-default)",varietyBorderColor:l?"var(--pill-red-inverse-border-default)":"var(--pill-red-border-default)",buttonFocus:l?"var(--pill-red-inverse-bg-hover)":"var(--pill-red-bg-hover)",buttonFocusAlt:l?"var(--pill-red-inverse-bg-alt-hover)":"var(--pill-red-bg-alt-hover)",content:e,contentAlt:r},orange:{varietyColor:l?"var(--pill-orange-inverse-bg-default)":"var(--pill-orange-bg-default)",varietyColorAlt:l?"var(--pill-orange-inverse-bg-alt-default)":"var(--pill-orange-bg-alt-default)",varietyBorderColor:l?"var(--pill-orange-inverse-border-default)":"var(--pill-orange-border-default)",buttonFocus:l?"var(--pill-orange-inverse-bg-hover)":"var(--pill-orange-bg-hover)",buttonFocusAlt:l?"var(--pill-orange-inverse-bg-alt-hover)":"var(--pill-orange-bg-alt-hover)",content:e,contentAlt:r},blue:{varietyColor:l?"var(--pill-blue-inverse-bg-default)":"var(--pill-blue-bg-default)",varietyColorAlt:l?"var(--pill-blue-inverse-bg-alt-default)":"var(--pill-blue-bg-alt-default)",varietyBorderColor:l?"var(--pill-blue-inverse-border-default)":"var(--pill-blue-border-default)",buttonFocus:l?"var(--pill-blue-inverse-bg-hover)":"var(--pill-blue-bg-hover)",buttonFocusAlt:l?"var(--pill-blue-inverse-bg-alt-hover)":"var(--pill-blue-bg-alt-hover)",content:e,contentAlt:r},purple:{varietyColor:l?"var(--pill-purple-inverse-bg-default)":"var(--pill-purple-bg-default)",varietyColorAlt:l?"var(--pill-purple-inverse-bg-alt-default)":"var(--pill-purple-bg-alt-default)",varietyBorderColor:l?"var(--pill-purple-inverse-border-default)":"var(--pill-purple-border-default)",buttonFocus:l?"var(--pill-purple-inverse-bg-hover)":"var(--pill-purple-bg-hover)",buttonFocusAlt:l?"var(--pill-purple-inverse-bg-alt-hover)":"var(--pill-purple-bg-alt-hover)",content:e,contentAlt:r},teal:{varietyColor:"var(--pill-teal-bg-default)",varietyColorAlt:"var(--pill-teal-bg-alt-default)",varietyBorderColor:"var(--pill-teal-border-default)",buttonFocus:"var(--pill-teal-bg-hover)",buttonFocusAlt:"var(--pill-teal-bg-alt-hover)",content:e,contentAlt:r},lime:{varietyColor:"var(--pill-lime-bg-default)",varietyColorAlt:"var(--pill-lime-bg-alt-default)",varietyBorderColor:"var(--pill-lime-border-default)",buttonFocus:"var(--pill-lime-bg-hover)",buttonFocusAlt:"var(--pill-lime-bg-alt-hover)",content:e,contentAlt:r},pink:{varietyColor:"var(--pill-pink-bg-default)",varietyColorAlt:"var(--pill-pink-bg-alt-default)",varietyBorderColor:"var(--pill-pink-border-default)",buttonFocus:"var(--pill-pink-bg-hover)",buttonFocusAlt:"var(--pill-pink-bg-alt-hover)",content:e,contentAlt:r},slate:{varietyColor:"var(--pill-slate-bg-default)",varietyColorAlt:"var(--pill-slate-bg-alt-default)",varietyBorderColor:"var(--pill-slate-border-default)",buttonFocus:"var(--pill-slate-bg-hover)",buttonFocusAlt:"var(--pill-slate-bg-alt-hover)",content:e,contentAlt:r}}}};export{l as default};

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

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

@@ -0,0 +1 @@
+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_12_0__sc-e085f6af-0"})([""]),g=o.span.attrs(a).withConfig({displayName:"pill.style__StyledPill",componentId:"carbon_v162_12_0__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

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

package/esm/components/pod/index.js

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

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

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

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

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

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

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

@@ -0,0 +1 @@
+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_12_0__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_12_0__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_12_0__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_12_0__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_12_0__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_12_0__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_12_0__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_12_0__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_12_0__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_12_0__sc-b71164e0-9"})(["margin-top:8px;font-size:14px;font-weight:normal;"]),M=o.h4.withConfig({displayName:"pod.style__StyledTitle",componentId:"carbon_v162_12_0__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

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

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

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

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

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

@@ -0,0 +1 @@
+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 p}from"react";import{CSSTransition as d}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?p: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 N(e,n,t){return u((()=>[m(e?({rects:e})=>({mainAxis:-e.reference.height}):t),f({fallbackStrategy:"initialPlacement"}),...n?[b()]:[]]),[e,n,t])}const Q=o(((o,u)=>{var{children:p,title:m,borderRadius:f,position:b="right",offset:F=6,open:$,onOpen:Q,onClose:G,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),[pe,de]=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=N(J,"center"===b,F),{isInFlatTable:xe}=l(S),Pe=a((e=>{le||se(!1),null==G||G(e)}),[le,G]),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==G||G(e):null==Q||Q(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==G||G(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:p}),m&&q(ke)]}),m&&p]})}));K((()=>{var e;const n=_e?null==pe?void 0:pe.closest("[data-component='global-header']"):null,t=_e?null==pe||null===(e=pe.closest("[data-component='menu']"))||void 0===e?void 0:e.parentElement:null,o=null==pe?void 0:pe.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,pe]);const Se=null!=me?me:pe;return e(h,T(R({onMouseDown:Ae,$hasFullWidth:te},E("popover-container",ie)),{children:[t("div",{className:"popover-open-component",ref:de,children:U(Ce)}),t(d,{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:pe},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{Q as PopoverContainer,Q as default,H as renderClose,W as renderOpen};

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

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

@@ -0,0 +1 @@
+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_12_0__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_12_0__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_12_0__sc-e605c9f0-2"})(["order:-1;flex:1;min-width:0;"]),p=o.div.withConfig({displayName:"popover-container.style__PopoverContainerHeaderStyle",componentId:"carbon_v162_12_0__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_12_0__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

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

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

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

package/esm/components/portal/index.js

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

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

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

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

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

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

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

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

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

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

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