@chayns-components/core 5.0.0-beta.395 → 5.0.0-beta.396

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 (7) hide show
  1. package/lib/components/combobox/ComboBox.d.ts +4 -0
  2. package/lib/components/combobox/ComboBox.js +9 -5
  3. package/lib/components/combobox/ComboBox.js.map +1 -1
  4. package/lib/components/combobox/ComboBox.styles.d.ts +1 -0
  5. package/lib/components/combobox/ComboBox.styles.js +44 -32
  6. package/lib/components/combobox/ComboBox.styles.js.map +1 -1
  7. package/package.json +2 -2
package/lib/components/combobox/ComboBox.d.ts CHANGED
@@ -10,6 +10,10 @@ export type ComboBoxProps = {
10
10
  * The direction in which the combobox should open.
11
11
  */
12
12
  direction?: ComboBoxDirection;
13
+ /**
14
+ * Whether the combobox should be disabled.
15
+ */
16
+ isDisabled?: boolean;
13
17
  /**
14
18
  * The list of the items that should be displayed.
15
19
  */
package/lib/components/combobox/ComboBox.js CHANGED
@@ -16,6 +16,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
16
16
  const ComboBox = _ref => {
17
17
  let {
18
18
  direction = _comboBox.ComboBoxDirection.BOTTOM,
19
+ isDisabled = false,
19
20
  list,
20
21
  maxHeight = '300px',
21
22
  onSelect,
@@ -117,9 +118,11 @@ const ComboBox = _ref => {
117
118
  /**
118
119
  * This function opens the content of the combobox
119
120
  */
120
- const handleHeaderClick = () => {
121
- setIsAnimating(prevState => !prevState);
122
- };
121
+ const handleHeaderClick = (0, _react.useCallback)(() => {
122
+ if (!isDisabled) {
123
+ setIsAnimating(prevState => !prevState);
124
+ }
125
+ }, [isDisabled]);
123
126
  const comboBoxBody = (0, _react.useMemo)(() => {
124
127
  const items = list.map(_ref4 => {
125
128
  let {
@@ -170,13 +173,14 @@ const ComboBox = _ref => {
170
173
  minWidth: minWidth,
171
174
  onClick: handleHeaderClick,
172
175
  isOpen: isAnimating,
173
- isMobile: isMobile
176
+ isMobile: isMobile,
177
+ isDisabled: isDisabled
174
178
  }, /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBoxPlaceholder, null, placeholderImageUrl && /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBoxPlaceholderImage, {
175
179
  src: placeholderImageUrl,
176
180
  shouldShowRoundImage: shouldShowRoundImage
177
181
  }), placeholderText), /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBoxIconWrapper, null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
178
182
  icons: ['fa fa-chevron-down']
179
- }))), direction === _comboBox.ComboBoxDirection.BOTTOM && comboBoxBody), [comboBoxBody, direction, isAnimating, isMobile, minWidth, placeholderImageUrl, placeholderText, shouldShowRoundImage]);
183
+ }))), direction === _comboBox.ComboBoxDirection.BOTTOM && comboBoxBody), [comboBoxBody, direction, handleHeaderClick, isAnimating, isDisabled, isMobile, minWidth, placeholderImageUrl, placeholderText, shouldShowRoundImage]);
180
184
  };
181
185
  ComboBox.displayName = 'ComboBox';
182
186
  var _default = exports.default = ComboBox;
