venice-ui 2.1.21 → 2.1.23

package/dist/cjs/components/Icons/Icon.styles.js

@@ -16,15 +16,19 @@ exports.IconElement = styled_components_1.default.div `
   margin-left: ${(p) => (p.right ? Theme_1.Theme.padding.m : '0')};
   margin-right: ${(p) => (p.left ? Theme_1.Theme.padding.m : '0')};
   padding: ${(p) => (p.noPadding ? '0' : '4px')};
-  cursor: ${(p) => p.isDisabled ? 'not-allowed' : 'normal'};
+  cursor: ${(p) => (p.isDisabled ? 'not-allowed' : 'normal')};
   background-color: ${(p) => (p.isActive ? p.iconBgHoverColor : p.iconBgColor)};
+  path {
+    transition: 300ms;
+    fill: ${(p) => (p.isDisabled ? Theme_1.Theme.colors.gray_2 : p.iconColor)};
+  }
   ${(p) => p.haveAction &&
     `
-    cursor:pointer;
+    cursor:${p.isDisabled ? 'not-allowed' : 'pointer'};
     :hover {
       background-color: ${!p.isDisabled && p.iconBgHoverColor};
       path {
-        fill: ${!p.isDisabled && p.iconHoverColor};
+        fill: ${p.isDisabled ? Theme_1.Theme.colors.gray_2 : p.iconHoverColor};
       }
     }
     

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/esm/components/Icons/Icon.styles.js

@@ -10,15 +10,19 @@ export const IconElement = styled.div `
   margin-left: ${(p) => (p.right ? Theme.padding.m : '0')};
   margin-right: ${(p) => (p.left ? Theme.padding.m : '0')};
   padding: ${(p) => (p.noPadding ? '0' : '4px')};
-  cursor: ${(p) => p.isDisabled ? 'not-allowed' : 'normal'};
+  cursor: ${(p) => (p.isDisabled ? 'not-allowed' : 'normal')};
   background-color: ${(p) => (p.isActive ? p.iconBgHoverColor : p.iconBgColor)};
+  path {
+    transition: 300ms;
+    fill: ${(p) => (p.isDisabled ? Theme.colors.gray_2 : p.iconColor)};
+  }
   ${(p) => p.haveAction &&
     `
-    cursor:pointer;
+    cursor:${p.isDisabled ? 'not-allowed' : 'pointer'};
     :hover {
       background-color: ${!p.isDisabled && p.iconBgHoverColor};
       path {
-        fill: ${!p.isDisabled && p.iconHoverColor};
+        fill: ${p.isDisabled ? Theme.colors.gray_2 : p.iconHoverColor};
       }
     }
     

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/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/package.json

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