carbon-react 157.5.3 → 157.6.0

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

@@ -21,7 +21,10 @@ export interface TabProps extends PaddingProps, TagProps {
     siblings?: React.ReactNode;
     /** Position title before or after siblings */
     titlePosition?: "before" | "after";
-    /** Allows Tab to be a link */
+    /**
+     * Allows Tab to be a link
+     * @deprecated Using tabs as links is inaccessible; this prop will be deprecated in a future release.
+     * */
     href?: string;
     /** Overrides default layout with a one defined in this prop */
     customLayout?: React.ReactNode;

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

@@ -1 +1 @@
-import{jsx as e}from"react/jsx-runtime";import{useState as t,useCallback as r,useEffect as n}from"react";import o from"./tab.style.js";import i from"../../../__internal__/utils/helpers/tags/tags.js";import a from"./__internal__/tab.context.js";function l(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){l(e,t,r[t])}))}return e}function s(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 p=l=>{var{ariaLabelledby:p,children:b,isTabSelected:u,position:f="top",role:O="tabpanel",tabId:y,updateErrors:d,updateWarnings:j,updateInfos:m,href:g,title:P,titleProps:h}=l,v=function(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(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)&&(o[r]=e[r])}return o}(l,["ariaLabelledby","children","isTabSelected","position","role","tabId","updateErrors","updateWarnings","updateInfos","href","title","titleProps"]);const[w,S]=t({}),[_,E]=t({}),[I,x]=t({}),D=r(((e,t)=>{S((r=>r[e]!==t?s(c({},r),{[e]:t}):r))}),[]),k=r(((e,t)=>{E((r=>r[e]!==t?s(c({},r),{[e]:t}):r))}),[]),T=r(((e,t)=>{x((r=>r[e]!==t?s(c({},r),{[e]:t}):r))}),[]);return n((()=>{d&&d(y,w)}),[y,w,d]),n((()=>{j&&j(y,_)}),[y,_,j]),n((()=>{m&&m(y,I)}),[y,I,m]),e(a.Provider,{value:{setError:D,setWarning:k,setInfo:T},children:e(o,s(c({role:O,isTabSelected:u,"aria-labelledby":p,position:f},v,i("tab",v)),{children:!g&&b}))})};export{p as Tab,p as default};
+import{jsx as e}from"react/jsx-runtime";import{useState as t,useCallback as r,useEffect as n}from"react";import o from"./tab.style.js";import i from"../../../__internal__/utils/helpers/tags/tags.js";import a from"./__internal__/tab.context.js";import l from"../../../__internal__/utils/logger/index.js";function c(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function p(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){c(e,t,r[t])}))}return e}function s(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;const u=c=>{var{ariaLabelledby:u,children:f,isTabSelected:d,position:O="top",role:y="tabpanel",tabId:m,updateErrors:j,updateWarnings:g,updateInfos:h,href:P,title:v,titleProps:w}=c,_=function(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(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)&&(o[r]=e[r])}return o}(c,["ariaLabelledby","children","isTabSelected","position","role","tabId","updateErrors","updateWarnings","updateInfos","href","title","titleProps"]);void 0===P||b||(l.deprecate("The `href` prop is deprecated in the `Tab` component and will be removed in a future release."),b=!0);const[S,x]=t({}),[E,I]=t({}),[T,D]=t({}),k=r(((e,t)=>{x((r=>r[e]!==t?s(p({},r),{[e]:t}):r))}),[]),W=r(((e,t)=>{I((r=>r[e]!==t?s(p({},r),{[e]:t}):r))}),[]),L=r(((e,t)=>{D((r=>r[e]!==t?s(p({},r),{[e]:t}):r))}),[]);return n((()=>{j&&j(m,S)}),[m,S,j]),n((()=>{g&&g(m,E)}),[m,E,g]),n((()=>{h&&h(m,T)}),[m,T,h]),e(a.Provider,{value:{setError:k,setWarning:W,setInfo:L},children:e(o,s(p({role:y,isTabSelected:d,"aria-labelledby":u,position:O},_,i("tab",_)),{children:!P&&f}))})};export{u as Tab,u as default};

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

