carbon-react 162.11.0 → 162.12.0-beta.1

package/esm/components/typography/list.component.d.ts

@@ -1,41 +0,0 @@
-import React from "react";
-import { TypographyProps } from "./typography.component";
-export interface ListProps extends TypographyProps {
-    children?: React.ReactNode;
-}
-export interface ListItemProps extends Omit<ListProps, "variant"> {
-    children?: React.ReactNode;
-}
-/**
- * @deprecated The List component is part of the legacy Typography system and will be removed in a future release.
- * Use the Typography component with `variant="ul"` or `variant="ol"` instead, or use proper semantic HTML list elements (ul, ol, li) with Typography components inside.
- *
- * Example migration:
- * ```tsx
- * // Before
- * <List>
- *   <ListItem>Item 1</ListItem>
- *   <ListItem>Item 2</ListItem>
- * </List>
- *
- * // After (using Typography list variants)
- * <Typography variant="ul">
- *   <Typography as="li">Item 1</Typography>
- *   <Typography as="li">Item 2</Typography>
- * </Typography>
- *
- * // After (using native HTML with Typography)
- * <ul>
- *   <li><Typography>Item 1</Typography></li>
- *   <li><Typography>Item 2</Typography></li>
- * </ul>
- * ```
- */
-declare const List: ({ children, as, variant, ...props }: ListProps) => React.JSX.Element;
-/**
- * @deprecated The ListItem component is part of the legacy Typography system and will be removed in a future release.
- * Use Typography with `as="li"` instead, or use semantic HTML li elements with Typography components inside.
- * You can use the `as` prop on Typography to inherit list styling while using Typography's text styling capabilities.
- */
-declare const ListItem: ({ children, ...props }: ListItemProps) => React.JSX.Element;
-export { List, ListItem };

package/esm/components/typography/list.component.js

@@ -1 +0,0 @@
-import{jsx as r}from"react/jsx-runtime";import{useContext as e}from"react";import{Typography as t}from"./typography.component.js";import{ListContext as n}from"./list.context.js";function o(r,e,t){return e in r?Object.defineProperty(r,e,{value:t,enumerable:!0,configurable:!0,writable:!0}):r[e]=t,r}function c(r){for(var e=1;e<arguments.length;e++){var t=null!=arguments[e]?arguments[e]:{},n=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(t).filter((function(r){return Object.getOwnPropertyDescriptor(t,r).enumerable})))),n.forEach((function(e){o(r,e,t[e])}))}return r}function i(r,e){return e=null!=e?e:{},Object.getOwnPropertyDescriptors?Object.defineProperties(r,Object.getOwnPropertyDescriptors(e)):function(r){var e=Object.keys(r);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(r);e.push.apply(e,t)}return e}(Object(e)).forEach((function(t){Object.defineProperty(r,t,Object.getOwnPropertyDescriptor(e,t))})),r}function a(r,e){if(null==r)return{};var t,n,o=function(r,e){if(null==r)return{};var t,n,o={},c=Object.keys(r);for(n=0;n<c.length;n++)t=c[n],e.indexOf(t)>=0||(o[t]=r[t]);return o}(r,e);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(r);for(n=0;n<c.length;n++)t=c[n],e.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(r,t)&&(o[t]=r[t])}return o}const l=r=>"ul"===r?"square":"decimal",p=e=>{var{children:o,as:p="ul",variant:u="p"}=e,f=a(e,["children","as","variant"]);return r(t,i(c({variant:u,as:p,listStyleType:l(p)},f),{children:r(n.Provider,{value:{variant:u},children:o})}))},u=o=>{var{children:l}=o,p=a(o,["children"]);const{variant:u}=e(n);return r(t,i(c({as:"li",m:"0 0 8px 16px"},p),{variant:u,children:l}))};export{p as List,u as ListItem};

package/esm/components/typography/list.context.d.ts

@@ -1,7 +0,0 @@
-import React from "react";
-import { VariantTypes } from "./typography.component";
-export interface ListContextProps {
-    variant?: VariantTypes;
-}
-export declare const ListContext: React.Context<ListContextProps>;
-export default ListContext;

package/esm/components/typography/list.context.js

@@ -1 +0,0 @@
-import t from"react";const e=t.createContext({});export{e as ListContext,e as default};

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

@@ -1,116 +0,0 @@
-import React from "react";
-import { SpaceProps } from "styled-system";
-import { TagProps } from "../../__internal__/utils/helpers/tags";
-import type { TypographyProps as NextTypographyProps } from "./__internal__/__next__/";
-export declare const VARIANT_TYPES: readonly ["h1-large", "h1", "h2", "h3", "h4", "h5", "segment-header", "section-heading", "segment-header-small", "segment-subheader", "section-subheading", "segment-subheader-alt", "p", "span", "small", "big", "sup", "sub", "strong", "b", "em", "ul", "ol"];
-export type VariantTypes = (typeof VARIANT_TYPES)[number];
-type DeprecatedColorAliases = "default" | "alt";
-export interface TypographyProps extends SpaceProps, TagProps, Pick<NextTypographyProps, "weight" | "size" | "fluid" | "inverse" | "overflow"> {
-    /** Override the variant component */
-    as?: React.ElementType;
-    /** Set the ID attribute of the Typography component */
-    id?: string;
-    /** Content to be rendered inside the Typography component */
-    children?: React.ReactNode;
-    /**
-     * The visual style to apply to the component. Supported variants include:
-     * h1, h2, h3, h4, h5, section-heading, section-subheading, p (default),
-     * sup, sub, strong, b, ul, ol
-     *
-     * The following variant values are deprecated with recommended alternatives:
-     * - "h1-large" -> use "h1" instead
-     * - "segment-header" -> use "section-heading" instead
-     * - "segment-header-small" -> use "section-subheading" instead
-     * - "segment-subheader" / "segment-subheader-alt" -> use "h5" instead
-     * - "span" -> use "p" instead
-     * - "small" -> use "p" with the `size` prop set to "M"
-     * - "big" -> use "h5" or "h4" depending on context, or "p" with `size` prop set to "L"
-     * - "em" -> use "strong" or "b" for semantic emphasis
-     */
-    variant?: VariantTypes;
-    /**
-     * @deprecated Use the new `size` prop for paragraphs or choose the appropriate variant for other variants. This prop will eventually be removed.
-     * Override the variant font-size */
-    fontSize?: string;
-    /**
-     * @deprecated Use the new `weight` prop for paragraphs or choose the appropriate variant for other variants. This prop will eventually be removed.
-     * Override the variant font-weight */
-    fontWeight?: string;
-    /**
-     * @deprecated Choose the appropriate variant for your use case, as each variant has its own line-height. This prop will eventually be removed.
-     * Override the variant line-height */
-    lineHeight?: string;
-    /** Override the variant text-transform */
-    textTransform?: string;
-    /** Override the variant text-decoration */
-    textDecoration?: string;
-    /** Override the variant display */
-    display?: string;
-    /**
-     * @deprecated This prop no longer has any effect. This prop will eventually be removed.
-     * Override the list-style-type */
-    listStyleType?: string;
-    /** Override the white-space */
-    whiteSpace?: string;
-    /** Override the word-break */
-    wordBreak?: string;
-    /** Override the word-wrap */
-    wordWrap?: string;
-    /** Override the text-align */
-    textAlign?: string;
-    /** Override the text-overflow */
-    textOverflow?: string;
-    /**
-     * @deprecated Use `textOverflow` and `whiteSpace` props instead. This prop will eventually be removed.
-     * Apply truncation */
-    truncate?: boolean;
-    /**
-     * Override the text color using typography token options.
-     * Supported values are: `neutral`, `subtle`, `caution`, `info`, `negative`, and `positive`.
-     * Legacy aliases `"default"` and `"alt"` map to `"neutral"` and `"subtle"` respectively.
-     */
-    color?: NextTypographyProps["color"] | DeprecatedColorAliases | string;
-    /** @deprecated Use `color` instead. */
-    tint?: NextTypographyProps["tint"];
-    /**
-     * @deprecated This prop no longer has any effect. This prop will eventually be removed.
-     * Override the backgroundColor style */
-    backgroundColor?: string;
-    /**
-     * @deprecated This prop no longer has any effect. This prop will eventually be removed.
-     * Override the bg value shorthand for backgroundColor */
-    bg?: string;
-    /**
-     * @deprecated This prop no longer has any effect. This prop will eventually be removed.
-     * Override the opacity value */
-    opacity?: string | number;
-    /** Set whether it will be visually hidden
-     * NOTE: This is for screen readers only and will make a lot of the other props redundant */
-    screenReaderOnly?: boolean;
-    /**
-     * @deprecated
-     * @private
-     * @ignore
-     * Override the default color of the rendered element to match disabled styling
-     * */
-    isDisabled?: boolean;
-    /** Make the element an aria-live region */
-    "aria-live"?: "off" | "assertive" | "polite";
-    /** Set the role of the element when it is a live region */
-    role?: "status" | "alert";
-    /** @private @ignore Set whether the component should be recognised by assistive technologies */
-    "aria-hidden"?: "true" | "false";
-    /**
-     * @private
-     * @internal
-     * @ignore
-     * Sets className for component. INTERNAL USE ONLY. */
-    className?: string;
-    /** @private @internal @ignore */
-    "data-component"?: string;
-}
-export declare const Typography: {
-    ({ variant, as, id, fluid, inverse, size, color, tint, weight, truncate, children, screenReaderOnly, "aria-live": ariaLive, "aria-hidden": ariaHidden, ...rest }: TypographyProps): React.JSX.Element;
-    displayName: string;
-};
-export default Typography;

