@via-profit/ui-kit 0.3.0 → 0.4.0

package/DatePicker/index.d.ts

@@ -8,19 +8,32 @@ export type DatePickerProps = Omit<TextFieldProps, 'value' | 'onChange' | 'overr
      */
     readonly value: Date | null;
     /**
-     * Will be invoked when date would be changed
+     * Will be invoked when date would be changed.\
+     * Receives `null` when the field was cleared
      */
-    readonly onChange: (date: Date) => void;
+    readonly onChange: (date: Date | null) => void;
     /**
-     * Date template like one of format: \
-     * `dd.mm.yyyy` or `yyyy/mm/dd`, etc.\
-     * Posibility chars: `y`, `Y`, `yy`, `yyyy`, `d`, `dd`, `D`, `m`, `mm`, `M`
+     * Date template, e.g. `dd.mm.yyyy` or `yyyy-mm-dd`.\
+     * Every char of the template is one char of the field, so use the fixed width parts:
+     * `dd` — day, `mm` — month, `yyyy` — year (`yy` — two digits of the year)
      */
     readonly template: string;
     /**
-     * Tooltip text for a calendar button
+     * The label of the calendar button for screen readers and the tooltip.
+     * Also the label of the calendar popup\
+     * **Default:** `Choose date`
      */
     readonly calendarButtonTooltip?: string;
+    /**
+     * The label of the «previous» button of the calendar\
+     * **Default:** `Previous`
+     */
+    readonly prevButtonLabel?: string;
+    /**
+     * The label of the «next» button of the calendar\
+     * **Default:** `Next`
+     */
+    readonly nextButtonLabel?: string;
     /**
      * Minimum date limit
      */

package/DatePicker/index.js

