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

package/dist/npm/stepper/Stepper.js

@@ -1,227 +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);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Stepper = void 0;
-var React = require("react");
-var PropTypes = require("prop-types");
-var StepperContext_1 = require("./context/StepperContext");
-var kendo_react_common_1 = require("@progress/kendo-react-common");
-var Step_1 = require("./Step");
-var kendo_react_progressbars_1 = require("@progress/kendo-react-progressbars");
-var contants_1 = require("./contants");
-var kendo_react_common_2 = require("@progress/kendo-react-common");
-var package_metadata_1 = require("../package-metadata");
-var kendo_react_intl_1 = require("@progress/kendo-react-intl");
-var messages_1 = require("./messages");
-/**
- * Represents the [KendoReact Stepper component]({% slug overview_stepper %}).
- *
- * @example
- * ```jsx
- * const steps = [
- *    { label: 'Step 1' },
- *    { label: 'Step 2' },
- *    { label: 'Step 3', optional: true }
- * ];
- *
- * const App = () => {
- *   return (
- *       <Stepper items={steps} value={1} />
- *   );
- * };
- *    ReactDOM.render(<App />, document.querySelector('my-app'));
- * ```
- */
-exports.Stepper = React.forwardRef(function (props, target) {
-    (0, kendo_react_common_2.validatePackage)(package_metadata_1.packageMetadata);
-    var animationDuration = props.animationDuration, children = props.children, className = props.className, disabled = props.disabled, errorIcon = props.errorIcon, errorSVGIcon = props.errorSVGIcon, item = props.item, items = props.items, linear = props.linear, mode = props.mode, orientation = props.orientation, style = props.style, successIcon = props.successIcon, successSVGIcon = props.successSVGIcon, onChange = props.onChange, onFocus = props.onFocus;
-    var localizationService = (0, kendo_react_intl_1.useLocalization)();
-    var pbAriaLabel = localizationService.toLanguageString(messages_1.progBarAriaLabel, messages_1.messages[messages_1.progBarAriaLabel]);
-    var elementRef = React.useRef(null);
-    var focusElement = React.useCallback(function () {
-        if (elementRef.current) {
-            (0, kendo_react_common_1.focusFirstFocusableChild)(elementRef.current);
-        }
-    }, []);
-    var getImperativeHandle = React.useCallback(function () { return ({
-        element: elementRef.current,
-        focus: focusElement
-    }); }, [focusElement]);
-    React.useImperativeHandle(target, getImperativeHandle);
-    var value = props.value || defaultProps.value;
-    var _a = React.useState(value), focusedIdx = _a[0], setFocusedIdx = _a[1];
-    var numOfSteps = items ? items.length : 0;
-    var isVertical = orientation === 'vertical';
-    var dir = (0, kendo_react_common_1.useRtl)(elementRef, props.dir);
-    var animation = typeof animationDuration === 'number'
-        ? animationDuration
-        : animationDuration !== false
-            ? contants_1.DEFAULT_ANIMATION_DURATION
-            : contants_1.NO_ANIMATION;
-    React.useEffect(function () {
-        setFocusedIdx(value);
-    }, [value]);
-    var dispatchChangeEvent = React.useCallback(function (event, val) {
-        var prevIdx = val === value - 1;
-        var currIdx = val === value;
-        var nextIdx = val === value + 1;
-        var allowClick = !linear || (prevIdx || currIdx || nextIdx);
-        if (value !== val && onChange && !disabled && allowClick) {
-            (0, kendo_react_common_1.dispatchEvent)(onChange, event, getImperativeHandle(), { value: val });
-            setFocusedIdx(val);
-        }
-    }, [value, linear, onChange, disabled, setFocusedIdx]);
-    var handleChange = React.useCallback(function (event) {
-        var currentValue = event.value;
-        var syntethicEvent = event.syntheticEvent;
-        dispatchChangeEvent(syntethicEvent, currentValue);
-    }, [dispatchChangeEvent]);
-    var handleFocus = React.useCallback(function (event) {
-        if (onFocus && !disabled) {
-            (0, kendo_react_common_1.dispatchEvent)(onFocus, event.syntheticEvent, getImperativeHandle(), undefined);
-        }
-    }, [onFocus, disabled]);
-    var handleEnter = React.useCallback(function (event) {
-        dispatchChangeEvent(event, focusedIdx);
-    }, [dispatchChangeEvent, focusedIdx]);
-    var handleKeyDown = React.useCallback(function (event) {
-        var isRtl = dir === 'rtl';
-        var currIndex = focusedIdx;
-        var maxNavIndex = items.length - 1;
-        switch (event.keyCode) {
-            case kendo_react_common_1.Keys.left:
-                event.preventDefault();
-                if (!isRtl && currIndex > 0) {
-                    setFocusedIdx(currIndex - 1);
-                }
-                if (isRtl && currIndex < maxNavIndex) {
-                    setFocusedIdx(currIndex + 1);
-                }
-                break;
-            case kendo_react_common_1.Keys.right:
-                event.preventDefault();
-                if (!isRtl && currIndex < maxNavIndex) {
-                    setFocusedIdx(currIndex + 1);
-                }
-                if (isRtl && currIndex > 0) {
-                    setFocusedIdx(currIndex - 1);
-                }
-                break;
-            case kendo_react_common_1.Keys.up:
-                event.preventDefault();
-                if (!isRtl && currIndex > 0) {
-                    setFocusedIdx(currIndex - 1);
-                }
-                if (isRtl && currIndex > 0) {
-                    setFocusedIdx(currIndex - 1);
-                }
-                break;
-            case kendo_react_common_1.Keys.down:
-                event.preventDefault();
-                if (!isRtl && currIndex < maxNavIndex) {
-                    setFocusedIdx(currIndex + 1);
-                }
-                if (isRtl && currIndex < maxNavIndex) {
-                    setFocusedIdx(currIndex + 1);
-                }
-                break;
-            case kendo_react_common_1.Keys.home:
-                event.preventDefault();
-                setFocusedIdx(0);
-                break;
-            case kendo_react_common_1.Keys.end:
-                event.preventDefault();
-                setFocusedIdx(maxNavIndex);
-                break;
-            case kendo_react_common_1.Keys.space:
-                event.preventDefault();
-                break;
-            case kendo_react_common_1.Keys.enter:
-                event.preventDefault();
-                if (!items[currIndex].disabled) {
-                    handleEnter(event);
-                }
-                break;
-            default:
-        }
-    }, [items, setFocusedIdx, focusedIdx, dir, handleEnter]);
-    var stepperClasses = React.useMemo(function () { return (0, kendo_react_common_1.classNames)('k-stepper', {
-        'k-stepper-linear': linear
-    }, className); }, [linear, className]);
-    var stepperStyles = React.useMemo(function () { return (__assign({ display: 'grid', gridTemplateColumns: !isVertical ? 'repeat(' + numOfSteps * 2 + ', 1fr)' : undefined, gridTemplateRows: isVertical ? 'repeat(' + numOfSteps + ', 1fr)' : undefined }, style)); }, [isVertical, numOfSteps, style]);
-    var listClasses = React.useMemo(function () { return (0, kendo_react_common_1.classNames)('k-step-list', {
-        'k-step-list-horizontal': !isVertical,
-        'k-step-list-vertical': isVertical
-    }); }, [isVertical]);
-    var listStyles = React.useMemo(function () { return ({
-        gridColumnStart: !isVertical ? 1 : undefined,
-        gridColumnEnd: !isVertical ? -1 : undefined,
-        gridRowStart: isVertical ? 1 : undefined,
-        gridRowEnd: isVertical ? -1 : undefined
-    }); }, [isVertical]);
-    var progressbarStyles = React.useMemo(function () { return ({
-        gridColumnStart: !isVertical ? 2 : undefined,
-        gridColumnEnd: !isVertical ? numOfSteps * 2 : undefined,
-        gridRowStart: isVertical ? 1 : undefined,
-        gridRowEnd: isVertical ? numOfSteps : undefined,
-        top: isVertical ? 17 : undefined
-    }); }, [isVertical, numOfSteps]);
-    var steps = (items && (items.map(function (element, index) {
-        var stepProps = __assign({ index: index, disabled: disabled || element.disabled, focused: index === focusedIdx, current: index === value }, element);
-        var ItemComp = item || Step_1.Step;
-        return (React.createElement(ItemComp, __assign({ key: index }, stepProps)));
-    })));
-    return (React.createElement(StepperContext_1.StepperContext.Provider, { value: {
-            animationDuration: animationDuration,
-            isVertical: isVertical,
-            item: item,
-            linear: linear,
-            mode: mode,
-            numOfSteps: numOfSteps,
-            value: value,
-            successIcon: successIcon,
-            successSVGIcon: successSVGIcon,
-            errorIcon: errorIcon,
-            errorSVGIcon: errorSVGIcon,
-            onChange: handleChange,
-            onFocus: handleFocus
-        } },
-        React.createElement("nav", { className: stepperClasses, style: stepperStyles, dir: dir, onKeyDown: handleKeyDown },
-            React.createElement("ol", { className: listClasses, style: listStyles }, steps ? steps : children),
-            React.createElement(kendo_react_progressbars_1.ProgressBar, { style: progressbarStyles, animation: { duration: animation }, ariaLabel: pbAriaLabel, "aria-hidden": true, max: numOfSteps - 1, labelVisible: false, orientation: orientation, reverse: orientation === 'vertical', value: value, disabled: disabled, tabIndex: -1 }))));
-});
-exports.Stepper.propTypes = {
-    animationDuration: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
-    children: PropTypes.any,
-    className: PropTypes.string,
-    dir: PropTypes.string,
-    disabled: PropTypes.bool,
-    errorIcon: PropTypes.string,
-    errorSVGIcon: kendo_react_common_1.svgIconPropType,
-    item: PropTypes.any,
-    items: PropTypes.any,
-    linear: PropTypes.bool,
-    mode: PropTypes.oneOf(['steps', 'labels']),
-    orientation: PropTypes.oneOf(['horizontal', 'vertical']),
-    style: PropTypes.object,
-    successIcon: PropTypes.string,
-    successSVGIcon: kendo_react_common_1.svgIconPropType,
-    value: PropTypes.number.isRequired,
-    onChange: PropTypes.func,
-    onFocus: PropTypes.func
-};
-var defaultProps = {
-    value: 0
-};
-exports.Stepper.defaultProps = defaultProps;
-exports.Stepper.displayName = 'KendoStepper';

