@sap-ux/ui-components 1.8.0 → 1.8.2

package/dist/components/UIContextualMenu/index.d.ts

@@ -1,3 +1,3 @@
-export * from './UIContextualMenu';
-export * from './UIHighlightMenuOption';
+export * from './UIContextualMenu';
+export * from './UIHighlightMenuOption';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/UIContextualMenu/index.js

@@ -1,19 +1,19 @@
-"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);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./UIContextualMenu"), exports);
-__exportStar(require("./UIHighlightMenuOption"), exports);
+"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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./UIContextualMenu"), exports);
+__exportStar(require("./UIHighlightMenuOption"), exports);
 //# sourceMappingURL=index.js.map

package/dist/components/UIDatePicker/UIDatePicker.d.ts

@@ -1,50 +1,50 @@
-import React from 'react';
-import type { ITextField } from '../UIInput';
-import './UIDatePicker.scss';
-export type UIDatePickerProps = {
-    componentRef?: React.RefObject<ITextField>;
-    errorMessage?: string | JSX.Element;
-    defaultValue?: string;
-    dateOnly?: boolean;
-    onChange?: (event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue: string) => void;
-    onKeyDown?: (event: React.KeyboardEvent) => void;
-    onClick?: (event: React.MouseEvent) => void;
-};
-/**
- * UIDatePicker component.
- *
- * @exports
- * @class {UIDatePicker}
- * @extends {React.Component<UIDatePickerProps>}
- */
-export declare class UIDatePicker extends React.Component<UIDatePickerProps> {
-    state: {
-        value: string;
-    };
-    private readonly dateRegex;
-    private readonly dateTimeRegex;
-    /**
-     * Initializes component properties.
-     *
-     * @param {UIDatePickerProps} props
-     */
-    constructor(props: UIDatePickerProps);
-    /**
-     * On input change event.
-     *
-     * @param {React.FormEvent<HTMLInputElement | HTMLTextAreaElement>} e
-     * @param {string} newValue
-     */
-    private onInputChange;
-    /**
-     * On Date picker change.
-     *
-     * @param {React.FormEvent<HTMLInputElement | HTMLTextAreaElement>} e
-     */
-    private onPickerChange;
-    /**
-     * @returns {JSX.Element}
-     */
-    render(): JSX.Element;
-}
+import React from 'react';
+import type { ITextField } from '../UIInput';
+import './UIDatePicker.scss';
+export type UIDatePickerProps = {
+    componentRef?: React.RefObject<ITextField>;
+    errorMessage?: string | JSX.Element;
+    defaultValue?: string;
+    dateOnly?: boolean;
+    onChange?: (event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue: string) => void;
+    onKeyDown?: (event: React.KeyboardEvent) => void;
+    onClick?: (event: React.MouseEvent) => void;
+};
+/**
+ * UIDatePicker component.
+ *
+ * @exports
+ * @class {UIDatePicker}
+ * @extends {React.Component<UIDatePickerProps>}
+ */
+export declare class UIDatePicker extends React.Component<UIDatePickerProps> {
+    state: {
+        value: string;
+    };
+    private readonly dateRegex;
+    private readonly dateTimeRegex;
+    /**
+     * Initializes component properties.
+     *
+     * @param {UIDatePickerProps} props
+     */
+    constructor(props: UIDatePickerProps);
+    /**
+     * On input change event.
+     *
+     * @param {React.FormEvent<HTMLInputElement | HTMLTextAreaElement>} e
+     * @param {string} newValue
+     */
+    private onInputChange;
+    /**
+     * On Date picker change.
+     *
+     * @param {React.FormEvent<HTMLInputElement | HTMLTextAreaElement>} e
+     */
+    private onPickerChange;
+    /**
+     * @returns {JSX.Element}
+     */
+    render(): JSX.Element;
+}
 //# sourceMappingURL=UIDatePicker.d.ts.map

