@teamturing/react-kit 2.19.9 → 2.19.11

package/dist/index.d.ts

@@ -25,7 +25,6 @@ export { default as DescriptionList } from './core/DescriptionList';
 export type { DescriptionListProps } from './core/DescriptionList';
 export { default as Dialog } from './core/Dialog';
 export type { DialogProps, UnstyledDialogHeaderProps, UnstyledDialogBodyProps, UnstyledDialogFooterProps, DialogHeaderProps, DialogHeaderTitleProps, DialogHeaderSubtitleProps, DialogBodyProps, DialogFooterProps, } from './core/Dialog';
-export { default as DialogHandler } from './core/DialogHandler';
 export { default as EmptyState } from './core/EmptyState';
 export type { EmptyStateProps } from './core/EmptyState';
 export { default as FormControl } from './core/FormControl';
@@ -90,7 +89,6 @@ export { default as EnigmaUI } from './enigma/EnigmaUI';
  * hooks
  */
 export { default as useDevice } from './hook/useDevice';
-export { default as useDialogHandler } from './hook/useDialogHandler';
 export { default as useFocusTrap } from './hook/useFocusTrap';
 export { default as useFocusZone } from './hook/useFocusZone';
 export { default as useMediaQuery } from './hook/useMediaQuery';

package/dist/index.js

@@ -18766,8 +18766,6 @@ const useFocusTrap = (settings, dependencies = []) => {
   };
 };
 
