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

package/components/responsiveColumnStripe/ResponsiveColumnStripe.js

@@ -1,13 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Children, cloneElement, forwardRef, useEffect, useRef, useState, } from 'react';
 import classNames from 'classnames';
-import findIndex from 'lodash/fp/findIndex';
-import chunk from 'lodash/fp/chunk';
-import { AnimatePresence, motion } from 'framer-motion';
-import noop from 'lodash/noop';
-import useAfterMount from '../../hooks/useAfterMount';
-import useElementSize from '../../hooks/useElementSize';
-import usePrevious from '../../hooks/usePrevious';
+import { chunk, findIndex, noop } from 'es-toolkit/compat';
+import { AnimatePresence, motion } from 'motion/react';
+import useAfterMount from "../../hooks/useAfterMount.js";
+import useElementSize from "../../hooks/useElementSize.js";
+import usePrevious from "../../hooks/usePrevious.js";
 const MIN_WITH_THRESHOLD = 10;
 const DEFAULT_TRANSITION = { duration: 0.2 };
 const ANIMATION_NEXT = 'page';
@@ -49,11 +47,11 @@ const ResponsiveColumnStripe = forwardRef((props, ref) => {
     }
     const updatePageOnColumnsSizeChange = (firstItem, perPage) => {
         // Split children in page chunks
-        const pages = chunk(perPage)(children);
+        const pages = chunk(children, perPage);
         // 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 = findIndex((page) => page.some(pageItem => pageItem.key === firstItem.dataset['key']))(pages);
+        const targetPage = findIndex(pages, (page) => page.some(pageItem => pageItem.key === firstItem.dataset['key']));
         if (targetPage !== currentPage) {
             setCurrentPage(targetPage);
         }
@@ -111,7 +109,7 @@ const ResponsiveColumnStripe = forwardRef((props, ref) => {
     }
     // Split the children/columns in chunks according to the current columns per page size
     // and get the current page chunk for rendering
-    const columnsToDisplay = chunk(columnsPerPage)(children)[currentPage];
+    const columnsToDisplay = chunk(children, columnsPerPage)[currentPage];
     const showPageButtons = minColumns < children.length;
     const disablePreviousPage = currentPage === 0;
     const disableNextPage = currentPage === Math.ceil(children.length / columnsPerPage) - 1;
@@ -129,8 +127,6 @@ const ResponsiveColumnStripe = forwardRef((props, ref) => {
             // style: { ...column.props?.style, minWidth: `${minColumnWith}px` },
             'data-key': column.key,
         })) }));
-    return (_jsxs("div", { ...remainingProps, ref: ref, className: wrapperClassName, children: [showPageButtons && (_jsx("div", { className: previousButtonClassName, onClick: handlePrevClick, children: _jsx("span", { className: 'rioglyph rioglyph-chevron-left' }) })), _jsxs("div", { className: 'ColumnsArea flex-1-1 overflow-hidden', ref: columnWrapperRef, children: [disableAnimation || isResizePage ? columns : null, !disableAnimation && !isResizePage && (
-                    // @ts-ignore-next-line
-                    _jsx(AnimatePresence, { exitBeforeEnter: true, custom: animationDirection, children: _jsx(motion.div, { variants: variants, initial: enableInitialAnimation ? 'pageEnter' : false, animate: 'pageCenter', custom: animationDirection, transition: DEFAULT_TRANSITION, children: columns }, currentPage) }))] }), showPageButtons && (_jsx("div", { className: nextButtonClassName, onClick: handleNextClick, children: _jsx("span", { className: 'rioglyph rioglyph-chevron-right' }) }))] }));
+    return (_jsxs("div", { ...remainingProps, ref: ref, className: wrapperClassName, children: [showPageButtons && (_jsx("div", { className: previousButtonClassName, onClick: handlePrevClick, children: _jsx("span", { className: 'rioglyph rioglyph-chevron-left' }) })), _jsxs("div", { className: 'ColumnsArea flex-1-1 overflow-hidden', ref: columnWrapperRef, children: [disableAnimation || isResizePage ? columns : null, !disableAnimation && !isResizePage && (_jsx(AnimatePresence, { mode: 'wait', custom: animationDirection, children: _jsx(motion.div, { variants: variants, initial: enableInitialAnimation ? 'pageEnter' : false, animate: 'pageCenter', custom: animationDirection, transition: DEFAULT_TRANSITION, children: columns }, currentPage) }))] }), showPageButtons && (_jsx("div", { className: nextButtonClassName, onClick: handleNextClick, children: _jsx("span", { className: 'rioglyph rioglyph-chevron-right' }) }))] }));
 });
 export default ResponsiveColumnStripe;

package/components/rioglyph/Rioglyph.d.ts

