@oxy.so/bloom 4.10.0 → 4.11.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/docs/item.mdx +7 -0
- package/lib/commonjs/item/Item.js +9 -7
- package/lib/commonjs/item/Item.js.map +1 -1
- package/lib/module/item/Item.js +9 -7
- package/lib/module/item/Item.js.map +1 -1
- package/lib/typescript/commonjs/item/Item.d.ts +1 -1
- package/lib/typescript/commonjs/item/Item.d.ts.map +1 -1
- package/lib/typescript/commonjs/item/types.d.ts +8 -1
- package/lib/typescript/commonjs/item/types.d.ts.map +1 -1
- package/lib/typescript/module/item/Item.d.ts +1 -1
- package/lib/typescript/module/item/Item.d.ts.map +1 -1
- package/lib/typescript/module/item/types.d.ts +8 -1
- package/lib/typescript/module/item/types.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/item/Item.tsx +9 -7
- package/src/item/types.ts +8 -1
package/docs/item.mdx
CHANGED
|
@@ -35,6 +35,7 @@ import { Item } from '@oxy.so/bloom/item';
|
|
|
35
35
|
| `role` | **how it is announced** — see below |
|
|
36
36
|
| `selected` | the selected state, for `option` / `radio` rows |
|
|
37
37
|
| `active` | the "you are here" state, for navigation rows |
|
|
38
|
+
| `highlighted` | the keyboard's cursor, in a list a field drives |
|
|
38
39
|
| `density` | `comfortable` (default) or `compact` for a dense list |
|
|
39
40
|
| `destructive` | paints the title in the error role |
|
|
40
41
|
|
|
@@ -62,6 +63,12 @@ similar and they are not the same claim: a sidebar row is active without the
|
|
|
62
63
|
user having selected anything, and a picker row is selected whether or not it
|
|
63
64
|
is focused.
|
|
64
65
|
|
|
66
|
+
`highlighted` is the third: *the keyboard is here* — the row an arrow key has
|
|
67
|
+
moved to in a list the field above it drives (a combobox, a composer's
|
|
68
|
+
suggestions). It paints the hover wash, because it is the same claim as the
|
|
69
|
+
pointer resting on the row, and it announces nothing: the row is neither chosen
|
|
70
|
+
nor current.
|
|
71
|
+
|
|
65
72
|
## `destructive` colours, it does not confirm
|
|
66
73
|
|
|
67
74
|
It paints the title in the error role. It does not add a confirmation step —
|
|
@@ -45,6 +45,7 @@ const ItemComponent = function Item({
|
|
|
45
45
|
// different statements to assistive tech; both remain falsy for styling.
|
|
46
46
|
selected,
|
|
47
47
|
active = false,
|
|
48
|
+
highlighted = false,
|
|
48
49
|
density = 'comfortable',
|
|
49
50
|
style,
|
|
50
51
|
titleStyle,
|
|
@@ -88,20 +89,21 @@ const ItemComponent = function Item({
|
|
|
88
89
|
minHeight: cfg.minHeight,
|
|
89
90
|
borderRadius: _tokens.borderRadius.sm
|
|
90
91
|
};
|
|
91
|
-
// Precedence, loudest first. Hover
|
|
92
|
-
// of its own: washing over `active` or
|
|
93
|
-
// losing the state it is announcing,
|
|
94
|
-
//
|
|
95
|
-
// hovered card agree
|
|
92
|
+
// Precedence, loudest first. Hover and the keyboard's cursor paint ONLY a
|
|
93
|
+
// row that had no background of its own: washing over `active` or
|
|
94
|
+
// `selected` would read as the row losing the state it is announcing,
|
|
95
|
+
// which is worse than no hover at all. `contrast50` is the same wash
|
|
96
|
+
// `SubtleHover` uses, so a hovered row and a hovered card agree — and it
|
|
97
|
+
// reads on a primary-tinted surface, where `primaryLight` does not.
|
|
96
98
|
if (active) {
|
|
97
99
|
base.backgroundColor = theme.colors.primaryLight;
|
|
98
100
|
} else if (selected) {
|
|
99
101
|
base.backgroundColor = theme.colors.backgroundSecondary;
|
|
100
|
-
} else if (hovered) {
|
|
102
|
+
} else if (highlighted || hovered) {
|
|
101
103
|
base.backgroundColor = theme.colors.contrast50;
|
|
102
104
|
}
|
|
103
105
|
return base;
|
|
104
|
-
}, [cfg, selected, active, hovered, theme]);
|
|
106
|
+
}, [cfg, selected, active, highlighted, hovered, theme]);
|
|
105
107
|
const body = children != null ? children : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
|
|
106
108
|
style: styles.textColumn,
|
|
107
109
|
children: [title != null ? typeof title === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Text, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_useTheme","_useInteractionState","_index","_tokens","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","DENSITY","comfortable","paddingVertical","minHeight","compact","ItemComponent","Item","title","subtitle","children","leading","trailing","onPress","onLongPress","disabled","destructive","selected","active","density","style","titleStyle","subtitleStyle","accessibilityLabel","accessibilityHint","accessibilityRole","role","expanded","testID","theme","useTheme","state","pressed","onIn","onPressIn","onOut","onPressOut","useInteractionState","hovered","onHoverIn","onHoverOut","titleColor","colors","error","text","cfg","containerStyle","useMemo","base","flexDirection","alignItems","gap","space","md","paddingLeft","lg","paddingRight","borderRadius","sm","backgroundColor","primaryLight","backgroundSecondary","contrast50","body","jsxs","View","styles","textColumn","jsx","Text","numberOfLines","color","textSecondary","content","slot","resolvedRole","selectedAria","handlePress","undefined","handleLongPress","Pressable","android_ripple","border","accessibilityState","StyleSheet","create","justifyContent","flex","minWidth","fontSize","fontWeight","lineHeight","opacity","exports","memo","displayName"],"sourceRoot":"../../../src","sources":["item/Item.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAEA,IAAAE,SAAA,GAAAF,OAAA;AACA,IAAAG,oBAAA,GAAAH,OAAA;AACA,IAAAI,MAAA,GAAAJ,OAAA;AACA,IAAAK,OAAA,GAAAL,OAAA;AAAiE,IAAAM,WAAA,GAAAN,OAAA;AAAA,SAAAD,wBAAAQ,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAV,uBAAA,YAAAA,CAAAQ,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAGjE,MAAMkB,OAAO,GAAG;EACdC,WAAW,EAAE;IAAEC,eAAe,EAAE,EAAE;IAAEC,SAAS,EAAE;EAAG,CAAC;EACnDC,OAAO,EAAE;IAAEF,eAAe,EAAE,CAAC;IAAEC,SAAS,EAAE;EAAG;AAC/C,CAAU;;AAEV;AACA;AACA;AACA;AACA;AACA;AACA,MAAME,aAAa,GAAG,SAASC,IAAIA,CAAC;EAClCC,KAAK;EACLC,QAAQ;EACRC,QAAQ;EACRC,OAAO;EACPC,QAAQ;EACRC,OAAO;EACPC,WAAW;EACXC,QAAQ,GAAG,KAAK;EAChBC,WAAW,GAAG,KAAK;EACnB;EACA;EACA;EACA;EACAC,QAAQ;EACRC,MAAM,GAAG,KAAK;EACdC,OAAO,GAAG,aAAa;EACvBC,KAAK;EACLC,UAAU;EACVC,aAAa;EACbC,kBAAkB;EAClBC,iBAAiB;EACjBC,iBAAiB;EACjBC,IAAI;EACJC,QAAQ;EACRC;AACS,CAAC,EAAE;EACZ,MAAMC,KAAK,GAAG,IAAAC,kBAAQ,EAAC,CAAC;EACxB,MAAM;IAAEC,KAAK,EAAEC,OAAO;IAAEC,IAAI,EAAEC,SAAS;IAAEC,KAAK,EAAEC;EAAW,CAAC,GAC1D,IAAAC,wCAAmB,EAAC,CAAC;EACvB,MAAM;IAAEN,KAAK,EAAEO,OAAO;IAAEL,IAAI,EAAEM,SAAS;IAAEJ,KAAK,EAAEK;EAAW,CAAC,GAC1D,IAAAH,wCAAmB,EAAC,CAAC;EAEvB,MAAMI,UAAU,
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_useTheme","_useInteractionState","_index","_tokens","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","DENSITY","comfortable","paddingVertical","minHeight","compact","ItemComponent","Item","title","subtitle","children","leading","trailing","onPress","onLongPress","disabled","destructive","selected","active","highlighted","density","style","titleStyle","subtitleStyle","accessibilityLabel","accessibilityHint","accessibilityRole","role","expanded","testID","theme","useTheme","state","pressed","onIn","onPressIn","onOut","onPressOut","useInteractionState","hovered","onHoverIn","onHoverOut","titleColor","colors","error","text","cfg","containerStyle","useMemo","base","flexDirection","alignItems","gap","space","md","paddingLeft","lg","paddingRight","borderRadius","sm","backgroundColor","primaryLight","backgroundSecondary","contrast50","body","jsxs","View","styles","textColumn","jsx","Text","numberOfLines","color","textSecondary","content","slot","resolvedRole","selectedAria","handlePress","undefined","handleLongPress","Pressable","android_ripple","border","accessibilityState","StyleSheet","create","justifyContent","flex","minWidth","fontSize","fontWeight","lineHeight","opacity","exports","memo","displayName"],"sourceRoot":"../../../src","sources":["item/Item.tsx"],"mappings":"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","ignoreList":[]}
|
package/lib/module/item/Item.js
CHANGED
|
@@ -40,6 +40,7 @@ const ItemComponent = function Item({
|
|
|
40
40
|
// different statements to assistive tech; both remain falsy for styling.
|
|
41
41
|
selected,
|
|
42
42
|
active = false,
|
|
43
|
+
highlighted = false,
|
|
43
44
|
density = 'comfortable',
|
|
44
45
|
style,
|
|
45
46
|
titleStyle,
|
|
@@ -83,20 +84,21 @@ const ItemComponent = function Item({
|
|
|
83
84
|
minHeight: cfg.minHeight,
|
|
84
85
|
borderRadius: borderRadius.sm
|
|
85
86
|
};
|
|
86
|
-
// Precedence, loudest first. Hover
|
|
87
|
-
// of its own: washing over `active` or
|
|
88
|
-
// losing the state it is announcing,
|
|
89
|
-
//
|
|
90
|
-
// hovered card agree
|
|
87
|
+
// Precedence, loudest first. Hover and the keyboard's cursor paint ONLY a
|
|
88
|
+
// row that had no background of its own: washing over `active` or
|
|
89
|
+
// `selected` would read as the row losing the state it is announcing,
|
|
90
|
+
// which is worse than no hover at all. `contrast50` is the same wash
|
|
91
|
+
// `SubtleHover` uses, so a hovered row and a hovered card agree — and it
|
|
92
|
+
// reads on a primary-tinted surface, where `primaryLight` does not.
|
|
91
93
|
if (active) {
|
|
92
94
|
base.backgroundColor = theme.colors.primaryLight;
|
|
93
95
|
} else if (selected) {
|
|
94
96
|
base.backgroundColor = theme.colors.backgroundSecondary;
|
|
95
|
-
} else if (hovered) {
|
|
97
|
+
} else if (highlighted || hovered) {
|
|
96
98
|
base.backgroundColor = theme.colors.contrast50;
|
|
97
99
|
}
|
|
98
100
|
return base;
|
|
99
|
-
}, [cfg, selected, active, hovered, theme]);
|
|
101
|
+
}, [cfg, selected, active, highlighted, hovered, theme]);
|
|
100
102
|
const body = children != null ? children : /*#__PURE__*/_jsxs(View, {
|
|
101
103
|
style: styles.textColumn,
|
|
102
104
|
children: [title != null ? typeof title === 'string' ? /*#__PURE__*/_jsx(Text, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","memo","useMemo","Pressable","StyleSheet","View","useTheme","useInteractionState","Text","borderRadius","fontSize","space","jsx","_jsx","jsxs","_jsxs","DENSITY","comfortable","paddingVertical","minHeight","compact","ItemComponent","Item","title","subtitle","children","leading","trailing","onPress","onLongPress","disabled","destructive","selected","active","density","style","titleStyle","subtitleStyle","accessibilityLabel","accessibilityHint","accessibilityRole","role","expanded","testID","theme","state","pressed","onIn","onPressIn","onOut","onPressOut","hovered","onHoverIn","onHoverOut","titleColor","colors","error","text","cfg","containerStyle","base","flexDirection","alignItems","gap","md","paddingLeft","lg","paddingRight","sm","backgroundColor","primaryLight","backgroundSecondary","contrast50","body","styles","textColumn","numberOfLines","color","textSecondary","content","slot","resolvedRole","selectedAria","handlePress","undefined","handleLongPress","android_ripple","border","accessibilityState","create","justifyContent","flex","minWidth","fontWeight","lineHeight","opacity","displayName"],"sourceRoot":"../../../src","sources":["item/Item.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,IAAI,EAAEC,OAAO,QAAQ,OAAO;AAC5C,SAASC,SAAS,EAAEC,UAAU,EAAEC,IAAI,QAAwB,cAAc;AAE1E,SAASC,QAAQ,QAAQ,uBAAoB;AAC7C,SAASC,mBAAmB,QAAQ,mCAAgC;AACpE,SAASC,IAAI,QAAQ,wBAAe;AACpC,SAASC,YAAY,EAAEC,QAAQ,EAAEC,KAAK,QAAQ,qBAAkB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAGjE,MAAMC,OAAO,GAAG;EACdC,WAAW,EAAE;IAAEC,eAAe,EAAE,EAAE;IAAEC,SAAS,EAAE;EAAG,CAAC;EACnDC,OAAO,EAAE;IAAEF,eAAe,EAAE,CAAC;IAAEC,SAAS,EAAE;EAAG;AAC/C,CAAU;;AAEV;AACA;AACA;AACA;AACA;AACA;AACA,MAAME,aAAa,GAAG,SAASC,IAAIA,CAAC;EAClCC,KAAK;EACLC,QAAQ;EACRC,QAAQ;EACRC,OAAO;EACPC,QAAQ;EACRC,OAAO;EACPC,WAAW;EACXC,QAAQ,GAAG,KAAK;EAChBC,WAAW,GAAG,KAAK;EACnB;EACA;EACA;EACA;EACAC,QAAQ;EACRC,MAAM,GAAG,KAAK;EACdC,OAAO,GAAG,aAAa;EACvBC,KAAK;EACLC,UAAU;EACVC,aAAa;EACbC,kBAAkB;EAClBC,iBAAiB;EACjBC,iBAAiB;EACjBC,IAAI;EACJC,QAAQ;EACRC;AACS,CAAC,EAAE;EACZ,MAAMC,KAAK,
|
|
1
|
+
{"version":3,"names":["React","memo","useMemo","Pressable","StyleSheet","View","useTheme","useInteractionState","Text","borderRadius","fontSize","space","jsx","_jsx","jsxs","_jsxs","DENSITY","comfortable","paddingVertical","minHeight","compact","ItemComponent","Item","title","subtitle","children","leading","trailing","onPress","onLongPress","disabled","destructive","selected","active","highlighted","density","style","titleStyle","subtitleStyle","accessibilityLabel","accessibilityHint","accessibilityRole","role","expanded","testID","theme","state","pressed","onIn","onPressIn","onOut","onPressOut","hovered","onHoverIn","onHoverOut","titleColor","colors","error","text","cfg","containerStyle","base","flexDirection","alignItems","gap","md","paddingLeft","lg","paddingRight","sm","backgroundColor","primaryLight","backgroundSecondary","contrast50","body","styles","textColumn","numberOfLines","color","textSecondary","content","slot","resolvedRole","selectedAria","handlePress","undefined","handleLongPress","android_ripple","border","accessibilityState","create","justifyContent","flex","minWidth","fontWeight","lineHeight","opacity","displayName"],"sourceRoot":"../../../src","sources":["item/Item.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { ItemProps } from './types';
|
|
3
|
-
export declare const Item: React.MemoExoticComponent<({ title, subtitle, children, leading, trailing, onPress, onLongPress, disabled, destructive, selected, active, density, style, titleStyle, subtitleStyle, accessibilityLabel, accessibilityHint, accessibilityRole, role, expanded, testID, }: ItemProps) => import("react/jsx-runtime").JSX.Element>;
|
|
3
|
+
export declare const Item: React.MemoExoticComponent<({ title, subtitle, children, leading, trailing, onPress, onLongPress, disabled, destructive, selected, active, highlighted, density, style, titleStyle, subtitleStyle, accessibilityLabel, accessibilityHint, accessibilityRole, role, expanded, testID, }: ItemProps) => import("react/jsx-runtime").JSX.Element>;
|
|
4
4
|
//# sourceMappingURL=Item.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../../../src/item/Item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAO7C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../../../src/item/Item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAO7C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAsOzC,eAAO,MAAM,IAAI,yRA9Ld,SAAS,6CA8L2B,CAAC"}
|
|
@@ -25,8 +25,15 @@ export interface ItemProps {
|
|
|
25
25
|
* `Item` is used as an option inside an overlay (combobox, command, menu).
|
|
26
26
|
*/
|
|
27
27
|
selected?: boolean;
|
|
28
|
-
/**
|
|
28
|
+
/** The "you are here" state: the current route in a navigation list. */
|
|
29
29
|
active?: boolean;
|
|
30
|
+
/**
|
|
31
|
+
* The keyboard's cursor in a list the field above it drives (arrow keys over
|
|
32
|
+
* a combobox or a composer's suggestions). Paints the hover wash, since it
|
|
33
|
+
* is the same claim as the pointer resting on the row, and announces
|
|
34
|
+
* nothing: the row is neither chosen (`selected`) nor current (`active`).
|
|
35
|
+
*/
|
|
36
|
+
highlighted?: boolean;
|
|
30
37
|
/** Vertical density. Defaults to `'comfortable'`. */
|
|
31
38
|
density?: 'comfortable' | 'compact';
|
|
32
39
|
style?: StyleProp<ViewStyle>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/item/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEvF,MAAM,WAAW,SAAS;IACxB,0BAA0B;IAC1B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,gDAAgD;IAChD,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,gEAAgE;IAChE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,+BAA+B;IAC/B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,kEAAkE;IAClE,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4DAA4D;IAC5D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/item/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEvF,MAAM,WAAW,SAAS;IACxB,0BAA0B;IAC1B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,gDAAgD;IAChD,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,gEAAgE;IAChE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,+BAA+B;IAC/B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,kEAAkE;IAClE,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4DAA4D;IAC5D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wEAAwE;IACxE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;;;OAKG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,qDAAqD;IACrD,OAAO,CAAC,EAAE,aAAa,GAAG,SAAS,CAAC;IACpC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,aAAa,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACrC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,UAAU,GAAG,UAAU,GAAG,UAAU,CAAC;IACjE;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { ItemProps } from './types';
|
|
3
|
-
export declare const Item: React.MemoExoticComponent<({ title, subtitle, children, leading, trailing, onPress, onLongPress, disabled, destructive, selected, active, density, style, titleStyle, subtitleStyle, accessibilityLabel, accessibilityHint, accessibilityRole, role, expanded, testID, }: ItemProps) => import("react/jsx-runtime").JSX.Element>;
|
|
3
|
+
export declare const Item: React.MemoExoticComponent<({ title, subtitle, children, leading, trailing, onPress, onLongPress, disabled, destructive, selected, active, highlighted, density, style, titleStyle, subtitleStyle, accessibilityLabel, accessibilityHint, accessibilityRole, role, expanded, testID, }: ItemProps) => import("react/jsx-runtime").JSX.Element>;
|
|
4
4
|
//# sourceMappingURL=Item.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../../../src/item/Item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAO7C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../../../src/item/Item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAO7C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAsOzC,eAAO,MAAM,IAAI,yRA9Ld,SAAS,6CA8L2B,CAAC"}
|
|
@@ -25,8 +25,15 @@ export interface ItemProps {
|
|
|
25
25
|
* `Item` is used as an option inside an overlay (combobox, command, menu).
|
|
26
26
|
*/
|
|
27
27
|
selected?: boolean;
|
|
28
|
-
/**
|
|
28
|
+
/** The "you are here" state: the current route in a navigation list. */
|
|
29
29
|
active?: boolean;
|
|
30
|
+
/**
|
|
31
|
+
* The keyboard's cursor in a list the field above it drives (arrow keys over
|
|
32
|
+
* a combobox or a composer's suggestions). Paints the hover wash, since it
|
|
33
|
+
* is the same claim as the pointer resting on the row, and announces
|
|
34
|
+
* nothing: the row is neither chosen (`selected`) nor current (`active`).
|
|
35
|
+
*/
|
|
36
|
+
highlighted?: boolean;
|
|
30
37
|
/** Vertical density. Defaults to `'comfortable'`. */
|
|
31
38
|
density?: 'comfortable' | 'compact';
|
|
32
39
|
style?: StyleProp<ViewStyle>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/item/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEvF,MAAM,WAAW,SAAS;IACxB,0BAA0B;IAC1B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,gDAAgD;IAChD,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,gEAAgE;IAChE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,+BAA+B;IAC/B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,kEAAkE;IAClE,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4DAA4D;IAC5D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/item/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEvF,MAAM,WAAW,SAAS;IACxB,0BAA0B;IAC1B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,gDAAgD;IAChD,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,gEAAgE;IAChE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,+BAA+B;IAC/B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,kEAAkE;IAClE,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4DAA4D;IAC5D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wEAAwE;IACxE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;;;OAKG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,qDAAqD;IACrD,OAAO,CAAC,EAAE,aAAa,GAAG,SAAS,CAAC;IACpC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,aAAa,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACrC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,UAAU,GAAG,UAAU,GAAG,UAAU,CAAC;IACjE;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}
|
package/package.json
CHANGED
package/src/item/Item.tsx
CHANGED
|
@@ -34,6 +34,7 @@ const ItemComponent = function Item({
|
|
|
34
34
|
// different statements to assistive tech; both remain falsy for styling.
|
|
35
35
|
selected,
|
|
36
36
|
active = false,
|
|
37
|
+
highlighted = false,
|
|
37
38
|
density = 'comfortable',
|
|
38
39
|
style,
|
|
39
40
|
titleStyle,
|
|
@@ -73,20 +74,21 @@ const ItemComponent = function Item({
|
|
|
73
74
|
minHeight: cfg.minHeight,
|
|
74
75
|
borderRadius: borderRadius.sm,
|
|
75
76
|
};
|
|
76
|
-
// Precedence, loudest first. Hover
|
|
77
|
-
// of its own: washing over `active` or
|
|
78
|
-
// losing the state it is announcing,
|
|
79
|
-
//
|
|
80
|
-
// hovered card agree
|
|
77
|
+
// Precedence, loudest first. Hover and the keyboard's cursor paint ONLY a
|
|
78
|
+
// row that had no background of its own: washing over `active` or
|
|
79
|
+
// `selected` would read as the row losing the state it is announcing,
|
|
80
|
+
// which is worse than no hover at all. `contrast50` is the same wash
|
|
81
|
+
// `SubtleHover` uses, so a hovered row and a hovered card agree — and it
|
|
82
|
+
// reads on a primary-tinted surface, where `primaryLight` does not.
|
|
81
83
|
if (active) {
|
|
82
84
|
base.backgroundColor = theme.colors.primaryLight;
|
|
83
85
|
} else if (selected) {
|
|
84
86
|
base.backgroundColor = theme.colors.backgroundSecondary;
|
|
85
|
-
} else if (hovered) {
|
|
87
|
+
} else if (highlighted || hovered) {
|
|
86
88
|
base.backgroundColor = theme.colors.contrast50;
|
|
87
89
|
}
|
|
88
90
|
return base;
|
|
89
|
-
}, [cfg, selected, active, hovered, theme]);
|
|
91
|
+
}, [cfg, selected, active, highlighted, hovered, theme]);
|
|
90
92
|
|
|
91
93
|
const body =
|
|
92
94
|
children != null ? (
|
package/src/item/types.ts
CHANGED
|
@@ -26,8 +26,15 @@ export interface ItemProps {
|
|
|
26
26
|
* `Item` is used as an option inside an overlay (combobox, command, menu).
|
|
27
27
|
*/
|
|
28
28
|
selected?: boolean;
|
|
29
|
-
/**
|
|
29
|
+
/** The "you are here" state: the current route in a navigation list. */
|
|
30
30
|
active?: boolean;
|
|
31
|
+
/**
|
|
32
|
+
* The keyboard's cursor in a list the field above it drives (arrow keys over
|
|
33
|
+
* a combobox or a composer's suggestions). Paints the hover wash, since it
|
|
34
|
+
* is the same claim as the pointer resting on the row, and announces
|
|
35
|
+
* nothing: the row is neither chosen (`selected`) nor current (`active`).
|
|
36
|
+
*/
|
|
37
|
+
highlighted?: boolean;
|
|
31
38
|
/** Vertical density. Defaults to `'comfortable'`. */
|
|
32
39
|
density?: 'comfortable' | 'compact';
|
|
33
40
|
style?: StyleProp<ViewStyle>;
|