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

package/dist/es/Chip/ChipList.js

@@ -1,177 +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);
-};
-import * as React from 'react';
-import * as PropTypes from 'prop-types';
-import { useDir, getter, getTabIndex, classNames, useMouse, kendoThemeMaps } from '@progress/kendo-react-common';
-import { selectionReducer } from './selection-reducer';
-import { focusReducer } from './focus-reducer';
-import { dataReducer } from './data-reducer';
-import { Chip } from './Chip';
-import { validatePackage } from '@progress/kendo-react-common';
-import { packageMetadata } from '../package-metadata';
-/**
- * @hidden
- */
-export var ChipListSelectionContext = React.createContext([null, function (_args) {
-        /**/
-    }]);
-/**
- * @hidden
- */
-export var ChipListFocusContext = React.createContext([null, function (_args) {
-        /**/
-    }]);
-/**
- * @hidden
- */
-export var ChipListDataContext = React.createContext([null, function (_args) {
-        /**/
-    }]);
-/**
- * @hidden
- */
-var useSelection = function (defaultValue, args, callback) {
-    var _a = React.useState(defaultValue), state = _a[0], setState = _a[1];
-    var handleDispatchSelection = function (action) {
-        var newState = selectionReducer(args.state || state, __assign(__assign({}, action), args));
-        if (callback) {
-            callback(newState, action.event);
-        }
-        setState(newState);
-    };
-    return [state, handleDispatchSelection];
-};
-/**
- * @hidden
- */
-var useFocus = function (args) {
-    var _a = React.useState(null), state = _a[0], setState = _a[1];
-    var handleDispatchFocus = function (action) {
-        var newState = focusReducer(action.payload, __assign(__assign({}, action), args));
-        setState(newState);
-    };
-    return [state, handleDispatchFocus];
-};
-/**
- * @hidden
- */
-var useData = function (defaultData, args, callback) {
-    var _a = React.useState(defaultData), state = _a[0], setState = _a[1];
-    var handleDispatchData = function (action) {
-        var newState = dataReducer(args.state || state, __assign(__assign({}, action), args));
-        if (callback) {
-            callback(newState, action.event);
-        }
-        setState(newState);
-    };
-    return [state, handleDispatchData];
-};
-/**
- * Represents the ChipList component.
- */
-export var ChipList = React.forwardRef(function (props, ref) {
-    var _a;
-    validatePackage(packageMetadata);
-    var target = React.useRef(null);
-    var chipListRef = React.useRef(null);
-    var dir = useDir(chipListRef, props.dir);
-    var chip = props.chip, id = props.id, style = props.style, tabIndex = props.tabIndex, disabled = props.disabled, size = props.size, className = props.className, ariaDescribedBy = props.ariaDescribedBy, ariaLabelledBy = props.ariaLabelledBy, _b = props.selection, selection = _b === void 0 ? defaultProps.selection : _b, _c = props.value, value = _c === void 0 ? defaultProps.defaultValue : _c, _d = props.defaultData, defaultData = _d === void 0 ? defaultProps.defaultData : _d, _e = props.valueField, valueField = _e === void 0 ? defaultProps.valueField : _e, _f = props.textField, textField = _f === void 0 ? defaultProps.textField : _f, onChange = props.onChange, onDataChange = props.onDataChange;
-    var ChipComponent = React.useMemo(function () { return chip || Chip; }, [chip, Chip]);
-    React.useImperativeHandle(target, function () { return ({
-        element: chipListRef.current,
-        props: props
-    }); });
-    React.useImperativeHandle(ref, function () { return target.current; });
-    var handleChange = React.useCallback(function (newValue, event) {
-        if (onChange && target.current) {
-            onChange.call(undefined, {
-                value: newValue,
-                target: target.current,
-                syntheticEvent: event
-            });
-        }
-    }, [onChange]);
-    var _g = useSelection(value, {
-        selection: selection,
-        state: value
-    }, handleChange), stateValue = _g[0], dispatchStateValue = _g[1];
-    var handleDataChange = React.useCallback(function (newData, event) {
-        if (onDataChange && target.current) {
-            onDataChange.call(undefined, {
-                value: newData,
-                target: target.current,
-                syntheticEvent: event
-            });
-        }
-    }, [onDataChange]);
-    var _h = useData(props.data || defaultData, {
-        state: props.data,
-        valueField: valueField
-    }, handleDataChange), stateData = _h[0], dispatchData = _h[1];
-    var itemsReducer = React.useCallback(function (acc, current) {
-        acc.push(current[valueField]);
-        return acc;
-    }, [valueField]);
-    var data = React.useMemo(function () { return props.data || stateData; }, [props.data, stateData]);
-    var chipValue = React.useMemo(function () { return value || stateValue; }, [value, stateValue]);
-    var items = React.useMemo(function () { return data.reduce(itemsReducer, []); }, [data, itemsReducer]);
-    var valueGetter = React.useCallback(function (item) { return getter(valueField)(item); }, [valueField]);
-    var textGetter = React.useCallback(function (item) { return getter(textField)(item); }, [textField]);
-    var _j = useFocus({ items: items }), focus = _j[0], dispatchFocus = _j[1];
-    var mouseProps = useMouse(props, target);
-    return (React.createElement(ChipListSelectionContext.Provider, { value: [chipValue, dispatchStateValue] },
-        React.createElement(ChipListFocusContext.Provider, { value: [focus, dispatchFocus] },
-            React.createElement(ChipListDataContext.Provider, { value: [data, dispatchData] },
-                React.createElement("div", __assign({ ref: chipListRef }, mouseProps, { role: 'listbox', id: id, dir: dir, style: style, tabIndex: getTabIndex(tabIndex, disabled, undefined), className: classNames('k-chip-list', (_a = {
-                            'k-rtl': dir === 'rtl',
-                            'k-disabled': disabled
-                        },
-                        _a["k-chip-list-".concat(kendoThemeMaps.sizeMap[size] || size)] = size,
-                        _a), className), "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy }), data.map(function (item, index) {
-                    return (React.createElement(ChipComponent, { role: 'option', dataItem: item, size: size, key: [valueGetter(item), index].join('-'), text: textGetter(item), value: valueGetter(item), ariaLabel: item.ariaLabel, svgIcon: item.svgIcon || undefined }));
-                }))))));
-});
-var propTypes = {
-    id: PropTypes.string,
-    className: PropTypes.string,
-    tabIndex: PropTypes.number,
-    data: PropTypes.any,
-    defaultData: PropTypes.arrayOf(PropTypes.any),
-    onDataChange: PropTypes.func,
-    value: PropTypes.oneOfType([PropTypes.any, PropTypes.arrayOf(PropTypes.any)]),
-    defaultValue: PropTypes.oneOfType([PropTypes.any, PropTypes.arrayOf(PropTypes.any)]),
-    onChange: PropTypes.func,
-    selection: PropTypes.oneOf(['single', 'none', 'multiple']),
-    textField: PropTypes.string,
-    valueField: PropTypes.string,
-    disabled: PropTypes.bool,
-    dir: PropTypes.oneOf(['ltr', 'rtl']),
-    ariaLabelledBy: PropTypes.string,
-    ariaDescribedBy: PropTypes.string,
-    size: PropTypes.oneOf([null, 'small', 'medium', 'large'])
-};
-var defaultProps = {
-    chip: Chip,
-    size: 'medium',
-    disabled: false,
-    defaultValue: null,
-    defaultData: [],
-    dir: 'ltr',
-    selection: 'none',
-    textField: 'text',
-    valueField: 'value',
-    removable: 'removable'
-};
-ChipList.displayName = 'KendoReactChipList';
-// TODO: delete casting when @types/react is updated!
-ChipList.propTypes = propTypes;
-ChipList.defaultProps = defaultProps;

