@dmsi/wedgekit-react 0.0.231 → 0.0.233

package/dist/index.css

@@ -146,6 +146,8 @@
     --text-caption-desktop-compact: 12px;
     --leading-caption-desktop: 1.333;
     --leading-caption-mobile: 1.333;
+    --spacing-mobile-breadcrumb: 24px;
+    --spacing-desktop-breadcrumb: 24px;
     --spacing-desktop-container-gap: 16px;
     --spacing-mobile-container-gap: 16px;
     --spacing-desktop-compact-container-gap: 16px;
@@ -1881,12 +1883,12 @@
   .py-4 {
     padding-block: calc(var(--spacing) * 4);
   }
+  .py-\[2px\] {
+    padding-block: 2px;
+  }
   .py-\[15px\] {
     padding-block: 15px;
   }
-  .py-\[calc\(var\(--spacing-mobile-component-padding\)_\+_3px\)\] {
-    padding-block: calc(var(--spacing-mobile-component-padding) + 3px);
-  }
   .py-mobile-component-gap {
     padding-block: var(--spacing-mobile-component-gap);
   }
@@ -2027,6 +2029,10 @@
     --tw-leading: var(--leading-link-mobile);
     line-height: var(--leading-link-mobile);
   }
+  .leading-mobile-breadcrumb {
+    --tw-leading: var(--spacing-mobile-breadcrumb);
+    line-height: var(--spacing-mobile-breadcrumb);
+  }
   .leading-paragraph-mobile {
     --tw-leading: var(--leading-paragraph-mobile);
     line-height: var(--leading-paragraph-mobile);
@@ -3689,11 +3695,6 @@
       padding-inline: var(--spacing-desktop-compact-layout-padding);
     }
   }
-  .compact\:py-\[calc\(var\(--spacing-desktop-compact-component-padding\)_\+_3px\)\] {
-    &:where([data-compact]) {
-      padding-block: calc(var(--spacing-desktop-compact-component-padding) + 3px);
-    }
-  }
   .compact\:py-desktop-compact-component-gap {
     &:where([data-compact]) {
       padding-block: var(--spacing-desktop-compact-component-gap);
@@ -4005,11 +4006,6 @@
       padding-inline: var(--spacing-desktop-layout-padding);
     }
   }
-  .desktop\:py-\[calc\(var\(--spacing-desktop-component-padding\)_\+_3px\)\] {
-    @container root (width >= 48rem) {
-      padding-block: calc(var(--spacing-desktop-component-padding) + 3px);
-    }
-  }
   .desktop\:py-desktop-component-gap {
     @container root (width >= 48rem) {
       padding-block: var(--spacing-desktop-component-gap);
@@ -4111,6 +4107,12 @@
       line-height: var(--leading-caption-desktop);
     }
   }
