"use strict";
const Toggle = require("./Toggle-CAW20E9V.cjs");
const aggregator = require("./aggregator-Ca8xiVD2.cjs");
const Keyboard = require("./Keyboard-CsgjS96C.cjs");
const jsxRuntime = require("./jsx-runtime-B3vWrP5x.cjs");
const React = require("react");
const Center = require("./Center-5NJ61qfA.cjs");
const css = require("./css-Pf9qxhQ4.cjs");
const List = require("./List-J5T88ynF.cjs");
const DEFAULT_COLUMNS = [];
const Core = ({
  data,
  emptyContent,
  value,
  onChange,
  allowMultiple,
  allowNone,
  hideColumnHeader = false,
  children,
  columns = DEFAULT_COLUMNS,
  visible,
  replaceOnSingle,
  omit,
  ...props
}) => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(List.List, { data, emptyContent, omit, children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
  Toggle.Selector,
  {
    value,
    onChange,
    allowMultiple,
    allowNone,
    replaceOnSingle,
    children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(Toggle.Dialog, { visible, className: css.CSS.B("select"), ...props, children: [
      children,
      /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Toggle.Hover, { disabled: !visible, children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Toggle.Column.Header, { hide: hideColumnHeader, columns, children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Toggle.Core.Virtual, { itemHeight: Toggle.Column.itemHeight, children: Toggle.componentRenderProp(Toggle.Column.Item) }) }) })
    ] })
  }
) });
const Button = ({
  children = defaultSelectButtonOption,
  value,
  onChange,
  entryRenderKey = "key",
  allowNone = false,
  allowMultiple = false,
  data,
  replaceOnSingle,
  ...props
}) => {
  const { onSelect } = Toggle.useSelect({
    allowMultiple,
    allowNone,
    replaceOnSingle,
    data,
    value,
    onChange
  });
  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Center.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__ */ jsxRuntime.jsxRuntimeExports.jsx(Toggle.Button, { onClick, variant: selected ? "filled" : "outlined", children: title });
const BaseButton = ({
  selected,
  renderKey,
  toggle,
  visible,
  children,
  ...props
}) => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
  Toggle.Button,
  {
    className: css.CSS.B("select-button"),
    onClick: toggle,
    variant: "outlined",
    endIcon: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Toggle.m0.Caret.Left, { className: css.CSS.BE("select-button", "indicator") }),
    ...props,
    children: children ?? (selected == null ? void 0 : selected[renderKey])
  }
);
const defaultButton = Toggle.componentRenderProp(BaseButton);
const DropdownButton = ({
  data,
  value,
  columns = [],
  children = defaultButton,
  entryRenderKey = "key",
  allowNone = false,
  onChange,
  disabled,
  hideColumnHeader = true,
  ...props
}) => {
  const { close, visible, toggle } = Toggle.use$1();
  const [selected, setSelected] = React.useState(
    (data == null ? void 0 : data.find((e) => e.key === value)) ?? null
  );
  React.useEffect(() => {
    setSelected((data == null ? void 0 : data.find((e) => e.key === value)) ?? null);
  }, [data, value]);
  const handleChange = React.useCallback(
    (next, e) => {
      close();
      if (next == null) {
        setSelected(null);
        return onChange(value);
      }
      setSelected(e.entries[0]);
      onChange(next);
    },
    [onChange, value, close, setSelected]
  );
  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxRuntimeExports.jsx(
    Toggle.Button,
    {
      variant: selected ? "filled" : "outlined",
      onClick,
      children: entry.label
    },
    key
  );
};
const SelectLevel = ({
  children = defaultSelectDirectionButton,
  ...props
}) => {
  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Button, { ...props, data: DATA, children });
};
const external = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
  __proto__: null,
  ComponentSizeLevels: aggregator.ComponentSizeLevels,
  CoreDateTime: Toggle.CoreDateTime,
  DateTime: Toggle.DateTime,
  Editable: Toggle.Editable,
  Keyboard: Keyboard.Keyboard,
  LEVELS: aggregator.LEVELS,
  LevelComponentSizes: aggregator.LevelComponentSizes,
  Link: Toggle.Link,
  MaybeEditable: Toggle.MaybeEditable,
  SelectLevel,
  Symbols: Toggle.Symbols,
  Text: Toggle.Text,
  WithIcon: Toggle.WithIcon,
  dimensions: aggregator.dimensions,
  edit: Toggle.edit,
  evalColor: Toggle.evalColor,
  formatChildren: Toggle.formatChildren,
  levelZ: aggregator.levelZ,
  specZ: aggregator.specZ
}, Symbol.toStringTag, { value: "Module" }));
exports.BaseButton = BaseButton;
exports.Button = Button;
exports.Core = Core;
exports.DropdownButton = DropdownButton;
exports.SelectLevel = SelectLevel;
exports.defaultButton = defaultButton;
exports.external = external;
//# sourceMappingURL=external-BGl-cQCe.cjs.map
