@teamturing/react-kit 2.15.0 → 2.16.0

package/dist/core/ActionList/ActionListItem.d.ts

@@ -0,0 +1,15 @@
+import { ElementType, PropsWithChildren, ReactNode, MouseEvent as ReactMouseEvent, KeyboardEvent as ReactKeyboardEvent } from 'react';
+import { SxProp } from '../../utils/styled-system';
+type Props = {
+    variant?: 'neutral' | 'danger';
+    leadingVisual?: ElementType | ReactNode;
+    trailingVisual?: ElementType | ReactNode;
+    description?: string;
+    descriptionLayout?: 'inline' | 'block';
+    disabled?: boolean;
+    selected?: boolean;
+    onSelect?: (event: ReactMouseEvent<HTMLLIElement> | ReactKeyboardEvent<HTMLLIElement>) => void;
+} & SxProp;
+declare const ActionListItem: ({ variant, leadingVisual: LeadingVisual, trailingVisual: TrailingVisual, description, descriptionLayout, disabled, selected, onSelect: propOnSelect, children, sx, }: PropsWithChildren<Props>) => import("react/jsx-runtime").JSX.Element;
+export default ActionListItem;
+export type { Props as ActionListItemProps };

package/dist/core/ActionList/ActionListSectionDivider.d.ts

@@ -0,0 +1,5 @@
+import { HorizontalDividerProps } from '../HorizontalDivider';
+type Props = {} & HorizontalDividerProps;
+declare const ActionListSectionDivider: ({ color, variant, width, sx }: Props) => import("react/jsx-runtime").JSX.Element;
+export default ActionListSectionDivider;
+export type { Props as ActionListSectionDividerProps };

package/dist/core/ActionList/ActionListSectionHeader.d.ts

@@ -0,0 +1,6 @@
+import { PropsWithChildren } from 'react';
+import { SxProp } from '../../utils/styled-system';
+type Props = {} & SxProp;
+declare const ActionListSectionHeader: ({ ...props }: PropsWithChildren<Props>) => import("react/jsx-runtime").JSX.Element;
+export default ActionListSectionHeader;
+export type { Props as ActionListSectionHeaderProps };

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

@@ -0,0 +1,21 @@
+import { PropsWithChildren } from 'react';
+import { SxProp } from '../../utils/styled-system';
+type Props = {
+    /**
+     * ActionList의 아이템에 선택이 되어있다는 것을 표시할 때 사용하는 속성입니다.
+     * `undefine`: 선택에 대한 표시를 하지 않습니다.
+     * `single`: 하나의 선택된 아이템에 대해, CheckIcon을 보여줍니다.
+     * `multiple`: 모든 아이템에 Checkbox를 표시합니다.
+     */
+    selectionVariant?: 'single' | 'multiple';
+} & SxProp;
+type ActionListContextValue = {} & Pick<Props, 'selectionVariant'>;
+declare const ActionListContext: import("react").Context<Pick<Props, "selectionVariant">>;
+declare const _default: (({ ...props }: PropsWithChildren<Props>) => import("react/jsx-runtime").JSX.Element) & {
+    Item: ({ variant, leadingVisual: LeadingVisual, trailingVisual: TrailingVisual, description, descriptionLayout, disabled, selected, onSelect: propOnSelect, children, sx, }: PropsWithChildren<import("./ActionListItem").ActionListItemProps>) => import("react/jsx-runtime").JSX.Element;
+    SectionDivider: ({ color, variant, width, sx }: import("./ActionListSectionDivider").ActionListSectionDividerProps) => import("react/jsx-runtime").JSX.Element;
+    SectionHeader: ({ ...props }: PropsWithChildren<SxProp>) => import("react/jsx-runtime").JSX.Element;
+};
+export default _default;
+export { ActionListContext };
+export type { Props as ActionListProps, ActionListContextValue };

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

@@ -5,12 +5,14 @@ type Props = {
     onDismiss?: () => void;
     size?: ResponsiveValue<'m'>;
     ignoreOutsideClickRefs?: RefObject<HTMLElement>[];
+    dismissFocusRef?: RefObject<HTMLElement>;
 } & HTMLAttributes<HTMLElement>;
 declare const _default: import("react").ForwardRefExoticComponent<{
     isOpen?: boolean | undefined;
     onDismiss?: (() => void) | undefined;
     size?: ResponsiveValue<"m"> | undefined;
     ignoreOutsideClickRefs?: RefObject<HTMLElement>[] | undefined;
+    dismissFocusRef?: RefObject<HTMLElement> | undefined;
 } & HTMLAttributes<HTMLElement> & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLDivElement>>;

package/dist/hook/useSafeLayoutEffect.d.ts

@@ -0,0 +1,3 @@
+import { useEffect } from 'react';
+declare const useSafeLayoutEffect: typeof useEffect;
+export default useSafeLayoutEffect;

package/dist/index.d.ts

@@ -86,6 +86,7 @@ export { default as useOutsideClick } from './hook/useOutsideClick';
 export { default as useProvidedOrCreatedRef } from './hook/useProvidedOrCreatedRef';
 export { default as useRelocation } from './hook/useRelocation';
 export { default as useResize } from './hook/useResize';
