@progress/kendo-react-common/unstyled/dropdowns.mjs

React Common package delivers common utilities that can be used with the KendoReact UI components. KendoReact Common Utilities 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 { getClassByName as s } from "./interfaces/common.mjs";
import { base as e, containers as i, states as u, elements as o, dimensions as y, inputPrefix as p, inputs as T, icon as H, components as b, cssUtils as D, dropDownListPrefix as P, pickerPrefix as g, sizeMap as f, fillModeMap as z, roundedMap as L, comboBoxPrefix as A } from "./json-classes.mjs";
const d = {
  clearButton: `${e.prefix}-${e.clear}-${e.value}`,
  groupStickyHeader: `${e.prefix}-${i.list}-${i.group}-${u.sticky}-${o.header}`,
  listHeaderText: `${e.prefix}-${i.list}-${o.header}-${o.text}`,
  ul: `${e.prefix}-${i.list}-${o.ul}`,
  li: {
    main: `${e.prefix}-${i.list}-${i.item}`,
    selected: `${e.prefix}-${u.selected}`,
    focused: `${e.prefix}-${u.focus}`,
    first: `${e.prefix}-${u.first}`,
    disabled: `${e.prefix}-${u.disabled}`
  },
  groupLi: {
    list: `${e.prefix}-${i.list}-${i.group}-${i.item}`,
    table: `${e.prefix}-${o.table}-${i.group}-${i.row}`
  },
  itemText: `${e.prefix}-${i.list}-${i.item}-${o.text}`,
  groupItemText: {
    list: `${e.prefix}-${i.list}-${i.item}-${o.text}`,
    table: `${e.prefix}-${o.table}-${o.th}`
  },
  itemGroupLabel: `${e.prefix}-${i.list}-${i.item}-${i.group}-${o.label}`,
  noData: `${e.prefix}-${e.nodata}`,
  heightContainer: `${e.prefix}-${y.height}-${i.container}`,
  optionLabel: {
    main: `${e.prefix}-${i.list}-${i.optionLabel}`,
    selected: `${e.prefix}-${u.selected}`
  },
  inputInner: `${p}-${T.inner}`,
  inputIcon: `${e.prefix}-${T.input}-${H.prefix}`,
  searchbox: `${e.prefix}-${b.searchbox}`,
  listFilter: `${e.prefix}-${i.list}-${e.filter}`
}, j = {
  clearButton: s(d, "clearButton"),
  groupStickyHeader: s(d, "groupStickyHeader"),
  listHeaderText: s(d, "listHeaderText"),
  ul: s(d, "ul"),
  li: (n) => {
    const { c: $ = d, selected: t, focused: l, first: c, disabled: x } = n, m = $.li;
    return {
      [m.main]: !0,
      [m.selected]: t,
      [m.focused]: l,
      [m.first]: c,
      [m.disabled]: x
    };
  },
  groupLi: (n) => {
    const { c: $ = d, isMultiColumn: t } = n, l = $.groupLi;
    return {
      [l.table]: t,
      [l.list]: !t
    };
  },
  itemText: s(d, "itemText"),
  groupItemText: (n) => {
    const { c: $ = d, isMultiColumn: t } = n, l = $.groupItemText;
    return {
      [l.table]: t,
      [l.list]: !t
    };
  },
  itemGroupLabel: s(d, "itemGroupLabel"),
  noData: s(d, "noData"),
  heightContainer: s(d, "heightContainer"),
  optionLabel: (n) => {
    const { c: $ = d, selected: t } = n, l = $.optionLabel;
    return {
      [l.main]: !0,
      [l.selected]: t
    };
  },
  inputInner: s(d, "inputInner"),
  inputIcon: s(d, "inputIcon"),
  searchbox: s(d, "searchbox"),
  listFilter: s(d, "listFilter")
}, v = {
  wrapper: {
    main: `${e.prefix}-${u.adaptive}-${b.actionsheet}`,
    fullscreen: `${e.prefix}-${b.actionsheet}-${u.fullscreen}`,
    bottom: `${e.prefix}-${b.actionsheet}-${u.bottom}`
  },
  header: `${e.prefix}-${o.text}-${D.center}`,
  titleBar: {
    main: `${e.prefix}-${b.actionsheet}-${i.titlebar}-${i.group}`,
    position: `${e.prefix}-${D.hbox}`
  },
  title: `${e.prefix}-${b.actionsheet}-${o.title}`,
  subtitle: {
    main: `${e.prefix}-${b.actionsheet}-${o.subtitle}`,
    textCenter: `${e.prefix}-${o.text}-${D.center}`
  },
  actions: `${e.prefix}-${b.actionsheet}-${i.actions}`,
  titleBarGroup: {
    main: `${e.prefix}-${b.actionsheet}-${i.titlebar}-${i.group}`,
    filter: `${e.prefix}-${b.actionsheet}-${e.filter}`
  }
}, E = {
  wrapper: (n) => {
    const { c: $ = v, isFullScreen: t } = n, l = $.wrapper;
    return {
      [l.main]: !0,
      [l.fullscreen]: t,
      [l.bottom]: !t
    };
  },
  header: s(v, "header"),
  titleBar: (n) => {
    const { c: $ = v } = n, t = $.titleBar;
    return {
      [t.main]: !0,
      [t.position]: !0
    };
  },
  title: s(v, "title"),
  subtitle: (n) => {
    const { c: $ = v } = n, t = $.subtitle;
    return {
      [t.main]: !0,
      [t.textCenter]: !0
    };
  },
  actions: s(v, "actions"),
  titleBarGroup: (n) => {
    const { c: $ = v } = n, t = $.titleBarGroup;
    return {
      [t.main]: !0,
      [t.filter]: !0
    };
  }
}, h = {
  wrapper: {
    main: P,
    picker: g,
    size: {
      small: `${g}-${f.small}`,
      medium: `${g}-${f.medium}`,
      large: `${g}-${f.large}`
    },
    fillMode: {
      solid: `${g}-${z.solid}`,
      outline: `${g}-${z.outline}`,
      flat: `${g}-${z.flat}`,
      link: `${g}-${z.link}`,
      clear: `${g}-${z.clear}`
    },
    rounded: {
      small: `${e.prefix}-${e.rounded}-${L.small}`,
      medium: `${e.prefix}-${e.rounded}-${L.medium}`,
      large: `${e.prefix}-${e.rounded}-${L.large}`
    },
    disabled: `${e.prefix}-${u.disabled}`,
    focused: `${e.prefix}-${u.focus}`,
    invalid: `${e.prefix}-${u.invalid}`,
    loading: `${e.prefix}-${u.loading}`,
    required: `${e.prefix}-${u.required}`
  },
  loadingIcon: `${p}-${u.loading}-${H.prefix}`,
  inputButton: `${p}-${o.button}`,
  listContainer: {
    main: `${e.prefix}-${i.list}-${i.container}`,
    popup: `${e.prefix}-${b.dropdownlist}-${i.popup}`
  },
  inputInner: `${p}-${T.inner}`,
  inputText: `${p}-${e.value}-${o.text}`,
  listHeader: `${e.prefix}-${i.list}-${o.header}`,
  list: {
    main: `${e.prefix}-${i.list}`,
    size: {
      small: `${e.prefix}-${i.list}-${f.small}`,
      medium: `${e.prefix}-${i.list}-${f.medium}`,
      large: `${e.prefix}-${i.list}-${f.large}`
    },
    virtual: `${e.prefix}-${e.virtual}-${i.list}`
  },
  listContent: `${e.prefix}-${i.list}-${i.content}`,
  listFooter: `${e.prefix}-${i.list}-${o.footer}`
}, J = {
  wrapper: (n) => {
    const {
      c: $ = h,
      size: t,
      rounded: l,
      fillMode: c,
      focused: x,
      disabled: m,
      invalid: C,
      loading: I,
      required: r
    } = n, a = $.wrapper;
    return {
      [a.main]: !0,
      [a.picker]: !0,
      [a.size[t]]: a.size[t],
      [`${g}-${t}`]: t && !a.size[t],
      [a.fillMode[c]]: a.fillMode[c],
      [a.rounded[l]]: a.rounded[l],
      [`${e.prefix}-${e.rounded}-${l}`]: l && !a.rounded[l],
      [a.focused]: x,
      [a.disabled]: m,
      [a.loading]: I,
      [a.invalid]: C,
      [a.required]: r
    };
  },
  loadingIcon: s(h, "loadingIcon"),
  inputButton: s(h, "inputButton"),
  listContainer: (n) => {
    const { c: $ = h, popup: t } = n, l = $.listContainer;
    return {
      [l.main]: !0,
      [l.popup]: t
    };
  },
  inputInner: s(h, "inputInner"),
  inputText: s(h, "inputText"),
  listHeader: s(h, "listHeader"),
  list: (n) => {
    const { c: $ = h, size: t, virtual: l } = n, c = $.list;
    return {
      [c.main]: !0,
      [c.size[t]]: c.size[t],
      [`${e.prefix}-${i.list}-${t}`]: t && !c.size[t],
      [c.virtual]: l
    };
  },
  listContent: s(h, "listContent"),
  listFooter: s(h, "listFooter")
}, B = {
  wrapper: {
    main: A,
    input: p,
    size: {
      small: `${p}-${f.small}`,
      medium: `${p}-${f.medium}`,
      large: `${p}-${f.large}`
    },
    fillMode: {
      solid: `${p}-${z.solid}`,
      outline: `${p}-${z.outline}`,
      flat: `${p}-${z.flat}`,
      link: `${p}-${z.link}`,
      clear: `${p}-${z.clear}`
    },
    rounded: {
      small: `${e.prefix}-${e.rounded}-${L.small}`,
      medium: `${e.prefix}-${e.rounded}-${L.medium}`,
      large: `${e.prefix}-${e.rounded}-${L.large}`
    },
    disabled: `${e.prefix}-${u.disabled}`,
    invalid: `${e.prefix}-${u.invalid}`,
    loading: `${e.prefix}-${u.loading}`,
    required: `${e.prefix}-${u.required}`
  },
  loadingIcon: `${p}-${u.loading}-${H.prefix}`,
  inputButton: `${p}-${o.button}`,
  listContainer: {
    main: `${e.prefix}-${i.list}-${i.container}`,
    popup: `${e.prefix}-${b.combobox}-${i.popup}`
  },
  listHeader: `${e.prefix}-${o.table}-${o.header}`,
  list: {
    list: `${e.prefix}-${i.list}`,
    table: `${e.prefix}-${e.data}-${o.table}`,
    size: {
      prefix: `${e.prefix}-${i.list}-`,
      small: `${e.prefix}-${i.list}-${f.small}`,
      medium: `${e.prefix}-${i.list}-${f.medium}`,
      large: `${e.prefix}-${i.list}-${f.large}`
    },
    tableSize: {
      prefix: `${e.prefix}-${o.table}-`,
      small: `${e.prefix}-${o.table}-${f.small}`,
      medium: `${e.prefix}-${o.table}-${f.medium}`,
      large: `${e.prefix}-${o.table}-${f.large}`
    },
    virtual: `${e.prefix}-${e.virtual}-${i.list}`
  },
  listContent: {
    main: `${e.prefix}-${i.list}-${i.content}`,
    scroller: `${e.prefix}-${i.list}-${e.scroller}`
  },
  listFooter: `${e.prefix}-${i.list}-${o.footer}`
}, K = {
  wrapper: (n) => {
    var a, M;
    const { c: $ = B, size: t, rounded: l, fillMode: c, disabled: x, invalid: m, loading: C, required: I } = n, r = $.wrapper;
    return {
      [r == null ? void 0 : r.main]: !0,
      [r == null ? void 0 : r.input]: !0,
      [r == null ? void 0 : r.size[t]]: r == null ? void 0 : r.size[t],
      [`${g}-${t}`]: t && !(r != null && r.size[t]),
      [r == null ? void 0 : r.fillMode[c]]: r == null ? void 0 : r.fillMode[c],
      [r == null ? void 0 : r.rounded[l]]: r == null ? void 0 : r.rounded[l],
      [`${(a = e) == null ? void 0 : a.prefix}-${(M = e) == null ? void 0 : M.rounded}-${l}`]: l && !(r != null && r.rounded[l]),
      [r == null ? void 0 : r.disabled]: x,
      [r == null ? void 0 : r.loading]: C,
      [r == null ? void 0 : r.invalid]: m,
      [r == null ? void 0 : r.required]: I
    };
  },
  loadingIcon: s(B, "loadingIcon"),
  inputButton: s(B, "inputButton"),
  listContainer: (n) => {
    const { c: $ = B, popup: t } = n, l = $.listContainer;
    return {
      [l == null ? void 0 : l.main]: !0,
      [l == null ? void 0 : l.popup]: t
    };
  },
  listHeader: s(B, "listHeader"),
  list: (n) => {
    var m, C, I, r, a, M, S, k, F, q, G;
    const { c: $ = B, size: t, tableSize: l, virtual: c, list: x } = n;
    return {
      [(m = $.list) == null ? void 0 : m.list]: !x,
      [(C = $.list) == null ? void 0 : C.table]: x,
      [(I = $.list) == null ? void 0 : I.size[t]]: !x && ((r = $.list) == null ? void 0 : r.size[t]),
      [`${(a = $.list) == null ? void 0 : a.size.prefix}${t}`]: !x && t && !((M = $.list) != null && M.size[t]),
      [(S = $.list) == null ? void 0 : S.tableSize[l]]: x && ((k = $.list) == null ? void 0 : k.tableSize[l]),
      [`${(F = $.list) == null ? void 0 : F.tableSize.prefix}${l}`]: x && l && !((q = $.list) != null && q.tableSize[l]),
      [(G = $.list) == null ? void 0 : G.virtual]: c
    };
  },
  listContent: (n) => {
    const { c: $ = B, virtual: t } = n, l = $.listContent;
    return {
      [l == null ? void 0 : l.main]: !0,
      [l == null ? void 0 : l.scroller]: !t
    };
  },
  listFooter: s(B, "listFooter")
};
export {
  K as uComboBox,
  J as uDropDownList,
  E as uDropDownsActionSheet,
  j as uDropDownsBase
};