@fluentui/react-popover 0.0.0-nightly-20230501-0418.1 → 0.0.0-nightly-20230503-0419.1

package/lib/components/PopoverTrigger/usePopoverTrigger.js

@@ -0,0 +1,78 @@
+import * as React from 'react';
+import { applyTriggerPropsToChildren, getTriggerChild, mergeCallbacks, useMergedRefs, useEventCallback } from '@fluentui/react-utilities';
+import { useModalAttributes } from '@fluentui/react-tabster';
+import { usePopoverContext_unstable } from '../../popoverContext';
+import { useARIAButtonProps } from '@fluentui/react-aria';
+import { Escape } from '@fluentui/keyboard-keys';
+/**
+ * Create the state required to render PopoverTrigger.
+ *
+ * The returned state can be modified with hooks such as usePopoverTriggerStyles,
+ * before being passed to renderPopoverTrigger_unstable.
+ *
+ * @param props - props from this instance of PopoverTrigger
+ */
+export const usePopoverTrigger_unstable = props => {
+  const {
+    children,
+    disableButtonEnhancement = false
+  } = props;
+  const child = getTriggerChild(children);
+  const open = usePopoverContext_unstable(context => context.open);
+  const setOpen = usePopoverContext_unstable(context => context.setOpen);
+  const toggleOpen = usePopoverContext_unstable(context => context.toggleOpen);
+  const triggerRef = usePopoverContext_unstable(context => context.triggerRef);
+  const openOnHover = usePopoverContext_unstable(context => context.openOnHover);
+  const openOnContext = usePopoverContext_unstable(context => context.openOnContext);
+  const {
+    triggerAttributes
+  } = useModalAttributes();
+  const onContextMenu = e => {
+    if (openOnContext) {
+      e.preventDefault();
+      setOpen(e, true);
+    }
+  };
+  const onClick = e => {
+    if (!openOnContext) {
+      toggleOpen(e);
+    }
+  };
+  const onKeyDown = e => {
+    if (e.key === Escape && open) {
+      setOpen(e, false);
+      // stop propagation to avoid conflicting with other elements that listen for `Escape`
+      // e,g: Dialog, Menu
+      e.stopPropagation();
+    }
+  };
+  const onMouseEnter = e => {
+    if (openOnHover) {
+      setOpen(e, true);
+    }
+  };
+  const onMouseLeave = e => {
+    if (openOnHover) {
+      setOpen(e, false);
+    }
+  };
+  const contextMenuProps = {
+    ...triggerAttributes,
+    'aria-expanded': `${open}`,
+    ...(child === null || child === void 0 ? void 0 : child.props),
+    onMouseEnter: useEventCallback(mergeCallbacks(child === null || child === void 0 ? void 0 : child.props.onMouseEnter, onMouseEnter)),
+    onMouseLeave: useEventCallback(mergeCallbacks(child === null || child === void 0 ? void 0 : child.props.onMouseLeave, onMouseLeave)),
+    onContextMenu: useEventCallback(mergeCallbacks(child === null || child === void 0 ? void 0 : child.props.onContextMenu, onContextMenu)),
+    ref: useMergedRefs(triggerRef, child === null || child === void 0 ? void 0 : child.ref)
+  };
+  const triggerChildProps = {
+    ...contextMenuProps,
+    onClick: useEventCallback(mergeCallbacks(child === null || child === void 0 ? void 0 : child.props.onClick, onClick)),
+    onKeyDown: useEventCallback(mergeCallbacks(child === null || child === void 0 ? void 0 : child.props.onKeyDown, onKeyDown))
+  };
+  const ariaButtonTriggerChildProps = useARIAButtonProps((child === null || child === void 0 ? void 0 : child.type) === 'button' || (child === null || child === void 0 ? void 0 : child.type) === 'a' ? child.type : 'div', triggerChildProps);
+  return {
+    children: applyTriggerPropsToChildren(props.children, useARIAButtonProps((child === null || child === void 0 ? void 0 : child.type) === 'button' || (child === null || child === void 0 ? void 0 : child.type) === 'a' ? child.type : 'div', openOnContext ? contextMenuProps : disableButtonEnhancement ? triggerChildProps : ariaButtonTriggerChildProps))
+  };
+};
+//# sourceMappingURL=usePopoverTrigger.js.map