+export { default as useSafeLayoutEffect } from './hook/useSafeLayoutEffect';
 export { default as useToggleHandler } from './hook/useToggleHandler';
 /**
  * theme

package/dist/index.js

@@ -16256,6 +16256,8 @@ const useProvidedOrCreatedRef = providedRef => {
   return providedRef ?? createdRef;
 };
 
+const useSafeLayoutEffect = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+
 const Checkbox = ({
   checked,
   validationStatus,
@@ -16263,7 +16265,7 @@ const Checkbox = ({
   ...props
 }, ref) => {
   const checkboxRef = useProvidedOrCreatedRef(ref);
-  React.useLayoutEffect(() => {
+  useSafeLayoutEffect(() => {
     if (checkboxRef.current) {
       checkboxRef.current.indeterminate = indeterminate || false;
     }
@@ -18515,11 +18517,19 @@ const Overlay = ({
   onDismiss,
   size = 'm',
   ignoreOutsideClickRefs = [],
+  dismissFocusRef,
   ...props
 }, ref) => {
   const overlayRef = React.useRef(null);
   React.useImperativeHandle(ref, () => overlayRef.current);
-  const handleDismiss = React.useCallback(() => onDismiss?.(), [onDismiss]);
+  const handleDismiss = React.useCallback(() => {
+    if (dismissFocusRef && dismissFocusRef.current) {
+      setTimeout(() => {
+        dismissFocusRef.current?.focus();
+      }, 0);
+    }
+    onDismiss?.();
+  }, [onDismiss]);
   const handleOutsideClick = React.useCallback(e => {
     if (overlayRef.current && e.target instanceof Node && !overlayRef.current.contains(e.target) && ignoreOutsideClickRefs && !ignoreOutsideClickRefs.some(({
       current
@@ -20221,6 +20231,7 @@ const OverlayPopper = ({
       ref: refs.setFloating,
       isOpen: isOpen,
       onDismiss: closeOverlay,
+      dismissFocusRef: refs.reference,
       ignoreOutsideClickRefs: [refs.reference],
       style: floatingStyles,
       children: renderOverlay({
@@ -22907,6 +22918,7 @@ exports.useOutsideClick = useOutsideClick;
 exports.useProvidedOrCreatedRef = useProvidedOrCreatedRef;
 exports.useRelocation = useRelocation;
 exports.useResize = useResize;
+exports.useSafeLayoutEffect = useSafeLayoutEffect;
 exports.useToggleHandler = useToggleHandler;
 exports.whiteSpace = whiteSpace;
 exports.wordBreak = wordBreak;

package/esm/core/Checkbox/index.js

@@ -1,6 +1,7 @@
-import { forwardRef, useLayoutEffect } from 'react';
+import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import useProvidedOrCreatedRef from '../../hook/useProvidedOrCreatedRef.js';
+import useSafeLayoutEffect from '../../hook/useSafeLayoutEffect.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';
@@ -12,7 +13,7 @@ const Checkbox = ({
   ...props
 }, ref) => {
   const checkboxRef = useProvidedOrCreatedRef(ref);
-  useLayoutEffect(() => {
+  useSafeLayoutEffect(() => {
     if (checkboxRef.current) {
       checkboxRef.current.indeterminate = indeterminate || false;
     }

package/esm/core/Overlay/index.js

@@ -13,11 +13,19 @@ const Overlay = ({
   onDismiss,
   size = 'm',
   ignoreOutsideClickRefs = [],
+  dismissFocusRef,
   ...props
 }, ref) => {
   const overlayRef = useRef(null);
   useImperativeHandle(ref, () => overlayRef.current);
-  const handleDismiss = useCallback(() => onDismiss?.(), [onDismiss]);
+  const handleDismiss = useCallback(() => {
+    if (dismissFocusRef && dismissFocusRef.current) {
+      setTimeout(() => {
+        dismissFocusRef.current?.focus();
+      }, 0);
+    }
+    onDismiss?.();
+  }, [onDismiss]);
   const handleOutsideClick = useCallback(e => {
     if (overlayRef.current && e.target instanceof Node && !overlayRef.current.contains(e.target) && ignoreOutsideClickRefs && !ignoreOutsideClickRefs.some(({
       current

package/esm/core/OverlayPopper/index.js

@@ -56,6 +56,7 @@ const OverlayPopper = ({
       ref: refs.setFloating,
       isOpen: isOpen,
       onDismiss: closeOverlay,
+      dismissFocusRef: refs.reference,
       ignoreOutsideClickRefs: [refs.reference],
       style: floatingStyles,
       children: renderOverlay({

package/esm/hook/useSafeLayoutEffect.js

@@ -0,0 +1,5 @@
+import { useLayoutEffect, useEffect } from 'react';
+
+const useSafeLayoutEffect = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined' ? useLayoutEffect : useEffect;
+
+export { useSafeLayoutEffect as default };

package/esm/index.js

@@ -43,6 +43,7 @@ export { default as useOutsideClick } from './hook/useOutsideClick.js';
 export { default as useProvidedOrCreatedRef } from './hook/useProvidedOrCreatedRef.js';
 export { default as useRelocation } from './hook/useRelocation.js';
 export { default as useResize } from './hook/useResize.js';
+export { default as useSafeLayoutEffect } from './hook/useSafeLayoutEffect.js';
 export { default as useToggleHandler } from './hook/useToggleHandler.js';
 export { default as theme } from './theme/index.js';
 export { lineClamp, sx, textDecoration, whiteSpace, wordBreak } from './utils/styled-system/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamturing/react-kit",
-  "version": "2.15.0",
+  "version": "2.16.0",
   "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": "1bcbd7b8edfacb8d04d1814e3965f3a432fc0e87"
+  "gitHead": "8b02a8dd365e7ddc45036f1dd2fd05ebcbf03f72"
 }