@teamturing/react-kit 2.15.1 → 2.16.1

package/esm/core/ActionList/ActionListItem.js

@@ -0,0 +1,292 @@
+import { useContext, useCallback } from 'react';
+import SvgCheck from '../../packages/icons/esm/Check.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 '../../node_modules/styled-system/dist/index.esm.js';
+import { forcePixelValue } from '../../utils/forcePixelValue.js';
+import { isNullable } from '../../utils/isNullable.js';
+import { sx } from '../../utils/styled-system/index.js';
+import Grid from '../Grid/index.js';
+import StyledIcon from '../StyledIcon/index.js';
+import Text from '../Text/index.js';
+import View from '../View/index.js';
+import { ActionListContext } from './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 ActionListItem = ({
+  variant = 'neutral',
+  leadingVisual: LeadingVisual,
+  trailingVisual: TrailingVisual,
+  description,
+  descriptionLayout = 'block',
+  disabled = false,
+  selected = false,
+  onSelect: propOnSelect,
+  children,
+  sx
+}) => {
+  const {
+    selectionVariant
+  } = useContext(ActionListContext);
+  if (!selectionVariant && selected) {
+    throw new Error('To use selected props in ActionList.Item, ActionList selectionVariant props should be defined.');
+  }
+  const handleSelect = useCallback(event => {
+    propOnSelect?.(event);
+  }, [propOnSelect]);
+  const handleClick = useCallback(event => {
+    if (disabled) return;
+    handleSelect(event);
+  }, [handleSelect, disabled]);
+  const handleKeyDown = useCallback(event => {
+    if (disabled) return;
+    if ([' ', 'Enter'].includes(event.key)) {
+      handleSelect(event);
+    }
+  }, [handleSelect, disabled]);
+  return /*#__PURE__*/jsxRuntimeExports.jsxs(BaseActionListItem, {
+    variant: variant,
+    ...(disabled ? {
+      disabled
+    } : {
+      tabIndex: 0
+    }),
+    sx: sx,
+    onClick: handleClick,
+    onKeyDown: handleKeyDown,
+    children: [!isNullable(selectionVariant) ? /*#__PURE__*/jsxRuntimeExports.jsx(View, {
+      display: 'inline-flex',
+      minWidth: 20,
+      sx: {
+        'mr': 2,
+        '& svg': {
+          color: 'icon/selected/violet'
+        }
+      },
+      children: selectionVariant === 'single' ? selected ? /*#__PURE__*/jsxRuntimeExports.jsx(StyledIcon, {
+        icon: SvgCheck,
+        size: 20
+      }) : null : selectionVariant === 'multiple' ? /*#__PURE__*/jsxRuntimeExports.jsx(FakeCheckbox, {
+        "aria-checked": selected,
+        checked: selected,
+        onChange: noop,
+        "aria-disabled": disabled,
+        disabled: disabled
+      }) : null
+    }) : null, /*#__PURE__*/jsxRuntimeExports.jsx(VisualWrapper, {
+      display: 'inline-flex',
+      flexShrink: 0,
+      sx: {
+        mr: LeadingVisual ? 2 : 0
+      },
+      variant: variant,
+      children: typeof LeadingVisual !== 'string' && reactIsExports.isValidElementType(LeadingVisual) ? /*#__PURE__*/jsxRuntimeExports.jsx(LeadingVisual, {}) : LeadingVisual
+    }), /*#__PURE__*/jsxRuntimeExports.jsx(View, {
+      flex: 1,
+      children: /*#__PURE__*/jsxRuntimeExports.jsxs(Grid, {
+        gapX: 2,
+        gapY: 0.5,
+        wrap: true,
+        alignItems: 'flex-end',
+        children: [/*#__PURE__*/jsxRuntimeExports.jsx(Grid.Unit, {
+          size: descriptionLayout === 'inline' ? 'min' : 1,
+          sx: {
+            fontWeight: description && descriptionLayout === 'block' ? 'bold' : 'medium'
+          },
+          children: children
+        }), /*#__PURE__*/jsxRuntimeExports.jsx(Grid.Unit, {
+          size: descriptionLayout === 'inline' ? 'max' : 1,
+          children: /*#__PURE__*/jsxRuntimeExports.jsx(Text, {
+            typography: 'xxs/regular',
+            color: disabled ? 'text/disabled' : 'text/neutral/subtler',
+            children: description
+          })
+        })]
+      })
+    }), /*#__PURE__*/jsxRuntimeExports.jsx(VisualWrapper, {
+      display: 'inline-flex',
+      flexShrink: 0,
+      sx: {
+        ml: TrailingVisual ? 2 : 0
+      },
+      variant: variant,
+      children: typeof TrailingVisual !== 'string' && reactIsExports.isValidElementType(TrailingVisual) ? /*#__PURE__*/jsxRuntimeExports.jsx(TrailingVisual, {}) : TrailingVisual
+    })]
+  });
+};
+const VisualWrapper = styled(View)`
+  ${variant({
+  prop: 'variant',
+  variants: {
+    neutral: {
+      'color': 'text/neutral',
+      '& svg': {
+        color: 'icon/neutral'
+      }
+    },
+    danger: {
+      'color': 'text/danger',
+      '& svg': {
+        color: 'icon/danger'
+      }
+    }
+  }
+})}
+`;
+const BaseActionListItem = styled.li`
+  display: flex;
+  align-items: flex-start;
+
+  font-size: ${({
+  theme
+}) => forcePixelValue(theme.fontSizes.xs)};
+  font-weight: ${({
+  theme
+}) => theme.fontWeights.medium};
+  line-height: ${({
+  theme
+}) => theme.lineHeights[2]};
+
+  & svg {
+    width: ${forcePixelValue(20)};
+    height: ${forcePixelValue(20)};
+  }
+
+  padding: ${({
+  theme
+}) => forcePixelValue(theme.space[3])};
+  background-color: ${({
+  theme
+}) => theme.colors['bg/neutral/subtler']};
+  border-radius: ${({
+  theme
+}) => forcePixelValue(theme.radii.xs)};
+  cursor: pointer;
+  transition: background-color 100ms;
+
+  ${({
+  theme,
+  disabled
+}) => disabled ? css`
+          color: ${theme.colors['text/disabled']};
+          & svg {
+            color: ${({
+  theme
+}) => theme.colors['icon/disabled']};
+          }
+          cursor: not-allowed;
+        ` : css`
+          &:hover {
+            background-color: ${theme.colors['bg/neutral/subtler/hovered']};
+          }
+          &:hover:active {
+            background-color: ${theme.colors['bg/neutral/subtler/pressed']};
+          }
+          &:focus-visible {
+            outline-width: ${forcePixelValue(2)};
+            outline-style: solid;
+            outline-color: ${theme.colors['border/focused']};
+            outline-offset: ${forcePixelValue(-2)};
+          }
+        `}
+
+  ${({
+  theme,
+  disabled,
+  variant
+}) => !disabled && variant === 'danger' ? css`
+          color: ${theme.colors['text/danger']};
+        ` : !disabled && variant === 'neutral' ? css`
+          color: ${theme.colors['text/neutral']};
+        ` : null}
+
+  ${sx};
+`;
+const FakeCheckbox = styled.div`
+  position: relative;
+
+  width: ${forcePixelValue(20)};
+  height: ${forcePixelValue(20)};
+
+  border-width: ${forcePixelValue(2)};
+  border-style: solid;
+  border-color: ${({
+  theme
+}) => theme.colors['border/neutral']};
+  border-radius: ${({
+  theme
+}) => `${forcePixelValue(theme.radii.xxs)}`};
+  cursor: pointer;
+
+  transition: visibility 200ms;
+
+  &::before {
+    visibility: hidden;
+
+    content: '';
+    display: grid;
+    position: absolute;
+
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+
+    border-radius: ${({
+  theme
+}) => `${forcePixelValue(theme.radii.xxs)}`};
+
+    background-color: ${({
+  theme
+}) => theme.colors['icon/inverse']};
+    mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.6 17.2C10.3 17.2 10 17.1 9.80001 16.8L5.20001 12.2C4.70001 11.7 4.70001 11 5.20001 10.5C5.70001 9.99998 6.40001 9.99998 6.90001 10.5L10.6 14.2L17.2 7.59998C17.7 7.09998 18.4 7.09998 18.9 7.59998C19.4 8.09998 19.4 8.79998 18.9 9.29998L11.5 16.7C11.2 17.1 10.9 17.2 10.6 17.2Z' fill='%238D94A0'/%3E%3C/svg%3E%0A");
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.6 17.2C10.3 17.2 10 17.1 9.80001 16.8L5.20001 12.2C4.70001 11.7 4.70001 11 5.20001 10.5C5.70001 9.99998 6.40001 9.99998 6.90001 10.5L10.6 14.2L17.2 7.59998C17.7 7.09998 18.4 7.09998 18.9 7.59998C19.4 8.09998 19.4 8.79998 18.9 9.29998L11.5 16.7C11.2 17.1 10.9 17.2 10.6 17.2Z' fill='%238D94A0'/%3E%3C/svg%3E%0A");
+    mask-size: 100%;
+    -webkit-mask-size: 100%;
+    mask-repeat: no-repeat;
+    -webkit-mask-repeat: no-repeat;
+    mask-position: center;
+    -webkit-mask-position: center;
+  }
+
+  &[aria-disabled='true'] {
+    background-color: ${({
+  theme
+}) => theme.colors['bg/disabled']};
+    border-color: ${({
+  theme
+}) => theme.colors['border/disabled']};
+  }
+
+  &[aria-checked='true'] {
+    background-color: ${({
+  theme
+}) => theme.colors['bg/primary']};
+    border-width: 0;
+
+    &::before {
+      visibility: visible;
+    }
+
+    &[aria-disabled='true'] {
+      background-color: ${({
+  theme
+}) => theme.colors['bg/disabled']};
+      border-color: ${({
+  theme
+}) => theme.colors['border/disabled']};
+
+      &::before {
+        background-color: ${({
+  theme
+}) => theme.colors['icon/disabled']};
+      }
+    }
+  }
+
+  ${sx}
+`;
+
+export { ActionListItem as default };

