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

package/dist/es/DropDownTree/DropDownTreeProps.d.ts

@@ -1,294 +0,0 @@
-/// <reference types="react" />
-import { FormComponentProps } from '@progress/kendo-react-common';
-import { ItemRenderProps } from '@progress/kendo-react-treeview';
-import { FilterChangeEvent, ChangeEvent, OpenEvent, CloseEvent, FocusEvent, BlurEvent, DropdownEvent } from '../common/events';
-import { DropDownsPopupSettings } from '../common/settings';
-/**
- * Represents the Object which is passed to the
- * [`ref`](https://reactjs.org/docs/refs-and-the-dom.html) callback of the DropDownTree component.
- */
-export interface DropDownTreeHandle {
-    /**
-     * The current element or `null` if there is no one.
-     */
-    element: HTMLElement | null;
-    /**
-     * The props of the DropDownTree component.
-     */
-    props: DropDownTreeProps;
-    /**
-     * The focus function.
-     */
-    focus: () => void;
-}
-/**
- * Represents the object of the `onFilterChange` DropDownTree event.
- */
-export interface DropDownTreeFilterChangeEvent extends FilterChangeEvent<DropDownTreeHandle> {
-}
-/**
- * Represents the object of the `onChange` DropDownTree event.
- */
-export interface DropDownTreeChangeEvent extends ChangeEvent<DropDownTreeHandle> {
-    level: number[];
-}
-/**
- * Represents the object of the `onOpen` DropDownTree event.
- */
-export interface DropDownTreeOpenEvent extends OpenEvent<DropDownTreeHandle> {
-}
-/**
- * Represents the object of the `onClose` DropDownTree event.
- */
-export interface DropDownTreeCloseEvent extends CloseEvent<DropDownTreeHandle> {
-}
-/**
- * Represents the object of the `onFocus` DropDownTree event.
- */
-export interface DropDownTreeFocusEvent extends FocusEvent<DropDownTreeHandle> {
-}
-/**
- * Represents the object of the `onBlur` DropDownTree event.
- */
-export interface DropDownTreeBlurEvent extends BlurEvent<DropDownTreeHandle> {
-}
-/**
- * Represents the object of the `onExpandChange` DropDownTree event.
- */
-export interface DropDownTreeExpandEvent extends DropdownEvent<DropDownTreeHandle> {
-    item: any;
-    level: number[];
-}
-/**
- * The props of component that will be used for rendering each of the DropDownTree items
- * ([see example]({% slug customrendering_dropdowntree %}#toc-items-and-value-element)).
- */
-export interface ItemProps extends ItemRenderProps {
-}
-/**
- * The props of the `ListNoData` component ([see example]({% slug customrendering_dropdowntree %}#toc-no-data)).
- */
-export interface ListNoDataProps {
-    children?: React.ReactNode;
-}
-/**
- * The props of the `ValueHolder` component ([see example]({% slug customrendering_dropdowntree %}#toc-items-and-value-element)).
- */
-export interface ValueHolderProps {
-    children?: React.ReactNode;
-    item?: any;
-}
-/**
- * Represents the props of the [KendoReact DropDownTree component]({% slug overview_dropdowntree %}).
- */
-export interface DropDownTreeProps extends FormComponentProps {
-    /**
-     * Sets the data of the DropDownTree ([see example]({% slug overview_dropdowntree %})).
-     */
-    data?: any[];
-    /**
-     * Sets the opened state of the DropDownTree.
-     */
-    opened?: boolean;
-    /**
-     * The styles that are applied to the DropDownTree.
-     */
-    style?: React.CSSProperties;
-    /**
-     * Sets the value of the DropDownTree ([see example]({% slug overview_dropdowntree %})).
-     * It can be an object from the data-tree.
-     */
-    value?: any;
-    /**
-     * The hint that is displayed when the DropDownTree is empty.
-     */
-    placeholder?: string;
-    /**
-     * Sets the key for comparing the data items of the DropDownTree ([see example]({% slug overview_dropdowntree %})).
-     * If `dataItemKey` is not set, the DropDownTree compares the items by reference.
-     */
-    dataItemKey: string;
-    /**
-     * Sets additional classes to the DropDownTree.
-     */
-    className?: string;
-    /**
-     * Sets the disabled state of the DropDownTree.
-     */
-    disabled?: boolean;
-    /**
-     * Represents the `dir` HTML attribute.
-     */
-    dir?: string;
-    /**
-     * Renders a floating label for the DropDownTree.
-     */
-    label?: string;
-    /**
-     * Specifies the id of the component.
-     */
-    id?: string;
-    /**
-     * Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
-     * For example these elements could contain error or hint message.
-     */
-    ariaDescribedBy?: string;
-    /**
-     * Identifies the element(s) which will label the component.
-     */
-    ariaLabelledBy?: string;
-    /**
-     * Enables the filtering functionality of the DropDownTree ([more information and examples]({% slug filtering_dropdowntree %})).
-     */
-    filterable?: boolean;
-    /**
-     * Sets the value of filtering input.
-     * Useful for making the filtering input a [controlled component](https://reactjs.org/docs/forms.html#controlled-components).
-     */
-    filter?: string;
-    /**
-     * Sets the loading state of the DropDownTree ([see example]({% slug filtering_dropdowntree %}#toc-visualize-filtering)).
-     */
-    loading?: boolean;
-    /**
-     * Specifies the `tabIndex` of the DropDownTree.
-     */
-    tabIndex?: number;
-    /**
-     * Specifies the `accessKey` of the DropDownTree.
-     */
-    accessKey?: string;
-    /**
-     * Sets the data item field that represents the item text ([see example]({% slug overview_dropdowntree %})).
-     */
-    textField: string;
-    /**
-     * Specifies the name of the field which will provide a Boolean representation of the selected state of the item.
-     */
-    selectField?: string;
-    /**
-     * Specifies the name of the field which will provide a Boolean representation of the expanded state of the item.
-     */
-    expandField?: string;
-    /**
-     * Specifies the name of the field which will provide an array representation of the item subitems.
-     * Defaults to 'items'.
-     */
-    subItemsField?: string;
-    /**
-     * Configures the popup of the DropDownTree.
-     */
-    popupSettings?: DropDownsPopupSettings;
-    /**
-     * Represents a callback function, which returns the value for submitting. The returned value will be rendered in an `option` of a hidden [`select`](https://reactjs.org/docs/forms.html#the-select-tag) element.
-     *
-     * @example
-     * ```jsx-no-run
-     * class App extends React.Component {
-     *    render() {
-     *       return (
-     *          <form>
-     *              <DropDownTree
-     *                  data={[ { text: "Austria", id: 1 } , { text: "Belarus", id: 2 } ]}
-     *                  valueMap={value => value && value.id}
-     *              />
-     *              <button type="submit">Submit</button>
-     *          </form>
-     *       );
-     *    }
-     * }
-     * ReactDOM.render(<App />, document.querySelector('my-app'));
-     * ```
-     */
-    valueMap?: (value: any) => any;
-    /**
-     * Fires each time the popup of the DropDownTree is about to open.
-     */
-    onOpen?: (event: DropDownTreeOpenEvent) => void;
-    /**
-     * Fires each time the popup of the DropDownTree is about to close.
-     */
-    onClose?: (event: DropDownTreeCloseEvent) => void;
-    /**
-     * Fires each time the user focuses the DropDownTree.
-     */
-    onFocus?: (event: DropDownTreeFocusEvent) => void;
-    /**
-     * Fires each time the DropDownTree gets blurred.
-     */
-    onBlur?: (event: DropDownTreeBlurEvent) => void;
-    /**
-     * Fires each time the value of the DropDownTree is about to change ([see examples]({% slug overview_dropdowntree %})).
-     */
-    onChange?: (event: DropDownTreeChangeEvent) => void;
-    /**
-     * Fires each time the user types in the filter input
-     * ([see example]({% slug filtering_dropdowntree %}#toc-basic-configuration)).
-     * You can filter the source based on the passed filtration value.
-     */
-    onFilterChange?: (event: DropDownTreeFilterChangeEvent) => void;
-    /**
-     * Fires when the expanding or collapsing of an item is requested ([see examples]({% slug overview_dropdowntree %})).
-     */
-    onExpandChange?: (event: any) => void;
-    /**
-     * Defines the component that will be used for rendering each of the DropDownTree items
-     * ([see example]({% slug customrendering_dropdowntree %}#toc-items-and-value-element)).
-     */
-    item?: React.ComponentType<ItemProps>;
-    /**
-     * Defines the component that will be used for rendering the selected value
-     * ([see example]({% slug customrendering_dropdowntree %}#toc-items-and-value-element)).
-     */
-    valueHolder?: React.ComponentType<ValueHolderProps>;
-    /**
-     * Defines the component that will be rendered in the DropDownTree popup when no data is available
-     * ([see example]({% slug customrendering_dropdowntree %}#toc-no-data)).
-     */
-    listNoData?: React.ComponentType<ListNoDataProps>;
-    /**
-     * Configures the `size` of the DropDownTree.
-     *
-     * 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 DropDownTree.
-     *
-     * 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 DropDownTree.
-     *
-     * The available options are:
-     * - solid
-     * - flat
-     * - outline
-     * - null&mdash;Does not set a fillMode `className`.
-     *
-     * @default `solid`
-     */
-    fillMode?: null | 'solid' | 'flat' | 'outline';
-    /**
-     * Providing different rendering of the popup element based on the screen dimensions.
-     */
-    adaptive?: boolean;
-    /**
-     * Specifies the text that is rendered as title in the adaptive popup.
-     */
-    adaptiveTitle?: string;
-}

