@rio-cloud/rio-uikit 0.16.4-beta.8 → 1.0.0

package/lib/es/components/table/TableSettingsDialogFooter.js

@@ -3,40 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TableSettingsDialogFooter = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = tslib_1.__importDefault(require("react"));
-const prop_types_1 = tslib_1.__importDefault(require("prop-types"));
+// @ts-ignore-next-line importsNotUsedAsValues
+require("react");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const TableSettingsDialogFooter = props => {
-    const { hasChanged, isResetAll, immediateChange, resetButtonText, onHide, closeButtonText, cancelButtonText, applyButtonText, onResetColumnChanges, onConfirmResetColumnChanges, onCancelResetColumnChanges, onDiscardChanges, onApplyChanges, } = props;
+const Button_1 = tslib_1.__importDefault(require("../../Button"));
+const TableSettingsDialogFooter = (props) => {
+    const { hasChanged, isResetAll, immediateChange, resetButtonText, closeButtonText, cancelButtonText, applyButtonText, onHide, onResetColumnChanges, onDiscardChanges, onApplyChanges, onConfirmResetColumnChanges, onCancelResetColumnChanges, } = props;
     const restButtonClassNames = (0, classnames_1.default)('btn', 'btn-link', !hasChanged && 'disabled');
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'pull-left' }, { children: [!isResetAll && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: restButtonClassNames, onClick: onResetColumnChanges }, { children: [(0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-revert text-size-xs margin-right-10' }), resetButtonText] }))), isResetAll && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'btn-group' }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'btn btn-icon-only btn-default margin-right-5 btn-outline', onClick: onCancelResetColumnChanges }, { children: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-remove' }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'btn btn-primary btn-icon-only', onClick: onConfirmResetColumnChanges }, { children: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-ok' }) }))] })))] })), immediateChange ? ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'pull-right' }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'btn btn-default', onClick: onHide }, { children: closeButtonText })) }))) : ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'btn-toolbar pull-right' }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'btn btn-default', onClick: onDiscardChanges }, { children: cancelButtonText })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'btn btn-primary', onClick: onApplyChanges }, { children: applyButtonText }))] })))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'display-flex justify-content-between' }, { children: [(0, jsx_runtime_1.jsxs)("div", { children: [!isResetAll && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: restButtonClassNames, onClick: onResetColumnChanges }, { children: [(0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-revert text-size-xs margin-right-10' }), resetButtonText] }))), isResetAll && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'btn-group' }, { children: [(0, jsx_runtime_1.jsx)(Button_1.default, { iconOnly: true, iconName: 'rioglyph-remove', className: 'margin-right-5 btn-outline', onClick: onCancelResetColumnChanges }), (0, jsx_runtime_1.jsx)(Button_1.default, { iconOnly: true, bsStyle: Button_1.default.PRIMARY, iconName: 'rioglyph-ok', onClick: onConfirmResetColumnChanges })] })))] }), immediateChange ? ((0, jsx_runtime_1.jsx)(Button_1.default, Object.assign({ onClick: onHide }, { children: closeButtonText }))) : ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'btn-toolbar' }, { children: [(0, jsx_runtime_1.jsx)(Button_1.default, Object.assign({ onClick: onDiscardChanges }, { children: cancelButtonText })), (0, jsx_runtime_1.jsx)(Button_1.default, Object.assign({ bsStyle: Button_1.default.PRIMARY, onClick: onApplyChanges }, { children: applyButtonText }))] })))] })));
 };
 exports.TableSettingsDialogFooter = TableSettingsDialogFooter;
-exports.TableSettingsDialogFooter.defaultProps = {
-    hasChanged: false,
-    isResetAll: false,
-    immediateChange: false,
-    resetButtonText: '',
-    closeButtonText: '',
-    cancelButtonText: '',
-    applyButtonText: '',
-    onHide: () => undefined,
-    onResetColumnChanges: () => undefined,
-    onDiscardChanges: () => undefined,
-    onApplyChanges: () => undefined,
-};
-exports.TableSettingsDialogFooter.propTypes = {
-    hasChanged: prop_types_1.default.bool,
-    isResetAll: prop_types_1.default.bool,
-    immediateChange: prop_types_1.default.bool,
-    resetButtonText: prop_types_1.default.node,
-    closeButtonText: prop_types_1.default.node,
-    cancelButtonText: prop_types_1.default.node,
-    applyButtonText: prop_types_1.default.node,
-    onHide: prop_types_1.default.func,
-    onResetColumnChanges: prop_types_1.default.func,
-    onDiscardChanges: prop_types_1.default.func,
-    onApplyChanges: prop_types_1.default.func,
-    onConfirmResetColumnChanges: prop_types_1.default.func,
-    onCancelResetColumnChanges: prop_types_1.default.func,
-};

package/lib/es/components/table/TableSettingsListContainer.d.ts

