@foxford/ui 2.33.0-beta-1dab4bf-20240626 → 2.34.0-beta-afbb6e3-20240701

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.
@@ -0,0 +1,2 @@
1
+ import e from'@babel/runtime/helpers/objectSpread2';import r from'@babel/runtime/helpers/objectWithoutProperties';import{forwardRef as t,useRef as s}from'react';import{mergeDeepLeft as o}from'ramda';import{withMergedProps as i}from'../../hocs/withMergedProps.js';import{focusFirstFocusable as a}from'../../shared/utils/dom.js';import{Tooltip as n}from'../Tooltip/Tooltip.js';import{MenuComponent as p}from'../MenuComponent/MenuComponent.js';import{MenuList as m}from'../MenuList/MenuList.js';import{MenuContainer as l}from'../MenuContainer/MenuContainer.js';import{MenuDivider as u}from'../MenuDivider/MenuDivider.js';import{jsx as c}from'react/jsx-runtime';import{SIZES as f}from'../MenuComponent/constants.js';var d=["size","disableFlip","offset","placement","styles","sizes","sizeUnits","render","primary","secondary","palette","autoFocus","disableAutoFocus","maxHeight"];var b=Object.assign(i(t(((t,i)=>{var{size:m="m",disableFlip:l=!0,offset:u=8,placement:f="bottom-start",styles:b={},sizes:M,sizeUnits:j,render:h,primary:F,secondary:g,palette:y,autoFocus:z,disableAutoFocus:C,maxHeight:v}=t,L=r(t,d);var w=s(null);return c(n,e(e({},L),{},{ref:i,preset:"brand",size:m,hideArrow:!0,getPopper:(e,r)=>{e.state.elements.reference instanceof HTMLElement&&(w.current=e.state.elements.reference),L.getPopper&&L.getPopper(e,r)},callback:(e,r)=>{'close'===e&&w.current instanceof HTMLElement&&a(w.current),L.callback&&L.callback(e,r)},disableFlip:l,offset:u,placement:f,styles:o(b,g?{floater:{filter:'none'},wrapper:{cursor:'pointer'}}:{wrapper:{cursor:'pointer'}}),component:c(p,{sizes:M,sizeUnits:j,autoFocus:z,disableAutoFocus:C,primary:F,secondary:g,palette:y,maxHeight:v,children:h})}))})),{displayName:'Menu',sizes:f}),{Component:p,List:m,Container:l,Divider:u});export{b as Menu};
2
+ //# sourceMappingURL=Menu.js.map
@@ -0,0 +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 accepts [\"react-floater\"](https://www.npmjs.com/package/react-floater/v/0.8.2) v0.8.2 props.\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 sizes,\n sizeUnits,\n render,\n primary,\n secondary,\n palette,\n autoFocus,\n disableAutoFocus,\n maxHeight,\n ...restProps\n } = props\n\n const trigger = useRef<HTMLElement | null>(null)\n\n return (\n <Tooltip\n {...restProps}\n ref={ref}\n preset='brand'\n size={size}\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 sizes={sizes}\n sizeUnits={sizeUnits}\n autoFocus={autoFocus}\n disableAutoFocus={disableAutoFocus}\n primary={primary}\n secondary={secondary}\n palette={palette}\n maxHeight={maxHeight}\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","sizes","sizeUnits","render","primary","secondary","palette","autoFocus","disableAutoFocus","maxHeight","restProps","_excluded","trigger","useRef","_jsx","Tooltip","_objectSpread","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":"22BAuBA,IAAMA,EAKFC,OAAOC,OACTC,EACEC,GAAAA,CAAYC,EAAOC,KACjB,IAAMC,KACJA,EAAO,IADHC,YAEJA,KAFIC,OAGJA,EAAS,EAHLC,UAIJA,EAAY,eAJRC,OAKJA,EAAS,GALLC,MAMJA,EANIC,UAOJA,EAPIC,OAQJA,EARIC,QASJA,EATIC,UAUJA,EAVIC,QAWJA,EAXIC,UAYJA,EAZIC,iBAaJA,EAbIC,UAcJA,GAEEf,EADCgB,IACDhB,EAhBJiB,GAkBA,IAAMC,EAAUC,EAA2B,MAE3C,OACEC,EAACC,EAADC,EAAAA,EAAA,GACMN,GADN,GAAA,CAEEf,IAAKA,EACLsB,OAAO,QACPrB,KAAMA,EACNsB,WAAAA,EACAC,UAAW,CAACC,EAAQC,KACdD,EAAOE,MAAMC,SAASC,qBAAqBC,cAC7Cb,EAAQc,QAAUN,EAAOE,MAAMC,SAASC,WAGtCd,EAAUS,WACZT,EAAUS,UAAUC,EAAQC,IAGhCM,SAAU,CAACC,EAAQC,KACF,UAAXD,GAAsBhB,EAAQc,mBAAmBD,aACnDK,EAAoBlB,EAAQc,SAG1BhB,EAAUiB,UACZjB,EAAUiB,SAASC,EAAQC,IAG/BhC,YAAaA,EACbC,OAAQA,EACRC,UAAWA,EACXC,OAAQ+B,EACN/B,EACAK,EACI,CAAE2B,QAAS,CAAEC,OAAQ,QAAUC,QAAS,CAAEC,OAAQ,YAClD,CAAED,QAAS,CAAEC,OAAQ,aAE3BC,UACEtB,EAACuB,EAAD,CACEpC,MAAOA,EACPC,UAAWA,EACXK,UAAWA,EACXC,iBAAkBA,EAClBJ,QAASA,EACTC,UAAWA,EACXC,QAASA,EACTG,UAAWA,EARb6B,SAUGnC,UAMX,CACEoC,YA5FiB,OA6FjBtC,MAAOuC,IAGX,CACEC,UAAWJ,EACXK,KAAMC,EACNC,UAAWC,EACXC,QAASC"}
@@ -0,0 +1,2 @@
1
+ import e from'@babel/runtime/helpers/objectSpread2';import s from'@babel/runtime/helpers/objectWithoutProperties';import{forwardRef as o,useRef as r,useImperativeHandle as t,useEffect as i,isValidElement as a,cloneElement as n}from'react';import{withMergedProps as u}from'../../hocs/withMergedProps.js';import{focusFirstFocusable as m}from'../../shared/utils/dom.js';import{SIZES as l}from'./constants.js';export{SIZES}from'./constants.js';import{Root as p}from'./style.js';import{jsx as c}from'react/jsx-runtime';var z=["size","maxHeight","closeFn","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","children","autoFocus","disableAutoFocus","showCloseButton","closeButtonProps","onUnmount"];var f=()=>{};var h=u(o(((o,u)=>{var{size:l="m",maxHeight:h=240,closeFn:d=f,sizeXXS:S,sizeXS:X,sizeS:b,sizeM:j,sizeL:v,sizeXL:F,children:x,autoFocus:M,disableAutoFocus:w,showCloseButton:B,closeButtonProps:L,onUnmount:P}=o,g=s(o,z);var C=r(null);t(u,(()=>C.current)),i((()=>()=>{P&&P()}),[]),i((()=>{var e=setTimeout((()=>{!w&&C.current&&m(C.current)}),0);return()=>{clearTimeout(e)}}),[M,w]);var E={size:l,sizeXXS:S,sizeXS:X,sizeS:b,sizeM:j,sizeL:v,sizeXL:F};var H={showCloseButton:B,closeButtonProps:L,closeFn:d};var y=a(x)&&'object'==typeof x.props&&null!==x.props?x.props:{};return c(p,e(e(e({},g),E),{},{maxHeight:h,ref:C,children:a(x)?n(x,e(e(e({},E),H),y)):x(e(e({},E),H))}))})),{displayName:'MenuComponent',sizes:l});export{h as MenuComponent};
2
+ //# sourceMappingURL=MenuComponent.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"MenuComponent.js","sources":["../../../../src/components/MenuComponent/MenuComponent.tsx"],"sourcesContent":["import { forwardRef, useRef, useImperativeHandle, useEffect, isValidElement, cloneElement } from 'react'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { focusFirstFocusable } from 'shared/utils/dom'\nimport { SIZES } from './constants'\nimport * as Styled from './style'\nimport type { MenuComponentProps } from './types'\n\nconst COMPONENT_NAME = 'MenuComponent'\n\nconst noop = () => undefined\n\n/**\n *\n * Component accepts all \\<div\\> attributes.\n *\n * Responsive \"size\" props are supported.\n *\n * Exposed \"ref\" attached to root node.\n *\n * See full [MenuComponentProps](https://github.com/foxford/ui/blob/master/src/components/MenuComponent/types.ts)\n */\nconst MenuComponent: React.ForwardRefExoticComponent<MenuComponentProps> = withMergedProps<\n MenuComponentProps,\n HTMLDivElement\n>(\n forwardRef((props, forwardedRef) => {\n const {\n size = 'm',\n maxHeight = 240,\n closeFn = noop,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n children,\n autoFocus,\n disableAutoFocus,\n showCloseButton,\n closeButtonProps,\n onUnmount,\n ...restProps\n } = props\n\n const ref = useRef<HTMLDivElement>(null)\n\n useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(forwardedRef, () => ref.current)\n\n useEffect(() => {\n return () => {\n if (onUnmount) onUnmount()\n }\n }, [])\n\n useEffect(() => {\n const timerId = setTimeout(() => {\n if (!disableAutoFocus && ref.current) focusFirstFocusable(ref.current)\n }, 0)\n\n return () => {\n clearTimeout(timerId)\n }\n }, [autoFocus, disableAutoFocus])\n\n const sizeProps = {\n size,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n }\n\n const forwardProps = {\n showCloseButton,\n closeButtonProps,\n closeFn,\n }\n\n const elementProps =\n isValidElement(children) && typeof children.props === 'object' && children.props !== null ? children.props : {}\n\n return (\n <Styled.Root {...restProps} {...sizeProps} maxHeight={maxHeight} ref={ref}>\n {isValidElement(children)\n ? cloneElement(children, { ...sizeProps, ...forwardProps, ...elementProps })\n : children({ ...sizeProps, ...forwardProps })}\n </Styled.Root>\n )\n }),\n {\n displayName: COMPONENT_NAME,\n sizes: SIZES,\n }\n)\n\nexport { MenuComponent }\n\nexport { SIZES }\n"],"names":["noop","MenuComponent","withMergedProps","forwardRef","props","forwardedRef","size","maxHeight","closeFn","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","children","autoFocus","disableAutoFocus","showCloseButton","closeButtonProps","onUnmount","restProps","_excluded","ref","useRef","useImperativeHandle","current","useEffect","timerId","setTimeout","focusFirstFocusable","clearTimeout","sizeProps","forwardProps","elementProps","isValidElement","_jsx","Styled.Root","cloneElement","_objectSpread","displayName","sizes","SIZES"],"mappings":"srBASA,IAAMA,EAAO,OAYPC,IAAAA,EAAqEC,EAIzEC,GAAAA,CAAYC,EAAOC,KACjB,IAAMC,KACJA,EAAO,IADHC,UAEJA,EAAY,IAFRC,QAGJA,EAAUR,EAHNS,QAIJA,EAJIC,OAKJA,EALIC,MAMJA,EANIC,MAOJA,EAPIC,MAQJA,EARIC,OASJA,EATIC,SAUJA,EAVIC,UAWJA,EAXIC,iBAYJA,EAZIC,gBAaJA,EAbIC,iBAcJA,EAdIC,UAeJA,GAEEhB,EADCiB,IACDjB,EAjBJkB,GAmBA,IAAMC,EAAMC,EAAuB,MAEnCC,EAAkEpB,GAAc,IAAMkB,EAAIG,UAE1FC,GAAU,IACD,KACDP,GAAWA,MAEhB,IAEHO,GAAU,KACR,IAAMC,EAAUC,YAAAA,MACTZ,GAAoBM,EAAIG,SAASI,EAAoBP,EAAIG,WAC7D,GAEH,MAAO,KACLK,aAAaH,MAEd,CAACZ,EAAWC,IAEf,IAAMe,EAAY,CAChB1B,KAAAA,EACAG,QAAAA,EACAC,OAAAA,EACAC,MAAAA,EACAC,MAAAA,EACAC,MAAAA,EACAC,OAAAA,GAGF,IAAMmB,EAAe,CACnBf,gBAAAA,EACAC,iBAAAA,EACAX,QAAAA,GAGF,IAAM0B,EACJC,EAAepB,IAAuC,iBAAnBA,EAASX,OAAyC,OAAnBW,EAASX,MAAiBW,EAASX,MAAQ,GAE/G,OACEgC,EAACC,EAAgBhB,EAAAA,EAAAA,EAAAA,GAAAA,GAAeW,GAAhC,GAAA,CAA2CzB,UAAWA,EAAWgB,IAAKA,EAAtER,SACGoB,EAAepB,GACZuB,EAAavB,EAADwB,EAAAA,EAAAA,EAAA,GAAgBP,GAAcC,GAAiBC,IAC3DnB,EAAQwB,EAAAA,EAAA,GAAMP,GAAcC,UAItC,CACEO,YAtFmB,gBAuFnBC,MAAOC"}
@@ -0,0 +1,2 @@
1
+ var x={xxxl:{maxWidth:560},xxl:{maxWidth:560},xl:{maxWidth:560},l:{maxWidth:560},m:{maxWidth:480},s:{maxWidth:280},xs:{maxWidth:280},xxs:{maxWidth:280},xxxs:{maxWidth:280}};export{x as SIZES};
2
+ //# sourceMappingURL=constants.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"constants.js","sources":["../../../../src/components/MenuComponent/constants.ts"],"sourcesContent":["import type { Sizes } from 'shared/types'\n\nexport const SIZES: Sizes = {\n xxxl: {\n maxWidth: 560,\n },\n xxl: {\n maxWidth: 560,\n },\n xl: {\n maxWidth: 560,\n },\n l: {\n maxWidth: 560,\n },\n m: {\n maxWidth: 480,\n },\n s: {\n maxWidth: 280,\n },\n xs: {\n maxWidth: 280,\n },\n xxs: {\n maxWidth: 280,\n },\n xxxs: {\n maxWidth: 280,\n },\n}\n"],"names":["SIZES","xxxl","maxWidth","xxl","xl","l","m","s","xs","xxs","xxxs"],"mappings":"AAEO,IAAMA,EAAe,CAC1BC,KAAM,CACJC,SAAU,KAEZC,IAAK,CACHD,SAAU,KAEZE,GAAI,CACFF,SAAU,KAEZG,EAAG,CACDH,SAAU,KAEZI,EAAG,CACDJ,SAAU,KAEZK,EAAG,CACDL,SAAU,KAEZM,GAAI,CACFN,SAAU,KAEZO,IAAK,CACHP,SAAU,KAEZQ,KAAM,CACJR,SAAU"}
@@ -0,0 +1,2 @@
1
+ import o from'@babel/runtime/helpers/objectSpread2';import r,{css as e}from'styled-components';import{createShouldForwardProp as a}from'../../shared/utils/style.js';import{responsiveSize as n}from'../../mixins/responsive-size.js';var t=a((o=>!['black','elevated','maxHeight'].includes(o)));var s=o=>"\n background-color: ".concat(o.backgroundColor,";\n border-color: ").concat(o.borderColor,";\n filter: drop-shadow(0 6px 10px ").concat(o.shadowColor,");\n");var i={primary:e(["",""],(r=>s(o({backgroundColor:r.theme.colors['bg-onmain-primary'],borderColor:r.theme.colors.transparent,shadowColor:r.elevated?r.theme.colors['bg-oncolor-hover']:r.theme.colors.transparent},r.palette)))),secondary:e(["",""],(r=>s(o({backgroundColor:r.theme.colors['bg-onmain-secondary'],borderColor:r.theme.colors['border-onmain-default-large'],shadowColor:r.elevated?r.theme.colors['bg-oncolor-hover']:r.theme.colors.transparent},r.palette))))};var l=r.div.withConfig({shouldForwardProp:t}).withConfig({componentId:"fox-ui__sc-10iu45v-0"})([""," "," ",""],(o=>"\n box-sizing: border-box;\n isolation: isolate;\n border-radius: 12px;\n border: 1px solid transparent;\n overflow-x: hidden;\n overflow-y: auto;\n scrollbar-width: thin;\n min-width: min-content;\n max-height: ".concat('string'==typeof o.maxHeight?o.maxHeight:"".concat(o.maxHeight,"px"),";\n ")),(o=>o.secondary?i.secondary:i.primary),n);export{i as COLOR_SCHEMA,l as Root};
2
+ //# sourceMappingURL=style.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"style.js","sources":["../../../../src/components/MenuComponent/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport type { StyledMenuComponentProps, MenuComponentPalette } from './types'\n\nconst shouldForwardMenuComponentProp = createShouldForwardProp(\n (propKey) => !['black', 'elevated', 'maxHeight'].includes(propKey)\n)\n\nconst template = (palette: MenuComponentPalette) => `\n background-color: ${palette.backgroundColor};\n border-color: ${palette.borderColor};\n filter: drop-shadow(0 6px 10px ${palette.shadowColor});\n`\n\nexport const COLOR_SCHEMA = {\n primary: css<StyledMenuComponentProps>`\n ${(props) =>\n template({\n backgroundColor: props.theme.colors['bg-onmain-primary'],\n borderColor: props.theme.colors.transparent,\n shadowColor: props.elevated ? props.theme.colors['bg-oncolor-hover'] : props.theme.colors.transparent,\n ...props.palette,\n })}\n `,\n secondary: css<StyledMenuComponentProps>`\n ${(props) =>\n template({\n backgroundColor: props.theme.colors['bg-onmain-secondary'],\n borderColor: props.theme.colors['border-onmain-default-large'],\n shadowColor: props.elevated ? props.theme.colors['bg-oncolor-hover'] : props.theme.colors.transparent,\n ...props.palette,\n })}\n `,\n}\n\nexport const Root = styled.div.withConfig<StyledMenuComponentProps>({\n shouldForwardProp: shouldForwardMenuComponentProp,\n})`\n ${(props) => `\n box-sizing: border-box;\n isolation: isolate;\n border-radius: 12px;\n border: 1px solid transparent;\n overflow-x: hidden;\n overflow-y: auto;\n scrollbar-width: thin;\n min-width: min-content;\n max-height: ${typeof props.maxHeight === 'string' ? props.maxHeight : `${props.maxHeight}px`};\n `}\n\n ${(props) => {\n return props.secondary ? COLOR_SCHEMA.secondary : COLOR_SCHEMA.primary\n }}\n\n ${responsiveSize}\n`\n"],"names":["shouldForwardMenuComponentProp","createShouldForwardProp","propKey","includes","template","palette","concat","backgroundColor","borderColor","shadowColor","COLOR_SCHEMA","primary","css","props","_objectSpread","theme","colors","transparent","elevated","secondary","Root","styled","div","withConfig","shouldForwardProp","componentId","maxHeight","responsiveSize"],"mappings":"sOAKA,IAAMA,EAAiCC,GACpCC,IAAa,CAAC,QAAS,WAAY,aAAaC,SAASD,KAG5D,IAAME,EAAYC,GAAD,yBAAAC,OACKD,EAAQE,gBACZF,uBAAAA,OAAAA,EAAQG,YAFT,wCAAAF,OAGkBD,EAAQI,YAH3C,QAMO,IAAMC,EAAe,CAC1BC,QAASC,EACJC,CAAAA,GAAAA,KAAAA,GACDT,EAAQU,EAAA,CACNP,gBAAiBM,EAAME,MAAMC,OAAO,qBACpCR,YAAaK,EAAME,MAAMC,OAAOC,YAChCR,YAAaI,EAAMK,SAAWL,EAAME,MAAMC,OAAO,oBAAsBH,EAAME,MAAMC,OAAOC,aACvFJ,EAAMR,YAGfc,UAAWP,EACNC,CAAAA,GAAAA,KAAAA,GACDT,EAAQU,EAAA,CACNP,gBAAiBM,EAAME,MAAMC,OAAO,uBACpCR,YAAaK,EAAME,MAAMC,OAAO,+BAChCP,YAAaI,EAAMK,SAAWL,EAAME,MAAMC,OAAO,oBAAsBH,EAAME,MAAMC,OAAOC,aACvFJ,EAAMR,aAKV,IAAMe,EAAOC,EAAOC,IAAIC,WAAqC,CAClEC,kBAAmBxB,IADJuB,WAAA,CAAAE,YAAA,wBAAGJ,CAGfR,CAAAA,GAAAA,IAAAA,IAAAA,KAAAA,4PASwC,iBAApBA,EAAMa,UAAyBb,EAAMa,UAA5C,GAAApB,OAA2DO,EAAMa,gBAZlE,WAeZb,GACMA,EAAMM,UAAYT,EAAaS,UAAYT,EAAaC,SAG/DgB"}
@@ -0,0 +1,2 @@
1
+ import o from'@babel/runtime/helpers/objectSpread2';import{forwardRef as r}from'react';import{Root as e,CloseButton as s}from'./style.js';import{jsxs as t,jsx as n}from'react/jsx-runtime';var a=r(((r,a)=>{var{closeButtonProps:i={},children:l,showCloseButton:c,closeFn:m}=r;return t(e,{ref:a,children:[c&&n(s,o(o({square:!0,size:"m",icon:"close"},i),{},{onClick:o=>{m&&m(),i.onClick&&i.onClick(o)}})),l]})}));export{a as MenuContainer};
2
+ //# sourceMappingURL=MenuContainer.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"MenuContainer.js","sources":["../../../../src/components/MenuContainer/MenuContainer.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport * as Styled from './style'\nimport type { MenuContainerProps } from './types'\n\n/**\n *\n * Component accepts all \\<div\\> attributes.\n *\n * Exposed \"ref\" attached to root node.\n *\n * See full [MenuContainerProps](https://github.com/foxford/ui/blob/master/src/components/MenuContainer/types.ts)\n */\nconst MenuContainer: React.ForwardRefExoticComponent<MenuContainerProps> = forwardRef<\n HTMLDivElement,\n MenuContainerProps\n>((props, ref) => {\n const { closeButtonProps = {}, children, showCloseButton, closeFn } = props\n\n return (\n <Styled.Root ref={ref}>\n {showCloseButton && (\n <Styled.CloseButton\n square\n size='m'\n icon='close'\n {...closeButtonProps}\n onClick={(evt) => {\n if (closeFn) closeFn()\n if (closeButtonProps.onClick) closeButtonProps.onClick(evt)\n }}\n />\n )}\n {children}\n </Styled.Root>\n )\n})\n\nexport { MenuContainer }\n"],"names":["MenuContainer","forwardRef","props","ref","closeButtonProps","children","showCloseButton","closeFn","_jsxs","Styled.Root","_jsx","Styled.CloseButton","_objectSpread","square","size","icon","onClick","evt"],"mappings":"4LAYMA,IAAAA,EAAqEC,GAGzE,CAACC,EAAOC,KACR,IAAMC,iBAAEA,EAAmB,GAArBC,SAAyBA,EAAzBC,gBAAmCA,EAAnCC,QAAoDA,GAAYL,EAEtE,OACEM,EAACC,EAAD,CAAaN,IAAKA,EAAlBE,SAAA,CACGC,GACCI,EAACC,EAADC,EAAAA,EAAA,CACEC,QADF,EAEEC,KAAK,IACLC,KAAK,SACDX,GAJN,GAAA,CAKEY,QAAUC,IACJV,GAASA,IACTH,EAAiBY,SAASZ,EAAiBY,QAAQC,OAI5DZ"}
@@ -0,0 +1,2 @@
1
+ import o from'styled-components';import{createShouldForwardProp as t}from'../../shared/utils/style.js';import{IconButton as i}from'../IconButton/IconButton.js';var n=t();var r=o.div.withConfig({shouldForwardProp:n}).withConfig({componentId:"fox-ui__sc-1u4llna-0"})(["box-sizing:border-box;position:relative;padding:8px;border-radius:inherit;min-width:min-content;"]);var s=o(i).withConfig({componentId:"fox-ui__sc-1u4llna-1"})(["position:absolute;top:8px;right:8px;"]);export{s as CloseButton,r as Root};
2
+ //# sourceMappingURL=style.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"style.js","sources":["../../../../src/components/MenuContainer/style.ts"],"sourcesContent":["import styled from 'styled-components'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { IconButton } from 'components/IconButton'\nimport type { StyledMenuContainerProps } from './types'\n\nconst shouldForwardMenuContainerProp = createShouldForwardProp()\n\nexport const Root = styled.div.withConfig<StyledMenuContainerProps>({\n shouldForwardProp: shouldForwardMenuContainerProp,\n})`\n box-sizing: border-box;\n position: relative;\n padding: 8px;\n border-radius: inherit;\n min-width: min-content;\n`\n\nexport const CloseButton = styled(IconButton)`\n position: absolute;\n top: 8px;\n right: 8px;\n`\n"],"names":["shouldForwardMenuContainerProp","createShouldForwardProp","Root","styled","div","withConfig","shouldForwardProp","componentId","CloseButton","IconButton"],"mappings":"gKAKA,IAAMA,EAAiCC,IAEhC,IAAMC,EAAOC,EAAOC,IAAIC,WAAqC,CAClEC,kBAAmBN,IADJK,WAAA,CAAAE,YAAA,wBAAGJ,CAAb,CAAA,yGAUMK,EAAcL,EAAOM,GAAVJ,WAAA,CAAAE,YAAA,wBAAGJ,CAApB,CAAA"}
@@ -0,0 +1,2 @@
1
+ import e from'@babel/runtime/helpers/objectSpread2';import r from'@babel/runtime/helpers/objectWithoutProperties';import{forwardRef as t}from'react';import{useMergedPalette as o}from'../../hooks/useMergedPalette.js';import{Text as a}from'../Text/Text.js';import{Root as s,HorizontalLine as i}from'./style.js';import{jsxs as m,jsx as p}from'react/jsx-runtime';var l=["textProps","children","text"];var n=t(((t,n)=>{var{textProps:x={},children:c,text:d}=t,f=r(t,l);var h=o(f);return m(s,e(e({},f),{},{palette:h,ref:n,children:[(c||d)&&p(a,e(e({appearance:"body",size:"xs",color:"inherit",marginTop:8,marginBottom:4},x),{},{children:null!=c?c:d})),p(i,{})]}))}));export{n as MenuDivider};
2
+ //# sourceMappingURL=MenuDivider.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"MenuDivider.js","sources":["../../../../src/components/MenuDivider/MenuDivider.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { useMergedPalette } from 'hooks/useMergedPalette'\nimport { Text } from 'components/Text'\nimport * as Styled from './style'\nimport type { MenuDividerProps } from './types'\n\n/**\n *\n * Component accepts all \\<div\\> attributes.\n *\n * Exposed \"ref\" attached to root node.\n *\n * See full [MenuDividerProps](https://github.com/foxford/ui/blob/master/src/components/MenuDivider/types.ts)\n */\nconst MenuDivider: React.ForwardRefExoticComponent<MenuDividerProps> = forwardRef<HTMLDivElement, MenuDividerProps>(\n (props, ref) => {\n const { textProps = {}, children, text, ...restProps } = props\n\n const palette = useMergedPalette(restProps)\n\n return (\n <Styled.Root {...restProps} palette={palette} ref={ref}>\n {(children || text) && (\n <Text appearance='body' size='xs' color='inherit' marginTop={8} marginBottom={4} {...textProps}>\n {children ?? text}\n </Text>\n )}\n <Styled.HorizontalLine />\n </Styled.Root>\n )\n }\n)\n\nexport { MenuDivider }\n"],"names":["MenuDivider","forwardRef","props","ref","textProps","children","text","restProps","_excluded","palette","useMergedPalette","_jsxs","Styled.Root","_jsx","Text","_objectSpread","appearance","size","color","marginTop","marginBottom","Styled.HorizontalLine"],"mappings":"6YAcMA,IAAAA,EAAiEC,GACrE,CAACC,EAAOC,KACN,IAAMC,UAAEA,EAAY,GAAdC,SAAkBA,EAAlBC,KAA4BA,GAAuBJ,EAAdK,IAAcL,EAAzDM,GAEA,IAAMC,EAAUC,EAAiBH,GAEjC,OACEI,EAACC,SAAgBL,GAAjB,GAAA,CAA4BE,QAASA,EAASN,IAAKA,EAAnDE,SAAA,EACIA,GAAYC,IACZO,EAACC,EAADC,EAAAA,EAAA,CAAMC,WAAW,OAAOC,KAAK,KAAKC,MAAM,UAAUC,UAAW,EAAGC,aAAc,GAAOhB,GAArF,GAAA,CAAAC,SACGA,MAAAA,EAAAA,EAAYC,KAGjBO,EAACQ,EANH"}
@@ -0,0 +1,2 @@
1
+ import o from'@babel/runtime/helpers/objectSpread2';import r from'styled-components';import{createShouldForwardProp as n}from'../../shared/utils/style.js';var t=n();var e=r.div.withConfig({componentId:"fox-ui__sc-cur5va-0"})(["box-sizing:border-box;height:1px;"]);var i=r.div.withConfig({shouldForwardProp:t}).withConfig({componentId:"fox-ui__sc-cur5va-1"})(["box-sizing:border-box;width:100%;min-width:min-content;padding:4px 16px;",""],(r=>{return n=o({color:r.theme.colors['content-onmain-tertiary'],lineColor:r.theme.colors['border-onmain-default-large']},r.palette),"\n color: ".concat(n.color,";\n\n & > ").concat(e," {\n background-color: ").concat(n.lineColor,";\n }\n");var n}));export{e as HorizontalLine,i as Root};
2
+ //# sourceMappingURL=style.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"style.js","sources":["../../../../src/components/MenuDivider/style.ts"],"sourcesContent":["import styled from 'styled-components'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport type { StyledMenuDividerProps, MenuDividerPalette } from './types'\n\nconst shouldForwardMenuDividerProp = createShouldForwardProp()\n\nexport const HorizontalLine = styled.div`\n box-sizing: border-box;\n height: 1px;\n`\n\nconst template = (palette: MenuDividerPalette) => `\n color: ${palette.color};\n\n & > ${HorizontalLine} {\n background-color: ${palette.lineColor};\n }\n`\n\nexport const Root = styled.div.withConfig<StyledMenuDividerProps>({\n shouldForwardProp: shouldForwardMenuDividerProp,\n})`\n box-sizing: border-box;\n width: 100%;\n min-width: min-content;\n padding: 4px 16px;\n\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-tertiary'],\n lineColor: props.theme.colors['border-onmain-default-large'],\n ...props.palette,\n })}\n`\n"],"names":["shouldForwardMenuDividerProp","createShouldForwardProp","HorizontalLine","styled","div","withConfig","componentId","Root","shouldForwardProp","props","template","palette","_objectSpread","color","theme","colors","lineColor","concat"],"mappings":"2JAIA,IAAMA,EAA+BC,IAExBC,IAAAA,EAAiBC,EAAOC,IAAVC,WAAA,CAAAC,YAAA,uBAAGH,CAAvB,CAAA,sCAaA,IAAMI,EAAOJ,EAAOC,IAAIC,WAAmC,CAChEG,kBAAmBR,IADJK,WAAA,CAAAC,YAAA,uBAAGH,CAQfM,CAAAA,2EAAAA,KAAAA,IACDC,OAjBcC,EAiBNC,EAAA,CACNC,MAAOJ,EAAMK,MAAMC,OAAO,2BAC1BC,UAAWP,EAAMK,MAAMC,OAAO,gCAC3BN,EAAME,SApBE,cAAAM,OACNN,EAAQE,MADF,eAAAI,OAGTf,EAHS,8BAAAe,OAION,EAAQK,UAJhC,YAAkBL,IAAAA"}
@@ -0,0 +1,2 @@
1
+ import e from'@babel/runtime/helpers/objectSpread2';import r from'@babel/runtime/helpers/objectWithoutProperties';import{forwardRef as s,useRef as i,useImperativeHandle as t,isValidElement as o,Fragment as n,Children as a,cloneElement as l}from'react';import{useKeyboardListener as p}from'../../hooks/useKeyboardListener.js';import{focusFirstFocusable as c}from'../../shared/utils/dom.js';import{Root as z}from'./style.js';import{jsx as m}from'react/jsx-runtime';var d=["role","gap","size","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","sizeUnits","sizes"];var u=['ArrowUp','ArrowDown'];var f=s(((s,f)=>{var{role:h="list",gap:v=4,size:b,sizeXXS:X,sizeXS:L,sizeS:S,sizeM:j,sizeL:y,sizeXL:w,sizeUnits:g,sizes:M}=s,U=r(s,d);var k=i(null);t(f,(()=>k.current)),p('keydown',u,(e=>{if(k.current){var r=[...k.current.children];var s=r.findIndex((e=>e.contains(document.activeElement)));if(-1!==s)for(e.preventDefault();s>=0&&s<r.length;){var i=r[s='ArrowUp'===e.key?--s:++s];if(i instanceof HTMLElement&&c(i))break}}}));var x={size:b,sizeXXS:X,sizeXS:L,sizeS:S,sizeM:j,sizeL:y,sizeXL:w,sizeUnits:g,sizes:M};var E=o(U.children)&&U.children.type===n&&'object'==typeof U.children.props&&null!==U.children.props?U.children.props.children:U.children;return m(z,e(e({},U),{},{role:h,gap:v,ref:k,children:a.map(E,((r,s)=>{if(o(r)){var i='object'==typeof r.props&&null!==r.props?r.props:{};return m("li",{children:l(r,e(e({},x),i))},s)}return m("li",{children:r},s)}))}))}));export{f as MenuList};
2
+ //# sourceMappingURL=MenuList.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"MenuList.js","sources":["../../../../src/components/MenuList/MenuList.tsx"],"sourcesContent":["import { forwardRef, useRef, useImperativeHandle, Children, isValidElement, cloneElement, Fragment } from 'react'\nimport { useKeyboardListener } from 'hooks/useKeyboardListener'\nimport { focusFirstFocusable } from 'shared/utils/dom'\nimport type { MenuListProps } from './types'\nimport * as Styled from './style'\n\nconst ARROW_KEYS = ['ArrowUp', 'ArrowDown']\n\n/**\n *\n * Component accepts all \\<ul\\> attributes.\n *\n * Responsive \"size\" props are forwarded to children elements.\n *\n * Exposed \"ref\" attached to root node.\n *\n * See full [MenuListProps](https://github.com/foxford/ui/blob/master/src/components/MenuList/types.ts)\n */\nconst MenuList: React.ForwardRefExoticComponent<MenuListProps> = forwardRef<HTMLUListElement, MenuListProps>(\n (props, forwardedRef) => {\n const {\n role = 'list',\n gap = 4,\n size,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n sizeUnits,\n sizes,\n ...restProps\n } = props\n\n const ref = useRef<HTMLUListElement>(null)\n\n useImperativeHandle<HTMLUListElement | null, HTMLUListElement | null>(forwardedRef, () => ref.current)\n\n useKeyboardListener('keydown', ARROW_KEYS, (evt) => {\n if (!ref.current) return\n\n const menuItems = [...ref.current.children]\n\n let itemIdx = menuItems.findIndex((item) => item.contains(document.activeElement))\n\n if (itemIdx === -1) return\n\n evt.preventDefault()\n\n while (itemIdx >= 0 && itemIdx < menuItems.length) {\n itemIdx = evt.key === 'ArrowUp' ? --itemIdx : ++itemIdx\n\n const nextItem = menuItems[itemIdx]\n\n if (nextItem instanceof HTMLElement && focusFirstFocusable(nextItem)) {\n break\n }\n }\n })\n\n const sizeProps = {\n size,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n sizeUnits,\n sizes,\n }\n\n const children =\n isValidElement(restProps.children) &&\n restProps.children.type === Fragment &&\n typeof restProps.children.props === 'object' &&\n restProps.children.props !== null\n ? restProps.children.props.children\n : restProps.children\n\n return (\n <Styled.Root {...restProps} role={role} gap={gap} ref={ref}>\n {Children.map(children, (child, idx) => {\n if (isValidElement(child)) {\n const childProps = typeof child.props === 'object' && child.props !== null ? child.props : {}\n\n return <li key={idx}>{cloneElement(child, { ...sizeProps, ...childProps })}</li>\n }\n\n return <li key={idx}>{child}</li>\n })}\n </Styled.Root>\n )\n }\n)\n\nexport { MenuList }\n"],"names":["ARROW_KEYS","MenuList","forwardRef","props","forwardedRef","role","gap","size","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","sizeUnits","sizes","restProps","_excluded","ref","useRef","useImperativeHandle","current","useKeyboardListener","evt","menuItems","children","itemIdx","findIndex","item","contains","document","activeElement","preventDefault","length","nextItem","key","HTMLElement","focusFirstFocusable","sizeProps","isValidElement","type","Fragment","_jsx","Styled.Root","Children","map","child","idx","childProps","cloneElement"],"mappings":"mjBAMA,IAAMA,EAAa,CAAC,UAAW,aAYzBC,IAAAA,EAA2DC,GAC/D,CAACC,EAAOC,KACN,IAAMC,KACJA,EAAO,OADHC,IAEJA,EAAM,EAFFC,KAGJA,EAHIC,QAIJA,EAJIC,OAKJA,EALIC,MAMJA,EANIC,MAOJA,EAPIC,MAQJA,EARIC,OASJA,EATIC,UAUJA,EAVIC,MAWJA,GAEEZ,EADCa,IACDb,EAbJc,GAeA,IAAMC,EAAMC,EAAyB,MAErCC,EAAsEhB,GAAAA,IAAoBc,EAAIG,UAE9FC,EAAoB,UAAWtB,GAAauB,IAC1C,GAAKL,EAAIG,QAAT,CAEA,IAAMG,EAAY,IAAIN,EAAIG,QAAQI,UAElC,IAAIC,EAAUF,EAAUG,WAAWC,GAASA,EAAKC,SAASC,SAASC,iBAEnE,IAAiB,IAAbL,EAIJ,IAFAH,EAAIS,iBAEGN,GAAW,GAAKA,EAAUF,EAAUS,QAAQ,CAGjD,IAAMC,EAAWV,EAFjBE,EAAsB,YAAZH,EAAIY,MAAsBT,IAAYA,GAIhD,GAAIQ,aAAoBE,aAAeC,EAAoBH,GACzD,WAKN,IAAMI,EAAY,CAChB/B,KAAAA,EACAC,QAAAA,EACAC,OAAAA,EACAC,MAAAA,EACAC,MAAAA,EACAC,MAAAA,EACAC,OAAAA,EACAC,UAAAA,EACAC,MAAAA,GAGF,IAAMU,EACJc,EAAevB,EAAUS,WACzBT,EAAUS,SAASe,OAASC,GACQ,iBAA7BzB,EAAUS,SAAStB,OACG,OAA7Ba,EAAUS,SAAStB,MACfa,EAAUS,SAAStB,MAAMsB,SACzBT,EAAUS,SAEhB,OACEiB,EAACC,SAAgB3B,GAAjB,GAAA,CAA4BX,KAAMA,EAAMC,IAAKA,EAAKY,IAAKA,EAAvDO,SACGmB,EAASC,IAAIpB,GAAU,CAACqB,EAAOC,KAC9B,GAAIR,EAAeO,GAAQ,CACzB,IAAME,EAAoC,iBAAhBF,EAAM3C,OAAsC,OAAhB2C,EAAM3C,MAAiB2C,EAAM3C,MAAQ,GAE3F,OAAOuC,EAAA,KAAA,CAAAjB,SAAewB,EAAaH,EAAYR,EAAAA,EAAAA,GAAAA,GAAcU,KAA7CD,GAGlB,OAAOL,EAAA,KAAA,CAAAjB,SAAeqB,GAANC"}
@@ -0,0 +1,2 @@
1
+ import n from'styled-components';var o=n.ul.withConfig({shouldForwardProp:n=>!['showCloseButton','closeButtonProps','closeFn','gap'].includes(n)}).withConfig({componentId:"fox-ui__sc-afqmnb-0"})(["",""],(n=>"\n box-sizing: border-box;\n appearance: none;\n list-style-type: none;\n margin: 0;\n padding: 8px;\n border-radius: inherit;\n min-width: min-content;\n\n & > li:not(:last-child) {\n margin-bottom: ".concat('string'==typeof n.gap?n.gap:"".concat(n.gap,"px"),";\n } \n ")));export{o as Root};
2
+ //# sourceMappingURL=style.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"style.js","sources":["../../../../src/components/MenuList/style.ts"],"sourcesContent":["import styled from 'styled-components'\nimport type { StyledMenuListProps } from './types'\n\nexport const Root = styled.ul.withConfig<StyledMenuListProps>({\n shouldForwardProp: (propKey) => !['showCloseButton', 'closeButtonProps', 'closeFn', 'gap'].includes(propKey),\n})`\n ${(props) => `\n box-sizing: border-box;\n appearance: none;\n list-style-type: none;\n margin: 0;\n padding: 8px;\n border-radius: inherit;\n min-width: min-content;\n\n & > li:not(:last-child) {\n margin-bottom: ${typeof props.gap === 'string' ? props.gap : `${props.gap}px`};\n } \n `}\n`\n"],"names":["Root","styled","ul","withConfig","shouldForwardProp","propKey","includes","componentId","props","concat","gap"],"mappings":"iCAGO,IAAMA,EAAOC,EAAOC,GAAGC,WAAgC,CAC5DC,kBAAoBC,IAAa,CAAC,kBAAmB,mBAAoB,UAAW,OAAOC,SAASD,KADrFF,WAAA,CAAAI,YAAA,uBAAGN,CAAH,CAAA,GAAA,KAGZO,GAUkB,wOAAAC,OAAqB,iBAAdD,EAAME,IAAmBF,EAAME,IAASF,GAAAA,OAAAA,EAAME,IAArD"}
@@ -1,2 +1,2 @@
1
- import o from'@babel/runtime/helpers/objectSpread2';import t from'@babel/runtime/helpers/objectWithoutProperties';import{forwardRef as e}from'react';import{withMergedProps as r}from'../../hocs/withMergedProps.js';import{Tooltip as i}from'../Tooltip/Tooltip.js';import{PopoverComponent as n}from'../PopoverComponent/PopoverComponent.js';import{jsx as s}from'react/jsx-runtime';import{SIZES_LANDSCAPE as p,SIZES as a}from'../PopoverComponent/constants.js';var c=["size","sizes","sizeUnits","palette","orientation","loading","badge","caption","captionProps","titleProps","contentProps","controlsDirection","media","controls"];var l='Popover';var m=Object.assign(r(e(((e,r)=>{var p;var{size:a="s",sizes:l,sizeUnits:m,palette:P,orientation:d,loading:v,badge:b,caption:f,captionProps:g,titleProps:z,contentProps:j,controlsDirection:h,media:C,controls:u}=e,S=t(e,c);return s(i,o(o({},S),{},{preset:"brand",size:a,ref:r,styles:{arrow:{spread:20,length:12}},component:null!==(p=S.component)&&void 0!==p?p:s(n,{sizes:l,sizeUnits:m,palette:P,orientation:d,loading:v,badge:b,caption:f,captionProps:g,title:S.title,titleProps:z,content:S.content,contentProps:j,controlsDirection:h,media:C,controls:u})}))})),{displayName:"Popover",sizes:o=>'landscape'===o.orientation?p:a}),{Component:n});export{l as COMPONENT_NAME,m as Popover};
1
+ import o from'@babel/runtime/helpers/objectSpread2';import t from'@babel/runtime/helpers/objectWithoutProperties';import{forwardRef as e}from'react';import{mergeDeepLeft as r}from'ramda';import{withMergedProps as s}from'../../hocs/withMergedProps.js';import{Tooltip as i}from'../Tooltip/Tooltip.js';import{PopoverComponent as n}from'../PopoverComponent/PopoverComponent.js';import{jsx as p}from'react/jsx-runtime';import{SIZES_LANDSCAPE as a,SIZES as m}from'../PopoverComponent/constants.js';var l=["size","styles","sizes","sizeUnits","palette","orientation","loading","badge","caption","captionProps","titleProps","contentProps","controlsDirection","media","controls"];var c='Popover';var P=Object.assign(s(e(((e,s)=>{var{size:a="s",styles:m={},sizes:c,sizeUnits:P,palette:d,orientation:f,loading:b,badge:g,caption:v,captionProps:z,titleProps:j,contentProps:h,controlsDirection:C,media:S,controls:u}=e,D=t(e,l);return p(i,o(o({},D),{},{preset:"brand",size:a,ref:s,styles:r(m,{arrow:{spread:20,length:12}}),component:p(n,{sizes:c,sizeUnits:P,palette:d,orientation:f,loading:b,badge:g,caption:v,captionProps:z,title:D.title,titleProps:j,content:D.content,contentProps:h,controlsDirection:C,media:S,controls:u})}))})),{displayName:"Popover",sizes:o=>'landscape'===o.orientation?a:m}),{Component:n});export{c as COMPONENT_NAME,P as Popover};
2
2
  //# sourceMappingURL=Popover.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Popover.js","sources":["../../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { Tooltip } from 'components/Tooltip'\nimport { PopoverComponent, SIZES_LANDSCAPE, SIZES } from 'components/PopoverComponent'\nimport type { PopoverProps } from './types'\n\nconst COMPONENT_NAME = 'Popover'\n\n/**\n *\n * Component accepts [\"react-floater\"](https://www.npmjs.com/package/react-floater/v/0.8.2) v0.8.2 props.\n *\n * Responsive \"size\" props are supported.\n *\n * Exposed \"ref\" attached to popover component root.\n *\n * See full [PopoverProps](https://github.com/foxford/ui/blob/master/src/components/Popover/types.ts)\n */\nconst Popover: React.ForwardRefExoticComponent<PopoverProps> & { Component: typeof PopoverComponent } = Object.assign(\n withMergedProps<PopoverProps, HTMLDivElement>(\n forwardRef((props, ref) => {\n const {\n size = 's',\n sizes,\n sizeUnits,\n palette,\n orientation,\n loading,\n badge,\n caption,\n captionProps,\n titleProps,\n contentProps,\n controlsDirection,\n media,\n controls,\n ...restProps\n } = props\n\n return (\n <Tooltip\n {...restProps}\n preset='brand'\n size={size}\n ref={ref}\n styles={{\n arrow: {\n spread: 20,\n length: 12,\n },\n }}\n component={\n restProps.component ?? (\n <PopoverComponent\n sizes={sizes}\n sizeUnits={sizeUnits}\n palette={palette}\n orientation={orientation}\n loading={loading}\n badge={badge}\n caption={caption}\n captionProps={captionProps}\n title={restProps.title}\n titleProps={titleProps}\n content={restProps.content}\n contentProps={contentProps}\n controlsDirection={controlsDirection}\n media={media}\n controls={controls}\n />\n )\n }\n />\n )\n }),\n {\n displayName: COMPONENT_NAME,\n sizes: (props) => {\n return props.orientation === 'landscape' ? SIZES_LANDSCAPE : SIZES\n },\n }\n ),\n {\n Component: PopoverComponent,\n }\n)\n\nexport { Popover }\n\nexport { COMPONENT_NAME }\n"],"names":["COMPONENT_NAME","Popover","Object","assign","withMergedProps","forwardRef","props","ref","_restProps$component","size","sizes","sizeUnits","palette","orientation","loading","badge","caption","captionProps","titleProps","contentProps","controlsDirection","media","controls","restProps","_excluded","_jsx","Tooltip","_objectSpread","preset","styles","arrow","spread","length","component","PopoverComponent","title","content","displayName","SIZES_LANDSCAPE","SIZES","Component"],"mappings":"+mBAMMA,IAAAA,EAAiB,UAYvB,IAAMC,EAAkGC,OAAOC,OAC7GC,EACEC,IAAYC,EAAOC,KAAQ,IAAAC,EACzB,IAAMC,KACJA,EAAO,IADHC,MAEJA,EAFIC,UAGJA,EAHIC,QAIJA,EAJIC,YAKJA,EALIC,QAMJA,EANIC,MAOJA,EAPIC,QAQJA,EARIC,aASJA,EATIC,WAUJA,EAVIC,aAWJA,EAXIC,kBAYJA,EAZIC,MAaJA,EAbIC,SAcJA,GAEEhB,EADCiB,IACDjB,EAhBJkB,GAkBA,OACEC,EAACC,EAADC,EAAAA,EAAA,GACMJ,GADN,GAAA,CAEEK,OAAO,QACPnB,KAAMA,EACNF,IAAKA,EACLsB,OAAQ,CACNC,MAAO,CACLC,OAAQ,GACRC,OAAQ,KAGZC,UAAS,UACPV,EAAUU,iBAAAA,IADHzB,EAAAA,EAELiB,EAACS,EAAD,CACExB,MAAOA,EACPC,UAAWA,EACXC,QAASA,EACTC,YAAaA,EACbC,QAASA,EACTC,MAAOA,EACPC,QAASA,EACTC,aAAcA,EACdkB,MAAOZ,EAAUY,MACjBjB,WAAYA,EACZkB,QAASb,EAAUa,QACnBjB,aAAcA,EACdC,kBAAmBA,EACnBC,MAAOA,EACPC,SAAUA,UAOtB,CACEe,YAtEiB,UAuEjB3B,MAAQJ,GACuB,cAAtBA,EAAMO,YAA8ByB,EAAkBC,IAInE,CACEC,UAAWN"}
