carbon-react 162.12.0-beta.1 → 162.13.0

package/esm/__internal__/popover-menu/menu-item/menu-item-heading/menu-item-heading.component.js

@@ -0,0 +1 @@
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useContext as n,useRef as o}from"react";import r from"styled-components";import{PopoverMenuContext as i}from"../../contexts/popover-menu.context.js";import c from"../../contexts/menu-heading.context.js";import"../../contexts/menu-item.context.js";import a from"../../../utils/helpers/guid/index.js";function l(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function p(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){l(e,t,n[t])}))}return e}function m(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var 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 s=r.div.withConfig({displayName:"menu-item-heading.component__StyledMenuHeadingWithIcon",componentId:"carbon_v162_12_0__sc-f76e7b6a-0"})(["display:flex;align-items:center;gap:",";"],(({$size:e})=>"small"===e?"var(--global-space-comp-2-xs)":"var(--global-space-comp-xs)")),d=r.li.withConfig({displayName:"menu-item-heading.component__StyledMenuHeading",componentId:"carbon_v162_12_0__sc-f76e7b6a-1"})(['div[data-element="text"]{'," color:var(--input-dropdown-label-alt);}ul{margin:0;padding:0;list-style:none;overflow:hidden;}"],(({$size:e})=>`\n        padding: 0 var(--global-space-comp-m);\n        font: var(--global-font-static-comp-medium-${e.charAt(0)});\n        margin-left: calc(var(--global-space-comp-m) - 2px);\n      `)),u=({children:r,text:l,icon:u})=>{const{size:b}=n(i),f=o(`popover-menu-heading-${a()}`),g={"data-element":"text",id:f.current};return e(d,{"data-component":"popover-menu-item-heading",$size:b,role:"option",children:[u?e(s,m(p({"data-role":"text-with-icon",$size:b},g),{children:[u,l]})):t("div",m(p({},g),{children:l})),t(c.Provider,{value:{headingId:f.current},children:t("ul",{role:"listbox","aria-label":l,children:r})})]})};u.displayName="PopoverMenuItemHeading";export{u as default};

package/esm/__internal__/popover-menu/menu-item/menu-item.component.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+export interface MenuItemProps {
+    children: React.ReactNode;
+    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+    selected?: boolean;
+    disabled?: boolean;
+    id?: string;
+    submenu?: React.ReactNode;
+    submenuWidth?: string;
+    submenuOpen?: boolean;
+    onSubmenuOpen?: () => void;
+    onSubmenuClose?: () => void;
+}
+declare const MenuItem: {
+    ({ children, onClick, selected, disabled, submenu, submenuOpen, onSubmenuOpen, onSubmenuClose, submenuWidth, id, ...rest }: MenuItemProps): string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | null | undefined;
+    displayName: string;
+};
+export default MenuItem;

package/esm/__internal__/popover-menu/menu-item/menu-item.component.js

@@ -0,0 +1 @@
+import{jsx as n,jsxs as e}from"react/jsx-runtime";import o,{useRef as t,useContext as r,useCallback as a,useEffect as l}from"react";import i,{css as u}from"styled-components";import{PopoverMenuContext as s}from"../contexts/popover-menu.context.js";import c from"../contexts/menu-heading.context.js";import p from"../contexts/menu-item.context.js";import m from"../../utils/helpers/guid/index.js";import d from"../../../components/icon/icon.component.js";import"../../../components/icon/icon.style.js";import{buttonMenuItemQuerySelector as b}from"../utils/index.js";function v(n,e,o){return e in n?Object.defineProperty(n,e,{value:o,enumerable:!0,configurable:!0,writable:!0}):n[e]=o,n}function g(n){for(var e=1;e<arguments.length;e++){var o=null!=arguments[e]?arguments[e]:{},t=Object.keys(o);"function"==typeof Object.getOwnPropertySymbols&&(t=t.concat(Object.getOwnPropertySymbols(o).filter((function(n){return Object.getOwnPropertyDescriptor(o,n).enumerable})))),t.forEach((function(e){v(n,e,o[e])}))}return n}function f(n,e){return e=null!=e?e:{},Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(e)):function(n){var e=Object.keys(n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(n);e.push.apply(e,o)}return e}(Object(e)).forEach((function(o){Object.defineProperty(n,o,Object.getOwnPropertyDescriptor(e,o))})),n}const h=i.li.withConfig({displayName:"menu-item.component__StyledMenuItem",componentId:"carbon_v162_12_0__sc-4bc50bba-0"})(["width:100%;position:relative;box-sizing:border-box;&:not(:has(button)):not(:has(a)){"," display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:var(--global-space-comp-xs);&:not(:has(.menu-item-leading)){grid-template-columns:1fr;}}"," "," ",""],(({$disabled:n})=>n?"\n          * {\n          color: var(--input-dropdown-label-disabled);\n          }\n          cursor: not-allowed;\n        ":"\n          color: var(--input-dropdown-label-alt);\n          cursor: pointer;\n\n          :hover {\n            * {\n              color: var(--input-dropdown-label-hover);\n            }\n            background-color: var(--input-dropdown-bg-hover);\n          }\n      "),(({$disabled:n,$isButtonMenu:e})=>n?"\n        * {\n          color: var(--input-dropdown-label-disabled);\n        }\n\n        & > button, & > a {\n          background-color: transparent;\n        }\n        cursor: not-allowed;\n      ":`\n        cursor: pointer;\n\n        ${e?"\n              color: var(--popover-label-default);\n\n              & > button:active,\n              & > a:active {\n                background-color: var(--popover-bg-active);\n                color: var(--popover-label-active);\n              }\n\n              & > button:not(:active):hover,\n              & > a:not(:active):hover {\n                color: var(--popover-label-hover);\n                background-color: var(--popover-bg-hover);\n              }\n            ":"\n              color: var(--input-dropdown-label-alt);\n\n              &:not(:active):hover {\n                * {\n                  color: var(--input-dropdown-label-hover);\n                }\n                background-color: var(--popover-bg-hover);\n              }\n            "}\n  `),(({$isButtonMenu:n})=>u(["",""],n?"\n        &:focus {\n          outline: none;\n        }\n      ":'\n        &[data-has-focus="true"] {\n          outline: var(--focus-borderalt) solid var(--global-borderwidth-s);\n          outline-offset: calc(var(--global-borderwidth-s) * -1);\n        }\n    ')),(({$size:n,$isButtonMenu:e})=>u([""," "," ",""],"small"===n&&`\n      &:not(:has(button)):not(:has(a)) {\n        padding: var(--global-space-comp-xs) 0;\n\n        &:not(:has(.menu-item-subtext)) {\n          min-height: var(--global-size-s);\n        }\n      }\n\n      button, a {\n        width: 100%;\n        padding: var(--global-space-comp-xs) var(--global-space-comp-m) var(--global-space-comp-xs) var(--global-space-comp-m);\n      }\n\n      *:not(.menu-item-subtext):not(.menu-item-label-prefix) {\n        font: var(--global-font-static-comp-${e?"medium":"regular"}-s);\n      }\n    `,"medium"===n&&`\n      &:not(:has(button)):not(:has(a)) {\n        padding: var(--global-space-comp-s) 0;\n\n        &:not(:has(.menu-item-subtext)) {\n          min-height: var(--global-size-m);\n        }\n      }\n\n      button, a {\n        width: 100%;\n        padding: var(--global-space-comp-s) var(--global-space-comp-m) var(--global-space-comp-s) var(--global-space-comp-m);\n      }\n\n      *:not(.menu-item-subtext):not(.menu-item-label-prefix) {\n        font: var(--global-font-static-comp-${e?"medium":"regular"}-m);\n      }\n    `,"large"===n&&`\n      &:not(:has(button)):not(:has(a)) {\n        padding: var(--global-space-comp-m) 0;\n\n        &:not(:has(.menu-item-subtext)) {\n          min-height: var(--global-size-l);\n        }\n      }\n      \n      button, a {\n        width: 100%;\n        padding: var(--global-space-comp-m) var(--global-space-comp-m) var(--global-space-comp-m) var(--global-space-comp-m);\n      }\n\n      *:not(.menu-item-subtext):not(.menu-item-label-prefix) {\n        font: var(--global-font-static-comp-${e?"medium":"regular"}-l);\n      }\n    `))),y=i.div.withConfig({displayName:"menu-item.component__SubmenuParentWrapper",componentId:"carbon_v162_12_0__sc-4bc50bba-1"})(["display:flex;align-items:center;justify-content:space-between;width:100%;gap:var(--global-space-comp-xs);"]),w=n=>{if(!o.isValidElement(n))return!1;const e=n.props;return!(!e.disabled&&!0!==e["aria-disabled"]&&"true"!==e["aria-disabled"])||o.Children.toArray(e.children).some(w)},O=n=>{var e;const o=null===(e=n.current)||void 0===e?void 0:e.querySelector(b(!0));null==o||o.focus()},x=i=>{var{children:u,onClick:b,selected:v,disabled:x,submenu:j,submenuOpen:$,onSubmenuOpen:P,onSubmenuClose:S,submenuWidth:_,id:k}=i,C=function(n,e){if(null==n)return{};var o,t,r=function(n,e){if(null==n)return{};var o,t,r={},a=Object.keys(n);for(t=0;t<a.length;t++)o=a[t],e.indexOf(o)>=0||(r[o]=n[o]);return r}(n,e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(n);for(t=0;t<a.length;t++)o=a[t],e.indexOf(o)>=0||Object.prototype.propertyIsEnumerable.call(n,o)&&(r[o]=n[o])}return r}(i,["children","onClick","selected","disabled","submenu","submenuOpen","onSubmenuOpen","onSubmenuClose","submenuWidth","id"]);const D=t(null),{size:M,isButtonMenu:z,isSubmenu:E,onSubmenuCloseContext:B,focusSubmenuParent:I,renderSubmenu:N}=r(s),A=!!j,W=z&&w(u),K=x||W,R=a((t=>((t,r)=>o.isValidElement(t)&&1===o.Children.count(t)?o.cloneElement(t,g({"data-element":"submenu-parent",children:e(y,{"data-element":"submenu-parent-wrapper",children:[t.props.children,n(d,{type:"caret_right","data-element":"submenu-icon",ml:3})]})},r)):t)(u,g({},t))),[u]),V=t(null),q=r(c),L=null==q?void 0:q.headingId,F=t(null!=k?k:`popover-menu-item-${m()}`).current,G=a((n=>{if(A&&z)return"ArrowRight"===n.key?(n.preventDefault(),void($?O(V):null==P||P())):void 0}),[A,z,P,$]);l((()=>{$&&O(V)}),[$]);const H=a((n=>{var e;const{activeElement:o}=document,t="popover-submenu-item"===(null==o||null===(e=o.parentElement)||void 0===e?void 0:e.getAttribute("data-component"));if("ArrowLeft"===n.key&&(n.preventDefault(),t))return null==I||I(),void(null==B||B())}),[I,B]),J=a((n=>{null==P||P(),null==b||b(n)}),[P,b]);return z&&A&&N?N({open:!!$,submenu:j,submenuWidth:_,size:M,onClose:()=>null==S?void 0:S(),ref:V,triggerRef:D,control:e=>n(h,{ref:D,id:F,"data-component":"popover-menu-item",className:"popover-menu-item"+(K?"-disabled":""),$size:M,onClick:K?void 0:J,onMouseDown:K?void 0:n=>n.preventDefault(),onKeyDown:K?void 0:G,$disabled:K,$isButtonMenu:z,children:R(f(g({},e),{disabled:K}))})}):n(h,f(g({ref:D,id:F,"data-component":`popover-${E?"submenu":"menu"}-item`,className:"popover-menu-item"+(K?"-disabled":""),$size:M,onClick:K?void 0:b,onMouseDown:K?void 0:n=>n.preventDefault(),onKeyDown:H,role:z?void 0:"option","aria-selected":z?void 0:v&&!K,"aria-disabled":z?void 0:K,$disabled:K,$isButtonMenu:z},C),{"aria-describedby":L,children:n(p.Provider,{value:{isDisabled:!!K},children:u})}))};x.displayName="PopoverMenuItem";export{x as default};

