venice-ui 2.1.11 → 2.1.12

package/dist/cjs/components/FillSelect/FillSelect.js

@@ -0,0 +1,127 @@
+"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FillSelect = void 0;
+const react_1 = __importStar(require("react"));
+const Aligment_1 = require("../Aligment");
+const FillSelect_styles_1 = require("./FillSelect.styles");
+const Input_1 = require("../Input");
+const common_1 = require("../common");
+const react_dom_1 = require("react-dom");
+const Icons_1 = require("../Icons");
+const Theme_1 = require("../../Theme");
+const Dropdown_1 = require("../Dropdown");
+const Dropdown_styles_1 = require("../Dropdown/Dropdown.styles");
+const FillSelect = ({ size = 'medium', label, labelPosition = 'top', disabled = false, error, errorMsg, width, options, value, placeholder = 'Please select', name, handleSelect, position = 'left', zIndex, readOnly = false, theme = Theme_1.mainTheme, }) => {
+    const [open, toogleOpen] = (0, react_1.useState)(false);
+    const [optionScope, setOptionScope] = (0, react_1.useState)(options);
+    const [inputValue, setInputValue] = (0, react_1.useState)('');
+    const ref = (0, react_1.useRef)(null);
+    const sourceRef = (0, react_1.useRef)(null);
+    const textRef = (0, react_1.useRef)(null);
+    const [dropdownStyles, setDropdownStyles] = (0, react_1.useState)({});
+    const getLabelForValue = (value) => {
+        return optionScope.find((option) => option.value === value).label;
+    };
+    const handleOpen = () => {
+        if (!disabled) {
+            if (sourceRef.current) {
+                const buttonRect = sourceRef.current.getBoundingClientRect();
+                const positionStyle = {
+                    top: buttonRect.bottom + window.scrollY,
+                    width: buttonRect.width,
+                };
+                if (position === 'left') {
+                    positionStyle.left = buttonRect.left + window.scrollX;
+                }
+                else if (position === 'right') {
+                    positionStyle.right =
+                        window.innerWidth -
+                            (buttonRect.left + buttonRect.width + window.scrollX);
+                }
+                setDropdownStyles(positionStyle);
+            }
+            toogleOpen(!open);
+        }
+    };
+    const selectOption = (e, selectedValue) => {
+        e.stopPropagation();
+        handleSelect(name, selectedValue);
+        toogleOpen(false);
+    };
+    const addToScope = () => {
+        if (inputValue !== '') {
+            const isExist = optionScope.find((_item) => _item.label === inputValue || _item.value === inputValue);
+            if (!isExist) {
+                const newOptionsScope = [
+                    { value: inputValue, label: inputValue },
+                    ...optionScope,
+                ];
+                setOptionScope(newOptionsScope);
+                handleSelect(name, inputValue);
+                setInputValue("");
+                toogleOpen(false);
+            }
+        }
+    };
+    const updateNewOption = (name, value) => {
+        setInputValue(value);
+    };
+    (0, react_1.useEffect)(() => {
+        const handleClickOutside = (event) => {
+            if (ref.current && !ref.current.contains(event.target)) {
+                toogleOpen(false);
+            }
+        };
+        const handleKeyDown = (e) => {
+            if (e.key === 'Escape') {
+                close();
+            }
+        };
+        if (open) {
+            document.addEventListener('click', handleClickOutside, true);
+            document.addEventListener('keydown', handleKeyDown);
+        }
+        return () => {
+            document.removeEventListener('click', handleClickOutside, true);
+            document.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [open]);
+    return (react_1.default.createElement(Aligment_1.Aligment, { align: labelPosition === 'top' ? 'flex-start' : 'center', direction: labelPosition === 'top' ? 'column' : 'row', wrap: 'nowrap', width: width },
+        label && (react_1.default.createElement(Input_1.InputLabelElement, { size: size, labelPosition: labelPosition }, label)),
+        readOnly ? (react_1.default.createElement(Input_1.InputReadOnlyElement, { inputSize: size }, value)) : (react_1.default.createElement(Dropdown_styles_1.DropdownElement, { onClick: () => handleOpen(), ref: sourceRef },
+            react_1.default.createElement(Dropdown_1.Field, { inputSize: size, disabled: disabled, width: width, active: open, error: error, rightPadding: true }, value ? getLabelForValue(value) : placeholder),
+            react_1.default.createElement(Input_1.EyeIconWrapper, { size: size },
+                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 },
+                    react_1.default.createElement(FillSelect_styles_1.InputArea, { ref: textRef, onClick: (e) => e.stopPropagation() },
+                        react_1.default.createElement(Input_1.Input, { value: inputValue, handleChange: updateNewOption, name: 'newOption' }),
+                        react_1.default.createElement(Icons_1.Icon, { name: 'add_circle', size: 24, onClick: addToScope })),
+                    optionScope &&
+                        optionScope.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),
+            error && errorMsg && react_1.default.createElement(Input_1.InputErrorMsg, null, errorMsg)))));
+};
+exports.FillSelect = FillSelect;

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

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InputArea = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+const Theme_1 = require("../../Theme");
+exports.InputArea = styled_components_1.default.div `
+   padding: ${Theme_1.Theme.padding.s} ${Theme_1.Theme.padding.m};
+   display:flex;
+   gap:0.5rem;
+`;

package/dist/cjs/components/FillSelect/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("./FillSelect"), exports);

