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

package/lib/es/components/selects/SelectFilter.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export type SelectFilterProps = {
+    isFilterActive: boolean;
+    filterValue: string;
+    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+};
+declare const SelectFilter: (props: SelectFilterProps) => import("react/jsx-runtime").JSX.Element;
+export default SelectFilter;

package/lib/es/components/selects/SelectFilter.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+// @ts-ignore-next-line importsNotUsedAsValues
+require("react");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const SelectFilter = (props) => {
+    const { isFilterActive, filterValue, onChange } = props;
+    const inputClasses = (0, classnames_1.default)('select-filter-input', (isFilterActive || filterValue) && 'select-filter-input-active');
+    // biome-ignore lint/a11y/noAutofocus: autofocus is intentionally set to allow instant typing to filter
+    return (0, jsx_runtime_1.jsx)("input", { type: 'text', className: inputClasses, autoFocus: true, onChange: onChange, value: filterValue });
+};
+exports.default = SelectFilter;

package/lib/es/components/selects/SelectedOption.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { SelectOption } from './Select';
+export type SelectedOptionProps = {
+    label: string | React.ReactNode;
+    placeholder?: string | React.ReactNode;
+    selectedItem: SelectOption | null;
+    showSelectedItemIcon: boolean;
+    showUnselectedItemIcons: boolean;
+    options: SelectOption[];
+};
+declare const SelectedOption: (props: SelectedOptionProps) => import("react/jsx-runtime").JSX.Element;
+export default SelectedOption;

package/lib/es/components/selects/SelectedOption.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+// @ts-ignore-next-line importsNotUsedAsValues
+require("react");
+const SelectedOption = (props) => {
+    const { label, placeholder, selectedItem, options, showSelectedItemIcon, showUnselectedItemIcons } = props;
+    const renderUnselectedItemIcons = (optionsToRender, currentSelectedItem) => {
+        const optionSpans = optionsToRender
+            .filter(option => !option.header)
+            .map(option => ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: `margin-right-5 ${currentSelectedItem && currentSelectedItem.id === option.id ? '' : 'inactiveIcon'}` }, { children: option.icon }), option.id)));
+        return (0, jsx_runtime_1.jsx)("span", { children: optionSpans });
+    };
+    const getSelectedItemLabel = (item, placeholderValue) => {
+        if (showUnselectedItemIcons) {
+            return renderUnselectedItemIcons(options, item);
+        }
+        if (!item) {
+            // render a placeholder or if there is none render a non-breaking space " "
+            return placeholderValue ? (0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'placeholder' }, { children: placeholderValue })) : '\u00a0';
+        }
+        return ((0, jsx_runtime_1.jsxs)("span", { children: [item.icon && (0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'margin-right-5' }, { children: item.icon })), !showSelectedItemIcon && item.label] }));
+    };
+    return ((0, jsx_runtime_1.jsxs)("span", Object.assign({ className: 'selected-option-text' }, { children: [label && (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: 'selected-option-text-label' }, { children: [label, ":"] })), (0, jsx_runtime_1.jsx)("span", { children: getSelectedItemLabel(selectedItem, placeholder) })] })));
+};
+exports.default = SelectedOption;

package/lib/es/components/selects/WithFeedback.d.ts

@@ -0,0 +1,27 @@
+import React, { PropsWithChildren } from 'react';
+export type WithFeedbackProps = {
+    /**
+     * Defines the size of the select to be rendered
+     *
+     * @default 'md'
+     */
+    bsSize?: 'sm' | 'md' | 'lg';
+    /**
+     * Option to add an icon as a leading input addon to the select component
+     */
+    inputAddon?: string;
+    /**
+     * Input error message.
+     */
+    errorMessage?: string | React.ReactNode;
+    /**
+     * Input warning message.
+     */
+    warningMessage?: string | React.ReactNode;
+    /**
+     * Feedback message width.
+     */
+    messageWhiteSpace?: 'normal' | 'nowrap' | 'pre-line';
+};
+declare const WithFeedback: (props: PropsWithChildren<WithFeedbackProps>) => import("react/jsx-runtime").JSX.Element;
+export default WithFeedback;

