@kaizen/components 1.64.6 → 1.64.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/__future__/Select/subcomponents/Option/Option.cjs +18 -6
- package/dist/esm/__future__/Select/subcomponents/Option/Option.mjs +16 -4
- package/dist/styles.css +59 -59
- package/package.json +17 -17
- package/src/__future__/Select/_docs/Select.stories.tsx +47 -0
- package/src/__future__/Select/subcomponents/Option/Option.tsx +15 -4
|
@@ -2,10 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
var tslib = require('tslib');
|
|
4
4
|
var React = require('react');
|
|
5
|
-
var focus = require('@react-aria/focus');
|
|
6
|
-
var listbox = require('@react-aria/listbox');
|
|
7
|
-
var utils = require('@react-aria/utils');
|
|
8
5
|
var classnames = require('classnames');
|
|
6
|
+
var reactAria = require('react-aria');
|
|
9
7
|
require('../../../../Icon/subcomponents/SVG/SVG.cjs');
|
|
10
8
|
var CheckIcon = require('../../../../Icon/CheckIcon.cjs');
|
|
11
9
|
var SelectContext = require('../../context/SelectContext.cjs');
|
|
@@ -23,16 +21,30 @@ var Option = function (_a) {
|
|
|
23
21
|
props = tslib.__rest(_a, ["item", "classNameOverride"]);
|
|
24
22
|
var state = SelectContext.useSelectContext().state;
|
|
25
23
|
var ref = React__default.default.useRef(null);
|
|
26
|
-
var _b =
|
|
24
|
+
var _b = reactAria.useOption({
|
|
27
25
|
key: item.key
|
|
28
26
|
}, state, ref),
|
|
29
27
|
optionProps = _b.optionProps,
|
|
30
28
|
isSelected = _b.isSelected,
|
|
31
29
|
isDisabled = _b.isDisabled;
|
|
32
|
-
var
|
|
30
|
+
var onPointerUp = optionProps.onPointerUp,
|
|
31
|
+
restOptionProps = tslib.__rest(optionProps, ["onPointerUp"]);
|
|
32
|
+
var _c = reactAria.useFocusRing(),
|
|
33
33
|
isFocusVisible = _c.isFocusVisible,
|
|
34
34
|
focusProps = _c.focusProps;
|
|
35
|
-
return React__default.default.createElement("li", tslib.__assign({},
|
|
35
|
+
return React__default.default.createElement("li", tslib.__assign({}, reactAria.mergeProps(restOptionProps, focusProps, props, {
|
|
36
|
+
onPointerUp: function (e) {
|
|
37
|
+
if (e.pointerType === "touch") {
|
|
38
|
+
// On touch devices, the listbox closes too quickly so below elements will trigger their pointer events.
|
|
39
|
+
// Slow it down a bit to prevent the appearance of propagation.
|
|
40
|
+
setTimeout(function () {
|
|
41
|
+
return state.setSelectedKey(item.key);
|
|
42
|
+
}, 250);
|
|
43
|
+
} else {
|
|
44
|
+
onPointerUp === null || onPointerUp === void 0 ? void 0 : onPointerUp(e);
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
}), {
|
|
36
48
|
ref: ref,
|
|
37
49
|
className: classnames__default.default(Option_module.option, isSelected && Option_module.isSelected, isFocusVisible && Option_module.isFocusVisible, isDisabled && Option_module.disabled, classNameOverride),
|
|
38
50
|
"aria-label": item.textValue
|
|
@@ -1,9 +1,7 @@
|
|
|
1
1
|
import { __rest, __assign } from 'tslib';
|
|
2
2
|
import React from 'react';
|
|
3
|
-
import { useFocusRing } from '@react-aria/focus';
|
|
4
|
-
import { useOption } from '@react-aria/listbox';
|
|
5
|
-
import { mergeProps } from '@react-aria/utils';
|
|
6
3
|
import classnames from 'classnames';
|
|
4
|
+
import { useOption, useFocusRing, mergeProps } from 'react-aria';
|
|
7
5
|
import '../../../../Icon/subcomponents/SVG/SVG.mjs';
|
|
8
6
|
import { CheckIcon } from '../../../../Icon/CheckIcon.mjs';
|
|
9
7
|
import { useSelectContext } from '../../context/SelectContext.mjs';
|
|
@@ -21,10 +19,24 @@ const Option = /*#__PURE__*/function () {
|
|
|
21
19
|
optionProps = _b.optionProps,
|
|
22
20
|
isSelected = _b.isSelected,
|
|
23
21
|
isDisabled = _b.isDisabled;
|
|
22
|
+
var onPointerUp = optionProps.onPointerUp,
|
|
23
|
+
restOptionProps = __rest(optionProps, ["onPointerUp"]);
|
|
24
24
|
var _c = useFocusRing(),
|
|
25
25
|
isFocusVisible = _c.isFocusVisible,
|
|
26
26
|
focusProps = _c.focusProps;
|
|
27
|
-
return /*#__PURE__*/React.createElement("li", __assign({}, mergeProps(
|
|
27
|
+
return /*#__PURE__*/React.createElement("li", __assign({}, mergeProps(restOptionProps, focusProps, props, {
|
|
28
|
+
onPointerUp: function (e) {
|
|
29
|
+
if (e.pointerType === "touch") {
|
|
30
|
+
// On touch devices, the listbox closes too quickly so below elements will trigger their pointer events.
|
|
31
|
+
// Slow it down a bit to prevent the appearance of propagation.
|
|
32
|
+
setTimeout(function () {
|
|
33
|
+
return state.setSelectedKey(item.key);
|
|
34
|
+
}, 250);
|
|
35
|
+
} else {
|
|
36
|
+
onPointerUp === null || onPointerUp === void 0 ? void 0 : onPointerUp(e);
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
}), {
|
|
28
40
|
ref: ref,
|
|
29
41
|
className: classnames(styles.option, isSelected && styles.isSelected, isFocusVisible && styles.isFocusVisible, isDisabled && styles.disabled, classNameOverride),
|
|
30
42
|
"aria-label": item.textValue
|
package/dist/styles.css
CHANGED
|
@@ -27,6 +27,62 @@
|
|
|
27
27
|
.OverlayArrow-module_overlayArrow__hoDyK.OverlayArrow-module_reversed__-WGcR path {
|
|
28
28
|
fill: var(--color-white, #ffffff);
|
|
29
29
|
}
|
|
30
|
+
/** THIS IS AN AUTOGENERATED FILE **/
|
|
31
|
+
/** THIS IS AN AUTOGENERATED FILE **/
|
|
32
|
+
/** THIS IS AN AUTOGENERATED FILE **/
|
|
33
|
+
/** THIS IS AN AUTOGENERATED FILE **/
|
|
34
|
+
/** THIS IS AN AUTOGENERATED FILE **/
|
|
35
|
+
/** THIS IS AN AUTOGENERATED FILE **/
|
|
36
|
+
.Tooltip-module_tooltip__efL1m {
|
|
37
|
+
max-width: 200px;
|
|
38
|
+
padding: var(--spacing-8, 0.5rem) var(--spacing-12, 0.75rem);
|
|
39
|
+
color: var(--color-white, #ffffff);
|
|
40
|
+
text-align: center;
|
|
41
|
+
font-family: var(--typography-paragraph-extra-small-font-family, "Inter", "Noto Sans", Helvetica, Arial, sans-serif);
|
|
42
|
+
font-size: var(--typography-paragraph-extra-small-font-size, 0.75rem);
|
|
43
|
+
font-weight: var(--typography-paragraph-extra-small-font-weight, 400);
|
|
44
|
+
letter-spacing: var(--typography-paragraph-extra-small-letter-spacing, normal);
|
|
45
|
+
line-height: var(--typography-paragraph-extra-small-line-height, 1.125rem);
|
|
46
|
+
border-radius: var(--border-solid-border-radius, 7px);
|
|
47
|
+
box-shadow: var(--shadow-small-box-shadow, 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 3px 16px 0 rgba(0, 0, 0, 0.06));
|
|
48
|
+
background-color: var(--color-purple-800, #2f2438);
|
|
49
|
+
text-wrap: pretty;
|
|
50
|
+
/* fixes FF gap */
|
|
51
|
+
transform: translate3d(0, 0, 0);
|
|
52
|
+
}
|
|
53
|
+
.Tooltip-module_tooltip__efL1m.Tooltip-module_reversed__NnCbZ {
|
|
54
|
+
background-color: var(--color-white, #ffffff);
|
|
55
|
+
color: var(--color-purple-800, #2f2438);
|
|
56
|
+
}
|
|
57
|
+
.Tooltip-module_tooltip__efL1m[data-placement=top] {
|
|
58
|
+
--origin: translateY(4px);
|
|
59
|
+
}
|
|
60
|
+
.Tooltip-module_tooltip__efL1m[data-placement=bottom] {
|
|
61
|
+
--origin: translateY(-4px);
|
|
62
|
+
}
|
|
63
|
+
.Tooltip-module_tooltip__efL1m[data-placement=right] {
|
|
64
|
+
--origin: translateX(-4px);
|
|
65
|
+
}
|
|
66
|
+
.Tooltip-module_tooltip__efL1m[data-placement=left] {
|
|
67
|
+
--origin: translateX(4px);
|
|
68
|
+
}
|
|
69
|
+
.Tooltip-module_tooltip__efL1m[data-entering] {
|
|
70
|
+
animation: Tooltip-module_slide__lFdGA var(--animation-duration-fast, 300ms);
|
|
71
|
+
}
|
|
72
|
+
.Tooltip-module_tooltip__efL1m[data-exiting] {
|
|
73
|
+
animation: Tooltip-module_slide__lFdGA var(--animation-duration-fast, 300ms) reverse var(--animation-easing-function-ease-in, cubic-bezier(0.55, 0.085, 0.68, 0.53));
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
@keyframes Tooltip-module_slide__lFdGA {
|
|
77
|
+
from {
|
|
78
|
+
transform: var(--origin);
|
|
79
|
+
opacity: 0;
|
|
80
|
+
}
|
|
81
|
+
to {
|
|
82
|
+
transform: translateY(0);
|
|
83
|
+
opacity: 1;
|
|
84
|
+
}
|
|
85
|
+
}
|
|
30
86
|
.Menu-module_menu__iHYqh {
|
|
31
87
|
background-color: var(--color-white);
|
|
32
88
|
color: var(--color-purple-800);
|
|
@@ -145,6 +201,9 @@
|
|
|
145
201
|
--button-icon-size: var(--spacing-16);
|
|
146
202
|
gap: var(--spacing-8);
|
|
147
203
|
}
|
|
204
|
+
.Focusable-module_focusableWrapper__NfuIi {
|
|
205
|
+
display: inline-flex;
|
|
206
|
+
}
|
|
148
207
|
.MenuItem-module_item__DPerF {
|
|
149
208
|
font-family: var(--typography-paragraph-body-font-family);
|
|
150
209
|
font-size: var(--typography-paragraph-body-font-size);
|
|
@@ -179,65 +238,6 @@
|
|
|
179
238
|
.MenuItem-module_item__DPerF[data-disabled] {
|
|
180
239
|
opacity: 0.3;
|
|
181
240
|
}
|
|
182
|
-
.Focusable-module_focusableWrapper__NfuIi {
|
|
183
|
-
display: inline-flex;
|
|
184
|
-
}
|
|
185
|
-
/** THIS IS AN AUTOGENERATED FILE **/
|
|
186
|
-
/** THIS IS AN AUTOGENERATED FILE **/
|
|
187
|
-
/** THIS IS AN AUTOGENERATED FILE **/
|
|
188
|
-
/** THIS IS AN AUTOGENERATED FILE **/
|
|
189
|
-
/** THIS IS AN AUTOGENERATED FILE **/
|
|
190
|
-
/** THIS IS AN AUTOGENERATED FILE **/
|
|
191
|
-
.Tooltip-module_tooltip__efL1m {
|
|
192
|
-
max-width: 200px;
|
|
193
|
-
padding: var(--spacing-8, 0.5rem) var(--spacing-12, 0.75rem);
|
|
194
|
-
color: var(--color-white, #ffffff);
|
|
195
|
-
text-align: center;
|
|
196
|
-
font-family: var(--typography-paragraph-extra-small-font-family, "Inter", "Noto Sans", Helvetica, Arial, sans-serif);
|
|
197
|
-
font-size: var(--typography-paragraph-extra-small-font-size, 0.75rem);
|
|
198
|
-
font-weight: var(--typography-paragraph-extra-small-font-weight, 400);
|
|
199
|
-
letter-spacing: var(--typography-paragraph-extra-small-letter-spacing, normal);
|
|
200
|
-
line-height: var(--typography-paragraph-extra-small-line-height, 1.125rem);
|
|
201
|
-
border-radius: var(--border-solid-border-radius, 7px);
|
|
202
|
-
box-shadow: var(--shadow-small-box-shadow, 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 3px 16px 0 rgba(0, 0, 0, 0.06));
|
|
203
|
-
background-color: var(--color-purple-800, #2f2438);
|
|
204
|
-
text-wrap: pretty;
|
|
205
|
-
/* fixes FF gap */
|
|
206
|
-
transform: translate3d(0, 0, 0);
|
|
207
|
-
}
|
|
208
|
-
.Tooltip-module_tooltip__efL1m.Tooltip-module_reversed__NnCbZ {
|
|
209
|
-
background-color: var(--color-white, #ffffff);
|
|
210
|
-
color: var(--color-purple-800, #2f2438);
|
|
211
|
-
}
|
|
212
|
-
.Tooltip-module_tooltip__efL1m[data-placement=top] {
|
|
213
|
-
--origin: translateY(4px);
|
|
214
|
-
}
|
|
215
|
-
.Tooltip-module_tooltip__efL1m[data-placement=bottom] {
|
|
216
|
-
--origin: translateY(-4px);
|
|
217
|
-
}
|
|
218
|
-
.Tooltip-module_tooltip__efL1m[data-placement=right] {
|
|
219
|
-
--origin: translateX(-4px);
|
|
220
|
-
}
|
|
221
|
-
.Tooltip-module_tooltip__efL1m[data-placement=left] {
|
|
222
|
-
--origin: translateX(4px);
|
|
223
|
-
}
|
|
224
|
-
.Tooltip-module_tooltip__efL1m[data-entering] {
|
|
225
|
-
animation: Tooltip-module_slide__lFdGA var(--animation-duration-fast, 300ms);
|
|
226
|
-
}
|
|
227
|
-
.Tooltip-module_tooltip__efL1m[data-exiting] {
|
|
228
|
-
animation: Tooltip-module_slide__lFdGA var(--animation-duration-fast, 300ms) reverse var(--animation-easing-function-ease-in, cubic-bezier(0.55, 0.085, 0.68, 0.53));
|
|
229
|
-
}
|
|
230
|
-
|
|
231
|
-
@keyframes Tooltip-module_slide__lFdGA {
|
|
232
|
-
from {
|
|
233
|
-
transform: var(--origin);
|
|
234
|
-
opacity: 0;
|
|
235
|
-
}
|
|
236
|
-
to {
|
|
237
|
-
transform: translateY(0);
|
|
238
|
-
opacity: 1;
|
|
239
|
-
}
|
|
240
|
-
}
|
|
241
241
|
.SVG-module_icon__8J5Ev {
|
|
242
242
|
width: 20px;
|
|
243
243
|
height: 20px;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kaizen/components",
|
|
3
|
-
"version": "1.64.
|
|
3
|
+
"version": "1.64.8",
|
|
4
4
|
"description": "Kaizen component library",
|
|
5
5
|
"author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
|
|
6
6
|
"homepage": "https://cultureamp.design",
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
},
|
|
36
36
|
"type": "module",
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@floating-ui/react-dom": "^2.1.
|
|
38
|
+
"@floating-ui/react-dom": "^2.1.2",
|
|
39
39
|
"@headlessui/react": "<=1.5.0",
|
|
40
40
|
"@internationalized/date": "^3.5.5",
|
|
41
41
|
"@popperjs/core": "^2.11.8",
|
|
@@ -56,7 +56,7 @@
|
|
|
56
56
|
"@react-stately/select": "^3.6.6",
|
|
57
57
|
"@react-types/shared": "^3.24.1",
|
|
58
58
|
"classnames": "^2.5.1",
|
|
59
|
-
"date-fns": "^
|
|
59
|
+
"date-fns": "^4.1.0",
|
|
60
60
|
"lodash.debounce": "^4.0.8",
|
|
61
61
|
"nanobus": "^4.5.0",
|
|
62
62
|
"prosemirror-commands": "^1.6.0",
|
|
@@ -67,31 +67,31 @@
|
|
|
67
67
|
"prosemirror-schema-basic": "^1.2.3",
|
|
68
68
|
"prosemirror-schema-list": "^1.4.1",
|
|
69
69
|
"prosemirror-state": "^1.4.3",
|
|
70
|
-
"prosemirror-transform": "^1.
|
|
70
|
+
"prosemirror-transform": "^1.10.0",
|
|
71
71
|
"prosemirror-utils": "^1.2.2",
|
|
72
|
-
"prosemirror-view": "^1.
|
|
72
|
+
"prosemirror-view": "^1.34.3",
|
|
73
73
|
"react-animate-height": "^3.2.3",
|
|
74
74
|
"react-aria": "^3.34.1",
|
|
75
75
|
"react-aria-components": "^1.3.1",
|
|
76
76
|
"react-day-picker": "8.10.1",
|
|
77
|
-
"react-focus-lock": "^2.
|
|
77
|
+
"react-focus-lock": "^2.13.2",
|
|
78
78
|
"react-focus-on": "^3.9.3",
|
|
79
79
|
"react-media": "^1.10.0",
|
|
80
80
|
"react-popper": "^2.3.0",
|
|
81
|
-
"react-select": "^5.8.
|
|
81
|
+
"react-select": "^5.8.1",
|
|
82
82
|
"react-textfit": "^1.1.1",
|
|
83
83
|
"resize-observer-polyfill": "^1.5.1",
|
|
84
84
|
"tsx": "^4.17.0",
|
|
85
|
-
"use-debounce": "^10.0.
|
|
85
|
+
"use-debounce": "^10.0.3",
|
|
86
86
|
"uuid": "^10.0.0"
|
|
87
87
|
},
|
|
88
88
|
"dependenciesComments": {
|
|
89
89
|
"react-day-picker": "Version locked until a11y gets fixed (https://github.com/gpbl/react-day-picker/pull/1708)"
|
|
90
90
|
},
|
|
91
91
|
"devDependencies": {
|
|
92
|
-
"@cultureamp/frontend-apis": "^9.
|
|
93
|
-
"@cultureamp/i18n-react-intl": "^2.6.
|
|
94
|
-
"@tanstack/react-query": "^5.
|
|
92
|
+
"@cultureamp/frontend-apis": "^9.9.0",
|
|
93
|
+
"@cultureamp/i18n-react-intl": "^2.6.3",
|
|
94
|
+
"@tanstack/react-query": "^5.56.2",
|
|
95
95
|
"@testing-library/dom": "^10.4.0",
|
|
96
96
|
"@types/jest-axe": "^3.5.9",
|
|
97
97
|
"@types/lodash.debounce": "^4.0.9",
|
|
@@ -104,7 +104,7 @@
|
|
|
104
104
|
"jest-axe": "^9.0.0",
|
|
105
105
|
"lodash.isempty": "^4.4.0",
|
|
106
106
|
"normalize.css": "^8.0.1",
|
|
107
|
-
"postcss": "^8.4.
|
|
107
|
+
"postcss": "^8.4.47",
|
|
108
108
|
"postcss-cli": "^11.0.0",
|
|
109
109
|
"postcss-import": "^16.1.0",
|
|
110
110
|
"postcss-preset-env": "^10.0.2",
|
|
@@ -113,15 +113,15 @@
|
|
|
113
113
|
"react": "^18.3.1",
|
|
114
114
|
"react-dom": "^18.3.1",
|
|
115
115
|
"react-highlight": "^0.15.0",
|
|
116
|
-
"react-intl": "^6.
|
|
117
|
-
"rollup": "^4.
|
|
116
|
+
"react-intl": "^6.7.0",
|
|
117
|
+
"rollup": "^4.22.5",
|
|
118
118
|
"sass": "^1.77.8",
|
|
119
119
|
"serialize-query-params": "^2.0.2",
|
|
120
120
|
"svgo": "^3.3.2",
|
|
121
|
-
"tslib": "^2.
|
|
121
|
+
"tslib": "^2.7.0",
|
|
122
122
|
"tsx": "^4.17.0",
|
|
123
|
-
"@kaizen/package-bundler": "1.1.
|
|
124
|
-
"@kaizen/design-tokens": "10.6.
|
|
123
|
+
"@kaizen/package-bundler": "1.1.6",
|
|
124
|
+
"@kaizen/design-tokens": "10.6.2"
|
|
125
125
|
},
|
|
126
126
|
"peerDependencies": {
|
|
127
127
|
"@cultureamp/i18n-react-intl": "^2.5.9",
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React from "react"
|
|
2
2
|
import { Meta, StoryObj } from "@storybook/react"
|
|
3
|
+
import { RadioField, RadioGroup } from "~components/Radio"
|
|
3
4
|
import { Select } from "../Select"
|
|
4
5
|
import { SelectOption } from "../types"
|
|
5
6
|
import {
|
|
@@ -26,6 +27,10 @@ const meta = {
|
|
|
26
27
|
args: {
|
|
27
28
|
label: "Label",
|
|
28
29
|
items: singleMockItems,
|
|
30
|
+
onFocus: undefined,
|
|
31
|
+
onFocusChange: undefined,
|
|
32
|
+
onOpenChange: undefined,
|
|
33
|
+
onSelectionChange: undefined,
|
|
29
34
|
},
|
|
30
35
|
parameters: {
|
|
31
36
|
actions: {
|
|
@@ -190,3 +195,45 @@ export const PortalContainer: Story = {
|
|
|
190
195
|
},
|
|
191
196
|
parameters: { docs: { source: { type: "code" } } },
|
|
192
197
|
}
|
|
198
|
+
|
|
199
|
+
export const TouchDeviceTest: Story = {
|
|
200
|
+
name: "Touch Device Pointer Event (Manual Test)",
|
|
201
|
+
render: args => {
|
|
202
|
+
const [selected, setSelected] = React.useState("radio-1")
|
|
203
|
+
return (
|
|
204
|
+
<div>
|
|
205
|
+
<p>
|
|
206
|
+
On touch devices, the radios below were changing when selecting an
|
|
207
|
+
option sitting above it.
|
|
208
|
+
<br />
|
|
209
|
+
At this time, we could not automate this test, so this story exists
|
|
210
|
+
for manual testing.
|
|
211
|
+
</p>
|
|
212
|
+
<Select {...args} />
|
|
213
|
+
<RadioGroup labelText="Radio group">
|
|
214
|
+
<RadioField
|
|
215
|
+
labelText="Label 1"
|
|
216
|
+
name="radio-group"
|
|
217
|
+
value="radio-value-1"
|
|
218
|
+
onChange={() => setSelected("radio-1")}
|
|
219
|
+
selectedStatus={selected === "radio-1"}
|
|
220
|
+
/>
|
|
221
|
+
<RadioField
|
|
222
|
+
labelText="Label 2"
|
|
223
|
+
name="radio-group"
|
|
224
|
+
value="radio-value-2"
|
|
225
|
+
onChange={() => setSelected("radio-2")}
|
|
226
|
+
selectedStatus={selected === "radio-2"}
|
|
227
|
+
/>
|
|
228
|
+
<RadioField
|
|
229
|
+
labelText="Label 3"
|
|
230
|
+
name="radio-group"
|
|
231
|
+
value="radio-value-3"
|
|
232
|
+
onChange={() => setSelected("radio-3")}
|
|
233
|
+
selectedStatus={selected === "radio-3"}
|
|
234
|
+
/>
|
|
235
|
+
</RadioGroup>
|
|
236
|
+
</div>
|
|
237
|
+
)
|
|
238
|
+
},
|
|
239
|
+
}
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import React, { HTMLAttributes } from "react"
|
|
2
|
-
import {
|
|
3
|
-
import { useOption } from "@react-aria/listbox"
|
|
4
|
-
import { mergeProps } from "@react-aria/utils"
|
|
2
|
+
import { FocusableElement } from "@react-types/shared"
|
|
5
3
|
import classnames from "classnames"
|
|
4
|
+
import { mergeProps, useFocusRing, useOption } from "react-aria"
|
|
6
5
|
import { CheckIcon } from "~components/Icon"
|
|
7
6
|
import { OverrideClassName } from "~components/types/OverrideClassName"
|
|
8
7
|
import { useSelectContext } from "../../context"
|
|
@@ -26,11 +25,23 @@ export const Option = <Option extends SelectOption = SelectOption>({
|
|
|
26
25
|
ref
|
|
27
26
|
)
|
|
28
27
|
|
|
28
|
+
const { onPointerUp, ...restOptionProps } = optionProps
|
|
29
|
+
|
|
29
30
|
const { isFocusVisible, focusProps } = useFocusRing()
|
|
30
31
|
|
|
31
32
|
return (
|
|
32
33
|
<li
|
|
33
|
-
{...mergeProps(
|
|
34
|
+
{...mergeProps(restOptionProps, focusProps, props, {
|
|
35
|
+
onPointerUp: (e: React.PointerEvent<FocusableElement>) => {
|
|
36
|
+
if (e.pointerType === "touch") {
|
|
37
|
+
// On touch devices, the listbox closes too quickly so below elements will trigger their pointer events.
|
|
38
|
+
// Slow it down a bit to prevent the appearance of propagation.
|
|
39
|
+
setTimeout(() => state.setSelectedKey(item.key), 250)
|
|
40
|
+
} else {
|
|
41
|
+
onPointerUp?.(e)
|
|
42
|
+
}
|
|
43
|
+
},
|
|
44
|
+
})}
|
|
34
45
|
ref={ref}
|
|
35
46
|
className={classnames(
|
|
36
47
|
styles.option,
|