package/esm/__internal__/popover-menu/popover-menu.component.d.ts

@@ -0,0 +1,66 @@
+import React from "react";
+import type { CSSObject } from "styled-components";
+import { PopoverProps } from "../popover";
+import { PopoverMenuContextProps, PopoverControlProps } from "./contexts";
+import { TagProps } from "../utils/helpers/tags";
+interface ListProps {
+    $size: PopoverMenuContextProps["size"];
+    $maxHeight?: string;
+    $isButtonMenu?: PopoverMenuContextProps["isButtonMenu"];
+}
+export declare const List: import("styled-components").StyledComponent<"ul", any, ListProps, never>;
+export type FocusableHandle = HTMLElement | HTMLButtonElement | HTMLAnchorElement | HTMLInputElement;
+export interface PopoverMenuProps<TRef extends FocusableHandle = HTMLElement> extends TagProps {
+    /** The content of the popover menu */
+    children: React.ReactNode;
+    /** Whether the popover menu is open or not */
+    open: boolean;
+    /** The element that the popover menu is anchored to */
+    popoverControl: (ref: React.RefObject<TRef>, props: PopoverControlProps) => React.ReactNode;
+    size?: PopoverMenuContextProps["size"];
+    /** Placement of the popover menu */
+    placement?: "top" | "bottom" | "left" | "right" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end" | "right-start" | "right-end";
+    /** Middleware for the popover menu */
+    middleware?: typeof menuPopoverMiddleware;
+    /** Ref for the submenu control element */
+    submenuControlRef?: React.MutableRefObject<HTMLElement | null>;
+    /** id applied to the outer wrapper element (e.g. for aria-controls) */
+    id?: string;
+    /** Blur handler for the outer wrapper element */
+    onBlur?: React.FocusEventHandler<HTMLElement>;
+    /** Callback when the popover menu is opened */
+    onOpen?: () => void;
+    /** Callback when the popover menu is closed */
+    onClose: (e?: Event, value?: string) => void;
+    /** Set the custom width of the menu */
+    width?: string;
+    /** Whether the menu width should match the control reference width */
+    matchReferenceWidth?: boolean;
+    /** Strategy used to position the popover */
+    popoverStrategy?: PopoverProps["popoverStrategy"];
+    /** Override default control reference for popover */
+    controlReference?: React.RefObject<HTMLDivElement | HTMLLIElement>;
+    /** Set the custom max-height of the menu list */
+    maxHeight?: string;
+    /** Custom styles for the control wrapper element */
+    controlWrapperStyle?: CSSObject;
+    /** Aria labelledby for the listbox */
+    listboxAriaLabelledBy?: string;
+    /** Aria label for the listbox */
+    listboxAriaLabel?: string;
+    /** Controls the keyboard navigation behavior and sets roles to `list` and `listitem` */
+    isButtonMenu?: boolean;
+    /** Flag to notify that the menu is a submenu */
+    isSubmenu?: boolean;
+    /** Ref to the listbox/menu element */
+    listRef?: React.Ref<HTMLUListElement>;
+}
+declare const menuPopoverMiddleware: (width?: string, isButtonMenu?: boolean, isSubmenu?: boolean, matchReferenceWidth?: boolean) => {
+    name: string;
+    options?: any;
+    fn: (state: import("@floating-ui/dom").MiddlewareState) => import("@floating-ui/core").MiddlewareReturn | Promise<import("@floating-ui/core").MiddlewareReturn>;
+}[];
+declare const PopoverMenu: <TRef extends FocusableHandle = HTMLElement>(props: PopoverMenuProps<TRef> & {
+    ref?: React.ForwardedRef<HTMLDivElement>;
+}) => React.ReactElement;
+export default PopoverMenu;

