@rio-cloud/rio-uikit 0.16.4-beta.6 → 0.16.4-beta.7

package/components/dataTabs/DataTabHeader.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+export type DataTabHeaderProps = {
+    isActive?: boolean;
+    tabKey: string;
+    title: React.ReactNode;
+    onSelectTab?: (event: React.MouseEvent<HTMLLIElement>) => void;
+    isFirstTab?: boolean;
+    isLastTab?: boolean;
+    tabFirstChildClassName?: string;
+    tabLastChildClassName?: string;
+    tabClassName?: string;
+    tabHoverClassName?: string;
+    tabActiveClassName?: string;
+    arrowClassName?: string;
+    className?: string;
+};
+declare const DataTabHeader: (props: DataTabHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export default DataTabHeader;

package/components/dataTabs/DataTabHeader.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import classNames from 'classnames';
+const DataTabHeader = (props) => {
+    const { tabKey, title, isActive, isFirstTab, isLastTab, onSelectTab, tabFirstChildClassName, tabLastChildClassName, tabClassName, tabHoverClassName, tabActiveClassName, arrowClassName, className, } = props;
+    const [isHovering, setIsHovering] = useState(false);
+    const tabClassNames = classNames('DataTab', 'tab', isFirstTab && tabFirstChildClassName, isLastTab && tabLastChildClassName, !isHovering && !isActive && tabClassName, isHovering && !isActive && tabHoverClassName, isActive && `active ${tabActiveClassName}`, !isActive && 'cursor-pointer', className && className);
+    return (_jsxs("li", Object.assign({ className: tabClassNames, onClick: onSelectTab, "data-tabkey": tabKey, onMouseEnter: () => setIsHovering(true), onMouseLeave: () => setIsHovering(false) }, { children: [title, _jsx("div", { className: `arrow ${arrowClassName} ${isActive ? 'in' : ''}` })] }), tabKey));
+};
+export default DataTabHeader;

package/components/dataTabs/DataTabs.js

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useState } from 'react';
 import classNames from 'classnames';
 import { AnimatePresence } from 'framer-motion';
+import DataTabHeader from './DataTabHeader';
 const getFirstTabKey = (children) => {
     const [firstItem] = children;
     return firstItem === null || firstItem === void 0 ? void 0 : firstItem.props.tabKey;
@@ -41,14 +42,11 @@ const DataTabs = (props) => {
         _jsx(AnimatePresence, Object.assign({ initial: false, exitBeforeEnter: true }, { children: enhancedChildren })));
     };
     return (_jsxs("div", Object.assign({}, remainingProps, { className: wrapperClassNames }, { children: [_jsx("div", Object.assign({ className: `DataTabsWrapper ${tabsWrapperClassName}` }, { children: _jsx("ul", Object.assign({ className: 'DataTabs', role: 'tabList' }, { children: React.Children.map(children, (child, index) => {
-                        const [isHovering, setIsHovering] = useState(false);
                         if (!child) {
                             return null;
                         }
                         const { tabKey, title, className } = child.props;
-                        const isActive = tabKey === internalActiveKey;
-                        const tabClassNames = classNames('DataTab', 'tab', index === 0 && tabFirstChildClassName, index === (children === null || children === void 0 ? void 0 : children.length) - 1 && tabLastChildClassName, !isHovering && !isActive && tabClassName, isHovering && !isActive && tabHoverClassName, isActive && `active ${tabActiveClassName}`, !isActive && 'cursor-pointer', className && className);
-                        return (_jsxs("li", Object.assign({ className: tabClassNames, onClick: handleSelectTab, "data-tabkey": tabKey, onMouseEnter: () => setIsHovering(true), onMouseLeave: () => setIsHovering(false) }, { children: [title, _jsx("div", { className: `arrow ${arrowClassName} ${isActive ? 'in' : ''}` })] }), tabKey));
+                        return (_jsx(DataTabHeader, { isActive: tabKey === internalActiveKey, tabKey: tabKey, title: title, onSelectTab: handleSelectTab, isFirstTab: index === 0, isLastTab: !!((children === null || children === void 0 ? void 0 : children.length) - 1), tabFirstChildClassName: tabFirstChildClassName, tabLastChildClassName: tabLastChildClassName, tabActiveClassName: tabActiveClassName, tabClassName: tabClassName, tabHoverClassName: tabHoverClassName, arrowClassName: arrowClassName, className: className }));
                     }) })) })), _jsx("div", Object.assign({ className: `tab-content ${tabContentClassName}`, role: 'tabpanel' }, { children: commonTabContent ? commonTabContent : enrichChildren() }))] })));
 };
 export default DataTabs;

