@progress/kendo-react-dropdowns 6.1.1 → 7.0.0-develop.10

package/dist/npm/MultiColumnComboBox/MultiColumnComboBox.d.ts

@@ -1,287 +0,0 @@
-import * as React from 'react';
-import { ComboBoxBlurEvent, ComboBoxChangeEvent, ComboBoxCloseEvent, ComboBoxFilterChangeEvent, ComboBoxFocusEvent, ComboBoxOpenEvent, ComboBoxPageChangeEvent, ComboBoxProps } from '../ComboBox/ComboBoxProps';
-import { DropDownsPopupSettings, VirtualizationSettings } from '../common/settings';
-import { ListItemProps } from '../common/ListItem';
-/**
- * The represents the interface of the MultiColumnComboBox columns.
- */
-export interface MultiColumnComboBoxColumn {
-    /**
-     * The unique id of the column.
-     */
-    uniqueKey?: string;
-    /**
-     * The field of the column.
-     */
-    field?: string;
-    /**
-     * The header of the column.
-     */
-    header?: React.ReactNode;
-    /**
-     * Represents the width of the column. If the width is not specified it is applied the default width of `200px`.
-     */
-    width?: string | number;
-}
-/**
- * Represents the properties of the [MultiColumnComboBox]({% slug api_dropdowns_multicolumncombobox %}) component.
- */
-export interface MultiColumnComboBoxProps extends ComboBoxProps {
-    /**
-     * Determines the columns array of the MultiColumnComboBox.
-     */
-    columns: MultiColumnComboBoxColumn[];
-    /**
-     * Sets the data of the MultiColumnComboBox.
-     */
-    data?: any[];
-    /**
-     * Sets the opened and closed state of the MultiColumnComboBox.
-     */
-    opened?: boolean;
-    /**
-     * The styles that are applied to the MultiColumnComboBox.
-     */
-    style?: React.CSSProperties;
-    /**
-     * Sets the value of the MultiColumnComboBox. It can either be of the primitive (string, numbers) or of the complex (objects) type.
-     */
-    value?: any;
-    /**
-     * Sets the default value of the MultiColumnComboBox. Similar to the native `select` HTML element.
-     */
-    defaultValue?: any;
-    /**
-     * Sets additional classes to the MultiColumnComboBox.
-     */
-    className?: string;
-    /**
-     * If `clearButton` is set to `true`, the MultiColumnComboBox renders a button on hovering over the component. Clicking this button resets the value of the MultiColumnComboBox to `undefined` and triggers the `change` event.
-     */
-    clearButton?: boolean;
-    /**
-     * The hint that is displayed when the MultiColumnComboBox is empty.
-     */
-    placeholder?: string;
-    /**
-     * Specifies whether the MultiColumnComboBox allows user-defined values that are not present in the dataset. Defaults to `false`.
-     */
-    allowCustom?: boolean;
-    /**
-     * Sets the disabled state of the MultiColumnComboBox.
-     */
-    disabled?: boolean;
-    /**
-     * Enables the filtering functionality of the MultiColumnComboBox.
-     */
-    filterable?: boolean;
-    /**
-     * Sets the value of MultiColumnComboBox input. Useful for making the MultiColumnComboBox input a controlled component.
-     */
-    filter?: string | null;
-    /**
-     * Sets the loading state of the MultiColumnComboBox.
-     */
-    loading?: boolean;
-    /**
-     * Specifies the `tabIndex` of the MultiColumnComboBox.
-     */
-    tabIndex?: number;
-    /**
-     * Specifies the `accessKey` of the MultiColumnComboBox.
-     */
-    accessKey?: string;
-    /**
-     * Sets the key for comparing the data items of the MultiColumnComboBox. If `dataItemKey` is not set, the MultiColumnComboBox compares the items by reference.
-     */
-    dataItemKey?: string;
-    /**
-     * Renders a floating label for the MultiColumnComboBox.
-     */
-    label?: string;
-    /**
-     * Configures the popup of the MultiColumnComboBox.
-     */
-    popupSettings?: DropDownsPopupSettings;
-    /**
-     * Configures the virtual scrolling of the MultiColumnComboBox.
-     */
-    virtual?: VirtualizationSettings;
-    /**
-     * If set, the MultiColumnComboBox will use it to get the focused item index. Default functionality returns the first item which starts with the input text.
-     */
-    focusedItemIndex?: (data: any, inputText: string, textField?: string) => number;
-    /**
-     * Fires each time the popup of the MultiColumnComboBox is about to open.
-     */
-    onOpen?: (event: ComboBoxOpenEvent) => void;
-    /**
-     * Fires each time the popup of the MultiColumnComboBox is about to close.
-     */
-    onClose?: (event: ComboBoxCloseEvent) => void;
-    /**
-     * Fires each time the user focuses the MultiColumnComboBox.
-     */
-    onFocus?: (event: ComboBoxFocusEvent) => void;
-    /**
-     * Fires each time the MultiColumnComboBox gets blurred.
-     */
-    onBlur?: (event: ComboBoxBlurEvent) => void;
-    /**
-     * Fires each time the value of the MultiColumnComboBox is about to change.
-     */
-    onChange?: (event: ComboBoxChangeEvent) => void;
-    /**
-     * Fires each time the user types in the filter input. You can filter the source based on the passed filtration value.
-     */
-    onFilterChange?: (event: ComboBoxFilterChangeEvent) => void;
-    /**
-     * Fires when both the virtual scrolling of the MultiColumnComboBox is enabled and the component requires data for another page.
-     */
-    onPageChange?: (event: ComboBoxPageChangeEvent) => void;
-    /**
-     * @hidden
-     */
-    onGroupScroll?: (event: {
-        group?: string;
-    }) => void;
-    /**
-     * Fires when a MultiColumnComboBox list item is about to be rendered. Used to override the default appearance of the list items.
-     */
-    itemRender?: (li: React.ReactElement<HTMLLIElement>, itemProps: ListItemProps) => React.ReactNode;
-    /**
-     * Sets the header component of the MultiColumnComboBox.
-     */
-    header?: React.ReactNode;
-    /**
-     * Sets the footer component of the MultiColumnComboBox.
-     */
-    footer?: React.ReactNode;
-    /**
-     * Configures the `size` of the MultiColumnComboBox.
-     *
-     * The available options are:
-     * - small
-     * - medium
-     * - large
-     * - null&mdash;Does not set a size `className`.
-     *
-     * @default `medium`
-     */
-    size?: null | 'small' | 'medium' | 'large';
-    /**
-     * Configures the `roundness` of the MultiColumnComboBox.
-     *
-     * The available options are:
-     * - small
-     * - medium
-     * - large
-     * - full
-     * - null&mdash;Does not set a rounded `className`.
-     *
-     * @default `medium`
-     */
-    rounded?: null | 'small' | 'medium' | 'large' | 'full';
-    /**
-     * Configures the `fillMode` of the MultiColumnComboBox.
-     *
-     * The available options are:
-     * - solid
-     * - flat
-     * - outline
-     * - null&mdash;Does not set a fillMode `className`.
-     *
-     * @default `solid`
-     */
-    fillMode?: null | 'solid' | 'flat' | 'outline';
-}
-/**
- * Represents the target(element and props) of the MultiColumnComboBoxChangeEvent.
- */
-export interface MultiColumnComboBoxHandle {
-    /**
-     * The current element or `null` of there is no one.
-     */
-    element: HTMLSpanElement | null;
-    /**
-     * The value of the MultiColumnComboBox.
-     */
-    value: any;
-    /**
-     * The props values of the MultiColumnComboBox.
-     */
-    props: MultiColumnComboBoxProps;
-    /**
-     * The focus event callback.
-     */
-    focus: () => void;
-}
-/**
- * Represents the type of the MultiColumnComboBoxChangeEvent.
- */
-export interface MultiColumnComboBoxChangeEvent {
-    /**
-     * The value of the MultiColumnComboBoxChangeEvent.
-     */
-    value: any;
-    /**
-     * The target of the MultiColumnComboBoxChangeEvent from MultiColumnComboBoxHandle.
-     */
-    target: MultiColumnComboBoxHandle;
-    /**
-     * The event of the MultiColumnComboBoxChangeEvent.
-     */
-    syntheticEvent: React.SyntheticEvent<any>;
-}
-/**
- * Represents the PropsContext of the `MultiColumnComboBox` component.
- * Used for global configuration of all `MultiColumnComboBox` instances.
- *
- * For more information, refer to the [Dropdowns Props Context]({% slug props-context_dropdowns %}) article.
- */
-export declare const MultiColumnComboBoxPropsContext: React.Context<(p: MultiColumnComboBoxProps) => MultiColumnComboBoxProps>;
-/**
- * Represents the MultiColumnComboBox component.
- *
- * Accepts properties of type [MultiColumnComboBoxProps]({% slug api_dropdowns_multicolumncomboboxprops %}).
- * Obtaining the `ref` returns an object of type [MultiColumnComboBoxHandle]({% slug api_dropdowns_multicolumncomboboxhandle %}).
- *
- * @example
- * ```jsx
- * const columns = [
- *  {
- *    field: "id",
- *    header: "ID",
- *    width: "100px",
- *  },
- *  {
- *    field: "name",
- *    header: "Name",
- *    width: "300px",
- *  },
- *  {
- *    field: "position",
- *    header: "Position",
- *    width: "300px",
- *   },
- * ];
- * const App = () => {
- *   return (
- *     <div>
- *       <div>Employees:</div>
- *       <MultiColumnComboBox
- *         data={employees}
- *         columns={columns}
- *         textField={"name"}
- *         style={{
- *           width: "300px",
- *         }}
- *         placeholder="Please select ..."
- *       />
- *     </div>
- *   );
- * };
- * ReactDOM.render(<App />, document.querySelector("my-app"));
- * ```
- */
-export declare const MultiColumnComboBox: React.ForwardRefExoticComponent<MultiColumnComboBoxProps & React.RefAttributes<MultiColumnComboBoxHandle | null>>;