package/lib/es/components/selects/WithFeedback.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+// @ts-ignore-next-line importsNotUsedAsValues
+require("react");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const WithFeedback = (props) => {
+    const { bsSize, inputAddon, errorMessage, warningMessage, messageWhiteSpace, children } = props;
+    const inputGroupClassNames = (0, classnames_1.default)('input-group', bsSize === 'sm' && 'input-group-sm', bsSize === 'lg' && 'input-group-lg');
+    const formGroupClassName = (0, classnames_1.default)('form-group margin-bottom-0', 'has-feedback', errorMessage && 'has-error', warningMessage && 'has-warning');
+    const hasFeedbackMessage = errorMessage || warningMessage;
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: formGroupClassName }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: inputGroupClassNames }, { children: [inputAddon && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'input-group-addon' }, { children: (0, jsx_runtime_1.jsx)("span", { className: inputAddon }) }))), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'form-control-feedback-wrapper' }, { children: [children, hasFeedbackMessage && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [errorMessage && (0, jsx_runtime_1.jsx)("span", { className: 'form-control-feedback rioglyph rioglyph-error-sign' }), warningMessage && ((0, jsx_runtime_1.jsx)("span", { className: 'form-control-feedback rioglyph rioglyph-warning-sign' })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: `help-block white-space-${messageWhiteSpace}` }, { children: (0, jsx_runtime_1.jsx)("span", { children: errorMessage || warningMessage }) }))] }))] }))] })) })));
+};
+exports.default = WithFeedback;

package/lib/es/components/selects/WithFeedbackAndAddon.d.ts

@@ -0,0 +1,29 @@
+import React, { type PropsWithChildren } from 'react';
+export type WithFeedbackAndAddonProps = {
+    /**
+     * Defines the size of the select to be rendered.
+     *
+     * @default 'md'
+     */
+    bsSize?: 'sm' | 'md' | 'lg';
+    /**
+     * Option to add an icon as a leading input addon to the select or multiselect component.
+     */
+    inputAddon?: string;
+    /**
+     * Input error message.
+     */
+    errorMessage?: string | React.ReactNode;
+    /**
+     * Input warning message.
+     */
+    warningMessage?: string | React.ReactNode;
+    /**
+     * Optional warning message white-space setting.
+     *
+     * @default 'normal'
+     */
+    messageWhiteSpace?: 'normal' | 'nowrap' | 'pre-line';
+};
+declare const WithFeedbackAndAddon: (props: PropsWithChildren<WithFeedbackAndAddonProps>) => import("react/jsx-runtime").JSX.Element;
+export default WithFeedbackAndAddon;

package/lib/es/components/selects/WithFeedbackAndAddon.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+// @ts-ignore-next-line importsNotUsedAsValues
+require("react");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const WithFeedbackAndAddon = (props) => {
+    const { bsSize = 'md', inputAddon, errorMessage, warningMessage, messageWhiteSpace = 'normal', children } = props;
+    const formGroupClassName = (0, classnames_1.default)('form-group margin-bottom-0', (errorMessage || warningMessage) && 'has-feedback', errorMessage && 'has-error', warningMessage && 'has-warning');
+    const inputGroupClassNames = (0, classnames_1.default)('input-group', bsSize === 'sm' && 'input-group-sm', bsSize === 'lg' && 'input-group-lg');
+    const hasFeedbackMessage = errorMessage || warningMessage;
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: formGroupClassName }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: inputGroupClassNames }, { children: [inputAddon && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'input-group-addon' }, { children: (0, jsx_runtime_1.jsx)("span", { className: inputAddon }) }))), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'form-control-feedback-wrapper' }, { children: [children, hasFeedbackMessage && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [errorMessage && (0, jsx_runtime_1.jsx)("span", { className: 'form-control-feedback rioglyph rioglyph-error-sign' }), warningMessage && ((0, jsx_runtime_1.jsx)("span", { className: 'form-control-feedback rioglyph rioglyph-warning-sign' })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: `help-block white-space-${messageWhiteSpace}` }, { children: (0, jsx_runtime_1.jsx)("span", { children: errorMessage || warningMessage }) }))] }))] }))] })) })));
+};
+exports.default = WithFeedbackAndAddon;

