venice-ui 2.2.6 → 2.2.9

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

@@ -99,21 +99,19 @@ const List = ({ isCheckbox = false, isCollapsable = false, isSelectable = false,
     };
     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, selected: selected ? selected === row.id : false, action: isCheckbox || isSelectable },
+            react_1.default.createElement(list_styles_1.ListRow, { key: row.id, level: level, selected: isSelectable && selected ? selected === row.id : false, action: isCheckbox || isSelectable, isExtend: row.extend || false, onClick: (e) => handleRowClick(row, e) },
                 isCollapsable && (react_1.default.createElement(list_styles_1.ListIconWrapper, { extend: row.extend || false, onClick: (e) => {
                         e.stopPropagation();
                     } }, 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("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, { onClick: (e) => handleRowClick(row, e), action: isCheckbox || isSelectable }, row.value),
+                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,
                     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" }))))),
-            row.extend &&
-                row.children.length > 0 &&
-                row.children.map((_chiledRow) => {
-                    return gerenrateRow(_chiledRow, level + 1);
-                })));
+            row.extend && row.children.length > 0 && (react_1.default.createElement(list_styles_1.ListRowExtend, null, row.children.map((_chiledRow) => {
+                return gerenrateRow(_chiledRow, level + 1);
+            })))));
     };
     let level = 0;
     return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: theme },

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

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MoreWrapper = exports.ListIconWrapper = exports.ListText = exports.ListRow = void 0;
+exports.ListRowExtend = exports.MoreWrapper = exports.ListIconWrapper = exports.ListText = exports.ListRow = void 0;
 const styled_components_1 = __importDefault(require("styled-components"));
 exports.ListRow = styled_components_1.default.div `
   position: relative;
@@ -16,18 +16,21 @@ exports.ListRow = styled_components_1.default.div `
   gap: 8px;
   align-content: center;
   align-items: center;
-  background-color: ${(p) => p.selected
-    ? p.theme.tableCellActiveBackground
-    : p.theme.tableCellBackground};
+  ${(p) => p.selected &&
+    `
+    background-color: ${p.theme.tableCellActiveBackground};
+    `}
+
   :hover {
     background-color: ${(p) => p.theme.tableCellActiveBackground};
+    cursor: ${(p) => (p.action ? 'pointer' : 'default')};
   }
 `;
 exports.ListText = styled_components_1.default.div `
   font-size: 16px;
-  :hover {
-    cursor: ${(p) => (p.action ? 'pointer' : 'default')};
-  }
+  ${p => p.selected && `
+    color:${p.theme.action}
+    `}
 `;
 exports.ListIconWrapper = styled_components_1.default.div `
   width: 24px;
@@ -43,3 +46,8 @@ exports.MoreWrapper = styled_components_1.default.div `
   position: absolute;
   right: 0px;
 `;
+exports.ListRowExtend = styled_components_1.default.div `
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+`;

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

@@ -1,6 +1,6 @@
 import { Aligment } from '../Aligment';
 import React from 'react';
-import { ListIconWrapper, ListRow, ListText, MoreWrapper } from './list.styles';
+import { ListIconWrapper, ListRow, ListRowExtend, ListText, MoreWrapper, } from './list.styles';
 import { Checkbox } from '../Checkbox';
 import { ThemeProvider } from 'styled-components';
 import { Icon } from '../Icons';
@@ -93,21 +93,19 @@ export const List = ({ isCheckbox = false, isCollapsable = false, isSelectable =
     };
     const gerenrateRow = (row, level) => {
         return (React.createElement(React.Fragment, null,
-            React.createElement(ListRow, { key: row.id, level: level, selected: selected ? selected === row.id : false, action: isCheckbox || isSelectable },
+            React.createElement(ListRow, { key: row.id, level: level, selected: isSelectable && selected ? selected === row.id : false, action: isCheckbox || isSelectable, isExtend: row.extend || false, onClick: (e) => handleRowClick(row, e) },
                 isCollapsable && (React.createElement(ListIconWrapper, { extend: row.extend || false, onClick: (e) => {
                         e.stopPropagation();
                     } }, row.children.length !== 0 && (React.createElement(Icon, { name: "arrow_drop_down", size: 20, noPadding: true, onClick: () => showRow(row.id), iconBgHoverColor: "transparent" })))),
                 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, { onClick: (e) => handleRowClick(row, e), action: isCheckbox || isSelectable }, row.value),
+                React.createElement(ListText, { selected: isSelectable && selected ? selected === row.id : false }, row.value),
                 haveMoreOptions && (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" }))))),
-            row.extend &&
-                row.children.length > 0 &&
-                row.children.map((_chiledRow) => {
-                    return gerenrateRow(_chiledRow, level + 1);
-                })));
+            row.extend && row.children.length > 0 && (React.createElement(ListRowExtend, null, row.children.map((_chiledRow) => {
+                return gerenrateRow(_chiledRow, level + 1);
+            })))));
     };
     let level = 0;
     return (React.createElement(ThemeProvider, { theme: theme },

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

@@ -10,18 +10,21 @@ export const ListRow = styled.div `
   gap: 8px;
   align-content: center;
   align-items: center;
-  background-color: ${(p) => p.selected
-    ? p.theme.tableCellActiveBackground
-    : p.theme.tableCellBackground};
+  ${(p) => p.selected &&
+    `
+    background-color: ${p.theme.tableCellActiveBackground};
+    `}
+
   :hover {
     background-color: ${(p) => p.theme.tableCellActiveBackground};
+    cursor: ${(p) => (p.action ? 'pointer' : 'default')};
   }
 `;
 export const ListText = styled.div `
   font-size: 16px;
-  :hover {
-    cursor: ${(p) => (p.action ? 'pointer' : 'default')};
-  }
+  ${p => p.selected && `
+    color:${p.theme.action}
+    `}
 `;
 export const ListIconWrapper = styled.div `
   width: 24px;
@@ -37,3 +40,8 @@ export const MoreWrapper = styled.div `
   position: absolute;
   right: 0px;
 `;
+export const ListRowExtend = styled.div `
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+`;

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.styles.d.ts

@@ -2,11 +2,12 @@ interface IListRow {
     level: number;
     selected: boolean;
     action: boolean;
+    isExtend: boolean;
     theme: any;
 }
 export declare const ListRow: import("styled-components").StyledComponent<"div", any, IListRow, never>;
 interface IListRowPRops {
-    action: boolean;
+    selected: boolean;
 }
 export declare const ListText: import("styled-components").StyledComponent<"div", any, IListRowPRops, never>;
 interface IListIconWrapperProps {
@@ -14,4 +15,5 @@ interface IListIconWrapperProps {
 }
 export declare const ListIconWrapper: import("styled-components").StyledComponent<"div", any, IListIconWrapperProps, never>;
 export declare const MoreWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ListRowExtend: import("styled-components").StyledComponent<"div", any, {}, never>;
 export {};

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.6",
+  "version": "2.2.9",
   "description": "Component library",
   "main": "index.js",
   "module": "./dist/esm/index.js",