carbon-react 158.7.0 → 158.7.2
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/badge/badge.style.js +1 -1
- package/esm/components/date/__internal__/date-picker/date-picker.component.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/esm/hooks/__internal__/useFloating/useFloating.js +1 -1
- package/lib/components/badge/badge.style.js +1 -1
- package/lib/components/date/__internal__/date-picker/date-picker.component.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/lib/hooks/__internal__/useFloating/useFloating.js +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
import e,{css as r}from"styled-components";import{margin as o}from"styled-system";import a from"../icon/icon.style.js";import t from"../button/button.component.js";import l from"../../style/themes/apply-base-theme.js";import{toColor as i}from"../../style/utils/color.js";const s=(e,r)=>"subtle"===e?`\n ${r?"var(--badge-inverse-bg-alt, #007FD9)":"var(--badge-bg-alt, #0071C3)"};\n `:`\n ${r?"var(--badge-inverse-bg-default, #F50059)":"var(--badge-bg-default, #DB004E)"};\n `,d=e.div.withConfig({displayName:"badge.style__StyledBadgeWrapper",componentId:"sc-a94db209-0"})([""," position:relative;display:inline-block;"],o),n=e.div.withConfig({displayName:"badge.style__StyledCounter",componentId:"sc-a94db209-1"})(["font-weight:500;font-size:13px;line-height:150%;"]),b=e.span.attrs(l).attrs((({onClick:e})=>({as:e?t:void 0}))).withConfig({displayName:"badge.style__StyledBadge",componentId:"sc-a94db209-2"})([""," box-sizing:content-box;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;border-radius:var(--global-radius-container-circle,999px);border:solid var(--global-borderwidth-s,2px);",""],o,(({size:e,variant:o,inverse:t,hasChildren:l,customColor:d,theme:n,onClick:b})=>r(["",";background-color:",";border-color:",";color:",";"," "," ",""],(e=>{switch(e){case"small":return r(["width:var(--global-size4xs,8px);height:var(--global-size4xs,8px);"]);case"large":return r(["min-width:var(--global-size2xs,20px);height:var(--global-size-xs,24px);padding:0 var(--global-space-comp2xs,2px);"]);default:return r(["min-width:var(--global-size3xs,16px);height:var(--global-size2xs,20px);padding:0 var(--global-space-comp2xs,2px);"])}})(e),s(o,t),t?"var(--badge-inverse-border-default, #000)":"var(--badge-border-default, #FFF)",t?"var(--badge-inverse-label-default, #000)":"var(--badge-label-default, #FFF)",l&&r(["position:absolute;z-index:2;",";"],(e=>{switch(e){case"small":return r(["top:-3px;right:-2px;"]);case"large":return r(["top:-12px;right:-8px;"]);default:return r(["top:-10px;right:-6px;"])}})(e)),b&&r(["min-height:0;:hover,:focus{padding:0;border-color:",";background-color:",";","{margin:0;color:",";}}"],s(o,t),s(o,t),a,t?"var(--badge-inverse-label-default, #000)":"var(--badge-label-default, #FFF)"),d&&r(["background-color:var(--badge-border-default,#fff);border-color:",";color:",";",""],i(n,d),i(n,d),b&&r([":hover,:focus{background-color:",";border-color:",";}"],i(n,d),i(n,d))))));export{b as StyledBadge,d as StyledBadgeWrapper,n as StyledCounter};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,Fragment as t,jsxs as r}from"react/jsx-runtime";import{offset as o,flip as n}from"@floating-ui/dom";import{useState as l,useMemo as a,useRef as i,useCallback as c,useContext as s,useEffect as u}from"react";import{DayPicker as d,defaultLocale as p}from"react-day-picker";import m from"../../../../hooks/__internal__/useLocale/useLocale.js";import y from"../../../../__internal__/popover/popover.component.js";import{Navbar as f}from"../navbar/navbar.component.js";import{Weekday as b}from"../weekday/weekday.component.js";import{getDisabledDays as v}from"../utils.js";import{defaultFocusableSelectors as
|
|
1
|
+
import{jsx as e,Fragment as t,jsxs as r}from"react/jsx-runtime";import{offset as o,flip as n}from"@floating-ui/dom";import{useState as l,useMemo as a,useRef as i,useCallback as c,useContext as s,useEffect as u}from"react";import{DayPicker as d,defaultLocale as p}from"react-day-picker";import m from"../../../../hooks/__internal__/useLocale/useLocale.js";import y from"../../../../__internal__/popover/popover.component.js";import{Navbar as f}from"../navbar/navbar.component.js";import{Weekday as b}from"../weekday/weekday.component.js";import{getDisabledDays as v}from"../utils.js";import{defaultFocusableSelectors as g}from"../../../../__internal__/focus-trap/focus-trap-utils.js";import O from"../../../../__internal__/utils/helpers/events/events.js";import h from"../../../flat-table/__internal__/flat-table.context.js";import j from"../../../../__internal__/utils/logger/index.js";import w from"./day-picker.style.js";function _(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function k(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},o=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),o.forEach((function(t){_(e,t,r[t])}))}return e}const D=[o(3),n({fallbackStrategy:"initialPlacement"})],P=f;let S=!1;const x=({inputElement:o,minDate:n,maxDate:f,selectedDays:_,disablePortal:x=!0,onDayClick:q,pickerMouseDown:K,pickerProps:M,open:T,setOpen:A,pickerTabGuardId:I,onPickerClose:C,ariaLabel:E,ariaLabelledBy:F})=>{!S&&x&&(S=!0,j.deprecate("`disablePortal` is deprecated in DateInput and DateRange, and support will soon be removed."));const[L,N]=l(_||new Date),z=m(),{localize:W,options:B}=z.date.dateFnsLocale(),{weekStartsOn:U}=B||{},$=a((()=>Array.from({length:7}).map(((e,t)=>null==W?void 0:W.day(t)))),[W]),G=a((()=>{const e=e=>z.locale().includes(e);return Array.from({length:7}).map(((t,r)=>null==W?void 0:W.day(r,["de","pl"].some(e)?{width:"wide"}:{width:"abbreviated"}).substring(0,e("de")?2:3)))}),[z,W]),H=i(null),R=c((e=>{var t,r;T&&O.isEscKey(e)&&(N(_),null===(r=o.current)||void 0===r||null===(t=r.querySelector("input"))||void 0===t||t.focus(),A(!1),null==C||C(),e.stopPropagation())}),[o,C,T,_,A]),{isInFlatTable:Y,setHasOpenDatePicker:J}=s(h);return u((()=>{null==J||J(!!T)}),[T,J]),u((()=>{_&&N(_)}),[_]),u((()=>{!T&&_&&(null==L?void 0:L.getMonth())!==(null==_?void 0:_.getMonth())&&N(_)}),[L,T,_]),T?e(t,{children:e(y,{placement:"bottom-start",reference:o,middleware:D,disablePortal:x,disableBackgroundUI:Y,popoverStrategy:"fixed",children:r(w,{id:"styled-day-picker","data-role":"date-picker",ref:H,onMouseDown:K,onKeyUp:R,onKeyDown:e=>{var t,r,n;(null===(t=H.current)||void 0===t?void 0:t.querySelector(".rdp-nav button"))===document.activeElement&&O.isTabKey(e)&&O.isShiftKey(e)&&(e.preventDefault(),A(!1),null==C||C(),null===(n=o.current)||void 0===n||null===(r=n.querySelector("input"))||void 0===r||r.focus())},role:"region","aria-label":E,"aria-labelledby":F,children:[e("div",{id:I,tabIndex:0,onFocus:()=>{var e,t;null===(t=H.current)||void 0===t||null===(e=t.querySelector("button"))||void 0===e||e.focus()}}),e(d,(Q=k({formatters:{formatCaption:e=>`${null==W?void 0:W.month(e.getMonth())} ${e.getFullYear()}`},required:!1,weekStartsOn:U,onMonthChange:N,disabled:v(n,f),locale:{localize:k({},p.localize)},selected:_,month:L||new Date,onDayClick:(e,t,r)=>{((e,t)=>{e&&(null==q||q(e,t)),null==C||C()})(e,r)},components:{Nav:P,Weekday:t=>{const{className:r,"aria-label":o}=t,n={Sunday:0,Monday:1,Tuesday:2,Wednesday:3,Thursday:4,Friday:5,Saturday:6}[o];return e(b,{className:r,title:$[n],children:G[n]})}},fixedWeeks:!0,defaultMonth:_||void 0,onDayKeyDown:(e,t,r)=>{var n;n=r,setTimeout((()=>{if(O.isTabKey(n)&&!O.isShiftKey(n)){var e;n.preventDefault(),A(!1),null==C||C();const l=null===(e=o.current)||void 0===e?void 0:e.querySelector("input");if(l){var t,r;const e=Array.from(document.querySelectorAll(g)||[]),o=Array.from((null===(t=H.current)||void 0===t?void 0:t.querySelectorAll("button, [tabindex]"))||[]),n=e.filter((e=>-1!==Number(e.tabIndex)&&!o.includes(e))),a=n.indexOf(l)+1;null===(r=n[a])||void 0===r||r.focus()}}}),0)}},M),V={showOutsideDays:!0,mode:"single"},V=null!=V?V:{},Object.getOwnPropertyDescriptors?Object.defineProperties(Q,Object.getOwnPropertyDescriptors(V)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(V)).forEach((function(e){Object.defineProperty(Q,e,Object.getOwnPropertyDescriptor(V,e))})),Q))]})})}):null;var Q,V};x.displayName="DatePicker";export{x as DatePicker,x as default};
|
|
@@ -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 +1 @@
|
|
|
1
|
-
import{useRef as t,useLayoutEffect as e}from"react";import{autoUpdate as n,computePosition as i}from"@floating-ui/dom";const o=({isOpen:o,reference:a,floating:r,strategy:l="absolute",placement:s,middleware:c,animationFrame:p})=>{const m=t(null);e((()=>{let t;const e=a.current,f=r.current;if(e&&f&&o){const{left:o,top:a,position:r,width:u,height:
|
|
1
|
+
import{useRef as t,useLayoutEffect as e}from"react";import{autoUpdate as n,computePosition as i}from"@floating-ui/dom";const o=({isOpen:o,reference:a,floating:r,strategy:l="absolute",placement:s,middleware:c,animationFrame:p})=>{const m=t(null);e((()=>{let t;const e=a.current,f=r.current;if(e&&f&&o){const{left:o,top:a,position:r,width:u,height:d}=f.style;m.current={left:o,top:a,position:r,width:u,height:d},Object.assign(f.style,{position:l,top:0,left:0});const g=()=>{i(e,f,{strategy:l,middleware:c,placement:s}).then((({x:t,y:e,placement:n})=>{Object.assign(f.style,{left:`${t}px`,top:`${e}px`,position:l,"z-index":1001}),f.setAttribute("data-floating-placement",n)}))};t=n(e,f,g,{animationFrame:p})}return()=>{t&&f&&(t(),t=null,Object.assign(f.style,m.current),f.removeAttribute("data-floating-placement"))}}),[o,a,r,l,c,s,p])};export{o as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var e=require("styled-components"),
|
|
1
|
+
"use strict";var e=require("styled-components"),r=require("styled-system"),a=require("../icon/icon.style.js"),o=require("../button/button.component.js"),t=require("../../style/themes/apply-base-theme.js"),l=require("../../style/utils/color.js");function s(e){return e&&e.__esModule?e:{default:e}}var d=s(e);const i=(e,r)=>"subtle"===e?`\n ${r?"var(--badge-inverse-bg-alt, #007FD9)":"var(--badge-bg-alt, #0071C3)"};\n `:`\n ${r?"var(--badge-inverse-bg-default, #F50059)":"var(--badge-bg-default, #DB004E)"};\n `,n=d.default.div.withConfig({displayName:"badge.style__StyledBadgeWrapper",componentId:"sc-a94db209-0"})([""," position:relative;display:inline-block;"],r.margin),c=d.default.div.withConfig({displayName:"badge.style__StyledCounter",componentId:"sc-a94db209-1"})(["font-weight:500;font-size:13px;line-height:150%;"]),g=d.default.span.attrs(t.default).attrs((({onClick:e})=>({as:e?o.default:void 0}))).withConfig({displayName:"badge.style__StyledBadge",componentId:"sc-a94db209-2"})([""," box-sizing:content-box;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;border-radius:var(--global-radius-container-circle,999px);border:solid var(--global-borderwidth-s,2px);",""],r.margin,(({size:r,variant:o,inverse:t,hasChildren:s,customColor:d,theme:n,onClick:c})=>e.css(["",";background-color:",";border-color:",";color:",";"," "," ",""],(r=>{switch(r){case"small":return e.css(["width:var(--global-size4xs,8px);height:var(--global-size4xs,8px);"]);case"large":return e.css(["min-width:var(--global-size2xs,20px);height:var(--global-size-xs,24px);padding:0 var(--global-space-comp2xs,2px);"]);default:return e.css(["min-width:var(--global-size3xs,16px);height:var(--global-size2xs,20px);padding:0 var(--global-space-comp2xs,2px);"])}})(r),i(o,t),t?"var(--badge-inverse-border-default, #000)":"var(--badge-border-default, #FFF)",t?"var(--badge-inverse-label-default, #000)":"var(--badge-label-default, #FFF)",s&&e.css(["position:absolute;z-index:2;",";"],(r=>{switch(r){case"small":return e.css(["top:-3px;right:-2px;"]);case"large":return e.css(["top:-12px;right:-8px;"]);default:return e.css(["top:-10px;right:-6px;"])}})(r)),c&&e.css(["min-height:0;:hover,:focus{padding:0;border-color:",";background-color:",";","{margin:0;color:",";}}"],i(o,t),i(o,t),a.default,t?"var(--badge-inverse-label-default, #000)":"var(--badge-label-default, #FFF)"),d&&e.css(["background-color:var(--badge-border-default,#fff);border-color:",";color:",";",""],l.toColor(n,d),l.toColor(n,d),c&&e.css([":hover,:focus{background-color:",";border-color:",";}"],l.toColor(n,d),l.toColor(n,d))))));exports.StyledBadge=g,exports.StyledBadgeWrapper=n,exports.StyledCounter=c;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("@floating-ui/dom"),r=require("react"),a=require("react-day-picker"),l=require("../../../../hooks/__internal__/useLocale/useLocale.js"),n=require("../../../../__internal__/popover/popover.component.js"),o=require("../navbar/navbar.component.js"),i=require("../weekday/weekday.component.js"),u=require("../utils.js"),s=require("../../../../__internal__/focus-trap/focus-trap-utils.js"),c=require("../../../../__internal__/utils/helpers/events/events.js"),d=require("../../../flat-table/__internal__/flat-table.context.js"),f=require("../../../../__internal__/utils/logger/index.js"),p=require("./day-picker.style.js");function y(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function b(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},a=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(a=a.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),a.forEach((function(t){y(e,t,r[t])}))}return e}const v=[t.offset(3),t.flip({fallbackStrategy:"initialPlacement"})],m=o.Navbar;let j=!1;const g=({inputElement:t,minDate:o,maxDate:y,selectedDays:g,disablePortal:O=!0,onDayClick:k,pickerMouseDown:D,pickerProps:h,open:_,setOpen:w,pickerTabGuardId:P,onPickerClose:q,ariaLabel:S,ariaLabelledBy:x})=>{!j&&O&&(j=!0,f.default.deprecate("`disablePortal` is deprecated in DateInput and DateRange, and support will soon be removed."));const[M,E]=r.useState(g||new Date),K=l.default(),{localize:C,options:F}=K.date.dateFnsLocale(),{weekStartsOn:T}=F||{},A=r.useMemo((()=>Array.from({length:7}).map(((e,t)=>null==C?void 0:C.day(t)))),[C]),I=r.useMemo((()=>{const e=e=>K.locale().includes(e);return Array.from({length:7}).map(((t,r)=>null==C?void 0:C.day(r,["de","pl"].some(e)?{width:"wide"}:{width:"abbreviated"}).substring(0,e("de")?2:3)))}),[K,C]),L=r.useRef(null),N=r.useCallback((e=>{var r,a;_&&c.default.isEscKey(e)&&(E(g),null===(a=t.current)||void 0===a||null===(r=a.querySelector("input"))||void 0===r||r.focus(),w(!1),null==q||q(),e.stopPropagation())}),[t,q,_,g,w]),{isInFlatTable:W,setHasOpenDatePicker:z}=r.useContext(d.default);return r.useEffect((()=>{null==z||z(!!_)}),[_,z]),r.useEffect((()=>{g&&E(g)}),[g]),r.useEffect((()=>{!_&&g&&(null==M?void 0:M.getMonth())!==(null==g?void 0:g.getMonth())&&E(g)}),[M,_,g]),_?e.jsx(e.Fragment,{children:e.jsx(n.default,{placement:"bottom-start",reference:t,middleware:v,disablePortal:O,disableBackgroundUI:W,children:e.jsxs(p.default,{id:"styled-day-picker","data-role":"date-picker",ref:L,onMouseDown:D,onKeyUp:N,onKeyDown:e=>{var r,a,l;(null===(r=L.current)||void 0===r?void 0:r.querySelector(".rdp-nav button"))===document.activeElement&&c.default.isTabKey(e)&&c.default.isShiftKey(e)&&(e.preventDefault(),w(!1),null==q||q(),null===(l=t.current)||void 0===l||null===(a=l.querySelector("input"))||void 0===a||a.focus())},role:"region","aria-label":S,"aria-labelledby":x,children:[e.jsx("div",{id:P,tabIndex:0,onFocus:()=>{var e,t;null===(t=L.current)||void 0===t||null===(e=t.querySelector("button"))||void 0===e||e.focus()}}),e.jsx(a.DayPicker,(B=b({formatters:{formatCaption:e=>`${null==C?void 0:C.month(e.getMonth())} ${e.getFullYear()}`},required:!1,weekStartsOn:T,onMonthChange:E,disabled:u.getDisabledDays(o,y),locale:{localize:b({},a.defaultLocale.localize)},selected:g,month:M||new Date,onDayClick:(e,t,r)=>{((e,t)=>{e&&(null==k||k(e,t)),null==q||q()})(e,r)},components:{Nav:m,Weekday:t=>{const{className:r,"aria-label":a}=t,l={Sunday:0,Monday:1,Tuesday:2,Wednesday:3,Thursday:4,Friday:5,Saturday:6}[a];return e.jsx(i.Weekday,{className:r,title:A[l],children:I[l]})}},fixedWeeks:!0,defaultMonth:g||void 0,onDayKeyDown:(e,r,a)=>{var l;l=a,setTimeout((()=>{if(c.default.isTabKey(l)&&!c.default.isShiftKey(l)){var e;l.preventDefault(),w(!1),null==q||q();const n=null===(e=t.current)||void 0===e?void 0:e.querySelector("input");if(n){var r,a;const e=Array.from(document.querySelectorAll(s.defaultFocusableSelectors)||[]),t=Array.from((null===(r=L.current)||void 0===r?void 0:r.querySelectorAll("button, [tabindex]"))||[]),l=e.filter((e=>-1!==Number(e.tabIndex)&&!t.includes(e))),o=l.indexOf(n)+1;null===(a=l[o])||void 0===a||a.focus()}}}),0)}},h),R={showOutsideDays:!0,mode:"single"},R=null!=R?R:{},Object.getOwnPropertyDescriptors?Object.defineProperties(B,Object.getOwnPropertyDescriptors(R)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(R)).forEach((function(e){Object.defineProperty(B,e,Object.getOwnPropertyDescriptor(R,e))})),B))]})})}):null;var B,R};g.displayName="DatePicker",exports.DatePicker=g,exports.default=g;
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("@floating-ui/dom"),r=require("react"),a=require("react-day-picker"),l=require("../../../../hooks/__internal__/useLocale/useLocale.js"),n=require("../../../../__internal__/popover/popover.component.js"),o=require("../navbar/navbar.component.js"),i=require("../weekday/weekday.component.js"),u=require("../utils.js"),s=require("../../../../__internal__/focus-trap/focus-trap-utils.js"),c=require("../../../../__internal__/utils/helpers/events/events.js"),d=require("../../../flat-table/__internal__/flat-table.context.js"),f=require("../../../../__internal__/utils/logger/index.js"),p=require("./day-picker.style.js");function y(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function b(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},a=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(a=a.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),a.forEach((function(t){y(e,t,r[t])}))}return e}const v=[t.offset(3),t.flip({fallbackStrategy:"initialPlacement"})],m=o.Navbar;let j=!1;const g=({inputElement:t,minDate:o,maxDate:y,selectedDays:g,disablePortal:O=!0,onDayClick:k,pickerMouseDown:D,pickerProps:h,open:_,setOpen:w,pickerTabGuardId:P,onPickerClose:q,ariaLabel:S,ariaLabelledBy:x})=>{!j&&O&&(j=!0,f.default.deprecate("`disablePortal` is deprecated in DateInput and DateRange, and support will soon be removed."));const[M,E]=r.useState(g||new Date),K=l.default(),{localize:C,options:F}=K.date.dateFnsLocale(),{weekStartsOn:T}=F||{},A=r.useMemo((()=>Array.from({length:7}).map(((e,t)=>null==C?void 0:C.day(t)))),[C]),I=r.useMemo((()=>{const e=e=>K.locale().includes(e);return Array.from({length:7}).map(((t,r)=>null==C?void 0:C.day(r,["de","pl"].some(e)?{width:"wide"}:{width:"abbreviated"}).substring(0,e("de")?2:3)))}),[K,C]),L=r.useRef(null),N=r.useCallback((e=>{var r,a;_&&c.default.isEscKey(e)&&(E(g),null===(a=t.current)||void 0===a||null===(r=a.querySelector("input"))||void 0===r||r.focus(),w(!1),null==q||q(),e.stopPropagation())}),[t,q,_,g,w]),{isInFlatTable:W,setHasOpenDatePicker:z}=r.useContext(d.default);return r.useEffect((()=>{null==z||z(!!_)}),[_,z]),r.useEffect((()=>{g&&E(g)}),[g]),r.useEffect((()=>{!_&&g&&(null==M?void 0:M.getMonth())!==(null==g?void 0:g.getMonth())&&E(g)}),[M,_,g]),_?e.jsx(e.Fragment,{children:e.jsx(n.default,{placement:"bottom-start",reference:t,middleware:v,disablePortal:O,disableBackgroundUI:W,popoverStrategy:"fixed",children:e.jsxs(p.default,{id:"styled-day-picker","data-role":"date-picker",ref:L,onMouseDown:D,onKeyUp:N,onKeyDown:e=>{var r,a,l;(null===(r=L.current)||void 0===r?void 0:r.querySelector(".rdp-nav button"))===document.activeElement&&c.default.isTabKey(e)&&c.default.isShiftKey(e)&&(e.preventDefault(),w(!1),null==q||q(),null===(l=t.current)||void 0===l||null===(a=l.querySelector("input"))||void 0===a||a.focus())},role:"region","aria-label":S,"aria-labelledby":x,children:[e.jsx("div",{id:P,tabIndex:0,onFocus:()=>{var e,t;null===(t=L.current)||void 0===t||null===(e=t.querySelector("button"))||void 0===e||e.focus()}}),e.jsx(a.DayPicker,(B=b({formatters:{formatCaption:e=>`${null==C?void 0:C.month(e.getMonth())} ${e.getFullYear()}`},required:!1,weekStartsOn:T,onMonthChange:E,disabled:u.getDisabledDays(o,y),locale:{localize:b({},a.defaultLocale.localize)},selected:g,month:M||new Date,onDayClick:(e,t,r)=>{((e,t)=>{e&&(null==k||k(e,t)),null==q||q()})(e,r)},components:{Nav:m,Weekday:t=>{const{className:r,"aria-label":a}=t,l={Sunday:0,Monday:1,Tuesday:2,Wednesday:3,Thursday:4,Friday:5,Saturday:6}[a];return e.jsx(i.Weekday,{className:r,title:A[l],children:I[l]})}},fixedWeeks:!0,defaultMonth:g||void 0,onDayKeyDown:(e,r,a)=>{var l;l=a,setTimeout((()=>{if(c.default.isTabKey(l)&&!c.default.isShiftKey(l)){var e;l.preventDefault(),w(!1),null==q||q();const n=null===(e=t.current)||void 0===e?void 0:e.querySelector("input");if(n){var r,a;const e=Array.from(document.querySelectorAll(s.defaultFocusableSelectors)||[]),t=Array.from((null===(r=L.current)||void 0===r?void 0:r.querySelectorAll("button, [tabindex]"))||[]),l=e.filter((e=>-1!==Number(e.tabIndex)&&!t.includes(e))),o=l.indexOf(n)+1;null===(a=l[o])||void 0===a||a.focus()}}}),0)}},h),R={showOutsideDays:!0,mode:"single"},R=null!=R?R:{},Object.getOwnPropertyDescriptors?Object.defineProperties(B,Object.getOwnPropertyDescriptors(R)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(R)).forEach((function(e){Object.defineProperty(B,e,Object.getOwnPropertyDescriptor(R,e))})),B))]})})}):null;var B,R};g.displayName="DatePicker",exports.DatePicker=g,exports.default=g;
|
|
@@ -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
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),e=require("@floating-ui/dom");exports.default=({isOpen:i,reference:n,floating:a,strategy:o="absolute",placement:r,middleware:s,animationFrame:l})=>{const c=t.useRef(null);t.useLayoutEffect((()=>{let t;const u=n.current,p=a.current;if(u&&p&&i){const{left:i,top:n,position:a,width:f,height:
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),e=require("@floating-ui/dom");exports.default=({isOpen:i,reference:n,floating:a,strategy:o="absolute",placement:r,middleware:s,animationFrame:l})=>{const c=t.useRef(null);t.useLayoutEffect((()=>{let t;const u=n.current,p=a.current;if(u&&p&&i){const{left:i,top:n,position:a,width:f,height:d}=p.style;c.current={left:i,top:n,position:a,width:f,height:d},Object.assign(p.style,{position:o,top:0,left:0});const m=()=>{e.computePosition(u,p,{strategy:o,middleware:s,placement:r}).then((({x:t,y:e,placement:i})=>{Object.assign(p.style,{left:`${t}px`,top:`${e}px`,position:o,"z-index":1001}),p.setAttribute("data-floating-placement",i)}))};t=e.autoUpdate(u,p,m,{animationFrame:l})}return()=>{t&&p&&(t(),t=null,Object.assign(p.style,c.current),p.removeAttribute("data-floating-placement"))}}),[i,n,a,o,s,r,l])};
|