@fattureincloud/fic-design-system 0.3.16-alpha.0 → 0.3.16

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

@@ -17,6 +17,7 @@ export declare type DropdownProps = {
     fullWidth?: boolean;
     placement?: Placement;
     minWidthAsTrigger?: boolean;
+    forceOpen?: boolean;
     alignRight?: boolean;
 };
 export declare type DropdownItemType = 'default' | 'danger' | 'success' | 'warning' | 'link';

package/dist/components/layout/sidebarItem/SidebarItem.d.ts

@@ -1,6 +1,6 @@
-import { DropdownItemProps } from 'components/dropdown';
-import { IconProps } from 'components/icon';
 import { MouseEventHandler } from 'react';
+import { DropdownItemProps } from '../../dropdown';
+import { IconProps } from './../../icon';
 interface Props {
     icon?: IconProps;
     title: string;

package/dist/components/tooltip/Arrow.d.ts

@@ -1,2 +1,5 @@
-export declare const Arrow: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+import { tooltipTypes } from './tooltipPalette';
+export declare const Arrow: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    type: tooltipTypes;
+}, never>;
 export declare const arrowStyle: import("styled-components").FlattenSimpleInterpolation;

package/dist/index.esm.js

@@ -1166,22 +1166,25 @@ var DefaultTrigger = function (_a) {
 };
 
 var DropdownImpl = function (props) {
-    var alignRight = props.alignRight, className = props.className, content = props.content, fullWidth = props.fullWidth, maxWidth = props.maxWidth, _a = props.minWidthAsTrigger, minWidthAsTrigger = _a === void 0 ? false : _a, placement = props.placement, renderContent = props.renderContent, renderTrigger = props.renderTrigger, triggerStyles = props.triggerStyles, title = props.title;
-    var _b = useState(false), isOpen = _b[0], setIsOpen = _b[1];
+    var alignRight = props.alignRight, className = props.className, content = props.content, fullWidth = props.fullWidth, maxWidth = props.maxWidth, _a = props.minWidthAsTrigger, minWidthAsTrigger = _a === void 0 ? false : _a, placement = props.placement, renderContent = props.renderContent, renderTrigger = props.renderTrigger, triggerStyles = props.triggerStyles, title = props.title, _b = props.forceOpen, forceOpen = _b === void 0 ? false : _b;
+    var _c = useState(false), isOpen = _c[0], setIsOpen = _c[1];
     var toggleDropdown = useCallback(function (e) {
         setIsOpen(function (isOpen) { return !isOpen; });
         e.stopPropagation();
     }, []);
     var closeDropdown = useCallback(function () { return setIsOpen(false); }, []);
+    useEffect(function () {
+        setIsOpen(forceOpen);
+    }, [forceOpen]);
     // Close Dropdown on click outside
     var wrapperRef = useRef(null);
     useClickAway(wrapperRef, function () { return closeDropdown(); });
     var popperRef = useRef(null);
     var buttonRef = useRef(null);
-    var _c = useState(null), arrowRef = _c[0], setArrowRef = _c[1];
+    var _d = useState(null), arrowRef = _d[0], setArrowRef = _d[1];
     // alignRight left for compatibility
     var popperPlacement = placement ? placement : alignRight ? 'bottom-end' : 'bottom-start';
-    var _d = usePopper(buttonRef.current, popperRef.current, {
+    var _e = usePopper(buttonRef.current, popperRef.current, {
         placement: popperPlacement,
         strategy: 'fixed',
         modifiers: useMemo(function () { return [
@@ -1214,12 +1217,12 @@ var DropdownImpl = function (props) {
                 },
             },
         ]; }, [minWidthAsTrigger, arrowRef]),
-    }), attributes = _d.attributes, styles = _d.styles;
+    }), attributes = _e.attributes, styles = _e.styles;
     return (React.createElement(Wrapper$3, { className: className, ref: wrapperRef },
         React.createElement("div", { style: triggerStyles, ref: buttonRef, onClick: toggleDropdown },
             title && React.createElement(DefaultTrigger, { title: title }),
             !title && renderTrigger && renderTrigger()),
-        React.createElement(CSSTransition, { in: isOpen, timeout: 200, unmountOnExit: true, appear: true },
+        React.createElement(CSSTransition, { in: forceOpen || isOpen, timeout: 200, unmountOnExit: true, appear: true },
             React.createElement(BodyAnimationWrapper, null,
                 React.createElement(PopperContainer, __assign({ ref: popperRef, style: styles.popper }, attributes.popper),
                     React.createElement("div", { ref: setArrowRef, style: styles.arrow }),
@@ -2002,9 +2005,9 @@ var tagPalette = {
     },
 };
 
-var Arrow = styled.div(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n  position: absolute;\n  width: 10px;\n  height: 10px;\n\n  &:after {\n    content: '';\n    position: absolute;\n    transform: rotate(45deg);\n    width: 10px;\n    height: 10px;\n    background-color: ", ";\n    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);\n  }\n"], ["\n  position: absolute;\n  width: 10px;\n  height: 10px;\n\n  &:after {\n    content: '';\n    position: absolute;\n    transform: rotate(45deg);\n    width: 10px;\n    height: 10px;\n    background-color: ", ";\n    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);\n  }\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.palette.grey[900];
+var Arrow = styled.div(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n  position: absolute;\n  width: 10px;\n  height: 10px;\n\n  &:after {\n    content: '';\n    position: absolute;\n    transform: rotate(45deg);\n    width: 10px;\n    height: 10px;\n    background-color: ", ";\n    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);\n    clip-path: polygon(100% 0, 0% 100%, 100% 100%);\n  }\n"], ["\n  position: absolute;\n  width: 10px;\n  height: 10px;\n\n  &:after {\n    content: '';\n    position: absolute;\n    transform: rotate(45deg);\n    width: 10px;\n    height: 10px;\n    background-color: ", ";\n    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);\n    clip-path: polygon(100% 0, 0% 100%, 100% 100%);\n  }\n"])), function (_a) {
+    var theme = _a.theme, type = _a.type;
+    return theme.components.tooltip[type].background;
 });
 var arrowStyle = css(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n  &[data-popper-placement^='top'] > ", " {\n    bottom: -5px;\n    &:after {\n      border-bottom-right-radius: 3px;\n    }\n  }\n\n  &[data-popper-placement^='bottom'] > ", " {\n    top: -5px;\n    &:after {\n      border-top-left-radius: 3px;\n    }\n  }\n\n  &[data-popper-placement^='left'] > ", " {\n    right: -5px;\n    &:after {\n      border-top-right-radius: 3px;\n    }\n  }\n\n  &[data-popper-placement^='right'] > ", " {\n    left: -5px;\n    &:after {\n      border-bottom-left-radius: 3px;\n    }\n  }\n"], ["\n  &[data-popper-placement^='top'] > ", " {\n    bottom: -5px;\n    &:after {\n      border-bottom-right-radius: 3px;\n    }\n  }\n\n  &[data-popper-placement^='bottom'] > ", " {\n    top: -5px;\n    &:after {\n      border-top-left-radius: 3px;\n    }\n  }\n\n  &[data-popper-placement^='left'] > ", " {\n    right: -5px;\n    &:after {\n      border-top-right-radius: 3px;\n    }\n  }\n\n  &[data-popper-placement^='right'] > ", " {\n    left: -5px;\n    &:after {\n      border-bottom-left-radius: 3px;\n    }\n  }\n"])), Arrow, Arrow, Arrow, Arrow);
 var templateObject_1$D, templateObject_2$k;
@@ -2065,7 +2068,7 @@ var Tooltip = function (_a) {
         React.createElement(CSSTransition, { in: isOpen, timeout: 200, unmountOnExit: true, appear: true },
             React.createElement(BodyAnimationWrapper$1, null,
                 React.createElement(TooltipContainer, __assign({ ref: popperRef, style: styles.popper }, attributes.popper),
-                    React.createElement(Arrow, { ref: setArrowRef, style: styles.arrow }),
+                    React.createElement(Arrow, { type: type, ref: setArrowRef, style: styles.arrow }),
                     React.createElement(Message, { type: type, style: styles.offset }, message))))));
 };
 var Wrapper$6 = styled.div(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));

