@openfin/ui-library 0.21.0-alpha.1690994284 → 0.21.0-alpha.1691437502

package/dist/components/controls/CollapsibleCard/collapsibleCard.d.ts

@@ -1,10 +1,15 @@
 import { FC, ReactNode } from 'react';
-export type CollapsibleCardProps = {
+export interface CollapsibleCardProps extends Omit<CollapsibleCardStatelessProps, 'expanded' | 'onExpand'> {
+    expanded?: boolean;
+}
+export declare const CollapsibleCard: FC<CollapsibleCardProps>;
+export interface CollapsibleCardStatelessProps {
     title: string | ReactNode;
     badgeText?: number;
     maxHeight?: number;
     fixedHeader?: boolean;
     children: ReactNode;
-    expanded?: boolean;
-};
-export declare const CollapsibleCard: FC<CollapsibleCardProps>;
+    expanded: boolean;
+    onExpand: (expanded: boolean) => void;
+}
+export declare const CollapsibleCardStateless: (props: CollapsibleCardStatelessProps) => JSX.Element;

package/dist/components/elements/Label/label.d.ts

@@ -5,6 +5,7 @@ interface LabelProps {
     text?: string;
     htmlFor?: string;
     helperText?: string;
+    inline?: boolean;
 }
-export declare const Label: ({ icon, text, helperText, htmlFor }: LabelProps) => JSX.Element;
+export declare const Label: ({ icon, text, helperText, htmlFor, inline }: LabelProps) => JSX.Element;
 export {};

package/dist/index.js

