@foxford/ui 2.64.0 → 2.65.0-beta-6fe26ef-20250220
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.
- package/components/Menu/Menu.js +1 -1
- package/components/Menu/Menu.js.map +1 -1
- package/components/Menu/Menu.mjs +1 -1
- package/components/Menu/Menu.mjs.map +1 -1
- package/dts/index.d.ts +2 -0
- package/hooks/useClickOutside.js +1 -1
- package/hooks/useClickOutside.js.map +1 -1
- package/hooks/useClickOutside.mjs +1 -1
- package/hooks/useClickOutside.mjs.map +1 -1
- package/package.json +2 -1
package/components/Menu/Menu.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
'use strict';var React=require('react');var ramda=require('ramda');var withMergedProps=require('../../hocs/withMergedProps.js');var dom=require('../../shared/utils/dom.js');var jsxRuntime=require('react/jsx-runtime');var MenuComponent=require('../MenuComponent/MenuComponent.js');var MenuList=require('../MenuList/MenuList.js');var MenuContainer=require('../MenuContainer/MenuContainer.js');var MenuDivider=require('../MenuDivider/MenuDivider.js');var constants=require('../MenuComponent/constants.js');var Tooltip=require('../Tooltip/Tooltip.js');const Menu=Object.assign(withMergedProps.withMergedProps(React.forwardRef(((e,
|
|
1
|
+
'use strict';var React=require('react');var ramda=require('ramda');var withMergedProps=require('../../hocs/withMergedProps.js');var dom=require('../../shared/utils/dom.js');var jsxRuntime=require('react/jsx-runtime');var MenuComponent=require('../MenuComponent/MenuComponent.js');var MenuList=require('../MenuList/MenuList.js');var MenuContainer=require('../MenuContainer/MenuContainer.js');var MenuDivider=require('../MenuDivider/MenuDivider.js');var constants=require('../MenuComponent/constants.js');var Tooltip=require('../Tooltip/Tooltip.js');const Menu=Object.assign(withMergedProps.withMergedProps(React.forwardRef(((e,t)=>{const{size:n="m",disableFlip:r=!0,offset:s=8,placement:o="bottom-start",styles:i={},sizeXXS:a,sizeXS:u,sizeS:l,sizeM:c,sizeL:p,sizeXL:m,sizes:d,sizeUnits:M,render:v,primary:z,secondary:f,palette:C,autoFocus:j,disableAutoFocus:L,portalElement:b,...q}=e;const y={size:n,sizeXXS:a,sizeXS:u,sizeS:l,sizeM:c,sizeL:p,sizeXL:m,sizes:d,sizeUnits:M};const[R,g]=React.useState(null);const h=React.useRef(null);return React.useLayoutEffect((()=>{let e=null;return b?g(null):document.body&&(e=document.createElement('div'),e.dataset.menuPortal='true',e.style.position='relative',document.body.appendChild(e),g(e)),()=>{e&&e.isConnected&&e.remove()}}),[b]),b||R?jsxRuntime.jsx(Tooltip.Tooltip,{...q,ref:t,preset:"brand",hideArrow:!0,portalElement:b??R,getPopper:(e,t)=>{e.state.elements.reference instanceof HTMLElement&&(h.current=e.state.elements.reference),q.getPopper&&q.getPopper(e,t)},callback:(e,t)=>{e==='close'&&h.current instanceof HTMLElement&&dom.focusFirstFocusable(h.current),q.callback&&q.callback(e,t)},disableFlip:r,offset:s,placement:o,styles:ramda.mergeDeepLeft(i,f?{floater:{filter:'none'},wrapper:{cursor:'pointer'}}:{wrapper:{cursor:'pointer'}}),component:jsxRuntime.jsx(MenuComponent.MenuComponent,{...y,autoFocus:j,disableAutoFocus:L,primary:z,secondary:f,palette:C,children:v})}):null})),{displayName:'Menu',sizes:constants.SIZES}),{Component:MenuComponent.MenuComponent,List:MenuList.MenuList,Container:MenuContainer.MenuContainer,Divider:MenuDivider.MenuDivider});exports.Menu=Menu;
|
|
2
2
|
//# sourceMappingURL=Menu.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Menu.js","sources":["../../../../src/components/Menu/Menu.tsx"],"sourcesContent":["import { forwardRef, useRef } from 'react'\nimport { mergeDeepLeft } from 'ramda'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { focusFirstFocusable } from 'shared/utils/dom'\nimport { Tooltip } from 'components/Tooltip'\nimport { MenuComponent, SIZES } from 'components/MenuComponent'\nimport { MenuList } from 'components/MenuList'\nimport { MenuContainer } from 'components/MenuContainer'\nimport { MenuDivider } from 'components/MenuDivider'\nimport type { MenuProps } from './types'\n\nconst COMPONENT_NAME = 'Menu'\n\n/**\n *\n * Component based on [\"react-floater\"](https://www.npmjs.com/package/react-floater).\n *\n * Responsive \"size\" props are supported.\n *\n * Exposed \"ref\" attached to menu component root.\n *\n * See full [MenuProps](https://github.com/foxford/ui/blob/master/src/components/Menu/types.ts)\n */\nconst Menu: React.ForwardRefExoticComponent<MenuProps> & {\n Component: typeof MenuComponent\n List: typeof MenuList\n Container: typeof MenuContainer\n Divider: typeof MenuDivider\n} = Object.assign(\n withMergedProps<MenuProps, HTMLDivElement>(\n forwardRef((props, ref) => {\n const {\n size = 'm',\n disableFlip = true,\n offset = 8,\n placement = 'bottom-start',\n styles = {},\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n sizes,\n sizeUnits,\n render,\n primary,\n secondary,\n palette,\n autoFocus,\n disableAutoFocus,\n ...restProps\n } = props\n\n const sizeProps = {\n size,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n sizes,\n sizeUnits,\n }\n\n const trigger = useRef<HTMLElement | null>(null)\n\n return (\n <Tooltip\n {...restProps}\n ref={ref}\n preset='brand'\n hideArrow\n getPopper={(popper, origin) => {\n if (popper.state.elements.reference instanceof HTMLElement) {\n trigger.current = popper.state.elements.reference\n }\n\n if (restProps.getPopper) {\n restProps.getPopper(popper, origin)\n }\n }}\n callback={(action, tooltipProps) => {\n if (action === 'close' && trigger.current instanceof HTMLElement) {\n focusFirstFocusable(trigger.current)\n }\n\n if (restProps.callback) {\n restProps.callback(action, tooltipProps)\n }\n }}\n disableFlip={disableFlip}\n offset={offset}\n placement={placement}\n styles={mergeDeepLeft(\n styles,\n secondary\n ? { floater: { filter: 'none' }, wrapper: { cursor: 'pointer' } }\n : { wrapper: { cursor: 'pointer' } }\n )}\n component={\n <MenuComponent\n {...sizeProps}\n autoFocus={autoFocus}\n disableAutoFocus={disableAutoFocus}\n primary={primary}\n secondary={secondary}\n palette={palette}\n >\n {render}\n </MenuComponent>\n }\n />\n )\n }),\n {\n displayName: COMPONENT_NAME,\n sizes: SIZES,\n }\n ),\n {\n Component: MenuComponent,\n List: MenuList,\n Container: MenuContainer,\n Divider: MenuDivider,\n }\n)\n\nexport { Menu }\n"],"names":["Menu","Object","assign","withMergedProps","forwardRef","props","ref","size","disableFlip","offset","placement","styles","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","sizes","sizeUnits","render","primary","secondary","palette","autoFocus","disableAutoFocus","restProps","sizeProps","trigger","useRef","_jsx","Tooltip","preset","hideArrow","getPopper","popper","origin","state","elements","reference","HTMLElement","current","callback","action","tooltipProps","focusFirstFocusable","mergeDeepLeft","floater","filter","wrapper","cursor","component","jsx","MenuComponent","children","displayName","SIZES","Component","List","MenuList","Container","MenuContainer","Divider","MenuDivider"],"mappings":"oiBAuBA,MAAMA,KAKFC,OAAOC,OACTC,gBAAAA,gBACEC,MAAAA,YAAW,CAACC,EAAOC,KACjB,MAAMC,KACJA,EAAO,IAAGC,YACVA,GAAc,EAAIC,OAClBA,EAAS,EAACC,UACVA,EAAY,eAAcC,OAC1BA,EAAS,CAAE,EAAAC,QACXA,EAAOC,OACPA,EAAMC,MACNA,EAAKC,MACLA,EAAKC,MACLA,EAAKC,OACLA,EAAMC,MACNA,EAAKC,UACLA,EAASC,OACTA,EAAMC,QACNA,EAAOC,UACPA,EAASC,QACTA,EAAOC,UACPA,EAASC,iBACTA,KACGC,
|
|
1
|
+
{"version":3,"file":"Menu.js","sources":["../../../../src/components/Menu/Menu.tsx"],"sourcesContent":["import { forwardRef, useRef, useState, useLayoutEffect } from 'react'\nimport { mergeDeepLeft } from 'ramda'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { focusFirstFocusable } from 'shared/utils/dom'\nimport { Tooltip } from 'components/Tooltip'\nimport { MenuComponent, SIZES } from 'components/MenuComponent'\nimport { MenuList } from 'components/MenuList'\nimport { MenuContainer } from 'components/MenuContainer'\nimport { MenuDivider } from 'components/MenuDivider'\nimport type { MenuProps } from './types'\n\nconst COMPONENT_NAME = 'Menu'\n\n/**\n *\n * Component based on [\"react-floater\"](https://www.npmjs.com/package/react-floater).\n *\n * Responsive \"size\" props are supported.\n *\n * Exposed \"ref\" attached to menu component root.\n *\n * See full [MenuProps](https://github.com/foxford/ui/blob/master/src/components/Menu/types.ts)\n */\nconst Menu: React.ForwardRefExoticComponent<MenuProps> & {\n Component: typeof MenuComponent\n List: typeof MenuList\n Container: typeof MenuContainer\n Divider: typeof MenuDivider\n} = Object.assign(\n withMergedProps<MenuProps, HTMLDivElement>(\n forwardRef((props, ref) => {\n const {\n size = 'm',\n disableFlip = true,\n offset = 8,\n placement = 'bottom-start',\n styles = {},\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n sizes,\n sizeUnits,\n render,\n primary,\n secondary,\n palette,\n autoFocus,\n disableAutoFocus,\n portalElement,\n ...restProps\n } = props\n\n const sizeProps = {\n size,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n sizes,\n sizeUnits,\n }\n\n const [portal, setPortal] = useState<HTMLElement | null>(null)\n\n const trigger = useRef<HTMLElement | null>(null)\n\n useLayoutEffect(() => {\n let menuPortal: HTMLElement | null = null\n\n if (portalElement) {\n setPortal(null)\n } else if (document.body) {\n menuPortal = document.createElement('div')\n\n menuPortal.dataset.menuPortal = 'true'\n menuPortal.style.position = 'relative'\n\n document.body.appendChild(menuPortal)\n\n setPortal(menuPortal)\n }\n\n return () => {\n if (menuPortal && menuPortal.isConnected) {\n menuPortal.remove()\n }\n }\n }, [portalElement])\n\n if (!portalElement && !portal) {\n return null\n }\n\n return (\n <Tooltip\n {...restProps}\n ref={ref}\n preset='brand'\n hideArrow\n portalElement={portalElement ?? portal}\n getPopper={(popper, origin) => {\n if (popper.state.elements.reference instanceof HTMLElement) {\n trigger.current = popper.state.elements.reference\n }\n\n if (restProps.getPopper) {\n restProps.getPopper(popper, origin)\n }\n }}\n callback={(action, tooltipProps) => {\n if (action === 'close' && trigger.current instanceof HTMLElement) {\n focusFirstFocusable(trigger.current)\n }\n\n if (restProps.callback) {\n restProps.callback(action, tooltipProps)\n }\n }}\n disableFlip={disableFlip}\n offset={offset}\n placement={placement}\n styles={mergeDeepLeft(\n styles,\n secondary\n ? { floater: { filter: 'none' }, wrapper: { cursor: 'pointer' } }\n : { wrapper: { cursor: 'pointer' } }\n )}\n component={\n <MenuComponent\n {...sizeProps}\n autoFocus={autoFocus}\n disableAutoFocus={disableAutoFocus}\n primary={primary}\n secondary={secondary}\n palette={palette}\n >\n {render}\n </MenuComponent>\n }\n />\n )\n }),\n {\n displayName: COMPONENT_NAME,\n sizes: SIZES,\n }\n ),\n {\n Component: MenuComponent,\n List: MenuList,\n Container: MenuContainer,\n Divider: MenuDivider,\n }\n)\n\nexport { Menu }\n"],"names":["Menu","Object","assign","withMergedProps","forwardRef","props","ref","size","disableFlip","offset","placement","styles","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","sizes","sizeUnits","render","primary","secondary","palette","autoFocus","disableAutoFocus","portalElement","restProps","sizeProps","portal","setPortal","useState","trigger","useRef","useLayoutEffect","menuPortal","document","body","createElement","dataset","style","position","appendChild","isConnected","remove","_jsx","Tooltip","preset","hideArrow","getPopper","popper","origin","state","elements","reference","HTMLElement","current","callback","action","tooltipProps","focusFirstFocusable","mergeDeepLeft","floater","filter","wrapper","cursor","component","jsx","MenuComponent","children","displayName","SIZES","Component","List","MenuList","Container","MenuContainer","Divider","MenuDivider"],"mappings":"oiBAuBA,MAAMA,KAKFC,OAAOC,OACTC,gBAAAA,gBACEC,MAAAA,YAAW,CAACC,EAAOC,KACjB,MAAMC,KACJA,EAAO,IAAGC,YACVA,GAAc,EAAIC,OAClBA,EAAS,EAACC,UACVA,EAAY,eAAcC,OAC1BA,EAAS,CAAE,EAAAC,QACXA,EAAOC,OACPA,EAAMC,MACNA,EAAKC,MACLA,EAAKC,MACLA,EAAKC,OACLA,EAAMC,MACNA,EAAKC,UACLA,EAASC,OACTA,EAAMC,QACNA,EAAOC,UACPA,EAASC,QACTA,EAAOC,UACPA,EAASC,iBACTA,EAAgBC,cAChBA,KACGC,GACDtB,EAEJ,MAAMuB,EAAY,CAChBrB,OACAK,UACAC,SACAC,QACAC,QACAC,QACAC,SACAC,QACAC,aAGF,MAAOU,EAAQC,GAAaC,MAAQA,SAAqB,MAEzD,MAAMC,EAAUC,aAA2B,MAyB3C,OAvBAC,MAAAA,iBAAgB,KACd,IAAIC,EAAiC,KAerC,OAbIT,EACFI,EAAU,MACDM,SAASC,OAClBF,EAAaC,SAASE,cAAc,OAEpCH,EAAWI,QAAQJ,WAAa,OAChCA,EAAWK,MAAMC,SAAW,WAE5BL,SAASC,KAAKK,YAAYP,GAE1BL,EAAUK,IAGL,KACDA,GAAcA,EAAWQ,aAC3BR,EAAWS,QACb,CACD,GACA,CAAClB,IAECA,GAAkBG,EAKrBgB,WAAAA,IAACC,QAAAA,QAAO,IACFnB,EACJrB,IAAKA,EACLyC,OAAO,QACPC,WAAS,EACTtB,cAAeA,GAAiBG,EAChCoB,UAAWA,CAACC,EAAQC,KACdD,EAAOE,MAAMC,SAASC,qBAAqBC,cAC7CvB,EAAQwB,QAAUN,EAAOE,MAAMC,SAASC,WAGtC3B,EAAUsB,WACZtB,EAAUsB,UAAUC,EAAQC,EAC9B,EAEFM,SAAUA,CAACC,EAAQC,KACbD,IAAW,SAAW1B,EAAQwB,mBAAmBD,aACnDK,wBAAoB5B,EAAQwB,SAG1B7B,EAAU8B,UACZ9B,EAAU8B,SAASC,EAAQC,EAC7B,EAEFnD,YAAaA,EACbC,OAAQA,EACRC,UAAWA,EACXC,OAAQkD,MAAAA,cACNlD,EACAW,EACI,CAAEwC,QAAS,CAAEC,OAAQ,QAAUC,QAAS,CAAEC,OAAQ,YAClD,CAAED,QAAS,CAAEC,OAAQ,aAE3BC,UACErB,WAAAsB,IAACC,4BAAa,IACRxC,EACJJ,UAAWA,EACXC,iBAAkBA,EAClBJ,QAASA,EACTC,UAAWA,EACXC,QAASA,EAAQ8C,SAEhBjD,MA9CA,IAiDL,IAGN,CACEkD,YAzIiB,OA0IjBpD,MAAOqD,UAAAA,QAGX,CACEC,UAAWJ,cAAaA,cACxBK,KAAMC,SAAQA,SACdC,UAAWC,cAAaA,cACxBC,QAASC,YAAAA"}
|
package/components/Menu/Menu.mjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{forwardRef,useRef}from'react';import{mergeDeepLeft}from'ramda';import{withMergedProps}from'../../hocs/withMergedProps.mjs';import{focusFirstFocusable}from'../../shared/utils/dom.mjs';import{jsx}from'react/jsx-runtime';import{MenuComponent}from'../MenuComponent/MenuComponent.mjs';import{MenuList}from'../MenuList/MenuList.mjs';import{MenuContainer}from'../MenuContainer/MenuContainer.mjs';import{MenuDivider}from'../MenuDivider/MenuDivider.mjs';import{SIZES}from'../MenuComponent/constants.mjs';import{Tooltip}from'../Tooltip/Tooltip.mjs';const Menu=Object.assign(withMergedProps(forwardRef(((e,
|
|
1
|
+
import{forwardRef,useState,useRef,useLayoutEffect}from'react';import{mergeDeepLeft}from'ramda';import{withMergedProps}from'../../hocs/withMergedProps.mjs';import{focusFirstFocusable}from'../../shared/utils/dom.mjs';import{jsx}from'react/jsx-runtime';import{MenuComponent}from'../MenuComponent/MenuComponent.mjs';import{MenuList}from'../MenuList/MenuList.mjs';import{MenuContainer}from'../MenuContainer/MenuContainer.mjs';import{MenuDivider}from'../MenuDivider/MenuDivider.mjs';import{SIZES}from'../MenuComponent/constants.mjs';import{Tooltip}from'../Tooltip/Tooltip.mjs';const Menu=Object.assign(withMergedProps(forwardRef(((e,t)=>{const{size:o="m",disableFlip:r=!0,offset:n=8,placement:s="bottom-start",styles:i={},sizeXXS:m,sizeXS:u,sizeS:a,sizeM:p,sizeL:l,sizeXL:c,sizes:f,sizeUnits:d,render:M,primary:z,secondary:L,palette:b,autoFocus:C,disableAutoFocus:j,portalElement:y,...S}=e;const F={size:o,sizeXXS:m,sizeXS:u,sizeS:a,sizeM:p,sizeL:l,sizeXL:c,sizes:f,sizeUnits:d};const[g,E]=useState(null);const h=useRef(null);return useLayoutEffect((()=>{let e=null;return y?E(null):document.body&&(e=document.createElement('div'),e.dataset.menuPortal='true',e.style.position='relative',document.body.appendChild(e),E(e)),()=>{e&&e.isConnected&&e.remove()}}),[y]),y||g?jsx(Tooltip,{...S,ref:t,preset:"brand",hideArrow:!0,portalElement:y??g,getPopper:(e,t)=>{e.state.elements.reference instanceof HTMLElement&&(h.current=e.state.elements.reference),S.getPopper&&S.getPopper(e,t)},callback:(e,t)=>{e==='close'&&h.current instanceof HTMLElement&&focusFirstFocusable(h.current),S.callback&&S.callback(e,t)},disableFlip:r,offset:n,placement:s,styles:mergeDeepLeft(i,L?{floater:{filter:'none'},wrapper:{cursor:'pointer'}}:{wrapper:{cursor:'pointer'}}),component:jsx(MenuComponent,{...F,autoFocus:C,disableAutoFocus:j,primary:z,secondary:L,palette:b,children:M})}):null})),{displayName:'Menu',sizes:SIZES}),{Component:MenuComponent,List:MenuList,Container:MenuContainer,Divider:MenuDivider});export{Menu};
|
|
2
2
|
//# sourceMappingURL=Menu.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Menu.mjs","sources":["../../../../src/components/Menu/Menu.tsx"],"sourcesContent":["import { forwardRef, useRef } from 'react'\nimport { mergeDeepLeft } from 'ramda'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { focusFirstFocusable } from 'shared/utils/dom'\nimport { Tooltip } from 'components/Tooltip'\nimport { MenuComponent, SIZES } from 'components/MenuComponent'\nimport { MenuList } from 'components/MenuList'\nimport { MenuContainer } from 'components/MenuContainer'\nimport { MenuDivider } from 'components/MenuDivider'\nimport type { MenuProps } from './types'\n\nconst COMPONENT_NAME = 'Menu'\n\n/**\n *\n * Component based on [\"react-floater\"](https://www.npmjs.com/package/react-floater).\n *\n * Responsive \"size\" props are supported.\n *\n * Exposed \"ref\" attached to menu component root.\n *\n * See full [MenuProps](https://github.com/foxford/ui/blob/master/src/components/Menu/types.ts)\n */\nconst Menu: React.ForwardRefExoticComponent<MenuProps> & {\n Component: typeof MenuComponent\n List: typeof MenuList\n Container: typeof MenuContainer\n Divider: typeof MenuDivider\n} = Object.assign(\n withMergedProps<MenuProps, HTMLDivElement>(\n forwardRef((props, ref) => {\n const {\n size = 'm',\n disableFlip = true,\n offset = 8,\n placement = 'bottom-start',\n styles = {},\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n sizes,\n sizeUnits,\n render,\n primary,\n secondary,\n palette,\n autoFocus,\n disableAutoFocus,\n ...restProps\n } = props\n\n const sizeProps = {\n size,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n sizes,\n sizeUnits,\n }\n\n const trigger = useRef<HTMLElement | null>(null)\n\n return (\n <Tooltip\n {...restProps}\n ref={ref}\n preset='brand'\n hideArrow\n getPopper={(popper, origin) => {\n if (popper.state.elements.reference instanceof HTMLElement) {\n trigger.current = popper.state.elements.reference\n }\n\n if (restProps.getPopper) {\n restProps.getPopper(popper, origin)\n }\n }}\n callback={(action, tooltipProps) => {\n if (action === 'close' && trigger.current instanceof HTMLElement) {\n focusFirstFocusable(trigger.current)\n }\n\n if (restProps.callback) {\n restProps.callback(action, tooltipProps)\n }\n }}\n disableFlip={disableFlip}\n offset={offset}\n placement={placement}\n styles={mergeDeepLeft(\n styles,\n secondary\n ? { floater: { filter: 'none' }, wrapper: { cursor: 'pointer' } }\n : { wrapper: { cursor: 'pointer' } }\n )}\n component={\n <MenuComponent\n {...sizeProps}\n autoFocus={autoFocus}\n disableAutoFocus={disableAutoFocus}\n primary={primary}\n secondary={secondary}\n palette={palette}\n >\n {render}\n </MenuComponent>\n }\n />\n )\n }),\n {\n displayName: COMPONENT_NAME,\n sizes: SIZES,\n }\n ),\n {\n Component: MenuComponent,\n List: MenuList,\n Container: MenuContainer,\n Divider: MenuDivider,\n }\n)\n\nexport { Menu }\n"],"names":["Menu","Object","assign","withMergedProps","forwardRef","props","ref","size","disableFlip","offset","placement","styles","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","sizes","sizeUnits","render","primary","secondary","palette","autoFocus","disableAutoFocus","restProps","sizeProps","trigger","useRef","_jsx","Tooltip","preset","hideArrow","getPopper","popper","origin","state","elements","reference","HTMLElement","current","callback","action","tooltipProps","focusFirstFocusable","mergeDeepLeft","floater","filter","wrapper","cursor","component","MenuComponent","children","displayName","SIZES","Component","List","MenuList","Container","MenuContainer","Divider","MenuDivider"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Menu.mjs","sources":["../../../../src/components/Menu/Menu.tsx"],"sourcesContent":["import { forwardRef, useRef, useState, useLayoutEffect } from 'react'\nimport { mergeDeepLeft } from 'ramda'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { focusFirstFocusable } from 'shared/utils/dom'\nimport { Tooltip } from 'components/Tooltip'\nimport { MenuComponent, SIZES } from 'components/MenuComponent'\nimport { MenuList } from 'components/MenuList'\nimport { MenuContainer } from 'components/MenuContainer'\nimport { MenuDivider } from 'components/MenuDivider'\nimport type { MenuProps } from './types'\n\nconst COMPONENT_NAME = 'Menu'\n\n/**\n *\n * Component based on [\"react-floater\"](https://www.npmjs.com/package/react-floater).\n *\n * Responsive \"size\" props are supported.\n *\n * Exposed \"ref\" attached to menu component root.\n *\n * See full [MenuProps](https://github.com/foxford/ui/blob/master/src/components/Menu/types.ts)\n */\nconst Menu: React.ForwardRefExoticComponent<MenuProps> & {\n Component: typeof MenuComponent\n List: typeof MenuList\n Container: typeof MenuContainer\n Divider: typeof MenuDivider\n} = Object.assign(\n withMergedProps<MenuProps, HTMLDivElement>(\n forwardRef((props, ref) => {\n const {\n size = 'm',\n disableFlip = true,\n offset = 8,\n placement = 'bottom-start',\n styles = {},\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n sizes,\n sizeUnits,\n render,\n primary,\n secondary,\n palette,\n autoFocus,\n disableAutoFocus,\n portalElement,\n ...restProps\n } = props\n\n const sizeProps = {\n size,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n sizes,\n sizeUnits,\n }\n\n const [portal, setPortal] = useState<HTMLElement | null>(null)\n\n const trigger = useRef<HTMLElement | null>(null)\n\n useLayoutEffect(() => {\n let menuPortal: HTMLElement | null = null\n\n if (portalElement) {\n setPortal(null)\n } else if (document.body) {\n menuPortal = document.createElement('div')\n\n menuPortal.dataset.menuPortal = 'true'\n menuPortal.style.position = 'relative'\n\n document.body.appendChild(menuPortal)\n\n setPortal(menuPortal)\n }\n\n return () => {\n if (menuPortal && menuPortal.isConnected) {\n menuPortal.remove()\n }\n }\n }, [portalElement])\n\n if (!portalElement && !portal) {\n return null\n }\n\n return (\n <Tooltip\n {...restProps}\n ref={ref}\n preset='brand'\n hideArrow\n portalElement={portalElement ?? portal}\n getPopper={(popper, origin) => {\n if (popper.state.elements.reference instanceof HTMLElement) {\n trigger.current = popper.state.elements.reference\n }\n\n if (restProps.getPopper) {\n restProps.getPopper(popper, origin)\n }\n }}\n callback={(action, tooltipProps) => {\n if (action === 'close' && trigger.current instanceof HTMLElement) {\n focusFirstFocusable(trigger.current)\n }\n\n if (restProps.callback) {\n restProps.callback(action, tooltipProps)\n }\n }}\n disableFlip={disableFlip}\n offset={offset}\n placement={placement}\n styles={mergeDeepLeft(\n styles,\n secondary\n ? { floater: { filter: 'none' }, wrapper: { cursor: 'pointer' } }\n : { wrapper: { cursor: 'pointer' } }\n )}\n component={\n <MenuComponent\n {...sizeProps}\n autoFocus={autoFocus}\n disableAutoFocus={disableAutoFocus}\n primary={primary}\n secondary={secondary}\n palette={palette}\n >\n {render}\n </MenuComponent>\n }\n />\n )\n }),\n {\n displayName: COMPONENT_NAME,\n sizes: SIZES,\n }\n ),\n {\n Component: MenuComponent,\n List: MenuList,\n Container: MenuContainer,\n Divider: MenuDivider,\n }\n)\n\nexport { Menu }\n"],"names":["Menu","Object","assign","withMergedProps","forwardRef","props","ref","size","disableFlip","offset","placement","styles","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","sizes","sizeUnits","render","primary","secondary","palette","autoFocus","disableAutoFocus","portalElement","restProps","sizeProps","portal","setPortal","useState","trigger","useRef","useLayoutEffect","menuPortal","document","body","createElement","dataset","style","position","appendChild","isConnected","remove","_jsx","Tooltip","preset","hideArrow","getPopper","popper","origin","state","elements","reference","HTMLElement","current","callback","action","tooltipProps","focusFirstFocusable","mergeDeepLeft","floater","filter","wrapper","cursor","component","MenuComponent","children","displayName","SIZES","Component","List","MenuList","Container","MenuContainer","Divider","MenuDivider"],"mappings":"2jBAuBA,MAAMA,KAKFC,OAAOC,OACTC,gBACEC,YAAW,CAACC,EAAOC,KACjB,MAAMC,KACJA,EAAO,IAAGC,YACVA,GAAc,EAAIC,OAClBA,EAAS,EAACC,UACVA,EAAY,eAAcC,OAC1BA,EAAS,CAAE,EAAAC,QACXA,EAAOC,OACPA,EAAMC,MACNA,EAAKC,MACLA,EAAKC,MACLA,EAAKC,OACLA,EAAMC,MACNA,EAAKC,UACLA,EAASC,OACTA,EAAMC,QACNA,EAAOC,UACPA,EAASC,QACTA,EAAOC,UACPA,EAASC,iBACTA,EAAgBC,cAChBA,KACGC,GACDtB,EAEJ,MAAMuB,EAAY,CAChBrB,OACAK,UACAC,SACAC,QACAC,QACAC,QACAC,SACAC,QACAC,aAGF,MAAOU,EAAQC,GAAaC,SAA6B,MAEzD,MAAMC,EAAUC,OAA2B,MAyB3C,OAvBAC,iBAAgB,KACd,IAAIC,EAAiC,KAerC,OAbIT,EACFI,EAAU,MACDM,SAASC,OAClBF,EAAaC,SAASE,cAAc,OAEpCH,EAAWI,QAAQJ,WAAa,OAChCA,EAAWK,MAAMC,SAAW,WAE5BL,SAASC,KAAKK,YAAYP,GAE1BL,EAAUK,IAGL,KACDA,GAAcA,EAAWQ,aAC3BR,EAAWS,QACb,CACD,GACA,CAAClB,IAECA,GAAkBG,EAKrBgB,IAACC,QAAO,IACFnB,EACJrB,IAAKA,EACLyC,OAAO,QACPC,WAAS,EACTtB,cAAeA,GAAiBG,EAChCoB,UAAWA,CAACC,EAAQC,KACdD,EAAOE,MAAMC,SAASC,qBAAqBC,cAC7CvB,EAAQwB,QAAUN,EAAOE,MAAMC,SAASC,WAGtC3B,EAAUsB,WACZtB,EAAUsB,UAAUC,EAAQC,EAC9B,EAEFM,SAAUA,CAACC,EAAQC,KACbD,IAAW,SAAW1B,EAAQwB,mBAAmBD,aACnDK,oBAAoB5B,EAAQwB,SAG1B7B,EAAU8B,UACZ9B,EAAU8B,SAASC,EAAQC,EAC7B,EAEFnD,YAAaA,EACbC,OAAQA,EACRC,UAAWA,EACXC,OAAQkD,cACNlD,EACAW,EACI,CAAEwC,QAAS,CAAEC,OAAQ,QAAUC,QAAS,CAAEC,OAAQ,YAClD,CAAED,QAAS,CAAEC,OAAQ,aAE3BC,UACErB,IAACsB,cAAa,IACRvC,EACJJ,UAAWA,EACXC,iBAAkBA,EAClBJ,QAASA,EACTC,UAAWA,EACXC,QAASA,EAAQ6C,SAEhBhD,MA9CA,IAiDL,IAGN,CACEiD,YAzIiB,OA0IjBnD,MAAOoD,QAGX,CACEC,UAAWJ,cACXK,KAAMC,SACNC,UAAWC,cACXC,QAASC"}
|
package/dts/index.d.ts
CHANGED
|
@@ -2916,6 +2916,8 @@ interface MenuProps extends ResponsiveSizeProps<MenuComponentSize>, React.RefAtt
|
|
|
2916
2916
|
closeButtonProps?: Partial<IconButtonProps>;
|
|
2917
2917
|
/** Menu z-index */
|
|
2918
2918
|
zIndex?: number;
|
|
2919
|
+
/** Close menu on click outside (work in uncontrolled mode) */
|
|
2920
|
+
closeOnClickOutside?: boolean;
|
|
2919
2921
|
}
|
|
2920
2922
|
|
|
2921
2923
|
/**
|
package/hooks/useClickOutside.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
'use strict';var React=require('react');exports.useClickOutside=(e,t,c)=>{React.useEffect((()=>{const listener=c=>{e.current
|
|
1
|
+
'use strict';var React=require('react');exports.useClickOutside=(e,t,c)=>{React.useEffect((()=>{const listener=c=>{const n=e.current;const r=c.target;n&&r&&r.isConnected&&(n.contains(r)||t(c))};return document.addEventListener('click',listener,c),()=>{document.removeEventListener('click',listener,c)}}),[e,t,c])};
|
|
2
2
|
//# sourceMappingURL=useClickOutside.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useClickOutside.js","sources":["../../../src/hooks/useClickOutside.ts"],"sourcesContent":["import { useEffect } from 'react'\nimport type { RefObject } from 'react'\n\nexport const useClickOutside = (\n ref: RefObject<HTMLElement>,\n handleClickOutside: (evt: MouseEvent) => void,\n // eslint-disable-next-line jsx-control-statements/jsx-jcs-no-undef\n listenerOptions?: AddEventListenerOptions | boolean\n) => {\n useEffect(() => {\n const listener = (evt: MouseEvent) => {\n
|
|
1
|
+
{"version":3,"file":"useClickOutside.js","sources":["../../../src/hooks/useClickOutside.ts"],"sourcesContent":["import { useEffect } from 'react'\nimport type { RefObject } from 'react'\n\nexport const useClickOutside = (\n ref: RefObject<HTMLElement>,\n handleClickOutside: (evt: MouseEvent) => void,\n // eslint-disable-next-line jsx-control-statements/jsx-jcs-no-undef\n listenerOptions?: AddEventListenerOptions | boolean\n) => {\n useEffect(() => {\n const listener = (evt: MouseEvent) => {\n const element = ref.current\n const target = evt.target as Node\n\n if (!element || !target || !target.isConnected) {\n return\n }\n\n if (!element.contains(target)) {\n handleClickOutside(evt)\n }\n }\n\n document.addEventListener('click', listener, listenerOptions)\n\n return () => {\n document.removeEventListener('click', listener, listenerOptions)\n }\n }, [ref, handleClickOutside, listenerOptions])\n}\n"],"names":["useClickOutside","ref","handleClickOutside","listenerOptions","useEffect","listener","evt","element","current","target","isConnected","contains","document","addEventListener","removeEventListener"],"mappings":"gEAG+BA,CAC7BC,EACAC,EAEAC,KAEAC,MAAAA,WAAU,KACR,MAAMC,SAAYC,IAChB,MAAMC,EAAUN,EAAIO,QACpB,MAAMC,EAASH,EAAIG,OAEdF,GAAYE,GAAWA,EAAOC,cAI9BH,EAAQI,SAASF,IACpBP,EAAmBI,GACrB,EAKF,OAFAM,SAASC,iBAAiB,QAASR,SAAUF,GAEtC,KACLS,SAASE,oBAAoB,QAAST,SAAUF,EAAgB,CACjE,GACA,CAACF,EAAKC,EAAoBC,GAAiB"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{useEffect}from'react';const useClickOutside=(e,t,c)=>{useEffect((()=>{const listener=c=>{e.current
|
|
1
|
+
import{useEffect}from'react';const useClickOutside=(e,t,c)=>{useEffect((()=>{const listener=c=>{const n=e.current;const s=c.target;n&&s&&s.isConnected&&(n.contains(s)||t(c))};return document.addEventListener('click',listener,c),()=>{document.removeEventListener('click',listener,c)}}),[e,t,c])};export{useClickOutside};
|
|
2
2
|
//# sourceMappingURL=useClickOutside.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useClickOutside.mjs","sources":["../../../src/hooks/useClickOutside.ts"],"sourcesContent":["import { useEffect } from 'react'\nimport type { RefObject } from 'react'\n\nexport const useClickOutside = (\n ref: RefObject<HTMLElement>,\n handleClickOutside: (evt: MouseEvent) => void,\n // eslint-disable-next-line jsx-control-statements/jsx-jcs-no-undef\n listenerOptions?: AddEventListenerOptions | boolean\n) => {\n useEffect(() => {\n const listener = (evt: MouseEvent) => {\n
|
|
1
|
+
{"version":3,"file":"useClickOutside.mjs","sources":["../../../src/hooks/useClickOutside.ts"],"sourcesContent":["import { useEffect } from 'react'\nimport type { RefObject } from 'react'\n\nexport const useClickOutside = (\n ref: RefObject<HTMLElement>,\n handleClickOutside: (evt: MouseEvent) => void,\n // eslint-disable-next-line jsx-control-statements/jsx-jcs-no-undef\n listenerOptions?: AddEventListenerOptions | boolean\n) => {\n useEffect(() => {\n const listener = (evt: MouseEvent) => {\n const element = ref.current\n const target = evt.target as Node\n\n if (!element || !target || !target.isConnected) {\n return\n }\n\n if (!element.contains(target)) {\n handleClickOutside(evt)\n }\n }\n\n document.addEventListener('click', listener, listenerOptions)\n\n return () => {\n document.removeEventListener('click', listener, listenerOptions)\n }\n }, [ref, handleClickOutside, listenerOptions])\n}\n"],"names":["useClickOutside","ref","handleClickOutside","listenerOptions","useEffect","listener","evt","element","current","target","isConnected","contains","document","addEventListener","removeEventListener"],"mappings":"6BAGO,MAAMA,gBAAkBA,CAC7BC,EACAC,EAEAC,KAEAC,WAAU,KACR,MAAMC,SAAYC,IAChB,MAAMC,EAAUN,EAAIO,QACpB,MAAMC,EAASH,EAAIG,OAEdF,GAAYE,GAAWA,EAAOC,cAI9BH,EAAQI,SAASF,IACpBP,EAAmBI,GACrB,EAKF,OAFAM,SAASC,iBAAiB,QAASR,SAAUF,GAEtC,KACLS,SAASE,oBAAoB,QAAST,SAAUF,EAAgB,CACjE,GACA,CAACF,EAAKC,EAAoBC,GAAiB"}
|
package/package.json
CHANGED