package/dist/index.js

@@ -1174,22 +1174,25 @@ var DefaultTrigger = function (_a) {
 };
 
 var DropdownImpl = function (props) {
-    var alignRight = props.alignRight, className = props.className, content = props.content, fullWidth = props.fullWidth, maxWidth = props.maxWidth, _a = props.minWidthAsTrigger, minWidthAsTrigger = _a === void 0 ? false : _a, placement = props.placement, renderContent = props.renderContent, renderTrigger = props.renderTrigger, triggerStyles = props.triggerStyles, title = props.title;
-    var _b = React.useState(false), isOpen = _b[0], setIsOpen = _b[1];
+    var alignRight = props.alignRight, className = props.className, content = props.content, fullWidth = props.fullWidth, maxWidth = props.maxWidth, _a = props.minWidthAsTrigger, minWidthAsTrigger = _a === void 0 ? false : _a, placement = props.placement, renderContent = props.renderContent, renderTrigger = props.renderTrigger, triggerStyles = props.triggerStyles, title = props.title, _b = props.forceOpen, forceOpen = _b === void 0 ? false : _b;
+    var _c = React.useState(false), isOpen = _c[0], setIsOpen = _c[1];
     var toggleDropdown = React.useCallback(function (e) {
         setIsOpen(function (isOpen) { return !isOpen; });
         e.stopPropagation();
     }, []);
     var closeDropdown = React.useCallback(function () { return setIsOpen(false); }, []);
+    React.useEffect(function () {
+        setIsOpen(forceOpen);
+    }, [forceOpen]);
     // Close Dropdown on click outside
     var wrapperRef = React.useRef(null);
     reactUse.useClickAway(wrapperRef, function () { return closeDropdown(); });
     var popperRef = React.useRef(null);
     var buttonRef = React.useRef(null);
-    var _c = React.useState(null), arrowRef = _c[0], setArrowRef = _c[1];
+    var _d = React.useState(null), arrowRef = _d[0], setArrowRef = _d[1];
     // alignRight left for compatibility
     var popperPlacement = placement ? placement : alignRight ? 'bottom-end' : 'bottom-start';
-    var _d = reactPopper.usePopper(buttonRef.current, popperRef.current, {
+    var _e = reactPopper.usePopper(buttonRef.current, popperRef.current, {
         placement: popperPlacement,
         strategy: 'fixed',
         modifiers: React.useMemo(function () { return [
@@ -1222,12 +1225,12 @@ var DropdownImpl = function (props) {
                 },
             },
         ]; }, [minWidthAsTrigger, arrowRef]),
-    }), attributes = _d.attributes, styles = _d.styles;
+    }), attributes = _e.attributes, styles = _e.styles;
     return (React__default.createElement(Wrapper$3, { className: className, ref: wrapperRef },
         React__default.createElement("div", { style: triggerStyles, ref: buttonRef, onClick: toggleDropdown },
             title && React__default.createElement(DefaultTrigger, { title: title }),
             !title && renderTrigger && renderTrigger()),
-        React__default.createElement(reactTransitionGroup.CSSTransition, { in: isOpen, timeout: 200, unmountOnExit: true, appear: true },
+        React__default.createElement(reactTransitionGroup.CSSTransition, { in: forceOpen || isOpen, timeout: 200, unmountOnExit: true, appear: true },
             React__default.createElement(BodyAnimationWrapper, null,
                 React__default.createElement(PopperContainer, __assign({ ref: popperRef, style: styles.popper }, attributes.popper),
                     React__default.createElement("div", { ref: setArrowRef, style: styles.arrow }),
@@ -2006,9 +2009,9 @@ var tagPalette = {
     },
 };
 
-var Arrow = styled__default.div(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n  position: absolute;\n  width: 10px;\n  height: 10px;\n\n  &:after {\n    content: '';\n    position: absolute;\n    transform: rotate(45deg);\n    width: 10px;\n    height: 10px;\n    background-color: ", ";\n    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);\n  }\n"], ["\n  position: absolute;\n  width: 10px;\n  height: 10px;\n\n  &:after {\n    content: '';\n    position: absolute;\n    transform: rotate(45deg);\n    width: 10px;\n    height: 10px;\n    background-color: ", ";\n    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);\n  }\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.palette.grey[900];
+var Arrow = styled__default.div(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n  position: absolute;\n  width: 10px;\n  height: 10px;\n\n  &:after {\n    content: '';\n    position: absolute;\n    transform: rotate(45deg);\n    width: 10px;\n    height: 10px;\n    background-color: ", ";\n    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);\n    clip-path: polygon(100% 0, 0% 100%, 100% 100%);\n  }\n"], ["\n  position: absolute;\n  width: 10px;\n  height: 10px;\n\n  &:after {\n    content: '';\n    position: absolute;\n    transform: rotate(45deg);\n    width: 10px;\n    height: 10px;\n    background-color: ", ";\n    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);\n    clip-path: polygon(100% 0, 0% 100%, 100% 100%);\n  }\n"])), function (_a) {
+    var theme = _a.theme, type = _a.type;
+    return theme.components.tooltip[type].background;
 });
 var arrowStyle = styled.css(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n  &[data-popper-placement^='top'] > ", " {\n    bottom: -5px;\n    &:after {\n      border-bottom-right-radius: 3px;\n    }\n  }\n\n  &[data-popper-placement^='bottom'] > ", " {\n    top: -5px;\n    &:after {\n      border-top-left-radius: 3px;\n    }\n  }\n\n  &[data-popper-placement^='left'] > ", " {\n    right: -5px;\n    &:after {\n      border-top-right-radius: 3px;\n    }\n  }\n\n  &[data-popper-placement^='right'] > ", " {\n    left: -5px;\n    &:after {\n      border-bottom-left-radius: 3px;\n    }\n  }\n"], ["\n  &[data-popper-placement^='top'] > ", " {\n    bottom: -5px;\n    &:after {\n      border-bottom-right-radius: 3px;\n    }\n  }\n\n  &[data-popper-placement^='bottom'] > ", " {\n    top: -5px;\n    &:after {\n      border-top-left-radius: 3px;\n    }\n  }\n\n  &[data-popper-placement^='left'] > ", " {\n    right: -5px;\n    &:after {\n      border-top-right-radius: 3px;\n    }\n  }\n\n  &[data-popper-placement^='right'] > ", " {\n    left: -5px;\n    &:after {\n      border-bottom-left-radius: 3px;\n    }\n  }\n"])), Arrow, Arrow, Arrow, Arrow);
 var templateObject_1$D, templateObject_2$k;
@@ -2069,7 +2072,7 @@ var Tooltip = function (_a) {
         React__default.createElement(reactTransitionGroup.CSSTransition, { in: isOpen, timeout: 200, unmountOnExit: true, appear: true },
             React__default.createElement(BodyAnimationWrapper$1, null,
                 React__default.createElement(TooltipContainer, __assign({ ref: popperRef, style: styles.popper }, attributes.popper),
-                    React__default.createElement(Arrow, { ref: setArrowRef, style: styles.arrow }),
+                    React__default.createElement(Arrow, { type: type, ref: setArrowRef, style: styles.arrow }),
                     React__default.createElement(Message, { type: type, style: styles.offset }, message))))));
 };
 var Wrapper$6 = styled__default.div(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fattureincloud/fic-design-system",
-  "version": "0.3.16-alpha.0",
+  "version": "0.3.16",
   "description": "Fatture in Cloud and Danea design system",
   "repository": "git@bitbucket.org:fattureincloud/design-system.git",
   "license": "MIT",