diff --git a/example/src/App.tsx b/example/src/App.tsx index db86fff..8763df5 100644 --- a/example/src/App.tsx +++ b/example/src/App.tsx @@ -27,8 +27,8 @@ export default function App() { const [searchTerm, setSearchTerm] = useState(''); const [ingredients, setIngredients] = useState([]); const [ingredientOptions, setIngredientOptions] = useState([ - { label: 0, value: 0 }, - { label: 1, value: false }, + { label: 0, value: 0, disabled: true }, + { label: 1, value: false, disabled: true }, { label: 2, value: 2, disabled: true }, ]); useEffect(() => { @@ -190,9 +190,9 @@ export default function App() { label="Meal preferences" placeholder="Select your meal preferences" options={[ - { name: '🍛 Rice', value: '1', disabled: false }, + { name: '🍛 Rice', value: '1' }, { name: '🍗 Chicken', value: '2' }, - { name: '🥦 Brocoli', value: '3', disabled: false }, + { name: '🥦 Brocoli', value: '3' }, { name: '🍕 Pizza', value: '4' }, ]} maxSelectableItems={2} diff --git a/src/index.tsx b/src/index.tsx index 6bc16d8..f58e303 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -18,7 +18,11 @@ import type { DropdownSelectHandle, TSelectedItem, } from './types/index.types'; -import { extractPropertyFromArray, getSelectionsData } from './utils'; +import { + extractPropertyFromArray, + getSelectionsData, + removeDisabledItems, +} from './utils'; import { useSelectionHandler, useModal, @@ -259,17 +263,20 @@ export const DropdownSelect = forwardRef( modifiedOptions?.length > 1 && ( - handleSelectAll()} - primaryColor={primaryColor} - checkboxControls={checkboxControls} - /> + {/* only show this if all the items in the list are not disabled */} + {removeDisabledItems(modifiedOptions)?.length !== 0 && ( + handleSelectAll()} + primaryColor={primaryColor} + checkboxControls={checkboxControls} + /> + )} )}