@dmsi/wedgekit-react 0.0.500 → 0.0.501

package/dist/components/index.js

@@ -2,41 +2,41 @@ import {
   DataGrid,
   DateInput,
   MobileDataGrid
-} from "../chunk-TWDH7ZDS.js";
+} from "../chunk-LJWQEZUS.js";
 import "../chunk-M7INAUAJ.js";
-import "../chunk-YD3HWIUJ.js";
-import "../chunk-3DEYCNUE.js";
+import "../chunk-ELXVDRWS.js";
+import "../chunk-3UUCDNX3.js";
 import {
   ProductImagePreview
-} from "../chunk-XHQOTLG6.js";
+} from "../chunk-FJRYHJUV.js";
 import "../chunk-BQNPOGD5.js";
 import {
   SearchResultImage
 } from "../chunk-Y5GD2FJA.js";
 import {
   PDFViewer
-} from "../chunk-4LBQSSGH.js";
-import "../chunk-YEZBNQZI.js";
-import "../chunk-B53XDCLO.js";
+} from "../chunk-6XLESQ2U.js";
+import "../chunk-VOSQMHNF.js";
+import "../chunk-YJGDVWTH.js";
 import "../chunk-S5ZJ3Q7P.js";
 import "../chunk-MBZ55T2D.js";
 import "../chunk-2IKT6IHB.js";
 import "../chunk-YCDDBSVU.js";
 import "../chunk-3X3Y4TMS.js";
-import "../chunk-QMSPTD6L.js";
-import "../chunk-XIXQUEYC.js";
+import "../chunk-PRN2EQBX.js";
+import "../chunk-5YNEY3WO.js";
 import "../chunk-5IFPG6TS.js";
 import "../chunk-AJ5M6MVX.js";
-import "../chunk-KW6V7O3H.js";
-import "../chunk-JUFBGNWW.js";
+import "../chunk-UI7P5J5S.js";
+import "../chunk-56RPZLV7.js";
 import {
   Tooltip
-} from "../chunk-7GHD74J3.js";
+} from "../chunk-MDB26F6T.js";
 import "../chunk-AT4AWD6B.js";
 import "../chunk-EWGHVZL5.js";
 import {
   SimpleTable
-} from "../chunk-7BVUTFZ5.js";
+} from "../chunk-OWHPPZZA.js";
 import {
   SkeletonParagraph
 } from "../chunk-L3BXRDLP.js";
@@ -45,19 +45,19 @@ import {
 } from "../chunk-34VEVX5H.js";
 import {
   Pagination
-} from "../chunk-GRGDX7JC.js";
+} from "../chunk-LB7UT6F3.js";
 import {
   Select
-} from "../chunk-PIBHG6DH.js";
-import "../chunk-TOKS63IK.js";
+} from "../chunk-2TNHD4MQ.js";
+import "../chunk-BMPL6LCR.js";
 import "../chunk-4RJKB7LC.js";
-import "../chunk-FG7GNGE3.js";
-import "../chunk-X4UK7HE2.js";
+import "../chunk-WVVEOCEH.js";
+import "../chunk-CMMQTIVM.js";
 import "../chunk-AG43RS4Q.js";
-import "../chunk-ZQJMNPCF.js";
+import "../chunk-AKJUBFJK.js";
 import {
   ListGroup
-} from "../chunk-6TYWM26K.js";
+} from "../chunk-SUSUNSVZ.js";
 import "../chunk-SBRRNFOP.js";
 import "../chunk-Y2GK27RX.js";
 import "../chunk-QVWYTQKL.js";
@@ -66,62 +66,62 @@ import {
   DataGridCell,
   DragAlongCell,
   DraggableCellHeader
-} from "../chunk-HIKWIY5Q.js";
+} from "../chunk-CHUKGR7S.js";
 import {
   Menu
 } from "../chunk-TCMOGTPB.js";
 import "../chunk-DVU5XV7L.js";
 import {
   MenuOption
-} from "../chunk-5R4C5F63.js";
+} from "../chunk-KOU2TO3N.js";
 import {
   Search
-} from "../chunk-5MLYAQQO.js";
+} from "../chunk-HK4S6TRH.js";
 import {
   Input
-} from "../chunk-G4AWTFBQ.js";
+} from "../chunk-KPBG7D3V.js";
 import {
   Label
-} from "../chunk-AL5QIRY3.js";
+} from "../chunk-HXGJVYGQ.js";
 import "../chunk-WVUIIBRR.js";
 import {
   EmptyCartIcon
 } from "../chunk-75USUR3I.js";