package/dist/npm/stepper/contants.d.ts

@@ -1,8 +0,0 @@
-/**
- * @hidden
- */
-export declare const DEFAULT_ANIMATION_DURATION = 400;
-/**
- * @hidden
- */
-export declare const NO_ANIMATION = 0;

package/dist/npm/stepper/contants.js

@@ -1,11 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.NO_ANIMATION = exports.DEFAULT_ANIMATION_DURATION = void 0;
-/**
- * @hidden
- */
-exports.DEFAULT_ANIMATION_DURATION = 400;
-/**
- * @hidden
- */
-exports.NO_ANIMATION = 0;

package/dist/npm/stepper/context/StepperContext.d.ts

@@ -1,23 +0,0 @@
-import * as React from 'react';
-import { StepProps } from '../interfaces/StepProps';
-import { StepChangeEvent } from '../interfaces/StepChangeEvent';
-import { StepFocusEvent } from '../interfaces/StepFocusEvent';
-import { SVGIcon } from '@progress/kendo-react-common';
-/** @hidden */
-export declare type StepperContextType = {
-    animationDuration?: number | boolean;
-    isVertical?: boolean;
-    item?: React.ComponentType<StepProps>;
-    linear?: boolean;
-    mode?: 'steps' | 'labels';
-    numOfSteps?: number;
-    value: number;
-    successIcon?: string;
-    errorIcon?: string;
-    successSVGIcon?: SVGIcon;
-    errorSVGIcon?: SVGIcon;
-    onChange?: (event: StepChangeEvent) => void;
-    onFocus?: (event: StepFocusEvent) => void;
-};
-/** @hidden */
-export declare const StepperContext: React.Context<StepperContextType>;