@@ -9,19 +9,30 @@ export interface TabsProps extends MarginProps, TagProps {
     selectedTabId?: string;
     /** The child elements of Tabs need to be Tab components. */
     children: React.ReactNode;
-    /** Sets the alignment of the tab titles. Possible values include. */
+    /**
+     * Sets the alignment of the tab titles. Possible values include.
+     * @deprecated In a future release, support for right-aligned tab content will be removed.
+     */
     align?: "left" | "right";
     /** A callback for when a tab is changed. You can use this to manually control
      * tab changing or to fire other events when a tab is changed.
      */
     onTabChange?: (tabId: string) => void;
-    /** The position of the tab title. */
+    /**
+     * The position of the tab title.
+     * */
     position?: "top" | "left";
     /** Sets size of the tab titles. */
     size?: "default" | "large";
-    /** Sets the divider of the tab titles header to extend the full width of the parent. */
+    /**
+     * Sets the divider of the tab titles header to extend the full width of the parent.
+     * @deprecated This prop will be deprecated in a future release
+     * */
     extendedLine?: boolean;
-    /** Adds a combination of borders to the tab titles. */
+    /**
+     * Adds a combination of borders to the tab titles.
+     * @deprecated This prop will be deprecated in a future release
+     * */
     borders?: "off" | "on" | "no left side" | "no right side" | "no sides";
     /** Adds an alternate styling variant to the tab titles. */
     variant?: "default" | "alternate";
@@ -39,8 +50,10 @@ export interface TabsProps extends MarginProps, TagProps {
             info?: boolean;
         };
     };