1
+ {"version":3,"file":"Popover.js","sources":["../../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { mergeDeepLeft } from 'ramda'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { Tooltip } from 'components/Tooltip'\nimport { PopoverComponent, SIZES_LANDSCAPE, SIZES } from 'components/PopoverComponent'\nimport type { PopoverProps } from './types'\n\nconst COMPONENT_NAME = 'Popover'\n\n/**\n *\n * Component accepts [\"react-floater\"](https://www.npmjs.com/package/react-floater/v/0.8.2) v0.8.2 props.\n *\n * Responsive \"size\" props are supported.\n *\n * Exposed \"ref\" attached to popover component root.\n *\n * See full [PopoverProps](https://github.com/foxford/ui/blob/master/src/components/Popover/types.ts)\n */\nconst Popover: React.ForwardRefExoticComponent<PopoverProps> & { Component: typeof PopoverComponent } = Object.assign(\n withMergedProps<PopoverProps, HTMLDivElement>(\n forwardRef((props, ref) => {\n const {\n size = 's',\n styles = {},\n sizes,\n sizeUnits,\n palette,\n orientation,\n loading,\n badge,\n caption,\n captionProps,\n titleProps,\n contentProps,\n controlsDirection,\n media,\n controls,\n ...restProps\n } = props\n\n return (\n <Tooltip\n {...restProps}\n preset='brand'\n size={size}\n ref={ref}\n styles={mergeDeepLeft(styles, {\n arrow: {\n spread: 20,\n length: 12,\n },\n })}\n component={\n <PopoverComponent\n sizes={sizes}\n sizeUnits={sizeUnits}\n palette={palette}\n orientation={orientation}\n loading={loading}\n badge={badge}\n caption={caption}\n captionProps={captionProps}\n title={restProps.title}\n titleProps={titleProps}\n content={restProps.content}\n contentProps={contentProps}\n controlsDirection={controlsDirection}\n media={media}\n controls={controls}\n />\n }\n />\n )\n }),\n {\n displayName: COMPONENT_NAME,\n sizes: (props) => {\n return props.orientation === 'landscape' ? SIZES_LANDSCAPE : SIZES\n },\n }\n ),\n {\n Component: PopoverComponent,\n }\n)\n\nexport { Popover }\n\nexport { COMPONENT_NAME }\n"],"names":["COMPONENT_NAME","Popover","Object","assign","withMergedProps","forwardRef","props","ref","size","styles","sizes","sizeUnits","palette","orientation","loading","badge","caption","captionProps","titleProps","contentProps","controlsDirection","media","controls","restProps","_excluded","_jsx","Tooltip","_objectSpread","preset","mergeDeepLeft","arrow","spread","length","component","PopoverComponent","title","content","displayName","SIZES_LANDSCAPE","SIZES","Component"],"mappings":"8pBAOMA,IAAAA,EAAiB,UAYvB,IAAMC,EAAkGC,OAAOC,OAC7GC,EACEC,GAAW,CAACC,EAAOC,KACjB,IAAMC,KACJA,EAAO,IADHC,OAEJA,EAAS,GAFLC,MAGJA,EAHIC,UAIJA,EAJIC,QAKJA,EALIC,YAMJA,EANIC,QAOJA,EAPIC,MAQJA,EARIC,QASJA,EATIC,aAUJA,EAVIC,WAWJA,EAXIC,aAYJA,EAZIC,kBAaJA,EAbIC,MAcJA,EAdIC,SAeJA,GAEEhB,EADCiB,IACDjB,EAjBJkB,GAmBA,OACEC,EAACC,EAADC,EAAAA,EAAA,GACMJ,GADN,GAAA,CAEEK,OAAO,QACPpB,KAAMA,EACND,IAAKA,EACLE,OAAQoB,EAAcpB,EAAQ,CAC5BqB,MAAO,CACLC,OAAQ,GACRC,OAAQ,MAGZC,UACER,EAACS,EAAD,CACExB,MAAOA,EACPC,UAAWA,EACXC,QAASA,EACTC,YAAaA,EACbC,QAASA,EACTC,MAAOA,EACPC,QAASA,EACTC,aAAcA,EACdkB,MAAOZ,EAAUY,MACjBjB,WAAYA,EACZkB,QAASb,EAAUa,QACnBjB,aAAcA,EACdC,kBAAmBA,EACnBC,MAAOA,EACPC,SAAUA,UAMpB,CACEe,YArEiB,UAsEjB3B,MAAQJ,GACuB,cAAtBA,EAAMO,YAA8ByB,EAAkBC,IAInE,CACEC,UAAWN"}
package/dts/index.d.ts CHANGED
@@ -2080,12 +2080,6 @@ interface PopoverProps extends ResponsiveSizeProps, React.RefAttributes<HTMLDivE
2080
2080
  black?: boolean;
