@teamturing/react-kit 2.51.6 → 2.51.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.
Files changed (4) hide show
  1. package/dist/index.js +68 -92
  2. package/esm/core/Dialog/index.js +67 -92
  3. package/esm/core/FormControl/FormControlLabel.js +2 -1
  4. package/package.json +2 -2
package/dist/index.js CHANGED
@@ -4164,16 +4164,19 @@ const Dialog = ({
4164
4164
  }
4165
4165
  }, [isOpen, isOutsideClickDismissable, handleOutsideClick]);
4166
4166
  return /*#__PURE__*/jsxRuntime.jsx(framerMotion.AnimatePresence, {
4167
- children: isOpen ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
4168
- children: [/*#__PURE__*/jsxRuntime.jsx(MotionView, {
4167
+ children: isOpen ? /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
4168
+ children: /*#__PURE__*/jsxRuntime.jsxs(MotionView, {
4169
4169
  initial: {
4170
- opacity: 0
4170
+ opacity: 0,
4171
+ scale: 1.1
4171
4172
  },
4172
4173
  animate: {
4173
- opacity: 1
4174
+ opacity: 1,
4175
+ scale: 1
4174
4176
  },
4175
4177
  exit: {
4176
- opacity: 0
4178
+ opacity: 0,
4179
+ scale: 1.1
4177
4180
  },
4178
4181
  transition: {
4179
4182
  duration: 0.25,
@@ -4190,95 +4193,67 @@ const Dialog = ({
4190
4193
  left: 0,
4191
4194
  zIndex: 9999
4192
4195
  },
4193
- children: /*#__PURE__*/jsxRuntime.jsx(Blanket$1, {
4196
+ children: [/*#__PURE__*/jsxRuntime.jsx(Blanket$1, {
4194
4197
  ref: blanketRef
4195
- })
4196
- }), /*#__PURE__*/jsxRuntime.jsx(MotionView, {
4197
- initial: {
4198
- opacity: 0,
4199
- scale: 1.1,
4200
- translateX: '-50%',
4201
- translateY: '-50%'
4202
- },
4203
- animate: {
4204
- opacity: 1,
4205
- scale: 1,
4206
- translateX: '-50%',
4207
- translateY: '-50%'
4208
- },
4209
- exit: {
4210
- opacity: 0,
4211
- scale: 1.1,
4212
- translateX: '-50%',
4213
- translateY: '-50%'
4214
- },
4215
- transition: {
4216
- duration: 0.25,
4217
- /**
4218
- * easeOutQuad by https://easings.net/ko#easeOutQuad
4219
- */
4220
- ease: framerMotion.cubicBezier(0.5, 1, 0.89, 1)
4221
- },
4222
- sx: {
4223
- position: 'fixed',
4224
- top: '50%',
4225
- left: '50%',
4226
- zIndex: 9999
4227
- },
4228
- children: /*#__PURE__*/jsxRuntime.jsxs(BaseDialog, {
4229
- ref: dialogRef,
4230
- "aria-modal": 'true',
4231
- role: 'dialog',
4232
- tabIndex: -1,
4233
- sx: {
4234
- ...(size === 's' ? {
4235
- maxHeight: 'calc(100dvh - 64px)',
4236
- width: ['calc(100% - 64px)', 400, 400],
4237
- marginX: 'auto',
4238
- marginY: 'auto',
4239
- borderRadius: 'l'
4240
- } : size === 'm' ? {
4241
- maxHeight: ['100%', '100%', 'calc(100dvh - 64px)'],
4242
- height: ['100%', '100%', 'auto'],
4243
- minHeight: ['-webkit-fill-available', '-webkit-fill-available', 'auto'],
4244
- width: ['100%', '100%', 640],
4245
- marginX: [0, 0, 'auto'],
4246
- marginY: 'auto',
4247
- borderRadius: ['none', 'none', 'l']
4248
- } : size === 'l' ? {
4249
- maxHeight: ['100%', '100%', 'calc(100dvh - 64px)'],
4250
- height: ['100%', '100%', 'auto'],
4251
- minHeight: ['-webkit-fill-available', '-webkit-fill-available', 'auto'],
4252
- width: ['100%', '100%', 860],
4253
- marginX: [0, 0, 'auto'],
4254
- marginY: 'auto',
4255
- borderRadius: ['none', 'none', 'l']
4256
- } : size === 'full' ? {
4257
- height: ['100%', '100%', 'calc(100dvh - 40px)'],
4258
- width: ['100%', '100%', 'calc(100vw - 40px)'],
4259
- marginX: [0, 0, 'auto'],
4260
- marginY: 'auto',
4261
- borderRadius: ['none', 'none', 'l']
4262
- } : {}),
4263
- ...sx
4264
- },
4265
- onKeyDown: handleKeyDown,
4266
- children: [/*#__PURE__*/jsxRuntime.jsx(View, {
4198
+ }), /*#__PURE__*/jsxRuntime.jsx(View, {
4199
+ display: 'flex',
4200
+ width: '100%',
4201
+ height: '100%',
4202
+ children: /*#__PURE__*/jsxRuntime.jsxs(BaseDialog, {
4203
+ ref: dialogRef,
4204
+ "aria-modal": 'true',
4205
+ role: 'dialog',
4206
+ tabIndex: -1,
4267
4207
  sx: {
4268
- position: 'absolute',
4269
- top: 3,
4270
- right: 3
4208
+ ...(size === 's' ? {
4209
+ maxHeight: 'calc(100dvh - 64px)',
4210
+ width: ['calc(100% - 64px)', 400, 400],
4211
+ marginX: 'auto',
4212
+ marginY: 'auto',
4213
+ borderRadius: 'l'
4214
+ } : size === 'm' ? {
4215
+ maxHeight: ['100%', '100%', 'calc(100dvh - 64px)'],
4216
+ height: ['100%', '100%', 'auto'],
4217
+ minHeight: ['-webkit-fill-available', '-webkit-fill-available', 'auto'],
4218
+ width: ['100%', '100%', 640],
4219
+ marginX: [0, 0, 'auto'],
4220
+ marginY: 'auto',
4221
+ borderRadius: ['none', 'none', 'l']
4222
+ } : size === 'l' ? {
4223
+ maxHeight: ['100%', '100%', 'calc(100dvh - 64px)'],
4224
+ height: ['100%', '100%', 'auto'],
4225
+ minHeight: ['-webkit-fill-available', '-webkit-fill-available', 'auto'],
4226
+ width: ['100%', '100%', 860],
4227
+ marginX: [0, 0, 'auto'],
4228
+ marginY: 'auto',
4229
+ borderRadius: ['none', 'none', 'l']
4230
+ } : size === 'full' ? {
4231
+ height: ['100%', '100%', 'calc(100dvh - 40px)'],
4232
+ width: ['100%', '100%', 'calc(100vw - 40px)'],
4233
+ marginX: [0, 0, 'auto'],
4234
+ marginY: 'auto',
4235
+ borderRadius: ['none', 'none', 'l']
4236
+ } : {}),
4237
+ ...sx
4271
4238
  },
4272
- children: /*#__PURE__*/jsxRuntime.jsx(IconButton, {
4273
- ref: closeButtonRef,
4274
- icon: icons.CloseIcon,
4275
- variant: 'plain',
4276
- size: 'm',
4277
- onClick: handleDismiss
4278
- })
4279
- }), children]
4280
- })
4281
- })]
4239
+ onKeyDown: handleKeyDown,
4240
+ children: [/*#__PURE__*/jsxRuntime.jsx(View, {
4241
+ sx: {
4242
+ position: 'absolute',
4243
+ top: 3,
4244
+ right: 3
4245
+ },
4246
+ children: /*#__PURE__*/jsxRuntime.jsx(IconButton, {
4247
+ ref: closeButtonRef,
4248
+ icon: icons.CloseIcon,
4249
+ variant: 'plain',
4250
+ size: 'm',
4251
+ onClick: handleDismiss
4252
+ })
4253
+ }), children]
4254
+ })
4255
+ })]
4256
+ })
4282
4257
  }) : null
4283
4258
  });