package/dist/es/DropDownTree/DropDownTreeProps.js

@@ -1,2 +0,0 @@
-export {};
-// tslint:enable:max-line-length

package/dist/es/DropDownTree/ListNoData.d.ts

@@ -1,6 +0,0 @@
-import * as React from 'react';
-import { ListNoDataProps } from './DropDownTreeProps';
-/**
- * @hidden
- */
-export declare const ListNoData: React.FunctionComponent<ListNoDataProps>;

package/dist/es/DropDownTree/ListNoData.js

@@ -1,8 +0,0 @@
-import * as React from 'react';
-/**
- * @hidden
- */
-export var ListNoData = function (props) {
-    return React.createElement("div", { className: "k-nodata" },
-        React.createElement("div", null, props.children));
-};

package/dist/es/DropDownTree/useDropdownWidth.d.ts

@@ -1,5 +0,0 @@
-import * as React from 'react';
-/**
- * @hidden
- */
-export declare function useDropdownWidth(elementRef: React.RefObject<HTMLElement | null>, initialStyleWidth?: string | number, args?: any): string | number | undefined;

package/dist/es/DropDownTree/useDropdownWidth.js

@@ -1,13 +0,0 @@
-import * as React from 'react';
-/**
- * @hidden
- */
-export function useDropdownWidth(elementRef, initialStyleWidth, args) {
-    var _a = React.useState(initialStyleWidth), width = _a[0], setWidth = _a[1];
-    React.useEffect(function () {
-        if (width !== undefined && elementRef.current) {
-            setWidth(elementRef.current.offsetWidth);
-        }
-    }, args);
-    return width;
-}

