venice-ui 2.2.8 → 2.2.10

package/dist/cjs/components/Dropdown/Dropdown.js

@@ -62,10 +62,12 @@ const Dropdown = ({ size = 'medium', label, labelPosition = 'top', disabled = fa
             toogleOpen(!open);
         }
     };
-    const selectOption = (e, selectedValue) => {
+    const selectOption = (e, selectedValue, isDisabled) => {
         e.stopPropagation();
-        handleSelect(name, selectedValue);
-        toogleOpen(false);
+        if (!isDisabled) {
+            handleSelect(name, selectedValue);
+            toogleOpen(false);
+        }
     };
     (0, react_1.useEffect)(() => {
         const handleClickOutside = (event) => {
@@ -95,7 +97,7 @@ const Dropdown = ({ size = 'medium', label, labelPosition = 'top', disabled = fa
                 react_1.default.createElement(Icons_1.Icon, { name: open ? 'arrow_drop_up' : 'arrow_drop_down', size: 24, iconColor: theme.inputDefaultTextColor, iconHoverColor: theme.inputDefaultTextColor, iconBgHoverColor: "transparent" })),
             open &&
                 (0, react_dom_1.createPortal)(react_1.default.createElement(common_1.Panel, { style: dropdownStyles, ref: ref, size: size, fullWidth: true, zIndex: zIndex }, options &&
-                    options.map((option) => (react_1.default.createElement(common_1.PanelOption, { key: option.value, active: option.value === value, onClick: (e) => selectOption(e, option.value) }, option.label)))), document.body),
+                    options.map((option) => (react_1.default.createElement(common_1.PanelOption, { key: option.value, active: option.value === value, onClick: (e) => selectOption(e, option.value, option.disabled), isDisabled: option.disabled || false }, option.label)))), document.body),
             error && errorMsg && react_1.default.createElement(Input_1.InputErrorMsg, null, errorMsg)))));
 };
 exports.Dropdown = Dropdown;

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

@@ -13,7 +13,7 @@ const Icons_1 = require("../Icons");
 const Theme_1 = require("../../Theme");
 const Table_styles_1 = require("../Table/Table.styles");
 const DropdownMenu_1 = require("../DropdownMenu");