@@ -107,7 +107,7 @@ var e={8594:(e,t,n)=>{n.d(t,{Z:()=>o});var r=/^((children|dangerouslySetInnerHTM
   padding: ${({theme:e})=>e.px.small} ${({theme:e})=>e.px.small} 0px
     ${({theme:e})=>e.px.base};
   width: 100%;
-`},124: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.CollapsibleCard=void 0;const o=n(5893),i=n(6689),a=r(n(7518)),l=n(3136),c=n(9634),s=n(1335),u=n(3911),d=n(7769),f=n(9507);t.CollapsibleCard=e=>{const[t,n]=(0,i.useState)(e.expanded||!1),r=e=>{n(null!=e?e:!t)};return(0,o.jsxs)(C,Object.assign({"data-testid":"collapsible-card"},{children:[(0,o.jsxs)(h,Object.assign({"aria-expanded":t,"data-testid":"heading-container",style:{position:e.fixedHeader?"sticky":void 0,top:0},onClick:()=>r(),tabIndex:0,onKeyDown:e=>{switch(e.code){case"Enter":case"Space":e.preventDefault(),r()}}},{children:[(0,o.jsx)(p,{children:e.title}),(0,o.jsxs)("div",Object.assign({id:"icon-container"},{children:[void 0!==e.badgeText&&(0,o.jsx)(l.Badge,{count:e.badgeText,id:"collapsible-card-heading-badge","data-testid":"collapsible-card-heading-badge"}),(0,o.jsx)(c.Icon,{icon:t?"ChevronUpIcon":"ChevronDownIcon"})]}))]})),t&&(0,o.jsx)(u.CardContainer,Object.assign({maxHeight:e.maxHeight||"none"},{children:(0,o.jsx)("div",{children:e.children})}))]}))};const C=a.default.div`
+`},124: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.CollapsibleCardStateless=t.CollapsibleCard=void 0;const o=n(5893),i=n(6689),a=r(n(7518)),l=n(3136),c=n(9634),s=n(1335),u=n(3911),d=n(7769),f=n(9507);t.CollapsibleCard=e=>{const[n,r]=(0,i.useState)(e.expanded||!1);return(0,o.jsx)(t.CollapsibleCardStateless,Object.assign({},e,{expanded:n,onExpand:e=>r(!e)}))},t.CollapsibleCardStateless=e=>(0,o.jsxs)(C,Object.assign({"data-testid":"collapsible-card"},{children:[(0,o.jsxs)(h,Object.assign({"aria-expanded":e.expanded,"data-testid":"heading-container",style:{position:e.fixedHeader?"sticky":void 0,top:0},onClick:()=>e.onExpand(e.expanded),tabIndex:0,onKeyDown:t=>{switch(t.code){case"Enter":case"Space":t.preventDefault(),e.onExpand(e.expanded)}}},{children:[(0,o.jsx)(p,{children:e.title}),(0,o.jsxs)("div",Object.assign({id:"icon-container"},{children:[void 0!==e.badgeText&&(0,o.jsx)(l.Badge,{count:e.badgeText,id:"collapsible-card-heading-badge","data-testid":"collapsible-card-heading-badge"}),(0,o.jsx)(c.Icon,{icon:e.expanded?"ChevronUpIcon":"ChevronDownIcon"})]}))]})),e.expanded&&(0,o.jsx)(u.CardContainer,Object.assign({maxHeight:e.maxHeight||"none"},{children:(0,o.jsx)("div",{children:e.children})}))]}));const C=a.default.div`
   position: relative;
   display: inline-block;
   width: 100%;
@@ -579,7 +579,7 @@ var e={8594:(e,t,n)=>{n.d(t,{Z:()=>o});var r=/^((children|dangerouslySetInnerHTM
   transform: scale(70%);
   right: -${({theme:e})=>e.px.base};
   top: -${({theme:e})=>e.px.small};
-`},144: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(3117),t)},1944: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.Label=void 0;const o=n(5893),i=r(n(7518)),a=n(1335),l=n(7769),c=n(9634);t.Label=({icon:e,text:t,helperText:n,htmlFor:r})=>(0,o.jsxs)(f,{children:[(0,o.jsxs)("div",Object.assign({style:{display:"flex"}},{children:["function"==typeof e?e():e?(0,o.jsx)(d,{icon:e}):null,(0,o.jsx)(u,Object.assign({as:"label",htmlFor:r,weight:"bold"},{children:t}))]})),n&&(0,o.jsx)(s,{children:n})]});const s=(0,i.default)(l.Text)`
+`},144: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(3117),t)},1944: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.Label=void 0;const o=n(5893),i=r(n(7518)),a=n(1335),l=n(7769),c=n(9634);t.Label=({icon:e,text:t,helperText:n,htmlFor:r,inline:i})=>(0,o.jsxs)(f,Object.assign({inline:i},{children:[(0,o.jsxs)("div",Object.assign({style:{display:"flex"}},{children:["function"==typeof e?e():e?(0,o.jsx)(d,{icon:e}):null,(0,o.jsx)(u,Object.assign({as:"label",htmlFor:r,weight:"bold"},{children:t}))]})),n&&(0,o.jsx)(s,{children:n})]}));const s=(0,i.default)(l.Text)`
   size: ${({theme:e})=>e.fontSize.base};
   color: ${({theme:e})=>e.palette.textHelp};
 `,u=(0,i.default)(l.Text)`
@@ -594,6 +594,8 @@ var e={8594:(e,t,n)=>{n.d(t,{Z:()=>o});var r=/^((children|dangerouslySetInnerHTM
   display: flex;
   flex-direction: column;
   margin-bottom: ${({theme:e})=>e.px.small};
+
+  ${({inline:e,theme:t})=>e&&`cursor: pointer;\n     margin-bottom: 0;\n     margin-left: ${t.px.small};\n     font-weight: ${t.fontWeight.normal};\n  `}
 `},9239: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(8275),t),o(n(693),t)},8275:function(e,t,n){var r=this&&this.__rest||function(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);o<r.length;o++)t.indexOf(r[o])<0&&Object.prototype.propertyIsEnumerable.call(e,r[o])&&(n[r[o]]=e[r[o]])}return n},o=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.Loader=void 0;const i=n(5893),a=o(n(7518)),l=n(9634);t.Loader=(0,a.default)((e=>{var t=r(e,[]);return(0,i.jsx)(l.Icon,Object.assign({},t,{children:(0,i.jsx)("svg",Object.assign({width:"100%",height:"100%",viewBox:"0 0 38 38",xmlns:"http://www.w3.org/2000/svg",stroke:"currentColor"},{children:(0,i.jsx)("g",Object.assign({fill:"none",fillRule:"evenodd"},{children:(0,i.jsxs)("g",Object.assign({transform:"translate(1 1)",strokeWidth:"2"},{children:[(0,i.jsx)("circle",{strokeOpacity:".5",cx:"18",cy:"18",r:"18"}),(0,i.jsx)("path",Object.assign({d:"M36 18c0-9.94-8.06-18-18-18"},{children:(0,i.jsx)("animateTransform",{attributeName:"transform",type:"rotate",from:"0 18 18",to:"360 18 18",dur:"1s",repeatCount:"indefinite"})}))]}))}))}))}))}))``},693: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.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),i=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)"default"!==n&&Object.prototype.hasOwnProperty.call(e,n)&&r(t,e,n);return o(t,e),t},a=this&&this.__rest||function(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);o<r.length;o++)t.indexOf(r[o])<0&&Object.prototype.propertyIsEnumerable.call(e,r[o])&&(n[r[o]]=e[r[o]])}return n};Object.defineProperty(t,"__esModule",{value:!0}),t.OpenfinLoader=void 0;const l=n(5893),c=i(n(7518)),s=n(9634);t.OpenfinLoader=(0,c.default)((e=>{var t=a(e,[]);return(0,l.jsx)(s.Icon,Object.assign({},t,{children:(0,l.jsxs)("svg",Object.assign({width:"100%",height:"100%",viewBox:"0 0 18 18",fill:"none",xmlns:"http://www.w3.org/2000/svg"},{children:[(0,l.jsx)(u,{d:"\n            M 17.1222 6.887\n            C 17.0141 6.77887 16.898 6.67911 16.7748 6.58856\n            L 16.7295 6.55715\n            C 16.7035 6.53903 16.6781 6.5203 16.6515 6.50278\n            C 16.625 6.48526 16.5941 6.46653 16.5657 6.44901\n            L 16.5259 6.42424\n            C 16.4902 6.4031 16.454 6.38316 16.4177 6.36383\n            L 16.3966 6.35236\n            C 15.9678 6.12742 15.491 6.00968 15.0068 6.00922\n            C 14.2101 6.00858 13.4463 5.69149 12.8834 5.12772\n            C 12.3205 4.56395 12.0048 3.79971 12.0056 3.00314\n            C 12.0078 1.79066 11.2792 0.696263 10.1596 0.230293\n            C 9.04002 -0.235676 7.74992 0.0185592 6.89093 0.874441\n            C 6.03194 1.73032 5.77323 3.01928 6.23546 4.14024\n            C 6.69768 5.26119 7.7898 5.99337 9.00251 5.99532\n            C 9.79924 5.99596 10.5631 6.31305 11.1259 6.87682\n            C 11.6888 7.44059 12.0046 8.20484 12.0038 9.0014\n            C 12.0031 9.79797 11.686 10.5616 11.1221 11.1244\n            C 10.5582 11.6871 9.7938 12.0028 8.99708 12.002\n            C 8.20096 12.0027 7.43727 11.6867 6.87438 11.1238\n            C 6.3115 10.561 5.99564 9.79736 5.99644 9.0014\n            C 5.99644 7.34586 4.65409 6.00378 2.99822 6.00378\n            C 1.34235 6.00378 0 7.34586 0 9.0014\n            C 0 10.6569 1.34235 11.999 2.99822 11.999\n            C 4.65409 11.999 5.99644 13.3411 5.99644 14.9966\n            C 5.99644 16.6553 7.34136 18 9.0004 18\n            C 10.6594 18 12.0044 16.6553 12.0044 14.9966\n            C 12.0044 13.3411 13.3467 11.999 15.0026 11.999\n            C 15.5379 11.9994 16.0635 11.8563 16.5247 11.5846\n            C 16.5645 11.561 16.6038 11.5363 16.6455 11.5109\n            L 16.654 11.5055\n            C 16.6902 11.4813 16.7265 11.4559 16.7615 11.4305\n            L 16.7772 11.4197\n            C 16.8086 11.3967 16.8376 11.372 16.8709 11.3472\n            L 16.8975 11.3266\n            C 16.9265 11.3031 16.9543 11.2783 16.9827 11.2535\n            L 17.0135 11.227\n            C 17.0497 11.1943 17.0854 11.1605 17.1204 11.1255\n            L 17.1259 11.1206\n            C 17.2553 10.9906 17.3726 10.8491 17.4763 10.6978\n            C 17.4989 10.6651 17.5206 10.6321 17.5416 10.5987\n            C 18.2843 9.415 18.1104 7.8752 17.1222 6.887Z\n            ",fill:"currentColor"}),(0,l.jsx)(d,{cx:"9",cy:"3",r:"2.9",fill:"currentColor",angle:0}),(0,l.jsx)(d,{cx:"15",cy:"9",r:"2.75",fill:"currentColor",angle:-90}),(0,l.jsx)(d,{cx:"9",cy:"15",r:"2.5",fill:"currentColor",angle:-180}),(0,l.jsx)(d,{cx:"3",cy:"9",r:"2.25",fill:"currentColor",angle:-270})]}))}))}))``;const u=c.default.path`
   @keyframes logoAnimation {
     0% {
@@ -657,20 +659,14 @@ var e={8594:(e,t,n)=>{n.d(t,{Z:()=>o});var r=/^((children|dangerouslySetInnerHTM
   margin-top: ${({theme:e})=>e.px.small};
 `,s=(0,i.default)(a.Text)`
   color: ${({theme:e})=>e.palette.textHelp};
-`},358:function(e,t,n){var r=this&&this.__rest||function(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);o<r.length;o++)t.indexOf(r[o])<0&&Object.prototype.propertyIsEnumerable.call(e,r[o])&&(n[r[o]]=e[r[o]])}return n},o=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.StyledInputField=t.BaseInput=void 0;const i=n(5893),a=n(6689),l=o(n(7518)),c=n(1335),s=n(9507),u=n(7769),d=n(7030),f=n(1944);t.BaseInput=(0,a.forwardRef)(((e,n)=>{var{className:o,renderInput:a,message:l,label:c,status:s,name:u,icon:C,type:g="text",helperText:m,placeholder:w}=e,b=r(e,["className","renderInput","message","label","status","name","icon","type","helperText","placeholder"]);const y="checkbox"===g||"radio"===g;return(0,i.jsxs)(v,Object.assign({flexDirection:"column",alignItems:"flex-start"},{children:[(0,i.jsxs)(p,Object.assign({inline:y},{children:[!!c&&(0,i.jsx)(f.Label,{icon:C,text:c,helperText:m,htmlFor:u}),!!a&&a(Object.assign({name:u,status:s,type:g},b)),!a&&(0,i.jsx)(t.StyledInputField,Object.assign({className:o,name:u,placeholder:w,status:s,type:g},b,{ref:n}))]})),l&&("critical"===s?(0,i.jsx)(d.ValidationError,{children:l}):(0,i.jsx)(h,Object.assign({status:s},{children:l})))]}))})),t.BaseInput.displayName="BaseInput";const C=(0,l.default)(c.Box)`
-  display: flex;
-  flex-direction: column;
-  margin-bottom: ${({theme:e})=>e.px.small};
-`,p=(0,l.default)(c.Box)`
+`},358:function(e,t,n){var r=this&&this.__rest||function(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);o<r.length;o++)t.indexOf(r[o])<0&&Object.prototype.propertyIsEnumerable.call(e,r[o])&&(n[r[o]]=e[r[o]])}return n},o=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.StyledInputField=t.BaseInput=void 0;const i=n(5893),a=n(6689),l=o(n(7518)),c=n(1335),s=n(9507),u=n(7769),d=n(7030),f=n(1944);t.BaseInput=(0,a.forwardRef)(((e,n)=>{var{className:o,renderInput:a,message:l,label:c,status:s,name:u,icon:v,type:g="text",helperText:m,placeholder:w}=e,b=r(e,["className","renderInput","message","label","status","name","icon","type","helperText","placeholder"]);const y="checkbox"===g||"radio"===g;return(0,i.jsxs)(h,Object.assign({flexDirection:"column",alignItems:"flex-start"},{children:[(0,i.jsxs)(C,Object.assign({inline:y},{children:[!!c&&(0,i.jsx)(f.Label,{inline:y,icon:v,text:c,helperText:m,htmlFor:u}),!!a&&a(Object.assign({name:u,status:s,type:g},b)),!a&&(0,i.jsx)(t.StyledInputField,Object.assign({className:o,name:u,placeholder:w,status:s,type:g},b,{ref:n}))]})),l&&("critical"===s?(0,i.jsx)(d.ValidationError,{children:l}):(0,i.jsx)(p,Object.assign({status:s},{children:l})))]}))})),t.BaseInput.displayName="BaseInput";const C=(0,l.default)(c.Box)`
   align-items: ${({inline:e})=>e?"center":"flex-start"};
   flex-direction: ${({inline:e})=>e?"row-reverse":"column"};
   justify-content: ${({inline:e})=>e?"flex-end":"flex-start"};
   width: 100%;
-
-  ${({inline:e,theme:t})=>e&&`\n    ${C} {\n      cursor: pointer;\n      margin-bottom: 0;\n      margin-left: ${t.px.small};\n      font-weight: ${t.fontWeight.normal};\n    }\n  `}
-`,h=(0,l.default)(u.Text)`
+`,p=(0,l.default)(u.Text)`
   color: ${({theme:e,status:t})=>(0,s.getStatusColor)(e,t,"textHelp")};
-`,v=(0,l.default)(c.Box)`
+`,h=(0,l.default)(c.Box)`
   font-size: ${({theme:e})=>e.fontSize.base};
   user-select: none;
 `;t.StyledInputField=l.default.input`

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@openfin/ui-library",
   "description": "OpenFin UI Component Library",
-  "version": "0.21.0-alpha.1690994284",
+  "version": "0.21.0-alpha.1691437502",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "repository": "github:openfin/ui-library",