@scalewing/react 1.39.0 → 1.40.0

package/dist/components/date-range/use-range-popup.js

@@ -0,0 +1,53 @@
+import { useId, useLayoutEffect, useRef, useState, } from 'react';
+import { pressDay, sameRange, settledDraft, } from '../../date-range-draft.js';
+/**
+ * DateRangeButton's open state and the range being picked. Opening starts
+ * from the value; a new value while open starts over from it. Disabling
+ * closes it for good.
+ */
+export function useRangePopup(value, disabled, onChange) {
+    const buttonRef = useRef(null);
+    const id = useId();
+    const [open, setOpen] = useState(false);
+    const [draft, setDraft] = useState(() => settledDraft(value));
+    const [openedWith, setOpenedWith] = useState(value);
+    if (!sameRange(openedWith, value)) {
+        setOpenedWith(value);
+        setDraft(settledDraft(value));
+    }
+    if (disabled && open)
+        setOpen(false);
+    const shown = open && !disabled;
+    // Focus returns once the calendar is gone: while the sheet is still a
+    // modal dialog, the page behind it, the button included, is inert.
+    const restoreFocus = useRef(false);
+    useLayoutEffect(() => {
+        if (shown || !restoreFocus.current)
+            return;
+        restoreFocus.current = false;
+        buttonRef.current?.focus();
+    }, [shown]);
+    function cancel(restore) {
+        restoreFocus.current = restore;
+        setOpen(false);
+    }
+    return {
+        buttonRef,
+        id,
+        shown,
+        toggle: () => {
+            if (shown)
+                return cancel(true);
+            setDraft(settledDraft(value));
+            setOpen(true);
+        },
+        draft,
+        press: (day) => setDraft((current) => pressDay(current, day)),
+        apply: (range) => {
+            cancel(true);
+            if (!sameRange(range, value))
+                onChange(range);
+        },
+        cancel,
+    };
+}

package/dist/components/link-press.d.ts

@@ -0,0 +1,7 @@
+import { type MouseEvent } from 'react';
+/**
+ * Whether a press on a link is a plain one a client router may take: the
+ * primary button, no modifier key (which opens a tab or a window) and not
+ * already handled. Shared by SectionNav and ListRow.
+ */
+export declare function plainPress(event: MouseEvent<HTMLAnchorElement>): boolean;

package/dist/components/link-press.js

@@ -0,0 +1,13 @@
+/**
+ * Whether a press on a link is a plain one a client router may take: the
+ * primary button, no modifier key (which opens a tab or a window) and not
+ * already handled. Shared by SectionNav and ListRow.
+ */
+export function plainPress(event) {
+    return (event.button === 0 &&
+        !event.defaultPrevented &&
+        !event.metaKey &&
+        !event.ctrlKey &&
+        !event.shiftKey &&
+        !event.altKey);
+}

package/dist/components/list/ListRowAccessoryMark.d.ts

@@ -0,0 +1,5 @@
+import { type ListRowAccessory } from '../../list-options.js';
+/** A row's chevron or check: control chrome drawn by the generated CSS. */
+export declare function ListRowAccessoryMark({ kind }: {
+    kind: ListRowAccessory;
+}): import("react").JSX.Element | null;

package/dist/components/list/ListRowAccessoryMark.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/** A row's chevron or check: control chrome drawn by the generated CSS. */
+export function ListRowAccessoryMark({ kind }) {
+    if (kind === 'none')
+        return null;
+    return (_jsx("span", { "aria-hidden": "true", className: kind === 'check' ? 'sw-list-row-check' : 'sw-list-row-chevron' }));
+}

package/dist/components/list/ListRowContent.d.ts

@@ -0,0 +1,20 @@
+import { type ReactNode } from 'react';
+import { type ListRowAccessory, type ListRowTitleAppearance, type ListRowTone, type ListRowValueTone } from '../../list-options.js';
+export type ListRowContentProps = {
+    /** Prefixes the ids that name and describe a pressable row. */
+    id: string;
+    title: string;
+    detail?: string;
+    value?: string;
+    valueDetail?: string;
+    valueTone?: ListRowValueTone;
+    leading?: ReactNode;
+    tone: ListRowTone;
+    titleAppearance: ListRowTitleAppearance;
+    accessory: ListRowAccessory;
+};
+/**
+ * A list row's parts in reading order: the hidden leading mark, the title
+ * over its detail, the value over its detail, then the chevron or check.
+ */
+export declare function ListRowContent({ id, title, detail, value, valueDetail, valueTone, leading, tone, titleAppearance, accessory, }: ListRowContentProps): import("react").JSX.Element;

