@pismo/marola 1.0.0-beta.12 → 1.0.0-beta.13
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/Toggle-uBAGft1J.js +181 -0
- package/dist/assets/Toggle2.css +1 -1
- package/dist/components/Adornment/Adornment.d.ts +1 -0
- package/dist/components/Adornment/Adornment.stories.d.ts +14 -0
- package/dist/components/Autocomplete/Autocomplete.d.ts +4 -2
- package/dist/components/Autocomplete/Autocomplete.js +179 -178
- package/dist/components/Autocomplete/Autocomplete.stories.d.ts +2 -1
- package/dist/components/Chip/Chip.js +1 -1
- package/dist/components/Dialog/Dialog.stories.d.ts +1 -1
- package/dist/components/RowItem/RowItem.js +1 -1
- package/dist/components/RowItem/RowItem.stories.d.ts +17 -0
- package/dist/components/TextDisplay/TextDisplay.stories.d.ts +1 -0
- package/dist/components/ToggleGroup/Toggle.js +1 -1
- package/dist/components/ToggleGroup/ToggleGroup.js +1 -1
- package/dist/main.js +1 -1
- package/package.json +1 -1
- package/dist/Toggle-C7W0gYOI.js +0 -175
|
@@ -0,0 +1,181 @@
|
|
|
1
|
+
import './assets/Toggle2.css';
|
|
2
|
+
import { jsx as e, jsxs as q } from "react/jsx-runtime";
|
|
3
|
+
import { forwardRef as y } from "react";
|
|
4
|
+
import { c as s } from "./clsx-DB4S2d7J.js";
|
|
5
|
+
import { Icon as N } from "./components/Icon/Icon.js";
|
|
6
|
+
import { Typography as w } from "./components/Typography/Typography.js";
|
|
7
|
+
import "./components/Button/Button.js";
|
|
8
|
+
import { Adornment as C } from "./components/Adornment/Adornment.js";
|
|
9
|
+
import "./components/Dialog/Backdrop.js";
|
|
10
|
+
import "./components/IconButton/IconButton.js";
|
|
11
|
+
import "./components/Select/Select.js";
|
|
12
|
+
import "./components/Table/Table.js";
|
|
13
|
+
import "./components/Tabs/Tabs.js";
|
|
14
|
+
import { s as k } from "./Group-B3p31ftp.js";
|
|
15
|
+
import "./contexts/SnackbarProvider/SnackbarProvider.js";
|
|
16
|
+
import { Skeleton as f } from "./components/Skeleton/Skeleton.js";
|
|
17
|
+
import { B as x } from "./Button-DiLqcAJG.js";
|
|
18
|
+
const I = "_chip_1qd8i_61", P = "_chip__adornment_1qd8i_115", z = "_chip__remove_1qd8i_120", p = {
|
|
19
|
+
"u-typography-h1": "_u-typography-h1_1qd8i_1",
|
|
20
|
+
"u-typography-h2": "_u-typography-h2_1qd8i_8",
|
|
21
|
+
"u-typography-h3": "_u-typography-h3_1qd8i_15",
|
|
22
|
+
"u-typography-h4": "_u-typography-h4_1qd8i_22",
|
|
23
|
+
"u-typography-h5": "_u-typography-h5_1qd8i_29",
|
|
24
|
+
"u-typography-h6": "_u-typography-h6_1qd8i_36",
|
|
25
|
+
"u-typography-base": "_u-typography-base_1qd8i_43",
|
|
26
|
+
"u-typography-base--xxl": "_u-typography-base--xxl_1qd8i_49",
|
|
27
|
+
"u-typography-base--xl": "_u-typography-base--xl_1qd8i_53",
|
|
28
|
+
"u-typography-base--lg": "_u-typography-base--lg_1qd8i_57",
|
|
29
|
+
"u-typography-base--sm": "_u-typography-base--sm_1qd8i_61",
|
|
30
|
+
chip: I,
|
|
31
|
+
"u-typography-base--bold": "_u-typography-base--bold_1qd8i_65",
|
|
32
|
+
"u-typography-base--strikethrough": "_u-typography-base--strikethrough_1qd8i_68",
|
|
33
|
+
"u-typography-base--underlined": "_u-typography-base--underlined_1qd8i_71",
|
|
34
|
+
"u-typography-base--strikethrough-underlined": "_u-typography-base--strikethrough-underlined_1qd8i_74",
|
|
35
|
+
"chip--button": "_chip--button_1qd8i_90",
|
|
36
|
+
"chip--outlined": "_chip--outlined_1qd8i_103",
|
|
37
|
+
"chip--contained": "_chip--contained_1qd8i_109",
|
|
38
|
+
chip__adornment: P,
|
|
39
|
+
chip__remove: z,
|
|
40
|
+
"chip__remove--disabled": "_chip__remove--disabled_1qd8i_131",
|
|
41
|
+
"chip-loading": "_chip-loading_1qd8i_135"
|
|
42
|
+
}, S = y((i, c) => {
|
|
43
|
+
const { children: _, onClickContent: t, disabled: r, className: a, variant: n } = i;
|
|
44
|
+
let o = s(
|
|
45
|
+
p.chip,
|
|
46
|
+
{ [p["chip--outlined"]]: n === "outlined" },
|
|
47
|
+
{ [p["chip--contained"]]: n === "contained" },
|
|
48
|
+
a
|
|
49
|
+
);
|
|
50
|
+
return t ? (o += ` ${p["chip--button"]}`, /* @__PURE__ */ e(
|
|
51
|
+
x,
|
|
52
|
+
{
|
|
53
|
+
onClick: t,
|
|
54
|
+
disabled: r,
|
|
55
|
+
"data-testid": i["data-testid"],
|
|
56
|
+
ref: c,
|
|
57
|
+
className: o,
|
|
58
|
+
children: _
|
|
59
|
+
}
|
|
60
|
+
)) : /* @__PURE__ */ e("span", { "data-testid": i["data-testid"], ref: c, className: o, children: _ });
|
|
61
|
+
}), M = y((i, c) => {
|
|
62
|
+
const {
|
|
63
|
+
label: _,
|
|
64
|
+
className: t,
|
|
65
|
+
onClickContent: r,
|
|
66
|
+
leftAdornment: a,
|
|
67
|
+
loading: n = !1,
|
|
68
|
+
disabled: o = !1,
|
|
69
|
+
variant: u = "default",
|
|
70
|
+
onClickRemove: m
|
|
71
|
+
} = i;
|
|
72
|
+
if (n)
|
|
73
|
+
return /* @__PURE__ */ e(
|
|
74
|
+
f,
|
|
75
|
+
{
|
|
76
|
+
className: s(p["chip-loading"], i["className-skeleton"]),
|
|
77
|
+
"data-testid": i["data-testid-skeleton"]
|
|
78
|
+
}
|
|
79
|
+
);
|
|
80
|
+
const g = s(a == null ? void 0 : a.className, p.chip__adornment), b = a != null && a.customIcon ? { ...a, className: g } : { ...a, disabled: o, className: g };
|
|
81
|
+
return /* @__PURE__ */ q(
|
|
82
|
+
S,
|
|
83
|
+
{
|
|
84
|
+
ref: c,
|
|
85
|
+
"data-testid": i["data-testid"],
|
|
86
|
+
onClickContent: r,
|
|
87
|
+
disabled: o,
|
|
88
|
+
className: t,
|
|
89
|
+
variant: u,
|
|
90
|
+
children: [
|
|
91
|
+
a && /* @__PURE__ */ e(C, { ...b }),
|
|
92
|
+
_,
|
|
93
|
+
m && /* @__PURE__ */ e(
|
|
94
|
+
"span",
|
|
95
|
+
{
|
|
96
|
+
className: s(p.chip__remove, { [p["chip__remove--disabled"]]: o }),
|
|
97
|
+
role: "button",
|
|
98
|
+
tabIndex: o ? -1 : 0,
|
|
99
|
+
"aria-label": "remove",
|
|
100
|
+
onClick: (d) => {
|
|
101
|
+
d == null || d.stopPropagation(), d == null || d.nativeEvent.stopImmediatePropagation(), m();
|
|
102
|
+
},
|
|
103
|
+
"aria-disabled": o,
|
|
104
|
+
children: /* @__PURE__ */ e(N, { icon: "circle-xmark", size: "1.125rem", color: "rgba(var(--gray-95-rgb), 0.45)" })
|
|
105
|
+
}
|
|
106
|
+
)
|
|
107
|
+
]
|
|
108
|
+
}
|
|
109
|
+
);
|
|
110
|
+
}), h = {
|
|
111
|
+
"row-item": "_row-item_8z1a0_1",
|
|
112
|
+
"row-item--clickable": "_row-item--clickable_8z1a0_13",
|
|
113
|
+
"row-item--disabled": "_row-item--disabled_8z1a0_19",
|
|
114
|
+
"row-item__content": "_row-item__content_8z1a0_22"
|
|
115
|
+
}, O = y((i, c) => {
|
|
116
|
+
const { children: _, leftAdornment: t, disabled: r, onClick: a, buttons: n, ariaLabel: o, className: u } = i, m = s(t == null ? void 0 : t.className, h["row-item__adornment"]), b = {
|
|
117
|
+
onClick: (l) => {
|
|
118
|
+
r || a && a(l);
|
|
119
|
+
},
|
|
120
|
+
tabIndex: 0,
|
|
121
|
+
"aria-label": o,
|
|
122
|
+
role: "button"
|
|
123
|
+
}, d = t != null && t.customIcon ? t : { size: "1rem", ...t };
|
|
124
|
+
return /* @__PURE__ */ q(
|
|
125
|
+
"div",
|
|
126
|
+
{
|
|
127
|
+
"data-testid": i["data-testid"],
|
|
128
|
+
className: s(
|
|
129
|
+
h["row-item"],
|
|
130
|
+
a && h["row-item--clickable"],
|
|
131
|
+
a && r && h["row-item--disabled"],
|
|
132
|
+
u
|
|
133
|
+
),
|
|
134
|
+
...!!a && b,
|
|
135
|
+
ref: c,
|
|
136
|
+
children: [
|
|
137
|
+
t && /* @__PURE__ */ e(C, { ...d, className: m, disabled: r }),
|
|
138
|
+
/* @__PURE__ */ e("span", { className: s(h["row-item__content"]), children: _ }),
|
|
139
|
+
n && /* @__PURE__ */ e(
|
|
140
|
+
"div",
|
|
141
|
+
{
|
|
142
|
+
onClick: (l) => {
|
|
143
|
+
l == null || l.stopPropagation(), l == null || l.nativeEvent.stopImmediatePropagation();
|
|
144
|
+
},
|
|
145
|
+
children: n
|
|
146
|
+
}
|
|
147
|
+
)
|
|
148
|
+
]
|
|
149
|
+
}
|
|
150
|
+
);
|
|
151
|
+
}), Q = y((i, c) => {
|
|
152
|
+
const { text: _, isSelected: t = !1, value: r, onChange: a } = i;
|
|
153
|
+
return /* @__PURE__ */ q(
|
|
154
|
+
"label",
|
|
155
|
+
{
|
|
156
|
+
className: s([k.toggle__label], { [k["toggle__label--selected"]]: t }),
|
|
157
|
+
"data-testid": i["data-testid"],
|
|
158
|
+
children: [
|
|
159
|
+
/* @__PURE__ */ e(
|
|
160
|
+
"input",
|
|
161
|
+
{
|
|
162
|
+
className: s([k.toggle__input]),
|
|
163
|
+
type: "radio",
|
|
164
|
+
ref: c,
|
|
165
|
+
value: r.toString(),
|
|
166
|
+
onChange: () => a(r),
|
|
167
|
+
role: "radio",
|
|
168
|
+
checked: t,
|
|
169
|
+
"aria-checked": t
|
|
170
|
+
}
|
|
171
|
+
),
|
|
172
|
+
/* @__PURE__ */ e(w, { bold: !0, children: _ })
|
|
173
|
+
]
|
|
174
|
+
}
|
|
175
|
+
);
|
|
176
|
+
});
|
|
177
|
+
export {
|
|
178
|
+
M as C,
|
|
179
|
+
O as R,
|
|
180
|
+
Q as T
|
|
181
|
+
};
|
package/dist/assets/Toggle2.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
._u-typography-h1_1qd8i_1{font-size:var(--heading-font-size-1);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-1);margin:0}._u-typography-h2_1qd8i_8{font-size:var(--heading-font-size-2);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-2);margin:0}._u-typography-h3_1qd8i_15{font-size:var(--heading-font-size-3);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-3);margin:0}._u-typography-h4_1qd8i_22{font-size:var(--heading-font-size-4);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-4);margin:0}._u-typography-h5_1qd8i_29{font-size:var(--heading-font-size-5);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-5);margin:0}._u-typography-h6_1qd8i_36{font-size:var(--heading-font-size-6);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-6);margin:0}._u-typography-base_1qd8i_43{margin:0;font-size:var(--base-font-size);font-weight:var(--base-weight);line-height:var(--base-line-height)}._u-typography-base--xxl_1qd8i_49{font-size:var(--base-font-size-xxl);line-height:var(--base-line-height-xxl)}._u-typography-base--xl_1qd8i_53{font-size:var(--base-font-size-xl);line-height:var(--base-line-height-xl)}._u-typography-base--lg_1qd8i_57{font-size:var(--base-font-size-lg);line-height:var(--base-line-height-lg)}._u-typography-base--sm_1qd8i_61,._chip_1qd8i_61{font-size:var(--base-font-size-sm);line-height:var(--base-line-height-sm)}._u-typography-base--bold_1qd8i_65,._chip_1qd8i_61{font-weight:var(--base-bold)}._u-typography-base--strikethrough_1qd8i_68{text-decoration:line-through}._u-typography-base--underlined_1qd8i_71{text-decoration:underline}._u-typography-base--strikethrough-underlined_1qd8i_74{text-decoration:underline line-through}._chip_1qd8i_61{display:flex;align-items:center;width:fit-content;padding:.375rem .5rem;background-color:var(--cream);border-width:1px;border-radius:calc(var(--border-radius-soft) * 4)}._chip_1qd8i_61:not(:disabled){color:rgb(var(--gray-95-rgb) .65)}._chip--button_1qd8i_90{cursor:pointer;border-color:transparent}._chip--button_1qd8i_90:disabled{cursor:initial}._chip--button_1qd8i_90:focus-visible{outline:none}._chip--button_1qd8i_90:focus{outline:2px solid var(--black-100)}._chip--outlined_1qd8i_103{padding:.3125rem .5rem;background-color:var(--white-100);border:1px solid var(--border);border-radius:calc(var(--border-radius-soft) * 4)}._chip--contained_1qd8i_109{padding:.3125rem .5rem;border:1px solid var(--border);border-color:var(--accent);border-radius:calc(var(--border-radius-soft) * 4)}._chip__adornment_1qd8i_115{display:flex;align-items:center;margin-right:.5rem}._chip__remove_1qd8i_120{display:flex;margin-left:.5rem}._chip__remove_1qd8i_120:focus-visible{outline:none}._chip__remove_1qd8i_120:focus:not(:disabled){border-radius:calc(var(--border-radius-soft) * 4);outline:2px solid var(--black-100)}._chip__remove--disabled_1qd8i_131{cursor:default}._chip-loading_1qd8i_135{display:inline-flex;width:6rem;height:2rem;border-radius:4rem}._row-
|
|
1
|
+
._u-typography-h1_1qd8i_1{font-size:var(--heading-font-size-1);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-1);margin:0}._u-typography-h2_1qd8i_8{font-size:var(--heading-font-size-2);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-2);margin:0}._u-typography-h3_1qd8i_15{font-size:var(--heading-font-size-3);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-3);margin:0}._u-typography-h4_1qd8i_22{font-size:var(--heading-font-size-4);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-4);margin:0}._u-typography-h5_1qd8i_29{font-size:var(--heading-font-size-5);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-5);margin:0}._u-typography-h6_1qd8i_36{font-size:var(--heading-font-size-6);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-6);margin:0}._u-typography-base_1qd8i_43{margin:0;font-size:var(--base-font-size);font-weight:var(--base-weight);line-height:var(--base-line-height)}._u-typography-base--xxl_1qd8i_49{font-size:var(--base-font-size-xxl);line-height:var(--base-line-height-xxl)}._u-typography-base--xl_1qd8i_53{font-size:var(--base-font-size-xl);line-height:var(--base-line-height-xl)}._u-typography-base--lg_1qd8i_57{font-size:var(--base-font-size-lg);line-height:var(--base-line-height-lg)}._u-typography-base--sm_1qd8i_61,._chip_1qd8i_61{font-size:var(--base-font-size-sm);line-height:var(--base-line-height-sm)}._u-typography-base--bold_1qd8i_65,._chip_1qd8i_61{font-weight:var(--base-bold)}._u-typography-base--strikethrough_1qd8i_68{text-decoration:line-through}._u-typography-base--underlined_1qd8i_71{text-decoration:underline}._u-typography-base--strikethrough-underlined_1qd8i_74{text-decoration:underline line-through}._chip_1qd8i_61{display:flex;align-items:center;width:fit-content;padding:.375rem .5rem;background-color:var(--cream);border-width:1px;border-radius:calc(var(--border-radius-soft) * 4)}._chip_1qd8i_61:not(:disabled){color:rgb(var(--gray-95-rgb) .65)}._chip--button_1qd8i_90{cursor:pointer;border-color:transparent}._chip--button_1qd8i_90:disabled{cursor:initial}._chip--button_1qd8i_90:focus-visible{outline:none}._chip--button_1qd8i_90:focus{outline:2px solid var(--black-100)}._chip--outlined_1qd8i_103{padding:.3125rem .5rem;background-color:var(--white-100);border:1px solid var(--border);border-radius:calc(var(--border-radius-soft) * 4)}._chip--contained_1qd8i_109{padding:.3125rem .5rem;border:1px solid var(--border);border-color:var(--accent);border-radius:calc(var(--border-radius-soft) * 4)}._chip__adornment_1qd8i_115{display:flex;align-items:center;margin-right:.5rem}._chip__remove_1qd8i_120{display:flex;margin-left:.5rem}._chip__remove_1qd8i_120:focus-visible{outline:none}._chip__remove_1qd8i_120:focus:not(:disabled){border-radius:calc(var(--border-radius-soft) * 4);outline:2px solid var(--black-100)}._chip__remove--disabled_1qd8i_131{cursor:default}._chip-loading_1qd8i_135{display:inline-flex;width:6rem;height:2rem;border-radius:4rem}._row-item_8z1a0_1{display:flex;align-items:center;justify-content:space-between;padding:.5rem 1rem;border:1px solid var(--gray-10);border-radius:6px;outline:none}._row-item_8z1a0_1:focus-visible{outline:none}._row-item--clickable_8z1a0_13{cursor:pointer}._row-item--clickable_8z1a0_13:focus{outline:2px solid var(--black-100)}._row-item--disabled_8z1a0_19{cursor:not-allowed}._row-item__content_8z1a0_22{display:flex;flex-grow:1;align-items:center;justify-content:space-between;padding-right:1rem;padding-left:1rem;margin:0;text-align:center}._row-item__content_8z1a0_22:focus-visible{outline:none}._row-item__content_8z1a0_22:focus{outline:2px solid var(--black-100)}
|
|
@@ -13,6 +13,7 @@ export type MarolaIconAdornment = AdornmentSlotProps & Partial<IconProps> & {
|
|
|
13
13
|
disabled?: boolean;
|
|
14
14
|
};
|
|
15
15
|
export type CustomIconAdornment = AdornmentSlotProps & {
|
|
16
|
+
/** Render a complete custom icon outside of Marola icon system */
|
|
16
17
|
customIcon: ReactNode;
|
|
17
18
|
};
|
|
18
19
|
export type AdornmentProps = Either<CustomIconAdornment, MarolaIconAdornment>;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { StoryObj } from '@storybook/react';
|
|
2
|
+
|
|
3
|
+
declare const meta: {
|
|
4
|
+
title: string;
|
|
5
|
+
component: (props: import('./Adornment').AdornmentProps) => import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
tags: string[];
|
|
7
|
+
parameters: {
|
|
8
|
+
layout: string;
|
|
9
|
+
};
|
|
10
|
+
};
|
|
11
|
+
export default meta;
|
|
12
|
+
type Story = StoryObj<typeof meta>;
|
|
13
|
+
export declare const WithMarolaIcon: Story;
|
|
14
|
+
export declare const WithCustomIcon: Story;
|
|
@@ -1,12 +1,14 @@
|
|
|
1
1
|
import { InputHTMLAttributes, ReactNode, SyntheticEvent } from 'react';
|
|
2
2
|
|
|
3
|
-
type AutocompleteProps<T> = InputHTMLAttributes<HTMLInputElement> & {
|
|
3
|
+
type AutocompleteProps<T> = Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> & {
|
|
4
4
|
/** Label text */
|
|
5
5
|
label?: string;
|
|
6
6
|
/** Options array */
|
|
7
7
|
options?: Array<T>;
|
|
8
8
|
/** callback for new option selected */
|
|
9
9
|
onChange?: (event: SyntheticEvent<Element, Event>, newValue: T) => void;
|
|
10
|
+
/** callback when characters are entered into the input box */
|
|
11
|
+
onInputChange?: (event: SyntheticEvent<Element, Event>, newValue: string) => void;
|
|
10
12
|
/** Info message text */
|
|
11
13
|
infoMessage?: string;
|
|
12
14
|
/** Error message text */
|
|
@@ -46,5 +48,5 @@ type AutocompleteProps<T> = InputHTMLAttributes<HTMLInputElement> & {
|
|
|
46
48
|
};
|
|
47
49
|
export declare const Autocomplete: <T extends string | (object & {
|
|
48
50
|
label: string;
|
|
49
|
-
})>({ label, type, options, infoMessage, errorMessage, leftIcon, rightIcon, id, disabled, maxLength, onChange, classNameLabel, classNameInput, classNameErrorMessage, classNameInfoMessage, "data-testid-label": testIdLabel, "data-testid-input": testIdInput, "data-testid-infoMessage": testIdInfoMessage, "data-testid-errorMessage": testIdErrorMessage, ...rest }: AutocompleteProps<T>) => import("react/jsx-runtime").JSX.Element;
|
|
51
|
+
})>({ label, type, options, infoMessage, errorMessage, leftIcon, rightIcon, id, disabled, maxLength, onChange, onInputChange, classNameLabel, classNameInput, classNameErrorMessage, classNameInfoMessage, "data-testid-label": testIdLabel, "data-testid-input": testIdInput, "data-testid-infoMessage": testIdInfoMessage, "data-testid-errorMessage": testIdErrorMessage, ...rest }: AutocompleteProps<T>) => import("react/jsx-runtime").JSX.Element;
|
|
50
52
|
export {};
|
|
@@ -1,30 +1,30 @@
|
|
|
1
1
|
import '../../assets/Autocomplete.css';
|
|
2
|
-
import { jsxs as
|
|
2
|
+
import { jsxs as Fe, jsx as $ } from "react/jsx-runtime";
|
|
3
3
|
import * as g from "react";
|
|
4
|
-
import { useId as pt, useState as
|
|
5
|
-
import { c as
|
|
6
|
-
import { Icon as
|
|
4
|
+
import { useId as pt, useState as qe } from "react";
|
|
5
|
+
import { c as ee } from "../../clsx-DB4S2d7J.js";
|
|
6
|
+
import { Icon as Be } from "../Icon/Icon.js";
|
|
7
7
|
import { s as P, I as gt } from "../../Input.module-ZTRZRcNt.js";
|
|
8
|
-
import { Typography as
|
|
9
|
-
import { b as
|
|
8
|
+
import { Typography as Ke } from "../Typography/Typography.js";
|
|
9
|
+
import { b as Ue, s as ht } from "../../useSlotProps-kRhf7Gil.js";
|
|
10
10
|
import { u as mt } from "../../useId-BW-oWmul.js";
|
|
11
|
-
import { u as
|
|
12
|
-
import { u as
|
|
11
|
+
import { u as $e } from "../../useControlled-CCMYYdCM.js";
|
|
12
|
+
import { u as me } from "../../useEventCallback-BAQJJ3ye.js";
|
|
13
13
|
const bt = (u) => {
|
|
14
14
|
const b = g.useRef({});
|
|
15
15
|
return g.useEffect(() => {
|
|
16
16
|
b.current = u;
|
|
17
17
|
}), b.current;
|
|
18
18
|
};
|
|
19
|
-
function
|
|
19
|
+
function je(u) {
|
|
20
20
|
return typeof u.normalize < "u" ? u.normalize("NFD").replace(/[\u0300-\u036f]/g, "") : u;
|
|
21
21
|
}
|
|
22
22
|
function xt(u = {}) {
|
|
23
23
|
const {
|
|
24
24
|
ignoreAccents: b = !0,
|
|
25
25
|
ignoreCase: h = !0,
|
|
26
|
-
limit:
|
|
27
|
-
matchFrom:
|
|
26
|
+
limit: A,
|
|
27
|
+
matchFrom: D = "any",
|
|
28
28
|
stringify: H,
|
|
29
29
|
trim: V = !1
|
|
30
30
|
} = u;
|
|
@@ -33,21 +33,21 @@ function xt(u = {}) {
|
|
|
33
33
|
getOptionLabel: m
|
|
34
34
|
}) => {
|
|
35
35
|
let I = V ? F.trim() : F;
|
|
36
|
-
h && (I = I.toLowerCase()), b && (I =
|
|
37
|
-
const
|
|
36
|
+
h && (I = I.toLowerCase()), b && (I = je(I));
|
|
37
|
+
const q = I ? M.filter((Y) => {
|
|
38
38
|
let _ = (H || m)(Y);
|
|
39
|
-
return h && (_ = _.toLowerCase()), b && (_ =
|
|
39
|
+
return h && (_ = _.toLowerCase()), b && (_ = je(_)), D === "start" ? _.indexOf(I) === 0 : _.indexOf(I) > -1;
|
|
40
40
|
}) : M;
|
|
41
|
-
return typeof
|
|
41
|
+
return typeof A == "number" ? q.slice(0, A) : q;
|
|
42
42
|
};
|
|
43
43
|
}
|
|
44
|
-
function
|
|
44
|
+
function be(u, b) {
|
|
45
45
|
for (let h = 0; h < u.length; h += 1)
|
|
46
46
|
if (b(u[h]))
|
|
47
47
|
return h;
|
|
48
48
|
return -1;
|
|
49
49
|
}
|
|
50
|
-
const yt = xt(),
|
|
50
|
+
const yt = xt(), ze = 5, Ot = (u) => {
|
|
51
51
|
var b;
|
|
52
52
|
return u.current !== null && ((b = u.current.parentElement) == null ? void 0 : b.contains(document.activeElement));
|
|
53
53
|
};
|
|
@@ -57,47 +57,47 @@ function It(u) {
|
|
|
57
57
|
unstable_isActiveElementInListbox: b = Ot,
|
|
58
58
|
// eslint-disable-next-line @typescript-eslint/naming-convention
|
|
59
59
|
unstable_classNamePrefix: h = "Mui",
|
|
60
|
-
autoComplete:
|
|
61
|
-
autoHighlight:
|
|
60
|
+
autoComplete: A = !1,
|
|
61
|
+
autoHighlight: D = !1,
|
|
62
62
|
autoSelect: H = !1,
|
|
63
63
|
blurOnSelect: V = !1,
|
|
64
64
|
clearOnBlur: M = !u.freeSolo,
|
|
65
65
|
clearOnEscape: F = !1,
|
|
66
66
|
componentName: m = "useAutocomplete",
|
|
67
67
|
defaultValue: I = u.multiple ? [] : null,
|
|
68
|
-
disableClearable:
|
|
68
|
+
disableClearable: q = !1,
|
|
69
69
|
disableCloseOnSelect: Y = !1,
|
|
70
70
|
disabled: _,
|
|
71
|
-
disabledItemsFocusable:
|
|
72
|
-
disableListWrap:
|
|
73
|
-
filterOptions:
|
|
74
|
-
filterSelectedOptions:
|
|
71
|
+
disabledItemsFocusable: xe = !1,
|
|
72
|
+
disableListWrap: te = !1,
|
|
73
|
+
filterOptions: ye = yt,
|
|
74
|
+
filterSelectedOptions: ne = !1,
|
|
75
75
|
freeSolo: R = !1,
|
|
76
|
-
getOptionDisabled:
|
|
77
|
-
getOptionKey:
|
|
76
|
+
getOptionDisabled: U,
|
|
77
|
+
getOptionKey: W,
|
|
78
78
|
getOptionLabel: re = (t) => {
|
|
79
79
|
var e;
|
|
80
80
|
return (e = t.label) != null ? e : t;
|
|
81
81
|
},
|
|
82
82
|
groupBy: j,
|
|
83
83
|
handleHomeEndKeys: oe = !u.freeSolo,
|
|
84
|
-
id:
|
|
84
|
+
id: Oe,
|
|
85
85
|
includeInputInList: se = !1,
|
|
86
|
-
inputValue:
|
|
87
|
-
isOptionEqualToValue:
|
|
86
|
+
inputValue: Ie,
|
|
87
|
+
isOptionEqualToValue: E = (t, e) => t === e,
|
|
88
88
|
multiple: i = !1,
|
|
89
|
-
onChange:
|
|
90
|
-
onClose:
|
|
89
|
+
onChange: ie,
|
|
90
|
+
onClose: X,
|
|
91
91
|
onHighlightChange: le,
|
|
92
|
-
onInputChange:
|
|
93
|
-
onOpen:
|
|
94
|
-
open:
|
|
95
|
-
openOnFocus:
|
|
96
|
-
options:
|
|
97
|
-
readOnly:
|
|
92
|
+
onInputChange: v,
|
|
93
|
+
onOpen: ae,
|
|
94
|
+
open: c,
|
|
95
|
+
openOnFocus: T = !1,
|
|
96
|
+
options: _e,
|
|
97
|
+
readOnly: G = !1,
|
|
98
98
|
selectOnFocus: Ye = !u.freeSolo,
|
|
99
99
|
value: We
|
|
100
|
-
} = u, k = mt(
|
|
100
|
+
} = u, k = mt(Oe);
|
|
101
101
|
let y = re;
|
|
102
102
|
y = (t) => {
|
|
103
103
|
const e = re(t);
|
|
@@ -110,16 +110,16 @@ function It(u) {
|
|
|
110
110
|
}
|
|
111
111
|
return e;
|
|
112
112
|
};
|
|
113
|
-
const
|
|
113
|
+
const we = g.useRef(!1), ke = g.useRef(!0), d = g.useRef(null), N = g.useRef(null), [ue, Xe] = g.useState(null), [S, Ne] = g.useState(-1), Ae = D ? 0 : -1, x = g.useRef(Ae), [r, Ge] = $e({
|
|
114
114
|
controlled: We,
|
|
115
115
|
default: I,
|
|
116
116
|
name: m
|
|
117
|
-
}), [a,
|
|
118
|
-
controlled:
|
|
117
|
+
}), [a, ce] = $e({
|
|
118
|
+
controlled: Ie,
|
|
119
119
|
default: "",
|
|
120
120
|
name: m,
|
|
121
121
|
state: "inputValue"
|
|
122
|
-
}), [
|
|
122
|
+
}), [fe, De] = g.useState(!1), de = g.useCallback((t, e) => {
|
|
123
123
|
if (!(i ? r.length < e.length : e !== null) && !M)
|
|
124
124
|
return;
|
|
125
125
|
let o;
|
|
@@ -131,18 +131,18 @@ function It(u) {
|
|
|
131
131
|
const s = y(e);
|
|
132
132
|
o = typeof s == "string" ? s : "";
|
|
133
133
|
}
|
|
134
|
-
a !== o && (
|
|
135
|
-
}, [y, a, i,
|
|
136
|
-
controlled:
|
|
134
|
+
a !== o && (ce(o), v && v(t, o, "reset"));
|
|
135
|
+
}, [y, a, i, v, ce, M, r]), [z, Ee] = $e({
|
|
136
|
+
controlled: c,
|
|
137
137
|
default: !1,
|
|
138
138
|
name: m,
|
|
139
139
|
state: "open"
|
|
140
|
-
}), [Qe,
|
|
141
|
-
|
|
140
|
+
}), [Qe, ve] = g.useState(!0), Ce = !i && r != null && a === y(r), w = z && !G, f = w ? ye(
|
|
141
|
+
_e.filter((t) => !(ne && (i ? r : [r]).some((e) => e !== null && E(t, e)))),
|
|
142
142
|
// we use the empty string to manipulate `filterOptions` to not filter any options
|
|
143
143
|
// i.e. the filter predicate always returns true
|
|
144
144
|
{
|
|
145
|
-
inputValue:
|
|
145
|
+
inputValue: Ce && Qe ? "" : a,
|
|
146
146
|
getOptionLabel: y
|
|
147
147
|
}
|
|
148
148
|
) : [], C = bt({
|
|
@@ -152,33 +152,33 @@ function It(u) {
|
|
|
152
152
|
});
|
|
153
153
|
g.useEffect(() => {
|
|
154
154
|
const t = r !== C.value;
|
|
155
|
-
|
|
156
|
-
}, [r,
|
|
157
|
-
const
|
|
158
|
-
if (process.env.NODE_ENV !== "production" && r !== null && !R &&
|
|
159
|
-
const t = (i ? r : [r]).filter((e) => !
|
|
155
|
+
fe && !t || R && !t || de(null, r);
|
|
156
|
+
}, [r, de, fe, C.value, R]);
|
|
157
|
+
const Se = z && f.length > 0 && !G;
|
|
158
|
+
if (process.env.NODE_ENV !== "production" && r !== null && !R && _e.length > 0) {
|
|
159
|
+
const t = (i ? r : [r]).filter((e) => !_e.some((n) => E(n, e)));
|
|
160
160
|
t.length > 0 && console.warn([`MUI: The value provided to ${m} is invalid.`, `None of the options match with \`${t.length > 1 ? JSON.stringify(t) : JSON.stringify(t[0])}\`.`, "You can use the `isOptionEqualToValue` prop to customize the equality test."].join(`
|
|
161
161
|
`));
|
|
162
162
|
}
|
|
163
|
-
const
|
|
164
|
-
t === -1 ? d.current.focus() :
|
|
163
|
+
const pe = me((t) => {
|
|
164
|
+
t === -1 ? d.current.focus() : ue.querySelector(`[data-tag-index="${t}"]`).focus();
|
|
165
165
|
});
|
|
166
166
|
g.useEffect(() => {
|
|
167
|
-
i && S > r.length - 1 && (
|
|
168
|
-
}, [r, i, S,
|
|
167
|
+
i && S > r.length - 1 && (Ne(-1), pe(-1));
|
|
168
|
+
}, [r, i, S, pe]);
|
|
169
169
|
function Ze(t, e) {
|
|
170
170
|
if (!N.current || t < 0 || t >= f.length)
|
|
171
171
|
return -1;
|
|
172
172
|
let n = t;
|
|
173
173
|
for (; ; ) {
|
|
174
|
-
const o = N.current.querySelector(`[data-option-index="${n}"]`), s =
|
|
174
|
+
const o = N.current.querySelector(`[data-option-index="${n}"]`), s = xe ? !1 : !o || o.disabled || o.getAttribute("aria-disabled") === "true";
|
|
175
175
|
if (o && o.hasAttribute("tabindex") && !s)
|
|
176
176
|
return n;
|
|
177
177
|
if (e === "next" ? n = (n + 1) % f.length : n = (n - 1 + f.length) % f.length, n === t)
|
|
178
178
|
return -1;
|
|
179
179
|
}
|
|
180
180
|
}
|
|
181
|
-
const B =
|
|
181
|
+
const B = me(({
|
|
182
182
|
event: t,
|
|
183
183
|
index: e,
|
|
184
184
|
reason: n = "auto"
|
|
@@ -196,10 +196,10 @@ function It(u) {
|
|
|
196
196
|
}
|
|
197
197
|
const l = N.current.querySelector(`[data-option-index="${e}"]`);
|
|
198
198
|
if (l && (l.classList.add(`${h}-focused`), n === "keyboard" && l.classList.add(`${h}-focusVisible`), s.scrollHeight > s.clientHeight && n !== "mouse" && n !== "touch")) {
|
|
199
|
-
const p = l, O = s.clientHeight + s.scrollTop,
|
|
200
|
-
|
|
199
|
+
const p = l, O = s.clientHeight + s.scrollTop, he = p.offsetTop + p.offsetHeight;
|
|
200
|
+
he > O ? s.scrollTop = he - s.clientHeight : p.offsetTop - p.offsetHeight * (j ? 1.3 : 0) < s.scrollTop && (s.scrollTop = p.offsetTop - p.offsetHeight * (j ? 1.3 : 0));
|
|
201
201
|
}
|
|
202
|
-
}), L =
|
|
202
|
+
}), L = me(({
|
|
203
203
|
event: t,
|
|
204
204
|
diff: e,
|
|
205
205
|
direction: n = "next",
|
|
@@ -210,19 +210,19 @@ function It(u) {
|
|
|
210
210
|
const l = Ze((() => {
|
|
211
211
|
const p = f.length - 1;
|
|
212
212
|
if (e === "reset")
|
|
213
|
-
return
|
|
213
|
+
return Ae;
|
|
214
214
|
if (e === "start")
|
|
215
215
|
return 0;
|
|
216
216
|
if (e === "end")
|
|
217
217
|
return p;
|
|
218
218
|
const O = x.current + e;
|
|
219
|
-
return O < 0 ? O === -1 && se ? -1 :
|
|
219
|
+
return O < 0 ? O === -1 && se ? -1 : te && x.current !== -1 || Math.abs(e) > 1 ? 0 : p : O > p ? O === p + 1 && se ? -1 : te || Math.abs(e) > 1 ? p : 0 : O;
|
|
220
220
|
})(), n);
|
|
221
221
|
if (B({
|
|
222
222
|
index: l,
|
|
223
223
|
reason: o,
|
|
224
224
|
event: t
|
|
225
|
-
}),
|
|
225
|
+
}), A && e !== "reset")
|
|
226
226
|
if (l === -1)
|
|
227
227
|
d.current.value = a;
|
|
228
228
|
else {
|
|
@@ -237,10 +237,10 @@ function It(u) {
|
|
|
237
237
|
if (x.current !== -1 && C.filteredOptions && C.filteredOptions.length !== f.length && C.inputValue === a && (i ? r.length === C.value.length && C.value.every((e, n) => y(r[n]) === y(e)) : t(C.value, r))) {
|
|
238
238
|
const e = C.filteredOptions[x.current];
|
|
239
239
|
if (e)
|
|
240
|
-
return
|
|
240
|
+
return be(f, (n) => y(n) === y(e));
|
|
241
241
|
}
|
|
242
242
|
return -1;
|
|
243
|
-
},
|
|
243
|
+
}, Pe = g.useCallback(() => {
|
|
244
244
|
if (!w)
|
|
245
245
|
return;
|
|
246
246
|
const t = et();
|
|
@@ -258,9 +258,9 @@ function It(u) {
|
|
|
258
258
|
if (N.current) {
|
|
259
259
|
if (e != null) {
|
|
260
260
|
const n = f[x.current];
|
|
261
|
-
if (i && n &&
|
|
261
|
+
if (i && n && be(r, (s) => E(n, s)) !== -1)
|
|
262
262
|
return;
|
|
263
|
-
const o =
|
|
263
|
+
const o = be(f, (s) => E(s, e));
|
|
264
264
|
o === -1 ? L({
|
|
265
265
|
diff: "reset"
|
|
266
266
|
}) : B({
|
|
@@ -284,47 +284,47 @@ function It(u) {
|
|
|
284
284
|
// Don't sync the highlighted index with the value when multiple
|
|
285
285
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
286
286
|
i ? !1 : r,
|
|
287
|
-
|
|
287
|
+
ne,
|
|
288
288
|
L,
|
|
289
289
|
B,
|
|
290
290
|
w,
|
|
291
291
|
a,
|
|
292
292
|
i
|
|
293
|
-
]), tt =
|
|
294
|
-
ht(N, t), t &&
|
|
293
|
+
]), tt = me((t) => {
|
|
294
|
+
ht(N, t), t && Pe();
|
|
295
295
|
});
|
|
296
296
|
process.env.NODE_ENV !== "production" && g.useEffect(() => {
|
|
297
297
|
(!d.current || d.current.nodeName !== "INPUT") && (d.current && d.current.nodeName === "TEXTAREA" ? console.warn([`A textarea element was provided to ${m} where input was expected.`, "This is not a supported scenario but it may work under certain conditions.", "A textarea keyboard navigation may conflict with Autocomplete controls (for example enter and arrow keys).", "Make sure to test keyboard navigation and add custom event handlers if necessary."].join(`
|
|
298
298
|
`)) : console.error([`MUI: Unable to find the input element. It was resolved to ${d.current} while an HTMLInputElement was expected.`, `Instead, ${m} expects an input element.`, "", m === "useAutocomplete" ? "Make sure you have bound getInputProps correctly and that the normal ref/effect resolutions order is guaranteed." : "Make sure you have customized the input component correctly."].join(`
|
|
299
299
|
`)));
|
|
300
300
|
}, [m]), g.useEffect(() => {
|
|
301
|
-
|
|
302
|
-
}, [
|
|
301
|
+
Pe();
|
|
302
|
+
}, [Pe]);
|
|
303
303
|
const K = (t) => {
|
|
304
|
-
z || (
|
|
305
|
-
},
|
|
306
|
-
z && (
|
|
304
|
+
z || (Ee(!0), ve(!0), ae && ae(t));
|
|
305
|
+
}, Q = (t, e) => {
|
|
306
|
+
z && (Ee(!1), X && X(t, e));
|
|
307
307
|
}, J = (t, e, n, o) => {
|
|
308
308
|
if (i) {
|
|
309
309
|
if (r.length === e.length && r.every((s, l) => s === e[l]))
|
|
310
310
|
return;
|
|
311
311
|
} else if (r === e)
|
|
312
312
|
return;
|
|
313
|
-
|
|
314
|
-
},
|
|
313
|
+
ie && ie(t, e, n, o), Ge(e);
|
|
314
|
+
}, ge = g.useRef(!1), Z = (t, e, n = "selectOption", o = "options") => {
|
|
315
315
|
let s = n, l = e;
|
|
316
316
|
if (i) {
|
|
317
317
|
if (l = Array.isArray(r) ? r.slice() : [], process.env.NODE_ENV !== "production") {
|
|
318
|
-
const O = l.filter((
|
|
318
|
+
const O = l.filter((he) => E(e, he));
|
|
319
319
|
O.length > 1 && console.error([`MUI: The \`isOptionEqualToValue\` method of ${m} does not handle the arguments correctly.`, `The component expects a single value to match a given option but found ${O.length} matches.`].join(`
|
|
320
320
|
`));
|
|
321
321
|
}
|
|
322
|
-
const p =
|
|
322
|
+
const p = be(l, (O) => E(e, O));
|
|
323
323
|
p === -1 ? l.push(e) : o !== "freeSolo" && (l.splice(p, 1), s = "removeOption");
|
|
324
324
|
}
|
|
325
|
-
|
|
325
|
+
de(t, l), J(t, l, s, {
|
|
326
326
|
option: e
|
|
327
|
-
}), !Y && (!t || !t.ctrlKey && !t.metaKey) &&
|
|
327
|
+
}), !Y && (!t || !t.ctrlKey && !t.metaKey) && Q(t, s), (V === !0 || V === "touch" && ge.current || V === "mouse" && !ge.current) && d.current.blur();
|
|
328
328
|
};
|
|
329
329
|
function nt(t, e) {
|
|
330
330
|
if (t === -1)
|
|
@@ -333,23 +333,23 @@ function It(u) {
|
|
|
333
333
|
for (; ; ) {
|
|
334
334
|
if (e === "next" && n === r.length || e === "previous" && n === -1)
|
|
335
335
|
return -1;
|
|
336
|
-
const o =
|
|
336
|
+
const o = ue.querySelector(`[data-tag-index="${n}"]`);
|
|
337
337
|
if (!o || !o.hasAttribute("tabindex") || o.disabled || o.getAttribute("aria-disabled") === "true")
|
|
338
338
|
n += e === "next" ? 1 : -1;
|
|
339
339
|
else
|
|
340
340
|
return n;
|
|
341
341
|
}
|
|
342
342
|
}
|
|
343
|
-
const
|
|
343
|
+
const Le = (t, e) => {
|
|
344
344
|
if (!i)
|
|
345
345
|
return;
|
|
346
|
-
a === "" &&
|
|
346
|
+
a === "" && Q(t, "toggleInput");
|
|
347
347
|
let n = S;
|
|
348
|
-
S === -1 ? a === "" && e === "previous" && (n = r.length - 1) : (n += e === "next" ? 1 : -1, n < 0 && (n = 0), n === r.length && (n = -1)), n = nt(n, e),
|
|
349
|
-
},
|
|
350
|
-
|
|
348
|
+
S === -1 ? a === "" && e === "previous" && (n = r.length - 1) : (n += e === "next" ? 1 : -1, n < 0 && (n = 0), n === r.length && (n = -1)), n = nt(n, e), Ne(n), pe(n);
|
|
349
|
+
}, Ve = (t) => {
|
|
350
|
+
we.current = !0, ce(""), v && v(t, "", "clear"), J(t, i ? [] : null, "clear");
|
|
351
351
|
}, rt = (t) => (e) => {
|
|
352
|
-
if (t.onKeyDown && t.onKeyDown(e), !e.defaultMuiPrevented && (S !== -1 && ["ArrowLeft", "ArrowRight"].indexOf(e.key) === -1 && (
|
|
352
|
+
if (t.onKeyDown && t.onKeyDown(e), !e.defaultMuiPrevented && (S !== -1 && ["ArrowLeft", "ArrowRight"].indexOf(e.key) === -1 && (Ne(-1), pe(-1)), e.which !== 229))
|
|
353
353
|
switch (e.key) {
|
|
354
354
|
case "Home":
|
|
355
355
|
w && oe && (e.preventDefault(), L({
|
|
@@ -369,7 +369,7 @@ function It(u) {
|
|
|
369
369
|
break;
|
|
370
370
|
case "PageUp":
|
|
371
371
|
e.preventDefault(), L({
|
|
372
|
-
diff: -
|
|
372
|
+
diff: -ze,
|
|
373
373
|
direction: "previous",
|
|
374
374
|
reason: "keyboard",
|
|
375
375
|
event: e
|
|
@@ -377,7 +377,7 @@ function It(u) {
|
|
|
377
377
|
break;
|
|
378
378
|
case "PageDown":
|
|
379
379
|
e.preventDefault(), L({
|
|
380
|
-
diff:
|
|
380
|
+
diff: ze,
|
|
381
381
|
direction: "next",
|
|
382
382
|
reason: "keyboard",
|
|
383
383
|
event: e
|
|
@@ -400,25 +400,25 @@ function It(u) {
|
|
|
400
400
|
}), K(e);
|
|
401
401
|
break;
|
|
402
402
|
case "ArrowLeft":
|
|
403
|
-
|
|
403
|
+
Le(e, "previous");
|
|
404
404
|
break;
|
|
405
405
|
case "ArrowRight":
|
|
406
|
-
|
|
406
|
+
Le(e, "next");
|
|
407
407
|
break;
|
|
408
408
|
case "Enter":
|
|
409
409
|
if (x.current !== -1 && w) {
|
|
410
|
-
const n = f[x.current], o =
|
|
410
|
+
const n = f[x.current], o = U ? U(n) : !1;
|
|
411
411
|
if (e.preventDefault(), o)
|
|
412
412
|
return;
|
|
413
|
-
|
|
413
|
+
Z(e, n, "selectOption"), A && d.current.setSelectionRange(d.current.value.length, d.current.value.length);
|
|
414
414
|
} else
|
|
415
|
-
R && a !== "" &&
|
|
415
|
+
R && a !== "" && Ce === !1 && (i && e.preventDefault(), Z(e, a, "createOption", "freeSolo"));
|
|
416
416
|
break;
|
|
417
417
|
case "Escape":
|
|
418
|
-
w ? (e.preventDefault(), e.stopPropagation(),
|
|
418
|
+
w ? (e.preventDefault(), e.stopPropagation(), Q(e, "escape")) : F && (a !== "" || i && r.length > 0) && (e.preventDefault(), e.stopPropagation(), Ve(e));
|
|
419
419
|
break;
|
|
420
420
|
case "Backspace":
|
|
421
|
-
if (i && !
|
|
421
|
+
if (i && !G && a === "" && r.length > 0) {
|
|
422
422
|
const n = S === -1 ? r.length - 1 : S, o = r.slice();
|
|
423
423
|
o.splice(n, 1), J(e, o, "removeOption", {
|
|
424
424
|
option: r[n]
|
|
@@ -426,7 +426,7 @@ function It(u) {
|
|
|
426
426
|
}
|
|
427
427
|
break;
|
|
428
428
|
case "Delete":
|
|
429
|
-
if (i && !
|
|
429
|
+
if (i && !G && a === "" && r.length > 0 && S !== -1) {
|
|
430
430
|
const n = S, o = r.slice();
|
|
431
431
|
o.splice(n, 1), J(e, o, "removeOption", {
|
|
432
432
|
option: r[n]
|
|
@@ -435,16 +435,16 @@ function It(u) {
|
|
|
435
435
|
break;
|
|
436
436
|
}
|
|
437
437
|
}, ot = (t) => {
|
|
438
|
-
|
|
439
|
-
},
|
|
438
|
+
De(!0), T && !we.current && K(t);
|
|
439
|
+
}, Me = (t) => {
|
|
440
440
|
if (b(N)) {
|
|
441
441
|
d.current.focus();
|
|
442
442
|
return;
|
|
443
443
|
}
|
|
444
|
-
|
|
444
|
+
De(!1), ke.current = !0, we.current = !1, H && x.current !== -1 && w ? Z(t, f[x.current], "blur") : H && R && a !== "" ? Z(t, a, "blur", "freeSolo") : M && de(t, r), Q(t, "blur");
|
|
445
445
|
}, st = (t) => {
|
|
446
446
|
const e = t.target.value;
|
|
447
|
-
a !== e && (
|
|
447
|
+
a !== e && (ce(e), ve(!1), v && v(t, e, "input")), e === "" ? !q && !i && J(t, null, "clear") : K(t);
|
|
448
448
|
}, it = (t) => {
|
|
449
449
|
const e = Number(t.currentTarget.getAttribute("data-option-index"));
|
|
450
450
|
x.current !== e && B({
|
|
@@ -457,31 +457,31 @@ function It(u) {
|
|
|
457
457
|
event: t,
|
|
458
458
|
index: Number(t.currentTarget.getAttribute("data-option-index")),
|
|
459
459
|
reason: "touch"
|
|
460
|
-
}),
|
|
460
|
+
}), ge.current = !0;
|
|
461
461
|
}, at = (t) => {
|
|
462
462
|
const e = Number(t.currentTarget.getAttribute("data-option-index"));
|
|
463
|
-
|
|
463
|
+
Z(t, f[e], "selectOption"), ge.current = !1;
|
|
464
464
|
}, ut = (t) => (e) => {
|
|
465
465
|
const n = r.slice();
|
|
466
466
|
n.splice(t, 1), J(e, n, "removeOption", {
|
|
467
467
|
option: r[t]
|
|
468
468
|
});
|
|
469
|
-
},
|
|
470
|
-
z ?
|
|
469
|
+
}, Re = (t) => {
|
|
470
|
+
z ? Q(t, "toggleInput") : K(t);
|
|
471
471
|
}, ct = (t) => {
|
|
472
472
|
t.currentTarget.contains(t.target) && t.target.getAttribute("id") !== k && t.preventDefault();
|
|
473
473
|
}, ft = (t) => {
|
|
474
|
-
t.currentTarget.contains(t.target) && (d.current.focus(), Ye &&
|
|
474
|
+
t.currentTarget.contains(t.target) && (d.current.focus(), Ye && ke.current && d.current.selectionEnd - d.current.selectionStart === 0 && d.current.select(), ke.current = !1);
|
|
475
475
|
}, dt = (t) => {
|
|
476
|
-
!_ && (a === "" || !z) &&
|
|
476
|
+
!_ && (a === "" || !z) && Re(t);
|
|
477
477
|
};
|
|
478
|
-
let
|
|
479
|
-
|
|
480
|
-
let
|
|
478
|
+
let Te = R && a.length > 0;
|
|
479
|
+
Te = Te || (i ? r.length > 0 : r !== null);
|
|
480
|
+
let He = f;
|
|
481
481
|
if (j) {
|
|
482
482
|
const t = /* @__PURE__ */ new Map();
|
|
483
483
|
let e = !1;
|
|
484
|
-
|
|
484
|
+
He = f.reduce((n, o, s) => {
|
|
485
485
|
const l = j(o);
|
|
486
486
|
return n.length > 0 && n[n.length - 1].group === l ? n[n.length - 1].options.push(o) : (process.env.NODE_ENV !== "production" && (t.get(l) && !e && (console.warn(`MUI: The options provided combined with the \`groupBy\` method of ${m} returns duplicated headers.`, "You can solve the issue by sorting the options with the output of `groupBy`."), e = !0), t.set(l, !0)), n.push({
|
|
487
487
|
key: s,
|
|
@@ -491,9 +491,9 @@ function It(u) {
|
|
|
491
491
|
})), n;
|
|
492
492
|
}, []);
|
|
493
493
|
}
|
|
494
|
-
return _ &&
|
|
495
|
-
getRootProps: (t = {}) =>
|
|
496
|
-
"aria-owns":
|
|
494
|
+
return _ && fe && Me(), {
|
|
495
|
+
getRootProps: (t = {}) => Ue({
|
|
496
|
+
"aria-owns": Se ? `${k}-listbox` : null
|
|
497
497
|
}, t, {
|
|
498
498
|
onKeyDown: rt(t),
|
|
499
499
|
onMouseDown: ct,
|
|
@@ -506,16 +506,16 @@ function It(u) {
|
|
|
506
506
|
getInputProps: () => ({
|
|
507
507
|
id: k,
|
|
508
508
|
value: a,
|
|
509
|
-
onBlur:
|
|
509
|
+
onBlur: Me,
|
|
510
510
|
onFocus: ot,
|
|
511
511
|
onChange: st,
|
|
512
512
|
onMouseDown: dt,
|
|
513
513
|
// if open then this is handled imperatively so don't let react override
|
|
514
514
|
// only have an opinion about this when closed
|
|
515
515
|
"aria-activedescendant": w ? "" : null,
|
|
516
|
-
"aria-autocomplete":
|
|
517
|
-
"aria-controls":
|
|
518
|
-
"aria-expanded":
|
|
516
|
+
"aria-autocomplete": A ? "both" : "list",
|
|
517
|
+
"aria-controls": Se ? `${k}-listbox` : void 0,
|
|
518
|
+
"aria-expanded": Se,
|
|
519
519
|
// Disable browser's suggestion that might overlap with the popup.
|
|
520
520
|
// Handle autocomplete but not autofill.
|
|
521
521
|
autoComplete: "off",
|
|
@@ -528,20 +528,20 @@ function It(u) {
|
|
|
528
528
|
getClearProps: () => ({
|
|
529
529
|
tabIndex: -1,
|
|
530
530
|
type: "button",
|
|
531
|
-
onClick:
|
|
531
|
+
onClick: Ve
|
|
532
532
|
}),
|
|
533
533
|
getPopupIndicatorProps: () => ({
|
|
534
534
|
tabIndex: -1,
|
|
535
535
|
type: "button",
|
|
536
|
-
onClick:
|
|
536
|
+
onClick: Re
|
|
537
537
|
}),
|
|
538
538
|
getTagProps: ({
|
|
539
539
|
index: t
|
|
540
|
-
}) =>
|
|
540
|
+
}) => Ue({
|
|
541
541
|
key: t,
|
|
542
542
|
"data-tag-index": t,
|
|
543
543
|
tabIndex: -1
|
|
544
|
-
}, !
|
|
544
|
+
}, !G && {
|
|
545
545
|
onDelete: ut(t)
|
|
546
546
|
}),
|
|
547
547
|
getListboxProps: () => ({
|
|
@@ -558,9 +558,9 @@ function It(u) {
|
|
|
558
558
|
option: e
|
|
559
559
|
}) => {
|
|
560
560
|
var n;
|
|
561
|
-
const o = (i ? r : [r]).some((l) => l != null &&
|
|
561
|
+
const o = (i ? r : [r]).some((l) => l != null && E(e, l)), s = U ? U(e) : !1;
|
|
562
562
|
return {
|
|
563
|
-
key: (n =
|
|
563
|
+
key: (n = W == null ? void 0 : W(e)) != null ? n : y(e),
|
|
564
564
|
tabIndex: -1,
|
|
565
565
|
role: "option",
|
|
566
566
|
id: `${k}-option-${t}`,
|
|
@@ -575,17 +575,17 @@ function It(u) {
|
|
|
575
575
|
id: k,
|
|
576
576
|
inputValue: a,
|
|
577
577
|
value: r,
|
|
578
|
-
dirty:
|
|
579
|
-
expanded: w &&
|
|
578
|
+
dirty: Te,
|
|
579
|
+
expanded: w && ue,
|
|
580
580
|
popupOpen: w,
|
|
581
|
-
focused:
|
|
582
|
-
anchorEl:
|
|
581
|
+
focused: fe || S !== -1,
|
|
582
|
+
anchorEl: ue,
|
|
583
583
|
setAnchorEl: Xe,
|
|
584
584
|
focusedTag: S,
|
|
585
|
-
groupedOptions:
|
|
585
|
+
groupedOptions: He
|
|
586
586
|
};
|
|
587
587
|
}
|
|
588
|
-
const _t = "_autocomplete_1mx2f_1",
|
|
588
|
+
const _t = "_autocomplete_1mx2f_1", Je = {
|
|
589
589
|
autocomplete: _t,
|
|
590
590
|
"autocomplete__dropdown-list": "_autocomplete__dropdown-list_1mx2f_4",
|
|
591
591
|
"autocomplete__dropdown-item": "_autocomplete__dropdown-item_1mx2f_9"
|
|
@@ -593,92 +593,93 @@ const _t = "_autocomplete_1mx2f_1", ze = {
|
|
|
593
593
|
label: u,
|
|
594
594
|
type: b,
|
|
595
595
|
options: h,
|
|
596
|
-
infoMessage:
|
|
597
|
-
errorMessage:
|
|
596
|
+
infoMessage: A,
|
|
597
|
+
errorMessage: D,
|
|
598
598
|
leftIcon: H,
|
|
599
599
|
rightIcon: V,
|
|
600
600
|
id: M,
|
|
601
601
|
disabled: F,
|
|
602
602
|
maxLength: m,
|
|
603
603
|
onChange: I,
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
"data-testid-
|
|
610
|
-
"data-testid-
|
|
611
|
-
"data-testid-
|
|
612
|
-
|
|
604
|
+
onInputChange: q,
|
|
605
|
+
classNameLabel: Y,
|
|
606
|
+
classNameInput: _,
|
|
607
|
+
classNameErrorMessage: xe,
|
|
608
|
+
classNameInfoMessage: te,
|
|
609
|
+
"data-testid-label": ye,
|
|
610
|
+
"data-testid-input": ne,
|
|
611
|
+
"data-testid-infoMessage": R,
|
|
612
|
+
"data-testid-errorMessage": U,
|
|
613
|
+
...W
|
|
613
614
|
}) => {
|
|
614
|
-
const
|
|
615
|
-
Object.assign(
|
|
616
|
-
const [
|
|
617
|
-
id:
|
|
615
|
+
const re = pt(), j = M || `input_${re}`;
|
|
616
|
+
Object.assign(W, { "data-testid": ne });
|
|
617
|
+
const [oe, Oe] = qe(), [se, Ie] = qe(""), { getRootProps: E, getInputProps: i, getOptionProps: ie, groupedOptions: X, getListboxProps: le, focused: v, getInputLabelProps: ae } = It({
|
|
618
|
+
id: j,
|
|
618
619
|
options: h,
|
|
619
620
|
getOptionLabel: (c) => typeof c == "string" ? c : c == null ? void 0 : c.label,
|
|
620
|
-
value:
|
|
621
|
-
inputValue:
|
|
622
|
-
onChange: (c,
|
|
623
|
-
I && I(c,
|
|
621
|
+
value: oe,
|
|
622
|
+
inputValue: se,
|
|
623
|
+
onChange: (c, T) => {
|
|
624
|
+
I && I(c, T), Oe(T);
|
|
624
625
|
},
|
|
625
|
-
onInputChange: (c,
|
|
626
|
-
|
|
626
|
+
onInputChange: (c, T) => {
|
|
627
|
+
q && q(c, T), Ie(T);
|
|
627
628
|
}
|
|
628
629
|
});
|
|
629
|
-
return /* @__PURE__ */
|
|
630
|
-
u && /* @__PURE__ */
|
|
631
|
-
|
|
630
|
+
return /* @__PURE__ */ Fe("div", { className: "autocomplete", children: [
|
|
631
|
+
u && /* @__PURE__ */ $(
|
|
632
|
+
Ke,
|
|
632
633
|
{
|
|
633
634
|
element: "label",
|
|
634
|
-
elementProps: { ...
|
|
635
|
-
className:
|
|
636
|
-
"data-testid":
|
|
635
|
+
elementProps: { ...ae() },
|
|
636
|
+
className: ee(P.input__label, Y),
|
|
637
|
+
"data-testid": ye,
|
|
637
638
|
children: u
|
|
638
639
|
}
|
|
639
640
|
),
|
|
640
|
-
/* @__PURE__ */
|
|
641
|
+
/* @__PURE__ */ $("div", { ...E(), className: v ? "Mui-focused" : "", children: /* @__PURE__ */ $(
|
|
641
642
|
gt,
|
|
642
643
|
{
|
|
643
644
|
disabled: F,
|
|
644
|
-
error: !!
|
|
645
|
+
error: !!D,
|
|
645
646
|
"aria-label": u,
|
|
646
647
|
slotProps: {
|
|
647
648
|
root: (c) => ({
|
|
648
|
-
className:
|
|
649
|
+
className: ee(P["input__input-el-wrapper"], {
|
|
649
650
|
[P["input--disabled"]]: c.disabled,
|
|
650
651
|
[P["input--focused"]]: c.focused,
|
|
651
652
|
[P["input--error"]]: c.error
|
|
652
653
|
})
|
|
653
654
|
}),
|
|
654
655
|
input: {
|
|
655
|
-
...
|
|
656
|
-
className:
|
|
656
|
+
...i(),
|
|
657
|
+
className: ee(P["input__input-el"], _),
|
|
657
658
|
maxLength: m,
|
|
658
|
-
...
|
|
659
|
+
...W
|
|
659
660
|
}
|
|
660
661
|
},
|
|
661
|
-
startAdornment: H && /* @__PURE__ */
|
|
662
|
-
endAdornment: b === "search" ? /* @__PURE__ */
|
|
662
|
+
startAdornment: H && /* @__PURE__ */ $("span", { className: P["input__left-icon"], children: H }),
|
|
663
|
+
endAdornment: b === "search" ? /* @__PURE__ */ $("span", { className: P["input__right-icon"], children: /* @__PURE__ */ $(Be, { color: "var(--accent)", icon: "magnifying-glass" }) }) : V && /* @__PURE__ */ $("span", { className: P["input__right-icon"], children: V })
|
|
663
664
|
}
|
|
664
665
|
) }),
|
|
665
|
-
|
|
666
|
+
X.length > 0 && !F && /* @__PURE__ */ $("ul", { ...le(), className: Je["autocomplete__dropdown-list"], children: X.map((c, T) => /* @__PURE__ */ $(
|
|
666
667
|
"li",
|
|
667
668
|
{
|
|
668
|
-
tabIndex:
|
|
669
|
-
className:
|
|
670
|
-
...
|
|
669
|
+
tabIndex: T,
|
|
670
|
+
className: Je["autocomplete__dropdown-item"],
|
|
671
|
+
...ie({ option: c, index: T }),
|
|
671
672
|
children: typeof c == "string" ? c : c == null ? void 0 : c.label
|
|
672
673
|
}
|
|
673
674
|
)) }),
|
|
674
|
-
(
|
|
675
|
-
|
|
675
|
+
(D || A) && /* @__PURE__ */ Fe(
|
|
676
|
+
Ke,
|
|
676
677
|
{
|
|
677
|
-
className:
|
|
678
|
-
"data-testid":
|
|
678
|
+
className: D ? ee(P["input__error-message"], xe) : ee(P["input__info-message"], te),
|
|
679
|
+
"data-testid": D ? U : R,
|
|
679
680
|
children: [
|
|
680
|
-
/* @__PURE__ */
|
|
681
|
-
|
|
681
|
+
/* @__PURE__ */ $(Be, { icon: "circle-exclamation" }),
|
|
682
|
+
D || A
|
|
682
683
|
]
|
|
683
684
|
}
|
|
684
685
|
)
|
|
@@ -4,10 +4,11 @@ declare const meta: {
|
|
|
4
4
|
title: string;
|
|
5
5
|
component: <T extends string | (object & {
|
|
6
6
|
label: string;
|
|
7
|
-
})>({ label, type, options, infoMessage, errorMessage, leftIcon, rightIcon, id, disabled, maxLength, onChange, classNameLabel, classNameInput, classNameErrorMessage, classNameInfoMessage, "data-testid-label": testIdLabel, "data-testid-input": testIdInput, "data-testid-infoMessage": testIdInfoMessage, "data-testid-errorMessage": testIdErrorMessage, ...rest }: import('react').InputHTMLAttributes<HTMLInputElement> & {
|
|
7
|
+
})>({ label, type, options, infoMessage, errorMessage, leftIcon, rightIcon, id, disabled, maxLength, onChange, onInputChange, classNameLabel, classNameInput, classNameErrorMessage, classNameInfoMessage, "data-testid-label": testIdLabel, "data-testid-input": testIdInput, "data-testid-infoMessage": testIdInfoMessage, "data-testid-errorMessage": testIdErrorMessage, ...rest }: Omit<import('react').InputHTMLAttributes<HTMLInputElement>, "onChange"> & {
|
|
8
8
|
label?: string | undefined;
|
|
9
9
|
options?: T[] | undefined;
|
|
10
10
|
onChange?: ((event: import('react').SyntheticEvent<Element, Event>, newValue: T) => void) | undefined;
|
|
11
|
+
onInputChange?: ((event: import('react').SyntheticEvent<Element, Event>, newValue: string) => void) | undefined;
|
|
11
12
|
infoMessage?: string | undefined;
|
|
12
13
|
errorMessage?: string | undefined;
|
|
13
14
|
leftIcon?: import('react').ReactNode;
|
|
@@ -5,7 +5,7 @@ import "../Adornment/Adornment.js";
|
|
|
5
5
|
import "../Icon/Icon.js";
|
|
6
6
|
import "../Typography/Typography.js";
|
|
7
7
|
import "../Button/Button.js";
|
|
8
|
-
import { C as k } from "../../Toggle-
|
|
8
|
+
import { C as k } from "../../Toggle-uBAGft1J.js";
|
|
9
9
|
import "../Dialog/Backdrop.js";
|
|
10
10
|
import "../IconButton/IconButton.js";
|
|
11
11
|
import "../Select/Select.js";
|
|
@@ -83,13 +83,13 @@ declare const meta: {
|
|
|
83
83
|
content?: string | undefined;
|
|
84
84
|
dir?: string | undefined;
|
|
85
85
|
hidden?: boolean | undefined;
|
|
86
|
-
id?: string | undefined;
|
|
87
86
|
onChange?: import('react').FormEventHandler<HTMLDivElement> | undefined;
|
|
88
87
|
accessKey?: string | undefined;
|
|
89
88
|
autoFocus?: boolean | undefined;
|
|
90
89
|
contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
|
|
91
90
|
contextMenu?: string | undefined;
|
|
92
91
|
draggable?: (boolean | "true" | "false") | undefined;
|
|
92
|
+
id?: string | undefined;
|
|
93
93
|
lang?: string | undefined;
|
|
94
94
|
nonce?: string | undefined;
|
|
95
95
|
spellCheck?: (boolean | "true" | "false") | undefined;
|
|
@@ -5,7 +5,7 @@ import "../Adornment/Adornment.js";
|
|
|
5
5
|
import "../Icon/Icon.js";
|
|
6
6
|
import "../Typography/Typography.js";
|
|
7
7
|
import "../Button/Button.js";
|
|
8
|
-
import { R as I, R as b } from "../../Toggle-
|
|
8
|
+
import { R as I, R as b } from "../../Toggle-uBAGft1J.js";
|
|
9
9
|
import "../Dialog/Backdrop.js";
|
|
10
10
|
import "../IconButton/IconButton.js";
|
|
11
11
|
import "../Select/Select.js";
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { StoryObj } from '@storybook/react';
|
|
2
|
+
|
|
3
|
+
declare const meta: {
|
|
4
|
+
title: string;
|
|
5
|
+
component: import('react').ForwardRefExoticComponent<import('./RowItem').RowItemProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
6
|
+
tags: string[];
|
|
7
|
+
parameters: {
|
|
8
|
+
layout: string;
|
|
9
|
+
};
|
|
10
|
+
};
|
|
11
|
+
export default meta;
|
|
12
|
+
type Story = StoryObj<typeof meta>;
|
|
13
|
+
export declare const Simple: Story;
|
|
14
|
+
export declare const Clickable: Story;
|
|
15
|
+
export declare const WithAdornement: Story;
|
|
16
|
+
export declare const WithButtons: Story;
|
|
17
|
+
export declare const WithButtonsAndAdornementDisabled: Story;
|
|
@@ -4,7 +4,7 @@ import "../../clsx-DB4S2d7J.js";
|
|
|
4
4
|
import "../Icon/Icon.js";
|
|
5
5
|
import "../Typography/Typography.js";
|
|
6
6
|
import "../Button/Button.js";
|
|
7
|
-
import { T as b } from "../../Toggle-
|
|
7
|
+
import { T as b } from "../../Toggle-uBAGft1J.js";
|
|
8
8
|
import "../Dialog/Backdrop.js";
|
|
9
9
|
import "../IconButton/IconButton.js";
|
|
10
10
|
import "../Select/Select.js";
|
package/dist/main.js
CHANGED
|
@@ -3,7 +3,7 @@ import { Advice as p } from "./components/Advice/Advice.js";
|
|
|
3
3
|
import { Autocomplete as f } from "./components/Autocomplete/Autocomplete.js";
|
|
4
4
|
import { Button as x } from "./components/Button/Button.js";
|
|
5
5
|
import { Checkbox as l } from "./components/Checkbox/Checkbox.js";
|
|
6
|
-
import { C as T, R as s, T as c } from "./Toggle-
|
|
6
|
+
import { C as T, R as s, T as c } from "./Toggle-uBAGft1J.js";
|
|
7
7
|
import { Dialog as S } from "./components/Dialog/Dialog.js";
|
|
8
8
|
import { EllipsisTooltip as d } from "./components/EllipsisTooltip/EllipsisTooltip.js";
|
|
9
9
|
import { Icon as k } from "./components/Icon/Icon.js";
|
package/package.json
CHANGED
package/dist/Toggle-C7W0gYOI.js
DELETED
|
@@ -1,175 +0,0 @@
|
|
|
1
|
-
import './assets/Toggle2.css';
|
|
2
|
-
import { jsx as e, jsxs as q } from "react/jsx-runtime";
|
|
3
|
-
import { forwardRef as y } from "react";
|
|
4
|
-
import { c as r } from "./clsx-DB4S2d7J.js";
|
|
5
|
-
import { Icon as N } from "./components/Icon/Icon.js";
|
|
6
|
-
import { Typography as x } from "./components/Typography/Typography.js";
|
|
7
|
-
import "./components/Button/Button.js";
|
|
8
|
-
import { Adornment as C } from "./components/Adornment/Adornment.js";
|
|
9
|
-
import "./components/Dialog/Backdrop.js";
|
|
10
|
-
import "./components/IconButton/IconButton.js";
|
|
11
|
-
import "./components/Select/Select.js";
|
|
12
|
-
import "./components/Table/Table.js";
|
|
13
|
-
import "./components/Tabs/Tabs.js";
|
|
14
|
-
import { s as k } from "./Group-B3p31ftp.js";
|
|
15
|
-
import "./contexts/SnackbarProvider/SnackbarProvider.js";
|
|
16
|
-
import { Skeleton as f } from "./components/Skeleton/Skeleton.js";
|
|
17
|
-
import { B as w } from "./Button-DiLqcAJG.js";
|
|
18
|
-
const I = "_chip_1qd8i_61", P = "_chip__adornment_1qd8i_115", S = "_chip__remove_1qd8i_120", d = {
|
|
19
|
-
"u-typography-h1": "_u-typography-h1_1qd8i_1",
|
|
20
|
-
"u-typography-h2": "_u-typography-h2_1qd8i_8",
|
|
21
|
-
"u-typography-h3": "_u-typography-h3_1qd8i_15",
|
|
22
|
-
"u-typography-h4": "_u-typography-h4_1qd8i_22",
|
|
23
|
-
"u-typography-h5": "_u-typography-h5_1qd8i_29",
|
|
24
|
-
"u-typography-h6": "_u-typography-h6_1qd8i_36",
|
|
25
|
-
"u-typography-base": "_u-typography-base_1qd8i_43",
|
|
26
|
-
"u-typography-base--xxl": "_u-typography-base--xxl_1qd8i_49",
|
|
27
|
-
"u-typography-base--xl": "_u-typography-base--xl_1qd8i_53",
|
|
28
|
-
"u-typography-base--lg": "_u-typography-base--lg_1qd8i_57",
|
|
29
|
-
"u-typography-base--sm": "_u-typography-base--sm_1qd8i_61",
|
|
30
|
-
chip: I,
|
|
31
|
-
"u-typography-base--bold": "_u-typography-base--bold_1qd8i_65",
|
|
32
|
-
"u-typography-base--strikethrough": "_u-typography-base--strikethrough_1qd8i_68",
|
|
33
|
-
"u-typography-base--underlined": "_u-typography-base--underlined_1qd8i_71",
|
|
34
|
-
"u-typography-base--strikethrough-underlined": "_u-typography-base--strikethrough-underlined_1qd8i_74",
|
|
35
|
-
"chip--button": "_chip--button_1qd8i_90",
|
|
36
|
-
"chip--outlined": "_chip--outlined_1qd8i_103",
|
|
37
|
-
"chip--contained": "_chip--contained_1qd8i_109",
|
|
38
|
-
chip__adornment: P,
|
|
39
|
-
chip__remove: S,
|
|
40
|
-
"chip__remove--disabled": "_chip__remove--disabled_1qd8i_131",
|
|
41
|
-
"chip-loading": "_chip-loading_1qd8i_135"
|
|
42
|
-
}, R = y((o, s) => {
|
|
43
|
-
const { children: c, onClickContent: a, disabled: _, className: t, variant: n } = o;
|
|
44
|
-
let i = r(
|
|
45
|
-
d.chip,
|
|
46
|
-
{ [d["chip--outlined"]]: n === "outlined" },
|
|
47
|
-
{ [d["chip--contained"]]: n === "contained" },
|
|
48
|
-
t
|
|
49
|
-
);
|
|
50
|
-
return a ? (i += ` ${d["chip--button"]}`, /* @__PURE__ */ e(
|
|
51
|
-
w,
|
|
52
|
-
{
|
|
53
|
-
onClick: a,
|
|
54
|
-
disabled: _,
|
|
55
|
-
"data-testid": o["data-testid"],
|
|
56
|
-
ref: s,
|
|
57
|
-
className: i,
|
|
58
|
-
children: c
|
|
59
|
-
}
|
|
60
|
-
)) : /* @__PURE__ */ e("span", { "data-testid": o["data-testid"], ref: s, className: i, children: c });
|
|
61
|
-
}), M = y((o, s) => {
|
|
62
|
-
const {
|
|
63
|
-
label: c,
|
|
64
|
-
className: a,
|
|
65
|
-
onClickContent: _,
|
|
66
|
-
leftAdornment: t,
|
|
67
|
-
loading: n = !1,
|
|
68
|
-
disabled: i = !1,
|
|
69
|
-
variant: u = "default",
|
|
70
|
-
onClickRemove: h
|
|
71
|
-
} = o;
|
|
72
|
-
if (n)
|
|
73
|
-
return /* @__PURE__ */ e(
|
|
74
|
-
f,
|
|
75
|
-
{
|
|
76
|
-
className: r(d["chip-loading"], o["className-skeleton"]),
|
|
77
|
-
"data-testid": o["data-testid-skeleton"]
|
|
78
|
-
}
|
|
79
|
-
);
|
|
80
|
-
const g = r(t == null ? void 0 : t.className, d.chip__adornment), b = t != null && t.customIcon ? { ...t, className: g } : { ...t, disabled: i, className: g };
|
|
81
|
-
return /* @__PURE__ */ q(
|
|
82
|
-
R,
|
|
83
|
-
{
|
|
84
|
-
ref: s,
|
|
85
|
-
"data-testid": o["data-testid"],
|
|
86
|
-
onClickContent: _,
|
|
87
|
-
disabled: i,
|
|
88
|
-
className: a,
|
|
89
|
-
variant: u,
|
|
90
|
-
children: [
|
|
91
|
-
t && /* @__PURE__ */ e(C, { ...b }),
|
|
92
|
-
c,
|
|
93
|
-
h && /* @__PURE__ */ e(
|
|
94
|
-
"span",
|
|
95
|
-
{
|
|
96
|
-
className: r(d.chip__remove, { [d["chip__remove--disabled"]]: i }),
|
|
97
|
-
role: "button",
|
|
98
|
-
tabIndex: i ? -1 : 0,
|
|
99
|
-
"aria-label": "remove",
|
|
100
|
-
onClick: (l) => {
|
|
101
|
-
l == null || l.stopPropagation(), l == null || l.nativeEvent.stopImmediatePropagation(), h();
|
|
102
|
-
},
|
|
103
|
-
"aria-disabled": i,
|
|
104
|
-
children: /* @__PURE__ */ e(N, { icon: "circle-xmark", size: "1.125rem", color: "rgba(var(--gray-95-rgb), 0.45)" })
|
|
105
|
-
}
|
|
106
|
-
)
|
|
107
|
-
]
|
|
108
|
-
}
|
|
109
|
-
);
|
|
110
|
-
}), m = {
|
|
111
|
-
"row-item": "_row-item_ag6tb_1",
|
|
112
|
-
"row-item--clickable": "_row-item--clickable_ag6tb_15",
|
|
113
|
-
"row-item__content": "_row-item__content_ag6tb_18"
|
|
114
|
-
}, O = y((o, s) => {
|
|
115
|
-
const { children: c, leftAdornment: a, disabled: _, onClick: t, buttons: n, ariaLabel: i, className: u } = o, h = r(a == null ? void 0 : a.className, m["row-item__adornment"]), b = {
|
|
116
|
-
onClick: (p) => {
|
|
117
|
-
t && t(p);
|
|
118
|
-
},
|
|
119
|
-
tabIndex: 0,
|
|
120
|
-
"aria-label": i,
|
|
121
|
-
role: "button"
|
|
122
|
-
}, l = a != null && a.customIcon ? a : { size: "1rem", ...a };
|
|
123
|
-
return /* @__PURE__ */ q(
|
|
124
|
-
"div",
|
|
125
|
-
{
|
|
126
|
-
"data-testid": o["data-testid"],
|
|
127
|
-
className: r(m["row-item"], { [m["row-item--clickable"]]: !!t }, u),
|
|
128
|
-
...!!t && b,
|
|
129
|
-
ref: s,
|
|
130
|
-
children: [
|
|
131
|
-
a && /* @__PURE__ */ e(C, { ...l, className: h, disabled: _ }),
|
|
132
|
-
/* @__PURE__ */ e("span", { className: r(m["row-item__content"]), children: c }),
|
|
133
|
-
n && /* @__PURE__ */ e(
|
|
134
|
-
"div",
|
|
135
|
-
{
|
|
136
|
-
onClick: (p) => {
|
|
137
|
-
p == null || p.stopPropagation(), p == null || p.nativeEvent.stopImmediatePropagation();
|
|
138
|
-
},
|
|
139
|
-
children: n
|
|
140
|
-
}
|
|
141
|
-
)
|
|
142
|
-
]
|
|
143
|
-
}
|
|
144
|
-
);
|
|
145
|
-
}), Q = y((o, s) => {
|
|
146
|
-
const { text: c, isSelected: a = !1, value: _, onChange: t } = o;
|
|
147
|
-
return /* @__PURE__ */ q(
|
|
148
|
-
"label",
|
|
149
|
-
{
|
|
150
|
-
className: r([k.toggle__label], { [k["toggle__label--selected"]]: a }),
|
|
151
|
-
"data-testid": o["data-testid"],
|
|
152
|
-
children: [
|
|
153
|
-
/* @__PURE__ */ e(
|
|
154
|
-
"input",
|
|
155
|
-
{
|
|
156
|
-
className: r([k.toggle__input]),
|
|
157
|
-
type: "radio",
|
|
158
|
-
ref: s,
|
|
159
|
-
value: _.toString(),
|
|
160
|
-
onChange: () => t(_),
|
|
161
|
-
role: "radio",
|
|
162
|
-
checked: a,
|
|
163
|
-
"aria-checked": a
|
|
164
|
-
}
|
|
165
|
-
),
|
|
166
|
-
/* @__PURE__ */ e(x, { bold: !0, children: c })
|
|
167
|
-
]
|
|
168
|
-
}
|
|
169
|
-
);
|
|
170
|
-
});
|
|
171
|
-
export {
|
|
172
|
-
M as C,
|
|
173
|
-
O as R,
|
|
174
|
-
Q as T
|
|
175
|
-
};
|