@teamturing/react-kit 2.51.6 → 2.51.7

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 (3) hide show
  1. package/dist/index.js +66 -91
  2. package/esm/core/Dialog/index.js +67 -92
  3. 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
  };
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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@teamturing/react-kit",
3
- "version": "2.51.6",
3
+ "version": "2.51.7",
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": "8726480a416e9b8804aa74aa32dc106858fd441f"
70
70
  }