@websolutespa/bom-mixer-ui 1.7.4 → 1.7.6

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @websolutespa/bom-mixer-ui
 
+## 1.7.6
+
+### Patch Changes
+
+- Added: SvgAnimationStrategy
+- Updated dependencies
+  - @websolutespa/bom-mixer-hooks@1.7.3
+
+## 1.7.5
+
+### Patch Changes
+
+- Updating: dependencies
+- Updated dependencies
+  - @websolutespa/bom-mixer-models@1.7.2
+  - @websolutespa/bom-mixer-forms@0.3.1
+  - @websolutespa/bom-mixer-hooks@1.7.2
+  - @websolutespa/bom-mixer-icons@0.2.3
+  - @websolutespa/bom-mixer-store@1.7.3
+  - @websolutespa/bom-core@1.7.3
+
 ## 1.7.4
 
 ### Patch Changes

package/dist/cjs/index.js

@@ -1604,10 +1604,57 @@ const Breadcrumb = bomCore.withSchema(BreadcrumbBase, {
   displayName: 'Breadcrumb'
 });
 
+exports.BreakpointPlacement = void 0;
+(function (BreakpointPlacement) {
+  BreakpointPlacement["TopLeft"] = "topLeft";
+  BreakpointPlacement["TopRight"] = "topRight";
+  BreakpointPlacement["BottomRight"] = "bottomRight";
+  BreakpointPlacement["BottomLeft"] = "bottomLeft";
+})(exports.BreakpointPlacement || (exports.BreakpointPlacement = {}));
+const getPlacement = function (placement) {
+  if (placement === void 0) {
+    placement = exports.BreakpointPlacement.BottomLeft;
+  }
+  switch (placement) {
+    case exports.BreakpointPlacement.TopLeft:
+      {
+        return styled.css`
+      top: 6px;
+      left: 6px;
+    `;
+      }
+    case exports.BreakpointPlacement.TopRight:
+      {
+        return styled.css`
+      top: 6px;
+      right: 6px;
+    `;
+      }
+    case exports.BreakpointPlacement.BottomRight:
+      {
+        return styled.css`
+      bottom: 6px;
+      right: 6px;
+    `;
+      }
+    case exports.BreakpointPlacement.BottomLeft:
+      {
+        return styled.css`
+      bottom: 6px;
+      left: 6px;
+    `;
+      }
+    default:
+      {
+        return styled.css`
+      top: 6px;
+      left: 6px;
+    `;
+      }
+  }
+};
 const StyledBreakpoint = styled__default.default(framerMotion.motion.div)`
   position: fixed;
-  top: 6px;
-  left: 6px;
   padding: 0.3em 0.8em;
   background: var(--color-warning-500);
   color: var(--color-warning-900);
@@ -1618,6 +1665,7 @@ const StyledBreakpoint = styled__default.default(framerMotion.motion.div)`
   font-size: 0.8rem;
   line-height: 1;
   pointer-events: none;
+  ${props => getPlacement(props.placement)}
   ${props => getCssResponsive(props)}
 `;
 const Breakpoint = props => {
@@ -1958,23 +2006,15 @@ const Divider = _a => {
   }));
 };
 
-const defaultProps$8 = {
-  visible: false,
-  enterTime: 60,
-  leaveTime: 60,
-  clearTime: 60,
-  className: '',
-  name: 'transition'
-};
 const Transition = _a => {
   var {
       children,
-      className,
-      visible,
-      enterTime,
-      leaveTime,
-      clearTime,
-      name
+      className = '',
+      visible = false,
+      enterTime = 60,
+      leaveTime = 60,
+      clearTime = 60,
+      name = 'transition'
     } = _a,
     props = __rest(_a, ["children", "className", "visible", "enterTime", "leaveTime", "clearTime", "name"]);
   const [classes, setClasses] = React.useState('');
@@ -2011,17 +2051,8 @@ const Transition = _a => {
     className: `${children.props.className} ${className} ${classes}`
   }));
 };
-Transition.defaultProps = defaultProps$8;
 Transition.displayName = 'Transition';
 
-const defaultProps$7 = {
-  onClick: () => {},
-  visible: false,
-  onContentClick: () => {},
-  backdropClassName: '',
-  positionClassName: '',
-  layerClassName: ''
-};
 const StyledBackdrop = styled__default.default.div`
   box-sizing: border-box;
   position: fixed;
