@teamturing/react-kit 2.51.5 → 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 +96 -69
  2. package/esm/core/Dialog/index.js +97 -68
  3. package/package.json +2 -2
package/dist/index.js CHANGED
@@ -4023,6 +4023,8 @@ const BaseIconButton = styled__default.default(UnstyledButton)(({
4023
4023
  }
4024
4024
  }));
4025
4025
 
4026
+ const MotionView = framerMotion.motion(View);
4027
+
4026
4028
  const UnstyledDialogBody = styled__default.default.div`
4027
4029
  flex-grow: 1;
4028
4030
  flex-shrink: 1;
@@ -4131,15 +4133,15 @@ const Dialog = ({
4131
4133
  sx
4132
4134
  }, ref) => {
4133
4135
  const handleDismiss = React.useCallback(() => onDismiss?.(), [onDismiss]);
4134
- const overlayRef = React.useRef(null);
4136
+ const blanketRef = React.useRef(null);
4135
4137
  const dialogRef = React.useRef(null);
4136
4138
  const closeButtonRef = React.useRef(null);
4137
4139
  React.useImperativeHandle(ref, () => dialogRef.current);
4138
4140
  const handleOutsideClick = React.useCallback(e => {
4139
- if (dialogRef.current && overlayRef.current && e.target instanceof Node && !dialogRef.current.contains(e.target) && overlayRef.current.contains(e.target)) {
4141
+ if (dialogRef.current && blanketRef.current && e.target instanceof Node && !dialogRef.current.contains(e.target) && blanketRef.current.contains(e.target)) {
4140
4142
  handleDismiss?.();
4141
4143
  }
4142
- }, [handleDismiss, dialogRef, overlayRef]);
4144
+ }, [handleDismiss, dialogRef, blanketRef]);
4143
4145
  const handleKeyDown = React.useCallback(event => {
4144
4146
  switch (event.key) {
4145
4147
  case 'Escape':
@@ -4161,72 +4163,99 @@ const Dialog = ({
4161
4163
  };
4162
4164
  }
4163
4165
  }, [isOpen, isOutsideClickDismissable, handleOutsideClick]);
4164
- return isOpen ? /*#__PURE__*/jsxRuntime.jsxs(View, {
4165
- sx: {
4166
- position: 'fixed',
4167
- display: 'flex',
4168
- top: 0,
4169
- left: 0,
4170
- width: '100%',
4171
- height: '100%',
4172
- zIndex: 9999
4173
- },
4174
- children: [/*#__PURE__*/jsxRuntime.jsx(Blanket$1, {
4175
- ref: overlayRef
4176
- }), /*#__PURE__*/jsxRuntime.jsxs(BaseDialog, {
4177
- ref: dialogRef,
4178
- "aria-modal": 'true',
4179
- role: 'dialog',
4180
- tabIndex: -1,
4181
- sx: {
4182
- ...(size === 's' ? {
4183
- maxHeight: 'calc(100dvh - 64px)',
4184
- width: ['calc(100% - 64px)', 400, 400],
4185
- marginX: 'auto',
4186
- marginY: 'auto',
4187
- borderRadius: 'l'
4188
- } : size === 'm' ? {
4189
- maxHeight: ['100%', '100%', 'calc(100dvh - 64px)'],
4190
- height: ['100%', '100%', 'auto'],
4191
- minHeight: ['-webkit-fill-available', '-webkit-fill-available', 'auto'],
4192
- width: ['100%', '100%', 640],
4193
- marginX: [0, 0, 'auto'],
4194
- marginY: 'auto',
4195
- borderRadius: ['none', 'none', 'l']
4196
- } : size === 'l' ? {
4197
- maxHeight: ['100%', '100%', 'calc(100dvh - 64px)'],
4198
- height: ['100%', '100%', 'auto'],
4199
- minHeight: ['-webkit-fill-available', '-webkit-fill-available', 'auto'],
4200
- width: ['100%', '100%', 860],
4201
- marginX: [0, 0, 'auto'],
4202
- marginY: 'auto',
4203
- borderRadius: ['none', 'none', 'l']
4204
- } : size === 'full' ? {
4205
- height: ['100%', '100%', 'calc(100dvh - 40px)'],
4206
- width: ['100%', '100%', 'calc(100vw - 40px)'],
4207
- marginX: [0, 0, 'auto'],
4208
- marginY: 'auto',
4209
- borderRadius: ['none', 'none', 'l']
4210
- } : {}),
4211
- ...sx
4212
- },
4213
- onKeyDown: handleKeyDown,
4214
- children: [/*#__PURE__*/jsxRuntime.jsx(View, {
4166
+ return /*#__PURE__*/jsxRuntime.jsx(framerMotion.AnimatePresence, {
4167
+ children: isOpen ? /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
4168
+ children: /*#__PURE__*/jsxRuntime.jsxs(MotionView, {
4169
+ initial: {
4170
+ opacity: 0,
4171
+ scale: 1.1
4172
+ },
4173
+ animate: {
4174
+ opacity: 1,
4175
+ scale: 1
4176
+ },
4177
+ exit: {
4178
+ opacity: 0,
4179
+ scale: 1.1
4180
+ },
4181
+ transition: {
4182
+ duration: 0.25,
4183
+ /**
4184
+ * easeOutQuad by https://easings.net/ko#easeOutQuad
4185
+ */
4186
+ ease: framerMotion.cubicBezier(0.5, 1, 0.89, 1)
4187
+ },
4215
4188
  sx: {
4216
- position: 'absolute',
4217
- top: 3,
4218
- right: 3
4189
+ position: 'fixed',
4190
+ top: 0,
4191
+ right: 0,
4192
+ bottom: 0,
4193
+ left: 0,
4194
+ zIndex: 9999
4219
4195
  },
4220
- children: /*#__PURE__*/jsxRuntime.jsx(IconButton, {
4221
- ref: closeButtonRef,
4222
- icon: icons.CloseIcon,
4223
- variant: 'plain',
4224
- size: 'm',
4225
- onClick: handleDismiss
4226
- })
4227
- }), children]
4228
- })]
4229
- }) : null;
4196
+ children: [/*#__PURE__*/jsxRuntime.jsx(Blanket$1, {
4197
+ ref: blanketRef
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,
4207
+ sx: {
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
4238
+ },
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
+ })
4257
+ }) : null
4258
+ });
4230
4259
  };
4231
4260
  const Blanket$1 = styled__default.default.span`
