@ultraviolet/ui 1.51.0 → 1.51.2

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

@@ -1,363 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { css } from '@emotion/react';
-import { forwardRef, useRef, useImperativeHandle, useMemo, useState, useId, useCallback, useEffect } from 'react';
-import { createPortal } from 'react-dom';
-import { animation, exitAnimation } from './animations.js';
-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 DEFAULT_ANIMATION_DURATION = 230; // in ms
-const DEFAULT_DEBOUNCE_DURATION = 200; // in ms
-
-function noop() {}
-const StyledPopup = /*#__PURE__*/_styled('div', {
-  shouldForwardProp: prop => !['maxWidth', 'positions', 'reverseAnimation', 'maxHeight', 'animationDuration', 'isDialog'].includes(prop),
-  target: "e4h1g861"
-})("background:", ({
-  theme
-}) => theme.colors.neutral.backgroundStronger, ";color:", ({
-  theme
-}) => theme.colors.neutral.textStronger, ";border-radius:", ({
-  theme
-}) => theme.radii.default, ";padding:", ({
-  theme
-}) => `${theme.space['0.5']} ${theme.space['1']}`, ";text-align:center;position:absolute;max-width:", ({
-  maxWidth
-}) => typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth, ";max-height:", ({
-  maxHeight
-}) => typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight, ";overflow:", ({
-  maxHeight
-}) => maxHeight ? 'auto' : undefined, ";overflow-wrap:break-word;font-size:0.8rem;inset:0 auto auto 0;top:0;left:0;z-index:1;transform:", ({
-  positions
-}) => positions.popupPosition, ";animation:", ({
-  positions,
-  reverseAnimation,
-  maxHeight,
-  animationDuration
-}) => maxHeight || animationDuration === 0 || animationDuration === undefined ? undefined : /*#__PURE__*/css(animationDuration, "ms ", !reverseAnimation ? animation(positions) : exitAnimation(positions), " forwards;"), ";&[data-has-arrow='true']{&::after{content:' ';position:absolute;top:", ({
-  positions
-}) => positions.arrowTop, "px;left:", ({
-  positions
-}) => positions.arrowLeft, "px;transform:", ({
-  positions
-}) => positions.arrowTransform, " rotate(", ({
-  positions
-}) => positions.rotate, "deg);margin-left:-", ARROW_WIDTH, "px;border-width:", ARROW_WIDTH, "px;border-style:solid;border-color:", ({
-  theme
-}) => theme.colors.neutral.backgroundStronger, " transparent transparent transparent;pointer-events:none;}}");
-const StyledChildrenContainer = /*#__PURE__*/_styled("div", {
-  target: "e4h1g860"
-})(process.env.NODE_ENV === "production" ? {
-  name: "jhu4ja",
-  styles: "display:inherit;&[data-container-full-width='true']{width:100%;}"
-} : {
-  name: "jhu4ja",
-  styles: "display:inherit;&[data-container-full-width='true']{width:100%;}",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-/**
- * @experimental This component is experimental and may be subject to breaking changes in the future.
- */
-const Popup = /*#__PURE__*/forwardRef(({
-  children,
-  text = '',
-  placement = 'auto',
-  id,
-  className,
-  containerFullWidth,
-  maxWidth = 232,
-  maxHeight,
-  visible,
-  innerRef,
-  role = 'popup',
-  'data-testid': dataTestId,
-  hasArrow = true,
-  onClose,
-  tabIndex = 0,
-  onKeyDown,
-  'aria-haspopup': ariaHasPopup,
-  hideOnClickOutside = false,
-  debounceDelay = DEFAULT_DEBOUNCE_DURATION,
-  disableAnimation = false,
-  portalTarget
-}, ref) => {
-  const childrenRef = useRef(null);
-  useImperativeHandle(innerRef, () => childrenRef.current);
-  const innerPopupRef = useRef(null);
-  useImperativeHandle(ref, () => innerPopupRef.current);
-  const timer = useRef();
-  const popupPortalTarget = useMemo(() => {
-    if (portalTarget) return portalTarget;
-    if (role === 'dialog') {
-      if (childrenRef.current) return childrenRef.current;
-      if (typeof window !== 'undefined') return document.body;
-      return null;
-    }
-
-    // We check if window exists for SSR
-    if (typeof window !== 'undefined') {
-      return document.body;
-    }
-    return null;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [portalTarget, role, childrenRef.current]);
-
-  // There are some issue when mixing animation and maxHeight on some browsers, so we disable animation if maxHeight is set.
-  const animationDuration = disableAnimation || maxHeight ? 0 : DEFAULT_ANIMATION_DURATION;
-
-  // Debounce timer will be used to prevent the popup 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 generatePopupPositions = useCallback(() => {
-    if (childrenRef.current && innerPopupRef.current) {
-      setPositions(computePositions({
-        childrenRef,
-        placement,
-        popupRef: innerPopupRef,
-        popupPortalTarget: popupPortalTarget
-      }));
-    }
-  }, [placement, popupPortalTarget]);
-
-  /**
-   * This function is called when we need to recompute positions of popup due to window scroll or resize.
-   */
-  const onWindowChangeDetected = useCallback(() => {
-    // We remove animation on scroll or the animation will restart on every scroll
-    if (innerPopupRef.current) {
-      innerPopupRef.current.style.animation = 'none';
-    }
-    generatePopupPositions();
-  }, [generatePopupPositions, innerPopupRef]);
-
-  /**
-   * This function is called when we need to remove popup portal from DOM and remove event listener to it.
-   */
-  const unmountPopupFromDom = useCallback(() => {
-    setVisibleInDom(false);
-    setReverseAnimation(false);
-    window.removeEventListener('scroll', onWindowChangeDetected, true);
-  }, [onWindowChangeDetected]);
-
-  /**
-   * This function is called when we need to hide popup. A timeout is set to allow animation end, then remove
-   * popup from dom.
-   */
-  const closePopup = useCallback(() => {
-    debounceTimer.current = setTimeout(() => {
-      setReverseAnimation(true);
-      timer.current = setTimeout(() => {
-        unmountPopupFromDom();
-        onClose?.();
-      }, animationDuration);
-    }, debounceDelay && !disableAnimation ? debounceDelay : 0);
-  }, [animationDuration, disableAnimation, debounceDelay, onClose, unmountPopupFromDom]);
-
-  /**
-   * When mouse hover or stop hovering children this function display or hide popup. A timeout is set to allow animation
-   * end, then remove popup from dom.
-   */
-  const onPointerEvent = useCallback(isVisible => () => {
-    // If there is a debounceDelay and the popup is not visible, we clear the debounce timer
-    if (!visible && debounceDelay > 0 && debounceTimer.current) {
-      clearTimeout(debounceTimer.current);
-      debounceTimer.current = undefined;
-    }
-
-    // This condition is for when we want to unmount the popup
-    // There is debounce in order to avoid popup to flicker when we move the mouse from children to popup
-    // Timer is used to follow the animation duration
-    if (!isVisible && innerPopupRef.current && !debounceTimer.current) {
-      closePopup();
-    } else if (isVisible) {
-      // This condition is for when we want to mount the popup
-      // If the timer exists it means the popup was about to umount, but we hovered the children again,
-      // so we clear the timer and the popup 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 popup was hovered during
-      // that period, and so we can clear debounce timer
-      if (debounceTimer.current) {
-        clearTimeout(debounceTimer.current);
-        debounceTimer.current = undefined;
-      }
-      if (debounceDelay > 0) {
-        debounceTimer.current = setTimeout(() => {
-          setVisibleInDom(true);
-        }, debounceDelay);
-      } else {
-        setVisibleInDom(true);
-      }
-    }
-  }, [closePopup, debounceDelay, visible]);
-
-  /**
-   * Once popup 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) {
-      generatePopupPositions();
-      if (popupPortalTarget === document.body) {
-        // We want to detect scroll and resize in order to recompute positions of popup
-        // Adding true as third parameter to event listener will detect nested scrolls.
-        window.addEventListener('scroll', onWindowChangeDetected, true);
-      }
-      window.addEventListener('resize', onWindowChangeDetected, true);
-    }
-    return () => {
-      window.removeEventListener('scroll', onWindowChangeDetected, true);
-      window.removeEventListener('resize', onWindowChangeDetected, true);
-      if (timer.current) {
-        clearTimeout(timer.current);
-        timer.current = undefined;
-      }
-    };
-  }, [generatePopupPositions, onWindowChangeDetected, visibleInDom, maxWidth, popupPortalTarget]);
-
-  /**
-   * If popup has `visible` prop it means the popup is manually controlled through this prop.
-   * In this cas we don't want to display popup on hover, but only when `visible` is true.
-   */
-  useEffect(() => {
-    if (isControlled) {
-      onPointerEvent(visible)();
-    }
-  }, [isControlled, onPointerEvent, visible]);
-
-  // Handle hide on esc press and hide on click outside
-  useEffect(() => {
-    const handleEscPress = event => {
-      if (event.key === 'Escape') {
-        event.preventDefault();
-        event.stopPropagation();
-        closePopup();
-      }
-    };
-    const handleClickOutside = event => {
-      const popupCurrent = innerPopupRef.current;
-      const childrenCurrent = childrenRef.current;
-      if (popupCurrent && hideOnClickOutside && !event.defaultPrevented) {
-        if (event.target && event.target !== popupCurrent && event.target !== childrenCurrent && !childrenCurrent?.contains(event.target) && !popupCurrent.contains(event.target)) {
-          event.preventDefault();
-          event.stopPropagation();
-          closePopup();
-        }
-      }
-    };
-    if (visibleInDom) {
-      document.body.addEventListener('keyup', handleEscPress);
-      document.body.addEventListener('click', handleClickOutside);
-    }
-    return () => {
-      document.body.removeEventListener('keyup', handleEscPress);
-      document.body.removeEventListener('click', handleClickOutside);
-    };
-  }, [closePopup, visibleInDom, innerPopupRef, childrenRef, hideOnClickOutside]);
-
-  /**
-   * This event will occur only for dialog and will trap focus inside the dialog.
-   */
-  const handleFocusTrap = useCallback(event => {
-    const isTabPressed = event.key === 'Tab';
-    if (!isTabPressed) {
-      return;
-    }
-    event.stopPropagation();
-    const focusableEls = innerPopupRef.current?.querySelectorAll('a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled])') ?? [];
-
-    // Handle case when no interactive element are within the modal (including close icon)
-    if (focusableEls.length === 0) {
-      event.preventDefault();
-    }
-    const firstFocusableEl = focusableEls[0];
-    const lastFocusableEl = focusableEls[focusableEls.length - 1];
-    if (event.shiftKey) {
-      if (document.activeElement === firstFocusableEl || document.activeElement === innerPopupRef.current) {
-        lastFocusableEl.focus();
-        event.preventDefault();
-      }
-    } else if (document.activeElement === lastFocusableEl || document.activeElement === innerPopupRef.current) {
-      firstFocusableEl.focus();
-      event.preventDefault();
-    }
-  }, []);
-
-  /**
-   * 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,
-      "aria-controls": generatedId,
-      onBlur: !isControlled ? onPointerEvent(false) : noop,
-      onFocus: !isControlled ? onPointerEvent(true) : noop,
-      onPointerEnter: !isControlled ? onPointerEvent(true) : noop,
-      onPointerLeave: !isControlled ? onPointerEvent(false) : noop,
-      ref: childrenRef,
-      tabIndex: tabIndex,
-      onKeyDown: event => {
-        onKeyDown?.(event);
-      },
-      "data-container-full-width": containerFullWidth,
-      "aria-haspopup": ariaHasPopup,
-      children: children
-    });
-  }, [ariaHasPopup, children, containerFullWidth, generatedId, isControlled, onKeyDown, onPointerEvent, tabIndex]);
-  if (!text) {
-    if (typeof children === 'function') return null;
-    return jsx(Fragment, {
-      children: children
-    });
-  }
-
-  /**
-   * This event handle allow us to not bubble the event to document.body like this react-select works fine
-   */
-  const stopClickPropagation = event => {
-    event.nativeEvent.stopImmediatePropagation();
-  };
-  return jsxs(Fragment, {
-    children: [renderChildren(), visibleInDom ? /*#__PURE__*/createPortal(jsx(StyledPopup, {
-      ref: innerPopupRef,
-      positions: positions,
-      maxWidth: maxWidth,
-      maxHeight: maxHeight,
-      role: role,
-      id: generatedId,
-      className: className,
-      reverseAnimation: reverseAnimation,
-      "data-testid": dataTestId,
-      "data-has-arrow": hasArrow,
-      onClick: stopClickPropagation,
-      onPointerEnter: !isControlled ? onPointerEvent(true) : noop,
-      onPointerLeave: !isControlled ? onPointerEvent(false) : noop,
-      animationDuration: animationDuration,
-      onKeyDown: role === 'dialog' ? handleFocusTrap : undefined,
-      isDialog: role === 'dialog',
-      children: text
-    }), popupPortalTarget) : null]
-  });
-});
-
-export { Popup };

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

@@ -1,57 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { keyframes } from '@emotion/react';
-import { jsx } from '@emotion/react/jsx-runtime';
-
-const shineAnimation = keyframes`
-  from {
-    left: -25%;
-  }
-
-  to {
-    left: 100%;
-  }
-`;
-const StyledProgressContainer = /*#__PURE__*/_styled("div", {
-  target: "e1b95x8r2"
-})("overflow:hidden;position:relative;height:4px;margin-left:0;margin-right:0;border-radius:", ({
-  theme
-}) => theme.radii.default, ";background-color:", ({
-  theme
-}) => theme.colors.neutral.backgroundStrong, ";");
-const StyledProgress = /*#__PURE__*/_styled("div", {
-  target: "e1b95x8r1"
-})("position:absolute;top:0;left:0;bottom:0;width:25%;opacity:0.8;background:linear-gradient(\n    90deg,\n    rgba(255, 255, 255, 0),\n    rgba(255, 255, 255, 0.3),\n    rgba(255, 255, 255, 0.4),\n    rgba(255, 255, 255, 0.3),\n    rgba(255, 255, 255, 0)\n  );animation:", shineAnimation, " 1s linear infinite;");
-const StyledFilled = /*#__PURE__*/_styled('div', {
-  shouldForwardProp: prop => !['sentiment', 'value'].includes(prop),
-  target: "e1b95x8r0"
-})("border-radius:", ({
-  theme
-}) => theme.radii.default, ";position:absolute;top:0;left:0;bottom:0;background-color:", ({
-  theme,
-  sentiment
-}) => theme.colors[sentiment].backgroundStrong ?? 'inherit', ";transition:0.3s width;width:", ({
-  value
-}) => Math.max(0, Math.min(100, value)), "%;");
-/**
- * Progress bar component to display progress of a task. Can be used to display progress of a form or a loading state.
- */
-const ProgressBar = ({
-  progress = false,
-  value = 0,
-  sentiment = 'primary',
-  className,
-  'data-testid': dataTestId
-}) => jsx(StyledProgressContainer, {
-  role: "progressbar",
-  "aria-valuenow": value,
-  "aria-valuemin": 0,
-  "aria-valuemax": 100,
-  className: className,
-  "data-testid": dataTestId,
-  children: progress ? jsx(StyledProgress, {}) : jsx(StyledFilled, {
-    sentiment: sentiment,
-    value: value
-  })
-});
-
-export { ProgressBar };

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

@@ -1,157 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { forwardRef, useId } from 'react';
-import { Stack } from '../Stack/index.js';
-import { Text } from '../Text/index.js';
-import { Tooltip } from '../Tooltip/index.js';
-import { jsx, 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 SIZE = 24;
-const InnerCircleRing = /*#__PURE__*/_styled("circle", {
-  target: "ehkrmld6"
-})();
-const RadioMark = /*#__PURE__*/_styled("circle", {
-  target: "ehkrmld5"
-})();
-const RadioMarkedIcon = () => jsxs("g", {
-  children: [jsx("circle", {
-    cx: "12",
-    cy: "12",
-    r: "10",
-    strokeWidth: "2"
-  }), jsx(InnerCircleRing, {
-    cx: "12",
-    cy: "12",
-    r: "8"
-  }), jsx(RadioMark, {
-    cx: "12",
-    cy: "12",
-    r: "5"
-  })]
-});
-const Ring = /*#__PURE__*/_styled("svg", {
-  target: "ehkrmld4"
-})("height:", SIZE, "px;width:", SIZE, "px;min-width:", SIZE, "px;min-height:", SIZE, "px;border-radius:", ({
-  theme
-}) => theme.radii.circle, ";fill:", ({
-  theme
-}) => theme.colors.neutral.border, ";", InnerCircleRing, "{fill:", ({
-  theme
-}) => theme.colors.neutral.background, ";}");
-const RadioInput = /*#__PURE__*/_styled("input", {
-  target: "ehkrmld3"
-})("cursor:pointer;position:absolute;height:", SIZE, "px;width:", SIZE, "px;opacity:0;white-space:nowrap;border-width:0;&+", Ring, "{", RadioMark, "{transform-origin:center;transition:200ms transform ease-in-out;transform:scale(0);}}&:checked+svg{", RadioMark, "{transform:scale(1);}}&:checked[aria-disabled='false'][aria-invalid='false']+", Ring, "{fill:", ({
-  theme
-}) => theme.colors.primary.backgroundStrong, ";}&[aria-invalid='true']:not([aria-disabled='true'])+", Ring, "{fill:", ({
-  theme
-}) => theme.colors.danger.backgroundStrong, ";}&[aria-disabled='false']:active+", Ring, "{background-color:#5e127e40;fill:", ({
-  theme
-}) => theme.colors.primary.backgroundStrong, ";", InnerCircleRing, "{fill:", ({
-  theme
-}) => theme.colors.primary.background, ";}}&[aria-disabled='false']:focus-visible+", Ring, "{outline:-webkit-focus-ring-color auto 1px;}&[aria-invalid='true']:focus+", Ring, "{background-color:#f91b6c40;fill:", ({
-  theme
-}) => theme.colors.danger.backgroundStrong, ";", InnerCircleRing, "{fill:", ({
-  theme
-}) => theme.colors.danger.background, ";}}");
-const RadioContainer = /*#__PURE__*/_styled("div", {
-  target: "ehkrmld2"
-})("position:relative;display:flex;flex:1;align-items:flex-start;gap:", ({
-  theme
-}) => theme.space['1'], ";&[aria-disabled='false'],&[aria-disabled='false']>label{cursor:pointer;}&[aria-disabled='true'][data-checked='false']{color:", ({
-  theme
-}) => theme.colors.neutral.textDisabled, ";}:hover[aria-disabled='false']{", RadioInput, "+", Ring, "{fill:", ({
-  theme
-}) => theme.colors.primary.border, ";", InnerCircleRing, "{fill:", ({
-  theme
-}) => theme.colors.primary.backgroundHover, ";}}", RadioInput, "[aria-invalid='true']+", Ring, "{fill:", ({
-  theme
-}) => theme.colors.danger.border, ";", InnerCircleRing, "{fill:", ({
-  theme
-}) => theme.colors.danger.backgroundHover, ";}}}&[aria-disabled='true']{cursor:not-allowed;&>label,", RadioInput, "{cursor:not-allowed;}", Ring, "{fill:", ({
-  theme
-}) => theme.colors.neutral.borderDisabled, ";cursor:not-allowed;", InnerCircleRing, "{fill:", ({
-  theme
-}) => theme.colors.neutral.backgroundDisabled, ";}}}");
-const StyledLabel = /*#__PURE__*/_styled("label", {
-  target: "ehkrmld1"
-})(process.env.NODE_ENV === "production" ? {
-  name: "82a6rk",
-  styles: "flex:1"
-} : {
-  name: "82a6rk",
-  styles: "flex:1",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const MargedText = /*#__PURE__*/_styled(Text, {
-  target: "ehkrmld0"
-})("margin-left:", ({
-  theme
-}) => theme.space['4'], ";");
-/**
- * Radio component is used to select a single option from a list of options. It is a type of input component.
- */
-const Radio = /*#__PURE__*/forwardRef(({
-  checked = false,
-  onChange,
-  onFocus,
-  onBlur,
-  disabled = false,
-  error,
-  name,
-  value,
-  label,
-  helper,
-  className,
-  autoFocus,
-  onKeyDown,
-  tooltip,
-  'aria-label': ariaLabel,
-  'data-testid': dataTestId
-}, ref) => {
-  const id = useId();
-  const computedName = name ?? id;
-  return jsx(Tooltip, {
-    text: tooltip,
-    children: jsxs(Stack, {
-      gap: 0.5,
-      children: [jsxs(RadioContainer, {
-        "aria-disabled": disabled,
-        className: className,
-        "data-checked": checked,
-        "data-error": error,
-        "data-testid": dataTestId,
-        children: [jsx(RadioInput, {
-          type: "radio",
-          "aria-invalid": !!error,
-          "aria-disabled": disabled,
-          "aria-label": ariaLabel,
-          checked: checked,
-          id: `${computedName}-${value}`,
-          onChange: onChange,
-          onFocus: onFocus,
-          onKeyDown: onKeyDown,
-          onBlur: onBlur,
-          value: value,
-          disabled: disabled,
-          name: computedName,
-          autoFocus: autoFocus,
-          ref: ref
-        }), jsx(Ring, {
-          viewBox: "0 0 24 24",
-          children: jsx(RadioMarkedIcon, {})
-        }), label ? jsx(StyledLabel, {
-          htmlFor: `${computedName}-${value}`,
-          children: label
-        }) : null]
-      }), helper ? jsx(MargedText, {
-        as: "span",
-        variant: "caption",
-        prominence: "weak",
-        sentiment: "neutral",
-        children: helper
-      }) : null]
-    })
-  });
-});
-
-export { Radio };