@chayns-components/core 5.0.0-beta.716 → 5.0.0-beta.718
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/accordion/accordion-body/AccordionBody.js +1 -1
- package/lib/cjs/components/accordion/accordion-body/AccordionBody.js.map +1 -1
- package/lib/cjs/components/combobox/combobox-item/ComboBoxItem.styles.js +3 -2
- package/lib/cjs/components/combobox/combobox-item/ComboBoxItem.styles.js.map +1 -1
- package/lib/esm/components/accordion/accordion-body/AccordionBody.js +1 -1
- package/lib/esm/components/accordion/accordion-body/AccordionBody.js.map +1 -1
- package/lib/esm/components/combobox/combobox-item/ComboBoxItem.styles.js +10 -6
- package/lib/esm/components/combobox/combobox-item/ComboBoxItem.styles.js.map +1 -1
- package/package.json +2 -2
|
@@ -39,7 +39,7 @@ const AccordionBody = ({
|
|
|
39
39
|
},
|
|
40
40
|
$maxHeight: maxHeight,
|
|
41
41
|
$browser: browser === null || browser === void 0 ? void 0 : browser.name,
|
|
42
|
-
|
|
42
|
+
onAnimationComplete: onAnimationEnd,
|
|
43
43
|
onScroll: onScroll
|
|
44
44
|
}, /*#__PURE__*/_react.default.createElement(_AccordionGroup.AccordionGroupContext.Provider, {
|
|
45
45
|
value: AccordionGroupContextProviderValue
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccordionBody.js","names":["_chaynsApi","require","_react","_interopRequireWildcard","_AccordionGroup","_AccordionBody","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","AccordionBody","children","maxHeight","onScroll","shouldHideBody","onAnimationEnd","browser","getDevice","AccordionGroupContextProviderValue","useMemo","openAccordionUuid","undefined","createElement","StyledMotionAccordionBody","animate","height","opacity","className","exit","initial","$maxHeight","$browser","name","AccordionGroupContext","Provider","value","displayName","_default","exports"],"sources":["../../../../../src/components/accordion/accordion-body/AccordionBody.tsx"],"sourcesContent":["import { getDevice } from 'chayns-api';\nimport React, { FC, ReactNode, UIEvent, useMemo } from 'react';\nimport type { AccordionProps } from '../Accordion';\nimport { AccordionGroupContext } from '../accordion-group/AccordionGroup';\nimport { StyledMotionAccordionBody } from './AccordionBody.styles';\n\nexport type AccordionBodyProps = {\n /**\n * The elements that should be shown inside the body.\n */\n children: ReactNode;\n /**\n * Maximum height of the element. This automatically makes the content of the element scrollable.\n */\n maxHeight: AccordionProps['bodyMaxHeight'];\n /**\n * Function that is executed when the element will be scrolled\n */\n onScroll?: (event: UIEvent<HTMLDivElement>) => void;\n /**\n * Whether the body should be shown.\n */\n shouldHideBody: boolean;\n\n onAnimationEnd?: VoidFunction;\n};\n\nconst AccordionBody: FC<AccordionBodyProps> = ({\n children,\n maxHeight,\n onScroll,\n shouldHideBody,\n onAnimationEnd,\n}) => {\n const { browser } = getDevice();\n\n const AccordionGroupContextProviderValue = useMemo(\n () => ({ openAccordionUuid: undefined }),\n [],\n );\n\n return (\n <StyledMotionAccordionBody\n animate={{ height: shouldHideBody ? '0' : 'auto', opacity: shouldHideBody ? 0 : 1 }}\n className=\"beta-chayns-accordion-body\"\n exit={{ height: 0, opacity: 0 }}\n initial={{ height: 0, opacity: 0 }}\n $maxHeight={maxHeight}\n $browser={browser?.name}\n
|
|
1
|
+
{"version":3,"file":"AccordionBody.js","names":["_chaynsApi","require","_react","_interopRequireWildcard","_AccordionGroup","_AccordionBody","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","AccordionBody","children","maxHeight","onScroll","shouldHideBody","onAnimationEnd","browser","getDevice","AccordionGroupContextProviderValue","useMemo","openAccordionUuid","undefined","createElement","StyledMotionAccordionBody","animate","height","opacity","className","exit","initial","$maxHeight","$browser","name","onAnimationComplete","AccordionGroupContext","Provider","value","displayName","_default","exports"],"sources":["../../../../../src/components/accordion/accordion-body/AccordionBody.tsx"],"sourcesContent":["import { getDevice } from 'chayns-api';\nimport React, { FC, ReactNode, UIEvent, useMemo } from 'react';\nimport type { AccordionProps } from '../Accordion';\nimport { AccordionGroupContext } from '../accordion-group/AccordionGroup';\nimport { StyledMotionAccordionBody } from './AccordionBody.styles';\n\nexport type AccordionBodyProps = {\n /**\n * The elements that should be shown inside the body.\n */\n children: ReactNode;\n /**\n * Maximum height of the element. This automatically makes the content of the element scrollable.\n */\n maxHeight: AccordionProps['bodyMaxHeight'];\n /**\n * Function that is executed when the element will be scrolled\n */\n onScroll?: (event: UIEvent<HTMLDivElement>) => void;\n /**\n * Whether the body should be shown.\n */\n shouldHideBody: boolean;\n\n onAnimationEnd?: VoidFunction;\n};\n\nconst AccordionBody: FC<AccordionBodyProps> = ({\n children,\n maxHeight,\n onScroll,\n shouldHideBody,\n onAnimationEnd,\n}) => {\n const { browser } = getDevice();\n\n const AccordionGroupContextProviderValue = useMemo(\n () => ({ openAccordionUuid: undefined }),\n [],\n );\n\n return (\n <StyledMotionAccordionBody\n animate={{ height: shouldHideBody ? '0' : 'auto', opacity: shouldHideBody ? 0 : 1 }}\n className=\"beta-chayns-accordion-body\"\n exit={{ height: 0, opacity: 0 }}\n initial={{ height: 0, opacity: 0 }}\n $maxHeight={maxHeight}\n $browser={browser?.name}\n onAnimationComplete={onAnimationEnd}\n onScroll={onScroll}\n >\n <AccordionGroupContext.Provider value={AccordionGroupContextProviderValue}>\n {children}\n </AccordionGroupContext.Provider>\n </StyledMotionAccordionBody>\n );\n};\n\nAccordionBody.displayName = 'AccordionBody';\n\nexport default AccordionBody;\n"],"mappings":";;;;;;AAAA,IAAAA,UAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,uBAAA,CAAAF,OAAA;AAEA,IAAAG,eAAA,GAAAH,OAAA;AACA,IAAAI,cAAA,GAAAJ,OAAA;AAAmE,SAAAK,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAJ,wBAAAI,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAuBnE,MAAMW,aAAqC,GAAGA,CAAC;EAC3CC,QAAQ;EACRC,SAAS;EACTC,QAAQ;EACRC,cAAc;EACdC;AACJ,CAAC,KAAK;EACF,MAAM;IAAEC;EAAQ,CAAC,GAAG,IAAAC,oBAAS,EAAC,CAAC;EAE/B,MAAMC,kCAAkC,GAAG,IAAAC,cAAO,EAC9C,OAAO;IAAEC,iBAAiB,EAAEC;EAAU,CAAC,CAAC,EACxC,EACJ,CAAC;EAED,oBACInC,MAAA,CAAAU,OAAA,CAAA0B,aAAA,CAACjC,cAAA,CAAAkC,yBAAyB;IACtBC,OAAO,EAAE;MAAEC,MAAM,EAAEX,cAAc,GAAG,GAAG,GAAG,MAAM;MAAEY,OAAO,EAAEZ,cAAc,GAAG,CAAC,GAAG;IAAE,CAAE;IACpFa,SAAS,EAAC,4BAA4B;IACtCC,IAAI,EAAE;MAAEH,MAAM,EAAE,CAAC;MAAEC,OAAO,EAAE;IAAE,CAAE;IAChCG,OAAO,EAAE;MAAEJ,MAAM,EAAE,CAAC;MAAEC,OAAO,EAAE;IAAE,CAAE;IACnCI,UAAU,EAAElB,SAAU;IACtBmB,QAAQ,EAAEf,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEgB,IAAK;IACxBC,mBAAmB,EAAElB,cAAe;IACpCF,QAAQ,EAAEA;EAAS,gBAEnB3B,MAAA,CAAAU,OAAA,CAAA0B,aAAA,CAAClC,eAAA,CAAA8C,qBAAqB,CAACC,QAAQ;IAACC,KAAK,EAAElB;EAAmC,GACrEP,QAC2B,CACT,CAAC;AAEpC,CAAC;AAEDD,aAAa,CAAC2B,WAAW,GAAG,eAAe;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAA3C,OAAA,GAE7Bc,aAAa","ignoreList":[]}
|
|
@@ -47,8 +47,9 @@ const StyledComboBoxTopic = exports.StyledComboBoxTopic = _styledComponents.defa
|
|
|
47
47
|
display: flex;
|
|
48
48
|
gap: 10px;
|
|
49
49
|
padding: 4px 10px;
|
|
50
|
-
|
|
51
|
-
|
|
50
|
+
background-color: ${({
|
|
51
|
+
theme
|
|
52
|
+
}) => theme['secondary-101']};
|
|
52
53
|
`;
|
|
53
54
|
const StyledComboBoxItemImage = exports.StyledComboBoxItemImage = _styledComponents.default.img`
|
|
54
55
|
box-shadow: 0 0 0 1px
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboBoxItem.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledComboBoxItem","exports","styled","div","theme","$isSelected","text","$isTouch","css","StyledComboBoxTopic","StyledComboBoxItemImage","img","$shouldShowRoundImage"],"sources":["../../../../../src/components/combobox/combobox-item/ComboBoxItem.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledComboBoxItemProps = WithTheme<{\n $isTouch: boolean;\n $isSelected: boolean;\n}>;\n\nexport const StyledComboBoxItem = styled.div<StyledComboBoxItemProps>`\n align-items: center;\n background-color: ${({ theme, $isSelected }: StyledComboBoxItemProps) =>\n $isSelected && theme['secondary-103']};\n color: ${({ theme }: StyledComboBoxItemProps) => theme.text};\n display: flex;\n gap: 10px;\n padding: 4px 10px;\n transition: background-color 0.2s ease-in-out;\n\n ${({ $isTouch, theme }: StyledComboBoxItemProps) =>\n !$isTouch &&\n css`\n &:hover {\n background-color: ${theme['secondary-102']};\n }\n\n &:focus {\n background-color: ${theme['secondary-102']};\n }\n `}\n`;\n\nexport const StyledComboBoxTopic = styled.div`\n align-items: center;\n color: ${({ theme }) => theme.text};\n position: sticky;\n top: 0;\n border: black 5px;\n cursor: default;\n font-weight: bold;\n display: flex;\n gap: 10px;\n padding: 4px 10px;\n
|
|
1
|
+
{"version":3,"file":"ComboBoxItem.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledComboBoxItem","exports","styled","div","theme","$isSelected","text","$isTouch","css","StyledComboBoxTopic","StyledComboBoxItemImage","img","$shouldShowRoundImage"],"sources":["../../../../../src/components/combobox/combobox-item/ComboBoxItem.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledComboBoxItemProps = WithTheme<{\n $isTouch: boolean;\n $isSelected: boolean;\n}>;\n\nexport const StyledComboBoxItem = styled.div<StyledComboBoxItemProps>`\n align-items: center;\n background-color: ${({ theme, $isSelected }: StyledComboBoxItemProps) =>\n $isSelected && theme['secondary-103']};\n color: ${({ theme }: StyledComboBoxItemProps) => theme.text};\n display: flex;\n gap: 10px;\n padding: 4px 10px;\n transition: background-color 0.2s ease-in-out;\n\n ${({ $isTouch, theme }: StyledComboBoxItemProps) =>\n !$isTouch &&\n css`\n &:hover {\n background-color: ${theme['secondary-102']};\n }\n\n &:focus {\n background-color: ${theme['secondary-102']};\n }\n `}\n`;\n\nexport const StyledComboBoxTopic = styled.div`\n align-items: center;\n color: ${({ theme }) => theme.text};\n position: sticky;\n top: 0;\n border: black 5px;\n cursor: default;\n font-weight: bold;\n display: flex;\n gap: 10px;\n padding: 4px 10px;\n background-color: ${({ theme }) => theme['secondary-101']};\n`;\n\ntype StyledComboBoxItemImageProps = WithTheme<{ $shouldShowRoundImage?: boolean }>;\n\nexport const StyledComboBoxItemImage = styled.img<StyledComboBoxItemImageProps>`\n box-shadow: 0 0 0 1px\n rgba(${({ theme }: StyledComboBoxItemImageProps) => theme['009-rgb']}, 0.15);\n height: 22px;\n width: 22px;\n\n ${({ $shouldShowRoundImage }) =>\n $shouldShowRoundImage &&\n css`\n border-radius: 50%;\n `}\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AAAgD,SAAAC,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAH,wBAAAG,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAQzC,MAAMW,kBAAkB,GAAAC,OAAA,CAAAD,kBAAA,GAAGE,yBAAM,CAACC,GAA4B;AACrE;AACA,wBAAwB,CAAC;EAAEC,KAAK;EAAEC;AAAqC,CAAC,KAChEA,WAAW,IAAID,KAAK,CAAC,eAAe,CAAC;AAC7C,aAAa,CAAC;EAAEA;AAA+B,CAAC,KAAKA,KAAK,CAACE,IAAI;AAC/D;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEC,QAAQ;EAAEH;AAA+B,CAAC,KAC3C,CAACG,QAAQ,IACT,IAAAC,qBAAG;AACX;AACA,oCAAoCJ,KAAK,CAAC,eAAe,CAAC;AAC1D;AACA;AACA;AACA,oCAAoCA,KAAK,CAAC,eAAe,CAAC;AAC1D;AACA,SAAS;AACT,CAAC;AAEM,MAAMK,mBAAmB,GAAAR,OAAA,CAAAQ,mBAAA,GAAGP,yBAAM,CAACC,GAAG;AAC7C;AACA,aAAa,CAAC;EAAEC;AAAM,CAAC,KAAKA,KAAK,CAACE,IAAI;AACtC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwB,CAAC;EAAEF;AAAM,CAAC,KAAKA,KAAK,CAAC,eAAe,CAAC;AAC7D,CAAC;AAIM,MAAMM,uBAAuB,GAAAT,OAAA,CAAAS,uBAAA,GAAGR,yBAAM,CAACS,GAAiC;AAC/E;AACA,eAAe,CAAC;EAAEP;AAAoC,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AAC5E;AACA;AACA;AACA,MAAM,CAAC;EAAEQ;AAAsB,CAAC,KACxBA,qBAAqB,IACrB,IAAAJ,qBAAG;AACX;AACA,SAAS;AACT,CAAC","ignoreList":[]}
|
|
@@ -32,7 +32,7 @@ const AccordionBody = _ref => {
|
|
|
32
32
|
},
|
|
33
33
|
$maxHeight: maxHeight,
|
|
34
34
|
$browser: browser?.name,
|
|
35
|
-
|
|
35
|
+
onAnimationComplete: onAnimationEnd,
|
|
36
36
|
onScroll: onScroll
|
|
37
37
|
}, /*#__PURE__*/React.createElement(AccordionGroupContext.Provider, {
|
|
38
38
|
value: AccordionGroupContextProviderValue
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccordionBody.js","names":["getDevice","React","useMemo","AccordionGroupContext","StyledMotionAccordionBody","AccordionBody","_ref","children","maxHeight","onScroll","shouldHideBody","onAnimationEnd","browser","AccordionGroupContextProviderValue","openAccordionUuid","undefined","createElement","animate","height","opacity","className","exit","initial","$maxHeight","$browser","name","Provider","value","displayName"],"sources":["../../../../../src/components/accordion/accordion-body/AccordionBody.tsx"],"sourcesContent":["import { getDevice } from 'chayns-api';\nimport React, { FC, ReactNode, UIEvent, useMemo } from 'react';\nimport type { AccordionProps } from '../Accordion';\nimport { AccordionGroupContext } from '../accordion-group/AccordionGroup';\nimport { StyledMotionAccordionBody } from './AccordionBody.styles';\n\nexport type AccordionBodyProps = {\n /**\n * The elements that should be shown inside the body.\n */\n children: ReactNode;\n /**\n * Maximum height of the element. This automatically makes the content of the element scrollable.\n */\n maxHeight: AccordionProps['bodyMaxHeight'];\n /**\n * Function that is executed when the element will be scrolled\n */\n onScroll?: (event: UIEvent<HTMLDivElement>) => void;\n /**\n * Whether the body should be shown.\n */\n shouldHideBody: boolean;\n\n onAnimationEnd?: VoidFunction;\n};\n\nconst AccordionBody: FC<AccordionBodyProps> = ({\n children,\n maxHeight,\n onScroll,\n shouldHideBody,\n onAnimationEnd,\n}) => {\n const { browser } = getDevice();\n\n const AccordionGroupContextProviderValue = useMemo(\n () => ({ openAccordionUuid: undefined }),\n [],\n );\n\n return (\n <StyledMotionAccordionBody\n animate={{ height: shouldHideBody ? '0' : 'auto', opacity: shouldHideBody ? 0 : 1 }}\n className=\"beta-chayns-accordion-body\"\n exit={{ height: 0, opacity: 0 }}\n initial={{ height: 0, opacity: 0 }}\n $maxHeight={maxHeight}\n $browser={browser?.name}\n
|
|
1
|
+
{"version":3,"file":"AccordionBody.js","names":["getDevice","React","useMemo","AccordionGroupContext","StyledMotionAccordionBody","AccordionBody","_ref","children","maxHeight","onScroll","shouldHideBody","onAnimationEnd","browser","AccordionGroupContextProviderValue","openAccordionUuid","undefined","createElement","animate","height","opacity","className","exit","initial","$maxHeight","$browser","name","onAnimationComplete","Provider","value","displayName"],"sources":["../../../../../src/components/accordion/accordion-body/AccordionBody.tsx"],"sourcesContent":["import { getDevice } from 'chayns-api';\nimport React, { FC, ReactNode, UIEvent, useMemo } from 'react';\nimport type { AccordionProps } from '../Accordion';\nimport { AccordionGroupContext } from '../accordion-group/AccordionGroup';\nimport { StyledMotionAccordionBody } from './AccordionBody.styles';\n\nexport type AccordionBodyProps = {\n /**\n * The elements that should be shown inside the body.\n */\n children: ReactNode;\n /**\n * Maximum height of the element. This automatically makes the content of the element scrollable.\n */\n maxHeight: AccordionProps['bodyMaxHeight'];\n /**\n * Function that is executed when the element will be scrolled\n */\n onScroll?: (event: UIEvent<HTMLDivElement>) => void;\n /**\n * Whether the body should be shown.\n */\n shouldHideBody: boolean;\n\n onAnimationEnd?: VoidFunction;\n};\n\nconst AccordionBody: FC<AccordionBodyProps> = ({\n children,\n maxHeight,\n onScroll,\n shouldHideBody,\n onAnimationEnd,\n}) => {\n const { browser } = getDevice();\n\n const AccordionGroupContextProviderValue = useMemo(\n () => ({ openAccordionUuid: undefined }),\n [],\n );\n\n return (\n <StyledMotionAccordionBody\n animate={{ height: shouldHideBody ? '0' : 'auto', opacity: shouldHideBody ? 0 : 1 }}\n className=\"beta-chayns-accordion-body\"\n exit={{ height: 0, opacity: 0 }}\n initial={{ height: 0, opacity: 0 }}\n $maxHeight={maxHeight}\n $browser={browser?.name}\n onAnimationComplete={onAnimationEnd}\n onScroll={onScroll}\n >\n <AccordionGroupContext.Provider value={AccordionGroupContextProviderValue}>\n {children}\n </AccordionGroupContext.Provider>\n </StyledMotionAccordionBody>\n );\n};\n\nAccordionBody.displayName = 'AccordionBody';\n\nexport default AccordionBody;\n"],"mappings":"AAAA,SAASA,SAAS,QAAQ,YAAY;AACtC,OAAOC,KAAK,IAA4BC,OAAO,QAAQ,OAAO;AAE9D,SAASC,qBAAqB,QAAQ,mCAAmC;AACzE,SAASC,yBAAyB,QAAQ,wBAAwB;AAuBlE,MAAMC,aAAqC,GAAGC,IAAA,IAMxC;EAAA,IANyC;IAC3CC,QAAQ;IACRC,SAAS;IACTC,QAAQ;IACRC,cAAc;IACdC;EACJ,CAAC,GAAAL,IAAA;EACG,MAAM;IAAEM;EAAQ,CAAC,GAAGZ,SAAS,CAAC,CAAC;EAE/B,MAAMa,kCAAkC,GAAGX,OAAO,CAC9C,OAAO;IAAEY,iBAAiB,EAAEC;EAAU,CAAC,CAAC,EACxC,EACJ,CAAC;EAED,oBACId,KAAA,CAAAe,aAAA,CAACZ,yBAAyB;IACtBa,OAAO,EAAE;MAAEC,MAAM,EAAER,cAAc,GAAG,GAAG,GAAG,MAAM;MAAES,OAAO,EAAET,cAAc,GAAG,CAAC,GAAG;IAAE,CAAE;IACpFU,SAAS,EAAC,4BAA4B;IACtCC,IAAI,EAAE;MAAEH,MAAM,EAAE,CAAC;MAAEC,OAAO,EAAE;IAAE,CAAE;IAChCG,OAAO,EAAE;MAAEJ,MAAM,EAAE,CAAC;MAAEC,OAAO,EAAE;IAAE,CAAE;IACnCI,UAAU,EAAEf,SAAU;IACtBgB,QAAQ,EAAEZ,OAAO,EAAEa,IAAK;IACxBC,mBAAmB,EAAEf,cAAe;IACpCF,QAAQ,EAAEA;EAAS,gBAEnBR,KAAA,CAAAe,aAAA,CAACb,qBAAqB,CAACwB,QAAQ;IAACC,KAAK,EAAEf;EAAmC,GACrEN,QAC2B,CACT,CAAC;AAEpC,CAAC;AAEDF,aAAa,CAACwB,WAAW,GAAG,eAAe;AAE3C,eAAexB,aAAa","ignoreList":[]}
|
|
@@ -51,24 +51,28 @@ export const StyledComboBoxTopic = styled.div`
|
|
|
51
51
|
display: flex;
|
|
52
52
|
gap: 10px;
|
|
53
53
|
padding: 4px 10px;
|
|
54
|
-
|
|
55
|
-
|
|
54
|
+
background-color: ${_ref5 => {
|
|
55
|
+
let {
|
|
56
|
+
theme
|
|
57
|
+
} = _ref5;
|
|
58
|
+
return theme['secondary-101'];
|
|
59
|
+
}};
|
|
56
60
|
`;
|
|
57
61
|
export const StyledComboBoxItemImage = styled.img`
|
|
58
62
|
box-shadow: 0 0 0 1px
|
|
59
|
-
rgba(${
|
|
63
|
+
rgba(${_ref6 => {
|
|
60
64
|
let {
|
|
61
65
|
theme
|
|
62
|
-
} =
|
|
66
|
+
} = _ref6;
|
|
63
67
|
return theme['009-rgb'];
|
|
64
68
|
}}, 0.15);
|
|
65
69
|
height: 22px;
|
|
66
70
|
width: 22px;
|
|
67
71
|
|
|
68
|
-
${
|
|
72
|
+
${_ref7 => {
|
|
69
73
|
let {
|
|
70
74
|
$shouldShowRoundImage
|
|
71
|
-
} =
|
|
75
|
+
} = _ref7;
|
|
72
76
|
return $shouldShowRoundImage && css`
|
|
73
77
|
border-radius: 50%;
|
|
74
78
|
`;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboBoxItem.styles.js","names":["styled","css","StyledComboBoxItem","div","_ref","theme","$isSelected","_ref2","text","_ref3","$isTouch","StyledComboBoxTopic","_ref4","StyledComboBoxItemImage","img","
|
|
1
|
+
{"version":3,"file":"ComboBoxItem.styles.js","names":["styled","css","StyledComboBoxItem","div","_ref","theme","$isSelected","_ref2","text","_ref3","$isTouch","StyledComboBoxTopic","_ref4","_ref5","StyledComboBoxItemImage","img","_ref6","_ref7","$shouldShowRoundImage"],"sources":["../../../../../src/components/combobox/combobox-item/ComboBoxItem.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledComboBoxItemProps = WithTheme<{\n $isTouch: boolean;\n $isSelected: boolean;\n}>;\n\nexport const StyledComboBoxItem = styled.div<StyledComboBoxItemProps>`\n align-items: center;\n background-color: ${({ theme, $isSelected }: StyledComboBoxItemProps) =>\n $isSelected && theme['secondary-103']};\n color: ${({ theme }: StyledComboBoxItemProps) => theme.text};\n display: flex;\n gap: 10px;\n padding: 4px 10px;\n transition: background-color 0.2s ease-in-out;\n\n ${({ $isTouch, theme }: StyledComboBoxItemProps) =>\n !$isTouch &&\n css`\n &:hover {\n background-color: ${theme['secondary-102']};\n }\n\n &:focus {\n background-color: ${theme['secondary-102']};\n }\n `}\n`;\n\nexport const StyledComboBoxTopic = styled.div`\n align-items: center;\n color: ${({ theme }) => theme.text};\n position: sticky;\n top: 0;\n border: black 5px;\n cursor: default;\n font-weight: bold;\n display: flex;\n gap: 10px;\n padding: 4px 10px;\n background-color: ${({ theme }) => theme['secondary-101']};\n`;\n\ntype StyledComboBoxItemImageProps = WithTheme<{ $shouldShowRoundImage?: boolean }>;\n\nexport const StyledComboBoxItemImage = styled.img<StyledComboBoxItemImageProps>`\n box-shadow: 0 0 0 1px\n rgba(${({ theme }: StyledComboBoxItemImageProps) => theme['009-rgb']}, 0.15);\n height: 22px;\n width: 22px;\n\n ${({ $shouldShowRoundImage }) =>\n $shouldShowRoundImage &&\n css`\n border-radius: 50%;\n `}\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAQ/C,OAAO,MAAMC,kBAAkB,GAAGF,MAAM,CAACG,GAA4B;AACrE;AACA,wBAAwBC,IAAA;EAAA,IAAC;IAAEC,KAAK;IAAEC;EAAqC,CAAC,GAAAF,IAAA;EAAA,OAChEE,WAAW,IAAID,KAAK,CAAC,eAAe,CAAC;AAAA;AAC7C,aAAaE,KAAA;EAAA,IAAC;IAAEF;EAA+B,CAAC,GAAAE,KAAA;EAAA,OAAKF,KAAK,CAACG,IAAI;AAAA;AAC/D;AACA;AACA;AACA;AACA;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC,QAAQ;IAAEL;EAA+B,CAAC,GAAAI,KAAA;EAAA,OAC3C,CAACC,QAAQ,IACTT,GAAG;AACX;AACA,oCAAoCI,KAAK,CAAC,eAAe,CAAC;AAC1D;AACA;AACA;AACA,oCAAoCA,KAAK,CAAC,eAAe,CAAC;AAC1D;AACA,SAAS;AAAA;AACT,CAAC;AAED,OAAO,MAAMM,mBAAmB,GAAGX,MAAM,CAACG,GAAG;AAC7C;AACA,aAAaS,KAAA;EAAA,IAAC;IAAEP;EAAM,CAAC,GAAAO,KAAA;EAAA,OAAKP,KAAK,CAACG,IAAI;AAAA;AACtC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwBK,KAAA;EAAA,IAAC;IAAER;EAAM,CAAC,GAAAQ,KAAA;EAAA,OAAKR,KAAK,CAAC,eAAe,CAAC;AAAA;AAC7D,CAAC;AAID,OAAO,MAAMS,uBAAuB,GAAGd,MAAM,CAACe,GAAiC;AAC/E;AACA,eAAeC,KAAA;EAAA,IAAC;IAAEX;EAAoC,CAAC,GAAAW,KAAA;EAAA,OAAKX,KAAK,CAAC,SAAS,CAAC;AAAA;AAC5E;AACA;AACA;AACA,MAAMY,KAAA;EAAA,IAAC;IAAEC;EAAsB,CAAC,GAAAD,KAAA;EAAA,OACxBC,qBAAqB,IACrBjB,GAAG;AACX;AACA,SAAS;AAAA;AACT,CAAC","ignoreList":[]}
|
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.718",
|
|
4
4
|
"description": "A set of beautiful React components for developing your own applications with chayns.",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"browserslist": [
|
|
@@ -85,5 +85,5 @@
|
|
|
85
85
|
"publishConfig": {
|
|
86
86
|
"access": "public"
|
|
87
87
|
},
|
|
88
|
-
"gitHead": "
|
|
88
|
+
"gitHead": "e3f617666e06d2c43017901bcb6dac55162d2a43"
|
|
89
89
|
}
|