package/lib/es/components/dataTabs/DataTabHeader.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+export type DataTabHeaderProps = {
+    isActive?: boolean;
+    tabKey: string;
+    title: React.ReactNode;
+    onSelectTab?: (event: React.MouseEvent<HTMLLIElement>) => void;
+    isFirstTab?: boolean;
+    isLastTab?: boolean;
+    tabFirstChildClassName?: string;
+    tabLastChildClassName?: string;
+    tabClassName?: string;
+    tabHoverClassName?: string;
+    tabActiveClassName?: string;
+    arrowClassName?: string;
+    className?: string;
+};
+declare const DataTabHeader: (props: DataTabHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export default DataTabHeader;

package/lib/es/components/dataTabs/DataTabHeader.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const DataTabHeader = (props) => {
+    const { tabKey, title, isActive, isFirstTab, isLastTab, onSelectTab, tabFirstChildClassName, tabLastChildClassName, tabClassName, tabHoverClassName, tabActiveClassName, arrowClassName, className, } = props;
+    const [isHovering, setIsHovering] = (0, react_1.useState)(false);
+    const tabClassNames = (0, classnames_1.default)('DataTab', 'tab', isFirstTab && tabFirstChildClassName, isLastTab && tabLastChildClassName, !isHovering && !isActive && tabClassName, isHovering && !isActive && tabHoverClassName, isActive && `active ${tabActiveClassName}`, !isActive && 'cursor-pointer', className && className);
+    return ((0, jsx_runtime_1.jsxs)("li", Object.assign({ className: tabClassNames, onClick: onSelectTab, "data-tabkey": tabKey, onMouseEnter: () => setIsHovering(true), onMouseLeave: () => setIsHovering(false) }, { children: [title, (0, jsx_runtime_1.jsx)("div", { className: `arrow ${arrowClassName} ${isActive ? 'in' : ''}` })] }), tabKey));
+};
+exports.default = DataTabHeader;

package/lib/es/components/dataTabs/DataTabs.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = tslib_1.__importStar(require("react"));
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const framer_motion_1 = require("framer-motion");
+const DataTabHeader_1 = tslib_1.__importDefault(require("./DataTabHeader"));
 const getFirstTabKey = (children) => {
     const [firstItem] = children;
     return firstItem === null || firstItem === void 0 ? void 0 : firstItem.props.tabKey;
@@ -43,14 +44,11 @@ const DataTabs = (props) => {
         (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, Object.assign({ initial: false, exitBeforeEnter: true }, { children: enhancedChildren })));
     };
     return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, remainingProps, { className: wrapperClassNames }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: `DataTabsWrapper ${tabsWrapperClassName}` }, { children: (0, jsx_runtime_1.jsx)("ul", Object.assign({ className: 'DataTabs', role: 'tabList' }, { children: react_1.default.Children.map(children, (child, index) => {
-                        const [isHovering, setIsHovering] = (0, react_1.useState)(false);
                         if (!child) {
                             return null;
                         }
                         const { tabKey, title, className } = child.props;
-                        const isActive = tabKey === internalActiveKey;
-                        const tabClassNames = (0, classnames_1.default)('DataTab', 'tab', index === 0 && tabFirstChildClassName, index === (children === null || children === void 0 ? void 0 : children.length) - 1 && tabLastChildClassName, !isHovering && !isActive && tabClassName, isHovering && !isActive && tabHoverClassName, isActive && `active ${tabActiveClassName}`, !isActive && 'cursor-pointer', className && className);
-                        return ((0, jsx_runtime_1.jsxs)("li", Object.assign({ className: tabClassNames, onClick: handleSelectTab, "data-tabkey": tabKey, onMouseEnter: () => setIsHovering(true), onMouseLeave: () => setIsHovering(false) }, { children: [title, (0, jsx_runtime_1.jsx)("div", { className: `arrow ${arrowClassName} ${isActive ? 'in' : ''}` })] }), tabKey));
+                        return ((0, jsx_runtime_1.jsx)(DataTabHeader_1.default, { isActive: tabKey === internalActiveKey, tabKey: tabKey, title: title, onSelectTab: handleSelectTab, isFirstTab: index === 0, isLastTab: !!((children === null || children === void 0 ? void 0 : children.length) - 1), tabFirstChildClassName: tabFirstChildClassName, tabLastChildClassName: tabLastChildClassName, tabActiveClassName: tabActiveClassName, tabClassName: tabClassName, tabHoverClassName: tabHoverClassName, arrowClassName: arrowClassName, className: className }));
                     }) })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `tab-content ${tabContentClassName}`, role: 'tabpanel' }, { children: commonTabContent ? commonTabContent : enrichChildren() }))] })));
 };
 exports.default = DataTabs;

