@rio-cloud/rio-uikit 0.16.3 → 0.16.4-beta.2

package/components/filepicker/FilePicker.js

@@ -1,78 +1,49 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["label", "accept", "multiple", "maxSize", "displayMode", "onPick", "className", "children"];
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useCallback, useRef } from 'react';
 import PropTypes from 'prop-types';
 import Dropzone, { useDropzone } from 'react-dropzone';
 import Button from '../button/Button';
-var FilePicker = function FilePicker(props) {
-  var label = props.label,
-    accept = props.accept,
-    multiple = props.multiple,
-    maxSize = props.maxSize,
-    displayMode = props.displayMode,
-    onPick = props.onPick,
-    className = props.className,
-    children = props.children,
-    remainigProps = _objectWithoutProperties(props, _excluded);
-  var dropzoneRef = useRef();
-  var isButton = displayMode === 'button';
-  var isDropzone = displayMode === 'dropzone';
-  var isFull = displayMode === 'full';
-  var showButton = isButton || isFull;
-  var showDropzone = isDropzone || isFull;
-  var handleDrop = useCallback(function (acceptedFiles, rejectedFiles) {
-    var hasImagesType = accept && Object.keys(accept).some(function (mimeType) {
-      return mimeType.startsWith('image');
-    });
-    var files = hasImagesType ? acceptedFiles.map(function (file) {
-      return Object.assign(file, {
-        preview: URL.createObjectURL(file)
-      });
-    }) : acceptedFiles;
-    onPick(files, rejectedFiles);
-  }, [onPick, accept]);
-  var onOpenClick = function onOpenClick() {
-    return dropzoneRef.current.open();
-  };
-  return /*#__PURE__*/React.createElement("div", {
-    className: "FilePicker"
-  }, showButton && /*#__PURE__*/React.createElement(Button, {
-    onClick: onOpenClick,
-    className: className
-  }, label), /*#__PURE__*/React.createElement(Dropzone, _extends({}, remainigProps, {
-    onDrop: handleDrop,
-    accept: accept,
-    multiple: multiple,
-    maxSize: maxSize,
-    ref: dropzoneRef
-  }), function (_ref) {
-    var getRootProps = _ref.getRootProps,
-      getInputProps = _ref.getInputProps,
-      isDragActive = _ref.isDragActive;
-    return /*#__PURE__*/React.createElement("div", getRootProps(), /*#__PURE__*/React.createElement("input", getInputProps()), showDropzone && children && children({
-      isDragActive: isDragActive
-    }));
-  }));
+const FilePicker = props => {
+    const { label, accept, multiple, maxSize, displayMode, onPick, className, children } = props, remainigProps = __rest(props, ["label", "accept", "multiple", "maxSize", "displayMode", "onPick", "className", "children"]);
+    const dropzoneRef = useRef();
+    const isButton = displayMode === 'button';
+    const isDropzone = displayMode === 'dropzone';
+    const isFull = displayMode === 'full';
+    const showButton = isButton || isFull;
+    const showDropzone = isDropzone || isFull;
+    const handleDrop = useCallback((acceptedFiles, rejectedFiles) => {
+        const hasImagesType = accept && Object.keys(accept).some(mimeType => mimeType.startsWith('image'));
+        const files = hasImagesType
+            ? acceptedFiles.map(file => Object.assign(file, {
+                preview: URL.createObjectURL(file),
+            }))
+            : acceptedFiles;
+        onPick(files, rejectedFiles);
+    }, [onPick, accept]);
+    const onOpenClick = () => dropzoneRef.current.open();
+    return (_jsxs("div", Object.assign({ className: 'FilePicker' }, { children: [showButton && (_jsx(Button, Object.assign({ onClick: onOpenClick, className: className }, { children: label }))), _jsx(Dropzone, Object.assign({}, remainigProps, { onDrop: handleDrop, accept: accept, multiple: multiple, maxSize: maxSize, ref: dropzoneRef }, { children: ({ getRootProps, getInputProps, isDragActive }) => {
+                    return (_jsxs("div", Object.assign({}, getRootProps(), { children: [_jsx("input", Object.assign({}, getInputProps())), showDropzone && children && children({ isDragActive })] })));
+                } }))] })));
 };
 FilePicker.DISPLAY_MODE_BUTTON = 'button';
 FilePicker.DISPLAY_MODE_DROPZONE = 'dropzone';
 FilePicker.DISPLAY_MODE_FULL = 'full';
 FilePicker.defaultProps = {
-  displayMode: 'button',
-  multiple: true,
-  label: 'Select Files',
-  onPick: function onPick() {},
-  className: ''
+    displayMode: 'button',
+    multiple: true,
+    label: 'Select Files',
+    onPick: () => { },
+    className: '',
 };
 FilePicker.propTypes = {
-  displayMode: PropTypes.string /* Display mode: 'dropzone' / 'button' / 'full' */,
-  multiple: PropTypes.bool /* Allow multiple file selections or not */,
-  label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]) /* Text to display on Button */,
-  accept: PropTypes.object /* Object list of accepted Mime Types as keys and file extensions array as value */,
-  maxSize: PropTypes.number /* Maximum File Size */,
-  onPick: PropTypes.func /* Pick callback */,
-  className: PropTypes.string /* Custom className for the displayed component (dropzone/button) */,
-  children: PropTypes.any
+    displayMode: PropTypes.string /* Display mode: 'dropzone' / 'button' / 'full' */,
+    multiple: PropTypes.bool /* Allow multiple file selections or not */,
+    label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]) /* Text to display on Button */,
+    accept: PropTypes.object /* Object list of accepted Mime Types as keys and file extensions array as value */,
+    maxSize: PropTypes.number /* Maximum File Size */,
+    onPick: PropTypes.func /* Pick callback */,
+    className: PropTypes.string /* Custom className for the displayed component (dropzone/button) */,
+    children: PropTypes.any,
 };
