@react-x11/components 0.1.0 → 0.2.1

package/dist/color-picker/ColorField.js

@@ -0,0 +1,239 @@
+// <ColorField> — a `<ColorPicker>` on a `<popup>`, hung off a field that
+// shows the colour and its value.
+//
+// This is `<DatePicker>`'s file with a different panel in it, deliberately:
+// the popup lifecycle out here is subtle enough — override-redirect windows
+// that never take focus, anchor tracking, dismiss-on-window-blur — that a
+// second widget inventing its own would be a second set of bugs.
+import React, { useRef, useState } from 'react';
+import { createStyles } from 'react-x11/style';
+import { useAnchor, useAnchorTracking, useTheme } from 'react-x11';
+import { XK_DOWN, XK_ESCAPE, XK_RETURN, XK_UP } from 'react-x11/keysyms';
+import { hx } from '../internal/hx.js';
+import { useDismissOnWindowBlur } from '../internal/widget.js';
+import { ColorPicker, COLOR_PICKER_WIDTH, colorPickerHeight, } from './ColorPicker.js';
+import { formatColor, parseColor } from './color.js';
+// A hairline round the sheet, as the menus and `<DatePicker>` use: this
+// border is where the popup meets the desktop, not a control's outline.
+const SHEET_BORDER = 1;
+const s = createStyles({
+    trigger: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 8,
+        padding: 8,
+        paddingLeft: 10,
+        paddingRight: 10,
+        cursor: 'pointer',
+    },
+    swatch: { width: 16, height: 16, flexShrink: 0 },
+    label: { flexGrow: 1 },
+    sheet: { flexGrow: 1, flexShrink: 1, borderWidth: SHEET_BORDER },
+});
+/**
+ * `<ColorField value onChange>` — the colour picker as a form control.
+ *
+ *   <ColorField value={fill} onChange={(ev) => setFill(ev.value)} />
+ *   <ColorField … alpha swatches={brand.colors} />
+ *
+ * Every `<ColorPicker>` prop passes straight through, and the value has the
+ * same shape here as there.
+ *
+ * The sheet opens on the **press**, not the release, for the reason
+ * `<Select>`'s menu does. It closes on Escape, on a second press of the
+ * trigger, and when the window loses focus — but *not* on a change, because
+ * a colour is chosen by dragging and there is no moment at which the choice
+ * is obviously finished.
+ *
+ * The popup is override-redirect and never takes focus, so the **trigger
+ * keeps the keyboard** and hands the panel its keys: Down/Up/Enter/Space
+ * open it, and once it is open the arrows drive the active axis and Tab
+ * moves between them. Escape stays here.
+ */
+export function ColorField(props) {
+    const { value, defaultValue, onChange, onChangeEnd, name, alpha = false, format = 'auto', swatches, recent, parts, eyedropper, contrast, disabled = false, placeholder, anchor: anchorOverrides, open: openProp, defaultOpen = false, onOpenChange, style, children, } = props;
+    const theme = useTheme();
+    const [ownOpen, setOwnOpen] = useState(defaultOpen);
+    const [anchor, setAnchor] = useState(null);
+    const [focused, setFocused] = useState(false);
+    const [ownValue, setOwnValue] = useState(defaultValue);
+    const triggerRef = useRef(null);
+    const pickerRef = useRef(null);
+    const measureAnchor = useAnchor(triggerRef);
+    const open = openProp ?? ownOpen;
+    const current = value === undefined ? ownValue : value;
+    const channels = current === undefined ? null : parseColor(current);
+    // The sheet is sized before it has laid anything out, so its height is
+    // computed from the parts rather than measured — `colorPickerHeight` and
+    // the picker read the same constants, which is what keeps a popup from
+    // clipping its own swatch row.
+    const shown = parts !== undefined
+        ? [...parts]
+        : [
+            'area',
+            'hue',
+            ...(alpha ? ['alpha'] : []),
+            'fields',
+            ...(swatches?.length ? ['swatches'] : []),
+            ...(recent?.length ? ['recent'] : []),
+            ...(contrast ? ['contrast'] : []),
+        ];
+    const width = COLOR_PICKER_WIDTH + SHEET_BORDER * 2;
+    const height = colorPickerHeight(shown, {
+        swatches: swatches?.length ?? 0,
+        recent: recent?.length ?? 0,
+    }) +
+        SHEET_BORDER * 2;
+    const anchorOptions = () => ({
+        placement: 'bottom',
+        width,
+        height,
+        ...anchorOverrides,
+    });
+    const setOpen = (next) => {
+        if (openProp === undefined)
+            setOwnOpen(next);
+        onOpenChange?.(next);
+    };
+    const close = () => setOpen(false);
+    const openSheet = () => {
+        const rect = measureAnchor(anchorOptions());
+        if (!rect)
+            return;
+        setAnchor(rect);
+        setOpen(true);
+    };
+    const toggle = () => (open ? close() : openSheet());
+    useAnchorTracking(triggerRef, open, anchorOptions, setAnchor, close);
+    useDismissOnWindowBlur(triggerRef, open, close);
+    const handleChange = (ev) => {
+        if (value === undefined)
+            setOwnValue(ev.value);
+        onChange?.(ev);
+    };
+    const onKeyDown = (ev) => {
+        if (ev.keysym === XK_ESCAPE) {
+            if (open)
+                close();
+            return;
+        }
+        if (open && pickerRef.current?.handleKey(ev))
+            return;
+        if (ev.keysym === XK_DOWN ||
+            ev.keysym === XK_UP ||
+            ev.keysym === XK_RETURN ||
+            ev.codepoint === 32) {
+            if (!open)
+                openSheet();
+        }
+    };
+    const label = channels === null
+        ? (placeholder ?? 'Pick a colour…')
+        : formatColor(channels, format === 'auto' ? 'hex' : format, alpha);
+    return hx('box', {
+        theme,
+        role: 'combobox',
+        'aria-expanded': Boolean(open),
+        'aria-haspopup': 'dialog',
+        'aria-label': 'Colour',
+        disabled: disabled || undefined,
+        ref: triggerRef,
+        focusable: !disabled,
+        onMouseDown: disabled ? undefined : toggle,
+        onFocus: () => setFocused(true),
+        onBlur: () => {
+            setFocused(false);
+            close();
+        },
+        onKeyDown: disabled ? undefined : onKeyDown,
+        style: [
+            s.trigger,
+            {
+                cursor: disabled ? 'default' : 'pointer',
+                borderWidth: theme.borderWidth,
+                borderRadius: theme.radius,
+                borderColor: focused || open ? theme.borderFocus : theme.border,
+                backgroundColor: disabled ? theme.surfaceHover : theme.background,
+            },
+            !disabled &&
+                !open && {
+                ':hover': { backgroundColor: theme.surfaceHover },
+                ':active': { backgroundColor: theme.surfaceActive },
+            },
+            style,
+        ],
+    }, hx('box', {
+        key: 'swatch',
+        style: [
+            s.swatch,
+            {
+                borderWidth: theme.borderWidth,
+                borderColor: theme.border,
+                borderRadius: 3,
+                backgroundColor: channels
+                    ? formatColor(channels, 'hex', alpha)
+                    : 'transparent',
+            },
+        ],
+    }), hx('text', {
+        key: 'label',
+        style: [
+            s.label,
+            {
+                color: disabled || channels === null ? theme.textMuted : theme.text,
+                fontFamily: channels === null ? undefined : theme.monoFamily,
+            },
+        ],
+    }, label), open &&
+        anchor &&
+        hx('popup', {
+            key: 'sheet',
+            theme,
+            x: anchor.x,
+            y: anchor.y,
+            width,
+            height,
+            grab: true,
+            onDismiss: close,
+            transparent: true,
+            style: {
+                backgroundColor: theme.background,
+                '@supports transparency': { backgroundColor: 'transparent' },
+            },
+        }, hx('box', {
+            style: [
+                s.sheet,
+                {
+                    borderColor: theme.border,
+                    backgroundColor: theme.background,
+                    '@supports transparency': { borderRadius: theme.radiusPopup },
+                },
+            ],
+        }, React.createElement(ColorPicker, {
+            ref: pickerRef,
+            value: current,
+            onChange: handleChange,
+            onChangeEnd,
+            name,
+            alpha,
+            format,
+            swatches,
+            recent,
+            parts,
+            eyedropper,
+            contrast,
+            disabled,
+            // The trigger owns the keyboard: the popup is override-redirect
+            // and never takes focus, so a focusable panel inside it would
+            // take focus on the press instead — blurring the trigger, whose
+            // onBlur closes the sheet, unmounting the pane under the pointer
+            // before the release could turn into a click.
+            focusable: false,
+            // …and because it does not hold the focus, it would not draw the
+            // axis cursor either, leaving the arrow keys moving something
+            // invisible.
+            focusVisible: true,
+            children,
+        }))));
+}
+//# sourceMappingURL=ColorField.js.map

