@snack-uikit/chips 0.24.1 → 0.24.2-preview-08c7f775.0

package/src/components/ChipChoice/components/ChipChoiceDateRange.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, useCallback, useRef, useState } from 'react';
+import { ReactNode, useCallback, useRef } from 'react';
 import { useUncontrolledProp } from 'uncontrollable';
 
 import { Calendar, CalendarProps } from '@snack-uikit/calendar';
@@ -47,6 +47,9 @@ export function ChipChoiceDateRange({
   valueRender,
   dropDownClassName,
   buildCalendarCellProps,
+  onClearButtonClick,
+  open: openProp,
+  onOpenChange,
   ...rest
 }: ChipChoiceDateRangeProps) {
   const [selectedValue, setSelectedValue] = useUncontrolledProp<Range>(value, defaultValue, onChange);
@@ -56,17 +59,14 @@ export function ChipChoiceDateRange({
   const valueToRender = valueRender
     ? valueRender(selectedValue)
     : defaultRangeFormatter({ value: selectedValue, allLabel: t('allLabel') });
-
-  const clearValue = () => setSelectedValue(undefined);
-
   const localRef = useRef<HTMLDivElement>(null);
 
-  const [open, setOpen] = useState<boolean>(false);
+  const [open, setOpen] = useUncontrolledProp(openProp, false, onOpenChange);
 
   const closeDroplist = useCallback(() => {
     setOpen(false);
     setTimeout(() => localRef.current?.focus(), 0);
-  }, []);
+  }, [setOpen]);
 
   const handleOnKeyDown = useHandleOnKeyDown({ setOpen });
 
@@ -98,7 +98,7 @@ export function ChipChoiceDateRange({
       <ChipChoiceBase
         {...rest}
         ref={localRef}
-        onClearButtonClick={clearValue}
+        onClearButtonClick={onClearButtonClick}
         value={selectedValue}
         valueToRender={valueToRender}
         size={size}

package/src/components/ChipChoice/components/ChipChoiceMultiple.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useUncontrolledProp } from 'uncontrollable';
 
 import { Droplist, ItemId, SelectionSingleValueType } from '@snack-uikit/list';
 import { useLocale } from '@snack-uikit/locale';
@@ -43,11 +44,13 @@ export function ChipChoiceMultiple<T extends ContentRenderProps = ContentRenderP
   searchable,
   contentRender,
   dropDownClassName,
-  showClearButton = true,
+  onClearButtonClick,
   autoApply = true,
   disableFuzzySearch = false,
   onApprove,
   onCancel,
+  open: openProp,
+  onOpenChange,
   ...rest
 }: ChipChoiceMultipleProps<T>) {
   const [value, setValue] = useValueControl<SelectionSingleValueType[]>({
@@ -70,7 +73,7 @@ export function ChipChoiceMultiple<T extends ContentRenderProps = ContentRenderP
 
   const { t } = useLocale('Chips');
 
-  const [open, setOpen] = useState<boolean>(false);
+  const [open, setOpen] = useUncontrolledProp(openProp, false, onOpenChange);
   const handleOnKeyDown = useHandleOnKeyDown({ setOpen });
 
   const flatMapOptions = useMemo(() => Object.values(flattenOptions), [flattenOptions]);
@@ -98,10 +101,6 @@ export function ChipChoiceMultiple<T extends ContentRenderProps = ContentRenderP
   );
   const items = useMemo(() => transformOptionsToItems<T>(result, contentRender), [contentRender, result]);
 
-  const clearValue = () => {
-    setValue([]);
-    setDeferredValue([]);
-  };
   const chipRef = useRef<HTMLDivElement>(null);
   const listRef = useRef<HTMLElement>(null);
 
@@ -192,9 +191,8 @@ export function ChipChoiceMultiple<T extends ContentRenderProps = ContentRenderP
       <ChipChoiceBase
         {...rest}
         ref={chipRef}
-        onClearButtonClick={clearValue}
+        onClearButtonClick={onClearButtonClick}
         value={value}
-        showClearButton={showClearButton && !(Array.isArray(value) && [0].includes(value.length))}
         valueToRender={valueToRender}
         label={label}
         loading={rest.loading}

package/src/components/ChipChoice/components/ChipChoiceSingle.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useUncontrolledProp } from 'uncontrollable';
 
 import { Droplist, ItemId, SelectionSingleValueType } from '@snack-uikit/list';
 import { useLocale } from '@snack-uikit/locale';
@@ -36,6 +37,9 @@ export function ChipChoiceSingle<T extends ContentRenderProps = ContentRenderPro
   autoApply = true,
   onApprove,
   onCancel,
+  onClearButtonClick,
+  open: openProp,
+  onOpenChange,
   ...rest
 }: ChipChoiceSingleProps<T>) {
   const [value, setValue] = useValueControl<SelectionSingleValueType>({
@@ -56,7 +60,7 @@ export function ChipChoiceSingle<T extends ContentRenderProps = ContentRenderPro
 
   const { t } = useLocale('Chips');
 
-  const [open, setOpen] = useState<boolean>(false);
+  const [open, setOpen] = useUncontrolledProp(openProp, false, onOpenChange);
   const handleOnKeyDown = useHandleOnKeyDown({ setOpen });
 
   const flatMapOptions = useMemo(() => Object.values(flattenOptions), [flattenOptions]);
@@ -82,10 +86,6 @@ export function ChipChoiceSingle<T extends ContentRenderProps = ContentRenderPro
   );
   const items = useMemo(() => transformOptionsToItems<T>(result, contentRender), [contentRender, result]);
 
-  const clearValue = () => {
-    setValue(undefined);
-    setDeferredValue(undefined);
-  };
   const chipRef = useRef<HTMLDivElement>(null);
 
   const handleSelectionChange = useCallback(
@@ -102,7 +102,7 @@ export function ChipChoiceSingle<T extends ContentRenderProps = ContentRenderPro
         }
       }
     },
