@bigbinary/neeto-molecules 1.0.85 → 1.0.87-beta

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.
Files changed (41) hide show
  1. package/README.md +1 -0
  2. package/dist/Container.cjs.js +1 -1
  3. package/dist/Container.js +1 -1
  4. package/dist/CustomDomainDashboard.cjs.js +23 -28
  5. package/dist/CustomDomainDashboard.cjs.js.map +1 -1
  6. package/dist/CustomDomainDashboard.js +26 -31
  7. package/dist/CustomDomainDashboard.js.map +1 -1
  8. package/dist/DynamicVariables.cjs.js +54 -6
  9. package/dist/DynamicVariables.cjs.js.map +1 -1
  10. package/dist/DynamicVariables.js +54 -6
  11. package/dist/DynamicVariables.js.map +1 -1
  12. package/dist/Header.cjs.js +11 -23
  13. package/dist/Header.cjs.js.map +1 -1
  14. package/dist/Header.js +14 -26
  15. package/dist/Header.js.map +1 -1
  16. package/dist/ImageWithFallback.cjs.js +247 -0
  17. package/dist/ImageWithFallback.cjs.js.map +1 -0
  18. package/dist/ImageWithFallback.js +241 -0
  19. package/dist/ImageWithFallback.js.map +1 -0
  20. package/dist/MenuBar.cjs.js +30 -18
  21. package/dist/MenuBar.cjs.js.map +1 -1
  22. package/dist/MenuBar.js +30 -18
  23. package/dist/MenuBar.js.map +1 -1
  24. package/dist/Scrollable.cjs.js +5 -1
  25. package/dist/Scrollable.cjs.js.map +1 -1
  26. package/dist/Scrollable.js +5 -1
  27. package/dist/Scrollable.js.map +1 -1
  28. package/dist/Sidebar.cjs.js +214 -137
  29. package/dist/Sidebar.cjs.js.map +1 -1
  30. package/dist/Sidebar.js +217 -140
  31. package/dist/Sidebar.js.map +1 -1
  32. package/dist/SubHeader.cjs.js +11 -5
  33. package/dist/SubHeader.cjs.js.map +1 -1
  34. package/dist/SubHeader.js +11 -5
  35. package/dist/SubHeader.js.map +1 -1
  36. package/package.json +2 -2
  37. package/src/translations/en.json +6 -2
  38. package/types/DateRangeFilter.d.ts +1 -1
  39. package/types/ImageWithFallback.d.ts +23 -0
  40. package/types/Sidebar.d.ts +1 -1
  41. package/types/SubHeader.d.ts +1 -0
@@ -1,11 +1,11 @@
1
1
  import * as React from 'react';
2
2
  import React__default, { forwardRef, useRef, useState } from 'react';
3
- import { isNotPresent, noop, snakeToCamelCase, isNotEmpty } from '@bigbinary/neeto-commons-frontend/pure';
3
+ import { isNotPresent, isNotEmpty, noop, snakeToCamelCase } from '@bigbinary/neeto-commons-frontend/pure';
4
4
  import { withT, useDebounce } from '@bigbinary/neeto-commons-frontend/react-utils';
5
5
  import { Typography, Button, Alert, Dropdown as Dropdown$1, Input, Tag, Callout, Pane, Label, Table, NoData } from '@bigbinary/neetoui';
6
6
  import { useTranslation, Trans } from 'react-i18next';
7
- import { not, isEmpty } from 'ramda';
8
- import { Column, Download, Filter, Right, MenuVertical, HamburgerMenu, Search, MenuHorizontal, Info, Copy, Check } from '@bigbinary/neeto-icons';
7
+ import { not } from 'ramda';
8
+ import { Column, Download, Filter, MenuVertical, Search, MenuHorizontal, Info, Copy, Check } from '@bigbinary/neeto-icons';
9
9
  import ManageColumns from '@bigbinary/neeto-molecules/Columns';
10
10
  import { Filters } from '@bigbinary/neeto-filters-frontend';
11
11
  import { PLURAL, SINGULAR } from '@bigbinary/neeto-commons-frontend/constants';
