@gcsa/console-react 0.1.2 → 0.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gcsa/console-react",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "GCSA console UI — React components (Ark UI + TanStack + GCSA styles)",
   "type": "module",
   "license": "UNLICENSED",
@@ -34,8 +34,8 @@
     "@tanstack/react-form": "^1.12.2",
     "@tanstack/react-table": "^8.21.3",
     "zod": "^3.24.4",
-    "@gcsa/console-styles": "0.1.2",
-    "@gcsa/console-core": "0.1.2"
+    "@gcsa/console-core": "0.1.4",
+    "@gcsa/console-styles": "0.1.4"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",

package/src/GcsaCascader.tsx

@@ -76,6 +76,7 @@ export function GcsaCascader({
       arrow={false}
       portalled={portalled}
       gutter={6}
+      fitViewport
       className="gcsa-cascader-popover"
       trigger={
         <button

package/src/GcsaConfigProvider.tsx

@@ -38,6 +38,7 @@ export function GcsaConfigProvider({
   const restoreDocumentTheme = useContext(GcsaRestoreDocumentThemeContext);
   const [toasts, setToasts] = useState<Array<{ id: number; message: string; type: GcsaMessageType }>>([]);
   const [toastZIndex, setToastZIndex] = useState<number>(() => readToastZIndex());
+  const [portalMounted, setPortalMounted] = useState(false);
   const idRef = useRef(0);
   const MAX_TOASTS = 4;
 
@@ -77,6 +78,10 @@ export function GcsaConfigProvider({
     refreshToastZIndex();
   }, []);
 
+  useEffect(() => {
+    setPortalMounted(true);
+  }, []);
+
   useEffect(() => {
     if (!shouldSyncDocument) return;
     return () => {
@@ -99,7 +104,7 @@ export function GcsaConfigProvider({
                 <div className="gcsa-console-root" data-gcsa-theme={theme}>
                   {children}
                 </div>
-                {typeof document !== 'undefined'
+                {portalMounted
                   ? createPortal(
                       <div
                         className="gcsa-portal-scope gcsa-toast-portal"

package/src/GcsaPopover.tsx

@@ -22,6 +22,8 @@ export type GcsaPopoverProps = {
   /** 受控开关；不传则为非受控 */
   open?: boolean;
   onOpenChange?: (open: boolean) => void;
+  /** 启用 size middleware，写入 --reference-width */
+  fitViewport?: boolean;
   /** 预设尺寸；与 minWidth / maxWidth / width 可同时使用，inline 优先生效 */
   size?: GcsaPopoverSize;
   /** 面板宽度，如 560 或 '560px' */
@@ -46,6 +48,7 @@ export function GcsaPopover({
   gutter = 8,
   open,
   onOpenChange,
+  fitViewport = false,
   size = 'default',
   width,
   minWidth,
@@ -107,7 +110,7 @@ export function GcsaPopover({
         open={resolvedOpen}
         lazyMount
         unmountOnExit
-        positioning={createGcsaPopupPositioning({ placement, gutter })}
+        positioning={createGcsaPopupPositioning({ placement, gutter, fitViewport })}
         onOpenChange={details => handleOpenChange(details.open)}
       >
         <Popover.Trigger asChild>{triggerNode}</Popover.Trigger>

package/src/GcsaSelect.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useRef, type CSSProperties } from 'react';
+import { useMemo, useRef, useState, type CSSProperties } from 'react';
 import { createListCollection } from '@ark-ui/react/collection';
 import { Select } from '@ark-ui/react/select';
 import { Portal } from '@ark-ui/react/portal';
@@ -94,6 +94,7 @@ export function GcsaSelect({
   onValueChange
 }: GcsaSelectProps) {
   const controlRef = useRef<HTMLDivElement>(null);
+  const [triggerWidth, setTriggerWidth] = useState<number | undefined>();
   const resolvedSize = useGcsaComponentSize(size);
   const messages = useGcsaLocaleMessages();
   const { zIndex, onOpenChange } = useGcsaPopupZIndex();
@@ -116,6 +117,13 @@ export function GcsaSelect({
     [options, hasGroups, groupOrder]
   );
 
+  const syncTriggerWidth = () => {
+    const width = controlRef.current?.getBoundingClientRect().width;
+    if (width) {
+      setTriggerWidth(Math.round(width));
+    }
+  };
+
   const selectedValue = value == null ? [] : [value];
   const showListHint = options.length >= listHintThreshold;
   const listHintText = formatGcsaLocaleMessage(messages.selectListHint, { count: options.length });
@@ -123,7 +131,14 @@ export function GcsaSelect({
   const isEmpty = options.length === 0;
   const contentStyle = {
     '--gcsa-select-list-max-height': `${listMaxHeight}px`,
-    ...(zIndex == null ? {} : { zIndex })
+    ...(zIndex == null ? {} : { zIndex }),
+    ...(sameWidth && triggerWidth != null
+      ? {
+          width: triggerWidth,
+          minWidth: triggerWidth,
+          '--reference-width': `${triggerWidth}px`
+        }
+      : {})
   } as CSSProperties;
   const positionerStyle = zIndex == null ? undefined : ({ zIndex } as CSSProperties);
   const positioning = useMemo(
@@ -139,6 +154,9 @@ export function GcsaSelect({
       lazyMount
       unmountOnExit
       onOpenChange={details => {
+        if (details.open && sameWidth) {
+          syncTriggerWidth();
+        }
         onOpenChange(details.open);
         preserveDrawerScrollFrom(controlRef.current);
       }}

package/src/GcsaTransfer.tsx

@@ -1,5 +1,6 @@
-import { useMemo, useState } from 'react';
+import { useMemo, useState, type KeyboardEvent } from 'react';
 import type { GcsaTransferOption } from '@gcsa/console-core';
+import { GcsaCheckbox } from './GcsaCheckbox';
 import { GcsaInput } from './GcsaInput';
 import { useGcsaLocaleMessages } from './hooks/useGcsaLocale';
 
@@ -29,6 +30,7 @@ export function GcsaTransfer({
   const [targetSelected, setTargetSelected] = useState<string[]>([]);
   const [sourceQuery, setSourceQuery] = useState('');
   const [targetQuery, setTargetQuery] = useState('');
+
   const availableItems = useMemo(
     () =>
       options.filter(
@@ -38,6 +40,7 @@ export function GcsaTransfer({
       ),
     [options, sourceQuery, value]
   );
+
   const targetItems = useMemo(
     () =>
       options.filter(
@@ -47,18 +50,28 @@ export function GcsaTransfer({
       ),
     [options, targetQuery, value]
   );
+
   const update = (next: string[]) => {
     onValueChange?.(next);
     onChange?.(next);
     setSourceSelected([]);
     setTargetSelected([]);
   };
-  const toggle = (key: string, side: 'source' | 'target') => {
+
+  const setSelected = (key: string, side: 'source' | 'target', checked: boolean) => {
+    const setter = side === 'source' ? setSourceSelected : setTargetSelected;
+    setter(current => {
+      if (checked) return current.includes(key) ? current : [...current, key];
+      return current.filter(item => item !== key);
+    });
+  };
+
+  const onItemActivate = (item: GcsaTransferOption, side: 'source' | 'target') => {
+    if (disabled || item.disabled) return;
     const current = side === 'source' ? sourceSelected : targetSelected;
-    const next = current.includes(key) ? current.filter(item => item !== key) : [...current, key];
-    if (side === 'source') setSourceSelected(next);
-    else setTargetSelected(next);
+    setSelected(item.value, side, !current.includes(item.value));
   };
+
   const panel = (items: GcsaTransferOption[], title: string, side: 'source' | 'target') => (
     <section className="gcsa-transfer__panel" aria-label={title}>
       <header className="gcsa-transfer__header">
@@ -77,21 +90,35 @@ export function GcsaTransfer({
         {items.length ? (
           items.map(item => {
             const selected = (side === 'source' ? sourceSelected : targetSelected).includes(item.value);
+            const itemDisabled = disabled || Boolean(item.disabled);
+            const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+              if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault();
+                onItemActivate(item, side);
+              }
+            };
+            const onRowClick = () => onItemActivate(item, side);
             return (
-              <button
+              <div
                 key={item.value}
-                type="button"
                 className={`gcsa-transfer__item gcsa-focus-ring${selected ? ' gcsa-transfer__item--selected' : ''}`}
-                disabled={disabled || item.disabled}
                 role="option"
+                tabIndex={itemDisabled ? -1 : 0}
                 aria-selected={selected}
-                onClick={() => toggle(item.value, side)}
+                aria-disabled={itemDisabled || undefined}
+                onClick={onRowClick}
+                onKeyDown={onKeyDown}
               >
-                <span className="gcsa-transfer__check" aria-hidden="true">
-                  {selected ? '✓' : ''}
+                <span className="gcsa-transfer__check-wrap" onClick={event => event.stopPropagation()}>
+                  <GcsaCheckbox
+                    checked={selected}
+                    disabled={itemDisabled}
+                    ariaLabel={item.label}
+                    onCheckedChange={checked => setSelected(item.value, side, checked)}
+                  />
                 </span>
-                <span>{item.label}</span>
-              </button>
+                <span className="gcsa-transfer__label">{item.label}</span>
+              </div>
             );
           })
         ) : (
@@ -100,6 +127,7 @@ export function GcsaTransfer({
       </div>
     </section>
   );
+
   return (
     <div className={`gcsa-transfer${disabled ? ' gcsa-transfer--disabled' : ''}`}>
       {panel(availableItems, resolvedSourceTitle, 'source')}

package/src/GcsaUpload.tsx

@@ -152,7 +152,7 @@ export function GcsaUpload({
         onDrop={onDrop}
       >
         <span className="gcsa-upload__icon" aria-hidden="true">
-          <GcsaIcon name="plus" />
+          <GcsaIcon name="upload" />
         </span>
         <span className="gcsa-upload__title">{resolvedButtonLabel}</span>
         {resolvedHint ? <p className="gcsa-upload__hint">{resolvedHint}</p> : null}

package/src/icons/iconNames.ts

@@ -18,6 +18,7 @@ export const GCSA_UI_ICON_NAMES = [
   'close',
   'menu',
   'plus',
+  'upload',
   'resultEmpty'
 ] as const;
 

package/src/icons/registry.ts

@@ -1,6 +1,7 @@
 import { GCSA_ICON_NAMES, type GcsaIconName } from './iconNames';
 import chevronLeftSvg from './svg/chevron-left.svg?raw';
 import menuSvg from './svg/menu.svg?raw';
+import uploadSvg from './svg/upload.svg?raw';
 
 const svgModules = import.meta.glob('./svg/*.svg', {
   query: '?raw',
@@ -22,7 +23,8 @@ const registry = {
     Object.entries(svgModules).map(([path, svg]) => [toIconKey(fileStem(path)), svg])
   ),
   menu: menuSvg,
-  chevronLeft: chevronLeftSvg
+  chevronLeft: chevronLeftSvg,
+  upload: uploadSvg
 } as Record<GcsaIconName, string>;
 
 for (const name of GCSA_ICON_NAMES) {

package/src/icons/svg/result-empty.svg

@@ -1 +1,11 @@
-<svg viewBox="0 0 29 36" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path opacity="0.3" d="M2 0C0.895432 0 0 0.895431 0 2V34C0 35.1046 0.895431 36 2 36H27C28.1046 36 29 35.1046 29 34V11H17.9511V0H2Z" fill="currentColor"/><path d="M14.1667 23.5V21.8333H15C16.4167 21.8333 17.5 20.75 17.5 19.3333V18.5C17.5 17.0833 16.4167 16 15 16C13.5833 16 12.5 17.0833 12.5 18.5V19.3333H10.8333V18.5C10.8333 16.1667 12.6667 14.3333 15 14.3333C17.3333 14.3333 19.1667 16.1667 19.1667 18.5V19.3333C19.1667 21.3333 17.75 23 15.8333 23.4167V25.1667H14.1667V23.5ZM14.1667 26H15.8333V27.6667H14.1667V26Z" fill="currentColor"/><path opacity="0.3" d="M20.0234 0V9H29L20.0234 0Z" fill="currentColor"/></svg>
+<svg width="66" height="66" viewBox="0 0 66 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+<ellipse cx="33" cy="53" rx="33" ry="8" fill="#00BBCC" fill-opacity="0.1"/>
+<path d="M35 19.5L12 26V49L35 47.5V19.5Z" fill="#00BBCC" fill-opacity="0.3"/>
+<path d="M55 46.5V25L35 19.5V42L55 46.5Z" fill="#00BBCC" fill-opacity="0.4"/>
+<path d="M54.4179 7.58906L57 9.00955L54.4106 10.4173L52.9909 13L51.5821 10.4109L49 8.99045L51.5894 7.5827L53.0091 5L54.4179 7.58906Z" fill="#00BBCC" fill-opacity="0.4"/>
+<path d="M32 56.0806V32L55 25V48L32 56.0806Z" fill="#7CDBE4"/>
+<path d="M32 56.0806V32L12 26V49L32 56.0806Z" fill="#97E3EA"/>
+<path d="M25 7.5L35 19.5L12 26L2 14L25 7.5Z" fill="#CCF1F5"/>
+<circle cx="35" cy="17.5" r="9" fill="#00BBCC"/>
+<path d="M34.4 19.875V18.625H35C36.02 18.625 36.8 17.8125 36.8 16.75V16.125C36.8 15.0625 36.02 14.25 35 14.25C33.98 14.25 33.2 15.0625 33.2 16.125V16.75H32V16.125C32 14.375 33.32 13 35 13C36.68 13 38 14.375 38 16.125V16.75C38 18.25 36.98 19.5 35.6 19.8125V21.125H34.4V19.875ZM34.4 21.75H35.6V23H34.4V21.75Z" fill="white"/>
+</svg>

package/src/icons/svg/upload.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+  <path d="M32.5 20.2C31.4 15.7 27.5 12.5 22.8 12.5C18.6 12.5 15 15 13.5 18.6C10 19.1 7.5 22.1 7.5 25.7C7.5 29.6 10.7 32.8 14.6 32.8H32.2C35.6 32.8 38.5 30 38.5 26.5C38.5 23.3 35.9 20.7 32.5 20.2Z" stroke="currentColor" stroke-width="1.75" stroke-linejoin="round"/>
+  <path d="M24 22.5V36" stroke="currentColor" stroke-width="1.75" stroke-linecap="round"/>
+  <path d="M19.5 27L24 22.5L28.5 27" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>