package/esm/core/ActionList/ActionListSectionDivider.js

@@ -0,0 +1,20 @@
+import HorizontalDivider from '../HorizontalDivider/index.js';
+import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
+
+const ActionListSectionDivider = ({
+  color = 'border/neutral',
+  variant = 'solid',
+  width = 1,
+  sx
+}) => /*#__PURE__*/jsxRuntimeExports.jsx(BaseActionListSectionDivider, {
+  color: color,
+  variant: variant,
+  width: width,
+  sx: {
+    ...sx,
+    my: 3
+  }
+});
+const BaseActionListSectionDivider = HorizontalDivider;
+
+export { ActionListSectionDivider as default };

package/esm/core/ActionList/ActionListSectionHeader.js

@@ -0,0 +1,37 @@
+import styled from 'styled-components';
+import { forcePixelValue } from '../../utils/forcePixelValue.js';
+import { sx } from '../../utils/styled-system/index.js';
+import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
+
+const ActionListSectionHeader = ({
+  ...props
+}) => {
+  return /*#__PURE__*/jsxRuntimeExports.jsx(BaseActionListSectionHeader, {
+    role: 'presentation',
+    ...props
+  });
+};
+const BaseActionListSectionHeader = styled.div`
+  color: ${({
+  theme
+}) => theme.colors['text/neutral/subtlest']};
+  font-size: ${({
+  theme
+}) => forcePixelValue(theme.fontSizes.xxs)};
+  font-weight: ${({
+  theme
+}) => theme.fontWeights.bold};
+  line-height: ${({
+  theme
+}) => theme.lineHeights[2]};
+
+  white-space: pre-wrap;
+
+  padding: ${({
+  theme
+}) => `${forcePixelValue(theme.space[1])} ${forcePixelValue(theme.space[3])}}`};
+
+  ${sx};
+`;
+
+export { ActionListSectionHeader as default };

