@scalewing/react 1.40.0 → 1.42.0

package/dist/components/document-viewer/use-pdf-document.js

@@ -0,0 +1,47 @@
+'use client';
+import { useEffect, useRef, useState } from 'react';
+import { openPdf } from './pdf-document.js';
+/** Closes a document no one shows any more; a failure to close is moot. */
+function closeQuietly(document) {
+    document.destroy().catch(() => undefined);
+}
+/**
+ * Opens the PDF in `data` and closes it (and its worker) when the bytes
+ * change or the viewer goes away. New bytes start a new open and show as
+ * loading until it settles, so a consumer's Try again is new bytes (or a
+ * new `key`).
+ */
+export function usePdfDocument(data, workerSrc, callbacks) {
+    const [settled, setSettled] = useState(null);
+    // The callbacks are read when the open settles, never reasons to reopen.
+    const latest = useRef(callbacks);
+    useEffect(() => {
+        latest.current = callbacks;
+    });
+    useEffect(() => {
+        let live = true;
+        let opened = null;
+        openPdf(data, workerSrc).then((document) => {
+            if (!live) {
+                closeQuietly(document);
+                return;
+            }
+            opened = document;
+            setSettled({ data, workerSrc, state: { status: 'ready', document } });
+            latest.current.onLoad?.({ pageCount: document.pageCount });
+        }, (error) => {
+            if (!live)
+                return;
+            setSettled({ data, workerSrc, state: { status: 'failed', error } });
+            latest.current.onError?.(error);
+        });
+        return () => {
+            live = false;
+            if (opened)
+                closeQuietly(opened);
+        };
+    }, [data, workerSrc]);
+    return settled && settled.data === data && settled.workerSrc === workerSrc
+        ? settled.state
+        : { status: 'loading' };
+}

package/dist/components/document-viewer/use-pinch-zoom.d.ts

@@ -0,0 +1,12 @@
+import { type RefObject } from 'react';
+/**
+ * Two fingers on the page zoom it, between fit width and four times as
+ * wide, about the point between them. The page's box allows
+ * only panning (`touch-action: pan-x pan-y`), so the browser does not zoom
+ * the whole screen instead; a two-finger move is taken from the browser
+ * (a non-passive listener), one finger still scrolls.
+ */
+export declare function usePinchZoom(box: RefObject<HTMLElement | null>, zoom: number, zoomTo: (zoom: number, at: {
+    x: number;
+    y: number;
+}) => void): void;

package/dist/components/document-viewer/use-pinch-zoom.js

@@ -0,0 +1,67 @@
+'use client';
+import { useEffect, useRef } from 'react';
+import { clampZoom } from './zoom.js';
+function spread(touches) {
+    const [a, b] = [touches[0], touches[1]];
+    return {
+        distance: Math.hypot(a.clientX - b.clientX, a.clientY - b.clientY),
+        x: (a.clientX + b.clientX) / 2,
+        y: (a.clientY + b.clientY) / 2,
+    };
+}
+/**
+ * Two fingers on the page zoom it, between fit width and four times as
+ * wide, about the point between them. The page's box allows
+ * only panning (`touch-action: pan-x pan-y`), so the browser does not zoom
+ * the whole screen instead; a two-finger move is taken from the browser
+ * (a non-passive listener), one finger still scrolls.
+ */
+export function usePinchZoom(box, zoom, zoomTo) {
+    const current = useRef(zoom);
+    const pinch = useRef(null);
+    const setter = useRef(zoomTo);
+    useEffect(() => {
+        current.current = zoom;
+        setter.current = zoomTo;
+    });
+    useEffect(() => {
+        const element = box.current;
+        if (!element)
+            return;
+        function start(event) {
+            if (event.touches.length !== 2)
+                return;
+            pinch.current = {
+                distance: spread(event.touches).distance,
+                zoom: current.current,
+            };
+        }
+        function move(event) {
+            const begun = pinch.current;
+            if (!begun || event.touches.length !== 2 || !element)
+                return;
+            event.preventDefault();
+            const now = spread(event.touches);
+            if (begun.distance <= 0)
+                return;
+            const next = clampZoom((begun.zoom * now.distance) / begun.distance);
+            if (next === current.current)
+                return;
+            setter.current(next, { x: now.x, y: now.y });
+        }
+        function end(event) {
+            if (event.touches.length < 2)
+                pinch.current = null;
+        }
+        element.addEventListener('touchstart', start, { passive: true });
+        element.addEventListener('touchmove', move, { passive: false });
+        element.addEventListener('touchend', end);
+        element.addEventListener('touchcancel', end);
+        return () => {
+            element.removeEventListener('touchstart', start);
+            element.removeEventListener('touchmove', move);
+            element.removeEventListener('touchend', end);
+            element.removeEventListener('touchcancel', end);
+        };
+    }, [box]);
+}