@@ -1,9 +1,8 @@
-export function TableSettingsListContainer(props: any): import("react/jsx-runtime").JSX.Element;
-export namespace TableSettingsListContainer {
-    namespace propTypes {
-        const items: PropTypes.Requireable<(string | null | undefined)[]>;
-        const onSortEnd: PropTypes.Requireable<(...args: any[]) => any>;
-        const itemProps: PropTypes.Requireable<object>;
-    }
-}
-import PropTypes from "prop-types";
+import { type DragEndEvent } from '@dnd-kit/core';
+import type { TableSettingsItemProps } from './TableSettingsDialog.types';
+export type TableSettingsListContainerProps = {
+    items: string[];
+    itemProps: TableSettingsItemProps;
+    onSortEnd: (event: DragEndEvent, previousOrder: string[]) => void;
+};
+export declare const TableSettingsListContainer: (props: TableSettingsListContainerProps) => import("react/jsx-runtime").JSX.Element;

package/lib/es/components/table/TableSettingsListContainer.js

@@ -3,33 +3,23 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TableSettingsListContainer = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-/* eslint-disable new-cap */
-/* eslint-disable no-unused-vars */
-const react_1 = tslib_1.__importStar(require("react"));
-const prop_types_1 = tslib_1.__importDefault(require("prop-types"));
+const react_1 = require("react");
 const core_1 = require("@dnd-kit/core");
 const sortable_1 = require("@dnd-kit/sortable");
 const modifiers_1 = require("@dnd-kit/modifiers");
 const TableSettingsListItem_1 = tslib_1.__importDefault(require("./TableSettingsListItem"));
-const TableSettingsListContainer = props => {
-    const { items, onSortEnd, itemProps } = props;
+const TableSettingsListContainer = (props) => {
+    const { items, itemProps, onSortEnd } = props;
     const [activeDraggedColumn, setActiveDraggedColumn] = (0, react_1.useState)(null);
-    const sensors = (0, core_1.useSensors)((0, core_1.useSensor)(core_1.PointerSensor), (0, core_1.useSensor)(core_1.KeyboardSensor, {
-        coordinateGetter: sortable_1.sortableKeyboardCoordinates,
-    }));
-    const handleDragStart = (0, react_1.useCallback)(event => {
+    const sensors = (0, core_1.useSensors)((0, core_1.useSensor)(core_1.PointerSensor), (0, core_1.useSensor)(core_1.KeyboardSensor, { coordinateGetter: sortable_1.sortableKeyboardCoordinates }));
+    const handleDragStart = (0, react_1.useCallback)((event) => {
         setActiveDraggedColumn(event.active.id);
     }, []);
-    const handleDragEnd = (0, react_1.useCallback)(event => {
+    const handleDragEnd = (event) => {
         setActiveDraggedColumn(null);
-        onSortEnd(event);
-    }, []);
+        onSortEnd(event, items);
+    };
     const activeClass = 'table-settings-item shadow-smooth-to-bottom z-index-max';
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'table-settings-items-container' }, { children: (0, jsx_runtime_1.jsx)(core_1.DndContext, Object.assign({ modifiers: [modifiers_1.restrictToVerticalAxis], onDragStart: handleDragStart, onDragEnd: handleDragEnd }, { children: (0, jsx_runtime_1.jsx)(sortable_1.SortableContext, Object.assign({ items: items, sensors: sensors, collisionDetection: core_1.closestCenter, strategy: sortable_1.rectSortingStrategy }, { children: items.map((column, index) => ((0, jsx_runtime_1.jsx)(TableSettingsListItem_1.default, Object.assign({ index: index, column: column, orderIndex: index, className: activeDraggedColumn === column ? activeClass : '' }, itemProps), column))) })) })) })));
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'table-settings-items-container' }, { children: (0, jsx_runtime_1.jsx)(core_1.DndContext, Object.assign({ sensors: sensors, collisionDetection: core_1.closestCenter, modifiers: [modifiers_1.restrictToVerticalAxis], onDragStart: handleDragStart, onDragEnd: handleDragEnd }, { children: (0, jsx_runtime_1.jsx)(sortable_1.SortableContext, Object.assign({ items: items, strategy: sortable_1.verticalListSortingStrategy }, { children: items.map((column, index) => ((0, jsx_runtime_1.jsx)(TableSettingsListItem_1.default, Object.assign({ column: column, orderIndex: index, isActive: activeDraggedColumn === column, className: activeDraggedColumn === column ? activeClass : '' }, itemProps), column))) })) })) })));
 };
 exports.TableSettingsListContainer = TableSettingsListContainer;
-exports.TableSettingsListContainer.propTypes = {
-    items: prop_types_1.default.arrayOf(prop_types_1.default.string),
-    onSortEnd: prop_types_1.default.func,
-    itemProps: prop_types_1.default.object,
-};

package/lib/es/components/table/TableSettingsListItem.d.ts

@@ -1,27 +1,10 @@
-export function filterColumns(searchValue: any, column: string | undefined, columnLabelStrings: any): boolean;
+import type { TableSettingsItemProps } from './TableSettingsDialog.types';
+export declare const filterColumns: (searchValue: string, column: string, columnLabelStrings: Record<string, string>) => boolean;
+export type TableSettingsListItemProps = TableSettingsItemProps & {
+    column: string;
+    orderIndex: number;
+    isActive: boolean;
+    className?: string;
+};
+declare const TableSettingsListItem: (props: TableSettingsListItemProps) => import("react/jsx-runtime").JSX.Element;
 export default TableSettingsListItem;
