@teamturing/react-kit 2.14.1 → 2.15.1

package/esm/core/Select/index.js

@@ -0,0 +1,234 @@
+import { forwardRef, useState } from 'react';
+import SvgChevronDown from '../../packages/icons/esm/ChevronDown.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 StyledIcon from '../StyledIcon/index.js';
+import View from '../View/index.js';
+import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
+
+const Select = ({
+  children,
+  disabled,
+  validationStatus,
+  leadingVisual: LeadingVisual,
+  placeholder = '옵션 선택',
+  ...props
+}, ref) => {
+  const PLACEHOLDER_VALUE = '';
+  const selectRef = useProvidedOrCreatedRef(ref);
+  const [isValueEmpty, setIsValueEmpty] = useState(isNullable(props.value) || props.value === PLACEHOLDER_VALUE);
+  const focusSelect = () => {
+    selectRef.current?.focus();
+  };
+  return /*#__PURE__*/jsxRuntimeExports.jsxs(SelectWrapper, {
+    disabled: disabled,
+    onClick: focusSelect,
+    hasLeadingVisual: !isNullable(LeadingVisual),
+    validationStatus: validationStatus,
+    isValueEmpty: isValueEmpty,
+    children: [/*#__PURE__*/jsxRuntimeExports.jsx(View, {
+      sx: {
+        'flexShrink': 0,
+        'fontSize': 'xxs',
+        'fontWeight': 'medium',
+        'color': 'text/neutral',
+        '& > svg': {
+          display: 'block',
+          width: 20,
+          height: 20,
+          color: 'icon/neutral/bold'
+        }
+      },
+      children: typeof LeadingVisual !== 'string' && reactIsExports.isValidElementType(LeadingVisual) ? /*#__PURE__*/jsxRuntimeExports.jsx(LeadingVisual, {}) : LeadingVisual
+    }), /*#__PURE__*/jsxRuntimeExports.jsxs(BaseSelect, {
+      ref: e => {
+        isFunction(ref) ? ref(e) : null;
+        selectRef.current = e;
+      },
+      placeholder: placeholder,
+      disabled: disabled,
+      ...props,
+      onChange: e => {
+        props.onChange?.(e);
+        if (!e.defaultPrevented) {
+          if (e.target.value === PLACEHOLDER_VALUE) {
+            setIsValueEmpty(true);
+          } else {
+            setIsValueEmpty(false);
+          }
+        }
+      },
+      children: [/*#__PURE__*/jsxRuntimeExports.jsx("option", {
+        label: placeholder,
+        value: PLACEHOLDER_VALUE
+      }), children]
+    }), /*#__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 SelectWrapper = 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']};
+  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/subtle']};
+
+  /**
+   * placeholder style
+   */
+  ${({
+  theme,
+  isValueEmpty
+}) => isValueEmpty ? css`
+          color: ${theme.colors['text/neutral/subtlest']};
+        ` : null}
+
+  &: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' && 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']};
+
+      select::placeholder {
+        color: ${props.theme.colors['text/disabled']};
+      }
+
+      select {
+        cursor: not-allowed;
+      }
+    `};
+
+  ${props => props.hasLeadingVisual && css`
+      padding-left: ${forcePixelValue(props.theme.space[5])};
+      select {
+        padding-left: ${forcePixelValue(props.theme.space[3])};
+      }
+    `}
+
+  transition: background-color 100ms;
+  &:after {
+    transition: border-color 100ms;
+  }
+`;
+const UnstyledSelect = styled.select`
+  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;
+  }
+
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+`;
+const BaseSelect = styled(UnstyledSelect)`
+  padding-top: ${({
+  theme
+}) => forcePixelValue(theme.space['4'])};
+  padding-right: ${({
+  theme
+}) => forcePixelValue(theme.space['12'])};
+  padding-bottom: ${({
+  theme
+}) => forcePixelValue(theme.space['4'])};
+  padding-left: ${({
+  theme
+}) => forcePixelValue(theme.space['5'])};
+
+  white-space: pre;
+  text-overflow: ellipsis;
+`;
+const SelectOption = styled.option``;
+var index = Object.assign( /*#__PURE__*/forwardRef(Select), {
+  Option: SelectOption
+});
+
+export { index as default };

package/esm/core/TextInput/index.js

@@ -38,8 +38,8 @@ const TextInput = /*#__PURE__*/forwardRef(({
         'color': color['text/neutral'],
         '& > svg': {
           display: 'block',
-          width: 24,
-          height: 24,
+          width: 20,
+          height: 20,
           color: color['icon/neutral/bold']
         }
       },
@@ -81,7 +81,7 @@ const TextInputWrapper = styled.div`
   border-style: solid;
   border-radius: ${({
   theme
-}) => forcePixelValue(theme.radii.s)};
+}) => forcePixelValue(theme.radii.xs)};
   border-color: ${({
   theme
 }) => theme.colors['border/input']};
@@ -121,7 +121,7 @@ const TextInputWrapper = styled.div`
     border: ${forcePixelValue(2)} solid transparent;
     border-radius: ${({
   theme
-}) => forcePixelValue(theme.radii.s)};
+}) => forcePixelValue(theme.radii.xs)};
     pointer-events: none;
   }
 

