@openfin/ui-library 0.12.0-alpha.1678913049 → 0.12.0-alpha.1678961199
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.
|
@@ -18,13 +18,13 @@ export interface MenuProps {
|
|
|
18
18
|
*/
|
|
19
19
|
selected?: MenuOption;
|
|
20
20
|
/**
|
|
21
|
-
*
|
|
21
|
+
* An ID to associate wrapper component with this Menu.
|
|
22
22
|
*/
|
|
23
|
-
|
|
23
|
+
menuId?: string;
|
|
24
24
|
/**
|
|
25
25
|
* A function to be called to close the menu.
|
|
26
26
|
*/
|
|
27
|
-
handleExpandMenu
|
|
27
|
+
handleExpandMenu?: () => void;
|
|
28
28
|
/**
|
|
29
29
|
* A function to be called when an option in the menu is hovered over.
|
|
30
30
|
*/
|
|
@@ -52,6 +52,11 @@ export interface MenuProps {
|
|
|
52
52
|
/**
|
|
53
53
|
* The currently focused option in the menu.
|
|
54
54
|
*/
|
|
55
|
-
focusedOption
|
|
55
|
+
focusedOption?: MenuOption;
|
|
56
|
+
/**
|
|
57
|
+
* The menu should be positioned absolutely.
|
|
58
|
+
*/
|
|
59
|
+
absolutePosition?: boolean;
|
|
56
60
|
}
|
|
57
61
|
export declare const Menu: React.FC<MenuProps>;
|
|
62
|
+
export declare const ButtonImage: import("styled-components").StyledComponent<"img", import("styled-components").DefaultTheme, {}, never>;
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { ChangeEventHandler } from 'react';
|
|
1
|
+
import { ChangeEventHandler, MouseEventHandler } from 'react';
|
|
2
2
|
import { BaseInputProps } from '../BaseInput';
|
|
3
3
|
type DateTypeFormat = 'date' | 'time' | 'datetime-local';
|
|
4
4
|
interface DateInputProps extends Omit<BaseInputProps, 'value' | 'type'> {
|
|
5
5
|
onChange?: ChangeEventHandler<HTMLInputElement>;
|
|
6
|
-
onExpand?:
|
|
6
|
+
onExpand?: MouseEventHandler<HTMLDivElement>;
|
|
7
7
|
expanded?: boolean;
|
|
8
8
|
value?: string;
|
|
9
9
|
type?: DateTypeFormat;
|
package/dist/index.js
CHANGED
|
@@ -351,7 +351,7 @@ var e={8594:(e,t,n)=>{n.d(t,{Z:()=>o});var r=/^((children|dangerouslySetInnerHTM
|
|
|
351
351
|
border-radius: 100px;
|
|
352
352
|
}
|
|
353
353
|
}
|
|
354
|
-
`},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.
|
|
354
|
+
`},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;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,d.useDropdownKeyboardNavigation)(t,r,w,y,v);return(0,o.jsx)(f,Object.assign({flexDirection:"column",onBlur:e=>{e.currentTarget.contains(e.relatedTarget)||b(!1)},onKeyDown:L},{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},w,y):(0,o.jsxs)(p,Object.assign({role:"comboxbox",tabIndex:0,"aria-activedescendant":`menu-option-${x.value}`,"aria-expanded":w,"aria-haspopup":"listbox","aria-controls":"dropdown-listbox",onClick:()=>y(),as:"button","data-testid":"dropdown-button"},{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!==(m=null==r?void 0:r.title)&&void 0!==m?m:n})),(0,o.jsx)(l.Icon,{icon:w?"ChevronUpIcon":"ChevronDownIcon"})]})),t.length&&t[0].length>1&&w&&(0,o.jsx)(u.Menu,{menuId:"dropdown-listbox",options:t,selected:r,handleExpandMenu:y,onOptionHover:c,onChange:v,fitContent:g,focusedOption:x,absolutePosition:!0})]})]}))}))};const f=(0,c.default)(a.Box)`
|
|
355
355
|
user-select: none;
|
|
356
356
|
position: relative;
|
|
357
357
|
`,C=(0,c.default)(a.Box)``,p=(0,c.default)(a.Box)`
|
|
@@ -381,12 +381,7 @@ var e={8594:(e,t,n)=>{n.d(t,{Z:()=>o});var r=/^((children|dangerouslySetInnerHTM
|
|
|
381
381
|
&:focus-within {
|
|
382
382
|
border-color: ${({theme:e})=>e.palette.inputFocused};
|
|
383
383
|
}
|
|
384
|
-
|
|
385
|
-
height: ${({theme:e})=>e.iconSize.xlarge};
|
|
386
|
-
width: ${({theme:e})=>e.iconSize.xlarge};
|
|
387
|
-
border-radius: ${({theme:e})=>e.radius.small};
|
|
388
|
-
`},6026: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(6062),t),o(n(279),t)},279: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.Menu=void 0;const o=n(5893),i=r(n(6689)),a=r(n(7518)),l=n(9634),c=n(1335),s=n(7261),u=n(6062);t.Menu=({options:e,selected:t,dropdownMenuId:n,handleExpandMenu:r,onOptionHover:a,onChange:l,width:c,height:h,header:g,focusedOption:m})=>{const w=e=>{null==a||a(e)};return(0,o.jsxs)(d,Object.assign({role:"listbox",flexDirection:"column",onMouseLeave:()=>{w(null)},"data-testid":"dropdown-menu",id:n,width:c,height:h},{children:[g&&(0,o.jsxs)(i.default.Fragment,{children:[(0,o.jsx)(C,{children:(0,o.jsx)(s.OptionTitle,{children:g})}),(0,o.jsx)(v,{})]}),e.map(((e,n)=>(0,o.jsxs)(i.default.Fragment,{children:[0!==n&&(0,o.jsx)(v,{}),e.map(((e,n)=>(0,o.jsxs)(f,Object.assign({role:"option",isFocused:(null==m?void 0:m.value)===e.value,"aria-selected":(null==t?void 0:t.value)===e.value,alignItems:"center",as:"button","data-testid":`dropdown-option-${n}`,id:`dropdown-option-${e.value}`,onClick:()=>{e.overrideOnClick?e.overrideOnClick(e):l(e),r()},onMouseOver:()=>w(e.value)},{children:[(null==e?void 0:e.iconUrl)&&(0,o.jsx)(u.ButtonImage,{src:e.iconUrl,style:{marginRight:"8px"}}),(0,o.jsx)(s.OptionTitle,{children:e.title}),(null==t?void 0:t.value)===e.value?(0,o.jsx)(p,{icon:"CheckIcon"}):(0,o.jsx)(p,{children:(0,o.jsx)(o.Fragment,{})})]}),n)))]},n)))]}))};const d=(0,a.default)(c.Box)`
|
|
389
|
-
position: absolute;
|
|
384
|
+
`},6026: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(6062),t),o(n(279),t)},279: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(5893),i=r(n(6689)),a=r(n(7518)),l=n(9634),c=n(1335),s=n(7261);t.Menu=({options:e,selected:n,menuId:r,handleExpandMenu:a,onOptionHover:l,onChange:c,width:v,height:h,header:g,focusedOption:m,absolutePosition:w})=>{const b=e=>{null==l||l(e)};return(0,o.jsxs)(u,Object.assign({role:"listbox",flexDirection:"column",onMouseLeave:()=>{b(null)},"data-testid":"menu",id:r,width:v,height:h,absolutePosition:w},{children:[g&&(0,o.jsxs)(i.default.Fragment,{children:[(0,o.jsx)(f,{children:(0,o.jsx)(s.OptionTitle,{children:g})}),(0,o.jsx)(p,{})]}),e.map(((e,r)=>(0,o.jsxs)(i.default.Fragment,{children:[0!==r&&(0,o.jsx)(p,{}),e.map(((e,r)=>(0,o.jsxs)(d,Object.assign({role:"option",isFocused:(null==m?void 0:m.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}`,onClick:()=>{e.overrideOnClick?e.overrideOnClick(e):c(e),null==a||a()},onMouseOver:()=>b(e.value)},{children:[(null==e?void 0:e.iconUrl)&&(0,o.jsx)(t.ButtonImage,{src:e.iconUrl,style:{marginRight:"8px"}}),(0,o.jsx)(s.OptionTitle,{children:e.title}),(null==n?void 0:n.value)===e.value?(0,o.jsx)(C,{icon:"CheckIcon"}):(0,o.jsx)(C,{children:(0,o.jsx)(o.Fragment,{})})]}),r)))]},r)))]}))};const u=(0,a.default)(c.Box)`
|
|
390
385
|
width: ${({width:e,fitContent:t})=>e||(t?"fit-content":"100%")};
|
|
391
386
|
max-height: ${({height:e})=>null!=e?e:"fit-content"};
|
|
392
387
|
top: ${({theme:e})=>`calc(100% + ${e.px.xsmall})`};
|
|
@@ -397,11 +392,12 @@ var e={8594:(e,t,n)=>{n.d(t,{Z:()=>o});var r=/^((children|dangerouslySetInnerHTM
|
|
|
397
392
|
z-index: 10;
|
|
398
393
|
overflow-y: auto;
|
|
399
394
|
border: 1px solid ${({theme:e})=>e.palette.inputBackground};
|
|
400
|
-
|
|
395
|
+
position: ${({absolutePosition:e})=>e?"absolute":"initial"};
|
|
396
|
+
`,d=(0,a.default)(c.Box)`
|
|
401
397
|
display: inline-flex;
|
|
402
398
|
align-items: center;
|
|
403
399
|
justify-content: flex-start;
|
|
404
|
-
border:
|
|
400
|
+
border: transparent;
|
|
405
401
|
background: transparent;
|
|
406
402
|
outline: none;
|
|
407
403
|
cursor: pointer;
|
|
@@ -411,7 +407,7 @@ var e={8594:(e,t,n)=>{n.d(t,{Z:()=>o});var r=/^((children|dangerouslySetInnerHTM
|
|
|
411
407
|
&:hover {
|
|
412
408
|
background: ${({theme:e})=>e.palette.background2};
|
|
413
409
|
}
|
|
414
|
-
`,
|
|
410
|
+
`,f=(0,a.default)(c.Box)`
|
|
415
411
|
display: inline-flex;
|
|
416
412
|
align-items: center;
|
|
417
413
|
justify-content: flex-start;
|
|
@@ -419,10 +415,14 @@ var e={8594:(e,t,n)=>{n.d(t,{Z:()=>o});var r=/^((children|dangerouslySetInnerHTM
|
|
|
419
415
|
border: transparent;
|
|
420
416
|
color: ${({theme:e})=>e.palette.textHelp};
|
|
421
417
|
padding: ${({theme:e})=>`${e.px.small} ${e.px.small}`};
|
|
422
|
-
`,
|
|
418
|
+
`,C=(0,a.default)(l.Icon)`
|
|
423
419
|
margin-left: auto;
|
|
424
|
-
`,
|
|
420
|
+
`,p=(0,a.default)(c.Box)`
|
|
425
421
|
border-top: 1px solid ${({theme:e})=>e.palette.inputBackground};
|
|
422
|
+
`;t.ButtonImage=a.default.img`
|
|
423
|
+
height: ${({theme:e})=>e.iconSize.xlarge};
|
|
424
|
+
width: ${({theme:e})=>e.iconSize.xlarge};
|
|
425
|
+
border-radius: ${({theme:e})=>e.radius.small};
|
|
426
426
|
`},7261: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.useTooltip=t.isElementOverflown=t.OptionTitle=void 0;const i=n(5893),a=n(6689),l=n(7769),c=n(9507),s=o(n(7518));t.OptionTitle=e=>{var{children:n}=e,o=r(e,["children"]);return(0,i.jsx)(u,Object.assign({ref:(0,t.useTooltip)(n)},o,{children:n}))};const u=(0,s.default)(l.Text)`
|
|
427
427
|
${c.Mixins.textOverflow};
|
|
428
428
|
margin-left: ${({theme:e})=>e.px.xsmall};
|
|
@@ -626,7 +626,7 @@ var e={8594:(e,t,n)=>{n.d(t,{Z:()=>o});var r=/^((children|dangerouslySetInnerHTM
|
|
|
626
626
|
&:disabled + ${v} {
|
|
627
627
|
opacity: 0.5;
|
|
628
628
|
}
|
|
629
|
-
`},8051: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(1),t)},9368: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.DateInput=void 0;const i=n(5893),a=n(6689),l=o(n(7518)),c=n(9634),s=n(1335),u=n(8878);t.DateInput=(0,a.forwardRef)(((e,t)=>{var{value:n="",type:o="date",expanded:l=!1,onChange:c}=e,s=r(e,["value","type","expanded","onChange"]);const[f,C]=(0,a.useState)(n);return(0,a.useEffect)((()=>C(n)),[]),(0,i.jsx)(u.BaseInput,Object.assign({type:o},s,{renderInput:e=>{var n=r(e,[]);return(0,i.jsx)(d,Object.assign({ref:t,type:o,onChange:e=>{const{value:t}=e.target;t&&C(t),null==c||c(e)},value:f,expanded:l},n))}}))})),t.DateInput.displayName="DateInput";const d=(0,a.forwardRef)(((e,t)=>{var{type:n,expanded:o,onExpand:a}=e,l=r(e,["type","expanded","onExpand"]);return(0,i.jsxs)(f,{children:[(0,i.jsx)(p,{children:(0,i.jsx)(c.Icon,{icon:"time"===n?"ClockIcon":"CalendarIcon"})}),(0,i.jsx)(h,Object.assign({ref:t,type:n,onKeyDown:e=>{" "===e.key&&
|
|
629
|
+
`},8051: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(1),t)},9368: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.DateInput=void 0;const i=n(5893),a=n(6689),l=o(n(7518)),c=n(9634),s=n(1335),u=n(8878);t.DateInput=(0,a.forwardRef)(((e,t)=>{var{value:n="",type:o="date",expanded:l=!1,onChange:c}=e,s=r(e,["value","type","expanded","onChange"]);const[f,C]=(0,a.useState)(n);return(0,a.useEffect)((()=>C(n)),[]),(0,i.jsx)(u.BaseInput,Object.assign({type:o},s,{renderInput:e=>{var n=r(e,[]);return(0,i.jsx)(d,Object.assign({ref:t,type:o,onChange:e=>{const{value:t}=e.target;t&&C(t),null==c||c(e)},value:f,expanded:l},n))}}))})),t.DateInput.displayName="DateInput";const d=(0,a.forwardRef)(((e,t)=>{var{type:n,expanded:o,onExpand:a}=e,l=r(e,["type","expanded","onExpand"]);return(0,i.jsxs)(f,{children:[(0,i.jsx)(p,{children:(0,i.jsx)(c.Icon,{icon:"time"===n?"ClockIcon":"CalendarIcon"})}),(0,i.jsx)(h,Object.assign({ref:t,type:n,onKeyDown:e=>{" "===e.key&&e.preventDefault()}},l)),(0,i.jsx)(v,Object.assign({flexDirection:"column",disabled:l.disabled,onClick:a},{children:(0,i.jsx)(c.Icon,{icon:o?"ChevronUpIcon":"ChevronDownIcon"})}))]})}));d.displayName="StyledDateInput";const f=l.default.div`
|
|
630
630
|
position: relative;
|
|
631
631
|
overflow: hidden;
|
|
632
632
|
border-radius: ${({theme:e})=>e.radius.small};
|
package/package.json
CHANGED