package/dist/components/document-viewer/use-zoom.d.ts

@@ -0,0 +1,23 @@
+/** How long a zoom rests before the page is drawn again at its size. */
+export declare const zoomSettleMs = 150;
+/**
+ * The page's zoom (1 is fit width) and the scrolling box it is shown in.
+ * `zoomTo` changes it about a point on the screen (`at`, in client
+ * pixels; the middle of the box's visible part when left out) so the spot
+ * of the page under it stays put: once the bigger or smaller page is laid
+ * out, the box scrolls across and the boxes around it (the window at
+ * last) scroll down by what keeps that spot in place. `drawnZoom`
+ * follows `zoom` once it rests, so a pinch stretches the drawn page and
+ * only its end draws it again. Another `resetKey` (another page) is fit
+ * width again.
+ */
+export declare function useZoom(resetKey: string): {
+    box: import("react").RefObject<HTMLDivElement | null>;
+    page: import("react").RefObject<HTMLDivElement | null>;
+    zoom: number;
+    drawnZoom: number;
+    zoomTo: (next: number, at?: {
+        x: number;
+        y: number;
+    }) => void;
+};

package/dist/components/document-viewer/use-zoom.js

@@ -0,0 +1,70 @@
+'use client';
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { scrollChainBy } from './scroll-chain.js';
+import { anchorShift, clampZoom, minZoom } from './zoom.js';
+/** The middle of the part of `element` inside the window, in client pixels. */
+function visibleMiddle(element) {
+    const rect = element.getBoundingClientRect();
+    const view = element.ownerDocument.documentElement;
+    const top = Math.max(rect.top, 0);
+    const bottom = Math.min(rect.bottom, view.clientHeight || rect.bottom);
+    return {
+        x: rect.left + rect.width / 2,
+        y: bottom > top ? (top + bottom) / 2 : rect.top + rect.height / 2,
+    };
+}
+/** How long a zoom rests before the page is drawn again at its size. */
+export const zoomSettleMs = 150;
+/**
+ * The page's zoom (1 is fit width) and the scrolling box it is shown in.
+ * `zoomTo` changes it about a point on the screen (`at`, in client
+ * pixels; the middle of the box's visible part when left out) so the spot
+ * of the page under it stays put: once the bigger or smaller page is laid
+ * out, the box scrolls across and the boxes around it (the window at
+ * last) scroll down by what keeps that spot in place. `drawnZoom`
+ * follows `zoom` once it rests, so a pinch stretches the drawn page and
+ * only its end draws it again. Another `resetKey` (another page) is fit
+ * width again.
+ */
+export function useZoom(resetKey) {
+    const box = useRef(null);
+    const page = useRef(null);
+    const [keyed, setKeyed] = useState({ key: resetKey, zoom: minZoom });
+    const [drawn, setDrawn] = useState({ key: resetKey, zoom: minZoom });
+    const zoom = keyed.key === resetKey ? keyed.zoom : minZoom;
+    const drawnZoom = drawn.key === resetKey ? drawn.zoom : minZoom;
+    const anchor = useRef(null);
+    const shown = useRef(zoom);
+    useLayoutEffect(() => {
+        const from = shown.current;
+        shown.current = zoom;
+        const element = box.current;
+        const sheet = page.current;
+        const spot = anchor.current;
+        anchor.current = null;
+        if (!element || !sheet || !spot || from === zoom)
+            return;
+        const shift = anchorShift(spot.before, sheet.getBoundingClientRect(), spot.point);
+        scrollChainBy(element, 'x', shift.x);
+        scrollChainBy(element, 'y', shift.y);
+    }, [zoom]);
+    useEffect(() => {
+        const timer = setTimeout(() => setDrawn({ key: resetKey, zoom }), zoomSettleMs);
+        return () => clearTimeout(timer);
+    }, [resetKey, zoom]);
+    function zoomTo(next, at) {
+        const element = box.current;
+        const sheet = page.current;
+        const target = clampZoom(next);
+        if (target === shown.current)
+            return;
+        if (element && sheet) {
+            anchor.current = {
+                point: at ?? visibleMiddle(element),
+                before: sheet.getBoundingClientRect(),
+            };
+        }
+        setKeyed({ key: resetKey, zoom: target });
+    }
+    return { box, page, zoom, drawnZoom, zoomTo };
+}

