@dxos/react-ui-table 0.4.10-main.1ada56e → 0.4.10-main.1f36d57

package/src/components/ColumnMenu.tsx

@@ -1,18 +1,17 @@
 //
-// Copyright 2023 DXOS.org
+// Copyright 2024 DXOS.org
 //
 
-import { Check, Trash, X, GearSix } from '@phosphor-icons/react';
-import { type HeaderContext, type RowData } from '@tanstack/react-table';
-import React, { type FC, type PropsWithChildren, useRef, useState } from 'react';
+import { X, GearSix, CaretDown, ArrowDown, ArrowUp } from '@phosphor-icons/react';
+import { type SortDirection, type HeaderContext, type RowData } from '@tanstack/react-table';
+import React, { useRef, useState, useCallback } from 'react';
 
-import { Button, DensityProvider, Input, Popover, Select, Separator, useTranslation } from '@dxos/react-ui';
+import { Button, DensityProvider, Popover, DropdownMenu } from '@dxos/react-ui';
 import { getSize, mx } from '@dxos/react-ui-theme';
-import { safeParseInt } from '@dxos/util';
 
-import { SortButton } from './SortButton';
-import { type TableDef, type ColumnProps, type ColumnType } from '../schema';
-import { translationKey } from '../translations';
+import { ColumnSettingsForm } from './ColumnSettingsForm';
+import { useColumnSorting } from './hooks/useColumnSorting';
+import { type TableDef, type ColumnProps } from '../schema';
 
 export type ColumnMenuProps<TData extends RowData, TValue> = {
   context: HeaderContext<TData, TValue>;
@@ -25,224 +24,143 @@ export type ColumnMenuProps<TData extends RowData, TValue> = {
 
 export const ColumnMenu = <TData extends RowData, TValue>({ column, ...props }: ColumnMenuProps<TData, TValue>) => {
   const title = column.label?.length ? column.label : column.id;
-
   const header = props.context.header;
 
-  const canSort = header.column.getCanSort();
-  const sortDirection = header.column.getIsSorted();
-  const toggleSort = header.column.getToggleSortingHandler();
+  const { canSort, sortDirection, onSelectSort, onToggleSort, onClearSort } = useColumnSorting(header.column);
+
+  const columnSettingsAnchorRef = useRef<any>(null);
+
+  const [isColumnSettingsOpen, setIsColumnSettingsOpen] = useState(false);
+
+  const shouldPreventFocusOnClose = useRef(false);
+
+  const onOpenColumnSettings = useCallback(() => {
+    shouldPreventFocusOnClose.current = true;
+    setIsColumnSettingsOpen(true);
+  }, [shouldPreventFocusOnClose, setIsColumnSettingsOpen]); // setIsColumnSettingsOpen is a dependency
+
+  const onDropdownCloseAutoFocus = useCallback(
+    (event: Event) => {
+      if (shouldPreventFocusOnClose.current) {
+        event.preventDefault();
+        shouldPreventFocusOnClose.current = false;
+      }
+    },
+    [shouldPreventFocusOnClose],
+  );
 
   return (
-    <div className='flex items-center gap-2'>
-      <div className='flex-1 min-is-0 truncate' title={title}>
-        {title}
-      </div>
-      <div className='flex gap-0'>
-        {canSort && toggleSort && <SortButton sortDirection={sortDirection} onClick={toggleSort} />}
-        <ColumnPanel {...props} column={column} />
+    <div className='flex items-center justify-center justify-between'>
+      <div className='flex items-center gap-1 truncate' title={title}>
+        <SortIndicator direction={sortDirection} onClick={onToggleSort} />
+        <div className='truncate'>{title}</div>
       </div>
+
+      <DropdownMenu.Root modal={false}>
+        <Popover.Root open={isColumnSettingsOpen} onOpenChange={setIsColumnSettingsOpen} modal={false}>
+          <DropdownMenu.Trigger ref={columnSettingsAnchorRef} asChild>
+            <Popover.Anchor asChild>
+              <Button variant='ghost'>
+                <CaretDown className={getSize(4)} />
+              </Button>
+            </Popover.Anchor>
+          </DropdownMenu.Trigger>
+
+          <DropdownMenu.Content onCloseAutoFocus={onDropdownCloseAutoFocus} sideOffset={4} collisionPadding={8}>
+            <DropdownMenu.Viewport>
+              {canSort && (
+                <>
+                  <DropdownMenu.Item onClick={() => onSelectSort('asc')}>
+                    <span className='grow'>Sort ascending</span>
+                    <span className='opacity-50'>
+                      <ArrowUp className={getSize(4)} />
+                    </span>
+                  </DropdownMenu.Item>
+                  <DropdownMenu.Item onClick={() => onSelectSort('desc')}>
+                    <span className='grow'>Sort descending</span>
+                    <span className='opacity-50'>
+                      <ArrowDown className={getSize(4)} />
+                    </span>
+                  </DropdownMenu.Item>
+                  {sortDirection !== false && (
+                    <DropdownMenu.Item onClick={onClearSort}>
+                      <span className='grow'>Clear sort</span>
+                      <span className='opacity-50'>
+                        <X className={getSize(4)} />
+                      </span>
+                    </DropdownMenu.Item>
+                  )}
+                </>
+              )}
+              <DropdownMenu.Item onClick={onOpenColumnSettings}>
+                <span className='grow'>Column settings</span>
+                <span className='opacity-50'>
+                  <GearSix className={mx(getSize(4), 'rotate-90')} />
+                </span>
+              </DropdownMenu.Item>
+            </DropdownMenu.Viewport>
+            <DropdownMenu.Arrow />
+          </DropdownMenu.Content>
+
+          <ColumnSettingsPanel {...props} column={column} onClose={() => setIsColumnSettingsOpen(false)} />
+        </Popover.Root>
+      </DropdownMenu.Root>
     </div>
   );
 };
 
-const Section: FC<PropsWithChildren & { className?: string }> = ({ children, className }) => (
-  <div role='none' className={mx('p-2', className)}>
-    {children}
-  </div>
-);
-
-export const ColumnPanel = <TData extends RowData, TValue>({
-  context,
+export const ColumnSettingsPanel = <TData extends RowData, TValue>({
   tableDefs,
   tableDef,
   column,
   onUpdate,
   onDelete,
-}: ColumnMenuProps<TData, TValue>) => {
-  const [open, setOpen] = useState(false);
-  const [prop, setProp] = useState(column.id);
-  const [refTable, setRefTable] = useState(column.refTable);
-  const [refProp, setRefProp] = useState(column.refProp);
-  const [type, setType] = useState(String(column.type));
-  const [label, setLabel] = useState(column.label);
-  const [digits, setDigits] = useState(String(column.digits ?? '0'));
-  const propRef = useRef<HTMLInputElement>(null);
-  const { t } = useTranslation(translationKey);
-
-  const handleCancel = () => {
-    setProp(column.id);
-    setOpen(false);
-  };
-
-  const handleSave = () => {
-    // Check valid.
-    if (!prop.length || !prop.match(/^[a-zA-Z_].+/i)) {
-      propRef.current?.focus();
-      return;
-    }
-
-    // If already exists then check same type.
-    const current = tableDef.columns.find((c) => c.id !== column.id && c.id === prop);
-    if (current) {
-      // TODO(burdon): Allow multiple columns with different refProps. Ensure correct table prop is updated.
-      if (current.type !== 'ref' /* || current.ref !== refTable */) {
-        // TODO(burdon): Show error.
-        propRef.current?.focus();
-        return;
-      }
-    }
-
-    onUpdate?.(prop, {
-      id: prop, // TODO(burdon): Make unique.
-      prop,
-      label,
-      type: type as ColumnProps['type'],
-      refTable,
-      refProp,
-      digits: safeParseInt(digits),
-    });
+  onClose,
+}: ColumnMenuProps<TData, TValue> & { onClose: () => void }) => (
+  <Popover.Portal>
+    <Popover.Content>
+      <Popover.Viewport classNames='w-60'>
+        <DensityProvider density='fine'>
+          <ColumnSettingsForm
+            column={column}
+            tableDefs={tableDefs}
+            tableDef={tableDef}
+            onUpdate={onUpdate}
+            onDelete={onDelete}
+            onClose={onClose}
+          />
+        </DensityProvider>
+      </Popover.Viewport>
+      <Popover.Arrow />
+    </Popover.Content>
+  </Popover.Portal>
+);
 
-    setOpen(false);
-  };
+export const SortIndicator = ({
+  direction,
+  onClick,
+}: {
+  direction: SortDirection | false;
+  onClick: (e: any) => void;
+}) => {
+  if (direction === false) {
+    return null;
+  }
+
+  let icon;
+
+  switch (direction) {
+    case 'asc':
+      icon = <ArrowUp className={getSize(3)} />;
+      break;
+    case 'desc':
+      icon = <ArrowDown className={getSize(3)} />;
+      break;
+  }
 
   return (
-    <Popover.Root open={open} onOpenChange={(nextOpen) => setOpen(nextOpen)}>
-      <Popover.Trigger asChild>
-        <Button variant='ghost'>
-          <GearSix className={mx(getSize(4), 'rotate-90')} />
-        </Button>
-      </Popover.Trigger>
-      <Popover.Portal>
-        <Popover.Content>
-          <Popover.Viewport classNames='w-60'>
-            <DensityProvider density='fine'>
-              <div className='flex flex-col gap-1'>
-                <Section>
-                  <Input.Root>
-                    <Input.Label classNames='mbe-1'>{t('column label label')}</Input.Label>
-                    <Input.TextInput
-                      placeholder='Column label'
-                      value={label ?? ''}
-                      onChange={(event) => setLabel(event.target.value)}
-                      autoFocus
-                    />
-                  </Input.Root>
-                  <Input.Root>
-                    <Input.Label classNames='mbe-1 mbs-3'>{t('property key label')}</Input.Label>
-                    <Input.TextInput
-                      ref={propRef}
-                      placeholder='Property key'
-                      // TODO(burdon): Provide hooks for value normalization, ENTER, ESC, etc.
-                      value={prop ?? ''}
-                      onChange={(event) => setProp(event.target.value.replace(/[^\w_]/g, ''))}
-                    />
-                  </Input.Root>
-                  <Input.Root>
-                    <Input.Label classNames='mbe-1 mbs-3'>{t('column type label')}</Input.Label>
-                    <Select.Root value={type} onValueChange={setType}>
-                      <Select.TriggerButton placeholder='Type' classNames='is-full' />
-                      <Select.Portal>
-                        <Select.Content>
-                          <Select.Viewport>
-                            {(['number', 'boolean', 'string', 'ref'] as ColumnType[]).map((type) => (
-                              <Select.Option key={type} value={type}>
-                                {t(`${type} column type label`)}
-                              </Select.Option>
-                            ))}
-                          </Select.Viewport>
-                        </Select.Content>
-                      </Select.Portal>
-                    </Select.Root>
-                  </Input.Root>
-                </Section>
-
-                {type === 'number' && (
-                  <>
-                    <Section>
-                      <Input.Root>
-                        <Input.Label classNames='mbe-1 mbs-3'>{t('digits label')}</Input.Label>
-                        {/* TODO(burdon): Constrain input to numbers. */}
-                        <Input.TextInput value={digits ?? ''} onChange={(event) => setDigits(event.target.value)} />
-                      </Input.Root>
-                    </Section>
-                  </>
-                )}
-
-                {/* TODO(burdon): Selectors on same line. */}
-                {type === 'ref' && (
-                  <>
-                    <Section>
-                      <Input.Root>
-                        <Input.Label classNames='mbe-1 mbs-3'>Table</Input.Label>
-                        <Select.Root value={refTable} onValueChange={setRefTable}>
-                          <Select.TriggerButton placeholder='Table' classNames='is-full' />
-                          <Select.Portal>
-                            <Select.Content>
-                              <Select.Viewport>
-                                {tableDefs
-                                  .filter((t) => t.id !== tableDef.id)
-                                  .map(({ id, name }) => (
-                                    <Select.Option key={id} value={id}>
-                                      {name ?? id}
-                                    </Select.Option>
-                                  ))}
-                              </Select.Viewport>
-                            </Select.Content>
-                          </Select.Portal>
-                        </Select.Root>
-                      </Input.Root>
-
-                      {refTable && (
-                        <Input.Root>
-                          <Input.Label classNames='mbe-1 mbs-3'>Table property</Input.Label>
-                          <Select.Root value={refProp} onValueChange={setRefProp}>
-                            <Select.TriggerButton placeholder='Property' classNames='is-full' />
-                            <Select.Portal>
-                              <Select.Content>
-                                <Select.Viewport>
-                                  {tableDefs
-                                    .find((tableDef) => tableDef.id === refTable)
-                                    ?.columns.map(({ id, label }) => (
-                                      <Select.Option key={id} value={id}>
-                                        {label ?? id}
-                                      </Select.Option>
-                                    ))}
-                                </Select.Viewport>
-                              </Select.Content>
-                            </Select.Portal>
-                          </Select.Root>
-                        </Input.Root>
-                      )}
-                    </Section>
-                  </>
-                )}
-
-                <Separator classNames='mli-2' />
-
-                <Section className='space-b-1.5'>
-                  {/* TODO(burdon): Style as DropdownMenuItem. */}
-                  <Button variant='primary' classNames='is-full flex gap-2' onClick={handleSave}>
-                    <span>{t('save label')}</span>
-                    <div className='grow' />
-                    <Check className={getSize(5)} />
-                  </Button>
-                  <Button classNames='is-full flex gap-2' onClick={handleCancel}>
-                    <span>{t('cancel label', { ns: 'os' })}</span>
-                    <div className='grow' />
-                    <X className={getSize(5)} />
-                  </Button>
-                  <Button classNames='is-full flex gap-2' onClick={() => onDelete?.(column.id)}>
-                    <span>{t('delete label')}</span>
-                    <div className='grow' />
-                    <Trash className={getSize(5)} />
-                  </Button>
-                </Section>
-              </div>
-            </DensityProvider>
-          </Popover.Viewport>
-          <Popover.Arrow />
-        </Popover.Content>
-      </Popover.Portal>
-    </Popover.Root>
+    <div onClick={onClick} className='flex items-center cursor-pointer'>
+      {icon}
+    </div>
   );
 };

package/src/components/ColumnSettingsForm.tsx

@@ -0,0 +1,206 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { Check, Trash, X } from '@phosphor-icons/react';
+import React, { type FC, type PropsWithChildren, useRef, useState } from 'react';
+
+import { Button, Input, Select, Separator, useTranslation } from '@dxos/react-ui';
+import { getSize, mx } from '@dxos/react-ui-theme';
+import { safeParseInt } from '@dxos/util';
+
+import { type TableDef, type ColumnProps, type ColumnType } from '../schema';
+import { translationKey } from '../translations';
+
+const Section: FC<PropsWithChildren & { className?: string }> = ({ children, className }) => (
+  <div role='none' className={mx('p-2', className)}>
+    {children}
+  </div>
+);
+
+export const ColumnSettingsForm = ({
+  column,
+  tableDef,
+  tableDefs,
+  onUpdate,
+  onDelete,
+  onClose,
+}: {
+  column: ColumnProps;
+  tableDef: TableDef;
+  tableDefs: TableDef[];
+  onUpdate?: ((id: string, column: ColumnProps) => void) | undefined;
+  onDelete?: ((id: string) => void) | undefined;
+  onClose: () => void;
+}) => {
+  const [prop, setProp] = useState(column.id);
+  const [refTable, setRefTable] = useState(column.refTable);
+  const [refProp, setRefProp] = useState(column.refProp);
+  const [type, setType] = useState(String(column.type));
+  const [label, setLabel] = useState(column.label);
+  const [digits, setDigits] = useState(String(column.digits ?? '0'));
+  const propRef = useRef<HTMLInputElement>(null);
+  const { t } = useTranslation(translationKey);
+
+  const handleCancel = () => {
+    setProp(column.id);
+    onClose;
+  };
+
+  const handleSave = () => {
+    // Check valid.
+    if (!prop.length || !prop.match(/^[a-zA-Z_].+/i)) {
+      propRef.current?.focus();
+      return;
+    }
+
+    // If already exists then check same type.
+    const current = tableDef.columns.find((c) => c.id !== column.id && c.id === prop);
+
+    if (current) {
+      // TODO(burdon): Allow multiple columns with different refProps. Ensure correct table prop is updated.
+      if (current.type !== 'ref' /* || current.ref !== refTable */) {
+        // TODO(burdon): Show error.
+        propRef.current?.focus();
+        return;
+      }
+    }
+
+    onUpdate?.(prop, {
+      id: prop, // TODO(burdon): Make unique.
+      prop,
+      label,
+      type: type as ColumnProps['type'],
+      refTable,
+      refProp,
+      digits: safeParseInt(digits),
+    });
+
+    onClose();
+  };
+
+  return (
+    <div className='flex flex-col gap-1'>
+      <Section>
+        <Input.Root>
+          <Input.Label classNames='mbe-1'>{t('column label label')}</Input.Label>
+          <Input.TextInput
+            placeholder='Column label'
+            value={label ?? ''}
+            onChange={(event) => setLabel(event.target.value)}
+            autoFocus
+          />
+        </Input.Root>
+        <Input.Root>
+          <Input.Label classNames='mbe-1 mbs-3'>{t('property key label')}</Input.Label>
+          <Input.TextInput
+            ref={propRef}
+            placeholder='Property key'
+            // TODO(burdon): Provide hooks for value normalization, ENTER, ESC, etc.
+            value={prop ?? ''}
+            onChange={(event) => setProp(event.target.value.replace(/[^\w_]/g, ''))}
+          />
+        </Input.Root>
+        <Input.Root>
+          <Input.Label classNames='mbe-1 mbs-3'>{t('column type label')}</Input.Label>
+          <Select.Root value={type} onValueChange={setType}>
+            <Select.TriggerButton placeholder='Type' classNames='is-full' />
+            <Select.Portal>
+              <Select.Content>
+                <Select.Viewport>
+                  {(['number', 'boolean', 'string', 'ref'] as ColumnType[]).map((type) => (
+                    <Select.Option key={type} value={type}>
+                      {t(`${type} column type label`)}
+                    </Select.Option>
+                  ))}
+                </Select.Viewport>
+              </Select.Content>
+            </Select.Portal>
+          </Select.Root>
+        </Input.Root>
+      </Section>
+
+      {type === 'number' && (
+        <>
+          <Section>
+            <Input.Root>
+              <Input.Label classNames='mbe-1 mbs-3'>{t('digits label')}</Input.Label>
+              {/* TODO(burdon): Constrain input to numbers. */}
+              <Input.TextInput value={digits ?? ''} onChange={(event) => setDigits(event.target.value)} />
+            </Input.Root>
+          </Section>
+        </>
+      )}
+
+      {/* TODO(burdon): Selectors on same line. */}
+      {type === 'ref' && (
+        <>
+          <Section>
+            <Input.Root>
+              <Input.Label classNames='mbe-1 mbs-3'>Table</Input.Label>
+              <Select.Root value={refTable} onValueChange={setRefTable}>
+                <Select.TriggerButton placeholder='Table' classNames='is-full' />
+                <Select.Portal>
+                  <Select.Content>
+                    <Select.Viewport>
+                      {tableDefs
+                        .filter((t) => t.id !== tableDef.id)
+                        .map(({ id, name }) => (
+                          <Select.Option key={id} value={id}>
+                            {name ?? id}
+                          </Select.Option>
+                        ))}
+                    </Select.Viewport>
+                  </Select.Content>
+                </Select.Portal>
+              </Select.Root>
+            </Input.Root>
+
+            {refTable && (
+              <Input.Root>
+                <Input.Label classNames='mbe-1 mbs-3'>Table property</Input.Label>
+                <Select.Root value={refProp} onValueChange={setRefProp}>
+                  <Select.TriggerButton placeholder='Property' classNames='is-full' />
+                  <Select.Portal>
+                    <Select.Content>
+                      <Select.Viewport>
+                        {tableDefs
+                          .find((tableDef) => tableDef.id === refTable)
+                          ?.columns.map(({ id, label }) => (
+                            <Select.Option key={id} value={id}>
+                              {label ?? id}
+                            </Select.Option>
+                          ))}
+                      </Select.Viewport>
+                    </Select.Content>
+                  </Select.Portal>
+                </Select.Root>
+              </Input.Root>
+            )}
+          </Section>
+        </>
+      )}
+
+      <Separator classNames='mli-2' />
+
+      <Section className='space-b-1.5'>
+        {/* TODO(burdon): Style as DropdownMenuItem. */}
+        <Button variant='primary' classNames='is-full flex gap-2' onClick={handleSave}>
+          <span>{t('save label')}</span>
+          <div className='grow' />
+          <Check className={getSize(5)} />
+        </Button>
+        <Button classNames='is-full flex gap-2' onClick={handleCancel}>
+          <span>{t('cancel label', { ns: 'os' })}</span>
+          <div className='grow' />
+          <X className={getSize(5)} />
+        </Button>
+        <Button classNames='is-full flex gap-2' onClick={() => onDelete?.(column.id)}>
+          <span>{t('delete label')}</span>
+          <div className='grow' />
+          <Trash className={getSize(5)} />
+        </Button>
+      </Section>
+    </div>
+  );
+};

package/src/components/hooks/useColumnSorting.ts

@@ -0,0 +1,54 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type SortDirection, type Column } from '@tanstack/react-table';
+import { useState } from 'react';
+
+export const useColumnSorting = (column: Column<any>) => {
+  const [sortDirection, setSortDirection] = useState<SortDirection | false>(column.getIsSorted());
+  const [firstSort, setFirstSort] = useState<SortDirection | undefined>();
+
+  const canSort = column.getCanSort();
+
+  const updateColumnSort = (direction: SortDirection | false) => {
+    setSortDirection(direction);
+
+    switch (direction) {
+      case false:
+        column.clearSorting();
+        break;
+      case 'asc':
+        column.toggleSorting(false); // descending false
+        break;
+      case 'desc':
+        column.toggleSorting(true); // descending true
+        break;
+    }
+  };
+
+  // Whichever sort is explicitly set first, will be the first sort direction
+  // When toggling, we always go to the other direction, and then to unsorted.
+  const onToggleSort = () => {
+    if (sortDirection === false) {
+      return;
+    }
+
+    if (sortDirection === firstSort) {
+      updateColumnSort(firstSort === 'asc' ? 'desc' : 'asc');
+    } else {
+      updateColumnSort(false);
+    }
+  };
+
+  const onSelectSort = (direction: SortDirection) => {
+    setFirstSort(direction);
+    updateColumnSort(direction);
+  };
+
+  const onClearSort = () => {
+    updateColumnSort(false);
+  };
+
+  return { canSort, sortDirection, onSelectSort, onToggleSort, onClearSort };
+};

package/src/helpers.tsx

@@ -340,7 +340,7 @@ export class ColumnBuilder<TData extends RowData> {
         ...props.meta,
         onUpdate,
         digits,
-        header: { classNames: 'text-end', ...props.meta?.header },
+        header: { ...props.meta?.header },
         cell: { ...props.meta?.cell, classNames },
       },
     };

package/src/theme.ts

@@ -82,7 +82,7 @@ export const tbodyTr: ComponentFunction<TbodyTrStyleProps> = ({ canBeCurrent, is
     canBeCurrent ? ghostSelectedCurrent : ghostSelected,
     canBeCurrent && focusRing,
     canBeCurrent && 'cursor-pointer rounded',
-    isPinned && 'sticky z-[20] bottom-[-1px] base-surface shadow-sm',
+    isPinned && 'sticky z-1 bottom-[-1px] base-surface',
     ...etc,
   );
 

package/dist/types/src/components/SortButton.d.ts

@@ -1,8 +0,0 @@
-import { type SortDirection } from '@tanstack/react-table';
-type SortButtonProps = {
-    sortDirection: false | SortDirection;
-    onClick: (e: any) => void;
-};
-export declare const SortButton: ({ sortDirection, onClick }: SortButtonProps) => JSX.Element;
-export {};
-//# sourceMappingURL=SortButton.d.ts.map

package/dist/types/src/components/SortButton.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SortButton.d.ts","sourceRoot":"","sources":["../../../../src/components/SortButton.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAM3D,KAAK,eAAe,GAAG;IAAE,aAAa,EAAE,KAAK,GAAG,aAAa,CAAC;IAAC,OAAO,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAA;CAAE,CAAC;AAE3F,eAAO,MAAM,UAAU,+BAAgC,eAAe,gBAoBrE,CAAC"}