import { A as Selector, n as Dialog, H as Hover, J as Column, z as Core$1, G as componentRenderProp, K as useSelect, B as Button$1, p as m0, j as use, L as CoreDateTime, N as DateTime, E as Editable, O as Link, M as MaybeEditable, Q as Symbols, e as Text, W as WithIcon, F as edit, R as evalColor, U as formatChildren } from "./Toggle-DcOiWiHG.js";
import { C as ComponentSizeLevels, L as LEVELS, j as LevelComponentSizes, k as dimensions, l as levelZ, s as specZ } from "./aggregator-Dl2jHye5.js";
import { K as Keyboard } from "./Keyboard-BqO4SYSr.js";
import { j as jsxRuntimeExports } from "./jsx-runtime-mMz73N64.js";
import { useState, useEffect, useCallback } from "react";
import { P as Pack } from "./Center-hbwH7rg9.js";
import { C as CSS } from "./css-DoalWJF6.js";
import { L as List } from "./List-aJEsDHql.js";
const DEFAULT_COLUMNS = [];
const Core = ({
  data,
  emptyContent,
  value,
  onChange,
  allowMultiple,
  allowNone,
  hideColumnHeader = false,
  children,
  columns = DEFAULT_COLUMNS,
  visible,
  replaceOnSingle,
  omit,
  ...props
}) => /* @__PURE__ */ jsxRuntimeExports.jsx(List, { data, emptyContent, omit, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
  Selector,
  {
    value,
    onChange,
    allowMultiple,
    allowNone,
    replaceOnSingle,
    children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Dialog, { visible, className: CSS.B("select"), ...props, children: [
      children,
      /* @__PURE__ */ jsxRuntimeExports.jsx(Hover, { disabled: !visible, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Column.Header, { hide: hideColumnHeader, columns, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Core$1.Virtual, { itemHeight: Column.itemHeight, children: componentRenderProp(Column.Item) }) }) })
    ] })
  }
) });
const Button = ({
  children = defaultSelectButtonOption,
  value,
  onChange,
  entryRenderKey = "key",
  allowNone = false,
  allowMultiple = false,
  data,
  replaceOnSingle,
  ...props
}) => {
  const { onSelect } = useSelect({
    allowMultiple,
    allowNone,
    replaceOnSingle,
    data,
    value,
    onChange
  });
  return /* @__PURE__ */ jsxRuntimeExports.jsx(Pack, { ...props, children: data.map((e) => {
    return children({
      key: e.key,
      onClick: () => onSelect(e.key),
      selected: e.key === value,
      entry: e,
      title: e[entryRenderKey]
    });
  }) });
};
const defaultSelectButtonOption = ({
  onClick,
  selected,
  title
}) => /* @__PURE__ */ jsxRuntimeExports.jsx(Button$1, { onClick, variant: selected ? "filled" : "outlined", children: title });
const BaseButton = ({
  selected,
  renderKey,
  toggle,
  visible,
  children,
  ...props
}) => /* @__PURE__ */ jsxRuntimeExports.jsx(
  Button$1,
  {
    className: CSS.B("select-button"),
    onClick: toggle,
    variant: "outlined",
    endIcon: /* @__PURE__ */ jsxRuntimeExports.jsx(m0.Caret.Left, { className: CSS.BE("select-button", "indicator") }),
    ...props,
    children: children ?? (selected == null ? void 0 : selected[renderKey])
  }
);
const defaultButton = componentRenderProp(BaseButton);
const DropdownButton = ({
  data,
  value,
  columns = [],
  children = defaultButton,
  entryRenderKey = "key",
  allowNone = false,
  onChange,
  disabled,
  hideColumnHeader = true,
  ...props
}) => {
  const { close, visible, toggle } = use();
  const [selected, setSelected] = useState(
    (data == null ? void 0 : data.find((e) => e.key === value)) ?? null
  );
  useEffect(() => {
    setSelected((data == null ? void 0 : data.find((e) => e.key === value)) ?? null);
  }, [data, value]);
  const handleChange = useCallback(
    (next, e) => {
      close();
      if (next == null) {
        setSelected(null);
        return onChange(value);
      }
      setSelected(e.entries[0]);
      onChange(next);
    },
    [onChange, value, close, setSelected]
  );
  return /* @__PURE__ */ jsxRuntimeExports.jsx(
    Core,
    {
      ...props,
      close,
      data,
      visible,
      value: [value],
      onChange: handleChange,
      allowMultiple: false,
      allowNone,
      columns,
      hideColumnHeader,
      children: children({
        selected,
        renderKey: entryRenderKey,
        toggle,
        visible,
        disabled
      })
    }
  );
};
const DATA = [
  {
    key: "h2",
    label: "XL"
  },
  {
    key: "h3",
    label: "L"
  },
  {
    key: "h4",
    label: "M"
  },
  {
    key: "p",
    label: "S"
  },
  {
    key: "small",
    label: "XS"
  }
];
const defaultSelectDirectionButton = ({
  key,
  entry,
  onClick,
  selected
}) => {
  return /* @__PURE__ */ jsxRuntimeExports.jsx(
    Button$1,
    {
      variant: selected ? "filled" : "outlined",
      onClick,
      children: entry.label
    },
    key
  );
};
const SelectLevel = ({
  children = defaultSelectDirectionButton,
  ...props
}) => {
  return /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { ...props, data: DATA, children });
};
const external = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
  __proto__: null,
  ComponentSizeLevels,
  CoreDateTime,
  DateTime,
  Editable,
  Keyboard,
  LEVELS,
  LevelComponentSizes,
  Link,
  MaybeEditable,
  SelectLevel,
  Symbols,
  Text,
  WithIcon,
  dimensions,
  edit,
  evalColor,
  formatChildren,
  levelZ,
  specZ
}, Symbol.toStringTag, { value: "Module" }));
export {
  Button as B,
  Core as C,
  DropdownButton as D,
  SelectLevel as S,
  BaseButton as a,
  defaultButton as d,
  external as e
};
//# sourceMappingURL=external-wfv-EKsR.js.map