@@ -49,7 +49,23 @@ const StyledMaskedField = (0, styled_1.default)(MaskedField_1.default) `
     `}
 `;
 const DatePicker = props => {
-    const { value, template, onChange, calendarButtonTooltip, readOnly, disabled, minDate = new Date(new Date().getFullYear() - 100, 0, 1, 0, 0, 0), maxDate = new Date(new Date().getFullYear() + 100, 0, 1, 0, 0, 0), weekStartDay = 'monday', locale = 'ru-RU', badges = [], displayLeadingZero = false, resetButtonLabel, todayButtonLabel: todayButtonLabelProp, toodayButtonLabel, markToday, weekDayLabelFormat, heading, subheading, view, views, footer, overrides } = props, restInputProps = __rest(props, ["value", "template", "onChange", "calendarButtonTooltip", "readOnly", "disabled", "minDate", "maxDate", "weekStartDay", "locale", "badges", "displayLeadingZero", "resetButtonLabel", "todayButtonLabel", "toodayButtonLabel", "markToday", "weekDayLabelFormat", "heading", "subheading", "view", "views", "footer", "overrides"]);
+    const { value, template, onChange, calendarButtonTooltip, readOnly, disabled, minDate: inputMinDate, maxDate: inputMaxDate, weekStartDay = 'monday', locale = 'ru-RU', badges = [], displayLeadingZero = false, resetButtonLabel, todayButtonLabel: todayButtonLabelProp, toodayButtonLabel, markToday, weekDayLabelFormat, heading, subheading, view, views, footer, overrides, prevButtonLabel, nextButtonLabel, inputRef: userInputRef } = props, restInputProps = __rest(props, ["value", "template", "onChange", "calendarButtonTooltip", "readOnly", "disabled", "minDate", "maxDate", "weekStartDay", "locale", "badges", "displayLeadingZero", "resetButtonLabel", "todayButtonLabel", "toodayButtonLabel", "markToday", "weekDayLabelFormat", "heading", "subheading", "view", "views", "footer", "overrides", "prevButtonLabel", "nextButtonLabel", "inputRef"]);
+    const calendarLabel = calendarButtonTooltip !== null && calendarButtonTooltip !== void 0 ? calendarButtonTooltip : 'Choose date';
+    // The default limits are created once, otherwise every render invalidates the memoized values
+    const minDate = react_1.default.useMemo(() => inputMinDate !== null && inputMinDate !== void 0 ? inputMinDate : new Date(new Date().getFullYear() - 100, 0, 1, 0, 0, 0), [inputMinDate]);
+    const maxDate = react_1.default.useMemo(() => inputMaxDate !== null && inputMaxDate !== void 0 ? inputMaxDate : new Date(new Date().getFullYear() + 100, 0, 1, 0, 0, 0), [inputMaxDate]);
+    const inputRef = react_1.default.useRef(null);
+    const buttonRef = react_1.default.useRef(null);
+    const popperRef = react_1.default.useRef(null);
+    const setInputRef = react_1.default.useCallback((el) => {
+        inputRef.current = el;
+        if (typeof userInputRef === 'function') {
+            userInputRef(el);
+        }
+        else if (userInputRef) {
+            userInputRef.current = el;
+        }
+    }, [userInputRef]);
     const todayButtonLabel = todayButtonLabelProp !== null && todayButtonLabelProp !== void 0 ? todayButtonLabelProp : toodayButtonLabel;
     const calendarOverrides = react_1.default.useMemo(() => {
         if (!overrides) {
@@ -97,12 +113,41 @@ const DatePicker = props => {
     }, [maxDate]);
     const handleClick = react_1.default.useCallback(() => {
         if (readOnly) {
-            setOpenSate(!isOpen);
+            setOpenSate(open => !open);
         }
-    }, [isOpen, readOnly]);
-    const endIcon = react_1.default.useMemo(() => (react_1.default.createElement(Button_1.default, { disabled: disabled, iconOnly: true, variant: "plain", type: "button", onClick: () => setOpenSate(true), title: calendarButtonTooltip },
-        react_1.default.createElement(DatePickerIcon_1.default, null))), [calendarButtonTooltip, disabled]);
+    }, [readOnly]);
+    // The keyboard focus goes to the calendar when it is opened: the selected day, today or the first one
+    react_1.default.useEffect(() => {
+        if (!isOpen)
+            return undefined;
+        const frame = requestAnimationFrame(() => {
+            var _a, _b;
+            (_b = (_a = popperRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('[data-date][tabindex="0"]')) === null || _b === void 0 ? void 0 : _b.focus();
+        });
+        return () => cancelAnimationFrame(frame);
+    }, [isOpen]);
+    const close = react_1.default.useCallback(() => {
+        var _a, _b;
+        setOpenSate(false);
+        // Back to the field, so the keyboard user continues from the same place
+        (_b = (readOnly ? inputRef.current : ((_a = buttonRef.current) !== null && _a !== void 0 ? _a : inputRef.current))) === null || _b === void 0 ? void 0 : _b.focus();
+    }, [readOnly]);
+    const handlePopperKeyDown = react_1.default.useCallback((event) => {
+        if (event.key === 'Escape') {
+            event.stopPropagation();
+            close();
+        }
+    }, [close]);
+    const endIcon = react_1.default.useMemo(() => (react_1.default.createElement(Button_1.default, { ref: buttonRef, disabled: disabled, iconOnly: true, variant: "plain", type: "button", onClick: () => setOpenSate(open => !open), title: calendarLabel, "aria-label": calendarLabel, "aria-haspopup": "dialog", "aria-expanded": isOpen },
+        react_1.default.createElement(DatePickerIcon_1.default, null))), [calendarLabel, disabled, isOpen]);
     const handleChange = react_1.default.useCallback(({ isValid, text }) => {
+        // The field was cleared: the date is reset
+        if (text.trim() === '') {
+            if (currentValue !== null) {
+                onChange(null);
+            }
+            return;
+        }
         if (isValid) {
             const parsedDate = parseInputByTemplate(text, template);
             // Trying to parse the input date value
@@ -125,6 +170,7 @@ const DatePicker = props => {
             }
         }
     }, [
+        currentValue,
         isGreatherThenMinDate,
         isLessThenMaxDate,
         maxDate,
@@ -134,15 +180,16 @@ const DatePicker = props => {
         template,
     ]);
     const calendarChange = react_1.default.useCallback(date => {
-        if (date) {
-            onChange(date);
-        }
+        var _a;
+        // null comes from the «Reset» button of the calendar
+        onChange(date !== null && date !== void 0 ? date : null);
         setOpenSate(false);
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     }, [onChange]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(StyledMaskedField, Object.assign({ onClick: handleClick, disabled: disabled, mask: getMaskByTemplate(template), ref: setTextFieldRef, readOnly: readOnly, endIcon: endIcon }, restInputProps, { value: currentValue ? formatInputByTemplate(currentValue, template) : '', onChange: handleChange, overrides: textFieldOverrides })),
-        react_1.default.createElement(ClickOutside_1.default, { onOutsideClick: () => setOpenSate(false), mouseEvent: "onMouseDown" },
-            react_1.default.createElement(Popper_1.default, { isOpen: isOpen, anchorElement: textFieldRef },
-                react_1.default.createElement(Calendar_1.default, { minDate: minDate, maxDate: maxDate, weekStartDay: weekStartDay, locale: locale, badges: badges, displayLeadingZero: displayLeadingZero, resetButtonLabel: resetButtonLabel, todayButtonLabel: todayButtonLabel, markToday: markToday, weekDayLabelFormat: weekDayLabelFormat, heading: heading, subheading: subheading, view: view, views: views, footer: footer, value: currentValue, onChange: calendarChange, overrides: calendarOverrides })))));
+        react_1.default.createElement(StyledMaskedField, Object.assign({ onClick: handleClick, disabled: disabled, mask: getMaskByTemplate(template), ref: setTextFieldRef, readOnly: readOnly, endIcon: endIcon }, restInputProps, { inputRef: setInputRef, value: currentValue ? formatInputByTemplate(currentValue, template) : '', onChange: handleChange, overrides: textFieldOverrides })),
+        react_1.default.createElement(ClickOutside_1.default, { onOutsideClick: () => setOpenSate(false), mouseEvent: "onMouseDown", ignoreElements: [textFieldRef] },
+            react_1.default.createElement(Popper_1.default, { ref: popperRef, isOpen: isOpen, anchorElement: textFieldRef, role: "dialog", "aria-label": calendarLabel, onKeyDown: handlePopperKeyDown },
+                react_1.default.createElement(Calendar_1.default, { minDate: minDate, maxDate: maxDate, weekStartDay: weekStartDay, locale: locale, badges: badges, displayLeadingZero: displayLeadingZero, resetButtonLabel: resetButtonLabel, todayButtonLabel: todayButtonLabel, markToday: markToday, weekDayLabelFormat: weekDayLabelFormat, heading: heading, subheading: subheading, view: view, views: views, footer: footer, prevButtonLabel: prevButtonLabel, nextButtonLabel: nextButtonLabel, value: currentValue, onChange: calendarChange, overrides: calendarOverrides })))));
 };
 exports.default = DatePicker;

package/Grid/index.d.ts

@@ -0,0 +1,60 @@
+import React from 'react';
+import { Spacing } from '../utils/spacing';
+export type { Spacing };
+export type GridProps = React.HTMLAttributes<HTMLDivElement> & {
+    /**
+     * The adaptive grid: as many columns as fit, every column is not narrower than this width.
+     * On a narrow screen the columns become one column by themselves, without breakpoints.\
+     * Wins over `columns`
+     */
+    readonly minColumnWidth?: string;
+    /**
+     * A number — that many equal columns, a string — the `grid-template-columns` value
+     * (e.g. `'2fr 1fr'` or `'auto 1fr'`)\
+     * **Default:** `1`
+     */
+    readonly columns?: number | string;
+    /**
+     * The gap between the cells: a step of the theme spacing scale or any CSS length\
+     * **Default:** `md`
+     */
+    readonly gap?: Spacing;
+    /**
+     * The gap between the rows, if it differs from `gap`
+     */
+    readonly rowGap?: Spacing;
+    /**
+     * The vertical alignment of the cells in a row (`align-items`)\
+     * **Default:** `stretch`
+     */
+    readonly align?: React.CSSProperties['alignItems'];
+};
+declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    /**
+     * The adaptive grid: as many columns as fit, every column is not narrower than this width.
+     * On a narrow screen the columns become one column by themselves, without breakpoints.\
+     * Wins over `columns`
+     */
+    readonly minColumnWidth?: string | undefined;
+    /**
+     * A number — that many equal columns, a string — the `grid-template-columns` value
+     * (e.g. `'2fr 1fr'` or `'auto 1fr'`)\
+     * **Default:** `1`
+     */
+    readonly columns?: string | number | undefined;
+    /**
+     * The gap between the cells: a step of the theme spacing scale or any CSS length\
+     * **Default:** `md`
+     */
+    readonly gap?: Spacing | undefined;
+    /**
+     * The gap between the rows, if it differs from `gap`
+     */
+    readonly rowGap?: Spacing | undefined;
+    /**
+     * The vertical alignment of the cells in a row (`align-items`)\
+     * **Default:** `stretch`
+     */
+    readonly align?: import("csstype").Property.AlignItems | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/Grid/index.js

@@ -0,0 +1,43 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const spacing_1 = require("../utils/spacing");
+const StyledGrid = styled_1.default.div `
+  display: grid;
+  grid-template-columns: ${({ $template }) => $template};
+  gap: ${({ theme, $gap }) => (0, spacing_1.resolveSpacing)(theme, $gap)};
+  ${({ theme, $rowGap }) => typeof $rowGap !== 'undefined' ? `row-gap: ${(0, spacing_1.resolveSpacing)(theme, $rowGap)};` : ''}
+  align-items: ${({ $align }) => $align !== null && $align !== void 0 ? $align : 'stretch'};
+  min-width: 0;
+`;
+const getTemplate = (minColumnWidth, columns) => {
+    if (minColumnWidth) {
+        // min(…, 100%): a column wider than the container does not overflow it
+        return `repeat(auto-fit, minmax(min(${minColumnWidth}, 100%), 1fr))`;
+    }
+    // minmax(0, 1fr): a long word or a wide child does not stretch its column
+    return typeof columns === 'number' ? `repeat(${columns}, minmax(0, 1fr))` : columns;
+};
+/**
+ * The grid of cells with the same gap. The children are the cells: no wrappers for the items
+ */
+const Grid = (props, ref) => {
+    const { children, minColumnWidth, columns = 1, gap = 'md', rowGap, align } = props, nativeProps = __rest(props, ["children", "minColumnWidth", "columns", "gap", "rowGap", "align"]);
+    return (react_1.default.createElement(StyledGrid, Object.assign({}, nativeProps, { "$template": getTemplate(minColumnWidth, columns), "$gap": gap, "$rowGap": rowGap, "$align": align, ref: ref }), children));
+};
+exports.default = react_1.default.forwardRef(Grid);

package/Highlighted/index.d.ts

@@ -48,7 +48,7 @@ export interface HighlightedOverrides {
      */
     readonly Mark?: React.ComponentType<HighlightedMarkProps & React.RefAttributes<HTMLElement>>;
     /**
-     * Text element (HTML <span>)regex
+     * Text element (HTML <span>)
      */
     readonly Text?: React.ComponentType<HighlightedTextProps & React.RefAttributes<HTMLSpanElement>>;
 }

package/Highlighted/index.js

@@ -29,6 +29,10 @@ const Highlighted = (props, ref) => {
     const { text, highlight, overrides, disabledHighlighting = false, caseSensitive = false } = props, nativeProps = __rest(props, ["text", "highlight", "overrides", "disabledHighlighting", "caseSensitive"]);
     const patterns = react_1.default.useMemo(() => (typeof highlight === 'string' ? [highlight] : highlight)
         .filter(h => h.trim() !== '')
+        // Longest first: the alternation takes the first matching pattern,
+        // so «star» must not win over «starfish»
+        .slice()
+        .sort((a, b) => b.length - a.length)
         .map(exports.escapeRegex), [highlight]);
     const regex = react_1.default.useMemo(() => new RegExp(`(${patterns.join('|')})`, caseSensitive ? 'g' : 'gi'), [patterns, caseSensitive]);
     const overridesMap = react_1.default.useMemo(() => ({
@@ -36,18 +40,18 @@ const Highlighted = (props, ref) => {
         Mark: (overrides === null || overrides === void 0 ? void 0 : overrides.Mark) || HighlightedMark_1.default,
         Text: (overrides === null || overrides === void 0 ? void 0 : overrides.Text) || HighlightedText_1.default,
     }), [overrides]);
-    const renderParts = react_1.default.useCallback(() => {
+    const parts = react_1.default.useMemo(() => {
         if (disabledHighlighting || patterns.length === 0) {
+            return [text];
+        }
+        // With the capturing group, split puts the matches at the odd indexes
+        return text.split(regex);
+    }, [disabledHighlighting, patterns.length, regex, text]);
+    return (react_1.default.createElement(overridesMap.Container, Object.assign({}, nativeProps, { ref: ref }), parts.map((part, i) => {
+        if (part === '') {
             return null;
         }
-        return text.split(regex).map((part, i) => {
-            const isMatch = part.match(regex) !== null;
-            return isMatch ? (react_1.default.createElement(overridesMap.Mark, { key: i }, part)) : (react_1.default.createElement(overridesMap.Text, { key: i }, part));
-        });
-    }, [disabledHighlighting, patterns.length, regex, text, overridesMap]);
-    return (react_1.default.createElement(overridesMap.Container, Object.assign({}, nativeProps, { ref: ref }),
-        disabledHighlighting && react_1.default.createElement(overridesMap.Text, null, text),
-        !disabledHighlighting && patterns.length === 0 && (react_1.default.createElement(overridesMap.Text, null, text)),
-        renderParts()));
+        return i % 2 === 1 ? (react_1.default.createElement(overridesMap.Mark, { key: i }, part)) : (react_1.default.createElement(overridesMap.Text, { key: i }, part));
+    })));
 };
 exports.default = react_1.default.forwardRef(Highlighted);

package/LoadingIndicator/LoadingOverlay.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+export interface LoadingOverlayProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Spinner diameter: a number is in pixels, a string is any CSS length (`'1em'`, `'3rem'`)\
+     * \
+     * **Default**: `'2.4em'`
+     */
+    readonly size?: number | string;
+}
+declare const _default: React.ForwardRefExoticComponent<LoadingOverlayProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/LoadingIndicator/LoadingOverlay.js

@@ -0,0 +1,63 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = __importStar(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const SpinnerCircle_1 = __importStar(require("./SpinnerCircle"));
+const Container = styled_1.default.div `
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+/**
+ * Covers the nearest positioned ancestor (`position: relative` etc.) and centers the spinner in it
+ */
+const LoadingOverlay = (props, ref) => {
+    const { size = SpinnerCircle_1.DEFAULT_SIZE } = props, nativeProps = __rest(props, ["size"]);
+    return (
+    // Announced by screen readers; the label can be replaced by the props
+    React.createElement(Container, Object.assign({ role: "status", "aria-label": "Loading" }, nativeProps, { ref: ref }),
+        React.createElement(SpinnerCircle_1.default, { "$size": (0, SpinnerCircle_1.toCssSize)(size) })));
+};
+exports.default = React.forwardRef(LoadingOverlay);

