venice-ui 2.1.22 → 2.2.0

package/dist/cjs/components/Checkbox/Checkbox.js

@@ -11,13 +11,13 @@ const Aligment_1 = require("../Aligment");
 const Input_1 = require("../Input");
 const Checkbox_styles_1 = require("./Checkbox.styles");
 const Icons_1 = require("../Icons");
-const Checkbox = ({ theme = Theme_1.mainTheme, label, labelPosition = 'top', value = false, readOnly = false, name, size = 'medium', width = 'auto', handleClick, }) => {
+const Checkbox = ({ theme = Theme_1.mainTheme, label, labelPosition = 'top', value = false, readOnly = false, name, size = 'medium', width = 'auto', isIntermedian = false, handleClick, }) => {
     return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: theme },
         react_1.default.createElement(Aligment_1.Aligment, { align: labelPosition === 'top' ? 'flex-start' : 'center', justify: labelPosition === 'top' ? 'center' : 'flex-start', direction: labelPosition === 'top' ? 'column-reverse' : 'row', wrap: 'nowrap', width: width },
             react_1.default.createElement(Input_1.InputWrapper, { width: width },
                 react_1.default.createElement(Checkbox_styles_1.ToogleCheckboxWrapper, { size: size },
-                    react_1.default.createElement(Checkbox_styles_1.CheckboxElement, { size: size, active: value, onClick: () => handleClick(!value) }, value && (react_1.default.createElement(Checkbox_styles_1.CheckoxIcon, null,
-                        react_1.default.createElement(Icons_1.Icon, { name: 'check', size: 20, iconColor: theme.checkColor, noPadding: true })))))),
+                    react_1.default.createElement(Checkbox_styles_1.CheckboxElement, { size: size, active: value || isIntermedian, onClick: () => handleClick(!value) }, (value || isIntermedian) && (react_1.default.createElement(Checkbox_styles_1.CheckoxIcon, null,
+                        react_1.default.createElement(Icons_1.Icon, { name: isIntermedian ? "remove" : 'check', size: 20, iconColor: theme.checkColor, noPadding: true })))))),
             label && (react_1.default.createElement(Input_1.InputLabelElement, { size: size, labelPosition: labelPosition }, label)))));
 };
 exports.Checkbox = Checkbox;

package/dist/cjs/components/Input/Input.styles.js