package/lib/components/combobox/ComboBox.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ComboBox.js","names":["_react","_interopRequireWildcard","require","_comboBox","_calculate","_Icon","_interopRequireDefault","_ComboBoxItem","_ComboBox","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","ComboBox","_ref","direction","ComboBoxDirection","BOTTOM","list","maxHeight","onSelect","placeholder","selectedItem","shouldShowRoundImage","item","setItem","useState","isAnimating","setIsAnimating","minWidth","setMinWidth","height","setHeight","ref","useRef","isMobile","chayns","env","handleClick","useCallback","event","current","contains","target","useEffect","document","addEventListener","removeEventListener","handleSetSelectedItem","itemToSelect","isAtLeastOneItemWithImageGiven","some","_ref2","imageUrl","textArray","map","_ref3","text","calculateContentHeight","push","calculateContentWidth","placeholderImageUrl","useMemo","undefined","placeholderText","handleHeaderClick","prevState","comboBoxBody","items","_ref4","value","createElement","isSelected","key","animate","opacity","style","TOP","transform","StyledMotionComboBoxBody","initial","transition","duration","StyledComboBox","StyledComboBoxHeader","onClick","isOpen","StyledComboBoxPlaceholder","StyledComboBoxPlaceholderImage","src","StyledComboBoxIconWrapper","icons","displayName","_default","exports"],"sources":["../../../src/components/combobox/ComboBox.tsx"],"sourcesContent":["import React, {\n FC,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n type CSSProperties,\n} from 'react';\nimport { ComboBoxDirection } from '../../types/comboBox';\nimport { calculateContentHeight, calculateContentWidth } from '../../utils/calculate';\nimport Icon from '../icon/Icon';\nimport ComboBoxItem from './combobox-item/ComboBoxItem';\nimport {\n StyledComboBox,\n StyledComboBoxHeader,\n StyledComboBoxIconWrapper,\n StyledComboBoxPlaceholder,\n StyledComboBoxPlaceholderImage,\n StyledMotionComboBoxBody,\n} from './ComboBox.styles';\n\nexport interface IComboBoxItem {\n imageUrl?: string;\n text: string;\n value: string | number;\n}\n\nexport type ComboBoxProps = {\n /**\n * The direction in which the combobox should open.\n */\n direction?: ComboBoxDirection;\n /**\n * The list of the items that should be displayed.\n */\n list: IComboBoxItem[];\n /**\n * The maximum height of the combobox content.\n */\n maxHeight?: CSSProperties['maxHeight'];\n /**\n * Function that should be executed when an item is selected.\n */\n onSelect?: (comboboxItem: IComboBoxItem) => void;\n /**\n * A text that should be displayed when no item is selected.\n */\n placeholder: string;\n /**\n * An item that should be preselected.\n */\n selectedItem?: IComboBoxItem;\n /**\n * If true, the images of the items are displayed in a round shape.\n */\n shouldShowRoundImage?: boolean;\n};\n\nconst ComboBox: FC<ComboBoxProps> = ({\n direction = ComboBoxDirection.BOTTOM,\n list,\n maxHeight = '300px',\n onSelect,\n placeholder,\n selectedItem,\n shouldShowRoundImage,\n}) => {\n const [item, setItem] = useState<IComboBoxItem>();\n const [isAnimating, setIsAnimating] = useState(false);\n const [minWidth, setMinWidth] = useState(0);\n const [height, setHeight] = useState(0);\n\n const ref = useRef<HTMLDivElement>(null);\n\n const { isMobile } = chayns.env;\n\n const handleClick = useCallback(\n (event: MouseEvent) => {\n if (ref.current && !ref.current.contains(event.target as Node)) {\n setIsAnimating(false);\n }\n },\n [ref],\n );\n\n /**\n * This function adds an event listener to the document to close the combobox when the user clicks outside of it\n */\n useEffect(() => {\n document.addEventListener('click', handleClick);\n\n return () => {\n document.removeEventListener('click', handleClick);\n };\n }, [handleClick, ref]);\n\n /**\n * This function sets the selected item\n */\n const handleSetSelectedItem = useCallback(\n (itemToSelect: IComboBoxItem) => {\n setItem(itemToSelect);\n setIsAnimating(false);\n\n if (onSelect) {\n onSelect(itemToSelect);\n }\n },\n [onSelect],\n );\n\n /**\n * This function calculates the greatest width\n */\n useEffect(() => {\n const isAtLeastOneItemWithImageGiven = list.some(({ imageUrl }) => imageUrl);\n\n const textArray = list.map(({ text }) => text);\n\n setHeight(calculateContentHeight(textArray));\n\n textArray.push(placeholder);\n\n // 45px = padding left + padding right + border left + border right + arrow icon width + arrow icon margin left\n // 32px = image width + flex gap\n setMinWidth(\n calculateContentWidth(textArray) + 45 + (isAtLeastOneItemWithImageGiven ? 32 : 0),\n );\n }, [list, placeholder]);\n\n /**\n * This function sets the external selected item\n */\n useEffect(() => {\n if (selectedItem) {\n setItem(selectedItem);\n setIsAnimating(false);\n }\n }, [selectedItem]);\n\n const placeholderImageUrl = useMemo(() => {\n if (selectedItem) {\n return selectedItem.imageUrl;\n }\n\n if (item) {\n return item.imageUrl;\n }\n\n return undefined;\n }, [item, selectedItem]);\n\n /**\n * This function resets the placeholder\n */\n const placeholderText = useMemo(() => {\n let text = placeholder;\n\n if (selectedItem) {\n text = selectedItem.text;\n } else if (item) {\n text = item.text;\n }\n\n return text;\n }, [item, placeholder, selectedItem]);\n\n /**\n * This function opens the content of the combobox\n */\n const handleHeaderClick = () => {\n setIsAnimating((prevState) => !prevState);\n };\n\n const comboBoxBody = useMemo(() => {\n const items = list.map(({ imageUrl, text, value }) => (\n <ComboBoxItem\n imageUrl={imageUrl}\n isSelected={selectedItem ? value === selectedItem.value : false}\n key={value}\n onSelect={handleSetSelectedItem}\n shouldShowRoundImage={shouldShowRoundImage}\n text={text}\n value={value}\n />\n ));\n\n const animate = isAnimating\n ? { height: 'fit-content', opacity: 1 }\n : { height: 0, opacity: 0 };\n\n const style =\n direction === ComboBoxDirection.TOP ? { transform: 'translateY(-100%)' } : undefined;\n\n return (\n <StyledMotionComboBoxBody\n animate={animate}\n height={height}\n initial={{ height: 0, opacity: 0 }}\n maxHeight={maxHeight}\n minWidth={minWidth}\n style={style}\n direction={direction}\n transition={{ duration: 0.2 }}\n >\n {items}\n </StyledMotionComboBoxBody>\n );\n }, [\n direction,\n handleSetSelectedItem,\n height,\n isAnimating,\n list,\n maxHeight,\n minWidth,\n selectedItem,\n shouldShowRoundImage,\n ]);\n\n return useMemo(\n () => (\n <StyledComboBox ref={ref}>\n {direction === ComboBoxDirection.TOP && comboBoxBody}\n <StyledComboBoxHeader\n direction={direction}\n minWidth={minWidth}\n onClick={handleHeaderClick}\n isOpen={isAnimating}\n isMobile={isMobile}\n >\n <StyledComboBoxPlaceholder>\n {placeholderImageUrl && (\n <StyledComboBoxPlaceholderImage\n src={placeholderImageUrl}\n shouldShowRoundImage={shouldShowRoundImage}\n />\n )}\n {placeholderText}\n </StyledComboBoxPlaceholder>\n <StyledComboBoxIconWrapper>\n <Icon icons={['fa fa-chevron-down']} />\n </StyledComboBoxIconWrapper>\n </StyledComboBoxHeader>\n {direction === ComboBoxDirection.BOTTOM && comboBoxBody}\n </StyledComboBox>\n ),\n [\n comboBoxBody,\n direction,\n isAnimating,\n isMobile,\n minWidth,\n placeholderImageUrl,\n placeholderText,\n shouldShowRoundImage,\n ],\n );\n};\n\nComboBox.displayName = 'ComboBox';\n\nexport default ComboBox;\n"],"mappings":"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"}
1
+ {"version":3,"file":"ComboBox.js","names":["_react","_interopRequireWildcard","require","_comboBox","_calculate","_Icon","_interopRequireDefault","_ComboBoxItem","_ComboBox","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","ComboBox","_ref","direction","ComboBoxDirection","BOTTOM","isDisabled","list","maxHeight","onSelect","placeholder","selectedItem","shouldShowRoundImage","item","setItem","useState","isAnimating","setIsAnimating","minWidth","setMinWidth","height","setHeight","ref","useRef","isMobile","chayns","env","handleClick","useCallback","event","current","contains","target","useEffect","document","addEventListener","removeEventListener","handleSetSelectedItem","itemToSelect","isAtLeastOneItemWithImageGiven","some","_ref2","imageUrl","textArray","map","_ref3","text","calculateContentHeight","push","calculateContentWidth","placeholderImageUrl","useMemo","undefined","placeholderText","handleHeaderClick","prevState","comboBoxBody","items","_ref4","value","createElement","isSelected","key","animate","opacity","style","TOP","transform","StyledMotionComboBoxBody","initial","transition","duration","StyledComboBox","StyledComboBoxHeader","onClick","isOpen","StyledComboBoxPlaceholder","StyledComboBoxPlaceholderImage","src","StyledComboBoxIconWrapper","icons","displayName","_default","exports"],"sources":["../../../src/components/combobox/ComboBox.tsx"],"sourcesContent":["import React, {\n FC,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n type CSSProperties,\n} from 'react';\nimport { ComboBoxDirection } from '../../types/comboBox';\nimport { calculateContentHeight, calculateContentWidth } from '../../utils/calculate';\nimport Icon from '../icon/Icon';\nimport ComboBoxItem from './combobox-item/ComboBoxItem';\nimport {\n StyledComboBox,\n StyledComboBoxHeader,\n StyledComboBoxIconWrapper,\n StyledComboBoxPlaceholder,\n StyledComboBoxPlaceholderImage,\n StyledMotionComboBoxBody,\n} from './ComboBox.styles';\n\nexport interface IComboBoxItem {\n imageUrl?: string;\n text: string;\n value: string | number;\n}\n\nexport type ComboBoxProps = {\n /**\n * The direction in which the combobox should open.\n */\n direction?: ComboBoxDirection;\n /**\n * Whether the combobox should be disabled.\n */\n isDisabled?: boolean;\n /**\n * The list of the items that should be displayed.\n */\n list: IComboBoxItem[];\n /**\n * The maximum height of the combobox content.\n */\n maxHeight?: CSSProperties['maxHeight'];\n /**\n * Function that should be executed when an item is selected.\n */\n onSelect?: (comboboxItem: IComboBoxItem) => void;\n /**\n * A text that should be displayed when no item is selected.\n */\n placeholder: string;\n /**\n * An item that should be preselected.\n */\n selectedItem?: IComboBoxItem;\n /**\n * If true, the images of the items are displayed in a round shape.\n */\n shouldShowRoundImage?: boolean;\n};\n\nconst ComboBox: FC<ComboBoxProps> = ({\n direction = ComboBoxDirection.BOTTOM,\n isDisabled = false,\n list,\n maxHeight = '300px',\n onSelect,\n placeholder,\n selectedItem,\n shouldShowRoundImage,\n}) => {\n const [item, setItem] = useState<IComboBoxItem>();\n const [isAnimating, setIsAnimating] = useState(false);\n const [minWidth, setMinWidth] = useState(0);\n const [height, setHeight] = useState(0);\n\n const ref = useRef<HTMLDivElement>(null);\n\n const { isMobile } = chayns.env;\n\n const handleClick = useCallback(\n (event: MouseEvent) => {\n if (ref.current && !ref.current.contains(event.target as Node)) {\n setIsAnimating(false);\n }\n },\n [ref]\n );\n\n /**\n * This function adds an event listener to the document to close the combobox when the user clicks outside of it\n */\n useEffect(() => {\n document.addEventListener('click', handleClick);\n\n return () => {\n document.removeEventListener('click', handleClick);\n };\n }, [handleClick, ref]);\n\n /**\n * This function sets the selected item\n */\n const handleSetSelectedItem = useCallback(\n (itemToSelect: IComboBoxItem) => {\n setItem(itemToSelect);\n setIsAnimating(false);\n\n if (onSelect) {\n onSelect(itemToSelect);\n }\n },\n [onSelect]\n );\n\n /**\n * This function calculates the greatest width\n */\n useEffect(() => {\n const isAtLeastOneItemWithImageGiven = list.some(({ imageUrl }) => imageUrl);\n\n const textArray = list.map(({ text }) => text);\n\n setHeight(calculateContentHeight(textArray));\n\n textArray.push(placeholder);\n\n // 45px = padding left + padding right + border left + border right + arrow icon width + arrow icon margin left\n // 32px = image width + flex gap\n setMinWidth(\n calculateContentWidth(textArray) + 45 + (isAtLeastOneItemWithImageGiven ? 32 : 0)\n );\n }, [list, placeholder]);\n\n /**\n * This function sets the external selected item\n */\n useEffect(() => {\n if (selectedItem) {\n setItem(selectedItem);\n setIsAnimating(false);\n }\n }, [selectedItem]);\n\n const placeholderImageUrl = useMemo(() => {\n if (selectedItem) {\n return selectedItem.imageUrl;\n }\n\n if (item) {\n return item.imageUrl;\n }\n\n return undefined;\n }, [item, selectedItem]);\n\n /**\n * This function resets the placeholder\n */\n const placeholderText = useMemo(() => {\n let text = placeholder;\n\n if (selectedItem) {\n text = selectedItem.text;\n } else if (item) {\n text = item.text;\n }\n\n return text;\n }, [item, placeholder, selectedItem]);\n\n /**\n * This function opens the content of the combobox\n */\n const handleHeaderClick = useCallback(() => {\n if (!isDisabled) {\n setIsAnimating((prevState) => !prevState);\n }\n }, [isDisabled]);\n\n const comboBoxBody = useMemo(() => {\n const items = list.map(({ imageUrl, text, value }) => (\n <ComboBoxItem\n imageUrl={imageUrl}\n isSelected={selectedItem ? value === selectedItem.value : false}\n key={value}\n onSelect={handleSetSelectedItem}\n shouldShowRoundImage={shouldShowRoundImage}\n text={text}\n value={value}\n />\n ));\n\n const animate = isAnimating\n ? { height: 'fit-content', opacity: 1 }\n : { height: 0, opacity: 0 };\n\n const style =\n direction === ComboBoxDirection.TOP ? { transform: 'translateY(-100%)' } : undefined;\n\n return (\n <StyledMotionComboBoxBody\n animate={animate}\n height={height}\n initial={{ height: 0, opacity: 0 }}\n maxHeight={maxHeight}\n minWidth={minWidth}\n style={style}\n direction={direction}\n transition={{ duration: 0.2 }}\n >\n {items}\n </StyledMotionComboBoxBody>\n );\n }, [\n direction,\n handleSetSelectedItem,\n height,\n isAnimating,\n list,\n maxHeight,\n minWidth,\n selectedItem,\n shouldShowRoundImage,\n ]);\n\n return useMemo(\n () => (\n <StyledComboBox ref={ref}>\n {direction === ComboBoxDirection.TOP && comboBoxBody}\n <StyledComboBoxHeader\n direction={direction}\n minWidth={minWidth}\n onClick={handleHeaderClick}\n isOpen={isAnimating}\n isMobile={isMobile}\n isDisabled={isDisabled}\n >\n <StyledComboBoxPlaceholder>\n {placeholderImageUrl && (\n <StyledComboBoxPlaceholderImage\n src={placeholderImageUrl}\n shouldShowRoundImage={shouldShowRoundImage}\n />\n )}\n {placeholderText}\n </StyledComboBoxPlaceholder>\n <StyledComboBoxIconWrapper>\n <Icon icons={['fa fa-chevron-down']} />\n </StyledComboBoxIconWrapper>\n </StyledComboBoxHeader>\n {direction === ComboBoxDirection.BOTTOM && comboBoxBody}\n </StyledComboBox>\n ),\n [\n comboBoxBody,\n direction,\n handleHeaderClick,\n isAnimating,\n isDisabled,\n isMobile,\n minWidth,\n placeholderImageUrl,\n placeholderText,\n shouldShowRoundImage,\n ]\n );\n};\n\nComboBox.displayName = 'ComboBox';\n\nexport default ComboBox;\n"],"mappings":"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"}
package/lib/components/combobox/ComboBox.styles.d.ts CHANGED
@@ -8,6 +8,7 @@ type StyledComboBoxHeaderProps = WithTheme<{
8
8
  isOpen: boolean;
9
9
  minWidth: number;
10
10
  direction: ComboBoxDirection;
11
+ isDisabled?: boolean;
11
12
  }>;
12
13
  export declare const StyledComboBoxHeader: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledComboBoxHeaderProps>>;
13
14
  export declare const StyledComboBoxPlaceholder: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
package/lib/components/combobox/ComboBox.styles.js CHANGED
@@ -18,31 +18,42 @@ const StyledComboBoxHeader = exports.StyledComboBoxHeader = _styledComponents.de
18
18
  justify-content: space-between;
19
19
  border: 1px solid rgba(160, 160, 160, 0.3);
20
20
  padding: 4px 10px;
21
- cursor: pointer;
22
- background: ${_ref => {
21
+ cursor: ${_ref => {
23
22
  let {
24
- theme
23
+ isDisabled
25
24
  } = _ref;
25
+ return !isDisabled ? 'pointer' : 'not-allowed';
26
+ }};
27
+ background: ${_ref2 => {
28
+ let {
29
+ theme
30
+ } = _ref2;
26
31
  return theme['001'];
27
32
  }};
28
- min-width: ${_ref2 => {
33
+ opacity: ${_ref3 => {
34
+ let {
35
+ isDisabled
36
+ } = _ref3;
37
+ return isDisabled ? 0.5 : 1;
38
+ }};
39
+ min-width: ${_ref4 => {
29
40
  let {
30
41
  minWidth
31
- } = _ref2;
42
+ } = _ref4;
32
43
  return minWidth;
33
44
  }}px;
34
- max-width: ${_ref3 => {
45
+ max-width: ${_ref5 => {
35
46
  let {
36
47
  minWidth
37
- } = _ref3;
48
+ } = _ref5;
38
49
  return minWidth;
39
50
  }}px;
40
51
 
41
- ${_ref4 => {
52
+ ${_ref6 => {
42
53
  let {
43
54
  isOpen,
44
55
  direction
45
- } = _ref4;
56
+ } = _ref6;
46
57
  if (isOpen) {
47
58
  return direction === _comboBox.ComboBoxDirection.BOTTOM ? (0, _styledComponents.css)`
48
59
  border-top-left-radius: 3px;
@@ -57,12 +68,13 @@ const StyledComboBoxHeader = exports.StyledComboBoxHeader = _styledComponents.de
57
68
  `;
58
69
  }}
59
70
 
60
- ${_ref5 => {
71
+ ${_ref7 => {
61
72
  let {
62
73
  isMobile,
74
+ isDisabled,
63
75
  theme
64
- } = _ref5;
65
- return !isMobile && (0, _styledComponents.css)`
76
+ } = _ref7;
77
+ return !isMobile && !isDisabled && (0, _styledComponents.css)`
66
78
  &:hover {
67
79
  background-color: ${theme['secondary-101']};
68
80
  }
@@ -71,10 +83,10 @@ const StyledComboBoxHeader = exports.StyledComboBoxHeader = _styledComponents.de
71
83
  `;
72
84
  const StyledComboBoxPlaceholder = exports.StyledComboBoxPlaceholder = _styledComponents.default.div`
73
85
  align-items: center;
74
- color: ${_ref6 => {
86
+ color: ${_ref8 => {
75
87
  let {
76
88
  theme
77
- } = _ref6;
89
+ } = _ref8;
78
90
  return theme.text;
79
91
  }};
80
92
  display: flex;
@@ -82,19 +94,19 @@ const StyledComboBoxPlaceholder = exports.StyledComboBoxPlaceholder = _styledCom
82
94
  `;
83
95
  const StyledComboBoxPlaceholderImage = exports.StyledComboBoxPlaceholderImage = _styledComponents.default.img`
84
96
  box-shadow: 0 0 0 1px
85
- rgba(${_ref7 => {
97
+ rgba(${_ref9 => {
86
98
  let {
87
99
  theme
88
- } = _ref7;
100
+ } = _ref9;
89
101
  return theme['009-rgb'];
90
102
  }}, 0.15);
91
103
  height: 22px;
92
104
  width: 22px;
93
105
 
94
- ${_ref8 => {
106
+ ${_ref10 => {
95
107
  let {
96
108
  shouldShowRoundImage
97
- } = _ref8;
109
+ } = _ref10;
98
110
  return shouldShowRoundImage && (0, _styledComponents.css)`
99
111
  border-radius: 50%;
100
112
  `;
@@ -104,10 +116,10 @@ const StyledComboBoxIconWrapper = exports.StyledComboBoxIconWrapper = _styledCom
104
116
  margin-left: 5px;
105
117
  `;
106
118
  const StyledMotionComboBoxBody = exports.StyledMotionComboBoxBody = (0, _styledComponents.default)(_framerMotion.motion.div)`
107
- background: ${_ref9 => {
119
+ background: ${_ref11 => {
108
120
  let {
109
121
  theme
110
- } = _ref9;
122
+ } = _ref11;
111
123
  return theme['001'];
112
124
  }};
113
125
  display: flex;
@@ -116,42 +128,42 @@ const StyledMotionComboBoxBody = exports.StyledMotionComboBoxBody = (0, _styledC
116
128
  flex-direction: column;
117
129
  border: 1px solid rgba(160, 160, 160, 0.3);
118
130
  cursor: pointer;
119
- min-width: ${_ref10 => {
131
+ min-width: ${_ref12 => {
120
132
  let {
121
133
  minWidth
122
- } = _ref10;
134
+ } = _ref12;
123
135
  return minWidth;
124
136
  }}px;
125
- max-width: ${_ref11 => {
137
+ max-width: ${_ref13 => {
126
138
  let {
127
139
  minWidth
128
- } = _ref11;
140
+ } = _ref13;
129
141
  return minWidth;
130
142
  }}px;
131
- max-height: ${_ref12 => {
143
+ max-height: ${_ref14 => {
132
144
  let {
133
145
  maxHeight
134
- } = _ref12;
146
+ } = _ref14;
135
147
  return maxHeight;
136
148
  }};
137
- overflow-y: ${_ref13 => {
149
+ overflow-y: ${_ref15 => {
138
150
  let {
139
151
  height
140
- } = _ref13;
152
+ } = _ref15;
141
153
  return height <= 300 ? 'hidden' : 'auto';
142
154
  }};
143
- box-shadow: 0 0 0 1px rgba(${_ref14 => {
155
+ box-shadow: 0 0 0 1px rgba(${_ref16 => {
144
156
  let {
145
157
  theme
146
- } = _ref14;
158
+ } = _ref16;
147
159
  return theme['009-rgb'];
148
160
  }}, 0.08)
149
161
  inset;
150
162
 
151
- ${_ref15 => {
163
+ ${_ref17 => {
152
164
  let {
153
165
  direction
154
- } = _ref15;
166
+ } = _ref17;
155
167
  if (direction === _comboBox.ComboBoxDirection.BOTTOM) {
156
168
  return (0, _styledComponents.css)`
157
169
  border-bottom-left-radius: 3px;
package/lib/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","prototype","hasOwnProperty","call","i","set","StyledComboBox","exports","styled","div","StyledComboBoxHeader","_ref","theme","_ref2","minWidth","_ref3","_ref4","isOpen","direction","ComboBoxDirection","BOTTOM","css","_ref5","isMobile","StyledComboBoxPlaceholder","_ref6","text","StyledComboBoxPlaceholderImage","img","_ref7","_ref8","shouldShowRoundImage","StyledComboBoxIconWrapper","StyledMotionComboBoxBody","motion","_ref9","_ref10","_ref11","_ref12","maxHeight","_ref13","height","_ref14","_ref15"],"sources":["../../../src/components/combobox/ComboBox.styles.ts"],"sourcesContent":["import { 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 { ComboBoxItemProps } from './combobox-item/ComboBoxItem';\n\nexport const StyledComboBox = styled.div`\n user-select: none;\n width: fit-content;\n`;\n\ntype StyledComboBoxHeaderProps = WithTheme<{\n isMobile: boolean;\n isOpen: boolean;\n minWidth: number;\n direction: ComboBoxDirection;\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: pointer;\n background: ${({ theme }: StyledComboBoxHeaderProps) => theme['001']};\n min-width: ${({ minWidth }) => minWidth}px;\n max-width: ${({ minWidth }) => minWidth}px;\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 ${({ isMobile, theme }: StyledComboBoxHeaderProps) =>\n !isMobile &&\n css`\n &:hover {\n background-color: ${theme['secondary-101']};\n }\n `}\n`;\n\ntype StyledComboBoxPlaceholderProps = WithTheme<unknown>;\n\nexport const StyledComboBoxPlaceholder = styled.div<StyledComboBoxPlaceholderProps>`\n align-items: center;\n color: ${({ theme }: StyledComboBoxPlaceholderProps) => theme.text};\n display: flex;\n gap: 10px;\n`;\n\ntype StyledComboBoxPlaceholderImageProps = WithTheme<\n Pick<ComboBoxItemProps, '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: 22px;\n width: 22px;\n\n ${({ shouldShowRoundImage }) =>\n shouldShowRoundImage &&\n css`\n border-radius: 50%;\n `}\n`;\n\nexport const StyledComboBoxIconWrapper = styled.div`\n margin-left: 5px;\n`;\n\ntype StyledComboBoxBodyProps = WithTheme<{\n height: number;\n minWidth: number;\n maxHeight: CSSProperties['maxHeight'];\n direction: ComboBoxDirection;\n}>;\n\nexport const StyledMotionComboBoxBody = styled(motion.div)<StyledComboBoxBodyProps>`\n background: ${({ theme }: StyledComboBoxBodyProps) => theme['001']};\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 min-width: ${({ minWidth }) => minWidth}px;\n max-width: ${({ minWidth }) => minWidth}px;\n max-height: ${({ maxHeight }) => maxHeight};\n overflow-y: ${({ height }) => (height <= 300 ? 'hidden' : 'auto')};\n box-shadow: 0 0 0 1px rgba(${({ theme }: StyledComboBoxBodyProps) => theme['009-rgb']}, 0.08)\n inset;\n\n ${({ direction }) => {\n if (direction === ComboBoxDirection.BOTTOM) {\n return css`\n border-bottom-left-radius: 3px;\n border-bottom-right-radius: 3px;\n border-top: none;\n `;\n }\n\n return css`\n border-top-left-radius: 3px;\n border-top-right-radius: 3px;\n border-bottom: none;\n `;\n }}\n\n &::-webkit-scrollbar {\n width: 5px;\n }\n\n &::-webkit-scrollbar-thumb {\n background: rgba(160, 160, 160, 1);\n }\n`;\n"],"mappings":"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"}
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","prototype","hasOwnProperty","call","i","set","StyledComboBox","exports","styled","div","StyledComboBoxHeader","_ref","isDisabled","_ref2","theme","_ref3","_ref4","minWidth","_ref5","_ref6","isOpen","direction","ComboBoxDirection","BOTTOM","css","_ref7","isMobile","StyledComboBoxPlaceholder","_ref8","text","StyledComboBoxPlaceholderImage","img","_ref9","_ref10","shouldShowRoundImage","StyledComboBoxIconWrapper","StyledMotionComboBoxBody","motion","_ref11","_ref12","_ref13","_ref14","maxHeight","_ref15","height","_ref16","_ref17"],"sources":["../../../src/components/combobox/ComboBox.styles.ts"],"sourcesContent":["import { 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 { ComboBoxItemProps } from './combobox-item/ComboBoxItem';\nimport { is } from 'date-fns/locale';\n\nexport const StyledComboBox = styled.div`\n user-select: none;\n width: fit-content;\n`;\n\ntype StyledComboBoxHeaderProps = WithTheme<{\n isMobile: boolean;\n isOpen: boolean;\n minWidth: number;\n direction: ComboBoxDirection;\n isDisabled?: boolean;\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' : 'not-allowed')};\n background: ${({ theme }: StyledComboBoxHeaderProps) => theme['001']};\n opacity: ${({ isDisabled }) => (isDisabled ? 0.5 : 1)};\n min-width: ${({ minWidth }) => minWidth}px;\n max-width: ${({ minWidth }) => minWidth}px;\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 ${({ isMobile, isDisabled, theme }: StyledComboBoxHeaderProps) =>\n !isMobile &&\n !isDisabled &&\n css`\n &:hover {\n background-color: ${theme['secondary-101']};\n }\n `}\n`;\n\ntype StyledComboBoxPlaceholderProps = WithTheme<unknown>;\n\nexport const StyledComboBoxPlaceholder = styled.div<StyledComboBoxPlaceholderProps>`\n align-items: center;\n color: ${({ theme }: StyledComboBoxPlaceholderProps) => theme.text};\n display: flex;\n gap: 10px;\n`;\n\ntype StyledComboBoxPlaceholderImageProps = WithTheme<\n Pick<ComboBoxItemProps, '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: 22px;\n width: 22px;\n\n ${({ shouldShowRoundImage }) =>\n shouldShowRoundImage &&\n css`\n border-radius: 50%;\n `}\n`;\n\nexport const StyledComboBoxIconWrapper = styled.div`\n margin-left: 5px;\n`;\n\ntype StyledComboBoxBodyProps = WithTheme<{\n height: number;\n minWidth: number;\n maxHeight: CSSProperties['maxHeight'];\n direction: ComboBoxDirection;\n}>;\n\nexport const StyledMotionComboBoxBody = styled(motion.div)<StyledComboBoxBodyProps>`\n background: ${({ theme }: StyledComboBoxBodyProps) => theme['001']};\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 min-width: ${({ minWidth }) => minWidth}px;\n max-width: ${({ minWidth }) => minWidth}px;\n max-height: ${({ maxHeight }) => maxHeight};\n overflow-y: ${({ height }) => (height <= 300 ? 'hidden' : 'auto')};\n box-shadow: 0 0 0 1px rgba(${({ theme }: StyledComboBoxBodyProps) => theme['009-rgb']}, 0.08)\n inset;\n\n ${({ direction }) => {\n if (direction === ComboBoxDirection.BOTTOM) {\n return css`\n border-bottom-left-radius: 3px;\n border-bottom-right-radius: 3px;\n border-top: none;\n `;\n }\n\n return css`\n border-top-left-radius: 3px;\n border-top-right-radius: 3px;\n border-bottom: none;\n `;\n }}\n\n &::-webkit-scrollbar {\n width: 5px;\n }\n\n &::-webkit-scrollbar-thumb {\n background: rgba(160, 160, 160, 1);\n }\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AAEA,IAAAC,iBAAA,GAAAC,uBAAA,CAAAF,OAAA;AACA,IAAAG,SAAA,GAAAH,OAAA;AAAyD,SAAAI,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAH,wBAAAG,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAjB,CAAA,EAAAc,CAAA,SAAAI,CAAA,GAAAR,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAI,CAAA,KAAAA,CAAA,CAAAX,GAAA,IAAAW,CAAA,CAAAC,GAAA,IAAAR,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAI,CAAA,IAAAV,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAgB,GAAA,CAAAnB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAKlD,MAAMY,cAAc,GAAAC,OAAA,CAAAD,cAAA,GAAGE,yBAAM,CAACC,GAAI;AACzC;AACA;AACA,CAAC;AAUM,MAAMC,oBAAoB,GAAAH,OAAA,CAAAG,oBAAA,GAAGF,yBAAM,CAACC,GAA+B;AAC1E;AACA;AACA;AACA;AACA,cAAcE,IAAA;EAAA,IAAC;IAAEC;EAAW,CAAC,GAAAD,IAAA;EAAA,OAAM,CAACC,UAAU,GAAG,SAAS,GAAG,aAAa;AAAA,CAAE;AAC5E,kBAAkBC,KAAA;EAAA,IAAC;IAAEC;EAAiC,CAAC,GAAAD,KAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AACzE,eAAeC,KAAA;EAAA,IAAC;IAAEH;EAAW,CAAC,GAAAG,KAAA;EAAA,OAAMH,UAAU,GAAG,GAAG,GAAG,CAAC;AAAA,CAAE;AAC1D,iBAAiBI,KAAA;EAAA,IAAC;IAAEC;EAAS,CAAC,GAAAD,KAAA;EAAA,OAAKC,QAAQ;AAAA,CAAC;AAC5C,iBAAiBC,KAAA;EAAA,IAAC;IAAED;EAAS,CAAC,GAAAC,KAAA;EAAA,OAAKD,QAAQ;AAAA,CAAC;AAC5C;AACA,MAAME,KAAA,IAA2B;EAAA,IAA1B;IAAEC,MAAM;IAAEC;EAAU,CAAC,GAAAF,KAAA;EACpB,IAAIC,MAAM,EAAE;IACR,OAAOC,SAAS,KAAKC,2BAAiB,CAACC,MAAM,GACvC,IAAAC,qBAAG,CAAC;AACtB;AACA;AACA,mBAAmB,GACD,IAAAA,qBAAG,CAAC;AACtB;AACA;AACA,mBAAmB;EACX;EAEA,OAAO,IAAAA,qBAAG,CAAC;AACnB;AACA,SAAS;AACL,CAAE;AACN;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC,QAAQ;IAAEd,UAAU;IAAEE;EAAiC,CAAC,GAAAW,KAAA;EAAA,OACzD,CAACC,QAAQ,IACT,CAACd,UAAU,IACX,IAAAY,qBAAG,CAAC;AACZ;AACA,oCAAoCV,KAAK,CAAC,eAAe,CAAE;AAC3D;AACA,SAAS;AAAA,CAAC;AACV,CAAC;AAIM,MAAMa,yBAAyB,GAAApB,OAAA,CAAAoB,yBAAA,GAAGnB,yBAAM,CAACC,GAAoC;AACpF;AACA,aAAamB,KAAA;EAAA,IAAC;IAAEd;EAAsC,CAAC,GAAAc,KAAA;EAAA,OAAKd,KAAK,CAACe,IAAI;AAAA,CAAC;AACvE;AACA;AACA,CAAC;AAMM,MAAMC,8BAA8B,GAAAvB,OAAA,CAAAuB,8BAAA,GAAGtB,yBAAM,CAACuB,GAAyC;AAC9F;AACA,eAAeC,KAAA;EAAA,IAAC;IAAElB;EAA2C,CAAC,GAAAkB,KAAA;EAAA,OAAKlB,KAAK,CAAC,SAAS,CAAC;AAAA,CAAC;AACpF;AACA;AACA;AACA,MAAMmB,MAAA;EAAA,IAAC;IAAEC;EAAqB,CAAC,GAAAD,MAAA;EAAA,OACvBC,oBAAoB,IACpB,IAAAV,qBAAG,CAAC;AACZ;AACA,SAAS;AAAA,CAAC;AACV,CAAC;AAEM,MAAMW,yBAAyB,GAAA5B,OAAA,CAAA4B,yBAAA,GAAG3B,yBAAM,CAACC,GAAI;AACpD;AACA,CAAC;AASM,MAAM2B,wBAAwB,GAAA7B,OAAA,CAAA6B,wBAAA,GAAG,IAAA5B,yBAAM,EAAC6B,oBAAM,CAAC5B,GAAG,CAA2B;AACpF,kBAAkB6B,MAAA;EAAA,IAAC;IAAExB;EAA+B,CAAC,GAAAwB,MAAA;EAAA,OAAKxB,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AACvE;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiByB,MAAA;EAAA,IAAC;IAAEtB;EAAS,CAAC,GAAAsB,MAAA;EAAA,OAAKtB,QAAQ;AAAA,CAAC;AAC5C,iBAAiBuB,MAAA;EAAA,IAAC;IAAEvB;EAAS,CAAC,GAAAuB,MAAA;EAAA,OAAKvB,QAAQ;AAAA,CAAC;AAC5C,kBAAkBwB,MAAA;EAAA,IAAC;IAAEC;EAAU,CAAC,GAAAD,MAAA;EAAA,OAAKC,SAAS;AAAA,CAAC;AAC/C,kBAAkBC,MAAA;EAAA,IAAC;IAAEC;EAAO,CAAC,GAAAD,MAAA;EAAA,OAAMC,MAAM,IAAI,GAAG,GAAG,QAAQ,GAAG,MAAM;AAAA,CAAE;AACtE,iCAAiCC,MAAA;EAAA,IAAC;IAAE/B;EAA+B,CAAC,GAAA+B,MAAA;EAAA,OAAK/B,KAAK,CAAC,SAAS,CAAC;AAAA,CAAC;AAC1F;AACA;AACA,MAAMgC,MAAA,IAAmB;EAAA,IAAlB;IAAEzB;EAAU,CAAC,GAAAyB,MAAA;EACZ,IAAIzB,SAAS,KAAKC,2BAAiB,CAACC,MAAM,EAAE;IACxC,OAAO,IAAAC,qBAAG,CAAC;AACvB;AACA;AACA;AACA,aAAa;EACL;EAEA,OAAO,IAAAA,qBAAG,CAAC;AACnB;AACA;AACA;AACA,SAAS;AACL,CAAE;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@chayns-components/core",
3
- "version": "5.0.0-beta.395",
3
+ "version": "5.0.0-beta.396",
4
4
  "description": "A set of beautiful React components for developing your own applications with chayns.",
5
5
  "keywords": [
6
6
  "chayns",
@@ -70,5 +70,5 @@
70
70
  "publishConfig": {
71
71
  "access": "public"
72
72
  },
73
- "gitHead": "040aefbbed05d51850e7daf0cbc05b7b84130a63"
73
+ "gitHead": "b9fb37523d8f6b01348ad0e75ebf2175624d0a75"
74
74
  }