@flexkit/studio 0.0.25 → 0.0.27

package/dist/index.css

@@ -233,6 +233,9 @@
   .fk\:relative {
     position: relative;
   }
+  .fk\:sticky {
+    position: sticky;
+  }
   .fk\:inset-0 {
     inset: calc(var(--fk-spacing) * 0);
   }
@@ -263,6 +266,9 @@
   .fk\:top-4 {
     top: calc(var(--fk-spacing) * 4);
   }
+  .fk\:top-10\.25 {
+    top: calc(var(--fk-spacing) * 10.25);
+  }
   .fk\:top-\[0\.1875rem\] {
     top: 0.1875rem;
   }
@@ -293,6 +299,9 @@
   .fk\:right-\[0\.1875rem\] {
     right: 0.1875rem;
   }
+  .fk\:right-px {
+    right: 1px;
+  }
   .fk\:bottom-0 {
     bottom: calc(var(--fk-spacing) * 0);
   }
@@ -308,6 +317,9 @@
   .fk\:left-\[50\%\] {
     left: 50%;
   }
+  .fk\:left-px {
+    left: 1px;
+  }
   .fk\:z-10 {
     z-index: 10;
   }
@@ -1063,6 +1075,9 @@
   .fk\:ml-0\! {
     margin-left: calc(var(--fk-spacing) * 0) !important;
   }
+  .fk\:ml-1 {
+    margin-left: calc(var(--fk-spacing) * 1);
+  }
   .fk\:ml-2 {
     margin-left: calc(var(--fk-spacing) * 2);
   }
@@ -1160,6 +1175,9 @@
   .fk\:h-\(--radix-select-trigger-height\) {
     height: var(--radix-select-trigger-height);
   }
+  .fk\:h-0\.5 {
+    height: calc(var(--fk-spacing) * 0.5);
+  }
   .fk\:h-1\.5 {
     height: calc(var(--fk-spacing) * 1.5);
   }
@@ -1211,6 +1229,9 @@
   .fk\:h-\[2\.375rem\] {
     height: 2.375rem;
   }
+  .fk\:h-\[17\.5rem\] {
+    height: 17.5rem;
+  }
   .fk\:h-\[20px\] {
     height: 20px;
   }
@@ -1253,9 +1274,6 @@
   .fk\:max-h-80 {
     max-height: calc(var(--fk-spacing) * 80);
   }
-  .fk\:max-h-\[17\.5rem\] {
-    max-height: 17.5rem;
-  }
   .fk\:max-h-\[220px\] {
     max-height: 220px;
   }
@@ -1289,9 +1307,6 @@
   .fk\:min-h-\[2\.5rem\] {
     min-height: 2.5rem;
   }
-  .fk\:min-h-\[2\.375rem\] {
-    min-height: 2.375rem;
-  }
   .fk\:min-h-\[3\.5rem\] {
     min-height: 3.5rem;
   }
@@ -1346,6 +1361,9 @@
   .fk\:w-28 {
     width: calc(var(--fk-spacing) * 28);
   }
+  .fk\:w-44 {
+    width: calc(var(--fk-spacing) * 44);
+  }
   .fk\:w-48 {
     width: calc(var(--fk-spacing) * 48);
   }
@@ -1599,6 +1617,9 @@
   .fk\:justify-items-start {
     justify-items: start;
   }
+  .fk\:gap-0 {
+    gap: calc(var(--fk-spacing) * 0);
+  }
   .fk\:gap-0\.5 {
     gap: calc(var(--fk-spacing) * 0.5);
   }
@@ -1705,9 +1726,6 @@
   .fk\:overflow-visible {
     overflow: visible;
   }
-  .fk\:overflow-x-auto {
-    overflow-x: auto;
-  }
   .fk\:overflow-x-hidden {
     overflow-x: hidden;
   }
@@ -1956,6 +1974,9 @@
   .fk\:p-0 {
     padding: calc(var(--fk-spacing) * 0);
   }
+  .fk\:p-0\.5 {
+    padding: calc(var(--fk-spacing) * 0.5);
+  }
   .fk\:p-1 {
     padding: calc(var(--fk-spacing) * 1);
   }