package/dist/components/document-viewer/zoom.d.ts

@@ -0,0 +1,29 @@
+/** Fit width is 1; a page can be drawn up to four times as wide. */
+export declare const minZoom = 1;
+export declare const maxZoom = 4;
+/** One key press's step: a quarter of the fitted width. */
+export declare const zoomStep = 0.25;
+/** A zoom kept between fit width and the most, to two decimals. */
+export declare function clampZoom(zoom: number): number;
+/** The zoom a key asks for on the page: `+` or `=` in, `-` out, `0` fit. */
+export declare function zoomForKey(key: string, zoom: number): number | null;
+/** A box on the screen, as `getBoundingClientRect` gives it. */
+export type ScreenBox = {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+};
+/**
+ * How far to scroll, across and down, so the spot of the page that was
+ * under `point` before a zoom (the page at `before`) is under it again
+ * after (the page at `after`). Both boxes are the page's own, so the
+ * stage's padding and where the page sits on the screen count.
+ */
+export declare function anchorShift(before: ScreenBox, after: ScreenBox, point: {
+    x: number;
+    y: number;
+}): {
+    x: number;
+    y: number;
+};

package/dist/components/document-viewer/zoom.js

@@ -0,0 +1,37 @@
+/** Fit width is 1; a page can be drawn up to four times as wide. */
+export const minZoom = 1;
+export const maxZoom = 4;
+/** One key press's step: a quarter of the fitted width. */
+export const zoomStep = 0.25;
+/** A zoom kept between fit width and the most, to two decimals. */
+export function clampZoom(zoom) {
+    if (!Number.isFinite(zoom))
+        return minZoom;
+    return Math.round(Math.min(maxZoom, Math.max(minZoom, zoom)) * 100) / 100;
+}
+/** The zoom a key asks for on the page: `+` or `=` in, `-` out, `0` fit. */
+export function zoomForKey(key, zoom) {
+    if (key === '+' || key === '=')
+        return clampZoom(zoom + zoomStep);
+    if (key === '-' || key === '_')
+        return clampZoom(zoom - zoomStep);
+    if (key === '0')
+        return minZoom;
+    return null;
+}
+/**
+ * How far to scroll, across and down, so the spot of the page that was
+ * under `point` before a zoom (the page at `before`) is under it again
+ * after (the page at `after`). Both boxes are the page's own, so the
+ * stage's padding and where the page sits on the screen count.
+ */
+export function anchorShift(before, after, point) {
+    if (before.width <= 0 || before.height <= 0)
+        return { x: 0, y: 0 };
+    const across = (point.x - before.left) / before.width;
+    const down = (point.y - before.top) / before.height;
+    return {
+        x: after.left + across * after.width - point.x,
+        y: after.top + down * after.height - point.y,
+    };
+}

package/dist/components/field/field-checks.d.ts

@@ -0,0 +1,34 @@
+import { type KeyboardEvent } from 'react';
+import type { FieldProps } from '../Field.js';
+export declare const fieldVariants: readonly ["outlined", "search"];
+export type FieldVariant = (typeof fieldVariants)[number];
+/** The props Field reads from, and sets on, its native control child. */
+export type FieldControlProps = {
+    'aria-describedby'?: string;
+    'aria-label'?: string;
+    'aria-invalid'?: boolean | 'true' | 'false';
+    'aria-labelledby'?: string;
+    id?: string;
+    required?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    type?: string;
+    value?: unknown;
+    enterKeyHint?: string;
+    onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;
+};
+/**
+ * Fails closed on a Field it cannot draw: an unknown variant or width,
+ * search props on an outlined field, and a search field without its clear
+ * button, its handler or one controlled native input.
+ */
+export declare function assertFieldProps(props: FieldProps, child: unknown): void;
+/**
+ * `invalid` was passed, even as `false`, but not as `undefined` (a wrapper
+ * forwarding an optional prop passes nothing): such a field needs one native
+ * control from its first render, so a form learns it on the happy path
+ * instead of on its first failed submit. `error` keeps its older rule (it
+ * requires the control only while it holds a message), so a composed
+ * child beside `error={undefined}` still renders.
+ */
+export declare function passesInvalid(props: FieldProps): boolean;

