@teamturing/react-kit 2.19.13 → 2.19.14

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

@@ -19,7 +19,9 @@ type Props = {
     placement?: Placement;
     focusZoneSettings?: Partial<FocusZoneHookSettings>;
     focusTrapSettings?: Partial<FocusTrapHookSettings>;
+    onOpen?: () => void;
+    onClose?: () => void;
 };
-declare const OverlayPopper: ({ children: propChildren, renderOverlay, placement, focusZoneSettings, focusTrapSettings, }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const OverlayPopper: ({ children: propChildren, renderOverlay, placement, focusZoneSettings, focusTrapSettings, onOpen, onClose, }: Props) => import("react/jsx-runtime").JSX.Element;
 export default OverlayPopper;
 export type { Props as OverlayPopperProps };

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

@@ -1,5 +1,9 @@
-import { ElementType, InputHTMLAttributes, ReactNode } from 'react';
-type Props = {
+import { ElementType, InputHTMLAttributes, ReactNode, Ref } from 'react';
+import { OverlayPopperProps } from '../OverlayPopper';
+type Props<T extends {
+    label: string;
+    value: string | number | readonly string[];
+}> = {
     /**
      * TODO asdf
      */
@@ -8,8 +12,19 @@ type Props = {
      * 입력 창 앞에 보여질 시각적 요소를 정의합니다. Icon, Text, Image 등이 될 수 있습니다.
      */
     leadingVisual?: ElementType | ReactNode;
-} & InputHTMLAttributes<HTMLInputElement>;
-declare const _default: import("react").ForwardRefExoticComponent<{
+    children: ({ handleSelect }: {
+        handleSelect: (item: T) => void;
+    }) => ReactNode;
+    onChange?: (item: T) => void;
+} & Pick<OverlayPopperProps, 'focusTrapSettings' | 'focusZoneSettings' | 'onClose' | 'onOpen'> & Pick<InputHTMLAttributes<HTMLInputElement>, 'id' | 'disabled' | 'onClick' | 'placeholder'>;
+declare const OverlaySelectInput: <T extends {
+    label: string;
+    value: string | number | readonly string[];
+}>({ validationStatus, leadingVisual: LeadingVisual, children, onChange, focusTrapSettings, focusZoneSettings, onOpen, onClose, ...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: {
     /**
      * TODO asdf
      */
@@ -18,8 +33,12 @@ declare const _default: import("react").ForwardRefExoticComponent<{
      * 입력 창 앞에 보여질 시각적 요소를 정의합니다. 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>>;
+    children: ({ handleSelect }: {
+        handleSelect: (item: T) => void;
+    }) => ReactNode;
+    onChange?: ((item: T) => void) | undefined;
+} & Pick<OverlayPopperProps, "onClose" | "focusZoneSettings" | "focusTrapSettings" | "onOpen"> & Pick<InputHTMLAttributes<HTMLInputElement>, "disabled" | "placeholder" | "id" | "onClick"> & {
+    ref?: Ref<HTMLInputElement> | undefined;
+}) => ReturnType<typeof OverlaySelectInput>;
 export default _default;
 export type { Props as OverlaySelectInputProps };

package/dist/index.js

@@ -20840,7 +20840,9 @@ const OverlayPopper = ({
   renderOverlay,
   placement = 'bottom-start',
   focusZoneSettings,
-  focusTrapSettings
+  focusTrapSettings,
+  onOpen,
+  onClose
 }) => {
   const {
     refs,
@@ -20861,11 +20863,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
@@ -20875,7 +20889,7 @@ const OverlayPopper = ({
     ...defaultPopperProps
   }, {
     isOpen,
-    openOverlay
+    openOverlay: handleOverlayOpen
   }) : React.Children.map(propChildren, child => /*#__PURE__*/React.cloneElement(child, {
     ...defaultPopperProps
   }));
@@ -20901,7 +20915,7 @@ const OverlayPopper = ({
       onDismiss: handleDismiss
     }, {
       isOpen,
-      closeOverlay
+      closeOverlay: handleOverlayClose
     }, {
       elements
     })]
@@ -20912,16 +20926,41 @@ const OverlaySelectInput = ({
   validationStatus,
   leadingVisual: LeadingVisual,
   children,
+  onChange,
+  focusTrapSettings,
+  focusZoneSettings,
+  onOpen,
+  onClose,
   ...props
 }, ref) => {
-  const inputRef = useProvidedOrCreatedRef(ref);
+  const valueInputRef = useProvidedOrCreatedRef(ref);
+  const labelInputRef = React.useRef(null);
   const focusInput = () => {
-    inputRef.current?.focus();
+    labelInputRef.current?.focus();
   };
   const {
-    disabled
+    id,
+    disabled,
+    placeholder
   } = props;
+  const handleSelect = item => {
+    if (labelInputRef.current && valueInputRef.current) {
+      labelInputRef.current.setAttribute('value', item.label);
+
+      /**
+       * ! valueInput의 native onChange를 trigger하려고 했으나 작동하지 않음.
+       * ! 일단 Custom onChange를 만들어서 해결.
+       */
+      const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value')?.set;
+      nativeInputValueSetter?.call(valueInputRef.current, item.value.toString());
+      onChange?.(item);
+    }
+  };
   return /*#__PURE__*/jsxRuntimeExports.jsx(OverlayPopper, {
+    focusTrapSettings: focusTrapSettings,
+    focusZoneSettings: focusZoneSettings,
+    onOpen: onOpen,
+    onClose: onClose,
     renderOverlay: (overlayProps, _, {
       elements
     }) => /*#__PURE__*/jsxRuntimeExports.jsx(Overlay$1, {
@@ -20930,7 +20969,9 @@ const OverlaySelectInput = ({
         ...overlayProps.style,
         width: elements?.reference?.getBoundingClientRect().width
       },
-      children: children
+      children: children?.({
+        handleSelect
+      })
     }),
     children: (popperProps, {
       openOverlay
@@ -20962,19 +21003,16 @@ const OverlaySelectInput = ({
         },
         children: typeof LeadingVisual !== 'string' && reactIsExports.isValidElementType(LeadingVisual) ? /*#__PURE__*/jsxRuntimeExports.jsx(LeadingVisual, {}) : LeadingVisual
       }), /*#__PURE__*/jsxRuntimeExports.jsx(BaseInput$1, {
-        ref: e => {
-          isFunction(ref) ? ref(e) : null;
-          inputRef.current = e;
-        },
-        value: '',
+        id: id,
+        ref: labelInputRef,
         onChange: noop$2,
-        ...props,
         autoComplete: 'off',
         tabIndex: -1,
         onClick: e => {
           popperProps.onClick?.(e);
           props.onClick?.(e);
-        }
+        },
+        placeholder: placeholder
       }), /*#__PURE__*/jsxRuntimeExports.jsx(StyledIcon, {
         sx: {
           position: 'absolute',
@@ -20986,6 +21024,12 @@ const OverlaySelectInput = ({
         icon: SvgChevronDown,
         color: disabled ? 'icon/disabled' : 'icon/neutral/bolder',
         size: 16
+      }), /*#__PURE__*/jsxRuntimeExports.jsx(BaseInput$1, {
+        ref: e => {
+          isFunction(ref) ? ref(e) : null;
+          valueInputRef.current = e;
+        },
+        type: 'hidden'
       })]
     })
   });

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/OverlaySelectInput/index.js

@@ -1,4 +1,4 @@
-import { forwardRef } from 'react';
+import { forwardRef, useRef } from 'react';
 import SvgChevronDown from '../../packages/icons/esm/ChevronDown.js';
 import { forcePixelValue } from '../../packages/utils/esm/forcePixelValue.js';
 import { isFunction } from '../../packages/utils/esm/isFunction.js';
@@ -17,16 +17,41 @@ const OverlaySelectInput = ({
   validationStatus,
   leadingVisual: LeadingVisual,
   children,
+  onChange,
+  focusTrapSettings,
+  focusZoneSettings,
+  onOpen,
+  onClose,
   ...props
 }, ref) => {
-  const inputRef = useProvidedOrCreatedRef(ref);
+  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) {
+      labelInputRef.current.setAttribute('value', item.label);
+
+      /**
+       * ! valueInput의 native onChange를 trigger하려고 했으나 작동하지 않음.
+       * ! 일단 Custom onChange를 만들어서 해결.
+       */
+      const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value')?.set;
+      nativeInputValueSetter?.call(valueInputRef.current, item.value.toString());
+      onChange?.(item);
+    }
+  };
   return /*#__PURE__*/jsxRuntimeExports.jsx(OverlayPopper, {
+    focusTrapSettings: focusTrapSettings,
+    focusZoneSettings: focusZoneSettings,
+    onOpen: onOpen,
+    onClose: onClose,
     renderOverlay: (overlayProps, _, {
       elements
     }) => /*#__PURE__*/jsxRuntimeExports.jsx(Overlay, {
@@ -35,7 +60,9 @@ const OverlaySelectInput = ({
         ...overlayProps.style,
         width: elements?.reference?.getBoundingClientRect().width
       },
-      children: children
+      children: children?.({
+        handleSelect
+      })
     }),
     children: (popperProps, {
       openOverlay
@@ -67,19 +94,16 @@ 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;
-        },
-        value: '',
+        id: id,
+        ref: labelInputRef,
         onChange: noop,
-        ...props,
         autoComplete: 'off',
         tabIndex: -1,
         onClick: e => {
           popperProps.onClick?.(e);
           props.onClick?.(e);
-        }
+        },
+        placeholder: placeholder
       }), /*#__PURE__*/jsxRuntimeExports.jsx(StyledIcon, {
         sx: {
           position: 'absolute',
@@ -91,6 +115,12 @@ 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'
       })]
     })
   });

package/package.json

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