package/dist/es/Chip/data-reducer.d.ts

@@ -1,22 +0,0 @@
-import * as React from 'react';
-/**
- * @hidden
- */
-export declare enum CHIP_DATA_ACTION {
-    remove = "remove",
-    add = "add",
-    reorder = "reorder"
-}
-/**
- * @hidden
- */
-export declare type DataAction = {
-    type: CHIP_DATA_ACTION;
-    payload?: any;
-    valueField: string;
-    event?: React.SyntheticEvent<any>;
-};
-/**
- * @hidden
- */
-export declare const dataReducer: (state: any, action: DataAction) => any;

package/dist/es/Chip/data-reducer.js

@@ -1,26 +0,0 @@
-/**
- * @hidden
- */
-export var CHIP_DATA_ACTION;
-(function (CHIP_DATA_ACTION) {
-    CHIP_DATA_ACTION["remove"] = "remove";
-    CHIP_DATA_ACTION["add"] = "add";
-    CHIP_DATA_ACTION["reorder"] = "reorder";
-})(CHIP_DATA_ACTION || (CHIP_DATA_ACTION = {}));
-/**
- * @hidden
- */
-export var dataReducer = function (state, action) {
-    switch (action.type) {
-        case CHIP_DATA_ACTION.add:
-            // TODO v2
-            break;
-        case CHIP_DATA_ACTION.remove:
-            return state.filter(function (i) { return i[action.valueField] !== action.payload; });
-        case CHIP_DATA_ACTION.reorder:
-            // TODO v2
-            break;
-        default:
-            return state;
-    }
-};