-import "../chunk-BTKWHCUE.js";
+import "../chunk-PS6UJZVH.js";
 import {
   Checkbox
-} from "../chunk-WEAVZEE4.js";
+} from "../chunk-M7WHWZ2J.js";
 import {
   CompactImagesPreview
-} from "../chunk-OZBB6RFM.js";
+} from "../chunk-TMHOK37S.js";
 import "../chunk-URYQ24NF.js";
 import "../chunk-VXWSAIB5.js";
 import "../chunk-R3EQIDBX.js";
 import "../chunk-5UH6QUFB.js";
 import {
   Subheader
-} from "../chunk-UCJUC5AZ.js";
+} from "../chunk-BYC6QID5.js";
 import {
   Accordion
-} from "../chunk-IY7SXEVY.js";
+} from "../chunk-MUOYLXBF.js";
 import {
   Card
 } from "../chunk-KBJZUVLM.js";
 import {
   Alert
-} from "../chunk-4UH72JT2.js";
-import "../chunk-H2KC5XUY.js";
+} from "../chunk-SPJ6V6WJ.js";
+import "../chunk-MXSJF6TW.js";
 import {
   Paragraph
-} from "../chunk-ZSETMD4A.js";
-import "../chunk-DORD2EBO.js";
+} from "../chunk-WMPWWFUJ.js";
+import "../chunk-TPXH53SA.js";
 import {
   Icon
 } from "../chunk-NKUETCDA.js";
 import {
   Button
-} from "../chunk-LPY6PMAY.js";
-import "../chunk-IXR65MOU.js";
+} from "../chunk-45AHDOAU.js";
+import "../chunk-7KWFEH56.js";
 import "../chunk-ORMEWXMH.js";
 export {
   Accordion,

package/dist/index.css

@@ -2080,6 +2080,9 @@
   .font-sans {
     font-family: var(--font-sans);
   }
+  .\!text-caption-desktop {
+    font-size: var(--text-caption-desktop) !important;
+  }
   .text-\[0\.6rem\] {
     font-size: 0.6rem;
   }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dmsi/wedgekit-react",
   "private": false,
-  "version": "0.0.500",
+  "version": "0.0.501",
   "type": "module",
   "scripts": {
     "build": "tsup",

package/src/classNames.ts

@@ -145,6 +145,10 @@ export const layoutPaddingY = clsx(
   "py-mobile-layout-padding desktop:py-desktop-layout-padding compact:py-desktop-compact-layout-padding",
 );
 
+export const layoutPaddingX = clsx(
+  "px-mobile-layout-padding desktop:px-desktop-layout-padding compact:px-desktop-compact-layout-padding",
+);
+
 export const containerPaddingX = clsx(
   "px-mobile-container-padding desktop:px-desktop-container-padding compact:px-desktop-compact-container-padding",
 );

package/src/components/Breadcrumbs.tsx

@@ -40,7 +40,7 @@ export const Breadcrumb = ({
       <Link
         id={id ? `${id}-link` : undefined}
         data-testid={testid ? `${testid}-link` : undefined}
-        className={linkPadding}
+        className={clsx(linkPadding, "!text-caption-desktop")}
         href={href}
         typographyStyle="breadcrumb"
         onClick={onClick}

package/src/components/HorizontalDivider.tsx

@@ -1,9 +1,22 @@
 import clsx from "clsx";
+import type { HTMLAttributes } from "react";
 
-export function HorizontalDivider({ id, testid, hideOnMobile }: { id?: string, testid?: string, hideOnMobile?: boolean }) {
-  const hideOnMobileStyle = clsx(hideOnMobile && "hidden desktop:block")
+type HorizontalDividerProps = HTMLAttributes<HTMLHRElement> & {
+  testid?: string;
+  hideOnMobile?: boolean;
+};
 
+export function HorizontalDivider({ id, testid, hideOnMobile, className, ...rest }: HorizontalDividerProps) {
   return (
-    <hr id={id} data-testid={testid} className={clsx("w-full border-t border-border-primary-normal", hideOnMobileStyle)} />
+    <hr
+      id={id}
+      data-testid={testid}
+      className={clsx(
+        "w-full border-t border-border-primary-normal",
+        hideOnMobile && "hidden desktop:block",
+        className
+      )}
+      {...rest}
+    />
   );
 }

package/src/components/MobileDataGrid/MobileDataGridCard/MobileDataGridColumn.tsx

@@ -1,5 +1,6 @@
 import { Paragraph } from "../../Paragraph";
 import { ColumnDef } from "@tanstack/react-table";
+import { formatDate } from "../../../utils";
 
 export function MobileDataGridColumn<T extends Record<string, unknown>>(props: {
   column: ColumnDef<T>;
@@ -7,14 +8,20 @@ export function MobileDataGridColumn<T extends Record<string, unknown>>(props: {
 }) {
   const { column, data } = props;
 
+  let value: unknown;
+  if (column.id) {
+    value = data[column.id];
+    if (column.meta?.format === "date" && typeof value === "string") {
+      value = formatDate(value);
+    }
+  }
+
   return (
-    <div className="grid grid-cols-2 gap-2 px-3 flex-1">
+    <div className="grid grid-cols-2 gap-2 flex-1">
       <Paragraph color="text-secondary-normal" className="text-left">
         {column.header?.toString()}:
       </Paragraph>{" "}
-      {column.id && data[column.id]
-        ? (data[column.id] as React.ReactNode)
-        : null}
+      {value ? (value as React.ReactNode) : null}
     </div>
   );
-}
+}

package/src/components/MobileDataGrid/MobileDataGridCard/index.tsx

@@ -7,6 +7,7 @@ import clsx from "clsx";
 import { MobileDataGridColumn } from "./MobileDataGridColumn";
 import { Subheader } from "../../Subheader";
 import { RowActions } from "../types";
+import { layoutGroupGap, layoutPaddingX, paddingYUsingLayoutGroupGap } from "../../../classNames";
 
 export function MobileDataGridCard<T extends Record<string, unknown>>({
   renderLink,
@@ -32,8 +33,12 @@ export function MobileDataGridCard<T extends Record<string, unknown>>({
       id={id ? `${id}-card-${getId(data)}` : undefined}
       data-testid={testid ? `${testid}-card-${getId(data)}` : undefined}
       className={clsx(
+        "flex flex-col",
         "hover:bg-action-100 cursor-pointer list-none",
         selected ? "bg-action-100" : "bg-background-grouped-primary-normal",
+        layoutGroupGap,
+        layoutPaddingX,
+        paddingYUsingLayoutGroupGap
       )}
       onClick={() => openRowDetail(data)}
     >
@@ -44,6 +49,7 @@ export function MobileDataGridCard<T extends Record<string, unknown>>({
               sizing="component"
               padding
               width="fit"
+              style={{ paddingLeft: 0, paddingRight: 8 }}
               onClick={(e) => e.stopPropagation()}
             >
               <Checkbox
@@ -62,6 +68,7 @@ export function MobileDataGridCard<T extends Record<string, unknown>>({
             sizing="component"
             padding
             onClick={(e) => e.stopPropagation()}
+            style={{ paddingInline: 0 }}
           >
             {renderLink ? (
               renderLink(data)
@@ -95,7 +102,7 @@ export function MobileDataGridCard<T extends Record<string, unknown>>({
               column.id ? (
                 <div
                   key={`${column.id}-${index}`}
-                  className="grid grid-cols-2 gap-2 px-3 items-center flex-1"
+                  className="grid grid-cols-2 gap-2 items-center flex-1"
                 >
                   <Paragraph
                     color="text-secondary-normal"
@@ -121,7 +128,9 @@ export function MobileDataGridCard<T extends Record<string, unknown>>({
       </Stack>
       {renderChevron && (
         <Stack items="center" justify="center" horizontal horizontalMobile>
-          <Icon name="keyboard_arrow_down" />
+          <span className="text-icon-primary-normal">
+            <Icon name="keyboard_arrow_down" />
+          </span>
         </Stack>
       )}
     </li>

package/src/components/MobileDataGrid/MobileDataGridHeader.tsx

@@ -42,6 +42,7 @@ export function MobileDataGridHeader<T>({
             items="center"
             justify="between"
             backgroundColor="background-primary-normal"
+            style={{ borderTopRightRadius: 4, borderTopLeftRadius: 4 }}
           >
             {enableRowSelection && (
               <div className="p-mobile-component-padding border-r border-brand-200 max-w-fit h-full">

package/src/components/MobileDataGrid/RowDetailModalProvider/ModalContent.tsx

@@ -18,7 +18,7 @@ export function ModalContent() {
           column.id ? (
             <div
               key={`${column.id}-${index}`}
-              className="grid grid-cols-2 gap-2 px-3 items-center flex-1"
+              className="grid grid-cols-2 gap-2 items-center flex-1"
             >
               <Paragraph color="text-secondary-normal" className="text-left">
                 {column.header?.toString()}:

package/src/components/Stack.tsx

@@ -215,6 +215,7 @@ export const Stack = ({
         flexWrap: flexWrap,
         paddingInline: props.style?.paddingInline,
         gap: props.style?.gap,
+        ...props.style,
       }}
       className={clsx(
         "scrollbar-thin",