package/dist/npm/stepper/context/StepperContext.js

@@ -1,14 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.StepperContext = void 0;
-var React = require("react");
-/**
- * @hidden
- */
-var defaultContext = {
-    linear: false,
-    mode: 'steps',
-    value: 0
-};
-/** @hidden */
-exports.StepperContext = React.createContext(defaultContext);

package/dist/npm/stepper/interfaces/StepChangeEvent.d.ts

@@ -1,11 +0,0 @@
-import { StepHandle } from './StepHandle';
-import { BaseEvent } from '@progress/kendo-react-common';
-/**
- * The arguments for the `onChange` Step event.
- */
-export interface StepChangeEvent extends BaseEvent<StepHandle> {
-    /**
-     * The index of the selected Step.
-     */
-    value: number;
-}

package/dist/npm/stepper/interfaces/StepChangeEvent.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

package/dist/npm/stepper/interfaces/StepFocusEvent.d.ts

@@ -1,7 +0,0 @@
-import { StepHandle } from './StepHandle';
-import { BaseEvent } from '@progress/kendo-react-common';
-/**
- * The arguments for the `onFocus` Step event.
- */
-export interface StepFocusEvent extends BaseEvent<StepHandle> {
-}

package/dist/npm/stepper/interfaces/StepFocusEvent.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

