filters design modifications for async select input

.changeset/calm-brooms-chew.md

@@ -0,0 +1,6 @@
+---
+'@commercetools-uikit/async-select-input': minor
+'@commercetools-uikit/select-utils': minor
+---
+
+As the filters component is being built, there are some visual modifications that need to happen in the async select input to support the designs and ux of the filters pattern. most of these changes are dependent on new props to set these options when the async-select component is used as in a filter component.

packages/components/inputs/async-select-input/src/async-select-input.stories.tsx

@@ -1,9 +1,9 @@
-import { useEffect, useState } from 'react';
 import type { Meta, StoryFn } from '@storybook/react';
+import AsyncSelectInput from './async-select-input';
+import { useEffect, useState } from 'react';
 import { iconArgType } from '@/storybook-helpers';
 import { GroupBase, OptionsOrGroups } from 'react-select';
 import Spacings from '@commercetools-uikit/spacings';
-import AsyncSelectInput from './async-select-input';
 
 const meta: Meta<typeof AsyncSelectInput> = {
   title: 'Form/Inputs/AsyncSelectInput',
@@ -144,3 +144,35 @@ BasicExample.args = {
   showOptionGroupDivider: false,
   iconLeft: undefined,
 };
+
+export const CheckboxOptionStyle: Story = ({ isMulti, ...args }) => {
+  const [value, setValue] = useState<Option | Option[] | null>(null);
+
+  useEffect(() => {
+    setValue(isMulti ? [] : null);
+  }, [isMulti]);
+
+  return (
+    <div style={{ height: 400 }}>
+      <Spacings.Stack>
+        <AsyncSelectInput
+          {...args}
+          isMulti={isMulti}
+          defaultOptions={defaultOptions}
+          loadOptions={loadOptions}
+          value={value}
+          onChange={(e) => setValue(e.target.value as Option | Option[])}
+        />
+        <strong>state:</strong>
+        <pre>{JSON.stringify({ value }, null, 2)}</pre>
+      </Spacings.Stack>
+    </div>
+  );
+};
+
+CheckboxOptionStyle.args = {
+  isMulti: true,
+  closeMenuOnSelect: false,
+  optionStyle: 'checkbox',
+  appearance: 'filter',
+};

packages/components/inputs/async-select-input/src/async-select-input.tsx

@@ -19,7 +19,10 @@ import {
   messages,
   createSelectStyles,
   warnIfMenuPortalPropsAreMissing,
+  optionStyleCheckboxComponents,
+  optionsStyleCheckboxSelectProps,
 } from '@commercetools-uikit/select-utils';
+import { SearchIcon } from '@commercetools-uikit/icons';
 
 const LoadingIndicator = () => <LoadingSpinner scale="s" />;
 LoadingIndicator.displayName = 'LoadingIndicator';
@@ -317,18 +320,32 @@ export type TAsyncSelectInputProps = {
    * Icon to display on the left of the placeholder text and selected value. Has no effect when `isMulti` is enabled.
    */
   iconLeft?: ReactNode;
+  /** defines how options are rendered */
+  optionStyle: 'list' | 'checkbox';
+  /**
+   * Indicates the appearance of the input.
+   * Filter appearance is meant to be used when the async-select is used as a filter.
+   */
+  appearance?: 'default' | 'filter';
 };
 
 const defaultProps: Pick<
   TAsyncSelectInputProps,
-  'value' | 'isSearchable' | 'menuPortalZIndex' | 'controlShouldRenderValue'
+  | 'value'
+  | 'isSearchable'
+  | 'menuPortalZIndex'
+  | 'controlShouldRenderValue'
+  | 'appearance'
+  | 'optionStyle'
 > = {
   // Using "null" will ensure that the currently selected value disappears in
   // case "undefined" gets passed as the next value
   value: null,
   isSearchable: true,
   menuPortalZIndex: 1,
   controlShouldRenderValue: true,
+  appearance: 'default',
+  optionStyle: 'list',
 };
 
 const AsyncSelectInput = (props: TAsyncSelectInputProps) => {
@@ -347,8 +364,23 @@ const AsyncSelectInput = (props: TAsyncSelectInputProps) => {
     componentName: 'AsyncSelectInput',
   });
 
-  const placeholder =
-    props.placeholder || intl.formatMessage(messages.placeholder);
+  // const placeholder =
+  //   props.placeholder || intl.formatMessage(messages.placeholder);
+
+  const placeholder = props.placeholder
+    ? props.placeholder
+    : props.appearance === 'filter'
+    ? 'Search'
+    : intl.formatMessage(messages.placeholder);
+
+  // TODO: uncomment to replace placeholder logic once select-input PR for this has been merged.
+  // const placeholder =
+  //   props.placeholder ||
+  //   intl.formatMessage(
+  //     props.appearance === 'filter'
+  //       ? messages.selectInputAsFilterPlaceholder
+  //       : messages.placeholder
+  //   );
 
   const loadingMessage = () => {
     if (typeof props.loadingMessage === 'function') {
@@ -383,6 +415,13 @@ const AsyncSelectInput = (props: TAsyncSelectInputProps) => {
                     ),
                   }
                 : {}),
+              ...(props.appearance === 'filter' && {
+                DropdownIndicator: () => <SearchIcon color="neutral60" />,
+                ClearIndicator: null,
+              }),
+              ...(props.optionStyle === 'checkbox'
+                ? optionStyleCheckboxComponents()
+                : {}),
               ...props.components,
             } as ReactSelectAsyncProps['components']
           }