@@ -1318,7 +1318,7 @@ if (process.env.NODE_ENV !== 'production') {
1318
1318
 
1319
1319
  var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
1320
1320
 
1321
- var css$3 = ".neeto-molecules-container{align-items:flex-start;display:flex;flex-direction:column;flex-grow:1;height:100vh;justify-content:flex-start;overflow-y:auto;padding:0 24px}.neeto-molecules-container--header-fixed{padding:0}.neeto-molecules-container--header-fixed>.neeto-molecules-header,.neeto-molecules-container--header-fixed>.neeto-molecules-scrollable,.neeto-molecules-container--header-fixed>.neeto-molecules-subheader{padding-left:24px;padding-right:24px}";
1321
+ var css$3 = ".neeto-molecules-container{align-items:flex-start;display:flex;flex-direction:column;flex-grow:1;height:100vh;justify-content:flex-start;overflow-y:auto;padding:0 40px!important}.neeto-molecules-container--header-fixed{padding:0!important}.neeto-molecules-container--header-fixed>.neeto-molecules-header,.neeto-molecules-container--header-fixed>.neeto-molecules-scrollable,.neeto-molecules-container--header-fixed>.neeto-molecules-subheader{padding-left:40px!important;padding-right:40px!important}";
1322
1322
  n(css$3,{});
1323
1323
 
1324
1324
  var Container = /*#__PURE__*/forwardRef(function (_ref, ref) {
@@ -1594,23 +1594,29 @@ var RightBlock = function RightBlock(_ref) {
1594
1594
  }, downloadButtonProps && /*#__PURE__*/React__default.createElement(DownloadButton, downloadButtonProps), columnsButtonProps && /*#__PURE__*/React__default.createElement(Columns, columnsButtonProps), filterProps && /*#__PURE__*/React__default.createElement(FilterButton, filterProps));
1595
1595
  };
1596
1596
 
1597
- var css$1 = ".neeto-molecules-subheader{align-items:center;background-color:rgb(var(--neeto-ui-white));display:flex;flex-direction:row;justify-content:space-between;margin-bottom:var(--neeto-ui-sub-header-bottom-margin);min-height:var(--neeto-ui-sub-header-height);width:100%}.neeto-molecules-subheader .neeto-molecules-subheader__left-wrapper{display:flex;flex-grow:1}.neeto-molecules-subheader .neeto-molecules-subheader__left-wrapper .neeto-molecules-subheader__left{align-items:center;display:flex;flex-direction:row;justify-content:flex-start}.neeto-molecules-subheader .neeto-molecules-subheader__left-wrapper .neeto-molecules-subheader__left .neeto-molecules-input__prefix{color:rgb(var(--neeto-ui-gray-400))}.neeto-molecules-subheader .neeto-molecules-subheader__right{align-items:center;display:flex;flex-direction:row;gap:12px;justify-content:flex-end}.neeto-molecules-subheader .neeto-molecules-subheader__right-actions{align-items:center;display:flex;flex-direction:row;gap:8px;justify-content:flex-end}.neeto-molecules-subheader .neeto-molecules-subheader__right-actions>:not([hidden])~:not([hidden]){border-left:thin solid rgb(var(--neeto-ui-gray-300));padding-left:8px}.neeto-molecules-subheader__download{position:relative}.neeto-molecules-subheader__download-count{align-items:center;background-color:rgb(var(--neeto-ui-primary-500));border-radius:var(--neeto-ui-rounded-full);color:rgb(var(--neeto-ui-white));display:inline-flex;font-size:10px;justify-content:center;min-height:16px;min-width:16px;position:absolute;right:-2px;text-align:center;top:-2px;z-index:1}";
1597
+ var css$1 = ":root{--neeto-molecules-sub-header-height:37px;--neeto-molecules-sub-header-bottom-margin:20px}.neeto-molecules-subheader{align-items:center;background-color:rgb(var(--neeto-ui-white));display:flex;flex-direction:row;justify-content:space-between;margin-bottom:20px;margin-bottom:var(--neeto-molecules-sub-header-bottom-margin);min-height:37px;min-height:var(--neeto-molecules-sub-header-height);width:100%}.neeto-molecules-subheader .neeto-molecules-subheader__left-wrapper{display:flex;flex-grow:1}.neeto-molecules-subheader .neeto-molecules-subheader__left-wrapper .neeto-molecules-subheader__left{align-items:center;display:flex;flex-direction:row;justify-content:flex-start}.neeto-molecules-subheader .neeto-molecules-subheader__left-wrapper .neeto-molecules-subheader__left .neeto-molecules-input__prefix{color:rgb(var(--neeto-ui-gray-400))}.neeto-molecules-subheader .neeto-molecules-subheader__right{align-items:center;display:flex;flex-direction:row;gap:12px;justify-content:flex-end}.neeto-molecules-subheader .neeto-molecules-subheader__right-actions{align-items:center;display:flex;flex-direction:row;gap:8px;justify-content:flex-end}.neeto-molecules-subheader .neeto-molecules-subheader__right-actions>:not([hidden])~:not([hidden]){border-left:thin solid rgb(var(--neeto-ui-gray-300));padding-left:8px}.neeto-molecules-subheader__download{position:relative}.neeto-molecules-subheader__download-count{align-items:center;background-color:rgb(var(--neeto-ui-primary-500));border-radius:var(--neeto-ui-rounded-full);color:rgb(var(--neeto-ui-white));display:inline-flex;font-size:10px;justify-content:center;min-height:16px;min-width:16px;position:absolute;right:-2px;text-align:center;top:-2px;z-index:1}";
1598
1598
  n(css$1,{});
1599
1599
 
1600
1600
  var SubHeader = function SubHeader(_ref) {
1601
1601
  var _ref$className = _ref.className,
1602
1602
  className = _ref$className === void 0 ? "" : _ref$className,
1603
1603
  leftActionBlock = _ref.leftActionBlock,
1604
- rightActionBlock = _ref.rightActionBlock;
1604
+ rightActionBlock = _ref.rightActionBlock,
1605
+ _ref$dataCy = _ref["data-cy"],
1606
+ dataCy = _ref$dataCy === void 0 ? "subheader" : _ref$dataCy;
1605
1607
  return /*#__PURE__*/React__default.createElement("div", {
1606
1608
  className: classnames(["neeto-molecules-subheader", className]),
1609
+ "data-cy": dataCy,
1607
1610
  "data-testid": "subheader"
1608
1611
  }, /*#__PURE__*/React__default.createElement("div", {
1609
- className: "neeto-molecules-subheader__left-wrapper"
1612
+ className: "neeto-molecules-subheader__left-wrapper",
1613
+ "data-cy": "subheader-left-wrapper"
1610
1614
  }, leftActionBlock && /*#__PURE__*/React__default.createElement("div", {
1611
- className: "neeto-molecules-subheader__left"
1615
+ className: "neeto-molecules-subheader__left",
1616
+ "data-cy": "subheader-left"
1612
1617
  }, leftActionBlock)), rightActionBlock && /*#__PURE__*/React__default.createElement("div", {
1613
- className: "neeto-molecules-subheader__right"
1618
+ className: "neeto-molecules-subheader__right",
1619
+ "data-cy": "subheader-right"
1614
1620
  }, rightActionBlock));
1615
1621
  };
1616
1622
  SubHeader.RightBlock = RightBlock;
@@ -1640,7 +1646,7 @@ var DeleteAlert = function DeleteAlert(_ref) {
1640
1646
  });