4284
4259
  };
@@ -6310,7 +6285,8 @@ const FormControlLabel = ({
6310
6285
  as: 'label',
6311
6286
  htmlFor: id,
6312
6287
  sx: {
6313
- width: 'fit-content'
6288
+ width: 'fit-content',
6289
+ display: 'contents'
6314
6290
  },
6315
6291
  isVisible: !visuallyHidden,
6316
6292
  children: /*#__PURE__*/jsxRuntime.jsxs(LabelWrapper, {
package/esm/core/Dialog/index.js CHANGED
@@ -15,7 +15,7 @@ import DialogHeaderTitle from './DialogHeaderTitle.js';
15
15
  import UnstyledDialogBody from './_UnstyledDialogBody.js';
16
16
  import UnstyledDialogFooter from './_UnstyledDialogFooter.js';
17
17
  import UnstyledDialogHeader from './_UnstyledDialogHeader.js';
18
- import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
18
+ import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
19
19
 
20
20
  const Dialog = ({
21
21
  children,
@@ -58,16 +58,19 @@ const Dialog = ({
58
58
  }
59
59
  }, [isOpen, isOutsideClickDismissable, handleOutsideClick]);
60
60
  return /*#__PURE__*/jsx(AnimatePresence, {
61
- children: isOpen ? /*#__PURE__*/jsxs(Fragment, {
62
- children: [/*#__PURE__*/jsx(MotionView, {
61
+ children: isOpen ? /*#__PURE__*/jsx(Fragment, {
62
+ children: /*#__PURE__*/jsxs(MotionView, {
63
63
  initial: {
64
- opacity: 0
64
+ opacity: 0,
65
+ scale: 1.1
65
66
  },
66
67
  animate: {
67
- opacity: 1
68
+ opacity: 1,
69
+ scale: 1
68
70
  },
69
71
  exit: {
70
- opacity: 0
72
+ opacity: 0,
73
+ scale: 1.1
71
74
  },
72
75
  transition: {
73
76
  duration: 0.25,
@@ -84,95 +87,67 @@ const Dialog = ({
84
87
  left: 0,
85
88
  zIndex: 9999
86
89
  },
87
- children: /*#__PURE__*/jsx(Blanket, {
90
+ children: [/*#__PURE__*/jsx(Blanket, {
88
91
  ref: blanketRef
89
- })
90
- }), /*#__PURE__*/jsx(MotionView, {
91
- initial: {
92
- opacity: 0,
93
- scale: 1.1,
94
- translateX: '-50%',
95
- translateY: '-50%'
96
- },
97
- animate: {
98
- opacity: 1,
99
- scale: 1,
100
- translateX: '-50%',
101
- translateY: '-50%'
102
- },
103
- exit: {
104
- opacity: 0,
105
- scale: 1.1,
106
- translateX: '-50%',
107
- translateY: '-50%'
108
- },
109
- transition: {
110
- duration: 0.25,
111
- /**
112
- * easeOutQuad by https://easings.net/ko#easeOutQuad
113
- */
114
- ease: cubicBezier(0.5, 1, 0.89, 1)
115
- },
116
- sx: {
117
- position: 'fixed',
118
- top: '50%',
119
- left: '50%',
120
- zIndex: 9999
121
- },
122
- children: /*#__PURE__*/jsxs(BaseDialog, {
123
- ref: dialogRef,
124
- "aria-modal": 'true',
125
- role: 'dialog',
126
- tabIndex: -1,
127
- sx: {
128
- ...(size === 's' ? {
129
- maxHeight: 'calc(100dvh - 64px)',
130
- width: ['calc(100% - 64px)', 400, 400],
131
- marginX: 'auto',
132
- marginY: 'auto',
133
- borderRadius: 'l'
134
- } : size === 'm' ? {
135
- maxHeight: ['100%', '100%', 'calc(100dvh - 64px)'],
136
- height: ['100%', '100%', 'auto'],
137
- minHeight: ['-webkit-fill-available', '-webkit-fill-available', 'auto'],
138
- width: ['100%', '100%', 640],
139
- marginX: [0, 0, 'auto'],
140
- marginY: 'auto',
141
- borderRadius: ['none', 'none', 'l']
142
- } : size === 'l' ? {
143
- maxHeight: ['100%', '100%', 'calc(100dvh - 64px)'],
144
- height: ['100%', '100%', 'auto'],
145
- minHeight: ['-webkit-fill-available', '-webkit-fill-available', 'auto'],
146
- width: ['100%', '100%', 860],
147
- marginX: [0, 0, 'auto'],
148
- marginY: 'auto',
149
- borderRadius: ['none', 'none', 'l']
150
- } : size === 'full' ? {
151
- height: ['100%', '100%', 'calc(100dvh - 40px)'],
152
- width: ['100%', '100%', 'calc(100vw - 40px)'],
153
- marginX: [0, 0, 'auto'],
154
- marginY: 'auto',
155
- borderRadius: ['none', 'none', 'l']
156
- } : {}),
157
- ...sx
158
- },
159
- onKeyDown: handleKeyDown,
160
- children: [/*#__PURE__*/jsx(View, {
92
+ }), /*#__PURE__*/jsx(View, {
93
+ display: 'flex',
94
+ width: '100%',
95
+ height: '100%',
96
+ children: /*#__PURE__*/jsxs(BaseDialog, {
97
+ ref: dialogRef,
98
+ "aria-modal": 'true',
99
+ role: 'dialog',
100
+ tabIndex: -1,
161
101
  sx: {
162
- position: 'absolute',
163
- top: 3,
164
- right: 3
102
+ ...(size === 's' ? {
103
+ maxHeight: 'calc(100dvh - 64px)',
104
+ width: ['calc(100% - 64px)', 400, 400],
105
+ marginX: 'auto',
106
+ marginY: 'auto',
107
+ borderRadius: 'l'
108
+ } : size === 'm' ? {
109
+ maxHeight: ['100%', '100%', 'calc(100dvh - 64px)'],
110
+ height: ['100%', '100%', 'auto'],
111
+ minHeight: ['-webkit-fill-available', '-webkit-fill-available', 'auto'],
112
+ width: ['100%', '100%', 640],
113
+ marginX: [0, 0, 'auto'],
114
+ marginY: 'auto',
115
+ borderRadius: ['none', 'none', 'l']
116
+ } : size === 'l' ? {
117
+ maxHeight: ['100%', '100%', 'calc(100dvh - 64px)'],
118
+ height: ['100%', '100%', 'auto'],
119
+ minHeight: ['-webkit-fill-available', '-webkit-fill-available', 'auto'],
120
+ width: ['100%', '100%', 860],
121
+ marginX: [0, 0, 'auto'],
122
+ marginY: 'auto',
123
+ borderRadius: ['none', 'none', 'l']
124
+ } : size === 'full' ? {
125
+ height: ['100%', '100%', 'calc(100dvh - 40px)'],
126
+ width: ['100%', '100%', 'calc(100vw - 40px)'],
127
+ marginX: [0, 0, 'auto'],
128
+ marginY: 'auto',
129
+ borderRadius: ['none', 'none', 'l']
130
+ } : {}),
131
+ ...sx
165
132
  },
166
- children: /*#__PURE__*/jsx(IconButton, {
167
- ref: closeButtonRef,
168
- icon: CloseIcon,
169
- variant: 'plain',
170
- size: 'm',
171
- onClick: handleDismiss
172
- })
173
- }), children]
174
- })
175
- })]
133
+ onKeyDown: handleKeyDown,
134
+ children: [/*#__PURE__*/jsx(View, {
135
+ sx: {
136
+ position: 'absolute',
137
+ top: 3,
138
+ right: 3
139
+ },
140
+ children: /*#__PURE__*/jsx(IconButton, {
141
+ ref: closeButtonRef,
142
+ icon: CloseIcon,
143
+ variant: 'plain',
144
+ size: 'm',
145
+ onClick: handleDismiss
146
+ })
147
+ }), children]
148
+ })
149
+ })]
150
+ })
176
151
  }) : null
177
152
  });
178
153
  };
package/esm/core/FormControl/FormControlLabel.js CHANGED
@@ -20,7 +20,8 @@ const FormControlLabel = ({
20
20
  as: 'label',
21
21
  htmlFor: id,
22
22
  sx: {
23
- width: 'fit-content'
23
+ width: 'fit-content',
24
+ display: 'contents'
24
25
  },
25
26
  isVisible: !visuallyHidden,
26
27
  children: /*#__PURE__*/jsxs(LabelWrapper, {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@teamturing/react-kit",
3
- "version": "2.51.6",
3
+ "version": "2.51.8",
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": "b48f843f109e5d541144fd5c3de7f7a7609ac86f"
69
+ "gitHead": "5961cef6e07333df9b29fce0b6ec1781e055e98f"
70
70
  }