package/lib/es/components/sidebars/Sidebar.d.ts

@@ -1,112 +1,183 @@
+import React, { type PropsWithChildren } from 'react';
+import type { ObjectValues } from '../../utils/ObjectValues';
+declare const SidebarPosition: {
+    readonly LEFT: "left";
+    readonly RIGHT: "right";
+};
+export type SidebarProps = {
+    /**
+     * Defines if the component will overlap the body content.
+     * @default false
+     */
+    fly?: boolean;
+    /**
+     * Defines whether the component is hidden or not.
+     * @default false
+     */
+    closed?: boolean;
+    /**
+     * Hides the close button. This may be used when the sidebar is always visible and may not be closed.
+     * @default false
+     */
+    disableClose?: boolean;
+    /**
+     * Callback function triggered when clicking the close icon.
+     */
+    onClose?: VoidFunction;
+    /**
+     * The Footer content. For example a save button.
+     */
+    footer?: string | React.ReactNode;
+    /**
+     * Additional classes added to the Sidebar footer.
+     */
+    footerClassName?: string;
+    /**
+     * Additional buttons to be rendered in the header.
+     */
+    headerButtons?: React.ReactNode;
+    /**
+     * Additional classes added to the Sidebar header.
+     */
+    headerClassName?: string;
+    /**
+     * Shows a sidebar header border
+     */
+    showHeaderBorder?: boolean;
+    /**
+     * Defines the width of the component. The value is set as pixel value as inline style.
+     * Note: In the past, the type allowed to pass in a sting value like "400px" but that is not
+     * possible anymore due to internal width calculations. To be backwards compatible for non
+     * Typescript projects, the width is converted to a number.
+     * @default 350
+     */
+    width?: number;
+    /**
+     * Defines the minimum width in px of the component that will take effect when resizing.
+     * @default 100
+     */
+    minWidth?: number;
+    /**
+     * Defines the maximum width in px of the component that will take effect when resizing.
+     * @default 800
+     */
+    maxWidth?: number;
+    /**
+     * Opens Sidebar in fullscreen, means 100vw.
+     * @default false
+     */
+    openInFullscreen?: boolean;
+    /**
+     * Callback for when the fullscreen is toggled.
+     */
+    onFullScreenChange?: VoidFunction;
+    /**
+     * Enables the fullscreen functionality and shows the fullscreen toggle.
+     * @default false
+     */
+    enableFullscreenToggle?: boolean;
+    /**
+     * Translated tooltip text for the fullscreen toggle button.
+     */
+    fullscreenToggleTooltip?: string;
+    /**
+     * @deprecated Please use `headerButtons` instead. This allows to also add
+     * translated tooltips to the next and previous button
+     */
+    enableNavigationButtons?: boolean;
+    /**
+     * @deprecated Please use `enableFullscreenToggle` instead.
+     */
+    disableFullscreen?: boolean;
+    /**
+     * @deprecated Please use `openInFullscreen` instead.
+     */
+    fullscreen?: boolean;
+    /**
+     * Tells the sidebar where it is positioned. This will affect the resizing behavior
+     * respectively. Note: the position need to be set properly whe using the resize
+     * functionality to know on which side of the sidebar to attach the resizer handle.
+     *
+     * It is also relevant when the sidebar mode is set to 'fly' to properly animate
+     * the sidebar into the view.
+     *
+     * Possible values are:
+     * `left`, `right`, `Sidebar.LEFT` or `Sidebar.RIGHT`.
+     *
+     * @default 'left'
+     */
+    position?: ObjectValues<typeof SidebarPosition>;
+    /**
+     * Defines whether or not the sidebar is resizable.
+     * @default false
+     */
+    resizable?: boolean;
+    /**
+     * Callback for when the resize is done.
+     */
+    onResizeEnd?: VoidFunction;
+    /**
+     * Defines the breakpoint in pixel when the sidebar mode shall be changed. If the window width is lower
+     * than the given breakpoint the mode is set to `fly`. If the window width is higher the mode is set
+     * to `fluid`. This functionality is disabled by default and will be enabled when defining a breakpoint
+     * higher than 0.
+     */
+    switchModeBreakpoint?: number;
+    /**
+     * By default the fullscreen mode can be left with "esc". If this is unwanted it can be disabled.
+     * @default false
+     */
+    disableEsc?: boolean;
+    /**
+     * Defined whether or not a backdrop will be rendered behind the Sidebar to avoid clicks outside.
+     * @default false
+     */
+    hasBackdrop?: boolean;
+    /**
+     * Defined whether or not the UIKIT SmoothScrollbar is active
+     * @default false
+     */
+    hasSmoothScrollbar?: boolean;
+    /**
+     * Defined whether or not the backdrop is visible similar to the backdrop for modal dialogs.
+     * @default false
+     */
+    makeBackdropVisible?: boolean;
+    /**
+     * Callback for when the backdrop is clicked. This comes in handy when handling transient data from
+     * the sidebar which need to be saved first and handle clicks outside.
+     */
+    onBackdropClick?: VoidFunction;
+    /**
+     * Additional ref added to the Sidebar body.
+     */
+    bodyRef?: React.MutableRefObject<HTMLDivElement | null>;
+    /**
+     * Content that will be displayed in the components header.
+     */
+    title?: string | React.ReactNode;
+    /**
+     * Additional classes added to the Sidebar title.
+     */
+    titleClassName?: string;
+    /**
+     * Additional classes added to the Sidebar backdrop.
+     */
+    backdropClassName?: string;
+    /**
+     * Additional classes added to the Sidebar body.
+     */
+    bodyClassName?: string;
+    /**
+     * Additional classes added on the wrapper element.
+     */
+    className?: string;
+};
+declare const Sidebar: {
+    (props: PropsWithChildren<SidebarProps>): import("react/jsx-runtime").JSX.Element;
+    LEFT: "left";
+    RIGHT: "right";
+    MODE_FLY: string;
+    MODE_FLUID: string;
+};
 export default Sidebar;
