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

package/components/states/MaintenanceState.js

@@ -1,10 +1,10 @@
+import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
+// @ts-ignore-next-line importsNotUsedAsValues
+import 'react';
 import CustomState from './CustomState';
-import { baseStatePropTypes } from './baseStatePropTypes';
-const MaintenanceState = props => _jsx(CustomState, Object.assign({}, props));
-MaintenanceState.defaultProps = {
-    icon: 'rioglyph-wrench',
+const MaintenanceState = (props) => {
+    const { icon = 'rioglyph-wrench' } = props, remainingProps = __rest(props, ["icon"]);
+    return _jsx(CustomState, Object.assign({ icon: icon }, remainingProps));
 };
-MaintenanceState.propTypes = baseStatePropTypes;
 export default MaintenanceState;

package/components/states/NotBookedState.d.ts

@@ -1,20 +1,10 @@
+import React, { type PropsWithChildren } from 'react';
+import type { BaseStateProps } from './BaseStateProps';
+export type NotBookedStateProps = BaseStateProps & {
+    /**
+     * List of features.
+     */
+    features?: string | React.ReactNode[];
+};
+declare const NotBookedState: (props: PropsWithChildren<NotBookedStateProps>) => import("react/jsx-runtime").JSX.Element;
 export default NotBookedState;
-declare function NotBookedState(props: any): import("react/jsx-runtime").JSX.Element;
-declare namespace NotBookedState {
-    namespace defaultProps {
-        const icon: string;
-    }
-    namespace propTypes {
-        const headline: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-        const message: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-        const features: PropTypes.Requireable<(NonNullable<PropTypes.ReactNodeLike> | null | undefined)[]>;
-        const buttons: PropTypes.Requireable<(PropTypes.InferProps<{
-            text: PropTypes.Validator<NonNullable<NonNullable<PropTypes.ReactNodeLike>>>;
-            className: PropTypes.Requireable<string>;
-            onClick: PropTypes.Requireable<(...args: any[]) => any>;
-            href: PropTypes.Requireable<string>;
-        }> | null | undefined)[]>;
-        const condensed: PropTypes.Requireable<boolean>;
-    }
-}
-import PropTypes from "prop-types";

package/components/states/NotBookedState.js

@@ -1,28 +1,13 @@
 import { __rest } from "tslib";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
-import CustomState from './CustomState';
-import PropTypes from 'prop-types';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+// @ts-ignore-next-line importsNotUsedAsValues
+import 'react';
 import isArray from 'lodash/fp/isArray';
 import isEmpty from 'lodash/fp/isEmpty';
-const NotBookedState = props => {
-    const { message, features } = props, remainingProps = __rest(props, ["message", "features"]);
-    const combinedMessages = (_jsxs(React.Fragment, { children: [message && _jsx("div", Object.assign({ className: 'text-medium margin-bottom-20' }, { children: message })), features && isArray(features) && !isEmpty(features) && (_jsx("ul", Object.assign({ className: 'feature-list' }, { children: features.map((feature, index) => (_jsx("li", { children: feature }, index))) })))] }));
-    return _jsx(CustomState, Object.assign({ message: combinedMessages }, remainingProps));
-};
-NotBookedState.defaultProps = {
-    icon: 'rioglyph-stars',
-};
-NotBookedState.propTypes = {
-    headline: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-    message: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-    features: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.node])),
-    buttons: PropTypes.arrayOf(PropTypes.shape({
-        text: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
-        className: PropTypes.string,
-        onClick: PropTypes.func,
-        href: PropTypes.string,
-    })),
-    condensed: PropTypes.bool,
+import CustomState from './CustomState';
+const NotBookedState = (props) => {
+    const { message, features, icon = 'rioglyph-stars' } = props, remainingProps = __rest(props, ["message", "features", "icon"]);
+    const combinedMessages = (_jsxs(_Fragment, { children: [message && _jsx("div", Object.assign({ className: 'text-medium margin-bottom-20' }, { children: message })), features && isArray(features) && !isEmpty(features) && (_jsx("ul", Object.assign({ className: 'feature-list' }, { children: features.map((feature, index) => (_jsx("li", { children: feature }, index))) })))] }));
+    return _jsx(CustomState, Object.assign({ message: combinedMessages, icon: icon }, remainingProps));
 };
 export default NotBookedState;

