@db-ux/react-core-components 1.0.0-test-13b991d

package/dist/components/tooltip/tooltip.js

@@ -0,0 +1,43 @@
+"use client";
+import * as React from "react";
+import { useState, useRef, useEffect, forwardRef } from "react";
+import { cls, getBooleanAsString, handleDataOutside, uuid, filterPassingProps, getRootProps } from "../../utils";
+import { DEFAULT_ID } from "../../shared/constants";
+function DBTooltipFn(props, component) {
+    var _a, _b;
+    const _ref = component || useRef(component);
+    const [_id, set_id] = useState(() => DEFAULT_ID);
+    const [initialized, setInitialized] = useState(() => false);
+    function handleClick(event) {
+        event.stopPropagation();
+    }
+    function handleAutoPlacement() {
+        if (_ref.current)
+            handleDataOutside(_ref.current);
+    }
+    useEffect(() => {
+        set_id(props.id || "tooltip-" + uuid());
+        setInitialized(true);
+    }, []);
+    useEffect(() => {
+        if (_ref.current && initialized && _id) {
+            let parent = _ref.current.parentElement;
+            if (parent && parent.localName.includes("tooltip")) {
+                // Angular workaround
+                parent = parent.parentElement;
+            }
+            if (parent) {
+                ["mouseenter", "focus"].forEach((event) => {
+                    parent.addEventListener(event, () => handleAutoPlacement());
+                });
+                parent.setAttribute("data-has-tooltip", "true");
+                parent.setAttribute("aria-describedby", _id);
+            }
+            setInitialized(false);
+        }
+    }, [_ref.current, initialized]);
+    return (React.createElement("i", Object.assign({ role: "tooltip", "aria-hidden": "true", "data-gap": "true", ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font"]), getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font"]), { className: cls("db-tooltip", props.className), id: _id, "data-emphasis": props.emphasis, "data-animation": getBooleanAsString((_a = props.animation) !== null && _a !== void 0 ? _a : true), "data-delay": props.delay, "data-width": props.width, "data-show-arrow": getBooleanAsString((_b = props.showArrow) !== null && _b !== void 0 ? _b : true), "data-placement": props.placement, onClick: (event) => handleClick(event) }), props.children));
+}
+const DBTooltip = forwardRef(DBTooltipFn);
+DBTooltip.defaultProps = {};
+export default DBTooltip;

package/dist/index.d.ts

@@ -0,0 +1,36 @@
+export * from './components/notification';
+export * from './components/badge';
+export * from './components/brand';
+export * from './components/button';
+export * from './components/card';
+export * from './components/checkbox';
+export * from './components/divider';
+export * from './components/drawer';
+export * from './components/header';
+export * from './components/icon';
+export * from './components/infotext';
+export * from './components/input';
+export * from './components/link';
+export * from './components/page';
+export * from './components/radio';
+export * from './components/section';
+export * from './components/select';
+export * from './components/switch';
+export * from './components/tab-item';
+export * from './components/tag';
+export * from './components/textarea';
+export * from './components/navigation-item';
+export * from './components/accordion';
+export * from './components/accordion-item';
+export * from './components/navigation';
+export * from './components/badge';
+export * from './components/popover';
+export * from './components/tooltip';
+export * from './components/tab-list';
+export * from './components/tabs';
+export * from './components/tab-panel';
+export * from './shared/constants';
+export * from './shared/model';
+export * from './utils/index';
+export * from './utils/navigation';
+export * from './components/stack';

package/dist/index.js

@@ -0,0 +1,36 @@
+export * from './components/notification';
+export * from './components/badge';
+export * from './components/brand';
+export * from './components/button';
+export * from './components/card';
+export * from './components/checkbox';
+export * from './components/divider';
+export * from './components/drawer';
+export * from './components/header';
+export * from './components/icon';
+export * from './components/infotext';
+export * from './components/input';
+export * from './components/link';
+export * from './components/page';
+export * from './components/radio';
+export * from './components/section';
+export * from './components/select';
+export * from './components/switch';
+export * from './components/tab-item';
+export * from './components/tag';
+export * from './components/textarea';
+export * from './components/navigation-item';
+export * from './components/accordion';
+export * from './components/accordion-item';
+export * from './components/navigation';
+export * from './components/badge';
+export * from './components/popover';
+export * from './components/tooltip';
+export * from './components/tab-list';
+export * from './components/tabs';
+export * from './components/tab-panel';
+export * from './shared/constants';
+export * from './shared/model';
+export * from './utils/index';
+export * from './utils/navigation';
+export * from './components/stack';

