@dmsi/wedgekit-react 0.0.369 → 0.0.371

package/dist/index.css

@@ -30,6 +30,7 @@
     --radius-sm: 0.25rem;
     --radius-md: 0.375rem;
     --radius-xl: 0.75rem;
+    --ease-out: cubic-bezier(0, 0, 0.2, 1);
     --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
     --default-transition-duration: 150ms;
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -651,6 +652,9 @@
   .mb-3 {
     margin-bottom: calc(var(--spacing) * 3);
   }
+  .mb-20 {
+    margin-bottom: calc(var(--spacing) * 20);
+  }
   .mb-mobile-container-padding {
     margin-bottom: var(--spacing-mobile-container-padding);
   }
@@ -748,6 +752,9 @@
   .h-60 {
     height: calc(var(--spacing) * 60);
   }
+  .h-\[24px\] {
+    height: 24px;
+  }
   .h-\[166px\] {
     height: 166px;
   }
@@ -784,6 +791,9 @@
   .min-h-19 {
     min-height: calc(var(--spacing) * 19);
   }
+  .min-h-20 {
+    min-height: calc(var(--spacing) * 20);
+  }
   .min-h-\[34px\] {
     min-height: 34px;
   }
@@ -853,9 +863,6 @@
   .w-screen {
     width: 100vw;
   }
-  .\!max-w-fit {
-    max-width: fit-content !important;
-  }
   .max-w-25 {
     max-width: calc(var(--spacing) * 25);
   }
@@ -868,9 +875,15 @@
   .max-w-\[400px\] {
     max-width: 400px;
   }
+  .max-w-fit {
+    max-width: fit-content;
+  }
   .max-w-full {
     max-width: 100%;
   }
+  .max-w-none {
+    max-width: none;
+  }
   .max-w-screen {
     max-width: 100vw;
   }
@@ -883,6 +896,9 @@
   .min-w-20 {
     min-width: calc(var(--spacing) * 20);
   }
+  .min-w-32 {
+    min-width: calc(var(--spacing) * 32);
+  }
   .min-w-36 {
     min-width: calc(var(--spacing) * 36);
   }
@@ -895,6 +911,9 @@
   .flex-1 {
     flex: 1;
   }
+  .flex-shrink-0 {
+    flex-shrink: 0;
+  }
   .shrink {
     flex-shrink: 1;
   }
@@ -904,6 +923,9 @@
   .flex-grow {
     flex-grow: 1;
   }
+  .flex-grow-1 {
+    flex-grow: 1;
+  }
   .grow {
     flex-grow: 1;
   }
@@ -936,6 +958,9 @@
   .cursor-col-resize {
     cursor: col-resize;
   }
+  .cursor-crosshair {
+    cursor: crosshair;
+  }
   .cursor-default {
     cursor: default;
   }
@@ -954,6 +979,9 @@
   .list-disc {
     list-style-type: disc;
   }
+  .list-none {
+    list-style-type: none;
+  }
   .\[appearance\:textfield\] {
     appearance: textfield;
   }
@@ -981,9 +1009,15 @@
   .flex-row {
     flex-direction: row;
   }
+  .flex-wrap {
+    flex-wrap: wrap;
+  }
   .place-content-center {
     place-content: center;
   }
+  .place-items-center {
+    place-items: center;
+  }
   .\!items-start {
     align-items: flex-start !important;
   }
@@ -1205,6 +1239,10 @@
     border-style: var(--tw-border-style);
     border-width: 1px;
   }