package/components/states/NotFoundState.d.ts

@@ -1,9 +1,5 @@
+import { type PropsWithChildren } from 'react';
+import type { BaseStateProps } from './BaseStateProps';
+export type NotFoundStateProps = BaseStateProps;
+declare const NotFoundState: (props: PropsWithChildren<NotFoundStateProps>) => import("react/jsx-runtime").JSX.Element;
 export default NotFoundState;
-declare function NotFoundState(props: any): import("react/jsx-runtime").JSX.Element;
-declare namespace NotFoundState {
-    export namespace defaultProps {
-        const icon: string;
-    }
-    export { baseStatePropTypes as propTypes };
-}
-import { baseStatePropTypes } from "./baseStatePropTypes";

package/components/states/NotFoundState.js

@@ -1,10 +1,10 @@
+import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
+// @ts-ignore-next-line importsNotUsedAsValues
+import 'react';
 import CustomState from './CustomState';
-import { baseStatePropTypes } from './baseStatePropTypes';
-const NotFoundState = props => _jsx(CustomState, Object.assign({}, props));
-NotFoundState.defaultProps = {
-    icon: 'rioglyph-looking-glass-man',
+const NotFoundState = (props) => {
+    const { icon = 'rioglyph-looking-glass-man' } = props, remainingProps = __rest(props, ["icon"]);
+    return _jsx(CustomState, Object.assign({ icon: icon }, remainingProps));
 };
-NotFoundState.propTypes = baseStatePropTypes;
 export default NotFoundState;

package/components/states/StateButton.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+export type StateButtonProps = {
+    /**
+     * The button text.
+     *
+     * This can also be a node with an icon to be shown on the button.
+     */
+    text: string | React.ReactNode;
+    /**
+     * Callback fired after the component starts to collapse.
+     *
+     * @default () => {}
+     */
+    onClick?: VoidFunction;
+    /**
+     * Instead of a callback for the button you can specify a "href".
+     *
+     * This way it will render a link button instead.
+     */
+    href?: string;
+    /**
+     * Additional classes assigned to the button.
+     */
+    className?: string;
+};
+declare const StateButton: ({ text, className, onClick, href }: StateButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default StateButton;

package/components/states/StateButton.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// @ts-ignore-next-line importsNotUsedAsValues
+import 'react';
+import classNames from 'classnames';
+const StateButton = ({ text, className, onClick = () => { }, href }) => {
+    const buttonClassNames = classNames('btn btn-primary', 'margin-top-10', className && className);
+    // In case a href is given, render a link button instead
+    if (href) {
+        return (_jsx("a", Object.assign({ className: buttonClassNames, href: href, onClick: onClick }, { children: text })));
+    }
+    return (_jsx("button", Object.assign({ className: buttonClassNames, type: 'button', onClick: onClick }, { children: text })));
+};
+export default StateButton;

package/components/states/StateIcon.d.ts

@@ -0,0 +1,7 @@
+export type StateIconProps = {
+    name?: string;
+    className?: string;
+    color?: string;
+};
+declare const StateIcon: ({ name, color, className }: StateIconProps) => import("react/jsx-runtime").JSX.Element;
+export default StateIcon;

package/components/states/StateIcon.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import 'react';
+const StateIcon = ({ name, color = 'text-color-light', className = 'text-size-300pct' }) => (_jsx("span", { className: `rioglyph ${name} ${color} ${className}` }));
+export default StateIcon;

package/components/statsWidget/StatsWidgetNumber.js

@@ -6,6 +6,6 @@ import classNames from 'classnames';
 const StatsWidgetNumber = (props) => {
     const { value = 0, total, label, className, clickable = false, onClick = () => { } } = props, remainingProps = __rest(props, ["value", "total", "label", "className", "clickable", "onClick"]);
     const wrapperClasses = classNames('StatsWidgetNumber', { 'cursor-pointer': clickable }, className);
-    return (_jsxs("div", Object.assign({}, remainingProps, { onClick: onClick, className: wrapperClasses }, { children: [_jsxs("div", Object.assign({ className: 'StatsWidgetNumber-counter' }, { children: [_jsx("div", Object.assign({ className: 'StatsWidgetNumber-value' }, { children: value })), total && _jsx("div", Object.assign({ className: 'StatsWidgetNumber-total' }, { children: total }))] })), label && _jsx("div", Object.assign({ className: 'StatsWidgetNumber-label' }, { children: label }))] })));
+    return (_jsxs("div", Object.assign({}, remainingProps, { onClick: onClick, className: wrapperClasses }, { children: [_jsxs("div", Object.assign({ className: 'StatsWidgetNumber-counter' }, { children: [_jsx("div", Object.assign({ className: 'StatsWidgetNumber-value' }, { children: value })), (total || total === 0) && _jsx("div", Object.assign({ className: 'StatsWidgetNumber-total' }, { children: total }))] })), label && _jsx("div", Object.assign({ className: 'StatsWidgetNumber-label' }, { children: label }))] })));
 };
 export default StatsWidgetNumber;

package/components/steppedProgressBar/SteppedProgressBar.d.ts

@@ -1,35 +1,66 @@
+import { type ReactNode } from 'react';
+export type SteppedProgressBarLabel = {
+    /**
+     * The element shown in the step element.
+     *
+     * This can be a single step number or an icon element.
+     */
+    icon?: string | ReactNode;
+    /**
+     * The label shown below the step element.
+     */
+    label?: string | ReactNode;
+    /**
+     * Additional classes to be set on the label element.
+     */
+    labelClassName?: string;
+    /**
+     * Additional classes to be set on the label wrapping element.
+     */
+    labelWrapperClassName?: string;
+};
+export type SteppedProgressBarProps = {
+    /**
+     * Objects to defining the icon and the label of the navigation items.
+     *
+     * The icon can be a string or an icon.
+     */
+    labels: SteppedProgressBarLabel[];
+    /**
+     * Index of the selected navigation item.
+     */
+    selectedStepNumber: number;
+    /**
+     * Called with the new selected index after the user clicked a nav item.
+     */
+    onSelectedChanged: (selectedKey: number) => void;
+    /**
+     * The SteppedProgressBar Variant.
+     *
+     * One of "circle", "rectangle" or "roadsign".
+     *
+     * @default 'circle'
+     */
+    variant?: 'circle' | 'rectangle' | 'roadsign';
+    /**
+     * All navigation items with a higher index than this will be disabled.
+     */
+    disableFollowingPages?: number;
+    /**
+     * Deactivating the wrapping of bubbles on mobile.
+     *
+     * @default true
+     */
+    mobileBreakpoint?: boolean;
+    /**
+     * Additional classes to be set on the wrapper element.
+     */
+    className?: string;
+};
+declare const SteppedProgressBar: {
+    (props: SteppedProgressBarProps): import("react/jsx-runtime").JSX.Element;
+    VARIANT_CIRCLE: "circle";
+    VARIANT_RECTANGLE: "rectangle";
+    VARIANT_ROADSIGN: "roadsign";
+};
 export default SteppedProgressBar;
-declare function SteppedProgressBar(props: any): import("react/jsx-runtime").JSX.Element;
-declare namespace SteppedProgressBar {
-    const VARIANT_CIRCLE: string;
-    const VARIANT_RECTANGLE: string;
-    const VARIANT_ROADSIGN: string;
-    namespace defaultProps {
-        const selectedStepNumber: number;
-        const labels: never[];
-        function onSelectedChanged(): void;
-        const variant: string;
-        const mobileBreakpoint: boolean;
-    }
-    namespace propTypes {
-        export const disableFollowingPages: PropTypes.Requireable<number>;
-        const onSelectedChanged_1: PropTypes.Validator<(...args: any[]) => any>;
-        export { onSelectedChanged_1 as onSelectedChanged };
-        const labels_1: PropTypes.Validator<(PropTypes.InferProps<{
-            icon: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-            label: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-            labelClassName: PropTypes.Requireable<string>;
-            labelWrapperClassName: PropTypes.Requireable<string>;
-        }> | null | undefined)[]>;
-        export { labels_1 as labels };
-        export const itemClassName: PropTypes.Requireable<string>;
-        const selectedStepNumber_1: PropTypes.Validator<number>;
-        export { selectedStepNumber_1 as selectedStepNumber };
-        export const className: PropTypes.Requireable<string>;
-        const mobileBreakpoint_1: PropTypes.Requireable<boolean>;
-        export { mobileBreakpoint_1 as mobileBreakpoint };
-        const variant_1: PropTypes.Requireable<string>;
-        export { variant_1 as variant };
-    }
-}
-import PropTypes from "prop-types";

package/components/steppedProgressBar/SteppedProgressBar.js

@@ -1,19 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
+import { useEffect, useState } from 'react';
 import { Nav } from 'react-bootstrap';
 import classNames from 'classnames';
-import logPropError from '../../utils/logPropError';
-const errorProps = [
-    {
-        prop: 'labelsClassName',
-        replacement: 'labels.labelClassName',
-    },
-];
-const SteppedProgressBar = props => {
-    const { className, variant, labels, mobileBreakpoint, selectedStepNumber, disableFollowingPages: disableFollowingPageIndex, onSelectedChanged, } = props;
+const SteppedProgressBar = (props) => {
+    const { labels, selectedStepNumber, onSelectedChanged, variant = 'circle', disableFollowingPages: disableFollowingPageIndex, mobileBreakpoint = true, className = '', } = props;
     const [disableFollowingPages, setDisableFollowingPages] = useState(disableFollowingPageIndex ? disableFollowingPageIndex : selectedStepNumber);
-    logPropError(errorProps, props, 'SteppedProgressBar');
     useEffect(() => {
         if (disableFollowingPageIndex !== undefined) {
             if (disableFollowingPageIndex < selectedStepNumber) {
@@ -27,39 +18,11 @@ const SteppedProgressBar = props => {
             setDisableFollowingPages(selectedStepNumber);
         }
     }, [disableFollowingPageIndex, selectedStepNumber]);
-    const handleSelect = selectedKey => onSelectedChanged(Number(selectedKey));
     const wrapperClasses = classNames('stepped-progress-bar', variant && `variant-${variant}`, mobileBreakpoint && 'mobile-breakpoint', className && className);
-    return (_jsx(Nav, Object.assign({ className: wrapperClasses, activeKey: selectedStepNumber, onSelect: handleSelect }, { children: labels.map((labelObject, index) => {
-            return (_jsx(Nav.Link, Object.assign({ eventKey: index, disabled: index > disableFollowingPages, as: 'a', className: classNames('step-tab', labelObject.labelWrapperClassName) }, { children: _jsxs("div", Object.assign({ className: 'step-tab-content' }, { children: [_jsx("div", Object.assign({ className: 'item-icon' }, { children: labelObject.icon })), _jsx("div", Object.assign({ className: classNames('item-label', labelObject.labelClassName) }, { children: labelObject.label }))] })) }), index));
-        }) })));
+    const handleSelect = (selectedKey) => onSelectedChanged(Number(selectedKey));
+    return (_jsx(Nav, Object.assign({ className: wrapperClasses, activeKey: selectedStepNumber, onSelect: handleSelect }, { children: labels.map((labelObject, index) => (_jsx(Nav.Link, Object.assign({ eventKey: index, disabled: index > disableFollowingPages, as: 'a', className: classNames('step-tab', labelObject.labelWrapperClassName) }, { children: _jsxs("div", Object.assign({ className: 'step-tab-content' }, { children: [_jsx("div", Object.assign({ className: 'item-icon' }, { children: labelObject.icon })), _jsx("div", Object.assign({ className: classNames('item-label', labelObject.labelClassName) }, { children: labelObject.label }))] })) }), index))) })));
 };
 SteppedProgressBar.VARIANT_CIRCLE = 'circle';
 SteppedProgressBar.VARIANT_RECTANGLE = 'rectangle';
 SteppedProgressBar.VARIANT_ROADSIGN = 'roadsign';
-SteppedProgressBar.defaultProps = {
-    selectedStepNumber: 1,
-    labels: [],
-    onSelectedChanged: () => { },
-    variant: 'circle',
-    mobileBreakpoint: true,
-};
-SteppedProgressBar.propTypes = {
-    disableFollowingPages: PropTypes.number,
-    onSelectedChanged: PropTypes.func.isRequired,
-    labels: PropTypes.arrayOf(PropTypes.shape({
-        icon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-        label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-        labelClassName: PropTypes.string,
-        labelWrapperClassName: PropTypes.string,
-    })).isRequired,
-    itemClassName: PropTypes.string,
-    selectedStepNumber: PropTypes.number.isRequired,
-    className: PropTypes.string,
-    mobileBreakpoint: PropTypes.bool,
-    variant: PropTypes.oneOf([
-        SteppedProgressBar.VARIANT_CIRCLE,
-        SteppedProgressBar.VARIANT_RECTANGLE,
-        SteppedProgressBar.VARIANT_ROADSIGN,
-    ]),
-};
 export default SteppedProgressBar;

package/components/supportMarker/toggleSupportMarker.d.ts

@@ -1,3 +1,3 @@
-export const SUPPORT_MARKER_CLASS: "show-support-marker";
-export function toggleSupportMarker(): void;
-export function enableSupportMarker(enabled: any): void;
+export declare const SUPPORT_MARKER_CLASS = "show-support-marker";
+export declare const toggleSupportMarker: () => void;
+export declare const enableSupportMarker: (enabled: boolean) => void;

package/components/supportMarker/toggleSupportMarker.js

@@ -11,7 +11,7 @@ export const toggleSupportMarker = () => {
         htmlClassList.add(SUPPORT_MARKER_CLASS);
     }
 };
-export const enableSupportMarker = enabled => {
+export const enableSupportMarker = (enabled) => {
     if (!document || !document.documentElement) {
         return;
     }

package/components/switch/Switch.d.ts

@@ -1,6 +1,4 @@
 import { type PropsWithChildren } from 'react';
-declare const LABEL_POSITION_LEFT = "left";
-declare const LABEL_POSITION_RIGHT = "right";
 export type SwitchProps = {
     /**
      * Optional key that is used as key and as the id on the internal input.
@@ -8,12 +6,11 @@ export type SwitchProps = {
     keyName?: string;
     /**
      * Callback function triggered when clicking the button.
-     * @param toggleState
-     * @returns
      */
     onChange?: (toggleState: boolean) => void;
     /**
      * Set active / inactive state.
+     *
      * @default false
      */
     checked?: boolean;
@@ -23,6 +20,7 @@ export type SwitchProps = {
     minWidth?: number;
     /**
      * Disables the component.
+     *
      * @default false
      */
     disabled?: boolean;
@@ -37,15 +35,13 @@ export type SwitchProps = {
     /**
      * Defines the position of the switch label.
      *
-     * Possible values are:
-     * `Switch.LABEL_POSITION_LEFT`, `Switch.LABEL_POSITION_RIGHT` or
-     * `left`, `right`
+     * Possible values are `left` and `right`.
      */
-    labelPosition?: typeof LABEL_POSITION_LEFT | typeof LABEL_POSITION_RIGHT;
+    labelPosition?: 'left' | 'right';
 };
 declare const Switch: {
     (props: PropsWithChildren<SwitchProps>): import("react/jsx-runtime").JSX.Element;
-    LABEL_POSITION_LEFT: "right";
+    LABEL_POSITION_LEFT: "left";
     LABEL_POSITION_RIGHT: "right";
 };
 export default Switch;

package/components/switch/Switch.js

@@ -4,10 +4,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import 'react';
 import classNames from 'classnames';
 import noop from 'lodash/fp/noop';
-const LABEL_POSITION_LEFT = 'left';
-const LABEL_POSITION_RIGHT = 'right';
 const Switch = (props) => {
-    const { keyName, checked = false, enabledText, minWidth = 40, disabled = false, disabledText, labelPosition, children, onChange = noop } = props, remainingProps = __rest(props, ["keyName", "checked", "enabledText", "minWidth", "disabled", "disabledText", "labelPosition", "children", "onChange"]);
+    const { keyName, checked = false, enabledText, minWidth = 40, disabled = false, disabledText, children, labelPosition = !!children ? 'right' : undefined, onChange = noop } = props, remainingProps = __rest(props, ["keyName", "checked", "enabledText", "minWidth", "disabled", "disabledText", "children", "labelPosition", "onChange"]);
     const handleChange = (event) => {
         onChange(event.target.checked);
     };
@@ -20,6 +18,6 @@ const Switch = (props) => {
     const switchContentStyles = { minWidth };
     return (_jsx("div", Object.assign({}, remainingProps, { className: 'uikit-switch' }, { children: _jsxs("label", Object.assign({ className: switchLabelClasses }, { children: [_jsx("input", { onChange: handleChange, checked: checked, type: 'checkbox', id: keyName, className: 'switch-input', disabled: disabled }, keyName), _jsxs("div", Object.assign({ className: switchContentClasses, style: switchContentStyles }, { children: [hasMultipleText ? (_jsx("div", { className: 'switch-text', "data-on": enabledText, "data-off": disabledText })) : (hasSingleText && _jsx("div", { className: 'switch-text', "data-on": enabledText, "data-off": enabledText })), _jsx("div", { className: 'switch-handle' })] })), children && children] })) })));
 };
-Switch.LABEL_POSITION_LEFT = LABEL_POSITION_LEFT;
-Switch.LABEL_POSITION_RIGHT = LABEL_POSITION_LEFT;
+Switch.LABEL_POSITION_LEFT = 'left';
+Switch.LABEL_POSITION_RIGHT = 'right';
 export default Switch;

package/components/table/SortArrowDown.d.ts

@@ -0,0 +1,3 @@
+export type SortArrowDownProps = {};
+declare const SortArrowDown: () => import("react/jsx-runtime").JSX.Element;
+export default SortArrowDown;

package/components/table/SortArrowDown.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import 'react';
+const SortArrowDown = () => _jsx("span", { className: 'sort-icon sort-desc' });
+export default SortArrowDown;

package/components/table/SortArrowUp.d.ts

@@ -0,0 +1,3 @@
+export type SortArrowUpProps = {};
+declare const SortArrowUp: () => import("react/jsx-runtime").JSX.Element;
+export default SortArrowUp;

package/components/table/SortArrowUp.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import 'react';
+const SortArrowUp = () => _jsx("span", { className: 'sort-icon sort-asc' });
+export default SortArrowUp;

package/components/table/SortArrows.d.ts

@@ -1,5 +1,5 @@
-export function SortArrowUp(): import("react/jsx-runtime").JSX.Element;
-export function SortArrowDown(): import("react/jsx-runtime").JSX.Element;
-export function SortArrows({ direction }: {
-    direction: any;
-}): import("react/jsx-runtime").JSX.Element;
+export type SortArrowsProps = {
+    direction?: string;
+};
+declare const SortArrows: ({ direction }: SortArrowsProps) => import("react/jsx-runtime").JSX.Element;
+export default SortArrows;

package/components/table/SortArrows.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
+import 'react';
 import toLower from 'lodash/fp/toLower';
-export const SortArrowUp = () => _jsx("span", { className: 'sort-icon sort-asc' });
-export const SortArrowDown = () => _jsx("span", { className: 'sort-icon sort-desc' });
-export const SortArrows = ({ direction }) => _jsx("span", { className: `sort-arrows sort-${toLower(direction)}` });
+const SortArrows = ({ direction }) => (_jsx("span", { className: `sort-arrows ${direction ? `sort-${toLower(direction)}` : ''}` }));
+export default SortArrows;

package/components/table/TableCardsSorting.d.ts

@@ -1,37 +1,49 @@
+import React from 'react';
+type TableCardsSortingOption = {
+    /**
+     * ID to use for the select option.
+     */
+    id: string;
+    /**
+     * Translated column label to be shown in the select.
+     */
+    label: string | React.ReactNode;
+    /**
+     * Defines the column which is currently sorted by.
+     */
+    selected?: boolean;
+    /**
+     * Defines if the column can be sorted.
+     *
+     * Hence, it will be disabled in the select.
+     */
+    disabled?: boolean;
+};
+export type TableCardsSortingProps = {
+    /**
+     * "Name", "Key", or "Id" of the current sorted column.
+     */
+    sortName: string;
+    /**
+     * Defines the sort direction.
+     *
+     * @default 'asc'
+     */
+    sortOrder: 'asc' | 'desc';
+    /**
+     * List of objects for the column name select component.
+     */
+    selectOptions: TableCardsSortingOption[];
+    /**
+     * Function that is called when the sort key or direction changes.
+     *
+     * @default noop
+     */
+    onSortChange?: (name: string, order: 'asc' | 'desc') => void;
+    /**
+     * Optional class names for the wrapper element.
+     */
+    className?: string;
+};
+declare const TableCardsSorting: (props: TableCardsSortingProps) => import("react/jsx-runtime").JSX.Element;
 export default TableCardsSorting;
-declare class TableCardsSorting extends React.Component<any, any, any> {
-    constructor(props: any);
-    state: {
-        sortName: any;
-        sortOrder: any;
-    };
-    setSortName(item: any): void;
-    setSortDirectionAsc(): void;
-    setSortDirectionDesc(): void;
-    setSortDirection(direction: any): void;
-    render(): import("react/jsx-runtime").JSX.Element;
-}
-declare namespace TableCardsSorting {
-    namespace defaultProps {
-        function onSortChange(): void;
-        const sortOrder: string;
-        const selectOptions: never[];
-    }
-    namespace propTypes {
-        export const sortName: PropTypes.Validator<string>;
-        const sortOrder_1: PropTypes.Validator<string>;
-        export { sortOrder_1 as sortOrder };
-        const onSortChange_1: PropTypes.Requireable<(...args: any[]) => any>;
-        export { onSortChange_1 as onSortChange };
-        const selectOptions_1: PropTypes.Validator<(PropTypes.InferProps<{
-            id: PropTypes.Validator<string>;
-            label: PropTypes.Validator<NonNullable<NonNullable<PropTypes.ReactNodeLike>>>;
-            selected: PropTypes.Requireable<boolean>;
-            disabled: PropTypes.Requireable<boolean>;
-        }> | null | undefined)[]>;
-        export { selectOptions_1 as selectOptions };
-        export const className: PropTypes.Requireable<string>;
-    }
-}
-import React from "react";
-import PropTypes from "prop-types";