@janbox/storefront-ui 5.0.0 → 5.0.2

package/dist/lib/tabs/tab-content/README.md

@@ -14,10 +14,13 @@ import { TabContent } from '@janbox/storefront-ui';
 | ------ | ------ | ------- | ----------- |
 | `children` * | `React.ReactNode` | - | Danh sách `TabPanel`, thứ tự phải khớp với thứ tự các `Tab` trong `TabList`. |
 | `className` | `string` | - | Class cho container `div`. |
+| `as` | `HTMLElementType` | `'div'` | Tag HTML của container. |
+| `sx` | `ToResponsiveProps<StyledCSS>` | - | Style responsive cho container. |
+| `ref` | `React.Ref<HTMLElement>` | - | Trỏ tới DOM node của container. |
 
-Kiểu prop là `JSX.IntrinsicElements['div']` — kế thừa toàn bộ div attributes. Component **không** nhận `sx`; dùng `className` hoặc `style` nếu cần style container.
+Kiểu prop là `PrimitiveProps<JSX.IntrinsicElements['div'], 'div'>` — kế thừa toàn bộ div attributes cùng `as` và `sx` từ [Primitive](../../primitive/README.md).
 
-> ⚠️ `TabContent` **không** forward `ref`. `ref` trong props sẽ bị truyền vào `Primitive` như prop thường và không trỏ tới DOM node.
+> React 19 coi `ref` là prop thường, nên `ref` được `Primitive` spread thẳng vào DOM node của container.
 
 *Required props
 

package/dist/lib/tabs/tab-content/types.d.ts

@@ -1,2 +1,3 @@
 import { JSX } from 'react';
-export type TabContentProps = JSX.IntrinsicElements['div'];
+import { PrimitiveProps } from '../../primitive';
+export type TabContentProps = PrimitiveProps<JSX.IntrinsicElements['div'], 'div'>;

package/dist/lib/tabs/tab-indicator/README.md

@@ -31,7 +31,9 @@ Truyền `indicator={false}` để không render indicator.
 - Tab đang active được tìm bằng `parentElement.children.item(activeIndex)` — tức là **theo thứ tự DOM**, không qua index từ context. Vì vậy đừng chèn element không phải `Tab` vào giữa các `Tab`, nếu không indicator sẽ trỏ sai.
 - Vị trí (`left`, `top`, `width`) được tính từ `getBoundingClientRect()` của tab active so với container, có bù `scrollLeft`/`scrollTop` để đúng khi tab bar scroll ngang.
 - Một `MutationObserver` theo dõi `childList` của `TabList` để cập nhật khi số lượng `Tab` thay đổi (thêm/bớt tab động).
-- Một `ResizeObserver` observe cả tab active **và** container: resize container không đổi kích thước từng tab nhưng có thể làm tab xuống dòng khác khi `overflowBehavior="wrap"`, nên phải theo dõi cả hai để cập nhật vị trí dòng.
+- Một `ResizeObserver` observe tab active, container **và** chính indicator:
+  - Container: resize container không đổi kích thước từng tab nhưng có thể làm tab xuống dòng khác khi `overflowBehavior="wrap"`, nên phải theo dõi để cập nhật vị trí dòng.
+  - Chính indicator: `top` phụ thuộc `offsetHeight` của nó, nên khi `size` đổi (qua prop hoặc breakpoint) vị trí phải được tính lại. Indicator là `position: absolute` nên đổi height không làm tab/container resize.
 - `top` được tính là mép dưới của tab trừ đi chiều cao indicator, nên indicator luôn nằm sát đáy tab active — kể cả khi tab wrap sang dòng thứ hai.
 
 ## Examples

package/dist/lib/tabs/tab-indicator/index.d.ts

@@ -1 +1,2 @@
-export * from './tab-indicator';
+export { TabIndicator } from './tab-indicator';
+export { type TabIndicatorProps } from './types';

package/dist/lib/tabs/tab-indicator/tab-indicator.js

@@ -51,15 +51,18 @@ const TabIndicator = ({ size, sm, md, lg, ...props }) => {
     });
   }, [activeTabElement]);
   useEffect(() => {
-    var _a;
     const resizeObserver = new ResizeObserver(syncIndicatorRect);
-    const parentElement = (_a = indicatorEl.current) == null ? void 0 : _a.parentElement;
+    const indicator = indicatorEl.current;
+    const parentElement = indicator == null ? void 0 : indicator.parentElement;
     if (activeTabElement) {
       resizeObserver.observe(activeTabElement);
     }
     if (parentElement) {
       resizeObserver.observe(parentElement);
     }
+    if (indicator) {
+      resizeObserver.observe(indicator);
+    }
     return () => {
       resizeObserver.disconnect();
     };

package/dist/utils/query-params.js

@@ -1,5 +1,5 @@
 import { flatten } from "flat";
-import { isNil, trim, isString, isNumber, isDate, isBoolean, isArray, isPlainObject } from "lodash-es";
+import { isNil, isString, isNumber, isDate, isBoolean, isArray, isPlainObject } from "lodash-es";
 import { getEnumValues } from "./common.js";
 class QueryParamParser {
   constructor(value) {
@@ -55,7 +55,7 @@ class ArrayParamParser extends QueryParamParser {
     if (isNil(value)) {
       return void 0;
     }
-    const parsedValue = value.split(",").map(trim).filter(Boolean);
+    const parsedValue = value.split(",").map((part) => part.trim()).filter(Boolean);
     return parsedValue.length ? parsedValue : void 0;
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@janbox/storefront-ui",
-  "version": "5.0.0",
+  "version": "5.0.2",
   "description": "Storefront UI component library for Janbox",
   "author": "Janbox",
   "keywords": [