carbon-react 155.0.3 → 155.2.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/date/date.component.js +1 -1
- package/esm/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu.component.d.ts +2 -0
- package/esm/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu.component.js +1 -1
- package/lib/components/date/date.component.js +1 -1
- package/lib/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu.component.d.ts +2 -0
- package/lib/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu.component.js +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as t}from"react/jsx-runtime";import r,{useRef as n,useMemo as a,useContext as o,useState as l,useCallback as i,useEffect as u}from"react";import{isValidLocaleDate as s,checkISOFormatAndLength as c,parseISODate as p,parseDate as d,findMatchedFormatAndValue as m,isDateValid as f,additionalYears as b,formattedValue as y,getSeparator as O,formatToISO as v}from"./__internal__/utils.js";import g from"../../hooks/__internal__/useLocale/useLocale.js";import _ from"../../__internal__/utils/helpers/events/events.js";import"../../style/utils/filter-styled-system-padding-props.js";import j from"../../style/utils/filter-styled-system-margin-props.js";import k from"../../style/utils/filter-out-styled-system-spacing-props.js";import
|
|
1
|
+
import{jsxs as e,jsx as t}from"react/jsx-runtime";import r,{useRef as n,useMemo as a,useContext as o,useState as l,useCallback as i,useEffect as u}from"react";import{isValidLocaleDate as s,checkISOFormatAndLength as c,parseISODate as p,parseDate as d,findMatchedFormatAndValue as m,isDateValid as f,additionalYears as b,formattedValue as y,getSeparator as O,formatToISO as v}from"./__internal__/utils.js";import g from"../../hooks/__internal__/useLocale/useLocale.js";import _ from"../../__internal__/utils/helpers/events/events.js";import"../../style/utils/filter-styled-system-padding-props.js";import j from"../../style/utils/filter-styled-system-margin-props.js";import k from"../../style/utils/filter-out-styled-system-spacing-props.js";import h from"./__internal__/date-formats/index.js";import P from"./date.style.js";import{Textbox as w}from"../textbox/textbox.component.js";import{DatePicker as D}from"./__internal__/date-picker/date-picker.component.js";import x from"../date-range/__internal__/date-range.context.js";import L from"../../hooks/__internal__/useClickAwayListener/useClickAwayListener.js";import C from"../../__internal__/utils/helpers/guid/index.js";import B from"../../__internal__/utils/helpers/tags/tags.js";function W(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function F(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){W(e,t,r[t])}))}return e}function A(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}const S=r.forwardRef(((r,W)=>{var{adaptiveLabelBreakpoint:S,allowEmptyValue:I,autoFocus:E,"data-element":V,"data-role":K,disabled:M,disablePortal:z=!0,helpAriaLabel:R,labelInline:N,minDate:T,maxDate:q,onBlur:G,onChange:$,onClick:H,onFocus:J,onKeyDown:Q,pickerProps:U,readOnly:X,size:Y="medium",tooltipPosition:Z,value:ee,inputWidth:te,labelWidth:re,maxWidth:ne,inputName:ae,onPickerClose:oe,onPickerOpen:le,dateFormatOverride:ie,datePickerAriaLabel:ue,datePickerAriaLabelledBy:se}=r,ce=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}(r,["adaptiveLabelBreakpoint","allowEmptyValue","autoFocus","data-element","data-role","disabled","disablePortal","helpAriaLabel","labelInline","minDate","maxDate","onBlur","onChange","onClick","onFocus","onKeyDown","pickerProps","readOnly","size","tooltipPosition","value","inputWidth","labelWidth","maxWidth","inputName","onPickerClose","onPickerOpen","dateFormatOverride","datePickerAriaLabel","datePickerAriaLabelledBy"]);const pe=n(null),de=n(null),me=n(null),fe=n(!1),be=n(!1),ye=n(!1),Oe=g(),{dateFnsLocale:ve,dateFormatOverride:ge}=Oe.date,{format:_e,formats:je}=a((()=>h(ve(),ie||ge)),[ve,ge,ie]),{inputRefMap:ke,setInputRefMap:he}=o(x),[Pe,we]=l(!1),[De,xe]=l((()=>{if(s(ee,ve()))return c(ee)?p(ee):d(_e,ee)})),Le=n(!0),Ce=n(C()),Be=e=>I&&!e.length?e:null,We=e=>{const{id:t,name:r}=e.target,[n,a]=m(e.target.value,je),o="blur"===e.type?y(_e,De):e.target.value,l=f(d(n,a))?v(...b(n,a)):Be(e.target.value);return{target:A(F({},r&&{name:r},t&&{id:t}),{value:{formattedValue:o,rawValue:l}})}},Fe=L((()=>{var e,t;Pe&&(fe.current=!0,null===(e=me.current)||void 0===e||e.focus(),be.current=!1,null===(t=me.current)||void 0===t||t.blur(),we(!1),null==oe||oe(),fe.current=!1)}),"mousedown"),Ae=e=>{H&&H(e)},Se=i((e=>{var t;me.current=e,de.current=null==e?void 0:e.parentElement,W&&("function"==typeof W?W(e):W.current=e),ae&&(null==ke||null===(t=ke[ae])||void 0===t?void 0:t.setOpen)!==we&&(null==he||he({[ae]:{isBlurBlocked:be,setOpen:we}}))}),[ae,ke,he,W]);u((()=>{const[e,t]=m(ee,je);e&&t&&f(d(e,t))?xe(d(...b(e,t))):c(ee)&&Le.current?xe(p(ee)):xe(void 0)}),[ee,je]);const Ie=j(ce);return e(P,A(F(A(F({ref:pe,role:"presentation",size:Y,labelInline:N},Ie),{applyDateRangeStyling:!!ke,maxWidth:ne,inputWidth:te}),B("date",{"data-element":V,"data-role":K})),{children:[t(w,A(F({},k(ce)),{"data-component":"date-input",value:(()=>{if(c(ee)&&Le.current)return y(_e,p(ee));const e=O(ee),t=O(_e),r=()=>ee.split("").map((r=>r===e?t:r)).join("");if(Le.current&&e!==t&&f(d(_e,r()))){Le.current=!1;const[e,t]=m(r(),je);return y(_e,d(...b(e,t)))}return ee})(),onBlur:e=>{if(M||X)return;let t;if(f(De)){t=We(e);const r=c(ee)?y(_e,p(ee)):ee,[,n]=m(r,je);y(_e,De)!==n&&$(t)}else{const{id:r,name:n}=e.target;t={target:A(F({},n&&{name:n},r&&{id:r}),{value:{formattedValue:e.target.value,rawValue:Be(e.target.value)}})}}be.current||G&&G(t)},onChange:e=>{Le.current=!1,$(We(e))},onClick:Ae,onFocus:e=>{M||X||(be.current=!1,J&&J(e))},onKeyDown:e=>{if(Q&&Q(e),Pe&&_.isTabKey(e)){if(_.isShiftKey(e))we(!1),null==oe||oe();else if(!z){var t,r;e.preventDefault(),null===(r=document)||void 0===r||null===(t=r.querySelector(`[id="${Ce.current}"]`))||void 0===t||t.focus()}fe.current=!1}},iconOnClick:Ae,onMouseDown:()=>{Fe(),he&&(be.current=!0),Pe||null==le||le()},iconOnMouseDown:()=>{be.current=!0,fe.current=!0,Fe(),Pe?(we(!1),null==oe||oe()):(we(!0),null==le||le())},inputIcon:"calendar",labelInline:N,ref:Se,adaptiveLabelBreakpoint:S,tooltipPosition:Z,helpAriaLabel:R,autoFocus:E,size:Y,disabled:M,readOnly:X,inputWidth:te,labelWidth:re,maxWidth:ne,m:0})),t(D,{disablePortal:z,inputElement:de,pickerProps:U,selectedDays:De,onDayClick:(e,t)=>{var r;xe(e),$(We(A(F({},t),{target:A(F({},t.target),{value:y(_e,e)})}))),ye.current=!0,null===(r=me.current)||void 0===r||r.focus(),we(!1)},minDate:T,maxDate:q,pickerMouseDown:()=>{be.current=!0,Fe()},open:Pe,setOpen:we,pickerTabGuardId:Ce.current,onPickerClose:oe,ariaLabel:ue,ariaLabelledBy:se})]}))}));export{S as DateInput,S as default};
|
|
@@ -9,6 +9,8 @@ export interface ResponsiveVerticalMenuProps extends TagProps {
|
|
|
9
9
|
responsiveBreakpoint?: number;
|
|
10
10
|
/** The width of the primary and secondary menus when in default mode */
|
|
11
11
|
width?: string;
|
|
12
|
+
/** Set Menu launcher button data tag props */
|
|
13
|
+
launcherButtonDataProps?: TagProps;
|
|
12
14
|
}
|
|
13
15
|
export declare const ResponsiveVerticalMenu: ({ children, ...props }: ResponsiveVerticalMenuProps) => React.JSX.Element;
|
|
14
16
|
export default ResponsiveVerticalMenu;
|
package/esm/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu.component.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,jsxs as r,Fragment as n}from"react/jsx-runtime";import t,{useState as o,useRef as i,useCallback as c,useLayoutEffect as s,useEffect as l}from"react";import{useResponsiveVerticalMenu as a}from"./responsive-vertical-menu.context.js";import{StyledButton as u,StyledCloseButton as d,StyledResponsiveMenu as p,StyledGlobalVerticalMenuWrapper as m}from"./responsive-vertical-menu.style.js";import{Box as v}from"../../box/box.component.js";import f from"../../modal/modal.component.js";import h from"../../../hooks/__internal__/useIsAboveBreakpoint/useIsAboveBreakpoint.js";import y from"../../../hooks/useMediaQuery/useMediaQuery.js";import b from"../../../__internal__/utils/helpers/tags/tags.js";import{DepthProvider as w}from"./__internal__/depth.context.js";import{MenuFocusProvider as g}from"./__internal__/focus.context.js";import O from"../../../hooks/__internal__/useLocale/useLocale.js";function j(e,r,n){return r in e?Object.defineProperty(e,r,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[r]=n,e}function x(e){for(var r=1;r<arguments.length;r++){var n=null!=arguments[r]?arguments[r]:{},t=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(t=t.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),t.forEach((function(r){j(e,r,n[r])}))}return e}function _(e,r){return r=null!=r?r:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r.push.apply(r,n)}return r}(Object(r)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(r,n))})),e}function k(e,r){if(null==e)return{};var n,t,o=function(e,r){if(null==e)return{};var n,t,o={},i=Object.keys(e);for(t=0;t<i.length;t++)n=i[t],r.indexOf(n)>=0||(o[n]=e[n]);return o}(e,r);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(t=0;t<i.length;t++)n=i[t],r.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}const E=w=>{var g,j,{children:E,height:L,responsiveBreakpoint:
|
|
1
|
+
import{jsx as e,jsxs as r,Fragment as n}from"react/jsx-runtime";import t,{useState as o,useRef as i,useCallback as c,useLayoutEffect as s,useEffect as l}from"react";import{useResponsiveVerticalMenu as a}from"./responsive-vertical-menu.context.js";import{StyledButton as u,StyledCloseButton as d,StyledResponsiveMenu as p,StyledGlobalVerticalMenuWrapper as m}from"./responsive-vertical-menu.style.js";import{Box as v}from"../../box/box.component.js";import f from"../../modal/modal.component.js";import h from"../../../hooks/__internal__/useIsAboveBreakpoint/useIsAboveBreakpoint.js";import y from"../../../hooks/useMediaQuery/useMediaQuery.js";import b from"../../../__internal__/utils/helpers/tags/tags.js";import{DepthProvider as w}from"./__internal__/depth.context.js";import{MenuFocusProvider as g}from"./__internal__/focus.context.js";import O from"../../../hooks/__internal__/useLocale/useLocale.js";function j(e,r,n){return r in e?Object.defineProperty(e,r,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[r]=n,e}function x(e){for(var r=1;r<arguments.length;r++){var n=null!=arguments[r]?arguments[r]:{},t=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(t=t.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),t.forEach((function(r){j(e,r,n[r])}))}return e}function _(e,r){return r=null!=r?r:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r.push.apply(r,n)}return r}(Object(r)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(r,n))})),e}function k(e,r){if(null==e)return{};var n,t,o=function(e,r){if(null==e)return{};var n,t,o={},i=Object.keys(e);for(t=0;t<i.length;t++)n=i[t],r.indexOf(n)>=0||(o[n]=e[n]);return o}(e,r);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(t=0;t<i.length;t++)n=i[t],r.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}const E=w=>{var g,j,{children:E,height:L,responsiveBreakpoint:P=700,width:M,launcherButtonDataProps:B}=w,C=k(w,["children","height","responsiveBreakpoint","width","launcherButtonDataProps"]);const T=O(),{activeMenuItem:I,buttonRef:R,containerRef:S,menuRef:D,responsiveMode:z,setActiveMenuItem:A,setReducedMotion:$,setResponsiveMode:q}=a(),[Q,V]=o(!1),[G,F]=o(0),H=h(P),[J,K]=o("auto"),[N,U]=o("100%"),[W,X]=o("auto"),Y=i(null),Z=!y("screen and (prefers-reduced-motion: no-preference)"),{current:ee}=D,{current:re}=R,ne=c((()=>{if(Q&&z){const e=ee||document.querySelector("[id='responsive-vertical-menu-primary']");e&&U(`${e.getBoundingClientRect().width}px`)}K(I&&ee?`${ee.getBoundingClientRect().right}px`:"auto"),X(I&&re?`${re.getBoundingClientRect().bottom}px`:"auto")}),[Q,ee,z,I,re]),te=c((e=>{S.current&&!S.current.contains(e.target)&&V(!1)}),[S]),oe=c((()=>{V((e=>!e)),A(null)}),[A]);s((()=>(ne(),window.addEventListener("resize",ne),()=>{var e;null===(e=window)||void 0===e||e.removeEventListener("resize",ne)})),[Q,ne,ee,z]);const ie=i(!1),ce=i(null);l((()=>{const e=()=>{ie.current=!0,null!==ce.current&&clearTimeout(ce.current),ce.current=window.setTimeout((()=>{ie.current=!1}),100)};return window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e),null!==ce.current&&clearTimeout(ce.current)}}),[]),l((()=>{const e=({relatedTarget:e,target:r})=>{S.current&&(S.current.contains(e)||null===e&&r!==R.current&&setTimeout((()=>{I||ie.current||V(!1)}),10))},r=e=>{"Escape"===e.key&&(e.preventDefault(),V(!1))},n=S.current;return Q&&!z&&(document.addEventListener("keydown",r),window.addEventListener("click",te),null==n||n.addEventListener("focusout",e)),()=>{document.removeEventListener("keydown",r),window.removeEventListener("click",te),null==n||n.removeEventListener("focusout",e)}}),[Q,I,R,S,te,z]),l((()=>{null==$||$(Z),null==q||q(!H)}),[H,Z,$,q]);const se=c((e=>{if(!e)return 0;if(t.isValidElement(e))return 1+se(e.props.children);const r=t.Children.toArray(e);return r.length?r.reduce(((e,r)=>t.isValidElement(r)?e+1+se(r.props.children):e),0):0}),[]);return l((()=>{const e=G,r=se(E);e!==r&&(F(r),A(null))}),[G,E,se,A]),r("div",{ref:S,children:[e(u,x({active:Q,"aria-controls":"responsive-vertical-menu-primary","aria-expanded":Q,"aria-label":null===(g=T.verticalMenu.ariaLabels)||void 0===g?void 0:g.responsiveMenuLauncher(),buttonType:"tertiary",iconType:"squares_nine",id:"responsive-vertical-menu-launcher",onClick:oe,ref:R},b("responsive-vertical-menu-launcher",x({"data-role":"responsive-vertical-menu-launcher"},B)))),z?e(f,{open:Q,children:r(v,{position:"fixed",top:0,width:N,children:[e(v,{boxSizing:"border-box",display:"flex",justifyContent:"flex-end",width:"100%",backgroundColor:"var(--colorsGray850)",p:1,children:e(d,{"aria-label":null===(j=T.verticalMenu.ariaLabels)||void 0===j?void 0:j.responsiveMenuCloseButton(),"data-component":"responsive-vertical-menu-close","data-role":"responsive-vertical-menu-close",iconType:"close",size:"small",buttonType:"tertiary",onClick:()=>{V(!1),A(null)}})}),e(p,{height:L,id:"responsive-vertical-menu-primary",menu:"primary",reduceMotion:Z,ref:D,responsive:!0,tabIndex:-1,top:"48px",width:M,children:E})]})}):e(m,_(x({},C,b("responsive-vertical-menu",C)),{children:Q&&r(n,{children:[e(p,{childOpen:!!I,"data-component":"responsive-vertical-menu-primary","data-role":"responsive-vertical-menu-primary",height:L||"100%",id:"responsive-vertical-menu-primary",menu:"primary",reduceMotion:Z,ref:D,responsive:!1,tabIndex:-1,top:W,width:M,children:E}),I?e(p,{"data-component":"responsive-vertical-menu-secondary","data-role":"responsive-vertical-menu-secondary",height:L||"100%",id:"responsive-vertical-menu-secondary",left:J,menu:"secondary",reduceMotion:Z,ref:Y,responsive:!1,tabIndex:-1,top:W,width:M,children:I.children}):null]})}))]})},L=r=>{var{children:n}=r,t=k(r,["children"]);return e(w,{children:e(g,{children:e(E,_(x({},t),{children:n}))})})};export{L as ResponsiveVerticalMenu,L as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("./__internal__/utils.js"),a=require("../../hooks/__internal__/useLocale/useLocale.js"),n=require("../../__internal__/utils/helpers/events/events.js");require("../../style/utils/filter-styled-system-padding-props.js");var l=require("../../style/utils/filter-styled-system-margin-props.js"),i=require("../../style/utils/filter-out-styled-system-spacing-props.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("./__internal__/utils.js"),a=require("../../hooks/__internal__/useLocale/useLocale.js"),n=require("../../__internal__/utils/helpers/events/events.js");require("../../style/utils/filter-styled-system-padding-props.js");var l=require("../../style/utils/filter-styled-system-margin-props.js"),i=require("../../style/utils/filter-out-styled-system-spacing-props.js"),o=require("./__internal__/date-formats/index.js"),u=require("./date.style.js"),s=require("../textbox/textbox.component.js"),d=require("./__internal__/date-picker/date-picker.component.js"),c=require("../date-range/__internal__/date-range.context.js"),p=require("../../hooks/__internal__/useClickAwayListener/useClickAwayListener.js"),f=require("../../__internal__/utils/helpers/guid/index.js"),m=require("../../__internal__/utils/helpers/tags/tags.js");function b(e){return e&&e.__esModule?e:{default:e}}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 O(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}function g(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}const v=b(t).default.forwardRef(((b,y)=>{var{adaptiveLabelBreakpoint:v,allowEmptyValue:h,autoFocus:_,"data-element":j,"data-role":k,disabled:D,disablePortal:P=!0,helpAriaLabel:x,labelInline:w,minDate:L,maxDate:S,onBlur:V,onChange:F,onClick:I,onFocus:q,onKeyDown:A,pickerProps:C,readOnly:M,size:R="medium",tooltipPosition:B,value:W,inputWidth:E,labelWidth:K,maxWidth:z,inputName:T,onPickerClose:Y,onPickerOpen:N,dateFormatOverride:G,datePickerAriaLabel:$,datePickerAriaLabelledBy:H}=b,J=function(e,t){if(null==e)return{};var r,a,n=function(e,t){if(null==e)return{};var r,a,n={},l=Object.keys(e);for(a=0;a<l.length;a++)r=l[a],t.indexOf(r)>=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(a=0;a<l.length;a++)r=l[a],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}(b,["adaptiveLabelBreakpoint","allowEmptyValue","autoFocus","data-element","data-role","disabled","disablePortal","helpAriaLabel","labelInline","minDate","maxDate","onBlur","onChange","onClick","onFocus","onKeyDown","pickerProps","readOnly","size","tooltipPosition","value","inputWidth","labelWidth","maxWidth","inputName","onPickerClose","onPickerOpen","dateFormatOverride","datePickerAriaLabel","datePickerAriaLabelledBy"]);const Q=t.useRef(null),U=t.useRef(null),X=t.useRef(null),Z=t.useRef(!1),ee=t.useRef(!1),te=t.useRef(!1),re=a.default(),{dateFnsLocale:ae,dateFormatOverride:ne}=re.date,{format:le,formats:ie}=t.useMemo((()=>o.default(ae(),G||ne)),[ae,ne,G]),{inputRefMap:oe,setInputRefMap:ue}=t.useContext(c.default),[se,de]=t.useState(!1),[ce,pe]=t.useState((()=>{if(r.isValidLocaleDate(W,ae()))return r.checkISOFormatAndLength(W)?r.parseISODate(W):r.parseDate(le,W)})),fe=t.useRef(!0),me=t.useRef(f.default()),be=e=>h&&!e.length?e:null,ye=e=>{const{id:t,name:a}=e.target,[n,l]=r.findMatchedFormatAndValue(e.target.value,ie),i="blur"===e.type?r.formattedValue(le,ce):e.target.value,o=r.isDateValid(r.parseDate(n,l))?r.formatToISO(...r.additionalYears(n,l)):be(e.target.value);return{target:g(O({},a&&{name:a},t&&{id:t}),{value:{formattedValue:i,rawValue:o}})}},Oe=p.default((()=>{var e,t;se&&(Z.current=!0,null===(e=X.current)||void 0===e||e.focus(),ee.current=!1,null===(t=X.current)||void 0===t||t.blur(),de(!1),null==Y||Y(),Z.current=!1)}),"mousedown"),ge=e=>{I&&I(e)},ve=t.useCallback((e=>{var t;X.current=e,U.current=null==e?void 0:e.parentElement,y&&("function"==typeof y?y(e):y.current=e),T&&(null==oe||null===(t=oe[T])||void 0===t?void 0:t.setOpen)!==de&&(null==ue||ue({[T]:{isBlurBlocked:ee,setOpen:de}}))}),[T,oe,ue,y]);t.useEffect((()=>{const[e,t]=r.findMatchedFormatAndValue(W,ie);e&&t&&r.isDateValid(r.parseDate(e,t))?pe(r.parseDate(...r.additionalYears(e,t))):r.checkISOFormatAndLength(W)&&fe.current?pe(r.parseISODate(W)):pe(void 0)}),[W,ie]);const he=l.default(J);return e.jsxs(u.default,g(O(g(O({ref:Q,role:"presentation",size:R,labelInline:w},he),{applyDateRangeStyling:!!oe,maxWidth:z,inputWidth:E}),m.default("date",{"data-element":j,"data-role":k})),{children:[e.jsx(s.Textbox,g(O({},i.default(J)),{"data-component":"date-input",value:(()=>{if(r.checkISOFormatAndLength(W)&&fe.current)return r.formattedValue(le,r.parseISODate(W));const e=r.getSeparator(W),t=r.getSeparator(le),a=()=>W.split("").map((r=>r===e?t:r)).join("");if(fe.current&&e!==t&&r.isDateValid(r.parseDate(le,a()))){fe.current=!1;const[e,t]=r.findMatchedFormatAndValue(a(),ie);return r.formattedValue(le,r.parseDate(...r.additionalYears(e,t)))}return W})(),onBlur:e=>{if(D||M)return;let t;if(r.isDateValid(ce)){t=ye(e);const a=r.checkISOFormatAndLength(W)?r.formattedValue(le,r.parseISODate(W)):W,[,n]=r.findMatchedFormatAndValue(a,ie);r.formattedValue(le,ce)!==n&&F(t)}else{const{id:r,name:a}=e.target;t={target:g(O({},a&&{name:a},r&&{id:r}),{value:{formattedValue:e.target.value,rawValue:be(e.target.value)}})}}ee.current||V&&V(t)},onChange:e=>{fe.current=!1,F(ye(e))},onClick:ge,onFocus:e=>{D||M||(ee.current=!1,q&&q(e))},onKeyDown:e=>{if(A&&A(e),se&&n.default.isTabKey(e)){if(n.default.isShiftKey(e))de(!1),null==Y||Y();else if(!P){var t,r;e.preventDefault(),null===(r=document)||void 0===r||null===(t=r.querySelector(`[id="${me.current}"]`))||void 0===t||t.focus()}Z.current=!1}},iconOnClick:ge,onMouseDown:()=>{Oe(),ue&&(ee.current=!0),se||null==N||N()},iconOnMouseDown:()=>{ee.current=!0,Z.current=!0,Oe(),se?(de(!1),null==Y||Y()):(de(!0),null==N||N())},inputIcon:"calendar",labelInline:w,ref:ve,adaptiveLabelBreakpoint:v,tooltipPosition:B,helpAriaLabel:x,autoFocus:_,size:R,disabled:D,readOnly:M,inputWidth:E,labelWidth:K,maxWidth:z,m:0})),e.jsx(d.DatePicker,{disablePortal:P,inputElement:U,pickerProps:C,selectedDays:ce,onDayClick:(e,t)=>{var a;pe(e),F(ye(g(O({},t),{target:g(O({},t.target),{value:r.formattedValue(le,e)})}))),te.current=!0,null===(a=X.current)||void 0===a||a.focus(),de(!1)},minDate:L,maxDate:S,pickerMouseDown:()=>{ee.current=!0,Oe()},open:se,setOpen:de,pickerTabGuardId:me.current,onPickerClose:Y,ariaLabel:$,ariaLabelledBy:H})]}))}));exports.DateInput=v,exports.default=v;
|
|
@@ -9,6 +9,8 @@ export interface ResponsiveVerticalMenuProps extends TagProps {
|
|
|
9
9
|
responsiveBreakpoint?: number;
|
|
10
10
|
/** The width of the primary and secondary menus when in default mode */
|
|
11
11
|
width?: string;
|
|
12
|
+
/** Set Menu launcher button data tag props */
|
|
13
|
+
launcherButtonDataProps?: TagProps;
|
|
12
14
|
}
|
|
13
15
|
export declare const ResponsiveVerticalMenu: ({ children, ...props }: ResponsiveVerticalMenuProps) => React.JSX.Element;
|
|
14
16
|
export default ResponsiveVerticalMenu;
|
package/lib/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu.component.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("./responsive-vertical-menu.context.js"),n=require("./responsive-vertical-menu.style.js"),i=require("../../box/box.component.js"),o=require("../../modal/modal.component.js"),s=require("../../../hooks/__internal__/useIsAboveBreakpoint/useIsAboveBreakpoint.js"),u=require("../../../hooks/useMediaQuery/useMediaQuery.js"),l=require("../../../__internal__/utils/helpers/tags/tags.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("./responsive-vertical-menu.context.js"),n=require("./responsive-vertical-menu.style.js"),i=require("../../box/box.component.js"),o=require("../../modal/modal.component.js"),s=require("../../../hooks/__internal__/useIsAboveBreakpoint/useIsAboveBreakpoint.js"),u=require("../../../hooks/useMediaQuery/useMediaQuery.js"),l=require("../../../__internal__/utils/helpers/tags/tags.js"),a=require("./__internal__/depth.context.js"),c=require("./__internal__/focus.context.js"),d=require("../../../hooks/__internal__/useLocale/useLocale.js");function p(e){return e&&e.__esModule?e:{default:e}}var v=p(r);function f(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function m(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},n=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),n.forEach((function(r){f(e,r,t[r])}))}return e}function y(e,r){return r=null!=r?r:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})),e}function h(e,r){if(null==e)return{};var t,n,i=function(e,r){if(null==e)return{};var t,n,i={},o=Object.keys(e);for(n=0;n<o.length;n++)t=o[n],r.indexOf(t)>=0||(i[t]=e[t]);return i}(e,r);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)t=o[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(i[t]=e[t])}return i}const b=a=>{var c,p,{children:f,height:b,responsiveBreakpoint:j=700,width:x,launcherButtonDataProps:g}=a,w=h(a,["children","height","responsiveBreakpoint","width","launcherButtonDataProps"]);const O=d.default(),{activeMenuItem:_,buttonRef:M,containerRef:k,menuRef:E,responsiveMode:S,setActiveMenuItem:P,setReducedMotion:L,setResponsiveMode:R}=t.useResponsiveVerticalMenu(),[q,B]=r.useState(!1),[C,T]=r.useState(0),D=s.default(j),[I,z]=r.useState("auto"),[V,A]=r.useState("100%"),[$,F]=r.useState("auto"),G=r.useRef(null),Q=!u.default("screen and (prefers-reduced-motion: no-preference)"),{current:W}=E,{current:H}=M,J=r.useCallback((()=>{if(q&&S){const e=W||document.querySelector("[id='responsive-vertical-menu-primary']");e&&A(`${e.getBoundingClientRect().width}px`)}z(_&&W?`${W.getBoundingClientRect().right}px`:"auto"),F(_&&H?`${H.getBoundingClientRect().bottom}px`:"auto")}),[q,W,S,_,H]),K=r.useCallback((e=>{k.current&&!k.current.contains(e.target)&&B(!1)}),[k]),N=r.useCallback((()=>{B((e=>!e)),P(null)}),[P]);r.useLayoutEffect((()=>(J(),window.addEventListener("resize",J),()=>{var e;null===(e=window)||void 0===e||e.removeEventListener("resize",J)})),[q,J,W,S]);const U=r.useRef(!1),X=r.useRef(null);r.useEffect((()=>{const e=()=>{U.current=!0,null!==X.current&&clearTimeout(X.current),X.current=window.setTimeout((()=>{U.current=!1}),100)};return window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e),null!==X.current&&clearTimeout(X.current)}}),[]),r.useEffect((()=>{const e=({relatedTarget:e,target:r})=>{k.current&&(k.current.contains(e)||null===e&&r!==M.current&&setTimeout((()=>{_||U.current||B(!1)}),10))},r=e=>{"Escape"===e.key&&(e.preventDefault(),B(!1))},t=k.current;return q&&!S&&(document.addEventListener("keydown",r),window.addEventListener("click",K),null==t||t.addEventListener("focusout",e)),()=>{document.removeEventListener("keydown",r),window.removeEventListener("click",K),null==t||t.removeEventListener("focusout",e)}}),[q,_,M,k,K,S]),r.useEffect((()=>{null==L||L(Q),null==R||R(!D)}),[D,Q,L,R]);const Y=r.useCallback((e=>{if(!e)return 0;if(v.default.isValidElement(e))return 1+Y(e.props.children);const r=v.default.Children.toArray(e);return r.length?r.reduce(((e,r)=>v.default.isValidElement(r)?e+1+Y(r.props.children):e),0):0}),[]);return r.useEffect((()=>{const e=C,r=Y(f);e!==r&&(T(r),P(null))}),[C,f,Y,P]),e.jsxs("div",{ref:k,children:[e.jsx(n.StyledButton,m({active:q,"aria-controls":"responsive-vertical-menu-primary","aria-expanded":q,"aria-label":null===(c=O.verticalMenu.ariaLabels)||void 0===c?void 0:c.responsiveMenuLauncher(),buttonType:"tertiary",iconType:"squares_nine",id:"responsive-vertical-menu-launcher",onClick:N,ref:M},l.default("responsive-vertical-menu-launcher",m({"data-role":"responsive-vertical-menu-launcher"},g)))),S?e.jsx(o.default,{open:q,children:e.jsxs(i.Box,{position:"fixed",top:0,width:V,children:[e.jsx(i.Box,{boxSizing:"border-box",display:"flex",justifyContent:"flex-end",width:"100%",backgroundColor:"var(--colorsGray850)",p:1,children:e.jsx(n.StyledCloseButton,{"aria-label":null===(p=O.verticalMenu.ariaLabels)||void 0===p?void 0:p.responsiveMenuCloseButton(),"data-component":"responsive-vertical-menu-close","data-role":"responsive-vertical-menu-close",iconType:"close",size:"small",buttonType:"tertiary",onClick:()=>{B(!1),P(null)}})}),e.jsx(n.StyledResponsiveMenu,{height:b,id:"responsive-vertical-menu-primary",menu:"primary",reduceMotion:Q,ref:E,responsive:!0,tabIndex:-1,top:"48px",width:x,children:f})]})}):e.jsx(n.StyledGlobalVerticalMenuWrapper,y(m({},w,l.default("responsive-vertical-menu",w)),{children:q&&e.jsxs(e.Fragment,{children:[e.jsx(n.StyledResponsiveMenu,{childOpen:!!_,"data-component":"responsive-vertical-menu-primary","data-role":"responsive-vertical-menu-primary",height:b||"100%",id:"responsive-vertical-menu-primary",menu:"primary",reduceMotion:Q,ref:E,responsive:!1,tabIndex:-1,top:$,width:x,children:f}),_?e.jsx(n.StyledResponsiveMenu,{"data-component":"responsive-vertical-menu-secondary","data-role":"responsive-vertical-menu-secondary",height:b||"100%",id:"responsive-vertical-menu-secondary",left:I,menu:"secondary",reduceMotion:Q,ref:G,responsive:!1,tabIndex:-1,top:$,width:x,children:_.children}):null]})}))]})},j=r=>{var{children:t}=r,n=h(r,["children"]);return e.jsx(a.DepthProvider,{children:e.jsx(c.MenuFocusProvider,{children:e.jsx(b,y(m({},n),{children:t}))})})};exports.ResponsiveVerticalMenu=j,exports.default=j;
|