@chayns-components/core 5.0.0-beta.987 → 5.0.0-beta.990

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.
Files changed (14) hide show
  1. package/lib/cjs/components/combobox/ComboBox.styles.js +3 -0
  2. package/lib/cjs/components/combobox/ComboBox.styles.js.map +1 -1
  3. package/lib/cjs/components/page-provider/PageProvider.js +3 -10
  4. package/lib/cjs/components/page-provider/PageProvider.js.map +1 -1
  5. package/lib/cjs/utils/pageProvider.js +25 -1
  6. package/lib/cjs/utils/pageProvider.js.map +1 -1
  7. package/lib/esm/components/combobox/ComboBox.styles.js +32 -26
  8. package/lib/esm/components/combobox/ComboBox.styles.js.map +1 -1
  9. package/lib/esm/components/page-provider/PageProvider.js +5 -10
  10. package/lib/esm/components/page-provider/PageProvider.js.map +1 -1
  11. package/lib/esm/utils/pageProvider.js +24 -1
  12. package/lib/esm/utils/pageProvider.js.map +1 -1
  13. package/lib/types/utils/pageProvider.d.ts +1 -0
  14. package/package.json +2 -2
package/lib/cjs/components/combobox/ComboBox.styles.js CHANGED
@@ -119,6 +119,9 @@ const StyledComboBoxPrefix = exports.StyledComboBoxPrefix = _styledComponents.de
119
119
  padding-right: 5px;
120
120
  `;
121
121
  const StyledComboBoxInput = exports.StyledComboBoxInput = _styledComponents.default.input`
122
+ color: ${({
123
+ theme
124
+ }) => theme.text};
122
125
  border: none;
123
126
  background-color: transparent;
124
127
  width: 100%;
