@geneui/components 2.11.1

package/DatePickerInput.js

@@ -0,0 +1,30 @@
+import './globalStyling-9c60a159.js';
+export { D as default } from './index-5e722d91.js';
+import './style-inject.es-746bb8ed.js';
+import './_rollupPluginBabelHelpers-e8fb2e5c.js';
+import 'react';
+import './index-e0af0caf.js';
+import './dateValidation-67caec66.js';
+import './_commonjsHelpers-24198af3.js';
+import './configs-91c86664.js';
+import './index-ac59cb10.js';
+import 'react-dom';
+import './useKeyDown-38102ae7.js';
+import './useDeviceType-dd51db38.js';
+import './useWindowSize-80369d76.js';
+import './index-6ff23041.js';
+import './index-702bf24a.js';
+import './index-122432cd.js';
+import './useClickOutside-5183e396.js';
+import './Scrollbar.js';
+import './GeneUIProvider.js';
+import './debounce-4419bc2f.js';
+import './DatePicker.js';
+import './guid-8ddf77b3.js';
+import './Button.js';
+import './Icon.js';
+import './ExtendedInput.js';
+import './index-5cea9a7d.js';
+import './Tooltip.js';
+import './Popover-f4d1cac0.js';
+import './localization-4ba17032.js';

package/Divider.js

@@ -0,0 +1,56 @@
+import { _ as _extends } from './_rollupPluginBabelHelpers-e8fb2e5c.js';
+import React__default, { useMemo } from 'react';
+import { p as propTypesExports } from './index-e0af0caf.js';
+import { c as classnames } from './index-6ff23041.js';
+import './globalStyling-9c60a159.js';
+import { s as styleInject } from './style-inject.es-746bb8ed.js';
+
+var css_248z = "[data-gene-ui-version=\"2.11.0\"] .divider{background:rgba(var(--background-sc-rgb),.05);height:2.6rem;width:1px}[data-gene-ui-version=\"2.11.0\"] .divider:not(.divider-withNoSpace){margin:0 1.5rem}[data-gene-ui-version=\"2.11.0\"] .divider:not(.divider-withNoSpace).type-horizontal{margin:1.5rem 0}[data-gene-ui-version=\"2.11.0\"] .divider.type-horizontal{height:1px;width:2.6rem}[data-gene-ui-version=\"2.11.0\"] .divider.type-horizontal.full-width{width:100%}";
+styleInject(css_248z);
+
+function Divider(_ref) {
+  let {
+    type,
+    className,
+    size,
+    withSpace,
+    ...restProps
+  } = _ref;
+  const modifiedSize = useMemo(() => typeof size === 'number' ? "".concat(size / 10, "rem") : size, [size]);
+  const styles = useMemo(() => type === 'vertical' ? {
+    height: modifiedSize
+  } : {
+    width: modifiedSize
+  }, [modifiedSize, type]);
+  return /*#__PURE__*/React__default.createElement("div", _extends({
+    className: classnames('divider', "type-".concat(type), {
+      'divider-withNoSpace': !withSpace
+    }, className),
+    style: styles
+  }, restProps));
+}
+Divider.propTypes = {
+  /**
+   * Divider direction
+   */
+  type: propTypesExports.oneOf(['horizontal', 'vertical']),
+  /**
+   * Divider additional className
+   */
+  className: propTypesExports.string,
+  /**
+   * Divider size will be applied to height(when "type" is set to "vertical") or to width(when "type" is set to "horizontal")
+   */
+  size: propTypesExports.oneOfType([propTypesExports.string, propTypesExports.number]),
+  /**
+   * withSpace by default true. If you want to remove the divider`s spacing, switch to false
+   */
+  withSpace: propTypesExports.bool
+};
+Divider.defaultProps = {
+  type: 'vertical',
+  withSpace: true
+};
+Divider.displayName = 'Divider';
+
+export { Divider as default };

package/Drawer.js