@@ -92,7 +92,7 @@ exports.IconsWrapper = styled_components_1.default.div `
 `;
 exports.Prefix = styled_components_1.default.div `
   position: absolute;
-  dispaly: flex;
+  display: flex;
   left: 0px;
   top: 1px;
   width: 24px;

package/dist/cjs/components/List/List.js

@@ -0,0 +1,104 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.List = void 0;
+const Aligment_1 = require("../Aligment");
+const react_1 = __importDefault(require("react"));
+const list_styles_1 = require("./list.styles");
+const Checkbox_1 = require("../Checkbox");
+const Icons_1 = require("../Icons");
+const List = ({ isCheckbox, isCollapsable, items, handleChange, }) => {
+    const updateItem = (items, rowID, updater) => {
+        items.forEach((_item) => {
+            if (_item.id === rowID) {
+                updater(_item);
+            }
+            else if (_item.children.length > 0) {
+                updateItem(_item.children, rowID, updater);
+            }
+        });
+        return items;
+    };
+    const showRow = (rowID) => {
+        const newListOption = [...items];
+        updateItem(items, rowID, (item) => {
+            item.extend = !item.extend;
+        });
+        handleChange(newListOption);
+    };
+    const getValue = (item) => {
+        return item.selected ? item.selected : false;
+    };
+    const getIntermedian = (item) => {
+        if (item.children.length === 0) {
+            return false;
+        }
+        else {
+            return (item.children.some((_item) => _item.selected) &&
+                !item.children.every((_item) => _item.selected));
+        }
+    };
+    const changeSelectedItem = (item, newValue) => {
+        item.selected = newValue;
+        if (item.children.length > 0) {
+            item.children.forEach((_child) => {
+                changeSelectedItem(_child, newValue);
+            });
+        }
+        return item;
+    };
+    const searchParent = (items, itemID, parentItem) => {
+        for (const _item of items) {
+            if (_item.id === itemID) {
+                return parentItem;
+            }
+            if (_item.children.length > 0) {
+                const found = searchParent(_item.children, itemID, _item);
+                if (found)
+                    return found;
+            }
+        }
+        return undefined;
+    };
+    const checkParent = (items, itemID) => {
+        const parent = searchParent(items, itemID);
+        if (parent) {
+            parent.selected = parent?.children.every((_item) => _item.selected);
+            checkParent(items, parent.id);
+        }
+        return items;
+    };
+    const handleClick = (item) => {
+        const newListOption = [...items];
+        const isIntermedian = getIntermedian(item);
+        const isSeleted = getValue(item);
+        if (isSeleted || isIntermedian) {
+            changeSelectedItem(item, false);
+        }
+        else {
+            changeSelectedItem(item, true);
+        }
+        updateItem(newListOption, item.id, (item) => Object.assign(item, item));
+        checkParent(newListOption, item.id);
+        handleChange(newListOption);
+    };
+    const gerenrateRow = (row, level) => {
+        return (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(list_styles_1.ListRow, { key: row.id, level: level },
+                isCollapsable && (react_1.default.createElement(list_styles_1.ListIconWrapper, { extend: row.extend || false }, row.children.length !== 0 && (react_1.default.createElement(Icons_1.Icon, { name: "arrow_drop_down", size: 20, noPadding: true, onClick: () => showRow(row.id), iconBgHoverColor: "transparent" })))),
+                isCheckbox && (react_1.default.createElement(Checkbox_1.Checkbox, { handleClick: () => handleClick(row), value: getValue(row), isIntermedian: getIntermedian(row), size: "small" })),
+                react_1.default.createElement(list_styles_1.ListText, null, row.value)),
+            row.extend &&
+                row.children.length > 0 &&
+                row.children.map((_chiledRow) => {
+                    return gerenrateRow(_chiledRow, level + 1);
+                })));
+    };
+    let level = 1;
+    return (react_1.default.createElement(Aligment_1.Aligment, { direction: "column", width: "100%", align: "flex-start" }, items.map((_row) => {
+        return gerenrateRow(_row, level);
+    })));
+};
+exports.List = List;

package/dist/cjs/components/List/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./List"), exports);

package/dist/cjs/components/List/list.styles.js

@@ -0,0 +1,31 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ListIconWrapper = exports.ListText = exports.ListRow = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+exports.ListRow = styled_components_1.default.div `
+  display: flex;
+  padding: 8px;
+  padding-left: ${(p) => p.level * 2 * 8}px;
+  font-size: 16px;
+  width: 100%;
+  box-sizing: border-box;
+  gap: 8px;
+  align-content: center;
+  align-items: center;
+`;
+exports.ListText = styled_components_1.default.div `
+  font-size: 16px;
+`;
+exports.ListIconWrapper = styled_components_1.default.div `
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-content: center;
+  align-items: center;
+  justify-content: center;
+  transition: 300ms;
+  transform: rotate(${(p) => (p.extend ? '0deg' : '-90deg')});
+`;

package/dist/cjs/components/Selector/Selector.js

@@ -34,7 +34,7 @@ const Modal_1 = require("../Modal");
 const common_1 = require("../common");
 const styled_components_1 = require("styled-components");
 const Typography_1 = require("../Typography");
-const Selector = ({ theme = Theme_1.mainTheme, label, labelPosition = 'top', size = 'medium', width, options, value, name, error, handleSelect, handleClear, iconName = 'add_circle', optionsPanelTitle = 'Please select', optionsPanelEmptyMsg = 'There are no options to choose from', }) => {
+const Selector = ({ theme = Theme_1.mainTheme, label, labelPosition = 'top', size = 'medium', width, options, value, name, error, handleSelect, handleClear, iconName = 'add_circle', optionsPanelTitle = 'Please select', optionsPanelEmptyMsg = 'There are no options to choose from', disabled = false, }) => {
     const [open, toogleOpen] = (0, react_1.useState)(false);
     const selectOption = (selectedValue) => {
         handleSelect(name, selectedValue);
@@ -43,13 +43,18 @@ const Selector = ({ theme = Theme_1.mainTheme, label, labelPosition = 'top', siz
     const getLabelForValue = (value) => {
         return options.find((option) => option.value === value).label;
     };
+    const handleOpen = () => {
+        if (!disabled) {
+            toogleOpen(true);
+        }
+    };
     return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: theme },
-        react_1.default.createElement(Aligment_1.Aligment, { align: labelPosition === 'top' ? 'flex-start' : 'center', justify: labelPosition === 'top' ? 'center' : 'flex-start', direction: labelPosition === 'top' ? 'column' : 'row', wrap: 'nowrap', width: width },
+        react_1.default.createElement(Aligment_1.Aligment, { align: labelPosition === 'top' ? 'flex-start' : 'center', justify: labelPosition === 'top' ? 'center' : 'flex-start', direction: labelPosition === 'top' ? 'column' : 'row', wrap: 'nowrap', width: width, gap: 4 },
             label && (react_1.default.createElement(Input_1.InputLabelElement, { size: size, labelPosition: labelPosition }, label)),
             react_1.default.createElement(Selector_styles_1.SelectorElement, null,
                 value ? (react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement(Selector_styles_1.SelectorValue, { onClick: () => toogleOpen(true), size: size }, getLabelForValue(value)),
-                    react_1.default.createElement(Icons_1.Icon, { name: 'close', onClick: () => handleClear(), size: (0, common_1.setIconSize)(size) }))) : (react_1.default.createElement(Icons_1.Icon, { name: iconName, onClick: () => toogleOpen(true), size: (0, common_1.setIconSize)(size) })),
+                    react_1.default.createElement(Selector_styles_1.SelectorValue, { onClick: handleOpen, size: size, isDisabled: disabled }, getLabelForValue(value)),
+                    react_1.default.createElement(Icons_1.Icon, { name: 'close', onClick: () => handleClear(), size: (0, common_1.setIconSize)(size), isDisabled: disabled }))) : (react_1.default.createElement(Icons_1.Icon, { name: iconName, onClick: handleOpen, size: (0, common_1.setIconSize)(size), isDisabled: disabled })),
                 open && (react_1.default.createElement(Modal_1.Modal, { title: optionsPanelTitle, labelClose: "Close", handleClose: () => toogleOpen(false), isOpen: open, exitOnEsc: true }, options?.length > 0 ? (options.map((option) => (react_1.default.createElement(common_1.PanelOption, { key: option.value, active: option.value === value, onClick: () => selectOption(option.value) }, option.label)))) : (react_1.default.createElement(Typography_1.Text, null, optionsPanelEmptyMsg)))),
                 error && react_1.default.createElement(Input_1.InputErrorMsg, null, error)))));
 };

package/dist/cjs/components/Selector/Selector.styles.js

@@ -9,19 +9,27 @@ const common_1 = require("../common");
 exports.SelectorElement = styled_components_1.default.div `
   position: relative;
   cursor: pointer;
