@ultraviolet/plus 0.10.6 → 0.11.1

package/dist/src/components/Navigation/NavigationContent.js

@@ -0,0 +1,230 @@
+import _styled from '@emotion/styled/base';
+import { Tooltip, Button, Stack } from '@ultraviolet/ui';
+import { useRef, useCallback, useState, useEffect } from 'react';
+import { useNavigation } from './NavigationProvider.js';
+import { ANIMATION_DURATION, NAVIGATION_MAX_WIDTH, NAVIGATION_MIN_WIDTH, NAVIGATION_COLLASPED_WIDTH } from './constants.js';
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+const StyledNav = /*#__PURE__*/_styled("nav", {
+  target: "esezfu57"
+})("display:flex;flex-direction:row;position:relative;border-right:1px solid ", ({
+  theme
+}) => theme.colors.neutral.borderWeak, ";");
+const Container = /*#__PURE__*/_styled('div', {
+  shouldForwardProp: prop => !['width'].includes(prop),
+  target: "esezfu56"
+})("background:", ({
+  theme
+}) => theme.colors.neutral.background, ";display:flex;flex-direction:column;width:", ({
+  width
+}) => width, "px;&[data-expanded='true'][data-animation='false']{max-width:", NAVIGATION_MAX_WIDTH, "px;min-width:", NAVIGATION_MIN_WIDTH, "px;}&[data-expanded='false']{width:", NAVIGATION_COLLASPED_WIDTH, "px;}&[data-animation='expand']{transition:width ", ANIMATION_DURATION, "ms ease-in-out;width:", ({
+  width
+}) => width, "px;}&[data-animation='collapse']{transition:width ", ANIMATION_DURATION, "ms ease-in-out;width:", NAVIGATION_COLLASPED_WIDTH, "px;}");
+const StickyFooter = /*#__PURE__*/_styled("div", {
+  target: "esezfu55"
+})("display:flex;width:100%;background:", ({
+  theme
+}) => theme.colors.neutral.background, ";border-top:1px solid ", ({
+  theme
+}) => theme.colors.neutral.borderWeak, ";padding:", ({
+  theme
+}) => `${theme.space['1']} ${theme.space['2']}`, ";transition:justify-content ", ANIMATION_DURATION, "ms ease-in-out;box-shadow:", ({
+  theme
+}) => theme.shadows.defaultShadow, ";transition:box-shadow 230ms ease-in-out;justify-content:flex-end;&[data-has-overflow-style='false']{box-shadow:none;border:none;}");
+const Header = /*#__PURE__*/_styled("div", {
+  target: "esezfu54"
+})("background:", ({
+  theme
+}) => theme.colors.neutral.background, ";");
+const LogoContainer = /*#__PURE__*/_styled(Stack, {
+  target: "esezfu53"
+})("margin:", ({
+  theme
+}) => `${theme.space['3']} ${theme.space['3']} ${theme.space['2']} ${theme.space['3']}`, ";max-width:220px;height:22px;");
+const ContentContainer = /*#__PURE__*/_styled("div", {
+  target: "esezfu52"
+})(process.env.NODE_ENV === "production" ? {
+  name: "12is9id",
+  styles: "overflow:hidden;display:flex;flex-direction:column;flex-grow:1"
+} : {
+  name: "12is9id",
+  styles: "overflow:hidden;display:flex;flex-direction:column;flex-grow:1",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const Content = /*#__PURE__*/_styled(Stack, {
+  target: "esezfu51"
+})("overflow-y:auto;overflow-x:hidden;flex-grow:1;&[data-is-expanded='false']{padding:", ({
+  theme
+}) => theme.space['2'], " 0;}&[data-is-expanded='true'],&[data-animation='expand']{padding:", ({
+  theme
+}) => theme.space['2'], ";}");
+const Slider = /*#__PURE__*/_styled("div", {
+  target: "esezfu50"
+})("background:transparent;position:absolute;top:0;bottom:0;right:0;width:8px;cursor:col-resize;border-right:2px solid transparent;display:flex;&:hover{border-color:", ({
+  theme
+}) => theme.colors.primary.border, ";}");
+const NavigationContent = ({
+  children,
+  logo,
+  onClickExpand,
+  width,
+  onWidthResize,
+  className
+}) => {
+  const sliderRef = useRef(null);
+  const navigationRef = useRef(null);
+  const contentRef = useRef(null);
+  const isScrollAtBottom = useCallback(() => {
+    if (contentRef.current) {
+      if (contentRef.current.scrollTop + contentRef.current.offsetHeight >= contentRef.current.scrollHeight) {
+        return false;
+      }
+    }
+    return true;
+  }, []);
+  const [footerHasOverflowStyle, setFooterHasOverflowStyle] = useState(isScrollAtBottom());
+
+  // This is for detecting if there is scroll on the content and set the shadow on the footer
+  useEffect(() => {
+    const scroll = () => {
+      const hasOverflow = isScrollAtBottom();
+      if (footerHasOverflowStyle !== hasOverflow) {
+        setFooterHasOverflowStyle(hasOverflow);
+      }
+    };
+    if (contentRef.current) {
+      contentRef.current.addEventListener('scroll', scroll);
+    }
+    return () => {
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      contentRef.current?.removeEventListener('scroll', scroll);
+    };
+  }, [footerHasOverflowStyle, isScrollAtBottom]);
+
+  // This will set the shadow on the footer when the component is mounted
+  useEffect(() => {
+    setFooterHasOverflowStyle(isScrollAtBottom());
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [contentRef.current]);
+  const {
+    expanded,
+    setExpanded,
+    animation,
+    setAnimation,
+    locales
+  } = useNavigation();
+
+  // This function will be triggered when expand/collapse button is clicked
+  const toggleExpand = useCallback(() => {
+    onClickExpand?.(!expanded);
+    if (navigationRef.current) {
+      navigationRef.current.style.width = '';
+    }
+    setAnimation(expanded ? 'collapse' : 'expand');
+    setTimeout(() => {
+      setExpanded();
+      setFooterHasOverflowStyle(isScrollAtBottom());
+      setAnimation(false);
+    }, ANIMATION_DURATION);
+  }, [expanded, isScrollAtBottom, onClickExpand, setAnimation, setExpanded]);
+
+  // It will handle the resize of the navigation when the user drag the vertical bar
+  useEffect(() => {
+    let prevX;
+    let navRect;
+    let shouldCollapseOnMouseUp = false;
+    let shouldExpandOnMouseUp = false;
+    const mouseMove = event => {
+      if (prevX !== undefined) {
+        const navWidth = navRect?.width ?? 0;
+        const newWidth = navWidth + (event.clientX - prevX);
+        if (navigationRef.current && expanded) {
+          navigationRef.current.style.width = `${newWidth}px`;
+        }
+        if (newWidth <= NAVIGATION_MIN_WIDTH) {
+          shouldCollapseOnMouseUp = true;
+        } else {
+          shouldCollapseOnMouseUp = false;
+        }
+        if (newWidth >= NAVIGATION_COLLASPED_WIDTH && !expanded) {
+          shouldExpandOnMouseUp = true;
+        } else {
+          shouldExpandOnMouseUp = false;
+        }
+      }
+    };
+    const mousedown = event => {
+      document.body.style.pointerEvents = 'none';
+      document.body.style.userSelect = 'none';
+      prevX = event.clientX;
+      navRect = navigationRef.current?.getBoundingClientRect();
+      const mouseup = () => {
+        if (shouldCollapseOnMouseUp || shouldExpandOnMouseUp) {
+          toggleExpand();
+        }
+        if (navigationRef.current) {
+          if (!shouldCollapseOnMouseUp && !shouldExpandOnMouseUp) {
+            onWidthResize?.(navigationRef.current.offsetWidth);
+          }
+          if (!expanded) {
+            navigationRef.current.style.width = '';
+          }
+        }
+        document.removeEventListener('mousemove', mouseMove);
+        window.removeEventListener('mouseup', mouseup);
+        document.body.style.pointerEvents = '';
+        document.body.style.userSelect = '';
+      };
+      document.addEventListener('mousemove', mouseMove);
+      window.addEventListener('mouseup', mouseup);
+    };
+    sliderRef.current?.addEventListener('mousedown', mousedown);
+    return () => {
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      sliderRef.current?.removeEventListener('mousedown', mousedown);
+    };
+  }, [expanded, onWidthResize, toggleExpand]);
+  return jsxs(StyledNav, {
+    className: className,
+    children: [jsxs(Container, {
+      ref: navigationRef,
+      "data-animation": animation,
+      "data-expanded": expanded,
+      width: width,
+      children: [jsx(Header, {
+        children: jsx(LogoContainer, {
+          justifyContent: !expanded ? 'center' : undefined,
+          alignItems: "start",
+          children: typeof logo === 'function' ? logo(animation ? false : expanded) : logo
+        })
+      }), jsxs(ContentContainer, {
+        children: [jsx(Content, {
+          ref: contentRef,
+          gap: 0.25,
+          "data-is-expanded": expanded,
+          "data-animation": animation,
+          children: children
+        }), jsx(StickyFooter, {
+          "data-has-overflow-style": footerHasOverflowStyle,
+          children: jsx(Tooltip, {
+            text: expanded ? locales['navigation.collapse.button'] : locales['navigation.expand.button'],
+            placement: "right",
+            children: jsx(Button, {
+              variant: "ghost",
+              sentiment: "neutral",
+              size: "small",
+              icon: expanded ? 'arrow-left-double' : 'arrow-right-double',
+              onClick: toggleExpand
+            })
+          })
+        })]
+      })]
+    }), jsx(Slider, {
+      ref: sliderRef
+    })]
+  });
+};
+
+export { NavigationContent };

package/dist/src/components/Navigation/NavigationProvider.js

@@ -0,0 +1,55 @@
+import { useReducer, useState, useCallback, useMemo, createContext, useContext } from 'react';
+import NavigationLocales from './locales/en.js';
+import { jsx } from '@emotion/react/jsx-runtime';
+
+const NavigationContext = /*#__PURE__*/createContext({
+  expanded: true,
+  setExpanded: () => {},
+  animation: false,
+  setAnimation: () => {},
+  locales: NavigationLocales,
+  pinItem: () => {},
+  unpinItem: () => {},
+  pinnedItems: [],
+  pinLimit: 7
+});
+const useNavigation = () => useContext(NavigationContext);
+const NavigationProvider = ({
+  children,
+  pinnedFeature,
+  onClickPinUnpin,
+  initialPinned,
+  initialExpanded,
+  locales,
+  pinLimit
+}) => {
+  const [expanded, setExpanded] = useReducer(state => !state, initialExpanded);
+  const [pinnedItems, setPinnedItems] = useState(initialPinned ?? []);
+  const [animation, setAnimation] = useState(false);
+  const pinItem = useCallback(item => {
+    setPinnedItems([...pinnedItems, item]);
+    onClickPinUnpin?.(pinnedItems);
+  }, [onClickPinUnpin, pinnedItems]);
+  const unpinItem = useCallback(item => {
+    setPinnedItems(pinnedItems.filter(localItem => localItem !== item));
+    onClickPinUnpin?.(pinnedItems);
+  }, [onClickPinUnpin, pinnedItems]);
+  const value = useMemo(() => ({
+    expanded,
+    setExpanded,
+    pinnedItems,
+    pinItem,
+    unpinItem,
+    pinnedFeature,
+    locales,
+    pinLimit,
+    animation,
+    setAnimation
+  }), [expanded, pinnedItems, pinItem, unpinItem, pinnedFeature, locales, pinLimit, animation]);
+  return jsx(NavigationContext.Provider, {
+    value: value,
+    children: children
+  });
+};
+
+export { NavigationContext, NavigationProvider, useNavigation };

package/dist/src/components/Navigation/components/Group.js

@@ -0,0 +1,53 @@
+import _styled from '@emotion/styled/base';
+import { Text, Stack } from '@ultraviolet/ui';
+import { Children } from 'react';
+import { useNavigation } from '../NavigationProvider.js';
+import { ANIMATION_DURATION, groupAnimation } from '../constants.js';
+import { jsx, jsxs } from '@emotion/react/jsx-runtime';
+
+const StyledText = /*#__PURE__*/_styled(Text, {
+  target: "eh4zgrv2"
+})("padding-bottom:", ({
+  theme
+}) => theme.space['1'], ";transition:opacity ", ANIMATION_DURATION, "ms ease-in-out,height ", ANIMATION_DURATION, "ms ease-in-out;height:", ({
+  theme
+}) => `calc(${theme.typography.bodySmallStrong.lineHeight} + ${theme.space['1']})`, ";");
+const StyledStack = /*#__PURE__*/_styled(Stack, {
+  target: "eh4zgrv1"
+})("padding-top:", ({
+  theme
+}) => theme.space['1'], ";");
+const Container = /*#__PURE__*/_styled("div", {
+  target: "eh4zgrv0"
+})("&[data-animation='expand']{", StyledText, "{animation:", groupAnimation, " ", ANIMATION_DURATION, "ms ease-in-out;}}&[data-animation='collapse']{", StyledText, "{animation:", groupAnimation, " ", ANIMATION_DURATION, "ms ease-in-out reverse;}}");
+const Group = ({
+  children,
+  label
+}) => {
+  const context = useNavigation();
+  if (!context) {
+    throw new Error('Navigation.Group can only be used inside a Navigation');
+  }
+  const {
+    expanded,
+    animation
+  } = context;
+  if (Children.count(children) > 0) {
+    return jsx(Container, {
+      "data-animation": animation,
+      children: jsxs(StyledStack, {
+        direction: "column",
+        children: [expanded || animation === 'expand' ? jsx(StyledText, {
+          as: "span",
+          variant: "bodySmallStrong",
+          sentiment: "neutral",
+          prominence: "weak",
+          children: label
+        }) : null, children]
+      })
+    });
+  }
+  return null;
+};
+
+export { Group };