@progress/kendo-react-common/unstyled/grid.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 { gridPrefix as o, sizeMap as u, base as t, grid as n, containers as m, elements as i, states as l, dimensions as b, cursor as x, gridRowReorder as h } from "./json-classes.mjs";
const $ = {
  wrapper: {
    main: o,
    size: {
      small: `${o}-${u.small}`,
      medium: `${o}-${u.medium}`
    },
    virtual: `${o}-${t.virtual}`
  },
  ariaRoot: `${o}-${n.ariaRoot}`,
  container: `${o}-${m.container}`,
  content: {
    main: `${o}-${m.content}`,
    virtual: `${t.prefix}-${t.virtual}-${m.content}`
  },
  tableWrap: `${o}-${n.tableWrap}`,
  table: {
    main: `${t.prefix}-${i.table}`,
    gridTable: `${o}-${i.table}`,
    size: {
      small: `${t.prefix}-${i.table}-${u.small}`,
      medium: `${t.prefix}-${i.table}-${u.medium}`
    }
  },
  tbody: `${t.prefix}-${i.table}-${i.tbody}`,
  thead: {
    main: `${o}-${i.table}-${i.thead}`,
    draggable: `${o}-${l.draggable}-${i.header}`
  },
  header: {
    main: `${o}-${i.header}`,
    draggable: `${o}-${l.draggable}-${i.header}`
  },
  headerWrap: `${o}-${i.header}-${m.wrap}`,
  headerTable: {
    main: `${t.prefix}-${i.table}`,
    header: `${o}-${i.header}-${i.table}`,
    size: {
      small: `${t.prefix}-${i.table}-${u.small}`,
      medium: `${t.prefix}-${i.table}-${u.medium}`
    }
  },
  headerTh: {
    main: `${t.prefix}-${i.table}-${i.th}`,
    header: `${t.prefix}-${i.header}`,
    first: `${t.prefix}-${l.first}`,
    filterable: `${t.prefix}-${l.filterable}`,
    locked: `${o}-${i.header}-${l.sticky}`,
    sorted: `${t.prefix}-${l.sorted}`
  },
  tableThead: `${t.prefix}-${i.table}-${i.thead}`,
  heightContainer: `${t.prefix}-${b.height}-${m.container}`,
  sortIcon: `${t.prefix}-${l.sort}-${i.icon}`,
  sortOrder: `${t.prefix}-${l.sort}-${l.order}`,
  tr: {
    main: `${t.prefix}-${i.table}-${n.row}`,
    header: `${t.prefix}-${i.table}-${n.group}-${n.row}`,
    grouping: `${t.prefix}-${l.grouping}-${n.row}`,
    footer: `${t.prefix}-${n.group}-${i.footer}`,
    master: `${t.prefix}-${n.master}-${n.row}`,
    rowAlt: `${t.prefix}-${i.table}-${l.alt}-${n.row}`,
    alt: `${t.prefix}-${l.alt}`,
    selected: `${t.prefix}-${l.selected}`,
    highlighted: `${t.prefix}-${l.highlighted}`,
    isInEdit: `${o}-${l.edit}-${n.row}`
  },
  detailTr: {
    main: `${t.prefix}-${i.table}-${n.row}`,
    row: `${t.prefix}-${n.detail}-${n.row}`,
    rowAlt: `${t.prefix}-${i.table}-${l.alt}-${n.row}`,
    alt: `${t.prefix}-${l.alt}`
  },
  simpleTr: `${t.prefix}-${i.table}-${n.row}`,
  headerCellInner: `${t.prefix}-${n.cellInner}`,
  columnTitle: `${t.prefix}-${n.column}-${i.title}`,
  headerCellLink: {
    main: `${t.prefix}-${i.link}`,
    notSortable: `${t.important}${t.prefix}-${x.default}`
  },
  noRecords: `${o}-${n.noRecords}`,
  noRecordsTemplate: `${o}-${n.noRecords}-${l.template}`,
  pager: `${o}-${n.pager}`,
  sorted: `${t.prefix}-${l.sorted}`,
  contentSticky: `${o}-${m.content}-${l.sticky}`,
  hierarchyCell: {
    main: `${t.prefix}-${n.hierarchy}-${n.cell}`,
    header: `${t.prefix}-${i.header}`
  },
  rowReorder: {
    dropIndicator: {
      main: `${t.prefix}-${h.drop}-${h.hint}`,
      direction: `${t.prefix}-${h.drop}-${h.hint}-${h.horizontal}`
    },
    dragClue: {
      main: `${t.prefix}-${h.drag}-${h.clue}`,
      operation: `${t.prefix}-${h.reorder}-${h.clue}`
    }
  },
  td: {
    main: `${t.prefix}-${i.table}-${i.td}`,
    selected: `${t.prefix}-${l.selected}`,
    highlighted: `${t.prefix}-${l.highlighted}`
  },
  detailTd: {
    main: `${t.prefix}-${i.table}-${i.td}`,
    cell: `${t.prefix}-${n.detail}-${n.cell}`
  },
  editTd: {
    main: `${t.prefix}-${i.table}-${i.td}`,
    cell: `${o}-${l.edit}-${n.cell}`,
    selected: `${t.prefix}-${l.selected}`
  },
  hierarchyTd: {
    main: `${t.prefix}-${i.table}-${i.td}`,
    cell: `${t.prefix}-${n.hierarchy}-${n.cell}`
  }
}, w = {
  wrapper: (r) => {
    const { size: e, virtual: a, c: d = $.wrapper } = r;
    return {
      [d.main]: !0,
      [d.size[e]]: d.size[e],
      [`${o}-${e}`]: e && !d.size[e],
      [d.virtual]: a
    };
  },
  ariaRoot: (r) => {
    const { c: e = $ } = r;
    return e.ariaRoot;
  },
  container: (r) => {
    const { c: e = $ } = r;
    return e.container;
  },
  content: (r) => {
    const { c: e = $.content } = r;
    return {
      [e.main]: !0,
      [e.virtual]: !0
    };
  },
  tableWrap: (r) => {
    const { c: e = $ } = r;
    return e.tableWrap;
  },
  table: (r) => {
    const { size: e, c: a = $.table } = r;
    return {
      [a.main]: !0,
      [a.gridTable]: !0,
      [a.size[e]]: a.size[e],
      [`${t.prefix}-${i}-${e}`]: !a.size[e]
    };
  },
  tbody: (r) => {
    const { c: e = $ } = r;
    return e.tbody;
  },
  thead: (r) => {
    const { draggable: e, c: a = $.thead } = r;
    return {
      [a.main]: !0,
      [a.draggable]: e
    };
  },
  header: (r) => {
    const { draggable: e, c: a = $.header } = r;
    return {
      [a.main]: !0,
      [a.draggable]: e
    };
  },
  headerWrap: (r) => {
    const { c: e = $ } = r;
    return e.headerWrap;
  },
  headerTable: (r) => {
    const { size: e, c: a = $.headerTable } = r;
    return {
      [a.main]: !0,
      [a.header]: !0,
      [a.size[e]]: a.size[e],
      [`${t.prefix}-${i.table}-${e}`]: !a.size[e]
    };
  },
  headerTh: (r) => {
    const { first: e, filterable: a, locked: d, sorted: p, c = $.headerTh } = r;
    return {
      [c.main]: !0,
      [c.header]: !0,
      [c.first]: e,
      [c.filterable]: a,
      [c.locked]: d,
      [c.sorted]: p
    };
  },
  tableThead: (r) => {
    const { c: e = $ } = r;
    return e.tableThead;
  },
  heightContainer: (r) => {
    const { c: e = $ } = r;
    return e.heightContainer;
  },
  sortIcon: (r) => {
    const { c: e = $ } = r;
    return e.sortIcon;
  },
  sortOrder: (r) => {
    const { c: e = $ } = r;
    return e.sortOrder;
  },
  tr: (r) => {
    const { isHeader: e, isFooter: a, isMaster: d, isAltRow: p, selected: c, highlighted: f, isInEdit: g, c: s = $.tr } = r;
    return {
      [s.main]: !0,
      [s.header]: e,
      [s.grouping]: e,
      [s.footer]: a,
      [s.master]: d,
      [s.rowAlt]: d && p,
      [s.alt]: d && p,
      [s.selected]: c,
      [s.highlighted]: f,
      [s.isInEdit]: g
    };
  },
  detailTr: (r) => {
    const { isAlt: e, c: a = $.detailTr } = r;
    return {
      [a.main]: !0,
      [a.row]: !0,
      [a.rowAlt]: e,
      [a.alt]: e
    };
  },
  simpleTr: (r) => {
    const { c: e = $ } = r;
    return e.simpleTr;
  },
  rowReorder: (r) => {
    const {
      dropIndicatorMain: e,
      dropIndicatorDirection: a,
      dragClueMain: d,
      dragClueOperation: p,
      c = $.rowReorder
    } = r;
    return {
      [c.dropIndicator.main]: e,
      [c.dropIndicator.direction]: a,
      [c.dragClue.main]: d,
      [c.dragClue.operation]: p
    };
  },
  headerCellInner: (r) => {
    const { c: e = $ } = r;
    return e.headerCellInner;
  },
  columnTitle: (r) => {
    const { c: e = $ } = r;
    return e.columnTitle;
  },
  headerCellLink: (r) => {
    const { sortable: e, c: a = $.headerCellLink } = r;
    return {
      [a.main]: !0,
      [a.notSortable]: !e
    };
  },
  noRecords: (r) => {
    const { c: e = $ } = r;
    return e.noRecords;
  },
  noRecordsTemplate: (r) => {
    const { c: e = $ } = r;
    return e.noRecordsTemplate;
  },
  pager: (r) => {
    const { c: e = $ } = r;
    return e.pager;
  },
  sorted: (r) => {
    const { c: e = $ } = r;
    return e.sorted;
  },
  contentSticky: (r) => {
    const { locked: e, c: a = $ } = r;
    return {
      [a.contentSticky]: e
    };
  },
  hierarchyCell: (r) => {
    const { c: e = $.hierarchyCell } = r;
    return {
      [e.main]: !0,
      [e.header]: !0
    };
  },
  td: (r) => {
    const { selected: e, highlighted: a, c: d = $.td } = r;
    return {
      [d.main]: !0,
      [d.selected]: e,
      [d.highlighted]: a
    };
  },
  detailTd: (r) => {
    const { c: e = $.detailTd } = r;
    return {
      [e.main]: !0,
      [e.cell]: !0
    };
  },
  editTd: (r) => {
    const { selected: e, c: a = $.editTd } = r;
    return {
      [a.main]: !0,
      [a.cell]: !0,
      [a.selected]: e
    };
  },
  hierarchyTd: (r) => {
    const { c: e = $.hierarchyTd } = r;
    return {
      [e.main]: !0,
      [e.cell]: !0
    };
  }
};
export {
  w as uGrid
};