2081
2081
  /** @ignore */
2082
2082
  contrast?: boolean;
2083
- /** @ignore */
2084
- component?: React.ReactElement | ((props: Pick<PopoverProps, 'size' | 'sizeXXS' | 'sizeXS' | 'sizeS' | 'sizeM' | 'sizeL' | 'sizeXL' | 'black' | 'contrast' | 'showCloseButton' | 'closeButtonProps'> & {
2085
- id?: string;
2086
- role?: string;
2087
- closeFn?: () => void;
2088
- }) => React.ReactElement);
2089
2083
  }
2090
2084
 
2091
2085
  /**
@@ -2367,6 +2361,177 @@ interface ChipProps extends ResponsiveSizeProps, ResponsiveMarginProps, React.Re
2367
2361
  */
2368
2362
  declare const Chip: React.ForwardRefExoticComponent<ChipProps>;
2369
2363
 
2364
+ declare type MenuComponentPalette = {
2365
+ backgroundColor: CSSColor;
2366
+ borderColor: CSSColor;
2367
+ shadowColor: CSSColor;
2368
+ };
2369
+ interface MenuComponentProps extends ResponsiveSizeProps, Omit<React.ComponentPropsWithRef<'div'>, 'children'> {
2370
+ /** Custom colors */
2371
+ palette?: Partial<Record<keyof MenuComponentPalette, Color>>;
2372
+ /** Appearance variant */
2373
+ primary?: boolean;
2374
+ /** Appearance variant */
2375
+ secondary?: boolean;
2376
+ /** Apply drop shadow filter */
2377
+ elevated?: boolean;
2378
+ /** Value change will set focus on first focusable descendent */
2379
+ autoFocus?: unknown;
2380
+ /** Disable autoFocus behavior (usage discourage, unless you manage focus by yourself) */
2381
+ disableAutoFocus?: boolean;
2382
+ /** Root max-height */
2383
+ maxHeight?: string | number;
2384
+ /** Callback to call on unmount (can be used to restore focus on trigger component) */
2385
+ onUnmount?: () => void;
2386
+ /** Render menu view (Menu.List, Menu.Container, or custom component) */
2387
+ children: React.ReactElement | ((props: Pick<MenuComponentProps, 'size' | 'sizeXXS' | 'sizeXS' | 'sizeS' | 'sizeM' | 'sizeL' | 'sizeXL' | 'showCloseButton' | 'closeButtonProps'> & {
2388
+ closeFn: () => void;
2389
+ }) => React.ReactElement);
2390
+ /** Show button to close menu (forward to children) */
2391
+ showCloseButton?: boolean;
2392
+ /** Props for close button (forward to children) */
2393
+ closeButtonProps?: IconButtonProps;
2394
+ /** @ignore Internal callback */
2395
+ closeFn?: () => void;
2396
+ }
2397
+
2398
+ /**
2399
+ *
2400
+ * Component accepts all \<div\> attributes.
2401
+ *
2402
+ * Responsive "size" props are supported.
2403
+ *
2404
+ * Exposed "ref" attached to root node.
2405
+ *
2406
+ * See full [MenuComponentProps](https://github.com/foxford/ui/blob/master/src/components/MenuComponent/types.ts)
2407
+ */
2408
+ declare const MenuComponent: React.ForwardRefExoticComponent<MenuComponentProps>;
2409
+
2410
+ interface MenuListProps extends ResponsiveSizeProps, React.ComponentPropsWithRef<'ul'> {
2411
+ /** Menu items (React elements receive "size" props) */
2412
+ children: React.ReactNode;
2413
+ /** Space between list items */
2414
+ gap?: string | number;
2415
+ }
2416
+
2417
+ /**
2418
+ *
2419
+ * Component accepts all \<ul\> attributes.
2420
+ *
2421
+ * Responsive "size" props are forwarded to children elements.
2422
+ *
2423
+ * Exposed "ref" attached to root node.
2424
+ *
2425
+ * See full [MenuListProps](https://github.com/foxford/ui/blob/master/src/components/MenuList/types.ts)
2426
+ */
2427
+ declare const MenuList: React.ForwardRefExoticComponent<MenuListProps>;
2428
+
2429
+ interface MenuContainerProps extends React.ComponentPropsWithRef<'div'> {
2430
+ /** Show button with 'close' icon */
2431
+ showCloseButton?: boolean;
2432
+ /** Props for close button */
2433
+ closeButtonProps?: IconButtonProps;
2434
+ /** @ignore Internal callback */
2435
+ closeFn?: () => void;
2436
+ }
2437
+
2438
+ /**
2439
+ *
2440
+ * Component accepts all \<div\> attributes.
2441
+ *
2442
+ * Exposed "ref" attached to root node.
2443
+ *
2444
+ * See full [MenuContainerProps](https://github.com/foxford/ui/blob/master/src/components/MenuContainer/types.ts)
2445
+ */
2446
+ declare const MenuContainer: React.ForwardRefExoticComponent<MenuContainerProps>;
2447
+
2448
+ declare type MenuDividerPalette = {
2449
+ color: CSSColor;
2450
+ lineColor: CSSColor;
2451
+ };
2452
+ interface MenuDividerProps extends React.ComponentPropsWithRef<'div'> {
2453
+ /** Custom colors */
2454
+ palette?: Partial<Record<keyof MenuDividerPalette, Color>>;
2455
+ /** Text content */
2456
+ children?: React.ReactNode;
2457
+ /** Text content (alternative to children) */
2458
+ text?: React.ReactNode;
2459
+ /** Props for text component */
2460
+ textProps?: TextProps;
2461
+ }
2462
+
2463
+ /**
2464
+ *
2465
+ * Component accepts all \<div\> attributes.
2466
+ *
2467
+ * Exposed "ref" attached to root node.
2468
+ *
2469
+ * See full [MenuDividerProps](https://github.com/foxford/ui/blob/master/src/components/MenuDivider/types.ts)
2470
+ */
2471
+ declare const MenuDivider: React.ForwardRefExoticComponent<MenuDividerProps>;
2472
+
2473
+ interface MenuProps extends ResponsiveSizeProps, React.RefAttributes<HTMLDivElement> {
2474
+ /** Open automatically */
2475
+ autoOpen?: boolean;
2476
+ /** It will be called on state change */
2477
+ callback?: (action: 'open' | 'close', props: Props) => void;
2478
+ /** Menu trigger and its target */
2479
+ children?: React.ReactNode;
2480
+ /** Debugging logs in console */
2481
+ debug?: boolean;
2482
+ /** Don't adjust menu on scroll / resize (default true) */
2483
+ disableFlip?: boolean;
2484
+ /** Callback to get popper.js instance */
2485
+ getPopper?: (popper: PopperInstance, origin: 'floater' | 'wrapper') => void;
2486
+ /** Distance in px between menu and its target (default 8px) */
2487
+ offset?: number;
2488
+ /** Switch between normal and controlled modes. It will disable built in menu behavior */
2489
+ open?: boolean;
2490
+ /** Menu position relative to its target (default bottom-start) */
2491
+ placement?: PlacementOptions;
2492
+ /** CSS selector or element to render menus */
2493
+ portalElement?: SelectorOrElement;
2494
+ /** Custom styles */
2495
+ styles?: Partial<Styles>;
2496
+ /** Render menu view (Menu.List, Menu.Container, or custom component) */
2497
+ render: React.ReactElement | ((props: Pick<MenuProps, 'size' | 'sizeXXS' | 'sizeXS' | 'sizeS' | 'sizeM' | 'sizeL' | 'sizeXL' | 'showCloseButton' | 'closeButtonProps'> & {
2498
+ closeFn: () => void;
2499
+ }) => React.ReactElement);
2500
+ /** Appearance variant */
2501
+ primary?: boolean;
2502
+ /** Appearance variant */
2503
+ secondary?: boolean;
2504
+ /** Custom colors */
2505
+ palette?: Partial<Record<keyof MenuComponentPalette, Color>>;
2506
+ /** Value change will set focus on first focusable descendent */
2507
+ autoFocus?: unknown;
2508
+ /** Disable autoFocus behavior (usage discourage, unless you manage focus by yourself) */
2509
+ disableAutoFocus?: boolean;
2510
+ /** Show button to close menu (applicable for Menu.Container, or custom component) */
2511
+ showCloseButton?: boolean;
2512
+ /** Props for close button */
2513
+ closeButtonProps?: IconButtonProps;
2514
+ /** Menu component max-height */
2515
+ maxHeight?: string | number;
2516
+ }
2517
+
2518
+ /**
2519
+ *
2520
+ * Component accepts ["react-floater"](https://www.npmjs.com/package/react-floater/v/0.8.2) v0.8.2 props.
2521
+ *
2522
+ * Responsive "size" props are supported.
2523
+ *
2524
+ * Exposed "ref" attached to menu component root.
2525
+ *
2526
+ * See full [MenuProps](https://github.com/foxford/ui/blob/master/src/components/Menu/types.ts)
2527
+ */
2528
+ declare const Menu: React.ForwardRefExoticComponent<MenuProps> & {
2529
+ Component: typeof MenuComponent;
2530
+ List: typeof MenuList;
2531
+ Container: typeof MenuContainer;
2532
+ Divider: typeof MenuDivider;
2533
+ };
2534
+
2370
2535
  interface Theme {
2371
2536
  breakpoints: Readonly<Record<Lowercase<Breakpoint>, number>>;
2372
2537
  colors: Record<keyof typeof ColorNames, CSSColor>;
@@ -2410,6 +2575,8 @@ interface Theme {
2410
2575
  Textarea?: TextareaProps;
2411
2576
  Tooltip?: TooltipProps;
2412
2577
  TooltipComponent?: TooltipComponentProps;
2578
+ Menu?: MenuProps;
2579
+ MenuComponentProps?: MenuComponentProps;
2413
2580
  };
2414
2581
  }
