@veeqo/ui 14.9.0 → 14.9.1
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/dist/components/AnimatedDropdown/AnimatedDropdown.cjs +22 -5
- package/dist/components/AnimatedDropdown/AnimatedDropdown.cjs.map +1 -1
- package/dist/components/AnimatedDropdown/AnimatedDropdown.js +22 -5
- package/dist/components/AnimatedDropdown/AnimatedDropdown.js.map +1 -1
- package/dist/components/AnimatedDropdown/AnimatedDropdown.module.scss.cjs +9 -0
- package/dist/components/AnimatedDropdown/AnimatedDropdown.module.scss.cjs.map +1 -0
- package/dist/components/AnimatedDropdown/AnimatedDropdown.module.scss.js +7 -0
- package/dist/components/AnimatedDropdown/AnimatedDropdown.module.scss.js.map +1 -0
- package/dist/components/AnimatedDropdown/components/BasicDropdown.cjs +5 -3
- package/dist/components/AnimatedDropdown/components/BasicDropdown.cjs.map +1 -1
- package/dist/components/AnimatedDropdown/components/BasicDropdown.js +5 -3
- package/dist/components/AnimatedDropdown/components/BasicDropdown.js.map +1 -1
- package/dist/components/AnimatedDropdown/components/BasicDropdown.module.scss.cjs +9 -0
- package/dist/components/AnimatedDropdown/components/BasicDropdown.module.scss.cjs.map +1 -0
- package/dist/components/AnimatedDropdown/components/BasicDropdown.module.scss.js +7 -0
- package/dist/components/AnimatedDropdown/components/BasicDropdown.module.scss.js.map +1 -0
- package/dist/components/DataGrid/components/Body/BodyCell/BodyCell.cjs +0 -1
- package/dist/components/DataGrid/components/Body/BodyCell/BodyCell.cjs.map +1 -1
- package/dist/components/DataGrid/components/Body/BodyCell/BodyCell.js +0 -1
- package/dist/components/DataGrid/components/Body/BodyCell/BodyCell.js.map +1 -1
- package/dist/components/DataGrid/components/Body/LoadingBody/LoadingBodyCell.cjs +0 -1
- package/dist/components/DataGrid/components/Body/LoadingBody/LoadingBodyCell.cjs.map +1 -1
- package/dist/components/DataGrid/components/Body/LoadingBody/LoadingBodyCell.js +0 -1
- package/dist/components/DataGrid/components/Body/LoadingBody/LoadingBodyCell.js.map +1 -1
- package/dist/components/DataGrid/components/GridContainer/GridContainer.cjs +0 -1
- package/dist/components/DataGrid/components/GridContainer/GridContainer.cjs.map +1 -1
- package/dist/components/DataGrid/components/GridContainer/GridContainer.js +0 -1
- package/dist/components/DataGrid/components/GridContainer/GridContainer.js.map +1 -1
- package/dist/components/DataGrid/components/Header/HeaderCell/HeaderCell.cjs +0 -1
- package/dist/components/DataGrid/components/Header/HeaderCell/HeaderCell.cjs.map +1 -1
- package/dist/components/DataGrid/components/Header/HeaderCell/HeaderCell.js +0 -1
- package/dist/components/DataGrid/components/Header/HeaderCell/HeaderCell.js.map +1 -1
- package/dist/components/Dropdown/Dropdown.module.scss.cjs +9 -0
- package/dist/components/Dropdown/Dropdown.module.scss.cjs.map +1 -0
- package/dist/components/Dropdown/Dropdown.module.scss.js +7 -0
- package/dist/components/Dropdown/Dropdown.module.scss.js.map +1 -0
- package/dist/components/Dropdown/DropdownPopover.cjs +4 -2
- package/dist/components/Dropdown/DropdownPopover.cjs.map +1 -1
- package/dist/components/Dropdown/DropdownPopover.js +5 -3
- package/dist/components/Dropdown/DropdownPopover.js.map +1 -1
- package/dist/components/FilterTag/styled.cjs +2 -1
- package/dist/components/FilterTag/styled.cjs.map +1 -1
- package/dist/components/FilterTag/styled.js +2 -1
- package/dist/components/FilterTag/styled.js.map +1 -1
- package/dist/components/Image/Image.cjs +15 -5
- package/dist/components/Image/Image.cjs.map +1 -1
- package/dist/components/Image/Image.js +15 -5
- package/dist/components/Image/Image.js.map +1 -1
- package/dist/components/Image/Image.module.scss.cjs +9 -0
- package/dist/components/Image/Image.module.scss.cjs.map +1 -0
- package/dist/components/Image/Image.module.scss.js +7 -0
- package/dist/components/Image/Image.module.scss.js.map +1 -0
- package/dist/components/Modal/Modal.cjs +28 -3
- package/dist/components/Modal/Modal.cjs.map +1 -1
- package/dist/components/Modal/Modal.js +28 -3
- package/dist/components/Modal/Modal.js.map +1 -1
- package/dist/components/Modal/Modal.module.scss.cjs +9 -0
- package/dist/components/Modal/Modal.module.scss.cjs.map +1 -0
- package/dist/components/Modal/Modal.module.scss.js +7 -0
- package/dist/components/Modal/Modal.module.scss.js.map +1 -0
- package/dist/components/Modal/components/Dialog/Dialog.cjs +35 -2
- package/dist/components/Modal/components/Dialog/Dialog.cjs.map +1 -1
- package/dist/components/Modal/components/Dialog/Dialog.d.ts +13 -5
- package/dist/components/Modal/components/Dialog/Dialog.js +35 -2
- package/dist/components/Modal/components/Dialog/Dialog.js.map +1 -1
- package/dist/components/Popover/Popover.cjs +7 -4
- package/dist/components/Popover/Popover.cjs.map +1 -1
- package/dist/components/Popover/Popover.d.ts +1 -1
- package/dist/components/Popover/Popover.js +7 -4
- package/dist/components/Popover/Popover.js.map +1 -1
- package/dist/components/Popover/Popover.module.scss.cjs +9 -0
- package/dist/components/Popover/Popover.module.scss.cjs.map +1 -0
- package/dist/components/Popover/Popover.module.scss.js +7 -0
- package/dist/components/Popover/Popover.module.scss.js.map +1 -0
- package/dist/components/Tooltip/Tooltip.cjs +16 -12
- package/dist/components/Tooltip/Tooltip.cjs.map +1 -1
- package/dist/components/Tooltip/Tooltip.d.ts +1 -1
- package/dist/components/Tooltip/Tooltip.js +16 -12
- package/dist/components/Tooltip/Tooltip.js.map +1 -1
- package/dist/components/Tooltip/Tooltip.module.scss.cjs +9 -0
- package/dist/components/Tooltip/Tooltip.module.scss.cjs.map +1 -0
- package/dist/components/Tooltip/Tooltip.module.scss.js +7 -0
- package/dist/components/Tooltip/Tooltip.module.scss.js.map +1 -0
- package/dist/components/Tooltip/components/TooltipPopover.cjs +13 -10
- package/dist/components/Tooltip/components/TooltipPopover.cjs.map +1 -1
- package/dist/components/Tooltip/components/TooltipPopover.d.ts +1 -1
- package/dist/components/Tooltip/components/TooltipPopover.js +13 -10
- package/dist/components/Tooltip/components/TooltipPopover.js.map +1 -1
- package/dist/components/Tooltip/components/types.d.ts +7 -12
- package/dist/components/Tooltip/types.cjs.map +1 -1
- package/dist/components/Tooltip/types.d.ts +3 -1
- package/dist/components/Tooltip/types.js.map +1 -1
- package/dist/hoc/withLabels/BlockTooltip.cjs +16 -0
- package/dist/hoc/withLabels/BlockTooltip.cjs.map +1 -0
- package/dist/hoc/withLabels/BlockTooltip.d.ts +3 -0
- package/dist/hoc/withLabels/BlockTooltip.js +10 -0
- package/dist/hoc/withLabels/BlockTooltip.js.map +1 -0
- package/dist/hoc/withLabels/BlockTooltip.module.scss.cjs +9 -0
- package/dist/hoc/withLabels/BlockTooltip.module.scss.cjs.map +1 -0
- package/dist/hoc/withLabels/BlockTooltip.module.scss.js +7 -0
- package/dist/hoc/withLabels/BlockTooltip.module.scss.js.map +1 -0
- package/dist/hoc/withLabels/withLabels.cjs +2 -2
- package/dist/hoc/withLabels/withLabels.cjs.map +1 -1
- package/dist/hoc/withLabels/withLabels.js +1 -1
- package/dist/hoc/withLabels/withLabels.js.map +1 -1
- package/package.json +1 -1
- package/dist/components/AnimatedDropdown/components/styled.cjs +0 -13
- package/dist/components/AnimatedDropdown/components/styled.cjs.map +0 -1
- package/dist/components/AnimatedDropdown/components/styled.d.ts +0 -2
- package/dist/components/AnimatedDropdown/components/styled.js +0 -7
- package/dist/components/AnimatedDropdown/components/styled.js.map +0 -1
- package/dist/components/AnimatedDropdown/styled.cjs +0 -19
- package/dist/components/AnimatedDropdown/styled.cjs.map +0 -1
- package/dist/components/AnimatedDropdown/styled.d.ts +0 -11
- package/dist/components/AnimatedDropdown/styled.js +0 -11
- package/dist/components/AnimatedDropdown/styled.js.map +0 -1
- package/dist/components/Dropdown/styled.cjs +0 -15
- package/dist/components/Dropdown/styled.cjs.map +0 -1
- package/dist/components/Dropdown/styled.d.ts +0 -11
- package/dist/components/Dropdown/styled.js +0 -9
- package/dist/components/Dropdown/styled.js.map +0 -1
- package/dist/components/Image/components/styled.cjs +0 -18
- package/dist/components/Image/components/styled.cjs.map +0 -1
- package/dist/components/Image/components/styled.d.ts +0 -6
- package/dist/components/Image/components/styled.js +0 -9
- package/dist/components/Image/components/styled.js.map +0 -1
- package/dist/components/Modal/components/Dialog/constants.cjs +0 -53
- package/dist/components/Modal/components/Dialog/constants.cjs.map +0 -1
- package/dist/components/Modal/components/Dialog/constants.d.ts +0 -44
- package/dist/components/Modal/components/Dialog/constants.js +0 -49
- package/dist/components/Modal/components/Dialog/constants.js.map +0 -1
- package/dist/components/Modal/components/Dialog/styled.cjs +0 -47
- package/dist/components/Modal/components/Dialog/styled.cjs.map +0 -1
- package/dist/components/Modal/components/Dialog/styled.d.ts +0 -6
- package/dist/components/Modal/components/Dialog/styled.js +0 -41
- package/dist/components/Modal/components/Dialog/styled.js.map +0 -1
- package/dist/components/Modal/components/Dialog/styles/baseStyles.cjs +0 -13
- package/dist/components/Modal/components/Dialog/styles/baseStyles.cjs.map +0 -1
- package/dist/components/Modal/components/Dialog/styles/baseStyles.d.ts +0 -4
- package/dist/components/Modal/components/Dialog/styles/baseStyles.js +0 -11
- package/dist/components/Modal/components/Dialog/styles/baseStyles.js.map +0 -1
- package/dist/components/Modal/components/Dialog/styles/modalTypeStyles.cjs +0 -17
- package/dist/components/Modal/components/Dialog/styles/modalTypeStyles.cjs.map +0 -1
- package/dist/components/Modal/components/Dialog/styles/modalTypeStyles.d.ts +0 -6
- package/dist/components/Modal/components/Dialog/styles/modalTypeStyles.js +0 -13
- package/dist/components/Modal/components/Dialog/styles/modalTypeStyles.js.map +0 -1
- package/dist/components/Modal/components/styled.cjs +0 -21
- package/dist/components/Modal/components/styled.cjs.map +0 -1
- package/dist/components/Modal/components/styled.d.ts +0 -5
- package/dist/components/Modal/components/styled.js +0 -14
- package/dist/components/Modal/components/styled.js.map +0 -1
- package/dist/components/Popover/styled.cjs +0 -14
- package/dist/components/Popover/styled.cjs.map +0 -1
- package/dist/components/Popover/styled.d.ts +0 -5
- package/dist/components/Popover/styled.js +0 -7
- package/dist/components/Popover/styled.js.map +0 -1
- package/dist/components/Tooltip/components/styled.cjs +0 -25
- package/dist/components/Tooltip/components/styled.cjs.map +0 -1
- package/dist/components/Tooltip/components/styled.d.ts +0 -19
- package/dist/components/Tooltip/components/styled.js +0 -16
- package/dist/components/Tooltip/components/styled.js.map +0 -1
- package/dist/hoc/withLabels/styled.cjs +0 -17
- package/dist/hoc/withLabels/styled.cjs.map +0 -1
- package/dist/hoc/withLabels/styled.d.ts +0 -1
- package/dist/hoc/withLabels/styled.js +0 -11
- package/dist/hoc/withLabels/styled.js.map +0 -1
|
@@ -2,8 +2,11 @@
|
|
|
2
2
|
|
|
3
3
|
var React = require('react');
|
|
4
4
|
var reactTransitionGroup = require('react-transition-group');
|
|
5
|
-
var
|
|
5
|
+
var buildClassnames = require('../../utils/buildClassnames.cjs');
|
|
6
|
+
require('uid/secure');
|
|
7
|
+
var BasicDropdown = require('./components/BasicDropdown.cjs');
|
|
6
8
|
var useClickAway = require('./hooks/useClickAway.cjs');
|
|
9
|
+
var AnimatedDropdown_module = require('./AnimatedDropdown.module.scss.cjs');
|
|
7
10
|
|
|
8
11
|
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
9
12
|
|
|
@@ -15,16 +18,30 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
|
15
18
|
*/
|
|
16
19
|
const AnimatedDropdown = ({ cta, shouldShowDropdown, children, className = 'animated-dropdown', reversed = false, onClickAway = () => { }, timeout = 350, transitionClassnames = 'dropdown', onClick, onMouseEnter, onMouseLeave, }) => {
|
|
17
20
|
const dropdownRef = React.useRef(null);
|
|
21
|
+
const dropdownContentRef = React.useRef(null);
|
|
18
22
|
useClickAway.useClickAway(dropdownRef, (event) => {
|
|
19
23
|
if (shouldShowDropdown) {
|
|
20
24
|
onClickAway(event);
|
|
21
25
|
}
|
|
22
26
|
});
|
|
23
|
-
return (React__default.default.createElement(
|
|
27
|
+
return (React__default.default.createElement("div", { className: buildClassnames.buildClassnames([
|
|
28
|
+
AnimatedDropdown_module.container,
|
|
29
|
+
`${className}-container`,
|
|
30
|
+
className,
|
|
31
|
+
]), onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, ref: dropdownRef },
|
|
24
32
|
!reversed && cta,
|
|
25
|
-
React__default.default.createElement(
|
|
26
|
-
|
|
27
|
-
|
|
33
|
+
React__default.default.createElement("div", { className: buildClassnames.buildClassnames([
|
|
34
|
+
AnimatedDropdown_module.wrap,
|
|
35
|
+
`${className}-wrap`,
|
|
36
|
+
className,
|
|
37
|
+
]) },
|
|
38
|
+
React__default.default.createElement(reactTransitionGroup.CSSTransition, { in: shouldShowDropdown, timeout: timeout, classNames: transitionClassnames, unmountOnExit: true, nodeRef: dropdownContentRef },
|
|
39
|
+
React__default.default.createElement(BasicDropdown.BasicDropdown, { role: "dialog", ref: dropdownContentRef, className: buildClassnames.buildClassnames([
|
|
40
|
+
AnimatedDropdown_module.dropdown,
|
|
41
|
+
reversed && AnimatedDropdown_module.reversed,
|
|
42
|
+
`${className}-basic-dropdown`,
|
|
43
|
+
className,
|
|
44
|
+
]) }, children))),
|
|
28
45
|
reversed && cta));
|
|
29
46
|
};
|
|
30
47
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AnimatedDropdown.cjs","sources":["../../../src/components/AnimatedDropdown/AnimatedDropdown.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport { CSSTransition } from 'react-transition-group';\n\nimport {
|
|
1
|
+
{"version":3,"file":"AnimatedDropdown.cjs","sources":["../../../src/components/AnimatedDropdown/AnimatedDropdown.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport { CSSTransition } from 'react-transition-group';\n\nimport { buildClassnames } from '../../utils';\nimport { BasicDropdown } from './components/BasicDropdown';\nimport { AnimatedDropdownProps } from './types';\nimport { useClickAway } from './hooks/useClickAway';\nimport animatedDropdownStyles from './AnimatedDropdown.module.scss';\n\n/**\n * @deprecated - Use `Dropdown` component instead.\n * This component is deprecated and will be removed in future versions.\n */\nexport const AnimatedDropdown = ({\n cta,\n shouldShowDropdown,\n children,\n className = 'animated-dropdown',\n reversed = false,\n onClickAway = () => {},\n timeout = 350,\n transitionClassnames = 'dropdown',\n onClick,\n onMouseEnter,\n onMouseLeave,\n}: AnimatedDropdownProps) => {\n const dropdownRef = useRef<HTMLDivElement>(null);\n const dropdownContentRef = useRef<HTMLDivElement>(null);\n\n useClickAway(dropdownRef, (event: Event) => {\n if (shouldShowDropdown) {\n onClickAway(event);\n }\n });\n\n return (\n <div\n className={buildClassnames([\n animatedDropdownStyles.container,\n `${className}-container`,\n className,\n ])}\n onClick={onClick}\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n ref={dropdownRef}\n >\n {!reversed && cta}\n <div\n className={buildClassnames([\n animatedDropdownStyles.wrap,\n `${className}-wrap`,\n className,\n ])}\n >\n <CSSTransition\n in={shouldShowDropdown}\n timeout={timeout}\n classNames={transitionClassnames}\n unmountOnExit\n nodeRef={dropdownContentRef}\n >\n <BasicDropdown\n role=\"dialog\"\n ref={dropdownContentRef}\n className={buildClassnames([\n animatedDropdownStyles.dropdown,\n reversed && animatedDropdownStyles.reversed,\n `${className}-basic-dropdown`,\n className,\n ])}\n >\n {children}\n </BasicDropdown>\n </CSSTransition>\n </div>\n {reversed && cta}\n </div>\n );\n};\n"],"names":["useRef","useClickAway","React","buildClassnames","animatedDropdownStyles","CSSTransition","BasicDropdown"],"mappings":";;;;;;;;;;;;;;AASA;;;AAGG;AACI,MAAM,gBAAgB,GAAG,CAAC,EAC/B,GAAG,EACH,kBAAkB,EAClB,QAAQ,EACR,SAAS,GAAG,mBAAmB,EAC/B,QAAQ,GAAG,KAAK,EAChB,WAAW,GAAG,MAAK,EAAE,CAAC,EACtB,OAAO,GAAG,GAAG,EACb,oBAAoB,GAAG,UAAU,EACjC,OAAO,EACP,YAAY,EACZ,YAAY,GACU,KAAI;AAC1B,IAAA,MAAM,WAAW,GAAGA,YAAM,CAAiB,IAAI,CAAC;AAChD,IAAA,MAAM,kBAAkB,GAAGA,YAAM,CAAiB,IAAI,CAAC;AAEvD,IAAAC,yBAAY,CAAC,WAAW,EAAE,CAAC,KAAY,KAAI;AACzC,QAAA,IAAI,kBAAkB,EAAE;YACtB,WAAW,CAAC,KAAK,CAAC;AACnB,QAAA;AACH,IAAA,CAAC,CAAC;AAEF,IAAA,QACEC,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAEC,+BAAe,CAAC;AACzB,YAAAC,uBAAsB,CAAC,SAAS;AAChC,YAAA,CAAA,EAAG,SAAS,CAAA,UAAA,CAAY;YACxB,SAAS;AACV,SAAA,CAAC,EACF,OAAO,EAAE,OAAO,EAChB,YAAY,EAAE,YAAY,EAC1B,YAAY,EAAE,YAAY,EAC1B,GAAG,EAAE,WAAW,EAAA;QAEf,CAAC,QAAQ,IAAI,GAAG;QACjBF,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAEC,+BAAe,CAAC;AACzB,gBAAAC,uBAAsB,CAAC,IAAI;AAC3B,gBAAA,CAAA,EAAG,SAAS,CAAA,KAAA,CAAO;gBACnB,SAAS;aACV,CAAC,EAAA;AAEF,YAAAF,sBAAA,CAAA,aAAA,CAACG,kCAAa,EAAA,EACZ,EAAE,EAAE,kBAAkB,EACtB,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,oBAAoB,EAChC,aAAa,EAAA,IAAA,EACb,OAAO,EAAE,kBAAkB,EAAA;AAE3B,gBAAAH,sBAAA,CAAA,aAAA,CAACI,2BAAa,EAAA,EACZ,IAAI,EAAC,QAAQ,EACb,GAAG,EAAE,kBAAkB,EACvB,SAAS,EAAEH,+BAAe,CAAC;AACzB,wBAAAC,uBAAsB,CAAC,QAAQ;wBAC/B,QAAQ,IAAIA,uBAAsB,CAAC,QAAQ;AAC3C,wBAAA,CAAA,EAAG,SAAS,CAAA,eAAA,CAAiB;wBAC7B,SAAS;AACV,qBAAA,CAAC,EAAA,EAED,QAAQ,CACK,CACF,CACZ;AACL,QAAA,QAAQ,IAAI,GAAG,CACZ;AAEV;;;;"}
|
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
import React__default, { useRef } from 'react';
|
|
2
2
|
import { CSSTransition } from 'react-transition-group';
|
|
3
|
-
import {
|
|
3
|
+
import { buildClassnames } from '../../utils/buildClassnames.js';
|
|
4
|
+
import 'uid/secure';
|
|
5
|
+
import { BasicDropdown } from './components/BasicDropdown.js';
|
|
4
6
|
import { useClickAway } from './hooks/useClickAway.js';
|
|
7
|
+
import animatedDropdownStyles from './AnimatedDropdown.module.scss.js';
|
|
5
8
|
|
|
6
9
|
/**
|
|
7
10
|
* @deprecated - Use `Dropdown` component instead.
|
|
@@ -9,16 +12,30 @@ import { useClickAway } from './hooks/useClickAway.js';
|
|
|
9
12
|
*/
|
|
10
13
|
const AnimatedDropdown = ({ cta, shouldShowDropdown, children, className = 'animated-dropdown', reversed = false, onClickAway = () => { }, timeout = 350, transitionClassnames = 'dropdown', onClick, onMouseEnter, onMouseLeave, }) => {
|
|
11
14
|
const dropdownRef = useRef(null);
|
|
15
|
+
const dropdownContentRef = useRef(null);
|
|
12
16
|
useClickAway(dropdownRef, (event) => {
|
|
13
17
|
if (shouldShowDropdown) {
|
|
14
18
|
onClickAway(event);
|
|
15
19
|
}
|
|
16
20
|
});
|
|
17
|
-
return (React__default.createElement(
|
|
21
|
+
return (React__default.createElement("div", { className: buildClassnames([
|
|
22
|
+
animatedDropdownStyles.container,
|
|
23
|
+
`${className}-container`,
|
|
24
|
+
className,
|
|
25
|
+
]), onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, ref: dropdownRef },
|
|
18
26
|
!reversed && cta,
|
|
19
|
-
React__default.createElement(
|
|
20
|
-
|
|
21
|
-
|
|
27
|
+
React__default.createElement("div", { className: buildClassnames([
|
|
28
|
+
animatedDropdownStyles.wrap,
|
|
29
|
+
`${className}-wrap`,
|
|
30
|
+
className,
|
|
31
|
+
]) },
|
|
32
|
+
React__default.createElement(CSSTransition, { in: shouldShowDropdown, timeout: timeout, classNames: transitionClassnames, unmountOnExit: true, nodeRef: dropdownContentRef },
|
|
33
|
+
React__default.createElement(BasicDropdown, { role: "dialog", ref: dropdownContentRef, className: buildClassnames([
|
|
34
|
+
animatedDropdownStyles.dropdown,
|
|
35
|
+
reversed && animatedDropdownStyles.reversed,
|
|
36
|
+
`${className}-basic-dropdown`,
|
|
37
|
+
className,
|
|
38
|
+
]) }, children))),
|
|
22
39
|
reversed && cta));
|
|
23
40
|
};
|
|
24
41
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AnimatedDropdown.js","sources":["../../../src/components/AnimatedDropdown/AnimatedDropdown.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport { CSSTransition } from 'react-transition-group';\n\nimport {
|
|
1
|
+
{"version":3,"file":"AnimatedDropdown.js","sources":["../../../src/components/AnimatedDropdown/AnimatedDropdown.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport { CSSTransition } from 'react-transition-group';\n\nimport { buildClassnames } from '../../utils';\nimport { BasicDropdown } from './components/BasicDropdown';\nimport { AnimatedDropdownProps } from './types';\nimport { useClickAway } from './hooks/useClickAway';\nimport animatedDropdownStyles from './AnimatedDropdown.module.scss';\n\n/**\n * @deprecated - Use `Dropdown` component instead.\n * This component is deprecated and will be removed in future versions.\n */\nexport const AnimatedDropdown = ({\n cta,\n shouldShowDropdown,\n children,\n className = 'animated-dropdown',\n reversed = false,\n onClickAway = () => {},\n timeout = 350,\n transitionClassnames = 'dropdown',\n onClick,\n onMouseEnter,\n onMouseLeave,\n}: AnimatedDropdownProps) => {\n const dropdownRef = useRef<HTMLDivElement>(null);\n const dropdownContentRef = useRef<HTMLDivElement>(null);\n\n useClickAway(dropdownRef, (event: Event) => {\n if (shouldShowDropdown) {\n onClickAway(event);\n }\n });\n\n return (\n <div\n className={buildClassnames([\n animatedDropdownStyles.container,\n `${className}-container`,\n className,\n ])}\n onClick={onClick}\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n ref={dropdownRef}\n >\n {!reversed && cta}\n <div\n className={buildClassnames([\n animatedDropdownStyles.wrap,\n `${className}-wrap`,\n className,\n ])}\n >\n <CSSTransition\n in={shouldShowDropdown}\n timeout={timeout}\n classNames={transitionClassnames}\n unmountOnExit\n nodeRef={dropdownContentRef}\n >\n <BasicDropdown\n role=\"dialog\"\n ref={dropdownContentRef}\n className={buildClassnames([\n animatedDropdownStyles.dropdown,\n reversed && animatedDropdownStyles.reversed,\n `${className}-basic-dropdown`,\n className,\n ])}\n >\n {children}\n </BasicDropdown>\n </CSSTransition>\n </div>\n {reversed && cta}\n </div>\n );\n};\n"],"names":["React"],"mappings":";;;;;;;;AASA;;;AAGG;AACI,MAAM,gBAAgB,GAAG,CAAC,EAC/B,GAAG,EACH,kBAAkB,EAClB,QAAQ,EACR,SAAS,GAAG,mBAAmB,EAC/B,QAAQ,GAAG,KAAK,EAChB,WAAW,GAAG,MAAK,EAAE,CAAC,EACtB,OAAO,GAAG,GAAG,EACb,oBAAoB,GAAG,UAAU,EACjC,OAAO,EACP,YAAY,EACZ,YAAY,GACU,KAAI;AAC1B,IAAA,MAAM,WAAW,GAAG,MAAM,CAAiB,IAAI,CAAC;AAChD,IAAA,MAAM,kBAAkB,GAAG,MAAM,CAAiB,IAAI,CAAC;AAEvD,IAAA,YAAY,CAAC,WAAW,EAAE,CAAC,KAAY,KAAI;AACzC,QAAA,IAAI,kBAAkB,EAAE;YACtB,WAAW,CAAC,KAAK,CAAC;AACnB,QAAA;AACH,IAAA,CAAC,CAAC;AAEF,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,eAAe,CAAC;AACzB,YAAA,sBAAsB,CAAC,SAAS;AAChC,YAAA,CAAA,EAAG,SAAS,CAAA,UAAA,CAAY;YACxB,SAAS;AACV,SAAA,CAAC,EACF,OAAO,EAAE,OAAO,EAChB,YAAY,EAAE,YAAY,EAC1B,YAAY,EAAE,YAAY,EAC1B,GAAG,EAAE,WAAW,EAAA;QAEf,CAAC,QAAQ,IAAI,GAAG;QACjBA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,eAAe,CAAC;AACzB,gBAAA,sBAAsB,CAAC,IAAI;AAC3B,gBAAA,CAAA,EAAG,SAAS,CAAA,KAAA,CAAO;gBACnB,SAAS;aACV,CAAC,EAAA;AAEF,YAAAA,cAAA,CAAA,aAAA,CAAC,aAAa,EAAA,EACZ,EAAE,EAAE,kBAAkB,EACtB,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,oBAAoB,EAChC,aAAa,EAAA,IAAA,EACb,OAAO,EAAE,kBAAkB,EAAA;AAE3B,gBAAAA,cAAA,CAAA,aAAA,CAAC,aAAa,EAAA,EACZ,IAAI,EAAC,QAAQ,EACb,GAAG,EAAE,kBAAkB,EACvB,SAAS,EAAE,eAAe,CAAC;AACzB,wBAAA,sBAAsB,CAAC,QAAQ;wBAC/B,QAAQ,IAAI,sBAAsB,CAAC,QAAQ;AAC3C,wBAAA,CAAA,EAAG,SAAS,CAAA,eAAA,CAAiB;wBAC7B,SAAS;AACV,qBAAA,CAAC,EAAA,EAED,QAAQ,CACK,CACF,CACZ;AACL,QAAA,QAAQ,IAAI,GAAG,CACZ;AAEV;;;;"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
|
|
4
|
+
|
|
5
|
+
___$insertStyle("._container_9gxyg_1 {\n box-sizing: border-box;\n position: relative;\n margin: 0;\n padding: 0;\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: flex-start;\n}\n\n._wrap_9gxyg_12 {\n box-sizing: border-box;\n position: relative;\n margin: 0;\n padding: 0;\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: flex-start;\n min-width: 100%;\n}\n\n._dropdown_9gxyg_24 {\n flex-direction: column;\n position: absolute;\n z-index: var(--layers-popup);\n top: 6px;\n /* CSSTransition applies global class names that cannot be scoped by CSS Modules.\n The compound selector (.localClass:global(.globalClass)) keeps the transition\n styles properly scoped while targeting the global classes added by\n react-transition-group. */\n}\n._dropdown_9gxyg_24.dropdown-enter {\n opacity: 0;\n transform: translateY(-6px);\n}\n._dropdown_9gxyg_24.dropdown-enter-active {\n opacity: 1;\n transform: translateY(0);\n transition: all 200ms;\n}\n._dropdown_9gxyg_24.dropdown-exit {\n opacity: 1;\n transform: translateY(0);\n}\n._dropdown_9gxyg_24.dropdown-exit-active {\n opacity: 0;\n transform: translateY(-6px);\n transition: all 200ms;\n}\n\n._reversed_9gxyg_53 {\n top: auto;\n bottom: 8px;\n}");
|
|
6
|
+
var animatedDropdownStyles = {"container":"_container_9gxyg_1","wrap":"_wrap_9gxyg_12","dropdown":"_dropdown_9gxyg_24","reversed":"_reversed_9gxyg_53"};
|
|
7
|
+
|
|
8
|
+
module.exports = animatedDropdownStyles;
|
|
9
|
+
//# sourceMappingURL=AnimatedDropdown.module.scss.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AnimatedDropdown.module.scss.cjs","sources":["../../../src/components/AnimatedDropdown/AnimatedDropdown.module.scss"],"sourcesContent":[".container {\n box-sizing: border-box;\n position: relative;\n margin: 0;\n padding: 0;\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: flex-start;\n}\n\n.wrap {\n box-sizing: border-box;\n position: relative;\n margin: 0;\n padding: 0;\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: flex-start;\n min-width: 100%;\n}\n\n.dropdown {\n flex-direction: column;\n position: absolute;\n z-index: var(--layers-popup);\n top: 6px;\n\n /* CSSTransition applies global class names that cannot be scoped by CSS Modules.\n The compound selector (.localClass:global(.globalClass)) keeps the transition\n styles properly scoped while targeting the global classes added by\n react-transition-group. */\n &:global(.dropdown-enter) {\n opacity: 0;\n transform: translateY(-6px);\n }\n\n &:global(.dropdown-enter-active) {\n opacity: 1;\n transform: translateY(0);\n transition: all 200ms;\n }\n\n &:global(.dropdown-exit) {\n opacity: 1;\n transform: translateY(0);\n }\n\n &:global(.dropdown-exit-active) {\n opacity: 0;\n transform: translateY(-6px);\n transition: all 200ms;\n }\n}\n\n.reversed {\n top: auto;\n bottom: 8px;\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,yxCAAA;AACA,6BAAA,CAAA,WAAA,CAAA,oBAAA,CAAA,MAAA,CAAA,gBAAA,CAAA,UAAA,CAAA,oBAAA,CAAA,UAAA,CAAA,oBAAA;;;;"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import insertStyle from '../../_virtual/____insertStyle.js';
|
|
2
|
+
|
|
3
|
+
insertStyle("._container_9gxyg_1 {\n box-sizing: border-box;\n position: relative;\n margin: 0;\n padding: 0;\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: flex-start;\n}\n\n._wrap_9gxyg_12 {\n box-sizing: border-box;\n position: relative;\n margin: 0;\n padding: 0;\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: flex-start;\n min-width: 100%;\n}\n\n._dropdown_9gxyg_24 {\n flex-direction: column;\n position: absolute;\n z-index: var(--layers-popup);\n top: 6px;\n /* CSSTransition applies global class names that cannot be scoped by CSS Modules.\n The compound selector (.localClass:global(.globalClass)) keeps the transition\n styles properly scoped while targeting the global classes added by\n react-transition-group. */\n}\n._dropdown_9gxyg_24.dropdown-enter {\n opacity: 0;\n transform: translateY(-6px);\n}\n._dropdown_9gxyg_24.dropdown-enter-active {\n opacity: 1;\n transform: translateY(0);\n transition: all 200ms;\n}\n._dropdown_9gxyg_24.dropdown-exit {\n opacity: 1;\n transform: translateY(0);\n}\n._dropdown_9gxyg_24.dropdown-exit-active {\n opacity: 0;\n transform: translateY(-6px);\n transition: all 200ms;\n}\n\n._reversed_9gxyg_53 {\n top: auto;\n bottom: 8px;\n}");
|
|
4
|
+
var animatedDropdownStyles = {"container":"_container_9gxyg_1","wrap":"_wrap_9gxyg_12","dropdown":"_dropdown_9gxyg_24","reversed":"_reversed_9gxyg_53"};
|
|
5
|
+
|
|
6
|
+
export { animatedDropdownStyles as default };
|
|
7
|
+
//# sourceMappingURL=AnimatedDropdown.module.scss.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AnimatedDropdown.module.scss.js","sources":["../../../src/components/AnimatedDropdown/AnimatedDropdown.module.scss"],"sourcesContent":[".container {\n box-sizing: border-box;\n position: relative;\n margin: 0;\n padding: 0;\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: flex-start;\n}\n\n.wrap {\n box-sizing: border-box;\n position: relative;\n margin: 0;\n padding: 0;\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: flex-start;\n min-width: 100%;\n}\n\n.dropdown {\n flex-direction: column;\n position: absolute;\n z-index: var(--layers-popup);\n top: 6px;\n\n /* CSSTransition applies global class names that cannot be scoped by CSS Modules.\n The compound selector (.localClass:global(.globalClass)) keeps the transition\n styles properly scoped while targeting the global classes added by\n react-transition-group. */\n &:global(.dropdown-enter) {\n opacity: 0;\n transform: translateY(-6px);\n }\n\n &:global(.dropdown-enter-active) {\n opacity: 1;\n transform: translateY(0);\n transition: all 200ms;\n }\n\n &:global(.dropdown-exit) {\n opacity: 1;\n transform: translateY(0);\n }\n\n &:global(.dropdown-exit-active) {\n opacity: 0;\n transform: translateY(-6px);\n transition: all 200ms;\n }\n}\n\n.reversed {\n top: auto;\n bottom: 8px;\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,yxCAAA;AACA,6BAAA,CAAA,WAAA,CAAA,oBAAA,CAAA,MAAA,CAAA,gBAAA,CAAA,UAAA,CAAA,oBAAA,CAAA,UAAA,CAAA,oBAAA;;;;"}
|
|
@@ -1,15 +1,17 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var React = require('react');
|
|
4
|
-
var
|
|
4
|
+
var buildClassnames = require('../../../utils/buildClassnames.cjs');
|
|
5
|
+
require('uid/secure');
|
|
6
|
+
var BasicDropdown_module = require('./BasicDropdown.module.scss.cjs');
|
|
5
7
|
|
|
6
8
|
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
7
9
|
|
|
8
10
|
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
9
11
|
|
|
10
12
|
const BasicDropdown = React.forwardRef((props, ref) => {
|
|
11
|
-
const { children, className, role } = props;
|
|
12
|
-
return (React__default.default.createElement(
|
|
13
|
+
const { children, className, role, ...rest } = props;
|
|
14
|
+
return (React__default.default.createElement("div", { className: buildClassnames.buildClassnames([BasicDropdown_module.basicDropdown, className]), ref: ref, role: role, ...rest }, children));
|
|
13
15
|
});
|
|
14
16
|
|
|
15
17
|
exports.BasicDropdown = BasicDropdown;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BasicDropdown.cjs","sources":["../../../../src/components/AnimatedDropdown/components/BasicDropdown.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\n\nimport {
|
|
1
|
+
{"version":3,"file":"BasicDropdown.cjs","sources":["../../../../src/components/AnimatedDropdown/components/BasicDropdown.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { buildClassnames } from '../../../utils';\nimport { BasicDropdownProps } from '../types';\nimport basicDropdownStyles from './BasicDropdown.module.scss';\n\nexport const BasicDropdown = forwardRef<HTMLDivElement, BasicDropdownProps>(\n (props: BasicDropdownProps, ref) => {\n const { children, className, role, ...rest } = props;\n\n return (\n <div className={buildClassnames([basicDropdownStyles.basicDropdown, className])} ref={ref} role={role} {...rest}>\n {children}\n </div>\n );\n },\n);\n"],"names":["forwardRef","React","buildClassnames","basicDropdownStyles"],"mappings":";;;;;;;;;;;AAMO,MAAM,aAAa,GAAGA,gBAAU,CACrC,CAAC,KAAyB,EAAE,GAAG,KAAI;AACjC,IAAA,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK;AAEpD,IAAA,QACEC,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEC,+BAAe,CAAC,CAACC,oBAAmB,CAAC,aAAa,EAAE,SAAS,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAA,GAAM,IAAI,EAAA,EAC5G,QAAQ,CACL;AAEV,CAAC;;;;"}
|
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
import React__default, { forwardRef } from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { buildClassnames } from '../../../utils/buildClassnames.js';
|
|
3
|
+
import 'uid/secure';
|
|
4
|
+
import basicDropdownStyles from './BasicDropdown.module.scss.js';
|
|
3
5
|
|
|
4
6
|
const BasicDropdown = forwardRef((props, ref) => {
|
|
5
|
-
const { children, className, role } = props;
|
|
6
|
-
return (React__default.createElement(
|
|
7
|
+
const { children, className, role, ...rest } = props;
|
|
8
|
+
return (React__default.createElement("div", { className: buildClassnames([basicDropdownStyles.basicDropdown, className]), ref: ref, role: role, ...rest }, children));
|
|
7
9
|
});
|
|
8
10
|
|
|
9
11
|
export { BasicDropdown };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BasicDropdown.js","sources":["../../../../src/components/AnimatedDropdown/components/BasicDropdown.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\n\nimport {
|
|
1
|
+
{"version":3,"file":"BasicDropdown.js","sources":["../../../../src/components/AnimatedDropdown/components/BasicDropdown.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { buildClassnames } from '../../../utils';\nimport { BasicDropdownProps } from '../types';\nimport basicDropdownStyles from './BasicDropdown.module.scss';\n\nexport const BasicDropdown = forwardRef<HTMLDivElement, BasicDropdownProps>(\n (props: BasicDropdownProps, ref) => {\n const { children, className, role, ...rest } = props;\n\n return (\n <div className={buildClassnames([basicDropdownStyles.basicDropdown, className])} ref={ref} role={role} {...rest}>\n {children}\n </div>\n );\n },\n);\n"],"names":["React"],"mappings":";;;;;AAMO,MAAM,aAAa,GAAG,UAAU,CACrC,CAAC,KAAyB,EAAE,GAAG,KAAI;AACjC,IAAA,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK;AAEpD,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,eAAe,CAAC,CAAC,mBAAmB,CAAC,aAAa,EAAE,SAAS,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAA,GAAM,IAAI,EAAA,EAC5G,QAAQ,CACL;AAEV,CAAC;;;;"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var ___$insertStyle = require('../../../_virtual/____insertStyle.cjs');
|
|
4
|
+
|
|
5
|
+
___$insertStyle("._basicDropdown_1y6wv_1 {\n display: inline-flex;\n background-color: #ffffff;\n box-shadow: 1px 4px 15px rgba(27, 33, 38, 0.25);\n border-radius: var(--radius-base);\n overflow: hidden;\n}");
|
|
6
|
+
var basicDropdownStyles = {"basicDropdown":"_basicDropdown_1y6wv_1"};
|
|
7
|
+
|
|
8
|
+
module.exports = basicDropdownStyles;
|
|
9
|
+
//# sourceMappingURL=BasicDropdown.module.scss.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BasicDropdown.module.scss.cjs","sources":["../../../../src/components/AnimatedDropdown/components/BasicDropdown.module.scss"],"sourcesContent":[".basicDropdown {\n display: inline-flex;\n background-color: #ffffff;\n box-shadow: 1px 4px 15px rgba(27, 33, 38, 0.25);\n border-radius: var(--radius-base);\n overflow: hidden;\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,oMAAA;AACA,0BAAA,CAAA,eAAA,CAAA,wBAAA;;;;"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import insertStyle from '../../../_virtual/____insertStyle.js';
|
|
2
|
+
|
|
3
|
+
insertStyle("._basicDropdown_1y6wv_1 {\n display: inline-flex;\n background-color: #ffffff;\n box-shadow: 1px 4px 15px rgba(27, 33, 38, 0.25);\n border-radius: var(--radius-base);\n overflow: hidden;\n}");
|
|
4
|
+
var basicDropdownStyles = {"basicDropdown":"_basicDropdown_1y6wv_1"};
|
|
5
|
+
|
|
6
|
+
export { basicDropdownStyles as default };
|
|
7
|
+
//# sourceMappingURL=BasicDropdown.module.scss.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BasicDropdown.module.scss.js","sources":["../../../../src/components/AnimatedDropdown/components/BasicDropdown.module.scss"],"sourcesContent":[".basicDropdown {\n display: inline-flex;\n background-color: #ffffff;\n box-shadow: 1px 4px 15px rgba(27, 33, 38, 0.25);\n border-radius: var(--radius-base);\n overflow: hidden;\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,oMAAA;AACA,0BAAA,CAAA,eAAA,CAAA,wBAAA;;;;"}
|
|
@@ -13,7 +13,6 @@ require('../../../../../theme/modules/sizes.cjs');
|
|
|
13
13
|
require('../../../../../theme/modules/text.cjs');
|
|
14
14
|
require('styled-components');
|
|
15
15
|
require('framer-motion');
|
|
16
|
-
require('../../../../Tooltip/components/styled.cjs');
|
|
17
16
|
require('../../../../Tooltip/components/TooltipPopover.cjs');
|
|
18
17
|
require('react-dom');
|
|
19
18
|
require('../../../../Text/Text.cjs');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BodyCell.cjs","sources":["../../../../../../src/components/DataGrid/components/Body/BodyCell/BodyCell.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\n\nimport { Cell, flexRender } from '@tanstack/react-table';\nimport { SELECTION_COLUMN_ID } from '../../../constants';\n\nimport { buildClassnames } from '../../../../../utils';\n\nimport { AriaRoles } from '../../../types';\nimport { CellContent } from '../../CellContent';\nimport { usePinnedColumnStyles } from '../../../hooks';\n\nimport { useExpandableCell } from './hooks';\nimport styles from './BodyCell.module.scss';\n\ntype ColumnCellProps = {\n /**\n * Cell within the TanStack Table instance.\n */\n cell: Cell<any, any>;\n\n /**\n * ARIA roles for the grid.\n */\n ariaRoles: AriaRoles;\n\n /**\n * Whether row selection is enabled.\n */\n enableRowSelection: boolean;\n\n /**\n * Whether row expanding is enabled for the grid.\n */\n enableExpanding: boolean;\n};\n\n/**\n * Renders a cell element, and its content, for a given column and row, within the grid body.\n */\nexport const BodyCell = ({\n cell,\n ariaRoles,\n enableRowSelection,\n enableExpanding,\n}: ColumnCellProps) => {\n const { justifyContent, textAlign, rowHeader, generateDataTestId } = cell.column.columnDef.meta!;\n const CellElement = rowHeader ? 'th' : 'td';\n\n const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({ column: cell.column });\n\n const { expandButtonProps, contentMarginLeft } = useExpandableCell({\n cell,\n enableExpanding,\n enableRowSelection,\n });\n\n const bodyCellClassname = buildClassnames([\n styles.bodyCell,\n pinnedCellClassName,\n 'data-grid-cell',\n ]);\n\n const cellContext = cell.getContext();\n const cellTestId = useMemo(\n () => (generateDataTestId ? generateDataTestId(cellContext.row.original) : undefined),\n [generateDataTestId, cellContext.row.original],\n );\n\n const isSelectionCol = enableRowSelection && cell.column.id === SELECTION_COLUMN_ID;\n\n // Capture shift key state for range selection in selection column.\n const captureShiftKeyForSelection = isSelectionCol\n ? (e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => {\n if ('key' in e && e.key !== ' ') return;\n\n const { row, table } = cell.getContext();\n if (!row.getCanSelect()) return;\n\n const { rangeSelectionState } = table.options.meta || {};\n if (rangeSelectionState) rangeSelectionState.isShiftKeyPressed = e.shiftKey;\n }\n : undefined;\n\n return (\n <CellElement\n className={bodyCellClassname}\n aria-colindex={cell.column.getIndex() + 1}\n scope={rowHeader ? 'row' : undefined}\n role={rowHeader ? 'rowheader' : ariaRoles.cell}\n style={pinnedCellStyles}\n data-testid={cellTestId}\n >\n <CellContent\n contentStyle={\n {\n marginLeft: contentMarginLeft,\n justifyContent,\n textAlign,\n } as React.CSSProperties\n }\n expandButtonProps={expandButtonProps}\n onMouseDown={captureShiftKeyForSelection}\n onKeyDown={captureShiftKeyForSelection}\n >\n {flexRender(cell.column.columnDef.cell, cellContext)}\n </CellContent>\n </CellElement>\n );\n};\n"],"names":["usePinnedColumnStyles","useExpandableCell","buildClassnames","styles","useMemo","SELECTION_COLUMN_ID","React","CellContent","flexRender"],"mappings":"
|
|
1
|
+
{"version":3,"file":"BodyCell.cjs","sources":["../../../../../../src/components/DataGrid/components/Body/BodyCell/BodyCell.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\n\nimport { Cell, flexRender } from '@tanstack/react-table';\nimport { SELECTION_COLUMN_ID } from '../../../constants';\n\nimport { buildClassnames } from '../../../../../utils';\n\nimport { AriaRoles } from '../../../types';\nimport { CellContent } from '../../CellContent';\nimport { usePinnedColumnStyles } from '../../../hooks';\n\nimport { useExpandableCell } from './hooks';\nimport styles from './BodyCell.module.scss';\n\ntype ColumnCellProps = {\n /**\n * Cell within the TanStack Table instance.\n */\n cell: Cell<any, any>;\n\n /**\n * ARIA roles for the grid.\n */\n ariaRoles: AriaRoles;\n\n /**\n * Whether row selection is enabled.\n */\n enableRowSelection: boolean;\n\n /**\n * Whether row expanding is enabled for the grid.\n */\n enableExpanding: boolean;\n};\n\n/**\n * Renders a cell element, and its content, for a given column and row, within the grid body.\n */\nexport const BodyCell = ({\n cell,\n ariaRoles,\n enableRowSelection,\n enableExpanding,\n}: ColumnCellProps) => {\n const { justifyContent, textAlign, rowHeader, generateDataTestId } = cell.column.columnDef.meta!;\n const CellElement = rowHeader ? 'th' : 'td';\n\n const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({ column: cell.column });\n\n const { expandButtonProps, contentMarginLeft } = useExpandableCell({\n cell,\n enableExpanding,\n enableRowSelection,\n });\n\n const bodyCellClassname = buildClassnames([\n styles.bodyCell,\n pinnedCellClassName,\n 'data-grid-cell',\n ]);\n\n const cellContext = cell.getContext();\n const cellTestId = useMemo(\n () => (generateDataTestId ? generateDataTestId(cellContext.row.original) : undefined),\n [generateDataTestId, cellContext.row.original],\n );\n\n const isSelectionCol = enableRowSelection && cell.column.id === SELECTION_COLUMN_ID;\n\n // Capture shift key state for range selection in selection column.\n const captureShiftKeyForSelection = isSelectionCol\n ? (e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => {\n if ('key' in e && e.key !== ' ') return;\n\n const { row, table } = cell.getContext();\n if (!row.getCanSelect()) return;\n\n const { rangeSelectionState } = table.options.meta || {};\n if (rangeSelectionState) rangeSelectionState.isShiftKeyPressed = e.shiftKey;\n }\n : undefined;\n\n return (\n <CellElement\n className={bodyCellClassname}\n aria-colindex={cell.column.getIndex() + 1}\n scope={rowHeader ? 'row' : undefined}\n role={rowHeader ? 'rowheader' : ariaRoles.cell}\n style={pinnedCellStyles}\n data-testid={cellTestId}\n >\n <CellContent\n contentStyle={\n {\n marginLeft: contentMarginLeft,\n justifyContent,\n textAlign,\n } as React.CSSProperties\n }\n expandButtonProps={expandButtonProps}\n onMouseDown={captureShiftKeyForSelection}\n onKeyDown={captureShiftKeyForSelection}\n >\n {flexRender(cell.column.columnDef.cell, cellContext)}\n </CellContent>\n </CellElement>\n );\n};\n"],"names":["usePinnedColumnStyles","useExpandableCell","buildClassnames","styles","useMemo","SELECTION_COLUMN_ID","React","CellContent","flexRender"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAoCA;;AAEG;AACI,MAAM,QAAQ,GAAG,CAAC,EACvB,IAAI,EACJ,SAAS,EACT,kBAAkB,EAClB,eAAe,GACC,KAAI;AACpB,IAAA,MAAM,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,EAAE,kBAAkB,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAK;IAChG,MAAM,WAAW,GAAG,SAAS,GAAG,IAAI,GAAG,IAAI;AAE3C,IAAA,MAAM,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,GAAGA,2CAAqB,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC;AAEhG,IAAA,MAAM,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,GAAGC,mCAAiB,CAAC;QACjE,IAAI;QACJ,eAAe;QACf,kBAAkB;AACnB,KAAA,CAAC;IAEF,MAAM,iBAAiB,GAAGC,+BAAe,CAAC;AACxC,QAAAC,eAAM,CAAC,QAAQ;QACf,mBAAmB;QACnB,gBAAgB;AACjB,KAAA,CAAC;AAEF,IAAA,MAAM,WAAW,GAAG,IAAI,CAAC,UAAU,EAAE;AACrC,IAAA,MAAM,UAAU,GAAGC,aAAO,CACxB,OAAO,kBAAkB,GAAG,kBAAkB,CAAC,WAAW,CAAC,GAAG,CAAC,QAAQ,CAAC,GAAG,SAAS,CAAC,EACrF,CAAC,kBAAkB,EAAE,WAAW,CAAC,GAAG,CAAC,QAAQ,CAAC,CAC/C;IAED,MAAM,cAAc,GAAG,kBAAkB,IAAI,IAAI,CAAC,MAAM,CAAC,EAAE,KAAKC,6BAAmB;;IAGnF,MAAM,2BAA2B,GAAG;AAClC,UAAE,CAAC,CAAyE,KAAI;YAC5E,IAAI,KAAK,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG;gBAAE;YAEjC,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,UAAU,EAAE;AACxC,YAAA,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE;gBAAE;YAEzB,MAAM,EAAE,mBAAmB,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,IAAI,EAAE;AACxD,YAAA,IAAI,mBAAmB;AAAE,gBAAA,mBAAmB,CAAC,iBAAiB,GAAG,CAAC,CAAC,QAAQ;QAC7E;UACA,SAAS;IAEb,QACEC,qCAAC,WAAW,EAAA,EACV,SAAS,EAAE,iBAAiB,mBACb,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,GAAG,CAAC,EACzC,KAAK,EAAE,SAAS,GAAG,KAAK,GAAG,SAAS,EACpC,IAAI,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,CAAC,IAAI,EAC9C,KAAK,EAAE,gBAAgB,EAAA,aAAA,EACV,UAAU,EAAA;QAEvBA,sBAAA,CAAA,aAAA,CAACC,uBAAW,EAAA,EACV,YAAY,EACV;AACE,gBAAA,UAAU,EAAE,iBAAiB;gBAC7B,cAAc;gBACd,SAAS;aACa,EAE1B,iBAAiB,EAAE,iBAAiB,EACpC,WAAW,EAAE,2BAA2B,EACxC,SAAS,EAAE,2BAA2B,EAAA,EAErCC,qBAAU,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,EAAE,WAAW,CAAC,CACxC,CACF;AAElB;;;;"}
|
|
@@ -11,7 +11,6 @@ import '../../../../../theme/modules/sizes.js';
|
|
|
11
11
|
import '../../../../../theme/modules/text.js';
|
|
12
12
|
import 'styled-components';
|
|
13
13
|
import 'framer-motion';
|
|
14
|
-
import '../../../../Tooltip/components/styled.js';
|
|
15
14
|
import '../../../../Tooltip/components/TooltipPopover.js';
|
|
16
15
|
import 'react-dom';
|
|
17
16
|
import '../../../../Text/Text.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BodyCell.js","sources":["../../../../../../src/components/DataGrid/components/Body/BodyCell/BodyCell.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\n\nimport { Cell, flexRender } from '@tanstack/react-table';\nimport { SELECTION_COLUMN_ID } from '../../../constants';\n\nimport { buildClassnames } from '../../../../../utils';\n\nimport { AriaRoles } from '../../../types';\nimport { CellContent } from '../../CellContent';\nimport { usePinnedColumnStyles } from '../../../hooks';\n\nimport { useExpandableCell } from './hooks';\nimport styles from './BodyCell.module.scss';\n\ntype ColumnCellProps = {\n /**\n * Cell within the TanStack Table instance.\n */\n cell: Cell<any, any>;\n\n /**\n * ARIA roles for the grid.\n */\n ariaRoles: AriaRoles;\n\n /**\n * Whether row selection is enabled.\n */\n enableRowSelection: boolean;\n\n /**\n * Whether row expanding is enabled for the grid.\n */\n enableExpanding: boolean;\n};\n\n/**\n * Renders a cell element, and its content, for a given column and row, within the grid body.\n */\nexport const BodyCell = ({\n cell,\n ariaRoles,\n enableRowSelection,\n enableExpanding,\n}: ColumnCellProps) => {\n const { justifyContent, textAlign, rowHeader, generateDataTestId } = cell.column.columnDef.meta!;\n const CellElement = rowHeader ? 'th' : 'td';\n\n const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({ column: cell.column });\n\n const { expandButtonProps, contentMarginLeft } = useExpandableCell({\n cell,\n enableExpanding,\n enableRowSelection,\n });\n\n const bodyCellClassname = buildClassnames([\n styles.bodyCell,\n pinnedCellClassName,\n 'data-grid-cell',\n ]);\n\n const cellContext = cell.getContext();\n const cellTestId = useMemo(\n () => (generateDataTestId ? generateDataTestId(cellContext.row.original) : undefined),\n [generateDataTestId, cellContext.row.original],\n );\n\n const isSelectionCol = enableRowSelection && cell.column.id === SELECTION_COLUMN_ID;\n\n // Capture shift key state for range selection in selection column.\n const captureShiftKeyForSelection = isSelectionCol\n ? (e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => {\n if ('key' in e && e.key !== ' ') return;\n\n const { row, table } = cell.getContext();\n if (!row.getCanSelect()) return;\n\n const { rangeSelectionState } = table.options.meta || {};\n if (rangeSelectionState) rangeSelectionState.isShiftKeyPressed = e.shiftKey;\n }\n : undefined;\n\n return (\n <CellElement\n className={bodyCellClassname}\n aria-colindex={cell.column.getIndex() + 1}\n scope={rowHeader ? 'row' : undefined}\n role={rowHeader ? 'rowheader' : ariaRoles.cell}\n style={pinnedCellStyles}\n data-testid={cellTestId}\n >\n <CellContent\n contentStyle={\n {\n marginLeft: contentMarginLeft,\n justifyContent,\n textAlign,\n } as React.CSSProperties\n }\n expandButtonProps={expandButtonProps}\n onMouseDown={captureShiftKeyForSelection}\n onKeyDown={captureShiftKeyForSelection}\n >\n {flexRender(cell.column.columnDef.cell, cellContext)}\n </CellContent>\n </CellElement>\n );\n};\n"],"names":["React"],"mappings":"
|
|
1
|
+
{"version":3,"file":"BodyCell.js","sources":["../../../../../../src/components/DataGrid/components/Body/BodyCell/BodyCell.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\n\nimport { Cell, flexRender } from '@tanstack/react-table';\nimport { SELECTION_COLUMN_ID } from '../../../constants';\n\nimport { buildClassnames } from '../../../../../utils';\n\nimport { AriaRoles } from '../../../types';\nimport { CellContent } from '../../CellContent';\nimport { usePinnedColumnStyles } from '../../../hooks';\n\nimport { useExpandableCell } from './hooks';\nimport styles from './BodyCell.module.scss';\n\ntype ColumnCellProps = {\n /**\n * Cell within the TanStack Table instance.\n */\n cell: Cell<any, any>;\n\n /**\n * ARIA roles for the grid.\n */\n ariaRoles: AriaRoles;\n\n /**\n * Whether row selection is enabled.\n */\n enableRowSelection: boolean;\n\n /**\n * Whether row expanding is enabled for the grid.\n */\n enableExpanding: boolean;\n};\n\n/**\n * Renders a cell element, and its content, for a given column and row, within the grid body.\n */\nexport const BodyCell = ({\n cell,\n ariaRoles,\n enableRowSelection,\n enableExpanding,\n}: ColumnCellProps) => {\n const { justifyContent, textAlign, rowHeader, generateDataTestId } = cell.column.columnDef.meta!;\n const CellElement = rowHeader ? 'th' : 'td';\n\n const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({ column: cell.column });\n\n const { expandButtonProps, contentMarginLeft } = useExpandableCell({\n cell,\n enableExpanding,\n enableRowSelection,\n });\n\n const bodyCellClassname = buildClassnames([\n styles.bodyCell,\n pinnedCellClassName,\n 'data-grid-cell',\n ]);\n\n const cellContext = cell.getContext();\n const cellTestId = useMemo(\n () => (generateDataTestId ? generateDataTestId(cellContext.row.original) : undefined),\n [generateDataTestId, cellContext.row.original],\n );\n\n const isSelectionCol = enableRowSelection && cell.column.id === SELECTION_COLUMN_ID;\n\n // Capture shift key state for range selection in selection column.\n const captureShiftKeyForSelection = isSelectionCol\n ? (e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => {\n if ('key' in e && e.key !== ' ') return;\n\n const { row, table } = cell.getContext();\n if (!row.getCanSelect()) return;\n\n const { rangeSelectionState } = table.options.meta || {};\n if (rangeSelectionState) rangeSelectionState.isShiftKeyPressed = e.shiftKey;\n }\n : undefined;\n\n return (\n <CellElement\n className={bodyCellClassname}\n aria-colindex={cell.column.getIndex() + 1}\n scope={rowHeader ? 'row' : undefined}\n role={rowHeader ? 'rowheader' : ariaRoles.cell}\n style={pinnedCellStyles}\n data-testid={cellTestId}\n >\n <CellContent\n contentStyle={\n {\n marginLeft: contentMarginLeft,\n justifyContent,\n textAlign,\n } as React.CSSProperties\n }\n expandButtonProps={expandButtonProps}\n onMouseDown={captureShiftKeyForSelection}\n onKeyDown={captureShiftKeyForSelection}\n >\n {flexRender(cell.column.columnDef.cell, cellContext)}\n </CellContent>\n </CellElement>\n );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;;;;;;;AAoCA;;AAEG;AACI,MAAM,QAAQ,GAAG,CAAC,EACvB,IAAI,EACJ,SAAS,EACT,kBAAkB,EAClB,eAAe,GACC,KAAI;AACpB,IAAA,MAAM,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,EAAE,kBAAkB,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAK;IAChG,MAAM,WAAW,GAAG,SAAS,GAAG,IAAI,GAAG,IAAI;AAE3C,IAAA,MAAM,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,GAAG,qBAAqB,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC;AAEhG,IAAA,MAAM,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,GAAG,iBAAiB,CAAC;QACjE,IAAI;QACJ,eAAe;QACf,kBAAkB;AACnB,KAAA,CAAC;IAEF,MAAM,iBAAiB,GAAG,eAAe,CAAC;AACxC,QAAA,MAAM,CAAC,QAAQ;QACf,mBAAmB;QACnB,gBAAgB;AACjB,KAAA,CAAC;AAEF,IAAA,MAAM,WAAW,GAAG,IAAI,CAAC,UAAU,EAAE;AACrC,IAAA,MAAM,UAAU,GAAG,OAAO,CACxB,OAAO,kBAAkB,GAAG,kBAAkB,CAAC,WAAW,CAAC,GAAG,CAAC,QAAQ,CAAC,GAAG,SAAS,CAAC,EACrF,CAAC,kBAAkB,EAAE,WAAW,CAAC,GAAG,CAAC,QAAQ,CAAC,CAC/C;IAED,MAAM,cAAc,GAAG,kBAAkB,IAAI,IAAI,CAAC,MAAM,CAAC,EAAE,KAAK,mBAAmB;;IAGnF,MAAM,2BAA2B,GAAG;AAClC,UAAE,CAAC,CAAyE,KAAI;YAC5E,IAAI,KAAK,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG;gBAAE;YAEjC,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,UAAU,EAAE;AACxC,YAAA,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE;gBAAE;YAEzB,MAAM,EAAE,mBAAmB,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,IAAI,EAAE;AACxD,YAAA,IAAI,mBAAmB;AAAE,gBAAA,mBAAmB,CAAC,iBAAiB,GAAG,CAAC,CAAC,QAAQ;QAC7E;UACA,SAAS;IAEb,QACEA,6BAAC,WAAW,EAAA,EACV,SAAS,EAAE,iBAAiB,mBACb,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,GAAG,CAAC,EACzC,KAAK,EAAE,SAAS,GAAG,KAAK,GAAG,SAAS,EACpC,IAAI,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,CAAC,IAAI,EAC9C,KAAK,EAAE,gBAAgB,EAAA,aAAA,EACV,UAAU,EAAA;QAEvBA,cAAA,CAAA,aAAA,CAAC,WAAW,EAAA,EACV,YAAY,EACV;AACE,gBAAA,UAAU,EAAE,iBAAiB;gBAC7B,cAAc;gBACd,SAAS;aACa,EAE1B,iBAAiB,EAAE,iBAAiB,EACpC,WAAW,EAAE,2BAA2B,EACxC,SAAS,EAAE,2BAA2B,EAAA,EAErC,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,EAAE,WAAW,CAAC,CACxC,CACF;AAElB;;;;"}
|
|
@@ -9,7 +9,6 @@ require('@tanstack/react-table');
|
|
|
9
9
|
require('../../../../Stack/Stack.cjs');
|
|
10
10
|
var index = require('../../../../../theme/index.cjs');
|
|
11
11
|
require('framer-motion');
|
|
12
|
-
require('../../../../Tooltip/components/styled.cjs');
|
|
13
12
|
require('../../../../Tooltip/components/TooltipPopover.cjs');
|
|
14
13
|
require('react-dom');
|
|
15
14
|
require('../../../../Text/Text.cjs');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LoadingBodyCell.cjs","sources":["../../../../../../src/components/DataGrid/components/Body/LoadingBody/LoadingBodyCell.tsx"],"sourcesContent":["import React from 'react';\nimport { Column } from '@tanstack/react-table';\n\nimport { Skeleton } from '../../../../Skeleton';\nimport { buildClassnames } from '../../../../../utils';\nimport { usePinnedColumnStyles } from '../../../hooks';\nimport { CellContent } from '../../CellContent';\nimport { theme } from '../../../../../theme';\n\nimport styles from '../BodyCell/BodyCell.module.scss';\n\ntype LoadingBodyCellProps = {\n /**\n * The TanStack Table column instance.\n */\n column: Column<any, any>;\n};\n\n/**\n * A cell component for the DataGrid that displays a skeleton loader.\n */\nexport const LoadingBodyCell = ({ column }: LoadingBodyCellProps) => {\n const { justifyContent, textAlign } = column.columnDef.meta!;\n const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({\n column,\n });\n\n const loadingCellClassname = buildClassnames([\n styles.bodyCell,\n pinnedCellClassName,\n 'data-grid-cell',\n 'data-grid-cell-loading',\n ]);\n\n return (\n <td\n className={loadingCellClassname}\n style={pinnedCellStyles}\n aria-colindex={column.getIndex() + 1}\n >\n <CellContent\n contentStyle={\n {\n justifyContent,\n textAlign,\n } as React.CSSProperties\n }\n >\n <Skeleton width=\"75%\" height={theme.sizes[3]} />\n </CellContent>\n </td>\n );\n};\n"],"names":["usePinnedColumnStyles","buildClassnames","styles","React","CellContent","Skeleton","theme"],"mappings":"
|
|
1
|
+
{"version":3,"file":"LoadingBodyCell.cjs","sources":["../../../../../../src/components/DataGrid/components/Body/LoadingBody/LoadingBodyCell.tsx"],"sourcesContent":["import React from 'react';\nimport { Column } from '@tanstack/react-table';\n\nimport { Skeleton } from '../../../../Skeleton';\nimport { buildClassnames } from '../../../../../utils';\nimport { usePinnedColumnStyles } from '../../../hooks';\nimport { CellContent } from '../../CellContent';\nimport { theme } from '../../../../../theme';\n\nimport styles from '../BodyCell/BodyCell.module.scss';\n\ntype LoadingBodyCellProps = {\n /**\n * The TanStack Table column instance.\n */\n column: Column<any, any>;\n};\n\n/**\n * A cell component for the DataGrid that displays a skeleton loader.\n */\nexport const LoadingBodyCell = ({ column }: LoadingBodyCellProps) => {\n const { justifyContent, textAlign } = column.columnDef.meta!;\n const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({\n column,\n });\n\n const loadingCellClassname = buildClassnames([\n styles.bodyCell,\n pinnedCellClassName,\n 'data-grid-cell',\n 'data-grid-cell-loading',\n ]);\n\n return (\n <td\n className={loadingCellClassname}\n style={pinnedCellStyles}\n aria-colindex={column.getIndex() + 1}\n >\n <CellContent\n contentStyle={\n {\n justifyContent,\n textAlign,\n } as React.CSSProperties\n }\n >\n <Skeleton width=\"75%\" height={theme.sizes[3]} />\n </CellContent>\n </td>\n );\n};\n"],"names":["usePinnedColumnStyles","buildClassnames","styles","React","CellContent","Skeleton","theme"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAkBA;;AAEG;MACU,eAAe,GAAG,CAAC,EAAE,MAAM,EAAwB,KAAI;IAClE,MAAM,EAAE,cAAc,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,SAAS,CAAC,IAAK;AAC5D,IAAA,MAAM,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,GAAGA,2CAAqB,CAAC;QACtE,MAAM;AACP,KAAA,CAAC;IAEF,MAAM,oBAAoB,GAAGC,+BAAe,CAAC;AAC3C,QAAAC,eAAM,CAAC,QAAQ;QACf,mBAAmB;QACnB,gBAAgB;QAChB,wBAAwB;AACzB,KAAA,CAAC;AAEF,IAAA,QACEC,sBAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EACE,SAAS,EAAE,oBAAoB,EAC/B,KAAK,EAAE,gBAAgB,mBACR,MAAM,CAAC,QAAQ,EAAE,GAAG,CAAC,EAAA;QAEpCA,sBAAA,CAAA,aAAA,CAACC,uBAAW,EAAA,EACV,YAAY,EACV;gBACE,cAAc;gBACd,SAAS;AACa,aAAA,EAAA;AAG1B,YAAAD,sBAAA,CAAA,aAAA,CAACE,iBAAQ,EAAA,EAAC,KAAK,EAAC,KAAK,EAAC,MAAM,EAAEC,WAAK,CAAC,KAAK,CAAC,CAAC,CAAC,GAAI,CACpC,CACX;AAET;;;;"}
|
|
@@ -7,7 +7,6 @@ import '@tanstack/react-table';
|
|
|
7
7
|
import '../../../../Stack/Stack.js';
|
|
8
8
|
import { theme } from '../../../../../theme/index.js';
|
|
9
9
|
import 'framer-motion';
|
|
10
|
-
import '../../../../Tooltip/components/styled.js';
|
|
11
10
|
import '../../../../Tooltip/components/TooltipPopover.js';
|
|
12
11
|
import 'react-dom';
|
|
13
12
|
import '../../../../Text/Text.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LoadingBodyCell.js","sources":["../../../../../../src/components/DataGrid/components/Body/LoadingBody/LoadingBodyCell.tsx"],"sourcesContent":["import React from 'react';\nimport { Column } from '@tanstack/react-table';\n\nimport { Skeleton } from '../../../../Skeleton';\nimport { buildClassnames } from '../../../../../utils';\nimport { usePinnedColumnStyles } from '../../../hooks';\nimport { CellContent } from '../../CellContent';\nimport { theme } from '../../../../../theme';\n\nimport styles from '../BodyCell/BodyCell.module.scss';\n\ntype LoadingBodyCellProps = {\n /**\n * The TanStack Table column instance.\n */\n column: Column<any, any>;\n};\n\n/**\n * A cell component for the DataGrid that displays a skeleton loader.\n */\nexport const LoadingBodyCell = ({ column }: LoadingBodyCellProps) => {\n const { justifyContent, textAlign } = column.columnDef.meta!;\n const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({\n column,\n });\n\n const loadingCellClassname = buildClassnames([\n styles.bodyCell,\n pinnedCellClassName,\n 'data-grid-cell',\n 'data-grid-cell-loading',\n ]);\n\n return (\n <td\n className={loadingCellClassname}\n style={pinnedCellStyles}\n aria-colindex={column.getIndex() + 1}\n >\n <CellContent\n contentStyle={\n {\n justifyContent,\n textAlign,\n } as React.CSSProperties\n }\n >\n <Skeleton width=\"75%\" height={theme.sizes[3]} />\n </CellContent>\n </td>\n );\n};\n"],"names":["React"],"mappings":"
|
|
1
|
+
{"version":3,"file":"LoadingBodyCell.js","sources":["../../../../../../src/components/DataGrid/components/Body/LoadingBody/LoadingBodyCell.tsx"],"sourcesContent":["import React from 'react';\nimport { Column } from '@tanstack/react-table';\n\nimport { Skeleton } from '../../../../Skeleton';\nimport { buildClassnames } from '../../../../../utils';\nimport { usePinnedColumnStyles } from '../../../hooks';\nimport { CellContent } from '../../CellContent';\nimport { theme } from '../../../../../theme';\n\nimport styles from '../BodyCell/BodyCell.module.scss';\n\ntype LoadingBodyCellProps = {\n /**\n * The TanStack Table column instance.\n */\n column: Column<any, any>;\n};\n\n/**\n * A cell component for the DataGrid that displays a skeleton loader.\n */\nexport const LoadingBodyCell = ({ column }: LoadingBodyCellProps) => {\n const { justifyContent, textAlign } = column.columnDef.meta!;\n const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({\n column,\n });\n\n const loadingCellClassname = buildClassnames([\n styles.bodyCell,\n pinnedCellClassName,\n 'data-grid-cell',\n 'data-grid-cell-loading',\n ]);\n\n return (\n <td\n className={loadingCellClassname}\n style={pinnedCellStyles}\n aria-colindex={column.getIndex() + 1}\n >\n <CellContent\n contentStyle={\n {\n justifyContent,\n textAlign,\n } as React.CSSProperties\n }\n >\n <Skeleton width=\"75%\" height={theme.sizes[3]} />\n </CellContent>\n </td>\n );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;;;AAkBA;;AAEG;MACU,eAAe,GAAG,CAAC,EAAE,MAAM,EAAwB,KAAI;IAClE,MAAM,EAAE,cAAc,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,SAAS,CAAC,IAAK;AAC5D,IAAA,MAAM,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,GAAG,qBAAqB,CAAC;QACtE,MAAM;AACP,KAAA,CAAC;IAEF,MAAM,oBAAoB,GAAG,eAAe,CAAC;AAC3C,QAAA,MAAM,CAAC,QAAQ;QACf,mBAAmB;QACnB,gBAAgB;QAChB,wBAAwB;AACzB,KAAA,CAAC;AAEF,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EACE,SAAS,EAAE,oBAAoB,EAC/B,KAAK,EAAE,gBAAgB,mBACR,MAAM,CAAC,QAAQ,EAAE,GAAG,CAAC,EAAA;QAEpCA,cAAA,CAAA,aAAA,CAAC,WAAW,EAAA,EACV,YAAY,EACV;gBACE,cAAc;gBACd,SAAS;AACa,aAAA,EAAA;AAG1B,YAAAA,cAAA,CAAA,aAAA,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAC,KAAK,EAAC,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,GAAI,CACpC,CACX;AAET;;;;"}
|
|
@@ -13,7 +13,6 @@ var usePinnedColumnLayout = require('../../hooks/usePinnedColumnLayout.cjs');
|
|
|
13
13
|
require('@tanstack/react-table');
|
|
14
14
|
require('../../../Stack/Stack.cjs');
|
|
15
15
|
require('framer-motion');
|
|
16
|
-
require('../../../Tooltip/components/styled.cjs');
|
|
17
16
|
require('../../../Tooltip/components/TooltipPopover.cjs');
|
|
18
17
|
require('react-dom');
|
|
19
18
|
require('../../../Text/Text.cjs');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GridContainer.cjs","sources":["../../../../../src/components/DataGrid/components/GridContainer/GridContainer.tsx"],"sourcesContent":["import React, { RefObject, CSSProperties, ReactNode, AriaAttributes } from 'react';\nimport { Table } from '@tanstack/react-table';\n\nimport { theme } from 'Theme';\nimport { SizeScale } from 'Theme/modules/sizes';\n\nimport { useScrollPosition } from '../../../../hooks';\nimport { BorderMode } from '../../types/enums';\nimport { AriaRoles } from '../../types';\nimport { buildClassnames } from '../../../../utils/buildClassnames';\n\nimport { Container } from './Container';\n\nimport styles from './GridContainer.module.scss';\nimport { usePinnedColumnLayout } from '../../hooks';\n\ntype GridContainerProps = Pick<AriaAttributes, 'aria-label'> &\n Pick<React.HTMLAttributes<HTMLTableElement>, 'id' | 'className'> & {\n /**\n * Reference to be used for the outer container element.\n */\n containerRef?: RefObject<HTMLDivElement>;\n\n /**\n * Reference to be used for the table element.\n */\n tableRef?: RefObject<HTMLTableElement>;\n\n /**\n * Border mode.\n */\n borderMode: BorderMode;\n\n /**\n * Additional container styles.\n */\n containerStyles?: CSSProperties;\n\n /**\n * ARIA roles used in the grid.\n */\n ariaRoles: AriaRoles;\n\n /**\n * Whether resizeable columns are enabled or not.\n */\n enableResizeableColumns: boolean;\n\n /**\n * Density of the grid.\n */\n density: keyof SizeScale;\n\n /**\n * The TanStack Table instance.\n */\n table: Table<any>;\n\n /**\n * Child elements (table contents).\n */\n children: ReactNode;\n };\n\nconst gridContainerClassname = buildClassnames([styles.dataGridStyle, 'data-grid']);\n\n/**\n * The Grid container, which includes a wrapper and the table element itself. Controls table layout, applies\n * styling and sets table-specific CSS variables (such as density).\n */\nexport const GridContainer = ({\n containerRef,\n tableRef,\n borderMode,\n containerStyles,\n ariaRoles,\n enableResizeableColumns,\n density,\n table,\n children,\n id,\n className,\n 'aria-label': ariaLabel,\n}: GridContainerProps) => {\n const { pinnedColumnLayoutStyles } = usePinnedColumnLayout({ table });\n const { scrollPosition, onScroll, enableTransition } = useScrollPosition({ containerRef });\n\n // CSS variables to control pinned column shadow visibility\n const hideShadows = !scrollPosition || scrollPosition === 'none';\n const shadowVisibility = {\n '--pinned-left-shadow-opacity': hideShadows || scrollPosition === 'start' ? 0 : 1,\n '--pinned-right-shadow-opacity': hideShadows || scrollPosition === 'end' ? 0 : 1,\n '--pinned-shadow-transition-duration': enableTransition ? '0.3s' : '0s',\n };\n\n return (\n <Container\n ref={containerRef}\n borderMode={borderMode}\n style={containerStyles}\n onScroll={onScroll}\n >\n <table\n id={id}\n ref={tableRef}\n className={buildClassnames([gridContainerClassname, className])}\n role={ariaRoles.table}\n style={\n {\n tableLayout: enableResizeableColumns ? 'fixed' : 'auto',\n '--density': theme.sizes[density],\n ...pinnedColumnLayoutStyles,\n ...shadowVisibility,\n } as CSSProperties\n }\n aria-colcount={table.getFlatHeaders().length}\n aria-rowcount={table.getRowCount()}\n aria-label={ariaLabel}\n >\n {children}\n </table>\n </Container>\n );\n};\n"],"names":["buildClassnames","styles","usePinnedColumnLayout","useScrollPosition","React","Container","theme"],"mappings":"
|
|
1
|
+
{"version":3,"file":"GridContainer.cjs","sources":["../../../../../src/components/DataGrid/components/GridContainer/GridContainer.tsx"],"sourcesContent":["import React, { RefObject, CSSProperties, ReactNode, AriaAttributes } from 'react';\nimport { Table } from '@tanstack/react-table';\n\nimport { theme } from 'Theme';\nimport { SizeScale } from 'Theme/modules/sizes';\n\nimport { useScrollPosition } from '../../../../hooks';\nimport { BorderMode } from '../../types/enums';\nimport { AriaRoles } from '../../types';\nimport { buildClassnames } from '../../../../utils/buildClassnames';\n\nimport { Container } from './Container';\n\nimport styles from './GridContainer.module.scss';\nimport { usePinnedColumnLayout } from '../../hooks';\n\ntype GridContainerProps = Pick<AriaAttributes, 'aria-label'> &\n Pick<React.HTMLAttributes<HTMLTableElement>, 'id' | 'className'> & {\n /**\n * Reference to be used for the outer container element.\n */\n containerRef?: RefObject<HTMLDivElement>;\n\n /**\n * Reference to be used for the table element.\n */\n tableRef?: RefObject<HTMLTableElement>;\n\n /**\n * Border mode.\n */\n borderMode: BorderMode;\n\n /**\n * Additional container styles.\n */\n containerStyles?: CSSProperties;\n\n /**\n * ARIA roles used in the grid.\n */\n ariaRoles: AriaRoles;\n\n /**\n * Whether resizeable columns are enabled or not.\n */\n enableResizeableColumns: boolean;\n\n /**\n * Density of the grid.\n */\n density: keyof SizeScale;\n\n /**\n * The TanStack Table instance.\n */\n table: Table<any>;\n\n /**\n * Child elements (table contents).\n */\n children: ReactNode;\n };\n\nconst gridContainerClassname = buildClassnames([styles.dataGridStyle, 'data-grid']);\n\n/**\n * The Grid container, which includes a wrapper and the table element itself. Controls table layout, applies\n * styling and sets table-specific CSS variables (such as density).\n */\nexport const GridContainer = ({\n containerRef,\n tableRef,\n borderMode,\n containerStyles,\n ariaRoles,\n enableResizeableColumns,\n density,\n table,\n children,\n id,\n className,\n 'aria-label': ariaLabel,\n}: GridContainerProps) => {\n const { pinnedColumnLayoutStyles } = usePinnedColumnLayout({ table });\n const { scrollPosition, onScroll, enableTransition } = useScrollPosition({ containerRef });\n\n // CSS variables to control pinned column shadow visibility\n const hideShadows = !scrollPosition || scrollPosition === 'none';\n const shadowVisibility = {\n '--pinned-left-shadow-opacity': hideShadows || scrollPosition === 'start' ? 0 : 1,\n '--pinned-right-shadow-opacity': hideShadows || scrollPosition === 'end' ? 0 : 1,\n '--pinned-shadow-transition-duration': enableTransition ? '0.3s' : '0s',\n };\n\n return (\n <Container\n ref={containerRef}\n borderMode={borderMode}\n style={containerStyles}\n onScroll={onScroll}\n >\n <table\n id={id}\n ref={tableRef}\n className={buildClassnames([gridContainerClassname, className])}\n role={ariaRoles.table}\n style={\n {\n tableLayout: enableResizeableColumns ? 'fixed' : 'auto',\n '--density': theme.sizes[density],\n ...pinnedColumnLayoutStyles,\n ...shadowVisibility,\n } as CSSProperties\n }\n aria-colcount={table.getFlatHeaders().length}\n aria-rowcount={table.getRowCount()}\n aria-label={ariaLabel}\n >\n {children}\n </table>\n </Container>\n );\n};\n"],"names":["buildClassnames","styles","usePinnedColumnLayout","useScrollPosition","React","Container","theme"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAgEA,MAAM,sBAAsB,GAAGA,+BAAe,CAAC,CAACC,oBAAM,CAAC,aAAa,EAAE,WAAW,CAAC,CAAC;AAEnF;;;AAGG;AACI,MAAM,aAAa,GAAG,CAAC,EAC5B,YAAY,EACZ,QAAQ,EACR,UAAU,EACV,eAAe,EACf,SAAS,EACT,uBAAuB,EACvB,OAAO,EACP,KAAK,EACL,QAAQ,EACR,EAAE,EACF,SAAS,EACT,YAAY,EAAE,SAAS,GACJ,KAAI;IACvB,MAAM,EAAE,wBAAwB,EAAE,GAAGC,2CAAqB,CAAC,EAAE,KAAK,EAAE,CAAC;AACrE,IAAA,MAAM,EAAE,cAAc,EAAE,QAAQ,EAAE,gBAAgB,EAAE,GAAGC,mCAAiB,CAAC,EAAE,YAAY,EAAE,CAAC;;IAG1F,MAAM,WAAW,GAAG,CAAC,cAAc,IAAI,cAAc,KAAK,MAAM;AAChE,IAAA,MAAM,gBAAgB,GAAG;AACvB,QAAA,8BAA8B,EAAE,WAAW,IAAI,cAAc,KAAK,OAAO,GAAG,CAAC,GAAG,CAAC;AACjF,QAAA,+BAA+B,EAAE,WAAW,IAAI,cAAc,KAAK,KAAK,GAAG,CAAC,GAAG,CAAC;QAChF,qCAAqC,EAAE,gBAAgB,GAAG,MAAM,GAAG,IAAI;KACxE;AAED,IAAA,QACEC,sBAAA,CAAA,aAAA,CAACC,mBAAS,IACR,GAAG,EAAE,YAAY,EACjB,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,eAAe,EACtB,QAAQ,EAAE,QAAQ,EAAA;QAElBD,sBAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EACE,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,QAAQ,EACb,SAAS,EAAEJ,+BAAe,CAAC,CAAC,sBAAsB,EAAE,SAAS,CAAC,CAAC,EAC/D,IAAI,EAAE,SAAS,CAAC,KAAK,EACrB,KAAK,EACH;gBACE,WAAW,EAAE,uBAAuB,GAAG,OAAO,GAAG,MAAM;AACvD,gBAAA,WAAW,EAAEM,WAAK,CAAC,KAAK,CAAC,OAAO,CAAC;AACjC,gBAAA,GAAG,wBAAwB;AAC3B,gBAAA,GAAG,gBAAgB;AACH,aAAA,EAAA,eAAA,EAEL,KAAK,CAAC,cAAc,EAAE,CAAC,MAAM,mBAC7B,KAAK,CAAC,WAAW,EAAE,gBACtB,SAAS,EAAA,EAEpB,QAAQ,CACH,CACE;AAEhB;;;;"}
|
|
@@ -11,7 +11,6 @@ import { usePinnedColumnLayout } from '../../hooks/usePinnedColumnLayout.js';
|
|
|
11
11
|
import '@tanstack/react-table';
|
|
12
12
|
import '../../../Stack/Stack.js';
|
|
13
13
|
import 'framer-motion';
|
|
14
|
-
import '../../../Tooltip/components/styled.js';
|
|
15
14
|
import '../../../Tooltip/components/TooltipPopover.js';
|
|
16
15
|
import 'react-dom';
|
|
17
16
|
import '../../../Text/Text.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GridContainer.js","sources":["../../../../../src/components/DataGrid/components/GridContainer/GridContainer.tsx"],"sourcesContent":["import React, { RefObject, CSSProperties, ReactNode, AriaAttributes } from 'react';\nimport { Table } from '@tanstack/react-table';\n\nimport { theme } from 'Theme';\nimport { SizeScale } from 'Theme/modules/sizes';\n\nimport { useScrollPosition } from '../../../../hooks';\nimport { BorderMode } from '../../types/enums';\nimport { AriaRoles } from '../../types';\nimport { buildClassnames } from '../../../../utils/buildClassnames';\n\nimport { Container } from './Container';\n\nimport styles from './GridContainer.module.scss';\nimport { usePinnedColumnLayout } from '../../hooks';\n\ntype GridContainerProps = Pick<AriaAttributes, 'aria-label'> &\n Pick<React.HTMLAttributes<HTMLTableElement>, 'id' | 'className'> & {\n /**\n * Reference to be used for the outer container element.\n */\n containerRef?: RefObject<HTMLDivElement>;\n\n /**\n * Reference to be used for the table element.\n */\n tableRef?: RefObject<HTMLTableElement>;\n\n /**\n * Border mode.\n */\n borderMode: BorderMode;\n\n /**\n * Additional container styles.\n */\n containerStyles?: CSSProperties;\n\n /**\n * ARIA roles used in the grid.\n */\n ariaRoles: AriaRoles;\n\n /**\n * Whether resizeable columns are enabled or not.\n */\n enableResizeableColumns: boolean;\n\n /**\n * Density of the grid.\n */\n density: keyof SizeScale;\n\n /**\n * The TanStack Table instance.\n */\n table: Table<any>;\n\n /**\n * Child elements (table contents).\n */\n children: ReactNode;\n };\n\nconst gridContainerClassname = buildClassnames([styles.dataGridStyle, 'data-grid']);\n\n/**\n * The Grid container, which includes a wrapper and the table element itself. Controls table layout, applies\n * styling and sets table-specific CSS variables (such as density).\n */\nexport const GridContainer = ({\n containerRef,\n tableRef,\n borderMode,\n containerStyles,\n ariaRoles,\n enableResizeableColumns,\n density,\n table,\n children,\n id,\n className,\n 'aria-label': ariaLabel,\n}: GridContainerProps) => {\n const { pinnedColumnLayoutStyles } = usePinnedColumnLayout({ table });\n const { scrollPosition, onScroll, enableTransition } = useScrollPosition({ containerRef });\n\n // CSS variables to control pinned column shadow visibility\n const hideShadows = !scrollPosition || scrollPosition === 'none';\n const shadowVisibility = {\n '--pinned-left-shadow-opacity': hideShadows || scrollPosition === 'start' ? 0 : 1,\n '--pinned-right-shadow-opacity': hideShadows || scrollPosition === 'end' ? 0 : 1,\n '--pinned-shadow-transition-duration': enableTransition ? '0.3s' : '0s',\n };\n\n return (\n <Container\n ref={containerRef}\n borderMode={borderMode}\n style={containerStyles}\n onScroll={onScroll}\n >\n <table\n id={id}\n ref={tableRef}\n className={buildClassnames([gridContainerClassname, className])}\n role={ariaRoles.table}\n style={\n {\n tableLayout: enableResizeableColumns ? 'fixed' : 'auto',\n '--density': theme.sizes[density],\n ...pinnedColumnLayoutStyles,\n ...shadowVisibility,\n } as CSSProperties\n }\n aria-colcount={table.getFlatHeaders().length}\n aria-rowcount={table.getRowCount()}\n aria-label={ariaLabel}\n >\n {children}\n </table>\n </Container>\n );\n};\n"],"names":["React"],"mappings":"
|
|
1
|
+
{"version":3,"file":"GridContainer.js","sources":["../../../../../src/components/DataGrid/components/GridContainer/GridContainer.tsx"],"sourcesContent":["import React, { RefObject, CSSProperties, ReactNode, AriaAttributes } from 'react';\nimport { Table } from '@tanstack/react-table';\n\nimport { theme } from 'Theme';\nimport { SizeScale } from 'Theme/modules/sizes';\n\nimport { useScrollPosition } from '../../../../hooks';\nimport { BorderMode } from '../../types/enums';\nimport { AriaRoles } from '../../types';\nimport { buildClassnames } from '../../../../utils/buildClassnames';\n\nimport { Container } from './Container';\n\nimport styles from './GridContainer.module.scss';\nimport { usePinnedColumnLayout } from '../../hooks';\n\ntype GridContainerProps = Pick<AriaAttributes, 'aria-label'> &\n Pick<React.HTMLAttributes<HTMLTableElement>, 'id' | 'className'> & {\n /**\n * Reference to be used for the outer container element.\n */\n containerRef?: RefObject<HTMLDivElement>;\n\n /**\n * Reference to be used for the table element.\n */\n tableRef?: RefObject<HTMLTableElement>;\n\n /**\n * Border mode.\n */\n borderMode: BorderMode;\n\n /**\n * Additional container styles.\n */\n containerStyles?: CSSProperties;\n\n /**\n * ARIA roles used in the grid.\n */\n ariaRoles: AriaRoles;\n\n /**\n * Whether resizeable columns are enabled or not.\n */\n enableResizeableColumns: boolean;\n\n /**\n * Density of the grid.\n */\n density: keyof SizeScale;\n\n /**\n * The TanStack Table instance.\n */\n table: Table<any>;\n\n /**\n * Child elements (table contents).\n */\n children: ReactNode;\n };\n\nconst gridContainerClassname = buildClassnames([styles.dataGridStyle, 'data-grid']);\n\n/**\n * The Grid container, which includes a wrapper and the table element itself. Controls table layout, applies\n * styling and sets table-specific CSS variables (such as density).\n */\nexport const GridContainer = ({\n containerRef,\n tableRef,\n borderMode,\n containerStyles,\n ariaRoles,\n enableResizeableColumns,\n density,\n table,\n children,\n id,\n className,\n 'aria-label': ariaLabel,\n}: GridContainerProps) => {\n const { pinnedColumnLayoutStyles } = usePinnedColumnLayout({ table });\n const { scrollPosition, onScroll, enableTransition } = useScrollPosition({ containerRef });\n\n // CSS variables to control pinned column shadow visibility\n const hideShadows = !scrollPosition || scrollPosition === 'none';\n const shadowVisibility = {\n '--pinned-left-shadow-opacity': hideShadows || scrollPosition === 'start' ? 0 : 1,\n '--pinned-right-shadow-opacity': hideShadows || scrollPosition === 'end' ? 0 : 1,\n '--pinned-shadow-transition-duration': enableTransition ? '0.3s' : '0s',\n };\n\n return (\n <Container\n ref={containerRef}\n borderMode={borderMode}\n style={containerStyles}\n onScroll={onScroll}\n >\n <table\n id={id}\n ref={tableRef}\n className={buildClassnames([gridContainerClassname, className])}\n role={ariaRoles.table}\n style={\n {\n tableLayout: enableResizeableColumns ? 'fixed' : 'auto',\n '--density': theme.sizes[density],\n ...pinnedColumnLayoutStyles,\n ...shadowVisibility,\n } as CSSProperties\n }\n aria-colcount={table.getFlatHeaders().length}\n aria-rowcount={table.getRowCount()}\n aria-label={ariaLabel}\n >\n {children}\n </table>\n </Container>\n );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;;;;;AAgEA,MAAM,sBAAsB,GAAG,eAAe,CAAC,CAAC,MAAM,CAAC,aAAa,EAAE,WAAW,CAAC,CAAC;AAEnF;;;AAGG;AACI,MAAM,aAAa,GAAG,CAAC,EAC5B,YAAY,EACZ,QAAQ,EACR,UAAU,EACV,eAAe,EACf,SAAS,EACT,uBAAuB,EACvB,OAAO,EACP,KAAK,EACL,QAAQ,EACR,EAAE,EACF,SAAS,EACT,YAAY,EAAE,SAAS,GACJ,KAAI;IACvB,MAAM,EAAE,wBAAwB,EAAE,GAAG,qBAAqB,CAAC,EAAE,KAAK,EAAE,CAAC;AACrE,IAAA,MAAM,EAAE,cAAc,EAAE,QAAQ,EAAE,gBAAgB,EAAE,GAAG,iBAAiB,CAAC,EAAE,YAAY,EAAE,CAAC;;IAG1F,MAAM,WAAW,GAAG,CAAC,cAAc,IAAI,cAAc,KAAK,MAAM;AAChE,IAAA,MAAM,gBAAgB,GAAG;AACvB,QAAA,8BAA8B,EAAE,WAAW,IAAI,cAAc,KAAK,OAAO,GAAG,CAAC,GAAG,CAAC;AACjF,QAAA,+BAA+B,EAAE,WAAW,IAAI,cAAc,KAAK,KAAK,GAAG,CAAC,GAAG,CAAC;QAChF,qCAAqC,EAAE,gBAAgB,GAAG,MAAM,GAAG,IAAI;KACxE;AAED,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,SAAS,IACR,GAAG,EAAE,YAAY,EACjB,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,eAAe,EACtB,QAAQ,EAAE,QAAQ,EAAA;QAElBA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EACE,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,eAAe,CAAC,CAAC,sBAAsB,EAAE,SAAS,CAAC,CAAC,EAC/D,IAAI,EAAE,SAAS,CAAC,KAAK,EACrB,KAAK,EACH;gBACE,WAAW,EAAE,uBAAuB,GAAG,OAAO,GAAG,MAAM;AACvD,gBAAA,WAAW,EAAE,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC;AACjC,gBAAA,GAAG,wBAAwB;AAC3B,gBAAA,GAAG,gBAAgB;AACH,aAAA,EAAA,eAAA,EAEL,KAAK,CAAC,cAAc,EAAE,CAAC,MAAM,mBAC7B,KAAK,CAAC,WAAW,EAAE,gBACtB,SAAS,EAAA,EAEpB,QAAQ,CACH,CACE;AAEhB;;;;"}
|
|
@@ -12,7 +12,6 @@ require('../../../../../theme/modules/sizes.cjs');
|
|
|
12
12
|
require('../../../../../theme/modules/text.cjs');
|
|
13
13
|
require('styled-components');
|
|
14
14
|
require('framer-motion');
|
|
15
|
-
require('../../../../Tooltip/components/styled.cjs');
|
|
16
15
|
require('../../../../Tooltip/components/TooltipPopover.cjs');
|
|
17
16
|
require('react-dom');
|
|
18
17
|
require('../../../../Text/Text.cjs');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HeaderCell.cjs","sources":["../../../../../../src/components/DataGrid/components/Header/HeaderCell/HeaderCell.tsx"],"sourcesContent":["import React, { CSSProperties } from 'react';\n\nimport { flexRender, Header, SortDirection, Table } from '@tanstack/react-table';\n\nimport { buildClassnames } from '../../../../../utils';\n\nimport { usePinnedColumnStyles } from '../../../hooks';\nimport { isLastColumn } from '../../../utils';\n\nimport { Resizer } from '../Resizer';\nimport styles from './HeaderCell.module.scss';\n\nimport { SortIcon } from './SortIcon';\n\ntype HeaderCellProps = {\n /**\n * The TanStack Table instance.\n */\n table: Table<any>;\n\n /**\n * The Header within the TanStack Table instance.\n */\n header: Header<any, any>;\n\n /**\n * The index of this header in the grid.\n */\n index: number;\n};\n\nconst getAriaSort = (sortDirection: false | SortDirection) => {\n if (!sortDirection) {\n return undefined;\n }\n\n return sortDirection === 'asc' ? 'ascending' : 'descending';\n};\n\n/**\n * A header cell within the DataGrid component. Responsible for rendering the column header and resize bar,\n * if resizing is enabled.\n */\nexport const HeaderCell = ({ table, header, index }: HeaderCellProps) => {\n const { justifyContent, textAlign, getAriaLabel } = header.column.columnDef.meta!;\n const headerRenderer = header.column.columnDef.header;\n\n const sortable = table.options.enableSorting && header.column.getCanSort();\n const isSorted = header.column.getIsSorted();\n const ariaSort = getAriaSort(isSorted);\n\n const resizeable =\n table.options.enableColumnResizing &&\n header.column.getCanResize() &&\n !isLastColumn(table, header.column); // Last column can't be resized since it occupies all remaining space.\n\n const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({\n column: header.column,\n });\n\n const headerCellClassname = buildClassnames([\n styles.headerCell,\n pinnedCellClassName,\n 'data-grid-header-cell',\n ]);\n\n const HeaderContents = flexRender(headerRenderer, header.getContext());\n const HeaderContentComponent = sortable ? 'button' : 'div';\n const headerContentClassname = buildClassnames([\n sortable ? styles.clickableHeaderContent : styles.headerContent,\n 'data-grid-header-content',\n ]);\n const headerContentProps = {\n justifyContent,\n textAlign,\n } as CSSProperties;\n\n return (\n <th\n className={headerCellClassname}\n role=\"columnheader\"\n scope=\"col\"\n aria-colindex={index + 1}\n aria-label={getAriaLabel?.()}\n style={pinnedCellStyles}\n aria-sort={ariaSort}\n >\n {/* Header content */}\n <HeaderContentComponent\n className={headerContentClassname}\n style={headerContentProps}\n onClick={sortable ? header.column.getToggleSortingHandler() : undefined}\n >\n {/* If we've been given just text to render, apply styles for text overflow */}\n {typeof headerRenderer === 'string' ? (\n <span className={styles.headerOverflow}>{HeaderContents}</span>\n ) : (\n HeaderContents\n )}\n\n {sortable && <SortIcon isSorted={isSorted} />}\n </HeaderContentComponent>\n\n {/* Column resizer */}\n {resizeable && (\n <Resizer\n getIsResizing={header.column.getIsResizing}\n getResizeHandler={header.getResizeHandler()}\n resetSize={header.column.resetSize}\n deltaOffset={\n table.options.columnResizeMode === 'onChange'\n ? null\n : table.getState().columnSizingInfo.deltaOffset\n }\n />\n )}\n </th>\n );\n};\n"],"names":["isLastColumn","usePinnedColumnStyles","buildClassnames","styles","flexRender","React","SortIcon","Resizer"],"mappings":"
|
|
1
|
+
{"version":3,"file":"HeaderCell.cjs","sources":["../../../../../../src/components/DataGrid/components/Header/HeaderCell/HeaderCell.tsx"],"sourcesContent":["import React, { CSSProperties } from 'react';\n\nimport { flexRender, Header, SortDirection, Table } from '@tanstack/react-table';\n\nimport { buildClassnames } from '../../../../../utils';\n\nimport { usePinnedColumnStyles } from '../../../hooks';\nimport { isLastColumn } from '../../../utils';\n\nimport { Resizer } from '../Resizer';\nimport styles from './HeaderCell.module.scss';\n\nimport { SortIcon } from './SortIcon';\n\ntype HeaderCellProps = {\n /**\n * The TanStack Table instance.\n */\n table: Table<any>;\n\n /**\n * The Header within the TanStack Table instance.\n */\n header: Header<any, any>;\n\n /**\n * The index of this header in the grid.\n */\n index: number;\n};\n\nconst getAriaSort = (sortDirection: false | SortDirection) => {\n if (!sortDirection) {\n return undefined;\n }\n\n return sortDirection === 'asc' ? 'ascending' : 'descending';\n};\n\n/**\n * A header cell within the DataGrid component. Responsible for rendering the column header and resize bar,\n * if resizing is enabled.\n */\nexport const HeaderCell = ({ table, header, index }: HeaderCellProps) => {\n const { justifyContent, textAlign, getAriaLabel } = header.column.columnDef.meta!;\n const headerRenderer = header.column.columnDef.header;\n\n const sortable = table.options.enableSorting && header.column.getCanSort();\n const isSorted = header.column.getIsSorted();\n const ariaSort = getAriaSort(isSorted);\n\n const resizeable =\n table.options.enableColumnResizing &&\n header.column.getCanResize() &&\n !isLastColumn(table, header.column); // Last column can't be resized since it occupies all remaining space.\n\n const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({\n column: header.column,\n });\n\n const headerCellClassname = buildClassnames([\n styles.headerCell,\n pinnedCellClassName,\n 'data-grid-header-cell',\n ]);\n\n const HeaderContents = flexRender(headerRenderer, header.getContext());\n const HeaderContentComponent = sortable ? 'button' : 'div';\n const headerContentClassname = buildClassnames([\n sortable ? styles.clickableHeaderContent : styles.headerContent,\n 'data-grid-header-content',\n ]);\n const headerContentProps = {\n justifyContent,\n textAlign,\n } as CSSProperties;\n\n return (\n <th\n className={headerCellClassname}\n role=\"columnheader\"\n scope=\"col\"\n aria-colindex={index + 1}\n aria-label={getAriaLabel?.()}\n style={pinnedCellStyles}\n aria-sort={ariaSort}\n >\n {/* Header content */}\n <HeaderContentComponent\n className={headerContentClassname}\n style={headerContentProps}\n onClick={sortable ? header.column.getToggleSortingHandler() : undefined}\n >\n {/* If we've been given just text to render, apply styles for text overflow */}\n {typeof headerRenderer === 'string' ? (\n <span className={styles.headerOverflow}>{HeaderContents}</span>\n ) : (\n HeaderContents\n )}\n\n {sortable && <SortIcon isSorted={isSorted} />}\n </HeaderContentComponent>\n\n {/* Column resizer */}\n {resizeable && (\n <Resizer\n getIsResizing={header.column.getIsResizing}\n getResizeHandler={header.getResizeHandler()}\n resetSize={header.column.resetSize}\n deltaOffset={\n table.options.columnResizeMode === 'onChange'\n ? null\n : table.getState().columnSizingInfo.deltaOffset\n }\n />\n )}\n </th>\n );\n};\n"],"names":["isLastColumn","usePinnedColumnStyles","buildClassnames","styles","flexRender","React","SortIcon","Resizer"],"mappings":"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"}
|
|
@@ -10,7 +10,6 @@ import '../../../../../theme/modules/sizes.js';
|
|
|
10
10
|
import '../../../../../theme/modules/text.js';
|
|
11
11
|
import 'styled-components';
|
|
12
12
|
import 'framer-motion';
|
|
13
|
-
import '../../../../Tooltip/components/styled.js';
|
|
14
13
|
import '../../../../Tooltip/components/TooltipPopover.js';
|
|
15
14
|
import 'react-dom';
|
|
16
15
|
import '../../../../Text/Text.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HeaderCell.js","sources":["../../../../../../src/components/DataGrid/components/Header/HeaderCell/HeaderCell.tsx"],"sourcesContent":["import React, { CSSProperties } from 'react';\n\nimport { flexRender, Header, SortDirection, Table } from '@tanstack/react-table';\n\nimport { buildClassnames } from '../../../../../utils';\n\nimport { usePinnedColumnStyles } from '../../../hooks';\nimport { isLastColumn } from '../../../utils';\n\nimport { Resizer } from '../Resizer';\nimport styles from './HeaderCell.module.scss';\n\nimport { SortIcon } from './SortIcon';\n\ntype HeaderCellProps = {\n /**\n * The TanStack Table instance.\n */\n table: Table<any>;\n\n /**\n * The Header within the TanStack Table instance.\n */\n header: Header<any, any>;\n\n /**\n * The index of this header in the grid.\n */\n index: number;\n};\n\nconst getAriaSort = (sortDirection: false | SortDirection) => {\n if (!sortDirection) {\n return undefined;\n }\n\n return sortDirection === 'asc' ? 'ascending' : 'descending';\n};\n\n/**\n * A header cell within the DataGrid component. Responsible for rendering the column header and resize bar,\n * if resizing is enabled.\n */\nexport const HeaderCell = ({ table, header, index }: HeaderCellProps) => {\n const { justifyContent, textAlign, getAriaLabel } = header.column.columnDef.meta!;\n const headerRenderer = header.column.columnDef.header;\n\n const sortable = table.options.enableSorting && header.column.getCanSort();\n const isSorted = header.column.getIsSorted();\n const ariaSort = getAriaSort(isSorted);\n\n const resizeable =\n table.options.enableColumnResizing &&\n header.column.getCanResize() &&\n !isLastColumn(table, header.column); // Last column can't be resized since it occupies all remaining space.\n\n const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({\n column: header.column,\n });\n\n const headerCellClassname = buildClassnames([\n styles.headerCell,\n pinnedCellClassName,\n 'data-grid-header-cell',\n ]);\n\n const HeaderContents = flexRender(headerRenderer, header.getContext());\n const HeaderContentComponent = sortable ? 'button' : 'div';\n const headerContentClassname = buildClassnames([\n sortable ? styles.clickableHeaderContent : styles.headerContent,\n 'data-grid-header-content',\n ]);\n const headerContentProps = {\n justifyContent,\n textAlign,\n } as CSSProperties;\n\n return (\n <th\n className={headerCellClassname}\n role=\"columnheader\"\n scope=\"col\"\n aria-colindex={index + 1}\n aria-label={getAriaLabel?.()}\n style={pinnedCellStyles}\n aria-sort={ariaSort}\n >\n {/* Header content */}\n <HeaderContentComponent\n className={headerContentClassname}\n style={headerContentProps}\n onClick={sortable ? header.column.getToggleSortingHandler() : undefined}\n >\n {/* If we've been given just text to render, apply styles for text overflow */}\n {typeof headerRenderer === 'string' ? (\n <span className={styles.headerOverflow}>{HeaderContents}</span>\n ) : (\n HeaderContents\n )}\n\n {sortable && <SortIcon isSorted={isSorted} />}\n </HeaderContentComponent>\n\n {/* Column resizer */}\n {resizeable && (\n <Resizer\n getIsResizing={header.column.getIsResizing}\n getResizeHandler={header.getResizeHandler()}\n resetSize={header.column.resetSize}\n deltaOffset={\n table.options.columnResizeMode === 'onChange'\n ? null\n : table.getState().columnSizingInfo.deltaOffset\n }\n />\n )}\n </th>\n );\n};\n"],"names":["React"],"mappings":"
|
|
1
|
+
{"version":3,"file":"HeaderCell.js","sources":["../../../../../../src/components/DataGrid/components/Header/HeaderCell/HeaderCell.tsx"],"sourcesContent":["import React, { CSSProperties } from 'react';\n\nimport { flexRender, Header, SortDirection, Table } from '@tanstack/react-table';\n\nimport { buildClassnames } from '../../../../../utils';\n\nimport { usePinnedColumnStyles } from '../../../hooks';\nimport { isLastColumn } from '../../../utils';\n\nimport { Resizer } from '../Resizer';\nimport styles from './HeaderCell.module.scss';\n\nimport { SortIcon } from './SortIcon';\n\ntype HeaderCellProps = {\n /**\n * The TanStack Table instance.\n */\n table: Table<any>;\n\n /**\n * The Header within the TanStack Table instance.\n */\n header: Header<any, any>;\n\n /**\n * The index of this header in the grid.\n */\n index: number;\n};\n\nconst getAriaSort = (sortDirection: false | SortDirection) => {\n if (!sortDirection) {\n return undefined;\n }\n\n return sortDirection === 'asc' ? 'ascending' : 'descending';\n};\n\n/**\n * A header cell within the DataGrid component. Responsible for rendering the column header and resize bar,\n * if resizing is enabled.\n */\nexport const HeaderCell = ({ table, header, index }: HeaderCellProps) => {\n const { justifyContent, textAlign, getAriaLabel } = header.column.columnDef.meta!;\n const headerRenderer = header.column.columnDef.header;\n\n const sortable = table.options.enableSorting && header.column.getCanSort();\n const isSorted = header.column.getIsSorted();\n const ariaSort = getAriaSort(isSorted);\n\n const resizeable =\n table.options.enableColumnResizing &&\n header.column.getCanResize() &&\n !isLastColumn(table, header.column); // Last column can't be resized since it occupies all remaining space.\n\n const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({\n column: header.column,\n });\n\n const headerCellClassname = buildClassnames([\n styles.headerCell,\n pinnedCellClassName,\n 'data-grid-header-cell',\n ]);\n\n const HeaderContents = flexRender(headerRenderer, header.getContext());\n const HeaderContentComponent = sortable ? 'button' : 'div';\n const headerContentClassname = buildClassnames([\n sortable ? styles.clickableHeaderContent : styles.headerContent,\n 'data-grid-header-content',\n ]);\n const headerContentProps = {\n justifyContent,\n textAlign,\n } as CSSProperties;\n\n return (\n <th\n className={headerCellClassname}\n role=\"columnheader\"\n scope=\"col\"\n aria-colindex={index + 1}\n aria-label={getAriaLabel?.()}\n style={pinnedCellStyles}\n aria-sort={ariaSort}\n >\n {/* Header content */}\n <HeaderContentComponent\n className={headerContentClassname}\n style={headerContentProps}\n onClick={sortable ? header.column.getToggleSortingHandler() : undefined}\n >\n {/* If we've been given just text to render, apply styles for text overflow */}\n {typeof headerRenderer === 'string' ? (\n <span className={styles.headerOverflow}>{HeaderContents}</span>\n ) : (\n HeaderContents\n )}\n\n {sortable && <SortIcon isSorted={isSorted} />}\n </HeaderContentComponent>\n\n {/* Column resizer */}\n {resizeable && (\n <Resizer\n getIsResizing={header.column.getIsResizing}\n getResizeHandler={header.getResizeHandler()}\n resetSize={header.column.resetSize}\n deltaOffset={\n table.options.columnResizeMode === 'onChange'\n ? null\n : table.getState().columnSizingInfo.deltaOffset\n }\n />\n )}\n </th>\n );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;;;;;;;AA+BA,MAAM,WAAW,GAAG,CAAC,aAAoC,KAAI;IAC3D,IAAI,CAAC,aAAa,EAAE;AAClB,QAAA,OAAO,SAAS;AACjB,IAAA;IAED,OAAO,aAAa,KAAK,KAAK,GAAG,WAAW,GAAG,YAAY;AAC7D,CAAC;AAED;;;AAGG;AACI,MAAM,UAAU,GAAG,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAmB,KAAI;AACtE,IAAA,MAAM,EAAE,cAAc,EAAE,SAAS,EAAE,YAAY,EAAE,GAAG,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,IAAK;IACjF,MAAM,cAAc,GAAG,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,MAAM;AAErD,IAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,OAAO,CAAC,aAAa,IAAI,MAAM,CAAC,MAAM,CAAC,UAAU,EAAE;IAC1E,MAAM,QAAQ,GAAG,MAAM,CAAC,MAAM,CAAC,WAAW,EAAE;AAC5C,IAAA,MAAM,QAAQ,GAAG,WAAW,CAAC,QAAQ,CAAC;AAEtC,IAAA,MAAM,UAAU,GACd,KAAK,CAAC,OAAO,CAAC,oBAAoB;AAClC,QAAA,MAAM,CAAC,MAAM,CAAC,YAAY,EAAE;QAC5B,CAAC,YAAY,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;AAEtC,IAAA,MAAM,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,GAAG,qBAAqB,CAAC;QACtE,MAAM,EAAE,MAAM,CAAC,MAAM;AACtB,KAAA,CAAC;IAEF,MAAM,mBAAmB,GAAG,eAAe,CAAC;AAC1C,QAAA,MAAM,CAAC,UAAU;QACjB,mBAAmB;QACnB,uBAAuB;AACxB,KAAA,CAAC;IAEF,MAAM,cAAc,GAAG,UAAU,CAAC,cAAc,EAAE,MAAM,CAAC,UAAU,EAAE,CAAC;IACtE,MAAM,sBAAsB,GAAG,QAAQ,GAAG,QAAQ,GAAG,KAAK;IAC1D,MAAM,sBAAsB,GAAG,eAAe,CAAC;QAC7C,QAAQ,GAAG,MAAM,CAAC,sBAAsB,GAAG,MAAM,CAAC,aAAa;QAC/D,0BAA0B;AAC3B,KAAA,CAAC;AACF,IAAA,MAAM,kBAAkB,GAAG;QACzB,cAAc;QACd,SAAS;KACO;AAElB,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EACE,SAAS,EAAE,mBAAmB,EAC9B,IAAI,EAAC,cAAc,EACnB,KAAK,EAAC,KAAK,EAAA,eAAA,EACI,KAAK,GAAG,CAAC,EAAA,YAAA,EACZ,YAAY,KAAA,IAAA,IAAZ,YAAY,KAAA,MAAA,GAAA,MAAA,GAAZ,YAAY,EAAI,EAC5B,KAAK,EAAE,gBAAgB,eACZ,QAAQ,EAAA;QAGnBA,cAAA,CAAA,aAAA,CAAC,sBAAsB,EAAA,EACrB,SAAS,EAAE,sBAAsB,EACjC,KAAK,EAAE,kBAAkB,EACzB,OAAO,EAAE,QAAQ,GAAG,MAAM,CAAC,MAAM,CAAC,uBAAuB,EAAE,GAAG,SAAS,EAAA;YAGtE,OAAO,cAAc,KAAK,QAAQ,IACjCA,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,MAAM,CAAC,cAAc,EAAA,EAAG,cAAc,CAAQ,KAE/D,cAAc,CACf;YAEA,QAAQ,IAAIA,6BAAC,QAAQ,EAAA,EAAC,QAAQ,EAAE,QAAQ,GAAI,CACtB;AAGxB,QAAA,UAAU,KACTA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EACN,aAAa,EAAE,MAAM,CAAC,MAAM,CAAC,aAAa,EAC1C,gBAAgB,EAAE,MAAM,CAAC,gBAAgB,EAAE,EAC3C,SAAS,EAAE,MAAM,CAAC,MAAM,CAAC,SAAS,EAClC,WAAW,EACT,KAAK,CAAC,OAAO,CAAC,gBAAgB,KAAK;AACjC,kBAAE;AACF,kBAAE,KAAK,CAAC,QAAQ,EAAE,CAAC,gBAAgB,CAAC,WAAW,EAAA,CAEnD,CACH,CACE;AAET;;;;"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
|
|
4
|
+
|
|
5
|
+
___$insertStyle("._dropdownContainer_5j8e6_1 {\n display: inline-flex;\n flex-direction: column;\n overflow: hidden;\n position: relative;\n box-sizing: border-box;\n background-color: white;\n border: var(--sizes-line) solid var(--colors-neutral-grey-base);\n box-shadow: var(--shadows-md);\n border-radius: var(--radius-base);\n padding: var(--sizes-base);\n}");
|
|
6
|
+
var dropdownStyles = {"dropdownContainer":"_dropdownContainer_5j8e6_1"};
|
|
7
|
+
|
|
8
|
+
module.exports = dropdownStyles;
|
|
9
|
+
//# sourceMappingURL=Dropdown.module.scss.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Dropdown.module.scss.cjs","sources":["../../../src/components/Dropdown/Dropdown.module.scss"],"sourcesContent":[".dropdownContainer {\n display: inline-flex;\n flex-direction: column;\n overflow: hidden;\n position: relative;\n box-sizing: border-box;\n background-color: white;\n border: var(--sizes-line) solid var(--colors-neutral-grey-base);\n box-shadow: var(--shadows-md);\n border-radius: var(--radius-base);\n padding: var(--sizes-base);\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,oWAAA;AACA,qBAAA,CAAA,mBAAA,CAAA,4BAAA;;;;"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import insertStyle from '../../_virtual/____insertStyle.js';
|
|
2
|
+
|
|
3
|
+
insertStyle("._dropdownContainer_5j8e6_1 {\n display: inline-flex;\n flex-direction: column;\n overflow: hidden;\n position: relative;\n box-sizing: border-box;\n background-color: white;\n border: var(--sizes-line) solid var(--colors-neutral-grey-base);\n box-shadow: var(--shadows-md);\n border-radius: var(--radius-base);\n padding: var(--sizes-base);\n}");
|
|
4
|
+
var dropdownStyles = {"dropdownContainer":"_dropdownContainer_5j8e6_1"};
|
|
5
|
+
|
|
6
|
+
export { dropdownStyles as default };
|
|
7
|
+
//# sourceMappingURL=Dropdown.module.scss.js.map
|