@sap-ux/ui-components 1.8.2 → 1.8.4

package/dist/components/UIDropdown/UIDropdown.scss

@@ -1,115 +1,115 @@
-@import '../../styles/_variables.scss';
-@import '../../styles/_mixins.scss';
-@import '../UIComboBox/_mixins.scss';
-
-@mixin apply-dropdown-error-border($border) {
-    .ms-Dropdown {
-        &,
-        &.is-open {
-            &:after {
-                border-color: $border;
-            }
-        }
-    }
-}
-
-.ts-SelectBox {
-    .ms-Dropdown {
-        background: $dropdown-input-background;
-        .ms-Dropdown-title {
-            background: transparent;
-            height: $dropdown-input-height;
-            line-height: $dropdown-input-height;
-            border: $dropdown-input-border-width solid transparent;
-            padding: $dropdown-input-text-padding;
-            @include base-font;
-        }
-        > .ms-Dropdown-caretDownWrapper {
-            @include caretDown-icon;
-            i {
-                margin-top: -$dropdown-input-border-width;
-            }
-        }
-        // Font color
-        &,
-        &:hover {
-            .ms-Dropdown-title {
-                color: $dropdown-input-color;
-            }
-        }
-        .ms-Dropdown-titleIsPlaceHolder {
-            color: $dropdown-input-placeholder-color;
-        }
-        &:after {
-            pointer-events: none;
-            content: '';
-            position: absolute;
-            box-sizing: border-box;
-            top: 0px;
-            left: 0px;
-            width: 100%;
-            height: 100%;
-            border: $dropdown-input-border;
-            border-radius: $dropdown-input-border-radius;
-        }
-        &.is-open,
-        &:focus,
-        &:hover {
-            &:after {
-                border-color: $dropdown-input-focus-border-color;
-            }
-        }
-        &:focus,
-        &.is-open {
-            &:after {
-                border-style: solid;
-            }
-        }
-    }
-    &--readonly {
-        .ms-Dropdown {
-            &.is-disabled {
-                @include input-readonly;
-            }
-        }
-        // Empty and readonly field - disable hover efect
-        &.ts-SelectBox--empty {
-            .ms-Dropdown:hover:after {
-                border-color: $dropdown-input-border-color;
-            }
-        }
-    }
-    &--disabled {
-        .ms-Dropdown {
-            &.is-disabled {
-                @include input-disabled;
-            }
-        }
-    }
-    &--readonly,
-    &--disabled {
-        .ms-Dropdown:focus {
-            &:after {
-                border-style: solid;
-                border-color: $dropdown-input-focus-border-color !important;
-            }
-        }
-    }
-    &--error {
-        @include apply-dropdown-error-border(var(--vscode-inputValidation-errorBorder));
-    }
-    &--warning {
-        @include apply-dropdown-error-border(var(--vscode-inputValidation-warningBorder));
-    }
-    &--info {
-        @include apply-dropdown-error-border(var(--vscode-inputValidation-infoBorder));
-    }
-}
-
-.ts-dropdown-item-blocker {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-}
+@import '../../styles/_variables.scss';
+@import '../../styles/_mixins.scss';
+@import '../UIComboBox/_mixins.scss';
+
+@mixin apply-dropdown-error-border($border) {
+    .ms-Dropdown {
+        &,
+        &.is-open {
+            &:after {
+                border-color: $border;
+            }
+        }
+    }
+}
+
+.ts-SelectBox {
+    .ms-Dropdown {
+        background: $dropdown-input-background;
+        .ms-Dropdown-title {
+            background: transparent;
+            height: $dropdown-input-height;
+            line-height: $dropdown-input-height;
+            border: $dropdown-input-border-width solid transparent;
+            padding: $dropdown-input-text-padding;
+            @include base-font;
+        }
+        > .ms-Dropdown-caretDownWrapper {
+            @include caretDown-icon;
+            i {
+                margin-top: -$dropdown-input-border-width;
+            }
+        }
+        // Font color
+        &,
+        &:hover {
+            .ms-Dropdown-title {
+                color: $dropdown-input-color;
+            }
+        }
+        .ms-Dropdown-titleIsPlaceHolder {
+            color: $dropdown-input-placeholder-color;
+        }
+        &:after {
+            pointer-events: none;
+            content: '';
+            position: absolute;
+            box-sizing: border-box;
+            top: 0px;
+            left: 0px;
+            width: 100%;
+            height: 100%;
+            border: $dropdown-input-border;
+            border-radius: $dropdown-input-border-radius;
+        }
+        &.is-open,
+        &:focus,
+        &:hover {
+            &:after {
+                border-color: $dropdown-input-focus-border-color;
+            }
+        }
+        &:focus,
+        &.is-open {
+            &:after {
+                border-style: solid;
+            }
+        }
+    }
+    &--readonly {
+        .ms-Dropdown {
+            &.is-disabled {
+                @include input-readonly;
+            }
+        }
+        // Empty and readonly field - disable hover efect
+        &.ts-SelectBox--empty {
+            .ms-Dropdown:hover:after {
+                border-color: $dropdown-input-border-color;
+            }
+        }
+    }
+    &--disabled {
+        .ms-Dropdown {
+            &.is-disabled {
+                @include input-disabled;
+            }
+        }
+    }
+    &--readonly,
+    &--disabled {
+        .ms-Dropdown:focus {
+            &:after {
+                border-style: solid;
+                border-color: $dropdown-input-focus-border-color !important;
+            }
+        }
+    }
+    &--error {
+        @include apply-dropdown-error-border(var(--vscode-inputValidation-errorBorder));
+    }
+    &--warning {
+        @include apply-dropdown-error-border(var(--vscode-inputValidation-warningBorder));
+    }
+    &--info {
+        @include apply-dropdown-error-border(var(--vscode-inputValidation-infoBorder));
+    }
+}
+
+.ts-dropdown-item-blocker {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}

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

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