package/LoadingIndicator/Spinner.d.ts

@@ -1,6 +1,35 @@
 import * as React from 'react';
-type Props = React.HTMLAttributes<HTMLDivElement>;
-export declare const LoadingIndicator: React.ForwardRefRenderFunction<HTMLDivElement, Props>;
-export declare const StaticLoadingIndicator: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
-declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
-export default _default;
+import { LoadingOverlayProps } from './LoadingOverlay';
+export interface SpinnerProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /**
+     * Spinner diameter: a number is in pixels, a string is any CSS length (`'1em'`, `'3rem'`)\
+     * \
+     * **Default**: `'2.4em'`
+     */
+    readonly size?: number | string;
+    /**
+     * If `true`, the spinner takes all the free space of a flex parent and is centered in it
+     * (e.g. in place of an empty list). If `false`, it takes only its own size\
+     * \
+     * **Default**: `true`
+     */
+    readonly fill?: boolean;
+}
+declare const SpinnerWithRef: React.ForwardRefExoticComponent<SpinnerProps & React.RefAttributes<HTMLSpanElement>>;
+/**
+ * @deprecated Use `Spinner` instead
+ */
+export declare const StaticLoadingIndicator: React.ForwardRefExoticComponent<SpinnerProps & React.RefAttributes<HTMLSpanElement>>;
+/**
+ * @deprecated Use `SpinnerProps` instead
+ */
+export type StaticLoadingIndicatorProps = SpinnerProps;
+/**
+ * @deprecated Use `LoadingOverlay` from `@via-profit/ui-kit/LoadingIndicator` instead
+ */
+export declare const LoadingIndicator: React.ForwardRefExoticComponent<LoadingOverlayProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * @deprecated Use `LoadingOverlayProps` instead
+ */
+export type LoadingIndicatorProps = LoadingOverlayProps;
+export default SpinnerWithRef;

