@openfin/ui-library 0.23.0-alpha.1694620338 → 0.23.0-alpha.1695990079

package/dist/components/controls/Toggle/toggle.d.ts

@@ -5,5 +5,6 @@ export type ToggleProps = InputHTMLAttributes<HTMLInputElement> & {
     labelSide?: LabelSideType;
     type?: 'checkbox' | 'radio';
     onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    helperText?: string;
 };
 export declare const Toggle: FC<ToggleProps>;

package/dist/components/elements/DropdownMenu/dropdownButton.d.ts

@@ -9,6 +9,7 @@ export interface DropdownButtonProps extends WithStatusProps {
     placeholder: string;
     selected?: MenuOption;
     label?: string;
+    helperText?: string;
     name?: string;
 }
 export declare const DropdownButton: React.ForwardRefExoticComponent<DropdownButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/input/TextArea/textArea.d.ts

@@ -3,8 +3,10 @@ import { WithStatusProps } from '../../system/HOC';
 export type TextAreaProps = TextareaHTMLAttributes<HTMLTextAreaElement> & {
     onChange?: (e?: ChangeEvent<HTMLTextAreaElement>) => void;
     label?: string;
+    helperText?: string;
 } & WithStatusProps;
 export declare const TextArea: React.ForwardRefExoticComponent<React.TextareaHTMLAttributes<HTMLTextAreaElement> & {
     onChange?: ((e?: ChangeEvent<HTMLTextAreaElement>) => void) | undefined;
     label?: string | undefined;
+    helperText?: string | undefined;
 } & WithStatusProps & React.RefAttributes<HTMLTextAreaElement>>;

package/dist/index.js

