@teamturing/react-kit 2.16.1 → 2.16.3

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

@@ -1,19 +1,21 @@
 import { HTMLAttributes, RefObject } from 'react';
-import { ResponsiveValue } from 'styled-system';
+import { MaxHeightProps, ResponsiveValue } from 'styled-system';
+import { SxProp } from '../../utils/styled-system';
+type OverlaySizeType = 's' | 'm' | 'l';
 type Props = {
     isOpen?: boolean;
     onDismiss?: () => void;
-    size?: ResponsiveValue<'m'>;
+    size?: ResponsiveValue<OverlaySizeType>;
     ignoreOutsideClickRefs?: RefObject<HTMLElement>[];
     dismissFocusRef?: RefObject<HTMLElement>;
-} & HTMLAttributes<HTMLElement>;
+} & MaxHeightProps & SxProp & HTMLAttributes<HTMLElement>;
 declare const _default: import("react").ForwardRefExoticComponent<{
     isOpen?: boolean | undefined;
     onDismiss?: (() => void) | undefined;
-    size?: ResponsiveValue<"m"> | undefined;
+    size?: ResponsiveValue<OverlaySizeType> | undefined;
     ignoreOutsideClickRefs?: RefObject<HTMLElement>[] | undefined;
     dismissFocusRef?: RefObject<HTMLElement> | undefined;
-} & HTMLAttributes<HTMLElement> & {
+} & MaxHeightProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.MaxHeight<import("styled-system").TLengthStyledSystem>> & SxProp & HTMLAttributes<HTMLElement> & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLDivElement>>;
 export default _default;

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

@@ -2,15 +2,17 @@ import { Placement } from '@floating-ui/react-dom';
 import { PropsWithChildren, ReactNode } from 'react';
 import { FocusTrapHookSettings } from '../../hook/useFocusTrap';
 import { FocusZoneHookSettings } from '../../hook/useFocusZone';
+import { OverlayProps } from '../Overlay';
 type Props = {
     renderOverlay: ({ isOpen, closeOverlay }: {
         isOpen: boolean;
         closeOverlay: () => void;
     }) => ReactNode;
+    overlayProps?: OverlayProps;
     placement?: Placement;
     focusZoneSettings?: Partial<FocusZoneHookSettings>;
     focusTrapSettings?: Partial<FocusTrapHookSettings>;
 };
-declare const OverlayPopper: ({ children: propChildren, renderOverlay, placement, focusZoneSettings, focusTrapSettings, }: PropsWithChildren<Props>) => import("react/jsx-runtime").JSX.Element;
+declare const OverlayPopper: ({ children: propChildren, renderOverlay, overlayProps, placement, focusZoneSettings, focusTrapSettings, }: PropsWithChildren<Props>) => import("react/jsx-runtime").JSX.Element;
 export default OverlayPopper;
 export type { Props as OverlayPopperProps };

package/dist/index.js

@@ -977,7 +977,7 @@ layout$1.width;
   layout$1.minWidth;
   layout$1.minHeight;
   layout$1.maxWidth;
-  layout$1.maxHeight;
+  var maxHeight = layout$1.maxHeight;
   layout$1.size;
   layout$1.verticalAlign;
   layout$1.display;