package/lib/components/PopoverTrigger/usePopoverTrigger.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","applyTriggerPropsToChildren","getTriggerChild","mergeCallbacks","useMergedRefs","useEventCallback","useModalAttributes","usePopoverContext_unstable","useARIAButtonProps","Escape","usePopoverTrigger_unstable","props","children","disableButtonEnhancement","child","open","context","setOpen","toggleOpen","triggerRef","openOnHover","openOnContext","triggerAttributes","onContextMenu","e","preventDefault","onClick","onKeyDown","key","stopPropagation","onMouseEnter","onMouseLeave","contextMenuProps","ref","triggerChildProps","ariaButtonTriggerChildProps","type"],"sources":["../../../src/components/PopoverTrigger/usePopoverTrigger.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  applyTriggerPropsToChildren,\n  getTriggerChild,\n  mergeCallbacks,\n  useMergedRefs,\n  useEventCallback,\n} from '@fluentui/react-utilities';\nimport { useModalAttributes } from '@fluentui/react-tabster';\nimport { usePopoverContext_unstable } from '../../popoverContext';\nimport type { PopoverTriggerProps, PopoverTriggerState } from './PopoverTrigger.types';\nimport { useARIAButtonProps } from '@fluentui/react-aria';\nimport { Escape } from '@fluentui/keyboard-keys';\n\n/**\n * Create the state required to render PopoverTrigger.\n *\n * The returned state can be modified with hooks such as usePopoverTriggerStyles,\n * before being passed to renderPopoverTrigger_unstable.\n *\n * @param props - props from this instance of PopoverTrigger\n */\nexport const usePopoverTrigger_unstable = (props: PopoverTriggerProps): PopoverTriggerState => {\n  const { children, disableButtonEnhancement = false } = props;\n  const child = getTriggerChild(children);\n\n  const open = usePopoverContext_unstable(context => context.open);\n  const setOpen = usePopoverContext_unstable(context => context.setOpen);\n  const toggleOpen = usePopoverContext_unstable(context => context.toggleOpen);\n  const triggerRef = usePopoverContext_unstable(context => context.triggerRef);\n  const openOnHover = usePopoverContext_unstable(context => context.openOnHover);\n  const openOnContext = usePopoverContext_unstable(context => context.openOnContext);\n  const { triggerAttributes } = useModalAttributes();\n\n  const onContextMenu = (e: React.MouseEvent<HTMLElement>) => {\n    if (openOnContext) {\n      e.preventDefault();\n      setOpen(e, true);\n    }\n  };\n\n  const onClick = (e: React.MouseEvent<HTMLElement>) => {\n    if (!openOnContext) {\n      toggleOpen(e);\n    }\n  };\n\n  const onKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {\n    if (e.key === Escape && open) {\n      setOpen(e, false);\n      // stop propagation to avoid conflicting with other elements that listen for `Escape`\n      // e,g: Dialog, Menu\n      e.stopPropagation();\n    }\n  };\n\n  const onMouseEnter = (e: React.MouseEvent<HTMLElement>) => {\n    if (openOnHover) {\n      setOpen(e, true);\n    }\n  };\n\n  const onMouseLeave = (e: React.MouseEvent<HTMLElement>) => {\n    if (openOnHover) {\n      setOpen(e, false);\n    }\n  };\n\n  const contextMenuProps = {\n    ...triggerAttributes,\n    'aria-expanded': `${open}`,\n    ...child?.props,\n    onMouseEnter: useEventCallback(mergeCallbacks(child?.props.onMouseEnter, onMouseEnter)),\n    onMouseLeave: useEventCallback(mergeCallbacks(child?.props.onMouseLeave, onMouseLeave)),\n    onContextMenu: useEventCallback(mergeCallbacks(child?.props.onContextMenu, onContextMenu)),\n    ref: useMergedRefs(triggerRef, child?.ref),\n  } as const;\n\n  const triggerChildProps = {\n    ...contextMenuProps,\n    onClick: useEventCallback(mergeCallbacks(child?.props.onClick, onClick)),\n    onKeyDown: useEventCallback(mergeCallbacks(child?.props.onKeyDown, onKeyDown)),\n  };\n\n  const ariaButtonTriggerChildProps = useARIAButtonProps(\n    child?.type === 'button' || child?.type === 'a' ? child.type : 'div',\n    triggerChildProps,\n  );\n\n  return {\n    children: applyTriggerPropsToChildren(\n      props.children,\n      useARIAButtonProps(\n        child?.type === 'button' || child?.type === 'a' ? child.type : 'div',\n        openOnContext ? contextMenuProps : disableButtonEnhancement ? triggerChildProps : ariaButtonTriggerChildProps,\n      ),\n    ),\n  };\n};\n"],"mappings":"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"}

package/lib/index.js

@@ -0,0 +1,5 @@
+export { Popover, renderPopover_unstable, usePopover_unstable } from './Popover';
+export { PopoverSurface, arrowHeights, popoverSurfaceClassNames, renderPopoverSurface_unstable, usePopoverSurfaceStyles_unstable, usePopoverSurface_unstable } from './PopoverSurface';
+export { PopoverProvider, usePopoverContext_unstable } from './popoverContext';
+export { PopoverTrigger, renderPopoverTrigger_unstable, usePopoverTrigger_unstable } from './PopoverTrigger';
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Popover","renderPopover_unstable","usePopover_unstable","PopoverSurface","arrowHeights","popoverSurfaceClassNames","renderPopoverSurface_unstable","usePopoverSurfaceStyles_unstable","usePopoverSurface_unstable","PopoverProvider","usePopoverContext_unstable","PopoverTrigger","renderPopoverTrigger_unstable","usePopoverTrigger_unstable"],"sources":["../src/index.ts"],"sourcesContent":["export { Popover, renderPopover_unstable, usePopover_unstable } from './Popover';\nexport type { OnOpenChangeData, OpenPopoverEvents, PopoverProps, PopoverSize, PopoverState } 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"],"mappings":"AAAA,SAASA,OAAO,EAAEC,sBAAsB,EAAEC,mBAAmB,QAAQ;AAErE,SACEC,cAAc,EACdC,YAAY,EACZC,wBAAwB,EACxBC,6BAA6B,EAC7BC,gCAAgC,EAChCC,0BAA0B,QACrB;AAEP,SAASC,eAAe,EAAEC,0BAA0B,QAAQ;AAE5D,SAASC,cAAc,EAAEC,6BAA6B,EAAEC,0BAA0B,QAAQ"}

package/lib/popoverContext.js

@@ -0,0 +1,24 @@
+import { createContext, useContextSelector } from '@fluentui/react-context-selector';
+export const PopoverContext = /*#__PURE__*/createContext(undefined);
+const popoverContextDefaultValue = {
+  open: false,
+  setOpen: () => null,
+  toggleOpen: () => null,
+  triggerRef: {
+    current: null
+  },
+  contentRef: {
+    current: null
+  },
+  arrowRef: {
+    current: null
+  },
+  openOnContext: false,
+  openOnHover: false,
+  size: 'medium',
+  trapFocus: false,
+  inline: false
+};
+export const PopoverProvider = PopoverContext.Provider;
+export const usePopoverContext_unstable = selector => useContextSelector(PopoverContext, (ctx = popoverContextDefaultValue) => selector(ctx));
+//# sourceMappingURL=popoverContext.js.map

package/lib/popoverContext.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["createContext","useContextSelector","PopoverContext","undefined","popoverContextDefaultValue","open","setOpen","toggleOpen","triggerRef","current","contentRef","arrowRef","openOnContext","openOnHover","size","trapFocus","inline","PopoverProvider","Provider","usePopoverContext_unstable","selector","ctx"],"sources":["../src/popoverContext.ts"],"sourcesContent":["import { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { ContextSelector, Context } from '@fluentui/react-context-selector';\nimport type { PopoverState } from './components/Popover/index';\n\nexport const PopoverContext: Context<PopoverContextValue> = createContext<PopoverContextValue | undefined>(\n  undefined,\n) as Context<PopoverContextValue>;\nconst popoverContextDefaultValue: PopoverContextValue = {\n  open: false,\n  setOpen: () => null,\n  toggleOpen: () => null,\n  triggerRef: { current: null },\n  contentRef: { current: null },\n  arrowRef: { current: null },\n  openOnContext: false,\n  openOnHover: false,\n  size: 'medium' as const,\n  trapFocus: false,\n  inline: false,\n};\n\nexport const PopoverProvider = PopoverContext.Provider;\n\n/**\n * Context shared between Popover and its children components\n */\nexport type PopoverContextValue = Pick<\n  PopoverState,\n  | 'open'\n  | 'toggleOpen'\n  | 'setOpen'\n  | 'triggerRef'\n  | 'contentRef'\n  | 'openOnHover'\n  | 'openOnContext'\n  | 'mountNode'\n  | 'withArrow'\n  | 'arrowRef'\n  | 'size'\n  | 'appearance'\n  | 'trapFocus'\n  | 'inertTrapFocus'\n  | 'inline'\n>;\n\nexport const usePopoverContext_unstable = <T>(selector: ContextSelector<PopoverContextValue, T>): T =>\n  useContextSelector(PopoverContext, (ctx = popoverContextDefaultValue) => selector(ctx));\n"],"mappings":"AAAA,SAASA,aAAa,EAAEC,kBAAkB,QAAQ;AAIlD,OAAO,MAAMC,cAAA,gBAA+CF,aAAA,CAC1DG,SAAA;AAEF,MAAMC,0BAAA,GAAkD;EACtDC,IAAA,EAAM,KAAK;EACXC,OAAA,EAASA,CAAA,KAAM,IAAI;EACnBC,UAAA,EAAYA,CAAA,KAAM,IAAI;EACtBC,UAAA,EAAY;IAAEC,OAAA,EAAS;EAAK;EAC5BC,UAAA,EAAY;IAAED,OAAA,EAAS;EAAK;EAC5BE,QAAA,EAAU;IAAEF,OAAA,EAAS;EAAK;EAC1BG,aAAA,EAAe,KAAK;EACpBC,WAAA,EAAa,KAAK;EAClBC,IAAA,EAAM;EACNC,SAAA,EAAW,KAAK;EAChBC,MAAA,EAAQ;AACV;AAEA,OAAO,MAAMC,eAAA,GAAkBf,cAAA,CAAegB,QAAQ;AAwBtD,OAAO,MAAMC,0BAAA,GAAiCC,QAAA,IAC5CnB,kBAAA,CAAmBC,cAAA,EAAgB,CAACmB,GAAA,GAAMjB,0BAA0B,KAAKgB,QAAA,CAASC,GAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-popover",
-  "version": "0.0.0-nightly-20230501-0418.1",
+  "version": "0.0.0-nightly-20230503-0419.1",
   "description": "Popover component for Fluent UI",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -29,22 +29,22 @@
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
     "@fluentui/react-conformance": "*",
-    "@fluentui/react-conformance-griffel": "0.0.0-nightly-20230501-0418.1",
+    "@fluentui/react-conformance-griffel": "0.0.0-nightly-20230503-0419.1",
     "@fluentui/scripts-api-extractor": "*",
     "@fluentui/scripts-cypress": "*",
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/keyboard-keys": "0.0.0-nightly-20230501-0418.1",
-    "@fluentui/react-aria": "0.0.0-nightly-20230501-0418.1",
-    "@fluentui/react-context-selector": "0.0.0-nightly-20230501-0418.1",
-    "@fluentui/react-portal": "0.0.0-nightly-20230501-0418.1",
-    "@fluentui/react-positioning": "0.0.0-nightly-20230501-0418.1",
-    "@fluentui/react-shared-contexts": "0.0.0-nightly-20230501-0418.1",
-    "@fluentui/react-tabster": "0.0.0-nightly-20230501-0418.1",
-    "@fluentui/react-theme": "0.0.0-nightly-20230501-0418.1",
-    "@fluentui/react-utilities": "0.0.0-nightly-20230501-0418.1",
-    "@fluentui/react-jsx-runtime": "0.0.0-nightly-20230501-0418.1",
+    "@fluentui/keyboard-keys": "0.0.0-nightly-20230503-0419.1",
+    "@fluentui/react-aria": "0.0.0-nightly-20230503-0419.1",
+    "@fluentui/react-context-selector": "0.0.0-nightly-20230503-0419.1",
+    "@fluentui/react-portal": "0.0.0-nightly-20230503-0419.1",
+    "@fluentui/react-positioning": "0.0.0-nightly-20230503-0419.1",
+    "@fluentui/react-shared-contexts": "0.0.0-nightly-20230503-0419.1",
+    "@fluentui/react-tabster": "0.0.0-nightly-20230503-0419.1",
+    "@fluentui/react-theme": "0.0.0-nightly-20230503-0419.1",
+    "@fluentui/react-utilities": "0.0.0-nightly-20230503-0419.1",
+    "@fluentui/react-jsx-runtime": "0.0.0-nightly-20230503-0419.1",
     "@griffel/react": "^1.5.2",
     "@swc/helpers": "^0.4.14"
   },