@ultraviolet/ui 1.51.0 → 1.51.2

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

@@ -1,122 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { Icon } from '@ultraviolet/icons';
-import { useMemo, createContext, useContext } from 'react';
-import { Stack } from '../Stack/index.js';
-import { Text } from '../Text/index.js';
-import { Toggle } from '../Toggle/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 ToggleGroupContext = /*#__PURE__*/createContext(undefined);
-/**
- * ToggleGroup is a component that allows you to group a set of Toggle components together under the same legend.
- */
-const ToggleGroupToggle = ({
-  disabled,
-  name,
-  value,
-  label,
-  helper,
-  className,
-  'data-testid': dataTestId
-}) => {
-  const context = useContext(ToggleGroupContext);
-  if (!context) {
-    throw new Error('ToggleGroup.Toggle can only be used inside a ToggleGroup');
-  }
-  const {
-    groupName,
-    onChange,
-    groupValues
-  } = context;
-  const ToggleName = `${groupName}.${name}`;
-  const ToggleValue = `${value}`;
-  return jsx(Toggle, {
-    onChange: onChange,
-    checked: groupValues?.includes(ToggleValue),
-    disabled: disabled,
-    name: ToggleName,
-    value: ToggleValue,
-    helper: helper,
-    className: className,
-    "data-testid": dataTestId,
-    label: label
-  });
-};
-const FieldSet = /*#__PURE__*/_styled("fieldset", {
-  target: "e1qvneex1"
-})(process.env.NODE_ENV === "production" ? {
-  name: "7o2an9",
-  styles: "border:none;padding:0;margin:0"
-} : {
-  name: "7o2an9",
-  styles: "border:none;padding:0;margin:0",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const StyledRequiredIcon = /*#__PURE__*/_styled(Icon, {
-  target: "e1qvneex0"
-})(process.env.NODE_ENV === "production" ? {
-  name: "1nglpc5",
-  styles: "vertical-align:super"
-} : {
-  name: "1nglpc5",
-  styles: "vertical-align:super",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const ToggleGroup = ({
-  legend,
-  value,
-  className,
-  helper,
-  error,
-  direction = 'column',
-  children,
-  onChange,
-  name,
-  required = false
-}) => {
-  const contextValue = useMemo(() => ({
-    groupName: name,
-    groupValues: value ?? [],
-    onChange
-  }), [name, value, onChange]);
-  return jsx(ToggleGroupContext.Provider, {
-    value: contextValue,
-    children: jsxs(Stack, {
-      gap: 1,
-      children: [jsx(FieldSet, {
-        className: className,
-        children: jsxs(Stack, {
-          gap: 1.5,
-          children: [jsxs(Text, {
-            as: "legend",
-            variant: "bodyStrong",
-            children: [legend, "\xA0", required ? jsx(StyledRequiredIcon, {
-              name: "asterisk",
-              color: "danger",
-              size: 8
-            }) : null]
-          }), jsx(Stack, {
-            gap: 2,
-            direction: direction,
-            children: children
-          })]
-        })
-      }), helper ? jsx(Text, {
-        as: "p",
-        variant: "bodySmall",
-        prominence: "weak",
-        children: helper
-      }) : null, error ? jsx(Text, {
-        as: "p",
-        variant: "bodySmall",
-        sentiment: "danger",
-        prominence: "weak",
-        children: error
-      }) : null]
-    })
-  });
-};
-ToggleGroup.Toggle = ToggleGroupToggle;
-
-export { ToggleGroup, ToggleGroupToggle };

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

@@ -1,55 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { forwardRef } from 'react';
-import { Popup } from '../Popup/index.js';
-import { 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 StyledPopup = /*#__PURE__*/_styled(Popup, {
-  target: "e1h4zly10"
-})(process.env.NODE_ENV === "production" ? {
-  name: "je8g23",
-  styles: "pointer-events:none"
-} : {
-  name: "je8g23",
-  styles: "pointer-events:none",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-
-/**
- * Tooltip component is used to display additional information on hover or focus.
- * It is used to explain the purpose of the element it is attached to.
- */
-const Tooltip = /*#__PURE__*/forwardRef(({
-  children,
-  text = '',
-  placement = 'auto',
-  id,
-  className,
-  containerFullWidth,
-  maxWidth = 232,
-  visible,
-  innerRef,
-  role = 'tooltip',
-  'data-testid': dataTestId,
-  portalTarget,
-  debounceDelay,
-  tabIndex
-}, tooltipRef) => jsx(StyledPopup, {
-  id: id,
-  ref: tooltipRef,
-  role: role,
-  "data-testid": dataTestId,
-  className: className,
-  containerFullWidth: containerFullWidth,
-  maxWidth: maxWidth,
-  visible: visible,
-  placement: placement,
-  text: text,
-  innerRef: innerRef,
-  portalTarget: portalTarget,
-  tabIndex: tabIndex,
-  debounceDelay: debounceDelay,
-  children: children
-}));
-
-export { Tooltip };

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

@@ -1,222 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { useId, useState, createRef } from 'react';
-import { jsx } from '@emotion/react/jsx-runtime';
-
-const SIZE_HEIGHT = {
-  xlarge: 64,
-  large: 48,
-  medium: 40,
-  small: 32
-};
-const SIZE_WIDTH = {
-  xlarge: 56,
-  large: 40,
-  medium: 32,
-  small: 24
-};
-const StyledInput = /*#__PURE__*/_styled('input', {
-  shouldForwardProp: prop => !['inputSize'].includes(prop),
-  target: "e1a2bx9q0"
-})("background:", ({
-  theme
-}) => theme.colors.neutral.background, ";border:solid 1px ", ({
-  'aria-invalid': error,
-  theme
-}) => error ? theme.colors.danger.border : theme.colors.neutral.border, ";color:", ({
-  'aria-invalid': error,
-  theme
-}) => error ? theme.colors.danger.text : theme.colors.neutral.text, ";", ({
-  inputSize,
-  theme
-}) => {
-  if (inputSize === 'small') {
-    return `
-           font-size: ${theme.typography.caption.fontSize};
-           font-weight: ${theme.typography.caption.weight};
-        `;
-  }
-  return `
-           font-size: ${theme.typography.body.fontSize};
-           font-weight: ${theme.typography.body.weight};
-         `;
-}, " text-align:center;border-radius:", ({
-  theme
-}) => theme.radii.default, ";margin-right:", ({
-  theme
-}) => theme.space['1'], ";width:", ({
-  inputSize
-}) => SIZE_WIDTH[inputSize], "px;height:", ({
-  inputSize
-}) => SIZE_HEIGHT[inputSize], "px;outline-style:none;transition:border-color 0.2s ease,box-shadow 0.2s ease;&:hover,&:focus{border-color:", ({
-  'aria-invalid': error,
-  theme
-}) => error ? theme.colors.danger.borderHover : theme.colors.primary.borderHover, ";}&:focus{box-shadow:", ({
-  'aria-invalid': error,
-  theme: {
-    shadows
-  }
-}) => error ? shadows.focusDanger : shadows.focusPrimary, ";}&:last-child{margin-right:0;}&::placeholder{color:", ({
-  disabled,
-  theme
-}) => disabled ? theme.colors.neutral.textWeakDisabled : theme.colors.neutral.textWeak, ";}", ({
-  disabled,
-  theme: {
-    colors
-  }
-}) => disabled && `cursor: default;
-    background-color: ${colors.neutral.backgroundDisabled};
-    border-color: ${colors.neutral.borderDisabled};
-    color: ${colors.neutral.textDisabled};
-
-    &:hover {
-      border: ${colors.neutral.borderDisabled}
-    }
-    `, ";");
-const DEFAULT_ON_FUNCTION = () => {};
-
-/**
- * Verification code allows you to enter a code in multiple fields (4 by default).
- */
-const VerificationCode = ({
-  disabled = false,
-  className,
-  error = false,
-  fields = 4,
-  initialValue = '',
-  inputId,
-  inputStyle = '',
-  size = 'large',
-  onChange = DEFAULT_ON_FUNCTION,
-  onComplete = DEFAULT_ON_FUNCTION,
-  placeholder = '',
-  required = false,
-  type = 'number',
-  'data-testid': dataTestId,
-  'aria-label': ariaLabel = 'Verification code'
-}) => {
-  const uniqueId = useId();
-  const valuesArray = Object.assign(new Array(fields).fill(''), initialValue.substring(0, fields).split(''));
-  const [values, setValues] = useState(valuesArray);
-  const inputRefs = Array.from({
-    length: fields
-  }, () => /*#__PURE__*/createRef());
-  const triggerChange = inputValues => {
-    const stringValue = inputValues.join('');
-    if (onChange) {
-      onChange(stringValue);
-    }
-    if (onComplete && stringValue.length >= fields) {
-      onComplete(stringValue);
-    }
-  };
-  const inputOnChange = index => event => {
-    let {
-      value
-    } = event.target;
-    if (type === 'number') {
-      value = event.target.value.replace(/[^\d]/gi, '');
-    }
-    const newValues = [...values];
-    if (value === '' || type === 'number' && !new RegExp(event.target.pattern).test(value)) {
-      newValues[index] = '';
-      setValues(newValues);
-      return;
-    }
-    const sanitizedValue = value[0]; // in case more than 1 char, we just take the first one
-    newValues[index] = sanitizedValue;
-    setValues(newValues);
-    const nextIndex = Math.min(index + 1, fields - 1);
-    const next = inputRefs[nextIndex];
-    next?.current?.focus();
-    triggerChange(newValues);
-  };
-  const inputOnKeyDown = index => event => {
-    const prevIndex = index - 1;
-    const nextIndex = index + 1;
-    const first = inputRefs[0];
-    const last = inputRefs[inputRefs.length - 1];
-    const prev = inputRefs[prevIndex];
-    const next = inputRefs[nextIndex];
-    const vals = [...values];
-    switch (event.key) {
-      case 'Backspace':
-        event.preventDefault();
-        if (values[index]) {
-          vals[index] = '';
-          setValues(vals);
-          triggerChange(vals);
-        } else if (prev) {
-          vals[prevIndex] = '';
-          prev?.current?.focus();
-          setValues(vals);
-          triggerChange(vals);
-        }
-        break;
-      case 'ArrowLeft':
-        event.preventDefault();
-        prev?.current?.focus();
-        break;
-      case 'ArrowRight':
-        event.preventDefault();
-        next?.current?.focus();
-        break;
-      case 'ArrowUp':
-        event.preventDefault();
-        first?.current?.focus();
-        break;
-      case 'ArrowDown':
-        event.preventDefault();
-        last?.current?.focus();
-        break;
-    }
-  };
-  const inputOnFocus = event => event.target.select();
-  const inputOnPaste = currentIndex => event => {
-    event.preventDefault();
-    const pastedValue = [...event.clipboardData.getData('Text').split('')].map(copiedValue =>
-    // Replace non number char with empty char when type is number
-    type === 'number' ? copiedValue.replace(/[^\d]/gi, '') : copiedValue);
-
-    // Trim array to avoid array overflow
-    pastedValue.splice(fields - currentIndex < pastedValue.length ? fields - currentIndex : pastedValue.length);
-    setValues(vals => {
-      const newArray = vals.slice();
-      newArray.splice(currentIndex, pastedValue.length, ...pastedValue);
-      return newArray;
-    });
-
-    // we select min value between the end of inputs and valid pasted chars
-    const nextIndex = Math.min(currentIndex + pastedValue.filter(item => item !== '').length, inputRefs.length - 1);
-    const next = inputRefs[nextIndex];
-    next?.current?.focus();
-    triggerChange(pastedValue);
-  };
-  return jsx("div", {
-    className: className,
-    "data-testid": dataTestId,
-    children: values.map((value, index) => jsx(StyledInput, {
-      css: [inputStyle],
-      "aria-invalid": error,
-      inputSize: size,
-      type: type === 'number' ? 'tel' : type,
-      pattern: type === 'number' ? '[0-9]*' : undefined
-      // eslint-disable-next-line react/no-array-index-key
-      ,
-
-      "data-testid": index,
-      value: value,
-      id: `${inputId || uniqueId}-${index}`,
-      ref: inputRefs[index],
-      onChange: inputOnChange(index),
-      onKeyDown: inputOnKeyDown(index),
-      onPaste: inputOnPaste(index),
-      onFocus: inputOnFocus,
-      disabled: disabled,
-      required: required,
-      placeholder: placeholder?.[index] ?? '',
-      "aria-label": `${ariaLabel} ${index}`
-    }, index))
-  });
-};
-
-export { VerificationCode };

package/dist/src/helpers/legend.js

@@ -1,13 +0,0 @@
-const getLegendColor = theme => {
-  const {
-    colors
-  } = theme;
-  return Object.keys(colors.other.data.charts).filter(key => !['success', 'danger'].includes(key)).sort((a, b) => {
-    if (Number(a.replace('data', '')) < Number(b.replace('data', ''))) {
-      return -1;
-    }
-    return 1;
-  }).map(key => colors.other.data.charts[key]);
-};
-
-export { getLegendColor };

package/dist/src/helpers/recursivelyGetChildrenString.js

@@ -1,11 +0,0 @@
-const recursivelyGetChildrenString = children => {
-  if (typeof children === 'string') return children;
-  if (Array.isArray(children)) return ''; // We can't determine which string to display in tooltip
-  if (typeof children === 'object') {
-    const childProps = children?.['props']?.['children'];
-    if (childProps) return recursivelyGetChildrenString(childProps);
-  }
-  return '';
-};
-
-export { recursivelyGetChildrenString as default };

package/dist/src/hooks/useIsOverflowing.js

@@ -1,34 +0,0 @@
-import { useState, useEffect } from 'react';
-
-/**
- * This hook checks if the element has overflow based on the offsetWidth and scrollWidth of the element.
- */
-const useIsOverflowing = (ref, callback) => {
-  const [isOverflowing, setIsOverflowing] = useState(false);
-  useEffect(() => {
-    const handleResize = () => {
-      if (!ref.current) {
-        return;
-      }
-      const element = ref.current;
-      const hasOverflow = element.clientWidth < element.scrollWidth;
-      setIsOverflowing(hasOverflow);
-      if (callback) callback(hasOverflow);
-    };
-
-    // This will add the function into the browser event queue after the DOM is painted
-    // which is needed to get the correct offsetWidth and scrollWidth
-    setTimeout(() => handleResize(), 0);
-
-    // Listen for resize events
-    window.addEventListener('resize', handleResize);
-
-    // Cleanup the event listener
-    return () => {
-      window.removeEventListener('resize', handleResize);
-    };
-  }, [ref, callback]);
-  return isOverflowing;
-};
-
-export { useIsOverflowing };

package/dist/src/index.js

@@ -1,77 +0,0 @@
-export { extendTheme } from './theme/index.js';
-export { consoleDarkTheme as darkTheme, consoleLightTheme as theme } from '@ultraviolet/themes';
-export { bounce, fadeIn, fadeOut, flash, ping, pulse, quickScaleDown, scaleBack, scaleDown, scaleForward, scaleUp, sketchIn, sketchOut, slideDownLarge, slideFromBottom, slideFromLeft, slideFromRight, slideFromTop, slideToBottom, slideToLeft, slideToRight, slideToTop, slideUpLarge, unfoldIn, unfoldOut, zoomIn, zoomOut } from './utils/animations.js';
-export { default as Breakpoint } from './utils/responsive/Breakpoint.js';
-export { down, up } from './utils/responsive/utilities.js';
-export { getUUID } from './utils/ids.js';
-export { default as normalize } from './utils/normalize.js';
-export { ActionBar } from './components/ActionBar/index.js';
-export { Alert } from './components/Alert/index.js';
-export { Avatar } from './components/Avatar/index.js';
-export { Badge } from './components/Badge/index.js';
-export { Banner } from './components/Banner/index.js';
-export { BarChart } from './components/BarChart/index.js';
-export { BarStack } from './components/BarStack/index.js';
-export { Breadcrumbs } from './components/Breadcrumbs/index.js';
-export { Bullet } from './components/Bullet/index.js';
-export { Button } from './components/Button/index.js';
-export { Card } from './components/Card/index.js';
-export { Carousel } from './components/Carousel/index.js';
-export { Checkbox } from './components/Checkbox/index.js';
-export { CopyButton } from './components/CopyButton/index.js';
-export { DateInput } from './components/DateInput/index.js';
-export { Dialog } from './components/Dialog/index.js';
-export { EmptyState } from './components/EmptyState/index.js';
-export { Expandable } from './components/Expandable/index.js';
-export { LineChart } from './components/LineChart/index.js';
-export { Link } from './components/Link/index.js';
-export { List } from './components/List/index.js';
-export { Loader } from './components/Loader/index.js';
-export { Menu } from './components/Menu/index.js';
-export { Meter } from './components/Meter/index.js';
-export { Modal } from './components/Modal/index.js';
-export { Notice } from './components/Notice/index.js';
-export { CheckboxGroup, CheckboxGroupCheckbox } from './components/CheckboxGroup/index.js';
-export { NumberInput } from './components/NumberInput/index.js';
-export { NumberInputV2 } from './components/NumberInputV2/index.js';
-export { Pagination } from './components/Pagination/index.js';
-export { PasswordCheck } from './components/PasswordCheck/index.js';
-export { PasswordStrengthMeter } from './components/PasswordStrengthMeter/index.js';
-export { PieChart } from './components/PieChart/index.js';
-export { Popover } from './components/Popover/index.js';
-export { Popup } from './components/Popup/index.js';
-export { ProgressBar } from './components/ProgressBar/index.js';
-export { Radio } from './components/Radio/index.js';
-export { Row } from './components/Row/index.js';
-export { SelectableCard } from './components/SelectableCard/index.js';
-export { SelectInput } from './components/SelectInput/index.js';
-export { Separator } from './components/Separator/index.js';
-export { Skeleton } from './components/Skeleton/index.js';
-export { Snippet } from './components/Snippet/index.js';
-export { Stack } from './components/Stack/index.js';
-export { Status } from './components/Status/index.js';
-export { StepList } from './components/StepList/index.js';
-export { Stepper } from './components/Stepper/index.js';
-export { SwitchButton } from './components/SwitchButton/index.js';
-export { Table } from './components/Table/index.js';
-export { Tabs } from './components/Tabs/index.js';
-export { Tag } from './components/Tag/index.js';
-export { TagInput } from './components/TagInput/index.js';
-export { TagList } from './components/TagList/index.js';
-export { Text } from './components/Text/index.js';
-export { TextArea } from './components/TextArea/index.js';
-export { TextInput } from './components/TextInput/index.js';
-export { TextInputV2 } from './components/TextInputV2/index.js';
-export { TimeInput } from './components/TimeInput/index.js';
-export { ToastContainer, toast } from './components/Toaster/index.js';
-export { Toggle } from './components/Toggle/index.js';
-export { ToggleGroup } from './components/ToggleGroup/index.js';
-export { Tooltip } from './components/Tooltip/index.js';
-export { VerificationCode } from './components/VerificationCode/index.js';
-export { RadioGroup } from './components/RadioGroup/index.js';
-export { Icon } from '@ultraviolet/icons';
-export { MenuV2 } from './components/MenuV2/index.js';
-export { GlobalAlert } from './components/GlobalAlert/index.js';
-export { NotificationContainer, notification } from './components/Notification/index.js';
-export { SelectableCardGroup } from './components/SelectableCardGroup/index.js';
-export { SelectInputV2 } from './components/SelectInputV2/index.js';

package/dist/src/theme/index.js

@@ -1,29 +0,0 @@
-import { consoleLightTheme } from '@ultraviolet/themes';
-export { consoleDarkTheme as darkTheme, consoleLightTheme as default } from '@ultraviolet/themes';
-import deepmerge from 'deepmerge';
-
-/**
- * @deprecated use UltravioletUITheme instead
- */
-
-const {
-  colors,
-  shadows,
-  typography,
-  space,
-  radii,
-  screens
-} = consoleLightTheme;
-/**
- * Will extend theme with new theme properties
- * @param {UltravioletUITheme} baseTheme the theme you want to extend from, by default it is set to light theme
- * @param {RecursivePartial<UltravioletUITheme>} extendedTheme the properties of a new theme you want to apply from baseTheme
- */
-const extendTheme = extendedTheme => deepmerge(consoleLightTheme, extendedTheme);
-
-// This type exclude overlay color
-
-const SENTIMENTS = ['primary', 'secondary', 'neutral', 'success', 'danger', 'warning', 'info'];
-const SENTIMENTS_WITHOUT_NEUTRAL = /*#__PURE__*/SENTIMENTS.filter(sentiment => sentiment !== 'neutral');
-
-export { SENTIMENTS, SENTIMENTS_WITHOUT_NEUTRAL, colors, extendTheme, radii, screens, shadows, space, typography };

package/dist/src/utils/capitalize.js

@@ -1,3 +0,0 @@
-const capitalize = value => value.charAt(0).toUpperCase() + value.slice(1);
-
-export { capitalize as default };

package/dist/src/utils/ids.js

@@ -1,7 +0,0 @@
-const chr4 = () => Math.random().toString(16).slice(-4);
-const uuid = () => Array.from({
-  length: 8
-}, chr4).join('');
-const getUUID = (prefix = '') => `${prefix ? `${prefix}-` : ''}${uuid()}`;
-
-export { getUUID };

package/dist/src/utils/responsive/Breakpoint.js

@@ -1,12 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { up, down } from './utilities.js';
-
-const Breakpoint = /*#__PURE__*/_styled("div", {
-  target: "e1ehbeci0"
-})("display:none;", props => `
-    ${props.up ? up(props.up, 'display: block;') : ''}
-    ${props.down ? down(props.down, 'display: block;') : ''}
-  `, ";");
-var Breakpoint$1 = Breakpoint;
-
-export { Breakpoint$1 as default };