@astryxdesign/core 0.4.0-canary.d6d345c → 0.4.0-canary.dad87f5
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/AspectRatio/AspectRatio.d.ts.map +1 -1
- package/dist/AspectRatio/AspectRatio.js +1 -2
- package/dist/AspectRatio/index.d.ts.map +1 -1
- package/dist/AspectRatio/index.js +1 -2
- package/dist/Badge/Badge.d.ts.map +1 -1
- package/dist/Badge/Badge.js +1 -2
- package/dist/Badge/index.d.ts.map +1 -1
- package/dist/Badge/index.js +1 -2
- package/dist/Blockquote/Blockquote.d.ts.map +1 -1
- package/dist/Blockquote/Blockquote.js +1 -2
- package/dist/Blockquote/index.d.ts.map +1 -1
- package/dist/Blockquote/index.js +1 -2
- package/dist/Card/Card.d.ts.map +1 -1
- package/dist/Card/Card.js +1 -2
- package/dist/Card/index.d.ts.map +1 -1
- package/dist/Card/index.js +1 -2
- package/dist/Center/Center.d.ts.map +1 -1
- package/dist/Center/Center.js +1 -2
- package/dist/Center/index.d.ts.map +1 -1
- package/dist/Center/index.js +1 -2
- package/dist/Code/Code.d.ts.map +1 -1
- package/dist/Code/Code.js +1 -2
- package/dist/CommandPalette/CommandPalette.d.ts.map +1 -1
- package/dist/CommandPalette/CommandPalette.js +5 -0
- package/dist/Field/PanelSearchInput.d.ts +81 -0
- package/dist/Field/PanelSearchInput.d.ts.map +1 -0
- package/dist/Field/PanelSearchInput.js +151 -0
- package/dist/Grid/Grid.d.ts.map +1 -1
- package/dist/Grid/Grid.js +1 -2
- package/dist/Grid/index.d.ts.map +1 -1
- package/dist/Grid/index.js +1 -2
- package/dist/Icon/globalIconRegistry.d.ts +5 -4
- package/dist/Icon/globalIconRegistry.d.ts.map +1 -1
- package/dist/Icon/globalIconRegistry.js +5 -4
- package/dist/MultiSelector/MultiSelector.d.ts.map +1 -1
- package/dist/MultiSelector/MultiSelector.js +87 -76
- package/dist/Section/Section.d.ts.map +1 -1
- package/dist/Section/Section.js +1 -2
- package/dist/Section/index.d.ts.map +1 -1
- package/dist/Section/index.js +1 -2
- package/dist/Selector/Selector.d.ts.map +1 -1
- package/dist/Selector/Selector.js +71 -72
- package/dist/Skeleton/Skeleton.d.ts.map +1 -1
- package/dist/Skeleton/Skeleton.js +1 -2
- package/dist/Skeleton/index.d.ts.map +1 -1
- package/dist/Skeleton/index.js +1 -2
- package/dist/Table/TableRow.d.ts +1 -1
- package/dist/Table/TableRow.d.ts.map +1 -1
- package/dist/Table/TableRow.js +4 -2
- package/dist/VisuallyHidden/VisuallyHidden.d.ts.map +1 -1
- package/dist/VisuallyHidden/VisuallyHidden.js +1 -2
- package/dist/VisuallyHidden/index.d.ts.map +1 -1
- package/dist/VisuallyHidden/index.js +1 -2
- package/dist/astryx.css +2 -0
- package/dist/astryx.umd.js +44 -44
- package/dist/astryx.umd.js.map +4 -4
- package/dist/utils/interactionModality.d.ts +34 -0
- package/dist/utils/interactionModality.d.ts.map +1 -0
- package/dist/utils/interactionModality.js +70 -0
- package/package.json +2 -2
- package/src/AppShell/AppShell.doc.mjs +3 -0
- package/src/AspectRatio/AspectRatio.tsx +0 -2
- package/src/AspectRatio/index.ts +0 -2
- package/src/Badge/Badge.tsx +0 -2
- package/src/Badge/index.ts +0 -2
- package/src/Blockquote/Blockquote.tsx +0 -2
- package/src/Blockquote/index.ts +0 -2
- package/src/Card/Card.tsx +0 -2
- package/src/Card/index.ts +0 -2
- package/src/Center/Center.tsx +0 -2
- package/src/Center/index.ts +0 -2
- package/src/Code/Code.tsx +0 -2
- package/src/CommandPalette/CommandPalette.test.tsx +54 -0
- package/src/CommandPalette/CommandPalette.tsx +5 -0
- package/src/Field/PanelSearchInput.tsx +271 -0
- package/src/Grid/Grid.tsx +0 -2
- package/src/Grid/index.ts +0 -2
- package/src/Icon/globalIconRegistry.tsx +5 -4
- package/src/Indicator/Indicator.doc.mjs +1 -1
- package/src/MultiSelector/MultiSelector.doc.mjs +2 -0
- package/src/MultiSelector/MultiSelector.test.tsx +128 -2
- package/src/MultiSelector/MultiSelector.tsx +123 -99
- package/src/Section/Section.tsx +0 -2
- package/src/Section/index.ts +0 -2
- package/src/Selector/Selector.doc.mjs +2 -0
- package/src/Selector/Selector.test.tsx +160 -2
- package/src/Selector/Selector.tsx +101 -86
- package/src/Skeleton/Skeleton.tsx +0 -2
- package/src/Skeleton/index.ts +0 -2
- package/src/Table/Table.test.tsx +31 -0
- package/src/Table/TableRow.tsx +6 -0
- package/src/TopNav/TopNavMegaMenu.doc.mjs +5 -0
- package/src/VisuallyHidden/VisuallyHidden.tsx +0 -2
- package/src/VisuallyHidden/index.ts +0 -2
- package/src/serverSafeComponents.test.ts +665 -0
- package/src/utils/interactionModality.ts +74 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AspectRatio.d.ts","sourceRoot":"","sources":["../../src/AspectRatio/AspectRatio.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"AspectRatio.d.ts","sourceRoot":"","sources":["../../src/AspectRatio/AspectRatio.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAErC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAI5C;;;;;GAKG;AACH,MAAM,MAAM,gBAAgB,GAAG,WAAW,GAAG,SAAS,CAAC;AAEvD;;;;;;;GAOG;AACH,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE5D,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACjE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;;;;;;;;;;;;;OAeG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC;IAEzB;;;;;;;;;;;;;;;;;;;;;;OAsBG;IACH,GAAG,CAAC,EAAE,cAAc,CAAC;IAErB;;;;;;;OAOG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAkCD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,KAAmB,EACnB,GAAG,EACH,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,gBAAgB,+BA2BlB;yBArCe,WAAW"}
|
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
// Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
2
2
|
|
|
3
|
-
'use client';
|
|
4
|
-
|
|
5
3
|
/**
|
|
6
4
|
* @file AspectRatio.tsx
|
|
7
5
|
* @input Uses React, stylex
|
|
@@ -15,6 +13,7 @@
|
|
|
15
13
|
* - /apps/storybook/stories/AspectRatio.stories.tsx
|
|
16
14
|
* - /packages/cli/assets/templates/blocks/components/AspectRatio/ (showcase blocks)
|
|
17
15
|
*/
|
|
16
|
+
|
|
18
17
|
import * as stylex from '@stylexjs/stylex';
|
|
19
18
|
import { mergeProps } from "../utils/index.js";
|
|
20
19
|
import { themeProps } from "../utils/themeProps.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/AspectRatio/index.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/AspectRatio/index.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAC1C,YAAY,EACV,gBAAgB,EAChB,gBAAgB,EAChB,cAAc,GACf,MAAM,eAAe,CAAC"}
|
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
// Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
2
2
|
|
|
3
|
-
'use client';
|
|
4
|
-
|
|
5
3
|
/**
|
|
6
4
|
* @file index.ts
|
|
7
5
|
* @input Imports from AspectRatio.tsx
|
|
@@ -10,4 +8,5 @@
|
|
|
10
8
|
*
|
|
11
9
|
* SYNC: When modified, update /packages/core/src/AspectRatio/AspectRatio.doc.mjs
|
|
12
10
|
*/
|
|
11
|
+
|
|
13
12
|
export { AspectRatio } from "./AspectRatio.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../src/Badge/Badge.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../src/Badge/Badge.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAW5C,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,SAAS,CAAC;AAwF7C;;;GAGG;AACH,MAAM,MAAM,YAAY,GAAG,MAAM,eAAe,CAAC;AAEjD,MAAM,WAAW,UAAW,SAAQ,SAAS,CAAC,eAAe,CAAC;IAC5D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;IACjC;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,KAAK,CAAC,EACpB,OAAmB,EACnB,KAAK,EACL,IAAI,EACJ,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,UAAU,+BAeZ;yBAxBe,KAAK"}
|
package/dist/Badge/Badge.js
CHANGED
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
// Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
2
2
|
|
|
3
|
-
'use client';
|
|
4
|
-
|
|
5
3
|
/**
|
|
6
4
|
* @file Badge.tsx
|
|
7
5
|
* @input Uses React, HTMLAttributes
|
|
@@ -15,6 +13,7 @@
|
|
|
15
13
|
* - /apps/storybook/stories/Badge.stories.tsx (storybook stories)
|
|
16
14
|
* - /packages/cli/assets/templates/blocks/components/Badge/ (showcase blocks)
|
|
17
15
|
*/
|
|
16
|
+
|
|
18
17
|
import * as stylex from '@stylexjs/stylex';
|
|
19
18
|
import "../theme/tokens.stylex.js";
|
|
20
19
|
import { colorVars, spacingVars, radiusVars, fontWeightVars, typeScaleVars } from "../theme/tokens.stylex.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Badge/index.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Badge/index.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,eAAe;IAC9B,OAAO,EAAE,IAAI,CAAC;IACd,IAAI,EAAE,IAAI,CAAC;IACX,OAAO,EAAE,IAAI,CAAC;IACd,OAAO,EAAE,IAAI,CAAC;IACd,KAAK,EAAE,IAAI,CAAC;IACZ,IAAI,EAAE,IAAI,CAAC;IACX,IAAI,EAAE,IAAI,CAAC;IACX,KAAK,EAAE,IAAI,CAAC;IACZ,MAAM,EAAE,IAAI,CAAC;IACb,IAAI,EAAE,IAAI,CAAC;IACX,MAAM,EAAE,IAAI,CAAC;IACb,GAAG,EAAE,IAAI,CAAC;IACV,IAAI,EAAE,IAAI,CAAC;IACX,MAAM,EAAE,IAAI,CAAC;CACd;AAED,OAAO,EAAC,KAAK,EAAC,MAAM,SAAS,CAAC;AAC9B,YAAY,EAAC,UAAU,EAAE,YAAY,EAAC,MAAM,SAAS,CAAC"}
|
package/dist/Badge/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Blockquote.d.ts","sourceRoot":"","sources":["../../src/Blockquote/Blockquote.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Blockquote.d.ts","sourceRoot":"","sources":["../../src/Blockquote/Blockquote.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAM5C,MAAM,WAAW,eAAgB,SAAQ,SAAS,CAAC,gBAAgB,CAAC;IAClE,qDAAqD;IACrD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC,gCAAgC;IAChC,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAuBD;;;;;;;;;;GAUG;AACH,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,IAAI,EACJ,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,eAAe,+BAmBjB;yBA3Be,UAAU"}
|
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
// Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
2
2
|
|
|
3
|
-
'use client';
|
|
4
|
-
|
|
5
3
|
/**
|
|
6
4
|
* @file Blockquote.tsx
|
|
7
5
|
* @input Uses React, stylex, spacing and color tokens
|
|
@@ -14,6 +12,7 @@
|
|
|
14
12
|
* - /apps/storybook/stories/Blockquote.stories.tsx
|
|
15
13
|
* - /packages/cli/assets/templates/blocks/components/Blockquote/ (showcase blocks)
|
|
16
14
|
*/
|
|
15
|
+
|
|
17
16
|
import * as stylex from '@stylexjs/stylex';
|
|
18
17
|
import "../theme/tokens.stylex.js";
|
|
19
18
|
import { colorVars, spacingVars, typeScaleVars } from "../theme/tokens.stylex.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Blockquote/index.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Blockquote/index.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,EAAC,UAAU,EAAC,MAAM,cAAc,CAAC;AACxC,YAAY,EAAC,eAAe,EAAC,MAAM,cAAc,CAAC"}
|
package/dist/Blockquote/index.js
CHANGED
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
// Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
2
2
|
|
|
3
|
-
'use client';
|
|
4
|
-
|
|
5
3
|
/**
|
|
6
4
|
* @file index.ts
|
|
7
5
|
* @input Imports from Blockquote.tsx
|
|
@@ -10,4 +8,5 @@
|
|
|
10
8
|
*
|
|
11
9
|
* SYNC: When modified, update /packages/core/src/Blockquote/Blockquote.doc.mjs
|
|
12
10
|
*/
|
|
11
|
+
|
|
13
12
|
export { Blockquote } from "./Blockquote.js";
|
package/dist/Card/Card.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/Card/Card.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/Card/Card.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAiBrC,OAAO,KAAK,EAAC,SAAS,EAAE,SAAS,EAAE,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAEtE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAO5C;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,WAAW,GACnB,SAAS,GACT,aAAa,GACb,OAAO,GACP,MAAM,GACN,MAAM,GACN,MAAM,GACN,OAAO,GACP,QAAQ,GACR,MAAM,GACN,QAAQ,GACR,KAAK,GACL,MAAM,GACN,QAAQ,CAAC;AA2Gb,YAAY,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAE9C,MAAM,WAAW,SAAU,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC1D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;;OAIG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,wBAAgB,IAAI,CAAC,EACnB,KAAK,EACL,MAAM,EACN,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,OAAO,EACP,OAAmB,EACnB,SAAkB,EAClB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,SAAS,+BA2DX;yBAzEe,IAAI"}
|
package/dist/Card/Card.js
CHANGED
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
// Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
2
2
|
|
|
3
|
-
'use client';
|
|
4
|
-
|
|
5
3
|
/**
|
|
6
4
|
* @file Card.tsx
|
|
7
5
|
* @input Uses container utility, StyleX
|
|
@@ -14,6 +12,7 @@
|
|
|
14
12
|
* - /apps/storybook/stories/Card.stories.tsx (storybook stories)
|
|
15
13
|
* - /packages/cli/assets/templates/blocks/components/Card/ (showcase blocks)
|
|
16
14
|
*/
|
|
15
|
+
|
|
17
16
|
import * as stylex from '@stylexjs/stylex';
|
|
18
17
|
import "../theme/tokens.stylex.js";
|
|
19
18
|
import { borderVars, colorVars, radiusVars, shadowVars } from "../theme/tokens.stylex.js";
|
package/dist/Card/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Card/index.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Card/index.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,EAAC,IAAI,EAAC,MAAM,QAAQ,CAAC;AAC5B,YAAY,EAAC,SAAS,EAAE,WAAW,EAAE,SAAS,EAAC,MAAM,QAAQ,CAAC"}
|
package/dist/Card/index.js
CHANGED
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
// Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
2
2
|
|
|
3
|
-
'use client';
|
|
4
|
-
|
|
5
3
|
/**
|
|
6
4
|
* @file index.ts
|
|
7
5
|
* @input Imports Card component
|
|
@@ -10,4 +8,5 @@
|
|
|
10
8
|
*
|
|
11
9
|
* SYNC: When modified, update /packages/core/src/Card/Card.doc.mjs
|
|
12
10
|
*/
|
|
11
|
+
|
|
13
12
|
export { Card } from "./Card.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Center.d.ts","sourceRoot":"","sources":["../../src/Center/Center.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Center.d.ts","sourceRoot":"","sources":["../../src/Center/Center.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,KAAK,EAAC,SAAS,EAAE,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAsC3D,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,YAAY,GAAG,UAAU,CAAC;AAE5D,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC5D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;OAGG;IACH,aAAa,CAAC,EAAE,WAAW,CAAC;IAE5B;;;OAGG;IACH,YAAY,CAAC,EAAE,WAAW,CAAC;IAE3B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,MAAM,CAAC,EACrB,IAAa,EACb,KAAK,EACL,MAAM,EACN,QAAQ,EACR,SAAS,EACT,OAAO,EACP,aAAa,EACb,YAAY,EACZ,QAAgB,EAChB,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,WAAW,+BAgCb;yBAhDe,MAAM"}
|
package/dist/Center/Center.js
CHANGED
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
// Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
2
2
|
|
|
3
|
-
'use client';
|
|
4
|
-
|
|
5
3
|
/**
|
|
6
4
|
* @file Center.tsx
|
|
7
5
|
* @input Uses React, StyleX for centering styles, Layout padding.stylex for spacing-scale padding
|
|
@@ -14,6 +12,7 @@
|
|
|
14
12
|
* - /apps/storybook/stories/Center.stories.tsx
|
|
15
13
|
* - /packages/cli/assets/templates/blocks/components/Center/ (showcase blocks)
|
|
16
14
|
*/
|
|
15
|
+
|
|
17
16
|
import * as stylex from '@stylexjs/stylex';
|
|
18
17
|
import { paddingInlineStyles, paddingBlockStyles } from "../Layout/padding.stylex.js";
|
|
19
18
|
import { mergeProps } from "../utils/index.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Center/index.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Center/index.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,EAAC,MAAM,EAAC,MAAM,UAAU,CAAC;AAChC,YAAY,EAAC,WAAW,EAAE,UAAU,EAAC,MAAM,UAAU,CAAC"}
|
package/dist/Center/index.js
CHANGED
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
// Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
2
2
|
|
|
3
|
-
'use client';
|
|
4
|
-
|
|
5
3
|
/**
|
|
6
4
|
* @file index.ts
|
|
7
5
|
* @input Imports Center component
|
|
@@ -10,4 +8,5 @@
|
|
|
10
8
|
*
|
|
11
9
|
* SYNC: When modified, update /packages/core/src/Center/Center.doc.mjs
|
|
12
10
|
*/
|
|
11
|
+
|
|
13
12
|
export { Center } from "./Center.js";
|
package/dist/Code/Code.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Code.d.ts","sourceRoot":"","sources":["../../src/Code/Code.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Code.d.ts","sourceRoot":"","sources":["../../src/Code/Code.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAUrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAuC5C,2FAA2F;AAC3F,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,CAAC;AAE5D,gFAAgF;AAChF,MAAM,MAAM,QAAQ,GAAG,SAAS,CAAC;AAEjC,MAAM,WAAW,SAAU,SAAQ,SAAS,CAAC,WAAW,CAAC;IACvD,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,mBAAmB;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,IAAI,CAAC,EACnB,QAAQ,EACR,KAAiB,EACjB,IAAI,EACJ,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,SAAS,+BAmBX;yBA5Be,IAAI"}
|
package/dist/Code/Code.js
CHANGED
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
// Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
2
2
|
|
|
3
|
-
'use client';
|
|
4
|
-
|
|
5
3
|
/**
|
|
6
4
|
* @file Code.tsx
|
|
7
5
|
* @input Uses React, StyleX, theme tokens
|
|
@@ -13,6 +11,7 @@
|
|
|
13
11
|
* - /packages/cli/assets/templates/blocks/components/Code/ (showcase blocks)
|
|
14
12
|
* - /packages/cli/assets/templates/blocks/components/CodeBlock/ (showcase blocks)
|
|
15
13
|
*/
|
|
14
|
+
|
|
16
15
|
import * as stylex from '@stylexjs/stylex';
|
|
17
16
|
import "../theme/tokens.stylex.js";
|
|
18
17
|
import { colorVars, spacingVars, radiusVars, typographyVars, typeScaleVars } from "../theme/tokens.stylex.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CommandPalette.d.ts","sourceRoot":"","sources":["../../src/CommandPalette/CommandPalette.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;GASG;AAEH,OAAO,EASL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAC,YAAY,EAAE,cAAc,EAAC,MAAM,cAAc,CAAC;AAU/D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAI5C,MAAM,WAAW,mBAAmB,CAClC,CAAC,SAAS,cAAc,GAAG,cAAc,CACzC,SAAQ,IAAI,CAAC,SAAS,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC;IACtD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC,2CAA2C;IAC3C,MAAM,EAAE,OAAO,CAAC;IAEhB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,0DAA0D;IAC1D,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAExC;;;;OAIG;IACH,YAAY,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;IAE9B;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;;OAIG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,UAAU,EAAE,OAAO,KAAK,SAAS,CAAC;IAEzD;;;OAGG;IACH,eAAe,CAAC,EAAE,SAAS,CAAC;IAE5B;;;OAGG;IACH,kBAAkB,CAAC,EAAE,SAAS,CAAC;IAE/B,mDAAmD;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,8CAA8C;IAC9C,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAExC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC7B;AA6GD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,cAAc,CAAC,CAAC,SAAS,cAAc,GAAG,cAAc,EAAE,EACxE,GAAG,EACH,MAAM,EACN,QAAQ,EACR,YAAY,EACZ,YAAY,EACZ,KAAK,EACL,MAAM,EACN,UAAU,EACV,eAAe,EAAE,wBAAwB,EACzC,kBAAkB,EAAE,2BAA2B,EAC/C,KAAK,EAAE,eAAe,EACtB,aAAa,EACb,KAAK,EAAE,cAAc,EACrB,KAAW,EACX,SAAe,EACf,GAAG,IAAI,EACR,EAAE,mBAAmB,CAAC,CAAC,CAAC,+
|
|
1
|
+
{"version":3,"file":"CommandPalette.d.ts","sourceRoot":"","sources":["../../src/CommandPalette/CommandPalette.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;GASG;AAEH,OAAO,EASL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAC,YAAY,EAAE,cAAc,EAAC,MAAM,cAAc,CAAC;AAU/D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAI5C,MAAM,WAAW,mBAAmB,CAClC,CAAC,SAAS,cAAc,GAAG,cAAc,CACzC,SAAQ,IAAI,CAAC,SAAS,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC;IACtD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC,2CAA2C;IAC3C,MAAM,EAAE,OAAO,CAAC;IAEhB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,0DAA0D;IAC1D,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAExC;;;;OAIG;IACH,YAAY,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;IAE9B;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;;OAIG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,UAAU,EAAE,OAAO,KAAK,SAAS,CAAC;IAEzD;;;OAGG;IACH,eAAe,CAAC,EAAE,SAAS,CAAC;IAE5B;;;OAGG;IACH,kBAAkB,CAAC,EAAE,SAAS,CAAC;IAE/B,mDAAmD;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,8CAA8C;IAC9C,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAExC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC7B;AA6GD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,cAAc,CAAC,CAAC,SAAS,cAAc,GAAG,cAAc,EAAE,EACxE,GAAG,EACH,MAAM,EACN,QAAQ,EACR,YAAY,EACZ,YAAY,EACZ,KAAK,EACL,MAAM,EACN,UAAU,EACV,eAAe,EAAE,wBAAwB,EACzC,kBAAkB,EAAE,2BAA2B,EAC/C,KAAK,EAAE,eAAe,EACtB,aAAa,EACb,KAAK,EAAE,cAAc,EACrB,KAAW,EACX,SAAe,EACf,GAAG,IAAI,EACR,EAAE,mBAAmB,CAAC,CAAC,CAAC,+BAsUxB;yBAvVe,cAAc"}
|
|
@@ -201,6 +201,11 @@ export function CommandPalette({
|
|
|
201
201
|
// Must match the render order of ItemRenderer.
|
|
202
202
|
const selectableItems = useMemo(() => buildSelectableItems(optimisticResults), [optimisticResults]);
|
|
203
203
|
const handleClose = useCallback(() => {
|
|
204
|
+
// Invalidate any in-flight search. Most sources don't implement cancel(),
|
|
205
|
+
// and a response that resolves after close would still pass runSearch's
|
|
206
|
+
// version check and re-commit the stale query/results into the closed
|
|
207
|
+
// palette (visible as a ghost query on reopen while bootstrap is pending).
|
|
208
|
+
searchVersionRef.current++;
|
|
204
209
|
// Reset both committed and optimistic search on close
|
|
205
210
|
setSearch('');
|
|
206
211
|
setSearchResults([]);
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @file PanelSearchInput.tsx
|
|
3
|
+
* @input Uses React, StyleX, Icon, InputClearButton, theme tokens
|
|
4
|
+
* @output Exports PanelSearchInput — the search row that sits at the top of a
|
|
5
|
+
* dropdown panel
|
|
6
|
+
* @position Shared internal primitive; used by Selector and MultiSelector
|
|
7
|
+
*
|
|
8
|
+
* A dropdown panel is already a bordered, elevated surface. Nesting a bordered
|
|
9
|
+
* TextInput inside it draws a second box within that box, so the field reads as
|
|
10
|
+
* a control dropped into the menu rather than part of it. This row is the
|
|
11
|
+
* seamless alternative — magnifier, borderless input, clear button — separated
|
|
12
|
+
* from the options by a divider the panel owns.
|
|
13
|
+
*
|
|
14
|
+
* The field is shaped like the option rows under it rather than like a form
|
|
15
|
+
* input: same inset from the panel edge, same `--radius-element` corners, same
|
|
16
|
+
* height. The focus ring is drawn on that rounded box, so focus reads as "this
|
|
17
|
+
* row of the panel" — the same visual language as an item's highlight — instead
|
|
18
|
+
* of ringing the whole panel header. It appears for keyboard focus only; see
|
|
19
|
+
* `fieldKeyboardFocus` for why `:focus-visible` alone does not mean that.
|
|
20
|
+
*
|
|
21
|
+
* ┌─ panel ──────────────────┐
|
|
22
|
+
* │ ┌──────────────────────┐ │ ← field: rounded, inset, item-sized
|
|
23
|
+
* │ │ ⌕ Search… ✕ │ │
|
|
24
|
+
* │ └──────────────────────┘ │
|
|
25
|
+
* ├──────────────────────────┤ ← divider (full-bleed)
|
|
26
|
+
* │ ┌──────────────────────┐ │
|
|
27
|
+
* │ │ Apple │ │ ← option row: same box
|
|
28
|
+
*
|
|
29
|
+
* The clear button is the shared `InputClearButton`, so the affordance and its
|
|
30
|
+
* ghost-button behavior match every other input's clear. It renders AFTER the
|
|
31
|
+
* input in DOM order: the selector components' Tab handling depends on that
|
|
32
|
+
* order to keep the popup open while focus moves onto it.
|
|
33
|
+
*
|
|
34
|
+
* Not exported from the package: it is an implementation detail of the panels
|
|
35
|
+
* that use it, not public API.
|
|
36
|
+
*/
|
|
37
|
+
import { type Ref } from 'react';
|
|
38
|
+
import type { BaseProps } from '../BaseProps';
|
|
39
|
+
export interface PanelSearchInputProps extends Omit<BaseProps<HTMLInputElement>, 'onChange'> {
|
|
40
|
+
/** Ref forwarded to the input element (for focus management). */
|
|
41
|
+
ref?: Ref<HTMLInputElement>;
|
|
42
|
+
/**
|
|
43
|
+
* Accessible name for the input. Rendered as `aria-label`: the panel has no
|
|
44
|
+
* visible label for the field, and a placeholder is not a reliable name.
|
|
45
|
+
*/
|
|
46
|
+
label: string;
|
|
47
|
+
/** Accessible name for the clear (✕) button, e.g. `Clear Search options`. */
|
|
48
|
+
clearLabel: string;
|
|
49
|
+
/** Placeholder text shown while the query is empty. */
|
|
50
|
+
placeholder?: string;
|
|
51
|
+
/** The current query. */
|
|
52
|
+
value: string;
|
|
53
|
+
/** Called with the next query on every keystroke and on clear. */
|
|
54
|
+
onValueChange: (value: string) => void;
|
|
55
|
+
/** Key handler for the input itself. */
|
|
56
|
+
onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
|
|
57
|
+
/** Focus handler for the input; runs after the ring's own bookkeeping. */
|
|
58
|
+
onFocus?: React.FocusEventHandler<HTMLInputElement>;
|
|
59
|
+
/** Blur handler for the input; runs after the ring's own bookkeeping. */
|
|
60
|
+
onBlur?: React.FocusEventHandler<HTMLInputElement>;
|
|
61
|
+
/**
|
|
62
|
+
* Key handler for the row. Events from the input are handled by `onKeyDown`;
|
|
63
|
+
* this one exists for keys pressed on the clear button, which has no other
|
|
64
|
+
* handler of its own.
|
|
65
|
+
*/
|
|
66
|
+
onContainerKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
|
|
67
|
+
}
|
|
68
|
+
/**
|
|
69
|
+
* Search row for the top of a dropdown panel: magnifier, borderless input, and
|
|
70
|
+
* a clear button once a query is typed, in a rounded box shaped like the
|
|
71
|
+
* option rows beneath it.
|
|
72
|
+
*
|
|
73
|
+
* `className`/`style`/`xstyle` apply to the outer row (use them to match the
|
|
74
|
+
* option list's inline padding); every other prop (`role`, `aria-*`, `id`, …)
|
|
75
|
+
* passes through to the `<input>`, so the caller owns the combobox wiring.
|
|
76
|
+
*/
|
|
77
|
+
export declare function PanelSearchInput({ ref, label, clearLabel, placeholder, value, onValueChange, onKeyDown, onFocus, onBlur, onContainerKeyDown, xstyle, className, style, ...props }: PanelSearchInputProps): import("react").JSX.Element;
|
|
78
|
+
export declare namespace PanelSearchInput {
|
|
79
|
+
var displayName: string;
|
|
80
|
+
}
|
|
81
|
+
//# sourceMappingURL=PanelSearchInput.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PanelSearchInput.d.ts","sourceRoot":"","sources":["../../src/Field/PanelSearchInput.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AAEH,OAAO,EAAmC,KAAK,GAAG,EAAC,MAAM,OAAO,CAAC;AAkBjE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA6E5C,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CACjD,SAAS,CAAC,gBAAgB,CAAC,EAC3B,UAAU,CACX;IACC,iEAAiE;IACjE,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAE5B;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd,6EAA6E;IAC7E,UAAU,EAAE,MAAM,CAAC;IAEnB,uDAAuD;IACvD,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,yBAAyB;IACzB,KAAK,EAAE,MAAM,CAAC;IAEd,kEAAkE;IAClE,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEvC,wCAAwC;IACxC,SAAS,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,gBAAgB,CAAC,CAAC;IAEzD,0EAA0E;IAC1E,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IAEpD,yEAAyE;IACzE,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IAEnD;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,cAAc,CAAC,CAAC;CACjE;AAED;;;;;;;;GAQG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,GAAG,EACH,KAAK,EACL,UAAU,EACV,WAAW,EACX,KAAK,EACL,aAAa,EACb,SAAS,EACT,OAAO,EACP,MAAM,EACN,kBAAkB,EAClB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,qBAAqB,+BAkEvB;yBAjFe,gBAAgB"}
|
|
@@ -0,0 +1,151 @@
|
|
|
1
|
+
// Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
2
|
+
|
|
3
|
+
'use client';
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* @file PanelSearchInput.tsx
|
|
7
|
+
* @input Uses React, StyleX, Icon, InputClearButton, theme tokens
|
|
8
|
+
* @output Exports PanelSearchInput — the search row that sits at the top of a
|
|
9
|
+
* dropdown panel
|
|
10
|
+
* @position Shared internal primitive; used by Selector and MultiSelector
|
|
11
|
+
*
|
|
12
|
+
* A dropdown panel is already a bordered, elevated surface. Nesting a bordered
|
|
13
|
+
* TextInput inside it draws a second box within that box, so the field reads as
|
|
14
|
+
* a control dropped into the menu rather than part of it. This row is the
|
|
15
|
+
* seamless alternative — magnifier, borderless input, clear button — separated
|
|
16
|
+
* from the options by a divider the panel owns.
|
|
17
|
+
*
|
|
18
|
+
* The field is shaped like the option rows under it rather than like a form
|
|
19
|
+
* input: same inset from the panel edge, same `--radius-element` corners, same
|
|
20
|
+
* height. The focus ring is drawn on that rounded box, so focus reads as "this
|
|
21
|
+
* row of the panel" — the same visual language as an item's highlight — instead
|
|
22
|
+
* of ringing the whole panel header. It appears for keyboard focus only; see
|
|
23
|
+
* `fieldKeyboardFocus` for why `:focus-visible` alone does not mean that.
|
|
24
|
+
*
|
|
25
|
+
* ┌─ panel ──────────────────┐
|
|
26
|
+
* │ ┌──────────────────────┐ │ ← field: rounded, inset, item-sized
|
|
27
|
+
* │ │ ⌕ Search… ✕ │ │
|
|
28
|
+
* │ └──────────────────────┘ │
|
|
29
|
+
* ├──────────────────────────┤ ← divider (full-bleed)
|
|
30
|
+
* │ ┌──────────────────────┐ │
|
|
31
|
+
* │ │ Apple │ │ ← option row: same box
|
|
32
|
+
*
|
|
33
|
+
* The clear button is the shared `InputClearButton`, so the affordance and its
|
|
34
|
+
* ghost-button behavior match every other input's clear. It renders AFTER the
|
|
35
|
+
* input in DOM order: the selector components' Tab handling depends on that
|
|
36
|
+
* order to keep the popup open while focus moves onto it.
|
|
37
|
+
*
|
|
38
|
+
* Not exported from the package: it is an implementation detail of the panels
|
|
39
|
+
* that use it, not public API.
|
|
40
|
+
*/
|
|
41
|
+
import { useCallback, useEffect, useState } from 'react';
|
|
42
|
+
import * as stylex from '@stylexjs/stylex';
|
|
43
|
+
import { Icon } from "../Icon/index.js";
|
|
44
|
+
import { InputClearButton } from "./InputClearButton.js";
|
|
45
|
+
import { mergeProps } from "../utils/index.js";
|
|
46
|
+
import { getInteractionModality, trackInteractionModality } from "../utils/interactionModality.js";
|
|
47
|
+
import "../theme/tokens.stylex.js";
|
|
48
|
+
import { colorVars, durationVars, easeVars, radiusVars, spacingVars, typeScaleVars, typographyVars } from "../theme/tokens.stylex.js";
|
|
49
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
50
|
+
const styles = {
|
|
51
|
+
wrapper: {
|
|
52
|
+
k8WAf4: "xu0wf1k",
|
|
53
|
+
kg3NbH: "x7a5moj",
|
|
54
|
+
$$css: true
|
|
55
|
+
},
|
|
56
|
+
icon: {
|
|
57
|
+
k1xSpc: "x78zum5",
|
|
58
|
+
kGNEyG: "x6s0dn4",
|
|
59
|
+
kmuXW: "x2lah0s",
|
|
60
|
+
$$css: true
|
|
61
|
+
}
|
|
62
|
+
};
|
|
63
|
+
/**
|
|
64
|
+
* Search row for the top of a dropdown panel: magnifier, borderless input, and
|
|
65
|
+
* a clear button once a query is typed, in a rounded box shaped like the
|
|
66
|
+
* option rows beneath it.
|
|
67
|
+
*
|
|
68
|
+
* `className`/`style`/`xstyle` apply to the outer row (use them to match the
|
|
69
|
+
* option list's inline padding); every other prop (`role`, `aria-*`, `id`, …)
|
|
70
|
+
* passes through to the `<input>`, so the caller owns the combobox wiring.
|
|
71
|
+
*/
|
|
72
|
+
export function PanelSearchInput({
|
|
73
|
+
ref,
|
|
74
|
+
label,
|
|
75
|
+
clearLabel,
|
|
76
|
+
placeholder,
|
|
77
|
+
value,
|
|
78
|
+
onValueChange,
|
|
79
|
+
onKeyDown,
|
|
80
|
+
onFocus,
|
|
81
|
+
onBlur,
|
|
82
|
+
onContainerKeyDown,
|
|
83
|
+
xstyle,
|
|
84
|
+
className,
|
|
85
|
+
style,
|
|
86
|
+
...props
|
|
87
|
+
}) {
|
|
88
|
+
// `:focus-visible` matches a text input focused by POINTER as well (CSS
|
|
89
|
+
// Selectors 4, verified in Chromium), so it cannot express "keyboard focus"
|
|
90
|
+
// by itself. Gate it on how the user last interacted; the CSS condition
|
|
91
|
+
// stays `:focus-visible`, this only narrows it.
|
|
92
|
+
const [isKeyboardFocus, setIsKeyboardFocus] = useState(false);
|
|
93
|
+
useEffect(() => {
|
|
94
|
+
trackInteractionModality();
|
|
95
|
+
}, []);
|
|
96
|
+
const handleFocus = useCallback(e => {
|
|
97
|
+
setIsKeyboardFocus(getInteractionModality() === 'keyboard');
|
|
98
|
+
onFocus?.(e);
|
|
99
|
+
}, [onFocus]);
|
|
100
|
+
const handleBlur = useCallback(e => {
|
|
101
|
+
setIsKeyboardFocus(false);
|
|
102
|
+
onBlur?.(e);
|
|
103
|
+
}, [onBlur]);
|
|
104
|
+
const handleClear = useCallback(() => {
|
|
105
|
+
onValueChange('');
|
|
106
|
+
// Clearing puts the caret back where the user was typing, matching
|
|
107
|
+
// TextInput's built-in clear.
|
|
108
|
+
if (typeof ref === 'object' && ref?.current) {
|
|
109
|
+
ref.current.focus();
|
|
110
|
+
}
|
|
111
|
+
}, [onValueChange, ref]);
|
|
112
|
+
return /*#__PURE__*/_jsx("div", {
|
|
113
|
+
onKeyDown: onContainerKeyDown,
|
|
114
|
+
...mergeProps(stylex.props(styles.wrapper, xstyle), className, style),
|
|
115
|
+
children: /*#__PURE__*/_jsxs("div", {
|
|
116
|
+
"data-keyboard-focus": isKeyboardFocus ? 'true' : undefined,
|
|
117
|
+
...{
|
|
118
|
+
0: {
|
|
119
|
+
className: "x9f619 x78zum5 x6s0dn4 x1txdalj xh8yej3 x1vofgu7 xf314gf xh6dtrn xkdsq27 xuedmi6 x12w9bfk xlr8y92"
|
|
120
|
+
},
|
|
121
|
+
1: {
|
|
122
|
+
className: "x9f619 x78zum5 x6s0dn4 x1txdalj xh8yej3 x1vofgu7 xf314gf xh6dtrn xkdsq27 xuedmi6 x12w9bfk xlr8y92 x1gnnqk1 x1btxeh5"
|
|
123
|
+
}
|
|
124
|
+
}[!!isKeyboardFocus << 0],
|
|
125
|
+
children: [/*#__PURE__*/_jsx(Icon, {
|
|
126
|
+
icon: "search",
|
|
127
|
+
size: "sm",
|
|
128
|
+
color: "secondary",
|
|
129
|
+
xstyle: styles.icon
|
|
130
|
+
}), /*#__PURE__*/_jsx("input", {
|
|
131
|
+
ref: ref,
|
|
132
|
+
type: "text",
|
|
133
|
+
"aria-label": label,
|
|
134
|
+
placeholder: placeholder,
|
|
135
|
+
value: value,
|
|
136
|
+
onChange: e => onValueChange(e.target.value),
|
|
137
|
+
onKeyDown: onKeyDown,
|
|
138
|
+
onFocus: handleFocus,
|
|
139
|
+
onBlur: handleBlur,
|
|
140
|
+
...{
|
|
141
|
+
className: "x1iyjqo2 xs83m0k xeuugli x1717udv x1ghz6dp xc342km xng3xce xjbqb8w x1tgivj0 x9ynric xcr08ib xdk3u5w x1kq96og x1a2a7pz xeyghm5"
|
|
142
|
+
},
|
|
143
|
+
...props
|
|
144
|
+
}), value !== '' && /*#__PURE__*/_jsx(InputClearButton, {
|
|
145
|
+
label: clearLabel,
|
|
146
|
+
onClick: handleClear
|
|
147
|
+
})]
|
|
148
|
+
})
|
|
149
|
+
});
|
|
150
|
+
}
|
|
151
|
+
PanelSearchInput.displayName = 'PanelSearchInput';
|
package/dist/Grid/Grid.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../src/Grid/Grid.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../src/Grid/Grid.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAChD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAI9C;;GAEG;AAEH,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;AAEnE;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,WAAW,GACnB,MAAM,GACN;IACE,QAAQ,EAAE,MAAM,CAAC;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;CACzB,CAAC;AAEN,MAAM,WAAW,SAAU,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC1D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;;OAGG;IACH,GAAG,CAAC,EAAE,WAAW,CAAC;IAElB;;;OAGG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IAErB;;;OAGG;IACH,SAAS,CAAC,EAAE,WAAW,CAAC;IAExB;;;;;;;;;;;;OAYG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;IAEtB;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA2ND;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,IAAI,CAAC,EACnB,OAAO,EACP,SAAS,EACT,KAAK,EACL,MAAM,EACN,QAAQ,EACR,SAAS,EACT,GAAG,EACH,MAAM,EACN,SAAS,EACT,KAAK,EACL,OAAO,EACP,MAAM,EACN,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,EACH,GAAG,KAAK,EACT,EAAE,SAAS,+BA6EX;yBA/Fe,IAAI"}
|
package/dist/Grid/Grid.js
CHANGED
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
// Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
2
2
|
|
|
3
|
-
'use client';
|
|
4
|
-
|
|
5
3
|
/**
|
|
6
4
|
* @file Grid.tsx
|
|
7
5
|
* @input Uses React, stylex, spacing tokens
|
|
@@ -14,6 +12,7 @@
|
|
|
14
12
|
* - /apps/storybook/stories/Grid.stories.tsx
|
|
15
13
|
* - /packages/cli/assets/templates/blocks/components/Grid/ (showcase blocks)
|
|
16
14
|
*/
|
|
15
|
+
|
|
17
16
|
import * as stylex from '@stylexjs/stylex';
|
|
18
17
|
import "../theme/tokens.stylex.js";
|
|
19
18
|
import { spacingVars } from "../theme/tokens.stylex.js";
|
package/dist/Grid/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Grid/index.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Grid/index.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,EAAC,IAAI,EAAC,MAAM,QAAQ,CAAC;AAC5B,YAAY,EAAC,SAAS,EAAE,WAAW,EAAE,aAAa,EAAC,MAAM,QAAQ,CAAC;AAElE,OAAO,EAAC,QAAQ,EAAC,MAAM,YAAY,CAAC;AACpC,YAAY,EAAC,aAAa,EAAC,MAAM,YAAY,CAAC"}
|
package/dist/Grid/index.js
CHANGED
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
// Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
2
2
|
|
|
3
|
-
'use client';
|
|
4
|
-
|
|
5
3
|
/**
|
|
6
4
|
* @file index.ts
|
|
7
5
|
* @input Imports from Grid.tsx and GridSpan.tsx
|
|
@@ -10,5 +8,6 @@
|
|
|
10
8
|
*
|
|
11
9
|
* SYNC: When modified, update /packages/core/src/Grid/Grid.doc.mjs
|
|
12
10
|
*/
|
|
11
|
+
|
|
13
12
|
export { Grid } from "./Grid.js";
|
|
14
13
|
export { GridSpan } from "./GridSpan.js";
|
|
@@ -46,12 +46,12 @@ export type IconRegistrySource = DefinedTheme | string | null | undefined;
|
|
|
46
46
|
* ```
|
|
47
47
|
*
|
|
48
48
|
* Libraries may also register their own extension keys (any string), so a
|
|
49
|
-
* theme can override them the same way it overrides built-in icons
|
|
49
|
+
* theme can override them the same way it overrides built-in icons. A library
|
|
50
|
+
* that ships its own icons registers them by key, then resolves with
|
|
51
|
+
* `getIcon('richtext:bold')`.
|
|
50
52
|
* @example
|
|
51
53
|
* ```
|
|
52
|
-
* // In a library that ships its own icons:
|
|
53
54
|
* registerIcons({ 'richtext:bold': <MyBoldIcon /> });
|
|
54
|
-
* // resolve with getIcon('richtext:bold')
|
|
55
55
|
* ```
|
|
56
56
|
*/
|
|
57
57
|
export declare function registerIcons(icons: Partial<Record<ExtendedIconName, ReactNode>>): void;
|
|
@@ -85,9 +85,10 @@ export declare function getIcon(name: ExtendedIconName, source?: IconRegistrySou
|
|
|
85
85
|
* override the key via {@link registerIcons} without the library having to
|
|
86
86
|
* widen the core {@link IconName} union.
|
|
87
87
|
*
|
|
88
|
+
* The `fallback` is the library default, overridable by a theme registering the
|
|
89
|
+
* same key (for example `'richtext:bold'`).
|
|
88
90
|
* @example
|
|
89
91
|
* ```
|
|
90
|
-
* // Library default, overridable by a theme registering 'richtext:bold':
|
|
91
92
|
* getExtendedIcon('richtext:bold', <BoldGlyph />)
|
|
92
93
|
* ```
|
|
93
94
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"globalIconRegistry.d.ts","sourceRoot":"","sources":["../../src/Icon/globalIconRegistry.tsx"],"names":[],"mappings":"AAEA;;;;;;;;GAQG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAErC,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,sBAAsB,CAAC;AAQvD;;;;;GAKG;AAEH,MAAM,MAAM,QAAQ,GAChB,OAAO,GACP,aAAa,GACb,aAAa,GACb,cAAc,GACd,cAAc,GACd,eAAe,GACf,OAAO,GACP,SAAS,GACT,OAAO,GACP,SAAS,GACT,MAAM,GACN,UAAU,GACV,OAAO,GACP,cAAc,GACd,MAAM,GACN,gBAAgB,GAChB,QAAQ,GACR,SAAS,GACT,WAAW,GACX,cAAc,GACd,QAAQ,GACR,UAAU,GACV,aAAa,GACb,MAAM,GACN,aAAa,GACb,QAAQ,GACR,MAAM,GACN,YAAY,CAAC;AAEjB;;;;;;;;GAQG;AACH,MAAM,MAAM,gBAAgB,GAAG,QAAQ,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;AAExD;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,MAAM,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC;AAEvD,MAAM,MAAM,kBAAkB,GAAG,YAAY,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;AAsB1E;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,aAAa,CAC3B,KAAK,EAAE,OAAO,CAAC,MAAM,CAAC,gBAAgB,EAAE,SAAS,CAAC,CAAC,GAClD,IAAI,CAON;AAED;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAC7B,MAAM,CAAC,EAAE,kBAAkB,GAC1B,QAAQ,CAAC,YAAY,CAAC,CAkBxB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,OAAO,CACrB,IAAI,EAAE,gBAAgB,EACtB,MAAM,CAAC,EAAE,kBAAkB,GAC1B,SAAS,CAOX;AAED
|
|
1
|
+
{"version":3,"file":"globalIconRegistry.d.ts","sourceRoot":"","sources":["../../src/Icon/globalIconRegistry.tsx"],"names":[],"mappings":"AAEA;;;;;;;;GAQG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAErC,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,sBAAsB,CAAC;AAQvD;;;;;GAKG;AAEH,MAAM,MAAM,QAAQ,GAChB,OAAO,GACP,aAAa,GACb,aAAa,GACb,cAAc,GACd,cAAc,GACd,eAAe,GACf,OAAO,GACP,SAAS,GACT,OAAO,GACP,SAAS,GACT,MAAM,GACN,UAAU,GACV,OAAO,GACP,cAAc,GACd,MAAM,GACN,gBAAgB,GAChB,QAAQ,GACR,SAAS,GACT,WAAW,GACX,cAAc,GACd,QAAQ,GACR,UAAU,GACV,aAAa,GACb,MAAM,GACN,aAAa,GACb,QAAQ,GACR,MAAM,GACN,YAAY,CAAC;AAEjB;;;;;;;;GAQG;AACH,MAAM,MAAM,gBAAgB,GAAG,QAAQ,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;AAExD;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,MAAM,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC;AAEvD,MAAM,MAAM,kBAAkB,GAAG,YAAY,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;AAsB1E;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,aAAa,CAC3B,KAAK,EAAE,OAAO,CAAC,MAAM,CAAC,gBAAgB,EAAE,SAAS,CAAC,CAAC,GAClD,IAAI,CAON;AAED;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAC7B,MAAM,CAAC,EAAE,kBAAkB,GAC1B,QAAQ,CAAC,YAAY,CAAC,CAkBxB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,OAAO,CACrB,IAAI,EAAE,gBAAgB,EACtB,MAAM,CAAC,EAAE,kBAAkB,GAC1B,SAAS,CAOX;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,eAAe,CAC7B,IAAI,EAAE,gBAAgB,EACtB,QAAQ,CAAC,EAAE,SAAS,EACpB,MAAM,CAAC,EAAE,kBAAkB,GAC1B,SAAS,CAQX;AAED;;;GAGG;AACH,wBAAgB,UAAU,IAAI,IAAI,CAEjC"}
|
|
@@ -70,12 +70,12 @@ function getThemeIconOverrides(source) {
|
|
|
70
70
|
* ```
|
|
71
71
|
*
|
|
72
72
|
* Libraries may also register their own extension keys (any string), so a
|
|
73
|
-
* theme can override them the same way it overrides built-in icons
|
|
73
|
+
* theme can override them the same way it overrides built-in icons. A library
|
|
74
|
+
* that ships its own icons registers them by key, then resolves with
|
|
75
|
+
* `getIcon('richtext:bold')`.
|
|
74
76
|
* @example
|
|
75
77
|
* ```
|
|
76
|
-
* // In a library that ships its own icons:
|
|
77
78
|
* registerIcons({ 'richtext:bold': <MyBoldIcon /> });
|
|
78
|
-
* // resolve with getIcon('richtext:bold')
|
|
79
79
|
* ```
|
|
80
80
|
*/
|
|
81
81
|
export function registerIcons(icons) {
|
|
@@ -139,9 +139,10 @@ export function getIcon(name, source) {
|
|
|
139
139
|
* override the key via {@link registerIcons} without the library having to
|
|
140
140
|
* widen the core {@link IconName} union.
|
|
141
141
|
*
|
|
142
|
+
* The `fallback` is the library default, overridable by a theme registering the
|
|
143
|
+
* same key (for example `'richtext:bold'`).
|
|
142
144
|
* @example
|
|
143
145
|
* ```
|
|
144
|
-
* // Library default, overridable by a theme registering 'richtext:bold':
|
|
145
146
|
* getExtendedIcon('richtext:bold', <BoldGlyph />)
|
|
146
147
|
* ```
|
|
147
148
|
*/
|