@contentful/f36-popover 4.0.1 → 4.2.0

package/CHANGELOG.md

@@ -3,6 +3,49 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [4.2.0](https://github.com/contentful/forma-36/compare/@contentful/f36-popover@4.1.2...@contentful/f36-popover@4.2.0) (2022-02-09)
+
+
+### Features
+
+* by default render Popover only when it's open ([#1873](https://github.com/contentful/forma-36/issues/1873)) ([48a511b](https://github.com/contentful/forma-36/commit/48a511bc48c17d3e4bf0cbfb8d16da8c3cbc29b2))
+
+
+
+
+
+## [4.1.2](https://github.com/contentful/forma-36/compare/@contentful/f36-popover@4.1.1...@contentful/f36-popover@4.1.2) (2022-01-31)
+
+**Note:** Version bump only for package @contentful/f36-popover
+
+
+
+
+
+## [4.1.1](https://github.com/contentful/forma-36/compare/@contentful/f36-popover@4.1.0...@contentful/f36-popover@4.1.1) (2022-01-31)
+
+**Note:** Version bump only for package @contentful/f36-popover
+
+
+
+
+
+# [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

@@ -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

@@ -32,7 +32,7 @@ function $ed3840333e471e4e$export$5b6b19405a83ff9d(props) {
     const { children: children , isOpen: isOpen , placement: placement = 'bottom-start' , isFullWidth: isFullWidth = false , isAutoalignmentEnabled: isAutoalignmentEnabled = true , usePortal: usePortal = true , closeOnBlur: closeOnBlur = true , closeOnEsc: closeOnEsc = true , onClose: onClose , autoFocus: autoFocus = true , id: id , offset: offset = [
         1,
         4
-    ]  } = props;
+    ] , renderOnlyWhenOpen: renderOnlyWhenOpen = true  } = props;
     const [triggerElement, setTriggerElement] = $36WSQ$react.useState(null);
     const [popoverElement, setPopoverElement] = $36WSQ$react.useState(null);
     const { attributes: popperAttributes , forceUpdate: forceUpdate , styles: popperStyles  } = $36WSQ$reactpopper.usePopper(triggerElement, popoverElement, {
@@ -93,6 +93,7 @@ function $ed3840333e471e4e$export$5b6b19405a83ff9d(props) {
         return {
             isOpen: isOpen,
             usePortal: usePortal,
+            renderOnlyWhenOpen: renderOnlyWhenOpen,
             getTriggerProps: (_ref = null)=>({
                     ref: $36WSQ$contentfulf36core.mergeRefs(setTriggerElement, _ref),
                     ['aria-expanded']: Boolean(isOpen),
@@ -128,6 +129,7 @@ function $ed3840333e471e4e$export$5b6b19405a83ff9d(props) {
         };
     }, [
         isOpen,
+        renderOnlyWhenOpen,
         popperAttributes,
         popperStyles,
         usePortal,
@@ -177,10 +179,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
             }
         })
     })
@@ -189,7 +192,7 @@ const $ac842fe302ff665f$export$fbd764fe961047f7 = (isOpen)=>({
 
 const $ec6b27dd96eb674c$var$_PopoverContent = (props, ref)=>{
     const { children: children , className: className , testId: testId = 'cf-ui-popover-content' , role: role = 'dialog' , ...otherProps } = props;
-    const { isOpen: isOpen , getPopoverProps: getPopoverProps , usePortal: usePortal  } = $a5e54ab4533eb4d3$export$1468d0761b26e6c8();
+    const { isOpen: isOpen , renderOnlyWhenOpen: renderOnlyWhenOpen , getPopoverProps: getPopoverProps , usePortal: usePortal  } = $a5e54ab4533eb4d3$export$1468d0761b26e6c8();
     const styles = $ac842fe302ff665f$export$fbd764fe961047f7(isOpen);
     const content = /*#__PURE__*/ ($parcel$interopDefault($36WSQ$react)).createElement("div", {
         ...otherProps,
@@ -201,6 +204,7 @@ const $ec6b27dd96eb674c$var$_PopoverContent = (props, ref)=>{
         // for internal contentful apps usage
         "data-position-absolute": true
     }, children);
+    if (renderOnlyWhenOpen && !isOpen) return null;
     return usePortal ? /*#__PURE__*/ ($parcel$interopDefault($36WSQ$react)).createElement($36WSQ$contentfulf36utils.Portal, null, content) : content;
 };
 const $ec6b27dd96eb674c$export$d7e1f420b25549ff = /*#__PURE__*/ ($parcel$interopDefault($36WSQ$react)).forwardRef($ec6b27dd96eb674c$var$_PopoverContent);

package/dist/main.js.map

@@ -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"}
+{"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  /**\n   * Defines if popover should be rendered in the DOM only when it's open\n   * or all the time (after the component has been mounted)\n   *\n   * @default true\n   */\n  renderOnlyWhenOpen?: boolean;\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    renderOnlyWhenOpen = true,\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      renderOnlyWhenOpen,\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      renderOnlyWhenOpen,\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  renderOnlyWhenOpen: 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 {\n    isOpen,\n    renderOnlyWhenOpen,\n    getPopoverProps,\n    usePortal,\n  } = 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  if (renderOnlyWhenOpen && !isOpen) {\n    return null;\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","renderOnlyWhenOpen","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

@@ -22,7 +22,7 @@ function $fd548c9231cfa260$export$5b6b19405a83ff9d(props) {
     const { children: children , isOpen: isOpen , placement: placement = 'bottom-start' , isFullWidth: isFullWidth = false , isAutoalignmentEnabled: isAutoalignmentEnabled = true , usePortal: usePortal = true , closeOnBlur: closeOnBlur = true , closeOnEsc: closeOnEsc = true , onClose: onClose , autoFocus: autoFocus = true , id: id , offset: offset = [
         1,
         4
-    ]  } = props;
+    ] , renderOnlyWhenOpen: renderOnlyWhenOpen = true  } = props;
     const [triggerElement, setTriggerElement] = $hYGFM$useState(null);
     const [popoverElement, setPopoverElement] = $hYGFM$useState(null);
     const { attributes: popperAttributes , forceUpdate: forceUpdate , styles: popperStyles  } = $hYGFM$usePopper(triggerElement, popoverElement, {
@@ -83,6 +83,7 @@ function $fd548c9231cfa260$export$5b6b19405a83ff9d(props) {
         return {
             isOpen: isOpen,
             usePortal: usePortal,
+            renderOnlyWhenOpen: renderOnlyWhenOpen,
             getTriggerProps: (_ref = null)=>({
                     ref: $hYGFM$mergeRefs(setTriggerElement, _ref),
                     ['aria-expanded']: Boolean(isOpen),
@@ -118,6 +119,7 @@ function $fd548c9231cfa260$export$5b6b19405a83ff9d(props) {
         };
     }, [
         isOpen,
+        renderOnlyWhenOpen,
         popperAttributes,
         popperStyles,
         usePortal,
@@ -167,10 +169,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
             }
         })
     })
@@ -179,7 +182,7 @@ const $8a165eef2449d46a$export$fbd764fe961047f7 = (isOpen)=>({
 
 const $249e5486684b1d2a$var$_PopoverContent = (props, ref)=>{
     const { children: children , className: className , testId: testId = 'cf-ui-popover-content' , role: role = 'dialog' , ...otherProps } = props;
-    const { isOpen: isOpen , getPopoverProps: getPopoverProps , usePortal: usePortal  } = $8c1b76e1106abdf5$export$1468d0761b26e6c8();
+    const { isOpen: isOpen , renderOnlyWhenOpen: renderOnlyWhenOpen , getPopoverProps: getPopoverProps , usePortal: usePortal  } = $8c1b76e1106abdf5$export$1468d0761b26e6c8();
     const styles = $8a165eef2449d46a$export$fbd764fe961047f7(isOpen);
     const content = /*#__PURE__*/ $hYGFM$react.createElement("div", {
         ...otherProps,
@@ -191,6 +194,7 @@ const $249e5486684b1d2a$var$_PopoverContent = (props, ref)=>{
         // for internal contentful apps usage
         "data-position-absolute": true
     }, children);
+    if (renderOnlyWhenOpen && !isOpen) return null;
     return usePortal ? /*#__PURE__*/ $hYGFM$react.createElement($hYGFM$Portal, null, content) : content;
 };
 const $249e5486684b1d2a$export$d7e1f420b25549ff = /*#__PURE__*/ $hYGFM$react.forwardRef($249e5486684b1d2a$var$_PopoverContent);

package/dist/module.js.map

@@ -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"}
+{"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  /**\n   * Defines if popover should be rendered in the DOM only when it's open\n   * or all the time (after the component has been mounted)\n   *\n   * @default true\n   */\n  renderOnlyWhenOpen?: boolean;\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    renderOnlyWhenOpen = true,\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      renderOnlyWhenOpen,\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      renderOnlyWhenOpen,\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  renderOnlyWhenOpen: 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 {\n    isOpen,\n    renderOnlyWhenOpen,\n    getPopoverProps,\n    usePortal,\n  } = 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  if (renderOnlyWhenOpen && !isOpen) {\n    return null;\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","renderOnlyWhenOpen","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

@@ -81,272 +81,20 @@ export interface PopoverProps {
      * @default [1, 4]
      */
     offset?: [number, number];
+    /**
+     * Defines if popover should be rendered in the DOM only when it's open
+     * or all the time (after the component has been mounted)
+     *
+     * @default true
+     */
+    renderOnlyWhenOpen?: boolean;
 }
 declare function _Popover1(props: ExpandProps<PopoverProps>): JSX.Element;
 interface PopoverContentInternalProps extends CommonProps {
     children?: React.ReactNode;
 }
 export type PopoverContentProps = PropsWithHTMLElement<PopoverContentInternalProps, 'div'>;
-export const PopoverContent: React.ForwardRefExoticComponent<{
-    id?: string;
-    'aria-expanded'?: boolean | "false" | "true";
-    'aria-controls'?: string;
-    hidden?: boolean;
-    color?: string;
-    slot?: string;
-    title?: string;
-    translate?: "yes" | "no";
-    key?: React.Key;
-    defaultChecked?: boolean;
-    defaultValue?: string | number | readonly string[];
-    suppressContentEditableWarning?: boolean;
-    suppressHydrationWarning?: boolean;
-    accessKey?: string;
-    contentEditable?: "inherit" | (boolean | "false" | "true");
-    contextMenu?: string;
-    dir?: string;
-    draggable?: boolean | "false" | "true";
-    lang?: string;
-    placeholder?: string;
-    spellCheck?: boolean | "false" | "true";
-    tabIndex?: number;
-    radioGroup?: string;
-    role?: string;
-    about?: string;
-    datatype?: string;
-    inlist?: any;
-    prefix?: string;
-    property?: string;
-    resource?: string;
-    typeof?: string;
-    vocab?: string;
-    autoCapitalize?: string;
-    autoCorrect?: string;
-    autoSave?: string;
-    itemProp?: string;
-    itemScope?: boolean;
-    itemType?: string;
-    itemID?: string;
-    itemRef?: string;
-    results?: number;
-    security?: string;
-    unselectable?: "on" | "off";
-    inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search";
-    is?: string;
-    'aria-activedescendant'?: string;
-    'aria-atomic'?: boolean | "false" | "true";
-    'aria-autocomplete'?: "both" | "none" | "inline" | "list";
-    'aria-busy'?: boolean | "false" | "true";
-    'aria-checked'?: boolean | "false" | "true" | "mixed";
-    'aria-colcount'?: number;
-    'aria-colindex'?: number;
-    'aria-colspan'?: number;
-    'aria-current'?: boolean | "false" | "true" | "page" | "time" | "step" | "location" | "date";
-    'aria-describedby'?: string;
-    'aria-details'?: string;
-    'aria-disabled'?: boolean | "false" | "true";
-    'aria-dropeffect'?: "none" | "copy" | "move" | "link" | "execute" | "popup";
-    'aria-errormessage'?: string;
-    'aria-flowto'?: string;
-    'aria-grabbed'?: boolean | "false" | "true";
-    'aria-haspopup'?: boolean | "false" | "true" | "listbox" | "grid" | "menu" | "dialog" | "tree";
-    'aria-hidden'?: boolean | "false" | "true";
-    'aria-invalid'?: boolean | "false" | "true" | "grammar" | "spelling";
-    'aria-keyshortcuts'?: string;
-    'aria-label'?: string;
-    'aria-labelledby'?: string;
-    'aria-level'?: number;
-    'aria-live'?: "off" | "assertive" | "polite";
-    'aria-modal'?: boolean | "false" | "true";
-    'aria-multiline'?: boolean | "false" | "true";
-    'aria-multiselectable'?: boolean | "false" | "true";
-    'aria-orientation'?: "horizontal" | "vertical";
-    'aria-owns'?: string;
-    'aria-placeholder'?: string;
-    'aria-posinset'?: number;
-    'aria-pressed'?: boolean | "false" | "true" | "mixed";
-    'aria-readonly'?: boolean | "false" | "true";
-    'aria-relevant'?: "all" | "text" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals";
-    'aria-required'?: boolean | "false" | "true";
-    'aria-roledescription'?: string;
-    'aria-rowcount'?: number;
-    'aria-rowindex'?: number;
-    'aria-rowspan'?: number;
-    'aria-selected'?: boolean | "false" | "true";
-    'aria-setsize'?: number;
-    'aria-sort'?: "none" | "ascending" | "descending" | "other";
-    'aria-valuemax'?: number;
-    'aria-valuemin'?: number;
-    'aria-valuenow'?: number;
-    'aria-valuetext'?: string;
-    dangerouslySetInnerHTML?: {
-        __html: string;
-    };
-    onCopy?: React.ClipboardEventHandler<HTMLDivElement>;
-    onCopyCapture?: React.ClipboardEventHandler<HTMLDivElement>;
-    onCut?: React.ClipboardEventHandler<HTMLDivElement>;
-    onCutCapture?: React.ClipboardEventHandler<HTMLDivElement>;
-    onPaste?: React.ClipboardEventHandler<HTMLDivElement>;
-    onPasteCapture?: React.ClipboardEventHandler<HTMLDivElement>;
-    onCompositionEnd?: React.CompositionEventHandler<HTMLDivElement>;
-    onCompositionEndCapture?: React.CompositionEventHandler<HTMLDivElement>;
-    onCompositionStart?: React.CompositionEventHandler<HTMLDivElement>;
-    onCompositionStartCapture?: React.CompositionEventHandler<HTMLDivElement>;
-    onCompositionUpdate?: React.CompositionEventHandler<HTMLDivElement>;
-    onCompositionUpdateCapture?: React.CompositionEventHandler<HTMLDivElement>;
-    onFocus?: React.FocusEventHandler<HTMLDivElement>;
-    onFocusCapture?: React.FocusEventHandler<HTMLDivElement>;
-    onBlur?: React.FocusEventHandler<HTMLDivElement>;
-    onBlurCapture?: React.FocusEventHandler<HTMLDivElement>;
-    onChange?: React.FormEventHandler<HTMLDivElement>;
-    onChangeCapture?: React.FormEventHandler<HTMLDivElement>;
-    onBeforeInput?: React.FormEventHandler<HTMLDivElement>;
-    onBeforeInputCapture?: React.FormEventHandler<HTMLDivElement>;
-    onInput?: React.FormEventHandler<HTMLDivElement>;
-    onInputCapture?: React.FormEventHandler<HTMLDivElement>;
-    onReset?: React.FormEventHandler<HTMLDivElement>;
-    onResetCapture?: React.FormEventHandler<HTMLDivElement>;
-    onSubmit?: React.FormEventHandler<HTMLDivElement>;
-    onSubmitCapture?: React.FormEventHandler<HTMLDivElement>;
-    onInvalid?: React.FormEventHandler<HTMLDivElement>;
-    onInvalidCapture?: React.FormEventHandler<HTMLDivElement>;
-    onLoad?: React.ReactEventHandler<HTMLDivElement>;
-    onLoadCapture?: React.ReactEventHandler<HTMLDivElement>;
-    onError?: React.ReactEventHandler<HTMLDivElement>;
-    onErrorCapture?: React.ReactEventHandler<HTMLDivElement>;
-    onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
-    onKeyDownCapture?: React.KeyboardEventHandler<HTMLDivElement>;
-    onKeyPress?: React.KeyboardEventHandler<HTMLDivElement>;
-    onKeyPressCapture?: React.KeyboardEventHandler<HTMLDivElement>;
-    onKeyUp?: React.KeyboardEventHandler<HTMLDivElement>;
-    onKeyUpCapture?: React.KeyboardEventHandler<HTMLDivElement>;
-    onAbort?: React.ReactEventHandler<HTMLDivElement>;
-    onAbortCapture?: React.ReactEventHandler<HTMLDivElement>;
-    onCanPlay?: React.ReactEventHandler<HTMLDivElement>;
-    onCanPlayCapture?: React.ReactEventHandler<HTMLDivElement>;
-    onCanPlayThrough?: React.ReactEventHandler<HTMLDivElement>;
-    onCanPlayThroughCapture?: React.ReactEventHandler<HTMLDivElement>;
-    onDurationChange?: React.ReactEventHandler<HTMLDivElement>;
-    onDurationChangeCapture?: React.ReactEventHandler<HTMLDivElement>;
-    onEmptied?: React.ReactEventHandler<HTMLDivElement>;
-    onEmptiedCapture?: React.ReactEventHandler<HTMLDivElement>;
-    onEncrypted?: React.ReactEventHandler<HTMLDivElement>;
-    onEncryptedCapture?: React.ReactEventHandler<HTMLDivElement>;
-    onEnded?: React.ReactEventHandler<HTMLDivElement>;
-    onEndedCapture?: React.ReactEventHandler<HTMLDivElement>;
-    onLoadedData?: React.ReactEventHandler<HTMLDivElement>;
-    onLoadedDataCapture?: React.ReactEventHandler<HTMLDivElement>;
-    onLoadedMetadata?: React.ReactEventHandler<HTMLDivElement>;
-    onLoadedMetadataCapture?: React.ReactEventHandler<HTMLDivElement>;
-    onLoadStart?: React.ReactEventHandler<HTMLDivElement>;
-    onLoadStartCapture?: React.ReactEventHandler<HTMLDivElement>;
-    onPause?: React.ReactEventHandler<HTMLDivElement>;
-    onPauseCapture?: React.ReactEventHandler<HTMLDivElement>;
-    onPlay?: React.ReactEventHandler<HTMLDivElement>;
-    onPlayCapture?: React.ReactEventHandler<HTMLDivElement>;
-    onPlaying?: React.ReactEventHandler<HTMLDivElement>;
-    onPlayingCapture?: React.ReactEventHandler<HTMLDivElement>;
-    onProgress?: React.ReactEventHandler<HTMLDivElement>;
-    onProgressCapture?: React.ReactEventHandler<HTMLDivElement>;
-    onRateChange?: React.ReactEventHandler<HTMLDivElement>;
-    onRateChangeCapture?: React.ReactEventHandler<HTMLDivElement>;
-    onSeeked?: React.ReactEventHandler<HTMLDivElement>;
-    onSeekedCapture?: React.ReactEventHandler<HTMLDivElement>;
-    onSeeking?: React.ReactEventHandler<HTMLDivElement>;
-    onSeekingCapture?: React.ReactEventHandler<HTMLDivElement>;
-    onStalled?: React.ReactEventHandler<HTMLDivElement>;
-    onStalledCapture?: React.ReactEventHandler<HTMLDivElement>;
-    onSuspend?: React.ReactEventHandler<HTMLDivElement>;
-    onSuspendCapture?: React.ReactEventHandler<HTMLDivElement>;
-    onTimeUpdate?: React.ReactEventHandler<HTMLDivElement>;
-    onTimeUpdateCapture?: React.ReactEventHandler<HTMLDivElement>;
-    onVolumeChange?: React.ReactEventHandler<HTMLDivElement>;
-    onVolumeChangeCapture?: React.ReactEventHandler<HTMLDivElement>;
-    onWaiting?: React.ReactEventHandler<HTMLDivElement>;
-    onWaitingCapture?: React.ReactEventHandler<HTMLDivElement>;
-    onAuxClick?: React.MouseEventHandler<HTMLDivElement>;
-    onAuxClickCapture?: React.MouseEventHandler<HTMLDivElement>;
-    onClick?: React.MouseEventHandler<HTMLDivElement>;
-    onClickCapture?: React.MouseEventHandler<HTMLDivElement>;
-    onContextMenu?: React.MouseEventHandler<HTMLDivElement>;
-    onContextMenuCapture?: React.MouseEventHandler<HTMLDivElement>;
-    onDoubleClick?: React.MouseEventHandler<HTMLDivElement>;
-    onDoubleClickCapture?: React.MouseEventHandler<HTMLDivElement>;
-    onDrag?: React.DragEventHandler<HTMLDivElement>;
-    onDragCapture?: React.DragEventHandler<HTMLDivElement>;
-    onDragEnd?: React.DragEventHandler<HTMLDivElement>;
-    onDragEndCapture?: React.DragEventHandler<HTMLDivElement>;
-    onDragEnter?: React.DragEventHandler<HTMLDivElement>;
-    onDragEnterCapture?: React.DragEventHandler<HTMLDivElement>;
-    onDragExit?: React.DragEventHandler<HTMLDivElement>;
-    onDragExitCapture?: React.DragEventHandler<HTMLDivElement>;
-    onDragLeave?: React.DragEventHandler<HTMLDivElement>;
-    onDragLeaveCapture?: React.DragEventHandler<HTMLDivElement>;
-    onDragOver?: React.DragEventHandler<HTMLDivElement>;
-    onDragOverCapture?: React.DragEventHandler<HTMLDivElement>;
-    onDragStart?: React.DragEventHandler<HTMLDivElement>;
-    onDragStartCapture?: React.DragEventHandler<HTMLDivElement>;
-    onDrop?: React.DragEventHandler<HTMLDivElement>;
-    onDropCapture?: React.DragEventHandler<HTMLDivElement>;
-    onMouseDown?: React.MouseEventHandler<HTMLDivElement>;
-    onMouseDownCapture?: React.MouseEventHandler<HTMLDivElement>;
-    onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
-    onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;
-    onMouseMove?: React.MouseEventHandler<HTMLDivElement>;
-    onMouseMoveCapture?: React.MouseEventHandler<HTMLDivElement>;
-    onMouseOut?: React.MouseEventHandler<HTMLDivElement>;
-    onMouseOutCapture?: React.MouseEventHandler<HTMLDivElement>;
-    onMouseOver?: React.MouseEventHandler<HTMLDivElement>;
-    onMouseOverCapture?: React.MouseEventHandler<HTMLDivElement>;
-    onMouseUp?: React.MouseEventHandler<HTMLDivElement>;
-    onMouseUpCapture?: React.MouseEventHandler<HTMLDivElement>;
-    onSelect?: React.ReactEventHandler<HTMLDivElement>;
-    onSelectCapture?: React.ReactEventHandler<HTMLDivElement>;
-    onTouchCancel?: React.TouchEventHandler<HTMLDivElement>;
-    onTouchCancelCapture?: React.TouchEventHandler<HTMLDivElement>;
-    onTouchEnd?: React.TouchEventHandler<HTMLDivElement>;
-    onTouchEndCapture?: React.TouchEventHandler<HTMLDivElement>;
-    onTouchMove?: React.TouchEventHandler<HTMLDivElement>;
-    onTouchMoveCapture?: React.TouchEventHandler<HTMLDivElement>;
-    onTouchStart?: React.TouchEventHandler<HTMLDivElement>;
-    onTouchStartCapture?: React.TouchEventHandler<HTMLDivElement>;
-    onPointerDown?: React.PointerEventHandler<HTMLDivElement>;
-    onPointerDownCapture?: React.PointerEventHandler<HTMLDivElement>;
-    onPointerMove?: React.PointerEventHandler<HTMLDivElement>;
-    onPointerMoveCapture?: React.PointerEventHandler<HTMLDivElement>;
-    onPointerUp?: React.PointerEventHandler<HTMLDivElement>;
-    onPointerUpCapture?: React.PointerEventHandler<HTMLDivElement>;
-    onPointerCancel?: React.PointerEventHandler<HTMLDivElement>;
-    onPointerCancelCapture?: React.PointerEventHandler<HTMLDivElement>;
-    onPointerEnter?: React.PointerEventHandler<HTMLDivElement>;
-    onPointerEnterCapture?: React.PointerEventHandler<HTMLDivElement>;
-    onPointerLeave?: React.PointerEventHandler<HTMLDivElement>;
-    onPointerLeaveCapture?: React.PointerEventHandler<HTMLDivElement>;
-    onPointerOver?: React.PointerEventHandler<HTMLDivElement>;
-    onPointerOverCapture?: React.PointerEventHandler<HTMLDivElement>;
-    onPointerOut?: React.PointerEventHandler<HTMLDivElement>;
-    onPointerOutCapture?: React.PointerEventHandler<HTMLDivElement>;
-    onGotPointerCapture?: React.PointerEventHandler<HTMLDivElement>;
-    onGotPointerCaptureCapture?: React.PointerEventHandler<HTMLDivElement>;
-    onLostPointerCapture?: React.PointerEventHandler<HTMLDivElement>;
-    onLostPointerCaptureCapture?: React.PointerEventHandler<HTMLDivElement>;
-    onScroll?: React.UIEventHandler<HTMLDivElement>;
-    onScrollCapture?: React.UIEventHandler<HTMLDivElement>;
-    onWheel?: React.WheelEventHandler<HTMLDivElement>;
-    onWheelCapture?: React.WheelEventHandler<HTMLDivElement>;
-    onAnimationStart?: React.AnimationEventHandler<HTMLDivElement>;
-    onAnimationStartCapture?: React.AnimationEventHandler<HTMLDivElement>;
-    onAnimationEnd?: React.AnimationEventHandler<HTMLDivElement>;
-    onAnimationEndCapture?: React.AnimationEventHandler<HTMLDivElement>;
-    onAnimationIteration?: React.AnimationEventHandler<HTMLDivElement>;
-    onAnimationIterationCapture?: React.AnimationEventHandler<HTMLDivElement>;
-    onTransitionEnd?: React.TransitionEventHandler<HTMLDivElement>;
-    onTransitionEndCapture?: React.TransitionEventHandler<HTMLDivElement>;
-    children?: React.ReactNode;
-    className?: string;
-    testId?: string;
-    style?: React.CSSProperties;
-} & React.RefAttributes<unknown>>;
+export const PopoverContent: React.ForwardRefExoticComponent<Omit<Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>>, never>, keyof PopoverContentInternalProps> & PopoverContentInternalProps & React.RefAttributes<unknown>>;
 export interface PopoverTriggerProps {
     children: React.ReactNode;
 }
@@ -481,7 +229,7 @@ export const PopoverTrigger: (props: PopoverTriggerProps) => React.DetailedReact
     title?: string;
     translate?: "yes" | "no";
     radioGroup?: string;
-    role?: string;
+    role?: React.AriaRole;
     about?: string;
     datatype?: string;
     inlist?: any;
@@ -502,7 +250,7 @@ export const PopoverTrigger: (props: PopoverTriggerProps) => React.DetailedReact
     results?: number;
     security?: string;
     unselectable?: "on" | "off";
-    inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search";
+    inputMode?: "none" | "text" | "search" | "tel" | "url" | "email" | "numeric" | "decimal";
     is?: string;
     'aria-activedescendant'?: string;
     'aria-atomic'?: boolean | "false" | "true";

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"mappings":";;;ACMA;IACE,QAAQ,EAAE,MAAM,SAAS,CAAC;IAE1B;;;;;OAKG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;;;;;;;;;;OAWG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IAEjC;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;;OAKG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ;;;;;OAKG;IACH,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAC3B;AAED,2BAAwB,KAAK,EAAE,YAAY,YAAY,CAAC,eAqJvD;AE7OD,qCAAsC,SAAQ,WAAW;IACvD,QAAQ,CAAC,EAAE,MAAM,SAAS,CAAC;CAC5B;AAED,kCAAkC,qBAChC,2BAA2B,EAC3B,KAAK,CACN,CAAC;AAiCF,OAAO,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;eAvCA,MAAM,SAAS;;;;iCAuCmC,CAAC;AChDhE;IACE,QAAQ,EAAE,MAAM,SAAS,CAAC;CAC3B;AAED;;GAEG;AACH,OAAO,MAAM,wBAAyB,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;eAQxD,CAAC;ACdF,uBAAuB,gBAAsB,GAAG;IAC9C,OAAO,EAAE,qBAAqB,CAAC;IAC/B,OAAO,EAAE,qBAAqB,CAAC;CAChC,CAAC;AAEF,OAAO,MAAM,wBAA4C,CAAC","sources":["packages/components/popover/src/src/PopoverContext.ts","packages/components/popover/src/src/Popover.tsx","packages/components/popover/src/src/PopoverContent/PopoverContent.styles.ts","packages/components/popover/src/src/PopoverContent/PopoverContent.tsx","packages/components/popover/src/src/PopoverTrigger/PopoverTrigger.tsx","packages/components/popover/src/src/CompoundPopover.tsx","packages/components/popover/src/src/index.ts","packages/components/popover/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,null,"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"],"names":[],"version":3,"file":"types.d.ts.map"}
+{"mappings":";;;ACMA;IACE,QAAQ,EAAE,MAAM,SAAS,CAAC;IAE1B;;;;;OAKG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;;;;;;;;;;OAWG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IAEjC;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;;OAKG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ;;;;;OAKG;IACH,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAE1B;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,2BAAwB,KAAK,EAAE,YAAY,YAAY,CAAC,eAwJvD;AExPD,qCAAsC,SAAQ,WAAW;IACvD,QAAQ,CAAC,EAAE,MAAM,SAAS,CAAC;CAC5B;AAED,kCAAkC,qBAChC,2BAA2B,EAC3B,KAAK,CACN,CAAC;AA0CF,OAAO,MAAM,2SAAkD,CAAC;ACzDhE;IACE,QAAQ,EAAE,MAAM,SAAS,CAAC;CAC3B;AAED;;GAEG;AACH,OAAO,MAAM,wBAAyB,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;eAQxD,CAAC;ACdF,uBAAuB,gBAAsB,GAAG;IAC9C,OAAO,EAAE,qBAAqB,CAAC;IAC/B,OAAO,EAAE,qBAAqB,CAAC;CAChC,CAAC;AAEF,OAAO,MAAM,wBAA4C,CAAC","sources":["packages/components/popover/src/src/PopoverContext.ts","packages/components/popover/src/src/Popover.tsx","packages/components/popover/src/src/PopoverContent/PopoverContent.styles.ts","packages/components/popover/src/src/PopoverContent/PopoverContent.tsx","packages/components/popover/src/src/PopoverTrigger/PopoverTrigger.tsx","packages/components/popover/src/src/CompoundPopover.tsx","packages/components/popover/src/src/index.ts","packages/components/popover/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,null,"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"],"names":[],"version":3,"file":"types.d.ts.map"}

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@contentful/f36-popover",
-  "version": "4.0.1",
+  "version": "4.2.0",
   "description": "Forma 36: Popover component",
   "scripts": {
     "build": "parcel build"
   },
   "dependencies": {
     "@babel/runtime": "^7.6.2",
-    "@contentful/f36-core": "^4.0.1",
+    "@contentful/f36-core": "^4.1.1",
     "@contentful/f36-tokens": "^4.0.0",
     "@contentful/f36-utils": "^4.0.0",
     "@popperjs/core": "^2.4.4",
@@ -34,5 +34,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "cee6bd9ae0b1ca2ce23d42873d9344a20fe740d0"
+  "gitHead": "e78e35a74c8126817f25be11f3811d4bc1b55bd9"
 }