@crossed/ui/lib/module/forms/Select/index.js

A universal & performant styling library for React Native, Next.js & React

import { jsx, jsxs } from "react/jsx-runtime";
import { memo } from "react";
import { Sheet } from "../../overlay/Sheet";
import { YBox } from "../../layout/YBox";
import { Text } from "../../typography/Text";
import { FormField } from "../../forms/Form";
import { SelectLabel } from "./Label";
import { SelectConfigProvider, SelectValueProvider } from "./context";
import { useUncontrolled } from "@crossed/core";
import { SelectTrigger } from "./Trigger";
import { SelectContent } from "./Content";
import { useFloating } from "./useFloating";
import { Floating } from "../../overlay/Floating";
import { isWeb } from "@crossed/styled";
import { useMedia } from "../../useMedia";
const Select = memo((e) => {
  const {
    label,
    description,
    extra,
    error,
    multiple,
    clearable,
    searchable,
    value: valueProps,
    onChange,
    defaultValue,
    items,
    disabled,
    id,
    onSearch,
    loading,
    renderValue,
    children,
    section
  } = e;
  const { md } = useMedia();
  const [value, setValue] = useUncontrolled({
    value: valueProps,
    onChange,
    defaultValue
  });
  const { refs, floatingStyles } = useFloating();
  return /* @__PURE__ */ jsx(
    SelectConfigProvider,
    {
      multiple,
      clearable,
      searchable,
      disabled,
      section,
      showSheet: !isWeb || !md,
      children: /* @__PURE__ */ jsx(
        SelectValueProvider,
        {
          value,
          setValue,
          renderValue,
          items,
          children: /* @__PURE__ */ jsx(Floating, { removeScroll: false, children: /* @__PURE__ */ jsx(Sheet, { children: /* @__PURE__ */ jsxs(FormField, { disabled, children: [
            /* @__PURE__ */ jsxs(YBox, { space: "xxs", children: [
              /* @__PURE__ */ jsx(
                SelectLabel,
                {
                  label,
                  description,
                  extra
                }
              ),
              /* @__PURE__ */ jsx(
                SelectTrigger,
                {
                  ref: refs.setReference,
                  id,
                  disabled,
                  children
                }
              ),
              !!error && /* @__PURE__ */ jsx(Text, { color: "error", children: error.toString() })
            ] }),
            /* @__PURE__ */ jsx(
              SelectContent,
              {
                ref: refs.setFloating,
                floatingStyles,
                onSearch,
                loading
              }
            )
          ] }) }) })
        }
      )
    }
  );
});
export {
  Select
};
//# sourceMappingURL=index.js.map