@ultraviolet/ui 1.0.0

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

@@ -0,0 +1,662 @@
+import _styled from '@emotion/styled/base';
+import { useTheme, css } from '@emotion/react';
+import { forwardRef, useState, useId, useMemo, useEffect } from 'react';
+import flattenChildren from 'react-flatten-children';
+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 { Icon } from '../Icon/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:", _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.colors.neutral.borderWeak;
+}, ";height:100%;");
+const getControlColor = _ref2 => {
+  let {
+    state,
+    error,
+    theme
+  } = _ref2;
+  if (state.isDisabled) return theme.colors.neutral.textDisabled;
+  if (error) return theme.colors.danger.text;
+  return theme.colors.neutral.text;
+};
+const getPlaceholderColor = _ref3 => {
+  let {
+    state,
+    error,
+    theme
+  } = _ref3;
+  if (state.isDisabled) return theme.colors.neutral.textDisabled;
+  if (error) return theme.colors.danger.textWeak;
+  return theme.colors.neutral.textWeak;
+};
+const getOptionColor = _ref4 => {
+  let {
+    state,
+    theme
+  } = _ref4;
+  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 = _ref5 => {
+  let {
+    error,
+    customStyle,
+    animation,
+    animationDuration,
+    noTopLabel,
+    theme
+  } = _ref5;
+  return {
+    control: (provided, state) => ({
+      ...provided,
+      backgroundColor: state.isDisabled ? theme.colors.neutral.backgroundDisabled : theme.colors.neutral.backgroundWeak,
+      borderColor: error ? theme.colors.danger.border : theme.colors.neutral.borderWeak,
+      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,
+          svg: {
+            fill: error ? theme.colors.danger.text : theme.colors.primary.text
+          }
+        },
+        ':hover': {
+          borderColor: error ? theme.colors.danger.borderHover : theme.colors.primary.borderHover,
+          svg: {
+            fill: error ? theme.colors.danger.text : theme.colors.primary.text
+          }
+        }
+      }),
+      ...(customStyle(state)?.['control'] || {}),
+      animation: animation ? `${animationDuration}ms ${animations[animation]}` : 'none'
+    }),
+    indicatorsContainer: provided => ({
+      ...provided,
+      maxHeight: '48px'
+    }),
+    indicatorSeparator: (provided, state) => ({
+      ...provided,
+      backgroundColor: theme.colors.neutral.borderWeak,
+      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%;", _ref6 => {
+  let {
+    isDisabled
+  } = _ref6;
+  return isDisabled && `pointer-events: initial;`;
+}, ";", _ref7 => {
+  let {
+    additionalStyles
+  } = _ref7;
+  return /*#__PURE__*/css(additionalStyles);
+}, ";");
+const StyledError = /*#__PURE__*/_styled("div", {
+  target: "e11gt5pw3"
+})("font-size:12px;color:", _ref8 => {
+  let {
+    theme
+  } = _ref8;
+  return theme.colors.danger.text;
+}, ";padding-top:", _ref9 => {
+  let {
+    theme
+  } = _ref9;
+  return 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:", _ref10 => {
+  let {
+    theme,
+    error
+  } = _ref10;
+  return 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;", _ref11 => {
+  let {
+    hasValue
+  } = _ref11;
+  return hasValue && `
+    transform: translate(0, -8px) scale(0.8);
+    transform-origin: left;
+    padding-left: 8px;
+    left: 0;
+    top: 2px;
+    opacity: 1;
+  `;
+}, " ", _ref12 => {
+  let {
+    isDisabled,
+    hasValue
+  } = _ref12;
+  return hasValue && isDisabled && 'opacity: 0.5';
+}, ";");
+const StyledText = /*#__PURE__*/_styled(Text, {
+  target: "e11gt5pw1"
+})("margin-left:", _ref13 => {
+  let {
+    theme
+  } = _ref13;
+  return theme.space['1'];
+}, ";color:", _ref14 => {
+  let {
+    isSelectedAndNotFocused,
+    theme
+  } = _ref14;
+  return isSelectedAndNotFocused ? theme.colors.primary.textStrong : undefined;
+}, ";");
+const MaxLineStyledText = /*#__PURE__*/_styled(StyledText, {
+  target: "e11gt5pw0"
+})("-webkit-line-clamp:3;margin-top:", _ref15 => {
+  let {
+    theme
+  } = _ref15;
+  return theme.space['2'];
+}, ";");
+const ValueContainer = _ref16 => {
+  let {
+    isDisabled,
+    children,
+    selectProps: {
+      error,
+      labelId,
+      inputId,
+      ...selectProps
+    },
+    isMulti,
+    hasValue,
+    clearValue,
+    getStyles,
+    getValue,
+    getClassNames,
+    isRtl,
+    cx,
+    options,
+    selectOption,
+    setValue,
+    theme,
+    className,
+    innerProps
+  } = _ref16;
+  return 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 = _ref17 => {
+  let {
+    isMulti
+  } = _ref17;
+  return /*#__PURE__*/css("margin-left:0px;", !isMulti && 'caret-color: transparent', ";");
+};
+const Input = _ref18 => {
+  let {
+    isMulti,
+    hasValue,
+    selectProps: {
+      inputId,
+      labelId,
+      placeholder,
+      ...selectProps
+    },
+    clearValue,
+    getStyles,
+    getValue,
+    isRtl,
+    cx,
+    options,
+    selectOption,
+    setValue,
+    theme,
+    className,
+    isHidden,
+    ...props
+  } = _ref18;
+  return 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 = _ref19 => {
+  let {
+    selectProps,
+    value,
+    label,
+    children,
+    data: {
+      inlineDescription,
+      description
+    },
+    isSelected,
+    data,
+    ...props
+  } = _ref19;
+  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",
+      size: 20,
+      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 = _ref20 => {
+  let {
+    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,
+    onChange,
+    options,
+    placeholder,
+    readOnly = false,
+    value,
+    name,
+    id: idProp,
+    time,
+    isLoading,
+    required,
+    emptyState,
+    'data-testid': dataTestId
+  } = _ref20;
+  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 || flattenChildren(children).map(_ref21 => {
+    let {
+      props: {
+        children: label,
+        ...subProps
+      }
+    } = _ref21;
+    return {
+      ...subProps,
+      label
+    };
+  }), [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,
+    onChange: onChange,
+    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
+  });
+};
+const SelectInput = /*#__PURE__*/forwardRef((props, ref) => jsx(FwdSelectInput, {
+  innerRef: ref,
+  ...props
+}));
+SelectInput.displayName = 'SelectInput';
+SelectInput.Option = Option;
+
+export { SelectInput };