package/dist/cjs/components/Form/Form.js

@@ -10,6 +10,7 @@ const File_1 = require("../File");
 const FormElements_1 = require("./FormElements");
 const Dropdown_1 = require("../Dropdown");
 const DatePicker_1 = require("../DatePicker");
+const FillSelect_1 = require("../FillSelect");
 const Form = ({ formData, size = 'medium', read }) => {
     const onChangeHandler = (name, value) => {
         formData.action(name, value);
@@ -50,6 +51,8 @@ const Form = ({ formData, size = 'medium', read }) => {
                 return (react_1.default.createElement(Input_1.Input, { type: "increase", label: item.label, value: item.value, name: item.name, size: size, handleChange: onIntChangeHandler, min: item.min, max: item.max, step: item.step, readOnly: read, autoFocus: item.autofocus, handleSubmit: item.submit, error: item.error, placeholder: item.placeholder }));
             case 'select':
                 return (react_1.default.createElement(Dropdown_1.Dropdown, { options: item.options, handleSelect: onChangeHandler, name: item.name, value: item.value, size: size, label: item.label, position: item.position, zIndex: item.zIndex, readOnly: read, error: item.error, placeholder: item.placeholder }));
+            case 'fill':
+                return (react_1.default.createElement(FillSelect_1.FillSelect, { options: item.options, handleSelect: onChangeHandler, name: item.name, value: item.value, size: size, label: item.label, position: item.position, zIndex: item.zIndex, readOnly: read, error: item.error, placeholder: item.placeholder }));
             case 'file':
                 return (react_1.default.createElement(File_1.File, { label: item.label, fileValue: item.value, name: item.name, size: size, handleChange: onFileHandler, readOnly: read, subLabel: item.subLabel, error: item.error }));
             case 'date':

package/dist/cjs/index.js

@@ -27,6 +27,7 @@ __exportStar(require("./components/ElementHeader"), exports);
 __exportStar(require("./components/DropdownMenu"), exports);
 __exportStar(require("./components/Form"), exports);
 __exportStar(require("./components/File"), exports);
+__exportStar(require("./components/FillSelect"), exports);
 __exportStar(require("./components/Filters"), exports);
 __exportStar(require("./components/Icons"), exports);
 __exportStar(require("./components/Input"), exports);

package/dist/esm/components/FillSelect/FillSelect.js

@@ -0,0 +1,100 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { Aligment } from '../Aligment';
+import { InputArea } from './FillSelect.styles';
+import { EyeIconWrapper, Input, InputErrorMsg, InputLabelElement, InputReadOnlyElement, } from '../Input';
+import { Panel, PanelOption } from '../common';
+import { createPortal } from 'react-dom';
+import { Icon } from '../Icons';
+import { mainTheme } from '../../Theme';
+import { Field } from '../Dropdown';
+import { DropdownElement } from '../Dropdown/Dropdown.styles';
+export const FillSelect = ({ size = 'medium', label, labelPosition = 'top', disabled = false, error, errorMsg, width, options, value, placeholder = 'Please select', name, handleSelect, position = 'left', zIndex, readOnly = false, theme = mainTheme, }) => {
+    const [open, toogleOpen] = useState(false);
+    const [optionScope, setOptionScope] = useState(options);
+    const [inputValue, setInputValue] = useState('');
+    const ref = useRef(null);
+    const sourceRef = useRef(null);
+    const textRef = useRef(null);
+    const [dropdownStyles, setDropdownStyles] = useState({});
+    const getLabelForValue = (value) => {
+        return optionScope.find((option) => option.value === value).label;
+    };
+    const handleOpen = () => {
+        if (!disabled) {
+            if (sourceRef.current) {
+                const buttonRect = sourceRef.current.getBoundingClientRect();
+                const positionStyle = {
+                    top: buttonRect.bottom + window.scrollY,
+                    width: buttonRect.width,
+                };
+                if (position === 'left') {
+                    positionStyle.left = buttonRect.left + window.scrollX;
+                }
+                else if (position === 'right') {
+                    positionStyle.right =
+                        window.innerWidth -
+                            (buttonRect.left + buttonRect.width + window.scrollX);
+                }
+                setDropdownStyles(positionStyle);
+            }
+            toogleOpen(!open);
+        }
+    };
+    const selectOption = (e, selectedValue) => {
+        e.stopPropagation();
+        handleSelect(name, selectedValue);
+        toogleOpen(false);
+    };
+    const addToScope = () => {
+        if (inputValue !== '') {
+            const isExist = optionScope.find((_item) => _item.label === inputValue || _item.value === inputValue);
+            if (!isExist) {
+                const newOptionsScope = [
+                    { value: inputValue, label: inputValue },
+                    ...optionScope,
+                ];
+                setOptionScope(newOptionsScope);
+                handleSelect(name, inputValue);
+                setInputValue("");
+                toogleOpen(false);
+            }
+        }
+    };
+    const updateNewOption = (name, value) => {
+        setInputValue(value);
+    };
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (ref.current && !ref.current.contains(event.target)) {
+                toogleOpen(false);
+            }
+        };
+        const handleKeyDown = (e) => {
+            if (e.key === 'Escape') {
+                close();
+            }
+        };
+        if (open) {
+            document.addEventListener('click', handleClickOutside, true);
+            document.addEventListener('keydown', handleKeyDown);
+        }
+        return () => {
+            document.removeEventListener('click', handleClickOutside, true);
+            document.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [open]);
+    return (React.createElement(Aligment, { align: labelPosition === 'top' ? 'flex-start' : 'center', direction: labelPosition === 'top' ? 'column' : 'row', wrap: 'nowrap', width: width },
+        label && (React.createElement(InputLabelElement, { size: size, labelPosition: labelPosition }, label)),
+        readOnly ? (React.createElement(InputReadOnlyElement, { inputSize: size }, value)) : (React.createElement(DropdownElement, { onClick: () => handleOpen(), ref: sourceRef },
+            React.createElement(Field, { inputSize: size, disabled: disabled, width: width, active: open, error: error, rightPadding: true }, value ? getLabelForValue(value) : placeholder),
+            React.createElement(EyeIconWrapper, { size: size },
+                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 },
+                    React.createElement(InputArea, { ref: textRef, onClick: (e) => e.stopPropagation() },
+                        React.createElement(Input, { value: inputValue, handleChange: updateNewOption, name: 'newOption' }),
+                        React.createElement(Icon, { name: 'add_circle', size: 24, onClick: addToScope })),
+                    optionScope &&
+                        optionScope.map((option) => (React.createElement(PanelOption, { key: option.value, active: option.value === value, onClick: (e) => selectOption(e, option.value) }, option.label)))), document.body),
+            error && errorMsg && React.createElement(InputErrorMsg, null, errorMsg)))));
+};

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

