onekijs-ui 0.19.15 → 0.19.17

package/dist/components/table/components/TableToolbarBottomComponent.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const TableToolbarBottomComponent: React.FC;
+export default TableToolbarBottomComponent;

package/dist/components/table/components/TableToolbarTopComponent.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const TableToolbarTopComponent: React.FC;
+export default TableToolbarTopComponent;

package/dist/components/table/typings.d.ts

@@ -1,7 +1,6 @@
 import { Collection, CollectionBy, CollectionProxy, FormDisplayerProps, FormFieldProps, Item, ItemAdaptee, Primitive, QueryFilterCriteriaOperator, QueryFilterOrCriteria, QuerySortBy, UseCollectionOptions, ValidationStatus } from 'onekijs-framework';
 import React, { ComponentType, FC, PropsWithChildren, ReactNode } from 'react';
 import { StylableProps, TshirtSize } from '../../styles/typings';
-import { ButtonProps } from '../button/typings';
 import { CheckboxProps } from '../checkbox/typings';
 import { FieldLayoutProps } from '../field/typings';
 import { InputProps } from '../input/typings';
@@ -93,7 +92,6 @@ export type TableBodyRowProps<T = any, I extends TableItem<T> = TableItem<T>> =
     onCollapsed?: (item: I | undefined, index: number) => void;
 };
 export type TableConfig<T = any, I extends TableItem<T> = TableItem<T>> = {
-    ActionComponent?: React.FC;
     autoRefresh?: number;
     bodyClassName?: string;
     BodyComponent?: React.FC<TableBodyProps<T, I>>;
@@ -128,11 +126,17 @@ export type TableConfig<T = any, I extends TableItem<T> = TableItem<T>> = {
     preload?: number;
     rowClassName?: string | ((item: I | undefined, rowIndex: number, columns: TableColumn<T, I>[]) => string);
     RowComponent?: React.FC<TableBodyRowProps<T, I>>;
-    refreshButtonKind?: ButtonProps['kind'];
-    showRefreshButton?: boolean;
     sortable?: boolean;
     stripRows?: boolean;
     tail?: boolean;
+    ToolbarBottomComponent?: React.FC;
+    ToolbarTopComponent?: React.FC;
+    ToolbarBottomCenterComponent?: React.FC;
+    ToolbarBottomLeftComponent?: React.FC;
+    ToolbarBottomRightComponent?: React.FC;
+    ToolbarTopCenterComponent?: React.FC;
+    ToolbarTopLeftComponent?: React.FC;
+    ToolbarTopRightComponent?: React.FC;
 };
 export type TableController<T = any, I extends TableItem<T> = TableItem<T>, S extends TableState<T, I> = TableState<T, I>> = Collection<T, I, S> & {
     addColumn(column: TableColumn<T, I>, position?: number): void;

package/dist/index.d.ts

@@ -31,6 +31,7 @@ export { default as DashboardOverlay, dashboardOverlayStyle } from './components
 export { default as DashboardRight } from './components/dashboard/components/DashboardRight';
 export { default as DashboardToggler } from './components/dashboard/components/DashboardToggler';
 export { default as useDashboard } from './components/dashboard/hooks/useDashboard';
+export { default as RefreshIcon } from './components/icon/RefreshIcon';
 export { useDashboardHorizontalPanel, useDashboardVerticalPanel, useDashoardBodyPanel, } from './components/dashboard/hooks/useDashboardPanel';
 export { DashboardServiceContext, default as useDashboardService, } from './components/dashboard/hooks/useDashboardService';
 export { DashboardStateContext, default as useDashboardState } from './components/dashboard/hooks/useDashboardState';

package/dist/index.js

@@ -3843,6 +3843,24 @@ const useDashboard = () => {
     return [DashboardRef.current, service];
 };
 
+const RefreshIconComponent = (props) => {
+    return (React.createElement("div", { ...props },
+        React.createElement("svg", { className: "o-icon-refresh-svg", stroke: "currentColor", fill: "none", strokeWidth: "2", viewBox: "0 0 24 24", "aria-hidden": "true", xmlns: "http://www.w3.org/2000/svg" },
+            React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" }))));
+};
+var RefreshIcon = styled(RefreshIconComponent) `
+  ${({ width = '16px', height = '16px', color: cssColor = 'inherit' }) => styled.css `
+    width: ${width};
+    height: ${height};
+    ${display('flex')};
+    ${alignItems('center')};
+    ${color(cssColor)}
+    .o-icon-refresh-svg {
+      display: inline-block;
+    }
+  `}
+`;
+
 const useDashboardHorizontalPanel = (area) => {
     const state = React.useContext(DashboardStateContext);
     return area === 'header' ? state.header : state.footer;
@@ -9252,33 +9270,6 @@ const useTableState = () => {
     return React.useContext(TableStateContext);
 };
 
-const RefreshIconComponent = (props) => {
-    return (React.createElement("div", { ...props },
-        React.createElement("svg", { className: "o-icon-refresh-svg", stroke: "currentColor", fill: "none", strokeWidth: "2", viewBox: "0 0 24 24", "aria-hidden": "true", xmlns: "http://www.w3.org/2000/svg" },
-            React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" }))));
-};
-var RefreshIcon = styled(RefreshIconComponent) `
-  ${({ width = '16px', height = '16px', color: cssColor = 'inherit' }) => styled.css `
-    width: ${width};
-    height: ${height};
-    ${display('flex')};
-    ${alignItems('center')};
-    ${color(cssColor)}
-    .o-icon-refresh-svg {
-      display: inline-block;
-    }
-  `}
-`;
-
-const TableActionComponent = () => {
-    const { showRefreshButton, refreshButtonKind } = useTableConfig();
-    const table = useTableService();
-    return (React.createElement("div", { className: "o-table-actions" },
-        React.createElement("div", { className: "o-table-action" }),
-        showRefreshButton && React.createElement("div", { className: "o-table-refresh" },
-            React.createElement(Button, { kind: refreshButtonKind, size: "small", IconComponent: () => React.createElement(RefreshIcon, null), onClick: () => table.reload() }, "Refresh"))));
-};
-
 // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 const useTableColumns = () => {
     return useTableState().columns;
@@ -9608,12 +9599,23 @@ const tableStyle = ({ theme, fit = true }) => {
       ${display('flex')}
     }
 
-    .o-table-action {
+    .o-table-actions-top {
+    }
+
+    .o-table-action-top-left {
       ${flexGrow(1)}
     }
 
-    .o-table-refresh {
-      ${marginBottom('sm')}
+    .o-table-action-top-center {
+      ${flexGrow(1)}
+      ${display('flex')}
+      ${justifyContent('center')}
+    }
+
+    .o-table-action-top-right {
+      ${flexGrow(1)}
+      ${display('flex')}
+      ${justifyContent('flex-end')}
       ${marginRight('xl')}
     }
 
@@ -10074,7 +10076,23 @@ const ExpandedCellComponent = ({ item, className }) => {
         React.createElement(TogglerIcon, { open: item.expanded, model: "plus", color: "primary" })));
 };
 
-const ControllerTableComponent = ({ ActionComponent = TableActionComponent, autoRefresh, controller, className, bodyClassName, BodyComponent = TableBodyComponent, ExpandedComponent, filterable, fit, fixHeader = true, follow, grow, FooterComponent = TableFooterComponent, footerClassName, header = true, headerClassName, HeaderComponent = TableHeaderComponent, increment, itemHeight, LoadingComponent, LoadingRowComponent, NotFoundComponent, footer = false, height, highlightRow, onRowClick, onRowEnter, onRowLeave, onRowOver, onRowOut, paddingEnd, paddingStart, parentRef, preload, refreshButtonKind = 'primary', rowClassName, RowComponent, showRefreshButton, sortable, stripRows, tail, }) => {
+const TableToolbarBottomComponent = () => {
+    const { ToolbarBottomCenterComponent, ToolbarBottomLeftComponent, ToolbarBottomRightComponent } = useTableConfig();
+    return (React.createElement("div", { className: `o-table-actions o-table-actions-bottom` },
+        React.createElement("div", { className: "o-table-action-bottom-left" }, ToolbarBottomLeftComponent && React.createElement(ToolbarBottomLeftComponent, null)),
+        React.createElement("div", { className: "o-table-action-bottom-center" }, ToolbarBottomCenterComponent && React.createElement(ToolbarBottomCenterComponent, null)),
+        React.createElement("div", { className: "o-table-action-bottom-center" }, ToolbarBottomRightComponent && React.createElement(ToolbarBottomRightComponent, null))));
+};
+
+const TableToolbarTopComponent = () => {
+    const { ToolbarTopCenterComponent, ToolbarTopLeftComponent, ToolbarTopRightComponent, } = useTableConfig();
+    return (React.createElement("div", { className: `o-table-actions o-table-actions-top` },
+        React.createElement("div", { className: "o-table-action-top-left" }, ToolbarTopLeftComponent && React.createElement(ToolbarTopLeftComponent, null)),
+        React.createElement("div", { className: "o-table-action-top-center" }, ToolbarTopCenterComponent && React.createElement(ToolbarTopCenterComponent, null)),
+        React.createElement("div", { className: "o-table-action-top-right" }, ToolbarTopRightComponent && React.createElement(ToolbarTopRightComponent, null))));
+};
+
+const ControllerTableComponent = ({ autoRefresh, controller, className, bodyClassName, BodyComponent = TableBodyComponent, ExpandedComponent, filterable, fit, fixHeader = true, follow, grow, FooterComponent = TableFooterComponent, footerClassName, header = true, headerClassName, HeaderComponent = TableHeaderComponent, increment, itemHeight, LoadingComponent, LoadingRowComponent, NotFoundComponent, footer = false, height, highlightRow, onRowClick, onRowEnter, onRowLeave, onRowOver, onRowOut, paddingEnd, paddingStart, parentRef, preload, rowClassName, RowComponent, sortable, stripRows, tail, ToolbarBottomComponent = TableToolbarBottomComponent, ToolbarTopComponent = TableToolbarTopComponent, ToolbarBottomCenterComponent, ToolbarBottomLeftComponent, ToolbarBottomRightComponent, ToolbarTopCenterComponent, ToolbarTopLeftComponent, ToolbarTopRightComponent, }) => {
     const classNames = addClassname('o-table', className);
     const { columns, items } = controller.state;
     const contentRef = React.useRef(null);
@@ -10082,7 +10100,6 @@ const ControllerTableComponent = ({ ActionComponent = TableActionComponent, auto
     const service = controller.asService();
     const config = React.useMemo(() => {
         return {
-            ActionComponent,
             autoRefresh,
             bodyClassName,
             BodyComponent,
@@ -10115,16 +10132,21 @@ const ControllerTableComponent = ({ ActionComponent = TableActionComponent, auto
             paddingStart,
             parentRef,
             preload,
-            refreshButtonKind,
             rowClassName,
             RowComponent,
-            showRefreshButton,
             sortable,
             stripRows,
             tail,
+            ToolbarBottomComponent,
+            ToolbarTopComponent,
+            ToolbarBottomCenterComponent,
+            ToolbarBottomLeftComponent,
+            ToolbarBottomRightComponent,
+            ToolbarTopCenterComponent,
+            ToolbarTopLeftComponent,
+            ToolbarTopRightComponent,
         };
     }, [
-        ActionComponent,
         autoRefresh,
         bodyClassName,
         BodyComponent,
@@ -10157,13 +10179,19 @@ const ControllerTableComponent = ({ ActionComponent = TableActionComponent, auto
         paddingStart,
         parentRef,
         preload,
-        refreshButtonKind,
         rowClassName,
         RowComponent,
-        showRefreshButton,
         sortable,
         stripRows,
         tail,
+        ToolbarBottomComponent,
+        ToolbarTopComponent,
+        ToolbarBottomCenterComponent,
+        ToolbarBottomLeftComponent,
+        ToolbarBottomRightComponent,
+        ToolbarTopCenterComponent,
+        ToolbarTopLeftComponent,
+        ToolbarTopRightComponent,
     ]);
     service.config = config;
     React.useEffect(() => {
@@ -10186,14 +10214,15 @@ const ControllerTableComponent = ({ ActionComponent = TableActionComponent, auto
         React.createElement(TableStateContext.Provider, { value: controller.state },
             React.createElement(TableConfigContext.Provider, { value: config },
                 React.createElement("div", { className: className },
-                    React.createElement(ActionComponent, null),
+                    React.createElement(ToolbarTopComponent, null),
                     React.createElement("div", { id: id, className: classNames, ref: tableRef, style: {
                             maxHeight: height,
                             overflow: 'auto',
                         } },
                         header && React.createElement(HeaderComponent, { columns: columns, className: headerClassName }),
                         React.createElement(BodyComponent, { items: items || [], columns: columns, tableRef: tableRef, contentRef: contentRef, className: bodyClassName }),
-                        footer && React.createElement(FooterComponent, { columns: columns, className: footerClassName })))))));
+                        footer && React.createElement(FooterComponent, { columns: columns, className: footerClassName }))),
+                React.createElement(ToolbarBottomComponent, null)))));
 };
 ControllerTableComponent.displayName = 'Table';
 
@@ -12424,6 +12453,7 @@ exports.PasswordComponent = PasswordComponent$1;
 exports.Properties = Properties;
 exports.PropertiesComponent = PropertiesComponent;
 exports.Property = Property;
+exports.RefreshIcon = RefreshIcon;
 exports.Row = Row;
 exports.SearchIcon = SearchIcon;
 exports.Select = Select;