@pgcorp/ui-kit 0.10.0 → 0.10.2

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

@@ -1,467 +0,0 @@
-<template>
-  <div v-bind="ownedAttrs.bindings()" ref="groupRef" class="s-sidebar-group">
-    <slot />
-  </div>
-</template>
-
-<script setup lang="ts">
-import {
-  computed,
-  onBeforeUnmount,
-  onMounted,
-  provide,
-  ref,
-  shallowRef,
-  watch,
-} from 'vue';
-
-import { useOwnedAttrs } from '../../../internal/ownedAttrs';
-import { hasOwn, lastItem } from '../../../internal/es2020';
-import {
-  sidebarGroupContextKey,
-  type RegisteredSidebarSection,
-  type SidebarSectionRegistration,
-  type SidebarSectionStyle,
-} from '../_internal/sidebarGroupContext';
-import {
-  assertSidebarSectionsState,
-  createSidebarSectionsTransition,
-  sidebarSectionsStateEqual,
-  type SectionState,
-  type SidebarSectionReplacement,
-  type SidebarSectionsState,
-} from './sidebar';
-
-defineOptions({ inheritAttrs: false });
-
-const props = defineProps<{
-  sectionsState: SidebarSectionsState;
-}>();
-
-interface Emits {
-  'update-sections': [state: SidebarSectionsState];
-  'toggle-section': [key: string];
-}
-
-const emit = defineEmits<Emits>();
-
-const ownedAttrs = useOwnedAttrs({ component: 'SSidebarGroup', owner: 'sidebar group root' });
-const groupRef = ref<HTMLDivElement | null>(null);
-const registrations = shallowRef<readonly SidebarSectionRegistration[]>([]);
-const effectiveSizes = new Map<string, number>();
-let resizeObserver: ResizeObserver | null = null;
-let mounted = false;
-const geometryRevision = ref(0);
-let activeResizePair: Readonly<{ topKey: string; bottomKey: string }> | null = null;
-
-assertSidebarSectionsState(props.sectionsState);
-
-function currentState(): SidebarSectionsState {
-  assertSidebarSectionsState(props.sectionsState);
-  return props.sectionsState;
-}
-
-function measuredHeight(element: HTMLElement, coordinate: string): number {
-  const height = element.offsetHeight;
-  if (!Number.isFinite(height) || height < 0) {
-    throw new RangeError(`SSidebarGroup: ${coordinate}.offsetHeight must be a non-negative finite number`);
-  }
-  return height;
-}
-
-function measuredContainerHeight(): number {
-  const element = groupRef.value;
-  if (!element) throw new Error('SSidebarGroup: mounted group element is unavailable');
-  const height = element.clientHeight;
-  if (!Number.isFinite(height) || height < 0) {
-    throw new RangeError('SSidebarGroup: group clientHeight must be a non-negative finite number');
-  }
-  return height;
-}
-
-function compareRegistrations(
-  left: SidebarSectionRegistration,
-  right: SidebarSectionRegistration,
-): number {
-  const position = left.element.compareDocumentPosition(right.element);
-  if (position & Node.DOCUMENT_POSITION_DISCONNECTED) {
-    throw new Error(
-      `SSidebarGroup: registered sections '${left.key}' and '${right.key}' are not in one DOM tree`,
-    );
-  }
-  if (position & Node.DOCUMENT_POSITION_FOLLOWING) return -1;
-  if (position & Node.DOCUMENT_POSITION_PRECEDING) return 1;
-  throw new Error(`SSidebarGroup: registered sections '${left.key}' and '${right.key}' have ambiguous DOM order`);
-}
-
-const orderedSections = computed<readonly RegisteredSidebarSection[]>(() => {
-  const state = currentState();
-  return [...registrations.value]
-    .sort(compareRegistrations)
-    .map((registration) => {
-      const section = state[registration.key];
-      if (!section) {
-        throw new Error(
-          `SSidebarGroup: registered section '${registration.key}' has no controlled state`,
-        );
-      }
-      return {
-        key: registration.key,
-        element: registration.element,
-        state: section,
-      };
-    });
-});
-
-function registeredSection(key: string): RegisteredSidebarSection {
-  const section = orderedSections.value.find((candidate) => candidate.key === key);
-  if (!section) {
-    throw new Error(`SSidebarGroup: mounted geometry is unavailable for section '${key}'`);
-  }
-  return section;
-}
-
-function emitTransition(replacements: readonly SidebarSectionReplacement[]): void {
-  const state = currentState();
-  const next = createSidebarSectionsTransition(state, replacements);
-  if (!sidebarSectionsStateEqual(next, state)) emit('update-sections', next);
-}
-
-function scheduleGeometryReconciliation(): void {
-  const revision = ++geometryRevision.value;
-  queueMicrotask(() => {
-    if (!mounted || revision !== geometryRevision.value || activeResizePair !== null) return;
-    reconcileContainerGeometry();
-  });
-}
-
-function fitOpenSectionSizes(
-  openSections: readonly RegisteredSidebarSection[],
-  availableSize: number,
-): ReadonlyMap<string, number> {
-  const minimumTotal = openSections.reduce((sum, section) => sum + section.state.minSize, 0);
-  const targetSize = Math.max(minimumTotal, availableSize);
-  const flexible = openSections.find((section) => section.state.size === null);
-  const sizes = new Map<string, number>();
-
-  for (const section of openSections) {
-    const remembered = effectiveSizes.get(section.key);
-    const preferred = remembered ?? section.state.size ?? section.state.minSize;
-    sizes.set(section.key, Math.max(section.state.minSize, preferred));
-  }
-
-  let delta = targetSize - [...sizes.values()].reduce((sum, size) => sum + size, 0);
-  if (delta > 0) {
-    const growTarget = flexible ?? lastItem(openSections);
-    if (growTarget) sizes.set(growTarget.key, sizes.get(growTarget.key)! + delta);
-    delta = 0;
-  }
-
-  if (delta < 0) {
-    const flexibleIndex = flexible
-      ? openSections.findIndex((section) => section.key === flexible.key)
-      : openSections.length - 1;
-    const shrinkOrder = openSections
-      .map((section, index) => ({ section, distance: Math.abs(index - flexibleIndex) }))
-      .sort((left, right) => left.distance - right.distance);
-    let overflow = -delta;
-    for (const { section } of shrinkOrder) {
-      if (overflow <= 0) break;
-      const size = sizes.get(section.key)!;
-      const reduction = Math.min(size - section.state.minSize, overflow);
-      sizes.set(section.key, size - reduction);
-      overflow -= reduction;
-    }
-  }
-
-  return sizes;
-}
-
-function reconcileContainerGeometry(): void {
-  const containerHeight = measuredContainerHeight();
-  if (containerHeight === 0) return;
-  const sections = orderedSections.value;
-  const openSections = sections.filter((section) => section.state.isOpen);
-  if (openSections.length === 0) return;
-  const closedHeight = sections
-    .filter((section) => !section.state.isOpen)
-    .reduce((sum, section) => (
-      sum + measuredHeight(section.element, `sections.${section.key}`)
-    ), 0);
-  const nextSizes = fitOpenSectionSizes(openSections, containerHeight - closedHeight);
-  let changed = false;
-  for (const section of openSections) {
-    const nextSize = nextSizes.get(section.key)!;
-    if (effectiveSizes.get(section.key) !== nextSize) changed = true;
-    effectiveSizes.set(section.key, nextSize);
-  }
-  if (changed) geometryRevision.value += 1;
-}
-
-function registerSection(registration: SidebarSectionRegistration): () => void {
-  if (typeof registration.key !== 'string' || registration.key.trim().length === 0) {
-    throw new TypeError('SSidebarGroup: registered section key must be non-empty');
-  }
-  if (!(registration.element instanceof HTMLElement)) {
-    throw new TypeError('SSidebarGroup: registered section element must be an HTMLElement');
-  }
-  if (!hasOwn(currentState(), registration.key)) {
-    throw new Error(`SSidebarGroup: registered section '${registration.key}' has no controlled state`);
-  }
-  if (registrations.value.some((current) => current.key === registration.key)) {
-    throw new Error(`SSidebarGroup: duplicate registered section key '${registration.key}'`);
-  }
-  if (registrations.value.some((current) => current.element === registration.element)) {
-    throw new Error('SSidebarGroup: one section element cannot be registered under multiple keys');
-  }
-  const storedRegistration = Object.freeze({ ...registration });
-  registrations.value = Object.freeze([...registrations.value, storedRegistration]);
-  scheduleGeometryReconciliation();
-  let active = true;
-  return () => {
-    if (!active) return;
-    active = false;
-    registrations.value = Object.freeze(
-      registrations.value.filter((current) => current !== storedRegistration),
-    );
-    scheduleGeometryReconciliation();
-  };
-}
-
-function nearestOpenSection(
-  source: RegisteredSidebarSection,
-  candidates: readonly RegisteredSidebarSection[],
-): RegisteredSidebarSection {
-  const sections = orderedSections.value;
-  const sourceIndex = sections.findIndex((section) => section.key === source.key);
-  const ordered = [...candidates].sort((left, right) => {
-    const leftDistance = Math.abs(sections.findIndex((section) => section.key === left.key) - sourceIndex);
-    const rightDistance = Math.abs(sections.findIndex((section) => section.key === right.key) - sourceIndex);
-    return leftDistance - rightDistance;
-  });
-  const target = ordered[0];
-  if (!target) throw new Error(`SSidebarGroup: no open neighbor exists for section '${source.key}'`);
-  return target;
-}
-
-function toggleSection(key: string): void {
-  const state = currentState();
-  const current = state[key];
-  if (!current) throw new Error(`SSidebarGroup: cannot toggle unknown section '${key}'`);
-  const openSections = Object.entries(state)
-    .filter(([, section]) => section.isOpen)
-    .map(([sectionKey]) => sectionKey);
-
-  if (current.isOpen) {
-    if (current.size === null && openSections.length > 1) {
-      const source = registeredSection(key);
-      const neighbors = orderedSections.value.filter(
-        (section) => section.key !== key && section.state.isOpen,
-      );
-      const nextFlexible = nearestOpenSection(source, neighbors);
-      emitTransition([
-        {
-          key,
-          state: {
-            ...current,
-            size: Math.max(current.minSize, measuredHeight(source.element, `sections.${key}`)),
-          },
-        },
-        { key: nextFlexible.key, state: { ...nextFlexible.state, size: null } },
-      ]);
-    }
-    emit('toggle-section', key);
-    return;
-  }
-
-  if (openSections.length === 0) {
-    if (current.size !== null) emitTransition([{ key, state: { ...current, size: null } }]);
-    emit('toggle-section', key);
-    return;
-  }
-
-  const source = registeredSection(key);
-  let nextSize = current.size ?? current.minSize;
-  const containerHeight = measuredContainerHeight();
-  if (containerHeight > 0) {
-    const occupiedMinimum = orderedSections.value.reduce((sum, section) => {
-      if (section.key === key) return sum;
-      if (section.state.isOpen) return sum + section.state.minSize;
-      return sum + measuredHeight(section.element, `sections.${section.key}`);
-    }, 0);
-    nextSize = Math.min(nextSize, Math.max(current.minSize, containerHeight - occupiedMinimum));
-  }
-  void source;
-  if (current.size !== nextSize) {
-    emitTransition([{ key, state: { ...current, size: nextSize } }]);
-  }
-  emit('toggle-section', key);
-}
-
-function getSectionStyle(key: string): SidebarSectionStyle {
-  void geometryRevision.value;
-  const state = currentState()[key];
-  if (!state) throw new Error(`SSidebarGroup: cannot style unknown section '${key}'`);
-  if (!state.isOpen) {
-    return Object.freeze({ flexGrow: 0, flexShrink: 0, flexBasis: 'auto', overflow: 'hidden' });
-  }
-  const effectiveSize = effectiveSizes.get(key) ?? state.size ?? state.minSize;
-  return Object.freeze({
-    flexGrow: 0,
-    flexShrink: 0,
-    flexBasis: `${effectiveSize}px`,
-    minHeight: 'var(--s-sidebar-collapsed-section-height)',
-  });
-}
-
-function getSectionSize(key: string): number {
-  void geometryRevision.value;
-  const section = registeredSection(key);
-  if (!section.state.isOpen) return measuredHeight(section.element, `sections.${key}`);
-  return effectiveSizes.get(key) ?? section.state.size ?? section.state.minSize;
-}
-
-function resizePair(
-  topKey: string,
-  bottomKey: string,
-): readonly [RegisteredSidebarSection, RegisteredSidebarSection] {
-  const sections = orderedSections.value;
-  const topIndex = sections.findIndex((section) => section.key === topKey);
-  if (topIndex < 0) throw new Error(`SSidebarGroup: unknown resize top section '${topKey}'`);
-  const bottomIndex = sections.findIndex((section) => section.key === bottomKey);
-  if (bottomIndex < 0) throw new Error(`SSidebarGroup: unknown resize bottom section '${bottomKey}'`);
-  const top = sections[topIndex]!;
-  const bottom = sections[bottomIndex]!;
-  if (!top.state.isOpen || !bottom.state.isOpen) {
-    throw new Error('SSidebarGroup: both resize sections must be open');
-  }
-  const nextOpen = sections.find((section, index) => index > topIndex && section.state.isOpen);
-  if (!nextOpen || nextOpen.key !== bottomKey || bottomIndex <= topIndex) {
-    throw new Error(
-      `SSidebarGroup: '${topKey}' and '${bottomKey}' must be consecutive open sections`,
-    );
-  }
-  return [top, bottom];
-}
-
-function beginResize(topKey: string, bottomKey: string): void {
-  resizePair(topKey, bottomKey);
-  if (activeResizePair !== null) {
-    throw new Error(
-      `SSidebarGroup: resize '${activeResizePair.topKey}'/'${activeResizePair.bottomKey}' is already active`,
-    );
-  }
-  activeResizePair = Object.freeze({ topKey, bottomKey });
-  geometryRevision.value += 1;
-}
-
-function resizeSections(topKey: string, bottomKey: string, requestedTopSize: number): void {
-  if (!Number.isFinite(requestedTopSize)) {
-    throw new RangeError('SSidebarGroup: requestedTopSize must be a finite number');
-  }
-  if (
-    activeResizePair !== null
-    && (activeResizePair.topKey !== topKey || activeResizePair.bottomKey !== bottomKey)
-  ) {
-    throw new Error('SSidebarGroup: resize update does not match the active section pair');
-  }
-  resizePair(topKey, bottomKey);
-  const openSections = orderedSections.value.filter((section) => section.state.isOpen);
-  const topOpenIndex = openSections.findIndex((section) => section.key === topKey);
-  const upper = openSections.slice(0, topOpenIndex + 1);
-  const lower = openSections.slice(topOpenIndex + 1);
-  const currentUpperSize = upper.reduce(
-    (sum, section) => sum + (effectiveSizes.get(section.key) ?? measuredHeight(section.element, `sections.${section.key}`)),
-    0,
-  );
-  const delta = requestedTopSize - currentUpperSize;
-  const shrinking = delta > 0 ? [...lower] : [...upper].reverse();
-  const growing = delta > 0 ? lastItem(upper) : lower[0];
-  let transferable = Math.abs(delta);
-  transferable = Math.min(
-    transferable,
-    shrinking.reduce((sum, section) => {
-      const size = effectiveSizes.get(section.key) ?? measuredHeight(section.element, `sections.${section.key}`);
-      return sum + Math.max(0, size - section.state.minSize);
-    }, 0),
-  );
-  if (transferable === 0 || !growing) return;
-
-  let remaining = transferable;
-  for (const section of shrinking) {
-    if (remaining <= 0) break;
-    const size = effectiveSizes.get(section.key) ?? measuredHeight(section.element, `sections.${section.key}`);
-    const reduction = Math.min(size - section.state.minSize, remaining);
-    effectiveSizes.set(section.key, size - reduction);
-    remaining -= reduction;
-  }
-  const growSize = effectiveSizes.get(growing.key)
-    ?? measuredHeight(growing.element, `sections.${growing.key}`);
-  effectiveSizes.set(growing.key, growSize + transferable);
-  geometryRevision.value += 1;
-
-  const replacements = openSections
-    .filter((section) => section.state.size !== null)
-    .map((section) => ({
-      key: section.key,
-      state: {
-        ...section.state,
-        size: effectiveSizes.get(section.key)!,
-      } satisfies SectionState,
-    }));
-  if (replacements.length > 0) emitTransition(replacements);
-}
-
-function finishResize(topKey: string, bottomKey: string): void {
-  if (activeResizePair === null) {
-    throw new Error('SSidebarGroup: cannot finish a resize that is not active');
-  }
-  if (activeResizePair.topKey !== topKey || activeResizePair.bottomKey !== bottomKey) {
-    throw new Error('SSidebarGroup: resize end does not match the active section pair');
-  }
-  activeResizePair = null;
-  scheduleGeometryReconciliation();
-}
-
-provide(sidebarGroupContextKey, {
-  sectionsState: computed(currentState),
-  orderedSections,
-  geometryRevision,
-  registerSection,
-  toggleSection,
-  getSectionStyle,
-  getSectionSize,
-  beginResize,
-  resizeSections,
-  finishResize,
-});
-
-watch(
-  () => props.sectionsState,
-  () => {
-    currentState();
-    scheduleGeometryReconciliation();
-  },
-  { deep: true, flush: 'post' },
-);
-
-onMounted(() => {
-  mounted = true;
-  const element = groupRef.value;
-  if (!element) throw new Error('SSidebarGroup: group element is unavailable during mount');
-  resizeObserver = new ResizeObserver(scheduleGeometryReconciliation);
-  resizeObserver.observe(element);
-  scheduleGeometryReconciliation();
-});
-
-onBeforeUnmount(() => {
-  mounted = false;
-  geometryRevision.value += 1;
-  activeResizePair = null;
-  resizeObserver?.disconnect();
-  resizeObserver = null;
-  registrations.value = Object.freeze([]);
-});
-</script>
-
-<style lang="postcss" src="./SSidebarGroup.css" scoped></style>