-const List = ({ isCheckbox = false, isCollapsable = false, isSelectable = false, haveMoreOptions = false, items, handleChange, handleSelect, selected, theme = Theme_1.mainTheme, moreActions = [], }) => {
+const List = ({ isCheckbox = false, isCollapsable = false, isSelectable = false, haveMoreOptions = false, items, handleChange, handleSelect, selected, theme = Theme_1.mainTheme, levelActions = [], }) => {
     const updateItem = (items, rowID, updater) => {
         items.forEach((_item) => {
             if (_item.id === rowID) {
@@ -106,9 +106,9 @@ const List = ({ isCheckbox = false, isCollapsable = false, isSelectable = false,
                 isCheckbox && (react_1.default.createElement("div", { onClick: (e) => e.stopPropagation() },
                     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, { selected: isSelectable && selected ? selected === row.id : false }, row.value),
-                haveMoreOptions && (react_1.default.createElement(list_styles_1.MoreWrapper, null,
+                haveMoreOptions && levelActions[level]?.moreActions && (react_1.default.createElement(list_styles_1.MoreWrapper, null,
                     react_1.default.createElement(Table_styles_1.OptionTableCellWrapper, { onClick: (e) => e.stopPropagation() },
-                        react_1.default.createElement(DropdownMenu_1.DropdownMenu, { options: moreActions, targetID: row.id, iconName: "more_vert", iconColor: theme.tableMoreIconColor, iconHoverColor: theme.tableHoverMoreIconColor, iconBgHoverColor: "transparent", position: "right" }))))),
+                        react_1.default.createElement(DropdownMenu_1.DropdownMenu, { options: levelActions[level]?.moreActions || [], targetID: row.id, iconName: "more_vert", iconColor: theme.tableMoreIconColor, iconHoverColor: theme.tableHoverMoreIconColor, iconBgHoverColor: "transparent", position: "right" }))))),
             row.extend && row.children.length > 0 && (react_1.default.createElement(list_styles_1.ListRowExtend, null, row.children.map((_chiledRow) => {
                 return gerenrateRow(_chiledRow, level + 1);
             })))));

package/dist/cjs/components/common/commonComponents.js

@@ -26,7 +26,7 @@ exports.Panel = styled_components_1.default.div `
   height: ${(p) => (p.height ? p.height : 'auto')};
   width: ${(p) => (p.fullWidth ? '100%' : 'auto')};
   position: absolute;
-  z-index: ${p => p.zIndex ? p.zIndex : Theme_1.Theme.zIndex.dropdown};
+  z-index: ${(p) => (p.zIndex ? p.zIndex : Theme_1.Theme.zIndex.dropdown)};
   top: ${(p) => (0, inputStyles_1.setPanelTop)(p.size)};
   border: 1px solid ${Theme_1.Theme.colors.gray_2};
   border-top: none;
@@ -34,12 +34,16 @@ exports.Panel = styled_components_1.default.div `
 `;
 exports.PanelOption = styled_components_1.default.div `
   padding: ${Theme_1.Theme.padding.s} ${Theme_1.Theme.padding.m};
-  cursor: pointer;
+  cursor: ${(p) => (p.isDisabled ? 'not-allowed' : 'pointer')};
   white-space: nowrap;
-  font-size:16px;
-  color: ${(p) => (p.active ? Theme_1.Theme.colors.primary : Theme_1.Theme.colors.text)};
+  font-size: 16px;
+  color: ${(p) => p.active
+    ? Theme_1.Theme.colors.primary
+    : p.isDisabled
+        ? Theme_1.Theme.colors.gray_1
+        : Theme_1.Theme.colors.text};
   :hover {
-    background-color: ${(0, polished_1.lighten)(0.4, Theme_1.Theme.colors.primary)};
+    background-color: ${(p) => p.isDisabled ? Theme_1.Theme.colors.gray_4 : (0, polished_1.lighten)(0.4, Theme_1.Theme.colors.primary)};
   }
   ${(p) => p.width && `width:${p.width};`}
 `;

package/dist/esm/components/Dropdown/Dropdown.js

@@ -36,10 +36,12 @@ export const Dropdown = ({ size = 'medium', label, labelPosition = 'top', disabl
             toogleOpen(!open);
         }
     };
-    const selectOption = (e, selectedValue) => {
+    const selectOption = (e, selectedValue, isDisabled) => {
         e.stopPropagation();
-        handleSelect(name, selectedValue);
-        toogleOpen(false);
+        if (!isDisabled) {
+            handleSelect(name, selectedValue);
+            toogleOpen(false);
+        }
     };
     useEffect(() => {
         const handleClickOutside = (event) => {
@@ -69,6 +71,6 @@ export const Dropdown = ({ size = 'medium', label, labelPosition = 'top', disabl
                 React.createElement(Icon, { name: open ? 'arrow_drop_up' : 'arrow_drop_down', size: 24, iconColor: theme.inputDefaultTextColor, iconHoverColor: theme.inputDefaultTextColor, iconBgHoverColor: "transparent" })),
             open &&
                 createPortal(React.createElement(Panel, { style: dropdownStyles, ref: ref, size: size, fullWidth: true, zIndex: zIndex }, options &&
-                    options.map((option) => (React.createElement(PanelOption, { key: option.value, active: option.value === value, onClick: (e) => selectOption(e, option.value) }, option.label)))), document.body),
+                    options.map((option) => (React.createElement(PanelOption, { key: option.value, active: option.value === value, onClick: (e) => selectOption(e, option.value, option.disabled), isDisabled: option.disabled || false }, option.label)))), document.body),
             error && errorMsg && React.createElement(InputErrorMsg, null, errorMsg)))));
 };

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

@@ -7,7 +7,7 @@ import { Icon } from '../Icons';
 import { mainTheme } from '../../Theme';
 import { OptionTableCellWrapper } from '../Table/Table.styles';
 import { DropdownMenu } from '../DropdownMenu';
-export const List = ({ isCheckbox = false, isCollapsable = false, isSelectable = false, haveMoreOptions = false, items, handleChange, handleSelect, selected, theme = mainTheme, moreActions = [], }) => {
+export const List = ({ isCheckbox = false, isCollapsable = false, isSelectable = false, haveMoreOptions = false, items, handleChange, handleSelect, selected, theme = mainTheme, levelActions = [], }) => {
     const updateItem = (items, rowID, updater) => {
         items.forEach((_item) => {
             if (_item.id === rowID) {
@@ -100,9 +100,9 @@ export const List = ({ isCheckbox = false, isCollapsable = false, isSelectable =
                 isCheckbox && (React.createElement("div", { onClick: (e) => e.stopPropagation() },
                     React.createElement(Checkbox, { handleClick: () => handleClick(row), value: getValue(row), isIntermedian: getIntermedian(row), size: "small" }))),
                 React.createElement(ListText, { selected: isSelectable && selected ? selected === row.id : false }, row.value),
-                haveMoreOptions && (React.createElement(MoreWrapper, null,
+                haveMoreOptions && levelActions[level]?.moreActions && (React.createElement(MoreWrapper, null,
                     React.createElement(OptionTableCellWrapper, { onClick: (e) => e.stopPropagation() },
-                        React.createElement(DropdownMenu, { options: moreActions, targetID: row.id, iconName: "more_vert", iconColor: theme.tableMoreIconColor, iconHoverColor: theme.tableHoverMoreIconColor, iconBgHoverColor: "transparent", position: "right" }))))),
+                        React.createElement(DropdownMenu, { options: levelActions[level]?.moreActions || [], targetID: row.id, iconName: "more_vert", iconColor: theme.tableMoreIconColor, iconHoverColor: theme.tableHoverMoreIconColor, iconBgHoverColor: "transparent", position: "right" }))))),
             row.extend && row.children.length > 0 && (React.createElement(ListRowExtend, null, row.children.map((_chiledRow) => {
                 return gerenrateRow(_chiledRow, level + 1);
             })))));

package/dist/esm/components/common/commonComponents.js

@@ -20,7 +20,7 @@ export const Panel = styled.div `
   height: ${(p) => (p.height ? p.height : 'auto')};
   width: ${(p) => (p.fullWidth ? '100%' : 'auto')};
   position: absolute;
-  z-index: ${p => p.zIndex ? p.zIndex : Theme.zIndex.dropdown};
+  z-index: ${(p) => (p.zIndex ? p.zIndex : Theme.zIndex.dropdown)};
   top: ${(p) => setPanelTop(p.size)};
   border: 1px solid ${Theme.colors.gray_2};
   border-top: none;
@@ -28,12 +28,16 @@ export const Panel = styled.div `
 `;
 export const PanelOption = styled.div `
   padding: ${Theme.padding.s} ${Theme.padding.m};
-  cursor: pointer;
+  cursor: ${(p) => (p.isDisabled ? 'not-allowed' : 'pointer')};
   white-space: nowrap;
-  font-size:16px;
-  color: ${(p) => (p.active ? Theme.colors.primary : Theme.colors.text)};
+  font-size: 16px;
+  color: ${(p) => p.active
+    ? Theme.colors.primary
+    : p.isDisabled
+        ? Theme.colors.gray_1
+        : Theme.colors.text};
   :hover {
-    background-color: ${lighten(0.4, Theme.colors.primary)};
+    background-color: ${(p) => p.isDisabled ? Theme.colors.gray_4 : lighten(0.4, Theme.colors.primary)};
   }
   ${(p) => p.width && `width:${p.width};`}
 `;

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

@@ -1,5 +1,9 @@
 import { FC } from 'react';
 import { IAction } from 'types/';
+export interface ILevelAction {
+    level: number;
+    moreActions: IAction[];
+}
 export interface IListProps {
     items: IListItem[];
     handleChange: (items: IListItem[]) => void;
@@ -10,7 +14,7 @@ export interface IListProps {
     isSelectable?: boolean;
     haveMoreOptions?: boolean;
     theme?: any;
-    moreActions?: IAction[];
+    levelActions: ILevelAction[];
 }
 export interface IListItem {
     id: string;

package/dist/types/components/common/commonComponents.d.ts

@@ -12,6 +12,7 @@ interface IPanelOptionStyle {
     active: boolean;
     width?: string;
     onClick?: any;
+    isDisabled?: boolean;
 }
 export declare const PanelOption: import("styled-components").StyledComponent<"div", any, IPanelOptionStyle, never>;
 export {};

package/dist/types/types/commonTypes.d.ts

@@ -1,6 +1,7 @@
 export interface IOption {
     value: string | number;
     label: string | number;
+    disabled?: boolean;
 }
 export interface IAction {
     action: (id?: string) => void;

package/package.json

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