@laerdal/life-react-components 1.1.2-dev.8 → 1.2.1-dev.2
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/esm/Breadcrumb/Breadcrumb.js +96 -49
- package/dist/esm/Breadcrumb/Breadcrumb.js.map +1 -1
- package/dist/esm/Button/DualFunctionButton.js +0 -3
- package/dist/esm/Button/DualFunctionButton.js.map +1 -1
- package/dist/esm/Button/Iconbutton.js +6 -2
- package/dist/esm/Button/Iconbutton.js.map +1 -1
- package/dist/esm/Button/index.js +0 -1
- package/dist/esm/Button/index.js.map +1 -1
- package/dist/esm/Chips/ChoiceChips.js +1 -2
- package/dist/esm/Chips/ChoiceChips.js.map +1 -1
- package/dist/esm/Dropdown/BasicDropdown.js +11 -3
- package/dist/esm/Dropdown/BasicDropdown.js.map +1 -1
- package/dist/esm/Dropdown/CommonStyling.js +15 -13
- package/dist/esm/Dropdown/CommonStyling.js.map +1 -1
- package/dist/esm/Dropdown/DropdownButton.js +20 -8
- package/dist/esm/Dropdown/DropdownButton.js.map +1 -1
- package/dist/esm/Dropdown/DropdownContent.js +117 -31
- package/dist/esm/Dropdown/DropdownContent.js.map +1 -1
- package/dist/esm/GlobalNavigationBar/RightSideNav.js +4 -0
- package/dist/esm/GlobalNavigationBar/RightSideNav.js.map +1 -1
- package/dist/esm/List/ListRow.js +204 -90
- package/dist/esm/List/ListRow.js.map +1 -1
- package/dist/esm/List/__tests__/ListRow.tests.js +7 -43
- package/dist/esm/List/__tests__/ListRow.tests.js.map +1 -1
- package/dist/esm/List/index.js +1 -2
- package/dist/esm/List/index.js.map +1 -1
- package/dist/esm/Modals/ModalContainer.js +1 -0
- package/dist/esm/Modals/ModalContainer.js.map +1 -1
- package/dist/esm/Modals/ModalDialog.js +12 -3
- package/dist/esm/Modals/ModalDialog.js.map +1 -1
- package/dist/esm/Modals/ModalNote.js +56 -0
- package/dist/esm/Modals/ModalNote.js.map +1 -0
- package/dist/esm/Modals/ModalStyles.js +48 -0
- package/dist/esm/Modals/ModalStyles.js.map +1 -1
- package/dist/esm/NotificationDot/NotificationDot.js +41 -0
- package/dist/esm/NotificationDot/NotificationDot.js.map +1 -0
- package/dist/esm/NotificationDot/index.js +2 -0
- package/dist/esm/NotificationDot/index.js.map +1 -0
- package/dist/esm/Tabs/TabLink.js +25 -20
- package/dist/esm/Tabs/TabLink.js.map +1 -1
- package/dist/esm/Tabs/VerticalTabs.js +4 -1
- package/dist/esm/Tabs/VerticalTabs.js.map +1 -1
- package/dist/esm/Toggles/ToggleSwitch.js +14 -9
- package/dist/esm/Toggles/ToggleSwitch.js.map +1 -1
- package/dist/esm/Toggles/TogglerStyles.js +101 -74
- package/dist/esm/Toggles/TogglerStyles.js.map +1 -1
- package/dist/esm/Toggles/TogglerTypes.js +0 -4
- package/dist/esm/Toggles/TogglerTypes.js.map +1 -1
- package/dist/esm/Tooltips/TooltipStyles.js +77 -0
- package/dist/esm/Tooltips/TooltipStyles.js.map +1 -0
- package/dist/esm/Tooltips/TooltipTypes.js +6 -0
- package/dist/esm/Tooltips/TooltipTypes.js.map +1 -0
- package/dist/esm/Tooltips/TooltipWrapper.js +24 -0
- package/dist/esm/Tooltips/TooltipWrapper.js.map +1 -0
- package/dist/esm/Tooltips/index.js +4 -0
- package/dist/esm/Tooltips/index.js.map +1 -0
- package/dist/esm/icons/contenticons/ContentIcons.js +454 -322
- package/dist/esm/icons/contenticons/ContentIcons.js.map +1 -1
- package/dist/esm/icons/index.js +55 -24
- package/dist/esm/icons/index.js.map +1 -1
- package/dist/esm/icons/systemicons/SystemIcons.js +652 -488
- package/dist/esm/icons/systemicons/SystemIcons.js.map +1 -1
- package/dist/esm/index.js +1 -0
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/types.js +1 -0
- package/dist/esm/types.js.map +1 -1
- package/dist/js/Breadcrumb/Breadcrumb.d.ts +5 -2
- package/dist/js/Breadcrumb/Breadcrumb.js +94 -36
- package/dist/js/Breadcrumb/Breadcrumb.js.map +1 -1
- package/dist/js/Button/DualFunctionButton.d.ts +0 -1
- package/dist/js/Button/DualFunctionButton.js +0 -3
- package/dist/js/Button/DualFunctionButton.js.map +1 -1
- package/dist/js/Button/Iconbutton.js +2 -2
- package/dist/js/Button/Iconbutton.js.map +1 -1
- package/dist/js/Button/index.d.ts +0 -1
- package/dist/js/Button/index.js +0 -8
- package/dist/js/Button/index.js.map +1 -1
- package/dist/js/Chips/ChipTypes.d.ts +1 -0
- package/dist/js/Chips/ChoiceChips.js +1 -2
- package/dist/js/Chips/ChoiceChips.js.map +1 -1
- package/dist/js/Dropdown/BasicDropdown.d.ts +3 -2
- package/dist/js/Dropdown/BasicDropdown.js +18 -3
- package/dist/js/Dropdown/BasicDropdown.js.map +1 -1
- package/dist/js/Dropdown/CommonStyling.d.ts +1 -0
- package/dist/js/Dropdown/CommonStyling.js +12 -12
- package/dist/js/Dropdown/CommonStyling.js.map +1 -1
- package/dist/js/Dropdown/DropdownButton.d.ts +1 -1
- package/dist/js/Dropdown/DropdownButton.js +19 -9
- package/dist/js/Dropdown/DropdownButton.js.map +1 -1
- package/dist/js/Dropdown/DropdownButtonTypes.d.ts +1 -0
- package/dist/js/Dropdown/DropdownContent.d.ts +4 -1
- package/dist/js/Dropdown/DropdownContent.js +117 -38
- package/dist/js/Dropdown/DropdownContent.js.map +1 -1
- package/dist/js/GlobalNavigationBar/RightSideNav.js +1 -1
- package/dist/js/GlobalNavigationBar/RightSideNav.js.map +1 -1
- package/dist/js/List/ListRow.d.ts +12 -5
- package/dist/js/List/ListRow.js +77 -55
- package/dist/js/List/ListRow.js.map +1 -1
- package/dist/js/List/__tests__/ListRow.tests.js +8 -53
- package/dist/js/List/__tests__/ListRow.tests.js.map +1 -1
- package/dist/js/List/index.d.ts +1 -2
- package/dist/js/List/index.js +0 -8
- package/dist/js/List/index.js.map +1 -1
- package/dist/js/Modals/ModalContainer.js +1 -1
- package/dist/js/Modals/ModalContainer.js.map +1 -1
- package/dist/js/Modals/ModalDialog.d.ts +2 -0
- package/dist/js/Modals/ModalDialog.js +13 -3
- package/dist/js/Modals/ModalDialog.js.map +1 -1
- package/dist/js/Modals/ModalNote.d.ts +9 -0
- package/dist/js/Modals/ModalNote.js +79 -0
- package/dist/js/Modals/ModalNote.js.map +1 -0
- package/dist/js/Modals/ModalStyles.d.ts +6 -0
- package/dist/js/Modals/ModalStyles.js +58 -4
- package/dist/js/Modals/ModalStyles.js.map +1 -1
- package/dist/js/NotificationDot/NotificationDot.d.ts +8 -0
- package/dist/js/NotificationDot/NotificationDot.js +70 -0
- package/dist/js/NotificationDot/NotificationDot.js.map +1 -0
- package/dist/js/NotificationDot/index.d.ts +1 -0
- package/dist/js/NotificationDot/index.js +16 -0
- package/dist/js/NotificationDot/index.js.map +1 -0
- package/dist/js/Tabs/TabLink.d.ts +3 -1
- package/dist/js/Tabs/TabLink.js +26 -11
- package/dist/js/Tabs/TabLink.js.map +1 -1
- package/dist/js/Tabs/VerticalTabs.d.ts +1 -0
- package/dist/js/Tabs/VerticalTabs.js +4 -1
- package/dist/js/Tabs/VerticalTabs.js.map +1 -1
- package/dist/js/Toggles/ToggleSwitch.d.ts +1 -1
- package/dist/js/Toggles/ToggleSwitch.js +16 -8
- package/dist/js/Toggles/ToggleSwitch.js.map +1 -1
- package/dist/js/Toggles/TogglerStyles.d.ts +3 -0
- package/dist/js/Toggles/TogglerStyles.js +16 -6
- package/dist/js/Toggles/TogglerStyles.js.map +1 -1
- package/dist/js/Toggles/TogglerTypes.d.ts +2 -0
- package/dist/js/Toggles/TogglerTypes.js +0 -5
- package/dist/js/Toggles/TogglerTypes.js.map +1 -1
- package/dist/js/Tooltips/TooltipStyles.d.ts +10 -0
- package/dist/js/Tooltips/TooltipStyles.js +86 -0
- package/dist/js/Tooltips/TooltipStyles.js.map +1 -0
- package/dist/js/Tooltips/TooltipTypes.d.ts +14 -0
- package/dist/js/Tooltips/TooltipTypes.js +11 -0
- package/dist/js/Tooltips/TooltipTypes.js.map +1 -0
- package/dist/js/Tooltips/TooltipWrapper.d.ts +3 -0
- package/dist/js/Tooltips/TooltipWrapper.js +43 -0
- package/dist/js/Tooltips/TooltipWrapper.js.map +1 -0
- package/dist/js/Tooltips/index.d.ts +3 -0
- package/dist/js/Tooltips/index.js +30 -0
- package/dist/js/Tooltips/index.js.map +1 -0
- package/dist/js/icons/contenticons/ContentIcons.js +1513 -1381
- package/dist/js/icons/contenticons/ContentIcons.js.map +1 -1
- package/dist/js/icons/index.d.ts +2 -0
- package/dist/js/icons/index.js +68 -25
- package/dist/js/icons/index.js.map +1 -1
- package/dist/js/icons/systemicons/SystemIcons.js +652 -488
- package/dist/js/icons/systemicons/SystemIcons.js.map +1 -1
- package/dist/js/index.d.ts +1 -0
- package/dist/js/index.js +13 -0
- package/dist/js/index.js.map +1 -1
- package/dist/js/types.d.ts +1 -0
- package/dist/js/types.js +1 -0
- package/dist/js/types.js.map +1 -1
- package/dist/umd/Breadcrumb/Breadcrumb.js +97 -51
- package/dist/umd/Breadcrumb/Breadcrumb.js.map +1 -1
- package/dist/umd/Button/DualFunctionButton.js +10 -15
- package/dist/umd/Button/DualFunctionButton.js.map +1 -1
- package/dist/umd/Button/Iconbutton.js +6 -2
- package/dist/umd/Button/Iconbutton.js.map +1 -1
- package/dist/umd/Button/index.js +4 -10
- package/dist/umd/Button/index.js.map +1 -1
- package/dist/umd/Chips/ChoiceChips.js +1 -2
- package/dist/umd/Chips/ChoiceChips.js.map +1 -1
- package/dist/umd/Dropdown/BasicDropdown.js +11 -3
- package/dist/umd/Dropdown/BasicDropdown.js.map +1 -1
- package/dist/umd/Dropdown/CommonStyling.js +18 -14
- package/dist/umd/Dropdown/CommonStyling.js.map +1 -1
- package/dist/umd/Dropdown/DropdownButton.js +20 -8
- package/dist/umd/Dropdown/DropdownButton.js.map +1 -1
- package/dist/umd/Dropdown/DropdownContent.js +119 -34
- package/dist/umd/Dropdown/DropdownContent.js.map +1 -1
- package/dist/umd/GlobalNavigationBar/RightSideNav.js +4 -0
- package/dist/umd/GlobalNavigationBar/RightSideNav.js.map +1 -1
- package/dist/umd/List/ListRow.js +218 -92
- package/dist/umd/List/ListRow.js.map +1 -1
- package/dist/umd/List/__tests__/ListRow.tests.js +9 -46
- package/dist/umd/List/__tests__/ListRow.tests.js.map +1 -1
- package/dist/umd/List/index.js +5 -8
- package/dist/umd/List/index.js.map +1 -1
- package/dist/umd/Modals/ModalContainer.js +1 -0
- package/dist/umd/Modals/ModalContainer.js.map +1 -1
- package/dist/umd/Modals/ModalDialog.js +15 -7
- package/dist/umd/Modals/ModalDialog.js.map +1 -1
- package/dist/umd/Modals/ModalNote.js +133 -0
- package/dist/umd/Modals/ModalNote.js.map +1 -0
- package/dist/umd/Modals/ModalStyles.js +54 -5
- package/dist/umd/Modals/ModalStyles.js.map +1 -1
- package/dist/umd/NotificationDot/NotificationDot.js +119 -0
- package/dist/umd/NotificationDot/NotificationDot.js.map +1 -0
- package/dist/umd/NotificationDot/index.js +32 -0
- package/dist/umd/NotificationDot/index.js.map +1 -0
- package/dist/umd/Tabs/TabLink.js +28 -24
- package/dist/umd/Tabs/TabLink.js.map +1 -1
- package/dist/umd/Tabs/VerticalTabs.js +4 -1
- package/dist/umd/Tabs/VerticalTabs.js.map +1 -1
- package/dist/umd/Toggles/ToggleSwitch.js +16 -12
- package/dist/umd/Toggles/ToggleSwitch.js.map +1 -1
- package/dist/umd/Toggles/TogglerStyles.js +100 -73
- package/dist/umd/Toggles/TogglerStyles.js.map +1 -1
- package/dist/umd/Toggles/TogglerTypes.js +0 -5
- package/dist/umd/Toggles/TogglerTypes.js.map +1 -1
- package/dist/umd/Tooltips/TooltipStyles.js +101 -0
- package/dist/umd/Tooltips/TooltipStyles.js.map +1 -0
- package/dist/umd/Tooltips/TooltipTypes.js +25 -0
- package/dist/umd/Tooltips/TooltipTypes.js.map +1 -0
- package/dist/umd/Tooltips/TooltipWrapper.js +92 -0
- package/dist/umd/Tooltips/TooltipWrapper.js.map +1 -0
- package/dist/umd/Tooltips/index.js +33 -0
- package/dist/umd/Tooltips/index.js.map +1 -0
- package/dist/umd/icons/contenticons/ContentIcons.js +604 -471
- package/dist/umd/icons/contenticons/ContentIcons.js.map +1 -1
- package/dist/umd/icons/index.js +62 -29
- package/dist/umd/icons/index.js.map +1 -1
- package/dist/umd/icons/systemicons/SystemIcons.js +652 -488
- package/dist/umd/icons/systemicons/SystemIcons.js.map +1 -1
- package/dist/umd/index.js +13 -4
- package/dist/umd/index.js.map +1 -1
- package/dist/umd/types.js +1 -0
- package/dist/umd/types.js.map +1 -1
- package/package.json +1 -1
- package/dist/esm/Button/Anchor.js +0 -76
- package/dist/esm/Button/Anchor.js.map +0 -1
- package/dist/esm/List/ListRowDropdown.js +0 -105
- package/dist/esm/List/ListRowDropdown.js.map +0 -1
- package/dist/js/Button/Anchor.d.ts +0 -7
- package/dist/js/Button/Anchor.js +0 -66
- package/dist/js/Button/Anchor.js.map +0 -1
- package/dist/js/List/ListRowDropdown.d.ts +0 -8
- package/dist/js/List/ListRowDropdown.js +0 -110
- package/dist/js/List/ListRowDropdown.js.map +0 -1
- package/dist/umd/Button/Anchor.js +0 -201
- package/dist/umd/Button/Anchor.js.map +0 -1
- package/dist/umd/List/ListRowDropdown.js +0 -182
- package/dist/umd/List/ListRowDropdown.js.map +0 -1
package/dist/umd/index.js
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
(function (global, factory) {
|
|
2
2
|
if (typeof define === "function" && define.amd) {
|
|
3
|
-
define(["exports", "./styles", "./icons", "./types", "./AuthPage", "./Button", "./Breadcrumb", "./Chips", "./SkipToContent", "./Footer", "./LoadingIndicator", "./MiniProductCard", "./NavItem", "./Layouts", "./GlobalNavigationBar", "./Tabs", "./Banners", "./Toasters", "./InputFields", "./Dropdown", "./Switcher", "./LoadingPage", "./List", "./Modals", "./Paginator", "./Table", "./Toggles", "./HyperLink"], factory);
|
|
3
|
+
define(["exports", "./styles", "./icons", "./types", "./AuthPage", "./Button", "./Breadcrumb", "./Chips", "./SkipToContent", "./Footer", "./LoadingIndicator", "./MiniProductCard", "./NavItem", "./Layouts", "./GlobalNavigationBar", "./Tabs", "./Banners", "./Toasters", "./InputFields", "./Dropdown", "./Switcher", "./LoadingPage", "./List", "./Modals", "./Paginator", "./Table", "./Toggles", "./HyperLink", "./NotificationDot"], factory);
|
|
4
4
|
} else if (typeof exports !== "undefined") {
|
|
5
|
-
factory(exports, require("./styles"), require("./icons"), require("./types"), require("./AuthPage"), require("./Button"), require("./Breadcrumb"), require("./Chips"), require("./SkipToContent"), require("./Footer"), require("./LoadingIndicator"), require("./MiniProductCard"), require("./NavItem"), require("./Layouts"), require("./GlobalNavigationBar"), require("./Tabs"), require("./Banners"), require("./Toasters"), require("./InputFields"), require("./Dropdown"), require("./Switcher"), require("./LoadingPage"), require("./List"), require("./Modals"), require("./Paginator"), require("./Table"), require("./Toggles"), require("./HyperLink"));
|
|
5
|
+
factory(exports, require("./styles"), require("./icons"), require("./types"), require("./AuthPage"), require("./Button"), require("./Breadcrumb"), require("./Chips"), require("./SkipToContent"), require("./Footer"), require("./LoadingIndicator"), require("./MiniProductCard"), require("./NavItem"), require("./Layouts"), require("./GlobalNavigationBar"), require("./Tabs"), require("./Banners"), require("./Toasters"), require("./InputFields"), require("./Dropdown"), require("./Switcher"), require("./LoadingPage"), require("./List"), require("./Modals"), require("./Paginator"), require("./Table"), require("./Toggles"), require("./HyperLink"), require("./NotificationDot"));
|
|
6
6
|
} else {
|
|
7
7
|
var mod = {
|
|
8
8
|
exports: {}
|
|
9
9
|
};
|
|
10
|
-
factory(mod.exports, global.styles, global.icons, global.types, global.AuthPage, global.Button, global.Breadcrumb, global.Chips, global.SkipToContent, global.Footer, global.LoadingIndicator, global.MiniProductCard, global.NavItem, global.Layouts, global.GlobalNavigationBar, global.Tabs, global.Banners, global.Toasters, global.InputFields, global.Dropdown, global.Switcher, global.LoadingPage, global.List, global.Modals, global.Paginator, global.Table, global.Toggles, global.HyperLink);
|
|
10
|
+
factory(mod.exports, global.styles, global.icons, global.types, global.AuthPage, global.Button, global.Breadcrumb, global.Chips, global.SkipToContent, global.Footer, global.LoadingIndicator, global.MiniProductCard, global.NavItem, global.Layouts, global.GlobalNavigationBar, global.Tabs, global.Banners, global.Toasters, global.InputFields, global.Dropdown, global.Switcher, global.LoadingPage, global.List, global.Modals, global.Paginator, global.Table, global.Toggles, global.HyperLink, global.NotificationDot);
|
|
11
11
|
global.undefined = mod.exports;
|
|
12
12
|
}
|
|
13
|
-
})(this, function (exports, _styles, _icons, _types, _AuthPage, _Button, _Breadcrumb, _Chips, _SkipToContent, _Footer, _LoadingIndicator, _MiniProductCard, _NavItem, _Layouts, _GlobalNavigationBar, _Tabs, _Banners, _Toasters, _InputFields, _Dropdown, _Switcher, _LoadingPage, _List, _Modals, _Paginator, _Table, _Toggles, _HyperLink) {
|
|
13
|
+
})(this, function (exports, _styles, _icons, _types, _AuthPage, _Button, _Breadcrumb, _Chips, _SkipToContent, _Footer, _LoadingIndicator, _MiniProductCard, _NavItem, _Layouts, _GlobalNavigationBar, _Tabs, _Banners, _Toasters, _InputFields, _Dropdown, _Switcher, _LoadingPage, _List, _Modals, _Paginator, _Table, _Toggles, _HyperLink, _NotificationDot) {
|
|
14
14
|
"use strict";
|
|
15
15
|
|
|
16
16
|
Object.defineProperty(exports, "__esModule", {
|
|
@@ -259,5 +259,14 @@
|
|
|
259
259
|
}
|
|
260
260
|
});
|
|
261
261
|
});
|
|
262
|
+
Object.keys(_NotificationDot).forEach(function (key) {
|
|
263
|
+
if (key === "default" || key === "__esModule") return;
|
|
264
|
+
Object.defineProperty(exports, key, {
|
|
265
|
+
enumerable: true,
|
|
266
|
+
get: function () {
|
|
267
|
+
return _NotificationDot[key];
|
|
268
|
+
}
|
|
269
|
+
});
|
|
270
|
+
});
|
|
262
271
|
});
|
|
263
272
|
//# sourceMappingURL=index.js.map
|
package/dist/umd/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from './styles';\nexport * from './icons';\nexport * from './types';\n\nexport * from './AuthPage';\n\nexport * from './Button';\nexport * from './Breadcrumb';\nexport * from './Chips';\nexport * from './SkipToContent';\nexport * from './Footer';\nexport * from './LoadingIndicator';\nexport * from './MiniProductCard';\nexport * from './NavItem';\nexport * from './Layouts';\nexport * from './GlobalNavigationBar';\nexport * from './Tabs';\nexport * from './Banners';\nexport * from './Toasters';\nexport * from './InputFields';\nexport * from './Dropdown';\nexport * from './Switcher';\nexport * from './LoadingPage';\nexport * from './List';\nexport * from './Modals';\nexport * from './Paginator';\nexport * from './Table';\nexport * from './Toggles';\nexport * from './HyperLink';\
|
|
1
|
+
{"version":3,"sources":["../../src/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from './styles';\nexport * from './icons';\nexport * from './types';\n\nexport * from './AuthPage';\n\nexport * from './Button';\nexport * from './Breadcrumb';\nexport * from './Chips';\nexport * from './SkipToContent';\nexport * from './Footer';\nexport * from './LoadingIndicator';\nexport * from './MiniProductCard';\nexport * from './NavItem';\nexport * from './Layouts';\nexport * from './GlobalNavigationBar';\nexport * from './Tabs';\nexport * from './Banners';\nexport * from './Toasters';\nexport * from './InputFields';\nexport * from './Dropdown';\nexport * from './Switcher';\nexport * from './LoadingPage';\nexport * from './List';\nexport * from './Modals';\nexport * from './Paginator';\nexport * from './Table';\nexport * from './Toggles';\nexport * from './HyperLink';\nexport * from './NotificationDot';"],"file":"index.js"}
|
package/dist/umd/types.js
CHANGED
package/dist/umd/types.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/types.ts"],"names":["Size","ToastColor","ToastActionType","ToastPosition","ToastEntryDirection"],"mappings":";;;;;;;;;;;;;;;;;;AAOA,MAAYA,IAAZ,WAAYA,IAAZ,YAAA;;aAAYA,I;AAAAA,IAAAA,I,SAAAA,G,OAAAA;AAAAA,IAAAA,I,UAAAA,G,QAAAA;AAAAA,IAAAA,I,SAAAA,G,OAAAA;KAAAA,I,aAAAA,I,GAAAA,I;;
|
|
1
|
+
{"version":3,"sources":["../../src/types.ts"],"names":["Size","ToastColor","ToastActionType","ToastPosition","ToastEntryDirection"],"mappings":";;;;;;;;;;;;;;;;;;AAOA,MAAYA,IAAZ,WAAYA,IAAZ,YAAA;;aAAYA,I;AAAAA,IAAAA,I,UAAAA,G,QAAAA;AAAAA,IAAAA,I,SAAAA,G,OAAAA;AAAAA,IAAAA,I,UAAAA,G,QAAAA;AAAAA,IAAAA,I,SAAAA,G,OAAAA;KAAAA,I,aAAAA,I,GAAAA,I;;AA8BZ,MAAYC,UAAZ,WAAYA,UAAZ,YAAA;;aAAYA,U;AAAAA,IAAAA,U,CAAAA,U,SAAAA,G,EAAAA,G,OAAAA;AAAAA,IAAAA,U,CAAAA,U,SAAAA,G,EAAAA,G,OAAAA;AAAAA,IAAAA,U,CAAAA,U,QAAAA,G,EAAAA,G,MAAAA;AAAAA,IAAAA,U,CAAAA,U,SAAAA,G,EAAAA,G,OAAAA;AAAAA,IAAAA,U,CAAAA,U,UAAAA,G,EAAAA,G,QAAAA;AAAAA,IAAAA,U,CAAAA,U,OAAAA,G,EAAAA,G,KAAAA;KAAAA,U,aAAAA,U,GAAAA,U;;AASZ,MAAYC,eAAZ,WAAYA,eAAZ,YAAA;;aAAYA,e;AAAAA,IAAAA,e,CAAAA,e,WAAAA,G,EAAAA,G,SAAAA;AAAAA,IAAAA,e,CAAAA,e,aAAAA,G,EAAAA,G,WAAAA;KAAAA,e,aAAAA,e,GAAAA,e;;AAKZ,MAAYC,aAAZ,WAAYA,aAAZ,YAAA;;aAAYA,a;AAAAA,IAAAA,a,CAAAA,a,WAAAA,G,EAAAA,G,SAAAA;AAAAA,IAAAA,a,CAAAA,a,aAAAA,G,EAAAA,G,WAAAA;AAAAA,IAAAA,a,CAAAA,a,YAAAA,G,EAAAA,G,UAAAA;AAAAA,IAAAA,a,CAAAA,a,cAAAA,G,EAAAA,G,YAAAA;AAAAA,IAAAA,a,CAAAA,a,gBAAAA,G,EAAAA,G,cAAAA;AAAAA,IAAAA,a,CAAAA,a,eAAAA,G,EAAAA,G,aAAAA;KAAAA,a,aAAAA,a,GAAAA,a;;AASZ,MAAYC,mBAAZ,WAAYA,mBAAZ,YAAA;;aAAYA,mB;AAAAA,IAAAA,mB,CAAAA,mB,OAAAA,G,EAAAA,G,KAAAA;AAAAA,IAAAA,mB,CAAAA,mB,UAAAA,G,EAAAA,G,QAAAA;AAAAA,IAAAA,mB,CAAAA,mB,QAAAA,G,EAAAA,G,MAAAA;AAAAA,IAAAA,mB,CAAAA,mB,SAAAA,G,EAAAA,G,OAAAA;KAAAA,mB,aAAAA,mB,GAAAA,mB","sourcesContent":["export interface Product {\n id: string;\n name: string;\n type: string;\n image: string;\n}\n\nexport enum Size {\n XSmall = 'xsmall',\n Small = 'small',\n Medium = 'medium',\n Large = 'large'\n}\n\nexport interface NavOption {\n label: string;\n to: string;\n disabled?: boolean;\n exact?: boolean;\n onClick?: () => void;\n}\n\nexport interface NavButton {\n label: string;\n action: any;\n disabled?: boolean;\n}\n\nexport interface ActionOptions {\n search?: () => void;\n apps?: () => void;\n language?: () => void;\n notification?: () => void;\n settings?: () => void;\n user?: () => void;\n}\n\nexport enum ToastColor {\n BLACK,\n WHITE,\n BLUE,\n GREEN,\n ORANGE,\n RED,\n}\n\nexport enum ToastActionType{\n PRIMARY,\n SECONDARY\n}\n\nexport enum ToastPosition {\n TOPLEFT,\n TOPMIDDLE,\n TOPRIGHT,\n BOTTOMLEFT,\n BOTTOMMIDDLE,\n BOTTOMRIGHT,\n}\n\nexport enum ToastEntryDirection{\n TOP,\n BOTTOM,\n LEFT,\n RIGHT\n}\n\nexport interface SwitcherNavItem {\n label: string;\n url: string;\n disabled?: boolean;\n Icon?: any;\n as?: any;\n testId?: string;\n}\n\nexport interface UserMenuItem {\n label: string;\n to: string;\n icon: any;\n isExternal?: boolean;\n onClick?: () => void;\n}\n\nexport interface ListRowDropdownOption {\n key?: string;\n label: string;\n action: any;\n}\n\nexport interface NavLink {\n label: string;\n to: string;\n target?: string;\n}\n\nexport interface NavSection {\n header: string;\n links: NavLink[];\n}\n\nexport interface NavOptions {\n sections: NavSection[];\n}\n"],"file":"types.js"}
|
package/package.json
CHANGED
|
@@ -1,76 +0,0 @@
|
|
|
1
|
-
import _pt from "prop-types";
|
|
2
|
-
const _excluded = ["children", "size", "href", "target"];
|
|
3
|
-
|
|
4
|
-
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
5
|
-
|
|
6
|
-
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
7
|
-
|
|
8
|
-
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
9
|
-
|
|
10
|
-
import * as React from 'react';
|
|
11
|
-
import styled from 'styled-components';
|
|
12
|
-
import { COLORS } from '../styles';
|
|
13
|
-
|
|
14
|
-
const Anchor = _ref => {
|
|
15
|
-
let {
|
|
16
|
-
children,
|
|
17
|
-
size = 'small',
|
|
18
|
-
href = '#',
|
|
19
|
-
target = '_blank'
|
|
20
|
-
} = _ref,
|
|
21
|
-
props = _objectWithoutProperties(_ref, _excluded);
|
|
22
|
-
|
|
23
|
-
return /*#__PURE__*/React.createElement(AnchorTag, _extends({
|
|
24
|
-
size: size,
|
|
25
|
-
href: href,
|
|
26
|
-
target: target
|
|
27
|
-
}, props), children);
|
|
28
|
-
};
|
|
29
|
-
|
|
30
|
-
Anchor.propTypes = {
|
|
31
|
-
size: _pt.oneOf(['small', 'medium', 'large', 'xsmall', 'xlarge']).isRequired,
|
|
32
|
-
href: _pt.string
|
|
33
|
-
};
|
|
34
|
-
const AnchorTag = styled.a`
|
|
35
|
-
color: ${COLORS.primary_500};
|
|
36
|
-
background-color: transparent;
|
|
37
|
-
padding: 0;
|
|
38
|
-
border: none;
|
|
39
|
-
max-width:max-content;
|
|
40
|
-
text-decoration: none;
|
|
41
|
-
font-size: ${props => props.size === 'large' ? '20px' : props.size === 'small' ? '16px' : props.size === 'xsmall' ? '14px' : props.size === 'xlarge' ? '24px' : '18px'};
|
|
42
|
-
line-height: ${props => props.size === 'large' ? '32px' : props.size === 'small' ? '24px' : props.size === 'xsmall' ? '20px' : props.size === 'xlarge' ? '36px' : '28px'};
|
|
43
|
-
font-weight: bold;
|
|
44
|
-
font-family: inherit;
|
|
45
|
-
cursor: pointer;
|
|
46
|
-
outline:none;
|
|
47
|
-
&:visited,
|
|
48
|
-
&.vistied-state {
|
|
49
|
-
color: ${COLORS.accent1_500};
|
|
50
|
-
background: transparent;
|
|
51
|
-
text-decoration: none;
|
|
52
|
-
}
|
|
53
|
-
&:hover,
|
|
54
|
-
&.hover-state {
|
|
55
|
-
color: ${COLORS.primary_600};
|
|
56
|
-
text-decoration: underline;
|
|
57
|
-
}
|
|
58
|
-
&:focus,
|
|
59
|
-
&.focus-state {
|
|
60
|
-
background-color: ${COLORS.white};
|
|
61
|
-
text-decoration: underline;
|
|
62
|
-
box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;
|
|
63
|
-
outline:none;
|
|
64
|
-
color: ${COLORS.primary_500};
|
|
65
|
-
}
|
|
66
|
-
&:active,
|
|
67
|
-
&.active-state {
|
|
68
|
-
color: ${COLORS.primary_700};
|
|
69
|
-
background: transparent;
|
|
70
|
-
text-decoration: underline;
|
|
71
|
-
background-color:unset !important;
|
|
72
|
-
box-shadow: unset !important;
|
|
73
|
-
}
|
|
74
|
-
`;
|
|
75
|
-
export default Anchor;
|
|
76
|
-
//# sourceMappingURL=Anchor.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/Button/Anchor.tsx"],"names":["React","styled","COLORS","Anchor","children","size","href","target","props","AnchorTag","a","primary_500","accent1_500","primary_600","white","focus_25","focus","primary_700"],"mappings":";;;;;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,MAAR,QAAqB,WAArB;;AAOA,MAAMC,MAA4C,GAAG,QAAuE;AAAA,MAAtE;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,IAAI,GAAG,OAAnB;AAA4BC,IAAAA,IAAI,GAAC,GAAjC;AAAsCC,IAAAA,MAAM,GAAC;AAA7C,GAAsE;AAAA,MAAXC,KAAW;;AAC1H,sBACI,oBAAC,SAAD;AAAW,IAAA,IAAI,EAAEH,IAAjB;AAAuB,IAAA,IAAI,EAAEC,IAA7B;AAAmC,IAAA,MAAM,EAAEC;AAA3C,KAAuDC,KAAvD,GACKJ,QADL,CADJ;AAKD,CAND;;;AAJIC,EAAAA,I,aAAO,O,EAAU,Q,EAAW,O,EAAU,Q,EAAW,Q;AACjDC,EAAAA,I;;AAWJ,MAAMG,SAAS,GAAGR,MAAM,CAACS,CAAe;AACxC,WAAWR,MAAM,CAACS,WAAY;AAC9B;AACA;AACA;AACA;AACA;AACA,eAAeH,KAAK,IAAKA,KAAK,CAACH,IAAN,KAAe,OAAf,GAAyB,MAAzB,GAAkCG,KAAK,CAACH,IAAN,KAAe,OAAf,GAAyB,MAAzB,GAAkCG,KAAK,CAACH,IAAN,KAAe,QAAf,GAA0B,MAA1B,GAAmCG,KAAK,CAACH,IAAN,KAAe,QAAf,GAA0B,MAA1B,GAAmC,MAAQ;AAC3K,iBAAiBG,KAAK,IAAKA,KAAK,CAACH,IAAN,KAAe,OAAf,GAAyB,MAAzB,GAAkCG,KAAK,CAACH,IAAN,KAAe,OAAf,GAAyB,MAAzB,GAAkCG,KAAK,CAACH,IAAN,KAAe,QAAf,GAA0B,MAA1B,GAAmCG,KAAK,CAACH,IAAN,KAAe,QAAf,GAA0B,MAA1B,GAAmC,MAAQ;AAC7K;AACA;AACA;AACA;AACA;AACA;AACA,aAAcH,MAAM,CAACU,WAAa;AAClC;AACA;AACA;AACA;AACA;AACA,aAAaV,MAAM,CAACW,WAAY;AAChC;AACA;AACA;AACA;AACA,wBAAwBX,MAAM,CAACY,KAAM;AACrC;AACA,+BAA+BZ,MAAM,CAACa,QAAS,iBAAgBb,MAAM,CAACc,KAAM;AAC5E;AACA,aAAad,MAAM,CAACS,WAAY;AAChC;AACA;AACA;AACA,aAAcT,MAAM,CAACe,WAAa;AAClC;AACA;AACA;AACA;AACA;AACA,CAxCA;AA0CA,eAAed,MAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS} from '../styles';\n\ninterface AnchorProps extends React.AnchorHTMLAttributes<HTMLAnchorElement>{\n size : 'small' | 'medium' | 'large' | 'xsmall' | 'xlarge';\n href?: string;\n}\n\nconst Anchor: React.FunctionComponent<AnchorProps> = ({ children, size = 'small', href='#', target='_blank' , ...props}) => {\n return (\n <AnchorTag size={size} href={href} target={target} {...props}>\n {children}\n </AnchorTag>\n )\n}\n\nconst AnchorTag = styled.a<AnchorProps>`\n color: ${COLORS.primary_500};\n background-color: transparent;\n padding: 0;\n border: none;\n max-width:max-content; \n text-decoration: none;\n font-size: ${props => (props.size === 'large' ? '20px' : props.size === 'small' ? '16px' : props.size === 'xsmall' ? '14px' : props.size === 'xlarge' ? '24px' : '18px')};\n line-height: ${props => (props.size === 'large' ? '32px' : props.size === 'small' ? '24px' : props.size === 'xsmall' ? '20px' : props.size === 'xlarge' ? '36px' : '28px')};\n font-weight: bold;\n font-family: inherit;\n cursor: pointer;\n outline:none;\n &:visited,\n &.vistied-state {\n color: ${ COLORS.accent1_500 };\n background: transparent;\n text-decoration: none;\n }\n &:hover, \n &.hover-state {\n color: ${COLORS.primary_600};\n text-decoration: underline;\n }\n &:focus,\n &.focus-state {\n background-color: ${COLORS.white};\n text-decoration: underline;\n box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n outline:none;\n color: ${COLORS.primary_500};\n }\n &:active,\n &.active-state {\n color: ${ COLORS.primary_700 };\n background: transparent;\n text-decoration: underline;\n background-color:unset !important;\n box-shadow: unset !important;\n } \n`;\n\nexport default Anchor;"],"file":"Anchor.js"}
|
|
@@ -1,105 +0,0 @@
|
|
|
1
|
-
import _pt from "prop-types";
|
|
2
|
-
import * as React from 'react';
|
|
3
|
-
import styled from 'styled-components';
|
|
4
|
-
import { COLORS, ComponentTextStyle } from '../styles';
|
|
5
|
-
import { ComponentMStyling } from '../styles/typography';
|
|
6
|
-
const Wrapper = styled.div`
|
|
7
|
-
.isInside {
|
|
8
|
-
top: 42px;
|
|
9
|
-
}
|
|
10
|
-
.isOutside {
|
|
11
|
-
bottom: 42px;
|
|
12
|
-
}
|
|
13
|
-
`;
|
|
14
|
-
const DropdownMenuContainer = styled.div`
|
|
15
|
-
position: absolute;
|
|
16
|
-
flex-direction: column;
|
|
17
|
-
background: ${COLORS.white};
|
|
18
|
-
font-size: 1em;
|
|
19
|
-
z-index: 1;
|
|
20
|
-
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
|
|
21
|
-
border-radius: 4px;
|
|
22
|
-
right: 0;
|
|
23
|
-
width: max-content;
|
|
24
|
-
min-width: 260px;
|
|
25
|
-
`;
|
|
26
|
-
const Content = styled.button`
|
|
27
|
-
min-width: 100%;
|
|
28
|
-
padding: 12px 16px;
|
|
29
|
-
|
|
30
|
-
text-align: left;
|
|
31
|
-
height: 48px;
|
|
32
|
-
|
|
33
|
-
${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}
|
|
34
|
-
|
|
35
|
-
background-color: ${COLORS.white};
|
|
36
|
-
border-width: 0;
|
|
37
|
-
|
|
38
|
-
&:hover,
|
|
39
|
-
&:focus {
|
|
40
|
-
cursor: pointer;
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
&:hover {
|
|
44
|
-
background: ${COLORS.primary_20};
|
|
45
|
-
border-radius: 4px;
|
|
46
|
-
}
|
|
47
|
-
&:active {
|
|
48
|
-
background: ${COLORS.primary_100};
|
|
49
|
-
border-radius: 4px;
|
|
50
|
-
}
|
|
51
|
-
`;
|
|
52
|
-
|
|
53
|
-
const ListRowDropdown = ({
|
|
54
|
-
options,
|
|
55
|
-
closeDropdown
|
|
56
|
-
}) => {
|
|
57
|
-
const [classname, setClassname] = React.useState('isInside');
|
|
58
|
-
const reference = React.useRef(null);
|
|
59
|
-
|
|
60
|
-
const clickIsOutside = e => reference && reference?.current && !reference?.current.contains(e.target);
|
|
61
|
-
|
|
62
|
-
const handleClick = e => {
|
|
63
|
-
if (e.keyCode) {
|
|
64
|
-
if (e.keyCode === 27) {
|
|
65
|
-
closeDropdown();
|
|
66
|
-
}
|
|
67
|
-
} else if (clickIsOutside(e)) {
|
|
68
|
-
closeDropdown();
|
|
69
|
-
}
|
|
70
|
-
};
|
|
71
|
-
|
|
72
|
-
const isInViewport = (offset = 0) => {
|
|
73
|
-
if (!reference.current) return;
|
|
74
|
-
const top = reference.current.getBoundingClientRect().bottom;
|
|
75
|
-
const inside = top + offset >= 0 && top - offset <= window.innerHeight;
|
|
76
|
-
|
|
77
|
-
if (!inside) {
|
|
78
|
-
setClassname('isOutside');
|
|
79
|
-
}
|
|
80
|
-
};
|
|
81
|
-
|
|
82
|
-
React.useEffect(() => {
|
|
83
|
-
document.addEventListener('mousedown', handleClick, false);
|
|
84
|
-
document.addEventListener('keydown', handleClick, false);
|
|
85
|
-
isInViewport();
|
|
86
|
-
return () => {
|
|
87
|
-
document.removeEventListener('mousedown', handleClick, false);
|
|
88
|
-
document.removeEventListener('keydown', handleClick, false);
|
|
89
|
-
}; // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
90
|
-
}, []);
|
|
91
|
-
return /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(DropdownMenuContainer, {
|
|
92
|
-
ref: reference,
|
|
93
|
-
className: classname
|
|
94
|
-
}, options.map(option => /*#__PURE__*/React.createElement(Content, {
|
|
95
|
-
key: option.key,
|
|
96
|
-
onClick: option.action
|
|
97
|
-
}, option.label))));
|
|
98
|
-
};
|
|
99
|
-
|
|
100
|
-
ListRowDropdown.propTypes = {
|
|
101
|
-
options: _pt.array.isRequired,
|
|
102
|
-
closeDropdown: _pt.any.isRequired
|
|
103
|
-
};
|
|
104
|
-
export default ListRowDropdown;
|
|
105
|
-
//# sourceMappingURL=ListRowDropdown.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/List/ListRowDropdown.tsx"],"names":["React","styled","COLORS","ComponentTextStyle","ComponentMStyling","Wrapper","div","DropdownMenuContainer","white","Content","button","Regular","neutral_600","primary_20","primary_100","ListRowDropdown","options","closeDropdown","classname","setClassname","useState","reference","useRef","clickIsOutside","e","current","contains","target","handleClick","keyCode","isInViewport","offset","top","getBoundingClientRect","bottom","inside","window","innerHeight","useEffect","document","addEventListener","removeEventListener","map","option","key","action","label"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS, ComponentTextStyle} from '../styles';\nimport {ListRowDropdownOption} from '../types';\nimport {ComponentMStyling} from '../styles/typography';\n\nconst Wrapper = styled.div`\n .isInside {\n top: 42px;\n }\n .isOutside {\n bottom: 42px;\n }\n`;\n\nconst DropdownMenuContainer = styled.div`\n position: absolute;\n flex-direction: column;\n background: ${COLORS.white};\n font-size: 1em;\n z-index: 1;\n box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);\n border-radius: 4px;\n right: 0;\n width: max-content;\n min-width: 260px;\n`;\n\nconst Content = styled.button`\n min-width: 100%;\n padding: 12px 16px;\n\n text-align: left;\n height: 48px;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n background-color: ${COLORS.white};\n border-width: 0;\n\n &:hover,\n &:focus {\n cursor: pointer;\n }\n\n &:hover {\n background: ${COLORS.primary_20};\n border-radius: 4px;\n }\n &:active {\n background: ${COLORS.primary_100};\n border-radius: 4px;\n }\n`;\n\ntype DropdownMenuProps = {\n options: ListRowDropdownOption[];\n closeDropdown: any;\n};\n\nconst ListRowDropdown: React.FunctionComponent<DropdownMenuProps> = ({ options, closeDropdown }: DropdownMenuProps) => {\n const [classname, setClassname] = React.useState('isInside');\n const reference = React.useRef<HTMLDivElement>(null);\n\n const clickIsOutside = (e: any) => reference && reference?.current && !reference?.current.contains(e.target);\n\n const handleClick = (e: any) => {\n if (e.keyCode) {\n if (e.keyCode === 27) {\n closeDropdown();\n }\n } else if (clickIsOutside(e)) {\n closeDropdown();\n }\n };\n\n const isInViewport = (offset = 0) => {\n if (!reference.current) return;\n const top = reference.current.getBoundingClientRect().bottom;\n const inside = top + offset >= 0 && top - offset <= window.innerHeight;\n if (!inside) {\n setClassname('isOutside');\n }\n };\n\n React.useEffect(() => {\n document.addEventListener('mousedown', handleClick, false);\n document.addEventListener('keydown', handleClick, false);\n isInViewport();\n return () => {\n document.removeEventListener('mousedown', handleClick, false);\n document.removeEventListener('keydown', handleClick, false);\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n return (\n <Wrapper>\n <DropdownMenuContainer ref={reference} className={classname}>\n {options.map(option => (\n <Content key={option.key} onClick={option.action}>\n {option.label}\n </Content>\n ))}\n </DropdownMenuContainer>\n </Wrapper>\n );\n};\n\nexport default ListRowDropdown;\n"],"file":"ListRowDropdown.js"}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
interface AnchorProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
|
|
3
|
-
size: 'small' | 'medium' | 'large' | 'xsmall' | 'xlarge';
|
|
4
|
-
href?: string;
|
|
5
|
-
}
|
|
6
|
-
declare const Anchor: React.FunctionComponent<AnchorProps>;
|
|
7
|
-
export default Anchor;
|
package/dist/js/Button/Anchor.js
DELETED
|
@@ -1,66 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
|
|
4
|
-
|
|
5
|
-
Object.defineProperty(exports, "__esModule", {
|
|
6
|
-
value: true
|
|
7
|
-
});
|
|
8
|
-
exports.default = void 0;
|
|
9
|
-
|
|
10
|
-
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
|
-
|
|
12
|
-
var React = _interopRequireWildcard(require("react"));
|
|
13
|
-
|
|
14
|
-
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
15
|
-
|
|
16
|
-
var _styles = require("../styles");
|
|
17
|
-
|
|
18
|
-
var _templateObject;
|
|
19
|
-
|
|
20
|
-
var _excluded = ["children", "size", "href", "target"];
|
|
21
|
-
|
|
22
|
-
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
23
|
-
|
|
24
|
-
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
25
|
-
|
|
26
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
27
|
-
|
|
28
|
-
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
29
|
-
|
|
30
|
-
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
31
|
-
|
|
32
|
-
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
33
|
-
|
|
34
|
-
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
35
|
-
|
|
36
|
-
var Anchor = function Anchor(_ref) {
|
|
37
|
-
var children = _ref.children,
|
|
38
|
-
_ref$size = _ref.size,
|
|
39
|
-
size = _ref$size === void 0 ? 'small' : _ref$size,
|
|
40
|
-
_ref$href = _ref.href,
|
|
41
|
-
href = _ref$href === void 0 ? '#' : _ref$href,
|
|
42
|
-
_ref$target = _ref.target,
|
|
43
|
-
target = _ref$target === void 0 ? '_blank' : _ref$target,
|
|
44
|
-
props = _objectWithoutProperties(_ref, _excluded);
|
|
45
|
-
|
|
46
|
-
return /*#__PURE__*/React.createElement(AnchorTag, _extends({
|
|
47
|
-
size: size,
|
|
48
|
-
href: href,
|
|
49
|
-
target: target
|
|
50
|
-
}, props), children);
|
|
51
|
-
};
|
|
52
|
-
|
|
53
|
-
Anchor.propTypes = {
|
|
54
|
-
size: _propTypes.default.oneOf(['small', 'medium', 'large', 'xsmall', 'xlarge']).isRequired,
|
|
55
|
-
href: _propTypes.default.string
|
|
56
|
-
};
|
|
57
|
-
|
|
58
|
-
var AnchorTag = _styledComponents.default.a(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n color: ", ";\n background-color: transparent;\n padding: 0;\n border: none;\n max-width:max-content; \n text-decoration: none;\n font-size: ", ";\n line-height: ", ";\n font-weight: bold;\n font-family: inherit;\n cursor: pointer;\n outline:none;\n &:visited,\n &.vistied-state {\n color: ", ";\n background: transparent;\n text-decoration: none;\n }\n &:hover, \n &.hover-state {\n color: ", ";\n text-decoration: underline;\n }\n &:focus,\n &.focus-state {\n background-color: ", ";\n text-decoration: underline;\n box-shadow: 0px 4px 12px ", ", 0px 0px 8px ", " !important;\n outline:none;\n color: ", ";\n }\n &:active,\n &.active-state {\n color: ", ";\n background: transparent;\n text-decoration: underline;\n background-color:unset !important;\n box-shadow: unset !important;\n } \n"])), _styles.COLORS.primary_500, function (props) {
|
|
59
|
-
return props.size === 'large' ? '20px' : props.size === 'small' ? '16px' : props.size === 'xsmall' ? '14px' : props.size === 'xlarge' ? '24px' : '18px';
|
|
60
|
-
}, function (props) {
|
|
61
|
-
return props.size === 'large' ? '32px' : props.size === 'small' ? '24px' : props.size === 'xsmall' ? '20px' : props.size === 'xlarge' ? '36px' : '28px';
|
|
62
|
-
}, _styles.COLORS.accent1_500, _styles.COLORS.primary_600, _styles.COLORS.white, _styles.COLORS.focus_25, _styles.COLORS.focus, _styles.COLORS.primary_500, _styles.COLORS.primary_700);
|
|
63
|
-
|
|
64
|
-
var _default = Anchor;
|
|
65
|
-
exports.default = _default;
|
|
66
|
-
//# sourceMappingURL=Anchor.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/Button/Anchor.tsx"],"names":["Anchor","children","size","href","target","props","AnchorTag","styled","a","COLORS","primary_500","accent1_500","primary_600","white","focus_25","focus","primary_700"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;AAOA,IAAMA,MAA4C,GAAG,SAA/CA,MAA+C,OAAuE;AAAA,MAApEC,QAAoE,QAApEA,QAAoE;AAAA,uBAA1DC,IAA0D;AAAA,MAA1DA,IAA0D,0BAAnD,OAAmD;AAAA,uBAA1CC,IAA0C;AAAA,MAA1CA,IAA0C,0BAArC,GAAqC;AAAA,yBAAhCC,MAAgC;AAAA,MAAhCA,MAAgC,4BAAzB,QAAyB;AAAA,MAAXC,KAAW;;AAC1H,sBACI,oBAAC,SAAD;AAAW,IAAA,IAAI,EAAEH,IAAjB;AAAuB,IAAA,IAAI,EAAEC,IAA7B;AAAmC,IAAA,MAAM,EAAEC;AAA3C,KAAuDC,KAAvD,GACKJ,QADL,CADJ;AAKD,CAND;;;AAJIC,EAAAA,I,4BAAO,O,EAAU,Q,EAAW,O,EAAU,Q,EAAW,Q;AACjDC,EAAAA,I;;;AAWJ,IAAMG,SAAS,GAAGC,0BAAOC,CAAV,o6BACJC,eAAOC,WADH,EAOA,UAAAL,KAAK;AAAA,SAAKA,KAAK,CAACH,IAAN,KAAe,OAAf,GAAyB,MAAzB,GAAkCG,KAAK,CAACH,IAAN,KAAe,OAAf,GAAyB,MAAzB,GAAkCG,KAAK,CAACH,IAAN,KAAe,QAAf,GAA0B,MAA1B,GAAmCG,KAAK,CAACH,IAAN,KAAe,QAAf,GAA0B,MAA1B,GAAmC,MAA/I;AAAA,CAPL,EAQE,UAAAG,KAAK;AAAA,SAAKA,KAAK,CAACH,IAAN,KAAe,OAAf,GAAyB,MAAzB,GAAkCG,KAAK,CAACH,IAAN,KAAe,OAAf,GAAyB,MAAzB,GAAkCG,KAAK,CAACH,IAAN,KAAe,QAAf,GAA0B,MAA1B,GAAmCG,KAAK,CAACH,IAAN,KAAe,QAAf,GAA0B,MAA1B,GAAmC,MAA/I;AAAA,CARP,EAeDO,eAAOE,WAfN,EAqBFF,eAAOG,WArBL,EA0BSH,eAAOI,KA1BhB,EA4BgBJ,eAAOK,QA5BvB,EA4BgDL,eAAOM,KA5BvD,EA8BFN,eAAOC,WA9BL,EAkCDD,eAAOO,WAlCN,CAAf;;eA0CehB,M","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS} from '../styles';\n\ninterface AnchorProps extends React.AnchorHTMLAttributes<HTMLAnchorElement>{\n size : 'small' | 'medium' | 'large' | 'xsmall' | 'xlarge';\n href?: string;\n}\n\nconst Anchor: React.FunctionComponent<AnchorProps> = ({ children, size = 'small', href='#', target='_blank' , ...props}) => {\n return (\n <AnchorTag size={size} href={href} target={target} {...props}>\n {children}\n </AnchorTag>\n )\n}\n\nconst AnchorTag = styled.a<AnchorProps>`\n color: ${COLORS.primary_500};\n background-color: transparent;\n padding: 0;\n border: none;\n max-width:max-content; \n text-decoration: none;\n font-size: ${props => (props.size === 'large' ? '20px' : props.size === 'small' ? '16px' : props.size === 'xsmall' ? '14px' : props.size === 'xlarge' ? '24px' : '18px')};\n line-height: ${props => (props.size === 'large' ? '32px' : props.size === 'small' ? '24px' : props.size === 'xsmall' ? '20px' : props.size === 'xlarge' ? '36px' : '28px')};\n font-weight: bold;\n font-family: inherit;\n cursor: pointer;\n outline:none;\n &:visited,\n &.vistied-state {\n color: ${ COLORS.accent1_500 };\n background: transparent;\n text-decoration: none;\n }\n &:hover, \n &.hover-state {\n color: ${COLORS.primary_600};\n text-decoration: underline;\n }\n &:focus,\n &.focus-state {\n background-color: ${COLORS.white};\n text-decoration: underline;\n box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n outline:none;\n color: ${COLORS.primary_500};\n }\n &:active,\n &.active-state {\n color: ${ COLORS.primary_700 };\n background: transparent;\n text-decoration: underline;\n background-color:unset !important;\n box-shadow: unset !important;\n } \n`;\n\nexport default Anchor;"],"file":"Anchor.js"}
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import { ListRowDropdownOption } from '../types';
|
|
3
|
-
declare type DropdownMenuProps = {
|
|
4
|
-
options: ListRowDropdownOption[];
|
|
5
|
-
closeDropdown: any;
|
|
6
|
-
};
|
|
7
|
-
declare const ListRowDropdown: React.FunctionComponent<DropdownMenuProps>;
|
|
8
|
-
export default ListRowDropdown;
|
|
@@ -1,110 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
|
|
4
|
-
|
|
5
|
-
Object.defineProperty(exports, "__esModule", {
|
|
6
|
-
value: true
|
|
7
|
-
});
|
|
8
|
-
exports.default = void 0;
|
|
9
|
-
|
|
10
|
-
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
|
-
|
|
12
|
-
var React = _interopRequireWildcard(require("react"));
|
|
13
|
-
|
|
14
|
-
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
15
|
-
|
|
16
|
-
var _styles = require("../styles");
|
|
17
|
-
|
|
18
|
-
var _typography = require("../styles/typography");
|
|
19
|
-
|
|
20
|
-
var _templateObject, _templateObject2, _templateObject3;
|
|
21
|
-
|
|
22
|
-
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
23
|
-
|
|
24
|
-
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
25
|
-
|
|
26
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
27
|
-
|
|
28
|
-
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
29
|
-
|
|
30
|
-
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
31
|
-
|
|
32
|
-
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
33
|
-
|
|
34
|
-
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
|
|
35
|
-
|
|
36
|
-
function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
|
|
37
|
-
|
|
38
|
-
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
39
|
-
|
|
40
|
-
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
41
|
-
|
|
42
|
-
var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n .isInside {\n top: 42px;\n }\n .isOutside {\n bottom: 42px;\n }\n"])));
|
|
43
|
-
|
|
44
|
-
var DropdownMenuContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n position: absolute;\n flex-direction: column;\n background: ", ";\n font-size: 1em;\n z-index: 1;\n box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);\n border-radius: 4px;\n right: 0;\n width: max-content;\n min-width: 260px;\n"])), _styles.COLORS.white);
|
|
45
|
-
|
|
46
|
-
var Content = _styledComponents.default.button(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n min-width: 100%;\n padding: 12px 16px;\n\n text-align: left;\n height: 48px;\n\n ", "\n\n background-color: ", ";\n border-width: 0;\n\n &:hover,\n &:focus {\n cursor: pointer;\n }\n\n &:hover {\n background: ", ";\n border-radius: 4px;\n }\n &:active {\n background: ", ";\n border-radius: 4px;\n }\n"])), (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), _styles.COLORS.white, _styles.COLORS.primary_20, _styles.COLORS.primary_100);
|
|
47
|
-
|
|
48
|
-
var ListRowDropdown = function ListRowDropdown(_ref) {
|
|
49
|
-
var options = _ref.options,
|
|
50
|
-
closeDropdown = _ref.closeDropdown;
|
|
51
|
-
|
|
52
|
-
var _React$useState = React.useState('isInside'),
|
|
53
|
-
_React$useState2 = _slicedToArray(_React$useState, 2),
|
|
54
|
-
classname = _React$useState2[0],
|
|
55
|
-
setClassname = _React$useState2[1];
|
|
56
|
-
|
|
57
|
-
var reference = React.useRef(null);
|
|
58
|
-
|
|
59
|
-
var clickIsOutside = function clickIsOutside(e) {
|
|
60
|
-
return reference && (reference === null || reference === void 0 ? void 0 : reference.current) && !(reference !== null && reference !== void 0 && reference.current.contains(e.target));
|
|
61
|
-
};
|
|
62
|
-
|
|
63
|
-
var handleClick = function handleClick(e) {
|
|
64
|
-
if (e.keyCode) {
|
|
65
|
-
if (e.keyCode === 27) {
|
|
66
|
-
closeDropdown();
|
|
67
|
-
}
|
|
68
|
-
} else if (clickIsOutside(e)) {
|
|
69
|
-
closeDropdown();
|
|
70
|
-
}
|
|
71
|
-
};
|
|
72
|
-
|
|
73
|
-
var isInViewport = function isInViewport() {
|
|
74
|
-
var offset = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
|
|
75
|
-
if (!reference.current) return;
|
|
76
|
-
var top = reference.current.getBoundingClientRect().bottom;
|
|
77
|
-
var inside = top + offset >= 0 && top - offset <= window.innerHeight;
|
|
78
|
-
|
|
79
|
-
if (!inside) {
|
|
80
|
-
setClassname('isOutside');
|
|
81
|
-
}
|
|
82
|
-
};
|
|
83
|
-
|
|
84
|
-
React.useEffect(function () {
|
|
85
|
-
document.addEventListener('mousedown', handleClick, false);
|
|
86
|
-
document.addEventListener('keydown', handleClick, false);
|
|
87
|
-
isInViewport();
|
|
88
|
-
return function () {
|
|
89
|
-
document.removeEventListener('mousedown', handleClick, false);
|
|
90
|
-
document.removeEventListener('keydown', handleClick, false);
|
|
91
|
-
}; // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
92
|
-
}, []);
|
|
93
|
-
return /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(DropdownMenuContainer, {
|
|
94
|
-
ref: reference,
|
|
95
|
-
className: classname
|
|
96
|
-
}, options.map(function (option) {
|
|
97
|
-
return /*#__PURE__*/React.createElement(Content, {
|
|
98
|
-
key: option.key,
|
|
99
|
-
onClick: option.action
|
|
100
|
-
}, option.label);
|
|
101
|
-
})));
|
|
102
|
-
};
|
|
103
|
-
|
|
104
|
-
ListRowDropdown.propTypes = {
|
|
105
|
-
options: _propTypes.default.array.isRequired,
|
|
106
|
-
closeDropdown: _propTypes.default.any.isRequired
|
|
107
|
-
};
|
|
108
|
-
var _default = ListRowDropdown;
|
|
109
|
-
exports.default = _default;
|
|
110
|
-
//# sourceMappingURL=ListRowDropdown.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/List/ListRowDropdown.tsx"],"names":["Wrapper","styled","div","DropdownMenuContainer","COLORS","white","Content","button","ComponentTextStyle","Regular","neutral_600","primary_20","primary_100","ListRowDropdown","options","closeDropdown","React","useState","classname","setClassname","reference","useRef","clickIsOutside","e","current","contains","target","handleClick","keyCode","isInViewport","offset","top","getBoundingClientRect","bottom","inside","window","innerHeight","useEffect","document","addEventListener","removeEventListener","map","option","key","action","label"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;AAEA,IAAMA,OAAO,GAAGC,0BAAOC,GAAV,mJAAb;;AASA,IAAMC,qBAAqB,GAAGF,0BAAOC,GAAV,iTAGXE,eAAOC,KAHI,CAA3B;;AAaA,IAAMC,OAAO,GAAGL,0BAAOM,MAAV,qZAOT,mCAAkBC,2BAAmBC,OAArC,EAA8CL,eAAOM,WAArD,CAPS,EASSN,eAAOC,KAThB,EAkBKD,eAAOO,UAlBZ,EAsBKP,eAAOQ,WAtBZ,CAAb;;AAgCA,IAAMC,eAA2D,GAAG,SAA9DA,eAA8D,OAAmD;AAAA,MAAhDC,OAAgD,QAAhDA,OAAgD;AAAA,MAAvCC,aAAuC,QAAvCA,aAAuC;;AACrH,wBAAkCC,KAAK,CAACC,QAAN,CAAe,UAAf,CAAlC;AAAA;AAAA,MAAOC,SAAP;AAAA,MAAkBC,YAAlB;;AACA,MAAMC,SAAS,GAAGJ,KAAK,CAACK,MAAN,CAA6B,IAA7B,CAAlB;;AAEA,MAAMC,cAAc,GAAG,SAAjBA,cAAiB,CAACC,CAAD;AAAA,WAAYH,SAAS,KAAIA,SAAJ,aAAIA,SAAJ,uBAAIA,SAAS,CAAEI,OAAf,CAAT,IAAmC,EAACJ,SAAD,aAACA,SAAD,eAACA,SAAS,CAAEI,OAAX,CAAmBC,QAAnB,CAA4BF,CAAC,CAACG,MAA9B,CAAD,CAA/C;AAAA,GAAvB;;AAEA,MAAMC,WAAW,GAAG,SAAdA,WAAc,CAACJ,CAAD,EAAY;AAC9B,QAAIA,CAAC,CAACK,OAAN,EAAe;AACb,UAAIL,CAAC,CAACK,OAAF,KAAc,EAAlB,EAAsB;AACpBb,QAAAA,aAAa;AACd;AACF,KAJD,MAIO,IAAIO,cAAc,CAACC,CAAD,CAAlB,EAAuB;AAC5BR,MAAAA,aAAa;AACd;AACF,GARD;;AAUA,MAAMc,YAAY,GAAG,SAAfA,YAAe,GAAgB;AAAA,QAAfC,MAAe,uEAAN,CAAM;AACnC,QAAI,CAACV,SAAS,CAACI,OAAf,EAAwB;AACxB,QAAMO,GAAG,GAAGX,SAAS,CAACI,OAAV,CAAkBQ,qBAAlB,GAA0CC,MAAtD;AACA,QAAMC,MAAM,GAAGH,GAAG,GAAGD,MAAN,IAAgB,CAAhB,IAAqBC,GAAG,GAAGD,MAAN,IAAgBK,MAAM,CAACC,WAA3D;;AACA,QAAI,CAACF,MAAL,EAAa;AACXf,MAAAA,YAAY,CAAC,WAAD,CAAZ;AACD;AACF,GAPD;;AASAH,EAAAA,KAAK,CAACqB,SAAN,CAAgB,YAAM;AACpBC,IAAAA,QAAQ,CAACC,gBAAT,CAA0B,WAA1B,EAAuCZ,WAAvC,EAAoD,KAApD;AACAW,IAAAA,QAAQ,CAACC,gBAAT,CAA0B,SAA1B,EAAqCZ,WAArC,EAAkD,KAAlD;AACAE,IAAAA,YAAY;AACZ,WAAO,YAAM;AACXS,MAAAA,QAAQ,CAACE,mBAAT,CAA6B,WAA7B,EAA0Cb,WAA1C,EAAuD,KAAvD;AACAW,MAAAA,QAAQ,CAACE,mBAAT,CAA6B,SAA7B,EAAwCb,WAAxC,EAAqD,KAArD;AACD,KAHD,CAJoB,CAQpB;AACD,GATD,EASG,EATH;AAWA,sBACE,oBAAC,OAAD,qBACE,oBAAC,qBAAD;AAAuB,IAAA,GAAG,EAAEP,SAA5B;AAAuC,IAAA,SAAS,EAAEF;AAAlD,KACGJ,OAAO,CAAC2B,GAAR,CAAY,UAAAC,MAAM;AAAA,wBACjB,oBAAC,OAAD;AAAS,MAAA,GAAG,EAAEA,MAAM,CAACC,GAArB;AAA0B,MAAA,OAAO,EAAED,MAAM,CAACE;AAA1C,OACGF,MAAM,CAACG,KADV,CADiB;AAAA,GAAlB,CADH,CADF,CADF;AAWD,CA/CD;;;AAJE/B,EAAAA,O;AACAC,EAAAA,a;;eAoDaF,e","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS, ComponentTextStyle} from '../styles';\nimport {ListRowDropdownOption} from '../types';\nimport {ComponentMStyling} from '../styles/typography';\n\nconst Wrapper = styled.div`\n .isInside {\n top: 42px;\n }\n .isOutside {\n bottom: 42px;\n }\n`;\n\nconst DropdownMenuContainer = styled.div`\n position: absolute;\n flex-direction: column;\n background: ${COLORS.white};\n font-size: 1em;\n z-index: 1;\n box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);\n border-radius: 4px;\n right: 0;\n width: max-content;\n min-width: 260px;\n`;\n\nconst Content = styled.button`\n min-width: 100%;\n padding: 12px 16px;\n\n text-align: left;\n height: 48px;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n background-color: ${COLORS.white};\n border-width: 0;\n\n &:hover,\n &:focus {\n cursor: pointer;\n }\n\n &:hover {\n background: ${COLORS.primary_20};\n border-radius: 4px;\n }\n &:active {\n background: ${COLORS.primary_100};\n border-radius: 4px;\n }\n`;\n\ntype DropdownMenuProps = {\n options: ListRowDropdownOption[];\n closeDropdown: any;\n};\n\nconst ListRowDropdown: React.FunctionComponent<DropdownMenuProps> = ({ options, closeDropdown }: DropdownMenuProps) => {\n const [classname, setClassname] = React.useState('isInside');\n const reference = React.useRef<HTMLDivElement>(null);\n\n const clickIsOutside = (e: any) => reference && reference?.current && !reference?.current.contains(e.target);\n\n const handleClick = (e: any) => {\n if (e.keyCode) {\n if (e.keyCode === 27) {\n closeDropdown();\n }\n } else if (clickIsOutside(e)) {\n closeDropdown();\n }\n };\n\n const isInViewport = (offset = 0) => {\n if (!reference.current) return;\n const top = reference.current.getBoundingClientRect().bottom;\n const inside = top + offset >= 0 && top - offset <= window.innerHeight;\n if (!inside) {\n setClassname('isOutside');\n }\n };\n\n React.useEffect(() => {\n document.addEventListener('mousedown', handleClick, false);\n document.addEventListener('keydown', handleClick, false);\n isInViewport();\n return () => {\n document.removeEventListener('mousedown', handleClick, false);\n document.removeEventListener('keydown', handleClick, false);\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n return (\n <Wrapper>\n <DropdownMenuContainer ref={reference} className={classname}>\n {options.map(option => (\n <Content key={option.key} onClick={option.action}>\n {option.label}\n </Content>\n ))}\n </DropdownMenuContainer>\n </Wrapper>\n );\n};\n\nexport default ListRowDropdown;\n"],"file":"ListRowDropdown.js"}
|