carbon-react 157.6.2 → 157.8.0

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

@@ -1,3 +1,3 @@
 export { Tabs, Tab } from "./tabs.component";
-export type { TabsProps } from "./tabs.component";
+export type { TabsProps, TabsHandle } from "./tabs.component";
 export type { TabProps } from "./tab";

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

@@ -2,6 +2,13 @@ import React from "react";
 import { MarginProps } from "styled-system";
 import Tab from "./tab";
 import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
+export type TabsHandle = {
+    /**
+     * Programmatically focus on a specific tab.
+     * @param tabId - The ID of the tab to focus. Must match the `tabId` prop of the target `Tab` component.
+     */
+    focusTab: (tabId: string) => void;
+} | null;
 export interface TabsProps extends MarginProps, TagProps {
     /** Prevent rendering of hidden tabs, by default this is set to true and therefore all tabs will be rendered */
     renderHiddenTabs?: boolean;
@@ -57,5 +64,5 @@ export interface TabsProps extends MarginProps, TagProps {
      */
     showValidationsSummary?: boolean;
 }
-declare const Tabs: ({ align, children, onTabChange, selectedTabId, renderHiddenTabs, position, extendedLine, size, borders, variant, validationStatusOverride, headerWidth, showValidationsSummary, ...rest }: TabsProps) => React.JSX.Element;
+declare const Tabs: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<TabsHandle>>;
 export { Tabs, Tab };

package/esm/components/tabs/tabs.component.js

@@ -1 +1 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useMemo as r,Children as n,createRef as i,useRef as o,useState as a,useContext as s,useCallback as l,useEffect as d,createElement as p,cloneElement as c}from"react";export{Tab}from"./tab/tab.component.js";import b from"../../__internal__/utils/helpers/events/events.js";import u from"../../__internal__/utils/helpers/tags/tags.js";import f from"../../__internal__/utils/logger/index.js";import g from"./tabs.style.js";import h from"./__internal__/tabs-header/tabs-header.component.js";import m from"./__internal__/tab-title/tab-title.component.js";import y from"../drawer/__internal__/drawer-sidebar.context.js";function v(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function O(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){v(e,t,r[t])}))}return e}function w(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}let j=!1,_=!1,I=!1,T=!1,S=!1;const P=v=>{var{align:P="left",children:x,onTabChange:L,selectedTabId:W,renderHiddenTabs:k=!0,position:E="top",extendedLine:D=!0,size:M,borders:$="off",variant:K="default",validationStatusOverride:z,headerWidth:B,showValidationsSummary:C}=v,H=function(e,t){if(null==e)return{};var r,n,i=function(e,t){if(null==e)return{};var r,n,i={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(i[r]=e[r]);return i}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(i[r]=e[r])}return i}(v,["align","children","onTabChange","selectedTabId","renderHiddenTabs","position","extendedLine","size","borders","variant","validationStatusOverride","headerWidth","showValidationsSummary"]);S||(f.deprecate("The current implementation of the `Tabs` component is deprecated and will be changing in a future release."),S=!0),C&&!T&&(f.deprecate("The `showValidationsSummary` prop in the `Tabs` component is deprecated and will be removed in a future release."),T=!0),"right"!==P||j||(f.deprecate("Support for the `right` value of `align` in the `Tabs` component is deprecated and will be removed in a future release."),j=!0),D||_||(f.deprecate("The `extendedLine` prop in the `Tabs` component is deprecated and will be removed in a future release."),_=!0),"off"===$||I||(f.deprecate("The `borders` prop in the `Tabs` component is deprecated and will be removed in a future release."),I=!0),"left"!==E&&void 0!==B&&f.error("Invalid usage of prop headerWidth in Tabs. The headerWidth can be used only if position is set to left");const R=r((()=>n.toArray(x).filter((e=>e))),[x]),V=r((()=>R.map((e=>e.props.tabId))),[R]),A=r((()=>Array.from({length:R.length}).map((()=>i()))),[R.length]),U=o(W),[q,F]=a(W||R[0].props.tabId),{isInSidebar:G}=s(y),[J,N]=a({}),[Q,X]=a({}),[Y,Z]=a({}),ee=l(((e,t)=>{N((r=>w(O({},r),{[e]:t})))}),[]),te=l(((e,t)=>{X((r=>w(O({},r),{[e]:t})))}),[]),re=l(((e,t)=>{Z((r=>w(O({},r),{[e]:t})))}),[]),ne=l((e=>e===q),[q]),ie=l((e=>{ne(e)||F(e),L&&L(e)}),[L,ne]),oe=l((()=>{const{current:e}=U,t=e?V.indexOf(e):-1;var r;-1!==t&&(null===(r=A[t].current)||void 0===r||r.blur())}),[V,A]);d((()=>{U.current!==W&&(W!==q&&(F(W),oe()),U.current=W)}),[oe,U,W,q]);const ae=e=>t=>{b.isEventType(t,"keydown")||ie(e)},se=(e,t)=>{e.preventDefault();let r=t;t<0?r=V.length-1:t===V.length&&(r=0),(e=>{var t,r;null===(t=e.current)||void 0===t||t.focus();const n=null===(r=e.current)||void 0===r?void 0:r.getBoundingClientRect();var i;n&&(n.top>=0&&n.left>=0&&n.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&n.right<=(window.innerWidth||document.documentElement.clientWidth)||null===(i=e.current)||void 0===i||i.scrollIntoView({behavior:"auto",inline:"center"}))})(A[r])},le=e=>t=>{const r=G||"left"===E,n=r&&b.isUpKey(t),i=r&&b.isDownKey(t),o=!r&&b.isLeftKey(t),a=!r&&b.isRightKey(t);n||o?se(t,e-1):(i||a)&&se(t,e+1)};return e(g,w(O({position:G?"left":E,"data-role":"tabs",isInSidebar:G,headerWidth:B},H,u("tabs",H)),{children:[(()=>{const e=R.map(((e,t)=>{const{tabId:r,title:n,siblings:i,titlePosition:o,errorMessage:a,warningMessage:s,infoMessage:l,href:d,customLayout:c,titleProps:b}=e.props,u=`${r}-tab`,f=J[r],g=Q[r],h=Y[r],y=f&&Object.entries(f).filter((e=>e[1])).length,v=g&&Object.entries(g).filter((e=>e[1])).length,j=h&&Object.entries(h).filter((e=>e[1])).length,_=z&&z[r],I=_&&z[r].error,T=_&&z[r].warning,S=_&&z[r].info,x=void 0!==I?I:!!y,L=void 0!==T?T:!!v&&!x,W=void 0!==S?S:!!j&&!x&&!L,k=(e,t={})=>{const r=Object.values(t).filter((e=>e&&"string"==typeof e));return C&&r.length?1===r.length?r[0]:r.map((e=>`• ${e}`)).join("\n"):e};return p(m,w(O({},b),{position:G?"left":E,dataTabId:r,id:u,key:r,onClick:ae(r),onKeyDown:le(t),ref:A[t],tabIndex:ne(r)?0:-1,title:n,href:d,isTabSelected:ne(r),error:x,warning:L,info:W,size:M||"default",borders:"off"!==$,siblings:i,titlePosition:o,errorMessage:k(a,f),warningMessage:k(s,g),infoMessage:k(l,h),alternateStyling:"alternate"===K,noLeftBorder:["no left side","no sides"].includes($),noRightBorder:["no right side","no sides"].includes($),customLayout:c,isInSidebar:G,align:P}))}));return t(h,{align:P,position:G?"left":E,role:"tablist",extendedLine:D,noRightBorder:["no right side","no sides"].includes($),isInSidebar:G,size:M||"default",children:e})})(),(()=>{if(G)return null;if(!k){const e=R.find((e=>ne(e.props.tabId)));return e&&c(e,w(O({},e.props),{role:"tabpanel",position:E,isTabSelected:ne(e.props.tabId),key:`${e.props.tabId}-tab`,ariaLabelledby:`${e.props.tabId}-tab`,updateErrors:ee,updateWarnings:te,updateInfos:re}))}return R.map((e=>c(e,w(O({},e.props),{role:"tabpanel",position:E,isTabSelected:ne(e.props.tabId),key:`${e.props.tabId}-tab`,ariaLabelledby:`${e.props.tabId}-tab`,updateErrors:ee,updateWarnings:te,updateInfos:re}))))})()]}))};export{P as Tabs};
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{forwardRef as r,useMemo as n,Children as i,createRef as o,useRef as a,useState as s,useContext as l,useCallback as d,useEffect as p,useImperativeHandle as c,createElement as b,cloneElement as u}from"react";export{Tab}from"./tab/tab.component.js";import f from"../../__internal__/utils/helpers/events/events.js";import g from"../../__internal__/utils/helpers/tags/tags.js";import h from"../../__internal__/utils/logger/index.js";import m from"./tabs.style.js";import y from"./__internal__/tabs-header/tabs-header.component.js";import v from"./__internal__/tab-title/tab-title.component.js";import O from"../drawer/__internal__/drawer-sidebar.context.js";function w(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function j(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){w(e,t,r[t])}))}return e}function I(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}let T=!1,_=!1,S=!1,P=!1,x=!1;const L=r(((r,w)=>{var{align:L="left",children:W,onTabChange:k,selectedTabId:E,renderHiddenTabs:D=!0,position:M="top",extendedLine:$=!0,size:K,borders:z="off",variant:B="default",validationStatusOverride:C,headerWidth:H,showValidationsSummary:R}=r,V=function(e,t){if(null==e)return{};var r,n,i=function(e,t){if(null==e)return{};var r,n,i={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(i[r]=e[r]);return i}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(i[r]=e[r])}return i}(r,["align","children","onTabChange","selectedTabId","renderHiddenTabs","position","extendedLine","size","borders","variant","validationStatusOverride","headerWidth","showValidationsSummary"]);x||(h.deprecate("The current implementation of the `Tabs` component is deprecated and will be changing in a future release."),x=!0),R&&!P&&(h.deprecate("The `showValidationsSummary` prop in the `Tabs` component is deprecated and will be removed in a future release."),P=!0),"right"!==L||T||(h.deprecate("Support for the `right` value of `align` in the `Tabs` component is deprecated and will be removed in a future release."),T=!0),$||_||(h.deprecate("The `extendedLine` prop in the `Tabs` component is deprecated and will be removed in a future release."),_=!0),"off"===z||S||(h.deprecate("The `borders` prop in the `Tabs` component is deprecated and will be removed in a future release."),S=!0),"left"!==M&&void 0!==H&&h.error("Invalid usage of prop headerWidth in Tabs. The headerWidth can be used only if position is set to left");const A=n((()=>i.toArray(W).filter((e=>e))),[W]),U=n((()=>A.map((e=>e.props.tabId))),[A]),q=n((()=>Array.from({length:A.length}).map((()=>o()))),[A.length]),F=a(E),[G,J]=s(E||A[0].props.tabId),{isInSidebar:N}=l(O),[Q,X]=s({}),[Y,Z]=s({}),[ee,te]=s({}),re=d(((e,t)=>{X((r=>I(j({},r),{[e]:t})))}),[]),ne=d(((e,t)=>{Z((r=>I(j({},r),{[e]:t})))}),[]),ie=d(((e,t)=>{te((r=>I(j({},r),{[e]:t})))}),[]),oe=d((e=>e===G),[G]),ae=d((e=>{oe(e)||J(e),k&&k(e)}),[k,oe]),se=d((()=>{const{current:e}=F,t=e?U.indexOf(e):-1;var r;-1!==t&&(null===(r=q[t].current)||void 0===r||r.blur())}),[U,q]);p((()=>{F.current!==E&&(E!==G&&(J(E),se()),F.current=E)}),[se,F,E,G]);const le=e=>t=>{f.isEventType(t,"keydown")||ae(e)},de=e=>{var t,r;null===(t=e.current)||void 0===t||t.focus();const n=null===(r=e.current)||void 0===r?void 0:r.getBoundingClientRect();var i;n&&(n.top>=0&&n.left>=0&&n.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&n.right<=(window.innerWidth||document.documentElement.clientWidth)||null===(i=e.current)||void 0===i||i.scrollIntoView({behavior:"auto",inline:"center"}))},pe=(e,t)=>{e.preventDefault();let r=t;t<0?r=U.length-1:t===U.length&&(r=0);const n=q[r];de(n)},ce=e=>t=>{const r=N||"left"===M,n=r&&f.isUpKey(t),i=r&&f.isDownKey(t),o=!r&&f.isLeftKey(t),a=!r&&f.isRightKey(t);n||o?pe(t,e-1):(i||a)&&pe(t,e+1)};return c(w,(()=>({focusTab(e){const t=q[A.findIndex((t=>t.props.tabId===e))];t&&de(t)}})),[A,q]),e(m,I(j({position:N?"left":M,"data-role":"tabs",isInSidebar:N,headerWidth:H},V,g("tabs",V)),{children:[(()=>{const e=A.map(((e,t)=>{const{tabId:r,title:n,siblings:i,titlePosition:o,errorMessage:a,warningMessage:s,infoMessage:l,href:d,customLayout:p,titleProps:c}=e.props,u=`${r}-tab`,f=Q[r],g=Y[r],h=ee[r],m=f&&Object.entries(f).filter((e=>e[1])).length,y=g&&Object.entries(g).filter((e=>e[1])).length,O=h&&Object.entries(h).filter((e=>e[1])).length,w=C&&C[r],T=w&&C[r].error,_=w&&C[r].warning,S=w&&C[r].info,P=void 0!==T?T:!!m,x=void 0!==_?_:!!y&&!P,W=void 0!==S?S:!!O&&!P&&!x,k=(e,t={})=>{const r=Object.values(t).filter((e=>e&&"string"==typeof e));return R&&r.length?1===r.length?r[0]:r.map((e=>`• ${e}`)).join("\n"):e};return b(v,I(j({},c),{position:N?"left":M,dataTabId:r,id:u,key:r,onClick:le(r),onKeyDown:ce(t),ref:q[t],tabIndex:oe(r)?0:-1,title:n,href:d,isTabSelected:oe(r),error:P,warning:x,info:W,size:K||"default",borders:"off"!==z,siblings:i,titlePosition:o,errorMessage:k(a,f),warningMessage:k(s,g),infoMessage:k(l,h),alternateStyling:"alternate"===B,noLeftBorder:["no left side","no sides"].includes(z),noRightBorder:["no right side","no sides"].includes(z),customLayout:p,isInSidebar:N,align:L}))}));return t(y,{align:L,position:N?"left":M,role:"tablist",extendedLine:$,noRightBorder:["no right side","no sides"].includes(z),isInSidebar:N,size:K||"default",children:e})})(),(()=>{if(N)return null;if(!D){const e=A.find((e=>oe(e.props.tabId)));return e&&u(e,I(j({},e.props),{role:"tabpanel",position:M,isTabSelected:oe(e.props.tabId),key:`${e.props.tabId}-tab`,ariaLabelledby:`${e.props.tabId}-tab`,updateErrors:re,updateWarnings:ne,updateInfos:ie}))}return A.map((e=>u(e,I(j({},e.props),{role:"tabpanel",position:M,isTabSelected:oe(e.props.tabId),key:`${e.props.tabId}-tab`,ariaLabelledby:`${e.props.tabId}-tab`,updateErrors:re,updateWarnings:ne,updateInfos:ie}))))})()]}))}));export{L as Tabs};

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

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

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