1641
1647
  };
1642
1648
 
1643
- var css = ".neeto-molecules-header{align-items:center;background:rgb(var(--neeto-ui-white));display:flex;flex-direction:row;justify-content:space-between;min-height:var(--neeto-ui-main-header-height);padding:24px 0;width:100%}.neeto-molecules-header--has-breadcrumbs{min-height:var(--neeto-ui-main-header-with-breadcrumbs-height)}.neeto-molecules-header .neeto-molecules-header__toggle-menubar-btn{margin-right:8px}.neeto-molecules-header .neeto-molecules-header__left{align-items:center;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start}.neeto-molecules-header .neeto-molecules-header__left-data-wrap{display:flex;flex-wrap:wrap}.neeto-molecules-header .neeto-molecules-header__page-title{display:flex;flex-direction:row;width:100%}.neeto-molecules-header .neeto-molecules-header__breadcrumbs-wrap{display:flex}.neeto-molecules-header .neeto-molecules-header__breadcrumb{align-items:center;display:flex;flex-direction:row;justify-content:flex-start;line-height:1}.neeto-molecules-header .neeto-molecules-header__breadcrumb a{text-decoration:none;transition:all .3s ease-in-out}.neeto-molecules-header .neeto-molecules-header__breadcrumb a:focus-visible{border-radius:var(--neeto-ui-rounded-sm);outline:3px solid rgba(var(--neeto-ui-primary-500),50%)}.neeto-molecules-header .neeto-molecules-header__breadcrumb-separator{margin:0 4px}.neeto-molecules-header .neeto-molecules-header__right{align-items:center;display:flex;flex-direction:row;justify-content:flex-end}";
1649
+ var css = ":root{--neeto-molecules-main-header-height:96px;--neeto-molecules-main-header-with-breadcrumbs-height:168px}.neeto-molecules-header{align-items:flex-start!important;background:rgb(var(--neeto-ui-white));display:flex;flex-direction:row;justify-content:space-between;min-height:96px;min-height:var(--neeto-molecules-main-header-height);padding:40px 0 24px!important;width:100%}.neeto-molecules-header .neeto-molecules-header__toggle-menubar-btn{margin-right:8px}.neeto-molecules-header .neeto-molecules-header__left{align-items:flex-start!important;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start}.neeto-molecules-header .neeto-molecules-header__left-data-wrap{display:flex;flex-wrap:wrap}.neeto-molecules-header .neeto-molecules-header__page-title{align-items:center;display:flex;flex-direction:row;gap:12px;margin-top:-16px;width:100%}.neeto-molecules-header .neeto-molecules-header__page-title h2{font-size:40px;line-height:48px}.neeto-molecules-header .neeto-molecules-header__breadcrumbs-wrap{display:flex;margin:0 0 40px}.neeto-molecules-header .neeto-molecules-header__breadcrumb{align-items:center;display:flex;flex-direction:row;justify-content:flex-start;line-height:1}.neeto-molecules-header .neeto-molecules-header__breadcrumb a{text-decoration:none;transition:all .3s ease-in-out}.neeto-molecules-header .neeto-molecules-header__breadcrumb a:focus-visible{border-radius:var(--neeto-ui-rounded-sm);outline:3px solid rgba(var(--neeto-ui-primary-500),50%)}.neeto-molecules-header .neeto-molecules-header__breadcrumb-separator{font-size:12px;line-height:16px;margin:0 12px!important}.neeto-molecules-header .neeto-molecules-header__right{align-items:center;display:flex;flex-direction:row;justify-content:flex-end}.neeto-molecules-header--has-breadcrumbs{min-height:168px;min-height:var(--neeto-molecules-main-header-with-breadcrumbs-height)}.neeto-molecules-header--has-breadcrumbs .neeto-molecules-header__page-title{margin-top:0}";
1644
1650
  n(css,{});