package/dist/npm/stepper/interfaces/StepHandle.d.ts

@@ -1,13 +0,0 @@
-/**
- * The Step ref.
- */
-export interface StepHandle {
-    /**
-     * The Step element.
-     */
-    element: HTMLLIElement | null;
-    /**
-     * Focus the Step.
-     */
-    focus: () => void;
-}

package/dist/npm/stepper/interfaces/StepHandle.js

@@ -1,5 +0,0 @@
-"use strict";
-/**
- * The Step ref.
- */
-Object.defineProperty(exports, "__esModule", { value: true });

package/dist/npm/stepper/interfaces/StepProps.d.ts

@@ -1,79 +0,0 @@
-import { SVGIcon } from '@progress/kendo-react-common';
-import * as React from 'react';
-/**
- * Represents the props of the [KendoReact Step component]({% slug overview_stepper %}).
- */
-export interface StepProps {
-    /**
-     * Represents the children that are passed to the Step.
-     */
-    children?: any;
-    /**
-     * Specifies a list of CSS classes that will be added to the Step element.
-     */
-    className?: string;
-    /**
-     * Represents the content that will be rendered inside each Step.
-     *
-     * @hidden
-     */
-    content?: any;
-    /**
-     * Specifies the current Step.
-     */
-    current?: boolean;
-    /**
-     * Sets a custom property.
-     */
-    [customProp: string]: any;
-    /**
-     * Specifies if the Step is disabled
-     * ([see example]({% slug display_modes_stepper %})).
-     */
-    disabled?: boolean;
-    /**
-     * Defines the name for an existing icon in a KendoReact theme.
-     * The icon is rendered inside the Step indicator by a `span.k-icon` element
-     * ([see example]({% slug display_modes_stepper %})).
-     */
-    icon?: string;
-    /**
-     * Defines the SVG icon.
-     * The icon is rendered inside the Step indicator
-     * ([see example]({% slug display_modes_stepper %})).
-     */
-    svgIcon?: SVGIcon;
-    /**
-     * Sets the index of the Step that is used to identify it.
-     */
-    index?: number;
-    /**
-     * Specifies the validity of the step
-     * ([see example]({% slug display_modes_stepper %})).
-     */
-    isValid?: boolean;
-    /**
-     * Specifies the label of the Step
-     * ([see example]({% slug display_modes_stepper %})).
-     */
-    label?: string;
-    /**
-     * Specifies if the step is optional. The validation is not applied to these steps
-     * ([see example]({% slug display_modes_stepper %})).
-     */
-    optional?: boolean;
-    /**
-     * Sets additional CSS styles to the Step.
-     */
-    style?: React.CSSProperties;
-    /**
-     * Sets the `tabIndex` property of the Step.
-     * Defaults to `0`.
-     */
-    tabIndex?: number;
-    /**
-     * Specifies the text content of the Step indicator
-     * ([see example]({% slug display_modes_stepper %})).
-     */
-    text?: string;
-}

package/dist/npm/stepper/interfaces/StepProps.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

package/dist/npm/stepper/interfaces/StepperChangeEvent.d.ts