@@ -18871,6 +18871,7 @@ const Overlay = ({
   size = 'm',
   ignoreOutsideClickRefs = [],
   dismissFocusRef,
+  maxHeight = forcePixelValue(600),
   ...props
 }, ref) => {
   const overlayRef = React.useRef(null);
@@ -18923,7 +18924,9 @@ const Overlay = ({
   return isOpen ? /*#__PURE__*/jsxRuntimeExports.jsx(BaseOverlay, {
     ref: overlayRef,
     size: size,
+    maxHeight: maxHeight,
     ...props,
+    role: 'dialog',
     children: children
   }) : null;
 };
@@ -18945,11 +18948,19 @@ const BaseOverlay = styled__default.default.div`
   ${variant({
   prop: 'size',
   variants: {
+    s: {
+      width: forcePixelValue(256)
+    },
     m: {
-      width: forcePixelValue(180)
+      width: forcePixelValue(320)
+    },
+    l: {
+      width: forcePixelValue(480)
     }
   }
 })}
+
+  ${maxHeight}
   ${sx}
 `;
 var Overlay$1 = /*#__PURE__*/React.forwardRef(Overlay);
@@ -20541,6 +20552,7 @@ const useToggleHandler = ({
 const OverlayPopper = ({
   children: propChildren,
   renderOverlay,
+  overlayProps,
   placement = 'bottom-start',
   focusZoneSettings,
   focusTrapSettings
@@ -20562,6 +20574,10 @@ const OverlayPopper = ({
   } = useToggleHandler({
     initialState: false
   });
+  const handleDismiss = () => {
+    overlayProps?.onDismiss?.();
+    closeOverlay();
+  };
   const children = React.Children.map(propChildren, child => /*#__PURE__*/React.cloneElement(child, {
     onClick: toggleOverlay,
     tabIndex: 0,
@@ -20583,10 +20599,11 @@ const OverlayPopper = ({
     children: [children, /*#__PURE__*/jsxRuntimeExports.jsx(Overlay$1, {
       ref: refs.setFloating,
       isOpen: isOpen,
-      onDismiss: closeOverlay,
       dismissFocusRef: refs.reference,
       ignoreOutsideClickRefs: [refs.reference],
+      ...overlayProps,
       style: floatingStyles,
+      onDismiss: handleDismiss,
       children: renderOverlay({
         isOpen,
         closeOverlay

package/esm/core/Overlay/index.js

@@ -1,6 +1,6 @@
 import { forwardRef, useRef, useImperativeHandle, useCallback, useEffect } from 'react';
 import styled from 'styled-components';
-import '../../node_modules/styled-system/dist/index.esm.js';
+import { maxHeight } from '../../node_modules/styled-system/dist/index.esm.js';
 import { forcePixelValue } from '../../utils/forcePixelValue.js';
 import { sx } from '../../utils/styled-system/index.js';
 import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
@@ -14,6 +14,7 @@ const Overlay = ({
   size = 'm',
   ignoreOutsideClickRefs = [],
   dismissFocusRef,
+  maxHeight = forcePixelValue(600),
   ...props
 }, ref) => {
   const overlayRef = useRef(null);
@@ -66,7 +67,9 @@ const Overlay = ({
   return isOpen ? /*#__PURE__*/jsxRuntimeExports.jsx(BaseOverlay, {
     ref: overlayRef,
     size: size,
+    maxHeight: maxHeight,
     ...props,
+    role: 'dialog',
     children: children
   }) : null;
 };
@@ -88,11 +91,19 @@ const BaseOverlay = styled.div`
   ${variant({
   prop: 'size',
   variants: {
+    s: {
+      width: forcePixelValue(256)
+    },
     m: {
-      width: forcePixelValue(180)
+      width: forcePixelValue(320)
+    },
+    l: {
+      width: forcePixelValue(480)
     }
   }
 })}
+
+  ${maxHeight}
   ${sx}
 `;
 var Overlay$1 = /*#__PURE__*/forwardRef(Overlay);

package/esm/core/OverlayPopper/index.js

@@ -13,6 +13,7 @@ import { offset, flip, shift } from '../../node_modules/@floating-ui/core/dist/f
 const OverlayPopper = ({
   children: propChildren,
   renderOverlay,
+  overlayProps,
   placement = 'bottom-start',
   focusZoneSettings,
   focusTrapSettings
@@ -34,6 +35,10 @@ const OverlayPopper = ({
   } = useToggleHandler({
     initialState: false
   });
+  const handleDismiss = () => {
+    overlayProps?.onDismiss?.();
+    closeOverlay();
+  };
   const children = Children.map(propChildren, child => /*#__PURE__*/cloneElement(child, {
     onClick: toggleOverlay,
     tabIndex: 0,
@@ -55,10 +60,11 @@ const OverlayPopper = ({
     children: [children, /*#__PURE__*/jsxRuntimeExports.jsx(Overlay, {
       ref: refs.setFloating,
       isOpen: isOpen,
-      onDismiss: closeOverlay,
       dismissFocusRef: refs.reference,
       ignoreOutsideClickRefs: [refs.reference],
+      ...overlayProps,
       style: floatingStyles,
+      onDismiss: handleDismiss,
       children: renderOverlay({
         isOpen,
         closeOverlay

package/esm/node_modules/styled-system/dist/index.esm.js

@@ -16,7 +16,7 @@ layout.width;
   layout.minWidth;
   layout.minHeight;
   layout.maxWidth;
-  layout.maxHeight;
+  var maxHeight = layout.maxHeight;
   layout.size;
   layout.verticalAlign;
   layout.display;
@@ -74,4 +74,4 @@ position.zIndex;
   position.bottom;
   position.left;
 
-export { background, border, border as borders, color, flexbox, fontSize, fontWeight, grid, layout, lineHeight, position, textAlign, typography };
+export { background, border, border as borders, color, flexbox, fontSize, fontWeight, grid, layout, lineHeight, maxHeight, position, textAlign, typography };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamturing/react-kit",
-  "version": "2.16.1",
+  "version": "2.16.3",
   "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": "b202599554a5c0aaf45652c3f5815d171b7ba8fb"
+  "gitHead": "5d22785a97a7991ab894c44c6ea913202821cd01"
 }