@metron-labs/quote-react 0.1.42 → 0.1.43

package/dist/lib/useEscapeKey.d.ts

@@ -0,0 +1,2 @@
+/** Calls `onEscape` when Escape is pressed while `active` - for closing a dialog. */
+export declare function useEscapeKey(active: boolean, onEscape: () => void): void;

package/dist/lib/useEscapeKey.js

@@ -0,0 +1,20 @@
+import { useEffect, useRef } from "react";
+/** Calls `onEscape` when Escape is pressed while `active` - for closing a dialog. */
+export function useEscapeKey(active, onEscape) {
+    // Latest handler without re-subscribing on every render.
+    const handler = useRef(onEscape);
+    handler.current = onEscape;
+    useEffect(() => {
+        if (!active)
+            return;
+        const onKeyDown = (event) => {
+            // isComposing: Escape cancelling an IME composition, not meant for the dialog.
+            if (event.key !== "Escape" || event.defaultPrevented || event.isComposing)
+                return;
+            event.preventDefault();
+            handler.current();
+        };
+        document.addEventListener("keydown", onKeyDown);
+        return () => document.removeEventListener("keydown", onKeyDown);
+    }, [active]);
+}

package/dist/styles.css

@@ -948,8 +948,12 @@
 
 :where(.app-wrapper) .basket-card-stats {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) 150px 128px;
-  align-items: end;
+  /* Equal qty columns so both wrap their unit (or neither) and stay aligned. */
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 128px;
+  /* Top-aligned so a wrapped unit under the qty box doesn't shift the row;
+     the total centres on the box via the shared height below. */
+  --basket-qty-h: 34px;
+  align-items: start;
   gap: 16px 28px;
   margin-top: 16px;
   padding-top: 5px;
@@ -979,10 +983,14 @@
   color: var(--text-dim);
 }
 
+/* Wraps so the unit drops under the qty box when the host page makes the
+   card narrower than the viewport breakpoints expect, instead of running
+   into the next column. */
 :where(.app-wrapper) .basket-stat-value {
   display: flex;
+  flex-wrap: wrap;
   align-items: baseline;
-  gap: 6px;
+  gap: 2px 6px;
 }
 
 :where(.app-wrapper) .basket-stat--right .basket-stat-value {
@@ -991,6 +999,12 @@
 
 :where(.app-wrapper) .basket-stat--total .basket-stat-value {
   justify-content: flex-end;
+  min-height: var(--basket-qty-h);
+  align-content: center;
+}
+
+:where(.app-wrapper) .basket-qty-field .bom-qty-edit {
+  height: var(--basket-qty-h);
 }
 
 :where(.app-wrapper) .basket-stat-value--muted {
@@ -6612,11 +6626,6 @@
   :where(.app-wrapper) .basket-stat--total {
     grid-column: 1 / -1;
     min-width: 0;
-    text-align: left;
-  }
-
-  :where(.app-wrapper) .basket-stat--total .basket-stat-value {
-    justify-content: flex-start;
   }
 
   /* Basket cards on narrow phones: the 90px qty box + unit overflowed its
@@ -6628,6 +6637,7 @@
 
   :where(.app-wrapper) .basket-card-stats {
     gap: 14px 16px;
+    --basket-qty-h: 44px;
   }
 
   :where(.app-wrapper) .basket-stat-label {
@@ -6649,7 +6659,6 @@
 
   :where(.app-wrapper) .basket-qty-field .bom-qty-edit {
     width: 100%;
-    height: 44px;
     padding-left: 8px;
     padding-right: 36px;
   }
@@ -6741,17 +6750,6 @@
   /* Category links: one swipeable row instead of wrapping. */
 }
 
-/* Small phones: basket item total sits on the right, label still above. */
-@media (max-width: 400px) {
-  :where(.app-wrapper) .basket-stat--total {
-    text-align: right;
-  }
-
-  :where(.app-wrapper) .basket-stat--total .basket-stat-value {
-    justify-content: flex-end;
-  }
-}
-
 /* Very small phones: logo text pushed Account/Basket onto their own row.
    Keep just the logo mark (the svg has a fixed px size, so font-size: 0
    only hides the bare text node). Footer logo is untouched. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@metron-labs/quote-react",
-  "version": "0.1.42",
+  "version": "0.1.43",
   "description": "Metron Labs quote and estimating calculator components for React",
   "license": "UNLICENSED",
   "sideEffects": [