package/dist/npm/MultiColumnComboBox/MultiColumnComboBox.js

@@ -1,216 +0,0 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.MultiColumnComboBox = exports.MultiColumnComboBoxPropsContext = void 0;
-var React = require("react");
-var PropTypes = require("prop-types");
-var kendo_react_popup_1 = require("@progress/kendo-react-popup");
-var MultiColumnList_1 = require("./../common/MultiColumnList");
-var kendo_react_common_1 = require("@progress/kendo-react-common");
-var ComboBox_1 = require("../ComboBox/ComboBox");
-var utils_1 = require("../common/utils");
-var columnWidth = function (width, defaultWidth) {
-    if (width) {
-        return typeof width === 'number' ? width + 'px' : width;
-    }
-    return defaultWidth;
-};
-/**
- * Represents the PropsContext of the `MultiColumnComboBox` component.
- * Used for global configuration of all `MultiColumnComboBox` instances.
- *
- * For more information, refer to the [Dropdowns Props Context]({% slug props-context_dropdowns %}) article.
- */
-exports.MultiColumnComboBoxPropsContext = (0, kendo_react_common_1.createPropsContext)();
-/**
- * Represents the MultiColumnComboBox component.
- *
- * Accepts properties of type [MultiColumnComboBoxProps]({% slug api_dropdowns_multicolumncomboboxprops %}).
- * Obtaining the `ref` returns an object of type [MultiColumnComboBoxHandle]({% slug api_dropdowns_multicolumncomboboxhandle %}).
- *
- * @example
- * ```jsx
- * const columns = [
- *  {
- *    field: "id",
- *    header: "ID",
- *    width: "100px",
- *  },
- *  {
- *    field: "name",
- *    header: "Name",
- *    width: "300px",
- *  },
- *  {
- *    field: "position",
- *    header: "Position",
- *    width: "300px",
- *   },
- * ];
- * const App = () => {
- *   return (
- *     <div>
- *       <div>Employees:</div>
- *       <MultiColumnComboBox
- *         data={employees}
- *         columns={columns}
- *         textField={"name"}
- *         style={{
- *           width: "300px",
- *         }}
- *         placeholder="Please select ..."
- *       />
- *     </div>
- *   );
- * };
- * ReactDOM.render(<App />, document.querySelector("my-app"));
- * ```
- */
-exports.MultiColumnComboBox = React.forwardRef(function (directProps, ref) {
-    var props = (0, kendo_react_common_1.usePropsContext)(exports.MultiColumnComboBoxPropsContext, directProps);
-    var target = React.useRef(null);
-    var comboBoxRef = React.useRef(null);
-    var scrollbarWidth = (0, kendo_react_common_1.getScrollbarWidth)();
-    var _a = props.columns, columns = _a === void 0 ? defaultProps.columns : _a, _b = props.popupSettings, popupSettings = _b === void 0 ? defaultProps.popupSettings : _b, className = props.className, size = props.size, onOpen = props.onOpen, onClose = props.onClose, onFocus = props.onFocus, onBlur = props.onBlur, onChange = props.onChange, onFilterChange = props.onFilterChange, onPageChange = props.onPageChange, other = __rest(props, ["columns", "popupSettings", "className", "size", "onOpen", "onClose", "onFocus", "onBlur", "onChange", "onFilterChange", "onPageChange"]);
-    React.useImperativeHandle(target, function () {
-        return ({
-            element: comboBoxRef.current && comboBoxRef.current.element,
-            focus: function () {
-                if (comboBoxRef.current) {
-                    comboBoxRef.current.focus();
-                }
-            },
-            get value() { return comboBoxRef.current && comboBoxRef.current.value; },
-            get name() { return comboBoxRef.current && comboBoxRef.current.name; },
-            props: props
-        });
-    });
-    React.useImperativeHandle(ref, function () { return target.current; });
-    var initialGroupHeader = React.useMemo(function () {
-        if (props.groupField !== undefined && props.data) {
-            return (0, utils_1.getItemValue)(props.data[0], props.groupField);
-        }
-    }, [props.data, props.groupField]);
-    var _c = React.useState(initialGroupHeader), groupHeader = _c[0], setGroupHeader = _c[1];
-    var _d = React.useState(true), showStickyHeader = _d[0], setShowStickyHeader = _d[1];
-    var header = React.useMemo(function () {
-        var renderer = (React.createElement("th", { className: 'k-table-th', colSpan: columns.length }, groupHeader));
-        return (React.createElement(React.Fragment, null,
-            props.header,
-            React.createElement("div", { className: "k-table-header-wrap" },
-                React.createElement("table", { className: "k-table", role: "presentation" },
-                    React.createElement("colgroup", null, columns.map(function (column, i) {
-                        return (React.createElement("col", { key: column.uniqueKey ? column.uniqueKey : i, style: { width: column.width ? column.width : defaultProps.width } }));
-                    })),
-                    React.createElement("thead", { className: 'k-table-thead' },
-                        React.createElement("tr", { className: 'k-table-row' }, columns.map(function (column, i) {
-                            return (React.createElement("th", { className: "k-table-th", key: column.uniqueKey ? column.uniqueKey : i }, column.header || '\u00A0'));
-                        })),
-                        groupHeader && showStickyHeader && React.createElement("tr", { className: 'k-table-group-row' }, props.groupStickyHeaderItemRender ? props.groupStickyHeaderItemRender.call(undefined, renderer, {}) : renderer))))));
-    }, [props.header, columns, groupHeader, showStickyHeader]);
-    var popupWidth = React.useMemo(function () {
-        // These additional 4px are coming from the child elements side borders (fixes horizontal scrollbar)
-        return "calc(".concat(columns.map(function (column) { return columnWidth(column.width, defaultProps.width); }).filter(Boolean).join(' + '), " + ").concat(scrollbarWidth, "px + 4px)");
-    }, [columns, scrollbarWidth]);
-    var skip = props.virtual ? props.virtual.skip : 0;
-    var itemRender = React.useCallback(function (li, liProps) {
-        var children = columns.map(function (column, i) { return (React.createElement("span", { className: !props.itemRender ? 'k-table-td' : undefined, style: !props.itemRender ? { width: column.width ? column.width : defaultProps.width } : undefined, key: column.uniqueKey ? column.uniqueKey : i }, column.field ? String((0, kendo_react_common_1.getter)(column.field)(liProps.dataItem)) : '')); });
-        var group = undefined;
-        var curGroup, prevGroup, groupGetter, data = props.data || [];
-        var index = liProps.index - skip;
-        if (props.groupField !== undefined) {
-            groupGetter = (0, kendo_react_common_1.getter)(props.groupField);
-            curGroup = groupGetter(data[index]);
-            prevGroup = groupGetter(data[index - 1]);
-            if (curGroup && prevGroup && curGroup !== prevGroup) {
-                group = curGroup;
-            }
-        }
-        if (group && props.groupMode === 'classic') {
-            children.push(React.createElement("div", { key: "group", className: "k-table-td k-table-group-td" },
-                React.createElement("span", null, group)));
-        }
-        var rendering = React.cloneElement(li, __assign(__assign({}, li.props), { className: (0, kendo_react_common_1.classNames)('k-table-row', {
-                'k-table-alt-row': liProps.index % 2 !== 0,
-                'k-focus': liProps.focused,
-                'k-selected': liProps.selected,
-                'k-first': Boolean(group),
-                'k-disabled': liProps.dataItem.disabled
-            }) }), children);
-        return props.itemRender ? props.itemRender.call(undefined, rendering, liProps) : rendering;
-    }, [columns, props.groupField, props.itemRender, props.data, skip]);
-    var handleEvent = React.useCallback(function (handler, event) {
-        if (handler) {
-            handler.call(undefined, __assign(__assign({}, event), { target: target.current }));
-        }
-    }, []);
-    var onOpenHandler = React.useCallback(function (event) {
-        // Resets the sticky header group value for scenarios with open/close of component's popup
-        if (!props.virtual) {
-            setGroupHeader(initialGroupHeader);
-        }
-        ;
-        return handleEvent(onOpen, event);
-    }, [handleEvent, onOpen, props.virtual, initialGroupHeader]);
-    var onCloseHandler = React.useCallback(function (event) { return handleEvent(onClose, event); }, [onClose]);
-    var onFocusHandler = React.useCallback(function (event) { return handleEvent(onFocus, event); }, [onFocus]);
-    var onBlurHandler = React.useCallback(function (event) { return handleEvent(onBlur, event); }, [onBlur]);
-    var onChangeHandler = React.useCallback(function (event) { return handleEvent(onChange, event); }, [onChange]);
-    var onPageChangeHandler = React.useCallback(function (event) { return handleEvent(onPageChange, event); }, [onPageChange]);
-    var onFilterChangeHandler = React.useCallback(function (event) {
-        setGroupHeader(initialGroupHeader);
-        return handleEvent(onFilterChange, __assign(__assign({}, event), { mobileMode: event.target.mobileMode }));
-    }, [onFilterChange]);
-    var onGroupScroll = React.useCallback(function (event) {
-        setGroupHeader(event.group);
-    }, []);
-    React.useEffect(function () { (0, kendo_react_common_1.setScrollbarWidth)(); });
-    React.useEffect(function () {
-        var data = props.data;
-        setGroupHeader(initialGroupHeader);
-        if (data && data.length !== 0) {
-            setShowStickyHeader(true);
-        }
-        else {
-            setShowStickyHeader(false);
-        }
-        ;
-    }, [props.data]);
-    var List = React.useCallback(function (listProps) { return React.createElement(MultiColumnList_1.MultiColumnList, __assign({}, listProps)); }, []);
-    return (React.createElement(kendo_react_popup_1.PopupPropsContext.Provider, { value: function (PopupProps) { return (__assign(__assign({}, PopupProps), { popupClass: "k-dropdowngrid-popup ".concat(popupSettings.popupClass) })); } },
-        React.createElement(ComboBox_1.ComboBox, __assign({}, other, { list: List, popupSettings: __assign(__assign({ width: popupWidth }, popupSettings), { className: popupSettings.className }), ref: comboBoxRef, header: header, itemRender: itemRender, groupHeaderItemRender: props.groupHeaderItemRender, size: props.size, rounded: props.rounded, fillMode: props.fillMode, groupMode: props.groupMode, groupField: props.groupField, isMultiColumn: true, onOpen: onOpenHandler, onClose: onCloseHandler, onFocus: onFocusHandler, onBlur: onBlurHandler, onChange: onChangeHandler, onFilterChange: onFilterChangeHandler, onPageChange: onPageChangeHandler, onGroupScroll: onGroupScroll, className: (0, kendo_react_common_1.classNames)('k-dropdowngrid', className), required: props.required, adaptive: props.adaptive, adaptiveFilter: props.adaptiveFilter, adaptiveTitle: props.adaptiveTitle, footer: props.footer, footerClassName: 'k-table-footer' }))));
-});
-var propTypes = __assign(__assign({}, ComboBox_1.ComboBoxWithoutContext.propTypes), { columns: PropTypes.any.isRequired });
-var defaultProps = {
-    columns: [],
-    popupSettings: {},
-    width: '200px',
-    size: 'medium',
-    rounded: 'medium',
-    fillMode: 'solid'
-};
-exports.MultiColumnComboBox.displayName = 'KendoMultiColumnComboBox';
-// TODO: delete casting when @types/react is updated!
-exports.MultiColumnComboBox.propTypes = propTypes;
-exports.MultiColumnComboBox.defaultProps = defaultProps;