package/dist/components/UIDropdown/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("./UIDropdown"), exports);
-__exportStar(require("./utils"), 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("./UIDropdown"), exports);
+__exportStar(require("./utils"), exports);
 //# sourceMappingURL=index.js.map

package/dist/components/UIDropdown/utils.d.ts

@@ -1,9 +1,9 @@
-import type { IDropdownProps, IComboBoxProps } from '@fluentui/react';
-/**
- * Method checks if drodpown or combobox is empty or any value is selected.
- *
- * @param {Partial<IDropdownProps | IComboBoxProps>} props Dropdown or combobox props.
- * @returns {boolean} Is dropdown or combobox empty.
- */
-export declare function isDropdownEmpty(props: Partial<IDropdownProps | IComboBoxProps>): boolean;
+import type { IDropdownProps, IComboBoxProps } from '@fluentui/react';
+/**
+ * Method checks if drodpown or combobox is empty or any value is selected.
+ *
+ * @param {Partial<IDropdownProps | IComboBoxProps>} props Dropdown or combobox props.
+ * @returns {boolean} Is dropdown or combobox empty.
+ */
+export declare function isDropdownEmpty(props: Partial<IDropdownProps | IComboBoxProps>): boolean;
 //# sourceMappingURL=utils.d.ts.map

package/dist/components/UIDropdown/utils.js

@@ -1,21 +1,21 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.isDropdownEmpty = void 0;
-/**
- * Method checks if drodpown or combobox is empty or any value is selected.
- *
- * @param {Partial<IDropdownProps | IComboBoxProps>} props Dropdown or combobox props.
- * @returns {boolean} Is dropdown or combobox empty.
- */
-function isDropdownEmpty(props) {
-    const { selectedKey } = props;
-    if (Array.isArray(selectedKey)) {
-        return selectedKey.length === 0;
-    }
-    if (('text' in props && props.text) || ('selectedKeys' in props && props.selectedKeys?.length)) {
-        return false;
-    }
-    return !selectedKey;
-}
-exports.isDropdownEmpty = isDropdownEmpty;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isDropdownEmpty = void 0;
+/**
+ * Method checks if drodpown or combobox is empty or any value is selected.
+ *
+ * @param {Partial<IDropdownProps | IComboBoxProps>} props Dropdown or combobox props.
+ * @returns {boolean} Is dropdown or combobox empty.
+ */
+function isDropdownEmpty(props) {
+    const { selectedKey } = props;
+    if (Array.isArray(selectedKey)) {
+        return selectedKey.length === 0;
+    }
+    if (('text' in props && props.text) || ('selectedKeys' in props && props.selectedKeys?.length)) {
+        return false;
+    }
+    return !selectedKey;
+}
+exports.isDropdownEmpty = isDropdownEmpty;
 //# sourceMappingURL=utils.js.map