package/esm/core/Textarea/index.js

@@ -33,7 +33,7 @@ const TextareaWrapper = styled.div`
   border-style: solid;
   border-radius: ${({
   theme
-}) => forcePixelValue(theme.radii.s)};
+}) => forcePixelValue(theme.radii.xs)};
   border-color: ${({
   theme
 }) => theme.colors['border/input']};
@@ -88,7 +88,7 @@ const TextareaWrapper = styled.div`
     border: ${forcePixelValue(2)} solid transparent;
     border-radius: ${({
   theme
-}) => forcePixelValue(theme.radii.s)};
+}) => forcePixelValue(theme.radii.xs)};
     pointer-events: none;
   }
 

package/esm/hook/useRelocation.js

@@ -0,0 +1,34 @@
+import { Children, isValidElement } from 'react';
+
+/**
+ * `children`의 컴포넌트들을 시각적으로 재배치하기 위한 훅입니다.
+ */
+const useRelocation = ({
+  children,
+  config
+}) => {
+  const keys = Object.keys(config);
+  const values = Object.values(config);
+  const relocatableElementsObject = {};
+  const restElements = [];
+  Children.map(children, child => {
+    if (! /*#__PURE__*/isValidElement(child)) return;
+    const index = values.findIndex(value => child.type === value);
+    const isRelocatableComponent = index !== -1;
+    const relocationKey = keys[index];
+    const isDuplicatedComponent = relocatableElementsObject[relocationKey];
+    if (!isRelocatableComponent) {
+      restElements.push(child);
+      return;
+    }
+    if (isDuplicatedComponent) {
+      return;
+    }
+    if (isRelocatableComponent) {
+      relocatableElementsObject[relocationKey] = child;
+    }
+  });
+  return [relocatableElementsObject, restElements];
+};
+
+export { useRelocation as default };

package/esm/hook/useSafeLayoutEffect.js

@@ -0,0 +1,5 @@
+import { useLayoutEffect, useEffect } from 'react';
+
+const useSafeLayoutEffect = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined' ? useLayoutEffect : useEffect;
+
+export { useSafeLayoutEffect as default };

package/esm/index.js

@@ -1,6 +1,10 @@
+export { default as Avatar } from './core/Avatar/index.js';
 export { default as Breadcrumbs } from './core/Breadcrumbs/index.js';
 export { default as Button } from './core/Button/index.js';
+export { default as Checkbox } from './core/Checkbox/index.js';
 export { default as Chip } from './core/Chip/index.js';
+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 GradientText } from './core/GradientText/index.js';
@@ -15,6 +19,7 @@ export { default as Overlay } from './core/Overlay/index.js';
 export { default as OverlayPopper } from './core/OverlayPopper/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';
 export { default as Space } from './core/Space/index.js';
 export { default as Spinner } from './core/Spinner/index.js';
 export { default as Stack } from './core/Stack/index.js';
@@ -36,7 +41,9 @@ export { default as useFocusZone } from './hook/useFocusZone.js';
 export { default as useMediaQuery } from './hook/useMediaQuery.js';
 export { default as useOutsideClick } from './hook/useOutsideClick.js';
 export { default as useProvidedOrCreatedRef } from './hook/useProvidedOrCreatedRef.js';
+export { default as useRelocation } from './hook/useRelocation.js';
 export { default as useResize } from './hook/useResize.js';
+export { default as useSafeLayoutEffect } from './hook/useSafeLayoutEffect.js';
 export { default as useToggleHandler } from './hook/useToggleHandler.js';
 export { default as theme } from './theme/index.js';
 export { lineClamp, sx, textDecoration, whiteSpace, wordBreak } from './utils/styled-system/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamturing/react-kit",
-  "version": "2.14.1",
+  "version": "2.15.1",
   "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": "60a452ea4bddbf4b7256820dd694b0479fbbad52"
+  "gitHead": "4dd8a356f2d54ce591d4f7b988f92b8098c500ef"
 }