@@ -2064,8 +2085,8 @@
   .fk\:pr-9 {
     padding-right: calc(var(--fk-spacing) * 9);
   }
-  .fk\:pr-10 {
-    padding-right: calc(var(--fk-spacing) * 10);
+  .fk\:pb-0 {
+    padding-bottom: calc(var(--fk-spacing) * 0);
   }
   .fk\:pb-1\.5 {
     padding-bottom: calc(var(--fk-spacing) * 1.5);
@@ -2079,8 +2100,8 @@
   .fk\:pl-0 {
     padding-left: calc(var(--fk-spacing) * 0);
   }
-  .fk\:pl-0\! {
-    padding-left: calc(var(--fk-spacing) * 0) !important;
+  .fk\:pl-1\! {
+    padding-left: calc(var(--fk-spacing) * 1) !important;
   }
   .fk\:pl-2 {
     padding-left: calc(var(--fk-spacing) * 2);
@@ -2268,6 +2289,9 @@
       color: color-mix(in oklab, hsl(var(--sidebar-foreground)) 70%, transparent);
     }
   }
+  .fk\:text-success {
+    color: hsl(var(--success));
+  }
   .fk\:text-white {
     color: var(--fk-color-white);
   }
@@ -2296,6 +2320,9 @@
   .fk\:opacity-0 {
     opacity: 0%;
   }
+  .fk\:opacity-4 {
+    opacity: 4%;
+  }
   .fk\:opacity-40 {
     opacity: 40%;
   }
@@ -4625,6 +4652,11 @@
       padding-inline: calc(var(--fk-spacing) * 0);
     }
   }