@@ -0,0 +1,264 @@
+import React__default, { useRef, useState, useEffect, useCallback, useMemo, Fragment } from 'react';
+import { p as propTypesExports } from './index-e0af0caf.js';
+import { c as clsx } from './clsx.m-2bb6df4b.js';
+import { n as noop } from './index-ac59cb10.js';
+import './configs-91c86664.js';
+import { u as useClickOutside } from './useClickOutside-5183e396.js';
+import Icon from './Icon.js';
+import Tooltip from './Tooltip.js';
+import { s as styleInject } from './style-inject.es-746bb8ed.js';
+import './dateValidation-67caec66.js';
+import './_commonjsHelpers-24198af3.js';
+import 'react-dom';
+import './_rollupPluginBabelHelpers-e8fb2e5c.js';
+import './index-6ff23041.js';
+import './globalStyling-9c60a159.js';
+import './Popover-f4d1cac0.js';
+import './useDeviceType-dd51db38.js';
+import './useWindowSize-80369d76.js';
+import './GeneUIProvider.js';
+
+var css_248z = "[data-gene-ui-version=\"2.11.0\"] .bc-drawer{--width:7.2rem;--head-justify:center;--item-width:4.2rem;--item-padding:0;--item-justify:center;--item-title-display:none;--item-icon-margin:0;background:var(--background);border-right:1px solid rgba(var(--background-sc-rgb),.1);left:0;overflow:hidden;top:0;transition:width .15s cubic-bezier(.4,0,.2,1);width:var(--width);z-index:200}[data-gene-ui-version=\"2.11.0\"] .bc-drawer.open{--width:30rem;--head-justify:space-between;--item-width:100%;--item-padding:0 14px;--item-justify:flex-start;--item-title-display:block;--item-icon-margin:17px}[data-gene-ui-version=\"2.11.0\"] .bc-drawer.open .bc-drawer-head:after{background-color:#1473e6;bottom:0;content:\"\";height:3px;left:20px;margin:17px 198px 0 0;position:absolute;width:34px}[data-gene-ui-version=\"2.11.0\"] .bc-drawer .bc-drawer-head{align-items:center;border-bottom:1px solid rgba(var(--background-sc-rgb),.1);display:flex;height:64px;justify-content:var(--head-justify);padding:20px;position:relative;width:var(--width)}[data-gene-ui-version=\"2.11.0\"] .bc-drawer .bc-drawer-head .bc-drawer-head-title{font-size:16px;font-weight:600}[data-gene-ui-version=\"2.11.0\"] .bc-drawer .bc-drawer-head .bc-drawer-head-icon{cursor:pointer}[data-gene-ui-version=\"2.11.0\"] .bc-drawer .bc-drawer-head .bc-drawer-head-icon:hover{color:#1473e6}[data-gene-ui-version=\"2.11.0\"] .bc-drawer .bc-drawer-content{display:flex;flex-direction:column;height:calc(100% - 64px);overflow-x:hidden;overflow-y:auto;padding:10px 12px;width:var(--width)}[data-gene-ui-version=\"2.11.0\"] .bc-drawer .bc-drawer-item{align-items:center;border-radius:21px;cursor:pointer;display:flex;height:42px;justify-content:var(--item-justify);min-height:42px;overflow:hidden;padding:var(--item-padding);position:relative;transition:width .15s cubic-bezier(.4,0,.2,1);transition:color .3s,background .3s,opacity .2s;width:var(--item-width)}[data-gene-ui-version=\"2.11.0\"] .bc-drawer .bc-drawer-item:hover{background-color:#00000008}[data-gene-ui-version=\"2.11.0\"] .bc-drawer .bc-drawer-item.disabled{opacity:.5;pointer-events:none}[data-gene-ui-version=\"2.11.0\"] .bc-drawer .bc-drawer-item.active:not(.nested){background-color:#1473e6;color:#fff}[data-gene-ui-version=\"2.11.0\"] .bc-drawer .bc-drawer-item.active.nested{background-color:#1473e608;color:#1473e6}[data-gene-ui-version=\"2.11.0\"] .bc-drawer .bc-drawer-item.nested{padding-left:57px}[data-gene-ui-version=\"2.11.0\"] .bc-drawer .bc-drawer-item .bc-drawer-item-icon{margin-right:var(--item-icon-margin)}[data-gene-ui-version=\"2.11.0\"] .bc-drawer .bc-drawer-item .bc-drawer-item-title{display:var(--item-title-display);font-weight:600}[data-gene-ui-version=\"2.11.0\"] .bc-drawer .bc-drawer-item .bc-drawer-item-arrow{position:absolute;right:17px;transition:.15s cubic-bezier(.4,0,.2,1)}[data-gene-ui-version=\"2.11.0\"] .bc-drawer .bc-drawer-item .bc-drawer-item-arrow.open{transform:rotate(-180deg)}[data-gene-ui-version=\"2.11.0\"] .bc-drawer .bc-drawer-item-nested-list{max-height:0;overflow:hidden;transition:.15s cubic-bezier(.4,0,.2,1);width:100%}[data-gene-ui-version=\"2.11.0\"] .bc-drawer .bc-drawer-item-nested-list.open{max-height:100%}";
+styleInject(css_248z);
+
+function Drawer(_ref) {
+  let {
+    menu,
+    title,
+    value,
+    defaultValue,
+    className,
+    onOpen,
+    onClose,
+    onChange,
+    onOutsideClick,
+    defaultOpen,
+    height,
+    position,
+    isOpen,
+    closeAfterSelect,
+    closeWithOutsideClick
+  } = _ref;
+  const isOpenControlled = typeof isOpen === 'boolean';
+  const drawerRef = useRef(null);
+  const [isDrawerOpen, setIsDrawerOpen] = useState(defaultOpen);
+  const [selectedVaule, setSelectedValue] = useState(defaultValue);
+  const [openNested, setOpenNested] = useState(null);
+  useEffect(() => {
+    setSelectedValue(value);
+  }, [value]);
+  useEffect(() => {
+    isOpenControlled && setIsDrawerOpen(isOpen);
+  }, [isOpenControlled, isOpen]);
+  const handleOpen = useCallback(event => {
+    if (!isDrawerOpen) {
+      !isOpenControlled && setIsDrawerOpen(true);
+      onOpen(event);
+    }
+  }, [isDrawerOpen, isOpenControlled, onOpen]);
+  const handleClose = useCallback(event => {
+    if (isDrawerOpen) {
+      !isOpenControlled && setIsDrawerOpen(false);
+      onClose(event);
+    }
+  }, [isDrawerOpen, isOpenControlled, onClose]);
+  const selectedNestedParent = useMemo(() => {
+    const selectedItem = menu.find(item => item.id === selectedVaule || item.nested && item.nested.length && item.nested.findIndex(nestedItem => nestedItem.id === selectedVaule) > -1);
+    return selectedItem && selectedItem.id;
+  }, [selectedVaule, menu]);
+  const handleItemClick = useCallback((item, index, event) => {
+    if (!item.disabled) {
+      if (item.nested && item.nested.length > 0) {
+        if (isDrawerOpen) {
+          setOpenNested(prev => prev !== index && index);
+        } else {
+          setOpenNested(index);
+          handleOpen(event);
+        }
+      } else if (item.id !== selectedVaule) {
+        onChange(item);
+        setSelectedValue(item.id);
+        closeAfterSelect && handleClose(event);
+      }
+    }
+  }, [closeAfterSelect, handleClose, handleOpen, isDrawerOpen, onChange, selectedVaule]);
+  const handleNestedItemClick = useCallback((item, nested, event) => {
+    if (!item.disabled && !nested.disabled && nested.id !== selectedVaule) {
+      onChange(item, nested);
+      setSelectedValue(nested.id);
+      closeAfterSelect && handleClose(event);
+    }
+  }, [closeAfterSelect, handleClose, onChange, selectedVaule]);
+  const handleMenuIconClick = useCallback(event => {
+    isDrawerOpen ? handleClose(event) : handleOpen(event);
+  }, [isDrawerOpen, handleClose, handleOpen]);
+  const drawerStyles = useMemo(() => ({
+    position,
+    height
+  }), [position, height]);
+  const handleOutsideClick = useClickOutside(event => {
+    if (drawerRef && !drawerRef.current.contains(event.target)) {
+      closeWithOutsideClick && handleClose();
+      onOutsideClick(event);
+    }
+  });
+  const generateDrawerRef = useCallback(node => {
+    if (node && drawerRef) {
+      drawerRef.current = node;
+      handleOutsideClick(node);
+    }
+  }, [handleOutsideClick]);
+  return /*#__PURE__*/React__default.createElement("div", {
+    ref: generateDrawerRef,
+    className: clsx('bc-drawer', className, {
+      open: isDrawerOpen
+    }),
+    style: drawerStyles
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "bc-drawer-head"
+  }, isDrawerOpen && /*#__PURE__*/React__default.createElement("span", {
+    className: "bc-drawer-head-title"
+  }, title), /*#__PURE__*/React__default.createElement(Icon, {
+    className: "bc-drawer-head-icon",
+    onClick: handleMenuIconClick,
+    type: isDrawerOpen ? 'bc-icon-menu-collapsed' : 'bc-icon-menu-expanded'
+  })), /*#__PURE__*/React__default.createElement("div", {
+    className: "bc-drawer-content"
+  }, menu && menu.length > 0 && menu.map((item, index) => {
+    const {
+      nested
+    } = item;
+    const hasNested = nested && nested.length;
+    const isNestedOpen = isDrawerOpen && openNested === index;
+    return /*#__PURE__*/React__default.createElement(Fragment, {
+      key: item.id
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: clsx('bc-drawer-item', {
+        active: selectedNestedParent === item.id,
+        disabled: item.disabled
+      }),
+      onClick: event => handleItemClick(item, index, event)
+    }, /*#__PURE__*/React__default.createElement(Tooltip, {
+      title: isDrawerOpen ? '' : item.title,
+      position: "right"
+    }, item.icon && /*#__PURE__*/React__default.createElement(Icon, {
+      className: "bc-drawer-item-icon",
+      type: item.icon
+    })), /*#__PURE__*/React__default.createElement("span", {
+      className: "bc-drawer-item-title"
+    }, item.title), isDrawerOpen && hasNested && /*#__PURE__*/React__default.createElement(Icon, {
+      type: "bc-icon-arrow-down",
+      className: clsx('bc-drawer-item-arrow', {
+        open: isNestedOpen
+      })
+    })), hasNested && /*#__PURE__*/React__default.createElement("div", {
+      className: clsx('bc-drawer-item-nested-list', {
+        open: isNestedOpen
+      })
+    }, nested.map(nestedItem => /*#__PURE__*/React__default.createElement("div", {
+      key: nestedItem.id,
+      className: clsx('bc-drawer-item nested', {
+        active: selectedVaule === nestedItem.id,
+        disabled: nestedItem.disabled
+      }),
+      onClick: event => handleNestedItemClick(item, nestedItem, event)
+    }, /*#__PURE__*/React__default.createElement("span", {
+      className: "bc-drawer-item-title"
+    }, nestedItem.title)))));
+  })));
+}
+Drawer.defaultProps = {
+  onOpen: noop,
+  onClose: noop,
+  onChange: noop,
+  defaultOpen: false,
+  height: '100vh',
+  position: 'relative'
+};
+Drawer.propTypes = {
+  /**
+   * Date for display the menu
+   */
+  menu: propTypesExports.arrayOf(propTypesExports.shape({
+    title: propTypesExports.string,
+    icon: propTypesExports.string,
+    id: propTypesExports.oneOfType([propTypesExports.string, propTypesExports.number]),
+    disabled: propTypesExports.bool,
+    nested: propTypesExports.arrayOf(propTypesExports.shape({
+      title: propTypesExports.string,
+      id: propTypesExports.oneOfType([propTypesExports.string, propTypesExports.number]),
+      disabled: propTypesExports.bool
+    }))
+  })),
+  /**
+   * If you want to control the selected item in the menu, you must date id of one of the 'menu' items.
+   */
+  value: propTypesExports.oneOfType([propTypesExports.string, propTypesExports.number]),
+  /**
+   * If you want not to control the menu from the top but have a default value, you can send it using defaultValue
+   */
+  defaultValue: propTypesExports.oneOfType([propTypesExports.string, propTypesExports.number]),
+  /**
+   * Label is displayed at the top in the driver
+   */
+  title: propTypesExports.string,
+  /**
+   * Override or extend the className applied to the component.
+   */
+  className: propTypesExports.string,
+  /** 
+  * Callback fired when a menu item is selected.
+  Signature:
+  function(item, nested) => void
+  item: Item is the element that was select from the menu
+  nested: If you select an item from the submenu, it will be sent as the second argument, and the first will be the item of its parent.
+  */
+  onChange: propTypesExports.func,
+  /**
+  * Callback fired when a drawer is opened.
+  Signature:
+  function(event: object) => void
+  event: The event source of the callback.
+  */
+  onOpen: propTypesExports.func,
+  /**
+  * Callback fired when a drawer is closed.
+  Signature:
+  function(event: object) => void
+  event: The event source of the callback.
+  */
+  onClose: propTypesExports.func,
+  /**
+   * If true, the component is shown by default.
+   */
+  defaultOpen: propTypesExports.bool,
+  /**
+  * Height for the component
+  by default: 100vh
+  */
+  height: propTypesExports.string,
+  /**
+  * The positioning type. The behavior of the different options is described in the MDN web docs.
+  'absolute' | 'fixed' | 'relative' | 'static' | 'sticky'
+  */
+  position: propTypesExports.string,
+  /**
+   * With this prop you can control Drawer opening and closing from parent component
+   */
+  isOpen: propTypesExports.bool,
+  /**
+   * Drawer to close after item select
+   */
+  closeAfterSelect: propTypesExports.bool,
+  /**
+   * Closes when click outside
+   */
+  closeWithOutsideClick: propTypesExports.bool,
+  /**
+   * Callback fired when a outside click.
+   * (event: MouseEvent) => void.
+   */
+  onOutsideClick: propTypesExports.func
+};
+
+export { Drawer as default };

