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

package/lib/es/components/radiobutton/RadioButton.js

@@ -2,10 +2,10 @@
 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 RadioButtonIcon = props => {
+const noop_1 = tslib_1.__importDefault(require("lodash/noop"));
+const RadioButtonIcon = (props) => {
     const { icon, iconSize, iconLabelPosition, text } = props;
     const iconStyles = {
         width: `${iconSize}px`,
@@ -15,35 +15,35 @@ const RadioButtonIcon = props => {
     };
     return ((0, jsx_runtime_1.jsxs)("span", Object.assign({ className: `radio-icon label-${iconLabelPosition}` }, { children: [(0, jsx_runtime_1.jsx)("span", { className: `rioglyph ${icon}`, style: iconStyles }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'radio-label' }, { children: text }))] })));
 };
-const RadioButton = props => {
-    const { checked, children, className, custom, defaultChecked, disabled, icon, iconLabelPosition, iconSize, inline, inputRef, label, name, onChange, onClick, right, tabIndex, value } = props, remainingProps = tslib_1.__rest(props, ["checked", "children", "className", "custom", "defaultChecked", "disabled", "icon", "iconLabelPosition", "iconSize", "inline", "inputRef", "label", "name", "onChange", "onClick", "right", "tabIndex", "value"]);
-    const labelRef = (0, react_1.useRef)();
-    const handleToggleKeyDown = event => {
+const RadioButton = (props) => {
+    const { icon = '', iconLabelPosition = 'vertical', iconSize = 16, label, onClick = noop_1.default, onChange = noop_1.default, checked, defaultChecked, disabled = false, className, inline = false, right = false, custom = false, name, value, tabIndex = 0, inputRef, children } = props, remainingProps = tslib_1.__rest(props, ["icon", "iconLabelPosition", "iconSize", "label", "onClick", "onChange", "checked", "defaultChecked", "disabled", "className", "inline", "right", "custom", "name", "value", "tabIndex", "inputRef", "children"]);
+    const isControlled = checked !== null && checked !== undefined;
+    const labelRef = (0, react_1.useRef)(null);
+    const handleToggleKeyDown = (event) => {
         switch (event.key) {
-            case ' ':
-                // toggle on space
-                toggle(event);
-                break;
-            case 'Enter':
-                // open on enter
+            case ' ': // toggle on space
+            case 'Enter': // open on enter
                 toggle(event);
                 break;
             default:
                 break;
         }
     };
-    const toggle = event => {
+    const toggle = (event) => {
         event.preventDefault();
         if (disabled) {
             return;
         }
         // Controlled case - uses "onChange()" instead of "onClick()" callback
-        if (checked !== null && checked !== undefined) {
+        if (isControlled) {
             onChange(event);
             return;
         }
         // Uncontrolled case - set the input checked or unchecked
-        labelRef.current.firstChild.checked = !labelRef.current.firstChild.checked;
+        if (labelRef.current) {
+            const checkbox = labelRef.current.firstChild;
+            checkbox.checked = !checkbox.checked;
+        }
         onClick(event);
     };
     const text = label || children;
@@ -56,32 +56,4 @@ const RadioButton = props => {
 };
 RadioButton.ICON_LABEL_VERTICAL = 'vertical';
 RadioButton.ICON_LABEL_HORIZONTAL = 'horizontal';
-RadioButton.defaultProps = {
-    inline: false,
-    disabled: false,
-    right: false,
-    custom: false,
-    tabIndex: 0,
-    icon: '',
-    iconSize: 16,
-    iconLabelPosition: RadioButton.ICON_LABEL_VERTICAL,
-    onClick: () => { },
-};
-RadioButton.propTypes = {
-    label: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.node]),
-    icon: prop_types_1.default.string,
-    iconSize: prop_types_1.default.number,
-    iconLabelPosition: prop_types_1.default.oneOf([RadioButton.ICON_LABEL_VERTICAL, RadioButton.ICON_LABEL_HORIZONTAL]),
-    onClick: prop_types_1.default.func,
-    onChange: prop_types_1.default.func,
-    defaultChecked: prop_types_1.default.bool,
-    checked: prop_types_1.default.bool,
-    disabled: prop_types_1.default.bool,
-    className: prop_types_1.default.string,
-    inline: prop_types_1.default.bool,
-    right: prop_types_1.default.bool,
-    custom: prop_types_1.default.bool,
-    inputRef: prop_types_1.default.func,
-    tabIndex: prop_types_1.default.number,
-};
 exports.default = RadioButton;

package/lib/es/components/releaseNotes/ReleaseNotes.d.ts

@@ -7,29 +7,34 @@ export type NoteProps = {
         content: NoteContent;
     };
 };
+export type ReleaseNotesData = {
+    [key: string]: {
+        date: string;
+        content: NoteContent;
+    };
+};
 export type ReleaseNotesProps = {
     /**
      * Translated release notes of the following shape:
+     *
      * @example
+     *
+     * ```tsx
      * {
-            "0.1.2": {
-                date: '23.07.2018',
-                content: (
-                    <div className='padding-left-15'>
-                        Map view within the tour history table
-                        • Modern map design as used in the Beta of the fleet monitor
-                        • Works with all event types
-                    </div>
-                ),
-            }
-        }
+     *     "0.1.2": {
+     *         date: '23.07.2018',
+     *         content: (
+     *             <div className='padding-left-15'>
+     *                 Map view within the tour history table
+     *                 • Modern map design as used in the Beta of the fleet monitor
+     *                 • Works with all event types
+     *             </div>
+     *         ),
+     *     }
+     * }
+     * ```
      */
-    releaseNotes: {
-        [key: string]: {
-            date: string;
-            content: NoteContent;
-        };
-    };
+    releaseNotes: ReleaseNotesData;
 };
 declare const ReleaseNotes: (props: ReleaseNotesProps) => import("react/jsx-runtime").JSX.Element;
 export default ReleaseNotes;

package/lib/es/components/releaseNotes/ReleaseNotes.js

@@ -10,7 +10,7 @@ const toPairs_1 = tslib_1.__importDefault(require("lodash/fp/toPairs"));
 const Note = (props) => {
     const { note, version } = props;
     const { date, content } = note;
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'panel panel-default' }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'panel-heading' }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'display-flex justify-content-between' }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'text-size-16 text-medium' }, { children: `${version}` })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'text-muted text-thin' }, { children: date }))] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'panel-body white-space-pre-line' }, { children: (0, isArray_1.default)(content) ? ((0, jsx_runtime_1.jsx)("ul", Object.assign({ className: 'margin-bottom-0 margin-left-5 padding-left-25' }, { children: (0, map_1.default)((item) => ((0, jsx_runtime_1.jsx)("li", { children: item }, `${version}-note-${Math.random()}`)), content) }))) : ((0, jsx_runtime_1.jsx)("div", { children: content })) }))] }), `${version}-note`));
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'panel panel-default' }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'panel-heading' }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'display-flex justify-content-between' }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'text-size-16 text-medium' }, { children: `${version}` })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'text-thin' }, { children: date }))] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'panel-body white-space-pre-line' }, { children: (0, isArray_1.default)(content) ? ((0, jsx_runtime_1.jsx)("ul", Object.assign({ className: 'margin-bottom-0 margin-left-5 padding-left-25' }, { children: (0, map_1.default)((item) => ((0, jsx_runtime_1.jsx)("li", { children: item }, `${version}-note-${Math.random()}`)), content) }))) : ((0, jsx_runtime_1.jsx)("div", { children: content })) }))] }), `${version}-note`));
 };
 const ReleaseNotes = (props) => {
     const { releaseNotes } = props, remainingProps = tslib_1.__rest(props, ["releaseNotes"]);

package/lib/es/components/resizer/Resizer.js

@@ -45,7 +45,8 @@ const Resizer = (props) => {
         };
     }, []);
     const getClientX = (event) => {
-        if (event instanceof TouchEvent) {
+        // Note: some browsers don't provide the global "TouchEvent" constructor!
+        if (!!window.TouchEvent && event instanceof window.TouchEvent) {
             return event.touches[0].clientX;
         }
         if (event instanceof MouseEvent) {
@@ -54,7 +55,8 @@ const Resizer = (props) => {
         throw new Error('Unsupported event type');
     };
     const getClientY = (event) => {
-        if (event instanceof TouchEvent) {
+        // Note: some browsers don't provide the global "TouchEvent" constructor!
+        if (!!window.TouchEvent && event instanceof window.TouchEvent) {
             return event.touches[0].clientY;
         }
         if (event instanceof MouseEvent) {

package/lib/es/components/responsiveColumnStripe/ResponsiveColumnStripe.d.ts

@@ -1,3 +1,81 @@
+import React, { type ReactHTML } from 'react';
+export type ResponsiveColumnStripeProps = {
+    /**
+     * The minimum width in pixel of a single column.
+     *
+     * This value determines how many columns are shown per page depending on the parent width.
+     *
+     * @default 300
+     */
+    minColumnWith?: number;
+    /**
+     * The minimum amount of columns that should be shown per page.
+     *
+     * @default 1
+     */
+    minColumns?: number;
+    /**
+     * The maximum amount of columns that should be shown per page.
+     *
+     * @default 5
+     */
+    maxColumns?: number;
+    /**
+     * Defines whether the items on the last page are stretched out to fill the space.
+     *
+     * @default false
+     */
+    stretchLastItems?: boolean;
+    /**
+     * The page that shall be shown.
+     *
+     * This can be used to control the pages from outside.
+     *
+     * @default 0
+     */
+    activePage?: number;
+    /**
+     * The DOM element type of the wrapping column element.
+     *
+     * If you need a list, this might be set to "ul".
+     *
+     * @default 'div'
+     */
+    asType?: keyof ReactHTML;
+    /**
+     * Set to true to skip animating pages.
+     *
+     * @default false
+     */
+    disableAnimation?: boolean;
+    /**
+     * Callback function for when the previous page is clicked.
+     *
+     * @param pageNumber
+     * @param columnsPerPage
+     */
+    onPreviousClick?: (pageNumber: number, columnsPerPage: number) => void;
+    /**
+     * Callback function for when the next page is clicked.
+     *
+     * @param pageNumber
+     * @param columnsPerPage
+     */
+    onNextClick?: (pageNumber: number, columnsPerPage: number) => void;
+    /**
+     * Additional classes set to the navigation buttons.
+     */
+    buttonClassName?: string;
+    /**
+     * Additional classes set to the component wrapper element.
+     */
+    columnsWrapperClassName?: string;
+    /**
+     * Additional classes set to the column wrapper element.
+     */
+    className?: string;
+};
+declare const ResponsiveColumnStripe: React.ForwardRefExoticComponent<ResponsiveColumnStripeProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
 export default ResponsiveColumnStripe;
-declare const ResponsiveColumnStripe: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from "react";

package/lib/es/components/responsiveColumnStripe/ResponsiveColumnStripe.js

@@ -2,55 +2,42 @@
 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 findIndex_1 = tslib_1.__importDefault(require("lodash/fp/findIndex"));
 const chunk_1 = tslib_1.__importDefault(require("lodash/fp/chunk"));
 const framer_motion_1 = require("framer-motion");
+const noop_1 = tslib_1.__importDefault(require("lodash/noop"));
 const useAfterMount_1 = tslib_1.__importDefault(require("../../hooks/useAfterMount"));
 const useElementSize_1 = tslib_1.__importDefault(require("../../hooks/useElementSize"));
 const usePrevious_1 = tslib_1.__importDefault(require("../../hooks/usePrevious"));
-const DEFAULT_MIN_COLUMN_WITH = 300;
-const DEFAULT_MIN_COLUMNS = 1;
-const DEFAULT_MAX_COLUMNS = 5;
-const DEFAULT_COLUMN_WRAPPER_TYPE = 'div';
-const DEFAULT_ACTIVE_PAGE = 0;
 const MIN_WITH_THRESHOLD = 10;
-const ANIMATION_DURATION = 0.2;
+const DEFAULT_TRANSITION = { duration: 0.2 };
 const ANIMATION_NEXT = 'page';
 const ANIMATION_BACK = 'pageBack';
 const COLUMN_ITEM_CLASSNAME = 'ColumnItem';
 const variants = {
-    pageEnter: pageDirection => {
-        return {
-            x: pageDirection === ANIMATION_NEXT ? '60%' : '-60%',
-            opacity: 0,
-        };
-    },
-    pageCenter: () => {
-        return {
-            x: 0,
-            opacity: 1,
-        };
-    },
+    pageEnter: pageDirection => ({
+        x: pageDirection === ANIMATION_NEXT ? '60%' : '-60%',
+        opacity: 0,
+    }),
+    pageCenter: () => ({ x: 0, opacity: 1 }),
 };
-const getFirstColumnItem = node => {
+const getFirstColumnItem = (node) => {
     if ([...node.classList].includes(COLUMN_ITEM_CLASSNAME)) {
         return node;
     }
     return getFirstColumnItem(node.children[0]);
 };
 const ResponsiveColumnStripe = (0, react_1.forwardRef)((props, ref) => {
-    const { minColumnWith = DEFAULT_MIN_COLUMN_WITH, minColumns = DEFAULT_MIN_COLUMNS, maxColumns = DEFAULT_MAX_COLUMNS, className = '', buttonClassName = '', columnsWrapperClassName = '', onNextClick = () => { }, onPreviousClick = () => { }, stretchLastItems = true, asType = DEFAULT_COLUMN_WRAPPER_TYPE, activePage = DEFAULT_ACTIVE_PAGE, disableAnimation = false, children } = props, remainingProps = tslib_1.__rest(props, ["minColumnWith", "minColumns", "maxColumns", "className", "buttonClassName", "columnsWrapperClassName", "onNextClick", "onPreviousClick", "stretchLastItems", "asType", "activePage", "disableAnimation", "children"]);
-    const ComponentType = asType;
+    const { minColumnWith = 300, minColumns = 1, maxColumns = 5, stretchLastItems = true, activePage = 0, asType: ComponentType = 'div', onPreviousClick = noop_1.default, onNextClick = noop_1.default, buttonClassName = '', columnsWrapperClassName = '', className = '', disableAnimation = false, children } = props, remainingProps = tslib_1.__rest(props, ["minColumnWith", "minColumns", "maxColumns", "stretchLastItems", "activePage", "asType", "onPreviousClick", "onNextClick", "buttonClassName", "columnsWrapperClassName", "className", "disableAnimation", "children"]);
     const [currentPage, setCurrentPage] = (0, react_1.useState)(activePage);
     const [columnsPerPage, setColumnsPerPage] = (0, react_1.useState)(maxColumns);
     const [enableInitialAnimation, setEnableInitialAnimation] = (0, react_1.useState)(false);
     const [isResizePage, setIsResizePage] = (0, react_1.useState)(false);
     // The base for reacting on changing width of the wrapping element.
     // It uses a ResizeObserver under the hood.
-    const columnWrapperRef = (0, react_1.useRef)();
+    const columnWrapperRef = (0, react_1.useRef)(null);
     const [columnWrapperWidth] = (0, useElementSize_1.default)(columnWrapperRef);
     const previousPage = (0, usePrevious_1.default)(currentPage);
     const animationDirection = currentPage > previousPage ? ANIMATION_NEXT : ANIMATION_BACK;
@@ -63,13 +50,13 @@ const ResponsiveColumnStripe = (0, react_1.forwardRef)((props, ref) => {
         setCurrentPage(activePage);
         setPreviousActivePage(activePage);
     }
-    const updatePageOnColumnsSizeChange = (firstItem, columnsPerPage, children) => {
+    const updatePageOnColumnsSizeChange = (firstItem, perPage) => {
         // Split children in page chunks
-        const itemChunks = (0, chunk_1.default)(columnsPerPage)(children);
+        const pages = (0, chunk_1.default)(perPage)(children);
         // find the currently rendered first item inside the chunks.
         // The found chunk index is the new page to render.
         // example of chunks => [['a', 'b', 'c'], ['d']]
-        const targetPage = (0, findIndex_1.default)(chunk => chunk.some(chunkItem => { var _a; return chunkItem.key === ((_a = firstItem.attributes['data-key']) === null || _a === void 0 ? void 0 : _a.value); }))(itemChunks);
+        const targetPage = (0, findIndex_1.default)((page) => page.some(pageItem => pageItem.key === firstItem.dataset['key']))(pages);
         if (targetPage !== currentPage) {
             setCurrentPage(targetPage);
         }
@@ -92,7 +79,7 @@ const ResponsiveColumnStripe = (0, react_1.forwardRef)((props, ref) => {
         const allowForLessColumns = columnsPerPage - 1 >= minColumns;
         const allowForMoreColumns = columnsPerPage + 1 <= maxColumns;
         // The threshold is required to avoid jumping between bigger and smaller after the columns per page
-        // has changed and it continues to resize
+        // has changed, and it continues to resize
         const goSmaller = allowForLessColumns && columnWidth + MIN_WITH_THRESHOLD <= minColumnWith;
         const goBigger = allowForMoreColumns && (columnsPerPage + 1) * minColumnWith <= columnWrapperWidth;
         // During resizing, we don't want any animation
@@ -100,13 +87,13 @@ const ResponsiveColumnStripe = (0, react_1.forwardRef)((props, ref) => {
         if (goBigger) {
             const newValue = columnsPerPage + 1;
             setColumnsPerPage(newValue);
-            updatePageOnColumnsSizeChange(firstItem, newValue, children);
+            updatePageOnColumnsSizeChange(firstItem, newValue);
             return;
         }
         if (goSmaller) {
             const newValue = columnsPerPage - 1;
             setColumnsPerPage(newValue);
-            updatePageOnColumnsSizeChange(firstItem, newValue, children);
+            updatePageOnColumnsSizeChange(firstItem, newValue);
             return;
         }
     }, [columnWrapperWidth, columnWrapperRef.current, children, columnsPerPage]);
@@ -140,28 +127,16 @@ const ResponsiveColumnStripe = (0, react_1.forwardRef)((props, ref) => {
     const columnClassName = disableNextPage && !stretchLastItems ? 'flex-0-1' : 'flex-1-1';
     // Use the given custom component type "div" or any other. Clone the children to inject certain
     // properties that are required to stretch the items and deal with their size.
-    const columns = ((0, jsx_runtime_1.jsx)(ComponentType, Object.assign({ className: mergedColumnsWrapperClassName }, { children: react_1.default.Children.map(columnsToDisplay, column => {
+    const columns = ((0, jsx_runtime_1.jsx)(ComponentType, Object.assign({ className: mergedColumnsWrapperClassName }, { children: react_1.Children.map(columnsToDisplay, column => {
             var _a;
-            return react_1.default.cloneElement(column, {
+            return (0, react_1.cloneElement)(column, {
                 className: `${COLUMN_ITEM_CLASSNAME} ${columnClassName} ${((_a = column.props) === null || _a === void 0 ? void 0 : _a.className) || ''}`,
                 // style: { ...column.props?.style, minWidth: `${minColumnWith}px` },
                 'data-key': column.key,
             });
         }) })));
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, remainingProps, { ref: ref, className: wrapperClassName }, { children: [showPageButtons && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: previousButtonClassName, onClick: handlePrevClick }, { children: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-chevron-left' }) }))), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'ColumnsArea flex-1-1 overflow-hidden', ref: columnWrapperRef }, { children: [disableAnimation || isResizePage ? columns : null, !disableAnimation && !isResizePage && ((0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, Object.assign({ exitBeforeEnter: true, custom: animationDirection }, { children: (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, Object.assign({ variants: variants, initial: enableInitialAnimation ? 'pageEnter' : false, animate: 'pageCenter', custom: animationDirection, transition: { duration: ANIMATION_DURATION } }, { children: columns }), currentPage) })))] })), showPageButtons && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: nextButtonClassName, onClick: handleNextClick }, { children: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-chevron-right' }) })))] })));
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, remainingProps, { ref: ref, className: wrapperClassName }, { children: [showPageButtons && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: previousButtonClassName, onClick: handlePrevClick }, { children: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-chevron-left' }) }))), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'ColumnsArea flex-1-1 overflow-hidden', ref: columnWrapperRef }, { children: [disableAnimation || isResizePage ? columns : null, !disableAnimation && !isResizePage && (
+                    // @ts-ignore-next-line
+                    (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, Object.assign({ exitBeforeEnter: true, custom: animationDirection }, { children: (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, Object.assign({ variants: variants, initial: enableInitialAnimation ? 'pageEnter' : false, animate: 'pageCenter', custom: animationDirection, transition: DEFAULT_TRANSITION }, { children: columns }), currentPage) })))] })), showPageButtons && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: nextButtonClassName, onClick: handleNextClick }, { children: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-chevron-right' }) })))] })));
 });
 exports.default = ResponsiveColumnStripe;
-ResponsiveColumnStripe.propTypes = {
-    minColumnWith: prop_types_1.default.number,
-    minColumns: prop_types_1.default.number,
-    maxColumns: prop_types_1.default.number,
-    className: prop_types_1.default.string,
-    buttonClassName: prop_types_1.default.string,
-    columnsWrapperClassName: prop_types_1.default.string,
-    onNextClick: prop_types_1.default.func,
-    onPreviousClick: prop_types_1.default.func,
-    stretchLastItems: prop_types_1.default.bool,
-    asType: prop_types_1.default.string,
-    activePage: prop_types_1.default.number,
-    disableAnimation: prop_types_1.default.bool,
-};

package/lib/es/components/rules/RuleConnector.d.ts

@@ -1,39 +1,62 @@
+import { type HTMLAttributes, type PropsWithChildren } from 'react';
+export type RuleConnectorProps = {
+    /**
+     * The placement for the connector.
+     *
+     * Possible values are `start`, `center` and `end`.
+     *
+     * @default 'center'
+     */
+    placement?: 'start' | 'center' | 'end';
+    /**
+     * The rioglyph icon name.
+     *
+     * @default 'rioglyph-plus'
+     */
+    icon?: string;
+    /**
+     * Defines whether the connector is shown.
+     *
+     * @default false
+     */
+    hidden?: boolean;
+    /**
+     * Background color of the connector itself.
+     *
+     * @default 'bg-lightest'
+     */
+    background?: string;
+    /**
+     * Background color of the surrounding area where the rule containers are placed.
+     *
+     * @default 'bg-white'
+     */
+    pageBackground?: string;
+    /**
+     * Classes to be set on the connector content.
+     *
+     * @default 'text-color-light'
+     */
+    contentClassName?: string;
+    /**
+     * Defines whether the connector has a border.
+     *
+     * @default false
+     */
+    hasBorder?: boolean;
+    /**
+     * The border color class name.
+     */
+    borderColor?: string;
+    /**
+     * Additional classes for the wrapper element.
+     */
+    className?: string;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'className'>;
+declare const RuleConnector: {
+    (props: PropsWithChildren<RuleConnectorProps>): import("react/jsx-runtime").JSX.Element;
+    START: string;
+    CENTER: string;
+    END: string;
+};
 export default RuleConnector;
-declare function RuleConnector(props: any): import("react/jsx-runtime").JSX.Element;
-declare namespace RuleConnector {
-    const START: string;
-    const CENTER: string;
-    const END: string;
-    namespace defaultProps {
-        const placement: string;
-        const icon: string;
-        const hidden: boolean;
-        const background: string;
-        const pageBackground: string;
-        const contentClassName: string;
-        const hasBorder: boolean;
-        const borderColor: string;
-        const className: string;
-    }
-    namespace propTypes {
-        const placement_1: PropTypes.Requireable<string>;
-        export { placement_1 as placement };
-        const icon_1: PropTypes.Requireable<string>;
-        export { icon_1 as icon };
-        const hidden_1: PropTypes.Requireable<boolean>;
-        export { hidden_1 as hidden };
-        const background_1: PropTypes.Requireable<string>;
-        export { background_1 as background };
-        const pageBackground_1: PropTypes.Requireable<string>;
-        export { pageBackground_1 as pageBackground };
-        const contentClassName_1: PropTypes.Requireable<string>;
-        export { contentClassName_1 as contentClassName };
-        const hasBorder_1: PropTypes.Requireable<boolean>;
-        export { hasBorder_1 as hasBorder };
-        const borderColor_1: PropTypes.Requireable<string>;
-        export { borderColor_1 as borderColor };
-        const className_1: PropTypes.Requireable<string>;
-        export { className_1 as className };
-    }
-}
-import PropTypes from "prop-types";

package/lib/es/components/rules/RuleConnector.js

@@ -2,15 +2,15 @@
 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 getBorderColorFromBg = bg => bg.replace('bg', 'border-color');
-const RuleConnector = props => {
-    const { placement, icon, hidden, background, pageBackground, contentClassName, hasBorder, borderColor, className, children } = props, remainingProps = tslib_1.__rest(props, ["placement", "icon", "hidden", "background", "pageBackground", "contentClassName", "hasBorder", "borderColor", "className", "children"]);
+const getBorderColorFromBg = (bg) => bg.replace('bg', 'border-color');
+const commonRoundedClasses = (0, classnames_1.default)('width-20', 'height-20', 'rounded-circle', 'position-relative', 'z-index-2', 'box-sizing-content-box');
+const commonRoundedBorderClippingClasses = (0, classnames_1.default)('position-relative', 'width-20', 'height-20');
+const RuleConnector = (props) => {
+    const { placement = 'center', icon = 'rioglyph-plus', hidden = false, background = 'bg-lightest', pageBackground = 'bg-white', contentClassName = 'text-color-light', hasBorder = false, borderColor = '', className = '', children } = props, remainingProps = tslib_1.__rest(props, ["placement", "icon", "hidden", "background", "pageBackground", "contentClassName", "hasBorder", "borderColor", "className", "children"]);
     const wrapperClassNames = (0, classnames_1.default)('RuleConnector', 'height-20', 'display-flex', `justify-content-${placement}`, 'align-items-center', 'position-relative', hidden && 'opacity-0', className);
-    const commonRoundedClasses = (0, classnames_1.default)('width-20', 'height-20', 'rounded-circle', 'position-relative', 'z-index-2', 'box-sizing-content-box');
-    const commonRoundedBorderClippingClasses = (0, classnames_1.default)('position-relative', 'width-20', 'height-20');
     const leftRoundedBox = (0, classnames_1.default)('margin-right--10', commonRoundedClasses, pageBackground, hasBorder && `border ${borderColor}`);
     const leftRoundedBoxBorderClipping = (0, classnames_1.default)('right-50pct', commonRoundedBorderClippingClasses, pageBackground);
     const contentWrapperClassNames = (0, classnames_1.default)('padding-left-20 padding-right-20', 'z-index-1', background, hasBorder && `border ${getBorderColorFromBg(background)}`);
@@ -21,26 +21,4 @@ const RuleConnector = props => {
 RuleConnector.START = 'start';
 RuleConnector.CENTER = 'center';
 RuleConnector.END = 'end';
-RuleConnector.defaultProps = {
-    placement: 'center',
-    icon: 'rioglyph-plus',
-    hidden: false,
-    background: 'bg-lightest',
-    pageBackground: 'bg-white',
-    contentClassName: 'text-color-light',
-    hasBorder: false,
-    borderColor: '',
-    className: '',
-};
-RuleConnector.propTypes = {
-    placement: prop_types_1.default.oneOf([RuleConnector.START, RuleConnector.CENTER, RuleConnector.END]),
-    icon: prop_types_1.default.string,
-    hidden: prop_types_1.default.bool,
-    background: prop_types_1.default.string,
-    pageBackground: prop_types_1.default.string,
-    contentClassName: prop_types_1.default.string,
-    hasBorder: prop_types_1.default.bool,
-    borderColor: prop_types_1.default.string,
-    className: prop_types_1.default.string,
-};
 exports.default = RuleConnector;

package/lib/es/components/rules/RuleContainer.d.ts

@@ -1,28 +1,43 @@
+import { type HTMLAttributes, type JSX, type PropsWithChildren } from 'react';
+export type RuleContainerProps = {
+    /**
+     * Defines whether the container is shown.
+     *
+     * @default true
+     */
+    show?: boolean;
+    /**
+     * Determines the container style for when no rule option is selected.
+     *
+     * It also hides the connector in this case.
+     *
+     * @default false
+     */
+    unchecked?: boolean;
+    /**
+     * The box background class name.
+     *
+     * @default 'bg-lightest'
+     */
+    background?: string;
+    /**
+     * The border color class name.
+     */
+    borderColor?: string;
+    /**
+     * Defines whether the connector is shown.
+     *
+     * @default false
+     */
+    hideConnector?: boolean;
+    /**
+     * Overwrites the default connector.
+     */
+    customConnector?: string | JSX.Element;
+    /**
+     * Additional classes for the wrapper element.
+     */
+    className?: string;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'className'>;
+declare const RuleContainer: (props: PropsWithChildren<RuleContainerProps>) => import("react/jsx-runtime").JSX.Element | null;
 export default RuleContainer;
-declare function RuleContainer(props: any): import("react/jsx-runtime").JSX.Element | null;
-declare namespace RuleContainer {
-    namespace defaultProps {
-        const show: boolean;
-        const unchecked: boolean;
-        const background: string;
-        const borderColor: string;
-        const hideConnector: boolean;
-        const className: string;
-    }
-    namespace propTypes {
-        const show_1: PropTypes.Requireable<boolean>;
-        export { show_1 as show };
-        const unchecked_1: PropTypes.Requireable<boolean>;
-        export { unchecked_1 as unchecked };
-        const background_1: PropTypes.Requireable<string>;
-        export { background_1 as background };
-        const borderColor_1: PropTypes.Requireable<string>;
-        export { borderColor_1 as borderColor };
-        const hideConnector_1: PropTypes.Requireable<boolean>;
-        export { hideConnector_1 as hideConnector };
-        export const customConnector: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-        const className_1: PropTypes.Requireable<string>;
-        export { className_1 as className };
-    }
-}
-import PropTypes from "prop-types";