carbon-react 158.7.3 → 158.9.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/__internal__/focus-trap/focus-trap.component.js +1 -1
- package/esm/__internal__/modal/index.d.ts +2 -0
- package/esm/__internal__/modal/index.js +1 -0
- package/esm/__internal__/modal/modal-manager.js +1 -0
- package/esm/__internal__/modal/modal.component.js +1 -0
- package/esm/__internal__/popover/popover.component.js +1 -1
- package/esm/components/advanced-color-picker/advanced-color-picker.component.d.ts +1 -1
- package/esm/components/button/__internal__/button.context.d.ts +8 -0
- package/esm/components/button/__internal__/button.context.js +1 -0
- package/esm/components/button/button.component.js +1 -1
- package/esm/components/dialog/dialog.component.d.ts +1 -1
- package/esm/components/dialog/dialog.component.js +1 -1
- package/esm/components/form/form.component.js +1 -1
- package/esm/components/loader/__next__/index.d.ts +2 -0
- package/esm/components/loader/__next__/index.js +1 -0
- package/esm/components/loader/__next__/internal/ring-loader.component.d.ts +8 -0
- package/esm/components/loader/__next__/internal/ring-loader.component.js +1 -0
- package/esm/components/loader/__next__/internal/standalone-loader.component.d.ts +4 -0
- package/esm/components/loader/__next__/internal/standalone-loader.component.js +1 -0
- package/esm/components/loader/__next__/internal/star.component.d.ts +9 -0
- package/esm/components/loader/__next__/internal/star.component.js +1 -0
- package/esm/components/loader/__next__/internal/star.style.d.ts +4 -0
- package/esm/components/loader/__next__/internal/star.style.js +1 -0
- package/esm/components/loader/__next__/internal/stars-loader.component.d.ts +4 -0
- package/esm/components/loader/__next__/internal/stars-loader.component.js +1 -0
- package/esm/components/loader/__next__/loader.component.d.ts +33 -0
- package/esm/components/loader/__next__/loader.component.js +1 -0
- package/esm/components/loader/__next__/loader.config.d.ts +5 -0
- package/esm/components/loader/__next__/loader.style.d.ts +57 -0
- package/esm/components/loader/__next__/loader.style.js +1 -0
- package/esm/components/modal/index.d.ts +8 -2
- package/esm/components/modal/index.js +1 -1
- package/esm/components/popover-container/popover-container.component.js +1 -1
- package/esm/components/sidebar/sidebar.component.d.ts +1 -1
- package/esm/components/sidebar/sidebar.component.js +1 -1
- package/esm/components/text-editor/__internal__/__ui__/ContentEditor/content-editor.component.js +1 -1
- package/esm/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu.component.js +1 -1
- package/esm/global.d.ts +1 -1
- package/esm/hooks/__internal__/useModalManager/useModalManager.js +1 -1
- package/esm/index.d.ts +2 -0
- package/esm/index.js +1 -1
- package/lib/__internal__/focus-trap/focus-trap.component.js +1 -1
- package/lib/__internal__/modal/index.d.ts +2 -0
- package/lib/__internal__/modal/index.js +1 -0
- package/lib/__internal__/modal/modal-manager.js +1 -0
- package/lib/__internal__/modal/modal.component.js +1 -0
- package/lib/__internal__/modal/package.json +6 -0
- package/lib/__internal__/popover/popover.component.js +1 -1
- package/lib/components/advanced-color-picker/advanced-color-picker.component.d.ts +1 -1
- package/lib/components/button/__internal__/button.context.d.ts +8 -0
- package/lib/components/button/__internal__/button.context.js +1 -0
- package/lib/components/button/button.component.js +1 -1
- package/lib/components/dialog/dialog.component.d.ts +1 -1
- package/lib/components/dialog/dialog.component.js +1 -1
- package/lib/components/form/form.component.js +1 -1
- package/lib/components/loader/__next__/index.d.ts +2 -0
- package/lib/components/loader/__next__/index.js +1 -0
- package/lib/components/loader/__next__/internal/ring-loader.component.d.ts +8 -0
- package/lib/components/loader/__next__/internal/ring-loader.component.js +1 -0
- package/lib/components/loader/__next__/internal/standalone-loader.component.d.ts +4 -0
- package/lib/components/loader/__next__/internal/standalone-loader.component.js +1 -0
- package/lib/components/loader/__next__/internal/star.component.d.ts +9 -0
- package/lib/components/loader/__next__/internal/star.component.js +1 -0
- package/lib/components/loader/__next__/internal/star.style.d.ts +4 -0
- package/lib/components/loader/__next__/internal/star.style.js +1 -0
- package/lib/components/loader/__next__/internal/stars-loader.component.d.ts +4 -0
- package/lib/components/loader/__next__/internal/stars-loader.component.js +1 -0
- package/lib/components/loader/__next__/loader.component.d.ts +33 -0
- package/lib/components/loader/__next__/loader.component.js +1 -0
- package/lib/components/loader/__next__/loader.config.d.ts +5 -0
- package/lib/components/loader/__next__/loader.style.d.ts +57 -0
- package/lib/components/loader/__next__/loader.style.js +1 -0
- package/lib/components/loader/__next__/package.json +6 -0
- package/lib/components/modal/index.d.ts +8 -2
- package/lib/components/modal/index.js +1 -1
- package/lib/components/popover-container/popover-container.component.js +1 -1
- package/lib/components/sidebar/sidebar.component.d.ts +1 -1
- package/lib/components/sidebar/sidebar.component.js +1 -1
- package/lib/components/text-editor/__internal__/__ui__/ContentEditor/content-editor.component.js +1 -1
- package/lib/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu.component.js +1 -1
- package/lib/global.d.ts +1 -1
- package/lib/hooks/__internal__/useModalManager/useModalManager.js +1 -1
- package/lib/index.d.ts +2 -0
- package/lib/index.js +1 -1
- package/package.json +1 -1
- package/esm/components/modal/__internal__/modal-manager.js +0 -1
- package/esm/components/modal/modal.component.js +0 -1
- package/lib/components/modal/__internal__/modal-manager.js +0 -1
- package/lib/components/modal/modal.component.js +0 -1
- /package/esm/{components/modal/__internal__ → __internal__/modal}/modal-manager.d.ts +0 -0
- /package/esm/{components → __internal__}/modal/modal.component.d.ts +0 -0
- /package/esm/{components/modal/__internal__ → __internal__/modal}/modal.context.d.ts +0 -0
- /package/esm/{components/modal/__internal__ → __internal__/modal}/modal.context.js +0 -0
- /package/esm/{components → __internal__}/modal/modal.style.d.ts +0 -0
- /package/esm/{components → __internal__}/modal/modal.style.js +0 -0
- /package/lib/{components/modal/__internal__ → __internal__/modal}/modal-manager.d.ts +0 -0
- /package/lib/{components → __internal__}/modal/modal.component.d.ts +0 -0
- /package/lib/{components/modal/__internal__ → __internal__/modal}/modal.context.d.ts +0 -0
- /package/lib/{components/modal/__internal__ → __internal__/modal}/modal.context.js +0 -0
- /package/lib/{components → __internal__}/modal/modal.style.d.ts +0 -0
- /package/lib/{components → __internal__}/modal/modal.style.js +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as t}from"react/jsx-runtime";import n,{useRef as r,useState as o,useContext as c,useMemo as i,useEffect as l,useCallback as a}from"react";import{onTabGuardFocus as u,defaultFocusableSelectors as s,setElementFocus as d,trapFunction as m}from"./focus-trap-utils.js";import f from"
|
|
1
|
+
import{jsxs as e,jsx as t}from"react/jsx-runtime";import n,{useRef as r,useState as o,useContext as c,useMemo as i,useEffect as l,useCallback as a}from"react";import{onTabGuardFocus as u,defaultFocusableSelectors as s,setElementFocus as d,trapFunction as m}from"./focus-trap-utils.js";import f from"../modal/modal.context.js";import b from"../../hooks/__internal__/usePrevious/index.js";import p from"../../components/carbon-provider/__internal__/top-modal.context.js";function v(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}const g="tab-guard-top",O="tab-guard-bottom",y=({children:y,autoFocus:h=!0,focusableSelectors:j,focusFirstElement:E,bespokeTrap:x,wrapperRef:w,isOpen:P,additionalWrapperRefs:S})=>{const A=r(null),[_,I]=o(),{isAnimationComplete:k=!0,triggerRefocusFlag:F}=c(f),{topModal:D}=c(p),L=!D||w.current&&D.contains(w.current),$=i((()=>(null==S?void 0:S.length)?[w,...S]:[w]),[S,w]),R=i((()=>u($,j,"top")),[j,$]),C=i((()=>u($,j,"bottom")),[j,$]);l((()=>(null==S||S.forEach((e=>{const{current:t}=e;if(t){var n,r;if(!(null===(n=t.previousElementSibling)||void 0===n?void 0:n.matches(`[data-element=${g}]`))){const n=document.createElement("div");n.tabIndex=0,n.dataset.element=g,t.insertAdjacentElement("beforebegin",n),n.addEventListener("focus",R(e))}if(!(null===(r=t.nextElementSibling)||void 0===r?void 0:r.matches(`[data-element=${O}]`))){const n=document.createElement("div");n.tabIndex=0,n.dataset.element=O,t.insertAdjacentElement("afterend",n),n.addEventListener("focus",C(e))}}})),()=>{null==S||S.forEach((e=>{var t,n;const r=null===(t=e.current)||void 0===t?void 0:t.previousElementSibling;(null==r?void 0:r.matches(`[data-element=${g}]`))&&r.remove();const o=null===(n=e.current)||void 0===n?void 0:n.nextElementSibling;(null==o?void 0:o.matches(`[data-element=${O}]`))&&o.remove()}))})),[S,R,C]);const q=h&&P&&k,B=b(q),M=a((e=>{const t=[];return $.forEach((n=>{n.current&&t.push(...Array.from(n.current.querySelectorAll(e)).filter((e=>-1!==Number(e.tabIndex))))})),t}),[$]);l((()=>{if(q&&!B){const e=E&&"current"in E?E.current:E,t=M(s).find((e=>"true"===e.getAttribute("data-has-autofocus"))),n=e||t||w.current;n&&d(n)}}),[q,B,M,E,w]),l((()=>{const e=e=>{if(!L||!P)return;const t=M(s);m(e,t,document.activeElement===w.current,j,x)};return document.addEventListener("keydown",e,!0),function(){document.removeEventListener("keydown",e,!0)}}),[x,w,j,M,L,P]);const N=a((()=>{const e=M(j||s),t=null==e?void 0:e.find((e=>e===document.activeElement));t&&I(t)}),[M,j]),T=a((()=>{var e;if(_&&!_.hasAttribute("disabled"))d(_);else if(null===(e=w.current)||void 0===e?void 0:e.hasAttribute("tabindex"))d(w.current);else{const e=M(j||s);e.length&&d(e[0])}}),[_,w,j,M]);l((()=>{F&&T()}),[F,T]);const[W,z]=o(0);l((()=>{P||z(0)}),[P]);const G=()=>{P&&z(void 0)},H=e=>{return t=function(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){v(e,t,n[t])}))}return e}({},e&&{tabIndex:W,onBlur:G}),n=null!=(n={onFocus:N})?n:{},Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t.push.apply(t,n)}return t}(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))})),t;var t,n},J=n.Children.map(y,(e=>{var t;const r=e;return n.cloneElement(r,H(void 0===(null==r||null===(t=r.props)||void 0===t?void 0:t.tabIndex)))}));return e("div",{ref:A,children:[P&&t("div",{"data-element":g,tabIndex:0,onFocus:R(w)}),J,P&&t("div",{"data-element":O,tabIndex:0,onFocus:C(w)})]})};export{O as TAB_GUARD_BOTTOM,g as TAB_GUARD_TOP,y as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export{default}from"./modal.component.js";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{getWindow as t}from"../dom/globals.js";function o(t,o,s){return o in t?Object.defineProperty(t,o,{value:s,enumerable:!0,configurable:!0,writable:!0}):t[o]=s,t}class s{getTopModal(){return this.modalList.length?this.modalList.slice().reverse().find((t=>t.topModalOverride))||this.modalList[this.modalList.length-1]:{}}isTopmost(t){const{modal:o}=this.getTopModal();return!(!t||!o)&&t===o}removeModal(t,o=!0){const s=this.modalList.findIndex((({modal:o})=>o===t));if(-1===s)return;if(this.modalList.splice(s,1),this.callTopModalSetters(),!this.modalList.length)return;const{setTriggerRefocusFlag:l}=this.getTopModal();l&&o&&l(!0)}clearList(){const o=t(),s=[];o&&(o.__CARBON_INTERNALS_MODAL_LIST=s),this.modalList=s,this.callTopModalSetters()}callTopModalSetters(){const o=t();if(null==o?void 0:o.__CARBON_INTERNALS_MODAL_SETTER_LIST){var s;const t=(null===(s=this.getTopModal())||void 0===s?void 0:s.modal)||null;for(const s of o.__CARBON_INTERNALS_MODAL_SETTER_LIST)s(t)}}constructor(){o(this,"modalList",void 0),o(this,"addModal",((t,o,s)=>{if(!t)return;const{modal:l,setTriggerRefocusFlag:e,topModalOverride:i}=this.getTopModal();!i&&l&&e&&e(!1),this.modalList.push({modal:t,setTriggerRefocusFlag:o,topModalOverride:s}),this.callTopModalSetters()}));const s=t();s?(s.__CARBON_INTERNALS_MODAL_LIST||(s.__CARBON_INTERNALS_MODAL_LIST=[]),this.modalList=s.__CARBON_INTERNALS_MODAL_LIST):this.modalList=[]}}const l=new s;export{s as ModalManagerInstance,l as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{jsx as e,jsxs as o}from"react/jsx-runtime";import{useRef as r,useState as t,useEffect as n,useCallback as l}from"react";import{TransitionGroup as a,CSSTransition as i}from"react-transition-group";import c from"../../hooks/__internal__/useScrollBlock/useScrollBlock.js";import{Portal as s}from"../../components/portal/portal.js";import{getDocument as d}from"../dom/globals.js";import m from"../utils/helpers/events/events.js";import p from"../../hooks/__internal__/useModalManager/useModalManager.js";import{StyledModal as u,StyledModalBackground as f}from"./modal.style.js";import b from"./modal.context.js";function O(e,o,r){return o in e?Object.defineProperty(e,o,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[o]=r,e}function g(e){for(var o=1;o<arguments.length;o++){var r=null!=arguments[o]?arguments[o]:{},t=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(t=t.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),t.forEach((function(o){O(e,o,r[o])}))}return e}const y=300,j=O=>{var{children:j,"data-element":v,"data-role":h="modal",open:P,onCancel:k,disableEscKey:w=!1,disableClose:E,enableBackgroundUI:M=!1,topModalOverride:S,restoreFocusOnClose:C=!0}=O,_=function(e,o){if(null==e)return{};var r,t,n=function(e,o){if(null==e)return{};var r,t,n={},l=Object.keys(e);for(t=0;t<l.length;t++)r=l[t],o.indexOf(r)>=0||(n[r]=e[r]);return n}(e,o);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(t=0;t<l.length;t++)r=l[t],o.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}(O,["children","data-element","data-role","open","onCancel","disableEscKey","disableClose","enableBackgroundUI","topModalOverride","restoreFocusOnClose"]);const x=r(null),I=r(null),R=r(null),[B,D]=t(!1),[F,N]=t(!1),{blockScroll:T,allowScroll:K}=c();n((()=>{M||(P?T():K())}),[K,T,M,P]),n((()=>()=>{M||K()}),[K,M]);const A=l((e=>{k&&!E&&!w&&m.isEscKey(e)&&(e.stopImmediatePropagation(),k(e))}),[E,w,k]),U=d();let q,z;return p({open:P,closeModal:A,modalRef:x,setTriggerRefocusFlag:N,topModalOverride:S,focusCallToActionElement:C&&U?U.activeElement:void 0}),P&&(q=M?null:e(f,{ref:I,"data-element":"modal-background","data-role":"modal-background",transitionName:"modal-background",transitionTime:y}),z=j),e(s,{children:o(u,(G=g({"data-component":"modal","data-element":v,"data-role":h,"data-state":P?"open":"closed",transitionName:"modal",transitionTime:y,topModalOverride:S,ref:x},_),H={children:[e(a,{children:q&&e(i,{nodeRef:I,appear:!0,classNames:"modal-background",timeout:y,onEntered:()=>D(!0),onExiting:()=>D(!1),children:q},"modal")}),e(a,{children:z&&e(i,{nodeRef:R,appear:!0,classNames:"modal",timeout:y,children:e(b.Provider,{value:{isAnimationComplete:B,triggerRefocusFlag:F,isInModal:!0},children:e("div",{ref:R,children:z})})})})]},H=null!=H?H:{},Object.getOwnPropertyDescriptors?Object.defineProperties(G,Object.getOwnPropertyDescriptors(H)):function(e){var o=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);o.push.apply(o,r)}return o}(Object(H)).forEach((function(e){Object.defineProperty(G,e,Object.getOwnPropertyDescriptor(H,e))})),G))});var G,H};export{j as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e}from"react/jsx-runtime";import r,{useRef as o,useContext as
|
|
1
|
+
import{jsx as e}from"react/jsx-runtime";import r,{useRef as o,useContext as t,useEffect as n}from"react";import l from"react-dom";import{flip as i}from"@floating-ui/dom";import a from"../../hooks/__internal__/useFloating/useFloating.js";import{StyledPopoverContent as c,StyledBackdrop as d}from"./popover.style.js";import m from"../../style/design-tokens/carbon-scoped-tokens-provider/carbon-scoped-tokens-provider.component.js";import s from"../modal/modal.context.js";const p=[i({fallbackStrategy:"initialPlacement"})],u=({children:i,placement:u,disablePortal:f,reference:g,middleware:h=p,disableBackgroundUI:v,isOpen:b=!0,animationFrame:k,popoverStrategy:y="absolute",childRefOverride:j})=>{var O;const F=o(null),{isInModal:_}=t(s),x=null===(O=g.current)||void 0===O?void 0:O.closest("[role='dialog']"),C=_&&x?x:document.body;F.current||f||(F.current=document.createElement("div"),C.appendChild(F.current));const P=j||r.Children.only(i).ref,w=o(null),E=P||w;let I;return I=P?i:r.cloneElement(i,{ref:E}),a({isOpen:b,reference:g,floating:E,placement:u,middleware:h,animationFrame:k,strategy:y}),n((()=>()=>{!f&&F.current&&(C.removeChild(F.current),F.current=null)}),[f,C]),v||(I=e(c,{isOpen:b,children:I})),v&&(I=e(c,{isOpen:b,children:e(d,{"data-role":"popup-backdrop",children:I})})),f?I:l.createPortal(e(m,{children:I}),F.current)};export{u as default};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { MarginProps } from "styled-system";
|
|
3
|
-
import { ModalProps } from "
|
|
3
|
+
import { ModalProps } from "../../__internal__/modal";
|
|
4
4
|
import { TagProps } from "../../__internal__/utils/helpers/tags";
|
|
5
5
|
export interface AdvancedColor {
|
|
6
6
|
label: string;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
export interface ButtonContextProps {
|
|
3
|
+
isInsideTypicalButton?: boolean;
|
|
4
|
+
isInsideDestructiveButton?: boolean;
|
|
5
|
+
isInsidePrimaryButton?: boolean;
|
|
6
|
+
}
|
|
7
|
+
declare const _default: React.Context<ButtonContextProps>;
|
|
8
|
+
export default _default;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import t from"react";var e=t.createContext({});export{e as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as
|
|
1
|
+
import{jsx as t,jsxs as e,Fragment as o}from"react/jsx-runtime";import i,{useContext as r,useState as n,useCallback as l}from"react";import a from"invariant";import c from"../icon/icon.component.js";import s,{StyledButtonMainText as p,StyledButtonSubtext as u}from"./button.style.js";import b from"../../__internal__/utils/helpers/tags/tags.js";import{TooltipProvider as d}from"../../__internal__/tooltip-provider/index.js";import f from"../button-bar/__internal__/button-bar.context.js";import y from"../split-button/__internal__/split-button.context.js";import m from"../batch-selection/__internal__/batch-selection.context.js";import h from"./__internal__/button.context.js";function g(t,e,o){return e in t?Object.defineProperty(t,e,{value:o,enumerable:!0,configurable:!0,writable:!0}):t[e]=o,t}function O(t){for(var e=1;e<arguments.length;e++){var o=null!=arguments[e]?arguments[e]:{},i=Object.keys(o);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(o).filter((function(t){return Object.getOwnPropertyDescriptor(o,t).enumerable})))),i.forEach((function(e){g(t,e,o[e])}))}return t}function j(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 o=Object.getOwnPropertySymbols(t);e.push.apply(e,o)}return e}(Object(e)).forEach((function(o){Object.defineProperty(t,o,Object.getOwnPropertyDescriptor(e,o))})),t}function v({iconType:i,iconPosition:r,size:n,subtext:l,children:a,disabled:s,buttonType:b,iconTooltipMessage:f,iconTooltipPosition:y,tooltipTarget:m,destructive:g}){const v={"aria-hidden":!0,disabled:s,color:"primary"===b?"--colorsActionMajorYang100":b.includes("gradient")?"--colorsActionMinorYin090":"--colorsActionMajor500",bg:"transparent"},P=void 0!==a&&!1!==a;return e(o,{children:[i&&"before"===r&&P&&t(c,O({type:i},v)),P&&e("span",{children:[t(p,{"data-element":"main-text",children:t(h.Provider,{value:{isInsideTypicalButton:!g,isInsideDestructiveButton:g,isInsidePrimaryButton:"primary"===b},children:a})}),"large"===n&&t(u,{"data-element":"subtext","data-role":"subtext",children:l})]}),i&&!P&&t(d,{disabled:s,focusable:!1,target:m,children:t(c,j(O({type:i},v),{tooltipMessage:f,tooltipPosition:y}))}),i&&"after"===r&&a&&t(c,O({type:i},v))]})}const P=i.forwardRef(((e,o)=>{var{"aria-describedby":i,"aria-label":c,"aria-labelledby":p,buttonType:u="secondary",children:d,destructive:h=!1,disabled:g=!1,isWhite:P=!1,fullWidth:_=!1,href:T,iconPosition:x="before",iconTooltipMessage:w,iconTooltipPosition:k,iconType:W,m:S=0,noWrap:D,onClick:M,px:z,rel:B,size:C="medium",subtext:E="",target:I}=e,A=function(t,e){if(null==t)return{};var o,i,r=function(t,e){if(null==t)return{};var o,i,r={},n=Object.keys(t);for(i=0;i<n.length;i++)o=n[i],e.indexOf(o)>=0||(r[o]=t[o]);return r}(t,e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(t);for(i=0;i<n.length;i++)o=n[i],e.indexOf(o)>=0||Object.prototype.propertyIsEnumerable.call(t,o)&&(r[o]=t[o])}return r}(e,["aria-describedby","aria-label","aria-labelledby","buttonType","children","destructive","disabled","isWhite","fullWidth","href","iconPosition","iconTooltipMessage","iconTooltipPosition","iconType","m","noWrap","onClick","px","rel","size","subtext","target"]);const{buttonType:Y,size:K,iconPosition:N,fullWidth:R}=r(f),{batchSelectionDisabled:q}=r(m),F=Y||u,G=K||C,H=N||x,J=R||_,L=g||q;a(void 0!==d||!!W,"Either prop `iconType` must be defined or this node must have children."),E&&a("large"===G,"subtext prop has no effect unless the button is large.");const[Q,U]=n(null),{inSplitButton:V,onChildButtonClick:X}=r(y);let Z;switch(G){case"small":Z=2;break;case"large":Z=4;break;default:Z=3}const $=l((t=>{U(t),o&&("object"==typeof o&&(o.current=t),"function"==typeof o&&o(t))}),[o]),tt=void 0!==d&&!1!==d;return t(s,j(O({"aria-label":!tt&&W?c||W:c,"aria-labelledby":p,"aria-describedby":i,as:!L&&T?"a":"button",onKeyDown:T?t=>{" "===t.key&&(t.preventDefault(),null==Q||Q.click())}:void 0,onClick:t=>{var e;null==Q||Q.focus({preventScroll:!0}),V?null==X||null===(e=X(M))||void 0===e||e(t):M&&M(t)},draggable:!1,buttonType:F,disabled:L,destructive:h,isWhite:P,type:T?void 0:"button",iconType:W,size:G,px:null!=z?z:Z,m:S,noWrap:D,iconOnly:!tt&&!!W,iconPosition:H,target:I,rel:B,fullWidth:J},b("button",A),A,T&&{href:T}),{ref:$,children:v({iconType:W,iconPosition:H,size:G,subtext:E,children:d,disabled:L,buttonType:F,iconTooltipMessage:w,iconTooltipPosition:k,destructive:h,tooltipTarget:Q})}))}));P.displayName="Button";export{P as default};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React, { RefObject } from "react";
|
|
2
2
|
import { DialogSizes } from "./dialog.config";
|
|
3
|
-
import { ModalProps } from "
|
|
3
|
+
import { ModalProps } from "../../__internal__/modal";
|
|
4
4
|
import { TagProps } from "../../__internal__/utils/helpers/tags";
|
|
5
5
|
type PaddingValues = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
|
|
6
6
|
export interface ContentPaddingInterface {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,jsxs as t}from"react/jsx-runtime";import{forwardRef as o,useRef as r,useImperativeHandle as l}from"react";import{DialogPositioner as n,StyledDialog as a,StyledDialogContent as i,StyledDialogTitle as s}from"./dialog.style.js";import{Heading as c}from"../heading/heading.component.js";import d from"../icon/icon.component.js";import p from"../icon-button/icon-button.component.js";import u from"
|
|
1
|
+
import{jsx as e,jsxs as t}from"react/jsx-runtime";import{forwardRef as o,useRef as r,useImperativeHandle as l}from"react";import{DialogPositioner as n,StyledDialog as a,StyledDialogContent as i,StyledDialogTitle as s}from"./dialog.style.js";import{Heading as c}from"../heading/heading.component.js";import d from"../icon/icon.component.js";import p from"../icon-button/icon-button.component.js";import u from"../../__internal__/modal/modal.component.js";import b from"../../__internal__/focus-trap/focus-trap.component.js";import f from"../../__internal__/full-screen-heading/full-screen-heading.component.js";import g from"../../__internal__/utils/helpers/guid/index.js";import m from"../../__internal__/utils/helpers/tags/tags.js";import h from"../../__internal__/utils/logger/index.js";import y from"../../hooks/__internal__/useLocale/useLocale.js";import O from"../../hooks/__internal__/useModalAria/useModalAria.js";function j(e,t,o){return t in e?Object.defineProperty(e,t,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[t]=o,e}function _(e){for(var t=1;t<arguments.length;t++){var o=null!=arguments[t]?arguments[t]:{},r=Object.keys(o);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(o).filter((function(e){return Object.getOwnPropertyDescriptor(o,e).enumerable})))),r.forEach((function(t){j(e,t,o[t])}))}return e}function C(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 o=Object.getOwnPropertySymbols(e);t.push.apply(t,o)}return t}(Object(t)).forEach((function(o){Object.defineProperty(e,o,Object.getOwnPropertyDescriptor(t,o))})),e}let v=!1,P=!1;const w=o(((o,j)=>{var{className:w,"data-component":S="dialog","data-element":k="dialog","data-role":F,children:x,open:I,height:E,size:D="medium",title:M,disableEscKey:B,subtitle:T,disableAutoFocus:A=!1,focusFirstElement:R,focusableSelectors:z,onCancel:K,showCloseIcon:L=!0,bespokeFocusTrap:N,disableClose:V,help:H,highlightVariant:U="default",role:$="dialog",contentPadding:W,greyBackground:Y=!1,focusableContainers:q,topModalOverride:G,closeButtonDataProps:J,restoreFocusOnClose:Q=!0,"aria-labelledby":X,"aria-describedby":Z,"aria-label":ee,pagesStyling:te,headerChildren:oe,disableContentPadding:re,contentRef:le,fullscreen:ne=!1}=o,ae=function(e,t){if(null==e)return{};var o,r,l=function(e,t){if(null==e)return{};var o,r,l={},n=Object.keys(e);for(r=0;r<n.length;r++)o=n[r],t.indexOf(o)>=0||(l[o]=e[o]);return l}(e,t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);for(r=0;r<n.length;r++)o=n[r],t.indexOf(o)>=0||Object.prototype.propertyIsEnumerable.call(e,o)&&(l[o]=e[o])}return l}(o,["className","data-component","data-element","data-role","children","open","height","size","title","disableEscKey","subtitle","disableAutoFocus","focusFirstElement","focusableSelectors","onCancel","showCloseIcon","bespokeFocusTrap","disableClose","help","highlightVariant","role","contentPadding","greyBackground","focusableContainers","topModalOverride","closeButtonDataProps","restoreFocusOnClose","aria-labelledby","aria-describedby","aria-label","pagesStyling","headerChildren","disableContentPadding","contentRef","fullscreen"]);const ie=y(),se=r(null),ce=r(null),de=r(null),{current:pe}=r(g()),{current:ue}=r(g()),be=O(se);!v&&V&&(v=!0,h.deprecate("The disableClose prop in Dialog is deprecated and will soon be removed.")),!P&&te&&(P=!0,h.deprecate("The pagesStyling prop in Dialog is deprecated and will soon be removed.")),l(j,(()=>({focus(){var e;null===(e=se.current)||void 0===e||e.focus()}})),[]);const fe=L&&K&&e(p,C(_({"aria-label":ie.dialog.ariaLabels.close(),disabled:V,onClick:K},m("close",_({"data-element":"close"},J))),{children:e(d,{type:"close"})}));let ge=E;E&&E.match(/px$/)&&(ge=E.replace("px",""));const me={"aria-describedby":T&&"string"==typeof T?ue:Z,"aria-label":ee,"aria-labelledby":M&&"string"==typeof M?pe:X};return e(u,C(_({className:w?`${w} carbon-dialog`:"carbon-dialog",disableClose:V,disableEscKey:B,onCancel:K,open:I,restoreFocusOnClose:Q,topModalOverride:G},m("dialog",ae),ae),{children:e(b,{additionalWrapperRefs:q,autoFocus:!A,bespokeTrap:N,focusableSelectors:z,focusFirstElement:R,isOpen:I,wrapperRef:se,children:e(n,{fullscreen:ne,children:t(a,C(_(C(_({"aria-modal":!("dialog"!==$||!be)||void 0},me),{backgroundColor:Y?"var(--colorsUtilityMajor025)":"var(--colorsUtilityYang100)","data-component":S,"data-element":k,"data-role":F,dialogHeight:ge,fullscreen:ne,highlightVariant:U,pagesStyling:te,ref:se,role:$,size:D,tabIndex:-1}),W),{children:[M||oe?ne?t(f,{hasContent:!!M,hasCloseButton:L,ref:ce,children:["string"==typeof M?e(c,{"data-element":"dialog-title",title:M,titleId:pe,subheader:T,subtitleId:ue,divider:!1,help:H}):M,oe]}):e(s,{hasSubtitle:!!T,ref:de,showCloseIcon:L,children:"string"==typeof M?e(c,{"data-element":"dialog-title",divider:!1,help:H,subheader:T,subtitleId:ue,title:M,titleId:pe}):M}):null,fe,e(i,C(_({},W),{"data-role":"dialog-content",disableContentPadding:re,fullscreen:ne,hasHeader:void 0!==M,tabIndex:-1,ref:le,children:x}))]}))})})}))}));export{w as Dialog,w as default};
|
|
@@ -1 +1 @@
|
|
|
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"
|
|
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"../../__internal__/modal/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};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export{Loader as default}from"./loader.component.js";
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { LoaderProps } from "../loader.component";
|
|
3
|
+
declare const RingLoader: ({ inverse, size, variant, hasMotion, isTracked, animationTime, loaderLabel, showLabel, isSuccess, isError, isInsideTypicalButton, isInsideDestructiveButton, isInsidePrimaryButton, }: LoaderProps & {
|
|
4
|
+
isInsideTypicalButton?: boolean;
|
|
5
|
+
isInsideDestructiveButton?: boolean;
|
|
6
|
+
isInsidePrimaryButton?: boolean;
|
|
7
|
+
}) => React.JSX.Element;
|
|
8
|
+
export default RingLoader;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{jsxs as e,jsx as i}from"react/jsx-runtime";import"react";import{StyledRingLoaderWrapper as r,StyledRingCircleSvg as a,StyledLoaderLabel as s}from"../loader.style.js";import t from"../../../../hooks/__internal__/useLocale/useLocale.js";const n=e=>e||.8,o=({inverse:o,size:l,variant:d,hasMotion:c,isTracked:u,animationTime:m,loaderLabel:p,showLabel:v,isSuccess:B,isError:I,isInsideTypicalButton:y,isInsideDestructiveButton:T,isInsidePrimaryButton:h})=>{const k=t(),f=d&&["stacked","inline"].includes(d)?d:"stacked",g=l&&["extra-small","small","large"].includes(l)?l:"medium";return e(r,{loaderVariant:d,"data-role":"ring-loader-container",children:[e(a,{inverse:o,role:"presentation",size:g,variant:f,hasMotion:c,isTracked:u,animationTime:n(m),viewBox:"0 0 24 24",isInsideTypicalButton:y,isInsideDestructiveButton:T,isInsidePrimaryButton:h,isSuccess:B,isError:I,children:[i("circle",{"data-role":"outer-arc"}),i("circle",{"data-role":"inner-arc"})]}),v&&i(s,{inverse:o,"data-role":"loader-label",variant:"span",loaderVariant:f,loaderType:"ring",size:g,isInsideTypicalButton:y,isInsideDestructiveButton:T,isInsidePrimaryButton:h,children:p||(null==k?void 0:k.loader.loading())})]})};export{o as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{jsxs as a,Fragment as e,jsx as r}from"react/jsx-runtime";import"react";import{OuterBar as i,InnerBar as o,StyledLoaderLabel as n}from"../loader.style.js";import l from"../../../../hooks/__internal__/useLocale/useLocale.js";const t=({size:t,variant:s,inverse:d,loaderLabel:m,showLabel:c,animationTime:p,hasMotion:v})=>{const u=l(),h="typical"===s||"ai"===s?s:"typical",b="small"===t||"large"===t?t:"medium";return a(e,{children:[r(i,{"data-role":"outer-bar",size:b,variant:h,inverse:!!d,children:r(o,{"data-role":"inner-bar",size:b,variant:h,inverse:!!d,animationTime:(a=>a||2)(p),hasMotion:v})}),c&&r(n,{inverse:d,"data-role":"loader-label",variant:"span",loaderVariant:s,loaderType:"standalone",size:t,children:m||(null==u?void 0:u.loader.loading())})]})};export{t as default};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
interface StarProps {
|
|
2
|
+
starContainerClassName: "star-1" | "star-2" | "star-3";
|
|
3
|
+
gradientId: "gradient1" | "gradient2" | "gradient3";
|
|
4
|
+
}
|
|
5
|
+
declare const Star: {
|
|
6
|
+
({ starContainerClassName, gradientId, }: StarProps): JSX.Element;
|
|
7
|
+
displayName: string;
|
|
8
|
+
};
|
|
9
|
+
export default Star;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{jsx as a,jsxs as e}from"react/jsx-runtime";import"react";import{StyledLoaderStarContainer as t,StyledStarSVG as l,GradientStopTop as r,GradientStopBottom as s}from"./star.style.js";const c=({starContainerClassName:c,gradientId:i})=>a(t,{"data-component":"star",role:"presentation",className:c,children:e(l,{className:"ai-star-svg",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 217 216",children:[a("path",{className:"ai-star-path",fill:"#000",fillRule:"evenodd",d:"M108.502 215.994c-.166.006-.334.006-.502.006-7.218 0-11.975-3.217-15.497-8.335-4.396-5.656-7.56-13.591-10.338-21.896l-.597-1.807-.667-2.063-.91-2.87-1.225-3.904c-1.831-5.82-3.65-11.42-5.751-16.135-1.456-2.661-3.075-5.078-4.921-7.146-.356-.391-.72-.777-1.094-1.156-4.054-4.038-9.808-7.093-16.262-9.726-14.49-4.937-33.33-8.698-43.486-17.634C2.766 119.712 0 114.918 0 108l.003-.413c.108-6.697 2.852-11.372 7.25-14.916 10.155-8.935 28.995-12.696 43.485-17.633C57.192 72.405 62.946 69.35 67 65.312c.373-.38.738-.765 1.094-1.156 1.846-2.068 3.465-4.485 4.922-7.145 2.567-5.764 4.713-12.849 6.976-20.04l.91-2.87.666-2.063.338-1.028c2.84-8.586 6.063-16.843 10.598-22.675C95.954 3.32 100.592.13 107.57.004L108 0c.168 0 .336 0 .502.006L109 0l.405.003c6.999.119 11.645 3.316 15.102 8.347 5.071 6.529 8.5 16.09 11.592 25.75l.335 1.054 2.362 7.501c1.645 5.178 3.304 10.125 5.19 14.358 1.456 2.66 3.074 5.075 4.92 7.142.356.392.72.778 1.094 1.157 4.054 4.038 9.808 7.093 16.262 9.726 14.49 4.937 33.33 8.698 43.486 17.634C214.234 96.288 217 101.082 217 108c0 6.918-2.766 11.712-7.252 15.328-10.156 8.936-28.996 12.697-43.486 17.634-6.454 2.633-12.208 5.688-16.262 9.726-.373.38-.738.765-1.094 1.157-1.846 2.067-3.464 4.482-4.92 7.142-1.886 4.233-3.545 9.18-5.19 14.358l-2.362 7.5-.335 1.054c-3.091 9.66-6.521 19.222-11.592 25.751-3.524 5.127-8.282 8.35-15.507 8.35l-.498-.006Z"}),a("defs",{children:e("linearGradient",{id:i,x1:"0%",y1:"0%",x2:"100%",y2:"100%",children:[a(r,{offset:"0%"}),a(s,{offset:"100%"})]})})]})});c.displayName="Star";export{c as default};
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
export declare const StyledStarSVG: import("styled-components").StyledComponent<"svg", any, {}, never>;
|
|
2
|
+
export declare const GradientStopTop: import("styled-components").StyledComponent<"stop", any, {}, never>;
|
|
3
|
+
export declare const GradientStopBottom: import("styled-components").StyledComponent<"stop", any, {}, never>;
|
|
4
|
+
export declare const StyledLoaderStarContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import a,{keyframes as t}from"styled-components";const o=t(["0%{transform:translate3d(0px,0px,0px) scale(0.3);opacity:0;}10%{transform:translate3d(0px,0px,0px) scale(0.3);opacity:0;}20%{transform:translate3d(0px,0px,0px) scale(0.6);opacity:1;}35%{transform:translate3d(0px,0px,0px) scale(0.6);opacity:1;}55%{transform:translate3d(16px,-12px,0px) scale(1.4);opacity:1;}60%{transform:translate3d(16px,-12px,0px) scale(1.4);opacity:1;}90%{transform:translate3d(0px,-24px,0px) scale(0.8);opacity:1;}100%{transform:translate3d(0px,-24px,0px) scale(0.6);opacity:0;}"]),i=t(["0%{stop-color:#13a038;}10%{stop-color:#13a038;}50%{stop-color:#0092db;}90%{stop-color:#8f49fe;}100%{stop-color:#8f49fe;}"]),s=t(["0%{stop-color:#13a038;}10%{stop-color:#13a038;}50%{stop-color:#13a038;}90%{stop-color:#0092db;}100%{stop-color:#0092db;}"]),n="3s",r=a.svg.withConfig({displayName:"star.style__StyledStarSVG",componentId:"sc-1b60e449-0"})(["animation:"," "," ease-in-out forwards infinite;height:var(--sizing200);opacity:0;width:var(--sizing200);"],o,n),e=a.stop.withConfig({displayName:"star.style__GradientStopTop",componentId:"sc-1b60e449-1"})(["animation:"," "," ease-in-out forwards infinite;"],i,n),p=a.stop.withConfig({displayName:"star.style__GradientStopBottom",componentId:"sc-1b60e449-2"})(["animation:"," "," ease-in-out forwards infinite;"],s,n),l=a.div.withConfig({displayName:"star.style__StyledLoaderStarContainer",componentId:"sc-1b60e449-3"})(["bottom:0;height:var(--sizing200);left:0;position:absolute;width:var(--sizing200);&.star-1{.ai-star-path{fill:url(#gradient1);}","{animation-delay:-2s;}#gradient1{","{animation-delay:-2s;}","{animation-delay:-2s;}}}&.star-2{.ai-star-path{fill:url(#gradient2);}","{animation-delay:-1s;}#gradient2{","{animation-delay:-1s;}","{animation-delay:-1s;}}}&.star-3{.ai-star-path{fill:url(#gradient3);}","{animation-delay:0s;}#gradient3{","{animation-delay:0s;}","{animation-delay:0s;}}}"],r,e,p,r,e,p,r,e,p);export{p as GradientStopBottom,e as GradientStopTop,l as StyledLoaderStarContainer,r as StyledStarSVG};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{jsxs as a,jsx as r}from"react/jsx-runtime";import"react";import e from"./star.component.js";import{StyledStarLoaderWrapper as t,StyledStars as o,StyledLoaderLabel as n}from"../loader.style.js";import s from"../../../../hooks/__internal__/useLocale/useLocale.js";const l=({loaderLabel:l,showLabel:i})=>{const d=s();return a(t,{children:[a(o,{children:[r(e,{starContainerClassName:"star-1",gradientId:"gradient1"}),r(e,{starContainerClassName:"star-2",gradientId:"gradient2"}),r(e,{starContainerClassName:"star-3",gradientId:"gradient3"})]}),i&&r(n,{"data-role":"loader-label",variant:"span",loaderType:"star",children:l||(null==d?void 0:d.loader.loading())})]})};export{l as default};
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { MarginProps } from "styled-system";
|
|
3
|
+
import { TagProps } from "../../../__internal__/utils/helpers/tags/tags";
|
|
4
|
+
type LOADER_VARIANTS = "typical" | "ai" | "stacked" | "inline";
|
|
5
|
+
type LOADER_SIZES = "extra-small" | "small" | "medium" | "large";
|
|
6
|
+
type LOADER_TYPES = "standalone" | "ring" | "star";
|
|
7
|
+
type CommonLoaderProps = {
|
|
8
|
+
/** Specify a label for the loader*/
|
|
9
|
+
loaderLabel?: string;
|
|
10
|
+
/** Specify if the label should be visible or not */
|
|
11
|
+
showLabel?: boolean;
|
|
12
|
+
/** If set to `false` all motion will be suspended */
|
|
13
|
+
hasMotion?: boolean;
|
|
14
|
+
/** If set to `true` the animation type will become tracked, this is used specifically for when wait times are predictable */
|
|
15
|
+
isTracked?: boolean;
|
|
16
|
+
/** Specify a custom animation time for the loader */
|
|
17
|
+
animationTime?: number;
|
|
18
|
+
/** Toggle the inverse color scheme */
|
|
19
|
+
inverse?: boolean;
|
|
20
|
+
/** The loader type can be specified in order to change the loader */
|
|
21
|
+
loaderType?: LOADER_TYPES;
|
|
22
|
+
/** The size prop allows a specific size to be set ranging from `extra-small` to `large` */
|
|
23
|
+
size?: LOADER_SIZES;
|
|
24
|
+
/** Toggle between the different Loader variants */
|
|
25
|
+
variant?: LOADER_VARIANTS;
|
|
26
|
+
/** Enable the success state for the ring loader when it is tracked */
|
|
27
|
+
isSuccess?: boolean;
|
|
28
|
+
/** Enable the error state for the ring loader when it is tracked */
|
|
29
|
+
isError?: boolean;
|
|
30
|
+
};
|
|
31
|
+
export type LoaderProps = MarginProps & TagProps & CommonLoaderProps;
|
|
32
|
+
export declare const Loader: ({ animationTime, hasMotion, isTracked, loaderLabel, showLabel, loaderType, size, variant, inverse, isSuccess, isError, ...rest }: LoaderProps) => React.JSX.Element;
|
|
33
|
+
export default Loader;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{jsx as e}from"react/jsx-runtime";import{useContext as r}from"react";import t from"../../../__internal__/utils/helpers/tags/tags.js";import o from"../../../hooks/__internal__/useLocale/useLocale.js";import n from"../../../hooks/useMediaQuery/useMediaQuery.js";import"../../../style/utils/filter-styled-system-padding-props.js";import i from"../../../style/utils/filter-styled-system-margin-props.js";import{StyledLoader as s,StyledLabel as a}from"./loader.style.js";import l from"./internal/standalone-loader.component.js";import c from"./internal/ring-loader.component.js";import u from"./internal/stars-loader.component.js";import p from"../../button/__internal__/button.context.js";function m(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}const d=d=>{var{animationTime:f,hasMotion:b=!0,isTracked:y=!1,loaderLabel:O,showLabel:j=!0,loaderType:g="standalone",size:h,variant:v,inverse:w=!1,isSuccess:P=!1,isError:L=!1}=d,_=function(e,r){if(null==e)return{};var t,o,n=function(e,r){if(null==e)return{};var t,o,n={},i=Object.keys(e);for(o=0;o<i.length;o++)t=i[o],r.indexOf(t)>=0||(n[t]=e[t]);return n}(e,r);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(o=0;o<i.length;o++)t=i[o],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(n[t]=e[t])}return n}(d,["animationTime","hasMotion","isTracked","loaderLabel","showLabel","loaderType","size","variant","inverse","isSuccess","isError"]);const T=o(),S=n("screen and (prefers-reduced-motion: no-preference)"),{isInsideTypicalButton:k=!1,isInsideDestructiveButton:I=!1,isInsidePrimaryButton:B=!1}=r(p),D=(()=>{switch(g){case"star":return u({loaderLabel:O,showLabel:j});case"ring":return c({inverse:w,size:h,variant:v,hasMotion:b,isTracked:y,animationTime:f,loaderLabel:O,showLabel:j,isInsideTypicalButton:k,isInsideDestructiveButton:I,isInsidePrimaryButton:B,isSuccess:P,isError:L});default:return l({size:h,variant:v,inverse:w,loaderLabel:O,showLabel:j,animationTime:f,hasMotion:b})}})();return e(s,(E=function(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},o=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),o.forEach((function(r){m(e,r,t[r])}))}return e}({role:"status"},t("loader",_),i(_),!j&&{"aria-label":O||T.loader.loading()}),M=null!=(M={children:S?D:e(a,{inverse:w,isInsideButton:k||I||B,children:O||T.loader.loading()})})?M:{},Object.getOwnPropertyDescriptors?Object.defineProperties(E,Object.getOwnPropertyDescriptors(M)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(M)).forEach((function(e){Object.defineProperty(E,e,Object.getOwnPropertyDescriptor(M,e))})),E));var E,M};export{d as Loader,d as default};
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
export declare const StyledLoaderPlaceholder: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
2
|
+
export declare const StyledLoader: import("styled-components").StyledComponent<"div", any, {
|
|
3
|
+
theme: object;
|
|
4
|
+
}, "theme">;
|
|
5
|
+
export declare const OuterBar: import("styled-components").StyledComponent<"div", any, {
|
|
6
|
+
size: string;
|
|
7
|
+
variant: string;
|
|
8
|
+
inverse: boolean;
|
|
9
|
+
}, never>;
|
|
10
|
+
export declare const InnerBar: import("styled-components").StyledComponent<"div", any, {
|
|
11
|
+
size: string;
|
|
12
|
+
variant: string;
|
|
13
|
+
inverse: boolean;
|
|
14
|
+
animationTime?: number;
|
|
15
|
+
hasMotion?: boolean;
|
|
16
|
+
}, never>;
|
|
17
|
+
interface RingSvgProps {
|
|
18
|
+
inverse?: boolean;
|
|
19
|
+
size: string;
|
|
20
|
+
variant?: string;
|
|
21
|
+
hasMotion?: boolean;
|
|
22
|
+
isTracked?: boolean;
|
|
23
|
+
isGradientVariant?: boolean;
|
|
24
|
+
animationTime?: number;
|
|
25
|
+
isInsideTypicalButton?: boolean;
|
|
26
|
+
isInsideDestructiveButton?: boolean;
|
|
27
|
+
isSuccess?: boolean;
|
|
28
|
+
isError?: boolean;
|
|
29
|
+
isInsidePrimaryButton?: boolean;
|
|
30
|
+
}
|
|
31
|
+
export declare const StyledRingCircleSvg: import("styled-components").StyledComponent<"svg", any, RingSvgProps, never>;
|
|
32
|
+
export declare const StyledStars: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
33
|
+
type LabelProps = {
|
|
34
|
+
size?: string;
|
|
35
|
+
loaderVariant?: string;
|
|
36
|
+
inverse?: boolean;
|
|
37
|
+
loaderType: string;
|
|
38
|
+
isInsideTypicalButton?: boolean;
|
|
39
|
+
isInsideDestructiveButton?: boolean;
|
|
40
|
+
isInsidePrimaryButton?: boolean;
|
|
41
|
+
hasMotion?: boolean;
|
|
42
|
+
};
|
|
43
|
+
export declare const StyledStarLoaderWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
44
|
+
export declare const StyledLoaderLabel: import("styled-components").StyledComponent<{
|
|
45
|
+
({ "data-component": dataComponent, variant, as, id, fontSize, fontWeight, textTransform, lineHeight, textDecoration, display, listStyleType, whiteSpace, wordBreak, wordWrap, textAlign, textOverflow, truncate, color, backgroundColor, bg, opacity, children, screenReaderOnly, isDisabled, "aria-hidden": ariaHidden, className, ...rest }: import("../../typography").TypographyProps): import("react").JSX.Element;
|
|
46
|
+
displayName: string;
|
|
47
|
+
}, any, LabelProps, never>;
|
|
48
|
+
type RingLoaderWrapperProps = {
|
|
49
|
+
loaderVariant?: string;
|
|
50
|
+
};
|
|
51
|
+
export declare const StyledRingLoaderWrapper: import("styled-components").StyledComponent<"div", any, RingLoaderWrapperProps, never>;
|
|
52
|
+
type StyledLabelProps = {
|
|
53
|
+
inverse?: boolean;
|
|
54
|
+
isInsideButton?: boolean;
|
|
55
|
+
};
|
|
56
|
+
export declare const StyledLabel: import("styled-components").StyledComponent<"span", any, StyledLabelProps, never>;
|
|
57
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import e,{css as i}from"styled-components";import{margin as t}from"styled-system";import r from"../../../style/themes/apply-base-theme.js";import{Typography as n}from"../../typography/typography.component.js";import"react/jsx-runtime";import"react";const a={"extra-small":20,small:32,medium:64,large:80},o={"extra-small":2.7,small:2.7,medium:2.7,large:2.7},s={small:"4px",medium:"8px",large:"16px"},d={"extra-small":"8px",small:"8px",medium:"12px",large:"16px"},l=(e,i)=>{const t=i?"rgba(255, 255, 255, 0.08)":"rgba(0, 0, 0, 0.08)";return"ai"===e?{outerBarBackground:t,innerBarBackground:i?"linear-gradient(90deg, var(--mode-color-ai-alt-stop-1, #00D639) 0%, var(--mode-color-ai-alt-stop-2, #00D6DE) 40%, var(--mode-color-ai-alt-stop-3, #9D60FF) 90%)":"linear-gradient(90deg, var(--mode-color-ai-stop-1, #13A038) 0%, var(--mode-color-ai-stop-2, #149197) 40%, var(--mode-color-ai-stop-3, #A87CFB) 90%)"}:{outerBarBackground:t,innerBarBackground:i?"#FFFFFF":"#000000"}},m=i(["display:flex;justify-content:center;text-align:center;"]),c=e.div.withConfig({displayName:"loader.style__StyledLoaderPlaceholder",componentId:"sc-45aff3a2-0"})(["display:inline-block;min-width:var(--sizing800);"]),p=e.div.attrs(r).withConfig({displayName:"loader.style__StyledLoader",componentId:"sc-45aff3a2-1"})([""," text-align:center;white-space:nowrap;"],t),u=e.div.withConfig({displayName:"loader.style__OuterBar",componentId:"sc-45aff3a2-2"})(["",""],(({size:e,variant:t,inverse:r})=>i(["border-radius:var(--borderRadius400);height:",";width:100%;background:",";overflow:hidden;position:relative;"],s[e],l(t,r).outerBarBackground))),f=e.div.withConfig({displayName:"loader.style__InnerBar",componentId:"sc-45aff3a2-3"})(["",""],(({size:e,variant:t,inverse:r,animationTime:n,hasMotion:a})=>i(["@keyframes innerBarAnimationOne{0%{left:0%;animation-timing-function:linear;}30%{left:10px;animation-timing-function:cubic-bezier(0.5,0.6,0.4,1);}100%{left:calc(100% - 15px);}}@keyframes innerBarAnimationTwo{0%{width:15px;animation-timing-function:cubic-bezier(0.7,0,0.8,1);}50%{width:35%;}100%{width:15px;}}position:absolute;background:",";width:15px;height:",";border-radius:var(--borderRadius400);animation-name:innerBarAnimationOne,innerBarAnimationTwo;"," animation-iteration-count:",";"],l(t,r).innerBarBackground,s[e],a&&`animation-duration: ${n}s, ${n}s;`,a?"infinite, infinite":"none, none"))),g=e.svg.withConfig({displayName:"loader.style__StyledRingCircleSvg",componentId:"sc-45aff3a2-4"})(["",""],(({inverse:e,size:t,hasMotion:r,isTracked:n,animationTime:s,isInsideTypicalButton:d,isInsideDestructiveButton:l,isInsidePrimaryButton:m,isSuccess:c,isError:p})=>{const u=({isInsideTypicalButton:e,isInsideDestructiveButton:i,isInsidePrimaryButton:t,inverse:r,isTracked:n,isSuccess:a,isError:o})=>{if(e||i)return t?r?{outerStroke:"rgba(0, 0, 0, 0.08)",innerStroke:"#000"}:{outerStroke:"rgba(255, 255, 255, 0.08)",innerStroke:"#FFF"}:r?{outerStroke:"rgba(255, 255, 255, 0.08)",innerStroke:"#FFF"}:{outerStroke:"rgba(0, 0, 0, 0.08)",innerStroke:"#000"};if(r)return{outerStroke:"rgba(255,255,255,0.08)",innerStroke:"#FFF"};if(n){if(a)return{outerStroke:"rgba(0, 0, 0, 0.08)",innerStroke:"#00811F"};if(o)return{outerStroke:"rgba(0, 0, 0, 0.08)",innerStroke:"#DB004E"}}return{outerStroke:"rgba(0,0,0,0.08)",innerStroke:"#000000"}},f=`${a[t]}px`,g=o[t];return i(["height:",";min-height:",';circle[data-role="outer-arc"]{fill:transparent;stroke-width:',"px;stroke:",';cx:12px;cy:12px;r:10px;}circle[data-role="inner-arc"]{fill:transparent;stroke-width:',"px;stroke:",";stroke-linecap:round;stroke-dasharray:100px;stroke-dashoffset:95px;transform-origin:12px 12px 0px;cx:12px;cy:12px;r:10px;transform:rotate(-90deg);@keyframes trackedAnimation{from{stroke-dasharray:100;stroke-dashoffset:100;}to{stroke-dasharray:100;stroke-dashoffset:20;}}@keyframes untrackedAnimation{0%{transform:rotate(-90deg);stroke-dashoffset:95;}50%{transform:rotate(90deg);stroke-dashoffset:80;}100%{transform:rotate(270deg);stroke-dashoffset:95;}}animation-name:",";"," animation-timing-function:cubic-bezier(0,0,1,1);animation-iteration-count:",";}"],f,f,g,u({isInsideTypicalButton:d,isInsideDestructiveButton:l,isInsidePrimaryButton:m,inverse:e,isTracked:n,isSuccess:c,isError:p}).outerStroke,g,u({isInsideTypicalButton:d,isInsideDestructiveButton:l,isInsidePrimaryButton:m,inverse:e,isTracked:n,isSuccess:c,isError:p}).innerStroke,n?"trackedAnimation":"untrackedAnimation",r&&`animation-duration: ${s}s;`,r?"infinite":"none")})),y="40px",h=e.div.withConfig({displayName:"loader.style__StyledStars",componentId:"sc-45aff3a2-5"})(["position:relative;width:",";height:",";"],y,y),x={standalone:{small:"4px",medium:"8px",large:"12px"},ring:{"extra-small":"4px",small:"8px",medium:"8px",large:"12px"}},k=({loaderType:e,inverse:i,isInsideTypicalButton:t,isInsideDestructiveButton:r,isInsidePrimaryButton:n})=>"standalone"===e?i?"rgba(255, 255, 255, 0.55)":"rgba(0, 0, 0, 0.65)":"ring"===e?t?n?i?"#000":"#FFF":i?"rgba(255, 255, 255, 0.90)":"rgba(0, 0, 0, 0.90)":r?n?"#FFF":"rgba(0, 0, 0, 0.90)":i?"rgba(255, 255, 255, 0.55)":"rgba(0, 0, 0, 0.65)":"rgba(0, 0, 0, 0.65)",B=e.div.withConfig({displayName:"loader.style__StyledStarLoaderWrapper",componentId:"sc-45aff3a2-6"})(["position:relative;display:flex;align-items:center;justify-content:center;"]),v=e(n).withConfig({displayName:"loader.style__StyledLoaderLabel",componentId:"sc-45aff3a2-7"})([""," line-height:150%;",""],m,(({size:e="medium",inverse:t,loaderType:r,loaderVariant:n,isInsideTypicalButton:a,isInsideDestructiveButton:o,isInsidePrimaryButton:s})=>"star"===r?i(["font-size:16px;font-weight:400;color:",";margin-left:12px;width:min-content;"],k({loaderType:r,inverse:t,isInsideTypicalButton:a,isInsideDestructiveButton:o,isInsidePrimaryButton:s})):"standalone"===r?i(["font-size:",";font-weight:500;color:",";width:100%;margin-top:",";"],"large"===e?"16px":"14px",k({loaderType:r,inverse:t,isInsideTypicalButton:a,isInsideDestructiveButton:o,isInsidePrimaryButton:s}),x[r][e]):i(["font-size:",";font-weight:500;color:",";width:",";",";"],"large"===e?"16px":"extra-small"===e?"13px":"14px",k({loaderType:r,inverse:t,isInsideTypicalButton:a,isInsideDestructiveButton:o,isInsidePrimaryButton:s}),"inline"===n?"auto":"100%","inline"===n?`margin-left: ${d[e]}`:`margin-top: ${x[r][e]}`))),I=e.div.withConfig({displayName:"loader.style__StyledRingLoaderWrapper",componentId:"sc-45aff3a2-8"})(["",""],(({loaderVariant:e})=>i(["display:flex;flex-direction:",";align-items:center;justify-content:center;width:",";"],"inline"===e?"row":"column","inline"===e?"auto":"100%"))),b=e.span.withConfig({displayName:"loader.style__StyledLabel",componentId:"sc-45aff3a2-9"})(["",""],(({inverse:e,isInsideButton:t})=>i(["",";"],!t&&"color: "+(e?"rgba(255, 255, 255, 0.90)":"rgba(0, 0, 0, 0.90)"))));export{f as InnerBar,u as OuterBar,b as StyledLabel,p as StyledLoader,v as StyledLoaderLabel,c as StyledLoaderPlaceholder,g as StyledRingCircleSvg,I as StyledRingLoaderWrapper,B as StyledStarLoaderWrapper,h as StyledStars};
|
|
@@ -1,2 +1,8 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { type ModalProps as InternalModalProps } from "../../__internal__/modal";
|
|
3
|
+
/** @deprecated `Modal` is deprecated. Please use `Dialog` instead. */
|
|
4
|
+
declare const Modal: (props: InternalModalProps) => React.JSX.Element;
|
|
5
|
+
/** @deprecated `Modal` is deprecated. Please use `Dialog` instead. */
|
|
6
|
+
type ModalProps = InternalModalProps;
|
|
7
|
+
export default Modal;
|
|
8
|
+
export type { ModalProps };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
import{jsx as e}from"react/jsx-runtime";import"react";import t from"../../__internal__/utils/logger/index.js";import r from"../../__internal__/modal/modal.component.js";function n(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}let o=!1;const a=a=>(o||(o=!0,t.deprecate("Carbon `Modal` is deprecated. Please use `Dialog` instead.")),e(r,function(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){n(e,t,r[t])}))}return e}({},a)));export{a as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,jsxs as t,Fragment as r}from"react/jsx-runtime";import{forwardRef as n,useState as o,useRef as a,useContext as i,useCallback as l,useEffect as s,useImperativeHandle as c,useMemo as p}from"react";import{CSSTransition as d}from"react-transition-group";import{offset as u,flip as m,shift as f}from"@floating-ui/dom";import b from"../../hooks/useMediaQuery/useMediaQuery.js";import{PopoverContainerWrapperStyle as v,PopoverContainerOpenIcon as h,PopoverContainerCloseIcon as y,PopoverContainerContentStyle as _,PopoverContainerHeaderStyle as O,PopoverContainerTitleStyle as g}from"./popover-container.style.js";import j from"../icon/icon.component.js";import x from"../../__internal__/popover/popover.component.js";import P from"../../__internal__/utils/helpers/guid/index.js";import C from"../../style/utils/filter-styled-system-padding-props.js";import w from"../../hooks/__internal__/useClickAwayListener/useClickAwayListener.js";import k from"../../__internal__/utils/helpers/events/events.js";import A from"../../__internal__/focus-trap/focus-trap.component.js";import B from"
|
|
1
|
+
import{jsx as e,jsxs as t,Fragment as r}from"react/jsx-runtime";import{forwardRef as n,useState as o,useRef as a,useContext as i,useCallback as l,useEffect as s,useImperativeHandle as c,useMemo as p}from"react";import{CSSTransition as d}from"react-transition-group";import{offset as u,flip as m,shift as f}from"@floating-ui/dom";import b from"../../hooks/useMediaQuery/useMediaQuery.js";import{PopoverContainerWrapperStyle as v,PopoverContainerOpenIcon as h,PopoverContainerCloseIcon as y,PopoverContainerContentStyle as _,PopoverContainerHeaderStyle as O,PopoverContainerTitleStyle as g}from"./popover-container.style.js";import j from"../icon/icon.component.js";import x from"../../__internal__/popover/popover.component.js";import P from"../../__internal__/utils/helpers/guid/index.js";import C from"../../style/utils/filter-styled-system-padding-props.js";import w from"../../hooks/__internal__/useClickAwayListener/useClickAwayListener.js";import k from"../../__internal__/utils/helpers/events/events.js";import A from"../../__internal__/focus-trap/focus-trap.component.js";import B from"../../__internal__/modal/modal.context.js";import I from"../../hooks/__internal__/useFocusPortalContent/useFocusPortalContent.js";import D from"../../__internal__/utils/helpers/tags/tags.js";import{defaultFocusableSelectors as L}from"../../__internal__/focus-trap/focus-trap-utils.js";import E from"../flat-table/__internal__/flat-table.context.js";import{useGlobalHeader as S}from"../global-header/__internal__/global-header.context.js";function F(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function R(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){F(e,t,r[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 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 W=({tabIndex:t,onClick:r,"data-element":n,ref:o,"aria-label":a,id:i,"aria-expanded":l,"aria-haspopup":s})=>e(h,{tabIndex:t,onClick:r,"data-element":n,ref:o,"aria-label":a,"aria-haspopup":s,"aria-expanded":l,id:i,children:e(j,{type:"settings"})}),$=({"data-element":t,tabIndex:r,onClick:n,ref:o,"aria-label":a,closeButtonDataProps:i})=>e(y,M(R({tabIndex:r,onClick:n,ref:o,"aria-label":a},D("close",R({"data-element":t},i))),{children:e(j,{type:"close"})}));function H(e,t,r){return p((()=>[u(e?({rects:e})=>({mainAxis:-e.reference.height}):r),m({fallbackStrategy:"initialPlacement"}),...t?[f()]:[]]),[e,t,r])}const Q=n(((n,p)=>{var{children:u,title:m,borderRadius:f,position:h="right",offset:y=6,open:j,onOpen:F,onClose:Q,renderOpenComponent:T=W,renderCloseComponent:q=$,shouldCoverButton:z=!1,ariaDescribedBy:G,openButtonAriaLabel:K,closeButtonAriaLabel:N="close",containerAriaLabel:U,closeButtonDataProps:J,disableAnimation:V=!1,hasFullWidth:X=!1}=n,Y=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}(n,["children","title","borderRadius","position","offset","open","onOpen","onClose","renderOpenComponent","renderCloseComponent","shouldCoverButton","ariaDescribedBy","openButtonAriaLabel","closeButtonAriaLabel","containerAriaLabel","closeButtonDataProps","disableAnimation","hasFullWidth"]);const Z=void 0!==j,[ee,te]=o(!1),re=a(null),ne=a(null),oe=a(null),ae=a(P()),ie=a(null),le=m?`PopoverContainer_${ae.current}`:void 0,se=Z?j:ee,ce=!b("screen and (prefers-reduced-motion: no-preference)"),pe=H(z,"center"===h,y),{isInFlatTable:de}=i(E),ue=l((e=>{var t;Z||te(!1),null==Q||Q(e),se&&(null===(t=ne.current)||void 0===t||t.focus())}),[Z,se,Q]),me=l((e=>{!k.composedPath(e).find((e=>e instanceof HTMLElement&&"input"===e.getAttribute("data-element")&&"true"===e.getAttribute("aria-expanded")))&&se&&k.isEscKey(e)&&ue(e)}),[ue,se]);s((()=>(document.addEventListener("keydown",me),()=>{document.removeEventListener("keydown",me)})),[me]),s((()=>{var e;!z&&se&&(null===(e=ie.current)||void 0===e||e.focus({preventScroll:!0}))}),[se,z,ie]),I(z?void 0:ie,z?void 0:ne,ue);const fe=l((e=>{const t=Array.from(document.querySelectorAll(L)||[]).filter((e=>e===ne.current||-1!==Number(e.tabIndex))),r=t.indexOf(ne.current);t[r+1].focus(),ue(e)}),[]),be=(e,t)=>{var r;"next"===e&&fe?fe(t):"prev"===e&&(null===(r=ne.current)||void 0===r||r.focus())},ve={tabIndex:0,"aria-expanded":se,"aria-haspopup":"dialog",isOpen:se,"data-element":"popover-container-open-component",onClick:e=>{Z||te(!se),se?null==Q||Q(e):null==F||F(e)},ref:ne,"aria-label":K||m,id:se?void 0:le,"data-popover-container-button":"true"},he={"data-element":"popover-container-close-component",tabIndex:0,onClick:e=>{ue(e)},ref:re,"aria-label":N,closeButtonDataProps:J},ye=w((e=>{Z||te(!1),se&&(null==Q||Q(e))}),"mousedown"),[_e,Oe]=o(!1),{isWithinGlobalHeader:ge}=S();c(p,(()=>({focusButton(){var e;null===(e=ne.current)||void 0===e||e.focus()}})),[]);const je=()=>t(_,M(R({"data-element":"popover-container-content",role:"dialog","aria-labelledby":le,"aria-label":U,"aria-describedby":G,p:"16px 24px",$borderRadius:f,$popoverOffset:y,ref:ie,tabIndex:-1,disableAnimation:V||ce,zIndex:ge?1e4:2e3},C(Y)),{children:[t(O,{children:[m&&e(g,{id:le,"data-element":"popover-container-title",children:m}),q(he)]}),u]}));return t(v,M(R({onMouseDown:ye,hasFullWidth:X},D("popover-container",Y)),{children:[e("div",{ref:oe,children:T(ve)}),e(d,{nodeRef:ie,timeout:{exit:V?0:300},in:se,unmountOnExit:!0,onEntered:z?()=>Oe(!0):void 0,onExiting:z?()=>Oe(!1):void 0,children:e(x,{reference:oe,placement:"center"===h?"bottom":"right"===h?"bottom-start":"bottom-end",popoverStrategy:V||ce?"fixed":"absolute",middleware:pe,childRefOverride:ie,disableBackgroundUI:de,children:z?e(B.Provider,{value:{isAnimationComplete:_e},children:e(A,{wrapperRef:ie,isOpen:se,children:je()})}):t(r,{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{Q as PopoverContainer,Q as default,$ as renderClose,W as renderOpen};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React, { RefObject } from "react";
|
|
2
2
|
import { PaddingProps, WidthProps } from "styled-system";
|
|
3
|
-
import { ModalProps } from "
|
|
3
|
+
import { ModalProps } from "../../__internal__/modal";
|
|
4
4
|
import { TagProps } from "../../__internal__/utils/helpers/tags";
|
|
5
5
|
export interface SidebarProps extends PaddingProps, TagProps, WidthProps, Pick<ModalProps, "topModalOverride" | "restoreFocusOnClose"> {
|
|
6
6
|
/** Prop to specify the aria-describedby property of the component */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as r}from"react/jsx-runtime";import
|
|
1
|
+
import{jsxs as e,jsx as r}from"react/jsx-runtime";import t,{useRef as o,useCallback as a}from"react";import n from"../../__internal__/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 u,{SidebarSubHeader as b}from"./__internal__/sidebar-header/sidebar-header.component.js";import p from"../../__internal__/utils/helpers/guid/index.js";import m from"../../hooks/__internal__/useLocale/useLocale.js";import f from"../../style/utils/filter-styled-system-padding-props.js";import y from"../../__internal__/utils/helpers/tags/tags.js";import O from"../../hooks/__internal__/useModalAria/useModalAria.js";import h from"./__internal__/sidebar.context.js";function j(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function _(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},o=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),o.forEach((function(r){j(e,r,t[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 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 P=t.forwardRef(((t,j)=>{var{"aria-describedby":P,"aria-label":w,"aria-labelledby":v,"data-element":k="sidebar","data-role":F,open:S,bespokeFocusTrap:C,closeButtonDataProps:E,disableAutoFocus:x=!1,disableEscKey:D=!1,enableBackgroundUI:I=!1,header:B,headerVariant:M="light",subHeader:A,position:H="right",size:N="medium",children:z,onCancel:K,role:L="dialog",focusFirstElement:R,focusableContainers:T,focusableSelectors:U,width:V,headerPadding:W={},subHeaderPadding:q={},topModalOverride:G,restoreFocusOnClose:J=!0,className:Q}=t,X=function(e,r){if(null==e)return{};var t,o,a=function(e,r){if(null==e)return{};var t,o,a={},n=Object.keys(e);for(o=0;o<n.length;o++)t=n[o],r.indexOf(t)>=0||(a[t]=e[t]);return a}(e,r);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);for(o=0;o<n.length;o++)t=n[o],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}(t,["aria-describedby","aria-label","aria-labelledby","data-element","data-role","open","bespokeFocusTrap","closeButtonDataProps","disableAutoFocus","disableEscKey","enableBackgroundUI","header","headerVariant","subHeader","position","size","children","onCancel","role","focusFirstElement","focusableContainers","focusableSelectors","width","headerPadding","subHeaderPadding","topModalOverride","restoreFocusOnClose","className"]);const Y=m(),{current:Z}=o(p()),{current:$}=o(p()),ee=o(null),re=a((e=>{ee.current=e,j&&("object"==typeof j&&(j.current=e),"function"==typeof j&&j(e))}),[j]),te=O(ee),oe=()=>K?r(s,g(_({"aria-label":Y.sidebar.ariaLabels.close(),onClick:K},y("close",_({"data-element":"close"},E))),{children:r(c,{type:"close"})})):null,ae=e(i,{"aria-modal":!I&&te,"aria-describedby":P||$,"aria-label":w,"aria-labelledby":v||w?v:Z,"data-component":"sidebar","data-element":k,"data-role":F,ref:re,position:H,size:N,onCancel:K,role:L,width:V,className:Q,children:[B&&r(u,g(_({headerVariant:M,closeIcon:oe()},W),{id:Z,children:B})),A&&r(b,g(_({},q),{id:$,children:A})),!B&&oe(),r(l,g(_({"data-element":"sidebar-content","data-role":"sidebar-content"},f(X)),{children:r(h.Provider,{value:{isInSidebar:!0},children:z})}))]});return r(n,{open:S,onCancel:K,disableEscKey:D,enableBackgroundUI:I,topModalOverride:G,restoreFocusOnClose:J,children:I?ae:r(d,{wrapperRef:ee,isOpen:S,additionalWrapperRefs:T,focusableSelectors:U,focusFirstElement:R,autoFocus:!x,bespokeTrap:C,children:ae})})}));P.displayName="Sidebar";export{P as Sidebar,P as default};
|
package/esm/components/text-editor/__internal__/__ui__/ContentEditor/content-editor.component.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as t,jsx as o}from"react/jsx-runtime";import{ContentEditable as e}from"@lexical/react/LexicalContentEditable";import{forwardRef as i}from"react";import r from"./content-editor.style.js";import"../../__plugins__/AutoLinker/auto-link.component.js";import"@lexical/react/LexicalComposerContext";import"@lexical/link";import"@lexical/headless";import"@lexical/html";import"lexical";import"@lexical/code";import"@lexical/list";import"@lexical/react/LexicalHorizontalRuleNode";import"@lexical/rich-text";import"../../../text-editor.context.js";import n from"../../__plugins__/useCursorAtEnd/index.js";import"../CharacterCounter/character-counter.style.js";import"lodash/debounce";import"../../../../../__internal__/i18n-context/index.js";import a from"../LinkPreviewer/link-previewer.component.js";import"@lexical/react/LexicalTypeaheadMenuPlugin";import"react-dom";import"../Mentions/constants.js";import"../Mentions/mentions.style.js";import"../../../../tooltip/tooltip.component.js";import"../../../../portrait/portrait.style.js";import"../../../../../style/utils/filter-styled-system-padding-props.js";import"../Placeholder/placeholder.style.js";import"@lexical/utils";import"../Toolbar/toolbar.style.js";import"../../../../button/button.component.js";import"../../../../box/box.component.js";import"../Toolbar/buttons/typography-dropdown/dropdown.style.js";import"../../../../icon/icon.component.js";import"../Toolbar/button-group/button-group.style.js";import"../../../../../__internal__/form-field/form-field.component.js";import"../../../../../__internal__/hint-text/hint-text.style.js";import"../../../../carbon-provider/__internal__/new-validation.context.js";import"../../../../../__internal__/input/input.component.js";import"../../../../../__internal__/input/input-presentation.style.js";import"../../../../../__internal__/input-icon-toggle/input-icon-toggle.style.js";import"invariant";import"../../../../../__internal__/validations/validation-icon.style.js";import"../../../../../__internal__/validation-message/validation-message.style.js";import"../../../../numeral-date/__internal__/numeral-date.context.js";import"../../../../../__internal__/character-count/character-count.style.js";import"../../../../textbox/textbox.style.js";import"../../../../textbox/__internal__/prefix.style.js";import"../../../../dialog/dialog.style.js";import"../../../../heading/heading.style.js";import"../../../../icon-button/icon-button.component.js";import"react-transition-group";import"../../../../../hooks/__internal__/useScrollBlock/useScrollBlock.js";import"../../../../portal/portal.js";import"
|
|
1
|
+
import{jsxs as t,jsx as o}from"react/jsx-runtime";import{ContentEditable as e}from"@lexical/react/LexicalContentEditable";import{forwardRef as i}from"react";import r from"./content-editor.style.js";import"../../__plugins__/AutoLinker/auto-link.component.js";import"@lexical/react/LexicalComposerContext";import"@lexical/link";import"@lexical/headless";import"@lexical/html";import"lexical";import"@lexical/code";import"@lexical/list";import"@lexical/react/LexicalHorizontalRuleNode";import"@lexical/rich-text";import"../../../text-editor.context.js";import n from"../../__plugins__/useCursorAtEnd/index.js";import"../CharacterCounter/character-counter.style.js";import"lodash/debounce";import"../../../../../__internal__/i18n-context/index.js";import a from"../LinkPreviewer/link-previewer.component.js";import"@lexical/react/LexicalTypeaheadMenuPlugin";import"react-dom";import"../Mentions/constants.js";import"../Mentions/mentions.style.js";import"../../../../tooltip/tooltip.component.js";import"../../../../portrait/portrait.style.js";import"../../../../../style/utils/filter-styled-system-padding-props.js";import"../Placeholder/placeholder.style.js";import"@lexical/utils";import"../Toolbar/toolbar.style.js";import"../../../../button/button.component.js";import"../../../../box/box.component.js";import"../Toolbar/buttons/typography-dropdown/dropdown.style.js";import"../../../../icon/icon.component.js";import"../Toolbar/button-group/button-group.style.js";import"../../../../../__internal__/form-field/form-field.component.js";import"../../../../../__internal__/hint-text/hint-text.style.js";import"../../../../carbon-provider/__internal__/new-validation.context.js";import"../../../../../__internal__/input/input.component.js";import"../../../../../__internal__/input/input-presentation.style.js";import"../../../../../__internal__/input-icon-toggle/input-icon-toggle.style.js";import"invariant";import"../../../../../__internal__/validations/validation-icon.style.js";import"../../../../../__internal__/validation-message/validation-message.style.js";import"../../../../numeral-date/__internal__/numeral-date.context.js";import"../../../../../__internal__/character-count/character-count.style.js";import"../../../../textbox/textbox.style.js";import"../../../../textbox/__internal__/prefix.style.js";import"../../../../dialog/dialog.style.js";import"../../../../heading/heading.style.js";import"../../../../icon-button/icon-button.component.js";import"react-transition-group";import"../../../../../hooks/__internal__/useScrollBlock/useScrollBlock.js";import"../../../../portal/portal.js";import"../../../../../__internal__/modal/modal-manager.js";import"../../../../../__internal__/modal/modal.style.js";import"../../../../../__internal__/modal/modal.context.js";import"../../../../carbon-provider/__internal__/top-modal.context.js";import"../../../../../__internal__/full-screen-heading/full-screen-heading.component.js";import"../../../../form/form.component.js";import"../../../../form/required-fields-indicator/required-fields-indicator.component.js";const l=i((({inputHint:i,namespace:l,previews:s=[],rows:p,readOnly:m,required:c,error:d,warning:_,validationMessagePositionTop:u,size:j="medium"},x)=>{const b=n(),y=d||_?`${l}-validation-message`:"",g=i?`${l}-input-hint`:"",f=(u?`${y} ${g}`:`${g} ${y}`).trim();return t(r,{"data-role":`${l}-content-editable`,error:d,warning:_,namespace:l,rows:p,readOnly:m,size:j,children:[o(e,{ref:x,"aria-describedby":f,"aria-labelledby":`${l}-label`,"aria-required":c,"aria-invalid":d,className:`${l}-editable`,"data-role":`${l}-editable`,onBlur:t=>{var o;if(null===(o=t.relatedTarget)||void 0===o?void 0:o.classList.contains("toolbar-button")){var e;const o=null===(e=t.relatedTarget)||void 0===e?void 0:e.id;if(o){const t=document.querySelector(`[id="${o}"]`);t&&t.focus()}}},onFocus:t=>{t.relatedTarget&&t.relatedTarget.classList.contains("toolbar-button")||b(t)},"aria-autocomplete":void 0,"aria-readonly":void 0}),o(a,{previews:s})]})}));export{l as default};
|
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,{forwardRef as i,useState as o,useRef as l,useImperativeHandle as c,useCallback as a,useLayoutEffect as s,useEffect as u}from"react";import{DepthProvider as p}from"./__internal__/depth.context.js";import{MenuFocusProvider as d}from"./__internal__/focus.context.js";import{ResponsiveVerticalMenuProvider as v,useResponsiveVerticalMenu as m}from"./responsive-vertical-menu.context.js";import{StyledButton as h,ModalContainer as f,StyledCloseButton as b,StyledResponsiveMenu as y,StyledGlobalVerticalMenuWrapper as w}from"./responsive-vertical-menu.style.js";import{Box as g}from"../../box/box.component.js";import
|
|
1
|
+
import{jsx as e,jsxs as r,Fragment as n}from"react/jsx-runtime";import t,{forwardRef as i,useState as o,useRef as l,useImperativeHandle as c,useCallback as a,useLayoutEffect as s,useEffect as u}from"react";import{DepthProvider as p}from"./__internal__/depth.context.js";import{MenuFocusProvider as d}from"./__internal__/focus.context.js";import{ResponsiveVerticalMenuProvider as v,useResponsiveVerticalMenu as m}from"./responsive-vertical-menu.context.js";import{StyledButton as h,ModalContainer as f,StyledCloseButton as b,StyledResponsiveMenu as y,StyledGlobalVerticalMenuWrapper as w}from"./responsive-vertical-menu.style.js";import{Box as g}from"../../box/box.component.js";import _ from"../../../__internal__/modal/modal.component.js";import j from"../../../hooks/__internal__/useIsAboveBreakpoint/useIsAboveBreakpoint.js";import O from"../../../hooks/useMediaQuery/useMediaQuery.js";import x from"../../../hooks/__internal__/useLocale/useLocale.js";import L from"../../../__internal__/focus-trap/focus-trap.component.js";import k from"../../../__internal__/utils/helpers/tags/tags.js";import E from"../../../__internal__/utils/helpers/events/events.js";function M(e,r,n){return r in e?Object.defineProperty(e,r,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[r]=n,e}function P(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){M(e,r,n[r])}))}return e}function B(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 T(e,r){if(null==e)return{};var n,t,i=function(e,r){if(null==e)return{};var n,t,i={},o=Object.keys(e);for(t=0;t<o.length;t++)n=o[t],r.indexOf(n)>=0||(i[n]=e[n]);return i}(e,r);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(t=0;t<o.length;t++)n=o[t],r.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}const C=i(((i,p)=>{var d,{children:v,height:M,responsiveBreakpoint:C=700,width:R,launcherButtonDataProps:S}=i,I=T(i,["children","height","responsiveBreakpoint","width","launcherButtonDataProps"]);const D=x(),{active:z,activeMenuItem:A,buttonRef:$,containerRef:q,menuRef:Q,responsiveMode:V,top:G,setActive:F,setActiveMenuItem:H,setReducedMotion:J,setResponsiveMode:K,setLeft:N,setTop:U}=m(),[W,X]=o(0),Y=j(C),[Z,ee]=o("100%"),re=!O("screen and (prefers-reduced-motion: no-preference)"),ne=l(null),{current:te}=Q,{current:ie}=$;c(p,(()=>({focusLaunchButton(){null==ie||ie.focus({preventScroll:!0})}})),[ie]);const oe=a((()=>{if(z&&V){const e=te||document.querySelector("[id='responsive-vertical-menu-primary']");e&&ee(`${e.getBoundingClientRect().width}px`)}N(A&&te?`${te.getBoundingClientRect().right}px`:"auto"),U(A&&ie?`${ie.getBoundingClientRect().bottom}px`:"auto")}),[z,te,V,A,ie]),le=a((e=>{q.current&&!q.current.contains(e.target)&&F(!1)}),[q]),ce=a((()=>{F((e=>!e)),H(null)}),[z,F,H]);s((()=>(oe(),window.addEventListener("resize",oe),()=>{var e;null===(e=window)||void 0===e||e.removeEventListener("resize",oe)})),[z,oe,te,V]);const ae=l(!1),se=l(null);u((()=>{const e=()=>{ae.current=!0,null!==se.current&&clearTimeout(se.current),se.current=window.setTimeout((()=>{ae.current=!1}),100)};return window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e),null!==se.current&&clearTimeout(se.current)}}),[]),u((()=>{let e=null;const r=r=>{q.current&&(E.composedPath(r).includes($.current)||(e&&(clearTimeout(e),e=null),e=setTimeout((()=>{var e;(null===(e=q.current)||void 0===e?void 0:e.contains(document.activeElement))||F(!1)}),0)))},n=e=>{"Escape"===e.key&&(e.preventDefault(),F(!1))},t=q.current;return z&&!V&&(document.addEventListener("keydown",n),window.addEventListener("click",le),null==t||t.addEventListener("focusout",r)),()=>{document.removeEventListener("keydown",n),window.removeEventListener("click",le),null==t||t.removeEventListener("focusout",r),e&&clearTimeout(e),e=null}}),[z,A,$,q,le,V]),u((()=>{null==J||J(re),null==K||K(!Y)}),[Y,re,J,K]);const ue=a((e=>{if(!e)return 0;if(t.isValidElement(e))return 1+ue(e.props.children);const r=t.Children.toArray(e);return r.length?r.reduce(((e,r)=>t.isValidElement(r)?e+1+ue(r.props.children):e),0):0}),[]);return u((()=>{const e=W,r=ue(v);e!==r&&(X(r),H(null))}),[W,v,ue,H]),r("div",{ref:q,children:[e(h,P({active:z,buttonType:"tertiary",iconType:"squares_nine",id:"responsive-vertical-menu-launcher",onClick:ce,ref:$},k("responsive-vertical-menu-launcher",P({"data-role":"responsive-vertical-menu-launcher"},S)),(()=>{var e,r;return V?{"aria-label":null===(r=D.verticalMenu.ariaLabels)||void 0===r?void 0:r.responsiveMenuLauncher()}:{"aria-expanded":z,"aria-controls":"responsive-vertical-menu-primary","aria-label":null===(e=D.verticalMenu.ariaLabels)||void 0===e?void 0:e.responsiveMenuLauncher()}})())),V?e(_,{open:z,children:e(L,{wrapperRef:ne,isOpen:z,children:r(f,B(P({ref:ne,width:Z,tabIndex:-1,id:"responsive-vertical-menu-dialog"},(()=>{var e;return{role:"dialog","aria-modal":!0,"aria-label":null===(e=D.verticalMenu.ariaLabels)||void 0===e?void 0:e.responsiveMenuAria()}})()),{children:[e(g,{boxSizing:"border-box",display:"flex",justifyContent:"flex-end",width:"100%",backgroundColor:"var(--colorsGray850)",p:1,children:e(b,{"aria-label":null===(d=D.verticalMenu.ariaLabels)||void 0===d?void 0:d.responsiveMenuCloseButton(),"data-component":"responsive-vertical-menu-close","data-role":"responsive-vertical-menu-close",iconType:"close",size:"small",buttonType:"tertiary",onClick:()=>{F(!1),H(null)}})}),e(y,{height:M,id:"responsive-vertical-menu-primary",menu:"primary",reduceMotion:re,ref:Q,responsive:!0,tabIndex:-1,top:"48px",width:R,children:v})]}))})}):e(w,B(P({},I,k("responsive-vertical-menu",I)),{children:z&&e(n,{children:e(y,{childOpen:!!A,"data-component":"responsive-vertical-menu-primary","data-role":"responsive-vertical-menu-primary",height:M||"100%",id:"responsive-vertical-menu-primary",menu:"primary",reduceMotion:re,ref:Q,responsive:!1,tabIndex:-1,top:G,width:R,children:v})})}))]})})),R=i(((r,n)=>{var{children:t,width:i,height:o}=r,l=T(r,["children","width","height"]);return e(p,{children:e(d,{children:e(v,{width:i,height:o,children:e(C,B(P({ref:n,width:i,height:o},l),{children:t}))})})})}));export{R as ResponsiveVerticalMenu,R as default};
|
package/esm/global.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{useRef as r,useCallback as e,useEffect as t}from"react";import n from"../../../
|
|
1
|
+
import{useRef as r,useCallback as e,useEffect as t}from"react";import n from"../../../__internal__/modal/modal-manager.js";const o=({open:o,closeModal:c,modalRef:u,setTriggerRefocusFlag:l,triggerRefocusOnClose:s=!0,topModalOverride:a=!1,focusCallToActionElement:d})=>{const m=r(!1),i=r(!1),f=r(null),p=e((r=>{n.isTopmost(u.current)&&c(r)}),[u,c]),v=e((()=>{m.current||(document.addEventListener("keyup",p),m.current=!0)}),[p]),g=e((()=>{m.current&&(document.removeEventListener("keyup",p),m.current=!1)}),[p]);t((()=>{o?v():g()}),[v,o,g]),t((()=>()=>{g()}),[g]),t((()=>{!f.current&&d&&o&&(f.current=d)}),[o,d]);const M=e((r=>{i.current||(n.addModal(r,l,a),i.current=!0)}),[l,a]),T=e((r=>{i.current&&(n.removeModal(r,s),f.current&&setTimeout((()=>{var r;null===(r=f.current)||void 0===r||r.focus(),f.current=null}),0),i.current=!1)}),[s]);t((()=>{const r=u.current;o?M(r):T(r)}),[u,o,M,T]),t((()=>{const r=u.current;return()=>{T(r)}}),[u,T])};export{o as default};
|