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

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.
@@ -8,5 +8,7 @@ export interface DropdownButtonProps extends WithStatusProps {
8
8
  handleClick: () => void;
9
9
  placeholder: string;
10
10
  selected?: MenuOption;
11
+ label?: string;
12
+ name?: string;
11
13
  }
12
14
  export declare const DropdownButton: React.ForwardRefExoticComponent<DropdownButtonProps & React.RefAttributes<HTMLButtonElement>>;
@@ -0,0 +1,10 @@
1
+ /// <reference types="react" />
2
+ import { IconType } from '../../system/ThemeProvider';
3
+ interface LabelProps {
4
+ icon?: IconType | (() => JSX.Element);
5
+ text?: string;
6
+ htmlFor?: string;
7
+ helperText?: string;
8
+ }
9
+ export declare const Label: ({ icon, text, helperText, htmlFor }: LabelProps) => JSX.Element;
10
+ export {};
@@ -1,8 +1,10 @@
1
- import { TextareaHTMLAttributes, ChangeEvent } from 'react';
1
+ import React, { TextareaHTMLAttributes, ChangeEvent } from 'react';
2
2
  import { WithStatusProps } from '../../system/HOC';
3
3
  export type TextAreaProps = TextareaHTMLAttributes<HTMLTextAreaElement> & {
4
4
  onChange?: (e?: ChangeEvent<HTMLTextAreaElement>) => void;
5
+ label?: string;
5
6
  } & WithStatusProps;
