@yamada-ui/native-select
Version:
Yamada UI native select component
161 lines (160 loc) • 6.38 kB
JavaScript
"use client"
;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/native-select.tsx
var native_select_exports = {};
__export(native_select_exports, {
NativeOption: () => NativeOption,
NativeOptionGroup: () => NativeOptionGroup,
NativeSelect: () => NativeSelect
});
module.exports = __toCommonJS(native_select_exports);
var import_core = require("@yamada-ui/core");
var import_form_control = require("@yamada-ui/form-control");
var import_icon = require("@yamada-ui/icon");
var import_utils = require("@yamada-ui/utils");
var import_react = require("react");
var import_jsx_runtime = require("react/jsx-runtime");
var [NativeSelectProvider, useNativeSelect] = (0, import_utils.createContext)({
name: "NativeSelectContext",
errorMessage: `useNativeSelect returned is 'undefined'. Seems you forgot to wrap the components in "<NativeSelect />"`
});
var NativeSelect = (0, import_core.forwardRef)(
(props, ref) => {
const [styles, mergedProps] = (0, import_core.useComponentMultiStyle)("NativeSelect", props);
const {
className,
children,
color,
items = [],
placeholder,
placeholderInOptions = true,
containerProps,
iconProps,
...rest
} = (0, import_form_control.useFormControlProps)((0, import_core.omitThemeProps)(mergedProps));
const {
"aria-readonly": _ariaReadonly,
onBlur: _onBlur,
onFocus: _onFocus,
...formControlProps
} = (0, import_utils.pickObject)(rest, import_form_control.formControlProperties);
const [{ h, height, minH, minHeight, ...layoutProps }, selectProps] = (0, import_utils.splitObject)((0, import_utils.omitObject)(rest, ["aria-readonly"]), import_core.layoutStyleProperties);
let computedChildren = [];
if (!children && items.length) {
computedChildren = items.map((item, i) => {
if ("value" in item) {
const { label, value, ...props2 } = item;
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NativeOption, { value, ...props2, children: label }, i);
} else if ("items" in item) {
const { items: items2 = [], label, ...props2 } = item;
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NativeOptionGroup, { label, ...props2, children: items2.map(({ label: label2, value, ...props3 }, i2) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NativeOption, { value, ...props3, children: label2 }, i2)) }, i);
}
}).filter(Boolean);
}
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NativeSelectProvider, { value: styles, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
import_core.ui.div,
{
className: "ui-select",
__css: {
color,
h: "fit-content",
position: "relative",
w: "100%",
...styles.container
},
...layoutProps,
...containerProps,
...formControlProps,
children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
import_core.ui.select,
{
ref,
className: (0, import_utils.cx)("ui-select__field", className),
__css: {
h: h != null ? h : height,
minH: minH != null ? minH : minHeight,
pe: "2rem",
...styles.field
},
...selectProps,
children: [
placeholder ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NativeOption, { hidden: !placeholderInOptions, value: "", children: placeholder }) : null,
children != null ? children : computedChildren
]
}
),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(NativeSelectIcon, { ...iconProps, ...formControlProps })
]
}
) });
}
);
NativeSelect.displayName = "NativeSelect";
NativeSelect.__ui__ = "NativeSelect";
var NativeSelectIcon = ({
className,
children,
...rest
}) => {
const styles = useNativeSelect();
const css = {
alignItems: "center",
display: "inline-flex",
justifyContent: "center",
pointerEvents: "none",
position: "absolute",
top: "50%",
transform: "translateY(-50%)",
...styles.icon
};
const validChildren = (0, import_utils.getValidChildren)(children);
const cloneChildren = validChildren.map(
(child) => (0, import_react.cloneElement)(child, {
style: {
color: "currentColor",
height: "1em",
width: "1em"
},
"aria-hidden": true,
focusable: false
})
);
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.div, { className: (0, import_utils.cx)("ui-select__icon", className), __css: css, ...rest, children: (0, import_utils.isValidElement)(children) ? cloneChildren : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.ChevronIcon, {}) });
};
NativeSelectIcon.displayName = "NativeSelectIcon";
NativeSelectIcon.__ui__ = "NativeSelectIcon";
var NativeOptionGroup = (0, import_core.forwardRef)(
(props, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.optgroup, { ref, ...props })
);
NativeOptionGroup.displayName = "NativeOptionGroup";
NativeOptionGroup.__ui__ = "NativeOptionGroup";
var NativeOption = (0, import_core.forwardRef)(
(props, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.option, { ref, ...props })
);
NativeOption.displayName = "NativeOption";
NativeOption.__ui__ = "NativeOption";
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
NativeOption,
NativeOptionGroup,
NativeSelect
});
//# sourceMappingURL=native-select.js.map