prime-ui-kit 0.21.3 → 0.21.5
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/chunks/{chunk-R5LI5BO3.js → chunk-CM2KZEDV.js} +388 -293
- package/dist/chunks/{chunk-HMLQCKRL.js → chunk-FWL3NJYA.js} +578 -552
- package/dist/chunks/{chunk-BAJRN3QN.js → chunk-KQLHVPF5.js} +5 -2
- package/dist/chunks/{chunk-JO7E6SZQ.js → chunk-XH64AMXF.js} +370 -338
- package/dist/chunks/chunk-ZGEHB27U.js +5643 -0
- package/dist/color-picker.js +3 -3
- package/dist/components/chat/Chat.d.ts +4 -2
- package/dist/components/chat/ChatRows.d.ts +57 -2
- package/dist/components/chat/messageFlow.d.ts +11 -0
- package/dist/components/index.d.ts +1 -1
- package/dist/components/input/Input.d.ts +1 -1
- package/dist/components/login-form/LoginForm.d.ts +5 -1
- package/dist/components/textarea/Textarea.d.ts +1 -1
- package/dist/icon-set.js +4 -4
- package/dist/icons/registry.d.ts +2 -0
- package/dist/index.css +1 -1
- package/dist/index.js +3 -3
- package/dist/internal/autofill.d.ts +30 -0
- package/dist/internal/messageList.d.ts +3 -1
- package/dist/skill/api-contract.md +2 -2
- package/dist/skill/checklist.md +2 -0
- package/dist/skill/composition.md +1 -1
- package/dist/skill/reference/components/button/examples/in-form.tsx +0 -1
- package/dist/skill/reference/components/chat/COMPONENT.md +41 -5
- package/dist/skill/reference/components/chat/examples/events.tsx +129 -0
- package/dist/skill/reference/components/chat/examples/screen.tsx +56 -2
- package/dist/skill/reference/components/drawer/examples/screen.tsx +1 -5
- package/dist/skill/reference/components/input/COMPONENT.md +3 -0
- package/dist/skill/reference/components/input/examples/in-form.tsx +0 -1
- package/dist/skill/reference/components/input/examples/validation.tsx +1 -1
- package/dist/skill/reference/components/login-form/COMPONENT.md +2 -2
- package/dist/skill/reference/components/login-form/examples/sizes.tsx +6 -2
- package/dist/skill/reference/components/tabs/examples/orientation.tsx +1 -1
- package/dist/skill/reference/components/textarea/COMPONENT.md +2 -0
- package/dist/skill/ux.md +19 -2
- package/package.json +1 -1
- package/src/components/button/examples/in-form.tsx +0 -1
- package/src/components/chat/COMPONENT.md +41 -5
- package/src/components/chat/examples/events.tsx +129 -0
- package/src/components/chat/examples/screen.tsx +56 -2
- package/src/components/drawer/examples/screen.tsx +1 -5
- package/src/components/input/COMPONENT.md +3 -0
- package/src/components/input/examples/in-form.tsx +0 -1
- package/src/components/input/examples/validation.tsx +1 -1
- package/src/components/login-form/COMPONENT.md +2 -2
- package/src/components/login-form/examples/sizes.tsx +6 -2
- package/src/components/tabs/examples/orientation.tsx +1 -1
- package/src/components/textarea/COMPONENT.md +2 -0
- package/dist/chunks/chunk-SUGCIPD7.js +0 -5669
|
@@ -4,12 +4,14 @@ import {
|
|
|
4
4
|
Activity,
|
|
5
5
|
AppWindow,
|
|
6
6
|
ArrowDown,
|
|
7
|
+
ArrowRight,
|
|
7
8
|
ArrowUp,
|
|
8
9
|
ArrowUpDown,
|
|
9
10
|
Bell,
|
|
10
11
|
Bike,
|
|
11
12
|
Bold,
|
|
12
13
|
BookOpen,
|
|
14
|
+
Bot,
|
|
13
15
|
COMPACT_QUERY,
|
|
14
16
|
Calendar,
|
|
15
17
|
Captions,
|
|
@@ -143,7 +145,7 @@ import {
|
|
|
143
145
|
useIconRoot,
|
|
144
146
|
useOptionalControlSize,
|
|
145
147
|
usePresence
|
|
146
|
-
} from "./chunk-
|
|
148
|
+
} from "./chunk-FWL3NJYA.js";
|
|
147
149
|
|
|
148
150
|
// src/components/scroll-container/ScrollContainer.tsx
|
|
149
151
|
import * as React9 from "react";
|
|
@@ -2799,6 +2801,7 @@ var Tooltip = {
|
|
|
2799
2801
|
var iconRegistry = {
|
|
2800
2802
|
"nav.chevronDown": ChevronDown,
|
|
2801
2803
|
"nav.chevronLeft": ChevronLeft,
|
|
2804
|
+
"nav.arrowRight": ArrowRight,
|
|
2802
2805
|
"nav.chevronRight": ChevronRight,
|
|
2803
2806
|
"nav.chevronUp": ChevronUp,
|
|
2804
2807
|
"nav.chevronsLeft": ChevronsLeft,
|
|
@@ -2885,6 +2888,7 @@ var iconRegistry = {
|
|
|
2885
2888
|
"object.fuel": Fuel,
|
|
2886
2889
|
"object.funnel": Funnel,
|
|
2887
2890
|
"object.globe": Globe,
|
|
2891
|
+
"object.bot": Bot,
|
|
2888
2892
|
"object.headset": Headset,
|
|
2889
2893
|
"object.image": Image,
|
|
2890
2894
|
"object.inbox": Inbox,
|
|
@@ -5283,10 +5287,31 @@ function getPasswordStrength(value) {
|
|
|
5283
5287
|
}
|
|
5284
5288
|
|
|
5285
5289
|
// src/components/input/Input.tsx
|
|
5286
|
-
import * as
|
|
5290
|
+
import * as React52 from "react";
|
|
5287
5291
|
|
|
5288
|
-
// src/internal/
|
|
5292
|
+
// src/internal/autofill.tsx
|
|
5289
5293
|
import * as React44 from "react";
|
|
5294
|
+
import { jsx as jsx24 } from "react/jsx-runtime";
|
|
5295
|
+
var AUTOFILL_OFF = {
|
|
5296
|
+
autoComplete: "off",
|
|
5297
|
+
"data-1p-ignore": "true",
|
|
5298
|
+
"data-lpignore": "true",
|
|
5299
|
+
"data-bwignore": "true",
|
|
5300
|
+
"data-form-type": "other"
|
|
5301
|
+
};
|
|
5302
|
+
var AutofillContext = React44.createContext(false);
|
|
5303
|
+
function AutofillScope({ children }) {
|
|
5304
|
+
return /* @__PURE__ */ jsx24(AutofillContext.Provider, { value: true, children });
|
|
5305
|
+
}
|
|
5306
|
+
function useAutofill(autoComplete) {
|
|
5307
|
+
const scoped = React44.useContext(AutofillContext);
|
|
5308
|
+
if (autoComplete && autoComplete !== "off") return { autoComplete };
|
|
5309
|
+
if (scoped && !autoComplete) return {};
|
|
5310
|
+
return AUTOFILL_OFF;
|
|
5311
|
+
}
|
|
5312
|
+
|
|
5313
|
+
// src/internal/FieldAction.tsx
|
|
5314
|
+
import * as React45 from "react";
|
|
5290
5315
|
|
|
5291
5316
|
// src/internal/FieldAction.module.css
|
|
5292
5317
|
var FieldAction_default = {
|
|
@@ -5294,7 +5319,7 @@ var FieldAction_default = {
|
|
|
5294
5319
|
};
|
|
5295
5320
|
|
|
5296
5321
|
// src/internal/FieldAction.tsx
|
|
5297
|
-
import { Fragment as Fragment7, jsx as
|
|
5322
|
+
import { Fragment as Fragment7, jsx as jsx25, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
5298
5323
|
var fieldActionClass = cx(FieldAction_default.action, touchTargetBlockClass);
|
|
5299
5324
|
function FieldActionButton({
|
|
5300
5325
|
label,
|
|
@@ -5313,17 +5338,17 @@ function FieldActionButton({
|
|
|
5313
5338
|
"aria-label": label,
|
|
5314
5339
|
"data-field-action": ""
|
|
5315
5340
|
};
|
|
5316
|
-
const segment = asChild ? /* @__PURE__ */
|
|
5341
|
+
const segment = asChild ? /* @__PURE__ */ jsx25(Slot, { ...shared, ref, "aria-disabled": disabled || void 0, children }) : /* @__PURE__ */ jsx25("button", { ...shared, ref, type, disabled, children: /* @__PURE__ */ jsx25(GlyphSwap, { children }) });
|
|
5317
5342
|
if (!tooltip) return segment;
|
|
5318
5343
|
return /* @__PURE__ */ jsxs13(Tooltip.Root, { children: [
|
|
5319
|
-
/* @__PURE__ */
|
|
5320
|
-
/* @__PURE__ */
|
|
5344
|
+
/* @__PURE__ */ jsx25(Tooltip.Trigger, { children: segment }),
|
|
5345
|
+
/* @__PURE__ */ jsx25(Tooltip.Content, { children: label })
|
|
5321
5346
|
] });
|
|
5322
5347
|
}
|
|
5323
5348
|
var COPY_FEEDBACK_MS = 1600;
|
|
5324
5349
|
function FieldCopyButton({ getText, labels, onClick: onClick2, ...rest }) {
|
|
5325
|
-
const [state, setState] =
|
|
5326
|
-
|
|
5350
|
+
const [state, setState] = React45.useState("idle");
|
|
5351
|
+
React45.useEffect(() => {
|
|
5327
5352
|
if (state === "idle") return;
|
|
5328
5353
|
const timer = window.setTimeout(() => setState("idle"), COPY_FEEDBACK_MS);
|
|
5329
5354
|
return () => window.clearTimeout(timer);
|
|
@@ -5331,7 +5356,7 @@ function FieldCopyButton({ getText, labels, onClick: onClick2, ...rest }) {
|
|
|
5331
5356
|
const label = state === "copied" ? labels.copied : state === "error" ? labels.copyError : labels.copy;
|
|
5332
5357
|
const glyph = state === "copied" ? "action.check" : "action.copy";
|
|
5333
5358
|
return /* @__PURE__ */ jsxs13(Fragment7, { children: [
|
|
5334
|
-
/* @__PURE__ */
|
|
5359
|
+
/* @__PURE__ */ jsx25(
|
|
5335
5360
|
FieldActionButton,
|
|
5336
5361
|
{
|
|
5337
5362
|
...rest,
|
|
@@ -5347,15 +5372,15 @@ function FieldCopyButton({ getText, labels, onClick: onClick2, ...rest }) {
|
|
|
5347
5372
|
setState("error");
|
|
5348
5373
|
}
|
|
5349
5374
|
},
|
|
5350
|
-
children: /* @__PURE__ */
|
|
5375
|
+
children: /* @__PURE__ */ jsx25(Icon, { name: glyph })
|
|
5351
5376
|
}
|
|
5352
5377
|
),
|
|
5353
|
-
/* @__PURE__ */
|
|
5378
|
+
/* @__PURE__ */ jsx25(VisuallyHidden, { live: "polite", children: state === "idle" ? "" : label })
|
|
5354
5379
|
] });
|
|
5355
5380
|
}
|
|
5356
5381
|
|
|
5357
5382
|
// src/internal/FieldCommit.tsx
|
|
5358
|
-
import * as
|
|
5383
|
+
import * as React46 from "react";
|
|
5359
5384
|
|
|
5360
5385
|
// src/internal/controlValue.ts
|
|
5361
5386
|
function setControlValue(control, value) {
|
|
@@ -5370,36 +5395,36 @@ var FieldCommit_default = {
|
|
|
5370
5395
|
};
|
|
5371
5396
|
|
|
5372
5397
|
// src/internal/FieldCommit.tsx
|
|
5373
|
-
import { Fragment as Fragment8, jsx as
|
|
5398
|
+
import { Fragment as Fragment8, jsx as jsx26, jsxs as jsxs14 } from "react/jsx-runtime";
|
|
5374
5399
|
var SAVED_MS = 1600;
|
|
5375
5400
|
function useFieldCommit(controlRef, onCommit) {
|
|
5376
|
-
const [state, setState] =
|
|
5377
|
-
const committed =
|
|
5378
|
-
const started =
|
|
5379
|
-
const settled =
|
|
5380
|
-
const pending2 =
|
|
5381
|
-
const onCommitRef =
|
|
5401
|
+
const [state, setState] = React46.useState("idle");
|
|
5402
|
+
const committed = React46.useRef(null);
|
|
5403
|
+
const started = React46.useRef(0);
|
|
5404
|
+
const settled = React46.useRef(0);
|
|
5405
|
+
const pending2 = React46.useRef(0);
|
|
5406
|
+
const onCommitRef = React46.useRef(onCommit);
|
|
5382
5407
|
onCommitRef.current = onCommit;
|
|
5383
|
-
|
|
5408
|
+
React46.useLayoutEffect(() => {
|
|
5384
5409
|
if (committed.current === null && controlRef.current) {
|
|
5385
5410
|
committed.current = controlRef.current.value;
|
|
5386
5411
|
}
|
|
5387
5412
|
}, [controlRef]);
|
|
5388
|
-
|
|
5413
|
+
React46.useEffect(() => {
|
|
5389
5414
|
if (state !== "saved") return;
|
|
5390
5415
|
const timer = window.setTimeout(() => setState("idle"), SAVED_MS);
|
|
5391
5416
|
return () => window.clearTimeout(timer);
|
|
5392
5417
|
}, [state]);
|
|
5393
|
-
const sync =
|
|
5418
|
+
const sync = React46.useCallback(() => {
|
|
5394
5419
|
if (pending2.current === 0 && controlRef.current) committed.current = controlRef.current.value;
|
|
5395
5420
|
}, [controlRef]);
|
|
5396
|
-
const revert =
|
|
5421
|
+
const revert = React46.useCallback(() => {
|
|
5397
5422
|
const control = controlRef.current;
|
|
5398
5423
|
if (!control || committed.current === null || control.value === committed.current) return false;
|
|
5399
5424
|
setControlValue(control, committed.current);
|
|
5400
5425
|
return true;
|
|
5401
5426
|
}, [controlRef]);
|
|
5402
|
-
const commit =
|
|
5427
|
+
const commit = React46.useCallback(() => {
|
|
5403
5428
|
const control = controlRef.current;
|
|
5404
5429
|
const handler = onCommitRef.current;
|
|
5405
5430
|
if (!control || !handler) return;
|
|
@@ -5453,11 +5478,11 @@ function FieldCommitStatus({
|
|
|
5453
5478
|
}) {
|
|
5454
5479
|
const shown = state !== "idle";
|
|
5455
5480
|
const presence = usePresence(shown, { exitDuration: "fast" });
|
|
5456
|
-
const last =
|
|
5481
|
+
const last = React46.useRef(state);
|
|
5457
5482
|
if (shown) last.current = state;
|
|
5458
5483
|
const glyph = shown ? state : last.current;
|
|
5459
5484
|
return /* @__PURE__ */ jsxs14(Fragment8, { children: [
|
|
5460
|
-
presence.mounted ? /* @__PURE__ */
|
|
5485
|
+
presence.mounted ? /* @__PURE__ */ jsx26(
|
|
5461
5486
|
"span",
|
|
5462
5487
|
{
|
|
5463
5488
|
className: cx(
|
|
@@ -5468,21 +5493,21 @@ function FieldCommitStatus({
|
|
|
5468
5493
|
"data-commit": glyph,
|
|
5469
5494
|
"aria-hidden": "true",
|
|
5470
5495
|
onAnimationEnd: presence.onExitEnd,
|
|
5471
|
-
children: /* @__PURE__ */
|
|
5496
|
+
children: /* @__PURE__ */ jsx26(GlyphSwap, { children: glyph === "saved" ? /* @__PURE__ */ jsx26(Icon, { name: "action.check" }) : /* @__PURE__ */ jsx26(Spinner, { "aria-hidden": "true" }) })
|
|
5472
5497
|
}
|
|
5473
5498
|
) : null,
|
|
5474
|
-
/* @__PURE__ */
|
|
5499
|
+
/* @__PURE__ */ jsx26(VisuallyHidden, { live: "polite", children: state === "pending" ? labels.saving : state === "saved" ? labels.saved : "" })
|
|
5475
5500
|
] });
|
|
5476
5501
|
}
|
|
5477
5502
|
|
|
5478
5503
|
// src/internal/FieldFrame.tsx
|
|
5479
|
-
import * as
|
|
5504
|
+
import * as React48 from "react";
|
|
5480
5505
|
|
|
5481
5506
|
// src/internal/fieldCell.ts
|
|
5482
|
-
import * as
|
|
5483
|
-
var FieldCellContext =
|
|
5507
|
+
import * as React47 from "react";
|
|
5508
|
+
var FieldCellContext = React47.createContext(null);
|
|
5484
5509
|
function useFieldCell() {
|
|
5485
|
-
return
|
|
5510
|
+
return React47.useContext(FieldCellContext);
|
|
5486
5511
|
}
|
|
5487
5512
|
|
|
5488
5513
|
// src/internal/FieldFrame.module.css
|
|
@@ -5500,7 +5525,7 @@ var FieldFrame_default = {
|
|
|
5500
5525
|
};
|
|
5501
5526
|
|
|
5502
5527
|
// src/internal/FieldFrame.tsx
|
|
5503
|
-
import { jsx as
|
|
5528
|
+
import { jsx as jsx27, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
5504
5529
|
var REQUIRED_ROLES = /* @__PURE__ */ new Set([
|
|
5505
5530
|
"checkbox",
|
|
5506
5531
|
"combobox",
|
|
@@ -5519,7 +5544,7 @@ function useFieldFrame(explicitId, {
|
|
|
5519
5544
|
invalid,
|
|
5520
5545
|
required
|
|
5521
5546
|
}, ariaDescribedBy) {
|
|
5522
|
-
const generated =
|
|
5547
|
+
const generated = React48.useId();
|
|
5523
5548
|
const cell = useFieldCell();
|
|
5524
5549
|
const controlId = explicitId ?? generated;
|
|
5525
5550
|
const labelId = `${controlId}-label`;
|
|
@@ -5559,9 +5584,9 @@ function useFieldFrame(explicitId, {
|
|
|
5559
5584
|
}
|
|
5560
5585
|
function useErrorShake(invalid, error) {
|
|
5561
5586
|
const key = !invalid ? null : typeof error === "string" || typeof error === "number" ? String(error) : "invalid";
|
|
5562
|
-
const previous =
|
|
5563
|
-
const [count, setCount] =
|
|
5564
|
-
|
|
5587
|
+
const previous = React48.useRef(key);
|
|
5588
|
+
const [count, setCount] = React48.useState(0);
|
|
5589
|
+
React48.useEffect(() => {
|
|
5565
5590
|
if (key !== null && key !== previous.current) setCount((n) => n + 1);
|
|
5566
5591
|
previous.current = key;
|
|
5567
5592
|
}, [key]);
|
|
@@ -5569,7 +5594,7 @@ function useErrorShake(invalid, error) {
|
|
|
5569
5594
|
return count % 2 ? "odd" : "even";
|
|
5570
5595
|
}
|
|
5571
5596
|
function useLeavingError(showError, error) {
|
|
5572
|
-
const last =
|
|
5597
|
+
const last = React48.useRef(error);
|
|
5573
5598
|
if (showError) last.current = error;
|
|
5574
5599
|
const presence = usePresence(showError, { exitDuration: "fast" });
|
|
5575
5600
|
if (showError || !presence.mounted) return null;
|
|
@@ -5589,9 +5614,9 @@ function FieldSupport({
|
|
|
5589
5614
|
}) {
|
|
5590
5615
|
let text = null;
|
|
5591
5616
|
if (ids.showError) {
|
|
5592
|
-
text = /* @__PURE__ */
|
|
5617
|
+
text = /* @__PURE__ */ jsx27(Hint.Root, { id: ids.errorId, size, invalid: true, className: textClassName, children: error });
|
|
5593
5618
|
} else if (leaving) {
|
|
5594
|
-
text = /* @__PURE__ */
|
|
5619
|
+
text = /* @__PURE__ */ jsx27(
|
|
5595
5620
|
Hint.Root,
|
|
5596
5621
|
{
|
|
5597
5622
|
size,
|
|
@@ -5603,7 +5628,7 @@ function FieldSupport({
|
|
|
5603
5628
|
}
|
|
5604
5629
|
);
|
|
5605
5630
|
} else if (ids.showHint) {
|
|
5606
|
-
text = /* @__PURE__ */
|
|
5631
|
+
text = /* @__PURE__ */ jsx27(
|
|
5607
5632
|
Hint.Root,
|
|
5608
5633
|
{
|
|
5609
5634
|
id: ids.hintId,
|
|
@@ -5615,7 +5640,7 @@ function FieldSupport({
|
|
|
5615
5640
|
}
|
|
5616
5641
|
);
|
|
5617
5642
|
}
|
|
5618
|
-
return /* @__PURE__ */
|
|
5643
|
+
return /* @__PURE__ */ jsx27("div", { className, "aria-live": live ? "polite" : void 0, children: text });
|
|
5619
5644
|
}
|
|
5620
5645
|
function FieldFrame({
|
|
5621
5646
|
size,
|
|
@@ -5642,7 +5667,7 @@ function FieldFrame({
|
|
|
5642
5667
|
const shake = useErrorShake(ids.invalid, error);
|
|
5643
5668
|
const cell = useFieldCell();
|
|
5644
5669
|
const shownLabel = hasContent(label) ? label : cell?.label;
|
|
5645
|
-
const labelNode = hasContent(shownLabel) ? /* @__PURE__ */
|
|
5670
|
+
const labelNode = hasContent(shownLabel) ? /* @__PURE__ */ jsx27(
|
|
5646
5671
|
Label.Root,
|
|
5647
5672
|
{
|
|
5648
5673
|
id: ids.labelId,
|
|
@@ -5674,7 +5699,7 @@ function FieldFrame({
|
|
|
5674
5699
|
children: [
|
|
5675
5700
|
labelEnd != null ? /* @__PURE__ */ jsxs15("div", { className: FieldFrame_default.labelRow, children: [
|
|
5676
5701
|
labelNode,
|
|
5677
|
-
/* @__PURE__ */
|
|
5702
|
+
/* @__PURE__ */ jsx27("span", { className: FieldFrame_default.labelEnd, children: labelEnd })
|
|
5678
5703
|
] }) : labelNode,
|
|
5679
5704
|
/* @__PURE__ */ jsxs15("div", { className: cx(FieldFrame_default.body, enterMotion_default.shakeParts), "data-shake": shake, children: [
|
|
5680
5705
|
children,
|
|
@@ -5689,7 +5714,7 @@ function FieldFrame({
|
|
|
5689
5714
|
empty: !showSupport || void 0
|
|
5690
5715
|
}),
|
|
5691
5716
|
children: [
|
|
5692
|
-
/* @__PURE__ */
|
|
5717
|
+
/* @__PURE__ */ jsx27(
|
|
5693
5718
|
FieldSupport,
|
|
5694
5719
|
{
|
|
5695
5720
|
ids,
|
|
@@ -5708,7 +5733,7 @@ function FieldFrame({
|
|
|
5708
5733
|
}
|
|
5709
5734
|
)
|
|
5710
5735
|
] }),
|
|
5711
|
-
requiredLabel && ids.required ? /* @__PURE__ */
|
|
5736
|
+
requiredLabel && ids.required ? /* @__PURE__ */ jsx27(VisuallyHidden, { id: ids.requiredId, children: requiredLabel }) : null
|
|
5712
5737
|
]
|
|
5713
5738
|
}
|
|
5714
5739
|
);
|
|
@@ -5723,18 +5748,18 @@ function FieldCounter({ current, max, size, label, className, ...rest }) {
|
|
|
5723
5748
|
"data-invalid": current > max || void 0,
|
|
5724
5749
|
children: [
|
|
5725
5750
|
/* @__PURE__ */ jsxs15("span", { "aria-hidden": "true", children: [
|
|
5726
|
-
/* @__PURE__ */
|
|
5751
|
+
/* @__PURE__ */ jsx27(RollingNumber, { children: current }),
|
|
5727
5752
|
"/",
|
|
5728
5753
|
max
|
|
5729
5754
|
] }),
|
|
5730
|
-
/* @__PURE__ */
|
|
5755
|
+
/* @__PURE__ */ jsx27(VisuallyHidden, { live: "polite", children: formatLabel(label, { current, max }) })
|
|
5731
5756
|
]
|
|
5732
5757
|
}
|
|
5733
5758
|
);
|
|
5734
5759
|
}
|
|
5735
5760
|
|
|
5736
5761
|
// src/internal/listbox.ts
|
|
5737
|
-
import * as
|
|
5762
|
+
import * as React49 from "react";
|
|
5738
5763
|
|
|
5739
5764
|
// src/internal/rovingFocus.ts
|
|
5740
5765
|
var PREV = {
|
|
@@ -5802,11 +5827,11 @@ function createStore(initial) {
|
|
|
5802
5827
|
};
|
|
5803
5828
|
}
|
|
5804
5829
|
function useCreateStore(initial) {
|
|
5805
|
-
return
|
|
5830
|
+
return React49.useState(() => createStore(initial))[0];
|
|
5806
5831
|
}
|
|
5807
5832
|
function useStoreSlice(store, select) {
|
|
5808
5833
|
const read = () => select(store.get());
|
|
5809
|
-
return
|
|
5834
|
+
return React49.useSyncExternalStore(store.subscribe, read, read);
|
|
5810
5835
|
}
|
|
5811
5836
|
function createListboxRegistry() {
|
|
5812
5837
|
const entries = /* @__PURE__ */ new Map();
|
|
@@ -5863,19 +5888,19 @@ function createListboxRegistry() {
|
|
|
5863
5888
|
};
|
|
5864
5889
|
}
|
|
5865
5890
|
function useListboxRegistry() {
|
|
5866
|
-
return
|
|
5891
|
+
return React49.useState(createListboxRegistry)[0];
|
|
5867
5892
|
}
|
|
5868
5893
|
function useListboxView(registry, query = "", filter = true) {
|
|
5869
5894
|
const read = () => registry.view(query, filter);
|
|
5870
|
-
return
|
|
5895
|
+
return React49.useSyncExternalStore(registry.subscribe, read, read);
|
|
5871
5896
|
}
|
|
5872
5897
|
function useListboxItem(registry, id, item, nodeRef) {
|
|
5873
|
-
const activateRef =
|
|
5874
|
-
|
|
5898
|
+
const activateRef = React49.useRef(item.onActivate);
|
|
5899
|
+
React49.useLayoutEffect(() => {
|
|
5875
5900
|
activateRef.current = item.onActivate;
|
|
5876
5901
|
});
|
|
5877
5902
|
const { label, haystack, disabled = false, persistent = false } = item;
|
|
5878
|
-
|
|
5903
|
+
React49.useLayoutEffect(
|
|
5879
5904
|
() => registry.register(
|
|
5880
5905
|
id,
|
|
5881
5906
|
{ label, haystack, disabled, persistent, onActivate: () => activateRef.current() },
|
|
@@ -5908,10 +5933,10 @@ function handleListboxKeyDown(event, { ids, highlight, activate }) {
|
|
|
5908
5933
|
}
|
|
5909
5934
|
var TYPEAHEAD_RESET_MS = 500;
|
|
5910
5935
|
function useTypeahead() {
|
|
5911
|
-
const state =
|
|
5912
|
-
|
|
5913
|
-
const isTyping =
|
|
5914
|
-
const find =
|
|
5936
|
+
const state = React49.useRef({ buffer: "", timer: 0 });
|
|
5937
|
+
React49.useEffect(() => () => window.clearTimeout(state.current.timer), []);
|
|
5938
|
+
const isTyping = React49.useCallback(() => state.current.buffer !== "", []);
|
|
5939
|
+
const find = React49.useCallback(
|
|
5915
5940
|
(key, ids, highlighted, labelOf) => {
|
|
5916
5941
|
const s = state.current;
|
|
5917
5942
|
window.clearTimeout(s.timer);
|
|
@@ -5946,10 +5971,10 @@ var Input_default = {
|
|
|
5946
5971
|
};
|
|
5947
5972
|
|
|
5948
5973
|
// src/components/input/inputSuggestions.tsx
|
|
5949
|
-
import * as
|
|
5974
|
+
import * as React51 from "react";
|
|
5950
5975
|
|
|
5951
5976
|
// src/internal/HighlightMatch.tsx
|
|
5952
|
-
import * as
|
|
5977
|
+
import * as React50 from "react";
|
|
5953
5978
|
|
|
5954
5979
|
// src/internal/HighlightMatch.module.css
|
|
5955
5980
|
var HighlightMatch_default = {
|
|
@@ -5957,7 +5982,7 @@ var HighlightMatch_default = {
|
|
|
5957
5982
|
};
|
|
5958
5983
|
|
|
5959
5984
|
// src/internal/HighlightMatch.tsx
|
|
5960
|
-
import { Fragment as Fragment9, jsx as
|
|
5985
|
+
import { Fragment as Fragment9, jsx as jsx28, jsxs as jsxs16 } from "react/jsx-runtime";
|
|
5961
5986
|
function matchIndex(text, query) {
|
|
5962
5987
|
if (!query) return -1;
|
|
5963
5988
|
return text.toLowerCase().indexOf(query.toLowerCase());
|
|
@@ -5969,11 +5994,11 @@ function HighlightMatch({
|
|
|
5969
5994
|
}) {
|
|
5970
5995
|
const q = query.trim();
|
|
5971
5996
|
const at = matchIndex(text, q);
|
|
5972
|
-
if (at < 0) return /* @__PURE__ */
|
|
5997
|
+
if (at < 0) return /* @__PURE__ */ jsx28(Fragment9, { children: text });
|
|
5973
5998
|
if (!all) {
|
|
5974
5999
|
return /* @__PURE__ */ jsxs16("span", { children: [
|
|
5975
6000
|
text.slice(0, at),
|
|
5976
|
-
/* @__PURE__ */
|
|
6001
|
+
/* @__PURE__ */ jsx28("mark", { className: HighlightMatch_default.match, children: text.slice(at, at + q.length) }),
|
|
5977
6002
|
text.slice(at + q.length)
|
|
5978
6003
|
] });
|
|
5979
6004
|
}
|
|
@@ -5984,18 +6009,18 @@ function HighlightMatch({
|
|
|
5984
6009
|
for (let found = at; found >= 0; found = lower.indexOf(needle, from)) {
|
|
5985
6010
|
if (found > from) pieces.push(text.slice(from, found));
|
|
5986
6011
|
pieces.push(
|
|
5987
|
-
/* @__PURE__ */
|
|
6012
|
+
/* @__PURE__ */ jsx28("mark", { className: HighlightMatch_default.match, children: text.slice(found, found + q.length) }, found)
|
|
5988
6013
|
);
|
|
5989
6014
|
from = found + q.length;
|
|
5990
6015
|
}
|
|
5991
6016
|
if (from < text.length) pieces.push(text.slice(from));
|
|
5992
|
-
return /* @__PURE__ */
|
|
6017
|
+
return /* @__PURE__ */ jsx28("span", { children: pieces });
|
|
5993
6018
|
}
|
|
5994
6019
|
function highlightChildren(children, query) {
|
|
5995
6020
|
if (!query.trim()) return children;
|
|
5996
|
-
return
|
|
6021
|
+
return React50.Children.map(
|
|
5997
6022
|
children,
|
|
5998
|
-
(child) => typeof child === "string" || typeof child === "number" ? /* @__PURE__ */
|
|
6023
|
+
(child) => typeof child === "string" || typeof child === "number" ? /* @__PURE__ */ jsx28(HighlightMatch, { text: String(child), query }) : child
|
|
5999
6024
|
);
|
|
6000
6025
|
}
|
|
6001
6026
|
|
|
@@ -6021,26 +6046,26 @@ var menu_default = {
|
|
|
6021
6046
|
};
|
|
6022
6047
|
|
|
6023
6048
|
// src/components/input/inputSuggestions.tsx
|
|
6024
|
-
import { jsx as
|
|
6049
|
+
import { jsx as jsx29 } from "react/jsx-runtime";
|
|
6025
6050
|
function matchesOf(items, text) {
|
|
6026
6051
|
const query = text.trim().toLocaleLowerCase();
|
|
6027
6052
|
const found = items.filter((item) => item.toLocaleLowerCase().includes(query));
|
|
6028
6053
|
return found.length === 1 && found[0]?.toLocaleLowerCase() === query ? [] : found;
|
|
6029
6054
|
}
|
|
6030
6055
|
function useInputSuggestions(items, inputRef, listboxId, labelledBy, { closeOnEscape, closeOnOutsideClick }) {
|
|
6031
|
-
const [open, setOpen] =
|
|
6032
|
-
const [query, setQuery] =
|
|
6056
|
+
const [open, setOpen] = React51.useState(false);
|
|
6057
|
+
const [query, setQuery] = React51.useState("");
|
|
6033
6058
|
const highlight = useCreateStore(void 0);
|
|
6034
|
-
const anchorRef =
|
|
6035
|
-
const pickingRef =
|
|
6059
|
+
const anchorRef = React51.useRef(null);
|
|
6060
|
+
const pickingRef = React51.useRef(false);
|
|
6036
6061
|
const list = items ?? [];
|
|
6037
|
-
const matches =
|
|
6062
|
+
const matches = React51.useMemo(() => items ? matchesOf(items, query) : [], [items, query]);
|
|
6038
6063
|
const shown = open && matches.length > 0;
|
|
6039
|
-
|
|
6064
|
+
React51.useEffect(() => {
|
|
6040
6065
|
const current = highlight.get();
|
|
6041
6066
|
if (current !== void 0 && !matches.includes(current)) highlight.set(void 0);
|
|
6042
6067
|
}, [matches, highlight]);
|
|
6043
|
-
const close =
|
|
6068
|
+
const close = React51.useCallback(() => {
|
|
6044
6069
|
setOpen(false);
|
|
6045
6070
|
highlight.set(void 0);
|
|
6046
6071
|
}, [highlight]);
|
|
@@ -6132,7 +6157,7 @@ function InputSuggestionList({
|
|
|
6132
6157
|
closeOnOutsideClick: suggest.closeOnOutsideClick,
|
|
6133
6158
|
matchAnchorWidth: true
|
|
6134
6159
|
});
|
|
6135
|
-
return /* @__PURE__ */
|
|
6160
|
+
return /* @__PURE__ */ jsx29(
|
|
6136
6161
|
FloatingPanel,
|
|
6137
6162
|
{
|
|
6138
6163
|
floating,
|
|
@@ -6140,7 +6165,7 @@ function InputSuggestionList({
|
|
|
6140
6165
|
scroll: true,
|
|
6141
6166
|
width: "trigger",
|
|
6142
6167
|
className: cx(fieldTierClass, menu_default.tier, menu_default.menu),
|
|
6143
|
-
children: /* @__PURE__ */
|
|
6168
|
+
children: /* @__PURE__ */ jsx29("div", { id: suggest.listboxId, role: "listbox", "aria-labelledby": suggest.labelledBy, children: suggest.matches.map((item) => /* @__PURE__ */ jsx29(SuggestionOption, { item, suggest }, item)) })
|
|
6144
6169
|
}
|
|
6145
6170
|
);
|
|
6146
6171
|
}
|
|
@@ -6148,7 +6173,7 @@ function SuggestionOption({ item, suggest }) {
|
|
|
6148
6173
|
const highlighted = useStoreSlice(suggest.highlight, (value) => value === item);
|
|
6149
6174
|
return (
|
|
6150
6175
|
// biome-ignore lint/a11y/useKeyWithClickEvents: the keyboard stays in the field (`aria-activedescendant`)
|
|
6151
|
-
/* @__PURE__ */
|
|
6176
|
+
/* @__PURE__ */ jsx29(
|
|
6152
6177
|
"div",
|
|
6153
6178
|
{
|
|
6154
6179
|
id: optionDomId(suggest.listboxId, item),
|
|
@@ -6162,14 +6187,14 @@ function SuggestionOption({ item, suggest }) {
|
|
|
6162
6187
|
if (!highlighted) suggest.highlight.set(item);
|
|
6163
6188
|
},
|
|
6164
6189
|
onClick: () => suggest.pick(item),
|
|
6165
|
-
children: /* @__PURE__ */
|
|
6190
|
+
children: /* @__PURE__ */ jsx29(HighlightMatch, { text: item, query: suggest.query })
|
|
6166
6191
|
}
|
|
6167
6192
|
)
|
|
6168
6193
|
);
|
|
6169
6194
|
}
|
|
6170
6195
|
|
|
6171
6196
|
// src/components/input/Input.tsx
|
|
6172
|
-
import { Fragment as Fragment10, jsx as
|
|
6197
|
+
import { Fragment as Fragment10, jsx as jsx30, jsxs as jsxs17 } from "react/jsx-runtime";
|
|
6173
6198
|
var INPUT_LABELS = {
|
|
6174
6199
|
optional: "\u043D\u0435\u043E\u0431\u044F\u0437\u0430\u0442\u0435\u043B\u044C\u043D\u043E",
|
|
6175
6200
|
clear: "\u041E\u0447\u0438\u0441\u0442\u0438\u0442\u044C",
|
|
@@ -6195,7 +6220,7 @@ var STRENGTH_TONES = {
|
|
|
6195
6220
|
4: "success"
|
|
6196
6221
|
};
|
|
6197
6222
|
var [InputProvider, useInputContext] = createComponentContext("Input");
|
|
6198
|
-
var InputSegmentContext =
|
|
6223
|
+
var InputSegmentContext = React52.createContext(false);
|
|
6199
6224
|
var NO_HIGHLIGHT = createStore(void 0);
|
|
6200
6225
|
function InputRoot({
|
|
6201
6226
|
size: sizeProp,
|
|
@@ -6223,18 +6248,18 @@ function InputRoot({
|
|
|
6223
6248
|
className,
|
|
6224
6249
|
...rest
|
|
6225
6250
|
}) {
|
|
6226
|
-
const [strengthValue, setStrengthValue] =
|
|
6251
|
+
const [strengthValue, setStrengthValue] = React52.useState("");
|
|
6227
6252
|
const tier = useHostTier(sizeProp);
|
|
6228
6253
|
const { size } = tier;
|
|
6229
6254
|
const labels = useLabels(INPUT_LABELS, labelsProp);
|
|
6230
6255
|
const level = strength ? getStrength(strengthValue) : 0;
|
|
6231
6256
|
const tooWeak = level > 0 && minStrength !== void 0 && level < minStrength;
|
|
6232
|
-
const [weakReported, setWeakReported] =
|
|
6233
|
-
const reportInvalid =
|
|
6257
|
+
const [weakReported, setWeakReported] = React52.useState(false);
|
|
6258
|
+
const reportInvalid = React52.useCallback(() => setWeakReported(true), []);
|
|
6234
6259
|
const shownError = error ?? (weakReported && tooWeak ? labels.strengthTooWeak : void 0);
|
|
6235
6260
|
const ids = useFieldFrame(id, { label, hint, error: shownError, invalid, required });
|
|
6236
6261
|
const { invalid: isInvalid, controlId: inputId, describedBy, required: isRequired } = ids;
|
|
6237
|
-
const inputRef =
|
|
6262
|
+
const inputRef = React52.useRef(null);
|
|
6238
6263
|
const suggest = useInputSuggestions(
|
|
6239
6264
|
suggestions,
|
|
6240
6265
|
inputRef,
|
|
@@ -6244,14 +6269,14 @@ function InputRoot({
|
|
|
6244
6269
|
);
|
|
6245
6270
|
const commit = useFieldCommit(inputRef, onCommit);
|
|
6246
6271
|
const hasCommit = onCommit !== void 0;
|
|
6247
|
-
const [revealed, setRevealed] =
|
|
6248
|
-
const selectionRef =
|
|
6249
|
-
const mountedRef =
|
|
6250
|
-
|
|
6272
|
+
const [revealed, setRevealed] = React52.useState(false);
|
|
6273
|
+
const selectionRef = React52.useRef(null);
|
|
6274
|
+
const mountedRef = React52.useRef(false);
|
|
6275
|
+
React52.useEffect(() => {
|
|
6251
6276
|
mountedRef.current = true;
|
|
6252
6277
|
}, []);
|
|
6253
|
-
const [affixes, setAffixes] =
|
|
6254
|
-
const addAffix =
|
|
6278
|
+
const [affixes, setAffixes] = React52.useState([]);
|
|
6279
|
+
const addAffix = React52.useCallback((affixId) => {
|
|
6255
6280
|
setAffixes((current) => [...current, affixId]);
|
|
6256
6281
|
return () => setAffixes((current) => current.filter((item) => item !== affixId));
|
|
6257
6282
|
}, []);
|
|
@@ -6259,7 +6284,7 @@ function InputRoot({
|
|
|
6259
6284
|
const isValid = Boolean(valid) && !isInvalid;
|
|
6260
6285
|
const validId = valid === void 0 ? "" : `${inputId}-valid`;
|
|
6261
6286
|
const customValidity = minStrength === void 0 ? null : tooWeak ? labels.strengthTooWeak : "";
|
|
6262
|
-
const contextValue =
|
|
6287
|
+
const contextValue = React52.useMemo(
|
|
6263
6288
|
() => ({
|
|
6264
6289
|
size,
|
|
6265
6290
|
invalid: isInvalid,
|
|
@@ -6307,7 +6332,7 @@ function InputRoot({
|
|
|
6307
6332
|
);
|
|
6308
6333
|
const levelTone = tooWeak ? "danger" : level ? STRENGTH_TONES[level] : void 0;
|
|
6309
6334
|
const levelWord = level ? [labels.strengthWeak, labels.strengthEasy, labels.strengthMedium, labels.strengthHard][level - 1] : "";
|
|
6310
|
-
return /* @__PURE__ */
|
|
6335
|
+
return /* @__PURE__ */ jsx30(InputProvider, { value: contextValue, children: tier.provide(
|
|
6311
6336
|
/* @__PURE__ */ jsxs17(
|
|
6312
6337
|
FieldFrame,
|
|
6313
6338
|
{
|
|
@@ -6321,15 +6346,15 @@ function InputRoot({
|
|
|
6321
6346
|
hintTone,
|
|
6322
6347
|
error: shownError,
|
|
6323
6348
|
counter: strength ? /* @__PURE__ */ jsxs17(Fragment10, { children: [
|
|
6324
|
-
/* @__PURE__ */
|
|
6349
|
+
/* @__PURE__ */ jsx30(
|
|
6325
6350
|
"span",
|
|
6326
6351
|
{
|
|
6327
6352
|
className: cx(textTone_default.tone, Input_default.strengthWord),
|
|
6328
6353
|
"data-tone": levelTone,
|
|
6329
6354
|
"aria-live": "polite",
|
|
6330
6355
|
children: levelWord ? /* @__PURE__ */ jsxs17(Fragment10, { children: [
|
|
6331
|
-
/* @__PURE__ */
|
|
6332
|
-
/* @__PURE__ */
|
|
6356
|
+
/* @__PURE__ */ jsx30(VisuallyHidden, { children: `${labels.strength}: ` }),
|
|
6357
|
+
/* @__PURE__ */ jsx30(MorphText, { children: levelWord })
|
|
6333
6358
|
] }) : null
|
|
6334
6359
|
}
|
|
6335
6360
|
),
|
|
@@ -6340,7 +6365,7 @@ function InputRoot({
|
|
|
6340
6365
|
className: cx(fieldTierClass, Input_default.root, className),
|
|
6341
6366
|
children: [
|
|
6342
6367
|
children,
|
|
6343
|
-
strength ? /* @__PURE__ */
|
|
6368
|
+
strength ? /* @__PURE__ */ jsx30(
|
|
6344
6369
|
ProgressBar,
|
|
6345
6370
|
{
|
|
6346
6371
|
steps: true,
|
|
@@ -6373,11 +6398,11 @@ function InputWrapper({ children, className, ref, ...rest }) {
|
|
|
6373
6398
|
"focus-ring": focusRing
|
|
6374
6399
|
}),
|
|
6375
6400
|
children: [
|
|
6376
|
-
/* @__PURE__ */
|
|
6377
|
-
valid ? /* @__PURE__ */
|
|
6378
|
-
validId ? /* @__PURE__ */
|
|
6379
|
-
hasCommit ? /* @__PURE__ */
|
|
6380
|
-
suggest ? /* @__PURE__ */
|
|
6401
|
+
/* @__PURE__ */ jsx30(InputSegmentContext, { value: true, children }),
|
|
6402
|
+
valid ? /* @__PURE__ */ jsx30(InputValidMark, {}) : null,
|
|
6403
|
+
validId ? /* @__PURE__ */ jsx30(VisuallyHidden, { id: validId, live: "polite", children: valid ? labels.valid : "" }) : null,
|
|
6404
|
+
hasCommit ? /* @__PURE__ */ jsx30(FieldCommitStatus, { state: commit.state, labels, className: Input_default.status }) : null,
|
|
6405
|
+
suggest ? /* @__PURE__ */ jsx30(InputSuggestionList, { suggest, size }) : null
|
|
6381
6406
|
]
|
|
6382
6407
|
}
|
|
6383
6408
|
);
|
|
@@ -6385,21 +6410,21 @@ function InputWrapper({ children, className, ref, ...rest }) {
|
|
|
6385
6410
|
InputWrapper.displayName = "Input.Wrapper";
|
|
6386
6411
|
function InputValidMark() {
|
|
6387
6412
|
const { mountedRef } = useInputContext();
|
|
6388
|
-
const [arrived] =
|
|
6389
|
-
const [drawn, setDrawn] =
|
|
6390
|
-
|
|
6413
|
+
const [arrived] = React52.useState(() => mountedRef.current);
|
|
6414
|
+
const [drawn, setDrawn] = React52.useState(!arrived);
|
|
6415
|
+
React52.useEffect(() => {
|
|
6391
6416
|
if (drawn) return;
|
|
6392
6417
|
const frame2 = requestAnimationFrame(() => setDrawn(true));
|
|
6393
6418
|
return () => cancelAnimationFrame(frame2);
|
|
6394
6419
|
}, [drawn]);
|
|
6395
6420
|
const presence = usePartPresence({ axis: "inline" });
|
|
6396
|
-
return /* @__PURE__ */
|
|
6421
|
+
return /* @__PURE__ */ jsx30(
|
|
6397
6422
|
"span",
|
|
6398
6423
|
{
|
|
6399
6424
|
ref: presence.ref,
|
|
6400
6425
|
className: cx(iconSlotClass, Input_default.validMark, arrived && enterMotion_default.enter),
|
|
6401
6426
|
"aria-hidden": "true",
|
|
6402
|
-
children: /* @__PURE__ */
|
|
6427
|
+
children: /* @__PURE__ */ jsx30(Icon, { name: "action.check", drawn })
|
|
6403
6428
|
}
|
|
6404
6429
|
);
|
|
6405
6430
|
}
|
|
@@ -6409,6 +6434,7 @@ function InputField({
|
|
|
6409
6434
|
required,
|
|
6410
6435
|
disabled: disabledProp,
|
|
6411
6436
|
type,
|
|
6437
|
+
autoComplete,
|
|
6412
6438
|
onChange,
|
|
6413
6439
|
onValueChange,
|
|
6414
6440
|
onFocus,
|
|
@@ -6440,8 +6466,9 @@ function InputField({
|
|
|
6440
6466
|
const setRefs = useMergedRefs(inputRef, ref);
|
|
6441
6467
|
const highlighted = useStoreSlice(suggest?.highlight ?? NO_HIGHLIGHT, (value) => value);
|
|
6442
6468
|
const disabled = useInheritedDisabled(disabledProp);
|
|
6469
|
+
const autofill = useAutofill(autoComplete);
|
|
6443
6470
|
const fieldType = type === "password" && revealed ? "text" : type;
|
|
6444
|
-
|
|
6471
|
+
React52.useLayoutEffect(() => {
|
|
6445
6472
|
const selection = selectionRef.current;
|
|
6446
6473
|
const input = inputRef.current;
|
|
6447
6474
|
if (!selection || !input || input.type !== (fieldType ?? "text")) return;
|
|
@@ -6449,16 +6476,16 @@ function InputField({
|
|
|
6449
6476
|
input.setSelectionRange(selection[0], selection[1]);
|
|
6450
6477
|
}, [fieldType, selectionRef, inputRef]);
|
|
6451
6478
|
const controlled = rest.value;
|
|
6452
|
-
|
|
6479
|
+
React52.useEffect(() => {
|
|
6453
6480
|
if (!reportValue) return;
|
|
6454
6481
|
if (controlled !== void 0) reportValue(String(controlled));
|
|
6455
6482
|
else if (inputRef.current) reportValue(inputRef.current.value);
|
|
6456
6483
|
}, [reportValue, controlled, inputRef]);
|
|
6457
|
-
|
|
6484
|
+
React52.useEffect(() => {
|
|
6458
6485
|
if (customValidity !== null) inputRef.current?.setCustomValidity(customValidity);
|
|
6459
6486
|
}, [customValidity, inputRef]);
|
|
6460
6487
|
const resolvedDescribedBy = [ariaDescribedBy, affixIds, describedBy, valid ? validId : void 0].filter(Boolean).join(" ") || void 0;
|
|
6461
|
-
return /* @__PURE__ */
|
|
6488
|
+
return /* @__PURE__ */ jsx30(
|
|
6462
6489
|
"input",
|
|
6463
6490
|
{
|
|
6464
6491
|
...rest,
|
|
@@ -6471,9 +6498,11 @@ function InputField({
|
|
|
6471
6498
|
required: required ?? (requiredCtx || void 0),
|
|
6472
6499
|
type: fieldType,
|
|
6473
6500
|
"aria-busy": commit.state === "pending" || void 0,
|
|
6501
|
+
...autofill,
|
|
6474
6502
|
...suggest ? {
|
|
6503
|
+
// The kit's own list: no browser or password-manager list on top of it.
|
|
6504
|
+
...AUTOFILL_OFF,
|
|
6475
6505
|
role: "combobox",
|
|
6476
|
-
autoComplete: "off",
|
|
6477
6506
|
"aria-autocomplete": "list",
|
|
6478
6507
|
"aria-expanded": suggest.shown,
|
|
6479
6508
|
"aria-controls": suggest.shown ? suggest.listboxId : void 0,
|
|
@@ -6514,7 +6543,7 @@ function InputField({
|
|
|
6514
6543
|
}
|
|
6515
6544
|
InputField.displayName = "Input.Field";
|
|
6516
6545
|
function InputIcon({ side, children, className, ...rest }) {
|
|
6517
|
-
return /* @__PURE__ */
|
|
6546
|
+
return /* @__PURE__ */ jsx30(
|
|
6518
6547
|
"span",
|
|
6519
6548
|
{
|
|
6520
6549
|
...rest,
|
|
@@ -6528,12 +6557,12 @@ function InputIcon({ side, children, className, ...rest }) {
|
|
|
6528
6557
|
InputIcon.displayName = "Input.Icon";
|
|
6529
6558
|
function useAffixDescription(id, spokenText) {
|
|
6530
6559
|
const { addAffix } = useInputContext();
|
|
6531
|
-
const generated =
|
|
6560
|
+
const generated = React52.useId();
|
|
6532
6561
|
const target = spokenText ? generated : id ?? generated;
|
|
6533
|
-
|
|
6562
|
+
React52.useLayoutEffect(() => addAffix(target), [addAffix, target]);
|
|
6534
6563
|
return spokenText ? {
|
|
6535
6564
|
id,
|
|
6536
|
-
spoken: /* @__PURE__ */
|
|
6565
|
+
spoken: /* @__PURE__ */ jsx30("span", { id: generated, hidden: true, children: spokenText })
|
|
6537
6566
|
} : { id: target, spoken: null };
|
|
6538
6567
|
}
|
|
6539
6568
|
function InputAffix({
|
|
@@ -6588,10 +6617,10 @@ function InputInlineAffix({
|
|
|
6588
6617
|
InputInlineAffix.displayName = "Input.InlineAffix";
|
|
6589
6618
|
function InputClearButton({ onClick: onClick2, className, ref, ...rest }) {
|
|
6590
6619
|
const { inputId, inputRef, labels, mountedRef } = useInputContext();
|
|
6591
|
-
const [arrived] =
|
|
6620
|
+
const [arrived] = React52.useState(() => mountedRef.current);
|
|
6592
6621
|
const presence = usePartPresence({ axis: "inline" });
|
|
6593
6622
|
const setRefs = useMergedRefs(presence.ref, ref);
|
|
6594
|
-
return /* @__PURE__ */
|
|
6623
|
+
return /* @__PURE__ */ jsx30(
|
|
6595
6624
|
FieldActionButton,
|
|
6596
6625
|
{
|
|
6597
6626
|
tooltip: false,
|
|
@@ -6604,18 +6633,18 @@ function InputClearButton({ onClick: onClick2, className, ref, ...rest }) {
|
|
|
6604
6633
|
onClick2?.(event);
|
|
6605
6634
|
if (!event.defaultPrevented) inputRef.current?.focus();
|
|
6606
6635
|
},
|
|
6607
|
-
children: /* @__PURE__ */
|
|
6636
|
+
children: /* @__PURE__ */ jsx30(Icon, { name: "action.close" })
|
|
6608
6637
|
}
|
|
6609
6638
|
);
|
|
6610
6639
|
}
|
|
6611
6640
|
InputClearButton.displayName = "Input.ClearButton";
|
|
6612
6641
|
function InputAction(props) {
|
|
6613
|
-
return /* @__PURE__ */
|
|
6642
|
+
return /* @__PURE__ */ jsx30(FieldActionButton, { ...props });
|
|
6614
6643
|
}
|
|
6615
6644
|
InputAction.displayName = "Input.Action";
|
|
6616
6645
|
function InputCopyButton({ value, ...rest }) {
|
|
6617
6646
|
const { inputRef, labels } = useInputContext();
|
|
6618
|
-
return /* @__PURE__ */
|
|
6647
|
+
return /* @__PURE__ */ jsx30(
|
|
6619
6648
|
FieldCopyButton,
|
|
6620
6649
|
{
|
|
6621
6650
|
...rest,
|
|
@@ -6628,7 +6657,7 @@ InputCopyButton.displayName = "Input.CopyButton";
|
|
|
6628
6657
|
function InputRevealButton({ onClick: onClick2, onMouseDown, ref, ...rest }) {
|
|
6629
6658
|
const { inputId, inputRef, labels, revealed, setRevealed, selectionRef } = useInputContext();
|
|
6630
6659
|
const glyph = revealed ? "field.password.hide" : "field.password.show";
|
|
6631
|
-
return /* @__PURE__ */
|
|
6660
|
+
return /* @__PURE__ */ jsx30(
|
|
6632
6661
|
FieldActionButton,
|
|
6633
6662
|
{
|
|
6634
6663
|
tooltip: false,
|
|
@@ -6652,14 +6681,14 @@ function InputRevealButton({ onClick: onClick2, onMouseDown, ref, ...rest }) {
|
|
|
6652
6681
|
}
|
|
6653
6682
|
setRevealed((shown) => !shown);
|
|
6654
6683
|
},
|
|
6655
|
-
children: /* @__PURE__ */
|
|
6684
|
+
children: /* @__PURE__ */ jsx30(Icon, { name: glyph })
|
|
6656
6685
|
}
|
|
6657
6686
|
);
|
|
6658
6687
|
}
|
|
6659
6688
|
InputRevealButton.displayName = "Input.RevealButton";
|
|
6660
6689
|
function InputCounter(props) {
|
|
6661
6690
|
const { size, labels } = useInputContext();
|
|
6662
|
-
return /* @__PURE__ */
|
|
6691
|
+
return /* @__PURE__ */ jsx30(FieldCounter, { ...props, size, label: labels.counter });
|
|
6663
6692
|
}
|
|
6664
6693
|
InputCounter.displayName = "Input.Counter";
|
|
6665
6694
|
var Input = {
|
|
@@ -6677,7 +6706,7 @@ var Input = {
|
|
|
6677
6706
|
};
|
|
6678
6707
|
|
|
6679
6708
|
// src/components/empty-page/EmptyPage.tsx
|
|
6680
|
-
import * as
|
|
6709
|
+
import * as React53 from "react";
|
|
6681
6710
|
|
|
6682
6711
|
// src/components/empty-page/EmptyPage.module.css
|
|
6683
6712
|
var EmptyPage_default = {
|
|
@@ -6689,7 +6718,7 @@ var EmptyPage_default = {
|
|
|
6689
6718
|
};
|
|
6690
6719
|
|
|
6691
6720
|
// src/components/empty-page/EmptyPage.tsx
|
|
6692
|
-
import { jsx as
|
|
6721
|
+
import { jsx as jsx31, jsxs as jsxs18 } from "react/jsx-runtime";
|
|
6693
6722
|
var EMPTY_PAGE_LABELS = { retry: "\u041F\u043E\u0432\u0442\u043E\u0440\u0438\u0442\u044C" };
|
|
6694
6723
|
var TITLE_ROLE = {
|
|
6695
6724
|
xs: textRole_default.titleS,
|
|
@@ -6705,7 +6734,7 @@ var DESCRIPTION_ROLE = {
|
|
|
6705
6734
|
l: textRole_default.bodyM,
|
|
6706
6735
|
xl: textRole_default.bodyL
|
|
6707
6736
|
};
|
|
6708
|
-
var EmptyPageContext =
|
|
6737
|
+
var EmptyPageContext = React53.createContext({
|
|
6709
6738
|
tone: "neutral",
|
|
6710
6739
|
size: "m",
|
|
6711
6740
|
compact: false,
|
|
@@ -6732,7 +6761,7 @@ function EmptyPageRoot({
|
|
|
6732
6761
|
labels: mergedLabels
|
|
6733
6762
|
};
|
|
6734
6763
|
return provide(
|
|
6735
|
-
/* @__PURE__ */
|
|
6764
|
+
/* @__PURE__ */ jsx31(
|
|
6736
6765
|
"div",
|
|
6737
6766
|
{
|
|
6738
6767
|
className: cx(EmptyPage_default.root, appear.entering && enterMotion_default.enterBaseChildren, className),
|
|
@@ -6744,17 +6773,17 @@ function EmptyPageRoot({
|
|
|
6744
6773
|
layout: layout === "default" ? void 0 : layout,
|
|
6745
6774
|
tone: tone === "neutral" ? void 0 : tone
|
|
6746
6775
|
}),
|
|
6747
|
-
children: /* @__PURE__ */
|
|
6776
|
+
children: /* @__PURE__ */ jsx31(EmptyPageContext.Provider, { value: context, children })
|
|
6748
6777
|
}
|
|
6749
6778
|
)
|
|
6750
6779
|
);
|
|
6751
6780
|
}
|
|
6752
6781
|
EmptyPageRoot.displayName = "EmptyPage.Root";
|
|
6753
6782
|
function EmptyPageIcon({ tone: toneProp, className, ...rest }) {
|
|
6754
|
-
const { tone: rootTone, size, compact } =
|
|
6783
|
+
const { tone: rootTone, size, compact } = React53.useContext(EmptyPageContext);
|
|
6755
6784
|
return (
|
|
6756
6785
|
// The tile is decorative: the title says what the state is.
|
|
6757
|
-
/* @__PURE__ */
|
|
6786
|
+
/* @__PURE__ */ jsx31(
|
|
6758
6787
|
"div",
|
|
6759
6788
|
{
|
|
6760
6789
|
"aria-hidden": "true",
|
|
@@ -6768,8 +6797,8 @@ function EmptyPageIcon({ tone: toneProp, className, ...rest }) {
|
|
|
6768
6797
|
}
|
|
6769
6798
|
EmptyPageIcon.displayName = "EmptyPage.Icon";
|
|
6770
6799
|
function EmptyPageTitle({ as: Tag = "h2", className, ref, ...rest }) {
|
|
6771
|
-
const { size, compact } =
|
|
6772
|
-
return /* @__PURE__ */
|
|
6800
|
+
const { size, compact } = React53.useContext(EmptyPageContext);
|
|
6801
|
+
return /* @__PURE__ */ jsx31(
|
|
6773
6802
|
Tag,
|
|
6774
6803
|
{
|
|
6775
6804
|
ref,
|
|
@@ -6780,8 +6809,8 @@ function EmptyPageTitle({ as: Tag = "h2", className, ref, ...rest }) {
|
|
|
6780
6809
|
}
|
|
6781
6810
|
EmptyPageTitle.displayName = "EmptyPage.Title";
|
|
6782
6811
|
function EmptyPageDescription({ className, ...rest }) {
|
|
6783
|
-
const { size, compact } =
|
|
6784
|
-
return /* @__PURE__ */
|
|
6812
|
+
const { size, compact } = React53.useContext(EmptyPageContext);
|
|
6813
|
+
return /* @__PURE__ */ jsx31(
|
|
6785
6814
|
"p",
|
|
6786
6815
|
{
|
|
6787
6816
|
className: cx(
|
|
@@ -6795,11 +6824,11 @@ function EmptyPageDescription({ className, ...rest }) {
|
|
|
6795
6824
|
}
|
|
6796
6825
|
EmptyPageDescription.displayName = "EmptyPage.Description";
|
|
6797
6826
|
function EmptyPageActions({ className, ...rest }) {
|
|
6798
|
-
return /* @__PURE__ */
|
|
6827
|
+
return /* @__PURE__ */ jsx31("div", { className: cx(EmptyPage_default.actions, className), ...rest });
|
|
6799
6828
|
}
|
|
6800
6829
|
EmptyPageActions.displayName = "EmptyPage.Actions";
|
|
6801
6830
|
function EmptyPageRetryButton({ onRetry, children, disabled, ...rest }) {
|
|
6802
|
-
const { labels } =
|
|
6831
|
+
const { labels } = React53.useContext(EmptyPageContext);
|
|
6803
6832
|
const retry = usePendingAction(onRetry);
|
|
6804
6833
|
return /* @__PURE__ */ jsxs18(
|
|
6805
6834
|
Button.Root,
|
|
@@ -6811,7 +6840,7 @@ function EmptyPageRetryButton({ onRetry, children, disabled, ...rest }) {
|
|
|
6811
6840
|
disabled,
|
|
6812
6841
|
onClick: () => retry.run?.(),
|
|
6813
6842
|
children: [
|
|
6814
|
-
/* @__PURE__ */
|
|
6843
|
+
/* @__PURE__ */ jsx31(Button.Icon, { children: /* @__PURE__ */ jsx31(Icon, { name: "action.refresh" }) }),
|
|
6815
6844
|
children ?? labels.retry
|
|
6816
6845
|
]
|
|
6817
6846
|
}
|
|
@@ -6828,21 +6857,21 @@ var EmptyPage = {
|
|
|
6828
6857
|
};
|
|
6829
6858
|
|
|
6830
6859
|
// src/components/avatar/Avatar.tsx
|
|
6831
|
-
import * as
|
|
6860
|
+
import * as React57 from "react";
|
|
6832
6861
|
|
|
6833
6862
|
// src/internal/imageSlot.tsx
|
|
6834
|
-
import * as
|
|
6863
|
+
import * as React55 from "react";
|
|
6835
6864
|
|
|
6836
6865
|
// src/hooks/useImageStatus.ts
|
|
6837
|
-
import * as
|
|
6866
|
+
import * as React54 from "react";
|
|
6838
6867
|
function useImageStatus(report, { onLoad, onError, decode = false } = {}) {
|
|
6839
|
-
const [status, setStatus] =
|
|
6840
|
-
const settled =
|
|
6841
|
-
|
|
6868
|
+
const [status, setStatus] = React54.useState("loading");
|
|
6869
|
+
const settled = React54.useRef(false);
|
|
6870
|
+
React54.useLayoutEffect(() => {
|
|
6842
6871
|
report("loading");
|
|
6843
6872
|
return () => report("idle");
|
|
6844
6873
|
}, [report]);
|
|
6845
|
-
const loaded =
|
|
6874
|
+
const loaded = React54.useCallback(
|
|
6846
6875
|
(element, event) => {
|
|
6847
6876
|
const settle2 = () => {
|
|
6848
6877
|
if (decode && (settled.current || !element.isConnected)) return;
|
|
@@ -6859,11 +6888,11 @@ function useImageStatus(report, { onLoad, onError, decode = false } = {}) {
|
|
|
6859
6888
|
},
|
|
6860
6889
|
[decode, onLoad, report]
|
|
6861
6890
|
);
|
|
6862
|
-
const handleLoad =
|
|
6891
|
+
const handleLoad = React54.useCallback(
|
|
6863
6892
|
(event) => loaded(event.currentTarget, event),
|
|
6864
6893
|
[loaded]
|
|
6865
6894
|
);
|
|
6866
|
-
const handleError =
|
|
6895
|
+
const handleError = React54.useCallback(
|
|
6867
6896
|
(event) => {
|
|
6868
6897
|
setStatus("error");
|
|
6869
6898
|
report("error");
|
|
@@ -6871,7 +6900,7 @@ function useImageStatus(report, { onLoad, onError, decode = false } = {}) {
|
|
|
6871
6900
|
},
|
|
6872
6901
|
[onError, report]
|
|
6873
6902
|
);
|
|
6874
|
-
const ref =
|
|
6903
|
+
const ref = React54.useCallback(
|
|
6875
6904
|
(element) => {
|
|
6876
6905
|
if (decode && element instanceof HTMLImageElement && element.complete && element.naturalWidth > 0) {
|
|
6877
6906
|
loaded(element, null);
|
|
@@ -6883,18 +6912,18 @@ function useImageStatus(report, { onLoad, onError, decode = false } = {}) {
|
|
|
6883
6912
|
}
|
|
6884
6913
|
|
|
6885
6914
|
// src/internal/imageSlot.tsx
|
|
6886
|
-
import { Fragment as Fragment11, jsx as
|
|
6915
|
+
import { Fragment as Fragment11, jsx as jsx32, jsxs as jsxs19 } from "react/jsx-runtime";
|
|
6887
6916
|
function createImageSlot(name, classNames) {
|
|
6888
6917
|
const [Provider, useSlotContext] = createComponentContext(name);
|
|
6889
6918
|
function ImageSlotProvider({ children }) {
|
|
6890
|
-
const [imageStatus, setImageStatus] =
|
|
6891
|
-
const value =
|
|
6892
|
-
return /* @__PURE__ */
|
|
6919
|
+
const [imageStatus, setImageStatus] = React55.useState("idle");
|
|
6920
|
+
const value = React55.useMemo(() => ({ imageStatus, setImageStatus }), [imageStatus]);
|
|
6921
|
+
return /* @__PURE__ */ jsx32(Provider, { value, children });
|
|
6893
6922
|
}
|
|
6894
6923
|
function ImageInner({ src, alt = "", className, onLoad, onError, ...rest }) {
|
|
6895
6924
|
const { setImageStatus } = useSlotContext();
|
|
6896
6925
|
const image = useImageStatus(setImageStatus, { onLoad, onError });
|
|
6897
|
-
return /* @__PURE__ */
|
|
6926
|
+
return /* @__PURE__ */ jsx32(
|
|
6898
6927
|
"img",
|
|
6899
6928
|
{
|
|
6900
6929
|
loading: "lazy",
|
|
@@ -6911,7 +6940,7 @@ function createImageSlot(name, classNames) {
|
|
|
6911
6940
|
}
|
|
6912
6941
|
function LeavingImage({ image }) {
|
|
6913
6942
|
const { ref: _ref, src, alt: _alt, className, ...rest } = image;
|
|
6914
|
-
return /* @__PURE__ */
|
|
6943
|
+
return /* @__PURE__ */ jsx32(
|
|
6915
6944
|
"img",
|
|
6916
6945
|
{
|
|
6917
6946
|
...rest,
|
|
@@ -6925,23 +6954,23 @@ function createImageSlot(name, classNames) {
|
|
|
6925
6954
|
);
|
|
6926
6955
|
}
|
|
6927
6956
|
function Image2({ onLoad, onError, onTransitionEnd, ...props }) {
|
|
6928
|
-
const [shown, setShown] =
|
|
6929
|
-
const [leaving, setLeaving] =
|
|
6930
|
-
const [src, setSrc] =
|
|
6957
|
+
const [shown, setShown] = React55.useState(null);
|
|
6958
|
+
const [leaving, setLeaving] = React55.useState(null);
|
|
6959
|
+
const [src, setSrc] = React55.useState(props.src);
|
|
6931
6960
|
if (props.src !== src) {
|
|
6932
6961
|
setSrc(props.src);
|
|
6933
6962
|
setLeaving(shown && !prefersReducedMotion() ? shown : null);
|
|
6934
6963
|
setShown(null);
|
|
6935
6964
|
}
|
|
6936
6965
|
const leavingSrc = leaving?.src;
|
|
6937
|
-
|
|
6966
|
+
React55.useEffect(() => {
|
|
6938
6967
|
if (!leavingSrc || !shown) return;
|
|
6939
6968
|
const timer = window.setTimeout(() => setLeaving(null), exitTimeoutMs("slow"));
|
|
6940
6969
|
return () => window.clearTimeout(timer);
|
|
6941
6970
|
}, [leavingSrc, shown]);
|
|
6942
6971
|
return /* @__PURE__ */ jsxs19(Fragment11, { children: [
|
|
6943
|
-
leaving ? /* @__PURE__ */
|
|
6944
|
-
/* @__PURE__ */
|
|
6972
|
+
leaving ? /* @__PURE__ */ jsx32(LeavingImage, { image: leaving }) : null,
|
|
6973
|
+
/* @__PURE__ */ jsx32(
|
|
6945
6974
|
ImageInner,
|
|
6946
6975
|
{
|
|
6947
6976
|
...props,
|
|
@@ -6965,7 +6994,7 @@ function createImageSlot(name, classNames) {
|
|
|
6965
6994
|
Image2.displayName = `${name}.Image`;
|
|
6966
6995
|
function Fallback({ className, ...rest }) {
|
|
6967
6996
|
const { imageStatus } = useSlotContext();
|
|
6968
|
-
return /* @__PURE__ */
|
|
6997
|
+
return /* @__PURE__ */ jsx32(
|
|
6969
6998
|
"span",
|
|
6970
6999
|
{
|
|
6971
7000
|
className: cx(classNames.fallback, className),
|
|
@@ -6985,22 +7014,22 @@ function createImageSlot(name, classNames) {
|
|
|
6985
7014
|
}
|
|
6986
7015
|
|
|
6987
7016
|
// src/internal/mediaSlot.tsx
|
|
6988
|
-
import * as
|
|
6989
|
-
import { jsx as
|
|
6990
|
-
var MediaSlotContext =
|
|
7017
|
+
import * as React56 from "react";
|
|
7018
|
+
import { jsx as jsx33 } from "react/jsx-runtime";
|
|
7019
|
+
var MediaSlotContext = React56.createContext(null);
|
|
6991
7020
|
var MEDIA_SLOT_SIZE = { avatar: "l", thumbnail: "m" };
|
|
6992
7021
|
function useMediaSlotHost() {
|
|
6993
|
-
const [count, setCount] =
|
|
6994
|
-
const value =
|
|
7022
|
+
const [count, setCount] = React56.useState(0);
|
|
7023
|
+
const value = React56.useMemo(
|
|
6995
7024
|
() => ({ report: (present) => setCount((n) => Math.max(0, n + (present ? 1 : -1))) }),
|
|
6996
7025
|
[]
|
|
6997
7026
|
);
|
|
6998
|
-
const provide = (children) => /* @__PURE__ */
|
|
7027
|
+
const provide = (children) => /* @__PURE__ */ jsx33(MediaSlotContext.Provider, { value, children });
|
|
6999
7028
|
return { media: count > 0, provide };
|
|
7000
7029
|
}
|
|
7001
7030
|
function useMediaSlotSize(kind) {
|
|
7002
|
-
const slot3 =
|
|
7003
|
-
|
|
7031
|
+
const slot3 = React56.useContext(MediaSlotContext);
|
|
7032
|
+
React56.useLayoutEffect(() => {
|
|
7004
7033
|
if (!slot3) return;
|
|
7005
7034
|
slot3.report(true);
|
|
7006
7035
|
return () => slot3.report(false);
|
|
@@ -7019,16 +7048,16 @@ var Avatar_default = {
|
|
|
7019
7048
|
};
|
|
7020
7049
|
|
|
7021
7050
|
// src/components/avatar/Avatar.tsx
|
|
7022
|
-
import { jsx as
|
|
7051
|
+
import { jsx as jsx34 } from "react/jsx-runtime";
|
|
7023
7052
|
var slot = createImageSlot("Avatar", {
|
|
7024
7053
|
image: Avatar_default.image,
|
|
7025
7054
|
fallback: cx(Avatar_default.fallback, iconSlotClass)
|
|
7026
7055
|
});
|
|
7027
|
-
var AvatarGroupSizeContext =
|
|
7056
|
+
var AvatarGroupSizeContext = React57.createContext(void 0);
|
|
7028
7057
|
function AvatarRoot({ size, color = "gray", className, children, ...rest }) {
|
|
7029
|
-
const groupSize =
|
|
7058
|
+
const groupSize = React57.useContext(AvatarGroupSizeContext);
|
|
7030
7059
|
const slotSize = useMediaSlotSize("avatar");
|
|
7031
|
-
return /* @__PURE__ */
|
|
7060
|
+
return /* @__PURE__ */ jsx34(slot.ImageSlotProvider, { children: /* @__PURE__ */ jsx34(
|
|
7032
7061
|
"div",
|
|
7033
7062
|
{
|
|
7034
7063
|
role: namedRole(rest, "img"),
|
|
@@ -7050,7 +7079,7 @@ var AVATAR_STATUS_LABELS = {
|
|
|
7050
7079
|
};
|
|
7051
7080
|
function AvatarStatus({ status, labels, className, ...rest }) {
|
|
7052
7081
|
slot.useImageSlot();
|
|
7053
|
-
return /* @__PURE__ */
|
|
7082
|
+
return /* @__PURE__ */ jsx34(
|
|
7054
7083
|
"span",
|
|
7055
7084
|
{
|
|
7056
7085
|
role: "img",
|
|
@@ -7063,7 +7092,7 @@ function AvatarStatus({ status, labels, className, ...rest }) {
|
|
|
7063
7092
|
}
|
|
7064
7093
|
AvatarStatus.displayName = "Avatar.Status";
|
|
7065
7094
|
function AvatarGroup({ size, className, role = "group", ...rest }) {
|
|
7066
|
-
return /* @__PURE__ */
|
|
7095
|
+
return /* @__PURE__ */ jsx34(AvatarGroupSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsx34(
|
|
7067
7096
|
"div",
|
|
7068
7097
|
{
|
|
7069
7098
|
role,
|
|
@@ -7075,8 +7104,8 @@ function AvatarGroup({ size, className, role = "group", ...rest }) {
|
|
|
7075
7104
|
}
|
|
7076
7105
|
AvatarGroup.displayName = "Avatar.Group";
|
|
7077
7106
|
function AvatarOverflow({ size, className, ...rest }) {
|
|
7078
|
-
const groupSize =
|
|
7079
|
-
return /* @__PURE__ */
|
|
7107
|
+
const groupSize = React57.useContext(AvatarGroupSizeContext);
|
|
7108
|
+
return /* @__PURE__ */ jsx34(
|
|
7080
7109
|
"div",
|
|
7081
7110
|
{
|
|
7082
7111
|
role: namedRole(rest, "img"),
|
|
@@ -7097,7 +7126,7 @@ var Avatar = {
|
|
|
7097
7126
|
};
|
|
7098
7127
|
|
|
7099
7128
|
// src/components/checkbox/Checkbox.tsx
|
|
7100
|
-
import * as
|
|
7129
|
+
import * as React59 from "react";
|
|
7101
7130
|
|
|
7102
7131
|
// src/internal/CheckMark.module.css
|
|
7103
7132
|
var CheckMark_default = {
|
|
@@ -7107,7 +7136,7 @@ var CheckMark_default = {
|
|
|
7107
7136
|
};
|
|
7108
7137
|
|
|
7109
7138
|
// src/internal/CheckMark.tsx
|
|
7110
|
-
import { jsx as
|
|
7139
|
+
import { jsx as jsx35, jsxs as jsxs20 } from "react/jsx-runtime";
|
|
7111
7140
|
function CheckMark({ state, className }) {
|
|
7112
7141
|
return /* @__PURE__ */ jsxs20(
|
|
7113
7142
|
"svg",
|
|
@@ -7118,15 +7147,15 @@ function CheckMark({ state, className }) {
|
|
|
7118
7147
|
"aria-hidden": "true",
|
|
7119
7148
|
focusable: "false",
|
|
7120
7149
|
children: [
|
|
7121
|
-
/* @__PURE__ */
|
|
7122
|
-
/* @__PURE__ */
|
|
7150
|
+
/* @__PURE__ */ jsx35("path", { d: "M5.5 12.5l4.25 4.25L18.5 8", pathLength: 1, className: CheckMark_default.check }),
|
|
7151
|
+
/* @__PURE__ */ jsx35("path", { d: "M7 12h10", pathLength: 1, className: CheckMark_default.bar })
|
|
7123
7152
|
]
|
|
7124
7153
|
}
|
|
7125
7154
|
);
|
|
7126
7155
|
}
|
|
7127
7156
|
|
|
7128
7157
|
// src/internal/ChoiceField.tsx
|
|
7129
|
-
import * as
|
|
7158
|
+
import * as React58 from "react";
|
|
7130
7159
|
|
|
7131
7160
|
// src/internal/ChoiceField.module.css
|
|
7132
7161
|
var ChoiceField_default = {
|
|
@@ -7142,12 +7171,12 @@ var ChoiceField_default = {
|
|
|
7142
7171
|
};
|
|
7143
7172
|
|
|
7144
7173
|
// src/internal/ChoiceField.tsx
|
|
7145
|
-
import { Fragment as Fragment12, jsx as
|
|
7174
|
+
import { Fragment as Fragment12, jsx as jsx36, jsxs as jsxs21 } from "react/jsx-runtime";
|
|
7146
7175
|
var choiceInputClass = ChoiceField_default.input;
|
|
7147
7176
|
var choiceVisualClass = cx(ChoiceField_default.visual, press_default.pressPartCompact);
|
|
7148
7177
|
var choiceBoxClass = ChoiceField_default.box;
|
|
7149
7178
|
var choiceTrackClass = ChoiceField_default.track;
|
|
7150
|
-
var ChoiceMarksContext =
|
|
7179
|
+
var ChoiceMarksContext = React58.createContext(null);
|
|
7151
7180
|
function ChoiceField({
|
|
7152
7181
|
ids,
|
|
7153
7182
|
size,
|
|
@@ -7168,11 +7197,11 @@ function ChoiceField({
|
|
|
7168
7197
|
}) {
|
|
7169
7198
|
const shake = useErrorShake(!groupOption && ids.invalid, error);
|
|
7170
7199
|
const leaving = useLeavingError(ids.showError, error);
|
|
7171
|
-
const marks =
|
|
7200
|
+
const marks = React58.useMemo(
|
|
7172
7201
|
() => ({ required, optional, optionalLabel, disabled }),
|
|
7173
7202
|
[required, optional, optionalLabel, disabled]
|
|
7174
7203
|
);
|
|
7175
|
-
return /* @__PURE__ */
|
|
7204
|
+
return /* @__PURE__ */ jsx36(ControlSizeProvider, { value: size, children: /* @__PURE__ */ jsxs21(
|
|
7176
7205
|
"div",
|
|
7177
7206
|
{
|
|
7178
7207
|
className: cx(fieldTierClass, ChoiceField_default.field, className),
|
|
@@ -7191,7 +7220,7 @@ function ChoiceField({
|
|
|
7191
7220
|
className: cx(ChoiceField_default.row, press_default.pressHost),
|
|
7192
7221
|
"data-loading": busy || void 0,
|
|
7193
7222
|
children: [
|
|
7194
|
-
/* @__PURE__ */
|
|
7223
|
+
/* @__PURE__ */ jsx36(
|
|
7195
7224
|
"span",
|
|
7196
7225
|
{
|
|
7197
7226
|
className: cx(ChoiceField_default.controlCell, enterMotion_default.shake, touchTargetClass),
|
|
@@ -7199,11 +7228,11 @@ function ChoiceField({
|
|
|
7199
7228
|
children: control
|
|
7200
7229
|
}
|
|
7201
7230
|
),
|
|
7202
|
-
/* @__PURE__ */
|
|
7231
|
+
/* @__PURE__ */ jsx36(ChoiceMarksContext, { value: marks, children })
|
|
7203
7232
|
]
|
|
7204
7233
|
}
|
|
7205
7234
|
),
|
|
7206
|
-
/* @__PURE__ */
|
|
7235
|
+
/* @__PURE__ */ jsx36(
|
|
7207
7236
|
FieldSupport,
|
|
7208
7237
|
{
|
|
7209
7238
|
ids,
|
|
@@ -7222,13 +7251,13 @@ function ChoiceField({
|
|
|
7222
7251
|
) });
|
|
7223
7252
|
}
|
|
7224
7253
|
function ChoiceLabel({ className, children, ...rest }) {
|
|
7225
|
-
const marks =
|
|
7254
|
+
const marks = React58.use(ChoiceMarksContext);
|
|
7226
7255
|
const marked = marks && (marks.required || marks.optional);
|
|
7227
7256
|
return /* @__PURE__ */ jsxs21("span", { className: cx(ChoiceField_default.text, className), ...rest, children: [
|
|
7228
7257
|
children,
|
|
7229
7258
|
marked ? /* @__PURE__ */ jsxs21(Fragment12, { children: [
|
|
7230
7259
|
" ",
|
|
7231
|
-
/* @__PURE__ */
|
|
7260
|
+
/* @__PURE__ */ jsx36(
|
|
7232
7261
|
LabelMarks,
|
|
7233
7262
|
{
|
|
7234
7263
|
required: marks.required,
|
|
@@ -7249,7 +7278,7 @@ var Checkbox_default = {
|
|
|
7249
7278
|
};
|
|
7250
7279
|
|
|
7251
7280
|
// src/components/checkbox/Checkbox.tsx
|
|
7252
|
-
import { Fragment as Fragment13, jsx as
|
|
7281
|
+
import { Fragment as Fragment13, jsx as jsx37, jsxs as jsxs22 } from "react/jsx-runtime";
|
|
7253
7282
|
var CHECKBOX_LABELS = { optional: "\u043D\u0435\u043E\u0431\u044F\u0437\u0430\u0442\u0435\u043B\u044C\u043D\u043E" };
|
|
7254
7283
|
function CheckboxRoot({
|
|
7255
7284
|
id,
|
|
@@ -7282,12 +7311,12 @@ function CheckboxRoot({
|
|
|
7282
7311
|
defaultValue: defaultChecked,
|
|
7283
7312
|
onChange: onCheckedChange
|
|
7284
7313
|
});
|
|
7285
|
-
const internalRef =
|
|
7314
|
+
const internalRef = React59.useRef(null);
|
|
7286
7315
|
const mergedRef = useMergedRefs(internalRef, ref);
|
|
7287
|
-
|
|
7316
|
+
React59.useLayoutEffect(() => {
|
|
7288
7317
|
if (internalRef.current) internalRef.current.indeterminate = indeterminate;
|
|
7289
7318
|
});
|
|
7290
|
-
return /* @__PURE__ */
|
|
7319
|
+
return /* @__PURE__ */ jsx37(
|
|
7291
7320
|
ChoiceField,
|
|
7292
7321
|
{
|
|
7293
7322
|
ids,
|
|
@@ -7303,7 +7332,7 @@ function CheckboxRoot({
|
|
|
7303
7332
|
error,
|
|
7304
7333
|
className: cx(Checkbox_default.root, className),
|
|
7305
7334
|
control: /* @__PURE__ */ jsxs22(Fragment13, { children: [
|
|
7306
|
-
/* @__PURE__ */
|
|
7335
|
+
/* @__PURE__ */ jsx37(
|
|
7307
7336
|
"input",
|
|
7308
7337
|
{
|
|
7309
7338
|
...inputRest,
|
|
@@ -7322,13 +7351,13 @@ function CheckboxRoot({
|
|
|
7322
7351
|
"aria-describedby": ids.describedBy
|
|
7323
7352
|
}
|
|
7324
7353
|
),
|
|
7325
|
-
/* @__PURE__ */
|
|
7354
|
+
/* @__PURE__ */ jsx37(
|
|
7326
7355
|
"span",
|
|
7327
7356
|
{
|
|
7328
7357
|
className: cx(choiceVisualClass, choiceBoxClass, Checkbox_default.control),
|
|
7329
7358
|
"data-shape": shape,
|
|
7330
7359
|
"aria-hidden": "true",
|
|
7331
|
-
children: /* @__PURE__ */
|
|
7360
|
+
children: /* @__PURE__ */ jsx37(
|
|
7332
7361
|
CheckMark,
|
|
7333
7362
|
{
|
|
7334
7363
|
state: indeterminate ? "indeterminate" : checked ? "checked" : "unchecked"
|
|
@@ -7343,7 +7372,7 @@ function CheckboxRoot({
|
|
|
7343
7372
|
}
|
|
7344
7373
|
CheckboxRoot.displayName = "Checkbox.Root";
|
|
7345
7374
|
function CheckboxLabel(props) {
|
|
7346
|
-
return /* @__PURE__ */
|
|
7375
|
+
return /* @__PURE__ */ jsx37(ChoiceLabel, { ...props });
|
|
7347
7376
|
}
|
|
7348
7377
|
CheckboxLabel.displayName = "Checkbox.Label";
|
|
7349
7378
|
function CheckboxIndicator({
|
|
@@ -7356,7 +7385,7 @@ function CheckboxIndicator({
|
|
|
7356
7385
|
...rest
|
|
7357
7386
|
}) {
|
|
7358
7387
|
const size = useControlSize(sizeProp);
|
|
7359
|
-
return /* @__PURE__ */
|
|
7388
|
+
return /* @__PURE__ */ jsx37(
|
|
7360
7389
|
"span",
|
|
7361
7390
|
{
|
|
7362
7391
|
"aria-hidden": "true",
|
|
@@ -7375,7 +7404,7 @@ function CheckboxIndicator({
|
|
|
7375
7404
|
disabled: disabled || void 0
|
|
7376
7405
|
}),
|
|
7377
7406
|
...rest,
|
|
7378
|
-
children: /* @__PURE__ */
|
|
7407
|
+
children: /* @__PURE__ */ jsx37(CheckMark, { state: indeterminate ? "indeterminate" : checked ? "checked" : "unchecked" })
|
|
7379
7408
|
}
|
|
7380
7409
|
);
|
|
7381
7410
|
}
|
|
@@ -7387,7 +7416,7 @@ var Checkbox = {
|
|
|
7387
7416
|
};
|
|
7388
7417
|
|
|
7389
7418
|
// src/components/thumbnail/Thumbnail.tsx
|
|
7390
|
-
import * as
|
|
7419
|
+
import * as React61 from "react";
|
|
7391
7420
|
|
|
7392
7421
|
// src/internal/formatClock.ts
|
|
7393
7422
|
var pad = (value) => String(value).padStart(2, "0");
|
|
@@ -7459,20 +7488,20 @@ var mediaDisk_default = {
|
|
|
7459
7488
|
};
|
|
7460
7489
|
|
|
7461
7490
|
// src/internal/mediaDisk.tsx
|
|
7462
|
-
import { jsx as
|
|
7491
|
+
import { jsx as jsx38 } from "react/jsx-runtime";
|
|
7463
7492
|
var mediaDiskClass = cx(fieldTierClass, mediaPill_default.ink, mediaDisk_default.disk);
|
|
7464
7493
|
function MediaPlayMark({
|
|
7465
7494
|
shown = true,
|
|
7466
7495
|
className
|
|
7467
7496
|
}) {
|
|
7468
|
-
return /* @__PURE__ */
|
|
7497
|
+
return /* @__PURE__ */ jsx38(
|
|
7469
7498
|
"span",
|
|
7470
7499
|
{
|
|
7471
7500
|
className: cx(mediaDiskClass, className),
|
|
7472
7501
|
"data-size": "l",
|
|
7473
7502
|
"data-shown": shown,
|
|
7474
7503
|
"aria-hidden": "true",
|
|
7475
|
-
children: /* @__PURE__ */
|
|
7504
|
+
children: /* @__PURE__ */ jsx38(Icon, { name: "action.play", fill: "currentColor" })
|
|
7476
7505
|
}
|
|
7477
7506
|
);
|
|
7478
7507
|
}
|
|
@@ -7483,7 +7512,7 @@ function firstFrame(src) {
|
|
|
7483
7512
|
}
|
|
7484
7513
|
|
|
7485
7514
|
// src/internal/mediaSession.ts
|
|
7486
|
-
import * as
|
|
7515
|
+
import * as React60 from "react";
|
|
7487
7516
|
var active = null;
|
|
7488
7517
|
var audible = (media) => !media.muted && media.volume > 0;
|
|
7489
7518
|
function claimPlayback(media) {
|
|
@@ -7495,7 +7524,7 @@ function releasePlayback(media) {
|
|
|
7495
7524
|
if (active === media) active = null;
|
|
7496
7525
|
}
|
|
7497
7526
|
function useMediaSession(ref) {
|
|
7498
|
-
|
|
7527
|
+
React60.useEffect(() => {
|
|
7499
7528
|
const media = ref.current;
|
|
7500
7529
|
if (!media) return;
|
|
7501
7530
|
const claim = () => claimPlayback(media);
|
|
@@ -7532,7 +7561,7 @@ var Thumbnail_default = {
|
|
|
7532
7561
|
};
|
|
7533
7562
|
|
|
7534
7563
|
// src/components/thumbnail/Thumbnail.tsx
|
|
7535
|
-
import { Fragment as Fragment14, jsx as
|
|
7564
|
+
import { Fragment as Fragment14, jsx as jsx39, jsxs as jsxs23 } from "react/jsx-runtime";
|
|
7536
7565
|
var slot2 = createImageSlot("Thumbnail", { image: Thumbnail_default.image, fallback: Thumbnail_default.fallback });
|
|
7537
7566
|
function ThumbnailRoot({
|
|
7538
7567
|
size: sizeProp,
|
|
@@ -7574,7 +7603,7 @@ function ThumbnailRoot({
|
|
|
7574
7603
|
if (selectable) {
|
|
7575
7604
|
const { onClick: onClick2 } = rest;
|
|
7576
7605
|
return provide(
|
|
7577
|
-
/* @__PURE__ */
|
|
7606
|
+
/* @__PURE__ */ jsx39(slot2.ImageSlotProvider, { children: /* @__PURE__ */ jsxs23(
|
|
7578
7607
|
"button",
|
|
7579
7608
|
{
|
|
7580
7609
|
...rest,
|
|
@@ -7589,7 +7618,7 @@ function ThumbnailRoot({
|
|
|
7589
7618
|
},
|
|
7590
7619
|
children: [
|
|
7591
7620
|
children,
|
|
7592
|
-
/* @__PURE__ */
|
|
7621
|
+
/* @__PURE__ */ jsx39("span", { className: cx(Thumbnail_default.check, mediaPill_default.choice), "aria-hidden": "true", children: /* @__PURE__ */ jsx39(Checkbox.Indicator, { checked, size: fullWidth ? "s" : compactTier(size) }) })
|
|
7593
7622
|
]
|
|
7594
7623
|
}
|
|
7595
7624
|
) })
|
|
@@ -7597,16 +7626,16 @@ function ThumbnailRoot({
|
|
|
7597
7626
|
}
|
|
7598
7627
|
if (asChild) {
|
|
7599
7628
|
return provide(
|
|
7600
|
-
/* @__PURE__ */
|
|
7629
|
+
/* @__PURE__ */ jsx39(slot2.ImageSlotProvider, { children: /* @__PURE__ */ jsx39(Slot, { ...rest, ...frame2, ref, children }) })
|
|
7601
7630
|
);
|
|
7602
7631
|
}
|
|
7603
7632
|
return provide(
|
|
7604
|
-
/* @__PURE__ */
|
|
7633
|
+
/* @__PURE__ */ jsx39(slot2.ImageSlotProvider, { children: /* @__PURE__ */ jsx39("div", { ref, ...frame2, ...rest, children }) })
|
|
7605
7634
|
);
|
|
7606
7635
|
}
|
|
7607
7636
|
ThumbnailRoot.displayName = "Thumbnail.Root";
|
|
7608
7637
|
function ThumbnailImage({ fit = "cover", ...rest }) {
|
|
7609
|
-
return /* @__PURE__ */
|
|
7638
|
+
return /* @__PURE__ */ jsx39(slot2.Image, { ...rest, "data-fit": fit });
|
|
7610
7639
|
}
|
|
7611
7640
|
ThumbnailImage.displayName = "Thumbnail.Image";
|
|
7612
7641
|
function ThumbnailVideoInner({
|
|
@@ -7626,22 +7655,22 @@ function ThumbnailVideoInner({
|
|
|
7626
7655
|
...rest
|
|
7627
7656
|
}) {
|
|
7628
7657
|
const report = slot2.useReportStatus();
|
|
7629
|
-
const mute =
|
|
7658
|
+
const mute = React61.useCallback(
|
|
7630
7659
|
(node) => {
|
|
7631
7660
|
if (node) node.muted = autoPlay && !controls;
|
|
7632
7661
|
},
|
|
7633
7662
|
[autoPlay, controls]
|
|
7634
7663
|
);
|
|
7635
|
-
const sessionRef =
|
|
7664
|
+
const sessionRef = React61.useRef(null);
|
|
7636
7665
|
useMediaSession(sessionRef);
|
|
7637
7666
|
const videoRef = useMergedRefs(mute, sessionRef, ref);
|
|
7638
7667
|
const media = useImageStatus(report, { onError });
|
|
7639
|
-
const [duration, setDuration] =
|
|
7640
|
-
const [playing, setPlaying] =
|
|
7641
|
-
const [still] =
|
|
7668
|
+
const [duration, setDuration] = React61.useState(null);
|
|
7669
|
+
const [playing, setPlaying] = React61.useState(false);
|
|
7670
|
+
const [still] = React61.useState(prefersReducedMotion);
|
|
7642
7671
|
const loops = autoPlay && !still && !controls;
|
|
7643
7672
|
return /* @__PURE__ */ jsxs23(Fragment14, { children: [
|
|
7644
|
-
/* @__PURE__ */
|
|
7673
|
+
/* @__PURE__ */ jsx39(
|
|
7645
7674
|
"video",
|
|
7646
7675
|
{
|
|
7647
7676
|
...rest,
|
|
@@ -7676,12 +7705,12 @@ function ThumbnailVideoInner({
|
|
|
7676
7705
|
}
|
|
7677
7706
|
}
|
|
7678
7707
|
),
|
|
7679
|
-
!controls && !loops ? /* @__PURE__ */
|
|
7680
|
-
!controls && duration !== null ? /* @__PURE__ */
|
|
7708
|
+
!controls && !loops ? /* @__PURE__ */ jsx39(MediaPlayMark, { shown: !playing, className: Thumbnail_default.play }) : null,
|
|
7709
|
+
!controls && duration !== null ? /* @__PURE__ */ jsx39("span", { className: cx(textRole_default.caption, mediaPill_default.pill, Thumbnail_default.duration), children: formatDuration(duration) }) : null
|
|
7681
7710
|
] });
|
|
7682
7711
|
}
|
|
7683
7712
|
function ThumbnailVideo(props) {
|
|
7684
|
-
return /* @__PURE__ */
|
|
7713
|
+
return /* @__PURE__ */ jsx39(ThumbnailVideoInner, { ...props }, props.src);
|
|
7685
7714
|
}
|
|
7686
7715
|
ThumbnailVideo.displayName = "Thumbnail.Video";
|
|
7687
7716
|
var ThumbnailFallback = slot2.Fallback;
|
|
@@ -7693,10 +7722,10 @@ var Thumbnail = {
|
|
|
7693
7722
|
};
|
|
7694
7723
|
|
|
7695
7724
|
// src/components/select/Select.tsx
|
|
7696
|
-
import * as
|
|
7725
|
+
import * as React65 from "react";
|
|
7697
7726
|
|
|
7698
7727
|
// src/hooks/useLoadMore.ts
|
|
7699
|
-
import * as
|
|
7728
|
+
import * as React62 from "react";
|
|
7700
7729
|
var LIST_ROOT_MARGIN = "0px 0px 48px 0px";
|
|
7701
7730
|
var NONE2 = /* @__PURE__ */ Symbol("none");
|
|
7702
7731
|
function useLoadMore({
|
|
@@ -7706,19 +7735,19 @@ function useLoadMore({
|
|
|
7706
7735
|
round,
|
|
7707
7736
|
rootMargin = LIST_ROOT_MARGIN
|
|
7708
7737
|
}) {
|
|
7709
|
-
const sentinelRef =
|
|
7710
|
-
const handlerRef =
|
|
7738
|
+
const sentinelRef = React62.useRef(null);
|
|
7739
|
+
const handlerRef = React62.useRef(onLoadMore);
|
|
7711
7740
|
handlerRef.current = onLoadMore;
|
|
7712
|
-
const askedIn =
|
|
7713
|
-
|
|
7741
|
+
const askedIn = React62.useRef(NONE2);
|
|
7742
|
+
React62.useLayoutEffect(() => {
|
|
7714
7743
|
if (!enabled) askedIn.current = NONE2;
|
|
7715
7744
|
}, [enabled]);
|
|
7716
|
-
const request =
|
|
7745
|
+
const request = React62.useCallback(() => {
|
|
7717
7746
|
if (!enabled || Object.is(askedIn.current, round)) return;
|
|
7718
7747
|
askedIn.current = round;
|
|
7719
7748
|
void handlerRef.current?.();
|
|
7720
7749
|
}, [enabled, round]);
|
|
7721
|
-
|
|
7750
|
+
React62.useEffect(() => {
|
|
7722
7751
|
const root = scrollRef.current;
|
|
7723
7752
|
const target = sentinelRef.current;
|
|
7724
7753
|
if (!enabled || !root || !target || typeof IntersectionObserver === "undefined") return;
|
|
@@ -7735,10 +7764,10 @@ function useLoadMore({
|
|
|
7735
7764
|
}
|
|
7736
7765
|
|
|
7737
7766
|
// src/internal/MenuGroup.tsx
|
|
7738
|
-
import * as
|
|
7739
|
-
import { jsx as
|
|
7767
|
+
import * as React63 from "react";
|
|
7768
|
+
import { jsx as jsx40, jsxs as jsxs24 } from "react/jsx-runtime";
|
|
7740
7769
|
function MenuGroup({ label, className, children, ...rest }) {
|
|
7741
|
-
const labelId =
|
|
7770
|
+
const labelId = React63.useId();
|
|
7742
7771
|
return (
|
|
7743
7772
|
// biome-ignore lint/a11y/useSemanticElements: role="group" inside a menu / listbox; <fieldset> is not allowed there
|
|
7744
7773
|
/* @__PURE__ */ jsxs24(
|
|
@@ -7749,7 +7778,7 @@ function MenuGroup({ label, className, children, ...rest }) {
|
|
|
7749
7778
|
"aria-labelledby": label != null ? labelId : void 0,
|
|
7750
7779
|
className: cx(menu_default.group, className),
|
|
7751
7780
|
children: [
|
|
7752
|
-
label != null ? /* @__PURE__ */
|
|
7781
|
+
label != null ? /* @__PURE__ */ jsx40("div", { id: labelId, role: "presentation", className: cx(textRole_default.caption, menu_default.groupLabel), children: label }) : null,
|
|
7753
7782
|
children
|
|
7754
7783
|
]
|
|
7755
7784
|
}
|
|
@@ -7783,22 +7812,22 @@ var Select_default = {
|
|
|
7783
7812
|
};
|
|
7784
7813
|
|
|
7785
7814
|
// src/components/select/SelectItem.tsx
|
|
7786
|
-
import * as
|
|
7815
|
+
import * as React64 from "react";
|
|
7787
7816
|
|
|
7788
7817
|
// src/components/select/selectContext.ts
|
|
7789
7818
|
var normalize = (text) => text.trim().toLocaleLowerCase();
|
|
7790
7819
|
var [SelectProvider, useSelectContext] = createComponentContext("Select");
|
|
7791
7820
|
|
|
7792
7821
|
// src/components/select/SelectItem.tsx
|
|
7793
|
-
import { jsx as
|
|
7822
|
+
import { jsx as jsx41, jsxs as jsxs25 } from "react/jsx-runtime";
|
|
7794
7823
|
function SelectItemIcon({ className, ...rest }) {
|
|
7795
|
-
return /* @__PURE__ */
|
|
7824
|
+
return /* @__PURE__ */ jsx41("span", { "aria-hidden": "true", className: cx(menu_default.itemIcon, iconSlotClass, className), ...rest });
|
|
7796
7825
|
}
|
|
7797
7826
|
SelectItemIcon.displayName = "Select.ItemIcon";
|
|
7798
|
-
var OptionQueryContext =
|
|
7827
|
+
var OptionQueryContext = React64.createContext("");
|
|
7799
7828
|
function SelectItemText({ children, className, ...rest }) {
|
|
7800
|
-
const query =
|
|
7801
|
-
return /* @__PURE__ */
|
|
7829
|
+
const query = React64.useContext(OptionQueryContext);
|
|
7830
|
+
return /* @__PURE__ */ jsx41("span", { ...rest, className: cx(Select_default.itemTitle, className), children: highlightChildren(children, query) });
|
|
7802
7831
|
}
|
|
7803
7832
|
SelectItemText.displayName = "Select.ItemText";
|
|
7804
7833
|
function SelectItemDescription({
|
|
@@ -7806,12 +7835,12 @@ function SelectItemDescription({
|
|
|
7806
7835
|
className,
|
|
7807
7836
|
...rest
|
|
7808
7837
|
}) {
|
|
7809
|
-
const query =
|
|
7810
|
-
return /* @__PURE__ */
|
|
7838
|
+
const query = React64.useContext(OptionQueryContext);
|
|
7839
|
+
return /* @__PURE__ */ jsx41("span", { ...rest, className: cx(Select_default.itemDescription, className), children: highlightChildren(children, query) });
|
|
7811
7840
|
}
|
|
7812
7841
|
SelectItemDescription.displayName = "Select.ItemDescription";
|
|
7813
7842
|
function SelectItemMeta({ children, className, ...rest }) {
|
|
7814
|
-
return /* @__PURE__ */
|
|
7843
|
+
return /* @__PURE__ */ jsx41("span", { ...rest, className: cx(Select_default.itemMeta, className), children });
|
|
7815
7844
|
}
|
|
7816
7845
|
SelectItemMeta.displayName = "Select.ItemMeta";
|
|
7817
7846
|
function splitItemChildren(children) {
|
|
@@ -7824,11 +7853,11 @@ function splitItemChildren(children) {
|
|
|
7824
7853
|
description: ""
|
|
7825
7854
|
};
|
|
7826
7855
|
let plain = "";
|
|
7827
|
-
for (const child of
|
|
7828
|
-
if (!
|
|
7856
|
+
for (const child of React64.Children.toArray(children)) {
|
|
7857
|
+
if (!React64.isValidElement(child)) {
|
|
7829
7858
|
plain += nodeText(child);
|
|
7830
7859
|
parts.body.push(child);
|
|
7831
|
-
} else if (child.type ===
|
|
7860
|
+
} else if (child.type === React64.Fragment) {
|
|
7832
7861
|
const inner = splitItemChildren(child.props.children);
|
|
7833
7862
|
parts.leading.push(...inner.leading);
|
|
7834
7863
|
parts.body.push(...inner.body);
|
|
@@ -7858,7 +7887,7 @@ function splitItemChildren(children) {
|
|
|
7858
7887
|
}
|
|
7859
7888
|
function sizeMedia(leading, size) {
|
|
7860
7889
|
return leading.map(
|
|
7861
|
-
(node) =>
|
|
7890
|
+
(node) => React64.isValidElement(node) && (node.type === Thumbnail.Root || node.type === Avatar.Root) ? React64.cloneElement(node, {
|
|
7862
7891
|
size: node.props.size ?? tierMappings.rowMedia[size],
|
|
7863
7892
|
className: cx(Select_default.media, node.props.className),
|
|
7864
7893
|
"aria-hidden": true
|
|
@@ -7883,7 +7912,7 @@ function SelectItem({
|
|
|
7883
7912
|
const haystack = normalize(`${resolvedLabel} ${parts.description} ${keywords ?? ""}`);
|
|
7884
7913
|
const isSelected = selected.includes(value);
|
|
7885
7914
|
const isHighlighted = useStoreSlice(highlight, (current) => current === value);
|
|
7886
|
-
const nodeRef =
|
|
7915
|
+
const nodeRef = React64.useRef(null);
|
|
7887
7916
|
const setRefs = useMergedRefs(nodeRef, ref);
|
|
7888
7917
|
useListboxItem(
|
|
7889
7918
|
registry,
|
|
@@ -7922,11 +7951,11 @@ function SelectItem({
|
|
|
7922
7951
|
rich: parts.rich || void 0
|
|
7923
7952
|
}),
|
|
7924
7953
|
children: [
|
|
7925
|
-
multiple ? /* @__PURE__ */
|
|
7954
|
+
multiple ? /* @__PURE__ */ jsx41(Checkbox.Indicator, { checked: isSelected, disabled, size: stepDown(size) }) : null,
|
|
7926
7955
|
sizeMedia(parts.leading, size),
|
|
7927
|
-
/* @__PURE__ */
|
|
7956
|
+
/* @__PURE__ */ jsx41("span", { className: Select_default.itemText, children: /* @__PURE__ */ jsx41(OptionQueryContext.Provider, { value: query, children: highlightChildren(parts.body, query) }) }),
|
|
7928
7957
|
parts.meta,
|
|
7929
|
-
multiple ? null : /* @__PURE__ */
|
|
7958
|
+
multiple ? null : /* @__PURE__ */ jsx41("span", { className: menu_default.check, "aria-hidden": "true", children: isSelected ? /* @__PURE__ */ jsx41(Icon, { name: "action.check" }) : null })
|
|
7930
7959
|
]
|
|
7931
7960
|
}
|
|
7932
7961
|
)
|
|
@@ -7946,10 +7975,10 @@ function SelectAction({
|
|
|
7946
7975
|
...rest
|
|
7947
7976
|
}) {
|
|
7948
7977
|
const { highlight, listboxId, setOpen, size, registry } = useSelectContext();
|
|
7949
|
-
const value = `${ACTION_PREFIX}${
|
|
7978
|
+
const value = `${ACTION_PREFIX}${React64.useId()}`;
|
|
7950
7979
|
const isHighlighted = useStoreSlice(highlight, (current) => current === value);
|
|
7951
7980
|
const parts = splitItemChildren(children);
|
|
7952
|
-
const nodeRef =
|
|
7981
|
+
const nodeRef = React64.useRef(null);
|
|
7953
7982
|
const setRefs = useMergedRefs(nodeRef, ref);
|
|
7954
7983
|
useListboxItem(
|
|
7955
7984
|
registry,
|
|
@@ -7994,7 +8023,7 @@ function SelectAction({
|
|
|
7994
8023
|
}),
|
|
7995
8024
|
children: [
|
|
7996
8025
|
sizeMedia(parts.leading, size),
|
|
7997
|
-
/* @__PURE__ */
|
|
8026
|
+
/* @__PURE__ */ jsx41("span", { className: Select_default.itemText, children: parts.body })
|
|
7998
8027
|
]
|
|
7999
8028
|
}
|
|
8000
8029
|
)
|
|
@@ -8003,7 +8032,7 @@ function SelectAction({
|
|
|
8003
8032
|
SelectAction.displayName = "Select.Action";
|
|
8004
8033
|
|
|
8005
8034
|
// src/components/select/Select.tsx
|
|
8006
|
-
import { Fragment as Fragment16, jsx as
|
|
8035
|
+
import { Fragment as Fragment16, jsx as jsx42, jsxs as jsxs26 } from "react/jsx-runtime";
|
|
8007
8036
|
var SELECT_LABELS = {
|
|
8008
8037
|
search: "\u041F\u043E\u0438\u0441\u043A",
|
|
8009
8038
|
empty: "\u041D\u0438\u0447\u0435\u0433\u043E \u043D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u043E",
|
|
@@ -8067,7 +8096,7 @@ function SelectRoot(props) {
|
|
|
8067
8096
|
const changes = usePendingChanges(stored, takeNext);
|
|
8068
8097
|
const value = changes.shown;
|
|
8069
8098
|
const saving = changes.pending.length > 0;
|
|
8070
|
-
const [announcement, setAnnouncement] =
|
|
8099
|
+
const [announcement, setAnnouncement] = React65.useState("");
|
|
8071
8100
|
const onValueChange = props.onValueChange;
|
|
8072
8101
|
const commit = (next) => {
|
|
8073
8102
|
if (saving || Object.is(next, value)) return;
|
|
@@ -8082,9 +8111,9 @@ function SelectRoot(props) {
|
|
|
8082
8111
|
onReject: () => setAnnouncement(labels.changeFailed)
|
|
8083
8112
|
});
|
|
8084
8113
|
};
|
|
8085
|
-
const commitRef =
|
|
8114
|
+
const commitRef = React65.useRef(commit);
|
|
8086
8115
|
commitRef.current = commit;
|
|
8087
|
-
const selected =
|
|
8116
|
+
const selected = React65.useMemo(
|
|
8088
8117
|
() => Array.isArray(value) ? value : value ? [value] : [],
|
|
8089
8118
|
[value]
|
|
8090
8119
|
);
|
|
@@ -8096,18 +8125,18 @@ function SelectRoot(props) {
|
|
|
8096
8125
|
defaultValue: defaultSearch,
|
|
8097
8126
|
onChange: onSearchChange
|
|
8098
8127
|
});
|
|
8099
|
-
const triggerRef =
|
|
8100
|
-
const inSegment =
|
|
8101
|
-
const segment =
|
|
8128
|
+
const triggerRef = React65.useRef(null);
|
|
8129
|
+
const inSegment = React65.useContext(InputSegmentContext);
|
|
8130
|
+
const segment = React65.useMemo(
|
|
8102
8131
|
() => inSegment ? { label: ariaLabel } : null,
|
|
8103
8132
|
[inSegment, ariaLabel]
|
|
8104
8133
|
);
|
|
8105
|
-
const wasOpenRef =
|
|
8106
|
-
|
|
8134
|
+
const wasOpenRef = React65.useRef(isOpen);
|
|
8135
|
+
React65.useEffect(() => {
|
|
8107
8136
|
if (wasOpenRef.current && !isOpen) setQuery("");
|
|
8108
8137
|
wasOpenRef.current = isOpen;
|
|
8109
8138
|
}, [isOpen, setQuery]);
|
|
8110
|
-
const pick =
|
|
8139
|
+
const pick = React65.useCallback(
|
|
8111
8140
|
(optionValue) => {
|
|
8112
8141
|
if (multiple) {
|
|
8113
8142
|
const list = Array.isArray(value) ? value : [];
|
|
@@ -8121,8 +8150,8 @@ function SelectRoot(props) {
|
|
|
8121
8150
|
},
|
|
8122
8151
|
[multiple, value, setOpen]
|
|
8123
8152
|
);
|
|
8124
|
-
const clear =
|
|
8125
|
-
const context =
|
|
8153
|
+
const clear = React65.useCallback(() => commitRef.current(multiple ? [] : ""), [multiple]);
|
|
8154
|
+
const context = React65.useMemo(
|
|
8126
8155
|
() => ({
|
|
8127
8156
|
size,
|
|
8128
8157
|
invalid: ids.invalid,
|
|
@@ -8193,13 +8222,13 @@ function SelectRoot(props) {
|
|
|
8193
8222
|
]
|
|
8194
8223
|
);
|
|
8195
8224
|
const body = /* @__PURE__ */ jsxs26(Fragment16, { children: [
|
|
8196
|
-
/* @__PURE__ */
|
|
8197
|
-
name ? (selected.length > 0 || multiple ? selected : [""]).map((item) => /* @__PURE__ */
|
|
8198
|
-
/* @__PURE__ */
|
|
8225
|
+
/* @__PURE__ */ jsx42(SelectProvider, { value: context, children }),
|
|
8226
|
+
name ? (selected.length > 0 || multiple ? selected : [""]).map((item) => /* @__PURE__ */ jsx42("input", { type: "hidden", name, value: item, disabled }, item)) : null,
|
|
8227
|
+
/* @__PURE__ */ jsx42(VisuallyHidden, { live: "polite", children: announcement })
|
|
8199
8228
|
] });
|
|
8200
8229
|
if (segment) {
|
|
8201
8230
|
return tier.provide(
|
|
8202
|
-
/* @__PURE__ */
|
|
8231
|
+
/* @__PURE__ */ jsx42(
|
|
8203
8232
|
"div",
|
|
8204
8233
|
{
|
|
8205
8234
|
...rest,
|
|
@@ -8212,7 +8241,7 @@ function SelectRoot(props) {
|
|
|
8212
8241
|
);
|
|
8213
8242
|
}
|
|
8214
8243
|
return tier.provide(
|
|
8215
|
-
/* @__PURE__ */
|
|
8244
|
+
/* @__PURE__ */ jsx42(
|
|
8216
8245
|
FieldFrame,
|
|
8217
8246
|
{
|
|
8218
8247
|
...rest,
|
|
@@ -8269,8 +8298,8 @@ function SelectTrigger({
|
|
|
8269
8298
|
useListboxView(registry);
|
|
8270
8299
|
const valueText = selected.map(registry.labelOf).join(", ");
|
|
8271
8300
|
const segmentName = segment?.label ? valueText ? `${segment.label}: ${valueText}` : segment.label : void 0;
|
|
8272
|
-
const parts =
|
|
8273
|
-
const iconOnly = parts.some((node) =>
|
|
8301
|
+
const parts = React65.Children.toArray(children);
|
|
8302
|
+
const iconOnly = parts.some((node) => React65.isValidElement(node) && node.type === SelectTriggerIcon) && !parts.some((node) => React65.isValidElement(node) && node.type === SelectValue);
|
|
8274
8303
|
const busy = loading || saving;
|
|
8275
8304
|
const showClear = clearable && selected.length > 0 && !disabled && !busy;
|
|
8276
8305
|
const clearPresence = usePartPresence({ present: showClear, axis: "inline" });
|
|
@@ -8326,13 +8355,13 @@ function SelectTrigger({
|
|
|
8326
8355
|
children: [
|
|
8327
8356
|
/* @__PURE__ */ jsxs26("span", { className: Select_default.triggerMain, children: [
|
|
8328
8357
|
children,
|
|
8329
|
-
iconOnly ? /* @__PURE__ */
|
|
8358
|
+
iconOnly ? /* @__PURE__ */ jsx42(SelectValue, { className: visuallyHiddenClass }) : null
|
|
8330
8359
|
] }),
|
|
8331
8360
|
showClear ? (
|
|
8332
8361
|
// A segment, not a button: interactive content inside a <button> is invalid. The keyboard
|
|
8333
8362
|
// clears with Delete / Backspace on the trigger. A touch target in height, like the clear
|
|
8334
8363
|
// segment of a field (`FieldAction`).
|
|
8335
|
-
/* @__PURE__ */
|
|
8364
|
+
/* @__PURE__ */ jsx42(
|
|
8336
8365
|
"span",
|
|
8337
8366
|
{
|
|
8338
8367
|
ref: clearPresence.ref,
|
|
@@ -8345,11 +8374,11 @@ function SelectTrigger({
|
|
|
8345
8374
|
event.stopPropagation();
|
|
8346
8375
|
clear();
|
|
8347
8376
|
},
|
|
8348
|
-
children: /* @__PURE__ */
|
|
8377
|
+
children: /* @__PURE__ */ jsx42(Icon, { name: "action.close" })
|
|
8349
8378
|
}
|
|
8350
8379
|
)
|
|
8351
8380
|
) : null,
|
|
8352
|
-
/* @__PURE__ */
|
|
8381
|
+
/* @__PURE__ */ jsx42("span", { className: Select_default.chevron, "aria-hidden": "true", children: /* @__PURE__ */ jsx42(GlyphSwap, { children: busy ? /* @__PURE__ */ jsx42(Spinner, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx42(Icon, { name: "nav.chevronDown" }) }) })
|
|
8353
8382
|
]
|
|
8354
8383
|
}
|
|
8355
8384
|
);
|
|
@@ -8373,13 +8402,13 @@ function SelectValue({ renderValue, className, ...rest }) {
|
|
|
8373
8402
|
}),
|
|
8374
8403
|
children: [
|
|
8375
8404
|
sizeMedia(parts.leading, size),
|
|
8376
|
-
/* @__PURE__ */
|
|
8405
|
+
/* @__PURE__ */ jsx42("span", { className: Select_default.valueBody, children: parts.body }),
|
|
8377
8406
|
parts.meta
|
|
8378
8407
|
]
|
|
8379
8408
|
}
|
|
8380
8409
|
);
|
|
8381
8410
|
}
|
|
8382
|
-
return /* @__PURE__ */
|
|
8411
|
+
return /* @__PURE__ */ jsx42(
|
|
8383
8412
|
"span",
|
|
8384
8413
|
{
|
|
8385
8414
|
...rest,
|
|
@@ -8391,19 +8420,19 @@ function SelectValue({ renderValue, className, ...rest }) {
|
|
|
8391
8420
|
}
|
|
8392
8421
|
SelectValue.displayName = "Select.Value";
|
|
8393
8422
|
function SelectTriggerIcon({ className, ...rest }) {
|
|
8394
|
-
return /* @__PURE__ */
|
|
8423
|
+
return /* @__PURE__ */ jsx42("span", { "aria-hidden": "true", className: cx(Select_default.triggerIcon, className), ...rest });
|
|
8395
8424
|
}
|
|
8396
8425
|
SelectTriggerIcon.displayName = "Select.TriggerIcon";
|
|
8397
8426
|
var LOADING_ROWS2 = 4;
|
|
8398
8427
|
var LOADING_MORE_ROWS = 2;
|
|
8399
8428
|
function SkeletonRows({ count }) {
|
|
8400
|
-
return Array.from({ length: count }, (_, index) => /* @__PURE__ */
|
|
8429
|
+
return Array.from({ length: count }, (_, index) => /* @__PURE__ */ jsx42(
|
|
8401
8430
|
"div",
|
|
8402
8431
|
{
|
|
8403
8432
|
"aria-hidden": "true",
|
|
8404
8433
|
className: cx(menu_default.item, menu_default.skeletonRow),
|
|
8405
8434
|
"data-skeleton": "",
|
|
8406
|
-
children: /* @__PURE__ */
|
|
8435
|
+
children: /* @__PURE__ */ jsx42(Skeleton, {})
|
|
8407
8436
|
},
|
|
8408
8437
|
index
|
|
8409
8438
|
));
|
|
@@ -8433,12 +8462,12 @@ function SelectContent({ searchable = false, className, children, ...rest }) {
|
|
|
8433
8462
|
labels,
|
|
8434
8463
|
registry
|
|
8435
8464
|
} = useSelectContext();
|
|
8436
|
-
const listboxRef =
|
|
8465
|
+
const listboxRef = React65.useRef(null);
|
|
8437
8466
|
const setListboxRef = useMergedRefs(listboxRef);
|
|
8438
8467
|
const items = [];
|
|
8439
8468
|
const actions = [];
|
|
8440
|
-
for (const child of
|
|
8441
|
-
(
|
|
8469
|
+
for (const child of React65.Children.toArray(children)) {
|
|
8470
|
+
(React65.isValidElement(child) && child.type === SelectAction ? actions : items).push(child);
|
|
8442
8471
|
}
|
|
8443
8472
|
const actionsId = `${listboxId}-actions`;
|
|
8444
8473
|
const floating = useFloatingLayer({
|
|
@@ -8465,7 +8494,7 @@ function SelectContent({ searchable = false, className, children, ...rest }) {
|
|
|
8465
8494
|
});
|
|
8466
8495
|
const setSentinelRef = useMergedRefs(sentinelRef);
|
|
8467
8496
|
const lastOption = view.navigable.filter((id) => !isActionValue(id)).at(-1);
|
|
8468
|
-
|
|
8497
|
+
React65.useEffect(() => {
|
|
8469
8498
|
if (highlighted !== void 0 && highlighted === lastOption) requestMore();
|
|
8470
8499
|
}, [highlighted, lastOption, requestMore]);
|
|
8471
8500
|
const handleKeyDown = (event) => {
|
|
@@ -8496,7 +8525,7 @@ function SelectContent({ searchable = false, className, children, ...rest }) {
|
|
|
8496
8525
|
});
|
|
8497
8526
|
if (moved !== null) revealHighlighted(registry.nodeOf(moved));
|
|
8498
8527
|
};
|
|
8499
|
-
if (!floating.mounted) return /* @__PURE__ */
|
|
8528
|
+
if (!floating.mounted) return /* @__PURE__ */ jsx42("div", { hidden: true, children: items });
|
|
8500
8529
|
const activeDescendant = isOpen && highlighted !== void 0 ? optionDomId(listboxId, highlighted) : void 0;
|
|
8501
8530
|
return /* @__PURE__ */ jsxs26(
|
|
8502
8531
|
FloatingPanel,
|
|
@@ -8511,11 +8540,11 @@ function SelectContent({ searchable = false, className, children, ...rest }) {
|
|
|
8511
8540
|
searchable ? (
|
|
8512
8541
|
// The permanent focus of the panel: no ring, the caret is the indicator (foundation §7).
|
|
8513
8542
|
/* @__PURE__ */ jsxs26("div", { className: cx(menu_default.searchRow, Select_default.search), children: [
|
|
8514
|
-
/* @__PURE__ */
|
|
8515
|
-
/* @__PURE__ */
|
|
8543
|
+
/* @__PURE__ */ jsx42(Icon, { name: "action.search", size: "s" }),
|
|
8544
|
+
/* @__PURE__ */ jsx42(
|
|
8516
8545
|
"input",
|
|
8517
8546
|
{
|
|
8518
|
-
type: "
|
|
8547
|
+
type: "search",
|
|
8519
8548
|
className: menu_default.searchInput,
|
|
8520
8549
|
value: query,
|
|
8521
8550
|
placeholder: labels.search,
|
|
@@ -8523,7 +8552,7 @@ function SelectContent({ searchable = false, className, children, ...rest }) {
|
|
|
8523
8552
|
"aria-controls": region === "error" ? void 0 : listboxId,
|
|
8524
8553
|
"aria-activedescendant": activeDescendant,
|
|
8525
8554
|
"aria-autocomplete": "list",
|
|
8526
|
-
|
|
8555
|
+
...AUTOFILL_OFF,
|
|
8527
8556
|
spellCheck: false,
|
|
8528
8557
|
"data-autofocus": "",
|
|
8529
8558
|
onChange: (event) => setQuery(event.target.value)
|
|
@@ -8531,10 +8560,10 @@ function SelectContent({ searchable = false, className, children, ...rest }) {
|
|
|
8531
8560
|
)
|
|
8532
8561
|
] })
|
|
8533
8562
|
) : null,
|
|
8534
|
-
/* @__PURE__ */
|
|
8535
|
-
/* @__PURE__ */
|
|
8536
|
-
onRetry ? /* @__PURE__ */
|
|
8537
|
-
/* @__PURE__ */
|
|
8563
|
+
/* @__PURE__ */ jsx42(RegionSwap, { state: region, fill: true, children: region === "error" ? /* @__PURE__ */ jsxs26(EmptyPage.Root, { layout: "compact", size, role: "alert", children: [
|
|
8564
|
+
/* @__PURE__ */ jsx42(EmptyPage.Title, { as: "p", children: loadError }),
|
|
8565
|
+
onRetry ? /* @__PURE__ */ jsx42(EmptyPage.Actions, { children: /* @__PURE__ */ jsxs26(Button.Root, { variant: "soft", tone: "neutral", onClick: onRetry, children: [
|
|
8566
|
+
/* @__PURE__ */ jsx42(Button.Icon, { children: /* @__PURE__ */ jsx42(Icon, { name: "action.refresh" }) }),
|
|
8538
8567
|
labels.retry
|
|
8539
8568
|
] }) }) : null
|
|
8540
8569
|
] }) : /* @__PURE__ */ jsxs26(Fragment16, { children: [
|
|
@@ -8554,22 +8583,22 @@ function SelectContent({ searchable = false, className, children, ...rest }) {
|
|
|
8554
8583
|
className: Select_default.listbox,
|
|
8555
8584
|
children: [
|
|
8556
8585
|
items,
|
|
8557
|
-
region === "loading" ? /* @__PURE__ */
|
|
8558
|
-
region === "ready" && hasMore ? /* @__PURE__ */
|
|
8559
|
-
region === "ready" && loadingMore ? /* @__PURE__ */
|
|
8586
|
+
region === "loading" ? /* @__PURE__ */ jsx42(SkeletonRows, { count: LOADING_ROWS2 }) : null,
|
|
8587
|
+
region === "ready" && hasMore ? /* @__PURE__ */ jsx42("div", { ref: setSentinelRef, "aria-hidden": "true", className: menu_default.loadSentinel }) : null,
|
|
8588
|
+
region === "ready" && loadingMore ? /* @__PURE__ */ jsx42(SkeletonRows, { count: LOADING_MORE_ROWS }) : null
|
|
8560
8589
|
]
|
|
8561
8590
|
}
|
|
8562
8591
|
),
|
|
8563
|
-
region === "ready" && isEmpty ? /* @__PURE__ */
|
|
8592
|
+
region === "ready" && isEmpty ? /* @__PURE__ */ jsx42(EmptyPage.Root, { layout: "compact", size, role: "status", children: /* @__PURE__ */ jsx42(EmptyPage.Title, { as: "p", children: labels.empty }) }) : null,
|
|
8564
8593
|
actions.length > 0 ? (
|
|
8565
8594
|
// Owned by the listbox (`aria-owns`): its options for assistive tech, pinned under
|
|
8566
8595
|
// the scroller and the empty state for the eye.
|
|
8567
8596
|
// biome-ignore lint/a11y/useSemanticElements: a group of options inside a listbox, not a form fieldset
|
|
8568
|
-
/* @__PURE__ */
|
|
8597
|
+
/* @__PURE__ */ jsx42("div", { id: actionsId, role: "group", className: Select_default.actions, children: actions })
|
|
8569
8598
|
) : null
|
|
8570
8599
|
] }) }),
|
|
8571
|
-
/* @__PURE__ */
|
|
8572
|
-
/* @__PURE__ */
|
|
8600
|
+
/* @__PURE__ */ jsx42(VisuallyHidden, { live: "polite", children: loading || loadingMore ? labels.loading : "" }),
|
|
8601
|
+
/* @__PURE__ */ jsx42(HighlightOnOpen, {})
|
|
8573
8602
|
]
|
|
8574
8603
|
}
|
|
8575
8604
|
);
|
|
@@ -8578,9 +8607,9 @@ SelectContent.displayName = "Select.Content";
|
|
|
8578
8607
|
function HighlightOnOpen() {
|
|
8579
8608
|
const { isOpen, query, filter, selected, registry, highlight } = useSelectContext();
|
|
8580
8609
|
const view = useListboxView(registry, query, filter);
|
|
8581
|
-
const latest =
|
|
8610
|
+
const latest = React65.useRef({ query, filter, selected });
|
|
8582
8611
|
latest.current = { query, filter, selected };
|
|
8583
|
-
|
|
8612
|
+
React65.useLayoutEffect(() => {
|
|
8584
8613
|
if (!isOpen) return;
|
|
8585
8614
|
const { query: text, filter: filtered, selected: picked } = latest.current;
|
|
8586
8615
|
const first = registry.view(text, filtered).navigable.find((id) => picked.includes(id));
|
|
@@ -8588,12 +8617,12 @@ function HighlightOnOpen() {
|
|
|
8588
8617
|
if (first !== void 0) revealHighlighted(registry.nodeOf(first));
|
|
8589
8618
|
return () => highlight.set(void 0);
|
|
8590
8619
|
}, [isOpen, registry, highlight]);
|
|
8591
|
-
const latestView =
|
|
8620
|
+
const latestView = React65.useRef(view);
|
|
8592
8621
|
latestView.current = view;
|
|
8593
|
-
|
|
8622
|
+
React65.useLayoutEffect(() => {
|
|
8594
8623
|
if (query !== "") highlight.set(latestView.current.navigable[0]);
|
|
8595
8624
|
}, [query, highlight]);
|
|
8596
|
-
|
|
8625
|
+
React65.useLayoutEffect(() => {
|
|
8597
8626
|
if (query === "") return;
|
|
8598
8627
|
const current = highlight.get();
|
|
8599
8628
|
if (current === void 0 || isActionValue(current) || !view.navigable.includes(current)) {
|
|
@@ -8603,11 +8632,11 @@ function HighlightOnOpen() {
|
|
|
8603
8632
|
return null;
|
|
8604
8633
|
}
|
|
8605
8634
|
function SelectGroup({ className, ...rest }) {
|
|
8606
|
-
return /* @__PURE__ */
|
|
8635
|
+
return /* @__PURE__ */ jsx42(MenuGroup, { ...rest, className: cx(Select_default.group, className) });
|
|
8607
8636
|
}
|
|
8608
8637
|
SelectGroup.displayName = "Select.Group";
|
|
8609
8638
|
function SelectSeparator({ className, ...rest }) {
|
|
8610
|
-
return /* @__PURE__ */
|
|
8639
|
+
return /* @__PURE__ */ jsx42(Divider, { ...rest, className: cx(menu_default.separator, Select_default.separator, className) });
|
|
8611
8640
|
}
|
|
8612
8641
|
SelectSeparator.displayName = "Select.Separator";
|
|
8613
8642
|
var Select = {
|
|
@@ -8627,7 +8656,7 @@ var Select = {
|
|
|
8627
8656
|
};
|
|
8628
8657
|
|
|
8629
8658
|
// src/internal/swatch.tsx
|
|
8630
|
-
import * as
|
|
8659
|
+
import * as React66 from "react";
|
|
8631
8660
|
|
|
8632
8661
|
// src/internal/swatch.module.css
|
|
8633
8662
|
var swatch_default = {
|
|
@@ -8644,7 +8673,7 @@ var swatch_default = {
|
|
|
8644
8673
|
};
|
|
8645
8674
|
|
|
8646
8675
|
// src/internal/swatch.tsx
|
|
8647
|
-
import { Fragment as Fragment17, jsx as
|
|
8676
|
+
import { Fragment as Fragment17, jsx as jsx43, jsxs as jsxs27 } from "react/jsx-runtime";
|
|
8648
8677
|
var COLOR_PRESETS = [
|
|
8649
8678
|
{ value: "#ef4444", label: "\u041A\u0440\u0430\u0441\u043D\u044B\u0439" },
|
|
8650
8679
|
{ value: "#f97316", label: "\u041E\u0440\u0430\u043D\u0436\u0435\u0432\u044B\u0439" },
|
|
@@ -8677,7 +8706,7 @@ var PALETTE_COLOR_NAMES = {
|
|
|
8677
8706
|
};
|
|
8678
8707
|
var PALETTE_ORDER = Object.keys(PALETTE_COLOR_NAMES);
|
|
8679
8708
|
function useSwatchOptions(presets, allowEmpty, emptyLabel) {
|
|
8680
|
-
return
|
|
8709
|
+
return React66.useMemo(
|
|
8681
8710
|
() => [
|
|
8682
8711
|
...presets.map((preset) => ({ ...preset, contrast: markContrast(preset.value) })),
|
|
8683
8712
|
...allowEmpty ? [{ value: null, label: emptyLabel, contrast: "surface" }] : []
|
|
@@ -8686,7 +8715,7 @@ function useSwatchOptions(presets, allowEmpty, emptyLabel) {
|
|
|
8686
8715
|
);
|
|
8687
8716
|
}
|
|
8688
8717
|
function usePaletteOptions(palette, allowEmpty, emptyLabel, names) {
|
|
8689
|
-
return
|
|
8718
|
+
return React66.useMemo(
|
|
8690
8719
|
() => [
|
|
8691
8720
|
...palette.map((hue) => ({ value: hue, label: names[hue], contrast: "hue" })),
|
|
8692
8721
|
...allowEmpty ? [{ value: null, label: emptyLabel, contrast: "surface" }] : []
|
|
@@ -8700,9 +8729,9 @@ var swatchTierClass = cx(fieldTierClass, swatch_default.tier);
|
|
|
8700
8729
|
var swatchGridClass = swatch_default.grid;
|
|
8701
8730
|
var checkerboardClass = swatch_default.checkerboard;
|
|
8702
8731
|
function SwatchFill({ value, hue = false }) {
|
|
8703
|
-
if (value == null) return /* @__PURE__ */
|
|
8704
|
-
if (hue) return /* @__PURE__ */
|
|
8705
|
-
return /* @__PURE__ */
|
|
8732
|
+
if (value == null) return /* @__PURE__ */ jsx43("span", { "aria-hidden": true, className: swatch_default.checker });
|
|
8733
|
+
if (hue) return /* @__PURE__ */ jsx43("span", { "aria-hidden": true, className: cx(swatch_default.fill, swatch_default.hueFill) });
|
|
8734
|
+
return /* @__PURE__ */ jsx43("svg", { className: swatch_default.fill, "aria-hidden": "true", viewBox: "0 0 1 1", preserveAspectRatio: "none", children: /* @__PURE__ */ jsx43("rect", { width: "1", height: "1", fill: value }) });
|
|
8706
8735
|
}
|
|
8707
8736
|
function SwatchContent({
|
|
8708
8737
|
value,
|
|
@@ -8710,12 +8739,12 @@ function SwatchContent({
|
|
|
8710
8739
|
hue = false
|
|
8711
8740
|
}) {
|
|
8712
8741
|
return /* @__PURE__ */ jsxs27(Fragment17, { children: [
|
|
8713
|
-
/* @__PURE__ */
|
|
8714
|
-
/* @__PURE__ */
|
|
8742
|
+
/* @__PURE__ */ jsx43(SwatchFill, { value, hue }),
|
|
8743
|
+
/* @__PURE__ */ jsx43(CheckMark, { state: selected ? "checked" : "unchecked", className: swatch_default.check })
|
|
8715
8744
|
] });
|
|
8716
8745
|
}
|
|
8717
8746
|
function SwatchChip({ value, className, ...rest }) {
|
|
8718
|
-
return /* @__PURE__ */
|
|
8747
|
+
return /* @__PURE__ */ jsx43("span", { ...rest, "aria-hidden": true, className: cx(swatch_default.chip, className), children: /* @__PURE__ */ jsx43(SwatchFill, { value }) });
|
|
8719
8748
|
}
|
|
8720
8749
|
function parseHexColor(text) {
|
|
8721
8750
|
const hex = /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(text.trim())?.[1]?.toLowerCase();
|
|
@@ -8769,15 +8798,15 @@ function balancedColumns(count, width, cell, gap) {
|
|
|
8769
8798
|
return Math.ceil(count / rows);
|
|
8770
8799
|
}
|
|
8771
8800
|
function useBalancedColumns(gridRef, count, cellSelector) {
|
|
8772
|
-
const [columns, setColumns] =
|
|
8773
|
-
const measure =
|
|
8801
|
+
const [columns, setColumns] = React66.useState();
|
|
8802
|
+
const measure = React66.useCallback(() => {
|
|
8774
8803
|
const grid = gridRef.current;
|
|
8775
8804
|
if (!grid) return;
|
|
8776
8805
|
const cell = grid.querySelector(cellSelector)?.offsetHeight ?? 0;
|
|
8777
8806
|
const gap = Number.parseFloat(getComputedStyle(grid).columnGap) || 0;
|
|
8778
8807
|
setColumns(cell > 0 ? balancedColumns(count, grid.clientWidth, cell, gap) : void 0);
|
|
8779
8808
|
}, [gridRef, count, cellSelector]);
|
|
8780
|
-
|
|
8809
|
+
React66.useLayoutEffect(measure, [measure]);
|
|
8781
8810
|
useResizeEffect(gridRef, measure);
|
|
8782
8811
|
return columns;
|
|
8783
8812
|
}
|
|
@@ -8787,14 +8816,14 @@ function firstRowLength(items) {
|
|
|
8787
8816
|
return Math.max(1, count === -1 ? items.length : count);
|
|
8788
8817
|
}
|
|
8789
8818
|
function useSwatchGrid(count) {
|
|
8790
|
-
const items =
|
|
8791
|
-
const itemRef =
|
|
8819
|
+
const items = React66.useRef([]);
|
|
8820
|
+
const itemRef = React66.useCallback(
|
|
8792
8821
|
(index) => (node) => {
|
|
8793
8822
|
items.current[index] = node;
|
|
8794
8823
|
},
|
|
8795
8824
|
[]
|
|
8796
8825
|
);
|
|
8797
|
-
const move =
|
|
8826
|
+
const move = React66.useCallback(
|
|
8798
8827
|
(event, from, columns) => {
|
|
8799
8828
|
const focused = document.activeElement;
|
|
8800
8829
|
const current = focused instanceof HTMLElement ? items.current.indexOf(focused) : -1;
|
|
@@ -8811,14 +8840,14 @@ function useSwatchGrid(count) {
|
|
|
8811
8840
|
},
|
|
8812
8841
|
[count]
|
|
8813
8842
|
);
|
|
8814
|
-
const focus =
|
|
8843
|
+
const focus = React66.useCallback((index) => {
|
|
8815
8844
|
items.current[index]?.focus({ preventScroll: true });
|
|
8816
8845
|
}, []);
|
|
8817
8846
|
return { itemRef, move, focus };
|
|
8818
8847
|
}
|
|
8819
8848
|
|
|
8820
8849
|
// src/components/color-swatches/ColorSwatches.tsx
|
|
8821
|
-
import * as
|
|
8850
|
+
import * as React67 from "react";
|
|
8822
8851
|
|
|
8823
8852
|
// src/components/color-swatches/ColorSwatches.module.css
|
|
8824
8853
|
var ColorSwatches_default = {
|
|
@@ -8826,7 +8855,7 @@ var ColorSwatches_default = {
|
|
|
8826
8855
|
};
|
|
8827
8856
|
|
|
8828
8857
|
// src/components/color-swatches/ColorSwatches.tsx
|
|
8829
|
-
import { jsx as
|
|
8858
|
+
import { jsx as jsx44, jsxs as jsxs28 } from "react/jsx-runtime";
|
|
8830
8859
|
var COLOR_SWATCHES_LABELS = {
|
|
8831
8860
|
group: "\u0426\u0432\u0435\u0442",
|
|
8832
8861
|
empty: "\u0411\u0435\u0437 \u0446\u0432\u0435\u0442\u0430",
|
|
@@ -8843,7 +8872,7 @@ function ColorSwatches(props) {
|
|
|
8843
8872
|
palette = PALETTE_ORDER,
|
|
8844
8873
|
...rest
|
|
8845
8874
|
} = props;
|
|
8846
|
-
return /* @__PURE__ */
|
|
8875
|
+
return /* @__PURE__ */ jsx44(
|
|
8847
8876
|
SwatchGrid,
|
|
8848
8877
|
{
|
|
8849
8878
|
...rest,
|
|
@@ -8886,7 +8915,7 @@ function SwatchGrid({
|
|
|
8886
8915
|
const disabled = useInheritedDisabled(disabledProp);
|
|
8887
8916
|
const frameSize = useControlSize(void 0);
|
|
8888
8917
|
const merged = useLabels(COLOR_SWATCHES_LABELS, labelsProp);
|
|
8889
|
-
const labels =
|
|
8918
|
+
const labels = React67.useMemo(
|
|
8890
8919
|
() => ({
|
|
8891
8920
|
...merged,
|
|
8892
8921
|
colorNames: { ...COLOR_SWATCHES_LABELS.colorNames, ...labelsProp?.colorNames }
|
|
@@ -8905,14 +8934,14 @@ function SwatchGrid({
|
|
|
8905
8934
|
const selectedIndex = options.findIndex((option) => sameColor(option.value, value));
|
|
8906
8935
|
const focusIndex = Math.max(0, selectedIndex);
|
|
8907
8936
|
const grid = useSwatchGrid(options.length);
|
|
8908
|
-
const gridRef =
|
|
8937
|
+
const gridRef = React67.useRef(null);
|
|
8909
8938
|
const columns = useBalancedColumns(gridRef, options.length, "[role='radio']");
|
|
8910
8939
|
const labelledBy = ariaLabelledBy ?? ids.labelledBy;
|
|
8911
8940
|
const onKeyDown2 = (event) => {
|
|
8912
8941
|
const next = grid.move(event, focusIndex);
|
|
8913
8942
|
if (next !== null) setValue(options[next]?.value ?? null);
|
|
8914
8943
|
};
|
|
8915
|
-
return /* @__PURE__ */
|
|
8944
|
+
return /* @__PURE__ */ jsx44(
|
|
8916
8945
|
FieldFrame,
|
|
8917
8946
|
{
|
|
8918
8947
|
...rest,
|
|
@@ -8957,7 +8986,7 @@ function SwatchGrid({
|
|
|
8957
8986
|
const selected = index === selectedIndex;
|
|
8958
8987
|
return (
|
|
8959
8988
|
// biome-ignore lint/a11y/useSemanticElements: a swatch is a styled button in a roving radiogroup; a native radio cannot carry the color fill and check mark
|
|
8960
|
-
/* @__PURE__ */
|
|
8989
|
+
/* @__PURE__ */ jsx44(
|
|
8961
8990
|
"button",
|
|
8962
8991
|
{
|
|
8963
8992
|
ref: grid.itemRef(index),
|
|
@@ -8975,13 +9004,13 @@ function SwatchGrid({
|
|
|
8975
9004
|
color: hues ? option.value ?? void 0 : void 0
|
|
8976
9005
|
}),
|
|
8977
9006
|
onClick: () => setValue(option.value),
|
|
8978
|
-
children: /* @__PURE__ */
|
|
9007
|
+
children: /* @__PURE__ */ jsx44(SwatchContent, { value: option.value, selected, hue: hues })
|
|
8979
9008
|
},
|
|
8980
9009
|
option.value ?? "empty"
|
|
8981
9010
|
)
|
|
8982
9011
|
);
|
|
8983
9012
|
}),
|
|
8984
|
-
name ? /* @__PURE__ */
|
|
9013
|
+
name ? /* @__PURE__ */ jsx44("input", { type: "hidden", name, value: value ?? "" }) : null
|
|
8985
9014
|
]
|
|
8986
9015
|
}
|
|
8987
9016
|
)
|
|
@@ -9118,6 +9147,9 @@ export {
|
|
|
9118
9147
|
useFieldFrame,
|
|
9119
9148
|
FieldFrame,
|
|
9120
9149
|
FieldCounter,
|
|
9150
|
+
AUTOFILL_OFF,
|
|
9151
|
+
AutofillScope,
|
|
9152
|
+
useAutofill,
|
|
9121
9153
|
FieldActionButton,
|
|
9122
9154
|
FieldCopyButton,
|
|
9123
9155
|
setControlValue,
|