@pgcorp/ui-kit 0.10.0 → 0.10.2

package/src/components/shared/containers/SPopover.vue

@@ -1,556 +0,0 @@
-<template>
-  <div
-    v-bind="rootAttrs.bindings()"
-    class="s-popover-wrapper"
-  >
-    <div class="s-popover relative block w-full">
-      <slot
-        v-if="$slots.trigger"
-        name="trigger"
-        :bindTrigger="bindTrigger"
-        :open="openPopover"
-        :close="closeExplicitly"
-        :isOpen="isOpen"
-      />
-      <SButton
-        v-else
-        v-bind="builtInTriggerBinding"
-        data-s-popover-trigger=""
-        :label="triggerLabel"
-        :leading-icon="triggerLeadingIcon"
-        :trailing-icon="triggerTrailingIcon"
-        :icon-only="triggerIconOnly"
-        :appearance="triggerAppearance"
-        :size="triggerSize"
-        :width="triggerWidth"
-        :content-align="triggerContentAlign"
-        :shape="triggerShape"
-        :severity="triggerSeverity"
-        :badge="triggerBadge"
-        :disabled="disabled"
-        :title="triggerTitle"
-        :aria-label="resolvedTriggerAriaLabel"
-        :data-testid="triggerTestId"
-      >
-        <slot :isOpen="isOpen" />
-      </SButton>
-
-      <transition
-        enter-active-class="transition duration-[var(--s-motion-standard)] ease-out"
-        enter-from-class="translate-y-1 opacity-0"
-        enter-to-class="translate-y-0 opacity-100"
-        leave-active-class="pointer-events-none transition duration-[var(--s-motion-fast)] ease-in"
-        leave-from-class="translate-y-0 opacity-100"
-        leave-to-class="translate-y-1 opacity-0"
-        @enter="focusEnteredPanel"
-      >
-        <Teleport to="body">
-          <div
-            v-if="isOpen"
-            ref="panelRef"
-            class="s-popover-panel"
-            :style="floatingStyle"
-            :data-placement="resolvedPlacement"
-            :data-surface="surface"
-            :data-width="width"
-            tabindex="-1"
-            role="dialog"
-            :id="panelId"
-            :aria-label="resolvedAriaLabel"
-            @keydown.tab="handlePanelTab"
-            @focusout="handlePanelFocusout"
-          >
-            <div class="s-popover-content">
-              <slot name="panel" :close="closeExplicitly" />
-            </div>
-          </div>
-        </Teleport>
-      </transition>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import {
-  computed,
-  ref,
-  onMounted,
-  onUpdated,
-  onBeforeUnmount,
-  nextTick,
-  useId,
-  useSlots,
-  watch,
-  type Component,
-} from 'vue';
-import SButton, {
-  type SButtonAppearance,
-  type SButtonContentAlign,
-  type SButtonSeverity,
-  type SButtonShape,
-  type SButtonSize,
-  type SButtonWidth,
-} from '../controls/SButton.vue';
-import { useFloatingPosition, type FloatingPlacement } from '../../../composables/useFloatingPosition';
-import { useUiKitLocale } from '../../../composables/useUiKitLocale';
-import { findRelativeTabTarget, getFocusableElements } from '../../../internal/focusNavigation';
-import { lastItem } from '../../../internal/es2020';
-import { resolveInteractiveElement } from '../../../internal/interactiveElement';
-import { registerLayer, type LayerRegistration } from '../../../internal/layerStack';
-import { useOwnedAttrs } from '../../../internal/ownedAttrs';
-import { useInteractiveLeafRegistration } from '../../../internal/passiveContentContract';
-import type {
-  SPopoverDefaultSlotProps,
-  SPopoverPanelSlotProps,
-  SPopoverPublicApi,
-  SPopoverTriggerActivation,
-  SPopoverTriggerBinding,
-  SPopoverTriggerRefTarget,
-  SPopoverTriggerSlotProps,
-} from './popover';
-
-export interface Props {
-  align?: 'left' | 'right' | 'center';
-  surface?: 'default' | 'transparent';
-  width?: 'trigger' | 'content' | 'sm' | 'md' | 'lg';
-  ariaLabel?: string;
-  triggerAppearance?: SButtonAppearance;
-  triggerSize?: SButtonSize;
-  triggerWidth?: SButtonWidth;
-  triggerContentAlign?: SButtonContentAlign;
-  triggerShape?: SButtonShape;
-  triggerLabel?: string;
-  triggerLeadingIcon?: Component;
-  triggerTrailingIcon?: Component;
-  triggerIconOnly?: boolean;
-  triggerSeverity?: SButtonSeverity;
-  triggerBadge?: string | number;
-  triggerTitle?: string;
-  triggerAriaLabel?: string;
-  triggerTestId?: string;
-  disabled?: boolean;
-  /**
-   * Управляемая видимость; без prop owner хранит toggle-state сам.
-   * Controlled visibility; omit to use the owner's internal toggle state.
-   */
-  open?: boolean;
-}
-
-defineOptions({ inheritAttrs: false });
-
-const props = withDefaults(defineProps<Props>(), {
-  align: 'right',
-  surface: 'default',
-  width: 'trigger',
-  ariaLabel: undefined,
-  triggerAppearance: 'ghost',
-  triggerSize: 'md',
-  triggerWidth: 'full',
-  triggerContentAlign: 'center',
-  triggerShape: 'default',
-  triggerLabel: undefined,
-  triggerLeadingIcon: undefined,
-  triggerTrailingIcon: undefined,
-  triggerIconOnly: false,
-  triggerSeverity: 'secondary',
-  triggerBadge: undefined,
-  triggerTitle: undefined,
-  triggerAriaLabel: undefined,
-  triggerTestId: undefined,
-  disabled: false,
-  open: undefined,
-});
-const { t } = useUiKitLocale();
-const resolvedAriaLabel = computed(() => props.ariaLabel ?? t('dialog.moreActions'));
-const emit = defineEmits<{
-  (e: 'update:open', value: boolean): void;
-}>();
-defineSlots<{
-  trigger?: (props: SPopoverTriggerSlotProps) => unknown;
-  default?: (props: SPopoverDefaultSlotProps) => unknown;
-  panel: (props: SPopoverPanelSlotProps) => unknown;
-}>();
-
-type CloseReason = 'explicit' | 'escape' | 'outside' | 'tab' | 'trigger';
-
-const BUILT_IN_TRIGGER_ID = 'built-in';
-const slots = useSlots();
-const rootAttrs = useOwnedAttrs({ component: 'SPopover', owner: 'root wrapper' });
-if (slots.trigger && slots.default) {
-  throw new Error(
-    'SPopover: default slot is reserved for built-in SButton content and cannot be combined with #trigger; move popover content to #panel',
-  );
-}
-if (!slots.panel) {
-  throw new Error('SPopover: #panel slot is required');
-}
-
-const controlledMode = props.open !== undefined;
-const uncontrolledOpen = ref(false);
-const isOpen = computed(() => props.open ?? uncontrolledOpen.value);
-useInteractiveLeafRegistration({ owner: 'SPopover', active: () => isOpen.value });
-const panelId = `s-popover-panel-${useId()}`;
-const activeTriggerId = ref<string | null>(null);
-const layerZIndex = ref('var(--s-layer-root-floating)');
-const resolvedTriggerAriaLabel = computed(() =>
-  props.triggerAriaLabel ?? (
-    props.triggerIconOnly || (!props.triggerLabel && !slots.default)
-      ? resolvedAriaLabel.value
-      : undefined
-  ),
-);
-let layerRegistration: LayerRegistration | null = null;
-let pendingCloseReason: CloseReason | null = null;
-const placement = computed<FloatingPlacement>(() => {
-  if (props.align === 'left') return 'bottom-start';
-  if (props.align === 'center') return 'bottom-center';
-  return 'bottom-end';
-});
-const {
-  anchorRef: triggerRef,
-  panelRef,
-  floatingStyle,
-  resolvedPlacement,
-  updatePosition,
-} = useFloatingPosition({
-  active: isOpen,
-  placement: () => placement.value,
-  offset: () => 6,
-  boundaryPadding: () => 8,
-  flip: () => true,
-  shift: () => true,
-  constrainMainAxis: () => true,
-  widthMatch: () => props.width === 'trigger' ? 'min' : 'none',
-  zIndex: () => layerZIndex.value,
-  scrollStrategy: 'reposition',
-});
-
-class TriggerRecord {
-  target: SPopoverTriggerRefTarget = null;
-  readonly binding: SPopoverTriggerBinding;
-
-  constructor(
-    readonly id: string,
-    readonly activation: SPopoverTriggerActivation,
-  ) {
-    this.binding = {
-      ref: (target) => assignTriggerElement(this, target),
-      get ['aria-expanded']() {
-        return isOpen.value && activeTriggerId.value === id;
-      },
-      get disclosure(): SPopoverTriggerBinding['disclosure'] {
-        return {
-          expanded: isOpen.value && activeTriggerId.value === id,
-          controls: panelId,
-          iconPlacement: 'none',
-        };
-      },
-      'aria-haspopup': 'dialog',
-      'aria-controls': panelId,
-      onClick: (event) => activateBoundTrigger(this, event),
-    };
-  }
-
-  element(): HTMLElement | null {
-    return resolveTriggerElement(this.target, this.id);
-  }
-}
-
-const triggerRecords = new Map<string, TriggerRecord>();
-
-function requireTriggerId(triggerId: string): void {
-  if (triggerId.length === 0 || triggerId.trim() !== triggerId) {
-    throw new Error('SPopover: trigger id must be a non-empty string without surrounding whitespace');
-  }
-}
-
-function resolveTriggerElement(target: SPopoverTriggerRefTarget, triggerId: string): HTMLElement | null {
-  return resolveInteractiveElement(`SPopover: trigger "${triggerId}"`, target);
-}
-
-function assignTriggerElement(record: TriggerRecord, target: SPopoverTriggerRefTarget): void {
-  if (target === null) {
-    record.target = null;
-    return;
-  }
-  if (record.target && record.target !== target) {
-    throw new Error(`SPopover: trigger id "${record.id}" is bound to multiple elements`);
-  }
-  for (const existing of triggerRecords.values()) {
-    if (existing !== record && existing.target === target) {
-      throw new Error(
-        `SPopover: one trigger element cannot use both "${existing.id}" and "${record.id}" ids`,
-      );
-    }
-  }
-  record.target = target;
-}
-
-function bindTrigger(
-  triggerId: string,
-  activation: SPopoverTriggerActivation = 'toggle',
-): SPopoverTriggerBinding {
-  requireTriggerId(triggerId);
-  const existing = triggerRecords.get(triggerId);
-  if (existing) {
-    if (existing.activation !== activation) {
-      throw new Error(
-        `SPopover: trigger "${triggerId}" activation cannot change from "${existing.activation}" to "${activation}"`,
-      );
-    }
-    return existing.binding;
-  }
-  const record = new TriggerRecord(triggerId, activation);
-  triggerRecords.set(triggerId, record);
-  return record.binding;
-}
-
-const builtInTriggerBinding = slots.trigger
-  ? undefined
-  : bindTrigger(BUILT_IN_TRIGGER_ID);
-
-function completeBindingError(triggerId: string): Error {
-  return new Error(
-    `SPopover: custom trigger "${triggerId}" must apply the complete object returned by bindTrigger()`,
-  );
-}
-
-function assertTriggerBinding(record: TriggerRecord): HTMLElement {
-  const element = record.element();
-  if (!element) {
-    throw completeBindingError(record.id);
-  }
-  if (slots.trigger && !(element instanceof HTMLButtonElement)) {
-    throw new Error(
-      `SPopover: custom trigger "${record.id}" must bind directly to a button element, not to a wrapper`,
-    );
-  }
-  if (
-    element.getAttribute('aria-haspopup') !== 'dialog'
-    || element.getAttribute('aria-controls') !== panelId
-    || element.getAttribute('aria-expanded') !== String(isOpen.value && activeTriggerId.value === record.id)
-  ) {
-    throw completeBindingError(record.id);
-  }
-  return element;
-}
-
-function validateMountedTriggerContract(): void {
-  if (triggerRecords.size === 0) {
-    throw new Error('SPopover: #trigger must apply a binding returned by bindTrigger()');
-  }
-  for (const record of triggerRecords.values()) {
-    assertTriggerBinding(record);
-  }
-}
-
-function registeredTriggerIds(): string[] {
-  return [...triggerRecords.values()]
-    .filter((record) => record.element()?.isConnected)
-    .map((record) => record.id)
-    .sort((left, right) => left.localeCompare(right));
-}
-
-function resolveOpenTrigger(triggerId?: string): TriggerRecord {
-  if (triggerId !== undefined) {
-    requireTriggerId(triggerId);
-    const record = triggerRecords.get(triggerId);
-    if (!record?.element()?.isConnected) {
-      throw new Error(`SPopover: programmatic open requires a registered trigger with id "${triggerId}"`);
-    }
-    assertTriggerBinding(record);
-    return record;
-  }
-
-  const ids = registeredTriggerIds();
-  if (ids.length === 0) {
-    throw new Error('SPopover: programmatic open requires one registered trigger anchor');
-  }
-  if (ids.length > 1) {
-    throw new Error(
-      `SPopover: programmatic open is ambiguous; pass one of the registered trigger ids: ${ids.map((id) => `"${id}"`).join(', ')}`,
-    );
-  }
-  const [onlyId] = ids;
-  if (!onlyId) {
-    throw new Error('SPopover: registered trigger inventory is unexpectedly empty');
-  }
-  const record = triggerRecords.get(onlyId);
-  if (!record) {
-    throw new Error('SPopover: registered trigger invariant failed');
-  }
-  assertTriggerBinding(record);
-  return record;
-}
-
-function selectAnchor(record: TriggerRecord): HTMLElement {
-  const element = assertTriggerBinding(record);
-  activeTriggerId.value = record.id;
-  triggerRef.value = element;
-  return element;
-}
-
-function registerOpenLayer(restoreTarget: HTMLElement): void {
-  layerRegistration?.unregister({ restoreFocus: false });
-  layerRegistration = registerLayer({
-    kind: 'popover',
-    root: () => panelRef.value,
-    anchor: () => triggerRef.value,
-    branches: () => [...triggerRecords.values()]
-      .map((record) => record.element())
-      .filter((element): element is HTMLElement => Boolean(element?.isConnected)),
-    restoreTarget,
-    requestDismiss: (reason) => closePopover(reason === 'escape' ? 'escape' : 'outside'),
-  });
-  layerZIndex.value = layerRegistration.zIndex;
-}
-
-function resolveCurrentOpenTrigger(): TriggerRecord {
-  if (activeTriggerId.value !== null) {
-    const activeRecord = triggerRecords.get(activeTriggerId.value);
-    if (activeRecord?.element()?.isConnected) return activeRecord;
-  }
-  return resolveOpenTrigger();
-}
-
-function activateOpenState(record: TriggerRecord = resolveCurrentOpenTrigger()): void {
-  const anchor = selectAnchor(record);
-  registerOpenLayer(anchor);
-  nextTick(updatePosition);
-}
-
-function focusEnteredPanel(element: Element): void {
-  if (!(element instanceof HTMLElement)) {
-    throw new Error('SPopover: transition enter target must be an HTMLElement');
-  }
-  if (isOpen.value) element.focus();
-}
-
-function deactivateOpenState(reason: CloseReason): void {
-  const shouldRestoreFocus = reason === 'explicit' || reason === 'escape' || reason === 'trigger';
-  layerRegistration?.unregister({ restoreFocus: shouldRestoreFocus });
-  layerRegistration = null;
-  layerZIndex.value = 'var(--s-layer-root-floating)';
-}
-
-function assertControlMode(): void {
-  if ((props.open !== undefined) !== controlledMode) {
-    throw new Error('SPopover: open control mode cannot change after mount');
-  }
-}
-
-function activateBoundTrigger(record: TriggerRecord, _event: MouseEvent): void {
-  if (record.activation === 'manual') {
-    selectAnchor(record);
-    if (isOpen.value) {
-      nextTick(updatePosition);
-    }
-    return;
-  }
-  if (isOpen.value && activeTriggerId.value === record.id) {
-    closePopover('trigger');
-    return;
-  }
-  if (isOpen.value) {
-    const anchor = selectAnchor(record);
-    registerOpenLayer(anchor);
-    nextTick(updatePosition);
-    return;
-  }
-  openPopover(record.id);
-}
-
-function openPopover(triggerId?: string): void {
-  if (!isOpen.value && !props.disabled) {
-    const record = resolveOpenTrigger(triggerId);
-    selectAnchor(record);
-    emit('update:open', true);
-    if (controlledMode) return;
-    activateOpenState(record);
-    uncontrolledOpen.value = true;
-    return;
-  }
-  if (isOpen.value && triggerId !== undefined && triggerId !== activeTriggerId.value) {
-    const record = resolveOpenTrigger(triggerId);
-    const anchor = selectAnchor(record);
-    registerOpenLayer(anchor);
-    nextTick(updatePosition);
-  }
-}
-function closePopover(reason: CloseReason = 'explicit'): void {
-  const wasOpen = isOpen.value;
-  if (wasOpen) {
-    pendingCloseReason = reason;
-    emit('update:open', false);
-    if (controlledMode) return;
-    uncontrolledOpen.value = false;
-    deactivateOpenState(reason);
-    pendingCloseReason = null;
-  }
-}
-
-function closeExplicitly(): void {
-  closePopover('explicit');
-}
-
-function handlePanelTab(event: KeyboardEvent): void {
-  const panel = panelRef.value;
-  const anchor = triggerRef.value;
-  if (!panel || !anchor) return;
-  const focusable = getFocusableElements(panel);
-  const active = document.activeElement;
-  const first = focusable[0];
-  const last = lastItem(focusable);
-  const leavesPanel = focusable.length === 0
-    || (event.shiftKey ? active === panel || active === first : active === last);
-  if (!leavesPanel) return;
-  const scope = layerRegistration?.focusScope() ?? document;
-  const target = findRelativeTabTarget(anchor, scope, panel, event.shiftKey);
-  event.preventDefault();
-  closePopover('tab');
-  if (target) void nextTick(() => target.focus());
-}
-
-function handlePanelFocusout(event: FocusEvent): void {
-  if (!isOpen.value) return;
-  const nextTarget = event.relatedTarget;
-  if (nextTarget instanceof Node) {
-    if (panelRef.value?.contains(nextTarget)) return;
-    const isTrigger = [...triggerRecords.values()].some((record) => record.element()?.contains(nextTarget));
-    if (isTrigger) return;
-  }
-  closePopover('outside');
-}
-
-onMounted(() => {
-  validateMountedTriggerContract();
-  if (isOpen.value) activateOpenState();
-});
-onUpdated(() => {
-  assertControlMode();
-});
-watch(
-  () => props.open,
-  (open) => {
-    assertControlMode();
-    if (open) {
-      activateOpenState();
-      return;
-    }
-    deactivateOpenState(pendingCloseReason ?? 'explicit');
-    pendingCloseReason = null;
-  },
-  { flush: 'post' },
-);
-onBeforeUnmount(() => {
-  layerRegistration?.unregister({ restoreFocus: false });
-  layerRegistration = null;
-});
-
-defineExpose<SPopoverPublicApi>({
-  open: openPopover,
-  close: closeExplicitly,
-});
-</script>
-
-<style lang="postcss" src="./SPopover.css" scoped></style>