diff --git a/apps/designer/app/designer/features/props-panel/props-panel.tsx b/apps/designer/app/designer/features/props-panel/props-panel.tsx
index babbe57d51..1a6b12f489 100644
--- a/apps/designer/app/designer/features/props-panel/props-panel.tsx
+++ b/apps/designer/app/designer/features/props-panel/props-panel.tsx
@@ -51,6 +51,7 @@ const Property = ({
const defaultValue = argType?.control.defaultValue;
const options = argType?.options;
const allProps = Object.keys(meta.argTypes);
+
return (
)}
+ contentProps={{
+ align: "start",
+ sideOffset: 5,
+ }}
/>
{isInvalidProp ? (
@@ -82,22 +87,23 @@ const Property = ({
) : (
onChange(id, "value", value)}
/>
)}
-
+ {required === false && (
+
+ )}
);
};
diff --git a/apps/designer/app/shared/design-system/components/combobox.tsx b/apps/designer/app/shared/design-system/components/combobox.tsx
index 733b6551d5..756a85ab29 100644
--- a/apps/designer/app/shared/design-system/components/combobox.tsx
+++ b/apps/designer/app/shared/design-system/components/combobox.tsx
@@ -9,15 +9,17 @@ import { Popper, PopperContent, PopperAnchor } from "@radix-ui/react-popper";
import { useCombobox } from "downshift";
import { matchSorter } from "match-sorter";
import { styled, type CSS } from "../stitches.config";
-import { IconButton } from "./icon-button";
+import { IconButton, iconButtonReset } from "./icon-button";
import { itemCss } from "./menu";
import { panelStyles } from "./panel";
-import { TextField } from "./text-field";
+import { TextField, textFieldReset } from "./text-field";
import { Box } from "./box";
import { Flex } from "./flex";
import { Grid } from "./grid";
-type BaseItem = { label: string; disabled?: boolean } | string;
+type Label = "string";
+
+type BaseItem = { label: Label; disabled?: boolean } | Label;
const Listbox = styled("ul", panelStyles, {
padding: 0,
@@ -42,12 +44,19 @@ export const ComboboxTextField = forwardRef<
ComboboxTextFieldProps
>(({ inputProps, toggleProps }, ref) => {
return (
-
+
-
+
-
+
);
});
@@ -60,14 +69,14 @@ type ComboboxProps- = {
itemToString?: (item: Item | null) => string;
disclosure?: (props: ComponentProps) => JSX.Element;
// @todo should we spread those props flat?
- popperProps?: ComponentProps;
- listCss?: CSS;
+ contentProps?: ComponentProps;
};
export const Combobox =
- ({
items,
value,
name,
+ contentProps,
itemToString = (item) =>
item !== null && "label" in item ? item.label : item ?? "",
onItemSelect,
@@ -90,9 +99,11 @@ export const Combobox =
- ({
} = useCombobox({
onInputValueChange({ inputValue }) {
if (inputValue) {
- const filteredItems = matchSorter(items, inputValue, {
- ...("label" in items[0] ? { keys: ["label"] } : {}),
- });
+ const options =
+ typeof items[0] === "object" && "label" in items[0]
+ ? { keys: ["label"] }
+ : undefined;
+ const filteredItems = matchSorter(items, inputValue, options);
setFilteredItems(filteredItems);
}
},
@@ -122,7 +133,7 @@ export const Combobox =
- ({
{disclosure({ inputProps, toggleProps })}
-
+
{isOpen &&
filteredItems.map((item, index) => {