@veeqo/ui 15.12.0 → 15.14.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.
- package/dist/components/Alerts/Alert/types.d.ts +2 -1
- package/dist/components/Modal/types.cjs.map +1 -1
- package/dist/components/Modal/types.d.ts +2 -1
- package/dist/components/Modal/types.js.map +1 -1
- package/dist/components/Modal/types.test-d.d.ts +9 -0
- package/dist/components/Popover/Popover.cjs +5 -5
- package/dist/components/Popover/Popover.cjs.map +1 -1
- package/dist/components/Popover/Popover.js +5 -5
- package/dist/components/Popover/Popover.js.map +1 -1
- package/dist/components/Popover/index.d.ts +1 -0
- package/dist/components/index.d.ts +1 -0
- package/dist/components/types.d.ts +10 -0
- package/package.json +1 -1
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
import { ReactNode } from 'react';
|
|
2
2
|
import { ActionProps } from '../../Action/types';
|
|
3
3
|
import { AlertColours, BaseAlertProps } from '../types';
|
|
4
|
+
import { DataAttributes } from '../../types';
|
|
4
5
|
/** Controls the padding density of the alert */
|
|
5
6
|
export type AlertSizes = 'base' | 'sm' | 'xs';
|
|
6
7
|
/** Direction of content flow */
|
|
7
8
|
export type AlertDirection = 'horizontal' | 'vertical';
|
|
8
9
|
export type AlertAction = {
|
|
9
10
|
label: string;
|
|
10
|
-
} & ActionProps<'button'
|
|
11
|
+
} & ActionProps<'button'> & DataAttributes;
|
|
11
12
|
export type AlertProps = React.HTMLAttributes<HTMLDivElement> & BaseAlertProps & {
|
|
12
13
|
/** Controls padding density */
|
|
13
14
|
size?: AlertSizes;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.cjs","sources":["../../../src/components/Modal/types.ts"],"sourcesContent":["import { CSSProperties, HTMLAttributes } from 'react';\nimport { ActionProps } from '../Action/types';\n\nexport type ModalSizes = 'xs' | 'sm' | 'base' | 'lg';\nexport type ModalTypes = 'modal' | 'leftDrawer' | 'rightDrawer';\nexport type ModalAppearance = 'primary' | 'secondary';\n\n// Base Modal props shared by all sizes.\ntype BaseModalProps = {\n /** Whether the modal is visible. */\n shouldShow: boolean;\n /** Show the close button in the header. */\n showHeaderCloseButton?: boolean;\n /** Prevent the modal from closing via backdrop click or ESC. */\n preventClose?: boolean;\n /** Remove internal padding from content area. */\n fullBleed?: boolean;\n /** Size of the modal. */\n size?: ModalSizes;\n /** Display type — standard modal or side drawer. */\n displayMode?: ModalTypes;\n /** Custom inline styles applied to the dialog element. */\n style?: CSSProperties;\n /** Handler called when close is triggered. Return `false` to cancel. */\n onClose: () => void | boolean;\n /** Modal body content. */\n children?: React.ReactNode;\n /** Additional CSS class applied to the dialog element. */\n className?: string;\n} & Omit<HTMLAttributes<HTMLDialogElement>, 'onClose'>;\n\n// Optional slot types.\n\ntype WithHeaderSlot = {\n /** Custom ReactNode replacing the default header. */\n headerSlot: React.ReactNode;\n};\n\ntype WithFooterSlot = {\n /** Custom ReactNode replacing the default footer. */\n footerSlot: React.ReactNode;\n};\n\ntype SideDrawType = {\n /** Display mode set to a side drawer direction. */\n displayMode: 'leftDrawer' | 'rightDrawer';\n /** Appearance style (applies to side drawers). */\n appearance?: ModalAppearance;\n};\n\n// Default header and footer options.\n\ntype DefaultHeaderOptions = {\n /** Title text shown in the default header. */\n headerTitle: string;\n /** Subtitle text shown below the header title. */\n headerSubtitle?: string;\n};\n\ntype ModalType = {\n /** Display mode set to standard centered modal. */\n displayMode?: 'modal';\n};\n\nexport type Action = { label: string } & ActionProps<'button'
|
|
1
|
+
{"version":3,"file":"types.cjs","sources":["../../../src/components/Modal/types.ts"],"sourcesContent":["import { CSSProperties, HTMLAttributes } from 'react';\nimport { ActionProps } from '../Action/types';\nimport { DataAttributes } from '../types';\n\nexport type ModalSizes = 'xs' | 'sm' | 'base' | 'lg';\nexport type ModalTypes = 'modal' | 'leftDrawer' | 'rightDrawer';\nexport type ModalAppearance = 'primary' | 'secondary';\n\n// Base Modal props shared by all sizes.\ntype BaseModalProps = {\n /** Whether the modal is visible. */\n shouldShow: boolean;\n /** Show the close button in the header. */\n showHeaderCloseButton?: boolean;\n /** Prevent the modal from closing via backdrop click or ESC. */\n preventClose?: boolean;\n /** Remove internal padding from content area. */\n fullBleed?: boolean;\n /** Size of the modal. */\n size?: ModalSizes;\n /** Display type — standard modal or side drawer. */\n displayMode?: ModalTypes;\n /** Custom inline styles applied to the dialog element. */\n style?: CSSProperties;\n /** Handler called when close is triggered. Return `false` to cancel. */\n onClose: () => void | boolean;\n /** Modal body content. */\n children?: React.ReactNode;\n /** Additional CSS class applied to the dialog element. */\n className?: string;\n} & Omit<HTMLAttributes<HTMLDialogElement>, 'onClose'>;\n\n// Optional slot types.\n\ntype WithHeaderSlot = {\n /** Custom ReactNode replacing the default header. */\n headerSlot: React.ReactNode;\n};\n\ntype WithFooterSlot = {\n /** Custom ReactNode replacing the default footer. */\n footerSlot: React.ReactNode;\n};\n\ntype SideDrawType = {\n /** Display mode set to a side drawer direction. */\n displayMode: 'leftDrawer' | 'rightDrawer';\n /** Appearance style (applies to side drawers). */\n appearance?: ModalAppearance;\n};\n\n// Default header and footer options.\n\ntype DefaultHeaderOptions = {\n /** Title text shown in the default header. */\n headerTitle: string;\n /** Subtitle text shown below the header title. */\n headerSubtitle?: string;\n};\n\ntype ModalType = {\n /** Display mode set to standard centered modal. */\n displayMode?: 'modal';\n};\n\nexport type Action = { label: string } & ActionProps<'button'> & DataAttributes;\ntype DefaultFooterOptions = {\n /** Action buttons on the left side of the footer. */\n leftActions?: Action[];\n /** Action buttons on the right side of the footer. */\n rightActions?: Action[];\n};\n\n// Either we have a header slot or default header options, same for footer.\ntype HeaderOptions = WithHeaderSlot | DefaultHeaderOptions;\ntype FooterOptions = WithFooterSlot | DefaultFooterOptions;\ntype TypeProps = ModalType | SideDrawType;\n\n// Modal props are shared props + the header and footer options (potentially with slots.)\nexport type ModalProps = BaseModalProps & HeaderOptions & FooterOptions & TypeProps;\n\n/**\n * Type guard to check if a header slot has been passed to the component.\n */\nexport const hasHeaderSlot = (\n props: ModalProps,\n): props is BaseModalProps & WithHeaderSlot & FooterOptions & TypeProps => {\n return !!(props as WithHeaderSlot).headerSlot;\n};\n\n/**\n * Type guard to check if a footer slot has been passed to the component.\n */\nexport const hasFooterSlot = (\n props: ModalProps,\n): props is BaseModalProps & HeaderOptions & WithFooterSlot & TypeProps => {\n return !!(props as WithFooterSlot).footerSlot;\n};\n\n/**\n * Type guard to check if the modal is a sidedraw\n */\nexport const isSideDraw = (\n props: ModalProps,\n): props is BaseModalProps & HeaderOptions & FooterOptions & SideDrawType => {\n return props.displayMode === 'leftDrawer' || props.displayMode === 'rightDrawer';\n};\n"],"names":[],"mappings":";;AAiFA;;AAEG;AACI,MAAM,aAAa,GAAG,CAC3B,KAAiB,KACuD;AACxE,IAAA,OAAO,CAAC,CAAE,KAAwB,CAAC,UAAU;AAC/C;AAEA;;AAEG;AACI,MAAM,aAAa,GAAG,CAC3B,KAAiB,KACuD;AACxE,IAAA,OAAO,CAAC,CAAE,KAAwB,CAAC,UAAU;AAC/C;AAEA;;AAEG;AACI,MAAM,UAAU,GAAG,CACxB,KAAiB,KACyD;IAC1E,OAAO,KAAK,CAAC,WAAW,KAAK,YAAY,IAAI,KAAK,CAAC,WAAW,KAAK,aAAa;AAClF;;;;;;"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { CSSProperties, HTMLAttributes } from 'react';
|
|
2
2
|
import { ActionProps } from '../Action/types';
|
|
3
|
+
import { DataAttributes } from '../types';
|
|
3
4
|
export type ModalSizes = 'xs' | 'sm' | 'base' | 'lg';
|
|
4
5
|
export type ModalTypes = 'modal' | 'leftDrawer' | 'rightDrawer';
|
|
5
6
|
export type ModalAppearance = 'primary' | 'secondary';
|
|
@@ -51,7 +52,7 @@ type ModalType = {
|
|
|
51
52
|
};
|
|
52
53
|
export type Action = {
|
|
53
54
|
label: string;
|
|
54
|
-
} & ActionProps<'button'
|
|
55
|
+
} & ActionProps<'button'> & DataAttributes;
|
|
55
56
|
type DefaultFooterOptions = {
|
|
56
57
|
/** Action buttons on the left side of the footer. */
|
|
57
58
|
leftActions?: Action[];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sources":["../../../src/components/Modal/types.ts"],"sourcesContent":["import { CSSProperties, HTMLAttributes } from 'react';\nimport { ActionProps } from '../Action/types';\n\nexport type ModalSizes = 'xs' | 'sm' | 'base' | 'lg';\nexport type ModalTypes = 'modal' | 'leftDrawer' | 'rightDrawer';\nexport type ModalAppearance = 'primary' | 'secondary';\n\n// Base Modal props shared by all sizes.\ntype BaseModalProps = {\n /** Whether the modal is visible. */\n shouldShow: boolean;\n /** Show the close button in the header. */\n showHeaderCloseButton?: boolean;\n /** Prevent the modal from closing via backdrop click or ESC. */\n preventClose?: boolean;\n /** Remove internal padding from content area. */\n fullBleed?: boolean;\n /** Size of the modal. */\n size?: ModalSizes;\n /** Display type — standard modal or side drawer. */\n displayMode?: ModalTypes;\n /** Custom inline styles applied to the dialog element. */\n style?: CSSProperties;\n /** Handler called when close is triggered. Return `false` to cancel. */\n onClose: () => void | boolean;\n /** Modal body content. */\n children?: React.ReactNode;\n /** Additional CSS class applied to the dialog element. */\n className?: string;\n} & Omit<HTMLAttributes<HTMLDialogElement>, 'onClose'>;\n\n// Optional slot types.\n\ntype WithHeaderSlot = {\n /** Custom ReactNode replacing the default header. */\n headerSlot: React.ReactNode;\n};\n\ntype WithFooterSlot = {\n /** Custom ReactNode replacing the default footer. */\n footerSlot: React.ReactNode;\n};\n\ntype SideDrawType = {\n /** Display mode set to a side drawer direction. */\n displayMode: 'leftDrawer' | 'rightDrawer';\n /** Appearance style (applies to side drawers). */\n appearance?: ModalAppearance;\n};\n\n// Default header and footer options.\n\ntype DefaultHeaderOptions = {\n /** Title text shown in the default header. */\n headerTitle: string;\n /** Subtitle text shown below the header title. */\n headerSubtitle?: string;\n};\n\ntype ModalType = {\n /** Display mode set to standard centered modal. */\n displayMode?: 'modal';\n};\n\nexport type Action = { label: string } & ActionProps<'button'
|
|
1
|
+
{"version":3,"file":"types.js","sources":["../../../src/components/Modal/types.ts"],"sourcesContent":["import { CSSProperties, HTMLAttributes } from 'react';\nimport { ActionProps } from '../Action/types';\nimport { DataAttributes } from '../types';\n\nexport type ModalSizes = 'xs' | 'sm' | 'base' | 'lg';\nexport type ModalTypes = 'modal' | 'leftDrawer' | 'rightDrawer';\nexport type ModalAppearance = 'primary' | 'secondary';\n\n// Base Modal props shared by all sizes.\ntype BaseModalProps = {\n /** Whether the modal is visible. */\n shouldShow: boolean;\n /** Show the close button in the header. */\n showHeaderCloseButton?: boolean;\n /** Prevent the modal from closing via backdrop click or ESC. */\n preventClose?: boolean;\n /** Remove internal padding from content area. */\n fullBleed?: boolean;\n /** Size of the modal. */\n size?: ModalSizes;\n /** Display type — standard modal or side drawer. */\n displayMode?: ModalTypes;\n /** Custom inline styles applied to the dialog element. */\n style?: CSSProperties;\n /** Handler called when close is triggered. Return `false` to cancel. */\n onClose: () => void | boolean;\n /** Modal body content. */\n children?: React.ReactNode;\n /** Additional CSS class applied to the dialog element. */\n className?: string;\n} & Omit<HTMLAttributes<HTMLDialogElement>, 'onClose'>;\n\n// Optional slot types.\n\ntype WithHeaderSlot = {\n /** Custom ReactNode replacing the default header. */\n headerSlot: React.ReactNode;\n};\n\ntype WithFooterSlot = {\n /** Custom ReactNode replacing the default footer. */\n footerSlot: React.ReactNode;\n};\n\ntype SideDrawType = {\n /** Display mode set to a side drawer direction. */\n displayMode: 'leftDrawer' | 'rightDrawer';\n /** Appearance style (applies to side drawers). */\n appearance?: ModalAppearance;\n};\n\n// Default header and footer options.\n\ntype DefaultHeaderOptions = {\n /** Title text shown in the default header. */\n headerTitle: string;\n /** Subtitle text shown below the header title. */\n headerSubtitle?: string;\n};\n\ntype ModalType = {\n /** Display mode set to standard centered modal. */\n displayMode?: 'modal';\n};\n\nexport type Action = { label: string } & ActionProps<'button'> & DataAttributes;\ntype DefaultFooterOptions = {\n /** Action buttons on the left side of the footer. */\n leftActions?: Action[];\n /** Action buttons on the right side of the footer. */\n rightActions?: Action[];\n};\n\n// Either we have a header slot or default header options, same for footer.\ntype HeaderOptions = WithHeaderSlot | DefaultHeaderOptions;\ntype FooterOptions = WithFooterSlot | DefaultFooterOptions;\ntype TypeProps = ModalType | SideDrawType;\n\n// Modal props are shared props + the header and footer options (potentially with slots.)\nexport type ModalProps = BaseModalProps & HeaderOptions & FooterOptions & TypeProps;\n\n/**\n * Type guard to check if a header slot has been passed to the component.\n */\nexport const hasHeaderSlot = (\n props: ModalProps,\n): props is BaseModalProps & WithHeaderSlot & FooterOptions & TypeProps => {\n return !!(props as WithHeaderSlot).headerSlot;\n};\n\n/**\n * Type guard to check if a footer slot has been passed to the component.\n */\nexport const hasFooterSlot = (\n props: ModalProps,\n): props is BaseModalProps & HeaderOptions & WithFooterSlot & TypeProps => {\n return !!(props as WithFooterSlot).footerSlot;\n};\n\n/**\n * Type guard to check if the modal is a sidedraw\n */\nexport const isSideDraw = (\n props: ModalProps,\n): props is BaseModalProps & HeaderOptions & FooterOptions & SideDrawType => {\n return props.displayMode === 'leftDrawer' || props.displayMode === 'rightDrawer';\n};\n"],"names":[],"mappings":"AAiFA;;AAEG;AACI,MAAM,aAAa,GAAG,CAC3B,KAAiB,KACuD;AACxE,IAAA,OAAO,CAAC,CAAE,KAAwB,CAAC,UAAU;AAC/C;AAEA;;AAEG;AACI,MAAM,aAAa,GAAG,CAC3B,KAAiB,KACuD;AACxE,IAAA,OAAO,CAAC,CAAE,KAAwB,CAAC,UAAU;AAC/C;AAEA;;AAEG;AACI,MAAM,UAAU,GAAG,CACxB,KAAiB,KACyD;IAC1E,OAAO,KAAK,CAAC,WAAW,KAAK,YAAY,IAAI,KAAK,CAAC,WAAW,KAAK,aAAa;AAClF;;;;"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Type-only assertions for `Action` in Modal's `leftActions`/`rightActions`.
|
|
3
|
+
*
|
|
4
|
+
* Tracks VQCL-8277 — consumers need to pass arbitrary `data-*` attributes
|
|
5
|
+
* (e.g. `data-pensieve-action`) on action descriptors without `as` casts
|
|
6
|
+
* or `@ts-expect-error` suppressions. The file is never executed; tsc
|
|
7
|
+
* checks the assignments at build time.
|
|
8
|
+
*/
|
|
9
|
+
export {};
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var React = require('react');
|
|
4
3
|
var react = require('@floating-ui/react');
|
|
5
|
-
var
|
|
6
|
-
require('../Portal/PortalContext.cjs');
|
|
4
|
+
var React = require('react');
|
|
7
5
|
var index = require('../../theme/index.cjs');
|
|
8
6
|
var buildClassnames = require('../../utils/buildClassnames.cjs');
|
|
9
7
|
var generateId = require('../../utils/generateId.cjs');
|
|
10
8
|
var assignCssVars = require('../../utils/assignCssVars.cjs');
|
|
11
|
-
var
|
|
9
|
+
var Portal = require('../Portal/Portal.cjs');
|
|
10
|
+
require('../Portal/PortalContext.cjs');
|
|
12
11
|
var useHandleFocus = require('./hooks/useHandleFocus.cjs');
|
|
12
|
+
var useUpdateAriaAnchor = require('./hooks/useUpdateAriaAnchor.cjs');
|
|
13
13
|
var Popover_module = require('./Popover.module.scss.cjs');
|
|
14
14
|
|
|
15
15
|
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
@@ -18,7 +18,7 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
|
18
18
|
|
|
19
19
|
const Popover = ({ id: passedId, children, zIndex = index.theme.layers.popup, placement = 'bottom', anchorElement, rootElementRef, onShouldClose, style, disableFocusLock, removeBackdrop = false, useAnchorWidth, ignoreAriaWarnings, className, ...dialogProps }) => {
|
|
20
20
|
// Set up Floating UI positioning
|
|
21
|
-
const { refs, floatingStyles, placement: resolvedPlacement } = react.useFloating({
|
|
21
|
+
const { refs, floatingStyles, placement: resolvedPlacement, } = react.useFloating({
|
|
22
22
|
elements: { reference: anchorElement },
|
|
23
23
|
placement,
|
|
24
24
|
middleware: [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Popover.cjs","sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"Popover.cjs","sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import { autoUpdate, flip, limitShift, shift, size, useFloating } from '@floating-ui/react';\nimport React, { useMemo } from 'react';\n\nimport { theme } from '../../theme';\nimport { assignCssVars, buildClassnames, generateId } from '../../utils';\nimport { Portal } from '../Portal';\nimport { useHandleFocus } from './hooks/useHandleFocus';\nimport { useUpdateAriaAnchor } from './hooks/useUpdateAriaAnchor';\nimport popoverStyles from './Popover.module.scss';\nimport { PopoverProps } from './types';\n\nexport const Popover = ({\n id: passedId,\n children,\n zIndex = theme.layers.popup,\n placement = 'bottom',\n anchorElement,\n rootElementRef,\n onShouldClose,\n style,\n disableFocusLock,\n removeBackdrop = false,\n useAnchorWidth,\n ignoreAriaWarnings,\n className,\n ...dialogProps\n}: PopoverProps) => {\n // Set up Floating UI positioning\n const {\n refs,\n floatingStyles,\n placement: resolvedPlacement,\n } = useFloating({\n elements: { reference: anchorElement },\n placement,\n middleware: [\n flip({ fallbackAxisSideDirection: 'start' }),\n shift({ limiter: limitShift() }),\n size({\n apply({ availableHeight, elements }) {\n Object.assign(elements.floating.style, {\n maxHeight: `${Math.max(0, availableHeight)}px`,\n });\n },\n }),\n ],\n whileElementsMounted: autoUpdate,\n });\n\n // Setup popover id to use passed, or generate its' own.\n const id = useMemo(() => passedId || generateId('popover'), [passedId]);\n\n // Check and update aria for anchor, only works once this has rendered for the first time though.\n useUpdateAriaAnchor({ anchorElement, popoverId: id, ignoreAriaWarnings });\n\n const onClose = () => {\n anchorElement?.focus();\n onShouldClose?.();\n };\n\n const { handleKeyDown } = useHandleFocus({\n popperElement: refs.floating.current as HTMLDialogElement | null,\n anchorElement,\n onClose,\n disableFocusLock,\n });\n\n return (\n <Portal rootElementRef={rootElementRef}>\n {!removeBackdrop && (\n <div\n className={popoverStyles.backdrop}\n style={assignCssVars({ zIndex })}\n onClick={onClose}\n data-testid=\"popover-backdrop\"\n />\n )}\n <dialog\n open\n id={id}\n data-dialog-type=\"popover\"\n data-placement={resolvedPlacement}\n className={buildClassnames([popoverStyles.dialog, className])}\n ref={refs.setFloating}\n style={{\n ...assignCssVars({ zIndex: zIndex + 1 }),\n ...floatingStyles,\n ...style,\n ...(useAnchorWidth ? { minWidth: anchorElement?.clientWidth } : {}),\n }}\n onKeyDown={handleKeyDown}\n {...dialogProps}\n >\n {children}\n </dialog>\n </Portal>\n );\n};\n"],"names":["theme","useFloating","flip","shift","limitShift","size","autoUpdate","useMemo","generateId","useUpdateAriaAnchor","useHandleFocus","React","Portal","popoverStyles","assignCssVars","buildClassnames"],"mappings":"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"}
|
|
@@ -1,18 +1,18 @@
|
|
|
1
|
-
import React__default, { useMemo } from 'react';
|
|
2
1
|
import { useFloating, autoUpdate, flip, shift, limitShift, size } from '@floating-ui/react';
|
|
3
|
-
import {
|
|
4
|
-
import '../Portal/PortalContext.js';
|
|
2
|
+
import React__default, { useMemo } from 'react';
|
|
5
3
|
import { theme } from '../../theme/index.js';
|
|
6
4
|
import { buildClassnames } from '../../utils/buildClassnames.js';
|
|
7
5
|
import { generateId } from '../../utils/generateId.js';
|
|
8
6
|
import { assignCssVars } from '../../utils/assignCssVars.js';
|
|
9
|
-
import {
|
|
7
|
+
import { Portal } from '../Portal/Portal.js';
|
|
8
|
+
import '../Portal/PortalContext.js';
|
|
10
9
|
import { useHandleFocus } from './hooks/useHandleFocus.js';
|
|
10
|
+
import { useUpdateAriaAnchor } from './hooks/useUpdateAriaAnchor.js';
|
|
11
11
|
import popoverStyles from './Popover.module.scss.js';
|
|
12
12
|
|
|
13
13
|
const Popover = ({ id: passedId, children, zIndex = theme.layers.popup, placement = 'bottom', anchorElement, rootElementRef, onShouldClose, style, disableFocusLock, removeBackdrop = false, useAnchorWidth, ignoreAriaWarnings, className, ...dialogProps }) => {
|
|
14
14
|
// Set up Floating UI positioning
|
|
15
|
-
const { refs, floatingStyles, placement: resolvedPlacement } = useFloating({
|
|
15
|
+
const { refs, floatingStyles, placement: resolvedPlacement, } = useFloating({
|
|
16
16
|
elements: { reference: anchorElement },
|
|
17
17
|
placement,
|
|
18
18
|
middleware: [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Popover.js","sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"Popover.js","sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import { autoUpdate, flip, limitShift, shift, size, useFloating } from '@floating-ui/react';\nimport React, { useMemo } from 'react';\n\nimport { theme } from '../../theme';\nimport { assignCssVars, buildClassnames, generateId } from '../../utils';\nimport { Portal } from '../Portal';\nimport { useHandleFocus } from './hooks/useHandleFocus';\nimport { useUpdateAriaAnchor } from './hooks/useUpdateAriaAnchor';\nimport popoverStyles from './Popover.module.scss';\nimport { PopoverProps } from './types';\n\nexport const Popover = ({\n id: passedId,\n children,\n zIndex = theme.layers.popup,\n placement = 'bottom',\n anchorElement,\n rootElementRef,\n onShouldClose,\n style,\n disableFocusLock,\n removeBackdrop = false,\n useAnchorWidth,\n ignoreAriaWarnings,\n className,\n ...dialogProps\n}: PopoverProps) => {\n // Set up Floating UI positioning\n const {\n refs,\n floatingStyles,\n placement: resolvedPlacement,\n } = useFloating({\n elements: { reference: anchorElement },\n placement,\n middleware: [\n flip({ fallbackAxisSideDirection: 'start' }),\n shift({ limiter: limitShift() }),\n size({\n apply({ availableHeight, elements }) {\n Object.assign(elements.floating.style, {\n maxHeight: `${Math.max(0, availableHeight)}px`,\n });\n },\n }),\n ],\n whileElementsMounted: autoUpdate,\n });\n\n // Setup popover id to use passed, or generate its' own.\n const id = useMemo(() => passedId || generateId('popover'), [passedId]);\n\n // Check and update aria for anchor, only works once this has rendered for the first time though.\n useUpdateAriaAnchor({ anchorElement, popoverId: id, ignoreAriaWarnings });\n\n const onClose = () => {\n anchorElement?.focus();\n onShouldClose?.();\n };\n\n const { handleKeyDown } = useHandleFocus({\n popperElement: refs.floating.current as HTMLDialogElement | null,\n anchorElement,\n onClose,\n disableFocusLock,\n });\n\n return (\n <Portal rootElementRef={rootElementRef}>\n {!removeBackdrop && (\n <div\n className={popoverStyles.backdrop}\n style={assignCssVars({ zIndex })}\n onClick={onClose}\n data-testid=\"popover-backdrop\"\n />\n )}\n <dialog\n open\n id={id}\n data-dialog-type=\"popover\"\n data-placement={resolvedPlacement}\n className={buildClassnames([popoverStyles.dialog, className])}\n ref={refs.setFloating}\n style={{\n ...assignCssVars({ zIndex: zIndex + 1 }),\n ...floatingStyles,\n ...style,\n ...(useAnchorWidth ? { minWidth: anchorElement?.clientWidth } : {}),\n }}\n onKeyDown={handleKeyDown}\n {...dialogProps}\n >\n {children}\n </dialog>\n </Portal>\n );\n};\n"],"names":["React"],"mappings":"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"}
|
|
@@ -43,6 +43,7 @@ export { LoginWithAmazonButton } from './LoginWithAmazonButton';
|
|
|
43
43
|
export { Modal, type Action as ModalAction, type ModalProps } from './Modal';
|
|
44
44
|
export { Pagination } from './Pagination';
|
|
45
45
|
export { Popover } from './Popover';
|
|
46
|
+
export type { PopoverProps } from './Popover';
|
|
46
47
|
export { Popup, type PopupProps } from './Popup';
|
|
47
48
|
export { Portal, DisablePortals } from './Portal';
|
|
48
49
|
export { PriceInput } from './PriceInput';
|
|
@@ -22,3 +22,13 @@ export type FormComponentProps = {
|
|
|
22
22
|
disabled?: boolean;
|
|
23
23
|
compact?: boolean;
|
|
24
24
|
};
|
|
25
|
+
/**
|
|
26
|
+
* Allows arbitrary `data-*` attributes on a type. React's built-in `HTMLAttributes`
|
|
27
|
+
* permits `data-*` attributes in JSX but not in plain object literals, so we add this
|
|
28
|
+
* template-literal index signature wherever a component accepts an array of action
|
|
29
|
+
* descriptors (e.g. `Modal#rightActions`, `Alert#rightActions`) and consumers need to
|
|
30
|
+
* pass analytics attributes like `data-pensieve-action`.
|
|
31
|
+
*/
|
|
32
|
+
export type DataAttributes = {
|
|
33
|
+
[key: `data-${string}`]: string | undefined;
|
|
34
|
+
};
|