Value Style Fixes

README.md

@@ -24,7 +24,8 @@
 [![](https://img.shields.io/npm/v/chakra-react-select "chakra-react-select npm")](https://www.npmjs.com/package/chakra-react-select)
 [![](https://badgen.net/bundlephobia/min/chakra-react-select "Minified Bundle Size")](https://bundlephobia.com/result?p=chakra-react-select)
 [![](https://badgen.net/bundlephobia/minzip/chakra-react-select "Minzipped Bundle Size")](https://bundlephobia.com/result?p=chakra-react-select)
-[![](https://badgen.net/npm/dt/chakra-react-select?color=blue "Total NPM Downloads")](https://www.npmjs.com/package/chakra-react-select)
+[![](https://badgen.net/npm/dt/chakra-react-select?color=blue&icon=npm "Total NPM Downloads")](https://npm-stat.com/charts.html?package=chakra-react-select&from=2021-09-13)
+[![](https://badgen.net/npm/dw/chakra-react-select?color=blue&icon=npm "Weekly NPM Downloads")](https://npm-stat.com/charts.html?package=chakra-react-select&from=2021-09-13)
 [![](https://snyk.io/test/github/csandman/chakra-react-select/badge.svg "Known Vulnerabilities")](https://snyk.io/test/github/csandman/chakra-react-select)
 [![](https://img.shields.io/badge/Code_Style-prettier-c596c7.svg?logo=prettier "Code Style: Prettier")](https://github.com/prettier/prettier)
 [![](https://badgen.net/github/license/csandman/chakra-react-select "MIT License")](LICENSE.md)

src/chakra-components/containers.tsx

@@ -76,6 +76,7 @@ export const ValueContainer = <
       variant,
       focusBorderColor,
       errorBorderColor,
+      controlShouldRenderValue,
     },
   } = props;
 
@@ -91,7 +92,7 @@ export const ValueContainer = <
   });
 
   const initialSx: SystemStyleObject = {
-    display: "flex",
+    display: isMulti && hasValue && controlShouldRenderValue ? "flex" : "grid",
     alignItems: "center",
     flex: 1,
     paddingY: "2px",

src/chakra-components/control.tsx

@@ -44,20 +44,25 @@ const Control = <
   } = props;
 
   const size = useSize(sizeProp);
-  const inputStyles = useMultiStyleConfig("Input", {
+  const {
+    field: { h: minH, ...fieldStyles },
+  } = useMultiStyleConfig("Input", {
     size,
     variant,
     focusBorderColor,
     errorBorderColor,
   });
 
   const initialSx: SystemStyleObject = {
-    ...inputStyles.field,
+    ...fieldStyles,
+    position: "relative",
     display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    flexWrap: "wrap",
     padding: 0,
     overflow: "hidden",
-    height: "auto",
-    minH: inputStyles.field.h,
+    minH,
     ...(isDisabled ? { pointerEvents: "none" } : {}),
   };
 

src/chakra-components/input.tsx

@@ -23,11 +23,11 @@ const Input = <
 
   const spacingSx: SystemStyleObject = {
     gridArea: "1 / 2",
-    font: "inherit",
     minW: "2px",
     border: 0,
     margin: 0,
     outline: 0,
+    padding: 0,
   };
 
   const initialContainerSx: SystemStyleObject = {
@@ -38,6 +38,10 @@ const Input = <
     color: "inherit",
     marginX: "0.125rem",
     paddingY: "0.125rem",
+    visibility: isDisabled ? "hidden" : "visible",
+    // Force css to recompute when value change due to @emotion bug.
+    // We can remove it whenever the bug is fixed.
+    transform: value ? "translateZ(0)" : "",
     _after: {
       content: 'attr(data-value) " "',
       visibility: "hidden",
@@ -51,8 +55,6 @@ const Input = <
     : initialContainerSx;
 
   const initialInputSx: SystemStyleObject = {
-    label: "input",
-    color: "inherit",
     background: 0,
     opacity: isHidden ? 0 : 1,
     width: "100%",

src/chakra-components/multi-value.tsx

@@ -18,18 +18,18 @@ const hasColorScheme = (option: unknown): option is { colorScheme: string } =>
   "colorScheme" in option &&
   typeof option.colorScheme === "string";
 
-const hasIsFixed = (option: unknown): option is { isFixed: boolean } =>
-  typeof option === "object" &&
-  option !== null &&
-  "isFixed" in option &&
-  typeof option.isFixed === "boolean";
-
 const hasVariant = (option: unknown): option is { variant: string } =>
   typeof option === "object" &&
   option !== null &&
   "variant" in option &&
   typeof option.variant === "string";
 
+const hasIsFixed = (option: unknown): option is { isFixed: boolean } =>
+  typeof option === "object" &&
+  option !== null &&
+  "isFixed" in option &&
+  typeof option.isFixed === "boolean";
+
 const MultiValue = <
   Option = unknown,
   IsMulti extends boolean = boolean,
@@ -48,6 +48,7 @@ const MultiValue = <
     isFocused,
     removeProps,
     selectProps,
+    cropWithEllipsis,
   } = props;
 
   const { Container, Label, Remove } = components;
@@ -69,7 +70,7 @@ const MultiValue = <
   }
 
   if (hasIsFixed(data)) {
-    optionIsFixed = !!data.isFixed;
+    optionIsFixed = data.isFixed;
   }
 
   const tagStyles = useMultiStyleConfig("Tag", {
@@ -81,26 +82,33 @@ const MultiValue = <
 
   const containerInitialSx: SystemStyleObject = {
     ...tagStyles.container,
-    display: "inline-flex",
-    verticalAlign: "top",
+    display: "flex",
     alignItems: "center",
-    maxWidth: "100%",
+    minWidth: 0, // resolves flex/text-overflow bug
     margin: "0.125rem",
   };
   const containerSx: SystemStyleObject = chakraStyles?.multiValue
     ? chakraStyles.multiValue(containerInitialSx, props)
     : containerInitialSx;
 
-  const labelInitialSx: SystemStyleObject = tagStyles.label;
+  const labelInitialSx: SystemStyleObject = {
+    ...tagStyles.label,
+    overflow: "hidden",
+    textOverflow:
+      cropWithEllipsis || cropWithEllipsis === undefined
+        ? "ellipsis"
+        : undefined,
+    whiteSpace: "nowrap",
+  };
   const labelSx = chakraStyles?.multiValueLabel
     ? chakraStyles.multiValueLabel(labelInitialSx, props)
     : labelInitialSx;
 
   const removeInitialSx: SystemStyleObject = {
+    ...tagStyles.closeButton,
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    ...tagStyles.closeButton,
   };
   const removeSx = chakraStyles?.multiValueRemove
     ? chakraStyles.multiValueRemove(removeInitialSx, props)

src/chakra-components/placeholder.tsx

@@ -24,14 +24,12 @@ const Placeholder = <
    *
    * @see {@link https://github.com/chakra-ui/chakra-ui/blob/13c6d2e08b61e179773be4722bb81173dd599306/packages/theme/src/styles.ts#L13}
    */
-  const placeholderColor = useColorModeValue("gray.400", "whiteAlpha.400");
+  const color = useColorModeValue("gray.400", "whiteAlpha.400");
 
   const initialSx: SystemStyleObject = {
-    color: placeholderColor,
+    gridArea: "1 / 1 / 2 / 3",
+    color,
     mx: "0.125rem",
-    position: "absolute",
-    top: "50%",
-    transform: "translateY(-50%)",
     userSelect: "none",
   };
 

src/chakra-components/single-value.tsx

@@ -20,15 +20,12 @@ const SingleValue = <
   } = props;
 
   const initialSx: SystemStyleObject = {
-    label: "singleValue",
+    gridArea: "1 / 1 / 2 / 3",
     mx: "0.125rem",
-    maxWidth: `calc(100% - 0.5rem)`,
+    maxWidth: "100%",
     overflow: "hidden",
-    position: "absolute",
     textOverflow: "ellipsis",
     whiteSpace: "nowrap",
-    top: "50%",
-    transform: "translateY(-50%)",
   };
 
   const sx = chakraStyles?.singleValue

src/index.ts

@@ -1,18 +1,17 @@
 import "./module-augmentation";
 
-export { default as Select } from "./select";
-export { default as CreatableSelect } from "./creatable-select";
-export { default as AsyncSelect } from "./async-select";
-export { default as AsyncCreatableSelect } from "./async-creatable-select";
+export { default as Select } from "./select/select";
+export { default as CreatableSelect } from "./select/creatable-select";
+export { default as AsyncSelect } from "./select/async-select";
+export { default as AsyncCreatableSelect } from "./select/async-creatable-select";
 
 export { default as chakraComponents } from "./chakra-components";
-
 export { default as useChakraSelectProps } from "./use-chakra-select-props";
 
-export type { SelectComponent } from "./select";
-export type { CreatableSelectComponent } from "./creatable-select";
-export type { AsyncSelectComponent } from "./async-select";
-export type { AsyncCreatableSelectComponent } from "./async-creatable-select";
+export type { SelectComponent } from "./select/select";
+export type { CreatableSelectComponent } from "./select/creatable-select";
+export type { AsyncSelectComponent } from "./select/async-select";
+export type { AsyncCreatableSelectComponent } from "./select/async-creatable-select";
 
 export type {
   SxProps,

src/async-creatable-select.tsx → src/select/async-creatable-select.tsx

@@ -3,7 +3,7 @@ import type { MutableRefObject, ReactElement, RefAttributes } from "react";
 import type { GroupBase, SelectInstance } from "react-select";
 import AsyncCreatableReactSelect from "react-select/async-creatable";
 import type { AsyncCreatableProps } from "react-select/async-creatable";
-import useChakraSelectProps from "./use-chakra-select-props";
+import useChakraSelectProps from "../use-chakra-select-props";
 
 export type AsyncCreatableSelectComponent = <
   Option = unknown,

src/async-select.tsx → src/select/async-select.tsx

@@ -3,7 +3,7 @@ import type { MutableRefObject, ReactElement, RefAttributes } from "react";
 import type { GroupBase, SelectInstance } from "react-select";
 import AsyncReactSelect from "react-select/async";
 import type { AsyncProps } from "react-select/async";
-import useChakraSelectProps from "./use-chakra-select-props";
+import useChakraSelectProps from "../use-chakra-select-props";
 
 export type AsyncSelectComponent = <
   Option = unknown,

src/creatable-select.tsx → src/select/creatable-select.tsx

@@ -3,7 +3,7 @@ import type { MutableRefObject, ReactElement, RefAttributes } from "react";
 import type { GroupBase, SelectInstance } from "react-select";
 import CreatableReactSelect from "react-select/creatable";
 import type { CreatableProps } from "react-select/creatable";
-import useChakraSelectProps from "./use-chakra-select-props";
+import useChakraSelectProps from "../use-chakra-select-props";
 
 export type CreatableSelectComponent = <
   Option = unknown,

src/select.tsx → src/select/select.tsx

@@ -2,7 +2,7 @@ import React, { forwardRef } from "react";
 import type { MutableRefObject, ReactElement, RefAttributes } from "react";
 import ReactSelect from "react-select";
 import type { GroupBase, Props, SelectInstance } from "react-select";
-import useChakraSelectProps from "./use-chakra-select-props";
+import useChakraSelectProps from "../use-chakra-select-props";
 
 export type SelectComponent = <
   Option = unknown,

src/use-chakra-select-props.ts

@@ -92,8 +92,7 @@ const useChakraSelectProps = <
     ...props,
     // aria-invalid can be passed to react-select, so we allow that to
     // override the `isInvalid` prop
-    "aria-invalid":
-      props["aria-invalid"] ?? inputProps["aria-invalid"] ? true : undefined,
+    "aria-invalid": props["aria-invalid"] ?? inputProps["aria-invalid"],
   };
 
   return select;