@@ -0,0 +1,7 @@
+import styled from "styled-components";
+import { Theme } from "../../Theme";
+export const InputArea = styled.div `
+   padding: ${Theme.padding.s} ${Theme.padding.m};
+   display:flex;
+   gap:0.5rem;
+`;

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

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

package/dist/esm/components/Form/Form.js

@@ -4,6 +4,7 @@ import { File } from '../File';
 import { FormRow, FormSubRow, FormWrapper } from './FormElements';
 import { Dropdown } from '../Dropdown';
 import { DatePicker } from '../DatePicker';
+import { FillSelect } from '../FillSelect';
 export const Form = ({ formData, size = 'medium', read }) => {
     const onChangeHandler = (name, value) => {
         formData.action(name, value);
@@ -44,6 +45,8 @@ export const Form = ({ formData, size = 'medium', read }) => {
                 return (React.createElement(Input, { type: "increase", label: item.label, value: item.value, name: item.name, size: size, handleChange: onIntChangeHandler, min: item.min, max: item.max, step: item.step, readOnly: read, autoFocus: item.autofocus, handleSubmit: item.submit, error: item.error, placeholder: item.placeholder }));
             case 'select':
                 return (React.createElement(Dropdown, { options: item.options, handleSelect: onChangeHandler, name: item.name, value: item.value, size: size, label: item.label, position: item.position, zIndex: item.zIndex, readOnly: read, error: item.error, placeholder: item.placeholder }));
+            case 'fill':
+                return (React.createElement(FillSelect, { options: item.options, handleSelect: onChangeHandler, name: item.name, value: item.value, size: size, label: item.label, position: item.position, zIndex: item.zIndex, readOnly: read, error: item.error, placeholder: item.placeholder }));
             case 'file':
                 return (React.createElement(File, { label: item.label, fileValue: item.value, name: item.name, size: size, handleChange: onFileHandler, readOnly: read, subLabel: item.subLabel, error: item.error }));
             case 'date':

package/dist/esm/index.js

@@ -11,6 +11,7 @@ export * from './components/ElementHeader';
 export * from './components/DropdownMenu';
 export * from './components/Form';
 export * from './components/File';
+export * from './components/FillSelect';
 export * from './components/Filters';
 export * from './components/Icons';
 export * from "./components/Input";

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

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+import { IFormElement, IOption } from '../../types';
+export interface IFillSelectProps extends IFormElement {
+    options: IOption[];
+    handleSelect: (name: string, value: string | number) => void;
+    position?: string;
+    zIndex?: number;
+    theme?: any;
+}
+export declare const FillSelect: FC<IFillSelectProps>;

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

@@ -0,0 +1 @@
+export declare const InputArea: import("styled-components").StyledComponent<"div", any, {}, never>;

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

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

package/dist/types/index.d.ts

@@ -11,6 +11,7 @@ export * from './components/ElementHeader';
 export * from './components/DropdownMenu';
 export * from './components/Form';
 export * from './components/File';
+export * from './components/FillSelect';
 export * from './components/Filters';
 export * from './components/Icons';
 export * from "./components/Input";

package/package.json

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