@dmsi/wedgekit-react 0.0.388 → 0.0.389

package/dist/components/DateRangeInput.cjs

@@ -62,7 +62,7 @@ __export(DateRangeInput_exports, {
   DateRangeInput: () => DateRangeInput
 });
 module.exports = __toCommonJS(DateRangeInput_exports);
-var import_react36 = require("react");
+var import_react37 = require("react");
 var import_react_dom4 = require("react-dom");
 
 // src/components/Input.tsx
@@ -717,7 +717,7 @@ Percentage.displayName = "Percentage";
 
 // src/components/CalendarRange.tsx
 var import_clsx35 = __toESM(require("clsx"), 1);
-var import_react35 = __toESM(require("react"), 1);
+var import_react36 = __toESM(require("react"), 1);
 var import_polyfill = require("@js-temporal/polyfill");
 
 // src/components/DataGridCell.tsx
@@ -4636,6 +4636,9 @@ var import_jsx_runtime39 = require("react/jsx-runtime");
 // src/components/MobileDataGrid/index.tsx
 var import_jsx_runtime40 = require("react/jsx-runtime");
 
+// src/components/ProductImagePreview/Thumbnail.tsx
+var import_react26 = require("react");
+
 // src/components/ImagePlaceholder.tsx
 var import_react25 = require("react");
 var import_jsx_runtime41 = require("react/jsx-runtime");
@@ -4644,12 +4647,12 @@ var import_jsx_runtime41 = require("react/jsx-runtime");
 var import_jsx_runtime42 = require("react/jsx-runtime");
 
 // src/components/Grid.tsx
-var import_react26 = require("react");
+var import_react27 = require("react");
 var import_clsx30 = __toESM(require("clsx"), 1);
 var import_jsx_runtime43 = require("react/jsx-runtime");
 
 // src/components/ProductImagePreview/ProductPrimaryImage.tsx
-var import_react27 = require("react");
+var import_react28 = require("react");
 
 // src/components/Spinner.tsx
 var import_jsx_runtime44 = require("react/jsx-runtime");
@@ -4685,7 +4688,7 @@ Spinner.displayName = "Spinner";
 var import_jsx_runtime45 = require("react/jsx-runtime");
 
 // src/components/ProductImagePreview/ZoomWindow.tsx
-var import_react28 = require("react");
+var import_react29 = require("react");
 
 // src/components/Surface.tsx
 var import_clsx31 = __toESM(require("clsx"), 1);
@@ -4730,30 +4733,30 @@ var import_clsx32 = require("clsx");
 var import_jsx_runtime48 = require("react/jsx-runtime");
 
 // src/components/ProductImagePreview/MobileImageCarousel.tsx
-var import_react29 = require("react");
+var import_react30 = require("react");
 var import_jsx_runtime49 = require("react/jsx-runtime");
 
 // src/components/ProductImagePreview/useProductImagePreview.ts
-var import_react30 = require("react");
+var import_react31 = require("react");
 
 // src/components/ProductImagePreview/index.tsx
 var import_jsx_runtime50 = require("react/jsx-runtime");
 
 // src/components/CompactImagesPreview.tsx
-var import_react31 = require("react");
+var import_react32 = require("react");
 var import_clsx33 = __toESM(require("clsx"), 1);
 var import_jsx_runtime51 = require("react/jsx-runtime");
 
 // src/components/PDFViewer/index.tsx
-var import_react34 = require("react");
+var import_react35 = require("react");
 
 // src/components/PDFViewer/PDFElement.tsx
 var import_react_pdf2 = require("@mikecousins/react-pdf");
-var import_react33 = require("react");
+var import_react34 = require("react");
 
 // src/components/PDFViewer/PDFPage.tsx
 var import_react_pdf = require("@mikecousins/react-pdf");
-var import_react32 = require("react");
+var import_react33 = require("react");
 var import_jsx_runtime52 = require("react/jsx-runtime");
 
 // src/components/PDFViewer/PDFElement.tsx
