@teamturing/react-kit 2.69.1 → 2.70.0

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

@@ -1,4 +1,4 @@
-import { ElementType, PropsWithChildren, ReactNode, MouseEvent as ReactMouseEvent, KeyboardEvent as ReactKeyboardEvent, LiHTMLAttributes } from 'react';
+import { ElementType, ReactNode, MouseEvent as ReactMouseEvent, KeyboardEvent as ReactKeyboardEvent, LiHTMLAttributes } from 'react';
 import { SxProp } from '../../utils/styled-system';
 type Props = {
     variant?: 'neutral' | 'danger';
@@ -9,7 +9,18 @@ type Props = {
     disabled?: boolean;
     selected?: boolean;
     onSelect?: (event: ReactMouseEvent<HTMLLIElement> | ReactKeyboardEvent<HTMLLIElement>) => void;
-} & Pick<LiHTMLAttributes<HTMLLIElement>, 'onFocus' | 'onBlur'> & SxProp;
-declare const ActionListItem: ({ variant, leadingVisual: LeadingVisual, trailingVisual: TrailingVisual, description, descriptionLayout, disabled, selected, onSelect: propOnSelect, children, onFocus, onBlur, sx, }: PropsWithChildren<Props>) => import("react/jsx-runtime").JSX.Element;
-export default ActionListItem;
+} & Pick<LiHTMLAttributes<HTMLLIElement>, 'onFocus' | 'onBlur' | 'onClick' | 'onKeyDown' | 'tabIndex' | 'onMouseEnter' | 'onMouseLeave'> & SxProp;
+declare const _default: import("react").ForwardRefExoticComponent<{
+    variant?: "neutral" | "danger" | undefined;
+    leadingVisual?: string | number | boolean | import("react").ComponentClass<any, any> | import("react").FunctionComponent<any> | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | import("react").ReactPortal | null | undefined;
+    trailingVisual?: string | number | boolean | import("react").ComponentClass<any, any> | import("react").FunctionComponent<any> | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | import("react").ReactPortal | null | undefined;
+    description?: ReactNode;
+    descriptionLayout?: "block" | "inline" | undefined;
+    disabled?: boolean | undefined;
+    selected?: boolean | undefined;
+    onSelect?: ((event: ReactMouseEvent<HTMLLIElement, MouseEvent> | ReactKeyboardEvent<HTMLLIElement>) => void) | undefined;
+} & Pick<LiHTMLAttributes<HTMLLIElement>, "tabIndex" | "onFocus" | "onBlur" | "onKeyDown" | "onClick" | "onMouseEnter" | "onMouseLeave"> & SxProp & {
+    children?: ReactNode;
+} & import("react").RefAttributes<HTMLLIElement>>;
+export default _default;
 export type { Props as ActionListItemProps };

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