package/esm/__internal__/popover-menu/popover-menu.component.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as o,Fragment as n}from"react/jsx-runtime";import{forwardRef as r,useRef as t,useState as l,useCallback as i,useEffect as a}from"react";import c,{css as p}from"styled-components";import u from"../popover/popover.component.js";import{offset as s,flip as d,size as m}from"@floating-ui/dom";import{wrapChildrenInItem as v,buttonMenuItemQuerySelector as b}from"./utils/index.js";import f from"../../hooks/__internal__/useClickAwayListener/useClickAwayListener.js";import{useHandleDropdownMenuKeyDown as y,setFocus as g}from"./hooks/useHandleDropdownMenuKeyDown.js";import h from"../utils/helpers/guid/index.js";import{PopoverMenuContext as w}from"./contexts/popover-menu.context.js";import"./contexts/menu-heading.context.js";import"./contexts/menu-item.context.js";import x from"../utils/helpers/combine-refs/index.js";function O(e,o,n){return o in e?Object.defineProperty(e,o,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[o]=n,e}const _=c.div.withConfig({displayName:"popover-menu.component__PopoverControlWrapper",componentId:"carbon_v162_12_0__sc-b31ae1b1-0"})(["display:inline-block;",""],(({$controlWrapperStyle:e})=>e)),S=c.ul.withConfig({displayName:"popover-menu.component__List",componentId:"carbon_v162_12_0__sc-b31ae1b1-1"})(["margin:var(--global-space-none);padding:var(--global-space-none);background-color:var(--popover-bg-default);display:flex;flex-direction:column;max-height:",';list-style-type:"";list-style:none;',""],(({$maxHeight:e,$size:o})=>null!=e?e:`calc(5 * var(--global-size-${o.charAt(0)}))`),(({$isButtonMenu:e,$size:o,$maxHeight:n})=>!e&&p(["overflow:hidden auto;-webkit-overflow-scrolling:touch;max-height:",";"],null!=n?n:`calc(5 * var(--global-size-${o.charAt(0)}))`))),j={small:"var(--global-space-comp-xs)",medium:"var(--global-space-comp-s)",large:"var(--global-space-comp-m)"},k=c.div.withConfig({displayName:"popover-menu.component__MenuWrapper",componentId:"carbon_v162_12_0__sc-b31ae1b1-2"})(["box-shadow:var(--global-depth-lvl1);border-radius:var(--global-radius-container-m);background-color:var(--popover-bg-default);width:max-content;max-width:100%;position:relative;z-index:var(--carbon-zindex-small-overlay);padding:",";",""],(({$size:e})=>p([""," var(--global-space-none)"],j[e])),(({$isButtonMenu:e})=>!e&&p(["overflow:hidden;max-height:100%;"]))),P=c.div.withConfig({displayName:"popover-menu.component__ScrollWrapper",componentId:"carbon_v162_12_0__sc-b31ae1b1-3"})(["max-height:100%;width:100%;"]),R=(e,o,n,r)=>[s(n?0:8),d({fallbackStrategy:"initialPlacement"}),m({apply({rects:n,elements:t}){(!o||r||e)&&(t.floating.style.width=e||`${n.reference.width}px`)}})],C=e=>{null==e||e.focus()},D=({open:o,placement:n,controlWrapperRef:r,size:t,listRef:l,listboxAriaLabelledBy:i,listboxAriaLabel:a,isButtonMenu:c,children:p,onKeyDown:s,middleware:d,scrollRef:m,listId:v,disablePortal:b,portalTarget:f,maxHeight:y,popoverStrategy:g})=>e(u,{placement:n,reference:r,isOpen:o,"data-component":"popover-menu",middleware:d,disablePortal:b,portalTarget:f,popoverStrategy:g,children:e(k,{$size:t,onKeyDown:s,"data-role":"menu-wrapper",onMouseDown:e=>e.preventDefault(),$isButtonMenu:c,children:e(P,{ref:m,"data-component":"scroll-wrapper",children:e(S,{$size:t,ref:l,role:c?"list":"listbox",id:v,"aria-labelledby":i,$isButtonMenu:c,"aria-label":a,$maxHeight:y,children:p})})})}),$=({open:o,isButtonMenu:n,isSubmenu:r,popoverControl:t,controlRef:l,controlWrapperRef:i,onKeyDown:a,listId:c,"aria-activedescendant":p,controlWrapperStyle:u})=>r?t(l,{"aria-haspopup":"true","aria-controls":o?c:void 0,"aria-expanded":o}):e(_,{ref:i,onKeyDown:a,"data-component":"popover-menu-control",$controlWrapperStyle:u,children:t(l,{"aria-haspopup":n?"true":"listbox","aria-controls":o?c:void 0,"aria-expanded":o,"aria-activedescendant":n?void 0:p,role:n?void 0:"combobox"})}),A=(r,c)=>{var{children:p,open:u,popoverControl:s,size:d="medium",placement:m="bottom-end",onOpen:_,onClose:S,width:j,matchReferenceWidth:k=!1,popoverStrategy:P="absolute",listboxAriaLabelledBy:A,listboxAriaLabel:L,isButtonMenu:z=!1,isSubmenu:M=!1,id:W,controlReference:E,listRef:I,controlWrapperStyle:H,maxHeight:K}=r,N=function(e,o){if(null==e)return{};var n,r,t=function(e,o){if(null==e)return{};var n,r,t={},l=Object.keys(e);for(r=0;r<l.length;r++)n=l[r],o.indexOf(n)>=0||(t[n]=e[n]);return t}(e,o);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(r=0;r<l.length;r++)n=l[r],o.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(t[n]=e[n])}return t}(r,["children","open","popoverControl","size","placement","onOpen","onClose","width","matchReferenceWidth","popoverStrategy","listboxAriaLabelledBy","listboxAriaLabel","isButtonMenu","isSubmenu","id","controlReference","listRef","controlWrapperStyle","maxHeight"]);const T=t(null),q=null!=E?E:T,F=t(null),U=t(null),G=x(I,U),J=t(null!=W?W:`popover-menu-wrapper-${h()}`),Q=t(null),V=x(Q,c),X=v(p),Y=t(null),Z=f(S),[ee,oe]=l(""),ne=R(j,z,M,k),re=t(null),te=i((()=>{if(M){var e;const o=null==E||null===(e=E.current)||void 0===e?void 0:e.querySelector("button, a");o&&C(o)}}),[M,E]),le=i((e=>{u&&"Escape"===e.key&&(e.preventDefault(),e.stopPropagation(),S(),M?te():C(Y.current))}),[u,S,M,te]);a((()=>{const e=M?F.current:Q.current;null==e||e.addEventListener("click",Z,{passive:!0}),null==e||e.addEventListener("keydown",le);const o=M?null==E?void 0:E.current:null;return null==o||o.addEventListener("click",Z,{passive:!0}),()=>{null==e||e.removeEventListener("click",Z),null==e||e.removeEventListener("keydown",le),null==o||o.removeEventListener("click",Z)}}),[M,Z,le,E]);const ie=y(U,z?()=>{}:oe,S,{isButtonMenu:z,isSubmenu:M}),ae=i((e=>{var o;if(u&&(null===(o=T.current)||void 0===o?void 0:o.contains(document.activeElement)))ie(e);else if(!u&&z&&!M){if("ArrowDown"===e.key)return e.preventDefault(),null==_||_(),void(re.current="down");if("ArrowUp"===e.key)return e.preventDefault(),null==_||_(),void(re.current="up")}}),[u,ie,z,_,M]);a((()=>{let e;return u&&z&&!M&&(e=requestAnimationFrame((()=>{var e;const o=null===(e=F.current)||void 0===e?void 0:e.querySelectorAll(b(!1)),n="up"===re.current?null==o?void 0:o[o.length-1]:null==o?void 0:o[0];re.current=null,n&&(oe(n.id),g(n,void 0,z))}))),()=>cancelAnimationFrame(e)}),[u,z,M]);const ce=i((o=>e(B,{open:o.open,onClose:e=>{var n;o.onClose(),("click"===(null==e?void 0:e.type)&&!(null===(n=Q.current)||void 0===n?void 0:n.contains(null==e?void 0:e.target))||"Tab"===(null==e?void 0:e.key))&&S(e)},size:o.size,isButtonMenu:!0,isSubmenu:!0,width:o.submenuWidth,listRef:o.ref,popoverControl:(e,n)=>o.control(n),placement:"right-start",controlReference:o.triggerRef,children:o.submenu})),[S]),pe=o(n,{children:[e($,{open:u,isButtonMenu:z,isSubmenu:M,popoverControl:s,controlRef:Y,controlWrapperRef:T,controlWrapperStyle:H,onKeyDown:ae,listId:J.current,"aria-activedescendant":u&&ee?ee:void 0}),e(w.Provider,{value:{size:d,isButtonMenu:z,isSubmenu:M,onSubmenuCloseContext:M?S:void 0,focusSubmenuParent:M?te:void 0,renderSubmenu:z&&!M?ce:void 0},children:u&&e(D,{open:u,placement:m,controlWrapperRef:q,size:d,listRef:G,listboxAriaLabelledBy:A,listboxAriaLabel:L,isButtonMenu:z,onKeyDown:ie,middleware:ne,scrollRef:F,listId:J.current,disablePortal:!M,portalTarget:M?null==E?void 0:E.current:void 0,maxHeight:K,popoverStrategy:P,children:X})})]});return M?pe:e("div",(ue=function(e){for(var o=1;o<arguments.length;o++){var n=null!=arguments[o]?arguments[o]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),r.forEach((function(o){O(e,o,n[o])}))}return e}({ref:V,"data-component":"popover-menu"},N),se=null!=(se={children:pe})?se:{},Object.getOwnPropertyDescriptors?Object.defineProperties(ue,Object.getOwnPropertyDescriptors(se)):function(e){var o=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);o.push.apply(o,n)}return o}(Object(se)).forEach((function(e){Object.defineProperty(ue,e,Object.getOwnPropertyDescriptor(se,e))})),ue));var ue,se},B=r(A);export{S as List,B as default};