package/LoadingIndicator/Spinner.js

@@ -22,50 +22,61 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+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;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StaticLoadingIndicator = exports.LoadingIndicator = void 0;
+exports.LoadingIndicator = exports.StaticLoadingIndicator = void 0;
 const React = __importStar(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
 const react_1 = require("@emotion/react");
-const Container = styled_1.default.div `
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`;
-const spin = (0, react_1.keyframes) `
-    to {
-        transform: rotate(360deg);
-    }
-`;
-const SpinLoader = styled_1.default.div `
-  width: 2em;
-  height: 2em;
-  border: 0.187em solid ${({ theme }) => theme.color.surface.darken(30).toString()};
-  border-top-color: ${({ theme }) => theme.color.accentPrimary.toString()};
-  border-radius: 50%;
-  animation: ${spin} 0.8s linear infinite;
-`;
-const LoadingIndicator = (props, ref) => (React.createElement(Container, Object.assign({}, props, { ref: ref }),
-    React.createElement(SpinLoader, null)));
-exports.LoadingIndicator = LoadingIndicator;
-const StaticLoadingIndicatorContainer = styled_1.default.span `
-  height: 100%;
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  text-align: center;
+const SpinnerCircle_1 = __importStar(require("./SpinnerCircle"));
+const LoadingOverlay_1 = __importDefault(require("./LoadingOverlay"));
+const Container = styled_1.default.span `
   justify-content: center;
   align-items: center;
+  ${({ $fill }) => $fill
+    ? (0, react_1.css) `
+          height: 100%;
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+          text-align: center;
+        `
+    : (0, react_1.css) `
+          display: inline-flex;
+          vertical-align: middle;
+        `}
 `;
-exports.StaticLoadingIndicator = React.forwardRef((props, ref) => (React.createElement(StaticLoadingIndicatorContainer, Object.assign({}, props, { ref: ref }),
-    React.createElement(SpinLoader, null))));
-exports.StaticLoadingIndicator.displayName = 'StaticLoadingIndicator';
-exports.default = React.forwardRef(exports.LoadingIndicator);
+/**
+ * Inline loading spinner: takes place in the layout, e.g. inside a button, a field or a list
+ */
+const Spinner = (props, ref) => {
+    const { size = SpinnerCircle_1.DEFAULT_SIZE, fill = true } = props, nativeProps = __rest(props, ["size", "fill"]);
+    return (
+    // Announced by screen readers; the label can be replaced by the props
+    React.createElement(Container, Object.assign({ role: "status", "aria-label": "Loading" }, nativeProps, { "$fill": fill, ref: ref }),
+        React.createElement(SpinnerCircle_1.default, { "$size": (0, SpinnerCircle_1.toCssSize)(size) })));
+};
+const SpinnerWithRef = React.forwardRef(Spinner);
+SpinnerWithRef.displayName = 'Spinner';
+/**
+ * @deprecated Use `Spinner` instead
+ */
+exports.StaticLoadingIndicator = SpinnerWithRef;
+/**
+ * @deprecated Use `LoadingOverlay` from `@via-profit/ui-kit/LoadingIndicator` instead
+ */
+exports.LoadingIndicator = LoadingOverlay_1.default;
+exports.default = SpinnerWithRef;

package/LoadingIndicator/SpinnerCircle.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+export declare const DEFAULT_SIZE = "2.4em";
+export declare const toCssSize: (size: number | string) => string;
+/**
+ * The rotating circle shared by <Spinner> and <LoadingOverlay>.
+ * A span, so the spinner can be placed inside phrasing content (e.g. a button)
+ */
+declare const SpinnerCircle: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    readonly $size: string;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export default SpinnerCircle;

package/LoadingIndicator/SpinnerCircle.js

@@ -0,0 +1,34 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toCssSize = exports.DEFAULT_SIZE = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+const react_1 = require("@emotion/react");
+// The size of the spinner before the `size` property (2em plus the ring), so nothing changes
+exports.DEFAULT_SIZE = '2.4em';
+const toCssSize = (size) => (typeof size === 'number' ? `${size}px` : size);
+exports.toCssSize = toCssSize;
+const spin = (0, react_1.keyframes) `
+    to {
+        transform: rotate(360deg);
+    }
+`;
+/**
+ * The rotating circle shared by <Spinner> and <LoadingOverlay>.
+ * A span, so the spinner can be placed inside phrasing content (e.g. a button)
+ */
+const SpinnerCircle = styled_1.default.span `
+  display: block;
+  box-sizing: border-box;
+  width: ${({ $size }) => $size};
+  height: ${({ $size }) => $size};
+  /* The ring width follows the size, so the proportions stay the same */
+  border: calc(${({ $size }) => $size} * 0.08) solid
+    ${({ theme }) => theme.color.surface.darken(30).toString()};
+  border-top-color: ${({ theme }) => theme.color.accentPrimary.toString()};
+  border-radius: 50%;
+  animation: ${spin} 0.8s linear infinite;
+`;
+exports.default = SpinnerCircle;

package/LoadingIndicator/index.d.ts

@@ -1,3 +1,8 @@
-import LoadingIndicator from './Spinner';
-export * from './Spinner';
-export default LoadingIndicator;
+import Spinner from './Spinner';
+export { default as Spinner } from './Spinner';
+export type { SpinnerProps } from './Spinner';
+export { default as LoadingOverlay } from './LoadingOverlay';
+export type { LoadingOverlayProps } from './LoadingOverlay';
+export { StaticLoadingIndicator, LoadingIndicator } from './Spinner';
+export type { StaticLoadingIndicatorProps, LoadingIndicatorProps } from './Spinner';
+export default Spinner;

package/LoadingIndicator/index.js

@@ -1,22 +1,16 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.LoadingIndicator = exports.StaticLoadingIndicator = exports.LoadingOverlay = exports.Spinner = void 0;
 const Spinner_1 = __importDefault(require("./Spinner"));
-__exportStar(require("./Spinner"), exports);
+var Spinner_2 = require("./Spinner");
+Object.defineProperty(exports, "Spinner", { enumerable: true, get: function () { return __importDefault(Spinner_2).default; } });
+var LoadingOverlay_1 = require("./LoadingOverlay");
+Object.defineProperty(exports, "LoadingOverlay", { enumerable: true, get: function () { return __importDefault(LoadingOverlay_1).default; } });
+// Deprecated aliases of the previous names
+var Spinner_3 = require("./Spinner");
+Object.defineProperty(exports, "StaticLoadingIndicator", { enumerable: true, get: function () { return Spinner_3.StaticLoadingIndicator; } });
+Object.defineProperty(exports, "LoadingIndicator", { enumerable: true, get: function () { return Spinner_3.LoadingIndicator; } });
 exports.default = Spinner_1.default;

package/MaskedField/index.d.ts

@@ -13,9 +13,10 @@ export interface MaskedFieldProps extends Omit<TextFieldProps, 'value' | 'onChan
      */
     readonly mask: Mask | GetMask;
     /**
-     * Function will be called when field value was changed
+     * Function will be called when field value was changed.\
+     * `event.currentTarget.value` already contains the formatted text
      */
-    readonly onChange: (payload: FormatParsedPayload) => void;
+    readonly onChange: (payload: FormatParsedPayload, event: React.ChangeEvent<HTMLInputElement>) => void;
     /**
      * If you are not using a simple mask, you can provide a function to analyze the input value
      */