-    /** When this prop is set any string validation failures in the children of each Tab
+    /**
+     * When this prop is set any string validation failures in the children of each Tab
      * will be summaraised in the Tooltip next to the Tab title
+     * @deprecated This prop will be deprecated in a future release
      */
     showValidationsSummary?: boolean;
 }

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 b}from"react";export{Tab}from"./tab/tab.component.js";import c 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 O(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function v(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){O(e,t,r[t])}))}return e}function j(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 w=O=>{var{align:w="left",children:_,onTabChange:I,selectedTabId:S,renderHiddenTabs:P=!0,position:T="top",extendedLine:x=!0,size:L,borders:W="off",variant:k="default",validationStatusOverride:E,headerWidth:D,showValidationsSummary:M}=O,$=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}(O,["align","children","onTabChange","selectedTabId","renderHiddenTabs","position","extendedLine","size","borders","variant","validationStatusOverride","headerWidth","showValidationsSummary"]);"left"!==T&&void 0!==D&&f.error("Invalid usage of prop headerWidth in Tabs. The headerWidth can be used only if position is set to left");const K=r((()=>n.toArray(_).filter((e=>e))),[_]),z=r((()=>K.map((e=>e.props.tabId))),[K]),B=r((()=>Array.from({length:K.length}).map((()=>i()))),[K.length]),C=o(S),[H,R]=a(S||K[0].props.tabId),{isInSidebar:V}=s(y),[A,U]=a({}),[q,F]=a({}),[G,J]=a({}),N=l(((e,t)=>{U((r=>j(v({},r),{[e]:t})))}),[]),Q=l(((e,t)=>{F((r=>j(v({},r),{[e]:t})))}),[]),X=l(((e,t)=>{J((r=>j(v({},r),{[e]:t})))}),[]),Y=l((e=>e===H),[H]),Z=l((e=>{Y(e)||R(e),I&&I(e)}),[I,Y]),ee=l((()=>{const{current:e}=C,t=e?z.indexOf(e):-1;var r;-1!==t&&(null===(r=B[t].current)||void 0===r||r.blur())}),[z,B]);d((()=>{C.current!==S&&(S!==H&&(R(S),ee()),C.current=S)}),[ee,C,S,H]);const te=e=>t=>{c.isEventType(t,"keydown")||Z(e)},re=(e,t)=>{e.preventDefault();let r=t;t<0?r=z.length-1:t===z.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"}))})(B[r])},ne=e=>t=>{const r=V||"left"===T,n=r&&c.isUpKey(t),i=r&&c.isDownKey(t),o=!r&&c.isLeftKey(t),a=!r&&c.isRightKey(t);n||o?re(t,e-1):(i||a)&&re(t,e+1)};return e(g,j(v({position:V?"left":T,"data-role":"tabs",isInSidebar:V,headerWidth:D},$,u("tabs",$)),{children:[(()=>{const e=K.map(((e,t)=>{const{tabId:r,title:n,siblings:i,titlePosition:o,errorMessage:a,warningMessage:s,infoMessage:l,href:d,customLayout:b,titleProps:c}=e.props,u=`${r}-tab`,f=A[r],g=q[r],h=G[r],y=f&&Object.entries(f).filter((e=>e[1])).length,O=g&&Object.entries(g).filter((e=>e[1])).length,_=h&&Object.entries(h).filter((e=>e[1])).length,I=E&&E[r],S=I&&E[r].error,P=I&&E[r].warning,x=I&&E[r].info,D=void 0!==S?S:!!y,$=void 0!==P?P:!!O&&!D,K=void 0!==x?x:!!_&&!D&&!$,z=(e,t={})=>{const r=Object.values(t).filter((e=>e&&"string"==typeof e));return M&&r.length?1===r.length?r[0]:r.map((e=>`• ${e}`)).join("\n"):e};return p(m,j(v({},c),{position:V?"left":T,dataTabId:r,id:u,key:r,onClick:te(r),onKeyDown:ne(t),ref:B[t],tabIndex:Y(r)?0:-1,title:n,href:d,isTabSelected:Y(r),error:D,warning:$,info:K,size:L||"default",borders:"off"!==W,siblings:i,titlePosition:o,errorMessage:z(a,f),warningMessage:z(s,g),infoMessage:z(l,h),alternateStyling:"alternate"===k,noLeftBorder:["no left side","no sides"].includes(W),noRightBorder:["no right side","no sides"].includes(W),customLayout:b,isInSidebar:V,align:w}))}));return t(h,{align:w,position:V?"left":T,role:"tablist",extendedLine:x,noRightBorder:["no right side","no sides"].includes(W),isInSidebar:V,size:L||"default",children:e})})(),(()=>{if(V)return null;if(!P){const e=K.find((e=>Y(e.props.tabId)));return e&&b(e,j(v({},e.props),{role:"tabpanel",position:T,isTabSelected:Y(e.props.tabId),key:`${e.props.tabId}-tab`,ariaLabelledby:`${e.props.tabId}-tab`,updateErrors:N,updateWarnings:Q,updateInfos:X}))}return K.map((e=>b(e,j(v({},e.props),{role:"tabpanel",position:T,isTabSelected:Y(e.props.tabId),key:`${e.props.tabId}-tab`,ariaLabelledby:`${e.props.tabId}-tab`,updateErrors:N,updateWarnings:Q,updateInfos:X}))))})()]}))};export{w as Tabs};
+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};

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

@@ -21,7 +21,10 @@ export interface TabProps extends PaddingProps, TagProps {
     siblings?: React.ReactNode;
     /** Position title before or after siblings */
     titlePosition?: "before" | "after";
-    /** Allows Tab to be a link */
+    /**
+     * Allows Tab to be a link
+     * @deprecated Using tabs as links is inaccessible; this prop will be deprecated in a future release.
+     * */
     href?: string;
     /** Overrides default layout with a one defined in this prop */
     customLayout?: React.ReactNode;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("./tab.style.js"),n=require("../../../__internal__/utils/helpers/tags/tags.js"),o=require("./__internal__/tab.context.js");function a(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function l(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){a(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}const s=a=>{var{ariaLabelledby:s,children:u,isTabSelected:c,position:b="top",role:f="tabpanel",tabId:p,updateErrors:O,updateWarnings:d,updateInfos:y,href:j,title:g,titleProps:P}=a,h=function(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},a=Object.keys(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}(a,["ariaLabelledby","children","isTabSelected","position","role","tabId","updateErrors","updateWarnings","updateInfos","href","title","titleProps"]);const[v,S]=t.useState({}),[w,m]=t.useState({}),[_,x]=t.useState({}),E=t.useCallback(((e,t)=>{S((r=>r[e]!==t?i(l({},r),{[e]:t}):r))}),[]),k=t.useCallback(((e,t)=>{m((r=>r[e]!==t?i(l({},r),{[e]:t}):r))}),[]),I=t.useCallback(((e,t)=>{x((r=>r[e]!==t?i(l({},r),{[e]:t}):r))}),[]);return t.useEffect((()=>{O&&O(p,v)}),[p,v,O]),t.useEffect((()=>{d&&d(p,w)}),[p,w,d]),t.useEffect((()=>{y&&y(p,_)}),[p,_,y]),e.jsx(o.default.Provider,{value:{setError:E,setWarning:k,setInfo:I},children:e.jsx(r.default,i(l({role:f,isTabSelected:c,"aria-labelledby":s,position:b},h,n.default("tab",h)),{children:!j&&u}))})};exports.Tab=s,exports.default=s;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("./tab.style.js"),n=require("../../../__internal__/utils/helpers/tags/tags.js"),a=require("./__internal__/tab.context.js"),o=require("../../../__internal__/utils/logger/index.js");function l(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function i(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){l(e,t,r[t])}))}return e}function s(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 u=!1;const c=l=>{var{ariaLabelledby:c,children:b,isTabSelected:p,position:f="top",role:d="tabpanel",tabId:O,updateErrors:y,updateWarnings:j,updateInfos:g,href:P,title:h,titleProps:v}=l,_=function(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(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)&&(a[r]=e[r])}return a}(l,["ariaLabelledby","children","isTabSelected","position","role","tabId","updateErrors","updateWarnings","updateInfos","href","title","titleProps"]);void 0===P||u||(o.default.deprecate("The `href` prop is deprecated in the `Tab` component and will be removed in a future release."),u=!0);const[m,w]=t.useState({}),[S,x]=t.useState({}),[E,k]=t.useState({}),q=t.useCallback(((e,t)=>{w((r=>r[e]!==t?s(i({},r),{[e]:t}):r))}),[]),I=t.useCallback(((e,t)=>{x((r=>r[e]!==t?s(i({},r),{[e]:t}):r))}),[]),T=t.useCallback(((e,t)=>{k((r=>r[e]!==t?s(i({},r),{[e]:t}):r))}),[]);return t.useEffect((()=>{y&&y(O,m)}),[O,m,y]),t.useEffect((()=>{j&&j(O,S)}),[O,S,j]),t.useEffect((()=>{g&&g(O,E)}),[O,E,g]),e.jsx(a.default.Provider,{value:{setError:q,setWarning:I,setInfo:T},children:e.jsx(r.default,s(i({role:d,isTabSelected:p,"aria-labelledby":c,position:f},_,n.default("tab",_)),{children:!P&&b}))})};exports.Tab=c,exports.default=c;

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

@@ -9,19 +9,30 @@ export interface TabsProps extends MarginProps, TagProps {
     selectedTabId?: string;
     /** The child elements of Tabs need to be Tab components. */
     children: React.ReactNode;
-    /** Sets the alignment of the tab titles. Possible values include. */
+    /**
+     * Sets the alignment of the tab titles. Possible values include.
+     * @deprecated In a future release, support for right-aligned tab content will be removed.
+     */
     align?: "left" | "right";
     /** A callback for when a tab is changed. You can use this to manually control
      * tab changing or to fire other events when a tab is changed.
      */
     onTabChange?: (tabId: string) => void;
-    /** The position of the tab title. */
+    /**
+     * The position of the tab title.
+     * */
     position?: "top" | "left";
     /** Sets size of the tab titles. */
     size?: "default" | "large";
-    /** Sets the divider of the tab titles header to extend the full width of the parent. */
+    /**
+     * Sets the divider of the tab titles header to extend the full width of the parent.
+     * @deprecated This prop will be deprecated in a future release
+     * */
     extendedLine?: boolean;
-    /** Adds a combination of borders to the tab titles. */
+    /**
+     * Adds a combination of borders to the tab titles.
+     * @deprecated This prop will be deprecated in a future release
+     * */
     borders?: "off" | "on" | "no left side" | "no right side" | "no sides";
     /** Adds an alternate styling variant to the tab titles. */
     variant?: "default" | "alternate";
@@ -39,8 +50,10 @@ export interface TabsProps extends MarginProps, TagProps {
             info?: boolean;
         };
     };
-    /** When this prop is set any string validation failures in the children of each Tab
+    /**
+     * When this prop is set any string validation failures in the children of each Tab
      * will be summaraised in the Tooltip next to the Tab title
+     * @deprecated This prop will be deprecated in a future release
      */
     showValidationsSummary?: boolean;
 }

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"),i=require("../../__internal__/utils/helpers/tags/tags.js"),a=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}exports.Tab=r.Tab,exports.Tabs=r=>{var{align:u="left",children:p,onTabChange:f,selectedTabId:g,renderHiddenTabs:h=!0,position:y="top",extendedLine:m=!0,size:O,borders:v="off",variant:j="default",validationStatusOverride:w,headerWidth:_,showValidationsSummary:I}=r,S=function(e,t){if(null==e)return{};var r,n,i=function(e,t){if(null==e)return{};var r,n,i={},a=Object.keys(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||(i[r]=e[r]);return i}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n<a.length;n++)r=a[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"]);"left"!==y&&void 0!==_&&a.default.error("Invalid usage of prop headerWidth in Tabs. The headerWidth can be used only if position is set to left");const P=t.useMemo((()=>t.Children.toArray(p).filter((e=>e))),[p]),T=t.useMemo((()=>P.map((e=>e.props.tabId))),[P]),x=t.useMemo((()=>Array.from({length:P.length}).map((()=>t.createRef()))),[P.length]),k=t.useRef(g),[C,E]=t.useState(g||P[0].props.tabId),{isInSidebar:q}=t.useContext(d.default),[L,M]=t.useState({}),[W,D]=t.useState({}),[R,$]=t.useState({}),K=t.useCallback(((e,t)=>{M((r=>b(c({},r),{[e]:t})))}),[]),z=t.useCallback(((e,t)=>{D((r=>b(c({},r),{[e]:t})))}),[]),B=t.useCallback(((e,t)=>{$((r=>b(c({},r),{[e]:t})))}),[]),H=t.useCallback((e=>e===C),[C]),V=t.useCallback((e=>{H(e)||E(e),f&&f(e)}),[f,H]),A=t.useCallback((()=>{const{current:e}=k,t=e?T.indexOf(e):-1;var r;-1!==t&&(null===(r=x[t].current)||void 0===r||r.blur())}),[T,x]);t.useEffect((()=>{k.current!==g&&(g!==C&&(E(g),A()),k.current=g)}),[A,k,g,C]);const U=e=>t=>{n.default.isEventType(t,"keydown")||V(e)},F=(e,t)=>{e.preventDefault();let r=t;t<0?r=T.length-1:t===T.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"}))})(x[r])},G=e=>t=>{const r=q||"left"===y,i=r&&n.default.isUpKey(t),a=r&&n.default.isDownKey(t),o=!r&&n.default.isLeftKey(t),s=!r&&n.default.isRightKey(t);i||o?F(t,e-1):(a||s)&&F(t,e+1)};return e.jsxs(o.default,b(c({position:q?"left":y,"data-role":"tabs",isInSidebar:q,headerWidth:_},S,i.default("tabs",S)),{children:[(()=>{const r=P.map(((e,r)=>{const{tabId:n,title:i,siblings:a,titlePosition:o,errorMessage:s,warningMessage:d,infoMessage:p,href:f,customLayout:g,titleProps:h}=e.props,m=`${n}-tab`,_=L[n],S=W[n],P=R[n],T=_&&Object.entries(_).filter((e=>e[1])).length,k=S&&Object.entries(S).filter((e=>e[1])).length,C=P&&Object.entries(P).filter((e=>e[1])).length,E=w&&w[n],M=E&&w[n].error,D=E&&w[n].warning,$=E&&w[n].info,K=void 0!==M?M:!!T,z=void 0!==D?D:!!k&&!K,B=void 0!==$?$:!!C&&!K&&!z,V=(e,t={})=>{const r=Object.values(t).filter((e=>e&&"string"==typeof e));return I&&r.length?1===r.length?r[0]:r.map((e=>`• ${e}`)).join("\n"):e};return t.createElement(l.default,b(c({},h),{position:q?"left":y,dataTabId:n,id:m,key:n,onClick:U(n),onKeyDown:G(r),ref:x[r],tabIndex:H(n)?0:-1,title:i,href:f,isTabSelected:H(n),error:K,warning:z,info:B,size:O||"default",borders:"off"!==v,siblings:a,titlePosition:o,errorMessage:V(s,_),warningMessage:V(d,S),infoMessage:V(p,P),alternateStyling:"alternate"===j,noLeftBorder:["no left side","no sides"].includes(v),noRightBorder:["no right side","no sides"].includes(v),customLayout:g,isInSidebar:q,align:u}))}));return e.jsx(s.default,{align:u,position:q?"left":y,role:"tablist",extendedLine:m,noRightBorder:["no right side","no sides"].includes(v),isInSidebar:q,size:O||"default",children:r})})(),(()=>{if(q)return null;if(!h){const e=P.find((e=>H(e.props.tabId)));return e&&t.cloneElement(e,b(c({},e.props),{role:"tabpanel",position:y,isTabSelected:H(e.props.tabId),key:`${e.props.tabId}-tab`,ariaLabelledby:`${e.props.tabId}-tab`,updateErrors:K,updateWarnings:z,updateInfos:B}))}return P.map((e=>t.cloneElement(e,b(c({},e.props),{role:"tabpanel",position:y,isTabSelected:H(e.props.tabId),key:`${e.props.tabId}-tab`,ariaLabelledby:`${e.props.tabId}-tab`,updateErrors:K,updateWarnings:z,updateInfos:B}))))})()]}))};
+"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}))))})()]}))};

package/package.json

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