venice-ui 2.4.13 → 3.0.1

package/dist/cjs/components/DropdownMenu/DropdownMenu.js

@@ -15,34 +15,48 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : 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;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DropdownMenu = void 0;
-const common_1 = require("../common");
 const react_1 = __importStar(require("react"));
-const Theme_1 = require("../../Theme");
-const Icons_1 = require("../Icons");
+const config_1 = require("../../config");
 const DropdownMenu_styles_1 = require("./DropdownMenu.styles");
-const Aligment_1 = require("../Aligment");
-const Typography_1 = require("../Typography");
+const Dropdown_styles_1 = require("../Dropdown/Dropdown.styles");
+const Icon_1 = require("../Icon");
 const react_dom_1 = require("react-dom");
-const DropdownMenu = ({ size = 'medium', iconName = 'more_vert', header = false, headerTitle, headerSubtitle, footer = false, footerText, footerAction, options, right = false, left = false, targetID, iconColor = Theme_1.mainTheme.iconColor, iconHoverColor = Theme_1.mainTheme.iconHoverColor, iconBgColor = Theme_1.mainTheme.iconBgColor, iconBgHoverColor = Theme_1.mainTheme.iconBgHoverColor, position = 'left', zIndex, textMode = false, label = '', isTextActive = false, }) => {
+const ActionPanel_1 = require("../ActionPanel");
+const styled_components_1 = require("styled-components");
+const DropdownMenu = ({ size = 'md', iconName = 'more_vert', theme, themeVariant = 'default', header, footer, options, targetID, iconColor, iconHoverColor, iconBgColor, iconBgHoverColor, position = 'left', zIndex, textMode = false, label = '', }) => {
     const [open, toogleOpen] = (0, react_1.useState)(false);
-    const ref = (0, react_1.useRef)(null);
-    const sourceRef = (0, react_1.useRef)(null);
-    const [dropdownStyles, setDropdownStyles] = (0, react_1.useState)({});
+    const panelRef = (0, react_1.useRef)(null);
+    const triggerRef = (0, react_1.useRef)(null);
+    const triggerRectRef = (0, react_1.useRef)(null);
+    const [dropdownStyles, setDropdownStyles] = (0, react_1.useState)({
+        top: 0,
+    });
     const close = () => {
         toogleOpen(false);
     };
     const toogle = (openState) => {
-        if (sourceRef.current && openState) {
-            const buttonRect = sourceRef.current.getBoundingClientRect();
+        if (triggerRef.current && openState) {
+            const buttonRect = triggerRef.current.getBoundingClientRect();
+            triggerRectRef.current = buttonRect;
             const positionStyle = {
                 top: buttonRect.bottom + window.scrollY,
             };
@@ -58,42 +72,55 @@ const DropdownMenu = ({ size = 'medium', iconName = 'more_vert', header = false,
         }
         toogleOpen(openState);
     };
-    const handleFooterAction = () => {
-        footerAction && footerAction();
-        close();
-    };
+    (0, react_1.useLayoutEffect)(() => {
+        if (!open || !panelRef.current || !triggerRectRef.current)
+            return;
+        const panel = panelRef.current;
+        const buttonRect = triggerRectRef.current;
+        const panelRect = panel.getBoundingClientRect();
+        const viewportHeight = window.innerHeight;
+        const viewportWidth = window.innerWidth;
+        const positionStyle = { ...dropdownStyles };
+        // Vertical: flip upward if panel overflows viewport bottom
+        if (buttonRect.bottom + panelRect.height > viewportHeight) {
+            positionStyle.top = buttonRect.top + window.scrollY - panelRect.height;
+        }
+        // Horizontal: fix left-aligned panel overflowing viewport right
+        if (position === 'left' && positionStyle.left !== undefined) {
+            if (positionStyle.left + panelRect.width >
+                viewportWidth + window.scrollX) {
+                positionStyle.left = Math.max(0, viewportWidth + window.scrollX - panelRect.width);
+            }
+        }
+        setDropdownStyles(positionStyle);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [open]);
     const handleClick = (action, disabled, disableID) => {
+        if (disabled) {
+            close();
+            return;
+        }
         if (targetID) {
             if (disableID !== targetID) {
-                if (!disabled) {
-                    action(targetID);
-                }
+                action(targetID);
             }
         }
         else {
-            if (!disabled) {
-                action();
-            }
+            action();
         }
         close();
     };
-    const isDisable = (disableID, disabled) => {
-        if (disabled) {
-            return true;
-        }
-        else if (targetID) {
-            return targetID === disableID;
-        }
-        return false;
-    };
     (0, react_1.useEffect)(() => {
-        const panel = ref.current;
+        const panel = panelRef.current;
         const handleClickOutside = (event) => {
-            if (ref.current && !ref.current.contains(event.target)) {
+            const target = event.target;
+            const isInsidePanel = panelRef.current?.contains(target) ?? false;
+            const isInsideTrigger = triggerRef.current?.contains(target) ?? false;
+            if (!isInsidePanel && !isInsideTrigger) {
                 close();
             }
         };
-        const mouseleave = (e) => {
+        const mouseleave = () => {
             close();
         };
         const handleKeyDown = (e) => {
@@ -116,16 +143,18 @@ const DropdownMenu = ({ size = 'medium', iconName = 'more_vert', header = false,
             }
         };
     }, [open]);
-    return (react_1.default.createElement(DropdownMenu_styles_1.DropdownMenuElement, null,
-        react_1.default.createElement("div", { ref: sourceRef, onClick: () => toogle(!open) }, textMode ? (react_1.default.createElement(DropdownMenu_styles_1.DropdownMenuLabel, { size: size, isActive: isTextActive }, label)) : (react_1.default.createElement(Icons_1.Icon, { name: iconName, size: (0, common_1.setIconSize)(size), isActive: open, right: right, left: left, iconColor: iconColor, iconHoverColor: iconHoverColor, iconBgColor: iconBgColor, iconBgHoverColor: iconBgHoverColor }))),
+    const resolvedThemeData = (0, config_1.resolveThemeWithComponentsConfig)({
+        theme,
+        themeVariant,
+    });
+    const resolvedTheme = resolvedThemeData.resolvedTheme;
+    const { componentsConfig } = resolvedThemeData;
+    const dropdownMenuConfig = componentsConfig.dropdownMenu;
+    return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: resolvedTheme },
+        react_1.default.createElement(DropdownMenu_styles_1.DropdownMenuRoot, null,
+            react_1.default.createElement(Dropdown_styles_1.TrigerWrapper, { ref: triggerRef }, textMode ? (react_1.default.createElement(DropdownMenu_styles_1.DropdownMenuText, { isActive: open, onClick: () => toogle(!open), theme: resolvedTheme, config: dropdownMenuConfig }, label)) : (react_1.default.createElement(Icon_1.Icon, { name: iconName, size: size, isActive: open, color: iconColor, hoverColor: iconHoverColor, background: iconBgColor, hoverBackground: iconBgHoverColor, onClick: () => toogle(!open) })))),
         open &&
-            (0, react_dom_1.createPortal)(react_1.default.createElement(common_1.Panel, { style: dropdownStyles, ref: ref, size: size, zIndex: zIndex },
-                react_1.default.createElement(Aligment_1.Aligment, { direction: "column" },
-                    header && (react_1.default.createElement(DropdownMenu_styles_1.DropdownMenuHeader, null,
-                        headerTitle && (react_1.default.createElement(Typography_1.TextAccent, { color: Theme_1.Theme.colors.text }, headerTitle)),
-                        headerSubtitle && (react_1.default.createElement(Typography_1.TextLabel, { color: Theme_1.Theme.colors.text }, headerSubtitle)))),
-                    react_1.default.createElement(DropdownMenu_styles_1.DropdownMenuContent, null, options &&
-                        options.map((option) => (react_1.default.createElement(DropdownMenu_styles_1.DropdownMenuOption, { key: option.label, isDisable: isDisable(option.disableID, option.disabled), onClick: () => handleClick(option.action, option.disabled ? option.disabled : false, option.disableID), isActive: option.isActive }, option.label)))),
-                    footer && (react_1.default.createElement(DropdownMenu_styles_1.DropdownMenuFooter, null, footerText && (react_1.default.createElement(Typography_1.Text, { action: true, onClick: handleFooterAction }, footerText)))))), document.body)));
+            (0, react_dom_1.createPortal)(react_1.default.createElement(Dropdown_styles_1.DropdownMenuPanel, { isOpen: open, style: dropdownStyles, ref: panelRef, theme: resolvedTheme, config: dropdownMenuConfig },
+                react_1.default.createElement(ActionPanel_1.ActionPanel, { options: options, size: size, theme: theme, themeVariant: themeVariant, maxRows: 5, zIndex: zIndex, handleClick: handleClick, header: header, footer: footer })), document.body)));
 };
 exports.DropdownMenu = DropdownMenu;

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

@@ -3,52 +3,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DropdownMenuLabel = exports.DropdownMenuOption = exports.DropdownMenuContent = exports.DropdownMenuFooter = exports.DropdownMenuHeader = exports.DropdownMenuElement = void 0;
-const polished_1 = require("polished");
+exports.DropdownMenuText = exports.DropdownMenuRoot = void 0;
 const styled_components_1 = __importDefault(require("styled-components"));
-const Theme_1 = require("../../Theme");
-const common_1 = require("../common");
-exports.DropdownMenuElement = styled_components_1.default.div `
-  cursor: pointer;
-  position: relative;
-  width: auto;
+exports.DropdownMenuRoot = styled_components_1.default.div `
   display: flex;
   box-sizing: border-box;
-  min-width: 40px;
 `;
-exports.DropdownMenuHeader = styled_components_1.default.div `
-  border-bottom: 1px solid ${Theme_1.Theme.colors.gray_3};
-  padding: ${Theme_1.Theme.padding.m};
-  width: 100%;
-  box-sizing: border-box;
-`;
-exports.DropdownMenuFooter = styled_components_1.default.div `
-  border-top: 1px solid ${Theme_1.Theme.colors.gray_3};
-  padding: ${Theme_1.Theme.padding.m};
-  width: 100%;
-  box-sizing: border-box;
-`;
-exports.DropdownMenuContent = styled_components_1.default.div `
-  width: 100%;
-`;
-exports.DropdownMenuOption = styled_components_1.default.div `
-  padding: ${Theme_1.Theme.padding.s} ${Theme_1.Theme.padding.m};
-  text-align: left;
-  min-width: 80px;
-  cursor: ${(p) => (p.isDisable ? 'not-allowed' : 'pointer')};
-  white-space: nowrap;
-  color: ${(p) => p.isActive
-    ? Theme_1.Theme.colors.primary
-    : p.isDisable
-        ? Theme_1.Theme.colors.gray_1
-        : Theme_1.Theme.colors.text};
-  font-size: 16px;
-  :hover {
-    background-color: ${(p) => p.isDisable ? Theme_1.Theme.colors.gray_4 : (0, polished_1.lighten)(0.4, Theme_1.Theme.colors.primary)};
-  }
-`;
-exports.DropdownMenuLabel = styled_components_1.default.div `
-  display: flex;
-  ${(p) => (0, common_1.setSize)(p.size)};
-  color: ${(p) => (p.isActive ? Theme_1.Theme.colors.primary : p.theme.optionColor)};
+exports.DropdownMenuText = styled_components_1.default.div `
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: ${({ theme, config, isActive }) => isActive ? config.color.activeText : config.color.text};
+    font-size: ${({ config }) => config.size.fontSize}px};
+    line-height: ${({ config }) => config.size.lineHeight}px};
 `;

package/dist/cjs/components/File/File.js

@@ -15,39 +15,75 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : 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;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.File = void 0;
-const Aligment_1 = require("../Aligment");
-const Input_1 = require("../Input");
+const ComponentRoot_1 = require("../ComponentRoot");
+const config_1 = require("../../config");
 const react_1 = __importStar(require("react"));
-const Button_1 = require("../Button");
 const File_styles_1 = require("./File.styles");
-const Dropdown_1 = require("../Dropdown");
-const Typography_1 = require("../Typography");
-const File = ({ label, labelPosition = 'top', name, disabled = false, multiple = false, size = 'medium', handleChange, accept = 'application/pdf', width, error, errorMsg, placeholder, fileValue, subLabel }) => {
+const Button_1 = require("../Button");
+const config_2 = require("../../config");
+const Icon_1 = require("../Icon");
+const File = ({ theme, themeVariant, handleChange, placeholder, fileValue, multiple = false, accept = 'application/pdf', name, size = 'md', label, labelPosition = 'top', width, disabled = false, error, helperText, readOnly = false, required = false, optional = false, optionalLabel, buttonLabel = config_2.wordbook.file.buttonPlaceholder, componentWidth }) => {
+    const resolvedThemeData = (0, config_1.resolveThemeWithComponentsConfig)({
+        theme,
+        themeVariant,
+    });
+    const resolvedTheme = resolvedThemeData.resolvedTheme;
+    const { componentsConfig } = resolvedThemeData;
+    const fileConfig = componentsConfig.file;
     const fileRef = (0, react_1.useRef)(null);
+    const [files, setFiles] = (0, react_1.useState)(fileValue ? [fileValue] : []);
+    (0, react_1.useEffect)(() => {
+        if (!multiple) {
+            setFiles(fileValue ? [fileValue] : []);
+        }
+    }, [fileValue, multiple]);
     const handleSelect = (e) => {
+        const selectedFiles = e.target.files ? Array.from(e.target.files) : [];
+        setFiles((prevFiles) => {
+            if (!multiple) {
+                return selectedFiles.slice(0, 1);
+            }
+            const mergedFiles = [...prevFiles, ...selectedFiles];
+            const uniqueFiles = mergedFiles.filter((file, index, array) => index ===
+                array.findIndex((candidate) => candidate.name === file.name &&
+                    candidate.lastModified === file.lastModified &&
+                    candidate.size === file.size));
+            return uniqueFiles;
+        });
         handleChange(e);
+        e.target.value = '';
     };
     const openFileSelector = () => {
-        fileRef.current.click();
+        if (!disabled && !readOnly) {
+            fileRef.current.click();
+        }
     };
-    return (react_1.default.createElement(Aligment_1.Aligment, { align: labelPosition === 'top' ? 'flex-start' : 'center', direction: labelPosition === 'top' ? 'column' : 'row', wrap: 'nowrap' },
-        label && (react_1.default.createElement(Input_1.InputLabelElement, { size: size, labelPosition: labelPosition }, label)),
-        react_1.default.createElement(Input_1.InputWrapper, { width: width },
-            react_1.default.createElement(Aligment_1.Aligment, { wrap: "nowrap", direction: 'column', gap: 2, align: 'start-flex' },
-                react_1.default.createElement(Aligment_1.Aligment, { gap: 10, wrap: "nowrap" },
-                    react_1.default.createElement(Dropdown_1.Field, { inputSize: size, disabled: disabled, width: width, active: false, error: error, onClick: openFileSelector }, fileValue ? fileValue.name : placeholder),
-                    react_1.default.createElement(Button_1.Button, { size: size, mode: "secondary", onClick: openFileSelector, text: "Wybierz plik" })),
-                subLabel && react_1.default.createElement(Typography_1.TextMicro, null, subLabel)),
-            react_1.default.createElement(File_styles_1.HiddenField, { type: "file", name: name, onChange: (e) => handleSelect(e), ref: fileRef, accept: accept, multiple: multiple }),
-            (error && errorMsg) && react_1.default.createElement(Input_1.InputErrorMsg, null, errorMsg))));
+    const firstFileName = files[0]?.name ?? '';
+    const displayValue = files.length <= 1 ? firstFileName : `${firstFileName}  (+ ${files.length - 1})`;
+    return (react_1.default.createElement(ComponentRoot_1.ComponentRoot, { labelPosition: labelPosition, size: size, width: width, disabled: disabled, error: error, readOnly: readOnly, required: required, optional: optional, optionalLabel: optionalLabel, helperText: helperText, themeVariant: themeVariant, theme: resolvedTheme, componentConfig: fileConfig, label: label, noBorder: true, componentWidth: componentWidth },
+        react_1.default.createElement(File_styles_1.FileRoot, { theme: resolvedTheme, config: fileConfig, size: size, onClick: openFileSelector, isDisabled: disabled }, files.length === 0 ? (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(Icon_1.Icon, { name: "file", size: fileConfig.size[size].iconSize, background: "transparent", hoverBackground: "transparent", isDisabled: disabled || readOnly }),
+            react_1.default.createElement(File_styles_1.FilePlaceholder, { theme: resolvedTheme, config: fileConfig, size: size }, placeholder))) : (displayValue)),
+        react_1.default.createElement(Button_1.Button, { mode: "ghost", size: size, isDisabled: disabled, text: buttonLabel, onClick: openFileSelector }),
+        react_1.default.createElement(File_styles_1.FileHidden, { type: "file", name: name, onChange: (e) => handleSelect(e), ref: fileRef, accept: accept, multiple: multiple })));
 };
 exports.File = File;

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

@@ -3,8 +3,49 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.HiddenField = void 0;
+exports.FilePlaceholder = exports.FileHidden = exports.FileRoot = void 0;
 const styled_components_1 = __importDefault(require("styled-components"));
-exports.HiddenField = styled_components_1.default.input `
-  display:none;
+exports.FileRoot = styled_components_1.default.div `
+  box-sizing: border-box;
+  width: 100%;
+  border: 1px solid ${({ theme, config }) => config.color.default.fileBorder};
+  ::-webkit-outer-spin-button,
+  ::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+  &::placeholder {
+    color: ${({ theme, config }) => config.color.default.placeholder};
+    opacity: 1;
+  }
+  &:hover {
+    border-color: ${({ isActive, theme, config }) => isActive
+    ? config.color.focus.fileBorder
+    : config.color.hover.fileBorder};
+    background: ${({ theme, config }) => config.color.hover.background};
+  }
+  -moz-appearance: textfield;
+  appearance: textfield;
+  outline: none;
+  height: ${({ config, size }) => config.size[size].height}px;
+  font-size: ${({ config, size }) => config.size[size].fontSize}px;
+  line-height: ${({ config, size }) => config.size[size].lineHeight}px;
+  padding: 0 ${({ config, size }) => config.size[size].paddingX}px};
+  color: ${({ theme, config, isDisabled }) => isDisabled ? config.color.disabled.text : config.color.default.text};
+  border-radius: ${({ config, size }) => config.size[size].radius}px;
+  display: flex;
+  align-items: center;
+  gap: ${({ config, size }) => config.size[size].gap}px;
+  overflow: hidden;
+`;
+exports.FileHidden = styled_components_1.default.input `
+  display: none;
+`;
+exports.FilePlaceholder = styled_components_1.default.span `
+  color: ${({ theme, config }) => config.color.default.placeholder};
+  font-size: ${({ config, size }) => config.size[size].fontSize}px;
+  line-height: ${({ config, size }) => config.size[size].lineHeight}px;
+  display: flex;
+  align-items: center;
+  gap: ${({ config, size }) => config.size[size].gap}px;
 `;