+  .fk\:lg\:px-3 {
+    @media (width >= 64rem) {
+      padding-inline: calc(var(--fk-spacing) * 3);
+    }
+  }
   .fk\:dark\:border-input {
     &:is([style="color-scheme: dark;"] *) {
       border-color: hsl(var(--input));

package/dist/index.d.ts

@@ -1,11 +1,11 @@
 import * as React$1 from 'react';
 import React__default, { Dispatch, JSX, SetStateAction, UIEvent, ReactElement } from 'react';
-import { A as AppContextType, a as ActionSetRelationship, b as ActionSetScope, C as Config, c as AppOptions, E as Entity, P as PluginOptions, d as ProjectOptions, O as OrderedAssetValue, e as SearchRequestProps, f as SearchResultItem, U as UseEntityQueryParams, M as MappedEntityItem, F as FormEntityItem, I as ImageValue, g as Schema, h as EntityData, i as AttributeValue, j as Attribute, k as MultipleRelationshipConnection, l as SingleRelationshipConnection } from './types.d-B-SE1ihC.js';
-export { D as DataType, m as FormFieldParams, n as FormFieldProps, o as FormFieldValue, L as LogoProps, p as ScopeType, S as SingleProject } from './types.d-B-SE1ihC.js';
+import { A as AppContextType, a as ActionSetRelationship, b as ActionSetScope, C as Config, c as AppOptions, E as Entity, P as PluginOptions, d as ProjectOptions, O as OrderedAssetValue, e as SearchRequestProps, f as SearchResultItem, U as UseEntityQueryParams, M as MappedEntityItem, F as FormEntityItem, I as ImageValue, g as Schema, h as EntityData, i as AttributeValue, j as Attribute, k as MultipleRelationshipConnection, l as SingleRelationshipConnection } from './types.d-DiA0h3ut.js';
+export { D as DataType, m as DefaultValue, n as DefaultValueByDataType, o as FormFieldParams, p as FormFieldProps, q as FormFieldValue, L as LogoProps, r as ScopeType, S as SingleProject } from './types.d-DiA0h3ut.js';
 export { Outlet, useLocation, useParams } from 'react-router-dom';
 import { OperationVariables, DocumentNode, ErrorLike } from '@apollo/client';
 export { gql } from '@apollo/client';
-import { Column, Row, ColumnDef, Table, RowSelectionState } from '@tanstack/react-table';
+import { Column, Row, ColumnDef, Table, RowSelectionState, OnChangeFn, SortingState } from '@tanstack/react-table';
 export { ColumnDef, ColumnFiltersState, Table as ReactTable, Row, RowSelectionState, SortingState, TableMeta, Updater, VisibilityState, flexRender, getCoreRowModel, getFacetedRowModel, getFacetedUniqueValues, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from '@tanstack/react-table';
 export { useVirtualizer } from '@tanstack/react-virtual';
 import * as react_jsx_runtime from 'react/jsx-runtime';
@@ -90,7 +90,7 @@ declare function useSearch(projectId: string, searchRequest: SearchRequestProps
 
 declare function defineConfig<T extends Config>(config: T): T;
 
-declare function defineEntity<T extends Entity>(entity: T): T;
+declare function defineEntity<T extends Entity>(entity: T): Entity;
 
 type User = {
   id: string;
@@ -118,19 +118,19 @@ declare function DefaultValueSwitch({ scope, checked, onChange }: Props$1): JSX.
 
 type FetchMoreOptions = {
     variables: OperationVariables & {
-        options: {
-            offset: number;
-            limit: number;
-        };
+        offset: number;
+        limit: number;
     };
 };
-declare function useEntityQuery({ entityNamePlural, schema, scope, variables, isForm }: UseEntityQueryParams): {
+declare function useEntityQuery({ entityNamePlural, schema, scope, variables, isForm, selection, }: UseEntityQueryParams): {
     count: number;
     data: MappedEntityItem[] | FormEntityItem[] | ImageValue[] | undefined;
     fetchMore: (args: FetchMoreOptions) => void;
     isLoading: boolean;
+    isLoadingMore: boolean;
     isProjectDisabled: boolean;
     isProjectReadOnly: boolean;
+    reload: () => void;
     schemaErrorMessage: string | null;
 };
 
@@ -152,7 +152,9 @@ type EntityQuery = {
     queryEntityName: string;
     query: string;
 };
-declare function getEntityQuery(entityNamePlural: string, scope: string, schema: Schema): EntityQuery;
+declare function getEntityQuery(entityNamePlural: string, scope: string, schema: Schema, options?: {
+    selection?: 'list' | 'full';
+}): EntityQuery;
 /**
  * Returns a string with the GraphQl query needed to mutate the dataToMutate object for the given entity and scope.
  */
@@ -181,12 +183,20 @@ type Props<TData> = {
     attributesSchema: Attribute[];
     checkboxSelect?: 'single' | 'multiple';
     actionsComponent?: (row: Row<TData>) => JSX.Element;
+    enableColumnSorting?: boolean;
 };
 type ColumnDefinition<TData extends AttributeValue, TValue> = ColumnDef<TData, TValue> & {
     id?: string;
     size: number;
 };
-declare function useGridColumnsDefinition<TData extends AttributeValue, TValue>({ attributesSchema, checkboxSelect, actionsComponent, }: Props<TData>): ColumnDefinition<TData, TValue>[];
+declare function useGridColumnsDefinition<TData extends AttributeValue, TValue>({ attributesSchema, checkboxSelect, actionsComponent, enableColumnSorting, }: Props<TData>): ColumnDefinition<TData, TValue>[];
+
+interface DataTableColumnHeaderProps<TData, TValue> {
+    column: Column<TData, TValue>;
+    title: string;
+    className?: string;
+}
+declare function DataTableColumnHeader<TData, TValue>({ column, title, className, }: DataTableColumnHeaderProps<TData, TValue>): JSX.Element;
 
 interface DataTableRowActionsProps<TData> {
     entityName: string;
@@ -199,11 +209,18 @@ interface DataTableRowActionsProps<TData> {
 }
 declare function DataTableRowActions<TData>({ entityName, entityNamePlural, row, options, }: DataTableRowActionsProps<TData>): JSX.Element;
 
+interface DataTableSortedByProps<TData> {
+    table: Table<TData>;
+}
+declare function DataTableSortedBy<TData>({ table }: DataTableSortedByProps<TData>): JSX.Element | null;
+
 interface DataTableToolbarProps<TData> {
     entityName: string;
+    isReloading?: boolean;
+    onReload?: () => void;
     table: Table<TData>;
 }
-declare function DataTableToolbar<TData>({ entityName, table }: DataTableToolbarProps<TData>): JSX.Element;
+declare function DataTableToolbar<TData>({ entityName, isReloading, onReload, table, }: DataTableToolbarProps<TData>): JSX.Element;
 
 interface DataTableViewOptionsProps<TData> {
     table: Table<TData>;
@@ -214,21 +231,28 @@ interface DataTableProps<TData extends AttributeValue, TValue> {
     classNames?: {
         wrapper?: string;
         table?: string;
+        tableContainer?: string;
         row?: string;
     };
     columns: ColumnDef<AttributeValue, TValue>[];
     data: TData[];
     entityName: string;
+    hasMore?: boolean;
     initialSelectionState?: RowSelectionState;
+    isLoadingMore?: boolean;
     onEntitySelectionChange?: (rowSelection: string[]) => void;
+    onLoadMore?: () => void;
     onScroll?: (event: UIEvent<HTMLDivElement>) => void;
+    onSortingChange?: OnChangeFn<SortingState>;
     pageSize?: number;
     rowHeightEstimate?: number;
     rowAdditionState?: MultipleRelationshipConnection;
     rowDeletionState?: string[];
+    scrollToTopKey?: number;
+    sorting?: SortingState;
     toolbarComponent?: (table: Table<AttributeValue>) => ReactElement;
 }
-declare function DataTable<TData extends AttributeValue, TValue>({ classNames, columns, data, initialSelectionState, onEntitySelectionChange, onScroll, pageSize, rowHeightEstimate, rowAdditionState, rowDeletionState, toolbarComponent, }: DataTableProps<TData, TValue>): JSX.Element;
+declare function DataTable<TData extends AttributeValue, TValue>({ classNames, columns, data, entityName, hasMore, initialSelectionState, isLoadingMore, onEntitySelectionChange, onLoadMore, onScroll, onSortingChange, pageSize, rowHeightEstimate, rowAdditionState, rowDeletionState, scrollToTopKey, sorting: sortingProp, toolbarComponent, }: DataTableProps<TData, TValue>): JSX.Element;
 
 type Action = ActionAddEntity | ActionEditEntity | ActionEditRelationship | ActionDeleteEntity | ActionDismiss | ActionAlertDialog;
 type ActionAddEntity = {
@@ -299,4 +323,4 @@ declare const assetSchema: Entity;
 
 declare const tagSchema: Entity;
 
-export { AppOptions, Attribute, AttributeValue, type ConfigContext, DataTable, DataTableFacetedFilter, DataTableRowActions, DataTableToolbar, DataTableViewOptions, DefaultValueSwitch, Entity, EntityData, FlexkitStudio, FormEntityItem, IMAGES_BASE_URL, MappedEntityItem, PluginOptions, ProjectDisabled, Schema, SchemaError, SearchRequestProps, SearchResultItem, type UploadedFileResult, assetSchema, defineConfig, defineEntity, getEntityCreateMutation, getEntityDeleteMutation, getEntityQuery, getEntitySchema, getEntityUpdateMutation, tagSchema, useAppContext, useAppDispatch, useAuth, useConfig, useDispatch, useEntityMutation, useEntityQuery, useGraphQLError, useGridColumnsDefinition, useSearch, useUploadAssets };
+export { AppOptions, Attribute, AttributeValue, type ConfigContext, DataTable, DataTableColumnHeader, DataTableFacetedFilter, DataTableRowActions, DataTableSortedBy, DataTableToolbar, DataTableViewOptions, DefaultValueSwitch, Entity, EntityData, FlexkitStudio, FormEntityItem, IMAGES_BASE_URL, MappedEntityItem, PluginOptions, ProjectDisabled, Schema, SchemaError, SearchRequestProps, SearchResultItem, type UploadedFileResult, assetSchema, defineConfig, defineEntity, getEntityCreateMutation, getEntityDeleteMutation, getEntityQuery, getEntitySchema, getEntityUpdateMutation, tagSchema, useAppContext, useAppDispatch, useAuth, useConfig, useDispatch, useEntityMutation, useEntityQuery, useGraphQLError, useGridColumnsDefinition, useSearch, useUploadAssets };