package/dist/components/list/ListRowContent.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cx } from '../../class-names.js';
+import { ListRowAccessoryMark } from './ListRowAccessoryMark.js';
+/**
+ * A list row's parts in reading order: the hidden leading mark, the title
+ * over its detail, the value over its detail, then the chevron or check.
+ */
+export function ListRowContent({ id, title, detail, value, valueDetail, valueTone, leading, tone, titleAppearance, accessory, }) {
+    return (_jsxs(_Fragment, { children: [leading === undefined ? null : (_jsx("span", { "aria-hidden": "true", className: "sw-list-row-leading", children: leading })), _jsxs("span", { className: "sw-list-row-label", children: [_jsx("span", { className: cx('sw-list-row-title', titleAppearance === 'plain' && 'sw-list-row-title-plain', tone === 'danger' && 'sw-list-row-title-danger'), id: `${id}-title`, children: title }), detail ? (_jsx("span", { className: "sw-list-row-detail", id: `${id}-detail`, children: detail })) : null] }), value === undefined ? null : (_jsxs("span", { className: "sw-list-row-end", children: [_jsx("span", { className: cx('sw-list-row-value', valueTone && `sw-list-row-value-${valueTone}`), id: `${id}-value`, children: value }), valueDetail ? (_jsx("span", { className: "sw-list-row-value-detail", id: `${id}-value-detail`, children: valueDetail })) : null] })), _jsx(ListRowAccessoryMark, { kind: accessory })] }));
+}

package/dist/components/list/list-row-container.d.ts

@@ -0,0 +1,5 @@
+/**
+ * The element a ListRow renders as: an `li` in a ListGroup's list, a `div`
+ * anywhere else, such as a ListGroup's `footer`.
+ */
+export declare const ListRowContainer: import("react").Context<"div" | "li">;

package/dist/components/list/list-row-container.js

@@ -0,0 +1,6 @@
+import { createContext } from 'react';
+/**
+ * The element a ListRow renders as: an `li` in a ListGroup's list, a `div`
+ * anywhere else, such as a ListGroup's `footer`.
+ */
+export const ListRowContainer = createContext('div');

package/dist/components/use-media-query.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Whether a media query matches now, following its changes. Where there is
+ * no `matchMedia` (a server render, jsdom) it reads as `fallback`.
+ */
+export declare function useMediaQuery(query: string, fallback: boolean): boolean;

package/dist/components/use-media-query.js

@@ -0,0 +1,18 @@
+import { useCallback, useSyncExternalStore } from 'react';
+function canMatch() {
+    return (typeof window !== 'undefined' && typeof window.matchMedia === 'function');
+}
+/**
+ * Whether a media query matches now, following its changes. Where there is
+ * no `matchMedia` (a server render, jsdom) it reads as `fallback`.
+ */
+export function useMediaQuery(query, fallback) {
+    const subscribe = useCallback((onChange) => {
+        if (!canMatch())
+            return () => undefined;
+        const list = window.matchMedia(query);
+        list.addEventListener('change', onChange);
+        return () => list.removeEventListener('change', onChange);
+    }, [query]);
+    return useSyncExternalStore(subscribe, () => (canMatch() ? window.matchMedia(query).matches : fallback), () => fallback);
+}

package/dist/css/chevron.d.ts

@@ -6,3 +6,9 @@
 export declare function chevronStrokeIn(color: string): string;
 /** The muted chevron Accordion, Select and the menus share. */
 export declare const chevronStroke: string;
+/**
+ * A check's two strokes in `color`: the bottom and right borders of a box
+ * the caller sizes and turns 45°, so forced colours keep them. Checkbox,
+ * Steps and ListRow share it.
+ */
+export declare function checkStrokeIn(color: string): string;

package/dist/css/chevron.js

