orionplace-react 0.7.7 → 0.8.0

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

@@ -1,79 +0,0 @@
-.root {
-  position: relative;
-  display: block;
-  min-width: 0;
-}
-
-.root .field {
-  box-sizing: border-box;
-  display: block;
-  width: 100%;
-  min-width: 0;
-  height: 44px;
-  margin: 0;
-  padding: 0 48px 0 12px;
-  border: 1px solid var(--orionplace-border);
-  border-radius: 0;
-  background: var(--orionplace-surface);
-  color: var(--orionplace-text);
-  font: inherit;
-  font-size: 14px;
-  /* The form's line height, as `font: inherit` gives the other packages. */
-  line-height: inherit;
-  letter-spacing: normal;
-  text-transform: none;
-  outline: none;
-  transition: border-color 150ms;
-}
-
-.root .field:focus { border-color: var(--orionplace-text); }
-
-@media (hover: hover) {
-  .root .field:hover:not(:disabled) {
-    border-color: var(--orionplace-text);
-  }
-}
-.root .field[aria-invalid="true"] { border-color: var(--orionplace-danger); }
-.root .field:disabled { cursor: not-allowed; opacity: 0.4; }
-
-.root .toggle {
-  box-sizing: border-box;
-  position: absolute;
-  top: 1px;
-  right: 1px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 42px;
-  height: 42px;
-  margin: 0;
-  padding: 0;
-  border: 1px solid transparent;
-  border-radius: 0;
-  background: transparent;
-  color: var(--orionplace-muted);
-  cursor: pointer;
-  outline: none;
-  transition:
-    color 150ms,
-    background-color 150ms;
-}
-
-@media (hover: hover) {
-  .root .toggle:hover:not(:disabled) {
-    background: transparent;
-    color: var(--orionplace-text);
-  }
-}
-.root .toggle:focus-visible {
-  border-color: var(--orionplace-text);
-  background: var(--orionplace-hover);
-  color: var(--orionplace-text);
-}
-.root .toggle:disabled { cursor: not-allowed; opacity: 0.4; }
-.root .toggle svg { width: 20px; height: 20px; flex-shrink: 0; }
-
-@media (prefers-reduced-motion: reduce) {
-  .root .field,
-  .root .toggle { transition: none; }
-}

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

@@ -1,103 +0,0 @@
-'use client';
-
-import { useEffect, useRef, useState } from 'react';
-import { flushSync } from 'react-dom';
-import type { InputHTMLAttributes } from 'react';
-import styles from '@/components/orionplace/shared/OrionplacePasswordInput.module.css';
-
-export interface OrionplacePasswordInputProps extends Omit<
-  InputHTMLAttributes<HTMLInputElement>,
-  'id' | 'type' | 'value' | 'onChange' | 'disabled'
-> {
-  id: string;
-  value: string;
-  onValueChange: (value: string) => void;
-  showLabel: string;
-  hideLabel: string;
-  disabled?: boolean;
-}
-
-export function OrionplacePasswordInput({
-  id,
-  value,
-  onValueChange,
-  showLabel,
-  hideLabel,
-  disabled = false,
-  className,
-  ...inputProps
-}: OrionplacePasswordInputProps) {
-  const [visible, setVisible] = useState(false);
-  const input                 = useRef<HTMLInputElement>(null);
-
-  useEffect(() => {
-    if (!value && document.activeElement !== input.current) {
-      setVisible(false);
-    }
-  }, [value]);
-
-  function toggle() {
-    const field   = input.current;
-    const focused = Boolean(field) && document.activeElement === field;
-    const start   = field?.selectionStart ?? null;
-    const end     = field?.selectionEnd ?? null;
-
-    flushSync(() => setVisible((current) => !current));
-
-    if (field && focused && start !== null && end !== null) {
-      // Chromium may reset the selection when the changed input type is laid out.
-      field.getBoundingClientRect();
-      field.setSelectionRange(start, end);
-    }
-  }
-
-  return (
-    <div className={styles.root} data-password-input>
-      <input
-        {...inputProps}
-        id={id}
-        ref={input}
-        value={value}
-        onChange={(event) => onValueChange(event.target.value)}
-        type={visible ? 'text' : 'password'}
-        disabled={disabled}
-        className={`${styles.field} ${className ?? ''}`.trim()}
-      />
-      <button
-        type="button"
-        className={styles.toggle}
-        data-password-toggle
-        aria-label={visible ? hideLabel : showLabel}
-        aria-pressed={visible}
-        aria-controls={id}
-        disabled={disabled}
-        onMouseDown={(event) => event.preventDefault()}
-        onClick={toggle}
-      >
-        <svg
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="1.6"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          aria-hidden="true"
-        >
-          {visible ? (
-            <>
-              <path d="M10.6 5.1A10.6 10.6 0 0 1 12 5c6.5 0 10 7 10 7a17.6 17.6 0 0 1-2.2 3.2" />
-              <path d="M6.6 6.6C3.8 8.4 2 12 2 12s3.5 7 10 7a9.8 9.8 0 0 0 5.4-1.6" />
-              <path d="M9.9 9.9a3 3 0 0 0 4.2 4.2" />
-              <path d="m3 3 18 18" />
-            </>
-          ) : (
-            <>
-              <path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z" />
-              <circle cx="12" cy="12" r="3" />
-            </>
-          )}
-        </svg>
-      </button>
-    </div>
-  );
-}

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

