@ultraviolet/ui 1.51.0 → 1.51.2

package/dist/src/components/SelectInputV2/SelectInputProvider.js

@@ -1,169 +0,0 @@
-import { useMemo, useState, useReducer, createContext, useContext } from 'react';
-import { jsx } from '@emotion/react/jsx-runtime';
-
-const SelectInputContext = /*#__PURE__*/createContext({
-  options: [],
-  multiselect: false,
-  onSearch: () => {},
-  isDropdownVisible: false,
-  setIsDropdownVisible: () => {},
-  searchInput: '',
-  setSearchInput: () => {},
-  selectAll: {
-    label: ''
-  },
-  selectAllGroup: false,
-  numberOfOptions: 0,
-  displayedOptions: [],
-  selectedData: {
-    allSelected: false,
-    selectedGroups: [],
-    selectedValues: []
-  },
-  setSelectedData: () => {},
-  onChange: () => {}
-});
-const useSelectInput = () => useContext(SelectInputContext);
-const SelectInputProvider = ({
-  options,
-  multiselect,
-  selectAll,
-  value,
-  selectAllGroup,
-  numberOfOptions,
-  children,
-  onChange
-}) => {
-  const currentValue = useMemo(() => {
-    if (value) {
-      if (Array.isArray(value)) {
-        return value;
-      }
-      return [value];
-    }
-    return [];
-  }, [value]);
-  const selectedGroups = useMemo(() => {
-    if (Array.isArray(options)) {
-      return [];
-    }
-    return Object.keys(options).filter(group => options[group].every(groupOption => currentValue.includes(groupOption.value)));
-  }, [currentValue, options]);
-  const [displayedOptions, setDisplayedOptions] = useState(options);
-  const [isDropdownVisible, setIsDropdownVisible] = useState(false);
-  const [searchInput, setSearchInput] = useState('');
-  const allValues = useMemo(() => {
-    if (!Array.isArray(options)) {
-      return Object.keys(options).map(group => options[group].filter(option => !option.disabled)).flat();
-    }
-    return options;
-  }, [options]);
-  const allGroups = useMemo(() => {
-    if (!Array.isArray(options)) {
-      return Object.keys(options);
-    }
-    return [];
-  }, [options]);
-  const reducer = (state, action) => {
-    switch (action.type) {
-      case 'selectAll':
-        if (state.allSelected) {
-          return {
-            selectedValues: [],
-            allSelected: false,
-            selectedGroups: []
-          };
-        }
-        return {
-          selectedValues: allValues.map(option => option.value),
-          allSelected: true,
-          selectedGroups: allGroups
-        };
-      case 'selectGroup':
-        if (!Array.isArray(options)) {
-          if (state.selectedGroups.includes(action.selectedGroup)) {
-            return {
-              selectedValues: [...state.selectedValues].filter(selectedValue => !options[action.selectedGroup].find(option => option.value === selectedValue)),
-              allSelected: false,
-              selectedGroups: state.selectedGroups.filter(selectedGroup => selectedGroup !== action.selectedGroup)
-            };
-          }
-          const newSelectedValues = [...state.selectedValues];
-          options[action.selectedGroup].map(option => newSelectedValues.find(aValue => aValue === option.value) || option.disabled ? null : newSelectedValues.push(option.value));
-          return {
-            selectedValues: newSelectedValues,
-            allSelected: newSelectedValues.length === numberOfOptions,
-            selectedGroups: [...state.selectedGroups, action.selectedGroup]
-          };
-        }
-        return state;
-      case 'selectOption':
-        if (multiselect) {
-          if (state.selectedValues.includes(action.clickedOption.value)) {
-            return {
-              selectedValues: state.selectedValues.filter(val => val !== action.clickedOption.value),
-              allSelected: false,
-              selectedGroups: action.group && state.selectedGroups.includes(action.group) ? state.selectedGroups.filter(selectedGroup => selectedGroup !== action.group) : []
-            };
-          }
-          return {
-            selectedValues: [...state.selectedValues, action.clickedOption.value],
-            allSelected: state.selectedValues.length + 1 === numberOfOptions,
-            selectedGroups: !Array.isArray(options) && action.group && options[action.group].every(option => [...state.selectedValues, action.clickedOption.value].includes(option.value) || option.disabled) ? [...state.selectedGroups, action.group] : state.selectedGroups
-          };
-        }
-        return {
-          selectedValues: [action.clickedOption.value],
-          allSelected: false,
-          selectedGroups: state.selectedGroups
-        };
-      case 'clearAll':
-        return {
-          selectedGroups: [],
-          selectedValues: [],
-          allSelected: false
-        };
-      case 'update':
-        // update the selected values to only keep non-disabled one
-        return {
-          selectedGroups: state.selectedGroups,
-          allSelected: state.allSelected,
-          selectedValues: state.selectedValues.filter(selectedValue => {
-            if (!Array.isArray(options)) {
-              return Object.keys(options).some(group => options[group].some(option => option.value === selectedValue && !option.disabled));
-            }
-            return options.some(option => option.value === selectedValue && !option.disabled);
-          })
-        };
-      default:
-        return state;
-    }
-  };
-  const [selectedData, setSelectedData] = useReducer(reducer, {
-    selectedValues: currentValue,
-    allSelected: false,
-    selectedGroups
-  });
-  const providerValue = useMemo(() => ({
-    onSearch: setDisplayedOptions,
-    isDropdownVisible,
-    setIsDropdownVisible,
-    searchInput,
-    setSearchInput,
-    options,
-    multiselect,
-    selectAll,
-    selectAllGroup,
-    numberOfOptions,
-    displayedOptions,
-    selectedData,
-    setSelectedData,
-    onChange
-  }), [displayedOptions, isDropdownVisible, multiselect, numberOfOptions, options, searchInput, selectAll, selectAllGroup, selectedData, onChange]);
-  return jsx(SelectInputContext.Provider, {
-    value: providerValue,
-    children: children
-  });
-};
-
-export { SelectInputProvider, useSelectInput };