-    [autoApply, setValue, setDeferredValue],
+    [autoApply, setOpen, setValue, setDeferredValue],
   );
 
   const handleOnCancelClick = () => {
@@ -175,7 +175,7 @@ export function ChipChoiceSingle<T extends ContentRenderProps = ContentRenderPro
       <ChipChoiceBase
         {...rest}
         ref={chipRef}
-        onClearButtonClick={clearValue}
+        onClearButtonClick={onClearButtonClick}
         value={value}
         valueToRender={valueToRender}
         label={label}

package/src/components/ChipChoice/components/ChipChoiceTime.tsx

@@ -1,4 +1,5 @@
-import { ReactNode, useCallback, useMemo, useRef, useState } from 'react';
+import { ReactNode, useCallback, useMemo, useRef } from 'react';
+import { useUncontrolledProp } from 'uncontrollable';
 
 import { TimePicker, TimePickerProps } from '@snack-uikit/calendar';
 import { Dropdown } from '@snack-uikit/dropdown';
@@ -50,19 +51,22 @@ export function ChipChoiceTime({
   dropDownClassName,
   showSeconds = true,
   placement,
+  onClearButtonClick,
+  open: openProp,
+  onOpenChange,
   ...rest
 }: ChipChoiceTimeProps) {
   const [selectedValue, setSelectedValue] = useValueControl<TimeValue>({ value, defaultValue, onChange });
 
   const localRef = useRef<HTMLDivElement>(null);
 
-  const [open, setOpen] = useState<boolean>(false);
+  const [open, setOpen] = useUncontrolledProp(openProp, false, onOpenChange);
   const handleOnKeyDown = useHandleOnKeyDown({ setOpen });
 
   const closeDroplist = useCallback(() => {
     setOpen(false);
     setTimeout(() => localRef.current?.focus(), 0);
-  }, []);
+  }, [setOpen]);
 
   const { t } = useLocale('Chips');
 
@@ -76,8 +80,6 @@ export function ChipChoiceTime({
     return getStringTimeValue(selectedValue, { showSeconds, locale: DEFAULT_LOCALE });
   }, [selectedValue, showSeconds, t, valueRender]);
 
