@stackone/malachite 2.58.0 → 2.60.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/assets/icons/list_checks.svg.js +6 -0
- package/dist/assets/icons/list_checks.svg.js.map +1 -0
- package/dist/components/ConfirmationDialog.js +98 -98
- package/dist/components/ConfirmationDialog.js.map +1 -1
- package/dist/components/CustomIcons/ListChecksIcon.js +21 -0
- package/dist/components/CustomIcons/ListChecksIcon.js.map +1 -0
- package/dist/components/CustomIcons/index.js +159 -156
- package/dist/components/CustomIcons/index.js.map +1 -1
- package/dist/components/KeyValueList.js +60 -33
- package/dist/components/KeyValueList.js.map +1 -1
- package/dist/components/Search.js +65 -35
- package/dist/components/Search.js.map +1 -1
- package/dist/index.d.ts +78 -51
- package/dist/index.js +122 -120
- package/dist/index.js.map +1 -1
- package/dist/tailwind.css.js +1 -1
- package/package.json +1 -1
|
@@ -1,57 +1,87 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { useState as
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import {
|
|
6
|
-
|
|
1
|
+
import { jsxs as M, jsx as a } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef as T, useState as Z, useRef as A, useMemo as B } from "react";
|
|
3
|
+
import D from "./CustomIcons/DismissIcon.js";
|
|
4
|
+
import P from "./CustomIcons/SearchIcon.js";
|
|
5
|
+
import { composeRefs as z } from "./composeRefs.js";
|
|
6
|
+
import { CONTROL_TEXT_SIZE_CLASS as G } from "./controlTextSize.js";
|
|
7
|
+
import { controlWidthStyle as L } from "./controlWidth.js";
|
|
8
|
+
import { FOCUS_RING as U } from "./focusRing.js";
|
|
9
|
+
const W = {
|
|
7
10
|
small: "h-[var(--malachite-control-height-small,28px)] gap-[6px] px-[10px] rounded-[var(--malachite-radius-10,10px)]",
|
|
8
11
|
medium: "h-[var(--malachite-control-height-medium,32px)] gap-[10px] px-[10px] rounded-xl",
|
|
9
12
|
large: "h-[var(--malachite-control-height-large,42px)] gap-[12px] px-[12px] rounded-[var(--malachite-radius-xxl,14px)]"
|
|
10
|
-
},
|
|
13
|
+
}, X = 15, q = (c) => c.preventDefault(), te = T(function({
|
|
11
14
|
value: s,
|
|
12
15
|
onChange: n,
|
|
13
|
-
placeholder:
|
|
14
|
-
size:
|
|
15
|
-
variant:
|
|
16
|
-
disabled:
|
|
17
|
-
autoFocus:
|
|
18
|
-
className:
|
|
19
|
-
width:
|
|
20
|
-
style:
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
16
|
+
placeholder: i,
|
|
17
|
+
size: p = "large",
|
|
18
|
+
variant: g = "default",
|
|
19
|
+
disabled: t = !1,
|
|
20
|
+
autoFocus: S = !1,
|
|
21
|
+
className: C = "",
|
|
22
|
+
width: y,
|
|
23
|
+
style: $,
|
|
24
|
+
clearable: E = !1,
|
|
25
|
+
onClear: o,
|
|
26
|
+
onKeyDown: l,
|
|
27
|
+
"aria-label": m,
|
|
28
|
+
"aria-labelledby": d
|
|
29
|
+
}, h) {
|
|
30
|
+
const [x, u] = Z(!1), f = A(null), I = B(() => z(h, f), [h]), b = E && s.length > 0 && !t, v = () => {
|
|
31
|
+
var e;
|
|
32
|
+
n(""), o == null || o(), (e = f.current) == null || e.focus();
|
|
33
|
+
}, k = (e) => {
|
|
34
|
+
l == null || l(e);
|
|
35
|
+
const j = e.nativeEvent.isComposing || e.nativeEvent.keyCode === 229;
|
|
36
|
+
e.key !== "Escape" || e.defaultPrevented || j || !b || (e.preventDefault(), e.stopPropagation(), v());
|
|
37
|
+
}, r = g === "muted", w = r ? "bg-[var(--malachite-card-border)]" : "bg-[var(--malachite-card-background)]", N = r ? "border-transparent" : "border-[var(--malachite-card-border)]", R = t ? "" : "hover:border-[var(--malachite-text-placeholder)]", _ = r ? "text-[var(--malachite-text-secondary)]" : "text-[var(--malachite-text-placeholder)]", F = r ? "placeholder:text-[var(--malachite-text-secondary)]" : "placeholder:text-[var(--malachite-text-placeholder)]", O = r ? "none" : x ? "var(--malachite-shadow-accent, 0px 1px 0px 0px rgba(0, 175, 102, 0.15))" : "0px 1px 1px 0px rgba(0, 0, 0, 0.15)";
|
|
38
|
+
return /* @__PURE__ */ M(
|
|
24
39
|
"div",
|
|
25
40
|
{
|
|
26
|
-
className: `w-full ${
|
|
41
|
+
className: `w-full ${w} border border-solid ${N} ${R} transition-colors flex items-center ${W[p]} ${t ? "opacity-60 cursor-not-allowed" : ""} ${C}`,
|
|
27
42
|
style: {
|
|
28
|
-
boxShadow:
|
|
29
|
-
borderColor:
|
|
30
|
-
...
|
|
31
|
-
|
|
43
|
+
boxShadow: O,
|
|
44
|
+
borderColor: x ? "var(--malachite-control-border-hover, rgba(0, 175, 102, 0.4))" : void 0,
|
|
45
|
+
...L(y),
|
|
46
|
+
...$
|
|
32
47
|
},
|
|
33
48
|
children: [
|
|
34
|
-
/* @__PURE__ */
|
|
35
|
-
/* @__PURE__ */
|
|
49
|
+
/* @__PURE__ */ a(P, { size: X, className: `${_} shrink-0` }),
|
|
50
|
+
/* @__PURE__ */ a(
|
|
36
51
|
"input",
|
|
37
52
|
{
|
|
53
|
+
ref: I,
|
|
38
54
|
type: "text",
|
|
39
55
|
value: s,
|
|
40
|
-
onChange: (
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
56
|
+
onChange: (e) => n(e.target.value),
|
|
57
|
+
onKeyDown: k,
|
|
58
|
+
onFocus: () => u(!0),
|
|
59
|
+
onBlur: () => u(!1),
|
|
60
|
+
placeholder: i,
|
|
61
|
+
"aria-label": d ? m : m ?? i ?? "Search",
|
|
62
|
+
"aria-labelledby": d,
|
|
63
|
+
disabled: t,
|
|
64
|
+
autoFocus: S,
|
|
65
|
+
className: `flex-1 bg-transparent border-none outline-none ${G[p]} font-medium text-[var(--malachite-text-primary)] ${F} placeholder:font-medium disabled:cursor-not-allowed min-w-0`
|
|
66
|
+
}
|
|
67
|
+
),
|
|
68
|
+
b && /* @__PURE__ */ a(
|
|
69
|
+
"button",
|
|
70
|
+
{
|
|
71
|
+
type: "button",
|
|
72
|
+
"aria-label": "Clear search",
|
|
73
|
+
onMouseDown: q,
|
|
74
|
+
onClick: v,
|
|
75
|
+
className: `shrink-0 flex items-center justify-center w-6 h-6 -mr-[5px] bg-transparent border-none rounded text-[var(--malachite-text-placeholder)] hover:text-[var(--malachite-text-primary)] cursor-pointer ${U}`,
|
|
76
|
+
children: /* @__PURE__ */ a(D, { size: 10 })
|
|
48
77
|
}
|
|
49
78
|
)
|
|
50
79
|
]
|
|
51
80
|
}
|
|
52
81
|
);
|
|
53
|
-
};
|
|
82
|
+
});
|
|
54
83
|
export {
|
|
55
|
-
|
|
84
|
+
te as Search,
|
|
85
|
+
te as default
|
|
56
86
|
};
|
|
57
87
|
//# sourceMappingURL=Search.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Search.js","sources":["../../src/components/Search.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport SearchIcon from './CustomIcons/SearchIcon';\nimport { CONTROL_TEXT_SIZE_CLASS } from './controlTextSize';\nimport { controlWidthStyle } from './controlWidth';\n\nexport type SearchSize = 'small' | 'medium' | 'large';\nexport type SearchVariant = 'default' | 'muted';\n\n// Figma \"Search Element - Standard\": Small 28px, Medium 32px, Large 42px, with the radius\n// tracking the tier (10/12/14) and the icon staying 15px throughout.\nconst SIZE_CLASSES: Record<SearchSize, string> = {\n small: 'h-[var(--malachite-control-height-small,28px)] gap-[6px] px-[10px] rounded-[var(--malachite-radius-10,10px)]',\n medium: 'h-[var(--malachite-control-height-medium,32px)] gap-[10px] px-[10px] rounded-xl',\n large: 'h-[var(--malachite-control-height-large,42px)] gap-[12px] px-[12px] rounded-[var(--malachite-radius-xxl,14px)]',\n};\n\nconst ICON_SIZE = 15;\n\nexport interface SearchProps {\n value: string;\n onChange: (value: string) => void;\n placeholder?: string;\n /** 'large' (42px) for form inputs; 'medium' (32px) for toolbars; 'small' (28px) in a table. */\n size?: SearchSize;\n variant?: SearchVariant;\n disabled?: boolean;\n autoFocus?: boolean;\n className?: string;\n width?: string | number;\n style?: React.CSSProperties;\n}\n\nconst
|
|
1
|
+
{"version":3,"file":"Search.js","sources":["../../src/components/Search.tsx"],"sourcesContent":["import React, { forwardRef, useMemo, useRef, useState } from 'react';\nimport DismissIcon from './CustomIcons/DismissIcon';\nimport SearchIcon from './CustomIcons/SearchIcon';\nimport { composeRefs } from './composeRefs';\nimport { CONTROL_TEXT_SIZE_CLASS } from './controlTextSize';\nimport { controlWidthStyle } from './controlWidth';\nimport { FOCUS_RING } from './focusRing';\n\nexport type SearchSize = 'small' | 'medium' | 'large';\nexport type SearchVariant = 'default' | 'muted';\n\n// Figma \"Search Element - Standard\": Small 28px, Medium 32px, Large 42px, with the radius\n// tracking the tier (10/12/14) and the icon staying 15px throughout.\nconst SIZE_CLASSES: Record<SearchSize, string> = {\n small: 'h-[var(--malachite-control-height-small,28px)] gap-[6px] px-[10px] rounded-[var(--malachite-radius-10,10px)]',\n medium: 'h-[var(--malachite-control-height-medium,32px)] gap-[10px] px-[10px] rounded-xl',\n large: 'h-[var(--malachite-control-height-large,42px)] gap-[12px] px-[12px] rounded-[var(--malachite-radius-xxl,14px)]',\n};\n\nconst ICON_SIZE = 15;\n\nexport interface SearchProps {\n value: string;\n onChange: (value: string) => void;\n placeholder?: string;\n /** 'large' (42px) for form inputs; 'medium' (32px) for toolbars; 'small' (28px) in a table. */\n size?: SearchSize;\n variant?: SearchVariant;\n disabled?: boolean;\n autoFocus?: boolean;\n className?: string;\n width?: string | number;\n style?: React.CSSProperties;\n /**\n * Shows a clear button while the field has text, and lets Escape clear it. Either way focus\n * stays in the field, and Escape that clears is not also passed to a surrounding panel.\n */\n clearable?: boolean;\n /** Called after `onChange('')` when the clear button or Escape empties the field. */\n onClear?: () => void;\n /** Runs before Search's own Escape handling; call `preventDefault()` to skip it. */\n onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;\n /** The field's accessible name. Falls back to the placeholder, then \"Search\". */\n 'aria-label'?: string;\n 'aria-labelledby'?: string;\n}\n\nconst keepFocus = (event: React.MouseEvent) => event.preventDefault();\n\n/** Forwards a ref to the input, so a consumer can focus the field. */\nconst Search = forwardRef<HTMLInputElement, SearchProps>(function Search(\n {\n value,\n onChange,\n placeholder,\n size = 'large',\n variant = 'default',\n disabled = false,\n autoFocus = false,\n className = '',\n width,\n style,\n clearable = false,\n onClear,\n onKeyDown,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n },\n ref,\n) {\n const [focused, setFocused] = useState(false);\n const inputRef = useRef<HTMLInputElement>(null);\n const setInputRef = useMemo(() => composeRefs(ref, inputRef), [ref]);\n const canClear = clearable && value.length > 0 && !disabled;\n\n const clear = () => {\n onChange('');\n onClear?.();\n inputRef.current?.focus();\n };\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n onKeyDown?.(event);\n // Escape mid-composition cancels the IME's candidate text, not the query.\n const composing = event.nativeEvent.isComposing || event.nativeEvent.keyCode === 229;\n if (event.key !== 'Escape' || event.defaultPrevented || composing || !canClear) {\n return;\n }\n // Both, as Dropdown does: an ancestor's own onKeyDown runs before the escape layers.\n event.preventDefault();\n event.stopPropagation();\n clear();\n };\n const isMuted = variant === 'muted';\n\n // Muted variant: a borderless search that sits on a surface (no shadow). Default:\n // white field with border + subtle shadow. Both keep a visible focus border.\n // The fill is the Border colour by design; the dimmed grey vanishes on a sunken page.\n const bgClass = isMuted\n ? 'bg-[var(--malachite-card-border)]'\n : 'bg-[var(--malachite-card-background)]';\n const restingBorderClass = isMuted\n ? 'border-transparent'\n : 'border-[var(--malachite-card-border)]';\n // Hover darkens the border; focus (inline below) takes precedence.\n const hoverBorderClass = disabled ? '' : 'hover:border-[var(--malachite-text-placeholder)]';\n const iconColorClass = isMuted\n ? 'text-[var(--malachite-text-secondary)]'\n : 'text-[var(--malachite-text-placeholder)]';\n const placeholderColorClass = isMuted\n ? 'placeholder:text-[var(--malachite-text-secondary)]'\n : 'placeholder:text-[var(--malachite-text-placeholder)]';\n const boxShadow = isMuted\n ? 'none'\n : focused\n ? 'var(--malachite-shadow-accent, 0px 1px 0px 0px rgba(0, 175, 102, 0.15))'\n : '0px 1px 1px 0px rgba(0, 0, 0, 0.15)';\n\n return (\n <div\n className={`w-full ${bgClass} border border-solid ${restingBorderClass} ${hoverBorderClass} transition-colors flex items-center ${SIZE_CLASSES[size]} ${disabled ? 'opacity-60 cursor-not-allowed' : ''} ${className}`}\n style={{\n boxShadow,\n borderColor: focused\n ? 'var(--malachite-control-border-hover, rgba(0, 175, 102, 0.4))'\n : undefined,\n ...controlWidthStyle(width),\n ...style,\n }}\n >\n <SearchIcon size={ICON_SIZE} className={`${iconColorClass} shrink-0`} />\n <input\n ref={setInputRef}\n type=\"text\"\n value={value}\n onChange={(e) => onChange(e.target.value)}\n onKeyDown={handleKeyDown}\n onFocus={() => setFocused(true)}\n onBlur={() => setFocused(false)}\n placeholder={placeholder}\n aria-label={ariaLabelledBy ? ariaLabel : (ariaLabel ?? placeholder ?? 'Search')}\n aria-labelledby={ariaLabelledBy}\n disabled={disabled}\n autoFocus={autoFocus}\n className={`flex-1 bg-transparent border-none outline-none ${CONTROL_TEXT_SIZE_CLASS[size]} font-medium text-[var(--malachite-text-primary)] ${placeholderColorClass} placeholder:font-medium disabled:cursor-not-allowed min-w-0`}\n />\n {canClear && (\n <button\n type=\"button\"\n aria-label=\"Clear search\"\n onMouseDown={keepFocus}\n onClick={clear}\n className={`shrink-0 flex items-center justify-center w-6 h-6 -mr-[5px] bg-transparent border-none rounded text-[var(--malachite-text-placeholder)] hover:text-[var(--malachite-text-primary)] cursor-pointer ${FOCUS_RING}`}\n >\n <DismissIcon size={10} />\n </button>\n )}\n </div>\n );\n});\n\nexport default Search;\nexport { Search };\n"],"names":["SIZE_CLASSES","ICON_SIZE","keepFocus","event","Search","forwardRef","value","onChange","placeholder","size","variant","disabled","autoFocus","className","width","style","clearable","onClear","onKeyDown","ariaLabel","ariaLabelledBy","ref","focused","setFocused","useState","inputRef","useRef","setInputRef","useMemo","composeRefs","canClear","clear","_a","handleKeyDown","composing","isMuted","bgClass","restingBorderClass","hoverBorderClass","iconColorClass","placeholderColorClass","boxShadow","jsxs","controlWidthStyle","jsx","SearchIcon","CONTROL_TEXT_SIZE_CLASS","FOCUS_RING","DismissIcon"],"mappings":"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"}
|
package/dist/index.d.ts
CHANGED
|
@@ -1256,6 +1256,7 @@ export declare const CustomIcons: {
|
|
|
1256
1256
|
LayoutIcon: FC<IconProps>;
|
|
1257
1257
|
LibraryIcon: FC<IconProps>;
|
|
1258
1258
|
LinkIcon: FC<IconProps>;
|
|
1259
|
+
ListChecksIcon: FC<IconProps>;
|
|
1259
1260
|
LogsIcon: FC<IconProps>;
|
|
1260
1261
|
MagicWandIcon: FC<IconProps>;
|
|
1261
1262
|
ManageTeamIcon: FC<IconProps>;
|
|
@@ -1963,6 +1964,13 @@ declare interface IconProps_115 {
|
|
|
1963
1964
|
onClick?: () => void;
|
|
1964
1965
|
}
|
|
1965
1966
|
|
|
1967
|
+
declare interface IconProps_116 {
|
|
1968
|
+
size?: number | string;
|
|
1969
|
+
className?: string;
|
|
1970
|
+
style?: CSSProperties;
|
|
1971
|
+
onClick?: () => void;
|
|
1972
|
+
}
|
|
1973
|
+
|
|
1966
1974
|
declare interface IconProps_12 {
|
|
1967
1975
|
size?: number | string;
|
|
1968
1976
|
className?: string;
|
|
@@ -2745,6 +2753,8 @@ export declare const KeyValueList: default_2.FC<KeyValueListProps> & {
|
|
|
2745
2753
|
export declare interface KeyValueListProps {
|
|
2746
2754
|
className?: string;
|
|
2747
2755
|
children: default_2.ReactNode;
|
|
2756
|
+
/** `small` tightens the rows for a list inside a dialog or panel. */
|
|
2757
|
+
size?: KeyValueListSize;
|
|
2748
2758
|
}
|
|
2749
2759
|
|
|
2750
2760
|
export declare interface KeyValueListRowProps {
|
|
@@ -2764,6 +2774,8 @@ export declare interface KeyValueListRowProps {
|
|
|
2764
2774
|
tooltip?: default_2.ReactNode;
|
|
2765
2775
|
}
|
|
2766
2776
|
|
|
2777
|
+
export declare type KeyValueListSize = 'small' | 'medium';
|
|
2778
|
+
|
|
2767
2779
|
export declare const LayoutIcon: React.FC<IconProps_63>;
|
|
2768
2780
|
|
|
2769
2781
|
export declare const LibraryIcon: React.FC<IconProps_64>;
|
|
@@ -2796,6 +2808,8 @@ declare interface LinkProps_2 {
|
|
|
2796
2808
|
fontSize?: 'sm' | 'base';
|
|
2797
2809
|
}
|
|
2798
2810
|
|
|
2811
|
+
export declare const ListChecksIcon: React.FC<IconProps_66>;
|
|
2812
|
+
|
|
2799
2813
|
export declare const LoadingBar: default_2.FC<LoadingBarProps>;
|
|
2800
2814
|
|
|
2801
2815
|
export declare interface LoadingBarProps {
|
|
@@ -2822,9 +2836,9 @@ export declare type LoadingBarSize = 'small' | 'medium' | 'large';
|
|
|
2822
2836
|
|
|
2823
2837
|
export declare type LoadingBarVariant = 'default' | 'warning' | 'error';
|
|
2824
2838
|
|
|
2825
|
-
export declare const LogsIcon: React.FC<
|
|
2839
|
+
export declare const LogsIcon: React.FC<IconProps_67>;
|
|
2826
2840
|
|
|
2827
|
-
export declare const MagicWandIcon: React.FC<
|
|
2841
|
+
export declare const MagicWandIcon: React.FC<IconProps_68>;
|
|
2828
2842
|
|
|
2829
2843
|
/**
|
|
2830
2844
|
* MalachiteContext provides a Shadow DOM context with theme setup for Malachite components.
|
|
@@ -3303,9 +3317,9 @@ export declare interface MalachiteTheme {
|
|
|
3303
3317
|
};
|
|
3304
3318
|
}
|
|
3305
3319
|
|
|
3306
|
-
export declare const ManageTeamIcon: React.FC<
|
|
3320
|
+
export declare const ManageTeamIcon: React.FC<IconProps_69>;
|
|
3307
3321
|
|
|
3308
|
-
export declare const ManualWebhookIcon: React.FC<
|
|
3322
|
+
export declare const ManualWebhookIcon: React.FC<IconProps_70>;
|
|
3309
3323
|
|
|
3310
3324
|
/** `inert` draws links without an anchor, for markdown inside a <button>. */
|
|
3311
3325
|
export declare type MarkdownLinks = 'interactive' | 'inert';
|
|
@@ -3326,15 +3340,15 @@ export declare interface MarkdownProps {
|
|
|
3326
3340
|
/** `inline`: one line of inline syntax, with no autolinked emails or URLs. */
|
|
3327
3341
|
export declare type MarkdownVariant = 'block' | 'flow' | 'inline';
|
|
3328
3342
|
|
|
3329
|
-
export declare const MarkReadIcon: React.FC<
|
|
3343
|
+
export declare const MarkReadIcon: React.FC<IconProps_71>;
|
|
3330
3344
|
|
|
3331
|
-
export declare const MarkUnreadIcon: React.FC<
|
|
3345
|
+
export declare const MarkUnreadIcon: React.FC<IconProps_72>;
|
|
3332
3346
|
|
|
3333
|
-
export declare const MembersIcon: React.FC<
|
|
3347
|
+
export declare const MembersIcon: React.FC<IconProps_73>;
|
|
3334
3348
|
|
|
3335
3349
|
export declare const Modal: default_2.FC<ModalProps>;
|
|
3336
3350
|
|
|
3337
|
-
export declare const ModalIcon: React.FC<
|
|
3351
|
+
export declare const ModalIcon: React.FC<IconProps_74>;
|
|
3338
3352
|
|
|
3339
3353
|
export declare interface ModalProps {
|
|
3340
3354
|
open: boolean;
|
|
@@ -3390,9 +3404,9 @@ export declare type ModalSize = 'small' | 'medium' | 'large';
|
|
|
3390
3404
|
|
|
3391
3405
|
export declare type ModalTrayTone = 'neutral' | 'warning' | 'error' | 'success';
|
|
3392
3406
|
|
|
3393
|
-
export declare const MoreHorizontalIcon: React.FC<
|
|
3407
|
+
export declare const MoreHorizontalIcon: React.FC<IconProps_75>;
|
|
3394
3408
|
|
|
3395
|
-
export declare const MoreVerticalIcon: React.FC<
|
|
3409
|
+
export declare const MoreVerticalIcon: React.FC<IconProps_76>;
|
|
3396
3410
|
|
|
3397
3411
|
export declare const MultiSelect: default_2.FC<MultiSelectProps>;
|
|
3398
3412
|
|
|
@@ -3484,9 +3498,9 @@ export declare type MultiSelectSize = 'small' | 'medium' | 'large';
|
|
|
3484
3498
|
|
|
3485
3499
|
declare type NativeProps = Omit<default_2.HTMLAttributes<HTMLElement>, 'children' | 'className' | 'style' | 'color' | 'title'>;
|
|
3486
3500
|
|
|
3487
|
-
export declare const NavbarCollapseIcon: React.FC<
|
|
3501
|
+
export declare const NavbarCollapseIcon: React.FC<IconProps_77>;
|
|
3488
3502
|
|
|
3489
|
-
export declare const NavbarExpandIcon: React.FC<
|
|
3503
|
+
export declare const NavbarExpandIcon: React.FC<IconProps_78>;
|
|
3490
3504
|
|
|
3491
3505
|
export declare const NavItem: default_2.ForwardRefExoticComponent<NavItemProps & default_2.RefAttributes<HTMLElement>>;
|
|
3492
3506
|
|
|
@@ -3528,7 +3542,7 @@ export declare interface NavItemLinkProps extends NavItemBaseProps {
|
|
|
3528
3542
|
|
|
3529
3543
|
export declare type NavItemProps = NavItemLinkProps | NavItemAsChildProps;
|
|
3530
3544
|
|
|
3531
|
-
export declare const NotFoundIcon: React.FC<
|
|
3545
|
+
export declare const NotFoundIcon: React.FC<IconProps_79>;
|
|
3532
3546
|
|
|
3533
3547
|
export declare const NumberTag: default_2.FC<NumberTagProps>;
|
|
3534
3548
|
|
|
@@ -3543,7 +3557,7 @@ export declare interface NumberTagProps {
|
|
|
3543
3557
|
className?: string;
|
|
3544
3558
|
}
|
|
3545
3559
|
|
|
3546
|
-
export declare const OrganizationIcon: React.FC<
|
|
3560
|
+
export declare const OrganizationIcon: React.FC<IconProps_80>;
|
|
3547
3561
|
|
|
3548
3562
|
export declare const OverflowRow: default_2.FC<OverflowRowProps>;
|
|
3549
3563
|
|
|
@@ -3717,11 +3731,11 @@ declare type PillButtonTone = 'default' | 'assistant';
|
|
|
3717
3731
|
|
|
3718
3732
|
declare type PillButtonVariant = 'default' | 'inverted';
|
|
3719
3733
|
|
|
3720
|
-
export declare const PinIcon: React.FC<
|
|
3734
|
+
export declare const PinIcon: React.FC<IconProps_81>;
|
|
3721
3735
|
|
|
3722
|
-
export declare const PlaygroundIcon: React.FC<
|
|
3736
|
+
export declare const PlaygroundIcon: React.FC<IconProps_82>;
|
|
3723
3737
|
|
|
3724
|
-
export declare const PlusIcon: React.FC<
|
|
3738
|
+
export declare const PlusIcon: React.FC<IconProps_83>;
|
|
3725
3739
|
|
|
3726
3740
|
export declare const Popover: default_2.FC<PopoverProps> & {
|
|
3727
3741
|
Header: default_2.FC< PopoverHeaderProps>;
|
|
@@ -3782,7 +3796,7 @@ export declare type PopoverPlacement = FloatingPlacement;
|
|
|
3782
3796
|
|
|
3783
3797
|
export declare type PopoverProps = PopoverBaseProps & PopoverName;
|
|
3784
3798
|
|
|
3785
|
-
export declare const PreviewIcon: React.FC<
|
|
3799
|
+
export declare const PreviewIcon: React.FC<IconProps_84>;
|
|
3786
3800
|
|
|
3787
3801
|
/** A translucent rounded card that groups {@link PreviewTreeRow}s into a tree preview. */
|
|
3788
3802
|
export declare const PreviewTree: default_2.FC<PreviewTreeProps>;
|
|
@@ -3803,7 +3817,7 @@ declare interface PreviewTreeRowProps {
|
|
|
3803
3817
|
expanded?: boolean;
|
|
3804
3818
|
}
|
|
3805
3819
|
|
|
3806
|
-
export declare const ProgrammaticWebhookIcon: React.FC<
|
|
3820
|
+
export declare const ProgrammaticWebhookIcon: React.FC<IconProps_85>;
|
|
3807
3821
|
|
|
3808
3822
|
export declare const Progress: default_2.FC<ProgressProps>;
|
|
3809
3823
|
|
|
@@ -3854,7 +3868,7 @@ declare interface ProgressValueProps extends ProgressCommonProps {
|
|
|
3854
3868
|
max?: never;
|
|
3855
3869
|
}
|
|
3856
3870
|
|
|
3857
|
-
export declare const PulseIcon: React.FC<
|
|
3871
|
+
export declare const PulseIcon: React.FC<IconProps_86>;
|
|
3858
3872
|
|
|
3859
3873
|
export declare const QueryInput: default_2.FC<QueryInputProps>;
|
|
3860
3874
|
|
|
@@ -3931,7 +3945,7 @@ export declare interface RadioProps {
|
|
|
3931
3945
|
id?: string;
|
|
3932
3946
|
}
|
|
3933
3947
|
|
|
3934
|
-
export declare const RefreshIcon: React.FC<
|
|
3948
|
+
export declare const RefreshIcon: React.FC<IconProps_87>;
|
|
3935
3949
|
|
|
3936
3950
|
export declare interface RegularLayoutProps {
|
|
3937
3951
|
breadcrumbLinks?: BreadcrumbLink[];
|
|
@@ -3963,9 +3977,9 @@ export declare interface RegularLayoutProps {
|
|
|
3963
3977
|
style?: default_2.CSSProperties;
|
|
3964
3978
|
}
|
|
3965
3979
|
|
|
3966
|
-
export declare const RejectIcon: React.FC<
|
|
3980
|
+
export declare const RejectIcon: React.FC<IconProps_88>;
|
|
3967
3981
|
|
|
3968
|
-
export declare const ReloadIcon: React.FC<
|
|
3982
|
+
export declare const ReloadIcon: React.FC<IconProps_89>;
|
|
3969
3983
|
|
|
3970
3984
|
/**
|
|
3971
3985
|
* Renders an in-app link through the app's own link component, spreading every field onto it:
|
|
@@ -3980,9 +3994,9 @@ export declare type RenderLink = (props: {
|
|
|
3980
3994
|
'aria-label'?: string;
|
|
3981
3995
|
}) => default_2.ReactNode;
|
|
3982
3996
|
|
|
3983
|
-
export declare const ReplyIcon: React.FC<
|
|
3997
|
+
export declare const ReplyIcon: React.FC<IconProps_90>;
|
|
3984
3998
|
|
|
3985
|
-
export declare const RequiredFieldIndicatorIcon: React.FC<
|
|
3999
|
+
export declare const RequiredFieldIndicatorIcon: React.FC<IconProps_91>;
|
|
3986
4000
|
|
|
3987
4001
|
export declare type RequiredIndicator = 'optional-suffix' | 'asterisk' | 'none';
|
|
3988
4002
|
|
|
@@ -4006,9 +4020,10 @@ declare const Row: default_2.FC<KeyValueListRowProps>;
|
|
|
4006
4020
|
|
|
4007
4021
|
export declare type RowVariant = 'success' | 'warning' | 'error' | 'info';
|
|
4008
4022
|
|
|
4009
|
-
|
|
4023
|
+
/** Forwards a ref to the input, so a consumer can focus the field. */
|
|
4024
|
+
export declare const Search: default_2.ForwardRefExoticComponent<SearchProps & default_2.RefAttributes<HTMLInputElement>>;
|
|
4010
4025
|
|
|
4011
|
-
export declare const SearchIcon: React.FC<
|
|
4026
|
+
export declare const SearchIcon: React.FC<IconProps_92>;
|
|
4012
4027
|
|
|
4013
4028
|
export declare interface SearchProps {
|
|
4014
4029
|
value: string;
|
|
@@ -4022,6 +4037,18 @@ export declare interface SearchProps {
|
|
|
4022
4037
|
className?: string;
|
|
4023
4038
|
width?: string | number;
|
|
4024
4039
|
style?: default_2.CSSProperties;
|
|
4040
|
+
/**
|
|
4041
|
+
* Shows a clear button while the field has text, and lets Escape clear it. Either way focus
|
|
4042
|
+
* stays in the field, and Escape that clears is not also passed to a surrounding panel.
|
|
4043
|
+
*/
|
|
4044
|
+
clearable?: boolean;
|
|
4045
|
+
/** Called after `onChange('')` when the clear button or Escape empties the field. */
|
|
4046
|
+
onClear?: () => void;
|
|
4047
|
+
/** Runs before Search's own Escape handling; call `preventDefault()` to skip it. */
|
|
4048
|
+
onKeyDown?: default_2.KeyboardEventHandler<HTMLInputElement>;
|
|
4049
|
+
/** The field's accessible name. Falls back to the placeholder, then "Search". */
|
|
4050
|
+
'aria-label'?: string;
|
|
4051
|
+
'aria-labelledby'?: string;
|
|
4025
4052
|
}
|
|
4026
4053
|
|
|
4027
4054
|
export declare type SearchSize = 'small' | 'medium' | 'large';
|
|
@@ -4052,7 +4079,7 @@ declare interface SectionTitleProps {
|
|
|
4052
4079
|
style?: default_2.CSSProperties;
|
|
4053
4080
|
}
|
|
4054
4081
|
|
|
4055
|
-
export declare const SecurityIcon: React.FC<
|
|
4082
|
+
export declare const SecurityIcon: React.FC<IconProps_93>;
|
|
4056
4083
|
|
|
4057
4084
|
/**
|
|
4058
4085
|
* A rounded track of mutually-exclusive options — the segmented "one of these" control.
|
|
@@ -4222,7 +4249,7 @@ export declare interface SelectionBarProps {
|
|
|
4222
4249
|
className?: string;
|
|
4223
4250
|
}
|
|
4224
4251
|
|
|
4225
|
-
export declare const SendIcon: React.FC<
|
|
4252
|
+
export declare const SendIcon: React.FC<IconProps_94>;
|
|
4226
4253
|
|
|
4227
4254
|
export declare const SettingRow: default_2.FC<SettingRowProps>;
|
|
4228
4255
|
|
|
@@ -4244,7 +4271,7 @@ export declare interface SettingRowProps {
|
|
|
4244
4271
|
className?: string;
|
|
4245
4272
|
}
|
|
4246
4273
|
|
|
4247
|
-
export declare const SettingsIcon: React.FC<
|
|
4274
|
+
export declare const SettingsIcon: React.FC<IconProps_95>;
|
|
4248
4275
|
|
|
4249
4276
|
/**
|
|
4250
4277
|
* ShadowEscape renders its children OUTSIDE the Shadow DOM to avoid React hook issues.
|
|
@@ -4394,7 +4421,7 @@ export declare interface SidePanelProps {
|
|
|
4394
4421
|
children: default_2.ReactNode;
|
|
4395
4422
|
}
|
|
4396
4423
|
|
|
4397
|
-
export declare const SignOutIcon: React.FC<
|
|
4424
|
+
export declare const SignOutIcon: React.FC<IconProps_96>;
|
|
4398
4425
|
|
|
4399
4426
|
export declare const Skeleton: {
|
|
4400
4427
|
Button: default_2.FC<SkeletonButtonProps>;
|
|
@@ -4428,11 +4455,11 @@ declare type SkeletonShape = 'default' | 'round' | 'circle' | 'square';
|
|
|
4428
4455
|
|
|
4429
4456
|
declare type SkeletonSize = 'small' | 'default' | 'large';
|
|
4430
4457
|
|
|
4431
|
-
export declare const SliderIcon: React.FC<
|
|
4458
|
+
export declare const SliderIcon: React.FC<IconProps_97>;
|
|
4432
4459
|
|
|
4433
|
-
export declare const SortIcon: React.FC<
|
|
4460
|
+
export declare const SortIcon: React.FC<IconProps_98>;
|
|
4434
4461
|
|
|
4435
|
-
export declare const SourceIcon: React.FC<
|
|
4462
|
+
export declare const SourceIcon: React.FC<IconProps_99>;
|
|
4436
4463
|
|
|
4437
4464
|
export declare const Spacer: default_2.FC<SpacerProps>;
|
|
4438
4465
|
|
|
@@ -4456,7 +4483,7 @@ export declare enum SpacingSize {
|
|
|
4456
4483
|
Large = "large"
|
|
4457
4484
|
}
|
|
4458
4485
|
|
|
4459
|
-
export declare const SparkleIcon: React.FC<
|
|
4486
|
+
export declare const SparkleIcon: React.FC<IconProps_100>;
|
|
4460
4487
|
|
|
4461
4488
|
export declare const Spinner: default_2.FC<SpinnerProps>;
|
|
4462
4489
|
|
|
@@ -4476,7 +4503,7 @@ declare interface SplitScreenLayoutProps {
|
|
|
4476
4503
|
footer?: default_2.ReactNode;
|
|
4477
4504
|
}
|
|
4478
4505
|
|
|
4479
|
-
export declare const StarIcon: React.FC<
|
|
4506
|
+
export declare const StarIcon: React.FC<IconProps_101>;
|
|
4480
4507
|
|
|
4481
4508
|
export declare const StatBadge: default_2.FC<StatBadgeProps>;
|
|
4482
4509
|
|
|
@@ -4548,7 +4575,7 @@ export declare interface StatusBadgeProps {
|
|
|
4548
4575
|
|
|
4549
4576
|
export declare type StatusBadgeType = 'success' | 'error' | 'warning' | 'info';
|
|
4550
4577
|
|
|
4551
|
-
export declare const StepCurrentIcon: React.FC<
|
|
4578
|
+
export declare const StepCurrentIcon: React.FC<IconProps_102>;
|
|
4552
4579
|
|
|
4553
4580
|
export declare const Stepper: default_2.FC<StepperProps>;
|
|
4554
4581
|
|
|
@@ -4589,7 +4616,7 @@ export declare interface StepTabsProps {
|
|
|
4589
4616
|
className?: string;
|
|
4590
4617
|
}
|
|
4591
4618
|
|
|
4592
|
-
export declare const StepUpcomingIcon: React.FC<
|
|
4619
|
+
export declare const StepUpcomingIcon: React.FC<IconProps_103>;
|
|
4593
4620
|
|
|
4594
4621
|
export declare type SubtitleLayout = 'inline' | 'stacked';
|
|
4595
4622
|
|
|
@@ -4720,7 +4747,7 @@ export declare interface SwatchProps {
|
|
|
4720
4747
|
style?: default_2.CSSProperties;
|
|
4721
4748
|
}
|
|
4722
4749
|
|
|
4723
|
-
export declare const SyntheticWebhookIcon: React.FC<
|
|
4750
|
+
export declare const SyntheticWebhookIcon: React.FC<IconProps_104>;
|
|
4724
4751
|
|
|
4725
4752
|
export declare interface TabItem {
|
|
4726
4753
|
key: string;
|
|
@@ -5032,9 +5059,9 @@ export declare interface ThemeScopeProps {
|
|
|
5032
5059
|
children?: default_2.ReactNode;
|
|
5033
5060
|
}
|
|
5034
5061
|
|
|
5035
|
-
export declare const ThumbsDownIcon: React.FC<
|
|
5062
|
+
export declare const ThumbsDownIcon: React.FC<IconProps_105>;
|
|
5036
5063
|
|
|
5037
|
-
export declare const ThumbsUpIcon: React.FC<
|
|
5064
|
+
export declare const ThumbsUpIcon: React.FC<IconProps_106>;
|
|
5038
5065
|
|
|
5039
5066
|
export declare const Toggle: default_2.ForwardRefExoticComponent<ToggleProps & default_2.RefAttributes<HTMLElement>>;
|
|
5040
5067
|
|
|
@@ -5153,11 +5180,11 @@ declare interface TooltipProps {
|
|
|
5153
5180
|
focusableTrigger?: boolean;
|
|
5154
5181
|
}
|
|
5155
5182
|
|
|
5156
|
-
export declare const TrashIcon: React.FC<
|
|
5183
|
+
export declare const TrashIcon: React.FC<IconProps_107>;
|
|
5157
5184
|
|
|
5158
|
-
export declare const TriangleDownIcon: React.FC<
|
|
5185
|
+
export declare const TriangleDownIcon: React.FC<IconProps_108>;
|
|
5159
5186
|
|
|
5160
|
-
export declare const TriangleRightIcon: React.FC<
|
|
5187
|
+
export declare const TriangleRightIcon: React.FC<IconProps_109>;
|
|
5161
5188
|
|
|
5162
5189
|
/**
|
|
5163
5190
|
* TruncatedTooltip renders its children in a single-line truncating container
|
|
@@ -5201,9 +5228,9 @@ export declare const Typography: {
|
|
|
5201
5228
|
Text: FC<TextProps>;
|
|
5202
5229
|
};
|
|
5203
5230
|
|
|
5204
|
-
export declare const UnarchiveIcon: React.FC<
|
|
5231
|
+
export declare const UnarchiveIcon: React.FC<IconProps_110>;
|
|
5205
5232
|
|
|
5206
|
-
export declare const UploadIcon: React.FC<
|
|
5233
|
+
export declare const UploadIcon: React.FC<IconProps_111>;
|
|
5207
5234
|
|
|
5208
5235
|
export declare const UsageCard: default_2.FC<UsageCardProps>;
|
|
5209
5236
|
|
|
@@ -5225,15 +5252,15 @@ export declare const useHasOpenOverlay: () => boolean;
|
|
|
5225
5252
|
|
|
5226
5253
|
export declare const useSidebarCollapsed: () => boolean;
|
|
5227
5254
|
|
|
5228
|
-
export declare const WarningCircleFilled: React.FC<
|
|
5255
|
+
export declare const WarningCircleFilled: React.FC<IconProps_112>;
|
|
5229
5256
|
|
|
5230
|
-
export declare const WarningTriangleIcon: React.FC<
|
|
5257
|
+
export declare const WarningTriangleIcon: React.FC<IconProps_113>;
|
|
5231
5258
|
|
|
5232
|
-
export declare const WebhookEventsIcon: React.FC<
|
|
5259
|
+
export declare const WebhookEventsIcon: React.FC<IconProps_114>;
|
|
5233
5260
|
|
|
5234
|
-
export declare const WebhookIcon: React.FC<
|
|
5261
|
+
export declare const WebhookIcon: React.FC<IconProps_115>;
|
|
5235
5262
|
|
|
5236
|
-
export declare const WebhookSigningSecretIcon: React.FC<
|
|
5263
|
+
export declare const WebhookSigningSecretIcon: React.FC<IconProps_116>;
|
|
5237
5264
|
|
|
5238
5265
|
export declare type WidthSize = 'large' | 'medium' | 'small' | 'xsmall';
|
|
5239
5266
|
|