carbon-react 157.3.4 → 157.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/divider/divider.component.d.ts +39 -0
- package/esm/components/divider/divider.component.js +1 -0
- package/esm/components/divider/divider.style.d.ts +11 -0
- package/esm/components/divider/divider.style.js +1 -0
- package/esm/components/divider/index.d.ts +2 -0
- package/esm/components/divider/index.js +1 -0
- package/esm/components/hr/hr.component.js +1 -1
- package/esm/components/popover-container/popover-container.component.js +1 -1
- package/esm/components/tile/flex-tile-divider/flex-tile-divider.component.js +1 -1
- package/esm/components/vertical-divider/vertical-divider.component.js +1 -1
- package/lib/components/divider/divider.component.d.ts +39 -0
- package/lib/components/divider/divider.component.js +1 -0
- package/lib/components/divider/divider.style.d.ts +11 -0
- package/lib/components/divider/divider.style.js +1 -0
- package/lib/components/divider/index.d.ts +2 -0
- package/lib/components/divider/index.js +1 -0
- package/lib/components/divider/package.json +6 -0
- package/lib/components/hr/hr.component.js +1 -1
- package/lib/components/popover-container/popover-container.component.js +1 -1
- package/lib/components/tile/flex-tile-divider/flex-tile-divider.component.js +1 -1
- package/lib/components/vertical-divider/vertical-divider.component.js +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import { SpaceProps } from "styled-system";
|
|
2
|
+
import { TagProps } from "../../__internal__/utils/helpers/tags";
|
|
3
|
+
export interface DividerProps extends SpaceProps, TagProps {
|
|
4
|
+
/** Sets Divider type */
|
|
5
|
+
type?: "vertical" | "horizontal";
|
|
6
|
+
/** Sets Divider variant */
|
|
7
|
+
variant?: "typical" | "prominent";
|
|
8
|
+
/** Set the style of the Divider to inverse */
|
|
9
|
+
inverse?: boolean;
|
|
10
|
+
/** Shorthand for the height attribute.
|
|
11
|
+
* Only available for the `vertical` type.
|
|
12
|
+
* */
|
|
13
|
+
h?: number | string;
|
|
14
|
+
/** Height attribute of the component.
|
|
15
|
+
* Only available for the `vertical` type.
|
|
16
|
+
* */
|
|
17
|
+
height?: number | string;
|
|
18
|
+
/**
|
|
19
|
+
* Sets the display: inline css attribute on the component
|
|
20
|
+
* To be used in non-flex containers.
|
|
21
|
+
* Only available for the `vertical` type.
|
|
22
|
+
*/
|
|
23
|
+
displayInline?: boolean;
|
|
24
|
+
/**
|
|
25
|
+
* Set the divider to be hidden from screen readers.
|
|
26
|
+
* Please note that this cannot be overridden when inside a Menu.
|
|
27
|
+
* */
|
|
28
|
+
"aria-hidden"?: boolean;
|
|
29
|
+
/** Breakpoint for adaptive left and right margins (below the breakpoint they go to 0).
|
|
30
|
+
* Enables the adaptive behaviour when set.
|
|
31
|
+
* Only available for `horizontal` type.
|
|
32
|
+
* */
|
|
33
|
+
adaptiveMxBreakpoint?: number;
|
|
34
|
+
}
|
|
35
|
+
export declare const Divider: {
|
|
36
|
+
({ type, h, height, displayInline, "aria-hidden": ariaHidden, variant, inverse, adaptiveMxBreakpoint, ml, mr, ...rest }: DividerProps): JSX.Element;
|
|
37
|
+
displayName: string;
|
|
38
|
+
};
|
|
39
|
+
export default Divider;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{jsx as e}from"react/jsx-runtime";import{useContext as r}from"react";import t from"../menu/__internal__/menu.context.js";import{StyledHorizontalDivider as n,StyledVerticalDividerWrapper as i,StyledVerticalDivider as o}from"./divider.style.js";import a from"../../__internal__/utils/helpers/tags/tags.js";import l from"../../hooks/__internal__/useIsAboveBreakpoint/useIsAboveBreakpoint.js";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 c(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){p(e,r,t[r])}))}return e}function s(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 u=p=>{var{type:u="vertical",h:d,height:m,displayInline:f=!1,"aria-hidden":b,variant:y="typical",inverse:v=!1,adaptiveMxBreakpoint:O,ml:j,mr:h}=p,g=function(e,r){if(null==e)return{};var t,n,i=function(e,r){if(null==e)return{};var t,n,i={},o=Object.keys(e);for(n=0;n<o.length;n++)t=o[n],r.indexOf(t)>=0||(i[t]=e[t]);return i}(e,r);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)t=o[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(i[t]=e[t])}return i}(p,["type","h","height","displayInline","aria-hidden","variant","inverse","adaptiveMxBreakpoint","ml","mr"]);const{inMenu:P}=r(t),_=l(O);if("horizontal"===u){let r=j,t=h;return O&&!_&&(r=0,t=0),e(n,c({"data-role":"divider","aria-hidden":b,variant:y,inverse:v,ml:r,mr:t,mt:g.mt||3,mb:g.mb||3},g,a("divider",g)))}return e(i,s(c(s(c({"data-role":"divider",p:g.p||3,height:d||m,displayInline:f,ml:j,mr:h},g),{as:P?"li":"div","aria-hidden":P||b}),a("divider",c({},g))),{children:e(o,{"data-role":"divider-content",variant:y,inverse:v})}))};u.displayName="Divider";export{u as Divider,u as default};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { DividerProps } from "./divider.component";
|
|
2
|
+
declare const StyledVerticalDividerWrapper: import("styled-components").StyledComponent<"div", any, {
|
|
3
|
+
theme: object;
|
|
4
|
+
} & DividerProps, "theme">;
|
|
5
|
+
declare const StyledVerticalDivider: import("styled-components").StyledComponent<"div", any, {
|
|
6
|
+
theme: object;
|
|
7
|
+
} & Pick<DividerProps, "variant" | "inverse">, "theme">;
|
|
8
|
+
declare const StyledHorizontalDivider: import("styled-components").StyledComponent<"hr", any, {
|
|
9
|
+
theme: object;
|
|
10
|
+
} & DividerProps, "theme">;
|
|
11
|
+
export { StyledVerticalDividerWrapper, StyledVerticalDivider, StyledHorizontalDivider, };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import e,{css as i}from"styled-components";import t from"../../style/themes/apply-base-theme.js";import{space as r,margin as n}from"styled-system";const s=({variant:e,inverse:i})=>"prominent"===e?i?"#6F6F6F":"#7C7C7C":i?"#505050":"#A0A0A0",d=e.div.attrs(t).withConfig({displayName:"divider.style__StyledVerticalDividerWrapper",componentId:"sc-f1b220ec-0"})([""," "," ",""],r,(({height:e})=>e&&i(["height:",";"],"string"==typeof e?`${e}`:`${e}px`)),(({displayInline:e})=>e?"display: inline;":"")),a=e.div.attrs(t).withConfig({displayName:"divider.style__StyledVerticalDivider",componentId:"sc-f1b220ec-1"})(["height:100%;border-left:1px solid ",";display:inherit;"],(({variant:e,inverse:i})=>s({variant:e,inverse:i}))),o=e.hr.attrs(t).withConfig({displayName:"divider.style__StyledHorizontalDivider",componentId:"sc-f1b220ec-2"})([""," width:100%;border:0;height:1px;background-color:",";"],n,(({variant:e,inverse:i})=>s({variant:e,inverse:i})));export{o as StyledHorizontalDivider,a as StyledVerticalDivider,d as StyledVerticalDividerWrapper};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export{Divider as default}from"./divider.component.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e}from"react/jsx-runtime";import"react";import t from"../../__internal__/utils/helpers/tags/tags.js";import r from"./hr.style.js";import n from"../../hooks/__internal__/useIsAboveBreakpoint/useIsAboveBreakpoint.js";function
|
|
1
|
+
import{jsx as e}from"react/jsx-runtime";import"react";import t from"../../__internal__/utils/helpers/tags/tags.js";import r from"./hr.style.js";import n from"../../hooks/__internal__/useIsAboveBreakpoint/useIsAboveBreakpoint.js";import o from"../../__internal__/utils/logger/index.js";function i(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}let a=!1;const l=l=>{var{adaptiveMxBreakpoint:s,ml:p,mr:m,"aria-hidden":u,type:c="typical",height:f="small"}=l,b=function(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}(l,["adaptiveMxBreakpoint","ml","mr","aria-hidden","type","height"]);a||(a=!0,o.deprecate("`Hr` is deprecated and will soon be removed. Please use `Divider` instead."));const d=n(s);let y=p,h=m;return s&&!d&&(y=0,h=0),e(r,function(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){i(e,t,r[t])}))}return e}({"aria-hidden":u,height:f,$type:c,ml:y,mr:h,mt:b.mt||3,mb:b.mb||3},b,t("hr",b)))};export{l as Hr,l 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"../modal/__internal__/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")))&&k.isEscKey(e)&&ue(e)}),[ue]);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
|
+
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"../modal/__internal__/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 +1 @@
|
|
|
1
|
-
import{jsx as o}from"react/jsx-runtime";import"react";import{Box as t}from"../../box/box.component.js";import{
|
|
1
|
+
import{jsx as o}from"react/jsx-runtime";import"react";import{Box as t}from"../../box/box.component.js";import{Divider as r}from"../../divider/divider.component.js";const i=()=>o(t,{position:"absolute",bottom:"0px",left:"0px",height:"1px",width:"100vw",m:"0px 0px -1px 0px",children:o(r,{type:"horizontal","aria-hidden":!0,"data-role":"hr",m:0})});export{i as FlexTileDivider,i as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e}from"react/jsx-runtime";import{useContext as
|
|
1
|
+
import{jsx as e}from"react/jsx-runtime";import{useContext as r}from"react";import t from"../menu/__internal__/menu.context.js";import{StyledVerticalWrapper as n,StyledDivider as i}from"./vertical-divider.style.js";import o from"../../__internal__/utils/helpers/tags/tags.js";import l from"../../__internal__/utils/logger/index.js";function a(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function c(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){a(e,r,t[r])}))}return e}function s(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}let p=!1;const d=a=>{var{h:d,height:u,displayInline:f=!1,tint:b=80,"aria-hidden":y}=a,O=function(e,r){if(null==e)return{};var t,n,i=function(e,r){if(null==e)return{};var t,n,i={},o=Object.keys(e);for(n=0;n<o.length;n++)t=o[n],r.indexOf(t)>=0||(i[t]=e[t]);return i}(e,r);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)t=o[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(i[t]=e[t])}return i}(a,["h","height","displayInline","tint","aria-hidden"]);p||(p=!0,l.deprecate("`VerticalDivider` is deprecated and will soon be removed. Please use `Divider` instead."));const{inMenu:m}=r(t);return e(n,s(c(s(c({"data-role":"vertical-divider",p:O.p||3,height:d||u,displayInline:f},O),{as:m?"li":"div","aria-hidden":m||y}),o("vertical-divider",O)),{children:e(i,{"data-role":"divider",tint:b})}))};d.displayName="VerticalDivider";export{d as VerticalDivider,d as default};
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import { SpaceProps } from "styled-system";
|
|
2
|
+
import { TagProps } from "../../__internal__/utils/helpers/tags";
|
|
3
|
+
export interface DividerProps extends SpaceProps, TagProps {
|
|
4
|
+
/** Sets Divider type */
|
|
5
|
+
type?: "vertical" | "horizontal";
|
|
6
|
+
/** Sets Divider variant */
|
|
7
|
+
variant?: "typical" | "prominent";
|
|
8
|
+
/** Set the style of the Divider to inverse */
|
|
9
|
+
inverse?: boolean;
|
|
10
|
+
/** Shorthand for the height attribute.
|
|
11
|
+
* Only available for the `vertical` type.
|
|
12
|
+
* */
|
|
13
|
+
h?: number | string;
|
|
14
|
+
/** Height attribute of the component.
|
|
15
|
+
* Only available for the `vertical` type.
|
|
16
|
+
* */
|
|
17
|
+
height?: number | string;
|
|
18
|
+
/**
|
|
19
|
+
* Sets the display: inline css attribute on the component
|
|
20
|
+
* To be used in non-flex containers.
|
|
21
|
+
* Only available for the `vertical` type.
|
|
22
|
+
*/
|
|
23
|
+
displayInline?: boolean;
|
|
24
|
+
/**
|
|
25
|
+
* Set the divider to be hidden from screen readers.
|
|
26
|
+
* Please note that this cannot be overridden when inside a Menu.
|
|
27
|
+
* */
|
|
28
|
+
"aria-hidden"?: boolean;
|
|
29
|
+
/** Breakpoint for adaptive left and right margins (below the breakpoint they go to 0).
|
|
30
|
+
* Enables the adaptive behaviour when set.
|
|
31
|
+
* Only available for `horizontal` type.
|
|
32
|
+
* */
|
|
33
|
+
adaptiveMxBreakpoint?: number;
|
|
34
|
+
}
|
|
35
|
+
export declare const Divider: {
|
|
36
|
+
({ type, h, height, displayInline, "aria-hidden": ariaHidden, variant, inverse, adaptiveMxBreakpoint, ml, mr, ...rest }: DividerProps): JSX.Element;
|
|
37
|
+
displayName: string;
|
|
38
|
+
};
|
|
39
|
+
export default Divider;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("../menu/__internal__/menu.context.js"),i=require("./divider.style.js"),n=require("../../__internal__/utils/helpers/tags/tags.js"),a=require("../../hooks/__internal__/useIsAboveBreakpoint/useIsAboveBreakpoint.js");function o(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function l(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},i=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),i.forEach((function(r){o(e,r,t[r])}))}return e}function s(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 u=o=>{var{type:u="vertical",h:c,height:d,displayInline:p=!1,"aria-hidden":y,variant:v="typical",inverse:b=!1,adaptiveMxBreakpoint:f,ml:O,mr:j}=o,m=function(e,r){if(null==e)return{};var t,i,n=function(e,r){if(null==e)return{};var t,i,n={},a=Object.keys(e);for(i=0;i<a.length;i++)t=a[i],r.indexOf(t)>=0||(n[t]=e[t]);return n}(e,r);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(i=0;i<a.length;i++)t=a[i],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(n[t]=e[t])}return n}(o,["type","h","height","displayInline","aria-hidden","variant","inverse","adaptiveMxBreakpoint","ml","mr"]);const{inMenu:h}=r.useContext(t.default),g=a.default(f);if("horizontal"===u){let r=O,t=j;return f&&!g&&(r=0,t=0),e.jsx(i.StyledHorizontalDivider,l({"data-role":"divider","aria-hidden":y,variant:v,inverse:b,ml:r,mr:t,mt:m.mt||3,mb:m.mb||3},m,n.default("divider",m)))}return e.jsx(i.StyledVerticalDividerWrapper,s(l(s(l({"data-role":"divider",p:m.p||3,height:c||d,displayInline:p,ml:O,mr:j},m),{as:h?"li":"div","aria-hidden":h||y}),n.default("divider",l({},m))),{children:e.jsx(i.StyledVerticalDivider,{"data-role":"divider-content",variant:v,inverse:b})}))};u.displayName="Divider",exports.Divider=u,exports.default=u;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { DividerProps } from "./divider.component";
|
|
2
|
+
declare const StyledVerticalDividerWrapper: import("styled-components").StyledComponent<"div", any, {
|
|
3
|
+
theme: object;
|
|
4
|
+
} & DividerProps, "theme">;
|
|
5
|
+
declare const StyledVerticalDivider: import("styled-components").StyledComponent<"div", any, {
|
|
6
|
+
theme: object;
|
|
7
|
+
} & Pick<DividerProps, "variant" | "inverse">, "theme">;
|
|
8
|
+
declare const StyledHorizontalDivider: import("styled-components").StyledComponent<"hr", any, {
|
|
9
|
+
theme: object;
|
|
10
|
+
} & DividerProps, "theme">;
|
|
11
|
+
export { StyledVerticalDividerWrapper, StyledVerticalDivider, StyledHorizontalDivider, };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";var e=require("styled-components"),i=require("../../style/themes/apply-base-theme.js"),t=require("styled-system");function r(e){return e&&e.__esModule?e:{default:e}}var a=r(e);const d=({variant:e,inverse:i})=>"prominent"===e?i?"#6F6F6F":"#7C7C7C":i?"#505050":"#A0A0A0",s=a.default.div.attrs(i.default).withConfig({displayName:"divider.style__StyledVerticalDividerWrapper",componentId:"sc-f1b220ec-0"})([""," "," ",""],t.space,(({height:i})=>i&&e.css(["height:",";"],"string"==typeof i?`${i}`:`${i}px`)),(({displayInline:e})=>e?"display: inline;":"")),l=a.default.div.attrs(i.default).withConfig({displayName:"divider.style__StyledVerticalDivider",componentId:"sc-f1b220ec-1"})(["height:100%;border-left:1px solid ",";display:inherit;"],(({variant:e,inverse:i})=>d({variant:e,inverse:i}))),n=a.default.hr.attrs(i.default).withConfig({displayName:"divider.style__StyledHorizontalDivider",componentId:"sc-f1b220ec-2"})([""," width:100%;border:0;height:1px;background-color:",";"],t.margin,(({variant:e,inverse:i})=>d({variant:e,inverse:i})));exports.StyledHorizontalDivider=n,exports.StyledVerticalDivider=l,exports.StyledVerticalDividerWrapper=s;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./divider.component.js");exports.default=e.Divider;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime");require("react");var r=require("../../__internal__/utils/helpers/tags/tags.js"),t=require("./hr.style.js"),n=require("../../hooks/__internal__/useIsAboveBreakpoint/useIsAboveBreakpoint.js");function
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime");require("react");var r=require("../../__internal__/utils/helpers/tags/tags.js"),t=require("./hr.style.js"),n=require("../../hooks/__internal__/useIsAboveBreakpoint/useIsAboveBreakpoint.js"),i=require("../../__internal__/utils/logger/index.js");function a(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}let l=!1;const o=o=>{var{adaptiveMxBreakpoint:u,ml:s,mr:c,"aria-hidden":p,type:d="typical",height:f="small"}=o,b=function(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}(o,["adaptiveMxBreakpoint","ml","mr","aria-hidden","type","height"]);l||(l=!0,i.default.deprecate("`Hr` is deprecated and will soon be removed. Please use `Divider` instead."));const y=n.default(u);let m=s,h=c;return u&&!y&&(m=0,h=0),e.jsx(t.default,function(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){a(e,r,t[r])}))}return e}({"aria-hidden":p,height:f,$type:d,ml:m,mr:h,mt:b.mt||3,mb:b.mb||3},b,r.default("hr",b)))};exports.Hr=o,exports.default=o;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("react-transition-group"),n=require("@floating-ui/dom"),o=require("../../hooks/useMediaQuery/useMediaQuery.js"),a=require("./popover-container.style.js"),i=require("../icon/icon.component.js"),l=require("../../__internal__/popover/popover.component.js"),s=require("../../__internal__/utils/helpers/guid/index.js"),u=require("../../style/utils/filter-styled-system-padding-props.js"),d=require("../../hooks/__internal__/useClickAwayListener/useClickAwayListener.js"),c=require("../../__internal__/utils/helpers/events/events.js"),p=require("../../__internal__/focus-trap/focus-trap.component.js"),f=require("../modal/__internal__/modal.context.js"),b=require("../../hooks/__internal__/useFocusPortalContent/useFocusPortalContent.js"),m=require("../../__internal__/utils/helpers/tags/tags.js"),v=require("../../__internal__/focus-trap/focus-trap-utils.js"),x=require("../flat-table/__internal__/flat-table.context.js"),j=require("../global-header/__internal__/global-header.context.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 h(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 _(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=({tabIndex:t,onClick:r,"data-element":n,ref:o,"aria-label":l,id:s,"aria-expanded":u,"aria-haspopup":d})=>e.jsx(a.PopoverContainerOpenIcon,{tabIndex:t,onClick:r,"data-element":n,ref:o,"aria-label":l,"aria-haspopup":d,"aria-expanded":u,id:s,children:e.jsx(i.default,{type:"settings"})}),g=({"data-element":t,tabIndex:r,onClick:n,ref:o,"aria-label":l,closeButtonDataProps:s})=>e.jsx(a.PopoverContainerCloseIcon,_(h({tabIndex:r,onClick:n,ref:o,"aria-label":l},m.default("close",h({"data-element":t},s))),{children:e.jsx(i.default,{type:"close"})})),C=t.forwardRef(((i,y)=>{var{children:C,title:P,borderRadius:k,position:q="right",offset:w=6,open:S,onOpen:A,onClose:I,renderOpenComponent:B=O,renderCloseComponent:E=g,shouldCoverButton:R=!1,ariaDescribedBy:D,openButtonAriaLabel:L,closeButtonAriaLabel:F="close",containerAriaLabel:M,closeButtonDataProps:H,disableAnimation:W=!1,hasFullWidth:T=!1}=i,$=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}(i,["children","title","borderRadius","position","offset","open","onOpen","onClose","renderOpenComponent","renderCloseComponent","shouldCoverButton","ariaDescribedBy","openButtonAriaLabel","closeButtonAriaLabel","containerAriaLabel","closeButtonDataProps","disableAnimation","hasFullWidth"]);const G=void 0!==S,[Q,z]=t.useState(!1),K=t.useRef(null),N=t.useRef(null),U=t.useRef(null),J=t.useRef(s.default()),V=t.useRef(null),X=P?`PopoverContainer_${J.current}`:void 0,Y=G?S:Q,Z=!o.default("screen and (prefers-reduced-motion: no-preference)"),ee=function(e,r,o){return t.useMemo((()=>[n.offset(e?({rects:e})=>({mainAxis:-e.reference.height}):o),n.flip({fallbackStrategy:"initialPlacement"}),...r?[n.shift()]:[]]),[e,r,o])}(R,"center"===q,w),{isInFlatTable:te}=t.useContext(x.default),re=t.useCallback((e=>{var t;G||z(!1),null==I||I(e),Y&&(null===(t=N.current)||void 0===t||t.focus())}),[G,Y,I]),ne=t.useCallback((e=>{!c.default.composedPath(e).find((e=>e instanceof HTMLElement&&"input"===e.getAttribute("data-element")&&"true"===e.getAttribute("aria-expanded")))&&c.default.isEscKey(e)&&re(e)}),[re]);t.useEffect((()=>(document.addEventListener("keydown",ne),()=>{document.removeEventListener("keydown",ne)})),[ne]),t.useEffect((()=>{var e;!R&&Y&&(null===(e=V.current)||void 0===e||e.focus({preventScroll:!0}))}),[Y,R,V]),b.default(R?void 0:V,R?void 0:N,re);const oe=t.useCallback((e=>{const t=Array.from(document.querySelectorAll(v.defaultFocusableSelectors)||[]).filter((e=>e===N.current||-1!==Number(e.tabIndex))),r=t.indexOf(N.current);t[r+1].focus(),re(e)}),[]),ae=(e,t)=>{var r;"next"===e&&oe?oe(t):"prev"===e&&(null===(r=N.current)||void 0===r||r.focus())},ie={tabIndex:0,"aria-expanded":Y,"aria-haspopup":"dialog",isOpen:Y,"data-element":"popover-container-open-component",onClick:e=>{G||z(!Y),Y?null==I||I(e):null==A||A(e)},ref:N,"aria-label":L||P,id:Y?void 0:X,"data-popover-container-button":"true"},le={"data-element":"popover-container-close-component",tabIndex:0,onClick:e=>{re(e)},ref:K,"aria-label":F,closeButtonDataProps:H},se=d.default((e=>{G||z(!1),Y&&(null==I||I(e))}),"mousedown"),[ue,de]=t.useState(!1),{isWithinGlobalHeader:ce}=j.useGlobalHeader();t.useImperativeHandle(y,(()=>({focusButton(){var e;null===(e=N.current)||void 0===e||e.focus()}})),[]);const pe=()=>e.jsxs(a.PopoverContainerContentStyle,_(h({"data-element":"popover-container-content",role:"dialog","aria-labelledby":X,"aria-label":M,"aria-describedby":D,p:"16px 24px",$borderRadius:k,$popoverOffset:w,ref:V,tabIndex:-1,disableAnimation:W||Z,zIndex:ce?1e4:2e3},u.default($)),{children:[e.jsxs(a.PopoverContainerHeaderStyle,{children:[P&&e.jsx(a.PopoverContainerTitleStyle,{id:X,"data-element":"popover-container-title",children:P}),E(le)]}),C]}));return e.jsxs(a.PopoverContainerWrapperStyle,_(h({onMouseDown:se,hasFullWidth:T},m.default("popover-container",$)),{children:[e.jsx("div",{ref:U,children:B(ie)}),e.jsx(r.CSSTransition,{nodeRef:V,timeout:{exit:W?0:300},in:Y,unmountOnExit:!0,onEntered:R?()=>de(!0):void 0,onExiting:R?()=>de(!1):void 0,children:e.jsx(l.default,{reference:U,placement:"center"===q?"bottom":"right"===q?"bottom-start":"bottom-end",popoverStrategy:W||Z?"fixed":"absolute",middleware:ee,childRefOverride:V,disableBackgroundUI:te,children:R?e.jsx(f.default.Provider,{value:{isAnimationComplete:ue},children:e.jsx(p.default,{wrapperRef:V,isOpen:Y,children:pe()})}):e.jsxs(e.Fragment,{children:[e.jsx("div",{"data-element":"tab-guard-top",tabIndex:0,onFocus:e=>ae("prev",e)}),pe(),e.jsx("div",{"data-element":"tab-guard-bottom",tabIndex:0,onFocus:e=>ae("next",e)})]})})})]}))}));exports.PopoverContainer=C,exports.default=C,exports.renderClose=g,exports.renderOpen=O;
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("react-transition-group"),n=require("@floating-ui/dom"),o=require("../../hooks/useMediaQuery/useMediaQuery.js"),a=require("./popover-container.style.js"),i=require("../icon/icon.component.js"),l=require("../../__internal__/popover/popover.component.js"),s=require("../../__internal__/utils/helpers/guid/index.js"),u=require("../../style/utils/filter-styled-system-padding-props.js"),d=require("../../hooks/__internal__/useClickAwayListener/useClickAwayListener.js"),c=require("../../__internal__/utils/helpers/events/events.js"),p=require("../../__internal__/focus-trap/focus-trap.component.js"),f=require("../modal/__internal__/modal.context.js"),b=require("../../hooks/__internal__/useFocusPortalContent/useFocusPortalContent.js"),m=require("../../__internal__/utils/helpers/tags/tags.js"),v=require("../../__internal__/focus-trap/focus-trap-utils.js"),x=require("../flat-table/__internal__/flat-table.context.js"),j=require("../global-header/__internal__/global-header.context.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 h(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 _(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=({tabIndex:t,onClick:r,"data-element":n,ref:o,"aria-label":l,id:s,"aria-expanded":u,"aria-haspopup":d})=>e.jsx(a.PopoverContainerOpenIcon,{tabIndex:t,onClick:r,"data-element":n,ref:o,"aria-label":l,"aria-haspopup":d,"aria-expanded":u,id:s,children:e.jsx(i.default,{type:"settings"})}),g=({"data-element":t,tabIndex:r,onClick:n,ref:o,"aria-label":l,closeButtonDataProps:s})=>e.jsx(a.PopoverContainerCloseIcon,_(h({tabIndex:r,onClick:n,ref:o,"aria-label":l},m.default("close",h({"data-element":t},s))),{children:e.jsx(i.default,{type:"close"})})),C=t.forwardRef(((i,y)=>{var{children:C,title:P,borderRadius:k,position:q="right",offset:w=6,open:S,onOpen:A,onClose:I,renderOpenComponent:B=O,renderCloseComponent:E=g,shouldCoverButton:R=!1,ariaDescribedBy:D,openButtonAriaLabel:L,closeButtonAriaLabel:F="close",containerAriaLabel:M,closeButtonDataProps:H,disableAnimation:W=!1,hasFullWidth:T=!1}=i,$=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}(i,["children","title","borderRadius","position","offset","open","onOpen","onClose","renderOpenComponent","renderCloseComponent","shouldCoverButton","ariaDescribedBy","openButtonAriaLabel","closeButtonAriaLabel","containerAriaLabel","closeButtonDataProps","disableAnimation","hasFullWidth"]);const G=void 0!==S,[Q,z]=t.useState(!1),K=t.useRef(null),N=t.useRef(null),U=t.useRef(null),J=t.useRef(s.default()),V=t.useRef(null),X=P?`PopoverContainer_${J.current}`:void 0,Y=G?S:Q,Z=!o.default("screen and (prefers-reduced-motion: no-preference)"),ee=function(e,r,o){return t.useMemo((()=>[n.offset(e?({rects:e})=>({mainAxis:-e.reference.height}):o),n.flip({fallbackStrategy:"initialPlacement"}),...r?[n.shift()]:[]]),[e,r,o])}(R,"center"===q,w),{isInFlatTable:te}=t.useContext(x.default),re=t.useCallback((e=>{var t;G||z(!1),null==I||I(e),Y&&(null===(t=N.current)||void 0===t||t.focus())}),[G,Y,I]),ne=t.useCallback((e=>{!c.default.composedPath(e).find((e=>e instanceof HTMLElement&&"input"===e.getAttribute("data-element")&&"true"===e.getAttribute("aria-expanded")))&&Y&&c.default.isEscKey(e)&&re(e)}),[re,Y]);t.useEffect((()=>(document.addEventListener("keydown",ne),()=>{document.removeEventListener("keydown",ne)})),[ne]),t.useEffect((()=>{var e;!R&&Y&&(null===(e=V.current)||void 0===e||e.focus({preventScroll:!0}))}),[Y,R,V]),b.default(R?void 0:V,R?void 0:N,re);const oe=t.useCallback((e=>{const t=Array.from(document.querySelectorAll(v.defaultFocusableSelectors)||[]).filter((e=>e===N.current||-1!==Number(e.tabIndex))),r=t.indexOf(N.current);t[r+1].focus(),re(e)}),[]),ae=(e,t)=>{var r;"next"===e&&oe?oe(t):"prev"===e&&(null===(r=N.current)||void 0===r||r.focus())},ie={tabIndex:0,"aria-expanded":Y,"aria-haspopup":"dialog",isOpen:Y,"data-element":"popover-container-open-component",onClick:e=>{G||z(!Y),Y?null==I||I(e):null==A||A(e)},ref:N,"aria-label":L||P,id:Y?void 0:X,"data-popover-container-button":"true"},le={"data-element":"popover-container-close-component",tabIndex:0,onClick:e=>{re(e)},ref:K,"aria-label":F,closeButtonDataProps:H},se=d.default((e=>{G||z(!1),Y&&(null==I||I(e))}),"mousedown"),[ue,de]=t.useState(!1),{isWithinGlobalHeader:ce}=j.useGlobalHeader();t.useImperativeHandle(y,(()=>({focusButton(){var e;null===(e=N.current)||void 0===e||e.focus()}})),[]);const pe=()=>e.jsxs(a.PopoverContainerContentStyle,_(h({"data-element":"popover-container-content",role:"dialog","aria-labelledby":X,"aria-label":M,"aria-describedby":D,p:"16px 24px",$borderRadius:k,$popoverOffset:w,ref:V,tabIndex:-1,disableAnimation:W||Z,zIndex:ce?1e4:2e3},u.default($)),{children:[e.jsxs(a.PopoverContainerHeaderStyle,{children:[P&&e.jsx(a.PopoverContainerTitleStyle,{id:X,"data-element":"popover-container-title",children:P}),E(le)]}),C]}));return e.jsxs(a.PopoverContainerWrapperStyle,_(h({onMouseDown:se,hasFullWidth:T},m.default("popover-container",$)),{children:[e.jsx("div",{ref:U,children:B(ie)}),e.jsx(r.CSSTransition,{nodeRef:V,timeout:{exit:W?0:300},in:Y,unmountOnExit:!0,onEntered:R?()=>de(!0):void 0,onExiting:R?()=>de(!1):void 0,children:e.jsx(l.default,{reference:U,placement:"center"===q?"bottom":"right"===q?"bottom-start":"bottom-end",popoverStrategy:W||Z?"fixed":"absolute",middleware:ee,childRefOverride:V,disableBackgroundUI:te,children:R?e.jsx(f.default.Provider,{value:{isAnimationComplete:ue},children:e.jsx(p.default,{wrapperRef:V,isOpen:Y,children:pe()})}):e.jsxs(e.Fragment,{children:[e.jsx("div",{"data-element":"tab-guard-top",tabIndex:0,onFocus:e=>ae("prev",e)}),pe(),e.jsx("div",{"data-element":"tab-guard-bottom",tabIndex:0,onFocus:e=>ae("next",e)})]})})})]}))}));exports.PopoverContainer=C,exports.default=C,exports.renderClose=g,exports.renderOpen=O;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime");require("react");var r=require("../../box/box.component.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime");require("react");var r=require("../../box/box.component.js"),i=require("../../divider/divider.component.js");const t=()=>e.jsx(r.Box,{position:"absolute",bottom:"0px",left:"0px",height:"1px",width:"100vw",m:"0px 0px -1px 0px",children:e.jsx(i.Divider,{type:"horizontal","aria-hidden":!0,"data-role":"hr",m:0})});exports.FlexTileDivider=t,exports.default=t;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("../menu/__internal__/menu.context.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("../menu/__internal__/menu.context.js"),i=require("./vertical-divider.style.js"),n=require("../../__internal__/utils/helpers/tags/tags.js"),l=require("../../__internal__/utils/logger/index.js");function a(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function o(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},i=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),i.forEach((function(r){a(e,r,t[r])}))}return e}function c(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}let u=!1;const s=a=>{var{h:s,height:d,displayInline:p=!1,tint:y=80,"aria-hidden":f}=a,b=function(e,r){if(null==e)return{};var t,i,n=function(e,r){if(null==e)return{};var t,i,n={},l=Object.keys(e);for(i=0;i<l.length;i++)t=l[i],r.indexOf(t)>=0||(n[t]=e[t]);return n}(e,r);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(i=0;i<l.length;i++)t=l[i],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(n[t]=e[t])}return n}(a,["h","height","displayInline","tint","aria-hidden"]);u||(u=!0,l.default.deprecate("`VerticalDivider` is deprecated and will soon be removed. Please use `Divider` instead."));const{inMenu:O}=r.useContext(t.default);return e.jsx(i.StyledVerticalWrapper,c(o(c(o({"data-role":"vertical-divider",p:b.p||3,height:s||d,displayInline:p},b),{as:O?"li":"div","aria-hidden":O||f}),n.default("vertical-divider",b)),{children:e.jsx(i.StyledDivider,{"data-role":"divider",tint:y})}))};s.displayName="VerticalDivider",exports.VerticalDivider=s,exports.default=s;
|