-export default FilePicker;
+export default FilePicker;

package/components/listMenu/ListMenu.d.ts

@@ -0,0 +1,44 @@
+export default ListMenu;
+declare function ListMenu(props: any): JSX.Element;
+declare namespace ListMenu {
+    namespace defaultProps {
+        const menuItems: never[];
+        const enableFilter: boolean;
+        const focusFilter: boolean;
+        const className: string;
+        const groupClassName: string;
+        const responsive: boolean;
+        const autoClose: boolean;
+        const filterKey: string;
+    }
+    namespace propTypes {
+        const menuItems_1: PropTypes.Validator<(PropTypes.InferProps<{
+            group: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
+            groupNavItem: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+            navItems: PropTypes.Validator<(PropTypes.InferProps<{
+                key: PropTypes.Validator<string>;
+                item: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
+                disabled: PropTypes.Requireable<boolean>;
+            }> | null | undefined)[]>;
+            isSubItem: PropTypes.Requireable<boolean>;
+        }> | null | undefined)[]>;
+        export { menuItems_1 as menuItems };
+        const enableFilter_1: PropTypes.Requireable<boolean>;
+        export { enableFilter_1 as enableFilter };
+        const focusFilter_1: PropTypes.Requireable<boolean>;
+        export { focusFilter_1 as focusFilter };
+        const filterKey_1: PropTypes.Requireable<string>;
+        export { filterKey_1 as filterKey };
+        export const filterPlaceholder: PropTypes.Requireable<string>;
+        export const notFoundMessage: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
+        const groupClassName_1: PropTypes.Requireable<string>;
+        export { groupClassName_1 as groupClassName };
+        const className_1: PropTypes.Requireable<string>;
+        export { className_1 as className };
+        const responsive_1: PropTypes.Requireable<boolean>;
+        export { responsive_1 as responsive };
+        const autoClose_1: PropTypes.Requireable<boolean>;
+        export { autoClose_1 as autoClose };
+    }
+}
+import PropTypes from "prop-types";

package/components/listMenu/ListMenu.js

@@ -1,10 +1,5 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["menuItems", "focusFilter", "enableFilter", "filterPlaceholder", "notFoundMessage", "className", "groupClassName", "responsive", "autoClose", "filterKey"];
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useLayoutEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import isEmpty from 'lodash/fp/isEmpty';
@@ -13,234 +8,122 @@ import classNames from 'classnames';
 import useEffectOnce from '../../hooks/useEffectOnce';
 import ClearableInput from '../clearableInput/ClearableInput';
 import ExpanderPanel from '../expander/ExpanderPanel';
-
 // @screen-ls: 480px;
 // @screen-sm: 768px;
