@ultraviolet/ui 1.51.0 → 1.51.2

package/dist/src/components/Modal/Dialog.js

@@ -1,182 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { useRef, useEffect, useCallback } from 'react';
-import { createPortal } from 'react-dom';
-import { MODAL_WIDTH, MODAL_PLACEMENT } from './constants.js';
-import { jsx } from '@emotion/react/jsx-runtime';
-
-const StyledBackdrop = /*#__PURE__*/_styled("div", {
-  target: "e1cqen9h1"
-})("position:fixed;top:0;right:0;height:0;width:0;overflow:hidden;background-color:", ({
-  theme
-}) => theme.colors.overlay, ";z-index:1;&[data-open='true']{padding:", ({
-  theme
-}) => theme.space['2'], ";overflow:auto;display:flex;bottom:0;left:0;height:100%;width:100%;}");
-const StyledDialog = /*#__PURE__*/_styled("dialog", {
-  target: "e1cqen9h0"
-})("background-color:", ({
-  theme
-}) => theme.colors.neutral.backgroundWeakElevated, ";position:relative;border-radius:", ({
-  theme
-}) => theme.radii.default, ";border:0;padding:", ({
-  theme
-}) => theme.space['3'], ";width:", MODAL_WIDTH.medium, "px;box-shadow:", ({
-  theme
-}) => theme.shadows.modal, ";", /*#__PURE__*/Object.entries(MODAL_WIDTH).map(([size, value]) => `
-      &[data-size="${size}"] {
-        width: ${value}px;
-      }
-      `), " ", /*#__PURE__*/Object.entries(MODAL_PLACEMENT).map(([placement, value]) => `
-        &[data-placement="${placement}"] {
-          ${value}
-        }
-        `), ";");
-const Dialog = ({
-  children,
-  open,
-  placement,
-  onClose,
-  hideOnClickOutside,
-  size,
-  id,
-  ariaLabel,
-  className,
-  'data-testid': dataTestId,
-  preventBodyScroll,
-  hideOnEsc,
-  backdropClassName,
-  dialogCss,
-  backdropCss
-}) => {
-  const containerRef = useRef(document.createElement('div'));
-  const dialogRef = useRef(null);
-  const onCloseRef = useRef(onClose);
-
-  // Portal to put the modal in
-  useEffect(() => {
-    const element = containerRef.current;
-    if (open) {
-      document.body.appendChild(element);
-    }
-    return () => {
-      if (document.body.contains(element)) {
-        document.body.removeChild(element);
-      }
-    };
-  }, [open]);
-
-  // Save the reassignment of eventHandler in the useEffect below
-  useEffect(() => {
-    onCloseRef.current = onClose;
-  }, [onClose]);
-
-  // On open focus the modal
-  useEffect(() => {
-    if (open) {
-      dialogRef.current?.focus();
-    }
-  }, [open]);
-
-  // Handle body scroll
-  useEffect(() => {
-    const previousOverflow = document.body.style.overflow;
-    if (open && preventBodyScroll) {
-      document.body.style.overflow = 'hidden';
-    }
-    return () => {
-      document.body.style.overflow = previousOverflow;
-    };
-  }, [preventBodyScroll, open]);
-
-  // Stop focus to prevent unexpected body loose focus
-  const stopFocus = useCallback(event => {
-    event.stopPropagation();
-  }, []);
-
-  // Stop click to prevent unexpected dialog close
-  const stopClick = useCallback(event => {
-    event.stopPropagation();
-  }, []);
-
-  // handle key up : used when having inputs in modals - useful for hideOnEsc
-  const handleKeyUp = useCallback(event => {
-    event.stopPropagation();
-    if (event.key === 'Escape' && hideOnEsc) {
-      event.preventDefault();
-      onCloseRef.current();
-    }
-  }, [hideOnEsc]);
-  const handleClose = useCallback(event => {
-    event.stopPropagation();
-    if (hideOnClickOutside) {
-      onCloseRef.current();
-    } else {
-      // Because overlay is not focusable we can't handle hideOnEsc properly
-      dialogRef.current?.focus();
-    }
-  }, [hideOnClickOutside]);
-
-  // Enable focus trap inside the modal
-  const handleFocusTrap = useCallback(event => {
-    event.stopPropagation();
-    if (event.key === 'Escape') {
-      event.preventDefault();
-      return;
-    }
-    const isTabPressed = event.key === 'Tab';
-    if (!isTabPressed) {
-      return;
-    }
-    const focusableEls = dialogRef.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 === dialogRef.current) {
-        lastFocusableEl.focus();
-        event.preventDefault();
-      }
-    } else if (document.activeElement === lastFocusableEl || document.activeElement === dialogRef.current) {
-      firstFocusableEl.focus();
-      event.preventDefault();
-    }
-  }, []);
-
-  // Prevent default behaviour on Escape
-  const stopCancel = event => {
-    event.preventDefault();
-    event.stopPropagation();
-  };
-  return open ? /*#__PURE__*/createPortal(jsx(StyledBackdrop, {
-    "data-open": open,
-    onClick: handleClose,
-    className: backdropClassName,
-    css: backdropCss,
-    "data-testid": dataTestId ? `${dataTestId}-backdrop` : undefined,
-    onFocus: stopFocus,
-    children: jsx(StyledDialog, {
-      css: dialogCss,
-      onKeyUp: handleKeyUp,
-      onKeyDown: handleFocusTrap,
-      className: className,
-      id: id,
-      "data-testid": dataTestId,
-      "aria-label": ariaLabel,
-      "data-placement": placement,
-      "data-size": size,
-      open: open,
-      onClick: stopClick,
-      onCancel: stopCancel,
-      onClose: stopCancel,
-      "aria-modal": true,
-      ref: dialogRef,
-      tabIndex: 0,
-      children: open ? children : null
-    })
-  }), containerRef.current) : null;
-};
-
-export { Dialog };

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