-declare function TableSettingsListItem(props: any): import("react/jsx-runtime").JSX.Element;
-declare namespace TableSettingsListItem {
-    namespace propTypes {
-        export const column: PropTypes.Requireable<string>;
-        export const orderIndex: PropTypes.Requireable<number>;
-        export const columnLabels: PropTypes.Requireable<object>;
-        export const autoLabel: PropTypes.Requireable<string>;
-        export const disabledColumns: PropTypes.Requireable<(string | null | undefined)[]>;
-        export const columnOrder: PropTypes.Requireable<(string | null | undefined)[]>;
-        export const hiddenColumns: PropTypes.Requireable<(string | null | undefined)[]>;
-        export const columnSearchValue: PropTypes.Requireable<string>;
-        export { columnsDetailsPropTypes as columnsDetails };
-        export const columnLabelStrings: PropTypes.Requireable<object>;
-        export const openColumnsDetails: PropTypes.Requireable<object>;
-        export const updateColumnLabelStrings: PropTypes.Requireable<boolean>;
-        export const onColumnWidthChange: PropTypes.Requireable<(...args: any[]) => any>;
-        export const onResetColumnWidth: PropTypes.Requireable<(...args: any[]) => any>;
-        export const onMoveColumn: PropTypes.Requireable<(...args: any[]) => any>;
-        export const onOpenDetails: PropTypes.Requireable<(...args: any[]) => any>;
-        export const onToggleHideColumn: PropTypes.Requireable<(...args: any[]) => any>;
-        export const className: PropTypes.Requireable<string>;
-    }
-}
-import PropTypes from "prop-types";
-import { columnsDetailsPropTypes } from "./tableSettingsPropTypes";

package/lib/es/components/table/TableSettingsListItem.js

@@ -4,19 +4,18 @@ exports.filterColumns = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 /* eslint-disable new-cap */
-const react_1 = tslib_1.__importDefault(require("react"));
-const prop_types_1 = tslib_1.__importDefault(require("prop-types"));
+require("react");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const sortable_1 = require("@dnd-kit/sortable");
 const utilities_1 = require("@dnd-kit/utilities");
 const isEmpty_1 = tslib_1.__importDefault(require("lodash/fp/isEmpty"));
+const noop_1 = tslib_1.__importDefault(require("lodash/noop"));
 const Checkbox_1 = tslib_1.__importDefault(require("../checkbox/Checkbox"));
 const Collapse_1 = tslib_1.__importDefault(require("../collapse/Collapse"));
 const TableSettingsColumnDetails_1 = require("./TableSettingsColumnDetails");
 const TableSettingsColumnButtons_1 = require("./TableSettingsColumnButtons");
-const tableSettingsPropTypes_1 = require("./tableSettingsPropTypes");
 const MAX_COLUMN_WIDTH = 1000;