-
-var RESIZE_THROTTELING = 10;
-var MOBILE_MAX_WIDTH = 580;
-var filterMenuItems = function filterMenuItems(items, value, filterKey) {
-  return items.map(function (menuGroupItem) {
-    var groupItems = menuGroupItem.navItems;
-    var navItems = groupItems.filter(function (item) {
-      var _item$filterKey;
-      return (_item$filterKey = item[filterKey]) === null || _item$filterKey === void 0 ? void 0 : _item$filterKey.toLowerCase().includes(value.toLowerCase());
+const RESIZE_THROTTELING = 10;
+const MOBILE_MAX_WIDTH = 580;
+const filterMenuItems = (items, value, filterKey) => {
+    return items.map(menuGroupItem => {
+        const groupItems = menuGroupItem.navItems;
+        const navItems = groupItems.filter(item => { var _a; return (_a = item[filterKey]) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(value.toLowerCase()); });
+        return Object.assign(Object.assign({}, menuGroupItem), { navItems });
     });
-    return _objectSpread(_objectSpread({}, menuGroupItem), {}, {
-      navItems: navItems
-    });
-  });
-};
-var ListMenuHeader = function ListMenuHeader(_ref) {
-  var group = _ref.group,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? '' : _ref$className,
-    groupNavItem = _ref.groupNavItem;
-  if (!group && !groupNavItem) {
-    return null;
-  }
-  return /*#__PURE__*/React.createElement("li", {
-    className: "ListMenuHeader"
-  }, groupNavItem ? groupNavItem : /*#__PURE__*/React.createElement("span", {
-    className: className
-  }, group));
-};
-var ListMenuItem = function ListMenuItem(_ref2) {
-  var disabled = _ref2.disabled,
-    _ref2$isSubItem = _ref2.isSubItem,
-    isSubItem = _ref2$isSubItem === void 0 ? false : _ref2$isSubItem,
-    children = _ref2.children;
-  var classes = classNames(disabled && 'disabled', isSubItem && 'subitem');
-  return /*#__PURE__*/React.createElement("li", {
-    className: classes
-  }, children);
 };
-var ListMenuGroup = function ListMenuGroup(_ref3) {
-  var menuGroup = _ref3.menuGroup,
-    className = _ref3.className;
-  if (!menuGroup.navItems.length) {
-    return null;
-  }
-  return /*#__PURE__*/React.createElement("ul", {
-    className: "ListMenuGroup ".concat(className)
-  }, /*#__PURE__*/React.createElement(ListMenuHeader, menuGroup), menuGroup.navItems.map(function (item) {
-    return /*#__PURE__*/React.createElement(ListMenuItem, {
-      key: item.key,
-      disabled: item.disabled,
-      isSubItem: item.isSubItem
-    }, item.item);
-  }));
+const ListMenuHeader = ({ group, className = '', groupNavItem }) => {
+    if (!group && !groupNavItem) {
+        return null;
+    }
+    return (_jsx("li", Object.assign({ className: 'ListMenuHeader' }, { children: groupNavItem ? groupNavItem : _jsx("span", Object.assign({ className: className }, { children: group })) })));
 };
-var NotFoundMessage = function NotFoundMessage(_ref4) {
-  var notFoundMessage = _ref4.notFoundMessage;
-  return /*#__PURE__*/React.createElement("div", {
-    className: "padding-top-25 text-center text-color-gray"
-  }, notFoundMessage);
+const ListMenuItem = ({ disabled, isSubItem = false, children }) => {
+    const classes = classNames(disabled && 'disabled', isSubItem && 'subitem');
+    return _jsx("li", Object.assign({ className: classes }, { children: children }));
 };
-var ListMenu = function ListMenu(props) {
-  var menuItems = props.menuItems,
-    focusFilter = props.focusFilter,
-    enableFilter = props.enableFilter,
-    filterPlaceholder = props.filterPlaceholder,
-    notFoundMessage = props.notFoundMessage,
-    className = props.className,
-    groupClassName = props.groupClassName,
-    responsive = props.responsive,
-    autoClose = props.autoClose,
-    filterKey = props.filterKey,
-    remainingProps = _objectWithoutProperties(props, _excluded);
-  var _useState = useState(''),
-    _useState2 = _slicedToArray(_useState, 2),
-    filterValue = _useState2[0],
-    setFilterValue = _useState2[1];
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isMobileMode = _useState4[0],
-    setIsMobileMode = _useState4[1];
-  var _useState5 = useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    isExpanderOpen = _useState6[0],
-    setIsExpanderOpen = _useState6[1];
-  var _useState7 = useState(''),
-    _useState8 = _slicedToArray(_useState7, 2),
-    mobileHeader = _useState8[0],
-    setMobileHeader = _useState8[1];
-  var inputRef = useRef();
-  var listRef = useRef();
-  var buildMobileHeader = function buildMobileHeader() {
-    if (responsive && listRef.current) {
-      var _listRef$current$getE = listRef.current.getElementsByClassName('active'),
-        _listRef$current$getE2 = _slicedToArray(_listRef$current$getE, 1),
-        activeElement = _listRef$current$getE2[0];
-      setMobileHeader( /*#__PURE__*/React.createElement("div", {
-        className: "display-flex align-items-center"
-      }, /*#__PURE__*/React.createElement("span", {
-        className: "rioglyph rioglyph-menu-hamburger margin-right-10"
-      }), /*#__PURE__*/React.createElement("span", null, activeElement && activeElement.innerText)));
+const ListMenuGroup = ({ menuGroup, className }) => {
+    if (!menuGroup.navItems.length) {
+        return null;
     }
-  };
-  var handleMobileMode = function handleMobileMode() {
-    return setIsMobileMode(window.innerWidth < MOBILE_MAX_WIDTH);
-  };
-  useEffectOnce(function () {
-    var handleKeyDown = function handleKeyDown(event) {
-      // clear on esc
-      if (event.keyCode === 27 && enableFilter && inputRef.current === document.activeElement) {
-        setFilterValue('');
-      }
-    };
-    document.addEventListener('keydown', handleKeyDown);
-    return function () {
-      document.removeEventListener('keydown', handleKeyDown);
+    return (_jsxs("ul", Object.assign({ className: `ListMenuGroup ${className}` }, { children: [_jsx(ListMenuHeader, Object.assign({}, menuGroup)), menuGroup.navItems.map(item => (_jsx(ListMenuItem, Object.assign({ disabled: item.disabled, isSubItem: item.isSubItem }, { children: item.item }), item.key)))] })));
+};
+const NotFoundMessage = ({ notFoundMessage }) => (_jsx("div", Object.assign({ className: 'padding-top-25 text-center text-color-gray' }, { children: notFoundMessage })));
+const ListMenu = props => {
+    const { menuItems, focusFilter, enableFilter, filterPlaceholder, notFoundMessage, className, groupClassName, responsive, autoClose, filterKey } = props, remainingProps = __rest(props, ["menuItems", "focusFilter", "enableFilter", "filterPlaceholder", "notFoundMessage", "className", "groupClassName", "responsive", "autoClose", "filterKey"]);
+    const [filterValue, setFilterValue] = useState('');
+    const [isMobileMode, setIsMobileMode] = useState(false);
+    const [isExpanderOpen, setIsExpanderOpen] = useState(false);
+    const [mobileHeader, setMobileHeader] = useState('');
+    const inputRef = useRef();
+    const listRef = useRef();
+    const buildMobileHeader = () => {
+        if (responsive && listRef.current) {
+            const [activeElement] = listRef.current.getElementsByClassName('active');
+            setMobileHeader(_jsxs("div", Object.assign({ className: 'display-flex align-items-center' }, { children: [_jsx("span", { className: 'rioglyph rioglyph-menu-hamburger margin-right-10' }), _jsx("span", { children: activeElement && activeElement.innerText })] })));
+        }
     };
-  });
-  useEffectOnce(function () {
-    handleMobileMode();
-    var handleResize = debounce(RESIZE_THROTTELING)(function () {
-      handleMobileMode();
-      buildMobileHeader();
+    const handleMobileMode = () => setIsMobileMode(window.innerWidth < MOBILE_MAX_WIDTH);
+    useEffectOnce(() => {
+        const handleKeyDown = event => {
+            // clear on esc
+            if (event.keyCode === 27 && enableFilter && inputRef.current === document.activeElement) {
+                setFilterValue('');
+            }
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return () => {
+            document.removeEventListener('keydown', handleKeyDown);
+        };
     });
-    window.addEventListener('resize', handleResize);
-    return function () {
-      window.removeEventListener('resize', handleResize);
-    };
-  });
-  useLayoutEffect(function () {
-    buildMobileHeader();
-  }, [menuItems]);
-  useEffectOnce(function () {
-    focusFilter && inputRef.current && inputRef.current.focus();
-  });
-  var handleClear = function handleClear() {
-    return focusFilter && inputRef.current && inputRef.current.focus();
-  };
-  var handleFilterChange = function handleFilterChange(value) {
-    return setFilterValue(value);
-  };
-  var hasMenuItems = function hasMenuItems(items) {
-    return items.find(function (menuGroup) {
-      return !isEmpty(menuGroup.navItems);
+    useEffectOnce(() => {
+        handleMobileMode();
+        const handleResize = debounce(RESIZE_THROTTELING)(() => {
+            handleMobileMode();
+            buildMobileHeader();
+        });
+        window.addEventListener('resize', handleResize);
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
     });
-  };
-  var filteredMenuItems = filterMenuItems(menuItems, filterValue, filterKey);
-  var handleExpanderBodyClick = function handleExpanderBodyClick(event) {
-    var isListItem = event.target.parentElement.tagName.toLowerCase() === 'li';
-    autoClose && isListItem && setIsExpanderOpen(false);
-  };
-  var formClassNames = classNames('form-group margin-bottom-5', 'padding-left-15', 'padding-right-15', 'padding-bottom-15', 'position-sticky', 'top-0');
-  var listMenu = /*#__PURE__*/React.createElement("div", _extends({}, remainingProps, {
-    className: "ListMenu ".concat(className),
-    ref: listRef
-  }), enableFilter && /*#__PURE__*/React.createElement("div", {
-    className: formClassNames
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "input-group width-100pct"
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "input-group-addon"
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "rioglyph rioglyph-search",
-    "aria-hidden": "true"
-  })), /*#__PURE__*/React.createElement(ClearableInput, {
-    value: filterValue,
-    inputRef: inputRef,
-    placeholder: filterPlaceholder,
-    onChange: handleFilterChange,
-    onClear: handleClear
-  }))), !hasMenuItems(filteredMenuItems) && /*#__PURE__*/React.createElement(NotFoundMessage, {
-    notFoundMessage: notFoundMessage
-  }), filteredMenuItems.map(function (menuGroup, index) {
-    return /*#__PURE__*/React.createElement(ListMenuGroup, {
-      key: index,
-      className: groupClassName,
-      menuGroup: menuGroup
+    useLayoutEffect(() => {
+        buildMobileHeader();
+    }, [menuItems]);
+    useEffectOnce(() => {
+        focusFilter && inputRef.current && inputRef.current.focus();
     });
-  }));
-  if (responsive && isMobileMode) {
-    return /*#__PURE__*/React.createElement(ExpanderPanel, {
-      title: mobileHeader,
-      bsStyle: "default",
-      open: isExpanderOpen,
-      onToggle: function onToggle() {
-        return setIsExpanderOpen(!isExpanderOpen);
-      },
-      mountOnEnter: false,
-      unmountOnExit: false,
-      className: "shadow-default"
-    }, /*#__PURE__*/React.createElement("div", {
-      onClick: handleExpanderBodyClick
-    }, listMenu));
-  }
-  return listMenu;
+    const handleClear = () => focusFilter && inputRef.current && inputRef.current.focus();
+    const handleFilterChange = value => setFilterValue(value);
+    const hasMenuItems = items => items.find(menuGroup => !isEmpty(menuGroup.navItems));
+    const filteredMenuItems = filterMenuItems(menuItems, filterValue, filterKey);
+    const handleExpanderBodyClick = event => {
+        const isListItem = event.target.parentElement.tagName.toLowerCase() === 'li';
+        autoClose && isListItem && setIsExpanderOpen(false);
+    };
+    const formClassNames = classNames('form-group margin-bottom-5', 'padding-left-15', 'padding-right-15', 'padding-bottom-15', 'position-sticky', 'top-0');
+    const listMenu = (_jsxs("div", Object.assign({}, remainingProps, { className: `ListMenu ${className}`, ref: listRef }, { children: [enableFilter && (_jsx("div", Object.assign({ className: formClassNames }, { children: _jsxs("div", Object.assign({ className: 'input-group width-100pct' }, { children: [_jsx("span", Object.assign({ className: 'input-group-addon' }, { children: _jsx("span", { className: 'rioglyph rioglyph-search', "aria-hidden": 'true' }) })), _jsx(ClearableInput, { value: filterValue, inputRef: inputRef, placeholder: filterPlaceholder, onChange: handleFilterChange, onClear: handleClear })] })) }))), !hasMenuItems(filteredMenuItems) && _jsx(NotFoundMessage, { notFoundMessage: notFoundMessage }), filteredMenuItems.map((menuGroup, index) => (_jsx(ListMenuGroup, { className: groupClassName, menuGroup: menuGroup }, index)))] })));
+    if (responsive && isMobileMode) {
+        return (_jsx(ExpanderPanel, Object.assign({ title: mobileHeader, bsStyle: 'default', open: isExpanderOpen, onToggle: () => setIsExpanderOpen(!isExpanderOpen), mountOnEnter: false, unmountOnExit: false, className: 'shadow-default' }, { children: _jsx("div", Object.assign({ onClick: handleExpanderBodyClick }, { children: listMenu })) })));
+    }
+    return listMenu;
 };
 ListMenu.defaultProps = {
-  menuItems: [],
-  enableFilter: false,
-  focusFilter: false,
-  className: '',
-  groupClassName: '',
-  responsive: true,
-  autoClose: true,
-  filterKey: 'key'
+    menuItems: [],
+    enableFilter: false,
+    focusFilter: false,
+    className: '',
+    groupClassName: '',
+    responsive: true,
+    autoClose: true,
+    filterKey: 'key',
 };
 ListMenu.propTypes = {
-  menuItems: PropTypes.arrayOf(PropTypes.shape({
-    group: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-    groupNavItem: PropTypes.node,
-    navItems: PropTypes.arrayOf(PropTypes.shape({
-      key: PropTypes.string.isRequired,
-      item: PropTypes.node.isRequired,
-      disabled: PropTypes.bool
+    menuItems: PropTypes.arrayOf(PropTypes.shape({
+        group: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+        groupNavItem: PropTypes.node,
+        navItems: PropTypes.arrayOf(PropTypes.shape({
+            key: PropTypes.string.isRequired,
+            item: PropTypes.node.isRequired,
+            disabled: PropTypes.bool,
+        })).isRequired,
+        isSubItem: PropTypes.bool,
     })).isRequired,
-    isSubItem: PropTypes.bool
-  })).isRequired,
-  enableFilter: PropTypes.bool,
-  focusFilter: PropTypes.bool,
-  filterKey: PropTypes.string,
-  filterPlaceholder: PropTypes.string,
-  notFoundMessage: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  groupClassName: PropTypes.string,
-  className: PropTypes.string,
-  responsive: PropTypes.bool,
-  autoClose: PropTypes.bool
+    enableFilter: PropTypes.bool,
+    focusFilter: PropTypes.bool,
+    filterKey: PropTypes.string,
+    filterPlaceholder: PropTypes.string,
+    notFoundMessage: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+    groupClassName: PropTypes.string,
+    className: PropTypes.string,
+    responsive: PropTypes.bool,
+    autoClose: PropTypes.bool,
 };
-export default ListMenu;
+export default ListMenu;

package/components/loadMore/LoadMoreButton.d.ts

@@ -0,0 +1,14 @@
+import { type ReactNode } from 'react';
+import { type ProgressBarStyle } from './LoadMoreProgress';
+type LoadMoreButtonProps = {
+    loaded?: number;
+    total?: number;
+    noMoreMessage?: string | ReactNode;
+    loadMoreMessage?: string | ReactNode;
+    isInteractive: boolean;
+    onLoadMore?: () => void;
+    progressBarStyle?: ProgressBarStyle;
+    className?: string;
+};
+export declare const LoadMoreButton: (props: LoadMoreButtonProps) => JSX.Element;
+export default LoadMoreButton;

package/components/loadMore/LoadMoreButton.js

@@ -1,51 +1,13 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["loaded", "total", "onLoadMore", "loadMoreMessage", "noMoreMessage", "className"];
-import React from 'react';
-import PropTypes from 'prop-types';
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// @ts-ignore-next-line importsNotUsedAsValues
+import 'react';
 import classNames from 'classnames';
 import { LoadMoreProgress } from './LoadMoreProgress';
-export var LoadMoreButton = function LoadMoreButton(props) {
-  var loaded = props.loaded,
-    total = props.total,
-    onLoadMore = props.onLoadMore,
-    loadMoreMessage = props.loadMoreMessage,
-    noMoreMessage = props.noMoreMessage,
-    className = props.className,
-    remainingProps = _objectWithoutProperties(props, _excluded);
-  var wrapperClassNames = classNames('LoadMoreButton', 'align-items-center', 'display-flex', 'justify-content-center', 'margin-top-25', 'margin-bottom-25', 'non-printable', className);
-  var hasMoreToLoad = loaded > 0 && total > 0 && loaded !== total;
-  return /*#__PURE__*/React.createElement("div", _extends({}, remainingProps, {
-    className: wrapperClassNames
-  }), /*#__PURE__*/React.createElement("div", {
-    className: 'min-width-150'
-  }, /*#__PURE__*/React.createElement(LoadMoreProgress, {
-    loaded: loaded,
-    total: total
-  }), /*#__PURE__*/React.createElement("div", {
-    className: 'display-flex justify-content-center'
-  }, hasMoreToLoad && /*#__PURE__*/React.createElement("button", {
-    className: 'btn btn-link padding-right-20 margin-top--5',
-    type: 'button',
-    onClick: onLoadMore
-  }, /*#__PURE__*/React.createElement("span", {
-    className: 'rioglyph rioglyph-arrow-down'
-  }), loadMoreMessage), !hasMoreToLoad && /*#__PURE__*/React.createElement("span", {
-    className: 'padding-top-4 padding-bottom-10'
-  }, noMoreMessage))));
+export const LoadMoreButton = (props) => {
+    const { loaded = 0, total = 100, onLoadMore = () => { }, loadMoreMessage = '', noMoreMessage = '', isInteractive = true, progressBarStyle, className = '' } = props, remainingProps = __rest(props, ["loaded", "total", "onLoadMore", "loadMoreMessage", "noMoreMessage", "isInteractive", "progressBarStyle", "className"]);
+    const wrapperClassNames = classNames('LoadMoreButton', 'align-items-center', 'display-flex', 'justify-content-center', 'margin-top-25', 'margin-bottom-25', 'non-printable', className);
+    const hasMoreToLoad = loaded > 0 && total > 0 && loaded < total;
+    return (_jsx("div", Object.assign({}, remainingProps, { className: wrapperClassNames }, { children: _jsxs("div", Object.assign({ className: 'min-width-150' }, { children: [_jsx(LoadMoreProgress, { loaded: loaded, total: total, progressBarStyle: progressBarStyle }), _jsxs("div", Object.assign({ className: 'display-flex justify-content-center' }, { children: [hasMoreToLoad && isInteractive && (_jsxs("button", Object.assign({ className: 'btn btn-link padding-right-20 margin-top--5', type: 'button', onClick: onLoadMore }, { children: [_jsx("span", { className: 'rioglyph rioglyph-arrow-down' }), loadMoreMessage] }))), hasMoreToLoad && !isInteractive && (_jsx("span", Object.assign({ className: 'padding-top-4 padding-bottom-10' }, { children: loadMoreMessage }))), !hasMoreToLoad && _jsx("span", Object.assign({ className: 'padding-top-4 padding-bottom-10' }, { children: noMoreMessage }))] }))] })) })));
 };
-LoadMoreButton.defaultProps = {
-  onLoadMore: function onLoadMore() {},
-  className: '',
-  loadMoreMessage: '',
-  noMoreMessage: ''
-};
-LoadMoreButton.propTypes = {
-  loaded: PropTypes.number,
-  total: PropTypes.number,
-  loadMoreMessage: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  noMoreMessage: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  onLoadMore: PropTypes.func.isRequired,
-  className: PropTypes.string
-};
-export default LoadMoreButton;
+export default LoadMoreButton;

package/components/loadMore/LoadMoreProgress.d.ts

@@ -0,0 +1,12 @@
+declare const STYLE: {
+    readonly WHITE: "white";
+    readonly GRAY: "gray";
+};
+export type ProgressBarStyle = (typeof STYLE)[keyof typeof STYLE];
+type LoadMoreProgressProps = {
+    loaded: number;
+    total: number;
+    progressBarStyle?: ProgressBarStyle;
+};
+export declare const LoadMoreProgress: ({ loaded, total, progressBarStyle }: LoadMoreProgressProps) => JSX.Element | null;
+export default LoadMoreProgress;