@teamturing/react-kit 2.27.1 → 2.28.1

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.
Files changed (5) hide show
  1. package/dist/index.js +17262 -17221
  2. package/esm/core/Button/index.js +26 -14
  3. package/esm/core/IconButton/index.js +32 -16
  4. package/esm/core/SearchSelectInput/index.js +16 -2
  5. package/package.json +2 -2
package/esm/core/Button/index.js CHANGED
@@ -136,8 +136,10 @@ const BaseButton = styled(UnstyledButton)(({
136
136
  '& svg': {
137
137
  color: theme.colors['icon/inverse']
138
138
  },
139
- '&:hover:not(:disabled)': {
140
- backgroundColor: theme.colors['bg/primary/hovered']
139
+ '@media (hover: hover) and (pointer: fine)': {
140
+ '&:hover:not(:disabled)': {
141
+ backgroundColor: theme.colors['bg/primary/hovered']
142
+ }
141
143
  },
142
144
  '&:active:not(:disabled)': {
143
145
  backgroundColor: theme.colors['bg/primary/pressed']
@@ -162,8 +164,10 @@ const BaseButton = styled(UnstyledButton)(({
162
164
  '& svg': {
163
165
  color: theme.colors['icon/primary']
164
166
  },
165
- '&:hover:not(:disabled)': {
166
- backgroundColor: theme.colors['bg/secondary/hovered']
167
+ '@media (hover: hover) and (pointer: fine)': {
168
+ '&:hover:not(:disabled)': {
169
+ backgroundColor: theme.colors['bg/secondary/hovered']
170
+ }
167
171
  },
168
172
  '&:active:not(:disabled)': {
169
173
  backgroundColor: theme.colors['bg/secondary/pressed']
@@ -188,8 +192,10 @@ const BaseButton = styled(UnstyledButton)(({
188
192
  '& svg': {
189
193
  color: theme.colors['icon/accent/gray']
190
194
  },
191
- '&:hover:not(:disabled)': {
192
- backgroundColor: theme.colors['bg/neutral/hovered']
195
+ '@media (hover: hover) and (pointer: fine)': {
196
+ '&:hover:not(:disabled)': {
197
+ backgroundColor: theme.colors['bg/neutral/hovered']
198
+ }
193
199
  },
194
200
  '&:active:not(:disabled)': {
195
201
  backgroundColor: theme.colors['bg/neutral/pressed']
@@ -227,8 +233,10 @@ const BaseButton = styled(UnstyledButton)(({
227
233
  borderRadius: theme.radii.full,
228
234
  boxSizing: 'border-box'
229
235
  },
230
- '&:hover:not(:disabled)': {
231
- backgroundColor: theme.colors['bg/neutral/subtler/hovered']
236
+ '@media (hover: hover) and (pointer: fine)': {
237
+ '&:hover:not(:disabled)': {
238
+ backgroundColor: theme.colors['bg/neutral/subtler/hovered']
239
+ }
232
240
  },
233
241
  '&:active:not(:disabled)': {
234
242
  backgroundColor: theme.colors['bg/neutral/subtler/pressed']
@@ -256,10 +264,12 @@ const BaseButton = styled(UnstyledButton)(({
256
264
  '& svg': {
257
265
  color: theme.colors['icon/neutral/bolder']
258
266
  },
259
- '&:hover:not(:disabled)': {
260
- 'color': theme.colors['text/neutral'],
261
- '& svg': {
262
- color: theme.colors['icon/accent/gray']
267
+ '@media (hover: hover) and (pointer: fine)': {
268
+ '&:hover:not(:disabled)': {
269
+ 'color': theme.colors['text/neutral'],
270
+ '& svg': {
271
+ color: theme.colors['icon/accent/gray']
272
+ }
263
273
  }
264
274
  },
265
275
  '&:active:not(:disabled)': {
@@ -288,8 +298,10 @@ const BaseButton = styled(UnstyledButton)(({
288
298
  '& svg': {
289
299
  color: theme.colors['icon/inverse']
290
300
  },
291
- '&:hover:not(:disabled)': {
292
- backgroundColor: theme.colors['bg/danger/bold/hovered']
301
+ '@media (hover: hover) and (pointer: fine)': {
302
+ '&:hover:not(:disabled)': {
303
+ backgroundColor: theme.colors['bg/danger/bold/hovered']
304
+ }
293
305
  },
294
306
  '&:active:not(:disabled)': {
295
307
  backgroundColor: theme.colors['bg/danger/bold/pressed']
package/esm/core/IconButton/index.js CHANGED
@@ -82,8 +82,10 @@ const BaseIconButton = styled(UnstyledButton)(({
82
82
  'primary': {
83
83
  'backgroundColor': theme.colors['bg/primary'],
84
84
  'color': theme.colors['icon/inverse'],
85
- '&:hover:not(:disabled)': {
86
- backgroundColor: theme.colors['bg/primary/hovered']
85
+ '@media (hover: hover) and (pointer: fine)': {
86
+ '&:hover:not(:disabled)': {
87
+ backgroundColor: theme.colors['bg/primary/hovered']
88
+ }
87
89
  },
88
90
  '&:active:not(:disabled)': {
89
91
  backgroundColor: theme.colors['bg/primary/pressed']
@@ -96,8 +98,10 @@ const BaseIconButton = styled(UnstyledButton)(({
96
98
  'secondary': {
97
99
  'backgroundColor': theme.colors['bg/secondary'],
98
100
  'color': theme.colors['icon/primary'],
99
- '&:hover:not(:disabled)': {
100
- backgroundColor: theme.colors['bg/secondary/hovered']
101
+ '@media (hover: hover) and (pointer: fine)': {
102
+ '&:hover:not(:disabled)': {
103
+ backgroundColor: theme.colors['bg/secondary/hovered']
104
+ }
101
105
  },
102
106
  '&:active:not(:disabled)': {
103
107
  backgroundColor: theme.colors['bg/secondary/pressed']
@@ -110,8 +114,10 @@ const BaseIconButton = styled(UnstyledButton)(({
110
114
  'neutral': {
111
115
  'backgroundColor': theme.colors['bg/neutral'],
112
116
  'color': theme.colors['icon/accent/gray'],
113
- '&:hover:not(:disabled)': {
114
- backgroundColor: theme.colors['bg/neutral/hovered']
117
+ '@media (hover: hover) and (pointer: fine)': {
118
+ '&:hover:not(:disabled)': {
119
+ backgroundColor: theme.colors['bg/neutral/hovered']
120
+ }
115
121
  },
116
122
  '&:active:not(:disabled)': {
117
123
  backgroundColor: theme.colors['bg/neutral/pressed']
@@ -137,8 +143,10 @@ const BaseIconButton = styled(UnstyledButton)(({
137
143
  borderRadius: theme.radii.full,
138
144
  boxSizing: 'border-box'
139
145
  },
140
- '&:hover:not(:disabled)': {
141
- backgroundColor: theme.colors['bg/neutral/subtler/hovered']
146
+ '@media (hover: hover) and (pointer: fine)': {
147
+ '&:hover:not(:disabled)': {
148
+ backgroundColor: theme.colors['bg/neutral/subtler/hovered']
149
+ }
142
150
  },
143
151
  '&:active:not(:disabled)': {
144
152
  backgroundColor: theme.colors['bg/neutral/subtler/pressed']
@@ -154,8 +162,10 @@ const BaseIconButton = styled(UnstyledButton)(({
154
162
  'plain-bold': {
155
163
  'backgroundColor': theme.colors['bg/neutral/subtler'],
156
164
  'color': theme.colors['icon/neutral/bolder'],
157
- '&:hover:not(:disabled)': {
158
- color: theme.colors['icon/accent/gray']
165
+ '@media (hover: hover) and (pointer: fine)': {
166
+ '&:hover:not(:disabled)': {
167
+ color: theme.colors['icon/accent/gray']
168
+ }
159
169
  },
160
170
  '&:active:not(:disabled)': {
161
171
  color: theme.colors['icon/accent/gray']
@@ -168,8 +178,10 @@ const BaseIconButton = styled(UnstyledButton)(({
168
178
  'plain': {
169
179
  'backgroundColor': theme.colors['bg/neutral/subtler'],
170
180
  'color': theme.colors['icon/neutral/bold'],
171
- '&:hover:not(:disabled)': {
172
- color: theme.colors['icon/neutral/bolder']
181
+ '@media (hover: hover) and (pointer: fine)': {
182
+ '&:hover:not(:disabled)': {
183
+ color: theme.colors['icon/neutral/bolder']
184
+ }
173
185
  },
174
186
  '&:active:not(:disabled)': {
175
187
  color: theme.colors['icon/neutral/bolder']
@@ -182,8 +194,10 @@ const BaseIconButton = styled(UnstyledButton)(({
182
194
  'plain-subtle': {
183
195
  'backgroundColor': theme.colors['bg/neutral/subtler'],
184
196
  'color': theme.colors['icon/neutral'],
185
- '&:hover:not(:disabled)': {
186
- color: theme.colors['icon/neutral/bold']
197
+ '@media (hover: hover) and (pointer: fine)': {
198
+ '&:hover:not(:disabled)': {
199
+ color: theme.colors['icon/neutral/bold']
200
+ }
187
201
  },
188
202
  '&:active:not(:disabled)': {
189
203
  color: theme.colors['icon/neutral/bold']
@@ -196,8 +210,10 @@ const BaseIconButton = styled(UnstyledButton)(({
196
210
  'danger': {
197
211
  'backgroundColor': theme.colors['bg/danger/bold'],
198
212
  'color': theme.colors['icon/inverse'],
199
- '&:hover:not(:disabled)': {
200
- backgroundColor: theme.colors['bg/danger/bold/hovered']
213
+ '@media (hover: hover) and (pointer: fine)': {
214
+ '&:hover:not(:disabled)': {
215
+ backgroundColor: theme.colors['bg/danger/bold/hovered']
216
+ }
201
217
  },
202
218
  '&:active:not(:disabled)': {
203
219
  backgroundColor: theme.colors['bg/danger/bold/pressed']
package/esm/core/SearchSelectInput/index.js CHANGED
@@ -9,6 +9,7 @@ import { noop } from '../../packages/utils/esm/noop.js';
9
9
  import { scrollIntoView } from '../../packages/utils/esm/scrollIntoView.js';
10
10
  import { r as reactIsExports } from '../../node_modules/react-is/index.js';
11
11
  import styled, { css, useTheme } from 'styled-components';
12
+ import useDevice from '../../hook/useDevice.js';
12
13
  import useProvidedOrCreatedRef from '../../hook/useProvidedOrCreatedRef.js';
13
14
  import HorizontalDivider from '../HorizontalDivider/index.js';
14
15
  import Overlay from '../Overlay/index.js';
@@ -38,6 +39,9 @@ const SearchSelectInput = ({
38
39
  ...props
39
40
  }, ref) => {
40
41
  const theme = useTheme();
42
+ const {
43
+ isDesktop
44
+ } = useDevice();
41
45
  const isVisibleValueExist = value && isArray(value) && !isNullable(renderValue(value)) ? value.length > 0 : value && !isNullable(renderValue(value));
42
46
  const hasLeadingVisual = !isNullable(LeadingVisual);
43
47
  const valueInputRef = useProvidedOrCreatedRef(ref);
@@ -65,12 +69,18 @@ const SearchSelectInput = ({
65
69
  onChange?.(item);
66
70
  }
67
71
  };
72
+
73
+ /**
74
+ * ? dummyRef가 왜 있나?
75
+ * 모바일 환경에서 Input에 포커스가 가지 않도록 하기 위한 장치입니다.
76
+ */
77
+ const dummyRef = useRef(null);
68
78
  const listContainerRef = useRef(null);
69
79
  const searchInputRef = useRef(null);
70
80
  const activeDescendantRef = useRef();
71
81
  return /*#__PURE__*/jsxRuntimeExports.jsx(OverlayPopper, {
72
82
  focusTrapSettings: {
73
- initialFocusRef: searchInputRef,
83
+ initialFocusRef: isDesktop ? searchInputRef : dummyRef,
74
84
  restoreFocusOnCleanUp: true,
75
85
  ...focusTrapSettings
76
86
  },
@@ -123,7 +133,11 @@ const SearchSelectInput = ({
123
133
  overlayHandler.closeOverlay();
124
134
  }
125
135
  },
126
- children: [/*#__PURE__*/jsxRuntimeExports.jsx(Space, {
136
+ children: [!isDesktop ? /*#__PURE__*/jsxRuntimeExports.jsx(View, {
137
+ "aria-hidden": true,
138
+ ref: dummyRef,
139
+ tabIndex: 0
140
+ }) : null, /*#__PURE__*/jsxRuntimeExports.jsx(Space, {
127
141
  p: 2,
128
142
  sx: {
129
143
  flexGrow: 0,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@teamturing/react-kit",
3
- "version": "2.27.1",
3
+ "version": "2.28.1",
4
4
  "description": "React components, hooks for create teamturing web application",
5
5
  "author": "Sungchang Park <psch300@gmail.com> (https://github.com/psch300)",
6
6
  "homepage": "https://github.com/weareteamturing/bombe#readme",
@@ -66,5 +66,5 @@
66
66
  "react-textarea-autosize": "^8.5.3",
67
67
  "styled-system": "^5.1.5"
68
68
  },
69
- "gitHead": "b2c810fa21527d0a188655ac141f41df83ca7503"
69
+ "gitHead": "49e0faeb615a1860be291a9b7a60ec4201f9b877"
70
70
  }