package/esm/__internal__/popover-menu/utils/index.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+export declare const wrapChildrenInItem: (children: React.ReactNode) => React.ReactNode[] | undefined;
+export declare const itemQuerySelector: (isSubmenu?: boolean) => string;
+export declare const buttonMenuItemQuerySelector: (isSubmenu?: boolean) => string;

package/esm/__internal__/popover-menu/utils/index.js

@@ -0,0 +1 @@
+import{jsx as e}from"react/jsx-runtime";import t from"react";import m from"../menu-item/menu-item.component.js";import"../menu-item/menu-item-content/menu-item-leading.component.js";import"../menu-item/menu-item-content/menu-item-label.component.js";import"../menu-item/menu-item-content/menu-item-subtext.component.js";import n from"../menu-item/menu-item-divider/menu-item-divider.component.js";import i from"../menu-item/menu-item-heading/menu-item-heading.component.js";const o=r=>{var u;return null===(u=t.Children.map(r,(r=>t.isValidElement(r)?r.type===t.Fragment?o(r.props.children):r.type===m||r.type===n||r.type===i?r:e(m,{children:r}):null)))||void 0===u?void 0:u.flat().filter(Boolean)},r=e=>`li[data-component='popover-${e?"submenu":"menu"}-item']:not([aria-disabled='true'])`,u=e=>`${r(e)} button:not([disabled]), ${r(e)} a:not([disabled])`;export{u as buttonMenuItemQuerySelector,r as itemQuerySelector,o as wrapChildrenInItem};