package/dist/color-picker/ColorField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorField.js","sourceRoot":"","sources":["../../src/color-picker/ColorField.ts"],"names":[],"mappings":"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"}

package/dist/color-picker/ColorPicker.d.ts

@@ -0,0 +1,109 @@
+import type { ReactElement, ReactNode, Ref } from 'react';
+import type { Style } from 'react-x11/style';
+import type { KeyboardEvent } from 'react-x11';
+import type { WidgetChangeEvent } from '../internal/widget.js';
+import type { ColorChannels, ColorFormat } from './color.js';
+/** How wide a `<ColorPicker>` lays out. */
+export declare const COLOR_PICKER_WIDTH: number;
+/** The parts a picker is made of, in the order they are stacked. */
+export type ColorPickerPart = 'area' | 'hue' | 'alpha' | 'fields' | 'swatches' | 'recent' | 'contrast';
+/** A preset. The bare string is the common case; the object is for a preset
+ *  whose name is worth reading out ("Brand primary"). */
+export type ColorSwatch = string | {
+    value: string;
+    label?: string;
+};
+/**
+ * What `onChange` is handed.
+ *
+ * A {@link WidgetChangeEvent} — `{ type, target: { type, name, value } }`,
+ * the shape a form library destructures — **plus** `color`. `ev.value` is the
+ * string, and `ev.color` is what it was built from, which is how an app that
+ * wants channels gets them without a second callback or an object-valued
+ * `value`. `ev.color.h` is the live hue, which the string cannot always carry:
+ * every black is hue 0 once it is written down.
+ */
+export interface ColorChangeEvent extends WidgetChangeEvent<string> {
+    color: ColorChannels;
+}
+export interface ColorPickerHandle {
+    /** Focus the first axis. */
+    focus: () => void;
+    /** Feed the picker a key it did not receive itself — what `<ColorField>`
+     *  uses, the way `<DatePicker>` feeds `<Calendar>`. Answers whether the
+     *  picker took it. */
+    handleKey: (ev: KeyboardEvent) => boolean;
+    readonly value: string;
+    readonly channels: ColorChannels;
+}
+export interface ColorPickerProps {
+    /** The colour, controlled. Any CSS colour this package can parse — which is
+     *  more than the renderer can paint; see `formatColor` for what comes out. */
+    value?: string;
+    /** The colour, uncontrolled. Defaults to `#000000`. */
+    defaultValue?: string;
+    /** Every step of a drag, every arrow key, every accepted edit of the field. */
+    onChange?: (ev: ColorChangeEvent) => void;
+    /** The same event, on pointer release and on each keyboard commit — for an
+     *  app whose re-render is too expensive to run per pointer step. */
+    onChangeEnd?: (ev: ColorChangeEvent) => void;
+    /** Carried on `ev.target.name`, for form libraries. */
+    name?: string;
+    /** Show the alpha strip, and emit alpha. Off by default: a picker without
+     *  the strip must not start emitting `rgba()` because the value it was
+     *  handed had one. */
+    alpha?: boolean;
+    /** The output spelling. `'auto'` (the default) follows the spelling the
+     *  incoming value used, and hex when it used none. */
+    format?: ColorFormat | 'auto';
+    /** Presets, as a row under the panel. */
+    swatches?: readonly ColorSwatch[];
+    /** The app's recently-used colours, as a second row. Nothing is stored
+     *  here — a picker that remembered would be a store. */
+    recent?: readonly ColorSwatch[];
+    /** Which parts appear, and in what order. Defaults to the parts the other
+     *  props imply: the field and the hue slider, alpha when `alpha`, the
+     *  fields row, and a row per non-empty swatch list. */
+    parts?: readonly ColorPickerPart[];
+    /** The eyedropper button. `true` (the default) shows it wherever core can
+     *  sample the screen — `useEyedropper().supported`. A function replaces the
+     *  sampler with your own, which is also how a test drives it. */
+    eyedropper?: boolean | (() => Promise<string | null>);
+    /** A colour to measure the value against: the `'contrast'` part shows the
+     *  WCAG ratio and its grade. */
+    contrast?: string;
+    disabled?: boolean;
+    /** Whether the panel takes the keyboard itself. `<ColorField>` sets this
+     *  false and feeds keys through the handle, because an override-redirect
+     *  popup never takes focus. */
+    focusable?: boolean;
+    /** Draw the axis cursor even without the focus — the other half of
+     *  `focusable={false}`. */
+    focusVisible?: boolean;
+    style?: Style | Style[];
+    'data-testname'?: string;
+    ref?: Ref<ColorPickerHandle>;
+    children?: ReactNode;
+}
+/** The rows a set of parts adds up to — `<ColorField>` needs the height of
+ *  the panel before the panel exists. */
+export declare function colorPickerHeight(parts: readonly ColorPickerPart[], counts?: {
+    swatches?: number;
+    recent?: number;
+}): number;
+/**
+ * `<ColorPicker value onChange>` — the colour panel.
+ *
+ *   <ColorPicker value={accent} onChange={(ev) => setAccent(ev.value)} />
+ *   <ColorPicker … alpha swatches={brand.colors} />
+ *   <ColorPicker … parts={['swatches']} />          // the palette-only shape
+ *
+ * The value is a **CSS colour string**, the way a `<Calendar>`'s day is a
+ * `'YYYY-MM-DD'` string: it drops straight into `backgroundColor`, survives
+ * JSON, and needs no constructor. What it cannot carry is the hue behind a
+ * black or a grey, so the picker holds HSVA of its own and adopts the `value`
+ * prop only when that prop is not the string it last emitted. Drag the
+ * brightness to zero and back and the hue is still where it was.
+ */
+export declare function ColorPicker(props: ColorPickerProps): ReactElement;
+//# sourceMappingURL=ColorPicker.d.ts.map

package/dist/color-picker/ColorPicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["../../src/color-picker/ColorPicker.ts"],"names":[],"mappings":"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"}