@teamturing/react-kit 2.17.0 → 2.18.0

package/esm/core/OverlayPopper/index.js

@@ -5,7 +5,7 @@ import { Children, cloneElement } from 'react';
 import useFocusTrap from '../../hook/useFocusTrap.js';
 import useFocusZone from '../../hook/useFocusZone.js';
 import useToggleHandler from '../../hook/useToggleHandler.js';
-import Overlay from '../Overlay/index.js';
+import { isFunction } from '../../utils/isFunction.js';
 import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
 import { autoUpdate } from '../../node_modules/@floating-ui/dom/dist/floating-ui.dom.js';
 import { offset, flip, shift } from '../../node_modules/@floating-ui/core/dist/floating-ui.core.js';
@@ -13,13 +13,13 @@ import { offset, flip, shift } from '../../node_modules/@floating-ui/core/dist/f
 const OverlayPopper = ({
   children: propChildren,
   renderOverlay,
-  overlayProps,
   placement = 'bottom-start',
   focusZoneSettings,
   focusTrapSettings
 }) => {
   const {
     refs,
+    elements,
     floatingStyles,
     isPositioned
   } = useFloating({
@@ -31,20 +31,28 @@ const OverlayPopper = ({
   const {
     state: isOpen,
     toggle: toggleOverlay,
+    on: openOverlay,
     off: closeOverlay
   } = useToggleHandler({
     initialState: false
   });
   const handleDismiss = () => {
-    overlayProps?.onDismiss?.();
     closeOverlay();
   };
-  const children = Children.map(propChildren, child => /*#__PURE__*/cloneElement(child, {
+  const defaultPopperProps = {
     onClick: toggleOverlay,
     tabIndex: 0,
     ...{
       ref: refs.setReference
     }
+  };
+  const children = isFunction(propChildren) ? propChildren({
+    ...defaultPopperProps
+  }, {
+    isOpen,
+    openOverlay
+  }) : Children.map(propChildren, child => /*#__PURE__*/cloneElement(child, {
+    ...defaultPopperProps
   }));
   useFocusZone({
     containerRef: refs.floating,
@@ -57,18 +65,20 @@ const OverlayPopper = ({
     ...focusTrapSettings
   });
   return /*#__PURE__*/jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, {
-    children: [children, /*#__PURE__*/jsxRuntimeExports.jsx(Overlay, {
+    children: [children, renderOverlay({
       ref: refs.setFloating,
-      isOpen: isOpen,
+      isOpen,
       dismissFocusRef: refs.reference,
       ignoreOutsideClickRefs: [refs.reference],
-      ...overlayProps,
-      style: floatingStyles,
-      onDismiss: handleDismiss,
-      children: renderOverlay({
-        isOpen,
-        closeOverlay
-      })
+      style: {
+        ...floatingStyles
+      },
+      onDismiss: handleDismiss
+    }, {
+      isOpen,
+      closeOverlay
+    }, {
+      elements
     })]
   });
 };

package/esm/core/OverlaySelectInput/index.js

@@ -0,0 +1,237 @@
+import { forwardRef } from 'react';
+import SvgChevronDown from '../../packages/icons/esm/ChevronDown.js';
+import { noop } from '../../packages/utils/esm/noop.js';
+import { r as reactIsExports } from '../../node_modules/react-is/index.js';
+import styled, { css } from 'styled-components';
+import useProvidedOrCreatedRef from '../../hook/useProvidedOrCreatedRef.js';
+import { forcePixelValue } from '../../utils/forcePixelValue.js';
+import { isFunction } from '../../utils/isFunction.js';
+import { isNullable } from '../../utils/isNullable.js';
+import Overlay from '../Overlay/index.js';
+import OverlayPopper from '../OverlayPopper/index.js';
+import StyledIcon from '../StyledIcon/index.js';
+import View from '../View/index.js';
+import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
+
+const OverlaySelectInput = ({
+  validationStatus,
+  leadingVisual: LeadingVisual,
+  children,
+  ...props
+}, ref) => {
+  const inputRef = useProvidedOrCreatedRef(ref);
+  const focusInput = () => {
+    inputRef.current?.focus();
+  };
+  const {
+    disabled
+  } = props;
+  return /*#__PURE__*/jsxRuntimeExports.jsx(OverlayPopper, {
+    renderOverlay: (overlayProps, _, {
+      elements
+    }) => /*#__PURE__*/jsxRuntimeExports.jsx(Overlay, {
+      ...overlayProps,
+      style: {
+        ...overlayProps.style,
+        width: elements?.reference?.getBoundingClientRect().width
+      },
+      children: children
+    }),
+    children: (popperProps, {
+      openOverlay
+    }) => /*#__PURE__*/jsxRuntimeExports.jsxs(TextInputWrapper, {
+      ...popperProps,
+      tabIndex: disabled ? -1 : 0,
+      disabled: disabled,
+      onClick: focusInput,
+      hasLeadingVisual: !isNullable(LeadingVisual),
+      validationStatus: validationStatus,
+      onKeyDown: e => {
+        if (['ArrowUp', 'ArrowDown'].includes(e.key)) {
+          e.preventDefault();
+          openOverlay();
+        }
+      },
+      children: [/*#__PURE__*/jsxRuntimeExports.jsx(View, {
+        sx: {
+          'flexShrink': 0,
+          'fontSize': 'xxs',
+          'fontWeight': 'medium',
+          'color': 'text/neutral',
+          '& > svg': {
+            display: 'block',
+            width: 16,
+            height: 16,
+            color: 'icon/neutral/bold'
+          }
+        },
+        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: '',
+        onChange: noop,
+        ...props,
+        tabIndex: -1,
+        onClick: e => {
+          popperProps.onClick?.(e);
+          props.onClick?.(e);
+        }
+      }), /*#__PURE__*/jsxRuntimeExports.jsx(StyledIcon, {
+        sx: {
+          position: 'absolute',
+          top: '50%',
+          transform: 'translateY(-50%)',
+          right: 5,
+          pointerEvents: 'none'
+        },
+        icon: SvgChevronDown,
+        color: disabled ? 'icon/disabled' : 'icon/neutral/bolder',
+        size: 16
+      })]
+    })
+  });
+};
+const TextInputWrapper = styled.div`
+  position: relative;
+  width: ${forcePixelValue('100%')};
+  border-width: ${forcePixelValue(1)};
+  border-style: solid;
+  border-radius: ${({
+  theme
+}) => forcePixelValue(theme.radii.xs)};
+  border-color: ${({
+  theme
+}) => theme.colors['border/input']};
+  background-color: ${({
+  theme
+}) => theme.colors['bg/input']};
+  cursor: default;
+  input {
+    cursor: default;
+  }
+  display: inline-flex;
+  align-items: center;
+
+  font-size: ${({
+  theme
+}) => forcePixelValue(theme.fontSizes.xs)};
+  font-weight: ${({
+  theme
+}) => theme.fontWeights.medium};
+  line-height: ${({
+  theme
+}) => theme.lineHeights[2]};
+  color: ${({
+  theme
+}) => theme.colors['text/neutral']};
+  input::placeholder {
+    color: ${({
+  theme
+}) => theme.colors['text/neutral/subtlest']};
+  }
+
+  &:after {
+    content: '';
+    position: absolute;
+    top: ${forcePixelValue(-1)};
+    right: ${forcePixelValue(-1)};
+    bottom: ${forcePixelValue(-1)};
+    left: ${forcePixelValue(-1)};
+
+    border: ${forcePixelValue(2)} solid transparent;
+    border-radius: ${({
+  theme
+}) => forcePixelValue(theme.radii.xs)};
+    pointer-events: none;
+  }
+
+  ${props => props.validationStatus !== 'error' && !props.disabled && css`
+      &:hover:not(:focus-within) {
+        &:after {
+          border-color: ${({
+  theme
+}) => theme.colors['border/hovered']};
+        }
+      }
+    `}
+
+  ${props => props.validationStatus === 'error' && css`
+      &:after {
+        border-color: ${({
+  theme
+}) => theme.colors['border/danger']};
+      }
+    `}
+
+  ${props => props.validationStatus !== 'error' && !props.disabled && css`
+      &:focus-within {
+        &:after {
+          border-color: ${({
+  theme
+}) => theme.colors['border/focused']};
+        }
+      }
+    `}
+
+  ${props => props.disabled && css`
+      border-color: ${props.theme.colors['border/input']};
+      background-color: ${props.theme.colors['bg/disabled']};
+      color: ${props.theme.colors['text/disabled']};
+
+      input::placeholder {
+        color: ${props.theme.colors['text/disabled']};
+      }
+
+      input {
+        cursor: not-allowed;
+      }
+    `};
+
+  ${props => props.hasLeadingVisual && css`
+      padding-left: ${forcePixelValue(props.theme.space[5])};
+      input {
+        padding-left: ${forcePixelValue(props.theme.space[2])};
+      }
+    `}
+
+  transition: color 100ms, background-color 100ms;
+  &:after {
+    transition: border-color 100ms;
+  }
+`;
+const UnstyledInput = styled.input`
+  font-size: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+  font-family: inherit;
+  border-radius: inherit;
+  color: inherit;
+  transition: inherit;
+
+  border: 0;
+  background-color: transparent;
+  width: 100%;
+  &:focus {
+    outline: 0;
+  }
+`;
+const BaseInput = styled(UnstyledInput)`
+  padding-top: ${({
+  theme
+}) => forcePixelValue(theme.space['4'])};
+  padding-right: ${({
+  theme
+}) => forcePixelValue(theme.space['5'])};
+  padding-bottom: ${({
+  theme
+}) => forcePixelValue(theme.space['4'])};
+  padding-left: ${({
+  theme
+}) => forcePixelValue(theme.space['5'])};
+`;
+var index = /*#__PURE__*/forwardRef(OverlaySelectInput);
+
+export { index as default };

package/esm/core/Select/SelectOption.js

@@ -0,0 +1,17 @@
+import styled from 'styled-components';
+import { isNullable } from '../../utils/isNullable.js';
+import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
+
+const SelectOption = ({
+  children: propChildren,
+  ...props
+}) => {
+  const children = isNullable(propChildren) ? props.label : propChildren;
+  return /*#__PURE__*/jsxRuntimeExports.jsx(BaseSelectOption, {
+    ...props,
+    children: children
+  });
+};
+const BaseSelectOption = styled.option``;
+
+export { SelectOption as default };

package/esm/core/Select/index.js

@@ -8,6 +8,7 @@ import { isFunction } from '../../utils/isFunction.js';
 import { isNullable } from '../../utils/isNullable.js';
 import StyledIcon from '../StyledIcon/index.js';
 import View from '../View/index.js';
+import SelectOption from './SelectOption.js';
 import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
 
 const Select = ({
@@ -226,7 +227,6 @@ const BaseSelect = styled(UnstyledSelect)`
   white-space: pre;
   text-overflow: ellipsis;
 `;
-const SelectOption = styled.option``;
 var index = Object.assign( /*#__PURE__*/forwardRef(Select), {
   Option: SelectOption
 });

package/esm/index.js

@@ -8,6 +8,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 DialogHandler } from './core/DialogHandler/index.js';
+export { default as EmptyState } from './core/EmptyState/index.js';
 export { default as GradientText } from './core/GradientText/index.js';
 export { default as Grid } from './core/Grid/index.js';
 export { default as HorizontalDivider } from './core/HorizontalDivider/index.js';
@@ -18,6 +19,7 @@ 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 Select } from './core/Select/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamturing/react-kit",
-  "version": "2.17.0",
+  "version": "2.18.0",
   "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": "ca31c7add2913812b086f4862e431a3656c3f4f9"
+  "gitHead": "7e5d700d947efa6123f50698bdcef68160fb21e3"
 }