@elliemae/ds-transition 3.0.4-rc.5 → 3.1.0-next.10
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/collapse/styled.js +4 -7
- package/dist/cjs/collapse/styled.js.map +2 -2
- package/dist/cjs/fade/styled.js +3 -4
- package/dist/cjs/fade/styled.js.map +2 -2
- package/dist/esm/collapse/styled.js +2 -5
- package/dist/esm/collapse/styled.js.map +2 -2
- package/dist/esm/fade/styled.js +1 -2
- package/dist/esm/fade/styled.js.map +2 -2
- package/package.json +5 -8
|
@@ -26,11 +26,8 @@ __export(styled_exports, {
|
|
|
26
26
|
module.exports = __toCommonJS(styled_exports);
|
|
27
27
|
var React = __toESM(require("react"));
|
|
28
28
|
var import_ds_system = require("@elliemae/ds-system");
|
|
29
|
-
var import_styled_components = require("@xstyled/styled-components");
|
|
30
29
|
var import_theming = require("./theming");
|
|
31
|
-
const getCorrectPropertyToAnimate = ({ orientation }) =>
|
|
32
|
-
return orientation === "horizontal" ? "width" : "height";
|
|
33
|
-
};
|
|
30
|
+
const getCorrectPropertyToAnimate = ({ orientation }) => orientation === "horizontal" ? "width" : "height";
|
|
34
31
|
const getCorrectWidth = ({ show, collapsedSize, expandedWidth }) => {
|
|
35
32
|
if (!show)
|
|
36
33
|
return typeof collapsedSize === "number" ? `${collapsedSize}px` : collapsedSize;
|
|
@@ -52,9 +49,9 @@ const StyledCollapse = (0, import_ds_system.styled)("div", {
|
|
|
52
49
|
return `height: ${getCorrectHeight(props)};`;
|
|
53
50
|
}}
|
|
54
51
|
overflow: hidden;
|
|
55
|
-
${
|
|
56
|
-
${
|
|
57
|
-
${
|
|
52
|
+
${import_ds_system.space}
|
|
53
|
+
${import_ds_system.sizing}
|
|
54
|
+
${import_ds_system.layout}
|
|
58
55
|
`;
|
|
59
56
|
const StyledChildrenWrapper = (0, import_ds_system.styled)("div", { name: import_theming.DSCollapseName, slot: import_theming.DSCollapseSlots.CHILDREN_WRAPPER })`
|
|
60
57
|
width: fit-content;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/collapse/styled.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { styled
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,
|
|
4
|
+
"sourcesContent": ["import { styled, space, sizing, layout } from '@elliemae/ds-system';\nimport { DSCollapseT } from './react-desc-prop-types';\nimport { DSCollapseName, DSCollapseSlots } from './theming';\n\ninterface StyledCollapseProps extends DSCollapseT.Props {\n expandedWidth: number;\n expandedHeight: number;\n}\n\nconst getCorrectPropertyToAnimate = ({ orientation }: StyledCollapseProps) =>\n orientation === 'horizontal' ? 'width' : 'height';\n\nconst getCorrectWidth = ({ show, collapsedSize, expandedWidth }: StyledCollapseProps) => {\n if (!show) return typeof collapsedSize === 'number' ? `${collapsedSize}px` : collapsedSize;\n return expandedWidth ? `${expandedWidth}px` : 'fit-content';\n};\n\nconst getCorrectHeight = ({ show, collapsedSize, expandedHeight }: StyledCollapseProps) => {\n if (!show) return typeof collapsedSize === 'number' ? `${collapsedSize}px` : collapsedSize;\n return expandedHeight ? `${expandedHeight}px` : 'fit-content';\n};\n\nexport const StyledCollapse = styled('div', {\n name: DSCollapseName,\n slot: DSCollapseSlots.WRAPPER,\n})<StyledCollapseProps>`\n transition: ${getCorrectPropertyToAnimate} 300ms cubic-bezier(0.4, 0, 0.2, 1);\n ${(props) => {\n if (props.orientation === 'horizontal') return `width: ${getCorrectWidth(props)};`;\n return `height: ${getCorrectHeight(props)};`;\n }}\n overflow: hidden;\n ${space}\n ${sizing}\n ${layout}\n`;\n\nexport const StyledChildrenWrapper = styled('div', { name: DSCollapseName, slot: DSCollapseSlots.CHILDREN_WRAPPER })`\n width: fit-content;\n height: fit-content;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA8C;AAE9C,qBAAgD;AAOhD,MAAM,8BAA8B,CAAC,EAAE,kBACrC,gBAAgB,eAAe,UAAU;AAE3C,MAAM,kBAAkB,CAAC,EAAE,MAAM,eAAe,oBAAyC;AACvF,MAAI,CAAC;AAAM,WAAO,OAAO,kBAAkB,WAAW,GAAG,oBAAoB;AAC7E,SAAO,gBAAgB,GAAG,oBAAoB;AAChD;AAEA,MAAM,mBAAmB,CAAC,EAAE,MAAM,eAAe,qBAA0C;AACzF,MAAI,CAAC;AAAM,WAAO,OAAO,kBAAkB,WAAW,GAAG,oBAAoB;AAC7E,SAAO,iBAAiB,GAAG,qBAAqB;AAClD;AAEO,MAAM,iBAAiB,6BAAO,OAAO;AAAA,EAC1C,MAAM;AAAA,EACN,MAAM,+BAAgB;AACxB,CAAC;AAAA,gBACe;AAAA,IACZ,CAAC,UAAU;AACX,MAAI,MAAM,gBAAgB;AAAc,WAAO,UAAU,gBAAgB,KAAK;AAC9E,SAAO,WAAW,iBAAiB,KAAK;AAC1C;AAAA;AAAA,IAEE;AAAA,IACA;AAAA,IACA;AAAA;AAGG,MAAM,wBAAwB,6BAAO,OAAO,EAAE,MAAM,+BAAgB,MAAM,+BAAgB,iBAAiB,CAAC;AAAA;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/fade/styled.js
CHANGED
|
@@ -25,15 +25,14 @@ __export(styled_exports, {
|
|
|
25
25
|
module.exports = __toCommonJS(styled_exports);
|
|
26
26
|
var React = __toESM(require("react"));
|
|
27
27
|
var import_ds_system = require("@elliemae/ds-system");
|
|
28
|
-
var import_styled_components = require("@xstyled/styled-components");
|
|
29
28
|
var import_theming = require("./theming");
|
|
30
29
|
const StyledFade = (0, import_ds_system.styled)("div", { name: import_theming.DSFadeName, slot: import_theming.DSFadeSlots.WRAPPER })`
|
|
31
30
|
transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
32
31
|
opacity: ${({ show }) => show ? 1 : 0};
|
|
33
32
|
width: fit-content;
|
|
34
33
|
height: fit-content;
|
|
35
|
-
${
|
|
36
|
-
${
|
|
37
|
-
${
|
|
34
|
+
${import_ds_system.space}
|
|
35
|
+
${import_ds_system.sizing}
|
|
36
|
+
${import_ds_system.layout}
|
|
38
37
|
`;
|
|
39
38
|
//# sourceMappingURL=styled.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/fade/styled.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { styled
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,
|
|
4
|
+
"sourcesContent": ["import { styled, space, sizing, layout } from '@elliemae/ds-system';\nimport { DSFadeName, DSFadeSlots } from './theming';\n\nexport const StyledFade = styled('div', { name: DSFadeName, slot: DSFadeSlots.WRAPPER })<{\n show: boolean;\n}>`\n transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1);\n opacity: ${({ show }) => (show ? 1 : 0)};\n width: fit-content;\n height: fit-content;\n ${space}\n ${sizing}\n ${layout}\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA8C;AAC9C,qBAAwC;AAEjC,MAAM,aAAa,6BAAO,OAAO,EAAE,MAAM,2BAAY,MAAM,2BAAY,QAAQ,CAAC;AAAA;AAAA,aAI1E,CAAC,EAAE,WAAY,OAAO,IAAI;AAAA;AAAA;AAAA,IAGnC;AAAA,IACA;AAAA,IACA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,10 +1,7 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import { styled } from "@elliemae/ds-system";
|
|
3
|
-
import { space, sizing, layout } from "@xstyled/styled-components";
|
|
2
|
+
import { styled, space, sizing, layout } from "@elliemae/ds-system";
|
|
4
3
|
import { DSCollapseName, DSCollapseSlots } from "./theming";
|
|
5
|
-
const getCorrectPropertyToAnimate = ({ orientation }) =>
|
|
6
|
-
return orientation === "horizontal" ? "width" : "height";
|
|
7
|
-
};
|
|
4
|
+
const getCorrectPropertyToAnimate = ({ orientation }) => orientation === "horizontal" ? "width" : "height";
|
|
8
5
|
const getCorrectWidth = ({ show, collapsedSize, expandedWidth }) => {
|
|
9
6
|
if (!show)
|
|
10
7
|
return typeof collapsedSize === "number" ? `${collapsedSize}px` : collapsedSize;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/collapse/styled.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled
|
|
5
|
-
"mappings": "AAAA;ACAA;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, space, sizing, layout } from '@elliemae/ds-system';\nimport { DSCollapseT } from './react-desc-prop-types';\nimport { DSCollapseName, DSCollapseSlots } from './theming';\n\ninterface StyledCollapseProps extends DSCollapseT.Props {\n expandedWidth: number;\n expandedHeight: number;\n}\n\nconst getCorrectPropertyToAnimate = ({ orientation }: StyledCollapseProps) =>\n orientation === 'horizontal' ? 'width' : 'height';\n\nconst getCorrectWidth = ({ show, collapsedSize, expandedWidth }: StyledCollapseProps) => {\n if (!show) return typeof collapsedSize === 'number' ? `${collapsedSize}px` : collapsedSize;\n return expandedWidth ? `${expandedWidth}px` : 'fit-content';\n};\n\nconst getCorrectHeight = ({ show, collapsedSize, expandedHeight }: StyledCollapseProps) => {\n if (!show) return typeof collapsedSize === 'number' ? `${collapsedSize}px` : collapsedSize;\n return expandedHeight ? `${expandedHeight}px` : 'fit-content';\n};\n\nexport const StyledCollapse = styled('div', {\n name: DSCollapseName,\n slot: DSCollapseSlots.WRAPPER,\n})<StyledCollapseProps>`\n transition: ${getCorrectPropertyToAnimate} 300ms cubic-bezier(0.4, 0, 0.2, 1);\n ${(props) => {\n if (props.orientation === 'horizontal') return `width: ${getCorrectWidth(props)};`;\n return `height: ${getCorrectHeight(props)};`;\n }}\n overflow: hidden;\n ${space}\n ${sizing}\n ${layout}\n`;\n\nexport const StyledChildrenWrapper = styled('div', { name: DSCollapseName, slot: DSCollapseSlots.CHILDREN_WRAPPER })`\n width: fit-content;\n height: fit-content;\n`;\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AAEA;AAOA,MAAM,8BAA8B,CAAC,EAAE,kBACrC,gBAAgB,eAAe,UAAU;AAE3C,MAAM,kBAAkB,CAAC,EAAE,MAAM,eAAe,oBAAyC;AACvF,MAAI,CAAC;AAAM,WAAO,OAAO,kBAAkB,WAAW,GAAG,oBAAoB;AAC7E,SAAO,gBAAgB,GAAG,oBAAoB;AAChD;AAEA,MAAM,mBAAmB,CAAC,EAAE,MAAM,eAAe,qBAA0C;AACzF,MAAI,CAAC;AAAM,WAAO,OAAO,kBAAkB,WAAW,GAAG,oBAAoB;AAC7E,SAAO,iBAAiB,GAAG,qBAAqB;AAClD;AAEO,MAAM,iBAAiB,OAAO,OAAO;AAAA,EAC1C,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA,gBACe;AAAA,IACZ,CAAC,UAAU;AACX,MAAI,MAAM,gBAAgB;AAAc,WAAO,UAAU,gBAAgB,KAAK;AAC9E,SAAO,WAAW,iBAAiB,KAAK;AAC1C;AAAA;AAAA,IAEE;AAAA,IACA;AAAA,IACA;AAAA;AAGG,MAAM,wBAAwB,OAAO,OAAO,EAAE,MAAM,gBAAgB,MAAM,gBAAgB,iBAAiB,CAAC;AAAA;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/fade/styled.js
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import { styled } from "@elliemae/ds-system";
|
|
3
|
-
import { space, sizing, layout } from "@xstyled/styled-components";
|
|
2
|
+
import { styled, space, sizing, layout } from "@elliemae/ds-system";
|
|
4
3
|
import { DSFadeName, DSFadeSlots } from "./theming";
|
|
5
4
|
const StyledFade = styled("div", { name: DSFadeName, slot: DSFadeSlots.WRAPPER })`
|
|
6
5
|
transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/fade/styled.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled
|
|
5
|
-
"mappings": "AAAA;ACAA;AACA;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, space, sizing, layout } from '@elliemae/ds-system';\nimport { DSFadeName, DSFadeSlots } from './theming';\n\nexport const StyledFade = styled('div', { name: DSFadeName, slot: DSFadeSlots.WRAPPER })<{\n show: boolean;\n}>`\n transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1);\n opacity: ${({ show }) => (show ? 1 : 0)};\n width: fit-content;\n height: fit-content;\n ${space}\n ${sizing}\n ${layout}\n`;\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AACA;AAEO,MAAM,aAAa,OAAO,OAAO,EAAE,MAAM,YAAY,MAAM,YAAY,QAAQ,CAAC;AAAA;AAAA,aAI1E,CAAC,EAAE,WAAY,OAAO,IAAI;AAAA;AAAA;AAAA,IAGnC;AAAA,IACA;AAAA,IACA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-transition",
|
|
3
|
-
"version": "3.0
|
|
3
|
+
"version": "3.1.0-next.10",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Tooltip",
|
|
6
6
|
"files": [
|
|
@@ -35,14 +35,10 @@
|
|
|
35
35
|
"indent": 4
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@elliemae/ds-system": "3.0
|
|
39
|
-
"@elliemae/ds-utilities": "3.0
|
|
40
|
-
"@xstyled/styled-components": "~3.1.2"
|
|
38
|
+
"@elliemae/ds-system": "3.1.0-next.10",
|
|
39
|
+
"@elliemae/ds-utilities": "3.1.0-next.10"
|
|
41
40
|
},
|
|
42
41
|
"devDependencies": {
|
|
43
|
-
"@testing-library/jest-dom": "~5.16.2",
|
|
44
|
-
"@testing-library/react": "~12.1.2",
|
|
45
|
-
"@testing-library/user-event": "~13.5.0",
|
|
46
42
|
"react": "^17.0.2",
|
|
47
43
|
"react-dom": "^17.0.2"
|
|
48
44
|
},
|
|
@@ -60,6 +56,7 @@
|
|
|
60
56
|
"test": "node ../../scripts/testing/test.mjs",
|
|
61
57
|
"lint": "node ../../scripts/lint.mjs",
|
|
62
58
|
"dts": "node ../../scripts/dts.mjs",
|
|
63
|
-
"build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs"
|
|
59
|
+
"build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs",
|
|
60
|
+
"checkDeps": "npx -yes ../ds-codemods check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
|
|
64
61
|
}
|
|
65
62
|
}
|