@@ -22,7 +22,18 @@ type Props = {
 type ActionListContextValue = {} & Pick<Props, 'selectionVariant' | 'selectionPosition' | 'onSelect'>;
 declare const ActionListContext: import("react").Context<Pick<Props, "onSelect" | "selectionVariant" | "selectionPosition">>;
 declare const _default: (({ selectionVariant, selectionPosition, onSelect, ...props }: PropsWithChildren<Props>) => import("react/jsx-runtime").JSX.Element) & {
-    Item: ({ variant, leadingVisual: LeadingVisual, trailingVisual: TrailingVisual, description, descriptionLayout, disabled, selected, onSelect: propOnSelect, children, onFocus, onBlur, sx, }: PropsWithChildren<ActionListItemProps>) => import("react/jsx-runtime").JSX.Element;
+    Item: import("react").ForwardRefExoticComponent<{
+        variant?: "neutral" | "danger" | undefined;
+        leadingVisual?: string | number | boolean | import("react").ComponentClass<any, any> | import("react").FunctionComponent<any> | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | import("react").ReactPortal | null | undefined;
+        trailingVisual?: string | number | boolean | import("react").ComponentClass<any, any> | import("react").FunctionComponent<any> | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | import("react").ReactPortal | null | undefined;
+        description?: import("react").ReactNode;
+        descriptionLayout?: "block" | "inline" | undefined;
+        disabled?: boolean | undefined;
+        selected?: boolean | undefined;
+        onSelect?: ((event: ReactMouseEvent<HTMLLIElement, MouseEvent> | ReactKeyboardEvent<HTMLLIElement>) => void) | undefined;
+    } & Pick<import("react").LiHTMLAttributes<HTMLLIElement>, "tabIndex" | "onFocus" | "onBlur" | "onKeyDown" | "onClick" | "onMouseEnter" | "onMouseLeave"> & SxProp & {
+        children?: import("react").ReactNode;
+    } & import("react").RefAttributes<HTMLLIElement>>;
     SectionDivider: ({ color, variant, width, sx }: ActionListSectionDividerProps) => import("react/jsx-runtime").JSX.Element;
     SectionHeader: ({ ...props }: PropsWithChildren<SxProp>) => import("react/jsx-runtime").JSX.Element;
 };

package/dist/index.js

@@ -1124,6 +1124,14 @@ var index$f = Object.assign(UnstyledTable, {
   Cell: UnstyledTableCell
 });
 
+/**
+ * 제공된 `ref`가 없는 경우 새로운 `ref`를 만들어 사용하고, 있는 경우 제공된 ref를 사용할 수 있는 훅입니다.
+ */
+const useProvidedOrCreatedRef = providedRef => {
+  const createdRef = React.useRef(null);
+  return providedRef ?? createdRef;
+};
+
 const View = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "View",
   componentId: "sc-1v428e-0"
@@ -1427,8 +1435,14 @@ const ActionListItem = ({
   children,
   onFocus,
   onBlur,
+  onClick: externalOnClick,
+  onKeyDown: externalOnKeyDown,
+  onMouseEnter,
+  onMouseLeave,
+  tabIndex: externalTabIndex,
   sx
-}) => {
+}, ref) => {
+  const itemRef = useProvidedOrCreatedRef(ref);
   const {
     selectionVariant,
     selectionPosition = 'leading',
@@ -1440,17 +1454,17 @@ const ActionListItem = ({
   const handleSelect = React.useCallback(event => {
     defaultOnSelect?.(event);
     propOnSelect?.(event);
-  }, [propOnSelect]);
+  }, [propOnSelect, defaultOnSelect]);
   const handleClick = React.useCallback(event => {
-    if (disabled) return;
-    handleSelect(event);
-  }, [handleSelect, disabled]);
+    if (!disabled) handleSelect(event);
+    externalOnClick?.(event);
+  }, [handleSelect, disabled, externalOnClick]);
   const handleKeyDown = React.useCallback(event => {
-    if (disabled) return;
-    if ([' ', 'Enter'].includes(event.key)) {
+    if (!disabled && [' ', 'Enter'].includes(event.key)) {
       handleSelect(event);
     }
-  }, [handleSelect, disabled]);
+    externalOnKeyDown?.(event);
+  }, [handleSelect, disabled, externalOnKeyDown]);
   const selectionContent = !utils.isNullable(selectionVariant) ? /*#__PURE__*/jsxRuntime.jsx(View, {
     className: 'action_list_item__selection_wrapper',
     display: 'inline-flex',
@@ -1479,17 +1493,20 @@ const ActionListItem = ({
     }) : null
   }) : null;
   return /*#__PURE__*/jsxRuntime.jsxs(BaseActionListItem, {
+    ref: itemRef,
     variant: variant,
     ...(disabled ? {
       disabled
     } : {
-      tabIndex: 0
+      tabIndex: externalTabIndex ?? 0
     }),
     sx: sx,
     onClick: handleClick,
     onKeyDown: handleKeyDown,
     onFocus: onFocus,
     onBlur: onBlur,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
     children: [selectionPosition === 'leading' && selectionContent, /*#__PURE__*/jsxRuntime.jsx(VisualWrapper, {
       className: 'action_list_item__leading_visual',
       display: 'inline-flex',
@@ -1628,6 +1645,7 @@ const FakeCheckbox = /*#__PURE__*/styled__default.default.div.withConfig({
 }) => theme.colors['border/disabled'], ({
   theme
 }) => theme.colors['icon/disabled'], sx);
+var ActionListItem$1 = /*#__PURE__*/React.forwardRef(ActionListItem);
 
 const HorizontalDivider = ({
   className,
@@ -1713,7 +1731,7 @@ const BaseActionList = /*#__PURE__*/styled__default.default.ul.withConfig({
   componentId: "sc-1epqzss-0"
 })(["list-style:none;padding:0;margin:0;", ""], sx);
 var index$e = Object.assign(ActionList, {
-  Item: ActionListItem,
+  Item: ActionListItem$1,
   SectionDivider: ActionListSectionDivider,
   SectionHeader: ActionListSectionHeader
 });
@@ -1897,14 +1915,6 @@ const useDelayedFunction = ({
   return delayedFunc;
 };
 
-/**
- * 제공된 `ref`가 없는 경우 새로운 `ref`를 만들어 사용하고, 있는 경우 제공된 ref를 사용할 수 있는 훅입니다.
- */
-const useProvidedOrCreatedRef = providedRef => {
-  const createdRef = React.useRef(null);
-  return providedRef ?? createdRef;
-};
-
 const useFocusTrap = (settings, dependencies = []) => {
   const containerRef = useProvidedOrCreatedRef(settings?.containerRef);
   const initialFocusRef = useProvidedOrCreatedRef(settings?.initialFocusRef);

package/esm/core/ActionList/ActionListItem.js

@@ -1,9 +1,10 @@
 import { CheckIcon } from '@teamturing/icons';
 import { forcePixelValue, isNullable, noop } from '@teamturing/utils';
-import { useContext, useCallback } from 'react';
+import { forwardRef, useContext, useCallback } from 'react';
 import { isValidElementType } from 'react-is';
 import styled, { css } from 'styled-components';
 import '../../node_modules/styled-system/dist/index.esm.js';
+import useProvidedOrCreatedRef from '../../hook/useProvidedOrCreatedRef.js';
 import { sx } from '../../utils/styled-system/index.js';
 import Grid from '../Grid/index.js';
 import StyledIcon from '../StyledIcon/index.js';
@@ -25,8 +26,14 @@ const ActionListItem = ({
   children,
   onFocus,
   onBlur,
+  onClick: externalOnClick,
+  onKeyDown: externalOnKeyDown,
+  onMouseEnter,
+  onMouseLeave,
+  tabIndex: externalTabIndex,
   sx
-}) => {
+}, ref) => {
+  const itemRef = useProvidedOrCreatedRef(ref);
   const {
     selectionVariant,
     selectionPosition = 'leading',
@@ -38,17 +45,17 @@ const ActionListItem = ({
   const handleSelect = useCallback(event => {
     defaultOnSelect?.(event);
     propOnSelect?.(event);
-  }, [propOnSelect]);
+  }, [propOnSelect, defaultOnSelect]);
   const handleClick = useCallback(event => {
-    if (disabled) return;
-    handleSelect(event);
-  }, [handleSelect, disabled]);
+    if (!disabled) handleSelect(event);
+    externalOnClick?.(event);
+  }, [handleSelect, disabled, externalOnClick]);
   const handleKeyDown = useCallback(event => {
-    if (disabled) return;
-    if ([' ', 'Enter'].includes(event.key)) {
+    if (!disabled && [' ', 'Enter'].includes(event.key)) {
       handleSelect(event);
     }
-  }, [handleSelect, disabled]);
+    externalOnKeyDown?.(event);
+  }, [handleSelect, disabled, externalOnKeyDown]);
   const selectionContent = !isNullable(selectionVariant) ? /*#__PURE__*/jsx(View, {
     className: 'action_list_item__selection_wrapper',
     display: 'inline-flex',
@@ -77,17 +84,20 @@ const ActionListItem = ({
     }) : null
   }) : null;
   return /*#__PURE__*/jsxs(BaseActionListItem, {
+    ref: itemRef,
     variant: variant,
     ...(disabled ? {
       disabled
     } : {
-      tabIndex: 0
+      tabIndex: externalTabIndex ?? 0
     }),
     sx: sx,
     onClick: handleClick,
     onKeyDown: handleKeyDown,
     onFocus: onFocus,
     onBlur: onBlur,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
     children: [selectionPosition === 'leading' && selectionContent, /*#__PURE__*/jsx(VisualWrapper, {
       className: 'action_list_item__leading_visual',
       display: 'inline-flex',
@@ -226,5 +236,6 @@ const FakeCheckbox = /*#__PURE__*/styled.div.withConfig({
 }) => theme.colors['border/disabled'], ({
   theme
 }) => theme.colors['icon/disabled'], sx);
+var ActionListItem$1 = /*#__PURE__*/forwardRef(ActionListItem);
 
-export { ActionListItem as default };
+export { ActionListItem$1 as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamturing/react-kit",
-  "version": "2.69.1",
+  "version": "2.70.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",
@@ -55,7 +55,7 @@
   "dependencies": {
     "@floating-ui/react": "^0.27.16",
     "@primer/behaviors": "^1.3.6",
-    "@teamturing/icons": "^1.73.1",
+    "@teamturing/icons": "^1.74.0",
     "@teamturing/token-studio": "^1.16.4",
     "@teamturing/utils": "^1.6.1",
     "framer-motion": "^10.16.4",
@@ -65,5 +65,5 @@
     "react-textarea-autosize": "^8.5.3",
     "styled-system": "^5.1.5"
   },
-  "gitHead": "224e16d81f6eadc1fb028ee5c875c42f5d23f325"
+  "gitHead": "a35243eca8bde7bca4d3569f7b77166ab9e0e86b"
 }