package/dist/components/UIDatePicker/UIDatePicker.js

@@ -1,73 +1,73 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.UIDatePicker = void 0;
-const react_1 = __importDefault(require("react"));
-const UIInput_1 = require("../UIInput");
-const UIIcon_1 = require("../UIIcon");
-const Icons_1 = require("../Icons");
-require("./UIDatePicker.scss");
-/**
- * UIDatePicker component.
- *
- * @exports
- * @class {UIDatePicker}
- * @extends {React.Component<UIDatePickerProps>}
- */
-class UIDatePicker extends react_1.default.Component {
-    /**
-     * Initializes component properties.
-     *
-     * @param {UIDatePickerProps} props
-     */
-    constructor(props) {
-        super(props);
-        this.state = {
-            value: ''
-        };
-        this.dateRegex = /^\d{4}-\d{2}-\d{2}$/;
-        this.dateTimeRegex = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}$/;
-        this.state.value = props.defaultValue || '';
-        this.onInputChange = this.onInputChange.bind(this);
-        this.onPickerChange = this.onPickerChange.bind(this);
-    }
-    /**
-     * On input change event.
-     *
-     * @param {React.FormEvent<HTMLInputElement | HTMLTextAreaElement>} e
-     * @param {string} newValue
-     */
-    onInputChange(e, newValue = '') {
-        newValue = newValue.trim();
-        this.props.onChange?.(e, newValue);
-        this.setState({ value: newValue });
-    }
-    /**
-     * On Date picker change.
-     *
-     * @param {React.FormEvent<HTMLInputElement | HTMLTextAreaElement>} e
-     */
-    onPickerChange(e) {
-        let newValue = e.target.value;
-        if (!this.props.dateOnly && !this.dateTimeRegex.test(newValue)) {
-            newValue = `${e.target.value}:00`;
-        }
-        this.props.onChange?.(e, newValue);
-        this.setState({ value: newValue });
-    }
-    /**
-     * @returns {JSX.Element}
-     */
-    render() {
-        const isFormat = this.dateRegex.test(this.state.value) || this.dateTimeRegex.test(this.state.value);
-        return (react_1.default.createElement("div", { className: "ui-DatePicker", onKeyDown: this.props.onKeyDown, onClick: this.props.onClick },
-            react_1.default.createElement(UIInput_1.UITextInput, { componentRef: this.props.componentRef, errorMessage: this.props.errorMessage, value: this.state.value, onChange: this.onInputChange }),
-            react_1.default.createElement("div", { className: "ui-DatePicker-toggle" },
-                react_1.default.createElement(UIIcon_1.UIIcon, { iconName: Icons_1.UiIcons.Calendar }),
-                react_1.default.createElement("input", { type: this.props.dateOnly ? 'date' : 'datetime-local', step: "1", value: isFormat ? this.state.value : '', onChange: this.onPickerChange }))));
-    }
-}
-exports.UIDatePicker = UIDatePicker;
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UIDatePicker = void 0;
+const react_1 = __importDefault(require("react"));
+const UIInput_1 = require("../UIInput");
+const UIIcon_1 = require("../UIIcon");
+const Icons_1 = require("../Icons");
+require("./UIDatePicker.scss");
+/**
+ * UIDatePicker component.
+ *
+ * @exports
+ * @class {UIDatePicker}
+ * @extends {React.Component<UIDatePickerProps>}
+ */
+class UIDatePicker extends react_1.default.Component {
+    /**
+     * Initializes component properties.
+     *
+     * @param {UIDatePickerProps} props
+     */
+    constructor(props) {
+        super(props);
+        this.state = {
+            value: ''
+        };
+        this.dateRegex = /^\d{4}-\d{2}-\d{2}$/;
+        this.dateTimeRegex = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}$/;
+        this.state.value = props.defaultValue || '';
+        this.onInputChange = this.onInputChange.bind(this);
+        this.onPickerChange = this.onPickerChange.bind(this);
+    }
+    /**
+     * On input change event.
+     *
+     * @param {React.FormEvent<HTMLInputElement | HTMLTextAreaElement>} e
+     * @param {string} newValue
+     */
+    onInputChange(e, newValue = '') {
+        newValue = newValue.trim();
+        this.props.onChange?.(e, newValue);
+        this.setState({ value: newValue });
+    }
+    /**
+     * On Date picker change.
+     *
+     * @param {React.FormEvent<HTMLInputElement | HTMLTextAreaElement>} e
+     */
+    onPickerChange(e) {
+        let newValue = e.target.value;
+        if (!this.props.dateOnly && !this.dateTimeRegex.test(newValue)) {
+            newValue = `${e.target.value}:00`;
+        }
+        this.props.onChange?.(e, newValue);
+        this.setState({ value: newValue });
+    }
+    /**
+     * @returns {JSX.Element}
+     */
+    render() {
+        const isFormat = this.dateRegex.test(this.state.value) || this.dateTimeRegex.test(this.state.value);
+        return (react_1.default.createElement("div", { className: "ui-DatePicker", onKeyDown: this.props.onKeyDown, onClick: this.props.onClick },
+            react_1.default.createElement(UIInput_1.UITextInput, { componentRef: this.props.componentRef, errorMessage: this.props.errorMessage, value: this.state.value, onChange: this.onInputChange }),
+            react_1.default.createElement("div", { className: "ui-DatePicker-toggle" },
+                react_1.default.createElement(UIIcon_1.UIIcon, { iconName: Icons_1.UiIcons.Calendar }),
+                react_1.default.createElement("input", { type: this.props.dateOnly ? 'date' : 'datetime-local', step: "1", value: isFormat ? this.state.value : '', onChange: this.onPickerChange }))));
+    }
+}
+exports.UIDatePicker = UIDatePicker;
 //# sourceMappingURL=UIDatePicker.js.map