1645
1651
 
1646
1652
  var Breadcrumbs = function Breadcrumbs(_ref) {
@@ -1649,34 +1655,31 @@ var Breadcrumbs = function Breadcrumbs(_ref) {
1649
1655
  className: "neeto-molecules-header__breadcrumbs-wrap"
1650
1656
  }, breadcrumbs.map(function (_ref2, index) {
1651
1657
  var text = _ref2.text,
1652
- link = _ref2.link;
1658
+ _ref2$link = _ref2.link,
1659
+ link = _ref2$link === void 0 ? "#" : _ref2$link;
1653
1660
  return /*#__PURE__*/React__default.createElement("div", {
1654
1661
  className: "neeto-molecules-header__breadcrumb",
1662
+ "data-cy": "header-breadcrumb",
1655
1663
  key: index
1656
1664
  }, /*#__PURE__*/React__default.createElement(Link, {
1657
1665
  to: link
1658
1666
  }, /*#__PURE__*/React__default.createElement(Typography, {
1659
- className: "neeto-molecules-text-gray-700 hover:neeto-ui-text-gray-800 neeto-molecules-header__breadcrumb-link",
1667
+ className: "neeto-ui-text-gray-700 hover:neeto-ui-text-gray-800 neeto-molecules-header__breadcrumb-link",
1660
1668
  component: "span",
1661
1669
  "data-cy": text,
1662
1670
  "data-test-id": text,
1663
1671
  style: "body2",
1664
1672
  weight: "normal"
1665
- }, text)), /*#__PURE__*/React__default.createElement(Right, {
1666
- className: "neeto-molecules-header__breadcrumb-separator neeto-ui-text-gray-400",
1667
- size: 16
1668
- }));
1673
+ }, text)), index + 1 !== breadcrumbs.length && /*#__PURE__*/React__default.createElement("span", {
1674
+ className: "neeto-molecules-header__breadcrumb-separator neeto-ui-text-black"
1675
+ }, "/"));
1669
1676
  }));
