braid-design-system
Version:
Themeable design system for the SEEK Group
74 lines (73 loc) • 2.69 kB
JavaScript
"use strict";
const jsxRuntime = require("react/jsx-runtime");
const react = require("react");
const lib_components_Box_Box_cjs = require("../Box/Box.cjs");
const lib_components_Text_Text_cjs = require("../Text/Text.cjs");
const lib_components_private_Field_Field_cjs = require("../private/Field/Field.cjs");
const lib_components_Dropdown_Dropdown_css_cjs = require("./Dropdown.css.cjs");
const lib_components_icons_IconChevron_IconChevron_cjs = require("../icons/IconChevron/IconChevron.cjs");
const Dropdown = react.forwardRef(
(props, ref) => {
const {
children,
value,
onChange,
onBlur,
onFocus,
placeholder,
disabled,
...restProps
} = props;
return /* @__PURE__ */ jsxRuntime.jsx(
lib_components_private_Field_Field_cjs.Field,
{
...restProps,
componentName: "Dropdown",
disabled,
prefix: void 0,
secondaryMessage: null,
value,
children: (overlays, { className, paddingRight, ...fieldProps }, icon) => /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
icon,
/* @__PURE__ */ jsxRuntime.jsx(
lib_components_Box_Box_cjs.Box,
{
component: "select",
value,
defaultValue: typeof value === "undefined" ? "" : void 0,
onChange,
onBlur,
onFocus,
placeholder,
className: [lib_components_Dropdown_Dropdown_css_cjs.field, className],
...fieldProps,
ref,
children: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
!value || placeholder ? /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", disabled: true, children: disabled ? "" : placeholder }) : null,
children
] })
}
),
overlays,
/* @__PURE__ */ jsxRuntime.jsx(
lib_components_Box_Box_cjs.Box,
{
position: "absolute",
display: "flex",
alignItems: "center",
justifyContent: "center",
pointerEvents: "none",
height: "touchable",
width: "touchable",
top: 0,
right: 0,
children: /* @__PURE__ */ jsxRuntime.jsx(lib_components_Text_Text_cjs.Text, { baseline: false, children: /* @__PURE__ */ jsxRuntime.jsx(lib_components_icons_IconChevron_IconChevron_cjs.IconChevron, { tone: disabled ? "secondary" : void 0 }) })
}
)
] })
}
);
}
);
Dropdown.displayName = "Dropdown";
exports.Dropdown = Dropdown;