-const filterColumns = (searchValue, column = '', columnLabelStrings) => {
+const filterColumns = (searchValue, column, columnLabelStrings) => {
     if (!searchValue) {
         return false;
     }
@@ -24,10 +23,10 @@ const filterColumns = (searchValue, column = '', columnLabelStrings) => {
     return !label.toLowerCase().includes(searchValue.toLowerCase());
 };
 exports.filterColumns = filterColumns;
-const TableSettingsListItem = props => {
-    const { column, orderIndex, columnLabels, autoLabel, disabledColumns = [], columnOrder, hiddenColumns = [], columnSearchValue, columnsDetails, columnLabelStrings, openColumnsDetails, updateColumnLabelStrings, onColumnWidthChange, onResetColumnWidth, onMoveColumn, onOpenDetails, onToggleHideColumn, className, } = props;
+const TableSettingsListItem = (props) => {
+    const { column, orderIndex, columnLabels, autoLabel, disabledColumns = [], columnOrder, hiddenColumns = [], columnSearchValue, columnsDetails, columnLabelStrings = {}, openColumnsDetails = {}, updateColumnLabelStrings, onColumnWidthChange, onResetColumnWidth, onMoveColumn, onOpenDetails, onToggleHideColumn = noop_1.default, isActive = false, className, } = props;
     const isSortingDisabled = !(0, isEmpty_1.default)(columnSearchValue);
-    const { attributes, listeners, setNodeRef, transform, transition } = (0, sortable_1.useSortable)({
+    const { attributes, listeners, setNodeRef, setActivatorNodeRef, transform, transition } = (0, sortable_1.useSortable)({
         id: column,
         disabled: isSortingDisabled,
     });
@@ -36,34 +35,14 @@ const TableSettingsListItem = props => {
         transition,
     };
     // Filter out items which don't match the search value.
-    // Note that we need to render all items at least once at the beginning in order to get their DOM lables
+    // Note that we need to render all items at least once at the beginning in order to get their DOM labels
     // otherwise the search won't work when initial search value is provided via props.
     const isFiltered = (0, exports.filterColumns)(columnSearchValue, column, columnLabelStrings) && !updateColumnLabelStrings;
     const itemClassNames = (0, classnames_1.default)('table-settings-item', updateColumnLabelStrings && 'opacity-0', isFiltered && 'position-offscreen', className);
     const columnDetails = columnsDetails[column];
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: itemClassNames, ref: setNodeRef, style: style }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'table-settings-item-header user-select-none' }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'CheckboxWrapper display-flex align-items-center padding-left-2' }, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.default, { checked: !hiddenColumns.includes(column), onClick: event => {
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: itemClassNames, ref: setNodeRef, style: style }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'table-settings-item-header user-select-none', ref: setActivatorNodeRef }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'CheckboxWrapper display-flex align-items-center padding-left-2' }, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.default, { checked: !hiddenColumns.includes(column), onClick: event => {
                                 onToggleHideColumn(column);
                                 event.stopPropagation();
-                            }, disabled: disabledColumns.includes(column) }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `table-settings-item-label ${isSortingDisabled ? 'no-drag' : ''}`, "data-key": column }, attributes, listeners, { children: columnLabels[column] })), columnDetails && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'column-width-label' }, { children: columnDetails.width ? `${columnDetails.width}px` : autoLabel }))), (0, jsx_runtime_1.jsx)(TableSettingsColumnButtons_1.TableSettingsColumnButtons, { column: column, index: orderIndex, columnDetails: columnDetails, columnOrder: columnOrder, openColumnsDetails: openColumnsDetails, disabled: isSortingDisabled, onMoveColumn: onMoveColumn, onOpenDetails: onOpenDetails })] })), columnDetails && ((0, jsx_runtime_1.jsx)(Collapse_1.default, Object.assign({ in: !!openColumnsDetails[column] }, { children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(TableSettingsColumnDetails_1.TableSettingsColumnDetails, Object.assign({}, columnDetails, { column: column, maxColumnWidth: MAX_COLUMN_WIDTH, onColumnWidthChange: onColumnWidthChange, onResetColumnWidth: onResetColumnWidth })) }) })))] }), `table-settings-item-${column}`));
-};
-TableSettingsListItem.propTypes = {
-    column: prop_types_1.default.string,
-    orderIndex: prop_types_1.default.number,
-    columnLabels: prop_types_1.default.object,
-    autoLabel: prop_types_1.default.string,
-    disabledColumns: prop_types_1.default.arrayOf(prop_types_1.default.string),
-    columnOrder: prop_types_1.default.arrayOf(prop_types_1.default.string),
-    hiddenColumns: prop_types_1.default.arrayOf(prop_types_1.default.string),
-    columnSearchValue: prop_types_1.default.string,
-    columnsDetails: tableSettingsPropTypes_1.columnsDetailsPropTypes,
-    columnLabelStrings: prop_types_1.default.object,
-    openColumnsDetails: prop_types_1.default.object,
-    updateColumnLabelStrings: prop_types_1.default.bool,
-    onColumnWidthChange: prop_types_1.default.func,
-    onResetColumnWidth: prop_types_1.default.func,
-    onMoveColumn: prop_types_1.default.func,
-    onOpenDetails: prop_types_1.default.func,
-    onToggleHideColumn: prop_types_1.default.func,
-    className: prop_types_1.default.string,
+                            }, disabled: disabledColumns.includes(column) }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `table-settings-item-label ${isSortingDisabled ? 'no-drag' : ''}`, "data-key": column }, attributes, listeners, { children: columnLabels[column] })), columnDetails && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'column-width-label' }, { children: columnDetails.width ? `${columnDetails.width}px` : autoLabel }))), (0, jsx_runtime_1.jsx)(TableSettingsColumnButtons_1.TableSettingsColumnButtons, { column: column, index: orderIndex, columnDetails: columnDetails, columnOrder: columnOrder, openColumnsDetails: openColumnsDetails, disabled: isSortingDisabled, onMoveColumn: onMoveColumn, onOpenDetails: onOpenDetails })] })), columnDetails && !isActive && ((0, jsx_runtime_1.jsx)(Collapse_1.default, Object.assign({ open: !!openColumnsDetails[column] }, { children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(TableSettingsColumnDetails_1.TableSettingsColumnDetails, Object.assign({}, columnDetails, { column: column, maxColumnWidth: MAX_COLUMN_WIDTH, onColumnWidthChange: onColumnWidthChange, onResetColumnWidth: onResetColumnWidth })) }) })))] }), `table-settings-item-${column}`));
 };
 exports.default = TableSettingsListItem;

package/lib/es/components/table/TableToolbar.d.ts

@@ -1,12 +1,9 @@
+import { type PropsWithChildren } from 'react';
+export type TableToolbarProps = {
+    /**
+     * Optional class names for the wrapper element.
+     */
+    className?: string;
+};
+declare const TableToolbar: ({ className, children }: PropsWithChildren<TableToolbarProps>) => import("react/jsx-runtime").JSX.Element;
 export default TableToolbar;
