feat: fix Input prefill style regression, add isPrefilled prop to Datepicker and Select

react/src/DatePicker/DatePicker.stories.tsx

@@ -62,6 +62,11 @@ FixedHeightCalendarPopover.args = {
   isCalendarFixedHeight: true,
 }
 
+export const Prefilled = Template.bind({})
+Prefilled.args = {
+  isPrefilled: true,
+}
+
 export const SizeSmall = Template.bind({})
 SizeSmall.args = {
   size: 'sm',

react/src/DatePicker/DatePickerContext.tsx

@@ -103,6 +103,7 @@ const useProvideDatePicker = ({
   isReadOnly: isReadOnlyProp,
   isRequired: isRequiredProp,
   isInvalid: isInvalidProp,
+  isPrefilled,
   locale,
   allowManualInput = true,
   allowInvalidDates = true,
@@ -260,6 +261,7 @@ const useProvideDatePicker = ({
   const styles = useMultiStyleConfig('DatePicker', {
     size,
     colorScheme,
+    isPrefilled,
   })
 
   const placeholder = useMemo(

react/src/DatePicker/components/DatePickerInput.tsx

@@ -30,6 +30,7 @@ export const DatePickerInput = forwardRef<{}, 'input'>((_props, ref) => {
     size,
     inputPattern,
     innerRef,
+    styles,
   } = useDatePicker()
 
   const mergedInputRef = useMergeRefs(inputRef, innerRef, ref)
@@ -71,13 +72,15 @@ export const DatePickerInput = forwardRef<{}, 'input'>((_props, ref) => {
             onBlur={handleInputBlur}
             onClick={handleInputClick}
             isReadOnly={fcProps.isReadOnly || !allowManualInput}
+            sx={styles.field}
           />
         ) : (
           <Input
             size={size}
             inputMode="numeric"
             placeholder={placeholder}
             pattern={inputPattern}
+            sx={styles.field}
           />
         )}
         <InputRightAddon p={0} border="none">

react/src/DatePicker/types.ts

@@ -24,6 +24,10 @@ export interface DatePickerBaseProps
    * @defaultValue `true`
    */
   allowInvalidDates?: boolean
+  /**
+   * Whether the input is in a prefilled state.
+   */
+  isPrefilled?: boolean
   /**
    * Whether the calendar will close once a date is selected.
    * @defaultValue `true`

react/src/DateRangePicker/DateRangePicker.stories.tsx

@@ -57,6 +57,12 @@ DatePickerDisabled.args = {
   defaultValue: [new Date('2001-01-01'), new Date('2002-01-03')],
 }
 
+export const Prefilled = Template.bind({})
+Prefilled.args = {
+  isPrefilled: true,
+  defaultValue: [new Date('2001-01-01'), new Date('2002-01-03')],
+}
+
 export const Mobile = Template.bind({})
 Mobile.parameters = getMobileViewParameters()
 

react/src/DateRangePicker/DateRangePickerContext.tsx

@@ -103,6 +103,7 @@ const useProvideDateRangePicker = ({
   isReadOnly: isReadOnlyProp,
   isRequired: isRequiredProp,
   isInvalid: isInvalidProp,
+  isPrefilled,
   locale,
   allowManualInput = true,
   allowInvalidDates = true,
@@ -333,6 +334,7 @@ const useProvideDateRangePicker = ({
   const styles = useMultiStyleConfig('DateRangePicker', {
     size,
     colorScheme,
+    isPrefilled,
   })
 
   const placeholder = useMemo(

react/src/Input/Input.tsx

@@ -32,7 +32,13 @@ export const Input = forwardRef<InputProps, 'input'>((props, ref) => {
 
   // Return normal input component if not success state.
   if (!props.isSuccess) {
-    return <ChakraInput ref={ref} __css={inputStyles.field} {...inputProps} />
+    return (
+      <ChakraInput
+        ref={ref}
+        sx={merge({}, inputStyles.field, props.sx)}
+        {...inputProps}
+      />
+    )
   }
 
   return (

react/src/MultiSelect/MultiSelect.stories.tsx

@@ -103,6 +103,12 @@ DisabledWithSelection.args = {
   values: ['What happens when the label is fairly long', 'Bat'],
 }
 
+export const Prefilled = Template.bind({})
+Prefilled.args = {
+  isPrefilled: true,
+  values: ['What happens when the label is fairly long', 'Bat'],
+}
+
 export const WithFixedItemHeight = Template.bind({})
 WithFixedItemHeight.args = {
   size: 'md',

react/src/MultiSelect/MultiSelectProvider.tsx

@@ -70,6 +70,10 @@ export interface MultiSelectProviderProps<
    * If `true`, the selected items will take up the full width of the input container. Defaults to `false`.
    */
   isStretchLayout?: boolean
+  /**
+   * Whether the input is in a prefilled state.
+   */
+  isPrefilled?: boolean
 }
 export const MultiSelectProvider = ({
   items: rawItems,
@@ -81,6 +85,7 @@ export const MultiSelectProvider = ({
   placeholder: placeholderProp,
   clearButtonLabel = 'Clear selection',
   isSearchable = true,
+  isPrefilled = false,
   defaultIsOpen,
   isInvalid: isInvalidProp,
   isReadOnly: isReadOnlyProp,
@@ -297,6 +302,7 @@ export const MultiSelectProvider = ({
     size,
     isFocused: isFocused || isOpen,
     isEmpty: selectedItems.length === 0,
+    isPrefilled,
   })
 
   const virtualListHeight = useMemo(() => {

react/src/SingleSelect/SingleSelect.stories.tsx

@@ -180,6 +180,12 @@ Disabled.args = {
   isDisabled: true,
 }
 
+export const Prefilled = Template.bind({})
+Prefilled.args = {
+  isPrefilled: true,
+  value: itemToValue(INITIAL_COMBOBOX_ITEMS[2]),
+}
+
 export const FormInput: StoryFn<SingleSelectProps> = (args) => {
   const [value, setValue] = useState<string>(args.value)
 

react/src/SingleSelect/SingleSelectProvider.tsx

@@ -39,6 +39,10 @@ export interface SingleSelectProviderProps<
   /** Color scheme of component */
   colorScheme?: ThemingProps<'SingleSelect'>['colorScheme']
   fixedItemHeight?: number
+  /**
+   * Whether the input is in a prefilled state.
+   */
+  isPrefilled?: boolean
 }
 export const SingleSelectProvider = ({
   items: rawItems,
@@ -51,6 +55,7 @@ export const SingleSelectProvider = ({
   clearButtonLabel = 'Clear selection',
   isClearable = true,
   isSearchable = true,
+  isPrefilled = false,
   initialIsOpen,
   isInvalid: isInvalidProp,
   isReadOnly: isReadOnlyProp,
@@ -234,6 +239,7 @@ export const SingleSelectProvider = ({
   const styles = useMultiStyleConfig('SingleSelect', {
     size,
     isClearable,
+    isPrefilled,
     colorScheme,
   })
 

react/src/theme/components/DatePicker.ts

@@ -1,40 +1,52 @@
 import { createMultiStyleConfigHelpers } from '@chakra-ui/react'
 import { anatomy } from '@chakra-ui/theme-tools'
 import { memoizedGet as get } from '@chakra-ui/utils'
+import omit from 'lodash/omit'
+
+import { Input } from './Input'
 
 export const datepickerAnatomy = anatomy('datepicker').parts(
   'header',
   'inputButton',
   'container',
   'calendarButton',
+  'field',
 )
 const { defineMultiStyleConfig, definePartsStyle } =
   createMultiStyleConfigHelpers(datepickerAnatomy.keys)
 
 const sizes = {
-  xs: definePartsStyle({
+  xs: definePartsStyle((props) => ({
+    field: Input.sizes?.xs(props).field,
     inputButton: {
       fontSize: '1rem',
     },
-  }),
-  sm: definePartsStyle({
+  })),
+  sm: definePartsStyle((props) => ({
+    field: Input.sizes?.sm(props).field,
     inputButton: {
       fontSize: '1.25rem',
     },
-  }),
-  md: definePartsStyle({
+  })),
+  md: definePartsStyle((props) => ({
+    field: Input.sizes?.md(props).field,
     inputButton: {
       fontSize: '1.25rem',
     },
-  }),
+  })),
 }
 
-const baseStyle = definePartsStyle(({ theme }) => {
-  const themeTextStyles = get(theme, 'textStyles')
+const baseStyle = definePartsStyle((props) => {
+  const themeTextStyles = get(props.theme, 'textStyles')
+  const inputFieldStyle = omit(
+    Input.variants?.outline(props).field,
+    'borderRadius',
+  )
   return {
     container: {
       bg: 'utility.ui',
     },
+    field: inputFieldStyle,
     calendarButton: {
       _active: {
         zIndex: '1',

react/src/theme/components/DateRangePicker.ts

@@ -1,4 +1,5 @@
 import { createMultiStyleConfigHelpers } from '@chakra-ui/react'
+import omit from 'lodash/omit'
 
 import { DatePicker, datepickerAnatomy } from './DatePicker'
 import { Input } from './Input'
@@ -40,19 +41,19 @@ const sizes = {
   xs: definePartsStyle((props) => {
     return {
       fieldwrapper: Input.sizes?.xs(props).field,
-      inputButton: DatePicker.sizes?.xs.inputButton,
+      inputButton: DatePicker.sizes?.xs(props).inputButton,
     }
   }),
   sm: definePartsStyle((props) => {
     return {
       fieldwrapper: Input.sizes?.sm(props).field,
-      inputButton: DatePicker.sizes?.sm.inputButton,
+      inputButton: DatePicker.sizes?.sm(props).inputButton,
     }
   }),
   md: definePartsStyle((props) => {
     return {
       fieldwrapper: Input.sizes?.md(props).field,
-      inputButton: DatePicker.sizes?.md.inputButton,
+      inputButton: DatePicker.sizes?.md(props).inputButton,
     }
   }),
 }
@@ -64,7 +65,7 @@ const variants = {
 export const DateRangePicker = defineMultiStyleConfig({
   variants,
   sizes,
-  baseStyle: DatePicker.baseStyle,
+  baseStyle: (props) => omit(DatePicker.baseStyle?.(props), 'field'),
   defaultProps: {
     variant: 'outline',
     size: 'md',