@ultraviolet/ui 1.51.0 → 1.51.2

package/dist/components/SelectInput/index.js

@@ -0,0 +1,563 @@
+import { jsx, jsxs, Fragment } from "@emotion/react/jsx-runtime";
+import { css, useTheme } from "@emotion/react";
+import styled from "@emotion/styled";
+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";
+const StyledSeparator = styled(Separator)`
+  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: 1e4,
+    ...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 : void 0,
+    marginRight: state.hasValue ? 0 : void 0,
+    marginTop: !state.hasValue || noTopLabel ? 0 : "5px",
+    paddingLeft: state.hasValue ? 0 : void 0,
+    ...customStyle(state)?.["singleValue"] || {}
+  }),
+  valueContainer: (provided, state) => ({
+    ...provided,
+    ...customStyle(state)?.["valueContainer"] || {},
+    cursor: state.isDisabled ? "not-allowed" : void 0,
+    height: "100%",
+    label: {
+      display: noTopLabel ? "none" : "initial"
+    },
+    paddingTop: 0
+  })
+});
+const StyledContainer = styled("div", {
+  shouldForwardProp: (prop) => !["isDisabled", "additionalStyles"].includes(prop)
+})`
+  width: 100%;
+  ${({ isDisabled }) => isDisabled && `pointer-events: initial;`};
+  ${({ additionalStyles }) => css(additionalStyles)}
+`;
+const StyledError = styled.div`
+  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 /* @__PURE__ */ jsxs(
+    StyledContainer,
+    {
+      "data-testid": `select-input-${name}`,
+      additionalStyles: getStyles?.("container", props),
+      isDisabled,
+      className: [className, selectPropsClassName].filter(Boolean).join(" "),
+      onKeyDown,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(Expandable, { opened: !!error, children: /* @__PURE__ */ jsx(StyledError, { children: error }) })
+      ]
+    }
+  );
+};
+const StyledPlaceholder = styled("label", {
+  shouldForwardProp: (prop) => !["error", "hasValue", "isDisabled", "isMulti"].includes(prop)
+})`
+  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 = styled(Text)`
+  margin-left: ${({ theme }) => theme.space["1"]};
+  color: ${({ isSelectedAndNotFocused, theme }) => isSelectedAndNotFocused ? theme.colors.primary.textStrong : void 0};
+`;
+const MaxLineStyledText = styled(StyledText)`
+  -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
+}) => /* @__PURE__ */ jsx(
+  components.ValueContainer,
+  {
+    clearValue,
+    getStyles,
+    getValue,
+    isRtl,
+    cx,
+    options,
+    selectOption,
+    setValue,
+    theme,
+    className,
+    innerProps,
+    selectProps,
+    isMulti,
+    hasValue,
+    isDisabled,
+    getClassNames,
+    children: /* @__PURE__ */ jsxs(Fragment, { children: [
+      selectProps.placeholder ? /* @__PURE__ */ jsx(
+        StyledPlaceholder,
+        {
+          as: "label",
+          id: labelId,
+          htmlFor: inputId,
+          "aria-live": "assertive",
+          error,
+          isMulti,
+          isDisabled,
+          hasValue,
+          children: selectProps.placeholder
+        }
+      ) : null,
+      children
+    ] })
+  }
+);
+const inputStyles = ({ isMulti }) => 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
+}) => /* @__PURE__ */ jsx(
+  components.Input,
+  {
+    ...props,
+    css: inputStyles({ isMulti }),
+    id: inputId,
+    "aria-controls": labelId,
+    hasValue,
+    isMulti,
+    clearValue,
+    getStyles,
+    getValue,
+    isRtl,
+    cx,
+    options,
+    selectOption,
+    setValue,
+    theme,
+    className,
+    isHidden,
+    selectProps: { ...selectProps, placeholder }
+  }
+);
+const Option = ({
+  selectProps,
+  value,
+  label,
+  children,
+  data: { inlineDescription, description },
+  isSelected,
+  data,
+  ...props
+}) => {
+  const [isFocused, setIsFocused] = useState(false);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-testid": `option-${selectProps.name || ""}-${isJSONString(value) ? label : value}`,
+      onMouseOver: () => setIsFocused(true),
+      onFocus: () => setIsFocused(true),
+      onMouseOut: () => setIsFocused(false),
+      onBlur: () => setIsFocused(false),
+      children: /* @__PURE__ */ jsxs(
+        components.Option,
+        {
+          ...props,
+          selectProps,
+          label,
+          data,
+          isSelected,
+          children: [
+            children,
+            inlineDescription ? /* @__PURE__ */ jsx(
+              StyledText,
+              {
+                as: "span",
+                variant: "bodySmall",
+                isSelectedAndNotFocused: isSelected && !isFocused,
+                children: inlineDescription
+              }
+            ) : null,
+            description ? /* @__PURE__ */ jsx(
+              MaxLineStyledText,
+              {
+                as: "p",
+                variant: "bodySmall",
+                isSelectedAndNotFocused: isSelected && !isFocused,
+                children: description
+              }
+            ) : null
+          ]
+        }
+      )
+    }
+  );
+};
+const DropdownIndicator = (props) => {
+  const {
+    selectProps: { isDisabled, time, required }
+  } = props;
+  return /* @__PURE__ */ jsx(components.DropdownIndicator, { ...props, children: /* @__PURE__ */ jsxs(Stack, { gap: 1, direction: "row", alignItems: "center", children: [
+    required ? /* @__PURE__ */ jsx(Icon, { name: "asterisk", size: 10, color: "danger" }) : null,
+    time ? /* @__PURE__ */ jsx(StyledSeparator, { direction: "vertical" }) : null,
+    /* @__PURE__ */ 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 /* @__PURE__ */ jsx(components.ClearIndicator, { ...props, children: /* @__PURE__ */ jsx(
+    Icon,
+    {
+      ...restInnerProps,
+      name: "close",
+      cursor: "pointer",
+      color: checked && "primary" || error && "danger" || "neutral"
+    }
+  ) });
+};
+const MultiValueContainer = (props) => /* @__PURE__ */ jsx(components.MultiValueContainer, { ...props });
+const MultiValueLabel = (props) => /* @__PURE__ */ jsx(components.MultiValueLabel, { ...props });
+const MultiValueRemove = (props) => /* @__PURE__ */ jsx(components.MultiValueRemove, { ...props, children: /* @__PURE__ */ jsx(Icon, { name: "close", size: 16 }) });
+const defaultCustomStyle = () => ({});
+const FwdSelectInput = ({
+  animation = "pulse",
+  animationDuration = 1e3,
+  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;
+  const selectOptions = useMemo(
+    () => options || Children.toArray(children).reduce((acc, child) => {
+      if (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 /* @__PURE__ */ jsx(
+    Select,
+    {
+      components: {
+        ClearIndicator,
+        DropdownIndicator,
+        Input,
+        MultiValueContainer,
+        MultiValueLabel,
+        MultiValueRemove,
+        Option,
+        SelectContainer,
+        ValueContainer,
+        ...customComponents
+      },
+      placeholder,
+      className,
+      isDisabled: disabled || readOnly,
+      isOptionDisabled: (option) => !!option.disabled,
+      styles: getSelectStyles({
+        animation: isAnimated ? animation : void 0,
+        animationDuration,
+        customStyle,
+        error,
+        noTopLabel,
+        theme
+      }),
+      options: selectOptions,
+      menuPortalTarget: menuPortalTarget || void 0,
+      isSearchable,
+      isClearable,
+      isMulti,
+      onBlur,
+      onChange,
+      onFocus,
+      value,
+      maxMenuHeight: 250,
+      inputId,
+      ref: innerRef,
+      name,
+      id: idProp,
+      time,
+      isLoading,
+      required,
+      noOptionsMessage: emptyState,
+      "data-testid": dataTestId
+    }
+  );
+};
+const SelectInput = forwardRef(
+  (props, ref) => /* @__PURE__ */ jsx(FwdSelectInput, { innerRef: ref, ...props })
+);
+SelectInput.displayName = "SelectInput";
+SelectInput.Option = Option;
+export {
+  SelectInput
+};

package/dist/components/SelectInputV2/Dropdown.d.ts

@@ -0,0 +1,23 @@
+import type { ReactNode, RefObject } from 'react';
+export type DropdownProps = {
+    children: ReactNode;
+    emptyState: ReactNode;
+    descriptionDirection: 'row' | 'column';
+    searchable: boolean;
+    placeholder: string;
+    footer?: ReactNode;
+    refSelect: RefObject<HTMLDivElement>;
+    loadMore?: ReactNode;
+    optionalInfoPlacement: 'left' | 'right';
+    isLoading?: boolean;
+};
+export type CreateDropdownProps = {
+    isEmpty: boolean;
+    emptyState: ReactNode;
+    descriptionDirection: 'row' | 'column';
+    loadMore?: ReactNode;
+    optionalInfoPlacement: 'left' | 'right';
+    defaultSearchValue: string | null;
+    isLoading?: boolean;
+};
+export declare const Dropdown: ({ children, emptyState, descriptionDirection, searchable, placeholder, footer, refSelect, loadMore, optionalInfoPlacement, isLoading, }: DropdownProps) => import("@emotion/react/jsx-runtime").JSX.Element;