orionplace-react 0.7.8 → 0.8.0

package/templates/components/orionplace/locale/MainLanguageSwitcher.README.md

@@ -1,46 +0,0 @@
-# MainLanguageSwitcher
-
-## English
-
-Shows the languages available in Application Load with their localized names
-and flags. The selected value shows the language name with its code, for
-example `English · EN`; `codeOnly` displays only the code in the compact
-control. `label` names the selector and `disabled` prevents changes.
-Selecting a language updates the current locale and replaces the selected
-currency, weight unit and length unit with that language's configured defaults
-or available fallbacks. `onChange` receives the selected locale object after
-these selections change, including when the visitor selects the current
-language again. A missing or failed flag leaves the selected language name
-and code visible. Arrow keys, Home, End and typing a name or code move through
-the menu; Enter, Space or Tab confirms the highlighted language.
-
-### Props
-
-| Prop                                                | Meaning                                                                                  |
-| --------------------------------------------------- | ---------------------------------------------------------------------------------------- |
-| `label?: string`                                    | Name of the language selector for its label and screen readers. Defaults to `Language`.  |
-| `disabled?: boolean`                                | Set `true` while language changes are unavailable: the list cannot open.                 |
-| `codeOnly?: boolean`                                | Compact borderless trigger with the flag and uppercase code; the label is visually hidden and the list keeps full names. |
-| `onChange?: (locale: IAppLoadCommonLocale) => void` | Passes the selected locale object after `setLocale`: the current locale, currency, weight unit and length unit have already been replaced using that locale’s settings and available fallbacks. |
-
-## Русский
-
-Показывает языки из Загрузки приложения с локализованными названиями и флагами.
-Выбранное значение показывает название языка с кодом, например
-`Русский · RU`; `codeOnly` оставляет в компактном элементе только код.
-`label` задаёт название выбора, а `disabled` запрещает изменения. При выборе языка
-меняется текущий язык, а выбранные валюта, единица веса и единица длины
-заменяются настроенными для него значениями или доступными вариантами.
-`onChange` получает объект выбранного языка после изменения этих значений,
-включая повторный выбор текущего языка. Если флаг отсутствует или не загрузился,
-название и код языка остаются видимыми. Стрелки, Home, End и ввод названия или
-кода перемещают выделение в списке; Enter, пробел или Tab подтверждают выбор.
-
-### Свойства
-
-| Свойство                                            | Назначение                                                                                       |
-| --------------------------------------------------- | ------------------------------------------------------------------------------------------------ |
-| `label?: string`                                    | Название выбора языка для подписи и программ экранного доступа. По умолчанию `Language`.         |
-| `disabled?: boolean`                                | Передайте `true`, пока смена языка недоступна: список не открывается.                            |
-| `codeOnly?: boolean`                                | Компактная кнопка без рамки с флагом и кодом языка; подпись скрыта визуально, в списке остаются полные названия. |
-| `onChange?: (locale: IAppLoadCommonLocale) => void` | Передаёт объект выбранного языка после `setLocale`: текущие язык, валюта, единицы веса и длины уже заменены настройками этого языка с доступными запасными значениями. |

package/templates/components/orionplace/locale/MainLanguageSwitcher.module.css

