public-offering
/
cal.pub0.org
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Adds multiselect checkbox fixes (#7835)

pull/7840/head^2
sean-brydon 2023-03-21 00:43:32 +08:00 committed by GitHub
parent d2352da54b
commit a145de56ee
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 14 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
packages/ui/components/form/checkbox/MultiSelectCheckboxes.tsx
View File

@ -29,12 +29,6 @@ const InputOption: React.FC<OptionProps<any, boolean, GroupBase<any>>> = ({
return (
<components.Option
className={classNames(
className,
"dark:bg-darkgray-100 !flex !cursor-pointer !py-3 text-[inherit]",
isFocused && "dark:!bg-darkgray-200 !bg-gray-100",
isSelected && "dark:!bg-darkgray-300 !bg-neutral-900"
)}
{...rest}
isDisabled={isDisabled}
isFocused={isFocused}
@ -81,6 +75,7 @@ export default function MultiSelectCheckboxes({
setSelected(s);
setValue(s);
}}
variant="checkbox"
options={options}
isMulti
className={classNames(className ? className : "w-64 text-sm")}

16
packages/ui/components/form/select/Select.tsx
View File

@ -13,7 +13,7 @@ export type SelectProps<
Option,
IsMulti extends boolean = false,
Group extends GroupBase<Option> = GroupBase<Option>
> = Props<Option, IsMulti, Group>;
> = Props<Option, IsMulti, Group> & { variant?: "default" | "checkbox" };
export const Select = <
Option,
@ -22,6 +22,7 @@ export const Select = <
>({
components,
menuPlacement,
variant = "default",
...props
}: SelectProps<Option, IsMulti, Group>) => {
const reactSelectProps = React.useMemo(() => {
@ -46,12 +47,21 @@ export const Select = <
props.classNames?.option
),
placeholder: (state) =>
classNames("text-gray-400 text-sm dark:text-darkgray-400", state.isFocused && "hidden"),
classNames(
"text-gray-400 text-sm dark:text-darkgray-400",
state.isFocused && variant !== "checkbox" && "hidden"
),
dropdownIndicator: () => "text-gray-600 dark:text-darkgray-400",
control: (state) =>
classNames(
"dark:bg-darkgray-100 dark:border-darkgray-300 !min-h-9 border-gray-300 bg-white text-sm leading-4 placeholder:text-sm placeholder:font-normal focus-within:ring-2 focus-within:ring-gray-800 hover:border-gray-400 dark:focus-within:ring-darkgray-900 rounded-md border ",
state.isMulti ? (state.hasValue ? "p-1" : "px-3 py-2") : "py-2 px-3",
state.isMulti
? variant === "checkbox"
? "px-3 py-2"
: state.hasValue
? "p-1"
: "px-3 py-2"
: "py-2 px-3",
props.classNames?.control
),
singleValue: () =>