carbon-react 154.11.0 → 154.11.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/__internal__/checkable-input/checkable-input.component.d.ts +2 -0
- package/esm/__internal__/checkable-input/checkable-input.component.js +1 -1
- package/esm/__internal__/checkable-input/checkable-input.style.d.ts +1 -0
- package/esm/__internal__/checkable-input/checkable-input.style.js +1 -1
- package/esm/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu.component.js +1 -1
- package/lib/__internal__/checkable-input/checkable-input.component.d.ts +2 -0
- package/lib/__internal__/checkable-input/checkable-input.component.js +1 -1
- package/lib/__internal__/checkable-input/checkable-input.style.d.ts +1 -0
- package/lib/__internal__/checkable-input/checkable-input.style.js +1 -1
- package/lib/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu.component.js +1 -1
- package/package.json +1 -1
|
@@ -50,6 +50,8 @@ export interface CheckableInputProps extends CommonCheckableInputProps {
|
|
|
50
50
|
value?: string;
|
|
51
51
|
/** When true label is inline */
|
|
52
52
|
labelInline?: boolean;
|
|
53
|
+
/** Whether this component resides on a dark background */
|
|
54
|
+
isDarkBackground?: boolean;
|
|
53
55
|
}
|
|
54
56
|
declare const CheckableInput: React.ForwardRefExoticComponent<CheckableInputProps & React.RefAttributes<HTMLInputElement>>;
|
|
55
57
|
export default CheckableInput;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,jsxs as r}from"react/jsx-runtime";import
|
|
1
|
+
import{jsx as e,jsxs as r}from"react/jsx-runtime";import n,{useRef as l}from"react";import{StyledCheckableInputWrapper as i,StyledCheckableInput as t}from"./checkable-input.style.js";import{InputBehaviour as a}from"../input-behaviour/input-behaviour.component.js";import o from"../form-field/form-field.component.js";import c from"./hidden-checkable-input.component.js";import d from"../utils/helpers/guid/index.js";import p from"../../hooks/__internal__/useInputAccessibility/useInputAccessibility.js";function u(e,r,n){return r in e?Object.defineProperty(e,r,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[r]=n,e}function b(e){for(var r=1;r<arguments.length;r++){var n=null!=arguments[r]?arguments[r]:{},l=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(l=l.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),l.forEach((function(r){u(e,r,n[r])}))}return e}const s=n.forwardRef(((n,u)=>{var{ariaLabelledBy:s,autoFocus:f,checked:y,children:m,disabled:O,loading:h,error:g,fieldHelp:j,fieldHelpInline:v,info:I,id:k,type:w,value:H,inputWidth:P,label:B,labelHelp:D,labelInline:S=!0,labelSpacing:F=1,labelWidth:W,name:x,onBlur:q,onChange:C,onFocus:L,required:_,isOptional:E,reverse:A=!1,validationOnLabel:R,warning:N,isDarkBackground:V=!1}=n,z=function(e,r){if(null==e)return{};var n,l,i=function(e,r){if(null==e)return{};var n,l,i={},t=Object.keys(e);for(l=0;l<t.length;l++)n=t[l],r.indexOf(n)>=0||(i[n]=e[n]);return i}(e,r);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);for(l=0;l<t.length;l++)n=t[l],r.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}(n,["ariaLabelledBy","autoFocus","checked","children","disabled","loading","error","fieldHelp","fieldHelpInline","info","id","type","value","inputWidth","label","labelHelp","labelInline","labelSpacing","labelWidth","name","onBlur","onChange","onFocus","required","isOptional","reverse","validationOnLabel","warning","isDarkBackground"]);const{current:G}=l(k||d()),{labelId:J,fieldHelpId:K,validationId:M,ariaDescribedBy:Q}=p({id:G,error:g,warning:N,info:I,label:B,fieldHelp:j}),T={disabled:O,loading:h,error:g,fieldHelp:j,fieldHelpInline:v,fieldHelpId:K,id:G,info:I,label:B,labelHelp:D,labelHelpIcon:"info",labelId:J,labelInline:S,labelSpacing:F,reverse:A,warning:N,validationIconId:M,isRequired:_,isOptional:E,useValidationIcon:R},U=b({ariaDescribedBy:Q,"aria-labelledby":s,"aria-invalid":!!g,autoFocus:f,checked:y,disabled:O,id:G,type:w,value:H,name:x,onBlur:q,onChange:C,onFocus:L,required:_,ref:u,validationIconId:M},z);return e(i,{disabled:O,fieldHelpInline:v,inputWidth:P,labelWidth:W,labelInline:S,reverse:A,isDarkBackground:V,children:e(a,{children:e(o,(X=b({},T),Y={my:0,children:r(t,{"data-role":"checkable-input",children:[e(c,b({},U)),m]})},Y=null!=Y?Y:{},Object.getOwnPropertyDescriptors?Object.defineProperties(X,Object.getOwnPropertyDescriptors(Y)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r.push.apply(r,n)}return r}(Object(Y)).forEach((function(e){Object.defineProperty(X,e,Object.getOwnPropertyDescriptor(Y,e))})),X))})});var X,Y}));s.displayName="CheckableInput";export{s as default};
|
|
@@ -6,6 +6,7 @@ export interface StyledCheckableInputWrapperProps {
|
|
|
6
6
|
labelWidth?: number;
|
|
7
7
|
labelInline?: boolean;
|
|
8
8
|
reverse?: boolean;
|
|
9
|
+
isDarkBackground?: boolean;
|
|
9
10
|
}
|
|
10
11
|
declare const StyledCheckableInputWrapper: import("styled-components").StyledComponent<"div", any, StyledCheckableInputWrapperProps, never>;
|
|
11
12
|
export { StyledCheckableInput, StyledCheckableInputWrapper };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import e,{css as i}from"styled-components";import
|
|
1
|
+
import e,{css as i}from"styled-components";import l from"../field-help/field-help.style.js";import{FieldLineStyle as t}from"../form-field/form-field.style.js";import o,{StyledLabelContainer as n}from"../label/label.style.js";import r from"../validations/validation-icon.style.js";import a from"../../components/help/help.style.js";import d from"./hidden-checkable-input.style.js";const s=e.div.withConfig({displayName:"checkable-input.style__StyledCheckableInput",componentId:"sc-9944fee6-0"})(["display:inline-block;position:relative;"]),p=e.div.withConfig({displayName:"checkable-input.style__StyledCheckableInputWrapper",componentId:"sc-9944fee6-1"})(["",""],(({disabled:e,fieldHelpInline:p,inputWidth:f,labelWidth:m,labelInline:c,reverse:h,isDarkBackground:y})=>i(["width:100% !important;","{display:flex;}","{"," padding-top:0;width:auto;& ",",& ","{color:var(--colorsUtilityYin065);vertical-align:middle;&:hover,&:focus{color:var(--colorsUtilityYin090);}}}","{"," flex-basis:100%;}"," "," "," "," ",""],t,n,c&&i(["justify-content:",";"],h?"flex-start":"flex-end"),a,r,l,y&&i(["color:var(--colorsUtilityYang080);"]),e&&i(["",",","{&:hover,&:focus{outline:none;cursor:not-allowed;}}"],d,o),p&&i(["","{flex-wrap:nowrap;}","{margin-right:0;margin-left:8px;}","{flex-grow:0;flex-basis:auto;padding-left:0;width:auto;}"],t,s,l),h&&p&&i(["","{margin-left:0;}","{flex-grow:1;}"],s,l),void 0!==f&&0!==f&&i(["","{width:","% !important;min-width:67px;}"],s,f),void 0!==m&&0!==m&&`\n ${n} {\n width: ${m}% !important;\n }\n `)));export{s as StyledCheckableInput,p as StyledCheckableInputWrapper};
|
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 p,StyledResponsiveMenu as d,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 g}from"./__internal__/depth.context.js";import{MenuFocusProvider as O}from"./__internal__/focus.context.js";import j from"../../../hooks/__internal__/useLocale/useLocale.js";function w(e,r,n){return r in e?Object.defineProperty(e,r,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[r]=n,e}function _(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){w(e,r,n[r])}))}return e}function x(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
|
|
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 p,StyledResponsiveMenu as d,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 g}from"./__internal__/depth.context.js";import{MenuFocusProvider as O}from"./__internal__/focus.context.js";import j from"../../../hooks/__internal__/useLocale/useLocale.js";function w(e,r,n){return r in e?Object.defineProperty(e,r,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[r]=n,e}function _(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){w(e,r,n[r])}))}return e}function x(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=g=>{var O,w,{children:E,height:M,responsiveBreakpoint:L=700,width:P}=g,C=k(g,["children","height","responsiveBreakpoint","width"]);const B=j(),{activeMenuItem:I,buttonRef:R,containerRef:S,menuRef:D,responsiveMode:T,setActiveMenuItem:A,setReducedMotion:z,setResponsiveMode:q}=a(),[Q,V]=o(!1),[$,G]=o(0),F=h(L),[H,J]=o("auto"),[K,N]=o("100%"),[U,W]=o("auto"),X=i(null),Y=!y("screen and (prefers-reduced-motion: no-preference)"),{current:Z}=D,{current:ee}=R,re=c((()=>{if(Q&&T){const e=Z||document.querySelector("[id='responsive-vertical-menu-primary']");e&&N(e.getBoundingClientRect().width-16+"px")}J(I&&Z?`${Z.getBoundingClientRect().right}px`:"auto"),W(I&&ee?`${ee.getBoundingClientRect().bottom}px`:"auto")}),[Q,Z,T,I,ee]),ne=c((e=>{S.current&&!S.current.contains(e.target)&&V(!1)}),[S]),te=c((()=>{V((e=>!e)),A(null)}),[A]);s((()=>(re(),window.addEventListener("resize",re),()=>{var e;null===(e=window)||void 0===e||e.removeEventListener("resize",re)})),[Q,re,Z,T]),l((()=>{const e=()=>{setTimeout((()=>{S.current&&!S.current.contains(document.activeElement)&&V(!1)}),0)},r=e=>{"Escape"===e.key&&(e.preventDefault(),V(!1))},n=S.current;return Q&&!T&&(document.addEventListener("keydown",r),window.addEventListener("click",ne),null==n||n.addEventListener("focusout",e)),()=>{document.removeEventListener("keydown",r),window.removeEventListener("click",ne),null==n||n.removeEventListener("focusout",e)}}),[Q,S,ne,T]),l((()=>{null==z||z(Y),null==q||q(!F)}),[F,Y,z,q]);const oe=c((e=>{if(!e)return 0;if(t.isValidElement(e))return 1+oe(e.props.children);const r=t.Children.toArray(e);return r.length?r.reduce(((e,r)=>t.isValidElement(r)?e+1+oe(r.props.children):e),0):0}),[]);return l((()=>{const e=$,r=oe(E);e!==r&&(G(r),A(null))}),[$,E,oe,A]),r("div",{ref:S,children:[e(u,{active:Q,"aria-controls":"responsive-vertical-menu-primary","aria-expanded":Q,"aria-label":null===(O=B.verticalMenu.ariaLabels)||void 0===O?void 0:O.responsiveMenuLauncher(),buttonType:"tertiary","data-component":"responsive-vertical-menu-launcher","data-role":"responsive-vertical-menu-launcher",iconType:"squares_nine",id:"responsive-vertical-menu-launcher",onClick:te,ref:R}),T?e(f,{open:Q,children:r(v,{position:"fixed",top:0,width:K,children:[e(v,{display:"flex",justifyContent:"flex-end",width:"100%",backgroundColor:"var(--colorsGray850)",p:1,children:e(p,{"aria-label":null===(w=B.verticalMenu.ariaLabels)||void 0===w?void 0:w.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(d,{height:M,id:"responsive-vertical-menu-primary",menu:"primary",reduceMotion:Y,ref:D,responsive:!0,tabIndex:-1,top:"48px",width:P,children:E})]})}):e(m,x(_({},C,b("responsive-vertical-menu",C)),{children:Q&&r(n,{children:[e(d,{childOpen:!!I,"data-component":"responsive-vertical-menu-primary","data-role":"responsive-vertical-menu-primary",height:M||"100%",id:"responsive-vertical-menu-primary",menu:"primary",reduceMotion:Y,ref:D,responsive:!1,tabIndex:-1,top:U,width:P,children:E}),I?e(d,{"data-component":"responsive-vertical-menu-secondary","data-role":"responsive-vertical-menu-secondary",height:M||"100%",id:"responsive-vertical-menu-secondary",left:H,menu:"secondary",reduceMotion:Y,ref:X,responsive:!1,tabIndex:-1,top:U,width:P,children:I.children}):null]})}))]})},M=r=>{var{children:n}=r,t=k(r,["children"]);return e(g,{children:e(O,{children:e(E,x(_({},t),{children:n}))})})};export{M as ResponsiveVerticalMenu,M as default};
|
|
@@ -50,6 +50,8 @@ export interface CheckableInputProps extends CommonCheckableInputProps {
|
|
|
50
50
|
value?: string;
|
|
51
51
|
/** When true label is inline */
|
|
52
52
|
labelInline?: boolean;
|
|
53
|
+
/** Whether this component resides on a dark background */
|
|
54
|
+
isDarkBackground?: boolean;
|
|
53
55
|
}
|
|
54
56
|
declare const CheckableInput: React.ForwardRefExoticComponent<CheckableInputProps & React.RefAttributes<HTMLInputElement>>;
|
|
55
57
|
export default CheckableInput;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),l=require("./checkable-input.style.js"),n=require("../input-behaviour/input-behaviour.component.js"),i=require("../form-field/form-field.component.js"),t=require("./hidden-checkable-input.component.js"),a=require("../utils/helpers/guid/index.js"),o=require("../../hooks/__internal__/useInputAccessibility/useInputAccessibility.js");function u(e){return e&&e.__esModule?e:{default:e}}function d(e,r,l){return r in e?Object.defineProperty(e,r,{value:l,enumerable:!0,configurable:!0,writable:!0}):e[r]=l,e}function c(e){for(var r=1;r<arguments.length;r++){var l=null!=arguments[r]?arguments[r]:{},n=Object.keys(l);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(l).filter((function(e){return Object.getOwnPropertyDescriptor(l,e).enumerable})))),n.forEach((function(r){d(e,r,l[r])}))}return e}const s=u(r).default.forwardRef(((u,d)=>{var{ariaLabelledBy:s,autoFocus:b,checked:p,children:f,disabled:y,loading:h,error:O,fieldHelp:g,fieldHelpInline:j,info:v,id:I,type:m,value:k,inputWidth:w,label:H,labelHelp:P,labelInline:q=!0,labelSpacing:x=1,labelWidth:B,name:S,onBlur:D,onChange:_,onFocus:W,required:C,isOptional:F,reverse:L=!1,validationOnLabel:E,warning:R,isDarkBackground:A=!1}=u,M=function(e,r){if(null==e)return{};var l,n,i=function(e,r){if(null==e)return{};var l,n,i={},t=Object.keys(e);for(n=0;n<t.length;n++)l=t[n],r.indexOf(l)>=0||(i[l]=e[l]);return i}(e,r);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);for(n=0;n<t.length;n++)l=t[n],r.indexOf(l)>=0||Object.prototype.propertyIsEnumerable.call(e,l)&&(i[l]=e[l])}return i}(u,["ariaLabelledBy","autoFocus","checked","children","disabled","loading","error","fieldHelp","fieldHelpInline","info","id","type","value","inputWidth","label","labelHelp","labelInline","labelSpacing","labelWidth","name","onBlur","onChange","onFocus","required","isOptional","reverse","validationOnLabel","warning","isDarkBackground"]);const{current:N}=r.useRef(I||a.default()),{labelId:V,fieldHelpId:z,validationId:G,ariaDescribedBy:J}=o.default({id:N,error:O,warning:R,info:v,label:H,fieldHelp:g}),K={disabled:y,loading:h,error:O,fieldHelp:g,fieldHelpInline:j,fieldHelpId:z,id:N,info:v,label:H,labelHelp:P,labelHelpIcon:"info",labelId:V,labelInline:q,labelSpacing:x,reverse:L,warning:R,validationIconId:G,isRequired:C,isOptional:F,useValidationIcon:E},Q=c({ariaDescribedBy:J,"aria-labelledby":s,"aria-invalid":!!O,autoFocus:b,checked:p,disabled:y,id:N,type:m,value:k,name:S,onBlur:D,onChange:_,onFocus:W,required:C,ref:d,validationIconId:G},M);return e.jsx(l.StyledCheckableInputWrapper,{disabled:y,fieldHelpInline:j,inputWidth:w,labelWidth:B,labelInline:q,reverse:L,isDarkBackground:A,children:e.jsx(n.InputBehaviour,{children:e.jsx(i.default,(T=c({},K),U={my:0,children:e.jsxs(l.StyledCheckableInput,{"data-role":"checkable-input",children:[e.jsx(t.default,c({},Q)),f]})},U=null!=U?U:{},Object.getOwnPropertyDescriptors?Object.defineProperties(T,Object.getOwnPropertyDescriptors(U)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);r.push.apply(r,l)}return r}(Object(U)).forEach((function(e){Object.defineProperty(T,e,Object.getOwnPropertyDescriptor(U,e))})),T))})});var T,U}));s.displayName="CheckableInput",exports.default=s;
|
|
@@ -6,6 +6,7 @@ export interface StyledCheckableInputWrapperProps {
|
|
|
6
6
|
labelWidth?: number;
|
|
7
7
|
labelInline?: boolean;
|
|
8
8
|
reverse?: boolean;
|
|
9
|
+
isDarkBackground?: boolean;
|
|
9
10
|
}
|
|
10
11
|
declare const StyledCheckableInputWrapper: import("styled-components").StyledComponent<"div", any, StyledCheckableInputWrapperProps, never>;
|
|
11
12
|
export { StyledCheckableInput, StyledCheckableInputWrapper };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var e=require("styled-components"),l=require("../field-help/field-help.style.js"),t=require("../form-field/form-field.style.js"),i=require("../label/label.style.js"),
|
|
1
|
+
"use strict";var e=require("styled-components"),l=require("../field-help/field-help.style.js"),t=require("../form-field/form-field.style.js"),i=require("../label/label.style.js"),a=require("../validations/validation-icon.style.js"),n=require("../../components/help/help.style.js"),o=require("./hidden-checkable-input.style.js");function r(e){return e&&e.__esModule?e:{default:e}}var s=r(e);const d=s.default.div.withConfig({displayName:"checkable-input.style__StyledCheckableInput",componentId:"sc-9944fee6-0"})(["display:inline-block;position:relative;"]),c=s.default.div.withConfig({displayName:"checkable-input.style__StyledCheckableInputWrapper",componentId:"sc-9944fee6-1"})(["",""],(({disabled:r,fieldHelpInline:s,inputWidth:c,labelWidth:p,labelInline:u,reverse:f,isDarkBackground:h})=>e.css(["width:100% !important;","{display:flex;}","{"," padding-top:0;width:auto;& ",",& ","{color:var(--colorsUtilityYin065);vertical-align:middle;&:hover,&:focus{color:var(--colorsUtilityYin090);}}}","{"," flex-basis:100%;}"," "," "," "," ",""],t.FieldLineStyle,i.StyledLabelContainer,u&&e.css(["justify-content:",";"],f?"flex-start":"flex-end"),n.default,a.default,l.default,h&&e.css(["color:var(--colorsUtilityYang080);"]),r&&e.css(["",",","{&:hover,&:focus{outline:none;cursor:not-allowed;}}"],o.default,i.default),s&&e.css(["","{flex-wrap:nowrap;}","{margin-right:0;margin-left:8px;}","{flex-grow:0;flex-basis:auto;padding-left:0;width:auto;}"],t.FieldLineStyle,d,l.default),f&&s&&e.css(["","{margin-left:0;}","{flex-grow:1;}"],d,l.default),void 0!==c&&0!==c&&e.css(["","{width:","% !important;min-width:67px;}"],d,c),void 0!==p&&0!==p&&`\n ${i.StyledLabelContainer} {\n width: ${p}% !important;\n }\n `)));exports.StyledCheckableInput=d,exports.StyledCheckableInputWrapper=c;
|
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"),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}=a,g=h(a,["children","height","responsiveBreakpoint","width"]);const O=d.default(),{activeMenuItem:w,buttonRef:_,containerRef:M,menuRef:k,responsiveMode:
|
|
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}=a,g=h(a,["children","height","responsiveBreakpoint","width"]);const O=d.default(),{activeMenuItem:w,buttonRef:_,containerRef:M,menuRef:k,responsiveMode:E,setActiveMenuItem:S,setReducedMotion:P,setResponsiveMode:q}=t.useResponsiveVerticalMenu(),[C,L]=r.useState(!1),[R,B]=r.useState(0),I=s.default(j),[D,T]=r.useState("auto"),[V,A]=r.useState("100%"),[z,F]=r.useState("auto"),G=r.useRef(null),Q=!u.default("screen and (prefers-reduced-motion: no-preference)"),{current:$}=k,{current:W}=_,H=r.useCallback((()=>{if(C&&E){const e=$||document.querySelector("[id='responsive-vertical-menu-primary']");e&&A(e.getBoundingClientRect().width-16+"px")}T(w&&$?`${$.getBoundingClientRect().right}px`:"auto"),F(w&&W?`${W.getBoundingClientRect().bottom}px`:"auto")}),[C,$,E,w,W]),J=r.useCallback((e=>{M.current&&!M.current.contains(e.target)&&L(!1)}),[M]),K=r.useCallback((()=>{L((e=>!e)),S(null)}),[S]);r.useLayoutEffect((()=>(H(),window.addEventListener("resize",H),()=>{var e;null===(e=window)||void 0===e||e.removeEventListener("resize",H)})),[C,H,$,E]),r.useEffect((()=>{const e=()=>{setTimeout((()=>{M.current&&!M.current.contains(document.activeElement)&&L(!1)}),0)},r=e=>{"Escape"===e.key&&(e.preventDefault(),L(!1))},t=M.current;return C&&!E&&(document.addEventListener("keydown",r),window.addEventListener("click",J),null==t||t.addEventListener("focusout",e)),()=>{document.removeEventListener("keydown",r),window.removeEventListener("click",J),null==t||t.removeEventListener("focusout",e)}}),[C,M,J,E]),r.useEffect((()=>{null==P||P(Q),null==q||q(!I)}),[I,Q,P,q]);const N=r.useCallback((e=>{if(!e)return 0;if(v.default.isValidElement(e))return 1+N(e.props.children);const r=v.default.Children.toArray(e);return r.length?r.reduce(((e,r)=>v.default.isValidElement(r)?e+1+N(r.props.children):e),0):0}),[]);return r.useEffect((()=>{const e=R,r=N(f);e!==r&&(B(r),S(null))}),[R,f,N,S]),e.jsxs("div",{ref:M,children:[e.jsx(n.StyledButton,{active:C,"aria-controls":"responsive-vertical-menu-primary","aria-expanded":C,"aria-label":null===(c=O.verticalMenu.ariaLabels)||void 0===c?void 0:c.responsiveMenuLauncher(),buttonType:"tertiary","data-component":"responsive-vertical-menu-launcher","data-role":"responsive-vertical-menu-launcher",iconType:"squares_nine",id:"responsive-vertical-menu-launcher",onClick:K,ref:_}),E?e.jsx(o.default,{open:C,children:e.jsxs(i.Box,{position:"fixed",top:0,width:V,children:[e.jsx(i.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:()=>{L(!1),S(null)}})}),e.jsx(n.StyledResponsiveMenu,{height:b,id:"responsive-vertical-menu-primary",menu:"primary",reduceMotion:Q,ref:k,responsive:!0,tabIndex:-1,top:"48px",width:x,children:f})]})}):e.jsx(n.StyledGlobalVerticalMenuWrapper,y(m({},g,l.default("responsive-vertical-menu",g)),{children:C&&e.jsxs(e.Fragment,{children:[e.jsx(n.StyledResponsiveMenu,{childOpen:!!w,"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:k,responsive:!1,tabIndex:-1,top:z,width:x,children:f}),w?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:D,menu:"secondary",reduceMotion:Q,ref:G,responsive:!1,tabIndex:-1,top:z,width:x,children:w.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;
|