@stackone/malachite 2.65.0 → 2.67.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/COMPONENTS.md +2 -2
- package/dist/components/NavItem.js +140 -101
- package/dist/components/NavItem.js.map +1 -1
- package/dist/components/Popover.js +196 -173
- package/dist/components/Popover.js.map +1 -1
- package/dist/components/PopoverParts.js +61 -31
- package/dist/components/PopoverParts.js.map +1 -1
- package/dist/components/popoverTree.js +5 -4
- package/dist/components/popoverTree.js.map +1 -1
- package/dist/index.d.ts +32 -5
- package/package.json +1 -1
|
@@ -1,60 +1,90 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { forwardRef as x } from "react";
|
|
3
|
-
import
|
|
4
|
-
import { BORDER as m, NO_SCROLLBAR as
|
|
5
|
-
import { FOCUS_RING_INSET as
|
|
6
|
-
import { isPlainClick as
|
|
7
|
-
import {
|
|
8
|
-
|
|
1
|
+
import { jsx as n, jsxs as u } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef as f, useContext as v, useRef as x, useLayoutEffect as b } from "react";
|
|
3
|
+
import h from "./Tooltip.js";
|
|
4
|
+
import { BORDER as m, NO_SCROLLBAR as g } from "./chromeStyles.js";
|
|
5
|
+
import { FOCUS_RING_INSET as T } from "./focusRing.js";
|
|
6
|
+
import { isPlainClick as R } from "./linkClick.js";
|
|
7
|
+
import { PopoverShownContext as w } from "./popoverTree.js";
|
|
8
|
+
import { safeHref as y } from "./safeHref.js";
|
|
9
|
+
const j = ({ title: e, action: t }) => /* @__PURE__ */ u(
|
|
9
10
|
"div",
|
|
10
11
|
{
|
|
11
12
|
className: `flex items-center justify-between border-0 border-b border-solid ${m} px-5 py-4 text-[12px] leading-[15px] font-normal text-[var(--malachite-text-dimmed,rgb(161,161,161))]`,
|
|
12
13
|
children: [
|
|
13
|
-
/* @__PURE__ */
|
|
14
|
+
/* @__PURE__ */ n("span", { children: e }),
|
|
14
15
|
t
|
|
15
16
|
]
|
|
16
17
|
}
|
|
17
|
-
),
|
|
18
|
-
|
|
18
|
+
), N = '[aria-current]:not([aria-current="false"]):not([aria-current=""]), [aria-selected="true"], [role="radio"][aria-checked="true"]', E = ["aria-current", "aria-selected", "aria-checked"], d = (e) => {
|
|
19
|
+
const t = e.querySelector(N);
|
|
20
|
+
if (!t)
|
|
21
|
+
return !1;
|
|
22
|
+
const o = e.getBoundingClientRect().top + e.clientTop, { top: i, bottom: r } = t.getBoundingClientRect(), a = i - o + e.scrollTop, c = r - o + e.scrollTop;
|
|
23
|
+
return a < e.scrollTop ? e.scrollTop = a : c > e.scrollTop + e.clientHeight && (e.scrollTop = c - e.clientHeight), !0;
|
|
24
|
+
}, k = ({ children: e, scrollToSelected: t = !1 }) => {
|
|
25
|
+
const o = v(w), i = x(null);
|
|
26
|
+
return b(() => {
|
|
27
|
+
const r = i.current;
|
|
28
|
+
if (!t || !o || !r || d(r))
|
|
29
|
+
return;
|
|
30
|
+
const a = new MutationObserver(() => {
|
|
31
|
+
d(r) && a.disconnect();
|
|
32
|
+
});
|
|
33
|
+
return a.observe(r, {
|
|
34
|
+
childList: !0,
|
|
35
|
+
subtree: !0,
|
|
36
|
+
attributes: !0,
|
|
37
|
+
attributeFilter: E
|
|
38
|
+
}), () => a.disconnect();
|
|
39
|
+
}, [t, o]), /* @__PURE__ */ n(
|
|
40
|
+
"div",
|
|
41
|
+
{
|
|
42
|
+
ref: i,
|
|
43
|
+
className: `flex max-h-80 flex-col gap-[2px] overflow-y-auto p-2 ${g}`,
|
|
44
|
+
children: e
|
|
45
|
+
}
|
|
46
|
+
);
|
|
47
|
+
}, S = f(
|
|
48
|
+
({ children: e }, t) => /* @__PURE__ */ n("div", { ref: t, className: `border-0 border-t border-solid ${m} p-2`, children: e })
|
|
19
49
|
);
|
|
20
|
-
|
|
21
|
-
const
|
|
50
|
+
S.displayName = "Popover.Section";
|
|
51
|
+
const H = ({ children: e }) => /* @__PURE__ */ n("div", { className: "px-3 py-2 text-[length:var(--malachite-font-size-small,13px)] text-[var(--malachite-text-dimmed,rgb(161,161,161))] select-none", children: e }), z = ({
|
|
22
52
|
icon: e,
|
|
23
53
|
"aria-label": t,
|
|
24
|
-
onClick:
|
|
25
|
-
href:
|
|
26
|
-
disabled:
|
|
27
|
-
tooltip:
|
|
54
|
+
onClick: o,
|
|
55
|
+
href: i,
|
|
56
|
+
disabled: r = !1,
|
|
57
|
+
tooltip: a
|
|
28
58
|
}) => {
|
|
29
|
-
const
|
|
59
|
+
const c = r ? void 0 : y(i), s = `m-0 inline-flex size-5 items-center justify-center rounded-[var(--malachite-radius-sm,4px)] border-0 bg-transparent p-0 transition-colors duration-150 [&_svg]:size-3! ${r ? "cursor-not-allowed text-[var(--malachite-text-placeholder,rgb(187,187,187))] opacity-50" : "cursor-pointer text-[var(--malachite-text-placeholder,rgb(187,187,187))] hover:bg-[var(--malachite-pillbutton-background,rgb(241,241,241))] hover:text-[var(--malachite-text-secondary,rgb(123,123,123))]"} ${T}`, l = c !== void 0 ? /* @__PURE__ */ n(
|
|
30
60
|
"a",
|
|
31
61
|
{
|
|
32
|
-
href:
|
|
62
|
+
href: c,
|
|
33
63
|
"aria-label": t,
|
|
34
|
-
onClick: (
|
|
35
|
-
|
|
64
|
+
onClick: (p) => {
|
|
65
|
+
R(p) && o && (p.preventDefault(), o());
|
|
36
66
|
},
|
|
37
|
-
className: `no-underline ${
|
|
67
|
+
className: `no-underline ${s}`,
|
|
38
68
|
children: e
|
|
39
69
|
}
|
|
40
|
-
) : /* @__PURE__ */
|
|
70
|
+
) : /* @__PURE__ */ n(
|
|
41
71
|
"button",
|
|
42
72
|
{
|
|
43
73
|
type: "button",
|
|
44
74
|
"aria-label": t,
|
|
45
|
-
"aria-disabled":
|
|
46
|
-
onClick:
|
|
47
|
-
className:
|
|
75
|
+
"aria-disabled": r || void 0,
|
|
76
|
+
onClick: r ? void 0 : o,
|
|
77
|
+
className: s,
|
|
48
78
|
children: e
|
|
49
79
|
}
|
|
50
80
|
);
|
|
51
|
-
return
|
|
81
|
+
return a ? /* @__PURE__ */ n(h, { text: a, children: l }) : l;
|
|
52
82
|
};
|
|
53
83
|
export {
|
|
54
84
|
z as PopoverAction,
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
85
|
+
H as PopoverEmpty,
|
|
86
|
+
j as PopoverHeader,
|
|
87
|
+
k as PopoverList,
|
|
88
|
+
S as PopoverSection
|
|
59
89
|
};
|
|
60
90
|
//# sourceMappingURL=PopoverParts.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PopoverParts.js","sources":["../../src/components/PopoverParts.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport Tooltip from './Tooltip';\nimport { BORDER, NO_SCROLLBAR } from './chromeStyles';\nimport { FOCUS_RING_INSET } from './focusRing';\nimport { isPlainClick } from './linkClick';\nimport { safeHref } from './safeHref';\n\nexport interface PopoverHeaderProps {\n title: string;\n action?: React.ReactNode;\n}\n\nexport const PopoverHeader: React.FC<PopoverHeaderProps> = ({ title, action }) => (\n <div\n className={`flex items-center justify-between border-0 border-b border-solid ${BORDER} px-5 py-4 text-[12px] leading-[15px] font-normal text-[var(--malachite-text-dimmed,rgb(161,161,161))]`}\n >\n <span>{title}</span>\n {action}\n </div>\n);\n\
|
|
1
|
+
{"version":3,"file":"PopoverParts.js","sources":["../../src/components/PopoverParts.tsx"],"sourcesContent":["import React, { forwardRef, useContext, useLayoutEffect, useRef } from 'react';\nimport Tooltip from './Tooltip';\nimport { BORDER, NO_SCROLLBAR } from './chromeStyles';\nimport { FOCUS_RING_INSET } from './focusRing';\nimport { isPlainClick } from './linkClick';\nimport { PopoverShownContext } from './popoverTree';\nimport { safeHref } from './safeHref';\n\nexport interface PopoverHeaderProps {\n title: string;\n action?: React.ReactNode;\n}\n\nexport const PopoverHeader: React.FC<PopoverHeaderProps> = ({ title, action }) => (\n <div\n className={`flex items-center justify-between border-0 border-b border-solid ${BORDER} px-5 py-4 text-[12px] leading-[15px] font-normal text-[var(--malachite-text-dimmed,rgb(161,161,161))]`}\n >\n <span>{title}</span>\n {action}\n </div>\n);\n\nconst SELECTED_ROW =\n '[aria-current]:not([aria-current=\"false\"]):not([aria-current=\"\"]), [aria-selected=\"true\"], [role=\"radio\"][aria-checked=\"true\"]';\nconst SELECTION_ATTRIBUTES = ['aria-current', 'aria-selected', 'aria-checked'];\n\n// Not `scrollIntoView`: that also scrolls every scrollable ancestor, the page included.\nconst scrollSelectedRowIntoView = (list: HTMLElement): boolean => {\n const row = list.querySelector<HTMLElement>(SELECTED_ROW);\n if (!row) {\n return false;\n }\n const listTop = list.getBoundingClientRect().top + list.clientTop;\n const { top, bottom } = row.getBoundingClientRect();\n const rowTop = top - listTop + list.scrollTop;\n const rowBottom = bottom - listTop + list.scrollTop;\n if (rowTop < list.scrollTop) {\n list.scrollTop = rowTop;\n } else if (rowBottom > list.scrollTop + list.clientHeight) {\n list.scrollTop = rowBottom - list.clientHeight;\n }\n return true;\n};\n\nexport interface PopoverListProps {\n children: React.ReactNode;\n /**\n * Scrolls the list to its selected row (`aria-current`, `aria-selected` or a checked radio)\n * each time the popover is shown, once that row mounts. Only the list scrolls.\n */\n scrollToSelected?: boolean;\n}\n\nexport const PopoverList: React.FC<PopoverListProps> = ({ children, scrollToSelected = false }) => {\n const shown = useContext(PopoverShownContext);\n const listRef = useRef<HTMLDivElement>(null);\n\n // Before paint, so a shown panel never draws a frame at the top and then jumps.\n useLayoutEffect(() => {\n const list = listRef.current;\n if (!scrollToSelected || !shown || !list || scrollSelectedRowIntoView(list)) {\n return;\n }\n const observer = new MutationObserver(() => {\n if (scrollSelectedRowIntoView(list)) {\n observer.disconnect();\n }\n });\n observer.observe(list, {\n childList: true,\n subtree: true,\n attributes: true,\n attributeFilter: SELECTION_ATTRIBUTES,\n });\n return () => observer.disconnect();\n }, [scrollToSelected, shown]);\n\n return (\n <div\n ref={listRef}\n className={`flex max-h-80 flex-col gap-[2px] overflow-y-auto p-2 ${NO_SCROLLBAR}`}\n >\n {children}\n </div>\n );\n};\n\nexport const PopoverSection = forwardRef<HTMLDivElement, { children: React.ReactNode }>(\n ({ children }, ref) => (\n <div ref={ref} className={`border-0 border-t border-solid ${BORDER} p-2`}>\n {children}\n </div>\n ),\n);\nPopoverSection.displayName = 'Popover.Section';\n\nexport const PopoverEmpty: React.FC<{ children: React.ReactNode }> = ({ children }) => (\n <div className=\"px-3 py-2 text-[length:var(--malachite-font-size-small,13px)] text-[var(--malachite-text-dimmed,rgb(161,161,161))] select-none\">\n {children}\n </div>\n);\n\nexport interface PopoverActionProps {\n icon: React.ReactNode;\n 'aria-label': string;\n onClick?: () => void;\n /** Renders a link; a plain click runs `onClick` instead of following it, when one is given. */\n href?: string;\n disabled?: boolean;\n tooltip?: string;\n}\n\nexport const PopoverAction: React.FC<PopoverActionProps> = ({\n icon,\n 'aria-label': ariaLabel,\n onClick,\n href: rawHref,\n disabled = false,\n tooltip,\n}) => {\n const href = disabled ? undefined : safeHref(rawHref);\n const className = `m-0 inline-flex size-5 items-center justify-center rounded-[var(--malachite-radius-sm,4px)] border-0 bg-transparent p-0 transition-colors duration-150 [&_svg]:size-3! ${disabled ? 'cursor-not-allowed text-[var(--malachite-text-placeholder,rgb(187,187,187))] opacity-50' : `cursor-pointer text-[var(--malachite-text-placeholder,rgb(187,187,187))] hover:bg-[var(--malachite-pillbutton-background,rgb(241,241,241))] hover:text-[var(--malachite-text-secondary,rgb(123,123,123))]`} ${FOCUS_RING_INSET}`;\n const button =\n href !== undefined ? (\n <a\n href={href}\n aria-label={ariaLabel}\n onClick={(event) => {\n if (isPlainClick(event) && onClick) {\n event.preventDefault();\n onClick();\n }\n }}\n className={`no-underline ${className}`}\n >\n {icon}\n </a>\n ) : (\n <button\n type=\"button\"\n aria-label={ariaLabel}\n aria-disabled={disabled || undefined}\n onClick={disabled ? undefined : onClick}\n className={className}\n >\n {icon}\n </button>\n );\n return tooltip ? <Tooltip text={tooltip}>{button}</Tooltip> : button;\n};\n"],"names":["PopoverHeader","title","action","jsxs","BORDER","jsx","SELECTED_ROW","SELECTION_ATTRIBUTES","scrollSelectedRowIntoView","list","row","listTop","top","bottom","rowTop","rowBottom","PopoverList","children","scrollToSelected","shown","useContext","PopoverShownContext","listRef","useRef","useLayoutEffect","observer","NO_SCROLLBAR","PopoverSection","forwardRef","ref","PopoverEmpty","PopoverAction","icon","ariaLabel","onClick","rawHref","disabled","tooltip","href","safeHref","className","FOCUS_RING_INSET","button","event","isPlainClick","Tooltip"],"mappings":"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"}
|
|
@@ -1,14 +1,15 @@
|
|
|
1
|
-
import { useContext as r, useLayoutEffect as
|
|
2
|
-
const f = 150, u =
|
|
1
|
+
import { useContext as r, useLayoutEffect as s, createContext as n } from "react";
|
|
2
|
+
const f = 150, u = n(null), p = n(!1), x = (t, o) => {
|
|
3
3
|
const e = r(u);
|
|
4
|
-
|
|
4
|
+
s(() => {
|
|
5
5
|
if (!(!o || !e))
|
|
6
6
|
return e.register(t);
|
|
7
7
|
}, [o, e, t]);
|
|
8
8
|
};
|
|
9
9
|
export {
|
|
10
10
|
f as HOVER_CLOSE_DELAY_MS,
|
|
11
|
+
p as PopoverShownContext,
|
|
11
12
|
u as PopoverTreeContext,
|
|
12
|
-
|
|
13
|
+
x as useOwnedByPopover
|
|
13
14
|
};
|
|
14
15
|
//# sourceMappingURL=popoverTree.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"popoverTree.js","sources":["../../src/components/popoverTree.ts"],"sourcesContent":["import { createContext, useContext, useLayoutEffect } from 'react';\n\nexport type OverlaySource = () => HTMLElement | null;\n\nexport interface PopoverTree {\n register: (source: OverlaySource) => () => void;\n hold: () => () => void;\n}\n\nexport const HOVER_CLOSE_DELAY_MS = 150;\n\nexport const PopoverTreeContext = createContext<PopoverTree | null>(null);\n\nexport const useOwnedByPopover = (source: OverlaySource, active: boolean): void => {\n const tree = useContext(PopoverTreeContext);\n useLayoutEffect(() => {\n if (!active || !tree) {\n return;\n }\n return tree.register(source);\n }, [active, tree, source]);\n};\n"],"names":["HOVER_CLOSE_DELAY_MS","PopoverTreeContext","createContext","useOwnedByPopover","source","active","tree","useContext","useLayoutEffect"],"mappings":";AASO,MAAMA,IAAuB,KAEvBC,IAAqBC,EAAkC,IAAI,GAE3DC,IAAoB,CAACC,GAAuBC,MAA0B;AAC/E,QAAMC,IAAOC,
|
|
1
|
+
{"version":3,"file":"popoverTree.js","sources":["../../src/components/popoverTree.ts"],"sourcesContent":["import { createContext, useContext, useLayoutEffect } from 'react';\n\nexport type OverlaySource = () => HTMLElement | null;\n\nexport interface PopoverTree {\n register: (source: OverlaySource) => () => void;\n hold: () => () => void;\n}\n\nexport const HOVER_CLOSE_DELAY_MS = 150;\n\nexport const PopoverTreeContext = createContext<PopoverTree | null>(null);\n\nexport const PopoverShownContext = createContext(false);\n\nexport const useOwnedByPopover = (source: OverlaySource, active: boolean): void => {\n const tree = useContext(PopoverTreeContext);\n useLayoutEffect(() => {\n if (!active || !tree) {\n return;\n }\n return tree.register(source);\n }, [active, tree, source]);\n};\n"],"names":["HOVER_CLOSE_DELAY_MS","PopoverTreeContext","createContext","PopoverShownContext","useOwnedByPopover","source","active","tree","useContext","useLayoutEffect"],"mappings":";AASO,MAAMA,IAAuB,KAEvBC,IAAqBC,EAAkC,IAAI,GAE3DC,IAAsBD,EAAc,EAAK,GAEzCE,IAAoB,CAACC,GAAuBC,MAA0B;AAC/E,QAAMC,IAAOC,EAAWP,CAAkB;AAC1C,EAAAQ,EAAgB,MAAM;AAClB,QAAI,GAACH,KAAU,CAACC;AAGhB,aAAOA,EAAK,SAASF,CAAM;AAAA,EAC/B,GAAG,CAACC,GAAQC,GAAMF,CAAM,CAAC;AAC7B;"}
|
package/dist/index.d.ts
CHANGED
|
@@ -3677,6 +3677,8 @@ export declare const NavItem: default_2.ForwardRefExoticComponent<NavItemProps &
|
|
|
3677
3677
|
export declare interface NavItemAsChildProps extends NavItemBaseProps {
|
|
3678
3678
|
asChild: true;
|
|
3679
3679
|
children: default_2.ReactElement;
|
|
3680
|
+
disabled?: never;
|
|
3681
|
+
disabledReason?: never;
|
|
3680
3682
|
href?: never;
|
|
3681
3683
|
target?: never;
|
|
3682
3684
|
rel?: never;
|
|
@@ -3704,6 +3706,10 @@ declare interface NavItemBaseProps extends NativeProps {
|
|
|
3704
3706
|
|
|
3705
3707
|
export declare interface NavItemLinkProps extends NavItemBaseProps {
|
|
3706
3708
|
asChild?: false;
|
|
3709
|
+
/** Leaves the row focusable but inert: `aria-disabled`, no hover, no click or navigation. */
|
|
3710
|
+
disabled?: boolean;
|
|
3711
|
+
/** Why a `disabled` row is unavailable: its tooltip and its accessible description. */
|
|
3712
|
+
disabledReason?: string;
|
|
3707
3713
|
href?: string;
|
|
3708
3714
|
target?: string;
|
|
3709
3715
|
rel?: string;
|
|
@@ -3937,9 +3943,7 @@ export declare const PlusIcon: React.FC<IconProps_85>;
|
|
|
3937
3943
|
export declare const Popover: default_2.FC<PopoverProps> & {
|
|
3938
3944
|
Header: default_2.FC< PopoverHeaderProps>;
|
|
3939
3945
|
Action: default_2.FC< PopoverActionProps>;
|
|
3940
|
-
List: default_2.FC<
|
|
3941
|
-
children: default_2.ReactNode;
|
|
3942
|
-
}>;
|
|
3946
|
+
List: default_2.FC< PopoverListProps>;
|
|
3943
3947
|
Section: default_2.ForwardRefExoticComponent<{
|
|
3944
3948
|
children: default_2.ReactNode;
|
|
3945
3949
|
} & default_2.RefAttributes<HTMLDivElement>>;
|
|
@@ -3971,18 +3975,41 @@ declare interface PopoverBaseProps {
|
|
|
3971
3975
|
anchorRef?: default_2.RefObject<HTMLElement | null>;
|
|
3972
3976
|
offset?: FloatingOffset;
|
|
3973
3977
|
elevation?: 'default' | 'raised';
|
|
3974
|
-
initialFocusRef?: default_2.RefObject<HTMLElement | null>;
|
|
3975
3978
|
/** A click panel also opens, focus inside, on the arrow key its placement points at. */
|
|
3976
3979
|
openOnArrowKey?: boolean;
|
|
3977
3980
|
role?: 'dialog' | 'menu' | 'listbox';
|
|
3978
3981
|
className?: string;
|
|
3979
3982
|
}
|
|
3980
3983
|
|
|
3984
|
+
declare type PopoverFocusSource = {
|
|
3985
|
+
/**
|
|
3986
|
+
* What takes focus when the panel is shown, in place of its first tab stop. Re-read as the
|
|
3987
|
+
* content changes, so focus follows late content but never leaves where the user moved it.
|
|
3988
|
+
*/
|
|
3989
|
+
initialFocus?: PopoverInitialFocus;
|
|
3990
|
+
initialFocusRef?: never;
|
|
3991
|
+
} | {
|
|
3992
|
+
initialFocus?: never;
|
|
3993
|
+
/** @deprecated Use `initialFocus`, which takes the same ref and also follows late content. */
|
|
3994
|
+
initialFocusRef?: default_2.RefObject<HTMLElement | null>;
|
|
3995
|
+
};
|
|
3996
|
+
|
|
3981
3997
|
export declare interface PopoverHeaderProps {
|
|
3982
3998
|
title: string;
|
|
3983
3999
|
action?: default_2.ReactNode;
|
|
3984
4000
|
}
|
|
3985
4001
|
|
|
4002
|
+
export declare type PopoverInitialFocus = default_2.RefObject<HTMLElement | null> | (() => HTMLElement | null | undefined);
|
|
4003
|
+
|
|
4004
|
+
export declare interface PopoverListProps {
|
|
4005
|
+
children: default_2.ReactNode;
|
|
4006
|
+
/**
|
|
4007
|
+
* Scrolls the list to its selected row (`aria-current`, `aria-selected` or a checked radio)
|
|
4008
|
+
* each time the popover is shown, once that row mounts. Only the list scrolls.
|
|
4009
|
+
*/
|
|
4010
|
+
scrollToSelected?: boolean;
|
|
4011
|
+
}
|
|
4012
|
+
|
|
3986
4013
|
declare type PopoverName = {
|
|
3987
4014
|
'aria-label': string;
|
|
3988
4015
|
'aria-labelledby'?: string;
|
|
@@ -3993,7 +4020,7 @@ declare type PopoverName = {
|
|
|
3993
4020
|
|
|
3994
4021
|
export declare type PopoverPlacement = FloatingPlacement;
|
|
3995
4022
|
|
|
3996
|
-
export declare type PopoverProps = PopoverBaseProps & PopoverName;
|
|
4023
|
+
export declare type PopoverProps = PopoverBaseProps & PopoverName & PopoverFocusSource;
|
|
3997
4024
|
|
|
3998
4025
|
export declare const PreviewIcon: React.FC<IconProps_86>;
|
|
3999
4026
|
|
package/package.json
CHANGED