venice-ui 1.0.21 → 1.0.24

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

@@ -7,10 +7,10 @@ exports.Section = void 0;
 const Typography_1 = require("../Typography");
 const react_1 = __importDefault(require("react"));
 const Section_styles_1 = require("./Section.styles");
-const Section = ({ title, children, titlePosition = "left" }) => {
+const Section = ({ title, children, titlePosition = "left", noPadding = false }) => {
     return (react_1.default.createElement(Section_styles_1.SectionElement, null,
         title && (react_1.default.createElement(Section_styles_1.SectionTitle, { titlePosition: titlePosition },
             react_1.default.createElement(Typography_1.TextSubHeader, null, title))),
-        react_1.default.createElement(Section_styles_1.SectionContent, null, children)));
+        react_1.default.createElement(Section_styles_1.SectionContent, { noPadding: noPadding }, children)));
 };
 exports.Section = Section;

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

@@ -9,15 +9,17 @@ const Theme_1 = require("../../Theme");
 exports.SectionElement = styled_components_1.default.div `
   width:100%;
   box-sizing:border-box;
-  padding: ${Theme_1.Theme.padding.l};
+  padding: ${Theme_1.Theme.padding.l} 0;
   background-color:${Theme_1.Theme.colors.white};
 `;
 exports.SectionTitle = styled_components_1.default.div `
   width:100%;
-  padding-bottom: ${Theme_1.Theme.padding.l};
+  padding:0 ${Theme_1.Theme.padding.l}  ${Theme_1.Theme.padding.l} ${Theme_1.Theme.padding.l} ;
   text-align:${p => p.titlePosition};
+  box-sizing:border-box;
 `;
 exports.SectionContent = styled_components_1.default.div `
   width:100%;
   display:flex;
+  padding: 0 ${p => p.noPadding ? 0 : Theme_1.Theme.padding.l};
 `;

package/dist/cjs/components/Sidepanel/Sidepanel.js