package/dist/components/field/field-checks.js

@@ -0,0 +1,42 @@
+import { isValidElement } from 'react';
+import { assertFieldWidth } from '../../css/css-field-width.js';
+export const fieldVariants = ['outlined', 'search'];
+/**
+ * Fails closed on a Field it cannot draw: an unknown variant or width,
+ * search props on an outlined field, and a search field without its clear
+ * button, its handler or one controlled native input.
+ */
+export function assertFieldProps(props, child) {
+    const { variant = 'outlined' } = props;
+    assertFieldWidth(props.width);
+    if (!fieldVariants.includes(variant))
+        throw new RangeError(`Unknown Field variant: ${String(variant)}`);
+    if (variant !== 'search') {
+        if (props.leading !== undefined ||
+            props.clearLabel !== undefined ||
+            props.onClear !== undefined)
+            throw new TypeError('Field leading, clearLabel and onClear are for variant="search"');
+        return;
+    }
+    if (!props.clearLabel?.trim())
+        throw new RangeError('A search Field needs a nonempty clearLabel');
+    if (typeof props.onClear !== 'function')
+        throw new TypeError('A search Field needs onClear');
+    if (props.prefix || props.suffix)
+        throw new TypeError('A search Field takes leading, not prefix or suffix');
+    if (!isValidElement(child) || child.type !== 'input')
+        throw new TypeError('A search Field needs one native input child');
+    if (child.props.value === undefined)
+        throw new TypeError('A search Field needs a controlled input: pass value (and onChange)');
+}
+/**
+ * `invalid` was passed, even as `false`, but not as `undefined` (a wrapper
+ * forwarding an optional prop passes nothing): such a field needs one native
+ * control from its first render, so a form learns it on the happy path
+ * instead of on its first failed submit. `error` keeps its older rule (it
+ * requires the control only while it holds a message), so a composed
+ * child beside `error={undefined}` still renders.
+ */
+export function passesInvalid(props) {
+    return props.invalid !== undefined || props.changed !== undefined;
+}

package/dist/components/file-field/file-field-checks.d.ts

@@ -0,0 +1,13 @@
+import type { FileFieldValue } from '../FileField.js';
+/**
+ * Fails closed on a FileField it cannot name or show: an empty label,
+ * choose or change words, a blank drop hint, or a chosen file with no name
+ * or a blank detail.
+ */
+export declare function assertFileField(props: {
+    label: string;
+    chooseLabel: string;
+    changeLabel: string;
+    dropLabel: string | undefined;
+    value: FileFieldValue | null;
+}): void;

package/dist/components/file-field/file-field-checks.js

@@ -0,0 +1,21 @@
+function isBlank(text) {
+    return typeof text !== 'string' || text.trim() === '';
+}
+/**
+ * Fails closed on a FileField it cannot name or show: an empty label,
+ * choose or change words, a blank drop hint, or a chosen file with no name
+ * or a blank detail.
+ */
+export function assertFileField(props) {
+    for (const key of ['label', 'chooseLabel', 'changeLabel'])
+        if (isBlank(props[key]))
+            throw new RangeError(`FileField ${key} must be non-empty text`);
+    if (props.dropLabel !== undefined && isBlank(props.dropLabel))
+        throw new RangeError('FileField dropLabel must be non-empty text');
+    if (props.value === null)
+        return;
+    if (isBlank(props.value.name))
+        throw new RangeError('FileField value name must be non-empty text');
+    if (props.value.detail !== undefined && isBlank(props.value.detail))
+        throw new RangeError('FileField value detail must be non-empty text');
+}

package/dist/components/file-field/use-file-drop.d.ts

