@stackone/malachite 2.53.0 → 2.55.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 +4 -3
- package/dist/components/ActionMenu.js +141 -134
- package/dist/components/ActionMenu.js.map +1 -1
- package/dist/components/FilterSearch.js +572 -0
- package/dist/components/FilterSearch.js.map +1 -0
- package/dist/components/PageLayout/regularLayout.js +58 -61
- package/dist/components/PageLayout/regularLayout.js.map +1 -1
- package/dist/components/Tag.js +22 -21
- package/dist/components/Tag.js.map +1 -1
- package/dist/components/Tooltip.js +97 -93
- package/dist/components/Tooltip.js.map +1 -1
- package/dist/components/actionMenuStyles.js +28 -19
- package/dist/components/actionMenuStyles.js.map +1 -1
- package/dist/components/filterSearchModel.js +76 -0
- package/dist/components/filterSearchModel.js.map +1 -0
- package/dist/components/filterSearchStyles.js +28 -0
- package/dist/components/filterSearchStyles.js.map +1 -0
- package/dist/index.d.ts +70 -0
- package/dist/index.js +407 -405
- package/dist/index.js.map +1 -1
- package/dist/tailwind.css.js +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"filterSearchModel.js","sources":["../../src/components/filterSearchModel.ts"],"sourcesContent":["export interface FilterSearchItem {\n value: string;\n label: string;\n disabled?: boolean;\n}\n\nexport interface FilterSearchFilter {\n value: string;\n label: string;\n /** Shown beside the filter's name in the menu, and beside its values in a cross-filter search. */\n info?: string;\n /** Right-aligned hint on the filter's row, e.g. `e.g. Attio, Ashby`. */\n example?: string;\n items: FilterSearchItem[];\n}\n\nexport interface FilterSearchSelection {\n filter: string;\n items: string[];\n}\n\n/** One filter's new values. An empty `items` means the filter was removed. */\nexport interface FilterSearchChange {\n filter: string;\n items: string[];\n}\n\nexport interface FilterSearchUpdate {\n next: FilterSearchSelection[];\n changes: FilterSearchChange[];\n}\n\nexport type FilterSearchMode = 'filters' | 'items' | 'search';\n\nexport type FilterSearchToggle = 'select' | 'deselect';\n\nexport interface FilterSearchItemRow {\n item: FilterSearchItem;\n filter: FilterSearchFilter;\n selected: boolean;\n}\n\nexport interface FilterSearchRows {\n /** The Select All / Deselect All row, absent when no enabled value matches. */\n toggle: FilterSearchToggle | null;\n items: FilterSearchItemRow[];\n}\n\nexport const resolveMode = (activeFilter: string | null, query: string): FilterSearchMode => {\n if (activeFilter !== null) return 'items';\n return query.trim().length > 0 ? 'search' : 'filters';\n};\n\nexport const matchesQuery = (item: FilterSearchItem, query: string): boolean => {\n const needle = query.trim().toLowerCase();\n return item.label.toLowerCase().includes(needle) || item.value.toLowerCase().includes(needle);\n};\n\nconst selectedValues = (selections: FilterSearchSelection[], filter: string): Set<string> =>\n new Set(selections.find((selection) => selection.filter === filter)?.items ?? []);\n\nconst toRows = (\n filters: FilterSearchFilter[],\n selections: FilterSearchSelection[],\n): FilterSearchItemRow[] =>\n filters.flatMap((filter) => {\n const selected = selectedValues(selections, filter.value);\n return filter.items.map((item) => ({ item, filter, selected: selected.has(item.value) }));\n });\n\n/**\n * \"Deselect All\" replaces \"Select All\" once every enabled value is chosen, or once every value\n * the query matches is.\n */\nconst toggleFor = (all: FilterSearchItemRow[], query: string): FilterSearchToggle | null => {\n const matched = all.filter((row) => matchesQuery(row.item, query));\n if (!matched.some((row) => !row.item.disabled)) return null;\n\n const everyEnabledSelected = all.every((row) => row.item.disabled || row.selected);\n const everyMatchSelected =\n query.trim().length > 0 &&\n matched.filter((row) => !row.item.disabled).every((row) => row.selected);\n\n return everyEnabledSelected || everyMatchSelected ? 'deselect' : 'select';\n};\n\nconst rowsFor = (all: FilterSearchItemRow[], query: string): FilterSearchRows => ({\n toggle: toggleFor(all, query),\n items: all.filter((row) => matchesQuery(row.item, query)),\n});\n\n/** The values of one filter, as the menu lists them once that filter is picked. */\nexport const filterRows = (\n filter: FilterSearchFilter | undefined,\n selections: FilterSearchSelection[],\n query: string,\n): FilterSearchRows =>\n filter ? rowsFor(toRows([filter], selections), query) : { toggle: null, items: [] };\n\n/** The values of every filter that match a query typed before any filter was picked. */\nexport const searchRows = (\n filters: FilterSearchFilter[],\n selections: FilterSearchSelection[],\n query: string,\n): FilterSearchRows => rowsFor(toRows(filters, selections), query);\n\n// As sets: a Select All that adds nothing returns the values in item order, not the order chosen.\nconst sameItems = (a: string[], b: string[]) => {\n const set = new Set(b);\n return a.length === set.size && a.every((value) => set.has(value));\n};\n\n/** Applies per-filter changes, keeping each filter where it already was and dropping the emptied. */\nconst applyChanges = (\n selections: FilterSearchSelection[],\n proposed: FilterSearchChange[],\n): FilterSearchUpdate => {\n const changes = proposed.filter(\n (change) => !sameItems(change.items, [...selectedValues(selections, change.filter)]),\n );\n const byFilter = new Map(changes.map((change) => [change.filter, change.items]));\n const kept = selections\n .map((selection) => ({\n filter: selection.filter,\n items: byFilter.get(selection.filter) ?? selection.items,\n }))\n .filter((selection) => selection.items.length > 0);\n const added = changes.filter(\n (change) =>\n change.items.length > 0 &&\n !selections.some((selection) => selection.filter === change.filter),\n );\n\n return { next: [...kept, ...added], changes };\n};\n\nexport const toggleValue = (\n selections: FilterSearchSelection[],\n filter: string,\n value: string,\n): FilterSearchUpdate => {\n const current = [...selectedValues(selections, filter)];\n const items = current.includes(value)\n ? current.filter((item) => item !== value)\n : [...current, value];\n\n return applyChanges(selections, [{ filter, items }]);\n};\n\n/** Select All keeps what is already chosen and adds every enabled value the query matches. */\nexport const selectAll = (\n filters: FilterSearchFilter[],\n selections: FilterSearchSelection[],\n query: string,\n): FilterSearchUpdate =>\n applyChanges(\n selections,\n filters.map((filter) => {\n const selected = selectedValues(selections, filter.value);\n const added = filter.items\n .filter(\n (item) =>\n !selected.has(item.value) && !item.disabled && matchesQuery(item, query),\n )\n .map((item) => item.value);\n // Chosen values stay even when `items` no longer lists them (a stale or lazy list).\n return { filter: filter.value, items: [...selected, ...added] };\n }),\n );\n\n/** Deselect All drops every enabled value the query matches and keeps the rest. */\nexport const deselectAll = (\n filters: FilterSearchFilter[],\n selections: FilterSearchSelection[],\n query: string,\n): FilterSearchUpdate =>\n applyChanges(\n selections,\n filters.map((filter) => {\n const selected = selectedValues(selections, filter.value);\n const dropped = new Set(\n filter.items\n .filter((item) => !item.disabled && matchesQuery(item, query))\n .map((item) => item.value),\n );\n return {\n filter: filter.value,\n items: [...selected].filter((value) => !dropped.has(value)),\n };\n }),\n );\n\nexport const removeFilter = (\n selections: FilterSearchSelection[],\n filter: string,\n): FilterSearchUpdate => applyChanges(selections, [{ filter, items: [] }]);\n\nexport const clearAll = (selections: FilterSearchSelection[]): FilterSearchUpdate =>\n applyChanges(\n selections,\n selections.map((selection) => ({ filter: selection.filter, items: [] })),\n );\n\n/** `Connector: Notion`, or `Connector: (Notion, Attio)` once there is more than one value. */\nexport const chipText = (filterLabel: string, itemLabels: string[]): string => {\n if (itemLabels.length === 0) return filterLabel;\n if (itemLabels.length === 1) return `${filterLabel}: ${itemLabels[0]}`;\n return `${filterLabel}: (${itemLabels.join(', ')})`;\n};\n\n/**\n * The order chips show filters in: when each was first added. A consumer reading its selection back\n * from the URL gets it in a fixed key order, which would reshuffle the chips on every change.\n */\nexport const orderSelections = (\n selections: FilterSearchSelection[],\n order: string[],\n /** A filter to hold its place in `order` while it has no values, e.g. the one being edited. */\n keep: string | null = null,\n): string[] => {\n const present = new Set(selections.map((selection) => selection.filter));\n const kept = order.filter((filter) => present.has(filter) || filter === keep);\n return [\n ...kept,\n ...selections.map((selection) => selection.filter).filter((f) => !kept.includes(f)),\n ];\n};\n"],"names":["resolveMode","activeFilter","query","matchesQuery","item","needle","selectedValues","selections","filter","_a","selection","toRows","filters","selected","toggleFor","all","matched","row","everyEnabledSelected","everyMatchSelected","rowsFor","filterRows","searchRows","sameItems","a","b","set","value","applyChanges","proposed","changes","change","byFilter","kept","added","toggleValue","current","items","selectAll","deselectAll","dropped","removeFilter","clearAll","chipText","filterLabel","itemLabels","orderSelections","order","keep","present","f"],"mappings":"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"}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { injectStyleSheet as n } from "./injectStyleSheet.js";
|
|
2
|
+
import { ensureOverlayStyles as s } from "./portalOverlay.js";
|
|
3
|
+
const e = ".malachite-filtersearch-row", t = ".malachite-filtersearch-pill", c = ".malachite-filtersearch-hint", o = ".malachite-filtersearch-loading", a = ".malachite-filtersearch-crumb", r = "var(--malachite-accent-foreground, rgb(2, 122, 66))", h = "var(--malachite-accent-background, rgb(0, 175, 102))", d = "var(--malachite-accent-background-glass, rgba(0, 175, 102, 0.08))", l = "var(--malachite-text-secondary, rgb(123, 123, 123))", i = "var(--malachite-text-placeholder, rgb(187, 187, 187))", m = "var(--malachite-tag-default-background, rgba(123, 123, 123, 0.1))", u = "var(--malachite-card-background, rgb(255, 255, 255))", g = [
|
|
4
|
+
`${e} { background: transparent; color: ${l}; }`,
|
|
5
|
+
`${e}[data-highlighted='true'] { background: ${d}; color: ${r}; }`,
|
|
6
|
+
`${e}[data-disabled='true'] { color: ${i}; cursor: not-allowed; }`,
|
|
7
|
+
`${t} { background: ${m}; color: ${l}; }`,
|
|
8
|
+
`${e}[data-highlighted='true'] ${t} { background: ${h}; color: ${u}; }`,
|
|
9
|
+
`${c} { color: ${i}; }`,
|
|
10
|
+
`${e}[data-highlighted='true'] ${c} { color: ${r}; }`,
|
|
11
|
+
`${a} { color: inherit; }`,
|
|
12
|
+
`${a}:hover { color: ${r}; }`,
|
|
13
|
+
`${a}:focus-visible { outline: 2px solid var(--malachite-text-primary, rgb(10, 10, 10)); outline-offset: 2px; }`,
|
|
14
|
+
"@keyframes malachite-filtersearch-pulse { 50% { opacity: 0.5; } }",
|
|
15
|
+
`${o} { animation: malachite-filtersearch-pulse 1.6s ease-in-out infinite; }`,
|
|
16
|
+
`@media (prefers-reduced-motion: reduce) { ${o} { animation: none; } }`
|
|
17
|
+
], f = {
|
|
18
|
+
row: e.slice(1),
|
|
19
|
+
pill: t.slice(1),
|
|
20
|
+
hint: c.slice(1),
|
|
21
|
+
loading: o.slice(1),
|
|
22
|
+
crumb: a.slice(1)
|
|
23
|
+
}, p = () => (s(), n("malachite-filtersearch-styles", g));
|
|
24
|
+
export {
|
|
25
|
+
f as FILTER_SEARCH_CLASS,
|
|
26
|
+
p as ensureFilterSearchStyles
|
|
27
|
+
};
|
|
28
|
+
//# sourceMappingURL=filterSearchStyles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"filterSearchStyles.js","sources":["../../src/components/filterSearchStyles.ts"],"sourcesContent":["// The menu portals into document.body, outside the shadow root the Tailwind sheet is adopted into,\n// so its rows are styled here. Never inline a row's background: it would outrank these rules.\n\nimport { injectStyleSheet } from './injectStyleSheet';\nimport { ensureOverlayStyles } from './portalOverlay';\n\nconst ROW = '.malachite-filtersearch-row';\nconst PILL = '.malachite-filtersearch-pill';\nconst HINT = '.malachite-filtersearch-hint';\nconst LOADING = '.malachite-filtersearch-loading';\nconst CRUMB = '.malachite-filtersearch-crumb';\n\nconst ACCENT = 'var(--malachite-accent-foreground, rgb(2, 122, 66))';\nconst ACCENT_FILL = 'var(--malachite-accent-background, rgb(0, 175, 102))';\nconst ACCENT_GLASS = 'var(--malachite-accent-background-glass, rgba(0, 175, 102, 0.08))';\nconst SECONDARY = 'var(--malachite-text-secondary, rgb(123, 123, 123))';\nconst PLACEHOLDER = 'var(--malachite-text-placeholder, rgb(187, 187, 187))';\nconst PILL_BACKGROUND = 'var(--malachite-tag-default-background, rgba(123, 123, 123, 0.1))';\n// No palette entry exists for text on a solid accent fill; the card surface is its contrast.\nconst ON_ACCENT = 'var(--malachite-card-background, rgb(255, 255, 255))';\n\n// Highlight is the keyboard cursor, so it paints the accent tint the old antd menu did.\nconst RULES = [\n `${ROW} { background: transparent; color: ${SECONDARY}; }`,\n `${ROW}[data-highlighted='true'] { background: ${ACCENT_GLASS}; color: ${ACCENT}; }`,\n `${ROW}[data-disabled='true'] { color: ${PLACEHOLDER}; cursor: not-allowed; }`,\n `${PILL} { background: ${PILL_BACKGROUND}; color: ${SECONDARY}; }`,\n `${ROW}[data-highlighted='true'] ${PILL} { background: ${ACCENT_FILL}; color: ${ON_ACCENT}; }`,\n `${HINT} { color: ${PLACEHOLDER}; }`,\n `${ROW}[data-highlighted='true'] ${HINT} { color: ${ACCENT}; }`,\n `${CRUMB} { color: inherit; }`,\n `${CRUMB}:hover { color: ${ACCENT}; }`,\n `${CRUMB}:focus-visible { outline: 2px solid var(--malachite-text-primary, rgb(10, 10, 10)); outline-offset: 2px; }`,\n `@keyframes malachite-filtersearch-pulse { 50% { opacity: 0.5; } }`,\n `${LOADING} { animation: malachite-filtersearch-pulse 1.6s ease-in-out infinite; }`,\n `@media (prefers-reduced-motion: reduce) { ${LOADING} { animation: none; } }`,\n];\n\nexport const FILTER_SEARCH_CLASS = {\n row: ROW.slice(1),\n pill: PILL.slice(1),\n hint: HINT.slice(1),\n loading: LOADING.slice(1),\n crumb: CRUMB.slice(1),\n} as const;\n\nexport const ensureFilterSearchStyles = (): CSSStyleSheet | null => {\n ensureOverlayStyles();\n return injectStyleSheet('malachite-filtersearch-styles', RULES);\n};\n"],"names":["ROW","PILL","HINT","LOADING","CRUMB","ACCENT","ACCENT_FILL","ACCENT_GLASS","SECONDARY","PLACEHOLDER","PILL_BACKGROUND","ON_ACCENT","RULES","FILTER_SEARCH_CLASS","ensureFilterSearchStyles","ensureOverlayStyles","injectStyleSheet"],"mappings":";;AAMA,MAAMA,IAAM,+BACNC,IAAO,gCACPC,IAAO,gCACPC,IAAU,mCACVC,IAAQ,iCAERC,IAAS,uDACTC,IAAc,wDACdC,IAAe,qEACfC,IAAY,uDACZC,IAAc,yDACdC,IAAkB,qEAElBC,IAAY,wDAGZC,IAAQ;AAAA,EACV,GAAGZ,CAAG,sCAAsCQ,CAAS;AAAA,EACrD,GAAGR,CAAG,2CAA2CO,CAAY,YAAYF,CAAM;AAAA,EAC/E,GAAGL,CAAG,mCAAmCS,CAAW;AAAA,EACpD,GAAGR,CAAI,kBAAkBS,CAAe,YAAYF,CAAS;AAAA,EAC7D,GAAGR,CAAG,6BAA6BC,CAAI,kBAAkBK,CAAW,YAAYK,CAAS;AAAA,EACzF,GAAGT,CAAI,aAAaO,CAAW;AAAA,EAC/B,GAAGT,CAAG,6BAA6BE,CAAI,aAAaG,CAAM;AAAA,EAC1D,GAAGD,CAAK;AAAA,EACR,GAAGA,CAAK,mBAAmBC,CAAM;AAAA,EACjC,GAAGD,CAAK;AAAA,EACR;AAAA,EACA,GAAGD,CAAO;AAAA,EACV,6CAA6CA,CAAO;AACxD,GAEaU,IAAsB;AAAA,EAC/B,KAAKb,EAAI,MAAM,CAAC;AAAA,EAChB,MAAMC,EAAK,MAAM,CAAC;AAAA,EAClB,MAAMC,EAAK,MAAM,CAAC;AAAA,EAClB,SAASC,EAAQ,MAAM,CAAC;AAAA,EACxB,OAAOC,EAAM,MAAM,CAAC;AACxB,GAEaU,IAA2B,OACpCC,EAAA,GACOC,EAAiB,iCAAiCJ,CAAK;"}
|
package/dist/index.d.ts
CHANGED
|
@@ -103,6 +103,8 @@ export declare type ActionMenuItem = {
|
|
|
103
103
|
onClick?: () => void;
|
|
104
104
|
/** Renders a link; a plain click runs `onClick` instead of following it, when one is given. */
|
|
105
105
|
href?: string;
|
|
106
|
+
/** Where `href` opens; `'_blank'` also adds `noopener noreferrer`. */
|
|
107
|
+
target?: default_2.HTMLAttributeAnchorTarget;
|
|
106
108
|
disabled?: boolean;
|
|
107
109
|
/** `'hover'` turns the item destructive only on hover or focus. */
|
|
108
110
|
danger?: boolean | 'hover';
|
|
@@ -1167,6 +1169,15 @@ export declare interface ConnectionHeaderProps {
|
|
|
1167
1169
|
|
|
1168
1170
|
export declare const ConnectorIcon: React.FC<IconProps_29>;
|
|
1169
1171
|
|
|
1172
|
+
/**
|
|
1173
|
+
* The text half of the 28/32/42 control ladder. Keys are control sizes, which deliberately do
|
|
1174
|
+
* NOT match the type scale's names: control `medium` is 13px (`font-size-small`, not `-medium`
|
|
1175
|
+
* at 14px) and control `large` is the off-ladder 15px rung, not `font-size-large` at 16px.
|
|
1176
|
+
*/
|
|
1177
|
+
declare type ControlSize = 'small' | 'medium' | 'large';
|
|
1178
|
+
|
|
1179
|
+
declare type ControlWidth = string | number;
|
|
1180
|
+
|
|
1170
1181
|
export declare const CopyIcon: React.FC<IconProps_30>;
|
|
1171
1182
|
|
|
1172
1183
|
export declare const CsvIcon: React.FC<IconProps_31>;
|
|
@@ -1589,6 +1600,62 @@ export declare const FilledCaretRightIcon: React.FC<IconProps_52>;
|
|
|
1589
1600
|
|
|
1590
1601
|
export declare const FilterIcon: React.FC<IconProps_53>;
|
|
1591
1602
|
|
|
1603
|
+
export declare const FilterSearch: default_2.FC<FilterSearchProps>;
|
|
1604
|
+
|
|
1605
|
+
/** One filter's new values. An empty `items` means the filter was removed. */
|
|
1606
|
+
export declare interface FilterSearchChange {
|
|
1607
|
+
filter: string;
|
|
1608
|
+
items: string[];
|
|
1609
|
+
}
|
|
1610
|
+
|
|
1611
|
+
export declare interface FilterSearchFilter {
|
|
1612
|
+
value: string;
|
|
1613
|
+
label: string;
|
|
1614
|
+
/** Shown beside the filter's name in the menu, and beside its values in a cross-filter search. */
|
|
1615
|
+
info?: string;
|
|
1616
|
+
/** Right-aligned hint on the filter's row, e.g. `e.g. Attio, Ashby`. */
|
|
1617
|
+
example?: string;
|
|
1618
|
+
items: FilterSearchItem[];
|
|
1619
|
+
}
|
|
1620
|
+
|
|
1621
|
+
export declare interface FilterSearchItem {
|
|
1622
|
+
value: string;
|
|
1623
|
+
label: string;
|
|
1624
|
+
disabled?: boolean;
|
|
1625
|
+
}
|
|
1626
|
+
|
|
1627
|
+
export declare interface FilterSearchProps {
|
|
1628
|
+
filters: FilterSearchFilter[];
|
|
1629
|
+
/** Controlled: the bar always shows `value`, so a URL-backed selection needs no syncing. */
|
|
1630
|
+
value: FilterSearchSelection[];
|
|
1631
|
+
/** `changes` lists only the filters that moved; an empty `items` means that filter was removed. */
|
|
1632
|
+
onChange: (next: FilterSearchSelection[], changes: FilterSearchChange[]) => void;
|
|
1633
|
+
/** Called when the clear control empties the bar, after `onChange`. */
|
|
1634
|
+
onClear?: () => void;
|
|
1635
|
+
/** The filter whose values are open, or `null` on the filter list — for loading values lazily. */
|
|
1636
|
+
onActiveFilterChange?: (filter: string | null) => void;
|
|
1637
|
+
placeholder?: string;
|
|
1638
|
+
size?: FilterSearchSize;
|
|
1639
|
+
width?: ControlWidth;
|
|
1640
|
+
loading?: boolean;
|
|
1641
|
+
disabled?: boolean;
|
|
1642
|
+
clearable?: boolean;
|
|
1643
|
+
/** Chips past this count collapse into `+N`. */
|
|
1644
|
+
maxVisibleChips?: number;
|
|
1645
|
+
className?: string;
|
|
1646
|
+
style?: default_2.CSSProperties;
|
|
1647
|
+
id?: string;
|
|
1648
|
+
'aria-label'?: string;
|
|
1649
|
+
'aria-labelledby'?: string;
|
|
1650
|
+
}
|
|
1651
|
+
|
|
1652
|
+
export declare interface FilterSearchSelection {
|
|
1653
|
+
filter: string;
|
|
1654
|
+
items: string[];
|
|
1655
|
+
}
|
|
1656
|
+
|
|
1657
|
+
export declare type FilterSearchSize = ControlSize;
|
|
1658
|
+
|
|
1592
1659
|
export declare const Flex: default_2.FC<FlexProps>;
|
|
1593
1660
|
|
|
1594
1661
|
export declare enum FlexAlign {
|
|
@@ -4791,6 +4858,7 @@ export declare interface TagProps {
|
|
|
4791
4858
|
/** The cursor over a tag that is not clickable. Unset, it is whatever an ancestor sets
|
|
4792
4859
|
* through `--malachite-ctx-tag-cursor` (a `NavItem` row sets its pointer), else the arrow. */
|
|
4793
4860
|
pointerType?: 'pointer' | 'default';
|
|
4861
|
+
/** Makes it a button, unless `onRemove` is set; keep `value` and `icon` non-interactive. */
|
|
4794
4862
|
onClick?: () => void;
|
|
4795
4863
|
onRemove?: (e: default_2.MouseEvent) => void;
|
|
4796
4864
|
/** Explains the tag on hover. Takes the place of the truncation tooltip, which only repeats
|
|
@@ -5036,6 +5104,8 @@ declare interface TooltipProps {
|
|
|
5036
5104
|
describesTrigger?: boolean;
|
|
5037
5105
|
/** False to open on hover only, e.g. where script moves focus onto the trigger. */
|
|
5038
5106
|
showOnFocus?: boolean;
|
|
5107
|
+
/** Makes a trigger that cannot take focus a tab stop. Not for focusable children. */
|
|
5108
|
+
focusableTrigger?: boolean;
|
|
5039
5109
|
}
|
|
5040
5110
|
|
|
5041
5111
|
export declare const TrashIcon: React.FC<IconProps_106>;
|