@rio-cloud/rio-uikit 1.13.2 → 2.0.0-beta.1

package/components/dataTabs/DataTabs.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useState } from 'react';
 import classNames from 'classnames';
-import { AnimatePresence } from 'framer-motion';
-import DataTabHeader from './DataTabHeader';
+import { AnimatePresence } from 'motion/react';
+import DataTabHeader from "./DataTabHeader.js";
 const getFirstTabKey = (children) => {
     const [firstItem] = children;
     return firstItem?.props.tabKey;
@@ -35,9 +35,7 @@ const DataTabs = (props) => {
         const enhancedChildren = React.Children.toArray(children)
             .filter(child => child.props.tabKey === internalActiveKey)
             .map(child => React.cloneElement(child, { active: true, disableTransition }));
-        return (
-        // @ts-ignore
-        _jsx(AnimatePresence, { initial: false, exitBeforeEnter: true, children: enhancedChildren }));
+        return (_jsx(AnimatePresence, { initial: false, mode: 'wait', children: enhancedChildren }));
     };
     return (_jsxs("div", { ...remainingProps, className: wrapperClassNames, children: [_jsx("div", { className: `DataTabsWrapper ${tabsWrapperClassName}`, children: _jsx("ul", { className: 'DataTabs', role: 'tabList', children: React.Children.map(children, (child, index) => {
                         if (!child) {

package/components/datepicker/DatePicker.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 import type { Moment } from 'moment';
 import Datetime, { type DatetimepickerProps } from 'react-datetime';
 export type DatePickerProps = Omit<DatetimepickerProps, 'onChange' | 'initialValue'> & {

package/components/datepicker/DatePicker.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useState, forwardRef } from 'react';
 import classNames from 'classnames';
 import Datetime from 'react-datetime';
-import noop from 'lodash/fp/noop';
+import { noop } from 'es-toolkit/function';
 const DEFAULT_LOCALE = 'en-GB';
 const DEFAULT_MIN_WIDTH = 0;
 const DatePicker = forwardRef((props, ref) => {

package/components/datepicker/DateRangePicker.d.ts

@@ -6,7 +6,7 @@ export { DateRangePicker as DateRangePickerPure };
  *
  * @deprecated This will be removed from the UIKIT at some time.
  */
-declare class DateRangePicker extends React.Component<any, any, any> {
+declare class DateRangePicker extends Component<any, any, any> {
     constructor(props: any);
     state: {
         internalStartValue: any;
@@ -116,7 +116,7 @@ declare namespace DateRangePicker {
     export { propTypes };
     export { defaultProps };
 }
-import React from 'react';
+import { Component } from 'react';
 import moment from 'moment';
 declare namespace propTypes {
     let startValue: PropTypes.Requireable<object>;

package/components/datepicker/DateRangePicker.js

@@ -1,15 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
 import onClickOutside from 'react-onclickoutside';
 import moment from 'moment';
 import classNames from 'classnames';
-import isNil from 'lodash/fp/isNil';
-import isNull from 'lodash/fp/isNull';
-import isEqual from 'lodash/fp/isEqual';
-import DatePicker from './DatePicker';
-import getDropDirection from '../../utils/getDropDirection';
+import { isEqual, isNull, isNil } from 'es-toolkit/predicate';
+import DatePicker from "./DatePicker.js";
+import getDropDirection from "../../utils/getDropDirection.js";
 const Placeholder = ({ text }) => _jsx("span", { className: 'placeholder', children: text });
 const propTypes = {
     startValue: PropTypes.object,

package/components/datepicker/DayPicker.js

@@ -3,16 +3,18 @@ import { useEffect, useState, useRef } from 'react';
 import { DayPicker as ReactDayPicker } from 'react-day-picker';
 import { format, isValid, parse } from 'date-fns';
 import * as locales from 'date-fns/locale';
-import noop from 'lodash/fp/noop';
-import debounce from 'lodash/fp/debounce';
+import { debounce } from 'es-toolkit/function';
 import 'react-day-picker/dist/style.css';
-import useClickOutside from '../../hooks/useClickOutside';
-import usePopperDropdown from '../../hooks/usePopperDropdown';
-import useKey from '../../hooks/useKey';
-import ClearableInput from '../clearableInput/ClearableInput';
+import useClickOutside from "../../hooks/useClickOutside.js";
+import usePopperDropdown from "../../hooks/usePopperDropdown.js";
+import useKey from "../../hooks/useKey.js";
+import ClearableInput from "../clearableInput/ClearableInput.js";
 import classNames from 'classnames';
+const isSingleProps = (props) => !props.mode || props.mode === 'single';
+const isMultipleProps = (props) => props.mode === 'multiple';
+const isRangeProps = (props) => props.mode === 'range';
 const DayPicker = (props) => {
-    const { id, selected, inputProps = {}, alignRight, bsSize = '', locale = 'en-GB', footer, inline, showOutsideDays = true, fixedWeeks = true, mode = 'single', dateFormat, placeholder, isClearable = false, closeOnSelect = true, onSelectChange = noop, defaultMonth, startMonth, endMonth, inputClassName, className, } = props;
+    const { id, selected, inputProps = {}, alignRight, bsSize = '', locale = 'en-GB', footer, inline, showOutsideDays = true, fixedWeeks = true, mode = 'single', dateFormat, placeholder, isClearable = false, closeOnSelect = true, defaultMonth, startMonth, endMonth, inputClassName, className, } = props;
     const isSingleMode = mode === 'single';
     const isMultipleMode = mode === 'multiple';
     const isRangeMode = mode === 'range';
@@ -44,9 +46,22 @@ const DayPicker = (props) => {
             setInternalInputValue(formatDate(selected, locale, dateFormat));
         }
     }, [selected, isSingleMode, isControlled, locale, dateFormat]);
+    const notifySelectChange = (value, modifiers) => {
+        if (isSingleProps(props) && props.onSelectChange) {
+            props.onSelectChange(value, modifiers);
+            return;
+        }
+        if (isMultipleProps(props) && props.onSelectChange) {
+            props.onSelectChange(value, modifiers);
+            return;
+        }
+        if (isRangeProps(props) && props.onSelectChange) {
+            props.onSelectChange(value, modifiers);
+        }
+    };
     const handleInputChange = (newValue) => doHandleInputValue(newValue);
     const handleInputChangeNative = (event) => doHandleInputValue(event.currentTarget.value);
-    const debouncedParseInput = useRef(debounce(300, (rawValue) => {
+    const debouncedParseInput = useRef(debounce((rawValue) => {
         const parsed = parseDateString(rawValue, locale);
         console.log(parsed);
         const isValid = !!parsed;
@@ -58,9 +73,9 @@ const DayPicker = (props) => {
         if (shouldNotify) {
             // parse to desired dateFormat for use on outside
             const formattedSelected = dateFormat ? parseDateString(rawValue, locale, dateFormat) : parsed;
-            onSelectChange(formattedSelected, {});
+            notifySelectChange(formattedSelected, {});
         }
-    })).current;
+    }, 300)).current;
     const doHandleInputValue = (rawValue) => {
         // const parsed = parseDateString(rawValue, locale, dateFormat);
         // const isValid = !!parsed;
@@ -95,7 +110,7 @@ const DayPicker = (props) => {
         const parsed = parseDateString(internalInputValue, locale, dateFormat);
         if (parsed && isValid(parsed)) {
             setInternalSelected(parsed);
-            onSelectChange?.(parsed, {});
+            notifySelectChange(parsed, {});
             setInternalInputValue(formatDate(parsed, locale, dateFormat));
         }
     };
@@ -119,7 +134,7 @@ const DayPicker = (props) => {
         }
         // In case the dropdown is open, the input is focused and the prop allows it, close the dropdown
         if (isDropdownOpen && closeOnSelect) {
-            onSelectChange(narrowedSelected, {});
+            notifySelectChange(narrowedSelected, {});
             closePopper();
         }
     };
@@ -138,13 +153,13 @@ const DayPicker = (props) => {
         if (isRangeMode && 'onChange' in props && props.onChange) {
             props.onChange(undefined);
         }
-        onSelectChange(undefined, {});
+        notifySelectChange(undefined, {});
     };
     const handleDaySelect = (selected, triggerDate, modifiers, event) => {
         // safe because of discriminated union
         handleSelectedChange(selected);
         // trigger callback
-        onSelectChange(selected, modifiers);
+        notifySelectChange(selected, modifiers);
         if (isSingleMode && !isControlled) {
             // should be the only place formatting is applied to the input
             setInternalInputValue(formatDate(selected, locale, dateFormat));

package/components/dialog/ConfirmationDialog.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 import { type BaseDialogProps } from './Dialog';
 export type ConfirmationDialogProps = BaseDialogProps & {
     content?: string | React.ReactNode;

package/components/dialog/ConfirmationDialog.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import noop from 'lodash/fp/noop';
-import Button from '../button/Button';
-import Dialog from './Dialog';
+import { noop } from 'es-toolkit/function';
+import Button from "../button/Button.js";
+import Dialog from "./Dialog.js";
 const ConfirmationDialog = (props) => {
     const { content, onClickCancel = noop, cancelButtonText, onClickConfirm = noop, confirmButtonText, disableConfirm, ...remainingProps } = props;
     const footer = (_jsxs("div", { className: 'btn-toolbar', children: [_jsx(Button, { className: 'CancelButton', onClick: onClickCancel, children: cancelButtonText }), _jsx(Button, { bsStyle: 'primary', className: 'ConfirmationButton', onClick: onClickConfirm, disabled: disableConfirm, children: confirmButtonText })] }));

package/components/dialog/Dialog.d.ts

@@ -79,12 +79,6 @@ export type DialogProps = BaseDialogProps & {
      * Allows to add additional buttons to the dialog header.
      */
     headerButtons?: React.ReactNode;
-    /**
-     * Deprecate to align with other dialog callbacks.
-     *
-     * @deprecated please use `onClose`
-     */
-    onHide?: VoidFunction;
     /**
      * A callback fired when esc key is pressed and the dialog is about to close.
      */

package/components/dialog/Dialog.js

@@ -1,24 +1,22 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-// biome-ignore lint/style/useImportType: required for JSX runtime compatibility with older toolchains
 import { useState, useRef } from 'react';
 import ReactDOM from 'react-dom';
 import classNames from 'classnames';
-import noop from 'lodash/fp/noop';
-import { AnimatePresence, motion, useReducedMotion } from 'framer-motion';
-import { getOrCreatePortalRoot } from '../../utils/portalRoot';
-import useEsc from '../../hooks/useEsc';
-import DialogHeader from './DialogHeader';
-import DialogBody from './DialogBody';
-import DialogFooter from './DialogFooter';
-import useFocusTrap from '../../hooks/useFocusTrap';
-import { DialogContextProvider } from './dialogContext';
+import { noop } from 'es-toolkit/function';
+import { AnimatePresence, motion, useReducedMotion } from 'motion/react';
+import { getOrCreatePortalRoot } from "../../utils/portalRoot.js";
+import useEsc from "../../hooks/useEsc.js";
+import DialogHeader from "./DialogHeader.js";
+import DialogBody from "./DialogBody.js";
+import DialogFooter from "./DialogFooter.js";
+import useFocusTrap from "../../hooks/useFocusTrap.js";
+import { DialogContextProvider } from "./dialogContext.js";
 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, children, ...remainingProps } = props;
+    const { title, subtitle, body, footer, headerButtons, className = '', bodyClassName, footerClassName, showXsDialogBorders = false, showCloseButton = true, useOverflow = false, bsSize, show = false, onClose: onCloseCallback = noop, disableEsc = false, onEsc = noop, onCloseValidation = () => true, children, ...remainingProps } = props;
     const [open, setOpen] = useState(show);
     const dialogWrapperRef = useRef(null);
-    const onCloseCallback = onClose ?? onHide;
     const modalRoot = getOrCreatePortalRoot();
     const shouldReduceMotion = useReducedMotion();
     // Use a setter function for the focus trap as it would not re-render
@@ -104,12 +102,17 @@ const Dialog = (props) => {
             // 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", { ...remainingProps, className: modalClasses, role: 'dialog', ref: dialogWrapperRef, "aria-label": 'dialog', 
+            mode: 'wait', children: open && (_jsxs("div", { ...remainingProps, className: modalClasses, role: 'dialog', ref: dialogWrapperRef, "aria-label": 'dialog', 
                 // Make sure it has a tabIndex to focus the dialog so the close on esc works.
                 // biome-ignore lint/a11y/noNoninteractiveTabindex: <explanation>
                 tabIndex: 0, children: [_jsx(motion.div, { initial: shouldReduceMotion ? false : { opacity: 0, y: '-50%' }, animate: shouldReduceMotion
                             ? { opacity: 1 }
-                            : { opacity: 1, y: 0, transition: isSmallestDialog ? springXs : spring }, exit: shouldReduceMotion ? undefined : { opacity: 0, y: '-150%' }, transition: shouldReduceMotion ? { duration: 0 } : { opacity: 0.2, y: 0.3 }, onAnimationComplete: handleAnimationComplete, 
+                            : { opacity: 1, y: 0, transition: isSmallestDialog ? springXs : spring }, exit: shouldReduceMotion ? undefined : { opacity: 0, y: '-150%' }, transition: shouldReduceMotion
+                            ? { duration: 0 }
+                            : {
+                                opacity: { duration: 0.2 },
+                                y: { duration: 0.3 },
+                            }, onAnimationComplete: handleAnimationComplete, 
                         // @ts-ignore
                         ref: setFocusTrapRef, className: modalDialogClasses, role: 'document', children: _jsxs("div", { className: 'modal-content', children: [hasChildren && children, !hasChildren && (_jsxs(_Fragment, { children: [title && (_jsx(DialogHeader, { title: title, subtitle: subtitle, headerButtons: headerButtons })), body && _jsx(DialogBody, { className: bodyClassName, children: body }), footer && _jsx(DialogFooter, { className: footerClassName, children: footer })] }))] }) }), _jsx(motion.div, { initial: shouldReduceMotion ? false : { opacity: 0 }, animate: { opacity: 1 }, exit: shouldReduceMotion ? undefined : { opacity: 0 }, transition: shouldReduceMotion ? { duration: 0 } : { duration: 0.1 }, className: 'modal-backdrop' })] })) }) }), modalRoot);
 };

package/components/dialog/DialogBody.d.ts

@@ -1,4 +1,4 @@
-import { type ComponentProps, type PropsWithChildren } from 'react';
+import type { ComponentProps, PropsWithChildren } from 'react';
 export type DialogBodyProps = ComponentProps<'div'> & {
     /**
      * Additional classes for the modal-body element.

package/components/dialog/DialogFooter.d.ts

@@ -1,4 +1,4 @@
-import { type ComponentProps, type PropsWithChildren } from 'react';
+import type { ComponentProps, PropsWithChildren } from 'react';
 export type DialogFooterProps = ComponentProps<'div'> & {
     /**
      * Additional classes for the modal-footer element.

package/components/dialog/DialogFooter.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from 'classnames';
-import { useDialogContext } from './dialogContext';
+import { useDialogContext } from "./dialogContext.js";
 const DialogFooter = (props) => {
     const { className = '', children, ...remainingProps } = props;
     const { isSmallestDialog, showXsDialogBorders } = useDialogContext();

package/components/dialog/DialogHeader.js

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

package/components/dialog/FrameDialog.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-// biome-ignore lint/style/useImportType: required for JSX runtime compatibility with older toolchains
 import { useState } from 'react';
 import IframeResizer from 'iframe-resizer-react';
-import Dialog from './Dialog';
-import usePostMessage from '../../hooks/usePostMessage';
+import Dialog from "./Dialog.js";
+import usePostMessage from "../../hooks/usePostMessage.js";
 export const DEFAULT_PREFIX = 'EVENT_FRAME_DIALOG';
 export const OPEN_DIALOG_EVENT = '_OPEN_DIALOG';
 export const CLOSE_DIALOG_EVENT = '_CLOSE_DIALOG';

package/components/dialog/InfoDialog.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 import Dialog from './Dialog';
 export type InfoDialogProps = React.ComponentPropsWithoutRef<typeof Dialog> & {
     /**

package/components/dialog/InfoDialog.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import Dialog from './Dialog';
+import Dialog from "./Dialog.js";
 const InfoDialog = (props) => {
     const { content, className, ...remainingProps } = props;
     const dialogClassName = `${className ? className : ''} info-dialog`;

package/components/dialog/MediaDialog.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 import { type BaseDialogProps } from './Dialog';
 export type MediaDialogMedia = {
     /**

package/components/dialog/MediaDialog.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState } from 'react';
 import classNames from 'classnames';
-import noop from 'lodash/fp/noop';
-import Dialog from './Dialog';
-import ResponsiveVideo from '../video/ResponsiveVideo';
-import ImagePreloader from '../preloader/ImagePreloader';
-import Spinner from '../spinner/Spinner';
+import { noop } from 'es-toolkit/function';
+import Dialog from "./Dialog.js";
+import ResponsiveVideo from "../video/ResponsiveVideo.js";
+import ImagePreloader from "../preloader/ImagePreloader.js";
+import Spinner from "../spinner/Spinner.js";
 const MediaDialog = (props) => {
     const { show = false, onClose = noop, disableEsc = false, useOverflow = false, bsSize = 'lg', media = [], previousButtonText = 'Prev', previousButtonCallback = noop, nextButtonText = 'Next', nextButtonCallback = noop, className, ...remainingProps } = props;
     const [currentMediaIndex, setCurrentMediaIndex] = useState(0);

package/components/dialog/OnboardingDialog.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 import { type BaseDialogProps } from './Dialog';
 export type OnboardingDialogProps = Pick<BaseDialogProps, 'show' | 'onClose' | 'className'> & {
     /**

package/components/dialog/OnboardingDialog.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Dialog from './Dialog';
-import Button from '../button/Button';
+import Dialog from "./Dialog.js";
+import Button from "../button/Button.js";
 const OnboardingDialog = (props) => {
     const { className, show, onClose, onStartTour, imageSrc, imageAlt, title = 'Welcome to the RIO UIKIT!', description = (_jsxs("span", { children: [_jsx("span", { className: 'text-medium', children: "Get started with a quick tour to explore UIKIT and discover its key features." }), ' ', _jsx("span", { children: "It's the easiest way to get familiar with the service and make the most of your experience." })] })), onboardingRestartHint = 'Not ready to start now?', onboardingRestartDescription = 'You can always start the onboarding tour later from the service info option in the application header.', skipButtonText = 'Skip', tourButtonText = 'Start the tour', ...remainingProps } = props;
     const dialogClassName = `${className ? className : ''} onboarding-dialog`;

package/components/dialog/ReleaseNotesDialog.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import ReleaseNotes from '../releaseNotes/ReleaseNotes';
-import Button from '../button/Button';
-import Dialog from './Dialog';
+import ReleaseNotes from "../releaseNotes/ReleaseNotes.js";
+import Button from "../button/Button.js";
+import Dialog from "./Dialog.js";
 const setReleaseNotesItem = (props) => {
     window.localStorage.setItem(props.RELEASE_NOTES_ITEM, props.currentVersion);
     props.setShowReleaseNotes(false);

package/components/dialog/SaveDialog.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 import { type BaseDialogProps } from './Dialog';
 export type SaveDialogProps = BaseDialogProps & {
     /**

package/components/dialog/SaveDialog.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import noop from 'lodash/fp/noop';
-import Button from '../button/Button';
-import Dialog from './Dialog';
+import { noop } from 'es-toolkit/function';
+import Button from "../button/Button.js";
+import Dialog from "./Dialog.js";
 const SaveDialog = (props) => {
     const { showCloseButton = true, content, discardButtonText, cancelButtonText, confirmButtonText, onClickDiscard = noop, onClickCancel = noop, onClickConfirm = noop, ...remainingProps } = props;
     const footer = (_jsxs("div", { className: 'btn-toolbar', children: [_jsx(Button, { className: 'DiscardButton', onClick: onClickDiscard, children: discardButtonText }), _jsx(Button, { className: 'CancelButton', onClick: onClickCancel, children: cancelButtonText }), _jsx(Button, { className: 'ConfirmationButton', bsStyle: 'primary', onClick: onClickConfirm, children: confirmButtonText })] }));

package/components/dialog/SimpleDialog.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 import { type DialogProps } from './Dialog';
 export type SimpleDialogProps = Omit<DialogProps, 'body'> & {
     /**

package/components/dialog/SimpleDialog.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import Dialog from './Dialog';
+import Dialog from "./Dialog.js";
 /*
  * Component to show a modal popup containing a title, a content and a close handler.
  */

package/components/dialog/SplitDialog.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 import { type BaseDialogProps } from './Dialog';
 export type SplitDialogProps = Omit<BaseDialogProps, 'useOverflow'> & {
     /**

package/components/dialog/SplitDialog.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from 'classnames';
-import Dialog from './Dialog';
+import Dialog from "./Dialog.js";
 const SplitDialog = (props) => {
     const { leftContent, rightContent, leftContentClassName = '', rightContentClassName = '', className = '', useOverflow = true, showDivider = true, ...remainingProps } = props;
     const dialogClassName = `split-dialog ${className}`;

package/components/dialog/dialogContext.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 export type DialogContext = {
     onClose: (event: React.MouseEvent<HTMLButtonElement>) => void;
     isSmallestDialog: boolean;

package/components/dialog/dialogContext.js

@@ -1,5 +1,5 @@
 import { createContext, useContext } from 'react';
-import noop from 'lodash/fp/noop';
+import { noop } from 'es-toolkit/function';
 const initialContext = {
     onClose: noop,
     isSmallestDialog: false,

package/components/divider/Divider.d.ts

@@ -1,4 +1,4 @@
-import { type PropsWithChildren } from 'react';
+import type { PropsWithChildren } from 'react';
 export type DividerProps = {
     /**
      * The amount of space to either side

package/components/dropdown/ButtonDropdown.js

@@ -4,15 +4,15 @@ import { useState, useEffect, forwardRef } from 'react';
 import ReactDOM from 'react-dom';
 import { usePopper } from 'react-popper';
 import classNames from 'classnames';
-import isNil from 'lodash/fp/isNil';
-import noop from 'lodash/fp/noop';
-import { getOrCreatePortalRoot } from '../../utils/portalRoot';
-import useClickOutside, { DEFAULT_EVENT_TYPES } from '../../hooks/useClickOutside';
-import MenuItems from '../menuItems/MenuItems';
-import MenuItemList from '../menuItems/MenuItemList';
-import DropdownToggleButton from './DropdownToggleButton';
-import SplitCaretButton from './SplitCaretButton';
-import Caret from './Caret';
+import { noop } from 'es-toolkit/function';
+import { isNil } from 'es-toolkit/predicate';
+import { getOrCreatePortalRoot } from "../../utils/portalRoot.js";
+import useClickOutside, { DEFAULT_EVENT_TYPES } from "../../hooks/useClickOutside.js";
+import MenuItems from "../menuItems/MenuItems.js";
+import MenuItemList from "../menuItems/MenuItemList.js";
+import DropdownToggleButton from "./DropdownToggleButton.js";
+import SplitCaretButton from "./SplitCaretButton.js";
+import Caret from "./Caret.js";
 const getPlacement = (pullRight, dropup) => {
     if (pullRight && dropup) {
         return 'top-end';

package/components/dropdown/DropdownSubmenu.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 import type { MenuItemProps as MenuItem } from '../menuItems/MenuItem';
 export type DropdownSubmenuProps = {
     /**

package/components/dropdown/DropdownSubmenu.js

@@ -2,8 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import classNames from 'classnames';
 import { usePopper } from 'react-popper';
-import MenuItems from '../menuItems/MenuItems';
-import MenuItemList from '../menuItems/MenuItemList';
+import MenuItems from "../menuItems/MenuItems.js";
+import MenuItemList from "../menuItems/MenuItemList.js";
 const DropdownSubmenu = (props) => {
     const { title = '', items = [], disabled = false, className, ...remainingProps } = props;
     const classes = classNames('dropdown-submenu', disabled && 'disabled', className);

package/components/dropdown/DropdownToggleButton.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import classNames from 'classnames';
-import Button from '../button/Button';
-import useMergeRefs from '../../hooks/useMergeRefs';
+import Button from "../button/Button.js";
+import useMergeRefs from "../../hooks/useMergeRefs.js";
 const DropdownToggleButton = forwardRef((props, ref) => {
     const { id, disabled, bsSize, bsStyle, variant, splitButton = false, onClick, toggleButtonType = 'button', className = '', children, outerRef, iconOnly, ...remainingProps } = props;
     const toggleRef = useMergeRefs(outerRef, ref);

package/components/dropdown/SimpleButtonDropdown.js

@@ -1,4 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import ButtonDropdown from './ButtonDropdown';
+import ButtonDropdown from "./ButtonDropdown.js";
 const SimpleButtonDropdown = (props) => _jsx(ButtonDropdown, { ...props, noCaret: true });
 export default SimpleButtonDropdown;

package/components/dropdown/SingleButtonDropdown.js

@@ -1,4 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import ButtonDropdown from './ButtonDropdown';
+import ButtonDropdown from "./ButtonDropdown.js";
 const SingleButtonDropdown = (props) => _jsx(ButtonDropdown, { ...props });
 export default SingleButtonDropdown;

package/components/dropdown/SplitButtonDropdown.js

@@ -1,4 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import ButtonDropdown from './ButtonDropdown';
+import ButtonDropdown from "./ButtonDropdown.js";
 const SplitButtonDropdown = (props) => _jsx(ButtonDropdown, { ...props, splitButton: true });
 export default SplitButtonDropdown;

package/components/dropdown/SplitCaretButton.d.ts

@@ -1,5 +1,5 @@
 import React, { type HTMLProps } from 'react';
-import { BUTTON_STYLE, type BUTTON_SIZE } from '../button/Button';
+import { type BUTTON_STYLE, type BUTTON_SIZE } from '../button/Button';
 export type SplitCaretButtonProps = HTMLProps<HTMLButtonElement> & {
     disabled?: boolean;
     iconOnly?: boolean;

package/components/dropdown/SplitCaretButton.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import classNames from 'classnames';
-import Caret from './Caret';
-import Button from '../button/Button';
+import Caret from "./Caret.js";
+import Button from "../button/Button.js";
 const SplitCaretButton = forwardRef((props, ref) => {
     const { disabled = false, bsStyle, bsSize, onClick, className, ...remainingProps } = props;
     const splitCaretButtonClasses = classNames('dropdown-toggle', className);

package/components/editableContent/EditableContent.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useRef, useEffect, useMemo } from 'react';
-import noop from 'lodash/fp/noop';
+import { noop } from 'es-toolkit/function';
 import classNames from 'classnames';
 import { usePopper } from 'react-popper';
 import { createPortal } from 'react-dom';
-import { getOrCreatePortalRoot } from '../../utils/portalRoot';
-import useEsc from '../../hooks/useEsc';
-import useFocusTrap from '../../hooks/useFocusTrap';
+import { getOrCreatePortalRoot } from "../../utils/portalRoot.js";
+import useEsc from "../../hooks/useEsc.js";
+import useFocusTrap from "../../hooks/useFocusTrap.js";
 // Features
 // [x] Hide children with opacity 0
 // [x] Allow custom editor elements

package/components/expander/ExpanderList.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 export type ExpanderListItem = {
     /**
      * The "id" property is used to know which item is expanded. It will also be used to control