package/esm/__internal__/radio-button-mapper/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./radio-button-mapper.component";
+export type { RadioButtonMapperProps, MappedChildProps, } from "./radio-button-mapper.component";

package/esm/__internal__/radio-button-mapper/index.js

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

package/esm/__internal__/radio-button-mapper/radio-button-mapper.component.d.ts

@@ -0,0 +1,29 @@
+import React from "react";
+interface InputEvents {
+    /** Callback fired when each RadioButton is blurred */
+    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    /** Callback fired when the user selects a RadioButton */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    /** Callback fired on mouse down */
+    onMouseDown?: (event: React.MouseEvent<HTMLInputElement>) => void;
+    /** Callback fired on key down */
+    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+}
+export interface RadioButtonMapperProps extends InputEvents {
+    /** The RadioButton objects to be rendered in the group */
+    children?: React.ReactNode;
+    /** Specifies the name prop to be applied to each button in the group */
+    name: string;
+    /** Value of the selected RadioButton */
+    value?: string | null;
+}
+export interface MappedChildProps {
+    defaultChecked?: boolean;
+    checked: boolean;
+    name: string;
+}
+declare const RadioButtonMapper: {
+    ({ children, name, onBlur, onChange, onMouseDown, onKeyDown, value, }: RadioButtonMapperProps): React.JSX.Element;
+    displayName: string;
+};
+export default RadioButtonMapper;

package/esm/__internal__/radio-button-mapper/radio-button-mapper.component.js

@@ -0,0 +1 @@
+import{jsx as e,Fragment as o}from"react/jsx-runtime";import n,{useMemo as r,useState as t,useCallback as a}from"react";const l=({children:l,name:u,onBlur:p,onChange:d,onMouseDown:c,onKeyDown:i,value:s})=>{const m=r((()=>n.Children.toArray(l)),[l]),h=r((()=>{let e=!1;return m.forEach((o=>{n.isValidElement(o)&&Object.prototype.hasOwnProperty.call(o.props,"defaultChecked")&&(e=!0)})),e}),[m]),f=void 0!==s,[v,y]=t(""),C=a((e=>{null==d||d(e),f||y(e.target.value)}),[d,y,f]),w=m.map((e=>{let o;if(!n.isValidElement(e))return e;o=f?s===e.props.value:!v&&h?e.props.defaultChecked||!1:v===e.props.value;const r={defaultChecked:void 0,checked:o,name:u,onBlur:p,onMouseDown:c,onChange:C,onKeyDown:i};return n.cloneElement(e,r)}));return e(o,{children:w})};l.displayName="RadioButtonMapper";export{l as default};

package/esm/__internal__/tooltip-provider/index.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+interface TooltipProviderProps {
+    /** The position to display the tooltip */
+    tooltipPosition?: "top" | "bottom" | "left" | "right";
+    /** Control whether the tooltip is visible */
+    children: React.ReactNode;
+    /** Aria label for rendered help component */
+    helpAriaLabel?: string;
+    focusable?: boolean;
+    tooltipVisible?: boolean;
+    disabled?: boolean;
+    target?: HTMLElement;
+}
+interface ToolbarContextProps extends Omit<TooltipProviderProps, "children"> {
+    tooltipId?: {
+        current: string;
+    };
+}
+export declare const TooltipContext: React.Context<ToolbarContextProps>;
+export declare const TooltipProvider: ({ children, tooltipPosition, helpAriaLabel, focusable, tooltipVisible, disabled, target, }: TooltipProviderProps) => React.JSX.Element;
+export {};

package/esm/__internal__/tooltip-provider/index.js

@@ -0,0 +1 @@
+import{jsx as t}from"react/jsx-runtime";import e,{useRef as i}from"react";import o from"../utils/helpers/guid/index.js";const r=e.createContext({}),l=({children:e,tooltipPosition:l,helpAriaLabel:a,focusable:s,tooltipVisible:p,disabled:d,target:n})=>{const c=i(o());return t(r.Provider,{value:{tooltipPosition:l,helpAriaLabel:a,focusable:s,tooltipVisible:p,disabled:d,tooltipId:c,target:n},children:e})};export{r as TooltipContext,l as TooltipProvider};

package/esm/__internal__/utils/createStrictContext/createStrictContext.d.ts

@@ -0,0 +1,31 @@
+import React from "react";
+type CreateStrictContextArgs<ContextType> = {
+    /** The display name of the context. */
+    name?: string;
+    /** Error message to log if context is accessed outside its provider. */
+    errorMessage: string;
+    /** Default value to return if context is accessed outside its provider. */
+    defaultValue: ContextType;
+};
+type CreateStrictContextReturn<ContextType> = readonly [
+    React.Provider<ContextType | null>,
+    () => ContextType
+];
+/**
+ * Creates a React context with a provider and a hook for accessing the context.
+ * Logs an error and returns a default value if the hook is used outside of the provider.
+ *
+ * @example
+ *
+ * ```tsx
+ * const [ListProvider, useList] = createStrictContext<{ size: number }>({
+ *    name: "ListContext",
+ *    errorMessage: "ListContext is undefined. Make sure to wrap your component with <ListProvider />",
+ *    defaultValue: {
+ *      size: 0,
+ *    },
+ * });
+ * ```
+ */
+declare function createStrictContext<ContextType>({ name, errorMessage, defaultValue, }: CreateStrictContextArgs<ContextType>): CreateStrictContextReturn<ContextType>;
+export default createStrictContext;

