carbon-react 155.3.1 → 155.4.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/form/form.component.d.ts +5 -1
- package/esm/components/form/form.component.js +1 -1
- package/esm/components/form/form.style.d.ts +2 -0
- package/esm/components/form/form.style.js +1 -1
- package/esm/components/heading/heading.component.js +1 -1
- package/esm/components/number/number.component.js +1 -1
- package/esm/components/popover-container/popover-container.component.js +1 -1
- package/esm/components/sidebar/__internal__/sidebar-header/index.d.ts +1 -0
- package/esm/components/sidebar/__internal__/sidebar-header/index.js +1 -1
- package/esm/components/sidebar/__internal__/sidebar-header/sidebar-header.component.d.ts +14 -1
- package/esm/components/sidebar/__internal__/sidebar-header/sidebar-header.component.js +1 -1
- package/esm/components/sidebar/__internal__/sidebar-header/sidebar-header.style.d.ts +5 -0
- package/esm/components/sidebar/__internal__/sidebar-header/sidebar-header.style.js +1 -1
- package/esm/components/sidebar/sidebar.component.d.ts +6 -0
- package/esm/components/sidebar/sidebar.component.js +1 -1
- package/esm/components/text-editor/__internal__/helpers.js +1 -1
- package/esm/components/text-editor/__internal__/read-only-rte.component.js +1 -1
- package/esm/components/text-editor/text-editor.component.js +1 -1
- package/esm/components/tile/__internal__/compute-content-padding.js +1 -1
- package/esm/components/tooltip/tooltip.component.js +1 -1
- package/esm/components/vertical-menu/responsive-vertical-menu/__internal__/focus.context.js +1 -1
- package/esm/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu-item/responsive-vertical-menu-item.component.js +1 -1
- package/esm/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu.context.js +1 -1
- package/lib/components/form/form.component.d.ts +5 -1
- package/lib/components/form/form.component.js +1 -1
- package/lib/components/form/form.style.d.ts +2 -0
- package/lib/components/form/form.style.js +1 -1
- package/lib/components/sidebar/__internal__/sidebar-header/index.d.ts +1 -0
- package/lib/components/sidebar/__internal__/sidebar-header/index.js +1 -1
- package/lib/components/sidebar/__internal__/sidebar-header/sidebar-header.component.d.ts +14 -1
- package/lib/components/sidebar/__internal__/sidebar-header/sidebar-header.component.js +1 -1
- package/lib/components/sidebar/__internal__/sidebar-header/sidebar-header.style.d.ts +5 -0
- package/lib/components/sidebar/__internal__/sidebar-header/sidebar-header.style.js +1 -1
- package/lib/components/sidebar/sidebar.component.d.ts +6 -0
- package/lib/components/sidebar/sidebar.component.js +1 -1
- package/package.json +3 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as t}from"react/jsx-runtime";import r,{useRef as n,useMemo as o,useContext as a,useState as l,useCallback as i,useEffect as u}from"react";import{isValidLocaleDate as s,
|
|
1
|
+
import{jsxs as e,jsx as t}from"react/jsx-runtime";import r,{useRef as n,useMemo as o,useContext as a,useState as l,useCallback as i,useEffect as u}from"react";import{isValidLocaleDate as s,parseISODate as c,parseDate as p,checkISOFormatAndLength as d,findMatchedFormatAndValue as m,isDateValid as f,additionalYears as b,formattedValue as y,getSeparator as v,formatToISO as g}from"./__internal__/utils.js";import O from"../../hooks/__internal__/useLocale/useLocale.js";import _ from"../../__internal__/utils/helpers/events/events.js";import"../../style/utils/filter-styled-system-padding-props.js";import P from"../../style/utils/filter-styled-system-margin-props.js";import j from"../../style/utils/filter-out-styled-system-spacing-props.js";import k from"./__internal__/date-formats/index.js";import h 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 M=r.forwardRef(((r,W)=>{var{adaptiveLabelBreakpoint:M,allowEmptyValue:S,autoFocus:I,"data-element":E,"data-role":T,disabled:V,disablePortal:K=!0,helpAriaLabel:z,labelInline:R,minDate:N,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:oe,onPickerClose:ae,onPickerOpen:le,dateFormatOverride:ie,datePickerAriaLabel:ue,datePickerAriaLabelledBy:se,validationMessagePositionTop:ce=!0}=r,pe=function(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},a=Object.keys(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}(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","validationMessagePositionTop"]);const de=n(null),me=n(null),fe=n(null),be=n(!1),ye=n(!1),ve=n(!1),ge=O(),{dateFnsLocale:Oe,dateFormatOverride:_e}=ge.date,{format:Pe,formats:je}=o((()=>k(Oe(),ie||_e)),[Oe,_e,ie]),{inputRefMap:ke,setInputRefMap:he,validationMessagePositionTop:we}=a(x),[De,xe]=l(!1),[Le,Ce]=l((()=>{if(s(ee,Oe()))return d(ee)?c(ee):p(Pe,ee)})),Be=n(!0),We=n(C()),Fe=null!=we?we:ce,Ae=e=>S&&!e.length?e:null,Me=e=>{const{id:t,name:r}=e.target,[n,o]=m(e.target.value,je),a="blur"===e.type?y(Pe,Le):e.target.value,l=f(p(n,o))?g(...b(n,o)):Ae(e.target.value);return{target:A(F({},r&&{name:r},t&&{id:t}),{value:{formattedValue:a,rawValue:l}})}},Se=L((()=>{var e,t;De&&(be.current=!0,null===(e=fe.current)||void 0===e||e.focus(),ye.current=!1,null===(t=fe.current)||void 0===t||t.blur(),xe(!1),null==ae||ae(),be.current=!1)}),"mousedown"),Ie=e=>{H&&H(e)},Ee=i((e=>{var t;fe.current=e,me.current=null==e?void 0:e.parentElement,W&&("function"==typeof W?W(e):W.current=e),oe&&(null==ke||null===(t=ke[oe])||void 0===t?void 0:t.setOpen)!==xe&&(null==he||he({[oe]:{isBlurBlocked:ye,setOpen:xe}}))}),[oe,ke,he,W]);u((()=>{const[e,t]=m(ee,je);e&&t&&f(p(e,t))?Ce(p(...b(e,t))):d(ee)&&Be.current?Ce(c(ee)):Ce(void 0)}),[ee,je]);const Te=P(pe);return e(h,A(F(A(F({ref:de,role:"presentation",size:Y,labelInline:R},Te),{applyDateRangeStyling:!!ke,maxWidth:ne,inputWidth:te}),B("date",{"data-element":E,"data-role":T})),{children:[t(w,A(F({},j(pe)),{"data-component":"date-input",value:(()=>{if(d(ee)&&Be.current)return y(Pe,c(ee));const e=v(ee),t=v(Pe),r=()=>ee.split("").map((r=>r===e?t:r)).join("");if(Be.current&&e!==t&&f(p(Pe,r()))){Be.current=!1;const[e,t]=m(r(),je);return y(Pe,p(...b(e,t)))}return ee})(),onBlur:e=>{if(V||X)return;let t;if(f(Le)){t=Me(e);const r=d(ee)?y(Pe,c(ee)):ee,[,n]=m(r,je);y(Pe,Le)!==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:Ae(e.target.value)}})}}ye.current||G&&G(t)},onChange:e=>{Be.current=!1,$(Me(e))},onClick:Ie,onFocus:e=>{V||X||(ye.current=!1,J&&J(e))},onKeyDown:e=>{if(Q&&Q(e),De&&_.isTabKey(e)){if(_.isShiftKey(e))xe(!1),null==ae||ae();else if(!K){var t,r;e.preventDefault(),null===(r=document)||void 0===r||null===(t=r.querySelector(`[id="${We.current}"]`))||void 0===t||t.focus()}be.current=!1}},iconOnClick:Ie,onMouseDown:()=>{Se(),he&&(ye.current=!0),De||null==le||le()},iconOnMouseDown:()=>{ye.current=!0,be.current=!0,Se(),De?(xe(!1),null==ae||ae()):(xe(!0),null==le||le())},inputIcon:"calendar",labelInline:R,ref:Ee,adaptiveLabelBreakpoint:M,tooltipPosition:Z,helpAriaLabel:z,autoFocus:I,size:Y,disabled:V,readOnly:X,inputWidth:te,labelWidth:re,maxWidth:ne,m:0,validationMessagePositionTop:Fe})),t(D,{disablePortal:K,inputElement:me,pickerProps:U,selectedDays:Le,onDayClick:(e,t)=>{var r;Ce(e),$(Me(A(F({},t),{target:A(F({},t.target),{value:y(Pe,e)})}))),ve.current=!0,null===(r=fe.current)||void 0===r||r.focus(),xe(!1)},minDate:N,maxDate:q,pickerMouseDown:()=>{ye.current=!0,Se()},open:De,setOpen:xe,pickerTabGuardId:We.current,onPickerClose:ae,ariaLabel:ue,ariaLabelledBy:se})]}))}));export{M as DateInput,M as default};
|
|
@@ -21,8 +21,12 @@ export interface FormProps extends SpaceProps, TagProps {
|
|
|
21
21
|
rightSideButtons?: React.ReactNode;
|
|
22
22
|
/** Save button to be rendered */
|
|
23
23
|
saveButton?: React.ReactNode;
|
|
24
|
+
/** Custom content to render in the form's footer */
|
|
25
|
+
footerChildren?: React.ReactNode;
|
|
24
26
|
/** Enables the sticky footer. */
|
|
25
27
|
stickyFooter?: boolean;
|
|
28
|
+
/** Background variant for the sticky footer. */
|
|
29
|
+
stickyFooterVariant?: "light" | "grey";
|
|
26
30
|
/** The total number of warnings present in the form */
|
|
27
31
|
warningCount?: number;
|
|
28
32
|
/** Height of the form (any valid CSS value) */
|
|
@@ -33,7 +37,7 @@ export interface FormProps extends SpaceProps, TagProps {
|
|
|
33
37
|
footerPadding?: PaddingProps;
|
|
34
38
|
}
|
|
35
39
|
export declare const Form: {
|
|
36
|
-
({ children, saveButton, leftSideButtons, rightSideButtons, errorCount, warningCount, onSubmit, buttonAlignment, stickyFooter, fieldSpacing, noValidate, height, fullWidthButtons, footerPadding, ...rest }: FormProps): React.JSX.Element;
|
|
40
|
+
({ children, saveButton, leftSideButtons, rightSideButtons, errorCount, warningCount, onSubmit, buttonAlignment, footerChildren, stickyFooter, stickyFooterVariant, fieldSpacing, noValidate, height, fullWidthButtons, footerPadding, ...rest }: FormProps): React.JSX.Element;
|
|
37
41
|
displayName: string;
|
|
38
42
|
};
|
|
39
43
|
export default Form;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as t,jsx as e}from"react/jsx-runtime";import{useRef as
|
|
1
|
+
import{jsxs as t,jsx as e,Fragment as r}from"react/jsx-runtime";import{useRef as o,useContext as n}from"react";import i from"../../__internal__/utils/helpers/tags/tags.js";import l from"./__internal__/form-summary.component.js";import{StyledForm as a,StyledFormContent as c,StyledFormFooter as f,StyledLeftButtons as u,StyledRightButtons as s}from"./form.style.js";import{formSpacing as m}from"./form.config.js";import d from"../modal/__internal__/modal.context.js";function b(t,e,r){return e in t?Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):t[e]=r,t}function p(t){for(var e=1;e<arguments.length;e++){var r=null!=arguments[e]?arguments[e]:{},o=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(r).filter((function(t){return Object.getOwnPropertyDescriptor(r,t).enumerable})))),o.forEach((function(e){b(t,e,r[e])}))}return t}function g(t,e){return e=null!=e?e:{},Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(e)):function(t){var e=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e.push.apply(e,r)}return e}(Object(e)).forEach((function(r){Object.defineProperty(t,r,Object.getOwnPropertyDescriptor(e,r))})),t}const y=b=>{var{children:y,saveButton:h,leftSideButtons:O,rightSideButtons:j,errorCount:S,warningCount:P,onSubmit:w,buttonAlignment:k="right",footerChildren:_,stickyFooter:v,stickyFooterVariant:F="light",fieldSpacing:B=3,noValidate:C=!0,height:x,fullWidthButtons:V=!1,footerPadding:A={}}=b,I=function(t,e){if(null==t)return{};var r,o,n=function(t,e){if(null==t)return{};var r,o,n={},i=Object.keys(t);for(o=0;o<i.length;o++)r=i[o],e.indexOf(r)>=0||(n[r]=t[r]);return n}(t,e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);for(o=0;o<i.length;o++)r=i[o],e.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(t,r)&&(n[r]=t[r])}return n}(b,["children","saveButton","leftSideButtons","rightSideButtons","errorCount","warningCount","onSubmit","buttonAlignment","footerChildren","stickyFooter","stickyFooterVariant","fieldSpacing","noValidate","height","fullWidthButtons","footerPadding"]);const D=o(null),W=o(null),{isInModal:E}=n(d),M=!!(_||h||O||j||S||P);return t(a,g(p({ref:D,className:v?"sticky":"",stickyFooter:v,onSubmit:w,"data-component":"form",noValidate:C,height:x,isInModal:E},I,i("form",I)),{children:[e(c,{"data-element":"form-content","data-role":"form-content",stickyFooter:v,tabIndex:-1,isInModal:E,fieldSpacing:m[B],children:y}),M&&e(f,g(p(g(p({"data-element":"form-footer","data-role":"form-footer",ref:W,hasFooterChildren:!!_,stickyFooter:v},v&&{stickyFooterVariant:F}),{buttonAlignment:k,fullWidthButtons:V}),A),{children:_||t(r,{children:[O&&e(u,{"data-role":"form-left-buttons",buttonAlignment:k,children:O}),e(l,{fullWidth:V,errorCount:S,warningCount:P,children:h}),j&&e(s,{"data-role":"form-right-buttons",buttonAlignment:k,children:j})]})}))]}))};y.displayName="Form";export{y as Form,y as default};
|
|
@@ -6,7 +6,9 @@ interface StyledFormContentProps {
|
|
|
6
6
|
}
|
|
7
7
|
export declare const StyledFormContent: import("styled-components").StyledComponent<"div", any, StyledFormContentProps, never>;
|
|
8
8
|
interface StyledFormFooterProps {
|
|
9
|
+
hasFooterChildren?: boolean;
|
|
9
10
|
stickyFooter?: boolean;
|
|
11
|
+
stickyFooterVariant?: "light" | "grey";
|
|
10
12
|
fullWidthButtons?: boolean;
|
|
11
13
|
buttonAlignment?: FormButtonAlignment;
|
|
12
14
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import t,{css as
|
|
1
|
+
import t,{css as o}from"styled-components";import{padding as i,space as e}from"styled-system";import l from"../../__internal__/form-field/form-field.style.js";import s from"../../style/themes/apply-base-theme.js";import r from"../inline-inputs/inline-inputs.style.js";import n from"../select/select.style.js";import{StyledSelectMultiSelect as a}from"../select/multi-select/multi-select.style.js";import m from"../switch/switch.style.js";const d=t.div.withConfig({displayName:"form.style__StyledFormContent",componentId:"sc-a81d1b22-0"})((({stickyFooter:t,isInModal:i})=>t&&i&&o(["flex-grow:1;min-height:0;overflow-y:auto;"])),(({fieldSpacing:t})=>t&&o(["--fieldSpacing:",";","{margin-top:var(--spacing000);}"," ",","," ",","," ",","," ","{margin-bottom:var(--spacing000);}"],t,l,r,l,r,n,r,a,m,l))),p=t.div.attrs(s).withConfig({displayName:"form.style__StyledFormFooter",componentId:"sc-a81d1b22-1"})([""," "," "," ",""],(({hasFooterChildren:t})=>!t&&o(["align-items:center;display:flex;flex-wrap:wrap;gap:var(--sizing200);"])),(({buttonAlignment:t})=>"right"===t&&o(["justify-content:flex-end;"])),(({stickyFooter:t,stickyFooterVariant:i,fullWidthButtons:e})=>o([""," "," ",""],!t&&o(["margin-top:48px;"]),t&&o(["background-color:",";box-shadow:var(--boxShadow150);box-sizing:border-box;"," padding:16px 32px;width:100%;z-index:1000;position:sticky;bottom:0;"],"light"===i?"var(--colorsUtilityYang100)":"var(--colorsUtilityMajor025)","grey"===i&&"border-top: 1px solid var(--colorsUtilityMajor050);"),e&&o(["flex-direction:column;align-items:stretch;"]))),i),f=t.form.attrs(s).withConfig({displayName:"form.style__StyledForm",componentId:"sc-a81d1b22-2"})([""," "," ",""],e,(({height:t})=>t&&o(["height:",";"],t)),(({stickyFooter:t,isInModal:i})=>t&&o(["display:flex;flex-direction:column;position:relative;",""],i&&o(["flex-grow:1;min-height:0;height:100%;"])))),c=t.div.withConfig({displayName:"form.style__StyledRightButtons",componentId:"sc-a81d1b22-3"})(["display:flex;gap:var(--sizing200);",""],(({buttonAlignment:t})=>"left"===t&&"flex-grow: 1;")),g=t.div.withConfig({displayName:"form.style__StyledLeftButtons",componentId:"sc-a81d1b22-4"})(["display:flex;justify-content:flex-end;gap:var(--sizing200);",""],(({buttonAlignment:t})=>"right"===t&&"flex-grow: 1;"));export{f as StyledForm,d as StyledFormContent,p as StyledFormFooter,g as StyledLeftButtons,c as StyledRightButtons};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as t}from"react/jsx-runtime";import"react";import"../../style/utils/filter-styled-system-padding-props.js";import r from"../../style/utils/filter-styled-system-margin-props.js";import n from"../../__internal__/utils/helpers/tags/tags.js";import{StyledHeading as i,StyledHeader as a,StyledHeaderContent as l,StyledHeadingTitle as o,StyledSeparator as c,StyledDivider as s,
|
|
1
|
+
import{jsxs as e,jsx as t}from"react/jsx-runtime";import"react";import"../../style/utils/filter-styled-system-padding-props.js";import r from"../../style/utils/filter-styled-system-margin-props.js";import n from"../../__internal__/utils/helpers/tags/tags.js";import{StyledHeading as i,StyledHeader as a,StyledHeaderContent as l,StyledHeadingTitle as o,StyledSeparator as c,StyledDivider as s,StyledHeadingBackButton as d,StyledHeadingIcon as p,StyledSubHeader as u,StyledHeaderHelp as b,StyledHeadingPills as h}from"./heading.style.js";import f from"../../hooks/__internal__/useLocale/useLocale.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 m(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){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 O=y=>{var{children:O,backLink:j,divider:k=!0,help:v,helpAriaLabel:P,helpLink:w,pills:L,separator:_=!1,subheader:S,subtitleId:D,headingType:I="h1",title:x,titleId:A}=y,E=function(e,t){if(null==e)return{};var r,n,i=function(e,t){if(null==e)return{};var r,n,i={},a=Object.keys(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||(i[r]=e[r]);return i}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(i[r]=e[r])}return i}(y,["children","backLink","divider","help","helpAriaLabel","helpLink","pills","separator","subheader","subtitleId","headingType","title","titleId"]);const T=f(),B=r(E);return x?e(i,g(m({},n("heading",E),B),{children:[e(a,{"data-element":"header-container",divider:k,subheader:!!S,hasBackLink:!!j,children:[j&&(()=>{const e="string"==typeof j?{href:j}:{onClick:j};return t(d,g(m({"aria-label":T.heading.backLinkAriaLabel(),"data-element":"back","data-role":"heading-back-button",onMouseDown:e=>e.currentTarget.focus({preventScroll:!0})},e),{children:t(p,{type:"chevron_left"})}))})(),e(l,{children:[t(o,{withMargin:!!L||!!v,variant:I,"data-element":"title",id:A,children:x}),(v||w)&&t(b,{"data-element":"help",tooltipPosition:"right",href:w,ariaLabel:P,children:v}),L&&t(h,{"data-element":"pills","data-role":"heading-pills-container",children:L})]}),_&&t(c,{"data-role":"heading-separator"}),S&&t(u,{"data-element":"subtitle","data-role":"subtitle",id:D,hasBackLink:!!j,hasSeparator:_,children:S})]}),k&&t(s,{"data-element":"divider","data-role":"heading-divider"}),O]})):null};export{O as Heading,O as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e}from"react/jsx-runtime";import t,{useRef as r}from"react";import{
|
|
1
|
+
import{jsx as e}from"react/jsx-runtime";import t,{useRef as r}from"react";import{LABEL_VALIDATION_DEFAULT as n,ALIGN_DEFAULT as o,LABEL_WIDTH_DEFAULT as l,SIZE_DEFAULT as a,Textbox as i}from"../textbox/textbox.component.js";import c from"../../__internal__/utils/logger/index.js";import u from"../../__internal__/utils/helpers/tags/tags.js";function s(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]:{},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){s(e,t,r[t])}))}return e}let p=!1;const f=t.forwardRef(((t,s)=>{var{onChange:f,onKeyDown:O,value:g,align:y=o,labelWidth:m=l,size:d=a,validationOnLabel:j=n}=t,v=function(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},l=Object.keys(e);for(n=0;n<l.length;n++)r=l[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(n=0;n<l.length;n++)r=l[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}(t,["onChange","onKeyDown","value","align","labelWidth","size","validationOnLabel"]);const w=r(null),h=r(null);var P,x,S;return p||f||(p=!0,c.deprecate("Uncontrolled behaviour in `Number` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.")),e(i,b((x=b({},v),S=null!=(S={value:g,onChange:e=>{(function(e){return new RegExp("^[-]?[0-9]*$").test(e)})(e.target.value)&&f?f(e):(e.target.value=g||"",e.target.setSelectionRange(w.current,h.current))},onKeyDown:e=>{w.current=e.target.selectionStart,h.current=e.target.selectionEnd,O&&O(e)},ref:s,align:y,labelWidth:m,size:d,validationOnLabel:j})?S:{},Object.getOwnPropertyDescriptors?Object.defineProperties(x,Object.getOwnPropertyDescriptors(S)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(S)).forEach((function(e){Object.defineProperty(x,e,Object.getOwnPropertyDescriptor(S,e))})),x),u(null!==(P=v["data-component"])&&void 0!==P?P:"number",v)))}));f.displayName="Number";export{f as Number,f as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import{forwardRef as r,useState as o,useRef as i,useContext as a,useCallback as l,useEffect as c,useImperativeHandle as s,useMemo as p}from"react";import{CSSTransition as d}from"react-transition-group";import{offset as u,flip as m}from"@floating-ui/dom";import f from"../../hooks/useMediaQuery/useMediaQuery.js";import{
|
|
1
|
+
import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import{forwardRef as r,useState as o,useRef as i,useContext as a,useCallback as l,useEffect as c,useImperativeHandle as s,useMemo as p}from"react";import{CSSTransition as d}from"react-transition-group";import{offset as u,flip as m}from"@floating-ui/dom";import f from"../../hooks/useMediaQuery/useMediaQuery.js";import{PopoverContainerWrapperStyle as b,PopoverContainerOpenIcon as v,PopoverContainerCloseIcon as h,PopoverContainerContentStyle as y,PopoverContainerHeaderStyle as _,PopoverContainerTitleStyle as O}from"./popover-container.style.js";import g from"../icon/icon.component.js";import j from"../../__internal__/popover/popover.component.js";import x from"../../__internal__/utils/helpers/guid/index.js";import P from"../../style/utils/filter-styled-system-padding-props.js";import C from"../../hooks/__internal__/useClickAwayListener/useClickAwayListener.js";import w from"../../__internal__/utils/helpers/events/events.js";import k from"../../__internal__/focus-trap/focus-trap.component.js";import A from"../modal/__internal__/modal.context.js";import B from"../../hooks/__internal__/useFocusPortalContent/useFocusPortalContent.js";import I from"../../__internal__/utils/helpers/tags/tags.js";import{defaultFocusableSelectors as D}from"../../__internal__/focus-trap/focus-trap-utils.js";import L from"../flat-table/__internal__/flat-table.context.js";import{useGlobalHeader as E}from"../global-header/__internal__/global-header.context.js";function S(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function F(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){S(e,t,n[t])}))}return e}function M(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 W=({tabIndex:t,onClick:n,"data-element":r,ref:o,"aria-label":i,id:a,"aria-expanded":l,"aria-haspopup":c})=>e(v,{tabIndex:t,onClick:n,"data-element":r,ref:o,"aria-label":i,"aria-haspopup":c,"aria-expanded":l,id:a,children:e(g,{type:"settings"})}),R=({"data-element":t,tabIndex:n,onClick:r,ref:o,"aria-label":i,closeButtonDataProps:a})=>e(h,M(F({tabIndex:n,onClick:r,ref:o,"aria-label":i},I("close",F({"data-element":t},a))),{children:e(g,{type:"close"})})),H=r(((r,v)=>{var{children:h,title:g,position:S="right",open:H,onOpen:Q,onClose:T,renderOpenComponent:q=W,renderCloseComponent:z=R,shouldCoverButton:G=!1,ariaDescribedBy:K,openButtonAriaLabel:N,closeButtonAriaLabel:U="close",containerAriaLabel:$,closeButtonDataProps:J,disableAnimation:V=!1,hasFullWidth:X=!1}=r,Y=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}(r,["children","title","position","open","onOpen","onClose","renderOpenComponent","renderCloseComponent","shouldCoverButton","ariaDescribedBy","openButtonAriaLabel","closeButtonAriaLabel","containerAriaLabel","closeButtonDataProps","disableAnimation","hasFullWidth"]);const Z=void 0!==H,[ee,te]=o(!1),ne=i(null),re=i(null),oe=i(null),ie=i(x()),ae=i(null),le=g?`PopoverContainer_${ie.current}`:void 0,ce=Z?H:ee,se=!f("screen and (prefers-reduced-motion: no-preference)"),pe=function(e){return p((()=>[u(e?({rects:e})=>({mainAxis:-e.reference.height}):6),m({fallbackStrategy:"initialPlacement"})]),[e])}(G),{isInFlatTable:de}=a(L),ue=l((e=>{var t;Z||te(!1),null==T||T(e),ce&&(null===(t=re.current)||void 0===t||t.focus())}),[Z,ce,T]),me=l((e=>{!w.composedPath(e).find((e=>e instanceof HTMLElement&&"input"===e.getAttribute("data-element")&&"true"===e.getAttribute("aria-expanded")))&&w.isEscKey(e)&&ue(e)}),[ue]);c((()=>(document.addEventListener("keydown",me),()=>{document.removeEventListener("keydown",me)})),[me]),c((()=>{var e;!G&&ce&&(null===(e=ae.current)||void 0===e||e.focus({preventScroll:!0}))}),[ce,G,ae]),B(G?void 0:ae,G?void 0:re,ue);const fe=l((e=>{const t=Array.from(document.querySelectorAll(D)||[]).filter((e=>e===re.current||-1!==Number(e.tabIndex))),n=t.indexOf(re.current);t[n+1].focus(),ue(e)}),[]),be=(e,t)=>{var n;"next"===e&&fe?fe(t):"prev"===e&&(null===(n=re.current)||void 0===n||n.focus())},ve={tabIndex:0,"aria-expanded":ce,"aria-haspopup":"dialog",isOpen:ce,"data-element":"popover-container-open-component",onClick:e=>{Z||te(!ce),ce?null==T||T(e):null==Q||Q(e)},ref:re,"aria-label":N||g,id:ce?void 0:le},he={"data-element":"popover-container-close-component",tabIndex:0,onClick:e=>{ue(e)},ref:ne,"aria-label":U,closeButtonDataProps:J},ye=C((e=>{Z||te(!1),ce&&(null==T||T(e))}),"mousedown"),[_e,Oe]=o(!1),{isWithinGlobalHeader:ge}=E();s(v,(()=>({focusButton(){var e;null===(e=re.current)||void 0===e||e.focus()}})),[]);const je=()=>t(y,M(F({"data-element":"popover-container-content",role:"dialog","aria-labelledby":le,"aria-label":$,"aria-describedby":K,p:"16px 24px",ref:ae,tabIndex:-1,disableAnimation:V||se,zIndex:ge?1e4:2e3},P(Y)),{children:[t(_,{children:[e(O,{id:le,"data-element":"popover-container-title",children:g}),z(he)]}),h]}));return t(b,M(F({onMouseDown:ye,hasFullWidth:X},I("popover-container",Y)),{children:[e("div",{ref:oe,children:q(ve)}),e(d,{nodeRef:ae,timeout:{exit:V?0:300},in:ce,unmountOnExit:!0,onEntered:G?()=>Oe(!0):void 0,onExiting:G?()=>Oe(!1):void 0,children:e(j,{reference:oe,placement:"right"===S?"bottom-start":"bottom-end",popoverStrategy:V||se?"fixed":"absolute",middleware:pe,childRefOverride:ae,disableBackgroundUI:de,children:G?e(A.Provider,{value:{isAnimationComplete:_e},children:e(k,{wrapperRef:ae,isOpen:ce,children:je()})}):t(n,{children:[e("div",{"data-element":"tab-guard-top",tabIndex:0,onFocus:e=>be("prev",e)}),je(),e("div",{"data-element":"tab-guard-bottom",tabIndex:0,onFocus:e=>be("next",e)})]})})})]}))}));export{H as PopoverContainer,H as default,R as renderClose,W as renderOpen};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export{default}from"./sidebar-header.component.js";
|
|
1
|
+
export{SidebarSubHeader,default}from"./sidebar-header.component.js";
|
|
@@ -7,9 +7,22 @@ export interface SidebarHeaderProps extends PaddingProps {
|
|
|
7
7
|
id: string;
|
|
8
8
|
/** Close icon button to be rendered */
|
|
9
9
|
closeIcon?: React.ReactNode;
|
|
10
|
+
/** Header background variant for the sidebar. */
|
|
11
|
+
headerVariant?: "light" | "dark";
|
|
12
|
+
}
|
|
13
|
+
export interface SidebarSubHeaderProps extends PaddingProps {
|
|
14
|
+
/** This component supports children. */
|
|
15
|
+
children?: React.ReactNode;
|
|
16
|
+
/** A custom id. */
|
|
17
|
+
id: string;
|
|
10
18
|
}
|
|
11
19
|
declare const SidebarHeader: {
|
|
12
|
-
({ children, id, closeIcon, ...rest }: SidebarHeaderProps): React.JSX.Element;
|
|
20
|
+
({ children, id, closeIcon, headerVariant, ...rest }: SidebarHeaderProps): React.JSX.Element;
|
|
21
|
+
displayName: string;
|
|
22
|
+
};
|
|
23
|
+
declare const SidebarSubHeader: {
|
|
24
|
+
({ children, id, ...rest }: SidebarSubHeaderProps): React.JSX.Element;
|
|
13
25
|
displayName: string;
|
|
14
26
|
};
|
|
15
27
|
export default SidebarHeader;
|
|
28
|
+
export { SidebarSubHeader };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as r}from"react/jsx-runtime";import"react";import t from"./sidebar-header.style.js";function
|
|
1
|
+
import{jsxs as e,jsx as r}from"react/jsx-runtime";import"react";import t,{StyledSidebarSubHeader as n}from"./sidebar-header.style.js";function i(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function a(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){i(e,r,t[r])}))}return e}function o(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 c(e,r){if(null==e)return{};var t,n,i=function(e,r){if(null==e)return{};var t,n,i={},a=Object.keys(e);for(n=0;n<a.length;n++)t=a[n],r.indexOf(t)>=0||(i[t]=e[t]);return i}(e,r);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n<a.length;n++)t=a[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(i[t]=e[t])}return i}const d=n=>{var{children:i,id:d,closeIcon:l,headerVariant:b}=n,p=c(n,["children","id","closeIcon","headerVariant"]);return e(t,o(a({hasClose:!!l,"data-component":"sidebar-header","data-role":"sidebar-header",p:"27px 32px 32px",headerVariant:b},p),{children:[r("div",{"data-element":"sidebar-heading",id:d,children:i}),l]}))},l=e=>{var{children:t,id:i}=e,d=c(e,["children","id"]);return r(n,o(a({"data-component":"sidebar-subheader",p:"var(--sizing100) var(--sizing400)",id:i},d),{children:t}))};d.displayName="SidebarHeader",l.displayName="SidebarSubHeader";export{l as SidebarSubHeader,d as default};
|
|
@@ -2,5 +2,10 @@ declare const StyledSidebarHeader: import("styled-components").StyledComponent<"
|
|
|
2
2
|
theme: object;
|
|
3
3
|
} & {
|
|
4
4
|
hasClose?: boolean | undefined;
|
|
5
|
+
headerVariant?: "light" | "dark" | undefined;
|
|
6
|
+
}, "theme">;
|
|
7
|
+
declare const StyledSidebarSubHeader: import("styled-components").StyledComponent<"div", any, {
|
|
8
|
+
theme: object;
|
|
5
9
|
}, "theme">;
|
|
6
10
|
export default StyledSidebarHeader;
|
|
11
|
+
export { StyledSidebarSubHeader };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
import o,{css as t}from"styled-components";import{padding as i}from"styled-system";import r from"../../../../style/themes/apply-base-theme.js";import e from"../../../icon-button/icon-button.style.js";import a from"../../../icon/icon.style.js";const s=o.div.attrs(r).withConfig({displayName:"sidebar-header.style__StyledSidebarHeader",componentId:"sc-e19ac77-0"})(["background-color:",";box-shadow:inset 0 -1px 0 0 var(--colorsUtilityMajor100);box-sizing:border-box;width:100%;color:var(--colorsActionMinorYin090);transition:all 0.2s ease;"," ",' div[data-element="sidebar-heading"]{width:100%;}'],(({headerVariant:o})=>"light"===o?"var(--colorsUtilityYang100)":"var(--colorsUtilityYin100)"),i,(({hasClose:o,headerVariant:i})=>o&&t(["display:flex;justify-content:space-between;> ",":first-of-type{"," position:absolute;z-index:1;right:25px;}"],e,"dark"===i&&t(["","{color:var(--colorsUtilityYang080);}"],a)))),l=o.div.attrs(r).withConfig({displayName:"sidebar-header.style__StyledSidebarSubHeader",componentId:"sc-e19ac77-1"})(["box-sizing:border-box;width:100%;color:var(--colorsActionMinorYin090);background-color:var(--colorsUtilityMajor050);border-bottom:1px solid var(--colorsUtilityMajor075);"," transition:all 0.2s ease;"],i);export{l as StyledSidebarSubHeader,s as default};
|
|
@@ -33,6 +33,10 @@ export interface SidebarProps extends PaddingProps, TagProps, WidthProps, Pick<M
|
|
|
33
33
|
bespokeFocusTrap?: (ev: KeyboardEvent, firstElement?: HTMLElement, lastElement?: HTMLElement) => void;
|
|
34
34
|
/** Node that will be used as sidebar header. */
|
|
35
35
|
header?: React.ReactNode;
|
|
36
|
+
/** Node that will be used as sidebar subheader. */
|
|
37
|
+
subHeader?: React.ReactNode;
|
|
38
|
+
/** Header background variant for the sidebar. */
|
|
39
|
+
headerVariant?: "light" | "dark";
|
|
36
40
|
/** A custom close event handler */
|
|
37
41
|
onCancel?: (ev: React.KeyboardEvent<HTMLElement> | KeyboardEvent | React.MouseEvent<HTMLElement>) => void;
|
|
38
42
|
/** Sets the open state of the modal */
|
|
@@ -49,6 +53,8 @@ export interface SidebarProps extends PaddingProps, TagProps, WidthProps, Pick<M
|
|
|
49
53
|
focusableSelectors?: string;
|
|
50
54
|
/** Padding to be set on the Sidebar header */
|
|
51
55
|
headerPadding?: PaddingProps;
|
|
56
|
+
/** Padding to be set on the Sidebar subheader */
|
|
57
|
+
subHeaderPadding?: PaddingProps;
|
|
52
58
|
/**
|
|
53
59
|
* @private
|
|
54
60
|
* @ignore
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as r}from"react/jsx-runtime";import o,{useRef as t,useCallback as a}from"react";import n from"../modal/modal.component.js";import{StyledSidebar as i,StyledSidebarContent as l}from"./sidebar.style.js";import s from"../icon-button/icon-button.component.js";import c from"../icon/icon.component.js";import d from"../../__internal__/focus-trap/focus-trap.component.js";import b from"./__internal__/sidebar-header/sidebar-header.component.js";import p from"../../__internal__/utils/helpers/guid/index.js";import
|
|
1
|
+
import{jsxs as e,jsx as r}from"react/jsx-runtime";import o,{useRef as t,useCallback as a}from"react";import n from"../modal/modal.component.js";import{StyledSidebar as i,StyledSidebarContent as l}from"./sidebar.style.js";import s from"../icon-button/icon-button.component.js";import c from"../icon/icon.component.js";import d from"../../__internal__/focus-trap/focus-trap.component.js";import b,{SidebarSubHeader as u}from"./__internal__/sidebar-header/sidebar-header.component.js";import p from"../../__internal__/utils/helpers/guid/index.js";import f from"../../hooks/__internal__/useLocale/useLocale.js";import m from"../../style/utils/filter-styled-system-padding-props.js";import y from"../../hooks/__internal__/useModalAria/useModalAria.js";import O from"./__internal__/sidebar.context.js";function h(e,r,o){return r in e?Object.defineProperty(e,r,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[r]=o,e}function j(e){for(var r=1;r<arguments.length;r++){var o=null!=arguments[r]?arguments[r]:{},t=Object.keys(o);"function"==typeof Object.getOwnPropertySymbols&&(t=t.concat(Object.getOwnPropertySymbols(o).filter((function(e){return Object.getOwnPropertyDescriptor(o,e).enumerable})))),t.forEach((function(r){h(e,r,o[r])}))}return e}function g(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 o=Object.getOwnPropertySymbols(e);r.push.apply(r,o)}return r}(Object(r)).forEach((function(o){Object.defineProperty(e,o,Object.getOwnPropertyDescriptor(r,o))})),e}const _=o.forwardRef(((o,h)=>{var{"aria-describedby":_,"aria-label":P,"aria-labelledby":w,"data-element":v="sidebar","data-role":k,open:F,bespokeFocusTrap:S,disableAutoFocus:C=!1,disableEscKey:E=!1,enableBackgroundUI:x=!1,header:I,headerVariant:M="light",subHeader:A,position:D="right",size:H="medium",children:N,onCancel:z,role:B="dialog",focusFirstElement:K,focusableContainers:L,focusableSelectors:R,width:T,headerPadding:U={},subHeaderPadding:V={},topModalOverride:W,restoreFocusOnClose:q=!0,className:G}=o,J=function(e,r){if(null==e)return{};var o,t,a=function(e,r){if(null==e)return{};var o,t,a={},n=Object.keys(e);for(t=0;t<n.length;t++)o=n[t],r.indexOf(o)>=0||(a[o]=e[o]);return a}(e,r);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);for(t=0;t<n.length;t++)o=n[t],r.indexOf(o)>=0||Object.prototype.propertyIsEnumerable.call(e,o)&&(a[o]=e[o])}return a}(o,["aria-describedby","aria-label","aria-labelledby","data-element","data-role","open","bespokeFocusTrap","disableAutoFocus","disableEscKey","enableBackgroundUI","header","headerVariant","subHeader","position","size","children","onCancel","role","focusFirstElement","focusableContainers","focusableSelectors","width","headerPadding","subHeaderPadding","topModalOverride","restoreFocusOnClose","className"]);const Q=f(),{current:X}=t(p()),{current:Y}=t(p()),Z=t(null),$=a((e=>{Z.current=e,h&&("object"==typeof h&&(h.current=e),"function"==typeof h&&h(e))}),[h]),ee=y(Z),re=()=>z?r(s,{"aria-label":Q.sidebar.ariaLabels.close(),onClick:z,"data-element":"close",children:r(c,{type:"close"})}):null,oe=e(i,{"aria-modal":!x&&ee,"aria-describedby":_||Y,"aria-label":P,"aria-labelledby":w||P?w:X,"data-component":"sidebar","data-element":v,"data-role":k,ref:$,position:D,size:H,onCancel:z,role:B,width:T,className:G,children:[I&&r(b,g(j({headerVariant:M,closeIcon:re()},U),{id:X,children:I})),A&&r(u,g(j({},V),{id:Y,children:A})),!I&&re(),r(l,g(j({"data-element":"sidebar-content","data-role":"sidebar-content"},m(J)),{children:r(O.Provider,{value:{isInSidebar:!0},children:N})}))]});return r(n,{open:F,onCancel:z,disableEscKey:E,enableBackgroundUI:x,topModalOverride:W,restoreFocusOnClose:q,children:x?oe:r(d,{wrapperRef:Z,isOpen:F,additionalWrapperRefs:L,focusableSelectors:R,focusFirstElement:K,autoFocus:!C,bespokeTrap:S,children:oe})})}));_.displayName="Sidebar";export{_ as Sidebar,_ as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{createHeadlessEditor as t}from"@lexical/headless";import{$
|
|
1
|
+
import{createHeadlessEditor as t}from"@lexical/headless";import{$generateNodesFromDOM as e,$generateHtmlFromNodes as r}from"@lexical/html";import{$getRoot as o,$getSelection as n}from"lexical";import{markdownNodes as s,theme as i}from"./constants.js";import a from"../../../__internal__/utils/logger/index.js";const l=t=>{let e,o;return t.read((()=>{const n=t.getEditorState();o=n.toJSON(),e=r(t,null)})),{htmlString:e,json:o}},m=r=>{const l=t({namespace:"html-to-json",onError:t=>a.error(t.message),theme:i,nodes:s});let m;if(l.update((()=>{const t=(new DOMParser).parseFromString(r,"text/html"),s=e(l,t);o().select();const i=n();if(i)try{i.insertNodes(s)}catch(t){m=t}}),{discrete:!0}),m)throw m;const c=l.getEditorState().toJSON();return JSON.stringify(c)},c=new RegExp(/((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=+$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=+$,\w]+@)[A-Za-z0-9.-]+)((?:\/[+~%/.\w-_]*)?\??(?:[-+=&;%@.\w_]*)#?(?:[\w]*))?)/);function p(t){return"https://"===t||c.test(t)}export{m as DeserializeHTML,l as SerializeLexical,p as validateUrl};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as r}from"react/jsx-runtime";import{LexicalComposer as e}from"@lexical/react/LexicalComposer";import{ContentEditable as t}from"@lexical/react/LexicalContentEditable";import{LexicalErrorBoundary as a}from"@lexical/react/LexicalErrorBoundary";import{RichTextPlugin as o}from"@lexical/react/LexicalRichTextPlugin";import{useMemo as i}from"react";import{createFromHTML as n}from"../utils.js";import{
|
|
1
|
+
import{jsx as r}from"react/jsx-runtime";import{LexicalComposer as e}from"@lexical/react/LexicalComposer";import{ContentEditable as t}from"@lexical/react/LexicalContentEditable";import{LexicalErrorBoundary as a}from"@lexical/react/LexicalErrorBoundary";import{RichTextPlugin as o}from"@lexical/react/LexicalRichTextPlugin";import{useMemo as i}from"react";import{createFromHTML as n}from"../utils.js";import{theme as l,markdownNodes as c}from"./constants.js";import m from"../../../__internal__/utils/logger/index.js";const s=r=>{let e;if(!r)return n("<p><br></p>");try{JSON.parse(r)&&(e=!0)}catch(r){e=!1}if(!e){if(/<[a-z][\s\S]*>/i.test(r))return n(r);const e=`<p dir="ltr"><span data-lexical-text="true">${(r=>r.replace(/((https?:\/\/)?[\w-]+(\.[\w-]+)+\.?(:\d+)?(\/\S*)?)/g,"<a href='$1'>$1</a>"))(r)}</span></p>`;return n(e)}return r},p=({namespace:n="carbon-rte-readonly",value:p})=>{const d=i((()=>({namespace:n,nodes:c,onError:r=>m.error(r.message),theme:l,editorState:s(p),editable:!1})),[n,p]);return r(e,{initialConfig:d,children:r(o,{contentEditable:r(t,{"data-role":`${n}-content-editor`,"aria-autocomplete":void 0,"aria-readonly":void 0}),ErrorBoundary:a})})};export{p as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,jsxs as r,Fragment as t}from"react/jsx-runtime";import{LexicalComposer as n}from"@lexical/react/LexicalComposer";import{ClickableLinkPlugin as o}from"@lexical/react/LexicalClickableLinkPlugin";import{EditorRefPlugin as i}from"@lexical/react/LexicalEditorRefPlugin";import{LexicalErrorBoundary as a}from"@lexical/react/LexicalErrorBoundary";import{HistoryPlugin as l}from"@lexical/react/LexicalHistoryPlugin";import{MarkdownShortcutPlugin as s}from"@lexical/react/LexicalMarkdownShortcutPlugin";import{RichTextPlugin as c}from"@lexical/react/LexicalRichTextPlugin";import{LinkPlugin as p}from"@lexical/react/LexicalLinkPlugin";import{ListPlugin as d}from"@lexical/react/LexicalListPlugin";import{$getRoot as u}from"lexical";import{forwardRef as m,useRef as f,useState as g,useImperativeHandle as _,useEffect as v,useMemo as h,useCallback as b}from"react";import{SerializeLexical as x,validateUrl as j}from"./__internal__/helpers.js";import y from"../../__internal__/label/label.component.js";import O from"../../hooks/__internal__/useLocale/useLocale.js";import w from"../../__internal__/utils/logger/index.js";import{
|
|
1
|
+
import{jsx as e,jsxs as r,Fragment as t}from"react/jsx-runtime";import{LexicalComposer as n}from"@lexical/react/LexicalComposer";import{ClickableLinkPlugin as o}from"@lexical/react/LexicalClickableLinkPlugin";import{EditorRefPlugin as i}from"@lexical/react/LexicalEditorRefPlugin";import{LexicalErrorBoundary as a}from"@lexical/react/LexicalErrorBoundary";import{HistoryPlugin as l}from"@lexical/react/LexicalHistoryPlugin";import{MarkdownShortcutPlugin as s}from"@lexical/react/LexicalMarkdownShortcutPlugin";import{RichTextPlugin as c}from"@lexical/react/LexicalRichTextPlugin";import{LinkPlugin as p}from"@lexical/react/LexicalLinkPlugin";import{ListPlugin as d}from"@lexical/react/LexicalListPlugin";import{$getRoot as u}from"lexical";import{forwardRef as m,useRef as f,useState as g,useImperativeHandle as _,useEffect as v,useMemo as h,useCallback as b}from"react";import{SerializeLexical as x,validateUrl as j}from"./__internal__/helpers.js";import y from"../../__internal__/label/label.component.js";import O from"../../hooks/__internal__/useLocale/useLocale.js";import w from"../../__internal__/utils/logger/index.js";import{COMPONENT_PREFIX as P,theme as L,markdownNodes as E}from"./__internal__/constants.js";import k from"./__internal__/plugins/AutoLinker/auto-link.component.js";import C from"./__internal__/plugins/CharacterCounter/character-counter.component.js";import T from"./__internal__/plugins/ContentEditor/content-editor.component.js";import S from"./__internal__/plugins/LinkMonitor/link-monitor.plugin.js";import"./__internal__/plugins/LinkPreviewer/link-previewer.style.js";import $ from"./__internal__/plugins/OnChange/on-change.plugin.js";import M from"./__internal__/plugins/Placeholder/placeholder.component.js";import B from"./__internal__/plugins/Toolbar/toolbar.component.js";import"./__internal__/plugins/useCursorAtEnd/index.js";import q from"./text-editor.context.js";import{StyledTextEditorWrapper as A,StyledWrapper as H,StyledEditorToolbarWrapper as I,StyledHeaderWrapper as D,StyledTextEditor as R,StyledFooterWrapper as F}from"./text-editor.style.js";import{createEmpty as U}from"./utils.js";import{HintText as z}from"../../__internal__/hint-text/hint-text.component.js";import G from"../../__internal__/validation-message/validation-message.component.js";import J from"../textbox/textbox.style.js";import"../../style/utils/filter-styled-system-padding-props.js";import K from"../../style/utils/filter-styled-system-margin-props.js";import N from"../../__internal__/utils/helpers/tags/tags.js";function Q(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function V(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){Q(e,r,t[r])}))}return e}let W=!1;const X=m(((m,Q)=>{var{characterLimit:X=3e3,error:Y,footer:Z,header:ee,inputHint:re,isOptional:te=!1,labelText:ne,namespace:oe=P,onBlur:ie,onCancel:ae,onChange:le,onFocus:se,onLinkAdded:ce,onSave:pe,placeholder:de,previews:ue=[],readOnly:me=!1,required:fe=!1,rows:ge,warning:_e,value:ve,customPlugins:he,validationMessagePositionTop:be=!0}=m,xe=function(e,r){if(null==e)return{};var t,n,o=function(e,r){if(null==e)return{};var t,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)t=i[n],r.indexOf(t)>=0||(o[t]=e[t]);return o}(e,r);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)t=i[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}(m,["characterLimit","error","footer","header","inputHint","isOptional","labelText","namespace","onBlur","onCancel","onChange","onFocus","onLinkAdded","onSave","placeholder","previews","readOnly","required","rows","warning","value","customPlugins","validationMessagePositionTop"]);!W&&te&&(W=!0,w.deprecate("`isOptional` is deprecated in TextEditor and support will soon be removed. If the value of this component is not required, use the `required` prop and set it to false instead."));const je=f(void 0),ye=O(),[Oe,we]=g(void 0),Pe=f(null),[Le,Ee]=g(!1);_(Q,(()=>({focus(){var e;null===(e=Pe.current)||void 0===e||e.focus()}})),[]),v((()=>{const e=null==Pe?void 0:Pe.current,r=()=>{Ee(!0)},t=()=>{Ee(!1)};return null==e||e.addEventListener("focus",r),null==e||e.addEventListener("blur",t),()=>{null==e||e.removeEventListener("focus",r),null==e||e.removeEventListener("blur",t)}}),[Pe]);const[ke,Ce]=g(!1),Te=h((()=>({namespace:oe,nodes:E,onError:e=>w.error(e.message),theme:L,editorState:ve,editable:!me})),[oe,me,ve]),Se=b((e=>{const r=e.read((()=>u().getChildren().map((e=>e.getTextContent())).join("\n\n")));if(le){const e=je.current?x(je.current):{};null==le||le(r,e)}if(X>0){const e=X-r.length;we(e<0?ye.textEditor.characterLimit(Math.abs(e)):void 0)}}),[X,ye.textEditor,le]),$e=b((()=>{var e;(null===(e=je.current)||void 0===e?void 0:e.isEditable())&&ae&&(Ce((e=>!e)),ae())}),[ae]);v((()=>{const e=ve||U();if(je.current){const r=je.current.parseEditorState(e);je.current.setEditorState(r)}}),[ke,ve]);const Me=h((()=>({namespace:oe,onCancel:ae?$e:void 0,onSave:pe})),[$e,oe,ae,pe]),Be=_e||Oe;return e(A,(qe=V({"data-role":`${oe}-editor-wrapper`,onBlur:e=>{e.currentTarget.contains(e.relatedTarget)||null==ie||ie(e)},onFocus:e=>{e.currentTarget.contains(e.relatedTarget)||null==se||se(e)}},K(xe),N("text-editor",xe)),Ae=null!=(Ae={children:r(q.Provider,{value:{onLinkAdded:ce},children:[e(y,{isRequired:fe,optional:te,labelId:`${oe}-label`,children:ne}),re&&e(z,{id:`${oe}-input-hint`,marginBottom:"var(--spacing100)",children:re}),r(n,{initialConfig:Te,children:[e(i,{editorRef:je}),r(H,{"data-role":`${oe}-wrapper`,children:[be&&r(t,{children:[e(G,{error:Y,warning:Be,validationId:`${oe}-validation-message`,"data-role":`${oe}-validation-message`,validationMessagePositionTop:be}),(Y||Be)&&e(J,{warning:!(Y||!Be)})]}),r(I,{"data-role":`${oe}-editor-toolbar-wrapper`,id:`${oe}-editor-toolbar-wrapper`,focused:Le,error:!!Y,children:[ee&&e(D,{"data-role":`${oe}-header-wrapper`,children:ee}),!me&&e(B,V({hasHeader:Boolean(ee)},Me)),r(R,{"data-role":`${oe}-editor`,children:[e(c,{contentEditable:e(T,{ref:Pe,inputHint:re,namespace:oe,previews:ue,rows:ge,readOnly:me,required:fe,error:!!Y,warning:!!_e||!!Oe,validationMessagePositionTop:be}),placeholder:e(M,{namespace:oe,text:de}),ErrorBoundary:a}),e(d,{}),e(l,{}),e(s,{}),e($,{onChange:Se}),e(p,{validateUrl:j}),e(o,{newTab:!0}),e(k,{}),he]}),Z&&e(F,{"data-role":`${oe}-footer-wrapper`,children:Z}),e(S,{})]}),!be&&r(t,{children:[e(G,{error:Y,warning:Be,validationId:`${oe}-validation-message`,"data-role":`${oe}-validation-message`,validationMessagePositionTop:be}),(Y||Be)&&e(J,{warning:!(Y||!Be)})]}),X>0&&!me&&e(C,{maxChars:X,namespace:oe})]})]})]})})?Ae:{},Object.getOwnPropertyDescriptors?Object.defineProperties(qe,Object.getOwnPropertyDescriptors(Ae)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(Ae)).forEach((function(e){Object.defineProperty(qe,e,Object.getOwnPropertyDescriptor(Ae,e))})),qe));var qe,Ae}));export{X as TextEditor,X as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{
|
|
1
|
+
import{paddingRightPropertyNames as t,paddingXPropertyNames as r,paddingNames as s,paddingLeftPropertyNames as p,paddingBottomPropertyNames as e,paddingYPropertyNames as n,paddingTopPropertyNames as o}from"../../../style/utils/filter-styled-system-padding-props.js";const l=[...p,...r,...s],d=[...t,...r,...s],i=[...o,...n,...s],a=[...e,...n,...s];var f=(t,r)=>{const s=r=>{const s=r.find((r=>t[r]));return s?t[s]:s};return r?{pr:s(l),pl:s(d)}:{pt:s(i),pb:s(a)}};export{f as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,Fragment as t,jsx as r}from"react/jsx-runtime";import o,{useRef as n,useState as i,useEffect as l,useCallback as c,useMemo as p}from"react";import s from"invariant";import{offset as a,flip as u,shift as f,
|
|
1
|
+
import{jsxs as e,Fragment as t,jsx as r}from"react/jsx-runtime";import o,{useRef as n,useState as i,useEffect as l,useCallback as c,useMemo as p}from"react";import s from"invariant";import{offset as a,flip as u,shift as f,arrow as m,limitShift as b,useFloating as d,autoUpdate as y}from"@floating-ui/react-dom";import O from"./tooltip.style.js";import g from"./tooltip-pointer.style.js";import{TOOLTIP_POSITIONS as j}from"./tooltip.config.js";import h from"../../__internal__/utils/helpers/tags/tags.js";import{Portal as v}from"../portal/portal.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 P(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){w(e,t,r[t])}))}return e}function x(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}function E(e,t){e&&("function"==typeof e&&e(t),"object"==typeof e&&"current"in e&&(e.current=t))}const S=o.forwardRef(((w,S)=>{var{children:C,isVisible:T,position:z="top",message:D,type:k,size:A="medium",isPartOfInput:I,inputSize:_="medium",id:L,bgColor:V,fontColor:M,flipOverrides:N,target:R}=w,q=function(e,t){if(null==e)return{};var r,o,n=function(e,t){if(null==e)return{};var r,o,n={},i=Object.keys(e);for(o=0;o<i.length;o++)r=i[o],t.indexOf(r)>=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(o=0;o<i.length;o++)r=i[o],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}(w,["children","isVisible","position","message","type","size","isPartOfInput","inputSize","id","bgColor","fontColor","flipOverrides","target"]);const B=n(null),F=void 0!==T,[G,H]=i(!1);let J=G;F&&(J=T);const K=n(void 0),Q=n(void 0);l((()=>()=>{clearTimeout(K.current),clearTimeout(Q.current)}),[]);const U=c((()=>H(!0)),[]),W=c((()=>H(!1)),[]),X=c((()=>{K.current=window.setTimeout(U,100)}),[U]),Y=c((()=>{Q.current=window.setTimeout(W,100)}),[W]);l((()=>{const e={mouseenter:X,mouseleave:Y,focus:U,blur:W},t=R||B.current;return F||Object.entries(e).forEach((([e,r])=>{null==t||t.addEventListener(e,r)})),()=>{F||Object.entries(e).forEach((([e,r])=>{null==t||t.removeEventListener(e,r)}))}}),[C,U,X,W,Y,F,R]);const Z=n(N);Z.current=N;const $=n(null),ee=c((e=>{let t=9;return I&&(t={small:5,medium:["top","bottom"].includes(e)?6:8,large:["top","bottom"].includes(e)?10:12}[_]),t}),[_,I]),te=p((()=>[a((({placement:e})=>({mainAxis:ee(e)}))),u({fallbackPlacements:Z.current}),f({padding:5,limiter:b({offset:({rects:e})=>({mainAxis:e.reference.height})})}),m({element:$})]),[ee,$]),{x:re,y:oe,reference:ne,floating:ie,strategy:le,placement:ce,middlewareData:pe}=d({placement:z,middleware:te,whileElementsMounted:y}),se={position:le,top:null!=oe?oe:0,left:null!=re?re:0},ae=c((e=>{ne(R||e),B.current=e,E(C.ref,e)}),[ne,C,R]),ue=c((e=>{ie(e),E(S,e)}),[ie,S]),fe={top:"bottom",right:"left",bottom:"top",left:"right"}[ce.split("-")[0]],{x:me,y:be}=pe.arrow||{},de={left:me,top:be,[fe]:"-6px"},ye=!N||Array.isArray(N)&&N.every((e=>j.includes(e)));return s(ye,'The flipOverrides prop supplied to Tooltip must be an array containing some or all of ["top", "bottom", "left", "right"].'),e(t,{children:[o.cloneElement(C,{ref:ae}),J?r(v,{children:e(O,x(P({"data-element":"tooltip","data-role":"tooltip",role:"tooltip",tabIndex:-1,type:k,size:A,id:L},h("tooltip",q)),{ref:ue,bgColor:V,fontColor:M,style:se,"data-placement":ce,children:[r(g,{type:k,ref:$,"data-element":"tooltip-pointer","data-role":"tooltip-pointer",bgColor:V,style:de}),D]}))}):null]})}));S.displayName="Tooltip";export{S as Tooltip,S as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e}from"react/jsx-runtime";import{useContext as r,
|
|
1
|
+
import{jsx as e}from"react/jsx-runtime";import{useContext as r,createContext as t,useState as n,useRef as d,useCallback as s}from"react";import i from"../../../../__internal__/utils/logger/index.js";const c=t(void 0),l=()=>r(c)||(i.error("useMenuFocus must be used within a MenuFocusProvider"),{expandedItems:[],expandItem:()=>{},focusedItemId:null,getRegisteredItems:()=>[],focusItem:()=>{},moveFocus:()=>{},registerMenuItem:()=>{}}),u=({children:r})=>{const[t,i]=n([]),[l,u]=n(null),o=d(new Map),I=s(((e,r,t)=>{if(o.current.set(e,{ref:r,parentId:t,childIds:[]}),t){const r=o.current.get(t);null==r||r.childIds.push(e)}}),[]),a=s((()=>Array.from(o.current.entries()).map((([e,{ref:r,parentId:t,childIds:n}])=>({id:e,ref:r,parentId:t,childIds:n})))),[]),f=s((e=>{var r;const t=o.current.get(e);(null==t||null===(r=t.ref)||void 0===r?void 0:r.current)&&(t.ref.current.focus(),u(e))}),[]),h=s(((e,r)=>{i(r?r=>[...r,e]:r=>r.filter((r=>r!==e)))}),[]),m=s((e=>{if(!l)return;const r=o.current.get(l);if(!r)return;let n=[],d=[],s=-1;switch(e){case"parent":r.parentId&&f(r.parentId);break;case"firstChild":r.childIds.length>0&&(t.includes(l)||h(l,!0),f(r.childIds[0]));break;case"lastChild":if(r.childIds.length>0){const e=r.childIds[r.childIds.length-1];if(e)if(t.includes(e)){const r=a().find((r=>r.id===e));r&&f(r.childIds[r.childIds.length-1])}else f(e)}break;default:if(n=Array.from(o.current.keys()),d=n.filter((e=>{const r=o.current.get(e);return!r||!r.parentId||t.includes(r.parentId)})),s=d.indexOf(l),-1!==s){const r="next"===e?(s+1)%d.length:(s-1+d.length)%d.length;f(d[r])}}}),[l,f,t,h,a]),g={expandedItems:t,expandItem:h,focusedItemId:l,focusItem:f,getRegisteredItems:a,registerMenuItem:I,moveFocus:m};return e(c.Provider,{value:g,children:r})};export{u as MenuFocusProvider,l as useMenuFocus};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,jsxs as n,Fragment as t}from"react/jsx-runtime";import r,{useRef as o,useContext as i,
|
|
1
|
+
import{jsx as e,jsxs as n,Fragment as t}from"react/jsx-runtime";import r,{useRef as o,useContext as i,createContext as c,useEffect as l,forwardRef as a,useMemo as d,useState as s}from"react";import{StyledResponsiveMenuListItem as p,StyledResponsiveMenuItem as u,StyledNestedMenuWrapper as h,StyledNestedMenu as m,StyledResponsiveMenuAction as f,StyledIcon as v,StyledMenuItemContent as b}from"./responsive-vertical-menu-item.style.js";import{useDepth as y,IncreaseDepth as O}from"../__internal__/depth.context.js";import{useMenuFocus as g}from"../__internal__/focus.context.js";import{useResponsiveVerticalMenu as j}from"../responsive-vertical-menu.context.js";import I from"../../../icon/icon.component.js";import w from"../../../../__internal__/utils/helpers/guid/index.js";function x(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function _(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{},r=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),r.forEach((function(n){x(e,n,t[n])}))}return e}function P(e,n){return n=null!=n?n:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):function(e){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);n.push.apply(n,t)}return n}(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})),e}function k(e,n){if(null==e)return{};var t,r,o=function(e,n){if(null==e)return{};var t,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)t=i[r],n.indexOf(t)>=0||(o[t]=e[t]);return o}(e,n);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)t=i[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}const C=c(void 0),D=({customIcon:t,depth:r,hasChildren:o,icon:i,label:c,responsive:l})=>n(b,t?{"data-component":"responsive-vertical-menu-custom-icon","data-role":"responsive-vertical-menu-custom-icon",depth:r,hasChildren:o,icon:!0,responsive:l,children:[t,c]}:{"data-component":"responsive-vertical-menu-icon","data-role":"responsive-vertical-menu-icon",depth:r,hasChildren:o,icon:!!i,responsive:l,children:[i&&e(I,{type:i}),c]}),$=a(((o,c)=>{var{children:a,customIcon:b,icon:O,id:I,href:w,label:x,onClick:$,rel:S,target:M}=o,K=k(o,["children","customIcon","icon","id","href","label","onClick","rel","target"]);const{activeMenuItem:A,containerRef:E,responsiveMode:F,setActiveMenuItem:q,reducedMotion:R}=j(),{expandItem:T,focusItem:z,getRegisteredItems:B,moveFocus:G,registerMenuItem:H}=g(),J=y(),L=(null==A?void 0:A.id)===I,N=r.Children.count(a)>0,Q=i(C),U=d((()=>F&&0===J),[J,F]),[V,W]=s(U&&N);l((()=>{H(I,c,Q)}),[I,Q,c,H]);const X=e=>{let n,t;switch(e.key){case"Tab":var r;if(t=(null===(r=E.current)||void 0===r?void 0:r.querySelectorAll(`[data-depth="${J}"]`))||[],n=Array.from(t),0===J&&N&&(null==A?void 0:A.id)===I&&(e.preventDefault(),G(e.shiftKey?"lastChild":"firstChild")),1===J){const t=n.findIndex((e=>e.id===I)),r=0===t;t===n.length-1&&(!N||N&&!V)&&(e.shiftKey||(e.preventDefault(),G("parent"))),r&&e.shiftKey&&(e.preventDefault(),G("parent"))}if(2===J&&n.findIndex((e=>e.id===I))===n.length-1){const n=B(),t=n.find((e=>e.id===Q)),r=n.find((e=>e.id===(null==t?void 0:t.parentId)));if(r){var o;const n=Array.from((null===(o=E.current)||void 0===o?void 0:o.querySelectorAll(`[data-depth="${J-1}"]`))||[]);n.findIndex((e=>e.id===Q))===n.length-1&&!e.shiftKey&&(e.preventDefault(),z(r.id))}}break;case"Enter":case" ":if(e.preventDefault(),U)return;if(N)if(0!==J||F)W(!V),T(I,!V);else{const e=(null==A?void 0:A.id)===I;q(e?null:{id:I,label:x,children:a})}else w&&"Enter"===e.key&&(window.location.href=w)}};return e(p,{children:N?n(t,{children:[n(u,P(_({active:L,"aria-expanded":L||V,"data-component":`responsive-vertical-menu-item-${I}`,"data-depth":J,"data-role":`responsive-vertical-menu-item-${I}`,depth:J,hasIcon:!!O||!!b,id:I,onClick:()=>{if(!U){if(0!==J||F)W(!V),T(I,!V);else{const e=(null==A?void 0:A.id)===I;q(e?null:{id:I,label:x,children:a})}z(I)}},onKeyDown:e=>{F||X(e)},onFocus:()=>z(I),ref:c,responsive:F,tabIndex:U?-1:0,type:"button"},K),{children:[e(D,{customIcon:b,depth:J,hasChildren:!0,icon:O,label:x,responsive:F}),!U&&e(v,{"data-component":"responsive-vertical-menu-expander-icon","data-role":"responsive-vertical-menu-expander-icon",depth:J,expanded:V||L,reduceMotion:!!R,type:J>=1?"chevron_down_thick":"chevron_right_thick"})]})),V&&e(h,{"data-component":`${I}-nested-menu-wrapper`,"data-role":`${I}-nested-menu-wrapper`,depth:J,hasIcon:!!O||!!b,responsive:F,children:e(m,{"data-component":`${I}-nested-menu`,"data-role":`${I}-nested-menu`,depth:J,hasIcon:!!O||!!b,id:`${I}-nested-menu`,responsive:F,children:e(C.Provider,{value:I,children:a})})})]}):e(f,P(_({"data-component":`responsive-vertical-menu-item-${I}`,"data-depth":J,"data-role":`responsive-vertical-menu-item-${I}`,depth:J,href:w,id:I,onClick:$,onFocus:()=>z(I),onKeyDown:e=>{F||X(e)},ref:c,rel:S,responsive:F,tabIndex:0,target:M},K),{children:e(D,{customIcon:b,depth:J,hasChildren:!1,icon:O,label:x,responsive:F})}))})})),S=n=>{var{children:t,id:r,label:c}=n,a=k(n,["children","id","label"]);const d=y(),s=o(null),{registerMenuItem:p}=g(),u=i(C),h=o(r||w());return l((()=>{const e=h.current;p(e,s,u)}),[u,p]),e($,P(_({id:h.current,label:c},a),{"data-depth":d,ref:s,children:t&&e(C.Provider,{value:r,children:e(O,{children:t})})}))};export{S as ResponsiveVerticalMenuItem,S as default};
|
package/esm/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu.context.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e}from"react/jsx-runtime";import{createContext as n,
|
|
1
|
+
import{jsx as e}from"react/jsx-runtime";import{createContext as n,useState as t,useRef as r,useContext as o}from"react";const i=n(null),u=()=>{const e=o(i);if(null===e)throw new Error("useResponsiveVerticalMenu must be used within a ResponsiveVerticalMenuProvider");return e},s=({children:n})=>{const[o,u]=t(null),s=r(null),l=r(null),c=r(null),[d,m]=t(!1),[v,a]=t(!1);return e(i.Provider,{value:{activeMenuItem:o,buttonRef:s,containerRef:l,menuRef:c,reducedMotion:v,responsiveMode:d,setActiveMenuItem:u,setReducedMotion:a,setResponsiveMode:m},children:n})};export{i as ResponsiveVerticalMenuContext,s as ResponsiveVerticalMenuProvider,u as useResponsiveVerticalMenu};
|
|
@@ -21,8 +21,12 @@ export interface FormProps extends SpaceProps, TagProps {
|
|
|
21
21
|
rightSideButtons?: React.ReactNode;
|
|
22
22
|
/** Save button to be rendered */
|
|
23
23
|
saveButton?: React.ReactNode;
|
|
24
|
+
/** Custom content to render in the form's footer */
|
|
25
|
+
footerChildren?: React.ReactNode;
|
|
24
26
|
/** Enables the sticky footer. */
|
|
25
27
|
stickyFooter?: boolean;
|
|
28
|
+
/** Background variant for the sticky footer. */
|
|
29
|
+
stickyFooterVariant?: "light" | "grey";
|
|
26
30
|
/** The total number of warnings present in the form */
|
|
27
31
|
warningCount?: number;
|
|
28
32
|
/** Height of the form (any valid CSS value) */
|
|
@@ -33,7 +37,7 @@ export interface FormProps extends SpaceProps, TagProps {
|
|
|
33
37
|
footerPadding?: PaddingProps;
|
|
34
38
|
}
|
|
35
39
|
export declare const Form: {
|
|
36
|
-
({ children, saveButton, leftSideButtons, rightSideButtons, errorCount, warningCount, onSubmit, buttonAlignment, stickyFooter, fieldSpacing, noValidate, height, fullWidthButtons, footerPadding, ...rest }: FormProps): React.JSX.Element;
|
|
40
|
+
({ children, saveButton, leftSideButtons, rightSideButtons, errorCount, warningCount, onSubmit, buttonAlignment, footerChildren, stickyFooter, stickyFooterVariant, fieldSpacing, noValidate, height, fullWidthButtons, footerPadding, ...rest }: FormProps): React.JSX.Element;
|
|
37
41
|
displayName: string;
|
|
38
42
|
};
|
|
39
43
|
export default Form;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react/jsx-runtime"),e=require("react"),r=require("../../__internal__/utils/helpers/tags/tags.js"),n=require("./__internal__/form-summary.component.js"),o=require("./form.style.js"),i=require("./form.config.js"),l=require("../modal/__internal__/modal.context.js");function u(t,e,r){return e in t?Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):t[e]=r,t}function a(t){for(var e=1;e<arguments.length;e++){var r=null!=arguments[e]?arguments[e]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(t){return Object.getOwnPropertyDescriptor(r,t).enumerable})))),n.forEach((function(e){u(t,e,r[e])}))}return t}function s(t,e){return e=null!=e?e:{},Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(e)):function(t){var e=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e.push.apply(e,r)}return e}(Object(e)).forEach((function(r){Object.defineProperty(t,r,Object.getOwnPropertyDescriptor(e,r))})),t}const c=u=>{var{children:c,saveButton:f,leftSideButtons:d,rightSideButtons:m,errorCount:
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react/jsx-runtime"),e=require("react"),r=require("../../__internal__/utils/helpers/tags/tags.js"),n=require("./__internal__/form-summary.component.js"),o=require("./form.style.js"),i=require("./form.config.js"),l=require("../modal/__internal__/modal.context.js");function u(t,e,r){return e in t?Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):t[e]=r,t}function a(t){for(var e=1;e<arguments.length;e++){var r=null!=arguments[e]?arguments[e]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(t){return Object.getOwnPropertyDescriptor(r,t).enumerable})))),n.forEach((function(e){u(t,e,r[e])}))}return t}function s(t,e){return e=null!=e?e:{},Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(e)):function(t){var e=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e.push.apply(e,r)}return e}(Object(e)).forEach((function(r){Object.defineProperty(t,r,Object.getOwnPropertyDescriptor(e,r))})),t}const c=u=>{var{children:c,saveButton:f,leftSideButtons:d,rightSideButtons:m,errorCount:y,warningCount:b,onSubmit:g,buttonAlignment:p="right",footerChildren:h,stickyFooter:j,stickyFooterVariant:O="light",fieldSpacing:S=3,noValidate:x=!0,height:F,fullWidthButtons:P=!1,footerPadding:w={}}=u,_=function(t,e){if(null==t)return{};var r,n,o=function(t,e){if(null==t)return{};var r,n,o={},i=Object.keys(t);for(n=0;n<i.length;n++)r=i[n],e.indexOf(r)>=0||(o[r]=t[r]);return o}(t,e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);for(n=0;n<i.length;n++)r=i[n],e.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(t,r)&&(o[r]=t[r])}return o}(u,["children","saveButton","leftSideButtons","rightSideButtons","errorCount","warningCount","onSubmit","buttonAlignment","footerChildren","stickyFooter","stickyFooterVariant","fieldSpacing","noValidate","height","fullWidthButtons","footerPadding"]);const v=e.useRef(null),k=e.useRef(null),{isInModal:B}=e.useContext(l.default),C=!!(h||f||d||m||y||b);return t.jsxs(o.StyledForm,s(a({ref:v,className:j?"sticky":"",stickyFooter:j,onSubmit:g,"data-component":"form",noValidate:x,height:F,isInModal:B},_,r.default("form",_)),{children:[t.jsx(o.StyledFormContent,{"data-element":"form-content","data-role":"form-content",stickyFooter:j,tabIndex:-1,isInModal:B,fieldSpacing:i.formSpacing[S],children:c}),C&&t.jsx(o.StyledFormFooter,s(a(s(a({"data-element":"form-footer","data-role":"form-footer",ref:k,hasFooterChildren:!!h,stickyFooter:j},j&&{stickyFooterVariant:O}),{buttonAlignment:p,fullWidthButtons:P}),w),{children:h||t.jsxs(t.Fragment,{children:[d&&t.jsx(o.StyledLeftButtons,{"data-role":"form-left-buttons",buttonAlignment:p,children:d}),t.jsx(n.default,{fullWidth:P,errorCount:y,warningCount:b,children:f}),m&&t.jsx(o.StyledRightButtons,{"data-role":"form-right-buttons",buttonAlignment:p,children:m})]})}))]}))};c.displayName="Form",exports.Form=c,exports.default=c;
|
|
@@ -6,7 +6,9 @@ interface StyledFormContentProps {
|
|
|
6
6
|
}
|
|
7
7
|
export declare const StyledFormContent: import("styled-components").StyledComponent<"div", any, StyledFormContentProps, never>;
|
|
8
8
|
interface StyledFormFooterProps {
|
|
9
|
+
hasFooterChildren?: boolean;
|
|
9
10
|
stickyFooter?: boolean;
|
|
11
|
+
stickyFooterVariant?: "light" | "grey";
|
|
10
12
|
fullWidthButtons?: boolean;
|
|
11
13
|
buttonAlignment?: FormButtonAlignment;
|
|
12
14
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var t=require("styled-components"),e=require("styled-system"),i=require("../../__internal__/form-field/form-field.style.js"),s=require("../../style/themes/apply-base-theme.js"),
|
|
1
|
+
"use strict";var t=require("styled-components"),e=require("styled-system"),i=require("../../__internal__/form-field/form-field.style.js"),s=require("../../style/themes/apply-base-theme.js"),o=require("../inline-inputs/inline-inputs.style.js"),l=require("../select/select.style.js"),r=require("../select/multi-select/multi-select.style.js"),n=require("../switch/switch.style.js");function a(t){return t&&t.__esModule?t:{default:t}}var d=a(t);const c=d.default.div.withConfig({displayName:"form.style__StyledFormContent",componentId:"sc-a81d1b22-0"})((({stickyFooter:e,isInModal:i})=>e&&i&&t.css(["flex-grow:1;min-height:0;overflow-y:auto;"])),(({fieldSpacing:e})=>e&&t.css(["--fieldSpacing:",";","{margin-top:var(--spacing000);}"," ",","," ",","," ",","," ","{margin-bottom:var(--spacing000);}"],e,i.default,o.default,i.default,o.default,l.default,o.default,r.StyledSelectMultiSelect,n.default,i.default))),f=d.default.div.attrs(s.default).withConfig({displayName:"form.style__StyledFormFooter",componentId:"sc-a81d1b22-1"})([""," "," "," ",""],(({hasFooterChildren:e})=>!e&&t.css(["align-items:center;display:flex;flex-wrap:wrap;gap:var(--sizing200);"])),(({buttonAlignment:e})=>"right"===e&&t.css(["justify-content:flex-end;"])),(({stickyFooter:e,stickyFooterVariant:i,fullWidthButtons:s})=>t.css([""," "," ",""],!e&&t.css(["margin-top:48px;"]),e&&t.css(["background-color:",";box-shadow:var(--boxShadow150);box-sizing:border-box;"," padding:16px 32px;width:100%;z-index:1000;position:sticky;bottom:0;"],"light"===i?"var(--colorsUtilityYang100)":"var(--colorsUtilityMajor025)","grey"===i&&"border-top: 1px solid var(--colorsUtilityMajor050);"),s&&t.css(["flex-direction:column;align-items:stretch;"]))),e.padding),u=d.default.form.attrs(s.default).withConfig({displayName:"form.style__StyledForm",componentId:"sc-a81d1b22-2"})([""," "," ",""],e.space,(({height:e})=>e&&t.css(["height:",";"],e)),(({stickyFooter:e,isInModal:i})=>e&&t.css(["display:flex;flex-direction:column;position:relative;",""],i&&t.css(["flex-grow:1;min-height:0;height:100%;"])))),y=d.default.div.withConfig({displayName:"form.style__StyledRightButtons",componentId:"sc-a81d1b22-3"})(["display:flex;gap:var(--sizing200);",""],(({buttonAlignment:t})=>"left"===t&&"flex-grow: 1;")),p=d.default.div.withConfig({displayName:"form.style__StyledLeftButtons",componentId:"sc-a81d1b22-4"})(["display:flex;justify-content:flex-end;gap:var(--sizing200);",""],(({buttonAlignment:t})=>"right"===t&&"flex-grow: 1;"));exports.StyledForm=u,exports.StyledFormContent=c,exports.StyledFormFooter=f,exports.StyledLeftButtons=p,exports.StyledRightButtons=y;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./sidebar-header.component.js");exports.default=e.default;
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./sidebar-header.component.js");exports.SidebarSubHeader=e.SidebarSubHeader,exports.default=e.default;
|
|
@@ -7,9 +7,22 @@ export interface SidebarHeaderProps extends PaddingProps {
|
|
|
7
7
|
id: string;
|
|
8
8
|
/** Close icon button to be rendered */
|
|
9
9
|
closeIcon?: React.ReactNode;
|
|
10
|
+
/** Header background variant for the sidebar. */
|
|
11
|
+
headerVariant?: "light" | "dark";
|
|
12
|
+
}
|
|
13
|
+
export interface SidebarSubHeaderProps extends PaddingProps {
|
|
14
|
+
/** This component supports children. */
|
|
15
|
+
children?: React.ReactNode;
|
|
16
|
+
/** A custom id. */
|
|
17
|
+
id: string;
|
|
10
18
|
}
|
|
11
19
|
declare const SidebarHeader: {
|
|
12
|
-
({ children, id, closeIcon, ...rest }: SidebarHeaderProps): React.JSX.Element;
|
|
20
|
+
({ children, id, closeIcon, headerVariant, ...rest }: SidebarHeaderProps): React.JSX.Element;
|
|
21
|
+
displayName: string;
|
|
22
|
+
};
|
|
23
|
+
declare const SidebarSubHeader: {
|
|
24
|
+
({ children, id, ...rest }: SidebarSubHeaderProps): React.JSX.Element;
|
|
13
25
|
displayName: string;
|
|
14
26
|
};
|
|
15
27
|
export default SidebarHeader;
|
|
28
|
+
export { SidebarSubHeader };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime");require("react");var r=require("./sidebar-header.style.js");function t(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime");require("react");var r=require("./sidebar-header.style.js");function t(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function n(e){for(var r=1;r<arguments.length;r++){var n=null!=arguments[r]?arguments[r]:{},a=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(a=a.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),a.forEach((function(r){t(e,r,n[r])}))}return e}function a(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 i(e,r){if(null==e)return{};var t,n,a=function(e,r){if(null==e)return{};var t,n,a={},i=Object.keys(e);for(n=0;n<i.length;n++)t=i[n],r.indexOf(t)>=0||(a[t]=e[t]);return a}(e,r);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)t=i[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}const o=t=>{var{children:o,id:c,closeIcon:d,headerVariant:l}=t,s=i(t,["children","id","closeIcon","headerVariant"]);return e.jsxs(r.default,a(n({hasClose:!!d,"data-component":"sidebar-header","data-role":"sidebar-header",p:"27px 32px 32px",headerVariant:l},s),{children:[e.jsx("div",{"data-element":"sidebar-heading",id:c,children:o}),d]}))},c=t=>{var{children:o,id:c}=t,d=i(t,["children","id"]);return e.jsx(r.StyledSidebarSubHeader,a(n({"data-component":"sidebar-subheader",p:"var(--sizing100) var(--sizing400)",id:c},d),{children:o}))};o.displayName="SidebarHeader",c.displayName="SidebarSubHeader",exports.SidebarSubHeader=c,exports.default=o;
|
|
@@ -2,5 +2,10 @@ declare const StyledSidebarHeader: import("styled-components").StyledComponent<"
|
|
|
2
2
|
theme: object;
|
|
3
3
|
} & {
|
|
4
4
|
hasClose?: boolean | undefined;
|
|
5
|
+
headerVariant?: "light" | "dark" | undefined;
|
|
6
|
+
}, "theme">;
|
|
7
|
+
declare const StyledSidebarSubHeader: import("styled-components").StyledComponent<"div", any, {
|
|
8
|
+
theme: object;
|
|
5
9
|
}, "theme">;
|
|
6
10
|
export default StyledSidebarHeader;
|
|
11
|
+
export { StyledSidebarSubHeader };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("styled-system"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("styled-system"),o=require("../../../../style/themes/apply-base-theme.js"),r=require("../../../icon-button/icon-button.style.js"),i=require("../../../icon/icon.style.js");function a(e){return e&&e.__esModule?e:{default:e}}var s=a(e);const d=s.default.div.attrs(o.default).withConfig({displayName:"sidebar-header.style__StyledSidebarHeader",componentId:"sc-e19ac77-0"})(["background-color:",";box-shadow:inset 0 -1px 0 0 var(--colorsUtilityMajor100);box-sizing:border-box;width:100%;color:var(--colorsActionMinorYin090);transition:all 0.2s ease;"," ",' div[data-element="sidebar-heading"]{width:100%;}'],(({headerVariant:e})=>"light"===e?"var(--colorsUtilityYang100)":"var(--colorsUtilityYin100)"),t.padding,(({hasClose:t,headerVariant:o})=>t&&e.css(["display:flex;justify-content:space-between;> ",":first-of-type{"," position:absolute;z-index:1;right:25px;}"],r.default,"dark"===o&&e.css(["","{color:var(--colorsUtilityYang080);}"],i.default)))),l=s.default.div.attrs(o.default).withConfig({displayName:"sidebar-header.style__StyledSidebarSubHeader",componentId:"sc-e19ac77-1"})(["box-sizing:border-box;width:100%;color:var(--colorsActionMinorYin090);background-color:var(--colorsUtilityMajor050);border-bottom:1px solid var(--colorsUtilityMajor075);"," transition:all 0.2s ease;"],t.padding);exports.StyledSidebarSubHeader=l,exports.default=d;
|
|
@@ -33,6 +33,10 @@ export interface SidebarProps extends PaddingProps, TagProps, WidthProps, Pick<M
|
|
|
33
33
|
bespokeFocusTrap?: (ev: KeyboardEvent, firstElement?: HTMLElement, lastElement?: HTMLElement) => void;
|
|
34
34
|
/** Node that will be used as sidebar header. */
|
|
35
35
|
header?: React.ReactNode;
|
|
36
|
+
/** Node that will be used as sidebar subheader. */
|
|
37
|
+
subHeader?: React.ReactNode;
|
|
38
|
+
/** Header background variant for the sidebar. */
|
|
39
|
+
headerVariant?: "light" | "dark";
|
|
36
40
|
/** A custom close event handler */
|
|
37
41
|
onCancel?: (ev: React.KeyboardEvent<HTMLElement> | KeyboardEvent | React.MouseEvent<HTMLElement>) => void;
|
|
38
42
|
/** Sets the open state of the modal */
|
|
@@ -49,6 +53,8 @@ export interface SidebarProps extends PaddingProps, TagProps, WidthProps, Pick<M
|
|
|
49
53
|
focusableSelectors?: string;
|
|
50
54
|
/** Padding to be set on the Sidebar header */
|
|
51
55
|
headerPadding?: PaddingProps;
|
|
56
|
+
/** Padding to be set on the Sidebar subheader */
|
|
57
|
+
subHeaderPadding?: PaddingProps;
|
|
52
58
|
/**
|
|
53
59
|
* @private
|
|
54
60
|
* @ignore
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("../modal/modal.component.js"),a=require("./sidebar.style.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("../modal/modal.component.js"),a=require("./sidebar.style.js"),n=require("../icon-button/icon-button.component.js"),o=require("../icon/icon.component.js"),l=require("../../__internal__/focus-trap/focus-trap.component.js"),i=require("./__internal__/sidebar-header/sidebar-header.component.js"),s=require("../../__internal__/utils/helpers/guid/index.js"),d=require("../../hooks/__internal__/useLocale/useLocale.js"),c=require("../../style/utils/filter-styled-system-padding-props.js"),u=require("../../hooks/__internal__/useModalAria/useModalAria.js"),b=require("./__internal__/sidebar.context.js");function f(e){return e&&e.__esModule?e:{default:e}}function p(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function y(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},a=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(a=a.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),a.forEach((function(r){p(e,r,t[r])}))}return e}function j(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}const O=f(r).default.forwardRef(((f,p)=>{var{"aria-describedby":O,"aria-label":m,"aria-labelledby":h,"data-element":_="sidebar","data-role":g,open:P,bespokeFocusTrap:S,disableAutoFocus:x=!1,disableEscKey:v=!1,enableBackgroundUI:w=!1,header:k,headerVariant:q="light",subHeader:C,position:F="right",size:E="medium",children:M,onCancel:I,role:R="dialog",focusFirstElement:H,focusableContainers:A,focusableSelectors:D,width:N,headerPadding:z={},subHeaderPadding:B={},topModalOverride:K,restoreFocusOnClose:L=!0,className:T}=f,U=function(e,r){if(null==e)return{};var t,a,n=function(e,r){if(null==e)return{};var t,a,n={},o=Object.keys(e);for(a=0;a<o.length;a++)t=o[a],r.indexOf(t)>=0||(n[t]=e[t]);return n}(e,r);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a<o.length;a++)t=o[a],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(n[t]=e[t])}return n}(f,["aria-describedby","aria-label","aria-labelledby","data-element","data-role","open","bespokeFocusTrap","disableAutoFocus","disableEscKey","enableBackgroundUI","header","headerVariant","subHeader","position","size","children","onCancel","role","focusFirstElement","focusableContainers","focusableSelectors","width","headerPadding","subHeaderPadding","topModalOverride","restoreFocusOnClose","className"]);const V=d.default(),{current:W}=r.useRef(s.default()),{current:G}=r.useRef(s.default()),J=r.useRef(null),Q=r.useCallback((e=>{J.current=e,p&&("object"==typeof p&&(p.current=e),"function"==typeof p&&p(e))}),[p]),X=u.default(J),Y=()=>I?e.jsx(n.default,{"aria-label":V.sidebar.ariaLabels.close(),onClick:I,"data-element":"close",children:e.jsx(o.default,{type:"close"})}):null,Z=e.jsxs(a.StyledSidebar,{"aria-modal":!w&&X,"aria-describedby":O||G,"aria-label":m,"aria-labelledby":h||m?h:W,"data-component":"sidebar","data-element":_,"data-role":g,ref:Q,position:F,size:E,onCancel:I,role:R,width:N,className:T,children:[k&&e.jsx(i.default,j(y({headerVariant:q,closeIcon:Y()},z),{id:W,children:k})),C&&e.jsx(i.SidebarSubHeader,j(y({},B),{id:G,children:C})),!k&&Y(),e.jsx(a.StyledSidebarContent,j(y({"data-element":"sidebar-content","data-role":"sidebar-content"},c.default(U)),{children:e.jsx(b.default.Provider,{value:{isInSidebar:!0},children:M})}))]});return e.jsx(t.default,{open:P,onCancel:I,disableEscKey:v,enableBackgroundUI:w,topModalOverride:K,restoreFocusOnClose:L,children:w?Z:e.jsx(l.default,{wrapperRef:J,isOpen:P,additionalWrapperRefs:A,focusableSelectors:D,focusFirstElement:H,autoFocus:!x,bespokeTrap:S,children:Z})})}));O.displayName="Sidebar",exports.Sidebar=O,exports.default=O;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "carbon-react",
|
|
3
|
-
"version": "155.
|
|
3
|
+
"version": "155.4.0",
|
|
4
4
|
"description": "A library of reusable React components for easily building user interfaces.",
|
|
5
5
|
"files": [
|
|
6
6
|
"lib",
|
|
@@ -74,7 +74,7 @@
|
|
|
74
74
|
"@rollup/plugin-commonjs": "^28.0.2",
|
|
75
75
|
"@rollup/plugin-json": "^6.1.0",
|
|
76
76
|
"@rollup/plugin-node-resolve": "^16.0.0",
|
|
77
|
-
"@rollup/plugin-terser": "^0.
|
|
77
|
+
"@rollup/plugin-terser": "^0.4.4",
|
|
78
78
|
"@rollup/plugin-url": "^8.0.2",
|
|
79
79
|
"@sage/design-tokens": "~4.29.0",
|
|
80
80
|
"@semantic-release/changelog": "^6.0.3",
|
|
@@ -172,7 +172,7 @@
|
|
|
172
172
|
"react-markdown": "^8.0.7",
|
|
173
173
|
"remark-gfm": "^4.0.0",
|
|
174
174
|
"rimraf": "^3.0.2",
|
|
175
|
-
"rollup": "^
|
|
175
|
+
"rollup": "^4.44.2",
|
|
176
176
|
"rollup-plugin-copy": "^3.5.0",
|
|
177
177
|
"rollup-plugin-ignore": "^1.0.10",
|
|
178
178
|
"rollup-plugin-postcss": "^4.0.2",
|