@ultraviolet/ui 1.51.0 → 1.51.2

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

@@ -1,242 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { Global } from '@emotion/react';
-import { Icon } from '@ultraviolet/icons';
-import { useId } from 'react';
-import DatePicker, { registerLocale } from 'react-datepicker';
-import css_248z from '../../../react-datepicker/dist/react-datepicker.min.css.js';
-import { Button } from '../Button/index.js';
-import { Stack } from '../Stack/index.js';
-import { Text } from '../Text/index.js';
-import { TextInputV2 } from '../TextInputV2/index.js';
-import { jsxs, Fragment, 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 PREFIX = '.react-datepicker';
-const StyledWrapper = /*#__PURE__*/_styled("div", {
-  target: "e1bm75lk1"
-})("width:100%;div", PREFIX, "-wrapper{display:block;}div", PREFIX, "__input-container{display:block;}div", PREFIX, "__triangle{display:none;}div", PREFIX, "__month-container{padding:16px;}", PREFIX, "-popper{z-index:1000;}.calendar{font-family:", ({
-  theme
-}) => theme.typography.body.fontFamily, ";border-color:", ({
-  theme
-}) => theme.colors.neutral.borderWeak, ";background-color:", ({
-  theme
-}) => theme.colors.neutral.backgroundWeakElevated, ";", PREFIX, "__header{color:", ({
-  theme
-}) => theme.colors.neutral.text, ";background-color:", ({
-  theme
-}) => theme.colors.neutral.backgroundWeakElevated, ";border-bottom:none;text-align:inherit;display:block;padding-top:0;position:inherit;}", PREFIX, "__triangle{border-bottom-color:", ({
-  theme
-}) => theme.colors.neutral.backgroundWeak, ";}", PREFIX, "__month{margin:0;}", PREFIX, "__day-names{margin-top:8px;}", PREFIX, "__day-name{font-family:", ({
-  theme
-}) => theme.typography.bodySmallStrong.fontFamily, ";color:", ({
-  theme
-}) => theme.colors.neutral.text, ";font-weight:", ({
-  theme
-}) => theme.typography.bodySmallStrong.weight, ";font-size:", ({
-  theme
-}) => theme.typography.bodySmallStrong.fontSize, ";line-height:", ({
-  theme
-}) => theme.typography.bodySmallStrong.lineHeight, ";text-align:center;margin:3px;text-transform:capitalize;}", PREFIX, "__day{color:", ({
-  theme
-}) => theme.colors.neutral.textWeak, ";font-weight:", ({
-  theme
-}) => theme.typography.bodyStrong.weight, ";font-size:", ({
-  theme
-}) => theme.typography.bodyStrong.fontSize, ";width:26px;height:26px;margin-left:3px;margin-right:3px;}", PREFIX, "__day--outside-month{color:", ({
-  theme
-}) => theme.colors.neutral.textDisabled, ";font-weight:", ({
-  theme
-}) => theme.typography.bodyStrong.weight, ";font-size:", ({
-  theme
-}) => theme.typography.bodyStrong.fontSize, ";}", PREFIX, "__day--selected{color:", ({
-  theme
-}) => theme.colors.primary.textStrong, ";background-color:", ({
-  theme
-}) => theme.colors.primary.backgroundStrong, ";&[aria-disabled='true'],&:disabled{color:", ({
-  theme
-}) => theme.colors.primary.textStrongDisabled, ";background-color:", ({
-  theme
-}) => theme.colors.primary.backgroundStrongDisabled, ";}}", PREFIX, "__day--in-selecting-range{color:", ({
-  theme
-}) => theme.colors.primary.text, ";background-color:", ({
-  theme
-}) => theme.colors.primary.background, ";&[aria-disabled='true'],&:disabled{color:", ({
-  theme
-}) => theme.colors.primary.textDisabled, ";background-color:", ({
-  theme
-}) => theme.colors.primary.backgroundDisabled, ";}}", PREFIX, "__day--in-range{color:", ({
-  theme
-}) => theme.colors.primary.text, ";background-color:", ({
-  theme
-}) => theme.colors.primary.background, ";&[aria-disabled='true'],&:disabled{color:", ({
-  theme
-}) => theme.colors.primary.textDisabled, ";background-color:", ({
-  theme
-}) => theme.colors.primary.backgroundDisabled, ";}}", PREFIX, "__day--range-start{color:", ({
-  theme
-}) => theme.colors.primary.textStrong, ";background-color:", ({
-  theme
-}) => theme.colors.primary.backgroundStrong, ";&[aria-disabled='true'],&:disabled{color:", ({
-  theme
-}) => theme.colors.primary.textStrongDisabled, ";background-color:", ({
-  theme
-}) => theme.colors.primary.backgroundStrongDisabled, ";}}", PREFIX, "__day--range-end{color:", ({
-  theme
-}) => theme.colors.primary.textStrong, ";background-color:", ({
-  theme
-}) => theme.colors.primary.backgroundStrong, ";&[aria-disabled='true'],&:disabled{color:", ({
-  theme
-}) => theme.colors.primary.textStrongDisabled, ";background-color:", ({
-  theme
-}) => theme.colors.primary.backgroundStrongDisabled, ";}}", PREFIX, "__day--keyboard-selected{color:", ({
-  theme
-}) => theme.colors.primary.textStrong, ";background-color:", ({
-  theme
-}) => theme.colors.primary.backgroundStrong, ";}", PREFIX, "__day:hover{color:", ({
-  theme
-}) => theme.colors.neutral.textHover, ";background-color:", ({
-  theme
-}) => theme.colors.neutral.backgroundHover, ";}", PREFIX, "__day--disabled{color:", ({
-  theme
-}) => theme.colors.neutral.textDisabled, ";}", PREFIX, "__day--disabled:hover{color:", ({
-  theme
-}) => theme.colors.neutral.textDisabled, ";background-color:transparent;}}");
-const StyledText = /*#__PURE__*/_styled(Text, {
-  target: "e1bm75lk0"
-})(process.env.NODE_ENV === "production" ? {
-  name: "kff9ir",
-  styles: "text-transform:capitalize"
-} : {
-  name: "kff9ir",
-  styles: "text-transform:capitalize",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const DEFAULT_FORMAT = value => value instanceof Date ? value.toISOString() : value;
-
-/**
- * DateInput is a wrapper around react-datepicker that provides a consistent look and feel with the rest of the Ultraviolet UI.
- * See https://reactdatepicker.com/ for more information.
- */
-const DateInput = ({
-  autoFocus = false,
-  disabled = false,
-  error,
-  format = DEFAULT_FORMAT,
-  label,
-  labelDescription,
-  locale,
-  maxDate,
-  minDate,
-  startDate,
-  endDate,
-  name,
-  onBlur,
-  onChange,
-  onFocus,
-  required = false,
-  excludeDates,
-  value,
-  selectsRange,
-  className,
-  id,
-  success,
-  helper,
-  size = 'large',
-  readOnly = false,
-  tooltip,
-  'data-testid': dataTestId
-}) => {
-  const uniqueId = useId();
-  const localId = id ?? uniqueId;
-
-  // Linked to: https://github.com/Hacker0x01/react-datepicker/issues/3834
-  const ReactDatePicker = DatePicker.default ?? DatePicker;
-  const localeCode = (typeof locale === 'string' ? locale : locale?.code) ?? 'en-GB';
-  if (typeof locale === 'object') {
-    registerLocale(localeCode, locale);
-  }
-  const valueStart = `${startDate !== undefined && startDate !== null ? `${format(startDate)} -` : ''}`;
-  const valueEnd = `${endDate !== undefined && endDate !== null ? format(endDate) : ''}`;
-  const valueFormat = selectsRange ? `${valueStart} ${valueEnd}` : format(value);
-  return jsxs(Fragment, {
-    children: [jsx(Global, {
-      styles: css_248z
-    }), jsx(StyledWrapper, {
-      children: jsx(ReactDatePicker, {
-        required: required,
-        "data-testid": dataTestId,
-        className: className,
-        autoFocus: autoFocus,
-        fixedHeight: true,
-        name: name,
-        locale: localeCode,
-        onBlur: onBlur,
-        onChange: onChange,
-        onFocus: onFocus,
-        selected: value && !selectsRange ? new Date(value) : undefined,
-        selectsRange: selectsRange,
-        excludeDates: excludeDates,
-        customInput: jsx(TextInputV2, {
-          error: error,
-          success: success,
-          helper: helper,
-          id: localId,
-          label: label,
-          labelDescription: labelDescription,
-          value: valueFormat || '',
-          disabled: disabled,
-          size: size,
-          suffix: jsx(Icon, {
-            name: "calendar-range",
-            color: "neutral",
-            disabled: disabled
-          }),
-          readOnly: readOnly,
-          tooltip: tooltip
-        }),
-        disabled: disabled,
-        calendarClassName: "calendar",
-        minDate: minDate,
-        maxDate: maxDate,
-        startDate: startDate,
-        endDate: endDate,
-        renderCustomHeader: ({
-          date,
-          decreaseMonth,
-          increaseMonth,
-          prevMonthButtonDisabled,
-          nextMonthButtonDisabled
-        }) => jsxs(Stack, {
-          direction: "row",
-          alignItems: "center",
-          justifyContent: "space-between",
-          gap: 3,
-          children: [jsx(Button, {
-            size: "small",
-            icon: "arrow-left",
-            sentiment: "neutral",
-            variant: "ghost",
-            onClick: decreaseMonth,
-            disabled: prevMonthButtonDisabled
-          }), jsx(StyledText, {
-            variant: "bodyStrong",
-            as: "p",
-            children: new Date(date).toLocaleString(localeCode, {
-              month: 'long',
-              year: 'numeric'
-            })
-          }), jsx(Button, {
-            size: "small",
-            icon: "arrow-right",
-            sentiment: "neutral",
-            variant: "ghost",
-            onClick: increaseMonth,
-            disabled: nextMonthButtonDisabled
-          })]
-        })
-      })
-    })]
-  });
-};
-
-export { DateInput };

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

@@ -1,12 +0,0 @@
-import { useContext, createContext } from 'react';
-
-const DialogContext = /*#__PURE__*/createContext(undefined);
-const useDialogContext = () => {
-  const context = useContext(DialogContext);
-  if (!context) {
-    throw new Error('Dialog context can only be used inside a Dialog component');
-  }
-  return context;
-};
-
-export { DialogContext, useDialogContext };

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

@@ -1,88 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { useMemo } from 'react';
-import { Bullet } from '../Bullet/index.js';
-import { Modal } from '../Modal/index.js';
-import { Text } from '../Text/index.js';
-import { useDialogContext, DialogContext } from './Context.js';
-import { DialogButton } from './subComponents/Button.js';
-import { DialogButtons } from './subComponents/Buttons.js';
-import { DialogCancelButton } from './subComponents/CancelButton.js';
-import { DialogStack } from './subComponents/Stack.js';
-import { DialogText } from './subComponents/Text.js';
-import { jsxs, Fragment, jsx } from '@emotion/react/jsx-runtime';
-
-const StyledTextTitle = /*#__PURE__*/_styled(Text, {
-  target: "ehf9m9r0"
-})("margin-top:", ({
-  theme
-}) => theme.space['2'], ";margin-bottom:", ({
-  theme
-}) => theme.space['1'], ";");
-const BaseDialog = ({
-  ariaLabel,
-  className,
-  children,
-  'data-testid': dataTestId,
-  disclosure,
-  hideOnClickOutside,
-  hideOnEsc,
-  id,
-  isClosable,
-  onBeforeClose,
-  onClose,
-  open,
-  placement,
-  sentiment,
-  title
-}) => {
-  const headerContent = jsxs(Fragment, {
-    children: [jsx(Bullet, {
-      sentiment: sentiment,
-      icon: sentiment === 'warning' || sentiment === 'danger' ? 'information-outline' : 'check'
-    }), jsx(StyledTextTitle, {
-      as: "h2",
-      variant: "headingSmallStronger",
-      children: title
-    })]
-  });
-  const contextValue = useMemo(() => ({
-    sentiment
-  }), [sentiment]);
-  return jsx(Modal, {
-    ariaLabel: ariaLabel,
-    className: className,
-    "data-testid": dataTestId,
-    disclosure: disclosure,
-    hideOnClickOutside: hideOnClickOutside,
-    hideOnEsc: hideOnEsc,
-    id: id,
-    isClosable: isClosable,
-    onBeforeClose: onBeforeClose,
-    onClose: onClose,
-    open: open,
-    placement: placement,
-    size: "xsmall",
-    children: typeof children === 'function' ? modalProps => jsxs(DialogContext.Provider, {
-      value: contextValue,
-      children: [headerContent, children(modalProps)]
-    }) : jsxs(DialogContext.Provider, {
-      value: contextValue,
-      children: [headerContent, children]
-    })
-  });
-};
-
-/**
- * The Dialog component is used to show content on top of an overlay that requires user interaction.
- * @experimental This component is experimental and may be subject to breaking changes in the future.
- */
-const Dialog = /*#__PURE__*/Object.assign(BaseDialog, {
-  Buttons: DialogButtons,
-  Button: DialogButton,
-  CancelButton: DialogCancelButton,
-  Stack: DialogStack,
-  Text: DialogText,
-  useDialogContext
-});
-
-export { BaseDialog, Dialog };

package/dist/src/components/Dialog/subComponents/Button.js

@@ -1,21 +0,0 @@
-import { Button } from '../../Button/index.js';
-import { useDialogContext } from '../Context.js';
-import { jsx } from '@emotion/react/jsx-runtime';
-
-const DialogButton = ({
-  children,
-  onClick,
-  disabled,
-  tooltip
-}) => {
-  const context = useDialogContext();
-  return jsx(Button, {
-    sentiment: context.sentiment,
-    onClick: onClick,
-    disabled: disabled,
-    tooltip: tooltip,
-    children: children
-  });
-};
-
-export { DialogButton };

package/dist/src/components/Dialog/subComponents/Buttons.js

@@ -1,14 +0,0 @@
-import { Stack } from '../../Stack/index.js';
-import { jsxs } from '@emotion/react/jsx-runtime';
-
-const DialogButtons = ({
-  secondaryButton,
-  primaryButton
-}) => jsxs(Stack, {
-  direction: "row",
-  gap: 2,
-  justifyContent: "end",
-  children: [secondaryButton, primaryButton]
-});
-
-export { DialogButtons };

package/dist/src/components/Dialog/subComponents/CancelButton.js

@@ -1,14 +0,0 @@
-import { Button } from '../../Button/index.js';
-import { jsx } from '@emotion/react/jsx-runtime';
-
-const DialogCancelButton = ({
-  children,
-  onClick
-}) => jsx(Button, {
-  variant: "outlined",
-  sentiment: "neutral",
-  onClick: onClick,
-  children: children
-});
-
-export { DialogCancelButton };

package/dist/src/components/Dialog/subComponents/Stack.js

@@ -1,11 +0,0 @@
-import { Stack } from '../../Stack/index.js';
-import { jsx } from '@emotion/react/jsx-runtime';
-
-const DialogStack = ({
-  children
-}) => jsx(Stack, {
-  gap: 3,
-  children: children
-});
-
-export { DialogStack };

package/dist/src/components/Dialog/subComponents/Text.js

@@ -1,12 +0,0 @@
-import { Text } from '../../Text/index.js';
-import { jsx } from '@emotion/react/jsx-runtime';
-
-const DialogText = ({
-  children
-}) => jsx(Text, {
-  as: "p",
-  variant: "body",
-  children: children
-});
-
-export { DialogText };

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

@@ -1,112 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { Link } from '../Link/index.js';
-import { Stack } from '../Stack/index.js';
-import { Text } from '../Text/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 CONTAINER_SIZES = {
-  small: 720,
-  medium: 720,
-  large: 1140
-};
-const IMAGE_SIZES = {
-  small: 64,
-  medium: 96,
-  large: 240
-};
-const CenteredText = /*#__PURE__*/_styled(Text, {
-  target: "e1m66ceh2"
-})(process.env.NODE_ENV === "production" ? {
-  name: "1azakc",
-  styles: "text-align:center"
-} : {
-  name: "1azakc",
-  styles: "text-align:center",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const Container = /*#__PURE__*/_styled(Stack, {
-  shouldForwardProp: prop => !['size', 'bordered'].includes(prop),
-  target: "e1m66ceh1"
-})("max-width:", ({
-  size
-}) => CONTAINER_SIZES[size], "px;margin:0 auto;", ({
-  size
-}) => size === 'large' ? 'padding: 0 140px' : null, ";", ({
-  theme,
-  bordered
-}) => bordered ? `
-    border: 1px solid ${theme.colors.neutral.border};
-    border-radius: ${theme.radii.default};
-    ` : null, ";");
-const StyledStack = /*#__PURE__*/_styled(Stack, {
-  target: "e1m66ceh0"
-})("padding:", ({
-  theme
-}) => theme.space['5'], ";");
-/**
- * EmptyState component is used to display a message when there is no data to show.
- */
-const EmptyState = ({
-  image,
-  title,
-  size = 'large',
-  description,
-  primaryButton,
-  secondaryButton,
-  learnMore,
-  className,
-  bordered,
-  children,
-  'data-testid': dataTestId
-}) => jsx(Container, {
-  size: size,
-  bordered: bordered,
-  className: className,
-  "data-testid": dataTestId,
-  children: jsxs(StyledStack, {
-    gap: 3,
-    justifyContent: "center",
-    alignItems: "center",
-    children: [jsxs(Stack, {
-      gap: 2,
-      justifyContent: "center",
-      alignItems: "center",
-      children: [image && typeof image === 'string' ? jsx("img", {
-        width: IMAGE_SIZES[size],
-        alt: "",
-        src: image
-      }) : image, jsxs(Stack, {
-        gap: 0.5,
-        alignItems: "center",
-        children: [title ? jsx(CenteredText, {
-          as: "h2",
-          variant: "headingSmall",
-          prominence: "strong",
-          children: title
-        }) : null, jsx(CenteredText, {
-          as: "p",
-          variant: "body",
-          children: description
-        })]
-      })]
-    }), jsxs(Stack, {
-      gap: 2,
-      justifyContent: "center",
-      alignItems: "center",
-      children: [jsxs(Stack, {
-        direction: "row",
-        gap: 2,
-        children: [secondaryButton, primaryButton]
-      }), learnMore?.text ? jsx(Link, {
-        href: learnMore.link,
-        target: learnMore.target,
-        sentiment: "info",
-        iconPosition: "right",
-        children: learnMore.text
-      }) : null]
-    }), children]
-  })
-});
-
-export { EmptyState };

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

@@ -1,96 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { useState, useRef, useEffect } from 'react';
-import { jsx } from '@emotion/react/jsx-runtime';
-
-const ANIMATION_DURATION = 300; // in ms
-
-const StyledExpandable = /*#__PURE__*/_styled('div', {
-  shouldForwardProp: prop => !['opened', 'minHeight', 'animationDuration'].includes(prop),
-  target: "e5hc7t70"
-})("transition:max-height ", ({
-  animationDuration
-}) => animationDuration, "ms ease-out,opacity ", ({
-  animationDuration
-}) => animationDuration, "ms ease-out;overflow:", ({
-  opened
-}) => opened ? 'visible' : 'hidden', ";height:auto;max-height:", ({
-  opened,
-  minHeight
-}) => opened ? 'initial' : `${minHeight}px`, ";");
-
-/**
- * The Expandable component is a dynamic React component that allows for the expansion of its children content
- * based on its height. The component comes with a sleek and smooth animation, providing a visually pleasing
- * user experience.
- */
-const Expandable = ({
-  children,
-  opened,
-  minHeight = 0,
-  className,
-  'data-testid': dataTestId,
-  animationDuration = ANIMATION_DURATION
-}) => {
-  const [height, setHeight] = useState(null);
-  const transitionTimer = useRef();
-  const ref = useRef(null);
-
-  /**
-   * At mount, we set the height variable to the height of the content only if the component is closed.
-   * This is to ensure we don't have animation when the component is opened at mount.
-   */
-  useEffect(() => {
-    if (ref.current) {
-      setHeight(ref.current.scrollHeight ?? 0);
-    }
-  }, [ref.current?.scrollHeight]);
-
-  /**
-   * Here we set maxHeight to the height of the content when the component is opened
-   * and after 300ms we set maxHeight to initial to let the content grow with animation.
-   * Setting it to initial is required to be able to have nested expandable or the height won't follow.
-   */
-  useEffect(() => {
-    if (opened && ref.current && height) {
-      ref.current.style.maxHeight = `${height}px`;
-      ref.current.style.visibility = '';
-      transitionTimer.current = setTimeout(() => {
-        if (ref.current) {
-          ref.current.style.maxHeight = 'initial';
-          ref.current.style.overflow = 'visible';
-          ref.current.style.visibility = '';
-        }
-      }, ANIMATION_DURATION);
-    } else {
-      clearTimeout(transitionTimer.current);
-      if (ref.current && height) {
-        ref.current.style.maxHeight = `${height}px`;
-        transitionTimer.current = setTimeout(() => {
-          if (ref.current) {
-            ref.current.style.maxHeight = `${minHeight}px`;
-            ref.current.style.overflow = 'hidden';
-            setTimeout(() => {
-              if (ref.current && !minHeight) {
-                ref.current.style.visibility = 'hidden';
-              }
-            }, ANIMATION_DURATION);
-          }
-        }, 0);
-      }
-    }
-    return () => {
-      clearTimeout(transitionTimer.current);
-    };
-  }, [height, minHeight, opened]);
-  return jsx(StyledExpandable, {
-    "data-testid": dataTestId,
-    ref: ref,
-    className: className,
-    opened: opened,
-    minHeight: minHeight,
-    animationDuration: animationDuration,
-    children: children
-  });
-};
-
-export { Expandable, StyledExpandable };

package/dist/src/components/GlobalAlert/GlobalAlertLink.js

@@ -1,38 +0,0 @@
-import { useTheme } from '@emotion/react';
-import { Link } from '../Link/index.js';
-import { jsx } from '@emotion/react/jsx-runtime';
-
-const GlobalAlertLink = ({
-  children,
-  href,
-  target,
-  download,
-  rel,
-  className,
-  onClick,
-  'aria-label': ariaLabel,
-  oneLine = false,
-  'data-testid': dataTestId
-}) => {
-  const {
-    theme
-  } = useTheme();
-  return jsx(Link, {
-    href: href,
-    target: target,
-    download: download,
-    sentiment: "neutral",
-    prominence: theme === 'light' ? 'stronger' : 'strong',
-    size: "small",
-    variant: "inline",
-    rel: rel,
-    className: className,
-    onClick: onClick,
-    "aria-label": ariaLabel,
-    oneLine: oneLine,
-    "data-testid": dataTestId,
-    children: children
-  });
-};
-
-export { GlobalAlertLink };