npm - @tapcart/mobile-components - Versions diffs - 0.19.0 → 0.19.1 - Mend

@tapcart/mobile-components 0.19.0 → 0.19.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/dist/components/ui/__tests__/drawer-glass-inset.test.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export {};
2	+ //# sourceMappingURL=drawer-glass-inset.test.d.ts.map

package/dist/components/ui/__tests__/drawer-glass-inset.test.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"drawer-glass-inset.test.d.ts","sourceRoot":"","sources":["../../../../components/ui/__tests__/drawer-glass-inset.test.tsx"],"names":[],"mappings":""}

package/dist/components/ui/__tests__/drawer-glass-inset.test.js ADDED Viewed

@@ -0,0 +1,84 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as fs from "fs";
+import * as path from "path";
+import { render, screen } from "@testing-library/react";
+import { Drawer, DrawerContentBase } from "../drawer";
+// A bottom sheet portals to <body> and pins itself with `position: fixed;
+// bottom: 0`, so it lives OUTSIDE #tc-vgsl and never receives the frame
+// clearance that element carries. Its bottom cushion is therefore the only
+// thing keeping content off an overlay bottom bar (iOS Liquid Glass).
+//
+// `pb-safe` alone is just env(safe-area-inset-bottom) - the home indicator,
+// not the bar. `tc-pb-frame` is the glass-gated rule in styles/globals.css
+// that raises the cushion to max(env(safe-area-inset-bottom),
+// --tc-frame-bottom). jsdom does not evaluate the cascade, so this asserts the
+// contract the stylesheet keys off; the geometry itself is proven in the
+// browser A/B (qa-evidence/glass-sheet-insets).
+describe("DrawerContentBase bottom-overlay clearance", () => {
+    it("carries both the legacy safe cushion and the glass frame cushion", () => {
+        render(_jsx(Drawer, Object.assign({ open: true }, { children: _jsx(DrawerContentBase, { children: "content" }) })));
+        const sheet = screen.getByTestId("drawer-content");
+        expect(sheet.className).toContain("pb-safe");
+        expect(sheet.className).toContain("tc-pb-frame");
+    });
+    it("keeps the cushion when a caller passes its own className", () => {
+        render(_jsx(Drawer, Object.assign({ open: true }, { children: _jsx(DrawerContentBase, Object.assign({ className: "bg-red-500" }, { children: "content" })) })));
+        const sheet = screen.getByTestId("drawer-content");
+        expect(sheet.className).toContain("tc-pb-frame");
+        expect(sheet.className).toContain("bg-red-500");
+    });
+    // FORWARD GUARD, not proof of the glass fix: this assertion is already green
+    // on the pre-fix component, because `bottom-0` predates it. It exists to go
+    // red if someone later moves the clearance out of padding and into `bottom`.
+    it("stays anchored to the bottom edge instead of floating above the bar", () => {
+        // The clearance must live in padding, not in `bottom`: the sheet surface
+        // keeps bleeding to the physical bottom edge the way a native sheet does,
+        // and only its CONTENT is lifted. A `bottom` offset would leave a strip of
+        // backdrop under the sheet.
+        render(_jsx(Drawer, Object.assign({ open: true }, { children: _jsx(DrawerContentBase, { children: "content" }) })));
+        const sheet = screen.getByTestId("drawer-content");
+        expect(sheet.className).toContain("bottom-0");
+        expect(sheet.style.bottom).toBe("");
+    });
+    // The two assertions above only pin the class NAME. jest has no CSS
+    // transform and the component imports no stylesheet, so deleting or renaming
+    // the rule in styles/globals.css would leave them green while the clearance
+    // silently stopped existing. This closes that drift: it reads the AUTHORED
+    // stylesheet (styles/globals.css) and checks a rule really is keyed to the
+    // class the component emits, with the right variable in it.
+    //
+    // Source, not dist/: dist/styles.css is gitignored and only exists after a
+    // build, so asserting against it would make this test pass or fail on build
+    // state rather than on the committed CSS. The build step for this file is
+    // postcss with no selector rewriting, so source and shipped agree - but the
+    // guard is on the input, and a transform that ever changed that would slip
+    // past it.
+    it("has a stylesheet rule keyed to the class the component emits", () => {
+        render(_jsx(Drawer, Object.assign({ open: true }, { children: _jsx(DrawerContentBase, { children: "content" }) })));
+        const emitted = screen
+            .getByTestId("drawer-content")
+            .className.split(/\s+/)
+            .find((c) => c === "tc-pb-frame");
+        expect(emitted).toBe("tc-pb-frame");
+        const css = fs
+            .readFileSync(path.join(__dirname, "../../../styles/globals.css"), "utf8")
+            // Comments in this file quote CSS ("pin themselves with position: fixed;
+            // bottom: 0"), which would otherwise be read as declarations below.
+            .replace(/\/\*[\s\S]*?\*\//g, "");
+        // Whole selector token: a substring match would still find the class
+        // inside a renamed `.tc-pb-frame-something`, which is exactly the drift
+        // this test exists to catch.
+        const selector = new RegExp(`\\.${emitted}(?![\\w-])`);
+        const rule = css
+            .split("}")
+            .map((block) => block + "}")
+            .find((block) => selector.test(block) && block.includes("padding-bottom"));
+        expect(rule).toBeDefined();
+        // Glass-gated, and reading the frame inset rather than a hardcoded value.
+        expect(rule).toContain("tc-glass");
+        expect(rule).toContain("--tc-frame-bottom");
+        // Clearance lives in padding, never in `bottom`. Anchored to a declaration
+        // start so it does not also match the `bottom` inside `padding-bottom`.
+        expect(rule).not.toMatch(/[;{]\s*bottom:/);
+    });
+});

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

	@@ -1 +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;AAWD,QAAA,MAAM,iBAAiB;;;;;;~~wCA2CtB~~,CAAA;AAWD,QAAA,MAAM,WAAW,qLAYf,CAAA;AAGF,QAAA,MAAM,YAAY;8BAGf,MAAM,cAAc,CAAC,cAAc,CAAC;;CAQtC,CAAA;AAGD,QAAA,MAAM,iBAAiB,+LASrB,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,WAAW,EACX,iBAAiB,EACjB,YAAY,GACb,CAAA"}
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;AAWD,QAAA,MAAM,iBAAiB;;;;;;wCA+CtB,CAAA;AAWD,QAAA,MAAM,WAAW,qLAYf,CAAA;AAGF,QAAA,MAAM,YAAY;8BAGf,MAAM,cAAc,CAAC,cAAc,CAAC;;CAQtC,CAAA;AAGD,QAAA,MAAM,iBAAiB,+LASrB,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,WAAW,EACX,iBAAiB,EACjB,YAAY,GACb,CAAA"}

package/dist/components/ui/drawer.js CHANGED Viewed

@@ -51,7 +51,12 @@ const DrawerContentBase = React.forwardRef((_a, ref) => {
     const baseStyles = isSheet
         ? { 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: Object.assign(Object.assign({}, baseStyles), style), className: cn("fixed inset-x-0 bottom-0 z-50 flex h-auto flex-col rounded-t-2xl bg-coreColors-modalBackground pb-safe", 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] }))] })));