1670
1677
  };
1671
1678
  var Breadcrumbs$1 = /*#__PURE__*/React__default.memo(Breadcrumbs);
1672
1679
 
1673
1680
  var Dropdown = function Dropdown(props) {
1674
1681
  return /*#__PURE__*/React__default.createElement(Dropdown$1, _extends$1({
1675
- buttonProps: {
1676
- className: "ml-1.5"
1677
- },
1678
1682
  buttonStyle: "text",
1679
- className: "ml-3",
1680
1683
  icon: MenuVertical,
1681
1684
  position: "bottom-end"
1682
1685
  }, props));
@@ -1684,7 +1687,6 @@ var Dropdown = function Dropdown(props) {
1684
1687
 
1685
1688
  var Header$2 = function Header(_ref) {
1686
1689
  var title = _ref.title,
1687
- menuBarToggle = _ref.menuBarToggle,
1688
1690
  searchProps = _ref.searchProps,
1689
1691
  _ref$className = _ref.className,
1690
1692
  className = _ref$className === void 0 ? "" : _ref$className,
@@ -1698,20 +1700,13 @@ var Header$2 = function Header(_ref) {
1698
1700
  t = _useTranslation.t;
1699
1701
  return /*#__PURE__*/React__default.createElement("div", {
1700
1702
  className: classnames(["neeto-molecules-header", {
1701
- "neeto-molecules-header--has-breadcrumbs": !isEmpty(breadcrumbs)
1703
+ "neeto-molecules-header--has-breadcrumbs": isNotEmpty(breadcrumbs)
1702
1704
  }, className])
1703
1705
  }, /*#__PURE__*/React__default.createElement("div", {
1704
1706
  className: "neeto-molecules-header__left"
1705
- }, menuBarToggle && /*#__PURE__*/React__default.createElement(Button, {
1706
- "aria-label": "Toggle Menubar",
1707
- className: "neeto-molecules-header__toggle-menubar-btn",
1708
- "data-cy": "menubar-toggle-button",
1709
- icon: HamburgerMenu,
1710
- style: "text",
1711
- onClick: menuBarToggle
1712
- }), /*#__PURE__*/React__default.createElement("div", {
1707
+ }, /*#__PURE__*/React__default.createElement("div", {
1713
1708
  className: "neeto-molecules-header__left-data-wrap"
1714
- }, breadcrumbs && /*#__PURE__*/React__default.createElement(Breadcrumbs$1, {
1709
+ }, isNotEmpty(breadcrumbs) && /*#__PURE__*/React__default.createElement(Breadcrumbs$1, {
1715
1710
  breadcrumbs: breadcrumbs
1716
1711
  }), /*#__PURE__*/React__default.createElement("div", {
1717
1712
  className: "neeto-molecules-header__page-title"