@openfin/ui-library 0.30.21-alpha.1757522963 → 0.30.21-alpha.1757708717

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

@@ -1,5 +1,6 @@
 import React, { ReactNode } from 'react';
 import { MenuOption } from './menu';
+export type MenuPosition = 'above' | 'below';
 export interface DropdownMenuProps {
     label?: string;
     selected?: MenuOption;
@@ -9,5 +10,7 @@ export interface DropdownMenuProps {
     placeholder?: string;
     renderLabel?: (option: MenuOption, isOpen: boolean, onClick: () => void, focusedOption?: MenuOption) => ReactNode;
     fitContent?: boolean;
+    menuPosition?: MenuPosition;
+    maxHeight?: string;
 }
 export declare const DropdownMenu: React.ForwardRefExoticComponent<DropdownMenuProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { MenuPosition } from './dropdownMenu';
 export interface MenuOption {
     title: string;
     value: unknown;
@@ -57,6 +58,10 @@ export interface MenuProps {
      * The menu should be positioned absolutely.
      */
     absolutePosition?: boolean;
+    /**
+     * The position of the menu relative to the button ('above' or 'below').
+     */
+    menuPosition?: MenuPosition;
 }
 export declare const Menu: React.FC<MenuProps>;
 export declare const ButtonImage: import("styled-components").StyledComponent<"img", import("styled-components").DefaultTheme, {}, never>;

package/dist/index.js

@@ -791,14 +791,21 @@ var e={1193:(e,t,n)=>{n.r(t),n.d(t,{default:()=>l});var r=n(1601),o=n.n(r),a=n(6
     outline: 0;
     border-color: ${({theme:e,status:t})=>(0,d.getStatusColor)(e,t,"inputFocused")};
   }
-`},926: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(4848),a=n(2015),i=n(2094),l=r(n(2770)),s=n(2821),c=n(2501),u=n(6110),d=n(2587);t.DropdownMenu=(0,a.forwardRef)((({label:e,options:t=[[]],placeholder:n="Select an option",selected:r,onOptionHover:i,onChange:l,renderLabel:h,fitContent:b},g)=>{if(r&&!((e,t)=>e.some((e=>e.some((e=>e.value===t.value)))))(t,r))throw new Error(`The selected option ${r.value} is not present in the options array`);const[m,v]=(0,a.useState)(!1);(0,a.useEffect)((()=>{1===t[0].length&&x(!1)}),[t]);const x=e=>{v(null!=e?e:!m)},{focusedOption:y,handleKeyDown:C}=(0,u.useDropdownKeyboardNavigation)(t,r,m,x,l);return(0,o.jsxs)(p,{ref:g,flexDirection:"column",onBlur:e=>{e.currentTarget.contains(e.relatedTarget)||v(!1)},onKeyDown:C,gap:"small",children:[e&&(0,o.jsx)("label",{htmlFor:"dropdown-button",children:(0,o.jsx)(s.OptionTitle,{children:e})}),(0,o.jsxs)(f,{children:[h?(0,o.jsx)(a.Fragment,{children:h(r||{title:n,value:null},m,x,y)},`render-label-${r}`):(0,o.jsx)(d.DropdownButton,{tabIndex:0,activeDescendant:`menu-option-${null==y?void 0:y.value}`,expanded:m&&t[0].length>1,handleClick:()=>x(),selected:r,placeholder:n}),t.length&&t[0].length>1&&m&&(0,o.jsx)(c.Menu,{menuId:"dropdown-listbox",options:t,selected:r,handleExpandMenu:x,onOptionHover:i,onChange:l,fitContent:b,focusedOption:y,absolutePosition:!0})]})]})})),t.DropdownMenu.displayName="DropdownMenu";const p=(0,l.default)(i.Box)`
+`},926: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(4848),a=n(2015),i=n(2094),l=r(n(2770)),s=n(2821),c=n(2501),u=n(6110),d=n(2587);t.DropdownMenu=(0,a.forwardRef)((({label:e,options:t=[[]],placeholder:n="Select an option",selected:r,onOptionHover:i,onChange:l,renderLabel:b,fitContent:g,menuPosition:m="below",maxHeight:v},x)=>{if(r&&!((e,t)=>e.some((e=>e.some((e=>e.value===t.value)))))(t,r))throw new Error(`The selected option ${r.value} is not present in the options array`);const[y,C]=(0,a.useState)(!1);(0,a.useEffect)((()=>{1===t[0].length&&_(!1)}),[t]);const _=e=>{C(null!=e?e:!y)},{focusedOption:O,handleKeyDown:w}=(0,u.useDropdownKeyboardNavigation)(t,r,y,_,l);return(0,o.jsxs)(p,{ref:x,flexDirection:"column",onBlur:e=>{e.currentTarget.contains(e.relatedTarget)||C(!1)},onKeyDown:w,gap:"small",children:[e&&(0,o.jsx)("label",{htmlFor:"dropdown-button",children:(0,o.jsx)(s.OptionTitle,{children:e})}),(0,o.jsxs)(f,{menuPosition:m,children:[b?(0,o.jsx)(a.Fragment,{children:b(r||{title:n,value:null},y,_,O)},`render-label-${r}`):(0,o.jsx)(d.DropdownButton,{tabIndex:0,activeDescendant:`menu-option-${null==O?void 0:O.value}`,expanded:y&&t[0].length>1,handleClick:()=>_(),selected:r,placeholder:n}),t.length&&t[0].length>1&&y&&(0,o.jsx)(h,{children:(0,o.jsx)(c.Menu,{menuId:"dropdown-listbox",options:t,selected:r,handleExpandMenu:_,onOptionHover:i,onChange:l,fitContent:g,focusedOption:O,absolutePosition:!0,menuPosition:m,height:v})})]})]})})),t.DropdownMenu.displayName="DropdownMenu";const p=(0,l.default)(i.Box)`
   user-select: none;
   position: relative;
   width: 100%;
-`,f=(0,l.default)(i.Box)``},5918: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(926),t),o(n(2501),t),o(n(2587),t)},2501: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.ButtonImage=t.Menu=void 0;const o=n(4848),a=r(n(2015)),i=r(n(2770)),l=n(5917),s=n(2094),c=n(2821);t.Menu=({options:e,selected:n,menuId:r,handleExpandMenu:i,onOptionHover:l,onChange:s,width:b,height:g,header:m,focusedOption:v,absolutePosition:x,fitContent:y})=>{const C=e=>{null==l||l(e)};return(0,o.jsxs)(u,{role:"listbox",flexDirection:"column",onMouseLeave:()=>{C(null)},"data-testid":"menu",id:r,width:b,height:g,absolutePosition:x,fitContent:y,children:[m&&(0,o.jsxs)(a.default.Fragment,{children:[(0,o.jsx)(p,{children:(0,o.jsx)(c.OptionTitle,{children:m})}),(0,o.jsx)(h,{})]}),e.map(((e,r)=>(0,o.jsxs)(a.default.Fragment,{children:[0!==r&&(0,o.jsx)(h,{}),e.map(((e,r)=>(0,o.jsxs)(d,{role:"option",isFocused:(null==v?void 0:v.value)===e.value,"aria-selected":(null==n?void 0:n.value)===e.value,alignItems:"center",as:"button","data-testid":`menu-option-${r}`,id:`menu-option-${e.value}`,title:e.title,onClick:()=>{e.overrideOnClick?e.overrideOnClick(e):s(e),null==i||i()},onMouseOver:()=>C(e.value),children:[(null==e?void 0:e.iconUrl)&&(0,o.jsx)(t.ButtonImage,{src:e.iconUrl,style:{marginRight:"8px"}}),(0,o.jsx)(c.OptionTitle,{children:e.title}),(null==n?void 0:n.value)===e.value?(0,o.jsx)(f,{icon:"CheckIcon"}):(0,o.jsx)(f,{children:(0,o.jsx)(o.Fragment,{})})]},r)))]},r)))]})};const u=(0,i.default)(s.Box)`
+`,f=(0,l.default)(i.Box)`
+  position: relative;
+  display: flex;
+  flex-direction: ${({menuPosition:e})=>"above"===e?"column-reverse":"column"};
+`,h=(0,l.default)(i.Box)`
+  position: relative;
+`},5918: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(926),t),o(n(2501),t),o(n(2587),t)},2501: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.ButtonImage=t.Menu=void 0;const o=n(4848),a=r(n(2015)),i=r(n(2770)),l=n(5917),s=n(2094),c=n(2821);t.Menu=({options:e,selected:n,menuId:r,handleExpandMenu:i,onOptionHover:l,onChange:s,width:b,height:g,header:m,focusedOption:v,absolutePosition:x,fitContent:y,menuPosition:C="below"})=>{const _=e=>{null==l||l(e)};return(0,o.jsxs)(u,{role:"listbox",flexDirection:"column",onMouseLeave:()=>{_(null)},"data-testid":"menu",id:r,width:b,height:g,absolutePosition:x,fitContent:y,menuPosition:C,children:[m&&(0,o.jsxs)(a.default.Fragment,{children:[(0,o.jsx)(p,{children:(0,o.jsx)(c.OptionTitle,{children:m})}),(0,o.jsx)(h,{})]}),e.map(((e,r)=>(0,o.jsxs)(a.default.Fragment,{children:[0!==r&&(0,o.jsx)(h,{}),e.map(((e,r)=>(0,o.jsxs)(d,{role:"option",isFocused:(null==v?void 0:v.value)===e.value,"aria-selected":(null==n?void 0:n.value)===e.value,alignItems:"center",as:"button","data-testid":`menu-option-${r}`,id:`menu-option-${e.value}`,title:e.title,onClick:()=>{e.overrideOnClick?e.overrideOnClick(e):s(e),null==i||i()},onMouseOver:()=>_(e.value),children:[(null==e?void 0:e.iconUrl)&&(0,o.jsx)(t.ButtonImage,{src:e.iconUrl,style:{marginRight:"8px"}}),(0,o.jsx)(c.OptionTitle,{children:e.title}),(null==n?void 0:n.value)===e.value?(0,o.jsx)(f,{icon:"CheckIcon"}):(0,o.jsx)(f,{children:(0,o.jsx)(o.Fragment,{})})]},r)))]},r)))]})};const u=(0,i.default)(s.Box)`
   width: ${({width:e,fitContent:t})=>e||(t?"fit-content":"100%")};
   max-height: ${({height:e})=>null!=e?e:"fit-content"};
-  top: ${({theme:e})=>`calc(100% + ${e.px.xsmall})`};
+  top: ${({theme:e,menuPosition:t})=>"above"===t?"auto":`calc(100% + ${e.px.xsmall})`};
+  bottom: ${({theme:e,menuPosition:t})=>"above"===t?`calc(100% + ${e.px.xsmall})`:"auto"};
   box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
   background: ${({theme:e})=>e.palette.background4};
   color: ${({theme:e})=>e.palette.textDefault};

package/package.json

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