package/esm/__internal__/utils/createStrictContext/createStrictContext.js

@@ -0,0 +1 @@
+import e from"react";import r from"../logger/index.js";function o({name:o,errorMessage:t,defaultValue:n}){const a=e.createContext(null);return a.displayName=o,[a.Provider,function(){return e.useContext(a)||(r.error(`${t}\nThis logged warning will become a thrown error in a future major release.`),n)}]}export{o as default};

package/esm/__internal__/utils/createStrictContext/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./createStrictContext";

package/esm/__internal__/utils/createStrictContext/index.js

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

package/esm/__internal__/utils/helpers/array-move/index.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Move an array element from one position to another, without mutating the original array.
+ *
+ * ```ts
+ * const array = ["a", "b", "c", "d"];
+ * const result = arrayMove({ array, startIndex: 1, endIndex: 3 });
+ * // result is ["a", "c", "d", "b"]
+ * ```
+ * */
+declare function arrayMove<T>({ array, startIndex, endIndex, }: {
+    array: T[];
+    startIndex: number;
+    endIndex: number;
+}): T[];
+export default arrayMove;

package/esm/__internal__/utils/helpers/array-move/index.js

@@ -0,0 +1 @@
+function e({array:e,startIndex:r,endIndex:n}){if(r===n||r<0||n<0||r>=e.length||n>=e.length)return e;const t=Array.from(e),[a]=t.splice(r,1);return t.splice(n,0,a),t}export{e as default};

package/esm/__internal__/utils/helpers/browser-type-check/index.d.ts

@@ -0,0 +1,7 @@
+interface WindowInterface extends Partial<Window> {
+    chrome?: Record<string, unknown>;
+    sidebar?: Record<string, unknown>;
+}
+declare function browserTypeCheck(_window: WindowInterface): boolean;
+export declare function isSafari(navigator: Navigator): boolean;
+export default browserTypeCheck;

package/esm/__internal__/utils/helpers/browser-type-check/index.js

@@ -0,0 +1 @@
+function e(e){return Boolean(e.chrome||e.sidebar)}function n(e){return e.vendor.includes("Apple")}export{e as default,n as isSafari};

package/esm/__internal__/utils/helpers/combine-refs/index.d.ts

@@ -0,0 +1,3 @@
+import { MutableRefObject, RefCallback } from "react";
+declare const _default: <T = unknown>(...refs: (MutableRefObject<T | null> | RefCallback<T> | null | undefined)[]) => RefCallback<T>;
+export default _default;

package/esm/__internal__/utils/helpers/combine-refs/index.js

@@ -0,0 +1 @@
+var r=(...r)=>t=>{r.forEach((r=>{r&&("function"!=typeof r?"current"in r&&(r.current=t):r(t))}))};export{r as default};

package/esm/__internal__/utils/helpers/events/composedPath.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (ev: Event) => EventTarget[];
+export default _default;

package/esm/__internal__/utils/helpers/events/composedPath.js

@@ -0,0 +1 @@
+var e=e=>{let t=e.target||null;if(!t||!t.parentElement)return[];const n=[t];for(;t.parentElement;)t=t.parentElement,n.unshift(t);return n};export{e as default};

package/esm/__internal__/utils/helpers/events/events.d.ts

@@ -0,0 +1,88 @@
+import React from "react";
+/**
+ * JavaScript Events
+ *
+ * A collection of functions to be used with events.
+ *
+ * E.g. The KeyPress event has different implementations accross browsers, so
+ * this class contains methods to polyfill this functionality to ensure a standardised
+ * implementation between browsers
+ *
+ */
+declare const Events: {
+    /**
+     * A method to determine if an event is of a particular type
+     * */
+    isEventType: (ev: React.SyntheticEvent | Event, type: string) => boolean;
+    /**
+     * Determines if event is a keyboard event
+     */
+    isKeyboardEvent: (ev: React.SyntheticEvent | Event) => ev is React.KeyboardEvent | KeyboardEvent;
+    /**
+     * Determines if a number key along the top of the keyboard or a number key on the
+     * keypad is pressed
+     * */
+    isNumberKey: (ev: React.KeyboardEvent | KeyboardEvent) => boolean;
+    /**
+     * Determines if the key pressed is a navigation left key
+     * */
+    isLeftKey: (ev: React.KeyboardEvent | KeyboardEvent) => boolean;
+    /**
+     * Determines if the key pressed is a navigation up key
+     * */
+    isUpKey: (ev: React.KeyboardEvent | KeyboardEvent) => boolean;
+    /**
+     * Determines if the key pressed is a navigation right key
+     * */
+    isRightKey: (ev: React.KeyboardEvent | KeyboardEvent) => boolean;
+    /**
+     * Determines if the key pressed is a navigation down key
+     * */
+    isDownKey: (ev: React.KeyboardEvent | KeyboardEvent) => boolean;
+    /**
+     * Determines if the key pressed is the escape key
+     * */
+    isEscKey: (ev: React.KeyboardEvent | KeyboardEvent) => boolean;
+    /**
+     * Determines if the key pressed is the enter key
+     * */
+    isEnterKey: (ev: React.KeyboardEvent | KeyboardEvent) => boolean;
+    /**
+     * Determines if the key pressed is the tab key
+     * */
+    isTabKey: (ev: React.KeyboardEvent | KeyboardEvent) => boolean;
+    /**
+     * Determines if the key pressed is the shift key
+     * */
+    isShiftKey: (ev: React.KeyboardEvent | KeyboardEvent) => boolean;
+    /**
+     * Determines if the key pressed is the space key
+     * */
+    isSpaceKey: (ev: React.KeyboardEvent | KeyboardEvent) => boolean;
+    /**
+     * Determines if the key pressed is the space key or enter key
+     * */
+    isEnterOrSpaceKey: (ev: React.KeyboardEvent | KeyboardEvent) => boolean;
+    /**
+     * Determines if the key pressed is the home key
+     * */
+    isHomeKey: (ev: React.KeyboardEvent | KeyboardEvent) => boolean;
+    /**
+     * Determines if the key pressed is the end key
+     * */
+    isEndKey: (ev: React.KeyboardEvent | KeyboardEvent) => boolean;
+    /**
+     * Determines if the key pressed is the page up key
+     * */
+    isPageUpKey: (ev: React.KeyboardEvent | KeyboardEvent) => boolean;
+    /**
+     * Determines if the key pressed is the page down key
+     * */
+    isPageDownKey: (ev: React.KeyboardEvent | KeyboardEvent) => boolean;
+    /**
+     * Gets the event's path which is an array of the objects on which listeners will be invoked.
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/Event/composedPath
+     */
+    composedPath: (ev: Event) => EventTarget[];
+};
+export default Events;

