@juwel-development/design-system 3.8.0 → 3.9.1

package/src/Interaction/MultiSelect/MultiSelectCompositionError.ts

@@ -0,0 +1,6 @@
+export class MultiSelectCompositionError extends Error {
+  constructor(member: string) {
+    super(`MultiSelect.${member} must be composed inside MultiSelect.Root`);
+    this.name = 'MultiSelectCompositionError';
+  }
+}

package/src/Interaction/MultiSelect/fitChips.ts

@@ -0,0 +1,27 @@
+/**
+ * How many leading chips fit on one line beside the hidden-selection count. Every chip fits
+ * when their widths and gaps do; otherwise the count is reserved and the longest prefix that
+ * leaves room for it - and the gap before it - is shown, down to a count-only display.
+ */
+export const fitChips = (
+  chipWidths: readonly number[],
+  countWidth: number,
+  availableWidth: number,
+  gap: number,
+): number => {
+  const gaps = Math.max(chipWidths.length - 1, 0) * gap;
+  const total = chipWidths.reduce((sum, width) => sum + width, 0) + gaps;
+  if (total <= availableWidth) {
+    return chipWidths.length;
+  }
+  let visible = 0;
+  let used = countWidth;
+  for (const width of chipWidths) {
+    if (used + width + gap > availableWidth) {
+      break;
+    }
+    used += width + gap;
+    visible += 1;
+  }
+  return visible;
+};

package/src/Interaction/NumberInput/NumberInput.tsx

@@ -0,0 +1,125 @@
+import { cva } from 'class-variance-authority';
+import { type FunctionComponent, useEffect, useId, useRef } from 'react';
+import type { Subject } from 'rxjs';
+
+// One recipe of its own, not Input's (design-system-components.md §4, issue #111): a text control
+// so `-`, `1.` and `1,5` survive - the Number state sanitises them to `''` (WHATWG input.html
+// #number-state) - with `inputmode=decimal` as a keyboard hint only. The classes are Input's, for
+// Input's reasons: tokens re-pointed by `.dark`, the ring of docs/adr/0002, the faces of 0004.
+const numberInput = cva(
+  'block w-full rounded-[var(--radius-control)] border border-solid border-control-border bg-transparent px-3 py-2 font-primary text-body text-foreground transition-colors duration-[var(--motion-duration-color)] outline-focus-ring outline-offset-[var(--focus-ring-offset)] focus-visible:outline focus-visible:outline-[length:var(--focus-ring-width)] [&:user-invalid]:border-error aria-[invalid=true]:border-error disabled:cursor-not-allowed disabled:border-disabled disabled:text-muted',
+);
+
+export interface INumberInputProps {
+  /** Always rendered and associated with the control; never replaced by the placeholder. */
+  label: string;
+  /** How the surrounding form reads the entered text on submit. */
+  name: string;
+  /** Presence only: the form rejects an empty field, never a non-numeric one. */
+  required?: boolean;
+  /** How a non-required field says so, in the consuming app's language; left out, no marker renders. */
+  optionalLabel?: string;
+  hint?: string;
+  /** The consumer's verdict on the text; the control renders it and keeps accepting edits. */
+  invalid?: boolean;
+  errorMessage?: string;
+  disabled?: boolean;
+  placeholder?: string;
+  /**
+   * Initialises the uncontrolled field, on mount only: a later change never replaces the current
+   * edit. To restore saved text, remount the field with it; native form reset returns to it.
+   */
+  defaultValue?: string;
+  /** Emits the current text on every user edit - typing, pasting, clearing - and on nothing else. */
+  onInput$?: Subject<string>;
+  /** Emit to empty the control in place, keeping the same node so focus survives; `onInput$` stays silent. */
+  reset$?: Subject<void>;
+  testId?: string;
+}
+
+/**
+ * A labelled field for typing numeric amounts and thresholds. It is a text control with a decimal
+ * keyboard hint, so the entered text - blank, `0`, `-`, `1.`, `1,5` or pasted content - is kept
+ * exactly as typed and read by the form by `name`. Parsing, locale and validity are the consumer's.
+ */
+export const NumberInput: FunctionComponent<INumberInputProps> = ({
+  label,
+  name,
+  required,
+  optionalLabel,
+  hint,
+  invalid,
+  errorMessage,
+  disabled,
+  placeholder,
+  defaultValue,
+  onInput$,
+  reset$,
+  testId,
+}) => {
+  const id = useId();
+  const controlId = `${id}-control`;
+  const hintId = `${id}-hint`;
+  const errorId = `${id}-error`;
+  const describedBy =
+    [hint ? hintId : undefined, invalid ? errorId : undefined]
+      .filter(Boolean)
+      .join(' ') || undefined;
+
+  // reset$ is the one inbound command, so the component subscribes here (coding.md#asynchrony) and
+  // owns the teardown; onInput$ it only emits on. Emptying the live node keeps focus and any
+  // in-flight IME composition, which a `key` remount would discard (issue #64).
+  const controlRef = useRef<HTMLInputElement>(null);
+  useEffect(() => {
+    const subscription = reset$?.subscribe(() => {
+      if (controlRef.current) {
+        controlRef.current.value = '';
+      }
+    });
+    return () => subscription?.unsubscribe();
+  }, [reset$]);
+
+  return (
+    <div className={'flex flex-col gap-[var(--space-stack)]'}>
+      <label
+        htmlFor={controlId}
+        className={'font-secondary font-medium text-body text-foreground'}
+      >
+        {label}
+      </label>
+      <input
+        ref={controlRef}
+        id={controlId}
+        name={name}
+        type={'text'}
+        inputMode={'decimal'}
+        className={numberInput()}
+        required={required}
+        disabled={disabled}
+        defaultValue={defaultValue}
+        placeholder={placeholder}
+        aria-invalid={invalid || undefined}
+        aria-describedby={describedBy}
+        data-testid={testId}
+        onInput={(event) =>
+          !disabled && onInput$?.next(event.currentTarget.value)
+        }
+      />
+      {!required && optionalLabel && (
+        <span className={'font-secondary text-muted text-small'}>
+          {optionalLabel}
+        </span>
+      )}
+      {hint && (
+        <p id={hintId} className={'font-secondary text-muted text-small'}>
+          {hint}
+        </p>
+      )}
+      {invalid && (
+        <p id={errorId} className={'font-secondary text-error text-small'}>
+          {errorMessage}
+        </p>
+      )}
+    </div>
+  );
+};