package/esm/components/typography/typography.component.js

@@ -1 +0,0 @@
-import{jsx as e}from"react/jsx-runtime";import"react";import r from"../../__internal__/filter-object-properties/filter-object-properties.js";import{ALLOWED_CSS_TEXT_OVERRIDE_KEYS as t,TYPOGRAPHY_COLOR_TYPES as n}from"./__internal__/__next__/typography.component.js";import a from"./typography.style.js";function i(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function s(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},n=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),n.forEach((function(r){i(e,r,t[r])}))}return e}function o(e,r){return r=null!=r?r:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})),e}const l=["h1-large","h1","h2","h3","h4","h5","segment-header","section-heading","segment-header-small","segment-subheader","section-subheading","segment-subheader-alt","p","span","small","big","sup","sub","strong","b","em","ul","ol"],c=new Set(["white","#fff","#ffffff","rgb(255,255,255)","rgb(255, 255, 255)"]),u=n,h={"h1-large":"h1",h1:"h1",h2:"h2",h3:"h3",h4:"h4",h5:"h5","segment-header":"h2","segment-header-small":"h3","segment-subheader":"h5","segment-subheader-alt":"h5","section-heading":"h2","section-subheading":"h3",p:"p",span:"span",small:"small",big:"big",sup:"sup",sub:"sub",strong:"strong",em:"em",b:"b",ul:"ul",ol:"ol"},p=e=>{var r;return null!==(r=e&&h[e])&&void 0!==r?r:"p"},d=n=>{var{variant:i="p",as:l,id:h,fluid:d=!1,inverse:f=!1,size:b="M",color:g,tint:m="default",weight:y="regular",truncate:O=!1,children:j,screenReaderOnly:v=!1,"aria-live":w,"aria-hidden":P}=n,_=function(e,r){if(null==e)return{};var t,n,a=function(e,r){if(null==e)return{};var t,n,a={},i=Object.keys(e);for(n=0;n<i.length;n++)t=i[n],r.indexOf(t)>=0||(a[t]=e[t]);return a}(e,r);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)t=i[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}(n,["variant","as","id","fluid","inverse","size","color","tint","weight","truncate","children","screenReaderOnly","aria-live","aria-hidden"]);const S=(e=>{switch(e){case"h1-large":return"h1";case"segment-header":return"section-heading";case"segment-header-small":return"section-subheading";case"segment-subheader":case"segment-subheader-alt":return"h5";default:return e}})(i),x=(e=>"string"==typeof e?e.trim().toLowerCase():e)(g),D=(e=>"default"===e?"neutral":"alt"===e?"subtle":e&&u.includes(e)?e:void 0)(x),k=f||((e,r)=>!r&&!!e&&c.has(e))(x,D),z=r(_,t);return O&&(z.overflow="hidden",z.whiteSpace="nowrap",z.textOverflow="ellipsis"),e(a,o(s(o(s({variant:S,forwardedAs:l||p(i),id:h},z),{fluid:d,inverse:k,screenReaderOnly:v,"aria-live":w,"aria-hidden":P,size:b,color:D,tint:m,weight:y}),_),{children:j}))};d.displayName="Typography";export{d as Typography,l as VARIANT_TYPES,d as default};

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

@@ -1,5 +0,0 @@
-import { TypographyProps } from "./typography.component";
-declare const StyledTypography: import("styled-components").StyledComponent<({ variant, as, children, id, fluid, inverse, screenReaderOnly, size, color, tint, weight, role, "aria-hidden": ariaHidden, "aria-live": ariaLive, className, ...rest }: import("./__internal__/__next__").TypographyProps) => import("react").JSX.Element, any, {
-    theme: object;
-} & TypographyProps, "theme">;
-export default StyledTypography;

package/esm/components/typography/typography.style.js

@@ -1 +0,0 @@
-import e,{css as t}from"styled-components";import{space as o}from"styled-system";import p from"../../style/themes/apply-base-theme.js";import{Typography as s}from"./__internal__/__next__/typography.component.js";import a from"../../style/utils/visually-hidden.js";const i=e(s).attrs(p).withConfig({displayName:"typography.style__StyledTypography",componentId:"carbon_v162_10_0__sc-bec9c5e6-0"})([""," ",""],(({fontSize:e,fontWeight:o,lineHeight:p,variant:s,screenReaderOnly:i})=>t([""," "," "," margin:",";",""],e&&`font-size: ${e};`,o&&`font-weight: ${o};`,p&&`line-height: ${p};`,"p"===s?"0 0 var(--global-space-comp-l)":"0",i&&a)),o);i.displayName="Typography";export{i as default};

package/esm/components/vertical-divider/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from "./vertical-divider.component";
-export type { VerticalDividerProps } from "./vertical-divider.component";

package/esm/components/vertical-divider/index.js

@@ -1 +0,0 @@
-export{VerticalDivider as default}from"./vertical-divider.component.js";

package/esm/components/vertical-divider/vertical-divider.component.d.ts

