@teamturing/react-kit 2.15.1 → 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/index.js

@@ -18517,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
@@ -20223,6 +20231,7 @@ const OverlayPopper = ({
       ref: refs.setFloating,
       isOpen: isOpen,
       onDismiss: closeOverlay,
+      dismissFocusRef: refs.reference,
       ignoreOutsideClickRefs: [refs.reference],
       style: floatingStyles,
       children: renderOverlay({

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/package.json

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