@@ -4880,20 +4883,20 @@ function CalendarRange({
   const fromDate = parseDate(from);
   const toDate = parseDate(to);
   const today = import_polyfill.Temporal.Now.plainDateISO();
-  const [baseMonth, setBaseMonth] = (0, import_react35.useState)(
+  const [baseMonth, setBaseMonth] = (0, import_react36.useState)(
     fromDate != null ? fromDate : today.with({ day: 1 })
   );
-  const [selecting, setSelecting] = (0, import_react35.useState)("from");
-  const [pendingFrom, setPendingFrom] = (0, import_react35.useState)(void 0);
-  const [hoveredDate, setHoveredDate] = (0, import_react35.useState)(void 0);
-  (0, import_react35.useEffect)(() => {
+  const [selecting, setSelecting] = (0, import_react36.useState)("from");
+  const [pendingFrom, setPendingFrom] = (0, import_react36.useState)(void 0);
+  const [hoveredDate, setHoveredDate] = (0, import_react36.useState)(void 0);
+  (0, import_react36.useEffect)(() => {
     if (fromDate) {
       setBaseMonth(fromDate.with({ day: 1 }));
     } else if (toDate) {
       setBaseMonth(toDate.with({ day: 1 }));
     }
   }, [from, to]);
-  (0, import_react35.useEffect)(() => {
+  (0, import_react36.useEffect)(() => {
     if (fromDate && toDate) {
       setSelecting("from");
       setPendingFrom(void 0);
@@ -5038,14 +5041,14 @@ function CalendarPane({
   const years = Array.from({ length: 100 }).map(
     (_, i) => baseMonth.year - 50 + i
   );
-  const [monthMenuOpen, setMonthMenuOpen] = (0, import_react35.useState)(false);
-  const [yearMenuOpen, setYearMenuOpen] = (0, import_react35.useState)(false);
-  const monthMenuRef = (0, import_react35.useRef)(null);
-  const yearMenuRef = (0, import_react35.useRef)(null);
+  const [monthMenuOpen, setMonthMenuOpen] = (0, import_react36.useState)(false);
+  const [yearMenuOpen, setYearMenuOpen] = (0, import_react36.useState)(false);
+  const monthMenuRef = (0, import_react36.useRef)(null);
+  const yearMenuRef = (0, import_react36.useRef)(null);
   const month = getMonthData(offset);
   const totalCells = 42;
   const emptyCells = month.firstDayOffset;
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_react35.default.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_react36.default.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
       "div",
       {
@@ -5255,24 +5258,24 @@ var DateRangeInput = (_a) => {
     "disableRange",
     "label"
   ]);
-  const [visible, setVisible] = (0, import_react36.useState)(false);
-  const [inputValue, setInputValue] = (0, import_react36.useState)("");
-  const [isTyping, setIsTyping] = (0, import_react36.useState)(false);
-  const popoverRef = (0, import_react36.useRef)(null);
-  const rootRef = (0, import_react36.useRef)(null);
-  const triggerRef = (0, import_react36.useRef)(null);
-  const [calendarPosition, setCalendarPosition] = (0, import_react36.useState)({
+  const [visible, setVisible] = (0, import_react37.useState)(false);
+  const [inputValue, setInputValue] = (0, import_react37.useState)("");
+  const [isTyping, setIsTyping] = (0, import_react37.useState)(false);
+  const popoverRef = (0, import_react37.useRef)(null);
+  const rootRef = (0, import_react37.useRef)(null);
+  const triggerRef = (0, import_react37.useRef)(null);
+  const [calendarPosition, setCalendarPosition] = (0, import_react37.useState)({
     top: 0,
     left: 0,
     width: 0
   });
   const [from, to] = value.split("|");
-  (0, import_react36.useEffect)(() => {
+  (0, import_react37.useEffect)(() => {
     if (!isTyping) {
       setInputValue(formatDisplayValue(from, to));
     }
   }, [from, to, isTyping, disableRange]);
-  (0, import_react36.useLayoutEffect)(() => {
+  (0, import_react37.useLayoutEffect)(() => {
     if (visible) {
       updatePosition();
     }
@@ -5287,7 +5290,7 @@ var DateRangeInput = (_a) => {
       });
     }
   };
-  (0, import_react36.useEffect)(() => {
+  (0, import_react37.useEffect)(() => {
     updatePosition();
     const resizeObserver = new ResizeObserver(updatePosition);
     if (triggerRef.current) {
@@ -5299,7 +5302,7 @@ var DateRangeInput = (_a) => {
       window.removeEventListener("scroll", updatePosition);
     };
   }, []);
-  (0, import_react36.useEffect)(() => {
+  (0, import_react37.useEffect)(() => {
     const handleKeyDown2 = (event) => {
       var _a2;
       if (event.key === "Escape" && popoverRef.current) {
@@ -5312,7 +5315,7 @@ var DateRangeInput = (_a) => {
       document.removeEventListener("keydown", handleKeyDown2);
     };
   }, []);
-  (0, import_react36.useEffect)(() => {
+  (0, import_react37.useEffect)(() => {
     const handleClickOutside = (event) => {
       if (popoverRef.current && !popoverRef.current.contains(event.target) && triggerRef.current && !triggerRef.current.contains(event.target)) {
         setVisible(false);

package/dist/components/DateRangeInput.css

@@ -823,6 +823,9 @@
   .min-h-\[120px\] {
     min-height: 120px;
   }
+  .min-h-full {
+    min-height: 100%;
+  }
   .min-h-min {
     min-height: min-content;
   }
@@ -3594,6 +3597,21 @@
       outline-style: none;
     }
   }
+  .data-active\:border-transparent {
+    &[data-active] {
+      border-color: transparent;
+    }
+  }
+  .data-active\:bg-background-action-primary-normal {
+    &[data-active] {
+      background-color: var(--color-background-action-primary-normal);
+    }
+  }
+  .data-active\:text-white {
+    &[data-active] {
+      color: var(--color-white);
+    }
+  }
   .data-disabled\:cursor-default {
     &[data-disabled] {
       cursor: default;

package/dist/components/DateRangeInput.js

@@ -1,53 +1,52 @@
 import {
   CalendarRange
 } from "../chunk-UOHCOOC2.js";
-import "../chunk-B6FYJZG7.js";
+import "../chunk-OW3WN3JV.js";
 import "../chunk-M7INAUAJ.js";
-import "../chunk-5Z4ODAYB.js";
-import "../chunk-QJTAFSQA.js";
-import "../chunk-A7CEYUVE.js";
-import "../chunk-CQFPNZTN.js";
-import "../chunk-HPQWEZJL.js";
+import "../chunk-6I5LZ2ZC.js";
+import "../chunk-44TDIHUP.js";
+import "../chunk-LZGYABCX.js";
+import "../chunk-G5DEC7H3.js";
+import "../chunk-3X3Y4TMS.js";
 import "../chunk-BQNPOGD5.js";
-import "../chunk-2XHBPMHQ.js";
-import "../chunk-XFZRKXMV.js";
-import "../chunk-DCCTNHNL.js";
-import "../chunk-BPJR54VM.js";
+import "../chunk-LLZ3SSZJ.js";
+import "../chunk-EJSPFQCY.js";
+import "../chunk-ERW5DEIO.js";
+import "../chunk-2HMCS25C.js";
 import "../chunk-VJVY6NPF.js";
 import "../chunk-MBZ55T2D.js";
 import "../chunk-2IKT6IHB.js";
-import "../chunk-KSAN4ZLA.js";
-import "../chunk-QF654HYZ.js";
+import "../chunk-AA6GE3TH.js";
+import "../chunk-KZZKQLKF.js";
 import "../chunk-5IFPG6TS.js";
 import "../chunk-AJ5M6MVX.js";
 import "../chunk-M6TSTDNZ.js";
-import "../chunk-EWGHVZL5.js";
 import "../chunk-QQ5G773N.js";
 import "../chunk-AT4AWD6B.js";
+import "../chunk-EWGHVZL5.js";
 import "../chunk-J5V2JRIK.js";
-import "../chunk-E4AGWXFA.js";
+import "../chunk-D6YCMQPO.js";
 import "../chunk-4RJKB7LC.js";
-import "../chunk-EC7SC3MO.js";
-import "../chunk-AG43RS4Q.js";
-import "../chunk-5OPI4GTJ.js";
+import "../chunk-XM7IQHBU.js";
 import "../chunk-FRHPFACM.js";
+import "../chunk-T36HX6QY.js";
+import "../chunk-AG43RS4Q.js";
 import "../chunk-SBRRNFOP.js";
 import "../chunk-ER6RCOH3.js";
 import "../chunk-EU73QPW7.js";
 import "../chunk-QVWYTQKL.js";
-import "../chunk-77IGUML3.js";
+import "../chunk-NO5BIKWS.js";
+import "../chunk-MQX7GFLX.js";
+import "../chunk-V47RTW7E.js";
 import "../chunk-22VBZWJG.js";
 import "../chunk-NVOZAVEX.js";
 import "../chunk-QNJTYAPX.js";
+import "../chunk-WVUIIBRR.js";
 import "../chunk-6DPFKSCT.js";
 import {
   InputBase
 } from "../chunk-ZL5X7KP6.js";
 import "../chunk-7CS736EF.js";
-import "../chunk-WVUIIBRR.js";
-import "../chunk-NO5BIKWS.js";
-import "../chunk-FSLETAX4.js";
-import "../chunk-WWAPK5PH.js";
 import "../chunk-MYKYZHEO.js";
 import {
   findDocumentRoot
@@ -62,13 +61,14 @@ import {
 } from "../chunk-TYTD4FLW.js";
 import "../chunk-5UH6QUFB.js";
 import "../chunk-FA7IFW66.js";
-import "../chunk-JRHYNZM6.js";
-import "../chunk-4LXG6QNT.js";
+import "../chunk-JIMJIJOF.js";
+import "../chunk-EZCH4PQS.js";
+import "../chunk-GB4ZTUQV.js";
 import "../chunk-OGIFIPKH.js";
-import "../chunk-MX57T3HP.js";
 import {
   Icon
 } from "../chunk-NKUETCDA.js";
+import "../chunk-WWAPK5PH.js";
 import "../chunk-6CTCHYIS.js";
 import {
   __objRest,

package/dist/components/FilterGroup.cjs

@@ -609,6 +609,7 @@ var OptionPill = (_a) => {
     onClick,
     onRemove,
     removable = false,
+    active = false,
     disabled = false,
     children,
     className
@@ -619,19 +620,27 @@ var OptionPill = (_a) => {
     "onClick",
     "onRemove",
     "removable",
+    "active",
     "disabled",
     "children",
     "className"
   ]);
   const additionalAttributes = {
     "data-disabled": disabled || null,
-    "data-selected": selected || null
+    "data-selected": selected || null,
+    "data-active": active || null
   };
   const classNames = (0, import_clsx7.default)(
     {
+      // Base interactive (only when not disabled)
       "hover:border-border-action-hover active:border-border-action-active": !disabled,
+      // Disabled base
       "data-disabled:cursor-default data-disabled:border-border-primary-normal": disabled,
+      // Active (Figma: filled blue background, white text)
+      "data-active:bg-background-action-primary-normal data-active:text-white data-active:border-transparent": active && !selected,
+      // Selected (filled style) overrides background & border, but keeps outline interaction chain.
       "data-selected:border-transparent data-selected:bg-background-action-secondary-hover data-selected:outline-border-action-normal data-selected:hover:outline-border-action-hover data-selected:active:outline-border-action-active": selected,
+      // Disabled + Selected combination
       "data-selected:data-disabled:bg-background-action-secondary-disabled data-selected:data-disabled:border-border-action-disabled data-selected:data-disabled:outline-transparent": disabled && selected
     },
     !removable && componentPadding,
@@ -683,7 +692,7 @@ var OptionPill = (_a) => {
             ),
             iconOnly: true,
             variant: "tertiary",
-            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { name: "close" })
+            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { name: "close", size: 16 })
           }
         )
       ]

package/dist/components/FilterGroup.js

@@ -1,7 +1,13 @@
 "use client";
 import {
   OptionPill
-} from "../chunk-4XTTJOQA.js";
+} from "../chunk-LCJZRP5S.js";
+import {
+  Link
+} from "../chunk-4OMINRN5.js";
+import {
+  Checkbox
+} from "../chunk-NO5BIKWS.js";
 import {
   Search
 } from "../chunk-6DPFKSCT.js";
@@ -9,18 +15,12 @@ import "../chunk-ZL5X7KP6.js";
 import {
   Label
 } from "../chunk-7CS736EF.js";
-import {
-  Checkbox
-} from "../chunk-NO5BIKWS.js";
-import "../chunk-WWAPK5PH.js";
 import "../chunk-5UH6QUFB.js";
 import "../chunk-OGIFIPKH.js";
-import {
-  Link
-} from "../chunk-4OMINRN5.js";
 import {
   Icon
 } from "../chunk-NKUETCDA.js";
+import "../chunk-WWAPK5PH.js";
 import {
   baseTransition,
   componentGap,

package/dist/components/MobileDataGrid/ColumnList.cjs

@@ -366,7 +366,8 @@ var Stack = (_a) => {
     marginBottom,
     testid,
     bottom,
-    zIndex
+    zIndex,
+    flexWrap
   } = _b, props = __objRest(_b, [
     "children",
     "items",
@@ -405,9 +406,10 @@ var Stack = (_a) => {
     "marginBottom",
     "testid",
     "bottom",
-    "zIndex"
+    "zIndex",
+    "flexWrap"
   ]);
-  var _a2, _b2, _c, _d, _e, _f;
+  var _a2, _b2, _c, _d, _e, _f, _g;
   const flexClassNames = getFlexClassNames({ items, justify, grow });
   const gapClassNames = useGapClassNames(sizing);
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -434,7 +436,9 @@ var Stack = (_a) => {
         borderBlock: (_d = props.style) == null ? void 0 : _d.borderBlock,
         marginInline: (_e = props.style) == null ? void 0 : _e.marginInline,
         zIndex: zIndex !== void 0 ? zIndex : void 0,
-        gap: (_f = props.style) == null ? void 0 : _f.gap
+        flexWrap,
+        paddingInline: (_f = props.style) == null ? void 0 : _f.paddingInline,
+        gap: (_g = props.style) == null ? void 0 : _g.gap
       },
       className: (0, import_clsx4.default)(
         "scrollbar-thin",

package/dist/components/MobileDataGrid/ColumnList.js

@@ -1,14 +1,14 @@
 import {
   ColumnList
-} from "../../chunk-KSAN4ZLA.js";
-import "../../chunk-QF654HYZ.js";
+} from "../../chunk-AA6GE3TH.js";
+import "../../chunk-KZZKQLKF.js";
 import "../../chunk-5IFPG6TS.js";
 import "../../chunk-AJ5M6MVX.js";
 import "../../chunk-M6TSTDNZ.js";
 import "../../chunk-NO5BIKWS.js";
 import "../../chunk-FA7IFW66.js";
+import "../../chunk-GB4ZTUQV.js";
 import "../../chunk-OGIFIPKH.js";
-import "../../chunk-MX57T3HP.js";
 import "../../chunk-NKUETCDA.js";
 import "../../chunk-6CTCHYIS.js";
 import "../../chunk-ORMEWXMH.js";

package/dist/components/MobileDataGrid/ColumnSelector/index.cjs

@@ -62,7 +62,7 @@ __export(ColumnSelector_exports, {
   ColumnSelector: () => ColumnSelector
 });
 module.exports = __toCommonJS(ColumnSelector_exports);
-var import_react34 = require("react");
+var import_react35 = require("react");
 
 // src/components/DataGridCell.tsx
 var import_sortable = require("@dnd-kit/sortable");
@@ -4555,6 +4555,9 @@ var import_jsx_runtime38 = require("react/jsx-runtime");
 // src/components/MobileDataGrid/index.tsx
 var import_jsx_runtime39 = require("react/jsx-runtime");
 
+// src/components/ProductImagePreview/Thumbnail.tsx
+var import_react25 = require("react");
+
 // src/components/ImagePlaceholder.tsx
 var import_react24 = require("react");
 var import_jsx_runtime40 = require("react/jsx-runtime");
@@ -4563,12 +4566,12 @@ var import_jsx_runtime40 = require("react/jsx-runtime");
 var import_jsx_runtime41 = require("react/jsx-runtime");
 
 // src/components/Grid.tsx
-var import_react25 = require("react");
+var import_react26 = require("react");
 var import_clsx30 = __toESM(require("clsx"), 1);
 var import_jsx_runtime42 = require("react/jsx-runtime");
 
 // src/components/ProductImagePreview/ProductPrimaryImage.tsx
-var import_react26 = require("react");
+var import_react27 = require("react");
 
 // src/components/Spinner.tsx
 var import_jsx_runtime43 = require("react/jsx-runtime");
@@ -4604,7 +4607,7 @@ Spinner.displayName = "Spinner";
 var import_jsx_runtime44 = require("react/jsx-runtime");
 
 // src/components/ProductImagePreview/ZoomWindow.tsx
-var import_react27 = require("react");
+var import_react28 = require("react");
 
 // src/components/Surface.tsx
 var import_clsx31 = __toESM(require("clsx"), 1);
@@ -4649,30 +4652,30 @@ var import_clsx32 = require("clsx");
 var import_jsx_runtime47 = require("react/jsx-runtime");
 
 // src/components/ProductImagePreview/MobileImageCarousel.tsx
-var import_react28 = require("react");
+var import_react29 = require("react");
 var import_jsx_runtime48 = require("react/jsx-runtime");
 
 // src/components/ProductImagePreview/useProductImagePreview.ts
-var import_react29 = require("react");
+var import_react30 = require("react");
 
 // src/components/ProductImagePreview/index.tsx
 var import_jsx_runtime49 = require("react/jsx-runtime");
 
 // src/components/CompactImagesPreview.tsx
-var import_react30 = require("react");
+var import_react31 = require("react");
 var import_clsx33 = __toESM(require("clsx"), 1);
 var import_jsx_runtime50 = require("react/jsx-runtime");
 
 // src/components/PDFViewer/index.tsx
-var import_react33 = require("react");
+var import_react34 = require("react");
 
 // src/components/PDFViewer/PDFElement.tsx
 var import_react_pdf2 = require("@mikecousins/react-pdf");
-var import_react32 = require("react");
+var import_react33 = require("react");
 
 // src/components/PDFViewer/PDFPage.tsx
 var import_react_pdf = require("@mikecousins/react-pdf");
-var import_react31 = require("react");
+var import_react32 = require("react");
 var import_jsx_runtime51 = require("react/jsx-runtime");
 
 // src/components/PDFViewer/PDFElement.tsx
@@ -4692,8 +4695,8 @@ var import_jsx_runtime55 = require("react/jsx-runtime");
 var import_jsx_runtime56 = require("react/jsx-runtime");
 function ColumnSelector() {
   const context = useGridContext();
-  const ref = (0, import_react34.useRef)(null);
-  const [show, setShow] = (0, import_react34.useState)(false);
+  const ref = (0, import_react35.useRef)(null);
+  const [show, setShow] = (0, import_react35.useState)(false);
   const {
     columns,
     id,
@@ -4704,7 +4707,7 @@ function ColumnSelector() {
     resetColumnVisibility,
     dispatch
   } = context;
-  const toggleColumnVisibility = (0, import_react34.useCallback)(
+  const toggleColumnVisibility = (0, import_react35.useCallback)(
     (index, visible) => {
       dispatch({ type: "UPDATE", index, payload: { meta: { visible } } });
     },

package/dist/components/MobileDataGrid/ColumnSelector/index.css

@@ -823,6 +823,9 @@
   .min-h-\[120px\] {
     min-height: 120px;
   }
+  .min-h-full {
+    min-height: 100%;
+  }
   .min-h-min {
     min-height: min-content;
   }
@@ -3594,6 +3597,21 @@
       outline-style: none;
     }
   }
+  .data-active\:border-transparent {
+    &[data-active] {
+      border-color: transparent;
+    }
+  }
+  .data-active\:bg-background-action-primary-normal {
+    &[data-active] {
+      background-color: var(--color-background-action-primary-normal);
+    }
+  }
+  .data-active\:text-white {
+    &[data-active] {
+      color: var(--color-white);
+    }
+  }
   .data-disabled\:cursor-default {
     &[data-disabled] {
       cursor: default;