@reltio/components 1.4.2158 → 1.4.2159
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/BasicAttributeSelector/BasicAttributeSelector.d.ts +1 -1
- package/BasicAttributeSelector/BasicAttributeSelector.js +2 -2
- package/SelectionPopup/SelectionPopup.d.ts +2 -1
- package/SelectionPopup/SelectionPopup.js +11 -9
- package/SelectionPopup/SelectionPopup.module.css.js +9 -0
- package/cjs/BasicAttributeSelector/BasicAttributeSelector.d.ts +1 -1
- package/cjs/BasicAttributeSelector/BasicAttributeSelector.js +2 -2
- package/cjs/SelectionPopup/SelectionPopup.d.ts +2 -1
- package/cjs/SelectionPopup/SelectionPopup.js +13 -11
- package/cjs/SelectionPopup/SelectionPopup.module.css.js +9 -0
- package/cjs/types/index.d.ts +1 -0
- package/package.json +1 -1
- package/types/index.d.ts +1 -0
- package/SelectionPopup/styles.d.ts +0 -6
- package/SelectionPopup/styles.js +0 -38
- package/cjs/SelectionPopup/styles.d.ts +0 -6
- package/cjs/SelectionPopup/styles.js +0 -41
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { BasicAttributeSelectorProps } from '../types';
|
|
3
|
-
declare const _default: React.MemoExoticComponent<({ className, itemsGroups, value, getLabel, onSelect, onRestoreFocus, onOpenPopup, disableRestoreFocus, disableEnforceFocus, single, ungroup, disabled, hideCheckBox }: BasicAttributeSelectorProps) => React.JSX.Element>;
|
|
3
|
+
declare const _default: React.MemoExoticComponent<({ className, itemsGroups, value, getLabel, onSelect, onRestoreFocus, onOpenPopup, disableRestoreFocus, disableEnforceFocus, single, ungroup, disabled, hideCheckBox, additionalInfo }: BasicAttributeSelectorProps) => React.JSX.Element>;
|
|
4
4
|
export default _default;
|
|
@@ -11,7 +11,7 @@ import { filterSelectedAttributes, getAttributeIndex, getContainerWidth, getOnEn
|
|
|
11
11
|
import { ATTRIBUTES_LIST_WIDTH, ATTRIBUTES_LIST_HEIGHT, ATTRIBUTES_POPUP_HEIGHT, ATTRIBUTES_LIST_MAX_WIDTH } from './constants';
|
|
12
12
|
import { useStyles } from './styles';
|
|
13
13
|
var BasicAttributeSelector = function (_a) {
|
|
14
|
-
var className = _a.className, itemsGroups = _a.itemsGroups, value = _a.value, getLabel = _a.getLabel, onSelect = _a.onSelect, _b = _a.onRestoreFocus, onRestoreFocus = _b === void 0 ? identity : _b, _c = _a.onOpenPopup, onOpenPopup = _c === void 0 ? identity : _c, _d = _a.disableRestoreFocus, disableRestoreFocus = _d === void 0 ? false : _d, _e = _a.disableEnforceFocus, disableEnforceFocus = _e === void 0 ? false : _e, _f = _a.single, single = _f === void 0 ? false : _f, _g = _a.ungroup, ungroup = _g === void 0 ? false : _g, _h = _a.disabled, disabled = _h === void 0 ? false : _h, _j = _a.hideCheckBox, hideCheckBox = _j === void 0 ? false : _j;
|
|
14
|
+
var className = _a.className, itemsGroups = _a.itemsGroups, value = _a.value, getLabel = _a.getLabel, onSelect = _a.onSelect, _b = _a.onRestoreFocus, onRestoreFocus = _b === void 0 ? identity : _b, _c = _a.onOpenPopup, onOpenPopup = _c === void 0 ? identity : _c, _d = _a.disableRestoreFocus, disableRestoreFocus = _d === void 0 ? false : _d, _e = _a.disableEnforceFocus, disableEnforceFocus = _e === void 0 ? false : _e, _f = _a.single, single = _f === void 0 ? false : _f, _g = _a.ungroup, ungroup = _g === void 0 ? false : _g, _h = _a.disabled, disabled = _h === void 0 ? false : _h, _j = _a.hideCheckBox, hideCheckBox = _j === void 0 ? false : _j, additionalInfo = _a.additionalInfo;
|
|
15
15
|
var styles = useStyles();
|
|
16
16
|
var _k = useState(null), selectAnchor = _k[0], setSelectAnchor = _k[1];
|
|
17
17
|
var openPopup = function (event) {
|
|
@@ -64,7 +64,7 @@ var BasicAttributeSelector = function (_a) {
|
|
|
64
64
|
}), focusIndex = _o.focusIndex, handleKeyDown = _o.handleKeyDown;
|
|
65
65
|
return (React.createElement("div", { className: classnames(styles.selector, className), "data-reltio-id": "attribute-selector" },
|
|
66
66
|
React.createElement(AttributeTitle, { value: value, getLabel: getLabel, onSelectAttributeClick: openPopup, disabled: disabled }),
|
|
67
|
-
React.createElement(SelectionPopup, { open: isPopupOpen, anchorEl: selectAnchor, onClose: handleOnClose, onSearch: setFilterText, title: i18n.text('Select attribute'), containerWidth: containerWidth, containerHeight: ATTRIBUTES_POPUP_HEIGHT, searchInputOnKeyDown: handleKeyDown, anchorOrigin: { horizontal: 'right', vertical: 'bottom' }, searchInputRef: searchInputRef, disableRestoreFocus: disableRestoreFocus, disableEnforceFocus: disableEnforceFocus },
|
|
67
|
+
React.createElement(SelectionPopup, { open: isPopupOpen, anchorEl: selectAnchor, onClose: handleOnClose, onSearch: setFilterText, title: i18n.text('Select attribute'), additionalInfo: additionalInfo, containerWidth: containerWidth, containerHeight: ATTRIBUTES_POPUP_HEIGHT, searchInputOnKeyDown: handleKeyDown, anchorOrigin: { horizontal: 'right', vertical: 'bottom' }, searchInputRef: searchInputRef, disableRestoreFocus: disableRestoreFocus, disableEnforceFocus: disableEnforceFocus },
|
|
68
68
|
React.createElement(SelectAttributesList, { items: items, onItemClick: onListItemClick, selectedAttributes: selectedAttributes, width: containerWidth, height: ATTRIBUTES_LIST_HEIGHT, focusIndex: focusIndex, hideCheckBox: hideCheckBox }))));
|
|
69
69
|
};
|
|
70
70
|
export default memo(BasicAttributeSelector);
|
|
@@ -2,6 +2,7 @@ import React from 'react';
|
|
|
2
2
|
import { PopoverProps } from '@mui/material/Popover';
|
|
3
3
|
type Props = {
|
|
4
4
|
title: string;
|
|
5
|
+
additionalInfo?: string;
|
|
5
6
|
containerWidth: number;
|
|
6
7
|
containerHeight: number;
|
|
7
8
|
children: React.ReactNode;
|
|
@@ -15,5 +16,5 @@ type Props = {
|
|
|
15
16
|
headerPlacement?: 'top' | 'bottom';
|
|
16
17
|
searchInputRef?: React.Ref<unknown>;
|
|
17
18
|
} & PopoverProps;
|
|
18
|
-
export declare const SelectionPopup: ({ title, className, onSearch, hideTitle, hideSearchInput, inputPlaceholder, headerPlacement, containerWidth, containerHeight, searchInputOnKeyDown, children, searchInputRef, anchorOrigin, transformOrigin, ...otherProps }: Props) => React.JSX.Element;
|
|
19
|
+
export declare const SelectionPopup: ({ title, className, onSearch, hideTitle, hideSearchInput, inputPlaceholder, headerPlacement, containerWidth, containerHeight, searchInputOnKeyDown, children, searchInputRef, anchorOrigin, transformOrigin, additionalInfo, ...otherProps }: Props) => React.JSX.Element;
|
|
19
20
|
export {};
|
|
@@ -24,26 +24,28 @@ import React from 'react';
|
|
|
24
24
|
import classnames from 'classnames';
|
|
25
25
|
import i18n from 'ui-i18n';
|
|
26
26
|
import Popover from '@mui/material/Popover';
|
|
27
|
+
import { InfoIcon } from '../InfoIcon';
|
|
27
28
|
import { SearchInput } from '../SearchInput';
|
|
28
|
-
import
|
|
29
|
+
import styles from './SelectionPopup.module.css';
|
|
29
30
|
import { useTheme } from '@mui/styles';
|
|
30
31
|
export var SelectionPopup = function (_a) {
|
|
31
32
|
var _b;
|
|
32
|
-
var title = _a.title, className = _a.className, onSearch = _a.onSearch, hideTitle = _a.hideTitle, hideSearchInput = _a.hideSearchInput, inputPlaceholder = _a.inputPlaceholder, _c = _a.headerPlacement, headerPlacement = _c === void 0 ? 'top' : _c, containerWidth = _a.containerWidth,
|
|
33
|
+
var title = _a.title, className = _a.className, onSearch = _a.onSearch, hideTitle = _a.hideTitle, hideSearchInput = _a.hideSearchInput, inputPlaceholder = _a.inputPlaceholder, _c = _a.headerPlacement, headerPlacement = _c === void 0 ? 'top' : _c, containerWidth = _a.containerWidth, _d = _a.containerHeight, containerHeight = _d === void 0 ? 553 : _d, searchInputOnKeyDown = _a.searchInputOnKeyDown, children = _a.children, searchInputRef = _a.searchInputRef, _e = _a.anchorOrigin, anchorOrigin = _e === void 0 ? {
|
|
33
34
|
vertical: 'top',
|
|
34
35
|
horizontal: 'right'
|
|
35
|
-
} :
|
|
36
|
+
} : _e, _f = _a.transformOrigin, transformOrigin = _f === void 0 ? {
|
|
36
37
|
vertical: 'top',
|
|
37
38
|
horizontal: 'right'
|
|
38
|
-
} :
|
|
39
|
-
var classes = useStyles({ containerWidth: containerWidth, containerHeight: containerHeight });
|
|
39
|
+
} : _f, additionalInfo = _a.additionalInfo, otherProps = __rest(_a, ["title", "className", "onSearch", "hideTitle", "hideSearchInput", "inputPlaceholder", "headerPlacement", "containerWidth", "containerHeight", "searchInputOnKeyDown", "children", "searchInputRef", "anchorOrigin", "transformOrigin", "additionalInfo"]);
|
|
40
40
|
var currentTheme = useTheme();
|
|
41
41
|
var header = (React.createElement(React.Fragment, null,
|
|
42
|
-
!hideTitle && React.createElement("div", { className:
|
|
43
|
-
|
|
42
|
+
!hideTitle && (React.createElement("div", { className: styles.header },
|
|
43
|
+
title,
|
|
44
|
+
additionalInfo && React.createElement(InfoIcon, { className: styles.infoIcon, tooltipTitle: additionalInfo }))),
|
|
45
|
+
!hideSearchInput && (React.createElement(SearchInput, { onSearch: onSearch, autofocus: true, onKeyDown: searchInputOnKeyDown, inputRef: searchInputRef, classes: { root: styles.searchInputContainer }, placeholder: inputPlaceholder || i18n.text('Search & add attributes'), height: 40 }))));
|
|
44
46
|
return (React.createElement(Popover, __assign({ anchorOrigin: anchorOrigin, transformOrigin: transformOrigin, "data-mui-color-scheme": (_b = currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.palette) === null || _b === void 0 ? void 0 : _b.mode }, otherProps),
|
|
45
|
-
React.createElement("div", { className: classnames(
|
|
47
|
+
React.createElement("div", { className: classnames(styles.container, className), style: { width: containerWidth, height: containerHeight } },
|
|
46
48
|
headerPlacement === 'top' && header,
|
|
47
|
-
React.createElement("div", { className:
|
|
49
|
+
React.createElement("div", { className: styles.list }, children),
|
|
48
50
|
headerPlacement === 'bottom' && header)));
|
|
49
51
|
};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
const styles = {"container":"SelectionPopup-container--TOJwk","header":"SelectionPopup-header--Vwm7m","infoIcon":"SelectionPopup-infoIcon--vFSq9","searchInputContainer":"SelectionPopup-searchInputContainer--FeSdp","list":"SelectionPopup-list--jlWo4"};
|
|
2
|
+
if (typeof document !== 'undefined') {
|
|
3
|
+
const head = document.head || document.getElementsByTagName('head')[0]
|
|
4
|
+
const style = document.createElement('style');
|
|
5
|
+
style.type = 'text/css'
|
|
6
|
+
style.innerHTML = `.SelectionPopup-container--TOJwk{display:flex;flex-direction:column;flex-grow:1}.SelectionPopup-header--Vwm7m{align-items:center;display:flex;font-size:16px;font-weight:500;letter-spacing:.15px;line-height:24px;margin-bottom:12px;margin-left:16px;margin-top:16px}.SelectionPopup-infoIcon--vFSq9{color:var(--mui-palette-text-secondary);height:15px;margin-left:4px;width:15px}.SelectionPopup-searchInputContainer--FeSdp{flex-shrink:0;margin:0 16px 12px}.SelectionPopup-list--jlWo4{flex-grow:1;height:0;overflow:hidden;position:relative;width:100%}.SelectionPopup-list--jlWo4 ul{padding-bottom:0;padding-top:0}`;
|
|
7
|
+
head.appendChild(style);
|
|
8
|
+
}
|
|
9
|
+
export default styles;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { BasicAttributeSelectorProps } from '../types';
|
|
3
|
-
declare const _default: React.MemoExoticComponent<({ className, itemsGroups, value, getLabel, onSelect, onRestoreFocus, onOpenPopup, disableRestoreFocus, disableEnforceFocus, single, ungroup, disabled, hideCheckBox }: BasicAttributeSelectorProps) => React.JSX.Element>;
|
|
3
|
+
declare const _default: React.MemoExoticComponent<({ className, itemsGroups, value, getLabel, onSelect, onRestoreFocus, onOpenPopup, disableRestoreFocus, disableEnforceFocus, single, ungroup, disabled, hideCheckBox, additionalInfo }: BasicAttributeSelectorProps) => React.JSX.Element>;
|
|
4
4
|
export default _default;
|
|
@@ -39,7 +39,7 @@ var helpers_1 = require("./helpers");
|
|
|
39
39
|
var constants_1 = require("./constants");
|
|
40
40
|
var styles_1 = require("./styles");
|
|
41
41
|
var BasicAttributeSelector = function (_a) {
|
|
42
|
-
var className = _a.className, itemsGroups = _a.itemsGroups, value = _a.value, getLabel = _a.getLabel, onSelect = _a.onSelect, _b = _a.onRestoreFocus, onRestoreFocus = _b === void 0 ? ramda_1.identity : _b, _c = _a.onOpenPopup, onOpenPopup = _c === void 0 ? ramda_1.identity : _c, _d = _a.disableRestoreFocus, disableRestoreFocus = _d === void 0 ? false : _d, _e = _a.disableEnforceFocus, disableEnforceFocus = _e === void 0 ? false : _e, _f = _a.single, single = _f === void 0 ? false : _f, _g = _a.ungroup, ungroup = _g === void 0 ? false : _g, _h = _a.disabled, disabled = _h === void 0 ? false : _h, _j = _a.hideCheckBox, hideCheckBox = _j === void 0 ? false : _j;
|
|
42
|
+
var className = _a.className, itemsGroups = _a.itemsGroups, value = _a.value, getLabel = _a.getLabel, onSelect = _a.onSelect, _b = _a.onRestoreFocus, onRestoreFocus = _b === void 0 ? ramda_1.identity : _b, _c = _a.onOpenPopup, onOpenPopup = _c === void 0 ? ramda_1.identity : _c, _d = _a.disableRestoreFocus, disableRestoreFocus = _d === void 0 ? false : _d, _e = _a.disableEnforceFocus, disableEnforceFocus = _e === void 0 ? false : _e, _f = _a.single, single = _f === void 0 ? false : _f, _g = _a.ungroup, ungroup = _g === void 0 ? false : _g, _h = _a.disabled, disabled = _h === void 0 ? false : _h, _j = _a.hideCheckBox, hideCheckBox = _j === void 0 ? false : _j, additionalInfo = _a.additionalInfo;
|
|
43
43
|
var styles = (0, styles_1.useStyles)();
|
|
44
44
|
var _k = (0, react_1.useState)(null), selectAnchor = _k[0], setSelectAnchor = _k[1];
|
|
45
45
|
var openPopup = function (event) {
|
|
@@ -92,7 +92,7 @@ var BasicAttributeSelector = function (_a) {
|
|
|
92
92
|
}), focusIndex = _o.focusIndex, handleKeyDown = _o.handleKeyDown;
|
|
93
93
|
return (react_1.default.createElement("div", { className: (0, classnames_1.default)(styles.selector, className), "data-reltio-id": "attribute-selector" },
|
|
94
94
|
react_1.default.createElement(AttributeTitle_1.AttributeTitle, { value: value, getLabel: getLabel, onSelectAttributeClick: openPopup, disabled: disabled }),
|
|
95
|
-
react_1.default.createElement(SelectionPopup_1.SelectionPopup, { open: isPopupOpen, anchorEl: selectAnchor, onClose: handleOnClose, onSearch: setFilterText, title: ui_i18n_1.default.text('Select attribute'), containerWidth: containerWidth, containerHeight: constants_1.ATTRIBUTES_POPUP_HEIGHT, searchInputOnKeyDown: handleKeyDown, anchorOrigin: { horizontal: 'right', vertical: 'bottom' }, searchInputRef: searchInputRef, disableRestoreFocus: disableRestoreFocus, disableEnforceFocus: disableEnforceFocus },
|
|
95
|
+
react_1.default.createElement(SelectionPopup_1.SelectionPopup, { open: isPopupOpen, anchorEl: selectAnchor, onClose: handleOnClose, onSearch: setFilterText, title: ui_i18n_1.default.text('Select attribute'), additionalInfo: additionalInfo, containerWidth: containerWidth, containerHeight: constants_1.ATTRIBUTES_POPUP_HEIGHT, searchInputOnKeyDown: handleKeyDown, anchorOrigin: { horizontal: 'right', vertical: 'bottom' }, searchInputRef: searchInputRef, disableRestoreFocus: disableRestoreFocus, disableEnforceFocus: disableEnforceFocus },
|
|
96
96
|
react_1.default.createElement(SelectAttributesList_1.SelectAttributesList, { items: items, onItemClick: onListItemClick, selectedAttributes: selectedAttributes, width: containerWidth, height: constants_1.ATTRIBUTES_LIST_HEIGHT, focusIndex: focusIndex, hideCheckBox: hideCheckBox }))));
|
|
97
97
|
};
|
|
98
98
|
exports.default = (0, react_1.memo)(BasicAttributeSelector);
|
|
@@ -2,6 +2,7 @@ import React from 'react';
|
|
|
2
2
|
import { PopoverProps } from '@mui/material/Popover';
|
|
3
3
|
type Props = {
|
|
4
4
|
title: string;
|
|
5
|
+
additionalInfo?: string;
|
|
5
6
|
containerWidth: number;
|
|
6
7
|
containerHeight: number;
|
|
7
8
|
children: React.ReactNode;
|
|
@@ -15,5 +16,5 @@ type Props = {
|
|
|
15
16
|
headerPlacement?: 'top' | 'bottom';
|
|
16
17
|
searchInputRef?: React.Ref<unknown>;
|
|
17
18
|
} & PopoverProps;
|
|
18
|
-
export declare const SelectionPopup: ({ title, className, onSearch, hideTitle, hideSearchInput, inputPlaceholder, headerPlacement, containerWidth, containerHeight, searchInputOnKeyDown, children, searchInputRef, anchorOrigin, transformOrigin, ...otherProps }: Props) => React.JSX.Element;
|
|
19
|
+
export declare const SelectionPopup: ({ title, className, onSearch, hideTitle, hideSearchInput, inputPlaceholder, headerPlacement, containerWidth, containerHeight, searchInputOnKeyDown, children, searchInputRef, anchorOrigin, transformOrigin, additionalInfo, ...otherProps }: Props) => React.JSX.Element;
|
|
19
20
|
export {};
|
|
@@ -30,27 +30,29 @@ var react_1 = __importDefault(require("react"));
|
|
|
30
30
|
var classnames_1 = __importDefault(require("classnames"));
|
|
31
31
|
var ui_i18n_1 = __importDefault(require("ui-i18n"));
|
|
32
32
|
var Popover_1 = __importDefault(require("@mui/material/Popover"));
|
|
33
|
+
var InfoIcon_1 = require("../InfoIcon");
|
|
33
34
|
var SearchInput_1 = require("../SearchInput");
|
|
34
|
-
var
|
|
35
|
-
var
|
|
35
|
+
var SelectionPopup_module_css_1 = __importDefault(require("./SelectionPopup.module.css"));
|
|
36
|
+
var styles_1 = require("@mui/styles");
|
|
36
37
|
var SelectionPopup = function (_a) {
|
|
37
38
|
var _b;
|
|
38
|
-
var title = _a.title, className = _a.className, onSearch = _a.onSearch, hideTitle = _a.hideTitle, hideSearchInput = _a.hideSearchInput, inputPlaceholder = _a.inputPlaceholder, _c = _a.headerPlacement, headerPlacement = _c === void 0 ? 'top' : _c, containerWidth = _a.containerWidth,
|
|
39
|
+
var title = _a.title, className = _a.className, onSearch = _a.onSearch, hideTitle = _a.hideTitle, hideSearchInput = _a.hideSearchInput, inputPlaceholder = _a.inputPlaceholder, _c = _a.headerPlacement, headerPlacement = _c === void 0 ? 'top' : _c, containerWidth = _a.containerWidth, _d = _a.containerHeight, containerHeight = _d === void 0 ? 553 : _d, searchInputOnKeyDown = _a.searchInputOnKeyDown, children = _a.children, searchInputRef = _a.searchInputRef, _e = _a.anchorOrigin, anchorOrigin = _e === void 0 ? {
|
|
39
40
|
vertical: 'top',
|
|
40
41
|
horizontal: 'right'
|
|
41
|
-
} :
|
|
42
|
+
} : _e, _f = _a.transformOrigin, transformOrigin = _f === void 0 ? {
|
|
42
43
|
vertical: 'top',
|
|
43
44
|
horizontal: 'right'
|
|
44
|
-
} :
|
|
45
|
-
var
|
|
46
|
-
var currentTheme = (0, styles_2.useTheme)();
|
|
45
|
+
} : _f, additionalInfo = _a.additionalInfo, otherProps = __rest(_a, ["title", "className", "onSearch", "hideTitle", "hideSearchInput", "inputPlaceholder", "headerPlacement", "containerWidth", "containerHeight", "searchInputOnKeyDown", "children", "searchInputRef", "anchorOrigin", "transformOrigin", "additionalInfo"]);
|
|
46
|
+
var currentTheme = (0, styles_1.useTheme)();
|
|
47
47
|
var header = (react_1.default.createElement(react_1.default.Fragment, null,
|
|
48
|
-
!hideTitle && react_1.default.createElement("div", { className:
|
|
49
|
-
|
|
48
|
+
!hideTitle && (react_1.default.createElement("div", { className: SelectionPopup_module_css_1.default.header },
|
|
49
|
+
title,
|
|
50
|
+
additionalInfo && react_1.default.createElement(InfoIcon_1.InfoIcon, { className: SelectionPopup_module_css_1.default.infoIcon, tooltipTitle: additionalInfo }))),
|
|
51
|
+
!hideSearchInput && (react_1.default.createElement(SearchInput_1.SearchInput, { onSearch: onSearch, autofocus: true, onKeyDown: searchInputOnKeyDown, inputRef: searchInputRef, classes: { root: SelectionPopup_module_css_1.default.searchInputContainer }, placeholder: inputPlaceholder || ui_i18n_1.default.text('Search & add attributes'), height: 40 }))));
|
|
50
52
|
return (react_1.default.createElement(Popover_1.default, __assign({ anchorOrigin: anchorOrigin, transformOrigin: transformOrigin, "data-mui-color-scheme": (_b = currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.palette) === null || _b === void 0 ? void 0 : _b.mode }, otherProps),
|
|
51
|
-
react_1.default.createElement("div", { className: (0, classnames_1.default)(
|
|
53
|
+
react_1.default.createElement("div", { className: (0, classnames_1.default)(SelectionPopup_module_css_1.default.container, className), style: { width: containerWidth, height: containerHeight } },
|
|
52
54
|
headerPlacement === 'top' && header,
|
|
53
|
-
react_1.default.createElement("div", { className:
|
|
55
|
+
react_1.default.createElement("div", { className: SelectionPopup_module_css_1.default.list }, children),
|
|
54
56
|
headerPlacement === 'bottom' && header)));
|
|
55
57
|
};
|
|
56
58
|
exports.SelectionPopup = SelectionPopup;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
const styles = {"container":"SelectionPopup-container--TOJwk","header":"SelectionPopup-header--Vwm7m","infoIcon":"SelectionPopup-infoIcon--vFSq9","searchInputContainer":"SelectionPopup-searchInputContainer--FeSdp","list":"SelectionPopup-list--jlWo4"};
|
|
2
|
+
if (typeof document !== 'undefined') {
|
|
3
|
+
const head = document.head || document.getElementsByTagName('head')[0]
|
|
4
|
+
const style = document.createElement('style');
|
|
5
|
+
style.type = 'text/css'
|
|
6
|
+
style.innerHTML = `.SelectionPopup-container--TOJwk{display:flex;flex-direction:column;flex-grow:1}.SelectionPopup-header--Vwm7m{align-items:center;display:flex;font-size:16px;font-weight:500;letter-spacing:.15px;line-height:24px;margin-bottom:12px;margin-left:16px;margin-top:16px}.SelectionPopup-infoIcon--vFSq9{color:var(--mui-palette-text-secondary);height:15px;margin-left:4px;width:15px}.SelectionPopup-searchInputContainer--FeSdp{flex-shrink:0;margin:0 16px 12px}.SelectionPopup-list--jlWo4{flex-grow:1;height:0;overflow:hidden;position:relative;width:100%}.SelectionPopup-list--jlWo4 ul{padding-bottom:0;padding-top:0}`;
|
|
7
|
+
head.appendChild(style);
|
|
8
|
+
}
|
|
9
|
+
module.exports = styles;
|
package/cjs/types/index.d.ts
CHANGED
package/package.json
CHANGED
package/types/index.d.ts
CHANGED
package/SelectionPopup/styles.js
DELETED
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
import { makeStyles } from '@mui/styles';
|
|
2
|
-
var margin = '16px';
|
|
3
|
-
export var useStyles = makeStyles(function () { return ({
|
|
4
|
-
container: function (_a) {
|
|
5
|
-
var _b = _a.containerHeight, containerHeight = _b === void 0 ? 553 : _b, containerWidth = _a.containerWidth;
|
|
6
|
-
return {
|
|
7
|
-
display: 'flex',
|
|
8
|
-
flexDirection: 'column',
|
|
9
|
-
height: containerHeight,
|
|
10
|
-
width: containerWidth,
|
|
11
|
-
flexGrow: 1
|
|
12
|
-
};
|
|
13
|
-
},
|
|
14
|
-
header: {
|
|
15
|
-
marginLeft: margin,
|
|
16
|
-
marginTop: '16px',
|
|
17
|
-
marginBottom: '12px',
|
|
18
|
-
fontSize: '16px',
|
|
19
|
-
fontWeight: 500,
|
|
20
|
-
letterSpacing: '0.15px',
|
|
21
|
-
lineHeight: '24px'
|
|
22
|
-
},
|
|
23
|
-
searchInputContainer: {
|
|
24
|
-
margin: "0 ".concat(margin, " 12px ").concat(margin),
|
|
25
|
-
flexShrink: '0'
|
|
26
|
-
},
|
|
27
|
-
list: {
|
|
28
|
-
flexGrow: 1,
|
|
29
|
-
height: 0,
|
|
30
|
-
overflow: 'hidden',
|
|
31
|
-
width: '100%',
|
|
32
|
-
position: 'relative',
|
|
33
|
-
'& ul': {
|
|
34
|
-
paddingBottom: 0,
|
|
35
|
-
paddingTop: 0
|
|
36
|
-
}
|
|
37
|
-
}
|
|
38
|
-
}); });
|
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.useStyles = void 0;
|
|
4
|
-
var styles_1 = require("@mui/styles");
|
|
5
|
-
var margin = '16px';
|
|
6
|
-
exports.useStyles = (0, styles_1.makeStyles)(function () { return ({
|
|
7
|
-
container: function (_a) {
|
|
8
|
-
var _b = _a.containerHeight, containerHeight = _b === void 0 ? 553 : _b, containerWidth = _a.containerWidth;
|
|
9
|
-
return {
|
|
10
|
-
display: 'flex',
|
|
11
|
-
flexDirection: 'column',
|
|
12
|
-
height: containerHeight,
|
|
13
|
-
width: containerWidth,
|
|
14
|
-
flexGrow: 1
|
|
15
|
-
};
|
|
16
|
-
},
|
|
17
|
-
header: {
|
|
18
|
-
marginLeft: margin,
|
|
19
|
-
marginTop: '16px',
|
|
20
|
-
marginBottom: '12px',
|
|
21
|
-
fontSize: '16px',
|
|
22
|
-
fontWeight: 500,
|
|
23
|
-
letterSpacing: '0.15px',
|
|
24
|
-
lineHeight: '24px'
|
|
25
|
-
},
|
|
26
|
-
searchInputContainer: {
|
|
27
|
-
margin: "0 ".concat(margin, " 12px ").concat(margin),
|
|
28
|
-
flexShrink: '0'
|
|
29
|
-
},
|
|
30
|
-
list: {
|
|
31
|
-
flexGrow: 1,
|
|
32
|
-
height: 0,
|
|
33
|
-
overflow: 'hidden',
|
|
34
|
-
width: '100%',
|
|
35
|
-
position: 'relative',
|
|
36
|
-
'& ul': {
|
|
37
|
-
paddingBottom: 0,
|
|
38
|
-
paddingTop: 0
|
|
39
|
-
}
|
|
40
|
-
}
|
|
41
|
-
}); });
|