+
setIsCalendarButtonFocused(true)}
onBlur={() => setIsCalendarButtonFocused(false)}
@@ -239,58 +241,68 @@ const DateRangePicker = React.forwardRef((
) : null}
-
-
- mode="range"
- showOutsideDays={true}
- defaultMonth={defaultMonth}
- selected={{
- from: selectedStartDate,
- to: selectedEndDate,
- }}
- onSelect={
- ((v: DateRange) => {
- onValueChange?.({ from: v?.from, to: v?.to });
- setSelectedValue({ from: v?.from, to: v?.to });
- }) as any
- }
- locale={locale}
- disabled={disabledDays}
- enableYearNavigation={enableYearNavigation}
- classNames={{
- day_range_middle: tremorTwMerge(
- "!rounded-none aria-selected:!bg-tremor-background-subtle aria-selected:dark:!bg-dark-tremor-background-subtle aria-selected:!text-tremor-content aria-selected:dark:!bg-dark-tremor-background-subtle",
- ),
- day_range_start:
- "rounded-r-none rounded-l-tremor-small aria-selected:text-tremor-brand-inverted dark:aria-selected:text-dark-tremor-brand-inverted",
- day_range_end:
- "rounded-l-none rounded-r-tremor-small aria-selected:text-tremor-brand-inverted dark:aria-selected:text-dark-tremor-brand-inverted",
- }}
- weekStartsOn={weekStartsOn}
- {...props}
- />
-
+
+
+ mode="range"
+ showOutsideDays={true}
+ defaultMonth={defaultMonth}
+ selected={{
+ from: selectedStartDate,
+ to: selectedEndDate,
+ }}
+ onSelect={
+ ((v: DateRange) => {
+ onValueChange?.({ from: v?.from, to: v?.to });
+ setSelectedValue({ from: v?.from, to: v?.to });
+ }) as any
+ }
+ locale={locale}
+ disabled={disabledDays}
+ enableYearNavigation={enableYearNavigation}
+ classNames={{
+ day_range_middle: tremorTwMerge(
+ "!rounded-none aria-selected:!bg-tremor-background-subtle aria-selected:dark:!bg-dark-tremor-background-subtle aria-selected:!text-tremor-content aria-selected:dark:!bg-dark-tremor-background-subtle",
+ ),
+ day_range_start:
+ "rounded-r-none rounded-l-tremor-small aria-selected:text-tremor-brand-inverted dark:aria-selected:text-dark-tremor-brand-inverted",
+ day_range_end:
+ "rounded-l-none rounded-r-tremor-small aria-selected:text-tremor-brand-inverted dark:aria-selected:text-dark-tremor-brand-inverted",
+ }}
+ weekStartsOn={weekStartsOn}
+ {...props}
+ />
+
+
{enableSelect && (
((
>
{value ? valueToNameMapping.get(value) ?? selectPlaceholder : selectPlaceholder}
-
- {children ??
- defaultOptions.map((option) => (
-
- {option.text}
-
- ))}
-
+
+ {children ??
+ defaultOptions.map((option) => (
+
+ {option.text}
+
+ ))}
+
+
>
)}
diff --git a/src/components/input-elements/MultiSelect/MultiSelect.tsx b/src/components/input-elements/MultiSelect/MultiSelect.tsx
index 5bae2e36e..2af251664 100644
--- a/src/components/input-elements/MultiSelect/MultiSelect.tsx
+++ b/src/components/input-elements/MultiSelect/MultiSelect.tsx
@@ -8,7 +8,7 @@ import { useInternalState } from "hooks";
import { ArrowDownHeadIcon, SearchIcon, XCircleIcon } from "assets";
-import { Listbox } from "@headlessui/react";
+import { Listbox, Transition } from "@headlessui/react";
import XIcon from "assets/XIcon";
import { border, makeClassName, sizing, spacing } from "lib";
import { getFilteredOptions, getSelectButtonColors } from "../selectUtils";
@@ -228,76 +228,85 @@ const MultiSelect = React.forwardRef
((props, r
/>
) : null}
-
-
-
-
-
+
+
+
+ {
+ if (e.code === "Space" && (e.target as HTMLInputElement).value !== "") {
+ e.stopPropagation();
+ }
+ }}
+ onChange={(e) => setSearchQuery(e.target.value)}
+ value={searchQuery}
/>
-
- {
- if (e.code === "Space" && (e.target as HTMLInputElement).value !== "") {
- e.stopPropagation();
- }
- }}
- onChange={(e) => setSearchQuery(e.target.value)}
- value={searchQuery}
- />
-
-
- {filteredOptions}
-
-
+
+