carbon-react 154.13.2 → 154.13.4

package/esm/__internal__/focus-trap/focus-trap-utils.d.ts

@@ -1,9 +1,7 @@
-type CustomRefObject<T> = {
-    current?: T | null;
-};
+import { RefObject } from "react";
 declare const defaultFocusableSelectors = "button:not([disabled]), [href], input:not([type=\"hidden\"]):not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]";
 declare const setElementFocus: (element: HTMLElement) => void;
 declare const getNextElement: (element: HTMLElement, focusableElements: HTMLElement[], shiftKey: boolean) => HTMLElement | undefined;
-declare const onTabGuardFocus: (trapWrappers: CustomRefObject<HTMLElement>[], focusableSelectors: string | undefined, position: "top" | "bottom") => (guardWrapperRef: CustomRefObject<HTMLElement>) => () => void;
+declare const onTabGuardFocus: (trapWrappers: RefObject<HTMLElement>[], focusableSelectors: string | undefined, position: "top" | "bottom") => (guardWrapperRef: RefObject<HTMLElement>) => () => void;
 declare const trapFunction: (ev: KeyboardEvent, defaultFocusableElements: HTMLElement[], isWrapperFocused: boolean, focusableSelectors?: string, bespokeTrap?: ((event: KeyboardEvent, firstElement?: HTMLElement, lastElement?: HTMLElement) => void) | undefined) => void;
 export { defaultFocusableSelectors, getNextElement, setElementFocus, onTabGuardFocus, trapFunction, };

package/esm/__internal__/focus-trap/focus-trap.component.d.ts

@@ -1,23 +1,20 @@
-import React from "react";
+import React, { RefObject } from "react";
 export declare const TAB_GUARD_TOP = "tab-guard-top";
 export declare const TAB_GUARD_BOTTOM = "tab-guard-bottom";
-export type CustomRefObject<T> = {
-    current?: T | null;
-};
 export interface FocusTrapProps {
     children: React.ReactNode;
     autoFocus?: boolean;
     /** provide a custom first element to focus */
-    focusFirstElement?: CustomRefObject<HTMLElement> | HTMLElement | null;
+    focusFirstElement?: RefObject<HTMLElement> | HTMLElement | null;
     /** a custom callback that will override the default focus trap behaviour */
     bespokeTrap?: (ev: KeyboardEvent, firstElement?: HTMLElement, lastElement?: HTMLElement) => void;
     /** optional selector to identify the focusable elements, if not provided a default selector is used */
     focusableSelectors?: string;
     /** a ref to the container wrapping the focusable elements */
-    wrapperRef: CustomRefObject<HTMLElement>;
+    wrapperRef: RefObject<HTMLElement>;
     isOpen?: boolean;
     /** an optional array of refs to containers whose content should also be reachable from the FocusTrap */
-    additionalWrapperRefs?: CustomRefObject<HTMLElement>[];
+    additionalWrapperRefs?: RefObject<HTMLElement>[];
 }
 declare const FocusTrap: ({ children, autoFocus, focusableSelectors, focusFirstElement, bespokeTrap, wrapperRef, isOpen, additionalWrapperRefs, }: FocusTrapProps) => React.JSX.Element;
 export default FocusTrap;

package/esm/__internal__/focus-trap/index.d.ts

@@ -1,2 +1,2 @@
 export { default } from "./focus-trap.component";
-export type { CustomRefObject, FocusTrapProps } from "./focus-trap.component";
+export type { FocusTrapProps } from "./focus-trap.component";

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

@@ -1,8 +1,5 @@
-import React, { MutableRefObject } from "react";
+import React, { MutableRefObject, RefObject } from "react";
 import { Placement, Middleware } from "@floating-ui/dom";
