@fluentui/react-popover 9.14.2 → 9.14.4
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/CHANGELOG.md +47 -11
- package/dist/index.d.ts +1 -1
- package/lib/Popover.js +1 -1
- package/lib/Popover.js.map +1 -1
- package/lib/PopoverSurface.js +1 -1
- package/lib/PopoverSurface.js.map +1 -1
- package/lib/components/Popover/Popover.types.js.map +1 -1
- package/lib/components/Popover/index.js +1 -1
- package/lib/components/Popover/index.js.map +1 -1
- package/lib/components/Popover/usePopover.js +58 -44
- package/lib/components/Popover/usePopover.js.map +1 -1
- package/lib/components/PopoverSurface/PopoverSurface.types.js +3 -1
- package/lib/components/PopoverSurface/PopoverSurface.types.js.map +1 -1
- package/lib/components/PopoverSurface/index.js +1 -1
- package/lib/components/PopoverSurface/index.js.map +1 -1
- package/lib/components/PopoverSurface/usePopoverSurface.js +12 -21
- package/lib/components/PopoverSurface/usePopoverSurface.js.map +1 -1
- package/lib/components/PopoverSurface/usePopoverSurfaceStyles.styles.js +2 -2
- package/lib/components/PopoverSurface/usePopoverSurfaceStyles.styles.js.map +1 -1
- package/lib/components/PopoverSurface/usePopoverSurfaceStyles.styles.raw.js +2 -1
- package/lib/components/PopoverSurface/usePopoverSurfaceStyles.styles.raw.js.map +1 -1
- package/lib/index.js +0 -5
- package/lib/index.js.map +1 -1
- package/lib-commonjs/Popover.js +0 -3
- package/lib-commonjs/Popover.js.map +1 -1
- package/lib-commonjs/PopoverSurface.js +0 -3
- package/lib-commonjs/PopoverSurface.js.map +1 -1
- package/lib-commonjs/components/Popover/Popover.types.js.map +1 -1
- package/lib-commonjs/components/Popover/index.js +0 -3
- package/lib-commonjs/components/Popover/index.js.map +1 -1
- package/lib-commonjs/components/Popover/usePopover.js +61 -48
- package/lib-commonjs/components/Popover/usePopover.js.map +1 -1
- package/lib-commonjs/components/PopoverSurface/PopoverSurface.types.js +3 -1
- package/lib-commonjs/components/PopoverSurface/PopoverSurface.types.js.map +1 -1
- package/lib-commonjs/components/PopoverSurface/index.js +0 -3
- package/lib-commonjs/components/PopoverSurface/index.js.map +1 -1
- package/lib-commonjs/components/PopoverSurface/usePopoverSurface.js +14 -25
- package/lib-commonjs/components/PopoverSurface/usePopoverSurface.js.map +1 -1
- package/lib-commonjs/components/PopoverSurface/usePopoverSurfaceStyles.styles.js +2 -1
- package/lib-commonjs/components/PopoverSurface/usePopoverSurfaceStyles.styles.js.map +1 -1
- package/lib-commonjs/components/PopoverSurface/usePopoverSurfaceStyles.styles.raw.js +2 -1
- package/lib-commonjs/components/PopoverSurface/usePopoverSurfaceStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/index.js +0 -5
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +10 -10
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/PopoverSurface/usePopoverSurface.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useModalAttributes } from '@fluentui/react-tabster';\nimport { usePopoverContext_unstable } from '../../popoverContext';\nimport type {
|
|
1
|
+
{"version":3,"sources":["../src/components/PopoverSurface/usePopoverSurface.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { getIntrinsicElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useModalAttributes } from '@fluentui/react-tabster';\nimport { usePopoverContext_unstable } from '../../popoverContext';\nimport type { PopoverSurfaceProps, PopoverSurfaceState } from './PopoverSurface.types';\nimport { useMotionForwardedRef } from '@fluentui/react-motion';\n\n/**\n * Create the state required to render PopoverSurface.\n *\n * The returned state can be modified with hooks such as usePopoverSurfaceStyles_unstable,\n * before being passed to renderPopoverSurface_unstable.\n *\n * @param props - props from this instance of PopoverSurface\n * @param ref - reference to root HTMLDivElement of PopoverSurface\n */\nexport const usePopoverSurface_unstable = (\n props: PopoverSurfaceProps,\n ref: React.Ref<HTMLDivElement>,\n): PopoverSurfaceState => {\n const contentRef = usePopoverContext_unstable(context => context.contentRef);\n const openOnHover = usePopoverContext_unstable(context => context.openOnHover);\n const setOpen = usePopoverContext_unstable(context => context.setOpen);\n const mountNode = usePopoverContext_unstable(context => context.mountNode);\n const arrowRef = usePopoverContext_unstable(context => context.arrowRef);\n const size = usePopoverContext_unstable(context => context.size);\n const withArrow = usePopoverContext_unstable(context => context.withArrow);\n const appearance = usePopoverContext_unstable(context => context.appearance);\n const trapFocus = usePopoverContext_unstable(context => context.trapFocus);\n const inertTrapFocus = usePopoverContext_unstable(context => context.inertTrapFocus);\n const inline = usePopoverContext_unstable(context => context.inline);\n const motionForwardedRef = useMotionForwardedRef();\n const { modalAttributes } = useModalAttributes({\n trapFocus,\n legacyTrapFocus: !inertTrapFocus,\n alwaysFocusable: !trapFocus,\n });\n\n const state: PopoverSurfaceState = {\n inline,\n appearance,\n withArrow,\n size,\n arrowRef,\n mountNode,\n components: {\n root: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n // FIXME:\n // `contentRef` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: useMergedRefs(ref, contentRef, motionForwardedRef) as React.Ref<HTMLDivElement>,\n role: trapFocus ? 'dialog' : 'group',\n 'aria-modal': trapFocus ? true : undefined,\n ...modalAttributes,\n ...props,\n }),\n { elementType: 'div' },\n ),\n };\n\n const {\n onMouseEnter: onMouseEnterOriginal,\n onMouseLeave: onMouseLeaveOriginal,\n onKeyDown: onKeyDownOriginal,\n } = state.root;\n state.root.onMouseEnter = (e: React.MouseEvent<HTMLDivElement>) => {\n if (openOnHover) {\n setOpen(e, true);\n }\n\n onMouseEnterOriginal?.(e);\n };\n\n state.root.onMouseLeave = (e: React.MouseEvent<HTMLDivElement>) => {\n if (openOnHover) {\n setOpen(e, false);\n }\n\n onMouseLeaveOriginal?.(e);\n };\n\n state.root.onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n // only close if the event happened inside the current popover\n // If using a stack of inline popovers, the user should call `stopPropagation` to avoid dismissing the entire stack\n if (e.key === 'Escape' && contentRef.current?.contains(e.target as HTMLDivElement)) {\n e.preventDefault();\n setOpen(e, false);\n }\n\n onKeyDownOriginal?.(e);\n };\n\n return state;\n};\n"],"names":["getIntrinsicElementProps","useMergedRefs","slot","useModalAttributes","usePopoverContext_unstable","useMotionForwardedRef","usePopoverSurface_unstable","props","ref","contentRef","context","openOnHover","setOpen","mountNode","arrowRef","size","withArrow","appearance","trapFocus","inertTrapFocus","inline","motionForwardedRef","modalAttributes","legacyTrapFocus","alwaysFocusable","state","components","root","always","role","undefined","elementType","onMouseEnter","onMouseEnterOriginal","onMouseLeave","onMouseLeaveOriginal","onKeyDown","onKeyDownOriginal","e","key","current","contains","target","preventDefault"],"mappings":"AAAA;;;;;+BAkBaM;;;;;;gCAfiD,4BAA4B;8BACvD,0BAA0B;gCAClB,uBAAuB;6BAE5B,yBAAyB;AAWxD,mCAAmC,CACxCC,OACAC;IAEA,MAAMC,iBAAaL,0CAAAA,EAA2BM,CAAAA,UAAWA,QAAQD,UAAU;IAC3E,MAAME,kBAAcP,0CAAAA,EAA2BM,CAAAA,UAAWA,QAAQC,WAAW;IAC7E,MAAMC,cAAUR,0CAAAA,EAA2BM,CAAAA,UAAWA,QAAQE,OAAO;IACrE,MAAMC,gBAAYT,0CAAAA,EAA2BM,CAAAA,UAAWA,QAAQG,SAAS;IACzE,MAAMC,eAAWV,0CAAAA,EAA2BM,CAAAA,UAAWA,QAAQI,QAAQ;IACvE,MAAMC,WAAOX,0CAAAA,EAA2BM,CAAAA,UAAWA,QAAQK,IAAI;IAC/D,MAAMC,gBAAYZ,0CAAAA,EAA2BM,CAAAA,UAAWA,QAAQM,SAAS;IACzE,MAAMC,iBAAab,0CAAAA,EAA2BM,CAAAA,UAAWA,QAAQO,UAAU;IAC3E,MAAMC,gBAAYd,0CAAAA,EAA2BM,CAAAA,UAAWA,QAAQQ,SAAS;IACzE,MAAMC,qBAAiBf,0CAAAA,EAA2BM,CAAAA,UAAWA,QAAQS,cAAc;IACnF,MAAMC,aAAShB,0CAAAA,EAA2BM,CAAAA,UAAWA,QAAQU,MAAM;IACnE,MAAMC,yBAAqBhB,kCAAAA;IAC3B,MAAM,EAAEiB,eAAe,EAAE,OAAGnB,gCAAAA,EAAmB;QAC7Ce;QACAK,iBAAiB,CAACJ;QAClBK,iBAAiB,CAACN;IACpB;IAEA,MAAMO,QAA6B;QACjCL;QACAH;QACAD;QACAD;QACAD;QACAD;QACAa,YAAY;YACVC,MAAM;QACR;QACAA,MAAMzB,oBAAAA,CAAK0B,MAAM,KACf5B,wCAAAA,EAAyB,OAAO;YAC9B,SAAS;YACT,mFAAmF;YACnF,4FAA4F;YAC5FQ,SAAKP,6BAAAA,EAAcO,KAAKC,YAAYY;YACpCQ,MAAMX,YAAY,WAAW;YAC7B,cAAcA,YAAY,OAAOY;YACjC,GAAGR,eAAe;YAClB,GAAGf,KAAK;QACV,IACA;YAAEwB,aAAa;QAAM;IAEzB;IAEA,MAAM,EACJC,cAAcC,oBAAoB,EAClCC,cAAcC,oBAAoB,EAClCC,WAAWC,iBAAiB,EAC7B,GAAGZ,MAAME,IAAI;IACdF,MAAME,IAAI,CAACK,YAAY,GAAG,CAACM;QACzB,IAAI3B,aAAa;YACfC,QAAQ0B,GAAG;QACb;QAEAL,yBAAAA,QAAAA,yBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,qBAAuBK;IACzB;IAEAb,MAAME,IAAI,CAACO,YAAY,GAAG,CAACI;QACzB,IAAI3B,aAAa;YACfC,QAAQ0B,GAAG;QACb;QAEAH,yBAAAA,QAAAA,yBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,qBAAuBG;IACzB;IAEAb,MAAME,IAAI,CAACS,SAAS,GAAG,CAACE;YAGI7B;QAF1B,8DAA8D;QAC9D,mHAAmH;QACnH,IAAI6B,EAAEC,GAAG,KAAK,YAAA,CAAA,CAAY9B,sBAAAA,WAAW+B,OAAO,AAAPA,MAAO,QAAlB/B,wBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,oBAAoBgC,QAAQ,CAACH,EAAEI,OAAM,GAAqB;YAClFJ,EAAEK,cAAc;YAChB/B,QAAQ0B,GAAG;QACb;QAEAD,sBAAAA,QAAAA,sBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,kBAAoBC;IACtB;IAEA,OAAOb;AACT,EAAE"}
|
|
@@ -238,9 +238,10 @@ const arrowHeights = {
|
|
|
238
238
|
]
|
|
239
239
|
});
|
|
240
240
|
const usePopoverSurfaceStyles_unstable = (state)=>{
|
|
241
|
-
'use no memo';
|
|
242
241
|
const styles = useStyles();
|
|
242
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
243
243
|
state.root.className = (0, _react.mergeClasses)(popoverSurfaceClassNames.root, styles.root, state.inline && styles.inline, state.size === 'small' && styles.smallPadding, state.size === 'medium' && styles.mediumPadding, state.size === 'large' && styles.largePadding, state.appearance === 'inverted' && styles.inverted, state.appearance === 'brand' && styles.brand, state.root.className);
|
|
244
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
244
245
|
state.arrowClassName = (0, _react.mergeClasses)(styles.arrow, state.size === 'small' ? styles.smallArrow : styles.mediumLargeArrow);
|
|
245
246
|
return state;
|
|
246
247
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["usePopoverSurfaceStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { createArrowHeightStyles, createArrowStyles } from '@fluentui/react-positioning';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const popoverSurfaceClassNames = {\n root: 'fui-PopoverSurface'\n};\nexport const arrowHeights = {\n small: 6,\n medium: 8,\n large: 8\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n color: tokens.colorNeutralForeground1,\n backgroundColor: tokens.colorNeutralBackground1,\n borderRadius: tokens.borderRadiusMedium,\n border: `1px solid ${tokens.colorTransparentStroke}`,\n ...typographyStyles.body1,\n // TODO need to add versions of tokens.alias.shadow.shadow16, etc. that work with filter\n filter: `drop-shadow(0 0 2px ${tokens.colorNeutralShadowAmbient}) ` + `drop-shadow(0 8px 16px ${tokens.colorNeutralShadowKey})`\n },\n inline: {\n // When rendering inline, the PopoverSurface will be rendered under relatively positioned elements such as Input.\n // This is due to the surface being positioned as absolute, therefore zIndex: 1 ensures that won't happen.\n zIndex: 1\n },\n inverted: {\n backgroundColor: tokens.colorNeutralBackgroundStatic,\n color: tokens.colorNeutralForegroundStaticInverted\n },\n brand: {\n backgroundColor: tokens.colorBrandBackground,\n color: tokens.colorNeutralForegroundOnBrand\n },\n smallPadding: {\n padding: '12px'\n },\n mediumPadding: {\n padding: '16px'\n },\n largePadding: {\n padding: '20px'\n },\n smallArrow: createArrowHeightStyles(arrowHeights.small),\n mediumLargeArrow: createArrowHeightStyles(arrowHeights.medium),\n arrow: createArrowStyles({\n arrowHeight: undefined\n })\n});\n/**\n * Apply styling to the PopoverSurface slots based on the state\n */ export const usePopoverSurfaceStyles_unstable = (state)=>{\n
|
|
1
|
+
{"version":3,"sources":["usePopoverSurfaceStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { createArrowHeightStyles, createArrowStyles } from '@fluentui/react-positioning';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const popoverSurfaceClassNames = {\n root: 'fui-PopoverSurface'\n};\nexport const arrowHeights = {\n small: 6,\n medium: 8,\n large: 8\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n color: tokens.colorNeutralForeground1,\n backgroundColor: tokens.colorNeutralBackground1,\n borderRadius: tokens.borderRadiusMedium,\n border: `1px solid ${tokens.colorTransparentStroke}`,\n ...typographyStyles.body1,\n // TODO need to add versions of tokens.alias.shadow.shadow16, etc. that work with filter\n filter: `drop-shadow(0 0 2px ${tokens.colorNeutralShadowAmbient}) ` + `drop-shadow(0 8px 16px ${tokens.colorNeutralShadowKey})`\n },\n inline: {\n // When rendering inline, the PopoverSurface will be rendered under relatively positioned elements such as Input.\n // This is due to the surface being positioned as absolute, therefore zIndex: 1 ensures that won't happen.\n zIndex: 1\n },\n inverted: {\n backgroundColor: tokens.colorNeutralBackgroundStatic,\n color: tokens.colorNeutralForegroundStaticInverted\n },\n brand: {\n backgroundColor: tokens.colorBrandBackground,\n color: tokens.colorNeutralForegroundOnBrand\n },\n smallPadding: {\n padding: '12px'\n },\n mediumPadding: {\n padding: '16px'\n },\n largePadding: {\n padding: '20px'\n },\n smallArrow: createArrowHeightStyles(arrowHeights.small),\n mediumLargeArrow: createArrowHeightStyles(arrowHeights.medium),\n arrow: createArrowStyles({\n arrowHeight: undefined\n })\n});\n/**\n * Apply styling to the PopoverSurface slots based on the state\n */ export const usePopoverSurfaceStyles_unstable = (state)=>{\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(popoverSurfaceClassNames.root, styles.root, state.inline && styles.inline, state.size === 'small' && styles.smallPadding, state.size === 'medium' && styles.mediumPadding, state.size === 'large' && styles.largePadding, state.appearance === 'inverted' && styles.inverted, state.appearance === 'brand' && styles.brand, state.root.className);\n // eslint-disable-next-line react-hooks/immutability\n state.arrowClassName = mergeClasses(styles.arrow, state.size === 'small' ? styles.smallArrow : styles.mediumLargeArrow);\n return state;\n};\n"],"names":["__styles","mergeClasses","createArrowHeightStyles","createArrowStyles","tokens","typographyStyles","popoverSurfaceClassNames","root","arrowHeights","small","medium","large","useStyles","sj55zd","De3pzq","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","Bhu2qc9","inline","Bj3rh1h","inverted","brand","smallPadding","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","mediumPadding","largePadding","smallArrow","rhnwrx","Bdy53xb","mediumLargeArrow","arrow","B7ck84d","qhf8xq","B2eet1l","Bz10aip","Bqenvij","a9b677","Ftih45","Br0sdwz","cmx5o7","susq4k","Biibvgv","Bicfajf","qehafq","Brs5u8j","Ccq8qp","Baz25je","Bcgcnre","Bqjgrrk","qa3bma","y0oebl","Biqmznv","Bm6vgfq","Bbv0w2i","uvfttm","eqrjj","Bk5zm6e","m598lv","B4f6apu","ydt019","Bq4z7u6","Bdkvgpv","B0qfbqy","kj8mxx","r59vdv","Bkw5xw4","hl6cv3","aea9ga","yayu3t","Bhsv975","rhl9o9","B7gxrvb","B6q6orb","B0lu1f8","d","p","usePopoverSurfaceStyles_unstable","state","styles","className","size","appearance","arrowClassName"],"mappings":"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"}
|
|
@@ -72,9 +72,10 @@ const arrowHeights = {
|
|
|
72
72
|
})
|
|
73
73
|
});
|
|
74
74
|
const usePopoverSurfaceStyles_unstable = (state)=>{
|
|
75
|
-
'use no memo';
|
|
76
75
|
const styles = useStyles();
|
|
76
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
77
77
|
state.root.className = (0, _react.mergeClasses)(popoverSurfaceClassNames.root, styles.root, state.inline && styles.inline, state.size === 'small' && styles.smallPadding, state.size === 'medium' && styles.mediumPadding, state.size === 'large' && styles.largePadding, state.appearance === 'inverted' && styles.inverted, state.appearance === 'brand' && styles.brand, state.root.className);
|
|
78
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
78
79
|
state.arrowClassName = (0, _react.mergeClasses)(styles.arrow, state.size === 'small' ? styles.smallArrow : styles.mediumLargeArrow);
|
|
79
80
|
return state;
|
|
80
81
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/PopoverSurface/usePopoverSurfaceStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { createArrowHeightStyles, createArrowStyles } from '@fluentui/react-positioning';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { PopoverSize } from '../Popover/Popover.types';\nimport type { PopoverSurfaceSlots, PopoverSurfaceState } from './PopoverSurface.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const popoverSurfaceClassNames: SlotClassNames<PopoverSurfaceSlots> = {\n root: 'fui-PopoverSurface',\n};\n\nexport const arrowHeights: Record<PopoverSize, number> = {\n small: 6,\n medium: 8,\n large: 8,\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n color: tokens.colorNeutralForeground1,\n backgroundColor: tokens.colorNeutralBackground1,\n borderRadius: tokens.borderRadiusMedium,\n border: `1px solid ${tokens.colorTransparentStroke}`,\n ...typographyStyles.body1,\n\n // TODO need to add versions of tokens.alias.shadow.shadow16, etc. that work with filter\n filter:\n `drop-shadow(0 0 2px ${tokens.colorNeutralShadowAmbient}) ` +\n `drop-shadow(0 8px 16px ${tokens.colorNeutralShadowKey})`,\n },\n\n inline: {\n // When rendering inline, the PopoverSurface will be rendered under relatively positioned elements such as Input.\n // This is due to the surface being positioned as absolute, therefore zIndex: 1 ensures that won't happen.\n zIndex: 1,\n },\n\n inverted: {\n backgroundColor: tokens.colorNeutralBackgroundStatic,\n color: tokens.colorNeutralForegroundStaticInverted,\n },\n\n brand: {\n backgroundColor: tokens.colorBrandBackground,\n color: tokens.colorNeutralForegroundOnBrand,\n },\n\n smallPadding: { padding: '12px' },\n\n mediumPadding: { padding: '16px' },\n\n largePadding: { padding: '20px' },\n\n smallArrow: createArrowHeightStyles(arrowHeights.small),\n mediumLargeArrow: createArrowHeightStyles(arrowHeights.medium),\n arrow: createArrowStyles({ arrowHeight: undefined }),\n});\n\n/**\n * Apply styling to the PopoverSurface slots based on the state\n */\nexport const usePopoverSurfaceStyles_unstable = (state: PopoverSurfaceState): PopoverSurfaceState => {\n
|
|
1
|
+
{"version":3,"sources":["../src/components/PopoverSurface/usePopoverSurfaceStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { createArrowHeightStyles, createArrowStyles } from '@fluentui/react-positioning';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { PopoverSize } from '../Popover/Popover.types';\nimport type { PopoverSurfaceSlots, PopoverSurfaceState } from './PopoverSurface.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const popoverSurfaceClassNames: SlotClassNames<PopoverSurfaceSlots> = {\n root: 'fui-PopoverSurface',\n};\n\nexport const arrowHeights: Record<PopoverSize, number> = {\n small: 6,\n medium: 8,\n large: 8,\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n color: tokens.colorNeutralForeground1,\n backgroundColor: tokens.colorNeutralBackground1,\n borderRadius: tokens.borderRadiusMedium,\n border: `1px solid ${tokens.colorTransparentStroke}`,\n ...typographyStyles.body1,\n\n // TODO need to add versions of tokens.alias.shadow.shadow16, etc. that work with filter\n filter:\n `drop-shadow(0 0 2px ${tokens.colorNeutralShadowAmbient}) ` +\n `drop-shadow(0 8px 16px ${tokens.colorNeutralShadowKey})`,\n },\n\n inline: {\n // When rendering inline, the PopoverSurface will be rendered under relatively positioned elements such as Input.\n // This is due to the surface being positioned as absolute, therefore zIndex: 1 ensures that won't happen.\n zIndex: 1,\n },\n\n inverted: {\n backgroundColor: tokens.colorNeutralBackgroundStatic,\n color: tokens.colorNeutralForegroundStaticInverted,\n },\n\n brand: {\n backgroundColor: tokens.colorBrandBackground,\n color: tokens.colorNeutralForegroundOnBrand,\n },\n\n smallPadding: { padding: '12px' },\n\n mediumPadding: { padding: '16px' },\n\n largePadding: { padding: '20px' },\n\n smallArrow: createArrowHeightStyles(arrowHeights.small),\n mediumLargeArrow: createArrowHeightStyles(arrowHeights.medium),\n arrow: createArrowStyles({ arrowHeight: undefined }),\n});\n\n/**\n * Apply styling to the PopoverSurface slots based on the state\n */\nexport const usePopoverSurfaceStyles_unstable = (state: PopoverSurfaceState): PopoverSurfaceState => {\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n popoverSurfaceClassNames.root,\n styles.root,\n state.inline && styles.inline,\n state.size === 'small' && styles.smallPadding,\n state.size === 'medium' && styles.mediumPadding,\n state.size === 'large' && styles.largePadding,\n state.appearance === 'inverted' && styles.inverted,\n state.appearance === 'brand' && styles.brand,\n state.root.className,\n );\n\n // eslint-disable-next-line react-hooks/immutability\n state.arrowClassName = mergeClasses(\n styles.arrow,\n state.size === 'small' ? styles.smallArrow : styles.mediumLargeArrow,\n );\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","createArrowHeightStyles","createArrowStyles","tokens","typographyStyles","popoverSurfaceClassNames","root","arrowHeights","small","medium","large","useStyles","color","colorNeutralForeground1","backgroundColor","colorNeutralBackground1","borderRadius","borderRadiusMedium","border","colorTransparentStroke","body1","filter","colorNeutralShadowAmbient","colorNeutralShadowKey","inline","zIndex","inverted","colorNeutralBackgroundStatic","colorNeutralForegroundStaticInverted","brand","colorBrandBackground","colorNeutralForegroundOnBrand","smallPadding","padding","mediumPadding","largePadding","smallArrow","mediumLargeArrow","arrow","arrowHeight","undefined","usePopoverSurfaceStyles_unstable","state","styles","className","size","appearance","arrowClassName"],"mappings":"AAAA;;;;;;;;;;;;IAaaQ,YAAAA;;;4BAJAF;;;oCAyDAoC;eAAAA;;;uBAhE4B,iBAAiB;kCACC,8BAA8B;4BAChD,wBAAwB;AAK1D,MAAMpC,2BAAgE;IAC3EC,MAAM;AACR,EAAE;AAEK,qBAAkD;IACvDE,OAAO;IACPC,QAAQ;IACRC,OAAO;AACT,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYZ,iBAAAA,EAAW;IAC3BO,MAAM;QACJM,OAAOT,kBAAAA,CAAOU,uBAAuB;QACrCC,iBAAiBX,kBAAAA,CAAOY,uBAAuB;QAC/CC,cAAcb,kBAAAA,CAAOc,kBAAkB;QACvCC,QAAQ,CAAC,UAAU,EAAEf,kBAAAA,CAAOgB,sBAAsB,EAAE;QACpD,GAAGf,4BAAAA,CAAiBgB,KAAK;QAEzB,wFAAwF;QACxFC,QACE,CAAC,oBAAoB,EAAElB,kBAAAA,CAAOmB,yBAAyB,CAAC,EAAE,CAAC,GAC3D,CAAC,uBAAuB,EAAEnB,kBAAAA,CAAOoB,qBAAqB,CAAC,CAAC,CAAC;IAC7D;IAEAC,QAAQ;QACN,iHAAiH;QACjH,0GAA0G;QAC1GC,QAAQ;IACV;IAEAC,UAAU;QACRZ,iBAAiBX,kBAAAA,CAAOwB,4BAA4B;QACpDf,OAAOT,kBAAAA,CAAOyB,oCAAoC;IACpD;IAEAC,OAAO;QACLf,iBAAiBX,kBAAAA,CAAO2B,oBAAoB;QAC5ClB,OAAOT,kBAAAA,CAAO4B,6BAA6B;IAC7C;IAEAC,cAAc;QAAEC,SAAS;IAAO;IAEhCC,eAAe;QAAED,SAAS;IAAO;IAEjCE,cAAc;QAAEF,SAAS;IAAO;IAEhCG,YAAYnC,6CAAAA,EAAwBM,aAAaC,KAAK;IACtD6B,sBAAkBpC,yCAAAA,EAAwBM,aAAaE,MAAM;IAC7D6B,WAAOpC,mCAAAA,EAAkB;QAAEqC,aAAaC;IAAU;AACpD;AAKO,yCAAyC,CAACE;IAC/C,MAAMC,SAAShC;IACf,oDAAoD;IACpD+B,MAAMpC,IAAI,CAACsC,SAAS,OAAG5C,mBAAAA,EACrBK,yBAAyBC,IAAI,EAC7BqC,OAAOrC,IAAI,EACXoC,MAAMlB,MAAM,IAAImB,OAAOnB,MAAM,EAC7BkB,MAAMG,IAAI,KAAK,WAAWF,OAAOX,YAAY,EAC7CU,MAAMG,IAAI,KAAK,YAAYF,OAAOT,aAAa,EAC/CQ,MAAMG,IAAI,KAAK,WAAWF,OAAOR,YAAY,EAC7CO,MAAMI,UAAU,KAAK,cAAcH,OAAOjB,QAAQ,EAClDgB,MAAMI,UAAU,KAAK,WAAWH,OAAOd,KAAK,EAC5Ca,MAAMpC,IAAI,CAACsC,SAAS;IAGtB,oDAAoD;IACpDF,MAAMK,cAAc,OAAG/C,mBAAAA,EACrB2C,OAAOL,KAAK,EACZI,MAAMG,IAAI,KAAK,UAAUF,OAAOP,UAAU,GAAGO,OAAON,gBAAgB;IAGtE,OAAOK;AACT,EAAE"}
|
package/lib-commonjs/index.js
CHANGED
|
@@ -59,8 +59,3 @@ const _Popover = require("./Popover");
|
|
|
59
59
|
const _PopoverSurface = require("./PopoverSurface");
|
|
60
60
|
const _popoverContext = require("./popoverContext");
|
|
61
61
|
const _PopoverTrigger = require("./PopoverTrigger");
|
|
62
|
-
// Experimental APIs
|
|
63
|
-
// export type { PopoverBaseProps, PopoverBaseState } from './Popover';
|
|
64
|
-
// export { usePopoverBase_unstable } from './Popover';
|
|
65
|
-
// export type { PopoverSurfaceBaseProps, PopoverSurfaceBaseState } from './PopoverSurface';
|
|
66
|
-
// export { usePopoverSurfaceBase_unstable } from './PopoverSurface';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { Popover, renderPopover_unstable, usePopover_unstable, usePopoverContextValues_unstable } from './Popover';\nexport type {\n OnOpenChangeData,\n OpenPopoverEvents,\n PopoverContextValues,\n PopoverProps,\n PopoverSize,\n PopoverState,\n} from './Popover';\nexport {\n PopoverSurface,\n arrowHeights,\n popoverSurfaceClassNames,\n renderPopoverSurface_unstable,\n usePopoverSurfaceStyles_unstable,\n usePopoverSurface_unstable,\n} from './PopoverSurface';\nexport type { PopoverSurfaceProps, PopoverSurfaceSlots, PopoverSurfaceState } from './PopoverSurface';\nexport { PopoverProvider, usePopoverContext_unstable } from './popoverContext';\nexport type { PopoverContextValue } from './popoverContext';\nexport { PopoverTrigger, renderPopoverTrigger_unstable, usePopoverTrigger_unstable } from './PopoverTrigger';\nexport type { PopoverTriggerChildProps, PopoverTriggerProps, PopoverTriggerState } from './PopoverTrigger';\n
|
|
1
|
+
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { Popover, renderPopover_unstable, usePopover_unstable, usePopoverContextValues_unstable } from './Popover';\nexport type {\n OnOpenChangeData,\n OpenPopoverEvents,\n PopoverContextValues,\n PopoverProps,\n PopoverSize,\n PopoverState,\n} from './Popover';\nexport {\n PopoverSurface,\n arrowHeights,\n popoverSurfaceClassNames,\n renderPopoverSurface_unstable,\n usePopoverSurfaceStyles_unstable,\n usePopoverSurface_unstable,\n} from './PopoverSurface';\nexport type { PopoverSurfaceProps, PopoverSurfaceSlots, PopoverSurfaceState } from './PopoverSurface';\nexport { PopoverProvider, usePopoverContext_unstable } from './popoverContext';\nexport type { PopoverContextValue } from './popoverContext';\nexport { PopoverTrigger, renderPopoverTrigger_unstable, usePopoverTrigger_unstable } from './PopoverTrigger';\nexport type { PopoverTriggerChildProps, PopoverTriggerProps, PopoverTriggerState } from './PopoverTrigger';\n"],"names":["Popover","renderPopover_unstable","usePopover_unstable","usePopoverContextValues_unstable","PopoverSurface","arrowHeights","popoverSurfaceClassNames","renderPopoverSurface_unstable","usePopoverSurfaceStyles_unstable","usePopoverSurface_unstable","PopoverProvider","usePopoverContext_unstable","PopoverTrigger","renderPopoverTrigger_unstable","usePopoverTrigger_unstable"],"mappings":";;;;;;;;;;;IAASA;+BAAO;;IAkBPU,eAAe;;;;eARtBN,8BAAc;;;eAUPQ,8BAAc;;IATrBP;2CAAY;;;eACZC,wCAAwB;;IACxBC;4DAA6B;;;eAONM,6CAA6B;;;eApBpCZ,+BAAsB;;;eAAuBE,yCAAgC;;;eAkBrEQ,0CAA0B;;;eAJlDH,gDAAgC;;;eAChCC,0CAA0B;;;eAK4BK,0CAA0B;;;eApBxCZ,4BAAmB;;;yBAA0C,YAAY;gCAgB5G,mBAAmB;gCAEkC,mBAAmB;gCAEW,mBAAmB"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-popover",
|
|
3
|
-
"version": "9.14.
|
|
3
|
+
"version": "9.14.4",
|
|
4
4
|
"description": "Popover component for Fluent UI",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -13,17 +13,17 @@
|
|
|
13
13
|
"license": "MIT",
|
|
14
14
|
"dependencies": {
|
|
15
15
|
"@fluentui/keyboard-keys": "^9.0.8",
|
|
16
|
-
"@fluentui/react-aria": "^9.17.
|
|
17
|
-
"@fluentui/react-context-selector": "^9.2.
|
|
18
|
-
"@fluentui/react-motion": "^9.
|
|
19
|
-
"@fluentui/react-motion-components-preview": "^0.15.
|
|
20
|
-
"@fluentui/react-portal": "^9.8.
|
|
21
|
-
"@fluentui/react-positioning": "^9.22.
|
|
16
|
+
"@fluentui/react-aria": "^9.17.13",
|
|
17
|
+
"@fluentui/react-context-selector": "^9.2.18",
|
|
18
|
+
"@fluentui/react-motion": "^9.16.1",
|
|
19
|
+
"@fluentui/react-motion-components-preview": "^0.15.6",
|
|
20
|
+
"@fluentui/react-portal": "^9.8.14",
|
|
21
|
+
"@fluentui/react-positioning": "^9.22.3",
|
|
22
22
|
"@fluentui/react-shared-contexts": "^9.26.2",
|
|
23
|
-
"@fluentui/react-tabster": "^9.26.
|
|
23
|
+
"@fluentui/react-tabster": "^9.26.16",
|
|
24
24
|
"@fluentui/react-theme": "^9.2.1",
|
|
25
|
-
"@fluentui/react-utilities": "^9.26.
|
|
26
|
-
"@fluentui/react-jsx-runtime": "^9.4.
|
|
25
|
+
"@fluentui/react-utilities": "^9.26.5",
|
|
26
|
+
"@fluentui/react-jsx-runtime": "^9.4.4",
|
|
27
27
|
"@griffel/react": "^1.5.32",
|
|
28
28
|
"@swc/helpers": "^0.5.1"
|
|
29
29
|
},
|