alinea/dist/input/select/SelectField.browser.js

[](https://npmjs.org/package/alinea) [](https://packagephobia.com/result?p=alinea)

import {
  autoUpdate,
  flip,
  offset,
  size,
  useFloating
} from "../../chunks/chunk-BGVZL6W4.js";
import {
  Nt
} from "../../chunks/chunk-G3BMTMIQ.js";
import "../../chunks/chunk-Q2COWNH4.js";
import "../../chunks/chunk-VKS6HYMO.js";
import "../../chunks/chunk-CRWVV7PH.js";
import "../../chunks/chunk-B5OJDF23.js";
import "../../chunks/chunk-PB6GIAHT.js";
import "../../chunks/chunk-QMGXID4H.js";
import "../../chunks/chunk-KO7U3IBJ.js";
import "../../chunks/chunk-QEHUZJO2.js";
import "../../chunks/chunk-U5RRZUYZ.js";

// src/input/select/SelectField.browser.tsx
import { Field } from "alinea/core";
import { useField } from "alinea/dashboard/editor/UseField";
import { IconButton } from "alinea/dashboard/view/IconButton";
import { InputLabel } from "alinea/dashboard/view/InputLabel";
import { HStack, Icon, TextLabel, fromModule } from "alinea/ui";
import { IcRoundArrowDropDownCircle } from "alinea/ui/icons/IcRoundArrowDropDownCircle";
import { IcRoundCheck } from "alinea/ui/icons/IcRoundCheck";
import { IcRoundClose } from "alinea/ui/icons/IcRoundClose";
import { IcRoundUnfoldMore } from "alinea/ui/icons/IcRoundUnfoldMore";
import { select as createSelect } from "./SelectField.js";

// src/input/select/SelectInput.module.scss
var SelectInput_module_default = {
  "root": "alinea-SelectInput",
  "is-open": "alinea-SelectInput-is-open",
  "isOpen": "alinea-SelectInput-is-open",
  "root-input": "alinea-SelectInput-input",
  "rootInput": "alinea-SelectInput-input",
  "root-input-label": "alinea-SelectInput-input-label",
  "rootInputLabel": "alinea-SelectInput-input-label",
  "is-placeholder": "alinea-SelectInput-is-placeholder",
  "isPlaceholder": "alinea-SelectInput-is-placeholder",
  "root-input-icon": "alinea-SelectInput-input-icon",
  "rootInputIcon": "alinea-SelectInput-input-icon",
  "root-input-delete": "alinea-SelectInput-input-delete",
  "rootInputDelete": "alinea-SelectInput-input-delete",
  "root-dropdown": "alinea-SelectInput-dropdown",
  "rootDropdown": "alinea-SelectInput-dropdown",
  "root-dropdown-inner": "alinea-SelectInput-dropdown-inner",
  "rootDropdownInner": "alinea-SelectInput-dropdown-inner",
  "root-dropdown-option": "alinea-SelectInput-dropdown-option",
  "rootDropdownOption": "alinea-SelectInput-dropdown-option",
  "is-active": "alinea-SelectInput-is-active",
  "isActive": "alinea-SelectInput-is-active",
  "is-selected": "alinea-SelectInput-is-selected",
  "isSelected": "alinea-SelectInput-is-selected",
  "root-dropdown-option-icon": "alinea-SelectInput-dropdown-option-icon",
  "rootDropdownOptionIcon": "alinea-SelectInput-dropdown-option-icon"
};

// src/input/select/SelectField.browser.tsx
export * from "./SelectField.js";
import { jsx, jsxs } from "react/jsx-runtime";
var select = Field.provideView(SelectInput, createSelect);
var styles = fromModule(SelectInput_module_default);
function SelectInput({ field }) {
  const { value, mutator, label, options } = useField(field);
  const items = options.items;
  const { x, y, reference, floating, refs, strategy } = useFloating({
    whileElementsMounted: autoUpdate,
    strategy: "fixed",
    placement: "bottom-start",
    middleware: [
      offset(4),
      flip(),
      size({
        apply({ rects }) {
          if (refs.floating.current)
            Object.assign(refs.floating.current.style, {
              width: `${rects.reference.width}px`
            });
        }
      })
    ]
  });
  return /* @__PURE__ */ jsx(InputLabel, { ...options, icon: IcRoundArrowDropDownCircle, children: /* @__PURE__ */ jsx("div", { className: styles.root(), children: /* @__PURE__ */ jsx(Nt, { value, onChange: mutator, disabled: options.readOnly, children: ({ open }) => /* @__PURE__ */ jsxs("div", { children: [
    /* @__PURE__ */ jsxs(
      Nt.Button,
      {
        ref: reference,
        className: styles.root.input({ open }),
        children: [
          /* @__PURE__ */ jsx(
            "span",
            {
              className: styles.root.input.label({ placeholder: !value }),
              children: /* @__PURE__ */ jsx(
                TextLabel,
                {
                  label: (value ? items[value] : options.placeholder) || label
                }
              )
            }
          ),
          /* @__PURE__ */ jsx(
            Icon,
            {
              icon: IcRoundUnfoldMore,
              className: styles.root.input.icon()
            }
          ),
          value && options.optional && /* @__PURE__ */ jsx(
            IconButton,
            {
              icon: IcRoundClose,
              onClick: () => mutator(void 0),
              className: styles.root.input.delete()
            }
          )
        ]
      }
    ),
    /* @__PURE__ */ jsx(
      Nt.Options,
      {
        ref: floating,
        style: {
          position: strategy,
          top: `${y || 0}px`,
          left: `${x || 0}px`
        },
        className: styles.root.dropdown(),
        children: /* @__PURE__ */ jsx("div", { className: styles.root.dropdown.inner(), children: Object.entries(items).map(([key, label2]) => /* @__PURE__ */ jsx(Nt.Option, { value: key, children: ({ active, selected }) => /* @__PURE__ */ jsxs(
          HStack,
          {
            center: true,
            gap: 4,
            className: styles.root.dropdown.option({
              active,
              selected
            }),
            children: [
              /* @__PURE__ */ jsx(TextLabel, { label: label2 }),
              /* @__PURE__ */ jsx("div", { className: styles.root.dropdown.option.icon(), children: selected && /* @__PURE__ */ jsx(Icon, { size: 18, icon: IcRoundCheck }) })
            ]
          }
        ) }, key)) })
      }
    )
  ] }) }) }) });
}
export {
  select
};