Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Controlled combobox data #232

Merged
merged 8 commits into from
Feb 1, 2024
Prev Previous commit
Next Next commit
Revert "feat: add controllable state functionality to combobox items"
This reverts commit b30921a.
  • Loading branch information
coopbri committed Feb 1, 2024
commit 52f015658ad9e23c9c40186ab849369d886478db
27 changes: 0 additions & 27 deletions src/components/core/Combobox/Combobox.stories.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
import { useState } from "react";

import { comboboxState } from "./Combobox.spec";
import { Combobox, Image } from "components/core";

Expand Down Expand Up @@ -64,31 +62,6 @@ export const Default: Story = {
},
};

export const ControlledItems: Story = {
args: {
size: "md",
label: {
singular: "Fruit",
plural: "Fruit",
display: true,
},
groups: [groups[0]],
},
render: (args) => {
const allItems = args.groups.flatMap((group) => group.items);
// eslint-disable-next-line react-hooks/rules-of-hooks
const [controlledItems, setControlledItems] = useState(allItems);

return (
<Combobox
{...args}
controlledItems={controlledItems}
setControlledItems={setControlledItems}
/>
);
},
};

export const ImageIcons: Story = {
args: {
...Default.args,
Expand Down
22 changes: 5 additions & 17 deletions src/components/core/Combobox/Combobox.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -60,11 +60,9 @@ export interface Props
props?: PrimitiveComboboxLabelProps;
display?: boolean;
};
groups: Group[];
/** Custom content render override. */
content?: ReactNode;
controlledItems?: Item[];
setControlledItems?: (items: Item[]) => void;
groups: Group[];
itemIndicator?: boolean;
triggerEnabled?: boolean;
inputProps?: Omit<InputProps, "size">;
Expand All @@ -81,8 +79,6 @@ const Combobox = ({
itemIndicator = false,
triggerEnabled = true,
inputProps,
controlledItems,
setControlledItems,
contentProps,
controlProps,
positionerProps,
Expand Down Expand Up @@ -111,15 +107,13 @@ const Combobox = ({
item.value.toLowerCase().includes(evt.value.toLowerCase()),
);

controlledItems
? setControlledItems?.(filtered.length ? filtered : allItems)
: setFilteredItems(filtered.length ? filtered : allItems);
setFilteredItems(filtered.length ? filtered : allItems);
};

return (
<PrimitiveCombobox
onInputValueChange={handleChange}
items={controlledItems ? controlledItems : filteredItems}
items={filteredItems}
size={size}
{...rest}
>
Expand Down Expand Up @@ -164,11 +158,7 @@ const Combobox = ({
{content ||
groups.map(
(group) =>
group.items.some((item) =>
controlledItems
? controlledItems.includes(item)
: filteredItems.includes(item),
) && (
group.items.some((item) => filteredItems.includes(item)) && (
<PrimitiveComboboxItemGroup
key={group.label.id}
id={group.label.id}
Expand All @@ -185,9 +175,7 @@ const Combobox = ({

{group.items.map(
(item) =>
(controlledItems
? controlledItems.includes(item)
: filteredItems.includes(item)) && (
filteredItems.includes(item) && (
<PrimitiveComboboxItem
key={item.value}
item={item}
Expand Down
Loading