-  display:flex;
-  box-sizing:border-box;
+  display: flex;
+  box-sizing: border-box;
   align-items: center;
 `;
 exports.SelectorValue = styled_components_1.default.div `
   ${common_1.defaultStyles}
   cursor: pointer;
-  display:flex;
+  display: flex;
   align-items: center;
   ${(p) => (0, common_1.setSize)(p.size)}
-  color:${p => p.theme.optionActiveColor};
-  &:hover{
-    background-color: ${p => p.theme.optionHoverBackground};
+  color:${(p) => p.theme.optionActiveColor};
+  &:hover {
+    background-color: ${(p) => p.theme.optionHoverBackground};
   }
-      
+  ${(p) => p.isDisabled &&
+    `
+      cursor:not-allowed;
+      background-color: ${p.theme.inputDisabledBackground};
+      color: ${p.theme.inputDisabledTextColor};
+      &:hover{
+        background-color: ${p.theme.inputDisabledBackground};
+      }
+    `}
 `;

package/dist/cjs/index.js

@@ -31,6 +31,7 @@ __exportStar(require("./components/FillSelect"), exports);
 __exportStar(require("./components/Filters"), exports);
 __exportStar(require("./components/Icons"), exports);
 __exportStar(require("./components/Input"), exports);
+__exportStar(require("./components/List"), exports);
 __exportStar(require("./components/Loader"), exports);
 __exportStar(require("./components/Modal"), exports);
 __exportStar(require("./components/Section"), exports);

package/dist/esm/components/Checkbox/Checkbox.js

@@ -5,12 +5,12 @@ import { Aligment } from '../Aligment';
 import { InputLabelElement, InputWrapper } from '../Input';
 import { CheckboxElement, CheckoxIcon, ToogleCheckboxWrapper, } from './Checkbox.styles';
 import { Icon } from '../Icons';
-export const Checkbox = ({ theme = mainTheme, label, labelPosition = 'top', value = false, readOnly = false, name, size = 'medium', width = 'auto', handleClick, }) => {
+export const Checkbox = ({ theme = mainTheme, label, labelPosition = 'top', value = false, readOnly = false, name, size = 'medium', width = 'auto', isIntermedian = false, handleClick, }) => {
     return (React.createElement(ThemeProvider, { theme: theme },
         React.createElement(Aligment, { align: labelPosition === 'top' ? 'flex-start' : 'center', justify: labelPosition === 'top' ? 'center' : 'flex-start', direction: labelPosition === 'top' ? 'column-reverse' : 'row', wrap: 'nowrap', width: width },
             React.createElement(InputWrapper, { width: width },
                 React.createElement(ToogleCheckboxWrapper, { size: size },
-                    React.createElement(CheckboxElement, { size: size, active: value, onClick: () => handleClick(!value) }, value && (React.createElement(CheckoxIcon, null,
-                        React.createElement(Icon, { name: 'check', size: 20, iconColor: theme.checkColor, noPadding: true })))))),
+                    React.createElement(CheckboxElement, { size: size, active: value || isIntermedian, onClick: () => handleClick(!value) }, (value || isIntermedian) && (React.createElement(CheckoxIcon, null,
+                        React.createElement(Icon, { name: isIntermedian ? "remove" : 'check', size: 20, iconColor: theme.checkColor, noPadding: true })))))),
             label && (React.createElement(InputLabelElement, { size: size, labelPosition: labelPosition }, label)))));
 };

package/dist/esm/components/Input/Input.styles.js

@@ -86,7 +86,7 @@ export const IconsWrapper = styled.div `
 `;
 export const Prefix = styled.div `
   position: absolute;
-  dispaly: flex;
+  display: flex;
   left: 0px;
   top: 1px;
   width: 24px;

package/dist/esm/components/List/List.js

@@ -0,0 +1,97 @@
+import { Aligment } from '../Aligment';
+import React from 'react';
+import { ListIconWrapper, ListRow, ListText } from './list.styles';
+import { Checkbox } from '../Checkbox';
+import { Icon } from '../Icons';
+export const List = ({ isCheckbox, isCollapsable, items, handleChange, }) => {
+    const updateItem = (items, rowID, updater) => {
+        items.forEach((_item) => {
+            if (_item.id === rowID) {
+                updater(_item);
+            }
+            else if (_item.children.length > 0) {
+                updateItem(_item.children, rowID, updater);
+            }
+        });
+        return items;
+    };
+    const showRow = (rowID) => {
+        const newListOption = [...items];
+        updateItem(items, rowID, (item) => {
+            item.extend = !item.extend;
+        });
+        handleChange(newListOption);
+    };
+    const getValue = (item) => {
+        return item.selected ? item.selected : false;
+    };
+    const getIntermedian = (item) => {
+        if (item.children.length === 0) {
+            return false;
+        }
+        else {
+            return (item.children.some((_item) => _item.selected) &&
+                !item.children.every((_item) => _item.selected));
+        }
+    };
+    const changeSelectedItem = (item, newValue) => {
+        item.selected = newValue;
+        if (item.children.length > 0) {
+            item.children.forEach((_child) => {
+                changeSelectedItem(_child, newValue);
+            });
+        }
+        return item;
+    };
+    const searchParent = (items, itemID, parentItem) => {
+        for (const _item of items) {
+            if (_item.id === itemID) {
+                return parentItem;
+            }
+            if (_item.children.length > 0) {
+                const found = searchParent(_item.children, itemID, _item);
+                if (found)
+                    return found;
+            }
+        }
+        return undefined;
+    };
+    const checkParent = (items, itemID) => {
+        const parent = searchParent(items, itemID);
+        if (parent) {
+            parent.selected = parent?.children.every((_item) => _item.selected);
+            checkParent(items, parent.id);
+        }
+        return items;
+    };
+    const handleClick = (item) => {
+        const newListOption = [...items];
+        const isIntermedian = getIntermedian(item);
+        const isSeleted = getValue(item);
+        if (isSeleted || isIntermedian) {
+            changeSelectedItem(item, false);
+        }
+        else {
+            changeSelectedItem(item, true);
+        }
+        updateItem(newListOption, item.id, (item) => Object.assign(item, item));
+        checkParent(newListOption, item.id);
+        handleChange(newListOption);
+    };
+    const gerenrateRow = (row, level) => {
+        return (React.createElement(React.Fragment, null,
+            React.createElement(ListRow, { key: row.id, level: level },
+                isCollapsable && (React.createElement(ListIconWrapper, { extend: row.extend || false }, row.children.length !== 0 && (React.createElement(Icon, { name: "arrow_drop_down", size: 20, noPadding: true, onClick: () => showRow(row.id), iconBgHoverColor: "transparent" })))),
+                isCheckbox && (React.createElement(Checkbox, { handleClick: () => handleClick(row), value: getValue(row), isIntermedian: getIntermedian(row), size: "small" })),
+                React.createElement(ListText, null, row.value)),
+            row.extend &&
+                row.children.length > 0 &&
+                row.children.map((_chiledRow) => {
+                    return gerenrateRow(_chiledRow, level + 1);
+                })));
+    };
+    let level = 1;
+    return (React.createElement(Aligment, { direction: "column", width: "100%", align: "flex-start" }, items.map((_row) => {
+        return gerenrateRow(_row, level);
+    })));
+};

package/dist/esm/components/List/index.js

@@ -0,0 +1 @@
+export * from './List';

package/dist/esm/components/List/list.styles.js

@@ -0,0 +1,25 @@
+import styled from 'styled-components';
+export const ListRow = styled.div `
+  display: flex;
+  padding: 8px;
+  padding-left: ${(p) => p.level * 2 * 8}px;
+  font-size: 16px;
+  width: 100%;
+  box-sizing: border-box;
+  gap: 8px;
+  align-content: center;
+  align-items: center;
+`;
+export const ListText = styled.div `
+  font-size: 16px;
+`;
+export const ListIconWrapper = styled.div `
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-content: center;
+  align-items: center;
+  justify-content: center;
+  transition: 300ms;
+  transform: rotate(${(p) => (p.extend ? '0deg' : '-90deg')});
+`;

package/dist/esm/components/Selector/Selector.js

@@ -8,7 +8,7 @@ import { Modal } from '../Modal';
 import { PanelOption, setIconSize } from '../common';
 import { ThemeProvider } from 'styled-components';
 import { Text } from '../Typography';
-export const Selector = ({ theme = mainTheme, label, labelPosition = 'top', size = 'medium', width, options, value, name, error, handleSelect, handleClear, iconName = 'add_circle', optionsPanelTitle = 'Please select', optionsPanelEmptyMsg = 'There are no options to choose from', }) => {
+export const Selector = ({ theme = mainTheme, label, labelPosition = 'top', size = 'medium', width, options, value, name, error, handleSelect, handleClear, iconName = 'add_circle', optionsPanelTitle = 'Please select', optionsPanelEmptyMsg = 'There are no options to choose from', disabled = false, }) => {
     const [open, toogleOpen] = useState(false);
     const selectOption = (selectedValue) => {
         handleSelect(name, selectedValue);
@@ -17,13 +17,18 @@ export const Selector = ({ theme = mainTheme, label, labelPosition = 'top', size
     const getLabelForValue = (value) => {
         return options.find((option) => option.value === value).label;
     };
+    const handleOpen = () => {
+        if (!disabled) {
+            toogleOpen(true);
+        }
+    };
     return (React.createElement(ThemeProvider, { theme: theme },
-        React.createElement(Aligment, { align: labelPosition === 'top' ? 'flex-start' : 'center', justify: labelPosition === 'top' ? 'center' : 'flex-start', direction: labelPosition === 'top' ? 'column' : 'row', wrap: 'nowrap', width: width },
+        React.createElement(Aligment, { align: labelPosition === 'top' ? 'flex-start' : 'center', justify: labelPosition === 'top' ? 'center' : 'flex-start', direction: labelPosition === 'top' ? 'column' : 'row', wrap: 'nowrap', width: width, gap: 4 },
             label && (React.createElement(InputLabelElement, { size: size, labelPosition: labelPosition }, label)),
             React.createElement(SelectorElement, null,
                 value ? (React.createElement(React.Fragment, null,
-                    React.createElement(SelectorValue, { onClick: () => toogleOpen(true), size: size }, getLabelForValue(value)),
-                    React.createElement(Icon, { name: 'close', onClick: () => handleClear(), size: setIconSize(size) }))) : (React.createElement(Icon, { name: iconName, onClick: () => toogleOpen(true), size: setIconSize(size) })),
+                    React.createElement(SelectorValue, { onClick: handleOpen, size: size, isDisabled: disabled }, getLabelForValue(value)),
+                    React.createElement(Icon, { name: 'close', onClick: () => handleClear(), size: setIconSize(size), isDisabled: disabled }))) : (React.createElement(Icon, { name: iconName, onClick: handleOpen, size: setIconSize(size), isDisabled: disabled })),
                 open && (React.createElement(Modal, { title: optionsPanelTitle, labelClose: "Close", handleClose: () => toogleOpen(false), isOpen: open, exitOnEsc: true }, options?.length > 0 ? (options.map((option) => (React.createElement(PanelOption, { key: option.value, active: option.value === value, onClick: () => selectOption(option.value) }, option.label)))) : (React.createElement(Text, null, optionsPanelEmptyMsg)))),
                 error && React.createElement(InputErrorMsg, null, error)))));
 };

package/dist/esm/components/Selector/Selector.styles.js

@@ -1,21 +1,29 @@
-import styled from "styled-components";
-import { defaultStyles, setSize } from "../common";
+import styled from 'styled-components';
+import { defaultStyles, setSize } from '../common';
 export const SelectorElement = styled.div `
   position: relative;
   cursor: pointer;
-  display:flex;
-  box-sizing:border-box;
+  display: flex;
+  box-sizing: border-box;
   align-items: center;
 `;
 export const SelectorValue = styled.div `
   ${defaultStyles}
   cursor: pointer;
-  display:flex;
+  display: flex;
   align-items: center;
   ${(p) => setSize(p.size)}
-  color:${p => p.theme.optionActiveColor};
-  &:hover{
-    background-color: ${p => p.theme.optionHoverBackground};
+  color:${(p) => p.theme.optionActiveColor};
+  &:hover {
+    background-color: ${(p) => p.theme.optionHoverBackground};
   }
-      
+  ${(p) => p.isDisabled &&
+    `
+      cursor:not-allowed;
+      background-color: ${p.theme.inputDisabledBackground};
+      color: ${p.theme.inputDisabledTextColor};
+      &:hover{
+        background-color: ${p.theme.inputDisabledBackground};
+      }
+    `}
 `;

package/dist/esm/index.js

@@ -14,7 +14,8 @@ export * from './components/File';
 export * from './components/FillSelect';
 export * from './components/Filters';
 export * from './components/Icons';
-export * from "./components/Input";
+export * from './components/Input';
+export * from './components/List';
 export * from './components/Loader';
 export * from './components/Modal';
 export * from './components/Section';

package/dist/types/components/Checkbox/Checkbox.d.ts

@@ -5,6 +5,7 @@ interface ICheckbox {
     handleClick: (value: boolean) => void;
     label?: string;
     labelPosition?: LabelPosition;
+    isIntermedian?: boolean;
     size?: InputSize;
     value: boolean;
     readOnly?: boolean;

package/dist/types/components/List/List.d.ts

@@ -0,0 +1,16 @@
+import { FC } from 'react';
+export interface IListProps {
+    items: IListItem[];
+    isCheckbox?: boolean;
+    isCollapsable?: boolean;
+    theme?: any;
+    handleChange: (items: IListItem[]) => void;
+}
+export interface IListItem {
+    id: string;
+    value: string | number;
+    children: IListItem[];
+    selected?: boolean;
+    extend?: boolean;
+}
+export declare const List: FC<IListProps>;

package/dist/types/components/List/index.d.ts

@@ -0,0 +1 @@
+export * from './List';

package/dist/types/components/List/list.styles.d.ts

@@ -0,0 +1,10 @@
+interface IListRow {
+    level: number;
+}
+export declare const ListRow: import("styled-components").StyledComponent<"div", any, IListRow, never>;
+export declare const ListText: import("styled-components").StyledComponent<"div", any, {}, never>;
+interface IListIconWrapperProps {
+    extend: boolean;
+}
+export declare const ListIconWrapper: import("styled-components").StyledComponent<"div", any, IListIconWrapperProps, never>;
+export {};

package/dist/types/components/Selector/Selector.d.ts

@@ -15,5 +15,6 @@ export interface ISelectorProps {
     iconName?: string;
     optionsPanelTitle?: string;
     optionsPanelEmptyMsg?: string;
+    disabled?: boolean;
 }
 export declare const Selector: FC<ISelectorProps>;

package/dist/types/components/Selector/Selector.styles.d.ts

@@ -1,8 +1,9 @@
-import { InputSize } from "../../types";
+import { InputSize } from '../../types';
 export declare const SelectorElement: import("styled-components").StyledComponent<"div", any, {}, never>;
 interface ISelectorValueStyle {
     size: InputSize;
     theme: any;
+    isDisabled?: boolean;
 }
 export declare const SelectorValue: import("styled-components").StyledComponent<"div", any, ISelectorValueStyle, never>;
 export {};

package/dist/types/index.d.ts

@@ -14,7 +14,8 @@ export * from './components/File';
 export * from './components/FillSelect';
 export * from './components/Filters';
 export * from './components/Icons';
-export * from "./components/Input";
+export * from './components/Input';
+export * from './components/List';
 export * from './components/Loader';
 export * from './components/Modal';
 export * from './components/Section';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "venice-ui",
-  "version": "2.1.22",
+  "version": "2.2.0",
   "description": "Component library",
   "main": "index.js",
   "module": "./dist/esm/index.js",