package/lib/cjs/components/combobox/ComboBox.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ComboBox.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_comboBox","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledComboBox","exports","styled","div","$shouldUseFullWidth","$minWidth","$shouldUseCurrentItemWidth","css","StyledComboBoxHeader","$isDisabled","theme","$shouldChangeColor","colorMode","$shouldShowBigImage","$isOpen","$direction","ComboBoxDirection","BOTTOM","$isTouch","StyledComboBoxPlaceholder","text","$shouldReduceOpacity","StyledComboBoxPlaceholderText","StyledComboBoxPrefixAndPlaceholderWrapper","StyledComboBoxPrefix","StyledComboBoxInput","input","StyledComboBoxPlaceholderImage","img","$shouldShowRoundImage","StyledComboBoxIconWrapper","StyledMotionComboBoxBody","motion","$maxHeight","$overflowY","$browser","StyledComboBoxTopic"],"sources":["../../../../src/components/combobox/ComboBox.styles.ts"],"sourcesContent":["import type { Browser } from 'detect-browser';\nimport { motion } from 'framer-motion';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport { ComboBoxDirection } from '../../types/comboBox';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { ComboBoxProps } from './ComboBox';\n\ntype StyledComboBoxProps = WithTheme<{\n $minWidth?: number;\n $shouldUseFullWidth: ComboBoxProps['shouldUseFullWidth'];\n $shouldUseCurrentItemWidth: ComboBoxProps['shouldUseCurrentItemWidth'];\n}>;\n\nexport const StyledComboBox = styled.div<StyledComboBoxProps>`\n user-select: none;\n position: relative;\n\n ${({ $shouldUseFullWidth, $minWidth, $shouldUseCurrentItemWidth }) => {\n if (typeof $minWidth !== 'number') {\n return css`\n width: fit-content;\n `;\n }\n\n if ($shouldUseFullWidth) {\n return css`\n min-width: ${$minWidth}px;\n width: 100%;\n `;\n }\n\n if ($shouldUseCurrentItemWidth) {\n return '';\n }\n\n return css`\n min-width: ${$minWidth}px;\n max-width: ${$minWidth}px;\n `;\n }}\n`;\n\ntype StyledComboBoxHeaderProps = WithTheme<{\n $isTouch: boolean;\n $isOpen: boolean;\n $direction: ComboBoxDirection;\n $isDisabled?: boolean;\n $shouldChangeColor: boolean;\n $shouldShowBigImage: ComboBoxProps['shouldShowBigImage'];\n}>;\n\nexport const StyledComboBoxHeader = styled.div<StyledComboBoxHeaderProps>`\n display: flex;\n justify-content: space-between;\n border: 1px solid rgba(160, 160, 160, 0.3);\n padding: 4px 10px;\n cursor: ${({ $isDisabled }) => (!$isDisabled ? 'pointer' : 'default')};\n background-color: ${({ theme, $shouldChangeColor }: StyledComboBoxHeaderProps) =>\n theme.colorMode === 'classic' || $shouldChangeColor ? theme['000'] : theme['100']};\n opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n transition: background-color 0.2s ease-in-out;\n\n ${({ $shouldShowBigImage }) =>\n $shouldShowBigImage &&\n css`\n height: 42px;\n `}\n\n ${({ $isOpen, $direction }) => {\n if ($isOpen) {\n return $direction === ComboBoxDirection.BOTTOM\n ? css`\n border-top-left-radius: 3px;\n border-top-right-radius: 3px;\n `\n : css`\n border-bottom-left-radius: 3px;\n border-bottom-right-radius: 3px;\n `;\n }\n\n return css`\n border-radius: 3px;\n `;\n }}\n\n ${({ $isTouch, $isDisabled, theme }: StyledComboBoxHeaderProps) =>\n !$isTouch &&\n !$isDisabled &&\n css`\n &:hover {\n background-color: ${theme['secondary-102']};\n }\n `}\n`;\n\ntype StyledComboBoxPlaceholderProps = WithTheme<{ $shouldReduceOpacity: boolean }>;\n\nexport const StyledComboBoxPlaceholder = styled.div<StyledComboBoxPlaceholderProps>`\n align-items: center;\n color: ${({ theme }: StyledComboBoxPlaceholderProps) => theme.text};\n display: flex;\n flex: 1 1 auto;\n gap: 10px;\n min-width: 0;\n opacity: ${({ $shouldReduceOpacity }) => ($shouldReduceOpacity ? 0.5 : 1)};\n`;\n\nexport const StyledComboBoxPlaceholderText = styled.div`\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n`;\n\nexport const StyledComboBoxPrefixAndPlaceholderWrapper = styled.div`\n align-items: center;\n display: flex;\n flex: 1 1 auto;\n min-width: 0;\n`;\n\nexport const StyledComboBoxPrefix = styled.div`\n flex: 0 0 auto;\n min-width: 32px;\n padding-right: 5px;\n`;\n\nexport const StyledComboBoxInput = styled.input`\n border: none;\n background-color: transparent;\n width: 100%;\n`;\n\ntype StyledComboBoxPlaceholderImageProps = WithTheme<{\n $shouldShowBigImage: ComboBoxProps['shouldShowBigImage'];\n $shouldShowRoundImage: ComboBoxProps['shouldShowRoundImage'];\n}>;\n\nexport const StyledComboBoxPlaceholderImage = styled.img<StyledComboBoxPlaceholderImageProps>`\n box-shadow: 0 0 0 1px\n rgba(${({ theme }: StyledComboBoxPlaceholderImageProps) => theme['009-rgb']}, 0.15);\n height: ${({ $shouldShowBigImage }) => ($shouldShowBigImage ? '32px' : '22px')};\n width: ${({ $shouldShowBigImage }) => ($shouldShowBigImage ? '32px' : '22px')};\n\n ${({ $shouldShowRoundImage }) =>\n $shouldShowRoundImage &&\n css`\n border-radius: 50%;\n `}\n`;\n\nexport const StyledComboBoxIconWrapper = styled.div`\n align-items: center;\n display: flex;\n margin-left: 5px;\n`;\n\ntype StyledComboBoxBodyProps = WithTheme<{\n $overflowY: CSSProperties['overflowY'];\n $maxHeight: CSSProperties['maxHeight'];\n $direction: ComboBoxDirection;\n $browser: Browser | 'bot' | null | undefined;\n $minWidth: number;\n $shouldUseCurrentItemWidth: boolean;\n}>;\n\nexport const StyledMotionComboBoxBody = styled(motion.div)<StyledComboBoxBodyProps>`\n background: ${({ theme }: StyledComboBoxBodyProps) => theme['100']};\n display: flex;\n position: absolute;\n z-index: 4;\n flex-direction: column;\n border: 1px solid rgba(160, 160, 160, 0.3);\n cursor: pointer;\n max-height: ${({ $maxHeight }) => $maxHeight};\n overflow-y: ${({ $overflowY }) => $overflowY};\n overflow-x: hidden;\n min-width: ${({ $minWidth, $overflowY }) => $minWidth - ($overflowY === 'scroll' ? 5 : 0)}px;\n\n ${({ $minWidth, $overflowY, $shouldUseCurrentItemWidth }) =>\n !$shouldUseCurrentItemWidth &&\n css`\n max-width: ${$minWidth - ($overflowY === 'scroll' ? 5 : 0)}px;\n `}\n\n ${({ $direction }) => {\n if ($direction === ComboBoxDirection.BOTTOM) {\n return css`\n border-bottom-left-radius: 3px;\n border-bottom-right-radius: 3px;\n box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.2);\n `;\n }\n\n return css`\n border-top-left-radius: 3px;\n border-top-right-radius: 3px;\n box-shadow: 0 -3px 10px 0 rgba(0, 0, 0, 0.2);\n `;\n }}\n\n // Styles for custom scrollbar\n ${({ $browser, theme }: StyledComboBoxBodyProps) =>\n $browser === 'firefox'\n ? css`\n scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;\n scrollbar-width: thin;\n `\n : css`\n &::-webkit-scrollbar {\n width: 5px;\n }\n\n &::-webkit-scrollbar-track {\n background-color: transparent;\n }\n\n &::-webkit-scrollbar-button {\n background-color: transparent;\n height: 5px;\n }\n\n &::-webkit-scrollbar-thumb {\n background-color: rgba(${theme['text-rgb']}, 0.15);\n border-radius: 20px;\n }\n `}\n`;\n\ntype StyledComboBoxTopicProps = WithTheme<unknown>;\n\nexport const StyledComboBoxTopic = styled.div`\n align-items: center;\n color: rgba(${({ theme }: StyledComboBoxTopicProps) => theme['text-rgb']}, 0.65);\n position: sticky;\n top: 0;\n border: black 5px;\n cursor: default;\n font-weight: bold;\n display: flex;\n gap: 10px;\n z-index: 10;\n padding: 4px 10px;\n background-color: ${({ theme }: StyledComboBoxTopicProps) => theme['secondary-101']};\n`;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"ComboBox.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_comboBox","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledComboBox","exports","styled","div","$shouldUseFullWidth","$minWidth","$shouldUseCurrentItemWidth","css","StyledComboBoxHeader","$isDisabled","theme","$shouldChangeColor","colorMode","$shouldShowBigImage","$isOpen","$direction","ComboBoxDirection","BOTTOM","$isTouch","StyledComboBoxPlaceholder","text","$shouldReduceOpacity","StyledComboBoxPlaceholderText","StyledComboBoxPrefixAndPlaceholderWrapper","StyledComboBoxPrefix","StyledComboBoxInput","input","StyledComboBoxPlaceholderImage","img","$shouldShowRoundImage","StyledComboBoxIconWrapper","StyledMotionComboBoxBody","motion","$maxHeight","$overflowY","$browser","StyledComboBoxTopic"],"sources":["../../../../src/components/combobox/ComboBox.styles.ts"],"sourcesContent":["import type { Browser } from 'detect-browser';\nimport { motion } from 'framer-motion';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport { ComboBoxDirection } from '../../types/comboBox';\nimport type { Theme, WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { ComboBoxProps } from './ComboBox';\n\ntype StyledComboBoxProps = WithTheme<{\n $minWidth?: number;\n $shouldUseFullWidth: ComboBoxProps['shouldUseFullWidth'];\n $shouldUseCurrentItemWidth: ComboBoxProps['shouldUseCurrentItemWidth'];\n}>;\n\nexport const StyledComboBox = styled.div<StyledComboBoxProps>`\n user-select: none;\n position: relative;\n\n ${({ $shouldUseFullWidth, $minWidth, $shouldUseCurrentItemWidth }) => {\n if (typeof $minWidth !== 'number') {\n return css`\n width: fit-content;\n `;\n }\n\n if ($shouldUseFullWidth) {\n return css`\n min-width: ${$minWidth}px;\n width: 100%;\n `;\n }\n\n if ($shouldUseCurrentItemWidth) {\n return '';\n }\n\n return css`\n min-width: ${$minWidth}px;\n max-width: ${$minWidth}px;\n `;\n }}\n`;\n\ntype StyledComboBoxHeaderProps = WithTheme<{\n $isTouch: boolean;\n $isOpen: boolean;\n $direction: ComboBoxDirection;\n $isDisabled?: boolean;\n $shouldChangeColor: boolean;\n $shouldShowBigImage: ComboBoxProps['shouldShowBigImage'];\n}>;\n\nexport const StyledComboBoxHeader = styled.div<StyledComboBoxHeaderProps>`\n display: flex;\n justify-content: space-between;\n border: 1px solid rgba(160, 160, 160, 0.3);\n padding: 4px 10px;\n cursor: ${({ $isDisabled }) => (!$isDisabled ? 'pointer' : 'default')};\n background-color: ${({ theme, $shouldChangeColor }: StyledComboBoxHeaderProps) =>\n theme.colorMode === 'classic' || $shouldChangeColor ? theme['000'] : theme['100']};\n opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n transition: background-color 0.2s ease-in-out;\n\n ${({ $shouldShowBigImage }) =>\n $shouldShowBigImage &&\n css`\n height: 42px;\n `}\n\n ${({ $isOpen, $direction }) => {\n if ($isOpen) {\n return $direction === ComboBoxDirection.BOTTOM\n ? css`\n border-top-left-radius: 3px;\n border-top-right-radius: 3px;\n `\n : css`\n border-bottom-left-radius: 3px;\n border-bottom-right-radius: 3px;\n `;\n }\n\n return css`\n border-radius: 3px;\n `;\n }}\n\n ${({ $isTouch, $isDisabled, theme }: StyledComboBoxHeaderProps) =>\n !$isTouch &&\n !$isDisabled &&\n css`\n &:hover {\n background-color: ${theme['secondary-102']};\n }\n `}\n`;\n\ntype StyledComboBoxPlaceholderProps = WithTheme<{ $shouldReduceOpacity: boolean }>;\n\nexport const StyledComboBoxPlaceholder = styled.div<StyledComboBoxPlaceholderProps>`\n align-items: center;\n color: ${({ theme }: StyledComboBoxPlaceholderProps) => theme.text};\n display: flex;\n flex: 1 1 auto;\n gap: 10px;\n min-width: 0;\n opacity: ${({ $shouldReduceOpacity }) => ($shouldReduceOpacity ? 0.5 : 1)};\n`;\n\nexport const StyledComboBoxPlaceholderText = styled.div`\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n`;\n\nexport const StyledComboBoxPrefixAndPlaceholderWrapper = styled.div`\n align-items: center;\n display: flex;\n flex: 1 1 auto;\n min-width: 0;\n`;\n\nexport const StyledComboBoxPrefix = styled.div`\n flex: 0 0 auto;\n min-width: 32px;\n padding-right: 5px;\n`;\n\nexport const StyledComboBoxInput = styled.input`\n color: ${({ theme }: { theme: Theme }) => theme.text};\n border: none;\n background-color: transparent;\n width: 100%;\n`;\n\ntype StyledComboBoxPlaceholderImageProps = WithTheme<{\n $shouldShowBigImage: ComboBoxProps['shouldShowBigImage'];\n $shouldShowRoundImage: ComboBoxProps['shouldShowRoundImage'];\n}>;\n\nexport const StyledComboBoxPlaceholderImage = styled.img<StyledComboBoxPlaceholderImageProps>`\n box-shadow: 0 0 0 1px\n rgba(${({ theme }: StyledComboBoxPlaceholderImageProps) => theme['009-rgb']}, 0.15);\n height: ${({ $shouldShowBigImage }) => ($shouldShowBigImage ? '32px' : '22px')};\n width: ${({ $shouldShowBigImage }) => ($shouldShowBigImage ? '32px' : '22px')};\n\n ${({ $shouldShowRoundImage }) =>\n $shouldShowRoundImage &&\n css`\n border-radius: 50%;\n `}\n`;\n\nexport const StyledComboBoxIconWrapper = styled.div`\n align-items: center;\n display: flex;\n margin-left: 5px;\n`;\n\ntype StyledComboBoxBodyProps = WithTheme<{\n $overflowY: CSSProperties['overflowY'];\n $maxHeight: CSSProperties['maxHeight'];\n $direction: ComboBoxDirection;\n $browser: Browser | 'bot' | null | undefined;\n $minWidth: number;\n $shouldUseCurrentItemWidth: boolean;\n}>;\n\nexport const StyledMotionComboBoxBody = styled(motion.div)<StyledComboBoxBodyProps>`\n background: ${({ theme }: StyledComboBoxBodyProps) => theme['100']};\n display: flex;\n position: absolute;\n z-index: 4;\n flex-direction: column;\n border: 1px solid rgba(160, 160, 160, 0.3);\n cursor: pointer;\n max-height: ${({ $maxHeight }) => $maxHeight};\n overflow-y: ${({ $overflowY }) => $overflowY};\n overflow-x: hidden;\n min-width: ${({ $minWidth, $overflowY }) => $minWidth - ($overflowY === 'scroll' ? 5 : 0)}px;\n\n ${({ $minWidth, $overflowY, $shouldUseCurrentItemWidth }) =>\n !$shouldUseCurrentItemWidth &&\n css`\n max-width: ${$minWidth - ($overflowY === 'scroll' ? 5 : 0)}px;\n `}\n\n ${({ $direction }) => {\n if ($direction === ComboBoxDirection.BOTTOM) {\n return css`\n border-bottom-left-radius: 3px;\n border-bottom-right-radius: 3px;\n box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.2);\n `;\n }\n\n return css`\n border-top-left-radius: 3px;\n border-top-right-radius: 3px;\n box-shadow: 0 -3px 10px 0 rgba(0, 0, 0, 0.2);\n `;\n }}\n\n // Styles for custom scrollbar\n ${({ $browser, theme }: StyledComboBoxBodyProps) =>\n $browser === 'firefox'\n ? css`\n scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;\n scrollbar-width: thin;\n `\n : css`\n &::-webkit-scrollbar {\n width: 5px;\n }\n\n &::-webkit-scrollbar-track {\n background-color: transparent;\n }\n\n &::-webkit-scrollbar-button {\n background-color: transparent;\n height: 5px;\n }\n\n &::-webkit-scrollbar-thumb {\n background-color: rgba(${theme['text-rgb']}, 0.15);\n border-radius: 20px;\n }\n `}\n`;\n\ntype StyledComboBoxTopicProps = WithTheme<unknown>;\n\nexport const StyledComboBoxTopic = styled.div`\n align-items: center;\n color: rgba(${({ theme }: StyledComboBoxTopicProps) => theme['text-rgb']}, 0.65);\n position: sticky;\n top: 0;\n border: black 5px;\n cursor: default;\n font-weight: bold;\n display: flex;\n gap: 10px;\n z-index: 10;\n padding: 4px 10px;\n background-color: ${({ theme }: StyledComboBoxTopicProps) => theme['secondary-101']};\n`;\n"],"mappings":"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","ignoreList":[]}
package/lib/cjs/components/page-provider/PageProvider.js CHANGED
@@ -5,14 +5,12 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.default = void 0;
7
7
  var _chaynsApi = require("chayns-api");
8
- var _react = _interopRequireWildcard(require("react"));
8
+ var _react = _interopRequireDefault(require("react"));
9
9
  var _styledComponents = require("styled-components");
10
10
  var _pageProvider = require("../../utils/pageProvider");
11
11
  var _ColorSchemeProvider = _interopRequireDefault(require("../color-scheme-provider/ColorSchemeProvider"));
12
12
  var _PageProvider = require("./PageProvider.styles");