package/dist/components/UIFlexibleTable/RowActions.d.ts

@@ -1,17 +1,17 @@
-import React from 'react';
-import type { UIFlexibleTableProps } from './types';
-export interface RowActionsProps<T> {
-    rowIndex: number;
-    onMoveDownClick?: () => void;
-    onMoveUpClick?: () => void;
-    onFocusRowAction: (name: string) => void;
-    tableProps: UIFlexibleTableProps<T>;
-}
-/**
- * RowActions component.
- *
- * @param {RowActionsProps<T>} props
- * @returns {React.ReactElement}
- */
-export declare function RowActions<T>(props: RowActionsProps<T>): React.ReactElement;
+import React from 'react';
+import type { UIFlexibleTableProps } from './types';
+export interface RowActionsProps<T> {
+    rowIndex: number;
+    onMoveDownClick?: () => void;
+    onMoveUpClick?: () => void;
+    onFocusRowAction: (name: string) => void;
+    tableProps: UIFlexibleTableProps<T>;
+}
+/**
+ * RowActions component.
+ *
+ * @param {RowActionsProps<T>} props
+ * @returns {React.ReactElement}
+ */
+export declare function RowActions<T>(props: RowActionsProps<T>): React.ReactElement;
 //# sourceMappingURL=RowActions.d.ts.map

package/dist/components/UIFlexibleTable/RowActions.js

