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