@ultraviolet/ui 1.51.0 → 1.51.2

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

@@ -1,610 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { useTheme, css } from '@emotion/react';
-import { Icon } from '@ultraviolet/icons';
-import React, { forwardRef, useState, useId, useMemo, Children, useEffect } from 'react';
-import Select, { components } from 'react-select';
-import isJSONString from '../../helpers/isJSON.js';
-import * as animations from '../../utils/animations.js';
-import { Expandable } from '../Expandable/index.js';
-import { Separator } from '../Separator/index.js';
-import { Stack } from '../Stack/index.js';
-import { Text } from '../Text/index.js';
-import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
-
-const StyledSeparator = /*#__PURE__*/_styled(Separator, {
-  target: "e11gt5pw5"
-})("background-color:", ({
-  theme
-}) => theme.colors.neutral.border, ";height:100%;");
-const getControlColor = ({
-  state,
-  error,
-  theme
-}) => {
-  if (state.isDisabled) return theme.colors.neutral.textDisabled;
-  if (error) return theme.colors.danger.text;
-  return theme.colors.neutral.text;
-};
-const getPlaceholderColor = ({
-  state,
-  error,
-  theme
-}) => {
-  if (state.isDisabled) return theme.colors.neutral.textDisabled;
-  if (error) return theme.colors.danger.text;
-  return theme.colors.neutral.textWeak;
-};
-const getOptionColor = ({
-  state,
-  theme
-}) => {
-  let color = theme.colors.neutral.text;
-  let backgroundColor = theme.colors.neutral.backgroundWeakElevated;
-  if (state.isDisabled) {
-    backgroundColor = theme.colors.neutral.backgroundDisabled;
-    color = theme.colors.neutral.textDisabled;
-  } else if (state.isSelected) {
-    backgroundColor = theme.colors.primary.backgroundStrong;
-    color = theme.colors.primary.textStrong;
-  } else if (state.isFocused) {
-    backgroundColor = theme.colors.primary.background;
-  }
-  return {
-    backgroundColor,
-    color
-  };
-};
-const getSelectStyles = ({
-  error,
-  customStyle,
-  animation,
-  animationDuration,
-  noTopLabel,
-  theme
-}) => ({
-  control: (provided, state) => ({
-    ...provided,
-    backgroundColor: state.isDisabled ? theme.colors.neutral.backgroundDisabled : theme.colors.neutral.background,
-    borderColor: error ? theme.colors.danger.border : theme.colors.neutral.border,
-    borderRadius: '4px',
-    borderStyle: 'solid',
-    borderWidth: '1px',
-    boxShadow: 'none',
-    color: getControlColor({
-      error,
-      state,
-      theme
-    }),
-    fontSize: '16px',
-    fontWeight: 500,
-    lineHeight: '24px',
-    minHeight: '48px',
-    transition: 'border-color 200ms ease, box-shadow 200ms ease',
-    cursor: state.isDisabled ? 'not-allowed' : 'pointer',
-    ...(!state.isDisabled && {
-      ':focus-within': {
-        borderColor: error ? theme.colors.danger.border : theme.colors.primary.border,
-        boxShadow: error ? theme.shadows.focusDanger : theme.shadows.focusPrimary
-      },
-      ':hover': {
-        borderColor: error ? theme.colors.danger.borderHover : theme.colors.primary.borderHover
-      }
-    }),
-    ...(customStyle(state)?.['control'] || {}),
-    animation: animation ? `${animationDuration}ms ${animations[animation]}` : 'none'
-  }),
-  indicatorsContainer: provided => ({
-    ...provided,
-    maxHeight: '48px'
-  }),
-  indicatorSeparator: (provided, state) => ({
-    ...provided,
-    backgroundColor: theme.colors.neutral.border,
-    display: 'none',
-    ...(customStyle(state)?.['indicatorSeparator'] || {})
-  }),
-  input: provided => ({
-    ...provided,
-    flexGrow: 1,
-    marginLeft: 0,
-    paddingTop: noTopLabel ? 0 : 11
-  }),
-  menu: (provided, state) => ({
-    ...provided,
-    ...(customStyle(state)?.['menu'] || {}),
-    boxShadow: theme.shadows.menu
-  }),
-  menuList: (provided, state) => ({
-    ...provided,
-    backgroundColor: theme.colors.neutral.backgroundWeak,
-    maxHeight: '225px',
-    ...(customStyle(state)?.['menuList'] || {})
-  }),
-  menuPortal: (provided, state) => ({
-    ...provided,
-    zIndex: 10000,
-    ...(customStyle(state)?.['menuPortal'] || {})
-  }),
-  multiValue: (provided, state) => ({
-    ...provided,
-    alignItems: 'center',
-    backgroundColor: theme.colors.neutral.backgroundDisabled,
-    borderRadius: '4px',
-    color: theme.colors.neutral.text,
-    fontSize: '14px',
-    fontWeight: 500,
-    height: '24px',
-    justifyContent: 'center',
-    marginTop: theme.space[noTopLabel ? '0.5' : '2'],
-    textOverflow: 'ellipsis',
-    ...(customStyle(state)?.['multiValue'] || {})
-  }),
-  multiValueLabel: (provided, state) => ({
-    ...provided,
-    color: state.isDisabled ? theme.colors.neutral.textDisabled : theme.colors.neutral.text,
-    fontSize: '14px',
-    fontWeight: 'normal',
-    lineHeight: '20px',
-    ...(customStyle(state)?.['multiValueLabel'] || {})
-  }),
-  multiValueRemove: (provided, state) => ({
-    ...provided,
-    ...(state.isDisabled ? {
-      color: theme.colors.neutral.textDisabled,
-      cursor: 'none',
-      pointerEvents: 'none'
-    } : {
-      color: theme.colors.primary.text
-    }),
-    ':hover': {
-      color: state.isDisabled ? theme.colors.neutral.textDisabled : theme.colors.primary.text,
-      cursor: state.isDisabled ? 'none' : 'pointer',
-      pointerEvents: state.isDisabled ? 'none' : 'fill'
-    },
-    ...(customStyle(state)?.['multiValueRemove'] || {})
-  }),
-  option: (provided, state) => ({
-    ...provided,
-    ...getOptionColor({
-      state,
-      theme
-    }),
-    cursor: state.isDisabled ? 'not-allowed' : 'pointer',
-    ':active': {
-      backgroundColor: state.isDisabled ? theme.colors.neutral.backgroundDisabled : theme.colors.primary.background,
-      color: state.isDisabled ? theme.colors.neutral.textDisabled : theme.colors.primary.text
-    },
-    ':hover': {
-      backgroundColor: state.isDisabled ? theme.colors.neutral.backgroundDisabled : theme.colors.primary.background,
-      color: state.isDisabled ? theme.colors.neutral.textDisabled : theme.colors.neutral.text
-    },
-    ...(customStyle(state)?.['option'] || {})
-  }),
-  placeholder: (provided, state) => ({
-    ...provided,
-    color: getPlaceholderColor({
-      error,
-      state,
-      theme
-    }),
-    ...(customStyle(state)?.['placeholder'] || {})
-  }),
-  singleValue: (provided, state) => ({
-    ...provided,
-    color: state.isDisabled ? theme.colors.neutral.textDisabled : theme.colors.neutral.text,
-    marginLeft: state.hasValue ? 0 : undefined,
-    marginRight: state.hasValue ? 0 : undefined,
-    marginTop: !state.hasValue || noTopLabel ? 0 : '5px',
-    paddingLeft: state.hasValue ? 0 : undefined,
-    ...(customStyle(state)?.['singleValue'] || {})
-  }),
-  valueContainer: (provided, state) => ({
-    ...provided,
-    ...(customStyle(state)?.['valueContainer'] || {}),
-    cursor: state.isDisabled ? 'not-allowed' : undefined,
-    height: '100%',
-    label: {
-      display: noTopLabel ? 'none' : 'initial'
-    },
-    paddingTop: 0
-  })
-});
-const StyledContainer = /*#__PURE__*/_styled('div', {
-  shouldForwardProp: prop => !['isDisabled', 'additionalStyles'].includes(prop),
-  target: "e11gt5pw4"
-})("width:100%;", ({
-  isDisabled
-}) => isDisabled && `pointer-events: initial;`, ";", ({
-  additionalStyles
-}) => /*#__PURE__*/css(additionalStyles), ";");
-const StyledError = /*#__PURE__*/_styled("div", {
-  target: "e11gt5pw3"
-})("font-size:12px;color:", ({
-  theme
-}) => theme.colors.danger.text, ";padding-top:", ({
-  theme
-}) => theme.space['0.25'], ";");
-const SelectContainer = props => {
-  const {
-    children,
-    getStyles,
-    innerProps: {
-      onKeyDown
-    } = {},
-    isDisabled = false,
-    className,
-    selectProps: {
-      name = '',
-      error,
-      className: selectPropsClassName
-    } = {}
-  } = props;
-  return jsxs(StyledContainer, {
-    "data-testid": `select-input-${name}`,
-    additionalStyles: getStyles?.('container', props),
-    isDisabled: isDisabled,
-    className: [className, selectPropsClassName].filter(Boolean).join(' '),
-    onKeyDown: onKeyDown,
-    children: [children, jsx(Expandable, {
-      opened: !!error,
-      children: jsx(StyledError, {
-        children: error
-      })
-    })]
-  });
-};
-const StyledPlaceholder = /*#__PURE__*/_styled('label', {
-  shouldForwardProp: prop => !['error', 'hasValue', 'isDisabled', 'isMulti'].includes(prop),
-  target: "e11gt5pw2"
-})("position:absolute;left:0;font-weight:400;pointer-events:none;color:", ({
-  theme,
-  error
-}) => error ? theme.colors.danger.text : theme.colors.neutral.text, ";white-space:nowrap;width:100%;height:100%;font-size:16px;transition:transform 250ms ease;opacity:0;", ({
-  hasValue
-}) => hasValue && `
-    transform: translate(0, -8px) scale(0.8);
-    transform-origin: left;
-    padding-left: 8px;
-    left: 0;
-    top: 2px;
-    opacity: 1;
-  `, " ", ({
-  isDisabled,
-  hasValue
-}) => hasValue && isDisabled && 'opacity: 0.5', ";");
-const StyledText = /*#__PURE__*/_styled(Text, {
-  target: "e11gt5pw1"
-})("margin-left:", ({
-  theme
-}) => theme.space['1'], ";color:", ({
-  isSelectedAndNotFocused,
-  theme
-}) => isSelectedAndNotFocused ? theme.colors.primary.textStrong : undefined, ";");
-const MaxLineStyledText = /*#__PURE__*/_styled(StyledText, {
-  target: "e11gt5pw0"
-})("-webkit-line-clamp:3;margin-top:", ({
-  theme
-}) => theme.space['2'], ";");
-const ValueContainer = ({
-  isDisabled,
-  children,
-  selectProps: {
-    error,
-    labelId,
-    inputId,
-    ...selectProps
-  },
-  isMulti,
-  hasValue,
-  clearValue,
-  getStyles,
-  getValue,
-  getClassNames,
-  isRtl,
-  cx,
-  options,
-  selectOption,
-  setValue,
-  theme,
-  className,
-  innerProps
-}) => jsx(components.ValueContainer, {
-  clearValue: clearValue,
-  getStyles: getStyles,
-  getValue: getValue,
-  isRtl: isRtl,
-  cx: cx,
-  options: options,
-  selectOption: selectOption,
-  setValue: setValue,
-  theme: theme,
-  className: className,
-  innerProps: innerProps,
-  selectProps: selectProps,
-  isMulti: isMulti,
-  hasValue: hasValue,
-  isDisabled: isDisabled,
-  getClassNames: getClassNames,
-  children: jsxs(Fragment, {
-    children: [selectProps.placeholder ? jsx(StyledPlaceholder, {
-      as: "label",
-      id: labelId,
-      htmlFor: inputId,
-      "aria-live": "assertive",
-      error: error,
-      isMulti: isMulti,
-      isDisabled: isDisabled,
-      hasValue: hasValue,
-      children: selectProps.placeholder
-    }) : null, children]
-  })
-});
-const inputStyles = ({
-  isMulti
-}) => /*#__PURE__*/css("margin-left:0px;", !isMulti && 'caret-color: transparent', ";");
-const Input = ({
-  isMulti,
-  hasValue,
-  selectProps: {
-    inputId,
-    labelId,
-    placeholder,
-    ...selectProps
-  },
-  clearValue,
-  getStyles,
-  getValue,
-  isRtl,
-  cx,
-  options,
-  selectOption,
-  setValue,
-  theme,
-  className,
-  isHidden,
-  ...props
-}) => jsx(components.Input, {
-  ...props,
-  css: inputStyles({
-    isMulti
-  }),
-  id: inputId,
-  "aria-controls": labelId,
-  hasValue: hasValue,
-  isMulti: isMulti,
-  clearValue: clearValue,
-  getStyles: getStyles,
-  getValue: getValue,
-  isRtl: isRtl,
-  cx: cx,
-  options: options,
-  selectOption: selectOption,
-  setValue: setValue,
-  theme: theme,
-  className: className,
-  isHidden: isHidden,
-  selectProps: {
-    ...selectProps,
-    placeholder
-  }
-});
-const Option = ({
-  selectProps,
-  value,
-  label,
-  children,
-  data: {
-    inlineDescription,
-    description
-  },
-  isSelected,
-  data,
-  ...props
-}) => {
-  const [isFocused, setIsFocused] = useState(false);
-  return jsx("div", {
-    "data-testid": `option-${selectProps.name || ''}-${isJSONString(value) ? label : value}`,
-    onMouseOver: () => setIsFocused(true),
-    onFocus: () => setIsFocused(true),
-    onMouseOut: () => setIsFocused(false),
-    onBlur: () => setIsFocused(false),
-    children: jsxs(components.Option, {
-      ...props,
-      selectProps: selectProps,
-      label: label,
-      data: data,
-      isSelected: isSelected,
-      children: [children, inlineDescription ? jsx(StyledText, {
-        as: "span",
-        variant: "bodySmall",
-        isSelectedAndNotFocused: isSelected && !isFocused,
-        children: inlineDescription
-      }) : null, description ? jsx(MaxLineStyledText, {
-        as: "p",
-        variant: "bodySmall",
-        isSelectedAndNotFocused: isSelected && !isFocused,
-        children: description
-      }) : null]
-    })
-  });
-};
-const DropdownIndicator = props => {
-  const {
-    selectProps: {
-      isDisabled,
-      time,
-      required
-    }
-  } = props;
-  return jsx(components.DropdownIndicator, {
-    ...props,
-    children: jsxs(Stack, {
-      gap: 1,
-      direction: "row",
-      alignItems: "center",
-      children: [required ? jsx(Icon, {
-        name: "asterisk",
-        size: 10,
-        color: "danger"
-      }) : null, time ? jsx(StyledSeparator, {
-        direction: "vertical"
-      }) : null, jsx(Icon, {
-        name: time ? 'clock-outline' : 'arrow-down',
-        size: time ? 24 : 16,
-        disabled: isDisabled
-      })]
-    })
-  });
-};
-const ClearIndicator = props => {
-  const {
-    selectProps: {
-      checked,
-      error
-    },
-    innerProps: {
-      ref,
-      ...restInnerProps
-    }
-  } = props;
-  return jsx(components.ClearIndicator, {
-    ...props,
-    children: jsx(Icon, {
-      ...restInnerProps,
-      name: "close",
-      cursor: "pointer",
-      color: checked && 'primary' || error && 'danger' || 'neutral'
-    })
-  });
-};
-const MultiValueContainer = props => jsx(components.MultiValueContainer, {
-  ...props
-});
-const MultiValueLabel = props => jsx(components.MultiValueLabel, {
-  ...props
-});
-const MultiValueRemove = props => jsx(components.MultiValueRemove, {
-  ...props,
-  children: jsx(Icon, {
-    name: "close",
-    size: 16
-  })
-});
-const defaultCustomStyle = () => ({});
-const FwdSelectInput = ({
-  animation = 'pulse',
-  animationDuration = 1000,
-  animationOnChange = false,
-  children,
-  className,
-  customComponents,
-  customStyle = defaultCustomStyle,
-  disabled = false,
-  error,
-  innerRef,
-  inputId: inputIdProp,
-  isClearable = false,
-  isMulti = false,
-  isSearchable = true,
-  menuPortalTarget,
-  noTopLabel = false,
-  onBlur,
-  onChange,
-  onFocus,
-  options,
-  placeholder,
-  readOnly = false,
-  value,
-  name,
-  id: idProp,
-  time,
-  isLoading,
-  required,
-  emptyState,
-  'data-testid': dataTestId
-}) => {
-  const id = useId();
-  const inputId = inputIdProp ?? id;
-  const theme = useTheme();
-  const [isAnimated, setIsAnimated] = useState(false);
-  const currentValue = value?.value;
-
-  // Options need to keep the same reference otherwise react-select doesn't focus the selected option
-  const selectOptions = useMemo(() => options || Children.toArray(children).reduce((acc, child) => {
-    if ( /*#__PURE__*/React.isValidElement(child)) {
-      return [...acc, {
-        ...child.props,
-        label: child.props.children
-      }];
-    }
-    return acc;
-  }, []), [options, children]);
-  useEffect(() => {
-    if (animationOnChange) {
-      setIsAnimated(true);
-      setTimeout(() => setIsAnimated(false), animationDuration);
-    }
-  }, [setIsAnimated, animationOnChange, animationDuration, currentValue]);
-  return jsx(Select, {
-    components: {
-      ClearIndicator,
-      DropdownIndicator,
-      Input,
-      MultiValueContainer,
-      MultiValueLabel,
-      MultiValueRemove,
-      Option,
-      SelectContainer,
-      ValueContainer,
-      ...customComponents
-    },
-    placeholder: placeholder,
-    className: className,
-    isDisabled: disabled || readOnly,
-    isOptionDisabled: option => !!option.disabled,
-    styles: getSelectStyles({
-      animation: isAnimated ? animation : undefined,
-      animationDuration,
-      customStyle,
-      error,
-      noTopLabel,
-      theme
-    }),
-    options: selectOptions,
-    menuPortalTarget: menuPortalTarget || undefined,
-    isSearchable: isSearchable,
-    isClearable: isClearable,
-    isMulti: isMulti,
-    onBlur: onBlur,
-    onChange: onChange,
-    onFocus: onFocus,
-    value: value,
-    maxMenuHeight: 250,
-    inputId: inputId
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-    ,
-    ref: innerRef,
-    name: name,
-    id: idProp
-    // @ts-expect-error time prop doesn't exist in react-select but is used
-    ,
-    time: time,
-    isLoading: isLoading,
-    required: required,
-    noOptionsMessage: emptyState,
-    "data-testid": dataTestId
-  });
-};
-/**
- * SelectInput component is a wrapper around [react-select](https://react-select.com) component.
- * It provides a styled select input with a label and an error message.
- * @deprecated use SelectInputV2 component instead
- */
-const SelectInput = /*#__PURE__*/forwardRef((props, ref) => jsx(FwdSelectInput, {
-  innerRef: ref,
-  ...props
-}));
-SelectInput.displayName = 'SelectInput';
-SelectInput.Option = Option;
-
-export { SelectInput };