-declare class Sidebar extends React.Component<any, any, any> {
-    constructor(props: any);
-    state: {
-        width: any;
-        sidebarMode: string;
-        isFullscreen: any;
-    };
-    handleResizeStart(): void;
-    handleResize(diff: any): void;
-    handleResizeEnd(): void;
-    handleFullscreenChange(): void;
-    handleEscFullscreen(event: any): void;
-    onWindowResize(): void;
-    componentDidMount(): void;
-    resizeListener: {
-        remove(): void;
-    } | undefined;
-    onDocumentKeydownListener: {
-        remove(): void;
-    } | undefined;
-    componentWillUnmount(): void;
-    adaptSidebarMode(): void;
-    getWidthInBoundaries(minWidth: any, maxWidth: any, width: any): any;
-    handlePrevContent(): void;
-    handleNextContent(): void;
-    render(): import("react/jsx-runtime").JSX.Element;
-    sidebarRef: HTMLDivElement | null | undefined;
-}
-declare namespace Sidebar {
-    const LEFT: string;
-    const RIGHT: string;
-    const MODE_FLY: string;
-    const MODE_FLUID: string;
-    namespace defaultProps {
-        export const closed: boolean;
-        export const width: number;
-        export const minWidth: number;
-        export const maxWidth: number;
-        export const resizable: boolean;
-        export function onResizeEnd(): void;
-        export const disableEsc: boolean;
-        export const enableFullscreenToggle: boolean;
-        export const enableNavigationButtons: boolean;
-        export const disableClose: boolean;
-        import position = Sidebar.LEFT;
-        export { position };
-        export const fly: boolean;
-        export const switchModeBreakpoint: number;
-        export function onClose(): void;
-        export const useBackdrop: boolean;
-        export const openInfullscreen: boolean;
-        export function onFullScreenChange(): void;
-        export const makeBackdropVisible: boolean;
-        export function onBackdropClick(): void;
-        export const backdropClassName: string;
-    }
-    namespace propTypes {
-        const closed_1: PropTypes.Requireable<boolean>;
-        export { closed_1 as closed };
-        const fly_1: PropTypes.Requireable<boolean>;
-        export { fly_1 as fly };
-        const switchModeBreakpoint_1: PropTypes.Requireable<number>;
-        export { switchModeBreakpoint_1 as switchModeBreakpoint };
-        const resizable_1: PropTypes.Requireable<boolean>;
-        export { resizable_1 as resizable };
-        const onResizeEnd_1: PropTypes.Requireable<(...args: any[]) => any>;
-        export { onResizeEnd_1 as onResizeEnd };
-        const disableEsc_1: PropTypes.Requireable<boolean>;
-        export { disableEsc_1 as disableEsc };
-        const position_1: PropTypes.Requireable<string>;
-        export { position_1 as position };
-        const width_1: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
-        export { width_1 as width };
-        const minWidth_1: PropTypes.Requireable<number>;
-        export { minWidth_1 as minWidth };
-        const maxWidth_1: PropTypes.Requireable<number>;
-        export { maxWidth_1 as maxWidth };
-        export const className: PropTypes.Requireable<string>;
-        export const headerClassName: PropTypes.Requireable<string>;
-        export const titleClassName: PropTypes.Requireable<string>;
-        export const bodyClassName: PropTypes.Requireable<string>;
-        export const footerClassName: PropTypes.Requireable<string>;
-        export const title: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-        const onClose_1: PropTypes.Requireable<(...args: any[]) => any>;
-        export { onClose_1 as onClose };
-        const disableClose_1: PropTypes.Requireable<boolean>;
-        export { disableClose_1 as disableClose };
-        export const footer: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-        export const fullscreen: PropTypes.Requireable<boolean>;
-        export const openInFullscreen: PropTypes.Requireable<boolean>;
-        const onFullScreenChange_1: PropTypes.Requireable<(...args: any[]) => any>;
-        export { onFullScreenChange_1 as onFullScreenChange };
-        export const disableFullscreen: PropTypes.Requireable<boolean>;
-        const enableFullscreenToggle_1: PropTypes.Requireable<boolean>;
-        export { enableFullscreenToggle_1 as enableFullscreenToggle };
-        const enableNavigationButtons_1: PropTypes.Requireable<boolean>;
-        export { enableNavigationButtons_1 as enableNavigationButtons };
-        const useBackdrop_1: PropTypes.Requireable<boolean>;
-        export { useBackdrop_1 as useBackdrop };
-        const makeBackdropVisible_1: PropTypes.Requireable<boolean>;
-        export { makeBackdropVisible_1 as makeBackdropVisible };
-        const onBackdropClick_1: PropTypes.Requireable<(...args: any[]) => any>;
-        export { onBackdropClick_1 as onBackdropClick };
-        const backdropClassName_1: PropTypes.Requireable<string>;
-        export { backdropClassName_1 as backdropClassName };
-        export const bodyRef: PropTypes.Requireable<object>;
-        export const headerButtons: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-    }
-}
-import React from "react";
-import PropTypes from "prop-types";