@elliemae/ds-shuttle-v2 3.70.0-next.3 → 3.70.0-next.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.
|
@@ -33,8 +33,8 @@ __export(ShuttleItem_exports, {
|
|
|
33
33
|
module.exports = __toCommonJS(ShuttleItem_exports);
|
|
34
34
|
var React = __toESM(require("react"));
|
|
35
35
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
36
|
+
var import_ds_floating_context = require("@elliemae/ds-floating-context");
|
|
36
37
|
var import_ds_grid = require("@elliemae/ds-grid");
|
|
37
|
-
var import_ds_popperjs = require("@elliemae/ds-popperjs");
|
|
38
38
|
var import_ds_system = require("@elliemae/ds-system");
|
|
39
39
|
const StyledTooltipContentWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid)`
|
|
40
40
|
background: white;
|
|
@@ -42,6 +42,18 @@ const StyledTooltipContentWrapper = (0, import_ds_system.styled)(import_ds_grid.
|
|
|
42
42
|
const ShuttleItem = (props) => {
|
|
43
43
|
const { componentProps, shouldShowTooltip = true, TooltipContent = null, children } = props;
|
|
44
44
|
const { tooltipHelpers } = componentProps;
|
|
45
|
+
const isOpen = !!(shouldShowTooltip && TooltipContent && tooltipHelpers?.shouldShowPopover);
|
|
46
|
+
const {
|
|
47
|
+
refs,
|
|
48
|
+
floatingStyles,
|
|
49
|
+
arrowStyles,
|
|
50
|
+
context,
|
|
51
|
+
isOpen: isFloatingOpen
|
|
52
|
+
} = (0, import_ds_floating_context.useFloatingContext)({
|
|
53
|
+
externallyControlledIsOpen: isOpen,
|
|
54
|
+
withoutAnimation: true,
|
|
55
|
+
customOffset: [0, 14]
|
|
56
|
+
});
|
|
45
57
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
46
58
|
import_ds_grid.Grid,
|
|
47
59
|
{
|
|
@@ -49,10 +61,22 @@ const ShuttleItem = (props) => {
|
|
|
49
61
|
alignItems: "center",
|
|
50
62
|
justifyContent: "center",
|
|
51
63
|
gutter: "xxxs",
|
|
52
|
-
ref: tooltipHelpers?.setReferenceElement,
|
|
64
|
+
ref: (0, import_ds_system.mergeRefs)(tooltipHelpers?.setReferenceElement, refs.setReference),
|
|
53
65
|
children: [
|
|
54
66
|
children,
|
|
55
|
-
shouldShowTooltip && TooltipContent &&
|
|
67
|
+
shouldShowTooltip && TooltipContent && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
68
|
+
import_ds_floating_context.FloatingWrapper,
|
|
69
|
+
{
|
|
70
|
+
innerRef: refs.setFloating,
|
|
71
|
+
isOpen: isFloatingOpen,
|
|
72
|
+
floatingStyles,
|
|
73
|
+
context,
|
|
74
|
+
children: [
|
|
75
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledTooltipContentWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TooltipContent, { ...componentProps }) }),
|
|
76
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_floating_context.PopoverArrow, { ...arrowStyles })
|
|
77
|
+
]
|
|
78
|
+
}
|
|
79
|
+
)
|
|
56
80
|
]
|
|
57
81
|
}
|
|
58
82
|
);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/exported-related/ShuttleItem.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport { useFloatingContext, FloatingWrapper, PopoverArrow } from '@elliemae/ds-floating-context';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled, mergeRefs } from '@elliemae/ds-system';\nimport type { DSShuttleV2T } from '../react-desc-prop-types.js';\n\nconst StyledTooltipContentWrapper = styled(Grid)`\n background: white;\n`;\n\nexport type ShuttleItemProps = React.PropsWithChildren<{\n componentProps: DSShuttleV2T.ComponentProps;\n shouldShowTooltip?: boolean;\n TooltipContent?: React.ComponentType<DSShuttleV2T.ComponentProps>;\n}>;\n\n// for now we create a stud state and return a paragraph with the state while logging the props\nexport const ShuttleItem: React.ComponentType<ShuttleItemProps> = (props) => {\n const { componentProps, shouldShowTooltip = true, TooltipContent = null, children } = props;\n const { tooltipHelpers } = componentProps;\n\n const isOpen = !!(shouldShowTooltip && TooltipContent && tooltipHelpers?.shouldShowPopover);\n const {\n refs,\n floatingStyles,\n arrowStyles,\n context,\n isOpen: isFloatingOpen,\n } = useFloatingContext({\n externallyControlledIsOpen: isOpen,\n withoutAnimation: true,\n customOffset: [0, 14],\n });\n\n return (\n <Grid\n cols={['minmax(2.308rem, 1fr)', '1px', 'auto']}\n alignItems=\"center\"\n justifyContent=\"center\"\n gutter=\"xxxs\"\n ref={mergeRefs(tooltipHelpers?.setReferenceElement, refs.setReference)}\n >\n {children}\n {shouldShowTooltip && TooltipContent && (\n <FloatingWrapper\n innerRef={refs.setFloating}\n isOpen={isFloatingOpen}\n floatingStyles={floatingStyles}\n context={context}\n >\n <StyledTooltipContentWrapper>\n <TooltipContent {...componentProps} />\n </StyledTooltipContentWrapper>\n <PopoverArrow {...arrowStyles} />\n </FloatingWrapper>\n )}\n </Grid>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD4Cf;AA3CR,iCAAkE;AAClE,qBAAqB;AACrB,uBAAkC;AAGlC,MAAM,kCAA8B,yBAAO,mBAAI;AAAA;AAAA;AAWxC,MAAM,cAAqD,CAAC,UAAU;AAC3E,QAAM,EAAE,gBAAgB,oBAAoB,MAAM,iBAAiB,MAAM,SAAS,IAAI;AACtF,QAAM,EAAE,eAAe,IAAI;AAE3B,QAAM,SAAS,CAAC,EAAE,qBAAqB,kBAAkB,gBAAgB;AACzE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,EACV,QAAI,+CAAmB;AAAA,IACrB,4BAA4B;AAAA,IAC5B,kBAAkB;AAAA,IAClB,cAAc,CAAC,GAAG,EAAE;AAAA,EACtB,CAAC;AAED,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,CAAC,yBAAyB,OAAO,MAAM;AAAA,MAC7C,YAAW;AAAA,MACX,gBAAe;AAAA,MACf,QAAO;AAAA,MACP,SAAK,4BAAU,gBAAgB,qBAAqB,KAAK,YAAY;AAAA,MAEpE;AAAA;AAAA,QACA,qBAAqB,kBACpB;AAAA,UAAC;AAAA;AAAA,YACC,UAAU,KAAK;AAAA,YACf,QAAQ;AAAA,YACR;AAAA,YACA;AAAA,YAEA;AAAA,0DAAC,+BACC,sDAAC,kBAAgB,GAAG,gBAAgB,GACtC;AAAA,cACA,4CAAC,2CAAc,GAAG,aAAa;AAAA;AAAA;AAAA,QACjC;AAAA;AAAA;AAAA,EAEJ;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,14 +1,26 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { useFloatingContext, FloatingWrapper, PopoverArrow } from "@elliemae/ds-floating-context";
|
|
3
4
|
import { Grid } from "@elliemae/ds-grid";
|
|
4
|
-
import {
|
|
5
|
-
import { styled } from "@elliemae/ds-system";
|
|
5
|
+
import { styled, mergeRefs } from "@elliemae/ds-system";
|
|
6
6
|
const StyledTooltipContentWrapper = styled(Grid)`
|
|
7
7
|
background: white;
|
|
8
8
|
`;
|
|
9
9
|
const ShuttleItem = (props) => {
|
|
10
10
|
const { componentProps, shouldShowTooltip = true, TooltipContent = null, children } = props;
|
|
11
11
|
const { tooltipHelpers } = componentProps;
|
|
12
|
+
const isOpen = !!(shouldShowTooltip && TooltipContent && tooltipHelpers?.shouldShowPopover);
|
|
13
|
+
const {
|
|
14
|
+
refs,
|
|
15
|
+
floatingStyles,
|
|
16
|
+
arrowStyles,
|
|
17
|
+
context,
|
|
18
|
+
isOpen: isFloatingOpen
|
|
19
|
+
} = useFloatingContext({
|
|
20
|
+
externallyControlledIsOpen: isOpen,
|
|
21
|
+
withoutAnimation: true,
|
|
22
|
+
customOffset: [0, 14]
|
|
23
|
+
});
|
|
12
24
|
return /* @__PURE__ */ jsxs(
|
|
13
25
|
Grid,
|
|
14
26
|
{
|
|
@@ -16,10 +28,22 @@ const ShuttleItem = (props) => {
|
|
|
16
28
|
alignItems: "center",
|
|
17
29
|
justifyContent: "center",
|
|
18
30
|
gutter: "xxxs",
|
|
19
|
-
ref: tooltipHelpers?.setReferenceElement,
|
|
31
|
+
ref: mergeRefs(tooltipHelpers?.setReferenceElement, refs.setReference),
|
|
20
32
|
children: [
|
|
21
33
|
children,
|
|
22
|
-
shouldShowTooltip && TooltipContent &&
|
|
34
|
+
shouldShowTooltip && TooltipContent && /* @__PURE__ */ jsxs(
|
|
35
|
+
FloatingWrapper,
|
|
36
|
+
{
|
|
37
|
+
innerRef: refs.setFloating,
|
|
38
|
+
isOpen: isFloatingOpen,
|
|
39
|
+
floatingStyles,
|
|
40
|
+
context,
|
|
41
|
+
children: [
|
|
42
|
+
/* @__PURE__ */ jsx(StyledTooltipContentWrapper, { children: /* @__PURE__ */ jsx(TooltipContent, { ...componentProps }) }),
|
|
43
|
+
/* @__PURE__ */ jsx(PopoverArrow, { ...arrowStyles })
|
|
44
|
+
]
|
|
45
|
+
}
|
|
46
|
+
)
|
|
23
47
|
]
|
|
24
48
|
}
|
|
25
49
|
);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/exported-related/ShuttleItem.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport {
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { useFloatingContext, FloatingWrapper, PopoverArrow } from '@elliemae/ds-floating-context';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled, mergeRefs } from '@elliemae/ds-system';\nimport type { DSShuttleV2T } from '../react-desc-prop-types.js';\n\nconst StyledTooltipContentWrapper = styled(Grid)`\n background: white;\n`;\n\nexport type ShuttleItemProps = React.PropsWithChildren<{\n componentProps: DSShuttleV2T.ComponentProps;\n shouldShowTooltip?: boolean;\n TooltipContent?: React.ComponentType<DSShuttleV2T.ComponentProps>;\n}>;\n\n// for now we create a stud state and return a paragraph with the state while logging the props\nexport const ShuttleItem: React.ComponentType<ShuttleItemProps> = (props) => {\n const { componentProps, shouldShowTooltip = true, TooltipContent = null, children } = props;\n const { tooltipHelpers } = componentProps;\n\n const isOpen = !!(shouldShowTooltip && TooltipContent && tooltipHelpers?.shouldShowPopover);\n const {\n refs,\n floatingStyles,\n arrowStyles,\n context,\n isOpen: isFloatingOpen,\n } = useFloatingContext({\n externallyControlledIsOpen: isOpen,\n withoutAnimation: true,\n customOffset: [0, 14],\n });\n\n return (\n <Grid\n cols={['minmax(2.308rem, 1fr)', '1px', 'auto']}\n alignItems=\"center\"\n justifyContent=\"center\"\n gutter=\"xxxs\"\n ref={mergeRefs(tooltipHelpers?.setReferenceElement, refs.setReference)}\n >\n {children}\n {shouldShowTooltip && TooltipContent && (\n <FloatingWrapper\n innerRef={refs.setFloating}\n isOpen={isFloatingOpen}\n floatingStyles={floatingStyles}\n context={context}\n >\n <StyledTooltipContentWrapper>\n <TooltipContent {...componentProps} />\n </StyledTooltipContentWrapper>\n <PopoverArrow {...arrowStyles} />\n </FloatingWrapper>\n )}\n </Grid>\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;AC4Cf,SAOI,KAPJ;AA3CR,SAAS,oBAAoB,iBAAiB,oBAAoB;AAClE,SAAS,YAAY;AACrB,SAAS,QAAQ,iBAAiB;AAGlC,MAAM,8BAA8B,OAAO,IAAI;AAAA;AAAA;AAWxC,MAAM,cAAqD,CAAC,UAAU;AAC3E,QAAM,EAAE,gBAAgB,oBAAoB,MAAM,iBAAiB,MAAM,SAAS,IAAI;AACtF,QAAM,EAAE,eAAe,IAAI;AAE3B,QAAM,SAAS,CAAC,EAAE,qBAAqB,kBAAkB,gBAAgB;AACzE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,EACV,IAAI,mBAAmB;AAAA,IACrB,4BAA4B;AAAA,IAC5B,kBAAkB;AAAA,IAClB,cAAc,CAAC,GAAG,EAAE;AAAA,EACtB,CAAC;AAED,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,CAAC,yBAAyB,OAAO,MAAM;AAAA,MAC7C,YAAW;AAAA,MACX,gBAAe;AAAA,MACf,QAAO;AAAA,MACP,KAAK,UAAU,gBAAgB,qBAAqB,KAAK,YAAY;AAAA,MAEpE;AAAA;AAAA,QACA,qBAAqB,kBACpB;AAAA,UAAC;AAAA;AAAA,YACC,UAAU,KAAK;AAAA,YACf,QAAQ;AAAA,YACR;AAAA,YACA;AAAA,YAEA;AAAA,kCAAC,+BACC,8BAAC,kBAAgB,GAAG,gBAAgB,GACtC;AAAA,cACA,oBAAC,gBAAc,GAAG,aAAa;AAAA;AAAA;AAAA,QACjC;AAAA;AAAA;AAAA,EAEJ;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-shuttle-v2",
|
|
3
|
-
"version": "3.70.0-next.
|
|
3
|
+
"version": "3.70.0-next.6",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Shuttle v2",
|
|
6
6
|
"files": [
|
|
@@ -39,33 +39,33 @@
|
|
|
39
39
|
"@xstyled/styled-components": "~3.8.1",
|
|
40
40
|
"fast-deep-equal": "~3.1.3",
|
|
41
41
|
"uid": "^2.0.2",
|
|
42
|
-
"@elliemae/ds-button-v2": "3.70.0-next.
|
|
43
|
-
"@elliemae/ds-
|
|
44
|
-
"@elliemae/ds-
|
|
45
|
-
"@elliemae/ds-
|
|
46
|
-
"@elliemae/ds-
|
|
47
|
-
"@elliemae/ds-
|
|
48
|
-
"@elliemae/ds-
|
|
49
|
-
"@elliemae/ds-hooks-
|
|
50
|
-
"@elliemae/ds-hooks-
|
|
51
|
-
"@elliemae/ds-
|
|
52
|
-
"@elliemae/ds-
|
|
53
|
-
"@elliemae/ds-
|
|
54
|
-
"@elliemae/ds-
|
|
55
|
-
"@elliemae/ds-system": "3.70.0-next.
|
|
56
|
-
"@elliemae/ds-
|
|
57
|
-
"@elliemae/ds-
|
|
58
|
-
"@elliemae/ds-
|
|
59
|
-
"@elliemae/ds-zustand-helpers": "3.70.0-next.
|
|
42
|
+
"@elliemae/ds-button-v2": "3.70.0-next.6",
|
|
43
|
+
"@elliemae/ds-circular-progress-indicator": "3.70.0-next.6",
|
|
44
|
+
"@elliemae/ds-drag-and-drop": "3.70.0-next.6",
|
|
45
|
+
"@elliemae/ds-fast-list": "3.70.0-next.6",
|
|
46
|
+
"@elliemae/ds-floating-context": "3.70.0-next.6",
|
|
47
|
+
"@elliemae/ds-form-checkbox": "3.70.0-next.6",
|
|
48
|
+
"@elliemae/ds-grid": "3.70.0-next.6",
|
|
49
|
+
"@elliemae/ds-hooks-fontsize-detector": "3.70.0-next.6",
|
|
50
|
+
"@elliemae/ds-hooks-headless-tooltip": "3.70.0-next.6",
|
|
51
|
+
"@elliemae/ds-hooks-on-blur-out": "3.70.0-next.6",
|
|
52
|
+
"@elliemae/ds-form-input-text": "3.70.0-next.6",
|
|
53
|
+
"@elliemae/ds-indeterminate-progress-indicator": "3.70.0-next.6",
|
|
54
|
+
"@elliemae/ds-props-helpers": "3.70.0-next.6",
|
|
55
|
+
"@elliemae/ds-system": "3.70.0-next.6",
|
|
56
|
+
"@elliemae/ds-icons": "3.70.0-next.6",
|
|
57
|
+
"@elliemae/ds-typescript-helpers": "3.70.0-next.6",
|
|
58
|
+
"@elliemae/ds-typography": "3.70.0-next.6",
|
|
59
|
+
"@elliemae/ds-zustand-helpers": "3.70.0-next.6"
|
|
60
60
|
},
|
|
61
61
|
"devDependencies": {
|
|
62
62
|
"jest": "^30.0.0",
|
|
63
63
|
"lodash-es": "^4.17.21",
|
|
64
64
|
"styled-components": "~5.3.9",
|
|
65
|
-
"@elliemae/ds-breadcrumb": "3.70.0-next.
|
|
66
|
-
"@elliemae/ds-monorepo-devops": "3.70.0-next.
|
|
67
|
-
"@elliemae/ds-test-utils": "3.70.0-next.
|
|
68
|
-
"@elliemae/ds-tree-model": "3.70.0-next.
|
|
65
|
+
"@elliemae/ds-breadcrumb": "3.70.0-next.6",
|
|
66
|
+
"@elliemae/ds-monorepo-devops": "3.70.0-next.6",
|
|
67
|
+
"@elliemae/ds-test-utils": "3.70.0-next.6",
|
|
68
|
+
"@elliemae/ds-tree-model": "3.70.0-next.6"
|
|
69
69
|
},
|
|
70
70
|
"peerDependencies": {
|
|
71
71
|
"lodash-es": "^4.17.21",
|