-const MotionView = motion(View);
-
 const UnstyledDialogBody = styled__default.default.div`
   flex-grow: 1;
   flex-shrink: 1;
@@ -18904,87 +18902,66 @@ const Dialog = ({
       };
     }
   }, [isOpen, handleOutsideClick]);
-  return /*#__PURE__*/jsxRuntimeExports.jsx(AnimatePresence, {
-    children: isOpen ? /*#__PURE__*/jsxRuntimeExports.jsxs(MotionView, {
-      initial: {
-        opacity: 0,
-        scale: 1.1
-      },
-      animate: {
-        opacity: 1,
-        scale: 1
-      },
-      exit: {
-        opacity: 0,
-        scale: 1.1
-      },
-      transition: {
-        duration: 0.25,
-        /**
-         * easeOutQuad by https://easings.net/ko#easeOutQuad
-         */
-        ease: cubicBezier(0.5, 1, 0.89, 1)
-      },
+  return isOpen ? /*#__PURE__*/jsxRuntimeExports.jsxs(View, {
+    sx: {
+      position: 'fixed',
+      display: 'flex',
+      top: 0,
+      left: 0,
+      width: '100%',
+      height: '100%',
+      zIndex: 9999
+    },
+    children: [/*#__PURE__*/jsxRuntimeExports.jsx(Blanket, {
+      ref: overlayRef
+    }), /*#__PURE__*/jsxRuntimeExports.jsxs(BaseDialog, {
+      ref: dialogRef,
+      "aria-modal": 'true',
+      role: 'dialog',
+      tabIndex: -1,
       sx: {
-        position: 'fixed',
-        display: 'flex',
-        top: 0,
-        left: 0,
-        width: '100%',
-        height: '100%',
-        zIndex: 9999
+        ...(size === 's' ? {
+          maxHeight: 'calc(100vh - 64px)',
+          width: ['calc(100% - 64px)', 400, 400],
+          marginX: 'auto',
+          marginY: 'auto',
+          borderRadius: 'l'
+        } : size === 'm' ? {
+          maxHeight: ['100%', '100%', 'calc(100vh - 64px)'],
+          height: ['100%', '100%', 'auto'],
+          minHeight: ['-webkit-fill-available', '-webkit-fill-available', 'auto'],
+          width: ['100%', '100%', 640],
+          marginX: [0, 0, 'auto'],
+          marginY: 'auto',
+          borderRadius: ['none', 'none', 'l']
+        } : size === 'l' ? {
+          maxHeight: ['100%', '100%', 'calc(100vh - 64px)'],
+          height: ['100%', '100%', 'auto'],
+          minHeight: ['-webkit-fill-available', '-webkit-fill-available', 'auto'],
+          width: ['100%', '100%', 860],
+          marginX: [0, 0, 'auto'],
+          marginY: 'auto',
+          borderRadius: ['none', 'none', 'l']
+        } : {}),
+        ...sx
       },
-      children: [/*#__PURE__*/jsxRuntimeExports.jsx(Blanket, {
-        ref: overlayRef
-      }), /*#__PURE__*/jsxRuntimeExports.jsxs(BaseDialog, {
-        ref: dialogRef,
-        "aria-modal": 'true',
-        role: 'dialog',
-        tabIndex: -1,
+      onKeyDown: handleKeyDown,
+      children: [/*#__PURE__*/jsxRuntimeExports.jsx(View, {
         sx: {
-          ...(size === 's' ? {
-            maxHeight: 'calc(100vh - 64px)',
-            width: ['calc(100% - 64px)', 400, 400],
-            marginX: 'auto',
-            marginY: 'auto',
-            borderRadius: 'l'
-          } : size === 'm' ? {
-            maxHeight: ['100%', '100%', 'calc(100vh - 64px)'],
-            height: ['100%', '100%', 'auto'],
-            minHeight: ['-webkit-fill-available', '-webkit-fill-available', 'auto'],
-            width: ['100%', '100%', 640],
-            marginX: [0, 0, 'auto'],
-            marginY: 'auto',
-            borderRadius: ['none', 'none', 'l']
-          } : size === 'l' ? {
-            maxHeight: ['100%', '100%', 'calc(100vh - 64px)'],
-            height: ['100%', '100%', 'auto'],
-            minHeight: ['-webkit-fill-available', '-webkit-fill-available', 'auto'],
-            width: ['100%', '100%', 860],
-            marginX: [0, 0, 'auto'],
-            marginY: 'auto',
-            borderRadius: ['none', 'none', 'l']
-          } : {}),
-          ...sx
+          position: 'absolute',
+          top: 3,
+          right: 3
         },
-        onKeyDown: handleKeyDown,
-        children: [/*#__PURE__*/jsxRuntimeExports.jsx(View, {
-          sx: {
-            position: 'absolute',
-            top: 3,
-            right: 3
-          },
-          children: /*#__PURE__*/jsxRuntimeExports.jsx(IconButton, {
-            ref: closeButtonRef,
-            icon: SvgClose,
-            variant: 'plain',
-            size: 'm',
-            onClick: handleDismiss
-          })
-        }), children]
-      })]
-    }) : null
-  });
+        children: /*#__PURE__*/jsxRuntimeExports.jsx(IconButton, {
+          ref: closeButtonRef,
+          icon: SvgClose,
+          variant: 'plain',
+          size: 'm',
+          onClick: handleDismiss
+        })
+      }), children]
+    })]
+  }) : null;
 };
 const Blanket = styled__default.default.span`
   &:before {
@@ -19020,44 +18997,6 @@ var index$6 = Object.assign( /*#__PURE__*/React.forwardRef(Dialog), {
   Footer: DialogFooter
 });
 
-const useDialogHandler = () => {
-  const [isOpen, setIsOpen] = React.useState(false);
-  const openDialog = () => setIsOpen(true);
-  const closeDialog = () => setIsOpen(false);
-  return {
-    isOpen,
-    openDialog,
-    closeDialog
-  };
-};
-
-const DialogHandler = ({
-  renderDialog,
-  onClick,
-  children: propChildren
-}) => {
-  const {
-    isOpen,
-    openDialog,
-    closeDialog
-  } = useDialogHandler();
-  const handleClick = e => {
-    onClick?.(e);
-    openDialog();
-  };
-  const children = isFunction(propChildren) ? propChildren({
-    openDialog
-  }) : React.Children.map(propChildren, child => /*#__PURE__*/React.cloneElement(child, {
-    onClick: handleClick
-  }));
-  return /*#__PURE__*/jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, {
-    children: [children, renderDialog({
-      isOpen,
-      closeDialog
-    })]
-  });
-};
-
 const EmptyState = ({
   title,
   icon: Icon = SvgDocument,
@@ -21965,6 +21904,8 @@ const BaseIconToggleButton = styled__default.default(UnstyledButton)(({
   }
 }), sx);
 
+const MotionView = motion(View);
+
 const Pagination = ({
   pages: propPages,
   currentPageIndex,
@@ -22072,7 +22013,11 @@ const BasePagination = styled__default.default.nav`
   ${variant({
   prop: 'type',
   variants: {
-    default: {},
+    default: {
+      '& > *:not(:first-child):not(:last-child)': {
+        display: 'inline-block !important'
+      }
+    },
     simple: {
       '& > *:not(:first-child):not(:last-child)': {
         display: 'none !important'
@@ -24187,7 +24132,6 @@ exports.CounterBadge = CounterBadge;
 exports.Datagrid = index$7;
 exports.DescriptionList = DescriptionList;
 exports.Dialog = index$6;
-exports.DialogHandler = DialogHandler;
 exports.EmptyState = EmptyState;
 exports.EnigmaUI = index;
 exports.FormControl = index$4;
@@ -24223,7 +24167,6 @@ exports.sx = sx;
 exports.textDecoration = textDecoration;
 exports.theme = theme;
 exports.useDevice = useDevice;
-exports.useDialogHandler = useDialogHandler;
 exports.useFocusTrap = useFocusTrap;
 exports.useFocusZone = useFocusZone;
 exports.useMediaQuery = useMediaQuery;

package/esm/core/Dialog/index.js

@@ -8,7 +8,6 @@ import IconButton from '../IconButton/index.js';
 import View from '../View/index.js';
 import useFocusTrap from '../../hook/useFocusTrap.js';
 import { sx } from '../../utils/styled-system/index.js';
-import MotionView from '../MotionView/index.js';
 import DialogBody from './DialogBody.js';
 import DialogFooter from './DialogFooter.js';
 import DialogHeader from './DialogHeader.js';
@@ -18,8 +17,6 @@ import UnstyledDialogBody from './_UnstyledDialogBody.js';
 import UnstyledDialogFooter from './_UnstyledDialogFooter.js';
 import UnstyledDialogHeader from './_UnstyledDialogHeader.js';
 import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
-import { AnimatePresence } from '../../node_modules/framer-motion/dist/es/components/AnimatePresence/index.js';
-import { cubicBezier } from '../../node_modules/framer-motion/dist/es/easing/cubic-bezier.js';
 
 const Dialog = ({
   children,
@@ -59,87 +56,66 @@ const Dialog = ({
       };
     }
   }, [isOpen, handleOutsideClick]);
-  return /*#__PURE__*/jsxRuntimeExports.jsx(AnimatePresence, {
-    children: isOpen ? /*#__PURE__*/jsxRuntimeExports.jsxs(MotionView, {
-      initial: {
-        opacity: 0,
-        scale: 1.1
-      },
-      animate: {
-        opacity: 1,
-        scale: 1
-      },
-      exit: {
-        opacity: 0,
-        scale: 1.1
-      },
-      transition: {
-        duration: 0.25,
-        /**
-         * easeOutQuad by https://easings.net/ko#easeOutQuad
-         */
-        ease: cubicBezier(0.5, 1, 0.89, 1)
-      },
+  return isOpen ? /*#__PURE__*/jsxRuntimeExports.jsxs(View, {
+    sx: {
+      position: 'fixed',
+      display: 'flex',
+      top: 0,
+      left: 0,
+      width: '100%',
+      height: '100%',
+      zIndex: 9999
+    },
+    children: [/*#__PURE__*/jsxRuntimeExports.jsx(Blanket, {
+      ref: overlayRef
+    }), /*#__PURE__*/jsxRuntimeExports.jsxs(BaseDialog, {
+      ref: dialogRef,
+      "aria-modal": 'true',
+      role: 'dialog',
+      tabIndex: -1,
       sx: {
-        position: 'fixed',
-        display: 'flex',
-        top: 0,
-        left: 0,
-        width: '100%',
-        height: '100%',
-        zIndex: 9999
+        ...(size === 's' ? {
+          maxHeight: 'calc(100vh - 64px)',
+          width: ['calc(100% - 64px)', 400, 400],
+          marginX: 'auto',
+          marginY: 'auto',
+          borderRadius: 'l'
+        } : size === 'm' ? {
+          maxHeight: ['100%', '100%', 'calc(100vh - 64px)'],
+          height: ['100%', '100%', 'auto'],
+          minHeight: ['-webkit-fill-available', '-webkit-fill-available', 'auto'],
+          width: ['100%', '100%', 640],
+          marginX: [0, 0, 'auto'],
+          marginY: 'auto',
+          borderRadius: ['none', 'none', 'l']
+        } : size === 'l' ? {
+          maxHeight: ['100%', '100%', 'calc(100vh - 64px)'],
+          height: ['100%', '100%', 'auto'],
+          minHeight: ['-webkit-fill-available', '-webkit-fill-available', 'auto'],
+          width: ['100%', '100%', 860],
+          marginX: [0, 0, 'auto'],
+          marginY: 'auto',
+          borderRadius: ['none', 'none', 'l']
+        } : {}),
+        ...sx
       },
-      children: [/*#__PURE__*/jsxRuntimeExports.jsx(Blanket, {
-        ref: overlayRef
-      }), /*#__PURE__*/jsxRuntimeExports.jsxs(BaseDialog, {
-        ref: dialogRef,
-        "aria-modal": 'true',
-        role: 'dialog',
-        tabIndex: -1,
+      onKeyDown: handleKeyDown,
+      children: [/*#__PURE__*/jsxRuntimeExports.jsx(View, {
         sx: {
-          ...(size === 's' ? {
-            maxHeight: 'calc(100vh - 64px)',
-            width: ['calc(100% - 64px)', 400, 400],
-            marginX: 'auto',
-            marginY: 'auto',
-            borderRadius: 'l'
-          } : size === 'm' ? {
-            maxHeight: ['100%', '100%', 'calc(100vh - 64px)'],
-            height: ['100%', '100%', 'auto'],
-            minHeight: ['-webkit-fill-available', '-webkit-fill-available', 'auto'],
-            width: ['100%', '100%', 640],
-            marginX: [0, 0, 'auto'],
-            marginY: 'auto',
-            borderRadius: ['none', 'none', 'l']
-          } : size === 'l' ? {
-            maxHeight: ['100%', '100%', 'calc(100vh - 64px)'],
-            height: ['100%', '100%', 'auto'],
-            minHeight: ['-webkit-fill-available', '-webkit-fill-available', 'auto'],
-            width: ['100%', '100%', 860],
-            marginX: [0, 0, 'auto'],
-            marginY: 'auto',
-            borderRadius: ['none', 'none', 'l']
-          } : {}),
-          ...sx
+          position: 'absolute',
+          top: 3,
+          right: 3
         },
-        onKeyDown: handleKeyDown,
-        children: [/*#__PURE__*/jsxRuntimeExports.jsx(View, {
-          sx: {
-            position: 'absolute',
-            top: 3,
-            right: 3
-          },
-          children: /*#__PURE__*/jsxRuntimeExports.jsx(IconButton, {
-            ref: closeButtonRef,
-            icon: SvgClose,
-            variant: 'plain',
-            size: 'm',
-            onClick: handleDismiss
-          })
-        }), children]
-      })]
-    }) : null
-  });
+        children: /*#__PURE__*/jsxRuntimeExports.jsx(IconButton, {
+          ref: closeButtonRef,
+          icon: SvgClose,
+          variant: 'plain',
+          size: 'm',
+          onClick: handleDismiss
+        })
+      }), children]
+    })]
+  }) : null;
 };
 const Blanket = styled.span`
   &:before {

package/esm/core/Pagination/index.js

@@ -117,7 +117,11 @@ const BasePagination = styled.nav`
   ${variant({
   prop: 'type',
   variants: {
-    default: {},
+    default: {
+      '& > *:not(:first-child):not(:last-child)': {
+        display: 'inline-block !important'
+      }
+    },
     simple: {
       '& > *:not(:first-child):not(:last-child)': {
         display: 'none !important'

package/esm/index.js

@@ -9,7 +9,6 @@ export { default as CounterBadge } from './core/CounterBadge/index.js';
 export { default as Datagrid } from './core/Datagrid/index.js';
 export { default as DescriptionList } from './core/DescriptionList/index.js';
 export { default as Dialog } from './core/Dialog/index.js';
-export { default as DialogHandler } from './core/DialogHandler/index.js';
 export { default as EmptyState } from './core/EmptyState/index.js';
 export { default as FormControl } from './core/FormControl/index.js';
 export { default as GradientText } from './core/GradientText/index.js';
@@ -41,7 +40,6 @@ export { default as View } from './core/View/index.js';
 export { default as UnstyledButton } from './core/_UnstyledButton.js';
 export { default as EnigmaUI } from './enigma/EnigmaUI/index.js';
 export { default as useDevice } from './hook/useDevice.js';
-export { default as useDialogHandler } from './hook/useDialogHandler.js';
 export { default as useFocusTrap } from './hook/useFocusTrap.js';
 export { default as useFocusZone } from './hook/useFocusZone.js';
 export { default as useMediaQuery } from './hook/useMediaQuery.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamturing/react-kit",
-  "version": "2.19.9",
+  "version": "2.19.11",
   "description": "React components, hooks for create teamturing web application",
   "author": "Sungchang Park <psch300@gmail.com> (https://github.com/psch300)",
   "homepage": "https://github.com/weareteamturing/bombe#readme",
@@ -62,5 +62,5 @@
     "react-is": "^18.2.0",
     "styled-system": "^5.1.5"
   },
-  "gitHead": "7f98d8f9387a726f605d7b5505a2df3a72d1e6ff"
+  "gitHead": "23c5345fb1eebd5b871f0b3c10e49cd3fe044178"
 }

package/dist/core/DialogHandler/index.d.ts

@@ -1,13 +0,0 @@
-import { MouseEvent as ReactMouseEvent, ReactNode } from 'react';
-type Props<Element extends HTMLElement> = {
-    renderDialog: ({ isOpen, closeDialog }: {
-        isOpen: boolean;
-        closeDialog: () => void;
-    }) => React.ReactNode;
-    onClick?: (e: ReactMouseEvent<Element, MouseEvent>) => void;
-    children: ReactNode | (({ openDialog }: {
-        openDialog: () => void;
-    }) => ReactNode);
-};
-declare const DialogHandler: <Element_1 extends HTMLElement>({ renderDialog, onClick, children: propChildren, }: Props<Element_1>) => import("react/jsx-runtime").JSX.Element;
-export default DialogHandler;

package/dist/hook/useDialogHandler.d.ts

@@ -1,6 +0,0 @@
-declare const useDialogHandler: () => {
-    isOpen: boolean;
-    openDialog: () => void;
-    closeDialog: () => void;
-};
-export default useDialogHandler;

package/esm/core/DialogHandler/index.js

@@ -1,33 +0,0 @@
-import { isFunction } from '../../packages/utils/esm/isFunction.js';
-import { Children, cloneElement } from 'react';
-import useDialogHandler from '../../hook/useDialogHandler.js';
-import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
-
-const DialogHandler = ({
-  renderDialog,
-  onClick,
-  children: propChildren
-}) => {
-  const {
-    isOpen,
-    openDialog,
-    closeDialog
-  } = useDialogHandler();
-  const handleClick = e => {
-    onClick?.(e);
-    openDialog();
-  };
-  const children = isFunction(propChildren) ? propChildren({
-    openDialog
-  }) : Children.map(propChildren, child => /*#__PURE__*/cloneElement(child, {
-    onClick: handleClick
-  }));
-  return /*#__PURE__*/jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, {
-    children: [children, renderDialog({
-      isOpen,
-      closeDialog
-    })]
-  });
-};
-
-export { DialogHandler as default };

package/esm/hook/useDialogHandler.js

@@ -1,14 +0,0 @@
-import { useState } from 'react';
-
-const useDialogHandler = () => {
-  const [isOpen, setIsOpen] = useState(false);
-  const openDialog = () => setIsOpen(true);
-  const closeDialog = () => setIsOpen(false);
-  return {
-    isOpen,
-    openDialog,
-    closeDialog
-  };
-};
-
-export { useDialogHandler as default };