venice-ui 2.4.12 → 3.0.1

package/dist/esm/components/DropdownMenu/DropdownMenu.js

@@ -1,22 +1,26 @@
-import { Panel, setIconSize } from '../common';
-import React, { useState, useRef, useEffect } from 'react';
-import { Theme, mainTheme } from '../../Theme';
-import { Icon } from '../Icons';
-import { DropdownMenuOption, DropdownMenuElement, DropdownMenuContent, DropdownMenuFooter, DropdownMenuHeader, DropdownMenuLabel, } from './DropdownMenu.styles';
-import { Aligment } from '../Aligment';
-import { TextAccent, TextLabel, Text } from '../Typography';
+import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { resolveThemeWithComponentsConfig } from '../../config';
+import { DropdownMenuRoot, DropdownMenuText } from './DropdownMenu.styles';
+import { DropdownMenuPanel, TrigerWrapper } from '../Dropdown/Dropdown.styles';
+import { Icon } from '../Icon';
 import { createPortal } from 'react-dom';
-export const DropdownMenu = ({ size = 'medium', iconName = 'more_vert', header = false, headerTitle, headerSubtitle, footer = false, footerText, footerAction, options, right = false, left = false, targetID, iconColor = mainTheme.iconColor, iconHoverColor = mainTheme.iconHoverColor, iconBgColor = mainTheme.iconBgColor, iconBgHoverColor = mainTheme.iconBgHoverColor, position = 'left', zIndex, textMode = false, label = '', isTextActive = false, }) => {
+import { ActionPanel } from '../ActionPanel';
+import { ThemeProvider } from 'styled-components';
+export 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] = useState(false);
-    const ref = useRef(null);
-    const sourceRef = useRef(null);
-    const [dropdownStyles, setDropdownStyles] = useState({});
+    const panelRef = useRef(null);
+    const triggerRef = useRef(null);
+    const triggerRectRef = useRef(null);
+    const [dropdownStyles, setDropdownStyles] = 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,
             };
@@ -32,42 +36,55 @@ export const DropdownMenu = ({ size = 'medium', iconName = 'more_vert', header =
         }
         toogleOpen(openState);
     };
-    const handleFooterAction = () => {
-        footerAction && footerAction();
-        close();
-    };
+    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;
-    };
     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) => {
@@ -90,15 +107,17 @@ export const DropdownMenu = ({ size = 'medium', iconName = 'more_vert', header =
             }
         };
     }, [open]);