13
13
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
14
- function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
15
- function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
16
14
  const GlobalStyle = (0, _styledComponents.createGlobalStyle)`
17
15
  *, *::before, *::after {
18
16
  box-sizing: border-box;
@@ -33,13 +31,8 @@ const PageProvider = ({
33
31
  const {
34
32
  runtimeEnvironment
35
33
  } = (0, _chaynsApi.getEnvironment)();
36
- const shouldUsePadding = !shouldRemovePadding && ![4, 5, 6].includes(runtimeEnvironment);
37
- const [usableHeight, setUsableHeight] = (0, _react.useState)(0);
38
- (0, _react.useEffect)(() => {
39
- void (0, _pageProvider.getUsableHeight)(shouldRemovePadding).then(height => {
40
- setUsableHeight(height);
41
- });
42
- }, [shouldRemovePadding]);
34
+ const shouldUsePadding = !shouldRemovePadding && ![_chaynsApi.RuntimeEnviroment.IntercomPlugin, _chaynsApi.RuntimeEnviroment.PagemakerPlugin, 6].includes(runtimeEnvironment);
35
+ const usableHeight = (0, _pageProvider.useUsableHeight)(shouldUsePadding);
43
36
  return /*#__PURE__*/_react.default.createElement(_PageProvider.StyledPageProvider, {
44
37
  className: "page-provider",
45
38
  $shouldUsePadding: shouldUsePadding,
package/lib/cjs/components/page-provider/PageProvider.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"PageProvider.js","names":["_chaynsApi","require","_react","_interopRequireWildcard","_styledComponents","_pageProvider","_ColorSchemeProvider","_interopRequireDefault","_PageProvider","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","GlobalStyle","createGlobalStyle","PageProvider","children","color","colorMode","cssVariables","secondaryColor","siteId","style","designSettings","shouldRemovePadding","shouldUseUsableHeight","runtimeEnvironment","getEnvironment","shouldUsePadding","includes","usableHeight","setUsableHeight","useState","useEffect","getUsableHeight","then","height","createElement","StyledPageProvider","className","$shouldUsePadding","$usableHeight","undefined","displayName","_default","exports"],"sources":["../../../../src/components/page-provider/PageProvider.tsx"],"sourcesContent":["import { getEnvironment } from 'chayns-api';\nimport React, { FC, useEffect, useState } from 'react';\nimport { createGlobalStyle } from 'styled-components';\nimport { getUsableHeight } 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 cssVariables = {},\n secondaryColor,\n siteId,\n style = {},\n designSettings,\n shouldRemovePadding,\n shouldUseUsableHeight,\n}) => {\n const { runtimeEnvironment } = getEnvironment();\n const shouldUsePadding =\n !shouldRemovePadding && ![4, 5, 6].includes(runtimeEnvironment as number);\n const [usableHeight, setUsableHeight] = useState(0);\n\n useEffect(() => {\n void getUsableHeight(shouldRemovePadding).then((height) => {\n setUsableHeight(height);\n });\n }, [shouldRemovePadding]);\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 style={shouldUseUsableHeight ? { ...style, height: '100%' } : style}\n siteId={siteId}\n designSettings={designSettings}\n cssVariables={cssVariables}\n >\n {children}\n </ColorSchemeProvider>\n <GlobalStyle />\n </StyledPageProvider>\n );\n};\nPageProvider.displayName = 'PageProvider';\n\nexport default PageProvider;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"PageProvider.js","names":["_chaynsApi","require","_react","_interopRequireDefault","_styledComponents","_pageProvider","_ColorSchemeProvider","_PageProvider","e","__esModule","default","GlobalStyle","createGlobalStyle","PageProvider","children","color","colorMode","cssVariables","secondaryColor","siteId","style","designSettings","shouldRemovePadding","shouldUseUsableHeight","runtimeEnvironment","getEnvironment","shouldUsePadding","RuntimeEnviroment","IntercomPlugin","PagemakerPlugin","includes","usableHeight","useUsableHeight","createElement","StyledPageProvider","className","$shouldUsePadding","$usableHeight","undefined","height","displayName","_default","exports"],"sources":["../../../../src/components/page-provider/PageProvider.tsx"],"sourcesContent":["import { getEnvironment, RuntimeEnviroment } 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 cssVariables = {},\n secondaryColor,\n siteId,\n style = {},\n designSettings,\n shouldRemovePadding,\n shouldUseUsableHeight,\n}) => {\n const { runtimeEnvironment } = getEnvironment();\n const shouldUsePadding =\n !shouldRemovePadding &&\n ![RuntimeEnviroment.IntercomPlugin, RuntimeEnviroment.PagemakerPlugin, 6].includes(\n runtimeEnvironment as number,\n );\n\n const usableHeight = useUsableHeight(shouldUsePadding);\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 style={shouldUseUsableHeight ? { ...style, height: '100%' } : style}\n siteId={siteId}\n designSettings={designSettings}\n cssVariables={cssVariables}\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,YAAY,GAAG,CAAC,CAAC;EACjBC,cAAc;EACdC,MAAM;EACNC,KAAK,GAAG,CAAC,CAAC;EACVC,cAAc;EACdC,mBAAmB;EACnBC;AACJ,CAAC,KAAK;EACF,MAAM;IAAEC;EAAmB,CAAC,GAAG,IAAAC,yBAAc,EAAC,CAAC;EAC/C,MAAMC,gBAAgB,GAClB,CAACJ,mBAAmB,IACpB,CAAC,CAACK,4BAAiB,CAACC,cAAc,EAAED,4BAAiB,CAACE,eAAe,EAAE,CAAC,CAAC,CAACC,QAAQ,CAC9EN,kBACJ,CAAC;EAEL,MAAMO,YAAY,GAAG,IAAAC,6BAAe,EAACN,gBAAgB,CAAC;EAEtD,oBACIxB,MAAA,CAAAQ,OAAA,CAAAuB,aAAA,CAAC1B,aAAA,CAAA2B,kBAAkB;IACfC,SAAS,EAAC,eAAe;IACzBC,iBAAiB,EAAEV,gBAAiB;IACpCW,aAAa,EAAEd,qBAAqB,GAAGQ,YAAY,GAAGO;EAAU,gBAEhEpC,MAAA,CAAAQ,OAAA,CAAAuB,aAAA,CAAC3B,oBAAA,CAAAI,OAAmB;IAChBK,KAAK,EAAEA,KAAM;IACbG,cAAc,EAAEA,cAAe;IAC/BF,SAAS,EAAEA,SAAU;IACrBI,KAAK,EAAEG,qBAAqB,GAAG;MAAE,GAAGH,KAAK;MAAEmB,MAAM,EAAE;IAAO,CAAC,GAAGnB,KAAM;IACpED,MAAM,EAAEA,MAAO;IACfE,cAAc,EAAEA,cAAe;IAC/BJ,YAAY,EAAEA;EAAa,GAE1BH,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":[]}
package/lib/cjs/utils/pageProvider.js CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.getUsableHeight = exports.getPagePadding = void 0;
6
+ exports.useUsableHeight = exports.getUsableHeight = exports.getPagePadding = void 0;
7
7
  var _chaynsApi = require("chayns-api");
8
8
  var _pageProvider = require("../constants/pageProvider");
9
9
  const getPagePadding = () => {
@@ -92,4 +92,28 @@ const getUsableHeight = async shouldRemovePadding => {
92
92
  return usableHeight;
93
93
  };
94
94
  exports.getUsableHeight = getUsableHeight;
95
+ const useUsableHeight = shouldRemovePadding => {
96
+ let usableHeight;
97
+ const {
98
+ bottomBarHeight,
99
+ offsetTop,
100
+ windowHeight
101
+ } = (0, _chaynsApi.useWindowMetrics)();
102
+ const {
103
+ bottom,
104
+ top
105
+ } = shouldRemovePadding ? {
106
+ bottom: 0,
107
+ top: 0
108
+ } : getPageProviderInformation();
109
+ usableHeight = windowHeight - bottom - top;
110
+ if (bottomBarHeight) {
111
+ usableHeight -= bottomBarHeight;
112
+ }
113
+ if (offsetTop) {
114
+ usableHeight -= offsetTop;
115
+ }
116
+ return usableHeight;
117
+ };
118
+ exports.useUsableHeight = useUsableHeight;
95
119
  //# sourceMappingURL=pageProvider.js.map
package/lib/cjs/utils/pageProvider.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"pageProvider.js","names":["_chaynsApi","require","_pageProvider","getPagePadding","runtimeEnvironment","getEnvironment","includes","matchMedia","PAGE_BREAKPOINTS","desktop","matches","exports","getPageProviderInformation","padding","split","parseValue","value","parsed","parseInt","replace","Number","isNaN","length","top","right","bottom","left","vertical","horizontal","map","getUsableHeight","shouldRemovePadding","usableHeight","bottomBarHeight","offsetTop","windowHeight","getWindowMetrics"],"sources":["../../../src/utils/pageProvider.ts"],"sourcesContent":["import { getEnvironment, getWindowMetrics } from 'chayns-api';\nimport { PAGE_BREAKPOINTS } from '../constants/pageProvider';\n\nexport const getPagePadding = () => {\n const { runtimeEnvironment } = getEnvironment();\n\n if (typeof runtimeEnvironment === 'number' && [4, 5].includes(runtimeEnvironment)) {\n return '0';\n }\n\n if (matchMedia(PAGE_BREAKPOINTS.desktop).matches) {\n return '35px 43px 30px';\n }\n\n return '15px 10px 20px';\n};\n\ntype PaddingValues = {\n top: number;\n right: number;\n bottom: number;\n left: number;\n};\n\nconst getPageProviderInformation = (): PaddingValues => {\n const padding = getPagePadding().split(' ');\n\n const parseValue = (value: string): number => {\n const parsed = parseInt(value.replace('px', ''), 10);\n return Number.isNaN(parsed) ? 0 : parsed;\n };\n\n if (padding.length === 1) {\n const value = parseValue(padding[0] ?? '');\n return { top: value, right: value, bottom: value, left: value };\n }\n\n if (padding.length === 2) {\n const [vertical, horizontal] = padding.map(parseValue);\n return {\n top: vertical ?? 0,\n right: horizontal ?? 0,\n bottom: vertical ?? 0,\n left: horizontal ?? 0,\n };\n }\n\n if (padding.length === 3) {\n const [top, horizontal, bottom] = padding.map(parseValue);\n return {\n top: top ?? 0,\n right: horizontal ?? 0,\n bottom: bottom ?? 0,\n left: horizontal ?? 0,\n };\n }\n\n if (padding.length === 4) {\n const [top, right, bottom, left] = padding.map(parseValue);\n return { top: top ?? 0, right: right ?? 0, bottom: bottom ?? 0, left: left ?? 0 };\n }\n\n return { top: 0, right: 0, bottom: 0, left: 0 };\n};\n\nexport const getUsableHeight = async (shouldRemovePadding?: boolean) => {\n let usableHeight;\n\n const { bottomBarHeight, offsetTop, windowHeight } = await getWindowMetrics();\n\n const { bottom, top } = shouldRemovePadding\n ? { bottom: 0, top: 0 }\n : getPageProviderInformation();\n\n usableHeight = windowHeight - bottom - top;\n\n if (bottomBarHeight) {\n usableHeight -= bottomBarHeight;\n }\n\n if (offsetTop) {\n usableHeight -= offsetTop;\n }\n\n return usableHeight;\n};\n"],"mappings":";;;;;;AAAA,IAAAA,UAAA,GAAAC,OAAA;AACA,IAAAC,aAAA,GAAAD,OAAA;AAEO,MAAME,cAAc,GAAGA,CAAA,KAAM;EAChC,MAAM;IAAEC;EAAmB,CAAC,GAAG,IAAAC,yBAAc,EAAC,CAAC;EAE/C,IAAI,OAAOD,kBAAkB,KAAK,QAAQ,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,CAACE,QAAQ,CAACF,kBAAkB,CAAC,EAAE;IAC/E,OAAO,GAAG;EACd;EAEA,IAAIG,UAAU,CAACC,8BAAgB,CAACC,OAAO,CAAC,CAACC,OAAO,EAAE;IAC9C,OAAO,gBAAgB;EAC3B;EAEA,OAAO,gBAAgB;AAC3B,CAAC;AAACC,OAAA,CAAAR,cAAA,GAAAA,cAAA;AASF,MAAMS,0BAA0B,GAAGA,CAAA,KAAqB;EACpD,MAAMC,OAAO,GAAGV,cAAc,CAAC,CAAC,CAACW,KAAK,CAAC,GAAG,CAAC;EAE3C,MAAMC,UAAU,GAAIC,KAAa,IAAa;IAC1C,MAAMC,MAAM,GAAGC,QAAQ,CAACF,KAAK,CAACG,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC;IACpD,OAAOC,MAAM,CAACC,KAAK,CAACJ,MAAM,CAAC,GAAG,CAAC,GAAGA,MAAM;EAC5C,CAAC;EAED,IAAIJ,OAAO,CAACS,MAAM,KAAK,CAAC,EAAE;IACtB,MAAMN,KAAK,GAAGD,UAAU,CAACF,OAAO,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;IAC1C,OAAO;MAAEU,GAAG,EAAEP,KAAK;MAAEQ,KAAK,EAAER,KAAK;MAAES,MAAM,EAAET,KAAK;MAAEU,IAAI,EAAEV;IAAM,CAAC;EACnE;EAEA,IAAIH,OAAO,CAACS,MAAM,KAAK,CAAC,EAAE;IACtB,MAAM,CAACK,QAAQ,EAAEC,UAAU,CAAC,GAAGf,OAAO,CAACgB,GAAG,CAACd,UAAU,CAAC;IACtD,OAAO;MACHQ,GAAG,EAAEI,QAAQ,IAAI,CAAC;MAClBH,KAAK,EAAEI,UAAU,IAAI,CAAC;MACtBH,MAAM,EAAEE,QAAQ,IAAI,CAAC;MACrBD,IAAI,EAAEE,UAAU,IAAI;IACxB,CAAC;EACL;EAEA,IAAIf,OAAO,CAACS,MAAM,KAAK,CAAC,EAAE;IACtB,MAAM,CAACC,GAAG,EAAEK,UAAU,EAAEH,MAAM,CAAC,GAAGZ,OAAO,CAACgB,GAAG,CAACd,UAAU,CAAC;IACzD,OAAO;MACHQ,GAAG,EAAEA,GAAG,IAAI,CAAC;MACbC,KAAK,EAAEI,UAAU,IAAI,CAAC;MACtBH,MAAM,EAAEA,MAAM,IAAI,CAAC;MACnBC,IAAI,EAAEE,UAAU,IAAI;IACxB,CAAC;EACL;EAEA,IAAIf,OAAO,CAACS,MAAM,KAAK,CAAC,EAAE;IACtB,MAAM,CAACC,GAAG,EAAEC,KAAK,EAAEC,MAAM,EAAEC,IAAI,CAAC,GAAGb,OAAO,CAACgB,GAAG,CAACd,UAAU,CAAC;IAC1D,OAAO;MAAEQ,GAAG,EAAEA,GAAG,IAAI,CAAC;MAAEC,KAAK,EAAEA,KAAK,IAAI,CAAC;MAAEC,MAAM,EAAEA,MAAM,IAAI,CAAC;MAAEC,IAAI,EAAEA,IAAI,IAAI;IAAE,CAAC;EACrF;EAEA,OAAO;IAAEH,GAAG,EAAE,CAAC;IAAEC,KAAK,EAAE,CAAC;IAAEC,MAAM,EAAE,CAAC;IAAEC,IAAI,EAAE;EAAE,CAAC;AACnD,CAAC;AAEM,MAAMI,eAAe,GAAG,MAAOC,mBAA6B,IAAK;EACpE,IAAIC,YAAY;EAEhB,MAAM;IAAEC,eAAe;IAAEC,SAAS;IAAEC;EAAa,CAAC,GAAG,MAAM,IAAAC,2BAAgB,EAAC,CAAC;EAE7E,MAAM;IAAEX,MAAM;IAAEF;EAAI,CAAC,GAAGQ,mBAAmB,GACrC;IAAEN,MAAM,EAAE,CAAC;IAAEF,GAAG,EAAE;EAAE,CAAC,GACrBX,0BAA0B,CAAC,CAAC;EAElCoB,YAAY,GAAGG,YAAY,GAAGV,MAAM,GAAGF,GAAG;EAE1C,IAAIU,eAAe,EAAE;IACjBD,YAAY,IAAIC,eAAe;EACnC;EAEA,IAAIC,SAAS,EAAE;IACXF,YAAY,IAAIE,SAAS;EAC7B;EAEA,OAAOF,YAAY;AACvB,CAAC;AAACrB,OAAA,CAAAmB,eAAA,GAAAA,eAAA","ignoreList":[]}
1
+ {"version":3,"file":"pageProvider.js","names":["_chaynsApi","require","_pageProvider","getPagePadding","runtimeEnvironment","getEnvironment","includes","matchMedia","PAGE_BREAKPOINTS","desktop","matches","exports","getPageProviderInformation","padding","split","parseValue","value","parsed","parseInt","replace","Number","isNaN","length","top","right","bottom","left","vertical","horizontal","map","getUsableHeight","shouldRemovePadding","usableHeight","bottomBarHeight","offsetTop","windowHeight","getWindowMetrics","useUsableHeight","useWindowMetrics"],"sources":["../../../src/utils/pageProvider.ts"],"sourcesContent":["import { getEnvironment, getWindowMetrics, useWindowMetrics } from 'chayns-api';\nimport { PAGE_BREAKPOINTS } from '../constants/pageProvider';\n\nexport const getPagePadding = () => {\n const { runtimeEnvironment } = getEnvironment();\n\n if (typeof runtimeEnvironment === 'number' && [4, 5].includes(runtimeEnvironment)) {\n return '0';\n }\n\n if (matchMedia(PAGE_BREAKPOINTS.desktop).matches) {\n return '35px 43px 30px';\n }\n\n return '15px 10px 20px';\n};\n\ntype PaddingValues = {\n top: number;\n right: number;\n bottom: number;\n left: number;\n};\n\nconst getPageProviderInformation = (): PaddingValues => {\n const padding = getPagePadding().split(' ');\n\n const parseValue = (value: string): number => {\n const parsed = parseInt(value.replace('px', ''), 10);\n return Number.isNaN(parsed) ? 0 : parsed;\n };\n\n if (padding.length === 1) {\n const value = parseValue(padding[0] ?? '');\n return { top: value, right: value, bottom: value, left: value };\n }\n\n if (padding.length === 2) {\n const [vertical, horizontal] = padding.map(parseValue);\n return {\n top: vertical ?? 0,\n right: horizontal ?? 0,\n bottom: vertical ?? 0,\n left: horizontal ?? 0,\n };\n }\n\n if (padding.length === 3) {\n const [top, horizontal, bottom] = padding.map(parseValue);\n return {\n top: top ?? 0,\n right: horizontal ?? 0,\n bottom: bottom ?? 0,\n left: horizontal ?? 0,\n };\n }\n\n if (padding.length === 4) {\n const [top, right, bottom, left] = padding.map(parseValue);\n return { top: top ?? 0, right: right ?? 0, bottom: bottom ?? 0, left: left ?? 0 };\n }\n\n return { top: 0, right: 0, bottom: 0, left: 0 };\n};\n\nexport const getUsableHeight = async (shouldRemovePadding?: boolean) => {\n let usableHeight;\n\n const { bottomBarHeight, offsetTop, windowHeight } = await getWindowMetrics();\n\n const { bottom, top } = shouldRemovePadding\n ? { bottom: 0, top: 0 }\n : getPageProviderInformation();\n\n usableHeight = windowHeight - bottom - top;\n\n if (bottomBarHeight) {\n usableHeight -= bottomBarHeight;\n }\n\n if (offsetTop) {\n usableHeight -= offsetTop;\n }\n\n return usableHeight;\n};\n\nexport const useUsableHeight = (shouldRemovePadding?: boolean) => {\n let usableHeight;\n\n const { bottomBarHeight, offsetTop, windowHeight } = useWindowMetrics();\n\n const { bottom, top } = shouldRemovePadding\n ? { bottom: 0, top: 0 }\n : getPageProviderInformation();\n\n usableHeight = windowHeight - bottom - top;\n\n if (bottomBarHeight) {\n usableHeight -= bottomBarHeight;\n }\n\n if (offsetTop) {\n usableHeight -= offsetTop;\n }\n\n return usableHeight;\n};\n"],"mappings":"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","ignoreList":[]}
package/lib/esm/components/combobox/ComboBox.styles.js CHANGED
@@ -134,35 +134,41 @@ export const StyledComboBoxPrefix = styled.div`
134
134
  padding-right: 5px;
