@odx/websites-react 1.1.88 → 1.1.89
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,14 +1,13 @@
|
|
|
1
|
+
import React from 'react';
|
|
1
2
|
import { LinkComponent, LinkComponentProps } from '../../../utils';
|
|
2
|
-
import React, { ReactNode } from 'react';
|
|
3
3
|
import { HeadlineProps } from '../../index';
|
|
4
4
|
interface FlyoutTabProps extends React.HTMLAttributes<HTMLButtonElement> {
|
|
5
5
|
text: string;
|
|
6
6
|
tabName: string;
|
|
7
|
-
active: boolean;
|
|
8
7
|
}
|
|
9
8
|
export declare const FlyoutTab: React.FC<FlyoutTabProps>;
|
|
10
9
|
interface FlyoutNavProps {
|
|
11
|
-
children: ReactNode;
|
|
10
|
+
children: React.ReactNode;
|
|
12
11
|
}
|
|
13
12
|
export declare const FlyoutNav: React.FC<FlyoutNavProps>;
|
|
14
13
|
interface FlyoutLinkItemProps extends LinkComponent, LinkComponentProps {
|
|
@@ -17,7 +16,7 @@ interface FlyoutLinkItemProps extends LinkComponent, LinkComponentProps {
|
|
|
17
16
|
}
|
|
18
17
|
export declare const FlyoutLinkItem: React.FC<FlyoutLinkItemProps>;
|
|
19
18
|
interface FlyoutGroupProp {
|
|
20
|
-
children: ReactNode;
|
|
19
|
+
children: React.ReactNode;
|
|
21
20
|
tabName: string;
|
|
22
21
|
}
|
|
23
22
|
export declare const FlyoutGroup: React.FC<FlyoutGroupProp>;
|
|
@@ -26,18 +25,20 @@ interface FlyoutActionProps extends LinkComponent, LinkComponentProps {
|
|
|
26
25
|
icon?: React.ReactNode;
|
|
27
26
|
}
|
|
28
27
|
export interface FlyoutActionsProps {
|
|
29
|
-
children?: ReactNode;
|
|
28
|
+
children?: React.ReactNode;
|
|
30
29
|
}
|
|
31
30
|
export declare const FlyoutActions: React.FC<FlyoutActionsProps>;
|
|
32
31
|
export declare const FlyoutAction: React.FC<FlyoutActionProps>;
|
|
33
32
|
interface FlyoutColumnProps {
|
|
34
33
|
title: string;
|
|
35
|
-
children: ReactNode;
|
|
34
|
+
children: React.ReactNode;
|
|
36
35
|
headlineActAs?: HeadlineProps['actAs'];
|
|
37
36
|
}
|
|
38
37
|
export declare const FlyoutColumn: React.FC<FlyoutColumnProps>;
|
|
39
38
|
export interface FlyoutProps {
|
|
40
|
-
children: ReactNode;
|
|
39
|
+
children: React.ReactNode;
|
|
40
|
+
currentTab: string;
|
|
41
|
+
setCurrentTab: (tab: string) => void;
|
|
41
42
|
}
|
|
42
43
|
export declare const Flyout: React.FC<FlyoutProps>;
|
|
43
44
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Flyout.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/flyout/Flyout.tsx"],"names":[],"mappings":"AAEA,OAAO,
|
|
1
|
+
{"version":3,"file":"Flyout.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/flyout/Flyout.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,EAAK,aAAa,EAAE,kBAAkB,EAAC,MAAM,gBAAgB,CAAC;AACrE,OAAO,EAAC,aAAa,EAAW,MAAM,aAAa,CAAC;AAgBpD,UAAU,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC;IACtE,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAgC9C,CAAC;AAEF,UAAU,cAAc;IACtB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAM9C,CAAC;AAEF,UAAU,mBAAoB,SAAQ,aAAa,EAAE,kBAAkB;IACrE,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAqBxD,CAAC;AAEF,UAAU,eAAe;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAWjD,CAAC;AAEF,UAAU,iBAAkB,SAAQ,aAAa,EAAE,kBAAkB;IACnE,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB;AAED,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAEtD,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAkBpD,CAAC;AAEF,UAAU,iBAAiB;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;CACxC;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAgBpD,CAAC;AAEF,MAAM,WAAW,WAAW;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAyBxC,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import React, { useContext } from 'react';
|
|
3
4
|
import { cn } from '../../../utils';
|
|
4
|
-
import React, { useContext, useEffect, useState } from 'react';
|
|
5
5
|
import { LinkList } from '../../index';
|
|
6
6
|
import { Container } from '../../layout/container';
|
|
7
7
|
import { BlockGrid, BlockChildrenWidthContainer } from '../../layout/block';
|
|
@@ -11,19 +11,14 @@ const TabContext = React.createContext({
|
|
|
11
11
|
currentTab: '',
|
|
12
12
|
setCurrentTab: () => { },
|
|
13
13
|
});
|
|
14
|
-
export const FlyoutTab = ({ text, tabName,
|
|
14
|
+
export const FlyoutTab = ({ text, tabName, ...props }) => {
|
|
15
15
|
const ctx = useContext(TabContext);
|
|
16
|
-
const isActive = tabName === ctx.currentTab;
|
|
16
|
+
const isActive = tabName.toLowerCase() === ctx.currentTab.toLowerCase();
|
|
17
17
|
const setTab = ctx.setCurrentTab;
|
|
18
|
-
useEffect(() => {
|
|
19
|
-
if (active && ctx.currentTab === '') {
|
|
20
|
-
setTab(tabName);
|
|
21
|
-
}
|
|
22
|
-
}, [active]);
|
|
23
18
|
return (_jsx("button", { onPointerDown: e => {
|
|
24
19
|
e.preventDefault();
|
|
25
20
|
e.stopPropagation();
|
|
26
|
-
}, className: cn('font-semibold font-text text-draeger-dark-blue-700 text-xl relative before:hidden flex items-center', 'pb-5 leading-[1.55rem] group-hover:no-underline', 'before:block before:left-1/2 before:right-1/2 before:content-[""] before:absolute before:bottom-0 before:h-1 before:bg-draeger-dark-blue-700 before:transition-all before:w-0 before:duration-300', isActive &&
|
|
21
|
+
}, tabIndex: 0, className: cn('font-semibold font-text text-draeger-dark-blue-700 text-xl relative before:hidden flex items-center', 'pb-5 leading-[1.55rem] group-hover:no-underline', 'before:block before:left-1/2 before:right-1/2 before:content-[""] before:absolute before:bottom-0 before:h-1 before:bg-draeger-dark-blue-700 before:transition-all before:w-0 before:duration-300', isActive &&
|
|
27
22
|
'before:w-[3.75rem] before:ml-[-1.875rem] before:bg-draeger-air-blue-250', 'hover:before:w-[3.75rem] hover:before:ml-[-1.875rem]'), onClick: e => {
|
|
28
23
|
setTab(tabName);
|
|
29
24
|
props.onClick?.(e);
|
|
@@ -39,21 +34,20 @@ export const FlyoutLinkItem = ({ text, LinkComponent = 'a', active = false, ...p
|
|
|
39
34
|
};
|
|
40
35
|
export const FlyoutGroup = ({ children, tabName }) => {
|
|
41
36
|
const ctx = useContext(TabContext);
|
|
42
|
-
const display = tabName === ctx.currentTab;
|
|
37
|
+
const display = tabName.toLowerCase() === ctx.currentTab.toLowerCase();
|
|
43
38
|
return (_jsx("div", { className: cn('flex justify-between pt-7 pb-14', !display && 'hidden'), children: children }));
|
|
44
39
|
};
|
|
45
40
|
export const FlyoutActions = ({ children }) => (_jsx("div", { className: "flex gap-10 pb-2", children: children }));
|
|
46
41
|
export const FlyoutAction = ({ text, LinkComponent, icon, ...props }) => {
|
|
47
42
|
const LinkComp = LinkComponent ? LinkComponent : 'a';
|
|
48
|
-
return (_jsxs(LinkComp, { ...props, className: cn('text-draeger-dark-blue-700 font-text
|
|
43
|
+
return (_jsxs(LinkComp, { ...props, className: cn('flex items-center w-auto text-draeger-dark-blue-700 font-text hover:underline'), children: [icon && _jsx(IconPropsWrapper, { size: 'lg', children: icon }), _jsx("span", { className: cn('ml-2 text-xl font-normal'), children: text })] }));
|
|
49
44
|
};
|
|
50
45
|
export const FlyoutColumn = ({ children, title, headlineActAs, }) => {
|
|
51
46
|
if (!children)
|
|
52
47
|
return;
|
|
53
48
|
return (_jsx(LinkList, { direction: 'col', headline: title, headlineActAs: headlineActAs, className: "min-w-0 flex-[1]", children: children }));
|
|
54
49
|
};
|
|
55
|
-
export const Flyout = ({ children }) => {
|
|
56
|
-
const [currentTab, setCurrentTab] = useState('');
|
|
50
|
+
export const Flyout = ({ children, currentTab, setCurrentTab, }) => {
|
|
57
51
|
return (_jsx(Container, { paddingTop: 'none', paddingBottom: 'none', className: "bg-draeger-white font-text", children: _jsx(BlockGrid, { paddingBottom: 'defaultStatic', children: _jsx(BlockChildrenWidthContainer, { className: "pt-10 pb-20", children: _jsx(TabContext.Provider, { value: {
|
|
58
52
|
currentTab,
|
|
59
53
|
setCurrentTab,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Flyout.js","sourceRoot":"","sources":["../../../../src/components/navigation/flyout/Flyout.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,
|
|
1
|
+
{"version":3,"file":"Flyout.js","sourceRoot":"","sources":["../../../../src/components/navigation/flyout/Flyout.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@odx/websites-react",
|
|
3
3
|
"author": "Drägerwerk AG & Co. KGaA",
|
|
4
|
-
"version": "1.1.
|
|
4
|
+
"version": "1.1.89",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
6
6
|
"description": "ODX React component library for websites",
|
|
7
7
|
"type": "module",
|
|
@@ -529,8 +529,8 @@
|
|
|
529
529
|
"typescript": "^5.4.5",
|
|
530
530
|
"vitest": "^3.1.0-beta.1",
|
|
531
531
|
"@odx/eslint-config-websites": "0.0.1",
|
|
532
|
-
"@odx/websites-
|
|
533
|
-
"@odx/websites-
|
|
532
|
+
"@odx/websites-tsconfig": "0.0.0",
|
|
533
|
+
"@odx/websites-ui": "0.2.34"
|
|
534
534
|
},
|
|
535
535
|
"peerDependencies": {
|
|
536
536
|
"@odx/websites-ui": ">=0.2.1",
|