@@ -1,3 +1,8 @@
+/*
+ * The strokes of Scalewing's private control chrome, drawn with borders so
+ * forced colours keep them: the chevron (Accordion, Select, the menus,
+ * Pagination, ListRow) and the check (Checkbox, Steps, ListRow).
+ */
 /**
  * A stroked chevron in `color`: two sides of a `space-2` square (its
  * bottom and right borders, so forced colours keep it), turned by each
@@ -12,3 +17,12 @@ export function chevronStrokeIn(color) {
 }
 /** The muted chevron Accordion, Select and the menus share. */
 export const chevronStroke = chevronStrokeIn('var(--sw-color-muted)');
+/**
+ * A check's two strokes in `color`: the bottom and right borders of a box
+ * the caller sizes and turns 45°, so forced colours keep them. Checkbox,
+ * Steps and ListRow share it.
+ */
+export function checkStrokeIn(color) {
+    return `border-bottom: 2px solid ${color};
+  border-right: 2px solid ${color};`;
+}

package/dist/css/css-button-group-attached.js

@@ -13,6 +13,10 @@ import { joinedZIndex } from './stacking.js';
  * divider in its own text colour at low strength, so a joined row of them
  * still reads as separate buttons; forced colours draw every border.
  *
+ * The buttons are found by type, not by place, so an open calendar a
+ * button renders beside itself (CalendarButton, DateRangeButton) does not
+ * cost the next button its divider or the last one its rounded corners.
+ *
  * The group is its own stacking context: a pressed button's ring paints
  * over its neighbours and the focused button's standard outer ring over
  * both, so neither is covered by the next button.
@@ -33,21 +37,21 @@ ${group} > .sw-button {
   border-radius: 0;
 }
 