@@ -2098,13 +2129,13 @@ const StyledBackdrop = styled__default.default.div`
 const Backdrop = /*#__PURE__*/React__default.default.memo(_a => {
   var {
       children,
-      onClick,
-      visible,
+      onClick = () => {},
+      visible = false,
       width,
-      onContentClick,
-      backdropClassName,
-      layerClassName,
-      positionClassName
+      onContentClick = () => {},
+      backdropClassName = '',
+      layerClassName = '',
+      positionClassName = ''
     } = _a,
     props = __rest(_a, ["children", "onClick", "visible", "width", "onContentClick", "backdropClassName", "layerClassName", "positionClassName"]);
   const [, setIsContentMouseDown, IsContentMouseDownRef] = bomMixerHooks.useCurrentState(false);
@@ -2150,12 +2181,8 @@ const Backdrop = /*#__PURE__*/React__default.default.memo(_a => {
     }))
   });
 });
-Backdrop.defaultProps = defaultProps$7;
 Backdrop.displayName = 'Backdrop';
 
-const defaultProps$6 = {
-  className: ''
-};
 const StyleContent = styled__default.default.div`
   position: relative;
   padding: 2rem 1rem;
@@ -2173,7 +2200,7 @@ const StyleContent = styled__default.default.div`
 `;
 const ModalContent = _a => {
   var {
-      className,
+      className = '',
       children
     } = _a,
     props = __rest(_a, ["className", "children"]);
@@ -2184,12 +2211,8 @@ const ModalContent = _a => {
     children: children
   }));
 };
-ModalContent.defaultProps = defaultProps$6;
 ModalContent.displayName = 'ModalContent';
 
-const defaultProps$5 = {
-  className: ''
-};
 const StyledSubtitle = styled__default.default.div`
   font-weight: normal;
   display: inline-block;
@@ -2203,7 +2226,7 @@ const StyledSubtitle = styled__default.default.div`
 `;
 const ModalSubtitle = _a => {
   var {
-      className,
+      className = '',
       children
     } = _a,
     props = __rest(_a, ["className", "children"]);
@@ -2213,7 +2236,6 @@ const ModalSubtitle = _a => {
     children: children
   }));
 };
-ModalSubtitle.defaultProps = defaultProps$5;
 ModalSubtitle.displayName = 'ModalSubtitle';
 
 const StyledTitle = styled__default.default.h2`
@@ -2267,10 +2289,6 @@ const getDrawerTransform = placement => {
   return translates[placement];
 };
 
