orionplace-react 0.1.0 → 0.2.1

package/templates/components/orionplace/shared/OrionplaceSearchSelect.tsx

@@ -0,0 +1,367 @@
+'use client';
+
+import {
+  useEffect,
+  useId,
+  useRef,
+  useState,
+} from 'react';
+import type {
+  ChangeEvent,
+  FocusEvent,
+  KeyboardEvent,
+  MouseEvent,
+} from 'react';
+import styles from './OrionplaceSearchSelect.module.css';
+
+export interface OrionplaceSearchSelectOption {
+  value: string;
+  label: string;
+}
+
+export interface OrionplaceSearchSelectProps {
+  label: string;
+  options: OrionplaceSearchSelectOption[];
+  loadingLabel: string;
+  emptyLabel: string;
+  retryLabel: string;
+  value?: string;
+  selectedLabel?: string;
+  placeholder?: string;
+  pending?: boolean;
+  error?: string;
+  disabled?: boolean;
+  required?: boolean;
+  debounce?: number;
+  onValueChange?: (value: string) => void;
+  onChange?: (value: string) => void;
+  onSearch?: (query: string) => void;
+}
+
+export function OrionplaceSearchSelect({
+  label,
+  options,
+  loadingLabel,
+  emptyLabel,
+  retryLabel,
+  value = '',
+  selectedLabel = '',
+  placeholder = '',
+  pending = false,
+  error = '',
+  disabled = false,
+  required = false,
+  debounce = 300,
+  onValueChange,
+  onChange,
+  onSearch,
+}: OrionplaceSearchSelectProps) {
+  const id = useId();
+  const input = useRef<HTMLInputElement>(null);
+  const menu = useRef<HTMLDivElement>(null);
+  const searchTimer = useRef<ReturnType<typeof setTimeout>>(undefined);
+  const searchedQuery = useRef('');
+  const [open, setOpen] = useState(false);
+  const [editing, setEditing] = useState(false);
+  const [waiting, setWaiting] = useState(false);
+  const [query, setQuery] = useState('');
+  const [highlightedIndex, setHighlightedIndex] = useState(-1);
+
+  const searching = pending || waiting;
+  const showsEmpty = open && !searching && !error && options.length === 0;
+  const showsMenu = open && (options.length > 0 || showsEmpty);
+  const inputValue = editing ? query : selectedLabel;
+  const activeDescendant = open && highlightedIndex >= 0
+    ? `${id}-option-${highlightedIndex}`
+    : undefined;
+  const statusText = pending ? loadingLabel : showsEmpty ? emptyLabel : '';
+
+  useEffect(() => () => clearTimeout(searchTimer.current), []);
+
+  useEffect(() => {
+    setHighlightedIndex(editing ? Math.min(0, options.length - 1) : selectedIndex());
+  }, [options, editing, value]);
+
+  useEffect(() => {
+    if (disabled) {
+      closeMenu();
+    }
+  }, [disabled]);
+
+  useEffect(() => {
+    if (!open || highlightedIndex < 0) {
+      return;
+    }
+
+    const option = menu.current?.children.item(highlightedIndex) as HTMLElement | null;
+    if (!menu.current || !option) {
+      return;
+    }
+
+    const top = option.offsetTop;
+    const bottom = top + option.offsetHeight;
+    if (top < menu.current.scrollTop) {
+      menu.current.scrollTop = top;
+    } else if (bottom > menu.current.scrollTop + menu.current.clientHeight) {
+      menu.current.scrollTop = bottom - menu.current.clientHeight;
+    }
+  }, [open, highlightedIndex, options]);
+
+  function selectedIndex() {
+    return options.findIndex((option) => option.value === value);
+  }
+
+  function openMenu() {
+    if (disabled || open) {
+      return;
+    }
+
+    setHighlightedIndex(editing ? 0 : selectedIndex());
+    setOpen(true);
+  }
+
+  function closeMenu() {
+    setOpen(false);
+    setHighlightedIndex(-1);
+  }
+
+  function emitSearch(nextQuery: string) {
+    clearTimeout(searchTimer.current);
+    setWaiting(false);
+    searchedQuery.current = nextQuery;
+    onSearch?.(nextQuery);
+  }
+
+  function scheduleSearch(nextQuery: string) {
+    clearTimeout(searchTimer.current);
+    setWaiting(true);
+    searchTimer.current = setTimeout(
+      () => emitSearch(nextQuery.trim()),
+      debounce,
+    );
+  }
+
+  function discardTyping() {
+    const hadQuery = waiting || searchedQuery.current !== '';
+    setEditing(false);
+    setQuery('');
+    if (hadQuery) {
+      emitSearch('');
+    }
+  }
+
+  function handleInput(event: ChangeEvent<HTMLInputElement>) {
+    const nextQuery = event.target.value;
+    setQuery(nextQuery);
+    setEditing(true);
+    if (!open && !disabled) {
+      setHighlightedIndex(0);
+      setOpen(true);
+    }
+    scheduleSearch(nextQuery);
+  }
+
+  function handleBlur(event: FocusEvent<HTMLInputElement>) {
+    if (event.relatedTarget instanceof Node && menu.current?.contains(event.relatedTarget)) {
+      return;
+    }
+
+    closeMenu();
+    if (editing) {
+      discardTyping();
+    }
+  }
+
+  function retry(event: MouseEvent<HTMLButtonElement>) {
+    event.preventDefault();
+    emitSearch(editing ? query.trim() : searchedQuery.current);
+    input.current?.focus();
+  }
+
+  function moveHighlight(step: number) {
+    const last = options.length - 1;
+    if (last < 0) {
+      return;
+    }
+
+    const fromEnd = highlightedIndex < 0 && step < 0;
+    const start = fromEnd ? last + 1 : highlightedIndex;
+    setHighlightedIndex(Math.max(0, Math.min(start + step, last)));
+  }
+
+  function handleKeyDown(event: KeyboardEvent<HTMLInputElement>) {
+    if (disabled) {
+      return;
+    }
+
+    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+      event.preventDefault();
+      if (!open) {
+        openMenu();
+        return;
+      }
+      moveHighlight(event.key === 'ArrowDown' ? 1 : -1);
+      return;
+    }
+
+    if (event.key === 'Enter' && open) {
+      event.preventDefault();
+      if (!searching && highlightedIndex >= 0) {
+        selectOption(highlightedIndex);
+      }
+      return;
+    }
+
+    if (event.key === 'Escape') {
+      if (open || editing) {
+        event.preventDefault();
+      }
+      if (open) {
+        closeMenu();
+      } else if (editing) {
+        discardTyping();
+      }
+      return;
+    }
+
+    if (event.key === 'Tab') {
+      closeMenu();
+    }
+  }
+
+  function selectOption(index: number) {
+    const option = options[index];
+    if (!option || disabled) {
+      return;
+    }
+
+    setEditing(false);
+    setQuery('');
+    closeMenu();
+    if (option.value !== value) {
+      onValueChange?.(option.value);
+      onChange?.(option.value);
+    }
+    input.current?.focus();
+  }
+
+  return (
+    <div
+      className={styles.root}
+      data-feature-part="OrionplaceSearchSelect"
+    >
+      <label
+        id={`${id}-label`}
+        htmlFor={`${id}-input`}
+        className={styles.label}
+      >
+        <span className={styles.labelText}>
+          {label}
+          {required && (
+            <span className={styles.required} aria-hidden="true">*</span>
+          )}
+        </span>
+      </label>
+      <div className={styles.field}>
+        <input
+          id={`${id}-input`}
+          ref={input}
+          type="text"
+          role="combobox"
+          autoComplete="off"
+          spellCheck={false}
+          aria-autocomplete="list"
+          aria-expanded={open}
+          aria-controls={`${id}-options`}
+          aria-activedescendant={activeDescendant}
+          aria-required={required || undefined}
+          aria-invalid={Boolean(error) || undefined}
+          aria-busy={pending || undefined}
+          aria-describedby={`${id}-status`}
+          value={inputValue}
+          placeholder={placeholder}
+          disabled={disabled}
+          className={styles.input}
+          onChange={handleInput}
+          onClick={openMenu}
+          onKeyDown={handleKeyDown}
+          onBlur={handleBlur}
+        />
+        {pending ? (
+          <span
+            data-search-select-spinner
+            className={styles.spinner}
+            aria-hidden="true"
+          />
+        ) : (
+          <svg
+            viewBox="0 0 20 20"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="1.5"
+            aria-hidden="true"
+            className={`${styles.chevron} ${open ? styles.chevronOpen : ''}`.trim()}
+          >
+            <path d="m5 7.5 5 5 5-5" />
+          </svg>
+        )}
+        <div
+          ref={menu}
+          className={styles.menu}
+          hidden={!showsMenu}
+          onMouseDown={(event) => event.preventDefault()}
+        >
+          <ul
+            id={`${id}-options`}
+            role="listbox"
+            aria-labelledby={`${id}-label`}
+            className={styles.options}
+          >
+            {options.map((option, index) => (
+              <li
+                id={`${id}-option-${index}`}
+                key={option.value}
+                role="option"
+                aria-selected={option.value === value}
+                title={option.label}
+                className={`${styles.option} ${index === highlightedIndex ? styles.highlighted : ''}`.trim()}
+                onPointerMove={() => setHighlightedIndex(index)}
+                onClick={() => selectOption(index)}
+              >
+                <span className={styles.optionLabel}>{option.label}</span>
+                <svg
+                  viewBox="0 0 20 20"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="1.5"
+                  aria-hidden="true"
+                  className={`${styles.check} ${option.value === value ? '' : styles.invisible}`.trim()}
+                >
+                  <path d="m4 10 4 4 8-8" />
+                </svg>
+              </li>
+            ))}
+          </ul>
+          {showsEmpty && <p className={styles.empty}>{emptyLabel}</p>}
+        </div>
+      </div>
+      <span id={`${id}-status`} role="status" className={styles.srOnly}>
+        {statusText}
+      </span>
+      {error && (
+        <div className={styles.error} role="alert">
+          <span>{error}</span>
+          <button
+            type="button"
+            className={styles.retry}
+            disabled={disabled || pending}
+            onMouseDown={(event) => event.preventDefault()}
+            onClick={retry}
+          >
+            {retryLabel}
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}

package/templates/components/orionplace/shared/OrionplaceSelect.README.md

@@ -0,0 +1,69 @@
+# OrionplaceSelect
+
+## English
+
+A selection control with pointer, keyboard and type-to-find interaction.
+`options` maps each submitted value to its visible caption. `value` is the
+current value; `onValueChange(value)` updates it, and `onChange(value)`
+reports a new choice. An unavailable value displays the first option until
+the application updates its value. Both callbacks run only when a different
+option is chosen.
+
+`label` names the control. `required` marks it as required for assistive
+technology. `disabled`, `compact` and `borderless` adjust availability and
+appearance. `displayValue` changes only the closed button's caption.
+`countryCodes` shows supported flag icons beside options. Supplying `icons`
+reserves an image position for every option; missing and failed images use
+the shared neutral icon. The list closes after selection, Escape, outside
+pointer input or a viewport resize.
+
+### Props
+
+| Prop                                      | Meaning                                                                                                |
+| ----------------------------------------- | ------------------------------------------------------------------------------------------------------ |
+| `options: Record<string, string>`         | Choices available in the control.                                                                      |
+| `label: string`                           | Visible or accessible name for the component’s main control or region.                                 |
+| `value?: string`                          | Current controlled value.                                                                              |
+| `onValueChange?: (value: string) => void` | Called when the visitor changes the controlled input value. The callback payload is shown in its type. |
+| `onChange?: (value: string) => void`      | Called when the visitor confirms a new value. The callback payload is shown in its type.               |
+| `disabled?: boolean`                      | Disables the component controls and prevents new actions.                                              |
+| `compact?: boolean`                       | Uses the compact component presentation.                                                               |
+| `borderless?: boolean`                    | Removes the select control border while preserving its interactions.                                   |
+| `displayValue?: string`                   | Text displayed in the closed select control.                                                           |
+| `required?: boolean`                      | Marks the control as required for form submission.                                                     |
+| `countryCodes?: Record<string, string>`   | Country codes used to show flags beside select options.                                                |
+| `icons?: Record<string, string>`          | Image addresses shown beside matching select options.                                                  |
+
+## Русский
+
+Поле выбора с управлением указателем, клавиатурой и поиском по началу
+названия. `options` связывает отправляемое значение с видимой подписью.
+`value` содержит текущее значение; `onValueChange(value)` обновляет его,
+а `onChange(value)` сообщает о новом выборе. Если значение недоступно,
+показывается первый вариант, пока приложение не обновит `value`. Оба
+обработчика вызываются только при выборе другого варианта.
+
+`label` задаёт название поля. `required` отмечает обязательное поле для
+программ экранного доступа. `disabled`, `compact` и `borderless` управляют
+доступностью и видом. `displayValue` меняет только подпись закрытого поля.
+`countryCodes` показывает доступные флаги. Если передать `icons`, место
+изображения сохраняется для каждого варианта; отсутствующее или не
+загрузившееся изображение заменяется нейтральным значком. Список закрывается
+после выбора, по Escape, при нажатии вне поля или изменении размера окна.
+
+### Свойства
+
+| Свойство                                  | Назначение                                                                                              |
+| ----------------------------------------- | ------------------------------------------------------------------------------------------------------- |
+| `options: Record<string, string>`         | Варианты, доступные в элементе выбора.                                                                  |
+| `label: string`                           | Видимое или доступное название основного элемента компонента.                                           |
+| `value?: string`                          | Текущее управляемое значение.                                                                           |
+| `onValueChange?: (value: string) => void` | Вызывается, когда покупатель изменяет управляемое значение поля. Данные обработчика указаны в его типе. |
+| `onChange?: (value: string) => void`      | Вызывается, когда покупатель подтверждает новое значение. Данные обработчика указаны в его типе.        |
+| `disabled?: boolean`                      | Блокирует элементы компонента и новые действия.                                                         |
+| `compact?: boolean`                       | Включает компактное представление компонента.                                                           |
+| `borderless?: boolean`                    | Убирает рамку элемента выбора, сохраняя его поведение.                                                  |
+| `displayValue?: string`                   | Текст в закрытом элементе выбора.                                                                       |
+| `required?: boolean`                      | Помечает элемент как обязательный для отправки формы.                                                   |
+| `countryCodes?: Record<string, string>`   | Коды стран для флагов рядом с вариантами выбора.                                                        |
+| `icons?: Record<string, string>`          | Адреса изображений рядом с соответствующими вариантами выбора.                                          |

package/templates/components/orionplace/shared/OrionplaceSelect.module.css

@@ -0,0 +1,233 @@
+.root {
+  --orionplace-select-option-hover: color-mix(
+    in srgb,
+    var(--orionplace-hover) 60%,
+    transparent
+  );
+  --orionplace-select-trigger-hover: color-mix(
+    in srgb,
+    currentColor 6%,
+    transparent
+  );
+  position: relative;
+  display: inline-flex;
+  height: fit-content;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 0;
+  max-width: 100%;
+  color: var(--orionplace-text);
+  font-size: 14px;
+  line-height: 24px;
+}
+
+.label {
+  color: var(--orionplace-muted);
+  font-size: 12px;
+  line-height: 16px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.labelText {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.required {
+  color: var(--orionplace-danger);
+}
+
+.control {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 160px;
+  max-width: 100%;
+  min-height: 44px;
+  padding: 8px 12px;
+  border: 1px solid var(--orionplace-border);
+  border-radius: 0;
+  background: var(--orionplace-surface);
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  outline: none;
+  transition:
+    border-color 150ms,
+    background-color 150ms;
+}
+
+.control:focus-visible {
+  border-color: var(--orionplace-text);
+}
+
+@media (hover: hover) {
+  .control:hover:not(:disabled) {
+    border-color: var(--orionplace-text);
+  }
+}
+.control:disabled {
+  cursor: default;
+  opacity: 0.6;
+}
+.value {
+  min-width: 0;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.chevron {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  color: var(--orionplace-muted);
+  transition: transform 150ms;
+}
+.borderless .chevron {
+  color: inherit;
+  opacity: 0.7;
+}
+.chevronOpen {
+  transform: rotate(180deg);
+}
+
+.listbox {
+  position: absolute;
+  z-index: 50;
+  box-sizing: border-box;
+  width: max-content;
+  min-width: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  border: 1px solid var(--orionplace-border);
+  border-radius: 0;
+  background: var(--orionplace-surface);
+  color: var(--orionplace-text);
+  font-size: 14px;
+  line-height: calc(20 / 14);
+  text-transform: none;
+  letter-spacing: normal;
+  backdrop-filter: blur(4px);
+}
+
+.above {
+  bottom: calc(100% + 4px);
+}
+.below {
+  top: calc(100% + 4px);
+}
+.right {
+  right: 0;
+}
+.left {
+  left: 0;
+}
+
+.option {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
+  min-height: 40px;
+  padding: 8px 12px;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background-color 100ms;
+}
+.highlighted {
+  background: var(--orionplace-select-option-hover);
+}
+@media (hover: hover) {
+  .option:hover {
+    background: var(--orionplace-select-option-hover);
+  }
+}
+.caption {
+  min-width: 0;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.check {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  color: var(--orionplace-accent);
+}
+.invisible {
+  visibility: hidden;
+}
+.flag {
+  width: 24px;
+  height: 16px;
+  flex-shrink: 0;
+  background-size: cover;
+}
+.optionIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+  overflow: hidden;
+}
+.optionIcon img,
+.optionIcon svg {
+  display: block;
+  width: 20px;
+  height: 20px;
+  object-fit: contain;
+}
+.optionIcon svg {
+  color: var(--orionplace-muted);
+}
+
+.compact {
+  gap: 0;
+}
+.compact .label {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+}
+.compact .control {
+  min-width: 0;
+  min-height: 36px;
+  gap: 8px;
+  padding: 4px 8px;
+  font-size: 12px;
+  line-height: 16px;
+}
+.borderless {
+  color: inherit;
+}
+.borderless .control {
+  border: 0;
+  background: transparent;
+}
+.borderless .control:focus-visible {
+  background: var(--orionplace-select-trigger-hover);
+}
+@media (hover: hover) {
+  .borderless .control:hover:not(:disabled) {
+    background: var(--orionplace-select-trigger-hover);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .control,
+  .chevron {
+    transition: none;
+  }
+}