@odx/websites-react 1.3.4 → 1.3.6
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.
- package/dist/components/layout/structuredList/StructuredList.d.ts.map +1 -1
- package/dist/components/layout/structuredList/StructuredList.js +5 -4
- package/dist/components/layout/structuredList/StructuredList.js.map +1 -1
- package/dist/components/layout/structuredList/StructuredListItem.d.ts.map +1 -1
- package/dist/components/layout/structuredList/StructuredListItem.js +5 -5
- package/dist/components/layout/structuredList/StructuredListItem.js.map +1 -1
- package/dist/components/navigation/anchorNav/AnchorNav.d.ts.map +1 -1
- package/dist/components/navigation/anchorNav/AnchorNav.js +19 -9
- package/dist/components/navigation/anchorNav/AnchorNav.js.map +1 -1
- package/dist/components/navigation/breadcrumbs/Breadcrumbs.d.ts.map +1 -1
- package/dist/components/navigation/breadcrumbs/Breadcrumbs.js +45 -17
- package/dist/components/navigation/breadcrumbs/Breadcrumbs.js.map +1 -1
- package/dist/hooks/useResizeObserver/index.d.ts +2 -0
- package/dist/hooks/useResizeObserver/index.d.ts.map +1 -0
- package/dist/hooks/useResizeObserver/index.js +2 -0
- package/dist/hooks/useResizeObserver/index.js.map +1 -0
- package/dist/hooks/useResizeObserver/useResizeObserver.d.ts +23 -0
- package/dist/hooks/useResizeObserver/useResizeObserver.d.ts.map +1 -0
- package/dist/hooks/useResizeObserver/useResizeObserver.js +52 -0
- package/dist/hooks/useResizeObserver/useResizeObserver.js.map +1 -0
- package/package.json +8 -4
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StructuredList.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/structuredList/StructuredList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"StructuredList.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/structuredList/StructuredList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,WAAW,4BAA6B,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACxF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,aAAa,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;CACpC;AA4BD,MAAM,WAAW,mBAAoB,SAAQ,4BAA4B;CAAG;AAE5E,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAejD,CAAC;AAEF,OAAO,EAAC,cAAc,EAAC,CAAC"}
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { cn } from '../../../utils';
|
|
2
3
|
import { BodyText } from '../../typography/bodyText';
|
|
3
|
-
const StructuredListComponent = ({ headline, children, paddingBottom = 'none', }) => {
|
|
4
|
-
return (_jsxs("div", { className:
|
|
4
|
+
const StructuredListComponent = ({ headline, children, paddingBottom = 'none', className, ...props }) => {
|
|
5
|
+
return (_jsxs("div", { className: cn('flex flex-col gap-4', paddingBottom === 'default' ? 'pb-20 md:pb-10' : 'pb-0', className), ...props, children: [headline && (_jsx(BodyText, { variant: "large", className: "text-draeger-cool-gray-750", children: headline })), _jsx("div", { className: "flex flex-col gap-6", children: children })] }));
|
|
5
6
|
};
|
|
6
|
-
const StructuredList = ({ children, headline, paddingBottom, }) => {
|
|
7
|
-
return (_jsx(StructuredListComponent, { headline: headline, paddingBottom: paddingBottom, children: children }));
|
|
7
|
+
const StructuredList = ({ children, headline, paddingBottom, ...props }) => {
|
|
8
|
+
return (_jsx(StructuredListComponent, { headline: headline, paddingBottom: paddingBottom, ...props, children: children }));
|
|
8
9
|
};
|
|
9
10
|
export { StructuredList };
|
|
10
11
|
//# sourceMappingURL=StructuredList.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StructuredList.js","sourceRoot":"","sources":["../../../../src/components/layout/structuredList/StructuredList.tsx"],"names":[],"mappings":";AACA,OAAO,EAAC,QAAQ,EAAC,MAAM,2BAA2B,CAAC;AAQnD,MAAM,uBAAuB,GAA2C,CAAC,EACvE,QAAQ,EACR,QAAQ,EACR,aAAa,GAAG,MAAM,
|
|
1
|
+
{"version":3,"file":"StructuredList.js","sourceRoot":"","sources":["../../../../src/components/layout/structuredList/StructuredList.tsx"],"names":[],"mappings":";AACA,OAAO,EAAC,EAAE,EAAC,MAAM,gBAAgB,CAAC;AAClC,OAAO,EAAC,QAAQ,EAAC,MAAM,2BAA2B,CAAC;AAQnD,MAAM,uBAAuB,GAA2C,CAAC,EACvE,QAAQ,EACR,QAAQ,EACR,aAAa,GAAG,MAAM,EACtB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,EAAE;IACH,OAAO,CACL,eACE,SAAS,EAAE,EAAE,CACX,qBAAqB,EACrB,aAAa,KAAK,SAAS,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,MAAM,EACvD,SAAS,CACV,KACG,KAAK,aAER,QAAQ,IAAI,CACX,KAAC,QAAQ,IAAC,OAAO,EAAC,OAAO,EAAC,SAAS,EAAC,4BAA4B,YAC7D,QAAQ,GACA,CACZ,EACD,cAAK,SAAS,EAAC,qBAAqB,YAAE,QAAQ,GAAO,IACjD,CACP,CAAC;AACJ,CAAC,CAAC;AAIF,MAAM,cAAc,GAAkC,CAAC,EACrD,QAAQ,EACR,QAAQ,EACR,aAAa,EACb,GAAG,KAAK,EACT,EAAE,EAAE;IACH,OAAO,CACL,KAAC,uBAAuB,IACtB,QAAQ,EAAE,QAAQ,EAClB,aAAa,EAAE,aAAa,KACxB,KAAK,YAER,QAAQ,GACe,CAC3B,CAAC;AACJ,CAAC,CAAC;AAEF,OAAO,EAAC,cAAc,EAAC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StructuredListItem.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/structuredList/StructuredListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAK,aAAa,EAAC,MAAM,gBAAgB,CAAC;AACjD,OAAO,EAAW,aAAa,EAAC,MAAM,2BAA2B,CAAC;AAGlE,OAAO,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AAC7C,OAAO,EAAQ,KAAK,UAAU,EAAC,MAAM,0BAA0B,CAAC;AAChE,MAAM,WAAW,+BAAgC,SAAQ,IAAI,CAC3D,aAAa,EACb,cAAc,CACf;IACC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AA8BD,MAAM,WAAW,oCAAqC,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAChG,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,QAAA,MAAM,+BAA+B,EAAE,KAAK,CAAC,EAAE,CAC7C,oCAAoC,CASnC,CAAC;AAEJ,MAAM,WAAW,qCAAsC,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACjG,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAgBD,MAAM,WAAW,uBAAwB,SAAQ,aAAa,EAAE,SAAS;IACvE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,IAAI,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;IAClC,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtC,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;CACpB;AAED,QAAA,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,
|
|
1
|
+
{"version":3,"file":"StructuredListItem.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/structuredList/StructuredListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAK,aAAa,EAAC,MAAM,gBAAgB,CAAC;AACjD,OAAO,EAAW,aAAa,EAAC,MAAM,2BAA2B,CAAC;AAGlE,OAAO,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AAC7C,OAAO,EAAQ,KAAK,UAAU,EAAC,MAAM,0BAA0B,CAAC;AAChE,MAAM,WAAW,+BAAgC,SAAQ,IAAI,CAC3D,aAAa,EACb,cAAc,CACf;IACC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AA8BD,MAAM,WAAW,oCAAqC,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAChG,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,QAAA,MAAM,+BAA+B,EAAE,KAAK,CAAC,EAAE,CAC7C,oCAAoC,CASnC,CAAC;AAEJ,MAAM,WAAW,qCAAsC,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACjG,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAgBD,MAAM,WAAW,uBAAwB,SAAQ,aAAa,EAAE,SAAS;IACvE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,IAAI,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;IAClC,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtC,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;CACpB;AAED,QAAA,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAqEzD,CAAC;AAEF,OAAO,EAAC,kBAAkB,EAAE,+BAA+B,EAAC,CAAC"}
|
|
@@ -6,17 +6,17 @@ import { BodyText } from '../../typography/bodyText';
|
|
|
6
6
|
import { Image } from '../../images-icons/image';
|
|
7
7
|
const StructuredListItemHeadline = ({ tag, headline, className, hasLink, }) => {
|
|
8
8
|
if (!headline && !tag)
|
|
9
|
-
return;
|
|
10
|
-
return (_jsxs("div", { className: "flex flex-wrap items-center self-stretch
|
|
9
|
+
return null;
|
|
10
|
+
return (_jsxs("div", { className: "flex flex-wrap items-center self-stretch gap-x-4", children: [headline && (_jsx(Headline, { className: cn(hasLink && 'group-focus:underline group-hover:underline', className), textColor: 'accent', headingLevel: 'h4', spacingBottom: false, children: _jsx("span", { dangerouslySetInnerHTML: { __html: headline } }) })), tag && _jsx("div", { className: "pt-1", children: tag })] }));
|
|
11
11
|
};
|
|
12
12
|
const StructuredListItemActionElement = ({ className, children, ...props }) => children && (_jsx("div", { className: cn('flex flex-col justify-center shrink-0', className), ...props, children: children }));
|
|
13
13
|
const StructuredListItemImageContainer = ({ className, children, ...props }) => (_jsx("div", { className: cn('pt-1.5 shrink-0 w-full md:w-[11.5625rem] flex justify-center relative aspect-4/3', className), ...props, children: children }));
|
|
14
|
-
const StructuredListItem = ({ className, headline, image, imageIcon, description, actionElement, actionBottomElement, checkboxElement, tag, details, LinkComponent, ...props }) => {
|
|
14
|
+
const StructuredListItem = ({ className, headline, image, imageIcon, description, actionElement, actionBottomElement, checkboxElement, tag, details, LinkComponent = 'a', ...props }) => {
|
|
15
15
|
const hasContent = Boolean(headline || description);
|
|
16
16
|
if (!hasContent)
|
|
17
|
-
return;
|
|
17
|
+
return null;
|
|
18
18
|
const Comp = (props.href ? LinkComponent : 'div');
|
|
19
|
-
return (_jsxs(Comp, { tabIndex: 0, className: cn('flex gap-6 items-center group outline-none flex-col md:flex-row', className), ...props, children: [image?.src && (_jsx(StructuredListItemImageContainer, { children: _jsx(Image, { ...image, ratio: "4/3" })
|
|
19
|
+
return (_jsxs(Comp, { tabIndex: 0, className: cn('flex gap-6 items-center group outline-none flex-col md:flex-row', className), ...props, children: [(image?.src || imageIcon) && (_jsx(StructuredListItemImageContainer, { children: image?.src ? _jsx(Image, { ...image, ratio: "4/3" }) : imageIcon })), checkboxElement && (_jsx(StructuredListItemActionElement, { className: "self-start md:self-center", children: checkboxElement })), _jsxs("div", { className: "flex flex-col items-start w-full min-w-0 gap-8 md:flex-row", children: [_jsxs("div", { className: "flex flex-col items-start gap-1 grow", children: [_jsx(StructuredListItemHeadline, { hasLink: Boolean(props.href), headline: headline, tag: tag }), _jsx(SlimRichText, { text: description, bottomSpacing: false }), details && details.length > 0 && (_jsx(BodyText, { variant: 'small', textColor: 'primary', asChild: true, children: _jsx("div", { className: "flex flex-wrap pt-2 gap-y-1 gap-x-6", children: details.map(detail => (_jsx("span", { children: detail }, detail))) }) })), _jsx(StructuredListItemActionElement, { className: "pt-4 w-full self-start", children: actionBottomElement })] }), actionElement && (_jsx(StructuredListItemActionElement, { className: "md:pb-7", children: actionElement }))] })] }));
|
|
20
20
|
};
|
|
21
21
|
export { StructuredListItem, StructuredListItemActionElement };
|
|
22
22
|
//# sourceMappingURL=StructuredListItem.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StructuredListItem.js","sourceRoot":"","sources":["../../../../src/components/layout/structuredList/StructuredListItem.tsx"],"names":[],"mappings":";AACA,OAAO,EAAC,EAAE,EAAgB,MAAM,gBAAgB,CAAC;AACjD,OAAO,EAAC,QAAQ,EAAgB,MAAM,2BAA2B,CAAC;AAClE,OAAO,EAAC,YAAY,EAAC,MAAM,SAAS,CAAC;AACrC,OAAO,EAAC,QAAQ,EAAC,MAAM,2BAA2B,CAAC;AAEnD,OAAO,EAAC,KAAK,EAAkB,MAAM,0BAA0B,CAAC;AAUhE,MAAM,0BAA0B,GAA8C,CAAC,EAC7E,GAAG,EACH,QAAQ,EACR,SAAS,EACT,OAAO,GACR,EAAE,EAAE;IACH,IAAI,CAAC,QAAQ,IAAI,CAAC,GAAG;QAAE,OAAO;
|
|
1
|
+
{"version":3,"file":"StructuredListItem.js","sourceRoot":"","sources":["../../../../src/components/layout/structuredList/StructuredListItem.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AnchorNav.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/anchorNav/AnchorNav.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAM,YAAY,EAAC,MAAM,0BAA0B,CAAC;AAI3D,OAAO,EAAY,KAAK,cAAc,EAAC,MAAM,wBAAwB,CAAC;
|
|
1
|
+
{"version":3,"file":"AnchorNav.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/anchorNav/AnchorNav.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAM,YAAY,EAAC,MAAM,0BAA0B,CAAC;AAI3D,OAAO,EAAY,KAAK,cAAc,EAAC,MAAM,wBAAwB,CAAC;AAOtE,MAAM,MAAM,UAAU,GAAG;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAC,CAAC;AAErD,MAAM,WAAW,4BAA4B;IAC3C,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,wBAAwB;IACvC,OAAO,EAAE,UAAU,EAAE,CAAC;IACtB,aAAa,EAAE,MAAM,CAAC;IACtB,eAAe,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,0BAA0B;IACzC,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,sBAAsB;IACrC,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,UAAU,EAAE,CAAC;IACtB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,MAAM,WAAW,cAAc;IAC7B,OAAO,EAAE,UAAU,EAAE,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAyFD,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CA6LvC,CAAC;AAIF,QAAA,MAAM,wBAAwB;;8EAa7B,CAAC;AACF,MAAM,WAAW,qBACf,SACE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,IAAI,CAAC,EAChD,YAAY,CAAC,OAAO,wBAAwB,CAAC;IAC/C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,QAAA,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAgCrD,CAAC;AAEF,MAAM,WAAW,yBAAyB;IACxC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,cAAc,CAAC,EAAE,cAAc,CAAC;CACjC;AAED,QAAA,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAa7D,CAAC;AAEF,OAAO,EAAC,SAAS,EAAE,gBAAgB,EAAE,oBAAoB,EAAC,CAAC"}
|
|
@@ -11,6 +11,7 @@ import { BlockGrid, BlockChildrenWidthContainer } from '../../layout/block';
|
|
|
11
11
|
import { IconCoreChevronLeft, IconCoreChevronRight } from '../../icon';
|
|
12
12
|
import { useElementSize } from '../../../hooks/useElementSize';
|
|
13
13
|
import { useIsomorphicLayoutEffect } from '../../../hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect';
|
|
14
|
+
import { useResizeObserver } from '../../../hooks/useResizeObserver';
|
|
14
15
|
const anchorNavTriggerLinkClasses = `
|
|
15
16
|
px-3 pt-1.5 pb-3.5
|
|
16
17
|
border-b-2 border-b-draeger-cool-gray-100
|
|
@@ -70,7 +71,15 @@ const AnchorNav = ({ anchors, initialAnchor }) => {
|
|
|
70
71
|
if (hashAnchor)
|
|
71
72
|
scrollTo(anchors.findIndex(({ id }) => id === hashAnchor), true);
|
|
72
73
|
}, [emblaApi]);
|
|
73
|
-
|
|
74
|
+
/**
|
|
75
|
+
* @param deferCarouselScroll keeps the carousel scroll out of the current
|
|
76
|
+
* frame. Embla watches its own size with a ResizeObserver, so scrolling it
|
|
77
|
+
* from inside a resize callback chains both observers together and the
|
|
78
|
+
* browser gives up with "ResizeObserver loop completed with undelivered
|
|
79
|
+
* notifications". Marking the active anchor is a cheap class change and can
|
|
80
|
+
* stay in the current frame; only the carousel scroll is postponed.
|
|
81
|
+
*/
|
|
82
|
+
const updateVisibleSection = (deferCarouselScroll = false) => {
|
|
74
83
|
if (isScrolling.current)
|
|
75
84
|
return;
|
|
76
85
|
const sectionsArray = Array.from(document.querySelectorAll('[data-section-id]'));
|
|
@@ -85,21 +94,22 @@ const AnchorNav = ({ anchors, initialAnchor }) => {
|
|
|
85
94
|
});
|
|
86
95
|
if (lastVisibleSection) {
|
|
87
96
|
const sectionId = lastVisibleSection.getAttribute('data-section-id');
|
|
88
|
-
setCurrentAnchor(sectionId);
|
|
97
|
+
setCurrentAnchor(current => current === sectionId ? current : sectionId);
|
|
89
98
|
const anchorIndex = anchors.findIndex(({ id }) => id === sectionId);
|
|
90
|
-
|
|
99
|
+
if (deferCarouselScroll) {
|
|
100
|
+
requestAnimationFrame(() => scrollTo(anchorIndex));
|
|
101
|
+
}
|
|
102
|
+
else {
|
|
103
|
+
scrollTo(anchorIndex);
|
|
104
|
+
}
|
|
91
105
|
}
|
|
92
106
|
};
|
|
107
|
+
useResizeObserver(containerRef, () => updateVisibleSection(true));
|
|
93
108
|
React.useEffect(() => {
|
|
94
|
-
const [activeSectionScrollHandler, cancel] = throttle(updateVisibleSection, 100);
|
|
109
|
+
const [activeSectionScrollHandler, cancel] = throttle(() => updateVisibleSection(), 100);
|
|
95
110
|
window.addEventListener('scroll', activeSectionScrollHandler);
|
|
96
|
-
const containerWidthObserver = new ResizeObserver(() => {
|
|
97
|
-
requestAnimationFrame(activeSectionScrollHandler);
|
|
98
|
-
});
|
|
99
|
-
containerWidthObserver.observe(containerRef.current);
|
|
100
111
|
return () => {
|
|
101
112
|
window.removeEventListener('scroll', activeSectionScrollHandler);
|
|
102
|
-
containerWidthObserver.disconnect();
|
|
103
113
|
cancel();
|
|
104
114
|
};
|
|
105
115
|
}, [emblaApi]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AnchorNav.js","sourceRoot":"","sources":["../../../../src/components/navigation/anchorNav/AnchorNav.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,gBAAgB,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAC,GAAG,EAAe,MAAM,0BAA0B,CAAC;AAC3D,OAAO,EAAC,EAAE,EAAE,QAAQ,EAAC,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAC,kBAAkB,EAAC,MAAM,iDAAiD,CAAC;AACnF,OAAO,EAAC,eAAe,EAAC,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAC,SAAS,EAAsB,MAAM,wBAAwB,CAAC;AACtE,OAAO,EAAC,SAAS,EAAE,2BAA2B,EAAC,MAAM,oBAAoB,CAAC;AAC1E,OAAO,EAAC,mBAAmB,EAAE,oBAAoB,EAAC,MAAM,YAAY,CAAC;AACrE,OAAO,EAAC,cAAc,EAAC,MAAM,+BAA+B,CAAC;AAC7D,OAAO,EAAC,yBAAyB,EAAC,MAAM,oEAAoE,CAAC;
|
|
1
|
+
{"version":3,"file":"AnchorNav.js","sourceRoot":"","sources":["../../../../src/components/navigation/anchorNav/AnchorNav.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Breadcrumbs.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/breadcrumbs/Breadcrumbs.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Breadcrumbs.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/breadcrumbs/Breadcrumbs.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACzE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,MAAM,WAAW,uBAAuB;IACtC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAwJD,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAoF3C,CAAC;AAEF,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAexD,CAAC;AAEF,OAAO,EAAC,iBAAiB,EAAE,WAAW,EAAC,CAAC"}
|
|
@@ -6,11 +6,22 @@ import { IconCoreChevronRight } from '../../icon';
|
|
|
6
6
|
import { BodyText } from '../../typography/bodyText';
|
|
7
7
|
import { Container } from '../../layout/container';
|
|
8
8
|
import { BlockGrid, BlockChildrenWidthContainer } from '../../layout/block';
|
|
9
|
+
import { useResizeObserver } from '../../../hooks/useResizeObserver';
|
|
9
10
|
import { breadcrumbItemClasses } from './BreadcrumbItem';
|
|
10
11
|
const breadcrumbsWrapperClasses = 'hidden lg:inline-block bg-surface-brand px-3';
|
|
11
12
|
const breadcrumbClasses = 'inline-flex py-1.5 px-1 gap-2 items-center';
|
|
12
13
|
const BASE_PADDING = 24;
|
|
13
14
|
const AVAILABLE_WIDTH_PERCENTAGE = 0.75;
|
|
15
|
+
/**
|
|
16
|
+
* Collapsing the breadcrumbs removes a line from the wrapping list, which can
|
|
17
|
+
* make the page short enough for the vertical scrollbar to disappear. That
|
|
18
|
+
* widens the viewport again and would immediately expand the breadcrumbs, which
|
|
19
|
+
* brings the scrollbar back — an endless flip-flop that the browser reports as
|
|
20
|
+
* "ResizeObserver loop completed with undelivered notifications". Expanding
|
|
21
|
+
* therefore requires noticeably more room than collapsing did, so a scrollbar
|
|
22
|
+
* appearing or disappearing can no longer flip the decision.
|
|
23
|
+
*/
|
|
24
|
+
const EXPAND_HYSTERESIS = 32;
|
|
14
25
|
const useBreadcrumbs = () => {
|
|
15
26
|
const [isTruncated, setIsTruncated] = React.useState(false);
|
|
16
27
|
const [isManuallyExpanded, setIsManuallyExpanded] = React.useState(false);
|
|
@@ -39,28 +50,50 @@ const useBreadcrumbs = () => {
|
|
|
39
50
|
});
|
|
40
51
|
return () => resizeObserver.disconnect();
|
|
41
52
|
}, []);
|
|
53
|
+
// The truncation handler must not change identity: it drives the
|
|
54
|
+
// ResizeObserver below, and a new identity would tear the observer down and
|
|
55
|
+
// re-observe, which emits a fresh notification and re-triggers the handler.
|
|
56
|
+
// Reading the changing values through refs keeps it stable. The refs are
|
|
57
|
+
// synced in a layout effect, so they are current before any of the effects
|
|
58
|
+
// below run and before the observer can fire.
|
|
59
|
+
const isTruncatedRef = React.useRef(isTruncated);
|
|
60
|
+
const isManuallyExpandedRef = React.useRef(isManuallyExpanded);
|
|
61
|
+
const breadcrumbsWidthRef = React.useRef(breadcrumbsWidth);
|
|
62
|
+
React.useLayoutEffect(() => {
|
|
63
|
+
isTruncatedRef.current = isTruncated;
|
|
64
|
+
isManuallyExpandedRef.current = isManuallyExpanded;
|
|
65
|
+
breadcrumbsWidthRef.current = breadcrumbsWidth;
|
|
66
|
+
}, [isTruncated, isManuallyExpanded, breadcrumbsWidth]);
|
|
42
67
|
// Main handler for width calculation and truncation
|
|
43
68
|
const calculateTruncation = React.useCallback(() => {
|
|
44
69
|
const container = containerRef.current;
|
|
45
70
|
const fullWidthElement = fullWidthRef.current;
|
|
46
71
|
if (!container || !fullWidthElement)
|
|
47
72
|
return;
|
|
48
|
-
const totalWidth =
|
|
73
|
+
const totalWidth = breadcrumbsWidthRef.current;
|
|
49
74
|
const maxAvailableWidth = Math.ceil(fullWidthElement.getBoundingClientRect().width *
|
|
50
75
|
AVAILABLE_WIDTH_PERCENTAGE);
|
|
51
|
-
|
|
76
|
+
// Once collapsed, only expand again when there is clearly enough room, so
|
|
77
|
+
// that a scrollbar toggling on and off cannot flip the state repeatedly.
|
|
78
|
+
const expandThreshold = isTruncatedRef.current
|
|
79
|
+
? maxAvailableWidth - EXPAND_HYSTERESIS
|
|
80
|
+
: maxAvailableWidth;
|
|
81
|
+
const isOverflowing = totalWidth > expandThreshold;
|
|
52
82
|
// Only truncate if not manually expanded
|
|
53
|
-
if (isOverflowing && !
|
|
54
|
-
|
|
83
|
+
if (isOverflowing && !isManuallyExpandedRef.current) {
|
|
84
|
+
if (!isTruncatedRef.current)
|
|
85
|
+
setIsTruncated(true);
|
|
55
86
|
}
|
|
56
87
|
else if (!isOverflowing) {
|
|
57
88
|
// If not overflowing, we can safely reset manual expansion
|
|
58
|
-
|
|
59
|
-
|
|
89
|
+
if (isTruncatedRef.current)
|
|
90
|
+
setIsTruncated(false);
|
|
91
|
+
if (isManuallyExpandedRef.current)
|
|
92
|
+
setIsManuallyExpanded(false);
|
|
60
93
|
// Hide expand button immediately when there's no overflow
|
|
61
94
|
}
|
|
62
95
|
// If overflowing but manually expanded, do nothing
|
|
63
|
-
}, [
|
|
96
|
+
}, []);
|
|
64
97
|
// Expand breadcrumbs manually
|
|
65
98
|
const expandBreadcrumbs = React.useCallback(() => {
|
|
66
99
|
setIsManuallyExpanded(true);
|
|
@@ -68,18 +101,13 @@ const useBreadcrumbs = () => {
|
|
|
68
101
|
// Reset to truncated state
|
|
69
102
|
const resetToTruncated = React.useCallback(() => {
|
|
70
103
|
setIsManuallyExpanded(false);
|
|
71
|
-
}, [
|
|
104
|
+
}, []);
|
|
105
|
+
useResizeObserver(fullWidthRef, calculateTruncation);
|
|
106
|
+
// Recalculate whenever the measured width of the items changes, i.e. when
|
|
107
|
+
// breadcrumb items were added or removed.
|
|
72
108
|
React.useLayoutEffect(() => {
|
|
73
|
-
const fullWidthElement = fullWidthRef.current;
|
|
74
|
-
if (!fullWidthElement)
|
|
75
|
-
return;
|
|
76
109
|
calculateTruncation();
|
|
77
|
-
|
|
78
|
-
requestAnimationFrame(calculateTruncation);
|
|
79
|
-
});
|
|
80
|
-
widthObserver.observe(fullWidthElement);
|
|
81
|
-
return () => widthObserver.disconnect();
|
|
82
|
-
}, [calculateTruncation]);
|
|
110
|
+
}, [breadcrumbsWidth, calculateTruncation]);
|
|
83
111
|
// Set up scroll and click outside listeners when expanded manually
|
|
84
112
|
React.useEffect(() => {
|
|
85
113
|
if (isManuallyExpanded) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Breadcrumbs.js","sourceRoot":"","sources":["../../../../src/components/navigation/breadcrumbs/Breadcrumbs.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAC,EAAE,EAAC,MAAM,gBAAgB,CAAC;AAClC,OAAO,EAAC,oBAAoB,EAAC,MAAM,YAAY,CAAC;AAChD,OAAO,EAAC,QAAQ,EAAC,MAAM,2BAA2B,CAAC;AACnD,OAAO,EAAC,SAAS,EAAC,MAAM,wBAAwB,CAAC;AACjD,OAAO,EAAC,SAAS,EAAE,2BAA2B,EAAC,MAAM,oBAAoB,CAAC;AAC1E,OAAO,EAAC,qBAAqB,EAAC,MAAM,kBAAkB,CAAC;AAWvD,MAAM,yBAAyB,GAC7B,8CAA8C,CAAC;AACjD,MAAM,iBAAiB,GAAG,4CAA4C,CAAC;AAEvE,MAAM,YAAY,GAAG,EAAE,CAAC;AACxB,MAAM,0BAA0B,GAAG,IAAI,CAAC;
|
|
1
|
+
{"version":3,"file":"Breadcrumbs.js","sourceRoot":"","sources":["../../../../src/components/navigation/breadcrumbs/Breadcrumbs.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/useResizeObserver/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/hooks/useResizeObserver/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* Observes an element and runs `onResize` when its size changes.
|
|
4
|
+
*
|
|
5
|
+
* Wiring up a ResizeObserver by hand invites three mistakes that all end in
|
|
6
|
+
* "ResizeObserver loop completed with undelivered notifications":
|
|
7
|
+
*
|
|
8
|
+
* 1. Passing the callback as an effect dependency. The effect then tears the
|
|
9
|
+
* observer down and calls `observe()` again on every callback identity
|
|
10
|
+
* change, and `observe()` delivers an initial notification straight away —
|
|
11
|
+
* so the observer keeps re-triggering itself.
|
|
12
|
+
* 2. Reacting to the initial notification that `observe()` emits. Nothing has
|
|
13
|
+
* resized at that point; acting on it only adds a redundant layout pass.
|
|
14
|
+
* 3. Leaving a scheduled `requestAnimationFrame` behind on cleanup, which lets
|
|
15
|
+
* the callback run against an unmounted component.
|
|
16
|
+
*
|
|
17
|
+
* This hook keeps the callback in a ref so the observer is created exactly once
|
|
18
|
+
* per target, skips the initial notification, and cancels a pending frame on
|
|
19
|
+
* cleanup. The callback is deferred to the next animation frame so that layout
|
|
20
|
+
* writes never happen inside the observer's own delivery cycle.
|
|
21
|
+
*/
|
|
22
|
+
export declare const useResizeObserver: (targetRef: React.RefObject<Element | null>, onResize: () => void) => void;
|
|
23
|
+
//# sourceMappingURL=useResizeObserver.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useResizeObserver.d.ts","sourceRoot":"","sources":["../../../src/hooks/useResizeObserver/useResizeObserver.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,iBAAiB,GAC5B,WAAW,KAAK,CAAC,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC,EAC1C,UAAU,MAAM,IAAI,SAkCrB,CAAC"}
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect';
|
|
4
|
+
/**
|
|
5
|
+
* Observes an element and runs `onResize` when its size changes.
|
|
6
|
+
*
|
|
7
|
+
* Wiring up a ResizeObserver by hand invites three mistakes that all end in
|
|
8
|
+
* "ResizeObserver loop completed with undelivered notifications":
|
|
9
|
+
*
|
|
10
|
+
* 1. Passing the callback as an effect dependency. The effect then tears the
|
|
11
|
+
* observer down and calls `observe()` again on every callback identity
|
|
12
|
+
* change, and `observe()` delivers an initial notification straight away —
|
|
13
|
+
* so the observer keeps re-triggering itself.
|
|
14
|
+
* 2. Reacting to the initial notification that `observe()` emits. Nothing has
|
|
15
|
+
* resized at that point; acting on it only adds a redundant layout pass.
|
|
16
|
+
* 3. Leaving a scheduled `requestAnimationFrame` behind on cleanup, which lets
|
|
17
|
+
* the callback run against an unmounted component.
|
|
18
|
+
*
|
|
19
|
+
* This hook keeps the callback in a ref so the observer is created exactly once
|
|
20
|
+
* per target, skips the initial notification, and cancels a pending frame on
|
|
21
|
+
* cleanup. The callback is deferred to the next animation frame so that layout
|
|
22
|
+
* writes never happen inside the observer's own delivery cycle.
|
|
23
|
+
*/
|
|
24
|
+
export const useResizeObserver = (targetRef, onResize) => {
|
|
25
|
+
const onResizeRef = React.useRef(onResize);
|
|
26
|
+
// Keep the ref current without making the observer depend on the callback
|
|
27
|
+
// identity. A layout effect runs before the observer can fire.
|
|
28
|
+
useIsomorphicLayoutEffect(() => {
|
|
29
|
+
onResizeRef.current = onResize;
|
|
30
|
+
});
|
|
31
|
+
React.useEffect(() => {
|
|
32
|
+
const target = targetRef.current;
|
|
33
|
+
if (!target)
|
|
34
|
+
return;
|
|
35
|
+
let frame = 0;
|
|
36
|
+
let initialNotificationSeen = false;
|
|
37
|
+
const observer = new ResizeObserver(() => {
|
|
38
|
+
if (!initialNotificationSeen) {
|
|
39
|
+
initialNotificationSeen = true;
|
|
40
|
+
return;
|
|
41
|
+
}
|
|
42
|
+
cancelAnimationFrame(frame);
|
|
43
|
+
frame = requestAnimationFrame(() => onResizeRef.current());
|
|
44
|
+
});
|
|
45
|
+
observer.observe(target);
|
|
46
|
+
return () => {
|
|
47
|
+
cancelAnimationFrame(frame);
|
|
48
|
+
observer.disconnect();
|
|
49
|
+
};
|
|
50
|
+
}, [targetRef]);
|
|
51
|
+
};
|
|
52
|
+
//# sourceMappingURL=useResizeObserver.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useResizeObserver.js","sourceRoot":"","sources":["../../../src/hooks/useResizeObserver/useResizeObserver.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAC,yBAAyB,EAAC,MAAM,8BAA8B,CAAC;AAEvE;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAC/B,SAA0C,EAC1C,QAAoB,EACpB,EAAE;IACF,MAAM,WAAW,GAAG,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;IAE3C,0EAA0E;IAC1E,+DAA+D;IAC/D,yBAAyB,CAAC,GAAG,EAAE;QAC7B,WAAW,CAAC,OAAO,GAAG,QAAQ,CAAC;IACjC,CAAC,CAAC,CAAC;IAEH,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,MAAM,MAAM,GAAG,SAAS,CAAC,OAAO,CAAC;QACjC,IAAI,CAAC,MAAM;YAAE,OAAO;QAEpB,IAAI,KAAK,GAAG,CAAC,CAAC;QACd,IAAI,uBAAuB,GAAG,KAAK,CAAC;QAEpC,MAAM,QAAQ,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE;YACvC,IAAI,CAAC,uBAAuB,EAAE,CAAC;gBAC7B,uBAAuB,GAAG,IAAI,CAAC;gBAC/B,OAAO;YACT,CAAC;YAED,oBAAoB,CAAC,KAAK,CAAC,CAAC;YAC5B,KAAK,GAAG,qBAAqB,CAAC,GAAG,EAAE,CAAC,WAAW,CAAC,OAAO,EAAE,CAAC,CAAC;QAC7D,CAAC,CAAC,CAAC;QAEH,QAAQ,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;QAEzB,OAAO,GAAG,EAAE;YACV,oBAAoB,CAAC,KAAK,CAAC,CAAC;YAC5B,QAAQ,CAAC,UAAU,EAAE,CAAC;QACxB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;AAClB,CAAC,CAAC"}
|
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.3.
|
|
4
|
+
"version": "1.3.6",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
6
6
|
"description": "ODX React component library for websites",
|
|
7
7
|
"type": "module",
|
|
@@ -132,7 +132,8 @@
|
|
|
132
132
|
"./web/genAI/chat": "./dist/web/genAI/chat/index.js",
|
|
133
133
|
"./web/genAI/source": "./dist/web/genAI/source/index.js",
|
|
134
134
|
"./components/navigation/searchButton": "./dist/components/navigation/searchButton/index.js",
|
|
135
|
-
"./web/contact": "./dist/web/contact/index.js"
|
|
135
|
+
"./web/contact": "./dist/web/contact/index.js",
|
|
136
|
+
"./hooks/useResizeObserver": "./dist/hooks/useResizeObserver/index.js"
|
|
136
137
|
},
|
|
137
138
|
"typesVersions": {
|
|
138
139
|
"*": {
|
|
@@ -510,6 +511,9 @@
|
|
|
510
511
|
],
|
|
511
512
|
"web/contact": [
|
|
512
513
|
"./dist/web/contact/index.d.ts"
|
|
514
|
+
],
|
|
515
|
+
"hooks/useResizeObserver": [
|
|
516
|
+
"./dist/hooks/useResizeObserver/index.d.ts"
|
|
513
517
|
]
|
|
514
518
|
}
|
|
515
519
|
},
|
|
@@ -568,9 +572,9 @@
|
|
|
568
572
|
"ts-node": "^10.9.2",
|
|
569
573
|
"typescript": "^5.4.5",
|
|
570
574
|
"vitest": "^3.1.0-beta.1",
|
|
575
|
+
"@odx/eslint-config-websites": "0.0.1",
|
|
571
576
|
"@odx/websites-tsconfig": "0.0.0",
|
|
572
|
-
"@odx/websites-ui": "0.2.42"
|
|
573
|
-
"@odx/eslint-config-websites": "0.0.1"
|
|
577
|
+
"@odx/websites-ui": "0.2.42"
|
|
574
578
|
},
|
|
575
579
|
"peerDependencies": {
|
|
576
580
|
"@odx/websites-ui": ">=0.2.1",
|