-const defaultProps$4 = {
-  className: '',
-  visible: false
-};
 const StyledWrapper$1 = styled__default.default.div`
   position: fixed;
   top: 0;
@@ -2350,10 +2368,10 @@ const StyledWrapper$1 = styled__default.default.div`
 `;
 const DrawerWrapper = _a => {
   var {
-      className,
+      className = '',
       children,
-      visible,
-      placement
+      visible = false,
+      placement = 'right'
     } = _a,
     props = __rest(_a, ["className", "children", "visible", "placement"]);
   const modalContent = React.useRef(null);
@@ -2414,26 +2432,13 @@ const DrawerWrapper = _a => {
     }))
   });
 };
-DrawerWrapper.defaultProps = defaultProps$4;
 DrawerWrapper.displayName = 'DrawerWrapper';
 
-const DrawerDefaultProps = {
-  wrapClassName: '',
-  keyboard: true,
-  disableBackdropClick: false,
-  placement: 'right'
-};
 const DrawerBase = _a => {
   var {
-      /*
       wrapClassName = '',
       keyboard = true,
       disableBackdropClick = false,
-      placement = 'right' as DrawerPlacement,
-      */
-      wrapClassName,
-      keyboard,
-      disableBackdropClick,
       visible: customVisible,
       onClose,
       onContentClick,
@@ -2502,10 +2507,9 @@ const DrawerBase = _a => {
 const Drawer = bomCore.withSchema(DrawerBase, {
   Title: ModalTitle,
   Subtitle: ModalSubtitle,
-  Content: ModalContent,
-  displayName: 'Drawer',
-  defaultProps: DrawerDefaultProps
+  Content: ModalContent
 });
+Drawer.displayName = 'Drawer';
 
 const defaultRect$2 = {
   top: -1000,
@@ -4777,11 +4781,6 @@ function useModalContext() {
   return React.useContext(ModalContext);
 }
 
-const defaultProps$3 = {
-  className: '',
-  passive: false,
-  disabled: false
-};
 const StyledButton$1 = styled__default.default(Button)`
   /*
   font-size: 0.75rem;
@@ -4808,11 +4807,11 @@ const StyledButton$1 = styled__default.default(Button)`
 `;
 const ModalButton = /*#__PURE__*/React__default.default.forwardRef((_a, ref) => {
   var {
-      className,
+      className = '',
       children,
       onClick,
-      passive,
-      disabled
+      passive = false,
+      disabled = false
     } = _a,
     props = __rest(_a, ["className", "children", "onClick", "passive", "disabled"]);
   const btnRef = React.useRef(null);
@@ -4836,7 +4835,7 @@ const ModalButton = /*#__PURE__*/React__default.default.forwardRef((_a, ref) =>
   const color = useMemo(() => {
     return passive ? (theme as any).color.primary500 : (theme as any).color.neutral900;
   }, [(theme as any).color, passive, disabled]);
-   const bgColor = useMemo(() => {
+     const bgColor = useMemo(() => {
     return disabled ? (theme as any).color.primary100 : (theme as any).color.neutral100;
   }, [(theme as any).color, disabled]);
   */
@@ -4855,14 +4854,8 @@ const ModalButton = /*#__PURE__*/React__default.default.forwardRef((_a, ref) =>
     children: children
   }));
 });
-ModalButton.defaultProps = defaultProps$3;
 ModalButton.displayName = 'ModalButton';
 
-const defaultProps$2 = {
-  className: '',
-  passive: false,
-  disabled: false
-};
 const StyledButton = styled__default.default(Button)`
   position: absolute;
   top: 0.5rem;
@@ -4871,11 +4864,11 @@ const StyledButton = styled__default.default(Button)`
 `;
 const ModalClose = /*#__PURE__*/React__default.default.forwardRef((_a, ref) => {
   var {
-      className,
+      className = '',
       children,
       onClick,
-      passive,
-      disabled
+      passive = false,
+      disabled = false
     } = _a,
     props = __rest(_a, ["className", "children", "onClick", "passive", "disabled"]);
   const btnRef = React.useRef(null);
@@ -4907,7 +4900,6 @@ const ModalClose = /*#__PURE__*/React__default.default.forwardRef((_a, ref) => {
     children: jsxRuntime.jsx(bomMixerIcons.IconX, {})
   }));
 });
-ModalClose.defaultProps = defaultProps$2;
 ModalClose.displayName = 'ModalClose';
 
 const StyledFooter = styled__default.default(ButtonGroup)`
@@ -4949,10 +4941,6 @@ const ModalFooter_ = _a => {
 ModalFooter_.displayName = 'ModalFooter';
 const ModalFooter = /*#__PURE__*/React__default.default.memo(ModalFooter_);
 
-const defaultProps$1 = {
-  className: '',
-  visible: false
-};
 const StyledWrapper = styled__default.default.div`
   box-sizing: border-box;
   position: relative;
@@ -5005,11 +4993,11 @@ const StyledWrapper = styled__default.default.div`
 `;
 const ModalWrapper = _a => {
   var {
-      className,
       children,
-      visible
+      className = '',
+      visible = false
     } = _a,
-    props = __rest(_a, ["className", "children", "visible"]);
+    props = __rest(_a, ["children", "className", "visible"]);
   const modalContent = React.useRef(null);
   const tabStart = React.useRef(null);
   const tabEnd = React.useRef(null);
@@ -5066,27 +5054,17 @@ const ModalWrapper = _a => {
     }))
   });
 };
-ModalWrapper.defaultProps = defaultProps$1;
 ModalWrapper.displayName = 'ModalWrapper';
 
-const defaultProps = {
-  width: '26rem',
-  backdropClassName: '',
-  positionClassName: '',
-  layerClassName: '',
-  wrapClassName: '',
-  disableBackdropClick: false,
-  keyboard: true
-};
 const ModalBase = _ref => {
   let {
-    width,
-    backdropClassName,
-    positionClassName,
-    layerClassName,
-    wrapClassName,
-    disableBackdropClick,
-    keyboard,
+    width = '26rem',
+    backdropClassName = '',
+    positionClassName = '',
+    layerClassName = '',
+    wrapClassName = '',
+    disableBackdropClick = false,
+    keyboard = true,
     visible: customVisible,
     onClose,
     children,
@@ -5169,10 +5147,9 @@ const Modal = bomCore.withSchema(ModalBase, {
   Subtitle: ModalSubtitle,
   Content: ModalContent,
   Button: ModalButton,
-  Close: ModalClose,
-  displayName: 'Modal',
-  defaultProps
+  Close: ModalClose
 });
+Modal.displayName = 'Modal';
 
 const MediaGalleryButton = styled__default.default.button`
   border: none;
@@ -6686,10 +6663,19 @@ const Skeleton = _a => {
   }));
 };
 
