@chayns-components/core 5.0.0-beta.1262 → 5.0.0-beta.1275
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-head/AccordionHead.styles.js +1 -1
- package/lib/cjs/components/accordion/accordion-head/AccordionHead.styles.js.map +1 -1
- package/lib/cjs/components/color-scheme-provider/ColorSchemeProvider.js +2 -0
- package/lib/cjs/components/color-scheme-provider/ColorSchemeProvider.js.map +1 -1
- package/lib/cjs/components/color-scheme-provider/hooks/useChaynsTheme.js +7 -0
- package/lib/cjs/components/color-scheme-provider/hooks/useChaynsTheme.js.map +1 -1
- package/lib/cjs/components/icon/Icon.styles.js +1 -1
- package/lib/cjs/components/icon/Icon.styles.js.map +1 -1
- package/lib/cjs/components/page-provider/PageProvider.js +3 -1
- package/lib/cjs/components/page-provider/PageProvider.js.map +1 -1
- package/lib/cjs/components/popup/Popup.js +2 -1
- package/lib/cjs/components/popup/Popup.js.map +1 -1
- package/lib/cjs/hooks/element.js +4 -3
- package/lib/cjs/hooks/element.js.map +1 -1
- package/lib/esm/components/accordion/accordion-head/AccordionHead.styles.js +1 -1
- package/lib/esm/components/accordion/accordion-head/AccordionHead.styles.js.map +1 -1
- package/lib/esm/components/color-scheme-provider/ColorSchemeProvider.js +2 -0
- package/lib/esm/components/color-scheme-provider/ColorSchemeProvider.js.map +1 -1
- package/lib/esm/components/color-scheme-provider/hooks/useChaynsTheme.js +7 -0
- package/lib/esm/components/color-scheme-provider/hooks/useChaynsTheme.js.map +1 -1
- package/lib/esm/components/icon/Icon.styles.js +1 -1
- package/lib/esm/components/icon/Icon.styles.js.map +1 -1
- package/lib/esm/components/page-provider/PageProvider.js +3 -1
- package/lib/esm/components/page-provider/PageProvider.js.map +1 -1
- package/lib/esm/components/popup/Popup.js +2 -1
- package/lib/esm/components/popup/Popup.js.map +1 -1
- package/lib/esm/hooks/element.js +4 -3
- package/lib/esm/hooks/element.js.map +1 -1
- package/lib/types/components/color-scheme-provider/ColorSchemeProvider.d.ts +4 -0
- package/lib/types/components/color-scheme-provider/hooks/useChaynsTheme.d.ts +2 -1
- package/lib/types/hooks/element.d.ts +2 -1
- package/package.json +6 -6
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccordionHead.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledMotionAccordionHead","exports","styled","motion","div","theme","text","StyledMotionIconWrapper","onClick","StyledAccordionIcon","headline","$icon","StyledMotionContentWrapper","$isWrapped","css","StyledMotionTitleWrapper","StyledMotionTitle","$isOpen","undefined","$hasSearch","$color","StyledMotionTitleElementWrapper","StyledRightWrapper","StyledMotionSearchWrapper","StyledMotionRightElementWrapper","StyledMotionRightInput","input","$hasIcon","StyledMotionRightInputIconWrapper"],"sources":["../../../../../src/components/accordion/accordion-head/AccordionHead.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledMotionAccordionHeadProps = WithTheme<unknown>;\n\nexport const StyledMotionAccordionHead = styled(motion.div)<StyledMotionAccordionHeadProps>`\n align-items: center;\n color: ${({ theme }: StyledMotionAccordionHeadProps) => theme.text};\n display: flex;\n overflow: hidden;\n padding: 4px 0;\n`;\n\nexport const StyledMotionIconWrapper = styled(motion.div)`\n align-items: center;\n cursor: ${({ onClick }) => (typeof onClick === 'function' ? 'pointer' : 'default')};\n display: flex;\n flex: 0 0 auto;\n height: 25px;\n justify-content: center;\n width: 25px;\n`;\n\ntype StyledAccordionIconProps = WithTheme<{ $icon: string }>;\n\nexport const StyledAccordionIcon = styled.i<StyledAccordionIconProps>`\n align-items: center;\n justify-content: center;\n display: flex;\n color: ${({ theme }: StyledAccordionIconProps) => theme.headline};\n\n &:before {\n content: ${({ $icon }) => `\"\\\\${$icon}\"`};\n font-family: 'Font Awesome 6 Pro', Fontawesome !important;\n }\n`;\n\ntype StyledMotionContentWrapperProps = WithTheme<{ $isWrapped: boolean }>;\n\nexport const StyledMotionContentWrapper = styled(motion.div)<StyledMotionContentWrapperProps>`\n align-self: flex-start;\n cursor: ${({ onClick }) => (typeof onClick === 'function' ? 'pointer' : 'default')};\n display: flex;\n flex: 1 1 auto;\n height: 100%;\n overflow: hidden;\n margin-right: 10px;\n\n ${({ $isWrapped }) =>\n $isWrapped &&\n css`\n align-items: center;\n `}\n`;\n\nexport const StyledMotionTitleWrapper = styled(motion.div)`\n display: grid;\n flex: 0 1 auto;\n grid-template-areas: 'header';\n`;\n\ntype StyledMotionTitleProps = WithTheme<{\n $isOpen: boolean;\n $isWrapped: boolean;\n $color?: CSSProperties['color'];\n $hasSearch: boolean;\n}>;\n\nexport const StyledMotionTitle = styled(motion.div)<StyledMotionTitleProps>`\n font-size: ${({ $isOpen, $isWrapped }) => ($isOpen && !$isWrapped ? '1.3rem' : undefined)};\n font-weight: ${({ $isOpen, $isWrapped }) => ($isOpen && $isWrapped ? 700 : 'normal')};\n grid-area: header;\n height: ${({ $isWrapped, $hasSearch }) => ($isWrapped || $hasSearch ? '100%' : undefined)};\n overflow: hidden;\n text-overflow: ellipsis;\n transform-origin: top left;\n user-select: none;\n color: ${({ $color, theme }: StyledMotionTitleProps) => $color ?? theme.text};\n white-space: ${({ $isOpen, $isWrapped, $hasSearch }) =>\n $isOpen && !$isWrapped && !$hasSearch ? 'normal' : 'nowrap'};\n\n will-change: unset !important;\n\n ${({ $isWrapped }) =>\n $isWrapped &&\n css`\n align-content: center;\n `}\n`;\n\nexport const StyledMotionTitleElementWrapper = styled(motion.div)`\n align-items: center;\n display: flex;\n flex: 1 1 auto;\n margin-left: 8px;\n min-width: 0;\n`;\n\ntype StyledRightWrapperProps = {\n $isSearchActive: boolean;\n};\n\nexport const StyledRightWrapper = styled.div<StyledRightWrapperProps>`\n display: flex;\n flex: 0 0 auto;\n gap: 8px;\n margin-right: 5px;\n overflow: hidden;\n position: relative;\n`;\n\nexport const StyledMotionSearchWrapper = styled(motion.div)`\n align-items: center;\n justify-content: end;\n position: relative;\n display: flex;\n width: 100%;\n`;\n\nexport const StyledMotionRightElementWrapper = styled(motion.div)`\n align-items: center;\n display: flex;\n\n cursor: ${({ onClick }) => (typeof onClick === 'function' ? 'pointer' : 'default')};\n\n will-change: unset !important;\n`;\n\ntype StyledMotionRightInputProps = WithTheme<{\n $hasIcon: boolean;\n}>;\n\nexport const StyledMotionRightInput = styled(motion.input)<StyledMotionRightInputProps>`\n background-color: transparent;\n border: 1px solid transparent;\n border-bottom-color: rgba(\n ${({ theme }: StyledMotionRightInputProps) => theme['headline-rgb']},\n 0.45\n );\n color: ${({ theme }: StyledMotionRightInputProps) => theme.text};\n grid-area: header;\n padding: ${({ $hasIcon }) => ($hasIcon ? '5px 23px 5px 1px' : '5px 1px')};\n`;\n\nexport const StyledMotionRightInputIconWrapper = styled(motion.div)`\n align-items: center;\n display: flex;\n height: 100%;\n justify-content: center;\n position: absolute;\n right: 4px;\n top: 0;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAEA,IAAAC,iBAAA,GAAAC,uBAAA,CAAAF,OAAA;AAAgD,SAAAE,wBAAAC,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAH,uBAAA,YAAAA,CAAAC,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;AAKzC,MAAMkB,yBAAyB,GAAAC,OAAA,CAAAD,yBAAA,GAAG,IAAAE,yBAAM,EAACC,aAAM,CAACC,GAAG,CAAiC;AAC3F;AACA,aAAa,CAAC;EAAEC;AAAsC,CAAC,KAAKA,KAAK,CAACC,IAAI;AACtE;AACA;AACA;AACA,CAAC;AAEM,MAAMC,uBAAuB,GAAAN,OAAA,CAAAM,uBAAA,GAAG,IAAAL,yBAAM,EAACC,aAAM,CAACC,GAAG,CAAC;AACzD;AACA,cAAc,CAAC;EAAEI;AAAQ,CAAC,KAAM,OAAOA,OAAO,KAAK,UAAU,GAAG,SAAS,GAAG,SAAU;AACtF;AACA;AACA;AACA;AACA;AACA,CAAC;AAIM,MAAMC,mBAAmB,GAAAR,OAAA,CAAAQ,mBAAA,GAAGP,yBAAM,CAACd,CAA2B;AACrE;AACA;AACA;AACA,aAAa,CAAC;EAAEiB;AAAgC,CAAC,KAAKA,KAAK,CAACK,QAAQ;
|
|
1
|
+
{"version":3,"file":"AccordionHead.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledMotionAccordionHead","exports","styled","motion","div","theme","text","StyledMotionIconWrapper","onClick","StyledAccordionIcon","iconColor","headline","$icon","StyledMotionContentWrapper","$isWrapped","css","StyledMotionTitleWrapper","StyledMotionTitle","$isOpen","undefined","$hasSearch","$color","StyledMotionTitleElementWrapper","StyledRightWrapper","StyledMotionSearchWrapper","StyledMotionRightElementWrapper","StyledMotionRightInput","input","$hasIcon","StyledMotionRightInputIconWrapper"],"sources":["../../../../../src/components/accordion/accordion-head/AccordionHead.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledMotionAccordionHeadProps = WithTheme<unknown>;\n\nexport const StyledMotionAccordionHead = styled(motion.div)<StyledMotionAccordionHeadProps>`\n align-items: center;\n color: ${({ theme }: StyledMotionAccordionHeadProps) => theme.text};\n display: flex;\n overflow: hidden;\n padding: 4px 0;\n`;\n\nexport const StyledMotionIconWrapper = styled(motion.div)`\n align-items: center;\n cursor: ${({ onClick }) => (typeof onClick === 'function' ? 'pointer' : 'default')};\n display: flex;\n flex: 0 0 auto;\n height: 25px;\n justify-content: center;\n width: 25px;\n`;\n\ntype StyledAccordionIconProps = WithTheme<{ $icon: string }>;\n\nexport const StyledAccordionIcon = styled.i<StyledAccordionIconProps>`\n align-items: center;\n justify-content: center;\n display: flex;\n color: ${({ theme }: StyledAccordionIconProps) => theme.iconColor || theme.headline};\n\n &:before {\n content: ${({ $icon }) => `\"\\\\${$icon}\"`};\n font-family: 'Font Awesome 6 Pro', Fontawesome !important;\n }\n`;\n\ntype StyledMotionContentWrapperProps = WithTheme<{ $isWrapped: boolean }>;\n\nexport const StyledMotionContentWrapper = styled(motion.div)<StyledMotionContentWrapperProps>`\n align-self: flex-start;\n cursor: ${({ onClick }) => (typeof onClick === 'function' ? 'pointer' : 'default')};\n display: flex;\n flex: 1 1 auto;\n height: 100%;\n overflow: hidden;\n margin-right: 10px;\n\n ${({ $isWrapped }) =>\n $isWrapped &&\n css`\n align-items: center;\n `}\n`;\n\nexport const StyledMotionTitleWrapper = styled(motion.div)`\n display: grid;\n flex: 0 1 auto;\n grid-template-areas: 'header';\n`;\n\ntype StyledMotionTitleProps = WithTheme<{\n $isOpen: boolean;\n $isWrapped: boolean;\n $color?: CSSProperties['color'];\n $hasSearch: boolean;\n}>;\n\nexport const StyledMotionTitle = styled(motion.div)<StyledMotionTitleProps>`\n font-size: ${({ $isOpen, $isWrapped }) => ($isOpen && !$isWrapped ? '1.3rem' : undefined)};\n font-weight: ${({ $isOpen, $isWrapped }) => ($isOpen && $isWrapped ? 700 : 'normal')};\n grid-area: header;\n height: ${({ $isWrapped, $hasSearch }) => ($isWrapped || $hasSearch ? '100%' : undefined)};\n overflow: hidden;\n text-overflow: ellipsis;\n transform-origin: top left;\n user-select: none;\n color: ${({ $color, theme }: StyledMotionTitleProps) => $color ?? theme.text};\n white-space: ${({ $isOpen, $isWrapped, $hasSearch }) =>\n $isOpen && !$isWrapped && !$hasSearch ? 'normal' : 'nowrap'};\n\n will-change: unset !important;\n\n ${({ $isWrapped }) =>\n $isWrapped &&\n css`\n align-content: center;\n `}\n`;\n\nexport const StyledMotionTitleElementWrapper = styled(motion.div)`\n align-items: center;\n display: flex;\n flex: 1 1 auto;\n margin-left: 8px;\n min-width: 0;\n`;\n\ntype StyledRightWrapperProps = {\n $isSearchActive: boolean;\n};\n\nexport const StyledRightWrapper = styled.div<StyledRightWrapperProps>`\n display: flex;\n flex: 0 0 auto;\n gap: 8px;\n margin-right: 5px;\n overflow: hidden;\n position: relative;\n`;\n\nexport const StyledMotionSearchWrapper = styled(motion.div)`\n align-items: center;\n justify-content: end;\n position: relative;\n display: flex;\n width: 100%;\n`;\n\nexport const StyledMotionRightElementWrapper = styled(motion.div)`\n align-items: center;\n display: flex;\n\n cursor: ${({ onClick }) => (typeof onClick === 'function' ? 'pointer' : 'default')};\n\n will-change: unset !important;\n`;\n\ntype StyledMotionRightInputProps = WithTheme<{\n $hasIcon: boolean;\n}>;\n\nexport const StyledMotionRightInput = styled(motion.input)<StyledMotionRightInputProps>`\n background-color: transparent;\n border: 1px solid transparent;\n border-bottom-color: rgba(\n ${({ theme }: StyledMotionRightInputProps) => theme['headline-rgb']},\n 0.45\n );\n color: ${({ theme }: StyledMotionRightInputProps) => theme.text};\n grid-area: header;\n padding: ${({ $hasIcon }) => ($hasIcon ? '5px 23px 5px 1px' : '5px 1px')};\n`;\n\nexport const StyledMotionRightInputIconWrapper = styled(motion.div)`\n align-items: center;\n display: flex;\n height: 100%;\n justify-content: center;\n position: absolute;\n right: 4px;\n top: 0;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAEA,IAAAC,iBAAA,GAAAC,uBAAA,CAAAF,OAAA;AAAgD,SAAAE,wBAAAC,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAH,uBAAA,YAAAA,CAAAC,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;AAKzC,MAAMkB,yBAAyB,GAAAC,OAAA,CAAAD,yBAAA,GAAG,IAAAE,yBAAM,EAACC,aAAM,CAACC,GAAG,CAAiC;AAC3F;AACA,aAAa,CAAC;EAAEC;AAAsC,CAAC,KAAKA,KAAK,CAACC,IAAI;AACtE;AACA;AACA;AACA,CAAC;AAEM,MAAMC,uBAAuB,GAAAN,OAAA,CAAAM,uBAAA,GAAG,IAAAL,yBAAM,EAACC,aAAM,CAACC,GAAG,CAAC;AACzD;AACA,cAAc,CAAC;EAAEI;AAAQ,CAAC,KAAM,OAAOA,OAAO,KAAK,UAAU,GAAG,SAAS,GAAG,SAAU;AACtF;AACA;AACA;AACA;AACA;AACA,CAAC;AAIM,MAAMC,mBAAmB,GAAAR,OAAA,CAAAQ,mBAAA,GAAGP,yBAAM,CAACd,CAA2B;AACrE;AACA;AACA;AACA,aAAa,CAAC;EAAEiB;AAAgC,CAAC,KAAKA,KAAK,CAACK,SAAS,IAAIL,KAAK,CAACM,QAAQ;AACvF;AACA;AACA,mBAAmB,CAAC;EAAEC;AAAM,CAAC,KAAK,MAAMA,KAAK,GAAG;AAChD;AACA;AACA,CAAC;AAIM,MAAMC,0BAA0B,GAAAZ,OAAA,CAAAY,0BAAA,GAAG,IAAAX,yBAAM,EAACC,aAAM,CAACC,GAAG,CAAkC;AAC7F;AACA,cAAc,CAAC;EAAEI;AAAQ,CAAC,KAAM,OAAOA,OAAO,KAAK,UAAU,GAAG,SAAS,GAAG,SAAU;AACtF;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEM;AAAW,CAAC,KACbA,UAAU,IACV,IAAAC,qBAAG;AACX;AACA,SAAS;AACT,CAAC;AAEM,MAAMC,wBAAwB,GAAAf,OAAA,CAAAe,wBAAA,GAAG,IAAAd,yBAAM,EAACC,aAAM,CAACC,GAAG,CAAC;AAC1D;AACA;AACA;AACA,CAAC;AASM,MAAMa,iBAAiB,GAAAhB,OAAA,CAAAgB,iBAAA,GAAG,IAAAf,yBAAM,EAACC,aAAM,CAACC,GAAG,CAAyB;AAC3E,iBAAiB,CAAC;EAAEc,OAAO;EAAEJ;AAAW,CAAC,KAAMI,OAAO,IAAI,CAACJ,UAAU,GAAG,QAAQ,GAAGK,SAAU;AAC7F,mBAAmB,CAAC;EAAED,OAAO;EAAEJ;AAAW,CAAC,KAAMI,OAAO,IAAIJ,UAAU,GAAG,GAAG,GAAG,QAAS;AACxF;AACA,cAAc,CAAC;EAAEA,UAAU;EAAEM;AAAW,CAAC,KAAMN,UAAU,IAAIM,UAAU,GAAG,MAAM,GAAGD,SAAU;AAC7F;AACA;AACA;AACA;AACA,aAAa,CAAC;EAAEE,MAAM;EAAEhB;AAA8B,CAAC,KAAKgB,MAAM,IAAIhB,KAAK,CAACC,IAAI;AAChF,mBAAmB,CAAC;EAAEY,OAAO;EAAEJ,UAAU;EAAEM;AAAW,CAAC,KAC/CF,OAAO,IAAI,CAACJ,UAAU,IAAI,CAACM,UAAU,GAAG,QAAQ,GAAG,QAAQ;AACnE;AACA;AACA;AACA,MAAM,CAAC;EAAEN;AAAW,CAAC,KACbA,UAAU,IACV,IAAAC,qBAAG;AACX;AACA,SAAS;AACT,CAAC;AAEM,MAAMO,+BAA+B,GAAArB,OAAA,CAAAqB,+BAAA,GAAG,IAAApB,yBAAM,EAACC,aAAM,CAACC,GAAG,CAAC;AACjE;AACA;AACA;AACA;AACA;AACA,CAAC;AAMM,MAAMmB,kBAAkB,GAAAtB,OAAA,CAAAsB,kBAAA,GAAGrB,yBAAM,CAACE,GAA4B;AACrE;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMoB,yBAAyB,GAAAvB,OAAA,CAAAuB,yBAAA,GAAG,IAAAtB,yBAAM,EAACC,aAAM,CAACC,GAAG,CAAC;AAC3D;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMqB,+BAA+B,GAAAxB,OAAA,CAAAwB,+BAAA,GAAG,IAAAvB,yBAAM,EAACC,aAAM,CAACC,GAAG,CAAC;AACjE;AACA;AACA;AACA,cAAc,CAAC;EAAEI;AAAQ,CAAC,KAAM,OAAOA,OAAO,KAAK,UAAU,GAAG,SAAS,GAAG,SAAU;AACtF;AACA;AACA,CAAC;AAMM,MAAMkB,sBAAsB,GAAAzB,OAAA,CAAAyB,sBAAA,GAAG,IAAAxB,yBAAM,EAACC,aAAM,CAACwB,KAAK,CAA8B;AACvF;AACA;AACA;AACA,UAAU,CAAC;EAAEtB;AAAmC,CAAC,KAAKA,KAAK,CAAC,cAAc,CAAC;AAC3E;AACA;AACA,aAAa,CAAC;EAAEA;AAAmC,CAAC,KAAKA,KAAK,CAACC,IAAI;AACnE;AACA,eAAe,CAAC;EAAEsB;AAAS,CAAC,KAAMA,QAAQ,GAAG,kBAAkB,GAAG,SAAU;AAC5E,CAAC;AAEM,MAAMC,iCAAiC,GAAA5B,OAAA,CAAA4B,iCAAA,GAAG,IAAA3B,yBAAM,EAACC,aAAM,CAACC,GAAG,CAAC;AACnE;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
|
|
@@ -38,6 +38,7 @@ const ColorSchemeProvider = ({
|
|
|
38
38
|
secondaryColor,
|
|
39
39
|
siteId,
|
|
40
40
|
style = {},
|
|
41
|
+
iconColor,
|
|
41
42
|
customVariables
|
|
42
43
|
}) => {
|
|
43
44
|
const {
|
|
@@ -50,6 +51,7 @@ const ColorSchemeProvider = ({
|
|
|
50
51
|
const paragraphFormat = (0, _react.useMemo)(() => overrideParagraphFormat ? [] : undefined, [overrideParagraphFormat]);
|
|
51
52
|
const contextValue = (0, _useChaynsTheme.useChaynsTheme)({
|
|
52
53
|
color,
|
|
54
|
+
iconColor,
|
|
53
55
|
colorMode,
|
|
54
56
|
secondaryColor,
|
|
55
57
|
siteId,
|
|
@@ -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","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\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 !== 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,IAAAA,UAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,uBAAA,CAAAF,OAAA;AACA,IAAAG,iBAAA,GAAAH,OAAA;AACA,IAAAI,oBAAA,GAAAJ,OAAA;AACA,IAAAK,eAAA,GAAAL,OAAA;AAAwD,SAAAE,wBAAAI,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAN,uBAAA,YAAAA,CAAAI,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;
|
|
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","iconColor","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 * An optional color for all icons\n */\n iconColor?: string;\n};\n\nexport interface Theme {\n [key: string]: string;\n}\n\nexport type WithTheme<T> = T & {\n theme: Theme;\n};\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 iconColor,\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 !== internalColorMode;\n const paragraphFormat = useMemo(\n () => (overrideParagraphFormat ? [] : undefined),\n [overrideParagraphFormat],\n );\n\n const contextValue = useChaynsTheme({\n color,\n iconColor,\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":[]}
|
|
@@ -18,6 +18,7 @@ const createTheme = ({
|
|
|
18
18
|
designSettings,
|
|
19
19
|
paragraphFormat,
|
|
20
20
|
theme,
|
|
21
|
+
iconColor,
|
|
21
22
|
customVariables
|
|
22
23
|
}) => {
|
|
23
24
|
if (theme) {
|
|
@@ -76,6 +77,9 @@ const createTheme = ({
|
|
|
76
77
|
result.colorMode = 'classic';
|
|
77
78
|
break;
|
|
78
79
|
}
|
|
80
|
+
if (iconColor) {
|
|
81
|
+
result.iconColor = iconColor;
|
|
82
|
+
}
|
|
79
83
|
result.fontSize = (designSettings === null || designSettings === void 0 ? void 0 : designSettings.fontSizePx) || 15;
|
|
80
84
|
return result;
|
|
81
85
|
};
|
|
@@ -87,6 +91,7 @@ const useChaynsTheme = ({
|
|
|
87
91
|
designSettings: designSettingsProp,
|
|
88
92
|
paragraphFormat: paragraphFormatProp,
|
|
89
93
|
siteId,
|
|
94
|
+
iconColor,
|
|
90
95
|
theme,
|
|
91
96
|
customVariables
|
|
92
97
|
}) => {
|
|
@@ -101,6 +106,7 @@ const useChaynsTheme = ({
|
|
|
101
106
|
designSettings,
|
|
102
107
|
paragraphFormat,
|
|
103
108
|
theme,
|
|
109
|
+
iconColor,
|
|
104
110
|
customVariables
|
|
105
111
|
}));
|
|
106
112
|
(0, _react.useEffect)(() => {
|
|
@@ -116,6 +122,7 @@ const useChaynsTheme = ({
|
|
|
116
122
|
designSettings,
|
|
117
123
|
paragraphFormat,
|
|
118
124
|
theme,
|
|
125
|
+
iconColor,
|
|
119
126
|
customVariables
|
|
120
127
|
}));
|
|
121
128
|
}, [color, colorMode, colors, designSettings, paragraphFormat, secondaryColor, theme, customVariables]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useChaynsTheme.js","names":["_colors","require","_chaynsApi","_react","_font","_useDesignSettings","_useParagraphFormat","createTheme","colors","colorMode","color","secondaryColor","designSettings","paragraphFormat","theme","customVariables","result","Object","keys","forEach","key","availableColors","getAvailableColorList","colorName","hexColor","getColorFromPalette","rgbColor","hexToRgb255","r","g","b","convertIconStyle","iconStyle","themeResult","getHeadlineColorSelector","ColorMode","Light","Dark","fontSize","fontSizePx","useChaynsTheme","designSettingsProp","paragraphFormatProp","siteId","useDesignSettings","useParagraphFormat","isMountedRef","useRef","internalTheme","setInternalTheme","useState","useEffect","current","useMemo","exports"],"sources":["../../../../../src/components/color-scheme-provider/hooks/useChaynsTheme.ts"],"sourcesContent":["import { getAvailableColorList, getColorFromPalette, hexToRgb255 } from '@chayns/colors';\nimport { ChaynsDesignSettings, ChaynsParagraphFormat, ColorMode } from 'chayns-api';\nimport { useEffect, useMemo, useRef, useState } from 'react';\nimport { convertIconStyle, getHeadlineColorSelector } from '../../../utils/font';\nimport type { Theme } from '../ColorSchemeProvider';\nimport { useDesignSettings } from './useDesignSettings';\nimport { useParagraphFormat } from './useParagraphFormat';\n\nexport type ThemeOptions = {\n colors?: Theme;\n colorMode: ColorMode;\n color: string;\n secondaryColor?: string;\n designSettings?: ChaynsDesignSettings & { fontSizePx?: number };\n paragraphFormat?: ChaynsParagraphFormat[];\n siteId?: string;\n theme?: Theme;\n customVariables?: Record<string, string>;\n};\n\nconst createTheme = ({\n colors,\n colorMode,\n color,\n secondaryColor,\n designSettings,\n paragraphFormat,\n theme,\n customVariables,\n}: Omit<ThemeOptions, 'siteId'>) => {\n if (theme) {\n return theme;\n }\n\n const result: Theme = {};\n\n if (customVariables) {\n Object.keys(customVariables).forEach((key) => {\n result[key] = customVariables[key] as string;\n });\n }\n\n const availableColors = getAvailableColorList();\n\n if (!colors) {\n availableColors.forEach((colorName: string) => {\n const hexColor = getColorFromPalette(colorName, {\n color,\n colorMode,\n secondaryColor,\n });\n\n if (hexColor) {\n const rgbColor = hexToRgb255(hexColor);\n\n result[colorName] = hexColor;\n\n if (rgbColor) {\n result[`${colorName}-rgb`] = `${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}`;\n }\n }\n });\n }\n\n if (designSettings) {\n Object.keys(designSettings).forEach((key) => {\n if (key === 'iconStyle') {\n result[key] = convertIconStyle(designSettings.iconStyle);\n\n return;\n }\n result[key] = designSettings[key as keyof ChaynsDesignSettings] as string;\n });\n }\n\n if (paragraphFormat) {\n const { themeResult } = getHeadlineColorSelector(paragraphFormat);\n\n // Update Theme\n Object.keys(themeResult).forEach((key) => {\n result[key] = themeResult[key] as string;\n });\n }\n\n switch (colorMode) {\n case ColorMode.Light:\n result.colorMode = 'light';\n break;\n case ColorMode.Dark:\n result.colorMode = 'dark';\n break;\n default:\n result.colorMode = 'classic';\n break;\n }\n\n result.fontSize = (designSettings?.fontSizePx || 15) as unknown as string;\n\n return result;\n};\n\nexport const useChaynsTheme = ({\n colors,\n colorMode,\n color,\n secondaryColor,\n designSettings: designSettingsProp,\n paragraphFormat: paragraphFormatProp,\n siteId,\n theme,\n customVariables,\n}: ThemeOptions) => {\n const designSettings = useDesignSettings(siteId, designSettingsProp);\n const paragraphFormat = useParagraphFormat(siteId, paragraphFormatProp);\n const isMountedRef = useRef<boolean>(false);\n\n const [internalTheme, setInternalTheme] = useState<Theme>(() =>\n createTheme({\n colors,\n colorMode,\n color,\n secondaryColor,\n designSettings,\n paragraphFormat,\n theme,\n customVariables,\n }),\n );\n\n useEffect(() => {\n if (!isMountedRef.current) {\n isMountedRef.current = true;\n return;\n }\n setInternalTheme(\n createTheme({\n colors,\n colorMode,\n color,\n secondaryColor,\n designSettings,\n paragraphFormat,\n theme,\n customVariables,\n }),\n );\n }, [\n color,\n colorMode,\n colors,\n designSettings,\n paragraphFormat,\n secondaryColor,\n theme,\n customVariables,\n ]);\n\n return useMemo(\n () => ({\n theme: internalTheme,\n designSettings,\n paragraphFormat,\n }),\n [internalTheme, designSettings, paragraphFormat],\n );\n};\n"],"mappings":";;;;;;AAAA,IAAAA,OAAA,GAAAC,OAAA;AACA,IAAAC,UAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AACA,IAAAG,KAAA,GAAAH,OAAA;AAEA,IAAAI,kBAAA,GAAAJ,OAAA;AACA,IAAAK,mBAAA,GAAAL,OAAA;
|
|
1
|
+
{"version":3,"file":"useChaynsTheme.js","names":["_colors","require","_chaynsApi","_react","_font","_useDesignSettings","_useParagraphFormat","createTheme","colors","colorMode","color","secondaryColor","designSettings","paragraphFormat","theme","iconColor","customVariables","result","Object","keys","forEach","key","availableColors","getAvailableColorList","colorName","hexColor","getColorFromPalette","rgbColor","hexToRgb255","r","g","b","convertIconStyle","iconStyle","themeResult","getHeadlineColorSelector","ColorMode","Light","Dark","fontSize","fontSizePx","useChaynsTheme","designSettingsProp","paragraphFormatProp","siteId","useDesignSettings","useParagraphFormat","isMountedRef","useRef","internalTheme","setInternalTheme","useState","useEffect","current","useMemo","exports"],"sources":["../../../../../src/components/color-scheme-provider/hooks/useChaynsTheme.ts"],"sourcesContent":["import { getAvailableColorList, getColorFromPalette, hexToRgb255 } from '@chayns/colors';\nimport { ChaynsDesignSettings, ChaynsParagraphFormat, ColorMode } from 'chayns-api';\nimport { useEffect, useMemo, useRef, useState } from 'react';\nimport { convertIconStyle, getHeadlineColorSelector } from '../../../utils/font';\nimport type { Theme } from '../ColorSchemeProvider';\nimport { useDesignSettings } from './useDesignSettings';\nimport { useParagraphFormat } from './useParagraphFormat';\n\nexport type ThemeOptions = {\n colors?: Theme;\n colorMode: ColorMode;\n iconColor?: string;\n color: string;\n secondaryColor?: string;\n designSettings?: ChaynsDesignSettings & { fontSizePx?: number };\n paragraphFormat?: ChaynsParagraphFormat[];\n siteId?: string;\n theme?: Theme;\n customVariables?: Record<string, string>;\n};\n\nconst createTheme = ({\n colors,\n colorMode,\n color,\n secondaryColor,\n designSettings,\n paragraphFormat,\n theme,\n iconColor,\n customVariables,\n}: Omit<ThemeOptions, 'siteId'>) => {\n if (theme) {\n return theme;\n }\n\n const result: Theme = {};\n\n if (customVariables) {\n Object.keys(customVariables).forEach((key) => {\n result[key] = customVariables[key] as string;\n });\n }\n\n const availableColors = getAvailableColorList();\n\n if (!colors) {\n availableColors.forEach((colorName: string) => {\n const hexColor = getColorFromPalette(colorName, {\n color,\n colorMode,\n secondaryColor,\n });\n\n if (hexColor) {\n const rgbColor = hexToRgb255(hexColor);\n\n result[colorName] = hexColor;\n\n if (rgbColor) {\n result[`${colorName}-rgb`] = `${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}`;\n }\n }\n });\n }\n\n if (designSettings) {\n Object.keys(designSettings).forEach((key) => {\n if (key === 'iconStyle') {\n result[key] = convertIconStyle(designSettings.iconStyle);\n\n return;\n }\n result[key] = designSettings[key as keyof ChaynsDesignSettings] as string;\n });\n }\n\n if (paragraphFormat) {\n const { themeResult } = getHeadlineColorSelector(paragraphFormat);\n\n // Update Theme\n Object.keys(themeResult).forEach((key) => {\n result[key] = themeResult[key] as string;\n });\n }\n\n switch (colorMode) {\n case ColorMode.Light:\n result.colorMode = 'light';\n break;\n case ColorMode.Dark:\n result.colorMode = 'dark';\n break;\n default:\n result.colorMode = 'classic';\n break;\n }\n\n if (iconColor) {\n result.iconColor = iconColor;\n }\n\n result.fontSize = (designSettings?.fontSizePx || 15) as unknown as string;\n\n return result;\n};\n\nexport const useChaynsTheme = ({\n colors,\n colorMode,\n color,\n secondaryColor,\n designSettings: designSettingsProp,\n paragraphFormat: paragraphFormatProp,\n siteId,\n iconColor,\n theme,\n customVariables,\n}: ThemeOptions) => {\n const designSettings = useDesignSettings(siteId, designSettingsProp);\n const paragraphFormat = useParagraphFormat(siteId, paragraphFormatProp);\n const isMountedRef = useRef<boolean>(false);\n\n const [internalTheme, setInternalTheme] = useState<Theme>(() =>\n createTheme({\n colors,\n colorMode,\n color,\n secondaryColor,\n designSettings,\n paragraphFormat,\n theme,\n iconColor,\n customVariables,\n }),\n );\n\n useEffect(() => {\n if (!isMountedRef.current) {\n isMountedRef.current = true;\n return;\n }\n setInternalTheme(\n createTheme({\n colors,\n colorMode,\n color,\n secondaryColor,\n designSettings,\n paragraphFormat,\n theme,\n iconColor,\n customVariables,\n }),\n );\n }, [\n color,\n colorMode,\n colors,\n designSettings,\n paragraphFormat,\n secondaryColor,\n theme,\n customVariables,\n ]);\n\n return useMemo(\n () => ({\n theme: internalTheme,\n designSettings,\n paragraphFormat,\n }),\n [internalTheme, designSettings, paragraphFormat],\n );\n};\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -39,7 +39,7 @@ const StyledIcon = exports.StyledIcon = _styledComponents.default.i`
|
|
|
39
39
|
color: ${({
|
|
40
40
|
$color,
|
|
41
41
|
theme
|
|
42
|
-
}) => $color || theme.headline};
|
|
42
|
+
}) => $color || theme.iconColor || theme.headline};
|
|
43
43
|
display: ${({
|
|
44
44
|
$isStacked
|
|
45
45
|
}) => $isStacked ? undefined : 'inline-flex'};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Icon.styles.js","names":["_styledComponents","_interopRequireWildcard","require","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledIconWrapper","exports","styled","span","$isDisabled","$isOnClick","$size","StyledIcon","$color","theme","headline","$isStacked","undefined","$fontSize","css"],"sources":["../../../../src/components/icon/Icon.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledIconWrapperProps = {\n $isDisabled?: boolean;\n $isOnClick: boolean;\n $size: number;\n};\n\nexport const StyledIconWrapper = styled.span<StyledIconWrapperProps>`\n align-items: center;\n cursor: ${({ $isDisabled, $isOnClick }) =>\n $isOnClick && !$isDisabled ? 'pointer' : 'inherit'};\n display: inline-flex;\n min-height: ${({ $size }) => `${$size}px`};\n justify-content: center;\n opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n position: relative;\n transition: opacity 0.3s ease;\n min-width: ${({ $size }) => `${$size}px`};\n\n // To insure that stacked icons have the same size as normal icons.\n &&.fa-stack {\n height: fit-content;\n width: fit-content;\n line-height: ${({ $size }) => $size}px;\n }\n`;\n\ntype StyledIconProps = WithTheme<{\n $fontSize: number;\n $isStacked?: boolean;\n $color?: string;\n $size: number;\n}>;\n\nexport const StyledIcon = styled.i<StyledIconProps>`\n color: ${({ $color, theme }: StyledIconProps) => $color || theme.headline};\n display: ${({ $isStacked }) => ($isStacked ? undefined : 'inline-flex')};\n font-size: ${({ $fontSize }) => `${$fontSize}px`};\n\n ${({ $fontSize, $size }) =>\n $fontSize !== $size &&\n css`\n top: 50%;\n transform: translateY(-50%);\n `}\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AAAgD,SAAAD,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;AASzC,MAAMkB,iBAAiB,GAAAC,OAAA,CAAAD,iBAAA,GAAGE,yBAAM,CAACC,IAA4B;AACpE;AACA,cAAc,CAAC;EAAEC,WAAW;EAAEC;AAAW,CAAC,KAClCA,UAAU,IAAI,CAACD,WAAW,GAAG,SAAS,GAAG,SAAS;AAC1D;AACA,kBAAkB,CAAC;EAAEE;AAAM,CAAC,KAAK,GAAGA,KAAK,IAAI;AAC7C;AACA,eAAe,CAAC;EAAEF;AAAY,CAAC,KAAMA,WAAW,GAAG,GAAG,GAAG,CAAE;AAC3D;AACA;AACA,iBAAiB,CAAC;EAAEE;AAAM,CAAC,KAAK,GAAGA,KAAK,IAAI;AAC5C;AACA;AACA;AACA;AACA;AACA,uBAAuB,CAAC;EAAEA;AAAM,CAAC,KAAKA,KAAK;AAC3C;AACA,CAAC;AASM,MAAMC,UAAU,GAAAN,OAAA,CAAAM,UAAA,GAAGL,yBAAM,CAACd,CAAkB;AACnD,aAAa,CAAC;EAAEoB,MAAM;EAAEC;AAAuB,CAAC,KAAKD,MAAM,IAAIC,KAAK,CAACC,QAAQ;
|
|
1
|
+
{"version":3,"file":"Icon.styles.js","names":["_styledComponents","_interopRequireWildcard","require","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledIconWrapper","exports","styled","span","$isDisabled","$isOnClick","$size","StyledIcon","$color","theme","iconColor","headline","$isStacked","undefined","$fontSize","css"],"sources":["../../../../src/components/icon/Icon.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledIconWrapperProps = {\n $isDisabled?: boolean;\n $isOnClick: boolean;\n $size: number;\n};\n\nexport const StyledIconWrapper = styled.span<StyledIconWrapperProps>`\n align-items: center;\n cursor: ${({ $isDisabled, $isOnClick }) =>\n $isOnClick && !$isDisabled ? 'pointer' : 'inherit'};\n display: inline-flex;\n min-height: ${({ $size }) => `${$size}px`};\n justify-content: center;\n opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n position: relative;\n transition: opacity 0.3s ease;\n min-width: ${({ $size }) => `${$size}px`};\n\n // To insure that stacked icons have the same size as normal icons.\n &&.fa-stack {\n height: fit-content;\n width: fit-content;\n line-height: ${({ $size }) => $size}px;\n }\n`;\n\ntype StyledIconProps = WithTheme<{\n $fontSize: number;\n $isStacked?: boolean;\n $color?: string;\n $size: number;\n}>;\n\nexport const StyledIcon = styled.i<StyledIconProps>`\n color: ${({ $color, theme }: StyledIconProps) => $color || theme.iconColor || theme.headline};\n display: ${({ $isStacked }) => ($isStacked ? undefined : 'inline-flex')};\n font-size: ${({ $fontSize }) => `${$fontSize}px`};\n\n ${({ $fontSize, $size }) =>\n $fontSize !== $size &&\n css`\n top: 50%;\n transform: translateY(-50%);\n `}\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AAAgD,SAAAD,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;AASzC,MAAMkB,iBAAiB,GAAAC,OAAA,CAAAD,iBAAA,GAAGE,yBAAM,CAACC,IAA4B;AACpE;AACA,cAAc,CAAC;EAAEC,WAAW;EAAEC;AAAW,CAAC,KAClCA,UAAU,IAAI,CAACD,WAAW,GAAG,SAAS,GAAG,SAAS;AAC1D;AACA,kBAAkB,CAAC;EAAEE;AAAM,CAAC,KAAK,GAAGA,KAAK,IAAI;AAC7C;AACA,eAAe,CAAC;EAAEF;AAAY,CAAC,KAAMA,WAAW,GAAG,GAAG,GAAG,CAAE;AAC3D;AACA;AACA,iBAAiB,CAAC;EAAEE;AAAM,CAAC,KAAK,GAAGA,KAAK,IAAI;AAC5C;AACA;AACA;AACA;AACA;AACA,uBAAuB,CAAC;EAAEA;AAAM,CAAC,KAAKA,KAAK;AAC3C;AACA,CAAC;AASM,MAAMC,UAAU,GAAAN,OAAA,CAAAM,UAAA,GAAGL,yBAAM,CAACd,CAAkB;AACnD,aAAa,CAAC;EAAEoB,MAAM;EAAEC;AAAuB,CAAC,KAAKD,MAAM,IAAIC,KAAK,CAACC,SAAS,IAAID,KAAK,CAACE,QAAQ;AAChG,eAAe,CAAC;EAAEC;AAAW,CAAC,KAAMA,UAAU,GAAGC,SAAS,GAAG,aAAc;AAC3E,iBAAiB,CAAC;EAAEC;AAAU,CAAC,KAAK,GAAGA,SAAS,IAAI;AACpD;AACA,MAAM,CAAC;EAAEA,SAAS;EAAER;AAAM,CAAC,KACnBQ,SAAS,KAAKR,KAAK,IACnB,IAAAS,qBAAG;AACX;AACA;AACA,SAAS;AACT,CAAC","ignoreList":[]}
|
|
@@ -25,6 +25,7 @@ const PageProvider = ({
|
|
|
25
25
|
style = {},
|
|
26
26
|
shouldRemovePadding,
|
|
27
27
|
shouldUseUsableHeight,
|
|
28
|
+
iconColor,
|
|
28
29
|
customVariables
|
|
29
30
|
}) => {
|
|
30
31
|
const {
|
|
@@ -45,7 +46,8 @@ const PageProvider = ({
|
|
|
45
46
|
...style,
|
|
46
47
|
height: '100%'
|
|
47
48
|
} : style,
|
|
48
|
-
customVariables: customVariables
|
|
49
|
+
customVariables: customVariables,
|
|
50
|
+
iconColor: iconColor
|
|
49
51
|
}, children), /*#__PURE__*/_react.default.createElement(GlobalStyle, null));
|
|
50
52
|
};
|
|
51
53
|
PageProvider.displayName = 'PageProvider';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PageProvider.js","names":["_chaynsApi","require","_react","_interopRequireDefault","_styledComponents","_pageProvider","_ColorSchemeProvider","_PageProvider","e","__esModule","default","GlobalStyle","createGlobalStyle","PageProvider","children","color","colorMode","secondaryColor","siteId","style","shouldRemovePadding","shouldUseUsableHeight","customVariables","runtimeEnvironment","useEnvironment","usableHeight","useUsableHeight","shouldUsePadding","RuntimeEnviroment","IntercomPlugin","PagemakerPlugin","includes","createElement","StyledPageProvider","className","$shouldUsePadding","$usableHeight","undefined","height","displayName","_default","exports"],"sources":["../../../../src/components/page-provider/PageProvider.tsx"],"sourcesContent":["import { RuntimeEnviroment, useEnvironment } from 'chayns-api';\nimport React, { FC } from 'react';\nimport { createGlobalStyle } from 'styled-components';\nimport { useUsableHeight } from '../../utils/pageProvider';\nimport ColorSchemeProvider, {\n type ColorSchemeProviderProps,\n} from '../color-scheme-provider/ColorSchemeProvider';\nimport { StyledPageProvider } from './PageProvider.styles';\n\ninterface PageProviderProps extends ColorSchemeProviderProps {\n /**\n * Whether the padding should be removed.\n */\n shouldRemovePadding?: boolean;\n /**\n * Whether the usable height should be used.\n */\n shouldUseUsableHeight?: boolean;\n}\n\nconst GlobalStyle = createGlobalStyle`\n *, *::before, *::after {\n box-sizing: border-box;\n }\n`;\n\nconst PageProvider: FC<PageProviderProps> = ({\n children,\n color,\n colorMode,\n secondaryColor,\n siteId,\n style = {},\n shouldRemovePadding,\n shouldUseUsableHeight,\n customVariables,\n}) => {\n const { runtimeEnvironment } = useEnvironment();\n\n const usableHeight = useUsableHeight();\n\n const shouldUsePadding =\n !shouldRemovePadding &&\n ![RuntimeEnviroment.IntercomPlugin, RuntimeEnviroment.PagemakerPlugin, 6].includes(\n runtimeEnvironment as number,\n );\n\n return (\n <StyledPageProvider\n className=\"page-provider\"\n $shouldUsePadding={shouldUsePadding}\n $usableHeight={shouldUseUsableHeight ? usableHeight : undefined}\n >\n <ColorSchemeProvider\n color={color}\n secondaryColor={secondaryColor}\n colorMode={colorMode}\n siteId={siteId}\n style={shouldUseUsableHeight ? { ...style, height: '100%' } : style}\n customVariables={customVariables}\n >\n {children}\n </ColorSchemeProvider>\n <GlobalStyle />\n </StyledPageProvider>\n );\n};\nPageProvider.displayName = 'PageProvider';\n\nexport default PageProvider;\n"],"mappings":";;;;;;AAAA,IAAAA,UAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,iBAAA,GAAAH,OAAA;AACA,IAAAI,aAAA,GAAAJ,OAAA;AACA,IAAAK,oBAAA,GAAAH,sBAAA,CAAAF,OAAA;AAGA,IAAAM,aAAA,GAAAN,OAAA;AAA2D,SAAAE,uBAAAK,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAa3D,MAAMG,WAAW,GAAG,IAAAC,mCAAiB;AACrC;AACA;AACA;AACA,CAAC;AAED,MAAMC,YAAmC,GAAGA,CAAC;EACzCC,QAAQ;EACRC,KAAK;EACLC,SAAS;EACTC,cAAc;EACdC,MAAM;EACNC,KAAK,GAAG,CAAC,CAAC;EACVC,mBAAmB;EACnBC,qBAAqB;EACrBC;AACJ,CAAC,KAAK;EACF,MAAM;IAAEC;EAAmB,CAAC,GAAG,IAAAC,yBAAc,EAAC,CAAC;EAE/C,MAAMC,YAAY,GAAG,IAAAC,6BAAe,EAAC,CAAC;EAEtC,MAAMC,gBAAgB,GAClB,
|
|
1
|
+
{"version":3,"file":"PageProvider.js","names":["_chaynsApi","require","_react","_interopRequireDefault","_styledComponents","_pageProvider","_ColorSchemeProvider","_PageProvider","e","__esModule","default","GlobalStyle","createGlobalStyle","PageProvider","children","color","colorMode","secondaryColor","siteId","style","shouldRemovePadding","shouldUseUsableHeight","iconColor","customVariables","runtimeEnvironment","useEnvironment","usableHeight","useUsableHeight","shouldUsePadding","RuntimeEnviroment","IntercomPlugin","PagemakerPlugin","includes","createElement","StyledPageProvider","className","$shouldUsePadding","$usableHeight","undefined","height","displayName","_default","exports"],"sources":["../../../../src/components/page-provider/PageProvider.tsx"],"sourcesContent":["import { RuntimeEnviroment, useEnvironment } from 'chayns-api';\nimport React, { FC } from 'react';\nimport { createGlobalStyle } from 'styled-components';\nimport { useUsableHeight } from '../../utils/pageProvider';\nimport ColorSchemeProvider, {\n type ColorSchemeProviderProps,\n} from '../color-scheme-provider/ColorSchemeProvider';\nimport { StyledPageProvider } from './PageProvider.styles';\n\ninterface PageProviderProps extends ColorSchemeProviderProps {\n /**\n * Whether the padding should be removed.\n */\n shouldRemovePadding?: boolean;\n /**\n * Whether the usable height should be used.\n */\n shouldUseUsableHeight?: boolean;\n}\n\nconst GlobalStyle = createGlobalStyle`\n *, *::before, *::after {\n box-sizing: border-box;\n }\n`;\n\nconst PageProvider: FC<PageProviderProps> = ({\n children,\n color,\n colorMode,\n secondaryColor,\n siteId,\n style = {},\n shouldRemovePadding,\n shouldUseUsableHeight,\n iconColor,\n customVariables,\n}) => {\n const { runtimeEnvironment } = useEnvironment();\n\n const usableHeight = useUsableHeight();\n\n const shouldUsePadding =\n !shouldRemovePadding &&\n ![RuntimeEnviroment.IntercomPlugin, RuntimeEnviroment.PagemakerPlugin, 6].includes(\n runtimeEnvironment as number,\n );\n\n return (\n <StyledPageProvider\n className=\"page-provider\"\n $shouldUsePadding={shouldUsePadding}\n $usableHeight={shouldUseUsableHeight ? usableHeight : undefined}\n >\n <ColorSchemeProvider\n color={color}\n secondaryColor={secondaryColor}\n colorMode={colorMode}\n siteId={siteId}\n style={shouldUseUsableHeight ? { ...style, height: '100%' } : style}\n customVariables={customVariables}\n iconColor={iconColor}\n >\n {children}\n </ColorSchemeProvider>\n <GlobalStyle />\n </StyledPageProvider>\n );\n};\nPageProvider.displayName = 'PageProvider';\n\nexport default PageProvider;\n"],"mappings":";;;;;;AAAA,IAAAA,UAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,iBAAA,GAAAH,OAAA;AACA,IAAAI,aAAA,GAAAJ,OAAA;AACA,IAAAK,oBAAA,GAAAH,sBAAA,CAAAF,OAAA;AAGA,IAAAM,aAAA,GAAAN,OAAA;AAA2D,SAAAE,uBAAAK,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAa3D,MAAMG,WAAW,GAAG,IAAAC,mCAAiB;AACrC;AACA;AACA;AACA,CAAC;AAED,MAAMC,YAAmC,GAAGA,CAAC;EACzCC,QAAQ;EACRC,KAAK;EACLC,SAAS;EACTC,cAAc;EACdC,MAAM;EACNC,KAAK,GAAG,CAAC,CAAC;EACVC,mBAAmB;EACnBC,qBAAqB;EACrBC,SAAS;EACTC;AACJ,CAAC,KAAK;EACF,MAAM;IAAEC;EAAmB,CAAC,GAAG,IAAAC,yBAAc,EAAC,CAAC;EAE/C,MAAMC,YAAY,GAAG,IAAAC,6BAAe,EAAC,CAAC;EAEtC,MAAMC,gBAAgB,GAClB,CAACR,mBAAmB,IACpB,CAAC,CAACS,4BAAiB,CAACC,cAAc,EAAED,4BAAiB,CAACE,eAAe,EAAE,CAAC,CAAC,CAACC,QAAQ,CAC9ER,kBACJ,CAAC;EAEL,oBACItB,MAAA,CAAAQ,OAAA,CAAAuB,aAAA,CAAC1B,aAAA,CAAA2B,kBAAkB;IACfC,SAAS,EAAC,eAAe;IACzBC,iBAAiB,EAAER,gBAAiB;IACpCS,aAAa,EAAEhB,qBAAqB,GAAGK,YAAY,GAAGY;EAAU,gBAEhEpC,MAAA,CAAAQ,OAAA,CAAAuB,aAAA,CAAC3B,oBAAA,CAAAI,OAAmB;IAChBK,KAAK,EAAEA,KAAM;IACbE,cAAc,EAAEA,cAAe;IAC/BD,SAAS,EAAEA,SAAU;IACrBE,MAAM,EAAEA,MAAO;IACfC,KAAK,EAAEE,qBAAqB,GAAG;MAAE,GAAGF,KAAK;MAAEoB,MAAM,EAAE;IAAO,CAAC,GAAGpB,KAAM;IACpEI,eAAe,EAAEA,eAAgB;IACjCD,SAAS,EAAEA;EAAU,GAEpBR,QACgB,CAAC,eACtBZ,MAAA,CAAAQ,OAAA,CAAAuB,aAAA,CAACtB,WAAW,MAAE,CACE,CAAC;AAE7B,CAAC;AACDE,YAAY,CAAC2B,WAAW,GAAG,cAAc;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAhC,OAAA,GAE3BG,YAAY","ignoreList":[]}
|
|
@@ -47,7 +47,8 @@ const Popup = /*#__PURE__*/(0, _react2.forwardRef)(({
|
|
|
47
47
|
width,
|
|
48
48
|
measuredElement
|
|
49
49
|
} = (0, _element.useMeasuredClone)({
|
|
50
|
-
content
|
|
50
|
+
content,
|
|
51
|
+
shouldPreventTextWrapping: !shouldUseChildrenWidth
|
|
51
52
|
});
|
|
52
53
|
const popupContentRef = (0, _react2.useRef)(null);
|
|
53
54
|
const popupRef = (0, _react2.useRef)(null);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Popup.js","names":["_react","require","_react2","_interopRequireWildcard","_reactDom","_uuid","_popup","_AreaContextProvider","_interopRequireDefault","_PopupContentWrapper","_Popup","_element","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","Popup","forwardRef","alignment","content","onShow","container","onHide","children","shouldHideOnChildrenLeave","shouldShowOnHover","shouldUseChildrenWidth","shouldScrollWithContent","shouldUseFullWidth","yOffset","ref","coordinates","setCoordinates","useState","x","y","internalAlignment","setInternalAlignment","PopupAlignment","TopLeft","offset","setOffset","isOpen","setIsOpen","portal","setPortal","pseudoSize","setPseudoSize","newContainer","setNewContainer","contentMaxHeight","setContentMaxHeight","undefined","timeout","useRef","uuid","useUuid","height","width","measuredElement","useMeasuredClone","popupContentRef","popupRef","useEffect","current","el","element","closest","Element","handleShow","useCallback","pseudoHeight","pseudoWidth","childrenHeight","left","childrenLeft","top","childrenTop","childrenWidth","getBoundingClientRect","document","body","containerHeight","containerWidth","zoomX","offsetWidth","zoomY","offsetHeight","BottomLeft","BottomRight","isRight","scrollLeft","scrollTop","newOffset","window","innerWidth","right","newX","TopRight","viewHeight","clientHeight","TopCenter","includes","handleChildrenClick","handleHide","handleMouseEnter","clearTimeout","handleMouseLeave","setTimeout","handleDocumentClick","event","_popupContentRef$curr","contains","target","useImperativeHandle","hide","show","addEventListener","removeEventListener","createPortal","createElement","AnimatePresence","initial","key","maxHeight","onMouseLeave","onMouseEnter","shouldChangeColor","Fragment","StyledPopup","className","onClick","$shouldUseChildrenWidth","$shouldUseFullWidth","displayName","_default","exports"],"sources":["../../../../src/components/popup/Popup.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, {\n forwardRef,\n ReactNode,\n ReactPortal,\n useCallback,\n useEffect,\n useImperativeHandle,\n useRef,\n useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useUuid } from '../../hooks/uuid';\nimport { PopupAlignment, PopupCoordinates, PopupRef } from '../../types/popup';\nimport AreaContextProvider from '../area-provider/AreaContextProvider';\nimport PopupContentWrapper from './popup-content-wrapper/PopupContentWrapper';\nimport { StyledPopup } from './Popup.styles';\nimport { useMeasuredClone } from '../../hooks/element';\n\nexport type PopupProps = {\n /**\n * The alignment of the popup. By default, the popup will calculate the best alignment.\n */\n alignment?: PopupAlignment;\n /**\n * The element over which the content of the `ContextMenu` should be displayed.\n */\n children?: ReactNode;\n /**\n * The element where the content of the `Popup` should be rendered via React Portal.\n */\n container?: Element;\n /**\n * The content that should be displayed inside the popup.\n */\n content: ReactNode;\n /**\n * Function to be executed when the content of the Context menu has been hidden.\n */\n onHide?: VoidFunction;\n /**\n * Function to be executed when the content of the Context menu has been shown.\n */\n onShow?: VoidFunction;\n /**\n * Whether the tooltip should be hidden after the children is not hovered.\n */\n shouldHideOnChildrenLeave?: boolean;\n /**\n * Whether the popup should scroll with the content.\n */\n shouldScrollWithContent?: boolean;\n /**\n * Whether the popup should be opened on hover. If not, the popup will be opened on click.\n */\n shouldShowOnHover?: boolean;\n /**\n * Whether the width of the children should be used.\n */\n shouldUseChildrenWidth?: boolean;\n /**\n * Whether the popup children should use the full width.\n */\n shouldUseFullWidth?: boolean;\n /**\n * The Y offset of the popup to the children.\n */\n yOffset?: number;\n};\n\nconst Popup = forwardRef<PopupRef, PopupProps>(\n (\n {\n alignment,\n content,\n onShow,\n container,\n onHide,\n children,\n shouldHideOnChildrenLeave,\n shouldShowOnHover = false,\n shouldUseChildrenWidth = true,\n shouldScrollWithContent = true,\n shouldUseFullWidth = false,\n yOffset = 0,\n },\n ref,\n ) => {\n const [coordinates, setCoordinates] = useState<PopupCoordinates>({\n x: 0,\n y: 0,\n });\n\n const [internalAlignment, setInternalAlignment] = useState<PopupAlignment>(\n PopupAlignment.TopLeft,\n );\n const [offset, setOffset] = useState<number>(0);\n const [isOpen, setIsOpen] = useState(false);\n const [portal, setPortal] = useState<ReactPortal>();\n const [pseudoSize, setPseudoSize] = useState<{ height: number; width: number }>();\n const [newContainer, setNewContainer] = useState<Element | null>(container ?? null);\n const [contentMaxHeight, setContentMaxHeight] = useState<number | undefined>(undefined);\n\n const timeout = useRef<number>();\n\n const uuid = useUuid();\n\n const { height, width, measuredElement } = useMeasuredClone({ content });\n\n const popupContentRef = useRef<HTMLDivElement>(null);\n const popupRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n if (popupRef.current && !container) {\n const el = popupRef.current as HTMLElement;\n\n const element = el.closest('.dialog-inner, .page-provider, .tapp, body');\n\n setNewContainer(element);\n }\n }, [container]);\n\n useEffect(() => {\n if (container instanceof Element) {\n setNewContainer(container);\n }\n }, [container]);\n\n useEffect(() => {\n setPseudoSize({ height, width });\n }, [height, width]);\n\n const handleShow = useCallback(() => {\n if (popupRef.current && pseudoSize) {\n if (!newContainer) {\n return;\n }\n\n const { height: pseudoHeight, width: pseudoWidth } = pseudoSize;\n\n const {\n height: childrenHeight,\n left: childrenLeft,\n top: childrenTop,\n width: childrenWidth,\n } = popupRef.current.getBoundingClientRect();\n\n const element = shouldScrollWithContent ? newContainer : document.body;\n\n const {\n height: containerHeight,\n width: containerWidth,\n top,\n left,\n } = element.getBoundingClientRect();\n\n const zoomX = containerWidth / (element as HTMLElement).offsetWidth;\n const zoomY = containerHeight / (element as HTMLElement).offsetHeight;\n\n if (\n pseudoHeight > childrenTop - 25 ||\n alignment === PopupAlignment.BottomLeft ||\n alignment === PopupAlignment.BottomRight\n ) {\n let isRight = false;\n\n if (\n pseudoWidth > childrenLeft + childrenWidth / 2 - 25 ||\n alignment === PopupAlignment.BottomRight\n ) {\n setInternalAlignment(PopupAlignment.BottomRight);\n\n isRight = true;\n } else {\n setInternalAlignment(PopupAlignment.BottomLeft);\n }\n\n const x =\n (childrenLeft + childrenWidth / 2 - left) / zoomX + element.scrollLeft;\n const y =\n (childrenTop + childrenHeight / 2 - top) / zoomY +\n element.scrollTop -\n yOffset;\n\n let newOffset;\n\n if (isRight) {\n newOffset =\n x + pseudoWidth >= window.innerWidth\n ? x + pseudoWidth - window.innerWidth\n : 0;\n } else {\n newOffset = 0;\n\n const right = window.innerWidth - (childrenLeft + childrenWidth / 2);\n\n newOffset =\n right + pseudoWidth >= window.innerWidth\n ? right + pseudoWidth - window.innerWidth\n : 0;\n }\n\n setOffset(newOffset);\n\n const newX = x - newOffset;\n\n setCoordinates({\n x: newX < 23 ? 23 : newX,\n y,\n });\n } else {\n let isRight = false;\n\n if (\n pseudoWidth > childrenLeft + childrenWidth / 2 - 25 ||\n alignment === PopupAlignment.TopRight\n ) {\n setInternalAlignment(PopupAlignment.TopRight);\n\n isRight = true;\n } else {\n setInternalAlignment(PopupAlignment.TopLeft);\n }\n\n const x =\n (childrenLeft + childrenWidth / 2 - left) / zoomX + element.scrollLeft;\n const y =\n (childrenTop + childrenHeight / 2 - top) / zoomY +\n element.scrollTop -\n yOffset;\n\n let newOffset;\n\n if (isRight) {\n newOffset =\n x + pseudoWidth >= window.innerWidth\n ? x + pseudoWidth - window.innerWidth\n : 0;\n } else {\n newOffset = 0;\n\n const right = window.innerWidth - (childrenLeft + childrenWidth / 2);\n\n newOffset =\n right + pseudoWidth >= window.innerWidth\n ? right + pseudoWidth - window.innerWidth\n : 0;\n }\n\n setOffset(newOffset);\n\n const newX = x - newOffset;\n\n setCoordinates({\n x: newX < 23 ? 23 : newX,\n y,\n });\n }\n\n setIsOpen(true);\n }\n }, [alignment, newContainer, pseudoSize, shouldScrollWithContent, yOffset]);\n\n useEffect(() => {\n if (!newContainer || !popupRef.current) return;\n\n const viewHeight = newContainer.clientHeight;\n const childrenHeight = popupRef.current.getBoundingClientRect().height;\n\n if (\n [\n PopupAlignment.TopLeft,\n PopupAlignment.TopRight,\n PopupAlignment.TopCenter,\n ].includes(internalAlignment)\n ) {\n setContentMaxHeight(coordinates.y - 20);\n } else {\n setContentMaxHeight(viewHeight - childrenHeight - coordinates.y - 20);\n }\n }, [coordinates.y, internalAlignment, newContainer]);\n\n const handleChildrenClick = () => {\n handleShow();\n };\n\n const handleHide = useCallback(() => {\n setIsOpen(false);\n }, []);\n\n const handleMouseEnter = useCallback(() => {\n if (shouldShowOnHover) {\n window.clearTimeout(timeout.current);\n handleShow();\n }\n }, [handleShow, shouldShowOnHover]);\n\n const handleMouseLeave = useCallback(() => {\n if (!shouldShowOnHover) {\n return;\n }\n\n if (shouldHideOnChildrenLeave) {\n handleHide();\n\n return;\n }\n\n timeout.current = window.setTimeout(() => {\n handleHide();\n }, 500);\n }, [handleHide, shouldHideOnChildrenLeave, shouldShowOnHover]);\n\n const handleDocumentClick = useCallback<EventListener>(\n (event) => {\n if (!popupContentRef.current?.contains(event.target as Node)) {\n handleHide();\n }\n },\n [handleHide],\n );\n\n useImperativeHandle(\n ref,\n () => ({\n hide: handleHide,\n show: handleShow,\n }),\n [handleHide, handleShow],\n );\n\n useEffect(() => {\n if (isOpen) {\n document.addEventListener('click', handleDocumentClick, true);\n window.addEventListener('blur', handleHide);\n\n if (typeof onShow === 'function') {\n onShow();\n }\n } else if (typeof onHide === 'function') {\n onHide();\n }\n\n return () => {\n document.removeEventListener('click', handleDocumentClick, true);\n window.removeEventListener('blur', handleHide);\n };\n }, [handleDocumentClick, handleHide, isOpen, onHide, onShow]);\n\n useEffect(() => {\n if (!newContainer) {\n return;\n }\n\n setPortal(() =>\n createPortal(\n <AnimatePresence initial={false}>\n {isOpen && (\n <PopupContentWrapper\n width={pseudoSize?.width ?? 0}\n offset={offset}\n shouldScrollWithContent={shouldScrollWithContent}\n coordinates={coordinates}\n key={`tooltip_${uuid}`}\n maxHeight={contentMaxHeight}\n alignment={internalAlignment}\n ref={popupContentRef}\n onMouseLeave={handleMouseLeave}\n onMouseEnter={handleMouseEnter}\n >\n <AreaContextProvider shouldChangeColor>\n {content}\n </AreaContextProvider>\n </PopupContentWrapper>\n )}\n </AnimatePresence>,\n newContainer,\n ),\n );\n }, [\n contentMaxHeight,\n internalAlignment,\n newContainer,\n content,\n coordinates,\n handleMouseEnter,\n handleMouseLeave,\n isOpen,\n offset,\n pseudoSize?.width,\n uuid,\n shouldScrollWithContent,\n ]);\n\n return (\n <>\n {measuredElement}\n <StyledPopup\n className=\"beta-chayns-popup\"\n ref={popupRef}\n onClick={handleChildrenClick}\n onMouseLeave={handleMouseLeave}\n onMouseEnter={handleMouseEnter}\n $shouldUseChildrenWidth={shouldUseChildrenWidth}\n $shouldUseFullWidth={shouldUseFullWidth}\n >\n {children}\n </StyledPopup>\n {portal}\n </>\n );\n },\n);\n\nPopup.displayName = 'Popup';\n\nexport default Popup;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,OAAA,GAAAC,uBAAA,CAAAF,OAAA;AAUA,IAAAG,SAAA,GAAAH,OAAA;AACA,IAAAI,KAAA,GAAAJ,OAAA;AACA,IAAAK,MAAA,GAAAL,OAAA;AACA,IAAAM,oBAAA,GAAAC,sBAAA,CAAAP,OAAA;AACA,IAAAQ,oBAAA,GAAAD,sBAAA,CAAAP,OAAA;AACA,IAAAS,MAAA,GAAAT,OAAA;AACA,IAAAU,QAAA,GAAAV,OAAA;AAAuD,SAAAO,uBAAAI,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAT,wBAAAS,CAAA,EAAAG,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAb,uBAAA,YAAAA,CAAAS,CAAA,EAAAG,CAAA,SAAAA,CAAA,IAAAH,CAAA,IAAAA,CAAA,CAAAC,UAAA,SAAAD,CAAA,MAAAO,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAR,OAAA,EAAAF,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAS,CAAA,MAAAF,CAAA,GAAAJ,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAE,CAAA,CAAAI,GAAA,CAAAX,CAAA,UAAAO,CAAA,CAAAK,GAAA,CAAAZ,CAAA,GAAAO,CAAA,CAAAM,GAAA,CAAAb,CAAA,EAAAS,CAAA,gBAAAN,CAAA,IAAAH,CAAA,gBAAAG,CAAA,OAAAW,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAG,CAAA,OAAAK,CAAA,IAAAD,CAAA,GAAAS,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAG,CAAA,OAAAK,CAAA,CAAAI,GAAA,IAAAJ,CAAA,CAAAK,GAAA,IAAAN,CAAA,CAAAE,CAAA,EAAAN,CAAA,EAAAK,CAAA,IAAAC,CAAA,CAAAN,CAAA,IAAAH,CAAA,CAAAG,CAAA,WAAAM,CAAA,KAAAT,CAAA,EAAAG,CAAA;AAqDvD,MAAMgB,KAAK,gBAAG,IAAAC,kBAAU,EACpB,CACI;EACIC,SAAS;EACTC,OAAO;EACPC,MAAM;EACNC,SAAS;EACTC,MAAM;EACNC,QAAQ;EACRC,yBAAyB;EACzBC,iBAAiB,GAAG,KAAK;EACzBC,sBAAsB,GAAG,IAAI;EAC7BC,uBAAuB,GAAG,IAAI;EAC9BC,kBAAkB,GAAG,KAAK;EAC1BC,OAAO,GAAG;AACd,CAAC,EACDC,GAAG,KACF;EACD,MAAM,CAACC,WAAW,EAAEC,cAAc,CAAC,GAAG,IAAAC,gBAAQ,EAAmB;IAC7DC,CAAC,EAAE,CAAC;IACJC,CAAC,EAAE;EACP,CAAC,CAAC;EAEF,MAAM,CAACC,iBAAiB,EAAEC,oBAAoB,CAAC,GAAG,IAAAJ,gBAAQ,EACtDK,qBAAc,CAACC,OACnB,CAAC;EACD,MAAM,CAACC,MAAM,EAAEC,SAAS,CAAC,GAAG,IAAAR,gBAAQ,EAAS,CAAC,CAAC;EAC/C,MAAM,CAACS,MAAM,EAAEC,SAAS,CAAC,GAAG,IAAAV,gBAAQ,EAAC,KAAK,CAAC;EAC3C,MAAM,CAACW,MAAM,EAAEC,SAAS,CAAC,GAAG,IAAAZ,gBAAQ,EAAc,CAAC;EACnD,MAAM,CAACa,UAAU,EAAEC,aAAa,CAAC,GAAG,IAAAd,gBAAQ,EAAoC,CAAC;EACjF,MAAM,CAACe,YAAY,EAAEC,eAAe,CAAC,GAAG,IAAAhB,gBAAQ,EAAiBZ,SAAS,IAAI,IAAI,CAAC;EACnF,MAAM,CAAC6B,gBAAgB,EAAEC,mBAAmB,CAAC,GAAG,IAAAlB,gBAAQ,EAAqBmB,SAAS,CAAC;EAEvF,MAAMC,OAAO,GAAG,IAAAC,cAAM,EAAS,CAAC;EAEhC,MAAMC,IAAI,GAAG,IAAAC,aAAO,EAAC,CAAC;EAEtB,MAAM;IAAEC,MAAM;IAAEC,KAAK;IAAEC;EAAgB,CAAC,GAAG,IAAAC,yBAAgB,EAAC;IAAEzC;EAAQ,CAAC,CAAC;EAExE,MAAM0C,eAAe,GAAG,IAAAP,cAAM,EAAiB,IAAI,CAAC;EACpD,MAAMQ,QAAQ,GAAG,IAAAR,cAAM,EAAiB,IAAI,CAAC;EAE7C,IAAAS,iBAAS,EAAC,MAAM;IACZ,IAAID,QAAQ,CAACE,OAAO,IAAI,CAAC3C,SAAS,EAAE;MAChC,MAAM4C,EAAE,GAAGH,QAAQ,CAACE,OAAsB;MAE1C,MAAME,OAAO,GAAGD,EAAE,CAACE,OAAO,CAAC,4CAA4C,CAAC;MAExElB,eAAe,CAACiB,OAAO,CAAC;IAC5B;EACJ,CAAC,EAAE,CAAC7C,SAAS,CAAC,CAAC;EAEf,IAAA0C,iBAAS,EAAC,MAAM;IACZ,IAAI1C,SAAS,YAAY+C,OAAO,EAAE;MAC9BnB,eAAe,CAAC5B,SAAS,CAAC;IAC9B;EACJ,CAAC,EAAE,CAACA,SAAS,CAAC,CAAC;EAEf,IAAA0C,iBAAS,EAAC,MAAM;IACZhB,aAAa,CAAC;MAAEU,MAAM;MAAEC;IAAM,CAAC,CAAC;EACpC,CAAC,EAAE,CAACD,MAAM,EAAEC,KAAK,CAAC,CAAC;EAEnB,MAAMW,UAAU,GAAG,IAAAC,mBAAW,EAAC,MAAM;IACjC,IAAIR,QAAQ,CAACE,OAAO,IAAIlB,UAAU,EAAE;MAChC,IAAI,CAACE,YAAY,EAAE;QACf;MACJ;MAEA,MAAM;QAAES,MAAM,EAAEc,YAAY;QAAEb,KAAK,EAAEc;MAAY,CAAC,GAAG1B,UAAU;MAE/D,MAAM;QACFW,MAAM,EAAEgB,cAAc;QACtBC,IAAI,EAAEC,YAAY;QAClBC,GAAG,EAAEC,WAAW;QAChBnB,KAAK,EAAEoB;MACX,CAAC,GAAGhB,QAAQ,CAACE,OAAO,CAACe,qBAAqB,CAAC,CAAC;MAE5C,MAAMb,OAAO,GAAGvC,uBAAuB,GAAGqB,YAAY,GAAGgC,QAAQ,CAACC,IAAI;MAEtE,MAAM;QACFxB,MAAM,EAAEyB,eAAe;QACvBxB,KAAK,EAAEyB,cAAc;QACrBP,GAAG;QACHF;MACJ,CAAC,GAAGR,OAAO,CAACa,qBAAqB,CAAC,CAAC;MAEnC,MAAMK,KAAK,GAAGD,cAAc,GAAIjB,OAAO,CAAiBmB,WAAW;MACnE,MAAMC,KAAK,GAAGJ,eAAe,GAAIhB,OAAO,CAAiBqB,YAAY;MAErE,IACIhB,YAAY,GAAGM,WAAW,GAAG,EAAE,IAC/B3D,SAAS,KAAKoB,qBAAc,CAACkD,UAAU,IACvCtE,SAAS,KAAKoB,qBAAc,CAACmD,WAAW,EAC1C;QACE,IAAIC,OAAO,GAAG,KAAK;QAEnB,IACIlB,WAAW,GAAGG,YAAY,GAAGG,aAAa,GAAG,CAAC,GAAG,EAAE,IACnD5D,SAAS,KAAKoB,qBAAc,CAACmD,WAAW,EAC1C;UACEpD,oBAAoB,CAACC,qBAAc,CAACmD,WAAW,CAAC;UAEhDC,OAAO,GAAG,IAAI;QAClB,CAAC,MAAM;UACHrD,oBAAoB,CAACC,qBAAc,CAACkD,UAAU,CAAC;QACnD;QAEA,MAAMtD,CAAC,GACH,CAACyC,YAAY,GAAGG,aAAa,GAAG,CAAC,GAAGJ,IAAI,IAAIU,KAAK,GAAGlB,OAAO,CAACyB,UAAU;QAC1E,MAAMxD,CAAC,GACH,CAAC0C,WAAW,GAAGJ,cAAc,GAAG,CAAC,GAAGG,GAAG,IAAIU,KAAK,GAChDpB,OAAO,CAAC0B,SAAS,GACjB/D,OAAO;QAEX,IAAIgE,SAAS;QAEb,IAAIH,OAAO,EAAE;UACTG,SAAS,GACL3D,CAAC,GAAGsC,WAAW,IAAIsB,MAAM,CAACC,UAAU,GAC9B7D,CAAC,GAAGsC,WAAW,GAAGsB,MAAM,CAACC,UAAU,GACnC,CAAC;QACf,CAAC,MAAM;UACHF,SAAS,GAAG,CAAC;UAEb,MAAMG,KAAK,GAAGF,MAAM,CAACC,UAAU,IAAIpB,YAAY,GAAGG,aAAa,GAAG,CAAC,CAAC;UAEpEe,SAAS,GACLG,KAAK,GAAGxB,WAAW,IAAIsB,MAAM,CAACC,UAAU,GAClCC,KAAK,GAAGxB,WAAW,GAAGsB,MAAM,CAACC,UAAU,GACvC,CAAC;QACf;QAEAtD,SAAS,CAACoD,SAAS,CAAC;QAEpB,MAAMI,IAAI,GAAG/D,CAAC,GAAG2D,SAAS;QAE1B7D,cAAc,CAAC;UACXE,CAAC,EAAE+D,IAAI,GAAG,EAAE,GAAG,EAAE,GAAGA,IAAI;UACxB9D;QACJ,CAAC,CAAC;MACN,CAAC,MAAM;QACH,IAAIuD,OAAO,GAAG,KAAK;QAEnB,IACIlB,WAAW,GAAGG,YAAY,GAAGG,aAAa,GAAG,CAAC,GAAG,EAAE,IACnD5D,SAAS,KAAKoB,qBAAc,CAAC4D,QAAQ,EACvC;UACE7D,oBAAoB,CAACC,qBAAc,CAAC4D,QAAQ,CAAC;UAE7CR,OAAO,GAAG,IAAI;QAClB,CAAC,MAAM;UACHrD,oBAAoB,CAACC,qBAAc,CAACC,OAAO,CAAC;QAChD;QAEA,MAAML,CAAC,GACH,CAACyC,YAAY,GAAGG,aAAa,GAAG,CAAC,GAAGJ,IAAI,IAAIU,KAAK,GAAGlB,OAAO,CAACyB,UAAU;QAC1E,MAAMxD,CAAC,GACH,CAAC0C,WAAW,GAAGJ,cAAc,GAAG,CAAC,GAAGG,GAAG,IAAIU,KAAK,GAChDpB,OAAO,CAAC0B,SAAS,GACjB/D,OAAO;QAEX,IAAIgE,SAAS;QAEb,IAAIH,OAAO,EAAE;UACTG,SAAS,GACL3D,CAAC,GAAGsC,WAAW,IAAIsB,MAAM,CAACC,UAAU,GAC9B7D,CAAC,GAAGsC,WAAW,GAAGsB,MAAM,CAACC,UAAU,GACnC,CAAC;QACf,CAAC,MAAM;UACHF,SAAS,GAAG,CAAC;UAEb,MAAMG,KAAK,GAAGF,MAAM,CAACC,UAAU,IAAIpB,YAAY,GAAGG,aAAa,GAAG,CAAC,CAAC;UAEpEe,SAAS,GACLG,KAAK,GAAGxB,WAAW,IAAIsB,MAAM,CAACC,UAAU,GAClCC,KAAK,GAAGxB,WAAW,GAAGsB,MAAM,CAACC,UAAU,GACvC,CAAC;QACf;QAEAtD,SAAS,CAACoD,SAAS,CAAC;QAEpB,MAAMI,IAAI,GAAG/D,CAAC,GAAG2D,SAAS;QAE1B7D,cAAc,CAAC;UACXE,CAAC,EAAE+D,IAAI,GAAG,EAAE,GAAG,EAAE,GAAGA,IAAI;UACxB9D;QACJ,CAAC,CAAC;MACN;MAEAQ,SAAS,CAAC,IAAI,CAAC;IACnB;EACJ,CAAC,EAAE,CAACzB,SAAS,EAAE8B,YAAY,EAAEF,UAAU,EAAEnB,uBAAuB,EAAEE,OAAO,CAAC,CAAC;EAE3E,IAAAkC,iBAAS,EAAC,MAAM;IACZ,IAAI,CAACf,YAAY,IAAI,CAACc,QAAQ,CAACE,OAAO,EAAE;IAExC,MAAMmC,UAAU,GAAGnD,YAAY,CAACoD,YAAY;IAC5C,MAAM3B,cAAc,GAAGX,QAAQ,CAACE,OAAO,CAACe,qBAAqB,CAAC,CAAC,CAACtB,MAAM;IAEtE,IACI,CACInB,qBAAc,CAACC,OAAO,EACtBD,qBAAc,CAAC4D,QAAQ,EACvB5D,qBAAc,CAAC+D,SAAS,CAC3B,CAACC,QAAQ,CAAClE,iBAAiB,CAAC,EAC/B;MACEe,mBAAmB,CAACpB,WAAW,CAACI,CAAC,GAAG,EAAE,CAAC;IAC3C,CAAC,MAAM;MACHgB,mBAAmB,CAACgD,UAAU,GAAG1B,cAAc,GAAG1C,WAAW,CAACI,CAAC,GAAG,EAAE,CAAC;IACzE;EACJ,CAAC,EAAE,CAACJ,WAAW,CAACI,CAAC,EAAEC,iBAAiB,EAAEY,YAAY,CAAC,CAAC;EAEpD,MAAMuD,mBAAmB,GAAGA,CAAA,KAAM;IAC9BlC,UAAU,CAAC,CAAC;EAChB,CAAC;EAED,MAAMmC,UAAU,GAAG,IAAAlC,mBAAW,EAAC,MAAM;IACjC3B,SAAS,CAAC,KAAK,CAAC;EACpB,CAAC,EAAE,EAAE,CAAC;EAEN,MAAM8D,gBAAgB,GAAG,IAAAnC,mBAAW,EAAC,MAAM;IACvC,IAAI7C,iBAAiB,EAAE;MACnBqE,MAAM,CAACY,YAAY,CAACrD,OAAO,CAACW,OAAO,CAAC;MACpCK,UAAU,CAAC,CAAC;IAChB;EACJ,CAAC,EAAE,CAACA,UAAU,EAAE5C,iBAAiB,CAAC,CAAC;EAEnC,MAAMkF,gBAAgB,GAAG,IAAArC,mBAAW,EAAC,MAAM;IACvC,IAAI,CAAC7C,iBAAiB,EAAE;MACpB;IACJ;IAEA,IAAID,yBAAyB,EAAE;MAC3BgF,UAAU,CAAC,CAAC;MAEZ;IACJ;IAEAnD,OAAO,CAACW,OAAO,GAAG8B,MAAM,CAACc,UAAU,CAAC,MAAM;MACtCJ,UAAU,CAAC,CAAC;IAChB,CAAC,EAAE,GAAG,CAAC;EACX,CAAC,EAAE,CAACA,UAAU,EAAEhF,yBAAyB,EAAEC,iBAAiB,CAAC,CAAC;EAE9D,MAAMoF,mBAAmB,GAAG,IAAAvC,mBAAW,EAClCwC,KAAK,IAAK;IAAA,IAAAC,qBAAA;IACP,IAAI,GAAAA,qBAAA,GAAClD,eAAe,CAACG,OAAO,cAAA+C,qBAAA,eAAvBA,qBAAA,CAAyBC,QAAQ,CAACF,KAAK,CAACG,MAAc,CAAC,GAAE;MAC1DT,UAAU,CAAC,CAAC;IAChB;EACJ,CAAC,EACD,CAACA,UAAU,CACf,CAAC;EAED,IAAAU,2BAAmB,EACfpF,GAAG,EACH,OAAO;IACHqF,IAAI,EAAEX,UAAU;IAChBY,IAAI,EAAE/C;EACV,CAAC,CAAC,EACF,CAACmC,UAAU,EAAEnC,UAAU,CAC3B,CAAC;EAED,IAAAN,iBAAS,EAAC,MAAM;IACZ,IAAIrB,MAAM,EAAE;MACRsC,QAAQ,CAACqC,gBAAgB,CAAC,OAAO,EAAER,mBAAmB,EAAE,IAAI,CAAC;MAC7Df,MAAM,CAACuB,gBAAgB,CAAC,MAAM,EAAEb,UAAU,CAAC;MAE3C,IAAI,OAAOpF,MAAM,KAAK,UAAU,EAAE;QAC9BA,MAAM,CAAC,CAAC;MACZ;IACJ,CAAC,MAAM,IAAI,OAAOE,MAAM,KAAK,UAAU,EAAE;MACrCA,MAAM,CAAC,CAAC;IACZ;IAEA,OAAO,MAAM;MACT0D,QAAQ,CAACsC,mBAAmB,CAAC,OAAO,EAAET,mBAAmB,EAAE,IAAI,CAAC;MAChEf,MAAM,CAACwB,mBAAmB,CAAC,MAAM,EAAEd,UAAU,CAAC;IAClD,CAAC;EACL,CAAC,EAAE,CAACK,mBAAmB,EAAEL,UAAU,EAAE9D,MAAM,EAAEpB,MAAM,EAAEF,MAAM,CAAC,CAAC;EAE7D,IAAA2C,iBAAS,EAAC,MAAM;IACZ,IAAI,CAACf,YAAY,EAAE;MACf;IACJ;IAEAH,SAAS,CAAC,mBACN,IAAA0E,sBAAY,eACRpI,OAAA,CAAAY,OAAA,CAAAyH,aAAA,CAACvI,MAAA,CAAAwI,eAAe;MAACC,OAAO,EAAE;IAAM,GAC3BhF,MAAM,iBACHvD,OAAA,CAAAY,OAAA,CAAAyH,aAAA,CAAC9H,oBAAA,CAAAK,OAAmB;MAChB2D,KAAK,EAAE,CAAAZ,UAAU,aAAVA,UAAU,uBAAVA,UAAU,CAAEY,KAAK,KAAI,CAAE;MAC9BlB,MAAM,EAAEA,MAAO;MACfb,uBAAuB,EAAEA,uBAAwB;MACjDI,WAAW,EAAEA,WAAY;MACzB4F,GAAG,EAAE,WAAWpE,IAAI,EAAG;MACvBqE,SAAS,EAAE1E,gBAAiB;MAC5BhC,SAAS,EAAEkB,iBAAkB;MAC7BN,GAAG,EAAE+B,eAAgB;MACrBgE,YAAY,EAAElB,gBAAiB;MAC/BmB,YAAY,EAAErB;IAAiB,gBAE/BtH,OAAA,CAAAY,OAAA,CAAAyH,aAAA,CAAChI,oBAAA,CAAAO,OAAmB;MAACgI,iBAAiB;IAAA,GACjC5G,OACgB,CACJ,CAEZ,CAAC,EAClB6B,YACJ,CACJ,CAAC;EACL,CAAC,EAAE,CACCE,gBAAgB,EAChBd,iBAAiB,EACjBY,YAAY,EACZ7B,OAAO,EACPY,WAAW,EACX0E,gBAAgB,EAChBE,gBAAgB,EAChBjE,MAAM,EACNF,MAAM,EACNM,UAAU,aAAVA,UAAU,uBAAVA,UAAU,CAAEY,KAAK,EACjBH,IAAI,EACJ5B,uBAAuB,CAC1B,CAAC;EAEF,oBACIxC,OAAA,CAAAY,OAAA,CAAAyH,aAAA,CAAArI,OAAA,CAAAY,OAAA,CAAAiI,QAAA,QACKrE,eAAe,eAChBxE,OAAA,CAAAY,OAAA,CAAAyH,aAAA,CAAC7H,MAAA,CAAAsI,WAAW;IACRC,SAAS,EAAC,mBAAmB;IAC7BpG,GAAG,EAAEgC,QAAS;IACdqE,OAAO,EAAE5B,mBAAoB;IAC7BsB,YAAY,EAAElB,gBAAiB;IAC/BmB,YAAY,EAAErB,gBAAiB;IAC/B2B,uBAAuB,EAAE1G,sBAAuB;IAChD2G,mBAAmB,EAAEzG;EAAmB,GAEvCL,QACQ,CAAC,EACbqB,MACH,CAAC;AAEX,CACJ,CAAC;AAED5B,KAAK,CAACsH,WAAW,GAAG,OAAO;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAzI,OAAA,GAEbiB,KAAK","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"Popup.js","names":["_react","require","_react2","_interopRequireWildcard","_reactDom","_uuid","_popup","_AreaContextProvider","_interopRequireDefault","_PopupContentWrapper","_Popup","_element","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","Popup","forwardRef","alignment","content","onShow","container","onHide","children","shouldHideOnChildrenLeave","shouldShowOnHover","shouldUseChildrenWidth","shouldScrollWithContent","shouldUseFullWidth","yOffset","ref","coordinates","setCoordinates","useState","x","y","internalAlignment","setInternalAlignment","PopupAlignment","TopLeft","offset","setOffset","isOpen","setIsOpen","portal","setPortal","pseudoSize","setPseudoSize","newContainer","setNewContainer","contentMaxHeight","setContentMaxHeight","undefined","timeout","useRef","uuid","useUuid","height","width","measuredElement","useMeasuredClone","shouldPreventTextWrapping","popupContentRef","popupRef","useEffect","current","el","element","closest","Element","handleShow","useCallback","pseudoHeight","pseudoWidth","childrenHeight","left","childrenLeft","top","childrenTop","childrenWidth","getBoundingClientRect","document","body","containerHeight","containerWidth","zoomX","offsetWidth","zoomY","offsetHeight","BottomLeft","BottomRight","isRight","scrollLeft","scrollTop","newOffset","window","innerWidth","right","newX","TopRight","viewHeight","clientHeight","TopCenter","includes","handleChildrenClick","handleHide","handleMouseEnter","clearTimeout","handleMouseLeave","setTimeout","handleDocumentClick","event","_popupContentRef$curr","contains","target","useImperativeHandle","hide","show","addEventListener","removeEventListener","createPortal","createElement","AnimatePresence","initial","key","maxHeight","onMouseLeave","onMouseEnter","shouldChangeColor","Fragment","StyledPopup","className","onClick","$shouldUseChildrenWidth","$shouldUseFullWidth","displayName","_default","exports"],"sources":["../../../../src/components/popup/Popup.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, {\n forwardRef,\n ReactNode,\n ReactPortal,\n useCallback,\n useEffect,\n useImperativeHandle,\n useRef,\n useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useUuid } from '../../hooks/uuid';\nimport { PopupAlignment, PopupCoordinates, PopupRef } from '../../types/popup';\nimport AreaContextProvider from '../area-provider/AreaContextProvider';\nimport PopupContentWrapper from './popup-content-wrapper/PopupContentWrapper';\nimport { StyledPopup } from './Popup.styles';\nimport { useMeasuredClone } from '../../hooks/element';\n\nexport type PopupProps = {\n /**\n * The alignment of the popup. By default, the popup will calculate the best alignment.\n */\n alignment?: PopupAlignment;\n /**\n * The element over which the content of the `ContextMenu` should be displayed.\n */\n children?: ReactNode;\n /**\n * The element where the content of the `Popup` should be rendered via React Portal.\n */\n container?: Element;\n /**\n * The content that should be displayed inside the popup.\n */\n content: ReactNode;\n /**\n * Function to be executed when the content of the Context menu has been hidden.\n */\n onHide?: VoidFunction;\n /**\n * Function to be executed when the content of the Context menu has been shown.\n */\n onShow?: VoidFunction;\n /**\n * Whether the tooltip should be hidden after the children is not hovered.\n */\n shouldHideOnChildrenLeave?: boolean;\n /**\n * Whether the popup should scroll with the content.\n */\n shouldScrollWithContent?: boolean;\n /**\n * Whether the popup should be opened on hover. If not, the popup will be opened on click.\n */\n shouldShowOnHover?: boolean;\n /**\n * Whether the width of the children should be used.\n */\n shouldUseChildrenWidth?: boolean;\n /**\n * Whether the popup children should use the full width.\n */\n shouldUseFullWidth?: boolean;\n /**\n * The Y offset of the popup to the children.\n */\n yOffset?: number;\n};\n\nconst Popup = forwardRef<PopupRef, PopupProps>(\n (\n {\n alignment,\n content,\n onShow,\n container,\n onHide,\n children,\n shouldHideOnChildrenLeave,\n shouldShowOnHover = false,\n shouldUseChildrenWidth = true,\n shouldScrollWithContent = true,\n shouldUseFullWidth = false,\n yOffset = 0,\n },\n ref,\n ) => {\n const [coordinates, setCoordinates] = useState<PopupCoordinates>({\n x: 0,\n y: 0,\n });\n\n const [internalAlignment, setInternalAlignment] = useState<PopupAlignment>(\n PopupAlignment.TopLeft,\n );\n const [offset, setOffset] = useState<number>(0);\n const [isOpen, setIsOpen] = useState(false);\n const [portal, setPortal] = useState<ReactPortal>();\n const [pseudoSize, setPseudoSize] = useState<{ height: number; width: number }>();\n const [newContainer, setNewContainer] = useState<Element | null>(container ?? null);\n const [contentMaxHeight, setContentMaxHeight] = useState<number | undefined>(undefined);\n\n const timeout = useRef<number>();\n\n const uuid = useUuid();\n\n const { height, width, measuredElement } = useMeasuredClone({\n content,\n shouldPreventTextWrapping: !shouldUseChildrenWidth,\n });\n\n const popupContentRef = useRef<HTMLDivElement>(null);\n const popupRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n if (popupRef.current && !container) {\n const el = popupRef.current as HTMLElement;\n\n const element = el.closest('.dialog-inner, .page-provider, .tapp, body');\n\n setNewContainer(element);\n }\n }, [container]);\n\n useEffect(() => {\n if (container instanceof Element) {\n setNewContainer(container);\n }\n }, [container]);\n\n useEffect(() => {\n setPseudoSize({ height, width });\n }, [height, width]);\n\n const handleShow = useCallback(() => {\n if (popupRef.current && pseudoSize) {\n if (!newContainer) {\n return;\n }\n\n const { height: pseudoHeight, width: pseudoWidth } = pseudoSize;\n\n const {\n height: childrenHeight,\n left: childrenLeft,\n top: childrenTop,\n width: childrenWidth,\n } = popupRef.current.getBoundingClientRect();\n\n const element = shouldScrollWithContent ? newContainer : document.body;\n\n const {\n height: containerHeight,\n width: containerWidth,\n top,\n left,\n } = element.getBoundingClientRect();\n\n const zoomX = containerWidth / (element as HTMLElement).offsetWidth;\n const zoomY = containerHeight / (element as HTMLElement).offsetHeight;\n\n if (\n pseudoHeight > childrenTop - 25 ||\n alignment === PopupAlignment.BottomLeft ||\n alignment === PopupAlignment.BottomRight\n ) {\n let isRight = false;\n\n if (\n pseudoWidth > childrenLeft + childrenWidth / 2 - 25 ||\n alignment === PopupAlignment.BottomRight\n ) {\n setInternalAlignment(PopupAlignment.BottomRight);\n\n isRight = true;\n } else {\n setInternalAlignment(PopupAlignment.BottomLeft);\n }\n\n const x =\n (childrenLeft + childrenWidth / 2 - left) / zoomX + element.scrollLeft;\n const y =\n (childrenTop + childrenHeight / 2 - top) / zoomY +\n element.scrollTop -\n yOffset;\n\n let newOffset;\n\n if (isRight) {\n newOffset =\n x + pseudoWidth >= window.innerWidth\n ? x + pseudoWidth - window.innerWidth\n : 0;\n } else {\n newOffset = 0;\n\n const right = window.innerWidth - (childrenLeft + childrenWidth / 2);\n\n newOffset =\n right + pseudoWidth >= window.innerWidth\n ? right + pseudoWidth - window.innerWidth\n : 0;\n }\n\n setOffset(newOffset);\n\n const newX = x - newOffset;\n\n setCoordinates({\n x: newX < 23 ? 23 : newX,\n y,\n });\n } else {\n let isRight = false;\n\n if (\n pseudoWidth > childrenLeft + childrenWidth / 2 - 25 ||\n alignment === PopupAlignment.TopRight\n ) {\n setInternalAlignment(PopupAlignment.TopRight);\n\n isRight = true;\n } else {\n setInternalAlignment(PopupAlignment.TopLeft);\n }\n\n const x =\n (childrenLeft + childrenWidth / 2 - left) / zoomX + element.scrollLeft;\n const y =\n (childrenTop + childrenHeight / 2 - top) / zoomY +\n element.scrollTop -\n yOffset;\n\n let newOffset;\n\n if (isRight) {\n newOffset =\n x + pseudoWidth >= window.innerWidth\n ? x + pseudoWidth - window.innerWidth\n : 0;\n } else {\n newOffset = 0;\n\n const right = window.innerWidth - (childrenLeft + childrenWidth / 2);\n\n newOffset =\n right + pseudoWidth >= window.innerWidth\n ? right + pseudoWidth - window.innerWidth\n : 0;\n }\n\n setOffset(newOffset);\n\n const newX = x - newOffset;\n\n setCoordinates({\n x: newX < 23 ? 23 : newX,\n y,\n });\n }\n\n setIsOpen(true);\n }\n }, [alignment, newContainer, pseudoSize, shouldScrollWithContent, yOffset]);\n\n useEffect(() => {\n if (!newContainer || !popupRef.current) return;\n\n const viewHeight = newContainer.clientHeight;\n const childrenHeight = popupRef.current.getBoundingClientRect().height;\n\n if (\n [\n PopupAlignment.TopLeft,\n PopupAlignment.TopRight,\n PopupAlignment.TopCenter,\n ].includes(internalAlignment)\n ) {\n setContentMaxHeight(coordinates.y - 20);\n } else {\n setContentMaxHeight(viewHeight - childrenHeight - coordinates.y - 20);\n }\n }, [coordinates.y, internalAlignment, newContainer]);\n\n const handleChildrenClick = () => {\n handleShow();\n };\n\n const handleHide = useCallback(() => {\n setIsOpen(false);\n }, []);\n\n const handleMouseEnter = useCallback(() => {\n if (shouldShowOnHover) {\n window.clearTimeout(timeout.current);\n handleShow();\n }\n }, [handleShow, shouldShowOnHover]);\n\n const handleMouseLeave = useCallback(() => {\n if (!shouldShowOnHover) {\n return;\n }\n\n if (shouldHideOnChildrenLeave) {\n handleHide();\n\n return;\n }\n\n timeout.current = window.setTimeout(() => {\n handleHide();\n }, 500);\n }, [handleHide, shouldHideOnChildrenLeave, shouldShowOnHover]);\n\n const handleDocumentClick = useCallback<EventListener>(\n (event) => {\n if (!popupContentRef.current?.contains(event.target as Node)) {\n handleHide();\n }\n },\n [handleHide],\n );\n\n useImperativeHandle(\n ref,\n () => ({\n hide: handleHide,\n show: handleShow,\n }),\n [handleHide, handleShow],\n );\n\n useEffect(() => {\n if (isOpen) {\n document.addEventListener('click', handleDocumentClick, true);\n window.addEventListener('blur', handleHide);\n\n if (typeof onShow === 'function') {\n onShow();\n }\n } else if (typeof onHide === 'function') {\n onHide();\n }\n\n return () => {\n document.removeEventListener('click', handleDocumentClick, true);\n window.removeEventListener('blur', handleHide);\n };\n }, [handleDocumentClick, handleHide, isOpen, onHide, onShow]);\n\n useEffect(() => {\n if (!newContainer) {\n return;\n }\n\n setPortal(() =>\n createPortal(\n <AnimatePresence initial={false}>\n {isOpen && (\n <PopupContentWrapper\n width={pseudoSize?.width ?? 0}\n offset={offset}\n shouldScrollWithContent={shouldScrollWithContent}\n coordinates={coordinates}\n key={`tooltip_${uuid}`}\n maxHeight={contentMaxHeight}\n alignment={internalAlignment}\n ref={popupContentRef}\n onMouseLeave={handleMouseLeave}\n onMouseEnter={handleMouseEnter}\n >\n <AreaContextProvider shouldChangeColor>\n {content}\n </AreaContextProvider>\n </PopupContentWrapper>\n )}\n </AnimatePresence>,\n newContainer,\n ),\n );\n }, [\n contentMaxHeight,\n internalAlignment,\n newContainer,\n content,\n coordinates,\n handleMouseEnter,\n handleMouseLeave,\n isOpen,\n offset,\n pseudoSize?.width,\n uuid,\n shouldScrollWithContent,\n ]);\n\n return (\n <>\n {measuredElement}\n <StyledPopup\n className=\"beta-chayns-popup\"\n ref={popupRef}\n onClick={handleChildrenClick}\n onMouseLeave={handleMouseLeave}\n onMouseEnter={handleMouseEnter}\n $shouldUseChildrenWidth={shouldUseChildrenWidth}\n $shouldUseFullWidth={shouldUseFullWidth}\n >\n {children}\n </StyledPopup>\n {portal}\n </>\n );\n },\n);\n\nPopup.displayName = 'Popup';\n\nexport default Popup;\n"],"mappings":"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","ignoreList":[]}
|
package/lib/cjs/hooks/element.js
CHANGED
|
@@ -61,7 +61,8 @@ const getClonedElement = content => {
|
|
|
61
61
|
return content;
|
|
62
62
|
};
|
|
63
63
|
const useMeasuredClone = ({
|
|
64
|
-
content
|
|
64
|
+
content,
|
|
65
|
+
shouldPreventTextWrapping = true
|
|
65
66
|
}) => {
|
|
66
67
|
const ref = (0, _react.useRef)(null);
|
|
67
68
|
const [size, setSize] = (0, _react.useState)({
|
|
@@ -77,7 +78,7 @@ const useMeasuredClone = ({
|
|
|
77
78
|
offsetHeight: height
|
|
78
79
|
} = ref.current;
|
|
79
80
|
setSize({
|
|
80
|
-
width: width + 10,
|
|
81
|
+
width: width + (shouldPreventTextWrapping ? 10 : 0),
|
|
81
82
|
height
|
|
82
83
|
});
|
|
83
84
|
};
|
|
@@ -85,7 +86,7 @@ const useMeasuredClone = ({
|
|
|
85
86
|
const observer = new ResizeObserver(measure);
|
|
86
87
|
if (ref.current) observer.observe(ref.current);
|
|
87
88
|
return () => observer.disconnect();
|
|
88
|
-
}, []);
|
|
89
|
+
}, [shouldPreventTextWrapping]);
|
|
89
90
|
const measuredElement = /*#__PURE__*/_react.default.createElement("div", {
|
|
90
91
|
"data-measured-clone": "true",
|
|
91
92
|
ref: ref,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"element.js","names":["_react","_interopRequireWildcard","require","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","useElementSize","ref","shouldUseChildElement","shouldUseParentElement","size","setSize","useState","useEffect","target","current","_ref$current","parentElement","_ref$current2","firstElementChild","updateSize","getBoundingClientRect","observer","ResizeObserver","entries","forEach","entry","contentRect","observe","disconnect","exports","getClonedElement","content","preventEvents","onClick","stopPropagation","onMouseDown","onMouseUp","onKeyDown","onKeyUp","onFocus","onBlur","props","isValidElement","cloneElement","createElement","useMeasuredClone","useRef","width","height","clonedElement","measure","offsetWidth","offsetHeight","measuredElement","style","position","opacity","pointerEvents","zIndex","visibility","useIsMeasuredClone","isClone","setIsClone","el","hasAttribute"],"sources":["../../../src/hooks/element.tsx"],"sourcesContent":["import React, {\n cloneElement,\n HTMLAttributes,\n isValidElement,\n MutableRefObject,\n ReactElement,\n ReactNode,\n useEffect,\n useRef,\n useState,\n} from 'react';\n\ninterface UseElementSizeOptions {\n shouldUseChildElement?: boolean;\n shouldUseParentElement?: boolean;\n}\n\nexport const useElementSize = (\n ref: MutableRefObject<HTMLDivElement | HTMLLabelElement | null>,\n { shouldUseChildElement = false, shouldUseParentElement = false }: UseElementSizeOptions = {},\n): DOMRectReadOnly | undefined => {\n const [size, setSize] = useState<DOMRectReadOnly>();\n\n useEffect(() => {\n let target = ref.current as HTMLElement | null;\n\n if (shouldUseParentElement) {\n target = ref.current?.parentElement as HTMLElement | null;\n }\n\n if (shouldUseChildElement) {\n target = ref.current?.firstElementChild as HTMLElement | null;\n }\n\n if (!target) return () => {};\n\n const updateSize = () => setSize(target.getBoundingClientRect());\n\n updateSize();\n\n const observer = new ResizeObserver((entries) => {\n entries.forEach((entry) => {\n if (entry.target === target) {\n setSize(entry.contentRect);\n }\n });\n });\n\n observer.observe(target);\n\n return () => observer.disconnect();\n }, [ref, shouldUseChildElement, shouldUseParentElement]);\n\n return size;\n};\n\nconst getClonedElement = (content: ReactNode) => {\n const preventEvents: Partial<HTMLAttributes<any>> = {\n onClick: (e) => e.stopPropagation(),\n onMouseDown: (e) => e.stopPropagation(),\n onMouseUp: (e) => e.stopPropagation(),\n onKeyDown: (e) => e.stopPropagation(),\n onKeyUp: (e) => e.stopPropagation(),\n onFocus: (e) => e.stopPropagation(),\n onBlur: (e) => e.stopPropagation(),\n };\n\n const props = {\n ...preventEvents,\n 'data-measured-clone': true,\n };\n\n if (isValidElement(content)) {\n return cloneElement(content as unknown as ReactElement, props);\n }\n\n if (typeof content === 'string') {\n // eslint-disable-next-line react/jsx-props-no-spreading\n return <span {...props}>{content}</span>;\n }\n\n return content;\n};\n\ninterface UseMeasuredCloneOptions {\n content: ReactNode;\n}\n\nexport const useMeasuredClone = ({ content }: UseMeasuredCloneOptions) => {\n const ref = useRef<HTMLDivElement>(null);\n const [size, setSize] = useState({ width: 0, height: 0 });\n\n const clonedElement = getClonedElement(content);\n\n useEffect(() => {\n const measure = () => {\n if (!ref.current) return;\n const { offsetWidth: width, offsetHeight: height } = ref.current;\n setSize({ width: width + 10, height });\n };\n\n measure();\n\n const observer = new ResizeObserver(measure);\n\n if (ref.current) observer.observe(ref.current);\n\n return () => observer.disconnect();\n }, []);\n\n const measuredElement = (\n <div\n data-measured-clone=\"true\"\n ref={ref}\n style={{\n position: 'fixed',\n opacity: 0,\n pointerEvents: 'none',\n zIndex: -1,\n height: 'auto',\n width: 'auto',\n visibility: 'hidden',\n }}\n >\n {clonedElement}\n </div>\n );\n\n return {\n measuredElement,\n width: size.width,\n height: size.height,\n };\n};\n\nexport const useIsMeasuredClone = <T extends HTMLElement>() => {\n const ref = useRef<T | null>(null);\n\n const [isClone, setIsClone] = useState(false);\n\n useEffect(() => {\n if (!ref.current) return;\n\n let el: HTMLElement | null = ref.current;\n\n while (el) {\n if (el.hasAttribute('data-measured-clone')) {\n setIsClone(true);\n\n return;\n }\n\n el = el.parentElement;\n }\n\n setIsClone(false);\n }, []);\n\n return [isClone, ref] as const;\n};\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"element.js","names":["_react","_interopRequireWildcard","require","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","useElementSize","ref","shouldUseChildElement","shouldUseParentElement","size","setSize","useState","useEffect","target","current","_ref$current","parentElement","_ref$current2","firstElementChild","updateSize","getBoundingClientRect","observer","ResizeObserver","entries","forEach","entry","contentRect","observe","disconnect","exports","getClonedElement","content","preventEvents","onClick","stopPropagation","onMouseDown","onMouseUp","onKeyDown","onKeyUp","onFocus","onBlur","props","isValidElement","cloneElement","createElement","useMeasuredClone","shouldPreventTextWrapping","useRef","width","height","clonedElement","measure","offsetWidth","offsetHeight","measuredElement","style","position","opacity","pointerEvents","zIndex","visibility","useIsMeasuredClone","isClone","setIsClone","el","hasAttribute"],"sources":["../../../src/hooks/element.tsx"],"sourcesContent":["import React, {\n cloneElement,\n HTMLAttributes,\n isValidElement,\n MutableRefObject,\n ReactElement,\n ReactNode,\n useEffect,\n useRef,\n useState,\n} from 'react';\n\ninterface UseElementSizeOptions {\n shouldUseChildElement?: boolean;\n shouldUseParentElement?: boolean;\n}\n\nexport const useElementSize = (\n ref: MutableRefObject<HTMLDivElement | HTMLLabelElement | null>,\n { shouldUseChildElement = false, shouldUseParentElement = false }: UseElementSizeOptions = {},\n): DOMRectReadOnly | undefined => {\n const [size, setSize] = useState<DOMRectReadOnly>();\n\n useEffect(() => {\n let target = ref.current as HTMLElement | null;\n\n if (shouldUseParentElement) {\n target = ref.current?.parentElement as HTMLElement | null;\n }\n\n if (shouldUseChildElement) {\n target = ref.current?.firstElementChild as HTMLElement | null;\n }\n\n if (!target) return () => {};\n\n const updateSize = () => setSize(target.getBoundingClientRect());\n\n updateSize();\n\n const observer = new ResizeObserver((entries) => {\n entries.forEach((entry) => {\n if (entry.target === target) {\n setSize(entry.contentRect);\n }\n });\n });\n\n observer.observe(target);\n\n return () => observer.disconnect();\n }, [ref, shouldUseChildElement, shouldUseParentElement]);\n\n return size;\n};\n\nconst getClonedElement = (content: ReactNode) => {\n const preventEvents: Partial<HTMLAttributes<any>> = {\n onClick: (e) => e.stopPropagation(),\n onMouseDown: (e) => e.stopPropagation(),\n onMouseUp: (e) => e.stopPropagation(),\n onKeyDown: (e) => e.stopPropagation(),\n onKeyUp: (e) => e.stopPropagation(),\n onFocus: (e) => e.stopPropagation(),\n onBlur: (e) => e.stopPropagation(),\n };\n\n const props = {\n ...preventEvents,\n 'data-measured-clone': true,\n };\n\n if (isValidElement(content)) {\n return cloneElement(content as unknown as ReactElement, props);\n }\n\n if (typeof content === 'string') {\n // eslint-disable-next-line react/jsx-props-no-spreading\n return <span {...props}>{content}</span>;\n }\n\n return content;\n};\n\ninterface UseMeasuredCloneOptions {\n content: ReactNode;\n shouldPreventTextWrapping?: boolean;\n}\n\nexport const useMeasuredClone = ({\n content,\n shouldPreventTextWrapping = true,\n}: UseMeasuredCloneOptions) => {\n const ref = useRef<HTMLDivElement>(null);\n\n const [size, setSize] = useState({ width: 0, height: 0 });\n\n const clonedElement = getClonedElement(content);\n\n useEffect(() => {\n const measure = () => {\n if (!ref.current) return;\n\n const { offsetWidth: width, offsetHeight: height } = ref.current;\n\n setSize({ width: width + (shouldPreventTextWrapping ? 10 : 0), height });\n };\n\n measure();\n\n const observer = new ResizeObserver(measure);\n\n if (ref.current) observer.observe(ref.current);\n\n return () => observer.disconnect();\n }, [shouldPreventTextWrapping]);\n\n const measuredElement = (\n <div\n data-measured-clone=\"true\"\n ref={ref}\n style={{\n position: 'fixed',\n opacity: 0,\n pointerEvents: 'none',\n zIndex: -1,\n height: 'auto',\n width: 'auto',\n visibility: 'hidden',\n }}\n >\n {clonedElement}\n </div>\n );\n\n return {\n measuredElement,\n width: size.width,\n height: size.height,\n };\n};\n\nexport const useIsMeasuredClone = <T extends HTMLElement>() => {\n const ref = useRef<T | null>(null);\n\n const [isClone, setIsClone] = useState(false);\n\n useEffect(() => {\n if (!ref.current) return;\n\n let el: HTMLElement | null = ref.current;\n\n while (el) {\n if (el.hasAttribute('data-measured-clone')) {\n setIsClone(true);\n\n return;\n }\n\n el = el.parentElement;\n }\n\n setIsClone(false);\n }, []);\n\n return [isClone, ref] as const;\n};\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccordionHead.styles.js","names":["motion","styled","css","StyledMotionAccordionHead","div","theme","text","StyledMotionIconWrapper","onClick","StyledAccordionIcon","i","headline","$icon","StyledMotionContentWrapper","$isWrapped","StyledMotionTitleWrapper","StyledMotionTitle","$isOpen","undefined","$hasSearch","$color","StyledMotionTitleElementWrapper","StyledRightWrapper","StyledMotionSearchWrapper","StyledMotionRightElementWrapper","StyledMotionRightInput","input","$hasIcon","StyledMotionRightInputIconWrapper"],"sources":["../../../../../src/components/accordion/accordion-head/AccordionHead.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledMotionAccordionHeadProps = WithTheme<unknown>;\n\nexport const StyledMotionAccordionHead = styled(motion.div)<StyledMotionAccordionHeadProps>`\n align-items: center;\n color: ${({ theme }: StyledMotionAccordionHeadProps) => theme.text};\n display: flex;\n overflow: hidden;\n padding: 4px 0;\n`;\n\nexport const StyledMotionIconWrapper = styled(motion.div)`\n align-items: center;\n cursor: ${({ onClick }) => (typeof onClick === 'function' ? 'pointer' : 'default')};\n display: flex;\n flex: 0 0 auto;\n height: 25px;\n justify-content: center;\n width: 25px;\n`;\n\ntype StyledAccordionIconProps = WithTheme<{ $icon: string }>;\n\nexport const StyledAccordionIcon = styled.i<StyledAccordionIconProps>`\n align-items: center;\n justify-content: center;\n display: flex;\n color: ${({ theme }: StyledAccordionIconProps) => theme.headline};\n\n &:before {\n content: ${({ $icon }) => `\"\\\\${$icon}\"`};\n font-family: 'Font Awesome 6 Pro', Fontawesome !important;\n }\n`;\n\ntype StyledMotionContentWrapperProps = WithTheme<{ $isWrapped: boolean }>;\n\nexport const StyledMotionContentWrapper = styled(motion.div)<StyledMotionContentWrapperProps>`\n align-self: flex-start;\n cursor: ${({ onClick }) => (typeof onClick === 'function' ? 'pointer' : 'default')};\n display: flex;\n flex: 1 1 auto;\n height: 100%;\n overflow: hidden;\n margin-right: 10px;\n\n ${({ $isWrapped }) =>\n $isWrapped &&\n css`\n align-items: center;\n `}\n`;\n\nexport const StyledMotionTitleWrapper = styled(motion.div)`\n display: grid;\n flex: 0 1 auto;\n grid-template-areas: 'header';\n`;\n\ntype StyledMotionTitleProps = WithTheme<{\n $isOpen: boolean;\n $isWrapped: boolean;\n $color?: CSSProperties['color'];\n $hasSearch: boolean;\n}>;\n\nexport const StyledMotionTitle = styled(motion.div)<StyledMotionTitleProps>`\n font-size: ${({ $isOpen, $isWrapped }) => ($isOpen && !$isWrapped ? '1.3rem' : undefined)};\n font-weight: ${({ $isOpen, $isWrapped }) => ($isOpen && $isWrapped ? 700 : 'normal')};\n grid-area: header;\n height: ${({ $isWrapped, $hasSearch }) => ($isWrapped || $hasSearch ? '100%' : undefined)};\n overflow: hidden;\n text-overflow: ellipsis;\n transform-origin: top left;\n user-select: none;\n color: ${({ $color, theme }: StyledMotionTitleProps) => $color ?? theme.text};\n white-space: ${({ $isOpen, $isWrapped, $hasSearch }) =>\n $isOpen && !$isWrapped && !$hasSearch ? 'normal' : 'nowrap'};\n\n will-change: unset !important;\n\n ${({ $isWrapped }) =>\n $isWrapped &&\n css`\n align-content: center;\n `}\n`;\n\nexport const StyledMotionTitleElementWrapper = styled(motion.div)`\n align-items: center;\n display: flex;\n flex: 1 1 auto;\n margin-left: 8px;\n min-width: 0;\n`;\n\ntype StyledRightWrapperProps = {\n $isSearchActive: boolean;\n};\n\nexport const StyledRightWrapper = styled.div<StyledRightWrapperProps>`\n display: flex;\n flex: 0 0 auto;\n gap: 8px;\n margin-right: 5px;\n overflow: hidden;\n position: relative;\n`;\n\nexport const StyledMotionSearchWrapper = styled(motion.div)`\n align-items: center;\n justify-content: end;\n position: relative;\n display: flex;\n width: 100%;\n`;\n\nexport const StyledMotionRightElementWrapper = styled(motion.div)`\n align-items: center;\n display: flex;\n\n cursor: ${({ onClick }) => (typeof onClick === 'function' ? 'pointer' : 'default')};\n\n will-change: unset !important;\n`;\n\ntype StyledMotionRightInputProps = WithTheme<{\n $hasIcon: boolean;\n}>;\n\nexport const StyledMotionRightInput = styled(motion.input)<StyledMotionRightInputProps>`\n background-color: transparent;\n border: 1px solid transparent;\n border-bottom-color: rgba(\n ${({ theme }: StyledMotionRightInputProps) => theme['headline-rgb']},\n 0.45\n );\n color: ${({ theme }: StyledMotionRightInputProps) => theme.text};\n grid-area: header;\n padding: ${({ $hasIcon }) => ($hasIcon ? '5px 23px 5px 1px' : '5px 1px')};\n`;\n\nexport const StyledMotionRightInputIconWrapper = styled(motion.div)`\n align-items: center;\n display: flex;\n height: 100%;\n justify-content: center;\n position: absolute;\n right: 4px;\n top: 0;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AAErC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAK/C,OAAO,MAAMC,yBAAyB,GAAGF,MAAM,CAACD,MAAM,CAACI,GAAG,CAAiC;AAC3F;AACA,aAAa,CAAC;EAAEC;AAAsC,CAAC,KAAKA,KAAK,CAACC,IAAI;AACtE;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,uBAAuB,GAAGN,MAAM,CAACD,MAAM,CAACI,GAAG,CAAC;AACzD;AACA,cAAc,CAAC;EAAEI;AAAQ,CAAC,KAAM,OAAOA,OAAO,KAAK,UAAU,GAAG,SAAS,GAAG,SAAU;AACtF;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMC,mBAAmB,GAAGR,MAAM,CAACS,CAA2B;AACrE;AACA;AACA;AACA,aAAa,CAAC;EAAEL;AAAgC,CAAC,KAAKA,KAAK,CAACM,QAAQ;
|
|
1
|
+
{"version":3,"file":"AccordionHead.styles.js","names":["motion","styled","css","StyledMotionAccordionHead","div","theme","text","StyledMotionIconWrapper","onClick","StyledAccordionIcon","i","iconColor","headline","$icon","StyledMotionContentWrapper","$isWrapped","StyledMotionTitleWrapper","StyledMotionTitle","$isOpen","undefined","$hasSearch","$color","StyledMotionTitleElementWrapper","StyledRightWrapper","StyledMotionSearchWrapper","StyledMotionRightElementWrapper","StyledMotionRightInput","input","$hasIcon","StyledMotionRightInputIconWrapper"],"sources":["../../../../../src/components/accordion/accordion-head/AccordionHead.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledMotionAccordionHeadProps = WithTheme<unknown>;\n\nexport const StyledMotionAccordionHead = styled(motion.div)<StyledMotionAccordionHeadProps>`\n align-items: center;\n color: ${({ theme }: StyledMotionAccordionHeadProps) => theme.text};\n display: flex;\n overflow: hidden;\n padding: 4px 0;\n`;\n\nexport const StyledMotionIconWrapper = styled(motion.div)`\n align-items: center;\n cursor: ${({ onClick }) => (typeof onClick === 'function' ? 'pointer' : 'default')};\n display: flex;\n flex: 0 0 auto;\n height: 25px;\n justify-content: center;\n width: 25px;\n`;\n\ntype StyledAccordionIconProps = WithTheme<{ $icon: string }>;\n\nexport const StyledAccordionIcon = styled.i<StyledAccordionIconProps>`\n align-items: center;\n justify-content: center;\n display: flex;\n color: ${({ theme }: StyledAccordionIconProps) => theme.iconColor || theme.headline};\n\n &:before {\n content: ${({ $icon }) => `\"\\\\${$icon}\"`};\n font-family: 'Font Awesome 6 Pro', Fontawesome !important;\n }\n`;\n\ntype StyledMotionContentWrapperProps = WithTheme<{ $isWrapped: boolean }>;\n\nexport const StyledMotionContentWrapper = styled(motion.div)<StyledMotionContentWrapperProps>`\n align-self: flex-start;\n cursor: ${({ onClick }) => (typeof onClick === 'function' ? 'pointer' : 'default')};\n display: flex;\n flex: 1 1 auto;\n height: 100%;\n overflow: hidden;\n margin-right: 10px;\n\n ${({ $isWrapped }) =>\n $isWrapped &&\n css`\n align-items: center;\n `}\n`;\n\nexport const StyledMotionTitleWrapper = styled(motion.div)`\n display: grid;\n flex: 0 1 auto;\n grid-template-areas: 'header';\n`;\n\ntype StyledMotionTitleProps = WithTheme<{\n $isOpen: boolean;\n $isWrapped: boolean;\n $color?: CSSProperties['color'];\n $hasSearch: boolean;\n}>;\n\nexport const StyledMotionTitle = styled(motion.div)<StyledMotionTitleProps>`\n font-size: ${({ $isOpen, $isWrapped }) => ($isOpen && !$isWrapped ? '1.3rem' : undefined)};\n font-weight: ${({ $isOpen, $isWrapped }) => ($isOpen && $isWrapped ? 700 : 'normal')};\n grid-area: header;\n height: ${({ $isWrapped, $hasSearch }) => ($isWrapped || $hasSearch ? '100%' : undefined)};\n overflow: hidden;\n text-overflow: ellipsis;\n transform-origin: top left;\n user-select: none;\n color: ${({ $color, theme }: StyledMotionTitleProps) => $color ?? theme.text};\n white-space: ${({ $isOpen, $isWrapped, $hasSearch }) =>\n $isOpen && !$isWrapped && !$hasSearch ? 'normal' : 'nowrap'};\n\n will-change: unset !important;\n\n ${({ $isWrapped }) =>\n $isWrapped &&\n css`\n align-content: center;\n `}\n`;\n\nexport const StyledMotionTitleElementWrapper = styled(motion.div)`\n align-items: center;\n display: flex;\n flex: 1 1 auto;\n margin-left: 8px;\n min-width: 0;\n`;\n\ntype StyledRightWrapperProps = {\n $isSearchActive: boolean;\n};\n\nexport const StyledRightWrapper = styled.div<StyledRightWrapperProps>`\n display: flex;\n flex: 0 0 auto;\n gap: 8px;\n margin-right: 5px;\n overflow: hidden;\n position: relative;\n`;\n\nexport const StyledMotionSearchWrapper = styled(motion.div)`\n align-items: center;\n justify-content: end;\n position: relative;\n display: flex;\n width: 100%;\n`;\n\nexport const StyledMotionRightElementWrapper = styled(motion.div)`\n align-items: center;\n display: flex;\n\n cursor: ${({ onClick }) => (typeof onClick === 'function' ? 'pointer' : 'default')};\n\n will-change: unset !important;\n`;\n\ntype StyledMotionRightInputProps = WithTheme<{\n $hasIcon: boolean;\n}>;\n\nexport const StyledMotionRightInput = styled(motion.input)<StyledMotionRightInputProps>`\n background-color: transparent;\n border: 1px solid transparent;\n border-bottom-color: rgba(\n ${({ theme }: StyledMotionRightInputProps) => theme['headline-rgb']},\n 0.45\n );\n color: ${({ theme }: StyledMotionRightInputProps) => theme.text};\n grid-area: header;\n padding: ${({ $hasIcon }) => ($hasIcon ? '5px 23px 5px 1px' : '5px 1px')};\n`;\n\nexport const StyledMotionRightInputIconWrapper = styled(motion.div)`\n align-items: center;\n display: flex;\n height: 100%;\n justify-content: center;\n position: absolute;\n right: 4px;\n top: 0;\n`;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -30,6 +30,7 @@ const ColorSchemeProvider = ({
|
|
|
30
30
|
secondaryColor,
|
|
31
31
|
siteId,
|
|
32
32
|
style = {},
|
|
33
|
+
iconColor,
|
|
33
34
|
customVariables
|
|
34
35
|
}) => {
|
|
35
36
|
const {
|
|
@@ -42,6 +43,7 @@ const ColorSchemeProvider = ({
|
|
|
42
43
|
const paragraphFormat = useMemo(() => overrideParagraphFormat ? [] : undefined, [overrideParagraphFormat]);
|
|
43
44
|
const contextValue = useChaynsTheme({
|
|
44
45
|
color,
|
|
46
|
+
iconColor,
|
|
45
47
|
colorMode,
|
|
46
48
|
secondaryColor,
|
|
47
49
|
siteId,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColorSchemeProvider.js","names":["useSite","React","createContext","useContext","useMemo","createGlobalStyle","ThemeProvider","StyledColorSchemeProvider","useChaynsTheme","GlobalStyle","ColorSchemeContext","undefined","useColorScheme","ColorSchemeProvider","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\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 !== 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;
|
|
1
|
+
{"version":3,"file":"ColorSchemeProvider.js","names":["useSite","React","createContext","useContext","useMemo","createGlobalStyle","ThemeProvider","StyledColorSchemeProvider","useChaynsTheme","GlobalStyle","ColorSchemeContext","undefined","useColorScheme","ColorSchemeProvider","children","color","colorProp","colorMode","colorModeProp","secondaryColor","siteId","style","iconColor","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 * An optional color for all icons\n */\n iconColor?: string;\n};\n\nexport interface Theme {\n [key: string]: string;\n}\n\nexport type WithTheme<T> = T & {\n theme: Theme;\n};\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 iconColor,\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 !== internalColorMode;\n const paragraphFormat = useMemo(\n () => (overrideParagraphFormat ? [] : undefined),\n [overrideParagraphFormat],\n );\n\n const contextValue = useChaynsTheme({\n color,\n iconColor,\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;AA6CvD,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,GAAGA,CAAC;EACvDC,QAAQ;EACRC,KAAK,EAAEC,SAAS;EAChBC,SAAS,EAAEC,aAAa;EACxBC,cAAc;EACdC,MAAM;EACNC,KAAK,GAAG,CAAC,CAAC;EACVC,SAAS;EACTC;AACJ,CAAC,KAAK;EACF,MAAM;IAAER,KAAK,EAAES,aAAa;IAAEP,SAAS,EAAEQ;EAAkB,CAAC,GAAGzB,OAAO,CAAC,CAAC;EAExE,MAAMe,KAAK,GAAGC,SAAS,IAAIQ,aAAa;EACxC,MAAMP,SAAS,GAAGC,aAAa,IAAIO,iBAAiB;EACpD,MAAMC,uBAAuB,GACxBX,KAAK,IAAIA,KAAK,KAAKS,aAAa,IAAKP,SAAS,KAAKQ,iBAAiB;EACzE,MAAME,eAAe,GAAGvB,OAAO,CAC3B,MAAOsB,uBAAuB,GAAG,EAAE,GAAGf,SAAU,EAChD,CAACe,uBAAuB,CAC5B,CAAC;EAED,MAAME,YAAY,GAAGpB,cAAc,CAAC;IAChCO,KAAK;IACLO,SAAS;IACTL,SAAS;IACTE,cAAc;IACdC,MAAM;IACNG,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;IAACZ,KAAK,EAAEA;EAAM,GACrEP,QACsB,CAAC,eAC5Bb,KAAA,CAAA4B,aAAA,CAACpB,WAAW,MAAE,CACW,CAClB,CAAC;AAExB,CAAC;AAEDI,mBAAmB,CAACqB,WAAW,GAAG,qBAAqB;AAEvD,eAAerB,mBAAmB","ignoreList":[]}
|
|
@@ -12,6 +12,7 @@ const createTheme = ({
|
|
|
12
12
|
designSettings,
|
|
13
13
|
paragraphFormat,
|
|
14
14
|
theme,
|
|
15
|
+
iconColor,
|
|
15
16
|
customVariables
|
|
16
17
|
}) => {
|
|
17
18
|
if (theme) {
|
|
@@ -70,6 +71,9 @@ const createTheme = ({
|
|
|
70
71
|
result.colorMode = 'classic';
|
|
71
72
|
break;
|
|
72
73
|
}
|
|
74
|
+
if (iconColor) {
|
|
75
|
+
result.iconColor = iconColor;
|
|
76
|
+
}
|
|
73
77
|
result.fontSize = designSettings?.fontSizePx || 15;
|
|
74
78
|
return result;
|
|
75
79
|
};
|
|
@@ -81,6 +85,7 @@ export const useChaynsTheme = ({
|
|
|
81
85
|
designSettings: designSettingsProp,
|
|
82
86
|
paragraphFormat: paragraphFormatProp,
|
|
83
87
|
siteId,
|
|
88
|
+
iconColor,
|
|
84
89
|
theme,
|
|
85
90
|
customVariables
|
|
86
91
|
}) => {
|
|
@@ -95,6 +100,7 @@ export const useChaynsTheme = ({
|
|
|
95
100
|
designSettings,
|
|
96
101
|
paragraphFormat,
|
|
97
102
|
theme,
|
|
103
|
+
iconColor,
|
|
98
104
|
customVariables
|
|
99
105
|
}));
|
|
100
106
|
useEffect(() => {
|
|
@@ -110,6 +116,7 @@ export const useChaynsTheme = ({
|
|
|
110
116
|
designSettings,
|
|
111
117
|
paragraphFormat,
|
|
112
118
|
theme,
|
|
119
|
+
iconColor,
|
|
113
120
|
customVariables
|
|
114
121
|
}));
|
|
115
122
|
}, [color, colorMode, colors, designSettings, paragraphFormat, secondaryColor, theme, customVariables]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useChaynsTheme.js","names":["getAvailableColorList","getColorFromPalette","hexToRgb255","ColorMode","useEffect","useMemo","useRef","useState","convertIconStyle","getHeadlineColorSelector","useDesignSettings","useParagraphFormat","createTheme","colors","colorMode","color","secondaryColor","designSettings","paragraphFormat","theme","customVariables","result","Object","keys","forEach","key","availableColors","colorName","hexColor","rgbColor","r","g","b","iconStyle","themeResult","Light","Dark","fontSize","fontSizePx","useChaynsTheme","designSettingsProp","paragraphFormatProp","siteId","isMountedRef","internalTheme","setInternalTheme","current"],"sources":["../../../../../src/components/color-scheme-provider/hooks/useChaynsTheme.ts"],"sourcesContent":["import { getAvailableColorList, getColorFromPalette, hexToRgb255 } from '@chayns/colors';\nimport { ChaynsDesignSettings, ChaynsParagraphFormat, ColorMode } from 'chayns-api';\nimport { useEffect, useMemo, useRef, useState } from 'react';\nimport { convertIconStyle, getHeadlineColorSelector } from '../../../utils/font';\nimport type { Theme } from '../ColorSchemeProvider';\nimport { useDesignSettings } from './useDesignSettings';\nimport { useParagraphFormat } from './useParagraphFormat';\n\nexport type ThemeOptions = {\n colors?: Theme;\n colorMode: ColorMode;\n color: string;\n secondaryColor?: string;\n designSettings?: ChaynsDesignSettings & { fontSizePx?: number };\n paragraphFormat?: ChaynsParagraphFormat[];\n siteId?: string;\n theme?: Theme;\n customVariables?: Record<string, string>;\n};\n\nconst createTheme = ({\n colors,\n colorMode,\n color,\n secondaryColor,\n designSettings,\n paragraphFormat,\n theme,\n customVariables,\n}: Omit<ThemeOptions, 'siteId'>) => {\n if (theme) {\n return theme;\n }\n\n const result: Theme = {};\n\n if (customVariables) {\n Object.keys(customVariables).forEach((key) => {\n result[key] = customVariables[key] as string;\n });\n }\n\n const availableColors = getAvailableColorList();\n\n if (!colors) {\n availableColors.forEach((colorName: string) => {\n const hexColor = getColorFromPalette(colorName, {\n color,\n colorMode,\n secondaryColor,\n });\n\n if (hexColor) {\n const rgbColor = hexToRgb255(hexColor);\n\n result[colorName] = hexColor;\n\n if (rgbColor) {\n result[`${colorName}-rgb`] = `${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}`;\n }\n }\n });\n }\n\n if (designSettings) {\n Object.keys(designSettings).forEach((key) => {\n if (key === 'iconStyle') {\n result[key] = convertIconStyle(designSettings.iconStyle);\n\n return;\n }\n result[key] = designSettings[key as keyof ChaynsDesignSettings] as string;\n });\n }\n\n if (paragraphFormat) {\n const { themeResult } = getHeadlineColorSelector(paragraphFormat);\n\n // Update Theme\n Object.keys(themeResult).forEach((key) => {\n result[key] = themeResult[key] as string;\n });\n }\n\n switch (colorMode) {\n case ColorMode.Light:\n result.colorMode = 'light';\n break;\n case ColorMode.Dark:\n result.colorMode = 'dark';\n break;\n default:\n result.colorMode = 'classic';\n break;\n }\n\n result.fontSize = (designSettings?.fontSizePx || 15) as unknown as string;\n\n return result;\n};\n\nexport const useChaynsTheme = ({\n colors,\n colorMode,\n color,\n secondaryColor,\n designSettings: designSettingsProp,\n paragraphFormat: paragraphFormatProp,\n siteId,\n theme,\n customVariables,\n}: ThemeOptions) => {\n const designSettings = useDesignSettings(siteId, designSettingsProp);\n const paragraphFormat = useParagraphFormat(siteId, paragraphFormatProp);\n const isMountedRef = useRef<boolean>(false);\n\n const [internalTheme, setInternalTheme] = useState<Theme>(() =>\n createTheme({\n colors,\n colorMode,\n color,\n secondaryColor,\n designSettings,\n paragraphFormat,\n theme,\n customVariables,\n }),\n );\n\n useEffect(() => {\n if (!isMountedRef.current) {\n isMountedRef.current = true;\n return;\n }\n setInternalTheme(\n createTheme({\n colors,\n colorMode,\n color,\n secondaryColor,\n designSettings,\n paragraphFormat,\n theme,\n customVariables,\n }),\n );\n }, [\n color,\n colorMode,\n colors,\n designSettings,\n paragraphFormat,\n secondaryColor,\n theme,\n customVariables,\n ]);\n\n return useMemo(\n () => ({\n theme: internalTheme,\n designSettings,\n paragraphFormat,\n }),\n [internalTheme, designSettings, paragraphFormat],\n );\n};\n"],"mappings":"AAAA,SAASA,qBAAqB,EAAEC,mBAAmB,EAAEC,WAAW,QAAQ,gBAAgB;AACxF,SAAsDC,SAAS,QAAQ,YAAY;AACnF,SAASC,SAAS,EAAEC,OAAO,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AAC5D,SAASC,gBAAgB,EAAEC,wBAAwB,QAAQ,qBAAqB;AAEhF,SAASC,iBAAiB,QAAQ,qBAAqB;AACvD,SAASC,kBAAkB,QAAQ,sBAAsB;
|
|
1
|
+
{"version":3,"file":"useChaynsTheme.js","names":["getAvailableColorList","getColorFromPalette","hexToRgb255","ColorMode","useEffect","useMemo","useRef","useState","convertIconStyle","getHeadlineColorSelector","useDesignSettings","useParagraphFormat","createTheme","colors","colorMode","color","secondaryColor","designSettings","paragraphFormat","theme","iconColor","customVariables","result","Object","keys","forEach","key","availableColors","colorName","hexColor","rgbColor","r","g","b","iconStyle","themeResult","Light","Dark","fontSize","fontSizePx","useChaynsTheme","designSettingsProp","paragraphFormatProp","siteId","isMountedRef","internalTheme","setInternalTheme","current"],"sources":["../../../../../src/components/color-scheme-provider/hooks/useChaynsTheme.ts"],"sourcesContent":["import { getAvailableColorList, getColorFromPalette, hexToRgb255 } from '@chayns/colors';\nimport { ChaynsDesignSettings, ChaynsParagraphFormat, ColorMode } from 'chayns-api';\nimport { useEffect, useMemo, useRef, useState } from 'react';\nimport { convertIconStyle, getHeadlineColorSelector } from '../../../utils/font';\nimport type { Theme } from '../ColorSchemeProvider';\nimport { useDesignSettings } from './useDesignSettings';\nimport { useParagraphFormat } from './useParagraphFormat';\n\nexport type ThemeOptions = {\n colors?: Theme;\n colorMode: ColorMode;\n iconColor?: string;\n color: string;\n secondaryColor?: string;\n designSettings?: ChaynsDesignSettings & { fontSizePx?: number };\n paragraphFormat?: ChaynsParagraphFormat[];\n siteId?: string;\n theme?: Theme;\n customVariables?: Record<string, string>;\n};\n\nconst createTheme = ({\n colors,\n colorMode,\n color,\n secondaryColor,\n designSettings,\n paragraphFormat,\n theme,\n iconColor,\n customVariables,\n}: Omit<ThemeOptions, 'siteId'>) => {\n if (theme) {\n return theme;\n }\n\n const result: Theme = {};\n\n if (customVariables) {\n Object.keys(customVariables).forEach((key) => {\n result[key] = customVariables[key] as string;\n });\n }\n\n const availableColors = getAvailableColorList();\n\n if (!colors) {\n availableColors.forEach((colorName: string) => {\n const hexColor = getColorFromPalette(colorName, {\n color,\n colorMode,\n secondaryColor,\n });\n\n if (hexColor) {\n const rgbColor = hexToRgb255(hexColor);\n\n result[colorName] = hexColor;\n\n if (rgbColor) {\n result[`${colorName}-rgb`] = `${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}`;\n }\n }\n });\n }\n\n if (designSettings) {\n Object.keys(designSettings).forEach((key) => {\n if (key === 'iconStyle') {\n result[key] = convertIconStyle(designSettings.iconStyle);\n\n return;\n }\n result[key] = designSettings[key as keyof ChaynsDesignSettings] as string;\n });\n }\n\n if (paragraphFormat) {\n const { themeResult } = getHeadlineColorSelector(paragraphFormat);\n\n // Update Theme\n Object.keys(themeResult).forEach((key) => {\n result[key] = themeResult[key] as string;\n });\n }\n\n switch (colorMode) {\n case ColorMode.Light:\n result.colorMode = 'light';\n break;\n case ColorMode.Dark:\n result.colorMode = 'dark';\n break;\n default:\n result.colorMode = 'classic';\n break;\n }\n\n if (iconColor) {\n result.iconColor = iconColor;\n }\n\n result.fontSize = (designSettings?.fontSizePx || 15) as unknown as string;\n\n return result;\n};\n\nexport const useChaynsTheme = ({\n colors,\n colorMode,\n color,\n secondaryColor,\n designSettings: designSettingsProp,\n paragraphFormat: paragraphFormatProp,\n siteId,\n iconColor,\n theme,\n customVariables,\n}: ThemeOptions) => {\n const designSettings = useDesignSettings(siteId, designSettingsProp);\n const paragraphFormat = useParagraphFormat(siteId, paragraphFormatProp);\n const isMountedRef = useRef<boolean>(false);\n\n const [internalTheme, setInternalTheme] = useState<Theme>(() =>\n createTheme({\n colors,\n colorMode,\n color,\n secondaryColor,\n designSettings,\n paragraphFormat,\n theme,\n iconColor,\n customVariables,\n }),\n );\n\n useEffect(() => {\n if (!isMountedRef.current) {\n isMountedRef.current = true;\n return;\n }\n setInternalTheme(\n createTheme({\n colors,\n colorMode,\n color,\n secondaryColor,\n designSettings,\n paragraphFormat,\n theme,\n iconColor,\n customVariables,\n }),\n );\n }, [\n color,\n colorMode,\n colors,\n designSettings,\n paragraphFormat,\n secondaryColor,\n theme,\n customVariables,\n ]);\n\n return useMemo(\n () => ({\n theme: internalTheme,\n designSettings,\n paragraphFormat,\n }),\n [internalTheme, designSettings, paragraphFormat],\n );\n};\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Icon.styles.js","names":["styled","css","StyledIconWrapper","span","$isDisabled","$isOnClick","$size","StyledIcon","i","$color","theme","headline","$isStacked","undefined","$fontSize"],"sources":["../../../../src/components/icon/Icon.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledIconWrapperProps = {\n $isDisabled?: boolean;\n $isOnClick: boolean;\n $size: number;\n};\n\nexport const StyledIconWrapper = styled.span<StyledIconWrapperProps>`\n align-items: center;\n cursor: ${({ $isDisabled, $isOnClick }) =>\n $isOnClick && !$isDisabled ? 'pointer' : 'inherit'};\n display: inline-flex;\n min-height: ${({ $size }) => `${$size}px`};\n justify-content: center;\n opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n position: relative;\n transition: opacity 0.3s ease;\n min-width: ${({ $size }) => `${$size}px`};\n\n // To insure that stacked icons have the same size as normal icons.\n &&.fa-stack {\n height: fit-content;\n width: fit-content;\n line-height: ${({ $size }) => $size}px;\n }\n`;\n\ntype StyledIconProps = WithTheme<{\n $fontSize: number;\n $isStacked?: boolean;\n $color?: string;\n $size: number;\n}>;\n\nexport const StyledIcon = styled.i<StyledIconProps>`\n color: ${({ $color, theme }: StyledIconProps) => $color || theme.headline};\n display: ${({ $isStacked }) => ($isStacked ? undefined : 'inline-flex')};\n font-size: ${({ $fontSize }) => `${$fontSize}px`};\n\n ${({ $fontSize, $size }) =>\n $fontSize !== $size &&\n css`\n top: 50%;\n transform: translateY(-50%);\n `}\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAS/C,OAAO,MAAMC,iBAAiB,GAAGF,MAAM,CAACG,IAA4B;AACpE;AACA,cAAc,CAAC;EAAEC,WAAW;EAAEC;AAAW,CAAC,KAClCA,UAAU,IAAI,CAACD,WAAW,GAAG,SAAS,GAAG,SAAS;AAC1D;AACA,kBAAkB,CAAC;EAAEE;AAAM,CAAC,KAAK,GAAGA,KAAK,IAAI;AAC7C;AACA,eAAe,CAAC;EAAEF;AAAY,CAAC,KAAMA,WAAW,GAAG,GAAG,GAAG,CAAE;AAC3D;AACA;AACA,iBAAiB,CAAC;EAAEE;AAAM,CAAC,KAAK,GAAGA,KAAK,IAAI;AAC5C;AACA;AACA;AACA;AACA;AACA,uBAAuB,CAAC;EAAEA;AAAM,CAAC,KAAKA,KAAK;AAC3C;AACA,CAAC;AASD,OAAO,MAAMC,UAAU,GAAGP,MAAM,CAACQ,CAAkB;AACnD,aAAa,CAAC;EAAEC,MAAM;EAAEC;AAAuB,CAAC,KAAKD,MAAM,IAAIC,KAAK,CAACC,QAAQ;
|
|
1
|
+
{"version":3,"file":"Icon.styles.js","names":["styled","css","StyledIconWrapper","span","$isDisabled","$isOnClick","$size","StyledIcon","i","$color","theme","iconColor","headline","$isStacked","undefined","$fontSize"],"sources":["../../../../src/components/icon/Icon.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledIconWrapperProps = {\n $isDisabled?: boolean;\n $isOnClick: boolean;\n $size: number;\n};\n\nexport const StyledIconWrapper = styled.span<StyledIconWrapperProps>`\n align-items: center;\n cursor: ${({ $isDisabled, $isOnClick }) =>\n $isOnClick && !$isDisabled ? 'pointer' : 'inherit'};\n display: inline-flex;\n min-height: ${({ $size }) => `${$size}px`};\n justify-content: center;\n opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n position: relative;\n transition: opacity 0.3s ease;\n min-width: ${({ $size }) => `${$size}px`};\n\n // To insure that stacked icons have the same size as normal icons.\n &&.fa-stack {\n height: fit-content;\n width: fit-content;\n line-height: ${({ $size }) => $size}px;\n }\n`;\n\ntype StyledIconProps = WithTheme<{\n $fontSize: number;\n $isStacked?: boolean;\n $color?: string;\n $size: number;\n}>;\n\nexport const StyledIcon = styled.i<StyledIconProps>`\n color: ${({ $color, theme }: StyledIconProps) => $color || theme.iconColor || theme.headline};\n display: ${({ $isStacked }) => ($isStacked ? undefined : 'inline-flex')};\n font-size: ${({ $fontSize }) => `${$fontSize}px`};\n\n ${({ $fontSize, $size }) =>\n $fontSize !== $size &&\n css`\n top: 50%;\n transform: translateY(-50%);\n `}\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAS/C,OAAO,MAAMC,iBAAiB,GAAGF,MAAM,CAACG,IAA4B;AACpE;AACA,cAAc,CAAC;EAAEC,WAAW;EAAEC;AAAW,CAAC,KAClCA,UAAU,IAAI,CAACD,WAAW,GAAG,SAAS,GAAG,SAAS;AAC1D;AACA,kBAAkB,CAAC;EAAEE;AAAM,CAAC,KAAK,GAAGA,KAAK,IAAI;AAC7C;AACA,eAAe,CAAC;EAAEF;AAAY,CAAC,KAAMA,WAAW,GAAG,GAAG,GAAG,CAAE;AAC3D;AACA;AACA,iBAAiB,CAAC;EAAEE;AAAM,CAAC,KAAK,GAAGA,KAAK,IAAI;AAC5C;AACA;AACA;AACA;AACA;AACA,uBAAuB,CAAC;EAAEA;AAAM,CAAC,KAAKA,KAAK;AAC3C;AACA,CAAC;AASD,OAAO,MAAMC,UAAU,GAAGP,MAAM,CAACQ,CAAkB;AACnD,aAAa,CAAC;EAAEC,MAAM;EAAEC;AAAuB,CAAC,KAAKD,MAAM,IAAIC,KAAK,CAACC,SAAS,IAAID,KAAK,CAACE,QAAQ;AAChG,eAAe,CAAC;EAAEC;AAAW,CAAC,KAAMA,UAAU,GAAGC,SAAS,GAAG,aAAc;AAC3E,iBAAiB,CAAC;EAAEC;AAAU,CAAC,KAAK,GAAGA,SAAS,IAAI;AACpD;AACA,MAAM,CAAC;EAAEA,SAAS;EAAET;AAAM,CAAC,KACnBS,SAAS,KAAKT,KAAK,IACnBL,GAAG;AACX;AACA;AACA,SAAS;AACT,CAAC","ignoreList":[]}
|
|
@@ -18,6 +18,7 @@ const PageProvider = ({
|
|
|
18
18
|
style = {},
|
|
19
19
|
shouldRemovePadding,
|
|
20
20
|
shouldUseUsableHeight,
|
|
21
|
+
iconColor,
|
|
21
22
|
customVariables
|
|
22
23
|
}) => {
|
|
23
24
|
const {
|
|
@@ -38,7 +39,8 @@ const PageProvider = ({
|
|
|
38
39
|
...style,
|
|
39
40
|
height: '100%'
|
|
40
41
|
} : style,
|
|
41
|
-
customVariables: customVariables
|
|
42
|
+
customVariables: customVariables,
|
|
43
|
+
iconColor: iconColor
|
|
42
44
|
}, children), /*#__PURE__*/React.createElement(GlobalStyle, null));
|
|
43
45
|
};
|
|
44
46
|
PageProvider.displayName = 'PageProvider';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PageProvider.js","names":["RuntimeEnviroment","useEnvironment","React","createGlobalStyle","useUsableHeight","ColorSchemeProvider","StyledPageProvider","GlobalStyle","PageProvider","children","color","colorMode","secondaryColor","siteId","style","shouldRemovePadding","shouldUseUsableHeight","customVariables","runtimeEnvironment","usableHeight","shouldUsePadding","IntercomPlugin","PagemakerPlugin","includes","createElement","className","$shouldUsePadding","$usableHeight","undefined","height","displayName"],"sources":["../../../../src/components/page-provider/PageProvider.tsx"],"sourcesContent":["import { RuntimeEnviroment, useEnvironment } from 'chayns-api';\nimport React, { FC } from 'react';\nimport { createGlobalStyle } from 'styled-components';\nimport { useUsableHeight } from '../../utils/pageProvider';\nimport ColorSchemeProvider, {\n type ColorSchemeProviderProps,\n} from '../color-scheme-provider/ColorSchemeProvider';\nimport { StyledPageProvider } from './PageProvider.styles';\n\ninterface PageProviderProps extends ColorSchemeProviderProps {\n /**\n * Whether the padding should be removed.\n */\n shouldRemovePadding?: boolean;\n /**\n * Whether the usable height should be used.\n */\n shouldUseUsableHeight?: boolean;\n}\n\nconst GlobalStyle = createGlobalStyle`\n *, *::before, *::after {\n box-sizing: border-box;\n }\n`;\n\nconst PageProvider: FC<PageProviderProps> = ({\n children,\n color,\n colorMode,\n secondaryColor,\n siteId,\n style = {},\n shouldRemovePadding,\n shouldUseUsableHeight,\n customVariables,\n}) => {\n const { runtimeEnvironment } = useEnvironment();\n\n const usableHeight = useUsableHeight();\n\n const shouldUsePadding =\n !shouldRemovePadding &&\n ![RuntimeEnviroment.IntercomPlugin, RuntimeEnviroment.PagemakerPlugin, 6].includes(\n runtimeEnvironment as number,\n );\n\n return (\n <StyledPageProvider\n className=\"page-provider\"\n $shouldUsePadding={shouldUsePadding}\n $usableHeight={shouldUseUsableHeight ? usableHeight : undefined}\n >\n <ColorSchemeProvider\n color={color}\n secondaryColor={secondaryColor}\n colorMode={colorMode}\n siteId={siteId}\n style={shouldUseUsableHeight ? { ...style, height: '100%' } : style}\n customVariables={customVariables}\n >\n {children}\n </ColorSchemeProvider>\n <GlobalStyle />\n </StyledPageProvider>\n );\n};\nPageProvider.displayName = 'PageProvider';\n\nexport default PageProvider;\n"],"mappings":"AAAA,SAASA,iBAAiB,EAAEC,cAAc,QAAQ,YAAY;AAC9D,OAAOC,KAAK,MAAc,OAAO;AACjC,SAASC,iBAAiB,QAAQ,mBAAmB;AACrD,SAASC,eAAe,QAAQ,0BAA0B;AAC1D,OAAOC,mBAAmB,MAEnB,8CAA8C;AACrD,SAASC,kBAAkB,QAAQ,uBAAuB;AAa1D,MAAMC,WAAW,GAAGJ,iBAAiB;AACrC;AACA;AACA;AACA,CAAC;AAED,MAAMK,YAAmC,GAAGA,CAAC;EACzCC,QAAQ;EACRC,KAAK;EACLC,SAAS;EACTC,cAAc;EACdC,MAAM;EACNC,KAAK,GAAG,CAAC,CAAC;EACVC,mBAAmB;EACnBC,qBAAqB;EACrBC;AACJ,CAAC,KAAK;EACF,MAAM;IAAEC;EAAmB,CAAC,
|
|
1
|
+
{"version":3,"file":"PageProvider.js","names":["RuntimeEnviroment","useEnvironment","React","createGlobalStyle","useUsableHeight","ColorSchemeProvider","StyledPageProvider","GlobalStyle","PageProvider","children","color","colorMode","secondaryColor","siteId","style","shouldRemovePadding","shouldUseUsableHeight","iconColor","customVariables","runtimeEnvironment","usableHeight","shouldUsePadding","IntercomPlugin","PagemakerPlugin","includes","createElement","className","$shouldUsePadding","$usableHeight","undefined","height","displayName"],"sources":["../../../../src/components/page-provider/PageProvider.tsx"],"sourcesContent":["import { RuntimeEnviroment, useEnvironment } from 'chayns-api';\nimport React, { FC } from 'react';\nimport { createGlobalStyle } from 'styled-components';\nimport { useUsableHeight } from '../../utils/pageProvider';\nimport ColorSchemeProvider, {\n type ColorSchemeProviderProps,\n} from '../color-scheme-provider/ColorSchemeProvider';\nimport { StyledPageProvider } from './PageProvider.styles';\n\ninterface PageProviderProps extends ColorSchemeProviderProps {\n /**\n * Whether the padding should be removed.\n */\n shouldRemovePadding?: boolean;\n /**\n * Whether the usable height should be used.\n */\n shouldUseUsableHeight?: boolean;\n}\n\nconst GlobalStyle = createGlobalStyle`\n *, *::before, *::after {\n box-sizing: border-box;\n }\n`;\n\nconst PageProvider: FC<PageProviderProps> = ({\n children,\n color,\n colorMode,\n secondaryColor,\n siteId,\n style = {},\n shouldRemovePadding,\n shouldUseUsableHeight,\n iconColor,\n customVariables,\n}) => {\n const { runtimeEnvironment } = useEnvironment();\n\n const usableHeight = useUsableHeight();\n\n const shouldUsePadding =\n !shouldRemovePadding &&\n ![RuntimeEnviroment.IntercomPlugin, RuntimeEnviroment.PagemakerPlugin, 6].includes(\n runtimeEnvironment as number,\n );\n\n return (\n <StyledPageProvider\n className=\"page-provider\"\n $shouldUsePadding={shouldUsePadding}\n $usableHeight={shouldUseUsableHeight ? usableHeight : undefined}\n >\n <ColorSchemeProvider\n color={color}\n secondaryColor={secondaryColor}\n colorMode={colorMode}\n siteId={siteId}\n style={shouldUseUsableHeight ? { ...style, height: '100%' } : style}\n customVariables={customVariables}\n iconColor={iconColor}\n >\n {children}\n </ColorSchemeProvider>\n <GlobalStyle />\n </StyledPageProvider>\n );\n};\nPageProvider.displayName = 'PageProvider';\n\nexport default PageProvider;\n"],"mappings":"AAAA,SAASA,iBAAiB,EAAEC,cAAc,QAAQ,YAAY;AAC9D,OAAOC,KAAK,MAAc,OAAO;AACjC,SAASC,iBAAiB,QAAQ,mBAAmB;AACrD,SAASC,eAAe,QAAQ,0BAA0B;AAC1D,OAAOC,mBAAmB,MAEnB,8CAA8C;AACrD,SAASC,kBAAkB,QAAQ,uBAAuB;AAa1D,MAAMC,WAAW,GAAGJ,iBAAiB;AACrC;AACA;AACA;AACA,CAAC;AAED,MAAMK,YAAmC,GAAGA,CAAC;EACzCC,QAAQ;EACRC,KAAK;EACLC,SAAS;EACTC,cAAc;EACdC,MAAM;EACNC,KAAK,GAAG,CAAC,CAAC;EACVC,mBAAmB;EACnBC,qBAAqB;EACrBC,SAAS;EACTC;AACJ,CAAC,KAAK;EACF,MAAM;IAAEC;EAAmB,CAAC,GAAGlB,cAAc,CAAC,CAAC;EAE/C,MAAMmB,YAAY,GAAGhB,eAAe,CAAC,CAAC;EAEtC,MAAMiB,gBAAgB,GAClB,CAACN,mBAAmB,IACpB,CAAC,CAACf,iBAAiB,CAACsB,cAAc,EAAEtB,iBAAiB,CAACuB,eAAe,EAAE,CAAC,CAAC,CAACC,QAAQ,CAC9EL,kBACJ,CAAC;EAEL,oBACIjB,KAAA,CAAAuB,aAAA,CAACnB,kBAAkB;IACfoB,SAAS,EAAC,eAAe;IACzBC,iBAAiB,EAAEN,gBAAiB;IACpCO,aAAa,EAAEZ,qBAAqB,GAAGI,YAAY,GAAGS;EAAU,gBAEhE3B,KAAA,CAAAuB,aAAA,CAACpB,mBAAmB;IAChBK,KAAK,EAAEA,KAAM;IACbE,cAAc,EAAEA,cAAe;IAC/BD,SAAS,EAAEA,SAAU;IACrBE,MAAM,EAAEA,MAAO;IACfC,KAAK,EAAEE,qBAAqB,GAAG;MAAE,GAAGF,KAAK;MAAEgB,MAAM,EAAE;IAAO,CAAC,GAAGhB,KAAM;IACpEI,eAAe,EAAEA,eAAgB;IACjCD,SAAS,EAAEA;EAAU,GAEpBR,QACgB,CAAC,eACtBP,KAAA,CAAAuB,aAAA,CAAClB,WAAW,MAAE,CACE,CAAC;AAE7B,CAAC;AACDC,YAAY,CAACuB,WAAW,GAAG,cAAc;AAEzC,eAAevB,YAAY","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Popup.js","names":["AnimatePresence","React","forwardRef","useCallback","useEffect","useImperativeHandle","useRef","useState","createPortal","useUuid","PopupAlignment","AreaContextProvider","PopupContentWrapper","StyledPopup","useMeasuredClone","Popup","alignment","content","onShow","container","onHide","children","shouldHideOnChildrenLeave","shouldShowOnHover","shouldUseChildrenWidth","shouldScrollWithContent","shouldUseFullWidth","yOffset","ref","coordinates","setCoordinates","x","y","internalAlignment","setInternalAlignment","TopLeft","offset","setOffset","isOpen","setIsOpen","portal","setPortal","pseudoSize","setPseudoSize","newContainer","setNewContainer","contentMaxHeight","setContentMaxHeight","undefined","timeout","uuid","height","width","measuredElement","popupContentRef","popupRef","current","el","element","closest","Element","handleShow","pseudoHeight","pseudoWidth","childrenHeight","left","childrenLeft","top","childrenTop","childrenWidth","getBoundingClientRect","document","body","containerHeight","containerWidth","zoomX","offsetWidth","zoomY","offsetHeight","BottomLeft","BottomRight","isRight","scrollLeft","scrollTop","newOffset","window","innerWidth","right","newX","TopRight","viewHeight","clientHeight","TopCenter","includes","handleChildrenClick","handleHide","handleMouseEnter","clearTimeout","handleMouseLeave","setTimeout","handleDocumentClick","event","contains","target","hide","show","addEventListener","removeEventListener","createElement","initial","key","maxHeight","onMouseLeave","onMouseEnter","shouldChangeColor","Fragment","className","onClick","$shouldUseChildrenWidth","$shouldUseFullWidth","displayName"],"sources":["../../../../src/components/popup/Popup.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, {\n forwardRef,\n ReactNode,\n ReactPortal,\n useCallback,\n useEffect,\n useImperativeHandle,\n useRef,\n useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useUuid } from '../../hooks/uuid';\nimport { PopupAlignment, PopupCoordinates, PopupRef } from '../../types/popup';\nimport AreaContextProvider from '../area-provider/AreaContextProvider';\nimport PopupContentWrapper from './popup-content-wrapper/PopupContentWrapper';\nimport { StyledPopup } from './Popup.styles';\nimport { useMeasuredClone } from '../../hooks/element';\n\nexport type PopupProps = {\n /**\n * The alignment of the popup. By default, the popup will calculate the best alignment.\n */\n alignment?: PopupAlignment;\n /**\n * The element over which the content of the `ContextMenu` should be displayed.\n */\n children?: ReactNode;\n /**\n * The element where the content of the `Popup` should be rendered via React Portal.\n */\n container?: Element;\n /**\n * The content that should be displayed inside the popup.\n */\n content: ReactNode;\n /**\n * Function to be executed when the content of the Context menu has been hidden.\n */\n onHide?: VoidFunction;\n /**\n * Function to be executed when the content of the Context menu has been shown.\n */\n onShow?: VoidFunction;\n /**\n * Whether the tooltip should be hidden after the children is not hovered.\n */\n shouldHideOnChildrenLeave?: boolean;\n /**\n * Whether the popup should scroll with the content.\n */\n shouldScrollWithContent?: boolean;\n /**\n * Whether the popup should be opened on hover. If not, the popup will be opened on click.\n */\n shouldShowOnHover?: boolean;\n /**\n * Whether the width of the children should be used.\n */\n shouldUseChildrenWidth?: boolean;\n /**\n * Whether the popup children should use the full width.\n */\n shouldUseFullWidth?: boolean;\n /**\n * The Y offset of the popup to the children.\n */\n yOffset?: number;\n};\n\nconst Popup = forwardRef<PopupRef, PopupProps>(\n (\n {\n alignment,\n content,\n onShow,\n container,\n onHide,\n children,\n shouldHideOnChildrenLeave,\n shouldShowOnHover = false,\n shouldUseChildrenWidth = true,\n shouldScrollWithContent = true,\n shouldUseFullWidth = false,\n yOffset = 0,\n },\n ref,\n ) => {\n const [coordinates, setCoordinates] = useState<PopupCoordinates>({\n x: 0,\n y: 0,\n });\n\n const [internalAlignment, setInternalAlignment] = useState<PopupAlignment>(\n PopupAlignment.TopLeft,\n );\n const [offset, setOffset] = useState<number>(0);\n const [isOpen, setIsOpen] = useState(false);\n const [portal, setPortal] = useState<ReactPortal>();\n const [pseudoSize, setPseudoSize] = useState<{ height: number; width: number }>();\n const [newContainer, setNewContainer] = useState<Element | null>(container ?? null);\n const [contentMaxHeight, setContentMaxHeight] = useState<number | undefined>(undefined);\n\n const timeout = useRef<number>();\n\n const uuid = useUuid();\n\n const { height, width, measuredElement } = useMeasuredClone({ content });\n\n const popupContentRef = useRef<HTMLDivElement>(null);\n const popupRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n if (popupRef.current && !container) {\n const el = popupRef.current as HTMLElement;\n\n const element = el.closest('.dialog-inner, .page-provider, .tapp, body');\n\n setNewContainer(element);\n }\n }, [container]);\n\n useEffect(() => {\n if (container instanceof Element) {\n setNewContainer(container);\n }\n }, [container]);\n\n useEffect(() => {\n setPseudoSize({ height, width });\n }, [height, width]);\n\n const handleShow = useCallback(() => {\n if (popupRef.current && pseudoSize) {\n if (!newContainer) {\n return;\n }\n\n const { height: pseudoHeight, width: pseudoWidth } = pseudoSize;\n\n const {\n height: childrenHeight,\n left: childrenLeft,\n top: childrenTop,\n width: childrenWidth,\n } = popupRef.current.getBoundingClientRect();\n\n const element = shouldScrollWithContent ? newContainer : document.body;\n\n const {\n height: containerHeight,\n width: containerWidth,\n top,\n left,\n } = element.getBoundingClientRect();\n\n const zoomX = containerWidth / (element as HTMLElement).offsetWidth;\n const zoomY = containerHeight / (element as HTMLElement).offsetHeight;\n\n if (\n pseudoHeight > childrenTop - 25 ||\n alignment === PopupAlignment.BottomLeft ||\n alignment === PopupAlignment.BottomRight\n ) {\n let isRight = false;\n\n if (\n pseudoWidth > childrenLeft + childrenWidth / 2 - 25 ||\n alignment === PopupAlignment.BottomRight\n ) {\n setInternalAlignment(PopupAlignment.BottomRight);\n\n isRight = true;\n } else {\n setInternalAlignment(PopupAlignment.BottomLeft);\n }\n\n const x =\n (childrenLeft + childrenWidth / 2 - left) / zoomX + element.scrollLeft;\n const y =\n (childrenTop + childrenHeight / 2 - top) / zoomY +\n element.scrollTop -\n yOffset;\n\n let newOffset;\n\n if (isRight) {\n newOffset =\n x + pseudoWidth >= window.innerWidth\n ? x + pseudoWidth - window.innerWidth\n : 0;\n } else {\n newOffset = 0;\n\n const right = window.innerWidth - (childrenLeft + childrenWidth / 2);\n\n newOffset =\n right + pseudoWidth >= window.innerWidth\n ? right + pseudoWidth - window.innerWidth\n : 0;\n }\n\n setOffset(newOffset);\n\n const newX = x - newOffset;\n\n setCoordinates({\n x: newX < 23 ? 23 : newX,\n y,\n });\n } else {\n let isRight = false;\n\n if (\n pseudoWidth > childrenLeft + childrenWidth / 2 - 25 ||\n alignment === PopupAlignment.TopRight\n ) {\n setInternalAlignment(PopupAlignment.TopRight);\n\n isRight = true;\n } else {\n setInternalAlignment(PopupAlignment.TopLeft);\n }\n\n const x =\n (childrenLeft + childrenWidth / 2 - left) / zoomX + element.scrollLeft;\n const y =\n (childrenTop + childrenHeight / 2 - top) / zoomY +\n element.scrollTop -\n yOffset;\n\n let newOffset;\n\n if (isRight) {\n newOffset =\n x + pseudoWidth >= window.innerWidth\n ? x + pseudoWidth - window.innerWidth\n : 0;\n } else {\n newOffset = 0;\n\n const right = window.innerWidth - (childrenLeft + childrenWidth / 2);\n\n newOffset =\n right + pseudoWidth >= window.innerWidth\n ? right + pseudoWidth - window.innerWidth\n : 0;\n }\n\n setOffset(newOffset);\n\n const newX = x - newOffset;\n\n setCoordinates({\n x: newX < 23 ? 23 : newX,\n y,\n });\n }\n\n setIsOpen(true);\n }\n }, [alignment, newContainer, pseudoSize, shouldScrollWithContent, yOffset]);\n\n useEffect(() => {\n if (!newContainer || !popupRef.current) return;\n\n const viewHeight = newContainer.clientHeight;\n const childrenHeight = popupRef.current.getBoundingClientRect().height;\n\n if (\n [\n PopupAlignment.TopLeft,\n PopupAlignment.TopRight,\n PopupAlignment.TopCenter,\n ].includes(internalAlignment)\n ) {\n setContentMaxHeight(coordinates.y - 20);\n } else {\n setContentMaxHeight(viewHeight - childrenHeight - coordinates.y - 20);\n }\n }, [coordinates.y, internalAlignment, newContainer]);\n\n const handleChildrenClick = () => {\n handleShow();\n };\n\n const handleHide = useCallback(() => {\n setIsOpen(false);\n }, []);\n\n const handleMouseEnter = useCallback(() => {\n if (shouldShowOnHover) {\n window.clearTimeout(timeout.current);\n handleShow();\n }\n }, [handleShow, shouldShowOnHover]);\n\n const handleMouseLeave = useCallback(() => {\n if (!shouldShowOnHover) {\n return;\n }\n\n if (shouldHideOnChildrenLeave) {\n handleHide();\n\n return;\n }\n\n timeout.current = window.setTimeout(() => {\n handleHide();\n }, 500);\n }, [handleHide, shouldHideOnChildrenLeave, shouldShowOnHover]);\n\n const handleDocumentClick = useCallback<EventListener>(\n (event) => {\n if (!popupContentRef.current?.contains(event.target as Node)) {\n handleHide();\n }\n },\n [handleHide],\n );\n\n useImperativeHandle(\n ref,\n () => ({\n hide: handleHide,\n show: handleShow,\n }),\n [handleHide, handleShow],\n );\n\n useEffect(() => {\n if (isOpen) {\n document.addEventListener('click', handleDocumentClick, true);\n window.addEventListener('blur', handleHide);\n\n if (typeof onShow === 'function') {\n onShow();\n }\n } else if (typeof onHide === 'function') {\n onHide();\n }\n\n return () => {\n document.removeEventListener('click', handleDocumentClick, true);\n window.removeEventListener('blur', handleHide);\n };\n }, [handleDocumentClick, handleHide, isOpen, onHide, onShow]);\n\n useEffect(() => {\n if (!newContainer) {\n return;\n }\n\n setPortal(() =>\n createPortal(\n <AnimatePresence initial={false}>\n {isOpen && (\n <PopupContentWrapper\n width={pseudoSize?.width ?? 0}\n offset={offset}\n shouldScrollWithContent={shouldScrollWithContent}\n coordinates={coordinates}\n key={`tooltip_${uuid}`}\n maxHeight={contentMaxHeight}\n alignment={internalAlignment}\n ref={popupContentRef}\n onMouseLeave={handleMouseLeave}\n onMouseEnter={handleMouseEnter}\n >\n <AreaContextProvider shouldChangeColor>\n {content}\n </AreaContextProvider>\n </PopupContentWrapper>\n )}\n </AnimatePresence>,\n newContainer,\n ),\n );\n }, [\n contentMaxHeight,\n internalAlignment,\n newContainer,\n content,\n coordinates,\n handleMouseEnter,\n handleMouseLeave,\n isOpen,\n offset,\n pseudoSize?.width,\n uuid,\n shouldScrollWithContent,\n ]);\n\n return (\n <>\n {measuredElement}\n <StyledPopup\n className=\"beta-chayns-popup\"\n ref={popupRef}\n onClick={handleChildrenClick}\n onMouseLeave={handleMouseLeave}\n onMouseEnter={handleMouseEnter}\n $shouldUseChildrenWidth={shouldUseChildrenWidth}\n $shouldUseFullWidth={shouldUseFullWidth}\n >\n {children}\n </StyledPopup>\n {portal}\n </>\n );\n },\n);\n\nPopup.displayName = 'Popup';\n\nexport default Popup;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"Popup.js","names":["AnimatePresence","React","forwardRef","useCallback","useEffect","useImperativeHandle","useRef","useState","createPortal","useUuid","PopupAlignment","AreaContextProvider","PopupContentWrapper","StyledPopup","useMeasuredClone","Popup","alignment","content","onShow","container","onHide","children","shouldHideOnChildrenLeave","shouldShowOnHover","shouldUseChildrenWidth","shouldScrollWithContent","shouldUseFullWidth","yOffset","ref","coordinates","setCoordinates","x","y","internalAlignment","setInternalAlignment","TopLeft","offset","setOffset","isOpen","setIsOpen","portal","setPortal","pseudoSize","setPseudoSize","newContainer","setNewContainer","contentMaxHeight","setContentMaxHeight","undefined","timeout","uuid","height","width","measuredElement","shouldPreventTextWrapping","popupContentRef","popupRef","current","el","element","closest","Element","handleShow","pseudoHeight","pseudoWidth","childrenHeight","left","childrenLeft","top","childrenTop","childrenWidth","getBoundingClientRect","document","body","containerHeight","containerWidth","zoomX","offsetWidth","zoomY","offsetHeight","BottomLeft","BottomRight","isRight","scrollLeft","scrollTop","newOffset","window","innerWidth","right","newX","TopRight","viewHeight","clientHeight","TopCenter","includes","handleChildrenClick","handleHide","handleMouseEnter","clearTimeout","handleMouseLeave","setTimeout","handleDocumentClick","event","contains","target","hide","show","addEventListener","removeEventListener","createElement","initial","key","maxHeight","onMouseLeave","onMouseEnter","shouldChangeColor","Fragment","className","onClick","$shouldUseChildrenWidth","$shouldUseFullWidth","displayName"],"sources":["../../../../src/components/popup/Popup.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, {\n forwardRef,\n ReactNode,\n ReactPortal,\n useCallback,\n useEffect,\n useImperativeHandle,\n useRef,\n useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useUuid } from '../../hooks/uuid';\nimport { PopupAlignment, PopupCoordinates, PopupRef } from '../../types/popup';\nimport AreaContextProvider from '../area-provider/AreaContextProvider';\nimport PopupContentWrapper from './popup-content-wrapper/PopupContentWrapper';\nimport { StyledPopup } from './Popup.styles';\nimport { useMeasuredClone } from '../../hooks/element';\n\nexport type PopupProps = {\n /**\n * The alignment of the popup. By default, the popup will calculate the best alignment.\n */\n alignment?: PopupAlignment;\n /**\n * The element over which the content of the `ContextMenu` should be displayed.\n */\n children?: ReactNode;\n /**\n * The element where the content of the `Popup` should be rendered via React Portal.\n */\n container?: Element;\n /**\n * The content that should be displayed inside the popup.\n */\n content: ReactNode;\n /**\n * Function to be executed when the content of the Context menu has been hidden.\n */\n onHide?: VoidFunction;\n /**\n * Function to be executed when the content of the Context menu has been shown.\n */\n onShow?: VoidFunction;\n /**\n * Whether the tooltip should be hidden after the children is not hovered.\n */\n shouldHideOnChildrenLeave?: boolean;\n /**\n * Whether the popup should scroll with the content.\n */\n shouldScrollWithContent?: boolean;\n /**\n * Whether the popup should be opened on hover. If not, the popup will be opened on click.\n */\n shouldShowOnHover?: boolean;\n /**\n * Whether the width of the children should be used.\n */\n shouldUseChildrenWidth?: boolean;\n /**\n * Whether the popup children should use the full width.\n */\n shouldUseFullWidth?: boolean;\n /**\n * The Y offset of the popup to the children.\n */\n yOffset?: number;\n};\n\nconst Popup = forwardRef<PopupRef, PopupProps>(\n (\n {\n alignment,\n content,\n onShow,\n container,\n onHide,\n children,\n shouldHideOnChildrenLeave,\n shouldShowOnHover = false,\n shouldUseChildrenWidth = true,\n shouldScrollWithContent = true,\n shouldUseFullWidth = false,\n yOffset = 0,\n },\n ref,\n ) => {\n const [coordinates, setCoordinates] = useState<PopupCoordinates>({\n x: 0,\n y: 0,\n });\n\n const [internalAlignment, setInternalAlignment] = useState<PopupAlignment>(\n PopupAlignment.TopLeft,\n );\n const [offset, setOffset] = useState<number>(0);\n const [isOpen, setIsOpen] = useState(false);\n const [portal, setPortal] = useState<ReactPortal>();\n const [pseudoSize, setPseudoSize] = useState<{ height: number; width: number }>();\n const [newContainer, setNewContainer] = useState<Element | null>(container ?? null);\n const [contentMaxHeight, setContentMaxHeight] = useState<number | undefined>(undefined);\n\n const timeout = useRef<number>();\n\n const uuid = useUuid();\n\n const { height, width, measuredElement } = useMeasuredClone({\n content,\n shouldPreventTextWrapping: !shouldUseChildrenWidth,\n });\n\n const popupContentRef = useRef<HTMLDivElement>(null);\n const popupRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n if (popupRef.current && !container) {\n const el = popupRef.current as HTMLElement;\n\n const element = el.closest('.dialog-inner, .page-provider, .tapp, body');\n\n setNewContainer(element);\n }\n }, [container]);\n\n useEffect(() => {\n if (container instanceof Element) {\n setNewContainer(container);\n }\n }, [container]);\n\n useEffect(() => {\n setPseudoSize({ height, width });\n }, [height, width]);\n\n const handleShow = useCallback(() => {\n if (popupRef.current && pseudoSize) {\n if (!newContainer) {\n return;\n }\n\n const { height: pseudoHeight, width: pseudoWidth } = pseudoSize;\n\n const {\n height: childrenHeight,\n left: childrenLeft,\n top: childrenTop,\n width: childrenWidth,\n } = popupRef.current.getBoundingClientRect();\n\n const element = shouldScrollWithContent ? newContainer : document.body;\n\n const {\n height: containerHeight,\n width: containerWidth,\n top,\n left,\n } = element.getBoundingClientRect();\n\n const zoomX = containerWidth / (element as HTMLElement).offsetWidth;\n const zoomY = containerHeight / (element as HTMLElement).offsetHeight;\n\n if (\n pseudoHeight > childrenTop - 25 ||\n alignment === PopupAlignment.BottomLeft ||\n alignment === PopupAlignment.BottomRight\n ) {\n let isRight = false;\n\n if (\n pseudoWidth > childrenLeft + childrenWidth / 2 - 25 ||\n alignment === PopupAlignment.BottomRight\n ) {\n setInternalAlignment(PopupAlignment.BottomRight);\n\n isRight = true;\n } else {\n setInternalAlignment(PopupAlignment.BottomLeft);\n }\n\n const x =\n (childrenLeft + childrenWidth / 2 - left) / zoomX + element.scrollLeft;\n const y =\n (childrenTop + childrenHeight / 2 - top) / zoomY +\n element.scrollTop -\n yOffset;\n\n let newOffset;\n\n if (isRight) {\n newOffset =\n x + pseudoWidth >= window.innerWidth\n ? x + pseudoWidth - window.innerWidth\n : 0;\n } else {\n newOffset = 0;\n\n const right = window.innerWidth - (childrenLeft + childrenWidth / 2);\n\n newOffset =\n right + pseudoWidth >= window.innerWidth\n ? right + pseudoWidth - window.innerWidth\n : 0;\n }\n\n setOffset(newOffset);\n\n const newX = x - newOffset;\n\n setCoordinates({\n x: newX < 23 ? 23 : newX,\n y,\n });\n } else {\n let isRight = false;\n\n if (\n pseudoWidth > childrenLeft + childrenWidth / 2 - 25 ||\n alignment === PopupAlignment.TopRight\n ) {\n setInternalAlignment(PopupAlignment.TopRight);\n\n isRight = true;\n } else {\n setInternalAlignment(PopupAlignment.TopLeft);\n }\n\n const x =\n (childrenLeft + childrenWidth / 2 - left) / zoomX + element.scrollLeft;\n const y =\n (childrenTop + childrenHeight / 2 - top) / zoomY +\n element.scrollTop -\n yOffset;\n\n let newOffset;\n\n if (isRight) {\n newOffset =\n x + pseudoWidth >= window.innerWidth\n ? x + pseudoWidth - window.innerWidth\n : 0;\n } else {\n newOffset = 0;\n\n const right = window.innerWidth - (childrenLeft + childrenWidth / 2);\n\n newOffset =\n right + pseudoWidth >= window.innerWidth\n ? right + pseudoWidth - window.innerWidth\n : 0;\n }\n\n setOffset(newOffset);\n\n const newX = x - newOffset;\n\n setCoordinates({\n x: newX < 23 ? 23 : newX,\n y,\n });\n }\n\n setIsOpen(true);\n }\n }, [alignment, newContainer, pseudoSize, shouldScrollWithContent, yOffset]);\n\n useEffect(() => {\n if (!newContainer || !popupRef.current) return;\n\n const viewHeight = newContainer.clientHeight;\n const childrenHeight = popupRef.current.getBoundingClientRect().height;\n\n if (\n [\n PopupAlignment.TopLeft,\n PopupAlignment.TopRight,\n PopupAlignment.TopCenter,\n ].includes(internalAlignment)\n ) {\n setContentMaxHeight(coordinates.y - 20);\n } else {\n setContentMaxHeight(viewHeight - childrenHeight - coordinates.y - 20);\n }\n }, [coordinates.y, internalAlignment, newContainer]);\n\n const handleChildrenClick = () => {\n handleShow();\n };\n\n const handleHide = useCallback(() => {\n setIsOpen(false);\n }, []);\n\n const handleMouseEnter = useCallback(() => {\n if (shouldShowOnHover) {\n window.clearTimeout(timeout.current);\n handleShow();\n }\n }, [handleShow, shouldShowOnHover]);\n\n const handleMouseLeave = useCallback(() => {\n if (!shouldShowOnHover) {\n return;\n }\n\n if (shouldHideOnChildrenLeave) {\n handleHide();\n\n return;\n }\n\n timeout.current = window.setTimeout(() => {\n handleHide();\n }, 500);\n }, [handleHide, shouldHideOnChildrenLeave, shouldShowOnHover]);\n\n const handleDocumentClick = useCallback<EventListener>(\n (event) => {\n if (!popupContentRef.current?.contains(event.target as Node)) {\n handleHide();\n }\n },\n [handleHide],\n );\n\n useImperativeHandle(\n ref,\n () => ({\n hide: handleHide,\n show: handleShow,\n }),\n [handleHide, handleShow],\n );\n\n useEffect(() => {\n if (isOpen) {\n document.addEventListener('click', handleDocumentClick, true);\n window.addEventListener('blur', handleHide);\n\n if (typeof onShow === 'function') {\n onShow();\n }\n } else if (typeof onHide === 'function') {\n onHide();\n }\n\n return () => {\n document.removeEventListener('click', handleDocumentClick, true);\n window.removeEventListener('blur', handleHide);\n };\n }, [handleDocumentClick, handleHide, isOpen, onHide, onShow]);\n\n useEffect(() => {\n if (!newContainer) {\n return;\n }\n\n setPortal(() =>\n createPortal(\n <AnimatePresence initial={false}>\n {isOpen && (\n <PopupContentWrapper\n width={pseudoSize?.width ?? 0}\n offset={offset}\n shouldScrollWithContent={shouldScrollWithContent}\n coordinates={coordinates}\n key={`tooltip_${uuid}`}\n maxHeight={contentMaxHeight}\n alignment={internalAlignment}\n ref={popupContentRef}\n onMouseLeave={handleMouseLeave}\n onMouseEnter={handleMouseEnter}\n >\n <AreaContextProvider shouldChangeColor>\n {content}\n </AreaContextProvider>\n </PopupContentWrapper>\n )}\n </AnimatePresence>,\n newContainer,\n ),\n );\n }, [\n contentMaxHeight,\n internalAlignment,\n newContainer,\n content,\n coordinates,\n handleMouseEnter,\n handleMouseLeave,\n isOpen,\n offset,\n pseudoSize?.width,\n uuid,\n shouldScrollWithContent,\n ]);\n\n return (\n <>\n {measuredElement}\n <StyledPopup\n className=\"beta-chayns-popup\"\n ref={popupRef}\n onClick={handleChildrenClick}\n onMouseLeave={handleMouseLeave}\n onMouseEnter={handleMouseEnter}\n $shouldUseChildrenWidth={shouldUseChildrenWidth}\n $shouldUseFullWidth={shouldUseFullWidth}\n >\n {children}\n </StyledPopup>\n {portal}\n </>\n );\n },\n);\n\nPopup.displayName = 'Popup';\n\nexport default Popup;\n"],"mappings":"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","ignoreList":[]}
|
package/lib/esm/hooks/element.js
CHANGED
|
@@ -51,7 +51,8 @@ const getClonedElement = content => {
|
|
|
51
51
|
return content;
|
|
52
52
|
};
|
|
53
53
|
export const useMeasuredClone = ({
|
|
54
|
-
content
|
|
54
|
+
content,
|
|
55
|
+
shouldPreventTextWrapping = true
|
|
55
56
|
}) => {
|
|
56
57
|
const ref = useRef(null);
|
|
57
58
|
const [size, setSize] = useState({
|
|
@@ -67,7 +68,7 @@ export const useMeasuredClone = ({
|
|
|
67
68
|
offsetHeight: height
|
|
68
69
|
} = ref.current;
|
|
69
70
|
setSize({
|
|
70
|
-
width: width + 10,
|
|
71
|
+
width: width + (shouldPreventTextWrapping ? 10 : 0),
|
|
71
72
|
height
|
|
72
73
|
});
|
|
73
74
|
};
|
|
@@ -75,7 +76,7 @@ export const useMeasuredClone = ({
|
|
|
75
76
|
const observer = new ResizeObserver(measure);
|
|
76
77
|
if (ref.current) observer.observe(ref.current);
|
|
77
78
|
return () => observer.disconnect();
|
|
78
|
-
}, []);
|
|
79
|
+
}, [shouldPreventTextWrapping]);
|
|
79
80
|
const measuredElement = /*#__PURE__*/React.createElement("div", {
|
|
80
81
|
"data-measured-clone": "true",
|
|
81
82
|
ref: ref,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"element.js","names":["React","cloneElement","isValidElement","useEffect","useRef","useState","useElementSize","ref","shouldUseChildElement","shouldUseParentElement","size","setSize","target","current","parentElement","firstElementChild","updateSize","getBoundingClientRect","observer","ResizeObserver","entries","forEach","entry","contentRect","observe","disconnect","getClonedElement","content","preventEvents","onClick","e","stopPropagation","onMouseDown","onMouseUp","onKeyDown","onKeyUp","onFocus","onBlur","props","createElement","useMeasuredClone","width","height","clonedElement","measure","offsetWidth","offsetHeight","measuredElement","style","position","opacity","pointerEvents","zIndex","visibility","useIsMeasuredClone","isClone","setIsClone","el","hasAttribute"],"sources":["../../../src/hooks/element.tsx"],"sourcesContent":["import React, {\n cloneElement,\n HTMLAttributes,\n isValidElement,\n MutableRefObject,\n ReactElement,\n ReactNode,\n useEffect,\n useRef,\n useState,\n} from 'react';\n\ninterface UseElementSizeOptions {\n shouldUseChildElement?: boolean;\n shouldUseParentElement?: boolean;\n}\n\nexport const useElementSize = (\n ref: MutableRefObject<HTMLDivElement | HTMLLabelElement | null>,\n { shouldUseChildElement = false, shouldUseParentElement = false }: UseElementSizeOptions = {},\n): DOMRectReadOnly | undefined => {\n const [size, setSize] = useState<DOMRectReadOnly>();\n\n useEffect(() => {\n let target = ref.current as HTMLElement | null;\n\n if (shouldUseParentElement) {\n target = ref.current?.parentElement as HTMLElement | null;\n }\n\n if (shouldUseChildElement) {\n target = ref.current?.firstElementChild as HTMLElement | null;\n }\n\n if (!target) return () => {};\n\n const updateSize = () => setSize(target.getBoundingClientRect());\n\n updateSize();\n\n const observer = new ResizeObserver((entries) => {\n entries.forEach((entry) => {\n if (entry.target === target) {\n setSize(entry.contentRect);\n }\n });\n });\n\n observer.observe(target);\n\n return () => observer.disconnect();\n }, [ref, shouldUseChildElement, shouldUseParentElement]);\n\n return size;\n};\n\nconst getClonedElement = (content: ReactNode) => {\n const preventEvents: Partial<HTMLAttributes<any>> = {\n onClick: (e) => e.stopPropagation(),\n onMouseDown: (e) => e.stopPropagation(),\n onMouseUp: (e) => e.stopPropagation(),\n onKeyDown: (e) => e.stopPropagation(),\n onKeyUp: (e) => e.stopPropagation(),\n onFocus: (e) => e.stopPropagation(),\n onBlur: (e) => e.stopPropagation(),\n };\n\n const props = {\n ...preventEvents,\n 'data-measured-clone': true,\n };\n\n if (isValidElement(content)) {\n return cloneElement(content as unknown as ReactElement, props);\n }\n\n if (typeof content === 'string') {\n // eslint-disable-next-line react/jsx-props-no-spreading\n return <span {...props}>{content}</span>;\n }\n\n return content;\n};\n\ninterface UseMeasuredCloneOptions {\n content: ReactNode;\n}\n\nexport const useMeasuredClone = ({
|
|
1
|
+
{"version":3,"file":"element.js","names":["React","cloneElement","isValidElement","useEffect","useRef","useState","useElementSize","ref","shouldUseChildElement","shouldUseParentElement","size","setSize","target","current","parentElement","firstElementChild","updateSize","getBoundingClientRect","observer","ResizeObserver","entries","forEach","entry","contentRect","observe","disconnect","getClonedElement","content","preventEvents","onClick","e","stopPropagation","onMouseDown","onMouseUp","onKeyDown","onKeyUp","onFocus","onBlur","props","createElement","useMeasuredClone","shouldPreventTextWrapping","width","height","clonedElement","measure","offsetWidth","offsetHeight","measuredElement","style","position","opacity","pointerEvents","zIndex","visibility","useIsMeasuredClone","isClone","setIsClone","el","hasAttribute"],"sources":["../../../src/hooks/element.tsx"],"sourcesContent":["import React, {\n cloneElement,\n HTMLAttributes,\n isValidElement,\n MutableRefObject,\n ReactElement,\n ReactNode,\n useEffect,\n useRef,\n useState,\n} from 'react';\n\ninterface UseElementSizeOptions {\n shouldUseChildElement?: boolean;\n shouldUseParentElement?: boolean;\n}\n\nexport const useElementSize = (\n ref: MutableRefObject<HTMLDivElement | HTMLLabelElement | null>,\n { shouldUseChildElement = false, shouldUseParentElement = false }: UseElementSizeOptions = {},\n): DOMRectReadOnly | undefined => {\n const [size, setSize] = useState<DOMRectReadOnly>();\n\n useEffect(() => {\n let target = ref.current as HTMLElement | null;\n\n if (shouldUseParentElement) {\n target = ref.current?.parentElement as HTMLElement | null;\n }\n\n if (shouldUseChildElement) {\n target = ref.current?.firstElementChild as HTMLElement | null;\n }\n\n if (!target) return () => {};\n\n const updateSize = () => setSize(target.getBoundingClientRect());\n\n updateSize();\n\n const observer = new ResizeObserver((entries) => {\n entries.forEach((entry) => {\n if (entry.target === target) {\n setSize(entry.contentRect);\n }\n });\n });\n\n observer.observe(target);\n\n return () => observer.disconnect();\n }, [ref, shouldUseChildElement, shouldUseParentElement]);\n\n return size;\n};\n\nconst getClonedElement = (content: ReactNode) => {\n const preventEvents: Partial<HTMLAttributes<any>> = {\n onClick: (e) => e.stopPropagation(),\n onMouseDown: (e) => e.stopPropagation(),\n onMouseUp: (e) => e.stopPropagation(),\n onKeyDown: (e) => e.stopPropagation(),\n onKeyUp: (e) => e.stopPropagation(),\n onFocus: (e) => e.stopPropagation(),\n onBlur: (e) => e.stopPropagation(),\n };\n\n const props = {\n ...preventEvents,\n 'data-measured-clone': true,\n };\n\n if (isValidElement(content)) {\n return cloneElement(content as unknown as ReactElement, props);\n }\n\n if (typeof content === 'string') {\n // eslint-disable-next-line react/jsx-props-no-spreading\n return <span {...props}>{content}</span>;\n }\n\n return content;\n};\n\ninterface UseMeasuredCloneOptions {\n content: ReactNode;\n shouldPreventTextWrapping?: boolean;\n}\n\nexport const useMeasuredClone = ({\n content,\n shouldPreventTextWrapping = true,\n}: UseMeasuredCloneOptions) => {\n const ref = useRef<HTMLDivElement>(null);\n\n const [size, setSize] = useState({ width: 0, height: 0 });\n\n const clonedElement = getClonedElement(content);\n\n useEffect(() => {\n const measure = () => {\n if (!ref.current) return;\n\n const { offsetWidth: width, offsetHeight: height } = ref.current;\n\n setSize({ width: width + (shouldPreventTextWrapping ? 10 : 0), height });\n };\n\n measure();\n\n const observer = new ResizeObserver(measure);\n\n if (ref.current) observer.observe(ref.current);\n\n return () => observer.disconnect();\n }, [shouldPreventTextWrapping]);\n\n const measuredElement = (\n <div\n data-measured-clone=\"true\"\n ref={ref}\n style={{\n position: 'fixed',\n opacity: 0,\n pointerEvents: 'none',\n zIndex: -1,\n height: 'auto',\n width: 'auto',\n visibility: 'hidden',\n }}\n >\n {clonedElement}\n </div>\n );\n\n return {\n measuredElement,\n width: size.width,\n height: size.height,\n };\n};\n\nexport const useIsMeasuredClone = <T extends HTMLElement>() => {\n const ref = useRef<T | null>(null);\n\n const [isClone, setIsClone] = useState(false);\n\n useEffect(() => {\n if (!ref.current) return;\n\n let el: HTMLElement | null = ref.current;\n\n while (el) {\n if (el.hasAttribute('data-measured-clone')) {\n setIsClone(true);\n\n return;\n }\n\n el = el.parentElement;\n }\n\n setIsClone(false);\n }, []);\n\n return [isClone, ref] as const;\n};\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -31,6 +31,10 @@ export type ColorSchemeProviderProps = {
|
|
|
31
31
|
* Additional variables to extend the theme
|
|
32
32
|
*/
|
|
33
33
|
customVariables?: Record<string, string>;
|
|
34
|
+
/**
|
|
35
|
+
* An optional color for all icons
|
|
36
|
+
*/
|
|
37
|
+
iconColor?: string;
|
|
34
38
|
};
|
|
35
39
|
export interface Theme {
|
|
36
40
|
[key: string]: string;
|
|
@@ -3,6 +3,7 @@ import type { Theme } from '../ColorSchemeProvider';
|
|
|
3
3
|
export type ThemeOptions = {
|
|
4
4
|
colors?: Theme;
|
|
5
5
|
colorMode: ColorMode;
|
|
6
|
+
iconColor?: string;
|
|
6
7
|
color: string;
|
|
7
8
|
secondaryColor?: string;
|
|
8
9
|
designSettings?: ChaynsDesignSettings & {
|
|
@@ -13,7 +14,7 @@ export type ThemeOptions = {
|
|
|
13
14
|
theme?: Theme;
|
|
14
15
|
customVariables?: Record<string, string>;
|
|
15
16
|
};
|
|
16
|
-
export declare const useChaynsTheme: ({ colors, colorMode, color, secondaryColor, designSettings: designSettingsProp, paragraphFormat: paragraphFormatProp, siteId, theme, customVariables, }: ThemeOptions) => {
|
|
17
|
+
export declare const useChaynsTheme: ({ colors, colorMode, color, secondaryColor, designSettings: designSettingsProp, paragraphFormat: paragraphFormatProp, siteId, iconColor, theme, customVariables, }: ThemeOptions) => {
|
|
17
18
|
theme: Theme;
|
|
18
19
|
designSettings: ChaynsDesignSettings | undefined;
|
|
19
20
|
paragraphFormat: ChaynsParagraphFormat[];
|
|
@@ -6,8 +6,9 @@ interface UseElementSizeOptions {
|
|
|
6
6
|
export declare const useElementSize: (ref: MutableRefObject<HTMLDivElement | HTMLLabelElement | null>, { shouldUseChildElement, shouldUseParentElement }?: UseElementSizeOptions) => DOMRectReadOnly | undefined;
|
|
7
7
|
interface UseMeasuredCloneOptions {
|
|
8
8
|
content: ReactNode;
|
|
9
|
+
shouldPreventTextWrapping?: boolean;
|
|
9
10
|
}
|
|
10
|
-
export declare const useMeasuredClone: ({ content }: UseMeasuredCloneOptions) => {
|
|
11
|
+
export declare const useMeasuredClone: ({ content, shouldPreventTextWrapping, }: UseMeasuredCloneOptions) => {
|
|
11
12
|
measuredElement: React.JSX.Element;
|
|
12
13
|
width: number;
|
|
13
14
|
height: number;
|
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.1275",
|
|
4
4
|
"description": "A set of beautiful React components for developing your own applications with chayns.",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"browserslist": [
|
|
@@ -53,22 +53,22 @@
|
|
|
53
53
|
},
|
|
54
54
|
"devDependencies": {
|
|
55
55
|
"@babel/cli": "^7.28.3",
|
|
56
|
-
"@babel/core": "^7.28.
|
|
56
|
+
"@babel/core": "^7.28.4",
|
|
57
57
|
"@babel/preset-env": "^7.28.3",
|
|
58
58
|
"@babel/preset-react": "^7.27.1",
|
|
59
59
|
"@babel/preset-typescript": "^7.27.1",
|
|
60
|
-
"@types/react": "^18.3.
|
|
60
|
+
"@types/react": "^18.3.26",
|
|
61
61
|
"@types/react-dom": "^18.3.7",
|
|
62
62
|
"@types/styled-components": "^5.1.34",
|
|
63
63
|
"@types/uuid": "^10.0.0",
|
|
64
64
|
"babel-loader": "^9.2.1",
|
|
65
|
-
"chayns-api": "^2.4.
|
|
65
|
+
"chayns-api": "^2.4.24",
|
|
66
66
|
"cross-env": "^7.0.3",
|
|
67
67
|
"lerna": "^8.2.4",
|
|
68
68
|
"react": "^18.3.1",
|
|
69
69
|
"react-dom": "^18.3.1",
|
|
70
70
|
"styled-components": "^6.1.19",
|
|
71
|
-
"typescript": "^5.9.
|
|
71
|
+
"typescript": "^5.9.3"
|
|
72
72
|
},
|
|
73
73
|
"dependencies": {
|
|
74
74
|
"@chayns/colors": "^2.0.0",
|
|
@@ -86,5 +86,5 @@
|
|
|
86
86
|
"publishConfig": {
|
|
87
87
|
"access": "public"
|
|
88
88
|
},
|
|
89
|
-
"gitHead": "
|
|
89
|
+
"gitHead": "ecf3c31badfad1db370f174fc09ab93fa72c7561"
|
|
90
90
|
}
|