+  .border-0 {
+    border-style: var(--tw-border-style);
+    border-width: 0px;
+  }
   .border-2 {
     border-style: var(--tw-border-style);
     border-width: 2px;
@@ -1300,6 +1338,12 @@
   .border-warning-400 {
     border-color: var(--color-warning-400);
   }
+  .border-white\/70 {
+    border-color: color-mix(in srgb, #ffffff 70%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-white) 70%, transparent);
+    }
+  }
   .border-y-action-400 {
     border-block-color: var(--color-action-400);
   }
@@ -1753,6 +1797,12 @@
   .bg-white {
     background-color: var(--color-white);
   }
+  .bg-white\/10 {
+    background-color: color-mix(in srgb, #ffffff 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
+    }
+  }
   .bg-linear-270 {
     --tw-gradient-position: 270deg;
     @supports (background-image: linear-gradient(in lab, red, red)) {
@@ -1764,6 +1814,10 @@
     --tw-gradient-position: to right in oklab;
     background-image: linear-gradient(var(--tw-gradient-stops));
   }
+  .from-neutral-100 {
+    --tw-gradient-from: var(--color-neutral-100);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
   .from-neutral-300\/\[12\%\] {
     --tw-gradient-from: color-mix(in srgb, #c1c1c1 12%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1775,6 +1829,10 @@
     --tw-gradient-from: var(--color-white);
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
+  .to-\[\#f7f7f7\] {
+    --tw-gradient-to: #f7f7f7;
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
   .to-neutral-300\/\[24\%\] {
     --tw-gradient-to: color-mix(in srgb, #c1c1c1 24%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1789,9 +1847,15 @@
   .object-contain {
     object-fit: contain;
   }
+  .object-cover {
+    object-fit: cover;
+  }
   .object-center {
     object-position: center;
   }
+  .\!p-0 {
+    padding: calc(var(--spacing) * 0) !important;
+  }
   .p-0\.5 {
     padding: calc(var(--spacing) * 0.5);
   }
@@ -2090,6 +2154,9 @@
   .text-action-400 {
     color: var(--color-action-400);
   }
+  .text-brand-text-action-primary-normal {
+    color: var(--color-brand-text-action-primary-normal);
+  }
   .text-icon-action-critical-secondary-normal {
     color: var(--color-icon-action-critical-secondary-normal);
   }
@@ -2225,6 +2292,9 @@
   .opacity-40 {
     opacity: 40%;
   }
+  .opacity-70 {
+    opacity: 70%;
+  }
   .opacity-100 {
     opacity: 100%;
   }
@@ -2255,6 +2325,15 @@
       var(--tw-ring-shadow),
       var(--tw-shadow);
   }
+  .shadow-\[0_0_0_1px_rgba\(0\,0\,0\,0\.15\)\] {
+    --tw-shadow: 0 0 0 1px var(--tw-shadow-color, rgba(0,0,0,0.15));
+    box-shadow:
+      var(--tw-inset-shadow),
+      var(--tw-inset-ring-shadow),
+      var(--tw-ring-offset-shadow),
+      var(--tw-ring-shadow),
+      var(--tw-shadow);
+  }
   .shadow-nav-tab {
     --tw-shadow: 0px -4px 4px -4px var(--tw-shadow-color, rgba(0, 0, 0, 0.32)) inset;
     box-shadow:
@@ -2291,6 +2370,50 @@
       var(--tw-ring-shadow),
       var(--tw-shadow);
   }
+  .ring-2 {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow:
+      var(--tw-inset-shadow),
+      var(--tw-inset-ring-shadow),
+      var(--tw-ring-offset-shadow),
+      var(--tw-ring-shadow),
+      var(--tw-shadow);
+  }
+  .ring-\[3px\] {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow:
+      var(--tw-inset-shadow),
+      var(--tw-inset-ring-shadow),
+      var(--tw-ring-offset-shadow),
+      var(--tw-ring-shadow),
+      var(--tw-shadow);
+  }
+  .ring-border-action-normal {
+    --tw-ring-color: var(--color-border-action-normal);
+  }
+  .ring-brand-400 {
+    --tw-ring-color: var(--color-brand-400);
+  }
+  .ring-brand-400\/0 {
+    --tw-ring-color: var(--color-brand-400);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-color: color-mix(in oklab, var(--color-brand-400) 0%, transparent);
+    }
+  }
+  .ring-neutral-300 {
+    --tw-ring-color: var(--color-neutral-300);
+  }
+  .ring-offset-1 {
+    --tw-ring-offset-width: 1px;
+    --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  }
+  .ring-offset-2 {
+    --tw-ring-offset-width: 2px;
+    --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  }
+  .ring-offset-white {
+    --tw-ring-offset-color: var(--color-white);
+  }
   .outline {
     outline-style: var(--tw-outline-style);
     outline-width: 1px;
@@ -2319,6 +2442,11 @@
   .filter {
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
   }
+  .backdrop-blur-\[1px\] {
+    --tw-backdrop-blur: blur(1px);
+    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+  }
   .transition {
     transition-property:
       color,
@@ -2395,6 +2523,9 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .transition-discrete {
+    transition-behavior: allow-discrete;
+  }
   .duration-100 {
     --tw-duration: 100ms;
     transition-duration: 100ms;
@@ -2411,6 +2542,10 @@
     --tw-ease: var(--ease-in-out);
     transition-timing-function: var(--ease-in-out);
   }
+  .ease-out {
+    --tw-ease: var(--ease-out);
+    transition-timing-function: var(--ease-out);
+  }
   .will-change-transform {
     will-change: transform;
   }
@@ -3117,6 +3252,11 @@
       outline-style: none;
     }
   }
+  .active\:cursor-grabbing {
+    &:active {
+      cursor: grabbing;
+    }
+  }
   .active\:border-background-action-critical-primary-active {
     &:active {
       border-color: var(--color-background-action-critical-primary-active);
@@ -3543,6 +3683,16 @@
       grid-template-columns: repeat(2, minmax(0, 1fr));
     }
   }
+  .md\:block {
+    @media (width >= 768px) {
+      display: block;
+    }
+  }
+  .md\:hidden {
+    @media (width >= 768px) {
+      display: none;
+    }
+  }
   .md\:table-cell {
     @media (width >= 768px) {
       display: table-cell;
@@ -3954,6 +4104,16 @@
       gap: var(--spacing-desktop-layout-group-gap);
     }
   }
+  .desktop\:bg-background-grouped-primary-normal {
+    @container root (width >= 48rem) {
+      background-color: var(--color-background-grouped-primary-normal);
+    }
+  }
+  .desktop\:p-0 {
+    @container root (width >= 48rem) {
+      padding: calc(var(--spacing) * 0);
+    }
+  }
   .desktop\:p-4 {
     @container root (width >= 48rem) {
       padding: calc(var(--spacing) * 4);
@@ -4175,6 +4335,11 @@
       line-height: var(--leading-subheader-desktop);
     }
   }
+  .desktop\:text-icon-primary-normal {
+    @container root (width >= 48rem) {
+      color: var(--color-icon-primary-normal);
+    }
+  }
   .desktop\:\*\:py-desktop-component-padding {
     @container root (width >= 48rem) {
       :is(& > *) {
@@ -4768,6 +4933,15 @@ body {
 @property --tw-drop-shadow-color { syntax: "*"; inherits: false; }
 @property --tw-drop-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
 @property --tw-drop-shadow-size { syntax: "*"; inherits: false; }
+@property --tw-backdrop-blur { syntax: "*"; inherits: false; }
+@property --tw-backdrop-brightness { syntax: "*"; inherits: false; }
+@property --tw-backdrop-contrast { syntax: "*"; inherits: false; }
+@property --tw-backdrop-grayscale { syntax: "*"; inherits: false; }
+@property --tw-backdrop-hue-rotate { syntax: "*"; inherits: false; }
+@property --tw-backdrop-invert { syntax: "*"; inherits: false; }
+@property --tw-backdrop-opacity { syntax: "*"; inherits: false; }
+@property --tw-backdrop-saturate { syntax: "*"; inherits: false; }
+@property --tw-backdrop-sepia { syntax: "*"; inherits: false; }
 @property --tw-duration { syntax: "*"; inherits: false; }
 @property --tw-ease { syntax: "*"; inherits: false; }
 @property --tw-contain-size { syntax: "*"; inherits: false; }
@@ -4833,6 +5007,15 @@ body {
       --tw-drop-shadow-color: initial;
       --tw-drop-shadow-alpha: 100%;
       --tw-drop-shadow-size: initial;
+      --tw-backdrop-blur: initial;
+      --tw-backdrop-brightness: initial;
+      --tw-backdrop-contrast: initial;
+      --tw-backdrop-grayscale: initial;
+      --tw-backdrop-hue-rotate: initial;
+      --tw-backdrop-invert: initial;
+      --tw-backdrop-opacity: initial;
+      --tw-backdrop-saturate: initial;
+      --tw-backdrop-sepia: initial;
       --tw-duration: initial;
       --tw-ease: initial;
       --tw-contain-size: initial;

package/package.json

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

package/src/components/Accordion.tsx

@@ -17,10 +17,18 @@ interface AccordionProps {
   className?: string;
   disabled?: boolean;
   testid?: string;
+  titleAlign?: "start" | "center" | "end";
 }
 
 export function Accordion(props: AccordionProps) {
-  const { isOpen, onClick, className, disabled, testid } = props;
+  const {
+    isOpen,
+    onClick,
+    className,
+    disabled,
+    testid,
+    titleAlign = "center",
+  } = props;
   const {
     title,
     before,
@@ -53,11 +61,22 @@ export function Accordion(props: AccordionProps) {
       onClick={handleClick}
       testid={testid}
     >
-      <Stack sizing="component" horizontal justify="between" items="center">
-        <Stack sizing="layout-group" horizontal items="center">
+      <Stack
+        sizing="component"
+        horizontal
+        horizontalMobile
+        justify="between"
+        items="center"
+      >
+        <Stack sizing="layout-group" horizontal items={titleAlign}>
           {before}
           {typeof title === "string" ? (
-            <Paragraph testid={testid ? `${testid}-title` : undefined} className="text-text-primary-normal">{title}</Paragraph>
+            <Paragraph
+              testid={testid ? `${testid}-title` : undefined}
+              className="text-text-primary-normal"
+            >
+              {title}
+            </Paragraph>
           ) : (
             title
           )}

package/src/components/CompactImagesPreview.tsx

@@ -0,0 +1,99 @@
+import { useCallback } from "react";
+import { Stack } from "./Stack";
+import clsx from "clsx";
+import { useMatchesMobile } from "../hooks";
+
+type ImageSource = { uri: string; name: string };
+
+type CompactImagesPreviewProps = {
+  sources: ImageSource[];
+  currentSourceIndex: number;
+  placeholderImageUri?: string;
+  activeImageWidth?: number;
+  activeImageHeight?: number;
+  thumbnailWidth?: number;
+  thumbnailHeight?: number;
+  enableThumbnailBorder?: boolean;
+  onChangeSource: (newIndex: number) => void;
+};
+export function CompactImagesPreview(props: CompactImagesPreviewProps) {
+  const {
+    sources,
+    currentSourceIndex = 0,
+    activeImageHeight = 243,
+    activeImageWidth = 242,
+    thumbnailWidth = 30.5,
+    thumbnailHeight = 30,
+    enableThumbnailBorder = false,
+    placeholderImageUri,
+    onChangeSource,
+  } = props;
+  const isMobile = useMatchesMobile();
+  const imagesCount = sources.length;
+
+  const handleThumbnailClick = useCallback(
+    (newIndex: number) => {
+      if (newIndex === currentSourceIndex) return;
+      if (newIndex < 0 || newIndex >= imagesCount) return;
+      onChangeSource(newIndex);
+    },
+    [currentSourceIndex, onChangeSource, imagesCount],
+  );
+
+  if (
+    !sources.length ||
+    currentSourceIndex >= sources.length ||
+    typeof isMobile === "undefined"
+  )
+    return (
+      <img
+        className="object-center"
+        style={{ width: activeImageWidth, height: activeImageHeight }}
+        src={placeholderImageUri}
+        alt={"placeholder image"}
+      />
+    );
+  const currentSource = sources[currentSourceIndex];
+  return (
+    <Stack sizing="layout">
+      <img
+        style={{
+          width: isMobile ? "100%" : activeImageWidth,
+          height: activeImageHeight,
+          objectPosition: "center",
+        }}
+        src={currentSource.uri}
+        alt={currentSource.name}
+      />
+      {sources.length > 1 && (
+        <div className="flex flex-row flex-wrap items-center gap-3">
+          {sources.map((source, index) => (
+            <button
+              key={`compact-image-${source.uri}-${index}`}
+              onClick={(e) => {
+                e.preventDefault();
+                handleThumbnailClick(index);
+              }}
+              className={clsx(
+                "cursor-pointer",
+                currentSourceIndex === index && enableThumbnailBorder
+                  ? "ring-2 ring-offset-2 ring-brand-400 transition-discrete duration-300"
+                  : "ring-brand-400/0",
+              )}
+            >
+              <img
+                src={source.uri}
+                alt={source.name}
+                style={{
+                  width: thumbnailWidth,
+                  height: thumbnailHeight,
+                  objectPosition: "center",
+                }}
+              />
+            </button>
+          ))}
+        </div>
+      )}
+    </Stack>
+  );
+}

package/src/components/ContentTabs.tsx

@@ -21,6 +21,7 @@ export type ContentTabsProps = {
   id?: string;
   testid?: string;
   selectedTab?: SelectedTab | null;
+  contentPadding?: boolean;
 };
 
 const afterClasses =
@@ -33,6 +34,7 @@ export const ContentTabs = ({
   id,
   testid,
   selectedTab,
+  contentPadding = true,
 }: ContentTabsProps) => {
   const [selectedTabId, setSelectedTabId] = useState<string>(tabs[0]?.id || "");
   const [focusedTabIndex, setFocusedTabIndex] = useState<number>(0);
@@ -75,7 +77,7 @@ export const ContentTabs = ({
 
   return (
     <div id={id} data-testid={testid}>
-      <div className="overflow-x-auto pb-2">
+      <div className={clsx("overflow-x-auto", contentPadding && "pb-2")}>
         <div
           id={id ? `${id}-tablist` : undefined}
           data-testid={testid ? `${testid}-tablist` : undefined}

package/src/components/DataGrid/types.ts

@@ -87,5 +87,10 @@ declare module "@tanstack/react-table" {
     }) => ReactNode;
     align?: "left" | "right";
     format?: string;
+    mobileCell?: (props: {
+      column: ColumnDef<TData>;
+      cellValue: unknown;
+      row: RowData;
+    }) => React.ReactNode;
   }
 }

package/src/components/Grid.tsx

@@ -91,6 +91,7 @@ export const Grid = ({
   columns,
   id,
   testid,
+  style,
 }: GridProps) => {
   const childCount = Children.count(children);
   return (
@@ -121,6 +122,7 @@ export const Grid = ({
         "w-full grid",
         getGridClasses(childCount, hasSideMenu, columns),
       )}
+      style={style}
     >
       {children}
     </div>

package/src/components/ImagePlaceholder.tsx

@@ -0,0 +1,22 @@
+import { SVGProps, useId } from "react";
+export function ImagePlaceholder(props: SVGProps<SVGSVGElement>) {
+  const clipId = useId();
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={242}
+      height={243}
+      fill="none"
+      {...props}
+    >
+      <g clipPath={`url(#${clipId})`}>
+        <rect width={props.width} height={props.width} fill="#F7F7F7" rx={2} />
+      </g>
+      <defs>
+        <clipPath id={clipId}>
+          <rect width={props.width} height={props.width} fill="#fff" rx={2} />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}

package/src/components/MobileDataGrid/ColumnList.tsx

@@ -0,0 +1,66 @@
+import clsx from "clsx";
+import { useGridContext } from "./GridContextProvider/useGridContext";
+import { MobileDataGridCard } from "./MobileDataGridCard";
+import { GridContextType } from "./GridContextProvider/GridContext";
+import { RowActions } from "./types";
+
+type ColumnListProps<T> = {
+  withBorder?: boolean;
+  renderLink?: (data: T) => React.ReactNode;
+  renderChevron?: boolean;
+  enableRowSelection?: boolean;
+  footer?: (ctx: GridContextType<T>) => React.ReactNode;
+  rowActions?: RowActions<T>;
+};
+export function ColumnList<T extends Record<string, unknown>>(
+  props: ColumnListProps<T>,
+) {
+  const {
+    withBorder,
+    renderLink,
+    renderChevron,
+    footer: Footer,
+    enableRowSelection,
+    rowActions,
+  } = props;
+  const ctx = useGridContext<T>();
+  const { id, testid, data, getId, selectedRowIds } = ctx;
+  return (
+    <div
+      className={clsx(
+        "flex flex-col flex-1 relative overflow-y-auto overflow-x-hidden",
+        !!Footer && "mb-20",
+      )}
+    >
+      <ul
+        id={id}
+        data-testid={testid}
+        className={clsx(
+          "rounded absolute top-0 left-0 w-full flex-1",
+          "divide-y divide-border-primary-normal",
+          withBorder && "border border-border-primary-normal",
+        )}
+      >
+        {data.map((item) => {
+          const id = getId(item);
+          return (
+            <MobileDataGridCard
+              data={item}
+              key={id}
+              renderLink={renderLink}
+              enableRowSelection={enableRowSelection}
+              selected={!!id && selectedRowIds.includes(id)}
+              renderChevron={renderChevron}
+              rowActions={rowActions}
+            />
+          );
+        })}
+        {!!Footer && (
+          <div className="fixed left-0 right-0 bottom-0 flex flex-col w-full min-h-20">
+            <Footer {...ctx} />
+          </div>
+        )}
+      </ul>
+    </div>
+  );
+}