@@ -1,74 +1,74 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RowActions = void 0;
-const react_1 = __importDefault(require("react"));
-const UIFlexibleTableRowActionButton_1 = require("./UIFlexibleTableRowActionButton");
-const __1 = require("..");
-/**
- * RowActions component.
- *
- * @param {RowActionsProps<T>} props
- * @returns {React.ReactElement}
- */
-function RowActions(props) {
-    const { rowIndex, tableProps } = props;
-    const rows = props.tableProps.rows;
-    const rowKey = rows[rowIndex].key;
-    const cells = rows[rowIndex].cells;
-    const isTableTop = rowIndex <= 0;
-    const isTableBottom = rowIndex >= rows.length - 1;
-    const isShowReorderButtons = !tableProps.readonly && tableProps.onTableReorder;
-    const additionalActions = [];
-    const isShowDeleteAction = tableProps.onDeleteRow && !tableProps.readonly;
-    const divider = react_1.default.createElement(__1.UIVerticalDivider, { className: "flexible-table-content-table-row-item-actions-divider" });
-    if (tableProps.onRenderActions) {
-        const customActions = tableProps.onRenderActions({ rowIndex, rowKey, cells, readonly: !!tableProps.readonly });
-        additionalActions.push(...customActions.map((actionElement, idx) => {
-            return (react_1.default.createElement(react_1.default.Fragment, { key: `action-${actionElement.key}` },
-                react_1.default.createElement("div", { className: "flexible-table-content-table-row-item-actions-item-wrapper" }, actionElement),
-                idx < customActions.length - 1 && divider));
-        }));
-    }
-    const { up, down } = isShowReorderButtons && tableProps.onRenderReorderActions
-        ? tableProps.onRenderReorderActions({ rowIndex, rowKey, cells, readonly: !!tableProps.readonly }) || {}
-        : {
-            up: undefined,
-            down: undefined
-        };
-    const reorderButtons = isShowReorderButtons && (react_1.default.createElement("div", { className: "flexible-table-content-table-row-item-actions-item-wrapper" },
-        react_1.default.createElement(UIFlexibleTableRowActionButton_1.UIFlexibleTableRowActionButton, { key: "up-action", actionName: "up", disabled: isTableTop || tableProps.isContentLoading || up?.disabled, iconName: __1.UiIcons.ArrowUp, rowNumber: rowIndex, tableId: tableProps.id, onClick: props.onMoveUpClick, onFocus: () => {
-                props.onFocusRowAction('up');
-            }, title: up?.tooltip }),
-        react_1.default.createElement(UIFlexibleTableRowActionButton_1.UIFlexibleTableRowActionButton, { key: "down-action", actionName: "down", disabled: isTableBottom || tableProps.isContentLoading || down?.disabled, iconName: __1.UiIcons.ArrowDown, rowNumber: rowIndex, tableId: tableProps.id, onClick: props.onMoveDownClick, onFocus: () => {
-                props.onFocusRowAction('down');
-            }, title: down?.tooltip })));
-    const deleteRowAction = isShowDeleteAction && (react_1.default.createElement("div", { className: "flexible-table-content-table-row-item-actions-item-wrapper" }, getDeleteRowAction(tableProps, { rowIndex, rowKey, cells, readonly: false })));
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        additionalActions,
-        additionalActions.length > 0 && (isShowReorderButtons || isShowDeleteAction) && divider,
-        reorderButtons,
-        isShowReorderButtons && isShowDeleteAction && divider,
-        deleteRowAction));
-}
-exports.RowActions = RowActions;
-/**
- * Get delete row action.
- *
- * @param {UIFlexibleTableProps<T>} props
- * @param {TableRowEventHandlerParameters<T>} params
- * @returns {React.ReactNode}
- */
-function getDeleteRowAction(props, params) {
-    const { isDeleteDisabled, tooltip } = props.onRenderDeleteAction
-        ? props.onRenderDeleteAction(params)
-        : { isDeleteDisabled: false, tooltip: undefined };
-    return (react_1.default.createElement(UIFlexibleTableRowActionButton_1.UIFlexibleTableRowActionButton, { key: "delete-action", actionName: "delete", iconName: __1.UiIcons.TrashCan, disabled: !!isDeleteDisabled || props.isContentLoading, rowNumber: params.rowIndex, onClick: () => {
-            if (props.onDeleteRow) {
-                props.onDeleteRow(params);
-            }
-        }, tableId: props.id, title: tooltip }));
-}
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RowActions = void 0;
+const react_1 = __importDefault(require("react"));
+const UIFlexibleTableRowActionButton_1 = require("./UIFlexibleTableRowActionButton");
+const __1 = require("..");
+/**
+ * RowActions component.
+ *
+ * @param {RowActionsProps<T>} props
+ * @returns {React.ReactElement}
+ */
+function RowActions(props) {
+    const { rowIndex, tableProps } = props;
+    const rows = props.tableProps.rows;
+    const rowKey = rows[rowIndex].key;
+    const cells = rows[rowIndex].cells;
+    const isTableTop = rowIndex <= 0;
+    const isTableBottom = rowIndex >= rows.length - 1;
+    const isShowReorderButtons = !tableProps.readonly && tableProps.onTableReorder;
+    const additionalActions = [];
+    const isShowDeleteAction = tableProps.onDeleteRow && !tableProps.readonly;
+    const divider = react_1.default.createElement(__1.UIVerticalDivider, { className: "flexible-table-content-table-row-item-actions-divider" });
+    if (tableProps.onRenderActions) {
+        const customActions = tableProps.onRenderActions({ rowIndex, rowKey, cells, readonly: !!tableProps.readonly });
+        additionalActions.push(...customActions.map((actionElement, idx) => {
+            return (react_1.default.createElement(react_1.default.Fragment, { key: `action-${actionElement.key}` },
+                react_1.default.createElement("div", { className: "flexible-table-content-table-row-item-actions-item-wrapper" }, actionElement),
+                idx < customActions.length - 1 && divider));
+        }));
+    }
+    const { up, down } = isShowReorderButtons && tableProps.onRenderReorderActions
+        ? tableProps.onRenderReorderActions({ rowIndex, rowKey, cells, readonly: !!tableProps.readonly }) || {}
+        : {
+            up: undefined,
+            down: undefined
+        };
+    const reorderButtons = isShowReorderButtons && (react_1.default.createElement("div", { className: "flexible-table-content-table-row-item-actions-item-wrapper" },
+        react_1.default.createElement(UIFlexibleTableRowActionButton_1.UIFlexibleTableRowActionButton, { key: "up-action", actionName: "up", disabled: isTableTop || tableProps.isContentLoading || up?.disabled, iconName: __1.UiIcons.ArrowUp, rowNumber: rowIndex, tableId: tableProps.id, onClick: props.onMoveUpClick, onFocus: () => {
+                props.onFocusRowAction('up');
+            }, title: up?.tooltip }),
+        react_1.default.createElement(UIFlexibleTableRowActionButton_1.UIFlexibleTableRowActionButton, { key: "down-action", actionName: "down", disabled: isTableBottom || tableProps.isContentLoading || down?.disabled, iconName: __1.UiIcons.ArrowDown, rowNumber: rowIndex, tableId: tableProps.id, onClick: props.onMoveDownClick, onFocus: () => {
+                props.onFocusRowAction('down');
+            }, title: down?.tooltip })));
+    const deleteRowAction = isShowDeleteAction && (react_1.default.createElement("div", { className: "flexible-table-content-table-row-item-actions-item-wrapper" }, getDeleteRowAction(tableProps, { rowIndex, rowKey, cells, readonly: false })));
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        additionalActions,
+        additionalActions.length > 0 && (isShowReorderButtons || isShowDeleteAction) && divider,
+        reorderButtons,
+        isShowReorderButtons && isShowDeleteAction && divider,
+        deleteRowAction));
+}
+exports.RowActions = RowActions;
+/**
+ * Get delete row action.
+ *
+ * @param {UIFlexibleTableProps<T>} props
+ * @param {TableRowEventHandlerParameters<T>} params
+ * @returns {React.ReactNode}
+ */
+function getDeleteRowAction(props, params) {
+    const { isDeleteDisabled, tooltip } = props.onRenderDeleteAction
+        ? props.onRenderDeleteAction(params)
+        : { isDeleteDisabled: false, tooltip: undefined };
+    return (react_1.default.createElement(UIFlexibleTableRowActionButton_1.UIFlexibleTableRowActionButton, { key: "delete-action", actionName: "delete", iconName: __1.UiIcons.TrashCan, disabled: !!isDeleteDisabled || props.isContentLoading, rowNumber: params.rowIndex, onClick: () => {
+            if (props.onDeleteRow) {
+                props.onDeleteRow(params);
+            }
+        }, tableId: props.id, title: tooltip }));
+}
 //# sourceMappingURL=RowActions.js.map