-${group} > .sw-button + .sw-button {
+${group} > .sw-button ~ .sw-button {
   margin-inline-start: -1px;
 }
 
-${group} > .sw-button:first-child {
+${group} > .sw-button:first-of-type {
   border-end-start-radius: var(--sw-radius-sm);
   border-start-start-radius: var(--sw-radius-sm);
 }
 
-${group} > .sw-button:last-child {
+${group} > .sw-button:last-of-type {
   border-end-end-radius: var(--sw-radius-sm);
   border-start-end-radius: var(--sw-radius-sm);
 }
 
-${group} > .sw-button + .sw-button:not(.sw-button-secondary) {
+${group} > .sw-button ~ .sw-button:not(.sw-button-secondary) {
   border-inline-start-color: color-mix(in srgb, currentColor 30%, transparent);
 }
 

package/dist/css/css-button-group-track.js

@@ -30,7 +30,7 @@ ${track} > .sw-button {
   color: var(--sw-color-text);
 }
 
-${track} > .sw-button + .sw-button {
+${track} > .sw-button ~ .sw-button {
   border-inline-start-color: var(--sw-color-border);
 }
 

package/dist/css/css-checkbox.js

@@ -1,4 +1,5 @@
 import { typographyVariants } from '@scalewing/tokens';
+import { checkStrokeIn } from './chevron.js';
 const label = typographyVariants.label;
 const caption = typographyVariants.caption;
 export function cssCheckboxClasses() {
@@ -49,8 +50,7 @@ export function cssCheckboxClasses() {
 }
 
 .sw-checkbox-mark::after {
-  border-bottom: 2px solid var(--sw-color-surface);
-  border-right: 2px solid var(--sw-color-surface);
+  ${checkStrokeIn('var(--sw-color-surface)')}
   content: '';
   display: none;
   height: var(--sw-space-2);

package/dist/css/css-components.js

@@ -4,6 +4,9 @@ import { cssActionMenuClasses } from './css-action-menu.js';
 import { cssAccordionClasses } from './css-accordion.js';
 import { cssButtonClasses } from './css-button.js';
 import { cssCalendarButtonClasses } from './css-calendar-button.js';
+import { cssDateRangeClasses } from './css-date-range.js';
+import { cssListClasses } from './css-list.js';
+import { cssCountPillClasses } from './css-count-pill.js';
 import { cssBarChartClasses } from './css-bar-chart.js';
 import { cssChartLegendClasses } from './css-chart-legend.js';
 import { cssChartPlotClasses } from './css-chart-plot.js';
@@ -141,6 +144,12 @@ ${cssDateFieldClasses()}
 
 ${cssCalendarButtonClasses()}
 
+${cssDateRangeClasses()}
+
+${cssListClasses()}
+
+${cssCountPillClasses()}
+
 ${cssBarChartClasses()}
 
 ${cssDataBarClasses()}

package/dist/css/css-count-pill.d.ts

@@ -0,0 +1,2 @@
+export declare function cssCountPillClasses(): string;
+export declare function countPillClassCatalog(): string[];

package/dist/css/css-count-pill.js

@@ -0,0 +1,54 @@
+import { typographyVariants } from '@scalewing/tokens';
+const caption = typographyVariants.caption;
+/** The counts drawn as the pill: SectionNav's and a Nav word's. */
+const pills = ['sw-section-nav-count', 'sw-nav-count'];
+/*
+ * A count after a destination's words (a number waiting there, such as
+ * tasks to do) is a filled pill: the danger colour with its on-colour
+ * figures (4.5:1 in every palette, as a danger Button's label), caption
+ * size at weight 700, a space-5 less space-1 (20) high and at least as
+ * wide. Forced colours draw its edge. SectionNav's item count and Nav's
+ * NavCount share it, so an area's count reads the same in both.
+ */
+export function cssCountPillClasses() {
+    const selector = pills.map((name) => `[data-theme] .${name}`).join(',\n');
+    return `${selector} {
+  align-items: center;
+  background: var(--sw-color-danger);
+  border-radius: var(--sw-radius-pill);
+  box-sizing: border-box;
+  color: var(--sw-color-onDanger);
+  display: inline-flex;
+  font-size: ${caption.fontSize}px;
+  font-variant-numeric: tabular-nums;
+  font-weight: 700;
+  justify-content: center;
+  letter-spacing: ${caption.letterSpacing}px;
+  line-height: 1;
+  min-height: calc(var(--sw-space-5) - var(--sw-space-1));
+  min-width: calc(var(--sw-space-5) - var(--sw-space-1));
+  padding-inline: var(--sw-space-1);
+}
+
+/*
+ * A Nav link holding a count lays out as SectionNav's link does: the words
+ * and the pill centred on one line a space-2 apart (the space text node
+ * that keeps the name collapses), so the link is as tall as its siblings
+ * and its words stay level with theirs. A Button already does this. At
+ * zero specificity, so a link's \`hideBelow\` or \`hideFrom\` still hides it.
+ * In forced colours a current link's underline runs under the pill's
+ * figure too, as the pill is a flex item of the link.
+ */
+:where(.sw-nav a:has(> .sw-nav-count)) {
+  align-items: center;
+  display: inline-flex;
+  gap: var(--sw-space-2);
+}
+
+@media (forced-colors: active) {
+  ${selector.replaceAll('\n', '\n  ')} { border: 1px solid CanvasText; }
+}`;
+}
+export function countPillClassCatalog() {
+    return [...pills];
+}

package/dist/css/css-date-field.js

@@ -2,6 +2,7 @@ import { typographyVariants } from '@scalewing/tokens';
 import { disabledControlForcedColors, disabledControlSurface, } from './css-document.js';
 import { zIndex } from './stacking.js';
 import { quietFill } from './quiet-fill.js';
+import { rangeBand, rangeBandHover } from './range-band.js';
 const body = typographyVariants.body;
 const label = typographyVariants.label;
 const caption = typographyVariants.caption;
@@ -241,7 +242,7 @@ function calendarRules() {
  * accent ring (3:1 or more on the band). The selected day sits on top.
  */
 .sw-date-field-day-in-range {
-  background: color-mix(in srgb, var(--sw-color-accent) 16%, transparent);
+  background: ${rangeBand};
   border-radius: 0;
   color: var(--sw-color-text);
 }
@@ -267,7 +268,7 @@ function calendarRules() {
 }
 
 .sw-date-field-day-in-range:hover:not([aria-disabled='true']) {
-  background: color-mix(in srgb, var(--sw-color-accent) 24%, transparent);
+  background: ${rangeBandHover};
 }
 
 .sw-date-field-day[aria-selected='true'],

package/dist/css/css-date-range-presets.d.ts

@@ -0,0 +1,2 @@
+export declare function cssDateRangePresetsClasses(): string;
+export declare function dateRangePresetsClassCatalog(): string[];

package/dist/css/css-date-range-presets.js

@@ -0,0 +1,109 @@
+import { typographyVariants } from '@scalewing/tokens';
+import { breakpointQuery } from './breakpoints.js';
+import { quietFill } from './quiet-fill.js';
+import { coarsePointerQuery, touchTarget } from './touch-target.js';
+const label = typographyVariants.label;
+const body = typographyVariants.body;
+/*
+ * DateRangeButton's presets. In the popover they are a list beside the
+ * months from `lg` up, the pressed one on the quiet fill in the label
+ * weight; from `md` to `lg`, where two months and a list do not fit side
+ * by side, the same list wraps in a row above the months and takes no
+ * width of its own. In the sheet they are one row of pills that scrolls
+ * sideways, the pressed one in the text colour.
+ */
+export function cssDateRangePresetsClasses() {
+    return `.sw-date-range-presets {
+  contain: inline-size;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sw-space-1);
+  padding: var(--sw-space-3) var(--sw-space-3) 0;
+}
+
+@media ${breakpointQuery('from', 'lg')} {
+  .sw-date-range-presets:not(.sw-date-range-presets-row) {
+    border-inline-end: 1px solid var(--sw-color-border);
+    contain: none;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    padding: var(--sw-space-3) var(--sw-space-2);
+  }
+}
+
+.sw-date-range-preset {
+  appearance: none;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--sw-radius-sm);
+  box-sizing: border-box;
+  color: var(--sw-color-text);
+  cursor: pointer;
+  flex: none;
+  font-family: var(--sw-font-sans);
+  font-size: ${label.fontSize}px;
+  font-weight: ${body.fontWeight};
+  line-height: ${label.lineHeight}px;
+  margin: 0;
+  min-height: var(--sw-control-sm-min-height);
+  padding: 0 var(--sw-control-sm-padding-inline);
+  text-align: start;
+  white-space: nowrap;
+}
+
+.sw-date-range-preset:hover,
+.sw-date-range-preset[aria-pressed='true'] {
+  background: ${quietFill};
+}
+
+.sw-date-range-preset[aria-pressed='true'] {
+  font-weight: ${label.fontWeight};
+}
+
+.sw-date-range-preset:focus { outline: none; }
+
+.sw-date-range-preset:focus-visible {
+  outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
+  outline-offset: var(--sw-focus-ring-offset);
+}
+
+.sw-date-range-presets-row {
+  contain: none;
+  flex-wrap: nowrap;
+  gap: var(--sw-space-2);
+  overflow-x: auto;
+  padding: var(--sw-focus-ring-width) var(--sw-focus-ring-offset);
+}
+
+.sw-date-range-presets-row .sw-date-range-preset {
+  background: ${quietFill};
+  border-radius: var(--sw-radius-pill);
+}
+
+.sw-date-range-presets-row .sw-date-range-preset[aria-pressed='true'] {
+  background: var(--sw-color-text);
+  color: var(--sw-color-surface);
+}
+
+@media ${coarsePointerQuery} {
+  .sw-date-range-preset { min-height: ${touchTarget}; }
+}
+
+@media (forced-colors: active) {
+  .sw-date-range-presets { border-color: CanvasText; }
+  .sw-date-range-presets-row .sw-date-range-preset { border-color: ButtonText; }
+  .sw-date-range-preset[aria-pressed='true'],
+  .sw-date-range-presets-row .sw-date-range-preset[aria-pressed='true'] {
+    background: Highlight;
+    color: HighlightText;
+    forced-color-adjust: none;
+  }
+}`;
+}
+export function dateRangePresetsClassCatalog() {
+    return [
+        'sw-date-range-presets',
+        'sw-date-range-presets-row',
+        'sw-date-range-preset',
+    ];
+}

package/dist/css/css-date-range.d.ts

@@ -0,0 +1,2 @@
+export declare function cssDateRangeClasses(): string;
+export declare function dateRangeClassCatalog(): string[];