package/esm/__internal__/utils/helpers/events/events.js

@@ -0,0 +1 @@
+import"react";import e from"./composedPath.js";const y={isEventType:(e,y)=>e.type===y,isKeyboardEvent:e=>["keydown","keypress","keyup"].includes(e.type),isNumberKey:e=>{var y;const o=null===(y=e.key)||void 0===y?void 0:y.charCodeAt(0);return void 0!==o&&o>=48&&o<=57},isLeftKey:e=>"ArrowLeft"===e.key,isUpKey:e=>"ArrowUp"===e.key,isRightKey:e=>"ArrowRight"===e.key,isDownKey:e=>"ArrowDown"===e.key,isEscKey:e=>"Escape"===e.key,isEnterKey:e=>"Enter"===e.key,isTabKey:e=>"Tab"===e.key,isShiftKey:e=>e.shiftKey,isSpaceKey:e=>" "===e.key,isEnterOrSpaceKey:e=>"Enter"===e.key||" "===e.key,isHomeKey:e=>"Home"===e.key,isEndKey:e=>"End"===e.key,isPageUpKey:e=>"PageUp"===e.key,isPageDownKey:e=>"PageDown"===e.key,composedPath:y=>{var o;return(null===(o=y.composedPath)||void 0===o?void 0:o.call(y))||e(y)}};export{y as default};

package/esm/__internal__/utils/helpers/events/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./events";

package/esm/__internal__/utils/helpers/events/index.js

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

package/esm/__internal__/utils/helpers/extract-text/index.d.ts

@@ -0,0 +1,29 @@
+import React from "react";
+/**
+ * Extracts plain text content from a React node.
+ *
+ * This utility recursively traverses a React node structure to extract all text content,
+ * handling strings, numbers, arrays, and React elements. Non-text content like fragments
+ * or components without text children will return an empty string.
+ *
+ * @param node - A React node which can be a string, number, element, array, or fragment
+ *
+ * @returns The extracted text content as a string, or an empty string if no text is found
+ *
+ * @example
+ * ```typescript
+ * // Extracts simple strings
+ * extractTextFromNode('Hello World') // returns 'Hello World'
+ *
+ * // Extracts from React elements
+ * extractTextFromNode(<span>Username</span>) // returns 'Username'
+ *
+ * // Handles nested structures
+ * extractTextFromNode(<div>First <strong>Second</strong></div>) // returns 'First Second'
+ *
+ * // Returns empty for null/undefined
+ * extractTextFromNode(null) // returns ''
+ * ```
+ */
+declare function extractTextFromNode(node: React.ReactNode): string;
+export default extractTextFromNode;

package/esm/__internal__/utils/helpers/extract-text/index.js

@@ -0,0 +1 @@
+import r from"react";function t(e){return e?"string"==typeof e||"number"==typeof e?String(e):Array.isArray(e)?e.map(t).map((r=>r.trim())).filter(Boolean).join(" "):r.isValidElement(e)?t(e.props.children):"":""}export{t as default};

package/esm/__internal__/utils/helpers/guid/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generates a random guid, useful for creating unique IDs.
+ */
+declare const _default: () => string;
+export default _default;

package/esm/__internal__/utils/helpers/guid/index.js

@@ -0,0 +1 @@
+var r=()=>{function r(){return Math.floor(65536*(1+Math.random())).toString(16).substring(1)}return`carbon-${r()}${r()}-${r()}-${r()}-${r()}-${r()}${r()}${r()}`};export{r as default};

package/esm/__internal__/utils/helpers/tags/index.d.ts

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

package/esm/__internal__/utils/helpers/tags/index.js

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

package/esm/__internal__/utils/helpers/tags/tags.d.ts

@@ -0,0 +1,24 @@
+interface RestProps {
+    [restKeys: string]: any;
+}
+export interface TagProps {
+    /** Identifier used for testing purposes, applied to the root element of the component. */
+    "data-element"?: string;
+    /** Identifier used for testing purposes, applied to the root element of the component. */
+    "data-role"?: string;
+}
+interface InternalTagProps extends TagProps {
+    /**
+     * @private
+     * @internal
+     * @ignore
+     * Identifier used for testing purposes, applied to the root element of the component.
+     * INTERNAL USE ONLY.
+     */
+    "data-component"?: string;
+}
+/**
+ * Builds props object containing top level data tags
+ */
+declare function tagComponent(componentName: string | undefined, props: TagProps & RestProps): InternalTagProps;
+export default tagComponent;

package/esm/__internal__/utils/helpers/tags/tags.js

@@ -0,0 +1 @@
+function a(a,e){const t={"data-component":a};return e["data-element"]&&(t["data-element"]=e["data-element"]),e["data-role"]&&(t["data-role"]=e["data-role"]),t}export{a as default};

package/esm/__internal__/utils/logger/get-node-env.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => string | undefined;
+export default _default;

package/esm/__internal__/utils/logger/get-node-env.js

@@ -0,0 +1 @@
+var e=()=>process.env.NODE_ENV;export{e as default};

package/esm/__internal__/utils/logger/index.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Utility for dispatching messages to the browser console.
+ * By default, logging is disabled in production mode.
+ */
+declare const Logger: {
+    /** Logs warning-level message to browser console with [Deprecation] prefix */
+    deprecate: (message: string) => void;
+    /** Logs error-level message to browser console. Includes stack trace. */
+    error: (message: string) => void;
+    /** Logs warning-level message to browser console */
+    warn: (message: string) => void;
+};
+export default Logger;

package/esm/__internal__/utils/logger/index.js

@@ -0,0 +1 @@
+import o from"./get-node-env.js";const r={deprecate:r=>{"production"!==o()&&console.warn(`[Deprecation] ${r}`)},error:r=>{"production"!==o()&&console.error(r)},warn:r=>{"production"!==o()&&console.warn(r)}};export{r as default};

package/esm/__internal__/validation-message/__next__/index.d.ts

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