@@ -0,0 +1,34 @@
+import { type DragEvent } from 'react';
+/**
+ * A disabled field still keeps the browser from opening a file dropped on
+ * it, and shows no copy cursor: the drop does nothing.
+ */
+declare function refuse(event: DragEvent): void;
+/**
+ * A drop target for one file: whether files are dragged over it, and the
+ * handlers that keep the browser from opening a dropped file and hand the
+ * first one to `onFile`. A counter follows the drag through the target's
+ * children, whose enter and leave events would otherwise flicker it. While
+ * `disabled`, a dropped file is refused and a drag in progress ends.
+ */
+export declare function useFileDrop({ disabled, onFile, }: {
+    disabled: boolean;
+    onFile: (file: File) => void;
+}): {
+    dragging: boolean;
+    handlers: {
+        onDragOver: typeof refuse;
+        onDragLeave: (event: DragEvent) => void;
+        onDrop: (event: DragEvent) => void;
+        onDragEnter?: undefined;
+    };
+} | {
+    dragging: boolean;
+    handlers: {
+        onDragEnter: (event: DragEvent) => void;
+        onDragOver: (event: DragEvent) => void;
+        onDragLeave: (event: DragEvent) => void;
+        onDrop: (event: DragEvent) => void;
+    };
+};
+export {};

package/dist/components/file-field/use-file-drop.js

@@ -0,0 +1,78 @@
+import { useRef, useState } from 'react';
+/** Whether a drag carries files, not text or a link dragged from the page. */
+function carriesFiles(event) {
+    return Array.from(event.dataTransfer?.types ?? []).includes('Files');
+}
+/**
+ * A disabled field still keeps the browser from opening a file dropped on
+ * it, and shows no copy cursor: the drop does nothing.
+ */
+function refuse(event) {
+    if (!carriesFiles(event))
+        return;
+    event.preventDefault();
+    event.dataTransfer.dropEffect = 'none';
+}
+/**
+ * A drop target for one file: whether files are dragged over it, and the
+ * handlers that keep the browser from opening a dropped file and hand the
+ * first one to `onFile`. A counter follows the drag through the target's
+ * children, whose enter and leave events would otherwise flicker it. While
+ * `disabled`, a dropped file is refused and a drag in progress ends.
+ */
+export function useFileDrop({ disabled, onFile, }) {
+    const depth = useRef(0);
+    const [dragging, setDragging] = useState(false);
+    // A drag that began before the field was disabled ends here too, so its
+    // tint is gone when the field is enabled again.
+    const stop = (event) => {
+        refuse(event);
+        depth.current = 0;
+        setDragging(false);
+    };
+    if (disabled)
+        return {
+            dragging: false,
+            handlers: {
+                onDragOver: refuse,
+                // Leaving or dropping ends a drag that began while enabled.
+                onDragLeave: stop,
+                onDrop: stop,
+            },
+        };
+    return {
+        dragging,
+        handlers: {
+            onDragEnter: (event) => {
+                if (!carriesFiles(event))
+                    return;
+                event.preventDefault();
+                depth.current += 1;
+                setDragging(true);
+            },
+            onDragOver: (event) => {
+                if (!carriesFiles(event))
+                    return;
+                event.preventDefault();
+                event.dataTransfer.dropEffect = 'copy';
+            },
+            onDragLeave: (event) => {
+                if (!carriesFiles(event))
+                    return;
+                depth.current = Math.max(0, depth.current - 1);
+                if (depth.current === 0)
+                    setDragging(false);
+            },
+            onDrop: (event) => {
+                if (!carriesFiles(event))
+                    return;
+                event.preventDefault();
+                depth.current = 0;
+                setDragging(false);
+                const file = event.dataTransfer.files[0];
+                if (file)
+                    onFile(file);
+            },
+        },
+    };
+}

package/dist/components/file-field/use-swap-focus.d.ts

@@ -0,0 +1,15 @@
+import { type FocusEvent, type RefObject } from 'react';
+/**
+ * Keeps focus when the field swaps its zone for the chosen row (or back).
+ * The frame's focus handlers note whether focus is in the field. A blur
+ * that leaves the button in the page, with the window still focused, means
+ * the person moved on; one whose button was removed is the swap; and one
+ * while the window is away is the system picker. After a swap, if focus
+ * was in the field and is now nowhere, it moves to the button now there.
+ * Focus the person moved elsewhere (an answer that comes later) is never
+ * taken back.
+ */
+export declare function useSwapFocus(button: RefObject<HTMLElement | null>, chosen: boolean): {
+    onFocus: () => void;
+    onBlur: (event: FocusEvent<HTMLElement>) => void;
+};

