@tapcart/mobile-components 0.7.54 → 0.7.56

package/dist/components/ui/drawer.d.ts

@@ -31,6 +31,7 @@ declare const DrawerContentBase: React.ForwardRefExoticComponent<Omit<React.Deta
     backdropHexColor?: string | undefined;
     isSheet?: boolean | undefined;
     containerRef?: HTMLElement | undefined;
+    maxHeight?: string | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
 declare const DrawerFooter: {
     ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/drawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../components/ui/drawer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,MAAM,CAAA;AAKhD,KAAK,kBAAkB,GAAG,KAAK,CAAC,wBAAwB,CAAC,QAAQ,CAAC,GAAG;IACnE,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAED,KAAK,iBAAiB,GAAG;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,YAAY,CAAC,EAAE,WAAW,CAAA;CAC3B,CAAA;AAED,KAAK,gBAAgB,GAAG,KAAK,CAAC,wBAAwB,CAAC,QAAQ,CAAC,GAAG;IACjE,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAED,QAAA,MAAM,aAAa,8BAA0D,CAAA;AAG7E,QAAA,MAAM,YAAY;iCAAgC,iBAAiB;;CAgBlE,CAAA;AAGD,QAAA,MAAM,WAAW,4BAAsD,CAAA;AAGvE,KAAK,WAAW,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,GAAG;IACrE,YAAY,CAAC,EAAE,WAAW,CAAA;CAC3B,CAAA;AAED,QAAA,MAAM,MAAM;0CAAyC,WAAW;;CAS/D,CAAA;AAOD,QAAA,MAAM,aAAa;;wCAYlB,CAAA;AAUD,QAAA,MAAM,iBAAiB;;;;;wCAyCtB,CAAA;AA0BD,QAAA,MAAM,YAAY;8BAGf,MAAM,cAAc,CAAC,cAAc,CAAC;;CAQtC,CAAA;AAGD,QAAA,MAAM,iBAAiB,qLASrB,CAAA;AAGF,KAAK,iBAAiB,GAAG;IACvB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,KAAK,EAAE,MAAM,CAAA;IACb,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAA;CACjD,CAAA;AAED,QAAA,MAAM,YAAY,0DAKf,iBAAiB,4CA8BnB,CAAA;AAED,QAAA,MAAM,aAAa,sCAIhB,MAAM,cAAc,CAAC,cAAc,CAAC,4CAMtC,CAAA;AAED,OAAO,EACL,MAAM,EACN,YAAY,EACZ,aAAa,EACb,aAAa,EACb,WAAW,EACX,iBAAiB,EACjB,aAAa,EACb,YAAY,EACZ,iBAAiB,EACjB,YAAY,GACb,CAAA"}
+{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../components/ui/drawer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,MAAM,CAAA;AAKhD,KAAK,kBAAkB,GAAG,KAAK,CAAC,wBAAwB,CAAC,QAAQ,CAAC,GAAG;IACnE,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAED,KAAK,iBAAiB,GAAG;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,YAAY,CAAC,EAAE,WAAW,CAAA;CAC3B,CAAA;AAED,KAAK,gBAAgB,GAAG,KAAK,CAAC,wBAAwB,CAAC,QAAQ,CAAC,GAAG;IACjE,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAED,QAAA,MAAM,aAAa,8BAA0D,CAAA;AAG7E,QAAA,MAAM,YAAY;iCAAgC,iBAAiB;;CAgBlE,CAAA;AAGD,QAAA,MAAM,WAAW,4BAAsD,CAAA;AAGvE,KAAK,WAAW,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,GAAG;IACrE,YAAY,CAAC,EAAE,WAAW,CAAA;CAC3B,CAAA;AAED,QAAA,MAAM,MAAM;0CAAyC,WAAW;;CAS/D,CAAA;AAOD,QAAA,MAAM,aAAa;;wCAYlB,CAAA;AAWD,QAAA,MAAM,iBAAiB;;;;;;wCA0CtB,CAAA;AA0BD,QAAA,MAAM,YAAY;8BAGf,MAAM,cAAc,CAAC,cAAc,CAAC;;CAQtC,CAAA;AAGD,QAAA,MAAM,iBAAiB,qLASrB,CAAA;AAGF,KAAK,iBAAiB,GAAG;IACvB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,KAAK,EAAE,MAAM,CAAA;IACb,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAA;CACjD,CAAA;AAED,QAAA,MAAM,YAAY,0DAKf,iBAAiB,4CA8BnB,CAAA;AAED,QAAA,MAAM,aAAa,sCAIhB,MAAM,cAAc,CAAC,cAAc,CAAC,4CAMtC,CAAA;AAED,OAAO,EACL,MAAM,EACN,YAAY,EACZ,aAAa,EACb,aAAa,EACb,WAAW,EACX,iBAAiB,EACjB,aAAa,EACb,YAAY,EACZ,iBAAiB,EACjB,YAAY,GACb,CAAA"}

package/dist/components/ui/drawer.js

@@ -47,10 +47,10 @@ const DrawerOverlay = React.forwardRef((_a, ref) => {
 });
 DrawerOverlay.displayName = "DrawerOverlay";
 const DrawerContentBase = React.forwardRef((_a, ref) => {
-    var { className, children, hideBackdrop = false, backdropHexColor, isSheet = false, onAnimationEnd, containerRef } = _a, props = __rest(_a, ["className", "children", "hideBackdrop", "backdropHexColor", "isSheet", "onAnimationEnd", "containerRef"]);
+    var { className, children, hideBackdrop = false, backdropHexColor, isSheet = false, onAnimationEnd, containerRef, maxHeight } = _a, props = __rest(_a, ["className", "children", "hideBackdrop", "backdropHexColor", "isSheet", "onAnimationEnd", "containerRef", "maxHeight"]);
     const styles = isSheet
-        ? { height: "calc(100vh - 112px)" }
-        : { maxHeight: "calc(100vh - 112px)" };
+        ? { height: "calc(100dvh - 112px)" }
+        : { maxHeight: maxHeight || "calc(100dvh - 112px)" };
     return (_jsxs(DrawerPortal, Object.assign({ containerRef: containerRef }, { children: [hideBackdrop ? null : (_jsx(DrawerOverlay, { backdropHexColor: backdropHexColor })), _jsxs(DrawerPrimitive.Content, Object.assign({ ref: ref, style: styles, className: cn("fixed inset-x-0 bottom-0 z-50 flex h-auto flex-col rounded-t-2xl bg-coreColors-modalBackground", className) }, props, { "data-testid": "drawer-content" }, { children: [_jsx("div", { className: "mx-auto mb-2 mt-2 h-[4px] w-[40px] rounded-full bg-coreColors-dividingLines" }), children] }))] })));
 });
 DrawerContentBase.displayName = "DrawerContentBase";

package/dist/components/ui/tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../components/ui/tabs.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACrE,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM,CAAA;QACb,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;QACzB,WAAW,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;QACjC,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;KAChC,EAAE,CAAA;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IACvC,SAAS,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,WAAW,EAAE,CAAC,CAAC,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IACvC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB;AAiDD,QAAA,MAAM,IAAI,kFA8HT,CAAA;AAGD,OAAO,EAAE,IAAI,EAAE,CAAA"}
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../components/ui/tabs.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACrE,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM,CAAA;QACb,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;QACzB,WAAW,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;QACjC,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;KAChC,EAAE,CAAA;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IACvC,SAAS,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,WAAW,EAAE,CAAC,CAAC,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IACvC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB;AAiDD,QAAA,MAAM,IAAI,kFAgIT,CAAA;AAGD,OAAO,EAAE,IAAI,EAAE,CAAA"}

package/dist/components/ui/tabs.js

@@ -72,7 +72,9 @@ const Tabs = React.forwardRef((_a, ref) => {
         });
     }, [activeTab]);
     React.useEffect(() => {
-        handleTabChanged();
+        setTimeout(() => {
+            handleTabChanged();
+        }, 100);
         window.addEventListener("resize", handleTabChanged);
         return () => {
             window.removeEventListener("resize", handleTabChanged);

package/dist/components/ui/virtual-grid.d.ts

@@ -3,12 +3,16 @@ import { type VariantProps } from "class-variance-authority";
 interface GridType {
     className: any;
     children: React.ReactNode;
+    isLoadingMore: boolean;
+    loaderItem: React.ReactNode;
+    overscan?: number;
+    estimatedHeight?: number;
 }
 declare const virtualGridVariants: (props?: ({
     columns?: 1 | 2 | 3 | 4 | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export interface VirtualGridProps extends GridType, VariantProps<typeof virtualGridVariants> {
 }
-declare function VirtualGrid({ className, columns, children, ...props }: VirtualGridProps): import("react/jsx-runtime").JSX.Element;
+declare function VirtualGrid({ className, columns, children, overscan, estimatedHeight, isLoadingMore, loaderItem, ...props }: VirtualGridProps): import("react/jsx-runtime").JSX.Element;
 export { VirtualGrid, virtualGridVariants };
 //# sourceMappingURL=virtual-grid.d.ts.map

package/dist/components/ui/virtual-grid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"virtual-grid.d.ts","sourceRoot":"","sources":["../../../components/ui/virtual-grid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAMjE,UAAU,QAAQ;IAChB,SAAS,EAAE,GAAG,CAAA;IACd,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED,QAAA,MAAM,mBAAmB;;mFAYvB,CAAA;AAEF,MAAM,WAAW,gBACf,SAAQ,QAAQ,EACd,YAAY,CAAC,OAAO,mBAAmB,CAAC;CAAG;AAE/C,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,OAAO,EACP,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,gBAAgB,2CAyClB;AAED,OAAO,EAAE,WAAW,EAAE,mBAAmB,EAAE,CAAA"}
+{"version":3,"file":"virtual-grid.d.ts","sourceRoot":"","sources":["../../../components/ui/virtual-grid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAMjE,UAAU,QAAQ;IAChB,SAAS,EAAE,GAAG,CAAA;IACd,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,aAAa,EAAE,OAAO,CAAA;IACtB,UAAU,EAAE,KAAK,CAAC,SAAS,CAAA;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,eAAe,CAAC,EAAE,MAAM,CAAA;CACzB;AAED,QAAA,MAAM,mBAAmB;;mFAYvB,CAAA;AAEF,MAAM,WAAW,gBACf,SAAQ,QAAQ,EACd,YAAY,CAAC,OAAO,mBAAmB,CAAC;CAAG;AAE/C,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,OAAO,EACP,QAAQ,EACR,QAAa,EACb,eAAqB,EACrB,aAAa,EACb,UAAU,EACV,GAAG,KAAK,EACT,EAAE,gBAAgB,2CAkElB;AAED,OAAO,EAAE,WAAW,EAAE,mBAAmB,EAAE,CAAA"}

package/dist/components/ui/virtual-grid.js

@@ -29,27 +29,37 @@ const virtualGridVariants = cva("grid", {
     },
 });
 function VirtualGrid(_a) {
-    var { className, columns, children } = _a, props = __rest(_a, ["className", "columns", "children"]);
+    var { className, columns, children, overscan = 50, estimatedHeight = 375, isLoadingMore, loaderItem } = _a, props = __rest(_a, ["className", "columns", "children", "overscan", "estimatedHeight", "isLoadingMore", "loaderItem"]);
+    const NUM_LOADER_ITEMS = 8;
+    const col = columns || 2;
     const parentRef = React.useRef(null);
     const childrenArray = React.Children.toArray(children);
-    const rowCount = Math.ceil(childrenArray.length / (columns || 2));
+    const rowCount = Math.ceil(childrenArray.length / col);
+    const loaderRowCount = Math.ceil(NUM_LOADER_ITEMS / col);
+    const totalItems = isLoadingMore ? rowCount + loaderRowCount : rowCount;
     const rowVirtualizer = useVirtual({
-        size: rowCount,
+        size: totalItems,
         parentRef,
-        estimateSize: React.useCallback(() => 100, []),
-        overscan: 10,
+        estimateSize: React.useCallback(() => estimatedHeight, []),
+        overscan,
     });
-    const col = columns || 2;
+    React.useEffect(() => {
+        rowVirtualizer.measure();
+    }, [childrenArray.length]);
     return (_jsx(Container, Object.assign({ style: { padding: "0" } }, { children: _jsx("div", Object.assign({ ref: parentRef }, { children: _jsx("div", Object.assign({ className: cn(virtualGridVariants({ columns }), className), style: {
                     height: rowVirtualizer.totalSize,
-                    gridTemplateColumns: `repeat(${col}, minmax(0, 1fr))`,
                 } }, props, { children: rowVirtualizer.virtualItems.map((virtualRow) => {
-                    return Array.from({ length: col }).map((_, colIndex) => {
-                        const index = virtualRow.index * col + colIndex;
-                        if (index >= childrenArray.length)
-                            return null;
-                        return (_jsx("div", Object.assign({ ref: virtualRow.measureRef }, { children: childrenArray[index] }), index));
-                    });
+                    const rowStartIndex = virtualRow.index * col;
+                    // Render loader as a full row if we're loading and this is the last virtual row
+                    if (isLoadingMore && virtualRow.index === rowCount - 1) {
+                        return (_jsx(React.Fragment, { children: Array.from({ length: NUM_LOADER_ITEMS }).map((_, index) => (_jsx("div", Object.assign({ ref: virtualRow.measureRef }, { children: loaderItem }), index))) }, "loader"));
+                    }
+                    return (_jsx(React.Fragment, { children: Array.from({ length: col }).map((_, colIndex) => {
+                            const index = rowStartIndex + colIndex;
+                            if (index >= childrenArray.length)
+                                return null;
+                            return (_jsx("div", Object.assign({ ref: virtualRow.measureRef }, { children: childrenArray[index] }), index));
+                        }) }, virtualRow.index));
                 }) })) })) })));
 }
 export { VirtualGrid, virtualGridVariants };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tapcart/mobile-components",
-  "version": "0.7.54",
+  "version": "0.7.56",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "style": "dist/styles.css",