@@ -404,7 +443,6 @@ const AsyncSelectInput = (props: TAsyncSelectInputProps) => {
             }) as ReactSelectAsyncProps['styles']
           }
           filterOption={props.filterOption}
-          hideSelectedOptions={props.hideSelectedOptions}
           // react-select uses "id" (for the container) and "inputId" (for the input),
           // but we use "id" (for the input) and "containerId" (for the container)
           // instead.
@@ -415,6 +453,9 @@ const AsyncSelectInput = (props: TAsyncSelectInputProps) => {
           isClearable={props.isReadOnly ? false : props.isClearable}
           isDisabled={props.isDisabled}
           isOptionDisabled={props.isOptionDisabled}
+          {...(props.optionStyle === 'checkbox'
+            ? optionsStyleCheckboxSelectProps()
+            : { hideSelectedOptions: props.hideSelectedOptions })}
           isMulti={props.isMulti}
           isSearchable={props.isSearchable}
           maxMenuHeight={props.maxMenuHeight}
@@ -485,7 +526,11 @@ const AsyncSelectInput = (props: TAsyncSelectInputProps) => {
           // @ts-ignore: passed to the react-select components via `selectProps`.
           isCondensed={props.isCondensed}
           iconLeft={props.iconLeft}
-          controlShouldRenderValue={props.controlShouldRenderValue}
+          controlShouldRenderValue={
+            props.appearance === 'filter'
+              ? false
+              : props.controlShouldRenderValue
+          }
         />
       </div>
     </Constraints.Horizontal>

packages/components/inputs/select-utils/package.json

@@ -22,6 +22,7 @@
     "@babel/runtime": "^7.20.13",
     "@babel/runtime-corejs3": "^7.20.13",
     "@commercetools-uikit/accessible-button": "19.13.0",
+    "@commercetools-uikit/checkbox-input": "workspace:^",
     "@commercetools-uikit/design-system": "19.13.0",
     "@commercetools-uikit/icons": "19.13.0",
     "@commercetools-uikit/spacings": "19.13.0",

packages/components/inputs/select-utils/src/create-select-styles.ts

@@ -22,7 +22,7 @@ type TProps = {
   hasValue?: boolean;
   isCondensed?: boolean;
   controlShouldRenderValue?: boolean;
-  appearance?: 'default' | 'quiet';
+  appearance?: 'default' | 'quiet' | 'filter';
   minMenuWidth?:
     | 2
     | 3

packages/components/inputs/select-utils/src/custom-styled-select-options/index.ts

@@ -1,2 +1,3 @@
 export { SELECT_DROPDOWN_OPTION_TYPES } from './constants';
 export * from './custom-styled-select-options';
+export * from './options-style-checkbox-components';

packages/components/inputs/select-utils/src/custom-styled-select-options/options-style-checkbox-components.tsx

@@ -0,0 +1,58 @@
+import { type Props as ReactSelectProps } from 'react-select';
+import CheckboxInput from '@commercetools-uikit/checkbox-input';
+import { css } from '@emotion/react';
+import { designTokens } from '@commercetools-uikit/design-system';
+
+/**
+ * Returns custom components to be used with react-select, when optionStyle is set to "checkbox"
+ */
+export const optionStyleCheckboxComponents = () => {
+  return {
+    Option: (props) => {
+      const {
+        innerRef,
+        innerProps,
+        label,
+        isDisabled,
+        isFocused,
+        isSelected,
+        className,
+      } = props;
+
+      return (
+        <div
+          data-component="option"
+          ref={innerRef}
+          {...innerProps}
+          css={css`
+            padding: ${designTokens.spacing10} ${designTokens.spacing20};
+            ${isFocused &&
+            `background-color: ${designTokens.backgroundColorForInputWhenHovered};`}
+          `}
+          className={className}
+          aria-disabled={isDisabled}
+        >
+          <CheckboxInput
+            isDisabled={isDisabled}
+            isChecked={isSelected}
+            onChange={() => {}}
+          >
+            {label}
+          </CheckboxInput>
+        </div>
+      );
+    },
+  } as ReactSelectProps['components'];
+};
+
+/**
+ * Returns react-select props to be used with the <Select> component, when optionStyle is set to "checkbox"
+ */
+export const optionsStyleCheckboxSelectProps = () => {
+  return {
+    // selected options should still be visible in the option-list, otherwise you cant toggle them
+    hideSelectedOptions: false,
+    // don't close the menu on check / uncheck of a checkbox
+    closeMenuOnSelect: false,
+  };
+};

yarn.lock

@@ -3086,7 +3086,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@commercetools-uikit/[email protected], @commercetools-uikit/checkbox-input@workspace:packages/components/inputs/checkbox-input":
+"@commercetools-uikit/[email protected], @commercetools-uikit/checkbox-input@workspace:^, @commercetools-uikit/checkbox-input@workspace:packages/components/inputs/checkbox-input":
   version: 0.0.0-use.local
   resolution: "@commercetools-uikit/checkbox-input@workspace:packages/components/inputs/checkbox-input"
   dependencies:
@@ -4751,6 +4751,7 @@ __metadata:
     "@babel/runtime": ^7.20.13
     "@babel/runtime-corejs3": ^7.20.13
     "@commercetools-uikit/accessible-button": 19.13.0
+    "@commercetools-uikit/checkbox-input": "workspace:^"
     "@commercetools-uikit/design-system": 19.13.0
     "@commercetools-uikit/icons": 19.13.0
     "@commercetools-uikit/spacings": 19.13.0