-declare function TableToolbar({ className, children }: {
-    className: any;
-    children: any;
-}): import("react/jsx-runtime").JSX.Element;
-declare namespace TableToolbar {
-    const defaultProps: {};
-    namespace propTypes {
-        const className: PropTypes.Requireable<string>;
-    }
-}
-import PropTypes from "prop-types";

package/lib/es/components/table/TableToolbar.js

@@ -2,15 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = tslib_1.__importDefault(require("react"));
-const prop_types_1 = tslib_1.__importDefault(require("prop-types"));
+// @ts-ignore-next-line importsNotUsedAsValues
+require("react");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const TableToolbar = ({ className, children }) => {
-    const wrapperClassNames = (0, classnames_1.default)('table-toolbar', className && className);
-    return (0, jsx_runtime_1.jsx)("div", Object.assign({ className: wrapperClassNames }, { children: children }));
-};
-TableToolbar.defaultProps = {};
-TableToolbar.propTypes = {
-    className: prop_types_1.default.string,
-};
+const TableToolbar = ({ className, children }) => ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: (0, classnames_1.default)('table-toolbar', className) }, { children: children })));
 exports.default = TableToolbar;

package/lib/es/components/table/TableViewToggles.d.ts

@@ -1,30 +1,58 @@
+import { type ReactNode } from 'react';
+export type TableViewTogglesViewType = 'SINGLE_CARD' | 'MULTI_CARDS' | 'TABLE';
+export type TableViewTogglesProps = {
+    /**
+     * The current viewType for controlling the TablesViewToggles component.
+     */
+    viewType?: TableViewTogglesViewType;
+    /**
+     * Defines the initial viewType (when viewType is not controlled from the outside).
+     *
+     * @default TableViewToggles.VIEW_TYPE_TABLE
+     */
+    initialViewType?: TableViewTogglesViewType;
+    /**
+     * Defines the view types which shall not be supported and are omitted.
+     *
+     * @default []
+     */
+    disabledViewTypes?: TableViewTogglesViewType[];
+    /**
+     * Callback function for when the user wants to change the viewType.
+     *
+     * @param viewType The new viewType selected by the user.
+     */
+    onViewTypeChange: (viewType: TableViewTogglesViewType) => void;
+    /**
+     * Optional tooltip content for table view button.
+     */
+    tableViewTooltipContent?: string | ReactNode;
+    /**
+     * Optional tooltip content for single card view button.
+     */
+    singleCardViewTooltipContent?: string | ReactNode;
+    /**
+     * Optional tooltip content for multi card view button.
+     */
+    multiCardsViewTooltipContent?: string | ReactNode;
+    /**
+     * Disables all buttons.
+     *
+     * This means the buttons cannot be clicked. Used when disabling toolbar buttons during loading state or when the
+     * corresponding table is empty.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Optional class names for the wrapper element.
+     */
+    className?: string;
+};
+declare const TableViewToggles: {
+    (props: TableViewTogglesProps): import("react/jsx-runtime").JSX.Element;
+    VIEW_TYPE_TABLE: TableViewTogglesViewType;
+    VIEW_TYPE_SINGLE_CARD: TableViewTogglesViewType;
+    VIEW_TYPE_MULTI_CARDS: TableViewTogglesViewType;
+};
 export default TableViewToggles;
-declare function TableViewToggles(props: any): import("react/jsx-runtime").JSX.Element;
-declare namespace TableViewToggles {
-    const VIEW_TYPE_TABLE: string;
-    const VIEW_TYPE_SINGLE_CARD: string;
-    const VIEW_TYPE_MULTI_CARDS: string;
-    namespace defaultProps {
-        import initialViewType = TableViewToggles.VIEW_TYPE_TABLE;
-        export { initialViewType };
-        export function onViewTypeChange(): void;
-        export const disabledViewTypes: never[];
-        export const disabled: boolean;
-    }
-    namespace propTypes {
-        export const viewType: PropTypes.Requireable<string>;
-        const initialViewType_1: PropTypes.Requireable<string>;
-        export { initialViewType_1 as initialViewType };
-        const disabledViewTypes_1: PropTypes.Requireable<(string | null | undefined)[]>;
-        export { disabledViewTypes_1 as disabledViewTypes };
-        const onViewTypeChange_1: PropTypes.Requireable<(...args: any[]) => any>;
-        export { onViewTypeChange_1 as onViewTypeChange };
-        const disabled_1: PropTypes.Requireable<boolean>;
-        export { disabled_1 as disabled };
-        export const className: PropTypes.Requireable<string>;
-        export const tableViewTooltipContent: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-        export const singleCardViewTooltipContent: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-        export const multiCardsViewTooltipContent: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-    }
-}
-import PropTypes from "prop-types";

package/lib/es/components/table/TableViewToggles.js