@@ -1,113 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { useState, useId, useCallback } from 'react';
-import { Button } from '../Button/index.js';
-import { Dialog } from './Dialog.js';
-import { Disclosure } from './Disclosure.js';
-import { jsxs, Fragment, jsx } from '@emotion/react/jsx-runtime';
-
-const StyledContainer = /*#__PURE__*/_styled("div", {
-  target: "ebywm9u0"
-})("position:absolute;top:", ({
-  theme
-}) => theme.space['2'], ";right:", ({
-  theme
-}) => theme.space['2'], ";");
-
-/**
- * Modal is a component that allows you to display content on top of other content.
- * It is often used to display a dialog with additional information or to ask for a confirmation.
- */
-const Modal = ({
-  ariaLabel = 'modal',
-  id,
-  children,
-  disclosure,
-  hideOnClickOutside = true,
-  hideOnEsc = true,
-  isClosable = true,
-  onClose,
-  onBeforeClose,
-  open = false,
-  opened = false,
-  placement = 'center',
-  preventBodyScroll = true,
-  size,
-  className,
-  'data-testid': dataTestId,
-  backdropClassName,
-  width = 'small',
-  customDialogStyles,
-  customDialogBackdropStyles
-}) => {
-  // Used for disclosure usage only
-  const [visible, setVisible] = useState(false);
-  const controlId = useId();
-  const handleOpen = useCallback(() => {
-    setVisible(true);
-  }, []);
-  const handleClose = useCallback(() => {
-    if (onClose) {
-      onClose();
-    } else {
-      const promise = onBeforeClose?.();
-      if (promise && 'catch' in promise) {
-        promise.catch(() => null);
-      }
-      setVisible(false);
-    }
-  }, [onBeforeClose, onClose]);
-  const handleToggle = useCallback(() => {
-    setVisible(current => !current);
-  }, []);
-  const finalId = id ?? controlId;
-  const finalSize = size ?? width;
-  return jsxs(Fragment, {
-    children: [disclosure ? jsx(Disclosure, {
-      id: finalId,
-      handleOpen: handleOpen,
-      disclosure: disclosure,
-      handleClose: handleClose,
-      visible: visible,
-      toggle: handleToggle
-    }) : null, jsx(Dialog, {
-      open: visible || open || opened,
-      placement: placement,
-      size: finalSize,
-      ariaLabel: ariaLabel,
-      hideOnClickOutside: hideOnClickOutside,
-      hideOnEsc: hideOnEsc,
-      preventBodyScroll: preventBodyScroll,
-      onClose: handleClose,
-      className: className,
-      backdropClassName: backdropClassName,
-      "data-testid": dataTestId,
-      id: finalId,
-      dialogCss: customDialogStyles,
-      backdropCss: customDialogBackdropStyles,
-      children: jsxs(Fragment, {
-        children: [typeof children === 'function' ? children({
-          visible,
-          onClose: handleClose,
-          onOpen: handleOpen,
-          toggle: handleToggle,
-          modalId: finalId,
-          hide: handleClose,
-          close: handleClose,
-          show: handleOpen
-        }) : children, jsx(StyledContainer, {
-          children: isClosable ? jsx(Button, {
-            "data-testid": dataTestId ? `${dataTestId}-close-button` : undefined,
-            onClick: handleClose,
-            variant: "ghost",
-            size: "small",
-            icon: "close",
-            sentiment: "neutral",
-            "aria-label": "close"
-          }) : null
-        })]
-      })
-    })]
-  });
-};
-
-export { Modal };

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