@@ -1,35 +0,0 @@
-import { SpaceProps } from "styled-system";
-import { TagProps } from "../../__internal__/utils/helpers/tags";
-/**
- * @deprecated `VerticalDivider` has been deprecated. See the Carbon documentation for migration details.
- */
-type TintRange = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100;
-/**
- * @deprecated `VerticalDivider` has been deprecated. See the Carbon documentation for migration details.
- */
-export interface VerticalDividerProps extends SpaceProps, TagProps {
-    /** Shorthand for the height attribute */
-    h?: number | string;
-    /** Height attribute of the component */
-    height?: number | string;
-    /**
-     * Sets the display: inline css attribute on the component
-     * To be used in non-flex containers.
-     */
-    displayInline?: boolean;
-    /** Custom tint of the divider, the supported rage is 1-100 */
-    tint?: TintRange;
-    /**
-     * Set the divider to be hidden from screen readers.
-     * Please note that this cannot be overridden when inside a Menu.
-     * */
-    "aria-hidden"?: boolean;
-}
-/**
- * @deprecated `VerticalDivider` has been deprecated. See the Carbon documentation for migration details.
- */
-export declare const VerticalDivider: {
-    ({ h, height, displayInline, tint, "aria-hidden": ariaHidden, ...props }: VerticalDividerProps): JSX.Element;
-    displayName: string;
-};
-export default VerticalDivider;

package/esm/components/vertical-divider/vertical-divider.component.js

@@ -1 +0,0 @@
-import{jsx as e}from"react/jsx-runtime";import{useContext as r}from"react";import t from"../menu/__internal__/menu.context.js";import{StyledVerticalWrapper as n,StyledDivider as i}from"./vertical-divider.style.js";import o from"../../__internal__/utils/helpers/tags/tags.js";import l from"../../__internal__/utils/logger/index.js";function a(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function c(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},n=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),n.forEach((function(r){a(e,r,t[r])}))}return e}function s(e,r){return r=null!=r?r:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})),e}let p=!1;const d=a=>{var{h:d,height:u,displayInline:f=!1,tint:b=80,"aria-hidden":y}=a,O=function(e,r){if(null==e)return{};var t,n,i=function(e,r){if(null==e)return{};var t,n,i={},o=Object.keys(e);for(n=0;n<o.length;n++)t=o[n],r.indexOf(t)>=0||(i[t]=e[t]);return i}(e,r);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)t=o[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(i[t]=e[t])}return i}(a,["h","height","displayInline","tint","aria-hidden"]);p||(p=!0,l.deprecate("`VerticalDivider` is deprecated and will soon be removed. Please use `Divider` instead."));const{inMenu:m}=r(t);return e(n,s(c(s(c({"data-role":"vertical-divider",p:O.p||3,height:d||u,displayInline:f},O),{as:m?"li":"div","aria-hidden":m||y}),o("vertical-divider",O)),{children:e(i,{"data-role":"divider",tint:b})}))};d.displayName="VerticalDivider";export{d as VerticalDivider,d as default};

package/esm/components/vertical-divider/vertical-divider.style.d.ts

@@ -1,8 +0,0 @@
-import { VerticalDividerProps } from "./vertical-divider.component";
-declare const StyledVerticalWrapper: import("styled-components").StyledComponent<"div", any, {
-    theme: object;
-} & VerticalDividerProps, "theme">;
-declare const StyledDivider: import("styled-components").StyledComponent<"div", any, {
-    theme: object;
-} & Pick<VerticalDividerProps, "tint">, "theme">;
-export { StyledVerticalWrapper, StyledDivider };

package/esm/components/vertical-divider/vertical-divider.style.js

@@ -1 +0,0 @@
-import t,{css as e}from"styled-components";import{space as i}from"styled-system";import s from"../../style/themes/apply-base-theme.js";const r=t.div.attrs(s).withConfig({displayName:"vertical-divider.style__StyledVerticalWrapper",componentId:"carbon_v162_10_0__sc-b3cc6d7-0"})([""," "," ",""],i,(({height:t})=>t&&e(["height:",";"],"string"==typeof t?`${t}`:`${t}px`)),(({displayInline:t})=>t?"display: inline;":"")),d=t.div.attrs(s).withConfig({displayName:"vertical-divider.style__StyledDivider",componentId:"carbon_v162_10_0__sc-b3cc6d7-1"})(["height:100%;border-left:1px solid ",";display:inherit;"],(({theme:t,tint:e})=>t.palette.slateTint(e)));export{d as StyledDivider,r as StyledVerticalWrapper};

package/esm/components/vertical-menu/__internal__/vertical-menu.context.d.ts

@@ -1,5 +0,0 @@
-interface VerticalMenuContextType {
-    isFullScreen: boolean;
-}
-declare const VerticalMenuProvider: import("react").Provider<VerticalMenuContextType | null>, useVerticalMenuContext: () => VerticalMenuContextType;
-export { VerticalMenuProvider, useVerticalMenuContext };

package/esm/components/vertical-menu/__internal__/vertical-menu.context.js

@@ -1 +0,0 @@
-import e from"../../../__internal__/utils/createStrictContext/createStrictContext.js";const[t,r]=e({name:"VerticalMenuContext",errorMessage:"Carbon VerticalMenu: Context not found. Have you wrapped your Carbon subcomponents properly? See stack trace for more details.",defaultValue:{isFullScreen:!1}});export{t as VerticalMenuProvider,r as useVerticalMenuContext};

package/esm/components/vertical-menu/index.d.ts

@@ -1,9 +0,0 @@
-export { default as VerticalMenu } from "./vertical-menu.component";
-export type { VerticalMenuProps } from "./vertical-menu.component";
-export { default as VerticalMenuItem } from "./vertical-menu-item/vertical-menu-item.component";
-export type { VerticalMenuItemClickEvent, VerticalMenuItemProps, } from "./vertical-menu-item/vertical-menu-item.component";
-export { default as VerticalMenuFullScreen } from "./vertical-menu-full-screen/vertical-menu-full-screen.component";
-export type { VerticalMenuFullScreenProps } from "./vertical-menu-full-screen/vertical-menu-full-screen.component";
-export { default as VerticalMenuTrigger } from "./vertical-menu-trigger/vertical-menu-trigger.component";
-export type { VerticalMenuTriggerProps } from "./vertical-menu-trigger/vertical-menu-trigger.component";
-export { ResponsiveVerticalMenu, ResponsiveVerticalMenuDivider, ResponsiveVerticalMenuItem, ResponsiveVerticalMenuProvider, } from "./responsive-vertical-menu";

package/esm/components/vertical-menu/index.js

@@ -1 +0,0 @@
-export{VerticalMenu}from"./vertical-menu.component.js";export{VerticalMenuItem}from"./vertical-menu-item/vertical-menu-item.component.js";export{VerticalMenuFullScreen}from"./vertical-menu-full-screen/vertical-menu-full-screen.component.js";export{VerticalMenuTrigger}from"./vertical-menu-trigger/vertical-menu-trigger.component.js";export{ResponsiveVerticalMenuProvider}from"./responsive-vertical-menu/responsive-vertical-menu.context.js";export{ResponsiveVerticalMenu}from"./responsive-vertical-menu/responsive-vertical-menu.component.js";export{ResponsiveVerticalMenuItem}from"./responsive-vertical-menu/responsive-vertical-menu-item/responsive-vertical-menu-item.component.js";export{ResponsiveVerticalMenuDivider}from"./responsive-vertical-menu/responsive-vertical-menu-divider/responsive-vertical-menu-divider.component.js";

package/esm/components/vertical-menu/responsive-vertical-menu/__internal__/depth.context.d.ts

@@ -1,16 +0,0 @@
-/**
- * Provides context which can be used to dynamcally track the depth of a component
- * in the component tree. This is useful for components that need to know their depth
- * in the tree for styling or layout purposes.
- */
-import React, { ReactNode } from "react";
-declare const DepthContext: React.Context<number>;
-export declare const useDepth: () => number;
-export declare const DepthProvider: ({ children, value, }: {
-    children: ReactNode;
-    value?: number;
-}) => React.JSX.Element;
-export declare const IncreaseDepth: ({ children }: {
-    children: ReactNode;
-}) => React.JSX.Element;
-export default DepthContext;