@@ -1,11 +0,0 @@
-import { StepperHandle } from '../interfaces/StepperHandle';
-import { BaseEvent } from '@progress/kendo-react-common';
-/**
- * The arguments for the `onChange` Stepper event.
- */
-export interface StepperChangeEvent extends BaseEvent<StepperHandle> {
-    /**
-     * The index of the selected Step.
-     */
-    value: number;
-}

package/dist/npm/stepper/interfaces/StepperChangeEvent.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

package/dist/npm/stepper/interfaces/StepperFocusEvent.d.ts

@@ -1,7 +0,0 @@
-import { StepperHandle } from '../interfaces/StepperHandle';
-import { BaseEvent } from '@progress/kendo-react-common';
-/**
- * The arguments for the `onFocus` Stepper event.
- */
-export interface StepperFocusEvent extends BaseEvent<StepperHandle> {
-}

package/dist/npm/stepper/interfaces/StepperFocusEvent.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

package/dist/npm/stepper/interfaces/StepperHandle.d.ts

@@ -1,13 +0,0 @@
-/**
- * The Stepper ref.
- */
-export interface StepperHandle {
-    /**
-     * The Stepper element.
-     */
-    element: HTMLMenuElement | null;
-    /**
-     * Focus the Stepper's first focusable child.
-     */
-    focus: () => void;
-}

package/dist/npm/stepper/interfaces/StepperHandle.js

@@ -1,5 +0,0 @@
-"use strict";
-/**
- * The Stepper ref.
- */
-Object.defineProperty(exports, "__esModule", { value: true });

package/dist/npm/stepper/interfaces/StepperOnNavigateEvent.d.ts

@@ -1,26 +0,0 @@
-/// <reference types="react" />
-import { BaseEvent } from '@progress/kendo-react-common';
-import { StepperHandle } from './../interfaces/StepperHandle';
-/**
- * The `StepperOnNavigateEvent` event.
- */
-export declare class StepperOnNavigateEvent implements BaseEvent<StepperHandle> {
-    /**
-     * The Stepper component.
-     */
-    target: StepperHandle;
-    syntheticEvent: React.KeyboardEvent;
-    nativeEvent: any;
-    /**
-     * The previous index of the Step.
-     */
-    prevIndex: number;
-    /**
-     * The new index of the Step.
-     */
-    nextIndex: number;
-    /**
-     * @hidden
-     */
-    constructor(target: StepperHandle, prevIndex: number, nextIndex: number);
-}

package/dist/npm/stepper/interfaces/StepperOnNavigateEvent.js

@@ -1,19 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.StepperOnNavigateEvent = void 0;
-/**
- * The `StepperOnNavigateEvent` event.
- */
-var StepperOnNavigateEvent = /** @class */ (function () {
-    /**
-     * @hidden
-     */
-    function StepperOnNavigateEvent(target, prevIndex, nextIndex) {
-        this.syntheticEvent = null;
-        this.target = target;
-        this.prevIndex = prevIndex;
-        this.nextIndex = nextIndex;
-    }
-    return StepperOnNavigateEvent;
-}());
-exports.StepperOnNavigateEvent = StepperOnNavigateEvent;

package/dist/npm/stepper/interfaces/StepperProps.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

package/dist/npm/stepper/messages/index.d.ts

@@ -1,15 +0,0 @@
-/**
- * @hidden
- */
-export declare const optionalText = "stepper.optionalText";
-/**
- * @hidden
- */
-export declare const progBarAriaLabel = "stepper.progBarAriaLabel";
-/**
- * @hidden
- */
-export declare const messages: {
-    "stepper.optionalText": string;
-    "stepper.progBarAriaLabel": string;
-};

package/dist/npm/stepper/messages/index.js

@@ -1,19 +0,0 @@
-"use strict";
-var _a;
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.messages = exports.progBarAriaLabel = exports.optionalText = void 0;
-/**
- * @hidden
- */
-exports.optionalText = 'stepper.optionalText';
-/**
- * @hidden
- */
-exports.progBarAriaLabel = 'stepper.progBarAriaLabel';
-/**
- * @hidden
- */
-exports.messages = (_a = {},
-    _a[exports.optionalText] = '(Optional)',
-    _a[exports.progBarAriaLabel] = 'progressbar',
-    _a);