onekijs-ui 0.18.2 → 0.19.0

package/dist/index.js

@@ -42,28 +42,41 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
 };
 
 let AccordionService = class AccordionService extends onekijsFramework.DefaultService {
-    initPanel(uid, initialActive = false) {
+    initPanel(uid, initialActive = false, initialExpand = false) {
         if (this.state.panels[uid] === undefined) {
             this.state.panels[uid] = {
                 uid,
                 active: initialActive,
+                expanded: initialExpand,
             };
         }
     }
+    activate(uid) {
+        const panel = this.state.panels[uid];
+        if (panel) {
+            Object.keys(this.state.panels).forEach((uid) => {
+                this.state.panels[uid].active = false;
+            });
+            panel.active = true;
+        }
+    }
     collapse(uid) {
         const panel = this.state.panels[uid];
         if (panel) {
             panel.active = false;
+            panel.expanded = false;
         }
     }
     expand(uid) {
         const panel = this.state.panels[uid];
         if (panel) {
-            if (!this.state.multiActive) {
-                Object.keys(this.state.panels).forEach((uid) => {
-                    this.state.panels[uid].active = false;
-                });
-            }
+            Object.keys(this.state.panels).forEach((uid) => {
+                this.state.panels[uid].active = false;
+                if (!this.state.multiExpand) {
+                    this.state.panels[uid].expanded = false;
+                }
+            });
+            panel.expanded = true;
             panel.active = true;
         }
     }
@@ -71,9 +84,15 @@ let AccordionService = class AccordionService extends onekijsFramework.DefaultSe
 __decorate([
     onekijsFramework.reducer,
     __metadata("design:type", Function),
-    __metadata("design:paramtypes", [String, Object]),
+    __metadata("design:paramtypes", [String, Object, Object]),
     __metadata("design:returntype", void 0)
 ], AccordionService.prototype, "initPanel", null);
+__decorate([
+    onekijsFramework.reducer,
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [String]),
+    __metadata("design:returntype", void 0)
+], AccordionService.prototype, "activate", null);
 __decorate([
     onekijsFramework.reducer,
     __metadata("design:type", Function),
@@ -273,7 +292,7 @@ const AccordionContainer = ({ className, children }) => {
  *
  * @example
  * ```tsx
- * <AccordionComponent multiActive="true" />
+ * <AccordionComponent multiExpand="true" />
  * ```
  *
  * @group Accordion
@@ -282,7 +301,7 @@ const AccordionContainer = ({ className, children }) => {
  */
 const AccordionComponent = ({ Component = AccordionContainer, ...props }) => {
     const [state, service] = onekijsFramework.useService(AccordionService, {
-        multiActive: props.multiActive,
+        multiExpand: props.multiExpand,
         panels: {},
         animate: props.animate ?? 150,
         mode: props.mode ?? 'push',
@@ -637,11 +656,11 @@ const accordionStyle = ({ border = false, animate = 150, theme }) => {
 
     .o-accordion-panel-active {
       .o-accordion-panel-title {
-        ${backgroundColor(t.activeBgColor, { hover: t.hoverBgColor })}
+        ${backgroundColor(t.activeBgColor, { hover: t.activeBgColor })}
         ${color(t.activeFontColor, { hover: t.activeFontColor })}
       }
       .o-accordion-content {
-        ${backgroundColor(t.activeBgColor, { hover: t.activeBgColor })}
+
       }
     }
 
@@ -672,7 +691,7 @@ const accordionStyle = ({ border = false, animate = 150, theme }) => {
  *
  * @example
  * ```tsx
- * <Accordion multiActive="false" />
+ * <Accordion multiExpand="false" />
  * ```
  *
  * @see AccordionComponent
@@ -682,14 +701,14 @@ const Accordion = styled(AccordionComponent) `
   ${accordionStyle}
 `;
 
-const useAccordionPanel = (initialActive = false) => {
+const useAccordionPanel = (initialActive = false, initialExpand = false) => {
     const uid = React.useId();
     const service = useAccordionService();
     const state = useAccordionState();
     const panel = state.panels[uid];
     React.useEffect(() => {
         if (panel === undefined) {
-            service.initPanel(uid, initialActive);
+            service.initPanel(uid, initialActive, initialExpand);
         }
     });
     return panel;
@@ -847,8 +866,9 @@ const AccordionPanelTitle = ({ title, active, onClick }) => {
         React.createElement("span", null, `${title}`)));
 };
 
-const AccordionPanel = ({ title, initialActive, children, Component = AccordionPanelTitle, link, }) => {
-    const panel = useAccordionPanel(initialActive);
+const AccordionPanel = ({ title, initialActive, initialExpand, children, Component = AccordionPanelTitle, link, }) => {
+    initialExpand = initialExpand ?? initialActive;
+    const panel = useAccordionPanel(initialActive, initialExpand);
     const service = useAccordionService();
     const { animate } = useAccordionState();
     const router = onekijsFramework.useTryRouter();
@@ -889,8 +909,8 @@ const AccordionPanel = ({ title, initialActive, children, Component = AccordionP
     }
     return (React.createElement("div", { className: `o-accordion-panel${panel.active ? ' o-accordion-panel-active' : ''}` },
         React.createElement(Component, { title: title, active: panel.active, onClick: toggle, link: link }),
-        React.createElement(reactTransitionGroup.CSSTransition, { in: panel.active, classNames: "o-accordion-animate", timeout: animate, mountOnEnter: false, appear: false, unmountOnExit: true, onExiting: onExiting, onEntering: onEntering, onEntered: onEntered },
-            React.createElement("div", null, !link && React.createElement("div", { className: "o-accordion-content" }, children)))));
+        React.createElement(reactTransitionGroup.CSSTransition, { in: panel.expanded, classNames: "o-accordion-animate", timeout: animate, mountOnEnter: false, appear: false, unmountOnExit: true, onExiting: onExiting, onEntering: onEntering, onEntered: onEntered },
+            React.createElement("div", null, React.createElement("div", { className: "o-accordion-content" }, children)))));
 };
 
 const ButtonComponent = React.forwardRef((props, ref) => {
@@ -931,7 +951,8 @@ const zIndex = cssProperty('z-index');
 const getColor = (key, pattern) => {
     return `${key}${pattern === 'solid' ? '' : onekijsFramework.ucfirst(pattern)}`;
 };
-const buttonStyle = ({ kind = 'primary', pattern = 'solid', disabled, IconComponent, theme, }) => {
+const buttonStyle = ({ kind = 'primary', pattern = 'solid', size = 'medium', disabled, IconComponent, theme, }) => {
+    const uSize = onekijsFramework.ucfirst(size);
     const t = theme.buttons[kind];
     const bgColor = onekijsFramework.get(t, getColor('bgColor', pattern));
     const hoverBgColor = onekijsFramework.get(t, getColor('hoverBgColor', pattern));
@@ -939,6 +960,13 @@ const buttonStyle = ({ kind = 'primary', pattern = 'solid', disabled, IconCompon
     const hoverFontColor = onekijsFramework.get(t, getColor('hoverColor', pattern));
     const bColor = onekijsFramework.get(t, getColor('borderColor', pattern));
     const hoverBorderColor = onekijsFramework.get(t, getColor('hoverBorderColor', pattern));
+    const tPaddingX = onekijsFramework.get(t, `paddingX${uSize}`);
+    const tPaddingY = onekijsFramework.get(t, `paddingY${uSize}`);
+    const tBorderRadius = onekijsFramework.get(t, `borderRadius${uSize}`);
+    const tBorderWidth = onekijsFramework.get(t, `borderWidth${uSize}`);
+    const tLineHeight = onekijsFramework.get(t, `lineHeight${uSize}`);
+    const tFontSize = onekijsFramework.get(t, `fontSize${uSize}`);
+    const tLetterSpacing = onekijsFramework.get(t, `letterSpacing${uSize}`);
     return styled.css `
     ${display('inline-flex')}
     ${alignItems('center')}
@@ -948,11 +976,11 @@ const buttonStyle = ({ kind = 'primary', pattern = 'solid', disabled, IconCompon
     ${color(fontColor, {
         hover: disabled ? fontColor : hoverFontColor,
     })}
-    ${paddingX(t.paddingX)}
-    ${paddingY(t.paddingY)}
-    ${borderRadius(t.borderRadius)}
+    ${paddingX(tPaddingX)}
+    ${paddingY(tPaddingY)}
+    ${borderRadius(tBorderRadius)}
     ${borderStyle(t.borderStyle)}
-    ${borderWidth(t.borderWidth)}
+    ${borderWidth(tBorderWidth)}
     ${borderColor(bColor, {
         hover: disabled ? bColor : hoverBorderColor,
     })}
@@ -965,9 +993,9 @@ const buttonStyle = ({ kind = 'primary', pattern = 'solid', disabled, IconCompon
       ${whiteSpace(t.whiteSpace)}
       ${textOverflow(t.textOverflow)}
       ${textTransform(t.textTransform)}
-      ${letterSpacing(t.letterSpacing)}
-      ${lineHeight(t.lineHeight)}
-      ${fontSize(t.fontSize)}
+      ${letterSpacing(tLetterSpacing)}
+      ${lineHeight(tLineHeight)}
+      ${fontSize(tFontSize)}
       ${opacity(disabled ? 0.6 : 1)}
       ${marginLeft(IconComponent ? 'xs' : 'none')}
       ${outline('none')}
@@ -4464,6 +4492,7 @@ const useListView = ({ controller, height, itemHeight = defaultItemHeight, overs
         if (controller.status !== onekijsFramework.LoadingStatus.NotReady) {
             if (isVirtual) {
                 if (controller.status === onekijsFramework.LoadingStatus.NotInitialized) {
+                    scrollToOffset(0);
                     controller.load(preload, undefined, true);
                 }
                 else {
@@ -4480,7 +4509,7 @@ const useListView = ({ controller, height, itemHeight = defaultItemHeight, overs
                         let to;
                         const first = Math.max(0, lastVirtualItemIndex - increment);
                         if (lastVirtualItemIndex > 0) {
-                            let slice = state.items.slice(first, lastVirtualItemIndex);
+                            let slice = state.items.slice(first, lastVirtualItemIndex).filter(() => true);
                             if (slice.length < lastVirtualItemIndex - first) {
                                 const arr = new Array(lastVirtualItemIndex - first);
                                 arr.splice(arr.length - slice.length, slice.length, ...slice);
@@ -4590,7 +4619,9 @@ const LoadingItem = ({ className }) => {
 var LoadingItem$1 = styled(LoadingItem) `
   ${height('full')}
   ${width('full')}
-  ${minHeight('30px')}
+  ${(props) => {
+    return minHeight(`${props.minHeight ?? 37}px`);
+}}
   ${marginY('1px')}
   animation: skeleton-loading 1s linear infinite alternate;
 
@@ -4795,8 +4826,9 @@ const ListBodyComponent = ({ autoRefresh, bodyRef, className, follow, height, it
         mouseRef.current = false;
     });
     React.useEffect(() => {
+        const ref = parentRef ? parentRef : bodyRef;
+        //console.log('parentRef', parentRef, 'ref', ref)
         const atBottom = () => {
-            const ref = parentRef ? parentRef : bodyRef;
             if (ref && ref.current) {
                 const sh = ref.current.scrollHeight;
                 const st = ref.current.scrollTop;
@@ -4806,9 +4838,21 @@ const ListBodyComponent = ({ autoRefresh, bodyRef, className, follow, height, it
             }
             return false;
         };
-        if (tail && scrollToIndex && totalSize && bodyRef && bodyRef.current) {
-            tailRef.current.lastScrollTop = bodyRef.current.scrollTop;
-            if (mouseRef.current || wheelRef.current) {
+        if (tail && scrollToIndex && totalSize && ref && ref.current) {
+            // console.log(
+            //   'scrollTop',
+            //   ref.current.scrollTop,
+            //   'mouseRef',
+            //   mouseRef.current,
+            //   'wheelRef',
+            //   wheelRef.current,
+            //   'applyTail',
+            //   tailRef.current.applyTail,
+            //   'atBottom',
+            //   atBottom(),
+            // );
+            tailRef.current.lastScrollTop = ref.current.scrollTop;
+            if (!atBottom() && (mouseRef.current || wheelRef.current)) {
                 tailRef.current.applyTail = false;
             }
             else if (tailRef.current.applyTail === true || atBottom()) {
@@ -5499,6 +5543,7 @@ const NotificationComponent = ({ className, notification, showTimer = true }) =>
 const NotificationsComponent = ({ className, topics, NotificationComponent: NotificationComponent$1 = NotificationComponent, max, animate = 500, position = 'bottom-right', showTimer, }) => {
     const classNames = addClassname('o-notifications', className);
     const translateX = position === 'top-right' || position === 'bottom-right' ? '250px' : '-250px';
+    const notificationService = onekijsFramework.useNotificationService();
     let notifications = onekijsFramework.useNotifications(topics);
     if (max) {
         notifications = notifications.slice(0, max);
@@ -5560,6 +5605,8 @@ const NotificationsComponent = ({ className, topics, NotificationComponent: Noti
         document.body.style.overflowY = bodyOverflowYRef.current;
     };
     const element = (React.createElement("div", { className: classNames },
+        notifications.length > 1 && (React.createElement("div", { className: "o-notification-close-all" },
+            React.createElement("span", { className: "o-notification-close-all-content", onClick: () => notificationService.clearAll() }, "Close all"))),
         React.createElement(reactTransitionGroup.TransitionGroup, { component: null }, notifications.map((notification, index) => (React.createElement(reactTransitionGroup.CSSTransition, { timeout: {
                 appear: animate * 2,
                 enter: animate * 2,
@@ -5587,6 +5634,17 @@ const notifcationsStyle = ({ position: pos = 'bottom-right' }) => {
       ${opacity(0)}
       ${display('flex')}
     }
+    .o-notification-close-all {
+      ${textAlign('right')}
+      ${paddingRight('sm')}
+      ${paddingBottom('sm')}
+    }
+    .o-notification-close-all-content{
+      ${fontSize('lg')}
+      ${cursor('pointer')}
+      ${color('primary')}
+      ${fontWeight('medium')}
+    }
     .o-notification {
       ${minWidth('450px')}
       ${maxWidth('450px')}
@@ -6285,11 +6343,11 @@ const SelectOptionComponent = (props) => {
     if (!item || !item.data)
         return null;
     return (React.createElement(React.Fragment, null,
-        displayGroup && React.createElement(OptionGroupComponent, { ...props }),
-        React.createElement("div", { className: classNames, onClick: () => onItemClick(item, index), onMouseEnter: () => hoverable && onMouseEnter && item && onMouseEnter(item, index), onMouseLeave: () => hoverable && onMouseLeave && item && onMouseLeave(item, index) },
+        displayGroup && React.createElement(OptionGroupComponent, { ...props, key: "group" }),
+        React.createElement("div", { className: classNames, onClick: () => onItemClick(item, index), onMouseEnter: () => hoverable && onMouseEnter && item && onMouseEnter(item, index), onMouseLeave: () => hoverable && onMouseLeave && item && onMouseLeave(item, index), key: "content" },
             React.createElement("div", { style: { display: 'flex' }, ref: ref },
-                service.config?.multiple && (React.createElement(Checkbox, { value: item?.selected ? true : false, onChange: () => onItemClick(item, index), color: "currentColor", className: "o-select-option-multiple-checkbox" })),
-                React.createElement(OptionContentComponent, { ...props, onClick: () => onItemClick(item, index) })))));
+                service.config?.multiple && (React.createElement(Checkbox, { value: item?.selected ? true : false, onChange: () => onItemClick(item, index), color: "currentColor", className: "o-select-option-multiple-checkbox", key: "checkbox" })),
+                React.createElement(OptionContentComponent, { ...props, onClick: () => onItemClick(item, index), key: "option_content" })))));
 };
 SelectOptionComponent.displayName = 'SelectOptionComponent';
 var SelectOptionComponent$1 = React.memo(SelectOptionComponent);
@@ -8831,6 +8889,33 @@ 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;
@@ -8917,7 +9002,9 @@ const TableBodyCellComponent = React.memo((props) => {
 TableBodyCellComponent.displayName = 'TableCell';
 
 const TableLoadingRowComponent = (props) => {
-    return React.createElement(LoadingItem$1, { ...props });
+    const { itemHeight } = useTableConfig();
+    const minHeight = typeof itemHeight === 'function' ? itemHeight(props.index) : itemHeight;
+    return React.createElement(LoadingItem$1, { ...props, minHeight: minHeight });
 };
 const style = ({ theme }) => {
     const t = theme.table;
@@ -8931,7 +9018,8 @@ var TableLoadingRowComponent$1 = styled(TableLoadingRowComponent) `
 `;
 
 const timeout = 500;
-const TableBodyRowComponent = ({ item, index, columns, CellComponent = TableBodyCellComponent, className, onExpand, onExpanding, onExpanded, onCollapse, onCollapsing, onCollapsed, }) => {
+const TableBodyRowComponent = (props) => {
+    const { item, index, columns, CellComponent = TableBodyCellComponent, className, onExpand, onExpanding, onExpanded, onCollapse, onCollapsing, onCollapsed, } = props;
     const [hover, setHover] = React.useState(false);
     const { highlightRow, stripRows, LoadingRowComponent = TableLoadingRowComponent$1, ExpandedComponent, } = useTableConfig();
     const expandedHeightRef = React.useRef(0);
@@ -8961,7 +9049,7 @@ const TableBodyRowComponent = ({ item, index, columns, CellComponent = TableBody
     if (onekijsFramework.isItemFetching(item)) {
         return (React.createElement("div", { className: rowContainerClassName },
             React.createElement("div", { className: "o-table-body-row" },
-                React.createElement(LoadingRowComponent, null))));
+                React.createElement(LoadingRowComponent, { ...props }))));
     }
     return (React.createElement("div", { className: rowContainerClassName },
         React.createElement("div", { className: rowClassName, onMouseEnter: highlightRow ? () => setHover(true) : undefined, onMouseLeave: highlightRow ? () => setHover(false) : undefined, style: { display: 'flex' } }, columns.map((column, colIndex) => {
@@ -8992,16 +9080,19 @@ const TableNotFoundComponent = ({ text = 'No data' }) => {
 const TableBodyComponent = ({ className, tableRef, contentRef }) => {
     const service = useTableService();
     const state = useTableState();
-    const { autoRefresh, follow, height, increment, onRowClick, onRowEnter, onRowLeave, paddingEnd, paddingStart, parentRef, preload, RowComponent = TableBodyRowComponent, rowClassName, LoadingComponent = TableLoadingComponent$1, NotFoundComponent = TableNotFoundComponent, tail, } = useTableConfig();
-    const itemHeight = React.useCallback(() => {
-        return 20;
+    const { autoRefresh, follow, height, itemHeight, increment, onRowClick, onRowEnter, onRowLeave, paddingEnd, paddingStart, parentRef, preload, RowComponent = TableBodyRowComponent, rowClassName, LoadingComponent = TableLoadingComponent$1, NotFoundComponent = TableNotFoundComponent, LoadingRowComponent = TableLoadingRowComponent$1, tail, } = useTableConfig();
+    const itemHeightFunction = React.useCallback((index) => {
+        if (typeof itemHeight === 'function') {
+            return itemHeight(index);
+        }
+        return itemHeight || 37;
     }, []);
     const { items, isVirtual, totalSize, virtualItems, measure, scrollToIndex } = useListView({
         controller: service,
         height: height,
         ref: parentRef || tableRef,
         overscan: 10,
-        itemHeight,
+        itemHeight: itemHeightFunction,
         paddingEnd,
         paddingStart,
         preload,
@@ -9022,7 +9113,7 @@ const TableBodyComponent = ({ className, tableRef, contentRef }) => {
     if (service.status === onekijsFramework.LoadingStatus.Loaded && items.length === 0 && NotFoundComponent) {
         return React.createElement(NotFoundComponent, null);
     }
-    return (React.createElement(ListBodyComponent, { autoRefresh: autoRefresh, className: addClassname('o-table-body', className), follow: follow, height: height, ItemComponent: ItemComponentRef.current, items: items, onItemSelect: onRowClick, onItemHighlight: onRowEnter, onItemUnhighlight: onRowLeave, parentRef: parentRef || tableRef, bodyRef: contentRef, service: service, state: state, totalSize: totalSize, tail: tail, virtualItems: isVirtual ? virtualItems : undefined, scrollToIndex: scrollToIndex }));
+    return (React.createElement(ListBodyComponent, { autoRefresh: autoRefresh, className: addClassname('o-table-body', className), follow: follow, height: height, ItemComponent: ItemComponentRef.current, ItemLoadingComponent: LoadingRowComponent, items: items, onItemSelect: onRowClick, onItemHighlight: onRowEnter, onItemUnhighlight: onRowLeave, parentRef: parentRef || tableRef, bodyRef: contentRef, service: service, state: state, totalSize: totalSize, tail: tail, virtualItems: isVirtual ? virtualItems : undefined, scrollToIndex: scrollToIndex }));
 };
 TableBodyComponent.displayName = 'TableBody';
 
@@ -9146,6 +9237,18 @@ const tableStyle = ({ theme, fit = true }) => {
       ${() => (fit ? 'flex-grow: 1;' : '')}
     }
 
+    .o-table-actions {
+      ${display('flex')}
+    }
+
+    .o-table-action {
+      ${flexGrow(1)}
+    }
+
+    .o-table-refresh {
+      ${marginBottom('sm')}
+      ${marginRight('xl')}
+    }
 
     .o-table-not-found {
       ${display('flex')}
@@ -9167,6 +9270,7 @@ const tableStyle = ({ theme, fit = true }) => {
       ${borderBottomStyle(t.tdBorderBottomStyle)}
     }
     .o-table-body-row-expanded {
+      ${fontSize('default')}
       .o-table-body-row {
         ${backgroundColor(t.tdExpandedBgColor)}
       }
@@ -9368,6 +9472,7 @@ const tableStyle = ({ theme, fit = true }) => {
 
 
     &.o-form-table {
+      ${flexGrow(1)}
       ${boxShadow('none')}
       ${paddingRight('none')}
       .o-table-body-row:hover {
@@ -9602,7 +9707,7 @@ const ExpandedCellComponent = ({ item, className }) => {
         React.createElement(TogglerIcon, { open: item.expanded, model: "plus", color: "primary" })));
 };
 
-const ControllerTableComponent = ({ autoRefresh, controller, className, bodyClassName, BodyComponent = TableBodyComponent, ExpandedComponent, filterable, fit, fixHeader = true, follow, grow, FooterComponent = TableFooterComponent, footerClassName, header = true, headerClassName, HeaderComponent = TableHeaderComponent, increment, LoadingComponent, LoadingRowComponent, NotFoundComponent, footer = false, height, highlightRow, onRowClick, onRowEnter, onRowLeave, onRowOver, onRowOut, paddingEnd, paddingStart, parentRef, preload, rowClassName, RowComponent, sortable, stripRows, tail, }) => {
+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 classNames = addClassname('o-table', className);
     const { columns, items } = controller.state;
     const contentRef = React.useRef(null);
@@ -9610,6 +9715,7 @@ const ControllerTableComponent = ({ autoRefresh, controller, className, bodyClas
     const service = controller.asService();
     const config = React.useMemo(() => {
         return {
+            ActionComponent,
             autoRefresh,
             bodyClassName,
             BodyComponent,
@@ -9629,6 +9735,7 @@ const ControllerTableComponent = ({ autoRefresh, controller, className, bodyClas
             height,
             highlightRow,
             increment,
+            itemHeight,
             LoadingComponent,
             LoadingRowComponent,
             NotFoundComponent,
@@ -9641,13 +9748,16 @@ const ControllerTableComponent = ({ autoRefresh, controller, className, bodyClas
             paddingStart,
             parentRef,
             preload,
+            refreshButtonKind,
             rowClassName,
             RowComponent,
+            showRefreshButton,
             sortable,
             stripRows,
-            tail
+            tail,
         };
     }, [
+        ActionComponent,
         autoRefresh,
         bodyClassName,
         BodyComponent,
@@ -9667,6 +9777,7 @@ const ControllerTableComponent = ({ autoRefresh, controller, className, bodyClas
         height,
         highlightRow,
         increment,
+        itemHeight,
         LoadingComponent,
         LoadingRowComponent,
         NotFoundComponent,
@@ -9679,8 +9790,10 @@ const ControllerTableComponent = ({ autoRefresh, controller, className, bodyClas
         paddingStart,
         parentRef,
         preload,
+        refreshButtonKind,
         rowClassName,
         RowComponent,
+        showRefreshButton,
         sortable,
         stripRows,
         tail,
@@ -9701,16 +9814,19 @@ const ControllerTableComponent = ({ autoRefresh, controller, className, bodyClas
             }
         }
     }, [service, ExpandedComponent]);
+    const id = React.useId();
     return (React.createElement(TableServiceContext.Provider, { value: controller.asService() },
         React.createElement(TableStateContext.Provider, { value: controller.state },
             React.createElement(TableConfigContext.Provider, { value: config },
-                React.createElement("div", { 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 }))))));
+                React.createElement("div", { className: className },
+                    React.createElement(ActionComponent, 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 })))))));
 };
 ControllerTableComponent.displayName = 'Table';
 
@@ -11520,15 +11636,21 @@ const baseTheme = (customTheme = {}) => {
             borderColor: kind,
             borderColorFlat: 'transparent',
             borderColorOutline: kind,
-            borderRadius: 'sm',
+            borderRadiusMedium: 'sm',
+            borderRadiusSmall: 'sm',
+            borderRadiusLarge: 'sm',
             borderStyle: 'solid',
-            borderWidth: 1,
+            borderWidthSmall: 1,
+            borderWidthMedium: 1,
+            borderWidthLarge: 1,
             color: ['light', 'lightest', 'lighter', 'white'].includes(kind) ? 'darker' : 'white',
             colorFlat: kind,
             colorOutline: ['light', 'lightest', 'lighter', 'white'].includes(kind) ? 'darkest' : kind,
             cursor: 'pointer',
             cursorDisabled: 'not-allowed',
-            fontSize: 'md',
+            fontSizeMedium: 'md',
+            fontSizeSmall: 'sm',
+            fontSizeLarge: 'lg',
             fontWeight: 'bold',
             hoverColor: ['light', 'lightest', 'lighter', 'white'].includes(kind) ? 'black' : 'white',
             hoverColorFlat: lighten(onekijsFramework.get(theme.colors, kind, ''), 100),
@@ -11539,12 +11661,20 @@ const baseTheme = (customTheme = {}) => {
             hoverBorderColor: darken(onekijsFramework.get(theme.colors, kind, ''), 100),
             hoverBorderColorFlat: 'transparent',
             hoverBorderColorOutline: kind,
-            letterSpacing: 'normal',
-            lineHeight: '3xl',
+            letterSpacingMedium: 'normal',
+            letterSpacingSmall: 'normal',
+            letterSpacingLarge: 'normal',
+            lineHeightMedium: '3xl',
+            lineHeightSmall: '2xl',
+            lineHeightLarge: '4xl',
             opacity: 1,
             opacityDisabled: 0.6,
-            paddingY: 'none',
-            paddingX: 'lg',
+            paddingYMedium: 'none',
+            paddingYSmall: 'none',
+            paddingYLarge: 'none',
+            paddingXMedium: 'lg',
+            paddingXSmall: 'md',
+            paddingXLarge: 'xl',
             textOverflow: 'ellipsis',
             textTransform: 'none',
             whiteSpace: 'nowrap',