@ultraviolet/ui 1.0.0

package/dist/src/components/Toggle/index.js

@@ -0,0 +1,192 @@
+import _styled from '@emotion/styled/base';
+import { forwardRef, useState, useId, useCallback, useEffect } from 'react';
+import { Icon } from '../Icon/index.js';
+import { Tooltip } from '../Tooltip/index.js';
+import { jsx, jsxs, Fragment } 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 SIZES = {
+  large: {
+    ball: 16,
+    height: 24,
+    width: 48
+  },
+  small: {
+    ball: 12,
+    height: 20,
+    width: 40
+  }
+};
+const StyledToggle = /*#__PURE__*/_styled("div", {
+  target: "e1wstm612"
+})("box-sizing:content-box;outline:none;overflow:hidden;display:flex;align-items:center;border:none;border-radius:", _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.radii.xlarge;
+}, ";position:relative;transition:all 300ms;background-color:", _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.colors.neutral.textWeak;
+}, ";width:", _ref3 => {
+  let {
+    size
+  } = _ref3;
+  return SIZES[size].width;
+}, "px;height:", _ref4 => {
+  let {
+    size
+  } = _ref4;
+  return SIZES[size].height;
+}, "px;&:after{content:'';position:absolute;top:", _ref5 => {
+  let {
+    size
+  } = _ref5;
+  return SIZES[size].height / 2 - SIZES[size].ball / 2;
+}, "px;left:5px;width:", _ref6 => {
+  let {
+    size
+  } = _ref6;
+  return SIZES[size].ball;
+}, "px;height:", _ref7 => {
+  let {
+    size
+  } = _ref7;
+  return SIZES[size].ball;
+}, "px;border-radius:", _ref8 => {
+  let {
+    theme
+  } = _ref8;
+  return theme.radii.circle;
+}, ";background-color:", _ref9 => {
+  let {
+    theme
+  } = _ref9;
+  return theme.colors.neutral.backgroundWeak;
+}, ";transition:all 300ms;}&:focus-within,&:focus{box-shadow:", _ref10 => {
+  let {
+    theme
+  } = _ref10;
+  return theme.shadows.focusPrimary;
+}, ";}&[data-disabled='false']:active:after{width:", _ref11 => {
+  let {
+    size
+  } = _ref11;
+  return SIZES[size].ball * 1.3775;
+}, "px;}&[data-checked='true']{color:", _ref12 => {
+  let {
+    theme
+  } = _ref12;
+  return theme.colors.neutral.textStrong;
+}, ";background-color:", _ref13 => {
+  let {
+    theme
+  } = _ref13;
+  return theme.colors.primary.backgroundStrong;
+}, ";&:after{left:calc(100% - 5px);transform:translateX(-100%);}&:focus-within,&:focus{box-shadow:", _ref14 => {
+  let {
+    theme
+  } = _ref14;
+  return theme.shadows.focusPrimary;
+}, ";}}&[data-disabled='true']{background:", _ref15 => {
+  let {
+    theme
+  } = _ref15;
+  return theme.colors.neutral.borderWeakDisabled;
+}, ";&[data-checked='true']{background:", _ref16 => {
+  let {
+    theme
+  } = _ref16;
+  return theme.colors.primary.backgroundStrongDisabled;
+}, ";}}");
+const StyledCheckbox = /*#__PURE__*/_styled("input", {
+  target: "e1wstm611"
+})(process.env.NODE_ENV === "production" ? {
+  name: "p9zju0",
+  styles: "position:absolute;opacity:0;top:0;left:0;width:100%;height:100%;cursor:pointer;&[disabled]{cursor:not-allowed;}"
+} : {
+  name: "p9zju0",
+  styles: "position:absolute;opacity:0;top:0;left:0;width:100%;height:100%;cursor:pointer;&[disabled]{cursor:not-allowed;}",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const StyledLabel = /*#__PURE__*/_styled("label", {
+  target: "e1wstm610"
+})("display:flex;gap:", _ref17 => {
+  let {
+    theme
+  } = _ref17;
+  return theme.space['1'];
+}, ";align-items:center;width:fit-content;cursor:pointer;&:active ", StyledToggle, "[data-disabled='false']:after{width:", _ref18 => {
+  let {
+    size
+  } = _ref18;
+  return SIZES[size].ball * 1.3775;
+}, "px;}&[aria-disabled='true']{cursor:not-allowed;color:", _ref19 => {
+  let {
+    theme
+  } = _ref19;
+  return theme.colors.neutral.textDisabled;
+}, ";}");
+const RequiredIcon = () => jsx("sup", {
+  children: jsx(Icon, {
+    name: "asterisk",
+    size: 10,
+    color: "danger"
+  })
+});
+const Toggle = /*#__PURE__*/forwardRef((_ref20, ref) => {
+  let {
+    checked = false,
+    disabled = false,
+    id,
+    name,
+    onChange,
+    size = 'large',
+    tooltip,
+    labelPosition = 'right',
+    label,
+    required,
+    className,
+    'data-testid': dataTestId
+  } = _ref20;
+  const [state, setState] = useState(checked);
+  const uniqueId = useId();
+  const onLocalChange = useCallback(event => {
+    if (onChange) onChange?.(event);else setState(event.target.checked);
+  }, [onChange, setState]);
+  useEffect(() => {
+    setState(checked);
+  }, [checked, setState]);
+  return jsx(Tooltip, {
+    text: tooltip,
+    children: jsxs(StyledLabel, {
+      "aria-disabled": disabled,
+      size: size,
+      onClick: evt => evt.stopPropagation(),
+      className: className,
+      "data-testid": dataTestId,
+      children: [label && labelPosition === 'left' ? jsxs(Fragment, {
+        children: [label, required ? jsx(RequiredIcon, {}) : null]
+      }) : null, jsx(StyledToggle, {
+        size: size,
+        "data-checked": state,
+        "data-disabled": disabled,
+        children: jsx(StyledCheckbox, {
+          id: id || uniqueId,
+          checked: state,
+          "aria-checked": state,
+          disabled: disabled,
+          name: name,
+          onChange: onLocalChange,
+          type: "checkbox",
+          ref: ref
+        })
+      }), label && labelPosition === 'right' ? jsxs(Fragment, {
+        children: [label, required ? jsx(RequiredIcon, {}) : null]
+      }) : null]
+    })
+  });
+});
+
+export { SIZES, Toggle };

package/dist/src/components/Tooltip/helpers.js

@@ -0,0 +1,131 @@
+const ARROW_WIDTH = 8; // in px
+const SPACE = 4; // in px
+const TOTAL_USED_SPACE = ARROW_WIDTH + SPACE; // in px
+const DEFAULT_POSITIONS = {
+  arrowLeft: -999,
+  arrowTop: -999,
+  arrowTransform: 'translate(-50%, -50)',
+  placement: 'top',
+  rotate: 135,
+  tooltipInitialPosition: 'translate3d(-999px, -999px, 0)',
+  tooltipPosition: 'translate3d(-999px, -999px, 0)'
+};
+/**
+ * This function will find the best placement in a window for tooltip based on children position and tooltip size
+ */
+const computePlacement = _ref => {
+  let {
+    childrenStructuredRef,
+    tooltipStructuredRef
+  } = _ref;
+  const {
+    top: childrenX,
+    left: childrenY,
+    right: childrenRight
+  } = childrenStructuredRef;
+  const {
+    width: tooltipWidth,
+    height: tooltipHeight
+  } = tooltipStructuredRef;
+  if (childrenX - tooltipHeight - TOTAL_USED_SPACE < 0) {
+    return 'bottom';
+  }
+  if (childrenY - tooltipWidth - TOTAL_USED_SPACE < 0) {
+    return 'right';
+  }
+  if (childrenRight + tooltipWidth + TOTAL_USED_SPACE > window.innerWidth) {
+    return 'left';
+  }
+  return 'top';
+};
+/**
+ * This function will compute the positions of tooltip and arrow based on children position and tooltip size
+ */
+const computePositions = _ref2 => {
+  let {
+    placement,
+    childrenRef,
+    tooltipRef
+  } = _ref2;
+  const childrenStructuredRef = childrenRef.current.getBoundingClientRect();
+  const tooltipStructuredRef = tooltipRef.current.getBoundingClientRect();
+  const placementBasedOnWindowSize = placement === 'auto' ? computePlacement({
+    childrenStructuredRef,
+    tooltipStructuredRef
+  }) : placement;
+  const {
+    top: childrenTop,
+    left: childrenLeft,
+    right: childrenRight,
+    width: childrenWidth,
+    height: childrenHeight
+  } = childrenStructuredRef;
+  const {
+    width: tooltipWidth,
+    height: tooltipHeight
+  } = tooltipStructuredRef;
+
+  // It will get how much scroll is done on the page to compute the position of the tooltip
+  const scrollTopValue = document.documentElement.scrollTop;
+  switch (placementBasedOnWindowSize) {
+    case 'bottom':
+      {
+        const positionX = childrenLeft + childrenWidth / 2 - tooltipWidth / 2;
+        const positionY = childrenTop + scrollTopValue + childrenHeight + ARROW_WIDTH + SPACE;
+        return {
+          arrowLeft: tooltipWidth / 2,
+          arrowTop: -ARROW_WIDTH - 5,
+          arrowTransform: '',
+          placement: 'bottom',
+          rotate: 180,
+          tooltipInitialPosition: `translate3d(${positionX}px, ${positionY - TOTAL_USED_SPACE}px, 0)`,
+          tooltipPosition: `translate3d(${positionX}px, ${positionY}px, 0)`
+        };
+      }
+    case 'left':
+      {
+        const positionX = childrenLeft - tooltipWidth - ARROW_WIDTH - SPACE * 2;
+        const positionY = childrenTop + scrollTopValue - tooltipHeight / 2 + childrenHeight / 2;
+        return {
+          arrowLeft: tooltipWidth + ARROW_WIDTH + 5,
+          arrowTop: tooltipHeight / 2,
+          arrowTransform: 'translate(-50%, -50%)',
+          placement: 'left',
+          rotate: -90,
+          tooltipInitialPosition: `translate3d(${positionX + TOTAL_USED_SPACE}px, ${positionY}px, 0)`,
+          tooltipPosition: `translate3d(${positionX}px, ${positionY}px, 0)`
+        };
+      }
+    case 'right':
+      {
+        const positionX = childrenRight + ARROW_WIDTH + SPACE * 2;
+        const positionY = childrenTop + scrollTopValue - tooltipHeight / 2 + childrenHeight / 2;
+        return {
+          arrowLeft: -ARROW_WIDTH - 5,
+          arrowTop: tooltipHeight / 2,
+          arrowTransform: 'translate(50%, -50%)',
+          placement: 'right',
+          rotate: 90,
+          tooltipInitialPosition: `translate3d(${positionX - TOTAL_USED_SPACE}px, ${positionY}px, 0)`,
+          tooltipPosition: `translate3d(${positionX}px, ${positionY}px, 0)`
+        };
+      }
+    default:
+      {
+        // top placement is default value
+        const positionX = childrenLeft + childrenWidth / 2 - tooltipWidth / 2;
+        const positionY = childrenTop + scrollTopValue - tooltipHeight - ARROW_WIDTH - SPACE;
+        return {
+          arrowLeft: tooltipWidth / 2,
+          arrowTop: tooltipHeight - 1,
+          arrowTransform: '',
+          placement: 'top',
+          rotate: 0,
+          tooltipInitialPosition: `translate3d(${positionX}px, ${positionY + TOTAL_USED_SPACE}px, 0)`,
+          tooltipPosition: `translate3d(${positionX}px, ${positionY}px, 0)`
+        };
+      }
+  }
+};
+
+export { ARROW_WIDTH, DEFAULT_POSITIONS, computePositions };

package/dist/src/components/Tooltip/index.js

@@ -0,0 +1,275 @@
+import _styled from '@emotion/styled/base';
+import { css, keyframes } from '@emotion/react';
+import { forwardRef, useRef, useImperativeHandle, useState, useId, useCallback, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { DEFAULT_POSITIONS, computePositions, ARROW_WIDTH } from './helpers.js';
+import { jsx, Fragment, jsxs } 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 ANIMATION_DURATION = 230; // in ms
+
+function noop() {}
+const animation = positions => keyframes`
+  0% {
+    opacity: 0;
+    transform: ${positions.tooltipInitialPosition};
+  }
+  100% {
+    opacity: 1;
+    transform: ${positions.tooltipPosition};
+  }
+`;
+const exitAnimation = positions => keyframes`
+  0% {
+    opacity: 1;
+    transform: ${positions.tooltipPosition};
+  }
+  100% {
+    opacity: 0;
+    transform: ${positions.tooltipInitialPosition};
+  }
+`;
+const StyledTooltip = /*#__PURE__*/_styled("div", {
+  target: "e1h4zly11"
+})("background:", _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.colors.neutral.backgroundStronger;
+}, ";color:", _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.colors.neutral.textStronger;
+}, ";border-radius:", _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.radii.default;
+}, ";padding:", _ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return `${theme.space['0.5']} ${theme.space['1']}`;
+}, ";text-align:center;position:absolute;max-width:", _ref5 => {
+  let {
+    maxWidth
+  } = _ref5;
+  return maxWidth;
+}, "px;font-size:0.8rem;inset:0 auto auto 0;top:0;left:0;transform:", _ref6 => {
+  let {
+    positions
+  } = _ref6;
+  return positions.tooltipPosition;
+}, ";animation:", _ref7 => {
+  let {
+    positions,
+    reverseAnimation
+  } = _ref7;
+  return /*#__PURE__*/css(ANIMATION_DURATION, "ms ", !reverseAnimation ? animation(positions) : exitAnimation(positions), " forwards;");
+}, ";&::after{content:' ';position:absolute;top:", _ref8 => {
+  let {
+    positions
+  } = _ref8;
+  return positions.arrowTop;
+}, "px;left:", _ref9 => {
+  let {
+    positions
+  } = _ref9;
+  return positions.arrowLeft;
+}, "px;transform:", _ref10 => {
+  let {
+    positions
+  } = _ref10;
+  return positions.arrowTransform;
+}, " rotate(", _ref11 => {
+  let {
+    positions
+  } = _ref11;
+  return positions.rotate;
+}, "deg);margin-left:-", ARROW_WIDTH, "px;border-width:", ARROW_WIDTH, "px;border-style:solid;border-color:", _ref12 => {
+  let {
+    theme
+  } = _ref12;
+  return theme.colors.neutral.backgroundStronger;
+}, " transparent transparent transparent;pointer-events:none;}");
+const StyledChildrenContainer = /*#__PURE__*/_styled("div", {
+  target: "e1h4zly10"
+})(process.env.NODE_ENV === "production" ? {
+  name: "ck88l6",
+  styles: "display:inherit"
+} : {
+  name: "ck88l6",
+  styles: "display:inherit",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const Tooltip = /*#__PURE__*/forwardRef((_ref13, tooltipRef) => {
+  let {
+    children,
+    text = '',
+    placement = 'auto',
+    id,
+    className,
+    maxWidth = 232,
+    visible,
+    innerRef,
+    role = 'tooltip',
+    'data-testid': dataTestId
+  } = _ref13;
+  const childrenRef = useRef(null);
+  useImperativeHandle(innerRef, () => childrenRef.current);
+  const tempTooltipRef = useRef(null);
+  const innerTooltipRef = tooltipRef || tempTooltipRef;
+  const timer = useRef();
+
+  // Debounce timer will be used to prevent the tooltip from flickering when the user moves the mouse out and in the children element.
+  const debounceTimer = useRef();
+  const [visibleInDom, setVisibleInDom] = useState(false);
+  const [reverseAnimation, setReverseAnimation] = useState(false);
+  const [positions, setPositions] = useState({
+    ...DEFAULT_POSITIONS
+  });
+  const uniqueId = useId();
+  const generatedId = id ?? uniqueId;
+  const isControlled = visible !== undefined;
+  const generatePositions = useCallback(() => {
+    if (childrenRef.current && innerTooltipRef.current) {
+      setPositions(computePositions({
+        childrenRef,
+        placement,
+        tooltipRef: innerTooltipRef
+      }));
+    }
+  }, [innerTooltipRef, placement]);
+  const onScrollDetected = useCallback(() => {
+    // We remove animation on scroll or the animation will restart on every scroll
+    if (innerTooltipRef.current) {
+      innerTooltipRef.current.style.animation = 'none';
+    }
+    generatePositions();
+  }, [generatePositions, innerTooltipRef]);
+
+  /**
+   * This function is called when we need to remove tooltip portal from DOM and remove event listener to it.
+   */
+  const unmountTooltip = useCallback(() => {
+    setVisibleInDom(false);
+    setReverseAnimation(false);
+    window.removeEventListener('scroll', onScrollDetected, true);
+  }, [onScrollDetected]);
+
+  /**
+   * When mouse hover or stop hovering children this function display or hide tooltip. A timeout is set to allow animation
+   * end, then remove tooltip from dom.
+   */
+  const onPointerEvent = useCallback(isVisible => () => {
+    // This condition is for when we want to unmount the tooltip
+    // There is debounce in order to avoid tooltip to flicker when we move the mouse from children to tooltip
+    // Timer is used to follow the animation duration
+    if (!isVisible && innerTooltipRef.current && !debounceTimer.current) {
+      debounceTimer.current = setTimeout(() => {
+        setReverseAnimation(true);
+        timer.current = setTimeout(() => unmountTooltip(), ANIMATION_DURATION);
+      }, 200);
+    } else if (isVisible) {
+      // This condition is for when we want to mount the tooltip
+      // If the timer exists it means the tooltip was about to umount, but we hovered the children again,
+      // so we clear the timer and the tooltip will not be unmounted
+      if (timer.current) {
+        setReverseAnimation(false);
+        clearTimeout(timer.current);
+        timer.current = undefined;
+      }
+      // And here is when we currently are in a debounce timer, it means tooltip was hovered during
+      // that period, and so we can clear debounce timer
+      if (debounceTimer.current) {
+        clearTimeout(debounceTimer.current);
+        debounceTimer.current = undefined;
+      }
+      setVisibleInDom(true);
+    }
+  }, [innerTooltipRef, unmountTooltip]);
+
+  /**
+   * Once tooltip is visible in the dom we can compute positions, then set it visible on screen and add event to
+   * recompute positions on scroll or screen resize.
+   */
+  useEffect(() => {
+    if (visibleInDom) {
+      generatePositions();
+
+      // We want to detect scroll in order to recompute positions of tooltip
+      // Adding true as third parameter to event listener will detect nested scrolls.
+      window.addEventListener('scroll', onScrollDetected, true);
+    }
+    return () => {
+      window.removeEventListener('scroll', onScrollDetected, true);
+      if (timer.current) {
+        clearTimeout(timer.current);
+        timer.current = undefined;
+      }
+    };
+  }, [generatePositions, onScrollDetected, visibleInDom]);
+
+  /**
+   * If tooltip has `visible` prop it means the tooltip is manually controlled through this prop.
+   * In this cas we don't want to display tooltip on hover, but only when `visible` is true.
+   */
+  useEffect(() => {
+    if (isControlled) {
+      onPointerEvent(visible)();
+    }
+  }, [isControlled, onPointerEvent, visible]);
+  const onKeyDown = useCallback(event => {
+    if (event.code === 'Escape') {
+      unmountTooltip();
+    }
+  }, [unmountTooltip]);
+
+  /**
+   * Will render children conditionally if children is a function or not.
+   */
+  const renderChildren = useCallback(() => {
+    if (typeof children === 'function') {
+      return children({
+        onBlur: !isControlled ? onPointerEvent(false) : noop,
+        onFocus: !isControlled ? onPointerEvent(true) : noop,
+        onPointerEnter: !isControlled ? onPointerEvent(true) : noop,
+        onPointerLeave: !isControlled ? onPointerEvent(false) : noop,
+        ref: childrenRef
+      });
+    }
+    return jsx(StyledChildrenContainer, {
+      "aria-describedby": generatedId,
+      onBlur: !isControlled ? onPointerEvent(false) : noop,
+      onFocus: !isControlled ? onPointerEvent(true) : noop,
+      onPointerEnter: !isControlled ? onPointerEvent(true) : noop,
+      onPointerLeave: !isControlled ? onPointerEvent(false) : noop,
+      ref: childrenRef,
+      tabIndex: 0,
+      onKeyDown: onKeyDown,
+      children: children
+    });
+  }, [children, generatedId, isControlled, onKeyDown, onPointerEvent]);
+  if (!text) {
+    if (typeof children === 'function') return null;
+    return jsx(Fragment, {
+      children: children
+    });
+  }
+  return jsxs(Fragment, {
+    children: [renderChildren(), visibleInDom ? /*#__PURE__*/createPortal(jsx(StyledTooltip, {
+      ref: innerTooltipRef,
+      positions: positions,
+      maxWidth: maxWidth,
+      role: role,
+      id: generatedId,
+      className: className,
+      reverseAnimation: reverseAnimation,
+      "data-testid": dataTestId,
+      children: text
+    }), document.body) : null]
+  });
+});
+
+export { Tooltip };