package/esm/components/vertical-menu/responsive-vertical-menu/__internal__/depth.context.js

@@ -1 +0,0 @@
-import{jsx as e}from"react/jsx-runtime";import{createContext as r,useContext as t}from"react";import o from"../../../../__internal__/utils/logger/index.js";const i=r(0),n=()=>{const e=t(i);return void 0===e?(o.error("useDepth must be used within a DepthProvider. Please ensure you are using the correct context."),-1):e},u=({children:r,value:t=0})=>e(i.Provider,{value:t,children:r}),s=({children:r})=>{const t=n();return e(i.Provider,{value:t+1,children:r})};export{u as DepthProvider,s as IncreaseDepth,i as default,n as useDepth};

package/esm/components/vertical-menu/responsive-vertical-menu/index.d.ts

@@ -1,7 +0,0 @@
-export { ResponsiveVerticalMenuProvider } from "./responsive-vertical-menu.context";
-export { ResponsiveVerticalMenu } from "./responsive-vertical-menu.component";
-export type { ResponsiveVerticalMenuProps, ResponsiveVerticalMenuHandle, } from "./responsive-vertical-menu.component";
-export { ResponsiveVerticalMenuItem } from "./responsive-vertical-menu-item";
-export type { ResponsiveVerticalMenuItemProps, ResponsiveVerticalMenuItemClickEvent, } from "./responsive-vertical-menu-item";
-export { ResponsiveVerticalMenuDivider } from "./responsive-vertical-menu-divider";
-export type { ResponsiveVerticalMenuDividerProps } from "./responsive-vertical-menu-divider";

package/esm/components/vertical-menu/responsive-vertical-menu/index.js

@@ -1 +0,0 @@
-export{ResponsiveVerticalMenuProvider}from"./responsive-vertical-menu.context.js";export{ResponsiveVerticalMenu}from"./responsive-vertical-menu.component.js";export{ResponsiveVerticalMenuItem}from"./responsive-vertical-menu-item/responsive-vertical-menu-item.component.js";export{ResponsiveVerticalMenuDivider}from"./responsive-vertical-menu-divider/responsive-vertical-menu-divider.component.js";

package/esm/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu-divider/index.d.ts

@@ -1,3 +0,0 @@
-import { MarginProps } from "styled-system";
-export { default as ResponsiveVerticalMenuDivider } from "./responsive-vertical-menu-divider.component";
-export type { MarginProps as ResponsiveVerticalMenuDividerProps };

package/esm/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu-divider/index.js

@@ -1 +0,0 @@
-export{ResponsiveVerticalMenuDivider}from"./responsive-vertical-menu-divider.component.js";

package/esm/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu-divider/responsive-vertical-menu-divider.component.d.ts

@@ -1,4 +0,0 @@
-import React from "react";
-import { MarginProps } from "styled-system";
-export declare const ResponsiveVerticalMenuDivider: (props: MarginProps) => React.JSX.Element;
-export default ResponsiveVerticalMenuDivider;

package/esm/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu-divider/responsive-vertical-menu-divider.component.js

@@ -1 +0,0 @@
-import{jsx as e}from"react/jsx-runtime";import"react";import{StyledResponsiveVerticalMenuDivider as t,StyledHr as r}from"./responsive-vertical-menu-divider.style.js";import"../../../../style/utils/filter-styled-system-padding-props.js";import n from"../../../../style/utils/filter-styled-system-margin-props.js";import{useDepth as o}from"../__internal__/depth.context.js";import{useResponsiveVerticalMenu as i}from"../responsive-vertical-menu.context.js";function s(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}const c=c=>{const p=o(),{responsiveMode:l}=i();return e(t,(a=function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){s(e,t,r[t])}))}return e}({"data-component":"responsive-vertical-menu-divider","data-element":"responsive-vertical-menu-divider","data-role":"responsive-vertical-menu-divider",depth:p,responsive:l,"aria-hidden":"true"},n(c)),m=null!=(m={children:e(r,{})})?m:{},Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(m)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(m)).forEach((function(e){Object.defineProperty(a,e,Object.getOwnPropertyDescriptor(m,e))})),a));var a,m};export{c as ResponsiveVerticalMenuDivider,c as default};

package/esm/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu-divider/responsive-vertical-menu-divider.style.d.ts

@@ -1,8 +0,0 @@
-import { MarginProps } from "styled-system";
-interface StyledResponsiveVerticalMenuDividerProps {
-    depth: number;
-    responsive?: boolean;
-}
-export declare const StyledResponsiveVerticalMenuDivider: import("styled-components").StyledComponent<"div", any, StyledResponsiveVerticalMenuDividerProps, never>;
-export declare const StyledHr: import("styled-components").StyledComponent<"hr", any, MarginProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>, never>;
-export {};

package/esm/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu-divider/responsive-vertical-menu-divider.style.js

@@ -1 +0,0 @@
-import e from"styled-components";import{margin as o}from"styled-system";const i=e.div.withConfig({displayName:"responsive-vertical-menu-divider.style__StyledResponsiveVerticalMenuDivider",componentId:"carbon_v162_10_0__sc-681f134d-0"})([""," ",";"],o,(({depth:e,responsive:o})=>e>0&&o&&"max-width: 88%")),r=e.hr.withConfig({displayName:"responsive-vertical-menu-divider.style__StyledHr",componentId:"carbon_v162_10_0__sc-681f134d-1"})(["border-color:#ffffff33;border-bottom:1px;"]);export{r as StyledHr,i as StyledResponsiveVerticalMenuDivider};

package/esm/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu-item/index.d.ts

@@ -1,2 +0,0 @@
-export { default as ResponsiveVerticalMenuItem } from "./responsive-vertical-menu-item.component";
-export type { ResponsiveVerticalMenuItemProps, ResponsiveVerticalMenuItemClickEvent, } from "./responsive-vertical-menu-item.component";

package/esm/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu-item/index.js

@@ -1 +0,0 @@
-export{ResponsiveVerticalMenuItem}from"./responsive-vertical-menu-item.component.js";

package/esm/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu-item/responsive-vertical-menu-item.component.d.ts

@@ -1,33 +0,0 @@
-import React, { ReactNode } from "react";
-import { MarginProps, PaddingProps } from "styled-system";
-import { IconType } from "../../../icon";
-type AriaCurrent = Pick<React.HTMLAttributes<HTMLElement>, "aria-current">["aria-current"];
-export type ResponsiveVerticalMenuItemClickEvent = React.MouseEvent<HTMLButtonElement | HTMLAnchorElement> | React.KeyboardEvent<HTMLButtonElement | HTMLAnchorElement>;
-interface BaseItemProps extends MarginProps, PaddingProps {
-    /** The content of the menu item. This will render the menu item as a parent menu. */
-    children?: ReactNode;
-    /** Custom icon to be displayed. Takes precedence over `icon` if both are specified. */
-    customIcon?: ReactNode;
-    /** External URL or anchor link for standard HTML navigation. Providing this will render the menu item as an anchor link. */
-    href?: string;
-    /** The Carbon icon to be displayed. Defers to `customIcon` if both are defined. */
-    icon?: IconType;
-    /** The unique identifier for the menu item. */
-    id: string;
-    /** The label for the menu item. */
-    label: React.ReactNode;
-    /** A custom click handler to run when an anchor link is clicked */
-    onClick?: (event: ResponsiveVerticalMenuItemClickEvent) => void;
-    /** The rel attribute to be used for the underlying <a> tag */
-    rel?: string;
-    /** The target to use for the menu item. */
-    target?: string;
-    /** Marks the element as the current item within a navigation context. */
-    ariaCurrent?: AriaCurrent;
-}
-export interface ResponsiveVerticalMenuItemProps extends Omit<BaseItemProps, "id"> {
-    /** The unique identifier for the menu item. */
-    id?: string;
-}
-export declare const ResponsiveVerticalMenuItem: ({ children, id, label, ...props }: ResponsiveVerticalMenuItemProps) => React.JSX.Element;
-export default ResponsiveVerticalMenuItem;

