@firecms/core 3.1.0-canary.9e89e98 → 3.1.0

package/src/components/VirtualTable/VirtualTable.tsx

@@ -42,52 +42,52 @@ type InnerElementProps = {
 
 // eslint-disable-next-line react/display-name
 const innerElementType = forwardRef<HTMLDivElement, InnerElementProps>(({
-                                                                            children,
-                                                                            ...rest
-                                                                        }: InnerElementProps, ref) => {
-
-        return (
-            <VirtualListContext.Consumer>
-                {(virtualTableProps) => {
-                    const customView = virtualTableProps.customView;
-                    return (
-                        <>
+    children,
+    ...rest
+}: InnerElementProps, ref) => {
+
+    return (
+        <VirtualListContext.Consumer>
+            {(virtualTableProps) => {
+                const customView = virtualTableProps.customView;
+                return (
+                    <>
+                        <div
+                            id={"virtual-table"}
+                            style={{
+                                position: "relative",
+                                height: "100%"
+                            }}>
                             <div
-                                id={"virtual-table"}
+                                ref={ref}
+                                {...rest}
                                 style={{
-                                    position: "relative",
-                                    height: "100%"
+                                    ...rest?.style,
+                                    minHeight: "100%",
+                                    position: "relative"
                                 }}>
-                                <div
-                                    ref={ref}
-                                    {...rest}
-                                    style={{
-                                        ...rest?.style,
-                                        minHeight: "100%",
-                                        position: "relative"
-                                    }}>
-                                    <VirtualTableHeaderRow {...virtualTableProps} />
-                                    {!customView && children}
-                                </div>
-
+                                <VirtualTableHeaderRow {...virtualTableProps} />
+                                {!customView && children}
                             </div>
 
-                            {customView && <div style={{
-                                position: "sticky",
-                                top: "48px",
-                                flexGrow: 1,
-                                height: "calc(100% - 48px)",
-                                marginTop: "calc(48px - 100vh)",
-                                left: 0
-                            }}>{customView}</div>}
-
-                        </>
-                    );
-                }}
-            </VirtualListContext.Consumer>
-        );
-    })
-;
+                        </div>
+
+                        {customView && <div style={{
+                            position: "sticky",
+                            top: "48px",
+                            flexGrow: 1,
+                            height: "calc(100% - 48px)",
+                            marginTop: "calc(48px - 100vh)",
+                            left: 0
+                        }}>{customView}</div>}
+
+                    </>
+                );
+            }}
+        </VirtualListContext.Consumer>
+    );
+})
+    ;
 
 /**
  * This is a Table component that allows displaying arbitrary data, not
@@ -99,34 +99,34 @@ const innerElementType = forwardRef<HTMLDivElement, InnerElementProps>(({
  */
 export const VirtualTable = React.memo<VirtualTableProps<any>>(
     function VirtualTable<T extends Record<string, any>>({
-                                                             data,
-                                                             onResetPagination,
-                                                             onEndReached,
-                                                             endOffset = 600,
-                                                             rowHeight = 54,
-                                                             columns: columnsProp,
-                                                             onRowClick,
-                                                             onColumnResize,
-                                                             filter: filterInput,
-                                                             checkFilterCombination,
-                                                             onFilterUpdate,
-                                                             sortBy,
-                                                             error,
-                                                             emptyComponent,
-                                                             onSortByUpdate,
-                                                             onScroll: onScrollProp,
-                                                             loading,
-                                                             cellRenderer,
-                                                             hoverRow,
-                                                             createFilterField,
-                                                             rowClassName,
-                                                             style,
-                                                             className,
-                                                             endAdornment,
-                                                             AddColumnComponent,
-                                                             initialScroll = 0,
-                                                             onColumnsOrderChange,
-                                                         }: VirtualTableProps<T>) {
+        data,
+        onResetPagination,
+        onEndReached,
+        endOffset = 600,
+        rowHeight = 54,
+        columns: columnsProp,
+        onRowClick,
+        onColumnResize,
+        filter: filterInput,
+        checkFilterCombination,
+        onFilterUpdate,
+        sortBy,
+        error,
+        emptyComponent,
+        onSortByUpdate,
+        onScroll: onScrollProp,
+        loading,
+        cellRenderer,
+        hoverRow,
+        createFilterField,
+        rowClassName,
+        style,
+        className,
+        endAdornment,
+        AddColumnComponent,
+        initialScroll = 0,
+        onColumnsOrderChange,
+    }: VirtualTableProps<T>) {
 
         const sortByProperty: string | undefined = sortBy ? sortBy[0] : undefined;
         const currentSort: "asc" | "desc" | undefined = sortBy ? sortBy[1] : undefined;
@@ -234,7 +234,7 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
         }, [columns, onColumnResize]);
 
         // saving the current filter as a ref as a workaround for header closure
