@teamturing/react-kit 2.19.12 → 2.19.14

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

@@ -0,0 +1,9 @@
+import { PropsWithChildren } from 'react';
+import { SxProp } from '../../utils/styled-system';
+type FlashVariantType = 'danger';
+type Props = {
+    variant?: FlashVariantType;
+} & SxProp;
+declare const Flash: ({ variant, children, ...props }: PropsWithChildren<Props>) => import("react/jsx-runtime").JSX.Element;
+export default Flash;
+export type { Props as FlashProps };

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.d.ts

@@ -27,6 +27,8 @@ export { default as Dialog } from './core/Dialog';
 export type { DialogProps, UnstyledDialogHeaderProps, UnstyledDialogBodyProps, UnstyledDialogFooterProps, DialogHeaderProps, DialogHeaderTitleProps, DialogHeaderSubtitleProps, DialogBodyProps, DialogFooterProps, } from './core/Dialog';
 export { default as EmptyState } from './core/EmptyState';
 export type { EmptyStateProps } from './core/EmptyState';
+export { default as Flash } from './core/Flash';
+export type { FlashProps } from './core/Flash';
 export { default as FormControl } from './core/FormControl';
 export type { FormControlProps, FormControlFieldProps, FormControlCaptionProps, FormControlErrorMessageProps, FormControlLabelProps, FormControlSuccessMessageProps, } from './core/FormControl';
 export { default as GradientText } from './core/GradientText';

package/dist/index.js

@@ -19102,6 +19102,53 @@ const BaseEmptyState = styled__default.default.div`
   ${sx}
 `;
 
+const Flash = ({
+  variant = 'danger',
+  children,
+  ...props
+}) => {
+  return /*#__PURE__*/jsxRuntimeExports.jsxs(BaseFlash, {
+    variant: variant,
+    ...props,
+    children: [variant === 'danger' ? /*#__PURE__*/jsxRuntimeExports.jsx(SvgWarning, {}) : null, children]
+  });
+};
+const BaseFlash = styled__default.default.div`
+  border-radius: ${({
+  theme
+}) => forcePixelValue(theme.radii.xs)};
+  & > svg {
+    min-width: ${forcePixelValue(16)};
+    height: ${forcePixelValue(16)};
+    margin-right: ${({
+  theme
+}) => forcePixelValue(theme.space[2])};
+  }
+  word-break: keep-all;
+
+  ${variant({
+  prop: 'variant',
+  variants: {
+    danger: {
+      'display': 'flex',
+      'flexDirection': 'row',
+      'alignItems': 'center',
+      'padding': 4,
+      'fontSize': 'xs',
+      'fontWeight': 'medium',
+      'lineHeight': 2,
+      'color': 'text/neutral',
+      'backgroundColor': 'bg/danger',
+      '& > svg': {
+        color: 'icon/danger'
+      }
+    }
+  }
+})}
+
+  ${sx}
+`;
+
 const Overlay = ({
   children,
   isOpen,
@@ -20793,7 +20840,9 @@ const OverlayPopper = ({
   renderOverlay,
   placement = 'bottom-start',
   focusZoneSettings,
-  focusTrapSettings
+  focusTrapSettings,
+  onOpen,
+  onClose
 }) => {
   const {
     refs,
@@ -20814,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
@@ -20828,7 +20889,7 @@ const OverlayPopper = ({
     ...defaultPopperProps
   }, {
     isOpen,
-    openOverlay
+    openOverlay: handleOverlayOpen
   }) : React.Children.map(propChildren, child => /*#__PURE__*/React.cloneElement(child, {
     ...defaultPopperProps
   }));
@@ -20854,7 +20915,7 @@ const OverlayPopper = ({
       onDismiss: handleDismiss
     }, {
       isOpen,
-      closeOverlay
+      closeOverlay: handleOverlayClose
     }, {
       elements
     })]
@@ -20865,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, {
@@ -20883,7 +20969,9 @@ const OverlaySelectInput = ({
         ...overlayProps.style,
         width: elements?.reference?.getBoundingClientRect().width
       },
-      children: children
+      children: children?.({
+        handleSelect
+      })
     }),
     children: (popperProps, {
       openOverlay
@@ -20915,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',
@@ -20939,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'
       })]
     })
   });
@@ -24134,6 +24225,7 @@ exports.DescriptionList = DescriptionList;
 exports.Dialog = index$6;
 exports.EmptyState = EmptyState;
 exports.EnigmaUI = index;
+exports.Flash = Flash;
 exports.FormControl = index$4;
 exports.GradientText = GradientText;
 exports.Grid = Grid$1;

package/esm/core/Flash/index.js

@@ -0,0 +1,57 @@
+import 'react';
+import SvgWarning from '../../packages/icons/esm/Warning.js';
+import { forcePixelValue } from '../../packages/utils/esm/forcePixelValue.js';
+import styled from 'styled-components';
+import '../../node_modules/styled-system/dist/index.esm.js';
+import { sx } from '../../utils/styled-system/index.js';
+import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
+import { variant } from '../../node_modules/@styled-system/variant/dist/index.esm.js';
+
+const Flash = ({
+  variant = 'danger',
+  children,
+  ...props
+}) => {
+  return /*#__PURE__*/jsxRuntimeExports.jsxs(BaseFlash, {
+    variant: variant,
+    ...props,
+    children: [variant === 'danger' ? /*#__PURE__*/jsxRuntimeExports.jsx(SvgWarning, {}) : null, children]
+  });
+};
+const BaseFlash = styled.div`
+  border-radius: ${({
+  theme
+}) => forcePixelValue(theme.radii.xs)};
+  & > svg {
+    min-width: ${forcePixelValue(16)};
+    height: ${forcePixelValue(16)};
+    margin-right: ${({
+  theme
+}) => forcePixelValue(theme.space[2])};
+  }
+  word-break: keep-all;
+
+  ${variant({
+  prop: 'variant',
+  variants: {
+    danger: {
+      'display': 'flex',
+      'flexDirection': 'row',
+      'alignItems': 'center',
+      'padding': 4,
+      'fontSize': 'xs',
+      'fontWeight': 'medium',
+      'lineHeight': 2,
+      'color': 'text/neutral',
+      'backgroundColor': 'bg/danger',
+      '& > svg': {
+        color: 'icon/danger'
+      }
+    }
+  }
+})}
+
+  ${sx}
+`;
+
+export { Flash as default };

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

@@ -10,6 +10,7 @@ export { default as Datagrid } from './core/Datagrid/index.js';
 export { default as DescriptionList } from './core/DescriptionList/index.js';
 export { default as Dialog } from './core/Dialog/index.js';
 export { default as EmptyState } from './core/EmptyState/index.js';
+export { default as Flash } from './core/Flash/index.js';
 export { default as FormControl } from './core/FormControl/index.js';
 export { default as GradientText } from './core/GradientText/index.js';
 export { default as Grid } from './core/Grid/index.js';

package/package.json

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