@kanso-labs/kanso-ui 0.28.3 → 0.28.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +35 -7
- package/dist/calendar/styles.js +2 -0
- package/dist/calendar/styles.js.map +1 -1
- package/dist/chip/index.js +28 -0
- package/dist/chip/index.js.map +1 -0
- package/dist/chip/styles.js +16 -0
- package/dist/chip/styles.js.map +1 -1
- package/dist/components/button/index.js.map +1 -1
- package/dist/components/calendar/index.js.map +1 -1
- package/dist/components/chip/index.d.ts +10 -1
- package/dist/components/chip/index.js +22 -12
- package/dist/components/chip/index.js.map +1 -1
- package/dist/components/chip-group/index.js +11 -6
- package/dist/components/chip-group/index.js.map +1 -1
- package/dist/components/copy-field/index.js +83 -30
- package/dist/components/copy-field/index.js.map +1 -1
- package/dist/components/date-picker/index.js +79 -80
- package/dist/components/date-picker/index.js.map +1 -1
- package/dist/components/date-range-picker/index.js +94 -96
- package/dist/components/date-range-picker/index.js.map +1 -1
- package/dist/components/slider/index.js +3 -2
- package/dist/components/slider/index.js.map +1 -1
- package/dist/components/token-field/index.js +2 -2
- package/dist/components/token-field/index.js.map +1 -1
- package/dist/control/styles.js +1 -1
- package/dist/control/styles.js.map +1 -1
- package/dist/styles.css +28 -0
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -61,10 +61,17 @@ The components are built on
|
|
|
61
61
|
[React Aria Components](https://react-aria.adobe.com), and the utilities an app
|
|
62
62
|
needs around them come from this package too: `I18nProvider` and
|
|
63
63
|
`RouterProvider`, `Collection`, `VisuallyHidden`, `Focusable` and `Pressable`,
|
|
64
|
-
`Virtualizer` with its layouts,
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
`
|
|
64
|
+
`SharedElement` and `SharedElementTransition`, `Virtualizer` with its layouts,
|
|
65
|
+
the `useFilter`, `useListData`, `useTreeData` and `useAsyncList` hooks,
|
|
66
|
+
`useDragAndDrop` with `useDrag`, `useDrop`, the drop item guards and
|
|
67
|
+
`DIRECTORY_DRAG_TYPE`, `useLocale`, `parseColor` and `getColorChannels`,
|
|
68
|
+
`TokenFieldValue`, and the `Key`, `Selection`, `SortDescriptor` and `PressEvent`
|
|
69
|
+
types.
|
|
70
|
+
|
|
71
|
+
A virtualized collection needs to be told how tall its rows are, and
|
|
72
|
+
`collectionSizes` is what the collections here measure — `listRow`, `menuRow`,
|
|
73
|
+
`tableRow` and the rest — so a `Virtualizer`'s `layoutOptions` take a number the
|
|
74
|
+
components agree with rather than one guessed at the call site.
|
|
68
75
|
|
|
69
76
|
```tsx
|
|
70
77
|
import { I18nProvider, useListData } from '@kanso-labs/kanso-ui'
|
|
@@ -76,6 +83,27 @@ of the library carries a second set of contexts, and the two never meet: a
|
|
|
76
83
|
trigger context it looks for belongs to your copy. Everything above is the same
|
|
77
84
|
object the components use, which is what keeps them talking to each other.
|
|
78
85
|
|
|
86
|
+
### Date values
|
|
87
|
+
|
|
88
|
+
The date components — `DatePicker`, `DateField`, `Calendar`, `RangeCalendar`,
|
|
89
|
+
`DateRangePicker` and `TimeField` — take the values
|
|
90
|
+
[`@internationalized/date`](https://react-spectrum.adobe.com/internationalized/date/)
|
|
91
|
+
builds, and this package publishes them at its own `./date` subpath:
|
|
92
|
+
|
|
93
|
+
```ts
|
|
94
|
+
import {
|
|
95
|
+
CalendarDate,
|
|
96
|
+
getLocalTimeZone,
|
|
97
|
+
today,
|
|
98
|
+
} from '@kanso-labs/kanso-ui/date'
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
**Do not install `@internationalized/date` alongside this package.** A
|
|
102
|
+
`CalendarDate` built from a second copy is a different class, and a `Calendar`'s
|
|
103
|
+
`value` rejects it. The subpath is what makes installing it unnecessary, and it
|
|
104
|
+
is a subpath rather than part of the main entry so an app with no date component
|
|
105
|
+
pays nothing for it.
|
|
106
|
+
|
|
79
107
|
### Layout
|
|
80
108
|
|
|
81
109
|
`Container` centres content at a measure, and `Stack` puts one gap from the
|
|
@@ -162,9 +190,9 @@ with the same styles and ripple, announced as the link it is.
|
|
|
162
190
|
<Button href="/items/1">Label</Button>
|
|
163
191
|
```
|
|
164
192
|
|
|
165
|
-
The overlays — `Sheet` and `Popover` — are opened by a `Button` or
|
|
166
|
-
placed directly inside them, and closed by any button inside their
|
|
167
|
-
`slot="close"`:
|
|
193
|
+
The overlays — `Sheet`, `Dialog` and `Popover` — are opened by a `Button` or
|
|
194
|
+
`IconButton` placed directly inside them, and closed by any button inside their
|
|
195
|
+
content given `slot="close"`:
|
|
168
196
|
|
|
169
197
|
```tsx
|
|
170
198
|
<Sheet>
|
package/dist/calendar/styles.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","names":["stylex","colors","radii","spacing","stateLayerOpacity","typography","calendarStyles","cell","kGNEyG","kWkggS","kZKoxP","kaIpWk","kB7OPa","kMwMTN","kkrTdU","k1xSpc","kMv6JI","kGuDYH","k63SB2","kzqmXN","kjj79g","kb6lSQ","kLWn49","kUOVxO","$$css","cellDisabled","cellInRange","cellRangeEnd","kT0f0o","kfmiAY","cellRangeStart","kVL7Gh","krdFHd","cellSelected","cellToday","kVAM5u","ksu8eU","kMzoRj","chevron","chevronGlyph","k3aq6I","chevronGlyphPrevious","grid","kLvRdT","kheTzg","header","kOIVth","kAzted","headerCell","heading","kogj98","k9WMMc","months","root","kXwgrk","k7Eaqz","kmVPX3"],"sources":["../../src/calendar/styles.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors, radii, spacing, stateLayerOpacity, typography } from '../tokens/design.tokens.stylex';\n\n// The styles Calendar and RangeCalendar both draw. Apart from either\n// component so the two cannot drift, and outside `src/components` because a\n// directory there is a public component with stories, a barrel entry and a\n// `styling.test.tsx` case — which shared styles are none of.\n//\n// The values are the date pickers page's docked calendar, named in\n// `src/components/calendar/index.tsx` along with the departures from it. What\n// is only a range's — the band between the two ends — is marked as the\n// library's own where it is defined, since the page tokenises no such thing.\n\nconst calendarStyles = {\n cell: {\n kGNEyG: \"x6s0dn4\",\n kWkggS: \"x83qkoq x1p2om7n xjbqb8w\",\n kZKoxP: \"x1vqgdyp\",\n kaIpWk: \"x3y1ksm\",\n kB7OPa: \"x9f619\",\n kMwMTN: \"x139gbkf\",\n kkrTdU: \"x1ypdohk\",\n k1xSpc: \"x78zum5\",\n kMv6JI: \"x16svsjw\",\n kGuDYH: \"x1848etk\",\n k63SB2: \"x1c52epr\",\n kzqmXN: \"x100vrsf\",\n kjj79g: \"xl56j7k\",\n kb6lSQ: \"x1qn8t5l\",\n kLWn49: \"xh7dzej\",\n kUOVxO: \"x34s64n\",\n $$css: true\n },\n cellDisabled: {\n kWkggS: \"xjbqb8w\",\n kMwMTN: \"x9w6zvh\",\n kkrTdU: \"x1h6gzvc\",\n $$css: true\n },\n cellInRange: {\n kWkggS: \"x1mpme18 x1q7sp4o x15dekr4\",\n kaIpWk: \"x2u8bby\",\n kMwMTN: \"x1sawysd\",\n kzqmXN: \"xh8yej3\",\n kUOVxO: \"xrxpjvj\",\n $$css: true\n },\n cellRangeEnd: {\n kT0f0o: \"x1mh50ju\",\n kfmiAY: \"x13dhofw\",\n $$css: true\n },\n cellRangeStart: {\n kVL7Gh: \"xqmr837\",\n krdFHd: \"xz4iguh\",\n $$css: true\n },\n cellSelected: {\n kWkggS: \"x1nik15g x1q2w5h1 xnety89\",\n kMwMTN: \"xwjo7ld\",\n $$css: true\n },\n cellToday: {\n kVAM5u: \"x1uajy3w\",\n ksu8eU: \"x1y0btm7\",\n kMzoRj: \"xmkeg23\",\n kMwMTN: \"x1mxwv8y\",\n $$css: true\n },\n chevron: {\n kUOVxO: \"x34s64n\",\n $$css: true\n },\n chevronGlyph: {\n kZKoxP: \"xxk0z11\",\n kzqmXN: \"xvy4d1p\",\n k3aq6I: \"x19axjrm x1c071of\",\n $$css: true\n },\n chevronGlyphPrevious: {\n k3aq6I: \"xdg80k9 xpk2tj9\",\n $$css: true\n },\n grid: {\n kLvRdT: \"x1vathgz\",\n kheTzg: \"x1gukg7c\",\n kzqmXN: \"xh8yej3\",\n $$css: true\n },\n header: {\n kGNEyG: \"x6s0dn4\",\n k1xSpc: \"x78zum5\",\n kOIVth: \"x126z3so\",\n kjj79g: \"x1qughib\",\n kAzted: \"x1ba4aug\",\n $$css: true\n },\n headerCell: {\n kZKoxP: \"x1vqgdyp\",\n kMwMTN: \"x139gbkf\",\n kMv6JI: \"x16svsjw\",\n kGuDYH: \"x1848etk\",\n k63SB2: \"x1c52epr\",\n kb6lSQ: \"x1qn8t5l\",\n kLWn49: \"xh7dzej\",\n $$css: true\n },\n heading: {\n kMwMTN: \"x1w5n3ug\",\n kMv6JI: \"xkknnkr\",\n kGuDYH: \"x14zspaw\",\n k63SB2: \"x1v9cpvo\",\n kb6lSQ: \"x155f00i\",\n kLWn49: \"x1lz68p4\",\n kogj98: \"x1ghz6dp\",\n k9WMMc: \"x2b8uid\",\n $$css: true\n },\n months: {\n k1xSpc: \"x78zum5\",\n kOIVth: \"xj2l1yv\",\n $$css: true\n },\n root: {\n kWkggS: \"xvkjz1l\",\n kaIpWk: \"xhpdng0\",\n kB7OPa: \"x9f619\",\n kMwMTN: \"x139gbkf\",\n k1xSpc: \"x78zum5\",\n kXwgrk: \"xdt5ytf\",\n kOIVth: \"x1gka490\",\n kzqmXN: \"xeq5yr9\",\n k7Eaqz: \"x1gvwcb\",\n kmVPX3: \"xa36j16\",\n $$css: true\n }\n};\nexport { calendarStyles };"],"mappings":";
|
|
1
|
+
{"version":3,"file":"styles.js","names":["stylex","colors","radii","spacing","stateLayerOpacity","typography","ROW_BLOCK_SIZE","WEEKS_HELD","calendarStyles","cell","kGNEyG","kWkggS","kZKoxP","kaIpWk","kB7OPa","kMwMTN","kkrTdU","k1xSpc","kMv6JI","kGuDYH","k63SB2","kzqmXN","kjj79g","kb6lSQ","kLWn49","kUOVxO","$$css","cellDisabled","cellInRange","cellRangeEnd","kT0f0o","kfmiAY","cellRangeStart","kVL7Gh","krdFHd","cellSelected","cellToday","kVAM5u","ksu8eU","kMzoRj","chevron","chevronGlyph","k3aq6I","chevronGlyphPrevious","grid","kLvRdT","kheTzg","header","kOIVth","kAzted","headerCell","heading","kogj98","k9WMMc","months","root","kXwgrk","k7Eaqz","kmVPX3"],"sources":["../../src/calendar/styles.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors, radii, spacing, stateLayerOpacity, typography } from '../tokens/design.tokens.stylex';\n\n// The styles Calendar and RangeCalendar both draw. Apart from either\n// component so the two cannot drift, and outside `src/components` because a\n// directory there is a public component with stories, a barrel entry and a\n// `styling.test.tsx` case — which shared styles are none of.\n//\n// The values are the date pickers page's docked calendar, named in\n// `src/components/calendar/index.tsx` along with the departures from it. What\n// is only a range's — the band between the two ends — is marked as the\n// library's own where it is defined, since the page tokenises no such thing.\n\n// One row of the grid. The weekday row and every week of dates are the same\n// 40dp, so `cell`, `headerCell` and the room `months` reserves are all this\n// one number — a date resized without the reservation following it would put\n// the calendar's height back on its month.\nconst ROW_BLOCK_SIZE = '40px';\n\n// The weeks the grid holds room for, which is the most any month occupies: a\n// 31-day month beginning on the last day of a week runs one day, then four\n// whole weeks, then two days. February 2026 is the other end at four. Holding\n// six draws every month in the box the longest one fills.\nconst WEEKS_HELD = 6;\nconst calendarStyles = {\n cell: {\n kGNEyG: \"x6s0dn4\",\n kWkggS: \"x83qkoq x1p2om7n xjbqb8w\",\n kZKoxP: \"x1vqgdyp\",\n kaIpWk: \"x3y1ksm\",\n kB7OPa: \"x9f619\",\n kMwMTN: \"x139gbkf\",\n kkrTdU: \"x1ypdohk\",\n k1xSpc: \"x78zum5\",\n kMv6JI: \"x16svsjw\",\n kGuDYH: \"x1848etk\",\n k63SB2: \"x1c52epr\",\n kzqmXN: \"x100vrsf\",\n kjj79g: \"xl56j7k\",\n kb6lSQ: \"x1qn8t5l\",\n kLWn49: \"xh7dzej\",\n kUOVxO: \"x34s64n\",\n $$css: true\n },\n cellDisabled: {\n kWkggS: \"xjbqb8w\",\n kMwMTN: \"x9w6zvh\",\n kkrTdU: \"x1h6gzvc\",\n $$css: true\n },\n cellInRange: {\n kWkggS: \"x1mpme18 x1q7sp4o x15dekr4\",\n kaIpWk: \"x2u8bby\",\n kMwMTN: \"x1sawysd\",\n kzqmXN: \"xh8yej3\",\n kUOVxO: \"xrxpjvj\",\n $$css: true\n },\n cellRangeEnd: {\n kT0f0o: \"x1mh50ju\",\n kfmiAY: \"x13dhofw\",\n $$css: true\n },\n cellRangeStart: {\n kVL7Gh: \"xqmr837\",\n krdFHd: \"xz4iguh\",\n $$css: true\n },\n cellSelected: {\n kWkggS: \"x1nik15g x1q2w5h1 xnety89\",\n kMwMTN: \"xwjo7ld\",\n $$css: true\n },\n cellToday: {\n kVAM5u: \"x1uajy3w\",\n ksu8eU: \"x1y0btm7\",\n kMzoRj: \"xmkeg23\",\n kMwMTN: \"x1mxwv8y\",\n $$css: true\n },\n chevron: {\n kUOVxO: \"x34s64n\",\n $$css: true\n },\n chevronGlyph: {\n kZKoxP: \"xxk0z11\",\n kzqmXN: \"xvy4d1p\",\n k3aq6I: \"x19axjrm x1c071of\",\n $$css: true\n },\n chevronGlyphPrevious: {\n k3aq6I: \"xdg80k9 xpk2tj9\",\n $$css: true\n },\n grid: {\n kLvRdT: \"x1vathgz\",\n kheTzg: \"x1gukg7c\",\n kzqmXN: \"xh8yej3\",\n $$css: true\n },\n header: {\n kGNEyG: \"x6s0dn4\",\n k1xSpc: \"x78zum5\",\n kOIVth: \"x126z3so\",\n kjj79g: \"x1qughib\",\n kAzted: \"x1ba4aug\",\n $$css: true\n },\n headerCell: {\n kZKoxP: \"x1vqgdyp\",\n kMwMTN: \"x139gbkf\",\n kMv6JI: \"x16svsjw\",\n kGuDYH: \"x1848etk\",\n k63SB2: \"x1c52epr\",\n kb6lSQ: \"x1qn8t5l\",\n kLWn49: \"xh7dzej\",\n $$css: true\n },\n heading: {\n kMwMTN: \"x1w5n3ug\",\n kMv6JI: \"xkknnkr\",\n kGuDYH: \"x14zspaw\",\n k63SB2: \"x1v9cpvo\",\n kb6lSQ: \"x155f00i\",\n kLWn49: \"x1lz68p4\",\n kogj98: \"x1ghz6dp\",\n k9WMMc: \"x2b8uid\",\n $$css: true\n },\n months: {\n kGNEyG: \"x7a106z\",\n k1xSpc: \"x78zum5\",\n kOIVth: \"xj2l1yv\",\n kAzted: \"x1fivsg2\",\n $$css: true\n },\n root: {\n kWkggS: \"xvkjz1l\",\n kaIpWk: \"xhpdng0\",\n kB7OPa: \"x9f619\",\n kMwMTN: \"x139gbkf\",\n k1xSpc: \"x78zum5\",\n kXwgrk: \"xdt5ytf\",\n kOIVth: \"x1gka490\",\n kzqmXN: \"xeq5yr9\",\n k7Eaqz: \"x1gvwcb\",\n kmVPX3: \"xa36j16\",\n $$css: true\n }\n};\nexport { calendarStyles };"],"mappings":";AAyBA,MAAMQ,iBAAiB;CACrBC,MAAM;EACJC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,cAAc;EACZhB,QAAQ;EACRI,QAAQ;EACRC,QAAQ;EACRU,OAAO;CACT;CACAE,aAAa;EACXjB,QAAQ;EACRE,QAAQ;EACRE,QAAQ;EACRM,QAAQ;EACRI,QAAQ;EACRC,OAAO;CACT;CACAG,cAAc;EACZC,QAAQ;EACRC,QAAQ;EACRL,OAAO;CACT;CACAM,gBAAgB;EACdC,QAAQ;EACRC,QAAQ;EACRR,OAAO;CACT;CACAS,cAAc;EACZxB,QAAQ;EACRI,QAAQ;EACRW,OAAO;CACT;CACAU,WAAW;EACTC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRxB,QAAQ;EACRW,OAAO;CACT;CACAc,SAAS;EACPf,QAAQ;EACRC,OAAO;CACT;CACAe,cAAc;EACZ7B,QAAQ;EACRS,QAAQ;EACRqB,QAAQ;EACRhB,OAAO;CACT;CACAiB,sBAAsB;EACpBD,QAAQ;EACRhB,OAAO;CACT;CACAkB,MAAM;EACJC,QAAQ;EACRC,QAAQ;EACRzB,QAAQ;EACRK,OAAO;CACT;CACAqB,QAAQ;EACNrC,QAAQ;EACRO,QAAQ;EACR+B,QAAQ;EACR1B,QAAQ;EACR2B,QAAQ;EACRvB,OAAO;CACT;CACAwB,YAAY;EACVtC,QAAQ;EACRG,QAAQ;EACRG,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRG,QAAQ;EACRC,QAAQ;EACRE,OAAO;CACT;CACAyB,SAAS;EACPpC,QAAQ;EACRG,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRG,QAAQ;EACRC,QAAQ;EACR4B,QAAQ;EACRC,QAAQ;EACR3B,OAAO;CACT;CACA4B,QAAQ;EACN5C,QAAQ;EACRO,QAAQ;EACR+B,QAAQ;EACRC,QAAQ;EACRvB,OAAO;CACT;CACA6B,MAAM;EACJ5C,QAAQ;EACRE,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRE,QAAQ;EACRuC,QAAQ;EACRR,QAAQ;EACR3B,QAAQ;EACRoC,QAAQ;EACRC,QAAQ;EACRhC,OAAO;CACT;AACF"}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { props } from "../node_modules/@stylexjs/stylex/lib/es/stylex.js";
|
|
2
|
+
import { CheckGlyph } from "../glyphs/index.js";
|
|
3
|
+
import { chipStyles } from "./styles.js";
|
|
4
|
+
import { jsx } from "react/jsx-runtime";
|
|
5
|
+
//#region src/chip/index.tsx
|
|
6
|
+
/**
|
|
7
|
+
* The check a selected chip draws before its label, and nothing at all while
|
|
8
|
+
* it is not selected. Returns a node rather than letting the type be
|
|
9
|
+
* inferred, since `ReactNode` is a union that includes a promise and an
|
|
10
|
+
* inferred one has to be `async`.
|
|
11
|
+
*
|
|
12
|
+
* Shared rather than written at each of the two call sites: Chip and
|
|
13
|
+
* ChipGroup's chip draw the same pill from `./styles`, and a check written
|
|
14
|
+
* twice is the drift that module exists to stop. Not a component of the
|
|
15
|
+
* library's own and not exported from the package; see `src/row` for the
|
|
16
|
+
* same arrangement around a list's row.
|
|
17
|
+
*/
|
|
18
|
+
function chipGlyph(isSelected) {
|
|
19
|
+
if (!isSelected) return null;
|
|
20
|
+
return /* @__PURE__ */ jsx("span", {
|
|
21
|
+
...props(chipStyles.glyph),
|
|
22
|
+
children: /* @__PURE__ */ jsx(CheckGlyph, { ...props(chipStyles.glyphSvg) })
|
|
23
|
+
});
|
|
24
|
+
}
|
|
25
|
+
//#endregion
|
|
26
|
+
export { chipGlyph };
|
|
27
|
+
|
|
28
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","names":["ReactNode","stylex","CheckGlyph","chipStyles","chipGlyph","isSelected","props","glyph","glyphSvg"],"sources":["../../src/chip/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { CheckGlyph } from '../glyphs';\nimport { chipStyles } from './styles';\n\n/**\n * The check a selected chip draws before its label, and nothing at all while\n * it is not selected. Returns a node rather than letting the type be\n * inferred, since `ReactNode` is a union that includes a promise and an\n * inferred one has to be `async`.\n *\n * Shared rather than written at each of the two call sites: Chip and\n * ChipGroup's chip draw the same pill from `./styles`, and a check written\n * twice is the drift that module exists to stop. Not a component of the\n * library's own and not exported from the package; see `src/row` for the\n * same arrangement around a list's row.\n */\nfunction chipGlyph(isSelected: boolean): ReactNode {\n if (!isSelected) {\n return null;\n }\n return <span {...stylex.props(chipStyles.glyph)}>\n <CheckGlyph {...stylex.props(chipStyles.glyphSvg)} />\n </span>;\n}\nexport { chipGlyph };"],"mappings":";;;;;;;;;;;;;;;;;AAiBA,SAASI,UAAUC,YAAgC;CACjD,IAAI,CAACA,YACH,OAAO;CAET,OAAO,oBAAC,QAAD;EAAM,GAAIJ,MAAaE,WAAWI,KAAK;EAC1C,UAAA,oBAAC,YAAD,EAAY,GAAIN,MAAaE,WAAWK,QAAQ,EAAE,CAAA;CAC9C,CAAA;AACV"}
|
package/dist/chip/styles.js
CHANGED
|
@@ -37,6 +37,22 @@ const chipStyles = {
|
|
|
37
37
|
kVAM5u: "xrh88j3",
|
|
38
38
|
$$css: true
|
|
39
39
|
},
|
|
40
|
+
glyph: {
|
|
41
|
+
kGNEyG: "x6s0dn4",
|
|
42
|
+
kZKoxP: "xmix8c7",
|
|
43
|
+
k1xSpc: "x3nfvp2",
|
|
44
|
+
kmuXW: "x2lah0s",
|
|
45
|
+
kGuDYH: "xosj86m",
|
|
46
|
+
kzqmXN: "x1xp8n7a",
|
|
47
|
+
kjj79g: "xl56j7k",
|
|
48
|
+
keTefX: "xxuhe3a",
|
|
49
|
+
$$css: true
|
|
50
|
+
},
|
|
51
|
+
glyphSvg: {
|
|
52
|
+
kZKoxP: "x5yr21d",
|
|
53
|
+
kzqmXN: "xh8yej3",
|
|
54
|
+
$$css: true
|
|
55
|
+
},
|
|
40
56
|
remove: {
|
|
41
57
|
kGNEyG: "x6s0dn4",
|
|
42
58
|
kWkggS: "xy3r1oc x15a1ka xjbqb8w",
|
package/dist/chip/styles.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","names":["stylex","colors","motion","radii","spacing","stateLayerOpacity","typography","chipStyles","base","kGNEyG","kZKoxP","kaIpWk","ksu8eU","kMzoRj","kB7OPa","kkrTdU","k1xSpc","kmuXW","kMv6JI","kGuDYH","k63SB2","kOIVth","kb6lSQ","kLWn49","k8WAf4","kg3NbH","kIyJzY","k1ekBW","kAMwcw","$$css","disabled","kMwMTN","disabledSelected","kWkggS","disabledUnselected","kVAM5u","
|
|
1
|
+
{"version":3,"file":"styles.js","names":["stylex","colors","motion","radii","spacing","stateLayerOpacity","typography","chipStyles","base","kGNEyG","kZKoxP","kaIpWk","ksu8eU","kMzoRj","kB7OPa","kkrTdU","k1xSpc","kmuXW","kMv6JI","kGuDYH","k63SB2","kOIVth","kb6lSQ","kLWn49","k8WAf4","kg3NbH","kIyJzY","k1ekBW","kAMwcw","$$css","disabled","kMwMTN","disabledSelected","kWkggS","disabledUnselected","kVAM5u","glyph","kzqmXN","kjj79g","keTefX","glyphSvg","remove","k71WvV","kjBf7l","kInvED","k3XXqK","kMeerF","kmVPX3","removeGlyph","selected","unselected"],"sources":["../../src/chip/styles.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing, stateLayerOpacity, typography } from '../tokens/design.tokens.stylex';\n\n// The pill the chips page draws, shared by the two components that draw one:\n// Chip, which is a toggle on its own, and ChipGroup's chip, which is one of a\n// set that can also be removed. The measurements and roles are the page's\n// filter chip — a 32dp container with an 8dp corner and 16dp of inline\n// padding, an outline variant border while unselected, the secondary\n// container pair once selected.\n//\n// Each state composites an on-colour over its own container at the\n// interaction state's opacity rather than swapping in a separate hover\n// colour. `calc(<opacity> * 100%)` turns the token's unitless 0-1 ratio into\n// the percentage `color-mix()` takes, and it is inlined at each property\n// because @stylexjs/babel-plugin only statically recognises expressions\n// written directly as property values.\n//\n// The selected chip drops its border rather than recolouring it: it has a\n// container of its own to define its edge, and a border on top of that reads\n// as a second, competing outline.\n//\n// Disabled is applied from render state rather than from `:disabled`. Chip is\n// a button and would match the pseudo-class; a chip in a group is React\n// Aria's `Tag`, which is a div and never will. One mechanism serves both, and\n// StyleX replaces a property whole, so the disabled styles take the hover and\n// pressed branches of whichever state they are applied over.\n//\n// A selected chip carries the page's check before its label, which is what\n// makes the selection legible without colour. The two containers differ in\n// colour alone, and under a scheme whose secondary container sits close to\n// the surface — or for a reader who does not see colour — that is no\n// difference at all.\n//\n// The chip widens when the check appears, and that is the page's behaviour\n// rather than a cost of drawing it: a chip is flow content, laid out in a\n// row that wraps, so nothing around it has a width to hold. A segmented\n// button's segments are equal columns of one track, which is a different\n// geometry answering a different question, and the two should not be read\n// across.\n//\n// Apart from any component so a chip in a group and a chip on its own cannot\n// drift; see `src/row` for the same arrangement around a list's row.\n\nconst chipStyles = {\n base: {\n kGNEyG: \"x6s0dn4\",\n kZKoxP: \"x10w6t97\",\n kaIpWk: \"x1xdvaa9\",\n ksu8eU: \"x1y0btm7\",\n kMzoRj: \"xmkeg23\",\n kB7OPa: \"x9f619\",\n kkrTdU: \"x1ypdohk\",\n k1xSpc: \"x3nfvp2\",\n kmuXW: \"x2lah0s\",\n kMv6JI: \"xkknnkr\",\n kGuDYH: \"x14zspaw\",\n k63SB2: \"x1v9cpvo\",\n kOIVth: \"x126z3so\",\n kb6lSQ: \"x155f00i\",\n kLWn49: \"x1lz68p4\",\n k8WAf4: \"xt970qd\",\n kg3NbH: \"x790zyz\",\n kIyJzY: \"x1qno0dh\",\n k1ekBW: \"x1eaenvl\",\n kAMwcw: \"xpc4ca7\",\n $$css: true\n },\n disabled: {\n kMwMTN: \"x1xj74d8\",\n kkrTdU: \"x1h6gzvc\",\n $$css: true\n },\n disabledSelected: {\n kWkggS: \"xepofeg\",\n $$css: true\n },\n disabledUnselected: {\n kWkggS: \"xjbqb8w\",\n kVAM5u: \"xrh88j3\",\n $$css: true\n },\n glyph: {\n kGNEyG: \"x6s0dn4\",\n kZKoxP: \"xmix8c7\",\n k1xSpc: \"x3nfvp2\",\n kmuXW: \"x2lah0s\",\n kGuDYH: \"xosj86m\",\n kzqmXN: \"x1xp8n7a\",\n kjj79g: \"xl56j7k\",\n keTefX: \"xxuhe3a\",\n $$css: true\n },\n glyphSvg: {\n kZKoxP: \"x5yr21d\",\n kzqmXN: \"xh8yej3\",\n $$css: true\n },\n remove: {\n kGNEyG: \"x6s0dn4\",\n kWkggS: \"xy3r1oc x15a1ka xjbqb8w\",\n kZKoxP: \"xmix8c7\",\n kaIpWk: \"x3y1ksm\",\n kMzoRj: \"xc342km\",\n kB7OPa: \"x9f619\",\n kMwMTN: \"x1heor9g\",\n kkrTdU: \"x1ypdohk\",\n k1xSpc: \"x3nfvp2\",\n kmuXW: \"x2lah0s\",\n kzqmXN: \"x1xp8n7a\",\n kjj79g: \"xl56j7k\",\n k71WvV: \"x1kfc2zf\",\n kjBf7l: \"x14ytart\",\n kInvED: \"x1y3gkto\",\n k3XXqK: \"x9v5kkp x1t137rt\",\n kMeerF: \"x1de99jn\",\n kmVPX3: \"x1717udv\",\n $$css: true\n },\n removeGlyph: {\n kZKoxP: \"xmix8c7\",\n kzqmXN: \"x1xp8n7a\",\n $$css: true\n },\n selected: {\n kWkggS: \"xnqsvhv xlizrex x15dekr4\",\n kVAM5u: \"x9r1u3d\",\n kMwMTN: \"x1sawysd\",\n $$css: true\n },\n unselected: {\n kWkggS: \"x83qkoq x1p2om7n xjbqb8w\",\n kVAM5u: \"x133yhug\",\n kMwMTN: \"x1w5n3ug\",\n $$css: true\n }\n};\nexport { chipStyles };"],"mappings":";AA4CA,MAAMO,aAAa;CACjBC,MAAM;EACJC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;EACPC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,UAAU;EACRC,QAAQ;EACRhB,QAAQ;EACRc,OAAO;CACT;CACAG,kBAAkB;EAChBC,QAAQ;EACRJ,OAAO;CACT;CACAK,oBAAoB;EAClBD,QAAQ;EACRE,QAAQ;EACRN,OAAO;CACT;CACAO,OAAO;EACL3B,QAAQ;EACRC,QAAQ;EACRM,QAAQ;EACRC,OAAO;EACPE,QAAQ;EACRkB,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRV,OAAO;CACT;CACAW,UAAU;EACR9B,QAAQ;EACR2B,QAAQ;EACRR,OAAO;CACT;CACAY,QAAQ;EACNhC,QAAQ;EACRwB,QAAQ;EACRvB,QAAQ;EACRC,QAAQ;EACRE,QAAQ;EACRC,QAAQ;EACRiB,QAAQ;EACRhB,QAAQ;EACRC,QAAQ;EACRC,OAAO;EACPoB,QAAQ;EACRC,QAAQ;EACRI,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRlB,OAAO;CACT;CACAmB,aAAa;EACXtC,QAAQ;EACR2B,QAAQ;EACRR,OAAO;CACT;CACAoB,UAAU;EACRhB,QAAQ;EACRE,QAAQ;EACRJ,QAAQ;EACRF,OAAO;CACT;CACAqB,YAAY;EACVjB,QAAQ;EACRE,QAAQ;EACRJ,QAAQ;EACRF,OAAO;CACT;AACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["DOMAttributes","ReactNode","ButtonRenderProps","ClassNameOrFunction","FocusableElement","ButtonProps","RACButtonProps","StyleOrFunction","stylex","Button","RACButton","Link","RACLink","useRipple","ariaAttributesOf","buttonRenderer","linkRenderer","focus","mergeStatefulStyles","colors","radii","shadows","spacing","stateLayerOpacity","typography","ProgressIndicator","Ripple","ReturnType","styles","base","kGNEyG","kaIpWk","kMzoRj","kB7OPa","kkrTdU","k1xSpc","kMv6JI","kGuDYH","k63SB2","kOIVth","kb6lSQ","kLWn49","kVAEAm","kybGjl","$$css","disabled","elevated","kWkggS","kGVxlE","kMwMTN","elevatedDisabled","filled","filledDisabled","label","labelPending","k33iCy","lg","kZKoxP","kg3NbH","md","outlined","kVAM5u","ksu8eU","outlinedDisabled","pending","kpwlN0","kjj79g","text","textDisabled","tonal","tonalDisabled","xl","xs","xxl","outlineWidths","disabledStyles","ButtonDOMProps","Omit","GlobalEventKey","Pick","HTMLElement","children","className","ButtonState","disableRipple","href","pendingLabel","rel","size","ButtonSize","style","target","variant","ButtonVariant","Exclude","t0","$","_c","t1","isDisabled","t2","onClick","onContextMenu","onKeyDown","onKeyUp","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","t3","render","t4","t5","props","undefined","t6","ripple","t7","state","ring","styleProps","element","aria","handlers","surface","T0","t8","t9","t10","buttonContent","t11","isPending"],"sources":["../../../src/components/button/index.tsx"],"sourcesContent":["import type { DOMAttributes, ReactNode } from 'react';\nimport type { ButtonRenderProps, ClassNameOrFunction, FocusableElement, ButtonProps as RACButtonProps, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Button as RACButton, Link as RACLink } from 'react-aria-components';\nimport { useRipple } from '../../hooks/useRipple';\nimport { ariaAttributesOf, buttonRenderer, linkRenderer } from '../../render/aria';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, shadows, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\nimport ProgressIndicator from '../progress-indicator';\n\n// Each variant composites its label colour over its container at the\n// interaction state's opacity, rather than swapping in a separate\n// hover/pressed color: filled and tonal paint the 'on-color' over the\n// container, outlined, text and elevated paint the label colour over their\n// own. The pairs are the buttons spec page's newer values: tonal on\n// secondary container, outlined with an outline variant border and an\n// on-surface-variant label, text on primary, elevated on surface container\n// low with a primary label.\n//\n// **Elevated is the one variant whose shadow is part of its identity.** The\n// page rests it at elevation 1 rather than flat, raises it on hover and\n// returns it to 1 while pressed — where filled and tonal rest flat and lift\n// only on hover. Disabled drops it to none, since a shadow says a control is\n// available to press.\n// calc(<opacity> * 100%) turns the token's unitless 0-1 ratio into the\n// percentage color-mix() takes. Inlined rather than factored into a helper:\n// @stylexjs/babel-plugin only statically recognizes expressions written\n// directly as property values, and a call to an externally-defined function\n// isn't one of them.\n//\n// Disabled is a style of its own per variant rather than a `:disabled`\n// branch inside each property: a button given `href` renders as a link,\n// which React Aria turns into a <span> while disabled, and neither matches\n// the pseudo-class. The disabled styles are applied last from the render\n// state's `isDisabled`, and StyleX replaces a property whole, so they also\n// take the hover and pressed branches with them — which is what keeps a\n// hovered disabled button from lighting up.\n//\n// Two independent axes, applied base -> variant -> size. The order is what\n// lets `text` keep its tighter inline padding at the default size while the\n// other sizes still set their own: `md` deliberately declares no\n// paddingInline, so a medium button falls through to whatever its variant\n// asked for, and every other size overrides it. That mirrors the source\n// design's own cascade, where the size classes are declared after the\n// variant ones and win on padding for exactly the same reason.\ntype Ripple = ReturnType<typeof useRipple<FocusableElement>>;\nconst styles = {\n base: {\n kGNEyG: \"x6s0dn4\",\n kaIpWk: \"x3y1ksm\",\n kMzoRj: \"xc342km\",\n kB7OPa: \"x9f619\",\n kkrTdU: \"x1ypdohk\",\n k1xSpc: \"x3nfvp2\",\n kMv6JI: \"xkknnkr\",\n kGuDYH: \"x14zspaw\",\n k63SB2: \"x1v9cpvo\",\n kOIVth: \"x126z3so\",\n kb6lSQ: \"x155f00i\",\n kLWn49: \"x1lz68p4\",\n kVAEAm: \"x1n2onr6\",\n kybGjl: \"x1hl2dhg\",\n $$css: true\n },\n disabled: {\n kkrTdU: \"x1h6gzvc\",\n $$css: true\n },\n elevated: {\n kWkggS: \"x1k1wbbp x3k5p2v xf9j7ge x1vnz5z6\",\n kGVxlE: \"x1g60mc1 x1fzngjt x19efjv6\",\n kMwMTN: \"x1mxwv8y\",\n $$css: true\n },\n elevatedDisabled: {\n kWkggS: \"xepofeg\",\n kGVxlE: \"x1gnnqk1\",\n kMwMTN: \"x1xj74d8\",\n $$css: true\n },\n filled: {\n kWkggS: \"xpky1to x16z974x xyf7a0q xnety89\",\n kGVxlE: \"xpk4wdd x1955hzl x1gnnqk1\",\n kMwMTN: \"xwjo7ld\",\n $$css: true\n },\n filledDisabled: {\n kWkggS: \"xepofeg\",\n kGVxlE: \"x1gnnqk1\",\n kMwMTN: \"x1xj74d8\",\n $$css: true\n },\n label: {\n k1xSpc: \"xjp7ctv\",\n $$css: true\n },\n labelPending: {\n k33iCy: \"xlshs6z\",\n $$css: true\n },\n lg: {\n kZKoxP: \"xnnlda6\",\n kMv6JI: \"x46eyla\",\n kGuDYH: \"x5ehqhr\",\n k63SB2: \"xrf6cl6\",\n kb6lSQ: \"x1g135zh\",\n kLWn49: \"x1ggk5va\",\n kg3NbH: \"xg0ps1x\",\n $$css: true\n },\n md: {\n kZKoxP: \"x1vqgdyp\",\n kg3NbH: \"x790zyz\",\n $$css: true\n },\n outlined: {\n kWkggS: \"x1dg9itu x1yu1589 x1728qcm xjbqb8w\",\n kVAM5u: \"x133yhug\",\n ksu8eU: \"x1y0btm7\",\n kMzoRj: \"xmkeg23\",\n kMwMTN: \"x1w5n3ug\",\n $$css: true\n },\n outlinedDisabled: {\n kWkggS: \"xjbqb8w\",\n kVAM5u: \"xrh88j3\",\n kMwMTN: \"x1xj74d8\",\n $$css: true\n },\n pending: {\n kGNEyG: \"x6s0dn4\",\n k1xSpc: \"x78zum5\",\n kpwlN0: \"x10a8y8t\",\n kjj79g: \"xl56j7k\",\n kVAEAm: \"x10l6tqk\",\n $$css: true\n },\n text: {\n kWkggS: \"x12vej0r x598nmq x14dcer4 xjbqb8w\",\n kMwMTN: \"x1mxwv8y\",\n $$css: true\n },\n textDisabled: {\n kWkggS: \"xjbqb8w\",\n kMwMTN: \"x1xj74d8\",\n $$css: true\n },\n tonal: {\n kWkggS: \"xnqsvhv xc87fxa xlizrex x15dekr4\",\n kGVxlE: \"xpk4wdd x1955hzl x1gnnqk1\",\n kMwMTN: \"x1sawysd\",\n $$css: true\n },\n tonalDisabled: {\n kWkggS: \"xepofeg\",\n kGVxlE: \"x1gnnqk1\",\n kMwMTN: \"x1xj74d8\",\n $$css: true\n },\n xl: {\n kZKoxP: \"xjp8j0k\",\n kMv6JI: \"x1fz0g89\",\n kGuDYH: \"xkb6epg\",\n k63SB2: \"x76yrz5\",\n kOIVth: \"x1gka490\",\n kb6lSQ: \"x1s1qhaa\",\n kLWn49: \"x1voeury\",\n kg3NbH: \"x1sdxjpb\",\n $$css: true\n },\n xs: {\n kZKoxP: \"x10w6t97\",\n kg3NbH: \"x790zyz\",\n $$css: true\n },\n xxl: {\n kZKoxP: \"xn866dk\",\n kMv6JI: \"x1vsmgmf\",\n kGuDYH: \"xh9c4x\",\n k63SB2: \"x1y15vu6\",\n kOIVth: \"xxj4525\",\n kb6lSQ: \"xoqu3bc\",\n kLWn49: \"x10x9d6x\",\n kg3NbH: \"x1dao9b2\",\n $$css: true\n }\n};\n\n// The outlined button's border thickens with the size, as the page's size\n// tokens have it: 1dp up to M, 2dp at L, 3dp at XL. A style per size rather\n// than a value in the size style, since a border on a filled button would\n// draw in the label colour.\nconst outlineWidths = {\n lg: {\n kMzoRj: \"xmkeg23\",\n $$css: true\n },\n md: {\n kMzoRj: \"xmkeg23\",\n $$css: true\n },\n xl: {\n kMzoRj: \"xdh2fpr\",\n $$css: true\n },\n xs: {\n kMzoRj: \"xmkeg23\",\n $$css: true\n },\n xxl: {\n kMzoRj: \"x9r2w2z\",\n $$css: true\n }\n};\nconst disabledStyles = {\n elevated: styles.elevatedDisabled,\n filled: styles.filledDisabled,\n outlined: styles.outlinedDisabled,\n text: styles.textDisabled,\n tonal: styles.tonalDisabled\n};\ntype ButtonDOMProps = Omit<RACButtonProps, 'children' | 'className' | 'style' | GlobalEventKey> & Pick<DOMAttributes<HTMLElement>, GlobalEventKey>;\ntype ButtonProps = {\n children?: ReactNode;\n /** A function may compute the class from the button's render state. */\n className?: ClassNameOrFunction<ButtonState>;\n /**\n * Disables the press ripple. The hover/pressed background state layer is\n * unaffected.\n * @default false\n */\n disableRipple?: boolean;\n /**\n * Where the button leads. Given one, the button is rendered as a link —\n * an `<a>`, announced as the link it is — with the same styles and ripple.\n * `render`, `type`, and the form and pending props apply to the button\n * form only.\n */\n href?: string;\n /**\n * The name of the ring shown while the button is pending, for a screen\n * reader. The label it replaces is hidden while it shows.\n * @default 'Loading'\n */\n pendingLabel?: string;\n /** The link's `rel`, when `href` is set. */\n rel?: string;\n /**\n * Control height: `xs` 32px, `md` 40px, `lg` 56px, `xl` 96px, `xxl` 136px —\n * the buttons spec page's XS, S, M, L and XL, each with its own inline\n * padding and type role. `md` is the page's default.\n * @default 'md'\n */\n size?: ButtonSize;\n /** A function may compute the style from the button's render state. */\n style?: StyleOrFunction<ButtonState>;\n /** The link's `target`, when `href` is set. */\n target?: string;\n /**\n * How much weight the button pulls. `filled` and `tonal` carry a container\n * of their own; `outlined` and `text` sit on the page; `elevated` sits on\n * a low surface and lifts off it with a shadow, for a button that has to\n * separate from a busy background rather than from the page.\n * @default 'filled'\n */\n variant?: ButtonVariant;\n} & ButtonDOMProps;\ntype ButtonSize = 'lg' | 'md' | 'xl' | 'xs' | 'xxl';\n\n// The render state both of React Aria's elements share. A className or\n// style function written against it serves the button and the link alike;\n// `isPending` belongs to the button alone, and `isCurrent` to the link, so\n// neither is here: a `className` written against this state serves both\n// elements. What the button draws while pending is decided in\n// `buttonContent`, which sees React Aria's own state rather than this one.\ntype ButtonState = Pick<ButtonRenderProps, 'isDisabled' | 'isFocused' | 'isFocusVisible' | 'isHovered' | 'isPressed'>;\ntype ButtonVariant = 'elevated' | 'filled' | 'outlined' | 'text' | 'tonal';\n\n// React Aria types the global DOM events — pointer, mouse, touch, wheel and\n// the rest — against the element each component renders, and a handler\n// written for a <button> does not type-check against an <a>. The keys are\n// retyped against HTMLElement here so one set of props serves both forms;\n// the events React Aria defines itself (press, focus, keyboard) keep its\n// types, since it hands those its own event objects.\ntype GlobalEventKey = Exclude<keyof DOMAttributes<HTMLElement> & keyof RACButtonProps, 'onBlur' | 'onClick' | 'onFocus'>;\n\n/**\n * The design's button, at five emphasis levels and five control heights.\n * Given `href` it is a link with the same appearance. Every `aria-*` prop is\n * forwarded to the element; React Aria alone would keep only the labelling\n * ones.\n */\nfunction Button({\n children,\n disableRipple = false,\n href,\n isDisabled = false,\n onClick,\n onContextMenu,\n onKeyDown,\n onKeyUp,\n onPointerCancel,\n onPointerDown,\n onPointerLeave,\n onPointerUp,\n pendingLabel = 'Loading',\n rel,\n render,\n size = 'md',\n target,\n variant = 'filled',\n ...props\n}: ButtonProps) {\n // `props` (className/style, etc.) is spread separately: `className` and\n // `style` there may be functions of render state, which ripple's own\n // handler-only merge doesn't need to know about. It is also why the styles\n // below merge through mergeStatefulStyles rather than the plain\n // mergeStyles. The ripple is off while disabled: React Aria still forwards\n // pointer events to a disabled element, and a press that changes nothing\n // should not look like one.\n const ripple = useRipple<FocusableElement>(!disableRipple && !isDisabled, {\n onClick,\n onContextMenu,\n onPointerCancel,\n onPointerDown,\n onPointerLeave,\n onPointerUp\n });\n const styleProps = mergeStatefulStyles((state: ButtonState) => stylex.props(styles.base, focus.ring, styles[variant], styles[size], variant === 'outlined' && outlineWidths[size], state.isDisabled && styles.disabled, state.isDisabled && disabledStyles[variant]), props);\n const element = {\n aria: ariaAttributesOf(props),\n onKeyDown,\n onKeyUp\n };\n if (href !== undefined) {\n return <RACLink href={href} isDisabled={isDisabled} rel={rel} render={linkRenderer(element)} target={target} {...ripple.handlers} {...props} {...styleProps}>\n {children}\n {ripple.surface}\n </RACLink>;\n }\n return <RACButton isDisabled={isDisabled} render={buttonRenderer(element, render)} {...ripple.handlers} {...props} {...styleProps}>\n {buttonContent(children, pendingLabel, ripple)}\n </RACButton>;\n}\n// What the button draws: its label, hidden while the button is pending, with\n// the ring over it. The ring takes the button's own content colour rather\n// than the progress page's primary, which on a filled button is the fill\n// itself and so invisible. The label stays in the flow so the button keeps its\n// width, which is what stops a form jumping the moment it is submitted.\n// React Aria wants the progress bar in the accessibility tree as soon as the\n// button goes pending, so it is rendered from the render state rather than\n// after a delay.\n//\n// Built by a call rather than written inline at the prop, which is what\n// react-perf's no-new-function-as-prop is after; the React Compiler\n// memoises the result on its inputs.\nfunction buttonContent(children: ReactNode, pendingLabel: string, ripple: Ripple) {\n return (state: ButtonRenderProps) => <>\n <span {...{\n 0: {\n className: \"xjp7ctv\"\n },\n 1: {\n className: \"xjp7ctv xlshs6z\"\n }\n }[!!state.isPending << 0]}>\n {children}\n </span>\n {state.isPending ? <span className=\"x6s0dn4 x78zum5 x10a8y8t xl56j7k x10l6tqk\">\n <ProgressIndicator aria-label={pendingLabel} isIndeterminate size=\"1em\" tone=\"inherit\" variant=\"circular\" />\n </span> : null}\n {ripple.surface}\n </>;\n}\nexport type { ButtonDOMProps, ButtonProps, ButtonSize, ButtonState, ButtonVariant };\nexport default Button;"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","names":["DOMAttributes","ReactNode","ButtonRenderProps","ClassNameOrFunction","FocusableElement","ButtonProps","RACButtonProps","StyleOrFunction","stylex","Button","RACButton","Link","RACLink","useRipple","ariaAttributesOf","buttonRenderer","linkRenderer","focus","mergeStatefulStyles","colors","radii","shadows","spacing","stateLayerOpacity","typography","ProgressIndicator","Ripple","ReturnType","styles","base","kGNEyG","kaIpWk","kMzoRj","kB7OPa","kkrTdU","k1xSpc","kMv6JI","kGuDYH","k63SB2","kOIVth","kb6lSQ","kLWn49","kVAEAm","kybGjl","$$css","disabled","elevated","kWkggS","kGVxlE","kMwMTN","elevatedDisabled","filled","filledDisabled","label","labelPending","k33iCy","lg","kZKoxP","kg3NbH","md","outlined","kVAM5u","ksu8eU","outlinedDisabled","pending","kpwlN0","kjj79g","text","textDisabled","tonal","tonalDisabled","xl","xs","xxl","outlineWidths","disabledStyles","ButtonDOMProps","Omit","GlobalEventKey","Pick","HTMLElement","children","className","ButtonState","disableRipple","href","pendingLabel","rel","size","ButtonSize","style","target","variant","ButtonVariant","Exclude","t0","$","_c","t1","isDisabled","t2","onClick","onContextMenu","onKeyDown","onKeyUp","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","t3","render","t4","t5","props","undefined","t6","ripple","t7","state","ring","styleProps","element","aria","handlers","surface","T0","t8","t9","t10","buttonContent","t11","isPending"],"sources":["../../../src/components/button/index.tsx"],"sourcesContent":["import type { DOMAttributes, ReactNode } from 'react';\nimport type { ButtonRenderProps, ClassNameOrFunction, FocusableElement, ButtonProps as RACButtonProps, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Button as RACButton, Link as RACLink } from 'react-aria-components';\nimport { useRipple } from '../../hooks/useRipple';\nimport { ariaAttributesOf, buttonRenderer, linkRenderer } from '../../render/aria';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, shadows, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\nimport ProgressIndicator from '../progress-indicator';\n\n// Each variant composites its label colour over its container at the\n// interaction state's opacity, rather than swapping in a separate\n// hover/pressed color: filled and tonal paint the 'on-color' over the\n// container, outlined, text and elevated paint the label colour over their\n// own. The pairs are the buttons spec page's newer values: tonal on\n// secondary container, outlined with an outline variant border and an\n// on-surface-variant label, text on primary, elevated on surface container\n// low with a primary label.\n//\n// **Elevated is the one variant whose shadow is part of its identity.** The\n// page rests it at elevation 1 rather than flat, raises it on hover and\n// returns it to 1 while pressed — where filled and tonal rest flat and lift\n// only on hover. Disabled drops it to none, since a shadow says a control is\n// available to press.\n// calc(<opacity> * 100%) turns the token's unitless 0-1 ratio into the\n// percentage color-mix() takes. Inlined rather than factored into a helper:\n// @stylexjs/babel-plugin only statically recognizes expressions written\n// directly as property values, and a call to an externally-defined function\n// isn't one of them.\n//\n// Disabled is a style of its own per variant rather than a `:disabled`\n// branch inside each property: a button given `href` renders as a link,\n// which React Aria turns into a <span> while disabled, and neither matches\n// the pseudo-class. The disabled styles are applied last from the render\n// state's `isDisabled`, and StyleX replaces a property whole, so they also\n// take the hover and pressed branches with them — which is what keeps a\n// hovered disabled button from lighting up.\n//\n// Two independent axes, applied base -> variant -> size. The variant carries\n// colour and the size carries geometry, so the two never argue: inline\n// padding belongs to the size alone, and every size declares its own.\n//\n// That is deliberate rather than incidental. The buttons page gives padding\n// per size — its Small button padding is 16dp, the 24dp beside it being the\n// older value the page marks as not recommended — and gives the five colour\n// styles no padding of their own. A text button is therefore as wide as a\n// filled one at the same size, which is what the code draws.\n//\n// This did once read the other way, with `md` declaring no padding so a\n// medium button fell through to its variant's. `fix(button)!: the spec's\n// five sizes` replaced that when the component took the page's sizes, since\n// a per-variant padding had nowhere to sit once every size carried one. The\n// comment describing the old cascade outlived it by some months, which is\n// how it came to say `text` keeps a tighter padding it has never had — back\n// then `text` declared 16dp while a filled `md` declared none at all, so the\n// text button was the wider of the two.\ntype Ripple = ReturnType<typeof useRipple<FocusableElement>>;\nconst styles = {\n base: {\n kGNEyG: \"x6s0dn4\",\n kaIpWk: \"x3y1ksm\",\n kMzoRj: \"xc342km\",\n kB7OPa: \"x9f619\",\n kkrTdU: \"x1ypdohk\",\n k1xSpc: \"x3nfvp2\",\n kMv6JI: \"xkknnkr\",\n kGuDYH: \"x14zspaw\",\n k63SB2: \"x1v9cpvo\",\n kOIVth: \"x126z3so\",\n kb6lSQ: \"x155f00i\",\n kLWn49: \"x1lz68p4\",\n kVAEAm: \"x1n2onr6\",\n kybGjl: \"x1hl2dhg\",\n $$css: true\n },\n disabled: {\n kkrTdU: \"x1h6gzvc\",\n $$css: true\n },\n elevated: {\n kWkggS: \"x1k1wbbp x3k5p2v xf9j7ge x1vnz5z6\",\n kGVxlE: \"x1g60mc1 x1fzngjt x19efjv6\",\n kMwMTN: \"x1mxwv8y\",\n $$css: true\n },\n elevatedDisabled: {\n kWkggS: \"xepofeg\",\n kGVxlE: \"x1gnnqk1\",\n kMwMTN: \"x1xj74d8\",\n $$css: true\n },\n filled: {\n kWkggS: \"xpky1to x16z974x xyf7a0q xnety89\",\n kGVxlE: \"xpk4wdd x1955hzl x1gnnqk1\",\n kMwMTN: \"xwjo7ld\",\n $$css: true\n },\n filledDisabled: {\n kWkggS: \"xepofeg\",\n kGVxlE: \"x1gnnqk1\",\n kMwMTN: \"x1xj74d8\",\n $$css: true\n },\n label: {\n k1xSpc: \"xjp7ctv\",\n $$css: true\n },\n labelPending: {\n k33iCy: \"xlshs6z\",\n $$css: true\n },\n lg: {\n kZKoxP: \"xnnlda6\",\n kMv6JI: \"x46eyla\",\n kGuDYH: \"x5ehqhr\",\n k63SB2: \"xrf6cl6\",\n kb6lSQ: \"x1g135zh\",\n kLWn49: \"x1ggk5va\",\n kg3NbH: \"xg0ps1x\",\n $$css: true\n },\n md: {\n kZKoxP: \"x1vqgdyp\",\n kg3NbH: \"x790zyz\",\n $$css: true\n },\n outlined: {\n kWkggS: \"x1dg9itu x1yu1589 x1728qcm xjbqb8w\",\n kVAM5u: \"x133yhug\",\n ksu8eU: \"x1y0btm7\",\n kMzoRj: \"xmkeg23\",\n kMwMTN: \"x1w5n3ug\",\n $$css: true\n },\n outlinedDisabled: {\n kWkggS: \"xjbqb8w\",\n kVAM5u: \"xrh88j3\",\n kMwMTN: \"x1xj74d8\",\n $$css: true\n },\n pending: {\n kGNEyG: \"x6s0dn4\",\n k1xSpc: \"x78zum5\",\n kpwlN0: \"x10a8y8t\",\n kjj79g: \"xl56j7k\",\n kVAEAm: \"x10l6tqk\",\n $$css: true\n },\n text: {\n kWkggS: \"x12vej0r x598nmq x14dcer4 xjbqb8w\",\n kMwMTN: \"x1mxwv8y\",\n $$css: true\n },\n textDisabled: {\n kWkggS: \"xjbqb8w\",\n kMwMTN: \"x1xj74d8\",\n $$css: true\n },\n tonal: {\n kWkggS: \"xnqsvhv xc87fxa xlizrex x15dekr4\",\n kGVxlE: \"xpk4wdd x1955hzl x1gnnqk1\",\n kMwMTN: \"x1sawysd\",\n $$css: true\n },\n tonalDisabled: {\n kWkggS: \"xepofeg\",\n kGVxlE: \"x1gnnqk1\",\n kMwMTN: \"x1xj74d8\",\n $$css: true\n },\n xl: {\n kZKoxP: \"xjp8j0k\",\n kMv6JI: \"x1fz0g89\",\n kGuDYH: \"xkb6epg\",\n k63SB2: \"x76yrz5\",\n kOIVth: \"x1gka490\",\n kb6lSQ: \"x1s1qhaa\",\n kLWn49: \"x1voeury\",\n kg3NbH: \"x1sdxjpb\",\n $$css: true\n },\n xs: {\n kZKoxP: \"x10w6t97\",\n kg3NbH: \"x790zyz\",\n $$css: true\n },\n xxl: {\n kZKoxP: \"xn866dk\",\n kMv6JI: \"x1vsmgmf\",\n kGuDYH: \"xh9c4x\",\n k63SB2: \"x1y15vu6\",\n kOIVth: \"xxj4525\",\n kb6lSQ: \"xoqu3bc\",\n kLWn49: \"x10x9d6x\",\n kg3NbH: \"x1dao9b2\",\n $$css: true\n }\n};\n\n// The outlined button's border thickens with the size, as the page's size\n// tokens have it: 1dp up to M, 2dp at L, 3dp at XL. A style per size rather\n// than a value in the size style, since a border on a filled button would\n// draw in the label colour.\nconst outlineWidths = {\n lg: {\n kMzoRj: \"xmkeg23\",\n $$css: true\n },\n md: {\n kMzoRj: \"xmkeg23\",\n $$css: true\n },\n xl: {\n kMzoRj: \"xdh2fpr\",\n $$css: true\n },\n xs: {\n kMzoRj: \"xmkeg23\",\n $$css: true\n },\n xxl: {\n kMzoRj: \"x9r2w2z\",\n $$css: true\n }\n};\nconst disabledStyles = {\n elevated: styles.elevatedDisabled,\n filled: styles.filledDisabled,\n outlined: styles.outlinedDisabled,\n text: styles.textDisabled,\n tonal: styles.tonalDisabled\n};\ntype ButtonDOMProps = Omit<RACButtonProps, 'children' | 'className' | 'style' | GlobalEventKey> & Pick<DOMAttributes<HTMLElement>, GlobalEventKey>;\ntype ButtonProps = {\n children?: ReactNode;\n /** A function may compute the class from the button's render state. */\n className?: ClassNameOrFunction<ButtonState>;\n /**\n * Disables the press ripple. The hover/pressed background state layer is\n * unaffected.\n * @default false\n */\n disableRipple?: boolean;\n /**\n * Where the button leads. Given one, the button is rendered as a link —\n * an `<a>`, announced as the link it is — with the same styles and ripple.\n * `render`, `type`, and the form and pending props apply to the button\n * form only.\n */\n href?: string;\n /**\n * The name of the ring shown while the button is pending, for a screen\n * reader. The label it replaces is hidden while it shows.\n * @default 'Loading'\n */\n pendingLabel?: string;\n /** The link's `rel`, when `href` is set. */\n rel?: string;\n /**\n * Control height: `xs` 32px, `md` 40px, `lg` 56px, `xl` 96px, `xxl` 136px —\n * the buttons spec page's XS, S, M, L and XL, each with its own inline\n * padding and type role. `md` is the page's default.\n * @default 'md'\n */\n size?: ButtonSize;\n /** A function may compute the style from the button's render state. */\n style?: StyleOrFunction<ButtonState>;\n /** The link's `target`, when `href` is set. */\n target?: string;\n /**\n * How much weight the button pulls. `filled` and `tonal` carry a container\n * of their own; `outlined` and `text` sit on the page; `elevated` sits on\n * a low surface and lifts off it with a shadow, for a button that has to\n * separate from a busy background rather than from the page.\n * @default 'filled'\n */\n variant?: ButtonVariant;\n} & ButtonDOMProps;\ntype ButtonSize = 'lg' | 'md' | 'xl' | 'xs' | 'xxl';\n\n// The render state both of React Aria's elements share. A className or\n// style function written against it serves the button and the link alike;\n// `isPending` belongs to the button alone, and `isCurrent` to the link, so\n// neither is here: a `className` written against this state serves both\n// elements. What the button draws while pending is decided in\n// `buttonContent`, which sees React Aria's own state rather than this one.\ntype ButtonState = Pick<ButtonRenderProps, 'isDisabled' | 'isFocused' | 'isFocusVisible' | 'isHovered' | 'isPressed'>;\ntype ButtonVariant = 'elevated' | 'filled' | 'outlined' | 'text' | 'tonal';\n\n// React Aria types the global DOM events — pointer, mouse, touch, wheel and\n// the rest — against the element each component renders, and a handler\n// written for a <button> does not type-check against an <a>. The keys are\n// retyped against HTMLElement here so one set of props serves both forms;\n// the events React Aria defines itself (press, focus, keyboard) keep its\n// types, since it hands those its own event objects.\ntype GlobalEventKey = Exclude<keyof DOMAttributes<HTMLElement> & keyof RACButtonProps, 'onBlur' | 'onClick' | 'onFocus'>;\n\n/**\n * The design's button, at five emphasis levels and five control heights.\n * Given `href` it is a link with the same appearance. Every `aria-*` prop is\n * forwarded to the element; React Aria alone would keep only the labelling\n * ones.\n */\nfunction Button({\n children,\n disableRipple = false,\n href,\n isDisabled = false,\n onClick,\n onContextMenu,\n onKeyDown,\n onKeyUp,\n onPointerCancel,\n onPointerDown,\n onPointerLeave,\n onPointerUp,\n pendingLabel = 'Loading',\n rel,\n render,\n size = 'md',\n target,\n variant = 'filled',\n ...props\n}: ButtonProps) {\n // `props` (className/style, etc.) is spread separately: `className` and\n // `style` there may be functions of render state, which ripple's own\n // handler-only merge doesn't need to know about. It is also why the styles\n // below merge through mergeStatefulStyles rather than the plain\n // mergeStyles. The ripple is off while disabled: React Aria still forwards\n // pointer events to a disabled element, and a press that changes nothing\n // should not look like one.\n const ripple = useRipple<FocusableElement>(!disableRipple && !isDisabled, {\n onClick,\n onContextMenu,\n onPointerCancel,\n onPointerDown,\n onPointerLeave,\n onPointerUp\n });\n const styleProps = mergeStatefulStyles((state: ButtonState) => stylex.props(styles.base, focus.ring, styles[variant], styles[size], variant === 'outlined' && outlineWidths[size], state.isDisabled && styles.disabled, state.isDisabled && disabledStyles[variant]), props);\n const element = {\n aria: ariaAttributesOf(props),\n onKeyDown,\n onKeyUp\n };\n if (href !== undefined) {\n return <RACLink href={href} isDisabled={isDisabled} rel={rel} render={linkRenderer(element)} target={target} {...ripple.handlers} {...props} {...styleProps}>\n {children}\n {ripple.surface}\n </RACLink>;\n }\n return <RACButton isDisabled={isDisabled} render={buttonRenderer(element, render)} {...ripple.handlers} {...props} {...styleProps}>\n {buttonContent(children, pendingLabel, ripple)}\n </RACButton>;\n}\n// What the button draws: its label, hidden while the button is pending, with\n// the ring over it. The ring takes the button's own content colour rather\n// than the progress page's primary, which on a filled button is the fill\n// itself and so invisible. The label stays in the flow so the button keeps its\n// width, which is what stops a form jumping the moment it is submitted.\n// React Aria wants the progress bar in the accessibility tree as soon as the\n// button goes pending, so it is rendered from the render state rather than\n// after a delay.\n//\n// Built by a call rather than written inline at the prop, which is what\n// react-perf's no-new-function-as-prop is after; the React Compiler\n// memoises the result on its inputs.\nfunction buttonContent(children: ReactNode, pendingLabel: string, ripple: Ripple) {\n return (state: ButtonRenderProps) => <>\n <span {...{\n 0: {\n className: \"xjp7ctv\"\n },\n 1: {\n className: \"xjp7ctv xlshs6z\"\n }\n }[!!state.isPending << 0]}>\n {children}\n </span>\n {state.isPending ? <span className=\"x6s0dn4 x78zum5 x10a8y8t xl56j7k x10l6tqk\">\n <ProgressIndicator aria-label={pendingLabel} isIndeterminate size=\"1em\" tone=\"inherit\" variant=\"circular\" />\n </span> : null}\n {ripple.surface}\n </>;\n}\nexport type { ButtonDOMProps, ButtonProps, ButtonSize, ButtonState, ButtonVariant };\nexport default Button;"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["CalendarDate","ReactElement","DateValue","CalendarProps","RACCalendarProps","stylex","Calendar","RACCalendar","CalendarCell","RACCalendarCell","CalendarGrid","RACCalendarGrid","CalendarGridBody","RACCalendarGridBody","CalendarGridHeader","CalendarHeader","monthOffsets","calendarStyles","focus","mergeStatefulStyles","Omit","T","className","style","props","$","_c","t0","root","t1","t2","Symbol","for","months","t3","visibleDuration","map","_temp","t4","t5","offset","grid","gridCell","cellClassName","state","isDisabled","isSelected","isToday","cell","ring","cellToday","cellSelected","cellDisabled","date"],"sources":["../../../src/components/calendar/index.tsx"],"sourcesContent":["import type { CalendarDate } from '@internationalized/date';\nimport type { ReactElement } from 'react';\nimport type { DateValue, CalendarProps as RACCalendarProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Calendar as RACCalendar, CalendarCell as RACCalendarCell, CalendarGrid as RACCalendarGrid, CalendarGridBody as RACCalendarGridBody } from 'react-aria-components';\nimport { CalendarGridHeader, CalendarHeader } from '../../calendar';\nimport { monthOffsets } from '../../calendar/months';\nimport { calendarStyles } from '../../calendar/styles';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\n\n// The date pickers page's docked calendar: a month grid with a circle on the\n// selected date and an outline on today. Its values are that page's — a\n// 360dp container on the high surface container, 48dp date cells with a 40dp\n// state layer inside them, body-large for both the weekday row and the dates,\n// primary for the selected circle and for today's outline.\n//\n// The page's container is 456dp tall, which this does not
|
|
1
|
+
{"version":3,"file":"index.js","names":["CalendarDate","ReactElement","DateValue","CalendarProps","RACCalendarProps","stylex","Calendar","RACCalendar","CalendarCell","RACCalendarCell","CalendarGrid","RACCalendarGrid","CalendarGridBody","RACCalendarGridBody","CalendarGridHeader","CalendarHeader","monthOffsets","calendarStyles","focus","mergeStatefulStyles","Omit","T","className","style","props","$","_c","t0","root","t1","t2","Symbol","for","months","t3","visibleDuration","map","_temp","t4","t5","offset","grid","gridCell","cellClassName","state","isDisabled","isSelected","isToday","cell","ring","cellToday","cellSelected","cellDisabled","date"],"sources":["../../../src/components/calendar/index.tsx"],"sourcesContent":["import type { CalendarDate } from '@internationalized/date';\nimport type { ReactElement } from 'react';\nimport type { DateValue, CalendarProps as RACCalendarProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Calendar as RACCalendar, CalendarCell as RACCalendarCell, CalendarGrid as RACCalendarGrid, CalendarGridBody as RACCalendarGridBody } from 'react-aria-components';\nimport { CalendarGridHeader, CalendarHeader } from '../../calendar';\nimport { monthOffsets } from '../../calendar/months';\nimport { calendarStyles } from '../../calendar/styles';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\n\n// The date pickers page's docked calendar: a month grid with a circle on the\n// selected date and an outline on today. Its values are that page's — a\n// 360dp container on the high surface container, 48dp date cells with a 40dp\n// state layer inside them, body-large for both the weekday row and the dates,\n// primary for the selected circle and for today's outline.\n//\n// The page's container is 456dp tall, which this does not take: that height\n// is a picker's, counting a headline and an action row the calendar itself\n// does not draw. What is held instead is the grid, at six weeks — the most\n// any month occupies — so the calendar keeps its height as the month moves\n// and a shorter month leaves its last rows empty. `months` in\n// `src/calendar/styles.ts` is where the room is reserved.\n//\n// Four things are this component's own.\n//\n// **The cell is a circle in a square.** The page gives the date a 48dp\n// container and a 40dp state layer, which is a 40dp circle with 4dp of room\n// around it. The grid's `border-spacing` is what supplies that room, so the\n// circle is the element and the square is the space between circles — rather\n// than a 48dp box with a 40dp box inside it.\n//\n// **A date from the month either side is faded because it is disabled, not\n// because it is outside.** React Aria marks those cells `data-outside-month`\n// and disables them in the same breath, so a treatment keyed on the first\n// would never draw anything the second had not already drawn. The disabled\n// fade is the page's 38% either way.\n//\n// **Today reads as today whether or not it is selected.** The page gives it\n// an outline and the primary label; selected gives it a filled circle and the\n// on-primary label. A selected today takes the fill, since a circle already\n// says where you are and two rings would say it twice.\n//\n// **The month is moved by IconButton's shape rather than by IconButton.**\n// React Aria wires `slot=\"previous\"` and `slot=\"next\"` on its own `Button`,\n// and IconButton renders React Aria's `Button` too — so nesting one inside\n// the slot would put two buttons where the page draws one. The chevrons take\n// the standard icon button's 40dp square and its state layer instead.\n\ntype CalendarProps<T extends DateValue = DateValue> = Omit<RACCalendarProps<T>, 'children' | 'className' | 'style'> & {\n /** A function may compute the class from the calendar's render state. */\n className?: RACCalendarProps<T>['className'];\n /** A function may compute the style from the calendar's render state. */\n style?: RACCalendarProps<T>['style'];\n};\n\n/**\n * A month calendar for picking a date. The value is React Aria's: pass\n * `value` with `onChange` to control it, or `defaultValue` to let it keep its\n * own, both as an `@internationalized/date` value from this package's\n * `./date` subpath.\n *\n * ```tsx\n * import { today, getLocalTimeZone } from '@kanso-labs/kanso-ui/date'\n *\n * <Calendar aria-label=\"Label\" defaultValue={today(getLocalTimeZone())} />\n * ```\n *\n * `minValue` and `maxValue` bound it, `isDateUnavailable` rules individual\n * dates out, and `visibleDuration` of `{ months: 2 }` draws two months side\n * by side. Name it with `aria-label` or `aria-labelledby`; React Aria\n * composes the visible month into that name itself.\n *\n * The call site's `className` and `style` land on the container, which is the\n * element a layout positions.\n */\nfunction Calendar<T extends DateValue>(props: CalendarProps<T>) {\n return <RACCalendar<T> {...props} {...mergeStatefulStyles(stylex.props(calendarStyles.root), props)}>\n <CalendarHeader />\n <div {...stylex.props(calendarStyles.months)}>\n {monthOffsets(props.visibleDuration?.months ?? 1).map(offset => <RACCalendarGrid key={offset.months} offset={offset} {...stylex.props(calendarStyles.grid)}>\n <CalendarGridHeader />\n <RACCalendarGridBody>{gridCell}</RACCalendarGridBody>\n </RACCalendarGrid>)}\n </div>\n </RACCalendar>;\n}\n\n// A date's classes, from React Aria's render state. StyleX cannot target\n// `[data-selected]` on the element it is styling, so the state comes from\n// what React Aria hands the className.\n//\n// The order matters. `selected` is applied after `today`, so a selected today\n// takes the fill rather than the outline — a circle already says where you\n// are, and two rings would say it twice. `disabled` is last of all, and\n// StyleX replaces a property whole, so it takes the hover branches with it.\nfunction cellClassName(state: {\n isDisabled: boolean;\n isSelected: boolean;\n isToday: boolean;\n}) {\n return stylex.props(calendarStyles.cell, focus.ring, state.isToday && calendarStyles.cellToday, state.isSelected && calendarStyles.cellSelected, state.isDisabled && calendarStyles.cellDisabled).className ?? '';\n}\nfunction gridCell(date: CalendarDate): ReactElement {\n return <RACCalendarCell className={cellClassName} date={date} />;\n}\nexport type { CalendarProps };\nexport default Calendar;"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4EA,SAAAM,WAAAkB,SAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAF,EAAA,OAAAD,SAAA;EACwCG,KAAAR,oBAAoBd,MAAaY,eAAcW,IAAK,GAAGJ,OAAK;EAACC,EAAA,KAAAD;EAAAC,EAAA,KAAAE;CAAA,OAAAA,KAAAF,EAAA;CAAA,IAAAI;CAAA,IAAAC;CAAA,IAAAL,EAAA,OAAAM,OAAAC,IAAA,2BAAA,GAAA;EAC/FH,KAAA,oBAAC,gBAAD,CAAe,CAAA;EACNC,KAAAzB,MAAaY,eAAcgB,MAAO;EAACR,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;CAAA,OAAA;EAAAD,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;CAAA;CAAA,IAAAS;CAAA,IAAAT,EAAA,OAAAD,QAAAW,iBAAAF,QAAA;EACzCC,KAAAlB,aAAaQ,QAAKW,iBAAwBF,UAA7B,CAAkC,CAAC,CAAAG,IAAKC,KAGlC;EAACZ,EAAA,KAAAD,QAAAW,iBAAAF;EAAAR,EAAA,KAAAS;CAAA,OAAAA,KAAAT,EAAA;CAAA,IAAAa;CAAA,IAAAb,EAAA,OAAAS,IAAA;EAJvBI,KAAA,oBAAA,OAAA;GAKM,GALGR;GACNI,UAAAA;EAIG,CAAA;EAAAT,EAAA,KAAAS;EAAAT,EAAA,KAAAa;CAAA,OAAAA,KAAAb,EAAA;CAAA,IAAAc;CAAA,IAAAd,EAAA,OAAAD,WAAAC,EAAA,OAAAE,MAAAF,EAAA,QAAAa,IAAA;EAPHC,KAAA,qBAAC,UAAD;GAAY,GAAQf;GAAK,GAAMG;GAA/B,UAAA,CACHE,IACAS,EAFe;;EAQHb,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,MAAAa;EAAAb,EAAA,MAAAc;CAAA,OAAAA,KAAAd,EAAA;CAAA,OARTc;AAQS;AATlB,SAAAF,MAAAG,QAAA;CAAA,OAIwE,qBAAC,cAAD;EAA6CA;EAAM,GAAMnC,MAAaY,eAAcwB,IAAK;EAAzF,UAAA,CAC5D,oBAAC,sBAAD,CAAmB,CAAA,GACnB,oBAAC,kBAAD,EAAA,UAAsBC,SAAF,CAAA,CAFwD;CAAMF,GAAAA,OAAMP,MAAZ;AAG5D;AAa5B,SAASU,cAAcC,OAIpB;CACD,OAAOvC,MAAaY,eAAe+B,MAAM9B,MAAM+B,MAAML,MAAMG,WAAW9B,eAAeiC,WAAWN,MAAME,cAAc7B,eAAekC,cAAcP,MAAMC,cAAc5B,eAAemC,YAAY,CAAC,CAAC9B,aAAa;AACjN;AACA,SAASoB,SAASW,MAAkC;CAClD,OAAO,oBAAC,cAAD;EAAiB,WAAWV;EAAqBU;CAAK,CAAA;AAC/D"}
|
|
@@ -1,6 +1,15 @@
|
|
|
1
|
+
import { ReactNode } from "react";
|
|
1
2
|
import { ToggleButtonProps } from "react-aria-components";
|
|
2
3
|
//#region src/components/chip/index.d.ts
|
|
3
|
-
type ChipProps = ToggleButtonProps
|
|
4
|
+
type ChipProps = Omit<ToggleButtonProps, 'children'> & {
|
|
5
|
+
/**
|
|
6
|
+
* The chip's label. A node rather than React Aria's node-or-function,
|
|
7
|
+
* since the chip puts its own check before whatever this is and a function
|
|
8
|
+
* would be handed a `defaultChildren` the chip never rendered. ChipGroup's
|
|
9
|
+
* chip narrows it the same way, for the same reason.
|
|
10
|
+
*/
|
|
11
|
+
children?: ReactNode;
|
|
12
|
+
};
|
|
4
13
|
/**
|
|
5
14
|
* A chip is a two-state button, so its selected state is React Aria's
|
|
6
15
|
* `isSelected`: pass it with `onChange` to control it, or `defaultSelected` to
|
|
@@ -2,8 +2,9 @@ import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
|
|
|
2
2
|
import { mergeStatefulStyles } from "../../styles/merge.js";
|
|
3
3
|
import { focus } from "../../styles/focus.js";
|
|
4
4
|
import { chipStyles } from "../../chip/styles.js";
|
|
5
|
+
import { chipGlyph } from "../../chip/index.js";
|
|
5
6
|
import { c } from "react/compiler-runtime";
|
|
6
|
-
import { jsx } from "react/jsx-runtime";
|
|
7
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
7
8
|
import { ToggleButton } from "react-aria-components";
|
|
8
9
|
//#region src/components/chip/index.tsx
|
|
9
10
|
/**
|
|
@@ -13,7 +14,7 @@ import { ToggleButton } from "react-aria-components";
|
|
|
13
14
|
* rather than a role of its own.
|
|
14
15
|
*/
|
|
15
16
|
function Chip(t0) {
|
|
16
|
-
const $ = c(
|
|
17
|
+
const $ = c(12);
|
|
17
18
|
let T0;
|
|
18
19
|
let children;
|
|
19
20
|
let t1;
|
|
@@ -36,19 +37,28 @@ function Chip(t0) {
|
|
|
36
37
|
t2 = $[4];
|
|
37
38
|
}
|
|
38
39
|
let t3;
|
|
39
|
-
if ($[5] !==
|
|
40
|
-
t3 =
|
|
40
|
+
if ($[5] !== children) {
|
|
41
|
+
t3 = chipContent(children);
|
|
42
|
+
$[5] = children;
|
|
43
|
+
$[6] = t3;
|
|
44
|
+
} else t3 = $[6];
|
|
45
|
+
let t4;
|
|
46
|
+
if ($[7] !== T0 || $[8] !== t1 || $[9] !== t2 || $[10] !== t3) {
|
|
47
|
+
t4 = /* @__PURE__ */ jsx(T0, {
|
|
41
48
|
...t1,
|
|
42
49
|
...t2,
|
|
43
|
-
children
|
|
50
|
+
children: t3
|
|
44
51
|
});
|
|
45
|
-
$[
|
|
46
|
-
$[
|
|
47
|
-
$[
|
|
48
|
-
$[
|
|
49
|
-
$[
|
|
50
|
-
} else
|
|
51
|
-
return
|
|
52
|
+
$[7] = T0;
|
|
53
|
+
$[8] = t1;
|
|
54
|
+
$[9] = t2;
|
|
55
|
+
$[10] = t3;
|
|
56
|
+
$[11] = t4;
|
|
57
|
+
} else t4 = $[11];
|
|
58
|
+
return t4;
|
|
59
|
+
}
|
|
60
|
+
function chipContent(children) {
|
|
61
|
+
return (state) => /* @__PURE__ */ jsxs(Fragment, { children: [chipGlyph(state.isSelected), children] });
|
|
52
62
|
}
|
|
53
63
|
function propsFor(state) {
|
|
54
64
|
return props(chipStyles.base, focus.ring, state.isSelected ? chipStyles.selected : chipStyles.unselected, state.isDisabled && chipStyles.disabled, state.isDisabled && (state.isSelected ? chipStyles.disabledSelected : chipStyles.disabledUnselected));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["ToggleButtonProps","ToggleButtonRenderProps","stylex","ToggleButton","chipStyles","focus","mergeStatefulStyles","ChipProps","Chip","t0","$","_c","T0","
|
|
1
|
+
{"version":3,"file":"index.js","names":["ReactNode","ToggleButtonProps","RACToggleButtonProps","ToggleButtonRenderProps","stylex","ToggleButton","chipGlyph","chipStyles","focus","mergeStatefulStyles","ChipProps","Omit","children","Chip","t0","$","_c","T0","t1","t2","t3","props","propsFor","chipContent","t4","state","isSelected","base","ring","selected","unselected","isDisabled","disabled","disabledSelected","disabledUnselected"],"sources":["../../../src/components/chip/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ToggleButtonProps as RACToggleButtonProps, ToggleButtonRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { ToggleButton } from 'react-aria-components';\nimport { chipGlyph } from '../../chip';\nimport { chipStyles } from '../../chip/styles';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\n\n// The pill, its two containers, its check and its disabled treatment are the\n// chip module's in `src/chip`, shared with the chips a ChipGroup draws; what\n// is here is React Aria's `ToggleButton` around them, which is what makes a\n// standalone chip a two-state button rather than one of a set.\n\ntype ChipProps = Omit<RACToggleButtonProps, 'children'> & {\n /**\n * The chip's label. A node rather than React Aria's node-or-function,\n * since the chip puts its own check before whatever this is and a function\n * would be handed a `defaultChildren` the chip never rendered. ChipGroup's\n * chip narrows it the same way, for the same reason.\n */\n children?: ReactNode;\n};\n\n/**\n * A chip is a two-state button, so its selected state is React Aria's\n * `isSelected`: pass it with `onChange` to control it, or `defaultSelected` to\n * let it keep its own state. Selection is announced through `aria-pressed`\n * rather than a role of its own.\n */\nfunction Chip({\n children,\n ...props\n}: ChipProps) {\n return <ToggleButton {...props} {...mergeStatefulStyles(propsFor, props)}>\n {chipContent(children)}\n </ToggleButton>;\n}\n\n// What the chip draws, from React Aria's render state: the check while it is\n// selected, then the label. Built by a call rather than written inline at\n// the prop, which is what react-perf's no-new-function-as-prop is after; the\n// React Compiler memoises the result on its input.\nfunction chipContent(children: ReactNode) {\n return (state: ToggleButtonRenderProps) => <>\n {chipGlyph(state.isSelected)}\n {children}\n </>;\n}\n\n// StyleX has no way to target [data-selected] on the element it is styling,\n// so the selected styles cannot be chosen in CSS. React Aria's answer is to\n// let className and style be functions of the component's own render state,\n// which is what this is — and it is why an uncontrolled chip styles itself\n// correctly without this component keeping a copy of the state.\n//\n// mergeStatefulStyles takes the function rather than a computed result for\n// exactly that reason, and combines it with whatever the call site passed.\nfunction propsFor(state: ToggleButtonRenderProps) {\n return stylex.props(chipStyles.base, focus.ring, state.isSelected ? chipStyles.selected : chipStyles.unselected, state.isDisabled && chipStyles.disabled, state.isDisabled && (state.isSelected ? chipStyles.disabledSelected : chipStyles.disabledUnselected));\n}\nexport type { ChipProps };\nexport default Chip;"],"mappings":";;;;;;;;;;;;;;;AA8BA,SAAAa,KAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAL;CAAA,IAAAM;CAAA,IAAAC;CAAA,IAAAJ,EAAA,OAAAD,IAAA;EAAc,MAAA,EAAAF,UAAAQ,IAAA,GAAAC,UAAAP;EAAAF,WAAAQ;EAIJH,KAAAZ;EAAiBgB,KAAAA;EAAWF,KAAAV,oBAAoBa,UAAUD,KAAK;EAACN,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAH;EAAAG,EAAA,KAAAG;EAAAH,EAAA,KAAAI;CAAA,OAAA;EAAAF,KAAAF,EAAA;EAAAH,WAAAG,EAAA;EAAAG,KAAAH,EAAA;EAAAI,KAAAJ,EAAA;CAAA;CAAA,IAAAK;CAAA,IAAAL,EAAA,OAAAH,UAAA;EACnEQ,KAAAG,YAAYX,QAAQ;EAACG,EAAA,KAAAH;EAAAG,EAAA,KAAAK;CAAA,OAAAA,KAAAL,EAAA;CAAA,IAAAS;CAAA,IAAAT,EAAA,OAAAE,MAAAF,EAAA,OAAAG,MAAAH,EAAA,OAAAI,MAAAJ,EAAA,QAAAK,IAAA;EADnBI,KAAA,oBAAC,IAAD;GAAa,GAAKH;GAAK,GAAMF;GAC/BC,UAAAA;EADe,CAAA;EAEHL,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,MAAAK;EAAAL,EAAA,MAAAS;CAAA,OAAAA,KAAAT,EAAA;CAAA,OAFVS;AAEU;AAOnB,SAASD,YAAYX,UAAqB;CACxC,QAAQa,UAAmC,qBAAA,UAAA,EAAA,UAAA,CACtCnB,UAAUmB,MAAMC,UAAU,GAC1Bd,QACH,EAAA,CAAA;AACJ;AAUA,SAASU,SAASG,OAAgC;CAChD,OAAOrB,MAAaG,WAAWoB,MAAMnB,MAAMoB,MAAMH,MAAMC,aAAanB,WAAWsB,WAAWtB,WAAWuB,YAAYL,MAAMM,cAAcxB,WAAWyB,UAAUP,MAAMM,eAAeN,MAAMC,aAAanB,WAAW0B,mBAAmB1B,WAAW2B,mBAAmB;AAChQ"}
|
|
@@ -6,18 +6,23 @@ import { invalidFrom } from "../../field/root.js";
|
|
|
6
6
|
import { groupStyles } from "../../field/styles.js";
|
|
7
7
|
import { FieldLabel, FieldMessage } from "../../field/index.js";
|
|
8
8
|
import { chipStyles } from "../../chip/styles.js";
|
|
9
|
+
import { chipGlyph } from "../../chip/index.js";
|
|
9
10
|
import { c } from "react/compiler-runtime";
|
|
10
11
|
import { createContext, useContext } from "react";
|
|
11
12
|
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
|
|
12
13
|
import { Button, Tag, TagGroup, TagList } from "react-aria-components";
|
|
13
14
|
//#region src/components/chip-group/index.tsx
|
|
14
15
|
function chipContent(children, removeLabel) {
|
|
15
|
-
return (state) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
16
|
+
return (state) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
|
|
17
|
+
chipGlyph(state.isSelected),
|
|
18
|
+
children,
|
|
19
|
+
state.allowsRemoving ? /* @__PURE__ */ jsx(Button, {
|
|
20
|
+
"aria-label": removeLabel,
|
|
21
|
+
slot: "remove",
|
|
22
|
+
...props(chipStyles.remove),
|
|
23
|
+
children: /* @__PURE__ */ jsx(CloseGlyph, { ...props(chipStyles.removeGlyph) })
|
|
24
|
+
}) : null
|
|
25
|
+
] });
|
|
21
26
|
}
|
|
22
27
|
/**
|
|
23
28
|
* A labelled set of chips, one or more of which can be chosen, each of which
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["ReactNode","TagGroupProps","RACTagGroupProps","TagListProps","RACTagListProps","TagProps","RACTagProps","TagRenderProps","stylex","createContext","useContext","Button","RACButton","Tag","RACTag","TagGroup","RACTagGroup","TagList","RACTagList","chipStyles","FieldLabel","FieldMessage","invalidFrom","groupStyles","CloseGlyph","focus","mergeStatefulStyles","mergeStyles","spacing","ChipGroupChipProps","Omit","children","className","style","ChipGroupProps","description","error","label","removeLabel","Pick","T","chipContent","state","allowsRemoving","props","remove","removeGlyph","RemoveLabelContext","LABEL_STATE_VALID","isInvalid","LABEL_STATE_INVALID","ChipGroup","t0","$","_c","T0","invalid","items","renderEmptyState","t1","t2","t3","t4","t5","t6","t7","t8","t9","undefined","root","ChipGroupChip","textValue","textOf","chipPropsFor","base","ring","isSelected","selected","unselected","isDisabled","disabled","disabledSelected","disabledUnselected","Chip"],"sources":["../../../src/components/chip-group/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { TagGroupProps as RACTagGroupProps, TagListProps as RACTagListProps, TagProps as RACTagProps, TagRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { createContext, useContext } from 'react';\nimport { Button as RACButton, Tag as RACTag, TagGroup as RACTagGroup, TagList as RACTagList } from 'react-aria-components';\nimport { chipStyles } from '../../chip/styles';\nimport { FieldLabel, FieldMessage } from '../../field';\nimport { invalidFrom } from '../../field/root';\nimport { groupStyles } from '../../field/styles';\nimport { CloseGlyph } from '../../glyphs';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { spacing } from '../../tokens/design.tokens.stylex';\n\n// The chips page's filter and input chips as a set: one or more chosen from a\n// row, each one removable. The pill is the chip module's in `src/chip`,\n// shared with the standalone Chip, so the two cannot drift; what is here is\n// the group around them.\n//\n// Three things it adds over a row of Chips.\n//\n// **It is a group, not a row of buttons.** React Aria's `TagGroup` names the\n// set, describes it, reports it invalid as a whole, and moves between its\n// chips with the arrow keys rather than making each one a tab stop — which\n// is what a set of a dozen filters needs. The label, the supporting line and\n// the error are the field chrome's, so a group reads like the fields beside\n// it, exactly as CheckboxGroup and RadioGroup do.\n//\n// **A chip can be removed.** Give the group `onRemove` and each chip draws\n// the page's trailing close target, an 18dp glyph in a target of its own so a\n// press there removes rather than toggles. Backspace and Delete remove the\n// focused chip too, which is React Aria's.\n//\n// **Selection is the group's, not each chip's.** `selectionMode` and\n// `selectedKeys` live on the group, so a set that chooses one of its chips\n// and a set that chooses several are the same component with a different\n// word. A chip on its own that toggles nothing else is still Chip.\n//\n// One thing is worth knowing about how this maps onto React Aria. A chip's\n// text value is read off its children and found only when they are a plain\n// string, and a chip here is always an element — the label sits beside a\n// close target. So a plain-string label is passed through as the text value,\n// which is what typeahead and a screen reader's announcement are made of;\n// see ListBox.Item, where the same thing bit.\n\ntype ChipGroupChipProps = Omit<RACTagProps, 'children' | 'className' | 'style'> & {\n /** The chip's label. */\n children?: ReactNode;\n /** A function may compute the class from the chip's render state. */\n className?: RACTagProps['className'];\n /** A function may compute the style from the chip's render state. */\n style?: RACTagProps['style'];\n};\ntype ChipGroupProps<T extends object = object> = {\n /** The chips, each with an `id` of its own. */\n children?: ReactNode;\n /**\n * A hint under the group. Replaced by `error` when there is one, so the\n * two never stack.\n */\n description?: string;\n /**\n * The problem with the current selection, in words. Its presence is what\n * puts the group in its error state — the message and `aria-invalid` both\n * follow from it.\n */\n error?: string;\n /**\n * What the group is for. Required rather than optional: a set of chips\n * with no name is a row a screen reader cannot introduce.\n */\n label: string;\n /**\n * What the close target on each chip is called, for a screen reader. React\n * Aria adds the chip's own label after it, so this is the verb rather than\n * the whole phrase — \"Remove\" becomes \"Remove First item\".\n * @default 'Remove'\n */\n removeLabel?: string;\n} & Omit<RACTagGroupProps, 'children'> & Pick<RACTagListProps<T>, 'items' | 'renderEmptyState'>;\n\n// What the chip draws, from React Aria's render state. Built by a call rather\n// than written inline at the prop, which is what react-perf's\n// no-new-function-as-prop is after; the React Compiler memoises the result on\n// its inputs.\n//\n// The close target is drawn only where the group allows removing, which React\n// Aria reports rather than the call site saying so on every chip.\nfunction chipContent(children: ReactNode, removeLabel: string) {\n return (state: TagRenderProps) => <>\n {children}\n {state.allowsRemoving ? <RACButton aria-label={removeLabel} slot=\"remove\" {...stylex.props(chipStyles.remove)}>\n <CloseGlyph {...stylex.props(chipStyles.removeGlyph)} />\n </RACButton> : null}\n </>;\n}\n\n/**\n * A labelled set of chips, one or more of which can be chosen, each of which\n * can be removed. Selection is React Aria's: set `selectionMode` to `single`\n * or `multiple` and pass `selectedKeys` with `onSelectionChange` to control\n * it, or `defaultSelectedKeys` to let it keep its own.\n *\n * ```tsx\n * <ChipGroup label=\"Label\" selectionMode=\"multiple\" onRemove={remove}>\n * <ChipGroup.Chip id=\"first\">First item</ChipGroup.Chip>\n * </ChipGroup>\n * ```\n *\n * Give the group `onRemove` and each chip draws a close target. The arrow\n * keys move between chips, so a set of many is one tab stop rather than many.\n *\n * A chip that toggles nothing else is Chip; this is for a set that shares a\n * value.\n *\n * The call site's `className` and `style` land on the group as a whole,\n * which is the element a layout positions.\n */\n// What each chip calls its close target. A context rather than a prop on the\n// chip, since it is the group's decision and repeating it on every chip is\n// how the two drift.\nconst RemoveLabelContext = createContext('Remove');\n\n// Hoisted so neither is a new object on every render.\nconst LABEL_STATE_VALID = {\n isInvalid: false\n};\nconst LABEL_STATE_INVALID = {\n isInvalid: true\n};\nfunction ChipGroup<T extends object = object>({\n children,\n description,\n error,\n items,\n label,\n removeLabel = 'Remove',\n renderEmptyState,\n ...props\n}: ChipGroupProps<T>) {\n const invalid = invalidFrom(error);\n return <RACTagGroup {...props} {...mergeStyles(stylex.props(groupStyles.root), props)}>\n {/* React Aria's tag group has no disabled state of its own — a chip is\n disabled through the group's `disabledKeys` — so the label follows\n validity alone. */}\n <FieldLabel state={invalid ? LABEL_STATE_INVALID : LABEL_STATE_VALID} variant=\"group\">\n {label}\n </FieldLabel>\n <RemoveLabelContext value={removeLabel}>\n <RACTagList<T> items={items} renderEmptyState={renderEmptyState} className=\"x9f619 x78zum5 x1a02dak x126z3so x1t137rt\">\n {children}\n </RACTagList>\n </RemoveLabelContext>\n <FieldMessage description={description} error={error} inset={false} />\n </RACTagGroup>;\n}\n\n/**\n * One chip. Give every chip an `id` — that is the key selection and removal\n * are reported by.\n */\nfunction ChipGroupChip({\n children,\n ...props\n}: ChipGroupChipProps) {\n const removeLabel = useContext(RemoveLabelContext);\n return <RACTag textValue={props.textValue ?? textOf(children)} {...props} {...mergeStatefulStyles(chipPropsFor, props)}>\n {chipContent(children, removeLabel)}\n </RACTag>;\n}\n\n// StyleX cannot target `[data-selected]` on the element it is styling, so a\n// chip's state comes from the render state React Aria hands its className.\n// Disabled is applied last so it wins over both containers, and StyleX\n// replaces a property whole, so it takes their hover branches with it.\nfunction chipPropsFor(state: TagRenderProps) {\n return stylex.props(chipStyles.base, focus.ring, state.isSelected ? chipStyles.selected : chipStyles.unselected, state.isDisabled && chipStyles.disabled, state.isDisabled && (state.isSelected ? chipStyles.disabledSelected : chipStyles.disabledUnselected));\n}\n\n// What the chip is worth as text, for the typeahead React Aria drives from a\n// chip's words and for what a screen reader announces. It reads it off the\n// children when they are a string and finds nothing when they are not — and a\n// chip here is always an element once it can be removed. So a plain-string\n// label becomes the text value, and anything else has to say what it is worth\n// through `textValue`.\nfunction textOf(children: ReactNode) {\n return typeof children === 'string' ? children : undefined;\n}\nChipGroup.Chip = ChipGroupChip;\nexport type { ChipGroupChipProps, ChipGroupProps };\nexport default ChipGroup;"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","names":["ReactNode","TagGroupProps","RACTagGroupProps","TagListProps","RACTagListProps","TagProps","RACTagProps","TagRenderProps","stylex","createContext","useContext","Button","RACButton","Tag","RACTag","TagGroup","RACTagGroup","TagList","RACTagList","chipGlyph","chipStyles","FieldLabel","FieldMessage","invalidFrom","groupStyles","CloseGlyph","focus","mergeStatefulStyles","mergeStyles","spacing","ChipGroupChipProps","Omit","children","className","style","ChipGroupProps","description","error","label","removeLabel","Pick","T","chipContent","state","isSelected","allowsRemoving","props","remove","removeGlyph","RemoveLabelContext","LABEL_STATE_VALID","isInvalid","LABEL_STATE_INVALID","ChipGroup","t0","$","_c","T0","invalid","items","renderEmptyState","t1","t2","t3","t4","t5","t6","t7","t8","t9","undefined","root","ChipGroupChip","textValue","textOf","chipPropsFor","base","ring","selected","unselected","isDisabled","disabled","disabledSelected","disabledUnselected","Chip"],"sources":["../../../src/components/chip-group/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { TagGroupProps as RACTagGroupProps, TagListProps as RACTagListProps, TagProps as RACTagProps, TagRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { createContext, useContext } from 'react';\nimport { Button as RACButton, Tag as RACTag, TagGroup as RACTagGroup, TagList as RACTagList } from 'react-aria-components';\nimport { chipGlyph } from '../../chip';\nimport { chipStyles } from '../../chip/styles';\nimport { FieldLabel, FieldMessage } from '../../field';\nimport { invalidFrom } from '../../field/root';\nimport { groupStyles } from '../../field/styles';\nimport { CloseGlyph } from '../../glyphs';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { spacing } from '../../tokens/design.tokens.stylex';\n\n// The chips page's filter and input chips as a set: one or more chosen from a\n// row, each one removable. The pill is the chip module's in `src/chip`,\n// shared with the standalone Chip, so the two cannot drift; what is here is\n// the group around them.\n//\n// Three things it adds over a row of Chips.\n//\n// **It is a group, not a row of buttons.** React Aria's `TagGroup` names the\n// set, describes it, reports it invalid as a whole, and moves between its\n// chips with the arrow keys rather than making each one a tab stop — which\n// is what a set of a dozen filters needs. The label, the supporting line and\n// the error are the field chrome's, so a group reads like the fields beside\n// it, exactly as CheckboxGroup and RadioGroup do.\n//\n// **A chip can be removed.** Give the group `onRemove` and each chip draws\n// the page's trailing close target, an 18dp glyph in a target of its own so a\n// press there removes rather than toggles. Backspace and Delete remove the\n// focused chip too, which is React Aria's. A chosen chip's check sits at the\n// other end, so a chip that is both selected and removable carries one glyph\n// on each side of its label.\n//\n// **Selection is the group's, not each chip's.** `selectionMode` and\n// `selectedKeys` live on the group, so a set that chooses one of its chips\n// and a set that chooses several are the same component with a different\n// word. A chip on its own that toggles nothing else is still Chip.\n//\n// One thing is worth knowing about how this maps onto React Aria. A chip's\n// text value is read off its children and found only when they are a plain\n// string, and a chip here is always an element — the label sits beside a\n// close target. So a plain-string label is passed through as the text value,\n// which is what typeahead and a screen reader's announcement are made of;\n// see ListBox.Item, where the same thing bit.\n\ntype ChipGroupChipProps = Omit<RACTagProps, 'children' | 'className' | 'style'> & {\n /** The chip's label. */\n children?: ReactNode;\n /** A function may compute the class from the chip's render state. */\n className?: RACTagProps['className'];\n /** A function may compute the style from the chip's render state. */\n style?: RACTagProps['style'];\n};\ntype ChipGroupProps<T extends object = object> = {\n /** The chips, each with an `id` of its own. */\n children?: ReactNode;\n /**\n * A hint under the group. Replaced by `error` when there is one, so the\n * two never stack.\n */\n description?: string;\n /**\n * The problem with the current selection, in words. Its presence is what\n * puts the group in its error state — the message and `aria-invalid` both\n * follow from it.\n */\n error?: string;\n /**\n * What the group is for. Required rather than optional: a set of chips\n * with no name is a row a screen reader cannot introduce.\n */\n label: string;\n /**\n * What the close target on each chip is called, for a screen reader. React\n * Aria adds the chip's own label after it, so this is the verb rather than\n * the whole phrase — \"Remove\" becomes \"Remove First item\".\n * @default 'Remove'\n */\n removeLabel?: string;\n} & Omit<RACTagGroupProps, 'children'> & Pick<RACTagListProps<T>, 'items' | 'renderEmptyState'>;\n\n// What the chip draws, from React Aria's render state. Built by a call rather\n// than written inline at the prop, which is what react-perf's\n// no-new-function-as-prop is after; the React Compiler memoises the result on\n// its inputs.\n//\n// The check is the chip module's, so a chip in a group and a chip on its own\n// draw the same one. The close target is drawn only where the group allows\n// removing, which React Aria reports rather than the call site saying so on\n// every chip.\nfunction chipContent(children: ReactNode, removeLabel: string) {\n return (state: TagRenderProps) => <>\n {chipGlyph(state.isSelected)}\n {children}\n {state.allowsRemoving ? <RACButton aria-label={removeLabel} slot=\"remove\" {...stylex.props(chipStyles.remove)}>\n <CloseGlyph {...stylex.props(chipStyles.removeGlyph)} />\n </RACButton> : null}\n </>;\n}\n\n/**\n * A labelled set of chips, one or more of which can be chosen, each of which\n * can be removed. Selection is React Aria's: set `selectionMode` to `single`\n * or `multiple` and pass `selectedKeys` with `onSelectionChange` to control\n * it, or `defaultSelectedKeys` to let it keep its own.\n *\n * ```tsx\n * <ChipGroup label=\"Label\" selectionMode=\"multiple\" onRemove={remove}>\n * <ChipGroup.Chip id=\"first\">First item</ChipGroup.Chip>\n * </ChipGroup>\n * ```\n *\n * Give the group `onRemove` and each chip draws a close target. The arrow\n * keys move between chips, so a set of many is one tab stop rather than many.\n *\n * A chip that toggles nothing else is Chip; this is for a set that shares a\n * value.\n *\n * The call site's `className` and `style` land on the group as a whole,\n * which is the element a layout positions.\n */\n// What each chip calls its close target. A context rather than a prop on the\n// chip, since it is the group's decision and repeating it on every chip is\n// how the two drift.\nconst RemoveLabelContext = createContext('Remove');\n\n// Hoisted so neither is a new object on every render.\nconst LABEL_STATE_VALID = {\n isInvalid: false\n};\nconst LABEL_STATE_INVALID = {\n isInvalid: true\n};\nfunction ChipGroup<T extends object = object>({\n children,\n description,\n error,\n items,\n label,\n removeLabel = 'Remove',\n renderEmptyState,\n ...props\n}: ChipGroupProps<T>) {\n const invalid = invalidFrom(error);\n return <RACTagGroup {...props} {...mergeStyles(stylex.props(groupStyles.root), props)}>\n {/* React Aria's tag group has no disabled state of its own — a chip is\n disabled through the group's `disabledKeys` — so the label follows\n validity alone. */}\n <FieldLabel state={invalid ? LABEL_STATE_INVALID : LABEL_STATE_VALID} variant=\"group\">\n {label}\n </FieldLabel>\n <RemoveLabelContext value={removeLabel}>\n <RACTagList<T> items={items} renderEmptyState={renderEmptyState} className=\"x9f619 x78zum5 x1a02dak x126z3so x1t137rt\">\n {children}\n </RACTagList>\n </RemoveLabelContext>\n <FieldMessage description={description} error={error} inset={false} />\n </RACTagGroup>;\n}\n\n/**\n * One chip. Give every chip an `id` — that is the key selection and removal\n * are reported by.\n */\nfunction ChipGroupChip({\n children,\n ...props\n}: ChipGroupChipProps) {\n const removeLabel = useContext(RemoveLabelContext);\n return <RACTag textValue={props.textValue ?? textOf(children)} {...props} {...mergeStatefulStyles(chipPropsFor, props)}>\n {chipContent(children, removeLabel)}\n </RACTag>;\n}\n\n// StyleX cannot target `[data-selected]` on the element it is styling, so a\n// chip's state comes from the render state React Aria hands its className.\n// Disabled is applied last so it wins over both containers, and StyleX\n// replaces a property whole, so it takes their hover branches with it.\nfunction chipPropsFor(state: TagRenderProps) {\n return stylex.props(chipStyles.base, focus.ring, state.isSelected ? chipStyles.selected : chipStyles.unselected, state.isDisabled && chipStyles.disabled, state.isDisabled && (state.isSelected ? chipStyles.disabledSelected : chipStyles.disabledUnselected));\n}\n\n// What the chip is worth as text, for the typeahead React Aria drives from a\n// chip's words and for what a screen reader announces. It reads it off the\n// children when they are a string and finds nothing when they are not — and a\n// chip here is always an element once it can be removed. So a plain-string\n// label becomes the text value, and anything else has to say what it is worth\n// through `textValue`.\nfunction textOf(children: ReactNode) {\n return typeof children === 'string' ? children : undefined;\n}\nChipGroup.Chip = ChipGroupChip;\nexport type { ChipGroupChipProps, ChipGroupProps };\nexport default ChipGroup;"],"mappings":"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"}
|