carbon-react 157.5.2 → 157.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm/components/link/link.component.js +1 -1
- package/esm/components/tabs/tab/tab.component.d.ts +4 -1
- package/esm/components/tabs/tab/tab.component.js +1 -1
- package/esm/components/tabs/tabs.component.d.ts +18 -5
- package/esm/components/tabs/tabs.component.js +1 -1
- package/lib/components/link/link.component.js +1 -1
- package/lib/components/tabs/tab/tab.component.d.ts +4 -1
- package/lib/components/tabs/tab/tab.component.js +1 -1
- package/lib/components/tabs/tabs.component.d.ts +18 -5
- package/lib/components/tabs/tabs.component.js +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,jsxs as
|
|
1
|
+
import{jsx as e,jsxs as n,Fragment as t}from"react/jsx-runtime";import r,{useState as o,useContext as i,useRef as l,useCallback as a,useMemo as s,useEffect as c}from"react";import p from"../icon/icon.component.js";import u from"../menu/__internal__/menu.context.js";import{StyledLink as d,StyledContent as b}from"./link.style.js";import f from"../../__internal__/utils/helpers/tags/tags.js";import m from"../../hooks/__internal__/useLocale/useLocale.js";import y from"../batch-selection/__internal__/batch-selection.context.js";import k from"../../__internal__/utils/logger/index.js";function v(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function O(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{},r=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),r.forEach((function(n){v(e,n,t[n])}))}return e}function g(e,n){return n=null!=n?n:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):function(e){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);n.push.apply(n,t)}return n}(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})),e}let h=!1,j=!1,w=!1,_=!1;const P={default:!1,neutral:!1},L={default:"typical",neutral:"subtle"},D=r.forwardRef(((v,D)=>{var{children:S,onKeyDown:M,href:x,onClick:A,onMouseDown:B,icon:T,iconAlign:C="left",isSkipLink:E,disabled:I=!1,underline:N="always",ariaLabel:z,rel:K,tooltipMessage:F,tooltipPosition:$,target:R,variant:W="typical",isDarkBackground:q,inverse:G,removeAriaLabelOnIcon:H,className:J,linkSize:Q="medium"}=v,U=function(e,n){if(null==e)return{};var t,r,o=function(e,n){if(null==e)return{};var t,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)t=i[r],n.indexOf(t)>=0||(o[t]=e[t]);return o}(e,n);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)t=i[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}(v,["children","onKeyDown","href","onClick","onMouseDown","icon","iconAlign","isSkipLink","disabled","underline","ariaLabel","rel","tooltipMessage","tooltipPosition","target","variant","isDarkBackground","inverse","removeAriaLabelOnIcon","className","linkSize"]);const[V,X]=o(!1),Y=m(),{inMenu:Z}=i(u),{batchSelectionDisabled:ee}=i(y),ne=I||ee,te=l(null);!h&&I&&(h=!0,k.deprecate("The 'disabled' prop in Link is deprecated and will soon be removed.")),!w&&F&&(w=!0,k.deprecate("The 'tooltipMessage' prop in Link is deprecated and will soon be removed.")),!j&&$&&(j=!0,k.deprecate("The 'tooltipPosition' prop in Link is deprecated and will soon be removed.")),!_&&q&&(_=!0,k.deprecate("The 'isDarkBackground' prop in Link is deprecated and will soon be removed. Please use 'inverse' prop instead.")),!P[W]&&L[W]&&(P[W]=!0,k.deprecate(`The value '${W}' for the variant prop is deprecated and will soon be removed. Please use value '${L[W]}' instead.`));const re=null!=G?G:q;var oe;const ie=null!==(oe=L[W])&&void 0!==oe?oe:W,le=a((e=>{te.current=e,D&&("function"!=typeof D?"object"!=typeof D||(D.current=e):D(e))}),[D]),ae=a((e=>{var n,t;null===(t=te.current)||void 0===t||null===(n=t.focus)||void 0===n||n.call(t,{preventScroll:!0}),null==A||A(e)}),[A]),se=(n="left")=>T&&C===n?e(p,{type:T,disabled:ne,ariaLabel:H?void 0:z,tooltipMessage:F,tooltipPosition:$}):null,ce=s((()=>{const e=U;return Object.keys(e).filter((e=>e.startsWith("aria"))).reduce(((n,t)=>(n[t]=e[t],n)),{})}),[U]),pe=g(O({onKeyDown:M,onMouseDown:B,onClick:ae,disabled:ne,target:R,ref:le,href:x,rel:K,"aria-label":z},ce),{onFocus:()=>X(!0),onBlur:()=>X(!1)}),ue={type:"button"};return c((()=>{(I||!x&&!A)&&X(!1)}),[I,x,A]),e(d,g(O({isSkipLink:E,disabled:ne,underline:N,iconAlign:C,className:J,hasContent:Boolean(S),variant:ie,inverse:re,isMenuItem:Z},f("link",U),E&&{"data-element":"skip-link"}),{hasFocus:V,linkSize:Q,children:(()=>{let o="a";return A&&!x&&(o="button"),r.createElement(o,"button"===o?O({},pe,ue):g(O({},pe),{"data-role":"link-anchor"}),n(t,{children:[se(),e(b,{children:E?Y.link.skipLinkLabel():S}),se("right")]}))})()}))}));D.displayName="Link";export{D as Link,D as default};
|
|
@@ -21,7 +21,10 @@ export interface TabProps extends PaddingProps, TagProps {
|
|
|
21
21
|
siblings?: React.ReactNode;
|
|
22
22
|
/** Position title before or after siblings */
|
|
23
23
|
titlePosition?: "before" | "after";
|
|
24
|
-
/**
|
|
24
|
+
/**
|
|
25
|
+
* Allows Tab to be a link
|
|
26
|
+
* @deprecated Using tabs as links is inaccessible; this prop will be deprecated in a future release.
|
|
27
|
+
* */
|
|
25
28
|
href?: string;
|
|
26
29
|
/** Overrides default layout with a one defined in this prop */
|
|
27
30
|
customLayout?: React.ReactNode;
|
|
@@ -1 +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
|
|
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";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};
|
|
@@ -9,19 +9,30 @@ export interface TabsProps extends MarginProps, TagProps {
|
|
|
9
9
|
selectedTabId?: string;
|
|
10
10
|
/** The child elements of Tabs need to be Tab components. */
|
|
11
11
|
children: React.ReactNode;
|
|
12
|
-
/**
|
|
12
|
+
/**
|
|
13
|
+
* Sets the alignment of the tab titles. Possible values include.
|
|
14
|
+
* @deprecated In a future release, support for right-aligned tab content will be removed.
|
|
15
|
+
*/
|
|
13
16
|
align?: "left" | "right";
|
|
14
17
|
/** A callback for when a tab is changed. You can use this to manually control
|
|
15
18
|
* tab changing or to fire other events when a tab is changed.
|
|
16
19
|
*/
|
|
17
20
|
onTabChange?: (tabId: string) => void;
|
|
18
|
-
/**
|
|
21
|
+
/**
|
|
22
|
+
* The position of the tab title.
|
|
23
|
+
* */
|
|
19
24
|
position?: "top" | "left";
|
|
20
25
|
/** Sets size of the tab titles. */
|
|
21
26
|
size?: "default" | "large";
|
|
22
|
-
/**
|
|
27
|
+
/**
|
|
28
|
+
* Sets the divider of the tab titles header to extend the full width of the parent.
|
|
29
|
+
* @deprecated This prop will be deprecated in a future release
|
|
30
|
+
* */
|
|
23
31
|
extendedLine?: boolean;
|
|
24
|
-
/**
|
|
32
|
+
/**
|
|
33
|
+
* Adds a combination of borders to the tab titles.
|
|
34
|
+
* @deprecated This prop will be deprecated in a future release
|
|
35
|
+
* */
|
|
25
36
|
borders?: "off" | "on" | "no left side" | "no right side" | "no sides";
|
|
26
37
|
/** Adds an alternate styling variant to the tab titles. */
|
|
27
38
|
variant?: "default" | "alternate";
|
|
@@ -39,8 +50,10 @@ export interface TabsProps extends MarginProps, TagProps {
|
|
|
39
50
|
info?: boolean;
|
|
40
51
|
};
|
|
41
52
|
};
|
|
42
|
-
/**
|
|
53
|
+
/**
|
|
54
|
+
* When this prop is set any string validation failures in the children of each Tab
|
|
43
55
|
* will be summaraised in the Tooltip next to the Tab title
|
|
56
|
+
* @deprecated This prop will be deprecated in a future release
|
|
44
57
|
*/
|
|
45
58
|
showValidationsSummary?: boolean;
|
|
46
59
|
}
|
|
@@ -1 +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
|
|
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};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),n=require("../icon/icon.component.js"),r=require("../menu/__internal__/menu.context.js"),i=require("./link.style.js"),o=require("../../__internal__/utils/helpers/tags/tags.js"),l=require("../../hooks/__internal__/useLocale/useLocale.js"),a=require("../batch-selection/__internal__/batch-selection.context.js"),s=require("../../__internal__/utils/logger/index.js");function u(e){return e&&e.__esModule?e:{default:e}}var c=u(t);function d(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function p(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),r.forEach((function(t){d(e,t,n[t])}))}return e}function f(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t.push.apply(t,n)}return t}(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))})),e}let b=!1,y=!1,k=!1,
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),n=require("../icon/icon.component.js"),r=require("../menu/__internal__/menu.context.js"),i=require("./link.style.js"),o=require("../../__internal__/utils/helpers/tags/tags.js"),l=require("../../hooks/__internal__/useLocale/useLocale.js"),a=require("../batch-selection/__internal__/batch-selection.context.js"),s=require("../../__internal__/utils/logger/index.js");function u(e){return e&&e.__esModule?e:{default:e}}var c=u(t);function d(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function p(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),r.forEach((function(t){d(e,t,n[t])}))}return e}function f(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t.push.apply(t,n)}return t}(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))})),e}let b=!1,y=!1,k=!1,v=!1;const O={default:!1,neutral:!1},g={default:"typical",neutral:"subtle"},j=c.default.forwardRef(((u,d)=>{var{children:j,onKeyDown:m,href:h,onClick:w,onMouseDown:_,icon:P,iconAlign:L="left",isSkipLink:S,disabled:x=!1,underline:D="always",ariaLabel:M,rel:q,tooltipMessage:C,tooltipPosition:A,target:B,variant:E="typical",isDarkBackground:T,inverse:I,removeAriaLabelOnIcon:N,className:z,linkSize:F="medium"}=u,K=function(e,t){if(null==e)return{};var n,r,i=function(e,t){if(null==e)return{};var n,r,i={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}(u,["children","onKeyDown","href","onClick","onMouseDown","icon","iconAlign","isSkipLink","disabled","underline","ariaLabel","rel","tooltipMessage","tooltipPosition","target","variant","isDarkBackground","inverse","removeAriaLabelOnIcon","className","linkSize"]);const[R,$]=t.useState(!1),W=l.default(),{inMenu:G}=t.useContext(r.default),{batchSelectionDisabled:H}=t.useContext(a.default),J=x||H,Q=t.useRef(null);!b&&x&&(b=!0,s.default.deprecate("The 'disabled' prop in Link is deprecated and will soon be removed.")),!k&&C&&(k=!0,s.default.deprecate("The 'tooltipMessage' prop in Link is deprecated and will soon be removed.")),!y&&A&&(y=!0,s.default.deprecate("The 'tooltipPosition' prop in Link is deprecated and will soon be removed.")),!v&&T&&(v=!0,s.default.deprecate("The 'isDarkBackground' prop in Link is deprecated and will soon be removed. Please use 'inverse' prop instead.")),!O[E]&&g[E]&&(O[E]=!0,s.default.deprecate(`The value '${E}' for the variant prop is deprecated and will soon be removed. Please use value '${g[E]}' instead.`));const U=null!=I?I:T;var V;const X=null!==(V=g[E])&&void 0!==V?V:E,Y=t.useCallback((e=>{Q.current=e,d&&("function"!=typeof d?"object"!=typeof d||(d.current=e):d(e))}),[d]),Z=t.useCallback((e=>{var t,n;null===(n=Q.current)||void 0===n||null===(t=n.focus)||void 0===t||t.call(n,{preventScroll:!0}),null==w||w(e)}),[w]),ee=(t="left")=>P&&L===t?e.jsx(n.default,{type:P,disabled:J,ariaLabel:N?void 0:M,tooltipMessage:C,tooltipPosition:A}):null,te=t.useMemo((()=>{const e=K;return Object.keys(e).filter((e=>e.startsWith("aria"))).reduce(((t,n)=>(t[n]=e[n],t)),{})}),[K]),ne=f(p({onKeyDown:m,onMouseDown:_,onClick:Z,disabled:J,target:B,ref:Y,href:h,rel:q,"aria-label":M},te),{onFocus:()=>$(!0),onBlur:()=>$(!1)}),re={type:"button"};return t.useEffect((()=>{(x||!h&&!w)&&$(!1)}),[x,h,w]),e.jsx(i.StyledLink,f(p({isSkipLink:S,disabled:J,underline:D,iconAlign:L,className:z,hasContent:Boolean(j),variant:X,inverse:U,isMenuItem:G},o.default("link",K),S&&{"data-element":"skip-link"}),{hasFocus:R,linkSize:F,children:(()=>{let t="a";return w&&!h&&(t="button"),c.default.createElement(t,"button"===t?p({},ne,re):f(p({},ne),{"data-role":"link-anchor"}),e.jsxs(e.Fragment,{children:[ee(),e.jsx(i.StyledContent,{children:S?W.link.skipLinkLabel():j}),ee("right")]}))})()}))}));j.displayName="Link",exports.Link=j,exports.default=j;
|
|
@@ -21,7 +21,10 @@ export interface TabProps extends PaddingProps, TagProps {
|
|
|
21
21
|
siblings?: React.ReactNode;
|
|
22
22
|
/** Position title before or after siblings */
|
|
23
23
|
titlePosition?: "before" | "after";
|
|
24
|
-
/**
|
|
24
|
+
/**
|
|
25
|
+
* Allows Tab to be a link
|
|
26
|
+
* @deprecated Using tabs as links is inaccessible; this prop will be deprecated in a future release.
|
|
27
|
+
* */
|
|
25
28
|
href?: string;
|
|
26
29
|
/** Overrides default layout with a one defined in this prop */
|
|
27
30
|
customLayout?: React.ReactNode;
|
|
@@ -1 +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"),
|
|
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"),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;
|
|
@@ -9,19 +9,30 @@ export interface TabsProps extends MarginProps, TagProps {
|
|
|
9
9
|
selectedTabId?: string;
|
|
10
10
|
/** The child elements of Tabs need to be Tab components. */
|
|
11
11
|
children: React.ReactNode;
|
|
12
|
-
/**
|
|
12
|
+
/**
|
|
13
|
+
* Sets the alignment of the tab titles. Possible values include.
|
|
14
|
+
* @deprecated In a future release, support for right-aligned tab content will be removed.
|
|
15
|
+
*/
|
|
13
16
|
align?: "left" | "right";
|
|
14
17
|
/** A callback for when a tab is changed. You can use this to manually control
|
|
15
18
|
* tab changing or to fire other events when a tab is changed.
|
|
16
19
|
*/
|
|
17
20
|
onTabChange?: (tabId: string) => void;
|
|
18
|
-
/**
|
|
21
|
+
/**
|
|
22
|
+
* The position of the tab title.
|
|
23
|
+
* */
|
|
19
24
|
position?: "top" | "left";
|
|
20
25
|
/** Sets size of the tab titles. */
|
|
21
26
|
size?: "default" | "large";
|
|
22
|
-
/**
|
|
27
|
+
/**
|
|
28
|
+
* Sets the divider of the tab titles header to extend the full width of the parent.
|
|
29
|
+
* @deprecated This prop will be deprecated in a future release
|
|
30
|
+
* */
|
|
23
31
|
extendedLine?: boolean;
|
|
24
|
-
/**
|
|
32
|
+
/**
|
|
33
|
+
* Adds a combination of borders to the tab titles.
|
|
34
|
+
* @deprecated This prop will be deprecated in a future release
|
|
35
|
+
* */
|
|
25
36
|
borders?: "off" | "on" | "no left side" | "no right side" | "no sides";
|
|
26
37
|
/** Adds an alternate styling variant to the tab titles. */
|
|
27
38
|
variant?: "default" | "alternate";
|
|
@@ -39,8 +50,10 @@ export interface TabsProps extends MarginProps, TagProps {
|
|
|
39
50
|
info?: boolean;
|
|
40
51
|
};
|
|
41
52
|
};
|
|
42
|
-
/**
|
|
53
|
+
/**
|
|
54
|
+
* When this prop is set any string validation failures in the children of each Tab
|
|
43
55
|
* will be summaraised in the Tooltip next to the Tab title
|
|
56
|
+
* @deprecated This prop will be deprecated in a future release
|
|
44
57
|
*/
|
|
45
58
|
showValidationsSummary?: boolean;
|
|
46
59
|
}
|
|
@@ -1 +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"),
|
|
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}))))})()]}))};
|