@@ -1,34 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { Icon } from '@ultraviolet/icons';
-import { Text } from '../Text/index.js';
-import { jsxs, jsx } from '@emotion/react/jsx-runtime';
-
-const StyledSpan = /*#__PURE__*/_styled(Text, {
-  target: "e19pqvs30"
-})("display:flex;align-items:center;gap:", ({
-  theme
-}) => theme.space['1'], ";");
-
-/**
- * A Notice is used to display a short message to the user.
- */
-const Notice = ({
-  children,
-  className,
-  'data-testid': dataTestId
-}) => jsxs(StyledSpan, {
-  as: "span",
-  variant: "caption",
-  sentiment: "neutral",
-  prominence: "weak",
-  "data-testid": dataTestId,
-  className: className,
-  children: [jsx(Icon, {
-    name: "information-outline",
-    size: 16,
-    color: "neutral",
-    prominence: "weak"
-  }), children]
-});
-
-export { Notice };

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

@@ -1,77 +0,0 @@
-import { useTheme, Global, ClassNames, css } from '@emotion/react';
-import { toast, ToastContainer, Slide } from 'react-toastify';
-import css_248z from '../../../react-toastify/dist/ReactToastify.min.css.js';
-import { Button } from '../Button/index.js';
-import { Stack } from '../Stack/index.js';
-import { Text } from '../Text/index.js';
-import { jsxs, jsx, Fragment } from '@emotion/react/jsx-runtime';
-
-const PREFIX = '.Toastify';
-const styles = {
-  toast: ({
-    theme
-  }) => /*#__PURE__*/css("border-radius:", theme.radii.default, ";&", PREFIX, "__toast{background-color:", theme.colors.neutral.background, ";color:", theme.colors.neutral.text, ";padding:", theme.space['2'], ";box-shadow:", theme.shadows.defaultShadow, ";}&", PREFIX, "__toast-container{width:312px;}", PREFIX, "__toast-body{margin:0;padding:0;display:none;}")
-};
-const closeButton = props => jsx(Button, {
-  "aria-label": "close",
-  icon: "close",
-  sentiment: "neutral",
-  variant: "ghost",
-  onClick: props.closeToast,
-  size: "xsmall"
-});
-const notification = (children, title, icon, isClosable, containerId, options) => toast('', {
-  ...options,
-  closeButton: props => jsxs(Stack, {
-    direction: "row",
-    gap: 2,
-    children: [jsx("div", {
-      children: icon
-    }), jsxs(Stack, {
-      direction: "column",
-      children: [jsx(Text, {
-        as: "h3",
-        variant: "bodySmallStronger",
-        children: title
-      }), typeof children === 'function' ? children(props) : children]
-    }), isClosable ? closeButton(props) : null]
-  }),
-  containerId: containerId ?? 'notification'
-});
-const NotificationContainer = ({
-  newestOnTop,
-  limit,
-  autoClose = false,
-  position = 'top-right',
-  'data-testid': dataTestId,
-  className,
-  containerId = 'notification'
-}) => {
-  const theme = useTheme();
-  return jsxs(Fragment, {
-    children: [jsx(Global, {
-      styles: css_248z
-    }), jsx(ClassNames, {
-      children: ({
-        css: localCss
-      }) => jsx(ToastContainer, {
-        "data-testid": dataTestId,
-        toastClassName: localCss(styles.toast({
-          theme
-        })),
-        icon: false,
-        autoClose: autoClose,
-        newestOnTop: newestOnTop,
-        limit: limit,
-        position: position,
-        hideProgressBar: true,
-        draggable: false,
-        transition: Slide,
-        className: className,
-        containerId: containerId
-      })
-    })]
-  });
-};
-
-export { NotificationContainer, notification };

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

