@elliemae/ds-scrollable-container 3.12.0-rc.2 → 3.12.0-rc.3
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/cjs/DSScrollableContainer.js +65 -56
- package/dist/cjs/DSScrollableContainer.js.map +1 -1
- package/dist/cjs/config/useConfig.js +1 -1
- package/dist/cjs/config/useConfig.js.map +2 -2
- package/dist/esm/DSScrollableContainer.js +65 -56
- package/dist/esm/DSScrollableContainer.js.map +1 -1
- package/dist/esm/config/useConfig.js +1 -1
- package/dist/esm/config/useConfig.js.map +2 -2
- package/package.json +3 -3
|
@@ -42,68 +42,77 @@ const DSScrollableContainer = (props) => {
|
|
|
42
42
|
xStyledAttrs,
|
|
43
43
|
osTargetRef
|
|
44
44
|
} = (0, import_config.useConfig)(props);
|
|
45
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.StyledOsHostWrapper, {
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.GlobalStyleScrollContainer, {}),
|
|
51
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.StyledOsHost, {
|
|
45
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.StyledOsHostWrapper, { "data-testid": import_exported_related.DSScrollableContainerDataTestIds.ROOT, ...globalAttrs, ...xStyledAttrs, children: [
|
|
46
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.GlobalStyleScrollContainer, {}),
|
|
47
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
48
|
+
import_styled.StyledOsHost,
|
|
49
|
+
{
|
|
52
50
|
"data-testid": import_exported_related.DSScrollableContainerDataTestIds.HOST,
|
|
53
51
|
className: "os-host",
|
|
54
52
|
tabIndex: -1,
|
|
55
53
|
ref: osTargetRef,
|
|
56
54
|
children: [
|
|
57
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
55
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
56
|
+
import_styled.StyledOsResizeObserverHost,
|
|
57
|
+
{
|
|
58
|
+
"data-testid": import_exported_related.DSScrollableContainerDataTestIds.RESIZE_OBSERVER_HOST,
|
|
59
|
+
className: "os-resize-observer-host"
|
|
60
|
+
}
|
|
61
|
+
),
|
|
62
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledOsPadding, { "data-testid": import_exported_related.DSScrollableContainerDataTestIds.PADDING, className: "os-padding", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledOsViewport, { "data-testid": import_exported_related.DSScrollableContainerDataTestIds.VIEWPORT, className: "os-viewport", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledOsContent, { "data-testid": import_exported_related.DSScrollableContainerDataTestIds.CONTENT, className: "os-content", "aria-hidden": true, children }) }) }),
|
|
63
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
64
|
+
import_styled.StyledOsScrollbarHorizontal,
|
|
65
|
+
{
|
|
66
|
+
"data-testid": import_exported_related.DSScrollableContainerDataTestIds.SCROLLBAR_HORIZONTAL,
|
|
67
|
+
className: "os-scrollbar os-scrollbar-horizontal ",
|
|
68
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
69
|
+
import_styled.StyledOsScrollbarTrack,
|
|
70
|
+
{
|
|
71
|
+
"data-testid": import_exported_related.DSScrollableContainerDataTestIds.SCROLLBAR_TRACK,
|
|
72
|
+
className: "os-scrollbar-track",
|
|
73
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
74
|
+
import_styled.StyledOsScrollbarHandle,
|
|
75
|
+
{
|
|
76
|
+
"data-testid": import_exported_related.DSScrollableContainerDataTestIds.SCROLLBAR_HANDLE,
|
|
77
|
+
className: "os-scrollbar-handle"
|
|
78
|
+
}
|
|
79
|
+
)
|
|
80
|
+
}
|
|
81
|
+
)
|
|
82
|
+
}
|
|
83
|
+
),
|
|
84
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
85
|
+
import_styled.StyledOsScrollbarVertical,
|
|
86
|
+
{
|
|
87
|
+
"data-testid": import_exported_related.DSScrollableContainerDataTestIds.SCROLLBAR_VERTICAL,
|
|
88
|
+
className: "os-scrollbar os-scrollbar-vertical",
|
|
89
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
90
|
+
import_styled.StyledOsScrollbarTrack,
|
|
91
|
+
{
|
|
92
|
+
"data-testid": import_exported_related.DSScrollableContainerDataTestIds.SCROLLBAR_TRACK,
|
|
93
|
+
className: "os-scrollbar-track",
|
|
94
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
95
|
+
import_styled.StyledOsScrollbarHandle,
|
|
96
|
+
{
|
|
97
|
+
"data-testid": import_exported_related.DSScrollableContainerDataTestIds.SCROLLBAR_HANDLE,
|
|
98
|
+
className: "os-scrollbar-handle"
|
|
99
|
+
}
|
|
100
|
+
)
|
|
101
|
+
}
|
|
102
|
+
)
|
|
103
|
+
}
|
|
104
|
+
),
|
|
105
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
106
|
+
import_styled.StyledOsScrollbarCorner,
|
|
107
|
+
{
|
|
108
|
+
"data-testid": import_exported_related.DSScrollableContainerDataTestIds.SCROLLBAR_CORNER,
|
|
109
|
+
className: "os-scrollbar-corner"
|
|
110
|
+
}
|
|
111
|
+
)
|
|
103
112
|
]
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
});
|
|
113
|
+
}
|
|
114
|
+
)
|
|
115
|
+
] });
|
|
107
116
|
};
|
|
108
117
|
DSScrollableContainer.propTypes = import_react_desc_prop_types.DSScrollableContainerPropTypes;
|
|
109
118
|
DSScrollableContainer.displayName = import_exported_related.DSScrollableContainerName;
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/DSScrollableContainer.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import React from 'react';\n\nimport { describe } from '@elliemae/ds-utilities';\nimport type { DSScrollableContainerT } from './react-desc-prop-types';\nimport { DSScrollableContainerPropTypes } from './react-desc-prop-types';\nimport { DSScrollableContainerDataTestIds, DSScrollableContainerName } from './exported_related';\nimport { useConfig } from './config';\nimport {\n StyledOsContent,\n StyledOsHost,\n StyledOsHostWrapper,\n StyledOsPadding,\n StyledOsResizeObserverHost,\n StyledOsScrollbarCorner,\n StyledOsScrollbarHandle,\n StyledOsScrollbarHorizontal,\n StyledOsScrollbarTrack,\n StyledOsScrollbarVertical,\n StyledOsViewport,\n GlobalStyleScrollContainer,\n} from './styled';\n\nconst DSScrollableContainer: React.ComponentType<DSScrollableContainerT.Props> = (props) => {\n const {\n propsWithDefault: { children },\n globalAttrs,\n xStyledAttrs,\n osTargetRef,\n } = useConfig(props);\n\n return (\n <StyledOsHostWrapper data-testid={DSScrollableContainerDataTestIds.ROOT} {...globalAttrs} {...xStyledAttrs}>\n <GlobalStyleScrollContainer />\n <StyledOsHost\n data-testid={DSScrollableContainerDataTestIds.HOST}\n className=\"os-host\"\n tabIndex={-1}\n ref={osTargetRef}\n >\n <StyledOsResizeObserverHost\n data-testid={DSScrollableContainerDataTestIds.RESIZE_OBSERVER_HOST}\n className=\"os-resize-observer-host\"\n />\n <StyledOsPadding data-testid={DSScrollableContainerDataTestIds.PADDING} className=\"os-padding\">\n <StyledOsViewport data-testid={DSScrollableContainerDataTestIds.VIEWPORT} className=\"os-viewport\">\n <StyledOsContent data-testid={DSScrollableContainerDataTestIds.CONTENT} className=\"os-content\" aria-hidden>\n {children}\n </StyledOsContent>\n </StyledOsViewport>\n </StyledOsPadding>\n <StyledOsScrollbarHorizontal\n data-testid={DSScrollableContainerDataTestIds.SCROLLBAR_HORIZONTAL}\n className=\"os-scrollbar os-scrollbar-horizontal \"\n >\n <StyledOsScrollbarTrack\n data-testid={DSScrollableContainerDataTestIds.SCROLLBAR_TRACK}\n className=\"os-scrollbar-track\"\n >\n <StyledOsScrollbarHandle\n data-testid={DSScrollableContainerDataTestIds.SCROLLBAR_HANDLE}\n className=\"os-scrollbar-handle\"\n />\n </StyledOsScrollbarTrack>\n </StyledOsScrollbarHorizontal>\n <StyledOsScrollbarVertical\n data-testid={DSScrollableContainerDataTestIds.SCROLLBAR_VERTICAL}\n className=\"os-scrollbar os-scrollbar-vertical\"\n >\n <StyledOsScrollbarTrack\n data-testid={DSScrollableContainerDataTestIds.SCROLLBAR_TRACK}\n className=\"os-scrollbar-track\"\n >\n <StyledOsScrollbarHandle\n data-testid={DSScrollableContainerDataTestIds.SCROLLBAR_HANDLE}\n className=\"os-scrollbar-handle\"\n />\n </StyledOsScrollbarTrack>\n </StyledOsScrollbarVertical>\n <StyledOsScrollbarCorner\n data-testid={DSScrollableContainerDataTestIds.SCROLLBAR_CORNER}\n className=\"os-scrollbar-corner\"\n />\n </StyledOsHost>\n </StyledOsHostWrapper>\n );\n};\n\nDSScrollableContainer.propTypes = DSScrollableContainerPropTypes;\nDSScrollableContainer.displayName = DSScrollableContainerName;\nconst DSScrollableContainerWithSchema = describe(DSScrollableContainer);\nDSScrollableContainerWithSchema.propTypes = DSScrollableContainerPropTypes;\n\nexport { DSScrollableContainer, DSScrollableContainerWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgCjB;AA9BN,0BAAyB;AAEzB,mCAA+C;AAC/C,8BAA4E;AAC5E,oBAA0B;AAC1B,oBAaO;AAEP,MAAM,wBAA2E,CAAC,UAAU;AAC1F,QAAM;AAAA,IACJ,kBAAkB,EAAE,SAAS;AAAA,IAC7B;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAU,KAAK;AAEnB,SACE,6CAAC
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgCjB;AA9BN,0BAAyB;AAEzB,mCAA+C;AAC/C,8BAA4E;AAC5E,oBAA0B;AAC1B,oBAaO;AAEP,MAAM,wBAA2E,CAAC,UAAU;AAC1F,QAAM;AAAA,IACJ,kBAAkB,EAAE,SAAS;AAAA,IAC7B;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAU,KAAK;AAEnB,SACE,6CAAC,qCAAoB,eAAa,yDAAiC,MAAO,GAAG,aAAc,GAAG,cAC5F;AAAA,gDAAC,4CAA2B;AAAA,IAC5B;AAAA,MAAC;AAAA;AAAA,QACC,eAAa,yDAAiC;AAAA,QAC9C,WAAU;AAAA,QACV,UAAU;AAAA,QACV,KAAK;AAAA,QAEL;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,eAAa,yDAAiC;AAAA,cAC9C,WAAU;AAAA;AAAA,UACZ;AAAA,UACA,4CAAC,iCAAgB,eAAa,yDAAiC,SAAS,WAAU,cAChF,sDAAC,kCAAiB,eAAa,yDAAiC,UAAU,WAAU,eAClF,sDAAC,iCAAgB,eAAa,yDAAiC,SAAS,WAAU,cAAa,eAAW,MACvG,UACH,GACF,GACF;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,eAAa,yDAAiC;AAAA,cAC9C,WAAU;AAAA,cAEV;AAAA,gBAAC;AAAA;AAAA,kBACC,eAAa,yDAAiC;AAAA,kBAC9C,WAAU;AAAA,kBAEV;AAAA,oBAAC;AAAA;AAAA,sBACC,eAAa,yDAAiC;AAAA,sBAC9C,WAAU;AAAA;AAAA,kBACZ;AAAA;AAAA,cACF;AAAA;AAAA,UACF;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,eAAa,yDAAiC;AAAA,cAC9C,WAAU;AAAA,cAEV;AAAA,gBAAC;AAAA;AAAA,kBACC,eAAa,yDAAiC;AAAA,kBAC9C,WAAU;AAAA,kBAEV;AAAA,oBAAC;AAAA;AAAA,sBACC,eAAa,yDAAiC;AAAA,sBAC9C,WAAU;AAAA;AAAA,kBACZ;AAAA;AAAA,cACF;AAAA;AAAA,UACF;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,eAAa,yDAAiC;AAAA,cAC9C,WAAU;AAAA;AAAA,UACZ;AAAA;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;AAEA,sBAAsB,YAAY;AAClC,sBAAsB,cAAc;AACpC,MAAM,sCAAkC,8BAAS,qBAAqB;AACtE,gCAAgC,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -40,7 +40,7 @@ const options = {
|
|
|
40
40
|
};
|
|
41
41
|
const useConfig = (props) => {
|
|
42
42
|
const propsWithDefault = props;
|
|
43
|
-
(0, import_ds_utilities.useValidateTypescriptPropTypes)(propsWithDefault, import_react_desc_prop_types.DSScrollableContainerPropTypes);
|
|
43
|
+
(0, import_ds_utilities.useValidateTypescriptPropTypes)(propsWithDefault, import_react_desc_prop_types.DSScrollableContainerPropTypes, "DSScrollableContainer");
|
|
44
44
|
const globalAttrs = (0, import_ds_utilities.useGetGlobalAttributes)(propsWithDefault);
|
|
45
45
|
const xStyledAttrs = (0, import_ds_utilities.useGetXstyledProps)(propsWithDefault);
|
|
46
46
|
const [osInstance, setOsInstance] = (0, import_react.useState)();
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/config/useConfig.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-utilities';\nimport { useGetGlobalAttributes, useValidateTypescriptPropTypes, useGetXstyledProps } from '@elliemae/ds-utilities';\nimport type { Options } from 'overlayscrollbars';\nimport OverlayScrollbars from 'overlayscrollbars';\nimport { useEffect, useRef, useState } from 'react';\nimport type { DSScrollableContainerT } from '../react-desc-prop-types';\nimport { DSScrollableContainerPropTypes } from '../react-desc-prop-types';\n\nconst options: Options = {\n scrollbars: {\n autoHide: 'leave',\n autoHideDelay: 0,\n },\n};\n\ninterface UseConfigT {\n propsWithDefault: DSScrollableContainerT.Props;\n globalAttributes: GlobalAttributesT;\n xstyledProps: XstyledProps;\n osTargetRef: React.RefObject<HTMLDivElement>;\n}\n\nexport const useConfig = (props: DSScrollableContainerT.Props): UseConfigT => {\n const propsWithDefault = props;\n useValidateTypescriptPropTypes(propsWithDefault, DSScrollableContainerPropTypes);\n const globalAttrs = useGetGlobalAttributes(propsWithDefault);\n const xStyledAttrs = useGetXstyledProps(propsWithDefault);\n\n const [osInstance, setOsInstance] = useState<OverlayScrollbars>();\n const osTargetRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n if (osTargetRef.current) {\n const nextOsInstance: OverlayScrollbars = OverlayScrollbars(osTargetRef.current, options);\n setOsInstance(nextOsInstance);\n }\n }, [osInstance]);\n\n return { propsWithDefault: props, globalAttrs, xStyledAttrs, osTargetRef };\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,0BAA2F;AAE3F,+BAA8B;AAC9B,mBAA4C;AAE5C,mCAA+C;AAE/C,MAAM,UAAmB;AAAA,EACvB,YAAY;AAAA,IACV,UAAU;AAAA,IACV,eAAe;AAAA,EACjB;AACF;AASO,MAAM,YAAY,CAAC,UAAoD;AAC5E,QAAM,mBAAmB;AACzB,0DAA+B,kBAAkB,
|
|
4
|
+
"sourcesContent": ["import type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-utilities';\nimport { useGetGlobalAttributes, useValidateTypescriptPropTypes, useGetXstyledProps } from '@elliemae/ds-utilities';\nimport type { Options } from 'overlayscrollbars';\nimport OverlayScrollbars from 'overlayscrollbars';\nimport { useEffect, useRef, useState } from 'react';\nimport type { DSScrollableContainerT } from '../react-desc-prop-types';\nimport { DSScrollableContainerPropTypes } from '../react-desc-prop-types';\n\nconst options: Options = {\n scrollbars: {\n autoHide: 'leave',\n autoHideDelay: 0,\n },\n};\n\ninterface UseConfigT {\n propsWithDefault: DSScrollableContainerT.Props;\n globalAttributes: GlobalAttributesT;\n xstyledProps: XstyledProps;\n osTargetRef: React.RefObject<HTMLDivElement>;\n}\n\nexport const useConfig = (props: DSScrollableContainerT.Props): UseConfigT => {\n const propsWithDefault = props;\n useValidateTypescriptPropTypes(propsWithDefault, DSScrollableContainerPropTypes, 'DSScrollableContainer');\n const globalAttrs = useGetGlobalAttributes(propsWithDefault);\n const xStyledAttrs = useGetXstyledProps(propsWithDefault);\n\n const [osInstance, setOsInstance] = useState<OverlayScrollbars>();\n const osTargetRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n if (osTargetRef.current) {\n const nextOsInstance: OverlayScrollbars = OverlayScrollbars(osTargetRef.current, options);\n setOsInstance(nextOsInstance);\n }\n }, [osInstance]);\n\n return { propsWithDefault: props, globalAttrs, xStyledAttrs, osTargetRef };\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,0BAA2F;AAE3F,+BAA8B;AAC9B,mBAA4C;AAE5C,mCAA+C;AAE/C,MAAM,UAAmB;AAAA,EACvB,YAAY;AAAA,IACV,UAAU;AAAA,IACV,eAAe;AAAA,EACjB;AACF;AASO,MAAM,YAAY,CAAC,UAAoD;AAC5E,QAAM,mBAAmB;AACzB,0DAA+B,kBAAkB,6DAAgC,uBAAuB;AACxG,QAAM,kBAAc,4CAAuB,gBAAgB;AAC3D,QAAM,mBAAe,wCAAmB,gBAAgB;AAExD,QAAM,CAAC,YAAY,aAAa,QAAI,uBAA4B;AAChE,QAAM,kBAAc,qBAAuB,IAAI;AAE/C,8BAAU,MAAM;AACd,QAAI,YAAY,SAAS;AACvB,YAAM,qBAAoC,yBAAAA,SAAkB,YAAY,SAAS,OAAO;AACxF,oBAAc,cAAc;AAAA,IAC9B;AAAA,EACF,GAAG,CAAC,UAAU,CAAC;AAEf,SAAO,EAAE,kBAAkB,OAAO,aAAa,cAAc,YAAY;AAC3E;",
|
|
6
6
|
"names": ["OverlayScrollbars"]
|
|
7
7
|
}
|
|
@@ -25,68 +25,77 @@ const DSScrollableContainer = (props) => {
|
|
|
25
25
|
xStyledAttrs,
|
|
26
26
|
osTargetRef
|
|
27
27
|
} = useConfig(props);
|
|
28
|
-
return /* @__PURE__ */ jsxs(StyledOsHostWrapper, {
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
/* @__PURE__ */ jsx(GlobalStyleScrollContainer, {}),
|
|
34
|
-
/* @__PURE__ */ jsxs(StyledOsHost, {
|
|
28
|
+
return /* @__PURE__ */ jsxs(StyledOsHostWrapper, { "data-testid": DSScrollableContainerDataTestIds.ROOT, ...globalAttrs, ...xStyledAttrs, children: [
|
|
29
|
+
/* @__PURE__ */ jsx(GlobalStyleScrollContainer, {}),
|
|
30
|
+
/* @__PURE__ */ jsxs(
|
|
31
|
+
StyledOsHost,
|
|
32
|
+
{
|
|
35
33
|
"data-testid": DSScrollableContainerDataTestIds.HOST,
|
|
36
34
|
className: "os-host",
|
|
37
35
|
tabIndex: -1,
|
|
38
36
|
ref: osTargetRef,
|
|
39
37
|
children: [
|
|
40
|
-
/* @__PURE__ */ jsx(
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
38
|
+
/* @__PURE__ */ jsx(
|
|
39
|
+
StyledOsResizeObserverHost,
|
|
40
|
+
{
|
|
41
|
+
"data-testid": DSScrollableContainerDataTestIds.RESIZE_OBSERVER_HOST,
|
|
42
|
+
className: "os-resize-observer-host"
|
|
43
|
+
}
|
|
44
|
+
),
|
|
45
|
+
/* @__PURE__ */ jsx(StyledOsPadding, { "data-testid": DSScrollableContainerDataTestIds.PADDING, className: "os-padding", children: /* @__PURE__ */ jsx(StyledOsViewport, { "data-testid": DSScrollableContainerDataTestIds.VIEWPORT, className: "os-viewport", children: /* @__PURE__ */ jsx(StyledOsContent, { "data-testid": DSScrollableContainerDataTestIds.CONTENT, className: "os-content", "aria-hidden": true, children }) }) }),
|
|
46
|
+
/* @__PURE__ */ jsx(
|
|
47
|
+
StyledOsScrollbarHorizontal,
|
|
48
|
+
{
|
|
49
|
+
"data-testid": DSScrollableContainerDataTestIds.SCROLLBAR_HORIZONTAL,
|
|
50
|
+
className: "os-scrollbar os-scrollbar-horizontal ",
|
|
51
|
+
children: /* @__PURE__ */ jsx(
|
|
52
|
+
StyledOsScrollbarTrack,
|
|
53
|
+
{
|
|
54
|
+
"data-testid": DSScrollableContainerDataTestIds.SCROLLBAR_TRACK,
|
|
55
|
+
className: "os-scrollbar-track",
|
|
56
|
+
children: /* @__PURE__ */ jsx(
|
|
57
|
+
StyledOsScrollbarHandle,
|
|
58
|
+
{
|
|
59
|
+
"data-testid": DSScrollableContainerDataTestIds.SCROLLBAR_HANDLE,
|
|
60
|
+
className: "os-scrollbar-handle"
|
|
61
|
+
}
|
|
62
|
+
)
|
|
63
|
+
}
|
|
64
|
+
)
|
|
65
|
+
}
|
|
66
|
+
),
|
|
67
|
+
/* @__PURE__ */ jsx(
|
|
68
|
+
StyledOsScrollbarVertical,
|
|
69
|
+
{
|
|
70
|
+
"data-testid": DSScrollableContainerDataTestIds.SCROLLBAR_VERTICAL,
|
|
71
|
+
className: "os-scrollbar os-scrollbar-vertical",
|
|
72
|
+
children: /* @__PURE__ */ jsx(
|
|
73
|
+
StyledOsScrollbarTrack,
|
|
74
|
+
{
|
|
75
|
+
"data-testid": DSScrollableContainerDataTestIds.SCROLLBAR_TRACK,
|
|
76
|
+
className: "os-scrollbar-track",
|
|
77
|
+
children: /* @__PURE__ */ jsx(
|
|
78
|
+
StyledOsScrollbarHandle,
|
|
79
|
+
{
|
|
80
|
+
"data-testid": DSScrollableContainerDataTestIds.SCROLLBAR_HANDLE,
|
|
81
|
+
className: "os-scrollbar-handle"
|
|
82
|
+
}
|
|
83
|
+
)
|
|
84
|
+
}
|
|
85
|
+
)
|
|
86
|
+
}
|
|
87
|
+
),
|
|
88
|
+
/* @__PURE__ */ jsx(
|
|
89
|
+
StyledOsScrollbarCorner,
|
|
90
|
+
{
|
|
91
|
+
"data-testid": DSScrollableContainerDataTestIds.SCROLLBAR_CORNER,
|
|
92
|
+
className: "os-scrollbar-corner"
|
|
93
|
+
}
|
|
94
|
+
)
|
|
86
95
|
]
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
});
|
|
96
|
+
}
|
|
97
|
+
)
|
|
98
|
+
] });
|
|
90
99
|
};
|
|
91
100
|
DSScrollableContainer.propTypes = DSScrollableContainerPropTypes;
|
|
92
101
|
DSScrollableContainer.displayName = DSScrollableContainerName;
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSScrollableContainer.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\n\nimport { describe } from '@elliemae/ds-utilities';\nimport type { DSScrollableContainerT } from './react-desc-prop-types';\nimport { DSScrollableContainerPropTypes } from './react-desc-prop-types';\nimport { DSScrollableContainerDataTestIds, DSScrollableContainerName } from './exported_related';\nimport { useConfig } from './config';\nimport {\n StyledOsContent,\n StyledOsHost,\n StyledOsHostWrapper,\n StyledOsPadding,\n StyledOsResizeObserverHost,\n StyledOsScrollbarCorner,\n StyledOsScrollbarHandle,\n StyledOsScrollbarHorizontal,\n StyledOsScrollbarTrack,\n StyledOsScrollbarVertical,\n StyledOsViewport,\n GlobalStyleScrollContainer,\n} from './styled';\n\nconst DSScrollableContainer: React.ComponentType<DSScrollableContainerT.Props> = (props) => {\n const {\n propsWithDefault: { children },\n globalAttrs,\n xStyledAttrs,\n osTargetRef,\n } = useConfig(props);\n\n return (\n <StyledOsHostWrapper data-testid={DSScrollableContainerDataTestIds.ROOT} {...globalAttrs} {...xStyledAttrs}>\n <GlobalStyleScrollContainer />\n <StyledOsHost\n data-testid={DSScrollableContainerDataTestIds.HOST}\n className=\"os-host\"\n tabIndex={-1}\n ref={osTargetRef}\n >\n <StyledOsResizeObserverHost\n data-testid={DSScrollableContainerDataTestIds.RESIZE_OBSERVER_HOST}\n className=\"os-resize-observer-host\"\n />\n <StyledOsPadding data-testid={DSScrollableContainerDataTestIds.PADDING} className=\"os-padding\">\n <StyledOsViewport data-testid={DSScrollableContainerDataTestIds.VIEWPORT} className=\"os-viewport\">\n <StyledOsContent data-testid={DSScrollableContainerDataTestIds.CONTENT} className=\"os-content\" aria-hidden>\n {children}\n </StyledOsContent>\n </StyledOsViewport>\n </StyledOsPadding>\n <StyledOsScrollbarHorizontal\n data-testid={DSScrollableContainerDataTestIds.SCROLLBAR_HORIZONTAL}\n className=\"os-scrollbar os-scrollbar-horizontal \"\n >\n <StyledOsScrollbarTrack\n data-testid={DSScrollableContainerDataTestIds.SCROLLBAR_TRACK}\n className=\"os-scrollbar-track\"\n >\n <StyledOsScrollbarHandle\n data-testid={DSScrollableContainerDataTestIds.SCROLLBAR_HANDLE}\n className=\"os-scrollbar-handle\"\n />\n </StyledOsScrollbarTrack>\n </StyledOsScrollbarHorizontal>\n <StyledOsScrollbarVertical\n data-testid={DSScrollableContainerDataTestIds.SCROLLBAR_VERTICAL}\n className=\"os-scrollbar os-scrollbar-vertical\"\n >\n <StyledOsScrollbarTrack\n data-testid={DSScrollableContainerDataTestIds.SCROLLBAR_TRACK}\n className=\"os-scrollbar-track\"\n >\n <StyledOsScrollbarHandle\n data-testid={DSScrollableContainerDataTestIds.SCROLLBAR_HANDLE}\n className=\"os-scrollbar-handle\"\n />\n </StyledOsScrollbarTrack>\n </StyledOsScrollbarVertical>\n <StyledOsScrollbarCorner\n data-testid={DSScrollableContainerDataTestIds.SCROLLBAR_CORNER}\n className=\"os-scrollbar-corner\"\n />\n </StyledOsHost>\n </StyledOsHostWrapper>\n );\n};\n\nDSScrollableContainer.propTypes = DSScrollableContainerPropTypes;\nDSScrollableContainer.displayName = DSScrollableContainerName;\nconst DSScrollableContainerWithSchema = describe(DSScrollableContainer);\nDSScrollableContainerWithSchema.propTypes = DSScrollableContainerPropTypes;\n\nexport { DSScrollableContainer, DSScrollableContainerWithSchema };\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACgCjB,cACA,YADA;AA9BN,SAAS,gBAAgB;AAEzB,SAAS,sCAAsC;AAC/C,SAAS,kCAAkC,iCAAiC;AAC5E,SAAS,iBAAiB;AAC1B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,MAAM,wBAA2E,CAAC,UAAU;AAC1F,QAAM;AAAA,IACJ,kBAAkB,EAAE,SAAS;AAAA,IAC7B;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,UAAU,KAAK;AAEnB,SACE,qBAAC
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACgCjB,cACA,YADA;AA9BN,SAAS,gBAAgB;AAEzB,SAAS,sCAAsC;AAC/C,SAAS,kCAAkC,iCAAiC;AAC5E,SAAS,iBAAiB;AAC1B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,MAAM,wBAA2E,CAAC,UAAU;AAC1F,QAAM;AAAA,IACJ,kBAAkB,EAAE,SAAS;AAAA,IAC7B;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,UAAU,KAAK;AAEnB,SACE,qBAAC,uBAAoB,eAAa,iCAAiC,MAAO,GAAG,aAAc,GAAG,cAC5F;AAAA,wBAAC,8BAA2B;AAAA,IAC5B;AAAA,MAAC;AAAA;AAAA,QACC,eAAa,iCAAiC;AAAA,QAC9C,WAAU;AAAA,QACV,UAAU;AAAA,QACV,KAAK;AAAA,QAEL;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,eAAa,iCAAiC;AAAA,cAC9C,WAAU;AAAA;AAAA,UACZ;AAAA,UACA,oBAAC,mBAAgB,eAAa,iCAAiC,SAAS,WAAU,cAChF,8BAAC,oBAAiB,eAAa,iCAAiC,UAAU,WAAU,eAClF,8BAAC,mBAAgB,eAAa,iCAAiC,SAAS,WAAU,cAAa,eAAW,MACvG,UACH,GACF,GACF;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,eAAa,iCAAiC;AAAA,cAC9C,WAAU;AAAA,cAEV;AAAA,gBAAC;AAAA;AAAA,kBACC,eAAa,iCAAiC;AAAA,kBAC9C,WAAU;AAAA,kBAEV;AAAA,oBAAC;AAAA;AAAA,sBACC,eAAa,iCAAiC;AAAA,sBAC9C,WAAU;AAAA;AAAA,kBACZ;AAAA;AAAA,cACF;AAAA;AAAA,UACF;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,eAAa,iCAAiC;AAAA,cAC9C,WAAU;AAAA,cAEV;AAAA,gBAAC;AAAA;AAAA,kBACC,eAAa,iCAAiC;AAAA,kBAC9C,WAAU;AAAA,kBAEV;AAAA,oBAAC;AAAA;AAAA,sBACC,eAAa,iCAAiC;AAAA,sBAC9C,WAAU;AAAA;AAAA,kBACZ;AAAA;AAAA,cACF;AAAA;AAAA,UACF;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,eAAa,iCAAiC;AAAA,cAC9C,WAAU;AAAA;AAAA,UACZ;AAAA;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;AAEA,sBAAsB,YAAY;AAClC,sBAAsB,cAAc;AACpC,MAAM,kCAAkC,SAAS,qBAAqB;AACtE,gCAAgC,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -11,7 +11,7 @@ const options = {
|
|
|
11
11
|
};
|
|
12
12
|
const useConfig = (props) => {
|
|
13
13
|
const propsWithDefault = props;
|
|
14
|
-
useValidateTypescriptPropTypes(propsWithDefault, DSScrollableContainerPropTypes);
|
|
14
|
+
useValidateTypescriptPropTypes(propsWithDefault, DSScrollableContainerPropTypes, "DSScrollableContainer");
|
|
15
15
|
const globalAttrs = useGetGlobalAttributes(propsWithDefault);
|
|
16
16
|
const xStyledAttrs = useGetXstyledProps(propsWithDefault);
|
|
17
17
|
const [osInstance, setOsInstance] = useState();
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useConfig.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-utilities';\nimport { useGetGlobalAttributes, useValidateTypescriptPropTypes, useGetXstyledProps } from '@elliemae/ds-utilities';\nimport type { Options } from 'overlayscrollbars';\nimport OverlayScrollbars from 'overlayscrollbars';\nimport { useEffect, useRef, useState } from 'react';\nimport type { DSScrollableContainerT } from '../react-desc-prop-types';\nimport { DSScrollableContainerPropTypes } from '../react-desc-prop-types';\n\nconst options: Options = {\n scrollbars: {\n autoHide: 'leave',\n autoHideDelay: 0,\n },\n};\n\ninterface UseConfigT {\n propsWithDefault: DSScrollableContainerT.Props;\n globalAttributes: GlobalAttributesT;\n xstyledProps: XstyledProps;\n osTargetRef: React.RefObject<HTMLDivElement>;\n}\n\nexport const useConfig = (props: DSScrollableContainerT.Props): UseConfigT => {\n const propsWithDefault = props;\n useValidateTypescriptPropTypes(propsWithDefault, DSScrollableContainerPropTypes);\n const globalAttrs = useGetGlobalAttributes(propsWithDefault);\n const xStyledAttrs = useGetXstyledProps(propsWithDefault);\n\n const [osInstance, setOsInstance] = useState<OverlayScrollbars>();\n const osTargetRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n if (osTargetRef.current) {\n const nextOsInstance: OverlayScrollbars = OverlayScrollbars(osTargetRef.current, options);\n setOsInstance(nextOsInstance);\n }\n }, [osInstance]);\n\n return { propsWithDefault: props, globalAttrs, xStyledAttrs, osTargetRef };\n};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,wBAAwB,gCAAgC,0BAA0B;AAE3F,OAAO,uBAAuB;AAC9B,SAAS,WAAW,QAAQ,gBAAgB;AAE5C,SAAS,sCAAsC;AAE/C,MAAM,UAAmB;AAAA,EACvB,YAAY;AAAA,IACV,UAAU;AAAA,IACV,eAAe;AAAA,EACjB;AACF;AASO,MAAM,YAAY,CAAC,UAAoD;AAC5E,QAAM,mBAAmB;AACzB,iCAA+B,kBAAkB,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-utilities';\nimport { useGetGlobalAttributes, useValidateTypescriptPropTypes, useGetXstyledProps } from '@elliemae/ds-utilities';\nimport type { Options } from 'overlayscrollbars';\nimport OverlayScrollbars from 'overlayscrollbars';\nimport { useEffect, useRef, useState } from 'react';\nimport type { DSScrollableContainerT } from '../react-desc-prop-types';\nimport { DSScrollableContainerPropTypes } from '../react-desc-prop-types';\n\nconst options: Options = {\n scrollbars: {\n autoHide: 'leave',\n autoHideDelay: 0,\n },\n};\n\ninterface UseConfigT {\n propsWithDefault: DSScrollableContainerT.Props;\n globalAttributes: GlobalAttributesT;\n xstyledProps: XstyledProps;\n osTargetRef: React.RefObject<HTMLDivElement>;\n}\n\nexport const useConfig = (props: DSScrollableContainerT.Props): UseConfigT => {\n const propsWithDefault = props;\n useValidateTypescriptPropTypes(propsWithDefault, DSScrollableContainerPropTypes, 'DSScrollableContainer');\n const globalAttrs = useGetGlobalAttributes(propsWithDefault);\n const xStyledAttrs = useGetXstyledProps(propsWithDefault);\n\n const [osInstance, setOsInstance] = useState<OverlayScrollbars>();\n const osTargetRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n if (osTargetRef.current) {\n const nextOsInstance: OverlayScrollbars = OverlayScrollbars(osTargetRef.current, options);\n setOsInstance(nextOsInstance);\n }\n }, [osInstance]);\n\n return { propsWithDefault: props, globalAttrs, xStyledAttrs, osTargetRef };\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,wBAAwB,gCAAgC,0BAA0B;AAE3F,OAAO,uBAAuB;AAC9B,SAAS,WAAW,QAAQ,gBAAgB;AAE5C,SAAS,sCAAsC;AAE/C,MAAM,UAAmB;AAAA,EACvB,YAAY;AAAA,IACV,UAAU;AAAA,IACV,eAAe;AAAA,EACjB;AACF;AASO,MAAM,YAAY,CAAC,UAAoD;AAC5E,QAAM,mBAAmB;AACzB,iCAA+B,kBAAkB,gCAAgC,uBAAuB;AACxG,QAAM,cAAc,uBAAuB,gBAAgB;AAC3D,QAAM,eAAe,mBAAmB,gBAAgB;AAExD,QAAM,CAAC,YAAY,aAAa,IAAI,SAA4B;AAChE,QAAM,cAAc,OAAuB,IAAI;AAE/C,YAAU,MAAM;AACd,QAAI,YAAY,SAAS;AACvB,YAAM,iBAAoC,kBAAkB,YAAY,SAAS,OAAO;AACxF,oBAAc,cAAc;AAAA,IAC9B;AAAA,EACF,GAAG,CAAC,UAAU,CAAC;AAEf,SAAO,EAAE,kBAAkB,OAAO,aAAa,cAAc,YAAY;AAC3E;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-scrollable-container",
|
|
3
|
-
"version": "3.12.0-rc.
|
|
3
|
+
"version": "3.12.0-rc.3",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Scrollable Container",
|
|
6
6
|
"files": [
|
|
@@ -35,8 +35,8 @@
|
|
|
35
35
|
"indent": 4
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@elliemae/ds-system": "3.12.0-rc.
|
|
39
|
-
"@elliemae/ds-utilities": "3.12.0-rc.
|
|
38
|
+
"@elliemae/ds-system": "3.12.0-rc.3",
|
|
39
|
+
"@elliemae/ds-utilities": "3.12.0-rc.3",
|
|
40
40
|
"overlayscrollbars": "1.13.3"
|
|
41
41
|
},
|
|
42
42
|
"peerDependencies": {
|