+const SvgAnimationStrategy = {
+  Default: 'default',
+  Once: 'once',
+  Scroll: 'scroll',
+  Over: 'over',
+  Controlled: 'controlled'
+};
+// export type SvgAnimationComponent<C extends React.ElementType = 'div'> = UIComponentWithRef<C, Props>;
 const StyledSvgAnimation = styled__default.default.div`
   display: flex;
   justify-content: center;
   align-items: center;
+  background: transparent;
   & > div {
     object-fit: contain;
     width: 100%;
@@ -6700,25 +6686,22 @@ const StyledSvgAnimation = styled__default.default.div`
 const SvgAnimation = /*#__PURE__*/React.forwardRef((_a, forwardedRef) => {
   var {
       className,
-      as = 'div',
       href,
       animation,
+      mode = SvgAnimationStrategy.Default,
       loop = false,
       scrollable = false,
       scrollableRef,
       width,
       height
     } = _a,
-    props = __rest(_a, ["className", "as", "href", "animation", "loop", "scrollable", "scrollableRef", "width", "height"]);
+    props = __rest(_a, ["className", "href", "animation", "mode", "loop", "scrollable", "scrollableRef", "width", "height"]);
   if (!href && !animation) {
     throw 'SvgAnimation.error: please submit an animation loader or a href';
   }
-  const elementRef = React.useRef();
-  React.useImperativeHandle(forwardedRef, () => {
-    return elementRef.current;
-  }, [elementRef]);
+  const elementRef = React.useRef(null);
   const isIntersecting = bomMixerHooks.useIntersectionObserver(elementRef, {
-    threshold: 0,
+    threshold: mode === SvgAnimationStrategy.Once ? 0.5 : 0,
     root: null,
     rootMargin: '0px'
   });
@@ -6727,6 +6710,20 @@ const SvgAnimation = /*#__PURE__*/React.forwardRef((_a, forwardedRef) => {
   const [animationData, setAnimationData] = React.useState();
   const [animationPath, setAnimationPath] = React.useState();
   const [animationPosition, setAnimationPosition] = React.useState();
+  React.useImperativeHandle(forwardedRef, () => {
+    return {
+      container: elementRef.current,
+      play: () => {
+        if (!playerRef.current) {
+          return;
+        }
+        // console.log(playerRef.current.currentFrame, playerRef.current.totalFrames, playerRef.current.isPaused);
+        if (playerRef.current.isPaused) {
+          playerRef.current.goToAndPlay(0);
+        }
+      }
+    };
+  }, [elementRef]);
   // load animation on shouldLoad
   React.useEffect(() => {
     if (shouldLoad) {
@@ -6742,17 +6739,27 @@ const SvgAnimation = /*#__PURE__*/React.forwardRef((_a, forwardedRef) => {
   // handle intersection
   React.useEffect(() => {
     if (isIntersecting) {
+      // on enter
       if (!shouldLoad) {
         setShouldLoad(true);
       } else {
-        if (!scrollable && playerRef.current) {
-          // console.log('SvgAnimation.play');
+        if (!playerRef.current) {
+          return;
+        }
+        // console.log(playerRef.current.currentFrame);
+        if (mode === SvgAnimationStrategy.Default) {
+          playerRef.current.goToAndPlay(0);
+        }
+        if (mode === SvgAnimationStrategy.Once && playerRef.current.currentFrame === 0) {
           playerRef.current.goToAndPlay(0);
         }
       }
     } else {
-      if (!scrollable && playerRef.current) {
-        // console.log('SvgAnimation.stop');
+      // on exit
+      if (!playerRef.current) {
+        return;
+      }
+      if (mode === SvgAnimationStrategy.Default) {
         playerRef.current.stop();
       }
     }
@@ -6775,7 +6782,7 @@ const SvgAnimation = /*#__PURE__*/React.forwardRef((_a, forwardedRef) => {
         setAnimationPosition(frame);
       }
     };
-    if (scrollable) {
+    if (mode === SvgAnimationStrategy.Scroll) {
       if (scrollElement) {
         scrollElement.addEventListener('scroll', onScroll, {
           passive: true
@@ -6783,13 +6790,27 @@ const SvgAnimation = /*#__PURE__*/React.forwardRef((_a, forwardedRef) => {
       }
     }
     return () => {
-      if (scrollable && scrollElement) {
+      if (mode === SvgAnimationStrategy.Scroll && scrollElement) {
         scrollElement.removeEventListener('scroll', onScroll);
       }
     };
-  }, [scrollable, scrollableRef]);
+  }, [mode, scrollableRef]);
   const onLoad = () => {
-    if (!scrollable && playerRef.current) {
+    if (!playerRef.current) {
+      return;
+    }
+    if (mode === SvgAnimationStrategy.Default || mode === SvgAnimationStrategy.Once) {
+      playerRef.current.goToAndPlay(0);
+    }
+  };
+  const onMouseOver = event => {
+    if (typeof props.onMouseOver === 'function') {
+      props.onMouseOver(event);
+    }
+    if (!playerRef.current) {
+      return;
+    }
+    if (mode === SvgAnimationStrategy.Over && playerRef.current.isPaused) {
       playerRef.current.goToAndPlay(0);
     }
   };
@@ -6798,9 +6819,9 @@ const SvgAnimation = /*#__PURE__*/React.forwardRef((_a, forwardedRef) => {
   });
   return jsxRuntime.jsxs(StyledSvgAnimation, Object.assign({
     ref: elementRef,
-    className: classNames,
-    as: as
+    className: classNames
   }, props, {
+    onMouseOver: onMouseOver,
     children: [animationData && jsxRuntime.jsx(LottiePlayerLight__default.default, {
       ref: playerRef,
       animationData: animationData,