@kanso-labs/react-native-kanso-ui 0.6.0 → 0.8.0
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 +37 -0
- package/dist/badge/index.js +25 -23
- package/dist/badge/index.js.map +1 -1
- package/dist/button/index.d.ts +2 -1
- package/dist/button/index.js.map +1 -1
- package/dist/button/pending.js +17 -21
- package/dist/button/pending.js.map +1 -1
- package/dist/calendar/index.js +1182 -0
- package/dist/calendar/index.js.map +1 -0
- package/dist/calendar/styles.js +120 -0
- package/dist/calendar/styles.js.map +1 -0
- package/dist/components/autocomplete/index.js +28 -26
- package/dist/components/autocomplete/index.js.map +1 -1
- package/dist/components/avatar/index.d.ts +2 -2
- package/dist/components/avatar/index.js +2 -2
- package/dist/components/avatar/index.js.map +1 -1
- package/dist/components/calendar/index.d.ts +51 -0
- package/dist/components/calendar/index.js +121 -0
- package/dist/components/calendar/index.js.map +1 -0
- package/dist/components/chip-group/index.d.ts +4 -3
- package/dist/components/chip-group/index.js +47 -45
- package/dist/components/chip-group/index.js.map +1 -1
- package/dist/components/copy-field/index.d.ts +5 -5
- package/dist/components/copy-field/index.js +30 -28
- package/dist/components/copy-field/index.js.map +1 -1
- package/dist/components/currency/index.d.ts +2 -2
- package/dist/components/currency/index.js +3 -1
- package/dist/components/currency/index.js.map +1 -1
- package/dist/components/list/index.d.ts +6 -5
- package/dist/components/list/index.js +97 -106
- package/dist/components/list/index.js.map +1 -1
- package/dist/components/menu/index.d.ts +4 -3
- package/dist/components/menu/index.js +33 -40
- package/dist/components/menu/index.js.map +1 -1
- package/dist/components/meter/index.d.ts +2 -1
- package/dist/components/meter/index.js +9 -7
- package/dist/components/meter/index.js.map +1 -1
- package/dist/components/navigation-bar/index.d.ts +3 -9
- package/dist/components/navigation-bar/index.js +10 -34
- package/dist/components/navigation-bar/index.js.map +1 -1
- package/dist/components/navigation-rail/index.d.ts +68 -0
- package/dist/components/navigation-rail/index.js +294 -0
- package/dist/components/navigation-rail/index.js.map +1 -0
- package/dist/components/number-field/index.d.ts +7 -3
- package/dist/components/number-field/index.js +214 -192
- package/dist/components/number-field/index.js.map +1 -1
- package/dist/components/popover/index.js +1 -1
- package/dist/components/product-icon/index.d.ts +2 -2
- package/dist/components/product-icon/index.js +2 -2
- package/dist/components/product-icon/index.js.map +1 -1
- package/dist/components/progress-indicator/index.d.ts +2 -1
- package/dist/components/progress-indicator/index.js +15 -13
- package/dist/components/progress-indicator/index.js.map +1 -1
- package/dist/components/search-field/index.d.ts +3 -3
- package/dist/components/search-field/index.js +105 -104
- package/dist/components/search-field/index.js.map +1 -1
- package/dist/components/sheet/index.d.ts +2 -2
- package/dist/components/sheet/index.js +22 -26
- package/dist/components/sheet/index.js.map +1 -1
- package/dist/components/snackbar/index.d.ts +3 -3
- package/dist/components/snackbar/index.js +36 -34
- package/dist/components/snackbar/index.js.map +1 -1
- package/dist/components/tag/index.d.ts +58 -0
- package/dist/components/tag/index.js +205 -0
- package/dist/components/tag/index.js.map +1 -0
- package/dist/components/text-field/index.d.ts +6 -3
- package/dist/components/text-field/index.js +3 -0
- package/dist/components/text-field/index.js.map +1 -1
- package/dist/field/index.js +39 -36
- package/dist/field/index.js.map +1 -1
- package/dist/glyphs/index.js +19 -1
- package/dist/glyphs/index.js.map +1 -1
- package/dist/i18n/index.js +12 -1
- package/dist/i18n/index.js.map +1 -1
- package/dist/i18n/messages.js +741 -0
- package/dist/i18n/messages.js.map +1 -1
- package/dist/i18n/provider.d.ts +53 -0
- package/dist/i18n/provider.js +96 -0
- package/dist/i18n/provider.js.map +1 -0
- package/dist/index.d.ts +5 -1
- package/dist/index.js +6 -2
- package/dist/indicator/index.js +1 -2
- package/dist/indicator/index.js.map +1 -1
- package/dist/mark/index.js +77 -117
- package/dist/mark/index.js.map +1 -1
- package/dist/mark/initials.js.map +1 -1
- package/dist/navigation/index.d.ts +8 -1
- package/dist/navigation/index.js +113 -64
- package/dist/navigation/index.js.map +1 -1
- package/dist/navigation/styles.js +22 -0
- package/dist/navigation/styles.js.map +1 -1
- package/dist/number/count.js +15 -0
- package/dist/number/count.js.map +1 -0
- package/dist/number/locale.js.map +1 -1
- package/dist/overlay/host.js +30 -21
- package/dist/overlay/host.js.map +1 -1
- package/package.json +3 -2
|
@@ -0,0 +1,121 @@
|
|
|
1
|
+
import { useTheme } from "../../theme/scope.js";
|
|
2
|
+
import { composeStyles } from "../../theme/styles.js";
|
|
3
|
+
import { useLocaleOf } from "../../i18n/provider.js";
|
|
4
|
+
import { stylesOf } from "../../calendar/styles.js";
|
|
5
|
+
import { CalendarFrame, visibleMonthOf } from "../../calendar/index.js";
|
|
6
|
+
import { c } from "react/compiler-runtime";
|
|
7
|
+
import { View } from "react-native";
|
|
8
|
+
import { jsx } from "react/jsx-runtime";
|
|
9
|
+
import { createCalendar } from "@internationalized/date";
|
|
10
|
+
import { useCalendarState } from "react-stately/useCalendarState";
|
|
11
|
+
//#region src/components/calendar/index.tsx
|
|
12
|
+
/**
|
|
13
|
+
* A month calendar for picking a date. The value is an
|
|
14
|
+
* `@internationalized/date` value, as on web: pass `value` with `onChange` to
|
|
15
|
+
* control it, or `defaultValue` to let it keep its own.
|
|
16
|
+
*
|
|
17
|
+
* ```tsx
|
|
18
|
+
* import { getLocalTimeZone, today } from '@internationalized/date'
|
|
19
|
+
*
|
|
20
|
+
* <Calendar aria-label="Label" defaultValue={today(getLocalTimeZone())} />
|
|
21
|
+
* ```
|
|
22
|
+
*
|
|
23
|
+
* `minValue` and `maxValue` bound it, and `isDateUnavailable` rules
|
|
24
|
+
* individual dates out. Name it with `aria-label`; the month shown is added
|
|
25
|
+
* to the name.
|
|
26
|
+
*
|
|
27
|
+
* `style`, `ref` and `testID` land on the container.
|
|
28
|
+
*/
|
|
29
|
+
function Calendar(t0) {
|
|
30
|
+
const $ = c(26);
|
|
31
|
+
let ariaLabel;
|
|
32
|
+
let locale;
|
|
33
|
+
let props;
|
|
34
|
+
let ref;
|
|
35
|
+
let style;
|
|
36
|
+
let t1;
|
|
37
|
+
let testID;
|
|
38
|
+
if ($[0] !== t0) {
|
|
39
|
+
({"aria-label": ariaLabel, locale, ref, showMonthYearMenus: t1, style, testID, ...props} = t0);
|
|
40
|
+
$[0] = t0;
|
|
41
|
+
$[1] = ariaLabel;
|
|
42
|
+
$[2] = locale;
|
|
43
|
+
$[3] = props;
|
|
44
|
+
$[4] = ref;
|
|
45
|
+
$[5] = style;
|
|
46
|
+
$[6] = t1;
|
|
47
|
+
$[7] = testID;
|
|
48
|
+
} else {
|
|
49
|
+
ariaLabel = $[1];
|
|
50
|
+
locale = $[2];
|
|
51
|
+
props = $[3];
|
|
52
|
+
ref = $[4];
|
|
53
|
+
style = $[5];
|
|
54
|
+
t1 = $[6];
|
|
55
|
+
testID = $[7];
|
|
56
|
+
}
|
|
57
|
+
const showMonthYearMenus = t1 === void 0 ? false : t1;
|
|
58
|
+
const writtenIn = useLocaleOf(locale);
|
|
59
|
+
const own = stylesOf(useTheme());
|
|
60
|
+
let t2;
|
|
61
|
+
if ($[8] !== props || $[9] !== writtenIn) {
|
|
62
|
+
t2 = {
|
|
63
|
+
...props,
|
|
64
|
+
createCalendar,
|
|
65
|
+
locale: writtenIn
|
|
66
|
+
};
|
|
67
|
+
$[8] = props;
|
|
68
|
+
$[9] = writtenIn;
|
|
69
|
+
$[10] = t2;
|
|
70
|
+
} else t2 = $[10];
|
|
71
|
+
const state = useCalendarState(t2);
|
|
72
|
+
let t3;
|
|
73
|
+
if ($[11] !== state || $[12] !== writtenIn) {
|
|
74
|
+
t3 = visibleMonthOf(state, writtenIn);
|
|
75
|
+
$[11] = state;
|
|
76
|
+
$[12] = writtenIn;
|
|
77
|
+
$[13] = t3;
|
|
78
|
+
} else t3 = $[13];
|
|
79
|
+
const month = t3;
|
|
80
|
+
const T0 = View;
|
|
81
|
+
const t4 = ariaLabel === void 0 ? month : `${ariaLabel}, ${month}`;
|
|
82
|
+
const t5 = "group";
|
|
83
|
+
const t6 = composeStyles(own.root, style);
|
|
84
|
+
let t7;
|
|
85
|
+
if ($[14] !== props.firstDayOfWeek || $[15] !== showMonthYearMenus || $[16] !== state || $[17] !== writtenIn) {
|
|
86
|
+
t7 = /* @__PURE__ */ jsx(CalendarFrame, {
|
|
87
|
+
firstDayOfWeek: props.firstDayOfWeek,
|
|
88
|
+
locale: writtenIn,
|
|
89
|
+
showMonthYearMenus,
|
|
90
|
+
state
|
|
91
|
+
});
|
|
92
|
+
$[14] = props.firstDayOfWeek;
|
|
93
|
+
$[15] = showMonthYearMenus;
|
|
94
|
+
$[16] = state;
|
|
95
|
+
$[17] = writtenIn;
|
|
96
|
+
$[18] = t7;
|
|
97
|
+
} else t7 = $[18];
|
|
98
|
+
let t8;
|
|
99
|
+
if ($[19] !== T0 || $[20] !== ref || $[21] !== t4 || $[22] !== t6 || $[23] !== t7 || $[24] !== testID) {
|
|
100
|
+
t8 = /* @__PURE__ */ jsx(T0, {
|
|
101
|
+
"aria-label": t4,
|
|
102
|
+
ref,
|
|
103
|
+
role: t5,
|
|
104
|
+
style: t6,
|
|
105
|
+
testID,
|
|
106
|
+
children: t7
|
|
107
|
+
});
|
|
108
|
+
$[19] = T0;
|
|
109
|
+
$[20] = ref;
|
|
110
|
+
$[21] = t4;
|
|
111
|
+
$[22] = t6;
|
|
112
|
+
$[23] = t7;
|
|
113
|
+
$[24] = testID;
|
|
114
|
+
$[25] = t8;
|
|
115
|
+
} else t8 = $[25];
|
|
116
|
+
return t8;
|
|
117
|
+
}
|
|
118
|
+
//#endregion
|
|
119
|
+
export { Calendar };
|
|
120
|
+
|
|
121
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","names":["ComponentRef","Ref","StyleProp","ViewStyle","DateValue","CalendarProps","StatelyCalendarProps","createCalendar","View","useCalendarState","CalendarFrame","visibleMonthOf","stylesOf","useLocaleOf","useTheme","composeStyles","Pick","T","locale","ref","showMonthYearMenus","style","testID","Calendar","t0","$","_c","ariaLabel","props","t1","undefined","writtenIn","own","t2","state","t3","month","T0","t4","t5","t6","root","t7","firstDayOfWeek","t8","_c"],"sources":["../../../src/components/calendar/index.tsx"],"sourcesContent":["import type { ComponentRef, Ref } from 'react'\nimport type { StyleProp, ViewStyle } from 'react-native'\nimport type {\n DateValue,\n CalendarProps as StatelyCalendarProps,\n} from 'react-stately/useCalendarState'\n\nimport { createCalendar } from '@internationalized/date'\nimport { View } from 'react-native'\nimport { useCalendarState } from 'react-stately/useCalendarState'\n\nimport { CalendarFrame, visibleMonthOf } from '../../calendar'\nimport { stylesOf } from '../../calendar/styles'\nimport { useLocaleOf } from '../../i18n/provider'\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles } from '../../theme/styles'\n\n// kanso-ui's Calendar, the date pickers page's docked calendar: a month grid\n// with a circle on the selected date and an outline on today. Its values are\n// that page's: a 360dp container on the high surface container, 48dp date\n// cells with a 40dp state layer inside them, body large for both the weekday\n// row and the dates, and primary for the selected circle and for today's\n// outline. The parts are in src/calendar.\n//\n// The state is React Stately's `useCalendarState`, which web's React Aria\n// calendar is built on, over `@internationalized/date`, so the selection,\n// the bounds and the locale's calendar, first day of the week and digits\n// behave as they do on web.\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 any\n// month occupies, so the calendar keeps its height as the month moves and a\n// shorter month leaves its last rows empty.\n//\n// `showMonthYearMenus` draws the page's docked header instead of one heading:\n// the month's menu button between the chevrons that step it and the year's\n// after them, each opening its list where the grid was, as web's does. The\n// page draws the lists there, and a calendar inside a picker is already in\n// a panel, so a menu over it would be a panel over a panel.\n//\n// Five things are this component's own, as on web.\n//\n// **The year menu has no chevrons of its own.** The page draws a pair either\n// side of it that step a year; the year list reaches any year within a\n// century of the one shown in one press, or any the bounds allow where they\n// are closer.\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 circle is the pressable, centred in a 48dp column and a 48dp\n// row, and its `hitSlop` reaches the 4dp past it on every side, so the whole\n// square takes the press. The chevrons and the menu buttons reach a 48dp\n// target the same way.\n//\n// **It narrows to its container.** The page's docked calendar is 360dp, and\n// a compact window leaves 328dp between its margins, so the calendar is 360\n// at most and the columns share whatever is left below that.\n//\n// **A date from the month either side is faded because it is disabled**, as\n// React Aria disables those dates: the page's 38% either way. A date\n// `isDateUnavailable` rules out is struck through at full contrast instead,\n// since a reader can still land on it and has to read it.\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\n// the on-primary label. A selected today takes the fill.\n//\n// Web's month changes at once. Here **the weeks slide in** from the side the\n// new month comes from, Material Design's shared axis transition, and change\n// at once under reduced motion.\n//\n// **The locale is the `I18nProvider`'s**, as web reads it from React Aria's,\n// unless the `locale` prop names another, and the device's under neither. The\n// words the calendar writes, its chevrons' names and its dates', are React\n// Aria's in that locale.\n\ntype CalendarProps<T extends DateValue = DateValue> = Pick<\n StatelyCalendarProps<T>,\n | 'defaultFocusedValue'\n | 'defaultValue'\n | 'firstDayOfWeek'\n | 'focusedValue'\n | 'isDateUnavailable'\n | 'isDisabled'\n | 'isReadOnly'\n | 'maxValue'\n | 'minValue'\n | 'onChange'\n | 'onFocusChange'\n | 'value'\n> & {\n /**\n * The calendar's name. The month shown is added to it, as React Aria adds\n * it on web.\n */\n readonly 'aria-label'?: string\n /**\n * The BCP 47 locale the calendar is written in: its month and weekday\n * names, its digits, its first day of the week and its calendar system.\n * Defaults to the `I18nProvider`'s, or the device's outside one.\n */\n readonly locale?: string\n readonly ref?: Ref<ComponentRef<typeof View>>\n /**\n * Whether the header draws the month and the year as menu buttons, each\n * opening a list of them in the grid's place, as the docked date picker's\n * header does, rather than one heading between the chevrons. For a date\n * far from the one shown, such as a date of birth: the year list runs a\n * century either side of the year shown, or to `minValue` and `maxValue`\n * where they are closer.\n * @default false\n */\n readonly showMonthYearMenus?: boolean\n readonly style?: StyleProp<ViewStyle>\n readonly testID?: string\n}\n\n/**\n * A month calendar for picking a date. The value is an\n * `@internationalized/date` value, as on web: pass `value` with `onChange` to\n * control it, or `defaultValue` to let it keep its own.\n *\n * ```tsx\n * import { getLocalTimeZone, today } from '@internationalized/date'\n *\n * <Calendar aria-label=\"Label\" defaultValue={today(getLocalTimeZone())} />\n * ```\n *\n * `minValue` and `maxValue` bound it, and `isDateUnavailable` rules\n * individual dates out. Name it with `aria-label`; the month shown is added\n * to the name.\n *\n * `style`, `ref` and `testID` land on the container.\n */\nfunction Calendar<T extends DateValue = DateValue>({\n 'aria-label': ariaLabel,\n locale,\n ref,\n showMonthYearMenus = false,\n style,\n testID,\n ...props\n}: CalendarProps<T>) {\n const writtenIn = useLocaleOf(locale)\n const own = stylesOf(useTheme())\n const state = useCalendarState<T>({\n ...props,\n createCalendar,\n locale: writtenIn,\n })\n const month = visibleMonthOf(state, writtenIn)\n\n return (\n <View\n aria-label={ariaLabel === undefined ? month : `${ariaLabel}, ${month}`}\n ref={ref}\n role=\"group\"\n style={composeStyles<ViewStyle>(own.root, style)}\n testID={testID}\n >\n <CalendarFrame\n firstDayOfWeek={props.firstDayOfWeek}\n locale={writtenIn}\n showMonthYearMenus={showMonthYearMenus}\n state={state}\n />\n </View>\n )\n}\n\nexport type { CalendarProps }\n\nexport { Calendar }\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuIA,SAAAuB,SAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAT;CAAA,IAAAU;CAAA,IAAAT;CAAA,IAAAE;CAAA,IAAAQ;CAAA,IAAAP;CAAA,IAAAG,EAAA,OAAAD,IAAA;EAAmD,CAAA,CAAA,cAAAG,WAAAT,QAAAC,KAAAC,oBAAAS,IAAAR,OAAAC,QAAA,GAAAM,SAAAJ;EAQhCC,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAP;EAAAO,EAAA,KAAAG;EAAAH,EAAA,KAAAN;EAAAM,EAAA,KAAAJ;EAAAI,EAAA,KAAAI;EAAAJ,EAAA,KAAAH;CAAA,OAAA;EAAAK,YAAAF,EAAA;EAAAP,SAAAO,EAAA;EAAAG,QAAAH,EAAA;EAAAN,MAAAM,EAAA;EAAAJ,QAAAI,EAAA;EAAAI,KAAAJ,EAAA;EAAAH,SAAAG,EAAA;CAAA;CAJjB,MAAAL,qBAAAS,OAAAC,KAAAA,IAAA,QAAAD;CAKA,MAAAE,YAAkBlB,YAAYK,MAAM;CACpC,MAAAc,MAAYpB,SAASE,SAAS,CAAC;CAAC,IAAAmB;CAAA,IAAAR,EAAA,OAAAG,SAAAH,EAAA,OAAAM,WAAA;EACEE,KAAA;GAAA,GAC7BL;GAAKrB;GAAAW,QAEAa;EACV;EAACN,EAAA,KAAAG;EAAAH,EAAA,KAAAM;EAAAN,EAAA,MAAAQ;CAAA,OAAAA,KAAAR,EAAA;CAJD,MAAAS,QAAczB,iBAAoBwB,EAIjC;CAAC,IAAAE;CAAA,IAAAV,EAAA,QAAAS,SAAAT,EAAA,QAAAM,WAAA;EACYI,KAAAxB,eAAeuB,OAAOH,SAAS;EAACN,EAAA,MAAAS;EAAAT,EAAA,MAAAM;EAAAN,EAAA,MAAAU;CAAA,OAAAA,KAAAV,EAAA;CAA9C,MAAAW,QAAcD;CAGX,MAAAE,KAAA7B;CACa,MAAA8B,KAAAX,cAAcG,KAAAA,IAAdM,QAAA,GAAqCT,UAAS,IAAKS;CAE1D,MAAAG,KAAA;CACE,MAAAC,KAAAzB,cAAyBiB,IAAGS,MAAOpB,KAAK;CAAC,IAAAqB;CAAA,IAAAjB,EAAA,QAAAG,MAAAe,kBAAAlB,EAAA,QAAAL,sBAAAK,EAAA,QAAAS,SAAAT,EAAA,QAAAM,WAAA;EAGhDW,KAAA,oBAAC,eAAD;GACkB,gBAAAd,MAAKe;GACbZ,QAAAA;GACYX;GACbc;EAAK,CAAA;EACZT,EAAA,MAAAG,MAAAe;EAAAlB,EAAA,MAAAL;EAAAK,EAAA,MAAAS;EAAAT,EAAA,MAAAM;EAAAN,EAAA,MAAAiB;CAAA,OAAAA,KAAAjB,EAAA;CAAA,IAAAmB;CAAA,IAAAnB,EAAA,QAAAY,MAAAZ,EAAA,QAAAN,OAAAM,EAAA,QAAAa,MAAAb,EAAA,QAAAe,MAAAf,EAAA,QAAAiB,MAAAjB,EAAA,QAAAH,QAAA;EAZJsB,KAAA,oBAAC,IAAD;GACc,cAAAN;GACPnB;GACA,MAAAoB;GACE,OAAAC;GACClB;GAERoB,UAAAA;EAPG,CAAA;EAaEjB,EAAA,MAAAY;EAAAZ,EAAA,MAAAN;EAAAM,EAAA,MAAAa;EAAAb,EAAA,MAAAe;EAAAf,EAAA,MAAAiB;EAAAjB,EAAA,MAAAH;EAAAG,EAAA,MAAAmB;CAAA,OAAAA,KAAAnB,EAAA;CAAA,OAbPmB;AAaO"}
|
|
@@ -77,8 +77,9 @@ type ChipGroupProps<T extends object = object> = Omit<ViewProps, 'children' | 's
|
|
|
77
77
|
/**
|
|
78
78
|
* What the close target on each chip is called, for a screen reader. The
|
|
79
79
|
* chip's own text follows it, so this is the verb rather than the whole
|
|
80
|
-
* phrase: "Remove" becomes "Remove First item".
|
|
81
|
-
*
|
|
80
|
+
* phrase: "Remove" becomes "Remove First item". Left out, it is the word
|
|
81
|
+
* React Aria gives web's in the `I18nProvider`'s locale, or the device's
|
|
82
|
+
* outside one, "Remove" in English.
|
|
82
83
|
*/
|
|
83
84
|
readonly removeLabel?: string;
|
|
84
85
|
/** What the row draws once it holds no chips. */
|
|
@@ -117,7 +118,7 @@ type ChipGroupProps<T extends object = object> = Omit<ViewProps, 'children' | 's
|
|
|
117
118
|
* where it sits. `style`, `ref` and `testID` land on the group as a whole,
|
|
118
119
|
* which is the element a layout positions.
|
|
119
120
|
*/
|
|
120
|
-
declare function ChipGroup<T extends object = object>({ children, defaultSelectedKeys, description, disabledKeys, disallowEmptySelection, error, items, label, onRemove, onSelectionChange, removeLabel, renderEmptyState, selectedKeys, selectionMode, style, ...props }: ChipGroupProps<T>): import("react").JSX.Element;
|
|
121
|
+
declare function ChipGroup<T extends object = object>({ children, defaultSelectedKeys, description, disabledKeys, disallowEmptySelection, error, items, label, onRemove, onSelectionChange, removeLabel: ownRemoveLabel, renderEmptyState, selectedKeys, selectionMode, style, ...props }: ChipGroupProps<T>): import("react").JSX.Element;
|
|
121
122
|
declare namespace ChipGroup {
|
|
122
123
|
var Chip: typeof ChipGroupChip;
|
|
123
124
|
}
|
|
@@ -2,6 +2,7 @@ import { useTheme } from "../../theme/scope.js";
|
|
|
2
2
|
import { composeStyles, themedStyles } from "../../theme/styles.js";
|
|
3
3
|
import { usePressFeedback } from "../../press/index.js";
|
|
4
4
|
import { useTypeRole } from "../../typography/roles.js";
|
|
5
|
+
import { useMessages } from "../../i18n/provider.js";
|
|
5
6
|
import { CloseGlyph } from "../../glyphs/index.js";
|
|
6
7
|
import { AnimatedPressable, toggleState } from "../../button/index.js";
|
|
7
8
|
import { stylesOf } from "../../chip/styles.js";
|
|
@@ -98,14 +99,14 @@ function ChipGroup(t0) {
|
|
|
98
99
|
let label;
|
|
99
100
|
let onRemove;
|
|
100
101
|
let onSelectionChange;
|
|
102
|
+
let ownRemoveLabel;
|
|
101
103
|
let props;
|
|
102
104
|
let renderEmptyState;
|
|
103
105
|
let selectedKeys;
|
|
104
106
|
let style;
|
|
105
107
|
let t1;
|
|
106
|
-
let t2;
|
|
107
108
|
if ($[0] !== t0) {
|
|
108
|
-
({children, defaultSelectedKeys, description, disabledKeys, disallowEmptySelection, error, items, label, onRemove, onSelectionChange, removeLabel:
|
|
109
|
+
({children, defaultSelectedKeys, description, disabledKeys, disallowEmptySelection, error, items, label, onRemove, onSelectionChange, removeLabel: ownRemoveLabel, renderEmptyState, selectedKeys, selectionMode: t1, style, ...props} = t0);
|
|
109
110
|
$[0] = t0;
|
|
110
111
|
$[1] = children;
|
|
111
112
|
$[2] = defaultSelectedKeys;
|
|
@@ -117,12 +118,12 @@ function ChipGroup(t0) {
|
|
|
117
118
|
$[8] = label;
|
|
118
119
|
$[9] = onRemove;
|
|
119
120
|
$[10] = onSelectionChange;
|
|
120
|
-
$[11] =
|
|
121
|
-
$[12] =
|
|
122
|
-
$[13] =
|
|
123
|
-
$[14] =
|
|
124
|
-
$[15] =
|
|
125
|
-
$[16] =
|
|
121
|
+
$[11] = ownRemoveLabel;
|
|
122
|
+
$[12] = props;
|
|
123
|
+
$[13] = renderEmptyState;
|
|
124
|
+
$[14] = selectedKeys;
|
|
125
|
+
$[15] = style;
|
|
126
|
+
$[16] = t1;
|
|
126
127
|
} else {
|
|
127
128
|
children = $[1];
|
|
128
129
|
defaultSelectedKeys = $[2];
|
|
@@ -134,21 +135,22 @@ function ChipGroup(t0) {
|
|
|
134
135
|
label = $[8];
|
|
135
136
|
onRemove = $[9];
|
|
136
137
|
onSelectionChange = $[10];
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
138
|
+
ownRemoveLabel = $[11];
|
|
139
|
+
props = $[12];
|
|
140
|
+
renderEmptyState = $[13];
|
|
141
|
+
selectedKeys = $[14];
|
|
142
|
+
style = $[15];
|
|
143
|
+
t1 = $[16];
|
|
143
144
|
}
|
|
144
|
-
const
|
|
145
|
-
const
|
|
145
|
+
const selectionMode = t1 === void 0 ? "none" : t1;
|
|
146
|
+
const messages = useMessages();
|
|
147
|
+
const removeLabel = ownRemoveLabel ?? messages.remove;
|
|
146
148
|
const theme = useTheme();
|
|
147
|
-
const
|
|
148
|
-
let
|
|
149
|
-
if ($[17] !== defaultSelectedKeys || $[18] !== disabledKeys || $[19] !== disallowEmptySelection || $[20] !== items || $[21] !== onSelectionChange || $[22] !== selectedKeys || $[23] !== selectionMode || $[24] !==
|
|
150
|
-
|
|
151
|
-
children:
|
|
149
|
+
const t2 = children;
|
|
150
|
+
let t3;
|
|
151
|
+
if ($[17] !== defaultSelectedKeys || $[18] !== disabledKeys || $[19] !== disallowEmptySelection || $[20] !== items || $[21] !== onSelectionChange || $[22] !== selectedKeys || $[23] !== selectionMode || $[24] !== t2) {
|
|
152
|
+
t3 = {
|
|
153
|
+
children: t2,
|
|
152
154
|
defaultSelectedKeys,
|
|
153
155
|
disabledKeys,
|
|
154
156
|
disallowEmptySelection,
|
|
@@ -164,36 +166,36 @@ function ChipGroup(t0) {
|
|
|
164
166
|
$[21] = onSelectionChange;
|
|
165
167
|
$[22] = selectedKeys;
|
|
166
168
|
$[23] = selectionMode;
|
|
167
|
-
$[24] =
|
|
168
|
-
$[25] =
|
|
169
|
-
} else
|
|
170
|
-
const state = useListState(
|
|
169
|
+
$[24] = t2;
|
|
170
|
+
$[25] = t3;
|
|
171
|
+
} else t3 = $[25];
|
|
172
|
+
const state = useListState(t3);
|
|
171
173
|
const labelId = useId();
|
|
172
174
|
const messageId = useId();
|
|
173
175
|
const labelRole = useTypeRole("labelLarge");
|
|
174
176
|
const messageRole = useTypeRole("bodySmall");
|
|
175
|
-
let
|
|
177
|
+
let t4;
|
|
176
178
|
if ($[26] !== description || $[27] !== error || $[28] !== label || $[29] !== labelId || $[30] !== labelRole || $[31] !== messageId || $[32] !== messageRole || $[33] !== onRemove || $[34] !== props || $[35] !== removeLabel || $[36] !== renderEmptyState || $[37] !== state || $[38] !== style || $[39] !== theme) {
|
|
177
179
|
const own = groupStylesOf(theme);
|
|
178
180
|
const invalid = error !== void 0;
|
|
179
181
|
const message = error ?? description;
|
|
180
|
-
let
|
|
182
|
+
let t5;
|
|
181
183
|
if ($[41] !== state.collection) {
|
|
182
|
-
|
|
184
|
+
t5 = [...state.collection];
|
|
183
185
|
$[41] = state.collection;
|
|
184
|
-
$[42] =
|
|
185
|
-
} else
|
|
186
|
-
const nodes =
|
|
187
|
-
let
|
|
186
|
+
$[42] = t5;
|
|
187
|
+
} else t5 = $[42];
|
|
188
|
+
const nodes = t5;
|
|
189
|
+
let t6;
|
|
188
190
|
if ($[43] !== message || $[44] !== messageId) {
|
|
189
|
-
|
|
191
|
+
t6 = lineOf(messageId, message);
|
|
190
192
|
$[43] = message;
|
|
191
193
|
$[44] = messageId;
|
|
192
|
-
$[45] =
|
|
193
|
-
} else
|
|
194
|
-
let
|
|
194
|
+
$[45] = t6;
|
|
195
|
+
} else t6 = $[45];
|
|
196
|
+
let t7;
|
|
195
197
|
if ($[46] !== nodes || $[47] !== onRemove || $[48] !== removeLabel || $[49] !== renderEmptyState || $[50] !== state) {
|
|
196
|
-
|
|
198
|
+
t7 = nodes.length === 0 ? renderEmptyState?.() : nodes.map((node) => /* @__PURE__ */ jsx(GroupChip, {
|
|
197
199
|
node,
|
|
198
200
|
onRemove,
|
|
199
201
|
removeLabel,
|
|
@@ -204,13 +206,13 @@ function ChipGroup(t0) {
|
|
|
204
206
|
$[48] = removeLabel;
|
|
205
207
|
$[49] = renderEmptyState;
|
|
206
208
|
$[50] = state;
|
|
207
|
-
$[51] =
|
|
208
|
-
} else
|
|
209
|
-
|
|
209
|
+
$[51] = t7;
|
|
210
|
+
} else t7 = $[51];
|
|
211
|
+
t4 = /* @__PURE__ */ jsxs(View, {
|
|
210
212
|
...props,
|
|
211
213
|
"aria-labelledby": labelId,
|
|
212
214
|
role: "group",
|
|
213
|
-
...
|
|
215
|
+
...t6,
|
|
214
216
|
style: composeStyles(own.root, style),
|
|
215
217
|
children: [
|
|
216
218
|
/* @__PURE__ */ jsx(Text, {
|
|
@@ -220,7 +222,7 @@ function ChipGroup(t0) {
|
|
|
220
222
|
}),
|
|
221
223
|
/* @__PURE__ */ jsx(View, {
|
|
222
224
|
style: own.list,
|
|
223
|
-
children:
|
|
225
|
+
children: t7
|
|
224
226
|
}),
|
|
225
227
|
message === void 0 ? null : /* @__PURE__ */ jsx(View, {
|
|
226
228
|
style: own.messageLine,
|
|
@@ -246,9 +248,9 @@ function ChipGroup(t0) {
|
|
|
246
248
|
$[37] = state;
|
|
247
249
|
$[38] = style;
|
|
248
250
|
$[39] = theme;
|
|
249
|
-
$[40] =
|
|
250
|
-
} else
|
|
251
|
-
return
|
|
251
|
+
$[40] = t4;
|
|
252
|
+
} else t4 = $[40];
|
|
253
|
+
return t4;
|
|
252
254
|
}
|
|
253
255
|
/**
|
|
254
256
|
* One chip of a `ChipGroup`, which draws it: the group builds its set from
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["ComponentRef","ReactElement","ReactNode","Ref","GestureResponderEvent","Insets","PressableProps","StyleProp","TextStyle","ViewProps","ViewStyle","AnimatedStyle","Key","Node","Selection","SelectionMode","ListProps","ListState","useId","useState","Text","NativeText","Platform","Pressable","StyleSheet","View","Animated","useListState","AnimatedPressable","toggleState","ChipGlyph","ChipLabel","measureThen","paintOf","targetOf","useEasedColors","GLYPH_SIZE","RULE_WIDTH","stylesOf","CloseGlyph","TARGET_SIZE","usePressFeedback","useTheme","composeStyles","themedStyles","useTypeRole","ChipGroupChipProps","Omit","children","icon","id","isDisabled","ref","style","textValue","ChipGroupProps","item","T","defaultSelectedKeys","Iterable","description","disabledKeys","disallowEmptySelection","error","items","label","onRemove","keys","Set","onSelectionChange","removeLabel","renderEmptyState","selectedKeys","selectionMode","REMOVE_REACH","bottom","left","right","top","styles","create","chip","maxWidth","layer","position","groupStylesOf","colors","radii","sizing","spacing","stateLayerOpacity","color","onSurfaceVariant","labelError","list","alignItems","flexDirection","flexWrap","gap","sm","minHeight","controlXs","message","messageError","messageLine","marginTop","xs","removable","paddingEnd","lg","remove","borderRadius","circle","end","height","justifyContent","width","removeHovered","opacity","hover","removeLayer","removePressed","pressed","root","rowGap","ChipGroup","t0","$","_c","props","t1","t2","undefined","theme","t3","t4","state","labelId","messageId","labelRole","messageRole","t5","own","invalid","t6","collection","nodes","t7","lineOf","t8","length","map","node","key","ChipGroupChip","_props","getCollectionNode","hasChildNodes","rendered","type","GroupChip","hitSlop","onBlur","onFocus","onHoverIn","onHoverOut","onLayout","onPress","onPressIn","onPressOut","_id","_isDisabled","t9","t10","t11","t12","_textValue","t13","setWidth","selectionManager","selectable","selected","isSelected","assist","disabled","elevated","paint","eased","corners","feedback","container","ring","pill","glyph","content","target","handlers","selectThen","removeThen","OS","RemoveButton","disableRipple","T0","T1","hovered","ringOf","backgroundColor","outlineColor","outlineOffset","outlineStyle","outlineWidth","event","select","Chip","_c","NativeText"],"sources":["../../../src/components/chip-group/index.tsx"],"sourcesContent":["import type { ComponentRef, ReactElement, ReactNode, Ref } from 'react'\nimport type {\n GestureResponderEvent,\n Insets,\n PressableProps,\n StyleProp,\n TextStyle,\n ViewProps,\n ViewStyle,\n} from 'react-native'\nimport type { AnimatedStyle } from 'react-native-reanimated'\nimport type { Key, Node, Selection, SelectionMode } from 'react-stately'\nimport type { ListProps, ListState } from 'react-stately/useListState'\n\nimport { useId, useState } from 'react'\nimport {\n Text as NativeText,\n Platform,\n Pressable,\n StyleSheet,\n View,\n} from 'react-native'\nimport Animated from 'react-native-reanimated'\nimport { useListState } from 'react-stately/useListState'\n\nimport { AnimatedPressable, toggleState } from '../../button'\nimport {\n ChipGlyph,\n ChipLabel,\n measureThen,\n paintOf,\n targetOf,\n useEasedColors,\n} from '../../chip'\nimport { GLYPH_SIZE, RULE_WIDTH, stylesOf } from '../../chip/styles'\nimport { CloseGlyph } from '../../glyphs'\nimport { TARGET_SIZE, usePressFeedback } from '../../press'\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles, themedStyles } from '../../theme/styles'\nimport { useTypeRole } from '../../typography/roles'\n\n// The chips page's filter and input chips as a set, as kanso-ui's ChipGroup\n// draws them: one or more chosen from a row that wraps, each one removable.\n// The pill is src/chip's, shared with Chip, so the two cannot drift; what is\n// here is the group around them.\n//\n// **Selection is the group's, not each chip's.** It is React Stately's\n// `useListState`, as web's is React Aria's, so `selectionMode`,\n// `selectedKeys`, `defaultSelectedKeys`, `onSelectionChange` and\n// `disabledKeys` behave as they do there. A press on a chip selects it, or\n// clears it if it was selected; in a group that selects one, a press on\n// another moves the selection there. A chip in a group that selects nothing is\n// not a button at all, since a press there would change nothing.\n//\n// **A chip can be removed.** Give the group `onRemove` and each chip draws the\n// page's trailing close glyph, an 18dp glyph in the label's colour, in a\n// target of its own so a press there removes rather than selects. It is a\n// sibling of the chip's own button rather than a child, laid over the pill's\n// end: VoiceOver reaches nothing inside a button, so a close target inside one\n// could never be focused. Its target is WCAG's 24dp, as on web, since the chip\n// around it is no spacing to lean on when the group selects. It draws its\n// hover and pressed layers in the label's colour, and on focus from a key a\n// 2dp ring in the same colour, 1dp out, as web's does: a second ring in the\n// focus role inside a chip would read as two focus treatments for one focus.\n//\n// The label, the line under the chips and the gaps between them are the\n// field chrome's, as RadioGroup draws them: the label in label large and on\n// surface variant, or error while the group has one; the chips 8dp apart and\n// wrapping, from the start edge, so from the right under a right-to-left\n// layout; and the line under them in body small, 4dp further down. The row\n// keeps a chip's height while it is empty, so removing the last chip leaves\n// what sits under the group where it was.\n//\n// Three departures from web. Arrow keys do not move between the chips, and\n// Backspace and Delete do not remove one: each chip and each close target is\n// a stop of its own for a hardware keyboard. The close target is named\n// `Remove` and the chip's text in English unless `removeLabel` says\n// otherwise, where web's follows the reader's locale. And the close glyph\n// takes the label's colour at once rather than easing with it, as the check\n// does.\n\ntype ChipGroupChipProps = Omit<\n PressableProps,\n 'children' | 'disabled' | 'id' | 'style'\n> & {\n /** The chip's label. */\n readonly children: ReactNode\n /**\n * An icon before the label, in the page's 18dp slot and the primary role,\n * which the slot hands it through `useIconStyle()`. The check takes its\n * place while the chip is chosen, so the chip keeps its width.\n */\n readonly icon?: ReactNode\n /**\n * The key selection and removal report the chip by. Without one, a chip\n * drawn from `items` takes its item's `id` or `key`.\n */\n readonly id?: Key\n /**\n * Draws the chip disabled, and takes no presses on it or on its close\n * target, as a key in the group's `disabledKeys` does.\n * @default false\n */\n readonly isDisabled?: boolean\n readonly ref?: Ref<ComponentRef<typeof View>>\n readonly style?: StyleProp<ViewStyle>\n /**\n * The chip's text, which names its close target. Read off `children` when\n * they are a plain string, so a chip whose label is an element passes it.\n */\n readonly textValue?: string\n}\n\ntype ChipGroupProps<T extends object = object> = Omit<\n ViewProps,\n 'children' | 'style'\n> & {\n /**\n * The chips, each a `ChipGroup.Chip` with an `id` of its own. With\n * `items`, a function from an item to its chip, called for each item in\n * turn.\n */\n readonly children?: ((item: T) => ReactElement) | ReactNode\n /** The keys selected at first, when the group keeps its own selection. */\n readonly defaultSelectedKeys?: 'all' | Iterable<Key>\n /**\n * A hint under the group. Replaced by `error` when there is one, so the\n * two never stack.\n */\n readonly description?: string\n /** The keys of the chips drawn disabled, which take no presses. */\n readonly disabledKeys?: Iterable<Key>\n /**\n * Keeps the last selected chip selected, so a press on it changes\n * nothing.\n * @default false\n */\n readonly disallowEmptySelection?: boolean\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 the label's colour\n * both follow from it.\n */\n readonly error?: string\n /** The entries `children` draws a chip for, when it is a function. */\n readonly items?: Iterable<T>\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 readonly label: string\n /**\n * Called with the key of the chip whose close target was pressed. Given\n * this, every chip draws one; the call site removes the chip from what it\n * renders.\n */\n readonly onRemove?: (keys: Set<Key>) => void\n /** Called with the selected keys whenever a press changes them. */\n readonly onSelectionChange?: (keys: Selection) => void\n readonly ref?: Ref<ComponentRef<typeof View>>\n /**\n * What the close target on each chip is called, for a screen reader. The\n * chip's own text follows it, so this is the verb rather than the whole\n * phrase: \"Remove\" becomes \"Remove First item\".\n * @default 'Remove'\n */\n readonly removeLabel?: string\n /** What the row draws once it holds no chips. */\n readonly renderEmptyState?: () => ReactNode\n /**\n * The selected keys, for a call site holding the selection itself with\n * `onSelectionChange`.\n */\n readonly selectedKeys?: 'all' | Iterable<Key>\n /**\n * Whether a press selects a chip: one at a time, several, or none, in\n * which case the chips are not buttons.\n * @default 'none'\n */\n readonly selectionMode?: SelectionMode\n readonly style?: StyleProp<ViewStyle>\n}\n\n// The close target reaches 3dp past its 18dp glyph on every side, which is\n// WCAG's 24dp.\nconst REMOVE_REACH: Insets = { bottom: 3, left: 3, right: 3, top: 3 }\n\nconst styles = StyleSheet.create({\n // Holds the pill and the close target laid over it, and is never wider\n // than the row, so the pill inside has a width to cut its label at.\n chip: {\n maxWidth: '100%',\n },\n layer: {\n bottom: 0,\n left: 0,\n position: 'absolute',\n right: 0,\n top: 0,\n },\n})\n\nconst groupStylesOf = themedStyles(\n ({ colors, radii, sizing, spacing, stateLayerOpacity }) =>\n StyleSheet.create({\n label: {\n color: colors.onSurfaceVariant,\n },\n labelError: {\n color: colors.error,\n },\n // The chips, 8dp apart and wrapping rather than running off the end,\n // since a set is read all at once. A chip's height while empty.\n list: {\n alignItems: 'center',\n flexDirection: 'row',\n flexWrap: 'wrap',\n gap: spacing.sm,\n minHeight: sizing.controlXs,\n },\n message: {\n color: colors.onSurfaceVariant,\n },\n messageError: {\n color: colors.error,\n },\n messageLine: {\n marginTop: spacing.xs,\n },\n // A removable pill leaves room at its end for the close target, its 8dp\n // gap before it and the 8dp the page pads after it.\n removable: {\n paddingEnd: spacing.lg + GLYPH_SIZE,\n },\n // The close target, over the pill's end, where the pill's own padding\n // would end: the page pads 8dp on the side the glyph is on, and the\n // label keeps the chip's 8dp gap before it.\n remove: {\n alignItems: 'center',\n borderRadius: radii.circle,\n end: RULE_WIDTH + spacing.lg - spacing.sm,\n height: GLYPH_SIZE,\n justifyContent: 'center',\n marginTop: -GLYPH_SIZE / 2,\n position: 'absolute',\n top: '50%',\n width: GLYPH_SIZE,\n },\n removeHovered: {\n opacity: stateLayerOpacity.hover,\n },\n removeLayer: {\n borderRadius: radii.circle,\n opacity: 0,\n },\n removePressed: {\n opacity: stateLayerOpacity.pressed,\n },\n root: {\n flexDirection: 'column',\n rowGap: spacing.xs,\n },\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 Stately's: set `selectionMode` to\n * `single` or `multiple`, and pass `selectedKeys` with `onSelectionChange` to\n * control it, or `defaultSelectedKeys` to let the group keep its own.\n *\n * ```tsx\n * <ChipGroup label=\"Label\" onRemove={remove} selectionMode=\"multiple\">\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. A chip that\n * toggles nothing else is Chip; this is for a set that shares a value.\n *\n * A screen reader hears a group named by its label, and each chip as a button\n * named by its label, selected or not. On the web the line under the group\n * describes it, as web's does; on iOS and Android it is read after the chips,\n * where it sits. `style`, `ref` and `testID` land on the group as a whole,\n * which is the element a layout positions.\n */\nfunction ChipGroup<T extends object = object>({\n children,\n defaultSelectedKeys,\n description,\n disabledKeys,\n disallowEmptySelection,\n error,\n items,\n label,\n onRemove,\n onSelectionChange,\n removeLabel = 'Remove',\n renderEmptyState,\n selectedKeys,\n selectionMode = 'none',\n style,\n ...props\n}: ChipGroupProps<T>) {\n const theme = useTheme()\n const state = useListState<T>({\n // Each chip builds its own entry in the collection; see\n // `ChipGroupChip.getCollectionNode`. The collection skips what is not an\n // element, as a ReactNode may be, and asks any element for its entry.\n // oxlint-disable-next-line typescript/no-unsafe-type-assertion -- see above\n children: children as ListProps<T>['children'],\n defaultSelectedKeys,\n disabledKeys,\n disallowEmptySelection,\n items,\n onSelectionChange,\n selectedKeys,\n selectionMode,\n })\n const labelId = useId()\n const messageId = useId()\n const labelRole = useTypeRole('labelLarge')\n const messageRole = useTypeRole('bodySmall')\n\n const own = groupStylesOf(theme)\n const invalid = error !== undefined\n const message = error ?? description\n const nodes = [...state.collection]\n\n return (\n <View\n {...props}\n aria-labelledby={labelId}\n role=\"group\"\n {...lineOf(messageId, message)}\n style={composeStyles<ViewStyle>(own.root, style)}\n >\n <NativeText\n id={labelId}\n style={composeStyles<TextStyle>(\n labelRole,\n own.label,\n invalid ? own.labelError : undefined,\n )}\n >\n {label}\n </NativeText>\n <View style={own.list}>\n {nodes.length === 0\n ? renderEmptyState?.()\n : nodes.map((node) => (\n <GroupChip\n key={node.key}\n node={node}\n onRemove={onRemove}\n removeLabel={removeLabel}\n state={state}\n />\n ))}\n </View>\n {message === undefined ? null : (\n <View style={own.messageLine}>\n <NativeText\n id={messageId}\n style={composeStyles<TextStyle>(\n messageRole,\n own.message,\n invalid ? own.messageError : undefined,\n )}\n >\n {message}\n </NativeText>\n </View>\n )}\n </View>\n )\n}\n\n/**\n * One chip of a `ChipGroup`, which draws it: the group builds its set from\n * these, so one renders nothing on its own. Give every chip an `id`, which is\n * the key selection and removal report it by.\n */\nfunction ChipGroupChip(_props: ChipGroupChipProps): null {\n return null\n}\n\n// The entry the group's collection holds for a chip, as React Stately's own\n// `Item` gives one: keyed by the chip's `id`, and carrying the props the group\n// draws it from.\nChipGroupChip.getCollectionNode = function* getCollectionNode(\n props: ChipGroupChipProps,\n) {\n yield {\n 'aria-label': props['aria-label'],\n hasChildNodes: false,\n key: props.id,\n props,\n rendered: props.children,\n textValue:\n props.textValue ??\n (typeof props.children === 'string' ? props.children : ''),\n type: 'item',\n }\n}\n\n/**\n * A chip as the group draws it, from its entry in the collection: the pill,\n * which is a button while the group selects, and the close target over its\n * end while the group removes.\n */\nfunction GroupChip<T>({\n node,\n onRemove,\n removeLabel,\n state,\n}: {\n readonly node: Node<T>\n readonly onRemove: ((keys: Set<Key>) => void) | undefined\n readonly removeLabel: string\n readonly state: ListState<T>\n}) {\n const theme = useTheme()\n // A node carries the props its chip was written with, which\n // `getCollectionNode` puts there and React Stately types as `any`.\n // oxlint-disable-next-line typescript/no-unsafe-assignment -- see above\n const {\n children,\n hitSlop,\n icon,\n id: _id,\n isDisabled: _isDisabled,\n onBlur,\n onFocus,\n onHoverIn,\n onHoverOut,\n onLayout,\n onPress,\n onPressIn,\n onPressOut,\n style,\n textValue: _textValue,\n ...props\n }: ChipGroupChipProps = node.props\n // Until the chip is measured it takes no reach across, rather than one\n // sized for a chip of no width.\n const [width, setWidth] = useState(TARGET_SIZE)\n\n const { selectionManager } = state\n // The selection manager reads a chip's own `isDisabled` off its node, beside\n // the group's `disabledKeys`, so it answers for both.\n const isDisabled = selectionManager.isDisabled(node.key)\n const selectable = selectionManager.selectionMode !== 'none'\n const selected = selectionManager.isSelected(node.key)\n const paint = paintOf(theme, {\n assist: false,\n disabled: isDisabled,\n elevated: false,\n selected,\n })\n const eased = useEasedColors(paint)\n\n const feedback = usePressFeedback({\n color: paint.layer,\n corners: { borderRadius: theme.radii.sm },\n disabled: isDisabled,\n onBlur,\n onFocus,\n onHoverIn,\n onHoverOut,\n onPressIn,\n onPressOut,\n })\n\n const pill = composeStyles<AnimatedStyle<ViewStyle>>(\n stylesOf(theme).pill,\n eased.container,\n onRemove === undefined ? undefined : groupStylesOf(theme).removable,\n feedback.ring,\n style,\n )\n const content = (\n <>\n {selectable ? feedback.layer : null}\n <ChipGlyph color={paint.glyph} icon={icon} selected={selected} />\n <ChipLabel color={eased.label}>{children}</ChipLabel>\n </>\n )\n const target = hitSlop ?? targetOf(width, theme)\n\n return (\n // The view holding the two takes the chip's target too: iOS and Android\n // hand a touch to a view only once its parent has taken it.\n <View hitSlop={selectable ? target : undefined} style={styles.chip}>\n {selectable ? (\n <AnimatedPressable\n role=\"button\"\n {...toggleState(selected)}\n {...props}\n {...feedback.handlers}\n disabled={isDisabled}\n hitSlop={target}\n onLayout={measureThen(setWidth, onLayout)}\n onPress={selectThen(state, node.key, onPress)}\n style={pill}\n >\n {content}\n </AnimatedPressable>\n ) : (\n // A press here changes nothing, so the chip is a view, and takes the\n // props a view has; a press handler among them is never called.\n <Animated.View\n {...props}\n aria-disabled={isDisabled}\n onLayout={onLayout ?? undefined}\n style={pill}\n >\n {content}\n </Animated.View>\n )}\n {onRemove === undefined ? null : (\n <RemoveButton\n color={paint.content}\n isDisabled={isDisabled}\n label={\n node.textValue === ''\n ? removeLabel\n : `${removeLabel} ${node.textValue}`\n }\n onPress={removeThen(onRemove, node.key)}\n />\n )}\n </View>\n )\n}\n\n/**\n * How the group is described by the line under it. On the web it points at\n * the line with `aria-describedby`, as web's group does. iOS and Android\n * focus the chips rather than the group, so there the line is left where a\n * screen reader reaches it in order, after the last chip.\n */\nfunction lineOf(id: string, message: string | undefined) {\n return Platform.OS === 'web' && message !== undefined\n ? { 'aria-describedby': id }\n : undefined\n}\n\n/**\n * A chip's close target: the close glyph in the label's colour, with a hover\n * and a pressed layer of its own and a ring for focus from a key, as the\n * header sets out.\n */\nfunction RemoveButton({\n color,\n isDisabled,\n label,\n onPress,\n}: {\n readonly color: string\n readonly isDisabled: boolean\n readonly label: string\n readonly onPress: () => void\n}) {\n const theme = useTheme()\n const feedback = usePressFeedback({\n color,\n disabled: isDisabled,\n disableRipple: true,\n })\n const own = groupStylesOf(theme)\n\n return (\n <Pressable\n aria-label={label}\n role=\"button\"\n {...feedback.handlers}\n disabled={isDisabled}\n hitSlop={REMOVE_REACH}\n onPress={onPress}\n style={composeStyles<ViewStyle>(\n own.remove,\n feedback.ring === undefined ? undefined : ringOf(color),\n )}\n >\n <View\n style={composeStyles<ViewStyle>(\n styles.layer,\n own.removeLayer,\n { backgroundColor: color },\n feedback.hovered ? own.removeHovered : undefined,\n feedback.pressed ? own.removePressed : undefined,\n )}\n />\n <CloseGlyph color={color} size={GLYPH_SIZE} />\n </Pressable>\n )\n}\n\n// What a press on a chip's close target reports. Built by a call rather than\n// declared in the component, which is what react-perf's\n// jsx-no-new-function-as-prop is after; the React Compiler memoises the\n// result on its inputs.\nfunction removeThen(onRemove: (keys: Set<Key>) => void, key: Key) {\n return () => {\n onRemove(new Set([key]))\n }\n}\n\n// The close target's ring: 2dp in the label's colour, 1dp out, as web's.\nfunction ringOf(color: string): ViewStyle {\n return {\n outlineColor: color,\n outlineOffset: 1,\n outlineStyle: 'solid',\n outlineWidth: 2,\n }\n}\n\n// A press on a chip: the call site's own `onPress`, then the selection,\n// which selects the chip, or clears it if it was selected and the group\n// allows that.\nfunction selectThen<T>(\n state: ListState<T>,\n key: Key,\n onPress: ((event: GestureResponderEvent) => void) | null | undefined,\n) {\n return (event: GestureResponderEvent) => {\n onPress?.(event)\n state.selectionManager.select(key)\n }\n}\n\nChipGroup.Chip = ChipGroupChip\n\nexport { ChipGroup, ChipGroupChip }\nexport type { ChipGroupChipProps, ChipGroupProps }\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","names":["ComponentRef","ReactElement","ReactNode","Ref","GestureResponderEvent","Insets","PressableProps","StyleProp","TextStyle","ViewProps","ViewStyle","AnimatedStyle","Key","Node","Selection","SelectionMode","ListProps","ListState","useId","useState","Text","NativeText","Platform","Pressable","StyleSheet","View","Animated","useListState","AnimatedPressable","toggleState","ChipGlyph","ChipLabel","measureThen","paintOf","targetOf","useEasedColors","GLYPH_SIZE","RULE_WIDTH","stylesOf","CloseGlyph","useMessages","TARGET_SIZE","usePressFeedback","useTheme","composeStyles","themedStyles","useTypeRole","ChipGroupChipProps","Omit","children","icon","id","isDisabled","ref","style","textValue","ChipGroupProps","item","T","defaultSelectedKeys","Iterable","description","disabledKeys","disallowEmptySelection","error","items","label","onRemove","keys","Set","onSelectionChange","removeLabel","renderEmptyState","selectedKeys","selectionMode","REMOVE_REACH","bottom","left","right","top","styles","create","chip","maxWidth","layer","position","groupStylesOf","colors","radii","sizing","spacing","stateLayerOpacity","color","onSurfaceVariant","labelError","list","alignItems","flexDirection","flexWrap","gap","sm","minHeight","controlXs","message","messageError","messageLine","marginTop","xs","removable","paddingEnd","lg","remove","borderRadius","circle","end","height","justifyContent","width","removeHovered","opacity","hover","removeLayer","removePressed","pressed","root","rowGap","ChipGroup","t0","$","_c","ownRemoveLabel","props","t1","undefined","messages","theme","t2","t3","state","labelId","messageId","labelRole","messageRole","t4","own","invalid","t5","collection","nodes","t6","lineOf","t7","length","map","node","key","ChipGroupChip","_props","getCollectionNode","hasChildNodes","rendered","type","GroupChip","hitSlop","onBlur","onFocus","onHoverIn","onHoverOut","onLayout","onPress","onPressIn","onPressOut","_id","_isDisabled","t8","t9","t10","t11","t12","_textValue","t13","setWidth","selectionManager","selectable","selected","isSelected","assist","disabled","elevated","paint","eased","corners","feedback","container","ring","pill","glyph","content","target","handlers","selectThen","removeThen","OS","RemoveButton","disableRipple","T0","T1","hovered","ringOf","backgroundColor","outlineColor","outlineOffset","outlineStyle","outlineWidth","event","select","Chip","_c","NativeText"],"sources":["../../../src/components/chip-group/index.tsx"],"sourcesContent":["import type { ComponentRef, ReactElement, ReactNode, Ref } from 'react'\nimport type {\n GestureResponderEvent,\n Insets,\n PressableProps,\n StyleProp,\n TextStyle,\n ViewProps,\n ViewStyle,\n} from 'react-native'\nimport type { AnimatedStyle } from 'react-native-reanimated'\nimport type { Key, Node, Selection, SelectionMode } from 'react-stately'\nimport type { ListProps, ListState } from 'react-stately/useListState'\n\nimport { useId, useState } from 'react'\nimport {\n Text as NativeText,\n Platform,\n Pressable,\n StyleSheet,\n View,\n} from 'react-native'\nimport Animated from 'react-native-reanimated'\nimport { useListState } from 'react-stately/useListState'\n\nimport { AnimatedPressable, toggleState } from '../../button'\nimport {\n ChipGlyph,\n ChipLabel,\n measureThen,\n paintOf,\n targetOf,\n useEasedColors,\n} from '../../chip'\nimport { GLYPH_SIZE, RULE_WIDTH, stylesOf } from '../../chip/styles'\nimport { CloseGlyph } from '../../glyphs'\nimport { useMessages } from '../../i18n/provider'\nimport { TARGET_SIZE, usePressFeedback } from '../../press'\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles, themedStyles } from '../../theme/styles'\nimport { useTypeRole } from '../../typography/roles'\n\n// The chips page's filter and input chips as a set, as kanso-ui's ChipGroup\n// draws them: one or more chosen from a row that wraps, each one removable.\n// The pill is src/chip's, shared with Chip, so the two cannot drift; what is\n// here is the group around them.\n//\n// **Selection is the group's, not each chip's.** It is React Stately's\n// `useListState`, as web's is React Aria's, so `selectionMode`,\n// `selectedKeys`, `defaultSelectedKeys`, `onSelectionChange` and\n// `disabledKeys` behave as they do there. A press on a chip selects it, or\n// clears it if it was selected; in a group that selects one, a press on\n// another moves the selection there. A chip in a group that selects nothing is\n// not a button at all, since a press there would change nothing.\n//\n// **A chip can be removed.** Give the group `onRemove` and each chip draws the\n// page's trailing close glyph, an 18dp glyph in the label's colour, in a\n// target of its own so a press there removes rather than selects. It is a\n// sibling of the chip's own button rather than a child, laid over the pill's\n// end: VoiceOver reaches nothing inside a button, so a close target inside one\n// could never be focused. Its target is WCAG's 24dp, as on web, since the chip\n// around it is no spacing to lean on when the group selects. It draws its\n// hover and pressed layers in the label's colour, and on focus from a key a\n// 2dp ring in the same colour, 1dp out, as web's does: a second ring in the\n// focus role inside a chip would read as two focus treatments for one focus.\n//\n// The label, the line under the chips and the gaps between them are the\n// field chrome's, as RadioGroup draws them: the label in label large and on\n// surface variant, or error while the group has one; the chips 8dp apart and\n// wrapping, from the start edge, so from the right under a right-to-left\n// layout; and the line under them in body small, 4dp further down. The row\n// keeps a chip's height while it is empty, so removing the last chip leaves\n// what sits under the group where it was.\n//\n// Two departures from web. Arrow keys do not move between the chips, and\n// Backspace and Delete do not remove one: each chip and each close target is\n// a stop of its own for a hardware keyboard. And the close glyph takes the\n// label's colour at once rather than easing with it, as the check does.\n\ntype ChipGroupChipProps = Omit<\n PressableProps,\n 'children' | 'disabled' | 'id' | 'style'\n> & {\n /** The chip's label. */\n readonly children: ReactNode\n /**\n * An icon before the label, in the page's 18dp slot and the primary role,\n * which the slot hands it through `useIconStyle()`. The check takes its\n * place while the chip is chosen, so the chip keeps its width.\n */\n readonly icon?: ReactNode\n /**\n * The key selection and removal report the chip by. Without one, a chip\n * drawn from `items` takes its item's `id` or `key`.\n */\n readonly id?: Key\n /**\n * Draws the chip disabled, and takes no presses on it or on its close\n * target, as a key in the group's `disabledKeys` does.\n * @default false\n */\n readonly isDisabled?: boolean\n readonly ref?: Ref<ComponentRef<typeof View>>\n readonly style?: StyleProp<ViewStyle>\n /**\n * The chip's text, which names its close target. Read off `children` when\n * they are a plain string, so a chip whose label is an element passes it.\n */\n readonly textValue?: string\n}\n\ntype ChipGroupProps<T extends object = object> = Omit<\n ViewProps,\n 'children' | 'style'\n> & {\n /**\n * The chips, each a `ChipGroup.Chip` with an `id` of its own. With\n * `items`, a function from an item to its chip, called for each item in\n * turn.\n */\n readonly children?: ((item: T) => ReactElement) | ReactNode\n /** The keys selected at first, when the group keeps its own selection. */\n readonly defaultSelectedKeys?: 'all' | Iterable<Key>\n /**\n * A hint under the group. Replaced by `error` when there is one, so the\n * two never stack.\n */\n readonly description?: string\n /** The keys of the chips drawn disabled, which take no presses. */\n readonly disabledKeys?: Iterable<Key>\n /**\n * Keeps the last selected chip selected, so a press on it changes\n * nothing.\n * @default false\n */\n readonly disallowEmptySelection?: boolean\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 the label's colour\n * both follow from it.\n */\n readonly error?: string\n /** The entries `children` draws a chip for, when it is a function. */\n readonly items?: Iterable<T>\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 readonly label: string\n /**\n * Called with the key of the chip whose close target was pressed. Given\n * this, every chip draws one; the call site removes the chip from what it\n * renders.\n */\n readonly onRemove?: (keys: Set<Key>) => void\n /** Called with the selected keys whenever a press changes them. */\n readonly onSelectionChange?: (keys: Selection) => void\n readonly ref?: Ref<ComponentRef<typeof View>>\n /**\n * What the close target on each chip is called, for a screen reader. The\n * chip's own text follows it, so this is the verb rather than the whole\n * phrase: \"Remove\" becomes \"Remove First item\". Left out, it is the word\n * React Aria gives web's in the `I18nProvider`'s locale, or the device's\n * outside one, \"Remove\" in English.\n */\n readonly removeLabel?: string\n /** What the row draws once it holds no chips. */\n readonly renderEmptyState?: () => ReactNode\n /**\n * The selected keys, for a call site holding the selection itself with\n * `onSelectionChange`.\n */\n readonly selectedKeys?: 'all' | Iterable<Key>\n /**\n * Whether a press selects a chip: one at a time, several, or none, in\n * which case the chips are not buttons.\n * @default 'none'\n */\n readonly selectionMode?: SelectionMode\n readonly style?: StyleProp<ViewStyle>\n}\n\n// The close target reaches 3dp past its 18dp glyph on every side, which is\n// WCAG's 24dp.\nconst REMOVE_REACH: Insets = { bottom: 3, left: 3, right: 3, top: 3 }\n\nconst styles = StyleSheet.create({\n // Holds the pill and the close target laid over it, and is never wider\n // than the row, so the pill inside has a width to cut its label at.\n chip: {\n maxWidth: '100%',\n },\n layer: {\n bottom: 0,\n left: 0,\n position: 'absolute',\n right: 0,\n top: 0,\n },\n})\n\nconst groupStylesOf = themedStyles(\n ({ colors, radii, sizing, spacing, stateLayerOpacity }) =>\n StyleSheet.create({\n label: {\n color: colors.onSurfaceVariant,\n },\n labelError: {\n color: colors.error,\n },\n // The chips, 8dp apart and wrapping rather than running off the end,\n // since a set is read all at once. A chip's height while empty.\n list: {\n alignItems: 'center',\n flexDirection: 'row',\n flexWrap: 'wrap',\n gap: spacing.sm,\n minHeight: sizing.controlXs,\n },\n message: {\n color: colors.onSurfaceVariant,\n },\n messageError: {\n color: colors.error,\n },\n messageLine: {\n marginTop: spacing.xs,\n },\n // A removable pill leaves room at its end for the close target, its 8dp\n // gap before it and the 8dp the page pads after it.\n removable: {\n paddingEnd: spacing.lg + GLYPH_SIZE,\n },\n // The close target, over the pill's end, where the pill's own padding\n // would end: the page pads 8dp on the side the glyph is on, and the\n // label keeps the chip's 8dp gap before it.\n remove: {\n alignItems: 'center',\n borderRadius: radii.circle,\n end: RULE_WIDTH + spacing.lg - spacing.sm,\n height: GLYPH_SIZE,\n justifyContent: 'center',\n marginTop: -GLYPH_SIZE / 2,\n position: 'absolute',\n top: '50%',\n width: GLYPH_SIZE,\n },\n removeHovered: {\n opacity: stateLayerOpacity.hover,\n },\n removeLayer: {\n borderRadius: radii.circle,\n opacity: 0,\n },\n removePressed: {\n opacity: stateLayerOpacity.pressed,\n },\n root: {\n flexDirection: 'column',\n rowGap: spacing.xs,\n },\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 Stately's: set `selectionMode` to\n * `single` or `multiple`, and pass `selectedKeys` with `onSelectionChange` to\n * control it, or `defaultSelectedKeys` to let the group keep its own.\n *\n * ```tsx\n * <ChipGroup label=\"Label\" onRemove={remove} selectionMode=\"multiple\">\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. A chip that\n * toggles nothing else is Chip; this is for a set that shares a value.\n *\n * A screen reader hears a group named by its label, and each chip as a button\n * named by its label, selected or not. On the web the line under the group\n * describes it, as web's does; on iOS and Android it is read after the chips,\n * where it sits. `style`, `ref` and `testID` land on the group as a whole,\n * which is the element a layout positions.\n */\nfunction ChipGroup<T extends object = object>({\n children,\n defaultSelectedKeys,\n description,\n disabledKeys,\n disallowEmptySelection,\n error,\n items,\n label,\n onRemove,\n onSelectionChange,\n removeLabel: ownRemoveLabel,\n renderEmptyState,\n selectedKeys,\n selectionMode = 'none',\n style,\n ...props\n}: ChipGroupProps<T>) {\n const messages = useMessages()\n const removeLabel = ownRemoveLabel ?? messages.remove\n const theme = useTheme()\n const state = useListState<T>({\n // Each chip builds its own entry in the collection; see\n // `ChipGroupChip.getCollectionNode`. The collection skips what is not an\n // element, as a ReactNode may be, and asks any element for its entry.\n // oxlint-disable-next-line typescript/no-unsafe-type-assertion -- see above\n children: children as ListProps<T>['children'],\n defaultSelectedKeys,\n disabledKeys,\n disallowEmptySelection,\n items,\n onSelectionChange,\n selectedKeys,\n selectionMode,\n })\n const labelId = useId()\n const messageId = useId()\n const labelRole = useTypeRole('labelLarge')\n const messageRole = useTypeRole('bodySmall')\n\n const own = groupStylesOf(theme)\n const invalid = error !== undefined\n const message = error ?? description\n const nodes = [...state.collection]\n\n return (\n <View\n {...props}\n aria-labelledby={labelId}\n role=\"group\"\n {...lineOf(messageId, message)}\n style={composeStyles<ViewStyle>(own.root, style)}\n >\n <NativeText\n id={labelId}\n style={composeStyles<TextStyle>(\n labelRole,\n own.label,\n invalid ? own.labelError : undefined,\n )}\n >\n {label}\n </NativeText>\n <View style={own.list}>\n {nodes.length === 0\n ? renderEmptyState?.()\n : nodes.map((node) => (\n <GroupChip\n key={node.key}\n node={node}\n onRemove={onRemove}\n removeLabel={removeLabel}\n state={state}\n />\n ))}\n </View>\n {message === undefined ? null : (\n <View style={own.messageLine}>\n <NativeText\n id={messageId}\n style={composeStyles<TextStyle>(\n messageRole,\n own.message,\n invalid ? own.messageError : undefined,\n )}\n >\n {message}\n </NativeText>\n </View>\n )}\n </View>\n )\n}\n\n/**\n * One chip of a `ChipGroup`, which draws it: the group builds its set from\n * these, so one renders nothing on its own. Give every chip an `id`, which is\n * the key selection and removal report it by.\n */\nfunction ChipGroupChip(_props: ChipGroupChipProps): null {\n return null\n}\n\n// The entry the group's collection holds for a chip, as React Stately's own\n// `Item` gives one: keyed by the chip's `id`, and carrying the props the group\n// draws it from.\nChipGroupChip.getCollectionNode = function* getCollectionNode(\n props: ChipGroupChipProps,\n) {\n yield {\n 'aria-label': props['aria-label'],\n hasChildNodes: false,\n key: props.id,\n props,\n rendered: props.children,\n textValue:\n props.textValue ??\n (typeof props.children === 'string' ? props.children : ''),\n type: 'item',\n }\n}\n\n/**\n * A chip as the group draws it, from its entry in the collection: the pill,\n * which is a button while the group selects, and the close target over its\n * end while the group removes.\n */\nfunction GroupChip<T>({\n node,\n onRemove,\n removeLabel,\n state,\n}: {\n readonly node: Node<T>\n readonly onRemove: ((keys: Set<Key>) => void) | undefined\n readonly removeLabel: string\n readonly state: ListState<T>\n}) {\n const theme = useTheme()\n // A node carries the props its chip was written with, which\n // `getCollectionNode` puts there and React Stately types as `any`.\n // oxlint-disable-next-line typescript/no-unsafe-assignment -- see above\n const {\n children,\n hitSlop,\n icon,\n id: _id,\n isDisabled: _isDisabled,\n onBlur,\n onFocus,\n onHoverIn,\n onHoverOut,\n onLayout,\n onPress,\n onPressIn,\n onPressOut,\n style,\n textValue: _textValue,\n ...props\n }: ChipGroupChipProps = node.props\n // Until the chip is measured it takes no reach across, rather than one\n // sized for a chip of no width.\n const [width, setWidth] = useState(TARGET_SIZE)\n\n const { selectionManager } = state\n // The selection manager reads a chip's own `isDisabled` off its node, beside\n // the group's `disabledKeys`, so it answers for both.\n const isDisabled = selectionManager.isDisabled(node.key)\n const selectable = selectionManager.selectionMode !== 'none'\n const selected = selectionManager.isSelected(node.key)\n const paint = paintOf(theme, {\n assist: false,\n disabled: isDisabled,\n elevated: false,\n selected,\n })\n const eased = useEasedColors(paint)\n\n const feedback = usePressFeedback({\n color: paint.layer,\n corners: { borderRadius: theme.radii.sm },\n disabled: isDisabled,\n onBlur,\n onFocus,\n onHoverIn,\n onHoverOut,\n onPressIn,\n onPressOut,\n })\n\n const pill = composeStyles<AnimatedStyle<ViewStyle>>(\n stylesOf(theme).pill,\n eased.container,\n onRemove === undefined ? undefined : groupStylesOf(theme).removable,\n feedback.ring,\n style,\n )\n const content = (\n <>\n {selectable ? feedback.layer : null}\n <ChipGlyph color={paint.glyph} icon={icon} selected={selected} />\n <ChipLabel color={eased.label}>{children}</ChipLabel>\n </>\n )\n const target = hitSlop ?? targetOf(width, theme)\n\n return (\n // The view holding the two takes the chip's target too: iOS and Android\n // hand a touch to a view only once its parent has taken it.\n <View hitSlop={selectable ? target : undefined} style={styles.chip}>\n {selectable ? (\n <AnimatedPressable\n role=\"button\"\n {...toggleState(selected)}\n {...props}\n {...feedback.handlers}\n disabled={isDisabled}\n hitSlop={target}\n onLayout={measureThen(setWidth, onLayout)}\n onPress={selectThen(state, node.key, onPress)}\n style={pill}\n >\n {content}\n </AnimatedPressable>\n ) : (\n // A press here changes nothing, so the chip is a view, and takes the\n // props a view has; a press handler among them is never called.\n <Animated.View\n {...props}\n aria-disabled={isDisabled}\n onLayout={onLayout ?? undefined}\n style={pill}\n >\n {content}\n </Animated.View>\n )}\n {onRemove === undefined ? null : (\n <RemoveButton\n color={paint.content}\n isDisabled={isDisabled}\n label={\n node.textValue === ''\n ? removeLabel\n : `${removeLabel} ${node.textValue}`\n }\n onPress={removeThen(onRemove, node.key)}\n />\n )}\n </View>\n )\n}\n\n/**\n * How the group is described by the line under it. On the web it points at\n * the line with `aria-describedby`, as web's group does. iOS and Android\n * focus the chips rather than the group, so there the line is left where a\n * screen reader reaches it in order, after the last chip.\n */\nfunction lineOf(id: string, message: string | undefined) {\n return Platform.OS === 'web' && message !== undefined\n ? { 'aria-describedby': id }\n : undefined\n}\n\n/**\n * A chip's close target: the close glyph in the label's colour, with a hover\n * and a pressed layer of its own and a ring for focus from a key, as the\n * header sets out.\n */\nfunction RemoveButton({\n color,\n isDisabled,\n label,\n onPress,\n}: {\n readonly color: string\n readonly isDisabled: boolean\n readonly label: string\n readonly onPress: () => void\n}) {\n const theme = useTheme()\n const feedback = usePressFeedback({\n color,\n disabled: isDisabled,\n disableRipple: true,\n })\n const own = groupStylesOf(theme)\n\n return (\n <Pressable\n aria-label={label}\n role=\"button\"\n {...feedback.handlers}\n disabled={isDisabled}\n hitSlop={REMOVE_REACH}\n onPress={onPress}\n style={composeStyles<ViewStyle>(\n own.remove,\n feedback.ring === undefined ? undefined : ringOf(color),\n )}\n >\n <View\n style={composeStyles<ViewStyle>(\n styles.layer,\n own.removeLayer,\n { backgroundColor: color },\n feedback.hovered ? own.removeHovered : undefined,\n feedback.pressed ? own.removePressed : undefined,\n )}\n />\n <CloseGlyph color={color} size={GLYPH_SIZE} />\n </Pressable>\n )\n}\n\n// What a press on a chip's close target reports. Built by a call rather than\n// declared in the component, which is what react-perf's\n// jsx-no-new-function-as-prop is after; the React Compiler memoises the\n// result on its inputs.\nfunction removeThen(onRemove: (keys: Set<Key>) => void, key: Key) {\n return () => {\n onRemove(new Set([key]))\n }\n}\n\n// The close target's ring: 2dp in the label's colour, 1dp out, as web's.\nfunction ringOf(color: string): ViewStyle {\n return {\n outlineColor: color,\n outlineOffset: 1,\n outlineStyle: 'solid',\n outlineWidth: 2,\n }\n}\n\n// A press on a chip: the call site's own `onPress`, then the selection,\n// which selects the chip, or clears it if it was selected and the group\n// allows that.\nfunction selectThen<T>(\n state: ListState<T>,\n key: Key,\n onPress: ((event: GestureResponderEvent) => void) | null | undefined,\n) {\n return (event: GestureResponderEvent) => {\n onPress?.(event)\n state.selectionManager.select(key)\n }\n}\n\nChipGroup.Chip = ChipGroupChip\n\nexport { ChipGroup, ChipGroupChip }\nexport type { ChipGroupChipProps, ChipGroupProps }\n"],"mappings":"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"}
|
|
@@ -5,13 +5,13 @@ type CopyFieldProps = Omit<ViewProps, 'children'> & {
|
|
|
5
5
|
/**
|
|
6
6
|
* What the button says once the value has been copied, and what is
|
|
7
7
|
* announced. It reverts to `copyLabel` on its own after a couple of
|
|
8
|
-
* seconds.
|
|
9
|
-
*
|
|
8
|
+
* seconds. Left out, it is the word for it in the `I18nProvider`'s locale,
|
|
9
|
+
* or the device's outside one, "Copied" in English.
|
|
10
10
|
*/
|
|
11
11
|
readonly copiedLabel?: string;
|
|
12
12
|
/**
|
|
13
|
-
* What the button says at rest.
|
|
14
|
-
*
|
|
13
|
+
* What the button says at rest. Left out, it is the word for it in the
|
|
14
|
+
* `I18nProvider`'s locale, or the device's outside one, "Copy" in English.
|
|
15
15
|
*/
|
|
16
16
|
readonly copyLabel?: string;
|
|
17
17
|
/**
|
|
@@ -54,7 +54,7 @@ type CopyFieldProps = Omit<ViewProps, 'children'> & {
|
|
|
54
54
|
*
|
|
55
55
|
* `style`, `ref` and `testID` land on the box.
|
|
56
56
|
*/
|
|
57
|
-
declare function CopyField({ copiedLabel, copyLabel, label, onCopied, onCopyFailed, style, value, ...props }: CopyFieldProps): import("react").JSX.Element;
|
|
57
|
+
declare function CopyField({ copiedLabel: ownCopiedLabel, copyLabel: ownCopyLabel, label, onCopied, onCopyFailed, style, value, ...props }: CopyFieldProps): import("react").JSX.Element;
|
|
58
58
|
//#endregion
|
|
59
59
|
export { CopyField, type CopyFieldProps };
|
|
60
60
|
//# sourceMappingURL=index.d.ts.map
|