@@ -12,5 +12,9 @@ export interface ResponsiveVerticalMenuProps extends TagProps {
     /** Set Menu launcher button data tag props */
     launcherButtonDataProps?: TagProps;
 }
-export declare const ResponsiveVerticalMenu: ({ children, width, height, ...props }: ResponsiveVerticalMenuProps) => React.JSX.Element;
+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 +1 @@
-import{jsx as e,jsxs as r,Fragment as n}from"react/jsx-runtime";import t,{useState as i,useRef as o,useCallback as l,useLayoutEffect as a,useEffect as c}from"react";import{DepthProvider as s}from"./__internal__/depth.context.js";import{MenuFocusProvider as u}from"./__internal__/focus.context.js";import{ResponsiveVerticalMenuProvider as d,useResponsiveVerticalMenu as p}from"./responsive-vertical-menu.context.js";import{StyledButton as v,ModalContainer as m,StyledCloseButton as h,StyledResponsiveMenu as f,StyledGlobalVerticalMenuWrapper as b}from"./responsive-vertical-menu.style.js";import{Box as y}from"../../box/box.component.js";import w from"../../modal/modal.component.js";import g from"../../../hooks/__internal__/useIsAboveBreakpoint/useIsAboveBreakpoint.js";import j from"../../../hooks/useMediaQuery/useMediaQuery.js";import O from"../../../hooks/__internal__/useLocale/useLocale.js";import _ from"../../../__internal__/focus-trap/focus-trap.component.js";import x from"../../../__internal__/utils/helpers/tags/tags.js";import L from"../../../__internal__/utils/helpers/events/events.js";function k(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(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){k(e,r,n[r])}))}return e}function M(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 T=s=>{var u,{children:d,height:k,responsiveBreakpoint:T=700,width:B,launcherButtonDataProps:C}=s,R=P(s,["children","height","responsiveBreakpoint","width","launcherButtonDataProps"]);const I=O(),{active:S,activeMenuItem:D,buttonRef:z,containerRef:A,menuRef:$,responsiveMode:q,top:Q,setActive:V,setActiveMenuItem:G,setReducedMotion:F,setResponsiveMode:H,setLeft:J,setTop:K}=p(),[N,U]=i(0),W=g(T),[X,Y]=i("100%"),Z=!j("screen and (prefers-reduced-motion: no-preference)"),ee=o(null),{current:re}=$,{current:ne}=z,te=l((()=>{if(S&&q){const e=re||document.querySelector("[id='responsive-vertical-menu-primary']");e&&Y(`${e.getBoundingClientRect().width}px`)}J(D&&re?`${re.getBoundingClientRect().right}px`:"auto"),K(D&&ne?`${ne.getBoundingClientRect().bottom}px`:"auto")}),[S,re,q,D,ne]),ie=l((e=>{A.current&&!A.current.contains(e.target)&&V(!1)}),[A]),oe=l((()=>{V((e=>!e)),G(null)}),[S,V,G]);a((()=>(te(),window.addEventListener("resize",te),()=>{var e;null===(e=window)||void 0===e||e.removeEventListener("resize",te)})),[S,te,re,q]);const le=o(!1),ae=o(null);c((()=>{const e=()=>{le.current=!0,null!==ae.current&&clearTimeout(ae.current),ae.current=window.setTimeout((()=>{le.current=!1}),100)};return window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e),null!==ae.current&&clearTimeout(ae.current)}}),[]),c((()=>{let e=null;const r=r=>{A.current&&(L.composedPath(r).includes(z.current)||(e&&(clearTimeout(e),e=null),e=setTimeout((()=>{var e;(null===(e=A.current)||void 0===e?void 0:e.contains(document.activeElement))||V(!1)}),0)))},n=e=>{"Escape"===e.key&&(e.preventDefault(),V(!1))},t=A.current;return S&&!q&&(document.addEventListener("keydown",n),window.addEventListener("click",ie),null==t||t.addEventListener("focusout",r)),()=>{document.removeEventListener("keydown",n),window.removeEventListener("click",ie),null==t||t.removeEventListener("focusout",r),e&&clearTimeout(e),e=null}}),[S,D,z,A,ie,q]),c((()=>{null==F||F(Z),null==H||H(!W)}),[W,Z,F,H]);const ce=l((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 c((()=>{const e=N,r=ce(d);e!==r&&(U(r),G(null))}),[N,d,ce,G]),r("div",{ref:A,children:[e(v,E({active:S,buttonType:"tertiary",iconType:"squares_nine",id:"responsive-vertical-menu-launcher",onClick:oe,ref:z},x("responsive-vertical-menu-launcher",E({"data-role":"responsive-vertical-menu-launcher"},C)),(()=>{var e,r;return q?{"aria-expanded":void 0,"aria-controls":"responsive-vertical-menu-dialog","aria-label":null===(r=I.verticalMenu.ariaLabels)||void 0===r?void 0:r.responsiveMenuLauncher()}:{"aria-expanded":S,"aria-controls":"responsive-vertical-menu-primary","aria-label":null===(e=I.verticalMenu.ariaLabels)||void 0===e?void 0:e.responsiveMenuLauncher()}})())),q?e(w,{open:S,children:e(_,{wrapperRef:ee,isOpen:S,children:r(m,M(E({ref:ee,width:X,tabIndex:-1,id:"responsive-vertical-menu-dialog"},(()=>{var e;return{role:"dialog","aria-modal":!0,"aria-label":null===(e=I.verticalMenu.ariaLabels)||void 0===e?void 0:e.responsiveMenuAria()}})()),{children:[e(y,{boxSizing:"border-box",display:"flex",justifyContent:"flex-end",width:"100%",backgroundColor:"var(--colorsGray850)",p:1,children:e(h,{"aria-label":null===(u=I.verticalMenu.ariaLabels)||void 0===u?void 0:u.responsiveMenuCloseButton(),"data-component":"responsive-vertical-menu-close","data-role":"responsive-vertical-menu-close",iconType:"close",size:"small",buttonType:"tertiary",onClick:()=>{V(!1),G(null)}})}),e(f,{height:k,id:"responsive-vertical-menu-primary",menu:"primary",reduceMotion:Z,ref:$,responsive:!0,tabIndex:-1,top:"48px",width:B,children:d})]}))})}):e(b,M(E({},R,x("responsive-vertical-menu",R)),{children:S&&e(n,{children:e(f,{childOpen:!!D,"data-component":"responsive-vertical-menu-primary","data-role":"responsive-vertical-menu-primary",height:k||"100%",id:"responsive-vertical-menu-primary",menu:"primary",reduceMotion:Z,ref:$,responsive:!1,tabIndex:-1,top:Q,width:B,children:d})})}))]})},B=r=>{var{children:n,width:t,height:i}=r,o=P(r,["children","width","height"]);return e(s,{children:e(u,{children:e(d,{width:t,height:i,children:e(T,M(E({width:t,height:i},o),{children:n}))})})})};export{B as ResponsiveVerticalMenu,B as default};
+import{jsx as e,jsxs as r,Fragment as n}from"react/jsx-runtime";import t,{forwardRef as i,useState as o,useRef as l,useImperativeHandle as a,useCallback as c,useLayoutEffect as s,useEffect as u}from"react";import{DepthProvider as d}from"./__internal__/depth.context.js";import{MenuFocusProvider as p}from"./__internal__/focus.context.js";import{ResponsiveVerticalMenuProvider as v,useResponsiveVerticalMenu as m}from"./responsive-vertical-menu.context.js";import{StyledButton as h,ModalContainer as f,StyledCloseButton as b,StyledResponsiveMenu as y,StyledGlobalVerticalMenuWrapper as w}from"./responsive-vertical-menu.style.js";import{Box as g}from"../../box/box.component.js";import j from"../../modal/modal.component.js";import O from"../../../hooks/__internal__/useIsAboveBreakpoint/useIsAboveBreakpoint.js";import _ from"../../../hooks/useMediaQuery/useMediaQuery.js";import x from"../../../hooks/__internal__/useLocale/useLocale.js";import L from"../../../__internal__/focus-trap/focus-trap.component.js";import k from"../../../__internal__/utils/helpers/tags/tags.js";import E from"../../../__internal__/utils/helpers/events/events.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 P(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 B(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 T(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 C=i(((i,d)=>{var p,{children:v,height:M,responsiveBreakpoint:C=700,width:R,launcherButtonDataProps:S}=i,I=T(i,["children","height","responsiveBreakpoint","width","launcherButtonDataProps"]);const D=x(),{active:z,activeMenuItem:A,buttonRef:$,containerRef:q,menuRef:Q,responsiveMode:V,top:G,setActive:F,setActiveMenuItem:H,setReducedMotion:J,setResponsiveMode:K,setLeft:N,setTop:U}=m(),[W,X]=o(0),Y=O(C),[Z,ee]=o("100%"),re=!_("screen and (prefers-reduced-motion: no-preference)"),ne=l(null),{current:te}=Q,{current:ie}=$;a(d,(()=>({focusLaunchButton(){null==ie||ie.focus({preventScroll:!0})}})),[ie]);const oe=c((()=>{if(z&&V){const e=te||document.querySelector("[id='responsive-vertical-menu-primary']");e&&ee(`${e.getBoundingClientRect().width}px`)}N(A&&te?`${te.getBoundingClientRect().right}px`:"auto"),U(A&&ie?`${ie.getBoundingClientRect().bottom}px`:"auto")}),[z,te,V,A,ie]),le=c((e=>{q.current&&!q.current.contains(e.target)&&F(!1)}),[q]),ae=c((()=>{F((e=>!e)),H(null)}),[z,F,H]);s((()=>(oe(),window.addEventListener("resize",oe),()=>{var e;null===(e=window)||void 0===e||e.removeEventListener("resize",oe)})),[z,oe,te,V]);const ce=l(!1),se=l(null);u((()=>{const e=()=>{ce.current=!0,null!==se.current&&clearTimeout(se.current),se.current=window.setTimeout((()=>{ce.current=!1}),100)};return window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e),null!==se.current&&clearTimeout(se.current)}}),[]),u((()=>{let e=null;const r=r=>{q.current&&(E.composedPath(r).includes($.current)||(e&&(clearTimeout(e),e=null),e=setTimeout((()=>{var e;(null===(e=q.current)||void 0===e?void 0:e.contains(document.activeElement))||F(!1)}),0)))},n=e=>{"Escape"===e.key&&(e.preventDefault(),F(!1))},t=q.current;return z&&!V&&(document.addEventListener("keydown",n),window.addEventListener("click",le),null==t||t.addEventListener("focusout",r)),()=>{document.removeEventListener("keydown",n),window.removeEventListener("click",le),null==t||t.removeEventListener("focusout",r),e&&clearTimeout(e),e=null}}),[z,A,$,q,le,V]),u((()=>{null==J||J(re),null==K||K(!Y)}),[Y,re,J,K]);const ue=c((e=>{if(!e)return 0;if(t.isValidElement(e))return 1+ue(e.props.children);const r=t.Children.toArray(e);return r.length?r.reduce(((e,r)=>t.isValidElement(r)?e+1+ue(r.props.children):e),0):0}),[]);return u((()=>{const e=W,r=ue(v);e!==r&&(X(r),H(null))}),[W,v,ue,H]),r("div",{ref:q,children:[e(h,P({active:z,buttonType:"tertiary",iconType:"squares_nine",id:"responsive-vertical-menu-launcher",onClick:ae,ref:$},k("responsive-vertical-menu-launcher",P({"data-role":"responsive-vertical-menu-launcher"},S)),(()=>{var e,r;return V?{"aria-expanded":void 0,"aria-controls":"responsive-vertical-menu-dialog","aria-label":null===(r=D.verticalMenu.ariaLabels)||void 0===r?void 0:r.responsiveMenuLauncher()}:{"aria-expanded":z,"aria-controls":"responsive-vertical-menu-primary","aria-label":null===(e=D.verticalMenu.ariaLabels)||void 0===e?void 0:e.responsiveMenuLauncher()}})())),V?e(j,{open:z,children:e(L,{wrapperRef:ne,isOpen:z,children:r(f,B(P({ref:ne,width:Z,tabIndex:-1,id:"responsive-vertical-menu-dialog"},(()=>{var e;return{role:"dialog","aria-modal":!0,"aria-label":null===(e=D.verticalMenu.ariaLabels)||void 0===e?void 0:e.responsiveMenuAria()}})()),{children:[e(g,{boxSizing:"border-box",display:"flex",justifyContent:"flex-end",width:"100%",backgroundColor:"var(--colorsGray850)",p:1,children:e(b,{"aria-label":null===(p=D.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:()=>{F(!1),H(null)}})}),e(y,{height:M,id:"responsive-vertical-menu-primary",menu:"primary",reduceMotion:re,ref:Q,responsive:!0,tabIndex:-1,top:"48px",width:R,children:v})]}))})}):e(w,B(P({},I,k("responsive-vertical-menu",I)),{children:z&&e(n,{children:e(y,{childOpen:!!A,"data-component":"responsive-vertical-menu-primary","data-role":"responsive-vertical-menu-primary",height:M||"100%",id:"responsive-vertical-menu-primary",menu:"primary",reduceMotion:re,ref:Q,responsive:!1,tabIndex:-1,top:G,width:R,children:v})})}))]})})),R=i(((r,n)=>{var{children:t,width:i,height:o}=r,l=T(r,["children","width","height"]);return e(d,{children:e(p,{children:e(v,{width:i,height:o,children:e(C,B(P({ref:n,width:i,height:o},l),{children:t}))})})})}));export{R as ResponsiveVerticalMenu,R as default};

package/lib/components/tabs/index.d.ts

@@ -1,3 +1,3 @@
 export { Tabs, Tab } from "./tabs.component";
-export type { TabsProps } from "./tabs.component";
+export type { TabsProps, TabsHandle } from "./tabs.component";
 export type { TabProps } from "./tab";

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

@@ -2,6 +2,13 @@ import React from "react";
 import { MarginProps } from "styled-system";
 import Tab from "./tab";
 import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
+export type TabsHandle = {
+    /**
+     * Programmatically focus on a specific tab.
+     * @param tabId - The ID of the tab to focus. Must match the `tabId` prop of the target `Tab` component.
+     */
+    focusTab: (tabId: string) => void;
+} | null;
 export interface TabsProps extends MarginProps, TagProps {
     /** Prevent rendering of hidden tabs, by default this is set to true and therefore all tabs will be rendered */
     renderHiddenTabs?: boolean;
@@ -57,5 +64,5 @@ export interface TabsProps extends MarginProps, TagProps {
      */
     showValidationsSummary?: boolean;
 }
-declare const Tabs: ({ align, children, onTabChange, selectedTabId, renderHiddenTabs, position, extendedLine, size, borders, variant, validationStatusOverride, headerWidth, showValidationsSummary, ...rest }: TabsProps) => React.JSX.Element;
+declare const Tabs: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<TabsHandle>>;
 export { Tabs, Tab };

package/lib/components/tabs/tabs.component.js

@@ -1 +1 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("react"),r=require("./tab/tab.component.js"),n=require("../../__internal__/utils/helpers/events/events.js"),a=require("../../__internal__/utils/helpers/tags/tags.js"),i=require("../../__internal__/utils/logger/index.js"),o=require("./tabs.style.js"),s=require("./__internal__/tabs-header/tabs-header.component.js"),l=require("./__internal__/tab-title/tab-title.component.js"),d=require("../drawer/__internal__/drawer-sidebar.context.js");function u(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function c(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){u(e,t,r[t])}))}return e}function b(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}let p=!1,f=!1,h=!1,g=!1,m=!1;exports.Tab=r.Tab,exports.Tabs=r=>{var{align:u="left",children:y,onTabChange:v,selectedTabId:O,renderHiddenTabs:j=!0,position:w="top",extendedLine:T=!0,size:S,borders:_="off",variant:I="default",validationStatusOverride:x,headerWidth:P,showValidationsSummary:k}=r,C=function(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}(r,["align","children","onTabChange","selectedTabId","renderHiddenTabs","position","extendedLine","size","borders","variant","validationStatusOverride","headerWidth","showValidationsSummary"]);m||(i.default.deprecate("The current implementation of the `Tabs` component is deprecated and will be changing in a future release."),m=!0),k&&!g&&(i.default.deprecate("The `showValidationsSummary` prop in the `Tabs` component is deprecated and will be removed in a future release."),g=!0),"right"!==u||p||(i.default.deprecate("Support for the `right` value of `align` in the `Tabs` component is deprecated and will be removed in a future release."),p=!0),T||f||(i.default.deprecate("The `extendedLine` prop in the `Tabs` component is deprecated and will be removed in a future release."),f=!0),"off"===_||h||(i.default.deprecate("The `borders` prop in the `Tabs` component is deprecated and will be removed in a future release."),h=!0),"left"!==w&&void 0!==P&&i.default.error("Invalid usage of prop headerWidth in Tabs. The headerWidth can be used only if position is set to left");const E=t.useMemo((()=>t.Children.toArray(y).filter((e=>e))),[y]),q=t.useMemo((()=>E.map((e=>e.props.tabId))),[E]),L=t.useMemo((()=>Array.from({length:E.length}).map((()=>t.createRef()))),[E.length]),M=t.useRef(O),[W,D]=t.useState(O||E[0].props.tabId),{isInSidebar:R}=t.useContext(d.default),[$,K]=t.useState({}),[z,B]=t.useState({}),[H,V]=t.useState({}),A=t.useCallback(((e,t)=>{K((r=>b(c({},r),{[e]:t})))}),[]),U=t.useCallback(((e,t)=>{B((r=>b(c({},r),{[e]:t})))}),[]),F=t.useCallback(((e,t)=>{V((r=>b(c({},r),{[e]:t})))}),[]),G=t.useCallback((e=>e===W),[W]),J=t.useCallback((e=>{G(e)||D(e),v&&v(e)}),[v,G]),N=t.useCallback((()=>{const{current:e}=M,t=e?q.indexOf(e):-1;var r;-1!==t&&(null===(r=L[t].current)||void 0===r||r.blur())}),[q,L]);t.useEffect((()=>{M.current!==O&&(O!==W&&(D(O),N()),M.current=O)}),[N,M,O,W]);const Q=e=>t=>{n.default.isEventType(t,"keydown")||J(e)},X=(e,t)=>{e.preventDefault();let r=t;t<0?r=q.length-1:t===q.length&&(r=0),(e=>{var t,r;null===(t=e.current)||void 0===t||t.focus();const n=null===(r=e.current)||void 0===r?void 0:r.getBoundingClientRect();var a;n&&(n.top>=0&&n.left>=0&&n.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&n.right<=(window.innerWidth||document.documentElement.clientWidth)||null===(a=e.current)||void 0===a||a.scrollIntoView({behavior:"auto",inline:"center"}))})(L[r])},Y=e=>t=>{const r=R||"left"===w,a=r&&n.default.isUpKey(t),i=r&&n.default.isDownKey(t),o=!r&&n.default.isLeftKey(t),s=!r&&n.default.isRightKey(t);a||o?X(t,e-1):(i||s)&&X(t,e+1)};return e.jsxs(o.default,b(c({position:R?"left":w,"data-role":"tabs",isInSidebar:R,headerWidth:P},C,a.default("tabs",C)),{children:[(()=>{const r=E.map(((e,r)=>{const{tabId:n,title:a,siblings:i,titlePosition:o,errorMessage:s,warningMessage:d,infoMessage:p,href:f,customLayout:h,titleProps:g}=e.props,m=`${n}-tab`,y=$[n],v=z[n],O=H[n],j=y&&Object.entries(y).filter((e=>e[1])).length,T=v&&Object.entries(v).filter((e=>e[1])).length,P=O&&Object.entries(O).filter((e=>e[1])).length,C=x&&x[n],E=C&&x[n].error,q=C&&x[n].warning,M=C&&x[n].info,W=void 0!==E?E:!!j,D=void 0!==q?q:!!T&&!W,K=void 0!==M?M:!!P&&!W&&!D,B=(e,t={})=>{const r=Object.values(t).filter((e=>e&&"string"==typeof e));return k&&r.length?1===r.length?r[0]:r.map((e=>`• ${e}`)).join("\n"):e};return t.createElement(l.default,b(c({},g),{position:R?"left":w,dataTabId:n,id:m,key:n,onClick:Q(n),onKeyDown:Y(r),ref:L[r],tabIndex:G(n)?0:-1,title:a,href:f,isTabSelected:G(n),error:W,warning:D,info:K,size:S||"default",borders:"off"!==_,siblings:i,titlePosition:o,errorMessage:B(s,y),warningMessage:B(d,v),infoMessage:B(p,O),alternateStyling:"alternate"===I,noLeftBorder:["no left side","no sides"].includes(_),noRightBorder:["no right side","no sides"].includes(_),customLayout:h,isInSidebar:R,align:u}))}));return e.jsx(s.default,{align:u,position:R?"left":w,role:"tablist",extendedLine:T,noRightBorder:["no right side","no sides"].includes(_),isInSidebar:R,size:S||"default",children:r})})(),(()=>{if(R)return null;if(!j){const e=E.find((e=>G(e.props.tabId)));return e&&t.cloneElement(e,b(c({},e.props),{role:"tabpanel",position:w,isTabSelected:G(e.props.tabId),key:`${e.props.tabId}-tab`,ariaLabelledby:`${e.props.tabId}-tab`,updateErrors:A,updateWarnings:U,updateInfos:F}))}return E.map((e=>t.cloneElement(e,b(c({},e.props),{role:"tabpanel",position:w,isTabSelected:G(e.props.tabId),key:`${e.props.tabId}-tab`,ariaLabelledby:`${e.props.tabId}-tab`,updateErrors:A,updateWarnings:U,updateInfos:F}))))})()]}))};
+"use strict";var e=require("react/jsx-runtime"),t=require("react"),r=require("./tab/tab.component.js"),n=require("../../__internal__/utils/helpers/events/events.js"),a=require("../../__internal__/utils/helpers/tags/tags.js"),i=require("../../__internal__/utils/logger/index.js"),o=require("./tabs.style.js"),s=require("./__internal__/tabs-header/tabs-header.component.js"),l=require("./__internal__/tab-title/tab-title.component.js"),d=require("../drawer/__internal__/drawer-sidebar.context.js");function u(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function c(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){u(e,t,r[t])}))}return e}function p(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}let b=!1,f=!1,h=!1,g=!1,m=!1;const y=t.forwardRef(((r,u)=>{var{align:y="left",children:v,onTabChange:O,selectedTabId:j,renderHiddenTabs:w=!0,position:I="top",extendedLine:T=!0,size:S,borders:_="off",variant:x="default",validationStatusOverride:P,headerWidth:k,showValidationsSummary:C}=r,E=function(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}(r,["align","children","onTabChange","selectedTabId","renderHiddenTabs","position","extendedLine","size","borders","variant","validationStatusOverride","headerWidth","showValidationsSummary"]);m||(i.default.deprecate("The current implementation of the `Tabs` component is deprecated and will be changing in a future release."),m=!0),C&&!g&&(i.default.deprecate("The `showValidationsSummary` prop in the `Tabs` component is deprecated and will be removed in a future release."),g=!0),"right"!==y||b||(i.default.deprecate("Support for the `right` value of `align` in the `Tabs` component is deprecated and will be removed in a future release."),b=!0),T||f||(i.default.deprecate("The `extendedLine` prop in the `Tabs` component is deprecated and will be removed in a future release."),f=!0),"off"===_||h||(i.default.deprecate("The `borders` prop in the `Tabs` component is deprecated and will be removed in a future release."),h=!0),"left"!==I&&void 0!==k&&i.default.error("Invalid usage of prop headerWidth in Tabs. The headerWidth can be used only if position is set to left");const q=t.useMemo((()=>t.Children.toArray(v).filter((e=>e))),[v]),L=t.useMemo((()=>q.map((e=>e.props.tabId))),[q]),M=t.useMemo((()=>Array.from({length:q.length}).map((()=>t.createRef()))),[q.length]),W=t.useRef(j),[D,R]=t.useState(j||q[0].props.tabId),{isInSidebar:$}=t.useContext(d.default),[H,K]=t.useState({}),[z,B]=t.useState({}),[V,A]=t.useState({}),U=t.useCallback(((e,t)=>{K((r=>p(c({},r),{[e]:t})))}),[]),F=t.useCallback(((e,t)=>{B((r=>p(c({},r),{[e]:t})))}),[]),G=t.useCallback(((e,t)=>{A((r=>p(c({},r),{[e]:t})))}),[]),J=t.useCallback((e=>e===D),[D]),N=t.useCallback((e=>{J(e)||R(e),O&&O(e)}),[O,J]),Q=t.useCallback((()=>{const{current:e}=W,t=e?L.indexOf(e):-1;var r;-1!==t&&(null===(r=M[t].current)||void 0===r||r.blur())}),[L,M]);t.useEffect((()=>{W.current!==j&&(j!==D&&(R(j),Q()),W.current=j)}),[Q,W,j,D]);const X=e=>t=>{n.default.isEventType(t,"keydown")||N(e)},Y=e=>{var t,r;null===(t=e.current)||void 0===t||t.focus();const n=null===(r=e.current)||void 0===r?void 0:r.getBoundingClientRect();var a;n&&(n.top>=0&&n.left>=0&&n.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&n.right<=(window.innerWidth||document.documentElement.clientWidth)||null===(a=e.current)||void 0===a||a.scrollIntoView({behavior:"auto",inline:"center"}))},Z=(e,t)=>{e.preventDefault();let r=t;t<0?r=L.length-1:t===L.length&&(r=0);const n=M[r];Y(n)},ee=e=>t=>{const r=$||"left"===I,a=r&&n.default.isUpKey(t),i=r&&n.default.isDownKey(t),o=!r&&n.default.isLeftKey(t),s=!r&&n.default.isRightKey(t);a||o?Z(t,e-1):(i||s)&&Z(t,e+1)};return t.useImperativeHandle(u,(()=>({focusTab(e){const t=M[q.findIndex((t=>t.props.tabId===e))];t&&Y(t)}})),[q,M]),e.jsxs(o.default,p(c({position:$?"left":I,"data-role":"tabs",isInSidebar:$,headerWidth:k},E,a.default("tabs",E)),{children:[(()=>{const r=q.map(((e,r)=>{const{tabId:n,title:a,siblings:i,titlePosition:o,errorMessage:s,warningMessage:d,infoMessage:u,href:b,customLayout:f,titleProps:h}=e.props,g=`${n}-tab`,m=H[n],v=z[n],O=V[n],j=m&&Object.entries(m).filter((e=>e[1])).length,w=v&&Object.entries(v).filter((e=>e[1])).length,T=O&&Object.entries(O).filter((e=>e[1])).length,k=P&&P[n],E=k&&P[n].error,q=k&&P[n].warning,L=k&&P[n].info,W=void 0!==E?E:!!j,D=void 0!==q?q:!!w&&!W,R=void 0!==L?L:!!T&&!W&&!D,K=(e,t={})=>{const r=Object.values(t).filter((e=>e&&"string"==typeof e));return C&&r.length?1===r.length?r[0]:r.map((e=>`• ${e}`)).join("\n"):e};return t.createElement(l.default,p(c({},h),{position:$?"left":I,dataTabId:n,id:g,key:n,onClick:X(n),onKeyDown:ee(r),ref:M[r],tabIndex:J(n)?0:-1,title:a,href:b,isTabSelected:J(n),error:W,warning:D,info:R,size:S||"default",borders:"off"!==_,siblings:i,titlePosition:o,errorMessage:K(s,m),warningMessage:K(d,v),infoMessage:K(u,O),alternateStyling:"alternate"===x,noLeftBorder:["no left side","no sides"].includes(_),noRightBorder:["no right side","no sides"].includes(_),customLayout:f,isInSidebar:$,align:y}))}));return e.jsx(s.default,{align:y,position:$?"left":I,role:"tablist",extendedLine:T,noRightBorder:["no right side","no sides"].includes(_),isInSidebar:$,size:S||"default",children:r})})(),(()=>{if($)return null;if(!w){const e=q.find((e=>J(e.props.tabId)));return e&&t.cloneElement(e,p(c({},e.props),{role:"tabpanel",position:I,isTabSelected:J(e.props.tabId),key:`${e.props.tabId}-tab`,ariaLabelledby:`${e.props.tabId}-tab`,updateErrors:U,updateWarnings:F,updateInfos:G}))}return q.map((e=>t.cloneElement(e,p(c({},e.props),{role:"tabpanel",position:I,isTabSelected:J(e.props.tabId),key:`${e.props.tabId}-tab`,ariaLabelledby:`${e.props.tabId}-tab`,updateErrors:U,updateWarnings:F,updateInfos:G}))))})()]}))}));exports.Tab=r.Tab,exports.Tabs=y;

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

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

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

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

package/package.json

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