@@ -245,12 +245,12 @@ var e={8594:(e,t,n)=>{n.d(t,{Z:()=>o});var r=/^((children|dangerouslySetInnerHTM
       opacity: unset;
     }
   }
-`},4925: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(4021),t),o(n(9644),t)},2609: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(5971),t)},5971: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.Toggle=void 0;const i=n(5893),a=n(6689),l=o(n(7518)),c=n(8510),s=n(1335);t.Toggle=e=>{var{id:t,label:n,onChange:o,labelSide:l="right",type:c="checkbox"}=e,s=r(e,["id","label","onChange","labelSide","type"]);const[h,v]=(0,a.useState)(s.checked);return(0,a.useEffect)((()=>{v(s.checked)}),[s.checked]),(0,i.jsxs)(u,Object.assign({labelSide:l},{children:[n?(0,i.jsx)(p,Object.assign({htmlFor:t},{children:n})):void 0,(0,i.jsxs)(d,Object.assign({isChecked:h},{children:[(0,i.jsx)(C,Object.assign({},s,{id:t,type:c,onChange:e=>{v(e.target.checked),null==o||o(e)}})),(0,i.jsx)(f,{tabIndex:-1,"aria-hidden":"true",isChecked:h})]}))]}))};const u=l.default.div`
+`},4925: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(4021),t),o(n(9644),t)},2609: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(5971),t)},5971: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.Toggle=void 0;const i=n(5893),a=n(6689),l=o(n(7518)),c=n(8510),s=n(1335),u=n(1944);t.Toggle=e=>{var{id:t,label:n,onChange:o,labelSide:l="right",type:c="checkbox",helperText:s}=e,h=r(e,["id","label","onChange","labelSide","type","helperText"]);const[v,g]=(0,a.useState)(h.checked);return(0,a.useEffect)((()=>{g(h.checked)}),[h.checked]),(0,i.jsxs)(d,Object.assign({labelSide:l},{children:[(n||s)&&(0,i.jsx)(u.Label,{htmlFor:t,text:n,helperText:s}),(0,i.jsxs)(f,Object.assign({isChecked:v},{children:[(0,i.jsx)(p,Object.assign({},h,{id:t,type:c,onChange:e=>{g(e.target.checked),null==o||o(e)}})),(0,i.jsx)(C,{tabIndex:-1,"aria-hidden":"true",isChecked:v})]}))]}))};const d=l.default.div`
   display: flex;
   gap: ${({theme:e})=>e.px.xlarge};
   flex-direction: ${({labelSide:e})=>"left"===e?"row":"row-reverse"};
   line-height: ${({theme:e})=>e.px.xlarge};
-`,d=(0,l.default)(s.Box)`
+`,f=(0,l.default)(s.Box)`
   --px-toggle: ${({theme:e})=>e.px.xlarge};
   --px-knob: ${({theme:e})=>e.px.base};
 
@@ -268,7 +268,7 @@ var e={8594:(e,t,n)=>{n.d(t,{Z:()=>o});var r=/^((children|dangerouslySetInnerHTM
   &:focus-within {
     border-color: ${({theme:e})=>e.palette.inputFocused};
   }
-`,f=l.default.button`
+`,C=l.default.button`
   position: absolute;
   width: var(--px-knob);
   height: var(--px-knob);
@@ -281,7 +281,7 @@ var e={8594:(e,t,n)=>{n.d(t,{Z:()=>o});var r=/^((children|dangerouslySetInnerHTM
   outline: none;
   transition: left var(--openfin-ui-globalTransition), background var(--openfin-ui-globalTransition);
   pointer-events: none; /* Allow pass-thru for native input */
-`,C=(0,l.default)(c.RawInput)`
+`,p=(0,l.default)(c.RawInput)`
   position: absolute;
   top: 0;
   left: 0;
@@ -293,16 +293,16 @@ var e={8594:(e,t,n)=>{n.d(t,{Z:()=>o});var r=/^((children|dangerouslySetInnerHTM
   appearance: none;
   display: block;
 
-  &:checked + ${f} {
+  &:checked + ${C} {
     left: calc(100% - ${({theme:e})=>e.px.large});
   }
-  &:disabled + ${f} {
+  &:disabled + ${C} {
     background: ${({theme:e})=>e.palette.inputDisabled};
   }
   &:not(:disabled) {
     cursor: pointer;
   }
-`,p=l.default.label``},5300: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.Badge=void 0;const i=n(5893),a=o(n(7518)),l=n(1335);t.Badge=e=>{var{count:t=0,max:n}=e,o=r(e,["count","max"]);let a=t.toString();return n&&t>n&&(a=`${n}+`),(0,i.jsx)(c,Object.assign({},o,{children:a}))};const c=(0,a.default)(l.Box)`
+`},5300: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.Badge=void 0;const i=n(5893),a=o(n(7518)),l=n(1335);t.Badge=e=>{var{count:t=0,max:n}=e,o=r(e,["count","max"]);let a=t.toString();return n&&t>n&&(a=`${n}+`),(0,i.jsx)(c,Object.assign({},o,{children:a}))};const c=(0,a.default)(l.Box)`
   background: ${({theme:e})=>e.palette.statusCritical};
   border-radius: ${({theme:e})=>e.radius.pill};
   color: ${({theme:e})=>e._color.white};
@@ -430,7 +430,7 @@ var e={8594:(e,t,n)=>{n.d(t,{Z:()=>o});var r=/^((children|dangerouslySetInnerHTM
       border-radius: 100px;
     }
   }
-`},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)`
+`},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||e.helperText)&&(0,o.jsx)(f.Label,{text:e.label,helperText:e.helperText,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)`
   align-items: flex-start;
   flex-direction: column;
   justify-content: flex-start;
@@ -931,7 +931,7 @@ var e={8594:(e,t,n)=>{n.d(t,{Z:()=>o});var r=/^((children|dangerouslySetInnerHTM
 
           color: ${({theme:e})=>e.palette.inputDisabled};
         `:null}
-`},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)`
+`},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,helperText:e.helperText}),(0,o.jsx)(p,Object.assign({ref:t},e,{onChange:e.onChange}))]})})))),t.TextArea.displayName="TextArea";const f=(0,a.default)(u.Box)`
   align-items: flex-start;
   flex-direction: column;
   justify-content: flex-start;

package/package.json

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