135
135
  `;
136
136
  export const StyledComboBoxInput = styled.input`
137
+ color: ${_ref10 => {
138
+ let {
139
+ theme
140
+ } = _ref10;
141
+ return theme.text;
142
+ }};
137
143
  border: none;
138
144
  background-color: transparent;
139
145
  width: 100%;
140
146
  `;
141
147
  export const StyledComboBoxPlaceholderImage = styled.img`
142
148
  box-shadow: 0 0 0 1px
143
- rgba(${_ref10 => {
149
+ rgba(${_ref11 => {
144
150
  let {
145
151
  theme
146
- } = _ref10;
152
+ } = _ref11;
147
153
  return theme['009-rgb'];
148
154
  }}, 0.15);
149
- height: ${_ref11 => {
155
+ height: ${_ref12 => {
150
156
  let {
151
157
  $shouldShowBigImage
152
- } = _ref11;
158
+ } = _ref12;
153
159
  return $shouldShowBigImage ? '32px' : '22px';
154
160
  }};
155
- width: ${_ref12 => {
161
+ width: ${_ref13 => {
156
162
  let {
157
163
  $shouldShowBigImage
158
- } = _ref12;
164
+ } = _ref13;
159
165
  return $shouldShowBigImage ? '32px' : '22px';
160
166
  }};
161
167
 
162
- ${_ref13 => {
168
+ ${_ref14 => {
163
169
  let {
164
170
  $shouldShowRoundImage
165
- } = _ref13;
171
+ } = _ref14;
166
172
  return $shouldShowRoundImage && css`
167
173
  border-radius: 50%;
168
174
  `;
@@ -174,10 +180,10 @@ export const StyledComboBoxIconWrapper = styled.div`
174
180
  margin-left: 5px;
175
181
  `;
176
182
  export const StyledMotionComboBoxBody = styled(motion.div)`
177
- background: ${_ref14 => {
183
+ background: ${_ref15 => {
178
184
  let {
179
185
  theme
180
- } = _ref14;
186
+ } = _ref15;
181
187
  return theme['100'];
182
188
  }};
183
189
  display: flex;
@@ -186,42 +192,42 @@ export const StyledMotionComboBoxBody = styled(motion.div)`
186
192
  flex-direction: column;
187
193
  border: 1px solid rgba(160, 160, 160, 0.3);
188
194
  cursor: pointer;
189
- max-height: ${_ref15 => {
195
+ max-height: ${_ref16 => {
190
196
  let {
191
197
  $maxHeight
192
- } = _ref15;
198
+ } = _ref16;
193
199
  return $maxHeight;
194
200
  }};
195
- overflow-y: ${_ref16 => {
201
+ overflow-y: ${_ref17 => {
196
202
  let {
197
203
  $overflowY
198
- } = _ref16;
204
+ } = _ref17;
199
205
  return $overflowY;
200
206
  }};
201
207
  overflow-x: hidden;
202
- min-width: ${_ref17 => {
208
+ min-width: ${_ref18 => {
203
209
  let {
204
210
  $minWidth,
205
211
  $overflowY
206
- } = _ref17;
212
+ } = _ref18;
207
213
  return $minWidth - ($overflowY === 'scroll' ? 5 : 0);
208
214
  }}px;
209
215
 
210
- ${_ref18 => {
216
+ ${_ref19 => {
211
217
  let {
212
218
  $minWidth,
213
219
  $overflowY,
214
220
  $shouldUseCurrentItemWidth
215
- } = _ref18;
221
+ } = _ref19;
216
222
  return !$shouldUseCurrentItemWidth && css`
217
223
  max-width: ${$minWidth - ($overflowY === 'scroll' ? 5 : 0)}px;
218
224
  `;
219
225
  }}
220
226
 
221
- ${_ref19 => {
227
+ ${_ref20 => {
222
228
  let {
223
229
  $direction
224
- } = _ref19;
230
+ } = _ref20;
225
231
  if ($direction === ComboBoxDirection.BOTTOM) {
226
232
  return css`
227
233
  border-bottom-left-radius: 3px;
@@ -237,11 +243,11 @@ export const StyledMotionComboBoxBody = styled(motion.div)`
237
243
  }}
238
244
 
239
245
  // Styles for custom scrollbar
240
- ${_ref20 => {
246
+ ${_ref21 => {
241
247
  let {
242
248
  $browser,
243
249
  theme
244
- } = _ref20;
250
+ } = _ref21;
245
251
  return $browser === 'firefox' ? css`
246
252
  scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;
247
253
  scrollbar-width: thin;
@@ -268,10 +274,10 @@ export const StyledMotionComboBoxBody = styled(motion.div)`
268
274
  `;
269
275
  export const StyledComboBoxTopic = styled.div`
270
276
  align-items: center;
271
- color: rgba(${_ref21 => {
277
+ color: rgba(${_ref22 => {
272
278
  let {
273
279
  theme
274
- } = _ref21;
280
+ } = _ref22;
275
281
  return theme['text-rgb'];
276
282
  }}, 0.65);
277
283
  position: sticky;
@@ -283,10 +289,10 @@ export const StyledComboBoxTopic = styled.div`
283
289
  gap: 10px;
284
290
  z-index: 10;
285
291
  padding: 4px 10px;
286
- background-color: ${_ref22 => {
292
+ background-color: ${_ref23 => {
287
293
  let {
288
294
  theme
289
- } = _ref22;
295
+ } = _ref23;
290
296
  return theme['secondary-101'];
291
297
  }};
292
298
  `;
package/lib/esm/components/combobox/ComboBox.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ComboBox.styles.js","names":["motion","styled","css","ComboBoxDirection","StyledComboBox","div","_ref","$shouldUseFullWidth","$minWidth","$shouldUseCurrentItemWidth","StyledComboBoxHeader","_ref2","$isDisabled","_ref3","theme","$shouldChangeColor","colorMode","_ref4","_ref5","$shouldShowBigImage","_ref6","$isOpen","$direction","BOTTOM","_ref7","$isTouch","StyledComboBoxPlaceholder","_ref8","text","_ref9","$shouldReduceOpacity","StyledComboBoxPlaceholderText","StyledComboBoxPrefixAndPlaceholderWrapper","StyledComboBoxPrefix","StyledComboBoxInput","input","StyledComboBoxPlaceholderImage","img","_ref10","_ref11","_ref12","_ref13","$shouldShowRoundImage","StyledComboBoxIconWrapper","StyledMotionComboBoxBody","_ref14","_ref15","$maxHeight","_ref16","$overflowY","_ref17","_ref18","_ref19","_ref20","$browser","StyledComboBoxTopic","_ref21","_ref22"],"sources":["../../../../src/components/combobox/ComboBox.styles.ts"],"sourcesContent":["import type { Browser } from 'detect-browser';\nimport { motion } from 'framer-motion';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport { ComboBoxDirection } from '../../types/comboBox';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { ComboBoxProps } from './ComboBox';\n\ntype StyledComboBoxProps = WithTheme<{\n $minWidth?: number;\n $shouldUseFullWidth: ComboBoxProps['shouldUseFullWidth'];\n $shouldUseCurrentItemWidth: ComboBoxProps['shouldUseCurrentItemWidth'];\n}>;\n\nexport const StyledComboBox = styled.div<StyledComboBoxProps>`\n user-select: none;\n position: relative;\n\n ${({ $shouldUseFullWidth, $minWidth, $shouldUseCurrentItemWidth }) => {\n if (typeof $minWidth !== 'number') {\n return css`\n width: fit-content;\n `;\n }\n\n if ($shouldUseFullWidth) {\n return css`\n min-width: ${$minWidth}px;\n width: 100%;\n `;\n }\n\n if ($shouldUseCurrentItemWidth) {\n return '';\n }\n\n return css`\n min-width: ${$minWidth}px;\n max-width: ${$minWidth}px;\n `;\n }}\n`;\n\ntype StyledComboBoxHeaderProps = WithTheme<{\n $isTouch: boolean;\n $isOpen: boolean;\n $direction: ComboBoxDirection;\n $isDisabled?: boolean;\n $shouldChangeColor: boolean;\n $shouldShowBigImage: ComboBoxProps['shouldShowBigImage'];\n}>;\n\nexport const StyledComboBoxHeader = styled.div<StyledComboBoxHeaderProps>`\n display: flex;\n justify-content: space-between;\n border: 1px solid rgba(160, 160, 160, 0.3);\n padding: 4px 10px;\n cursor: ${({ $isDisabled }) => (!$isDisabled ? 'pointer' : 'default')};\n background-color: ${({ theme, $shouldChangeColor }: StyledComboBoxHeaderProps) =>\n theme.colorMode === 'classic' || $shouldChangeColor ? theme['000'] : theme['100']};\n opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n transition: background-color 0.2s ease-in-out;\n\n ${({ $shouldShowBigImage }) =>\n $shouldShowBigImage &&\n css`\n height: 42px;\n `}\n\n ${({ $isOpen, $direction }) => {\n if ($isOpen) {\n return $direction === ComboBoxDirection.BOTTOM\n ? css`\n border-top-left-radius: 3px;\n border-top-right-radius: 3px;\n `\n : css`\n border-bottom-left-radius: 3px;\n border-bottom-right-radius: 3px;\n `;\n }\n\n return css`\n border-radius: 3px;\n `;\n }}\n\n ${({ $isTouch, $isDisabled, theme }: StyledComboBoxHeaderProps) =>\n !$isTouch &&\n !$isDisabled &&\n css`\n &:hover {\n background-color: ${theme['secondary-102']};\n }\n `}\n`;\n\ntype StyledComboBoxPlaceholderProps = WithTheme<{ $shouldReduceOpacity: boolean }>;\n\nexport const StyledComboBoxPlaceholder = styled.div<StyledComboBoxPlaceholderProps>`\n align-items: center;\n color: ${({ theme }: StyledComboBoxPlaceholderProps) => theme.text};\n display: flex;\n flex: 1 1 auto;\n gap: 10px;\n min-width: 0;\n opacity: ${({ $shouldReduceOpacity }) => ($shouldReduceOpacity ? 0.5 : 1)};\n`;\n\nexport const StyledComboBoxPlaceholderText = styled.div`\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n`;\n\nexport const StyledComboBoxPrefixAndPlaceholderWrapper = styled.div`\n align-items: center;\n display: flex;\n flex: 1 1 auto;\n min-width: 0;\n`;\n\nexport const StyledComboBoxPrefix = styled.div`\n flex: 0 0 auto;\n min-width: 32px;\n padding-right: 5px;\n`;\n\nexport const StyledComboBoxInput = styled.input`\n border: none;\n background-color: transparent;\n width: 100%;\n`;\n\ntype StyledComboBoxPlaceholderImageProps = WithTheme<{\n $shouldShowBigImage: ComboBoxProps['shouldShowBigImage'];\n $shouldShowRoundImage: ComboBoxProps['shouldShowRoundImage'];\n}>;\n\nexport const StyledComboBoxPlaceholderImage = styled.img<StyledComboBoxPlaceholderImageProps>`\n box-shadow: 0 0 0 1px\n rgba(${({ theme }: StyledComboBoxPlaceholderImageProps) => theme['009-rgb']}, 0.15);\n height: ${({ $shouldShowBigImage }) => ($shouldShowBigImage ? '32px' : '22px')};\n width: ${({ $shouldShowBigImage }) => ($shouldShowBigImage ? '32px' : '22px')};\n\n ${({ $shouldShowRoundImage }) =>\n $shouldShowRoundImage &&\n css`\n border-radius: 50%;\n `}\n`;\n\nexport const StyledComboBoxIconWrapper = styled.div`\n align-items: center;\n display: flex;\n margin-left: 5px;\n`;\n\ntype StyledComboBoxBodyProps = WithTheme<{\n $overflowY: CSSProperties['overflowY'];\n $maxHeight: CSSProperties['maxHeight'];\n $direction: ComboBoxDirection;\n $browser: Browser | 'bot' | null | undefined;\n $minWidth: number;\n $shouldUseCurrentItemWidth: boolean;\n}>;\n\nexport const StyledMotionComboBoxBody = styled(motion.div)<StyledComboBoxBodyProps>`\n background: ${({ theme }: StyledComboBoxBodyProps) => theme['100']};\n display: flex;\n position: absolute;\n z-index: 4;\n flex-direction: column;\n border: 1px solid rgba(160, 160, 160, 0.3);\n cursor: pointer;\n max-height: ${({ $maxHeight }) => $maxHeight};\n overflow-y: ${({ $overflowY }) => $overflowY};\n overflow-x: hidden;\n min-width: ${({ $minWidth, $overflowY }) => $minWidth - ($overflowY === 'scroll' ? 5 : 0)}px;\n\n ${({ $minWidth, $overflowY, $shouldUseCurrentItemWidth }) =>\n !$shouldUseCurrentItemWidth &&\n css`\n max-width: ${$minWidth - ($overflowY === 'scroll' ? 5 : 0)}px;\n `}\n\n ${({ $direction }) => {\n if ($direction === ComboBoxDirection.BOTTOM) {\n return css`\n border-bottom-left-radius: 3px;\n border-bottom-right-radius: 3px;\n box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.2);\n `;\n }\n\n return css`\n border-top-left-radius: 3px;\n border-top-right-radius: 3px;\n box-shadow: 0 -3px 10px 0 rgba(0, 0, 0, 0.2);\n `;\n }}\n\n // Styles for custom scrollbar\n ${({ $browser, theme }: StyledComboBoxBodyProps) =>\n $browser === 'firefox'\n ? css`\n scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;\n scrollbar-width: thin;\n `\n : css`\n &::-webkit-scrollbar {\n width: 5px;\n }\n\n &::-webkit-scrollbar-track {\n background-color: transparent;\n }\n\n &::-webkit-scrollbar-button {\n background-color: transparent;\n height: 5px;\n }\n\n &::-webkit-scrollbar-thumb {\n background-color: rgba(${theme['text-rgb']}, 0.15);\n border-radius: 20px;\n }\n `}\n`;\n\ntype StyledComboBoxTopicProps = WithTheme<unknown>;\n\nexport const StyledComboBoxTopic = styled.div`\n align-items: center;\n color: rgba(${({ theme }: StyledComboBoxTopicProps) => theme['text-rgb']}, 0.65);\n position: sticky;\n top: 0;\n border: black 5px;\n cursor: default;\n font-weight: bold;\n display: flex;\n gap: 10px;\n z-index: 10;\n padding: 4px 10px;\n background-color: ${({ theme }: StyledComboBoxTopicProps) => theme['secondary-101']};\n`;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"ComboBox.styles.js","names":["motion","styled","css","ComboBoxDirection","StyledComboBox","div","_ref","$shouldUseFullWidth","$minWidth","$shouldUseCurrentItemWidth","StyledComboBoxHeader","_ref2","$isDisabled","_ref3","theme","$shouldChangeColor","colorMode","_ref4","_ref5","$shouldShowBigImage","_ref6","$isOpen","$direction","BOTTOM","_ref7","$isTouch","StyledComboBoxPlaceholder","_ref8","text","_ref9","$shouldReduceOpacity","StyledComboBoxPlaceholderText","StyledComboBoxPrefixAndPlaceholderWrapper","StyledComboBoxPrefix","StyledComboBoxInput","input","_ref10","StyledComboBoxPlaceholderImage","img","_ref11","_ref12","_ref13","_ref14","$shouldShowRoundImage","StyledComboBoxIconWrapper","StyledMotionComboBoxBody","_ref15","_ref16","$maxHeight","_ref17","$overflowY","_ref18","_ref19","_ref20","_ref21","$browser","StyledComboBoxTopic","_ref22","_ref23"],"sources":["../../../../src/components/combobox/ComboBox.styles.ts"],"sourcesContent":["import type { Browser } from 'detect-browser';\nimport { motion } from 'framer-motion';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport { ComboBoxDirection } from '../../types/comboBox';\nimport type { Theme, WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { ComboBoxProps } from './ComboBox';\n\ntype StyledComboBoxProps = WithTheme<{\n $minWidth?: number;\n $shouldUseFullWidth: ComboBoxProps['shouldUseFullWidth'];\n $shouldUseCurrentItemWidth: ComboBoxProps['shouldUseCurrentItemWidth'];\n}>;\n\nexport const StyledComboBox = styled.div<StyledComboBoxProps>`\n user-select: none;\n position: relative;\n\n ${({ $shouldUseFullWidth, $minWidth, $shouldUseCurrentItemWidth }) => {\n if (typeof $minWidth !== 'number') {\n return css`\n width: fit-content;\n `;\n }\n\n if ($shouldUseFullWidth) {\n return css`\n min-width: ${$minWidth}px;\n width: 100%;\n `;\n }\n\n if ($shouldUseCurrentItemWidth) {\n return '';\n }\n\n return css`\n min-width: ${$minWidth}px;\n max-width: ${$minWidth}px;\n `;\n }}\n`;\n\ntype StyledComboBoxHeaderProps = WithTheme<{\n $isTouch: boolean;\n $isOpen: boolean;\n $direction: ComboBoxDirection;\n $isDisabled?: boolean;\n $shouldChangeColor: boolean;\n $shouldShowBigImage: ComboBoxProps['shouldShowBigImage'];\n}>;\n\nexport const StyledComboBoxHeader = styled.div<StyledComboBoxHeaderProps>`\n display: flex;\n justify-content: space-between;\n border: 1px solid rgba(160, 160, 160, 0.3);\n padding: 4px 10px;\n cursor: ${({ $isDisabled }) => (!$isDisabled ? 'pointer' : 'default')};\n background-color: ${({ theme, $shouldChangeColor }: StyledComboBoxHeaderProps) =>\n theme.colorMode === 'classic' || $shouldChangeColor ? theme['000'] : theme['100']};\n opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n transition: background-color 0.2s ease-in-out;\n\n ${({ $shouldShowBigImage }) =>\n $shouldShowBigImage &&\n css`\n height: 42px;\n `}\n\n ${({ $isOpen, $direction }) => {\n if ($isOpen) {\n return $direction === ComboBoxDirection.BOTTOM\n ? css`\n border-top-left-radius: 3px;\n border-top-right-radius: 3px;\n `\n : css`\n border-bottom-left-radius: 3px;\n border-bottom-right-radius: 3px;\n `;\n }\n\n return css`\n border-radius: 3px;\n `;\n }}\n\n ${({ $isTouch, $isDisabled, theme }: StyledComboBoxHeaderProps) =>\n !$isTouch &&\n !$isDisabled &&\n css`\n &:hover {\n background-color: ${theme['secondary-102']};\n }\n `}\n`;\n\ntype StyledComboBoxPlaceholderProps = WithTheme<{ $shouldReduceOpacity: boolean }>;\n\nexport const StyledComboBoxPlaceholder = styled.div<StyledComboBoxPlaceholderProps>`\n align-items: center;\n color: ${({ theme }: StyledComboBoxPlaceholderProps) => theme.text};\n display: flex;\n flex: 1 1 auto;\n gap: 10px;\n min-width: 0;\n opacity: ${({ $shouldReduceOpacity }) => ($shouldReduceOpacity ? 0.5 : 1)};\n`;\n\nexport const StyledComboBoxPlaceholderText = styled.div`\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n`;\n\nexport const StyledComboBoxPrefixAndPlaceholderWrapper = styled.div`\n align-items: center;\n display: flex;\n flex: 1 1 auto;\n min-width: 0;\n`;\n\nexport const StyledComboBoxPrefix = styled.div`\n flex: 0 0 auto;\n min-width: 32px;\n padding-right: 5px;\n`;\n\nexport const StyledComboBoxInput = styled.input`\n color: ${({ theme }: { theme: Theme }) => theme.text};\n border: none;\n background-color: transparent;\n width: 100%;\n`;\n\ntype StyledComboBoxPlaceholderImageProps = WithTheme<{\n $shouldShowBigImage: ComboBoxProps['shouldShowBigImage'];\n $shouldShowRoundImage: ComboBoxProps['shouldShowRoundImage'];\n}>;\n\nexport const StyledComboBoxPlaceholderImage = styled.img<StyledComboBoxPlaceholderImageProps>`\n box-shadow: 0 0 0 1px\n rgba(${({ theme }: StyledComboBoxPlaceholderImageProps) => theme['009-rgb']}, 0.15);\n height: ${({ $shouldShowBigImage }) => ($shouldShowBigImage ? '32px' : '22px')};\n width: ${({ $shouldShowBigImage }) => ($shouldShowBigImage ? '32px' : '22px')};\n\n ${({ $shouldShowRoundImage }) =>\n $shouldShowRoundImage &&\n css`\n border-radius: 50%;\n `}\n`;\n\nexport const StyledComboBoxIconWrapper = styled.div`\n align-items: center;\n display: flex;\n margin-left: 5px;\n`;\n\ntype StyledComboBoxBodyProps = WithTheme<{\n $overflowY: CSSProperties['overflowY'];\n $maxHeight: CSSProperties['maxHeight'];\n $direction: ComboBoxDirection;\n $browser: Browser | 'bot' | null | undefined;\n $minWidth: number;\n $shouldUseCurrentItemWidth: boolean;\n}>;\n\nexport const StyledMotionComboBoxBody = styled(motion.div)<StyledComboBoxBodyProps>`\n background: ${({ theme }: StyledComboBoxBodyProps) => theme['100']};\n display: flex;\n position: absolute;\n z-index: 4;\n flex-direction: column;\n border: 1px solid rgba(160, 160, 160, 0.3);\n cursor: pointer;\n max-height: ${({ $maxHeight }) => $maxHeight};\n overflow-y: ${({ $overflowY }) => $overflowY};\n overflow-x: hidden;\n min-width: ${({ $minWidth, $overflowY }) => $minWidth - ($overflowY === 'scroll' ? 5 : 0)}px;\n\n ${({ $minWidth, $overflowY, $shouldUseCurrentItemWidth }) =>\n !$shouldUseCurrentItemWidth &&\n css`\n max-width: ${$minWidth - ($overflowY === 'scroll' ? 5 : 0)}px;\n `}\n\n ${({ $direction }) => {\n if ($direction === ComboBoxDirection.BOTTOM) {\n return css`\n border-bottom-left-radius: 3px;\n border-bottom-right-radius: 3px;\n box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.2);\n `;\n }\n\n return css`\n border-top-left-radius: 3px;\n border-top-right-radius: 3px;\n box-shadow: 0 -3px 10px 0 rgba(0, 0, 0, 0.2);\n `;\n }}\n\n // Styles for custom scrollbar\n ${({ $browser, theme }: StyledComboBoxBodyProps) =>\n $browser === 'firefox'\n ? css`\n scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;\n scrollbar-width: thin;\n `\n : css`\n &::-webkit-scrollbar {\n width: 5px;\n }\n\n &::-webkit-scrollbar-track {\n background-color: transparent;\n }\n\n &::-webkit-scrollbar-button {\n background-color: transparent;\n height: 5px;\n }\n\n &::-webkit-scrollbar-thumb {\n background-color: rgba(${theme['text-rgb']}, 0.15);\n border-radius: 20px;\n }\n `}\n`;\n\ntype StyledComboBoxTopicProps = WithTheme<unknown>;\n\nexport const StyledComboBoxTopic = styled.div`\n align-items: center;\n color: rgba(${({ theme }: StyledComboBoxTopicProps) => theme['text-rgb']}, 0.65);\n position: sticky;\n top: 0;\n border: black 5px;\n cursor: default;\n font-weight: bold;\n display: flex;\n gap: 10px;\n z-index: 10;\n padding: 4px 10px;\n background-color: ${({ theme }: StyledComboBoxTopicProps) => theme['secondary-101']};\n`;\n"],"mappings":"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","ignoreList":[]}
package/lib/esm/components/page-provider/PageProvider.js CHANGED
@@ -1,7 +1,7 @@
1
- import { getEnvironment } from 'chayns-api';
2
- import React, { useEffect, useState } from 'react';
1
+ import { getEnvironment, RuntimeEnviroment } from 'chayns-api';
2
+ import React from 'react';
3
3
  import { createGlobalStyle } from 'styled-components';
4
- import { getUsableHeight } from '../../utils/pageProvider';
4
+ import { useUsableHeight } from '../../utils/pageProvider';
5
5
  import ColorSchemeProvider from '../color-scheme-provider/ColorSchemeProvider';
6
6
  import { StyledPageProvider } from './PageProvider.styles';
7
7
  const GlobalStyle = createGlobalStyle`
@@ -25,13 +25,8 @@ const PageProvider = _ref => {
25
25
  const {
26
26
  runtimeEnvironment
27
27
  } = getEnvironment();
28
- const shouldUsePadding = !shouldRemovePadding && ![4, 5, 6].includes(runtimeEnvironment);
29
- const [usableHeight, setUsableHeight] = useState(0);
30
- useEffect(() => {
31
- void getUsableHeight(shouldRemovePadding).then(height => {
32
- setUsableHeight(height);
33
- });
34
- }, [shouldRemovePadding]);
28
+ const shouldUsePadding = !shouldRemovePadding && ![RuntimeEnviroment.IntercomPlugin, RuntimeEnviroment.PagemakerPlugin, 6].includes(runtimeEnvironment);
29
+ const usableHeight = useUsableHeight(shouldUsePadding);
35
30
  return /*#__PURE__*/React.createElement(StyledPageProvider, {
36
31
  className: "page-provider",
37
32
  $shouldUsePadding: shouldUsePadding,
package/lib/esm/components/page-provider/PageProvider.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"PageProvider.js","names":["getEnvironment","React","useEffect","useState","createGlobalStyle","getUsableHeight","ColorSchemeProvider","StyledPageProvider","GlobalStyle","PageProvider","_ref","children","color","colorMode","cssVariables","secondaryColor","siteId","style","designSettings","shouldRemovePadding","shouldUseUsableHeight","runtimeEnvironment","shouldUsePadding","includes","usableHeight","setUsableHeight","then","height","createElement","className","$shouldUsePadding","$usableHeight","undefined","displayName"],"sources":["../../../../src/components/page-provider/PageProvider.tsx"],"sourcesContent":["import { getEnvironment } from 'chayns-api';\nimport React, { FC, useEffect, useState } from 'react';\nimport { createGlobalStyle } from 'styled-components';\nimport { getUsableHeight } 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 cssVariables = {},\n secondaryColor,\n siteId,\n style = {},\n designSettings,\n shouldRemovePadding,\n shouldUseUsableHeight,\n}) => {\n const { runtimeEnvironment } = getEnvironment();\n const shouldUsePadding =\n !shouldRemovePadding && ![4, 5, 6].includes(runtimeEnvironment as number);\n const [usableHeight, setUsableHeight] = useState(0);\n\n useEffect(() => {\n void getUsableHeight(shouldRemovePadding).then((height) => {\n setUsableHeight(height);\n });\n }, [shouldRemovePadding]);\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 style={shouldUseUsableHeight ? { ...style, height: '100%' } : style}\n siteId={siteId}\n designSettings={designSettings}\n cssVariables={cssVariables}\n >\n {children}\n </ColorSchemeProvider>\n <GlobalStyle />\n </StyledPageProvider>\n );\n};\nPageProvider.displayName = 'PageProvider';\n\nexport default PageProvider;\n"],"mappings":"AAAA,SAASA,cAAc,QAAQ,YAAY;AAC3C,OAAOC,KAAK,IAAQC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AACtD,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,GAAGC,IAAA,IAWtC;EAAA,IAXuC;IACzCC,QAAQ;IACRC,KAAK;IACLC,SAAS;IACTC,YAAY,GAAG,CAAC,CAAC;IACjBC,cAAc;IACdC,MAAM;IACNC,KAAK,GAAG,CAAC,CAAC;IACVC,cAAc;IACdC,mBAAmB;IACnBC;EACJ,CAAC,GAAAV,IAAA;EACG,MAAM;IAAEW;EAAmB,CAAC,GAAGrB,cAAc,CAAC,CAAC;EAC/C,MAAMsB,gBAAgB,GAClB,CAACH,mBAAmB,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAACI,QAAQ,CAACF,kBAA4B,CAAC;EAC7E,MAAM,CAACG,YAAY,EAAEC,eAAe,CAAC,GAAGtB,QAAQ,CAAC,CAAC,CAAC;EAEnDD,SAAS,CAAC,MAAM;IACZ,KAAKG,eAAe,CAACc,mBAAmB,CAAC,CAACO,IAAI,CAAEC,MAAM,IAAK;MACvDF,eAAe,CAACE,MAAM,CAAC;IAC3B,CAAC,CAAC;EACN,CAAC,EAAE,CAACR,mBAAmB,CAAC,CAAC;EAEzB,oBACIlB,KAAA,CAAA2B,aAAA,CAACrB,kBAAkB;IACfsB,SAAS,EAAC,eAAe;IACzBC,iBAAiB,EAAER,gBAAiB;IACpCS,aAAa,EAAEX,qBAAqB,GAAGI,YAAY,GAAGQ;EAAU,gBAEhE/B,KAAA,CAAA2B,aAAA,CAACtB,mBAAmB;IAChBM,KAAK,EAAEA,KAAM;IACbG,cAAc,EAAEA,cAAe;IAC/BF,SAAS,EAAEA,SAAU;IACrBI,KAAK,EAAEG,qBAAqB,GAAG;MAAE,GAAGH,KAAK;MAAEU,MAAM,EAAE;IAAO,CAAC,GAAGV,KAAM;IACpED,MAAM,EAAEA,MAAO;IACfE,cAAc,EAAEA,cAAe;IAC/BJ,YAAY,EAAEA;EAAa,GAE1BH,QACgB,CAAC,eACtBV,KAAA,CAAA2B,aAAA,CAACpB,WAAW,MAAE,CACE,CAAC;AAE7B,CAAC;AACDC,YAAY,CAACwB,WAAW,GAAG,cAAc;AAEzC,eAAexB,YAAY","ignoreList":[]}
1
+ {"version":3,"file":"PageProvider.js","names":["getEnvironment","RuntimeEnviroment","React","createGlobalStyle","useUsableHeight","ColorSchemeProvider","StyledPageProvider","GlobalStyle","PageProvider","_ref","children","color","colorMode","cssVariables","secondaryColor","siteId","style","designSettings","shouldRemovePadding","shouldUseUsableHeight","runtimeEnvironment","shouldUsePadding","IntercomPlugin","PagemakerPlugin","includes","usableHeight","createElement","className","$shouldUsePadding","$usableHeight","undefined","height","displayName"],"sources":["../../../../src/components/page-provider/PageProvider.tsx"],"sourcesContent":["import { getEnvironment, RuntimeEnviroment } 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 cssVariables = {},\n secondaryColor,\n siteId,\n style = {},\n designSettings,\n shouldRemovePadding,\n shouldUseUsableHeight,\n}) => {\n const { runtimeEnvironment } = getEnvironment();\n const shouldUsePadding =\n !shouldRemovePadding &&\n ![RuntimeEnviroment.IntercomPlugin, RuntimeEnviroment.PagemakerPlugin, 6].includes(\n runtimeEnvironment as number,\n );\n\n const usableHeight = useUsableHeight(shouldUsePadding);\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 style={shouldUseUsableHeight ? { ...style, height: '100%' } : style}\n siteId={siteId}\n designSettings={designSettings}\n cssVariables={cssVariables}\n >\n {children}\n </ColorSchemeProvider>\n <GlobalStyle />\n </StyledPageProvider>\n );\n};\nPageProvider.displayName = 'PageProvider';\n\nexport default PageProvider;\n"],"mappings":"AAAA,SAASA,cAAc,EAAEC,iBAAiB,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,GAAGC,IAAA,IAWtC;EAAA,IAXuC;IACzCC,QAAQ;IACRC,KAAK;IACLC,SAAS;IACTC,YAAY,GAAG,CAAC,CAAC;IACjBC,cAAc;IACdC,MAAM;IACNC,KAAK,GAAG,CAAC,CAAC;IACVC,cAAc;IACdC,mBAAmB;IACnBC;EACJ,CAAC,GAAAV,IAAA;EACG,MAAM;IAAEW;EAAmB,CAAC,GAAGpB,cAAc,CAAC,CAAC;EAC/C,MAAMqB,gBAAgB,GAClB,CAACH,mBAAmB,IACpB,CAAC,CAACjB,iBAAiB,CAACqB,cAAc,EAAErB,iBAAiB,CAACsB,eAAe,EAAE,CAAC,CAAC,CAACC,QAAQ,CAC9EJ,kBACJ,CAAC;EAEL,MAAMK,YAAY,GAAGrB,eAAe,CAACiB,gBAAgB,CAAC;EAEtD,oBACInB,KAAA,CAAAwB,aAAA,CAACpB,kBAAkB;IACfqB,SAAS,EAAC,eAAe;IACzBC,iBAAiB,EAAEP,gBAAiB;IACpCQ,aAAa,EAAEV,qBAAqB,GAAGM,YAAY,GAAGK;EAAU,gBAEhE5B,KAAA,CAAAwB,aAAA,CAACrB,mBAAmB;IAChBM,KAAK,EAAEA,KAAM;IACbG,cAAc,EAAEA,cAAe;IAC/BF,SAAS,EAAEA,SAAU;IACrBI,KAAK,EAAEG,qBAAqB,GAAG;MAAE,GAAGH,KAAK;MAAEe,MAAM,EAAE;IAAO,CAAC,GAAGf,KAAM;IACpED,MAAM,EAAEA,MAAO;IACfE,cAAc,EAAEA,cAAe;IAC/BJ,YAAY,EAAEA;EAAa,GAE1BH,QACgB,CAAC,eACtBR,KAAA,CAAAwB,aAAA,CAACnB,WAAW,MAAE,CACE,CAAC;AAE7B,CAAC;AACDC,YAAY,CAACwB,WAAW,GAAG,cAAc;AAEzC,eAAexB,YAAY","ignoreList":[]}
package/lib/esm/utils/pageProvider.js CHANGED
@@ -1,4 +1,4 @@
1
- import { getEnvironment, getWindowMetrics } from 'chayns-api';
1
+ import { getEnvironment, getWindowMetrics, useWindowMetrics } from 'chayns-api';
2
2
  import { PAGE_BREAKPOINTS } from '../constants/pageProvider';
3
3
  export const getPagePadding = () => {
4
4
  const {
@@ -84,4 +84,27 @@ export const getUsableHeight = async shouldRemovePadding => {
84
84
  }
85
85
  return usableHeight;
86
86
  };
87
+ export const useUsableHeight = shouldRemovePadding => {
88
+ let usableHeight;
89
+ const {
90
+ bottomBarHeight,
91
+ offsetTop,
92
+ windowHeight
93
+ } = useWindowMetrics();
94
+ const {
95
+ bottom,
96
+ top
97
+ } = shouldRemovePadding ? {
98
+ bottom: 0,
99
+ top: 0
100
+ } : getPageProviderInformation();
101
+ usableHeight = windowHeight - bottom - top;
102
+ if (bottomBarHeight) {
103
+ usableHeight -= bottomBarHeight;
104
+ }
105
+ if (offsetTop) {
106
+ usableHeight -= offsetTop;
107
+ }
108
+ return usableHeight;
109
+ };
87
110
  //# sourceMappingURL=pageProvider.js.map
package/lib/esm/utils/pageProvider.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"pageProvider.js","names":["getEnvironment","getWindowMetrics","PAGE_BREAKPOINTS","getPagePadding","runtimeEnvironment","includes","matchMedia","desktop","matches","getPageProviderInformation","padding","split","parseValue","value","parsed","parseInt","replace","Number","isNaN","length","top","right","bottom","left","vertical","horizontal","map","getUsableHeight","shouldRemovePadding","usableHeight","bottomBarHeight","offsetTop","windowHeight"],"sources":["../../../src/utils/pageProvider.ts"],"sourcesContent":["import { getEnvironment, getWindowMetrics } from 'chayns-api';\nimport { PAGE_BREAKPOINTS } from '../constants/pageProvider';\n\nexport const getPagePadding = () => {\n const { runtimeEnvironment } = getEnvironment();\n\n if (typeof runtimeEnvironment === 'number' && [4, 5].includes(runtimeEnvironment)) {\n return '0';\n }\n\n if (matchMedia(PAGE_BREAKPOINTS.desktop).matches) {\n return '35px 43px 30px';\n }\n\n return '15px 10px 20px';\n};\n\ntype PaddingValues = {\n top: number;\n right: number;\n bottom: number;\n left: number;\n};\n\nconst getPageProviderInformation = (): PaddingValues => {\n const padding = getPagePadding().split(' ');\n\n const parseValue = (value: string): number => {\n const parsed = parseInt(value.replace('px', ''), 10);\n return Number.isNaN(parsed) ? 0 : parsed;\n };\n\n if (padding.length === 1) {\n const value = parseValue(padding[0] ?? '');\n return { top: value, right: value, bottom: value, left: value };\n }\n\n if (padding.length === 2) {\n const [vertical, horizontal] = padding.map(parseValue);\n return {\n top: vertical ?? 0,\n right: horizontal ?? 0,\n bottom: vertical ?? 0,\n left: horizontal ?? 0,\n };\n }\n\n if (padding.length === 3) {\n const [top, horizontal, bottom] = padding.map(parseValue);\n return {\n top: top ?? 0,\n right: horizontal ?? 0,\n bottom: bottom ?? 0,\n left: horizontal ?? 0,\n };\n }\n\n if (padding.length === 4) {\n const [top, right, bottom, left] = padding.map(parseValue);\n return { top: top ?? 0, right: right ?? 0, bottom: bottom ?? 0, left: left ?? 0 };\n }\n\n return { top: 0, right: 0, bottom: 0, left: 0 };\n};\n\nexport const getUsableHeight = async (shouldRemovePadding?: boolean) => {\n let usableHeight;\n\n const { bottomBarHeight, offsetTop, windowHeight } = await getWindowMetrics();\n\n const { bottom, top } = shouldRemovePadding\n ? { bottom: 0, top: 0 }\n : getPageProviderInformation();\n\n usableHeight = windowHeight - bottom - top;\n\n if (bottomBarHeight) {\n usableHeight -= bottomBarHeight;\n }\n\n if (offsetTop) {\n usableHeight -= offsetTop;\n }\n\n return usableHeight;\n};\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"pageProvider.js","names":["getEnvironment","getWindowMetrics","useWindowMetrics","PAGE_BREAKPOINTS","getPagePadding","runtimeEnvironment","includes","matchMedia","desktop","matches","getPageProviderInformation","padding","split","parseValue","value","parsed","parseInt","replace","Number","isNaN","length","top","right","bottom","left","vertical","horizontal","map","getUsableHeight","shouldRemovePadding","usableHeight","bottomBarHeight","offsetTop","windowHeight","useUsableHeight"],"sources":["../../../src/utils/pageProvider.ts"],"sourcesContent":["import { getEnvironment, getWindowMetrics, useWindowMetrics } from 'chayns-api';\nimport { PAGE_BREAKPOINTS } from '../constants/pageProvider';\n\nexport const getPagePadding = () => {\n const { runtimeEnvironment } = getEnvironment();\n\n if (typeof runtimeEnvironment === 'number' && [4, 5].includes(runtimeEnvironment)) {\n return '0';\n }\n\n if (matchMedia(PAGE_BREAKPOINTS.desktop).matches) {\n return '35px 43px 30px';\n }\n\n return '15px 10px 20px';\n};\n\ntype PaddingValues = {\n top: number;\n right: number;\n bottom: number;\n left: number;\n};\n\nconst getPageProviderInformation = (): PaddingValues => {\n const padding = getPagePadding().split(' ');\n\n const parseValue = (value: string): number => {\n const parsed = parseInt(value.replace('px', ''), 10);\n return Number.isNaN(parsed) ? 0 : parsed;\n };\n\n if (padding.length === 1) {\n const value = parseValue(padding[0] ?? '');\n return { top: value, right: value, bottom: value, left: value };\n }\n\n if (padding.length === 2) {\n const [vertical, horizontal] = padding.map(parseValue);\n return {\n top: vertical ?? 0,\n right: horizontal ?? 0,\n bottom: vertical ?? 0,\n left: horizontal ?? 0,\n };\n }\n\n if (padding.length === 3) {\n const [top, horizontal, bottom] = padding.map(parseValue);\n return {\n top: top ?? 0,\n right: horizontal ?? 0,\n bottom: bottom ?? 0,\n left: horizontal ?? 0,\n };\n }\n\n if (padding.length === 4) {\n const [top, right, bottom, left] = padding.map(parseValue);\n return { top: top ?? 0, right: right ?? 0, bottom: bottom ?? 0, left: left ?? 0 };\n }\n\n return { top: 0, right: 0, bottom: 0, left: 0 };\n};\n\nexport const getUsableHeight = async (shouldRemovePadding?: boolean) => {\n let usableHeight;\n\n const { bottomBarHeight, offsetTop, windowHeight } = await getWindowMetrics();\n\n const { bottom, top } = shouldRemovePadding\n ? { bottom: 0, top: 0 }\n : getPageProviderInformation();\n\n usableHeight = windowHeight - bottom - top;\n\n if (bottomBarHeight) {\n usableHeight -= bottomBarHeight;\n }\n\n if (offsetTop) {\n usableHeight -= offsetTop;\n }\n\n return usableHeight;\n};\n\nexport const useUsableHeight = (shouldRemovePadding?: boolean) => {\n let usableHeight;\n\n const { bottomBarHeight, offsetTop, windowHeight } = useWindowMetrics();\n\n const { bottom, top } = shouldRemovePadding\n ? { bottom: 0, top: 0 }\n : getPageProviderInformation();\n\n usableHeight = windowHeight - bottom - top;\n\n if (bottomBarHeight) {\n usableHeight -= bottomBarHeight;\n }\n\n if (offsetTop) {\n usableHeight -= offsetTop;\n }\n\n return usableHeight;\n};\n"],"mappings":"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","ignoreList":[]}
package/lib/types/utils/pageProvider.d.ts CHANGED
@@ -1,2 +1,3 @@
1
1
  export declare const getPagePadding: () => "0" | "35px 43px 30px" | "15px 10px 20px";
2
2
  export declare const getUsableHeight: (shouldRemovePadding?: boolean) => Promise<number>;
3
+ export declare const useUsableHeight: (shouldRemovePadding?: boolean) => number;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@chayns-components/core",
3
- "version": "5.0.0-beta.987",
3
+ "version": "5.0.0-beta.990",
4
4
  "description": "A set of beautiful React components for developing your own applications with chayns.",
5
5
  "sideEffects": false,
6
6
  "browserslist": [
@@ -87,5 +87,5 @@
87
87
  "publishConfig": {
88
88
  "access": "public"
89
89
  },
90
- "gitHead": "5eebb4024881cd26aff757e4624596c9bfd9ef72"
90
+ "gitHead": "858b5f5d16fdc59d43c6b702a7ab2f4d544ed6eb"
91
91
  }