orionplace-react 0.7.7 → 0.8.0

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

@@ -1,367 +0,0 @@
-'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

@@ -1,69 +0,0 @@
-# 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

@@ -1,233 +0,0 @@
-.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;
-  }
-}