package/dist/src/components/SelectInputV2/findOptionInOptions.js

@@ -1,11 +0,0 @@
-const findOptionInOptions = (options, optionValue) => {
-  let flatOptions = [];
-  if (!Array.isArray(options)) {
-    flatOptions = Object.keys(options).map(group => options[group]).flat();
-  } else {
-    flatOptions = options;
-  }
-  return flatOptions.find(option => option.value === optionValue);
-};
-
-export { findOptionInOptions };

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

@@ -1,137 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { Icon } from '@ultraviolet/icons';
-import { useRef } from 'react';
-import { Stack } from '../Stack/index.js';
-import { Text } from '../Text/index.js';
-import { Dropdown } from './Dropdown.js';
-import { SelectBar } from './SelectBar.js';
-import { SelectInputProvider } from './SelectInputProvider.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 SelectInputContainer = /*#__PURE__*/_styled("div", {
-  target: "ebdnz3x1"
-})(process.env.NODE_ENV === "production" ? {
-  name: "1d3w5wq",
-  styles: "width:100%"
-} : {
-  name: "1d3w5wq",
-  styles: "width:100%",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const HelperText = /*#__PURE__*/_styled(Text, {
-  target: "ebdnz3x0"
-})("padding-top:", ({
-  theme
-}) => theme.space['0.5'], ";");
-
-/**
- * SelectInputV2 component is used to select one or many elements from a selection.
- */
-const SelectInputV2 = ({
-  name,
-  id,
-  onBlur,
-  onFocus,
-  onChange,
-  'aria-label': ariaLabel,
-  value,
-  label,
-  helper,
-  options,
-  size = 'large',
-  emptyState,
-  descriptionDirection = 'column',
-  success,
-  error,
-  'data-testid': dataTestId,
-  className,
-  footer,
-  placeholderSearch = 'Search in list',
-  placeholder = 'Select item',
-  searchable = true,
-  disabled = false,
-  readOnly = false,
-  clearable = true,
-  multiselect = false,
-  required = false,
-  labelDescription,
-  autofocus,
-  loadMore,
-  optionalInfoPlacement = 'right',
-  isLoading,
-  selectAll,
-  selectAllGroup = false
-}) => {
-  const ref = useRef(null);
-  const numberOfOptions = Array.isArray(options) ? options.length : Object.values(options).reduce((acc, current) => acc + current.filter(option => !option.disabled).length, 0);
-  return jsx(SelectInputProvider, {
-    options: options,
-    multiselect: multiselect,
-    selectAll: selectAll,
-    value: value,
-    selectAllGroup: selectAllGroup,
-    numberOfOptions: numberOfOptions,
-    onChange: onChange,
-    children: jsxs(SelectInputContainer, {
-      id: id,
-      onBlur: onBlur,
-      onFocus: onFocus,
-      "data-testid": dataTestId,
-      className: className,
-      "aria-label": name,
-      children: [jsx(Dropdown, {
-        emptyState: emptyState,
-        descriptionDirection: descriptionDirection,
-        searchable: searchable,
-        placeholder: placeholderSearch,
-        footer: footer,
-        refSelect: ref,
-        loadMore: loadMore,
-        optionalInfoPlacement: optionalInfoPlacement,
-        isLoading: isLoading,
-        children: jsxs(Stack, {
-          gap: 0.5,
-          "aria-label": ariaLabel,
-          children: [jsxs(Stack, {
-            direction: "row",
-            gap: 0.5,
-            children: [label ? jsx(Text, {
-              as: "label",
-              variant: size === 'large' ? 'bodyStrong' : 'bodySmallStrong',
-              children: label
-            }) : null, required && label ? jsx(Icon, {
-              name: "asterisk",
-              sentiment: "danger",
-              size: 8
-            }) : null, labelDescription ?? null]
-          }), jsx(SelectBar, {
-            size: size,
-            clearable: clearable,
-            readOnly: readOnly,
-            disabled: disabled,
-            placeholder: placeholder,
-            success: success,
-            error: error,
-            autoFocus: autofocus,
-            innerRef: ref
-          })]
-        })
-      }), !error && !success ? jsx(HelperText, {
-        variant: "caption",
-        as: "p",
-        sentiment: "neutral",
-        prominence: "default",
-        children: helper
-      }) : null, error || success ? jsx(HelperText, {
-        variant: "caption",
-        as: "p",
-        sentiment: error ? 'danger' : 'success',
-        prominence: "default",
-        children: error || success
-      }) : null]
-    })
-  });
-};
-
-export { SelectInputV2 };

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

@@ -1,175 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { forwardRef, useRef, useCallback } from 'react';
-import { Checkbox } from '../Checkbox/index.js';
-import { Radio } from '../Radio/index.js';
-import { Stack } from '../Stack/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 Container = /*#__PURE__*/_styled(Stack, {
-  target: "e1s5n3hj3"
-})("&[data-has-label='false']>:first-child{margin-bottom:-", ({
-  theme
-}) => theme.space['0.5'], ";}padding:", ({
-  theme
-}) => theme.space['2'], ";border-radius:", ({
-  theme
-}) => theme.radii.default, ";transition:border-color 200ms ease,box-shadow 200ms ease;cursor:pointer;background:", ({
-  theme
-}) => theme.colors.neutral.background, ";border:1px solid ", ({
-  theme
-}) => theme.colors.neutral.border, ";color:", ({
-  theme
-}) => theme.colors.neutral.text, ";&[data-checked='true']{border:1px solid ", ({
-  theme
-}) => theme.colors.primary.border, ";}&[data-error='true']{border:1px solid ", ({
-  theme
-}) => theme.colors.danger.border, ";}&[data-disabled='true']{border:1px solid ", ({
-  theme
-}) => theme.colors.neutral.borderDisabled, ";color:", ({
-  theme
-}) => theme.colors.neutral.textDisabled, ";background:", ({
-  theme
-}) => theme.colors.neutral.backgroundDisabled, ";cursor:not-allowed;}&:hover,&:focus-within,&:active{&:not([data-error='true']):not([data-disabled='true']){border:1px solid ", ({
-  theme
-}) => theme.colors.primary.border, ";&[data-cheked='false']{box-shadow:", ({
-  theme
-}) => theme.shadows.hoverPrimary, ";}}}");
-const StyledStack = /*#__PURE__*/_styled(Stack, {
-  target: "e1s5n3hj2"
-})("&[data-has-label='true']{padding-left:", ({
-  theme
-}) => theme.space['4'], ";}&[data-has-label='false']{display:contents;}");
-const StyledElement = /*#__PURE__*/_styled('div', {
-  shouldForwardProp: prop => !['showTick', 'hasLabel'].includes(prop),
-  target: "e1s5n3hj1"
-})("display:inline-flex;align-items:start;&[data-checked='true']{color:", ({
-  theme
-}) => theme.colors.primary.text, ";}&[data-error='true']{color:", ({
-  theme
-}) => theme.colors.danger.text, ";}&[aria-disabled='true']{color:", ({
-  theme
-}) => theme.colors.neutral.textDisabled, ";}input+svg{", ({
-  showTick
-}) => !showTick ? `display: none;` : null, ";}label{", ({
-  showTick,
-  hasLabel
-}) => !showTick && !hasLabel ? `display: none;` : null, ";}");
-const StyledRadio = /*#__PURE__*/StyledElement.withComponent(Radio, {
-  target: "e1s5n3hj4"
-});
-const OverloadedCheckbox = /*#__PURE__*/StyledElement.withComponent(Checkbox, {
-  target: "e1s5n3hj5"
-});
-const StyledCheckbox = /*#__PURE__*/_styled(OverloadedCheckbox, {
-  target: "e1s5n3hj0"
-})(process.env.NODE_ENV === "production" ? {
-  name: "1wopizl",
-  styles: "label{width:100%;}pointer-events:none"
-} : {
-  name: "1wopizl",
-  styles: "label{width:100%;}pointer-events:none",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-/**
- * SelectableCard is a component that can be used to create a radio or checkbox card.
- * It can be used to create a list of selectable items or a single selectable item.
- */
-const SelectableCard = /*#__PURE__*/forwardRef(({
-  name,
-  value,
-  onChange,
-  showTick = false,
-  type = 'radio',
-  checked = false,
-  disabled = false,
-  children,
-  className,
-  isError,
-  onFocus,
-  onBlur,
-  tooltip,
-  id,
-  label,
-  'data-testid': dataTestId
-}, ref) => {
-  const innerRef = useRef(null);
-  const ParentContainer = useCallback(({
-    children: subChildren
-  }) => {
-    if (tooltip) {
-      return jsx(Stack, {
-        flex: 1,
-        children: jsx(Tooltip, {
-          text: tooltip,
-          children: subChildren
-        })
-      });
-    }
-    return jsx(Tooltip, {
-      children: subChildren
-    });
-  }, [tooltip]);
-  return jsx(ParentContainer, {
-    children: jsxs(Container, {
-      onClick: () => {
-        if (innerRef?.current) {
-          innerRef.current.click();
-        }
-      },
-      className: className,
-      "data-checked": checked,
-      "data-disabled": disabled,
-      "data-error": isError,
-      "data-testid": dataTestId,
-      "data-type": type,
-      "data-has-label": !!label,
-      ref: ref,
-      alignItems: "start",
-      direction: "column",
-      gap: 0.5,
-      flex: 1,
-      children: [type === 'radio' ? jsx(StyledRadio, {
-        name: name,
-        value: value,
-        onChange: onChange,
-        showTick: showTick,
-        checked: checked,
-        disabled: disabled,
-        error: isError,
-        onFocus: onFocus,
-        onBlur: onBlur,
-        hasLabel: !!label,
-        id: id,
-        ref: innerRef,
-        "data-error": isError,
-        label: label
-      }) : jsx(StyledCheckbox, {
-        name: name,
-        value: value,
-        onChange: onChange,
-        showTick: showTick,
-        checked: checked,
-        disabled: disabled,
-        error: isError,
-        onFocus: onFocus,
-        onBlur: onBlur,
-        hasLabel: !!label,
-        id: id,
-        ref: innerRef,
-        "data-error": isError,
-        children: label
-      }), children ? jsx(StyledStack, {
-        "data-has-label": !!label && showTick,
-        width: "100%",
-        children: typeof children === 'function' ? children({
-          checked,
-          disabled
-        }) : children
-      }) : null]
-    })
-  });
-});
-
-export { SelectableCard };

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

@@ -1,141 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { Icon } from '@ultraviolet/icons';
-import { useMemo, createContext, useContext } from 'react';
-import { Row } from '../Row/index.js';
-import { SelectableCard } from '../SelectableCard/index.js';
-import { Stack } from '../Stack/index.js';
-import { Text } from '../Text/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 SelectableCardGroupContext = /*#__PURE__*/createContext(undefined);
-const CardSelectableCard = ({
-  value,
-  disabled,
-  children,
-  className,
-  isError,
-  onFocus,
-  onBlur,
-  tooltip,
-  id,
-  label,
-  'data-testid': dataTestId
-}) => {
-  const context = useContext(SelectableCardGroupContext);
-  if (!context) {
-    throw new Error('SelectableCardGroup.Card can only be used inside a SelectableCardGroup');
-  }
-  const {
-    groupName,
-    onChange,
-    groupValue,
-    type,
-    showTick
-  } = context;
-  return jsx(SelectableCard, {
-    name: groupName,
-    value: value,
-    showTick: showTick,
-    type: type,
-    disabled: disabled,
-    className: className,
-    isError: isError,
-    onFocus: onFocus,
-    onBlur: onBlur,
-    tooltip: tooltip,
-    id: id,
-    label: label,
-    onChange: onChange,
-    checked: typeof groupValue === 'object' ? groupValue.includes(value) : groupValue === value,
-    "data-testid": dataTestId,
-    children: children
-  });
-};
-const FieldSet = /*#__PURE__*/_styled("fieldset", {
-  target: "e1cxe6lb1"
-})(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: "e1cxe6lb0"
-})(process.env.NODE_ENV === "production" ? {
-  name: "1nglpc5",
-  styles: "vertical-align:super"
-} : {
-  name: "1nglpc5",
-  styles: "vertical-align:super",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-/**
- * SelectableCardGroup is a component that allows users to select cards from a list of cards using SelectableCard.
- */
-const SelectableCardGroup = ({
-  legend,
-  value,
-  className,
-  helper,
-  error,
-  columns = 1,
-  children,
-  onChange,
-  name,
-  required = false,
-  type,
-  showTick = false
-}) => {
-  const contextValue = useMemo(() => ({
-    groupName: name,
-    groupValue: value,
-    onChange,
-    required,
-    type,
-    showTick
-  }), [name, value, onChange, required, type, showTick]);
-  return jsx(SelectableCardGroupContext.Provider, {
-    value: contextValue,
-    children: jsxs(Stack, {
-      gap: 1,
-      children: [jsx(FieldSet, {
-        className: className,
-        children: jsxs(Stack, {
-          gap: 1.5,
-          children: [legend ? jsxs(Text, {
-            as: "legend",
-            variant: "bodyStrong",
-            children: [legend && jsxs(Fragment, {
-              children: [legend, " \xA0"]
-            }), required ? jsx(StyledRequiredIcon, {
-              name: "asterisk",
-              color: "danger",
-              size: 8
-            }) : null]
-          }) : null, jsx(Row, {
-            gap: 2,
-            templateColumns: `repeat(${columns}, minmax(0, 1fr))`,
-            children: children
-          })]
-        })
-      }), helper ? jsx(Text, {
-        as: "span",
-        variant: "caption",
-        prominence: "weak",
-        sentiment: "neutral",
-        children: helper
-      }) : null, error ? jsx(Text, {
-        as: "span",
-        variant: "caption",
-        sentiment: "danger",
-        children: error
-      }) : null]
-    })
-  });
-};
-SelectableCardGroup.Card = CardSelectableCard;
-
-export { SelectableCardGroup };

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

@@ -1,73 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { Icon } from '@ultraviolet/icons';
-import { jsxs, jsx } from '@emotion/react/jsx-runtime';
-
-const StyledIconWrapper = /*#__PURE__*/_styled('div', {
-  shouldForwardProp: prop => !['direction'].includes(prop),
-  target: "e1d1zom92"
-})("display:flex;flex-direction:", ({
-  direction
-}) => direction === 'vertical' ? 'column' : 'row', ";align-items:center;");
-const StyledIcon = /*#__PURE__*/_styled(Icon, {
-  target: "e1d1zom91"
-})("fill:", ({
-  color,
-  theme
-}) => theme.colors[color].borderWeak, ";");
-const StyledHr = /*#__PURE__*/_styled('hr', {
-  shouldForwardProp: prop => !['direction', 'thickness', 'color', 'hasIcon'].includes(prop),
-  target: "e1d1zom90"
-})("margin:0;border:0;width:", ({
-  direction,
-  thickness = 1
-}) => direction === 'vertical' ? `${thickness}px` : 'auto', ";height:", ({
-  direction,
-  thickness = 1
-}) => direction === 'horizontal' ? `${thickness}px` : 'auto', ";flex-shrink:0;background-color:", ({
-  theme,
-  color
-}) => theme.colors[color].borderWeak, ";", ({
-  hasIcon
-}) => hasIcon && `flex: 1;`, ";");
-/**
- * Separator component used to separate content with a horizontal or vertical line.
- */
-const Separator = ({
-  direction = 'horizontal',
-  thickness = 1,
-  color = 'neutral',
-  icon,
-  className,
-  'data-testid': dataTestId
-}) => icon ? jsxs(StyledIconWrapper, {
-  role: "separator",
-  "aria-orientation": direction,
-  direction: direction,
-  className: className,
-  "data-testid": dataTestId,
-  children: [jsx(StyledHr, {
-    direction: direction,
-    thickness: thickness,
-    color: color,
-    hasIcon: true
-  }), jsx(StyledIcon, {
-    name: icon,
-    size: 24,
-    color: color
-  }), jsx(StyledHr, {
-    direction: direction,
-    thickness: thickness,
-    color: color,
-    hasIcon: true
-  })]
-}) : jsx(StyledHr, {
-  role: "separator",
-  "aria-orientation": direction,
-  direction: direction,
-  thickness: thickness,
-  color: color,
-  className: className,
-  "data-testid": dataTestId
-});
-
-export { Separator };