@@ -1,299 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { Icon } from '@ultraviolet/icons';
-import { useRef, useId, useState, useMemo } from 'react';
-import { Button } from '../Button/index.js';
-import { Stack } from '../Stack/index.js';
-import { Text } from '../Text/index.js';
-import { Tooltip } from '../Tooltip/index.js';
-import { getMinusRoundedValue, getPlusRoundedValue, roundStep, bounded } from './helpers.js';
-import { jsxs, jsx } from '@emotion/react/jsx-runtime';
-
-const containerSizes = {
-  large: 48,
-  medium: 40,
-  small: 32
-};
-const iconSizes = {
-  large: 26,
-  medium: 24,
-  small: 22
-};
-const BASE_INPUT_WIDTH = 34;
-const StyledSelectButton = /*#__PURE__*/_styled(Button, {
-  target: "exvap484"
-})("margin:0 ", ({
-  theme
-}) => theme.space['1'], ";width:32px;height:32px;");
-const StyledCenterBox = /*#__PURE__*/_styled('div', {
-  shouldForwardProp: prop => !['size'].includes(prop),
-  target: "exvap483"
-})("display:flex;flex:1;flex-direction:row;height:", ({
-  size
-}) => size === 'small' ? '24px' : '32px', ";align-items:center;outline:none;justify-content:center;border-radius:", ({
-  theme
-}) => theme.radii.default, ";border:1px solid transparent;max-width:100%;");
-const StyledInput = /*#__PURE__*/_styled("input", {
-  target: "exvap482"
-})("color:", ({
-  theme
-}) => theme.colors.neutral.text, ";background-color:transparent;font-size:", ({
-  theme
-}) => theme.typography.bodyStrong.fontSize, ";border:none;outline:none;position:relative;margin-right:", ({
-  theme
-}) => theme.space['0.5'], ";max-width:100%;font-weight:", ({
-  theme
-}) => theme.typography.bodyStrong.weight, ";text-align:center;&::-webkit-outer-spin-button,&::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}::placeholder{color:", ({
-  theme
-}) => theme.colors.neutral.textWeak, ";}-moz-appearance:textfield;&[disabled]{color:", ({
-  theme
-}) => theme.colors.neutral.textDisabled, ";cursor:not-allowed;}");
-const StyledText = /*#__PURE__*/_styled('span', {
-  shouldForwardProp: prop => !['disabled'].includes(prop),
-  target: "exvap481"
-})("color:", ({
-  theme,
-  disabled
-}) => disabled ? theme.colors.neutral.textDisabled : theme.colors.neutral.text, ";user-select:none;margin-right:", ({
-  theme
-}) => theme.space['1'], ";");
-const StyledContainer = /*#__PURE__*/_styled('div', {
-  shouldForwardProp: prop => !['size'].includes(prop),
-  target: "exvap480"
-})("background-color:", ({
-  theme
-}) => theme.colors.neutral.background, ";display:flex;flex-direction:row;align-items:center;align-self:stretch;font-weight:500;height:", ({
-  size
-}) => containerSizes[size], "px;border:1px solid ", ({
-  theme
-}) => theme.colors.neutral.border, ";border-radius:", ({
-  theme
-}) => theme.radii.default, ";&[data-error='true']{border:1px solid ", ({
-  theme
-}) => theme.colors.danger.border, ";}&[aria-disabled='true']{background:", ({
-  theme
-}) => theme.colors.neutral.backgroundDisabled, ";cursor:not-allowed;}&:not([aria-disabled='true']){", StyledCenterBox, ":hover,", StyledCenterBox, ":focus{border:1px solid ", ({
-  theme
-}) => theme.colors.primary.borderHover, ";}", StyledCenterBox, ":focus-within{box-shadow:", ({
-  theme
-}) => theme.shadows.focusPrimary, ";border:1px solid ", ({
-  theme
-}) => theme.colors.primary.borderHover, ";}}");
-/**
- * @deprecated This component is deprecated. Please use `NumberInputV2` instead.
- */
-const NumberInput = ({
-  disabled = false,
-  maxValue,
-  minValue = 0,
-  name = 'numberinput',
-  onChange,
-  onFocus,
-  onBlur,
-  onMaxCrossed,
-  onMinCrossed,
-  size = 'large',
-  step = 1,
-  text,
-  defaultValue,
-  value,
-  disabledTooltip,
-  className,
-  label,
-  id,
-  placeholder,
-  error,
-  'aria-label': ariaLabel,
-  'aria-describedby': ariaDescribedBy,
-  'data-testid': dataTestId
-}) => {
-  const inputRef = useRef();
-  const uniqueId = useId();
-
-  // local state used if component is not controlled (no value prop provided)
-  const [inputValue, setInputValue] = useState(() => {
-    if (defaultValue && minValue && defaultValue < minValue) {
-      return minValue;
-    }
-    if (defaultValue && maxValue && defaultValue > maxValue) {
-      return maxValue;
-    }
-    return defaultValue;
-  });
-  const currentValue = value !== undefined && value !== null ? value : inputValue;
-  const setValue = (newValue,
-  /**
-   * If true, will check if newValue is between minValue and maxValue and set it to minValue or maxValue if it's not.
-   */
-  hasMinMaxVerification = true) => {
-    let nextValue = newValue;
-    if (value === undefined && hasMinMaxVerification) {
-      if (newValue !== undefined && newValue < minValue) {
-        nextValue = minValue;
-      }
-      if (newValue !== undefined && maxValue !== undefined && newValue > maxValue) {
-        nextValue = maxValue;
-      }
-    }
-    setInputValue(nextValue);
-    onChange?.(nextValue);
-  };
-  const offsetFn = direction => () => {
-    const localValue = currentValue ?? 0;
-    const newValue = localValue % step === 0 ? localValue + step * direction : localValue;
-    const roundedValue = roundStep(newValue, step, direction);
-    setValue(roundedValue);
-  };
-  const handleChange = event => {
-    setValue(event.currentTarget.value ? Number(event.currentTarget.value) : undefined, false);
-  };
-  const handleOnBlur = event => {
-    if (currentValue) {
-      const boundedValue = bounded(currentValue, minValue ?? currentValue, maxValue ?? currentValue);
-      if (maxValue && currentValue > maxValue) onMaxCrossed?.();
-      if (minValue && currentValue < minValue) onMinCrossed?.();
-      setValue(boundedValue);
-      onBlur?.(event);
-    }
-  };
-  const onKeyDown = event => {
-    if (event.key === 'ArrowUp') {
-      event.stopPropagation();
-      event.preventDefault();
-      const direction = 1;
-      const localValue = currentValue ?? 0;
-      const newValue = localValue % step === 0 ? localValue + step * direction : localValue;
-      const roundedValue = roundStep(newValue, step, direction);
-      if (maxValue === undefined) {
-        setValue(roundedValue);
-        return;
-      }
-      setValue(Math.min(roundedValue, maxValue));
-    }
-    if (event.key === 'ArrowDown') {
-      event.stopPropagation();
-      event.preventDefault();
-      const direction = -1;
-      const localValue = currentValue ?? 0;
-      const newValue = localValue % step === 0 ? localValue + step * direction : localValue;
-      const roundedValue = roundStep(newValue, step, direction);
-      setValue(Math.max(roundedValue, minValue));
-    }
-  };
-  const isMinusDisabled = useMemo(() => {
-    if (disabled) return true;
-    if (currentValue === undefined) return false;
-    if (getMinusRoundedValue(currentValue, step) < minValue) {
-      return true;
-    }
-    return disabled;
-  }, [currentValue, disabled, minValue, step]);
-  const isPlusDisabled = useMemo(() => {
-    if (disabled) return true;
-    if (currentValue === undefined) return false;
-    if (maxValue && getPlusRoundedValue(currentValue, step) > maxValue) {
-      return true;
-    }
-    return disabled;
-  }, [currentValue, disabled, maxValue, step]);
-  const inputWidth = useMemo(() => {
-    if (placeholder && currentValue === undefined) {
-      return placeholder.length * 12;
-    }
-    if (currentValue !== undefined) {
-      return currentValue.toString().length * 16;
-    }
-    return BASE_INPUT_WIDTH;
-  }, [currentValue, placeholder]);
-  return jsxs(Stack, {
-    gap: 1,
-    children: [label ? jsx(Text, {
-      variant: "bodyStrong",
-      as: "label",
-      htmlFor: id || uniqueId,
-      children: label
-    }) : null, jsxs(Stack, {
-      gap: 0.5,
-      children: [jsxs(StyledContainer, {
-        "aria-disabled": disabled,
-        "data-error": !!error,
-        size: size,
-        className: className,
-        "data-testid": dataTestId,
-        children: [jsx(Tooltip, {
-          text: isMinusDisabled && disabledTooltip,
-          children: jsx(StyledSelectButton, {
-            onClick: offsetFn(-1),
-            disabled: isMinusDisabled,
-            "aria-label": "Minus",
-            type: "button",
-            variant: "ghost",
-            sentiment: "primary",
-            size: "small",
-            children: jsx(Icon, {
-              name: "minus",
-              size: iconSizes[size],
-              color: "primary",
-              disabled: isMinusDisabled
-            })
-          })
-        }), jsxs(StyledCenterBox, {
-          size: size,
-          onClick: () => {
-            if (inputRef?.current) {
-              inputRef.current.focus();
-            }
-          },
-          "aria-live": "assertive",
-          role: "status",
-          children: [jsx(StyledInput, {
-            disabled: disabled,
-            name: name,
-            onBlur: handleOnBlur,
-            onChange: handleChange,
-            onFocus: onFocus,
-            onKeyDown: onKeyDown,
-            ref: inputRef,
-            style: {
-              width: inputWidth
-            },
-            value: currentValue !== undefined ? currentValue.toString() : '' // A dom element can only have string attributes.
-            ,
-            type: "number",
-            id: id || uniqueId,
-            "aria-label": !label && !ariaLabel ? 'Number Input' : ariaLabel,
-            "aria-describedby": ariaDescribedBy,
-            placeholder: placeholder
-          }), currentValue !== undefined ? jsx(StyledText, {
-            disabled: disabled,
-            children: text
-          }) : null]
-        }), jsx(Tooltip, {
-          text: isPlusDisabled && disabledTooltip,
-          children: jsx(StyledSelectButton, {
-            onClick: offsetFn(1),
-            disabled: isPlusDisabled,
-            "aria-label": "Plus",
-            type: "button",
-            variant: "ghost",
-            sentiment: "primary",
-            size: "small",
-            children: jsx(Icon, {
-              name: "plus",
-              size: iconSizes[size],
-              color: "primary",
-              disabled: isPlusDisabled
-            })
-          })
-        })]
-      }), typeof error === 'string' ? jsx(Text, {
-        as: "span",
-        variant: "bodySmall",
-        sentiment: "danger",
-        prominence: "weak",
-        children: error
-      }) : null]
-    })]
-  });
-};
-
-export { NumberInput };