@dreamcommerce/aurora 0.3.4-169 → 0.3.4-172
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/build/cjs/src/components/button/index.js +2 -2
- package/build/cjs/src/components/button/index.js.map +1 -1
- package/build/cjs/src/components/dropdown/components/content.js +7 -5
- package/build/cjs/src/components/dropdown/components/content.js.map +1 -1
- package/build/cjs/src/components/dropdown/css_classes.js +2 -0
- package/build/cjs/src/components/dropdown/css_classes.js.map +1 -1
- package/build/cjs/src/css/dropdown/main.module.less.js +2 -2
- package/build/esm/src/components/button/index.js +2 -2
- package/build/esm/src/components/button/index.js.map +1 -1
- package/build/esm/src/components/dropdown/components/content.js +8 -6
- package/build/esm/src/components/dropdown/components/content.js.map +1 -1
- package/build/esm/src/components/dropdown/css_classes.d.ts +1 -0
- package/build/esm/src/components/dropdown/css_classes.js +2 -1
- package/build/esm/src/components/dropdown/css_classes.js.map +1 -1
- package/build/esm/src/components/dropdown/types.d.ts +1 -0
- package/build/esm/src/css/dropdown/main.module.less.js +2 -2
- package/build/esm/src/stories/dropdown/dropdown.stories.d.ts +127 -0
- package/package.json +1 -1
|
@@ -32,15 +32,15 @@ var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
|
|
|
32
32
|
*/
|
|
33
33
|
var Button = function (_a) {
|
|
34
34
|
var _b;
|
|
35
|
-
var _c = _a.as, as = _c === void 0 ? 'button' : _c, size = _a.size, color = _a.color, variant = _a.variant, inactive = _a.inactive,
|
|
35
|
+
var _c = _a.as, as = _c === void 0 ? 'button' : _c, size = _a.size, color = _a.color, variant = _a.variant, inactive = _a.inactive, _d = _a.className, className = _d === void 0 ? '' : _d, props = _tslib.__rest(_a, ["as", "size", "color", "variant", "inactive", "className"]);
|
|
36
36
|
var buttonClassNames = classnames__default['default'](main_module['default'][css_classes.cssButton], (_b = {},
|
|
37
|
+
_b[className] = className,
|
|
37
38
|
_b[main_module['default'][css_classes.cssButtonS]] = size,
|
|
38
39
|
_b[main_module['default'][css_classes.cssButtonBg]] = !variant,
|
|
39
40
|
_b[main_module['default'][css_classes.cssButtonOutline]] = variant === 'outline',
|
|
40
41
|
_b[main_module['default'][css_classes.cssButtonLink]] = variant === 'link',
|
|
41
42
|
_b[main_module['default'][css_classes.cssButtonSecondary]] = color === 'secondary',
|
|
42
43
|
_b[main_module['default'][css_classes.cssButtonInactive]] = inactive,
|
|
43
|
-
_b.className = className,
|
|
44
44
|
_b));
|
|
45
45
|
return index.buttonTypes[as].render(props, buttonClassNames);
|
|
46
46
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../../src/components/button/index.tsx"],"sourcesContent":["import React from 'react';\n\nimport classnames from 'classnames';\nimport cssClasses from '@css/button/main.module.less';\n\nimport { IButtonProps } from './types';\nimport { cssButton, cssButtonOutline, cssButtonBg, cssButtonLink, cssButtonS, cssButtonSecondary, cssButtonInactive } from './css_classes';\nimport { buttonTypes } from './components';\n\n/**\n * @component\n * @example\n * return (\n * <Button\n * size=\"small\"\n * variant=\"light\">\n * Text button\n * </Button>\n *\n * <Button\n * as=\"link\"\n * href=\"https://onet.pl\">\n * Text button\n * </Button>\n * )\n */\nconst Button: React.FC<IButtonProps> = ({ as = 'button', size, color, variant, inactive, className, ...props }): JSX.Element => {\n const buttonClassNames = classnames(cssClasses[cssButton], {\n [cssClasses[cssButtonS]]: size,\n [cssClasses[cssButtonBg]]: !variant,\n [cssClasses[cssButtonOutline]]: variant === 'outline',\n [cssClasses[cssButtonLink]]: variant === 'link',\n [cssClasses[cssButtonSecondary]]: color === 'secondary',\n [cssClasses[cssButtonInactive]]: inactive,\n
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../../src/components/button/index.tsx"],"sourcesContent":["import React from 'react';\n\nimport classnames from 'classnames';\nimport cssClasses from '@css/button/main.module.less';\n\nimport { IButtonProps } from './types';\nimport { cssButton, cssButtonOutline, cssButtonBg, cssButtonLink, cssButtonS, cssButtonSecondary, cssButtonInactive } from './css_classes';\nimport { buttonTypes } from './components';\n\n/**\n * @component\n * @example\n * return (\n * <Button\n * size=\"small\"\n * variant=\"light\">\n * Text button\n * </Button>\n *\n * <Button\n * as=\"link\"\n * href=\"https://onet.pl\">\n * Text button\n * </Button>\n * )\n */\nconst Button: React.FC<IButtonProps> = ({ as = 'button', size, color, variant, inactive, className = '', ...props }): JSX.Element => {\n const buttonClassNames = classnames(cssClasses[cssButton], {\n [className]: className,\n [cssClasses[cssButtonS]]: size,\n [cssClasses[cssButtonBg]]: !variant,\n [cssClasses[cssButtonOutline]]: variant === 'outline',\n [cssClasses[cssButtonLink]]: variant === 'link',\n [cssClasses[cssButtonSecondary]]: color === 'secondary',\n [cssClasses[cssButtonInactive]]: inactive,\n });\n\n return buttonTypes[as].render(props, buttonClassNames);\n};\n\nexport default Button;\n"],"names":["classnames","cssClasses","cssButton","cssButtonS","cssButtonBg","cssButtonOutline","cssButtonLink","cssButtonSecondary","cssButtonInactive","buttonTypes"],"mappings":";;;;;;;;;;;;;;;AASA;;;;;;;;;;;;;;;;;IAiBM,MAAM,GAA2B,UAAC,EAA2E;;IAAzE,IAAA,UAAa,EAAb,kCAAa,EAAE,cAAI,EAAE,gBAAK,EAAE,oBAAO,EAAE,sBAAQ,EAAE,iBAAc,EAAd,mCAAc,EAAE,sFAAQ;IAC7G,IAAM,gBAAgB,GAAGA,8BAAU,CAACC,sBAAU,CAACC,qBAAS,CAAC;QACrD,GAAC,SAAS,IAAG,SAAS;QACtB,GAACD,sBAAU,CAACE,sBAAU,CAAC,IAAG,IAAI;QAC9B,GAACF,sBAAU,CAACG,uBAAW,CAAC,IAAG,CAAC,OAAO;QACnC,GAACH,sBAAU,CAACI,4BAAgB,CAAC,IAAG,OAAO,KAAK,SAAS;QACrD,GAACJ,sBAAU,CAACK,yBAAa,CAAC,IAAG,OAAO,KAAK,MAAM;QAC/C,GAACL,sBAAU,CAACM,8BAAkB,CAAC,IAAG,KAAK,KAAK,WAAW;QACvD,GAACN,sBAAU,CAACO,6BAAiB,CAAC,IAAG,QAAQ;YAC3C,CAAC;IAEH,OAAOC,iBAAW,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,gBAAgB,CAAC,CAAC;AAC3D;;;;"}
|
|
@@ -8,6 +8,7 @@ var index = require('../context/index.js');
|
|
|
8
8
|
var responsive_breakpoints = require('../../../constants/responsive_breakpoints.js');
|
|
9
9
|
var use_screen_detect = require('../../../hooks/use_screen_detect.js');
|
|
10
10
|
var main_module$1 = require('../../../css/icons/main.module.less.js');
|
|
11
|
+
var classNames = require('../../../utilities/styles/classNames.js');
|
|
11
12
|
var main_module = require('../../../css/dropdown/main.module.less.js');
|
|
12
13
|
var use_click_outside = require('../../../hooks/use_click_outside.js');
|
|
13
14
|
var reactDom = require('react-dom');
|
|
@@ -28,15 +29,16 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
|
28
29
|
* <Dropdown.Content> ... </Dropdown.Content>
|
|
29
30
|
*/
|
|
30
31
|
var Content = function (_a) {
|
|
31
|
-
var headerComponent = _a.headerComponent, headerGoBackText = _a.headerGoBackText, headerGoBackIcon = _a.headerGoBackIcon, children = _a.children, portalContainer = _a.portalContainer;
|
|
32
|
+
var headerComponent = _a.headerComponent, headerGoBackText = _a.headerGoBackText, headerGoBackIcon = _a.headerGoBackIcon, children = _a.children, _b = _a.arrowSide, arrowSide = _b === void 0 ? 'left' : _b, portalContainer = _a.portalContainer;
|
|
32
33
|
var t = useTranslation.useTranslation()[0];
|
|
33
34
|
var contentRef = React.useRef(null);
|
|
34
|
-
var
|
|
35
|
-
var
|
|
35
|
+
var _c = index.useDropdownContext(), wrapperRef = _c.wrapperRef, toggleDropdown = _c.toggleDropdown, isOpen = _c.isOpen;
|
|
36
|
+
var _d = React.useState({
|
|
36
37
|
left: '0px',
|
|
37
38
|
top: '0px',
|
|
38
39
|
zIndex: constants.DROPDOWN_Z_INDEX,
|
|
39
|
-
}), styles =
|
|
40
|
+
}), styles = _d[0], setStyles = _d[1];
|
|
41
|
+
var contentClassName = classNames.classNames([css_classes.cssDropdownContent, arrowSide === 'right' && css_classes.cssDropdownContentRight], main_module['default']);
|
|
40
42
|
var screenWidthName = use_screen_detect.useScreenDetect();
|
|
41
43
|
var refs = [contentRef];
|
|
42
44
|
if (wrapperRef) {
|
|
@@ -67,7 +69,7 @@ var Content = function (_a) {
|
|
|
67
69
|
exit: main_module['default']['dropdown-exit'],
|
|
68
70
|
exitActive: main_module['default']['dropdown-exit-active'],
|
|
69
71
|
} },
|
|
70
|
-
React__default['default'].createElement("div", { ref: contentRef, style: styles, className:
|
|
72
|
+
React__default['default'].createElement("div", { ref: contentRef, style: styles, className: contentClassName },
|
|
71
73
|
React__default['default'].createElement("div", { className: main_module['default'][css_classes.cssDropdownHeader] },
|
|
72
74
|
React__default['default'].createElement("div", { onClick: function () { return typeof toggleDropdown === 'function' && toggleDropdown(); } }, headerComponent !== null && headerComponent !== void 0 ? headerComponent : (React__default['default'].createElement("div", { className: main_module['default'][css_classes.cssDropdownHeaderContent] },
|
|
73
75
|
headerGoBackIcon || React__default['default'].createElement(icon_arrow['default'], { className: main_module$1['default']['icon_rotate-180'] }),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"content.js","sources":["../../../../../../src/components/dropdown/components/content.tsx"],"sourcesContent":["import React, { useRef, useState, useEffect } from 'react';\nimport { createPortal } from 'react-dom';\nimport { TransitionGroup, CSSTransition } from 'react-transition-group';\nimport { useTranslation } from 'react-i18next';\n\nimport { IDropdownContentProps } from '../types';\nimport { IDropdownContext } from '../context/types';\nimport { useDropdownContext } from '../context';\nimport { useClickOutside, useScreenDetect } from '../../../hooks';\nimport { SCREEN_XS } from '@constants/responsive_breakpoints';\n\nimport {
|
|
1
|
+
{"version":3,"file":"content.js","sources":["../../../../../../src/components/dropdown/components/content.tsx"],"sourcesContent":["import React, { useRef, useState, useEffect } from 'react';\nimport { createPortal } from 'react-dom';\nimport { TransitionGroup, CSSTransition } from 'react-transition-group';\nimport { useTranslation } from 'react-i18next';\n\nimport { IDropdownContentProps } from '../types';\nimport { IDropdownContext } from '../context/types';\nimport { useDropdownContext } from '../context';\nimport { useClickOutside, useScreenDetect } from '../../../hooks';\nimport { SCREEN_XS } from '@constants/responsive_breakpoints';\n\nimport {\n cssDropdownContent,\n cssDropdownHeader,\n cssDropdownHeaderTitle,\n cssDropdownHeaderContent,\n cssDropdownContentRight,\n} from '../css_classes';\nimport cssClasses from '@css/dropdown/main.module.less';\nimport iconCssClasses from '@css/icons/main.module.less';\nimport IconArrow from '@assets/icon_arrow';\nimport { getXYModifiersForNestedDropdowns, isChildOfModal } from '../utilities';\nimport { DROPDOWN_ON_MODAL_Z_INDEX, DROPDOWN_Z_INDEX } from '@components/dropdown/constants';\nimport { classNames } from '@utilities/styles/classNames';\n\n/**\n * Dropdown.Content component. This togglable part of dropdown.\n * @component\n * @example\n * <Dropdown.Content> ... </Dropdown.Content>\n */\nconst Content: React.FC<IDropdownContentProps> = ({\n headerComponent,\n headerGoBackText,\n headerGoBackIcon,\n children,\n arrowSide = 'left',\n portalContainer,\n}) => {\n const [t] = useTranslation();\n const contentRef = useRef<HTMLDivElement>(null);\n const { wrapperRef, toggleDropdown, isOpen }: IDropdownContext = useDropdownContext();\n const [styles, setStyles] = useState({\n left: '0px',\n top: '0px',\n zIndex: DROPDOWN_Z_INDEX,\n });\n const contentClassName = classNames([cssDropdownContent, arrowSide === 'right' && cssDropdownContentRight], cssClasses);\n const screenWidthName = useScreenDetect();\n\n const refs = [contentRef];\n if (wrapperRef) {\n refs.push(wrapperRef);\n }\n\n useClickOutside(refs, () => {\n if (typeof toggleDropdown === 'function') {\n toggleDropdown();\n }\n });\n\n useEffect(() => {\n if (wrapperRef?.current) {\n const { x, y, height } = wrapperRef.current.getBoundingClientRect();\n const yOffset = 10;\n\n const { xModifier, yModifier } = getXYModifiersForNestedDropdowns(portalContainer?.current);\n const positionTop = height + y + yOffset - yModifier;\n const positionLeft = x - xModifier;\n const isInModal = isChildOfModal(wrapperRef);\n const zIndex = isInModal ? DROPDOWN_ON_MODAL_Z_INDEX : DROPDOWN_Z_INDEX;\n\n screenWidthName === SCREEN_XS\n ? setStyles({ top: `0px`, left: `0px`, zIndex })\n : setStyles({ top: `${positionTop}px`, left: `${positionLeft}px`, zIndex });\n }\n }, [portalContainer, screenWidthName, wrapperRef, isOpen]);\n\n return createPortal(\n <TransitionGroup component={null}>\n {isOpen === true ? (\n <CSSTransition\n timeout={200}\n classNames={{\n enter: cssClasses['dropdown-enter'],\n enterActive: cssClasses['dropdown-enter-active'],\n exit: cssClasses['dropdown-exit'],\n exitActive: cssClasses['dropdown-exit-active'],\n }}\n >\n <div ref={contentRef} style={styles} className={contentClassName}>\n <div className={cssClasses[cssDropdownHeader]}>\n <div onClick={() => typeof toggleDropdown === 'function' && toggleDropdown()}>\n {headerComponent ?? (\n <div className={cssClasses[cssDropdownHeaderContent]}>\n {headerGoBackIcon || <IconArrow className={iconCssClasses['icon_rotate-180']} />}\n <span className={cssClasses[cssDropdownHeaderTitle]}>{headerGoBackText ?? t('Go back')}</span>\n </div>\n )}\n </div>\n </div>\n {children}\n </div>\n </CSSTransition>\n ) : null}\n </TransitionGroup>,\n portalContainer?.current || document.body\n );\n};\n\nexport default Content;\n"],"names":["useRef","classNames","cssDropdownContent","cssDropdownContentRight","cssClasses","useScreenDetect","useClickOutside","useEffect","isChildOfModal","DROPDOWN_ON_MODAL_Z_INDEX","DROPDOWN_Z_INDEX","SCREEN_XS","createPortal","React","TransitionGroup","CSSTransition","cssDropdownHeader","cssDropdownHeaderContent","IconArrow","iconCssClasses","cssDropdownHeaderTitle"],"mappings":"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"}
|
|
@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var cssDropdown = 'dropdown';
|
|
6
6
|
var cssDropdownContent = cssDropdown + "__content";
|
|
7
|
+
var cssDropdownContentRight = cssDropdownContent + "_right";
|
|
7
8
|
var cssDropdownHeader = cssDropdown + "__header";
|
|
8
9
|
var cssDropdownHeaderTitle = cssDropdown + "__header-title";
|
|
9
10
|
var cssDropdownHeaderContent = cssDropdown + "__header-content";
|
|
@@ -19,6 +20,7 @@ var cssDropdownListItemReadonly = cssDropdown + "__list-item_readonly";
|
|
|
19
20
|
|
|
20
21
|
exports.cssDropdown = cssDropdown;
|
|
21
22
|
exports.cssDropdownContent = cssDropdownContent;
|
|
23
|
+
exports.cssDropdownContentRight = cssDropdownContentRight;
|
|
22
24
|
exports.cssDropdownHeader = cssDropdownHeader;
|
|
23
25
|
exports.cssDropdownHeaderContent = cssDropdownHeaderContent;
|
|
24
26
|
exports.cssDropdownHeaderTitle = cssDropdownHeaderTitle;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"css_classes.js","sources":["../../../../../src/components/dropdown/css_classes.ts"],"sourcesContent":["export const cssDropdown = 'dropdown';\nexport const cssDropdownContent = `${cssDropdown}__content`;\nexport const cssDropdownHeader = `${cssDropdown}__header`;\nexport const cssDropdownHeaderIcon = `${cssDropdown}__header-icon`;\nexport const cssDropdownHeaderTitle = `${cssDropdown}__header-title`;\nexport const cssDropdownHeaderContent = `${cssDropdown}__header-content`;\nexport const cssDropdownInput = `${cssDropdown}__input`;\nexport const cssDropdownList = `${cssDropdown}__list`;\n\nexport const cssDropdownSearch = `${cssDropdown}__search`;\nexport const cssDropdownWithScroll = `${cssDropdown}__list_with-scroll`;\nexport const cssDropdownListWithGroup = `${cssDropdown}__list_with-group`;\nexport const cssDropdownListHead = `${cssDropdown}__list-head`;\nexport const cssDropdownListItem = `${cssDropdown}__list-item`;\nexport const cssDropdownListItemSelected = `${cssDropdown}__list-item_selected`;\nexport const cssDropdownListItemDisabled = `${cssDropdown}__list-item_disabled`;\nexport const cssDropdownListItemReadonly = `${cssDropdown}__list-item_readonly`;\n\nexport const cssIcon = `icon`;\nexport const cssIconBack = `${cssIcon}-back`;\n"],"names":[],"mappings":";;;;IAAa,WAAW,GAAG,WAAW;IACzB,kBAAkB,GAAM,WAAW,eAAY;IAC/C,iBAAiB,GAAM,WAAW,cAAW;IAE7C,sBAAsB,GAAM,WAAW,oBAAiB;IACxD,wBAAwB,GAAM,WAAW,sBAAmB;IAE5D,eAAe,GAAM,WAAW,YAAS;IAEzC,iBAAiB,GAAM,WAAW,cAAW;IAC7C,qBAAqB,GAAM,WAAW,wBAAqB;IAC3D,wBAAwB,GAAM,WAAW,uBAAoB;IAC7D,mBAAmB,GAAM,WAAW,iBAAc;IAClD,mBAAmB,GAAM,WAAW,iBAAc;IAClD,2BAA2B,GAAM,WAAW,0BAAuB;IACnE,2BAA2B,GAAM,WAAW,0BAAuB;IACnE,2BAA2B,GAAM,WAAW
|
|
1
|
+
{"version":3,"file":"css_classes.js","sources":["../../../../../src/components/dropdown/css_classes.ts"],"sourcesContent":["export const cssDropdown = 'dropdown';\nexport const cssDropdownContent = `${cssDropdown}__content`;\nexport const cssDropdownContentRight = `${cssDropdownContent}_right`;\nexport const cssDropdownHeader = `${cssDropdown}__header`;\nexport const cssDropdownHeaderIcon = `${cssDropdown}__header-icon`;\nexport const cssDropdownHeaderTitle = `${cssDropdown}__header-title`;\nexport const cssDropdownHeaderContent = `${cssDropdown}__header-content`;\nexport const cssDropdownInput = `${cssDropdown}__input`;\nexport const cssDropdownList = `${cssDropdown}__list`;\n\nexport const cssDropdownSearch = `${cssDropdown}__search`;\nexport const cssDropdownWithScroll = `${cssDropdown}__list_with-scroll`;\nexport const cssDropdownListWithGroup = `${cssDropdown}__list_with-group`;\nexport const cssDropdownListHead = `${cssDropdown}__list-head`;\nexport const cssDropdownListItem = `${cssDropdown}__list-item`;\nexport const cssDropdownListItemSelected = `${cssDropdown}__list-item_selected`;\nexport const cssDropdownListItemDisabled = `${cssDropdown}__list-item_disabled`;\nexport const cssDropdownListItemReadonly = `${cssDropdown}__list-item_readonly`;\n\nexport const cssIcon = `icon`;\nexport const cssIconBack = `${cssIcon}-back`;\n"],"names":[],"mappings":";;;;IAAa,WAAW,GAAG,WAAW;IACzB,kBAAkB,GAAM,WAAW,eAAY;IAC/C,uBAAuB,GAAM,kBAAkB,YAAS;IACxD,iBAAiB,GAAM,WAAW,cAAW;IAE7C,sBAAsB,GAAM,WAAW,oBAAiB;IACxD,wBAAwB,GAAM,WAAW,sBAAmB;IAE5D,eAAe,GAAM,WAAW,YAAS;IAEzC,iBAAiB,GAAM,WAAW,cAAW;IAC7C,qBAAqB,GAAM,WAAW,wBAAqB;IAC3D,wBAAwB,GAAM,WAAW,uBAAoB;IAC7D,mBAAmB,GAAM,WAAW,iBAAc;IAClD,mBAAmB,GAAM,WAAW,iBAAc;IAClD,2BAA2B,GAAM,WAAW,0BAAuB;IACnE,2BAA2B,GAAM,WAAW,0BAAuB;IACnE,2BAA2B,GAAM,WAAW;;;;;;;;;;;;;;;;;;"}
|
|
@@ -4,8 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var styleInject_es = require('../../../node_modules/style-inject/dist/style-inject.es.js');
|
|
6
6
|
|
|
7
|
-
var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n/** Form Variables */\n/** Errors */\n@media (max-width: 576px) {\n .main-module_dropdown__content__X9kz_ {\n display: flex;\n flex-direction: column;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n }\n .main-module_dropdown__header__kvhNn {\n display: block;\n }\n .main-module_dropdown__header-title__7NXxw {\n margin-left: 0.5rem;\n }\n}\n@media (min-width: 576px) {\n .main-module_dropdown__header__kvhNn {\n display: none;\n }\n}\n.main-module_dropdown__36KKf {\n position: relative;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n.main-module_dropdown__content__X9kz_ {\n flex: 0 0 auto;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 1200;\n width: auto;\n padding: 0.5rem 0;\n background-color: #ffffff;\n border-radius: 3px;\n box-shadow: 0 0px 25px 0 rgba(0, 0, 0, 0.2);\n}\n.main-module_dropdown__content__X9kz_::before {\n content: '';\n display: block;\n position: absolute;\n top: -14px;\n left: 7px;\n border-width: 7px;\n border-style: solid;\n border-color: transparent transparent #ffffff transparent;\n}\n.main-module_dropdown__list__2bd_r {\n flex: 0 0 auto;\n padding: 0;\n width: 100%;\n min-width: 20rem;\n text-align: left;\n font-size: 14px;\n font-size: 1rem;\n}\n.main-module_dropdown__list__2bd_r > li {\n list-style: none;\n}\n.main-module_dropdown__list-head__2Uyb0 {\n padding: 0.5rem 0 0.5rem 1rem;\n}\n.main-module_dropdown__list_with-scroll__KP9yO {\n scrollbar-color: #79829c #ffffff;\n scrollbar-width: thin;\n max-height: 280px;\n overflow-y: auto;\n}\n.main-module_dropdown__list_with-scroll__KP9yO::-webkit-scrollbar {\n width: 7px;\n}\n.main-module_dropdown__list_with-scroll__KP9yO::-webkit-scrollbar-track {\n background-color: #ffffff;\n}\n.main-module_dropdown__list_with-scroll__KP9yO::-webkit-scrollbar-track:hover {\n background-color: #f3f4f8;\n}\n.main-module_dropdown__list_with-scroll__KP9yO::-webkit-scrollbar-thumb {\n background-color: #5c657e;\n}\n.main-module_dropdown__list_with-scroll__KP9yO::-webkit-scrollbar-thumb:hover {\n background-color: #2d3748;\n}\n.main-module_dropdown__list-item__1u185 {\n display: block;\n padding: 0.5rem 1rem;\n cursor: default;\n}\n.main-module_dropdown__list-item__1u185:hover {\n background-color: #f5f7ff;\n}\n.main-module_dropdown__list-item_selected__2GYQr {\n background-color: #f5f7ff;\n}\n.main-module_dropdown__list-item_disabled__1Psh7 {\n color: #abb4cd;\n}\n.main-module_dropdown__list-item_readonly__3bbj0 {\n color: #abb4cd;\n}\n.main-module_dropdown__search__1Moob {\n padding: 0.5rem 1rem 0.5rem;\n}\n.main-module_dropdown__header__kvhNn {\n margin: calc(1rem * 0.5) 1rem;\n}\n.main-module_dropdown__header-content__10Zg9 {\n display: flex;\n flex-direction: row;\n align-items: center;\n}\n.main-module_dropdown__header-icon__30vfb {\n margin-right: 1rem;\n color: #abb4cd;\n font-size: 10px;\n font-size: 0.7142857142857143rem;\n}\n.main-module_dropdown__header-title__7NXxw {\n font-weight: 600;\n color: #5c657e;\n}\n.main-module_select__1ocPo {\n position: relative;\n display: flex;\n flex: 0 2 auto;\n align-items: center;\n width: 100%;\n}\n.main-module_select__1ocPo::after {\n content: '';\n position: absolute;\n display: block;\n right: 0.715em;\n width: 7px;\n height: 7px;\n margin-top: -2px;\n transform: rotate(-45deg);\n border-width: 0 0 1px 1px;\n border-style: solid;\n border-color: #3c83ec;\n}\n.main-module_select__1ocPo input {\n text-overflow: ellipsis;\n}\n.main-module_dropdown-enter__2RGtd,\n.main-module_modal-enter__I5ELD {\n opacity: 0;\n transform: translate3d(0, -2rem, 0);\n}\n.main-module_mask-enter__32s5F {\n opacity: 0;\n}\n.main-module_dropdown-enter-active__ob1fb,\n.main-module_modal-enter-active__3BMYq {\n opacity: 1;\n transform: translate3d(0, 0, 0);\n transition: transform 0.2s, opacity 0.2s;\n}\n.main-module_mask-enter-active__1WgVf {\n opacity: 1;\n transition: opacity 0.1s;\n}\n.main-module_dropdown-exit__3b2wX,\n.main-module_modal-exit__y2N_F {\n opacity: 1;\n transform: translate3d(0, 0, 0);\n}\n.main-module_mask-exit__325a4 {\n opacity: 1;\n}\n.main-module_dropdown-exit-active__22rth,\n.main-module_modal-exit-active__ID7ce {\n opacity: 0;\n transform: translate3d(0, -2rem, 0);\n transition: transform 0.2s, opacity 0.2s;\n}\n.main-module_mask-exit-active__2qs-r {\n opacity: 0;\n transition: opacity 0.1s;\n}\n";
|
|
8
|
-
var cssClasses = {"dropdown__content":"main-module_dropdown__content__X9kz_","dropdown__header":"main-module_dropdown__header__kvhNn","dropdown__header-title":"main-module_dropdown__header-title__7NXxw","dropdown":"main-module_dropdown__36KKf","dropdown__list":"main-module_dropdown__list__2bd_r","dropdown__list-head":"main-module_dropdown__list-head__2Uyb0","dropdown__list_with-scroll":"main-module_dropdown__list_with-scroll__KP9yO","dropdown__list-item":"main-module_dropdown__list-item__1u185","dropdown__list-item_selected":"main-module_dropdown__list-item_selected__2GYQr","dropdown__list-item_disabled":"main-module_dropdown__list-item_disabled__1Psh7","dropdown__list-item_readonly":"main-module_dropdown__list-item_readonly__3bbj0","dropdown__search":"main-module_dropdown__search__1Moob","dropdown__header-content":"main-module_dropdown__header-content__10Zg9","dropdown__header-icon":"main-module_dropdown__header-icon__30vfb","select":"main-module_select__1ocPo","dropdown-enter":"main-module_dropdown-enter__2RGtd","modal-enter":"main-module_modal-enter__I5ELD","mask-enter":"main-module_mask-enter__32s5F","dropdown-enter-active":"main-module_dropdown-enter-active__ob1fb","modal-enter-active":"main-module_modal-enter-active__3BMYq","mask-enter-active":"main-module_mask-enter-active__1WgVf","dropdown-exit":"main-module_dropdown-exit__3b2wX","modal-exit":"main-module_modal-exit__y2N_F","mask-exit":"main-module_mask-exit__325a4","dropdown-exit-active":"main-module_dropdown-exit-active__22rth","modal-exit-active":"main-module_modal-exit-active__ID7ce","mask-exit-active":"main-module_mask-exit-active__2qs-r"};
|
|
7
|
+
var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n/** Form Variables */\n/** Errors */\n@media (max-width: 576px) {\n .main-module_dropdown__content__X9kz_ {\n display: flex;\n flex-direction: column;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n }\n .main-module_dropdown__header__kvhNn {\n display: block;\n }\n .main-module_dropdown__header-title__7NXxw {\n margin-left: 0.5rem;\n }\n}\n@media (min-width: 576px) {\n .main-module_dropdown__header__kvhNn {\n display: none;\n }\n}\n.main-module_dropdown__36KKf {\n position: relative;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n.main-module_dropdown__content__X9kz_ {\n flex: 0 0 auto;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 1200;\n width: auto;\n padding: 0.5rem 0;\n background-color: #ffffff;\n border-radius: 3px;\n box-shadow: 0 0px 25px 0 rgba(0, 0, 0, 0.2);\n}\n.main-module_dropdown__content__X9kz_::before {\n content: '';\n display: block;\n position: absolute;\n top: -14px;\n left: 7px;\n border-width: 7px;\n border-style: solid;\n border-color: transparent transparent #ffffff transparent;\n}\n.main-module_dropdown__content_right__Rp4hR::before {\n display: none;\n}\n.main-module_dropdown__content_right__Rp4hR::after {\n content: '';\n display: block;\n position: absolute;\n top: -14px;\n right: 7px;\n border-width: 7px;\n border-style: solid;\n border-color: transparent transparent #ffffff transparent;\n}\n.main-module_dropdown__list__2bd_r {\n flex: 0 0 auto;\n padding: 0;\n width: 100%;\n min-width: 20rem;\n text-align: left;\n font-size: 14px;\n font-size: 1rem;\n}\n.main-module_dropdown__list__2bd_r > li {\n list-style: none;\n}\n.main-module_dropdown__list-head__2Uyb0 {\n padding: 0.5rem 0 0.5rem 1rem;\n}\n.main-module_dropdown__list_with-scroll__KP9yO {\n scrollbar-color: #79829c #ffffff;\n scrollbar-width: thin;\n max-height: 280px;\n overflow-y: auto;\n}\n.main-module_dropdown__list_with-scroll__KP9yO::-webkit-scrollbar {\n width: 7px;\n}\n.main-module_dropdown__list_with-scroll__KP9yO::-webkit-scrollbar-track {\n background-color: #ffffff;\n}\n.main-module_dropdown__list_with-scroll__KP9yO::-webkit-scrollbar-track:hover {\n background-color: #f3f4f8;\n}\n.main-module_dropdown__list_with-scroll__KP9yO::-webkit-scrollbar-thumb {\n background-color: #5c657e;\n}\n.main-module_dropdown__list_with-scroll__KP9yO::-webkit-scrollbar-thumb:hover {\n background-color: #2d3748;\n}\n.main-module_dropdown__list-item__1u185 {\n display: block;\n padding: 0.5rem 1rem;\n cursor: default;\n}\n.main-module_dropdown__list-item__1u185:hover {\n background-color: #f5f7ff;\n}\n.main-module_dropdown__list-item_selected__2GYQr {\n background-color: #f5f7ff;\n}\n.main-module_dropdown__list-item_disabled__1Psh7 {\n color: #abb4cd;\n}\n.main-module_dropdown__list-item_readonly__3bbj0 {\n color: #abb4cd;\n}\n.main-module_dropdown__search__1Moob {\n padding: 0.5rem 1rem 0.5rem;\n}\n.main-module_dropdown__header__kvhNn {\n margin: calc(1rem * 0.5) 1rem;\n}\n.main-module_dropdown__header-content__10Zg9 {\n display: flex;\n flex-direction: row;\n align-items: center;\n}\n.main-module_dropdown__header-icon__30vfb {\n margin-right: 1rem;\n color: #abb4cd;\n font-size: 10px;\n font-size: 0.7142857142857143rem;\n}\n.main-module_dropdown__header-title__7NXxw {\n font-weight: 600;\n color: #5c657e;\n}\n.main-module_select__1ocPo {\n position: relative;\n display: flex;\n flex: 0 2 auto;\n align-items: center;\n width: 100%;\n}\n.main-module_select__1ocPo::after {\n content: '';\n position: absolute;\n display: block;\n right: 0.715em;\n width: 7px;\n height: 7px;\n margin-top: -2px;\n transform: rotate(-45deg);\n border-width: 0 0 1px 1px;\n border-style: solid;\n border-color: #3c83ec;\n}\n.main-module_select__1ocPo input {\n text-overflow: ellipsis;\n}\n.main-module_dropdown-enter__2RGtd,\n.main-module_modal-enter__I5ELD {\n opacity: 0;\n transform: translate3d(0, -2rem, 0);\n}\n.main-module_mask-enter__32s5F {\n opacity: 0;\n}\n.main-module_dropdown-enter-active__ob1fb,\n.main-module_modal-enter-active__3BMYq {\n opacity: 1;\n transform: translate3d(0, 0, 0);\n transition: transform 0.2s, opacity 0.2s;\n}\n.main-module_mask-enter-active__1WgVf {\n opacity: 1;\n transition: opacity 0.1s;\n}\n.main-module_dropdown-exit__3b2wX,\n.main-module_modal-exit__y2N_F {\n opacity: 1;\n transform: translate3d(0, 0, 0);\n}\n.main-module_mask-exit__325a4 {\n opacity: 1;\n}\n.main-module_dropdown-exit-active__22rth,\n.main-module_modal-exit-active__ID7ce {\n opacity: 0;\n transform: translate3d(0, -2rem, 0);\n transition: transform 0.2s, opacity 0.2s;\n}\n.main-module_mask-exit-active__2qs-r {\n opacity: 0;\n transition: opacity 0.1s;\n}\n";
|
|
8
|
+
var cssClasses = {"dropdown__content":"main-module_dropdown__content__X9kz_","dropdown__header":"main-module_dropdown__header__kvhNn","dropdown__header-title":"main-module_dropdown__header-title__7NXxw","dropdown":"main-module_dropdown__36KKf","dropdown__content_right":"main-module_dropdown__content_right__Rp4hR","dropdown__list":"main-module_dropdown__list__2bd_r","dropdown__list-head":"main-module_dropdown__list-head__2Uyb0","dropdown__list_with-scroll":"main-module_dropdown__list_with-scroll__KP9yO","dropdown__list-item":"main-module_dropdown__list-item__1u185","dropdown__list-item_selected":"main-module_dropdown__list-item_selected__2GYQr","dropdown__list-item_disabled":"main-module_dropdown__list-item_disabled__1Psh7","dropdown__list-item_readonly":"main-module_dropdown__list-item_readonly__3bbj0","dropdown__search":"main-module_dropdown__search__1Moob","dropdown__header-content":"main-module_dropdown__header-content__10Zg9","dropdown__header-icon":"main-module_dropdown__header-icon__30vfb","select":"main-module_select__1ocPo","dropdown-enter":"main-module_dropdown-enter__2RGtd","modal-enter":"main-module_modal-enter__I5ELD","mask-enter":"main-module_mask-enter__32s5F","dropdown-enter-active":"main-module_dropdown-enter-active__ob1fb","modal-enter-active":"main-module_modal-enter-active__3BMYq","mask-enter-active":"main-module_mask-enter-active__1WgVf","dropdown-exit":"main-module_dropdown-exit__3b2wX","modal-exit":"main-module_modal-exit__y2N_F","mask-exit":"main-module_mask-exit__325a4","dropdown-exit-active":"main-module_dropdown-exit-active__22rth","modal-exit-active":"main-module_modal-exit-active__ID7ce","mask-exit-active":"main-module_mask-exit-active__2qs-r"};
|
|
9
9
|
styleInject_es['default'](css_248z);
|
|
10
10
|
|
|
11
11
|
exports.default = cssClasses;
|
|
@@ -24,15 +24,15 @@ import { buttonTypes } from './components/index.js';
|
|
|
24
24
|
*/
|
|
25
25
|
var Button = function (_a) {
|
|
26
26
|
var _b;
|
|
27
|
-
var _c = _a.as, as = _c === void 0 ? 'button' : _c, size = _a.size, color = _a.color, variant = _a.variant, inactive = _a.inactive,
|
|
27
|
+
var _c = _a.as, as = _c === void 0 ? 'button' : _c, size = _a.size, color = _a.color, variant = _a.variant, inactive = _a.inactive, _d = _a.className, className = _d === void 0 ? '' : _d, props = __rest(_a, ["as", "size", "color", "variant", "inactive", "className"]);
|
|
28
28
|
var buttonClassNames = classnames(cssClasses[cssButton], (_b = {},
|
|
29
|
+
_b[className] = className,
|
|
29
30
|
_b[cssClasses[cssButtonS]] = size,
|
|
30
31
|
_b[cssClasses[cssButtonBg]] = !variant,
|
|
31
32
|
_b[cssClasses[cssButtonOutline]] = variant === 'outline',
|
|
32
33
|
_b[cssClasses[cssButtonLink]] = variant === 'link',
|
|
33
34
|
_b[cssClasses[cssButtonSecondary]] = color === 'secondary',
|
|
34
35
|
_b[cssClasses[cssButtonInactive]] = inactive,
|
|
35
|
-
_b.className = className,
|
|
36
36
|
_b));
|
|
37
37
|
return buttonTypes[as].render(props, buttonClassNames);
|
|
38
38
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../../src/components/button/index.tsx"],"sourcesContent":["import React from 'react';\n\nimport classnames from 'classnames';\nimport cssClasses from '@css/button/main.module.less';\n\nimport { IButtonProps } from './types';\nimport { cssButton, cssButtonOutline, cssButtonBg, cssButtonLink, cssButtonS, cssButtonSecondary, cssButtonInactive } from './css_classes';\nimport { buttonTypes } from './components';\n\n/**\n * @component\n * @example\n * return (\n * <Button\n * size=\"small\"\n * variant=\"light\">\n * Text button\n * </Button>\n *\n * <Button\n * as=\"link\"\n * href=\"https://onet.pl\">\n * Text button\n * </Button>\n * )\n */\nconst Button: React.FC<IButtonProps> = ({ as = 'button', size, color, variant, inactive, className, ...props }): JSX.Element => {\n const buttonClassNames = classnames(cssClasses[cssButton], {\n [cssClasses[cssButtonS]]: size,\n [cssClasses[cssButtonBg]]: !variant,\n [cssClasses[cssButtonOutline]]: variant === 'outline',\n [cssClasses[cssButtonLink]]: variant === 'link',\n [cssClasses[cssButtonSecondary]]: color === 'secondary',\n [cssClasses[cssButtonInactive]]: inactive,\n
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../../src/components/button/index.tsx"],"sourcesContent":["import React from 'react';\n\nimport classnames from 'classnames';\nimport cssClasses from '@css/button/main.module.less';\n\nimport { IButtonProps } from './types';\nimport { cssButton, cssButtonOutline, cssButtonBg, cssButtonLink, cssButtonS, cssButtonSecondary, cssButtonInactive } from './css_classes';\nimport { buttonTypes } from './components';\n\n/**\n * @component\n * @example\n * return (\n * <Button\n * size=\"small\"\n * variant=\"light\">\n * Text button\n * </Button>\n *\n * <Button\n * as=\"link\"\n * href=\"https://onet.pl\">\n * Text button\n * </Button>\n * )\n */\nconst Button: React.FC<IButtonProps> = ({ as = 'button', size, color, variant, inactive, className = '', ...props }): JSX.Element => {\n const buttonClassNames = classnames(cssClasses[cssButton], {\n [className]: className,\n [cssClasses[cssButtonS]]: size,\n [cssClasses[cssButtonBg]]: !variant,\n [cssClasses[cssButtonOutline]]: variant === 'outline',\n [cssClasses[cssButtonLink]]: variant === 'link',\n [cssClasses[cssButtonSecondary]]: color === 'secondary',\n [cssClasses[cssButtonInactive]]: inactive,\n });\n\n return buttonTypes[as].render(props, buttonClassNames);\n};\n\nexport default Button;\n"],"names":[],"mappings":";;;;;;;AASA;;;;;;;;;;;;;;;;;IAiBM,MAAM,GAA2B,UAAC,EAA2E;;IAAzE,IAAA,UAAa,EAAb,kCAAa,EAAE,cAAI,EAAE,gBAAK,EAAE,oBAAO,EAAE,sBAAQ,EAAE,iBAAc,EAAd,mCAAc,EAAE,+EAAQ;IAC7G,IAAM,gBAAgB,GAAG,UAAU,CAAC,UAAU,CAAC,SAAS,CAAC;QACrD,GAAC,SAAS,IAAG,SAAS;QACtB,GAAC,UAAU,CAAC,UAAU,CAAC,IAAG,IAAI;QAC9B,GAAC,UAAU,CAAC,WAAW,CAAC,IAAG,CAAC,OAAO;QACnC,GAAC,UAAU,CAAC,gBAAgB,CAAC,IAAG,OAAO,KAAK,SAAS;QACrD,GAAC,UAAU,CAAC,aAAa,CAAC,IAAG,OAAO,KAAK,MAAM;QAC/C,GAAC,UAAU,CAAC,kBAAkB,CAAC,IAAG,KAAK,KAAK,WAAW;QACvD,GAAC,UAAU,CAAC,iBAAiB,CAAC,IAAG,QAAQ;YAC3C,CAAC;IAEH,OAAO,WAAW,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,gBAAgB,CAAC,CAAC;AAC3D;;;;"}
|
|
@@ -4,11 +4,12 @@ import { useDropdownContext } from '../context/index.js';
|
|
|
4
4
|
import { SCREEN_XS } from '../../../constants/responsive_breakpoints.js';
|
|
5
5
|
import { useScreenDetect } from '../../../hooks/use_screen_detect.js';
|
|
6
6
|
import iconCssClasses from '../../../css/icons/main.module.less.js';
|
|
7
|
+
import { classNames } from '../../../utilities/styles/classNames.js';
|
|
7
8
|
import cssClasses from '../../../css/dropdown/main.module.less.js';
|
|
8
9
|
import { useClickOutside } from '../../../hooks/use_click_outside.js';
|
|
9
10
|
import { createPortal } from 'react-dom';
|
|
10
11
|
import { TransitionGroup, CSSTransition } from 'react-transition-group';
|
|
11
|
-
import { cssDropdownContent, cssDropdownHeader, cssDropdownHeaderContent, cssDropdownHeaderTitle } from '../css_classes.js';
|
|
12
|
+
import { cssDropdownContent, cssDropdownContentRight, cssDropdownHeader, cssDropdownHeaderContent, cssDropdownHeaderTitle } from '../css_classes.js';
|
|
12
13
|
import IconArrow from '../../../assets/icon_arrow.js';
|
|
13
14
|
import { getXYModifiersForNestedDropdowns, isChildOfModal } from '../utilities.js';
|
|
14
15
|
import { DROPDOWN_Z_INDEX, DROPDOWN_ON_MODAL_Z_INDEX } from '../constants.js';
|
|
@@ -20,15 +21,16 @@ import { DROPDOWN_Z_INDEX, DROPDOWN_ON_MODAL_Z_INDEX } from '../constants.js';
|
|
|
20
21
|
* <Dropdown.Content> ... </Dropdown.Content>
|
|
21
22
|
*/
|
|
22
23
|
var Content = function (_a) {
|
|
23
|
-
var headerComponent = _a.headerComponent, headerGoBackText = _a.headerGoBackText, headerGoBackIcon = _a.headerGoBackIcon, children = _a.children, portalContainer = _a.portalContainer;
|
|
24
|
+
var headerComponent = _a.headerComponent, headerGoBackText = _a.headerGoBackText, headerGoBackIcon = _a.headerGoBackIcon, children = _a.children, _b = _a.arrowSide, arrowSide = _b === void 0 ? 'left' : _b, portalContainer = _a.portalContainer;
|
|
24
25
|
var t = useTranslation()[0];
|
|
25
26
|
var contentRef = useRef(null);
|
|
26
|
-
var
|
|
27
|
-
var
|
|
27
|
+
var _c = useDropdownContext(), wrapperRef = _c.wrapperRef, toggleDropdown = _c.toggleDropdown, isOpen = _c.isOpen;
|
|
28
|
+
var _d = useState({
|
|
28
29
|
left: '0px',
|
|
29
30
|
top: '0px',
|
|
30
31
|
zIndex: DROPDOWN_Z_INDEX,
|
|
31
|
-
}), styles =
|
|
32
|
+
}), styles = _d[0], setStyles = _d[1];
|
|
33
|
+
var contentClassName = classNames([cssDropdownContent, arrowSide === 'right' && cssDropdownContentRight], cssClasses);
|
|
32
34
|
var screenWidthName = useScreenDetect();
|
|
33
35
|
var refs = [contentRef];
|
|
34
36
|
if (wrapperRef) {
|
|
@@ -59,7 +61,7 @@ var Content = function (_a) {
|
|
|
59
61
|
exit: cssClasses['dropdown-exit'],
|
|
60
62
|
exitActive: cssClasses['dropdown-exit-active'],
|
|
61
63
|
} },
|
|
62
|
-
React.createElement("div", { ref: contentRef, style: styles, className:
|
|
64
|
+
React.createElement("div", { ref: contentRef, style: styles, className: contentClassName },
|
|
63
65
|
React.createElement("div", { className: cssClasses[cssDropdownHeader] },
|
|
64
66
|
React.createElement("div", { onClick: function () { return typeof toggleDropdown === 'function' && toggleDropdown(); } }, headerComponent !== null && headerComponent !== void 0 ? headerComponent : (React.createElement("div", { className: cssClasses[cssDropdownHeaderContent] },
|
|
65
67
|
headerGoBackIcon || React.createElement(IconArrow, { className: iconCssClasses['icon_rotate-180'] }),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"content.js","sources":["../../../../../../src/components/dropdown/components/content.tsx"],"sourcesContent":["import React, { useRef, useState, useEffect } from 'react';\nimport { createPortal } from 'react-dom';\nimport { TransitionGroup, CSSTransition } from 'react-transition-group';\nimport { useTranslation } from 'react-i18next';\n\nimport { IDropdownContentProps } from '../types';\nimport { IDropdownContext } from '../context/types';\nimport { useDropdownContext } from '../context';\nimport { useClickOutside, useScreenDetect } from '../../../hooks';\nimport { SCREEN_XS } from '@constants/responsive_breakpoints';\n\nimport {
|
|
1
|
+
{"version":3,"file":"content.js","sources":["../../../../../../src/components/dropdown/components/content.tsx"],"sourcesContent":["import React, { useRef, useState, useEffect } from 'react';\nimport { createPortal } from 'react-dom';\nimport { TransitionGroup, CSSTransition } from 'react-transition-group';\nimport { useTranslation } from 'react-i18next';\n\nimport { IDropdownContentProps } from '../types';\nimport { IDropdownContext } from '../context/types';\nimport { useDropdownContext } from '../context';\nimport { useClickOutside, useScreenDetect } from '../../../hooks';\nimport { SCREEN_XS } from '@constants/responsive_breakpoints';\n\nimport {\n cssDropdownContent,\n cssDropdownHeader,\n cssDropdownHeaderTitle,\n cssDropdownHeaderContent,\n cssDropdownContentRight,\n} from '../css_classes';\nimport cssClasses from '@css/dropdown/main.module.less';\nimport iconCssClasses from '@css/icons/main.module.less';\nimport IconArrow from '@assets/icon_arrow';\nimport { getXYModifiersForNestedDropdowns, isChildOfModal } from '../utilities';\nimport { DROPDOWN_ON_MODAL_Z_INDEX, DROPDOWN_Z_INDEX } from '@components/dropdown/constants';\nimport { classNames } from '@utilities/styles/classNames';\n\n/**\n * Dropdown.Content component. This togglable part of dropdown.\n * @component\n * @example\n * <Dropdown.Content> ... </Dropdown.Content>\n */\nconst Content: React.FC<IDropdownContentProps> = ({\n headerComponent,\n headerGoBackText,\n headerGoBackIcon,\n children,\n arrowSide = 'left',\n portalContainer,\n}) => {\n const [t] = useTranslation();\n const contentRef = useRef<HTMLDivElement>(null);\n const { wrapperRef, toggleDropdown, isOpen }: IDropdownContext = useDropdownContext();\n const [styles, setStyles] = useState({\n left: '0px',\n top: '0px',\n zIndex: DROPDOWN_Z_INDEX,\n });\n const contentClassName = classNames([cssDropdownContent, arrowSide === 'right' && cssDropdownContentRight], cssClasses);\n const screenWidthName = useScreenDetect();\n\n const refs = [contentRef];\n if (wrapperRef) {\n refs.push(wrapperRef);\n }\n\n useClickOutside(refs, () => {\n if (typeof toggleDropdown === 'function') {\n toggleDropdown();\n }\n });\n\n useEffect(() => {\n if (wrapperRef?.current) {\n const { x, y, height } = wrapperRef.current.getBoundingClientRect();\n const yOffset = 10;\n\n const { xModifier, yModifier } = getXYModifiersForNestedDropdowns(portalContainer?.current);\n const positionTop = height + y + yOffset - yModifier;\n const positionLeft = x - xModifier;\n const isInModal = isChildOfModal(wrapperRef);\n const zIndex = isInModal ? DROPDOWN_ON_MODAL_Z_INDEX : DROPDOWN_Z_INDEX;\n\n screenWidthName === SCREEN_XS\n ? setStyles({ top: `0px`, left: `0px`, zIndex })\n : setStyles({ top: `${positionTop}px`, left: `${positionLeft}px`, zIndex });\n }\n }, [portalContainer, screenWidthName, wrapperRef, isOpen]);\n\n return createPortal(\n <TransitionGroup component={null}>\n {isOpen === true ? (\n <CSSTransition\n timeout={200}\n classNames={{\n enter: cssClasses['dropdown-enter'],\n enterActive: cssClasses['dropdown-enter-active'],\n exit: cssClasses['dropdown-exit'],\n exitActive: cssClasses['dropdown-exit-active'],\n }}\n >\n <div ref={contentRef} style={styles} className={contentClassName}>\n <div className={cssClasses[cssDropdownHeader]}>\n <div onClick={() => typeof toggleDropdown === 'function' && toggleDropdown()}>\n {headerComponent ?? (\n <div className={cssClasses[cssDropdownHeaderContent]}>\n {headerGoBackIcon || <IconArrow className={iconCssClasses['icon_rotate-180']} />}\n <span className={cssClasses[cssDropdownHeaderTitle]}>{headerGoBackText ?? t('Go back')}</span>\n </div>\n )}\n </div>\n </div>\n {children}\n </div>\n </CSSTransition>\n ) : null}\n </TransitionGroup>,\n portalContainer?.current || document.body\n );\n};\n\nexport default Content;\n"],"names":[],"mappings":"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"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
export declare const cssDropdown = "dropdown";
|
|
2
2
|
export declare const cssDropdownContent: string;
|
|
3
|
+
export declare const cssDropdownContentRight: string;
|
|
3
4
|
export declare const cssDropdownHeader: string;
|
|
4
5
|
export declare const cssDropdownHeaderIcon: string;
|
|
5
6
|
export declare const cssDropdownHeaderTitle: string;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
var cssDropdown = 'dropdown';
|
|
2
2
|
var cssDropdownContent = cssDropdown + "__content";
|
|
3
|
+
var cssDropdownContentRight = cssDropdownContent + "_right";
|
|
3
4
|
var cssDropdownHeader = cssDropdown + "__header";
|
|
4
5
|
var cssDropdownHeaderTitle = cssDropdown + "__header-title";
|
|
5
6
|
var cssDropdownHeaderContent = cssDropdown + "__header-content";
|
|
@@ -13,5 +14,5 @@ var cssDropdownListItemSelected = cssDropdown + "__list-item_selected";
|
|
|
13
14
|
var cssDropdownListItemDisabled = cssDropdown + "__list-item_disabled";
|
|
14
15
|
var cssDropdownListItemReadonly = cssDropdown + "__list-item_readonly";
|
|
15
16
|
|
|
16
|
-
export { cssDropdown, cssDropdownContent, cssDropdownHeader, cssDropdownHeaderContent, cssDropdownHeaderTitle, cssDropdownList, cssDropdownListHead, cssDropdownListItem, cssDropdownListItemDisabled, cssDropdownListItemReadonly, cssDropdownListItemSelected, cssDropdownListWithGroup, cssDropdownSearch, cssDropdownWithScroll };
|
|
17
|
+
export { cssDropdown, cssDropdownContent, cssDropdownContentRight, cssDropdownHeader, cssDropdownHeaderContent, cssDropdownHeaderTitle, cssDropdownList, cssDropdownListHead, cssDropdownListItem, cssDropdownListItemDisabled, cssDropdownListItemReadonly, cssDropdownListItemSelected, cssDropdownListWithGroup, cssDropdownSearch, cssDropdownWithScroll };
|
|
17
18
|
//# sourceMappingURL=css_classes.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"css_classes.js","sources":["../../../../../src/components/dropdown/css_classes.ts"],"sourcesContent":["export const cssDropdown = 'dropdown';\nexport const cssDropdownContent = `${cssDropdown}__content`;\nexport const cssDropdownHeader = `${cssDropdown}__header`;\nexport const cssDropdownHeaderIcon = `${cssDropdown}__header-icon`;\nexport const cssDropdownHeaderTitle = `${cssDropdown}__header-title`;\nexport const cssDropdownHeaderContent = `${cssDropdown}__header-content`;\nexport const cssDropdownInput = `${cssDropdown}__input`;\nexport const cssDropdownList = `${cssDropdown}__list`;\n\nexport const cssDropdownSearch = `${cssDropdown}__search`;\nexport const cssDropdownWithScroll = `${cssDropdown}__list_with-scroll`;\nexport const cssDropdownListWithGroup = `${cssDropdown}__list_with-group`;\nexport const cssDropdownListHead = `${cssDropdown}__list-head`;\nexport const cssDropdownListItem = `${cssDropdown}__list-item`;\nexport const cssDropdownListItemSelected = `${cssDropdown}__list-item_selected`;\nexport const cssDropdownListItemDisabled = `${cssDropdown}__list-item_disabled`;\nexport const cssDropdownListItemReadonly = `${cssDropdown}__list-item_readonly`;\n\nexport const cssIcon = `icon`;\nexport const cssIconBack = `${cssIcon}-back`;\n"],"names":[],"mappings":"IAAa,WAAW,GAAG,WAAW;IACzB,kBAAkB,GAAM,WAAW,eAAY;IAC/C,iBAAiB,GAAM,WAAW,cAAW;IAE7C,sBAAsB,GAAM,WAAW,oBAAiB;IACxD,wBAAwB,GAAM,WAAW,sBAAmB;IAE5D,eAAe,GAAM,WAAW,YAAS;IAEzC,iBAAiB,GAAM,WAAW,cAAW;IAC7C,qBAAqB,GAAM,WAAW,wBAAqB;IAC3D,wBAAwB,GAAM,WAAW,uBAAoB;IAC7D,mBAAmB,GAAM,WAAW,iBAAc;IAClD,mBAAmB,GAAM,WAAW,iBAAc;IAClD,2BAA2B,GAAM,WAAW,0BAAuB;IACnE,2BAA2B,GAAM,WAAW,0BAAuB;IACnE,2BAA2B,GAAM,WAAW;;;;"}
|
|
1
|
+
{"version":3,"file":"css_classes.js","sources":["../../../../../src/components/dropdown/css_classes.ts"],"sourcesContent":["export const cssDropdown = 'dropdown';\nexport const cssDropdownContent = `${cssDropdown}__content`;\nexport const cssDropdownContentRight = `${cssDropdownContent}_right`;\nexport const cssDropdownHeader = `${cssDropdown}__header`;\nexport const cssDropdownHeaderIcon = `${cssDropdown}__header-icon`;\nexport const cssDropdownHeaderTitle = `${cssDropdown}__header-title`;\nexport const cssDropdownHeaderContent = `${cssDropdown}__header-content`;\nexport const cssDropdownInput = `${cssDropdown}__input`;\nexport const cssDropdownList = `${cssDropdown}__list`;\n\nexport const cssDropdownSearch = `${cssDropdown}__search`;\nexport const cssDropdownWithScroll = `${cssDropdown}__list_with-scroll`;\nexport const cssDropdownListWithGroup = `${cssDropdown}__list_with-group`;\nexport const cssDropdownListHead = `${cssDropdown}__list-head`;\nexport const cssDropdownListItem = `${cssDropdown}__list-item`;\nexport const cssDropdownListItemSelected = `${cssDropdown}__list-item_selected`;\nexport const cssDropdownListItemDisabled = `${cssDropdown}__list-item_disabled`;\nexport const cssDropdownListItemReadonly = `${cssDropdown}__list-item_readonly`;\n\nexport const cssIcon = `icon`;\nexport const cssIconBack = `${cssIcon}-back`;\n"],"names":[],"mappings":"IAAa,WAAW,GAAG,WAAW;IACzB,kBAAkB,GAAM,WAAW,eAAY;IAC/C,uBAAuB,GAAM,kBAAkB,YAAS;IACxD,iBAAiB,GAAM,WAAW,cAAW;IAE7C,sBAAsB,GAAM,WAAW,oBAAiB;IACxD,wBAAwB,GAAM,WAAW,sBAAmB;IAE5D,eAAe,GAAM,WAAW,YAAS;IAEzC,iBAAiB,GAAM,WAAW,cAAW;IAC7C,qBAAqB,GAAM,WAAW,wBAAqB;IAC3D,wBAAwB,GAAM,WAAW,uBAAoB;IAC7D,mBAAmB,GAAM,WAAW,iBAAc;IAClD,mBAAmB,GAAM,WAAW,iBAAc;IAClD,2BAA2B,GAAM,WAAW,0BAAuB;IACnE,2BAA2B,GAAM,WAAW,0BAAuB;IACnE,2BAA2B,GAAM,WAAW;;;;"}
|
|
@@ -39,6 +39,7 @@ export interface IDropdownContentProps {
|
|
|
39
39
|
headerGoBackText?: string;
|
|
40
40
|
headerGoBackIcon?: JSX.Element;
|
|
41
41
|
portalContainer?: RefObject<HTMLElement>;
|
|
42
|
+
arrowSide?: 'left' | 'right';
|
|
42
43
|
}
|
|
43
44
|
export interface IDropdownSearchProps {
|
|
44
45
|
onKeyUp: (ev: React.KeyboardEvent<Element>) => void;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
|
|
2
2
|
|
|
3
|
-
var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n/** Form Variables */\n/** Errors */\n@media (max-width: 576px) {\n .main-module_dropdown__content__X9kz_ {\n display: flex;\n flex-direction: column;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n }\n .main-module_dropdown__header__kvhNn {\n display: block;\n }\n .main-module_dropdown__header-title__7NXxw {\n margin-left: 0.5rem;\n }\n}\n@media (min-width: 576px) {\n .main-module_dropdown__header__kvhNn {\n display: none;\n }\n}\n.main-module_dropdown__36KKf {\n position: relative;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n.main-module_dropdown__content__X9kz_ {\n flex: 0 0 auto;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 1200;\n width: auto;\n padding: 0.5rem 0;\n background-color: #ffffff;\n border-radius: 3px;\n box-shadow: 0 0px 25px 0 rgba(0, 0, 0, 0.2);\n}\n.main-module_dropdown__content__X9kz_::before {\n content: '';\n display: block;\n position: absolute;\n top: -14px;\n left: 7px;\n border-width: 7px;\n border-style: solid;\n border-color: transparent transparent #ffffff transparent;\n}\n.main-module_dropdown__list__2bd_r {\n flex: 0 0 auto;\n padding: 0;\n width: 100%;\n min-width: 20rem;\n text-align: left;\n font-size: 14px;\n font-size: 1rem;\n}\n.main-module_dropdown__list__2bd_r > li {\n list-style: none;\n}\n.main-module_dropdown__list-head__2Uyb0 {\n padding: 0.5rem 0 0.5rem 1rem;\n}\n.main-module_dropdown__list_with-scroll__KP9yO {\n scrollbar-color: #79829c #ffffff;\n scrollbar-width: thin;\n max-height: 280px;\n overflow-y: auto;\n}\n.main-module_dropdown__list_with-scroll__KP9yO::-webkit-scrollbar {\n width: 7px;\n}\n.main-module_dropdown__list_with-scroll__KP9yO::-webkit-scrollbar-track {\n background-color: #ffffff;\n}\n.main-module_dropdown__list_with-scroll__KP9yO::-webkit-scrollbar-track:hover {\n background-color: #f3f4f8;\n}\n.main-module_dropdown__list_with-scroll__KP9yO::-webkit-scrollbar-thumb {\n background-color: #5c657e;\n}\n.main-module_dropdown__list_with-scroll__KP9yO::-webkit-scrollbar-thumb:hover {\n background-color: #2d3748;\n}\n.main-module_dropdown__list-item__1u185 {\n display: block;\n padding: 0.5rem 1rem;\n cursor: default;\n}\n.main-module_dropdown__list-item__1u185:hover {\n background-color: #f5f7ff;\n}\n.main-module_dropdown__list-item_selected__2GYQr {\n background-color: #f5f7ff;\n}\n.main-module_dropdown__list-item_disabled__1Psh7 {\n color: #abb4cd;\n}\n.main-module_dropdown__list-item_readonly__3bbj0 {\n color: #abb4cd;\n}\n.main-module_dropdown__search__1Moob {\n padding: 0.5rem 1rem 0.5rem;\n}\n.main-module_dropdown__header__kvhNn {\n margin: calc(1rem * 0.5) 1rem;\n}\n.main-module_dropdown__header-content__10Zg9 {\n display: flex;\n flex-direction: row;\n align-items: center;\n}\n.main-module_dropdown__header-icon__30vfb {\n margin-right: 1rem;\n color: #abb4cd;\n font-size: 10px;\n font-size: 0.7142857142857143rem;\n}\n.main-module_dropdown__header-title__7NXxw {\n font-weight: 600;\n color: #5c657e;\n}\n.main-module_select__1ocPo {\n position: relative;\n display: flex;\n flex: 0 2 auto;\n align-items: center;\n width: 100%;\n}\n.main-module_select__1ocPo::after {\n content: '';\n position: absolute;\n display: block;\n right: 0.715em;\n width: 7px;\n height: 7px;\n margin-top: -2px;\n transform: rotate(-45deg);\n border-width: 0 0 1px 1px;\n border-style: solid;\n border-color: #3c83ec;\n}\n.main-module_select__1ocPo input {\n text-overflow: ellipsis;\n}\n.main-module_dropdown-enter__2RGtd,\n.main-module_modal-enter__I5ELD {\n opacity: 0;\n transform: translate3d(0, -2rem, 0);\n}\n.main-module_mask-enter__32s5F {\n opacity: 0;\n}\n.main-module_dropdown-enter-active__ob1fb,\n.main-module_modal-enter-active__3BMYq {\n opacity: 1;\n transform: translate3d(0, 0, 0);\n transition: transform 0.2s, opacity 0.2s;\n}\n.main-module_mask-enter-active__1WgVf {\n opacity: 1;\n transition: opacity 0.1s;\n}\n.main-module_dropdown-exit__3b2wX,\n.main-module_modal-exit__y2N_F {\n opacity: 1;\n transform: translate3d(0, 0, 0);\n}\n.main-module_mask-exit__325a4 {\n opacity: 1;\n}\n.main-module_dropdown-exit-active__22rth,\n.main-module_modal-exit-active__ID7ce {\n opacity: 0;\n transform: translate3d(0, -2rem, 0);\n transition: transform 0.2s, opacity 0.2s;\n}\n.main-module_mask-exit-active__2qs-r {\n opacity: 0;\n transition: opacity 0.1s;\n}\n";
|
|
4
|
-
var cssClasses = {"dropdown__content":"main-module_dropdown__content__X9kz_","dropdown__header":"main-module_dropdown__header__kvhNn","dropdown__header-title":"main-module_dropdown__header-title__7NXxw","dropdown":"main-module_dropdown__36KKf","dropdown__list":"main-module_dropdown__list__2bd_r","dropdown__list-head":"main-module_dropdown__list-head__2Uyb0","dropdown__list_with-scroll":"main-module_dropdown__list_with-scroll__KP9yO","dropdown__list-item":"main-module_dropdown__list-item__1u185","dropdown__list-item_selected":"main-module_dropdown__list-item_selected__2GYQr","dropdown__list-item_disabled":"main-module_dropdown__list-item_disabled__1Psh7","dropdown__list-item_readonly":"main-module_dropdown__list-item_readonly__3bbj0","dropdown__search":"main-module_dropdown__search__1Moob","dropdown__header-content":"main-module_dropdown__header-content__10Zg9","dropdown__header-icon":"main-module_dropdown__header-icon__30vfb","select":"main-module_select__1ocPo","dropdown-enter":"main-module_dropdown-enter__2RGtd","modal-enter":"main-module_modal-enter__I5ELD","mask-enter":"main-module_mask-enter__32s5F","dropdown-enter-active":"main-module_dropdown-enter-active__ob1fb","modal-enter-active":"main-module_modal-enter-active__3BMYq","mask-enter-active":"main-module_mask-enter-active__1WgVf","dropdown-exit":"main-module_dropdown-exit__3b2wX","modal-exit":"main-module_modal-exit__y2N_F","mask-exit":"main-module_mask-exit__325a4","dropdown-exit-active":"main-module_dropdown-exit-active__22rth","modal-exit-active":"main-module_modal-exit-active__ID7ce","mask-exit-active":"main-module_mask-exit-active__2qs-r"};
|
|
3
|
+
var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n/** Form Variables */\n/** Errors */\n@media (max-width: 576px) {\n .main-module_dropdown__content__X9kz_ {\n display: flex;\n flex-direction: column;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n }\n .main-module_dropdown__header__kvhNn {\n display: block;\n }\n .main-module_dropdown__header-title__7NXxw {\n margin-left: 0.5rem;\n }\n}\n@media (min-width: 576px) {\n .main-module_dropdown__header__kvhNn {\n display: none;\n }\n}\n.main-module_dropdown__36KKf {\n position: relative;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n.main-module_dropdown__content__X9kz_ {\n flex: 0 0 auto;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 1200;\n width: auto;\n padding: 0.5rem 0;\n background-color: #ffffff;\n border-radius: 3px;\n box-shadow: 0 0px 25px 0 rgba(0, 0, 0, 0.2);\n}\n.main-module_dropdown__content__X9kz_::before {\n content: '';\n display: block;\n position: absolute;\n top: -14px;\n left: 7px;\n border-width: 7px;\n border-style: solid;\n border-color: transparent transparent #ffffff transparent;\n}\n.main-module_dropdown__content_right__Rp4hR::before {\n display: none;\n}\n.main-module_dropdown__content_right__Rp4hR::after {\n content: '';\n display: block;\n position: absolute;\n top: -14px;\n right: 7px;\n border-width: 7px;\n border-style: solid;\n border-color: transparent transparent #ffffff transparent;\n}\n.main-module_dropdown__list__2bd_r {\n flex: 0 0 auto;\n padding: 0;\n width: 100%;\n min-width: 20rem;\n text-align: left;\n font-size: 14px;\n font-size: 1rem;\n}\n.main-module_dropdown__list__2bd_r > li {\n list-style: none;\n}\n.main-module_dropdown__list-head__2Uyb0 {\n padding: 0.5rem 0 0.5rem 1rem;\n}\n.main-module_dropdown__list_with-scroll__KP9yO {\n scrollbar-color: #79829c #ffffff;\n scrollbar-width: thin;\n max-height: 280px;\n overflow-y: auto;\n}\n.main-module_dropdown__list_with-scroll__KP9yO::-webkit-scrollbar {\n width: 7px;\n}\n.main-module_dropdown__list_with-scroll__KP9yO::-webkit-scrollbar-track {\n background-color: #ffffff;\n}\n.main-module_dropdown__list_with-scroll__KP9yO::-webkit-scrollbar-track:hover {\n background-color: #f3f4f8;\n}\n.main-module_dropdown__list_with-scroll__KP9yO::-webkit-scrollbar-thumb {\n background-color: #5c657e;\n}\n.main-module_dropdown__list_with-scroll__KP9yO::-webkit-scrollbar-thumb:hover {\n background-color: #2d3748;\n}\n.main-module_dropdown__list-item__1u185 {\n display: block;\n padding: 0.5rem 1rem;\n cursor: default;\n}\n.main-module_dropdown__list-item__1u185:hover {\n background-color: #f5f7ff;\n}\n.main-module_dropdown__list-item_selected__2GYQr {\n background-color: #f5f7ff;\n}\n.main-module_dropdown__list-item_disabled__1Psh7 {\n color: #abb4cd;\n}\n.main-module_dropdown__list-item_readonly__3bbj0 {\n color: #abb4cd;\n}\n.main-module_dropdown__search__1Moob {\n padding: 0.5rem 1rem 0.5rem;\n}\n.main-module_dropdown__header__kvhNn {\n margin: calc(1rem * 0.5) 1rem;\n}\n.main-module_dropdown__header-content__10Zg9 {\n display: flex;\n flex-direction: row;\n align-items: center;\n}\n.main-module_dropdown__header-icon__30vfb {\n margin-right: 1rem;\n color: #abb4cd;\n font-size: 10px;\n font-size: 0.7142857142857143rem;\n}\n.main-module_dropdown__header-title__7NXxw {\n font-weight: 600;\n color: #5c657e;\n}\n.main-module_select__1ocPo {\n position: relative;\n display: flex;\n flex: 0 2 auto;\n align-items: center;\n width: 100%;\n}\n.main-module_select__1ocPo::after {\n content: '';\n position: absolute;\n display: block;\n right: 0.715em;\n width: 7px;\n height: 7px;\n margin-top: -2px;\n transform: rotate(-45deg);\n border-width: 0 0 1px 1px;\n border-style: solid;\n border-color: #3c83ec;\n}\n.main-module_select__1ocPo input {\n text-overflow: ellipsis;\n}\n.main-module_dropdown-enter__2RGtd,\n.main-module_modal-enter__I5ELD {\n opacity: 0;\n transform: translate3d(0, -2rem, 0);\n}\n.main-module_mask-enter__32s5F {\n opacity: 0;\n}\n.main-module_dropdown-enter-active__ob1fb,\n.main-module_modal-enter-active__3BMYq {\n opacity: 1;\n transform: translate3d(0, 0, 0);\n transition: transform 0.2s, opacity 0.2s;\n}\n.main-module_mask-enter-active__1WgVf {\n opacity: 1;\n transition: opacity 0.1s;\n}\n.main-module_dropdown-exit__3b2wX,\n.main-module_modal-exit__y2N_F {\n opacity: 1;\n transform: translate3d(0, 0, 0);\n}\n.main-module_mask-exit__325a4 {\n opacity: 1;\n}\n.main-module_dropdown-exit-active__22rth,\n.main-module_modal-exit-active__ID7ce {\n opacity: 0;\n transform: translate3d(0, -2rem, 0);\n transition: transform 0.2s, opacity 0.2s;\n}\n.main-module_mask-exit-active__2qs-r {\n opacity: 0;\n transition: opacity 0.1s;\n}\n";
|
|
4
|
+
var cssClasses = {"dropdown__content":"main-module_dropdown__content__X9kz_","dropdown__header":"main-module_dropdown__header__kvhNn","dropdown__header-title":"main-module_dropdown__header-title__7NXxw","dropdown":"main-module_dropdown__36KKf","dropdown__content_right":"main-module_dropdown__content_right__Rp4hR","dropdown__list":"main-module_dropdown__list__2bd_r","dropdown__list-head":"main-module_dropdown__list-head__2Uyb0","dropdown__list_with-scroll":"main-module_dropdown__list_with-scroll__KP9yO","dropdown__list-item":"main-module_dropdown__list-item__1u185","dropdown__list-item_selected":"main-module_dropdown__list-item_selected__2GYQr","dropdown__list-item_disabled":"main-module_dropdown__list-item_disabled__1Psh7","dropdown__list-item_readonly":"main-module_dropdown__list-item_readonly__3bbj0","dropdown__search":"main-module_dropdown__search__1Moob","dropdown__header-content":"main-module_dropdown__header-content__10Zg9","dropdown__header-icon":"main-module_dropdown__header-icon__30vfb","select":"main-module_select__1ocPo","dropdown-enter":"main-module_dropdown-enter__2RGtd","modal-enter":"main-module_modal-enter__I5ELD","mask-enter":"main-module_mask-enter__32s5F","dropdown-enter-active":"main-module_dropdown-enter-active__ob1fb","modal-enter-active":"main-module_modal-enter-active__3BMYq","mask-enter-active":"main-module_mask-enter-active__1WgVf","dropdown-exit":"main-module_dropdown-exit__3b2wX","modal-exit":"main-module_modal-exit__y2N_F","mask-exit":"main-module_mask-exit__325a4","dropdown-exit-active":"main-module_dropdown-exit-active__22rth","modal-exit-active":"main-module_modal-exit-active__ID7ce","mask-exit-active":"main-module_mask-exit-active__2qs-r"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
7
7
|
export default cssClasses;
|
|
@@ -0,0 +1,127 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
declare const _default: {
|
|
3
|
+
parameters: {
|
|
4
|
+
storySource: {
|
|
5
|
+
source: string;
|
|
6
|
+
locationsMap: {
|
|
7
|
+
"default-dropdown": {
|
|
8
|
+
startLoc: {
|
|
9
|
+
col: number;
|
|
10
|
+
line: number;
|
|
11
|
+
};
|
|
12
|
+
endLoc: {
|
|
13
|
+
col: number;
|
|
14
|
+
line: number;
|
|
15
|
+
};
|
|
16
|
+
startBody: {
|
|
17
|
+
col: number;
|
|
18
|
+
line: number;
|
|
19
|
+
};
|
|
20
|
+
endBody: {
|
|
21
|
+
col: number;
|
|
22
|
+
line: number;
|
|
23
|
+
};
|
|
24
|
+
};
|
|
25
|
+
"dropdown-with-mobile-custom-header-icon": {
|
|
26
|
+
startLoc: {
|
|
27
|
+
col: number;
|
|
28
|
+
line: number;
|
|
29
|
+
};
|
|
30
|
+
endLoc: {
|
|
31
|
+
col: number;
|
|
32
|
+
line: number;
|
|
33
|
+
};
|
|
34
|
+
startBody: {
|
|
35
|
+
col: number;
|
|
36
|
+
line: number;
|
|
37
|
+
};
|
|
38
|
+
endBody: {
|
|
39
|
+
col: number;
|
|
40
|
+
line: number;
|
|
41
|
+
};
|
|
42
|
+
};
|
|
43
|
+
"dropdown-with-mobile-custom-header-text": {
|
|
44
|
+
startLoc: {
|
|
45
|
+
col: number;
|
|
46
|
+
line: number;
|
|
47
|
+
};
|
|
48
|
+
endLoc: {
|
|
49
|
+
col: number;
|
|
50
|
+
line: number;
|
|
51
|
+
};
|
|
52
|
+
startBody: {
|
|
53
|
+
col: number;
|
|
54
|
+
line: number;
|
|
55
|
+
};
|
|
56
|
+
endBody: {
|
|
57
|
+
col: number;
|
|
58
|
+
line: number;
|
|
59
|
+
};
|
|
60
|
+
};
|
|
61
|
+
"dropdown-with-mobile-custom-header-text-and-custom-icon": {
|
|
62
|
+
startLoc: {
|
|
63
|
+
col: number;
|
|
64
|
+
line: number;
|
|
65
|
+
};
|
|
66
|
+
endLoc: {
|
|
67
|
+
col: number;
|
|
68
|
+
line: number;
|
|
69
|
+
};
|
|
70
|
+
startBody: {
|
|
71
|
+
col: number;
|
|
72
|
+
line: number;
|
|
73
|
+
};
|
|
74
|
+
endBody: {
|
|
75
|
+
col: number;
|
|
76
|
+
line: number;
|
|
77
|
+
};
|
|
78
|
+
};
|
|
79
|
+
"dropdown-with-mobile-custom-header-component": {
|
|
80
|
+
startLoc: {
|
|
81
|
+
col: number;
|
|
82
|
+
line: number;
|
|
83
|
+
};
|
|
84
|
+
endLoc: {
|
|
85
|
+
col: number;
|
|
86
|
+
line: number;
|
|
87
|
+
};
|
|
88
|
+
startBody: {
|
|
89
|
+
col: number;
|
|
90
|
+
line: number;
|
|
91
|
+
};
|
|
92
|
+
endBody: {
|
|
93
|
+
col: number;
|
|
94
|
+
line: number;
|
|
95
|
+
};
|
|
96
|
+
};
|
|
97
|
+
"dropdown-on-modal": {
|
|
98
|
+
startLoc: {
|
|
99
|
+
col: number;
|
|
100
|
+
line: number;
|
|
101
|
+
};
|
|
102
|
+
endLoc: {
|
|
103
|
+
col: number;
|
|
104
|
+
line: number;
|
|
105
|
+
};
|
|
106
|
+
startBody: {
|
|
107
|
+
col: number;
|
|
108
|
+
line: number;
|
|
109
|
+
};
|
|
110
|
+
endBody: {
|
|
111
|
+
col: number;
|
|
112
|
+
line: number;
|
|
113
|
+
};
|
|
114
|
+
};
|
|
115
|
+
};
|
|
116
|
+
};
|
|
117
|
+
};
|
|
118
|
+
title: string;
|
|
119
|
+
component: React.FC<import("../../src").IDropdownProps> & import("../../src/components/dropdown/types").IDropdownComposition;
|
|
120
|
+
};
|
|
121
|
+
export default _default;
|
|
122
|
+
export declare const DefaultDropdown: () => JSX.Element;
|
|
123
|
+
export declare const DropdownWithMobileCustomHeaderIcon: () => JSX.Element;
|
|
124
|
+
export declare const DropdownWithMobileCustomHeaderText: () => JSX.Element;
|
|
125
|
+
export declare const DropdownWithMobileCustomHeaderTextAndCustomIcon: () => JSX.Element;
|
|
126
|
+
export declare const DropdownWithMobileCustomHeaderComponent: () => JSX.Element;
|
|
127
|
+
export declare const DropdownOnModal: () => JSX.Element;
|