@chayns-components/core 5.0.0-beta.1098 → 5.0.0-beta.1100
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/lib/cjs/components/color-scheme-provider/ColorSchemeProvider.js +2 -1
- package/lib/cjs/components/color-scheme-provider/ColorSchemeProvider.js.map +1 -1
- package/lib/cjs/components/expandable-content/ExpandableContent.js +0 -1
- package/lib/cjs/components/expandable-content/ExpandableContent.js.map +1 -1
- package/lib/cjs/components/expandable-content/ExpandableContent.styles.js +1 -3
- package/lib/cjs/components/expandable-content/ExpandableContent.styles.js.map +1 -1
- package/lib/esm/components/color-scheme-provider/ColorSchemeProvider.js +3 -2
- package/lib/esm/components/color-scheme-provider/ColorSchemeProvider.js.map +1 -1
- package/lib/esm/components/expandable-content/ExpandableContent.js +0 -1
- package/lib/esm/components/expandable-content/ExpandableContent.js.map +1 -1
- package/lib/esm/components/expandable-content/ExpandableContent.styles.js +1 -6
- package/lib/esm/components/expandable-content/ExpandableContent.styles.js.map +1 -1
- package/lib/types/components/expandable-content/ExpandableContent.styles.d.ts +2 -6
- package/package.json +2 -2
|
@@ -49,6 +49,7 @@ const ColorSchemeProvider = ({
|
|
|
49
49
|
const color = colorProp ?? internalColor;
|
|
50
50
|
const colorMode = colorModeProp ?? internalColorMode;
|
|
51
51
|
const overrideParagraphFormat = color && color !== internalColor || colorMode && colorMode !== internalColorMode;
|
|
52
|
+
const paragraphFormat = (0, _react.useMemo)(() => overrideParagraphFormat ? [] : undefined, [overrideParagraphFormat]);
|
|
52
53
|
const contextValue = (0, _useChaynsTheme.useChaynsTheme)({
|
|
53
54
|
color,
|
|
54
55
|
colorMode,
|
|
@@ -56,7 +57,7 @@ const ColorSchemeProvider = ({
|
|
|
56
57
|
siteId,
|
|
57
58
|
customVariables,
|
|
58
59
|
// Overrides the paragraphFormat on changed color or colorMode
|
|
59
|
-
paragraphFormat
|
|
60
|
+
paragraphFormat
|
|
60
61
|
});
|
|
61
62
|
return /*#__PURE__*/_react.default.createElement(_styledComponents.ThemeProvider, {
|
|
62
63
|
theme: contextValue.theme
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColorSchemeProvider.js","names":["_chaynsApi","require","_react","_interopRequireWildcard","_styledComponents","_ColorSchemeProvider","_useChaynsTheme","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","GlobalStyle","createGlobalStyle","ColorSchemeContext","exports","createContext","undefined","useColorScheme","useContext","ColorSchemeProvider","children","color","colorProp","colorMode","colorModeProp","secondaryColor","siteId","style","customVariables","internalColor","internalColorMode","useSite","overrideParagraphFormat","
|
|
1
|
+
{"version":3,"file":"ColorSchemeProvider.js","names":["_chaynsApi","require","_react","_interopRequireWildcard","_styledComponents","_ColorSchemeProvider","_useChaynsTheme","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","GlobalStyle","createGlobalStyle","ColorSchemeContext","exports","createContext","undefined","useColorScheme","useContext","ColorSchemeProvider","children","color","colorProp","colorMode","colorModeProp","secondaryColor","siteId","style","customVariables","internalColor","internalColorMode","useSite","overrideParagraphFormat","paragraphFormat","useMemo","contextValue","useChaynsTheme","createElement","ThemeProvider","theme","Provider","value","StyledColorSchemeProvider","className","displayName","_default"],"sources":["../../../../src/components/color-scheme-provider/ColorSchemeProvider.tsx"],"sourcesContent":["import { ChaynsDesignSettings, ChaynsParagraphFormat, ColorMode, useSite } from 'chayns-api';\nimport React, { createContext, FC, ReactNode, useContext, useMemo } from 'react';\nimport { createGlobalStyle, ThemeProvider } from 'styled-components';\nimport { StyledColorSchemeProvider } from './ColorSchemeProvider.styles';\nimport { useChaynsTheme } from './hooks/useChaynsTheme';\n\nexport type ColorSchemeProviderProps = {\n /**\n * The content of the application or the components for which the styles should be set\n */\n children: ReactNode;\n /**\n * The hex color to be used for the children\n */\n color?: string;\n /**\n * The color mode to be used for the children\n */\n colorMode?: ColorMode;\n /**\n * The secondary hex color to be used for the children\n */\n secondaryColor?: string;\n /**\n * The site id of the page for which the design settings should be fetched\n */\n siteId?: string;\n /**\n * Additional styles set on the root element\n */\n style?: { [key: string]: string | number };\n /**\n * Additional variables to extend the theme\n */\n customVariables?: Record<string, string>;\n};\n\nexport interface Theme {\n [key: string]: string;\n}\n\nexport type WithTheme<T> = T & {\n theme: Theme;\n};\n\n// ToDo remove type after the framer-motion bug is Fixed\nexport type FramerMotionBugFix = WithTheme<unknown>;\n\nconst GlobalStyle = createGlobalStyle`\n .ellipsis {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n footer {\n font-size: 0.85rem;\n color: #888;\n margin: 10px 0 0;\n\n & a {\n color: #888;\n letter-spacing: -0.3px;\n }\n }\n`;\n\nexport interface ColorSchemeContextProps {\n designSettings?: ChaynsDesignSettings;\n paragraphFormat: ChaynsParagraphFormat[];\n theme: Theme;\n}\n\nexport const ColorSchemeContext = createContext<ColorSchemeContextProps | undefined>(undefined);\n\nexport const useColorScheme = () => useContext(ColorSchemeContext);\n\nconst ColorSchemeProvider: FC<ColorSchemeProviderProps> = ({\n children,\n color: colorProp,\n colorMode: colorModeProp,\n secondaryColor,\n siteId,\n style = {},\n customVariables,\n}) => {\n const { color: internalColor, colorMode: internalColorMode } = useSite();\n\n const color = colorProp ?? internalColor;\n const colorMode = colorModeProp ?? internalColorMode;\n const overrideParagraphFormat =\n (color && color !== internalColor) || (colorMode && colorMode !== internalColorMode);\n const paragraphFormat = useMemo(\n () => (overrideParagraphFormat ? [] : undefined),\n [overrideParagraphFormat],\n );\n\n const contextValue = useChaynsTheme({\n color,\n colorMode,\n secondaryColor,\n siteId,\n customVariables,\n // Overrides the paragraphFormat on changed color or colorMode\n paragraphFormat,\n });\n\n return (\n <ThemeProvider theme={contextValue.theme}>\n <ColorSchemeContext.Provider value={contextValue}>\n <StyledColorSchemeProvider className=\"color-scheme-provider\" style={style}>\n {children}\n </StyledColorSchemeProvider>\n <GlobalStyle />\n </ColorSchemeContext.Provider>\n </ThemeProvider>\n );\n};\n\nColorSchemeProvider.displayName = 'ColorSchemeProvider';\n\nexport default ColorSchemeProvider;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -14,7 +14,6 @@ const ExpandableContent = ({
|
|
|
14
14
|
}) => (0, _react2.useMemo)(() => /*#__PURE__*/_react2.default.createElement(_react.AnimatePresence, {
|
|
15
15
|
initial: false
|
|
16
16
|
}, /*#__PURE__*/_react2.default.createElement(_ExpandableContent.StyledMotionExpandableContent, {
|
|
17
|
-
$isOpen: isOpen,
|
|
18
17
|
animate: {
|
|
19
18
|
height: isOpen ? 'auto' : '0px'
|
|
20
19
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ExpandableContent.js","names":["_react","require","_react2","_interopRequireWildcard","_ExpandableContent","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ExpandableContent","children","isOpen","useMemo","createElement","AnimatePresence","initial","StyledMotionExpandableContent","
|
|
1
|
+
{"version":3,"file":"ExpandableContent.js","names":["_react","require","_react2","_interopRequireWildcard","_ExpandableContent","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ExpandableContent","children","isOpen","useMemo","createElement","AnimatePresence","initial","StyledMotionExpandableContent","animate","height","transition","duration","type","displayName","_default","exports"],"sources":["../../../../src/components/expandable-content/ExpandableContent.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, { FC, ReactNode, useMemo } from 'react';\nimport { StyledMotionExpandableContent } from './ExpandableContent.styles';\n\nexport type ExpandableContentProps = {\n /**\n * The children that should be animated.\n */\n children: ReactNode;\n /**\n * Whether the content is expanded.\n */\n isOpen: boolean;\n};\n\nconst ExpandableContent: FC<ExpandableContentProps> = ({ children, isOpen }) =>\n useMemo(\n () => (\n <AnimatePresence initial={false}>\n <StyledMotionExpandableContent\n animate={{ height: isOpen ? 'auto' : '0px' }}\n transition={{ duration: 0.2, type: 'tween' }}\n >\n {children}\n </StyledMotionExpandableContent>\n </AnimatePresence>\n ),\n [children, isOpen],\n );\n\nExpandableContent.displayName = 'ExpandableContent';\n\nexport default ExpandableContent;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,OAAA,GAAAC,uBAAA,CAAAF,OAAA;AACA,IAAAG,kBAAA,GAAAH,OAAA;AAA2E,SAAAE,wBAAAE,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAJ,uBAAA,YAAAA,CAAAE,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAa3E,MAAMkB,iBAA6C,GAAGA,CAAC;EAAEC,QAAQ;EAAEC;AAAO,CAAC,KACvE,IAAAC,eAAO,EACH,mBACIzB,OAAA,CAAAa,OAAA,CAAAa,aAAA,CAAC5B,MAAA,CAAA6B,eAAe;EAACC,OAAO,EAAE;AAAM,gBAC5B5B,OAAA,CAAAa,OAAA,CAAAa,aAAA,CAACxB,kBAAA,CAAA2B,6BAA6B;EAC1BC,OAAO,EAAE;IAAEC,MAAM,EAAEP,MAAM,GAAG,MAAM,GAAG;EAAM,CAAE;EAC7CQ,UAAU,EAAE;IAAEC,QAAQ,EAAE,GAAG;IAAEC,IAAI,EAAE;EAAQ;AAAE,GAE5CX,QAC0B,CAClB,CACpB,EACD,CAACA,QAAQ,EAAEC,MAAM,CACrB,CAAC;AAELF,iBAAiB,CAACa,WAAW,GAAG,mBAAmB;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAxB,OAAA,GAErCS,iBAAiB","ignoreList":[]}
|
|
@@ -8,8 +8,6 @@ var _react = require("motion/react");
|
|
|
8
8
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
9
9
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
10
10
|
const StyledMotionExpandableContent = exports.StyledMotionExpandableContent = (0, _styledComponents.default)(_react.motion.div)`
|
|
11
|
-
overflow:
|
|
12
|
-
$isOpen
|
|
13
|
-
}) => $isOpen ? 'visible' : 'hidden'};
|
|
11
|
+
overflow: hidden;
|
|
14
12
|
`;
|
|
15
13
|
//# sourceMappingURL=ExpandableContent.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ExpandableContent.styles.js","names":["_react","require","_styledComponents","_interopRequireDefault","e","__esModule","default","StyledMotionExpandableContent","exports","styled","motion","div"
|
|
1
|
+
{"version":3,"file":"ExpandableContent.styles.js","names":["_react","require","_styledComponents","_interopRequireDefault","e","__esModule","default","StyledMotionExpandableContent","exports","styled","motion","div"],"sources":["../../../../src/components/expandable-content/ExpandableContent.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled from 'styled-components';\n\nexport const StyledMotionExpandableContent = styled(motion.div)`\n overflow: hidden;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,sBAAA,CAAAF,OAAA;AAAuC,SAAAE,uBAAAC,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEhC,MAAMG,6BAA6B,GAAAC,OAAA,CAAAD,6BAAA,GAAG,IAAAE,yBAAM,EAACC,aAAM,CAACC,GAAG,CAAC;AAC/D;AACA,CAAC","ignoreList":[]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { useSite } from 'chayns-api';
|
|
2
|
-
import React, { createContext, useContext } from 'react';
|
|
2
|
+
import React, { createContext, useContext, useMemo } from 'react';
|
|
3
3
|
import { createGlobalStyle, ThemeProvider } from 'styled-components';
|
|
4
4
|
import { StyledColorSchemeProvider } from './ColorSchemeProvider.styles';
|
|
5
5
|
import { useChaynsTheme } from './hooks/useChaynsTheme';
|
|
@@ -43,6 +43,7 @@ const ColorSchemeProvider = _ref => {
|
|
|
43
43
|
const color = colorProp ?? internalColor;
|
|
44
44
|
const colorMode = colorModeProp ?? internalColorMode;
|
|
45
45
|
const overrideParagraphFormat = color && color !== internalColor || colorMode && colorMode !== internalColorMode;
|
|
46
|
+
const paragraphFormat = useMemo(() => overrideParagraphFormat ? [] : undefined, [overrideParagraphFormat]);
|
|
46
47
|
const contextValue = useChaynsTheme({
|
|
47
48
|
color,
|
|
48
49
|
colorMode,
|
|
@@ -50,7 +51,7 @@ const ColorSchemeProvider = _ref => {
|
|
|
50
51
|
siteId,
|
|
51
52
|
customVariables,
|
|
52
53
|
// Overrides the paragraphFormat on changed color or colorMode
|
|
53
|
-
paragraphFormat
|
|
54
|
+
paragraphFormat
|
|
54
55
|
});
|
|
55
56
|
return /*#__PURE__*/React.createElement(ThemeProvider, {
|
|
56
57
|
theme: contextValue.theme
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColorSchemeProvider.js","names":["useSite","React","createContext","useContext","createGlobalStyle","ThemeProvider","StyledColorSchemeProvider","useChaynsTheme","GlobalStyle","ColorSchemeContext","undefined","useColorScheme","ColorSchemeProvider","_ref","children","color","colorProp","colorMode","colorModeProp","secondaryColor","siteId","style","customVariables","internalColor","internalColorMode","overrideParagraphFormat","
|
|
1
|
+
{"version":3,"file":"ColorSchemeProvider.js","names":["useSite","React","createContext","useContext","useMemo","createGlobalStyle","ThemeProvider","StyledColorSchemeProvider","useChaynsTheme","GlobalStyle","ColorSchemeContext","undefined","useColorScheme","ColorSchemeProvider","_ref","children","color","colorProp","colorMode","colorModeProp","secondaryColor","siteId","style","customVariables","internalColor","internalColorMode","overrideParagraphFormat","paragraphFormat","contextValue","createElement","theme","Provider","value","className","displayName"],"sources":["../../../../src/components/color-scheme-provider/ColorSchemeProvider.tsx"],"sourcesContent":["import { ChaynsDesignSettings, ChaynsParagraphFormat, ColorMode, useSite } from 'chayns-api';\nimport React, { createContext, FC, ReactNode, useContext, useMemo } from 'react';\nimport { createGlobalStyle, ThemeProvider } from 'styled-components';\nimport { StyledColorSchemeProvider } from './ColorSchemeProvider.styles';\nimport { useChaynsTheme } from './hooks/useChaynsTheme';\n\nexport type ColorSchemeProviderProps = {\n /**\n * The content of the application or the components for which the styles should be set\n */\n children: ReactNode;\n /**\n * The hex color to be used for the children\n */\n color?: string;\n /**\n * The color mode to be used for the children\n */\n colorMode?: ColorMode;\n /**\n * The secondary hex color to be used for the children\n */\n secondaryColor?: string;\n /**\n * The site id of the page for which the design settings should be fetched\n */\n siteId?: string;\n /**\n * Additional styles set on the root element\n */\n style?: { [key: string]: string | number };\n /**\n * Additional variables to extend the theme\n */\n customVariables?: Record<string, string>;\n};\n\nexport interface Theme {\n [key: string]: string;\n}\n\nexport type WithTheme<T> = T & {\n theme: Theme;\n};\n\n// ToDo remove type after the framer-motion bug is Fixed\nexport type FramerMotionBugFix = WithTheme<unknown>;\n\nconst GlobalStyle = createGlobalStyle`\n .ellipsis {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n footer {\n font-size: 0.85rem;\n color: #888;\n margin: 10px 0 0;\n\n & a {\n color: #888;\n letter-spacing: -0.3px;\n }\n }\n`;\n\nexport interface ColorSchemeContextProps {\n designSettings?: ChaynsDesignSettings;\n paragraphFormat: ChaynsParagraphFormat[];\n theme: Theme;\n}\n\nexport const ColorSchemeContext = createContext<ColorSchemeContextProps | undefined>(undefined);\n\nexport const useColorScheme = () => useContext(ColorSchemeContext);\n\nconst ColorSchemeProvider: FC<ColorSchemeProviderProps> = ({\n children,\n color: colorProp,\n colorMode: colorModeProp,\n secondaryColor,\n siteId,\n style = {},\n customVariables,\n}) => {\n const { color: internalColor, colorMode: internalColorMode } = useSite();\n\n const color = colorProp ?? internalColor;\n const colorMode = colorModeProp ?? internalColorMode;\n const overrideParagraphFormat =\n (color && color !== internalColor) || (colorMode && colorMode !== internalColorMode);\n const paragraphFormat = useMemo(\n () => (overrideParagraphFormat ? [] : undefined),\n [overrideParagraphFormat],\n );\n\n const contextValue = useChaynsTheme({\n color,\n colorMode,\n secondaryColor,\n siteId,\n customVariables,\n // Overrides the paragraphFormat on changed color or colorMode\n paragraphFormat,\n });\n\n return (\n <ThemeProvider theme={contextValue.theme}>\n <ColorSchemeContext.Provider value={contextValue}>\n <StyledColorSchemeProvider className=\"color-scheme-provider\" style={style}>\n {children}\n </StyledColorSchemeProvider>\n <GlobalStyle />\n </ColorSchemeContext.Provider>\n </ThemeProvider>\n );\n};\n\nColorSchemeProvider.displayName = 'ColorSchemeProvider';\n\nexport default ColorSchemeProvider;\n"],"mappings":"AAAA,SAAiEA,OAAO,QAAQ,YAAY;AAC5F,OAAOC,KAAK,IAAIC,aAAa,EAAiBC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAChF,SAASC,iBAAiB,EAAEC,aAAa,QAAQ,mBAAmB;AACpE,SAASC,yBAAyB,QAAQ,8BAA8B;AACxE,SAASC,cAAc,QAAQ,wBAAwB;;AAyCvD;;AAGA,MAAMC,WAAW,GAAGJ,iBAAiB;AACrC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAQD,OAAO,MAAMK,kBAAkB,gBAAGR,aAAa,CAAsCS,SAAS,CAAC;AAE/F,OAAO,MAAMC,cAAc,GAAGA,CAAA,KAAMT,UAAU,CAACO,kBAAkB,CAAC;AAElE,MAAMG,mBAAiD,GAAGC,IAAA,IAQpD;EAAA,IARqD;IACvDC,QAAQ;IACRC,KAAK,EAAEC,SAAS;IAChBC,SAAS,EAAEC,aAAa;IACxBC,cAAc;IACdC,MAAM;IACNC,KAAK,GAAG,CAAC,CAAC;IACVC;EACJ,CAAC,GAAAT,IAAA;EACG,MAAM;IAAEE,KAAK,EAAEQ,aAAa;IAAEN,SAAS,EAAEO;EAAkB,CAAC,GAAGzB,OAAO,CAAC,CAAC;EAExE,MAAMgB,KAAK,GAAGC,SAAS,IAAIO,aAAa;EACxC,MAAMN,SAAS,GAAGC,aAAa,IAAIM,iBAAiB;EACpD,MAAMC,uBAAuB,GACxBV,KAAK,IAAIA,KAAK,KAAKQ,aAAa,IAAMN,SAAS,IAAIA,SAAS,KAAKO,iBAAkB;EACxF,MAAME,eAAe,GAAGvB,OAAO,CAC3B,MAAOsB,uBAAuB,GAAG,EAAE,GAAGf,SAAU,EAChD,CAACe,uBAAuB,CAC5B,CAAC;EAED,MAAME,YAAY,GAAGpB,cAAc,CAAC;IAChCQ,KAAK;IACLE,SAAS;IACTE,cAAc;IACdC,MAAM;IACNE,eAAe;IACf;IACAI;EACJ,CAAC,CAAC;EAEF,oBACI1B,KAAA,CAAA4B,aAAA,CAACvB,aAAa;IAACwB,KAAK,EAAEF,YAAY,CAACE;EAAM,gBACrC7B,KAAA,CAAA4B,aAAA,CAACnB,kBAAkB,CAACqB,QAAQ;IAACC,KAAK,EAAEJ;EAAa,gBAC7C3B,KAAA,CAAA4B,aAAA,CAACtB,yBAAyB;IAAC0B,SAAS,EAAC,uBAAuB;IAACX,KAAK,EAAEA;EAAM,GACrEP,QACsB,CAAC,eAC5Bd,KAAA,CAAA4B,aAAA,CAACpB,WAAW,MAAE,CACW,CAClB,CAAC;AAExB,CAAC;AAEDI,mBAAmB,CAACqB,WAAW,GAAG,qBAAqB;AAEvD,eAAerB,mBAAmB","ignoreList":[]}
|
|
@@ -9,7 +9,6 @@ const ExpandableContent = _ref => {
|
|
|
9
9
|
return useMemo(() => /*#__PURE__*/React.createElement(AnimatePresence, {
|
|
10
10
|
initial: false
|
|
11
11
|
}, /*#__PURE__*/React.createElement(StyledMotionExpandableContent, {
|
|
12
|
-
$isOpen: isOpen,
|
|
13
12
|
animate: {
|
|
14
13
|
height: isOpen ? 'auto' : '0px'
|
|
15
14
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ExpandableContent.js","names":["AnimatePresence","React","useMemo","StyledMotionExpandableContent","ExpandableContent","_ref","children","isOpen","createElement","initial","
|
|
1
|
+
{"version":3,"file":"ExpandableContent.js","names":["AnimatePresence","React","useMemo","StyledMotionExpandableContent","ExpandableContent","_ref","children","isOpen","createElement","initial","animate","height","transition","duration","type","displayName"],"sources":["../../../../src/components/expandable-content/ExpandableContent.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, { FC, ReactNode, useMemo } from 'react';\nimport { StyledMotionExpandableContent } from './ExpandableContent.styles';\n\nexport type ExpandableContentProps = {\n /**\n * The children that should be animated.\n */\n children: ReactNode;\n /**\n * Whether the content is expanded.\n */\n isOpen: boolean;\n};\n\nconst ExpandableContent: FC<ExpandableContentProps> = ({ children, isOpen }) =>\n useMemo(\n () => (\n <AnimatePresence initial={false}>\n <StyledMotionExpandableContent\n animate={{ height: isOpen ? 'auto' : '0px' }}\n transition={{ duration: 0.2, type: 'tween' }}\n >\n {children}\n </StyledMotionExpandableContent>\n </AnimatePresence>\n ),\n [children, isOpen],\n );\n\nExpandableContent.displayName = 'ExpandableContent';\n\nexport default ExpandableContent;\n"],"mappings":"AAAA,SAASA,eAAe,QAAQ,cAAc;AAC9C,OAAOC,KAAK,IAAmBC,OAAO,QAAQ,OAAO;AACrD,SAASC,6BAA6B,QAAQ,4BAA4B;AAa1E,MAAMC,iBAA6C,GAAGC,IAAA;EAAA,IAAC;IAAEC,QAAQ;IAAEC;EAAO,CAAC,GAAAF,IAAA;EAAA,OACvEH,OAAO,CACH,mBACID,KAAA,CAAAO,aAAA,CAACR,eAAe;IAACS,OAAO,EAAE;EAAM,gBAC5BR,KAAA,CAAAO,aAAA,CAACL,6BAA6B;IAC1BO,OAAO,EAAE;MAAEC,MAAM,EAAEJ,MAAM,GAAG,MAAM,GAAG;IAAM,CAAE;IAC7CK,UAAU,EAAE;MAAEC,QAAQ,EAAE,GAAG;MAAEC,IAAI,EAAE;IAAQ;EAAE,GAE5CR,QAC0B,CAClB,CACpB,EACD,CAACA,QAAQ,EAAEC,MAAM,CACrB,CAAC;AAAA;AAELH,iBAAiB,CAACW,WAAW,GAAG,mBAAmB;AAEnD,eAAeX,iBAAiB","ignoreList":[]}
|
|
@@ -1,11 +1,6 @@
|
|
|
1
1
|
import { motion } from 'motion/react';
|
|
2
2
|
import styled from 'styled-components';
|
|
3
3
|
export const StyledMotionExpandableContent = styled(motion.div)`
|
|
4
|
-
overflow:
|
|
5
|
-
let {
|
|
6
|
-
$isOpen
|
|
7
|
-
} = _ref;
|
|
8
|
-
return $isOpen ? 'visible' : 'hidden';
|
|
9
|
-
}};
|
|
4
|
+
overflow: hidden;
|
|
10
5
|
`;
|
|
11
6
|
//# sourceMappingURL=ExpandableContent.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ExpandableContent.styles.js","names":["motion","styled","StyledMotionExpandableContent","div"
|
|
1
|
+
{"version":3,"file":"ExpandableContent.styles.js","names":["motion","styled","StyledMotionExpandableContent","div"],"sources":["../../../../src/components/expandable-content/ExpandableContent.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled from 'styled-components';\n\nexport const StyledMotionExpandableContent = styled(motion.div)`\n overflow: hidden;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,6BAA6B,GAAGD,MAAM,CAACD,MAAM,CAACG,GAAG,CAAC;AAC/D;AACA,CAAC","ignoreList":[]}
|
|
@@ -1,7 +1,3 @@
|
|
|
1
|
-
|
|
2
|
-
$isOpen: boolean;
|
|
3
|
-
};
|
|
4
|
-
export declare const StyledMotionExpandableContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<Omit<import("motion/react").HTMLMotionProps<"div">, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
|
|
1
|
+
export declare const StyledMotionExpandableContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("motion/react").HTMLMotionProps<"div">, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
|
|
5
2
|
ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
|
|
6
|
-
},
|
|
7
|
-
export {};
|
|
3
|
+
}, never>> & string & Omit<import("motion/react").ForwardRefComponent<HTMLDivElement, import("motion/react").HTMLMotionProps<"div">>, keyof import("react").Component<any, {}, any>>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@chayns-components/core",
|
|
3
|
-
"version": "5.0.0-beta.
|
|
3
|
+
"version": "5.0.0-beta.1100",
|
|
4
4
|
"description": "A set of beautiful React components for developing your own applications with chayns.",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"browserslist": [
|
|
@@ -86,5 +86,5 @@
|
|
|
86
86
|
"publishConfig": {
|
|
87
87
|
"access": "public"
|
|
88
88
|
},
|
|
89
|
-
"gitHead": "
|
|
89
|
+
"gitHead": "0456c8ad8b0981602d53162d13ea499c0e530805"
|
|
90
90
|
}
|