package/esm/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu-item/responsive-vertical-menu-item.component.js

@@ -1 +0,0 @@
-import{jsx as e,jsxs as n,Fragment as r}from"react/jsx-runtime";import t,{useRef as i,forwardRef as o,useMemo as c,useState as l,createContext as s}from"react";import{StyledResponsiveMenu as a}from"../responsive-vertical-menu.style.js";import{StyledResponsiveMenuListItem as d,StyledResponsiveMenuItem as p,StyledIcon as u,StyledNestedMenuWrapper as m,StyledNestedMenu as v,StyledMenuItemContent as h,StyledResponsiveMenuActionButton as f,StyledResponsiveMenuActionLink as y}from"./responsive-vertical-menu-item.style.js";import"../../../../style/utils/filter-styled-system-padding-props.js";import b from"../../../../style/utils/filter-styled-system-margin-props.js";import{useDepth as O,IncreaseDepth as j}from"../__internal__/depth.context.js";import{useResponsiveVerticalMenu as g}from"../responsive-vertical-menu.context.js";import w from"../../../icon/icon.component.js";import"../../../icon/icon.style.js";import _ from"../../../../__internal__/utils/helpers/guid/index.js";import P from"../../../../__internal__/utils/helpers/events/events.js";function x(e,n,r){return n in e?Object.defineProperty(e,n,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[n]=r,e}function I(e){for(var n=1;n<arguments.length;n++){var r=null!=arguments[n]?arguments[n]:{},t=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(t=t.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),t.forEach((function(n){x(e,n,r[n])}))}return e}function C(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 r=Object.getOwnPropertySymbols(e);n.push.apply(n,r)}return n}(Object(n)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(n,r))})),e}function $(e,n){if(null==e)return{};var r,t,i=function(e,n){if(null==e)return{};var r,t,i={},o=Object.keys(e);for(t=0;t<o.length;t++)r=o[t],n.indexOf(r)>=0||(i[r]=e[r]);return i}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(t=0;t<o.length;t++)r=o[t],n.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(i[r]=e[r])}return i}const k=s(void 0),D=({customIcon:r,depth:t,hasChildren:i,icon:o,label:c,responsive:l})=>n(h,r?{"data-component":"responsive-vertical-menu-custom-icon","data-role":"responsive-vertical-menu-custom-icon",depth:t,hasChildren:i,icon:!0,responsive:l,children:[r,c]}:{"data-component":"responsive-vertical-menu-icon","data-role":"responsive-vertical-menu-icon",depth:t,hasChildren:i,icon:!!o,responsive:l,children:[o&&e(w,{type:o}),c]}),S=o(((o,s)=>{var{children:h,customIcon:j,icon:w,id:_,href:x,label:S,onClick:M,rel:K,target:E,ariaCurrent:A}=o,q=$(o,["children","customIcon","icon","id","href","label","onClick","rel","target","ariaCurrent"]);const{activeMenuItem:z,responsiveMode:B,setActive:F,setActiveMenuItem:G,reducedMotion:H,left:J,top:L,width:N,height:Q}=g(),R=O(),T=(null==z?void 0:z.id)===_,U=t.Children.count(h)>0,V=i(null),W=c((()=>B&&0===R),[R,B]),[X,Y]=l(W&&U||R>=2),Z=e=>{if(P.isEnterKey(e)||P.isSpaceKey(e)){if(U&&e.preventDefault(),!M&&P.isSpaceKey(e)&&e.preventDefault(),W)return;if(U)if(0!==R||B)Y(!X);else{const e=(null==z?void 0:z.id)===_;G(e?null:{id:_,label:S,children:h})}}},ee=e=>{null==M||M(e),F(!1)};return e(d,C(I({},b(q)),{children:U?n(r,{children:[n(p,C(I({active:T,"aria-expanded":B&&0===R?void 0:T||X,"aria-controls":T||X?B?0===R?void 0:`${_}-nested-menu-wrapper`:"responsive-vertical-menu-secondary":void 0,"data-component":`responsive-vertical-menu-item-${_}`,"data-depth":R,"data-role":`responsive-vertical-menu-item-${_}`,depth:R,hasIcon:!!w||!!j,id:_,onClick:()=>{if(!W)if(0!==R||B)Y(!X);else{const e=(null==z?void 0:z.id)===_;G(e?null:{id:_,label:S,children:h})}},onKeyDown:e=>{B||Z(e)},ref:s,responsive:B,tabIndex:W?-1:0,type:"button"},q),{children:[e(D,{customIcon:j,depth:R,hasChildren:!0,icon:w,label:S,responsive:B}),!W&&e(u,{"data-component":"responsive-vertical-menu-expander-icon","data-role":"responsive-vertical-menu-expander-icon",depth:R,expanded:X||T,reduceMotion:!!H,type:R>=1?"chevron_down_thick":"chevron_right_thick"})]})),X&&e(m,{"data-component":`${_}-nested-menu-wrapper`,"data-role":`${_}-nested-menu-wrapper`,depth:R,hasIcon:!!w||!!j,id:`${_}-nested-menu-wrapper`,responsive:B,children:e(v,{"data-component":`${_}-nested-menu`,"data-role":`${_}-nested-menu`,depth:R,hasIcon:!!w||!!j,id:`${_}-nested-menu`,responsive:B,children:e(k.Provider,{value:_,children:h})})}),T&&!B&&e(a,{"data-component":"responsive-vertical-menu-secondary","data-role":"responsive-vertical-menu-secondary",height:Q||"100%",id:"responsive-vertical-menu-secondary",left:J,menu:"secondary",reduceMotion:!1,ref:V,responsive:!1,tabIndex:-1,top:L,width:N,children:z.children})]}):(()=>{const n=I({"data-component":`responsive-vertical-menu-item-${_}`,"data-depth":R,"data-role":`responsive-vertical-menu-item-${_}`,"aria-current":A,depth:R,href:x,id:_,onClick:ee,onKeyDown:e=>{B||Z(e)},rel:K,responsive:B,tabIndex:0,target:E},q),r=e(D,{customIcon:j,depth:R,hasChildren:!1,icon:w,label:S,responsive:B});return e(M&&!x?f:y,C(I({ref:s},n),{children:r}))})()}))})),M=n=>{var{children:r,id:t,label:o}=n,c=$(n,["children","id","label"]);const l=O(),s=i(null),a=i(t||_());return e(S,C(I({id:a.current,label:o},c),{"data-depth":l,ref:s,children:r&&e(k.Provider,{value:t,children:e(j,{children:r})})}))};export{M as ResponsiveVerticalMenuItem,M as default};

package/esm/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu-item/responsive-vertical-menu-item.style.d.ts