package/dist/es/MultiColumnComboBox/MultiColumnComboBox.js

@@ -1,213 +0,0 @@
-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;
-};
-import * as React from 'react';
-import * as PropTypes from 'prop-types';
-import { PopupPropsContext } from '@progress/kendo-react-popup';
-import { MultiColumnList } from './../common/MultiColumnList';
-import { classNames, getScrollbarWidth, setScrollbarWidth, getter, usePropsContext, createPropsContext } from '@progress/kendo-react-common';
-import { ComboBox, ComboBoxWithoutContext } from '../ComboBox/ComboBox';
-import { getItemValue } from '../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.
- */
-export var MultiColumnComboBoxPropsContext = 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"));
- * ```
- */
-export var MultiColumnComboBox = React.forwardRef(function (directProps, ref) {
-    var props = usePropsContext(MultiColumnComboBoxPropsContext, directProps);
-    var target = React.useRef(null);
-    var comboBoxRef = React.useRef(null);
-    var scrollbarWidth = 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 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(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 = 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: 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 () { 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, __assign({}, listProps)); }, []);
-    return (React.createElement(PopupPropsContext.Provider, { value: function (PopupProps) { return (__assign(__assign({}, PopupProps), { popupClass: "k-dropdowngrid-popup ".concat(popupSettings.popupClass) })); } },
-        React.createElement(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: 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({}, ComboBoxWithoutContext.propTypes), { columns: PropTypes.any.isRequired });
-var defaultProps = {
-    columns: [],
-    popupSettings: {},
-    width: '200px',
-    size: 'medium',
-    rounded: 'medium',
-    fillMode: 'solid'
-};
-MultiColumnComboBox.displayName = 'KendoMultiColumnComboBox';
-// TODO: delete casting when @types/react is updated!
-MultiColumnComboBox.propTypes = propTypes;
-MultiColumnComboBox.defaultProps = defaultProps;