@@ -1,97 +0,0 @@
-# OrionplaceSearchSelect
-
-## English
-
-A controlled search field for a long list that the application loads while the
-customer types. It renders a list-autocomplete combobox, loading state, empty
-state and retryable error. The component does not send API requests.
-
-`value` is the confirmed option key and `selectedLabel` is its visible caption.
-`onValueChange(value)` updates the controlled value. `onChange(value)` reports a
-new confirmed choice. Typing calls `onSearch(query)` with trimmed text after
-`debounce` milliseconds. The default delay is 300 milliseconds. The application
-loads matching `{ value, label }` entries into `options` and ignores responses
-for older queries.
-
-Leaving the field restores `selectedLabel`. If a search was sent or is still
-waiting, leaving the field also calls `onSearch('')` so the application can
-restore its initial choices. `pending` displays a spinner and announces
-`loadingLabel`. No matches display `emptyLabel`. `error` displays the supplied
-message and a `retryLabel` button that repeats the current search.
-
-Arrow keys open the choices and move the highlighted result. Enter confirms a
-result after loading finishes. Escape closes the open choices; pressing it again
-while text remains restores the confirmed caption. Tab and focus leaving the
-field close the choices. `required` marks the field visually and for assistive
-technology. `disabled` closes the choices and prevents interaction.
-
-### Props
-
-| Prop                                      | Meaning                                                                                                |
-| ----------------------------------------- | ------------------------------------------------------------------------------------------------------ |
-| `label: string`                           | Visible or accessible name for the component’s main control or region.                                 |
-| `options: OrionplaceSearchSelectOption[]` | Choices available in the control.                                                                      |
-| `loadingLabel: string`                    | Visible or accessible label for loading.                                                               |
-| `emptyLabel: string`                      | Visible or accessible label for empty.                                                                 |
-| `retryLabel: string`                      | Visible or accessible label for retry.                                                                 |
-| `value?: string`                          | Current controlled value.                                                                              |
-| `selectedLabel?: string`                  | Visible or accessible label for selected.                                                              |
-| `placeholder?: string`                    | Hint shown while the text field is empty.                                                              |
-| `pending?: boolean`                       | Shows the loading state and blocks duplicate actions.                                                  |
-| `error?: string`                          | Customer-visible error for the component request; omit it when no request failed.                      |
-| `disabled?: boolean`                      | Disables the component controls and prevents new actions.                                              |
-| `required?: boolean`                      | Marks the control as required for form submission.                                                     |
-| `debounce?: number`                       | Delay used before a typed search value is submitted.                                                   |
-| `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.               |
-| `onSearch?: (query: string) => void`      | Called when the visitor submits search text. The callback payload is shown in its type.                |
-
-## Русский
-
-Управляемое поле поиска по длинному списку, который приложение загружает по
-мере ввода. Компонент показывает поле со списком вариантов, состояние загрузки,
-отсутствие результатов и ошибку с повтором запроса. Сам компонент не отправляет
-API-запросы.
-
-`value` содержит ключ подтверждённого варианта, а `selectedLabel` — его видимую
-подпись. `onValueChange(value)` обновляет управляемое значение.
-`onChange(value)` сообщает о новом подтверждённом выборе. После ввода компонент
-передаёт в `onSearch(query)` текст без пробелов по краям через указанное в
-`debounce` число миллисекунд. По умолчанию задержка равна 300 миллисекундам.
-Приложение загружает найденные элементы `{ value, label }` в `options` и
-игнорирует ответы для более ранних запросов.
-
-При уходе из поля снова показывается `selectedLabel`. Если поиск уже был
-отправлен или ожидает отправки, компонент также вызывает `onSearch('')`, чтобы
-приложение восстановило начальные варианты. `pending` показывает индикатор и
-озвучивает `loadingLabel`. Если совпадений нет, отображается `emptyLabel`.
-`error` показывает переданное сообщение и кнопку `retryLabel`, которая повторяет
-текущий поиск.
-
-Стрелки открывают список и перемещают выделение. Enter подтверждает вариант
-после завершения загрузки. Escape закрывает открытый список; повторное нажатие,
-пока в поле остаётся введённый текст, восстанавливает подтверждённую подпись.
-Tab и уход фокуса закрывают список. `required` отмечает обязательное поле
-визуально и для программ экранного доступа. `disabled` закрывает список и
-блокирует взаимодействие.
-
-### Свойства
-
-| Свойство                                  | Назначение                                                                                              |
-| ----------------------------------------- | ------------------------------------------------------------------------------------------------------- |
-| `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`      | Вызывается, когда покупатель отправляет поисковый текст. Данные обработчика указаны в его типе.         |

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

@@ -1,246 +0,0 @@
-.root {
-  position: relative;
-  display: flex;
-  min-width: 0;
-  max-width: 100%;
-  flex-direction: column;
-  gap: 8px;
-  color: var(--orionplace-text);
-  font-size: 14px;
-  line-height: 24px;
-}
-
-.label {
-  color: var(--orionplace-muted);
-  font-size: 12px;
-  line-height: 16px;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.labelText {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-}
-
-.required,
-.error {
-  color: var(--orionplace-danger);
-}
-
-.field {
-  position: relative;
-  min-width: 0;
-}
-
-.input {
-  box-sizing: border-box;
-  display: block;
-  width: 100%;
-  min-width: 0;
-  min-height: 44px;
-  padding: 8px 40px 8px 12px;
-  border: 1px solid var(--orionplace-border);
-  border-radius: 0;
-  outline: none;
-  background: var(--orionplace-surface);
-  color: inherit;
-  font: inherit;
-  text-align: left;
-  transition: border-color 150ms;
-}
-
-.input::placeholder {
-  color: var(--orionplace-muted);
-}
-
-.input:focus {
-  border-color: var(--orionplace-text);
-}
-
-@media (hover: hover) {
-  .input:hover {
-    border-color: var(--orionplace-text);
-  }
-}
-
-.input:disabled {
-  cursor: default;
-  opacity: 0.6;
-}
-
-.spinner,
-.chevron {
-  position: absolute;
-  top: 50%;
-  right: 12px;
-  box-sizing: border-box;
-  width: 16px;
-  height: 16px;
-  margin-top: -8px;
-  pointer-events: none;
-}
-
-.spinner {
-  border: 2px solid var(--orionplace-border);
-  border-top-color: var(--orionplace-text);
-  border-radius: 50%;
-  animation: spin 700ms linear infinite;
-}
-
-.chevron {
-  color: var(--orionplace-muted);
-  transition: transform 150ms;
-}
-
-.chevronOpen {
-  transform: rotate(180deg);
-}
-
-.menu {
-  position: absolute;
-  z-index: 50;
-  top: 100%;
-  right: 0;
-  left: 0;
-  box-sizing: border-box;
-  max-height: 256px;
-  margin-top: 4px;
-  overflow-y: auto;
-  overscroll-behavior: contain;
-  border: 1px solid var(--orionplace-border);
-  border-radius: 0;
-  background: color-mix(
-    in srgb,
-    var(--orionplace-surface) 90%,
-    transparent
-  );
-  color: var(--orionplace-text);
-  font-size: 14px;
-  line-height: calc(20 / 14);
-  letter-spacing: normal;
-  text-transform: none;
-  backdrop-filter: blur(4px);
-}
-
-.options {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.option {
-  box-sizing: border-box;
-  display: flex;
-  min-width: 0;
-  min-height: 40px;
-  align-items: center;
-  gap: 12px;
-  padding: 8px 12px;
-  cursor: pointer;
-  white-space: nowrap;
-  transition: background-color 100ms;
-}
-
-.highlighted {
-  background: var(--orionplace-hover);
-}
-
-@media (hover: hover) {
-  .option:hover {
-    background: var(--orionplace-hover);
-  }
-}
-
-.optionLabel {
-  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;
-}
-
-.empty {
-  margin: 0;
-  padding: 8px 12px;
-  color: var(--orionplace-muted);
-}
-
-.error {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 12px;
-}
-
-.retry {
-  min-height: 0;
-  padding: 0 0 1px;
-  border: 0;
-  border-bottom: 1px solid currentcolor;
-  outline: none;
-  background: transparent;
-  color: var(--orionplace-text);
-  font-family: inherit;
-  font-size: 12px;
-  line-height: calc(16 / 12);
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  cursor: pointer;
-}
-
-.retry:focus-visible {
-  color: var(--orionplace-muted);
-}
-
-@media (hover: hover) {
-  .retry:hover {
-    color: var(--orionplace-muted);
-  }
-}
-
-.retry:disabled {
-  cursor: default;
-  opacity: 0.6;
-}
-
-.srOnly {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  padding: 0;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  border: 0;
-  white-space: nowrap;
-}
-
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .input,
-  .chevron,
-  .option {
-    transition: none;
-  }
-
-  .spinner {
-    animation: none;
-  }
-}