@@ -34,7 +34,9 @@ const Sidepanel = ({ isOpen, handleClose, children, right = false, overlayer = t
     const ref = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         const handleClickOutside = (event) => {
-            if (ref.current && !ref.current.contains(event.target) && isOpen) {
+            console.log('click:', isOpen);
+            if (ref.current && !ref.current.contains(event.target)) {
+                console.log('fire:', isOpen);
                 handleClose && handleClose();
             }
         };

package/dist/cjs/components/Tile/Tile.js

@@ -7,9 +7,10 @@ exports.Tile = void 0;
 const ElementHeader_1 = require("../ElementHeader");
 const react_1 = __importDefault(require("react"));
 const Tile_styles_1 = require("./Tile.styles");
-const Tile = ({ size = 'small', shadow = true, title, children, }) => {
-    return (react_1.default.createElement(Tile_styles_1.TileElement, { size: size, shadow: shadow },
-        title && react_1.default.createElement(ElementHeader_1.ElementHeader, { title: title }),
+const Theme_1 = require("../../Theme");
+const Tile = ({ size = 'small', shadow = true, title, children, backgroundColor = Theme_1.Theme.colors.white, }) => {
+    return (react_1.default.createElement(Tile_styles_1.TileElement, { size: size, shadow: shadow, backgroundColor: backgroundColor },
+        title && react_1.default.createElement(ElementHeader_1.ElementHeader, { title: title, bgColor: backgroundColor }),
         children));
 };
 exports.Tile = Tile;

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

@@ -10,7 +10,7 @@ exports.TileElement = styled_components_1.default.div `
   box-sizing: border-box;
   display: flex;
   width: 100%;
-  background-color: ${Theme_1.Theme.colors.white};
+  background-color: ${(p) => p.backgroundColor};
   border-radius: ${Theme_1.Theme.borderRadius.m};
   max-height: 100%;
   overflow: hidden;

package/dist/cjs/hooks/useOutsideClick.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useOutsideClick = void 0;
+const react_1 = require("react");
+const useOutsideClick = (callback) => {
+    const ref = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        const handleClick = (event) => {
+            if (ref.current && !ref.current.contains(event.target)) {
+                callback();
+            }
+        };
+        document.addEventListener("click", handleClick, true);
+        return () => {
+            document.removeEventListener("click", handleClick, true);
+        };
+    }, [ref]);
+    return ref;
+};
+exports.useOutsideClick = useOutsideClick;

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

@@ -1,9 +1,9 @@
 import { TextSubHeader } from '../Typography';
 import React from 'react';
 import { SectionElement, SectionTitle, SectionContent } from './Section.styles';
-export const Section = ({ title, children, titlePosition = "left" }) => {
+export const Section = ({ title, children, titlePosition = "left", noPadding = false }) => {
     return (React.createElement(SectionElement, null,
         title && (React.createElement(SectionTitle, { titlePosition: titlePosition },
             React.createElement(TextSubHeader, null, title))),
-        React.createElement(SectionContent, null, children)));
+        React.createElement(SectionContent, { noPadding: noPadding }, children)));
 };

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

@@ -3,15 +3,17 @@ import { Theme } from "../../Theme";
 export const SectionElement = styled.div `
   width:100%;
   box-sizing:border-box;
-  padding: ${Theme.padding.l};
+  padding: ${Theme.padding.l} 0;
   background-color:${Theme.colors.white};
 `;
 export const SectionTitle = styled.div `
   width:100%;
-  padding-bottom: ${Theme.padding.l};
+  padding:0 ${Theme.padding.l}  ${Theme.padding.l} ${Theme.padding.l} ;
   text-align:${p => p.titlePosition};
+  box-sizing:border-box;
 `;
 export const SectionContent = styled.div `
   width:100%;
   display:flex;
+  padding: 0 ${p => p.noPadding ? 0 : Theme.padding.l};
 `;

package/dist/esm/components/Sidepanel/Sidepanel.js

@@ -8,7 +8,9 @@ export const Sidepanel = ({ isOpen, handleClose, children, right = false, overla
     const ref = useRef(null);
     useEffect(() => {
         const handleClickOutside = (event) => {
-            if (ref.current && !ref.current.contains(event.target) && isOpen) {
+            console.log('click:', isOpen);
+            if (ref.current && !ref.current.contains(event.target)) {
+                console.log('fire:', isOpen);
                 handleClose && handleClose();
             }
         };

package/dist/esm/components/Tile/Tile.js

@@ -1,8 +1,9 @@
 import { ElementHeader } from '../ElementHeader';
 import React from 'react';
 import { TileElement } from './Tile.styles';
-export const Tile = ({ size = 'small', shadow = true, title, children, }) => {
-    return (React.createElement(TileElement, { size: size, shadow: shadow },
-        title && React.createElement(ElementHeader, { title: title }),
+import { Theme } from '../../Theme';
+export const Tile = ({ size = 'small', shadow = true, title, children, backgroundColor = Theme.colors.white, }) => {
+    return (React.createElement(TileElement, { size: size, shadow: shadow, backgroundColor: backgroundColor },
+        title && React.createElement(ElementHeader, { title: title, bgColor: backgroundColor }),
         children));
 };

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

@@ -4,7 +4,7 @@ export const TileElement = styled.div `
   box-sizing: border-box;
   display: flex;
   width: 100%;
-  background-color: ${Theme.colors.white};
+  background-color: ${(p) => p.backgroundColor};
   border-radius: ${Theme.borderRadius.m};
   max-height: 100%;
   overflow: hidden;

package/dist/esm/hooks/useOutsideClick.js

@@ -0,0 +1,16 @@
+import { useEffect, useRef } from "react";
+export const useOutsideClick = (callback) => {
+    const ref = useRef(null);
+    useEffect(() => {
+        const handleClick = (event) => {
+            if (ref.current && !ref.current.contains(event.target)) {
+                callback();
+            }
+        };
+        document.addEventListener("click", handleClick, true);
+        return () => {
+            document.removeEventListener("click", handleClick, true);
+        };
+    }, [ref]);
+    return ref;
+};

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

@@ -4,5 +4,6 @@ export interface ISectionProps {
     title?: string;
     children: React.ReactNode;
     titlePosition?: TitlePosition;
+    noPadding?: boolean;
 }
 export declare const Section: FC<ISectionProps>;

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

@@ -1,8 +1,11 @@
 import { TitlePosition } from '../../types';
 export declare const SectionElement: import("styled-components").StyledComponent<"div", any, {}, never>;
-interface ISectionTitleSyle {
+interface ISectionTitleStyle {
     titlePosition?: TitlePosition;
 }
-export declare const SectionTitle: import("styled-components").StyledComponent<"div", any, ISectionTitleSyle, never>;
-export declare const SectionContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SectionTitle: import("styled-components").StyledComponent<"div", any, ISectionTitleStyle, never>;
+interface ISectionContentStyles {
+    noPadding: boolean;
+}
+export declare const SectionContent: import("styled-components").StyledComponent<"div", any, ISectionContentStyles, never>;
 export {};

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

@@ -4,5 +4,6 @@ export interface ITileProps {
     title?: string;
     size?: string;
     shadow?: boolean;
+    backgroundColor?: string;
 }
 export declare const Tile: FC<ITileProps>;

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

@@ -1,6 +1,7 @@
 interface ITileElementStyle {
     size: string;
     shadow: boolean;
+    backgroundColor: string;
 }
 export declare const TileElement: import("styled-components").StyledComponent<"div", any, ITileElementStyle, never>;
 export {};

package/dist/types/hooks/useOutsideClick.d.ts

@@ -0,0 +1 @@
+export declare const useOutsideClick: (callback: () => void) => import("react").RefObject<HTMLDivElement>;

package/package.json

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