package/lib/es/utils/init.js

@@ -68,6 +68,10 @@ const checkMatchingUkitVersions = () => {
     });
 };
 const experimentalLoadUikitCSS = () => {
+    var _a;
+    if ((_a = document.title) === null || _a === void 0 ? void 0 : _a.includes('UIKIT Demo')) {
+        return;
+    }
     // check for existing uikit CSS in document head
     debug('Check for UIKIT CSS in document head');
     const hasUikitCssLink = !!document.head.querySelector('link[href*="rio-uikit"]');
@@ -86,7 +90,6 @@ const experimentalLoadUikitCSS = () => {
     link.onload = () => console.debug(`Loaded CSS link ${link.href}`);
     link.onerror = () => console.error(`Failed to load ${link.href}`);
     document.head.appendChild(link);
-    // TODO: Cleanup for uikit demo page
 };
 const initDocumentBootstrapping = (document) => {
     if (!document || !document.documentElement) {

package/lib/es/version.json

@@ -1,3 +1,3 @@
 {
-    "version": "0.16.4-beta.6"
+    "version": "0.16.4-beta.7"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rio-cloud/rio-uikit",
-    "version": "0.16.4-beta.6",
+    "version": "0.16.4-beta.7",
     "description": "The RIO UIKIT component library",
     "repository": "https://collaboration.msi.audi.com/stash/projects/RIOFRONT/repos/uikit-web/browse",
     "scripts": {
@@ -83,8 +83,8 @@
         "enzyme": "3.11.0",
         "enzyme-adapter-react-16": "1.15.7",
         "eslint": "8.46.0",
-        "eslint-config-prettier": "8.9.0",
-        "eslint-plugin-compat": "3.5.1",
+        "eslint-config-prettier": "8.10.0",
+        "eslint-plugin-compat": "3.13.0",
         "eslint-plugin-getsentry": "2.0.0",
         "eslint-plugin-import": "2.28.0",
         "eslint-plugin-prefer-arrow": "1.2.3",
@@ -96,11 +96,11 @@
         "less": "4.1.3",
         "license-checker": "25.0.1",
         "postcss": "8.4.27",
-        "postcss-preset-env": "8.3.1",
+        "postcss-preset-env": "8.5.1",
         "postcss-short": "5.0.0",
         "postcss-variable-compress": "2.1.0",
         "pre-commit": "1.2.2",
-        "prettier": "3.0.0",
+        "prettier": "3.0.1",
         "react": "17.0.2",
         "react-dom": "17.0.2",
         "react-intl": "6.4.4",
@@ -110,7 +110,7 @@
         "typescript": "4.9.5",
         "vite": "4.4.8",
         "vite-plugin-zip-pack": "1.0.6",
-        "vitest": "0.33.0",
+        "vitest": "0.34.1",
         "webfonts-generator": "github:rio-cloud/webfonts-generator#f666e60803da9155175a7f1775e09671d47a383b"
     },
     "peerDependencies": {

package/utils/init.js

@@ -65,6 +65,10 @@ const checkMatchingUkitVersions = () => {
     });
 };
 const experimentalLoadUikitCSS = () => {
+    var _a;
+    if ((_a = document.title) === null || _a === void 0 ? void 0 : _a.includes('UIKIT Demo')) {
+        return;
+    }
     // check for existing uikit CSS in document head
     debug('Check for UIKIT CSS in document head');
     const hasUikitCssLink = !!document.head.querySelector('link[href*="rio-uikit"]');
@@ -83,7 +87,6 @@ const experimentalLoadUikitCSS = () => {
     link.onload = () => console.debug(`Loaded CSS link ${link.href}`);
     link.onerror = () => console.error(`Failed to load ${link.href}`);
     document.head.appendChild(link);
-    // TODO: Cleanup for uikit demo page
 };
 export const initDocumentBootstrapping = (document) => {
     if (!document || !document.documentElement) {

package/version.json

@@ -1,3 +1,3 @@
 {
-    "version": "0.16.4-beta.6"
+    "version": "0.16.4-beta.7"
 }