@sikka/hawa
Version:
Modern UI Kit made with Tailwind
187 lines (184 loc) • 6.91 kB
JavaScript
"use client";
import {
HelperText,
Label,
Skeleton,
cn
} from "./chunk-5MN7WB7B.mjs";
// elements/select/Select.tsx
import React from "react";
import ReactSelect from "react-select";
import CreatableSelect from "react-select/creatable";
import clsx from "clsx";
var Select = ({
labelProps,
labelKey = "label",
...props
}) => {
const NoOption = () => {
var _a, _b;
return /* @__PURE__ */ React.createElement("div", null, (_b = (_a = props.texts) == null ? void 0 : _a.noOptions) != null ? _b : "No Items Found");
};
const Control = ({ children, innerProps, innerRef }) => {
return /* @__PURE__ */ React.createElement(
"div",
{
ref: innerRef,
className: clsx(
"hawa-flex hawa-w-full hawa-rounded hawa-border hawa-bg-background hawa-p-2 hawa-text-sm hawa-text-gray-900 focus:hawa-border-blue-500 focus:hawa-ring-blue-500 dark:focus:hawa-ring-blue-500"
),
...innerProps
},
children
);
};
const Option = ({ children, innerProps, innerRef }) => {
return /* @__PURE__ */ React.createElement(
"div",
{
ref: innerRef,
className: cn(
"hawa-flex hawa-cursor-pointer hawa-select-none hawa-flex-row hawa-items-center hawa-justify-between hawa-rounded-inner hawa-p-1 hawa-px-2 hawa-transition-all hover:hawa-bg-primary hover:hawa-text-primary-foreground"
),
...innerProps
},
children
);
};
const Menu = ({
cx,
children,
getStyles,
innerProps,
innerRef,
...menuProps
}) => {
const menuOpen = menuProps.selectProps.menuIsOpen;
return /* @__PURE__ */ React.createElement(
"div",
{
className: cn(
"dark:dark-shadow hawa-absolute hawa-z-10 -hawa-mx-1 hawa-mt-1 hawa-flex hawa-flex-col hawa-justify-start hawa-rounded hawa-border hawa-bg-background hawa-shadow-md",
props.phoneCode ? "hawa-p-1.5" : "hawa-w-full hawa-p-1.5",
menuOpen && "hawa-animate-in hawa-fade-in-0 hawa-zoom-in-95"
),
ref: innerRef,
...innerProps
},
children
);
};
let phoneCodeStyles = "hawa-min-w-[65px] hawa-text-right hawa-w-[100px] hawa-p-0 hawa-rounded-r-none hawa-h-[40px]";
let selectContainerStyles = "hawa-rounded hawa-block hawa-w-full hawa-border hawa-transition-all hawa-bg-background hawa-p-0 hawa-px-1 hawa-text-sm";
let selectPlaceholderStyles = "hawa-text-muted-foreground hawa-cursor-pointer hawa-px-1";
let selectIndicatorContainerStyles = "hawa-cursor-pointer hawa-text-muted-foreground hawa-absolute hawa-end-0 hawa-top-[50%] hawa-bottom-[50%] ";
return /* @__PURE__ */ React.createElement(
"div",
{
className: cn(
"hawa-flex hawa-flex-col hawa-gap-2",
props.width === "fit" ? "hawa-w-fit" : "hawa-w-full"
)
},
props.label && /* @__PURE__ */ React.createElement(Label, { ...labelProps }, props.label),
props.isLoading ? /* @__PURE__ */ React.createElement(Skeleton, { className: "hawa-h-[40px] hawa-w-full" }) : !props.isCreatable ? (
// TODO: enable keyboard to go to the next item in the list
/* @__PURE__ */ React.createElement(
ReactSelect,
{
noOptionsMessage: NoOption,
classNames: {
control: () => cn(
props.phoneCode && "hawa-rounded-r-none",
props.controlClassNames
),
container: () => cn(
selectContainerStyles,
props.phoneCode && phoneCodeStyles,
props.disabled ? "hawa-cursor-not-allowed" : "hawa-cursor-pointer",
props.isMulti && "hawa-ps-0 "
),
placeholder: () => selectPlaceholderStyles,
valueContainer: () => "hawa-text-foreground hawa-px-1 ",
singleValue: () => "hawa-text-foreground",
indicatorsContainer: () => cn(
selectIndicatorContainerStyles,
props.hideIndicator ? "hawa-invisible" : "hawa-px-1"
)
},
unstyled: true,
autoFocus: false,
components: props.hideIndicator ? { Option, Menu, IndicatorsContainer: () => null } : {
Option,
Menu,
// Control: (e) => (
// <div
// className={cn(e.className, "hawa-flex hawa-flex-row")}
// {...e}
// />
// ),
ValueContainer: (e) => /* @__PURE__ */ React.createElement(
"div",
{
className: cn(
e.className,
"hawa-gap-1 hawa-flex hawa-flex-row hawa-flex-wrap hawa-p-1"
),
...e
}
),
MultiValueContainer: (e) => /* @__PURE__ */ React.createElement(
"div",
{
className: "hawa-rounded hawa-border hawa-p-1 hawa-px-2 hawa-flex hawa-flex-row",
...e
}
)
},
onChange: (newValue, action) => props.onChange(newValue, action),
options: props.options,
getOptionLabel: props.getOptionLabel,
defaultValue: props.defaultValue,
placeholder: props.placeholder,
isDisabled: props.disabled,
isClearable: props.isClearable,
isMulti: props.isMulti,
isSearchable: props.isSearchable
}
)
) : /* @__PURE__ */ React.createElement(
CreatableSelect,
{
formatCreateLabel: (inputValue) => {
var _a, _b;
return `${(_b = (_a = props.texts) == null ? void 0 : _a.createLabel) != null ? _b : "Create"} "${inputValue}"`;
},
classNames: {
container: () => cn(
"hawa-rounded",
props.disabled ? "hawa-cursor-not-allowed" : "hawa-cursor-pointer"
),
placeholder: () => "hawa-px-2 hawa-text-muted-foreground",
input: () => "hawa-text-primary hawa-px-2",
valueContainer: () => "hawa-text-white dark:hawa-text-muted-foreground",
singleValue: () => "hawa-text-black dark:hawa-text-white hawa-px-2",
indicatorsContainer: () => " hawa-px-2 hawa-cursor-pointer hawa-text-muted-foreground"
},
unstyled: true,
options: props.options,
isClearable: props.isClearable,
isMulti: props.isMulti,
isSearchable: props.isSearchable,
placeholder: props.placeholder,
onCreateOption: props.handleCreateOption,
onChange: (newValue, action) => props.onChange(newValue, action),
components: { Control, Option, Menu },
onInputChange: (newValue, action) => props.onInputChange(newValue, action)
}
),
!props.hideHelperText && /* @__PURE__ */ React.createElement(HelperText, { helperText: props.helperText })
);
};
export {
Select
};