package/dist/es/Chip/focus-reducer.js

@@ -1,32 +0,0 @@
-/**
- * @hidden
- */
-export var FOCUS_ACTION;
-(function (FOCUS_ACTION) {
-    FOCUS_ACTION["next"] = "next";
-    FOCUS_ACTION["prev"] = "prev";
-    FOCUS_ACTION["current"] = "current";
-    FOCUS_ACTION["reset"] = "reset";
-})(FOCUS_ACTION || (FOCUS_ACTION = {}));
-/**
- * @hidden
- */
-export var focusReducer = function (state, action) {
-    var currentIndex = action.items.findIndex(function (i) { return i === state; });
-    switch (action.type) {
-        case FOCUS_ACTION.next:
-            return currentIndex === action.items.length - 1
-                ? state
-                : action.items[currentIndex + 1];
-        case FOCUS_ACTION.prev:
-            return currentIndex === 0
-                ? state
-                : action.items[currentIndex - 1];
-        case FOCUS_ACTION.current:
-            return action.payload;
-        case FOCUS_ACTION.reset:
-            return null;
-        default:
-            return state;
-    }
-};

package/dist/es/Chip/selection-reducer.d.ts

@@ -1,30 +0,0 @@
-import * as React from 'react';
-/**
- * @hidden
- */
-export declare enum SELECTION_TYPE {
-    single = "single",
-    multiple = "multiple",
-    none = "none"
-}
-/**
- * @hidden
- */
-export declare enum SELECTION_ACTION {
-    toggle = "toggle",
-    remove = "remove"
-}
-/**
- * @hidden
- */
-export declare type SelectionAction = {
-    type?: SELECTION_ACTION;
-    selection: SELECTION_TYPE;
-    payload?: string;
-    event?: React.SyntheticEvent<any>;
-    state?: any;
-};
-/**
- * @hidden
- */
-export declare const selectionReducer: (state: any, action: SelectionAction) => any;

package/dist/es/Chip/selection-reducer.js