-  const clearValue = () => setSelectedValue(undefined);
-
   const handleChangeValue = useCallback(
     (value: TimeValue) => {
       setSelectedValue(value);
@@ -114,7 +116,7 @@ export function ChipChoiceTime({
       <ChipChoiceBase
         {...rest}
         ref={localRef}
-        onClearButtonClick={clearValue}
+        onClearButtonClick={onClearButtonClick}
         value={selectedValue}
         valueToRender={valueToRender}
         size={size}

package/src/components/ChipChoice/constants.ts

@@ -44,6 +44,7 @@ export const CHIP_CHOICE_TYPE = {
   Multiple: 'multiple',
   Date: 'date',
   DateTime: 'date-time',
+  Time: 'time',
   DateRange: 'date-range',
   Single: 'single',
   Custom: 'custom',

package/src/components/ChipChoice/types.ts

@@ -79,8 +79,8 @@ export type ChipChoiceCommonProps = WithSupportProps<
      * @default false
      */
     disableFuzzySearch?: boolean;
-    /** Отображение кнопки очистки значения @default true*/
-    showClearButton?: boolean;
+    /** Колбек для клика по кнопке очистки */
+    onClearButtonClick?: MouseEventHandler<HTMLButtonElement>;
     /** Расположение выпадающего меню */
     placement?: DropdownProps['placement'];
     /**
@@ -92,6 +92,10 @@ export type ChipChoiceCommonProps = WithSupportProps<
      */
     widthStrategy?: DropdownProps['widthStrategy'];
     dropDownClassName?: string;
+    /** Управляет состоянием показан/не показан. */
+    open?: boolean;
+    /** Колбек отображения компонента. Срабатывает при изменении состояния open. */
+    onOpenChange?: (isOpen: boolean) => void;
   }
 >;
 
@@ -123,6 +127,7 @@ export type ChipChoiceSelectCommonProps<T extends ContentRenderProps = ContentRe
     | 'noResultsState'
     | 'loading'
     | 'scrollToSelectedItem'
+    | 'virtualized'
   >;
 
 export type ChipChoiceSingleProps<T extends ContentRenderProps = ContentRenderProps> = ChipChoiceSelectCommonProps<T> &

package/src/components/ChipChoiceRow/ChipChoiceRow.tsx

@@ -1,9 +1,13 @@
 import cn from 'classnames';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useUncontrolledProp } from 'uncontrollable';
 
 import { ButtonFunction } from '@snack-uikit/button';
-import { CrossSVG } from '@snack-uikit/icons';
+import { Divider } from '@snack-uikit/divider';
+import { CrossSVG, PlusSVG } from '@snack-uikit/icons';
+import { Droplist, DroplistProps } from '@snack-uikit/list';
 import { useLocale } from '@snack-uikit/locale';
+import { Tooltip } from '@snack-uikit/tooltip';
 import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
 
 import { CHIP_CHOICE_ROW_IDS } from '../../constants';
@@ -14,7 +18,9 @@ import { ChipChoiceProps, ChipChoiceRowSize, FilterValue, OmitBetter } from './t
 
 export type FiltersState = Record<string, unknown>;
 
-export type ChipChoiceRowFilter = OmitBetter<ChipChoiceProps, 'onChange' | 'value' | 'size' | 'defaultValue'>;
+export type ChipChoiceRowFilter = OmitBetter<ChipChoiceProps, 'onChange' | 'value' | 'size' | 'defaultValue'> & {
+  pinned?: boolean;
+};
 
 export type ChipChoiceRowProps<TState extends FiltersState> = WithSupportProps<{
   /** Состояние фильтров */
@@ -29,32 +35,51 @@ export type ChipChoiceRowProps<TState extends FiltersState> = WithSupportProps<{
   size?: ChipChoiceRowSize;
   /** CSS-класс */
   className?: string;
-  /** Скрыть/показать кнопку очиски @default true */
-  showClearAllButton?: boolean;
-  /** Текст кнопки очистки @default 'Clear all' */
-  clearAllButtonLabel?: string;
+  /** Скрыть/показать кнопку очиски фильтров @default true */
+  showClearButton?: boolean;
+  /** Скрыть/показать кнопку добавления фильров @default true */
+  showAddButton?: boolean;
+  /** Состояние для видимых фильтров */
+  visibleFilters?: string[];
+  /** Коллбек на изменение видимых фильтров */
+  onVisibleFiltersChange?(value: string[]): void;
 }>;
 
 export function ChipChoiceRow<TState extends FiltersState>({
   filters,
   onChange,
-  showClearAllButton = true,
-  clearAllButtonLabel: clearAllButtonLabelProp,
+  showClearButton = true,
+  showAddButton = true,
   className,
   value,
-  defaultValue,
+  defaultValue: defaultValueProp,
   size = CHIP_CHOICE_ROW_SIZE.S,
+  visibleFilters: visibleFiltersProp,
+  onVisibleFiltersChange,
   ...rest
 }: ChipChoiceRowProps<TState>) {
   const { t } = useLocale('Chips');
 
-  const clearAllButtonLabel = clearAllButtonLabelProp ?? t('clearAllButton');
+  const defaultValue = useMemo(() => (defaultValueProp ?? {}) as TState, [defaultValueProp]);
 
-  const [state, setState] = useUncontrolledProp<TState>(value, (defaultValue ?? {}) as TState, newState => {
+  const [state, setState] = useUncontrolledProp<TState>(value, defaultValue, newState => {
     const result = typeof newState === 'function' ? newState(state) : newState;
     onChange?.(result);
   });
 
+  const [addListValue, setAddListValue] = useUncontrolledProp<string[]>(
+    visibleFiltersProp,
+    Object.keys(state),
+    newState => {
+      const result = typeof newState === 'function' ? newState(addListValue) : newState;
+      onVisibleFiltersChange?.(result);
+    },
+  );
+
+  const [openedChip, setOpenedChip] = useState<string>('');
+
+  const [addListOpen, setAddListOpen] = useState(false);
+
   const handleChange = (fieldId: string, value: FilterValue) => {
     setState((state: TState) => ({
       ...state,
@@ -62,44 +87,163 @@ export function ChipChoiceRow<TState extends FiltersState>({
     }));
   };
 
+  const handleChipOpen = useCallback(
+    (filterId: string) => (isOpen: boolean) => {
+      setOpenedChip(isOpen ? filterId : '');
+    },
+    [],
+  );
+
   const handleFiltersClear = () => {
-    setState({} as TState);
+    const defaultState = filters.reduce((res, filter) => {
+      if (filter.pinned) {
+        return { ...res, [filter.id]: defaultValue[filter.id] } as TState;
+      }
+
+      return res;
+    }, {} as TState);
+
+    setState(defaultState);
+    setAddListValue([]);
   };
 
-  const hasAnyFilter = Object.values(state).some(filter => {
-    if (Array.isArray(filter)) {
-      return filter.length > 0 && Object.values(filter).some(Boolean);
+  const pinnedFilters = useMemo(() => filters.filter(filter => filter.pinned), [filters]);
+  const nonPinnedFilters = useMemo(() => filters.filter(filter => !filter.pinned), [filters]);
+
+  const visibleFilters = useMemo(
+    () =>
+      addListValue
+        .map(filterId => nonPinnedFilters.find(filter => filter.id === filterId))
+        .filter((item): item is ChipChoiceRowFilter => Boolean(item)),
+    [addListValue, nonPinnedFilters],
+  );
+
+  const hasAnyFilter = useMemo(
+    () => visibleFilters.length > 0 || pinnedFilters.some(filter => state[filter.id] !== defaultValue[filter.id]),
+    [defaultValue, pinnedFilters, state, visibleFilters.length],
+  );
+
+  const handleClearPinnedFilter = (filterId: string) => {
+    const defaultFilterValue = defaultValue[filterId];
+
+    if (state[filterId] === defaultFilterValue) {
+      return;
     }
 
-    if (filter && typeof filter === 'object') {
-      return Object.values(filter).some(Boolean) || filter instanceof Date;
+    return () => setState((prevState: TState) => ({ ...prevState, [filterId]: defaultFilterValue }));
+  };
+
+  const handleRemoveVisibleFilter = (filterId: string) => () => {
+    setAddListValue((prev?: string[]) => prev?.filter(item => filterId !== item));
+    setState((prevState: TState) => ({ ...prevState, [filterId]: undefined }));
+  };
+
+  const addSelectorOptions: DroplistProps['items'] = useMemo(
+    () =>
+      nonPinnedFilters
+        .filter(filter => !addListValue.includes(filter.id))
+        .map((filter, index) => ({
+          id: filter.id,
+          content: { option: filter.label ?? filter.id },
+          onClick: () => {
+            setAddListValue(function (prevValue?: string[]) {
+              return [...(prevValue ?? []), filter.id];
+            });
+            setAddListOpen(false);
+          },
+          'data-test-id': `${CHIP_CHOICE_ROW_IDS.addButtonOption}-${filter['data-test-id'] ?? index}`,
+        })),
+    [addListValue, nonPinnedFilters, setAddListValue],
+  );
+
+  const canAddChips = addSelectorOptions.length > 0;
+
+  const addListPrevValue = useRef(addListValue);
+
+  useEffect(() => {
+    const prevValue = addListPrevValue.current;
+
+    if (addListValue.length > prevValue.length) {
+      const newItem = addListValue.find(item => !prevValue.includes(item));
+
+      if (newItem) {
+        handleChipOpen(newItem)(true);
+      }
     }
 
-    return Boolean(filter);
-  });
+    addListPrevValue.current = addListValue;
+  }, [addListValue, handleChipOpen]);
 
   return (
     <div className={cn(styles.chipChoiceRow, className)} {...extractSupportProps(rest)}>
-      {filters.map(filter => (
+      {pinnedFilters.length > 0 && (
+        <div className={styles.pinnedItems}>
+          {pinnedFilters.map(filter => (
+            <ForwardedChipChoice
+              key={filter.id}
+              {...filter}
+              value={state[filter.id] as never}
+              size={MAP_ROW_SIZE_TO_CHOICE_SIZE[size]}
+              onChange={(value: FilterValue) => handleChange(filter.id, value)}
+              onClearButtonClick={handleClearPinnedFilter(filter.id)}
+            />
+          ))}
+
+          <Divider orientation='vertical' className={styles.divider} />
+        </div>
+      )}
+
+      {visibleFilters.map(filter => (
         <ForwardedChipChoice
           key={filter.id}
           {...filter}
           value={state[filter.id] as never}
           size={MAP_ROW_SIZE_TO_CHOICE_SIZE[size]}
           onChange={(value: FilterValue) => handleChange(filter.id, value)}
+          onClearButtonClick={handleRemoveVisibleFilter(filter.id)}
+          open={openedChip === filter.id}
+          onOpenChange={handleChipOpen(filter.id)}
         />
       ))}
 
-      {showClearAllButton && hasAnyFilter && (
-        <ButtonFunction
-          onClick={handleFiltersClear}
-          label={clearAllButtonLabel}
-          icon={<CrossSVG />}
-          iconPosition='before'
-          size={MAP_ROW_SIZE_TO_BUTTON_SIZE[size]}
-          data-test-id={CHIP_CHOICE_ROW_IDS.clearAllButton}
-        />
-      )}
+      <div className={styles.controlWrapper}>
+        {showAddButton && (
+          <Tooltip
+            tip={t('addButtonDisabledTip')}
+            open={canAddChips ? false : undefined}
+            placement='bottom'
+            data-test-id={CHIP_CHOICE_ROW_IDS.addButtonTooltip}
+          >
+            <Droplist
+              open={canAddChips && addListOpen}
+              onOpenChange={setAddListOpen}
+              items={addSelectorOptions}
+              triggerClassName={styles.addButtonWrapper}
+              trigger='clickAndFocusVisible'
+            >
+              <ButtonFunction
+                disabled={!canAddChips}
+                label={t('add')}
+                icon={<PlusSVG />}
+                iconPosition='before'
+                size={MAP_ROW_SIZE_TO_BUTTON_SIZE[size]}
+                data-test-id={CHIP_CHOICE_ROW_IDS.addButton}
+              />
+            </Droplist>
+          </Tooltip>
+        )}
+
+        {showClearButton && hasAnyFilter && (
+          <ButtonFunction
+            onClick={handleFiltersClear}
+            label={t('clear')}
+            icon={<CrossSVG />}
+            iconPosition='before'
+            size={MAP_ROW_SIZE_TO_BUTTON_SIZE[size]}
+            data-test-id={CHIP_CHOICE_ROW_IDS.clearButton}
+          />
+        )}
+      </div>
     </div>
   );
 }

package/src/components/ChipChoiceRow/components/constants.ts

@@ -6,6 +6,7 @@ export const MAP_CHIP_TYPE_TO_COMPONENT = {
   [CHIP_CHOICE_TYPE.Multiple]: ChipChoice.Multiple,
   [CHIP_CHOICE_TYPE.Date]: ChipChoice.Date,
   [CHIP_CHOICE_TYPE.DateTime]: ChipChoice.Date,
+  [CHIP_CHOICE_TYPE.Time]: ChipChoice.Time,
   [CHIP_CHOICE_TYPE.DateRange]: ChipChoice.DateRange,
   [CHIP_CHOICE_TYPE.Custom]: ChipChoice.Custom,
 };

package/src/components/ChipChoiceRow/helpers.ts

@@ -0,0 +1,15 @@
+/**
+ * функция проверки заполненности фильтра
+ * @function hasFilterBeenApplied
+ */
+export function hasFilterBeenApplied(filter: unknown): boolean {
+  if (Array.isArray(filter)) {
+    return filter.length > 0 && Object.values(filter).some(Boolean);
+  }
+
+  if (filter && typeof filter === 'object') {
+    return Object.values(filter).some(Boolean) || filter instanceof Date;
+  }
+
+  return Boolean(filter);
+}

package/src/components/ChipChoiceRow/index.ts

@@ -1 +1,2 @@
 export * from './ChipChoiceRow';
+export * from './helpers';

package/src/components/ChipChoiceRow/styles.module.scss

@@ -1,8 +1,33 @@
-@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-chips-chipChoice';
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-chips-chipChoice' as chips;
 
 .chipChoiceRow { 
-  @include styles-tokens-chips-chipChoice.composite-var(styles-tokens-chips-chipChoice.$chip-choice-row-container);
+  @include chips.composite-var(chips.$chip-choice-row-container);
 
   display: flex;
   flex-wrap: wrap;
+}
+
+.pinnedItems {
+  @include chips.composite-var(chips.$chip-choice-row-pinned);
+
+  display: flex;
+  flex-wrap: wrap;
+  //height: min-content;
+}
+
+.controlWrapper {
+  @include chips.composite-var(chips.$chip-choice-row-control-wrapper);
+
+  display: flex;
+  flex-wrap: nowrap;
+  //height: min-content;
+}
+
+.divider {
+  align-self: stretch;
+  height: auto;
+}
+
+.addButtonWrapper {
+  display: inline-flex;
 }

package/src/components/ChipChoiceRow/types.ts

@@ -1,10 +1,14 @@
 import { ValueOf } from '@snack-uikit/utils';
 
-import { ChipChoiceCustomProps } from '../ChipChoice/components';
-import { ChipChoiceDateProps } from '../ChipChoice/components/ChipChoiceDate';
-import { ChipChoiceDateRangeProps } from '../ChipChoice/components/ChipChoiceDateRange';
+import {
+  ChipChoiceCustomProps,
+  ChipChoiceDateProps,
+  ChipChoiceDateRangeProps,
+  ChipChoiceMultipleProps,
+  ChipChoiceSingleProps,
+  ChipChoiceTimeProps,
+} from '../ChipChoice';
 import { CHIP_CHOICE_TYPE } from '../ChipChoice/constants';
-import { ChipChoiceMultipleProps, ChipChoiceSingleProps } from '../ChipChoice/types';
 import { CHIP_CHOICE_ROW_SIZE } from './constants';
 
 export type ChipChoiceRowSize = ValueOf<typeof CHIP_CHOICE_ROW_SIZE>;
@@ -25,6 +29,10 @@ type ChipChoiceDateTimeType = {
   type: typeof CHIP_CHOICE_TYPE.DateTime;
 } & Omit<ChipChoiceDateProps, 'mode'> & { mode: 'date-time'; showSeconds?: boolean };
 
+type ChipChoiceTimeType = {
+  type: typeof CHIP_CHOICE_TYPE.Time;
+} & ChipChoiceTimeProps;
+
 type ChipChoiceDateRangeType = {
   type: typeof CHIP_CHOICE_TYPE.DateRange;
 } & ChipChoiceDateRangeProps;
@@ -40,6 +48,7 @@ export type ChipChoiceProps = {
   | ChipChoiceSingleType
   | ChipChoiceDateType
   | ChipChoiceDateTimeType
+  | ChipChoiceTimeType
   | ChipChoiceDateRangeType
   | ChipChoiceCustomType
 );

package/src/constants.ts

@@ -34,7 +34,10 @@ export const CHIP_CHOICE_TEST_IDS = {
 };
 
 export const CHIP_CHOICE_ROW_IDS = {
-  clearAllButton: 'chip-choice-row__clear-all-button',
+  clearButton: 'chip-choice-row__clear-button',
+  addButton: 'chip-choice-row__add-button',
+  addButtonTooltip: 'chip-choice-row__add-button-tooltip',
+  addButtonOption: 'chip-choice-row__add-button-option',
 };
 
 export const CHIP_TOGGLE_TEST_IDS = {