package/esm/core/ActionList/index.js

@@ -0,0 +1,36 @@
+import { createContext } from 'react';
+import styled from 'styled-components';
+import { sx } from '../../utils/styled-system/index.js';
+import ActionListItem from './ActionListItem.js';
+import ActionListSectionDivider from './ActionListSectionDivider.js';
+import ActionListSectionHeader from './ActionListSectionHeader.js';
+import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
+
+const ActionListContext = /*#__PURE__*/createContext({});
+const ActionList = ({
+  ...props
+}) => {
+  return /*#__PURE__*/jsxRuntimeExports.jsx(ActionListContext.Provider, {
+    value: {
+      selectionVariant: props.selectionVariant
+    },
+    children: /*#__PURE__*/jsxRuntimeExports.jsx(BaseActionList, {
+      role: 'menu',
+      ...props
+    })
+  });
+};
+const BaseActionList = styled.ul`
+  list-style: none;
+  padding: 0;
+  margin: 0;
+
+  ${sx}
+`;
+var index = Object.assign(ActionList, {
+  Item: ActionListItem,
+  SectionDivider: ActionListSectionDivider,
+  SectionHeader: ActionListSectionHeader
+});
+
+export { ActionListContext, index as default };

package/esm/core/Overlay/index.js

@@ -13,11 +13,19 @@ const Overlay = ({
   onDismiss,
   size = 'm',
   ignoreOutsideClickRefs = [],
+  dismissFocusRef,
   ...props
 }, ref) => {
   const overlayRef = useRef(null);
   useImperativeHandle(ref, () => overlayRef.current);
-  const handleDismiss = useCallback(() => onDismiss?.(), [onDismiss]);
+  const handleDismiss = useCallback(() => {
+    if (dismissFocusRef && dismissFocusRef.current) {
+      setTimeout(() => {
+        dismissFocusRef.current?.focus();
+      }, 0);
+    }
+    onDismiss?.();
+  }, [onDismiss]);
   const handleOutsideClick = useCallback(e => {
     if (overlayRef.current && e.target instanceof Node && !overlayRef.current.contains(e.target) && ignoreOutsideClickRefs && !ignoreOutsideClickRefs.some(({
       current

package/esm/core/OverlayPopper/index.js

@@ -56,6 +56,7 @@ const OverlayPopper = ({
       ref: refs.setFloating,
       isOpen: isOpen,
       onDismiss: closeOverlay,
+      dismissFocusRef: refs.reference,
       ignoreOutsideClickRefs: [refs.reference],
       style: floatingStyles,
       children: renderOverlay({

package/esm/index.js

@@ -1,3 +1,4 @@
+export { default as ActionList } from './core/ActionList/index.js';
 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';

package/package.json

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