@chayns-components/core 5.0.0-beta.160 → 5.0.0-beta.162
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/components/combobox/ComboBox.d.ts +25 -0
- package/lib/components/combobox/ComboBox.js +129 -0
- package/lib/components/combobox/ComboBox.js.map +1 -0
- package/lib/components/combobox/ComboBox.styles.d.ts +12 -0
- package/lib/components/combobox/ComboBox.styles.js +103 -0
- package/lib/components/combobox/ComboBox.styles.js.map +1 -0
- package/lib/components/combobox/combobox-item/ComboBoxItem.d.ts +18 -0
- package/lib/components/combobox/combobox-item/ComboBoxItem.js +30 -0
- package/lib/components/combobox/combobox-item/ComboBoxItem.js.map +1 -0
- package/lib/components/combobox/combobox-item/ComboBoxItem.styles.d.ts +4 -0
- package/lib/components/combobox/combobox-item/ComboBoxItem.styles.js +24 -0
- package/lib/components/combobox/combobox-item/ComboBoxItem.styles.js.map +1 -0
- package/lib/components/combobox/utils.d.ts +1 -0
- package/lib/components/combobox/utils.js +23 -0
- package/lib/components/combobox/utils.js.map +1 -0
- package/lib/index.d.ts +2 -0
- package/lib/index.js +7 -0
- package/lib/index.js.map +1 -1
- package/package.json +2 -2
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { FC } from 'react';
|
|
2
|
+
export interface IComboBoxItem {
|
|
3
|
+
text: string;
|
|
4
|
+
value: string | number;
|
|
5
|
+
}
|
|
6
|
+
export type ComboBoxProps = {
|
|
7
|
+
/**
|
|
8
|
+
* The list of the items that should be displayed.
|
|
9
|
+
*/
|
|
10
|
+
list: IComboBoxItem[];
|
|
11
|
+
/**
|
|
12
|
+
* Function that should be executed when an item is selected.
|
|
13
|
+
*/
|
|
14
|
+
onSelect?: (comboboxItem: IComboBoxItem) => void;
|
|
15
|
+
/**
|
|
16
|
+
* A text that should be displayed when no item is selected.
|
|
17
|
+
*/
|
|
18
|
+
placeholder: string;
|
|
19
|
+
/**
|
|
20
|
+
* An item that should be preselected.
|
|
21
|
+
*/
|
|
22
|
+
selectedItem?: IComboBoxItem;
|
|
23
|
+
};
|
|
24
|
+
declare const ComboBox: FC<ComboBoxProps>;
|
|
25
|
+
export default ComboBox;
|
|
@@ -0,0 +1,129 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
8
|
+
var _Icon = _interopRequireDefault(require("../icon/Icon"));
|
|
9
|
+
var _ComboBoxItem = _interopRequireDefault(require("./combobox-item/ComboBoxItem"));
|
|
10
|
+
var _ComboBox = require("./ComboBox.styles");
|
|
11
|
+
var _utils = require("./utils");
|
|
12
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
13
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
14
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
15
|
+
const ComboBox = _ref => {
|
|
16
|
+
let {
|
|
17
|
+
placeholder,
|
|
18
|
+
list,
|
|
19
|
+
onSelect,
|
|
20
|
+
selectedItem
|
|
21
|
+
} = _ref;
|
|
22
|
+
const [item, setItem] = (0, _react.useState)();
|
|
23
|
+
const [isAnimation, setIsAnimation] = (0, _react.useState)(false);
|
|
24
|
+
const [minWidth, setMinWidth] = (0, _react.useState)(0);
|
|
25
|
+
const ref = (0, _react.useRef)(null);
|
|
26
|
+
const handleClick = (0, _react.useCallback)(event => {
|
|
27
|
+
if (ref.current && !ref.current.contains(event.target)) {
|
|
28
|
+
setIsAnimation(false);
|
|
29
|
+
}
|
|
30
|
+
}, [ref]);
|
|
31
|
+
(0, _react.useEffect)(() => {
|
|
32
|
+
document.addEventListener('click', handleClick);
|
|
33
|
+
return () => {
|
|
34
|
+
document.removeEventListener('click', handleClick);
|
|
35
|
+
};
|
|
36
|
+
}, [handleClick, ref]);
|
|
37
|
+
|
|
38
|
+
/**
|
|
39
|
+
* This function sets the selected item
|
|
40
|
+
*/
|
|
41
|
+
const handleSetSelectedItem = (0, _react.useCallback)(itemToSelect => {
|
|
42
|
+
setItem(itemToSelect);
|
|
43
|
+
setIsAnimation(false);
|
|
44
|
+
if (onSelect) {
|
|
45
|
+
onSelect(itemToSelect);
|
|
46
|
+
}
|
|
47
|
+
}, [onSelect]);
|
|
48
|
+
|
|
49
|
+
/**
|
|
50
|
+
* This function calculates the greatest width
|
|
51
|
+
*/
|
|
52
|
+
(0, _react.useEffect)(() => {
|
|
53
|
+
const textArray = list.map(_ref2 => {
|
|
54
|
+
let {
|
|
55
|
+
text
|
|
56
|
+
} = _ref2;
|
|
57
|
+
return text;
|
|
58
|
+
});
|
|
59
|
+
textArray.push(placeholder);
|
|
60
|
+
setMinWidth((0, _utils.calculateContentWidth)(textArray) + 45);
|
|
61
|
+
}, [list, placeholder]);
|
|
62
|
+
|
|
63
|
+
/**
|
|
64
|
+
* This function sets the external selected item
|
|
65
|
+
*/
|
|
66
|
+
(0, _react.useEffect)(() => {
|
|
67
|
+
if (selectedItem) {
|
|
68
|
+
handleSetSelectedItem(selectedItem);
|
|
69
|
+
}
|
|
70
|
+
}, [handleSetSelectedItem, selectedItem]);
|
|
71
|
+
|
|
72
|
+
/**
|
|
73
|
+
* Function that renders the combobox items
|
|
74
|
+
*/
|
|
75
|
+
const content = (0, _react.useMemo)(() => {
|
|
76
|
+
const items = [];
|
|
77
|
+
list.forEach(_ref3 => {
|
|
78
|
+
let {
|
|
79
|
+
text,
|
|
80
|
+
value
|
|
81
|
+
} = _ref3;
|
|
82
|
+
items.push( /*#__PURE__*/_react.default.createElement(_ComboBoxItem.default, {
|
|
83
|
+
key: value,
|
|
84
|
+
value: value,
|
|
85
|
+
text: text,
|
|
86
|
+
onSelect: handleSetSelectedItem
|
|
87
|
+
}));
|
|
88
|
+
});
|
|
89
|
+
return items;
|
|
90
|
+
}, [handleSetSelectedItem, list]);
|
|
91
|
+
|
|
92
|
+
/**
|
|
93
|
+
* This function opens the content of the combobox
|
|
94
|
+
*/
|
|
95
|
+
const handleHeaderClick = () => {
|
|
96
|
+
setIsAnimation(prevState => !prevState);
|
|
97
|
+
};
|
|
98
|
+
return (0, _react.useMemo)(() => {
|
|
99
|
+
var _item$text;
|
|
100
|
+
return /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBox, {
|
|
101
|
+
ref: ref
|
|
102
|
+
}, /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBoxHeader, {
|
|
103
|
+
minWidth: minWidth,
|
|
104
|
+
onClick: handleHeaderClick,
|
|
105
|
+
isOpen: isAnimation
|
|
106
|
+
}, /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBoxPlaceholder, null, (_item$text = item === null || item === void 0 ? void 0 : item.text) !== null && _item$text !== void 0 ? _item$text : placeholder), /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBoxIconWrapper, null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
|
|
107
|
+
icons: ['fa fa-chevron-down']
|
|
108
|
+
}))), /*#__PURE__*/_react.default.createElement(_ComboBox.StyledMotionComboBoxBody, {
|
|
109
|
+
initial: {
|
|
110
|
+
height: 0,
|
|
111
|
+
opacity: 0
|
|
112
|
+
},
|
|
113
|
+
animate: isAnimation ? {
|
|
114
|
+
height: 'fit-content',
|
|
115
|
+
opacity: 1
|
|
116
|
+
} : {
|
|
117
|
+
height: 0,
|
|
118
|
+
opacity: 0
|
|
119
|
+
},
|
|
120
|
+
transition: {
|
|
121
|
+
duration: 0.2
|
|
122
|
+
}
|
|
123
|
+
}, content));
|
|
124
|
+
}, [content, isAnimation, item === null || item === void 0 ? void 0 : item.text, minWidth, placeholder]);
|
|
125
|
+
};
|
|
126
|
+
ComboBox.displayName = 'ComboBox';
|
|
127
|
+
var _default = ComboBox;
|
|
128
|
+
exports.default = _default;
|
|
129
|
+
//# sourceMappingURL=ComboBox.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ComboBox.js","names":["_react","_interopRequireWildcard","require","_Icon","_interopRequireDefault","_ComboBoxItem","_ComboBox","_utils","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","ComboBox","_ref","placeholder","list","onSelect","selectedItem","item","setItem","useState","isAnimation","setIsAnimation","minWidth","setMinWidth","ref","useRef","handleClick","useCallback","event","current","contains","target","useEffect","document","addEventListener","removeEventListener","handleSetSelectedItem","itemToSelect","textArray","map","_ref2","text","push","calculateContentWidth","content","useMemo","items","forEach","_ref3","value","createElement","handleHeaderClick","prevState","_item$text","StyledComboBox","StyledComboBoxHeader","onClick","isOpen","StyledComboBoxPlaceholder","StyledComboBoxIconWrapper","icons","StyledMotionComboBoxBody","initial","height","opacity","animate","transition","duration","displayName","_default","exports"],"sources":["../../../src/components/combobox/ComboBox.tsx"],"sourcesContent":["import React, { FC, ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport Icon from '../icon/Icon';\nimport ComboBoxItem from './combobox-item/ComboBoxItem';\nimport {\n StyledComboBox,\n StyledComboBoxHeader,\n StyledComboBoxIconWrapper,\n StyledComboBoxPlaceholder,\n StyledMotionComboBoxBody,\n} from './ComboBox.styles';\nimport { calculateContentWidth } from './utils';\n\nexport interface IComboBoxItem {\n text: string;\n value: string | number;\n}\n\nexport type ComboBoxProps = {\n /**\n * The list of the items that should be displayed.\n */\n list: IComboBoxItem[];\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\nconst ComboBox: FC<ComboBoxProps> = ({ placeholder, list, onSelect, selectedItem }) => {\n const [item, setItem] = useState<IComboBoxItem>();\n const [isAnimation, setIsAnimation] = useState(false);\n const [minWidth, setMinWidth] = useState(0);\n\n const ref = useRef<HTMLDivElement>(null);\n\n const handleClick = useCallback(\n (event: MouseEvent) => {\n if (ref.current && !ref.current.contains(event.target as Node)) {\n setIsAnimation(false);\n }\n },\n [ref]\n );\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 setIsAnimation(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 textArray = list.map(({ text }) => text);\n\n textArray.push(placeholder);\n\n setMinWidth(calculateContentWidth(textArray) + 45);\n }, [list, placeholder]);\n\n /**\n * This function sets the external selected item\n */\n useEffect(() => {\n if (selectedItem) {\n handleSetSelectedItem(selectedItem);\n }\n }, [handleSetSelectedItem, selectedItem]);\n\n /**\n * Function that renders the combobox items\n */\n const content = useMemo(() => {\n const items: ReactNode[] = [];\n\n list.forEach(({ text, value }) => {\n items.push(\n <ComboBoxItem\n key={value}\n value={value}\n text={text}\n onSelect={handleSetSelectedItem}\n />\n );\n });\n\n return items;\n }, [handleSetSelectedItem, list]);\n\n /**\n * This function opens the content of the combobox\n */\n const handleHeaderClick = () => {\n setIsAnimation((prevState) => !prevState);\n };\n\n return useMemo(\n () => (\n <StyledComboBox ref={ref}>\n <StyledComboBoxHeader\n minWidth={minWidth}\n onClick={handleHeaderClick}\n isOpen={isAnimation}\n >\n <StyledComboBoxPlaceholder>\n {item?.text ?? placeholder}\n </StyledComboBoxPlaceholder>\n <StyledComboBoxIconWrapper>\n <Icon icons={['fa fa-chevron-down']} />\n </StyledComboBoxIconWrapper>\n </StyledComboBoxHeader>\n <StyledMotionComboBoxBody\n initial={{ height: 0, opacity: 0 }}\n animate={\n isAnimation\n ? { height: 'fit-content', opacity: 1 }\n : { height: 0, opacity: 0 }\n }\n transition={{\n duration: 0.2,\n }}\n >\n {content}\n </StyledMotionComboBoxBody>\n </StyledComboBox>\n ),\n [content, isAnimation, item?.text, minWidth, placeholder]\n );\n};\n\nComboBox.displayName = 'ComboBox';\n\nexport default ComboBox;\n"],"mappings":"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"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
export declare const StyledComboBox: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
2
|
+
export declare const StyledComboBoxHeader: import("styled-components").StyledComponent<"div", any, {
|
|
3
|
+
isOpen: boolean;
|
|
4
|
+
minWidth: number;
|
|
5
|
+
} & {
|
|
6
|
+
theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
|
|
7
|
+
}, never>;
|
|
8
|
+
export declare const StyledComboBoxPlaceholder: import("styled-components").StyledComponent<"p", any, {}, never>;
|
|
9
|
+
export declare const StyledComboBoxIconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
10
|
+
export declare const StyledMotionComboBoxBody: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, any, {
|
|
11
|
+
theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
|
|
12
|
+
}, never>;
|
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.StyledMotionComboBoxBody = exports.StyledComboBoxPlaceholder = exports.StyledComboBoxIconWrapper = exports.StyledComboBoxHeader = exports.StyledComboBox = void 0;
|
|
7
|
+
var _framerMotion = require("framer-motion");
|
|
8
|
+
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
9
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
10
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
11
|
+
const StyledComboBox = _styledComponents.default.div`
|
|
12
|
+
width: fit-content;
|
|
13
|
+
`;
|
|
14
|
+
exports.StyledComboBox = StyledComboBox;
|
|
15
|
+
const StyledComboBoxHeader = _styledComponents.default.div`
|
|
16
|
+
display: flex;
|
|
17
|
+
justify-content: space-between;
|
|
18
|
+
border: 1px solid rgba(160, 160, 160, 0.3);
|
|
19
|
+
padding: 8px 10px;
|
|
20
|
+
cursor: pointer;
|
|
21
|
+
background: ${_ref => {
|
|
22
|
+
let {
|
|
23
|
+
theme
|
|
24
|
+
} = _ref;
|
|
25
|
+
return theme['001'];
|
|
26
|
+
}};
|
|
27
|
+
min-width: ${_ref2 => {
|
|
28
|
+
let {
|
|
29
|
+
minWidth
|
|
30
|
+
} = _ref2;
|
|
31
|
+
return minWidth;
|
|
32
|
+
}}px;
|
|
33
|
+
max-width: ${_ref3 => {
|
|
34
|
+
let {
|
|
35
|
+
minWidth
|
|
36
|
+
} = _ref3;
|
|
37
|
+
return minWidth;
|
|
38
|
+
}}px;
|
|
39
|
+
|
|
40
|
+
${_ref4 => {
|
|
41
|
+
let {
|
|
42
|
+
isOpen
|
|
43
|
+
} = _ref4;
|
|
44
|
+
return isOpen ? (0, _styledComponents.css)`
|
|
45
|
+
border-top-left-radius: 3px;
|
|
46
|
+
border-top-right-radius: 3px;
|
|
47
|
+
` : (0, _styledComponents.css)`
|
|
48
|
+
border-radius: 3px;
|
|
49
|
+
`;
|
|
50
|
+
}}
|
|
51
|
+
|
|
52
|
+
&:hover {
|
|
53
|
+
background: ${_ref5 => {
|
|
54
|
+
let {
|
|
55
|
+
theme
|
|
56
|
+
} = _ref5;
|
|
57
|
+
return theme['secondary-103'];
|
|
58
|
+
}};
|
|
59
|
+
}
|
|
60
|
+
`;
|
|
61
|
+
exports.StyledComboBoxHeader = StyledComboBoxHeader;
|
|
62
|
+
const StyledComboBoxPlaceholder = _styledComponents.default.p`
|
|
63
|
+
margin: 0;
|
|
64
|
+
`;
|
|
65
|
+
exports.StyledComboBoxPlaceholder = StyledComboBoxPlaceholder;
|
|
66
|
+
const StyledComboBoxIconWrapper = _styledComponents.default.div`
|
|
67
|
+
margin-left: 5px;
|
|
68
|
+
`;
|
|
69
|
+
exports.StyledComboBoxIconWrapper = StyledComboBoxIconWrapper;
|
|
70
|
+
const StyledMotionComboBoxBody = (0, _styledComponents.default)(_framerMotion.motion.div)`
|
|
71
|
+
background: ${_ref6 => {
|
|
72
|
+
let {
|
|
73
|
+
theme
|
|
74
|
+
} = _ref6;
|
|
75
|
+
return theme['001'];
|
|
76
|
+
}};
|
|
77
|
+
display: flex;
|
|
78
|
+
flex-direction: column;
|
|
79
|
+
border: 1px solid rgba(160, 160, 160, 0.3);
|
|
80
|
+
border-bottom-left-radius: 3px;
|
|
81
|
+
border-bottom-right-radius: 3px;
|
|
82
|
+
border-top: none;
|
|
83
|
+
cursor: pointer;
|
|
84
|
+
max-height: 300px;
|
|
85
|
+
overflow-y: auto;
|
|
86
|
+
box-shadow: 0 0 0 1px rgba(${_ref7 => {
|
|
87
|
+
let {
|
|
88
|
+
theme
|
|
89
|
+
} = _ref7;
|
|
90
|
+
return theme['009-rgb'];
|
|
91
|
+
}}, 0.08)
|
|
92
|
+
inset;
|
|
93
|
+
|
|
94
|
+
&::-webkit-scrollbar {
|
|
95
|
+
width: 5px;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
&::-webkit-scrollbar-thumb {
|
|
99
|
+
background: rgba(160, 160, 160, 1);
|
|
100
|
+
}
|
|
101
|
+
`;
|
|
102
|
+
exports.StyledMotionComboBoxBody = StyledMotionComboBoxBody;
|
|
103
|
+
//# sourceMappingURL=ComboBox.styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ComboBox.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","StyledComboBox","styled","div","exports","StyledComboBoxHeader","_ref","theme","_ref2","minWidth","_ref3","_ref4","isOpen","css","_ref5","StyledComboBoxPlaceholder","p","StyledComboBoxIconWrapper","StyledMotionComboBoxBody","motion","_ref6","_ref7"],"sources":["../../../src/components/combobox/ComboBox.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledComboBox = styled.div`\n width: fit-content;\n`;\n\ntype StyledComboBoxHeaderProps = WithTheme<{\n isOpen: boolean;\n minWidth: number;\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: 8px 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 }) =>\n isOpen\n ? css`\n border-top-left-radius: 3px;\n border-top-right-radius: 3px;\n `\n : css`\n border-radius: 3px;\n `}\n\n &:hover {\n background: ${({ theme }: StyledComboBoxHeaderProps) => theme['secondary-103']};\n }\n`;\n\nexport const StyledComboBoxPlaceholder = styled.p`\n margin: 0;\n`;\n\nexport const StyledComboBoxIconWrapper = styled.div`\n margin-left: 5px;\n`;\n\ntype StyledComboBoxBodyProps = WithTheme<unknown>;\n\nexport const StyledMotionComboBoxBody = styled(motion.div)<StyledComboBoxBodyProps>`\n background: ${({ theme }: StyledComboBoxBodyProps) => theme['001']};\n display: flex;\n flex-direction: column;\n border: 1px solid rgba(160, 160, 160, 0.3);\n border-bottom-left-radius: 3px;\n border-bottom-right-radius: 3px;\n border-top: none;\n cursor: pointer;\n max-height: 300px;\n overflow-y: auto;\n box-shadow: 0 0 0 1px rgba(${({ theme }: StyledComboBoxBodyProps) => theme['009-rgb']}, 0.08)\n inset;\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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"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { FC } from 'react';
|
|
2
|
+
import type { IComboBoxItem } from '../ComboBox';
|
|
3
|
+
export type ComboBoxItemProps = {
|
|
4
|
+
/**
|
|
5
|
+
* Function to be executed when an item is selected.
|
|
6
|
+
*/
|
|
7
|
+
onSelect: (itemToSelect: IComboBoxItem) => void;
|
|
8
|
+
/**
|
|
9
|
+
* The text of the item.
|
|
10
|
+
*/
|
|
11
|
+
text: IComboBoxItem['text'];
|
|
12
|
+
/**
|
|
13
|
+
* The value of the item.
|
|
14
|
+
*/
|
|
15
|
+
value: IComboBoxItem['value'];
|
|
16
|
+
};
|
|
17
|
+
declare const ComboBoxItem: FC<ComboBoxItemProps>;
|
|
18
|
+
export default ComboBoxItem;
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
8
|
+
var _ComboBoxItem = require("./ComboBoxItem.styles");
|
|
9
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
10
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
11
|
+
const ComboBoxItem = _ref => {
|
|
12
|
+
let {
|
|
13
|
+
onSelect,
|
|
14
|
+
text,
|
|
15
|
+
value
|
|
16
|
+
} = _ref;
|
|
17
|
+
const handleItemClick = (0, _react.useCallback)(() => {
|
|
18
|
+
onSelect({
|
|
19
|
+
text,
|
|
20
|
+
value
|
|
21
|
+
});
|
|
22
|
+
}, [onSelect, text, value]);
|
|
23
|
+
return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_ComboBoxItem.StyledComboBoxItem, {
|
|
24
|
+
onClick: handleItemClick
|
|
25
|
+
}, /*#__PURE__*/_react.default.createElement(_ComboBoxItem.StyledComboBoxItemText, null, text)), [handleItemClick, text]);
|
|
26
|
+
};
|
|
27
|
+
ComboBoxItem.displayName = 'ComboBoxItem';
|
|
28
|
+
var _default = ComboBoxItem;
|
|
29
|
+
exports.default = _default;
|
|
30
|
+
//# sourceMappingURL=ComboBoxItem.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ComboBoxItem.js","names":["_react","_interopRequireWildcard","require","_ComboBoxItem","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","ComboBoxItem","_ref","onSelect","text","value","handleItemClick","useCallback","useMemo","createElement","StyledComboBoxItem","onClick","StyledComboBoxItemText","displayName","_default","exports"],"sources":["../../../../src/components/combobox/combobox-item/ComboBoxItem.tsx"],"sourcesContent":["import React, { FC, useCallback, useMemo } from 'react';\nimport type { IComboBoxItem } from '../ComboBox';\nimport { StyledComboBoxItem, StyledComboBoxItemText } from './ComboBoxItem.styles';\n\nexport type ComboBoxItemProps = {\n /**\n * Function to be executed when an item is selected.\n */\n onSelect: (itemToSelect: IComboBoxItem) => void;\n /**\n * The text of the item.\n */\n text: IComboBoxItem['text'];\n /**\n * The value of the item.\n */\n value: IComboBoxItem['value'];\n};\n\nconst ComboBoxItem: FC<ComboBoxItemProps> = ({ onSelect, text, value }) => {\n const handleItemClick = useCallback(() => {\n onSelect({ text, value });\n }, [onSelect, text, value]);\n\n return useMemo(\n () => (\n <StyledComboBoxItem onClick={handleItemClick}>\n <StyledComboBoxItemText>{text}</StyledComboBoxItemText>\n </StyledComboBoxItem>\n ),\n [handleItemClick, text]\n );\n};\n\nComboBoxItem.displayName = 'ComboBoxItem';\n\nexport default ComboBoxItem;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAEA,IAAAC,aAAA,GAAAD,OAAA;AAAmF,SAAAE,yBAAAC,WAAA,eAAAC,OAAA,kCAAAC,iBAAA,OAAAD,OAAA,QAAAE,gBAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,WAAA,WAAAA,WAAA,GAAAG,gBAAA,GAAAD,iBAAA,KAAAF,WAAA;AAAA,SAAAJ,wBAAAQ,GAAA,EAAAJ,WAAA,SAAAA,WAAA,IAAAI,GAAA,IAAAA,GAAA,CAAAC,UAAA,WAAAD,GAAA,QAAAA,GAAA,oBAAAA,GAAA,wBAAAA,GAAA,4BAAAE,OAAA,EAAAF,GAAA,UAAAG,KAAA,GAAAR,wBAAA,CAAAC,WAAA,OAAAO,KAAA,IAAAA,KAAA,CAAAC,GAAA,CAAAJ,GAAA,YAAAG,KAAA,CAAAE,GAAA,CAAAL,GAAA,SAAAM,MAAA,WAAAC,qBAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,GAAA,IAAAX,GAAA,QAAAW,GAAA,kBAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAd,GAAA,EAAAW,GAAA,SAAAI,IAAA,GAAAR,qBAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAV,GAAA,EAAAW,GAAA,cAAAI,IAAA,KAAAA,IAAA,CAAAV,GAAA,IAAAU,IAAA,CAAAC,GAAA,KAAAR,MAAA,CAAAC,cAAA,CAAAH,MAAA,EAAAK,GAAA,EAAAI,IAAA,YAAAT,MAAA,CAAAK,GAAA,IAAAX,GAAA,CAAAW,GAAA,SAAAL,MAAA,CAAAJ,OAAA,GAAAF,GAAA,MAAAG,KAAA,IAAAA,KAAA,CAAAa,GAAA,CAAAhB,GAAA,EAAAM,MAAA,YAAAA,MAAA;AAiBnF,MAAMW,YAAmC,GAAGC,IAAA,IAA+B;EAAA,IAA9B;IAAEC,QAAQ;IAAEC,IAAI;IAAEC;EAAM,CAAC,GAAAH,IAAA;EAClE,MAAMI,eAAe,GAAG,IAAAC,kBAAW,EAAC,MAAM;IACtCJ,QAAQ,CAAC;MAAEC,IAAI;MAAEC;IAAM,CAAC,CAAC;EAC7B,CAAC,EAAE,CAACF,QAAQ,EAAEC,IAAI,EAAEC,KAAK,CAAC,CAAC;EAE3B,OAAO,IAAAG,cAAO,EACV,mBACIjC,MAAA,CAAAW,OAAA,CAAAuB,aAAA,CAAC/B,aAAA,CAAAgC,kBAAkB;IAACC,OAAO,EAAEL;EAAgB,gBACzC/B,MAAA,CAAAW,OAAA,CAAAuB,aAAA,CAAC/B,aAAA,CAAAkC,sBAAsB,QAAER,IAA6B,CACtC,CACvB,EACD,CAACE,eAAe,EAAEF,IAAI,CAC1B,CAAC;AACL,CAAC;AAEDH,YAAY,CAACY,WAAW,GAAG,cAAc;AAAC,IAAAC,QAAA,GAE3Bb,YAAY;AAAAc,OAAA,CAAA7B,OAAA,GAAA4B,QAAA"}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
export declare const StyledComboBoxItem: import("styled-components").StyledComponent<"div", any, {
|
|
2
|
+
theme: import("../../color-scheme-provider/ColorSchemeProvider").Theme;
|
|
3
|
+
}, never>;
|
|
4
|
+
export declare const StyledComboBoxItemText: import("styled-components").StyledComponent<"p", any, {}, never>;
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.StyledComboBoxItemText = exports.StyledComboBoxItem = void 0;
|
|
7
|
+
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
8
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
9
|
+
const StyledComboBoxItem = _styledComponents.default.div`
|
|
10
|
+
&:hover {
|
|
11
|
+
background: ${_ref => {
|
|
12
|
+
let {
|
|
13
|
+
theme
|
|
14
|
+
} = _ref;
|
|
15
|
+
return theme['secondary-103'];
|
|
16
|
+
}};
|
|
17
|
+
}
|
|
18
|
+
`;
|
|
19
|
+
exports.StyledComboBoxItem = StyledComboBoxItem;
|
|
20
|
+
const StyledComboBoxItemText = _styledComponents.default.p`
|
|
21
|
+
margin: 5px;
|
|
22
|
+
`;
|
|
23
|
+
exports.StyledComboBoxItemText = StyledComboBoxItemText;
|
|
24
|
+
//# sourceMappingURL=ComboBoxItem.styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ComboBoxItem.styles.js","names":["_styledComponents","_interopRequireDefault","require","obj","__esModule","default","StyledComboBoxItem","styled","div","_ref","theme","exports","StyledComboBoxItemText","p"],"sources":["../../../../src/components/combobox/combobox-item/ComboBoxItem.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledComboBoxItemProps = WithTheme<unknown>;\n\nexport const StyledComboBoxItem = styled.div<StyledComboBoxItemProps>`\n &:hover {\n background: ${({ theme }: StyledComboBoxItemProps) => theme['secondary-103']};\n }\n`;\n\nexport const StyledComboBoxItemText = styled.p`\n margin: 5px;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAKhC,MAAMG,kBAAkB,GAAGC,yBAAM,CAACC,GAA6B;AACtE;AACA,sBAAsBC,IAAA;EAAA,IAAC;IAAEC;EAA+B,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,eAAe,CAAC;AAAA,CAAC;AACrF;AACA,CAAC;AAACC,OAAA,CAAAL,kBAAA,GAAAA,kBAAA;AAEK,MAAMM,sBAAsB,GAAGL,yBAAM,CAACM,CAAE;AAC/C;AACA,CAAC;AAACF,OAAA,CAAAC,sBAAA,GAAAA,sBAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const calculateContentWidth: (texts: string[]) => number;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.calculateContentWidth = void 0;
|
|
7
|
+
const calculateContentWidth = texts => {
|
|
8
|
+
const length = [];
|
|
9
|
+
texts.forEach(text => {
|
|
10
|
+
const div = document.createElement('div');
|
|
11
|
+
div.style.visibility = 'hidden';
|
|
12
|
+
div.style.position = 'absolute';
|
|
13
|
+
div.style.width = 'auto';
|
|
14
|
+
div.style.whiteSpace = 'nowrap';
|
|
15
|
+
document.body.appendChild(div);
|
|
16
|
+
div.innerText = text;
|
|
17
|
+
length.push(div.offsetWidth);
|
|
18
|
+
document.body.removeChild(div);
|
|
19
|
+
});
|
|
20
|
+
return Math.max.apply(null, length);
|
|
21
|
+
};
|
|
22
|
+
exports.calculateContentWidth = calculateContentWidth;
|
|
23
|
+
//# sourceMappingURL=utils.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"utils.js","names":["calculateContentWidth","texts","length","forEach","text","div","document","createElement","style","visibility","position","width","whiteSpace","body","appendChild","innerText","push","offsetWidth","removeChild","Math","max","apply","exports"],"sources":["../../../src/components/combobox/utils.ts"],"sourcesContent":["export const calculateContentWidth = (texts: string[]) => {\n const length: number[] = [];\n\n texts.forEach((text) => {\n const div = document.createElement('div');\n div.style.visibility = 'hidden';\n div.style.position = 'absolute';\n div.style.width = 'auto';\n div.style.whiteSpace = 'nowrap';\n document.body.appendChild(div);\n\n div.innerText = text;\n\n length.push(div.offsetWidth);\n\n document.body.removeChild(div);\n });\n\n return Math.max.apply(null, length);\n};\n"],"mappings":";;;;;;AAAO,MAAMA,qBAAqB,GAAIC,KAAe,IAAK;EACtD,MAAMC,MAAgB,GAAG,EAAE;EAE3BD,KAAK,CAACE,OAAO,CAAEC,IAAI,IAAK;IACpB,MAAMC,GAAG,GAAGC,QAAQ,CAACC,aAAa,CAAC,KAAK,CAAC;IACzCF,GAAG,CAACG,KAAK,CAACC,UAAU,GAAG,QAAQ;IAC/BJ,GAAG,CAACG,KAAK,CAACE,QAAQ,GAAG,UAAU;IAC/BL,GAAG,CAACG,KAAK,CAACG,KAAK,GAAG,MAAM;IACxBN,GAAG,CAACG,KAAK,CAACI,UAAU,GAAG,QAAQ;IAC/BN,QAAQ,CAACO,IAAI,CAACC,WAAW,CAACT,GAAG,CAAC;IAE9BA,GAAG,CAACU,SAAS,GAAGX,IAAI;IAEpBF,MAAM,CAACc,IAAI,CAACX,GAAG,CAACY,WAAW,CAAC;IAE5BX,QAAQ,CAACO,IAAI,CAACK,WAAW,CAACb,GAAG,CAAC;EAClC,CAAC,CAAC;EAEF,OAAOc,IAAI,CAACC,GAAG,CAACC,KAAK,CAAC,IAAI,EAAEnB,MAAM,CAAC;AACvC,CAAC;AAACoB,OAAA,CAAAtB,qBAAA,GAAAA,qBAAA"}
|
package/lib/index.d.ts
CHANGED
|
@@ -8,6 +8,8 @@ export { default as Button } from './components/button/Button';
|
|
|
8
8
|
export { default as Checkbox } from './components/checkbox/Checkbox';
|
|
9
9
|
export { default as ColorSchemeProvider } from './components/color-scheme-provider/ColorSchemeProvider';
|
|
10
10
|
export type { WithTheme } from './components/color-scheme-provider/ColorSchemeProvider';
|
|
11
|
+
export { default as ComboBox } from './components/combobox/ComboBox';
|
|
12
|
+
export type { IComboBoxItem as ComboBoxItem } from './components/combobox/ComboBox';
|
|
11
13
|
export { default as ContextMenu } from './components/context-menu/ContextMenu';
|
|
12
14
|
export { default as GridImage } from './components/grid-image/GridImage';
|
|
13
15
|
export { default as Icon } from './components/icon/Icon';
|
package/lib/index.js
CHANGED
|
@@ -57,6 +57,12 @@ Object.defineProperty(exports, "ColorSchemeProvider", {
|
|
|
57
57
|
return _ColorSchemeProvider.default;
|
|
58
58
|
}
|
|
59
59
|
});
|
|
60
|
+
Object.defineProperty(exports, "ComboBox", {
|
|
61
|
+
enumerable: true,
|
|
62
|
+
get: function () {
|
|
63
|
+
return _ComboBox.default;
|
|
64
|
+
}
|
|
65
|
+
});
|
|
60
66
|
Object.defineProperty(exports, "ContextMenu", {
|
|
61
67
|
enumerable: true,
|
|
62
68
|
get: function () {
|
|
@@ -144,6 +150,7 @@ var _Badge = _interopRequireDefault(require("./components/badge/Badge"));
|
|
|
144
150
|
var _Button = _interopRequireDefault(require("./components/button/Button"));
|
|
145
151
|
var _Checkbox = _interopRequireDefault(require("./components/checkbox/Checkbox"));
|
|
146
152
|
var _ColorSchemeProvider = _interopRequireDefault(require("./components/color-scheme-provider/ColorSchemeProvider"));
|
|
153
|
+
var _ComboBox = _interopRequireDefault(require("./components/combobox/ComboBox"));
|
|
147
154
|
var _ContextMenu = _interopRequireDefault(require("./components/context-menu/ContextMenu"));
|
|
148
155
|
var _GridImage = _interopRequireDefault(require("./components/grid-image/GridImage"));
|
|
149
156
|
var _Icon = _interopRequireDefault(require("./components/icon/Icon"));
|
package/lib/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["_Accordion","_interopRequireDefault","require","_AccordionContent","_AccordionGroup","_AccordionIntro","_AmountControl","_Badge","_Button","_Checkbox","_ColorSchemeProvider","_ContextMenu","_GridImage","_Icon","_Input","_List","_ListItemContent","_ListItem","_alignment","_MentionFinder","_SharingBar","_Slider","_SmallWaitCursor","_interopRequireWildcard","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set"],"sources":["../src/index.ts"],"sourcesContent":["// noinspection JSUnusedGlobalSymbols\n\nexport { default as Accordion } from './components/accordion/Accordion';\nexport { default as AccordionContent } from './components/accordion/accordion-content/AccordionContent';\nexport { default as AccordionGroup } from './components/accordion/accordion-group/AccordionGroup';\nexport { default as AccordionIntro } from './components/accordion/accordion-intro/AccordionIntro';\nexport { default as AmountControl } from './components/amount-control/AmountControl';\nexport { default as Badge } from './components/badge/Badge';\nexport { default as Button } from './components/button/Button';\nexport { default as Checkbox } from './components/checkbox/Checkbox';\nexport { default as ColorSchemeProvider } from './components/color-scheme-provider/ColorSchemeProvider';\nexport type { WithTheme } from './components/color-scheme-provider/ColorSchemeProvider';\nexport { default as ContextMenu } from './components/context-menu/ContextMenu';\nexport { default as GridImage } from './components/grid-image/GridImage';\nexport { default as Icon } from './components/icon/Icon';\nexport { default as Input } from './components/input/Input';\nexport { default as List } from './components/list/List';\nexport { default as ListItemContent } from './components/list/list-item/list-item-content/ListItemContent';\nexport { default as ListItem } from './components/list/list-item/ListItem';\nexport { MentionFinderPopupAlignment } from './components/mention-finder/constants/alignment';\nexport { default as MentionFinder } from './components/mention-finder/MentionFinder';\nexport type { MentionMember } from './components/mention-finder/MentionFinder';\nexport { default as SharingBar } from './components/sharing-bar/SharingBar';\nexport { default as Slider } from './components/slider/Slider';\nexport {\n default as SmallWaitCursor,\n SmallWaitCursorSpeed,\n} from './components/small-wait-cursor/SmallWaitCursor';\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","names":["_Accordion","_interopRequireDefault","require","_AccordionContent","_AccordionGroup","_AccordionIntro","_AmountControl","_Badge","_Button","_Checkbox","_ColorSchemeProvider","_ComboBox","_ContextMenu","_GridImage","_Icon","_Input","_List","_ListItemContent","_ListItem","_alignment","_MentionFinder","_SharingBar","_Slider","_SmallWaitCursor","_interopRequireWildcard","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set"],"sources":["../src/index.ts"],"sourcesContent":["// noinspection JSUnusedGlobalSymbols\n\nexport { default as Accordion } from './components/accordion/Accordion';\nexport { default as AccordionContent } from './components/accordion/accordion-content/AccordionContent';\nexport { default as AccordionGroup } from './components/accordion/accordion-group/AccordionGroup';\nexport { default as AccordionIntro } from './components/accordion/accordion-intro/AccordionIntro';\nexport { default as AmountControl } from './components/amount-control/AmountControl';\nexport { default as Badge } from './components/badge/Badge';\nexport { default as Button } from './components/button/Button';\nexport { default as Checkbox } from './components/checkbox/Checkbox';\nexport { default as ColorSchemeProvider } from './components/color-scheme-provider/ColorSchemeProvider';\nexport type { WithTheme } from './components/color-scheme-provider/ColorSchemeProvider';\nexport { default as ComboBox } from './components/combobox/ComboBox';\nexport type { IComboBoxItem as ComboBoxItem } from './components/combobox/ComboBox';\nexport { default as ContextMenu } from './components/context-menu/ContextMenu';\nexport { default as GridImage } from './components/grid-image/GridImage';\nexport { default as Icon } from './components/icon/Icon';\nexport { default as Input } from './components/input/Input';\nexport { default as List } from './components/list/List';\nexport { default as ListItemContent } from './components/list/list-item/list-item-content/ListItemContent';\nexport { default as ListItem } from './components/list/list-item/ListItem';\nexport { MentionFinderPopupAlignment } from './components/mention-finder/constants/alignment';\nexport { default as MentionFinder } from './components/mention-finder/MentionFinder';\nexport type { MentionMember } from './components/mention-finder/MentionFinder';\nexport { default as SharingBar } from './components/sharing-bar/SharingBar';\nexport { default as Slider } from './components/slider/Slider';\nexport {\n default as SmallWaitCursor,\n SmallWaitCursorSpeed,\n} from './components/small-wait-cursor/SmallWaitCursor';\n"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@chayns-components/core",
|
|
3
|
-
"version": "5.0.0-beta.
|
|
3
|
+
"version": "5.0.0-beta.162",
|
|
4
4
|
"description": "A set of beautiful React components for developing your own applications with chayns.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"chayns",
|
|
@@ -62,5 +62,5 @@
|
|
|
62
62
|
"publishConfig": {
|
|
63
63
|
"access": "public"
|
|
64
64
|
},
|
|
65
|
-
"gitHead": "
|
|
65
|
+
"gitHead": "b39a3afa6951475e5969fc2614e73c15408a7cb0"
|
|
66
66
|
}
|