@gcsa/console-react 0.1.0

package/src/GcsaMultiSelect.tsx

@@ -0,0 +1,246 @@
+import { useMemo, useRef, type CSSProperties, type MouseEvent } from 'react';
+import { createListCollection } from '@ark-ui/react/collection';
+import { Select } from '@ark-ui/react/select';
+import { Portal } from '@ark-ui/react/portal';
+import type { GcsaPopupPlacement, GcsaSelectOption, GcsaSelectSize } from '@gcsa/console-core';
+import { createGcsaPopupPositioning, formatGcsaLocaleMessage, gcsaControlSizeClass } from '@gcsa/console-core';
+import { GcsaIcon } from './GcsaIcon';
+import { GcsaTag } from './GcsaTag';
+import { useGcsaLocaleMessages } from './hooks/useGcsaLocale';
+import { useGcsaPopupZIndex } from './hooks/useGcsaPopupZIndex';
+import { useGcsaComponentSize } from './hooks/useGcsaComponentSize';
+import { preserveDrawerScrollFrom } from './utils/preserveDrawerScroll';
+
+export type GcsaMultiSelectPlacement = GcsaPopupPlacement;
+
+export type GcsaMultiSelectProps = {
+  value: string[];
+  options: GcsaSelectOption[];
+  placeholder?: string;
+  invalid?: boolean;
+  /** 下拉相对触发器的初始方位 */
+  placement?: GcsaMultiSelectPlacement;
+  listMaxHeight?: number;
+  listHintThreshold?: number;
+  groupOrder?: string[];
+  /** 触发器内最多展示的 tag 数，超出显示 +N */
+  maxTagCount?: number;
+  /** 是否挂载到 body；嵌套浮层应设为 false */
+  portalled?: boolean;
+  /** 下拉面板是否与触发器同宽 */
+  sameWidth?: boolean;
+  size?: GcsaSelectSize;
+  className?: string;
+  onValueChange?: (value: string[]) => void;
+};
+
+function MultiSelectContent({
+  collection,
+  contentStyle,
+  showListHint,
+  listHintText,
+  empty,
+  emptyText
+}: {
+  collection: ReturnType<typeof createListCollection<GcsaSelectOption>>;
+  contentStyle: CSSProperties;
+  showListHint: boolean;
+  listHintText: string;
+  empty: boolean;
+  emptyText: string;
+}) {
+  return (
+    <Select.Content className="gcsa-select-content gcsa-ui-surface" style={contentStyle}>
+      {empty ? (
+        <div className="gcsa-select-empty" role="status">
+          <span className="gcsa-select-empty__text">{emptyText}</span>
+        </div>
+      ) : (
+        <>
+          <Select.List className="gcsa-select-list">
+            {collection.group().map(([groupLabel, groupItems]) => (
+              <Select.ItemGroup key={groupLabel || 'default'} className="gcsa-select-group">
+                {groupLabel ? (
+                  <Select.ItemGroupLabel className="gcsa-select-group__label">
+                    {groupLabel}
+                  </Select.ItemGroupLabel>
+                ) : null}
+                {groupItems.map(opt => (
+                  <Select.Item key={opt.value} item={opt} className="gcsa-select-item">
+                    <Select.ItemText className="gcsa-select-item__text">{opt.label}</Select.ItemText>
+                    <Select.ItemIndicator className="gcsa-select-item__check">
+                      <GcsaIcon name="check" size="sm" className="gcsa-select-item__check-icon" />
+                    </Select.ItemIndicator>
+                  </Select.Item>
+                ))}
+              </Select.ItemGroup>
+            ))}
+          </Select.List>
+          {showListHint ? <div className="gcsa-select-hint">{listHintText}</div> : null}
+        </>
+      )}
+    </Select.Content>
+  );
+}
+
+export function GcsaMultiSelect({
+  value,
+  options,
+  placeholder,
+  invalid,
+  placement = 'bottom-start',
+  listMaxHeight = 280,
+  listHintThreshold = 16,
+  groupOrder,
+  maxTagCount = 2,
+  portalled = true,
+  sameWidth = true,
+  size,
+  className,
+  onValueChange
+}: GcsaMultiSelectProps) {
+  const controlRef = useRef<HTMLDivElement>(null);
+  const resolvedSize = useGcsaComponentSize(size);
+  const messages = useGcsaLocaleMessages();
+  const { zIndex, onOpenChange } = useGcsaPopupZIndex();
+  const hasGroups = options.some(item => item.group);
+  const selectedValues = value ?? [];
+
+  const collection = useMemo(
+    () =>
+      createListCollection({
+        items: options,
+        itemToValue: item => item.value,
+        itemToString: item => item.label,
+        isItemDisabled: item => item.disabled ?? false,
+        ...(hasGroups
+          ? {
+              groupBy: (item: GcsaSelectOption) => item.group ?? '',
+              groupSort: groupOrder ?? ('asc' as const)
+            }
+          : {})
+      }),
+    [options, hasGroups, groupOrder]
+  );
+
+  const selectedOptions = useMemo(
+    () =>
+      selectedValues.map(
+        item => options.find(opt => opt.value === item) || { label: item, value: item }
+      ),
+    [selectedValues, options]
+  );
+
+  const visibleTags = selectedOptions.slice(0, maxTagCount);
+  const hiddenCount = Math.max(0, selectedOptions.length - visibleTags.length);
+  const showListHint = options.length >= listHintThreshold;
+  const listHintText = formatGcsaLocaleMessage(messages.selectListHint, { count: options.length });
+  const emptyText = messages.emptyDefault;
+  const isEmpty = options.length === 0;
+  const contentStyle = {
+    '--gcsa-select-list-max-height': `${listMaxHeight}px`,
+    ...(zIndex == null ? {} : { zIndex })
+  } as CSSProperties;
+  const positionerStyle = zIndex == null ? undefined : ({ zIndex } as CSSProperties);
+  const positioning = useMemo(
+    () => createGcsaPopupPositioning({ placement, sameWidth, gutter: 4 }),
+    [placement, sameWidth]
+  );
+
+  const removeTag = (optionValue: string, event: MouseEvent) => {
+    event.preventDefault();
+    event.stopPropagation();
+    onValueChange?.(selectedValues.filter(item => item !== optionValue));
+  };
+
+  const triggerClassName = [
+    'gcsa-select-trigger',
+    'gcsa-multi-select__trigger',
+    'gcsa-focus-ring',
+    gcsaControlSizeClass('gcsa-select-trigger', resolvedSize),
+    className
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  return (
+    <Select.Root
+      collection={collection}
+      value={selectedValues}
+      multiple
+      closeOnSelect={false}
+      positioning={positioning}
+      lazyMount
+      unmountOnExit
+      onOpenChange={details => {
+        onOpenChange(details.open);
+        preserveDrawerScrollFrom(controlRef.current);
+      }}
+      onValueChange={details => onValueChange?.(details.value)}
+    >
+      <Select.Control ref={controlRef} className="gcsa-select-control gcsa-multi-select">
+        <Select.Trigger className={triggerClassName} data-invalid={invalid || undefined}>
+          <span className="gcsa-multi-select__value">
+            {selectedOptions.length === 0 ? (
+              <span className="gcsa-multi-select__placeholder">{placeholder}</span>
+            ) : (
+              <>
+                {visibleTags.map(option => (
+                  <GcsaTag key={option.value} tone="primary" className="gcsa-multi-select__tag">
+                    <span className="gcsa-multi-select__tag-label">{option.label}</span>
+                    <button
+                      type="button"
+                      className="gcsa-multi-select__tag-remove"
+                      aria-label="remove"
+                      onPointerDown={event => {
+                        event.preventDefault();
+                        event.stopPropagation();
+                      }}
+                      onClick={event => removeTag(option.value, event)}
+                    >
+                      <GcsaIcon name="close" size="sm" />
+                    </button>
+                  </GcsaTag>
+                ))}
+                {hiddenCount > 0 ? (
+                  <GcsaTag tone="primary" className="gcsa-multi-select__tag gcsa-multi-select__tag--rest">
+                    +{hiddenCount}
+                  </GcsaTag>
+                ) : null}
+              </>
+            )}
+          </span>
+          <Select.Indicator className="gcsa-select-indicator" aria-hidden="true">
+            <GcsaIcon name="chevronDown" className="gcsa-select-indicator__icon" />
+          </Select.Indicator>
+        </Select.Trigger>
+      </Select.Control>
+      {portalled ? (
+        <Portal>
+          <Select.Positioner style={positionerStyle}>
+            <MultiSelectContent
+              collection={collection}
+              contentStyle={contentStyle}
+              showListHint={showListHint}
+              listHintText={listHintText}
+              empty={isEmpty}
+              emptyText={emptyText}
+            />
+          </Select.Positioner>
+        </Portal>
+      ) : (
+        <Select.Positioner style={positionerStyle}>
+          <MultiSelectContent
+            collection={collection}
+            contentStyle={contentStyle}
+            showListHint={showListHint}
+            listHintText={listHintText}
+            empty={isEmpty}
+            emptyText={emptyText}
+          />
+        </Select.Positioner>
+      )}
+      <Select.HiddenSelect />
+    </Select.Root>
+  );
+}

package/src/GcsaPagination.tsx

@@ -0,0 +1,194 @@
+import { useMemo } from 'react';
+import {
+  formatGcsaLocaleMessage,
+  getGcsaPaginationAlignClass,
+  getGcsaPaginationItems,
+  resolveGcsaPaginationLayout,
+  type GcsaPaginationAlign,
+  type GcsaPaginationLayoutPart
+} from '@gcsa/console-core';
+import { useGcsaLocaleMessages } from './hooks/useGcsaLocale';
+import { GcsaSelect } from './GcsaSelect';
+import { GcsaInputNumber } from './GcsaInputNumber';
+
+export type GcsaPaginationProps = {
+  page: number;
+  total: number;
+  pageSize?: number;
+  pageSizeOptions?: number[];
+  showPageSize?: boolean;
+  showJumper?: boolean;
+  pageSizeLabel?: string;
+  jumperLabel?: string;
+  layout?: string | GcsaPaginationLayoutPart[];
+  align?: GcsaPaginationAlign;
+  onPageSizeChange?: (pageSize: number) => void;
+  className?: string;
+  onPageChange?: (page: number) => void;
+};
+
+export function GcsaPagination({
+  page,
+  total,
+  pageSize = 10,
+  pageSizeOptions = [10, 20, 50, 100],
+  showPageSize = false,
+  showJumper = false,
+  pageSizeLabel,
+  jumperLabel,
+  layout,
+  align = 'right',
+  onPageSizeChange,
+  className,
+  onPageChange
+}: GcsaPaginationProps) {
+  const messages = useGcsaLocaleMessages();
+  const resolvedPageSizeLabel = pageSizeLabel ?? messages.paginationPageSize;
+  const resolvedJumperLabel = jumperLabel ?? messages.paginationJumper;
+  const totalPages = Math.max(1, Math.ceil(total / pageSize));
+  const pages = getGcsaPaginationItems(page, totalPages);
+
+  const layoutParts = useMemo(
+    () =>
+      resolveGcsaPaginationLayout({
+        layout,
+        showPageSize,
+        showJumper
+      }),
+    [layout, showJumper, showPageSize]
+  );
+
+  const pageSizeSelectOptions = useMemo(
+    () =>
+      pageSizeOptions.map(size => ({
+        value: String(size),
+        label: `${size} / 页`
+      })),
+    [pageSizeOptions]
+  );
+
+  const totalText = formatGcsaLocaleMessage(messages.dataTableTotal, { count: total });
+
+  const setPage = (next: number) => {
+    const clamped = Math.min(Math.max(1, next), totalPages);
+    onPageChange?.(clamped);
+  };
+
+  const setPageSize = (next: number) => {
+    if (!pageSizeOptions.includes(next) || next === pageSize) return;
+    onPageSizeChange?.(next);
+    onPageChange?.(1);
+  };
+
+  const rootClassName = [
+    'gcsa-pagination',
+    getGcsaPaginationAlignClass(align),
+    className
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  return (
+    <div className={rootClassName} role="navigation" aria-label={messages.paginationLabel}>
+      {layoutParts.map((part, index) => {
+        if (part === 'total') {
+          return (
+            <div key={`${part}-${index}`} className="gcsa-pagination__total">
+              {totalText}
+            </div>
+          );
+        }
+
+        if (part === 'sizes') {
+          return (
+            <div key={`${part}-${index}`} className="gcsa-pagination__size">
+              <span>{resolvedPageSizeLabel}</span>
+              <div className="gcsa-pagination__size-select">
+                <GcsaSelect
+                  value={String(pageSize)}
+                  options={pageSizeSelectOptions}
+                  aria-label={messages.paginationPageSizeAria}
+                  onValueChange={value => setPageSize(Number(value))}
+                />
+              </div>
+            </div>
+          );
+        }
+
+        if (part === 'prev') {
+          return (
+            <button
+              key={`${part}-${index}`}
+              type="button"
+              className="gcsa-pagination__btn gcsa-pagination__btn--nav gcsa-focus-ring"
+              disabled={page <= 1}
+              onClick={() => setPage(page - 1)}
+            >
+              {messages.paginationPrev}
+            </button>
+          );
+        }
+
+        if (part === 'pager') {
+          return (
+            <div key={`${part}-${index}`} className="gcsa-pagination__pager">
+              {pages.map(item =>
+                typeof item === 'number' ? (
+                  <button
+                    key={item}
+                    type="button"
+                    className={`gcsa-pagination__btn gcsa-focus-ring${item === page ? ' gcsa-pagination__btn--active' : ''}`}
+                    onClick={() => setPage(item)}
+                  >
+                    {item}
+                  </button>
+                ) : (
+                  <span key={item} className="gcsa-pagination__ellipsis" aria-hidden="true">
+                    …
+                  </span>
+                )
+              )}
+            </div>
+          );
+        }
+
+        if (part === 'next') {
+          return (
+            <button
+              key={`${part}-${index}`}
+              type="button"
+              className="gcsa-pagination__btn gcsa-pagination__btn--nav gcsa-focus-ring"
+              disabled={page >= totalPages}
+              onClick={() => setPage(page + 1)}
+            >
+              {messages.paginationNext}
+            </button>
+          );
+        }
+
+        if (part === 'jumper') {
+          return (
+            <div key={`${part}-${index}`} className="gcsa-pagination__jumper">
+              <span>{resolvedJumperLabel}</span>
+              <GcsaInputNumber
+                className="gcsa-pagination__jumper-input"
+                value={page}
+                min={1}
+                max={totalPages}
+                precision={0}
+                controls="none"
+                onValueChange={value => {
+                  if (value != null && !Number.isNaN(value)) {
+                    setPage(value);
+                  }
+                }}
+              />
+            </div>
+          );
+        }
+
+        return null;
+      })}
+    </div>
+  );
+}

package/src/GcsaPopconfirm.tsx

@@ -0,0 +1,104 @@
+import type { CSSProperties, ReactNode } from 'react';
+import { useState } from 'react';
+import { Popover } from '@ark-ui/react/popover';
+import { Portal } from '@ark-ui/react/portal';
+import { createGcsaPopupPositioning } from '@gcsa/console-core';
+import { GcsaButton } from './GcsaButton';
+import { useGcsaLocaleMessages } from './hooks/useGcsaLocale';
+import { useGcsaPopupZIndex } from './hooks/useGcsaPopupZIndex';
+import type { GcsaTooltipPlacement } from './GcsaTooltip';
+
+export type GcsaPopconfirmPlacement = GcsaTooltipPlacement;
+
+export type GcsaPopconfirmProps = {
+  title?: string;
+  description?: string;
+  okText?: string;
+  cancelText?: string;
+  triggerLabel?: string;
+  placement?: GcsaPopconfirmPlacement;
+  arrow?: boolean;
+  portalled?: boolean;
+  gutter?: number;
+  trigger?: ReactNode;
+  onConfirm?: () => void;
+  onCancel?: () => void;
+};
+
+export function GcsaPopconfirm({
+  title,
+  description,
+  okText,
+  cancelText,
+  triggerLabel,
+  placement = 'top',
+  arrow = true,
+  portalled = true,
+  gutter = 8,
+  trigger,
+  onConfirm,
+  onCancel
+}: GcsaPopconfirmProps) {
+  const messages = useGcsaLocaleMessages();
+  const resolvedTitle = title ?? messages.confirmAction;
+  const resolvedOkText = okText ?? messages.confirm;
+  const resolvedCancelText = cancelText ?? messages.cancel;
+  const resolvedTriggerLabel = triggerLabel ?? messages.delete;
+
+  const [open, setOpen] = useState(false);
+  const { zIndex, onOpenChange: onPopupOpenChange } = useGcsaPopupZIndex();
+  const positionerStyle = (zIndex == null ? undefined : { zIndex }) as CSSProperties | undefined;
+  const contentStyle = (zIndex == null ? undefined : { zIndex }) as CSSProperties | undefined;
+
+  const triggerNode = trigger ?? (
+    <GcsaButton variant="danger">
+      {resolvedTriggerLabel}
+    </GcsaButton>
+  );
+
+  return (
+    <Popover.Root
+      open={open}
+      onOpenChange={details => {
+        onPopupOpenChange(details.open);
+        setOpen(details.open);
+      }}
+      positioning={createGcsaPopupPositioning({ placement, gutter })}
+    >
+      <Popover.Trigger asChild>{triggerNode}</Popover.Trigger>
+      <Portal disabled={!portalled}>
+        <Popover.Positioner style={positionerStyle}>
+          <Popover.Content className="gcsa-popconfirm gcsa-ui-surface" style={contentStyle}>
+            {resolvedTitle ? <div className="gcsa-popconfirm__title">{resolvedTitle}</div> : null}
+            {description ? <div className="gcsa-popconfirm__desc">{description}</div> : null}
+            <div className="gcsa-popconfirm__actions">
+              <GcsaButton
+                variant="ghost"
+                onClick={() => {
+                  setOpen(false);
+                  onCancel?.();
+                }}
+              >
+                {resolvedCancelText}
+              </GcsaButton>
+              <GcsaButton
+                variant="danger"
+                onClick={() => {
+                  setOpen(false);
+                  onConfirm?.();
+                }}
+              >
+                {resolvedOkText}
+              </GcsaButton>
+            </div>
+            {arrow ? (
+              <Popover.Arrow className="gcsa-popconfirm__arrow">
+                <Popover.ArrowTip className="gcsa-popconfirm__arrow-tip" />
+              </Popover.Arrow>
+            ) : null}
+          </Popover.Content>
+        </Popover.Positioner>
+      </Portal>
+    </Popover.Root>
+  );
+}

package/src/GcsaPopover.tsx

@@ -0,0 +1,131 @@
+import { useMemo, useState, type CSSProperties, type ReactNode } from 'react';
+import { Popover } from '@ark-ui/react/popover';
+import { Portal } from '@ark-ui/react/portal';
+import { createGcsaPopupPositioning, toCssLength } from '@gcsa/console-core';
+import { GcsaButton } from './GcsaButton';
+import { useGcsaLocaleMessages } from './hooks/useGcsaLocale';
+import { useGcsaPopupZIndex } from './hooks/useGcsaPopupZIndex';
+import type { GcsaTooltipPlacement } from './GcsaTooltip';
+
+export type GcsaPopoverPlacement = GcsaTooltipPlacement;
+
+/** default=320px 上限；lg=表单类 Popover（560–680px，内容区可滚动） */
+export type GcsaPopoverSize = 'default' | 'lg';
+
+export type GcsaPopoverProps = {
+  title?: string;
+  triggerLabel?: string;
+  placement?: GcsaPopoverPlacement;
+  arrow?: boolean;
+  portalled?: boolean;
+  gutter?: number;
+  /** 受控开关；不传则为非受控 */
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /** 预设尺寸；与 minWidth / maxWidth / width 可同时使用，inline 优先生效 */
+  size?: GcsaPopoverSize;
+  /** 面板宽度，如 560 或 '560px' */
+  width?: string | number;
+  minWidth?: string | number;
+  maxWidth?: string | number;
+  /** 追加到 Popover.Content 的 class */
+  contentClassName?: string;
+  className?: string;
+  /** 固定在面板底部、不参与 body 滚动的操作区 */
+  footer?: ReactNode;
+  trigger?: ReactNode;
+  children?: ReactNode;
+};
+
+export function GcsaPopover({
+  title,
+  triggerLabel,
+  placement = 'bottom',
+  arrow = true,
+  portalled = true,
+  gutter = 8,
+  open,
+  onOpenChange,
+  size = 'default',
+  width,
+  minWidth,
+  maxWidth,
+  contentClassName,
+  className,
+  footer,
+  trigger,
+  children
+}: GcsaPopoverProps) {
+  const messages = useGcsaLocaleMessages();
+  const { zIndex, onOpenChange: onPopupOpenChange } = useGcsaPopupZIndex();
+  const resolvedTriggerLabel = triggerLabel ?? messages.open;
+  const isControlled = open !== undefined;
+  const [internalOpen, setInternalOpen] = useState(false);
+  const resolvedOpen = isControlled ? open : internalOpen;
+
+  const triggerNode = trigger ?? (
+    <GcsaButton variant="secondary">
+      {resolvedTriggerLabel}
+    </GcsaButton>
+  );
+
+  const positionerStyle = (zIndex == null ? undefined : { zIndex }) as CSSProperties | undefined;
+
+  const contentStyle = useMemo(() => {
+    const style: CSSProperties = {};
+    if (zIndex != null) style.zIndex = zIndex;
+    const resolvedWidth = toCssLength(width);
+    const resolvedMinWidth = toCssLength(minWidth);
+    const resolvedMaxWidth = toCssLength(maxWidth);
+    if (resolvedWidth) style.width = resolvedWidth;
+    if (resolvedMinWidth) style.minWidth = resolvedMinWidth;
+    if (resolvedMaxWidth) style.maxWidth = resolvedMaxWidth;
+    return Object.keys(style).length ? style : undefined;
+  }, [zIndex, width, minWidth, maxWidth]);
+
+  const contentClassNames = [
+    'gcsa-popover',
+    'gcsa-ui-surface',
+    size === 'lg' ? 'gcsa-popover--lg' : undefined,
+    footer ? 'gcsa-popover--with-footer' : undefined,
+    contentClassName
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  const handleOpenChange = (nextOpen: boolean) => {
+    if (!isControlled) {
+      setInternalOpen(nextOpen);
+    }
+    onOpenChange?.(nextOpen);
+    onPopupOpenChange(nextOpen);
+  };
+
+  return (
+    <span className={className}>
+      <Popover.Root
+        open={resolvedOpen}
+        lazyMount
+        unmountOnExit
+        positioning={createGcsaPopupPositioning({ placement, gutter })}
+        onOpenChange={details => handleOpenChange(details.open)}
+      >
+        <Popover.Trigger asChild>{triggerNode}</Popover.Trigger>
+        <Portal disabled={!portalled}>
+          <Popover.Positioner style={positionerStyle}>
+            <Popover.Content className={contentClassNames} style={contentStyle}>
+              {title ? <Popover.Title className="gcsa-popover__title">{title}</Popover.Title> : null}
+              <div className="gcsa-popover__body">{children}</div>
+              {footer ? <div className="gcsa-popover__footer">{footer}</div> : null}
+              {arrow ? (
+                <Popover.Arrow className="gcsa-popover__arrow">
+                  <Popover.ArrowTip className="gcsa-popover__arrow-tip" />
+                </Popover.Arrow>
+              ) : null}
+            </Popover.Content>
+          </Popover.Positioner>
+        </Portal>
+      </Popover.Root>
+    </span>
+  );
+}

package/src/GcsaPopoverClose.tsx

@@ -0,0 +1,11 @@
+import { Popover } from '@ark-ui/react/popover';
+import type { ReactElement } from 'react';
+
+export type GcsaPopoverCloseProps = {
+  children: ReactElement;
+};
+
+/** 须作为 GcsaPopover 子树使用；触发 Ark Popover CLOSE 并与受控 open 同步 */
+export function GcsaPopoverClose({ children }: GcsaPopoverCloseProps) {
+  return <Popover.CloseTrigger asChild>{children}</Popover.CloseTrigger>;
+}