package/dist/components/UIDatePicker/UIDatePicker.scss

@@ -1,38 +1,38 @@
-.ui-DatePicker {
-    display: flex;
-    align-items: center;
-    height: 24px;
-    max-height: 24px;
-    min-height: 24px;
-    margin: 0;
-}
-
-.ui-DatePicker-toggle {
-    position: relative;
-    margin-left: 10px;
-
-    input {
-        position: absolute;
-        left: 0;
-        top: 0;
-        width: 100%;
-        height: 100%;
-        opacity: 0;
-        cursor: pointer;
-
-        &::-webkit-calendar-picker-indicator {
-            position: absolute;
-            left: 0;
-            top: 0;
-            width: 100%;
-            height: 100%;
-            margin: 0;
-            padding: 0;
-            cursor: pointer;
-        }
-    }
-}
-
-body[data-vscode-theme-kind='vscode-dark'] .ui-DatePicker-toggle input {
-    color-scheme: dark;
-}
+.ui-DatePicker {
+    display: flex;
+    align-items: center;
+    height: 24px;
+    max-height: 24px;
+    min-height: 24px;
+    margin: 0;
+}
+
+.ui-DatePicker-toggle {
+    position: relative;
+    margin-left: 10px;
+
+    input {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        opacity: 0;
+        cursor: pointer;
+
+        &::-webkit-calendar-picker-indicator {
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            margin: 0;
+            padding: 0;
+            cursor: pointer;
+        }
+    }
+}
+
+body[data-vscode-theme-kind='vscode-dark'] .ui-DatePicker-toggle input {
+    color-scheme: dark;
+}

package/dist/components/UIDatePicker/index.d.ts

@@ -1,2 +1,2 @@
-export * from './UIDatePicker';
+export * from './UIDatePicker';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/UIDatePicker/index.js

@@ -1,18 +1,18 @@
-"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);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./UIDatePicker"), exports);
+"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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./UIDatePicker"), exports);
 //# sourceMappingURL=index.js.map

