@leta-io/components 0.3.0 → 0.4.1
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/assets/calendar.png +0 -0
- package/dist/assets/calendar.webp +0 -0
- package/dist/index.d.ts +339 -50
- package/dist/index.js +1411 -1098
- package/package.json +3 -3
package/dist/index.d.ts
CHANGED
|
@@ -204,8 +204,11 @@ interface BadgeProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'childr
|
|
|
204
204
|
declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
|
|
205
205
|
|
|
206
206
|
interface TagProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'> {
|
|
207
|
-
/**
|
|
208
|
-
|
|
207
|
+
/**
|
|
208
|
+
* Tag label. Usually text; a node is accepted so a host can wrap the text in a
|
|
209
|
+
* hover target (the group filter's tag tooltip) without the ✕ joining it.
|
|
210
|
+
*/
|
|
211
|
+
label: React.ReactNode;
|
|
209
212
|
/**
|
|
210
213
|
* When provided, renders a trailing Cancel icon as a <button>.
|
|
211
214
|
* Callback fires on button click.
|
|
@@ -231,6 +234,12 @@ interface ChipProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>,
|
|
|
231
234
|
label: string;
|
|
232
235
|
/** Optional icon before the label. */
|
|
233
236
|
leadingIcon?: IconName;
|
|
237
|
+
/**
|
|
238
|
+
* Colour for the leading icon (a CSS colour / `var(--…)`). Defaults to the
|
|
239
|
+
* neutral button icon. For a chip that names a state with its own colour — the
|
|
240
|
+
* Deliveries "Filter by: Delayed" chip draws its SLA icon in the error colour.
|
|
241
|
+
*/
|
|
242
|
+
leadingIconColor?: string;
|
|
234
243
|
/** Optional icon after the label. */
|
|
235
244
|
trailingIcon?: IconName;
|
|
236
245
|
/** When true the chip renders in the Active (selected) state. Caller-controlled. */
|
|
@@ -298,6 +307,12 @@ interface FeaturedIconProps extends React.HTMLAttributes<HTMLSpanElement> {
|
|
|
298
307
|
* @default false
|
|
299
308
|
*/
|
|
300
309
|
outlined?: boolean;
|
|
310
|
+
/**
|
|
311
|
+
* Replace the glyph with your own node (sized to the icon box, coloured via
|
|
312
|
+
* `currentColor`) — e.g. an animated version of the same icon. `icon` still
|
|
313
|
+
* names what it is for assistive tech's sake.
|
|
314
|
+
*/
|
|
315
|
+
glyph?: React.ReactNode;
|
|
301
316
|
}
|
|
302
317
|
/**
|
|
303
318
|
* Featured Icon — a rounded-square container with a centered icon, used as a
|
|
@@ -893,20 +908,53 @@ interface TopFilterProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonEleme
|
|
|
893
908
|
/** Filter label. Typically the dimension being filtered (e.g. "Status"). */
|
|
894
909
|
label?: string;
|
|
895
910
|
/**
|
|
896
|
-
*
|
|
897
|
-
*
|
|
898
|
-
*
|
|
911
|
+
* Advanced type: a **joined split control** — the label side (label + optional
|
|
912
|
+
* tag) and, flush against it, a Secondary / Medium / Icon-Only `Chevron-Down`
|
|
913
|
+
* button (Figma `1572:12741`, restructured 2026-10-09). Basic is the label alone.
|
|
899
914
|
*/
|
|
900
915
|
advanced?: boolean;
|
|
901
916
|
/**
|
|
902
|
-
* When true, the filter is currently applied
|
|
903
|
-
* border to the secondary (active) treatment and, at rest, fills
|
|
904
|
-
* active surface. Exposed to assistive tech via `aria-pressed`.
|
|
917
|
+
* When true, the filter is currently applied (Figma's `-Selected` states).
|
|
918
|
+
* Switches the border to the secondary (active) treatment and, at rest, fills
|
|
919
|
+
* with the active surface. Exposed to assistive tech via `aria-pressed`.
|
|
905
920
|
*/
|
|
906
921
|
selected?: boolean;
|
|
907
922
|
/**
|
|
908
|
-
*
|
|
909
|
-
*
|
|
923
|
+
* Advanced only — Figma's `Tags` chip (`Show Tag`), a Neutral Tag naming what the
|
|
924
|
+
* filter holds, e.g. "Pending, +1". It shows whether or not the filter is
|
|
925
|
+
* selected, so a dispatcher can see what each group will show before choosing it
|
|
926
|
+
* (Doc 3 §11). Its ✕ fires {@link onTagClear}.
|
|
927
|
+
*/
|
|
928
|
+
tag?: string;
|
|
929
|
+
/** The tag's ✕. Clears the filter's selection; never activates the filter. */
|
|
930
|
+
onTagClear?: () => void;
|
|
931
|
+
/**
|
|
932
|
+
* Tooltip shown when the pointer is over the **tag's text** (not its ✕, which
|
|
933
|
+
* is about to be clicked). The group filter lists every selected status with
|
|
934
|
+
* its count here, since the tag names only the first (Doc 3 §11). A function is
|
|
935
|
+
* resolved each time the tip opens. Hugs its content up to 232px and is centred
|
|
936
|
+
* on the tag; never shown while the chevron's options are open.
|
|
937
|
+
*/
|
|
938
|
+
tagTooltip?: React.ReactNode | (() => React.ReactNode);
|
|
939
|
+
/**
|
|
940
|
+
* Advanced only. When set, the chevron is **its own button** — the split-button
|
|
941
|
+
* form (Doc 3 §11): the body (`onClick`) activates the filter, the chevron opens
|
|
942
|
+
* its options. Without it the whole pill is one button and the chevron is only
|
|
943
|
+
* an affordance, the older single-target form.
|
|
944
|
+
*/
|
|
945
|
+
onChevronClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
|
|
946
|
+
/** Whether the chevron's options are open — `aria-expanded` on the chevron. */
|
|
947
|
+
expanded?: boolean;
|
|
948
|
+
/** Accessible name for the chevron button. Default "Show {label} statuses". */
|
|
949
|
+
chevronLabel?: string;
|
|
950
|
+
/**
|
|
951
|
+
* Forces a visual state — for catalogs and docs that show every Figma variant at
|
|
952
|
+
* rest. Real use leaves it unset and lets hover/press drive the state.
|
|
953
|
+
*/
|
|
954
|
+
state?: 'idle' | 'hover' | 'pressed';
|
|
955
|
+
/**
|
|
956
|
+
* @deprecated Use {@link tag}. A free-form node shown before the chevron while
|
|
957
|
+
* `advanced && selected`; kept so existing callers keep rendering.
|
|
910
958
|
*/
|
|
911
959
|
badge?: React.ReactNode;
|
|
912
960
|
}
|
|
@@ -925,8 +973,29 @@ interface TopFilterProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonEleme
|
|
|
925
973
|
* - As a general-purpose chip/tag — use Chip or Tag.
|
|
926
974
|
*
|
|
927
975
|
* 2 types (Basic / Advanced) × 6 states (Idle / Hover / Pressed and their
|
|
928
|
-
* `-Selected` counterparts) = 12 Figma variants (`1572:12741
|
|
929
|
-
*
|
|
976
|
+
* `-Selected` counterparts) = 12 Figma variants (`1572:12741`, re-enumerated
|
|
977
|
+
* 2026-10-09).
|
|
978
|
+
*
|
|
979
|
+
* **Basic** — one pill: pad 8/12, `Main Title` (pad 4/0, gap 8) holding the label.
|
|
980
|
+
* Fill/border follow the state; selected draws a 1.5px secondary border (1px
|
|
981
|
+
* otherwise) and, at rest, the *active* surface.
|
|
982
|
+
*
|
|
983
|
+
* **Advanced** (restructured 2026-10-09) — a joined split control, no padding of
|
|
984
|
+
* its own:
|
|
985
|
+
* - **Container** (the label side): pad 8/12, left corners rounded, border on
|
|
986
|
+
* left/top/bottom only — the seam is the chevron button's own left border. In
|
|
987
|
+
* Pressed the container's border closes on the right too and the button's left
|
|
988
|
+
* edge drops, so the darker pressed border reads as the seam.
|
|
989
|
+
* - **Chevron**: a real Desktop Button, Secondary / Medium / Icon Only
|
|
990
|
+
* `Chevron-Down`, 40×40, right corners rounded, its own idle/hover/pressed.
|
|
991
|
+
* - **Selected**: the container goes transparent, the *root* takes the fill
|
|
992
|
+
* (`top-filter-tab-idle/hover/pressed` — the idle one, not `-active`, at rest)
|
|
993
|
+
* and a 1.5px secondary ring drawn over both halves.
|
|
994
|
+
*
|
|
995
|
+
* **Two forms.** Pass `onChevronClick` for the split control the group filter uses
|
|
996
|
+
* (Doc 3 §11): body, tag ✕ and chevron are separate targets, since a button cannot
|
|
997
|
+
* contain buttons. Without it the whole control is one `<button>` and the chevron
|
|
998
|
+
* half is drawn, not interactive.
|
|
930
999
|
*/
|
|
931
1000
|
declare const TopFilter: React.ForwardRefExoticComponent<TopFilterProps & React.RefAttributes<HTMLButtonElement>>;
|
|
932
1001
|
|
|
@@ -938,8 +1007,24 @@ interface TopFilterSectionItem {
|
|
|
938
1007
|
advanced?: boolean;
|
|
939
1008
|
/** When true, this filter is currently applied. Caller-controlled. */
|
|
940
1009
|
selected?: boolean;
|
|
941
|
-
/**
|
|
1010
|
+
/** @deprecated Use `tag`. Free-form node shown inside Advanced filters when selected. */
|
|
942
1011
|
badge?: React.ReactNode;
|
|
1012
|
+
/** Advanced: the Neutral Tag naming what this filter holds, e.g. "Pending, +1". */
|
|
1013
|
+
tag?: string;
|
|
1014
|
+
/** The tag's ✕ — clears this filter's selection. */
|
|
1015
|
+
onTagClear?: () => void;
|
|
1016
|
+
/** Advanced: makes the chevron its own button (the split form, Doc 3 §11). */
|
|
1017
|
+
onChevronClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
|
|
1018
|
+
/** Whether this filter's options are open. */
|
|
1019
|
+
expanded?: boolean;
|
|
1020
|
+
/**
|
|
1021
|
+
* Shown on hover over the **tag's text** (passed to TopFilter's `tagTooltip`)
|
|
1022
|
+
* — what the tag abbreviates ("Pending, +1" hides which statuses the "+1" is).
|
|
1023
|
+
* Pass a sentence such as "Pending (40), Broadcasted (50)." so the selection is
|
|
1024
|
+
* readable without opening the checklist (Doc 3 §11). Suppressed while the
|
|
1025
|
+
* checklist is open.
|
|
1026
|
+
*/
|
|
1027
|
+
tooltip?: React.ReactNode | (() => React.ReactNode);
|
|
943
1028
|
}
|
|
944
1029
|
interface TopFilterSectionProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
|
|
945
1030
|
/** The filters to render, left to right. */
|
|
@@ -1356,7 +1441,7 @@ interface PaginationProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'on
|
|
|
1356
1441
|
* `7292:86007`: **Table** — count + page-number controls + rows-per-page selector;
|
|
1357
1442
|
* **Stacked List** — same controls, condensed; **Combobox** — compact count +
|
|
1358
1443
|
* prev/next only. Prev/next reuse Ghost icon Buttons; the page cell is a 32×32
|
|
1359
|
-
* numbered button (Active = `--surface-secondary-pagination-active`).
|
|
1444
|
+
* numbered button (Active = light `--surface-secondary-pagination-active` + 1px border, dark number).
|
|
1360
1445
|
*/
|
|
1361
1446
|
declare const Pagination: React.ForwardRefExoticComponent<PaginationProps & React.RefAttributes<HTMLDivElement>>;
|
|
1362
1447
|
|
|
@@ -1544,6 +1629,13 @@ interface ModalHeadersProps extends Omit<React.HTMLAttributes<HTMLDivElement>, '
|
|
|
1544
1629
|
leadingIcon?: IconName;
|
|
1545
1630
|
/** Color of the leading icon. Defaults to `--icons-neutral-default`. */
|
|
1546
1631
|
leadingIconColor?: string;
|
|
1632
|
+
/**
|
|
1633
|
+
* Draw the leading icon's outline glyph. Default `true`, the library-wide
|
|
1634
|
+
* default. Pass `false` where Figma binds the filled glyph — the Alert Dialog's
|
|
1635
|
+
* warning header uses `Icon/Warning` (filled), and once `Warning` gained an
|
|
1636
|
+
* outline (2026-10-05) the default would have silently swapped it.
|
|
1637
|
+
*/
|
|
1638
|
+
leadingIconOutlined?: boolean;
|
|
1547
1639
|
/**
|
|
1548
1640
|
* Controls the **Secondary Content** slot (Figma `9200:38903`). Defaults to
|
|
1549
1641
|
* `true` to mirror Figma, where the slot frame is visible. The slot reserves
|
|
@@ -1628,6 +1720,20 @@ type PopoverPlacement = 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
|
|
|
1628
1720
|
interface PopoverProps$1 {
|
|
1629
1721
|
/** The trigger's bounding rect (e.g. from `el.getBoundingClientRect()`). */
|
|
1630
1722
|
anchorRect: DOMRect | null;
|
|
1723
|
+
/**
|
|
1724
|
+
* The trigger ELEMENT, for a panel that must stay attached to it as it moves.
|
|
1725
|
+
*
|
|
1726
|
+
* `anchorRect` is a snapshot taken when the panel opened. That is right for most
|
|
1727
|
+
* triggers, which never move while their panel is open — but not for one whose
|
|
1728
|
+
* own panel changes it: a status filter whose checklist rewrites the filter's
|
|
1729
|
+
* tag ("Pending, +1" → nothing) resizes the pill under the open panel, and a
|
|
1730
|
+
* snapshot leaves the panel stranded where the pill used to be (reported
|
|
1731
|
+
* 2026-10-05). With `anchorEl` the anchor is re-read on every render, whenever
|
|
1732
|
+
* the element resizes, and on window resize — so the panel follows it.
|
|
1733
|
+
* `anchorRect` still provides the first frame and the fallback if the element
|
|
1734
|
+
* leaves the DOM.
|
|
1735
|
+
*/
|
|
1736
|
+
anchorEl?: HTMLElement | null;
|
|
1631
1737
|
onClose: () => void;
|
|
1632
1738
|
placement?: PopoverPlacement;
|
|
1633
1739
|
/**
|
|
@@ -1668,7 +1774,7 @@ interface PopoverProps$1 {
|
|
|
1668
1774
|
* always its trigger — clicking a button focuses it) regains focus once the
|
|
1669
1775
|
* Popover closes, however it closed.
|
|
1670
1776
|
*/
|
|
1671
|
-
declare function Popover({ anchorRect, onClose, placement, flip, offset, children, }: PopoverProps$1): React.ReactElement | null;
|
|
1777
|
+
declare function Popover({ anchorRect, anchorEl, onClose, placement, flip, offset, children, }: PopoverProps$1): React.ReactElement | null;
|
|
1672
1778
|
/**
|
|
1673
1779
|
* MenuPanel — the design-system dropdown card chrome (white surface, 1px border,
|
|
1674
1780
|
* `--rounding-xl`, `--shadow-neutral-3`, 8px padding) for composed
|
|
@@ -1820,6 +1926,8 @@ interface ContentPrimitivesProps extends Omit<React.HTMLAttributes<HTMLDivElemen
|
|
|
1820
1926
|
* that instance unreproducible.
|
|
1821
1927
|
*/
|
|
1822
1928
|
featuredIconColor?: FeaturedIconColor;
|
|
1929
|
+
/** Replaces the Featured Icon's glyph (see `FeaturedIcon.glyph`). */
|
|
1930
|
+
featuredIconGlyph?: React.ReactNode;
|
|
1823
1931
|
showMonogramIcon?: boolean;
|
|
1824
1932
|
monogramLabel?: string;
|
|
1825
1933
|
showTrailingContent?: boolean;
|
|
@@ -1837,13 +1945,32 @@ interface ContentPrimitivesProps extends Omit<React.HTMLAttributes<HTMLDivElemen
|
|
|
1837
1945
|
contentAlign?: 'center' | 'top';
|
|
1838
1946
|
showDescriptionLeadingIcon?: boolean;
|
|
1839
1947
|
descriptionLeadingIcon?: IconName;
|
|
1948
|
+
/**
|
|
1949
|
+
* Colour of the value line's leading icon. Default `--icons-neutral-default`,
|
|
1950
|
+
* the Library's binding. An instance may tint it — the cancelled order's
|
|
1951
|
+
* "Cancellation reason" card draws its Note in `--icons-warning-default`
|
|
1952
|
+
* (Figma `2734:163256`).
|
|
1953
|
+
*/
|
|
1954
|
+
descriptionLeadingIconColor?: string;
|
|
1955
|
+
/**
|
|
1956
|
+
* Text-style class for the value line. Default `text-body-m-medium`, the
|
|
1957
|
+
* Library's binding. The cancellation reason card overrides it to
|
|
1958
|
+
* `text-label-m-medium` (Figma `2734:163256`; the two differ only in kerning).
|
|
1959
|
+
*/
|
|
1960
|
+
listRowTextClassName?: string;
|
|
1840
1961
|
onCopy?: () => void;
|
|
1841
1962
|
showMetricVariance?: boolean;
|
|
1842
1963
|
metricVarianceLabel?: string;
|
|
1843
|
-
/**
|
|
1964
|
+
/**
|
|
1965
|
+
* Direction of the variance figure (Figma "Variance": Neutral→neutral,
|
|
1966
|
+
* Positive→success, Negative→error). Colours the figure only — the variance is
|
|
1967
|
+
* plain text since 2026-10-06, no longer a Badge.
|
|
1968
|
+
*/
|
|
1844
1969
|
metricVarianceColor?: BadgeColor;
|
|
1845
|
-
/**
|
|
1970
|
+
/** @deprecated No longer drawn — the variance stopped being a Badge (Figma 2026-10-06). */
|
|
1846
1971
|
metricVarianceIcon?: IconName;
|
|
1972
|
+
/** The muted phrase after the figure. Default "vs last period". */
|
|
1973
|
+
metricVarianceContext?: string;
|
|
1847
1974
|
showMetricSubtext?: boolean;
|
|
1848
1975
|
showEyebrowTrailingIcon?: boolean;
|
|
1849
1976
|
eyebrowTrailingIcon?: IconName;
|
|
@@ -1893,7 +2020,7 @@ interface NotificationBannerProps extends Omit<React.HTMLAttributes<HTMLDivEleme
|
|
|
1893
2020
|
declare const NotificationBanner: React.ForwardRefExoticComponent<NotificationBannerProps & React.RefAttributes<HTMLDivElement>>;
|
|
1894
2021
|
|
|
1895
2022
|
type MetricVariance = 'none' | 'neutral' | 'positive' | 'negative';
|
|
1896
|
-
interface DesktopMetricCardProps extends Omit<React.
|
|
2023
|
+
interface DesktopMetricCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
|
|
1897
2024
|
/** The large metric value, e.g. "10". */
|
|
1898
2025
|
metric?: string;
|
|
1899
2026
|
/** Eyebrow / period label above the metric, e.g. "This week". */
|
|
@@ -1904,27 +2031,49 @@ interface DesktopMetricCardProps extends Omit<React.ButtonHTMLAttributes<HTMLBut
|
|
|
1904
2031
|
leadingIconOutlined?: boolean;
|
|
1905
2032
|
/** Show the outlined Question help icon after the eyebrow text. Default true. */
|
|
1906
2033
|
showEyebrowTrailingIcon?: boolean;
|
|
1907
|
-
/**
|
|
2034
|
+
/** Direction of change. Default "none" (no variance line). */
|
|
1908
2035
|
variance?: MetricVariance;
|
|
1909
|
-
/**
|
|
2036
|
+
/** The variance figure, e.g. "+10%". Shown when variance ≠ "none". */
|
|
1910
2037
|
varianceLabel?: string;
|
|
2038
|
+
/** The muted phrase after the figure. Default "vs last period". */
|
|
2039
|
+
varianceContext?: string;
|
|
1911
2040
|
/** Optional subtext below the metric. Hidden by default (mirrors Figma). */
|
|
1912
2041
|
subtext?: string;
|
|
1913
2042
|
/** Show the metric subtext row. Default false. */
|
|
1914
2043
|
showMetricSubtext?: boolean;
|
|
1915
2044
|
/**
|
|
1916
|
-
*
|
|
1917
|
-
*
|
|
2045
|
+
* Makes the card explorable: renders Figma's trailing **Secondary / Medium / Icon
|
|
2046
|
+
* Only `Open`** button, which calls this. Omit it for a card whose number is the
|
|
2047
|
+
* whole story — the trailing slot is then empty.
|
|
1918
2048
|
*/
|
|
1919
|
-
|
|
2049
|
+
onExplore?: () => void;
|
|
2050
|
+
/** Accessible name for the explore button. Default "View details". */
|
|
2051
|
+
exploreLabel?: string;
|
|
1920
2052
|
/**
|
|
1921
|
-
*
|
|
1922
|
-
*
|
|
2053
|
+
* Custom trailing content (Figma's trailing **Slot**), replacing the explore
|
|
2054
|
+
* button — e.g. the Deliveries cards' SLA shortcuts. `null` renders nothing.
|
|
1923
2055
|
*/
|
|
2056
|
+
trailingContent?: React.ReactNode;
|
|
2057
|
+
/** The 24px leading icon (Figma `Visual Anchor`). Default `true`. */
|
|
2058
|
+
showVisualAnchor?: boolean;
|
|
2059
|
+
/** @deprecated The card no longer has states — it is always Default. Ignored. */
|
|
1924
2060
|
state?: MetricCardState;
|
|
2061
|
+
/** @deprecated The card is never a button now; interactivity lives in its trailing slot. Ignored. */
|
|
2062
|
+
interactive?: boolean;
|
|
1925
2063
|
}
|
|
1926
|
-
|
|
1927
|
-
|
|
2064
|
+
/** @deprecated Figma removed Hover / Pressed / Focus (2026-10-06); only Default remains. */
|
|
2065
|
+
type MetricCardState = 'default';
|
|
2066
|
+
/**
|
|
2067
|
+
* Desktop Metric Card (Figma `4239:74634`) — a KPI on a bordered card.
|
|
2068
|
+
*
|
|
2069
|
+
* **The card itself is not interactive** (Figma removed its Hover / Pressed / Focus
|
|
2070
|
+
* variants, 2026-10-06). When its data can be explored further, the affordance lives
|
|
2071
|
+
* in the trailing slot: by default a Secondary icon-only `Open` button
|
|
2072
|
+
* ({@link DesktopMetricCardProps.onExplore}), or any caller content — the Deliveries
|
|
2073
|
+
* summary cards put their clickable SLA shortcuts there. One target per action, and the
|
|
2074
|
+
* card never competes with the controls inside it.
|
|
2075
|
+
*/
|
|
2076
|
+
declare const DesktopMetricCard: React.ForwardRefExoticComponent<DesktopMetricCardProps & React.RefAttributes<HTMLDivElement>>;
|
|
1928
2077
|
|
|
1929
2078
|
interface OptionCardProps extends Omit<React.LabelHTMLAttributes<HTMLLabelElement>, 'onChange'> {
|
|
1930
2079
|
/** Card title (Label/M/SemiBold). */
|
|
@@ -2134,12 +2283,20 @@ declare function AccordionHeader({ open, onToggle, children }: AccordionHeaderPr
|
|
|
2134
2283
|
* - `plain` — **Plain / Icon-Only / Small**, a bare glyph hugging the icon with no
|
|
2135
2284
|
* hover fill. Used by the Activity-tab timeline entries (Figma `1487:173235`,
|
|
2136
2285
|
* where the chevron instance is `Variant=Plain, Type=Icon Only, Size=Small`
|
|
2137
|
-
* at 16×16).
|
|
2286
|
+
* at 16×16) and the Trip Route Accordions (`2594:161717`). Its glyph takes the
|
|
2287
|
+
* **Plain button's own colour**, `Icons/secondary/plain-button-idle`, darkening to
|
|
2288
|
+
* `-hover` while the header is hovered — not the neutral icon colour the ghost
|
|
2289
|
+
* variant uses, which is what it painted until 2026-10-05.
|
|
2290
|
+
*
|
|
2291
|
+
* `color` overrides the glyph colour outright, for an instance that rebinds it in
|
|
2292
|
+
* Figma (the Broadcast Event Accordion binds `Icons/neutral/default`).
|
|
2138
2293
|
*/
|
|
2139
|
-
declare function AccordionChevron({ open, onToggle, size, variant, label, }: {
|
|
2294
|
+
declare function AccordionChevron({ open, onToggle, size, variant, label, color, }: {
|
|
2140
2295
|
open: boolean;
|
|
2141
2296
|
onToggle: () => void;
|
|
2142
2297
|
size?: number;
|
|
2298
|
+
/** Overrides the glyph colour (a CSS colour / `var(--…)`). See the doc comment. */
|
|
2299
|
+
color?: string;
|
|
2143
2300
|
/** Visual treatment — see the doc comment. Defaults to `ghost`. */
|
|
2144
2301
|
variant?: 'ghost' | 'plain';
|
|
2145
2302
|
/**
|
|
@@ -2351,6 +2508,13 @@ interface TooltipProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title
|
|
|
2351
2508
|
* is an *instance*, not the component.
|
|
2352
2509
|
*/
|
|
2353
2510
|
width?: number;
|
|
2511
|
+
/**
|
|
2512
|
+
* `standard` only — **hug the content** up to this width, px, instead of a
|
|
2513
|
+
* fixed width. Short copy ("Broadcasted (18).") gets a snug panel; longer copy
|
|
2514
|
+
* wraps once it reaches the cap. Takes precedence over `width`. The group-filter
|
|
2515
|
+
* tag tooltip uses 232 (Playground spec `2784:408287`, ruled 2026-10-09).
|
|
2516
|
+
*/
|
|
2517
|
+
maxWidth?: number;
|
|
2354
2518
|
step?: number;
|
|
2355
2519
|
totalSteps?: number;
|
|
2356
2520
|
skipLabel?: string;
|
|
@@ -2407,6 +2571,8 @@ interface HoverTipProps {
|
|
|
2407
2571
|
ariaLabel?: string;
|
|
2408
2572
|
/** Body width override, px — see {@link TooltipProps.width}. */
|
|
2409
2573
|
width?: number;
|
|
2574
|
+
/** Hug the content up to this width, px — see {@link TooltipProps.maxWidth}. */
|
|
2575
|
+
maxWidth?: number;
|
|
2410
2576
|
/**
|
|
2411
2577
|
* Which `Tooltip` surface to render. Default `small` — the compact dark chip
|
|
2412
2578
|
* used for terse labels ("Copy ID", a truncated value).
|
|
@@ -2460,7 +2626,7 @@ interface HoverTipProps {
|
|
|
2460
2626
|
* name (e.g. the Copy button's `aria-label`); for plain decorative icons the
|
|
2461
2627
|
* label is also exposed via `aria-label` on the wrapper.
|
|
2462
2628
|
*/
|
|
2463
|
-
declare function HoverTip({ label, ariaLabel, width, variant, children, delay, placement, shouldShow, style }: HoverTipProps): React.ReactElement;
|
|
2629
|
+
declare function HoverTip({ label, ariaLabel, width, maxWidth, variant, children, delay, placement, shouldShow, style }: HoverTipProps): React.ReactElement;
|
|
2464
2630
|
|
|
2465
2631
|
/** Which side of the trigger the panel ended up on. */
|
|
2466
2632
|
type TooltipSide = 'above' | 'below' | 'right';
|
|
@@ -2509,7 +2675,46 @@ interface TooltipPosition {
|
|
|
2509
2675
|
}
|
|
2510
2676
|
declare function computeTooltipPosition({ trigger, panel, placement, boundary, margin, }: TooltipPositionInput): TooltipPosition;
|
|
2511
2677
|
|
|
2512
|
-
|
|
2678
|
+
interface TruncatedTextProps {
|
|
2679
|
+
/** The full value. Rendered on one line, clipped with an ellipsis. */
|
|
2680
|
+
text: string;
|
|
2681
|
+
/** Typography class, e.g. `text-label-m-regular`. */
|
|
2682
|
+
className?: string;
|
|
2683
|
+
/** Text colour, e.g. `var(--text-default-label)`. */
|
|
2684
|
+
color?: string;
|
|
2685
|
+
/**
|
|
2686
|
+
* What the tooltip says. Defaults to `text` — the whole value, which is the
|
|
2687
|
+
* point for an address. Order ids pass a head/tail abbreviation instead.
|
|
2688
|
+
*/
|
|
2689
|
+
tipLabel?: React.ReactNode;
|
|
2690
|
+
/** Accessible name for the tip when `tipLabel` isn't the full text. */
|
|
2691
|
+
ariaLabel?: string;
|
|
2692
|
+
/**
|
|
2693
|
+
* Tooltip surface. `standard` (default) fits a long value such as an address on
|
|
2694
|
+
* a 288px paragraph; `small` suits a short label.
|
|
2695
|
+
*/
|
|
2696
|
+
variant?: 'small' | 'standard';
|
|
2697
|
+
/** Wrapper style overrides (the wrapper is `display:block`, full width). */
|
|
2698
|
+
style?: React.CSSProperties;
|
|
2699
|
+
}
|
|
2700
|
+
/**
|
|
2701
|
+
* TruncatedText — one line of text that ellipsises inside its column and shows
|
|
2702
|
+
* the **full value on hover, only when it was actually cut off**.
|
|
2703
|
+
*
|
|
2704
|
+
* Whether it truncates depends on the rendered width, not the string, so it's
|
|
2705
|
+
* measured — and measured **when the pointer arrives** (`shouldShow`), not at
|
|
2706
|
+
* mount. A mount-time read happens before the parent has sized its columns and
|
|
2707
|
+
* reports "not clipped" for everything; by hover time layout has settled. A line
|
|
2708
|
+
* that fits shows no tooltip at all, so the tip never just repeats what's on
|
|
2709
|
+
* screen.
|
|
2710
|
+
*
|
|
2711
|
+
* Shared by the table's Order ID cell (abbreviated tip) and every address line
|
|
2712
|
+
* (pickup / drop-off in tables, trip route cards) — ruled 2026-10-09: every
|
|
2713
|
+
* truncated address reveals itself, and only the line you hover.
|
|
2714
|
+
*/
|
|
2715
|
+
declare function TruncatedText({ text, className, color, tipLabel, ariaLabel, variant, style, }: TruncatedTextProps): React.ReactElement;
|
|
2716
|
+
|
|
2717
|
+
type EmptyStateType = 'no-results' | 'no-reviews' | 'no-broadcast-logs' | 'image-upload' | 'file-upload' | 'no-suspensions' | 'no-items' | 'no-orders' | 'no-network' | 'new-update' | 'no-data' | 'no-trips' | 'no-drivers' | 'no-products' | 'error' | 'comments' | 'notifications' | 'calendar';
|
|
2513
2718
|
type EmptyStateSize = 'mobile' | 'desktop';
|
|
2514
2719
|
interface EmptyStateProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
|
|
2515
2720
|
/** Preset scenario — sets the illustration + default copy. Default `no-orders`. */
|
|
@@ -2984,8 +3189,12 @@ interface MapSearchInputProps extends Omit<React.InputHTMLAttributes<HTMLInputEl
|
|
|
2984
3189
|
disabled?: boolean;
|
|
2985
3190
|
}
|
|
2986
3191
|
/**
|
|
2987
|
-
*
|
|
2988
|
-
*
|
|
3192
|
+
* Overlay search — the `Search Input` type of Data Entry `38:42`, **Overlay** variant
|
|
3193
|
+
* (renamed from "Web Map", 2026-10-06; the component keeps its name so imports don't
|
|
3194
|
+
* break). Use it when search is **overlaid on top of a screen**: map interfaces with
|
|
3195
|
+
* search, and the global search reachable from the Top Bar on any screen. Closed it is
|
|
3196
|
+
* a 350px field; open, a 480px card on `--surface-neutral-search-field` with the
|
|
3197
|
+
* results attached.
|
|
2989
3198
|
* The `state` prop drives the panel (Figma states):
|
|
2990
3199
|
* - `idle` — field only.
|
|
2991
3200
|
* - `no-history` — "No recent searches" helper.
|
|
@@ -3014,7 +3223,7 @@ interface MobileMapSearchInputProps extends Omit<React.InputHTMLAttributes<HTMLI
|
|
|
3014
3223
|
}
|
|
3015
3224
|
/**
|
|
3016
3225
|
* Mobile-map search — the `Search Input` type of Data Entry `38:42` (Mobile Map
|
|
3017
|
-
* variant): a pill `--surface-neutral-
|
|
3226
|
+
* variant): a pill `--surface-neutral-search-field` field with an attached
|
|
3018
3227
|
* `MobileDropdown` results panel holding a list of `MobileMenuOptions` rows
|
|
3019
3228
|
* (pass your own via `children`).
|
|
3020
3229
|
*
|
|
@@ -3158,6 +3367,12 @@ interface DesktopMenuOptionsProps extends Omit<React.HTMLAttributes<HTMLDivEleme
|
|
|
3158
3367
|
active?: boolean;
|
|
3159
3368
|
/** Caller-controlled selected (checkbox/radio selection rows; filter-group reveals tags). */
|
|
3160
3369
|
selected?: boolean;
|
|
3370
|
+
/**
|
|
3371
|
+
* `checkbox-selection` only — draw the checkbox as **indeterminate** (a dash),
|
|
3372
|
+
* for an "All" row whose options are partly ticked. The native checkbox carries
|
|
3373
|
+
* it, so assistive tech hears "mixed". Takes precedence over `selected`.
|
|
3374
|
+
*/
|
|
3375
|
+
indeterminate?: boolean;
|
|
3161
3376
|
disabled?: boolean;
|
|
3162
3377
|
/** Force a visual state for catalogs/stories — overrides interaction + active/selected/disabled. */
|
|
3163
3378
|
state?: DesktopMenuOptionState;
|
|
@@ -3195,7 +3410,7 @@ interface DesktopMenuOptionsProps extends Omit<React.HTMLAttributes<HTMLDivEleme
|
|
|
3195
3410
|
/** Fired on activation (click / Enter / Space). For selection rows, fired with the next checked value. */
|
|
3196
3411
|
onSelect?: (next: boolean) => void;
|
|
3197
3412
|
}
|
|
3198
|
-
type DesktopMenuOptionState = 'idle' | 'hover' | 'pressed' | 'active' | 'disabled' | 'idle-selected' | 'hover-selected' | 'pressed-selected' | 'active-selected';
|
|
3413
|
+
type DesktopMenuOptionState = 'idle' | 'hover' | 'pressed' | 'active' | 'disabled' | 'disabled-selected' | 'idle-selected' | 'hover-selected' | 'pressed-selected' | 'active-selected';
|
|
3199
3414
|
/**
|
|
3200
3415
|
* Desktop Menu Options — a single row inside a desktop menu, dropdown, sidebar,
|
|
3201
3416
|
* calendar, or pager. It's the basic building block of the things people pick
|
|
@@ -3324,6 +3539,12 @@ interface FilterGroupDimension {
|
|
|
3324
3539
|
interface DesktopDropdownsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
|
|
3325
3540
|
/** Which assembled dropdown panel to render (Figma `8230:26475`). Default `combobox`. */
|
|
3326
3541
|
variant?: DesktopDropdownVariant;
|
|
3542
|
+
/**
|
|
3543
|
+
* Move focus onto the panel when it opens, so arrow keys work at once. Default
|
|
3544
|
+
* `true`. Pass `false` for a combobox opened from a field the user is still
|
|
3545
|
+
* typing in (an autocomplete) — the field must keep focus.
|
|
3546
|
+
*/
|
|
3547
|
+
focusOnOpen?: boolean;
|
|
3327
3548
|
/** Row labels for the main list (combobox / timepicker / basic-filter / filter list / actions). */
|
|
3328
3549
|
options?: string[];
|
|
3329
3550
|
/** Initially-selected option index (combobox / timepicker). */
|
|
@@ -3543,6 +3764,14 @@ interface CellProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title' |
|
|
|
3543
3764
|
indeterminate?: boolean;
|
|
3544
3765
|
/** `header-checkbox` / `default-checkbox`: fired with the next checked value. */
|
|
3545
3766
|
onCheckedChange?: (checked: boolean) => void;
|
|
3767
|
+
/** `header-checkbox` / `default-checkbox`: render the checkbox disabled. */
|
|
3768
|
+
checkboxDisabled?: boolean;
|
|
3769
|
+
/**
|
|
3770
|
+
* `default-checkbox`: tooltip explaining why the checkbox is disabled, shown on
|
|
3771
|
+
* hover (a dark Standard tooltip, as wireframe `2721:178853`). A disabled input
|
|
3772
|
+
* fires no pointer events, so the tooltip is bound to a wrapper around it.
|
|
3773
|
+
*/
|
|
3774
|
+
checkboxDisabledTooltip?: string;
|
|
3546
3775
|
/** `sample`: the plain text value. Right-align numerics for scanning. Default "Content". */
|
|
3547
3776
|
text?: string;
|
|
3548
3777
|
/** `sample`: right-align the value (numeric quantities/amounts). Default false. */
|
|
@@ -3559,7 +3788,24 @@ interface CellProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title' |
|
|
|
3559
3788
|
/** `text-link`: the link text. Default "contact@gmail.com". */
|
|
3560
3789
|
link?: string;
|
|
3561
3790
|
/** `text-link`: fired when the link is clicked. */
|
|
3562
|
-
onLinkClick?: () => void;
|
|
3791
|
+
onLinkClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
|
|
3792
|
+
/**
|
|
3793
|
+
* `text-link`: a trailing icon on the link — e.g. `Open` for an identifier that
|
|
3794
|
+
* opens its own drawer ("TRP-103 ↗", "BC-4202 ↗").
|
|
3795
|
+
*
|
|
3796
|
+
* **Use `text-link`, not `actions`, for a link that names a record.** The Actions
|
|
3797
|
+
* cell CENTRES its content (it was built for the ⋯ column, Library `Type=Actions`
|
|
3798
|
+
* `CENTER`, padding 8), while every text cell is left-aligned at 12px, level with
|
|
3799
|
+
* its header. A Trip or Batch ID link rendered in an Actions cell therefore sat
|
|
3800
|
+
* centred while the "—" on rows without one sat flush left — a visible stagger
|
|
3801
|
+
* down the column (reported 2026-10-05). The Library's Text Link cell is `MIN`,
|
|
3802
|
+
* padding 10/12, so the link, the dash and the header share one left edge.
|
|
3803
|
+
*/
|
|
3804
|
+
linkIcon?: IconName;
|
|
3805
|
+
/** `text-link`: draw the link's underline. Default `true` (the Library default). */
|
|
3806
|
+
linkShowUnderline?: boolean;
|
|
3807
|
+
/** `text-link`: a tooltip on the link (e.g. "View Trip"). */
|
|
3808
|
+
linkTooltip?: string;
|
|
3563
3809
|
/** `list-item`: the title (truncates with ellipsis). Default "Text". */
|
|
3564
3810
|
title?: string;
|
|
3565
3811
|
/** `list-item`: the description (truncates with ellipsis). Default "Enter description here". */
|
|
@@ -3913,6 +4159,15 @@ interface TableRow {
|
|
|
3913
4159
|
* changes needs this — currently {@link TableProps.highlightedIds}.
|
|
3914
4160
|
*/
|
|
3915
4161
|
id?: string;
|
|
4162
|
+
/**
|
|
4163
|
+
* The row stays in the table but **cannot be selected** — its checkbox renders
|
|
4164
|
+
* disabled and select-all skips it (ruled 2026-10-02: Returning rows in the
|
|
4165
|
+
* Dispatched group keep the group's Checkbox column with the control off).
|
|
4166
|
+
* Pair with {@link selectionDisabledReason} so the dispatcher learns why.
|
|
4167
|
+
*/
|
|
4168
|
+
selectionDisabled?: boolean;
|
|
4169
|
+
/** Tooltip shown when the pointer is over a disabled row checkbox. */
|
|
4170
|
+
selectionDisabledReason?: string;
|
|
3916
4171
|
}
|
|
3917
4172
|
interface TableProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'rows'> {
|
|
3918
4173
|
/** Column definitions (drive the header + shared column widths). */
|
|
@@ -4073,6 +4328,20 @@ declare const ORDER_TABLE_COLUMNS: TableColumn[];
|
|
|
4073
4328
|
* checkbox column the finished shape must not have.
|
|
4074
4329
|
*/
|
|
4075
4330
|
declare const ORDER_TABLE_COLUMNS_FINISHED: TableColumn[];
|
|
4331
|
+
/**
|
|
4332
|
+
* Instance A — Order Table, **Cancelled view** (ruled 2026-09-30). The finished
|
|
4333
|
+
* shape **without Driver and Trip**: cancelling releases the order from any trip
|
|
4334
|
+
* and driver, and many cancelled orders never had either, so the two columns would
|
|
4335
|
+
* be blank on most rows. Route/Recipient keep Instance B's weights.
|
|
4336
|
+
*
|
|
4337
|
+
* At the 1320 design canvas: Order ID 191 · Route 321 · Recipient 222 · Distance 90
|
|
4338
|
+
* · Duration 110 · Created 120 · Status 140 · Actions 126 (minimum 1106 — it
|
|
4339
|
+
* flex-fills). Like the finished shape, **consume with `<Table selectable={false}>`**.
|
|
4340
|
+
*
|
|
4341
|
+
* When Delivered and Cancelled are selected together, the union rule (Table spec,
|
|
4342
|
+
* Part II preamble) brings Trip and Driver back and the Cancelled rows read "—".
|
|
4343
|
+
*/
|
|
4344
|
+
declare const CANCELLED_ORDER_COLUMNS: TableColumn[];
|
|
4076
4345
|
/**
|
|
4077
4346
|
* Instance B — Unassigned Orders, **Pending view**. No driver and no trip yet, so
|
|
4078
4347
|
* both columns are removed; Route/Recipient re-weight to 60/40 automatically.
|
|
@@ -4178,7 +4447,7 @@ declare const BulkActionsToolbar: React.ForwardRefExoticComponent<BulkActionsToo
|
|
|
4178
4447
|
|
|
4179
4448
|
/**
|
|
4180
4449
|
* - `search-create` — search + filter buttons (Created / Filter / Sort By) on the
|
|
4181
|
-
* left, primary CTAs (
|
|
4450
|
+
* left, primary CTAs (Create Order / Import-Export) on the right.
|
|
4182
4451
|
* - `search-column` — the same search + filters, with a data count + an
|
|
4183
4452
|
* Auto-refresh switch + Columns control on the right.
|
|
4184
4453
|
* - `filters-column` — a Top Filter Section on the left, data count +
|
|
@@ -4212,10 +4481,10 @@ interface TableDataControlProps extends Omit<React.HTMLAttributes<HTMLDivElement
|
|
|
4212
4481
|
searchSection?: React.ReactNode;
|
|
4213
4482
|
/** Left section for `filters-column` — overrides the default Top Filter Section. */
|
|
4214
4483
|
filters?: React.ReactNode;
|
|
4215
|
-
/** Right section for `search-create` — overrides the default
|
|
4484
|
+
/** Right section for `search-create` — overrides the default Create Order + Import/Export. */
|
|
4216
4485
|
ctas?: React.ReactNode;
|
|
4217
4486
|
/**
|
|
4218
|
-
* Show the Primary "
|
|
4487
|
+
* Show the Primary "Create Order" button (labelled "Add Order" before 2026-10-14) in the default `search-create` CTAs.
|
|
4219
4488
|
* Default true; set `false` for the Empty State toolbar, where the primary
|
|
4220
4489
|
* Add Order CTA lives beside the illustration instead (per Figma
|
|
4221
4490
|
* `4368:154614`). Ignored when `ctas` is overridden.
|
|
@@ -4290,7 +4559,7 @@ interface TableContainerProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
|
|
|
4290
4559
|
* **Centred automatically** (see `empty`) — pass the bare Empty State.
|
|
4291
4560
|
*/
|
|
4292
4561
|
noResults?: React.ReactNode;
|
|
4293
|
-
/** Fired by the default Empty State's Add Order
|
|
4562
|
+
/** Fired by the default Empty State's Create Order CTA (labelled "Add Order" before 2026-10-14). */
|
|
4294
4563
|
onAddOrder?: () => void;
|
|
4295
4564
|
/**
|
|
4296
4565
|
* Fill the available height of a flex-column parent (`flex: 1`): the table
|
|
@@ -4376,7 +4645,10 @@ interface SideBarProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children
|
|
|
4376
4645
|
footerItems?: SideBarItem[];
|
|
4377
4646
|
/** Footer version string. Default "Leta Technologies v.3.1.5". */
|
|
4378
4647
|
version?: string;
|
|
4379
|
-
/**
|
|
4648
|
+
/**
|
|
4649
|
+
* @deprecated Global search moved to the Top Bar (Figma 2026-10-06) — the Side Bar
|
|
4650
|
+
* no longer shows it. Defaults to `false`; kept only so existing callers compile.
|
|
4651
|
+
*/
|
|
4380
4652
|
showSearch?: boolean;
|
|
4381
4653
|
/** Search placeholder. Default "Global Search". */
|
|
4382
4654
|
searchPlaceholder?: string;
|
|
@@ -4414,11 +4686,23 @@ interface TopBarProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'
|
|
|
4414
4686
|
onNotificationsClick?: () => void;
|
|
4415
4687
|
/** Fired when the User-Menu is clicked. */
|
|
4416
4688
|
onUserMenuClick?: () => void;
|
|
4689
|
+
/**
|
|
4690
|
+
* Show the global search field in the centre of the bar (Figma 2026-10-06 — it
|
|
4691
|
+
* moved here from the Side Bar). Default `true`.
|
|
4692
|
+
*/
|
|
4693
|
+
showSearch?: boolean;
|
|
4694
|
+
/** Props for the default global search field (placeholder, value, handlers…). */
|
|
4695
|
+
searchProps?: SearchInputProps;
|
|
4696
|
+
/** Replace the default search field entirely (Figma's centre Data Entry). */
|
|
4697
|
+
search?: React.ReactNode;
|
|
4417
4698
|
}
|
|
4418
4699
|
/**
|
|
4419
4700
|
* Top Bar — the persistent application header: contextual wayfinding
|
|
4420
|
-
* (breadcrumbs) on the left,
|
|
4421
|
-
*
|
|
4701
|
+
* (breadcrumbs) on the left, the **global search** in the centre (a fixed 350px
|
|
4702
|
+
* Search Input, "Search anything..." — moved here from the Side Bar, Figma
|
|
4703
|
+
* 2026-10-06), and global controls — notifications and the User-Menu — on the
|
|
4704
|
+
* right. Left and right share the remaining width equally, so the search stays
|
|
4705
|
+
* centred whatever the breadcrumb length. The `active` variant shows an unread-notification dot
|
|
4422
4706
|
* on the bell. Composes Breadcrumbs, Button, and User-Menu.
|
|
4423
4707
|
*
|
|
4424
4708
|
* **Width:** the bar fills its container (`width: 100%`) — in a real app it
|
|
@@ -4532,17 +4816,20 @@ interface AlertDialogProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 't
|
|
|
4532
4816
|
/**
|
|
4533
4817
|
* Footer leading slot — content pinned far left, opposite the actions.
|
|
4534
4818
|
*
|
|
4535
|
-
*
|
|
4536
|
-
*
|
|
4537
|
-
*
|
|
4538
|
-
* the Close / Confirm pair. Switches the footer to `tertiary-action`, which is
|
|
4539
|
-
* the variant that has a leading region.
|
|
4819
|
+
* Content pinned far left, opposite the Close / Confirm pair, for something
|
|
4820
|
+
* that isn't itself an action (e.g. an opt-out checkbox). Switches the footer to
|
|
4821
|
+
* `tertiary-action`, which is the variant that has a leading region.
|
|
4540
4822
|
*/
|
|
4541
4823
|
footerLeading?: React.ReactNode;
|
|
4542
4824
|
/** Cancel/dismiss action label. Default "Close". */
|
|
4543
4825
|
cancelLabel?: string;
|
|
4544
4826
|
/** Confirm action label. Default "Confirm". */
|
|
4545
4827
|
confirmLabel?: string;
|
|
4828
|
+
/**
|
|
4829
|
+
* Leading icon on the confirm button, e.g. `Check` for Change Driver
|
|
4830
|
+
* (Figma `1892:370929`: Primary / Leading Icon). Default none.
|
|
4831
|
+
*/
|
|
4832
|
+
confirmIconLeft?: IconName;
|
|
4546
4833
|
/**
|
|
4547
4834
|
* Style the confirm button as destructive (`Button variant="destructive"`,
|
|
4548
4835
|
* red) instead of the default primary. Doc 3 §5: "primary styled to the
|
|
@@ -4766,7 +5053,9 @@ declare function useScrollEdges(containerRef: React.RefObject<HTMLElement | null
|
|
|
4766
5053
|
* `Escape` is not handled here: overlays own dismissal through the shared Escape
|
|
4767
5054
|
* stack, which is the only thing that knows which layer is on top.
|
|
4768
5055
|
*/
|
|
4769
|
-
declare function useRovingFocus<T extends HTMLElement>(ref: React.RefObject<T | null
|
|
5056
|
+
declare function useRovingFocus<T extends HTMLElement>(ref: React.RefObject<T | null>, { focusOnMount }?: {
|
|
5057
|
+
focusOnMount?: boolean;
|
|
5058
|
+
}): void;
|
|
4770
5059
|
|
|
4771
5060
|
/**
|
|
4772
5061
|
* Smoothly animate an element's `scrollTop`, and **guarantee it lands**.
|
|
@@ -4884,4 +5173,4 @@ interface ExtraLargeModalProps extends Omit<React.HTMLAttributes<HTMLDivElement>
|
|
|
4884
5173
|
*/
|
|
4885
5174
|
declare const ExtraLargeModal: React.ForwardRefExoticComponent<ExtraLargeModalProps & React.RefAttributes<HTMLDivElement>>;
|
|
4886
5175
|
|
|
4887
|
-
export { ALL_ORDER_COLUMNS, AVATAR_PHOTOS, AccordionChevron, AccordionContent, AccordionHeader, type AccordionHeaderProps, AlertDialog, type AlertDialogProps, type AlertDialogVariant, Avatar, type AvatarProps, type AvatarSize, type AvatarTone, BROADCASTED_ORDER_COLUMNS, Badge, type BadgeColor, type BadgeProps, type BreadcrumbCrumb, Breadcrumbs, type BreadcrumbsProps, type BreadcrumbsType, BulkActionsToolbar, type BulkActionsToolbarProps, Button, type ButtonPlatform, type ButtonProps, type ButtonSize, type ButtonVariant, CARET_SIDE, CREATED_BY_COLUMN, Calendar, type CalendarProps, type CaretAlign, type CaretSide, CarouselPagination, type CarouselPaginationProps, Cell, type CellProps, type CellState, type CellType, Checkbox, type CheckboxProps, Chip, type ChipProps, CollapsedSidebarLogo, type CollapsedSidebarLogoProps, ConfigurationCard, type ConfigurationCardProps, ConfigurationCardRow, type ConfigurationCardRowProps, type ConfigurationCardVariant, ContentCard, type ContentCardProps, ContentPrimitives, type ContentPrimitivesProps, type ContentPrimitivesType, DIALOG_OVERLAY_DEFAULT_TIER, DOORSTEP_DELIVERY_IMAGE, type DataRowCell, DataRows, type DataRowsProps, type DataRowsState, type DataRowsVariant, DateTimePicker, type DateTimePickerProps, type DateTimePickerType, type DesktopDropdownVariant, DesktopDropdowns, type DesktopDropdownsProps, type DesktopMenuOptionState, type DesktopMenuOptionType, DesktopMenuOptions, type DesktopMenuOptionsProps, DesktopMetricCard, type DesktopMetricCardProps, DesktopProgressIndicator, type DesktopProgressIndicatorProps, type DesktopProgressIndicatorVariant, DesktopSegmentControl, type DesktopSegmentControlItem, type DesktopSegmentControlProps, type DesktopSegmentControlVariant, DialogOverlay, type DialogOverlayHelpers, type DialogOverlayProps, DurationLabel, type DurationLabelProps, type DurationLabelStatus, type DurationLabelVariant, EmptyState, type EmptyStateProps, type EmptyStateSize, type EmptyStateType, ExtraLargeModal, type ExtraLargeModalProps, FeaturedIcon, type FeaturedIconColor, type FeaturedIconProps, type FeaturedIconSize, FileUpload, FileUploadCard, type FileUploadCardProps, type FileUploadCardStatus, type FileUploadProps, type FilterGroupDimension, Flag, type FlagProps, FooterFrame, type FooterFrameProps, type FooterFrameVariant, FormDemarcator, GroupedInput, type GroupedInputProps, type GroupedInputVariant, HoverTip, type HoverTipProps, InputField, type InputFieldProps, type InputFieldVariant, InputGroup, type InputGroupProps, InputSection, type InputSectionProps, LAST_UPDATED_COLUMN, LargeModal, type LargeModalProps, type LargeModalVariant, LeadingInputFieldElement, type LeadingInputFieldElementProps, type LeadingInputFieldElementVariant, LetaLogo, type LetaLogoProps, ListGroup, type ListGroupProps, type ListItemData, ListSection, type ListSectionProps, LoadingOverlay, type LoadingOverlayProps, MAP_ROUTE_DRIVEN, MAP_ROUTE_PLANNED, MapIcon, type MapIconProps, type MapIconVariant, MapLegend, type MapLegendEntry, type MapLegendProps, MapSearchInput, type MapSearchInputProps, MapView, type MapViewProps, MapZoomControl, type MapZoomControlProps, MenuDivider, MenuFlyout, type MenuFlyoutProps, MenuPanel, type MenuPanelProps, type MetricCardState, type MetricVariance, MobileBadge, type MobileBadgeColor, type MobileBadgeProps, type MobileBadgeVariant, MobileChip, type MobileChipProps, MobileDropdown, type MobileDropdownOption, type MobileDropdownProps, MobileFeaturedIcon, type MobileFeaturedIconColor, type MobileFeaturedIconProps, type MobileFeaturedIconSize, type MobileFeaturedIconVariant, MobileFileUpload, type MobileFileUploadImage, type MobileFileUploadProps, MobileMapSearchInput, type MobileMapSearchInputProps, type MobileMenuOptionState, type MobileMenuOptionType, MobileMenuOptions, type MobileMenuOptionsProps, MobileNavTab, type MobileNavTabProps, MobileSearchInput, type MobileSearchInputProps, MobileSegment, type MobileSegmentProps, ModalDialog, type ModalDialogProps, type ModalDialogVariant, ModalHeaders, type ModalHeadersProps, type ModalHeadersVariant, ModalShell, type ModalShellProps, NotificationBanner, type NotificationBannerProps, type NotificationBannerType, type NotificationBannerVariant, ORDER_TABLE_COLUMNS, ORDER_TABLE_COLUMNS_FINISHED, OptionCard, type OptionCardProps, type OptionCardState, Page, type PageProps, PageTab, type PageTabProps, PageTabsControl, type PageTabsControlItem, type PageTabsControlProps, type PageTabsControlVariant, type PageVariant, Pagination, type PaginationProps, type PaginationVariant, Placeholder, type PlaceholderProps, Popover, type PopoverPlacement, type PopoverProps, ProgressTracker, type ProgressTrackerProps, RadioButton, type RadioButtonProps, SCHEDULED_ORDER_COLUMNS, SIGNATURE_IMAGE, type ScrollEdges, SearchInput, type SearchInputProps, SegmentSwitcherTab, type SegmentSwitcherTabProps, Select, type SelectProps, SelectionControl, type SelectionControlProps, type SelectionControlVariant, Shortcut, type ShortcutProps, SideBar, type SideBarGroup, type SideBarItem, type SideBarProps, type SideBarVariant, Sidetab, type SidetabItem, type SidetabProps, Skeleton, type SkeletonProps, StackedCards, type StackedCardsProps, Stepper, StepperInput, type StepperInputProps, type StepperProps, type StepperVariant, Table, type TableColumn, type TableColumnRole, TableContainer, type TableContainerProps, type TableContainerVariant, TableDataControl, type TableDataControlProps, type TableDataControlVariant, type TableProps, type TableRow, TableSection, type TableSectionProps, Tag, type TagProps, TextArea, type TextAreaBasicProps, type TextAreaProps, type TextAreaRichProps, type TextAreaVariant, Title, type TitleProps, type TitleVariant, Toast, type ToastProps, type ToastType, Toggle, ToggleButton, type ToggleButtonProps, type ToggleProps, Tooltip, type TooltipPlatform, type TooltipPosition, type TooltipPositionInput, type TooltipProps, type TooltipRect, type TooltipSide, type TooltipVariant, TopBar, type TopBarProps, type TopBarVariant, TopFilter, type TopFilterProps, TopFilterSection, type TopFilterSectionItem, type TopFilterSectionProps, TrailingInputFieldElement, type TrailingInputFieldElementProps, type TrailingInputFieldElementVariant, UNASSIGNED_ORDER_COLUMNS, UserMenu, type UserMenuProps, type UserMenuState, ViewSwitcherTab, type ViewSwitcherTabProps, WizardTab, type WizardTabProps, animateScrollTop, computeTooltipPosition, downloadFile, htmlToPlainText, sanitizeRichText, useAccordion, useEscapeLayer, useRovingFocus, useScrollEdges, useScrollShadow };
|
|
5176
|
+
export { ALL_ORDER_COLUMNS, AVATAR_PHOTOS, AccordionChevron, AccordionContent, AccordionHeader, type AccordionHeaderProps, AlertDialog, type AlertDialogProps, type AlertDialogVariant, Avatar, type AvatarProps, type AvatarSize, type AvatarTone, BROADCASTED_ORDER_COLUMNS, Badge, type BadgeColor, type BadgeProps, type BreadcrumbCrumb, Breadcrumbs, type BreadcrumbsProps, type BreadcrumbsType, BulkActionsToolbar, type BulkActionsToolbarProps, Button, type ButtonPlatform, type ButtonProps, type ButtonSize, type ButtonVariant, CANCELLED_ORDER_COLUMNS, CARET_SIDE, CREATED_BY_COLUMN, Calendar, type CalendarProps, type CaretAlign, type CaretSide, CarouselPagination, type CarouselPaginationProps, Cell, type CellProps, type CellState, type CellType, Checkbox, type CheckboxProps, Chip, type ChipProps, CollapsedSidebarLogo, type CollapsedSidebarLogoProps, ConfigurationCard, type ConfigurationCardProps, ConfigurationCardRow, type ConfigurationCardRowProps, type ConfigurationCardVariant, ContentCard, type ContentCardProps, ContentPrimitives, type ContentPrimitivesProps, type ContentPrimitivesType, DIALOG_OVERLAY_DEFAULT_TIER, DOORSTEP_DELIVERY_IMAGE, type DataRowCell, DataRows, type DataRowsProps, type DataRowsState, type DataRowsVariant, DateTimePicker, type DateTimePickerProps, type DateTimePickerType, type DesktopDropdownVariant, DesktopDropdowns, type DesktopDropdownsProps, type DesktopMenuOptionState, type DesktopMenuOptionType, DesktopMenuOptions, type DesktopMenuOptionsProps, DesktopMetricCard, type DesktopMetricCardProps, DesktopProgressIndicator, type DesktopProgressIndicatorProps, type DesktopProgressIndicatorVariant, DesktopSegmentControl, type DesktopSegmentControlItem, type DesktopSegmentControlProps, type DesktopSegmentControlVariant, DialogOverlay, type DialogOverlayHelpers, type DialogOverlayProps, DurationLabel, type DurationLabelProps, type DurationLabelStatus, type DurationLabelVariant, EmptyState, type EmptyStateProps, type EmptyStateSize, type EmptyStateType, ExtraLargeModal, type ExtraLargeModalProps, FeaturedIcon, type FeaturedIconColor, type FeaturedIconProps, type FeaturedIconSize, FileUpload, FileUploadCard, type FileUploadCardProps, type FileUploadCardStatus, type FileUploadProps, type FilterGroupDimension, Flag, type FlagProps, FooterFrame, type FooterFrameProps, type FooterFrameVariant, FormDemarcator, GroupedInput, type GroupedInputProps, type GroupedInputVariant, HoverTip, type HoverTipProps, InputField, type InputFieldProps, type InputFieldVariant, InputGroup, type InputGroupProps, InputSection, type InputSectionProps, LAST_UPDATED_COLUMN, LargeModal, type LargeModalProps, type LargeModalVariant, LeadingInputFieldElement, type LeadingInputFieldElementProps, type LeadingInputFieldElementVariant, LetaLogo, type LetaLogoProps, ListGroup, type ListGroupProps, type ListItemData, ListSection, type ListSectionProps, LoadingOverlay, type LoadingOverlayProps, MAP_ROUTE_DRIVEN, MAP_ROUTE_PLANNED, MapIcon, type MapIconProps, type MapIconVariant, MapLegend, type MapLegendEntry, type MapLegendProps, MapSearchInput, type MapSearchInputProps, MapView, type MapViewProps, MapZoomControl, type MapZoomControlProps, MenuDivider, MenuFlyout, type MenuFlyoutProps, MenuPanel, type MenuPanelProps, type MetricCardState, type MetricVariance, MobileBadge, type MobileBadgeColor, type MobileBadgeProps, type MobileBadgeVariant, MobileChip, type MobileChipProps, MobileDropdown, type MobileDropdownOption, type MobileDropdownProps, MobileFeaturedIcon, type MobileFeaturedIconColor, type MobileFeaturedIconProps, type MobileFeaturedIconSize, type MobileFeaturedIconVariant, MobileFileUpload, type MobileFileUploadImage, type MobileFileUploadProps, MobileMapSearchInput, type MobileMapSearchInputProps, type MobileMenuOptionState, type MobileMenuOptionType, MobileMenuOptions, type MobileMenuOptionsProps, MobileNavTab, type MobileNavTabProps, MobileSearchInput, type MobileSearchInputProps, MobileSegment, type MobileSegmentProps, ModalDialog, type ModalDialogProps, type ModalDialogVariant, ModalHeaders, type ModalHeadersProps, type ModalHeadersVariant, ModalShell, type ModalShellProps, NotificationBanner, type NotificationBannerProps, type NotificationBannerType, type NotificationBannerVariant, ORDER_TABLE_COLUMNS, ORDER_TABLE_COLUMNS_FINISHED, OptionCard, type OptionCardProps, type OptionCardState, Page, type PageProps, PageTab, type PageTabProps, PageTabsControl, type PageTabsControlItem, type PageTabsControlProps, type PageTabsControlVariant, type PageVariant, Pagination, type PaginationProps, type PaginationVariant, Placeholder, type PlaceholderProps, Popover, type PopoverPlacement, type PopoverProps, ProgressTracker, type ProgressTrackerProps, RadioButton, type RadioButtonProps, SCHEDULED_ORDER_COLUMNS, SIGNATURE_IMAGE, type ScrollEdges, SearchInput, type SearchInputProps, SegmentSwitcherTab, type SegmentSwitcherTabProps, Select, type SelectProps, SelectionControl, type SelectionControlProps, type SelectionControlVariant, Shortcut, type ShortcutProps, SideBar, type SideBarGroup, type SideBarItem, type SideBarProps, type SideBarVariant, Sidetab, type SidetabItem, type SidetabProps, Skeleton, type SkeletonProps, StackedCards, type StackedCardsProps, Stepper, StepperInput, type StepperInputProps, type StepperProps, type StepperVariant, Table, type TableColumn, type TableColumnRole, TableContainer, type TableContainerProps, type TableContainerVariant, TableDataControl, type TableDataControlProps, type TableDataControlVariant, type TableProps, type TableRow, TableSection, type TableSectionProps, Tag, type TagProps, TextArea, type TextAreaBasicProps, type TextAreaProps, type TextAreaRichProps, type TextAreaVariant, Title, type TitleProps, type TitleVariant, Toast, type ToastProps, type ToastType, Toggle, ToggleButton, type ToggleButtonProps, type ToggleProps, Tooltip, type TooltipPlatform, type TooltipPosition, type TooltipPositionInput, type TooltipProps, type TooltipRect, type TooltipSide, type TooltipVariant, TopBar, type TopBarProps, type TopBarVariant, TopFilter, type TopFilterProps, TopFilterSection, type TopFilterSectionItem, type TopFilterSectionProps, TrailingInputFieldElement, type TrailingInputFieldElementProps, type TrailingInputFieldElementVariant, TruncatedText, type TruncatedTextProps, UNASSIGNED_ORDER_COLUMNS, UserMenu, type UserMenuProps, type UserMenuState, ViewSwitcherTab, type ViewSwitcherTabProps, WizardTab, type WizardTabProps, animateScrollTop, computeTooltipPosition, downloadFile, htmlToPlainText, sanitizeRichText, useAccordion, useEscapeLayer, useRovingFocus, useScrollEdges, useScrollShadow };
|