package/Dropdown.js

@@ -0,0 +1,99 @@
+import './_rollupPluginBabelHelpers-e8fb2e5c.js';
+import 'react';
+export { m as default } from './index-0cf65939.js';
+import './index-6ff23041.js';
+import './index-e0af0caf.js';
+import './useMount-6fef51a5.js';
+import './index-5e722d91.js';
+import './useKeyDown-38102ae7.js';
+import './useDeviceType-dd51db38.js';
+import './useClickOutside-5183e396.js';
+import './index-a4635754.js';
+import './useEllipsisDetection-ef536015.js';
+import './configs-91c86664.js';
+import './index-ac59cb10.js';
+import './index-5cea9a7d.js';
+import './ExtendedInput.js';
+import './BusyLoader.js';
+import './Tooltip.js';
+import './index-702bf24a.js';
+import './Empty.js';
+import './globalStyling-9c60a159.js';
+import './index-a59530cd.js';
+import './Editor.js';
+import './_commonjsHelpers-24198af3.js';
+import 'react-dom';
+import './Button.js';
+import './Icon.js';
+import './style-inject.es-746bb8ed.js';
+import './dateValidation-67caec66.js';
+import './useWindowSize-80369d76.js';
+import './ValidatableUploader.js';
+import './index-d9e8a888.js';
+import './Grid.js';
+import './useWidth-9f4647f8.js';
+import './Image.js';
+import './Checkbox.js';
+import './checkboxRadioSwitcher-5b69d7bd.js';
+import './guid-8ddf77b3.js';
+import './Popover-f4d1cac0.js';
+import './GeneUIProvider.js';
+import './Scrollbar.js';
+import './ValidatableRadio.js';
+import './RadioGroup.js';
+import './Radio.js';
+import './ValidatableCheckbox.js';
+import './ValidatableSwitcher.js';
+import './Switcher.js';
+import './ValidatableNumberInput.js';
+import './ValidatableTextInput.js';
+import './ValidatableDatePicker.js';
+import './checkTimeValidation-e56771be.js';
+import './localization-4ba17032.js';
+import './index-122432cd.js';
+import './debounce-4419bc2f.js';
+import './DatePicker.js';
+import './Tabs.js';
+import './Steps.js';
+import './Portal.js';
+import './Timeline.js';
+import './Card.js';
+import './MobilePopup.js';
+import './Menu.js';
+import './Option.js';
+import './SkeletonLoader.js';
+import './KeyValue.js';
+import './configs.js';
+import './Tag.js';
+import './Alert.js';
+import './index-00fe8887.js';
+import './rangeAndSlider-20599da4.js';
+import './Slider.js';
+import './Pagination.js';
+import './Divider.js';
+import './objectWithoutPropertiesLoose-299691d8.js';
+import './clsx.m-2bb6df4b.js';
+import './Notification.js';
+import './Modal.js';
+import './Collapse.js';
+import './Status.js';
+import './Avatar.js';
+import './Search.js';
+import './TextLink.js';
+import './Label.js';
+import './Paper.js';
+import './Badge.js';
+import './Time.js';
+import './Title.js';
+import './index-b7a33c58.js';
+import './QRCode.js';
+import './Progress.js';
+import './MobileNavigation.js';
+import './Products.js';
+import './Breadcrumb.js';
+import './Section.js';
+import './ColorPicker.js';
+import './NavigationMenu.js';
+import './Textarea.js';
+import './AdvancedSearch.js';
+import './LinkButton.js';