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

package/dist/npm/MultiSelect/MultiSelectProps.d.ts

@@ -1,314 +0,0 @@
-/// <reference types="react" />
-import { MultiSelect } from './MultiSelect';
-import { FormComponentProps } from '@progress/kendo-react-common';
-import { FilterChangeEvent, ChangeEvent, OpenEvent, CloseEvent, FocusEvent, BlurEvent, PageChangeEvent, CancelEvent } from './../common/events';
-import { VirtualizationSettings, DropDownsPopupSettings } from '../common/settings';
-import { ListGroupItemProps } from '../common/ListGroupItem';
-import { GroupStickyHeaderProps } from '../common/GroupStickyHeader';
-import { ListItemProps } from '../common/ListItem';
-import { TagData } from './TagList';
-/**
- * Represents the object of the `filterChange` MultiSelect event.
- */
-export interface MultiSelectFilterChangeEvent extends FilterChangeEvent<MultiSelect> {
-}
-/**
- * Represents the object of the `change` MultiSelect event.
- */
-export interface MultiSelectChangeEvent extends ChangeEvent<MultiSelect> {
-}
-/**
- * Represents the object of the `onCancel` MultiSelect event.
- */
-export interface MultiSelectCancelEvent extends CancelEvent<MultiSelect> {
-}
-/**
- * Represents the object of the `open` MultiSelect event.
- */
-export interface MultiSelectOpenEvent extends OpenEvent<MultiSelect> {
-}
-/**
- * Represents the object of the `close` MultiSelect event.
- */
-export interface MultiSelectCloseEvent extends CloseEvent<MultiSelect> {
-}
-/**
- * Represents the object of the `focus` MultiSelect event.
- */
-export interface MultiSelectFocusEvent extends FocusEvent<MultiSelect> {
-}
-/**
- * Represents the object of the `blur` MultiSelect event.
- */
-export interface MultiSelectBlurEvent extends BlurEvent<MultiSelect> {
-}
-/**
- * Represents the object of the `pageChange` MultiSelect event.
- */
-export interface MultiSelectPageChangeEvent extends PageChangeEvent<MultiSelect> {
-}
-/**
- * Represents the props of the [KendoReact MultiSelect component]({% slug overview_multiselect %}).
- */
-export interface MultiSelectProps extends FormComponentProps {
-    /**
-     * Specifies whether the MultiSelect allows user-defined values that are not present in the dataset ([see example]({% slug custom_values_multiselect %})). Defaults to `false`.
-     */
-    allowCustom?: boolean;
-    /**
-     * Sets the data of the MultiSelect ([see example]({% slug binding_multiselect %})).
-     */
-    data?: any[];
-    /**
-     * Sets the opened and closed state of the MultiSelect.
-     */
-    opened?: boolean;
-    /**
-     * Determines whether to close the options list of the MultiSelect after the item selection is finished.
-     *
-     * @example
-     * ```jsx
-     * class App extends React.Component {
-     *    render() {
-     *       return (
-     *              <MultiSelect
-     *                  data={[ "Albania", "Andorra", "Austria", "Belarus" ]}
-     *                  autoClose={false}
-     *              />
-     *       );
-     *    }
-     * }
-     * ReactDOM.render(<App />, document.querySelector('my-app'));
-     * ```
-     *
-     * @default true
-     */
-    autoClose?: boolean;
-    /**
-     * The styles that are applied to the MultiSelect.
-     */
-    style?: React.CSSProperties;
-    /**
-     * Sets the value of the MultiSelect ([see example]({% slug binding_multiselect %})). It can either be of the primitive (string, numbers) or of the complex (objects) type.
-     */
-    value?: Array<any>;
-    /**
-     * The hint that is displayed when the MultiSelect is empty.
-     */
-    placeholder?: string;
-    /**
-     * Sets the tags of the MultiSelect ([see example]({% slug customtags_multiselect %})).
-     */
-    tags?: Array<TagData>;
-    /**
-     * Sets the key for comparing the data items of the MultiSelect ([see example]({% slug binding_multiselect %}#toc-datasets-of-objects)). If `dataItemKey` is not set, the MultiSelect compares the items by reference.
-     */
-    dataItemKey?: string;
-    /**
-     * Sets the default value of the MultiSelect. Similar to the native `select` HTML element.
-     */
-    defaultValue?: Array<any>;
-    /**
-     * Sets additional classes to the MultiSelect.
-     */
-    className?: string;
-    /**
-     * Sets the disabled state of the MultiSelect.
-     */
-    disabled?: boolean;
-    /**
-     * Represents the `dir` HTML attribute.
-     */
-    dir?: string;
-    /**
-     * Enables the filtering functionality of the MultiSelect ([more information and examples]({% slug filtering_multiselect %})).
-     */
-    filterable?: boolean;
-    /**
-     * 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;
-    /**
-     * If set, the MultiSelect will use it to get the focused item index.
-     *
-     * Default functionality returns the first item which starts with the input text.
-     *
-     * @example
-     * ```jsx-no-run
-     * const focusedItemIndex = (data, inputText, textField) => {
-     *     let text = inputText.toLowerCase();
-     *     return data.findIndex(item =>
-     *         String(textField ? item[textField] : item).toLowerCase().includes(text));
-     * };
-     *
-     * <MultiSelect focusedItemIndex={focusedItemIndex} />
-     * ```
-     */
-    focusedItemIndex?: (data: any, inputText: string, textField?: string) => number;
-    /**
-     * 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 value of the adaptive filtering input of the of MultiSelect.
-     */
-    adaptiveFilter?: string;
-    /**
-     * Sets the loading state of the MultiSelect ([see example]({% slug filtering_multiselect %}#toc-basic-configuration)).
-     */
-    loading?: boolean;
-    /**
-     * Specifies the `tabIndex` of the MultiSelect.
-     */
-    tabIndex?: number;
-    /**
-     * Specifies the `accessKey` of the MultiSelect.
-     */
-    accessKey?: string;
-    /**
-     * Sets the data item field that represents the item text ([see example]({% slug binding_multiselect %}#toc-datasets-of-objects)). If the data contains only primitive values, do not define it.
-     */
-    textField?: string;
-    /**
-     * Renders a floating label for the MultiSelect.
-     */
-    label?: string;
-    /**
-     * Configures the popup of the MultiSelect.
-     */
-    popupSettings?: DropDownsPopupSettings;
-    /**
-     * Configures the virtual scrolling of the MultiSelect ([see example]({% slug virtualization_multiselect %})).
-     */
-    virtual?: VirtualizationSettings;
-    /**
-     * Fires each time the popup of the MultiSelect is about to open.
-     */
-    onOpen?: (event: MultiSelectOpenEvent) => void;
-    /**
-     * Fires each time the popup of the MultiSelect is about to close.
-     */
-    onClose?: (event: MultiSelectCloseEvent) => void;
-    /**
-     * Fires each time the user focuses the MultiSelect.
-     */
-    onFocus?: (event: MultiSelectFocusEvent) => void;
-    /**
-     * Fires each time the MultiSelect gets blurred.
-     */
-    onBlur?: (event: MultiSelectBlurEvent) => void;
-    /**
-     * Fires each time the value of the MultiSelect is about to change ([see examples]({% slug binding_multiselect %})).
-     */
-    onChange?: (event: MultiSelectChangeEvent) => void;
-    /**
-     * Fires each time the popup of the MultiSelect is about to cancel in ([adaptive mode]({% slug adaptive_rendering_multiselect %})).
-     */
-    onCancel?: (event: MultiSelectCancelEvent) => void;
-    /**
-     * Fires each time the user types in the filter input ([see example]({% slug filtering_multiselect %}#toc-basic-configuration)). You can filter the source based on the passed filtration value.
-     */
-    onFilterChange?: (event: MultiSelectFilterChangeEvent) => void;
-    /**
-     * Fires when both the virtual scrolling of the MultiSelect is enabled and when the component requires data for another page ([see example]({% slug virtualization_multiselect %})).
-     */
-    onPageChange?: (event: MultiSelectPageChangeEvent) => void;
-    /**
-     * Fires when a MultiSelect item is about to be rendered ([see example]({% slug customrendering_multiselect %}#toc-items)). Used to override the default appearance of the list items.
-     */
-    itemRender?: (li: React.ReactElement<HTMLLIElement>, itemProps: ListItemProps) => React.ReactNode;
-    /**
-     * Fires when the element which indicates no data in the popup is about to be rendered ([see example]({% slug customrendering_multiselect %}#toc-no-data)). Used to override the default appearance of the element.
-     */
-    listNoDataRender?: (element: React.ReactElement<HTMLDivElement>) => React.ReactNode;
-    /**
-     * Fires when a tag element is about to be rendered ([see example]({% slug customrendering_multiselect %}#toc-tags)). Used to override the default appearance of the element.
-     */
-    tagRender?: (tagData: TagData, tag: React.ReactElement) => React.ReactElement;
-    /**
-     * Sets the header component of the MultiSelect ([see example]({% slug customrendering_multiselect %}#toc-headers-and-footers)).
-     */
-    header?: React.ReactNode;
-    /**
-     * Sets the footer component of the MultiSelect ([see example]({% slug customrendering_multiselect %}#toc-headers-and-footers)).
-     */
-    footer?: React.ReactNode;
-    /**
-     * Configures the `size` of the MultiSelect.
-     *
-     * 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 MultiSelect.
-     *
-     * 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 MultiSelect.
-     *
-     * The available options are:
-     * - solid
-     * - flat
-     * - outline
-     * - null&mdash;Does not set a fillMode `className`.
-     *
-     * @default `solid`
-     */
-    fillMode?: null | 'solid' | 'flat' | 'outline';
-    /**
-     * Sets the data item field that represents the start of a group. Applicable to objects data.
-     */
-    groupField?: string;
-    /**
-     * Fires when a DropDownList's group header item is about to be rendered. Used to override the default appearance of the group's headers.
-     */
-    groupHeaderItemRender?: (li: React.ReactElement<HTMLLIElement>, itemProps: ListGroupItemProps) => React.ReactNode;
-    /**
-     * Fires when a DropDownList's sticky group header item is about to be rendered. Used to override the default appearance of the sticky group header of the component.
-     */
-    groupStickyHeaderItemRender?: (div: React.ReactElement<HTMLDivElement>, stickyHeaderProps: GroupStickyHeaderProps) => React.ReactNode;
-    /**
-     * @hidden
-     */
-    list?: any;
-    /**
-     * @hidden
-     */
-    groupMode?: string;
-    /**
-     * 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;
-    /**
-     * Defines if MultiSelect's disabled items will be skipped or focused when navigating through the list of items using a keyboard. Defaults to `true`.
-     */
-    skipDisabledItems?: boolean;
-}