@@ -1,41 +0,0 @@
-interface StyledMenuItemContentProps {
-    customIcon?: boolean;
-    depth: number;
-    hasChildren?: boolean;
-    icon?: boolean;
-    responsive?: boolean;
-}
-interface StyledResponsiveMenuItemProps {
-    active?: boolean;
-    depth: number;
-    hasIcon?: boolean;
-    responsive?: boolean;
-}
-interface StyledIconProps {
-    depth: number;
-    expanded: boolean;
-    reduceMotion: boolean;
-}
-export declare const StyledIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../../icon").IconProps & import("react").RefAttributes<HTMLSpanElement>>, any, StyledIconProps, never>;
-export declare const StyledMenuItemContent: import("styled-components").StyledComponent<"span", any, StyledMenuItemContentProps, never>;
-export declare const StyledNestedMenuWrapper: import("styled-components").StyledComponent<"div", any, {
-    depth: number;
-    hasIcon?: boolean;
-    responsive?: boolean;
-}, never>;
-export declare const StyledNestedMenu: import("styled-components").StyledComponent<"ul", any, {
-    depth: number;
-    hasIcon?: boolean;
-    responsive?: boolean;
-}, never>;
-export declare const StyledResponsiveMenuListItem: import("styled-components").StyledComponent<"li", any, {}, never>;
-export declare const StyledResponsiveMenuItem: import("styled-components").StyledComponent<"button", any, StyledResponsiveMenuItemProps, never>;
-export declare const StyledResponsiveMenuActionLink: import("styled-components").StyledComponent<"a", any, {
-    depth: number;
-    responsive?: boolean;
-}, never>;
-export declare const StyledResponsiveMenuActionButton: import("styled-components").StyledComponent<"button", any, {
-    depth: number;
-    responsive?: boolean;
-}, never>;
-export {};

package/esm/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu-item/responsive-vertical-menu-item.style.js

@@ -1 +0,0 @@
-import e,{css as t}from"styled-components";import{padding as o,margin as n}from"styled-system";import i from"../../../icon/icon.component.js";import"../../../icon/icon.style.js";import a from"../../../../style/utils/add-focus-styling.js";const r=(e,t)=>e&&t?"180deg":"0deg",s=t(["align-items:center;background-color:transparent;border:none;border-radius:var(--borderRadius100);box-sizing:border-box;color:var(--colorsUtilityYang100);cursor:pointer;display:flex;flex-direction:row;font-size:14px;font-weight:500;justify-content:space-between;min-height:var(--sizing500);padding:var(--spacing100) var(--spacing200);width:100%;",' &:hover{background-color:var(--colorsActionMajor500);color:var(--colorsUtilityYang100);text-decoration:none;}[data-component="icon"]{color:var(--colorsUtilityYang100);margin-right:var(--spacing100);}&:focus{',"}"],o,a(!0)),c=e(i).withConfig({displayName:"responsive-vertical-menu-item.style__StyledIcon",componentId:"carbon_v162_10_0__sc-ffae1a5b-0"})(["rotate:",";transition:rotate "," ease-in;",";"],(({depth:e,expanded:t})=>r(e,t)),(({reduceMotion:e})=>e?0:"0.2s"),(({depth:e,expanded:o,reduceMotion:n})=>o&&t(["rotate:",";transition:rotate "," ease-out;"],r(e,o),n?0:"0.2s"))),l=e.span.withConfig({displayName:"responsive-vertical-menu-item.style__StyledMenuItemContent",componentId:"carbon_v162_10_0__sc-ffae1a5b-1"})(["align-items:center;display:flex;flex-direction:row;gap:var(--spacing100);svg{margin-right:var(--spacing100);max-width:var(--sizing300);min-width:var(--sizing300);}"]),d=e.div.withConfig({displayName:"responsive-vertical-menu-item.style__StyledNestedMenuWrapper",componentId:"carbon_v162_10_0__sc-ffae1a5b-2"})(["box-sizing:border-box;display:flex;justify-content:",";width:100%;",""],(({hasIcon:e,responsive:t})=>e&&t?"flex-end":"flex-start"),(({depth:e,responsive:o})=>1===e&&o&&t(["padding:0 0 0 16px;"]))),p=e.ul.withConfig({displayName:"responsive-vertical-menu-item.style__StyledNestedMenu",componentId:"carbon_v162_10_0__sc-ffae1a5b-3"})(["padding:0;",""],(({depth:e,hasIcon:o,responsive:n})=>t(["width:",";margin-left:var(--spacing400);"," li > a{font-weight:",";}"],e<2&&!o?"100%":"88%",n&&t(["margin-left:",";"],o||1===e?"var(--spacing200)":"0"),1===e?"var(--fontWeights400)":"var(--fontWeights500)"))),v=e.li.withConfig({displayName:"responsive-vertical-menu-item.style__StyledResponsiveMenuListItem",componentId:"carbon_v162_10_0__sc-ffae1a5b-4"})(["list-style:none;"," padding:0;"],n),g=e.button.withConfig({displayName:"responsive-vertical-menu-item.style__StyledResponsiveMenuItem",componentId:"carbon_v162_10_0__sc-ffae1a5b-5"})([""," "," "," ",""],s,(({active:e,responsive:o})=>e&&!o&&t(["background-color:var(--colorsGray850);"])),(({depth:e,responsive:o})=>0===e&&o&&t(["color:var(--colorsUtilityYang080);cursor:default;"])),(({depth:e})=>e>=2&&t(['&{color:var(--colorsUtilityYang080);font-weight:var(--fontWeights400);[data-component="icon"]{color:var(--colorsUtilityYang080);}}']))),m=e.a.withConfig({displayName:"responsive-vertical-menu-item.style__StyledResponsiveMenuActionLink",componentId:"carbon_v162_10_0__sc-ffae1a5b-6"})([""," min-height:40px;text-decoration:none;",""],s,(({depth:e,responsive:o})=>e>=2&&t(["&&{color:var(--colorsUtilityYang080);font-weight:var(--fontWeights400);","}"],o&&e>=3&&t(["margin-left:var(--spacing300);"])))),_=e.button.withConfig({displayName:"responsive-vertical-menu-item.style__StyledResponsiveMenuActionButton",componentId:"carbon_v162_10_0__sc-ffae1a5b-7"})([""," min-height:40px;text-decoration:none;",""],s,(({depth:e,responsive:o})=>e>=2&&t(["&&{color:var(--colorsUtilityYang080);font-weight:var(--fontWeights400);","}"],o&&e>=3&&t(["margin-left:var(--spacing300);"]))));export{c as StyledIcon,l as StyledMenuItemContent,p as StyledNestedMenu,d as StyledNestedMenuWrapper,_ as StyledResponsiveMenuActionButton,m as StyledResponsiveMenuActionLink,g as StyledResponsiveMenuItem,v as StyledResponsiveMenuListItem};

package/esm/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu.component.d.ts

@@ -1,20 +0,0 @@
-import React, { ReactNode } from "react";
-import { TagProps } from "../../../__internal__/utils/helpers/tags";
-export interface ResponsiveVerticalMenuProps extends TagProps {
-    /** The content of the menu */
-    children?: ReactNode;
-    /** The height of the primary and secondary menus */
-    height?: string;
-    /** The value (in pixels) at which the ResponsiveVerticalMenu will become responsive/modal */
-    responsiveBreakpoint?: number;
-    /** The width of the primary and secondary menus when in default mode */
-    width?: string;
-    /** Set Menu launcher button data tag props */
-    launcherButtonDataProps?: TagProps;
-}
-export type ResponsiveVerticalMenuHandle = {
-    /** Programmatically focus on the launcher button. */
-    focusLaunchButton: () => void;
-} | null;
-export declare const ResponsiveVerticalMenu: React.ForwardRefExoticComponent<ResponsiveVerticalMenuProps & React.RefAttributes<ResponsiveVerticalMenuHandle>>;
-export default ResponsiveVerticalMenu;

