@rio-cloud/rio-uikit 0.16.4-beta.22 → 0.16.4-beta.23

package/components/autosuggest/AutoSuggest.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 export type AutoSuggestSuggestion = {
-    label: string;
+    label?: string;
     disabled?: boolean;
     [name: string]: string | React.ReactNode;
 };
@@ -9,6 +9,10 @@ export type SelectedSuggestion = {
     suggestion: AutoSuggestSuggestion;
 };
 export type AutoSuggestInputProps = {
+    /**
+     * A native input id attribute. Passed through as HTML attribute to the input element.
+     */
+    id?: string;
     /**
      * The value to be set for the input. Using this prop the input can be controlled from the outside.
      */
@@ -79,7 +83,11 @@ export type AutoSuggestInputProps = {
      */
     className?: string;
 };
-export type AutoSuggestProps = {
+export type AutoSuggestProps<T = AutoSuggestSuggestion> = {
+    /**
+     * A native input id attribute on the component root. Passed through as HTML attribute to the input element.
+     */
+    id?: string;
     /**
      * Object to define properties for the input component. For the input, the ClearableInput
      * component is used.
@@ -88,6 +96,10 @@ export type AutoSuggestProps = {
     /**
      * Array of items which will be displayed. Items can be arbitrary objects as long as they
      * have a label defined.
+     *
+     * __Important__: in case you specify your own custom renderer via `renderSuggestion` prop, you
+     * can pass our own object that does not need to have a label. In this case you may want to
+     * specify the `customSuggestionKey` to avoid react throwing an error of rendering menu items with the same key.
      */
     suggestions?: AutoSuggestSuggestion[];
     /**
@@ -138,6 +150,11 @@ export type AutoSuggestProps = {
      * @returns
      */
     renderSuggestion?: (suggestion: AutoSuggestSuggestion) => React.ReactNode;
+    /**
+     * When rendering your own custom suggestions that do not have the `label` attribute, use this prop to specify
+     * a unique value for each suggestion which will be used as a react key for the individual menu items.
+     */
+    customSuggestionKey?: string;
     /**
      * Boolean that disabled autoDropDirection and opens the dropdown-menu be above the toggle.
      * @default false

package/components/autosuggest/AutoSuggest.js

@@ -15,7 +15,8 @@ import AutoSuggestAddons from './AutoSuggestAddons';
 import DropdownSpinner from './DropdownSpinner';
 import NoItemMessage from './NoItemMessage';
 export const AutoSuggest = (props) => {
-    const { onSuggestionSelected = noop, onSuggestionsFetchRequested = noop, onSuggestionHighlighted = noop, renderSuggestion = suggestion => suggestion.label, getSuggestionValue = suggestion => suggestion.label, suggestions = [], autoDropDirection = true, pullRight = false, dropup = false, isLoading = false, openOnFocus = false, closeOnSelect = true, showSelectedItemsInInput = true, autoComplete = 'off', inputProps = {
+    const { id, onSuggestionSelected = noop, onSuggestionsFetchRequested = noop, onSuggestionHighlighted = noop, renderSuggestion = (suggestion) => suggestion.label, customSuggestionKey, getSuggestionValue = (suggestion) => { var _a; return (_a = suggestion.label) !== null && _a !== void 0 ? _a : suggestion === null || suggestion === void 0 ? void 0 : suggestion.customSuggestionKey; }, suggestions = [], autoDropDirection = true, pullRight = false, dropup = false, isLoading = false, openOnFocus = false, closeOnSelect = true, showSelectedItemsInInput = true, autoComplete = 'off', inputProps = {
+        id,
         disabled: false,
         onChange: noop,
         onClear: noop,
@@ -26,7 +27,7 @@ export const AutoSuggest = (props) => {
         tabIndex: 0,
         value: undefined,
         icon: undefined,
-    }, leadingInputAddons, trailingInputAddons, noItemMessage, dropdownClassName = '', className = '' } = props, remainingProps = __rest(props, ["onSuggestionSelected", "onSuggestionsFetchRequested", "onSuggestionHighlighted", "renderSuggestion", "getSuggestionValue", "suggestions", "autoDropDirection", "pullRight", "dropup", "isLoading", "openOnFocus", "closeOnSelect", "showSelectedItemsInInput", "autoComplete", "inputProps", "leadingInputAddons", "trailingInputAddons", "noItemMessage", "dropdownClassName", "className"]);
+    }, leadingInputAddons, trailingInputAddons, noItemMessage, dropdownClassName = '', className = '' } = props, remainingProps = __rest(props, ["id", "onSuggestionSelected", "onSuggestionsFetchRequested", "onSuggestionHighlighted", "renderSuggestion", "customSuggestionKey", "getSuggestionValue", "suggestions", "autoDropDirection", "pullRight", "dropup", "isLoading", "openOnFocus", "closeOnSelect", "showSelectedItemsInInput", "autoComplete", "inputProps", "leadingInputAddons", "trailingInputAddons", "noItemMessage", "dropdownClassName", "className"]);
     const [isOpen, setIsOpen] = useState(false);
     const [value, setValue] = useState(inputProps.value || '');
     const [highlightedItemIndex, setHighlightedItemIndex] = useState(-1);
@@ -173,8 +174,8 @@ export const AutoSuggest = (props) => {
         }
     };
     const renderInput = () => {
-        const { icon, value: ignoredExternalValue } = inputProps, remainingInputProps = __rest(inputProps, ["icon", "value"]);
-        const clearableProps = Object.assign(Object.assign({}, remainingInputProps), { onClick: () => openMenu });
+        const { id: inputPropId, icon, value: ignoredExternalValue } = inputProps, remainingInputProps = __rest(inputProps, ["id", "icon", "value"]);
+        const clearableProps = Object.assign(Object.assign({ id: id !== null && id !== void 0 ? id : inputPropId }, remainingInputProps), { onClick: () => openMenu });
         const input = (_jsx(ClearableInput, Object.assign({}, clearableProps, { ref: inputRef, autoComplete: autoComplete, onChange: handleInputChange, onClear: clearInputValue, onFocus: handleFocus, value: showSelectedItemsInInput ? value : '' })));
         if (icon || leadingInputAddons || trailingInputAddons) {
             return (_jsx(AutoSuggestAddons, Object.assign({ icon: icon, leadingInputAddons: leadingInputAddons, trailingInputAddons: trailingInputAddons }, { children: input })));
@@ -191,10 +192,12 @@ export const AutoSuggest = (props) => {
             return null;
         }
         return (_jsxs("ul", Object.assign({ role: 'menu', className: dropdownMenuClasses, ref: dropdownMenuRef }, { children: [hasNoSuggestions && noItemMessage && _jsx(NoItemMessage, { message: noItemMessage }, 'NoItemMessage'), suggestions.map((suggestion, index) => {
-                    if (suggestion.header) {
-                        return _jsx(DropdownHeader, { label: suggestion.label }, suggestion.label);
+                    var _a;
+                    const key = `index-${(_a = suggestion.label) !== null && _a !== void 0 ? _a : suggestion[customSuggestionKey !== null && customSuggestionKey !== void 0 ? customSuggestionKey : '']}`;
+                    if (suggestion.header && suggestion.label) {
+                        return _jsx(DropdownHeader, { label: suggestion.label }, key);
                     }
-                    return (_jsx(MenuItem, { active: index === highlightedItemIndex, disabled: suggestion.disabled, value: suggestion.customSuggestion ? suggestion.customSuggestion : renderSuggestion(suggestion), onSelect: (_, event) => onSuggestionClicked(event, suggestion), index: index, onMouseEnter: onMouseEnter }, `index-${suggestion.label}`));
+                    return (_jsx(MenuItem, { active: index === highlightedItemIndex, disabled: suggestion.disabled, value: suggestion.customSuggestion ? suggestion.customSuggestion : renderSuggestion(suggestion), onSelect: (_, event) => onSuggestionClicked(event, suggestion), index: index, onMouseEnter: onMouseEnter }, key));
                 })] })));
     };
     const classes = classNames('AutoSuggest', 'dropdown', isOpen && 'open', dropDirection.dropup && 'dropup', className);

package/components/button/Button.d.ts

@@ -10,21 +10,21 @@ export declare const STYLES_MAP: {
     readonly SUCCESS: "success";
     readonly MUTED: "muted";
 };
-type STYLE = ObjectValues<typeof STYLES_MAP>;
+export type BUTTON_STYLE = ObjectValues<typeof STYLES_MAP>;
 export declare const VARIANTS_MAP: {
     readonly VARIANT_LINK: "link";
     readonly VARIANT_LINK_INLINE: "link-inline";
     readonly VARIANT_OUTLINE: "outline";
     readonly VARIANT_ACTION: "action";
 };
-type VARIANT = ObjectValues<typeof VARIANTS_MAP>;
+export type BUTTON_VARIANT = ObjectValues<typeof VARIANTS_MAP>;
 export declare const SIZES_MAP: {
     readonly XS: "xs";
     readonly SM: "sm";
     readonly MD: "md";
     readonly LG: "lg";
 };
-type SIZE = ObjectValues<typeof SIZES_MAP>;
+export type BUTTON_SIZE = ObjectValues<typeof SIZES_MAP>;
 type RegularButton = {
     /**
      * Use the button as a toggle button. The toggle state can be controlled via the `active` prop.
@@ -37,7 +37,7 @@ type RegularButton = {
      */
     onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
 };
-export type ToggleButton = {
+type ToggleButton = {
     /**
      * Use the button as a toggle button. The toggle state can be controlled via the `active` prop.
      * @default false
@@ -50,17 +50,17 @@ export type ToggleButton = {
     onClick?: (value: boolean) => void;
 };
 export type ButtonProps = Omit<HTMLProps<HTMLButtonElement>, 'type' | 'onClick'> & {
-    /**
-     * Set the button toggled. Should be used in combination with "asToggle" prop.
-     * @default false
-     */
-    active?: boolean;
     /**
      * Whether the button should be disabled.
      *
      * @default false
      */
     disabled?: boolean;
+    /**
+     * Set the button toggled. Should be used in combination with "asToggle" prop.
+     * @default false
+     */
+    active?: boolean;
     /**
      * Defines the type of the button. This may be used for form submit buttons.
      * @default 'button'
@@ -92,15 +92,15 @@ export type ButtonProps = Omit<HTMLProps<HTMLButtonElement>, 'type' | 'onClick'>
      * Sets the button style.
      * @default "default"
      */
-    bsStyle?: STYLE;
+    bsStyle?: BUTTON_STYLE;
     /**
      * Sets the button size.
      */
-    bsSize?: SIZE;
+    bsSize?: BUTTON_SIZE;
     /**
      * Sets the button variant.
      */
-    variant?: VARIANT;
+    variant?: BUTTON_VARIANT;
     /**
      * Whether the "ripple" effect should be suppressed on this button.
      */

package/components/button/ToggleButton.d.ts

@@ -1,5 +1,11 @@
 import { type PropsWithChildren } from 'react';
-import { type ToggleButton as Props } from './Button';
-export type ToggleButtonProps = Props;
+import { type ButtonProps } from './Button';
+export type ToggleButtonProps = Omit<ButtonProps, 'onClick'> & {
+    /**
+     * Callback function triggered when clicking the button.
+     * @param value The new value of the toggle button.
+     */
+    onClick?: (value: boolean) => void;
+};
 declare const ToggleButton: (props: PropsWithChildren<ToggleButtonProps>) => import("react/jsx-runtime").JSX.Element;
 export default ToggleButton;

package/components/button/ToggleButton.js

@@ -2,5 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 // @ts-ignore-next-line importsNotUsedAsValues
 import 'react';
 import Button from './Button';
+// @ts-ignore - the Button throws TS error due to refs that may be checked at a later point in time
 const ToggleButton = (props) => _jsx(Button, Object.assign({}, props, { asToggle: true }));
 export default ToggleButton;

package/components/clearableInput/ClearableInput.d.ts

@@ -111,6 +111,12 @@ export type ClearableInputProps = {
      * @default '_'
      */
     maskPlaceholder?: string | null;
+    /**
+     * Disabled the input component.
+     *
+     * @default false
+     */
+    disabled?: boolean;
     /**
      * Whether mask prefix and placeholder should be displayed when input is empty and
      * has no focus.

package/components/clearableInput/ClearableInput.js

@@ -13,7 +13,7 @@ export const DEFAULT_TYPE = 'text';
 export const SUPPORTED_TYPES = ['text', 'password', 'email'];
 const hasValue = (value) => !isEmpty(`${value}`);
 const ClearableInput = forwardRef((props, ref) => {
-    const { type = DEFAULT_TYPE, defaultValue, value, maxLength, tabIndex = 0, hasError = false, inputRef, autoComplete, onChange = noop, onBlur = noop, onFocus = noop, onClear = noop, onKeyPress = noop, mask, maskPlaceholder = '_', alwaysShowMask = false, inputClassName = '', className = '', children } = props, remainingProps = __rest(props, ["type", "defaultValue", "value", "maxLength", "tabIndex", "hasError", "inputRef", "autoComplete", "onChange", "onBlur", "onFocus", "onClear", "onKeyPress", "mask", "maskPlaceholder", "alwaysShowMask", "inputClassName", "className", "children"]);
+    const { type = DEFAULT_TYPE, defaultValue, value, maxLength, tabIndex = 0, hasError = false, inputRef, autoComplete, onChange = noop, onBlur = noop, onFocus = noop, onClear = noop, onKeyPress = noop, mask, maskPlaceholder = '_', alwaysShowMask = false, inputClassName = '', disabled = false, className = '', children } = props, remainingProps = __rest(props, ["type", "defaultValue", "value", "maxLength", "tabIndex", "hasError", "inputRef", "autoComplete", "onChange", "onBlur", "onFocus", "onClear", "onKeyPress", "mask", "maskPlaceholder", "alwaysShowMask", "inputClassName", "disabled", "className", "children"]);
     const initialValue = value || defaultValue || '';
     const [inputValue, setInputValue] = useState(initialValue);
     const [showClear, setShowClear] = useState(hasValue(initialValue));
@@ -56,14 +56,15 @@ const ClearableInput = forwardRef((props, ref) => {
             onClear(event);
         }
     };
-    const classes = classNames('ClearableInput', 'input-group', hasError && 'has-error', className && className);
-    const inputClassNames = classNames('form-control', inputClassName, showClear && 'withClearButton', hasMask && 'withInputMask');
+    const classes = classNames('ClearableInput', 'input-group', hasError && 'has-error', disabled && 'pointer-events-none', className && className);
+    const inputClassNames = classNames('form-control', inputClassName, showClear && 'withClearButton', hasMask && 'withInputMask', disabled && 'disabled');
     const clearButtonClassNames = classNames('clearButton', !showClear && 'hide');
     const convertedType = type === null || type === void 0 ? void 0 : type.toLowerCase();
     const inputType = SUPPORTED_TYPES.indexOf(convertedType) !== -1 ? convertedType : DEFAULT_TYPE;
     const inputProps = Object.assign(Object.assign({}, omit(['value', 'defaultValue', 'onClear'])(remainingProps)), { className: inputClassNames, autoComplete, type: inputType, value: inputValue, onChange: handleChange, onKeyPress: handleKeyPress, onBlur,
-        onFocus, maxLength: hasMask ? undefined : maxLength, tabIndex, ref: inputRef || ref });
-    const input = hasMask ? (_jsx(InputMask, Object.assign({}, inputProps, { mask: mask, maskPlaceholder: maskPlaceholder, alwaysShowMask: alwaysShowMask }))) : (_jsx("input", Object.assign({}, inputProps)));
+        onFocus,
+        disabled, maxLength: hasMask ? undefined : maxLength, tabIndex, ref: inputRef || ref });
+    const input = hasMask ? (_jsx(InputMask, Object.assign({}, inputProps, { disabled: disabled, mask: mask, maskPlaceholder: maskPlaceholder, alwaysShowMask: alwaysShowMask }))) : (_jsx("input", Object.assign({}, inputProps)));
     return (_jsxs("div", Object.assign({ className: classes }, { children: [children && isFunction(children) ? children(inputProps) : input, _jsx("span", Object.assign({ className: clearButtonClassNames, onClick: clearInputValue }, { children: _jsx("span", { className: 'clearButtonIcon rioglyph rioglyph-remove-sign' }) }))] })));
 });
 export default ClearableInput;

package/components/dialog/Dialog.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
 export type bsSizeDialog = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full' | 'fullwidth' | 'fullheight' | 'fullscreen';
 export type BaseDialogProps = {
     /**
@@ -89,7 +89,10 @@ export type DialogProps = BaseDialogProps & {
     onCloseValidation?: () => boolean;
 };
 declare const Dialog: {
-    (props: DialogProps): React.ReactPortal;
+    (props: PropsWithChildren<DialogProps>): React.ReactPortal;
+    Title: (props: import("./DialogHeader").DialogHeaderProps) => import("react/jsx-runtime").JSX.Element;
+    Body: ({ className, children, ...remainingProps }: React.PropsWithChildren<import("./DialogBody").DialogBodyProps>) => import("react/jsx-runtime").JSX.Element;
+    Footer: (props: React.PropsWithChildren<import("./DialogFooter").DialogFooterProps>) => import("react/jsx-runtime").JSX.Element;
     SIZE_XS: "xs";
     SIZE_SM: "sm";
     SIZE_MD: "md";

package/components/dialog/Dialog.js

@@ -5,7 +5,7 @@ import ReactDOM from 'react-dom';
 import classNames from 'classnames';
 import activeElement from 'dom-helpers/activeElement';
 import noop from 'lodash/fp/noop';
-import { CSSTransition } from 'react-transition-group';
+import { AnimatePresence, motion } from 'framer-motion';
 import { getOrCreatePortalRoot } from '../../utils/portalRoot';
 import useEsc from '../../hooks/useEsc';
 import useAfterMount from '../../hooks/useAfterMount';
@@ -13,10 +13,11 @@ import DialogHeader from './DialogHeader';
 import DialogBody from './DialogBody';
 import DialogFooter from './DialogFooter';
 import useFocusTrap from '../../hooks/useFocusTrap';
+import { DialogContextProvider } from './dialogContext';
 const MODAL_DIALOG_CLASS = 'modal-dialog';
 const MODAL_OPEN_CLASS = 'modal-open';
 const Dialog = (props) => {
-    const { title, subtitle, body, footer, headerButtons, className = '', bodyClassName, footerClassName, showXsDialogBorders = false, showCloseButton = true, useOverflow = false, bsSize, show = false, onHide = noop, onClose, disableEsc = false, onEsc = noop, onCloseValidation = () => true } = props, remainingProps = __rest(props, ["title", "subtitle", "body", "footer", "headerButtons", "className", "bodyClassName", "footerClassName", "showXsDialogBorders", "showCloseButton", "useOverflow", "bsSize", "show", "onHide", "onClose", "disableEsc", "onEsc", "onCloseValidation"]);
+    const { title, subtitle, body, footer, headerButtons, className = '', bodyClassName, footerClassName, showXsDialogBorders = false, showCloseButton = true, useOverflow = false, bsSize, show = false, onHide = noop, onClose, disableEsc = false, onEsc = noop, onCloseValidation = () => true, children } = props, remainingProps = __rest(props, ["title", "subtitle", "body", "footer", "headerButtons", "className", "bodyClassName", "footerClassName", "showXsDialogBorders", "showCloseButton", "useOverflow", "bsSize", "show", "onHide", "onClose", "disableEsc", "onEsc", "onCloseValidation", "children"]);
     const [open, setOpen] = useState(show);
     const dialogWrapperRef = useRef(null);
     const onCloseCallback = onClose !== null && onClose !== void 0 ? onClose : onHide;
@@ -60,26 +61,56 @@ const Dialog = (props) => {
             closeDialog(true);
         }
     });
-    const handleEntered = () => {
+    const handleAnimationComplete = (definition) => {
         var _a;
+        // The animation complete callback is invoked too when closing the dialog.
+        // For that we check the animation props like the "opacity" to skip focusing
+        // on the way out when closing the dialog.
+        // @ts-ignore
+        if (definition.opacity === 0) {
+            return;
+        }
         const dialogElement = dialogWrapperRef.current;
         const currentActiveElement = activeElement(document);
         // Set the focus to the dialog if no element inside has focus already. Otherwise, focused
-        // elements like inputs would loos their focus to the dialog.
+        // elements like inputs would loose their focus to the dialog.
         // Note that in order to focus the dialog itself, the tabindex has to be set on that element
+        // IMPORTANT: make sure the dialog has a tabIndex prop
         if (!(dialogElement === null || dialogElement === void 0 ? void 0 : dialogElement.contains(currentActiveElement))) {
             (_a = dialogWrapperRef === null || dialogWrapperRef === void 0 ? void 0 : dialogWrapperRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         }
     };
     const modalClasses = classNames('modal', 'show', className);
     const isSmallestDialog = bsSize === 'xs';
-    const hasChildren = false;
+    const hasChildren = !!children;
     const modalDialogClasses = classNames(MODAL_DIALOG_CLASS, useOverflow && 'modal-overflow', bsSize === 'xs' && 'modal-xs', bsSize === 'sm' && 'modal-sm', bsSize === 'lg' && 'modal-lg', bsSize === 'lg' && 'modal-xl', bsSize === 'full' && 'modal-full-width', bsSize === 'fullwidth' && 'modal-full-width', bsSize === 'fullheight' && 'modal-full-height', bsSize === 'fullscreen' && 'modal-fullscreen');
-    return ReactDOM.createPortal(_jsx(CSSTransition, Object.assign({ in: open, timeout: 200, classNames: 'modal', unmountOnExit: true, onEntered: handleEntered }, { children: _jsxs("div", Object.assign({}, remainingProps, { className: modalClasses, role: 'dialog', ref: dialogWrapperRef, "aria-label": 'dialog' }, { children: [_jsx("div", Object.assign({ ref: setFocusTrapRef, className: modalDialogClasses, role: 'document' }, { children: _jsx("div", Object.assign({ className: 'modal-content' }, { children: !hasChildren && (_jsxs(_Fragment, { children: [title && (_jsx(DialogHeader, { title: title, subtitle: subtitle, headerButtons: isSmallestDialog ? false : headerButtons, showCloseButton: isSmallestDialog ? false : showCloseButton, showXsDialogBorders: isSmallestDialog ? showXsDialogBorders : true, onClose: handleCloseButton })), body && _jsx(DialogBody, Object.assign({ className: bodyClassName }, { children: body })), footer && (_jsx(DialogFooter, Object.assign({ className: footerClassName, showXsDialogBorders: isSmallestDialog ? showXsDialogBorders : true }, { children: footer })))] })) })) })), _jsx("div", { className: 'modal-backdrop' })] })) })), modalRoot);
+    const spring = {
+        type: 'spring',
+        damping: 33,
+        stiffness: 500,
+    };
+    const springXs = {
+        type: 'spring',
+        damping: 25,
+        stiffness: 400,
+    };
+    return ReactDOM.createPortal(_jsx(DialogContextProvider, Object.assign({ value: { onClose: handleCloseButton, isSmallestDialog, showXsDialogBorders, showCloseButton } }, { children: _jsx(AnimatePresence
+        // Disable any initial animations on children that
+        // are present when the component is first rendered
+        , Object.assign({ 
+            // Disable any initial animations on children that
+            // are present when the component is first rendered
+            initial: false, 
+            // Only render one component at a time.
+            // The exiting component will finish its exit
+            // animation before entering component is rendered
+            exitBeforeEnter: true }, { children: open && (_jsxs("div", Object.assign({}, remainingProps, { className: modalClasses, role: 'dialog', ref: dialogWrapperRef, "aria-label": 'dialog', tabIndex: 0 }, { children: [_jsx(motion.div, Object.assign({ initial: { opacity: 0, y: '-50%' }, animate: { opacity: 1, y: 0, transition: isSmallestDialog ? springXs : spring }, exit: { opacity: 0, y: '-150%' }, transition: { opacity: 0.2, y: 0.3 }, onAnimationComplete: handleAnimationComplete, 
+                        // @ts-ignore
+                        ref: setFocusTrapRef, className: modalDialogClasses, role: 'document' }, { children: _jsxs("div", Object.assign({ className: 'modal-content' }, { children: [hasChildren && children, !hasChildren && (_jsxs(_Fragment, { children: [title && (_jsx(DialogHeader, { title: title, subtitle: subtitle, headerButtons: headerButtons })), body && _jsx(DialogBody, Object.assign({ className: bodyClassName }, { children: body })), footer && _jsx(DialogFooter, Object.assign({ className: footerClassName }, { children: footer }))] }))] })) })), _jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.1 }, className: 'modal-backdrop' })] }))) })) })), modalRoot);
 };
-// Dialog.Title = DialogHeader;
-// Dialog.Body = DialogBody;
-// Dialog.Footer = DialogFooter;
+Dialog.Title = DialogHeader;
+Dialog.Body = DialogBody;
+Dialog.Footer = DialogFooter;
 Dialog.SIZE_XS = 'xs';
 Dialog.SIZE_SM = 'sm';
 Dialog.SIZE_MD = 'md'; // default

package/components/dialog/DialogBody.d.ts

@@ -1,5 +1,8 @@
 import { type PropsWithChildren } from 'react';
 export type DialogBodyProps = {
+    /**
+     * Additional classes for the modal-body element.
+     */
     className?: string;
 };
 declare const DialogBody: ({ className, children, ...remainingProps }: PropsWithChildren<DialogBodyProps>) => import("react/jsx-runtime").JSX.Element;

package/components/dialog/DialogFooter.d.ts

@@ -1,6 +1,8 @@
 import { type PropsWithChildren } from 'react';
 export type DialogFooterProps = {
-    showXsDialogBorders: boolean;
+    /**
+     * Additional classes for the modal-footer element.
+     */
     className?: string;
 };
 declare const DialogFooter: (props: PropsWithChildren<DialogFooterProps>) => import("react/jsx-runtime").JSX.Element;

package/components/dialog/DialogFooter.js

@@ -3,9 +3,12 @@ import { jsx as _jsx } from "react/jsx-runtime";
 // @ts-ignore-next-line importsNotUsedAsValues
 import 'react';
 import classNames from 'classnames';
+import { useDialogContext } from './dialogContext';
 const DialogFooter = (props) => {
-    const { className = '', showXsDialogBorders, children } = props, remainingProps = __rest(props, ["className", "showXsDialogBorders", "children"]);
-    const footerClassNames = classNames('modal-footer', !showXsDialogBorders && 'border-top-none padding-top-0', className);
+    const { className = '', children } = props, remainingProps = __rest(props, ["className", "children"]);
+    const { isSmallestDialog, showXsDialogBorders } = useDialogContext();
+    const doShowXsDialogBorders = isSmallestDialog ? showXsDialogBorders : true;
+    const footerClassNames = classNames('modal-footer', !doShowXsDialogBorders && 'border-top-none padding-top-0', className);
     return (_jsx("div", Object.assign({}, remainingProps, { className: footerClassNames, "aria-label": 'dialog footer' }, { children: children })));
 };
 export default DialogFooter;

package/components/dialog/DialogHeader.d.ts

@@ -1,11 +1,17 @@
 import React from 'react';
 export type DialogHeaderProps = {
+    /**
+     * The dialog title (can also be a FormattedMessage component).
+     */
     title: string | React.ReactNode;
+    /**
+     * The dialog header subtitle content.
+     */
     subtitle?: string | React.ReactNode;
-    showCloseButton?: boolean;
-    onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Allows to add additional buttons to the dialog header.
+     */
     headerButtons?: React.ReactNode;
-    showXsDialogBorders: boolean;
 };
 declare const DialogHeader: (props: DialogHeaderProps) => import("react/jsx-runtime").JSX.Element;
 export default DialogHeader;

package/components/dialog/DialogHeader.js

@@ -1,12 +1,16 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import noop from 'lodash/fp/noop';
+import 'lodash/fp/noop';
 import classNames from 'classnames';
+import { useDialogContext } from './dialogContext';
 const DialogHeader = (props) => {
-    const { title, subtitle, headerButtons, showCloseButton = true, showXsDialogBorders, onClose = noop } = props, remainingProps = __rest(props, ["title", "subtitle", "headerButtons", "showCloseButton", "showXsDialogBorders", "onClose"]);
-    const headerClasses = classNames('modal-header', !showXsDialogBorders && 'border-bottom-none');
-    const headerTextClasses = classNames('modal-header-text', !showXsDialogBorders && 'padding-bottom-0 width-100pct');
-    return (_jsxs("div", Object.assign({}, remainingProps, { className: headerClasses, "aria-label": 'dialog header' }, { children: [_jsxs("div", Object.assign({ className: headerTextClasses }, { children: [subtitle && _jsx("div", Object.assign({ className: 'modal-header-subtitle' }, { children: subtitle })), _jsx("div", Object.assign({ className: 'modal-header-title' }, { children: title }))] })), _jsxs("div", Object.assign({ className: 'modal-header-buttons' }, { children: [headerButtons && (_jsxs(React.Fragment, { children: [headerButtons, _jsx("div", { className: 'modal-header-buttons-spacer' })] })), showCloseButton && (_jsx("button", Object.assign({ type: 'button', className: 'btn btn-icon-only btn-muted modal-header-close close', onClick: onClose, "data-testid": 'close', "aria-label": 'dialog close button' }, { children: _jsx("span", { className: 'rioglyph rioglyph-remove', "aria-hidden": 'true' }) })))] }))] })));
+    const { title, subtitle, headerButtons } = props, remainingProps = __rest(props, ["title", "subtitle", "headerButtons"]);
+    const { onClose, isSmallestDialog, showXsDialogBorders, showCloseButton } = useDialogContext();
+    const doShowXsDialogBorders = isSmallestDialog ? showXsDialogBorders : true;
+    const doShowCloseButton = isSmallestDialog ? false : showCloseButton;
+    const headerClasses = classNames('modal-header', !doShowXsDialogBorders && 'border-bottom-none');
+    const headerTextClasses = classNames('modal-header-text', !doShowXsDialogBorders && 'padding-bottom-0 width-100pct');
+    return (_jsxs("div", Object.assign({}, remainingProps, { className: headerClasses, "aria-label": 'dialog header' }, { children: [_jsxs("div", Object.assign({ className: headerTextClasses }, { children: [subtitle && _jsx("div", Object.assign({ className: 'modal-header-subtitle' }, { children: subtitle })), _jsx("div", Object.assign({ className: 'modal-header-title' }, { children: title }))] })), _jsxs("div", Object.assign({ className: 'modal-header-buttons' }, { children: [headerButtons && !isSmallestDialog && (_jsxs(React.Fragment, { children: [headerButtons, _jsx("div", { className: 'modal-header-buttons-spacer' })] })), doShowCloseButton && (_jsx("button", Object.assign({ type: 'button', className: 'btn btn-icon-only btn-muted modal-header-close close', onClick: onClose, "data-testid": 'close', "aria-label": 'dialog close button' }, { children: _jsx("span", { className: 'rioglyph rioglyph-remove', "aria-hidden": 'true' }) })))] }))] })));
 };
 export default DialogHeader;

package/components/dialog/SplitDialog.d.ts

@@ -17,6 +17,14 @@ export type SplitDialogProps = BaseDialogProps & {
      * Additional classes for the right content element.
      */
     rightContentClassName?: string;
+    /**
+     * The dialog body content.
+     */
+    footer?: React.ReactNode;
+    /**
+     * Additional classes for the modal-footer element.
+     */
+    footerClassName?: string;
 };
 declare const SplitDialog: (props: SplitDialogProps) => import("react/jsx-runtime").JSX.Element;
 export default SplitDialog;

package/components/dialog/SplitDialog.js

@@ -5,7 +5,7 @@ import 'react';
 import classNames from 'classnames';
 import Dialog from './Dialog';
 const SplitDialog = (props) => {
-    const { leftContent, rightContent, onClose, leftContentClassName = '', rightContentClassName = '', className = '', useOverflow = true } = props, remainingProps = __rest(props, ["leftContent", "rightContent", "onClose", "leftContentClassName", "rightContentClassName", "className", "useOverflow"]);
+    const { leftContent, rightContent, leftContentClassName = '', rightContentClassName = '', className = '', useOverflow = true } = props, remainingProps = __rest(props, ["leftContent", "rightContent", "leftContentClassName", "rightContentClassName", "className", "useOverflow"]);
     const dialogClassName = `split-dialog ${className}`;
     const dividerClasses = classNames('split-divider', 'bg-lighter');
     const body = (_jsxs("div", Object.assign({ className: 'split-wrapper' }, { children: [_jsxs("div", Object.assign({ className: `split-left ${leftContentClassName}` }, { children: [leftContent, _jsx("div", { className: dividerClasses })] })), _jsx("div", Object.assign({ className: `split-right ${rightContentClassName}` }, { children: rightContent }))] })));

package/components/dialog/dialogContext.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export type DialogContext = {
+    onClose: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    isSmallestDialog: boolean;
+    showXsDialogBorders: boolean;
+    showCloseButton: boolean;
+};
+export declare const dialogContext: React.Context<DialogContext>;
+export declare const DialogContextProvider: React.Provider<DialogContext>;
+export declare const useDialogContext: () => DialogContext;

package/components/dialog/dialogContext.js

@@ -0,0 +1,17 @@
+import { createContext, useContext } from 'react';
+import noop from 'lodash/fp/noop';
+const initialContext = {
+    onClose: noop,
+    isSmallestDialog: false,
+    showXsDialogBorders: false,
+    showCloseButton: true,
+};
+export const dialogContext = createContext(initialContext);
+export const DialogContextProvider = dialogContext.Provider;
+export const useDialogContext = () => {
+    const context = useContext(dialogContext);
+    if (!context) {
+        throw new Error('Dialog compound components cannot be rendered outside the Dialog component');
+    }
+    return context;
+};

package/components/dropdown/ButtonDropdown.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
 import type { MenuItemProps as MenuItem } from '../menuItems/MenuItem';
-import type { STYLES_MAP, SIZES_MAP, VARIANTS_MAP } from '../button/Button';
-import type { ObjectValues } from '../../utils/ObjectValues';
+import type { BUTTON_SIZE, BUTTON_STYLE, BUTTON_VARIANT } from '../button/Button';
 export type ButtonDropdownProps = {
     /**
      * Unique button id. If not present a random id is generated.
@@ -31,16 +30,22 @@ export type ButtonDropdownProps = {
     pullRight?: boolean;
     /**
      * Defines how large the button will be rendered.
+     *
+     * Possible values are: `xs`, `sm`, `md`, `lg`
      */
-    bsSize?: ObjectValues<typeof SIZES_MAP>;
+    bsSize?: BUTTON_SIZE;
     /**
      * Defines the button color.
+     *
+     * Possible values are: `default`, `primary`, `secondary`, `info`, `warning`, `danger`, `success`, `muted`
      */
-    bsStyle?: ObjectValues<typeof STYLES_MAP>;
+    bsStyle?: BUTTON_STYLE;
     /**
      * Defines the variation of the button design.
+     *
+     * Possible values are: `link`, `link-inline`, `outline`, `action`
      */
-    variant?: ObjectValues<typeof VARIANTS_MAP>;
+    variant?: BUTTON_VARIANT;
     /**
      * Optional prop to defines whether the dropdown title is icon only which
      * applies different padding so the button is a square.

package/components/dropdown/DropdownToggleButton.d.ts

@@ -1,14 +1,13 @@
 import React, { type HTMLProps } from 'react';
-import type { ObjectValues } from '../../utils/ObjectValues';
-import { type SIZES_MAP, type STYLES_MAP } from '../button/Button';
+import { type BUTTON_SIZE, type BUTTON_STYLE } from '../button/Button';
 export type DropdownToggleButtonProps = HTMLProps<HTMLButtonElement> & {
     id?: string;
     disabled?: boolean;
     splitButton?: boolean;
     iconOnly?: boolean;
     onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
-    bsSize: ObjectValues<typeof SIZES_MAP>;
-    bsStyle: ObjectValues<typeof STYLES_MAP>;
+    bsSize: BUTTON_SIZE;
+    bsStyle: BUTTON_STYLE;
     className?: string;
 };
 declare const DropdownToggleButton: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<DropdownToggleButtonProps>, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/components/dropdown/SplitCaretButton.d.ts

@@ -1,12 +1,11 @@
 import React, { type HTMLProps } from 'react';
-import type { ObjectValues } from '../../utils/ObjectValues';
-import { type SIZES_MAP, type STYLES_MAP } from '../button/Button';
+import { BUTTON_STYLE, type BUTTON_SIZE } from '../button/Button';
 export type SplitCaretButtonProps = HTMLProps<HTMLButtonElement> & {
     disabled?: boolean;
     iconOnly?: boolean;
     onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
-    bsSize: ObjectValues<typeof SIZES_MAP>;
-    bsStyle: ObjectValues<typeof STYLES_MAP>;
+    bsSize: BUTTON_SIZE;
+    bsStyle: BUTTON_STYLE;
     className?: string;
 };
 declare const SplitCaretButton: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<SplitCaretButtonProps>, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/components/map/exceptions/MapException.d.ts

@@ -1,8 +1,4 @@
-declare function MapException(msg: any): void;
-declare class MapException {
-    constructor(msg: any);
-    name: string;
-    message: any;
-    constructor: typeof MapException;
+declare class MapException extends Error {
+    constructor(msg?: string);
 }
 export default MapException;

package/components/map/exceptions/MapException.js

@@ -1,7 +1,9 @@
-export default function MapException(msg) {
-    Error.call(this);
-    this.name = 'MapException';
-    this.message = msg || 'no error message';
+class MapException extends Error {
+    constructor(msg) {
+        super(msg || 'no error message');
+        this.name = 'MapException';
+        // Restoring the prototype chain
+        Object.setPrototypeOf(this, MapException.prototype);
+    }
 }
-MapException.prototype = Object.create(Error.prototype);
-MapException.prototype.constructor = MapException;
+export default MapException;