+  .desktop\:leading-desktop-breadcrumb {
+    @container root (width >= 48rem) {
+      --tw-leading: var(--spacing-desktop-breadcrumb);
+      line-height: var(--spacing-desktop-breadcrumb);
+    }
+  }
   .desktop\:leading-display-1-desktop {
     @container root (width >= 48rem) {
       --tw-leading: var(--leading-display-1-desktop);

package/package.json

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

package/src/classNames.ts

@@ -65,6 +65,12 @@ export const typography = {
     "text-caption-mobile desktop:text-caption-desktop compact:text-caption-desktop-compact",
     "leading-caption-mobile desktop:leading-caption-desktop",
   ),
+
+  breadcrumb: clsx(
+    "font-sans font-normal",
+    "text-paragraph-mobile desktop:text-paragraph-desktop compact:text-paragraph-desktop-compact",
+    "leading-mobile-breadcrumb desktop:leading-desktop-breadcrumb",
+  ),
 };
 
 export const baseTransition = clsx(
@@ -96,8 +102,8 @@ export const componentPaddingBottom = clsx(
 );
 
 export const componentPaddingX = clsx(
-  "px-mobile-component-padding desktop:px-desktop-component-padding compact:px-desktop-compact-component-padding"
-)
+  "px-mobile-component-padding desktop:px-desktop-component-padding compact:px-desktop-compact-component-padding",
+);
 
 export const componentPaddingY = clsx(
   "py-mobile-component-padding desktop:py-desktop-component-padding compact:py-desktop-compact-component-padding",
@@ -120,7 +126,7 @@ export const componentPaddingMinus2pxBorder = clsx(
 );
 
 export const layoutPaddding = clsx(
-  "p-mobile-layout-padding desktop:p-desktop-layout-padding compact:p-desktop-compact-layout-padding"
+  "p-mobile-layout-padding desktop:p-desktop-layout-padding compact:p-desktop-compact-layout-padding",
 );
 
 export const layoutPaddingBottom = clsx(

package/src/components/Breadcrumbs.tsx

@@ -26,13 +26,13 @@ export const Breadcrumb = ({
   children,
   onClick,
   id,
-  testid
+  testid,
 }: BreadcrumbProps) => {
   const linkPadding = clsx(
     "!text-text-link-normal  whitespace-nowrap",
-    "py-[calc(var(--spacing-mobile-component-padding)_+_3px)]",
-    "desktop:py-[calc(var(--spacing-desktop-component-padding)_+_3px)]",
-    "compact:py-[calc(var(--spacing-desktop-compact-component-padding)_+_3px)]",
+    "py-mobile-component-padding",
+    "desktop:py-desktop-component-padding",
+    "compact:py-desktop-compact-component-padding",
   );
 
   return (
@@ -42,6 +42,7 @@ export const Breadcrumb = ({
         data-testid={testid ? `${testid}-link` : undefined}
         className={linkPadding}
         href={href}
+        typographyStyle="breadcrumb"
         onClick={onClick}
       >
         {children}
@@ -56,7 +57,12 @@ const Chevron = () => (
   </li>
 );
 
-export const Breadcrumbs = ({ asCardStyle, id, testid, crumbs }: BreadcrumbsProps) => {
+export const Breadcrumbs = ({
+  asCardStyle,
+  id,
+  testid,
+  crumbs,
+}: BreadcrumbsProps) => {
   const scrollableElement = React.useRef<HTMLElement | null>(null);
   const [isOverflow, setIsOverflow] = useState(false);
 
@@ -88,7 +94,8 @@ export const Breadcrumbs = ({ asCardStyle, id, testid, crumbs }: BreadcrumbsProp
         {
           "bg-white rounded-base shadow-4 px-mobile-layout-padding desktop:px-desktop-layout-padding compact:px-desktop-compact-layout-padding":
             asCardStyle,
-          "px-mobile-container-padding desktop:px-desktop-container-padding compact:px-desktop-compact-container-padding": !asCardStyle,
+          "px-mobile-container-padding desktop:px-desktop-container-padding compact:px-desktop-compact-container-padding":
+            !asCardStyle,
         },
       )}
       aria-label="Breadcrumb"

package/src/components/CalendarRange.tsx

@@ -6,8 +6,9 @@ import {
   layoutGap,
 } from "../classNames";
 import { Icon } from "./Icon";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { Temporal } from "@js-temporal/polyfill";
+import { Menu, MenuOption } from ".";
 
 export interface CalendarRangeProps {
   from?: string | number;
@@ -218,6 +219,19 @@ export function CalendarRange({
     };
   }
 
+  function getMonthDataWith(monthOffset: number) {
+    const monthDate = baseMonth.with({ month: monthOffset }).with({ day: 1 });
+    const days = monthDate.daysInMonth;
+    const firstDayOffset = monthDate.dayOfWeek % 7;
+    return {
+      name: monthDate.toLocaleString("en-US", { month: "long" }),
+      year: monthDate.year,
+      days,
+      firstDayOffset,
+      date: monthDate,
+    };
+  }
+
   // Click handlers
   function handleDayClick(date: Temporal.PlainDate) {
     if (isDateAvailable && !isDateAvailable(date)) return;
@@ -297,177 +311,314 @@ export function CalendarRange({
         )}
       >
         {(mode === "double" ? [0, 1] : [0]).map((offset, idx) => {
-          const month = getMonthData(offset);
-          // Always show 6 weeks (42 days)
-          const totalCells = 42;
-          const emptyCells = month.firstDayOffset;
           return (
-            <React.Fragment key={month.name + month.year}>
-              <div
-                // key={month.name + month.year}
-                className={clsx("flex flex-col")}
-              >
-                <div
-                  className={clsx(
-                    "flex flex-row items-center justify-between",
-                    typography.label,
-                    "text-text-action-primary-normal",
-                  )}
-                >
-                  {idx === 0 ? (
-                    <button
-                      id={id ? `${id}-prev-month-button` : undefined}
-                      data-testid={
-                        testid ? `${testid}-prev-month-button` : undefined
-                      }
-                      type="button"
-                      className={clsx(
-                        "flex items-center justify-center rounded-base hover:bg-action-100 active:bg-action-300 text-icon-action-primary-normal",
-                        componentPadding,
-                      )}
-                      aria-label="Previous month"
-                      onClick={() =>
-                        setBaseMonth(baseMonth.subtract({ months: 1 }))
-                      }
-                    >
-                      <Icon name="chevron_left" size={24} />
-                    </button>
-                  ) : (
-                    <span className={clsx(componentPadding, "mr-1")} />
-                  )}
-                  <div className="flex gap-desktop-compact-component-padding">
-                    <span className="font-semibold text-text-action-primary-normal text-[14px] leading-[1] truncate">
-                      {month.name}
-                    </span>
-                    <span className="font-semibold text-text-action-primary-normal text-[14px] leading-[1] px-1 truncate">
-                      {month.year}
-                    </span>
-                  </div>
-                  {(mode === "double" ? idx === 1 : true) ? (
-                    <button
-                      id={id ? `${id}-next-month-button` : undefined}
-                      data-testid={
-                        testid ? `${testid}-next-month-button` : undefined
-                      }
-                      type="button"
-                      className={clsx(
-                        "flex items-center justify-center rounded-base hover:bg-action-100 active:bg-action-300 text-icon-action-primary-normal",
-                        componentPadding,
-                      )}
-                      aria-label="Next month"
-                      onClick={() => setBaseMonth(baseMonth.add({ months: 1 }))}
-                    >
-                      <Icon name="chevron_right" size={24} />
-                    </button>
-                  ) : (
-                    <span className={clsx(componentPadding, "ml-1")} />
-                  )}
-                </div>
-                <div className={clsx("grid grid-cols-7")}>
-                  {weekDays.map((d) => (
-                    <span
-                      key={d}
-                      className={clsx(
-                        typography.caption,
-                        "text-text-secondary-normal text-center",
-                        "w-10",
-                      )}
-                    >
-                      {d}
-                    </span>
-                  ))}
-                </div>
-                <div className={clsx("grid grid-cols-7")}>
-                  {Array.from({ length: totalCells }).map((_, i) => {
-                    const day = i - emptyCells + 1;
-                    const date = month.date.with({ day: 1 }).add({
-                      days: i - emptyCells,
-                    });
-                    const isInMonth = day > 0 && day <= month.days;
-                    const isToday = isInMonth && date.equals(today);
-                    const isSelected =
-                      isInMonth &&
-                      ((!pendingFrom && fromDate && date.equals(fromDate)) ||
-                        (!pendingFrom && toDate && date.equals(toDate)) ||
-                        (pendingFrom && date.equals(pendingFrom)));
-                    const inRange = isInMonth && isInRange(date);
-                    const isDisabled =
-                      !isInMonth ||
-                      (isDateAvailable ? !isDateAvailable(date) : false);
-                    // New: determine if this is the start or end of the range
+            <CalendarPane
+              key={idx}
+              getMonthData={getMonthData}
+              getMonthDataWith={getMonthDataWith}
+              offset={offset}
+              idx={idx}
+              id={id}
+              testid={testid}
+              baseMonth={baseMonth}
+              setBaseMonth={setBaseMonth}
+              mode={mode}
+              pendingFrom={pendingFrom}
+              weekDays={weekDays}
+              fromDate={fromDate}
+              toDate={toDate}
+              isDateAvailable={isDateAvailable}
+              disableRange={disableRange}
+              hoveredDate={hoveredDate}
+              isInRange={isInRange}
+              today={today}
+              setHoveredDate={setHoveredDate}
+              handleDayClick={handleDayClick}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+function CalendarPane({
+  getMonthData,
+  getMonthDataWith,
+  offset,
+  idx,
+  id,
+  testid,
+  baseMonth,
+  setBaseMonth,
+  mode,
+  pendingFrom,
+  weekDays,
+  fromDate,
+  toDate,
+  isDateAvailable,
+  disableRange,
+  hoveredDate,
+  isInRange,
+  today,
+  setHoveredDate,
+  handleDayClick,
+}: {
+  getMonthData: (offset: number) => {
+    name: string;
+    year: number;
+    days: number;
+    firstDayOffset: number;
+    date: Temporal.PlainDate;
+  };
+  getMonthDataWith: (offset: number) => {
+    name: string;
+    year: number;
+    days: number;
+    firstDayOffset: number;
+    date: Temporal.PlainDate;
+  };
+  offset: number;
+  idx: number;
+  id: string | undefined;
+  testid: string | undefined;
+  baseMonth: Temporal.PlainDate;
+  setBaseMonth: (date: Temporal.PlainDate) => void;
+  mode: "single" | "range" | "double";
+  pendingFrom: Temporal.PlainDate | undefined;
+  weekDays: string[];
+  fromDate: Temporal.PlainDate | undefined;
+  toDate: Temporal.PlainDate | undefined;
+  isDateAvailable?: (date: Temporal.PlainDate) => boolean;
+  disableRange: boolean;
+  hoveredDate: Temporal.PlainDate | undefined;
+  isInRange: (date: Temporal.PlainDate) => boolean;
+  today: Temporal.PlainDate;
+  setHoveredDate: (date: Temporal.PlainDate | undefined) => void;
+  handleDayClick: (date: Temporal.PlainDate) => void;
+}) {
+  const months = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
+  const years = Array.from({ length: 100 }).map(
+    (_, i) => baseMonth.year - 50 + i,
+  );
+  const [monthMenuOpen, setMonthMenuOpen] = useState(false);
+  const [yearMenuOpen, setYearMenuOpen] = useState(false);
 
-                    const hoverDateIsBeforePendingFrom =
-                      hoveredDate &&
-                      pendingFrom &&
-                      Temporal.PlainDate.compare(hoveredDate, pendingFrom) < 0;
+  const monthMenuRef = useRef<HTMLButtonElement | null>(null);
+  const yearMenuRef = useRef<HTMLButtonElement | null>(null);
+  const month = getMonthData(offset);
+  // Always show 6 weeks (42 days)
+  const totalCells = 42;
+  const emptyCells = month.firstDayOffset;
+  return (
+    <React.Fragment key={month.name + month.year}>
+      <div
+        // key={month.name + month.year}
+        className={clsx("flex flex-col")}
+      >
+        <div
+          className={clsx(
+            "flex flex-row items-center justify-between",
+            typography.label,
+            "text-text-action-primary-normal",
+          )}
+        >
+          {idx === 0 ? (
+            <button
+              id={id ? `${id}-prev-month-button` : undefined}
+              data-testid={testid ? `${testid}-prev-month-button` : undefined}
+              type="button"
+              className={clsx(
+                "flex items-center justify-center rounded-base hover:bg-action-100 active:bg-action-300 text-icon-action-primary-normal",
+                componentPadding,
+              )}
+              aria-label="Previous month"
+              onClick={() => setBaseMonth(baseMonth.subtract({ months: 1 }))}
+            >
+              <Icon name="chevron_left" size={24} />
+            </button>
+          ) : (
+            <span className={clsx(componentPadding, "mr-1")} />
+          )}
+          <div className="flex gap-desktop-compact-component-padding">
+            <button
+              ref={(el) => {
+                monthMenuRef.current = el;
+              }}
+              type="button"
+              onClick={() => {
+                setMonthMenuOpen(true);
+                setYearMenuOpen(false);
+              }}
+              className="font-semibold text-text-action-primary-normal text-[14px] py-[2px] truncate"
+            >
+              {month.name}
+            </button>
+            <Menu
+              show={monthMenuOpen}
+              positionTo={monthMenuRef}
+              setShow={() => setMonthMenuOpen(false)}
+            >
+              {months
+                .map((x) => [x, getMonthDataWith(x + 1)] as const)
+                .map(([x, m]) => (
+                  <MenuOption
+                    key={m.name}
+                    selected={baseMonth.month === x + 1}
+                    onClick={() => {
+                      setBaseMonth(baseMonth.with({ month: x + 1 }));
+                      setMonthMenuOpen(false);
+                    }}
+                  >
+                    {m.name}
+                  </MenuOption>
+                ))}
+            </Menu>
+            <button
+              ref={(el) => {
+                yearMenuRef.current = el;
+              }}
+              type="button"
+              onClick={() => {
+                setYearMenuOpen(true);
+                setMonthMenuOpen(false);
+              }}
+              className="font-semibold text-text-action-primary-normal text-[14px] py-[2px] truncate"
+            >
+              {month.year}
+            </button>
+            <Menu
+              show={yearMenuOpen}
+              positionTo={yearMenuRef}
+              setShow={() => setYearMenuOpen(false)}
+            >
+              {years.map((y) => (
+                <MenuOption
+                  key={y}
+                  selected={baseMonth.year === y}
+                  onClick={() => {
+                    setBaseMonth(baseMonth.with({ year: y }));
+                    setYearMenuOpen(false);
+                  }}
+                >
+                  {y}
+                </MenuOption>
+              ))}
+            </Menu>
+          </div>
+          {(mode === "double" ? idx === 1 : true) ? (
+            <button
+              id={id ? `${id}-next-month-button` : undefined}
+              data-testid={testid ? `${testid}-next-month-button` : undefined}
+              type="button"
+              className={clsx(
+                "flex items-center justify-center rounded-base hover:bg-action-100 active:bg-action-300 text-icon-action-primary-normal",
+                componentPadding,
+              )}
+              aria-label="Next month"
+              onClick={() => setBaseMonth(baseMonth.add({ months: 1 }))}
+            >
+              <Icon name="chevron_right" size={24} />
+            </button>
+          ) : (
+            <span className={clsx(componentPadding, "ml-1")} />
+          )}
+        </div>
+        <div className={clsx("grid grid-cols-7")}>
+          {weekDays.map((d) => (
+            <span
+              key={d}
+              className={clsx(
+                typography.caption,
+                "text-text-secondary-normal text-center",
+                "w-10",
+              )}
+            >
+              {d}
+            </span>
+          ))}
+        </div>
+        <div className={clsx("grid grid-cols-7")}>
+          {Array.from({ length: totalCells }).map((_, i) => {
+            const day = i - emptyCells + 1;
+            const date = month.date.with({ day: 1 }).add({
+              days: i - emptyCells,
+            });
+            const isInMonth = day > 0 && day <= month.days;
+            const isToday = isInMonth && date.equals(today);
+            const isSelected =
+              isInMonth &&
+              ((!pendingFrom && fromDate && date.equals(fromDate)) ||
+                (!pendingFrom && toDate && date.equals(toDate)) ||
+                (pendingFrom && date.equals(pendingFrom)));
+            const inRange = isInMonth && isInRange(date);
+            const isDisabled =
+              !isInMonth || (isDateAvailable ? !isDateAvailable(date) : false);
+            // New: determine if this is the start or end of the range
 
-                    const hoverDateIsAfterPendingFrom =
-                      hoveredDate &&
-                      pendingFrom &&
-                      Temporal.PlainDate.compare(hoveredDate, pendingFrom) >= 0;
+            const hoverDateIsBeforePendingFrom =
+              hoveredDate &&
+              pendingFrom &&
+              Temporal.PlainDate.compare(hoveredDate, pendingFrom) < 0;
 
-                    const isRangeStart =
-                      mode === "single" && disableRange
-                        ? false
-                        : (!pendingFrom &&
-                            isInMonth &&
-                            fromDate &&
-                            date.equals(fromDate)) ||
-                          (hoverDateIsAfterPendingFrom &&
-                            date.equals(pendingFrom));
+            const hoverDateIsAfterPendingFrom =
+              hoveredDate &&
+              pendingFrom &&
+              Temporal.PlainDate.compare(hoveredDate, pendingFrom) >= 0;
 
-                    const isRangeEnd =
-                      mode === "single" && disableRange
-                        ? false
-                        : (!pendingFrom &&
-                            isInMonth &&
-                            toDate &&
-                            date.equals(toDate)) ||
-                          (hoverDateIsBeforePendingFrom &&
-                            date.equals(pendingFrom));
-                    return (
-                      <DateCell
-                        key={i}
-                        id={id ? `${id}-date-${date.toString()}` : undefined}
-                        testid={
-                          testid
-                            ? `${testid}-date-${date.toString()}`
-                            : undefined
-                        }
-                        date={date}
-                        isInMonth={!!isInMonth}
-                        isToday={!!isToday}
-                        isSelected={!!isSelected}
-                        inRange={!!inRange}
-                        isDisabled={!!isDisabled}
-                        onClick={() => handleDayClick(date)}
-                        onMouseEnter={() => setHoveredDate(date)}
-                        onMouseLeave={() => setHoveredDate(undefined)}
-                        isRangeStart={!!isRangeStart}
-                        isRangeEnd={!!isRangeEnd}
-                        isRangeDisabled={mode === "single" && disableRange}
-                        // Add cell padding for spacing
-                        cellPadding={componentPadding}
-                      />
-                    );
-                  })}
-                </div>
-              </div>
-              {mode === "double" && idx === 0 && (
-                <div
-                  className={clsx(
-                    "self-stretch bg-border-primary-normal rounded-base",
+            const isRangeStart =
+              mode === "single" && disableRange
+                ? false
+                : (!pendingFrom &&
+                    isInMonth &&
+                    fromDate &&
+                    date.equals(fromDate)) ||
+                  (hoverDateIsAfterPendingFrom && date.equals(pendingFrom));
 
-                    // 1px width, full height, matches Figma divider
-                    "w-px",
-                  )}
-                />
-              )}
-            </React.Fragment>
-          );
-        })}
+            const isRangeEnd =
+              mode === "single" && disableRange
+                ? false
+                : (!pendingFrom &&
+                    isInMonth &&
+                    toDate &&
+                    date.equals(toDate)) ||
+                  (hoverDateIsBeforePendingFrom && date.equals(pendingFrom));
+            return (
+              <DateCell
+                key={i}
+                id={id ? `${id}-date-${date.toString()}` : undefined}
+                testid={
+                  testid ? `${testid}-date-${date.toString()}` : undefined
+                }
+                date={date}
+                isInMonth={!!isInMonth}
+                isToday={!!isToday}
+                isSelected={!!isSelected}
+                inRange={!!inRange}
+                isDisabled={!!isDisabled}
+                onClick={() => handleDayClick(date)}
+                onMouseEnter={() => setHoveredDate(date)}
+                onMouseLeave={() => setHoveredDate(undefined)}
+                isRangeStart={!!isRangeStart}
+                isRangeEnd={!!isRangeEnd}
+                isRangeDisabled={mode === "single" && disableRange}
+                // Add cell padding for spacing
+                cellPadding={componentPadding}
+              />
+            );
+          })}
+        </div>
       </div>
-    </div>
+      {mode === "double" && idx === 0 && (
+        <div
+          className={clsx(
+            "self-stretch bg-border-primary-normal rounded-base",
+
+            // 1px width, full height, matches Figma divider
+            "w-px",
+          )}
+        />
+      )}
+    </React.Fragment>
   );
 }