@teamturing/react-kit 2.19.14 → 2.19.16

package/esm/core/Dialog/index.js

@@ -23,6 +23,7 @@ const Dialog = ({
   isOpen,
   onDismiss,
   size = 'm',
+  initialFocusRef,
   sx
 }, ref) => {
   const handleDismiss = useCallback(() => onDismiss?.(), [onDismiss]);
@@ -45,7 +46,7 @@ const Dialog = ({
   }, [handleDismiss]);
   useFocusTrap({
     containerRef: dialogRef,
-    initialFocusRef: closeButtonRef,
+    initialFocusRef: initialFocusRef || closeButtonRef,
     disabled: !isOpen
   });
   useEffect(() => {

package/esm/core/FormControl/index.js

@@ -1,7 +1,7 @@
 import { forwardRef, createContext, isValidElement, cloneElement } from 'react';
 import useRelocation from '../../hook/useRelocation.js';
 import Checkbox from '../Checkbox/index.js';
-import OverlaySelectInput from '../OverlaySelectInput/index.js';
+import SearchSelectInput from '../SearchSelectInput/index.js';
 import Select from '../Select/index.js';
 import TextInput from '../TextInput/index.js';
 import View from '../View/index.js';
@@ -28,7 +28,7 @@ const FormControl = ({
       successMessage: FormControlSuccessMessage
     }
   });
-  const inputComponentCandidates = [TextInput, Select, OverlaySelectInput, Checkbox, ...additionalInputComponentCandidates];
+  const inputComponentCandidates = [TextInput, Select, SearchSelectInput, Checkbox, ...additionalInputComponentCandidates];
   const InputComponent = restComponents.find(component => inputComponentCandidates.some(candidate => /*#__PURE__*/isValidElement(component) && component.type === candidate));
   const isHorizontalLayoutNeeded = /*#__PURE__*/isValidElement(InputComponent) && InputComponent.type === Checkbox;
   return /*#__PURE__*/jsxRuntimeExports.jsx(FormControlContext.Provider, {

package/esm/core/OverlayPopper/index.js

@@ -55,6 +55,13 @@ const OverlayPopper = ({
   };
   const defaultPopperProps = {
     onClick: handleOverlayToggle,
+    onKeyDown: e => {
+      if (['ArrowUp', 'ArrowDown'].includes(e.key)) {
+        e.preventDefault();
+        openOverlay();
+      }
+      e.stopPropagation();
+    },
     tabIndex: 0,
     ...{
       ref: refs.setReference

package/esm/core/Pagination/index.js

@@ -21,6 +21,7 @@ const Pagination = ({
   onPreviousClick = noop,
   onNextClick = noop,
   renderPage = (page, i) => /*#__PURE__*/jsxRuntimeExports.jsx(PaginationPage, {
+    type: 'button',
     onClick: () => onPageClick(page, i),
     selected: i === currentPageIndex,
     children: page.label
@@ -62,6 +63,7 @@ const Pagination = ({
     sx: sx,
     children: [renderPreviousPageDirection({
       previousPageDirectionProps: {
+        type: 'button',
         onClick: () => onPreviousClick(currentPageIndex),
         disabled: currentPageIndex === 0
       }
@@ -99,6 +101,7 @@ const Pagination = ({
       originalIndex
     }) => renderPaginationPage(page, originalIndex))], renderNextPageDirection({
       nextPageDirectionProps: {
+        type: 'button',
         onClick: () => onNextClick(currentPageIndex),
         disabled: currentPageIndex === totalPageCount - 1
       }

package/esm/core/Pill/index.js

@@ -42,6 +42,7 @@ const Pill = ({
     hasRemoveButton: !isNullable(propOnRemove),
     disabled: disabled,
     ...props,
+    type: 'button',
     children: [typeof LeadingVisual !== 'string' && reactIsExports.isValidElementType(LeadingVisual) ? /*#__PURE__*/jsxRuntimeExports.jsx(LeadingVisual, {}) : LeadingVisual, /*#__PURE__*/jsxRuntimeExports.jsx("span", {
       title: children?.toString(),
       children: children

package/esm/core/{OverlaySelectInput → SearchSelectInput}/index.js

@@ -1,19 +1,24 @@
 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 { isFunction } from '../../packages/utils/esm/isFunction.js';
 import { isNullable } from '../../packages/utils/esm/isNullable.js';
 import { noop } from '../../packages/utils/esm/noop.js';
+import { scrollIntoView } from '../../packages/utils/esm/scrollIntoView.js';
 import { r as reactIsExports } from '../../node_modules/react-is/index.js';
-import styled, { css } from 'styled-components';
+import styled, { css, useTheme } from 'styled-components';
 import useProvidedOrCreatedRef from '../../hook/useProvidedOrCreatedRef.js';
+import HorizontalDivider from '../HorizontalDivider/index.js';
 import Overlay from '../Overlay/index.js';
 import OverlayPopper from '../OverlayPopper/index.js';
+import Space from '../Space/index.js';
 import StyledIcon from '../StyledIcon/index.js';
+import TextInput from '../TextInput/index.js';
 import View from '../View/index.js';
 import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
 
-const OverlaySelectInput = ({
+const SearchSelectInput = ({
   validationStatus,
   leadingVisual: LeadingVisual,
   children,
@@ -22,8 +27,13 @@ const OverlaySelectInput = ({
   focusZoneSettings,
   onOpen,
   onClose,
+  searchInputProps,
+  value,
+  renderValue = value => value?.toString(),
   ...props
 }, ref) => {
+  const theme = useTheme();
+  const hasLeadingVisual = !isNullable(LeadingVisual);
   const valueInputRef = useProvidedOrCreatedRef(ref);
   const labelInputRef = useRef(null);
   const focusInput = () => {
@@ -36,8 +46,6 @@ const OverlaySelectInput = ({
   } = props;
   const handleSelect = item => {
     if (labelInputRef.current && valueInputRef.current) {
-      labelInputRef.current.setAttribute('value', item.label);
-
       /**
        * ! valueInput의 native onChange를 trigger하려고 했으나 작동하지 않음.
        * ! 일단 Custom onChange를 만들어서 해결.
@@ -47,22 +55,87 @@ const OverlaySelectInput = ({
       onChange?.(item);
     }
   };
+  const listContainerRef = useRef(null);
+  const searchInputRef = useRef(null);
+  const activeDescendantRef = useRef();
   return /*#__PURE__*/jsxRuntimeExports.jsx(OverlayPopper, {
-    focusTrapSettings: focusTrapSettings,
-    focusZoneSettings: focusZoneSettings,
+    focusTrapSettings: {
+      initialFocusRef: searchInputRef,
+      restoreFocusOnCleanUp: true,
+      ...focusTrapSettings
+    },
+    focusZoneSettings: {
+      containerRef: listContainerRef,
+      activeDescendantFocus: searchInputRef,
+      focusOutBehavior: 'stop',
+      onActiveDescendantChanged: (current, previous) => {
+        activeDescendantRef.current = current;
+        if (current && listContainerRef.current) {
+          current.style.backgroundColor = theme.colors['bg/selected/subtle'];
+          scrollIntoView({
+            childrenRef: current,
+            scrollContainerRef: listContainerRef.current,
+            options: {
+              behavior: 'auto',
+              direction: 'vertical',
+              offset: 0
+            }
+          });
+        }
+        if (previous && current !== previous) {
+          previous.style.backgroundColor = '';
+        }
+      },
+      focusableElementFilter: elem => {
+        return elem instanceof HTMLElement;
+      },
+      ...focusZoneSettings
+    },
     onOpen: onOpen,
     onClose: onClose,
-    renderOverlay: (overlayProps, _, {
+    renderOverlay: (overlayProps, overlayHandler, {
       elements
-    }) => /*#__PURE__*/jsxRuntimeExports.jsx(Overlay, {
+    }) => /*#__PURE__*/jsxRuntimeExports.jsxs(Overlay, {
       ...overlayProps,
+      maxHeight: 200,
+      sx: {
+        display: 'flex',
+        flexDirection: 'column'
+      },
       style: {
         ...overlayProps.style,
         width: elements?.reference?.getBoundingClientRect().width
       },
-      children: children?.({
-        handleSelect
-      })
+      children: [/*#__PURE__*/jsxRuntimeExports.jsx(Space, {
+        p: 2,
+        sx: {
+          flexGrow: 0,
+          flexShrink: 0,
+          flexBasis: 'auto'
+        },
+        children: /*#__PURE__*/jsxRuntimeExports.jsx(TextInput, {
+          ref: searchInputRef,
+          leadingVisual: SvgSearch,
+          onKeyDown: e => {
+            if (e.code === 'Enter' && activeDescendantRef.current) {
+              const activeDescendantEvent = new KeyboardEvent(e.type, e.nativeEvent);
+              activeDescendantRef.current?.dispatchEvent(activeDescendantEvent);
+            }
+          },
+          ...searchInputProps
+        })
+      }), /*#__PURE__*/jsxRuntimeExports.jsx(HorizontalDivider, {}), /*#__PURE__*/jsxRuntimeExports.jsx(View, {
+        ref: listContainerRef,
+        sx: {
+          flexGrow: 1,
+          flexShrink: 1,
+          flexBasis: 'auto',
+          overflowY: 'auto'
+        },
+        children: children?.({
+          handleSelect
+        }, overlayHandler)
+      })]
     }),
     children: (popperProps, {
       openOverlay
@@ -71,13 +144,14 @@ const OverlaySelectInput = ({
       tabIndex: disabled ? -1 : 0,
       disabled: disabled,
       onClick: focusInput,
-      hasLeadingVisual: !isNullable(LeadingVisual),
+      hasLeadingVisual: hasLeadingVisual,
       validationStatus: validationStatus,
       onKeyDown: e => {
         if (['ArrowUp', 'ArrowDown'].includes(e.key)) {
           e.preventDefault();
           openOverlay();
         }
+        e.stopPropagation();
       },
       children: [/*#__PURE__*/jsxRuntimeExports.jsx(View, {
         sx: {
@@ -93,17 +167,42 @@ const OverlaySelectInput = ({
           }
         },
         children: typeof LeadingVisual !== 'string' && reactIsExports.isValidElementType(LeadingVisual) ? /*#__PURE__*/jsxRuntimeExports.jsx(LeadingVisual, {}) : LeadingVisual
-      }), /*#__PURE__*/jsxRuntimeExports.jsx(BaseInput, {
-        id: id,
-        ref: labelInputRef,
-        onChange: noop,
-        autoComplete: 'off',
-        tabIndex: -1,
+      }), /*#__PURE__*/jsxRuntimeExports.jsxs(View, {
+        sx: {
+          display: 'flex',
+          alignItems: 'center',
+          paddingTop: 3,
+          paddingRight: 10,
+          paddingBottom: 3,
+          paddingLeft: hasLeadingVisual ? 2 : 4,
+          whiteSpace: 'pre',
+          textOverflow: 'ellipsis',
+          width: '100%'
+        },
         onClick: e => {
           popperProps.onClick?.(e);
-          props.onClick?.(e);
         },
-        placeholder: placeholder
+        children: [!isNullable(renderValue(value)) ? /*#__PURE__*/jsxRuntimeExports.jsx(View, {
+          sx: {
+            flex: '0 1 auto',
+            maxWidth: '100%',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'pre',
+            overflow: 'hidden'
+          },
+          children: renderValue(value)
+        }) : null, /*#__PURE__*/jsxRuntimeExports.jsx(BaseInput, {
+          id: id,
+          ref: labelInputRef,
+          readOnly: true,
+          onChange: noop,
+          autoComplete: 'off',
+          tabIndex: -1,
+          onClick: e => {
+            props.onClick?.(e);
+          },
+          placeholder: !isNullable(renderValue(value)) ? '' : placeholder
+        })]
       }), /*#__PURE__*/jsxRuntimeExports.jsx(StyledIcon, {
         sx: {
           position: 'absolute',
@@ -120,7 +219,8 @@ const OverlaySelectInput = ({
           isFunction(ref) ? ref(e) : null;
           valueInputRef.current = e;
         },
-        type: 'hidden'
+        type: 'hidden',
+        defaultValue: value
       })]
     })
   });
@@ -142,6 +242,8 @@ const TextInputWrapper = styled.div`
   cursor: default;
   input {
     cursor: default;
+
+    flex: 1;
   }
   display: inline-flex;
   align-items: center;
@@ -223,9 +325,6 @@ const TextInputWrapper = styled.div`
 
   ${props => props.hasLeadingVisual && css`
       padding-left: ${forcePixelValue(props.theme.space[4])};
-      input {
-        padding-left: ${forcePixelValue(props.theme.space[2])};
-      }
     `}
 
   transition: color 100ms, background-color 100ms;
@@ -241,31 +340,19 @@ const UnstyledInput = styled.input`
   border-radius: inherit;
   color: inherit;
   transition: inherit;
+  width: 100%;
 
   border: 0;
+  padding: 0;
   background-color: transparent;
-  width: 100%;
   &:focus {
     outline: 0;
   }
 `;
 const BaseInput = styled(UnstyledInput)`
-  padding-top: ${({
-  theme
-}) => forcePixelValue(theme.space[3])};
-  padding-right: ${({
-  theme
-}) => forcePixelValue(theme.space[10])};
-  padding-bottom: ${({
-  theme
-}) => forcePixelValue(theme.space[3])};
-  padding-left: ${({
-  theme
-}) => forcePixelValue(theme.space[4])};
-
   white-space: pre;
   text-overflow: ellipsis;
 `;
-var OverlaySelectInput$1 = /*#__PURE__*/forwardRef(OverlaySelectInput);
+var SearchSelectInput$1 = /*#__PURE__*/forwardRef(SearchSelectInput);
 
-export { OverlaySelectInput$1 as default };
+export { SearchSelectInput$1 as default };

package/esm/core/Tab/TabItem.js

@@ -39,6 +39,7 @@ const TabItem = ({
     onClick?.(e);
   };
   return /*#__PURE__*/jsxRuntimeExports.jsx(BaseTabItem, {
+    type: 'button',
     role: 'tab',
     ref: ref,
     variant: variant,

package/esm/index.js

@@ -22,9 +22,9 @@ export { default as ItemList } from './core/ItemList/index.js';
 export { default as MotionView } from './core/MotionView/index.js';
 export { default as Overlay } from './core/Overlay/index.js';
 export { default as OverlayPopper } from './core/OverlayPopper/index.js';
-export { default as OverlaySelectInput } from './core/OverlaySelectInput/index.js';
 export { default as Pagination } from './core/Pagination/index.js';
 export { default as Pill } from './core/Pill/index.js';
+export { default as SearchSelectInput } from './core/SearchSelectInput/index.js';
 export { default as Select } from './core/Select/index.js';
 export { default as Space } from './core/Space/index.js';
 export { default as Spinner } from './core/Spinner/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamturing/react-kit",
-  "version": "2.19.14",
+  "version": "2.19.16",
   "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": "73771f9a29466d5aa4a9e075623a6543d173004c"
+  "gitHead": "882bff67f13764f7af42f5b8e39c417d344a1815"
 }