@popsure/dirty-swan 0.66.24 → 0.66.26
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/cjs/index.d.ts +1 -1
- package/dist/cjs/index.js +59 -5
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/lib/components/table/utils/useTableNavigation/useTableNavigation.d.ts +3 -1
- package/dist/cjs/lib/context.d.ts +13 -0
- package/dist/cjs/lib/context.test.d.ts +1 -0
- package/dist/cjs/lib/index.d.ts +2 -1
- package/dist/esm/components/modal/bottomModal/index.js +1 -0
- package/dist/esm/components/modal/bottomModal/index.js.map +1 -1
- package/dist/esm/components/modal/bottomOrRegularModal/index.js +1 -0
- package/dist/esm/components/modal/bottomOrRegularModal/index.js.map +1 -1
- package/dist/esm/components/modal/fullScreenModal/index.js +1 -0
- package/dist/esm/components/modal/fullScreenModal/index.js.map +1 -1
- package/dist/esm/components/modal/genericModal/index.js +2 -0
- package/dist/esm/components/modal/genericModal/index.js.map +1 -1
- package/dist/esm/components/modal/index.stories.js +1 -0
- package/dist/esm/components/modal/index.stories.js.map +1 -1
- package/dist/esm/components/modal/regularModal/index.js +1 -0
- package/dist/esm/components/modal/regularModal/index.js.map +1 -1
- package/dist/esm/components/table/Table.js +5 -3
- package/dist/esm/components/table/Table.js.map +1 -1
- package/dist/esm/components/table/Table.stories.js +2 -1
- package/dist/esm/components/table/Table.stories.js.map +1 -1
- package/dist/esm/components/table/Table.test.js +43 -3
- package/dist/esm/components/table/Table.test.js.map +1 -1
- package/dist/esm/components/table/utils/useTableNavigation/useTableNavigation.test.js +51 -1
- package/dist/esm/components/table/utils/useTableNavigation/useTableNavigation.test.js.map +1 -1
- package/dist/esm/context.js +39 -0
- package/dist/esm/context.js.map +1 -0
- package/dist/esm/context.stories.js +67 -0
- package/dist/esm/context.stories.js.map +1 -0
- package/dist/esm/context.test.js +58 -0
- package/dist/esm/context.test.js.map +1 -0
- package/dist/esm/index.d.ts +1 -1
- package/dist/esm/index.js +2 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/lib/components/table/utils/useTableNavigation/useTableNavigation.d.ts +3 -1
- package/dist/esm/lib/context.d.ts +13 -0
- package/dist/esm/lib/context.test.d.ts +1 -0
- package/dist/esm/lib/index.d.ts +2 -1
- package/dist/esm/{useTableNavigation-CrxoXTVd.js → useTableNavigation-C-vb2BxI.js} +20 -5
- package/dist/esm/useTableNavigation-C-vb2BxI.js.map +1 -0
- package/package.json +1 -1
- package/src/index.tsx +3 -0
- package/src/lib/components/modal/genericModal/index.tsx +2 -0
- package/src/lib/components/table/Table.test.tsx +64 -0
- package/src/lib/components/table/Table.tsx +5 -5
- package/src/lib/components/table/utils/useTableNavigation/useTableNavigation.test.tsx +58 -0
- package/src/lib/components/table/utils/useTableNavigation/useTableNavigation.ts +25 -3
- package/src/lib/context.stories.tsx +136 -0
- package/src/lib/context.test.tsx +88 -0
- package/src/lib/context.tsx +60 -0
- package/src/lib/index.tsx +4 -0
- package/dist/esm/useTableNavigation-CrxoXTVd.js.map +0 -1
package/dist/cjs/index.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
export { Accordion, DateSelector, SignaturePad, AutocompleteAddress, Input, MultiDropzone, IbanInput, CurrencyInput, BottomModal, RegularModal, BottomOrRegularModal, FullScreenModal, InfoCard, CardButton, Card, Button, AutoSuggestMultiSelect, Chip, AutoSuggestInput, ComparisonTable, TableRating, TableTrueFalse, TableRowHeader, TableButton, TableInfoButton, SegmentedControl, DownloadButton, Checkbox, Radio, Link, InformationBox, Badge, images, illustrations, Spinner, Table, Toggle, Toaster, toast, useEscapeKey, useFocusWithin, useMediaQuery, useOnClickOutside, LogoColor, LogoWhite, LogoBlack, LogoOrangeBox, LogoInvertedColor, LogoInverted, LogoPositiveColor, LogoPositiveBlack, SearchableDropdown, } from './lib';
|
|
1
|
+
export { Accordion, DateSelector, SignaturePad, AutocompleteAddress, Input, MultiDropzone, IbanInput, CurrencyInput, BottomModal, RegularModal, BottomOrRegularModal, FullScreenModal, InfoCard, CardButton, Card, Button, AutoSuggestMultiSelect, Chip, AutoSuggestInput, ComparisonTable, TableRating, TableTrueFalse, TableRowHeader, TableButton, TableInfoButton, SegmentedControl, DownloadButton, Checkbox, Radio, Link, InformationBox, Badge, images, illustrations, Spinner, Table, Toggle, Toaster, toast, useEscapeKey, useFocusWithin, useMediaQuery, useOnClickOutside, LogoColor, LogoWhite, LogoBlack, LogoOrangeBox, LogoInvertedColor, LogoInverted, LogoPositiveColor, LogoPositiveBlack, SearchableDropdown, DirtySwanProvider, useDirtySwan, useModalTrack, } from './lib';
|
|
2
2
|
export * from './lib/components/icon';
|
|
3
3
|
export type { AccordionProps, BadgeProps, DownloadStatus, InformationBoxProps, InputProps, IllustrationKeys, FileType, MultiDropzoneProps, TableHeader, UploadedFile, UploadStatus, CardProps, IconWrapperProps, TableData, TableProps, SearchableDropdownProps, SearchableDropdownOption, } from './lib';
|
package/dist/cjs/index.js
CHANGED
|
@@ -14842,6 +14842,40 @@ var useOnClose = function (onClose, isOpen, dismissable) {
|
|
|
14842
14842
|
};
|
|
14843
14843
|
};
|
|
14844
14844
|
|
|
14845
|
+
var DirtySwanContext = React.createContext(null);
|
|
14846
|
+
var DirtySwanProvider = function (_a) {
|
|
14847
|
+
var children = _a.children, onModalChange = _a.onModalChange;
|
|
14848
|
+
var countRef = React.useRef(0);
|
|
14849
|
+
var onModalChangeRef = React.useRef(onModalChange);
|
|
14850
|
+
onModalChangeRef.current = onModalChange;
|
|
14851
|
+
var onModalOpen = React.useCallback(function () {
|
|
14852
|
+
var _a;
|
|
14853
|
+
countRef.current += 1;
|
|
14854
|
+
if (countRef.current === 1) {
|
|
14855
|
+
(_a = onModalChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onModalChangeRef, true);
|
|
14856
|
+
}
|
|
14857
|
+
}, []);
|
|
14858
|
+
var onModalClose = React.useCallback(function () {
|
|
14859
|
+
var _a;
|
|
14860
|
+
countRef.current -= 1;
|
|
14861
|
+
if (countRef.current === 0) {
|
|
14862
|
+
(_a = onModalChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onModalChangeRef, false);
|
|
14863
|
+
}
|
|
14864
|
+
}, []);
|
|
14865
|
+
var value = React.useMemo(function () { return ({ onModalOpen: onModalOpen, onModalClose: onModalClose }); }, [onModalOpen, onModalClose]);
|
|
14866
|
+
return (jsxRuntime.jsx(DirtySwanContext.Provider, { value: value, children: children }));
|
|
14867
|
+
};
|
|
14868
|
+
var useDirtySwan = function () { return React.useContext(DirtySwanContext); };
|
|
14869
|
+
var useModalTrack = function (isVisible) {
|
|
14870
|
+
var dirtySwan = useDirtySwan();
|
|
14871
|
+
React.useEffect(function () {
|
|
14872
|
+
if (!isVisible)
|
|
14873
|
+
return;
|
|
14874
|
+
dirtySwan === null || dirtySwan === void 0 ? void 0 : dirtySwan.onModalOpen();
|
|
14875
|
+
return function () { return dirtySwan === null || dirtySwan === void 0 ? void 0 : dirtySwan.onModalClose(); };
|
|
14876
|
+
}, [isVisible, dirtySwan]);
|
|
14877
|
+
};
|
|
14878
|
+
|
|
14845
14879
|
var css_248z$y = "@keyframes style-module_fade-in__f_VRg {\n 0% {\n background-color: rgba(0, 0, 0, 0);\n visibility: hidden;\n }\n 100% {\n background-color: rgba(0, 0, 0, 0.3);\n visibility: visible;\n }\n}\n@keyframes style-module_fade-out__1tEwS {\n from {\n background-color: rgba(0, 0, 0, 0.3);\n visibility: visible;\n }\n to {\n background-color: rgba(0, 0, 0, 0);\n visibility: hidden;\n }\n}\n.style-module_overlay__2f00R {\n z-index: 1000;\n overflow: hidden;\n position: fixed;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n animation: style-module_fade-in__f_VRg 0.3s both;\n}\n.style-module_overlayClose__1p313 {\n animation-delay: 0.1s;\n animation: style-module_fade-out__1tEwS 0.3s both;\n}\n\n.style-module_header__284Rz {\n position: sticky;\n top: 0;\n}\n\n.style-module_closeButton__1AbX8 {\n width: 32px;\n height: 32px;\n padding: 0;\n}\n\n.style-module_body__QtlTn {\n flex-grow: 1;\n overflow: auto;\n background: linear-gradient(#fff 30%, #fff), linear-gradient(#fff, #fff 70%), linear-gradient(#e7e7ed 30%, #e7e7ed), linear-gradient(#e7e7ed, #e7e7ed 70%);\n background-repeat: no-repeat;\n background-size: 100% 1px;\n background-attachment: local, local, scroll, scroll;\n}\n\n.style-module_footer__Sh5bv {\n position: sticky;\n bottom: 0;\n border-top: 1px solid #e7e7ed;\n}";
|
|
14846
14880
|
var styles$x = {"overlay":"style-module_overlay__2f00R","overlayClose":"style-module_overlayClose__1p313","header":"style-module_header__284Rz","closeButton":"style-module_closeButton__1AbX8","body":"style-module_body__QtlTn","footer":"style-module_footer__Sh5bv"};
|
|
14847
14881
|
styleInject(css_248z$y);
|
|
@@ -17679,6 +17713,7 @@ var InnerModal = function (_a) {
|
|
|
17679
17713
|
var GenericModal = function (props) {
|
|
17680
17714
|
var isOpen = props.isOpen, onClose = props.onClose, _a = props.dismissible, dismissible = _a === void 0 ? true : _a;
|
|
17681
17715
|
var _b = useOnClose(onClose, isOpen, dismissible), isVisible = _b.isVisible, rest = __rest$1(_b, ["isVisible"]);
|
|
17716
|
+
useModalTrack(isVisible);
|
|
17682
17717
|
if (!isVisible) {
|
|
17683
17718
|
return null;
|
|
17684
17719
|
}
|
|
@@ -22949,8 +22984,17 @@ var TableContents = function (_a) {
|
|
|
22949
22984
|
};
|
|
22950
22985
|
|
|
22951
22986
|
var useTableNavigation = function (_a) {
|
|
22952
|
-
var enabled = _a.enabled, containerRef = _a.containerRef, onSelectionChanged = _a.onSelectionChanged;
|
|
22953
|
-
var
|
|
22987
|
+
var enabled = _a.enabled, containerRef = _a.containerRef, _b = _a.initialSection, initialSection = _b === void 0 ? 0 : _b, onSelectionChanged = _a.onSelectionChanged;
|
|
22988
|
+
var _c = React.useState(initialSection), activeSection = _c[0], setActiveSection = _c[1];
|
|
22989
|
+
var activeSectionRef = React.useRef(initialSection);
|
|
22990
|
+
var skipNextReportRef = React.useRef(false);
|
|
22991
|
+
var syncActiveSection = React.useCallback(function (section) {
|
|
22992
|
+
if (section === activeSectionRef.current) {
|
|
22993
|
+
return;
|
|
22994
|
+
}
|
|
22995
|
+
skipNextReportRef.current = true;
|
|
22996
|
+
setActiveSection(section);
|
|
22997
|
+
}, []);
|
|
22954
22998
|
var handleScrollToSection = function (increase) {
|
|
22955
22999
|
if (!enabled) {
|
|
22956
23000
|
return;
|
|
@@ -22977,10 +23021,15 @@ var useTableNavigation = function (_a) {
|
|
|
22977
23021
|
return container === null || container === void 0 ? void 0 : container.removeEventListener('scroll', handleTableScroll);
|
|
22978
23022
|
}, [enabled]);
|
|
22979
23023
|
React.useEffect(function () {
|
|
23024
|
+
activeSectionRef.current = activeSection;
|
|
23025
|
+
var skipReport = skipNextReportRef.current;
|
|
23026
|
+
skipNextReportRef.current = false;
|
|
22980
23027
|
if (!enabled) {
|
|
22981
23028
|
return;
|
|
22982
23029
|
}
|
|
22983
|
-
|
|
23030
|
+
if (!skipReport) {
|
|
23031
|
+
onSelectionChanged === null || onSelectionChanged === void 0 ? void 0 : onSelectionChanged(activeSection + 1);
|
|
23032
|
+
}
|
|
22984
23033
|
if (containerRef.current) {
|
|
22985
23034
|
var containerWidth = containerRef.current.getBoundingClientRect().width;
|
|
22986
23035
|
var cellWidth = containerWidth / 2;
|
|
@@ -22995,6 +23044,7 @@ var useTableNavigation = function (_a) {
|
|
|
22995
23044
|
activeSection: activeSection + 1,
|
|
22996
23045
|
navigateTable: handleScrollToSection,
|
|
22997
23046
|
setActiveSection: setActiveSection,
|
|
23047
|
+
syncActiveSection: syncActiveSection,
|
|
22998
23048
|
};
|
|
22999
23049
|
};
|
|
23000
23050
|
|
|
@@ -23088,8 +23138,9 @@ var Table = function (_a) {
|
|
|
23088
23138
|
var _s = useTableNavigation({
|
|
23089
23139
|
enabled: isMobile,
|
|
23090
23140
|
containerRef: containerRef,
|
|
23141
|
+
initialSection: externalActiveSection ? externalActiveSection - 1 : 0,
|
|
23091
23142
|
onSelectionChanged: onSelectionChanged,
|
|
23092
|
-
}), activeSection = _s.activeSection, navigateTable = _s.navigateTable, setActiveSection = _s.setActiveSection;
|
|
23143
|
+
}), activeSection = _s.activeSection, navigateTable = _s.navigateTable, setActiveSection = _s.setActiveSection, syncActiveSection = _s.syncActiveSection;
|
|
23093
23144
|
var headerRow = (_c = (_b = tableData === null || tableData === void 0 ? void 0 : tableData[0]) === null || _b === void 0 ? void 0 : _b.rows) === null || _c === void 0 ? void 0 : _c[0];
|
|
23094
23145
|
var titleCell = __assign({ text: '' }, ((headerRow === null || headerRow === void 0 ? void 0 : headerRow[0]) || {}));
|
|
23095
23146
|
var currentActiveSection = headerRow === null || headerRow === void 0 ? void 0 : headerRow[activeSection];
|
|
@@ -23116,7 +23167,7 @@ var Table = function (_a) {
|
|
|
23116
23167
|
}, []);
|
|
23117
23168
|
React.useEffect(function () {
|
|
23118
23169
|
if (externalActiveSection && externalActiveSection !== activeSection) {
|
|
23119
|
-
|
|
23170
|
+
syncActiveSection(externalActiveSection - 1);
|
|
23120
23171
|
}
|
|
23121
23172
|
}, [externalActiveSection]);
|
|
23122
23173
|
return (jsxRuntime.jsxs("div", { className: classNames(styles$6.wrapper, 'bg-white'), children: [isMobile ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!useTabs && (titleCell === null || titleCell === void 0 ? void 0 : titleCell.text) && (jsxRuntime.jsx(TableCell, __assign({}, titleCell, { align: "left", isNavigation: true, isTopLeftCell: true, type: undefined }))), !hideTableNavigation && currentActiveSection && (useTabs ? (jsxRuntime.jsx("div", { className: classNames('bg-white', styles$6.stickyHeader), style: { top: "".concat(stickyHeaderTopOffset, "px") }, children: jsxRuntime.jsx(Tabs, { tabs: mobileTabs, activeIndex: activeSection - 1, onTabChange: function (index) { return setActiveSection(index); }, className: "mb16" }) })) : (jsxRuntime.jsx(TableControls, { activeSection: activeSection, columnsLength: columnsLength, navigateTable: navigateTable, stickyHeaderTopOffset: stickyHeaderTopOffset, children: jsxRuntime.jsx(TableCell, __assign({}, (isBaseCell(currentActiveSection)
|
|
@@ -23334,6 +23385,7 @@ exports.DentalTreatmentToothIcon = DentalTreatmentTooth;
|
|
|
23334
23385
|
exports.DependentsFamilyAddIcon = DependentsFamilyAdd;
|
|
23335
23386
|
exports.DependentsFamilyIcon = DependentsFamily;
|
|
23336
23387
|
exports.DiabetesIcon = Diabetes;
|
|
23388
|
+
exports.DirtySwanProvider = DirtySwanProvider;
|
|
23337
23389
|
exports.DiscIcon = Disc;
|
|
23338
23390
|
exports.DoctorIcon = Doctor;
|
|
23339
23391
|
exports.DoctorStethoscopeIcon = DoctorStethoscope;
|
|
@@ -23634,8 +23686,10 @@ exports.ZoomOutIcon = ZoomOut;
|
|
|
23634
23686
|
exports.illustrations = illustrations;
|
|
23635
23687
|
exports.images = images;
|
|
23636
23688
|
exports.toast = toast;
|
|
23689
|
+
exports.useDirtySwan = useDirtySwan;
|
|
23637
23690
|
exports.useEscapeKey = useEscapeKey;
|
|
23638
23691
|
exports.useFocusWithin = useFocusWithin;
|
|
23639
23692
|
exports.useMediaQuery = useMediaQuery;
|
|
23693
|
+
exports.useModalTrack = useModalTrack;
|
|
23640
23694
|
exports.useOnClickOutside = useOnClickOutside;
|
|
23641
23695
|
//# sourceMappingURL=index.js.map
|