@@ -1,75 +0,0 @@
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-/**
- * @hidden
- */
-export var SELECTION_TYPE;
-(function (SELECTION_TYPE) {
-    SELECTION_TYPE["single"] = "single";
-    SELECTION_TYPE["multiple"] = "multiple";
-    SELECTION_TYPE["none"] = "none";
-})(SELECTION_TYPE || (SELECTION_TYPE = {}));
-/**
- * @hidden
- */
-export var SELECTION_ACTION;
-(function (SELECTION_ACTION) {
-    SELECTION_ACTION["toggle"] = "toggle";
-    SELECTION_ACTION["remove"] = "remove";
-})(SELECTION_ACTION || (SELECTION_ACTION = {}));
-/**
- * @hidden
- */
-export var selectionReducer = function (state, action) {
-    switch (action.selection) {
-        case SELECTION_TYPE.single:
-            switch (action.type) {
-                case SELECTION_ACTION.toggle: {
-                    if (!Array.isArray(state) || state === null) {
-                        return action.payload === state ? null : action.payload;
-                    }
-                    throw new Error('State cannot be an array in single selection');
-                }
-                case SELECTION_ACTION.remove: {
-                    return action.payload === state ? null : state;
-                }
-                default:
-                    return state;
-            }
-        case SELECTION_TYPE.multiple:
-            switch (action.type) {
-                case SELECTION_ACTION.toggle: {
-                    if (Array.isArray(state)) {
-                        return state.some(function (i) { return i === action.payload; })
-                            ? state.filter(function (i) { return i !== action.payload; })
-                            : __spreadArray(__spreadArray([], state, true), [action.payload], false);
-                    }
-                    if (state === null) {
-                        return [action.payload];
-                    }
-                    throw new Error('State cannot be non-array in multiple selection');
-                }
-                case SELECTION_ACTION.remove: {
-                    if (Array.isArray(state)) {
-                        return state.some(function (i) { return i === action.payload; })
-                            ? state.filter(function (i) { return i !== action.payload; })
-                            : __spreadArray(__spreadArray([], state, true), [action.payload], false);
-                    }
-                    return state;
-                }
-                default:
-                    return state;
-            }
-        case SELECTION_TYPE.none:
-            return null;
-        default:
-            return state;
-    }
-};

package/dist/es/FloatingActionButton/FloatingActionButton.d.ts

@@ -1,17 +0,0 @@
-import * as React from 'react';
-import { FloatingActionButtonHandle } from './interfaces/FloatingActionButtonHandle';
-import { FloatingActionButtonProps } from './interfaces/FloatingActionButtonProps';
-/**
- * Represents the [KendoReact FloatingActionButton component]({% slug overview_floatingactionbutton %}).
- *
- * @example
- * ```jsx
- * const App = () => {
- *   return (
- *     <FloatingActionButton icon="plus" text="Create"/>
- *   );
- * };
- *    ReactDOM.render(<App />, document.querySelector('my-app'));
- * ```
- */
-export declare const FloatingActionButton: React.ForwardRefExoticComponent<FloatingActionButtonProps & React.RefAttributes<FloatingActionButtonHandle | null>>;

package/dist/es/FloatingActionButton/FloatingActionButton.js

