@openfin/ui-library 0.16.0-alpha.1684420286 → 0.16.0-alpha.1684433862

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.
@@ -11,5 +11,6 @@ export type ExpandableButtonProps = Omit<ButtonProps, 'shape'> & {
11
11
  closePanelOnSecondaryButtonClick?: boolean;
12
12
  expandDirection?: ExpandDirection;
13
13
  stretchExpandablePanel?: boolean;
14
+ document?: Document;
14
15
  };
15
16
  export declare const ExpandableButton: (props: ExpandableButtonProps) => JSX.Element;
@@ -9,5 +9,6 @@ export type ExpandablePanelProps = {
9
9
  expandDirection: ExpandDirection;
10
10
  panelId?: string;
11
11
  stretch?: boolean;
12
+ document?: Document;
12
13
  };
13
14
  export declare const ExpandablePanel: (props: ExpandablePanelProps) => JSX.Element;
package/dist/index.js CHANGED
@@ -94,7 +94,7 @@ var e={8594:(e,t,n)=>{n.d(t,{Z:()=>o});var r=/^((children|dangerouslySetInnerHTM
94
94
  &:focus {
95
95
  border-color: ${({theme:e})=>e.palette.inputFocused};
96
96
  }
97
- `}}},4130:function(e,t,n){var r=this&&this.__createBinding||(Object.create?function(e,t,n,r){void 0===r&&(r=n);var o=Object.getOwnPropertyDescriptor(t,n);o&&!("get"in o?!t.__esModule:o.writable||o.configurable)||(o={enumerable:!0,get:function(){return t[n]}}),Object.defineProperty(e,r,o)}:function(e,t,n,r){void 0===r&&(r=n),e[r]=t[n]}),o=this&&this.__exportStar||function(e,t){for(var n in e)"default"===n||Object.prototype.hasOwnProperty.call(t,n)||r(t,e,n)};Object.defineProperty(t,"__esModule",{value:!0}),o(n(4249),t),o(n(6126),t)},9644:(e,t)=>{var n;Object.defineProperty(t,"__esModule",{value:!0}),t.ExpandDirection=void 0,(n=t.ExpandDirection||(t.ExpandDirection={}))[n.Up=0]="Up",n[n.Down=1]="Down"},4021:function(e,t,n){var r=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.ExpandableButton=void 0;const o=n(5893),i=n(6689),a=n(4130),l=r(n(7518)),c=n(9634),s=n(9141),u=n(3030),d=n(1335),f=n(9644);t.ExpandableButton=e=>{var t,n,r,l,c,C;const[b,y]=(0,i.useState)({show:!1,requestedByCollapse:!1}),x={size:e.size,kind:e.kind,disabled:e.disabled},L=Object.assign(Object.assign({},e),{shape:a.ButtonShape.square,"aria-label":null!==(t=e["aria-label"])&&void 0!==t?t:`Primary Button ${e.title}`}),O=null!==(n=e.expandDirection)&&void 0!==n?n:f.ExpandDirection.Down;return(0,i.useEffect)((()=>{if(!b.requestedByCollapse)return;const e=setTimeout((()=>y({requestedByCollapse:!1,show:!1})),200);return()=>clearTimeout(e)}),[b.requestedByCollapse]),(0,o.jsxs)(w,{children:[(0,o.jsxs)(m,{children:[(0,o.jsx)(v,Object.assign({},L,{children:(0,o.jsx)(h,{children:null!==(r=e.children)&&void 0!==r?r:L.title})})),e.secondaryButtons&&e.secondaryButtons.length>0&&(0,o.jsx)(d.Box,Object.assign({id:"dropdown-container"},{children:(0,o.jsxs)(g,Object.assign({},x,{role:"combobox",onClick:()=>{b.requestedByCollapse||y({requestedByCollapse:!1,show:!b.show})},"aria-label":"Expand Secondary Buttons Panel","aria-expanded":b.show},{children:[O===f.ExpandDirection.Down&&(0,o.jsx)(p,{kind:null!==(l=e.kind)&&void 0!==l?l:a.ButtonKind.primary,icon:"CaretDownIcon"}),O===f.ExpandDirection.Up&&(0,o.jsx)(p,{kind:null!==(c=e.kind)&&void 0!==c?c:a.ButtonKind.primary,icon:"CaretUpIcon"})]}))}))]}),e.secondaryButtons&&e.secondaryButtons.length>0&&(0,o.jsx)(s.AnimatePresence,{children:b.show&&(0,o.jsx)(u.ExpandablePanel,{expandDirection:O,secondaryButtons:null!==(C=e.secondaryButtons)&&void 0!==C?C:[],stretch:e.stretchExpandablePanel,closePanelOnSecondaryButtonClick:e.closePanelOnSecondaryButtonClick,onCollapseRequest:()=>y({show:!1,requestedByCollapse:!0}),buttonSize:e.size})})]})};const C={[a.ButtonKind.primary]:e=>e.palette.brandPrimaryText,[a.ButtonKind.secondary]:e=>e.palette.brandSecondaryText,[a.ButtonKind.textOnly]:e=>e.palette.textDefault},p=(0,l.default)(c.Icon)`
97
+ `}}},4130:function(e,t,n){var r=this&&this.__createBinding||(Object.create?function(e,t,n,r){void 0===r&&(r=n);var o=Object.getOwnPropertyDescriptor(t,n);o&&!("get"in o?!t.__esModule:o.writable||o.configurable)||(o={enumerable:!0,get:function(){return t[n]}}),Object.defineProperty(e,r,o)}:function(e,t,n,r){void 0===r&&(r=n),e[r]=t[n]}),o=this&&this.__exportStar||function(e,t){for(var n in e)"default"===n||Object.prototype.hasOwnProperty.call(t,n)||r(t,e,n)};Object.defineProperty(t,"__esModule",{value:!0}),o(n(4249),t),o(n(6126),t)},9644:(e,t)=>{var n;Object.defineProperty(t,"__esModule",{value:!0}),t.ExpandDirection=void 0,(n=t.ExpandDirection||(t.ExpandDirection={}))[n.Up=0]="Up",n[n.Down=1]="Down"},4021:function(e,t,n){var r=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.ExpandableButton=void 0;const o=n(5893),i=n(6689),a=n(4130),l=r(n(7518)),c=n(9634),s=n(9141),u=n(3030),d=n(1335),f=n(9644);t.ExpandableButton=e=>{var t,n,r,l,c,C;const[b,y]=(0,i.useState)({show:!1,requestedByCollapse:!1}),x={size:e.size,kind:e.kind,disabled:e.disabled},L=Object.assign(Object.assign({},e),{shape:a.ButtonShape.square,"aria-label":null!==(t=e["aria-label"])&&void 0!==t?t:`Primary Button ${e.title}`}),O=null!==(n=e.expandDirection)&&void 0!==n?n:f.ExpandDirection.Down;return(0,i.useEffect)((()=>{if(!b.requestedByCollapse)return;const e=setTimeout((()=>y({requestedByCollapse:!1,show:!1})),200);return()=>clearTimeout(e)}),[b.requestedByCollapse]),(0,o.jsxs)(w,{children:[(0,o.jsxs)(m,{children:[(0,o.jsx)(v,Object.assign({},L,{children:(0,o.jsx)(h,{children:null!==(r=e.children)&&void 0!==r?r:L.title})})),e.secondaryButtons&&e.secondaryButtons.length>0&&(0,o.jsx)(d.Box,Object.assign({id:"dropdown-container"},{children:(0,o.jsxs)(g,Object.assign({},x,{role:"combobox",onClick:()=>{b.requestedByCollapse||y({requestedByCollapse:!1,show:!b.show})},"aria-label":"Expand Secondary Buttons Panel","aria-expanded":b.show},{children:[O===f.ExpandDirection.Down&&(0,o.jsx)(p,{kind:null!==(l=e.kind)&&void 0!==l?l:a.ButtonKind.primary,icon:"CaretDownIcon"}),O===f.ExpandDirection.Up&&(0,o.jsx)(p,{kind:null!==(c=e.kind)&&void 0!==c?c:a.ButtonKind.primary,icon:"CaretUpIcon"})]}))}))]}),e.secondaryButtons&&e.secondaryButtons.length>0&&(0,o.jsx)(s.AnimatePresence,{children:b.show&&(0,o.jsx)(u.ExpandablePanel,{expandDirection:O,secondaryButtons:null!==(C=e.secondaryButtons)&&void 0!==C?C:[],stretch:e.stretchExpandablePanel,closePanelOnSecondaryButtonClick:e.closePanelOnSecondaryButtonClick,onCollapseRequest:()=>y({show:!1,requestedByCollapse:!0}),buttonSize:e.size,document:e.document})})]})};const C={[a.ButtonKind.primary]:e=>e.palette.brandPrimaryText,[a.ButtonKind.secondary]:e=>e.palette.brandSecondaryText,[a.ButtonKind.textOnly]:e=>e.palette.textDefault},p=(0,l.default)(c.Icon)`
98
98
  svg path {
99
99
  color: ${({theme:e,kind:t})=>C[t](e)};
100
100
  }
@@ -120,7 +120,7 @@ var e={8594:(e,t,n)=>{n.d(t,{Z:()=>o});var r=/^((children|dangerouslySetInnerHTM
120
120
  `,w=l.default.div`
121
121
  position: relative;
122
122
  display: inline-block;
123
- `},2128:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.setupExpandablePanel=void 0;const r=n(9644);t.setupExpandablePanel=(e,t,n=!1)=>{if(!e||0===e.childNodes.length)return;const o=e.parentElement,i=null==o?void 0:o.getBoundingClientRect(),a=e.getBoundingClientRect();if(!i)return;const l=a.height,c=a.width<=i.width||n?a.width:i.width,s=i.x+c>document.body.clientWidth||c<i.width;e.style.width=`${c}px`,e.style.opacity="1",s?e.style.right="0px":e.style.left="0px",t===r.ExpandDirection.Down&&(e.style.top=`${i.height}px`),t===r.ExpandDirection.Up&&(e.style.top=-1*l+"px")}},3030:function(e,t,n){var r=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.ExpandablePanel=void 0;const o=n(5893),i=r(n(7518)),a=n(9141),l=n(4130),c=n(1335),s=n(2128),u=r(n(4483)),d={type:"spring",duration:.2,bounce:.25};t.ExpandablePanel=e=>{var t;const n=`${e.panelId}-expandable-panel`;return(0,o.jsx)(u.default,Object.assign({focusTrapOptions:{fallbackFocus:`#${n}`,clickOutsideDeactivates:!0,onDeactivate:e.onCollapseRequest,initialFocus:!1}},{children:(0,o.jsx)(p,Object.assign({ref:t=>(0,s.setupExpandablePanel)(t,e.expandDirection,e.stretch),tabIndex:0,id:n,initial:"initial",exit:"hidden",buttonSize:null!==(t=e.buttonSize)&&void 0!==t?t:l.ButtonSize.base,animate:"visible",role:"menu",transition:d,onMouseOver:()=>{var e;return null===(e=document.activeElement)||void 0===e?void 0:e.blur()}},{children:e.secondaryButtons.map(((t,n)=>(0,o.jsx)(l.Button,Object.assign({className:"menu-item",tabIndex:n+1,title:t.title,role:"menuitem",size:e.buttonSize,disabled:t.disabled,kind:"textOnly",onClick:n=>((t,n)=>{e.closePanelOnSecondaryButtonClick?(n.onClick(t),e.onCollapseRequest()):n.onClick(t,(()=>e.onCollapseRequest()))})(n,t),"aria-label":t.title},{children:(0,o.jsx)(f,Object.assign({"aria-label":t.title},{children:t.title}))}),n)))}),"expandablePanel")}))};const f=(0,i.default)(c.Box)`
123
+ `},2128:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.setupExpandablePanel=void 0;const r=n(9644);t.setupExpandablePanel=(e,t,n=!1)=>{if(!e||0===e.childNodes.length)return;const o=e.parentElement,i=null==o?void 0:o.getBoundingClientRect(),a=e.getBoundingClientRect();if(!i)return;const l=a.height,c=a.width<=i.width||n?a.width:i.width,s=i.x+c>document.body.clientWidth||c<i.width;e.style.width=`${c}px`,e.style.opacity="1",s?e.style.right="0px":e.style.left="0px",t===r.ExpandDirection.Down&&(e.style.top=`${i.height}px`),t===r.ExpandDirection.Up&&(e.style.top=-1*l+"px")}},3030:function(e,t,n){var r=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.ExpandablePanel=void 0;const o=n(5893),i=r(n(7518)),a=n(9141),l=n(4130),c=n(1335),s=n(2128),u=r(n(4483)),d={type:"spring",duration:.2,bounce:.25};t.ExpandablePanel=e=>{var t;const n=`${e.panelId}-expandable-panel`;return(0,o.jsx)(u.default,Object.assign({focusTrapOptions:{fallbackFocus:`#${n}`,clickOutsideDeactivates:!0,onDeactivate:e.onCollapseRequest,initialFocus:!1,document:e.document}},{children:(0,o.jsx)(p,Object.assign({ref:t=>(0,s.setupExpandablePanel)(t,e.expandDirection,e.stretch),tabIndex:0,id:n,initial:"initial",exit:"hidden",buttonSize:null!==(t=e.buttonSize)&&void 0!==t?t:l.ButtonSize.base,animate:"visible",role:"menu",transition:d,onMouseOver:()=>{var e;return null===(e=document.activeElement)||void 0===e?void 0:e.blur()}},{children:e.secondaryButtons.map(((t,n)=>(0,o.jsx)(l.Button,Object.assign({className:"menu-item",tabIndex:n+1,title:t.title,role:"menuitem",size:e.buttonSize,disabled:t.disabled,kind:"textOnly",onClick:n=>((t,n)=>{e.closePanelOnSecondaryButtonClick?(n.onClick(t),e.onCollapseRequest()):n.onClick(t,(()=>e.onCollapseRequest()))})(n,t),"aria-label":t.title},{children:(0,o.jsx)(f,Object.assign({"aria-label":t.title},{children:t.title}))}),n)))}),"expandablePanel")}))};const f=(0,i.default)(c.Box)`
124
124
  padding-bottom: 1px;
125
125
  padding-top: 1px;
126
126
  white-space: nowrap;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@openfin/ui-library",
3
3
  "description": "OpenFin UI Component Library",
4
- "version": "0.16.0-alpha.1684420286",
4
+ "version": "0.16.0-alpha.1684433862",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
7
7
  "repository": "github:openfin/ui-library",