@@ -1,196 +0,0 @@
-.root {
-  position: relative;
-  display: inline-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;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-}
-.control {
-  box-sizing: border-box;
-  display: flex;
-  width: 100%;
-  min-width: 0;
-  min-height: 44px;
-  align-items: center;
-  gap: 10px;
-  padding: 8px 12px;
-  border: 1px solid var(--orionplace-border);
-  border-radius: 0;
-  outline: none;
-  background: var(--orionplace-surface);
-  color: inherit;
-  font: inherit;
-  text-align: left;
-  cursor: pointer;
-  transition:
-    border-color 150ms,
-    background-color 150ms;
-}
-.control:focus-visible {
-  border-color: var(--orionplace-text);
-}
-@media (hover: hover) {
-  .control:hover {
-    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;
-}
-.flag {
-  width: 22px;
-  height: 16px;
-  flex-shrink: 0;
-  object-fit: contain;
-}
-.chevron,
-.check {
-  width: 16px;
-  height: 16px;
-  flex-shrink: 0;
-}
-.chevron {
-  color: var(--orionplace-muted);
-}
-.rotated {
-  transform: rotate(180deg);
-}
-.check {
-  color: var(--orionplace-accent);
-}
-.invisible {
-  visibility: hidden;
-}
-.options {
-  position: absolute;
-  z-index: 50;
-  box-sizing: border-box;
-  width: max-content;
-  min-width: 100%;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  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);
-  text-transform: none;
-  letter-spacing: normal;
-  list-style: none;
-  backdrop-filter: blur(4px);
-}
-.above {
-  bottom: 100%;
-  margin-bottom: 4px;
-}
-.below {
-  top: 100%;
-  margin-top: 4px;
-}
-.right {
-  right: 0;
-}
-.left {
-  left: 0;
-}
-.option {
-  box-sizing: border-box;
-  display: flex;
-  min-width: 0;
-  min-height: 40px;
-  flex-wrap: nowrap;
-  align-items: center;
-  gap: 10px;
-  padding: 8px 12px;
-  outline: none;
-  cursor: pointer;
-  transition: background-color 100ms;
-}
-.highlighted {
-  background: color-mix(in srgb, var(--orionplace-hover) 60%, transparent);
-}
-@media (hover: hover) {
-  .option:hover {
-    background: color-mix(in srgb, var(--orionplace-hover) 60%, transparent);
-  }
-}
-.flagSlot {
-  display: flex;
-  width: 22px;
-  height: 16px;
-  flex-shrink: 0;
-  align-items: center;
-  justify-content: center;
-}
-.code {
-  flex-shrink: 0;
-  color: var(--orionplace-muted);
-  font-size: 12px;
-  line-height: 16px;
-  white-space: nowrap;
-}
-.compact {
-  gap: 0;
-  color: inherit;
-}
-.compact .label {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  padding: 0;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
-.compact .control {
-  min-height: 36px;
-  gap: 8px;
-  padding: 4px 8px;
-  border: 0;
-  background: transparent;
-  font-size: 12px;
-  line-height: 16px;
-}
-.compact .control:focus-visible {
-  background: color-mix(in srgb, currentColor 6%, transparent);
-}
-@media (hover: hover) {
-  .compact .control:hover {
-    background: color-mix(in srgb, currentColor 6%, transparent);
-  }
-}
-.compact .chevron {
-  color: inherit;
-  opacity: 0.7;
-}
-@media (prefers-reduced-motion: reduce) {
-  .control,
-  .option {
-    transition: none;
-  }
-}

package/templates/components/orionplace/locale/MainLanguageSwitcher.tsx

@@ -1,387 +0,0 @@
-'use client';
-
-import { useEffect, useId, useMemo, useRef, useState } from 'react';
-import type { KeyboardEvent } from 'react';
-import {
-  useOrionplaceSelections,
-  useOrionplaceSelectionsStore,
-} from '@/providers/OrionplaceProvider';
-import type { IAppLoadCommonLocale } from '@/interfaces/orionplace/appBase/appLoadCommon/IAppLoadCommonLocale';
-import {
-  getAvailableNestedValueFromObject,
-  safePublicUrl,
-} from '@/lib/orionplace/presentation';
-import styles from './MainLanguageSwitcher.module.css';
-
-export interface MainLanguageSwitcherProps {
-  label?: string;
-  disabled?: boolean;
-  codeOnly?: boolean;
-  onChange?: (locale: IAppLoadCommonLocale) => void;
-}
-
-const NAVIGATION = [
-  'ArrowDown',
-  'ArrowUp',
-  'Home',
-  'End',
-  'PageDown',
-  'PageUp',
-];
-
-export function MainLanguageSwitcher({
-  label = 'Language',
-  disabled = false,
-  codeOnly = false,
-  onChange,
-}: MainLanguageSwitcherProps) {
-  const selections                    = useOrionplaceSelections((state) => state);
-  const store                         = useOrionplaceSelectionsStore();
-  const id                            = useId();
-  const root                          = useRef<HTMLDivElement>(null);
-  const trigger                       = useRef<HTMLButtonElement>(null);
-  const listbox                       = useRef<HTMLUListElement>(null);
-  const search                        = useRef('');
-  const lastSearchAt                  = useRef(0);
-  const [open, setOpen]               = useState(false);
-  const [highlighted, setHighlighted] = useState(0);
-  const [failedFlags, setFailedFlags] = useState<ReadonlySet<string>>(
-    new Set(),
-  );
-  const [placement, setPlacement]     = useState({
-    above: false,
-    right: false,
-    width: 320,
-    height: 256,
-  });
-  const options                       = useMemo(() => {
-    const languages = Object.entries(selections.init?.locale ?? {}).flatMap(
-      ([key, locale]) => {
-        const code = locale.code?.trim() || key;
-        const name =
-          getAvailableNestedValueFromObject(
-            locale.locale,
-            selections.localeCode,
-            'name',
-          )?.trim() ||
-          locale.human_name?.trim() ||
-          code.toUpperCase();
-        const flag = safePublicUrl(locale.flag_img);
-        return code ? [{ code, name, flag, locale }] : [];
-      },
-    );
-    return languages.filter(
-      (option, index) =>
-        languages.findIndex((item) => item.code === option.code) === index,
-    );
-  }, [selections.init?.locale, selections.localeCode]);
-  const active                        =
-    options.find((option) => option.code === selections.localeCode) ??
-    options[0];
-  const selectedCode                  = active?.code ?? '';
-  const isDisabled                    = disabled || options.length === 0;
-  let caption                         = '—';
-  if (active) {
-    caption = codeOnly
-      ? active.code.toUpperCase()
-      : `${active.name} · ${active.code.toUpperCase()}`;
-  }
-
-  useEffect(() => {
-    setOpen(false);
-    search.current = '';
-  }, [options, isDisabled]);
-
-  useEffect(() => {
-    function outside(event: PointerEvent) {
-      if (
-        event.target instanceof Node &&
-        !root.current?.contains(event.target)
-      ) {
-        closeMenu();
-      }
-    }
-    document.addEventListener('pointerdown', outside, true);
-    return () => document.removeEventListener('pointerdown', outside, true);
-  }, []);
-
-  useEffect(() => {
-    if (!open) {
-      return;
-    }
-    const menu   = listbox.current;
-    const option = menu?.children.item(highlighted) as HTMLElement | null;
-    if (!menu || !option) {
-      return;
-    }
-    const top    = option.offsetTop;
-    const bottom = top + option.offsetHeight;
-    if (top < menu.scrollTop) {
-      menu.scrollTop = top;
-    } else if (bottom > menu.scrollTop + menu.clientHeight) {
-      menu.scrollTop = bottom - menu.clientHeight;
-    }
-  }, [open, highlighted]);
-
-  function closeMenu() {
-    setOpen(false);
-    search.current = '';
-  }
-
-  function openMenu() {
-    if (isDisabled) {
-      return;
-    }
-    const bounds = trigger.current?.getBoundingClientRect();
-    if (bounds) {
-      const below      = window.innerHeight - bounds.bottom - 8;
-      const above      = bounds.top - 8;
-      const left       = bounds.right - 8;
-      const right      = window.innerWidth - bounds.left - 8;
-      const opensAbove = below < 256 && above > below;
-      setPlacement({
-        above: opensAbove,
-        right: left > right,
-        width: Math.max(bounds.width, left, right),
-        height: Math.max(48, Math.min(256, opensAbove ? above : below)),
-      });
-    }
-    setHighlighted(
-      Math.max(
-        0,
-        options.findIndex((option) => option.code === selectedCode),
-      ),
-    );
-    setOpen(true);
-  }
-
-  function selectLocale(index: number) {
-    const option = options[index];
-    if (!option || isDisabled) {
-      return;
-    }
-    store.getState().setLocale(option.code);
-    onChange?.(option.locale);
-    closeMenu();
-  }
-
-  function moveHighlight(index: number) {
-    setHighlighted(Math.max(0, Math.min(index, options.length - 1)));
-  }
-
-  function findByTyping(character: string, position: number) {
-    const now            = Date.now();
-    search.current       =
-      now - lastSearchAt.current < 700 ? search.current + character : character;
-    lastSearchAt.current = now;
-    const repeated       = [...search.current].every(
-      (letter) => letter === search.current[0],
-    );
-    const query          = repeated ? character : search.current;
-    const start          = repeated ? position + 1 : position;
-    for (let offset = 0; offset < options.length; offset += 1) {
-      const index  = (start + offset) % options.length;
-      const option = options[index];
-      if (
-        [option.name, option.code].some((text) =>
-          text.toLowerCase().startsWith(query),
-        )
-      ) {
-        moveHighlight(index);
-        return;
-      }
-    }
-  }
-
-  function onKeyDown(event: KeyboardEvent<HTMLButtonElement>) {
-    if (isDisabled || event.ctrlKey || event.metaKey) {
-      return;
-    }
-    if (event.key === 'Escape') {
-      event.preventDefault();
-      closeMenu();
-      return;
-    }
-    if (event.key === 'Tab') {
-      if (open) {
-        selectLocale(highlighted);
-      }
-      return;
-    }
-    if (event.key === 'Enter' || event.key === ' ') {
-      event.preventDefault();
-      if (open) {
-        selectLocale(highlighted);
-      } else {
-        openMenu();
-      }
-      return;
-    }
-    const initial  = Math.max(
-      0,
-      options.findIndex((option) => option.code === selectedCode),
-    );
-    const position = open ? highlighted : initial;
-    if (NAVIGATION.includes(event.key)) {
-      event.preventDefault();
-      if (!open) {
-        openMenu();
-      }
-      switch (event.key) {
-        case 'Home':
-          moveHighlight(0);
-          break;
-        case 'End':
-          moveHighlight(options.length - 1);
-          break;
-        case 'ArrowDown':
-          if (open) {
-            moveHighlight(position + 1);
-          }
-          break;
-        case 'ArrowUp':
-          if (open) {
-            moveHighlight(position - 1);
-          }
-          break;
-        case 'PageDown':
-          moveHighlight(position + 10);
-          break;
-        case 'PageUp':
-          moveHighlight(position - 10);
-          break;
-      }
-      return;
-    }
-    if (event.key.length === 1 && !event.altKey) {
-      event.preventDefault();
-      if (!open) {
-        openMenu();
-      }
-      findByTyping(event.key.toLowerCase(), position);
-    }
-  }
-
-  function toggleMenu() {
-    if (open) {
-      closeMenu();
-    } else {
-      openMenu();
-    }
-  }
-
-  function flagImage(flag?: string) {
-    if (!flag || failedFlags.has(flag)) {
-      return null;
-    }
-    return (
-      <img
-        src={flag}
-        alt=""
-        width={22}
-        height={16}
-        className={styles.flag}
-        onError={() =>
-          setFailedFlags((previous) => new Set(previous).add(flag))
-        }
-      />
-    );
-  }
-
-  return (
-    <div
-      ref={root}
-      className={`${styles.root} ${codeOnly ? styles.compact : ''}`}
-    >
-      <label
-        id={`${id}-label`}
-        htmlFor={`${id}-control`}
-        className={styles.label}
-      >
-        {label}
-      </label>
-      <button
-        id={`${id}-control`}
-        ref={trigger}
-        type="button"
-        role="combobox"
-        aria-haspopup="listbox"
-        aria-labelledby={`${id}-label ${id}-value`}
-        aria-expanded={open}
-        aria-controls={`${id}-options`}
-        aria-activedescendant={open ? `${id}-option-${highlighted}` : undefined}
-        disabled={isDisabled}
-        className={styles.control}
-        onClick={toggleMenu}
-        onKeyDown={onKeyDown}
-        onBlur={closeMenu}
-      >
-        {flagImage(active?.flag)}
-        <span
-          id={`${id}-value`}
-          title={active?.name}
-          className={styles.value}
-        >
-          {caption}
-        </span>
-        <svg
-          viewBox="0 0 20 20"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="1.5"
-          aria-hidden="true"
-          className={`${styles.chevron} ${open ? styles.rotated : ''}`}
-        >
-          <path d="m5 7.5 5 5 5-5" />
-        </svg>
-      </button>
-      <ul
-        id={`${id}-options`}
-        ref={listbox}
-        role="listbox"
-        aria-labelledby={`${id}-label`}
-        hidden={!open}
-        style={{ maxHeight: placement.height, maxWidth: placement.width }}
-        className={`${styles.options} ${placement.above ? styles.above : styles.below} ${placement.right ? styles.right : styles.left}`}
-        onMouseDown={(event) => event.preventDefault()}
-      >
-        {options.map((option, index) => (
-          <li
-            id={`${id}-option-${index}`}
-            key={option.code}
-            role="option"
-            data-option-value={option.code}
-            aria-selected={option.code === selectedCode}
-            className={`${styles.option} ${index === highlighted ? styles.highlighted : ''}`}
-            onPointerMove={() => setHighlighted(index)}
-            onClick={() => selectLocale(index)}
-          >
-            <span
-              className={styles.flagSlot}
-              aria-hidden="true"
-            >
-              {flagImage(option.flag)}
-            </span>
-            <span
-              className={styles.value}
-              title={option.name}
-            >
-              {option.name}
-            </span>
-            <span className={styles.code}>{option.code.toUpperCase()}</span>
-            <svg
-              viewBox="0 0 20 20"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="1.5"
-              aria-hidden="true"
-              className={`${styles.check} ${option.code !== selectedCode ? styles.invisible : ''}`}
-            >
-              <path d="m4 10 4 4 8-8" />
-            </svg>
-          </li>
-        ))}
-      </ul>
-    </div>
-  );
-}