@@ -2,84 +2,45 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = tslib_1.__importStar(require("react"));
-const prop_types_1 = tslib_1.__importDefault(require("prop-types"));
+const react_1 = require("react");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const noop_1 = tslib_1.__importDefault(require("lodash/noop"));
 const OverlayTrigger_1 = tslib_1.__importDefault(require("../overlay/OverlayTrigger"));
 const Tooltip_1 = tslib_1.__importDefault(require("../tooltip/Tooltip"));
 // TODO: add responsive behaviour and trigger a change from table to list for small screen -> see DriverAdministration
 const wrapWithTooltip = (tooltipContent, element) => ((0, jsx_runtime_1.jsx)(OverlayTrigger_1.default, Object.assign({ placement: 'bottom', overlay: (0, jsx_runtime_1.jsx)(Tooltip_1.default, Object.assign({ id: 'tooltip', allowOnTouch: true }, { children: tooltipContent })) }, { children: element })));
-const TableViewToggles = props => {
-    const { viewType, initialViewType, onViewTypeChange, className, disabledViewTypes, disabled, tableViewTooltipContent, singleCardViewTooltipContent, multiCardsViewTooltipContent } = props, remainingProps = tslib_1.__rest(props, ["viewType", "initialViewType", "onViewTypeChange", "className", "disabledViewTypes", "disabled", "tableViewTooltipContent", "singleCardViewTooltipContent", "multiCardsViewTooltipContent"]);
-    const [internaViewType, setInternalViewType] = (0, react_1.useState)(initialViewType);
+const typeIcons = {
+    TABLE: 'rioglyph-table-view',
+    SINGLE_CARD: 'rioglyph-th-list',
+    MULTI_CARDS: 'rioglyph-split-view',
+};
+const TypeButton = (props) => {
+    const { viewType, currentViewType, disabledViewTypes, tooltipContent, onClick, disabled } = props;
+    if (disabledViewTypes.includes(viewType)) {
+        return null;
+    }
+    const classes = (0, classnames_1.default)('btn btn-default btn-icon-only', disabled && 'disabled pointer-events-none', viewType === currentViewType && 'active');
+    const button = ((0, jsx_runtime_1.jsx)("button", Object.assign({ className: classes, type: 'button', onClick: () => onClick(viewType) }, { children: (0, jsx_runtime_1.jsx)("span", { className: `rioglyph ${typeIcons[viewType]}` }) })));
+    return tooltipContent ? wrapWithTooltip(tooltipContent, button) : button;
+};
+const TableViewToggles = (props) => {
+    const { viewType, initialViewType = 'TABLE', disabledViewTypes = [], onViewTypeChange = noop_1.default, tableViewTooltipContent, singleCardViewTooltipContent, multiCardsViewTooltipContent, disabled = false, className } = props, remainingProps = tslib_1.__rest(props, ["viewType", "initialViewType", "disabledViewTypes", "onViewTypeChange", "tableViewTooltipContent", "singleCardViewTooltipContent", "multiCardsViewTooltipContent", "disabled", "className"]);
+    const [internalViewType, setInternalViewType] = (0, react_1.useState)(initialViewType);
     // update internal state when external state changes - controlled component case
     (0, react_1.useEffect)(() => {
         if (viewType) {
             setInternalViewType(viewType);
         }
     }, [viewType]);
-    const handleSetTableView = () => {
-        setInternalViewType(TableViewToggles.VIEW_TYPE_TABLE);
-        onViewTypeChange(TableViewToggles.VIEW_TYPE_TABLE);
-    };
-    const handleSetSingleCardsView = () => {
-        setInternalViewType(TableViewToggles.VIEW_TYPE_SINGLE_CARD);
-        onViewTypeChange(TableViewToggles.VIEW_TYPE_SINGLE_CARD);
-    };
-    const handleSetMultiCardsView = () => {
-        setInternalViewType(TableViewToggles.VIEW_TYPE_MULTI_CARDS);
-        onViewTypeChange(TableViewToggles.VIEW_TYPE_MULTI_CARDS);
+    const setViewType = (vt) => {
+        setInternalViewType(vt);
+        onViewTypeChange(vt);
     };
     const wrapperClassNames = (0, classnames_1.default)('TableViewToggles', 'btn-group', 'display-flex', 'flex-row', className && className);
-    const buttonClassNames = (0, classnames_1.default)('btn btn-default btn-icon-only', disabled && 'disabled pointer-events-none');
-    const tableViewActiveClasses = (0, classnames_1.default)(buttonClassNames, internaViewType === TableViewToggles.VIEW_TYPE_TABLE && 'active');
-    const cardViewActiveClasses = (0, classnames_1.default)(buttonClassNames, internaViewType === TableViewToggles.VIEW_TYPE_SINGLE_CARD && 'active');
-    const multiCardsViewActiveClasses = (0, classnames_1.default)(buttonClassNames, internaViewType === TableViewToggles.VIEW_TYPE_MULTI_CARDS && 'active');
-    const tableViewButton = ((0, jsx_runtime_1.jsx)("button", Object.assign({ className: tableViewActiveClasses, type: 'button', onClick: handleSetTableView }, { children: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-table-view' }) })));
-    const singleCardViewButton = ((0, jsx_runtime_1.jsx)("button", Object.assign({ className: cardViewActiveClasses, type: 'button', onClick: handleSetSingleCardsView }, { children: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-th-list' }) })));
-    const multiCardViewButton = ((0, jsx_runtime_1.jsx)("button", Object.assign({ className: multiCardsViewActiveClasses, type: 'button', onClick: handleSetMultiCardsView }, { children: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-split-view' }) })));
-    const showTableViewButton = !disabledViewTypes.includes(TableViewToggles.VIEW_TYPE_TABLE);
-    const showSingleCardViewButton = !disabledViewTypes.includes(TableViewToggles.VIEW_TYPE_SINGLE_CARD);
-    const showMultiCardViewButton = !disabledViewTypes.includes(TableViewToggles.VIEW_TYPE_MULTI_CARDS);
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, remainingProps, { className: wrapperClassNames }, { children: [showTableViewButton &&
-                (tableViewTooltipContent ? wrapWithTooltip(tableViewTooltipContent, tableViewButton) : tableViewButton), showSingleCardViewButton &&
-                (singleCardViewTooltipContent
-                    ? wrapWithTooltip(singleCardViewTooltipContent, singleCardViewButton)
-                    : singleCardViewButton), showMultiCardViewButton &&
-                (multiCardsViewTooltipContent
-                    ? wrapWithTooltip(multiCardsViewTooltipContent, multiCardViewButton)
-                    : multiCardViewButton)] })));
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, remainingProps, { className: wrapperClassNames }, { children: [(0, jsx_runtime_1.jsx)(TypeButton, { viewType: 'TABLE', currentViewType: internalViewType, disabledViewTypes: disabledViewTypes, tooltipContent: tableViewTooltipContent, onClick: setViewType, disabled: disabled }), (0, jsx_runtime_1.jsx)(TypeButton, { viewType: 'SINGLE_CARD', currentViewType: internalViewType, disabledViewTypes: disabledViewTypes, tooltipContent: singleCardViewTooltipContent, onClick: setViewType, disabled: disabled }), (0, jsx_runtime_1.jsx)(TypeButton, { viewType: 'MULTI_CARDS', currentViewType: internalViewType, disabledViewTypes: disabledViewTypes, tooltipContent: multiCardsViewTooltipContent, onClick: setViewType, disabled: disabled })] })));
 };
+// Don't export values as string but as a distinct union type
 TableViewToggles.VIEW_TYPE_TABLE = 'TABLE';
 TableViewToggles.VIEW_TYPE_SINGLE_CARD = 'SINGLE_CARD';
 TableViewToggles.VIEW_TYPE_MULTI_CARDS = 'MULTI_CARDS';
-TableViewToggles.defaultProps = {
-    initialViewType: TableViewToggles.VIEW_TYPE_TABLE,
-    onViewTypeChange: () => { },
-    disabledViewTypes: [],
-    disabled: false,
-};
-TableViewToggles.propTypes = {
-    viewType: prop_types_1.default.oneOf([
-        TableViewToggles.VIEW_TYPE_TABLE,
-        TableViewToggles.VIEW_TYPE_SINGLE_CARD,
-        TableViewToggles.VIEW_TYPE_MULTI_CARDS,
-    ]),
-    initialViewType: prop_types_1.default.oneOf([
-        TableViewToggles.VIEW_TYPE_TABLE,
-        TableViewToggles.VIEW_TYPE_SINGLE_CARD,
-        TableViewToggles.VIEW_TYPE_MULTI_CARDS,
-    ]),
-    disabledViewTypes: prop_types_1.default.arrayOf(prop_types_1.default.oneOf([
-        TableViewToggles.VIEW_TYPE_TABLE,
-        TableViewToggles.VIEW_TYPE_SINGLE_CARD,
-        TableViewToggles.VIEW_TYPE_MULTI_CARDS,
-    ])),
-    onViewTypeChange: prop_types_1.default.func,
-    disabled: prop_types_1.default.bool,
-    className: prop_types_1.default.string,
-    tableViewTooltipContent: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.node]),
-    singleCardViewTooltipContent: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.node]),
-    multiCardsViewTooltipContent: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.node]),
-};
 exports.default = TableViewToggles;

package/lib/es/components/tag/Tag.d.ts

@@ -1,37 +1,69 @@
+import { type PropsWithChildren } from 'react';
+export type TagProps = {
+    /**
+     * Defines if the tag is active.
+     *
+     * @default false
+     */
+    active?: boolean;
+    /**
+     * Defines if the tag is clickable.
+     *
+     * @default false
+     */
+    clickable?: boolean;
+    /**
+     * Defines if the tag is deletable.
+     *
+     * @default false
+     */
+    deletable?: boolean;
+    /**
+     * Defines if the tag is revertable.
+     *
+     * @default false
+     */
+    revertable?: boolean;
+    /**
+     * Defines if the tag is disabled.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Define any rioglyph icon like "rioglyph-truck".
+     */
+    icon?: string;
+    /**
+     * Sets a more subtle style for border and background.
+     *
+     * @default false
+     */
+    muted?: boolean;
+    /**
+     * Defines if the tag is round.
+     *
+     * @default true
+     */
+    round?: boolean;
+    /**
+     * Defines if the tag is selectable.
+     *
+     * @default false
+     */
+    selectable?: boolean;
+    /**
+     * Defines if you want to render the tag in a different size.
+     *
+     * Possible values are: 'small' and 'medium'
+     */
+    size?: 'small' | 'medium';
+    multiline?: boolean;
+    [remainingProp: string]: unknown;
+    /**
+     * Additional classes to be set on the wrapper element.
+     */
+    className?: string;
+};
+declare const Tag: (props: PropsWithChildren<TagProps>) => import("react/jsx-runtime").JSX.Element;
 export default Tag;
-declare function Tag(props: any): import("react/jsx-runtime").JSX.Element;
-declare namespace Tag {
-    namespace defaultProps {
-        const active: boolean;
-        const clickable: boolean;
-        const deletable: boolean;
-        const revertable: boolean;
-        const disabled: boolean;
-        const muted: boolean;
-        const round: boolean;
-        const selectable: boolean;
-    }
-    namespace propTypes {
-        const active_1: PropTypes.Requireable<boolean>;
-        export { active_1 as active };
-        export const className: PropTypes.Requireable<string>;
-        const clickable_1: PropTypes.Requireable<boolean>;
-        export { clickable_1 as clickable };
-        const deletable_1: PropTypes.Requireable<boolean>;
-        export { deletable_1 as deletable };
-        const revertable_1: PropTypes.Requireable<boolean>;
-        export { revertable_1 as revertable };
-        const disabled_1: PropTypes.Requireable<boolean>;
-        export { disabled_1 as disabled };
-        export const icon: PropTypes.Requireable<string>;
-        const muted_1: PropTypes.Requireable<boolean>;
-        export { muted_1 as muted };
-        export const multiline: PropTypes.Requireable<boolean>;
-        const round_1: PropTypes.Requireable<boolean>;
-        export { round_1 as round };
-        const selectable_1: PropTypes.Requireable<boolean>;
-        export { selectable_1 as selectable };
-        export const size: PropTypes.Requireable<string>;
-    }
-}
-import PropTypes from "prop-types";

package/lib/es/components/tag/Tag.js

@@ -2,36 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = tslib_1.__importDefault(require("react"));
-const prop_types_1 = tslib_1.__importDefault(require("prop-types"));
+// @ts-ignore-next-line importsNotUsedAsValues
+require("react");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const Tag = props => {
-    const { children, icon, active, disabled, clickable, selectable, deletable, revertable, multiline, muted, round } = props, remainingProps = tslib_1.__rest(props, ["children", "icon", "active", "disabled", "clickable", "selectable", "deletable", "revertable", "multiline", "muted", "round"]);
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, remainingProps, { className: (0, classnames_1.default)('tag', props.size === 'small' && 'tag-small', icon && `rioglyph ${icon}`, active && 'active clickable rioglyph rioglyph-ok', disabled && 'disabled', clickable && 'clickable', selectable && 'selectable clickable rioglyph rioglyph-checkbox', deletable && 'deletable clickable rioglyph rioglyph-remove', revertable && 'revertable clickable rioglyph rioglyph-revert', multiline && 'multiline', muted && 'tag-muted', !round && 'rounded', // sounds wrong, but is right
-        props.className) }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'tag-inner' }, { children: children })) })));
-};
-Tag.defaultProps = {
-    active: false,
-    clickable: false,
-    deletable: false,
-    revertable: false,
-    disabled: false,
-    muted: false,
-    round: true,
-    selectable: false,
-};
-Tag.propTypes = {
-    active: prop_types_1.default.bool,
-    className: prop_types_1.default.string,
-    clickable: prop_types_1.default.bool,
-    deletable: prop_types_1.default.bool,
-    revertable: prop_types_1.default.bool,
-    disabled: prop_types_1.default.bool,
-    icon: prop_types_1.default.string,
-    muted: prop_types_1.default.bool,
-    multiline: prop_types_1.default.bool,
-    round: prop_types_1.default.bool,
-    selectable: prop_types_1.default.bool,
-    size: prop_types_1.default.oneOf(['small']),
+const Tag = (props) => {
+    const { children, icon, active = false, disabled = false, clickable = false, selectable = false, deletable = false, revertable = false, multiline = false, muted = false, round = true, size, className } = props, remainingProps = tslib_1.__rest(props, ["children", "icon", "active", "disabled", "clickable", "selectable", "deletable", "revertable", "multiline", "muted", "round", "size", "className"]);
+    const tagClasses = (0, classnames_1.default)('tag', size === 'small' && 'tag-small', icon && `rioglyph ${icon}`, active && 'active clickable rioglyph rioglyph-ok', disabled && 'disabled', clickable && 'clickable', selectable && 'selectable clickable rioglyph rioglyph-checkbox', deletable && 'deletable clickable rioglyph rioglyph-remove', revertable && 'revertable clickable rioglyph rioglyph-revert', multiline && 'multiline', muted && 'tag-muted', !round && 'rounded', // sounds wrong, but is right
+    props.className);
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, remainingProps, { className: tagClasses }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'tag-inner' }, { children: children })) })));
 };
 exports.default = Tag;