carbon-react 158.7.1 → 158.7.3
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.style.d.ts +1 -1
- package/esm/components/link/link.style.js +1 -1
- package/esm/components/menu/__internal__/submenu/submenu.component.js +1 -1
- package/esm/components/tabs/__next__/tabs.types.d.ts +21 -0
- package/lib/components/link/link.style.d.ts +1 -1
- package/lib/components/link/link.style.js +1 -1
- package/lib/components/menu/__internal__/submenu/submenu.component.js +1 -1
- package/lib/components/tabs/__next__/tabs.types.d.ts +21 -0
- package/package.json +1 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/** @deprecated The value 'default' for the variant prop is deprecated and will soon be removed. Please use value 'typical' instead. */
|
|
2
2
|
type DeprecatedDefaultVariant = "default";
|
|
3
|
-
/** @deprecated The value '
|
|
3
|
+
/** @deprecated The value 'neutral' for the variant prop is deprecated and will soon be removed. Please use value 'subtle' instead. */
|
|
4
4
|
type DeprecatedNeutralVariant = "neutral";
|
|
5
5
|
type Variants = "typical" | "negative" | "subtle" | DeprecatedDefaultVariant | DeprecatedNeutralVariant;
|
|
6
6
|
export interface StyledLinkProps {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import o,{css as r}from"styled-components";import t from"../../style/themes/apply-base-theme.js";import e from"../icon/icon.style.js";import
|
|
1
|
+
import o,{css as r}from"styled-components";import t from"../../style/themes/apply-base-theme.js";import i from"../../style/utils/add-focus-styling.js";import e from"../icon/icon.style.js";import a from"../button/button.style.js";const n={light:o=>{let r="#08711E",t="#10601C";return"negative"===o?(r="#B23342",t="#9F303C"):"subtle"===o&&(r="#000000E5",t="#000000"),{color:r,hoverColor:t,disabledColor:"var(--colorsActionMajorYin030)",focusColor:"#000000",focusBgColor:"#FFD27E",focusBoxShadowColor:"#000000"}},dark:o=>{let r="#4EDC54",t="#72E26F";return"negative"===o?(r="#E85B66",t="#ED6E74"):"subtle"===o&&(r="var(--colorsUtilityYang100)",t="var(--colorsUtilityYang100)"),{color:r,hoverColor:t,disabledColor:"var(--colorsActionMajorYang030)",focusColor:"#FFFFFF",focusBgColor:"#926916",focusBoxShadowColor:"#FFB500"}}},s=o.span.attrs(t).withConfig({displayName:"link.style__StyledLink",componentId:"sc-59de49aa-0"})(["",""],(({isSkipLink:o,theme:t,iconAlign:s,hasContent:l,disabled:d,underline:c,variant:u,inverse:b,isMenuItem:v,hasFocus:g,linkSize:p})=>{const h=b?"dark":"light",{color:f,hoverColor:m,disabledColor:y,focusColor:x,focusBgColor:C,focusBoxShadowColor:k}=n[h](u),w="medium"===p?"var(--fontSizes100)":"var(--fontSizes200)";return r([""," "," "," > a,> button{text-decoration:",";:hover{text-decoration:",";}"," > ","{display:",";position:relative;vertical-align:middle;"," ","}&:focus{color:",";","{color:",";}outline:none;}"," ","}"," "," > button,",":not(.search-button){background-color:transparent;border:none;padding:0;}"],o&&r(["a{position:absolute;padding-left:var(--spacing300);padding-right:var(--spacing300);line-height:var(--sizing600);left:-999em;z-index:",";border:3px solid var(--colorsUtilityYin100);box-shadow:var(--boxShadow300);border-radius:var(--spacing000) var(--spacing100) var(--spacing100) var(--spacing000);font-size:",";color:var(--colorsUtilityYin090);&:hover{cursor:pointer;color:var(--colorsUtilityYin090);","{color:var(--colorsActionMajor600);}}&:focus{background-color:var(--colorsSemanticFocus500);text-decoration:underline var(--colorsUtilityYin100);text-decoration-thickness:4px;text-underline-offset:3px;-webkit-text-decoration:underline var(--colorsUtilityYin100);-webkit-text-decoration-thickness:4px;-webkit-text-underline-offset:3px;}}a:focus{top:var(--spacing100);left:var(--spacing000);}"],t.zIndex.aboveAll,w,e),!o&&r(["> a,> button{font-size:",";"," ","}"],w,!d&&r(["color:",";","{color:",";}&:hover{color:",";> ","{color:",";}}&:not(:has(img,svg,picture)):focus{background-color:",";border-radius:var(--borderRadius025);}"],f,e,f,m,e,m,C),d&&r(["color:",";&:hover,&:focus{color:",";}"],y,y)),!d&&r(["> a:any-link:hover,> button:hover{cursor:pointer;}"]),l&&"always"===c?"underline":"none",!l||"hover"!==c&&"always"!==c?"none":"underline",v&&"display: inline-block;",e,l?"inline-block":"inline","left"===s&&r(["margin-right:",";"],l?"var(--spacing050)":0),"right"===s&&r(["margin-right:0;margin-left:",";"],l?"var(--spacing100)":0),x,e,x,!d&&r(["&:has(img,svg,picture){display:inline-block;}&:has(img,svg,picture):focus{"," border-radius:var(--borderRadius025);outline:default;}"],i()),d&&r(["cursor:not-allowed;"]),!o&&!d&&g&&r(["> a,> button{outline:none;text-decoration:underline;border-bottom-left-radius:var(--borderRadius000);border-bottom-right-radius:var(--borderRadius000);}max-width:fit-content;box-shadow:0 var(--spacing050) 0 0 ",';border-bottom-left-radius:var(--borderRadius025);border-bottom-right-radius:var(--borderRadius025);&:has([data-popover-container-button="true"]){border-bottom-left-radius:var(--borderRadius000);border-bottom-right-radius:var(--borderRadius000);}'],k),!d&&g&&r(["&:has(img,svg,picture){> a,> button{","}}"],i()),a)})),l=o.span.withConfig({displayName:"link.style__StyledContent",componentId:"sc-59de49aa-1"})([""]);export{l as StyledContent,s as StyledLink};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as
|
|
1
|
+
import{jsxs as e,jsx as t}from"react/jsx-runtime";import n,{useState as r,useRef as o,useContext as i,useMemo as u,useCallback as a,useEffect as l}from"react";import s from"../../menu-item/menu-item.style.js";import{StyledSubmenuWrapper as c,StyledSubmenu as m}from"./submenu.style.js";import p from"../../../../__internal__/utils/helpers/events/events.js";import{useStrictMenuContext as d}from"../strict-menu.context.js";import{characterNavigation as f}from"../keyboard-navigation/index.js";import y from"./submenu.context.js";import b from"../../../../__internal__/utils/helpers/guid/index.js";import{BLOCK_INDEX_SELECTOR as v,SCROLLABLE_BLOCK as h,SCROLLABLE_BLOCK_PARENT as g,ALL_CHILDREN_SELECTOR as O}from"../locators.js";import{useStableCallback as w}from"../../../../hooks/__internal__/useStableCallback/useStableCallback.js";import S from"../../../navigation-bar/__internal__/fixed-navigation-bar.context.js";import{defaultFocusableSelectors as j}from"../../../../__internal__/focus-trap/focus-trap-utils.js";function x(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function D(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){x(e,t,n[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 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}const _=n.forwardRef(((n,x)=>{var{children:_,className:T,title:k,icon:A,submenuDirection:I="right",onKeyDown:K,variant:C="default",showDropdownArrow:F=!0,clickToOpen:M,href:E,maxWidth:W,asPassiveItem:q,onSubmenuOpen:R,onSubmenuClose:V,onClick:H,submenuMaxWidth:L,submenuMinWidth:N}=n,B=function(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}(n,["children","className","title","icon","submenuDirection","onKeyDown","variant","showDropdownArrow","clickToOpen","href","maxWidth","asPassiveItem","onSubmenuOpen","onSubmenuClose","onClick","submenuMaxWidth","submenuMinWidth"]);const[$,U]=r(null),z=o(b()),{inFullscreenView:G,openSubmenuId:J,setOpenSubmenuId:Q,menuType:X}=d(),[Y,Z]=r(!1),[ee,te]=r(null),[ne,re]=r([]),[oe,ie]=r(""),[ue,ae]=r(!1),[le,se]=r(!1),ce=ne.length,{submenuMaxHeight:me}=i(S),pe=w(R),de=u((()=>{const e=null==$?void 0:$.querySelectorAll(v);if(e&&Y&&ce){const t=Array.from(e),n=null==$?void 0:$.querySelector(`[data-component='${h}']`),r=n?t.indexOf(n):-1;return(null==n?void 0:n.querySelector(`[data-component='${g}']`))?r+1:r}return-1}),[Y,ce,$]),fe=o(null),ye=a((()=>{fe.current=setTimeout((()=>{ie("")}),1500)}),[]),be=a((()=>{fe.current&&clearTimeout(fe.current),ye()}),[ye]);l((()=>()=>{fe.current&&clearTimeout(fe.current)}),[]);const ve=a((()=>{Z(!0),Q(z.current)}),[Q]),he=o();l((()=>{Y&&$&&(()=>{var e;const t=Array.from((null==$?void 0:$.querySelectorAll("ul:not([data-component='submenu'])"))||[]);if(0===t.length)return;const n=Array.from((null==$?void 0:$.querySelectorAll("[data-component='menu-item']"))||[]).pop();he.current=n;const r=t.pop(),o=Boolean((null==r||null===(e=r.parentElement)||void 0===e?void 0:e.dataset.component)===h),i=Array.from((null==r?void 0:r.querySelectorAll("[data-component='menu-item']"))||[]).pop();let u=!1;i&&r&&(u=i.getBoundingClientRect().bottom<r.getBoundingClientRect().bottom);const a=!!i&&i===n;ae(a),se(a&&!o||a&&o&&!u)})()}),[Y,$,ce]),l((()=>{Y&&pe&&pe()}),[Y,pe]);const ge=a((()=>{Z(!1),te(null),V&&V(),ie("")}),[V]);l((()=>{J&&J!==z.current&&ge()}),[J,ge]);const Oe=a((e=>ne.findIndex((t=>t===e))),[ne]),we=a((e=>{const t=p.isEnterKey(e)||p.isSpaceKey(e);if(!t&&!p.isDownKey(e)||Y||(e.preventDefault(),ve()),Y){const n=Oe(ee);let r=n;if(ee||((t&&!E||p.isSpaceKey(e)&&E)&&(e.preventDefault(),ge()),p.isShiftKey(e)&&p.isTabKey(e)&&ge()),p.isDownKey(e)&&(e.preventDefault(),r<ce-1&&(r+=1)),p.isUpKey(e)&&(e.preventDefault(),ae(!1),r>0&&(r-=1)),p.isEscKey(e))return null==K||K(e),void ge();p.isHomeKey(e)&&(e.preventDefault(),e.stopPropagation(),r=0),p.isEndKey(e)&&(e.preventDefault(),e.stopPropagation(),r=ce-1),1===e.key.length?(e.stopPropagation(),fe.current?be():ye(),ie(`${oe}${e.key.toLowerCase()}`)):ie(""),p.composedPath(e.nativeEvent).find((e=>e instanceof HTMLElement&&("input"===e.getAttribute("data-element")||"input-icon-toggle"===e.getAttribute("data-element"))))||p.isEnterKey(e)&&setTimeout((()=>ge()),0),r!==n&&te(ne[r])}}),[ne,Y,E,ce,ee,Oe,ve,ge,K,oe,be,ye]);return l((()=>{if($&&_){const e=null==$?void 0:$.querySelectorAll(O);e&&re(Array.from(e).filter((e=>e.querySelector(j))).map((e=>e.getAttribute("id"))))}}),[_,Y,$]),l((()=>{const e=null==$?void 0:$.querySelectorAll(O);if(e&&""!==oe){const t=Array.from(e),n=f(oe,t);n&&te(n.id)}}),[$,oe,ne]),e(c,G?{"data-component":"submenu-wrapper",inFullscreenView:G,asPassiveItem:q,menuType:X,children:[t(s,P(D({},B),{onClick:q?void 0:H,className:T,menuType:X,ref:x,href:E,menuItemVariant:C,inFullscreenView:G,asDiv:q,children:k})),t(m,{"data-component":"submenu",variant:C,menuType:X,inFullscreenView:G,ref:U,applyFocusRadiusStyling:!1,applyFocusRadiusStylingToLastItem:le,children:t(y.Provider,{value:{handleKeyDown:we,blockIndex:de,updateFocusId:te},children:_})})]}:{"data-component":"submenu-wrapper","data-role":"submenu-wrapper",onMouseOver:M?void 0:()=>ve(),onMouseLeave:()=>ge(),isSubmenuOpen:Y,ref:U,children:[t(s,P(D({},B),{className:T,menuType:X,ref:x,icon:A,tabIndex:-1,menuItemVariant:C,isOpen:Y,hasSubmenu:!0,showDropdownArrow:F,onKeyDown:we,onClick:e=>{ve(),H&&H(e)},clickToOpen:M,href:E,maxWidth:W,"aria-expanded":Y,"data-role":"submenu-parent-item",children:k})),Y&&t(m,{"data-component":"submenu",submenuDirection:I,variant:C,menuType:X,role:0===de?"presentation":"list",maxHeight:me,applyFocusRadiusStyling:ue,applyFocusRadiusStylingToLastItem:le,submenuMaxWidth:L,submenuMinWidth:N,onBlur:e=>{e.currentTarget.contains(e.relatedTarget)||ge()},children:t(y.Provider,{value:{submenuFocusId:ee,handleKeyDown:we,blockIndex:de,updateFocusId:te,submenuHasMaxWidth:!!L},children:_})})]})}));_.displayName="submenu";export{_ as default};
|
|
@@ -31,28 +31,49 @@ export interface TabsContextProps {
|
|
|
31
31
|
setInfos: (childId: string, tabId: string, info: string | boolean) => void;
|
|
32
32
|
}
|
|
33
33
|
export interface TabPanelProps {
|
|
34
|
+
/** The content to be shown in the tab panel */
|
|
34
35
|
children?: React.ReactNode;
|
|
36
|
+
/** The ID of the tab panel */
|
|
35
37
|
id: string;
|
|
38
|
+
/** The ID of the controlling tab */
|
|
36
39
|
tabId: string;
|
|
37
40
|
}
|
|
38
41
|
export interface TabListProps {
|
|
42
|
+
/** The label read out when the tab list gains focus */
|
|
39
43
|
ariaLabel: string;
|
|
44
|
+
/** The tabs to be shown in the tab list */
|
|
40
45
|
children?: React.ReactNode;
|
|
41
46
|
}
|
|
42
47
|
export interface TabProps {
|
|
48
|
+
/** The tab panel that this tab controls */
|
|
43
49
|
controls: string;
|
|
50
|
+
/** The ID of the tab */
|
|
44
51
|
id: string;
|
|
52
|
+
/** The error state of the tab */
|
|
45
53
|
error?: boolean | string;
|
|
54
|
+
/** The label shown on the tab */
|
|
46
55
|
label: React.ReactNode;
|
|
56
|
+
/** The item shown to the left of the label */
|
|
47
57
|
leftSlot?: React.ReactNode;
|
|
58
|
+
/** The item shown to the right of the label */
|
|
48
59
|
rightSlot?: React.ReactNode;
|
|
60
|
+
/** The warning state of the tab */
|
|
49
61
|
warning?: boolean | string;
|
|
62
|
+
/**
|
|
63
|
+
* The info state of the tab
|
|
64
|
+
* @deprecated to be removed when legacy `Tabs` and `Tab` are removed
|
|
65
|
+
* */
|
|
50
66
|
info?: boolean | string;
|
|
51
67
|
}
|
|
52
68
|
export interface TabsProps {
|
|
69
|
+
/** The tab list to be rendered within this set of tabs */
|
|
53
70
|
children?: React.ReactNode;
|
|
71
|
+
/** The label associated with this set of tabs, for assistive technologies */
|
|
54
72
|
labelledBy?: string;
|
|
73
|
+
/** The orientation of the tabs */
|
|
55
74
|
orientation?: "horizontal" | "vertical";
|
|
75
|
+
/** The pre-selected tab to show e.g when restoring from URL */
|
|
56
76
|
selectedTabId?: string;
|
|
77
|
+
/** The size of the tabs to use */
|
|
57
78
|
size?: "medium" | "large";
|
|
58
79
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/** @deprecated The value 'default' for the variant prop is deprecated and will soon be removed. Please use value 'typical' instead. */
|
|
2
2
|
type DeprecatedDefaultVariant = "default";
|
|
3
|
-
/** @deprecated The value '
|
|
3
|
+
/** @deprecated The value 'neutral' for the variant prop is deprecated and will soon be removed. Please use value 'subtle' instead. */
|
|
4
4
|
type DeprecatedNeutralVariant = "neutral";
|
|
5
5
|
type Variants = "typical" | "negative" | "subtle" | DeprecatedDefaultVariant | DeprecatedNeutralVariant;
|
|
6
6
|
export interface StyledLinkProps {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var o=require("styled-components"),r=require("../../style/themes/apply-base-theme.js"),e=require("../icon/icon.style.js"),
|
|
1
|
+
"use strict";var o=require("styled-components"),r=require("../../style/themes/apply-base-theme.js"),e=require("../../style/utils/add-focus-styling.js"),t=require("../icon/icon.style.js"),i=require("../button/button.style.js");function a(o){return o&&o.__esModule?o:{default:o}}var s=a(o);const n={light:o=>{let r="#08711E",e="#10601C";return"negative"===o?(r="#B23342",e="#9F303C"):"subtle"===o&&(r="#000000E5",e="#000000"),{color:r,hoverColor:e,disabledColor:"var(--colorsActionMajorYin030)",focusColor:"#000000",focusBgColor:"#FFD27E",focusBoxShadowColor:"#000000"}},dark:o=>{let r="#4EDC54",e="#72E26F";return"negative"===o?(r="#E85B66",e="#ED6E74"):"subtle"===o&&(r="var(--colorsUtilityYang100)",e="var(--colorsUtilityYang100)"),{color:r,hoverColor:e,disabledColor:"var(--colorsActionMajorYang030)",focusColor:"#FFFFFF",focusBgColor:"#926916",focusBoxShadowColor:"#FFB500"}}},l=s.default.span.attrs(r.default).withConfig({displayName:"link.style__StyledLink",componentId:"sc-59de49aa-0"})(["",""],(({isSkipLink:r,theme:a,iconAlign:s,hasContent:l,disabled:d,underline:c,variant:u,inverse:v,isMenuItem:b,hasFocus:g,linkSize:f})=>{const p=v?"dark":"light",{color:h,hoverColor:m,disabledColor:y,focusColor:x,focusBgColor:C,focusBoxShadowColor:k}=n[p](u),w="medium"===f?"var(--fontSizes100)":"var(--fontSizes200)";return o.css([""," "," "," > a,> button{text-decoration:",";:hover{text-decoration:",";}"," > ","{display:",";position:relative;vertical-align:middle;"," ","}&:focus{color:",";","{color:",";}outline:none;}"," ","}"," "," > button,",":not(.search-button){background-color:transparent;border:none;padding:0;}"],r&&o.css(["a{position:absolute;padding-left:var(--spacing300);padding-right:var(--spacing300);line-height:var(--sizing600);left:-999em;z-index:",";border:3px solid var(--colorsUtilityYin100);box-shadow:var(--boxShadow300);border-radius:var(--spacing000) var(--spacing100) var(--spacing100) var(--spacing000);font-size:",";color:var(--colorsUtilityYin090);&:hover{cursor:pointer;color:var(--colorsUtilityYin090);","{color:var(--colorsActionMajor600);}}&:focus{background-color:var(--colorsSemanticFocus500);text-decoration:underline var(--colorsUtilityYin100);text-decoration-thickness:4px;text-underline-offset:3px;-webkit-text-decoration:underline var(--colorsUtilityYin100);-webkit-text-decoration-thickness:4px;-webkit-text-underline-offset:3px;}}a:focus{top:var(--spacing100);left:var(--spacing000);}"],a.zIndex.aboveAll,w,t.default),!r&&o.css(["> a,> button{font-size:",";"," ","}"],w,!d&&o.css(["color:",";","{color:",";}&:hover{color:",";> ","{color:",";}}&:not(:has(img,svg,picture)):focus{background-color:",";border-radius:var(--borderRadius025);}"],h,t.default,h,m,t.default,m,C),d&&o.css(["color:",";&:hover,&:focus{color:",";}"],y,y)),!d&&o.css(["> a:any-link:hover,> button:hover{cursor:pointer;}"]),l&&"always"===c?"underline":"none",!l||"hover"!==c&&"always"!==c?"none":"underline",b&&"display: inline-block;",t.default,l?"inline-block":"inline","left"===s&&o.css(["margin-right:",";"],l?"var(--spacing050)":0),"right"===s&&o.css(["margin-right:0;margin-left:",";"],l?"var(--spacing100)":0),x,t.default,x,!d&&o.css(["&:has(img,svg,picture){display:inline-block;}&:has(img,svg,picture):focus{"," border-radius:var(--borderRadius025);outline:default;}"],e.default()),d&&o.css(["cursor:not-allowed;"]),!r&&!d&&g&&o.css(["> a,> button{outline:none;text-decoration:underline;border-bottom-left-radius:var(--borderRadius000);border-bottom-right-radius:var(--borderRadius000);}max-width:fit-content;box-shadow:0 var(--spacing050) 0 0 ",';border-bottom-left-radius:var(--borderRadius025);border-bottom-right-radius:var(--borderRadius025);&:has([data-popover-container-button="true"]){border-bottom-left-radius:var(--borderRadius000);border-bottom-right-radius:var(--borderRadius000);}'],k),!d&&g&&o.css(["&:has(img,svg,picture){> a,> button{","}}"],e.default()),i.default)})),d=s.default.span.withConfig({displayName:"link.style__StyledContent",componentId:"sc-59de49aa-1"})([""]);exports.StyledContent=d,exports.StyledLink=l;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),n=require("../../menu-item/menu-item.style.js"),r=require("./submenu.style.js"),u=require("../../../../__internal__/utils/helpers/events/events.js"),o=require("../strict-menu.context.js"),a=require("../keyboard-navigation/index.js"),l=require("./submenu.context.js"),i=require("../../../../__internal__/utils/helpers/guid/index.js"),s=require("../locators.js"),c=require("../../../../hooks/__internal__/useStableCallback/useStableCallback.js"),d=require("../../../navigation-bar/__internal__/fixed-navigation-bar.context.js"),p=require("../../../../__internal__/focus-trap/focus-trap-utils.js");function m(e){return e&&e.__esModule?e:{default:e}}function f(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function b(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){f(e,t,n[t])}))}return e}function y(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}const S=m(t).default.forwardRef(((m,f)=>{var{children:S,className:v,title:O,icon:h,submenuDirection:g="right",onKeyDown:j,variant:w="default",showDropdownArrow:x=!0,clickToOpen:_,href:C,maxWidth:E,asPassiveItem:D,onSubmenuOpen:L,onSubmenuClose:k,onClick:A,submenuMaxWidth:P,submenuMinWidth:
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),n=require("../../menu-item/menu-item.style.js"),r=require("./submenu.style.js"),u=require("../../../../__internal__/utils/helpers/events/events.js"),o=require("../strict-menu.context.js"),a=require("../keyboard-navigation/index.js"),l=require("./submenu.context.js"),i=require("../../../../__internal__/utils/helpers/guid/index.js"),s=require("../locators.js"),c=require("../../../../hooks/__internal__/useStableCallback/useStableCallback.js"),d=require("../../../navigation-bar/__internal__/fixed-navigation-bar.context.js"),p=require("../../../../__internal__/focus-trap/focus-trap-utils.js");function m(e){return e&&e.__esModule?e:{default:e}}function f(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function b(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){f(e,t,n[t])}))}return e}function y(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}const S=m(t).default.forwardRef(((m,f)=>{var{children:S,className:v,title:O,icon:h,submenuDirection:g="right",onKeyDown:j,variant:w="default",showDropdownArrow:x=!0,clickToOpen:_,href:C,maxWidth:E,asPassiveItem:D,onSubmenuOpen:L,onSubmenuClose:k,onClick:A,submenuMaxWidth:P,submenuMinWidth:T}=m,q=function(e,t){if(null==e)return{};var n,r,u=function(e,t){if(null==e)return{};var n,r,u={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(u[n]=e[n]);return u}(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)&&(u[n]=e[n])}return u}(m,["children","className","title","icon","submenuDirection","onKeyDown","variant","showDropdownArrow","clickToOpen","href","maxWidth","asPassiveItem","onSubmenuOpen","onSubmenuClose","onClick","submenuMaxWidth","submenuMinWidth"]);const[K,I]=t.useState(null),R=t.useRef(i.default()),{inFullscreenView:M,openSubmenuId:F,setOpenSubmenuId:W,menuType:B}=o.useStrictMenuContext(),[N,H]=t.useState(!1),[V,$]=t.useState(null),[U,X]=t.useState([]),[z,G]=t.useState(""),[J,Q]=t.useState(!1),[Y,Z]=t.useState(!1),ee=U.length,{submenuMaxHeight:te}=t.useContext(d.default),ne=c.useStableCallback(L),re=t.useMemo((()=>{const e=null==K?void 0:K.querySelectorAll(s.BLOCK_INDEX_SELECTOR);if(e&&N&&ee){const t=Array.from(e),n=null==K?void 0:K.querySelector(`[data-component='${s.SCROLLABLE_BLOCK}']`),r=n?t.indexOf(n):-1;return(null==n?void 0:n.querySelector(`[data-component='${s.SCROLLABLE_BLOCK_PARENT}']`))?r+1:r}return-1}),[N,ee,K]),ue=t.useRef(null),oe=t.useCallback((()=>{ue.current=setTimeout((()=>{G("")}),1500)}),[]),ae=t.useCallback((()=>{ue.current&&clearTimeout(ue.current),oe()}),[oe]);t.useEffect((()=>()=>{ue.current&&clearTimeout(ue.current)}),[]);const le=t.useCallback((()=>{H(!0),W(R.current)}),[W]),ie=t.useRef();t.useEffect((()=>{N&&K&&(()=>{var e;const t=Array.from((null==K?void 0:K.querySelectorAll("ul:not([data-component='submenu'])"))||[]);if(0===t.length)return;const n=Array.from((null==K?void 0:K.querySelectorAll("[data-component='menu-item']"))||[]).pop();ie.current=n;const r=t.pop(),u=Boolean((null==r||null===(e=r.parentElement)||void 0===e?void 0:e.dataset.component)===s.SCROLLABLE_BLOCK),o=Array.from((null==r?void 0:r.querySelectorAll("[data-component='menu-item']"))||[]).pop();let a=!1;o&&r&&(a=o.getBoundingClientRect().bottom<r.getBoundingClientRect().bottom);const l=!!o&&o===n;Q(l),Z(l&&!u||l&&u&&!a)})()}),[N,K,ee]),t.useEffect((()=>{N&&ne&&ne()}),[N,ne]);const se=t.useCallback((()=>{H(!1),$(null),k&&k(),G("")}),[k]);t.useEffect((()=>{F&&F!==R.current&&se()}),[F,se]);const ce=t.useCallback((e=>U.findIndex((t=>t===e))),[U]),de=t.useCallback((e=>{const t=u.default.isEnterKey(e)||u.default.isSpaceKey(e);if(!t&&!u.default.isDownKey(e)||N||(e.preventDefault(),le()),N){const n=ce(V);let r=n;if(V||((t&&!C||u.default.isSpaceKey(e)&&C)&&(e.preventDefault(),se()),u.default.isShiftKey(e)&&u.default.isTabKey(e)&&se()),u.default.isDownKey(e)&&(e.preventDefault(),r<ee-1&&(r+=1)),u.default.isUpKey(e)&&(e.preventDefault(),Q(!1),r>0&&(r-=1)),u.default.isEscKey(e))return null==j||j(e),void se();u.default.isHomeKey(e)&&(e.preventDefault(),e.stopPropagation(),r=0),u.default.isEndKey(e)&&(e.preventDefault(),e.stopPropagation(),r=ee-1),1===e.key.length?(e.stopPropagation(),ue.current?ae():oe(),G(`${z}${e.key.toLowerCase()}`)):G(""),u.default.composedPath(e.nativeEvent).find((e=>e instanceof HTMLElement&&("input"===e.getAttribute("data-element")||"input-icon-toggle"===e.getAttribute("data-element"))))||u.default.isEnterKey(e)&&setTimeout((()=>se()),0),r!==n&&$(U[r])}}),[U,N,C,ee,V,ce,le,se,j,z,ae,oe]);return t.useEffect((()=>{if(K&&S){const e=null==K?void 0:K.querySelectorAll(s.ALL_CHILDREN_SELECTOR);e&&X(Array.from(e).filter((e=>e.querySelector(p.defaultFocusableSelectors))).map((e=>e.getAttribute("id"))))}}),[S,N,K]),t.useEffect((()=>{const e=null==K?void 0:K.querySelectorAll(s.ALL_CHILDREN_SELECTOR);if(e&&""!==z){const t=Array.from(e),n=a.characterNavigation(z,t);n&&$(n.id)}}),[K,z,U]),M?e.jsxs(r.StyledSubmenuWrapper,{"data-component":"submenu-wrapper",inFullscreenView:M,asPassiveItem:D,menuType:B,children:[e.jsx(n.default,y(b({},q),{onClick:D?void 0:A,className:v,menuType:B,ref:f,href:C,menuItemVariant:w,inFullscreenView:M,asDiv:D,children:O})),e.jsx(r.StyledSubmenu,{"data-component":"submenu",variant:w,menuType:B,inFullscreenView:M,ref:I,applyFocusRadiusStyling:!1,applyFocusRadiusStylingToLastItem:Y,children:e.jsx(l.default.Provider,{value:{handleKeyDown:de,blockIndex:re,updateFocusId:$},children:S})})]}):e.jsxs(r.StyledSubmenuWrapper,{"data-component":"submenu-wrapper","data-role":"submenu-wrapper",onMouseOver:_?void 0:()=>le(),onMouseLeave:()=>se(),isSubmenuOpen:N,ref:I,children:[e.jsx(n.default,y(b({},q),{className:v,menuType:B,ref:f,icon:h,tabIndex:-1,menuItemVariant:w,isOpen:N,hasSubmenu:!0,showDropdownArrow:x,onKeyDown:de,onClick:e=>{le(),A&&A(e)},clickToOpen:_,href:C,maxWidth:E,"aria-expanded":N,"data-role":"submenu-parent-item",children:O})),N&&e.jsx(r.StyledSubmenu,{"data-component":"submenu",submenuDirection:g,variant:w,menuType:B,role:0===re?"presentation":"list",maxHeight:te,applyFocusRadiusStyling:J,applyFocusRadiusStylingToLastItem:Y,submenuMaxWidth:P,submenuMinWidth:T,onBlur:e=>{e.currentTarget.contains(e.relatedTarget)||se()},children:e.jsx(l.default.Provider,{value:{submenuFocusId:V,handleKeyDown:de,blockIndex:re,updateFocusId:$,submenuHasMaxWidth:!!P},children:S})})]})}));S.displayName="submenu",exports.default=S;
|
|
@@ -31,28 +31,49 @@ export interface TabsContextProps {
|
|
|
31
31
|
setInfos: (childId: string, tabId: string, info: string | boolean) => void;
|
|
32
32
|
}
|
|
33
33
|
export interface TabPanelProps {
|
|
34
|
+
/** The content to be shown in the tab panel */
|
|
34
35
|
children?: React.ReactNode;
|
|
36
|
+
/** The ID of the tab panel */
|
|
35
37
|
id: string;
|
|
38
|
+
/** The ID of the controlling tab */
|
|
36
39
|
tabId: string;
|
|
37
40
|
}
|
|
38
41
|
export interface TabListProps {
|
|
42
|
+
/** The label read out when the tab list gains focus */
|
|
39
43
|
ariaLabel: string;
|
|
44
|
+
/** The tabs to be shown in the tab list */
|
|
40
45
|
children?: React.ReactNode;
|
|
41
46
|
}
|
|
42
47
|
export interface TabProps {
|
|
48
|
+
/** The tab panel that this tab controls */
|
|
43
49
|
controls: string;
|
|
50
|
+
/** The ID of the tab */
|
|
44
51
|
id: string;
|
|
52
|
+
/** The error state of the tab */
|
|
45
53
|
error?: boolean | string;
|
|
54
|
+
/** The label shown on the tab */
|
|
46
55
|
label: React.ReactNode;
|
|
56
|
+
/** The item shown to the left of the label */
|
|
47
57
|
leftSlot?: React.ReactNode;
|
|
58
|
+
/** The item shown to the right of the label */
|
|
48
59
|
rightSlot?: React.ReactNode;
|
|
60
|
+
/** The warning state of the tab */
|
|
49
61
|
warning?: boolean | string;
|
|
62
|
+
/**
|
|
63
|
+
* The info state of the tab
|
|
64
|
+
* @deprecated to be removed when legacy `Tabs` and `Tab` are removed
|
|
65
|
+
* */
|
|
50
66
|
info?: boolean | string;
|
|
51
67
|
}
|
|
52
68
|
export interface TabsProps {
|
|
69
|
+
/** The tab list to be rendered within this set of tabs */
|
|
53
70
|
children?: React.ReactNode;
|
|
71
|
+
/** The label associated with this set of tabs, for assistive technologies */
|
|
54
72
|
labelledBy?: string;
|
|
73
|
+
/** The orientation of the tabs */
|
|
55
74
|
orientation?: "horizontal" | "vertical";
|
|
75
|
+
/** The pre-selected tab to show e.g when restoring from URL */
|
|
56
76
|
selectedTabId?: string;
|
|
77
|
+
/** The size of the tabs to use */
|
|
57
78
|
size?: "medium" | "large";
|
|
58
79
|
}
|