alinea/dist/field/select/SelectField.view.js

Headless git-based CMS

import {
  autoUpdate,
  flip,
  offset,
  size,
  useFloating
} from "../../chunks/chunk-JL5K3F7X.js";
import {
  Mo
} from "../../chunks/chunk-I26ZIF6Q.js";
import "../../chunks/chunk-2STBQ2Y4.js";
import "../../chunks/chunk-WLKPH7JA.js";
import "../../chunks/chunk-HSIHEWFC.js";
import "../../chunks/chunk-ORDS5C6Z.js";
import "../../chunks/chunk-AICQFCVN.js";
import "../../chunks/chunk-SOTBYUJY.js";
import "../../chunks/chunk-2NTSADJL.js";
import "../../chunks/chunk-VUACWPFC.js";
import {
  dist_default
} from "../../chunks/chunk-A5O3N2GS.js";
import "../../chunks/chunk-NZLE2WMY.js";

// src/field/select/SelectField.view.tsx
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 } from "alinea/ui";
import { Ellipsis } from "alinea/ui/Ellipsis";
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";

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

// src/field/select/SelectField.view.tsx
import { jsx, jsxs } from "react/jsx-runtime";
var styles = dist_default(SelectField_module_default);
function SelectInput({
  field
}) {
  const { value = null, mutator, label, options, error } = useField(field);
  const { readOnly } = options;
  const items = options.options;
  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, error, icon: IcRoundArrowDropDownCircle, children: /* @__PURE__ */ jsx("div", { className: styles.root({ readOnly }), children: /* @__PURE__ */ jsx(Mo, { value, onChange: mutator, disabled: options.readOnly, children: ({ open }) => /* @__PURE__ */ jsxs("div", { children: [
    /* @__PURE__ */ jsxs("div", { className: styles.root.input({ open }), children: [
      /* @__PURE__ */ jsxs(
        Mo.Button,
        {
          ref: reference,
          className: styles.root.input.button(),
          children: [
            /* @__PURE__ */ jsx(
              "span",
              {
                className: styles.root.input.label({ placeholder: !value }),
                children: /* @__PURE__ */ jsx(
                  TextLabel,
                  {
                    label: (value ? items[value] : options.placeholder) || label,
                    title: value ? items[value] : void 0
                  }
                )
              }
            ),
            /* @__PURE__ */ jsx(
              Icon,
              {
                icon: IcRoundUnfoldMore,
                className: styles.root.input.icon(),
                title: open ? "Close options" : "Open options"
              }
            )
          ]
        }
      ),
      value && !options.required && /* @__PURE__ */ jsx(
        IconButton,
        {
          icon: IcRoundClose,
          onClick: () => mutator(null),
          className: styles.root.input.delete(),
          title: "Clear selection"
        }
      )
    ] }),
    /* @__PURE__ */ jsx(
      Mo.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(Mo.Option, { value: key, children: ({ active, selected }) => /* @__PURE__ */ jsxs(
          HStack,
          {
            center: true,
            gap: 4,
            className: styles.root.dropdown.option({
              active,
              selected
            }),
            children: [
              /* @__PURE__ */ jsx(Ellipsis, { children: /* @__PURE__ */ jsx(TextLabel, { label: label2, title: label2 }) }),
              /* @__PURE__ */ jsx("div", { className: styles.root.dropdown.option.icon(), children: selected && /* @__PURE__ */ jsx(Icon, { size: 18, icon: IcRoundCheck }) })
            ]
          }
        ) }, key)) })
      }
    )
  ] }) }) }) });
}
export {
  SelectInput
};