@@ -1,281 +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 { getActiveElement, IconWrap, kendoThemeMaps, svgIconPropType, useZIndexContext, validatePackage, ZIndexContext } from '@progress/kendo-react-common';
-import { classNames, guid, useDir, dispatchEvent, Keys, getTabIndex } from '@progress/kendo-react-common';
-import { FloatingActionButtonItem } from './FloatingActionButtonItem';
-import { packageMetadata } from '../package-metadata';
-import { position, getAnchorAlign, getPopupAlign, getTextDirectionClass } from './utils';
-import { Popup } from '@progress/kendo-react-popup';
-/** @hidden */
-var ZINDEX_FAB_STEP = 2;
-/** @hidden */
-var DEFAULT_FAB_ZINDEX = 100;
-/**
- * Represents the [KendoReact FloatingActionButton component]({% slug overview_floatingactionbutton %}).
- *
- * @example
- * ```jsx
- * const App = () => {
- *   return (
- *     <FloatingActionButton icon="plus" text="Create"/>
- *   );
- * };
- *    ReactDOM.render(<App />, document.querySelector('my-app'));
- * ```
- */
-export var FloatingActionButton = React.forwardRef(function (props, ref) {
-    validatePackage(packageMetadata);
-    var _a = props.align, align = _a === void 0 ? defaultProps.align : _a, alignOffset = props.alignOffset, className = props.className, disabled = props.disabled, icon = props.icon, svgIcon = props.svgIcon, iconClass = props.iconClass, id = props.id, items = props.items, item = props.item, text = props.text, _b = props.positionMode, positionMode = _b === void 0 ? defaultProps.positionMode : _b, _c = props.size, size = _c === void 0 ? defaultProps.size : _c, style = props.style, _d = props.rounded, rounded = _d === void 0 ? defaultProps.rounded : _d, _e = props.themeColor, themeColor = _e === void 0 ? defaultProps.themeColor : _e, overlayStyle = props.overlayStyle, tabIndex = props.tabIndex, accessKey = props.accessKey, _f = props.popupSettings, popupSettings = _f === void 0 ? {} : _f, modal = props.modal, onClick = props.onClick, onItemClick = props.onItemClick, onFocus = props.onFocus, onBlur = props.onBlur, onKeyDown = props.onKeyDown, onOpen = props.onOpen, onClose = props.onClose, others = __rest(props, ["align", "alignOffset", "className", "disabled", "icon", "svgIcon", "iconClass", "id", "items", "item", "text", "positionMode", "size", "style", "rounded", "themeColor", "overlayStyle", "tabIndex", "accessKey", "popupSettings", "modal", "onClick", "onItemClick", "onFocus", "onBlur", "onKeyDown", "onOpen", "onClose"]);
-    var zIndexContext = useZIndexContext();
-    var currentZIndex = zIndexContext ? zIndexContext + ZINDEX_FAB_STEP : DEFAULT_FAB_ZINDEX;
-    var target = React.useRef(null);
-    var elementRef = React.useRef(null);
-    var listRef = React.useRef(null);
-    var popupRef = React.useRef(null);
-    var focusElement = React.useCallback(function () {
-        if (elementRef.current) {
-            elementRef.current.focus();
-        }
-    }, []);
-    var getImperativeHandle = React.useCallback(function () { return ({
-        element: elementRef.current,
-        focus: focusElement
-    }); }, [focusElement]);
-    React.useImperativeHandle(target, getImperativeHandle);
-    React.useImperativeHandle(ref, function () { return target.current; });
-    var _g = React.useState(false), open = _g[0], setOpen = _g[1];
-    var _h = React.useState(false), focused = _h[0], setFocused = _h[1];
-    var _j = React.useState(-1), focusedIndex = _j[0], setFocusedIndex = _j[1];
-    var buttonId = React.useMemo(function () { return guid(); }, []);
-    var dir = useDir(elementRef, props.dir);
-    var isRtl = dir === 'rtl';
-    var listId = React.useMemo(function () { return guid(); }, []);
-    React.useEffect(function () {
-        position(elementRef, align, alignOffset, isRtl);
-    }, [elementRef, align, alignOffset, isRtl]);
-    React.useEffect(function () {
-        if (focused && elementRef && elementRef.current) {
-            // firefox in mac does not focus on mouse-down, next line fixes this
-            elementRef.current.focus();
-        }
-    }, [focused, elementRef]);
-    var dispatchPopupEvent = React.useCallback(function (dispatchedEvent, isOpen) {
-        if (!items) {
-            return;
-        }
-        dispatchEvent(isOpen ? onOpen : onClose, dispatchedEvent, getImperativeHandle(), undefined);
-    }, [onOpen, onClose, items]);
-    var handleClick = React.useCallback(function (event) {
-        if (!event.target || disabled) {
-            return;
-        }
-        if (!items && onClick) {
-            dispatchEvent(onClick, event, getImperativeHandle(), undefined);
-        }
-        else {
-            setOpen(!open);
-            setFocused(true);
-            setFocusedIndex(!open ? 0 : -1);
-            dispatchPopupEvent(event, !open);
-        }
-    }, [setOpen, setFocused, setFocusedIndex, onClick, dispatchPopupEvent,
-        open, items, disabled]);
-    var handleFocus = React.useCallback(function (event) {
-        setFocused(true);
-        setFocusedIndex(open ? 0 : -1);
-        if (onFocus) {
-            dispatchEvent(onFocus, event, getImperativeHandle(), undefined);
-        }
-    }, [onFocus, setFocused, setFocusedIndex]);
-    var handleBlur = React.useCallback(function (event) {
-        setFocused(false);
-        setOpen(false);
-        setFocusedIndex(-1);
-        dispatchEvent(onBlur, event, getImperativeHandle(), undefined);
-        var fireCloseEvent = open;
-        if (fireCloseEvent) {
-            dispatchPopupEvent(event, false);
-        }
-    }, [onBlur, setFocused, setOpen, setFocusedIndex, dispatchPopupEvent]);
-    var handleMouseDown = React.useCallback(function (event) {
-        event.preventDefault();
-    }, []);
-    var dispatchItemClickEvent = React.useCallback(function (dispatchedEvent, index) {
-        if (!items) {
-            return;
-        }
-        if (!items[index].disabled) {
-            dispatchEvent(onItemClick, dispatchedEvent, getImperativeHandle(), {
-                itemProps: items[index],
-                itemIndex: index
-            });
-        }
-    }, [onItemClick]);
-    var handleItemClick = React.useCallback(function (event, clickedItemIndex) {
-        if (!event.target || !items) {
-            return;
-        }
-        setFocusedIndex(clickedItemIndex);
-        setOpen(false);
-        dispatchItemClickEvent(event, clickedItemIndex);
-        dispatchPopupEvent(event, false);
-    }, [setFocusedIndex, setOpen, dispatchItemClickEvent, dispatchPopupEvent]);
-    var handleItemDown = React.useCallback(function (event) {
-        var activeElement = getActiveElement(document);
-        if (activeElement === elementRef.current) {
-            event.preventDefault();
-        }
-    }, [elementRef]);
-    var handleKeyDown = React.useCallback(function (event) {
-        var currIndex = focusedIndex;
-        var maxNavIndex = items ? items.length - 1 : -1;
-        var isAtBottom = align.vertical === 'bottom';
-        switch (event.keyCode) {
-            case Keys.enter:
-            case Keys.space:
-                if (currIndex >= 0) {
-                    dispatchItemClickEvent(event, currIndex);
-                }
-                event.preventDefault();
-                setOpen(!open);
-                setFocusedIndex(!open ? 0 : -1);
-                break;
-            case Keys.esc:
-                event.preventDefault();
-                setOpen(false);
-                setFocusedIndex(-1);
-                break;
-            case Keys.home:
-                event.preventDefault();
-                setFocusedIndex(0);
-                break;
-            case Keys.end:
-                event.preventDefault();
-                setFocusedIndex(maxNavIndex);
-                break;
-            case Keys.down:
-            case Keys.right:
-                event.preventDefault();
-                if (currIndex < maxNavIndex && !isAtBottom) {
-                    setFocusedIndex(currIndex + 1);
-                }
-                if (currIndex > 0 && isAtBottom) {
-                    setFocusedIndex(currIndex - 1);
-                }
-                break;
-            case Keys.up:
-            case Keys.left:
-                event.preventDefault();
-                if (currIndex > 0 && !isAtBottom) {
-                    setFocusedIndex(currIndex - 1);
-                }
-                if (currIndex < maxNavIndex && isAtBottom) {
-                    setFocusedIndex(currIndex + 1);
-                }
-                break;
-            default:
-                break;
-        }
-        dispatchEvent(onKeyDown, event, getImperativeHandle(), undefined);
-    }, [onKeyDown, focusedIndex, setFocusedIndex, isRtl, setOpen]);
-    var buttonClassNames = React.useMemo(function () {
-        var _a;
-        return classNames('k-fab k-fab-solid', (_a = {
-                'k-fab-sm': size === 'small',
-                'k-fab-md': size === 'medium',
-                'k-fab-lg': size === 'large',
-                'k-disabled': disabled,
-                'k-pos-absolute': positionMode === 'absolute',
-                'k-pos-fixed': positionMode === 'fixed',
-                'k-focus': focused
-            },
-            _a["k-rounded-".concat(kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded,
-            _a["k-fab-solid-".concat(themeColor)] = themeColor,
-            _a), "k-".concat(align.vertical, "-").concat(align.horizontal), className);
-    }, [themeColor, size, rounded, disabled, positionMode, align, focused, className]);
-    var fabItems = (items && (items.map(function (element, index) {
-        return (React.createElement(FloatingActionButtonItem, __assign({}, element, { key: index, index: index, id: "".concat(listId, "-").concat(index), disabled: disabled || element.disabled, focused: focusedIndex === index, dataItem: element, item: item, className: classNames(element.className, getTextDirectionClass(dir || 'ltr', align.horizontal)), onClick: handleItemClick, onDown: handleItemDown })));
-    })));
-    var isIconFab = Boolean((icon || svgIcon) && !text);
-    var fabWidth = elementRef.current ? elementRef.current.offsetWidth : 0;
-    var iconWidth = 32;
-    var spacing = (fabWidth / 2) - (iconWidth / 2);
-    return (React.createElement(ZIndexContext.Provider, { value: currentZIndex },
-        React.createElement(React.Fragment, null,
-            React.createElement("button", __assign({ ref: elementRef, id: id || buttonId, role: items ? 'menubutton' : 'button', type: 'button', "aria-disabled": disabled, "aria-expanded": items ? open : undefined, "aria-haspopup": items ? true : false, "aria-label": "".concat(text || '', " floatingactionbutton"), "aria-owns": items ? listId : undefined, "aria-activedescendant": focusedIndex >= 0 && items ? "".concat(listId, "-").concat(focusedIndex) : undefined, tabIndex: getTabIndex(tabIndex, disabled), accessKey: accessKey, dir: dir, disabled: disabled, className: buttonClassNames, style: style, onClick: handleClick, onMouseDown: handleMouseDown, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: handleKeyDown }, others),
-                (icon || svgIcon) ?
-                    React.createElement(IconWrap, { className: "k-fab-icon", name: icon, icon: svgIcon }) :
-                    iconClass ?
-                        React.createElement("span", { role: "presentation", className: iconClass }) : null,
-                text && React.createElement("span", { className: "k-fab-text" }, text)),
-            modal && open && (React.createElement("div", { className: "k-overlay", style: __assign({ zIndex: currentZIndex }, overlayStyle) })),
-            React.createElement(Popup, { ref: popupRef, anchor: elementRef.current, show: open, animate: popupSettings.animate, popupClass: classNames('k-popup-transparent k-fab-popup', popupSettings.popupClass), anchorAlign: popupSettings.anchorAlign || getAnchorAlign(align, isRtl), popupAlign: popupSettings.popupAlign || getPopupAlign(align, isRtl), style: { boxShadow: 'none' } },
-                React.createElement("ul", { ref: listRef, role: 'menu', "aria-labelledby": id, id: listId, className: classNames('k-fab-items', {
-                        'k-fab-items-bottom': align.vertical !== 'bottom',
-                        'k-fab-items-top': align.vertical === 'bottom'
-                    }), style: {
-                        paddingLeft: isIconFab ? spacing : undefined,
-                        paddingRight: isIconFab ? spacing : undefined
-                    } }, fabItems)))));
-});
-FloatingActionButton.propTypes = {
-    className: PropTypes.string,
-    style: PropTypes.object,
-    id: PropTypes.string,
-    dir: PropTypes.string,
-    tabIndex: PropTypes.number,
-    accessKey: PropTypes.string,
-    disabled: PropTypes.bool,
-    icon: PropTypes.string,
-    svgIcon: svgIconPropType,
-    iconClass: PropTypes.string,
-    text: PropTypes.string,
-    alignOffset: PropTypes.shape({
-        x: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-        y: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
-    }),
-    align: PropTypes.shape({
-        vertical: PropTypes.oneOf(['top', 'middle', 'bottom']),
-        horizontal: PropTypes.oneOf(['start', 'center', 'end'])
-    }),
-    positionMode: PropTypes.oneOf(['absolute', 'fixed']),
-    size: PropTypes.oneOf([null, 'small', 'medium', 'large']),
-    rounded: PropTypes.oneOf([null, 'small', 'medium', 'large', 'full']),
-    themeColor: PropTypes.oneOf([null,
-        'primary', 'secondary', 'tertiary',
-        'info', 'success', 'warning',
-        'error', 'dark', 'light', 'inverse'
-    ]),
-    modal: PropTypes.bool,
-    overlayStyle: PropTypes.object
-};
-var defaultProps = {
-    align: { vertical: 'bottom', horizontal: 'end' },
-    size: 'medium',
-    rounded: 'full',
-    themeColor: 'primary',
-    positionMode: 'fixed'
-};
-FloatingActionButton.displayName = 'KendoFloatingActionButton';