package/dist/components/UIDialog/UIDialog.d.ts

@@ -1,117 +1,117 @@
-import React from 'react';
-import type { IDialogProps } from '@fluentui/react';
-interface ComponentProps {
-    acceptButtonText?: string;
-    cancelButtonText?: string;
-    acceptButtonId?: string;
-    cancelButtonId?: string;
-    onAccept?: () => void;
-    onCancel?: () => void;
-    scrollArea?: UIDialogScrollArea;
-    closeButtonVisible?: boolean;
-    footer?: React.ReactElement;
-    multiLineTitle?: boolean;
-    isOpenAnimated?: boolean;
-}
-export declare const DIALOG_MAX_HEIGHT_OFFSET = 32;
-export declare const DIALOG_STYLES: {
-    background: string;
-    boxShadow: string;
-    borderColor: string;
-    vPadding: number;
-    vPaddingHalf: number;
-    hPadding: number;
-    title: {
-        color: string;
-    };
-    contentText: {
-        fontSize: number;
-        color: string;
-        fontFamily: string;
-    };
-};
-export type DialogProps = IDialogProps & ComponentProps;
-export interface DialogState {
-    resizeMaxHeight?: number;
-    isMounted?: boolean;
-}
-export declare enum UIDialogScrollArea {
-    Content = "Content",
-    Dialog = "Dialog"
-}
-/**
- * UIDialog component.
- * based on https://developer.microsoft.com/en-us/fluentui#/controls/web/dialog
- * and https://app.abstract.com/projects/42046ab5-889d-4a59-88e6-1089e98cba67/branches/master/commits/f1fcd77447bb2b32aab3498311c1c39517e47e49/files/1455D538-559B-48EF-8D9F-1C2884ED540B/layers/AFDAAFD3-BFA6-4E96-BB6D-057DD13753E5
- *
- * @exports
- * @class UIDialog
- * @extends {React.Component<IDialogProps, {}>}
- */
-export declare class UIDialog extends React.Component<DialogProps, DialogState> {
-    static defaultProps: {
-        isOpenAnimated: boolean;
-    };
-    /**
-     * Initializes component properties.
-     *
-     * @param {DialogProps} props
-     */
-    constructor(props: DialogProps);
-    /**
-     * Called when component is rerendered.
-     *
-     * @param {Readonly<DialogProps>} prevProps
-     */
-    componentDidUpdate(prevProps: Readonly<DialogProps>): void;
-    /**
-     * Method handles modal dialog mount event.
-     */
-    private onModalLayerMount;
-    /**
-     * Method handles modal dialog unmount event.
-     */
-    private onModalLayerUnmount;
-    /**
-     * Method attaches to window resize event.
-     */
-    private attachResize;
-    /**
-     * Method detaches from window resize event.
-     */
-    private detachResize;
-    /**
-     * Method handles window resizer event to update calculation for content scrollarea size.
-     */
-    private onResize;
-    /**
-     * Method returns maximal height for dialog content "scrollArea=Content" mode.
-     *
-     * @returns {number} Max size of dialog.
-     */
-    private getResizeMaxHeight;
-    /**
-     * Method returns footer element depending in component props.
-     * Three states.
-     * 1. Accept/Decline buttons.
-     * 2. Custom content of footer.
-     * 3. No footer.
-     *
-     * @returns {JSX.Element | null} Footer element to render.
-     */
-    getFooter(): JSX.Element | undefined;
-    /**
-     * Method handles mousedown event for dialog header area.
-     * Method added to handle scenario when we open dropdown menu and move dialog.
-     * Code in method sets focus to focuszone's placeholder - it triggers close for opened dropdown menu.
-     *
-     * @param {React.MouseEvent} event Mousedown event
-     */
-    onHeaderMouseDown(event: React.MouseEvent): void;
-    /**
-     * @returns {JSX.Element}
-     */
-    render(): JSX.Element;
-}
-export {};
+import React from 'react';
+import type { IDialogProps } from '@fluentui/react';
+interface ComponentProps {
+    acceptButtonText?: string;
+    cancelButtonText?: string;
+    acceptButtonId?: string;
+    cancelButtonId?: string;
+    onAccept?: () => void;
+    onCancel?: () => void;
+    scrollArea?: UIDialogScrollArea;
+    closeButtonVisible?: boolean;
+    footer?: React.ReactElement;
+    multiLineTitle?: boolean;
+    isOpenAnimated?: boolean;
+}
+export declare const DIALOG_MAX_HEIGHT_OFFSET = 32;
+export declare const DIALOG_STYLES: {
+    background: string;
+    boxShadow: string;
+    borderColor: string;
+    vPadding: number;
+    vPaddingHalf: number;
+    hPadding: number;
+    title: {
+        color: string;
+    };
+    contentText: {
+        fontSize: number;
+        color: string;
+        fontFamily: string;
+    };
+};
+export type DialogProps = IDialogProps & ComponentProps;
+export interface DialogState {
+    resizeMaxHeight?: number;
+    isMounted?: boolean;
+}
+export declare enum UIDialogScrollArea {
+    Content = "Content",
+    Dialog = "Dialog"
+}
+/**
+ * UIDialog component.
+ * based on https://developer.microsoft.com/en-us/fluentui#/controls/web/dialog
+ * and https://app.abstract.com/projects/42046ab5-889d-4a59-88e6-1089e98cba67/branches/master/commits/f1fcd77447bb2b32aab3498311c1c39517e47e49/files/1455D538-559B-48EF-8D9F-1C2884ED540B/layers/AFDAAFD3-BFA6-4E96-BB6D-057DD13753E5
+ *
+ * @exports
+ * @class UIDialog
+ * @extends {React.Component<IDialogProps, {}>}
+ */
+export declare class UIDialog extends React.Component<DialogProps, DialogState> {
+    static defaultProps: {
+        isOpenAnimated: boolean;
+    };
+    /**
+     * Initializes component properties.
+     *
+     * @param {DialogProps} props
+     */
+    constructor(props: DialogProps);
+    /**
+     * Called when component is rerendered.
+     *
+     * @param {Readonly<DialogProps>} prevProps
+     */
+    componentDidUpdate(prevProps: Readonly<DialogProps>): void;
+    /**
+     * Method handles modal dialog mount event.
+     */
+    private onModalLayerMount;
+    /**
+     * Method handles modal dialog unmount event.
+     */
+    private onModalLayerUnmount;
+    /**
+     * Method attaches to window resize event.
+     */
+    private attachResize;
+    /**
+     * Method detaches from window resize event.
+     */
+    private detachResize;
+    /**
+     * Method handles window resizer event to update calculation for content scrollarea size.
+     */
+    private onResize;
+    /**
+     * Method returns maximal height for dialog content "scrollArea=Content" mode.
+     *
+     * @returns {number} Max size of dialog.
+     */
+    private getResizeMaxHeight;
+    /**
+     * Method returns footer element depending in component props.
+     * Three states.
+     * 1. Accept/Decline buttons.
+     * 2. Custom content of footer.
+     * 3. No footer.
+     *
+     * @returns {JSX.Element | null} Footer element to render.
+     */
+    getFooter(): JSX.Element | undefined;
+    /**
+     * Method handles mousedown event for dialog header area.
+     * Method added to handle scenario when we open dropdown menu and move dialog.
+     * Code in method sets focus to focuszone's placeholder - it triggers close for opened dropdown menu.
+     *
+     * @param {React.MouseEvent} event Mousedown event
+     */
+    onHeaderMouseDown(event: React.MouseEvent): void;
+    /**
+     * @returns {JSX.Element}
+     */
+    render(): JSX.Element;
+}
+export {};
 //# sourceMappingURL=UIDialog.d.ts.map