package/esm/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu.component.js

@@ -1 +0,0 @@
-import{jsx as e,jsxs as r}from"react/jsx-runtime";import n,{forwardRef as t,useState as i,useRef as o,useImperativeHandle as a,useCallback as l,useLayoutEffect as s,useEffect as c}from"react";import{DepthProvider as u}from"./__internal__/depth.context.js";import{ResponsiveVerticalMenuProvider as p,useResponsiveVerticalMenu as d}from"./responsive-vertical-menu.context.js";import{StyledBackdrop as v,StyledButton as m,ModalContainer as h,StyledCloseButton as f,StyledResponsiveMenu as b,StyledGlobalVerticalMenuWrapper as y}from"./responsive-vertical-menu.style.js";import g from"../../../__internal__/modal/modal.component.js";import O from"../../../hooks/__internal__/useIsAboveBreakpoint/useIsAboveBreakpoint.js";import w from"../../../hooks/useMediaQuery/useMediaQuery.js";import j from"../../../hooks/__internal__/useLocale/useLocale.js";import _ from"../../../__internal__/focus-trap/focus-trap.component.js";import x from"../../../__internal__/utils/helpers/tags/tags.js";function M(e,r,n){return r in e?Object.defineProperty(e,r,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[r]=n,e}function k(e){for(var r=1;r<arguments.length;r++){var n=null!=arguments[r]?arguments[r]:{},t=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(t=t.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),t.forEach((function(r){M(e,r,n[r])}))}return e}function L(e,r){return r=null!=r?r:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r.push.apply(r,n)}return r}(Object(r)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(r,n))})),e}function P(e,r){if(null==e)return{};var n,t,i=function(e,r){if(null==e)return{};var n,t,i={},o=Object.keys(e);for(t=0;t<o.length;t++)n=o[t],r.indexOf(n)>=0||(i[n]=e[n]);return i}(e,r);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(t=0;t<o.length;t++)n=o[t],r.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}const E=t(((t,u)=>{var p,{children:M,height:E,responsiveBreakpoint:B=700,width:C,launcherButtonDataProps:D}=t,R=P(t,["children","height","responsiveBreakpoint","width","launcherButtonDataProps"]);const S=j(),{active:I,activeMenuItem:A,buttonRef:T,containerRef:z,menuRef:$,responsiveMode:q,top:Q,setActive:V,setActiveMenuItem:F,setReducedMotion:G,setResponsiveMode:H,setLeft:J,setTop:K}=d(),[N,U]=i(0),W=O(B),[X,Y]=i("100%"),Z=!w("screen and (prefers-reduced-motion: no-preference)"),ee=o(null),{current:re}=$,{current:ne}=T;a(u,(()=>({focusLaunchButton(){null==ne||ne.focus({preventScroll:!0})}})),[ne]);const te=l((()=>{if(I&&q){const e=re||document.querySelector("[id='responsive-vertical-menu-primary']");e&&Y(`${e.getBoundingClientRect().width}px`)}J(A&&re?`${re.getBoundingClientRect().right}px`:"auto"),K(A&&ne?`${ne.getBoundingClientRect().bottom}px`:"auto")}),[I,q,A,re,ne,J,K]);s((()=>(te(),window.addEventListener("resize",te),()=>{var e;null===(e=window)||void 0===e||e.removeEventListener("resize",te)})),[I,te,re,q]),c((()=>{const e=z.current,r=r=>{I&&!q&&W&&!(null==e?void 0:e.contains(r.relatedTarget))&&V(!1)},n=e=>{I&&!q&&"Escape"===e.key&&(e.preventDefault(),V(!1))};return null==e||e.addEventListener("focusout",r),document.addEventListener("keydown",n),()=>{null==e||e.removeEventListener("focusout",r),document.removeEventListener("keydown",n)}}),[I,z,W,q,V]),c((()=>{null==G||G(Z),null==H||H(!W)}),[W,Z,G,H]);const ie=l((e=>{if(!e)return 0;if(n.isValidElement(e))return 1+ie(e.props.children);const r=n.Children.toArray(e);return r.length?r.reduce(((e,r)=>n.isValidElement(r)?e+1+ie(r.props.children):e),0):0}),[]);return c((()=>{const e=N,r=ie(M);e!==r&&(U(r),F(null))}),[N,M,ie,F]),r("div",{ref:z,children:[I&&!q&&e(v,{onMouseDown:e=>{e.preventDefault(),V(!1)}}),e(m,k({active:I,buttonType:"tertiary",iconType:"squares_nine",id:"responsive-vertical-menu-launcher",onClick:()=>{V((e=>!e)),F(null)},ref:T},x("responsive-vertical-menu-launcher",k({"data-role":"responsive-vertical-menu-launcher"},D)),(()=>{var e,r;return q?{"aria-label":null===(r=S.verticalMenu.ariaLabels)||void 0===r?void 0:r.responsiveMenuLauncher()}:{"aria-expanded":I,"aria-controls":"responsive-vertical-menu-primary","aria-label":null===(e=S.verticalMenu.ariaLabels)||void 0===e?void 0:e.responsiveMenuLauncher()}})())),q&&e(g,{open:I,children:e(_,{wrapperRef:ee,isOpen:I,children:r(h,L(k({ref:ee,width:X,tabIndex:-1,id:"responsive-vertical-menu-dialog"},(()=>{var e;return{role:"dialog","aria-modal":!0,"aria-label":null===(e=S.verticalMenu.ariaLabels)||void 0===e?void 0:e.responsiveMenuAria()}})()),{children:[e("div",{style:{backgroundColor:"rgb(38, 38, 38)",boxSizing:"border-box",display:"flex",justifyContent:"flex-end",padding:"var(--global-space-layout-3-xs)",width:"100%"},children:e(f,{"aria-label":null===(p=S.verticalMenu.ariaLabels)||void 0===p?void 0:p.responsiveMenuCloseButton(),"data-component":"responsive-vertical-menu-close","data-role":"responsive-vertical-menu-close",iconType:"close",size:"small",buttonType:"tertiary",onClick:()=>{V(!1),F(null)}})}),e(b,{height:E,id:"responsive-vertical-menu-primary",menu:"primary",reduceMotion:Z,ref:$,responsive:!0,tabIndex:-1,top:"48px",width:C,children:M})]}))})}),I&&!q&&e(y,L(k({},R,x("responsive-vertical-menu",R)),{children:e(b,{childOpen:!!A,"data-component":"responsive-vertical-menu-primary","data-role":"responsive-vertical-menu-primary",height:E||"100%",id:"responsive-vertical-menu-primary",menu:"primary",reduceMotion:Z,ref:$,responsive:!1,tabIndex:-1,top:Q,width:C,children:M})}))]})})),B=t(((r,n)=>{var{children:t,width:i,height:o}=r,a=P(r,["children","width","height"]);return e(u,{children:e(p,{width:i,height:o,children:e(E,L(k({ref:n,width:i,height:o},a),{children:t}))})})}));export{B as ResponsiveVerticalMenu,B as default};

package/esm/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu.context.d.ts