package/dist/components/file-field/use-swap-focus.js

@@ -0,0 +1,40 @@
+'use client';
+import { useLayoutEffect, useRef, } from 'react';
+/**
+ * Keeps focus when the field swaps its zone for the chosen row (or back).
+ * The frame's focus handlers note whether focus is in the field. A blur
+ * that leaves the button in the page, with the window still focused, means
+ * the person moved on; one whose button was removed is the swap; and one
+ * while the window is away is the system picker. After a swap, if focus
+ * was in the field and is now nowhere, it moves to the button now there.
+ * Focus the person moved elsewhere (an answer that comes later) is never
+ * taken back.
+ */
+export function useSwapFocus(button, chosen) {
+    const inside = useRef(false);
+    useLayoutEffect(() => {
+        if (!inside.current)
+            return;
+        const active = document.activeElement;
+        if (active === null || active === document.body)
+            button.current?.focus();
+    }, [button, chosen]);
+    return {
+        onFocus: () => {
+            inside.current = true;
+        },
+        onBlur: (event) => {
+            const next = event.relatedTarget;
+            if (next instanceof Node && event.currentTarget.contains(next))
+                return;
+            const left = event.target;
+            // Removed by the swap, the button is gone by the next microtask; and
+            // while the system picker is open the window itself has lost focus,
+            // which is not the person leaving the field.
+            queueMicrotask(() => {
+                if (left.isConnected && document.hasFocus())
+                    inside.current = false;
+            });
+        },
+    };
+}

package/dist/components/filter-chips/FilterChip.d.ts

@@ -0,0 +1,16 @@
+import { type FilterChipCountAppearance, type FilterChipOption } from './options.js';
+type FilterChipProps = {
+    option: FilterChipOption;
+    /** The group's shared input name. */
+    name: string;
+    type: 'radio' | 'checkbox';
+    checked: boolean;
+    required: boolean;
+    /** Whether this chip is a Tab stop: every checkbox, and one radio. */
+    tabStopHere: boolean;
+    countAppearance: FilterChipCountAppearance;
+    onCheckedChange: (checked: boolean) => void;
+};
+/** One chip: a native radio or checkbox under its face. */
+export declare function FilterChip({ option, name, type, checked, required, tabStopHere, countAppearance, onCheckedChange, }: FilterChipProps): import("react").JSX.Element;
+export {};

package/dist/components/filter-chips/FilterChip.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from '../../class-names.js';
+import { tabStop } from '../../tab-stop.js';
+/**
+ * A chip's count: a muted figure after a space, or inline in the chip's
+ * own words after a middle dot hidden from assistive technology, so the
+ * name reads "Open 3" either way.
+ */
+function ChipCount({ count, appearance, }) {
+    if (appearance === 'inline')
+        return (_jsxs(_Fragment, { children: [' ', _jsx("span", { "aria-hidden": "true", children: "\u00B7" }), ' ', _jsx("span", { className: "sw-filter-chip-count-inline", children: count })] }));
+    return (_jsxs(_Fragment, { children: [' ', _jsx("span", { className: "sw-filter-chip-count", children: count })] }));
+}
+/** One chip: a native radio or checkbox under its face. */
+export function FilterChip({ option, name, type, checked, required, tabStopHere, countAppearance, onCheckedChange, }) {
+    return (_jsxs("label", { className: cx('sw-filter-chip', option.count === 0 && 'sw-filter-chip-quiet'), children: [_jsx("input", { checked: checked, className: "sw-filter-chip-input", disabled: option.disabled, name: name, onChange: (event) => {
+                    if (!option.disabled)
+                        onCheckedChange(event.currentTarget.checked);
+                }, required: required, tabIndex: tabStopHere ? tabStop : undefined, type: type, value: option.value }), _jsxs("span", { className: "sw-filter-chip-face", children: [option.label, option.count === undefined ? null : (_jsx(ChipCount, { appearance: countAppearance, count: option.count }))] })] }));
+}