@dspworkplace/ui 1.5.33 → 1.5.36

package/dist/index.es.js

@@ -1,5 +1,5 @@
-import React, { forwardRef, useState, Fragment, useCallback, useEffect, useRef } from 'react';
-import styled from 'styled-components';
+import React, { forwardRef, useState, Fragment, useCallback, useEffect, useRef, Children } from 'react';
+import styled, { keyframes } from 'styled-components';
 
 var defaultRadius = '2px';
 var colors = {
@@ -6110,6 +6110,175 @@ var ButtonGroup = function ButtonGroup(_ref) {
   }));
 };
 
+function _templateObject4$9() {
+  var data = taggedTemplateLiteral(["\n    position:relative;\n\n    &:hover > ", " > * {\n        animation-name: ", ";\n        animation-duration: 300ms;\n        animation-fill-mode: both;\n        animation-timing-function: ease-in-out;\n    }\n"]);
+
+  _templateObject4$9 = function _templateObject4() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject3$9() {
+  var data = taggedTemplateLiteral(["\n    cursor:pointer;\n    background:white;\n    border-radius:100%;\n    padding:8px;\n    display:flex;\n    justify-content:center;\n    border:1px solid rgb(204, 204, 204);\n"]);
+
+  _templateObject3$9 = function _templateObject3() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject2$b() {
+  var data = taggedTemplateLiteral(["\n    position:absolute;\n    height:100%;\n    padding:12px;\n    white-space: nowrap;\n    align-items:center;\n    gap: ", "\n    display:flex;\n    visibility: hidden;\n\n    &:hover {\n        visibility: visible;\n    }\n\n    ", "\n\n    ", "\n\n    ", "\n\n    ", "\n\n    ", "\n"]);
+
+  _templateObject2$b = function _templateObject2() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject$h() {
+  var data = taggedTemplateLiteral(["\n    0% {\n        opacity:0;\n        visibility: hidden;\n        transform: scale(0.6) translateY(-8px);\n    }\n\n    100% {\n        visibility: visible;\n        opacity:1;\n    }\n"]);
+
+  _templateObject$h = function _templateObject() {
+    return data;
+  };
+
+  return data;
+}
+var listAnimation = keyframes(_templateObject$h());
+var POSITION_LIST = '100%';
+var POSITION_LIST_DISTANCE = '10%';
+
+var generateAnimationDelay = function generateAnimationDelay(n, direction) {
+  var style = '';
+
+  if (['left', 'top'].includes(direction)) {
+    var delayNumber = 1;
+
+    for (var i = n; i >= 1; --i) {
+      style += "\n            > :nth-child(".concat(i, ") {\n                animation-delay: ").concat(delayNumber * 90, "ms;\n            }\n        ");
+      delayNumber++;
+    }
+  } else {
+    for (var _i = 1; _i <= n; ++_i) {
+      style += "\n            > :nth-child(".concat(_i, ") {\n                animation-delay: ").concat(_i * 90, "ms;\n            }\n        ");
+    }
+  }
+
+  return style;
+};
+
+var ListContent = styled.div(_templateObject2$b(), function (props) {
+  return props.spaceBetween;
+}, function (props) {
+  return generateAnimationDelay(props.childrenQuantity, props.direction);
+}, function (props) {
+  return props.direction === 'right' || props.direction === 'auto' && "\n        flex-direction:row;\n        top:0;\n        bottom:0;\n        left:".concat(POSITION_LIST, ";\n        padding-left:").concat(POSITION_LIST_DISTANCE, ";\n    ");
+}, function (props) {
+  return props.direction === 'left' && "\n        flex-direction:row;\n        top:0;\n        bottom:0;\n        right:".concat(POSITION_LIST, ";\n        padding-right:").concat(POSITION_LIST_DISTANCE, ";\n    ");
+}, function (props) {
+  return props.direction === 'top' && "\n        flex-direction:column;\n        justify-content:end;\n        bottom:".concat(POSITION_LIST, ";\n        right:0;\n        left:0;\n        padding-top:").concat(POSITION_LIST_DISTANCE, ";\n    ");
+}, function (props) {
+  return props.directiondirection === 'bottom' && "\n        flex-direction:column;\n        justify-content:start;\n        top:".concat(POSITION_LIST, ";\n        bottom:0;\n        right:0;\n        left:0;\n        padding-top:").concat(POSITION_LIST_DISTANCE, ";\n    ");
+});
+var PreviewContent = styled.div(_templateObject3$9());
+var Container$1 = styled.div(_templateObject4$9(), ListContent, listAnimation);
+
+var ButtonIcon = function ButtonIcon(_ref) {
+  var children = _ref.children,
+      _ref$event = _ref.event;
+
+  if (children.length > 2) {
+    throw 'This component only accepts a Button.Preview and Button.List component';
+  }
+
+  var _children = slicedToArray(children, 2),
+      Preview = _children[0],
+      List = _children[1];
+
+  if (Preview.type.name !== 'ButtonPreview') {
+    throw "The first component should be ButtonIcon.Preview, but got ".concat(Preview.type.name);
+  }
+
+  if (List.type.name !== 'ButtonList') {
+    throw "The first component should be ButtonIcon.List, but got ".concat(Preview.type.name);
+  }
+
+  return /*#__PURE__*/React.createElement(Container$1, null, Preview, List);
+};
+
+var ButtonPreview = function ButtonPreview(_ref2) {
+  var children = _ref2.children;
+  var previewRef = useRef();
+  return /*#__PURE__*/React.createElement(PreviewContent, {
+    ref: previewRef
+  }, children);
+};
+
+ButtonIcon.Preview = ButtonPreview;
+var DIRECTIONS = ['bottom', 'left', 'right', 'top', 'auto'];
+
+var ButtonList = function ButtonList(_ref3) {
+  var children = _ref3.children,
+      direction = _ref3.direction,
+      spaceBetween = _ref3.spaceBetween;
+
+  var _useState = useState(direction),
+      _useState2 = slicedToArray(_useState, 2),
+      dir = _useState2[0],
+      setDir = _useState2[1];
+
+  if (!DIRECTIONS.includes(dir)) {
+    throw "Invalid direction argument on component ButtonIcon.List, expect ".concat(DIRECTIONS.join(', '));
+  }
+
+  if (['left', 'top'].includes(dir)) {
+    children = Children.toArray(children).reverse();
+  }
+
+  var contentRef = useRef();
+  useEffect(function () {
+    if (!(contentRef === null || contentRef === void 0 ? void 0 : contentRef.current)) return;
+    if (dir !== 'auto') return;
+    var bounds = contentRef.current.getBoundingClientRect();
+    var windowWidth = window.innerWidth;
+    var windowHeight = window.innerHeight;
+
+    if (bounds.right > windowWidth) {
+      setDir('left');
+      return;
+    } else {
+      return;
+    }
+
+    if (bounds.left < 0) {
+      setDir('bottom');
+      return;
+    }
+
+    if (bounds.bottom > windowHeight) {
+      setDir('top');
+      return;
+    }
+  }, [contentRef]);
+  return /*#__PURE__*/React.createElement(ListContent, {
+    ref: contentRef,
+    direction: dir,
+    spaceBetween: spaceBetween,
+    childrenQuantity: children.length
+  }, children);
+};
+
+ButtonList.defaultProps = {
+  direction: 'auto',
+  spaceBetween: '8px'
+};
+ButtonIcon.List = ButtonList;
+
 var _ref$1t = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
   id: "clip-path"
 }, /*#__PURE__*/React.createElement("path", {
@@ -6205,51 +6374,51 @@ function _templateObject5$7() {
   return data;
 }
 
-function _templateObject4$9() {
+function _templateObject4$a() {
   var data = taggedTemplateLiteral(["\n    font-size: ", ";\n    line-height: ", ";\n"]);
 
-  _templateObject4$9 = function _templateObject4() {
+  _templateObject4$a = function _templateObject4() {
     return data;
   };
 
   return data;
 }
 
-function _templateObject3$9() {
+function _templateObject3$a() {
   var data = taggedTemplateLiteral(["\n    font-size: ", ";\n    line-height: ", ";\n"]);
 
-  _templateObject3$9 = function _templateObject3() {
+  _templateObject3$a = function _templateObject3() {
     return data;
   };
 
   return data;
 }
 
-function _templateObject2$b() {
+function _templateObject2$c() {
   var data = taggedTemplateLiteral(["\n    font-family: ", ";\n    font-weight: normal;\n    font-size: ", ";\n    line-height: ", ";\n"]);
 
-  _templateObject2$b = function _templateObject2() {
+  _templateObject2$c = function _templateObject2() {
     return data;
   };
 
   return data;
 }
 
-function _templateObject$h() {
+function _templateObject$i() {
   var data = taggedTemplateLiteral(["\n    padding: 7px;\n    border-radius: ", ";\n    border-width:1px;\n    border-style:solid;\n    display:flex;\n    align-items:center;\n    position:relative;\n\n    ", "\n\n    svg {\n        margin-right: 8px;\n        display: block;\n    }\n"]);
 
-  _templateObject$h = function _templateObject() {
+  _templateObject$i = function _templateObject() {
     return data;
   };
 
   return data;
 }
-var Div = styled.div(_templateObject$h(), theme.defaultRadius, function (props) {
+var Div = styled.div(_templateObject$i(), theme.defaultRadius, function (props) {
   return props.useClose && "\n    padding-right: 32px;\n    ";
 });
-var Title$2 = styled.h5(_templateObject2$b(), theme.font.main, theme.font.medium.size, theme.font.big.lineHeight);
-var Content = styled.p(_templateObject3$9(), theme.font.extraSmall.size, theme.font.small.lineHeight);
-var SmallContent = styled(Content)(_templateObject4$9(), theme.font.small.size, theme.font.small.lineHeight);
+var Title$2 = styled.h5(_templateObject2$c(), theme.font.main, theme.font.medium.size, theme.font.big.lineHeight);
+var Content = styled.p(_templateObject3$a(), theme.font.extraSmall.size, theme.font.small.lineHeight);
+var SmallContent = styled(Content)(_templateObject4$a(), theme.font.small.size, theme.font.small.lineHeight);
 var Close = styled.button.attrs(function (props) {
   return {
     type: 'button'
@@ -6335,5 +6504,5 @@ var index = {
   Error: AlertError
 };
 
-export { theme as Theme, Exported as Button, Dropdown$1 as ButtonDropdown, ButtonGroup, Form, Input, Password, CheckBox, RadioBox, Dropdown, CustomDropdown, Tag as TagInput, InputColor, Uploader, Toggle, TimePicker, DropUploader, Title, SubTitle, ThirdTitle, Text, index as Alert, Spacer, Icons as Icon, logo as Logo, dspwLoading as Loading };
+export { theme as Theme, ButtonIcon, Exported as Button, Dropdown$1 as ButtonDropdown, ButtonGroup, Form, Input, Password, CheckBox, RadioBox, Dropdown, CustomDropdown, Tag as TagInput, InputColor, Uploader, Toggle, TimePicker, DropUploader, Title, SubTitle, ThirdTitle, Text, index as Alert, Spacer, Icons as Icon, logo as Logo, dspwLoading as Loading };
 //# sourceMappingURL=index.es.js.map