npm - @contentful/f36-popover - Versions diffs - 4.0.1 → 4.1.0 - Mend

@contentful/f36-popover 4.0.1 → 4.1.0

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.

Files changed (9) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+# [4.1.0](https://github.com/contentful/forma-36/compare/@contentful/f36-popover@4.0.1...@contentful/f36-popover@4.1.0) (2022-01-25)
+### Bug Fixes
+* focus styles for Popover content in safari ([#1816](https://github.com/contentful/forma-36/issues/1816)) ([8739fea](https://github.com/contentful/forma-36/commit/8739fea19759dd026c671fd2e9473a23c498bcc5))
+### Features
+* implement props list redesign [BAU-535]  ([#1756](https://github.com/contentful/forma-36/issues/1756)) ([21c57e7](https://github.com/contentful/forma-36/commit/21c57e72008b75990d03af4e7500edc1c7f3d26d))
 ## [4.0.1](https://github.com/contentful/forma-36/compare/@contentful/f36-popover@4.0.0...@contentful/f36-popover@4.0.1) (2022-01-11)
 **Note:** Version bump only for package @contentful/f36-popover

package/README.mdx CHANGED Viewed

@@ -1,7 +1,5 @@
 ---
 title: 'Popover'
-type: 'component'
-status: 'stable'
 slug: /components/popover/
 github: 'https://github.com/contentful/forma-36/tree/master/packages/components/popover'
 storybook: 'https://v4-f36-storybook.netlify.app/?path=/story/components-popover--basic'
@@ -11,85 +9,46 @@ typescript: ./src/Popover.tsx
 Popover is used to display some content on top of another, and should be paired with a clickable trigger element.
 It is a base for other more specific component, like `Menu`, `Autocomplete` and `Multiselect`. Please, consider using these specific componenets to cover your needs.
-## How to use Popover
+### How to use Popover
 - Only if `Menu`, `Autocomplete` and `Multiselect` components are not covering your use cases, you should use `Popover`.
 - Before using this component, double-check your design requirements. We are providing `Menu`, `Autocomplete`, and `Multiselect` for more specific use-cases and they can address your needs.
 - Keep in mind that you will have to implement everything related to accessibility for the popover content.
 - Component is controllable, so don't forget to pass `onClose` callback prop. Otherwise `closeOnEsc` and `closeOnBlur` will not work properly.
-## Code examples
+## Import
+```jsx static=true
+import { Popover } from '@contentful/f36-components';
+// or
+import { Popover } from '@contentful/f36-popover';
+```
+## Examples
+### Basic
 - Pass trigger component as a child for `Popover.Trigger`.
   NOTE: 🚨 Ensure that the component that you pass accepts `ref`. Consider using `forwardRef` for functional components.
 - Pass popover content as a child for `Popover.Content`
-```tsx
-// import { Popover } from '@contentful/f36-popover';
-// import { Button } from '@contentful/f36-button';
-// import { Paragraph } from '@contentful/f36-typography';
-// import { Box } from '@contentful/f36-core';
-function PopoverExample() {
-  const [isOpen, setIsOpen] = React.useState(false);
-  return (
-    <Popover isOpen={isOpen} onClose={() => setIsOpen(false)}>
-      <Popover.Trigger>
-        <Button onClick={() => setIsOpen(!isOpen)}>Toggle</Button>
-      </Popover.Trigger>
-      <Popover.Content>
-        <Box padding="spacingM">
-          <Paragraph>This is the content.</Paragraph>
-          <Button>Some action</Button>
-        </Box>
-      </Popover.Content>
-    </Popover>
-  );
-}
+```jsx file=examples/PopoverBasicExample.tsx
 ```
-## Trapping focus within Popover
+### Trapping focus within Popover
 If the popover contains interactive elements that user can navigate through with `Tab`,
 consider using [react-focus-lock](https://github.com/theKashey/react-focus-lock) to trap the focus within Popover
-```tsx static=true
-// import { Popover } from '@contentful/f36-popover';
-// import { Button } from '@contentful/f36-button';
-// import { Stack } from '@contentful/f36-core';
-// import { Switch } from '@contentful/f36-forms';
-// import FocusLock from 'react-focus-lock';
-function PopoverExample() {
-  const [isOpen, setIsOpen] = React.useState(false);
-  return (
-    <Popover isOpen={isOpen} onClose={() => setIsOpen(false)}>
-      <Popover.Trigger>
-        <Button onClick={() => setIsOpen(!isOpen)}>Toggle</Button>
-      </Popover.Trigger>
-      <Popover.Content>
-        {/* Just wrap your content with FocusLock component */}
-        <FocusLock>
-          <Stack
-            padding="spacingM"
-            margin="none"
-            spacing="spacingS"
-            flexDirection="column"
-          >
-            <Switch>Option 1</Switch>
-            <Switch>Option 2</Switch>
-            <Switch>Option 3</Switch>
-          </Stack>
-        </FocusLock>
-      </Popover.Content>
-    </Popover>
-  );
-}
+```jsx file=examples/PopoverFocusLockExample.tsx
 ```
+## Props (API reference)
+<PropsTable of="Popover" />
 ## Content guidelines
 - Use an interactive element such as `button` for `Popover.Trigger`
@@ -101,9 +60,3 @@ function PopoverExample() {
 - When the popover is open and focus is within the `Popover.Content`, click on `Esc` key will close the popover. If you set `closeOnEsc` to `false`, it will not close.
 - When the popover is open and focus is within the `Popover.Content`, click outside popover or blurring out will close the it. If you set `closeOnBlur` to `false`, it will not close.
 - All the necessary a11y attributes for `Popover.Content` and `Popover.Trigger` are provided.
-## Props
-import { Props } from '@contentful/f36-docs-utils';
-<Props of="Popover" />

package/dist/main.js CHANGED Viewed

@@ -177,10 +177,11 @@ const $ac842fe302ff665f$export$fbd764fe961047f7 = (isOpen)=>({
             boxShadow: ($parcel$interopDefault($36WSQ$contentfulf36tokens)).boxShadowDefault,
             zIndex: ($parcel$interopDefault($36WSQ$contentfulf36tokens)).zIndexDropdown,
             '&:focus': {
+                boxShadow: ($parcel$interopDefault($36WSQ$contentfulf36tokens)).glowPrimary,
                 outline: 'none'
             },
-            '&:focus-visible': {
-                boxShadow: ($parcel$interopDefault($36WSQ$contentfulf36tokens)).glowPrimary
+            '&:focus:not(:focus-visible)': {
+                boxShadow: ($parcel$interopDefault($36WSQ$contentfulf36tokens)).boxShadowDefault
             }
         })
     })

package/dist/main.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"mappings":"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","sources":["packages/components/popover/src/index.ts","packages/components/popover/src/CompoundPopover.tsx","packages/components/popover/src/Popover.tsx","packages/components/popover/src/PopoverContext.ts","packages/components/popover/src/PopoverContent/PopoverContent.tsx","packages/components/popover/src/PopoverContent/PopoverContent.styles.ts","packages/components/popover/src/PopoverTrigger/PopoverTrigger.tsx"],"sourcesContent":["export { Popover } from './CompoundPopover';\nexport type { PopoverProps } from './Popover';\nexport { PopoverTrigger } from './PopoverTrigger/PopoverTrigger';\nexport type { PopoverTriggerProps } from './PopoverTrigger/PopoverTrigger';\nexport { PopoverContent } from './PopoverContent/PopoverContent';\nexport type { PopoverContentProps } from './PopoverContent/PopoverContent';\n","import { Popover as OriginalPopover } from './Popover';\nimport { PopoverContent } from './PopoverContent/PopoverContent';\nimport { PopoverTrigger } from './PopoverTrigger/PopoverTrigger';\n\ntype CompoundPopover = typeof OriginalPopover & {\n Content: typeof PopoverContent;\n Trigger: typeof PopoverTrigger;\n};\n\nexport const Popover = OriginalPopover as CompoundPopover;\nPopover.Content = PopoverContent;\nPopover.Trigger = PopoverTrigger;\n","import React, { useMemo, useState, useEffect, useCallback } from 'react';\nimport { useId, mergeRefs, ExpandProps } from '@contentful/f36-core';\nimport { Placement, Modifier } from '@popperjs/core';\nimport { PopoverContextProvider, PopoverContextType } from './PopoverContext';\nimport { usePopper } from 'react-popper';\n\nexport interface PopoverProps {\n children: React.ReactNode;\n\n /*\n Boolean to determine if the Popover should be the same width as\n * the trigger element\n \n @default false\n /\n isFullWidth?: boolean;\n\n /\n Boolean to control whether or not the Popover is open\n \n @default false\n /\n isOpen?: boolean;\n\n /\n Callback fired when the popover closes\n /\n onClose?: () => void;\n\n /\n Determines the preferred position of the Popover. This position is not\n * guaranteed, as the Popover might be moved to fit the viewport\n \n @default bottom-start\n /\n placement?: Placement;\n\n /\n Boolean to control if popover is allowed to change its placement automatically\n * based on available space in the viewport.\n \n For example:\n * If you set placement prop to bottom, but there isn't enough space to position the popover in that direction,\n * it will change the popper placement to top. As soon as enough space is detected, the placement will be reverted to the defined one.\n \n If you want the popover to strictly follow the placement prop you should set this prop to false.\n \n @default true\n /\n isAutoalignmentEnabled?: boolean;\n\n /\n Boolean to control whether or not to render the Popover in a React Portal.\n * Rendering content inside a Portal allows the Popover to escape the bounds\n * of its parent while still being positioned correctly. Using a Portal is\n * necessary if an ancestor of the Popover hides overflow.\n \n @default true\n /\n usePortal?: boolean;\n\n /\n If true, the popover will close when you blur out it by clicking outside or tabbing out\n \n @default true\n /\n closeOnBlur?: boolean;\n\n /\n If true, the popover will close when you hit the Esc key\n \n @default true\n /\n closeOnEsc?: boolean;\n\n /\n If true, the popover will be focused after opening\n \n @default true\n /\n autoFocus?: boolean;\n\n /\n Popover id. Will be used as an `id` attribute on popover\n * and as `aria-controls` attribute on trigger\n \n @default true\n /\n id?: string;\n\n /\n The `X-axis` and `Y-axis` offset to position popper element\n * from its trigger element. `[X, Y]`\n \n @default [1, 4]\n /\n offset?: [number, number];\n}\n\nexport function Popover(props: ExpandProps<PopoverProps>) {\n const {\n children,\n isOpen,\n placement = 'bottom-start',\n isFullWidth = false,\n isAutoalignmentEnabled = true,\n usePortal = true,\n closeOnBlur = true,\n closeOnEsc = true,\n onClose,\n autoFocus = true,\n id,\n offset = [1, 4],\n } = props;\n\n const [triggerElement, setTriggerElement] = useState<HTMLElement \| null>(\n null,\n );\n const [popoverElement, setPopoverElement] = useState<HTMLElement \| null>(\n null,\n );\n\n const {\n attributes: popperAttributes,\n forceUpdate,\n styles: popperStyles,\n } = usePopper(triggerElement, popoverElement, {\n placement,\n modifiers: [\n {\n name: 'offset',\n options: {\n offset,\n },\n },\n {\n ...sameWidth,\n enabled: isFullWidth,\n },\n {\n name: 'preventOverflow',\n enabled: isAutoalignmentEnabled,\n options: {\n mainAxis: true,\n },\n },\n {\n name: 'flip',\n enabled: isAutoalignmentEnabled,\n },\n ],\n });\n\n useEffect(() => {\n if (isOpen && autoFocus && popoverElement) {\n popoverElement.focus({ preventScroll: true });\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isOpen, popoverElement]);\n\n useEffect(() => {\n if (isOpen && forceUpdate) {\n forceUpdate();\n }\n }, [isOpen, forceUpdate]);\n\n const popoverGeneratedId = useId(null, 'popover-content');\n const popoverId = id \|\| popoverGeneratedId;\n\n const closeAndFocusTrigger = useCallback(() => {\n onClose?.();\n\n // setTimeout trick to make it work with focus-lock\n setTimeout(() => triggerElement?.focus({ preventScroll: true }), 0);\n }, [onClose, triggerElement]);\n\n const contextValue: PopoverContextType = useMemo(\n () => ({\n isOpen,\n usePortal,\n getTriggerProps: (_ref = null) => ({\n ref: mergeRefs(setTriggerElement, _ref),\n ['aria-expanded']: Boolean(isOpen),\n ['aria-controls']: popoverId,\n }),\n getPopoverProps: (_props = {}, _ref = null) => ({\n ...popperAttributes.popper,\n style: {\n ...(_props.style \|\| {}),\n ...popperStyles.popper,\n },\n ref: mergeRefs(setPopoverElement, _ref),\n id: popoverId,\n onBlur: (event: React.FocusEvent<HTMLDivElement>) => {\n if (_props.onBlur) {\n _props.onBlur(event);\n }\n\n if (!closeOnBlur) {\n return;\n }\n\n const relatedTarget = event.relatedTarget as Node;\n\n const targetIsPopover =\n popoverElement === relatedTarget \|\|\n popoverElement?.contains(relatedTarget);\n const targetIsTrigger =\n triggerElement === relatedTarget \|\|\n triggerElement?.contains(relatedTarget);\n\n if (targetIsPopover \|\| targetIsTrigger) {\n return;\n }\n\n onClose?.();\n },\n onKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => {\n if (_props.onKeyDown) {\n _props.onKeyDown(event);\n }\n\n if (closeOnEsc && event.key === 'Escape') {\n closeAndFocusTrigger();\n }\n },\n }),\n }),\n [\n isOpen,\n popperAttributes,\n popperStyles,\n usePortal,\n popoverId,\n closeOnEsc,\n closeOnBlur,\n popoverElement,\n triggerElement,\n closeAndFocusTrigger,\n onClose,\n ],\n );\n\n return (\n <PopoverContextProvider value={contextValue}>\n {children}\n </PopoverContextProvider>\n );\n}\n\n/\n Sets the popover width to the size of the trigger element.\n /\nconst sameWidth: Modifier<'sameWidth', any> = {\n name: 'sameWidth',\n enabled: true,\n phase: 'beforeWrite',\n requires: ['computeStyles'],\n fn: ({ state }) => {\n state.styles.popper.width = `${state.rects.reference.width}px`;\n },\n effect: ({ state }) => () => {\n const reference = state.elements.reference as HTMLElement;\n state.elements.popper.style.width = `${reference.offsetWidth}px`;\n },\n};\n","import React, { HTMLProps } from 'react';\n\nexport type PopoverContextType = {\n isOpen: boolean;\n usePortal: boolean;\n getPopoverProps: (\n _props: HTMLProps<HTMLDivElement>,\n _ref: React.Ref<HTMLDivElement>,\n ) => HTMLProps<HTMLDivElement>;\n getTriggerProps: (_ref: React.Ref<HTMLElement>) => HTMLProps<HTMLElement>;\n};\n\nconst PopoverContext = React.createContext<PopoverContextType \| undefined>(\n undefined,\n);\n\nexport const usePopoverContext = () => {\n const context = React.useContext(PopoverContext);\n\n if (context === undefined) {\n throw new Error(\n 'usePopoverContext must be used within a PopoverContextProvider',\n );\n }\n\n return context;\n};\n\nexport const PopoverContextProvider = PopoverContext.Provider;\n","import React from 'react';\nimport { cx } from 'emotion';\nimport {\n CommonProps,\n PropsWithHTMLElement,\n ExpandProps,\n} from '@contentful/f36-core';\nimport { usePopoverContext } from '../PopoverContext';\nimport { Portal } from '@contentful/f36-utils';\nimport { getPopoverContentStyles } from './PopoverContent.styles';\n\ninterface PopoverContentInternalProps extends CommonProps {\n children?: React.ReactNode;\n}\n\nexport type PopoverContentProps = PropsWithHTMLElement<\n PopoverContentInternalProps,\n 'div'\n>;\n\nconst _PopoverContent = (props: ExpandProps<PopoverContentProps>, ref) => {\n const {\n children,\n className,\n testId = 'cf-ui-popover-content',\n role = 'dialog',\n ...otherProps\n } = props;\n const { isOpen, getPopoverProps, usePortal } = usePopoverContext();\n\n const styles = getPopoverContentStyles(isOpen);\n\n const content = (\n <div\n {...otherProps}\n {...getPopoverProps(otherProps, ref)}\n className={cx(styles.container, className)}\n data-test-id={testId}\n tabIndex={-1}\n role={role}\n // specific attribute to mark that this element is absolute positioned\n // for internal contentful apps usage\n data-position-absolute\n >\n {children}\n </div>\n );\n\n return usePortal ? <Portal>{content}</Portal> : content;\n};\n\nexport const PopoverContent = React.forwardRef(_PopoverContent);\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getPopoverContentStyles = (isOpen: boolean) => ({\n container: css({\n display: isOpen ? 'initial' : 'none',\n background: tokens.colorWhite,\n border: 0,\n borderRadius: tokens.borderRadiusMedium,\n boxShadow: tokens.boxShadowDefault,\n zIndex: tokens.zIndexDropdown,\n '&:focus': {\n outline: 'none',\n },\n '&:focus-visible': {\n boxShadow: tokens.glowPrimary,\n },\n }),\n});\n","import React from 'react';\nimport { usePopoverContext } from '../PopoverContext';\n\nexport interface PopoverTriggerProps {\n children: React.ReactNode;\n}\n\n/\n PopoverTrigger opens the popover. It must be an interactive element.\n */\nexport const PopoverTrigger = (props: PopoverTriggerProps) => {\n const child = React.Children.only(props.children) as any;\n const { getTriggerProps } = usePopoverContext();\n\n return React.cloneElement(child, {\n ...getTriggerProps(child.ref),\n 'aria-haspopup': child.props['aria-haspopup'] ?? 'dialog',\n });\n};\n"],"names":["Popover","PopoverProps","PopoverTrigger","PopoverTriggerProps","PopoverContent","PopoverContentProps","OriginalPopover","CompoundPopover","Content","Trigger","React","useMemo","useState","useEffect","useCallback","useId","mergeRefs","ExpandProps","Placement","Modifier","PopoverContextProvider","PopoverContextType","usePopper","children","ReactNode","isFullWidth","isOpen","onClose","placement","isAutoalignmentEnabled","usePortal","closeOnBlur","closeOnEsc","autoFocus","id","offset","props","triggerElement","setTriggerElement","HTMLElement","popoverElement","setPopoverElement","attributes","popperAttributes","forceUpdate","styles","popperStyles","modifiers","name","options","sameWidth","enabled","mainAxis","focus","preventScroll","popoverGeneratedId","popoverId","closeAndFocusTrigger","setTimeout","contextValue","getTriggerProps","_ref","ref","Boolean","getPopoverProps","_props","popper","style","onBlur","event","FocusEvent","HTMLDivElement","relatedTarget","Node","targetIsPopover","contains","targetIsTrigger","onKeyDown","KeyboardEvent","key","phase","requires","fn","state","width","rects","reference","effect","elements","offsetWidth","HTMLProps","Ref","PopoverContext","createContext","undefined","usePopoverContext","context","useContext","Error","Provider","CommonProps","PropsWithHTMLElement","Portal","getPopoverContentStyles","PopoverContentInternalProps","_PopoverContent","className","testId","role","otherProps","content","container","forwardRef","tokens","display","background","colorWhite","border","borderRadius","borderRadiusMedium","boxShadow","boxShadowDefault","zIndex","zIndexDropdown","outline","glowPrimary","child","Children","only","cloneElement"],"version":3,"file":"main.js.map"}
1	+ {"mappings":"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","sources":["packages/components/popover/src/index.ts","packages/components/popover/src/CompoundPopover.tsx","packages/components/popover/src/Popover.tsx","packages/components/popover/src/PopoverContext.ts","packages/components/popover/src/PopoverContent/PopoverContent.tsx","packages/components/popover/src/PopoverContent/PopoverContent.styles.ts","packages/components/popover/src/PopoverTrigger/PopoverTrigger.tsx"],"sourcesContent":["export { Popover } from './CompoundPopover';\nexport type { PopoverProps } from './Popover';\nexport { PopoverTrigger } from './PopoverTrigger/PopoverTrigger';\nexport type { PopoverTriggerProps } from './PopoverTrigger/PopoverTrigger';\nexport { PopoverContent } from './PopoverContent/PopoverContent';\nexport type { PopoverContentProps } from './PopoverContent/PopoverContent';\n","import { Popover as OriginalPopover } from './Popover';\nimport { PopoverContent } from './PopoverContent/PopoverContent';\nimport { PopoverTrigger } from './PopoverTrigger/PopoverTrigger';\n\ntype CompoundPopover = typeof OriginalPopover & {\n Content: typeof PopoverContent;\n Trigger: typeof PopoverTrigger;\n};\n\nexport const Popover = OriginalPopover as CompoundPopover;\nPopover.Content = PopoverContent;\nPopover.Trigger = PopoverTrigger;\n","import React, { useMemo, useState, useEffect, useCallback } from 'react';\nimport { useId, mergeRefs, ExpandProps } from '@contentful/f36-core';\nimport { Placement, Modifier } from '@popperjs/core';\nimport { PopoverContextProvider, PopoverContextType } from './PopoverContext';\nimport { usePopper } from 'react-popper';\n\nexport interface PopoverProps {\n children: React.ReactNode;\n\n /*\n Boolean to determine if the Popover should be the same width as\n * the trigger element\n \n @default false\n /\n isFullWidth?: boolean;\n\n /\n Boolean to control whether or not the Popover is open\n \n @default false\n /\n isOpen?: boolean;\n\n /\n Callback fired when the popover closes\n /\n onClose?: () => void;\n\n /\n Determines the preferred position of the Popover. This position is not\n * guaranteed, as the Popover might be moved to fit the viewport\n \n @default bottom-start\n /\n placement?: Placement;\n\n /\n Boolean to control if popover is allowed to change its placement automatically\n * based on available space in the viewport.\n \n For example:\n * If you set placement prop to bottom, but there isn't enough space to position the popover in that direction,\n * it will change the popper placement to top. As soon as enough space is detected, the placement will be reverted to the defined one.\n \n If you want the popover to strictly follow the placement prop you should set this prop to false.\n \n @default true\n /\n isAutoalignmentEnabled?: boolean;\n\n /\n Boolean to control whether or not to render the Popover in a React Portal.\n * Rendering content inside a Portal allows the Popover to escape the bounds\n * of its parent while still being positioned correctly. Using a Portal is\n * necessary if an ancestor of the Popover hides overflow.\n \n @default true\n /\n usePortal?: boolean;\n\n /\n If true, the popover will close when you blur out it by clicking outside or tabbing out\n \n @default true\n /\n closeOnBlur?: boolean;\n\n /\n If true, the popover will close when you hit the Esc key\n \n @default true\n /\n closeOnEsc?: boolean;\n\n /\n If true, the popover will be focused after opening\n \n @default true\n /\n autoFocus?: boolean;\n\n /\n Popover id. Will be used as an `id` attribute on popover\n * and as `aria-controls` attribute on trigger\n \n @default true\n /\n id?: string;\n\n /\n The `X-axis` and `Y-axis` offset to position popper element\n * from its trigger element. `[X, Y]`\n \n @default [1, 4]\n /\n offset?: [number, number];\n}\n\nexport function Popover(props: ExpandProps<PopoverProps>) {\n const {\n children,\n isOpen,\n placement = 'bottom-start',\n isFullWidth = false,\n isAutoalignmentEnabled = true,\n usePortal = true,\n closeOnBlur = true,\n closeOnEsc = true,\n onClose,\n autoFocus = true,\n id,\n offset = [1, 4],\n } = props;\n\n const [triggerElement, setTriggerElement] = useState<HTMLElement \| null>(\n null,\n );\n const [popoverElement, setPopoverElement] = useState<HTMLElement \| null>(\n null,\n );\n\n const {\n attributes: popperAttributes,\n forceUpdate,\n styles: popperStyles,\n } = usePopper(triggerElement, popoverElement, {\n placement,\n modifiers: [\n {\n name: 'offset',\n options: {\n offset,\n },\n },\n {\n ...sameWidth,\n enabled: isFullWidth,\n },\n {\n name: 'preventOverflow',\n enabled: isAutoalignmentEnabled,\n options: {\n mainAxis: true,\n },\n },\n {\n name: 'flip',\n enabled: isAutoalignmentEnabled,\n },\n ],\n });\n\n useEffect(() => {\n if (isOpen && autoFocus && popoverElement) {\n popoverElement.focus({ preventScroll: true });\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isOpen, popoverElement]);\n\n useEffect(() => {\n if (isOpen && forceUpdate) {\n forceUpdate();\n }\n }, [isOpen, forceUpdate]);\n\n const popoverGeneratedId = useId(null, 'popover-content');\n const popoverId = id \|\| popoverGeneratedId;\n\n const closeAndFocusTrigger = useCallback(() => {\n onClose?.();\n\n // setTimeout trick to make it work with focus-lock\n setTimeout(() => triggerElement?.focus({ preventScroll: true }), 0);\n }, [onClose, triggerElement]);\n\n const contextValue: PopoverContextType = useMemo(\n () => ({\n isOpen,\n usePortal,\n getTriggerProps: (_ref = null) => ({\n ref: mergeRefs(setTriggerElement, _ref),\n ['aria-expanded']: Boolean(isOpen),\n ['aria-controls']: popoverId,\n }),\n getPopoverProps: (_props = {}, _ref = null) => ({\n ...popperAttributes.popper,\n style: {\n ...(_props.style \|\| {}),\n ...popperStyles.popper,\n },\n ref: mergeRefs(setPopoverElement, _ref),\n id: popoverId,\n onBlur: (event: React.FocusEvent<HTMLDivElement>) => {\n if (_props.onBlur) {\n _props.onBlur(event);\n }\n\n if (!closeOnBlur) {\n return;\n }\n\n const relatedTarget = event.relatedTarget as Node;\n\n const targetIsPopover =\n popoverElement === relatedTarget \|\|\n popoverElement?.contains(relatedTarget);\n const targetIsTrigger =\n triggerElement === relatedTarget \|\|\n triggerElement?.contains(relatedTarget);\n\n if (targetIsPopover \|\| targetIsTrigger) {\n return;\n }\n\n onClose?.();\n },\n onKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => {\n if (_props.onKeyDown) {\n _props.onKeyDown(event);\n }\n\n if (closeOnEsc && event.key === 'Escape') {\n closeAndFocusTrigger();\n }\n },\n }),\n }),\n [\n isOpen,\n popperAttributes,\n popperStyles,\n usePortal,\n popoverId,\n closeOnEsc,\n closeOnBlur,\n popoverElement,\n triggerElement,\n closeAndFocusTrigger,\n onClose,\n ],\n );\n\n return (\n <PopoverContextProvider value={contextValue}>\n {children}\n </PopoverContextProvider>\n );\n}\n\n/\n Sets the popover width to the size of the trigger element.\n /\nconst sameWidth: Modifier<'sameWidth', any> = {\n name: 'sameWidth',\n enabled: true,\n phase: 'beforeWrite',\n requires: ['computeStyles'],\n fn: ({ state }) => {\n state.styles.popper.width = `${state.rects.reference.width}px`;\n },\n effect: ({ state }) => () => {\n const reference = state.elements.reference as HTMLElement;\n state.elements.popper.style.width = `${reference.offsetWidth}px`;\n },\n};\n","import React, { HTMLProps } from 'react';\n\nexport type PopoverContextType = {\n isOpen: boolean;\n usePortal: boolean;\n getPopoverProps: (\n _props: HTMLProps<HTMLDivElement>,\n _ref: React.Ref<HTMLDivElement>,\n ) => HTMLProps<HTMLDivElement>;\n getTriggerProps: (_ref: React.Ref<HTMLElement>) => HTMLProps<HTMLElement>;\n};\n\nconst PopoverContext = React.createContext<PopoverContextType \| undefined>(\n undefined,\n);\n\nexport const usePopoverContext = () => {\n const context = React.useContext(PopoverContext);\n\n if (context === undefined) {\n throw new Error(\n 'usePopoverContext must be used within a PopoverContextProvider',\n );\n }\n\n return context;\n};\n\nexport const PopoverContextProvider = PopoverContext.Provider;\n","import React from 'react';\nimport { cx } from 'emotion';\nimport {\n CommonProps,\n PropsWithHTMLElement,\n ExpandProps,\n} from '@contentful/f36-core';\nimport { usePopoverContext } from '../PopoverContext';\nimport { Portal } from '@contentful/f36-utils';\nimport { getPopoverContentStyles } from './PopoverContent.styles';\n\ninterface PopoverContentInternalProps extends CommonProps {\n children?: React.ReactNode;\n}\n\nexport type PopoverContentProps = PropsWithHTMLElement<\n PopoverContentInternalProps,\n 'div'\n>;\n\nconst _PopoverContent = (props: ExpandProps<PopoverContentProps>, ref) => {\n const {\n children,\n className,\n testId = 'cf-ui-popover-content',\n role = 'dialog',\n ...otherProps\n } = props;\n const { isOpen, getPopoverProps, usePortal } = usePopoverContext();\n\n const styles = getPopoverContentStyles(isOpen);\n\n const content = (\n <div\n {...otherProps}\n {...getPopoverProps(otherProps, ref)}\n className={cx(styles.container, className)}\n data-test-id={testId}\n tabIndex={-1}\n role={role}\n // specific attribute to mark that this element is absolute positioned\n // for internal contentful apps usage\n data-position-absolute\n >\n {children}\n </div>\n );\n\n return usePortal ? <Portal>{content}</Portal> : content;\n};\n\nexport const PopoverContent = React.forwardRef(_PopoverContent);\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getPopoverContentStyles = (isOpen: boolean) => ({\n container: css({\n display: isOpen ? 'initial' : 'none',\n background: tokens.colorWhite,\n border: 0,\n borderRadius: tokens.borderRadiusMedium,\n boxShadow: tokens.boxShadowDefault,\n zIndex: tokens.zIndexDropdown,\n '&:focus': {\n boxShadow: tokens.glowPrimary,\n outline: 'none',\n },\n '&:focus:not(:focus-visible)': {\n boxShadow: tokens.boxShadowDefault,\n },\n }),\n});\n","import React from 'react';\nimport { usePopoverContext } from '../PopoverContext';\n\nexport interface PopoverTriggerProps {\n children: React.ReactNode;\n}\n\n/\n PopoverTrigger opens the popover. It must be an interactive element.\n */\nexport const PopoverTrigger = (props: PopoverTriggerProps) => {\n const child = React.Children.only(props.children) as any;\n const { getTriggerProps } = usePopoverContext();\n\n return React.cloneElement(child, {\n ...getTriggerProps(child.ref),\n 'aria-haspopup': child.props['aria-haspopup'] ?? 'dialog',\n });\n};\n"],"names":["Popover","PopoverProps","PopoverTrigger","PopoverTriggerProps","PopoverContent","PopoverContentProps","OriginalPopover","CompoundPopover","Content","Trigger","React","useMemo","useState","useEffect","useCallback","useId","mergeRefs","ExpandProps","Placement","Modifier","PopoverContextProvider","PopoverContextType","usePopper","children","ReactNode","isFullWidth","isOpen","onClose","placement","isAutoalignmentEnabled","usePortal","closeOnBlur","closeOnEsc","autoFocus","id","offset","props","triggerElement","setTriggerElement","HTMLElement","popoverElement","setPopoverElement","attributes","popperAttributes","forceUpdate","styles","popperStyles","modifiers","name","options","sameWidth","enabled","mainAxis","focus","preventScroll","popoverGeneratedId","popoverId","closeAndFocusTrigger","setTimeout","contextValue","getTriggerProps","_ref","ref","Boolean","getPopoverProps","_props","popper","style","onBlur","event","FocusEvent","HTMLDivElement","relatedTarget","Node","targetIsPopover","contains","targetIsTrigger","onKeyDown","KeyboardEvent","key","phase","requires","fn","state","width","rects","reference","effect","elements","offsetWidth","HTMLProps","Ref","PopoverContext","createContext","undefined","usePopoverContext","context","useContext","Error","Provider","CommonProps","PropsWithHTMLElement","Portal","getPopoverContentStyles","PopoverContentInternalProps","_PopoverContent","className","testId","role","otherProps","content","container","forwardRef","tokens","display","background","colorWhite","border","borderRadius","borderRadiusMedium","boxShadow","boxShadowDefault","zIndex","zIndexDropdown","glowPrimary","outline","child","Children","only","cloneElement"],"version":3,"file":"main.js.map"}

package/dist/module.js CHANGED Viewed

@@ -167,10 +167,11 @@ const $8a165eef2449d46a$export$fbd764fe961047f7 = (isOpen)=>({
             boxShadow: $hYGFM$contentfulf36tokens.boxShadowDefault,
             zIndex: $hYGFM$contentfulf36tokens.zIndexDropdown,
             '&:focus': {
+                boxShadow: $hYGFM$contentfulf36tokens.glowPrimary,
                 outline: 'none'
             },
-            '&:focus-visible': {
-                boxShadow: $hYGFM$contentfulf36tokens.glowPrimary
+            '&:focus:not(:focus-visible)': {
+                boxShadow: $hYGFM$contentfulf36tokens.boxShadowDefault
             }
         })
     })

package/dist/module.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"mappings":"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","sources":["packages/components/popover/src/index.ts","packages/components/popover/src/CompoundPopover.tsx","packages/components/popover/src/Popover.tsx","packages/components/popover/src/PopoverContext.ts","packages/components/popover/src/PopoverContent/PopoverContent.tsx","packages/components/popover/src/PopoverContent/PopoverContent.styles.ts","packages/components/popover/src/PopoverTrigger/PopoverTrigger.tsx"],"sourcesContent":["export { Popover } from './CompoundPopover';\nexport type { PopoverProps } from './Popover';\nexport { PopoverTrigger } from './PopoverTrigger/PopoverTrigger';\nexport type { PopoverTriggerProps } from './PopoverTrigger/PopoverTrigger';\nexport { PopoverContent } from './PopoverContent/PopoverContent';\nexport type { PopoverContentProps } from './PopoverContent/PopoverContent';\n","import { Popover as OriginalPopover } from './Popover';\nimport { PopoverContent } from './PopoverContent/PopoverContent';\nimport { PopoverTrigger } from './PopoverTrigger/PopoverTrigger';\n\ntype CompoundPopover = typeof OriginalPopover & {\n Content: typeof PopoverContent;\n Trigger: typeof PopoverTrigger;\n};\n\nexport const Popover = OriginalPopover as CompoundPopover;\nPopover.Content = PopoverContent;\nPopover.Trigger = PopoverTrigger;\n","import React, { useMemo, useState, useEffect, useCallback } from 'react';\nimport { useId, mergeRefs, ExpandProps } from '@contentful/f36-core';\nimport { Placement, Modifier } from '@popperjs/core';\nimport { PopoverContextProvider, PopoverContextType } from './PopoverContext';\nimport { usePopper } from 'react-popper';\n\nexport interface PopoverProps {\n children: React.ReactNode;\n\n /*\n Boolean to determine if the Popover should be the same width as\n * the trigger element\n \n @default false\n /\n isFullWidth?: boolean;\n\n /\n Boolean to control whether or not the Popover is open\n \n @default false\n /\n isOpen?: boolean;\n\n /\n Callback fired when the popover closes\n /\n onClose?: () => void;\n\n /\n Determines the preferred position of the Popover. This position is not\n * guaranteed, as the Popover might be moved to fit the viewport\n \n @default bottom-start\n /\n placement?: Placement;\n\n /\n Boolean to control if popover is allowed to change its placement automatically\n * based on available space in the viewport.\n \n For example:\n * If you set placement prop to bottom, but there isn't enough space to position the popover in that direction,\n * it will change the popper placement to top. As soon as enough space is detected, the placement will be reverted to the defined one.\n \n If you want the popover to strictly follow the placement prop you should set this prop to false.\n \n @default true\n /\n isAutoalignmentEnabled?: boolean;\n\n /\n Boolean to control whether or not to render the Popover in a React Portal.\n * Rendering content inside a Portal allows the Popover to escape the bounds\n * of its parent while still being positioned correctly. Using a Portal is\n * necessary if an ancestor of the Popover hides overflow.\n \n @default true\n /\n usePortal?: boolean;\n\n /\n If true, the popover will close when you blur out it by clicking outside or tabbing out\n \n @default true\n /\n closeOnBlur?: boolean;\n\n /\n If true, the popover will close when you hit the Esc key\n \n @default true\n /\n closeOnEsc?: boolean;\n\n /\n If true, the popover will be focused after opening\n \n @default true\n /\n autoFocus?: boolean;\n\n /\n Popover id. Will be used as an `id` attribute on popover\n * and as `aria-controls` attribute on trigger\n \n @default true\n /\n id?: string;\n\n /\n The `X-axis` and `Y-axis` offset to position popper element\n * from its trigger element. `[X, Y]`\n \n @default [1, 4]\n /\n offset?: [number, number];\n}\n\nexport function Popover(props: ExpandProps<PopoverProps>) {\n const {\n children,\n isOpen,\n placement = 'bottom-start',\n isFullWidth = false,\n isAutoalignmentEnabled = true,\n usePortal = true,\n closeOnBlur = true,\n closeOnEsc = true,\n onClose,\n autoFocus = true,\n id,\n offset = [1, 4],\n } = props;\n\n const [triggerElement, setTriggerElement] = useState<HTMLElement \| null>(\n null,\n );\n const [popoverElement, setPopoverElement] = useState<HTMLElement \| null>(\n null,\n );\n\n const {\n attributes: popperAttributes,\n forceUpdate,\n styles: popperStyles,\n } = usePopper(triggerElement, popoverElement, {\n placement,\n modifiers: [\n {\n name: 'offset',\n options: {\n offset,\n },\n },\n {\n ...sameWidth,\n enabled: isFullWidth,\n },\n {\n name: 'preventOverflow',\n enabled: isAutoalignmentEnabled,\n options: {\n mainAxis: true,\n },\n },\n {\n name: 'flip',\n enabled: isAutoalignmentEnabled,\n },\n ],\n });\n\n useEffect(() => {\n if (isOpen && autoFocus && popoverElement) {\n popoverElement.focus({ preventScroll: true });\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isOpen, popoverElement]);\n\n useEffect(() => {\n if (isOpen && forceUpdate) {\n forceUpdate();\n }\n }, [isOpen, forceUpdate]);\n\n const popoverGeneratedId = useId(null, 'popover-content');\n const popoverId = id \|\| popoverGeneratedId;\n\n const closeAndFocusTrigger = useCallback(() => {\n onClose?.();\n\n // setTimeout trick to make it work with focus-lock\n setTimeout(() => triggerElement?.focus({ preventScroll: true }), 0);\n }, [onClose, triggerElement]);\n\n const contextValue: PopoverContextType = useMemo(\n () => ({\n isOpen,\n usePortal,\n getTriggerProps: (_ref = null) => ({\n ref: mergeRefs(setTriggerElement, _ref),\n ['aria-expanded']: Boolean(isOpen),\n ['aria-controls']: popoverId,\n }),\n getPopoverProps: (_props = {}, _ref = null) => ({\n ...popperAttributes.popper,\n style: {\n ...(_props.style \|\| {}),\n ...popperStyles.popper,\n },\n ref: mergeRefs(setPopoverElement, _ref),\n id: popoverId,\n onBlur: (event: React.FocusEvent<HTMLDivElement>) => {\n if (_props.onBlur) {\n _props.onBlur(event);\n }\n\n if (!closeOnBlur) {\n return;\n }\n\n const relatedTarget = event.relatedTarget as Node;\n\n const targetIsPopover =\n popoverElement === relatedTarget \|\|\n popoverElement?.contains(relatedTarget);\n const targetIsTrigger =\n triggerElement === relatedTarget \|\|\n triggerElement?.contains(relatedTarget);\n\n if (targetIsPopover \|\| targetIsTrigger) {\n return;\n }\n\n onClose?.();\n },\n onKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => {\n if (_props.onKeyDown) {\n _props.onKeyDown(event);\n }\n\n if (closeOnEsc && event.key === 'Escape') {\n closeAndFocusTrigger();\n }\n },\n }),\n }),\n [\n isOpen,\n popperAttributes,\n popperStyles,\n usePortal,\n popoverId,\n closeOnEsc,\n closeOnBlur,\n popoverElement,\n triggerElement,\n closeAndFocusTrigger,\n onClose,\n ],\n );\n\n return (\n <PopoverContextProvider value={contextValue}>\n {children}\n </PopoverContextProvider>\n );\n}\n\n/\n Sets the popover width to the size of the trigger element.\n /\nconst sameWidth: Modifier<'sameWidth', any> = {\n name: 'sameWidth',\n enabled: true,\n phase: 'beforeWrite',\n requires: ['computeStyles'],\n fn: ({ state }) => {\n state.styles.popper.width = `${state.rects.reference.width}px`;\n },\n effect: ({ state }) => () => {\n const reference = state.elements.reference as HTMLElement;\n state.elements.popper.style.width = `${reference.offsetWidth}px`;\n },\n};\n","import React, { HTMLProps } from 'react';\n\nexport type PopoverContextType = {\n isOpen: boolean;\n usePortal: boolean;\n getPopoverProps: (\n _props: HTMLProps<HTMLDivElement>,\n _ref: React.Ref<HTMLDivElement>,\n ) => HTMLProps<HTMLDivElement>;\n getTriggerProps: (_ref: React.Ref<HTMLElement>) => HTMLProps<HTMLElement>;\n};\n\nconst PopoverContext = React.createContext<PopoverContextType \| undefined>(\n undefined,\n);\n\nexport const usePopoverContext = () => {\n const context = React.useContext(PopoverContext);\n\n if (context === undefined) {\n throw new Error(\n 'usePopoverContext must be used within a PopoverContextProvider',\n );\n }\n\n return context;\n};\n\nexport const PopoverContextProvider = PopoverContext.Provider;\n","import React from 'react';\nimport { cx } from 'emotion';\nimport {\n CommonProps,\n PropsWithHTMLElement,\n ExpandProps,\n} from '@contentful/f36-core';\nimport { usePopoverContext } from '../PopoverContext';\nimport { Portal } from '@contentful/f36-utils';\nimport { getPopoverContentStyles } from './PopoverContent.styles';\n\ninterface PopoverContentInternalProps extends CommonProps {\n children?: React.ReactNode;\n}\n\nexport type PopoverContentProps = PropsWithHTMLElement<\n PopoverContentInternalProps,\n 'div'\n>;\n\nconst _PopoverContent = (props: ExpandProps<PopoverContentProps>, ref) => {\n const {\n children,\n className,\n testId = 'cf-ui-popover-content',\n role = 'dialog',\n ...otherProps\n } = props;\n const { isOpen, getPopoverProps, usePortal } = usePopoverContext();\n\n const styles = getPopoverContentStyles(isOpen);\n\n const content = (\n <div\n {...otherProps}\n {...getPopoverProps(otherProps, ref)}\n className={cx(styles.container, className)}\n data-test-id={testId}\n tabIndex={-1}\n role={role}\n // specific attribute to mark that this element is absolute positioned\n // for internal contentful apps usage\n data-position-absolute\n >\n {children}\n </div>\n );\n\n return usePortal ? <Portal>{content}</Portal> : content;\n};\n\nexport const PopoverContent = React.forwardRef(_PopoverContent);\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getPopoverContentStyles = (isOpen: boolean) => ({\n container: css({\n display: isOpen ? 'initial' : 'none',\n background: tokens.colorWhite,\n border: 0,\n borderRadius: tokens.borderRadiusMedium,\n boxShadow: tokens.boxShadowDefault,\n zIndex: tokens.zIndexDropdown,\n '&:focus': {\n outline: 'none',\n },\n '&:focus-visible': {\n boxShadow: tokens.glowPrimary,\n },\n }),\n});\n","import React from 'react';\nimport { usePopoverContext } from '../PopoverContext';\n\nexport interface PopoverTriggerProps {\n children: React.ReactNode;\n}\n\n/\n PopoverTrigger opens the popover. It must be an interactive element.\n */\nexport const PopoverTrigger = (props: PopoverTriggerProps) => {\n const child = React.Children.only(props.children) as any;\n const { getTriggerProps } = usePopoverContext();\n\n return React.cloneElement(child, {\n ...getTriggerProps(child.ref),\n 'aria-haspopup': child.props['aria-haspopup'] ?? 'dialog',\n });\n};\n"],"names":["Popover","PopoverProps","PopoverTrigger","PopoverTriggerProps","PopoverContent","PopoverContentProps","OriginalPopover","CompoundPopover","Content","Trigger","React","useMemo","useState","useEffect","useCallback","useId","mergeRefs","ExpandProps","Placement","Modifier","PopoverContextProvider","PopoverContextType","usePopper","children","ReactNode","isFullWidth","isOpen","onClose","placement","isAutoalignmentEnabled","usePortal","closeOnBlur","closeOnEsc","autoFocus","id","offset","props","triggerElement","setTriggerElement","HTMLElement","popoverElement","setPopoverElement","attributes","popperAttributes","forceUpdate","styles","popperStyles","modifiers","name","options","sameWidth","enabled","mainAxis","focus","preventScroll","popoverGeneratedId","popoverId","closeAndFocusTrigger","setTimeout","contextValue","getTriggerProps","_ref","ref","Boolean","getPopoverProps","_props","popper","style","onBlur","event","FocusEvent","HTMLDivElement","relatedTarget","Node","targetIsPopover","contains","targetIsTrigger","onKeyDown","KeyboardEvent","key","phase","requires","fn","state","width","rects","reference","effect","elements","offsetWidth","HTMLProps","Ref","PopoverContext","createContext","undefined","usePopoverContext","context","useContext","Error","Provider","CommonProps","PropsWithHTMLElement","Portal","getPopoverContentStyles","PopoverContentInternalProps","_PopoverContent","className","testId","role","otherProps","content","container","forwardRef","tokens","display","background","colorWhite","border","borderRadius","borderRadiusMedium","boxShadow","boxShadowDefault","zIndex","zIndexDropdown","outline","glowPrimary","child","Children","only","cloneElement"],"version":3,"file":"module.js.map"}
1	+ {"mappings":"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","sources":["packages/components/popover/src/index.ts","packages/components/popover/src/CompoundPopover.tsx","packages/components/popover/src/Popover.tsx","packages/components/popover/src/PopoverContext.ts","packages/components/popover/src/PopoverContent/PopoverContent.tsx","packages/components/popover/src/PopoverContent/PopoverContent.styles.ts","packages/components/popover/src/PopoverTrigger/PopoverTrigger.tsx"],"sourcesContent":["export { Popover } from './CompoundPopover';\nexport type { PopoverProps } from './Popover';\nexport { PopoverTrigger } from './PopoverTrigger/PopoverTrigger';\nexport type { PopoverTriggerProps } from './PopoverTrigger/PopoverTrigger';\nexport { PopoverContent } from './PopoverContent/PopoverContent';\nexport type { PopoverContentProps } from './PopoverContent/PopoverContent';\n","import { Popover as OriginalPopover } from './Popover';\nimport { PopoverContent } from './PopoverContent/PopoverContent';\nimport { PopoverTrigger } from './PopoverTrigger/PopoverTrigger';\n\ntype CompoundPopover = typeof OriginalPopover & {\n Content: typeof PopoverContent;\n Trigger: typeof PopoverTrigger;\n};\n\nexport const Popover = OriginalPopover as CompoundPopover;\nPopover.Content = PopoverContent;\nPopover.Trigger = PopoverTrigger;\n","import React, { useMemo, useState, useEffect, useCallback } from 'react';\nimport { useId, mergeRefs, ExpandProps } from '@contentful/f36-core';\nimport { Placement, Modifier } from '@popperjs/core';\nimport { PopoverContextProvider, PopoverContextType } from './PopoverContext';\nimport { usePopper } from 'react-popper';\n\nexport interface PopoverProps {\n children: React.ReactNode;\n\n /*\n Boolean to determine if the Popover should be the same width as\n * the trigger element\n \n @default false\n /\n isFullWidth?: boolean;\n\n /\n Boolean to control whether or not the Popover is open\n \n @default false\n /\n isOpen?: boolean;\n\n /\n Callback fired when the popover closes\n /\n onClose?: () => void;\n\n /\n Determines the preferred position of the Popover. This position is not\n * guaranteed, as the Popover might be moved to fit the viewport\n \n @default bottom-start\n /\n placement?: Placement;\n\n /\n Boolean to control if popover is allowed to change its placement automatically\n * based on available space in the viewport.\n \n For example:\n * If you set placement prop to bottom, but there isn't enough space to position the popover in that direction,\n * it will change the popper placement to top. As soon as enough space is detected, the placement will be reverted to the defined one.\n \n If you want the popover to strictly follow the placement prop you should set this prop to false.\n \n @default true\n /\n isAutoalignmentEnabled?: boolean;\n\n /\n Boolean to control whether or not to render the Popover in a React Portal.\n * Rendering content inside a Portal allows the Popover to escape the bounds\n * of its parent while still being positioned correctly. Using a Portal is\n * necessary if an ancestor of the Popover hides overflow.\n \n @default true\n /\n usePortal?: boolean;\n\n /\n If true, the popover will close when you blur out it by clicking outside or tabbing out\n \n @default true\n /\n closeOnBlur?: boolean;\n\n /\n If true, the popover will close when you hit the Esc key\n \n @default true\n /\n closeOnEsc?: boolean;\n\n /\n If true, the popover will be focused after opening\n \n @default true\n /\n autoFocus?: boolean;\n\n /\n Popover id. Will be used as an `id` attribute on popover\n * and as `aria-controls` attribute on trigger\n \n @default true\n /\n id?: string;\n\n /\n The `X-axis` and `Y-axis` offset to position popper element\n * from its trigger element. `[X, Y]`\n \n @default [1, 4]\n /\n offset?: [number, number];\n}\n\nexport function Popover(props: ExpandProps<PopoverProps>) {\n const {\n children,\n isOpen,\n placement = 'bottom-start',\n isFullWidth = false,\n isAutoalignmentEnabled = true,\n usePortal = true,\n closeOnBlur = true,\n closeOnEsc = true,\n onClose,\n autoFocus = true,\n id,\n offset = [1, 4],\n } = props;\n\n const [triggerElement, setTriggerElement] = useState<HTMLElement \| null>(\n null,\n );\n const [popoverElement, setPopoverElement] = useState<HTMLElement \| null>(\n null,\n );\n\n const {\n attributes: popperAttributes,\n forceUpdate,\n styles: popperStyles,\n } = usePopper(triggerElement, popoverElement, {\n placement,\n modifiers: [\n {\n name: 'offset',\n options: {\n offset,\n },\n },\n {\n ...sameWidth,\n enabled: isFullWidth,\n },\n {\n name: 'preventOverflow',\n enabled: isAutoalignmentEnabled,\n options: {\n mainAxis: true,\n },\n },\n {\n name: 'flip',\n enabled: isAutoalignmentEnabled,\n },\n ],\n });\n\n useEffect(() => {\n if (isOpen && autoFocus && popoverElement) {\n popoverElement.focus({ preventScroll: true });\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isOpen, popoverElement]);\n\n useEffect(() => {\n if (isOpen && forceUpdate) {\n forceUpdate();\n }\n }, [isOpen, forceUpdate]);\n\n const popoverGeneratedId = useId(null, 'popover-content');\n const popoverId = id \|\| popoverGeneratedId;\n\n const closeAndFocusTrigger = useCallback(() => {\n onClose?.();\n\n // setTimeout trick to make it work with focus-lock\n setTimeout(() => triggerElement?.focus({ preventScroll: true }), 0);\n }, [onClose, triggerElement]);\n\n const contextValue: PopoverContextType = useMemo(\n () => ({\n isOpen,\n usePortal,\n getTriggerProps: (_ref = null) => ({\n ref: mergeRefs(setTriggerElement, _ref),\n ['aria-expanded']: Boolean(isOpen),\n ['aria-controls']: popoverId,\n }),\n getPopoverProps: (_props = {}, _ref = null) => ({\n ...popperAttributes.popper,\n style: {\n ...(_props.style \|\| {}),\n ...popperStyles.popper,\n },\n ref: mergeRefs(setPopoverElement, _ref),\n id: popoverId,\n onBlur: (event: React.FocusEvent<HTMLDivElement>) => {\n if (_props.onBlur) {\n _props.onBlur(event);\n }\n\n if (!closeOnBlur) {\n return;\n }\n\n const relatedTarget = event.relatedTarget as Node;\n\n const targetIsPopover =\n popoverElement === relatedTarget \|\|\n popoverElement?.contains(relatedTarget);\n const targetIsTrigger =\n triggerElement === relatedTarget \|\|\n triggerElement?.contains(relatedTarget);\n\n if (targetIsPopover \|\| targetIsTrigger) {\n return;\n }\n\n onClose?.();\n },\n onKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => {\n if (_props.onKeyDown) {\n _props.onKeyDown(event);\n }\n\n if (closeOnEsc && event.key === 'Escape') {\n closeAndFocusTrigger();\n }\n },\n }),\n }),\n [\n isOpen,\n popperAttributes,\n popperStyles,\n usePortal,\n popoverId,\n closeOnEsc,\n closeOnBlur,\n popoverElement,\n triggerElement,\n closeAndFocusTrigger,\n onClose,\n ],\n );\n\n return (\n <PopoverContextProvider value={contextValue}>\n {children}\n </PopoverContextProvider>\n );\n}\n\n/\n Sets the popover width to the size of the trigger element.\n /\nconst sameWidth: Modifier<'sameWidth', any> = {\n name: 'sameWidth',\n enabled: true,\n phase: 'beforeWrite',\n requires: ['computeStyles'],\n fn: ({ state }) => {\n state.styles.popper.width = `${state.rects.reference.width}px`;\n },\n effect: ({ state }) => () => {\n const reference = state.elements.reference as HTMLElement;\n state.elements.popper.style.width = `${reference.offsetWidth}px`;\n },\n};\n","import React, { HTMLProps } from 'react';\n\nexport type PopoverContextType = {\n isOpen: boolean;\n usePortal: boolean;\n getPopoverProps: (\n _props: HTMLProps<HTMLDivElement>,\n _ref: React.Ref<HTMLDivElement>,\n ) => HTMLProps<HTMLDivElement>;\n getTriggerProps: (_ref: React.Ref<HTMLElement>) => HTMLProps<HTMLElement>;\n};\n\nconst PopoverContext = React.createContext<PopoverContextType \| undefined>(\n undefined,\n);\n\nexport const usePopoverContext = () => {\n const context = React.useContext(PopoverContext);\n\n if (context === undefined) {\n throw new Error(\n 'usePopoverContext must be used within a PopoverContextProvider',\n );\n }\n\n return context;\n};\n\nexport const PopoverContextProvider = PopoverContext.Provider;\n","import React from 'react';\nimport { cx } from 'emotion';\nimport {\n CommonProps,\n PropsWithHTMLElement,\n ExpandProps,\n} from '@contentful/f36-core';\nimport { usePopoverContext } from '../PopoverContext';\nimport { Portal } from '@contentful/f36-utils';\nimport { getPopoverContentStyles } from './PopoverContent.styles';\n\ninterface PopoverContentInternalProps extends CommonProps {\n children?: React.ReactNode;\n}\n\nexport type PopoverContentProps = PropsWithHTMLElement<\n PopoverContentInternalProps,\n 'div'\n>;\n\nconst _PopoverContent = (props: ExpandProps<PopoverContentProps>, ref) => {\n const {\n children,\n className,\n testId = 'cf-ui-popover-content',\n role = 'dialog',\n ...otherProps\n } = props;\n const { isOpen, getPopoverProps, usePortal } = usePopoverContext();\n\n const styles = getPopoverContentStyles(isOpen);\n\n const content = (\n <div\n {...otherProps}\n {...getPopoverProps(otherProps, ref)}\n className={cx(styles.container, className)}\n data-test-id={testId}\n tabIndex={-1}\n role={role}\n // specific attribute to mark that this element is absolute positioned\n // for internal contentful apps usage\n data-position-absolute\n >\n {children}\n </div>\n );\n\n return usePortal ? <Portal>{content}</Portal> : content;\n};\n\nexport const PopoverContent = React.forwardRef(_PopoverContent);\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getPopoverContentStyles = (isOpen: boolean) => ({\n container: css({\n display: isOpen ? 'initial' : 'none',\n background: tokens.colorWhite,\n border: 0,\n borderRadius: tokens.borderRadiusMedium,\n boxShadow: tokens.boxShadowDefault,\n zIndex: tokens.zIndexDropdown,\n '&:focus': {\n boxShadow: tokens.glowPrimary,\n outline: 'none',\n },\n '&:focus:not(:focus-visible)': {\n boxShadow: tokens.boxShadowDefault,\n },\n }),\n});\n","import React from 'react';\nimport { usePopoverContext } from '../PopoverContext';\n\nexport interface PopoverTriggerProps {\n children: React.ReactNode;\n}\n\n/\n PopoverTrigger opens the popover. It must be an interactive element.\n */\nexport const PopoverTrigger = (props: PopoverTriggerProps) => {\n const child = React.Children.only(props.children) as any;\n const { getTriggerProps } = usePopoverContext();\n\n return React.cloneElement(child, {\n ...getTriggerProps(child.ref),\n 'aria-haspopup': child.props['aria-haspopup'] ?? 'dialog',\n });\n};\n"],"names":["Popover","PopoverProps","PopoverTrigger","PopoverTriggerProps","PopoverContent","PopoverContentProps","OriginalPopover","CompoundPopover","Content","Trigger","React","useMemo","useState","useEffect","useCallback","useId","mergeRefs","ExpandProps","Placement","Modifier","PopoverContextProvider","PopoverContextType","usePopper","children","ReactNode","isFullWidth","isOpen","onClose","placement","isAutoalignmentEnabled","usePortal","closeOnBlur","closeOnEsc","autoFocus","id","offset","props","triggerElement","setTriggerElement","HTMLElement","popoverElement","setPopoverElement","attributes","popperAttributes","forceUpdate","styles","popperStyles","modifiers","name","options","sameWidth","enabled","mainAxis","focus","preventScroll","popoverGeneratedId","popoverId","closeAndFocusTrigger","setTimeout","contextValue","getTriggerProps","_ref","ref","Boolean","getPopoverProps","_props","popper","style","onBlur","event","FocusEvent","HTMLDivElement","relatedTarget","Node","targetIsPopover","contains","targetIsTrigger","onKeyDown","KeyboardEvent","key","phase","requires","fn","state","width","rects","reference","effect","elements","offsetWidth","HTMLProps","Ref","PopoverContext","createContext","undefined","usePopoverContext","context","useContext","Error","Provider","CommonProps","PropsWithHTMLElement","Portal","getPopoverContentStyles","PopoverContentInternalProps","_PopoverContent","className","testId","role","otherProps","content","container","forwardRef","tokens","display","background","colorWhite","border","borderRadius","borderRadiusMedium","boxShadow","boxShadowDefault","zIndex","zIndexDropdown","glowPrimary","outline","child","Children","only","cloneElement"],"version":3,"file":"module.js.map"}

package/dist/types.d.ts CHANGED Viewed

File without changes

package/dist/types.d.ts.map CHANGED Viewed

File without changes

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/f36-popover",
-  "version": "4.0.1",
+  "version": "4.1.0",
   "description": "Forma 36: Popover component",
   "scripts": {
     "build": "parcel build"
@@ -34,5 +34,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "cee6bd9ae0b1ca2ce23d42873d9344a20fe740d0"
+  "gitHead": "1233b527fe40be14bbeccf8c9693eb338bed6ab5"
 }