@@ -1,40 +0,0 @@
-import React, { Dispatch, ReactNode, RefObject, SetStateAction } from "react";
-import { IconType } from "../../icon/icon-type";
-export interface ResponsiveVerticalMenuButtonItem {
-    children?: ReactNode;
-    customIcon?: ReactNode;
-    divider?: boolean;
-    href?: string;
-    icon?: IconType;
-    id: string;
-    label?: React.ReactNode;
-}
-export interface MenuContextType {
-    active: boolean;
-    activeMenuItem: ResponsiveVerticalMenuButtonItem | null;
-    buttonRef: RefObject<HTMLButtonElement>;
-    containerRef: RefObject<HTMLDivElement>;
-    menuRef: RefObject<HTMLUListElement>;
-    reducedMotion?: boolean;
-    responsiveMode?: boolean;
-    left: string;
-    top: string;
-    width?: string;
-    height?: string;
-    setActive: Dispatch<SetStateAction<boolean>>;
-    setActiveMenuItem: (item: ResponsiveVerticalMenuButtonItem | null) => void;
-    setReducedMotion?: (reducedMotion: boolean) => void;
-    setResponsiveMode?: (responsiveMode: boolean) => void;
-    setLeft: (left: string) => void;
-    setTop: (top: string) => void;
-}
-export declare const ResponsiveVerticalMenuContext: React.Context<MenuContextType | null>;
-export declare const useResponsiveVerticalMenu: () => MenuContextType;
-export interface ResponsiveVerticalMenuProviderProps {
-    children: ReactNode;
-    /** @private @internal @ignore */
-    width?: string;
-    /** @private @internal @ignore */
-    height?: string;
-}
-export declare const ResponsiveVerticalMenuProvider: ({ children, width, height, }: ResponsiveVerticalMenuProviderProps) => React.JSX.Element;

package/esm/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu.context.js

@@ -1 +0,0 @@
-import{jsx as e}from"react/jsx-runtime";import{useContext as t,useState as n,useRef as i,createContext as r}from"react";import o from"../../../__internal__/utils/logger/index.js";const s=r(null),u=()=>{const e=t(s);if(null===e)throw new Error("useResponsiveVerticalMenu must be used within a ResponsiveVerticalMenuProvider");return e};let l=!1;const c=({children:r,width:u,height:c})=>{const d=t(s);!l&&null!==d&&(l=!0,o.deprecate("`ResponsiveVerticalMenuProvider` is deprecated and no longer needed for `ResponsiveVerticalMenu`. You can use `ResponsiveVerticalMenu` directly without wrapping it in a provider."));const[a,p]=n(!1),[v,h]=n(null),m=i(null),M=i(null),f=i(null),[R,w]=n(!1),[g,V]=n(!1),[_,x]=n("auto"),[P,b]=n("auto");return e(s.Provider,{value:{active:a,activeMenuItem:v,buttonRef:m,containerRef:M,menuRef:f,reducedMotion:g,responsiveMode:R,left:_,top:P,width:u,height:c,setActive:p,setActiveMenuItem:h,setReducedMotion:V,setResponsiveMode:w,setLeft:x,setTop:b},children:r})};export{s as ResponsiveVerticalMenuContext,c as ResponsiveVerticalMenuProvider,u as useResponsiveVerticalMenu};

package/esm/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu.style.d.ts

@@ -1,23 +0,0 @@
-interface StyledResponsiveMenuProps {
-    childOpen?: boolean;
-    height?: string;
-    iconsVisible?: boolean;
-    left?: string;
-    reduceMotion: boolean;
-    responsive?: boolean;
-    menu: "primary" | "secondary" | "tertiary";
-    top?: string;
-    width?: string;
-}
-interface StyledButtonProps {
-    active?: boolean;
-}
-export declare const StyledBackdrop: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ModalContainer: import("styled-components").StyledComponent<"div", any, {
-    width: string;
-}, never>;
-export declare const StyledButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../button").ButtonProps & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement>>, any, StyledButtonProps, never>;
-export declare const StyledCloseButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../button").ButtonProps & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement>>, any, {}, never>;
-export declare const StyledGlobalVerticalMenuWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledResponsiveMenu: import("styled-components").StyledComponent<"ul", any, StyledResponsiveMenuProps, never>;
-export {};

package/esm/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu.style.js

@@ -1 +0,0 @@
-import o,{css as t}from"styled-components";import a from"../../button/button.component.js";import n from"../../../style/utils/add-focus-styling.js";const i=o.div.withConfig({displayName:"responsive-vertical-menu.style__StyledBackdrop",componentId:"carbon_v162_10_0__sc-aefcc134-0"})(["position:fixed;inset:0;"]),e=o.div.withConfig({displayName:"responsive-vertical-menu.style__ModalContainer",componentId:"carbon_v162_10_0__sc-aefcc134-1"})(["position:fixed;top:0;",""],(({width:o})=>t(["width:",";"],o))),r=o(a).withConfig({displayName:"responsive-vertical-menu.style__StyledButton",componentId:"carbon_v162_10_0__sc-aefcc134-2"})(["border-radius:0;background-color:var( ",' );&& [data-component="icon"]:not([data-color]){color:var(--colorsUtilityYang100);}&&:hover,&&:active{background-color:var(--colorsActionMinorGray700);border-color:transparent;}&&:hover [data-component="icon"]:not([data-color]),&&:active [data-component="icon"]:not([data-color]){color:var(--colorsUtilityYang100);}&:focus{appearance:none;-webkit-appearance:none;-webkit-box-shadow:',";box-shadow:",";border:1px solid black;outline:transparent 3px solid;}"],(({active:o})=>o?"--colorsActionMinorGray700":"--colorsUtilityYin100"),n(!0),n(!0)),c=o(a).withConfig({displayName:"responsive-vertical-menu.style__StyledCloseButton",componentId:"carbon_v162_10_0__sc-aefcc134-3"})(['border-radius:0;&& [data-component="icon"]:not([data-color]){color:var(--colorsUtilityYang100);}&&:hover,&&:active{background-color:var(--colorsActionMinorGray700);border-color:transparent;}&&:hover [data-component="icon"]:not([data-color]),&&:active [data-component="icon"]:not([data-color]){color:var(--colorsUtilityYang100);}']),l=o.div.withConfig({displayName:"responsive-vertical-menu.style__StyledGlobalVerticalMenuWrapper",componentId:"carbon_v162_10_0__sc-aefcc134-4"})(["background-color:black;color:white;display:flex;flex-direction:row;position:absolute;width:fit-content;"]),d=o.ul.withConfig({displayName:"responsive-vertical-menu.style__StyledResponsiveMenu",componentId:"carbon_v162_10_0__sc-aefcc134-5"})(["margin:0;padding:0;align-items:stretch;background-color:var(--colorsUtilityYin100);box-sizing:border-box;display:flex;flex-direction:column;height:",";justify-content:flex-start;overflow-y:auto;padding-bottom:var(--spacing100);",";padding-top:var(--spacing100);position:fixed;width:",";max-width:375px;z-index:1000;border-right:",";"," "," ",""],(({height:o})=>o||"100%"),(({responsive:o})=>!o&&t(["padding-left:var(--spacing200);padding-right:var(--spacing200);"])),(({width:o})=>o||"100%"),(({childOpen:o,menu:t})=>"secondary"===t||!o&&"primary"===t?"2px solid var(--colorsGray850)":"1px solid var(--colorsGray850)"),(({top:o})=>t(["top:",";max-height:calc(100% - ",");"],o,"auto"===o?"40px":o)),(({childOpen:o})=>o&&t(["padding-right:calc(var(--spacing200) + 1px);"])),(({height:o,left:a,menu:n})=>"secondary"===n&&t(["left:",";height:",";"],a,o)));export{e as ModalContainer,i as StyledBackdrop,r as StyledButton,c as StyledCloseButton,l as StyledGlobalVerticalMenuWrapper,d as StyledResponsiveMenu};