package/dist/shared/constants.d.ts

@@ -0,0 +1,83 @@
+export declare const DEFAULT_ID: string;
+export declare const DEFAULT_LABEL: string;
+export declare const DEFAULT_PLACEHOLDER: string;
+export declare const DEFAULT_MESSAGE_ID_SUFFIX: string;
+export declare const DEFAULT_VALID_MESSAGE_ID_SUFFIX: string;
+export declare const DEFAULT_INVALID_MESSAGE_ID_SUFFIX: string;
+export declare const DEFAULT_PLACEHOLDER_ID_SUFFIX: string;
+export declare const DEFAULT_DATALIST_ID_SUFFIX: string;
+export declare const DEFAULT_VALID_MESSAGE: string;
+export declare const DEFAULT_INVALID_MESSAGE: string;
+export declare const DEFAULT_BACK: string;
+export declare const DEFAULT_BURGER_MENU: string;
+export declare const DEFAULT_ICON: string;
+export declare const DEFAULT_ROWS: number;
+export declare const DEFAULT_CLOSE_BUTTON: string;
+export declare const DENSITY_CONST: string;
+export declare const COLOR_CONST: string;
+export declare enum DENSITY {
+    'FUNCTIONAL' = "functional",
+    'REGULAR' = "regular",
+    'EXPRESSIVE' = "expressive"
+}
+export declare const DENSITIES: DENSITY[];
+export declare enum COLOR_SIMPLE {
+    'PRIMARY' = "primary"
+}
+export declare enum COLOR {
+    'NEUTRAL_BG_LEVEL_1' = "neutral-bg-basic-level-1",
+    'NEUTRAL_BG_LEVEL_2' = "neutral-bg-basic-level-2",
+    'NEUTRAL_BG_LEVEL_3' = "neutral-bg-basic-level-3",
+    'NEUTRAL_BG_TRANSPARENT_SEMI' = "neutral-bg-basic-transparent-semi",
+    'NEUTRAL_BG_TRANSPARENT_FULL' = "neutral-bg-basic-transparent-full",
+    'BRAND_BG_LEVEL_1' = "brand-bg-basic-level-1",
+    'BRAND_BG_LEVEL_2' = "brand-bg-basic-level-2",
+    'BRAND_BG_LEVEL_3' = "brand-bg-basic-level-3",
+    'BRAND_BG_TRANSPARENT_SEMI' = "brand-bg-basic-transparent-semi",
+    'BRAND_BG_TRANSPARENT_FULL' = "brand-bg-basic-transparent-full",
+    'SUCCESSFUL_BG_LEVEL_1' = "successful-bg-basic-level-1",
+    'SUCCESSFUL_BG_LEVEL_2' = "successful-bg-basic-level-2",
+    'SUCCESSFUL_BG_LEVEL_3' = "successful-bg-basic-level-3",
+    'SUCCESSFUL_BG_TRANSPARENT_SEMI' = "successful-bg-basic-transparent-semi",
+    'SUCCESSFUL_BG_TRANSPARENT_FULL' = "successful-bg-basic-transparent-full",
+    'CRITICAL_BG_LEVEL_1' = "critical-bg-basic-level-1",
+    'CRITICAL_BG_LEVEL_2' = "critical-bg-basic-level-2",
+    'CRITICAL_BG_LEVEL_3' = "critical-bg-basic-level-3",
+    'CRITICAL_BG_TRANSPARENT_SEMI' = "critical-bg-basic-transparent-semi",
+    'CRITICAL_BG_TRANSPARENT_Full' = "critical-bg-basic-transparent-full",
+    'WARNING_BG_LEVEL_1' = "warning-bg-basic-level-1",
+    'WARNING_BG_LEVEL_2' = "warning-bg-basic-level-2",
+    'WARNING_BG_LEVEL_3' = "warning-bg-basic-level-3",
+    'WARNING_BG_TRANSPARENT_SEMI' = "warning-bg-basic-transparent-semi",
+    'WARNING_BG_TRANSPARENT_FULL' = "warning-bg-basic-transparent-full",
+    'INFORMATIONAL_BG_LEVEL_1' = "informational-bg-basic-level-1",
+    'INFORMATIONAL_BG_LEVEL_2' = "informational-bg-basic-level-2",
+    'INFORMATIONAL_BG_LEVEL_3' = "informational-bg-basic-level-3",
+    'INFORMATIONAL_BG_TRANSPARENT_SEMI' = "informational-bg-basic-transparent-semi",
+    'INFORMATIONAL_BG_TRANSPARENT_FULL' = "informational-bg-basic-transparent-full"
+}
+export declare const COLORS: COLOR[];
+export declare const COLORS_SIMPLE: COLOR_SIMPLE[];
+export declare enum SEMANTIC {
+    'CRITICAL' = "critical",
+    'INFORMATIONAL' = "informational",
+    'WARNING' = "warning",
+    'SUCCESSFUL' = "successful"
+}
+export declare const SEMANTICS: SEMANTIC[];
+export declare const DEFAULT_VIEWPORT: {
+    width: number;
+    height: number;
+};
+export declare const DESKTOP_VIEWPORT: {
+    width: number;
+    height: number;
+};
+/**
+ * Use those viewports if your component has a css media-query otherwise use the DEFAULT_VIEWPORT
+ */
+export declare const TESTING_VIEWPORTS: {
+    width: number;
+    height: number;
+    name: string;
+}[];

