venice-ui 2.3.1 → 2.3.4

package/dist/cjs/components/Input/Input.js

@@ -39,17 +39,23 @@ const Input = ({ label, labelPosition = 'top', value, type = 'text', name, disab
             ? numberValue
             : parseFloat(numberValue);
     };
-    const debouncedHandleChange = (0, react_1.useCallback)((0, lodash_1.debounce)((name, value) => {
-        handleChange(name, value);
-    }, 300), [handleChange]);
+    const debouncedRef = (0, react_1.useRef)((0, lodash_1.debounce)((n, v) => {
+        handleChange(n, v);
+    }, 300));
+    (0, react_1.useEffect)(() => {
+        return () => {
+            debouncedRef.current.flush();
+        };
+    }, []);
     const onChange = (e) => {
         let returnedValue = type === 'number' || type === 'increase'
             ? calculateNumberValue(e.target.value)
             : e.target.value.toString();
         setInputValue(returnedValue);
-        debouncedHandleChange(name, returnedValue);
+        debouncedRef.current(name, returnedValue);
     };
     const onBlurValidation = () => {
+        debouncedRef.current.flush();
         if (type === 'number' || type === 'increase') {
             let validateValue = inputValue;
             if (isNaN(parseFloat(validateValue.toString()))) {
@@ -68,6 +74,7 @@ const Input = ({ label, labelPosition = 'top', value, type = 'text', name, disab
     };
     const onKeyDown = (e) => {
         if (handleSubmit && e.key === 'Enter') {
+            debouncedRef.current.flush();
             handleSubmit();
         }
     };

package/dist/cjs/components/Section/Section.js

@@ -9,11 +9,11 @@ const react_1 = __importDefault(require("react"));
 const Section_styles_1 = require("./Section.styles");
 const Theme_1 = require("../../Theme");
 const Button_1 = require("../Button");
-const Section = ({ title, children, titlePosition = 'left', noPadding = false, theme = Theme_1.mainTheme, backgroundColor = theme.contentBackground, action, actionLabel = 'action', }) => {
-    return (react_1.default.createElement(Section_styles_1.SectionElement, { backgroundColor: backgroundColor },
-        title && (react_1.default.createElement(Section_styles_1.SectionTitle, { titlePosition: titlePosition, noPadding: noPadding, withAction: titlePosition === 'left' && !!action },
+const Section = ({ title, children, titlePosition = 'left', noHorizontalPadding = false, noTopPadding = false, theme = Theme_1.mainTheme, backgroundColor = theme.contentBackground, action, actionLabel = 'action', }) => {
+    return (react_1.default.createElement(Section_styles_1.SectionElement, { backgroundColor: backgroundColor, noTopPadding: noTopPadding },
+        title && (react_1.default.createElement(Section_styles_1.SectionTitle, { titlePosition: titlePosition, noPadding: noHorizontalPadding, withAction: titlePosition === 'left' && !!action },
             react_1.default.createElement(Typography_1.TextSubHeader, null, title),
             titlePosition === 'left' && !!action && (react_1.default.createElement(Button_1.Button, { text: actionLabel, onClick: action, size: "small", mode: "secondary" })))),
-        react_1.default.createElement(Section_styles_1.SectionContent, { noPadding: noPadding }, children)));
+        react_1.default.createElement(Section_styles_1.SectionContent, { noPadding: noHorizontalPadding }, children)));
 };
 exports.Section = Section;

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

@@ -12,6 +12,7 @@ exports.SectionElement = styled_components_1.default.div `
   overflow: auto;
   padding: ${Theme_1.Theme.padding.l} 0;
   background-color: ${(p) => p.backgroundColor};
+  ${(p) => p.noTopPadding && `padding-top: 0;`}
 `;
 exports.SectionTitle = styled_components_1.default.div `
   width: 100%;

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

@@ -42,7 +42,7 @@ exports.TooltipWrapper = styled_components_1.default.div `
 `;
 exports.TooltipPivot = styled_components_1.default.span `
   position: absolute;
-  left: 50%;
+  left: 18px;
   transform: translateX(-50%);
   width: 0;
   height: 0;

package/dist/esm/components/Input/Input.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { ThemeProvider } from 'styled-components';
 import { Aligment } from '../Aligment';
 import { InputTextElement, InputLabelElement, InputErrorMsg, InputWrapper, EyeIconWrapper, IconsWrapper, InputReadOnlyElement, Prefix, } from './Input.styles';
@@ -13,17 +13,23 @@ export const Input = ({ label, labelPosition = 'top', value, type = 'text', name
             ? numberValue
             : parseFloat(numberValue);
     };
-    const debouncedHandleChange = useCallback(debounce((name, value) => {
-        handleChange(name, value);
-    }, 300), [handleChange]);
+    const debouncedRef = useRef(debounce((n, v) => {
+        handleChange(n, v);
+    }, 300));
+    useEffect(() => {
+        return () => {
+            debouncedRef.current.flush();
+        };
+    }, []);
     const onChange = (e) => {
         let returnedValue = type === 'number' || type === 'increase'
             ? calculateNumberValue(e.target.value)
             : e.target.value.toString();
         setInputValue(returnedValue);
-        debouncedHandleChange(name, returnedValue);
+        debouncedRef.current(name, returnedValue);
     };
     const onBlurValidation = () => {
+        debouncedRef.current.flush();
         if (type === 'number' || type === 'increase') {
             let validateValue = inputValue;
             if (isNaN(parseFloat(validateValue.toString()))) {
@@ -42,6 +48,7 @@ export const Input = ({ label, labelPosition = 'top', value, type = 'text', name
     };
     const onKeyDown = (e) => {
         if (handleSubmit && e.key === 'Enter') {
+            debouncedRef.current.flush();
             handleSubmit();
         }
     };

package/dist/esm/components/Section/Section.js

@@ -3,10 +3,10 @@ import React from 'react';
 import { SectionElement, SectionTitle, SectionContent } from './Section.styles';
 import { mainTheme } from '../../Theme';
 import { Button } from '../Button';
-export const Section = ({ title, children, titlePosition = 'left', noPadding = false, theme = mainTheme, backgroundColor = theme.contentBackground, action, actionLabel = 'action', }) => {
-    return (React.createElement(SectionElement, { backgroundColor: backgroundColor },
-        title && (React.createElement(SectionTitle, { titlePosition: titlePosition, noPadding: noPadding, withAction: titlePosition === 'left' && !!action },
+export const Section = ({ title, children, titlePosition = 'left', noHorizontalPadding = false, noTopPadding = false, theme = mainTheme, backgroundColor = theme.contentBackground, action, actionLabel = 'action', }) => {
+    return (React.createElement(SectionElement, { backgroundColor: backgroundColor, noTopPadding: noTopPadding },
+        title && (React.createElement(SectionTitle, { titlePosition: titlePosition, noPadding: noHorizontalPadding, withAction: titlePosition === 'left' && !!action },
             React.createElement(TextSubHeader, null, title),
             titlePosition === 'left' && !!action && (React.createElement(Button, { text: actionLabel, onClick: action, size: "small", mode: "secondary" })))),
-        React.createElement(SectionContent, { noPadding: noPadding }, children)));
+        React.createElement(SectionContent, { noPadding: noHorizontalPadding }, children)));
 };

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

@@ -6,6 +6,7 @@ export const SectionElement = styled.div `
   overflow: auto;
   padding: ${Theme.padding.l} 0;
   background-color: ${(p) => p.backgroundColor};
+  ${(p) => p.noTopPadding && `padding-top: 0;`}
 `;
 export const SectionTitle = styled.div `
   width: 100%;

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

@@ -16,7 +16,7 @@ export const TooltipWrapper = styled.div `
 `;
 export const TooltipPivot = styled.span `
   position: absolute;
-  left: 50%;
+  left: 18px;
   transform: translateX(-50%);
   width: 0;
   height: 0;

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

@@ -3,7 +3,8 @@ import { TitlePosition } from '../../types';
 export interface ISectionProps {
     title?: string;
     titlePosition?: TitlePosition;
-    noPadding?: boolean;
+    noHorizontalPadding?: boolean;
+    noTopPadding?: boolean;
     backgroundColor?: string;
     children: React.ReactNode;
     theme?: any;

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

@@ -1,6 +1,7 @@
 import { TitlePosition } from '../../types';
 interface ISectionStyles {
     backgroundColor: string;
+    noTopPadding?: boolean;
 }
 export declare const SectionElement: import("styled-components").StyledComponent<"div", any, ISectionStyles, never>;
 interface ISectionTitleStyle {

package/package.json

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