@progress/kendo-react-buttons/Chip/ChipList.mjs

All you need in React Button in one package: disabled/enabled states, built-in styles and more. KendoReact Buttons package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import * as t from "react";
import e from "prop-types";
import { useDir as W, getter as O, useMouse as X, getTabIndex as Y, classNames as Z, kendoThemeMaps as _ } from "@progress/kendo-react-common";
import { selectionReducer as V } from "./selection-reducer.mjs";
import { focusReducer as ee } from "./focus-reducer.mjs";
import { dataReducer as te } from "./data-reducer.mjs";
import { Chip as D } from "./Chip.mjs";
import { ChipListSelectionContext as ae, ChipListFocusContext as ne, ChipListDataContext as se } from "./chip-list-contexts.mjs";
const ie = (a, i, s) => {
  i.selection === "multiple" ? Array.isArray(a) || (a = a ? [a] : null) : i.selection === "single" && Array.isArray(a) && (a = a ? a.join("") : null);
  const [l, o] = t.useState(a);
  return [l, (c) => {
    const d = V(i.state || l, { ...c, ...i });
    s && s(d, c.event), i.selection !== "none" && o(d);
  }];
}, le = (a) => {
  const [i, s] = t.useState(null);
  return [i, (o) => {
    const m = ee(o.payload, { ...o, ...a });
    s(m);
  }];
}, re = (a, i, s) => {
  const [l, o] = t.useState(a);
  return [l, (c) => {
    const d = te(i.state || l, { ...c, ...i });
    s && s(d, c.event), o(d);
  }];
}, E = t.forwardRef((a, i) => {
  const s = t.useRef(null), l = t.useRef(null), {
    id: o,
    style: m,
    tabIndex: c,
    className: d,
    ariaDescribedBy: M,
    ariaLabelledBy: T,
    ariaLabel: z,
    value: h,
    defaultData: P = r.defaultData,
    chip: g = r.chip,
    disabled: b = r.disabled,
    size: f = r.size,
    defaultValue: N = r.defaultValue,
    selection: x = r.selection,
    valueField: p = r.valueField,
    textField: S = r.textField,
    dir: w = r.dir,
    onChange: y,
    onDataChange: C
  } = a, F = W(l, w), A = t.useMemo(() => g || D, [g, D]);
  t.useImperativeHandle(s, () => ({
    element: l.current,
    props: a
  })), t.useImperativeHandle(i, () => s.current);
  const B = t.useCallback(
    (n, u) => {
      y && s.current && y.call(void 0, {
        value: n,
        target: s.current,
        syntheticEvent: u
      });
    },
    [y]
  ), [L, j] = ie(
    h || N,
    {
      selection: x,
      state: h
    },
    B
  ), G = t.useCallback(
    (n, u) => {
      C && s.current && C.call(void 0, {
        value: n,
        target: s.current,
        syntheticEvent: u
      });
    },
    [C]
  ), [I, H] = re(
    a.data || P,
    {
      state: a.data,
      valueField: p
    },
    G
  ), R = t.useCallback(
    (n, u) => (n.push(u[p]), n),
    [p]
  ), v = t.useMemo(() => a.data || I, [a.data, I]), K = t.useMemo(() => h || L, [h, L]), $ = t.useMemo(() => v.reduce(R, []), [v, R]), k = t.useCallback((n) => O(p)(n), [p]), q = t.useCallback((n) => O(S)(n), [S]), [J, Q] = le({ items: $ }), U = X(a, s);
  return /* @__PURE__ */ t.createElement(ae.Provider, { value: [K, j] }, /* @__PURE__ */ t.createElement(ne.Provider, { value: [J, Q] }, /* @__PURE__ */ t.createElement(se.Provider, { value: [v, H] }, /* @__PURE__ */ t.createElement(
    "div",
    {
      ref: l,
      ...U,
      role: b ? void 0 : "listbox",
      id: o,
      dir: F,
      style: m,
      tabIndex: Y(c, b, void 0),
      className: Z(
        "k-chip-list",
        {
          "k-rtl": F === "rtl",
          "k-disabled": b,
          [`k-chip-list-${_.sizeMap[f] || f}`]: f
        },
        d
      ),
      "aria-label": z,
      "aria-labelledby": T,
      "aria-describedby": M,
      "aria-orientation": "horizontal",
      "aria-multiselectable": x === "multiple"
    },
    v.map((n, u) => /* @__PURE__ */ t.createElement(
      A,
      {
        role: "option",
        dataItem: n,
        size: f,
        key: [k(n), u].join("-"),
        text: q(n),
        value: k(n),
        ariaLabel: n.ariaLabel,
        svgIcon: n.svgIcon || void 0
      }
    ))
  ))));
}), oe = {
  id: e.string,
  className: e.string,
  tabIndex: e.number,
  data: e.any,
  defaultData: e.arrayOf(e.any),
  onDataChange: e.func,
  value: e.oneOfType([e.any, e.arrayOf(e.any)]),
  defaultValue: e.oneOfType([e.any, e.arrayOf(e.any)]),
  onChange: e.func,
  selection: e.oneOf(["single", "none", "multiple"]),
  textField: e.string,
  valueField: e.string,
  disabled: e.bool,
  dir: e.oneOf(["ltr", "rtl"]),
  ariaLabelledBy: e.string,
  ariaDescribedBy: e.string,
  size: e.oneOf([null, "small", "medium", "large"])
}, r = {
  chip: D,
  size: "medium",
  disabled: !1,
  defaultValue: null,
  defaultData: [],
  dir: "ltr",
  selection: "none",
  textField: "text",
  valueField: "value",
  removable: "removable"
};
E.displayName = "KendoReactChipList";
E.propTypes = oe;
export {
  E as ChipList
};