@teamturing/react-kit 2.19.13 → 2.19.15

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

@@ -15,7 +15,9 @@ const OverlayPopper = ({
   renderOverlay,
   placement = 'bottom-start',
   focusZoneSettings,
-  focusTrapSettings
+  focusTrapSettings,
+  onOpen,
+  onClose
 }) => {
   const {
     refs,
@@ -36,11 +38,23 @@ const OverlayPopper = ({
   } = useToggleHandler({
     initialState: false
   });
-  const handleDismiss = () => {
+  const handleOverlayToggle = () => {
+    if (!isOpen) onOpen?.();else onClose?.();
+    toggleOverlay();
+  };
+  const handleOverlayOpen = () => {
+    onOpen?.();
+    openOverlay();
+  };
+  const handleOverlayClose = () => {
+    onClose?.();
     closeOverlay();
   };
+  const handleDismiss = () => {
+    handleOverlayClose();
+  };
   const defaultPopperProps = {
-    onClick: toggleOverlay,
+    onClick: handleOverlayToggle,
     tabIndex: 0,
     ...{
       ref: refs.setReference
@@ -50,7 +64,7 @@ const OverlayPopper = ({
     ...defaultPopperProps
   }, {
     isOpen,
-    openOverlay
+    openOverlay: handleOverlayOpen
   }) : Children.map(propChildren, child => /*#__PURE__*/cloneElement(child, {
     ...defaultPopperProps
   }));
@@ -76,7 +90,7 @@ const OverlayPopper = ({
       onDismiss: handleDismiss
     }, {
       isOpen,
-      closeOverlay
+      closeOverlay: handleOverlayClose
     }, {
       elements
     })]

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,41 +1,141 @@
-import { forwardRef } from 'react';
+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,
+  onChange,
+  focusTrapSettings,
+  focusZoneSettings,
+  onOpen,
+  onClose,
+  searchInputProps,
+  value,
+  renderValue = value => value?.toString(),
   ...props
 }, ref) => {
-  const inputRef = useProvidedOrCreatedRef(ref);
+  const theme = useTheme();
+  const hasLeadingVisual = !isNullable(LeadingVisual);
+  const valueInputRef = useProvidedOrCreatedRef(ref);
+  const labelInputRef = useRef(null);
   const focusInput = () => {
-    inputRef.current?.focus();
+    labelInputRef.current?.focus();
   };
   const {
-    disabled
+    id,
+    disabled,
+    placeholder
   } = props;
+  const handleSelect = item => {
+    if (labelInputRef.current && valueInputRef.current) {
+      /**
+       * ! valueInput의 native onChange를 trigger하려고 했으나 작동하지 않음.
+       * ! 일단 Custom onChange를 만들어서 해결.
+       */
+      const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value')?.set;
+      nativeInputValueSetter?.call(valueInputRef.current, item.value.toString());
+      onChange?.(item);
+    }
+  };
+  const listContainerRef = useRef(null);
+  const searchInputRef = useRef(null);
+  const activeDescendantRef = useRef();
   return /*#__PURE__*/jsxRuntimeExports.jsx(OverlayPopper, {
-    renderOverlay: (overlayProps, _, {
+    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, 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
+      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
@@ -44,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: {
@@ -66,20 +167,42 @@ const OverlaySelectInput = ({
           }
         },
         children: typeof LeadingVisual !== 'string' && reactIsExports.isValidElementType(LeadingVisual) ? /*#__PURE__*/jsxRuntimeExports.jsx(LeadingVisual, {}) : LeadingVisual
-      }), /*#__PURE__*/jsxRuntimeExports.jsx(BaseInput, {
-        ref: e => {
-          isFunction(ref) ? ref(e) : null;
-          inputRef.current = e;
+      }), /*#__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%'
         },
-        value: '',
-        onChange: noop,
-        ...props,
-        autoComplete: 'off',
-        tabIndex: -1,
         onClick: e => {
           popperProps.onClick?.(e);
-          props.onClick?.(e);
-        }
+        },
+        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',
@@ -91,6 +214,13 @@ const OverlaySelectInput = ({
         icon: SvgChevronDown,
         color: disabled ? 'icon/disabled' : 'icon/neutral/bolder',
         size: 16
+      }), /*#__PURE__*/jsxRuntimeExports.jsx(BaseInput, {
+        ref: e => {
+          isFunction(ref) ? ref(e) : null;
+          valueInputRef.current = e;
+        },
+        type: 'hidden',
+        defaultValue: value
       })]
     })
   });
@@ -112,6 +242,8 @@ const TextInputWrapper = styled.div`
   cursor: default;
   input {
     cursor: default;
+
+    flex: 1;
   }
   display: inline-flex;
   align-items: center;
@@ -193,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;
@@ -211,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/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.13",
+  "version": "2.19.15",
   "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": "0f7b13b7bf46b81369e159ad9e89aa7f17ddc7c0"
+  "gitHead": "ee34d126fa668d99e7cf21ed73b8a38f32d77add"
 }

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

@@ -1,25 +0,0 @@
-import { ElementType, InputHTMLAttributes, ReactNode } from 'react';
-type Props = {
-    /**
-     * TODO asdf
-     */
-    validationStatus?: 'error' | 'success' | undefined;
-    /**
-     * 입력 창 앞에 보여질 시각적 요소를 정의합니다. Icon, Text, Image 등이 될 수 있습니다.
-     */
-    leadingVisual?: ElementType | ReactNode;
-} & InputHTMLAttributes<HTMLInputElement>;
-declare const _default: import("react").ForwardRefExoticComponent<{
-    /**
-     * TODO asdf
-     */
-    validationStatus?: "error" | "success" | undefined;
-    /**
-     * 입력 창 앞에 보여질 시각적 요소를 정의합니다. 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;
-} & InputHTMLAttributes<HTMLInputElement> & {
-    children?: ReactNode;
-} & import("react").RefAttributes<HTMLInputElement>>;
-export default _default;
-export type { Props as OverlaySelectInputProps };