package/dist/components/UIFlexibleTable/RowData.d.ts

@@ -1,17 +1,17 @@
-import React from 'react';
-import type { UIFlexibleTableProps, UIFlexibleTableRowType } from './types';
-interface RowDataCellsProps<T> {
-    tableProps: UIFlexibleTableProps<T>;
-    row: UIFlexibleTableRowType<T>;
-    rowIndex: number;
-    isInRowLayout: boolean;
-}
-/**
- * RowDataCells component.
- *
- * @param {RowDataCellsProps<T>} props
- * @returns {React.ReactElement}
- */
-export declare function RowDataCells<T>(props: RowDataCellsProps<T>): React.ReactElement;
-export {};
+import React from 'react';
+import type { UIFlexibleTableProps, UIFlexibleTableRowType } from './types';
+interface RowDataCellsProps<T> {
+    tableProps: UIFlexibleTableProps<T>;
+    row: UIFlexibleTableRowType<T>;
+    rowIndex: number;
+    isInRowLayout: boolean;
+}
+/**
+ * RowDataCells component.
+ *
+ * @param {RowDataCellsProps<T>} props
+ * @returns {React.ReactElement}
+ */
+export declare function RowDataCells<T>(props: RowDataCellsProps<T>): React.ReactElement;
+export {};
 //# sourceMappingURL=RowData.d.ts.map