@teamturing/react-kit 2.8.0 → 2.9.0

package/esm/core/Breadcrumbs/BreadcrumbsItem.js

@@ -0,0 +1,77 @@
+import { useRef, useState, useEffect } from 'react';
+import styled, { css } from 'styled-components';
+import { forcePixelValue } from '../../utils/forcePixelValue.js';
+import Tooltip from '../Tooltip/index.js';
+import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
+
+const BreadcrumbsItem = ({
+  text,
+  selected = false,
+  truncatedWidth = 100,
+  ...props
+}) => {
+  const itemRef = useRef(null);
+  const [isOverflow, setIsOverflow] = useState(false);
+  useEffect(() => {
+    if (itemRef.current) {
+      if (truncatedWidth <= itemRef.current.clientWidth) {
+        setIsOverflow(true);
+      }
+    }
+  }, []);
+  const baseBreadCrumbsItem = /*#__PURE__*/jsxRuntimeExports.jsx(BaseBreadcrumbsItem, {
+    ref: itemRef,
+    selected: selected,
+    truncatedWidth: truncatedWidth,
+    ...props,
+    children: text
+  });
+  return isOverflow ? /*#__PURE__*/jsxRuntimeExports.jsx(Tooltip, {
+    text: text,
+    direction: 'bottom-center',
+    sx: {
+      display: 'inline-flex'
+    },
+    children: baseBreadCrumbsItem
+  }) : baseBreadCrumbsItem;
+};
+const BaseBreadcrumbsItem = styled.a`
+  display: inline-block;
+  font-size: ${({
+  theme
+}) => forcePixelValue(theme.fontSizes.xxs)};
+  font-weight: ${({
+  theme
+}) => theme.fontWeights.medium};
+  line-height: ${({
+  theme
+}) => theme.lineHeights[2]};
+  color: ${({
+  theme
+}) => theme.colors['text/neutral/subtlest']};
+  cursor: pointer;
+
+  &:hover {
+    text-decoration: underline;
+  }
+
+  text-overflow: ellipsis;
+  overflow: hidden;
+  word-break: break-word;
+  white-space: nowrap;
+
+  max-width: ${({
+  truncatedWidth
+}) => truncatedWidth ? forcePixelValue(truncatedWidth) : ''};
+
+  ${({
+  selected
+}) => selected ? css`
+          color: ${({
+  theme
+}) => theme.colors['text/neutral/subtle']};
+          pointer-events: none;
+        ` : ''}
+`;
+
+export { BreadcrumbsItem as default };

package/esm/core/Breadcrumbs/index.js

@@ -0,0 +1,72 @@
+import { Children, useState } from 'react';
+import styled from 'styled-components';
+import { forcePixelValue } from '../../utils/forcePixelValue.js';
+import BreadcrumbsItem from './BreadcrumbsItem.js';
+import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
+
+const Breadcrumbs = ({
+  children,
+  maxItemCount = 5,
+  ...props
+}) => {
+  const childrenArray = Children.toArray(children);
+  const shouldCollapse = maxItemCount < childrenArray.length;
+  const [isExpanded, setIsExpanded] = useState(!shouldCollapse);
+  const breadcrumbsItems = isExpanded ? childrenArray : [...childrenArray.slice(0, 1), /*#__PURE__*/jsxRuntimeExports.jsx(BreadcrumbsItem, {
+    text: '...',
+    onClick: () => setIsExpanded(true)
+  }, 'collapse'), ...childrenArray.slice(1 + 1 + childrenArray.length - maxItemCount)];
+  return /*#__PURE__*/jsxRuntimeExports.jsx(BaseBreadcrumbs, {
+    ...props,
+    children: Children.map(breadcrumbsItems, child => /*#__PURE__*/jsxRuntimeExports.jsx(BreadcrumbsItemWrapper, {
+      role: 'listitem',
+      children: child
+    }))
+  });
+};
+const BaseBreadcrumbs = styled.nav`
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+
+  column-gap: ${({
+  theme
+}) => forcePixelValue(theme.space[2])};
+  row-gap: ${({
+  theme
+}) => forcePixelValue(theme.space[1])};
+`;
+const BreadcrumbsItemWrapper = styled.span`
+  display: inline-flex;
+
+  &::after {
+    content: '/';
+    font-size: ${({
+  theme
+}) => forcePixelValue(theme.fontSizes.xxs)};
+    font-weight: ${({
+  theme
+}) => theme.fontWeights.medium};
+    line-height: ${({
+  theme
+}) => theme.lineHeights[2]};
+    color: ${({
+  theme
+}) => theme.colors['text/neutral/subtlest']};
+    margin-left: ${({
+  theme
+}) => forcePixelValue(theme.space[2])};
+  }
+
+  &:last-child {
+    &::after {
+      content: none;
+    }
+  }
+`;
+var index = Object.assign(Breadcrumbs, {
+  Item: BreadcrumbsItem
+});
+
+export { index as default };

package/esm/core/Tooltip/index.js

@@ -1,18 +1,21 @@
 import styled, { keyframes } 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 Tooltip = ({
   children,
   direction = 'top-center',
   text,
-  className: propClassName
+  className: propClassName,
+  sx
 }) => {
   const className = [propClassName, `tooltip-direction-${direction}`].join(' ');
   return /*#__PURE__*/jsxRuntimeExports.jsx(BaseTooltip, {
     role: 'tooltip',
     "aria-label": text,
     className: className,
+    sx: sx,
     children: children
   });
 };
@@ -251,6 +254,8 @@ const BaseTooltip = styled.span`
   &.tooltip-direction-right::after {
     right: 100%;
   }
+
+  ${sx}
 `;
 
 export { Tooltip as default };

package/esm/index.js

@@ -1,3 +1,4 @@
+export { default as Breadcrumbs } from './core/Breadcrumbs/index.js';
 export { default as Button } from './core/Button/index.js';
 export { default as Chip } from './core/Chip/index.js';
 export { default as Dialog } from './core/Dialog/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamturing/react-kit",
-  "version": "2.8.0",
+  "version": "2.9.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",
@@ -57,5 +57,5 @@
     "react-is": "^18.2.0",
     "styled-system": "^5.1.5"
   },
-  "gitHead": "cf95bbbf992b5d7f81dfab51bd80b5f90e4e3005"
+  "gitHead": "6ff713421bda642cb8b25320dd43e1e769c14cbd"
 }