package/esm/__internal__/validation-message/__next__/index.js

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

package/esm/__internal__/validation-message/__next__/validation-message-style-overrides.style.d.ts

@@ -0,0 +1,2 @@
+declare const validationMessageStyleOverrides: import("styled-components").FlattenSimpleInterpolation;
+export default validationMessageStyleOverrides;

package/esm/__internal__/validation-message/__next__/validation-message-style-overrides.style.js

@@ -0,0 +1 @@
+import{css as e}from"styled-components";const r=e([".search.inverse &{color:var(--input-validation-inverse-label-error);}"]),o=e(["",""],r);export{o as default};

package/esm/__internal__/validation-message/__next__/validation-message.component.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+import { TagProps } from "../../../__internal__/utils/helpers/tags";
+export interface ValidationMessageProps extends TagProps {
+    /**
+     * If true, displays error styling. If passed as a valid string, displays error styling
+     * and the message as children.
+     */
+    error?: boolean | string;
+    /** Id of the component, to be used for accessibility purposes */
+    id?: string;
+    /**
+     * If true, displays warning styling. If passed as a valid string, displays warning styling
+     * and the message as children.
+     */
+    warning?: boolean | string;
+    /** Size of the validation message font */
+    size?: "small" | "medium" | "large";
+}
+declare const ValidationMessage: ({ error, id, warning, "data-element": dataElement, "data-role": dataRole, size, }: ValidationMessageProps) => React.JSX.Element | null;
+export default ValidationMessage;

package/esm/__internal__/validation-message/__next__/validation-message.component.js

@@ -0,0 +1 @@
+import{jsx as e}from"react/jsx-runtime";import"react";import t from"./validation-message.style.js";import r from"../../utils/helpers/tags/tags.js";function n(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}const o=({error:o,id:i,warning:a,"data-element":c,"data-role":s="validation-message",size:l})=>{const p=o||a;return"string"==typeof p?e(t,(u=function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},o=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),o.forEach((function(t){n(e,t,r[t])}))}return e}({id:i,$isError:Boolean(o)},r("validation-message",{"data-element":c,"data-role":s})),b=null!=(b={$size:l,children:p})?b:{},Object.getOwnPropertyDescriptors?Object.defineProperties(u,Object.getOwnPropertyDescriptors(b)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(b)).forEach((function(e){Object.defineProperty(u,e,Object.getOwnPropertyDescriptor(b,e))})),u)):null;var u,b};export{o as default};

package/esm/__internal__/validation-message/__next__/validation-message.style.d.ts

@@ -0,0 +1,6 @@
+interface StyledValidationMessageProps {
+    $isError?: boolean;
+    $size?: "small" | "medium" | "large";
+}
+declare const StyledValidationMessage: import("styled-components").StyledComponent<"span", any, StyledValidationMessageProps, never>;
+export default StyledValidationMessage;

package/esm/__internal__/validation-message/__next__/validation-message.style.js

@@ -0,0 +1 @@
+import a,{css as t}from"styled-components";import l from"./validation-message-style-overrides.style.js";const o=a.span.withConfig({displayName:"validation-message.style__StyledValidationMessage",componentId:"carbon_v162_12_0__sc-ade67d83-0"})(["",""],(({$isError:a,$size:o})=>t(["display:flex;align-items:center;align-content:center;align-self:stretch;flex-wrap:wrap;margin:0px;color:",";"," "," "," ",""],a?"var(--input-validation-label-error)":"var(--input-validation-label-warn)","large"===o&&t(["font:",";"],a?"var(--global-font-static-comp-medium-l)":"var(--global-font-static-comp-regular-l)"),"medium"===o&&t(["font:",";"],a?"var(--global-font-static-comp-medium-m)":"var(--global-font-static-comp-regular-m)"),"small"===o&&t(["font:",";"],a?"var(--global-font-static-comp-medium-s)":"var(--global-font-static-comp-regular-s)"),l)));export{o as default};

package/esm/__internal__/validation-message/index.d.ts

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

package/esm/__internal__/validation-message/index.js

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

package/esm/__internal__/validation-message/validation-message.component.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+import { TagProps } from "../../__internal__/utils/helpers/tags";
+export interface ValidationMessageProps extends TagProps {
+    /** Indicate that error has occurred
+    Pass string to display hint with error */
+    error?: boolean | string;
+    /** Id of the component, to be used for accessibility purposes */
+    validationId?: string;
+    /** Indicate that warning has occurred
+    Pass string to display hint with warning */
+    warning?: boolean | string;
+    /** Whether this component resides on a dark background */
+    isDarkBackground?: boolean;
+    /** Render the validation message above the input */
+    validationMessagePositionTop?: boolean;
+    /** Set large font-size */
+    isLarge?: boolean;
+}
+declare const ValidationMessage: ({ error, validationId, warning, isDarkBackground, "data-element": dataElement, "data-role": dataRole, validationMessagePositionTop, isLarge, }: ValidationMessageProps) => React.JSX.Element | null;
+export default ValidationMessage;

package/esm/__internal__/validation-message/validation-message.component.js

@@ -0,0 +1 @@
+import{jsx as e}from"react/jsx-runtime";import"react";import t from"./validation-message.style.js";import r from"../utils/helpers/tags/tags.js";function n(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}const o=({error:o,validationId:a,warning:i,isDarkBackground:s,"data-element":c,"data-role":l="validation-message",validationMessagePositionTop:p,isLarge:u})=>{const g=o||i;return"string"==typeof g?e(t,(b=function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},o=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),o.forEach((function(t){n(e,t,r[t])}))}return e}({id:a,isWarning:!(o||!i),isDarkBackground:s},r("validation-message",{"data-element":c,"data-role":l})),f=null!=(f={validationMessagePositionTop:p,isLarge:u,children:g})?f:{},Object.getOwnPropertyDescriptors?Object.defineProperties(b,Object.getOwnPropertyDescriptors(f)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(f)).forEach((function(e){Object.defineProperty(b,e,Object.getOwnPropertyDescriptor(f,e))})),b)):null;var b,f};export{o as default};

package/esm/__internal__/validation-message/validation-message.style.d.ts

@@ -0,0 +1,8 @@
+interface StyledValidationMessageProps {
+    isWarning?: boolean;
+    isDarkBackground?: boolean;
+    validationMessagePositionTop?: boolean;
+    isLarge?: boolean;
+}
+declare const StyledValidationMessage: import("styled-components").StyledComponent<"p", any, StyledValidationMessageProps, never>;
+export default StyledValidationMessage;