-        const filterRef = useRef<VirtualTableFilterValues<any> | undefined>();
+        const filterRef = useRef<VirtualTableFilterValues<any> | undefined>(undefined);
 
         useEffect(() => {
             filterRef.current = filterInput;
@@ -285,10 +285,10 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
         }, [data?.length, onEndReached]);
 
         const onScroll = useCallback(({
-                                          scrollDirection,
-                                          scrollOffset,
-                                          scrollUpdateWasRequested
-                                      }: {
+            scrollDirection,
+            scrollOffset,
+            scrollUpdateWasRequested
+        }: {
             scrollDirection: "forward" | "backward",
             scrollOffset: number,
             scrollUpdateWasRequested: boolean;
@@ -327,21 +327,21 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
         const empty = !loading && (data?.length ?? 0) === 0;
         const customView = error
             ? <CenteredView maxWidth={"2xl"}
-                            className="flex flex-col gap-2">
+                className="flex flex-col gap-2">
 
                 <Typography variant={"h6"}>
                     {"Error"}
                 </Typography>
 
-                {error?.message && <SafeLinkRenderer text={error.message}/>}
+                {error?.message && <SafeLinkRenderer text={error.message} />}
 
             </CenteredView>
             : (empty
                 ? (loading
-                    ? <CircularProgressCenter/>
+                    ? <CircularProgressCenter />
                     : <div
                         className="flex flex-col overflow-auto items-center justify-center p-2 gap-2 h-full">
-                        <AssignmentIcon/>
+                        <AssignmentIcon />
                         {emptyComponent}
                     </div>)
                 : undefined);
@@ -397,7 +397,7 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
                         itemCount={(data?.length ?? 0) + (endAdornment ? 1 : 0)}
                         onScroll={draggingColumnId ? undefined : onScroll}
                         includeAddColumn={Boolean(AddColumnComponent)}
-                        itemSize={rowHeight}/>
+                        itemSize={rowHeight} />
 
                 </VirtualListContext.Provider>
             </div>
@@ -429,13 +429,13 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
 );
 // Wrapper that applies sortable transforms to cells
 const SortableCellWrapper = ({
-                                 columnKey,
-                                 width,
-                                 isDragging,
-                                 isDraggable,
-                                 frozen,
-                                 children
-                             }: {
+    columnKey,
+    width,
+    isDragging,
+    isDraggable,
+    frozen,
+    children
+}: {
     columnKey: string;
     width: number;
     isDragging: boolean;
@@ -454,6 +454,9 @@ const SortableCellWrapper = ({
         disabled: !isDraggable || frozen
     });
 
+    // Remove tabIndex from attributes to avoid capturing focus before cell content
+    const { tabIndex: _tabIndex, ...attrsWithoutTabIndex } = attributes;
+
     const style = {
         // Only use translate, ignore any scale transforms
         transform: transform ? `translateX(${transform.x}px)` : undefined,
@@ -472,7 +475,7 @@ const SortableCellWrapper = ({
                 "flex-shrink-0",
                 frozen && "sticky left-0 z-10 bg-white dark:bg-surface-950"
             )}
-            {...attributes}
+            {...attrsWithoutTabIndex}
         >
             {children}
         </div>
@@ -480,15 +483,15 @@ const SortableCellWrapper = ({
 };
 
 function MemoizedList({
-                          outerRef,
-                          width,
-                          height,
-                          itemCount,
-                          onScroll,
-                          itemSize,
-                          includeAddColumn
-                      }: {
-    outerRef: RefObject<HTMLDivElement>;
+    outerRef,
+    width,
+    height,
+    itemCount,
+    onScroll,
+    itemSize,
+    includeAddColumn
+}: {
+    outerRef: RefObject<HTMLDivElement | null>;
     width: number;
     height: number;
     itemCount: number;
@@ -502,22 +505,22 @@ function MemoizedList({
 }) {
 
     const Row = useCallback(({
-                                 index,
-                                 style
-                             }: any) => {
+        index,
+        style
+    }: any) => {
         return <VirtualListContext.Consumer>
             {({
-                  onRowClick,
-                  data,
-                  columns,
-                  rowHeight = 54,
-                  cellRenderer,
-                  hoverRow,
-                  rowClassName,
-                  endAdornment,
-                  draggingColumnId,
-                  onColumnsOrderChange
-              }) => {
+                onRowClick,
+                data,
+                columns,
+                rowHeight = 54,
+                cellRenderer,
+                hoverRow,
+                rowClassName,
+                endAdornment,
+                draggingColumnId,
+                onColumnsOrderChange
+            }) => {
 
                 if (endAdornment && index === (data ?? []).length) {
                     return <div style={{
@@ -569,12 +572,12 @@ function MemoizedList({
                                         rowData={rowData}
                                         cellData={cellData}
                                         rowIndex={index}
-                                        columnIndex={columnIndex}/>
+                                        columnIndex={columnIndex} />
                                 </SortableCellWrapper>
                             );
                         })}
 
-                        {includeAddColumn && <div className={"w-20"}/>}
+                        {includeAddColumn && <div className={"w-20"} />}
 
                     </VirtualTableRow>
                 );
@@ -605,6 +608,6 @@ const SafeLinkRenderer: React.FC<{
     });
 
     return (
-        <div className={"break-all"} dangerouslySetInnerHTML={{ __html: htmlContent }}/>
+        <div className={"break-all"} dangerouslySetInnerHTML={{ __html: htmlContent }} />
     );
 };

package/src/components/VirtualTable/VirtualTableHeader.tsx

@@ -34,7 +34,7 @@ export type FilterFormFieldProps<CustomProps> = {
 };
 
 type VirtualTableHeaderProps<M extends Record<string, any>> = {
-    resizeHandleRef: RefObject<HTMLDivElement>;
+    resizeHandleRef: RefObject<HTMLDivElement | null>;
     columnIndex: number;
     isResizingIndex: number;
     column: VirtualTableColumn<any>;
@@ -51,20 +51,20 @@ type VirtualTableHeaderProps<M extends Record<string, any>> = {
 
 export const VirtualTableHeader = React.memo<VirtualTableHeaderProps<any>>(
     function VirtualTableHeader<M extends Record<string, any>>({
-                                                                   resizeHandleRef,
-                                                                   columnIndex,
-                                                                   isResizingIndex,
-                                                                   sort,
-                                                                   onColumnSort,
-                                                                   onFilterUpdate,
-                                                                   filter,
-                                                                   column,
-                                                                   onClickResizeColumn,
-                                                                   createFilterField,
-                                                                   AdditionalHeaderWidget,
-                                                                   isDragging,
-                                                                   isDraggable
-                                                               }: VirtualTableHeaderProps<M>) {
+        resizeHandleRef,
+        columnIndex,
+        isResizingIndex,
+        sort,
+        onColumnSort,
+        onFilterUpdate,
+        filter,
+        column,
+        onClickResizeColumn,
+        createFilterField,
+        AdditionalHeaderWidget,
+        isDragging,
+        isDraggable
+    }: VirtualTableHeaderProps<M>) {
 
         const [onHover, setOnHover] = useState(false);
 
@@ -129,11 +129,11 @@ export const VirtualTableHeader = React.memo<VirtualTableHeaderProps<any>>(
                     <>
 
                         {AdditionalHeaderWidget &&
-                            <AdditionalHeaderWidget onHover={onHover || openFilter}/>}
+                            <AdditionalHeaderWidget onHover={onHover || openFilter} />}
 
                         {column.sortable && (sort || hovered || openFilter) &&
                             <Badge color="secondary"
-                                   invisible={!sort}>
+                                invisible={!sort}>
                                 <IconButton
                                     size={"small"}
                                     className={onHover || openFilter ? "bg-white dark:bg-surface-950" : undefined}
@@ -142,11 +142,11 @@ export const VirtualTableHeader = React.memo<VirtualTableHeaderProps<any>>(
                                     }}
                                 >
                                     {!sort &&
-                                        <ArrowUpwardIcon/>}
+                                        <ArrowUpwardIcon />}
                                     {sort === "asc" &&
-                                        <ArrowUpwardIcon/>}
+                                        <ArrowUpwardIcon />}
                                     {sort === "desc" &&
-                                        <ArrowUpwardIcon className={"rotate-180"}/>}
+                                        <ArrowUpwardIcon className={"rotate-180"} />}
                                 </IconButton>
                             </Badge>
                         }
@@ -154,7 +154,7 @@ export const VirtualTableHeader = React.memo<VirtualTableHeaderProps<any>>(
 
                     {column.filter && createFilterField && <div>
                         <Badge color="secondary"
-                               invisible={!filter}>
+                            invisible={!filter}>
 
                             <Popover
                                 open={openFilter}
@@ -166,16 +166,16 @@ export const VirtualTableHeader = React.memo<VirtualTableHeaderProps<any>>(
                                         className={onHover || openFilter ? "bg-white dark:bg-surface-950" : undefined}
                                         size={"small"}
                                         onClick={handleSettingsClick}>
-                                        <FilterListIcon size={"small"}/>
+                                        <FilterListIcon size={"small"} />
                                     </IconButton>}
                             >
                                 <FilterForm column={column}
-                                            filter={filter}
-                                            onHover={onHover}
-                                            onFilterUpdate={update}
-                                            createFilterField={createFilterField}
-                                            hidden={hidden}
-                                            setHidden={setHidden}/>
+                                    filter={filter}
+                                    onHover={onHover}
+                                    onFilterUpdate={update}
+                                    createFilterField={createFilterField}
+                                    hidden={hidden}
+                                    setHidden={setHidden} />
 
                             </Popover>
 
@@ -204,14 +204,14 @@ export const VirtualTableHeader = React.memo<VirtualTableHeaderProps<any>>(
     }, equal) as React.FunctionComponent<VirtualTableHeaderProps<any>>;
 
 function FilterForm<M>({
-                           column,
-                           onFilterUpdate,
-                           filter,
-                           onHover,
-                           createFilterField,
-                           hidden,
-                           setHidden
-                       }: FilterFormProps<M>) {
+    column,
+    onFilterUpdate,
+    filter,
+    onHover,
+    createFilterField,
+    hidden,
+    setHidden
+}: FilterFormProps<M>) {
 
     const id = column.key;
 
@@ -245,12 +245,12 @@ function FilterForm<M>({
     if (!filterField) return null;
     return (
         <form noValidate={true}
-              onSubmit={(e) => {
-                  e.stopPropagation();
-                  e.preventDefault();
-                  submit();
-              }}
-              className={"text-surface-900 dark:text-white"}>
+            onSubmit={(e) => {
+                e.stopPropagation();
+                e.preventDefault();
+                submit();
+            }}
+            className={"text-surface-900 dark:text-white"}>
             <div
                 className={cls(defaultBorderMixin, "py-4 px-6 typography-label border-b")}>
                 {column.title ?? id}

package/src/components/VirtualTable/VirtualTableHeaderRow.tsx

@@ -26,7 +26,7 @@ const SortableColumnHeader = ({
 }: {
     column: VirtualTableColumn;
     columnIndex: number;
-    columnRefs: React.RefObject<HTMLDivElement>[];
+    columnRefs: React.RefObject<HTMLDivElement | null>[];
     isResizing: number;
     onFilterUpdate: any;
     filter: [VirtualTableWhereFilterOp, any] | undefined;

package/src/components/VirtualTable/fields/VirtualTableSelect.tsx

@@ -79,7 +79,7 @@ export function VirtualTableSelect(props: {
         multiple
             ? <MultiSelect
                 inputRef={ref}
-                className="w-full h-full p-0 bg-transparent"
+                className="w-full h-full p-0 bg-transparent outline-none"
                 position={"item-aligned"}
                 disabled={disabled}
                 includeClear={false}
@@ -104,8 +104,8 @@ export function VirtualTableSelect(props: {
                 inputRef={ref}
                 size={"large"}
                 fullWidth={true}
-                className="w-full h-full p-0 bg-transparent"
-                inputClassName="focus:ring-0 focus-visible:ring-0 outline-none focus:outline-none focus-visible:outline-none"
+                className="w-full h-full p-0 bg-transparent outline-none [&_button]:ring-0 [&_button]:ring-offset-0"
+                inputClassName="ring-0 ring-offset-0 focus:ring-0 focus-visible:ring-0 outline-none focus:outline-none focus-visible:outline-none focus-visible:ring-offset-0"
                 position={"item-aligned"}
                 disabled={disabled}
                 padding={false}

package/src/core/DefaultAppBar.tsx

@@ -92,7 +92,7 @@ export const DefaultAppBar = function DefaultAppBar({
 
     const user = userProp ?? authController.user;
 
-    let avatarComponent: JSX.Element | null;
+    let avatarComponent: React.ReactElement | null;
 
     if (user) {
         const initial = user?.displayName

package/src/core/EntitySidePanel.tsx

@@ -105,7 +105,7 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
     }, [collection?.name, setBlocked, setBlockedNavigationMessage]);
 
     if (!props || !collection) {
-        return <div className={"w-full"}/>;
+        return <div className={"w-full"} />;
     }
 
     return (
@@ -120,32 +120,34 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
                     onValuesModified={onValuesModified}
                     onSaved={onUpdate}
                     barActions={({
-                                     status,
-                                     values
-                                 }) => <>
-                        <IconButton
-                            className="self-center"
-                            onClick={onClose}>
-                            <CloseIcon size={"small"}/>
-                        </IconButton>
-                        {allowFullScreen && <IconButton
-                            className="self-center"
-                            onClick={() => {
-                                const key = (status === "new" || status === "copy") ? path + "#new" : path + "/" + entityId;
-                                saveEntityToMemoryCache(key, values);
-                                if (entityId)
-                                    navigate(location.pathname);
-                                else
-                                    navigate(location.pathname + "#new");
-                            }}>
-                            <OpenInFullIcon size={"small"}/>
-                        </IconButton>}
-                    </>}
+                        status,
+                        values
+                    }) => <>
+                            <IconButton
+                                className="self-center"
+                                size={"smallest"}
+                                onClick={onClose}>
+                                <CloseIcon size={"smallest"} />
+                            </IconButton>
+                            {allowFullScreen && <IconButton
+                                className="self-center"
+                                size={"smallest"}
+                                onClick={() => {
+                                    const key = (status === "new" || status === "copy") ? path + "#new" : path + "/" + entityId;
+                                    saveEntityToMemoryCache(key, values);
+                                    if (entityId)
+                                        navigate(location.pathname);
+                                    else
+                                        navigate(location.pathname + "#new");
+                                }}>
+                                <OpenInFullIcon size={"smallest"} />
+                            </IconButton>}
+                        </>}
                     onTabChange={({
-                                      entityId,
-                                      selectedTab,
-                                      collection,
-                                  }) => {
+                        entityId,
+                        selectedTab,
+                        collection,
+                    }) => {
                         sideEntityController.replace({
                             path,
                             entityId,

package/src/core/field_configs.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { ArrayProperty, FieldProps, Property, PropertyConfig, ResolvedProperty } from "../types";
+import { ArrayProperty, FieldProps, NumberProperty, Property, PropertyConfig, ResolvedProperty, StringProperty } from "../types";
 import {
     ArrayCustomShapedFieldBinding,
     ArrayOfReferencesFieldBinding,
@@ -397,14 +397,19 @@ export function getDefaultFieldId(property: Property | ResolvedProperty) {
             return "custom_array";
         } else if (isPropertyBuilder(of)) {
             return "repeat";
-        } else if (of?.dataType === "string" && of.enumValues) {
-            return "multi_select";
-        } else if (of?.dataType === "number" && of.enumValues) {
-            return "multi_number_select";
-        } else if (of?.dataType === "string" && of.storage) {
-            return "multi_file_upload";
-        } else if (of?.dataType === "reference") {
-            return "multi_references";
+        } else if (of) {
+            const ofProperty = of as Property;
+            if (ofProperty.dataType === "string" && (ofProperty as StringProperty).enumValues) {
+                return "multi_select";
+            } else if (ofProperty.dataType === "number" && (ofProperty as NumberProperty).enumValues) {
+                return "multi_number_select";
+            } else if (ofProperty.dataType === "string" && (ofProperty as StringProperty).storage) {
+                return "multi_file_upload";
+            } else if (ofProperty.dataType === "reference") {
+                return "multi_references";
+            } else {
+                return "repeat";
+            }
         } else {
             return "repeat";
         }