-type CustomRefObject<T> = {
-    current?: T | null;
-};
 export interface PopoverProps {
     /**
      * Element to be positioned, has to be a single node and has to accept `ref` and `style` props.
@@ -28,7 +25,7 @@ export interface PopoverProps {
     /**
      * Reference element, children will be positioned in relation to this element - should be a ref shaped object.
      */
-    reference: CustomRefObject<HTMLElement>;
+    reference: RefObject<HTMLElement>;
     /**
      * Determines if the popover is currently open/visible or not. Defaults to true.
      */

package/esm/components/date/__internal__/date-picker/date-picker.component.d.ts

@@ -1,8 +1,5 @@
-import React from "react";
+import React, { RefObject } from "react";
 import { DayPickerProps, Modifiers } from "react-day-picker";
-type CustomRefObject<T> = {
-    current?: T | null;
-};
 export interface PickerProps extends Omit<DayPickerProps, "mode" | "modifiers"> {
     modifiers?: Partial<Modifiers>;
 }
@@ -19,7 +16,7 @@ export interface DatePickerProps {
      * */
     pickerProps?: PickerProps;
     /** Element that the DatePicker will be displayed under */
-    inputElement: CustomRefObject<HTMLElement>;
+    inputElement: RefObject<HTMLElement>;
     /** Currently selected date */
     selectedDays?: Date | undefined;
     /** Callback to handle mousedown event on picker container */

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

@@ -1,8 +1,7 @@
-import React from "react";
+import React, { RefObject } from "react";
 import { ModalProps } from "../modal";
 import { TagProps } from "../../__internal__/utils/helpers/tags";
 import { DialogSizes } from "./dialog.config";
-import { CustomRefObject } from "../../__internal__/focus-trap";
 declare const PADDING_VALUES: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8];
 type PaddingValues = (typeof PADDING_VALUES)[number];
 export interface ContentPaddingInterface {
@@ -39,7 +38,7 @@ export interface DialogProps extends ModalProps, TagProps {
      */
     bespokeFocusTrap?: (ev: KeyboardEvent, firstElement?: HTMLElement, lastElement?: HTMLElement) => void;
     /** Optional reference to an element meant to be focused on open */
-    focusFirstElement?: CustomRefObject<HTMLElement> | HTMLElement | null;
+    focusFirstElement?: RefObject<HTMLElement> | HTMLElement | null;
     /** Optional selector to identify the focusable elements, if not provided a default selector is used */
     focusableSelectors?: string;
     /** Allows developers to specify a specific height for the dialog. */
@@ -66,7 +65,7 @@ export interface DialogProps extends ModalProps, TagProps {
     /** Change the background color of the content to grey */
     greyBackground?: boolean;
     /** an optional array of refs to containers whose content should also be reachable by tabbing from the dialog */
-    focusableContainers?: CustomRefObject<HTMLElement>[];
+    focusableContainers?: RefObject<HTMLElement>[];
     /** @private @internal @ignore */
     "data-component"?: string;
 }

package/esm/components/dialog-full-screen/dialog-full-screen.component.d.ts

@@ -1,6 +1,5 @@
-import React from "react";
+import React, { RefObject } from "react";
 import { ModalProps } from "../modal";
-import { CustomRefObject } from "../../__internal__/focus-trap";
 import { TagProps } from "../../__internal__/utils/helpers/tags";
 export interface DialogFullScreenProps extends Omit<ModalProps, "disableClose"> {
     /** Prop to specify the aria-describedby property of the DialogFullscreen component */
@@ -25,7 +24,7 @@ export interface DialogFullScreenProps extends Omit<ModalProps, "disableClose">
     /** remove padding from content */
     disableContentPadding?: boolean;
     /** Optional reference to an element meant to be focused on open */
-    focusFirstElement?: CustomRefObject<HTMLElement> | HTMLElement | null;
+    focusFirstElement?: RefObject<HTMLElement> | HTMLElement | null;
     /**
      * Function to replace focus trap
      * @ignore
@@ -49,7 +48,7 @@ export interface DialogFullScreenProps extends Omit<ModalProps, "disableClose">
     /** The ARIA role to be applied to the DialogFullscreen container */
     role?: string;
     /** an optional array of refs to containers whose content should also be reachable by tabbing from the dialog */
-    focusableContainers?: CustomRefObject<HTMLElement>[];
+    focusableContainers?: RefObject<HTMLElement>[];
     /** Optional selector to identify the focusable elements, if not provided a default selector is used */
     focusableSelectors?: string;
     /** A custom close event handler */

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

@@ -1,10 +1,7 @@
-import React from "react";
+import React, { RefObject } from "react";
 import { PaddingProps, WidthProps } from "styled-system";
 import { ModalProps } from "../modal";
 import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
-type CustomRefObject<T> = {
-    current?: T | null;
-};
 export interface SidebarProps extends PaddingProps, TagProps, WidthProps, Pick<ModalProps, "topModalOverride" | "restoreFocusOnClose"> {
     /** Prop to specify the aria-describedby property of the component */
     "aria-describedby"?: string;
@@ -47,7 +44,7 @@ export interface SidebarProps extends PaddingProps, TagProps, WidthProps, Pick<M
     /** Sets the size of the sidebar when open. */
     size?: "extra-small" | "small" | "medium-small" | "medium" | "medium-large" | "large" | "extra-large";
     /** an optional array of refs to containers whose content should also be reachable by tabbing from the sidebar */
-    focusableContainers?: CustomRefObject<HTMLElement>[];
+    focusableContainers?: RefObject<HTMLElement>[];
     /** Optional selector to identify the focusable elements, if not provided a default selector is used */
     focusableSelectors?: string;
     /** Padding to be set on the Sidebar header */

package/esm/components/textbox/utils.d.ts

@@ -0,0 +1,83 @@
+export interface CommonTextboxArgs {
+    prefix: string;
+    fieldHelp: string;
+    label: string;
+    labelHelp: string;
+    placeholder: string;
+}
+export declare const getCommonTextboxArgs: (isNewValidation?: boolean, autoFocusDefault?: boolean, disabledDefault?: boolean) => {
+    size: string;
+    inputIcon: undefined;
+    required: boolean;
+    characterLimit: undefined;
+    error: string;
+    warning: string;
+    fieldHelp?: string | undefined;
+    labelInline?: boolean | undefined;
+    labelWidth?: number | undefined;
+    inputWidth?: number | undefined;
+    labelAlign?: undefined;
+    tooltipId?: string | undefined;
+    disabled: boolean;
+    readOnly: boolean;
+    autoFocus: boolean;
+    prefix: string;
+    label: string;
+    labelHelp: string;
+    placeholder: string;
+    adaptiveLabelBreakpoint: undefined;
+};
+export declare const getCommonTextboxArgsWithSpecialCharacters: (args: CommonTextboxArgs) => {
+    prefix: string;
+    fieldHelp: string;
+    label: string;
+    labelHelp: string;
+    helpAriaLabel: string;
+    placeholder: string;
+};
+export declare const commonTextboxArgTypes: (isNewValidation?: boolean) => {
+    adaptiveLabelBreakpoint: {
+        control: {
+            type: string;
+        };
+    };
+    labelWidth?: {
+        control: {
+            type: string;
+            min: number;
+            max: number;
+            step: number;
+        };
+    } | undefined;
+    inputWidth?: {
+        control: {
+            type: string;
+            min: number;
+            max: number;
+            step: number;
+        };
+    } | undefined;
+    tooltipId?: {
+        control: {
+            type: string;
+        };
+    } | undefined;
+    size: {
+        options: string[];
+        control: {
+            type: string;
+        };
+    };
+    inputIcon: {
+        options: string[];
+        control: {
+            type: string;
+        };
+    };
+    labelAlign: {
+        options: string[];
+        control: {
+            type: string;
+        };
+    };
+};

package/esm/components/textbox/utils.js

@@ -0,0 +1 @@
+import{ICONS as e}from"../icon/icon-config.js";function t(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function r(e){for(var r=1;r<arguments.length;r++){var l=null!=arguments[r]?arguments[r]:{},o=Object.keys(l);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(l).filter((function(e){return Object.getOwnPropertyDescriptor(l,e).enumerable})))),o.forEach((function(r){t(e,r,l[r])}))}return e}function l(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}const o=(e=!1,t=!1,o=!1)=>l(r({disabled:o,readOnly:o,autoFocus:t,prefix:"",label:e?"Label - new validation":"Label",labelHelp:"",placeholder:"",adaptiveLabelBreakpoint:void 0},!e&&{fieldHelp:"",labelInline:!1,labelWidth:30,inputWidth:70,labelAlign:void 0,tooltipId:""}),{size:"medium",inputIcon:void 0,required:!1,characterLimit:void 0,error:"",warning:""}),n=e=>{const{prefix:t,fieldHelp:o,label:n,labelHelp:i,placeholder:p}=e;return l(r({},e),{prefix:t,fieldHelp:o,label:n,labelHelp:i,helpAriaLabel:i,placeholder:p})},i=t=>l(r({size:{options:["small","medium","large"],control:{type:"select"}},inputIcon:{options:["",...e],control:{type:"select"}},labelAlign:{options:["left","right"],control:{type:"select"}}},!t&&{labelWidth:{control:{type:"range",min:0,max:100,step:1}},inputWidth:{control:{type:"range",min:0,max:100,step:1}},tooltipId:{control:{type:"text"}}}),{adaptiveLabelBreakpoint:{control:{type:"number"}}});export{i as commonTextboxArgTypes,o as getCommonTextboxArgs,n as getCommonTextboxArgsWithSpecialCharacters};

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

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

package/esm/hooks/__internal__/useFloating/useFloating.d.ts

@@ -1,11 +1,8 @@
-/// <reference types="react" />
+import { RefObject } from "react";
 import { Strategy, Middleware, Placement } from "@floating-ui/dom";
-type CustomRefObject<T> = {
-    current?: T | null;
-};
 export interface UseFloatingProps {
     isOpen?: boolean;
-    reference: CustomRefObject<HTMLElement | null>;
+    reference: RefObject<HTMLElement | null>;
     floating: React.RefObject<HTMLElement | null>;
     strategy?: Strategy;
     middleware?: Middleware[];

package/lib/__internal__/focus-trap/focus-trap-utils.d.ts

@@ -1,9 +1,7 @@
-type CustomRefObject<T> = {
-    current?: T | null;
-};
+import { RefObject } from "react";
 declare const defaultFocusableSelectors = "button:not([disabled]), [href], input:not([type=\"hidden\"]):not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]";
 declare const setElementFocus: (element: HTMLElement) => void;
 declare const getNextElement: (element: HTMLElement, focusableElements: HTMLElement[], shiftKey: boolean) => HTMLElement | undefined;
-declare const onTabGuardFocus: (trapWrappers: CustomRefObject<HTMLElement>[], focusableSelectors: string | undefined, position: "top" | "bottom") => (guardWrapperRef: CustomRefObject<HTMLElement>) => () => void;
+declare const onTabGuardFocus: (trapWrappers: RefObject<HTMLElement>[], focusableSelectors: string | undefined, position: "top" | "bottom") => (guardWrapperRef: RefObject<HTMLElement>) => () => void;
 declare const trapFunction: (ev: KeyboardEvent, defaultFocusableElements: HTMLElement[], isWrapperFocused: boolean, focusableSelectors?: string, bespokeTrap?: ((event: KeyboardEvent, firstElement?: HTMLElement, lastElement?: HTMLElement) => void) | undefined) => void;
 export { defaultFocusableSelectors, getNextElement, setElementFocus, onTabGuardFocus, trapFunction, };

package/lib/__internal__/focus-trap/focus-trap.component.d.ts

@@ -1,23 +1,20 @@
-import React from "react";
+import React, { RefObject } from "react";
 export declare const TAB_GUARD_TOP = "tab-guard-top";
 export declare const TAB_GUARD_BOTTOM = "tab-guard-bottom";
-export type CustomRefObject<T> = {
-    current?: T | null;
-};
 export interface FocusTrapProps {
     children: React.ReactNode;
     autoFocus?: boolean;
     /** provide a custom first element to focus */
-    focusFirstElement?: CustomRefObject<HTMLElement> | HTMLElement | null;
+    focusFirstElement?: RefObject<HTMLElement> | HTMLElement | null;
     /** a custom callback that will override the default focus trap behaviour */
     bespokeTrap?: (ev: KeyboardEvent, firstElement?: HTMLElement, lastElement?: HTMLElement) => void;
     /** optional selector to identify the focusable elements, if not provided a default selector is used */
     focusableSelectors?: string;
     /** a ref to the container wrapping the focusable elements */
-    wrapperRef: CustomRefObject<HTMLElement>;
+    wrapperRef: RefObject<HTMLElement>;
     isOpen?: boolean;
     /** an optional array of refs to containers whose content should also be reachable from the FocusTrap */
-    additionalWrapperRefs?: CustomRefObject<HTMLElement>[];
+    additionalWrapperRefs?: RefObject<HTMLElement>[];
 }
 declare const FocusTrap: ({ children, autoFocus, focusableSelectors, focusFirstElement, bespokeTrap, wrapperRef, isOpen, additionalWrapperRefs, }: FocusTrapProps) => React.JSX.Element;
 export default FocusTrap;

package/lib/__internal__/focus-trap/index.d.ts

@@ -1,2 +1,2 @@
 export { default } from "./focus-trap.component";
-export type { CustomRefObject, FocusTrapProps } from "./focus-trap.component";
+export type { FocusTrapProps } from "./focus-trap.component";

package/lib/__internal__/popover/popover.component.d.ts

@@ -1,8 +1,5 @@
-import React, { MutableRefObject } from "react";
+import React, { MutableRefObject, RefObject } from "react";
 import { Placement, Middleware } from "@floating-ui/dom";
-type CustomRefObject<T> = {
-    current?: T | null;
-};
 export interface PopoverProps {
     /**
      * Element to be positioned, has to be a single node and has to accept `ref` and `style` props.
@@ -28,7 +25,7 @@ export interface PopoverProps {
     /**
      * Reference element, children will be positioned in relation to this element - should be a ref shaped object.
      */
-    reference: CustomRefObject<HTMLElement>;
+    reference: RefObject<HTMLElement>;
     /**
      * Determines if the popover is currently open/visible or not. Defaults to true.
      */

package/lib/components/date/__internal__/date-picker/date-picker.component.d.ts

@@ -1,8 +1,5 @@
-import React from "react";
+import React, { RefObject } from "react";
 import { DayPickerProps, Modifiers } from "react-day-picker";
-type CustomRefObject<T> = {
-    current?: T | null;
-};
 export interface PickerProps extends Omit<DayPickerProps, "mode" | "modifiers"> {
     modifiers?: Partial<Modifiers>;
 }
@@ -19,7 +16,7 @@ export interface DatePickerProps {
      * */
     pickerProps?: PickerProps;
     /** Element that the DatePicker will be displayed under */
-    inputElement: CustomRefObject<HTMLElement>;
+    inputElement: RefObject<HTMLElement>;
     /** Currently selected date */
     selectedDays?: Date | undefined;
     /** Callback to handle mousedown event on picker container */

package/lib/components/dialog/dialog.component.d.ts

@@ -1,8 +1,7 @@
-import React from "react";
+import React, { RefObject } from "react";
 import { ModalProps } from "../modal";
 import { TagProps } from "../../__internal__/utils/helpers/tags";
 import { DialogSizes } from "./dialog.config";
-import { CustomRefObject } from "../../__internal__/focus-trap";
 declare const PADDING_VALUES: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8];
 type PaddingValues = (typeof PADDING_VALUES)[number];
 export interface ContentPaddingInterface {
@@ -39,7 +38,7 @@ export interface DialogProps extends ModalProps, TagProps {
      */
     bespokeFocusTrap?: (ev: KeyboardEvent, firstElement?: HTMLElement, lastElement?: HTMLElement) => void;
     /** Optional reference to an element meant to be focused on open */
-    focusFirstElement?: CustomRefObject<HTMLElement> | HTMLElement | null;
+    focusFirstElement?: RefObject<HTMLElement> | HTMLElement | null;
     /** Optional selector to identify the focusable elements, if not provided a default selector is used */
     focusableSelectors?: string;
     /** Allows developers to specify a specific height for the dialog. */
@@ -66,7 +65,7 @@ export interface DialogProps extends ModalProps, TagProps {
     /** Change the background color of the content to grey */
     greyBackground?: boolean;
     /** an optional array of refs to containers whose content should also be reachable by tabbing from the dialog */
-    focusableContainers?: CustomRefObject<HTMLElement>[];
+    focusableContainers?: RefObject<HTMLElement>[];
     /** @private @internal @ignore */
     "data-component"?: string;
 }

package/lib/components/dialog-full-screen/dialog-full-screen.component.d.ts

@@ -1,6 +1,5 @@
-import React from "react";
+import React, { RefObject } from "react";
 import { ModalProps } from "../modal";
-import { CustomRefObject } from "../../__internal__/focus-trap";
 import { TagProps } from "../../__internal__/utils/helpers/tags";
 export interface DialogFullScreenProps extends Omit<ModalProps, "disableClose"> {
     /** Prop to specify the aria-describedby property of the DialogFullscreen component */
@@ -25,7 +24,7 @@ export interface DialogFullScreenProps extends Omit<ModalProps, "disableClose">
     /** remove padding from content */
     disableContentPadding?: boolean;
     /** Optional reference to an element meant to be focused on open */
-    focusFirstElement?: CustomRefObject<HTMLElement> | HTMLElement | null;
+    focusFirstElement?: RefObject<HTMLElement> | HTMLElement | null;
     /**
      * Function to replace focus trap
      * @ignore
@@ -49,7 +48,7 @@ export interface DialogFullScreenProps extends Omit<ModalProps, "disableClose">
     /** The ARIA role to be applied to the DialogFullscreen container */
     role?: string;
     /** an optional array of refs to containers whose content should also be reachable by tabbing from the dialog */
-    focusableContainers?: CustomRefObject<HTMLElement>[];
+    focusableContainers?: RefObject<HTMLElement>[];
     /** Optional selector to identify the focusable elements, if not provided a default selector is used */
     focusableSelectors?: string;
     /** A custom close event handler */

package/lib/components/sidebar/sidebar.component.d.ts

@@ -1,10 +1,7 @@
-import React from "react";
+import React, { RefObject } from "react";
 import { PaddingProps, WidthProps } from "styled-system";
 import { ModalProps } from "../modal";
 import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
-type CustomRefObject<T> = {
-    current?: T | null;
-};
 export interface SidebarProps extends PaddingProps, TagProps, WidthProps, Pick<ModalProps, "topModalOverride" | "restoreFocusOnClose"> {
     /** Prop to specify the aria-describedby property of the component */
     "aria-describedby"?: string;
@@ -47,7 +44,7 @@ export interface SidebarProps extends PaddingProps, TagProps, WidthProps, Pick<M
     /** Sets the size of the sidebar when open. */
     size?: "extra-small" | "small" | "medium-small" | "medium" | "medium-large" | "large" | "extra-large";
     /** an optional array of refs to containers whose content should also be reachable by tabbing from the sidebar */
-    focusableContainers?: CustomRefObject<HTMLElement>[];
+    focusableContainers?: RefObject<HTMLElement>[];
     /** Optional selector to identify the focusable elements, if not provided a default selector is used */
     focusableSelectors?: string;
     /** Padding to be set on the Sidebar header */

package/lib/components/textbox/utils.d.ts

@@ -0,0 +1,83 @@
+export interface CommonTextboxArgs {
+    prefix: string;
+    fieldHelp: string;
+    label: string;
+    labelHelp: string;
+    placeholder: string;
+}
+export declare const getCommonTextboxArgs: (isNewValidation?: boolean, autoFocusDefault?: boolean, disabledDefault?: boolean) => {
+    size: string;
+    inputIcon: undefined;
+    required: boolean;
+    characterLimit: undefined;
+    error: string;
+    warning: string;
+    fieldHelp?: string | undefined;
+    labelInline?: boolean | undefined;
+    labelWidth?: number | undefined;
+    inputWidth?: number | undefined;
+    labelAlign?: undefined;
+    tooltipId?: string | undefined;
+    disabled: boolean;
+    readOnly: boolean;
+    autoFocus: boolean;
+    prefix: string;
+    label: string;
+    labelHelp: string;
+    placeholder: string;
+    adaptiveLabelBreakpoint: undefined;
+};
+export declare const getCommonTextboxArgsWithSpecialCharacters: (args: CommonTextboxArgs) => {
+    prefix: string;
+    fieldHelp: string;
+    label: string;
+    labelHelp: string;
+    helpAriaLabel: string;
+    placeholder: string;
+};
+export declare const commonTextboxArgTypes: (isNewValidation?: boolean) => {
+    adaptiveLabelBreakpoint: {
+        control: {
+            type: string;
+        };
+    };
+    labelWidth?: {
+        control: {
+            type: string;
+            min: number;
+            max: number;
+            step: number;
+        };
+    } | undefined;
+    inputWidth?: {
+        control: {
+            type: string;
+            min: number;
+            max: number;
+            step: number;
+        };
+    } | undefined;
+    tooltipId?: {
+        control: {
+            type: string;
+        };
+    } | undefined;
+    size: {
+        options: string[];
+        control: {
+            type: string;
+        };
+    };
+    inputIcon: {
+        options: string[];
+        control: {
+            type: string;
+        };
+    };
+    labelAlign: {
+        options: string[];
+        control: {
+            type: string;
+        };
+    };
+};

package/lib/components/textbox/utils.js

@@ -0,0 +1 @@
+"use strict";var e=require("../icon/icon-config.js");function t(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function r(e){for(var r=1;r<arguments.length;r++){var o=null!=arguments[r]?arguments[r]:{},l=Object.keys(o);"function"==typeof Object.getOwnPropertySymbols&&(l=l.concat(Object.getOwnPropertySymbols(o).filter((function(e){return Object.getOwnPropertyDescriptor(o,e).enumerable})))),l.forEach((function(r){t(e,r,o[r])}))}return e}function o(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}exports.commonTextboxArgTypes=t=>o(r({size:{options:["small","medium","large"],control:{type:"select"}},inputIcon:{options:["",...e.ICONS],control:{type:"select"}},labelAlign:{options:["left","right"],control:{type:"select"}}},!t&&{labelWidth:{control:{type:"range",min:0,max:100,step:1}},inputWidth:{control:{type:"range",min:0,max:100,step:1}},tooltipId:{control:{type:"text"}}}),{adaptiveLabelBreakpoint:{control:{type:"number"}}}),exports.getCommonTextboxArgs=(e=!1,t=!1,l=!1)=>o(r({disabled:l,readOnly:l,autoFocus:t,prefix:"",label:e?"Label - new validation":"Label",labelHelp:"",placeholder:"",adaptiveLabelBreakpoint:void 0},!e&&{fieldHelp:"",labelInline:!1,labelWidth:30,inputWidth:70,labelAlign:void 0,tooltipId:""}),{size:"medium",inputIcon:void 0,required:!1,characterLimit:void 0,error:"",warning:""}),exports.getCommonTextboxArgsWithSpecialCharacters=e=>{const{prefix:t,fieldHelp:l,label:n,labelHelp:i,placeholder:p}=e;return o(r({},e),{prefix:t,fieldHelp:l,label:n,labelHelp:i,helpAriaLabel:i,placeholder:p})};

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("./responsive-vertical-menu.context.js"),n=require("./responsive-vertical-menu.style.js"),i=require("../../box/box.component.js"),o=require("../../modal/modal.component.js"),s=require("../../../hooks/__internal__/useIsAboveBreakpoint/useIsAboveBreakpoint.js"),u=require("../../../hooks/useMediaQuery/useMediaQuery.js"),l=require("../../../__internal__/utils/helpers/tags/tags.js"),a=require("./__internal__/depth.context.js"),c=require("./__internal__/focus.context.js"),d=require("../../../hooks/__internal__/useLocale/useLocale.js");function p(e){return e&&e.__esModule?e:{default:e}}var v=p(r);function f(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function m(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){f(e,r,t[r])}))}return e}function y(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}function h(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}const b=a=>{var c,p,{children:f,height:b,responsiveBreakpoint:j=700,width:x}=a,g=h(a,["children","height","responsiveBreakpoint","width"]);const O=d.default(),{activeMenuItem:w,buttonRef:_,containerRef:M,menuRef:k,responsiveMode:E,setActiveMenuItem:S,setReducedMotion:P,setResponsiveMode:q}=t.useResponsiveVerticalMenu(),[C,L]=r.useState(!1),[R,B]=r.useState(0),I=s.default(j),[D,T]=r.useState("auto"),[V,A]=r.useState("100%"),[z,F]=r.useState("auto"),G=r.useRef(null),Q=!u.default("screen and (prefers-reduced-motion: no-preference)"),{current:$}=k,{current:W}=_,H=r.useCallback((()=>{if(C&&E){const e=$||document.querySelector("[id='responsive-vertical-menu-primary']");e&&A(e.getBoundingClientRect().width-16+"px")}T(w&&$?`${$.getBoundingClientRect().right}px`:"auto"),F(w&&W?`${W.getBoundingClientRect().bottom}px`:"auto")}),[C,$,E,w,W]),J=r.useCallback((e=>{M.current&&!M.current.contains(e.target)&&L(!1)}),[M]),K=r.useCallback((()=>{L((e=>!e)),S(null)}),[S]);r.useLayoutEffect((()=>(H(),window.addEventListener("resize",H),()=>{var e;null===(e=window)||void 0===e||e.removeEventListener("resize",H)})),[C,H,$,E]),r.useEffect((()=>{const e=({relatedTarget:e,target:r})=>{M.current&&(M.current.contains(e)||null===e&&r!==_.current&&setTimeout((()=>{w||L(!1)}),10))},r=e=>{"Escape"===e.key&&(e.preventDefault(),L(!1))},t=M.current;return C&&!E&&(document.addEventListener("keydown",r),window.addEventListener("click",J),null==t||t.addEventListener("focusout",e)),()=>{document.removeEventListener("keydown",r),window.removeEventListener("click",J),null==t||t.removeEventListener("focusout",e)}}),[C,w,M,J,E]),r.useEffect((()=>{null==P||P(Q),null==q||q(!I)}),[I,Q,P,q]);const N=r.useCallback((e=>{if(!e)return 0;if(v.default.isValidElement(e))return 1+N(e.props.children);const r=v.default.Children.toArray(e);return r.length?r.reduce(((e,r)=>v.default.isValidElement(r)?e+1+N(r.props.children):e),0):0}),[]);return r.useEffect((()=>{const e=R,r=N(f);e!==r&&(B(r),S(null))}),[R,f,N,S]),e.jsxs("div",{ref:M,children:[e.jsx(n.StyledButton,{active:C,"aria-controls":"responsive-vertical-menu-primary","aria-expanded":C,"aria-label":null===(c=O.verticalMenu.ariaLabels)||void 0===c?void 0:c.responsiveMenuLauncher(),buttonType:"tertiary","data-component":"responsive-vertical-menu-launcher","data-role":"responsive-vertical-menu-launcher",iconType:"squares_nine",id:"responsive-vertical-menu-launcher",onClick:K,ref:_}),E?e.jsx(o.default,{open:C,children:e.jsxs(i.Box,{position:"fixed",top:0,width:V,children:[e.jsx(i.Box,{display:"flex",justifyContent:"flex-end",width:"100%",backgroundColor:"var(--colorsGray850)",p:1,children:e.jsx(n.StyledCloseButton,{"aria-label":null===(p=O.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:()=>{L(!1),S(null)}})}),e.jsx(n.StyledResponsiveMenu,{height:b,id:"responsive-vertical-menu-primary",menu:"primary",reduceMotion:Q,ref:k,responsive:!0,tabIndex:-1,top:"48px",width:x,children:f})]})}):e.jsx(n.StyledGlobalVerticalMenuWrapper,y(m({},g,l.default("responsive-vertical-menu",g)),{children:C&&e.jsxs(e.Fragment,{children:[e.jsx(n.StyledResponsiveMenu,{childOpen:!!w,"data-component":"responsive-vertical-menu-primary","data-role":"responsive-vertical-menu-primary",height:b||"100%",id:"responsive-vertical-menu-primary",menu:"primary",reduceMotion:Q,ref:k,responsive:!1,tabIndex:-1,top:z,width:x,children:f}),w?e.jsx(n.StyledResponsiveMenu,{"data-component":"responsive-vertical-menu-secondary","data-role":"responsive-vertical-menu-secondary",height:b||"100%",id:"responsive-vertical-menu-secondary",left:D,menu:"secondary",reduceMotion:Q,ref:G,responsive:!1,tabIndex:-1,top:z,width:x,children:w.children}):null]})}))]})},j=r=>{var{children:t}=r,n=h(r,["children"]);return e.jsx(a.DepthProvider,{children:e.jsx(c.MenuFocusProvider,{children:e.jsx(b,y(m({},n),{children:t}))})})};exports.ResponsiveVerticalMenu=j,exports.default=j;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("./responsive-vertical-menu.context.js"),n=require("./responsive-vertical-menu.style.js"),i=require("../../box/box.component.js"),o=require("../../modal/modal.component.js"),s=require("../../../hooks/__internal__/useIsAboveBreakpoint/useIsAboveBreakpoint.js"),u=require("../../../hooks/useMediaQuery/useMediaQuery.js"),l=require("../../../__internal__/utils/helpers/tags/tags.js"),c=require("./__internal__/depth.context.js"),a=require("./__internal__/focus.context.js"),d=require("../../../hooks/__internal__/useLocale/useLocale.js");function p(e){return e&&e.__esModule?e:{default:e}}var v=p(r);function f(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function m(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){f(e,r,t[r])}))}return e}function y(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}function h(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}const b=c=>{var a,p,{children:f,height:b,responsiveBreakpoint:j=700,width:x}=c,w=h(c,["children","height","responsiveBreakpoint","width"]);const g=d.default(),{activeMenuItem:O,buttonRef:_,containerRef:M,menuRef:k,responsiveMode:E,setActiveMenuItem:S,setReducedMotion:L,setResponsiveMode:P}=t.useResponsiveVerticalMenu(),[R,q]=r.useState(!1),[C,B]=r.useState(0),T=s.default(j),[I,D]=r.useState("auto"),[z,V]=r.useState("100%"),[A,F]=r.useState("auto"),G=r.useRef(null),Q=!u.default("screen and (prefers-reduced-motion: no-preference)"),{current:$}=k,{current:W}=_,H=r.useCallback((()=>{if(R&&E){const e=$||document.querySelector("[id='responsive-vertical-menu-primary']");e&&V(e.getBoundingClientRect().width-16+"px")}D(O&&$?`${$.getBoundingClientRect().right}px`:"auto"),F(O&&W?`${W.getBoundingClientRect().bottom}px`:"auto")}),[R,$,E,O,W]),J=r.useCallback((e=>{M.current&&!M.current.contains(e.target)&&q(!1)}),[M]),K=r.useCallback((()=>{q((e=>!e)),S(null)}),[S]);r.useLayoutEffect((()=>(H(),window.addEventListener("resize",H),()=>{var e;null===(e=window)||void 0===e||e.removeEventListener("resize",H)})),[R,H,$,E]);const N=r.useRef(!1),U=r.useRef(null);r.useEffect((()=>{const e=()=>{N.current=!0,null!==U.current&&clearTimeout(U.current),U.current=window.setTimeout((()=>{N.current=!1}),100)};return window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e),null!==U.current&&clearTimeout(U.current)}}),[]),r.useEffect((()=>{const e=({relatedTarget:e,target:r})=>{M.current&&(M.current.contains(e)||null===e&&r!==_.current&&setTimeout((()=>{O||N.current||q(!1)}),10))},r=e=>{"Escape"===e.key&&(e.preventDefault(),q(!1))},t=M.current;return R&&!E&&(document.addEventListener("keydown",r),window.addEventListener("click",J),null==t||t.addEventListener("focusout",e)),()=>{document.removeEventListener("keydown",r),window.removeEventListener("click",J),null==t||t.removeEventListener("focusout",e)}}),[R,O,_,M,J,E]),r.useEffect((()=>{null==L||L(Q),null==P||P(!T)}),[T,Q,L,P]);const X=r.useCallback((e=>{if(!e)return 0;if(v.default.isValidElement(e))return 1+X(e.props.children);const r=v.default.Children.toArray(e);return r.length?r.reduce(((e,r)=>v.default.isValidElement(r)?e+1+X(r.props.children):e),0):0}),[]);return r.useEffect((()=>{const e=C,r=X(f);e!==r&&(B(r),S(null))}),[C,f,X,S]),e.jsxs("div",{ref:M,children:[e.jsx(n.StyledButton,{active:R,"aria-controls":"responsive-vertical-menu-primary","aria-expanded":R,"aria-label":null===(a=g.verticalMenu.ariaLabels)||void 0===a?void 0:a.responsiveMenuLauncher(),buttonType:"tertiary","data-component":"responsive-vertical-menu-launcher","data-role":"responsive-vertical-menu-launcher",iconType:"squares_nine",id:"responsive-vertical-menu-launcher",onClick:K,ref:_}),E?e.jsx(o.default,{open:R,children:e.jsxs(i.Box,{position:"fixed",top:0,width:z,children:[e.jsx(i.Box,{display:"flex",justifyContent:"flex-end",width:"100%",backgroundColor:"var(--colorsGray850)",p:1,children:e.jsx(n.StyledCloseButton,{"aria-label":null===(p=g.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:()=>{q(!1),S(null)}})}),e.jsx(n.StyledResponsiveMenu,{height:b,id:"responsive-vertical-menu-primary",menu:"primary",reduceMotion:Q,ref:k,responsive:!0,tabIndex:-1,top:"48px",width:x,children:f})]})}):e.jsx(n.StyledGlobalVerticalMenuWrapper,y(m({},w,l.default("responsive-vertical-menu",w)),{children:R&&e.jsxs(e.Fragment,{children:[e.jsx(n.StyledResponsiveMenu,{childOpen:!!O,"data-component":"responsive-vertical-menu-primary","data-role":"responsive-vertical-menu-primary",height:b||"100%",id:"responsive-vertical-menu-primary",menu:"primary",reduceMotion:Q,ref:k,responsive:!1,tabIndex:-1,top:A,width:x,children:f}),O?e.jsx(n.StyledResponsiveMenu,{"data-component":"responsive-vertical-menu-secondary","data-role":"responsive-vertical-menu-secondary",height:b||"100%",id:"responsive-vertical-menu-secondary",left:I,menu:"secondary",reduceMotion:Q,ref:G,responsive:!1,tabIndex:-1,top:A,width:x,children:O.children}):null]})}))]})},j=r=>{var{children:t}=r,n=h(r,["children"]);return e.jsx(c.DepthProvider,{children:e.jsx(a.MenuFocusProvider,{children:e.jsx(b,y(m({},n),{children:t}))})})};exports.ResponsiveVerticalMenu=j,exports.default=j;

package/lib/hooks/__internal__/useFloating/useFloating.d.ts

@@ -1,11 +1,8 @@
-/// <reference types="react" />
+import { RefObject } from "react";
 import { Strategy, Middleware, Placement } from "@floating-ui/dom";
-type CustomRefObject<T> = {
-    current?: T | null;
-};
 export interface UseFloatingProps {
     isOpen?: boolean;
-    reference: CustomRefObject<HTMLElement | null>;
+    reference: RefObject<HTMLElement | null>;
     floating: React.RefObject<HTMLElement | null>;
     strategy?: Strategy;
     middleware?: Middleware[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "154.13.2",
+  "version": "154.13.4",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",