@openfin/ui-library 0.13.6-alpha.1679494269 → 0.13.6-alpha.1679520668

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

@@ -7,7 +7,7 @@ export interface DropdownMenuProps {
     onChange: (value: MenuOption) => void;
     onOptionHover?: (value?: unknown) => void;
     placeholder?: string;
-    renderLabel?: (option: MenuOption, isOpen: boolean, onClick: () => void) => ReactNode;
+    renderLabel?: (option: MenuOption, isOpen: boolean, onClick: () => void, focusedOption?: MenuOption) => ReactNode;
     fitContent?: boolean;
 }
 export declare const DropdownMenu: FC<DropdownMenuProps>;

package/dist/index.js

@@ -351,7 +351,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)},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=n(9634),c=r(n(7518)),s=n(7261),u=n(279),d=n(347);t.DropdownMenu=({label:e,options:t=[[]],placeholder:n="Select an option",selected:r,onOptionHover:c,onChange:v,renderLabel:h,fitContent:g})=>{var m,w;const[b,y]=(0,i.useState)(!1);(0,i.useEffect)((()=>{1===t[0].length&&x(!1)}),[t]);const x=e=>{y(null!=e?e:!b)},{focusedOption:L,handleKeyDown:O}=(0,d.useDropdownKeyboardNavigation)(t,r,b,x,v);return(0,o.jsx)(f,Object.assign({flexDirection:"column",onBlur:e=>{e.currentTarget.contains(e.relatedTarget)||y(!1)},onKeyDown:O},{children:(0,o.jsxs)(a.Box,Object.assign({gap:"base",flexDirection:"column",style:{width:"100%"}},{children:[e&&(0,o.jsx)("label",Object.assign({htmlFor:"dropdown-button"},{children:(0,o.jsx)(s.OptionTitle,{children:e})})),(0,o.jsxs)(C,{children:[h?h(r||{title:n,value:null},b,x):(0,o.jsxs)(p,Object.assign({role:"comboxbox",tabIndex:0,"aria-activedescendant":`menu-option-${null==L?void 0:L.value}`,"aria-expanded":b,"aria-haspopup":"listbox","aria-controls":"dropdown-listbox",onClick:()=>x(),as:"button","data-testid":"dropdown-button",title:null!==(m=null==r?void 0:r.title)&&void 0!==m?m:n},{children:[(null==r?void 0:r.iconUrl)&&(0,o.jsx)(u.ButtonImage,{src:r.iconUrl}),(0,o.jsx)(s.OptionTitle,Object.assign({"aria-live":"polite","data-testid":"selected-option"},{children:null!==(w=null==r?void 0:r.title)&&void 0!==w?w:n})),(0,o.jsx)(l.Icon,{icon:b&&t[0].length>1?"ChevronUpIcon":"ChevronDownIcon"})]})),t.length&&t[0].length>1&&b&&(0,o.jsx)(u.Menu,{menuId:"dropdown-listbox",options:t,selected:r,handleExpandMenu:x,onOptionHover:c,onChange:v,fitContent:g,focusedOption:L,absolutePosition:!0})]})]}))}))};const f=(0,c.default)(a.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)},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=n(9634),c=r(n(7518)),s=n(7261),u=n(279),d=n(347);t.DropdownMenu=({label:e,options:t=[[]],placeholder:n="Select an option",selected:r,onOptionHover:c,onChange:v,renderLabel:h,fitContent:g})=>{var m,w;const[b,y]=(0,i.useState)(!1);(0,i.useEffect)((()=>{1===t[0].length&&x(!1)}),[t]);const x=e=>{y(null!=e?e:!b)},{focusedOption:L,handleKeyDown:O}=(0,d.useDropdownKeyboardNavigation)(t,r,b,x,v);return(0,o.jsx)(f,Object.assign({flexDirection:"column",onBlur:e=>{e.currentTarget.contains(e.relatedTarget)||y(!1)},onKeyDown:O},{children:(0,o.jsxs)(a.Box,Object.assign({gap:"base",flexDirection:"column",style:{width:"100%"}},{children:[e&&(0,o.jsx)("label",Object.assign({htmlFor:"dropdown-button"},{children:(0,o.jsx)(s.OptionTitle,{children:e})})),(0,o.jsxs)(C,{children:[h?h(r||{title:n,value:null},b,x,L):(0,o.jsxs)(p,Object.assign({role:"comboxbox",tabIndex:0,"aria-activedescendant":`menu-option-${null==L?void 0:L.value}`,"aria-expanded":b,"aria-haspopup":"listbox","aria-controls":"dropdown-listbox",onClick:()=>x(),as:"button","data-testid":"dropdown-button",title:null!==(m=null==r?void 0:r.title)&&void 0!==m?m:n},{children:[(null==r?void 0:r.iconUrl)&&(0,o.jsx)(u.ButtonImage,{src:r.iconUrl}),(0,o.jsx)(s.OptionTitle,Object.assign({"aria-live":"polite","data-testid":"selected-option"},{children:null!==(w=null==r?void 0:r.title)&&void 0!==w?w:n})),(0,o.jsx)(l.Icon,{icon:b&&t[0].length>1?"ChevronUpIcon":"ChevronDownIcon"})]})),t.length&&t[0].length>1&&b&&(0,o.jsx)(u.Menu,{menuId:"dropdown-listbox",options:t,selected:r,handleExpandMenu:x,onOptionHover:c,onChange:v,fitContent:g,focusedOption:L,absolutePosition:!0})]})]}))}))};const f=(0,c.default)(a.Box)`
   user-select: none;
   position: relative;
 `,C=(0,c.default)(a.Box)``,p=(0,c.default)(a.Box)`
@@ -397,7 +397,7 @@ var e={8594:(e,t,n)=>{n.d(t,{Z:()=>o});var r=/^((children|dangerouslySetInnerHTM
   display: inline-flex;
   align-items: center;
   justify-content: flex-start;
-  border: transparent;
+  border: ${({isFocused:e,theme:t})=>e?`1px solid ${t.palette.borderNeutral}`:"1px solid transparent"};
   background: transparent;
   outline: none;
   cursor: pointer;
@@ -991,7 +991,7 @@ var e={8594:(e,t,n)=>{n.d(t,{Z:()=>o});var r=/^((children|dangerouslySetInnerHTM
   font-size: ${({theme:e,size:t="base"})=>e.fontSize[t]};
   font-weight: ${({theme:e,weight:t="normal"})=>e.fontWeight[t]};
   line-height: ${({theme:e})=>e.lineHeight.text};
-`,t.Text.displayName="Text"},3190:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.useColorScheme=t.ColorScheme=void 0;const r=n(6689);t.ColorScheme={dark:"dark",light:"light",system:"system"};const o="(prefers-color-scheme: dark)";t.useColorScheme=({requestedScheme:e,fallbackScheme:n=t.ColorScheme.light})=>{const[i,a]=(0,r.useState)(n),l=e=>a(e.matches?"dark":"light");return(0,r.useEffect)((()=>{if("light"===e||"dark"===e)return void a(e);const t=window.matchMedia(o);return a(t.matches?"dark":"light"),t.addEventListener("change",l),()=>t.removeEventListener("change",l)}),[e,i,o]),i}},347:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.useDropdownKeyboardNavigation=void 0;const r=n(6689);t.useDropdownKeyboardNavigation=(e,t,n,o,i)=>{const[a,l]=(0,r.useState)(0),[c,s]=(0,r.useState)("");let u;if((0,r.useEffect)((()=>{if(t&&!n){const n=e.flat().findIndex((e=>e.value===t.value));n>=0&&l(n)}}),[e,t,n]),(0,r.useEffect)((()=>{n||s("")}),[n]),(0,r.useEffect)((()=>{if(c){const t=e.flat().findIndex((e=>e.title.toLowerCase().startsWith(c.toLowerCase())));t>=0&&l(t)}}),[e,c]),e[0].length>0){const[t,n]=[Math.floor(a/e[0].length),a%e[0].length];u=e[t][n]}return(0,r.useEffect)((()=>{const e=setTimeout((()=>{s("")}),500);return()=>clearTimeout(e)}),[c]),{focusedOption:u,handleKeyDown:t=>{switch(t.preventDefault(),t.key){case"ArrowUp":a>0&&l(a-1);break;case"ArrowDown":a<e.flat().length-1&&l(a+1);break;case"Enter":n?((null==u?void 0:u.overrideOnClick)?u.overrideOnClick():i(null!=u?u:e[0][0]),o()):o();break;case"Escape":o(!1);break;default:/^[a-z0-9]$/i.test(t.key)&&s((e=>e+t.key))}}}}},4481:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.useLayoutMediaQuery=t.useMediaQuery=void 0;const r=n(6689),o=e=>t=>{const[n,o]=(0,r.useState)(!1);return e((()=>{const e=window.matchMedia(t);if(e){e.matches!==n&&o(e.matches);const t=()=>o(e.matches),r=()=>e.removeEventListener("change",t);return e.addEventListener("change",t),r}}),[n,t]),n};t.useMediaQuery=o(r.useEffect),t.useLayoutMediaQuery=o(r.useLayoutEffect)},2776:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.usePrevious=void 0;const r=n(6689);t.usePrevious=e=>{const t=(0,r.useRef)();return(0,r.useEffect)((()=>{t.current=e}),[e]),t.current}},7088:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.useTheme=void 0;const r=n(6689),o=n(4266),i=n(3190),a=n(9507),l={[i.ColorScheme.dark]:o.OpenFinDarkTheme,[i.ColorScheme.light]:o.OpenFinLightTheme};t.useTheme=({themes:e,scheme:t,config:n})=>{const o=(0,i.useColorScheme)({requestedScheme:t}),c=(0,r.useMemo)((()=>void 0===e?l[o]:(0,a.createTheme)(Object.assign(Object.assign({},l[o].palette),e[o].palette),o)),[e,o]);return n?Object.assign(Object.assign({},c),{_config:Object.assign(Object.assign({},c._config),n)}):c}},341: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.__exportStar||function(e,t){for(var n in e)"default"===n||Object.prototype.hasOwnProperty.call(t,n)||r(t,e,n)},a=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};Object.defineProperty(t,"__esModule",{value:!0}),t.StoryHelpers=void 0,i(n(4130),t),i(n(4925),t),i(n(2609),t),i(n(3136),t),i(n(9734),t),i(n(6026),t),i(n(9634),t),i(n(144),t),i(n(9239),t),i(n(8878),t),i(n(8510),t),i(n(8951),t),i(n(1978),t),i(n(8051),t),i(n(3641),t),i(n(5215),t),i(n(9654),t),i(n(1335),t),i(n(5377),t),i(n(1069),t),i(n(9507),t),i(n(3188),t),i(n(7063),t),i(n(7769),t),i(n(3190),t),i(n(4481),t),i(n(2776),t),i(n(347),t),t.StoryHelpers=a(n(8812)),i(n(4991),t)},6606:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.generateRandomInteger=t.clamp=void 0,t.clamp=(e,t,n)=>t&&n?Math.min(Math.max(e,t),n):n&&!t?Math.min(e,n):t&&!n?Math.max(e,t):e,t.generateRandomInteger=()=>Math.floor(1e3*Math.random())},4991:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.whenFin=void 0,t.whenFin=function(e,t){const n="undefined"!=typeof fin?e:t;return"function"==typeof n?n():n}},8812: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.SpatialLink=t.JSONData=t.Pre=t.PlaceholderContent=t.StoryGrid=t.StoryColumn=t.StoryRow=void 0;const o=n(5893),i=r(n(7518)),a=n(1335);t.StoryRow=(0,i.default)(a.Box).attrs({gap:"large",alignItems:"flex-start"})``,t.StoryColumn=(0,i.default)(a.Box).attrs({flexDirection:"column",gap:"large",alignItems:"flex-start"})`
+`,t.Text.displayName="Text"},3190:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.useColorScheme=t.ColorScheme=void 0;const r=n(6689);t.ColorScheme={dark:"dark",light:"light",system:"system"};const o="(prefers-color-scheme: dark)";t.useColorScheme=({requestedScheme:e,fallbackScheme:n=t.ColorScheme.light})=>{const[i,a]=(0,r.useState)(n),l=e=>a(e.matches?"dark":"light");return(0,r.useEffect)((()=>{if("light"===e||"dark"===e)return void a(e);const t=window.matchMedia(o);return a(t.matches?"dark":"light"),t.addEventListener("change",l),()=>t.removeEventListener("change",l)}),[e,i,o]),i}},347:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.useDropdownKeyboardNavigation=void 0;const r=n(6689);t.useDropdownKeyboardNavigation=(e,t,n,o,i)=>{const[a,l]=(0,r.useState)(0),[c,s]=(0,r.useState)("");let u;if((0,r.useEffect)((()=>{if(t&&!n){const n=e.flat().findIndex((e=>e.value===t.value));n>=0&&l(n)}}),[e,t,n]),(0,r.useEffect)((()=>{n||s("")}),[n]),(0,r.useEffect)((()=>{if(c){const t=e.flat().findIndex((e=>e.title.toLowerCase().startsWith(c.toLowerCase())));t>=0&&l(t)}}),[e,c]),e[0].length>0){const[t,n]=[Math.floor(a/e[0].length),a%e[0].length];u=e[t][n]}return(0,r.useEffect)((()=>{const e=setTimeout((()=>{s("")}),500);return()=>clearTimeout(e)}),[c]),{focusedOption:u,handleKeyDown:t=>{switch(t.preventDefault(),t.code){case"ArrowUp":a>0&&l(a-1);break;case"ArrowDown":a<e.flat().length-1&&l(a+1);break;case"Enter":case"Space":n?((null==u?void 0:u.overrideOnClick)?u.overrideOnClick():i(null!=u?u:e[0][0]),o()):o();break;case"Escape":o(!1);break;default:/^[a-z0-9]$/i.test(t.key)&&s((e=>e+t.key))}}}}},4481:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.useLayoutMediaQuery=t.useMediaQuery=void 0;const r=n(6689),o=e=>t=>{const[n,o]=(0,r.useState)(!1);return e((()=>{const e=window.matchMedia(t);if(e){e.matches!==n&&o(e.matches);const t=()=>o(e.matches),r=()=>e.removeEventListener("change",t);return e.addEventListener("change",t),r}}),[n,t]),n};t.useMediaQuery=o(r.useEffect),t.useLayoutMediaQuery=o(r.useLayoutEffect)},2776:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.usePrevious=void 0;const r=n(6689);t.usePrevious=e=>{const t=(0,r.useRef)();return(0,r.useEffect)((()=>{t.current=e}),[e]),t.current}},7088:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.useTheme=void 0;const r=n(6689),o=n(4266),i=n(3190),a=n(9507),l={[i.ColorScheme.dark]:o.OpenFinDarkTheme,[i.ColorScheme.light]:o.OpenFinLightTheme};t.useTheme=({themes:e,scheme:t,config:n})=>{const o=(0,i.useColorScheme)({requestedScheme:t}),c=(0,r.useMemo)((()=>void 0===e?l[o]:(0,a.createTheme)(Object.assign(Object.assign({},l[o].palette),e[o].palette),o)),[e,o]);return n?Object.assign(Object.assign({},c),{_config:Object.assign(Object.assign({},c._config),n)}):c}},341: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.__exportStar||function(e,t){for(var n in e)"default"===n||Object.prototype.hasOwnProperty.call(t,n)||r(t,e,n)},a=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};Object.defineProperty(t,"__esModule",{value:!0}),t.StoryHelpers=void 0,i(n(4130),t),i(n(4925),t),i(n(2609),t),i(n(3136),t),i(n(9734),t),i(n(6026),t),i(n(9634),t),i(n(144),t),i(n(9239),t),i(n(8878),t),i(n(8510),t),i(n(8951),t),i(n(1978),t),i(n(8051),t),i(n(3641),t),i(n(5215),t),i(n(9654),t),i(n(1335),t),i(n(5377),t),i(n(1069),t),i(n(9507),t),i(n(3188),t),i(n(7063),t),i(n(7769),t),i(n(3190),t),i(n(4481),t),i(n(2776),t),i(n(347),t),t.StoryHelpers=a(n(8812)),i(n(4991),t)},6606:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.generateRandomInteger=t.clamp=void 0,t.clamp=(e,t,n)=>t&&n?Math.min(Math.max(e,t),n):n&&!t?Math.min(e,n):t&&!n?Math.max(e,t):e,t.generateRandomInteger=()=>Math.floor(1e3*Math.random())},4991:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.whenFin=void 0,t.whenFin=function(e,t){const n="undefined"!=typeof fin?e:t;return"function"==typeof n?n():n}},8812: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.SpatialLink=t.JSONData=t.Pre=t.PlaceholderContent=t.StoryGrid=t.StoryColumn=t.StoryRow=void 0;const o=n(5893),i=r(n(7518)),a=n(1335);t.StoryRow=(0,i.default)(a.Box).attrs({gap:"large",alignItems:"flex-start"})``,t.StoryColumn=(0,i.default)(a.Box).attrs({flexDirection:"column",gap:"large",alignItems:"flex-start"})`
   max-width: 500px;
 `,t.StoryGrid=(0,i.default)(a.Box).attrs({gap:"large"})`
   display: grid;

package/package.json

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