2415
2582
 
@@ -3998,4 +4165,4 @@ interface FormLabelProps extends ResponsiveSizeProps, ResponsiveMarginProps, Rea
3998
4165
  */
3999
4166
  declare const FormLabel: React.ForwardRefExoticComponent<FormLabelProps>;
4000
4167
 
4001
- export { ActionBtn, Alert, Amount, Anchor, Arrow, ArrowBadge, Avatar, Badge, BaseProps, Breakpoint, Button, COUNTRY_DATA, CSSBorderStyle, CSSColor, CSSFontWeight, CSSGlobalValue, CSSUnit, CSSVerticalAlign, CURRENCY_MAP, Checkbox, Chip, Color, ColorNames, ColorPaletteKey, Container, ContextMenu, CurrencyCodes, DEFAULT_MASK, FormLabel, HEX, INITIAL_MASK, Icon, IconButton, Indicator, Input, ListItem, Modal, Nullable, Paper, Popover, Progress, RGB, RGBA, Radio, withThemeScrollable as Scrollable, Section, Select, Separator, Size, Sizes, Skeleton, Spacer, Spinner, Switcher, Tab, Tabs, Tag, Text, Textarea, Theme, ThemeMode, ThemeName, ThemePreset, ThemeProvider, Tooltip, adultDarkTheme, adultLightTheme, babyDarkTheme, babyLightTheme, baseInputStyle, buildMediaQuery, color, defaultIcons, desktopFirst, hexToRgbA, isHex, mobileFirst, motherDarkTheme, motherLightTheme, property, responsiveNamedProperty, responsiveProperty, screenL, screenM, screenMaxL, screenMaxM, screenMaxS, screenMaxXl, screenMaxXs, screenMaxXxs, screenMinL, screenMinM, screenMinS, screenMinXl, screenMinXs, screenRetina, screenS, screenXl, screenXs, teenDarkTheme, teenLightTheme, defaultTheme as theme, vAlign };
4168
+ export { ActionBtn, Alert, Amount, Anchor, Arrow, ArrowBadge, Avatar, Badge, BaseProps, Breakpoint, Button, COUNTRY_DATA, CSSBorderStyle, CSSColor, CSSFontWeight, CSSGlobalValue, CSSUnit, CSSVerticalAlign, CURRENCY_MAP, Checkbox, Chip, Color, ColorNames, ColorPaletteKey, Container, ContextMenu, CurrencyCodes, DEFAULT_MASK, FormLabel, HEX, INITIAL_MASK, Icon, IconButton, Indicator, Input, ListItem, Menu, Modal, Nullable, Paper, Popover, Progress, RGB, RGBA, Radio, withThemeScrollable as Scrollable, Section, Select, Separator, Size, Sizes, Skeleton, Spacer, Spinner, Switcher, Tab, Tabs, Tag, Text, Textarea, Theme, ThemeMode, ThemeName, ThemePreset, ThemeProvider, Tooltip, adultDarkTheme, adultLightTheme, babyDarkTheme, babyLightTheme, baseInputStyle, buildMediaQuery, color, defaultIcons, desktopFirst, hexToRgbA, isHex, mobileFirst, motherDarkTheme, motherLightTheme, property, responsiveNamedProperty, responsiveProperty, screenL, screenM, screenMaxL, screenMaxM, screenMaxS, screenMaxXl, screenMaxXs, screenMaxXxs, screenMinL, screenMinM, screenMinS, screenMinXl, screenMinXs, screenRetina, screenS, screenXl, screenXs, teenDarkTheme, teenLightTheme, defaultTheme as theme, vAlign };