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

React DropDowns offer an interface for users to select different items from a list and more. KendoReact Dropdowns 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 m from "react";
import n from "prop-types";
import { VirtualScroll as v } from "./VirtualScrollStatic.mjs";
import { Navigation as y } from "./Navigation.mjs";
import { scrollToItem as S, areSame as g } from "./utils.mjs";
const a = class a {
  constructor(s) {
    this.wrapper = null, this.list = null, this.vs = new v(), this.navigation = new y(), this.handleItemClick = (t, e) => {
      const i = this.initState();
      i.syntheticEvent = e, e.stopPropagation(), this.component.handleItemSelect(t, i), this.togglePopup(i), this.applyState(i);
    }, this.handleFocus = (t) => {
      if (!this.component.state.focused) {
        const e = this.initState();
        e.data.focused = !0, e.events.push({ type: "onFocus" }), e.syntheticEvent = t, this.applyState(e);
      }
    }, this.filterChanged = (t, e) => {
      const { textField: i, filterable: o } = this.component.props;
      o && e.events.push({
        type: "onFilterChange",
        filter: {
          field: i,
          operator: "contains",
          ignoreCase: !0,
          value: t
        }
      });
    }, this.togglePopup = (t) => {
      const e = this.component.props, i = e.opened !== void 0 ? e.opened : this.component.state.opened;
      e.opened === void 0 && (t.data.opened = !i), i ? t.events.push({ type: "onClose" }) : (t.events.push({ type: "onOpen" }), this.calculatePopupWidth());
    }, this.pageChange = (t, e) => {
      const i = this.initState();
      i.syntheticEvent = e, this.triggerOnPageChange(i, t.skip, t.take), this.applyState(i);
    }, this.scrollToVirtualItem = (t, e) => {
      const i = this.vs;
      if (t.skip === 0)
        i.reset();
      else {
        let o = i.translate;
        o === 0 && (i.calcScrollElementHeight(), o = i.itemHeight * t.skip, i.translateTo(o, !0)), e < 0 && o > 0 && (o += i.itemHeight * (t.pageSize / 4)), i.container && (i.container.scrollTop = o), this.scrollToItem(e, !0);
      }
    }, this.scrollPopupByPageSize = (t) => {
      var r, l, h, c, u, d;
      const e = this.vs, i = (l = (r = this.list) == null ? void 0 : r.parentElement) == null ? void 0 : l.scrollTop, o = e.enabled && e.itemHeight ? e.itemHeight : this.list ? this.list.children[0].offsetHeight : 0, p = (c = (h = this.list) == null ? void 0 : h.parentElement) == null ? void 0 : c.offsetHeight;
      i !== void 0 && p !== void 0 && ((d = (u = this.list) == null ? void 0 : u.parentElement) == null || d.scroll({
        top: i + t * Math.floor(p / o) * o
      }));
    }, this.renderScrollElement = () => {
      const t = this.vs;
      return t.enabled && /* @__PURE__ */ m.createElement("div", { ref: (e) => t.scrollElement = e, key: "scrollElementKey" });
    }, this.resetGroupStickyHeader = (t, e) => {
      t !== e.state.group && e.setState({ group: t });
    }, this.listBoxId = s.props.id + "list", this.guid = s.props.id, this.component = s, this.vs.PageChange = this.pageChange;
  }
  didUpdate() {
    this.vs.listTransform && this.vs.list && (this.vs.list.style.transform = this.vs.listTransform, this.vs.listTransform = "");
  }
  didMount() {
    const s = this.component.props, t = s.popupSettings || {}, e = s.style || {}, i = t.width;
    let o = s.opened === !0;
    i === void 0 && this.calculatePopupWidth(), s.dir === void 0 && e.direction === void 0 && (this.calculateDir(), o = !0), o && this.component.forceUpdate();
  }
  calculateDir() {
    const s = this.component.element;
    s && s.ownerDocument && s.ownerDocument.defaultView && (this.dirCalculated = s.ownerDocument.defaultView.getComputedStyle(s).direction || void 0);
  }
  calculatePopupWidth() {
    this.wrapper && (this.popupWidth = this.wrapper.offsetWidth + "px");
  }
  scrollToItem(s, t, e) {
    const i = this.list || this.vs.list;
    if (!i && !e && setTimeout(() => {
      this.scrollToItem(s, t, !0);
    }, 10), s === 0 && t && this.vs.skip === 0) {
      this.vs.reset();
      return;
    }
    if (i && s >= 0) {
      const o = this.vs, p = o.container || i.parentNode, r = t !== void 0 ? t : o.enabled;
      S(p, i, s, o.translate, r);
    }
  }
  updateComponentArgs(s) {
    for (let t in s)
      Object.hasOwnProperty.call(s, t) && (this.component[t] = s[t]);
  }
  initState() {
    return {
      data: {},
      events: [],
      syntheticEvent: void 0
    };
  }
  applyState(s) {
    Object.keys(s.data).length > 0 && this.component.setState(s.data);
    const t = {
      syntheticEvent: s.syntheticEvent,
      nativeEvent: s.syntheticEvent ? s.syntheticEvent.nativeEvent : void 0,
      target: this.component,
      value: this.component.value
    };
    s.events.forEach((e) => {
      const i = e.type;
      delete e.type;
      const o = i && this.component.props[i];
      o && o.call(void 0, {
        ...t,
        ...e
      });
    });
  }
  triggerOnPageChange(s, t, e) {
    const i = this.component.props.virtual;
    if (i) {
      const o = Math.min(Math.max(0, t), Math.max(0, i.total - e));
      o !== i.skip && s.events.push({
        type: "onPageChange",
        page: { skip: o, take: e }
      });
    }
  }
  triggerPageChangeCornerItems(s, t) {
    const e = this.component.props, { data: i = [], dataItemKey: o, virtual: p } = e, r = e.opened !== void 0 ? e.opened : this.component.state.opened;
    s && p && this.vs.enabled && (p.skip > 0 && g(s, i[0], o) ? this.triggerOnPageChange(t, p.skip - 1, p.pageSize) : !r && p.skip + p.pageSize < p.total && g(s, i[i.length - 1], o) && this.triggerOnPageChange(t, p.skip + 1, p.pageSize));
  }
  getPopupSettings() {
    return Object.assign({}, a.defaultProps.popupSettings, this.component.props.popupSettings);
  }
  getAdaptiveAnimation() {
    const s = this.getPopupSettings();
    return s.animate !== void 0 ? s.animate : !0;
  }
  getGroupedDataModernMode(s, t) {
    const e = [];
    return s.forEach((i, o) => {
      s[o - 1] && i[t] !== s[o - 1][t] && e.push({ [t]: i[t] }), e.push(s[o]);
    }), e;
  }
};
a.basicPropTypes = {
  opened: n.bool,
  disabled: n.bool,
  dir: n.string,
  tabIndex: n.number,
  accessKey: n.string,
  data: n.array,
  textField: n.string,
  className: n.string,
  label: n.string,
  loading: n.bool,
  popupSettings: n.shape({
    animate: n.oneOfType([
      n.bool,
      n.shape({
        openDuration: n.number,
        closeDuration: n.number
      })
    ]),
    popupClass: n.string,
    className: n.string,
    appendTo: n.any,
    width: n.oneOfType([n.string, n.number]),
    height: n.oneOfType([n.string, n.number])
  }),
  onOpen: n.func,
  onClose: n.func,
  onFocus: n.func,
  onBlur: n.func,
  onChange: n.func,
  itemRender: n.func,
  listNoDataRender: n.func,
  focusedItemIndex: n.func,
  header: n.node,
  footer: n.node
}, a.propTypes = {
  ...a.basicPropTypes,
  value: n.any,
  defaultValue: n.any,
  filterable: n.bool,
  filter: n.string,
  virtual: n.shape({
    pageSize: n.number.isRequired,
    skip: n.number.isRequired,
    total: n.number.isRequired
  }),
  onFilterChange: n.func,
  onPageChange: n.func
}, a.defaultProps = {
  popupSettings: {
    height: "200px"
  },
  required: !1,
  validityStyles: !0
};
let f = a;
export {
  f as default
};