@addev-be/ui 0.20.2 → 0.20.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@addev-be/ui",
-  "version": "0.20.2",
+  "version": "0.20.3",
   "type": "module",
   "scripts": {
     "watch": "tsc -b --watch",
@@ -20,7 +20,7 @@
     "update-version": "../../node/update-version.mjs"
   },
   "devDependencies": {
-    "@addev-be/framework-utils": "^0.20.2",
+    "@addev-be/framework-utils": "^0.20.3",
     "@types/lodash": "^4",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",

package/src/components/layout/Columns.ts

@@ -4,21 +4,20 @@ import styled from 'styled-components';
 
 export type ColumnsProps = {
   columns?: number | string[];
+  $maxColumnWidth?: string;
 } & SpaceProps;
 
 export const Columns = styled.div<ColumnsProps>`
   display: grid;
   grid-gap: var(--space-6);
-  grid-template-columns: ${({ columns }) => {
-    if (typeof columns === 'number') {
-      return columns === 2
-        ? `repeat(2, calc(50% - var(--space-6) / 2))`
-        : `repeat(${columns}, 1fr)`;
-    }
-    return columns?.join(' ') || 'none';
-  }};
+  width: 100%;
 
-  ${space}
+  grid-template-columns: ${({ columns = 1, $maxColumnWidth = '1fr' }) =>
+    typeof columns === 'number'
+      ? `repeat(${columns}, minmax(0, ${$maxColumnWidth}))`
+      : columns?.join(' ') ?? 'none'};
+
+  ${space};
 `;
 
 export const Column = styled.div`

package/src/components/ui/Tab/index.tsx

@@ -8,7 +8,7 @@ import {
 
 import { TabProps } from './types';
 
-export const TabView: FC<TabProps> = ({ tabs }) => {
+export const TabView: FC<TabProps> = ({ tabs, overflow = false }) => {
   const [activeIndex, setActiveIndex] = useState(0);
   const activeTab = tabs[activeIndex];
 
@@ -27,7 +27,9 @@ export const TabView: FC<TabProps> = ({ tabs }) => {
           </TabContainer>
         ))}
       </TabListContainer>
-      <TabContentContainer>{activeTab.content}</TabContentContainer>
+      <TabContentContainer $isOverflow={overflow}>
+        {activeTab.content}
+      </TabContentContainer>
     </TabViewContainer>
   );
 };

package/src/components/ui/Tab/styles.ts

@@ -9,16 +9,15 @@ export const TabViewContainer = styled.div`
   height: 100%;
 `;
 
-export const TabListContainer = styled.div`
+export const TabListContainer = styled.div<{}>`
   display: flex;
-  flex-direction: row;
+  gap: var(--space-4);
   flex-shrink: 0;
-  justify-content: flex-start;
-  gap: var(--space-2);
   overflow-x: scroll;
   scrollbar-width: none;
   padding: var(--space-2) var(--space-2);
   font-size: var(--text-base);
+  white-space: nowrap;
 `;
 
 export const TabContainer = styled.div<{
@@ -53,9 +52,13 @@ export const TabContainer = styled.div<{
 `;
 
 export const TabContentContainer = styled.div<{
-  $isActive?: boolean;
+  $isOverflow?: boolean;
 }>`
   display: flex;
   height: 100%;
-  overflow: hidden;
+
+  ${({ $isOverflow }) => css`
+    overflow: ${$isOverflow ? 'auto' : 'hidden'};
+    scroll-behavior: smooth;
+  `}
 `;

package/src/components/ui/Tab/types.ts

@@ -13,4 +13,5 @@ export type Tab = {
 
 export type TabProps = {
   tabs: Tab[];
+  overflow?: boolean;
 };