package/dist/shared/constants.js

@@ -0,0 +1,87 @@
+export const DEFAULT_ID = 'OVERWRITE_DEFAULT_ID';
+export const DEFAULT_LABEL = 'LABEL SHOULD BE SET';
+export const DEFAULT_PLACEHOLDER = ' ';
+export const DEFAULT_MESSAGE_ID_SUFFIX = '-message';
+export const DEFAULT_VALID_MESSAGE_ID_SUFFIX = '-valid-message';
+export const DEFAULT_INVALID_MESSAGE_ID_SUFFIX = '-invalid-message';
+export const DEFAULT_PLACEHOLDER_ID_SUFFIX = '-placeholder';
+export const DEFAULT_DATALIST_ID_SUFFIX = '-datalist';
+export const DEFAULT_VALID_MESSAGE = 'TODO: Add a validMessage';
+export const DEFAULT_INVALID_MESSAGE = 'TODO: Add an invalidMessage';
+export const DEFAULT_BACK = 'Back';
+export const DEFAULT_BURGER_MENU = 'BurgerMenu';
+export const DEFAULT_ICON = 'brand';
+export const DEFAULT_ROWS = 4;
+export const DEFAULT_CLOSE_BUTTON = 'Close Button';
+export const DENSITY_CONST = 'density';
+export const COLOR_CONST = 'color';
+export var DENSITY;
+(function (DENSITY) {
+    DENSITY["FUNCTIONAL"] = "functional";
+    DENSITY["REGULAR"] = "regular";
+    DENSITY["EXPRESSIVE"] = "expressive";
+})(DENSITY || (DENSITY = {}));
+export const DENSITIES = Object.entries(DENSITY).map(([, value]) => value);
+export var COLOR_SIMPLE;
+(function (COLOR_SIMPLE) {
+    COLOR_SIMPLE["PRIMARY"] = "primary";
+})(COLOR_SIMPLE || (COLOR_SIMPLE = {}));
+export var COLOR;
+(function (COLOR) {
+    COLOR["NEUTRAL_BG_LEVEL_1"] = "neutral-bg-basic-level-1";
+    COLOR["NEUTRAL_BG_LEVEL_2"] = "neutral-bg-basic-level-2";
+    COLOR["NEUTRAL_BG_LEVEL_3"] = "neutral-bg-basic-level-3";
+    COLOR["NEUTRAL_BG_TRANSPARENT_SEMI"] = "neutral-bg-basic-transparent-semi";
+    COLOR["NEUTRAL_BG_TRANSPARENT_FULL"] = "neutral-bg-basic-transparent-full";
+    COLOR["BRAND_BG_LEVEL_1"] = "brand-bg-basic-level-1";
+    COLOR["BRAND_BG_LEVEL_2"] = "brand-bg-basic-level-2";
+    COLOR["BRAND_BG_LEVEL_3"] = "brand-bg-basic-level-3";
+    COLOR["BRAND_BG_TRANSPARENT_SEMI"] = "brand-bg-basic-transparent-semi";
+    COLOR["BRAND_BG_TRANSPARENT_FULL"] = "brand-bg-basic-transparent-full";
+    COLOR["SUCCESSFUL_BG_LEVEL_1"] = "successful-bg-basic-level-1";
+    COLOR["SUCCESSFUL_BG_LEVEL_2"] = "successful-bg-basic-level-2";
+    COLOR["SUCCESSFUL_BG_LEVEL_3"] = "successful-bg-basic-level-3";
+    COLOR["SUCCESSFUL_BG_TRANSPARENT_SEMI"] = "successful-bg-basic-transparent-semi";
+    COLOR["SUCCESSFUL_BG_TRANSPARENT_FULL"] = "successful-bg-basic-transparent-full";
+    COLOR["CRITICAL_BG_LEVEL_1"] = "critical-bg-basic-level-1";
+    COLOR["CRITICAL_BG_LEVEL_2"] = "critical-bg-basic-level-2";
+    COLOR["CRITICAL_BG_LEVEL_3"] = "critical-bg-basic-level-3";
+    COLOR["CRITICAL_BG_TRANSPARENT_SEMI"] = "critical-bg-basic-transparent-semi";
+    COLOR["CRITICAL_BG_TRANSPARENT_Full"] = "critical-bg-basic-transparent-full";
+    COLOR["WARNING_BG_LEVEL_1"] = "warning-bg-basic-level-1";
+    COLOR["WARNING_BG_LEVEL_2"] = "warning-bg-basic-level-2";
+    COLOR["WARNING_BG_LEVEL_3"] = "warning-bg-basic-level-3";
+    COLOR["WARNING_BG_TRANSPARENT_SEMI"] = "warning-bg-basic-transparent-semi";
+    COLOR["WARNING_BG_TRANSPARENT_FULL"] = "warning-bg-basic-transparent-full";
+    COLOR["INFORMATIONAL_BG_LEVEL_1"] = "informational-bg-basic-level-1";
+    COLOR["INFORMATIONAL_BG_LEVEL_2"] = "informational-bg-basic-level-2";
+    COLOR["INFORMATIONAL_BG_LEVEL_3"] = "informational-bg-basic-level-3";
+    COLOR["INFORMATIONAL_BG_TRANSPARENT_SEMI"] = "informational-bg-basic-transparent-semi";
+    COLOR["INFORMATIONAL_BG_TRANSPARENT_FULL"] = "informational-bg-basic-transparent-full";
+})(COLOR || (COLOR = {}));
+export const COLORS = Object.entries(COLOR).map(([, value]) => value);
+export const COLORS_SIMPLE = Object.entries(COLOR_SIMPLE).map(([, value]) => value);
+export var SEMANTIC;
+(function (SEMANTIC) {
+    SEMANTIC["CRITICAL"] = "critical";
+    SEMANTIC["INFORMATIONAL"] = "informational";
+    SEMANTIC["WARNING"] = "warning";
+    SEMANTIC["SUCCESSFUL"] = "successful";
+})(SEMANTIC || (SEMANTIC = {}));
+export const SEMANTICS = Object.entries(SEMANTIC).map(([, value]) => value);
+export const DEFAULT_VIEWPORT = {
+    width: 390,
+    height: 884
+};
+export const DESKTOP_VIEWPORT = {
+    width: 1920,
+    height: 1280
+};
+/**
+ * Use those viewports if your component has a css media-query otherwise use the DEFAULT_VIEWPORT
+ */
+export const TESTING_VIEWPORTS = [Object.assign({ name: 'desktop' }, DESKTOP_VIEWPORT), {
+        name: 'tablet',
+        width: 768,
+        height: 1024
+    }, Object.assign({ name: 'mobile' }, DEFAULT_VIEWPORT)];