@openfin/ui-library 0.21.0-alpha.1690388953 → 0.21.0-alpha.1690475730

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

@@ -1,6 +1,7 @@
 import { MenuOption } from './menu';
 import React from 'react';
-export interface DropdownButtonProps {
+import { WithStatusProps } from '../../system/HOC';
+export interface DropdownButtonProps extends WithStatusProps {
     tabIndex?: number;
     activeDescendant?: string;
     expanded: boolean;

package/dist/index.js

@@ -428,13 +428,16 @@ 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);t.DropdownButton=(0,c.forwardRef)(((e,t)=>{var n,r,c,s,u;return(0,o.jsxs)(d,Object.assign({role:"comboxbox",ref:t,tabIndex:e.tabIndex,"aria-activedescendant":e.activeDescendant,"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===(c=e.selected)||void 0===c?void 0:c.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!==(u=null===(s=e.selected)||void 0===s?void 0:s.title)&&void 0!==u?u:e.placeholder})),(0,o.jsx)(l.Icon,{icon:e.expanded?"ChevronUpIcon":"ChevronDownIcon"})]}))})),t.DropdownButton.displayName="DropdownButton";const d=(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);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)`
+  color: ${({theme:e,status:t})=>(0,d.getStatusColor)(e,t,"inputBorder")};
+`,C=(0,s.default)(u.Box)`
   align-items: center;
   background: ${({theme:e})=>e.palette.background4};
   border: 1px solid ${({theme:e})=>e.palette.inputBackground};
   border-radius: ${({theme:e})=>e.radius.small};
   color: ${({theme:e})=>e.palette.textDefault};
   cursor: pointer;
+  border-color: ${({theme:e,status:t})=>(0,d.getStatusColor)(e,t,"inputBorder")};
   display: inline-flex;
   font-weight: ${({theme:e})=>e.fontWeight.bold};
   gap: ${({theme:e})=>e.px.small};
@@ -455,6 +458,11 @@ var e={8594:(e,t,n)=>{n.d(t,{Z:()=>o});var r=/^((children|dangerouslySetInnerHTM
   &:focus-within {
     border-color: ${({theme:e})=>e.palette.inputFocused};
   }
+
+  &:focus {
+    outline: 0;
+    border-color: ${({theme:e,status:t})=>(0,d.getStatusColor)(e,t,"inputFocused")};
+  }
 `},6062: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.DropdownMenu=void 0;const o=n(5893),i=n(6689),a=n(1335),l=r(n(7518)),c=n(7261),s=n(279),u=n(347),d=n(162);t.DropdownMenu=(0,i.forwardRef)((({label:e,options:t=[[]],placeholder:n="Select an option",selected:r,onOptionHover:l,onChange:h,renderLabel:v,fitContent:g},m)=>{const[w,b]=(0,i.useState)(!1);(0,i.useEffect)((()=>{1===t[0].length&&y(!1)}),[t]);const y=e=>{b(null!=e?e:!w)},{focusedOption:x,handleKeyDown:L}=(0,u.useDropdownKeyboardNavigation)(t,r,w,y,h);return(0,o.jsx)(C,Object.assign({ref:m,flexDirection:"column",onBlur:e=>{e.currentTarget.contains(e.relatedTarget)||b(!1)},onKeyDown:L},{children:(0,o.jsxs)(a.Box,Object.assign({gap:"small",flexDirection:"column",style:{width:"100%"}},{children:[e&&(0,o.jsx)(f,Object.assign({htmlFor:"dropdown-button"},{children:(0,o.jsx)(c.OptionTitle,{children:e})})),(0,o.jsxs)(p,{children:[v?v(r||{title:n,value:null},w,y,x):(0,o.jsx)(d.DropdownButton,{tabIndex:0,activeDescendant:`menu-option-${null==x?void 0:x.value}`,expanded:w&&t[0].length>1,handleClick:()=>y(),selected:r,placeholder:n}),t.length&&t[0].length>1&&w&&(0,o.jsx)(s.Menu,{menuId:"dropdown-listbox",options:t,selected:r,handleExpandMenu:y,onOptionHover:l,onChange:h,fitContent:g,focusedOption:x,absolutePosition:!0})]})]}))}))})),t.DropdownMenu.displayName="DropdownMenu";const f=l.default.label`
   font-weight: ${({theme:e})=>e.fontWeight.bold};
 `,C=(0,l.default)(a.Box)`

package/package.json

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