diff --git a/packages/blade/src/components/ActionList/ActionList.tsx b/packages/blade/src/components/ActionList/ActionList.tsx index 42a239f2283..0e0f726b949 100644 --- a/packages/blade/src/components/ActionList/ActionList.tsx +++ b/packages/blade/src/components/ActionList/ActionList.tsx @@ -10,41 +10,15 @@ import { useBottomSheetContext } from '~components/BottomSheet/BottomSheetContex import { makeAccessible } from '~utils/makeAccessible'; import { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects'; import type { TestID } from '~utils/types'; -import type { SurfaceLevels } from '~tokens/theme/theme'; import BaseBox from '~components/Box/BaseBox'; import { metaAttribute, MetaConstants } from '~utils/metaAttribute'; -import { throwBladeError } from '~utils/logger'; import { dropdownComponentIds } from '~components/Dropdown/dropdownComponentIds'; -type ActionListContextProp = Pick; -const ActionListContext = React.createContext({ surfaceLevel: 2 }); -const useActionListContext = (): ActionListContextProp => { - const context = React.useContext(ActionListContext); - - if (__DEV__) { - if (!context) { - throwBladeError({ - message: 'useActionListContext has to be called inside ActionListContext.Provider', - moduleName: 'ActionList', - }); - } - } - return context; -}; - type ActionListProps = { children: React.ReactNode[]; - /** - * Decides the backgroundColor of ActionList - */ - surfaceLevel?: Exclude; } & TestID; -const _ActionList = ({ - children, - surfaceLevel = 2, - testID, -}: ActionListProps): React.ReactElement => { +const _ActionList = ({ children, testID }: ActionListProps): React.ReactElement => { const { setOptions, actionListItemRef, @@ -66,7 +40,6 @@ const _ActionList = ({ setOptions(actionListOptions); // eslint-disable-next-line react-hooks/exhaustive-deps }, [actionListOptions]); - const actionListContextValue = React.useMemo(() => ({ surfaceLevel }), [surfaceLevel]); if ( filteredValues.length <= 0 && @@ -87,38 +60,34 @@ const _ActionList = ({ // 1. We don't render the box wrapper styles which includes shadows, padding, border etc // 2. to ensure GorhomBottomSheetSectionList works as expected, if we add extra wrappers GorhomBottomSheet won't render the content inside // NOTE: That this also means inside BottomSheet, ActionList won't render any ActionListHeader or Footer. - return ( - - {isInBottomSheet ? ( - - ) : ( - - - - )} - + return isInBottomSheet ? ( + + ) : ( + + + ); }; @@ -159,4 +128,4 @@ const ActionList = assignWithoutSideEffects(React.memo(_ActionList), { }); export type { ActionListProps }; -export { ActionList, useActionListContext }; +export { ActionList }; diff --git a/packages/blade/src/components/ActionList/ActionListItem.tsx b/packages/blade/src/components/ActionList/ActionListItem.tsx index f2e4190991a..4a5719f272c 100644 --- a/packages/blade/src/components/ActionList/ActionListItem.tsx +++ b/packages/blade/src/components/ActionList/ActionListItem.tsx @@ -6,7 +6,6 @@ import { componentIds } from './componentIds'; import type { StyledActionListItemProps } from './styles/getBaseActionListItemStyles'; import { validateActionListItemProps, getNormalTextColor } from './actionListUtils'; import { getActionListItemRole, getActionListSectionRole, isRoleMenu } from './getA11yRoles'; -import { useActionListContext } from './ActionList'; import { Divider } from '~components/Divider'; import BaseBox from '~components/Box/BaseBox'; import type { IconComponent } from '~components/Icons'; @@ -117,7 +116,6 @@ const _ActionListSection = ({ _hideDivider, _sectionChildValues, }: ActionListSectionProps): React.ReactElement => { - const { surfaceLevel } = useActionListContext(); const { hasAutoCompleteInBottomSheetHeader, dropdownTriggerer, filteredValues } = useDropdown(); const hasAutoComplete = hasAutoCompleteInBottomSheetHeader || @@ -146,13 +144,12 @@ const _ActionListSection = ({ role: getActionListSectionRole(), label: title, })} - backgroundColor={`surface.background.level${surfaceLevel}.lowContrast`} {...metaAttribute({ name: MetaConstants.ActionListSection, testID })} > {/* We're announcing title as group label so we can hide this */} {isSectionVisible ? ( - + {title} @@ -184,7 +181,7 @@ const _ActionListItemIcon = ({ icon }: { icon: IconComponent }): React.ReactElem diff --git a/packages/blade/src/components/ActionList/ActionListNoResults.tsx b/packages/blade/src/components/ActionList/ActionListNoResults.tsx index d227cd46141..565ebf4e7ab 100644 --- a/packages/blade/src/components/ActionList/ActionListNoResults.tsx +++ b/packages/blade/src/components/ActionList/ActionListNoResults.tsx @@ -11,11 +11,11 @@ const ActionListNoResults = (): React.ReactElement => { justifyContent="center" padding="spacing.5" > - + No Search Result Found - + Try searching for a different value diff --git a/packages/blade/src/components/index.ts b/packages/blade/src/components/index.ts index c7b26bca876..d9e0fe73769 100644 --- a/packages/blade/src/components/index.ts +++ b/packages/blade/src/components/index.ts @@ -1,5 +1,6 @@ export * from './Amount'; export * from './Accordion'; +export * from './ActionList'; export * from './Badge'; export * from './BladeProvider'; export * from './BottomSheet';