@ultraviolet/ui 1.51.1 → 1.51.3

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

@@ -1,130 +0,0 @@
-import _styled from '@emotion/styled/base';
-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 StyledInfo = /*#__PURE__*/_styled("div", {
-  target: "e18yw4y80"
-})(process.env.NODE_ENV === "production" ? {
-  name: "13vy23x",
-  styles: "align-content:center"
-} : {
-  name: "13vy23x",
-  styles: "align-content:center",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const DisplayOption = ({
-  option,
-  optionalInfoPlacement,
-  descriptionDirection
-}) => {
-  if (descriptionDirection === 'row' && optionalInfoPlacement === 'left') {
-    return jsx(Stack, {
-      gap: 0.5,
-      direction: "row",
-      justifyContent: "left",
-      "data-testid": `option-stack-${option.value}`,
-      children: jsxs(Stack, {
-        gap: 0.5,
-        direction: "row",
-        alignItems: "center",
-        children: [option.optionalInfo ?? null, jsx(Text, {
-          as: "span",
-          variant: "body",
-          placement: "left",
-          children: option.label
-        }), option.description ? jsx(Text, {
-          as: "span",
-          variant: "bodySmall",
-          sentiment: "neutral",
-          placement: "left",
-          prominence: "weak",
-          children: option.description
-        }) : null]
-      })
-    });
-  }
-  if (descriptionDirection === 'row' && optionalInfoPlacement === 'right') {
-    return jsxs(Stack, {
-      gap: 0.5,
-      direction: "row",
-      justifyContent: "space-between",
-      alignItems: "baseline",
-      "data-testid": `option-stack-${option.value}`,
-      children: [jsxs(Stack, {
-        gap: 0.5,
-        direction: "row",
-        children: [jsx(Text, {
-          as: "span",
-          variant: "body",
-          placement: "left",
-          children: option.label
-        }), option.description ? jsx(Text, {
-          as: "span",
-          variant: "bodySmall",
-          sentiment: "neutral",
-          placement: "left",
-          prominence: "weak",
-          children: option.description
-        }) : null]
-      }), option.optionalInfo ? jsx(StyledInfo, {
-        children: option.optionalInfo
-      }) : null]
-    });
-  }
-  if (descriptionDirection === 'column' && optionalInfoPlacement === 'left') {
-    return jsxs(Stack, {
-      gap: 0.5,
-      direction: "row",
-      justifyContent: option.optionalInfo ? 'left' : 'space-between',
-      alignItems: "normal",
-      children: [option.optionalInfo ?? null, jsxs(Stack, {
-        gap: 0.5,
-        direction: "column",
-        "data-testid": `option-stack-${option.value}`,
-        children: [jsx(Text, {
-          as: "span",
-          variant: "body",
-          placement: "left",
-          children: option.label
-        }), option.description ? jsx(Text, {
-          as: "span",
-          variant: "bodySmall",
-          sentiment: "neutral",
-          placement: "left",
-          prominence: "weak",
-          children: option.description
-        }) : null]
-      })]
-    });
-  }
-  return jsxs(Stack, {
-    gap: 0.5,
-    direction: "column",
-    alignItems: "normal",
-    "data-testid": `option-stack-${option.value}`,
-    children: [jsxs(Stack, {
-      gap: 0.5,
-      direction: "row",
-      justifyContent: "space-between",
-      children: [jsx(Text, {
-        as: "span",
-        variant: "body",
-        placement: "left",
-        children: option.label
-      }), option.optionalInfo ? jsx(StyledInfo, {
-        children: option.optionalInfo
-      }) : null]
-    }), option.description ? jsx(Text, {
-      as: "span",
-      variant: "bodySmall",
-      sentiment: "neutral",
-      placement: "left",
-      prominence: "weak",
-      children: option.description
-    }) : null]
-  });
-};
-
-export { DisplayOption };

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

@@ -1,122 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { Icon } from '@ultraviolet/icons';
-import { useRef } from 'react';
-import { TextInputV2 } from '../TextInputV2/index.js';
-import { useSelectInput } from './SelectInputProvider.js';
-import { jsx } from '@emotion/react/jsx-runtime';
-
-const StyledInput = /*#__PURE__*/_styled(TextInputV2, {
-  target: "e1ag0nf0"
-})("padding-top:", ({
-  theme
-}) => theme.space[1.5], ";padding-bottom:", ({
-  theme
-}) => theme.space[1.5], ";padding-left:", ({
-  theme
-}) => theme.space[2], ";padding-right:", ({
-  theme
-}) => theme.space[2], ";");
-const findClosestOption = (options, searchInput) => {
-  if (searchInput) {
-    if (!Array.isArray(options)) {
-      const possibleOptions = {
-        ...options
-      };
-      Object.keys(possibleOptions).map(group => {
-        possibleOptions[group] = possibleOptions[group].filter(option => !option.disabled);
-        return null;
-      });
-      if (Object.keys(possibleOptions).some(group => possibleOptions[group].length > 0)) {
-        const firstFit = Object.keys(possibleOptions).map(group => possibleOptions[group][0]).filter(value => !!value)[0];
-        return firstFit;
-      }
-    } else {
-      const possibleOptions = [...options].filter(option => !option.disabled);
-      if (possibleOptions.length > 0) {
-        return possibleOptions[0];
-      }
-    }
-  }
-  return null;
-};
-const SearchBarDropdown = ({
-  placeholder,
-  displayedOptions,
-  setSearchBarActive
-}) => {
-  const searchInputRef = useRef(null);
-  const {
-    onChange,
-    onSearch,
-    setSearchInput,
-    searchInput,
-    options,
-    multiselect,
-    setSelectedData,
-    selectedData
-  } = useSelectInput();
-  const handleChange = search => {
-    if (search.length > 0) {
-      // case insensitive search
-      const regex = RegExp(search, 'i');
-      if (!Array.isArray(options)) {
-        const filteredOptions = {
-          ...options
-        };
-        Object.keys(filteredOptions).map(group => {
-          filteredOptions[group] = filteredOptions[group].filter(option => option.searchText ? option.searchText.match(regex) : option.value.match(regex));
-          return null;
-        });
-        onSearch(filteredOptions);
-      } else {
-        const filteredOptions = [...options].filter(option => option.searchText ? option.searchText.match(regex) : option.value.match(regex));
-        onSearch(filteredOptions);
-      }
-    } else {
-      onSearch(options);
-    }
-    setSearchInput(search);
-  };
-  const handleKeyDown = (key, search) => {
-    if (key === 'Enter') {
-      const closestOption = findClosestOption(displayedOptions, search);
-      if (closestOption) {
-        if (multiselect) {
-          setSelectedData({
-            type: 'selectOption',
-            clickedOption: closestOption,
-            group: !Array.isArray(options) ? Object.keys(options).filter(group => options[group].includes(closestOption))[0] : undefined
-          });
-          onChange?.(selectedData.selectedValues.includes(closestOption.value) ? selectedData.selectedValues : [...selectedData.selectedValues, closestOption.value]);
-          setSearchInput(closestOption.searchText ?? closestOption.value);
-        } else {
-          setSelectedData({
-            type: 'selectOption',
-            clickedOption: closestOption
-          });
-          onChange?.(selectedData.selectedValues[0] ?? '');
-        }
-      }
-    }
-  };
-  return jsx(StyledInput, {
-    value: searchInput,
-    onChange: event => handleChange(event),
-    placeholder: placeholder,
-    onFocus: () => setSearchBarActive(true),
-    onBlur: () => setSearchBarActive(false),
-    "data-testid": "search-bar",
-    prefix: jsx(Icon, {
-      name: "search",
-      size: "small",
-      sentiment: "neutral"
-    }),
-    onKeyDown: event => handleKeyDown(event.key, searchInput),
-    size: "medium",
-    autoFocus: true,
-    "aria-label": "search-bar",
-    ref: searchInputRef
-  });
-};
-
-export { SearchBarDropdown };

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

@@ -1,282 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { Icon } from '@ultraviolet/icons';
-import { useRef, useState, useMemo, useEffect } from 'react';
-import { Button } from '../Button/index.js';
-import { Stack } from '../Stack/index.js';
-import { Tag } from '../Tag/index.js';
-import { Text } from '../Text/index.js';
-import { useSelectInput } from './SelectInputProvider.js';
-import { findOptionInOptions } from './findOptionInOptions.js';
-import { INPUT_SIZE_HEIGHT, SIZES_TAG } from './types.js';
-import { jsxs, 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 StateStack = /*#__PURE__*/_styled(Stack, {
-  target: "ejy0aca3"
-})("padding-right:", ({
-  theme
-}) => theme.space['2'], ";display:flex;");
-const StyledInputWrapper = /*#__PURE__*/_styled(Stack, {
-  target: "ejy0aca2"
-})("display:flex;padding:", ({
-  theme
-}) => theme.space[1], ";padding-right:0;padding-left:", ({
-  theme
-}) => theme.space[2], ";cursor:pointer;box-shadow:none;background:", ({
-  theme
-}) => theme.colors.neutral.background, ";border-radius:", ({
-  theme
-}) => theme.radii.default, ";&[data-readonly='true']{background:", ({
-  theme
-}) => theme.colors.neutral.backgroundWeak, ";border-color:", ({
-  theme
-}) => theme.colors.neutral.border, ";cursor:default;}&[data-disabled='true']{background:", ({
-  theme
-}) => theme.colors.neutral.backgroundDisabled, ";border-color:", ({
-  theme
-}) => theme.colors.neutral.borderDisabled, ";cursor:not-allowed;}&[data-size='small']{height:", INPUT_SIZE_HEIGHT.small, "px;}&[data-size='medium']{height:", INPUT_SIZE_HEIGHT.medium, "px;}&[data-size='large']{height:", INPUT_SIZE_HEIGHT.large, "px;}&[data-state='neutral']{border:1px solid ", ({
-  theme
-}) => theme.colors.neutral.border, ";}&[data-state='success']{border:1px solid ", ({
-  theme
-}) => theme.colors.success.border, ";}&[data-state='danger']{border:1px solid ", ({
-  theme
-}) => theme.colors.danger.border, ";}&:not([data-disabled='true']):not([data-readonly]):hover{border-color:", ({
-  theme
-}) => theme.colors.primary.border, ";}&:not([data-disabled='true']):not([data-readonly]):active{box-shadow:", ({
-  theme
-}) => theme.shadows.focusPrimary, ";}&:hover,:focus{border-color:", ({
-  theme
-}) => theme.colors.primary.borderHover, ";outline:none;}&[data-dropdownvisible='true']{box-shadow:", ({
-  theme
-}) => theme.shadows.focusPrimary, ";border-color:", ({
-  theme
-}) => theme.colors.primary.borderHover, ";}");
-const CustomTag = /*#__PURE__*/_styled(Tag, {
-  target: "ejy0aca1"
-})(process.env.NODE_ENV === "production" ? {
-  name: "1snt5jp",
-  styles: "height:fit-content;width:fit-content"
-} : {
-  name: "1snt5jp",
-  styles: "height:fit-content;width:fit-content",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const StyledPlaceholder = /*#__PURE__*/_styled(Text, {
-  target: "ejy0aca0"
-})("color:", ({
-  theme
-}) => theme.colors.neutral.textWeak, ";text-size:", ({
-  theme
-}) => theme.typography.body.fontSize, ";display:flex;flex:1;align-self:center;&[data-disabled='true']{color:", ({
-  theme
-}) => theme.colors.neutral.textWeakDisabled, ";}");
-const isValidSelectedValue = (selectedValue, options) => !Array.isArray(options) ? Object.keys(options).some(group => options[group].some(option => option.value === selectedValue && !option.disabled)) : options.some(option => option.value === selectedValue && !option.disabled);
-const DisplayValues = ({
-  refTag,
-  nonOverflowedValues,
-  disabled,
-  readOnly,
-  overflowed,
-  overflowAmount,
-  size
-}) => {
-  const {
-    multiselect,
-    selectedData,
-    setSelectedData,
-    options,
-    onChange
-  } = useSelectInput();
-  return multiselect ? jsxs(Stack, {
-    direction: "row",
-    gap: "1",
-    wrap: "nowrap",
-    ref: refTag,
-    alignItems: "center",
-    children: [nonOverflowedValues.map(option => jsx(CustomTag, {
-      "data-testid": "selected-options-tags",
-      sentiment: "neutral",
-      disabled: disabled,
-      onClose: !readOnly ? event => {
-        event.stopPropagation();
-        setSelectedData({
-          type: 'selectOption',
-          clickedOption: option
-        });
-        const newSelectedValues = selectedData.selectedValues?.filter(val => val !== option.value);
-        onChange?.(newSelectedValues);
-      } : undefined,
-      children: option?.label
-    }, option?.value)), overflowed ? jsxs(Tag, {
-      sentiment: "neutral",
-      disabled: disabled,
-      "data-testid": "plus-tag",
-      "aria-label": "Plus tag",
-      children: [jsx(Icon, {
-        name: "plus"
-      }), overflowAmount]
-    }, "+") : null]
-  }) : jsx(Text, {
-    as: "p",
-    variant: size === 'large' ? 'body' : 'bodySmall',
-    children: selectedData.selectedValues[0] ? findOptionInOptions(options, selectedData.selectedValues[0])?.label : null
-  });
-};
-const SelectBar = ({
-  size,
-  clearable,
-  disabled,
-  readOnly,
-  placeholder,
-  success,
-  error,
-  autoFocus,
-  innerRef
-}) => {
-  const {
-    isDropdownVisible,
-    onChange,
-    setIsDropdownVisible,
-    options,
-    selectedData,
-    setSelectedData,
-    multiselect
-  } = useSelectInput();
-  const openable = !(readOnly || disabled);
-  const refTag = useRef(null);
-  const width = innerRef.current?.offsetWidth;
-  const [overflowed, setOverflowed] = useState(false);
-  const [overflowAmount, setOverflowAmount] = useState(0);
-  const [nonOverflowedValues, setNonOverFlowedValues] = useState(() => {
-    if (selectedData.selectedValues[0]) {
-      const firstSelectOption = findOptionInOptions(options, selectedData.selectedValues[0]);
-      return firstSelectOption ? [firstSelectOption] : [];
-    }
-    return [];
-  });
-  const state = useMemo(() => {
-    if (error) {
-      return 'danger';
-    }
-    if (success) {
-      return 'success';
-    }
-    return 'neutral';
-  }, [error, success]);
-  useEffect(() => {
-    // When too many items are selected, too avoid overflow, compute the number of tags to display and add a + tag
-    let tagsWidth = 0;
-    let computedOverflowAmount = 0;
-    let computedNonOverflowedValues = [];
-    const newSelectedValues = selectedData.selectedValues.filter(selectedValue => isValidSelectedValue(selectedValue, options));
-    for (const selectedValue of newSelectedValues) {
-      const selectedOption = findOptionInOptions(options, selectedValue);
-      if (selectedOption?.label && width && isValidSelectedValue(selectedValue, options)) {
-        const lengthValue = selectedOption.value.length; // Find a better way to find the number of displayed characters?
-        const totalTagWidth = SIZES_TAG.tagWidth + SIZES_TAG.letterWidth * lengthValue;
-        if (totalTagWidth + tagsWidth > width - 100) {
-          computedOverflowAmount += 1;
-          setOverflowAmount(computedOverflowAmount);
-        } else {
-          computedNonOverflowedValues = [...computedNonOverflowedValues, selectedOption];
-          setNonOverFlowedValues(computedNonOverflowedValues);
-          tagsWidth += totalTagWidth;
-        }
-      }
-    }
-    if (computedOverflowAmount === 0) {
-      setOverflowed(false);
-    } else {
-      setOverflowed(true);
-    }
-    setOverflowAmount(computedOverflowAmount);
-  }, [options, selectedData.selectedValues, width]);
-  useEffect(() => {
-    setSelectedData({
-      type: 'update'
-    });
-  }, [setSelectedData, options]);
-  return jsxs(StyledInputWrapper, {
-    "data-disabled": disabled,
-    "data-readonly": readOnly,
-    "data-size": size,
-    "data-dropdownvisible": isDropdownVisible,
-    "data-state": state,
-    direction: "row",
-    wrap: "nowrap",
-    gap: "1",
-    justifyContent: "space-between",
-    alignItems: "center",
-    onClick: openable ? () => setIsDropdownVisible(!isDropdownVisible) : undefined,
-    "data-testid": "select-bar",
-    autoFocus: autoFocus,
-    onKeyDown: event => {
-      if (event.key === 'ArrowDown') {
-        if (!isDropdownVisible) {
-          setIsDropdownVisible(true);
-        } else {
-          document.getElementById(`option-0`)?.focus();
-        }
-      }
-      return ['Enter', ' '].includes(event.key) && openable ? setIsDropdownVisible(!isDropdownVisible) : null;
-    },
-    ref: innerRef,
-    "aria-labelledby": "select bar",
-    "aria-haspopup": "listbox",
-    "aria-expanded": isDropdownVisible,
-    "aria-controls": "select-dropdown",
-    tabIndex: 0,
-    children: [selectedData.selectedValues.length > 0 ? jsx(DisplayValues, {
-      refTag: refTag,
-      nonOverflowedValues: nonOverflowedValues,
-      disabled: disabled,
-      readOnly: readOnly,
-      overflowed: overflowed,
-      overflowAmount: overflowAmount,
-      size: size
-    }) : jsx(StyledPlaceholder, {
-      as: "p",
-      variant: size === 'large' ? 'body' : 'bodySmall',
-      "data-disabled": disabled,
-      children: placeholder
-    }), jsxs(StateStack, {
-      direction: "row",
-      gap: 1,
-      alignItems: "center",
-      children: [error ? jsx(Icon, {
-        name: "alert",
-        sentiment: "danger"
-      }) : null, success && !error ? jsx(Icon, {
-        name: "checkbox-circle-outline",
-        sentiment: "success"
-      }) : null, clearable && selectedData.selectedValues.length > 0 ? jsx(Button, {
-        "aria-label": "clear value",
-        disabled: disabled || ![selectedData.selectedValues[0]] || readOnly,
-        variant: "ghost",
-        size: "small",
-        icon: "close",
-        onClick: event => {
-          event.stopPropagation();
-          setSelectedData({
-            type: 'clearAll'
-          });
-          if (multiselect) {
-            onChange?.([]);
-          } else {
-            onChange?.('');
-          }
-        },
-        sentiment: "neutral",
-        "data-testid": "clear-all"
-      }) : null, jsx(Icon, {
-        "aria-label": "show dropdown",
-        size: "small",
-        name: "arrow-down",
-        sentiment: "neutral",
-        disabled: disabled || readOnly
-      })]
-    })]
-  });
-};
-
-export { SelectBar };

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 };