venice-ui 1.0.40 → 1.0.42

package/dist/cjs/Theme/Theme.js

@@ -76,5 +76,8 @@ exports.mainTheme = {
     inputErrorBorder: exports.Theme.colors.red,
     inputErrorTextColor: exports.Theme.colors.red,
     // global
-    contentBackground: exports.Theme.colors.white
+    contentBackground: exports.Theme.colors.white,
+    // selector / dropdown
+    optionActiveColor: exports.Theme.colors.primary,
+    optionHoverBackground: (0, polished_1.lighten)(0.3, exports.Theme.colors.primary)
 };

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

@@ -24,14 +24,17 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Selector = void 0;
-const Aligment_1 = require("../Aligment");
 const react_1 = __importStar(require("react"));
+const Aligment_1 = require("../Aligment");
+const Theme_1 = require("../../Theme/Theme");
 const Input_1 = require("../Input");
 const Icons_1 = require("../Icons");
 const Selector_styles_1 = require("./Selector.styles");
 const Modal_1 = require("../Modal");
 const common_1 = require("../common");
-const Selector = ({ label, labelPosition = 'top', size = 'medium', width, options, value, name, error, handleSelect, handleClear, iconName = 'add_circle', }) => {
+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 [open, toogleOpen] = (0, react_1.useState)(false);
     const selectOption = (selectedValue) => {
         handleSelect(name, selectedValue);
@@ -40,14 +43,14 @@ const Selector = ({ label, labelPosition = 'top', size = 'medium', width, option
     const getLabelForValue = (value) => {
         return options.find((option) => option.value === value).label;
     };
-    return (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 },
-        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) })),
-            open && (react_1.default.createElement(Modal_1.Modal, { title: "Select", labelClose: "Close", handleClose: () => toogleOpen(false) }, options &&
-                options.map((option) => (react_1.default.createElement(common_1.PanelOption, { key: option.value, active: option.value === value, onClick: () => selectOption(option.value) }, option.label))))),
-            error && react_1.default.createElement(Input_1.InputErrorMsg, null, error))));
+    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 },
+            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) })),
+                open && (react_1.default.createElement(Modal_1.Modal, { title: optionsPanelTitle, labelClose: "Close", handleClose: () => toogleOpen(false) }, 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)))));
 };
 exports.Selector = Selector;

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

@@ -5,8 +5,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SelectorValue = exports.SelectorElement = void 0;
 const styled_components_1 = __importDefault(require("styled-components"));
-const Theme_1 = require("../../Theme");
-const polished_1 = require("polished");
 const common_1 = require("../common");
 exports.SelectorElement = styled_components_1.default.div `
   position: relative;
@@ -21,9 +19,9 @@ exports.SelectorValue = styled_components_1.default.div `
   display:flex;
   align-items: center;
   ${(p) => (0, common_1.setSize)(p.size)}
-  color:${Theme_1.Theme.colors.primary};
+  color:${p => p.theme.optionActiveColor};
   &:hover{
-    background-color: ${(0, polished_1.lighten)(0.3, Theme_1.Theme.colors.primary)};
+    background-color: ${p => p.theme.optionHoverBackground};
   }
       
 `;

package/dist/esm/Theme/Theme.js

@@ -73,5 +73,8 @@ export const mainTheme = {
     inputErrorBorder: Theme.colors.red,
     inputErrorTextColor: Theme.colors.red,
     // global
-    contentBackground: Theme.colors.white
+    contentBackground: Theme.colors.white,
+    // selector / dropdown
+    optionActiveColor: Theme.colors.primary,
+    optionHoverBackground: lighten(0.3, Theme.colors.primary)
 };

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

@@ -1,11 +1,14 @@
-import { Aligment } from '../Aligment';
 import React, { useState } from 'react';
+import { Aligment } from '../Aligment';
+import { mainTheme } from '../../Theme/Theme';
 import { InputErrorMsg, InputLabelElement } from '../Input';
 import { Icon } from '../Icons';
 import { SelectorElement, SelectorValue } from './Selector.styles';
 import { Modal } from '../Modal';
 import { PanelOption, setIconSize } from '../common';
-export const Selector = ({ label, labelPosition = 'top', size = 'medium', width, options, value, name, error, handleSelect, handleClear, iconName = 'add_circle', }) => {
+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', }) => {
     const [open, toogleOpen] = useState(false);
     const selectOption = (selectedValue) => {
         handleSelect(name, selectedValue);
@@ -14,13 +17,13 @@ export const Selector = ({ label, labelPosition = 'top', size = 'medium', width,
     const getLabelForValue = (value) => {
         return options.find((option) => option.value === value).label;
     };
-    return (React.createElement(Aligment, { align: labelPosition === 'top' ? 'flex-start' : 'center', justify: labelPosition === 'top' ? 'center' : 'flex-start', direction: labelPosition === 'top' ? 'column' : 'row', wrap: 'nowrap', width: width },
-        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) })),
-            open && (React.createElement(Modal, { title: "Select", labelClose: "Close", handleClose: () => toogleOpen(false) }, options &&
-                options.map((option) => (React.createElement(PanelOption, { key: option.value, active: option.value === value, onClick: () => selectOption(option.value) }, option.label))))),
-            error && React.createElement(InputErrorMsg, null, error))));
+    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 },
+            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) })),
+                open && (React.createElement(Modal, { title: optionsPanelTitle, labelClose: "Close", handleClose: () => toogleOpen(false) }, 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,6 +1,4 @@
 import styled from "styled-components";
-import { Theme } from "../../Theme";
-import { lighten } from "polished";
 import { defaultStyles, setSize } from "../common";
 export const SelectorElement = styled.div `
   position: relative;
@@ -15,9 +13,9 @@ export const SelectorValue = styled.div `
   display:flex;
   align-items: center;
   ${(p) => setSize(p.size)}
-  color:${Theme.colors.primary};
+  color:${p => p.theme.optionActiveColor};
   &:hover{
-    background-color: ${lighten(0.3, Theme.colors.primary)};
+    background-color: ${p => p.theme.optionHoverBackground};
   }
       
 `;

package/dist/types/Theme/Theme.d.ts

@@ -69,4 +69,6 @@ export declare const mainTheme: {
     inputErrorBorder: string;
     inputErrorTextColor: string;
     contentBackground: string;
+    optionActiveColor: string;
+    optionHoverBackground: string;
 };

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

@@ -1,6 +1,7 @@
 import { FC } from 'react';
 import { InputSize, IOption, LabelPosition } from '../../types';
 export interface ISelectorProps {
+    theme?: any;
     label?: string;
     labelPosition?: LabelPosition;
     size?: InputSize;
@@ -12,5 +13,7 @@ export interface ISelectorProps {
     handleSelect: (name: string, value: string | number) => void;
     handleClear: () => void;
     iconName?: string;
+    optionsPanelTitle?: string;
+    optionsPanelEmptyMsg?: string;
 }
 export declare const Selector: FC<ISelectorProps>;

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

@@ -2,6 +2,7 @@ import { InputSize } from "../../types";
 export declare const SelectorElement: import("styled-components").StyledComponent<"div", any, {}, never>;
 interface ISelectorValueStyle {
     size: InputSize;
+    theme: any;
 }
 export declare const SelectorValue: import("styled-components").StyledComponent<"div", any, ISelectorValueStyle, never>;
 export {};

package/package.json

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