chore: sync with master

tewarig · tewarig · commit deff808b22c8 · 2025-03-11T00:24:48.000+05:30
diff --git a/packages/blade/src/components/ActionList/ActionListItem.tsx b/packages/blade/src/components/ActionList/ActionListItem.tsx
@@ -251,6 +251,39 @@ const ActionListItemText = assignWithoutSideEffects(_ActionListItemText, {
   componentId: componentIds.ActionListItemText,
 });
 
+const BaseMenuLeadingItem = ({
+  isSelected,
+  leading,
+  selectionType,
+  isDisabled,
+}: {
+  isSelected?: boolean;
+  leading?: React.ReactNode;
+  selectionType: string | undefined;
+  isDisabled?: boolean;
+}): React.ReactElement | null => {
+  if (selectionType === 'multiple') {
+    return (
+      <BaseBox
+        pointerEvents="none"
+        // Adding aria-hidden because the listbox item in multiselect in itself explains the behaviour so announcing checkbox is unneccesary and just a nice UI tweak for us
+        {...makeAccessible({
+          hidden: true,
+        })}
+      >
+        <Checkbox isChecked={isSelected} tabIndex={-1} isDisabled={isDisabled}>
+          {/*
+        Checkbox requires children. Didn't want to make it optional because its helpful for consumers
+        But for this case in particular, we just want to use Text separately so that we can control spacing and color and keep it consistent with non-multiselect dropdowns
+      */}
+          {null}
+        </Checkbox>
+      </BaseBox>
+    );
+  }
+  return React.isValidElement(leading) ? leading : null;
+};
+
 type ClickHandlerType = (e: React.MouseEvent<HTMLButtonElement>) => void;
 
 const makeActionListItemClickable = (
@@ -297,26 +330,29 @@ const _ActionListItem = (props: ActionListItemProps): React.ReactElement => {
     isKeydownPressed,
     filteredValues,
     hasAutoCompleteInBottomSheetHeader,
+    hasUnControlledFilterChipSelectInput,
   } = useDropdown();
 
   const hasAutoComplete =
     hasAutoCompleteInBottomSheetHeader ||
     dropdownTriggerer === dropdownComponentIds.triggers.AutoComplete;
 
   const renderOnWebAs = props.href ? 'a' : 'button';
-
   /**
    * In SelectInput, returns the isSelected according to selected indexes in the state
    *
    * In Other Triggers (Menu Usecase), returns `props.isSelected` since passing the
    * isSelected prop explicitly is the only way to select item in menu
    */
   const getIsSelected = (): boolean | undefined => {
-    if (dropdownTriggerer === dropdownComponentIds.triggers.SelectInput || hasAutoComplete) {
+    if (
+      dropdownTriggerer === dropdownComponentIds.triggers.SelectInput ||
+      hasAutoComplete ||
+      hasUnControlledFilterChipSelectInput
+    ) {
       if (typeof props._index === 'number') {
         return selectedIndices.includes(props._index);
       }
-
       return undefined;
     }
 
@@ -359,25 +395,13 @@ const _ActionListItem = (props: ActionListItemProps): React.ReactElement => {
       title={props.title}
       description={props.description}
       leading={
-        selectionType === 'multiple' ? (
-          <BaseBox
-            pointerEvents="none"
-            // Adding aria-hidden because the listbox item in multiselect in itself explains the behaviour so announcing checkbox is unneccesary and just a nice UI tweak for us
-            {...makeAccessible({
-              hidden: true,
-            })}
-          >
-            <Checkbox isChecked={isSelected} tabIndex={-1} isDisabled={props.isDisabled}>
-              {/* 
-      Checkbox requires children. Didn't want to make it optional because its helpful for consumers
-      But for this case in particular, we just want to use Text separately so that we can control spacing and color and keep it consistent with non-multiselect dropdowns
-    */}
-              {null}
-            </Checkbox>
-          </BaseBox>
-        ) : (
-          props.leading
-        )
+        <BaseMenuLeadingItem
+          key={`${dropdownBaseId}-${props._index}-leading-${isSelected}`}
+          isSelected={isSelected}
+          leading={props.leading}
+          selectionType={selectionType}
+          isDisabled={props.isDisabled}
+        />
       }
       trailing={props.trailing}
       titleSuffix={props.titleSuffix}
diff --git a/packages/blade/src/components/BottomSheet/__tests__/__snapshots__/BottomSheet.web.test.tsx.snap b/packages/blade/src/components/BottomSheet/__tests__/__snapshots__/BottomSheet.web.test.tsx.snap
@@ -142,7 +142,7 @@ exports[`<BottomSheet /> should compose with DropdownButton 1`] = `
   -ms-flex-direction: column;
   flex-direction: column;
   padding-right: 8px;
-  padding-left: 0px;
+  padding-left: 8px;
 }
 
 .c22.c22.c22.c22.c22 {
diff --git a/packages/blade/src/components/Dropdown/Dropdown.tsx b/packages/blade/src/components/Dropdown/Dropdown.tsx
@@ -85,6 +85,10 @@ const _Dropdown = (
     hasAutoCompleteInBottomSheetHeader,
     setHasAutoCompleteInBottomSheetHeader,
   ] = React.useState(false);
+  const [
+    hasUnControlledFilterChipSelectInput,
+    setHasUnControlledFilterChipSelectInput,
+  ] = React.useState(false);
   const [isKeydownPressed, setIsKeydownPressed] = React.useState(false);
   const [changeCallbackTriggerer, setChangeCallbackTriggerer] = React.useState<
     DropdownContextType['changeCallbackTriggerer']
@@ -199,6 +203,8 @@ const _Dropdown = (
       setHasFooterAction,
       hasAutoCompleteInBottomSheetHeader,
       setHasAutoCompleteInBottomSheetHeader,
+      hasUnControlledFilterChipSelectInput,
+      setHasUnControlledFilterChipSelectInput,
       dropdownTriggerer: dropdownTriggerer.current,
       changeCallbackTriggerer,
       setChangeCallbackTriggerer,
diff --git a/packages/blade/src/components/Dropdown/FilterChipSelectInput.web.tsx b/packages/blade/src/components/Dropdown/FilterChipSelectInput.web.tsx
@@ -1,41 +1,48 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/no-unnecessary-type-assertion */
 
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useDropdown } from './useDropdown';
 import { dropdownComponentIds } from './dropdownComponentIds';
 import { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';
 import { BaseFilterChip } from '~components/FilterChip/BaseFilterChip';
 import { getActionListContainerRole } from '~components/ActionList/getA11yRoles';
 import type { BaseFilterChipProps } from '~components/FilterChip/types';
 import type { DataAnalyticsAttribute } from '~utils/types';
+import { useId } from '~utils/useId';
+import { useFirstRender } from '~utils/useFirstRender';
 
-type FilterChipSelectInput = Pick<
+type FilterChipSelectInputProps = Pick<
   BaseFilterChipProps,
-  | 'onKeyDown'
-  | 'value'
-  | 'onClearButtonClick'
-  | 'label'
-  | 'testID'
-  | 'onClick'
-  | 'selectionType'
-  | 'onBlur'
+  'onKeyDown' | 'value' | 'label' | 'testID' | 'onClick' | 'selectionType' | 'onBlur'
 > & {
   accessibilityLabel?: string;
+  onChange?: (props: { name: string; values: string[] }) => void;
+  name?: string;
+  onClearButtonClick?: (props: { name: string; values: string[] }) => void;
 } & DataAnalyticsAttribute;
 
-const _FilterChipSelectInput = ({
-  onClick,
-  onBlur,
-  onKeyDown,
-  accessibilityLabel,
-  testID,
-  value,
-  onClearButtonClick,
-  label,
-  ...rest
-}: FilterChipSelectInput): React.ReactElement => {
+const _FilterChipSelectInput = (props: FilterChipSelectInputProps): React.ReactElement => {
+  const idBase = useId('filter-chip-select-input');
   const {
+    onClick,
+    onBlur,
+    onKeyDown,
+    accessibilityLabel,
+    testID,
+    value,
+    onClearButtonClick,
+    label,
+    onChange,
+    name,
+    ...rest
+  } = props;
+  const [uncontrolledInputValue, setUncontrolledInputValue] = React.useState<string[]>([]);
+  const isFirstRender = useFirstRender();
+
+  const {
+    options,
+    selectedIndices,
     onTriggerClick,
     onTriggerKeydown,
     dropdownBaseId,
@@ -44,19 +51,80 @@ const _FilterChipSelectInput = ({
     hasFooterAction,
     triggererRef,
     selectionType,
+    isControlled,
+    setHasUnControlledFilterChipSelectInput,
+    setSelectedIndices,
+    controlledValueIndices,
+    changeCallbackTriggerer,
   } = useDropdown();
 
+  const isUnControlled = options.length > 0 && props.value === undefined;
+
+  useEffect(() => {
+    if (isUnControlled) {
+      setHasUnControlledFilterChipSelectInput(true);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isUnControlled]);
+
+  const getValuesArrayFromIndices = (): string[] => {
+    let indices: number[] = [];
+    if (isControlled) {
+      indices = controlledValueIndices;
+    } else {
+      indices = selectedIndices;
+    }
+
+    return indices.map((selectionIndex) => options[selectionIndex].value);
+  };
+
+  const getTitleFromValue = (value: string): string => {
+    const option = options.find((option) => option.value === value);
+    return option ? option.title : '';
+  };
+
+  const getUnControlledFilterChipValue = (): string | string[] => {
+    if (selectionType === 'single') {
+      if (uncontrolledInputValue.length > 0) {
+        return getTitleFromValue(uncontrolledInputValue[0]);
+      }
+      return '';
+    }
+    return uncontrolledInputValue;
+  };
+
+  const handleClearButtonClick = (): void => {
+    props.onClearButtonClick?.({ name: name ?? idBase, values: getValuesArrayFromIndices() });
+    if (isUnControlled) {
+      setUncontrolledInputValue([]);
+      setSelectedIndices([]);
+    }
+  };
+
+  useEffect(() => {
+    if (!isFirstRender) {
+      props.onChange?.({
+        name: props.name || idBase,
+        values: getValuesArrayFromIndices(),
+      });
+      if (isUnControlled) {
+        setUncontrolledInputValue(getValuesArrayFromIndices());
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [changeCallbackTriggerer]);
+
   return (
     <BaseFilterChip
       label={label}
-      value={value}
-      onClearButtonClick={onClearButtonClick}
+      value={value ?? getUnControlledFilterChipValue()}
+      onClearButtonClick={handleClearButtonClick}
       selectionType={selectionType}
       {...rest}
       ref={triggererRef as any}
       accessibilityProps={{
         label: accessibilityLabel ?? label,
-        hasPopup: getActionListContainerRole(hasFooterAction, 'DropdownButton'),
+        hasPopup: getActionListContainerRole(hasFooterAction, 'FilterChipSelectInput'),
         expanded: isOpen,
         controls: `${dropdownBaseId}-actionlist`,
         activeDescendant: activeIndex >= 0 ? `${dropdownBaseId}-${activeIndex}` : undefined,
diff --git a/packages/blade/src/components/Dropdown/__tests__/__snapshots__/Dropdown.native.test.tsx.snap b/packages/blade/src/components/Dropdown/__tests__/__snapshots__/Dropdown.native.test.tsx.snap
@@ -1184,7 +1184,7 @@ exports[`<Dropdown /> should render dropdown 1`] = `
                               {
                                 "display": "flex",
                                 "flexDirection": "column",
-                                "paddingLeft": 0,
+                                "paddingLeft": 8,
                                 "paddingRight": 8,
                               },
                             ]
@@ -1363,7 +1363,7 @@ exports[`<Dropdown /> should render dropdown 1`] = `
                               {
                                 "display": "flex",
                                 "flexDirection": "column",
-                                "paddingLeft": 0,
+                                "paddingLeft": 8,
                                 "paddingRight": 8,
                               },
                             ]
diff --git a/packages/blade/src/components/Dropdown/__tests__/__snapshots__/Dropdown.web.test.tsx.snap b/packages/blade/src/components/Dropdown/__tests__/__snapshots__/Dropdown.web.test.tsx.snap
@@ -2178,7 +2178,7 @@ exports[`<Dropdown /> with <FilterChipSelectInput/> should support data-analytic
         data-blade-component="base-box"
       >
         <button
-          aria-controls="dropdown-503-actionlist"
+          aria-controls="dropdown-514-actionlist"
           aria-expanded="false"
           aria-haspopup="menu"
           aria-label="profile"
diff --git a/packages/blade/src/components/Dropdown/docs/DropdownWithFilterChip.stories.tsx b/packages/blade/src/components/Dropdown/docs/DropdownWithFilterChip.stories.tsx
@@ -3,6 +3,8 @@ import { DropdownButton } from '../DropdownButton';
 import { Dropdown, DropdownOverlay } from '..';
 import { FilterChipSelectInput } from '../FilterChipSelectInput';
 import { ActionList, ActionListItem } from '~components/ActionList';
+import { Box } from '~components/Box';
+import { Text } from '~components/Typography';
 
 const DropdownStoryMeta = {
   title: 'Components/Dropdown/With Filter Chip',
@@ -124,4 +126,53 @@ export const SelectionTypeMultiple = (): React.ReactElement => {
   );
 };
 
+export const UncontrolledFilterChipSelectInput = (): React.ReactElement => {
+  return (
+    <Box>
+      <Text size="small" weight="semibold" color="interactive.text.primary.normal">
+        Uncontrolled Filter Chip Select Input - Single
+      </Text>
+      <Dropdown selectionType="single">
+        <FilterChipSelectInput
+          label="Filter Chip"
+          onChange={(value) => {
+            console.log('value', value);
+          }}
+          onClearButtonClick={(value) => {
+            console.log('value', value);
+          }}
+        />
+        <DropdownOverlay>
+          <ActionList>
+            <ActionListItem title="Latest Added" value="latest-added" />
+            <ActionListItem title="Latest Invoice" value="latest-invoice" />
+            <ActionListItem title="Oldest Due Date" value="oldest-due-date" />
+          </ActionList>
+        </DropdownOverlay>
+      </Dropdown>
+      <Text size="small" weight="semibold" color="interactive.text.primary.normal">
+        Uncontrolled Filter Chip Select Input - Multiple
+      </Text>
+      <Dropdown selectionType="multiple">
+        <FilterChipSelectInput
+          label="Filter Chip"
+          onChange={(value) => {
+            console.log('value', value);
+          }}
+          onClearButtonClick={(value) => {
+            console.log('value', value);
+          }}
+        />
+        <DropdownOverlay>
+          <ActionList>
+            <ActionListItem title="Latest Added" value="latest-added" />
+            <ActionListItem title="Latest Invoice" value="latest-invoice" />
+            <ActionListItem title="Oldest Due Date" value="oldest-due-date" />
+          </ActionList>
+        </DropdownOverlay>
+      </Dropdown>
+    </Box>
+  );
+};
+
 export default DropdownStoryMeta;
diff --git a/packages/blade/src/components/Dropdown/useDropdown.ts b/packages/blade/src/components/Dropdown/useDropdown.ts
@@ -97,6 +97,11 @@ type DropdownContextType = {
   hasFooterAction: boolean;
   setHasFooterAction: (value: boolean) => void;
 
+  /**
+   * Whether the FilterChipSelectInput is uncontrolled
+   */
+  hasUnControlledFilterChipSelectInput: boolean;
+  setHasUnControlledFilterChipSelectInput: (value: boolean) => void;
   /**
    * Apart from dropdownTriggerer prop, we also set this boolean because in BottomSheet, the initial trigger can be Select but also have autocomplete inside of it
    */
@@ -151,6 +156,8 @@ const DropdownContext = React.createContext<DropdownContextType>({
   setChangeCallbackTriggerer: noop,
   isControlled: false,
   setIsControlled: noop,
+  hasUnControlledFilterChipSelectInput: false,
+  setHasUnControlledFilterChipSelectInput: noop,
   dropdownBaseId: '',
   actionListItemRef: {
     current: null,
diff --git a/packages/blade/src/components/FilterChip/BaseFilterChip.web.tsx b/packages/blade/src/components/FilterChip/BaseFilterChip.web.tsx
diff --git a/packages/blade/src/components/Input/DropdownInputTriggers/__tests__/__snapshots__/AutoComplete.web.test.tsx.snap b/packages/blade/src/components/Input/DropdownInputTriggers/__tests__/__snapshots__/AutoComplete.web.test.tsx.snap

Original file line number	Diff line number	Diff line change
@@ -142,7 +142,7 @@ exports[`<BottomSheet /> should compose with DropdownButton 1`] = `
`142`	`142`	`-ms-flex-direction: column;`
`143`	`143`	`flex-direction: column;`
`144`	`144`	`padding-right: 8px;`
`145`		`- padding-left: 0px;`
	`145`	`+ padding-left: 8px;`
`146`	`146`	`}`
`147`	`147`
`148`	`148`	`.c22.c22.c22.c22.c22 {`
Original file line number	Diff line number	Diff line change
@@ -1184,7 +1184,7 @@ exports[`<Dropdown /> should render dropdown 1`] = `
`1184`	`1184`	`{`
`1185`	`1185`	`"display": "flex",`
`1186`	`1186`	`"flexDirection": "column",`
`1187`		`- "paddingLeft": 0,`
	`1187`	`+ "paddingLeft": 8,`
`1188`	`1188`	`"paddingRight": 8,`
`1189`	`1189`	`},`
`1190`	`1190`	`]`
@@ -1363,7 +1363,7 @@ exports[`<Dropdown /> should render dropdown 1`] = `
`1363`	`1363`	`{`
`1364`	`1364`	`"display": "flex",`
`1365`	`1365`	`"flexDirection": "column",`
`1366`		`- "paddingLeft": 0,`
	`1366`	`+ "paddingLeft": 8,`
`1367`	`1367`	`"paddingRight": 8,`
`1368`	`1368`	`},`
`1369`	`1369`	`]`
Original file line number	Diff line number	Diff line change
@@ -2178,7 +2178,7 @@ exports[`<Dropdown /> with <FilterChipSelectInput/> should support data-analytic
`2178`	`2178`	`data-blade-component="base-box"`
`2179`	`2179`	`>`
`2180`	`2180`	`<button`
`2181`		`- aria-controls="dropdown-503-actionlist"`
	`2181`	`+ aria-controls="dropdown-514-actionlist"`
`2182`	`2182`	`aria-expanded="false"`
`2183`	`2183`	`aria-haspopup="menu"`
`2184`	`2184`	`aria-label="profile"`