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

package/README.md

@@ -2,9 +2,10 @@
 
 > React component library for OpenFin Workspace products – Informed by [Spatial](https://www.figma.com/file/0Y3pKZj0tJWuleF12h5Sua/Spatial---Components).
 
-**Storybook:** [cdn.openfin.co/workspace/storybook](https://cdn.openfin.co/workspace/storybook)
+**Storybook:** [openfin-ui.netlify.com](https://openfin-ui.netlify.com) (pw: pizza)
 **NPM Package:** [@openfin/ui-library](https://www.npmjs.com/package/@openfin/ui-library)
 
+[![Netlify Status](https://api.netlify.com/api/v1/badges/8fc15443-c69c-473b-b5cf-c5dbc516b0bf/deploy-status)](https://app.netlify.com/sites/openfin-ui/deploys)
 ![Release Package](https://github.com/openfin/ui-library/actions/workflows/release-package.yml/badge.svg)
 
 ## What is this for?

package/dist/components/controls/ExpandableButton/expandableButton.d.ts

@@ -11,6 +11,5 @@ export type ExpandableButtonProps = Omit<ButtonProps, 'shape'> & {
     closePanelOnSecondaryButtonClick?: boolean;
     expandDirection?: ExpandDirection;
     stretchExpandablePanel?: boolean;
-    document?: Document;
 };
 export declare const ExpandableButton: (props: ExpandableButtonProps) => JSX.Element;

package/dist/components/controls/ExpandableButton/expandablePanel.d.ts

@@ -9,6 +9,5 @@ export type ExpandablePanelProps = {
     expandDirection: ExpandDirection;
     panelId?: string;
     stretch?: boolean;
-    document?: Document;
 };
 export declare const ExpandablePanel: (props: ExpandablePanelProps) => JSX.Element;

package/dist/index.js

@@ -94,7 +94,7 @@ var e={8594:(e,t,n)=>{n.d(t,{Z:()=>o});var r=/^((children|dangerouslySetInnerHTM
       &:focus {
         border-color: ${({theme:e})=>e.palette.inputFocused};
       }
-    `}}},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)`
+    `}}},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)`
   svg path {
     color: ${({theme:e,kind:t})=>C[t](e)};
   }
@@ -120,7 +120,7 @@ var e={8594:(e,t,n)=>{n.d(t,{Z:()=>o});var r=/^((children|dangerouslySetInnerHTM
 `,w=l.default.div`
   position: relative;
   display: inline-block;
-`},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)`
+`},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)`
   padding-bottom: 1px;
   padding-top: 1px;
   white-space: nowrap;

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@openfin/ui-library",
   "description": "OpenFin UI Component Library",
-  "version": "0.16.0-alpha.1684433862",
+  "version": "0.16.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "repository": "github:openfin/ui-library",
-  "homepage": "https://cdn.openfin.co/workspace/storybook",
+  "homepage": "https://openfin-ui.netlify.app",
   "files": [
     "dist/**/*"
   ],
@@ -17,13 +17,12 @@
     "build:src": "webpack build --config webpack.config.js --mode production",
     "build:clean": "rimraf dist",
     "build:dev": "webpack build --config webpack.config.js --mode development && yalc push",
-    "test:ci": "jest",
-    "test": "jest --watch",
+    "test": "jest",
     "lint": "npm run lint:typescript && npm run lint:styles",
     "lint:typescript": "eslint \"./src/**/*.{ts,tsx}\"",
     "lint:styles": "stylelint \"./src/**/*.{ts,tsx}\"",
-    "storybook": "storybook dev -p 6006 -s public",
-    "storybook:build": "storybook build -s public",
+    "storybook": "start-storybook -p 6006 -s public --no-manager-cache",
+    "storybook:build": "build-storybook -s public",
     "storybook:cache-clear": "rimraf ./node_modules/.cache/storybook"
   },
   "peerDependencies": {
@@ -39,13 +38,14 @@
   },
   "devDependencies": {
     "@babel/core": "^7.18.6",
-    "@storybook/addon-actions": "^7.0.11",
-    "@storybook/addon-essentials": "^7.0.11",
-    "@storybook/addon-interactions": "^7.0.11",
-    "@storybook/addon-links": "^7.0.11",
-    "@storybook/node-logger": "^7.0.11",
-    "@storybook/react": "^7.0.11",
-    "@storybook/react-webpack5": "^7.0.11",
+    "@storybook/addon-actions": "^6.5.9",
+    "@storybook/addon-essentials": "^6.5.9",
+    "@storybook/addon-interactions": "^6.5.9",
+    "@storybook/addon-links": "^6.5.9",
+    "@storybook/builder-webpack5": "^6.5.9",
+    "@storybook/manager-webpack5": "^6.5.9",
+    "@storybook/node-logger": "^6.5.9",
+    "@storybook/react": "^6.5.9",
     "@testing-library/dom": "^8.14.0",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^12.1.5",
@@ -58,30 +58,30 @@
     "@types/react-dom": "^17.0.2",
     "@types/styled-components": "^5.1.25",
     "@types/tinycolor2": "^1.4.3",
-    "@typescript-eslint/eslint-plugin": "^5.59.6",
-    "@typescript-eslint/parser": "^5.59.6",
+    "@typescript-eslint/eslint-plugin": "^5.29.0",
+    "@typescript-eslint/parser": "^5.29.0",
     "babel-loader": "^8.2.5",
     "copy-webpack-plugin": "^11.0.0",
     "cross-env": "^7.0.3",
     "css-loader": "^6.7.3",
-    "eslint": "^8.40.0",
-    "eslint-config-prettier": "^8.8.0",
-    "eslint-plugin-jest": "^27.2.1",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.32.2",
+    "eslint": "^8.18.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-jest": "^26.5.3",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.30.0",
     "file-loader": "^6.2.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^28.1.2",
     "jest-environment-jsdom": "^28.1.2",
-    "postcss-styled-syntax": "^0.4.0",
-    "prettier": "^2.8.8",
+    "prettier": "^2.7.1",
     "react-is": "^17.0.2",
     "react-refresh": "^0.14.0",
     "rimraf": "^3.0.2",
-    "storybook": "^7.0.11",
-    "storybook-addon-performance": "^0.17.1",
-    "stylelint": "^15.6.1",
-    "stylelint-config-recommended": "^12.0.0",
+    "storybook-addon-performance": "^0.16.1",
+    "stylelint": "^14.9.1",
+    "stylelint-config-recommended": "^8.0.0",
+    "stylelint-config-styled-components": "^0.1.1",
+    "stylelint-processor-styled-components": "^1.10.0",
     "ts-jest": "^28.0.5",
     "ts-loader": "^9.3.1",
     "typescript": "^4.7.4",
@@ -148,13 +148,13 @@
     }
   },
   "stylelint": {
-    "customSyntax": "postcss-styled-syntax",
-    "extends": [
-      "stylelint-config-recommended"
+    "processors": [
+      "stylelint-processor-styled-components"
     ],
-    "rules": {
-      "no-empty-source": null
-    }
+    "extends": [
+      "stylelint-config-recommended",
+      "stylelint-config-styled-components"
+    ]
   },
   "prettier": {
     "endOfLine": "lf",