package/dist/npm/MultiSelect/MultiSelectProps.js

@@ -1,3 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-// tslint:enable:max-line-length

package/dist/npm/MultiSelect/TagList.js

@@ -1,41 +0,0 @@
-"use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-Object.defineProperty(exports, "__esModule", { value: true });
-var React = require("react");
-var kendo_react_buttons_1 = require("@progress/kendo-react-buttons");
-var preventDefault = function (event) { return event.syntheticEvent.preventDefault(); };
-var stopPropagation = function (event) { return event.syntheticEvent.stopPropagation(); };
-/**
- * @hidden
- */
-var TagList = /** @class */ (function (_super) {
-    __extends(TagList, _super);
-    function TagList() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    TagList.prototype.render = function () {
-        var _a = this.props, data = _a.data, guid = _a.guid, focused = _a.focused, tagRender = _a.tagRender, TagComponent = _a.tag, onTagDelete = _a.onTagDelete, size = _a.size;
-        return (React.createElement(React.Fragment, null,
-            data.map(function (tagData, index) {
-                var tag = TagComponent ? (React.createElement(TagComponent, { key: tagData.text + index, tagData: tagData, guid: guid, focusedTag: focused, onTagDelete: onTagDelete })) : (React.createElement(kendo_react_buttons_1.Chip, { id: "tag-".concat(guid, "-").concat(tagData.text.replace(/\s+/g, '-')), "aria-selected": true, role: "option", "aria-setsize": data.length, key: tagData.text + index, text: tagData.text, removable: true, onRemove: function (e) { return onTagDelete.call(undefined, tagData.data, e.syntheticEvent); }, onMouseDown: preventDefault, onClick: stopPropagation, className: tagData === focused ? 'k-focus' : undefined, size: size }));
-                return tagRender ? tagRender(tagData, tag) : tag;
-            }),
-            this.props.children));
-    };
-    return TagList;
-}(React.Component));
-exports.default = TagList;