@@ -1,5 +1,5 @@
-import type rioglyphMetaData from '../../../rioglyph/rioglyphMetaData.json';
-export type IconType = keyof typeof rioglyphMetaData;
+import type { RioglyphIconType } from './RioglyphIconType';
+export type IconType = RioglyphIconType;
 export type RioglyphProps = {
     /**
      * The icon class to display.

package/components/rioglyph/RioglyphIconType.d.ts

@@ -0,0 +1 @@
+export type RioglyphIconType = 'rioglyph-academic-cap' | 'rioglyph-addressbook' | 'rioglyph-ai' | 'rioglyph-air-pay' | 'rioglyph-am' | 'rioglyph-angle-double-down' | 'rioglyph-angle-double-left' | 'rioglyph-angle-double-right' | 'rioglyph-angle-double-up' | 'rioglyph-antenna' | 'rioglyph-api' | 'rioglyph-archive' | 'rioglyph-area-chart' | 'rioglyph-area-in' | 'rioglyph-area-out' | 'rioglyph-arrow-down' | 'rioglyph-arrow-left' | 'rioglyph-arrow-right' | 'rioglyph-arrow-up' | 'rioglyph-arrows-collapse' | 'rioglyph-arrows-combine' | 'rioglyph-arrows-expand' | 'rioglyph-arrows-horizontal' | 'rioglyph-arrows-split' | 'rioglyph-assigned' | 'rioglyph-axle' | 'rioglyph-ban-circle' | 'rioglyph-bar-chart-box' | 'rioglyph-battery-charging' | 'rioglyph-battery-level-empty' | 'rioglyph-battery-level-full' | 'rioglyph-battery-level-low' | 'rioglyph-beacon' | 'rioglyph-book' | 'rioglyph-bookable-poi' | 'rioglyph-bookmark-square' | 'rioglyph-bookmark' | 'rioglyph-border-crossing' | 'rioglyph-brain' | 'rioglyph-brake' | 'rioglyph-branch-horizontal' | 'rioglyph-branch-remove' | 'rioglyph-branch-vertical' | 'rioglyph-broadcast' | 'rioglyph-building' | 'rioglyph-bulb' | 'rioglyph-bus-baseline' | 'rioglyph-bus-breakdown' | 'rioglyph-bus' | 'rioglyph-businessman' | 'rioglyph-calendar-parking' | 'rioglyph-calendar-plus' | 'rioglyph-calendar-today' | 'rioglyph-calendar' | 'rioglyph-camera' | 'rioglyph-car-baseline' | 'rioglyph-car-wash' | 'rioglyph-car' | 'rioglyph-card-hotel' | 'rioglyph-card-reader' | 'rioglyph-cards-add' | 'rioglyph-cards-grid' | 'rioglyph-cards-list' | 'rioglyph-cards-table' | 'rioglyph-cargo' | 'rioglyph-carrier' | 'rioglyph-chat' | 'rioglyph-check-badge' | 'rioglyph-check-shield' | 'rioglyph-checkbox-checked' | 'rioglyph-checkbox' | 'rioglyph-checkboxes' | 'rioglyph-chevron-down' | 'rioglyph-chevron-left' | 'rioglyph-chevron-right' | 'rioglyph-chevron-up' | 'rioglyph-chip' | 'rioglyph-circle-dashed' | 'rioglyph-circle-stack' | 'rioglyph-click' | 'rioglyph-climate-control' | 'rioglyph-clipboard' | 'rioglyph-cloud-download' | 'rioglyph-cloud-not-saved' | 'rioglyph-cloud-progress' | 'rioglyph-cloud-upload' | 'rioglyph-cloud' | 'rioglyph-coasting' | 'rioglyph-code-braces' | 'rioglyph-code-brackets' | 'rioglyph-coffee' | 'rioglyph-cog' | 'rioglyph-color-swatch' | 'rioglyph-comment' | 'rioglyph-compare' | 'rioglyph-compass' | 'rioglyph-component-custom-recurrent' | 'rioglyph-component-custom' | 'rioglyph-construction' | 'rioglyph-convert' | 'rioglyph-conveyor-belt' | 'rioglyph-cookie' | 'rioglyph-cooling' | 'rioglyph-cost-efficency' | 'rioglyph-crown' | 'rioglyph-cruise-control' | 'rioglyph-csv' | 'rioglyph-cube-dashed' | 'rioglyph-cube' | 'rioglyph-currency-euro' | 'rioglyph-damages' | 'rioglyph-dangerousgoods' | 'rioglyph-dashboard-view' | 'rioglyph-dashboard' | 'rioglyph-delivery-completed' | 'rioglyph-delivery-error' | 'rioglyph-delivery-late' | 'rioglyph-delivery-on-track' | 'rioglyph-delivery-warning' | 'rioglyph-delivery' | 'rioglyph-design' | 'rioglyph-desktop' | 'rioglyph-detail-view-info' | 'rioglyph-detail-view' | 'rioglyph-direction' | 'rioglyph-discount-badge' | 'rioglyph-document-out' | 'rioglyph-document' | 'rioglyph-download' | 'rioglyph-drag-n-drop' | 'rioglyph-drive-history' | 'rioglyph-driver-card' | 'rioglyph-driver-off' | 'rioglyph-driver' | 'rioglyph-drivercard-in' | 'rioglyph-drivercard-out' | 'rioglyph-duplicate' | 'rioglyph-earphone' | 'rioglyph-emergency-stop' | 'rioglyph-empty' | 'rioglyph-engine' | 'rioglyph-envelope-indicator' | 'rioglyph-envelope-open' | 'rioglyph-envelope' | 'rioglyph-erase' | 'rioglyph-error-sign' | 'rioglyph-euro-note' | 'rioglyph-exclamation-sign' | 'rioglyph-exclamation' | 'rioglyph-eye-close' | 'rioglyph-eye-closed' | 'rioglyph-eye-option' | 'rioglyph-face-frown' | 'rioglyph-face-neutral' | 'rioglyph-face-smile' | 'rioglyph-facetime-video' | 'rioglyph-factory' | 'rioglyph-file-signature' | 'rioglyph-files' | 'rioglyph-fill' | 'rioglyph-filling-e-station' | 'rioglyph-filling-station' | 'rioglyph-filter-active' | 'rioglyph-filter-reset' | 'rioglyph-filter' | 'rioglyph-fingerprint' | 'rioglyph-finish' | 'rioglyph-fire' | 'rioglyph-flag' | 'rioglyph-flash' | 'rioglyph-folder-closed' | 'rioglyph-folder-open' | 'rioglyph-fuel-diesel' | 'rioglyph-fuel-electric' | 'rioglyph-fuel-gas' | 'rioglyph-fuel-hydrogen' | 'rioglyph-fuel-liquid' | 'rioglyph-fuel-mix' | 'rioglyph-fullscreen' | 'rioglyph-geofence' | 'rioglyph-get' | 'rioglyph-give' | 'rioglyph-globe-alt' | 'rioglyph-globe' | 'rioglyph-group-blocks' | 'rioglyph-group' | 'rioglyph-hand-down' | 'rioglyph-hand-left' | 'rioglyph-hand-right' | 'rioglyph-hand-up' | 'rioglyph-handshake' | 'rioglyph-hash' | 'rioglyph-heart' | 'rioglyph-heating' | 'rioglyph-hierarchy' | 'rioglyph-history' | 'rioglyph-home-sign' | 'rioglyph-home' | 'rioglyph-hour-glass' | 'rioglyph-id' | 'rioglyph-inbox-in' | 'rioglyph-inbox-out' | 'rioglyph-inbox-stack' | 'rioglyph-inbox' | 'rioglyph-info-sign' | 'rioglyph-info' | 'rioglyph-insert' | 'rioglyph-issue-tracking' | 'rioglyph-key' | 'rioglyph-kickdown' | 'rioglyph-language' | 'rioglyph-layer-pois' | 'rioglyph-layer' | 'rioglyph-leafs' | 'rioglyph-light-bulb' | 'rioglyph-line-chart' | 'rioglyph-link' | 'rioglyph-load-unload' | 'rioglyph-load' | 'rioglyph-location-arrow' | 'rioglyph-lock-open' | 'rioglyph-lock' | 'rioglyph-log-in' | 'rioglyph-logout' | 'rioglyph-looking-glass-man' | 'rioglyph-looking-glass' | 'rioglyph-magic-wand' | 'rioglyph-maintenance-components' | 'rioglyph-map-location' | 'rioglyph-map-marker' | 'rioglyph-map' | 'rioglyph-megaphone' | 'rioglyph-menu-hamburger' | 'rioglyph-merge' | 'rioglyph-migrate' | 'rioglyph-milage' | 'rioglyph-minus-light' | 'rioglyph-minus-sign' | 'rioglyph-minus' | 'rioglyph-missing' | 'rioglyph-mode-dark-light' | 'rioglyph-more' | 'rioglyph-new-window' | 'rioglyph-newspaper' | 'rioglyph-note' | 'rioglyph-notification' | 'rioglyph-number-1' | 'rioglyph-number-2' | 'rioglyph-number-3' | 'rioglyph-off' | 'rioglyph-oil-can' | 'rioglyph-ok-circle' | 'rioglyph-ok-dashed' | 'rioglyph-ok-sign' | 'rioglyph-ok' | 'rioglyph-onboarding' | 'rioglyph-ongoing' | 'rioglyph-option-horizontal' | 'rioglyph-option-vertical' | 'rioglyph-order' | 'rioglyph-palette-broken' | 'rioglyph-palette' | 'rioglyph-paper-clip' | 'rioglyph-parcel-broken' | 'rioglyph-parcel' | 'rioglyph-parking' | 'rioglyph-pause-circle' | 'rioglyph-pause' | 'rioglyph-pdf-file' | 'rioglyph-pencil-square' | 'rioglyph-pencil' | 'rioglyph-phone' | 'rioglyph-pictures' | 'rioglyph-pin-range' | 'rioglyph-pin' | 'rioglyph-play-circle' | 'rioglyph-play' | 'rioglyph-plugged-off' | 'rioglyph-plugged-on' | 'rioglyph-plus-light' | 'rioglyph-plus-sign' | 'rioglyph-plus' | 'rioglyph-pm' | 'rioglyph-poi' | 'rioglyph-polygon' | 'rioglyph-position' | 'rioglyph-print' | 'rioglyph-progress-ongoing' | 'rioglyph-progress-remaining' | 'rioglyph-progression' | 'rioglyph-prompt' | 'rioglyph-pto-off' | 'rioglyph-pto-on' | 'rioglyph-pushpin' | 'rioglyph-puzzle' | 'rioglyph-pylon' | 'rioglyph-qr-code' | 'rioglyph-question-sign' | 'rioglyph-question' | 'rioglyph-record' | 'rioglyph-recycle' | 'rioglyph-refresh' | 'rioglyph-remove-circle' | 'rioglyph-remove-sign' | 'rioglyph-remove' | 'rioglyph-repeat-square' | 'rioglyph-repeat' | 'rioglyph-resize-full' | 'rioglyph-resize-horizontal' | 'rioglyph-resize-small' | 'rioglyph-resize-vertical' | 'rioglyph-retrofit' | 'rioglyph-revert' | 'rioglyph-rio-marker' | 'rioglyph-rio' | 'rioglyph-road-restrictions' | 'rioglyph-road' | 'rioglyph-robot' | 'rioglyph-rocket' | 'rioglyph-role-management' | 'rioglyph-route-option' | 'rioglyph-route-view' | 'rioglyph-route' | 'rioglyph-ruler' | 'rioglyph-satellite-radar' | 'rioglyph-save' | 'rioglyph-scale' | 'rioglyph-scan' | 'rioglyph-scissors' | 'rioglyph-search-list' | 'rioglyph-search-truck' | 'rioglyph-search' | 'rioglyph-send' | 'rioglyph-series' | 'rioglyph-server-stack' | 'rioglyph-settings' | 'rioglyph-share-alt' | 'rioglyph-share-nodes' | 'rioglyph-share' | 'rioglyph-shelve' | 'rioglyph-ship' | 'rioglyph-shopping-bag' | 'rioglyph-shopping-cart' | 'rioglyph-signature' | 'rioglyph-slope-down-max' | 'rioglyph-slope-down-min' | 'rioglyph-slope-up-max' | 'rioglyph-slope-up-min' | 'rioglyph-sort-by-attributes-alt' | 'rioglyph-sort-by-attributes' | 'rioglyph-sort' | 'rioglyph-sparkles' | 'rioglyph-speed' | 'rioglyph-sphere' | 'rioglyph-spinner' | 'rioglyph-split-view' | 'rioglyph-square-dashed' | 'rioglyph-stack-add' | 'rioglyph-stack-iso' | 'rioglyph-stack' | 'rioglyph-star-empty' | 'rioglyph-star' | 'rioglyph-stars' | 'rioglyph-start' | 'rioglyph-stats-high' | 'rioglyph-stats-line-dots' | 'rioglyph-stats-low' | 'rioglyph-stats-medium' | 'rioglyph-stats' | 'rioglyph-status-available' | 'rioglyph-status-change-horizontal' | 'rioglyph-status-change' | 'rioglyph-status-driving' | 'rioglyph-status-resting' | 'rioglyph-status-working' | 'rioglyph-steering-wheel' | 'rioglyph-stopover' | 'rioglyph-support' | 'rioglyph-table-view' | 'rioglyph-tachograph-download' | 'rioglyph-tachograph' | 'rioglyph-tag' | 'rioglyph-tasks' | 'rioglyph-temperature' | 'rioglyph-th-list' | 'rioglyph-thumbs-down' | 'rioglyph-thumbs-up' | 'rioglyph-tickets' | 'rioglyph-time-alt' | 'rioglyph-time-cancle' | 'rioglyph-time-incomplete' | 'rioglyph-time' | 'rioglyph-tire' | 'rioglyph-tms' | 'rioglyph-to-bottom' | 'rioglyph-to-left' | 'rioglyph-to-right' | 'rioglyph-to-top' | 'rioglyph-tracking-package' | 'rioglyph-traffic-lights' | 'rioglyph-trailer-baseline' | 'rioglyph-trailer' | 'rioglyph-trailerposition' | 'rioglyph-train' | 'rioglyph-transfer' | 'rioglyph-transition-push-right' | 'rioglyph-transition-right' | 'rioglyph-trash' | 'rioglyph-triangle-bottom' | 'rioglyph-triangle-left' | 'rioglyph-triangle-right' | 'rioglyph-triangle-top' | 'rioglyph-trophy' | 'rioglyph-truck-baseline' | 'rioglyph-truck-breakdown' | 'rioglyph-truck-unit' | 'rioglyph-truck' | 'rioglyph-unassigned' | 'rioglyph-unavailable' | 'rioglyph-unlink' | 'rioglyph-upload' | 'rioglyph-user-add' | 'rioglyph-user-group' | 'rioglyph-user-ok' | 'rioglyph-user-remove' | 'rioglyph-user-sign-off' | 'rioglyph-user-sign' | 'rioglyph-user' | 'rioglyph-van-baseline' | 'rioglyph-van' | 'rioglyph-variable' | 'rioglyph-video-off' | 'rioglyph-video' | 'rioglyph-volume' | 'rioglyph-wallet' | 'rioglyph-warehouse' | 'rioglyph-warning-sign' | 'rioglyph-weather-cloudy' | 'rioglyph-weather-icy' | 'rioglyph-weather-overcast' | 'rioglyph-weather-raining' | 'rioglyph-weather-snowing' | 'rioglyph-weather-stormy' | 'rioglyph-weather-sunny' | 'rioglyph-weather-thundering' | 'rioglyph-weather-windy' | 'rioglyph-weight' | 'rioglyph-width' | 'rioglyph-wifi-off' | 'rioglyph-wifi' | 'rioglyph-window' | 'rioglyph-workflow-step' | 'rioglyph-workflow' | 'rioglyph-workshop' | 'rioglyph-wrench' | 'rioglyph-xmas-raindeer' | 'rioglyph-xmas-santa';

package/components/rioglyph/RioglyphIconType.js

@@ -0,0 +1 @@
+export {};

package/components/rules/RuleConnector.d.ts

@@ -1,4 +1,4 @@
-import { type HTMLAttributes, type PropsWithChildren } from 'react';
+import type { HTMLAttributes, PropsWithChildren } from 'react';
 export type RuleConnectorProps = {
     /**
      * The placement for the connector.

package/components/rules/RuleContainer.js

@@ -1,15 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Children } from 'react';
 import classNames from 'classnames';
-import { AnimatePresence, motion } from 'framer-motion';
-import RuleConnector from './RuleConnector';
+import { AnimatePresence, motion } from 'motion/react';
+import RuleConnector from "./RuleConnector.js";
 const RuleContainer = (props) => {
     const { show = true, unchecked = false, background = 'bg-lightest', borderColor = '', hideConnector = false, customConnector, className = '', children, ...remainingProps } = props;
     if (!show) {
         return null;
     }
     const boxClassNames = classNames('RuleContainerBox', 'position-relative', 'rounded padding-20', background, unchecked && `border border-width border-style-dashed ${borderColor}`, className);
-    return (_jsxs("div", { className: 'RuleContainer', ...remainingProps, children: [_jsx("div", { className: boxClassNames, "data-testid": 'ruleContainerBox', children: _jsx(AnimatePresence, { exitBeforeEnter: true, children: Children.map(children, child => {
+    return (_jsxs("div", { className: 'RuleContainer', ...remainingProps, children: [_jsx("div", { className: boxClassNames, "data-testid": 'ruleContainerBox', children: _jsx(AnimatePresence, { mode: 'wait', children: Children.map(children, child => {
                         if (!child) {
                             return null;
                         }

package/components/rules/RulesWrapper.d.ts

@@ -1,4 +1,4 @@
-import { type HTMLAttributes, type PropsWithChildren } from 'react';
+import type { HTMLAttributes, PropsWithChildren } from 'react';
 type RulesWrapperProps = HTMLAttributes<HTMLDivElement>;
 declare const RulesWrapper: ({ children, ...remainingProps }: PropsWithChildren<RulesWrapperProps>) => import("react/jsx-runtime").JSX.Element;
 export default RulesWrapper;

package/components/rules/RulesWrapper.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { AnimatePresence, motion } from 'framer-motion';
+import { AnimatePresence, motion } from 'motion/react';
 const RulesWrapper = ({ children, ...remainingProps }) => (
 // @ts-ignore-next-line
 _jsx(motion.div, { initial: false, layout: true, ...remainingProps, children: _jsx(AnimatePresence, { children: _jsx(motion.div, { layout: 'position', children: children }) }) }));

package/components/saveableInput/SaveableDateInput.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, useState } from 'react';
 import classNames from 'classnames';
-import noop from 'lodash/fp/noop';
-import Button from '../../Button';
-import DatePicker from '../datepicker/DatePicker';
-import useIsFocusWithin from '../../hooks/useIsFocusWithin';
-import useEsc from '../../hooks/useEsc';
+import { noop } from 'es-toolkit/function';
+import Button from "../../Button.js";
+import DatePicker from "../datepicker/DatePicker.js";
+import useIsFocusWithin from "../../hooks/useIsFocusWithin.js";
+import useEsc from "../../hooks/useEsc.js";
 const DEFAULT_BUTTON_STYLE = 'primary';
 // Validate date outside the component (via form library) if controlled usage
 // Use as controlled component: value, is Valid, and change callback

package/components/saveableInput/SaveableInput.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
-import isEmpty from 'lodash/fp/isEmpty';
-import noop from 'lodash/fp/noop';
+import { isEmpty } from 'es-toolkit/compat';
+import { noop } from 'es-toolkit/function';
 // @ts-ignore
-import Button from '../../Button';
-import useKey from '../../hooks/useKey';
-import useEsc from '../../hooks/useEsc';
+import Button from "../../Button.js";
+import useKey from "../../hooks/useKey.js";
+import useEsc from "../../hooks/useEsc.js";
 const DEFAULT_BUTTON_STYLE = 'primary';
 const useFocus = (isEditable) => {
     const inputRef = useRef(null);

package/components/selects/BaseSelectDropdown.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 export type OptionDOMValue = {
     id: string;
     text: string;

package/components/selects/BaseSelectDropdown.js

@@ -1,16 +1,15 @@
 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 { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
-import isEmpty from 'lodash/fp/isEmpty';
-import noop from 'lodash/fp/noop';
-import { useDropDirection } from '../../utils/useDropDirection';
-import { DOWN, scrollItemIntoView, UP } from '../../utils/scrollItemIntoView';
-import useEffectOnce from '../../hooks/useEffectOnce';
-import useKey from '../../useKey';
-import DropdownHeader from './DropdownHeader';
-import NoItemMessage from './NoItemMessage';
-import Spinner from '../spinner/Spinner';
+import { isEmpty } from 'es-toolkit/compat';
+import { noop } from 'es-toolkit/function';
+import { useDropDirection } from "../../utils/useDropDirection.js";
+import { DOWN, scrollItemIntoView, UP } from "../../utils/scrollItemIntoView.js";
+import useEffectOnce from "../../hooks/useEffectOnce.js";
+import useKey from "../../useKey.js";
+import DropdownHeader from "./DropdownHeader.js";
+import NoItemMessage from "./NoItemMessage.js";
+import Spinner from "../spinner/Spinner.js";
 const DATA_ATTRIBUTE_ID = 'data-item-id';
 const DEFAULT_FOCUSED_ITEM_INDEX = 0;
 const HIGHLIGHT_CLASS = 'focus';

package/components/selects/ClearButton.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from 'classnames';
-import isNil from 'lodash/fp/isNil';
+import { isNil } from 'es-toolkit/predicate';
 const ClearButton = (props) => {
     const { showClear, selectedItem, onClear } = props;
     const clearButtonClassNames = classNames('clearButton', (!showClear || isNil(selectedItem)) && 'hide pointer-events-none');

package/components/selects/DropdownHeader.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 export type DropdownHeaderProps = {
     icon?: React.ReactNode;
     center?: boolean;

package/components/selects/Multiselect.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 import { type SelectOption } from './BaseSelectDropdown';
 import { type WithFeedbackAndAddonProps } from './WithFeedbackAndAddon';
 export type MultiselectCounterMessage = {

package/components/selects/Multiselect.js

@@ -1,18 +1,17 @@
 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 { useRef, useState } from 'react';
 import classNames from 'classnames';
-import isEqual from 'lodash/fp/isEqual';
-import isEmpty from 'lodash/fp/isEmpty';
-import noop from 'lodash/fp/noop';
-import BaseSelectDropdown, { filterOptions } from './BaseSelectDropdown';
-import MultiselectToggleCounter from './MultiselectToggleCounter';
-import MultiselectToggleSelection from './MultiselectToggleSelection';
-import MultiselectToggleFilter from './MultiselectToggleFilter';
-import MultiselectTogglePlaceholder from './MultiselectTogglePlaceholder';
-import useClickOutside from '../../useClickOutside';
-import useMergeRefs from '../../hooks/useMergeRefs';
-import WithFeedbackAndAddon from './WithFeedbackAndAddon';
+import { isEqual } from 'es-toolkit/predicate';
+import { isEmpty } from 'es-toolkit/compat';
+import { noop } from 'es-toolkit/function';
+import BaseSelectDropdown, { filterOptions } from "./BaseSelectDropdown.js";
+import MultiselectToggleCounter from "./MultiselectToggleCounter.js";
+import MultiselectToggleSelection from "./MultiselectToggleSelection.js";
+import MultiselectToggleFilter from "./MultiselectToggleFilter.js";
+import MultiselectTogglePlaceholder from "./MultiselectTogglePlaceholder.js";
+import useClickOutside from "../../useClickOutside.js";
+import useMergeRefs from "../../hooks/useMergeRefs.js";
+import WithFeedbackAndAddon from "./WithFeedbackAndAddon.js";
 const DEFAULT_FOCUSED_ITEM_INDEX = -1;
 const Multiselect = (props) => {
     const { name, id = name, options = [], value, onChange = noop, placeholder, isLoading = false, dropup = false, pullRight = false, autoDropDirection = true, bsSize = 'md', disabled = false, tabIndex = 0, hasError = false, useFilter = false, multiline = false, noItemMessage, counterMessage, renderCounterMessage, showSelectedItemIcon = false, showUnselectedItemIcons = false, className, inputAddon, errorMessage, warningMessage, messageWhiteSpace = 'normal', btnClassName, dropdownClassName, ...remainingProps } = props;

package/components/selects/MultiselectToggleCounter.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 import type { MultiselectCounterMessage } from './Multiselect';
 export type MultiselectToggleCounterProps = {
     customRenderer?: (selectedAmount: number) => React.ReactNode;

package/components/selects/MultiselectToggleFilter.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 export type MultiselectToggleFilterProps = {
     isActive: boolean;
     selectedItemIds?: string[];

package/components/selects/MultiselectToggleFilter.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from 'classnames';
-import isEmpty from 'lodash/fp/isEmpty';
+import { isEmpty } from 'es-toolkit/compat';
 const MultiselectToggleFilter = (props) => {
     const { isActive, selectedItemIds, filterValue, onFilterChange } = props;
     const inputClasses = classNames('multiselect-filter-input', isEmpty(selectedItemIds) && 'multiselect-filter-input-placeholder', isActive && 'multiselect-filter-input-active');

package/components/selects/MultiselectTogglePlaceholder.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 export type MultiselectTogglePlaceholderProps = {
     placeholder: string | React.ReactNode;
 };

package/components/selects/MultiselectToggleSelection.d.ts

@@ -1,4 +1,5 @@
-import React, { PropsWithChildren } from 'react';
+import type React from 'react';
+import type { PropsWithChildren } from 'react';
 import type { SelectOption } from './BaseSelectDropdown';
 export type MultiselectToggleSelectionProps = {
     options: SelectOption[];

package/components/selects/MultiselectToggleSelection.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from 'classnames';
-import isEmpty from 'lodash/fp/isEmpty';
+import { isEmpty } from 'es-toolkit/compat';
 const MultiselectToggleSelection = (props) => {
     const { options, selectedItemIds, showSelectedItemIcon, showUnselectedItemIcons, multiline, hasInputAddon, hasFilter, onRemoveItem, children, } = props;
     if (!options || isEmpty(options)) {

package/components/selects/NoItemMessage.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 export type NoItemMessageProps = {
     noItemMessage: string | React.ReactNode;
     className?: string;

package/components/selects/Select.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 import { type SelectOption } from './BaseSelectDropdown';
 import { type WithFeedbackAndAddonProps } from './WithFeedbackAndAddon';
 export type { SelectOption } from './BaseSelectDropdown';

package/components/selects/Select.js

@@ -1,17 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, useState } from 'react';
 import classNames from 'classnames';
-import isEqual from 'lodash/fp/isEqual';
-import isEmpty from 'lodash/fp/isEmpty';
-import noop from 'lodash/fp/noop';
-import BaseSelectDropdown, { filterOptions } from './BaseSelectDropdown';
-import useClickOutside from '../../useClickOutside';
-import useEffectOnce from '../../hooks/useEffectOnce';
-import useMergeRefs from '../../hooks/useMergeRefs';
-import ClearButton from './ClearButton';
-import SelectFilter from './SelectFilter';
-import SelectedOption from './SelectedOption';
-import WithFeedbackAndAddon from './WithFeedbackAndAddon';
+import { isEqual } from 'es-toolkit/predicate';
+import { isEmpty, noop } from 'es-toolkit/compat';
+import BaseSelectDropdown, { filterOptions } from "./BaseSelectDropdown.js";
+import useClickOutside from "../../useClickOutside.js";
+import useEffectOnce from "../../hooks/useEffectOnce.js";
+import useMergeRefs from "../../hooks/useMergeRefs.js";
+import ClearButton from "./ClearButton.js";
+import SelectFilter from "./SelectFilter.js";
+import SelectedOption from "./SelectedOption.js";
+import WithFeedbackAndAddon from "./WithFeedbackAndAddon.js";
 const DEFAULT_FOCUSED_ITEM_INDEX = -1;
 const Select = (props) => {
     const { name, id = name, label, options = [], value, onChange = noop, placeholder, isLoading = false, dropup = false, pullRight = false, autoDropDirection = true, bsSize = 'md', disabled = false, tabIndex = 0, hasError = false, useFilter = false, useClear = false, noItemMessage, selectedOptionText, showSelectedItemIcon = false, showUnselectedItemIcons = false, dropdownClassName, btnClassName, className, inputAddon, errorMessage, warningMessage, messageWhiteSpace = 'normal', ...remainingProps } = props;

package/components/selects/SelectFilter.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 export type SelectFilterProps = {
     isFilterActive: boolean;
     filterValue: string;

package/components/selects/SelectedOption.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 import type { SelectOption } from './Select';
 export type SelectedOptionProps = {
     label: string | React.ReactNode;

package/components/selects/WithFeedbackAndAddon.d.ts

@@ -1,4 +1,5 @@
-import React, { type PropsWithChildren } from 'react';
+import type React from 'react';
+import type { PropsWithChildren } from 'react';
 export type WithFeedbackAndAddonProps = {
     /**
      * Defines the size of the select to be rendered.

package/components/sidebars/Sidebar.d.ts

@@ -70,7 +70,7 @@ export type SidebarProps = {
     /**
      * Callback for when the fullscreen is toggled.
      */
-    onFullScreenChange?: VoidFunction;
+    onFullScreenChange?: (newFullscreenState: boolean) => void;
     /**
      * Enables the fullscreen functionality and shows the fullscreen toggle.
      * @default false
@@ -80,19 +80,6 @@ export type SidebarProps = {
      * 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

package/components/sidebars/Sidebar.js

@@ -1,18 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
-import { AnimatePresence, motion } from 'framer-motion';
+import { AnimatePresence, motion } from 'motion/react';
 import classNames from 'classnames';
-import noop from 'lodash/fp/noop';
-import toNumber from 'lodash/fp/toNumber';
-import SidebarFooter from './SidebarFooter';
-import SidebarBackdrop from './SidebarBackdrop';
-import SidebarFullscreenToggle from './SidebarFullscreenToggle';
-import SidebarCloseButton from './SidebarCloseButton';
-import Resizer from '../resizer/Resizer';
-import useWindowResize from '../../hooks/useWindowResize';
-import useEsc from '../../hooks/useEsc';
-import getWidthInBoundaries from '../../utils/getWidthInBoundaries';
-import SmoothScrollbars from '../smoothScrollbars/SmoothScrollbars';
+import { noop } from 'es-toolkit/function';
+import { toNumber } from 'es-toolkit/compat';
+import SidebarFooter from "./SidebarFooter.js";
+import SidebarBackdrop from "./SidebarBackdrop.js";
+import SidebarFullscreenToggle from "./SidebarFullscreenToggle.js";
+import SidebarCloseButton from "./SidebarCloseButton.js";
+import Resizer from "../resizer/Resizer.js";
+import useWindowResize from "../../hooks/useWindowResize.js";
+import useEsc from "../../hooks/useEsc.js";
+import getWidthInBoundaries from "../../utils/getWidthInBoundaries.js";
+import SmoothScrollbars from "../smoothScrollbars/SmoothScrollbars.js";
 const DEFAULT_WIDTH = 350;
 const DEFAULT_MIN_WIDTH = 100;
 const DEFAULT_MAX_WIDTH = 800;
@@ -172,7 +172,7 @@ const Sidebar = (props) => {
     const resizeIndicatorPosition = maxWidth || window.innerWidth * 0.5;
     const resizeLimitStyle = isRight ? { right: resizeIndicatorPosition } : { left: resizeIndicatorPosition };
     const sidebarContent = (_jsxs(_Fragment, { children: [_jsx("div", { className: resizeLimitClasses, style: resizeLimitStyle }), _jsxs("div", { className: 'SidebarContent', children: [_jsxs("div", { className: headerClassNames, children: [_jsx("div", { className: titleClassNames, children: title }), _jsxs("div", { className: 'SidebarButtons non-printable close', children: [headerButtons, enableFullscreenToggle && (_jsx(SidebarFullscreenToggle, { isFullscreen: isFullscreen, onClick: handleFullscreenChange, tooltip: fullscreenToggleTooltip })), !disableClose && (headerButtons || enableFullscreenToggle) && (_jsx("div", { className: 'SidebarButtons-spacer' })), !disableClose && _jsx(SidebarCloseButton, { onClick: onClose })] })] }), hasSmoothScrollbar ? (_jsx(SmoothScrollbars, { slideIn: true, className: bodyClassNames, ref: bodyRef, children: children })) : (_jsx("div", { className: bodyClassNames, ref: bodyRef, children: children })), _jsx(SidebarFooter, { footer: footer, className: footerClassName })] }), resizable && (_jsx(Resizer, { onResizeStart: handleResizeStart, onResize: handleResize, onResizeEnd: handleResizeEnd, direction: Resizer.HORIZONTAL, position: isRight ? Resizer.LEFT : Resizer.RIGHT }))] }));
-    return (_jsxs(_Fragment, { children: [_jsx(AnimatePresence, { initial: true, exitBeforeEnter: true, children: _jsx(motion.div, { ...remainingProps, initial: previousClosed && 'sidebarEnter', animate: 'sidebarVisible', 
+    return (_jsxs(_Fragment, { children: [_jsx(AnimatePresence, { initial: true, mode: 'wait', children: _jsx(motion.div, { ...remainingProps, initial: previousClosed && 'sidebarEnter', animate: 'sidebarVisible', 
                     // Cannot exit animation as sidebar is moved to offscreen by CSS class, means is still mounted
                     exit: 'sidebarExit', variants: animationVariants, custom: { fromRight: isRight, closed }, transition: { duration: ANIMATION_DURATION }, className: wrapperClasses, style: { width: internalWidth }, ref: sidebarRef, children: sidebarContent }) }), hasBackdrop && !closed && (_jsx(SidebarBackdrop, { className: backdropClassName, makeBackdropVisible: makeBackdropVisible, onClick: onBackdropClick }))] }));
 };

package/components/sidebars/SidebarBackdrop.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from 'classnames';
-import noop from 'lodash/fp/noop';
+import { noop } from 'es-toolkit/function';
 const SidebarBackdrop = ({ onClick = noop, makeBackdropVisible = false, className = '' }) => {
     const backdropClassNames = classNames('SidebarBackdrop', makeBackdropVisible && 'sidebar-backdrop-bg', className);
     return _jsx("div", { className: backdropClassNames, onClick: onClick, "data-testid": 'sidebarBackdrop' });

package/components/sidebars/SidebarCloseButton.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import noop from 'lodash/fp/noop';
-import Button from '../button/Button';
+import { noop } from 'es-toolkit/function';
+import Button from "../button/Button.js";
 const SidebarCloseButton = ({ onClick = noop }) => {
     return (_jsx(Button, { bsStyle: Button.MUTED, iconOnly: true, onClick: onClick, "data-testid": 'sidebarCloseButton', children: _jsx("span", { className: 'rioglyph rioglyph-remove' }) }));
 };

package/components/sidebars/SidebarFooter.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 export type SidebarFooterProps = {
     footer?: React.ReactNode;
     className?: string;

package/components/sidebars/SidebarFullscreenToggle.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from 'classnames';
-import noop from 'lodash/fp/noop';
-import Button from '../button/Button';
-import SimpleTooltip from '../tooltip/SimpleTooltip';
+import { noop } from 'es-toolkit/function';
+import Button from "../button/Button.js";
+import SimpleTooltip from "../tooltip/SimpleTooltip.js";
 const SidebarFullscreenToggle = ({ isFullscreen, tooltip, onClick = noop }) => {
     const fullscreenIconClasses = classNames('rioglyph', isFullscreen ? 'rioglyph-resize-small' : 'rioglyph-resize-full');
     const button = (_jsx(Button, { bsStyle: Button.MUTED, iconOnly: true, onClick: onClick, "data-testid": 'sidebarFullscreenToggle', children: _jsx("span", { className: fullscreenIconClasses }) }));

package/components/slider/RangeSlider.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import classNames from 'classnames';
-import noop from 'lodash/noop';
-import { getCurrentBackgroundColor } from '../../utils/currentColors';
+import { noop } from 'es-toolkit/compat';
+import { getCurrentBackgroundColor } from "../../utils/currentColors.js";
 const getRangeValues = (valueLeft, valueRight) => {
     const finalLeftValue = valueRight <= valueLeft ? valueRight : valueLeft;
     const finalRightValue = valueLeft >= valueRight ? valueLeft : valueRight;

package/components/slider/Slider.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import classNames from 'classnames';
-import noop from 'lodash/noop';
-import { getCurrentBackgroundColor } from '../../utils/currentColors';
+import { noop } from 'es-toolkit/compat';
+import { getCurrentBackgroundColor } from "../../utils/currentColors.js";
 const Slider = (props) => {
     const { value = 0, minValue = 0, maxValue = Number.MAX_VALUE, valueLabels = false, valueLabelUnit, largeValueLabels = false, hideValueBar = false, color = 'primary', step = 1, onChange = noop, onDragEnd = noop, className, disabled = false, ...remainingProps } = props;
     const [currentValue, setCurrentValue] = useState(value ? value : minValue);

package/components/smoothScrollbars/SmoothScrollbars.js

@@ -1,10 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-// biome-ignore lint/style/useImportType: required for JSX runtime compatibility with older toolchains
 import { forwardRef, useEffect, useImperativeHandle, useRef, } from 'react';
 import { Scrollbars } from 'react-custom-scrollbars-4';
 import classNames from 'classnames';
-import noop from 'lodash/fp/noop';
-import debounce from 'lodash/fp/debounce';
+import { debounce, noop } from 'es-toolkit/function';
 const RESIZE_THROTTLING = 100;
 const SmoothScrollbars = forwardRef((componentProps, ref) => {
     const { slideIn = false, largeTrack = false, trackOffset = false, className = '', onScroll = noop, tagName = 'div', autoHeight = false, autoHeightMin = 0, autoHeightMax = 200, children, style, ...remainingProps } = componentProps;
@@ -15,7 +13,7 @@ const SmoothScrollbars = forwardRef((componentProps, ref) => {
         if (!contentRef.current || !scrollbarsRef.current) {
             return;
         }
-        const updateScrollbars = debounce(RESIZE_THROTTLING)(() => {
+        const updateScrollbars = debounce(() => {
             if (scrollbarsRef.current) {
                 // Trigger a update for the scrollbars.
                 // This is needed since the lib does not automatically update on content height changes
@@ -23,7 +21,7 @@ const SmoothScrollbars = forwardRef((componentProps, ref) => {
                 // Use type assertion to tell TypeScript that 'update' exists
                 scrollbarsRef.current.update();
             }
-        });
+        }, RESIZE_THROTTLING);
         const resizeObserver = new ResizeObserver(updateScrollbars);
         resizeObserver.observe(contentRef.current);
         return () => {

package/components/spinner/Spinner.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 export interface SpinnerProps {
     /**
      * Defines whether the spinner is shown on bright or dark background.

package/components/spinner/Spinner.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from 'classnames';
-import Fade from '../fade/Fade';
+import Fade from "../fade/Fade.js";
 const BaseSpinner = (props) => {
     const { isInverse, isDoubleSized, ...remainingProps } = props;
     const className = classNames('spinner', { inverse: isInverse, double: isDoubleSized });

package/components/states/BaseStateProps.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 import type { TextAlignment } from '../../values/TextAlignment';
 import type { StateButtonProps } from './StateButton';
 import type { StateIconProps } from './StateIcon';

package/components/states/CustomState.d.ts

@@ -1,4 +1,4 @@
-import { type PropsWithChildren } from 'react';
+import type { PropsWithChildren } from 'react';
 import type { BaseStateProps } from './BaseStateProps';
 export type CustomStateProps = BaseStateProps;
 declare const CustomState: (props: PropsWithChildren<CustomStateProps>) => import("react/jsx-runtime").JSX.Element;