4232
4261
  &:before {
@@ -4266,8 +4295,6 @@ var index$8 = Object.assign( /*#__PURE__*/React.forwardRef(Dialog), {
4266
4295
  Footer: DialogFooter
4267
4296
  });
4268
4297
 
4269
- const MotionView = framerMotion.motion(View);
4270
-
4271
4298
  const UnstyledDrawerBody = styled__default.default.div`
4272
4299
  flex-grow: 1;
4273
4300
  flex-shrink: 1;
package/esm/core/Dialog/index.js CHANGED
@@ -1,10 +1,12 @@
1
1
  import { CloseIcon } from '@teamturing/icons';
2
+ import { AnimatePresence, cubicBezier } from 'framer-motion';
2
3
  import { forwardRef, useCallback, useRef, useImperativeHandle, useEffect } from 'react';
3
4
  import styled from 'styled-components';
4
5
  import IconButton from '../IconButton/index.js';
5
6
  import View from '../View/index.js';
6
7
  import useFocusTrap from '../../hook/useFocusTrap.js';
7
8
  import { sx } from '../../utils/styled-system/index.js';
9
+ import MotionView from '../MotionView/index.js';
8
10
  import DialogBody from './DialogBody.js';
9
11
  import DialogFooter from './DialogFooter.js';
10
12
  import DialogHeader from './DialogHeader.js';
@@ -13,7 +15,7 @@ import DialogHeaderTitle from './DialogHeaderTitle.js';
13
15
  import UnstyledDialogBody from './_UnstyledDialogBody.js';
14
16
  import UnstyledDialogFooter from './_UnstyledDialogFooter.js';
15
17
  import UnstyledDialogHeader from './_UnstyledDialogHeader.js';
16
- import { jsxs, jsx } from 'react/jsx-runtime';
18
+ import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
17
19
 
18
20
  const Dialog = ({
19
21
  children,
@@ -25,15 +27,15 @@ const Dialog = ({
25
27
  sx
26
28
  }, ref) => {
27
29
  const handleDismiss = useCallback(() => onDismiss?.(), [onDismiss]);
28
- const overlayRef = useRef(null);
30
+ const blanketRef = useRef(null);
29
31
  const dialogRef = useRef(null);
30
32
  const closeButtonRef = useRef(null);
31
33
  useImperativeHandle(ref, () => dialogRef.current);
32
34
  const handleOutsideClick = useCallback(e => {
33
- if (dialogRef.current && overlayRef.current && e.target instanceof Node && !dialogRef.current.contains(e.target) && overlayRef.current.contains(e.target)) {
35
+ if (dialogRef.current && blanketRef.current && e.target instanceof Node && !dialogRef.current.contains(e.target) && blanketRef.current.contains(e.target)) {
34
36
  handleDismiss?.();
35
37
  }
36
- }, [handleDismiss, dialogRef, overlayRef]);
38
+ }, [handleDismiss, dialogRef, blanketRef]);
37
39
  const handleKeyDown = useCallback(event => {
38
40
  switch (event.key) {
39
41
  case 'Escape':
@@ -55,72 +57,99 @@ const Dialog = ({
55
57
  };
56
58
  }
57
59
  }, [isOpen, isOutsideClickDismissable, handleOutsideClick]);
58
- return isOpen ? /*#__PURE__*/jsxs(View, {
59
- sx: {
60
- position: 'fixed',
61
- display: 'flex',
62
- top: 0,
63
- left: 0,
64
- width: '100%',
65
- height: '100%',
66
- zIndex: 9999
67
- },
68
- children: [/*#__PURE__*/jsx(Blanket, {
69
- ref: overlayRef
70
- }), /*#__PURE__*/jsxs(BaseDialog, {
71
- ref: dialogRef,
72
- "aria-modal": 'true',
73
- role: 'dialog',
74
- tabIndex: -1,
75
- sx: {
76
- ...(size === 's' ? {
77
- maxHeight: 'calc(100dvh - 64px)',
78
- width: ['calc(100% - 64px)', 400, 400],
79
- marginX: 'auto',
80
- marginY: 'auto',
81
- borderRadius: 'l'
82
- } : size === 'm' ? {
83
- maxHeight: ['100%', '100%', 'calc(100dvh - 64px)'],
84
- height: ['100%', '100%', 'auto'],
85
- minHeight: ['-webkit-fill-available', '-webkit-fill-available', 'auto'],
86
- width: ['100%', '100%', 640],
87
- marginX: [0, 0, 'auto'],
88
- marginY: 'auto',
89
- borderRadius: ['none', 'none', 'l']
90
- } : size === 'l' ? {
91
- maxHeight: ['100%', '100%', 'calc(100dvh - 64px)'],
92
- height: ['100%', '100%', 'auto'],
93
- minHeight: ['-webkit-fill-available', '-webkit-fill-available', 'auto'],
94
- width: ['100%', '100%', 860],
95
- marginX: [0, 0, 'auto'],
96
- marginY: 'auto',
97
- borderRadius: ['none', 'none', 'l']
98
- } : size === 'full' ? {
99
- height: ['100%', '100%', 'calc(100dvh - 40px)'],
100
- width: ['100%', '100%', 'calc(100vw - 40px)'],
101
- marginX: [0, 0, 'auto'],
102
- marginY: 'auto',
103
- borderRadius: ['none', 'none', 'l']
104
- } : {}),
105
- ...sx
106
- },
107
- onKeyDown: handleKeyDown,
108
- children: [/*#__PURE__*/jsx(View, {
60
+ return /*#__PURE__*/jsx(AnimatePresence, {
61
+ children: isOpen ? /*#__PURE__*/jsx(Fragment, {
62
+ children: /*#__PURE__*/jsxs(MotionView, {
63
+ initial: {
64
+ opacity: 0,
65
+ scale: 1.1
66
+ },
67
+ animate: {
68
+ opacity: 1,
69
+ scale: 1
70
+ },
71
+ exit: {
72
+ opacity: 0,
73
+ scale: 1.1
74
+ },
75
+ transition: {
76
+ duration: 0.25,
77
+ /**
78
+ * easeOutQuad by https://easings.net/ko#easeOutQuad
79
+ */
80
+ ease: cubicBezier(0.5, 1, 0.89, 1)
81
+ },
109
82
  sx: {
110
- position: 'absolute',
111
- top: 3,
112
- right: 3
83
+ position: 'fixed',
84
+ top: 0,
85
+ right: 0,
86
+ bottom: 0,
87
+ left: 0,
88
+ zIndex: 9999
113
89
  },
114
- children: /*#__PURE__*/jsx(IconButton, {
115
- ref: closeButtonRef,
116
- icon: CloseIcon,
117
- variant: 'plain',
118
- size: 'm',
119
- onClick: handleDismiss
120
- })
121
- }), children]
122
- })]
123
- }) : null;
90
+ children: [/*#__PURE__*/jsx(Blanket, {
91
+ ref: blanketRef
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,
101
+ sx: {
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
132
+ },
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
+ })
151
+ }) : null
152
+ });
124
153
  };
125
154
  const Blanket = styled.span`
126
155
  &:before {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@teamturing/react-kit",
3
- "version": "2.51.5",
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": "96826fb80956fb8f287f2bf85e4272450ba3451a"
69
+ "gitHead": "8726480a416e9b8804aa74aa32dc106858fd441f"
70
70
  }