package/dist/npm/MultiSelectTree/MultiSelectTree.d.ts

@@ -1,81 +0,0 @@
-import * as React from 'react';
-import { MultiSelectTreeProps, MultiSelectTreeHandle } from './MultiSelectTreeProps';
-/**
- * Represents the PropsContext of the `MultiSelectTree` component.
- * Used for global configuration of all `MultiSelectTree` instances.
- *
- * For more information, refer to the [Dropdowns Props Context]({% slug props-context_dropdowns %}) article.
- */
-export declare const MultiSelectTreePropsContext: React.Context<(p: MultiSelectTreeProps) => MultiSelectTreeProps>;
-/**
- * Represents the MultiSelectTree component.
- *
- * Accepts properties of type [MultiSelectTreeProps]({% slug api_dropdowns_multiselecttreeprops %}).
- * Obtaining the `ref` returns an object of type [MultiSelectTreeHandle]({% slug api_dropdowns_multiselecttreehandle %}).
- *
- * @example
- * ```jsx
- *   const dataItemKey = 'id';
- *   const checkField = 'checkField';
- *   const checkIndeterminateField = 'checkIndeterminateField';
- *   const subItemsField = 'items';
- *   const expandField = 'expanded';
- *   const textField = 'text';
- *   const fields = {
- *    dataItemKey,
- *    checkField,
- *    checkIndeterminateField,
- *    expandField,
- *    subItemsField,
- *   };
- *   const App = () => {
- *    const [value, setValue] = React.useState([]);
- *    const [expanded, setExpanded] = React.useState([data[0][dataItemKey]]);
- *    const onChange = (event) =>
- *       setValue(
- *       getMultiSelectTreeValue(data, {
- *           ...fields,
- *           ...event,
- *           value,
- *       })
- *       );
- *   const onExpandChange = React.useCallback(
- *       (event) => setExpanded(expandedState(event.item, dataItemKey, expanded)),
- *       [expanded]
- *   );
- *   const treeData = React.useMemo(
- *       () =>
- *       processMultiSelectTreeData(data, {
- *           expanded,
- *           value,
- *           ...fields,
- *       }),
- *       [expanded, value]
- *   );
- *
- *   return (
- *       <div>
- *       <div>Categories:</div>
- *       <MultiSelectTree
- *           style={{
- *           width: '300px',
- *           }}
- *           data={treeData}
- *           value={value}
- *           onChange={onChange}
- *           placeholder="Please select ..."
- *           textField={textField}
- *           dataItemKey={dataItemKey}
- *           checkField={checkField}
- *           checkIndeterminateField={checkIndeterminateField}
- *           expandField={expandField}
- *           subItemsField={subItemsField}
- *           onExpandChange={onExpandChange}
- *       />
- *       </div>
- *   );
- *   };
- *   ReactDOM.render(<App />, document.querySelector('my-app'));
- * ```
- */
-export declare const MultiSelectTree: React.ForwardRefExoticComponent<MultiSelectTreeProps & React.RefAttributes<MultiSelectTreeHandle | null>>;