@yamada-ui/native-select/dist/chunk-XFZK6HRV.mjs

Yamada UI native select component

"use client"

// src/native-select.tsx
import {
  forwardRef,
  layoutStyleProperties,
  omitThemeProps,
  ui,
  useComponentMultiStyle
} from "@yamada-ui/core";
import {
  formControlProperties,
  useFormControlProps
} from "@yamada-ui/form-control";
import { ChevronIcon } from "@yamada-ui/icon";
import {
  createContext,
  cx,
  getValidChildren,
  isValidElement,
  omitObject,
  pickObject,
  splitObject
} from "@yamada-ui/utils";
import { cloneElement } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
var [NativeSelectProvider, useNativeSelect] = createContext({
  name: "NativeSelectContext",
  errorMessage: `useNativeSelect returned is 'undefined'. Seems you forgot to wrap the components in "<NativeSelect />"`
});
var NativeSelect = forwardRef(
  (props, ref) => {
    const [styles, mergedProps] = useComponentMultiStyle("NativeSelect", props);
    const {
      className,
      children,
      color,
      items = [],
      placeholder,
      placeholderInOptions = true,
      containerProps,
      iconProps,
      ...rest
    } = useFormControlProps(omitThemeProps(mergedProps));
    const {
      "aria-readonly": _ariaReadonly,
      onBlur: _onBlur,
      onFocus: _onFocus,
      ...formControlProps
    } = pickObject(rest, formControlProperties);
    const [{ h, height, minH, minHeight, ...layoutProps }, selectProps] = splitObject(omitObject(rest, ["aria-readonly"]), layoutStyleProperties);
    let computedChildren = [];
    if (!children && items.length) {
      computedChildren = items.map((item, i) => {
        if ("value" in item) {
          const { label, value, ...props2 } = item;
          return /* @__PURE__ */ jsx(NativeOption, { value, ...props2, children: label }, i);
        } else if ("items" in item) {
          const { items: items2 = [], label, ...props2 } = item;
          return /* @__PURE__ */ jsx(NativeOptionGroup, { label, ...props2, children: items2.map(({ label: label2, value, ...props3 }, i2) => /* @__PURE__ */ jsx(NativeOption, { value, ...props3, children: label2 }, i2)) }, i);
        }
      }).filter(Boolean);
    }
    return /* @__PURE__ */ jsx(NativeSelectProvider, { value: styles, children: /* @__PURE__ */ jsxs(
      ui.div,
      {
        className: "ui-select",
        __css: {
          color,
          h: "fit-content",
          position: "relative",
          w: "100%",
          ...styles.container
        },
        ...layoutProps,
        ...containerProps,
        ...formControlProps,
        children: [
          /* @__PURE__ */ jsxs(
            ui.select,
            {
              ref,
              className: cx("ui-select__field", className),
              __css: {
                h: h != null ? h : height,
                minH: minH != null ? minH : minHeight,
                pe: "2rem",
                ...styles.field
              },
              ...selectProps,
              children: [
                placeholder ? /* @__PURE__ */ jsx(NativeOption, { hidden: !placeholderInOptions, value: "", children: placeholder }) : null,
                children != null ? children : computedChildren
              ]
            }
          ),
          /* @__PURE__ */ 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 = getValidChildren(children);
  const cloneChildren = validChildren.map(
    (child) => cloneElement(child, {
      style: {
        color: "currentColor",
        height: "1em",
        width: "1em"
      },
      "aria-hidden": true,
      focusable: false
    })
  );
  return /* @__PURE__ */ jsx(ui.div, { className: cx("ui-select__icon", className), __css: css, ...rest, children: isValidElement(children) ? cloneChildren : /* @__PURE__ */ jsx(ChevronIcon, {}) });
};
NativeSelectIcon.displayName = "NativeSelectIcon";
NativeSelectIcon.__ui__ = "NativeSelectIcon";
var NativeOptionGroup = forwardRef(
  (props, ref) => /* @__PURE__ */ jsx(ui.optgroup, { ref, ...props })
);
NativeOptionGroup.displayName = "NativeOptionGroup";
NativeOptionGroup.__ui__ = "NativeOptionGroup";
var NativeOption = forwardRef(
  (props, ref) => /* @__PURE__ */ jsx(ui.option, { ref, ...props })
);
NativeOption.displayName = "NativeOption";
NativeOption.__ui__ = "NativeOption";

export {
  NativeSelect,
  NativeOptionGroup,
  NativeOption
};
//# sourceMappingURL=chunk-XFZK6HRV.mjs.map