6
- export declare const TextArea: import("react").ForwardRefExoticComponent<TextareaHTMLAttributes<HTMLTextAreaElement> & {
7
+ export declare const TextArea: React.ForwardRefExoticComponent<React.TextareaHTMLAttributes<HTMLTextAreaElement> & {
7
8
  onChange?: ((e?: ChangeEvent<HTMLTextAreaElement>) => void) | undefined;
8
- } & WithStatusProps & import("react").RefAttributes<HTMLTextAreaElement>>;
9
+ label?: string | undefined;
10
+ } & WithStatusProps & React.RefAttributes<HTMLTextAreaElement>>;
package/dist/index.js CHANGED
@@ -428,9 +428,17 @@ var e={8594:(e,t,n)=>{n.d(t,{Z:()=>o});var r=/^((children|dangerouslySetInnerHTM
428
428
  border-radius: 100px;
429
429
  }
430
430
  }
431
- `},9734: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(6895),t)},162: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.DropdownButton=void 0;const o=n(5893),i=n(279),a=n(7261),l=n(9634),c=n(6689),s=r(n(7518)),u=n(1335),d=n(9507);t.DropdownButton=(0,c.forwardRef)(((e,t)=>{var n,r,l,c,s;return(0,o.jsxs)(C,Object.assign({role:"comboxbox",ref:t,tabIndex:e.tabIndex,"aria-activedescendant":e.activeDescendant,status:e.status,"aria-expanded":e.expanded,"aria-haspopup":"listbox","aria-controls":"dropdown-listbox",onClick:()=>e.handleClick(),as:"button","data-testid":"dropdown-button",title:null!==(r=null===(n=e.selected)||void 0===n?void 0:n.title)&&void 0!==r?r:e.placeholder},{children:[(null===(l=e.selected)||void 0===l?void 0:l.iconUrl)&&(0,o.jsx)(i.ButtonImage,{src:e.selected.iconUrl}),(0,o.jsx)(a.OptionTitle,Object.assign({"aria-live":"polite","data-testid":"selected-option"},{children:null!==(s=null===(c=e.selected)||void 0===c?void 0:c.title)&&void 0!==s?s:e.placeholder})),(0,o.jsx)(f,{status:e.status,icon:e.expanded?"ChevronUpIcon":"ChevronDownIcon"})]}))})),t.DropdownButton.displayName="DropdownButton";const f=(0,s.default)(l.Icon)`
431
+ `},9734: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(6895),t)},162: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.DropdownButton=void 0;const o=n(5893),i=n(279),a=n(7261),l=n(9634),c=n(6689),s=r(n(7518)),u=n(1335),d=n(9507),f=n(1944);t.DropdownButton=(0,c.forwardRef)(((e,t)=>{var n,r,l,c,s;return(0,o.jsx)(p,{children:(0,o.jsxs)(C,{children:[!!e.label&&(0,o.jsx)(f.Label,{text:e.label,htmlFor:e.name}),(0,o.jsxs)(v,Object.assign({role:"comboxbox",ref:t,name:e.name,tabIndex:e.tabIndex,"aria-activedescendant":e.activeDescendant,status:e.status,"aria-expanded":e.expanded,"aria-haspopup":"listbox","aria-controls":"dropdown-listbox",onClick:()=>e.handleClick(),as:"button","data-testid":"dropdown-button",title:null!==(r=null===(n=e.selected)||void 0===n?void 0:n.title)&&void 0!==r?r:e.placeholder},{children:[(null===(l=e.selected)||void 0===l?void 0:l.iconUrl)&&(0,o.jsx)(i.ButtonImage,{src:e.selected.iconUrl}),(0,o.jsx)(a.OptionTitle,Object.assign({"aria-live":"polite","data-testid":"selected-option"},{children:null!==(s=null===(c=e.selected)||void 0===c?void 0:c.title)&&void 0!==s?s:e.placeholder})),(0,o.jsx)(h,{status:e.status,icon:e.expanded?"ChevronUpIcon":"ChevronDownIcon"})]}))]})})})),t.DropdownButton.displayName="DropdownButton";const C=(0,s.default)(u.Box)`
432
+ align-items: flex-start;
433
+ flex-direction: column;
434
+ justify-content: flex-start;
435
+ width: 100%;
436
+ `,p=(0,s.default)(u.Box)`
437
+ font-size: ${({theme:e})=>e.fontSize.base};
438
+ user-select: none;
439
+ `,h=(0,s.default)(l.Icon)`
432
440
  color: ${({theme:e,status:t})=>(0,d.getStatusColor)(e,t,"inputBorder")};
433
- `,C=(0,s.default)(u.Box)`
441
+ `,v=(0,s.default)(u.Box)`
434
442
  align-items: center;
435
443
  background: ${({theme:e})=>e.palette.background4};
436
444
  border: 1px solid ${({theme:e})=>e.palette.inputBackground};
@@ -571,7 +579,22 @@ var e={8594:(e,t,n)=>{n.d(t,{Z:()=>o});var r=/^((children|dangerouslySetInnerHTM
571
579
  transform: scale(70%);
572
580
  right: -${({theme:e})=>e.px.base};
573
581
  top: -${({theme:e})=>e.px.small};
574
- `},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)},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`
582
+ `},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)`
583
+ size: ${({theme:e})=>e.fontSize.base};
584
+ color: ${({theme:e})=>e.palette.textHelp};
585
+ `,u=(0,i.default)(l.Text)`
586
+ text-transform: capitalize;
587
+ color: ${({theme:e})=>e.palette.textDefault};
588
+ `,d=(0,i.default)(c.Icon)`
589
+ margin-right: ${({theme:e})=>e.px.xsmall};
590
+ min-width: ${({theme:e})=>e.iconSize.small};
591
+ min-height: ${({theme:e})=>e.iconSize.small};
592
+ align-self: center;
593
+ `,f=(0,i.default)(a.Box)`
594
+ display: flex;
595
+ flex-direction: column;
596
+ margin-bottom: ${({theme:e})=>e.px.small};
597
+ `},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`
575
598
  @keyframes logoAnimation {
576
599
  0% {
577
600
  opacity: 1;
@@ -634,31 +657,20 @@ var e={8594:(e,t,n)=>{n.d(t,{Z:()=>o});var r=/^((children|dangerouslySetInnerHTM
634
657
  margin-top: ${({theme:e})=>e.px.small};
635
658
  `,s=(0,i.default)(a.Text)`
636
659
  color: ${({theme:e})=>e.palette.textHelp};
637
- `},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(9634),f=n(7030);t.BaseInput=(0,a.forwardRef)(((e,n)=>{var{className:o,renderInput:a,message:l,label:c,status:s,name:u,icon:d,type:b="text",helperText:y,placeholder:x}=e,L=r(e,["className","renderInput","message","label","status","name","icon","type","helperText","placeholder"]);const O="checkbox"===b||"radio"===b;return(0,i.jsxs)(w,Object.assign({flexDirection:"column",alignItems:"flex-start"},{children:[(0,i.jsxs)(h,Object.assign({inline:O},{children:[!!c&&(0,i.jsxs)(C,{children:[(0,i.jsxs)("div",Object.assign({style:{display:"flex"}},{children:["function"==typeof d?d():d?(0,i.jsx)(v,{icon:d}):null,(0,i.jsx)(g,Object.assign({as:"label",htmlFor:u,weight:"bold"},{children:c}))]})),y&&(0,i.jsx)(p,{children:y})]}),!!a&&a(Object.assign({name:u,status:s,type:b},L)),!a&&(0,i.jsx)(t.StyledInputField,Object.assign({className:o,name:u,placeholder:x,status:s,type:b},L,{ref:n}))]})),l&&("critical"===s?(0,i.jsx)(f.ValidationError,{children:l}):(0,i.jsx)(m,Object.assign({status:s},{children:l})))]}))})),t.BaseInput.displayName="BaseInput";const C=(0,l.default)(c.Box)`
660
+ `},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)`
638
661
  display: flex;
639
662
  flex-direction: column;
640
663
  margin-bottom: ${({theme:e})=>e.px.small};
641
- `,p=(0,l.default)(u.Text)`
642
- size: ${({theme:e})=>e.fontSize.base};
643
- color: ${({theme:e})=>e.palette.textHelp};
644
- `,h=(0,l.default)(c.Box)`
664
+ `,p=(0,l.default)(c.Box)`
645
665
  align-items: ${({inline:e})=>e?"center":"flex-start"};
646
666
  flex-direction: ${({inline:e})=>e?"row-reverse":"column"};
647
667
  justify-content: ${({inline:e})=>e?"flex-end":"flex-start"};
648
668
  width: 100%;
649
669
 
650
670
  ${({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 `}
651
- `,v=(0,l.default)(d.Icon)`
652
- margin-right: ${({theme:e})=>e.px.xsmall};
653
- min-width: ${({theme:e})=>e.iconSize.small};
654
- min-height: ${({theme:e})=>e.iconSize.small};
655
- align-self: center;
656
- `,g=(0,l.default)(u.Text)`
657
- text-transform: capitalize;
658
- color: ${({theme:e})=>e.palette.textDefault};
659
- `,m=(0,l.default)(u.Text)`
671
+ `,h=(0,l.default)(u.Text)`
660
672
  color: ${({theme:e,status:t})=>(0,s.getStatusColor)(e,t,"textHelp")};
661
- `,w=(0,l.default)(c.Box)`
673
+ `,v=(0,l.default)(c.Box)`
662
674
  font-size: ${({theme:e})=>e.fontSize.base};
663
675
  user-select: none;
664
676
  `;t.StyledInputField=l.default.input`
@@ -690,6 +702,7 @@ var e={8594:(e,t,n)=>{n.d(t,{Z:()=>o});var r=/^((children|dangerouslySetInnerHTM
690
702
  * This is a hack to invert the calendar icon. This only works in dark mode.
691
703
  * Until either light mode is a thing or we get a datetime picker design, this will do.
692
704
  */
705
+
693
706
  ::-webkit-calendar-picker-indicator {
694
707
  filter: invert(1);
695
708
  }
@@ -919,7 +932,15 @@ var e={8594:(e,t,n)=>{n.d(t,{Z:()=>o});var r=/^((children|dangerouslySetInnerHTM
919
932
 
920
933
  color: ${({theme:e})=>e.palette.inputDisabled};
921
934
  `:null}
922
- `},8510: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(7068),t)},7068: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.RawInput=void 0;const o=r(n(7518));t.RawInput=o.default.input``,t.RawInput.displayName="RawInput"},3119: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(799),t)},799: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.TextArea=void 0;const o=n(5893),i=n(6689),a=r(n(7518)),l=n(9507),c=n(9507),s=n(9507);t.TextArea=(0,i.forwardRef)(((e,t)=>(0,o.jsx)(u,Object.assign({ref:t},e,{onChange:e.onChange})))),t.TextArea.displayName="TextArea";const u=a.default.textarea`
935
+ `},8510: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(7068),t)},7068: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.RawInput=void 0;const o=r(n(7518));t.RawInput=o.default.input``,t.RawInput.displayName="RawInput"},3119: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(799),t)},799: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.TextArea=void 0;const o=n(5893),i=n(6689),a=r(n(7518)),l=n(9507),c=n(9507),s=n(9507),u=n(1335),d=n(1944);t.TextArea=(0,i.forwardRef)(((e,t)=>(0,o.jsx)(C,Object.assign({flexDirection:"column",alignItems:"flex-start"},{children:(0,o.jsxs)(f,{children:[!!e.label&&(0,o.jsx)(d.Label,{text:e.label,htmlFor:e.name}),(0,o.jsx)(p,Object.assign({ref:t},e,{onChange:e.onChange}))]})})))),t.TextArea.displayName="TextArea";const f=(0,a.default)(u.Box)`
936
+ align-items: flex-start;
937
+ flex-direction: column;
938
+ justify-content: flex-start;
939
+ width: 100%;
940
+ `,C=(0,a.default)(u.Box)`
941
+ font-size: ${({theme:e})=>e.fontSize.base};
942
+ user-select: none;
943
+ `,p=a.default.textarea`
923
944
  background: ${({theme:e})=>e.palette.background4};
924
945
  border: 1px solid ${({theme:e})=>e.palette.inputBorder};
925
946
  border-color: ${({theme:e,status:t})=>(0,s.getStatusColor)(e,t,"inputBorder")};
@@ -933,8 +954,7 @@ var e={8594:(e,t,n)=>{n.d(t,{Z:()=>o});var r=/^((children|dangerouslySetInnerHTM
933
954
  line-height: ${({theme:e})=>e.lineHeight.text};
934
955
  font-weight: ${({theme:e})=>e.fontWeight.normal};
935
956
  font-family: ${c.FontStack};
936
- padding: ${({theme:e})=>e.px.small} ${({theme:e})=>e.px.small} 0px
937
- ${({theme:e})=>e.px.small};
957
+ padding: ${({theme:e})=>e.px.small} ${({theme:e})=>e.px.small} 0px ${({theme:e})=>e.px.small};
938
958
 
939
959
  &:focus {
940
960
  outline: 0;
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.21.0-alpha.1690905868",
4
+ "version": "0.21.0-alpha.1690994284",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
7
7
  "repository": "github:openfin/ui-library",