+    return (_jsxs(DrawerPortal, Object.assign({ containerRef: containerRef }, { children: [hideBackdrop ? null : (_jsx(DrawerOverlay, { backdropHexColor: backdropHexColor })), _jsxs(DrawerPrimitive.Content, Object.assign({ ref: ref, style: Object.assign(Object.assign({}, baseStyles), style), className: cn(
+                // tc-pb-frame: bottom-overlay (iOS Liquid Glass) clearance. The
+                // sheet is viewport-anchored, so it never inherits #tc-vgsl's
+                // --tc-frame-bottom padding; see styles/globals.css. Inert off
+                // glass, where pb-safe alone stays authoritative.
+                "fixed inset-x-0 bottom-0 z-50 flex h-auto flex-col rounded-t-2xl bg-coreColors-modalBackground pb-safe tc-pb-frame", 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";
 const DrawerHeaderBase = (_a) => {

package/dist/styles.css CHANGED Viewed

@@ -2336,6 +2336,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
 }
+.bg-red-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
+}
 .bg-stateColors-disabled {
   background-color: var(--stateColors-disabled);
 }
@@ -3395,10 +3399,17 @@ body::-webkit-scrollbar {
  * home indicator) dedupe instead of double-counting.
  */
-/* SLIM SCOPE — bottom-overlay iOS adapter only. Top-edge, cutout, generalized
-   --tc-content-* / drawer vars and their Tailwind utilities are deferred to
-   Insets V2 (they had zero consumers). Everything here is inert unless the
-   shell reports an overlay bottom bar (.tc-glass; see the gated block below). */
+/* SLIM SCOPE — bottom-overlay iOS adapter only. Top-edge, cutout and the
+   generalized --tc-content-* var API are deferred to Insets V2. Everything here
+   is inert unless the shell reports an overlay bottom bar (.tc-glass; see the
+   gated block below).
+   Drawer clearance is NO LONGER part of that deferral. #3407 deferred "drawer
+   APIs" on the rationale that they had zero consumers; that rationale expired
+   once bottom sheets were found painting behind the bar on 22 block templates
+   plus the quickadd and wishlist modals. What landed is one narrow utility
+   class (.tc-pb-frame, at the end of this file) consumed by DrawerContentBase —
+   NOT the generalized drawer var API, which stays deferred. */
 /* --tc-bar-bottom is @property-registered so the hide-on-scroll bar collapse
    animates smoothly (300ms native bar). */
@@ -3457,6 +3468,38 @@ body::-webkit-scrollbar {
     var(--tc-bar-bottom, 0px)
   );
 }
+/* Bottom cushion for VIEWPORT-ANCHORED overlays (bottom sheets / drawers).
+   These portal to <body> and pin themselves with `position: fixed; bottom: 0`,
+   so they sit outside #tc-vgsl and never receive the frame clearance it carries
+   (--tc-frame-bottom-gated on the native path, --tc-frame-bottom in web mode;
+   see apps/tapcart-ssr-app/app/layout.tsx). Under an overlay bottom bar their
+   last row of content therefore paints behind the bar.
+   This rule reads the NON-gated --tc-frame-bottom on purpose. #tc-vgsl needs
+   the gated variant so it goes IACVT-invalid and collapses to 0 on a shell that
+   never wrote --tc-safe-bottom, leaving the legacy RN bridge authoritative over
+   the same element. Nothing competes for this padding, and the injection script
+   writes --tc-safe-bottom and --tc-bar-bottom-glass together, so under .tc-glass
+   the two variants are equal anyway; the non-gated one additionally keeps the
+   env()/--rn-* fallback chain alive.
+   The sheet's own surface should keep bleeding to the physical bottom edge
+   (native sheets do), so the clearance goes into padding and lifts the CONTENT
+   instead of floating the whole sheet. max() against the pre-PR env() cushion
+   keeps the two from double-counting when the bar hides on scroll and
+   --tc-frame-bottom collapses to the safe area.
+   Gated on .tc-glass: on every non-glass shell this rule never matches and the
+   element's existing `pb-safe` stays byte-for-byte authoritative.
+   Specificity note: this is (0,4,0), well above a Tailwind pb-* utility, and
+   tailwind-merge does not treat `tc-pb-frame` as a padding-bottom conflict. A
+   caller passing `pb-0`/`p-0` to DrawerContentBase would therefore keep the
+   cushion under glass and lose it everywhere else. No caller does today. */
+:root.tc-platform-ios.tc-glass .tc-pb-frame {
+  padding-bottom: max(env(safe-area-inset-bottom), var(--tc-frame-bottom, 0px));
+}
 .file\:border-0::file-selector-button {
   border-width: 0px;
 }
@@ -3949,4 +3992,3 @@ body::-webkit-scrollbar {
 .\[\&_p\]\:text-stateColors-disabled p {
   color: var(--stateColors-disabled);
 }

package/package.json CHANGED Viewed

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