-    return (React.createElement(DropdownMenuElement, null,
-        React.createElement("div", { ref: sourceRef, onClick: () => toogle(!open) }, textMode ? (React.createElement(DropdownMenuLabel, { size: size, isActive: isTextActive }, label)) : (React.createElement(Icon, { name: iconName, size: setIconSize(size), isActive: open, right: right, left: left, iconColor: iconColor, iconHoverColor: iconHoverColor, iconBgColor: iconBgColor, iconBgHoverColor: iconBgHoverColor }))),
+    const resolvedThemeData = resolveThemeWithComponentsConfig({
+        theme,
+        themeVariant,
+    });
+    const resolvedTheme = resolvedThemeData.resolvedTheme;
+    const { componentsConfig } = resolvedThemeData;
+    const dropdownMenuConfig = componentsConfig.dropdownMenu;
+    return (React.createElement(ThemeProvider, { theme: resolvedTheme },
+        React.createElement(DropdownMenuRoot, null,
+            React.createElement(TrigerWrapper, { ref: triggerRef }, textMode ? (React.createElement(DropdownMenuText, { isActive: open, onClick: () => toogle(!open), theme: resolvedTheme, config: dropdownMenuConfig }, label)) : (React.createElement(Icon, { name: iconName, size: size, isActive: open, color: iconColor, hoverColor: iconHoverColor, background: iconBgColor, hoverBackground: iconBgHoverColor, onClick: () => toogle(!open) })))),
         open &&
-            createPortal(React.createElement(Panel, { style: dropdownStyles, ref: ref, size: size, zIndex: zIndex },
-                React.createElement(Aligment, { direction: "column" },
-                    header && (React.createElement(DropdownMenuHeader, null,
-                        headerTitle && (React.createElement(TextAccent, { color: Theme.colors.text }, headerTitle)),
-                        headerSubtitle && (React.createElement(TextLabel, { color: Theme.colors.text }, headerSubtitle)))),
-                    React.createElement(DropdownMenuContent, null, options &&
-                        options.map((option) => (React.createElement(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.createElement(DropdownMenuFooter, null, footerText && (React.createElement(Text, { action: true, onClick: handleFooterAction }, footerText)))))), document.body)));
+            createPortal(React.createElement(DropdownMenuPanel, { isOpen: open, style: dropdownStyles, ref: panelRef, theme: resolvedTheme, config: dropdownMenuConfig },
+                React.createElement(ActionPanel, { options: options, size: size, theme: theme, themeVariant: themeVariant, maxRows: 5, zIndex: zIndex, handleClick: handleClick, header: header, footer: footer })), document.body)));
 };

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

@@ -1,48 +1,14 @@
-import { lighten } from 'polished';
 import styled from 'styled-components';
-import { Theme } from '../../Theme';
-import { setSize } from '../common';
-export const DropdownMenuElement = styled.div `
-  cursor: pointer;
-  position: relative;
-  width: auto;
+export const DropdownMenuRoot = styled.div `
   display: flex;
   box-sizing: border-box;
-  min-width: 40px;
 `;
-export const DropdownMenuHeader = styled.div `
-  border-bottom: 1px solid ${Theme.colors.gray_3};
-  padding: ${Theme.padding.m};
-  width: 100%;
-  box-sizing: border-box;
-`;
-export const DropdownMenuFooter = styled.div `
-  border-top: 1px solid ${Theme.colors.gray_3};
-  padding: ${Theme.padding.m};
-  width: 100%;
-  box-sizing: border-box;
-`;
-export const DropdownMenuContent = styled.div `
-  width: 100%;
-`;
-export const DropdownMenuOption = styled.div `
-  padding: ${Theme.padding.s} ${Theme.padding.m};
-  text-align: left;
-  min-width: 80px;
-  cursor: ${(p) => (p.isDisable ? 'not-allowed' : 'pointer')};
-  white-space: nowrap;
-  color: ${(p) => p.isActive
-    ? Theme.colors.primary
-    : p.isDisable
-        ? Theme.colors.gray_1
-        : Theme.colors.text};
-  font-size: 16px;
-  :hover {
-    background-color: ${(p) => p.isDisable ? Theme.colors.gray_4 : lighten(0.4, Theme.colors.primary)};
-  }
-`;
-export const DropdownMenuLabel = styled.div `
-  display: flex;
-  ${(p) => setSize(p.size)};
-  color: ${(p) => (p.isActive ? Theme.colors.primary : p.theme.optionColor)};
+export const DropdownMenuText = styled.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/esm/components/File/File.js

@@ -1,26 +1,52 @@
-import { Aligment } from '../Aligment';
-import { InputLabelElement, InputWrapper, InputErrorMsg } from '../Input';
-import React, { useRef } from 'react';
+import { ComponentRoot } from '../ComponentRoot';
+import { resolveThemeWithComponentsConfig } from '../../config';
+import React, { useEffect, useRef, useState } from 'react';
+import { FileHidden, FilePlaceholder, FileRoot } from './File.styles';
 import { Button } from '../Button';
-import { HiddenField } from './File.styles';
-import { Field } from '../Dropdown';
-import { TextMicro } from '../Typography';
-export const File = ({ label, labelPosition = 'top', name, disabled = false, multiple = false, size = 'medium', handleChange, accept = 'application/pdf', width, error, errorMsg, placeholder, fileValue, subLabel }) => {
+import { wordbook } from '../../config';
+import { Icon } from '../Icon';
+export 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 = wordbook.file.buttonPlaceholder, componentWidth }) => {
+    const resolvedThemeData = resolveThemeWithComponentsConfig({
+        theme,
+        themeVariant,
+    });
+    const resolvedTheme = resolvedThemeData.resolvedTheme;
+    const { componentsConfig } = resolvedThemeData;
+    const fileConfig = componentsConfig.file;
     const fileRef = useRef(null);
+    const [files, setFiles] = useState(fileValue ? [fileValue] : []);
+    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.createElement(Aligment, { align: labelPosition === 'top' ? 'flex-start' : 'center', direction: labelPosition === 'top' ? 'column' : 'row', wrap: 'nowrap' },
-        label && (React.createElement(InputLabelElement, { size: size, labelPosition: labelPosition }, label)),
-        React.createElement(InputWrapper, { width: width },
-            React.createElement(Aligment, { wrap: "nowrap", direction: 'column', gap: 2, align: 'start-flex' },
-                React.createElement(Aligment, { gap: 10, wrap: "nowrap" },
-                    React.createElement(Field, { inputSize: size, disabled: disabled, width: width, active: false, error: error, onClick: openFileSelector }, fileValue ? fileValue.name : placeholder),
-                    React.createElement(Button, { size: size, mode: "secondary", onClick: openFileSelector, text: "Wybierz plik" })),
-                subLabel && React.createElement(TextMicro, null, subLabel)),
-            React.createElement(HiddenField, { type: "file", name: name, onChange: (e) => handleSelect(e), ref: fileRef, accept: accept, multiple: multiple }),
-            (error && errorMsg) && React.createElement(InputErrorMsg, null, errorMsg))));
+    const firstFileName = files[0]?.name ?? '';
+    const displayValue = files.length <= 1 ? firstFileName : `${firstFileName}  (+ ${files.length - 1})`;
+    return (React.createElement(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.createElement(FileRoot, { theme: resolvedTheme, config: fileConfig, size: size, onClick: openFileSelector, isDisabled: disabled }, files.length === 0 ? (React.createElement(React.Fragment, null,
+            React.createElement(Icon, { name: "file", size: fileConfig.size[size].iconSize, background: "transparent", hoverBackground: "transparent", isDisabled: disabled || readOnly }),
+            React.createElement(FilePlaceholder, { theme: resolvedTheme, config: fileConfig, size: size }, placeholder))) : (displayValue)),
+        React.createElement(Button, { mode: "ghost", size: size, isDisabled: disabled, text: buttonLabel, onClick: openFileSelector }),
+        React.createElement(FileHidden, { type: "file", name: name, onChange: (e) => handleSelect(e), ref: fileRef, accept: accept, multiple: multiple })));
 };

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

@@ -1,4 +1,45 @@
-import styled from "styled-components";
-export const HiddenField = styled.input `
-  display:none;
+import styled from 'styled-components';
+export const FileRoot = styled.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;
+`;
+export const FileHidden = styled.input `
+  display: none;
+`;
+export const FilePlaceholder = styled.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;
 `;