package/src/Interaction/Slider/Slider.tsx

@@ -1,5 +1,5 @@
 import { cva } from 'class-variance-authority';
-import type { FunctionComponent } from 'react';
+import { type FunctionComponent, useId } from 'react';
 import type { Subject } from 'rxjs';
 import { SliderConfigurationError } from './SliderConfigurationError';
 
@@ -45,7 +45,10 @@ export interface ISliderProps {
    * could never read a value at all.
    */
   onInput$: Subject<number>;
-  /** The control's accessible name. */
+  /**
+   * Always rendered as a visible label associated with the control, the way `Input`'s is (#112);
+   * it doubles as the accessible name.
+   */
   label: string;
   /**
    * How the value is announced, in the consumer's wording ("$60 a week"). Left out, assistive
@@ -91,8 +94,10 @@ const assertOperatingRange = (
  * A control that sets one numeric value by moving one thumb along a fixed, visible operating
  * range. Controlled: the consumer holds the value and passes it back in, and a value it does not
  * pass back is never adopted. It renders the value nowhere - the consumer sets any figures beside
- * it with typography - and it fills its container's width the way `Input` does. `disabled` is the
- * explicit non-operable state.
+ * it with typography - and it fills its container's width the way `Input` does. Its label follows
+ * `Input` too: visible, associated, and the only text the component renders (#112). It is still
+ * a live control and not a form field, so none of Input's annotations - hint, error, optional
+ * marker - come with it. `disabled` is the explicit non-operable state.
  */
 export const Slider: FunctionComponent<ISliderProps> = ({
   min,
@@ -105,21 +110,32 @@ export const Slider: FunctionComponent<ISliderProps> = ({
   disabled,
   testId,
 }) => {
+  const controlId = `${useId()}-control`;
   assertOperatingRange({ min, max, step, value });
   return (
-    <input
-      type={'range'}
-      className={slider()}
-      min={min}
-      max={max}
-      step={step}
-      value={value}
-      disabled={disabled}
-      aria-label={label}
-      aria-valuetext={valueText}
-      data-testid={testId}
-      // React's onChange rides the native input event, so every movement emits through here.
-      onChange={(event) => onInput$.next(event.currentTarget.valueAsNumber)}
-    />
+    <div className={'flex flex-col gap-[var(--space-stack)]'}>
+      {/* The label declares its face and size on itself, never on the wrapper, which would hand
+          them to the control too; `body` is the control's own role (docs/adr/0004, #90, #92). */}
+      <label
+        htmlFor={controlId}
+        className={'font-secondary font-medium text-body text-foreground'}
+      >
+        {label}
+      </label>
+      <input
+        id={controlId}
+        type={'range'}
+        className={slider()}
+        min={min}
+        max={max}
+        step={step}
+        value={value}
+        disabled={disabled}
+        aria-valuetext={valueText}
+        data-testid={testId}
+        // React's onChange rides the native input event, so every movement emits through here.
+        onChange={(event) => onInput$.next(event.currentTarget.valueAsNumber)}
+      />
+    </div>
   );
 };

package/src/index.ts

@@ -24,6 +24,8 @@ export { Button } from 'Interaction/Button/Button';
 export { Choices } from 'Interaction/Choices/Choices';
 export { Input } from 'Interaction/Input/Input';
 export { Link } from 'Interaction/Link/Link';
+export { MultiSelect } from 'Interaction/MultiSelect/MultiSelect';
+export { NumberInput } from 'Interaction/NumberInput/NumberInput';
 export { Select } from 'Interaction/Select/Select';
 export { Slider } from 'Interaction/Slider/Slider';
 export { Tabs } from 'Interaction/Tabs/Tabs';