@teamturing/react-kit 2.19.46 → 2.20.1

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

@@ -1,10 +1,8 @@
 import { ElementType, InputHTMLAttributes, ReactNode, Ref } from 'react';
+import { OverlayProps } from '../Overlay';
 import { OverlayPopperProps } from '../OverlayPopper';
 import { TextInputProps } from '../TextInput';
-type Props<T extends {
-    label: string;
-    value?: string | number | readonly string[];
-}> = {
+type Props<T> = {
     /**
      * TODO asdf
      */
@@ -13,24 +11,25 @@ type Props<T extends {
      * 입력 창 앞에 보여질 시각적 요소를 정의합니다. Icon, Text, Image 등이 될 수 있습니다.
      */
     leadingVisual?: ElementType | ReactNode;
+    /**
+     * 입력 창 뒤에 보여질 시각적 요소를 정의합니다. Icon, Text, Image 등이 될 수 있습니다.
+     * Default: chevron down icon
+     */
+    trailingVisual?: ElementType | ReactNode;
     children: (selectionHandler: {
         handleSelect: (item: T) => void;
     }, overlayHandler: {
         isOpen: boolean;
         closeOverlay: () => void;
     }) => ReactNode;
-    onChange?: (item: T) => void;
+    overlayProps?: Pick<OverlayProps, 'size' | 'maxHeight'>;
     searchInputProps?: Pick<TextInputProps, 'placeholder' | 'trailingVisual' | 'trailingAction' | 'onChange'>;
-    renderValue?: (value: T['value']) => ReactNode;
-} & Pick<OverlayPopperProps, 'focusTrapSettings' | 'focusZoneSettings' | 'onClose' | 'onOpen'> & Pick<InputHTMLAttributes<HTMLInputElement>, 'id' | 'disabled' | 'onClick' | 'placeholder' | 'value'>;
-declare const SearchSelectInput: <T extends {
-    label: string;
-    value: string | number | readonly string[];
-}>({ validationStatus, leadingVisual: LeadingVisual, children, onChange, focusTrapSettings, focusZoneSettings, onOpen, onClose, searchInputProps, value, renderValue, ...props }: Props<T>, ref: Ref<HTMLInputElement>) => import("react/jsx-runtime").JSX.Element;
-declare const _default: <T extends {
-    label: string;
-    value: string | number | readonly string[];
-}>(props: {
+    value?: T;
+    renderValue?: (value: T) => ReactNode;
+    onChange?: (item: T) => void;
+} & Pick<OverlayPopperProps, 'focusTrapSettings' | 'focusZoneSettings' | 'onClose' | 'onOpen'> & Pick<InputHTMLAttributes<HTMLInputElement>, 'id' | 'disabled' | 'onClick' | 'placeholder'>;
+declare const SearchSelectInput: <T>({ validationStatus, leadingVisual: LeadingVisual, trailingVisual: TrailingVisual, children, focusTrapSettings, focusZoneSettings, onOpen, onClose, overlayProps: propOverlayProps, searchInputProps, value, renderValue, onChange, ...props }: Props<T>, ref: Ref<HTMLInputElement>) => import("react/jsx-runtime").JSX.Element;
+declare const _default: <T>(props: {
     /**
      * TODO asdf
      */
@@ -39,16 +38,23 @@ declare const _default: <T extends {
      * 입력 창 앞에 보여질 시각적 요소를 정의합니다. Icon, Text, Image 등이 될 수 있습니다.
      */
     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;
+    /**
+     * 입력 창 뒤에 보여질 시각적 요소를 정의합니다. Icon, Text, Image 등이 될 수 있습니다.
+     * Default: chevron down icon
+     */
+    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;
     children: (selectionHandler: {
         handleSelect: (item: T) => void;
     }, overlayHandler: {
         isOpen: boolean;
         closeOverlay: () => void;
     }) => ReactNode;
-    onChange?: ((item: T) => void) | undefined;
+    overlayProps?: Pick<OverlayProps, "maxHeight" | "size"> | undefined;
     searchInputProps?: Pick<TextInputProps, "placeholder" | "onChange" | "trailingVisual" | "trailingAction"> | undefined;
-    renderValue?: ((value: T["value"]) => ReactNode) | undefined;
-} & Pick<OverlayPopperProps, "onClose" | "focusZoneSettings" | "focusTrapSettings" | "onOpen"> & Pick<InputHTMLAttributes<HTMLInputElement>, "disabled" | "placeholder" | "value" | "id" | "onClick"> & {
+    value?: T | undefined;
+    renderValue?: ((value: T) => ReactNode) | undefined;
+    onChange?: ((item: T) => void) | undefined;
+} & Pick<OverlayPopperProps, "onClose" | "focusZoneSettings" | "focusTrapSettings" | "onOpen"> & Pick<InputHTMLAttributes<HTMLInputElement>, "disabled" | "placeholder" | "id" | "onClick"> & {
     ref?: Ref<HTMLInputElement> | undefined;
 }) => ReturnType<typeof SearchSelectInput>;
 export default _default;

package/dist/index.js

@@ -21587,18 +21587,23 @@ var TextInput$1 = Object.assign( /*#__PURE__*/React.forwardRef(TextInput), {
 const SearchSelectInput = ({
   validationStatus,
   leadingVisual: LeadingVisual,
+  trailingVisual: TrailingVisual,
   children,
-  onChange,
   focusTrapSettings,
   focusZoneSettings,
   onOpen,
   onClose,
+  overlayProps: propOverlayProps,
   searchInputProps,
   value,
-  renderValue = value => value?.toString(),
+  renderValue = value => /*#__PURE__*/jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {
+    children: value
+  }),
+  onChange,
   ...props
 }, ref) => {
   const theme = styled.useTheme();
+  const isVisibleValueExist = value && isArray$1(value) && !isNullable(renderValue(value)) ? value.length > 0 : value && !isNullable(renderValue(value));
   const hasLeadingVisual = !isNullable(LeadingVisual);
   const valueInputRef = useProvidedOrCreatedRef(ref);
   const labelInputRef = React.useRef(null);
@@ -21621,7 +21626,7 @@ const SearchSelectInput = ({
        * ! 일단 Custom onChange를 만들어서 해결.
        */
       const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value')?.set;
-      nativeInputValueSetter?.call(valueInputRef.current, item.value.toString());
+      nativeInputValueSetter?.call(valueInputRef.current, item);
       onChange?.(item);
     }
   };
@@ -21666,8 +21671,9 @@ const SearchSelectInput = ({
     renderOverlay: (overlayProps, overlayHandler, {
       elements
     }) => /*#__PURE__*/jsxRuntimeExports.jsxs(Overlay$1, {
+      ...propOverlayProps,
       ...overlayProps,
-      maxHeight: 200,
+      maxHeight: 300,
       sx: {
         display: 'flex',
         flexDirection: 'column'
@@ -21676,6 +21682,12 @@ const SearchSelectInput = ({
         ...overlayProps.style,
         width: elements?.reference?.getBoundingClientRect().width
       },
+      onKeyDown: e => {
+        if (e.code === 'Escape') {
+          e.stopPropagation();
+          overlayHandler.closeOverlay();
+        }
+      },
       children: [/*#__PURE__*/jsxRuntimeExports.jsx(Space, {
         p: 2,
         sx: {
@@ -21690,6 +21702,7 @@ const SearchSelectInput = ({
             if (e.code === 'Enter' && activeDescendantRef.current) {
               const activeDescendantEvent = new KeyboardEvent(e.type, e.nativeEvent);
               activeDescendantRef.current?.dispatchEvent(activeDescendantEvent);
+              e.preventDefault();
             }
           },
           ...searchInputProps
@@ -21707,22 +21720,18 @@ const SearchSelectInput = ({
         }, overlayHandler)
       })]
     }),
-    children: (popperProps, {
-      openOverlay
-    }) => /*#__PURE__*/jsxRuntimeExports.jsxs(TextInputWrapper, {
-      ...popperProps,
-      tabIndex: disabled ? -1 : 0,
+    children: popperProps => /*#__PURE__*/jsxRuntimeExports.jsxs(TextInputWrapper, {
+      ...(disabled ? {} : {
+        ...popperProps,
+        onClick: e => {
+          focusInput();
+          popperProps.onClick?.(e);
+        }
+      }),
+      tabIndex: -1,
       disabled: disabled,
-      onClick: focusInput,
       hasLeadingVisual: hasLeadingVisual,
       validationStatus: validationStatus,
-      onKeyDown: e => {
-        if (['ArrowUp', 'ArrowDown'].includes(e.key)) {
-          e.preventDefault();
-          openOverlay();
-        }
-        e.stopPropagation();
-      },
       children: [/*#__PURE__*/jsxRuntimeExports.jsx(View, {
         sx: {
           'flexShrink': 0,
@@ -21747,12 +21756,10 @@ const SearchSelectInput = ({
           paddingLeft: hasLeadingVisual ? 2 : 4,
           whiteSpace: 'pre',
           textOverflow: 'ellipsis',
-          width: '100%'
+          width: '100%',
+          cursor: disabled ? 'not-allowed' : 'default'
         },
-        onClick: e => {
-          popperProps.onClick?.(e);
-        },
-        children: [!isNullable(renderValue(value)) ? /*#__PURE__*/jsxRuntimeExports.jsx(View, {
+        children: [isVisibleValueExist ? /*#__PURE__*/jsxRuntimeExports.jsx(View, {
           sx: {
             flex: '0 1 auto',
             maxWidth: '100%',
@@ -21760,20 +21767,20 @@ const SearchSelectInput = ({
             whiteSpace: 'pre',
             overflow: 'hidden'
           },
-          children: renderValue(value)
+          children: value && renderValue(value)
         }) : null, /*#__PURE__*/jsxRuntimeExports.jsx(BaseInput, {
           id: id,
           ref: labelInputRef,
           readOnly: true,
           onChange: noop$2,
           autoComplete: 'off',
-          tabIndex: -1,
+          disabled: disabled,
           onClick: e => {
             props.onClick?.(e);
           },
-          placeholder: !isNullable(renderValue(value)) ? '' : placeholder
+          placeholder: isVisibleValueExist ? '' : placeholder
         })]
-      }), /*#__PURE__*/jsxRuntimeExports.jsx(StyledIcon, {
+      }), /*#__PURE__*/jsxRuntimeExports.jsx(View, {
         sx: {
           position: 'absolute',
           top: '50%',
@@ -21781,9 +21788,11 @@ const SearchSelectInput = ({
           right: 4,
           pointerEvents: 'none'
         },
-        icon: SvgChevronDown,
-        color: disabled ? 'icon/disabled' : 'icon/neutral/bolder',
-        size: 16
+        children: typeof TrailingVisual !== 'string' && reactIsExports.isValidElementType(TrailingVisual) ? /*#__PURE__*/jsxRuntimeExports.jsx(TrailingVisual, {}) : TrailingVisual ? TrailingVisual : /*#__PURE__*/jsxRuntimeExports.jsx(StyledIcon, {
+          icon: SvgChevronDown,
+          color: disabled ? 'icon/disabled' : 'icon/neutral/bolder',
+          size: 16
+        })
       }), /*#__PURE__*/jsxRuntimeExports.jsx(BaseInput, {
         ref: e => {
           isFunction$1(ref) ? ref(e) : null;

package/esm/core/SearchSelectInput/index.js

@@ -2,6 +2,7 @@ import { forwardRef, useRef } from 'react';
 import SvgChevronDown from '../../packages/icons/esm/ChevronDown.js';
 import SvgSearch from '../../packages/icons/esm/Search.js';
 import { forcePixelValue } from '../../packages/utils/esm/forcePixelValue.js';
+import { isArray } from '../../packages/utils/esm/isArray.js';
 import { isFunction } from '../../packages/utils/esm/isFunction.js';
 import { isNullable } from '../../packages/utils/esm/isNullable.js';
 import { noop } from '../../packages/utils/esm/noop.js';
@@ -21,18 +22,23 @@ import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js'
 const SearchSelectInput = ({
   validationStatus,
   leadingVisual: LeadingVisual,
+  trailingVisual: TrailingVisual,
   children,
-  onChange,
   focusTrapSettings,
   focusZoneSettings,
   onOpen,
   onClose,
+  overlayProps: propOverlayProps,
   searchInputProps,
   value,
-  renderValue = value => value?.toString(),
+  renderValue = value => /*#__PURE__*/jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {
+    children: value
+  }),
+  onChange,
   ...props
 }, ref) => {
   const theme = useTheme();
+  const isVisibleValueExist = value && isArray(value) && !isNullable(renderValue(value)) ? value.length > 0 : value && !isNullable(renderValue(value));
   const hasLeadingVisual = !isNullable(LeadingVisual);
   const valueInputRef = useProvidedOrCreatedRef(ref);
   const labelInputRef = useRef(null);
@@ -55,7 +61,7 @@ const SearchSelectInput = ({
        * ! 일단 Custom onChange를 만들어서 해결.
        */
       const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value')?.set;
-      nativeInputValueSetter?.call(valueInputRef.current, item.value.toString());
+      nativeInputValueSetter?.call(valueInputRef.current, item);
       onChange?.(item);
     }
   };
@@ -100,8 +106,9 @@ const SearchSelectInput = ({
     renderOverlay: (overlayProps, overlayHandler, {
       elements
     }) => /*#__PURE__*/jsxRuntimeExports.jsxs(Overlay, {
+      ...propOverlayProps,
       ...overlayProps,
-      maxHeight: 200,
+      maxHeight: 300,
       sx: {
         display: 'flex',
         flexDirection: 'column'
@@ -110,6 +117,12 @@ const SearchSelectInput = ({
         ...overlayProps.style,
         width: elements?.reference?.getBoundingClientRect().width
       },
+      onKeyDown: e => {
+        if (e.code === 'Escape') {
+          e.stopPropagation();
+          overlayHandler.closeOverlay();
+        }
+      },
       children: [/*#__PURE__*/jsxRuntimeExports.jsx(Space, {
         p: 2,
         sx: {
@@ -124,6 +137,7 @@ const SearchSelectInput = ({
             if (e.code === 'Enter' && activeDescendantRef.current) {
               const activeDescendantEvent = new KeyboardEvent(e.type, e.nativeEvent);
               activeDescendantRef.current?.dispatchEvent(activeDescendantEvent);
+              e.preventDefault();
             }
           },
           ...searchInputProps
@@ -141,22 +155,18 @@ const SearchSelectInput = ({
         }, overlayHandler)
       })]
     }),
-    children: (popperProps, {
-      openOverlay
-    }) => /*#__PURE__*/jsxRuntimeExports.jsxs(TextInputWrapper, {
-      ...popperProps,
-      tabIndex: disabled ? -1 : 0,
+    children: popperProps => /*#__PURE__*/jsxRuntimeExports.jsxs(TextInputWrapper, {
+      ...(disabled ? {} : {
+        ...popperProps,
+        onClick: e => {
+          focusInput();
+          popperProps.onClick?.(e);
+        }
+      }),
+      tabIndex: -1,
       disabled: disabled,
-      onClick: focusInput,
       hasLeadingVisual: hasLeadingVisual,
       validationStatus: validationStatus,
-      onKeyDown: e => {
-        if (['ArrowUp', 'ArrowDown'].includes(e.key)) {
-          e.preventDefault();
-          openOverlay();
-        }
-        e.stopPropagation();
-      },
       children: [/*#__PURE__*/jsxRuntimeExports.jsx(View, {
         sx: {
           'flexShrink': 0,
@@ -181,12 +191,10 @@ const SearchSelectInput = ({
           paddingLeft: hasLeadingVisual ? 2 : 4,
           whiteSpace: 'pre',
           textOverflow: 'ellipsis',
-          width: '100%'
+          width: '100%',
+          cursor: disabled ? 'not-allowed' : 'default'
         },
-        onClick: e => {
-          popperProps.onClick?.(e);
-        },
-        children: [!isNullable(renderValue(value)) ? /*#__PURE__*/jsxRuntimeExports.jsx(View, {
+        children: [isVisibleValueExist ? /*#__PURE__*/jsxRuntimeExports.jsx(View, {
           sx: {
             flex: '0 1 auto',
             maxWidth: '100%',
@@ -194,20 +202,20 @@ const SearchSelectInput = ({
             whiteSpace: 'pre',
             overflow: 'hidden'
           },
-          children: renderValue(value)
+          children: value && renderValue(value)
         }) : null, /*#__PURE__*/jsxRuntimeExports.jsx(BaseInput, {
           id: id,
           ref: labelInputRef,
           readOnly: true,
           onChange: noop,
           autoComplete: 'off',
-          tabIndex: -1,
+          disabled: disabled,
           onClick: e => {
             props.onClick?.(e);
           },
-          placeholder: !isNullable(renderValue(value)) ? '' : placeholder
+          placeholder: isVisibleValueExist ? '' : placeholder
         })]
-      }), /*#__PURE__*/jsxRuntimeExports.jsx(StyledIcon, {
+      }), /*#__PURE__*/jsxRuntimeExports.jsx(View, {
         sx: {
           position: 'absolute',
           top: '50%',
@@ -215,9 +223,11 @@ const SearchSelectInput = ({
           right: 4,
           pointerEvents: 'none'
         },
-        icon: SvgChevronDown,
-        color: disabled ? 'icon/disabled' : 'icon/neutral/bolder',
-        size: 16
+        children: typeof TrailingVisual !== 'string' && reactIsExports.isValidElementType(TrailingVisual) ? /*#__PURE__*/jsxRuntimeExports.jsx(TrailingVisual, {}) : TrailingVisual ? TrailingVisual : /*#__PURE__*/jsxRuntimeExports.jsx(StyledIcon, {
+          icon: SvgChevronDown,
+          color: disabled ? 'icon/disabled' : 'icon/neutral/bolder',
+          size: 16
+        })
       }), /*#__PURE__*/jsxRuntimeExports.jsx(BaseInput, {
         ref: e => {
           isFunction(ref) ? ref(e) : null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamturing/react-kit",
-  "version": "2.19.46",
+  "version": "2.20.1",
   "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",
@@ -57,6 +57,7 @@
     "@primer/behaviors": "^1.3.6",
     "@teamturing/icons": "^1.25.1",
     "@teamturing/token-studio": "^1.2.2",
+    "@teamturing/utils": "^1.2.0",
     "framer-motion": "^10.16.4",
     "lodash.debounce": "^4.0.8",
     "lodash.throttle": "^4.1.1",
@@ -65,5 +66,5 @@
     "react-textarea-autosize": "^8.5.3",
     "styled-system": "^5.1.5"
   },
-  "gitHead": "1cd63d66b40289a82a276112e2b0c37f30b9c588"
+  "gitHead": "d009d5b6544ea3579d0b4093fd449422d1352261"
 }