@bigbinary/neeto-molecules 1.0.79-beta → 1.0.80

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.
@@ -1,13 +1,14 @@
1
1
  import * as React from 'react';
2
2
  import React__default, { forwardRef, useRef, useState } from 'react';
3
- import { isNotEmpty, noop, snakeToCamelCase } from '@bigbinary/neeto-commons-frontend/pure';
3
+ import { noop, snakeToCamelCase, isNotEmpty } from '@bigbinary/neeto-commons-frontend/pure';
4
4
  import { 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 { Column, Download, Filter, MenuVertical, Search, MenuHorizontal, Info, Copy, Check } from '@bigbinary/neeto-icons';
7
+ import { Column, Download, Filter, Right, MenuVertical, HamburgerMenu, Search, MenuHorizontal, Info, Copy, Check } from '@bigbinary/neeto-icons';
8
8
  import ManageColumns from '@bigbinary/neeto-molecules/Columns';
9
9
  import { Filters } from '@bigbinary/neeto-filters-frontend';
10
10
  import { withEventTargetValue, joinHyphenCase, copyToClipboard } from '@bigbinary/neeto-commons-frontend/utils';
11
+ import { isEmpty } from 'ramda';
11
12
  import { Link } from 'react-router-dom';
12
13
  import { Formik, Form } from 'formik';
13
14
  import { Input as Input$1 } from '@bigbinary/neetoui/formik';
@@ -1316,7 +1317,7 @@ if (process.env.NODE_ENV !== 'production') {
1316
1317
 
1317
1318
  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}}
1318
1319
 
1319
- 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}";
1320
+ 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}";
1320
1321
  n(css$3,{});
1321
1322
 
1322
1323
  var Container = /*#__PURE__*/forwardRef(function (_ref, ref) {
@@ -1587,7 +1588,7 @@ var RightBlock = function RightBlock(_ref) {
1587
1588
  }, downloadButtonProps && /*#__PURE__*/React__default.createElement(DownloadButton, downloadButtonProps), columnsButtonProps && /*#__PURE__*/React__default.createElement(Columns, columnsButtonProps), filterProps && /*#__PURE__*/React__default.createElement(FilterButton, filterProps));
1588
1589
  };
1589
1590
 
1590
- 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}";
1591
+ 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}";
1591
1592
  n(css$1,{});
1592
1593
 
1593
1594
  var SubHeader = function SubHeader(_ref) {
@@ -1633,7 +1634,7 @@ var DeleteAlert = function DeleteAlert(_ref) {
1633
1634
  });
1634
1635
  };
1635
1636
 
1636
- 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}";
1637
+ 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}";
1637
1638
  n(css,{});
1638
1639
 
1639
1640
  var Breadcrumbs = function Breadcrumbs(_ref) {
@@ -1642,30 +1643,34 @@ var Breadcrumbs = function Breadcrumbs(_ref) {
1642
1643
  className: "neeto-molecules-header__breadcrumbs-wrap"
1643
1644
  }, breadcrumbs.map(function (_ref2, index) {
1644
1645
  var text = _ref2.text,
1645
- _ref2$link = _ref2.link,
1646
- link = _ref2$link === void 0 ? "#" : _ref2$link;
1646
+ link = _ref2.link;
1647
1647
  return /*#__PURE__*/React__default.createElement("div", {
1648
1648
  className: "neeto-molecules-header__breadcrumb",
1649
1649
  key: index
1650
1650
  }, /*#__PURE__*/React__default.createElement(Link, {
1651
1651
  to: link
1652
1652
  }, /*#__PURE__*/React__default.createElement(Typography, {
1653
- className: "neeto-ui-text-gray-700 hover:neeto-ui-text-gray-800 neeto-molecules-header__breadcrumb-link",
1653
+ className: "neeto-molecules-text-gray-700 hover:neeto-ui-text-gray-800 neeto-molecules-header__breadcrumb-link",
1654
1654
  component: "span",
1655
1655
  "data-cy": text,
1656
1656
  "data-test-id": text,
1657
1657
  style: "body2",
1658
1658
  weight: "normal"
1659
- }, text)), index + 1 !== breadcrumbs.length && /*#__PURE__*/React__default.createElement("span", {
1660
- className: "neeto-molecules-header__breadcrumb-separator neeto-ui-text-black"
1661
- }, "/"));
1659
+ }, text)), /*#__PURE__*/React__default.createElement(Right, {
1660
+ className: "neeto-molecules-header__breadcrumb-separator neeto-ui-text-gray-400",
1661
+ size: 16
1662
+ }));
1662
1663
  }));
1663
1664
  };
1664
1665
  var Breadcrumbs$1 = /*#__PURE__*/React__default.memo(Breadcrumbs);
1665
1666
 
1666
1667
  var Dropdown = function Dropdown(props) {
1667
1668
  return /*#__PURE__*/React__default.createElement(Dropdown$1, _extends$1({
1669
+ buttonProps: {
1670
+ className: "ml-1.5"
1671
+ },
1668
1672
  buttonStyle: "text",
1673
+ className: "ml-3",
1669
1674
  icon: MenuVertical,
1670
1675
  position: "bottom-end"
1671
1676
  }, props));
@@ -1673,6 +1678,7 @@ var Dropdown = function Dropdown(props) {
1673
1678
 
1674
1679
  var Header$2 = function Header(_ref) {
1675
1680
  var title = _ref.title,
1681
+ menuBarToggle = _ref.menuBarToggle,
1676
1682
  searchProps = _ref.searchProps,
1677
1683
  _ref$className = _ref.className,
1678
1684
  className = _ref$className === void 0 ? "" : _ref$className,
@@ -1686,13 +1692,20 @@ var Header$2 = function Header(_ref) {
1686
1692
  t = _useTranslation.t;
1687
1693
  return /*#__PURE__*/React__default.createElement("div", {
1688
1694
  className: classnames(["neeto-molecules-header", {
1689
- "neeto-molecules-header--has-breadcrumbs": isNotEmpty(breadcrumbs)
1695
+ "neeto-molecules-header--has-breadcrumbs": !isEmpty(breadcrumbs)
1690
1696
  }, className])
1691
1697
  }, /*#__PURE__*/React__default.createElement("div", {
1692
1698
  className: "neeto-molecules-header__left"
1693
- }, /*#__PURE__*/React__default.createElement("div", {
1699
+ }, menuBarToggle && /*#__PURE__*/React__default.createElement(Button, {
1700
+ "aria-label": "Toggle Menubar",
1701
+ className: "neeto-molecules-header__toggle-menubar-btn",
1702
+ "data-cy": "menubar-toggle-button",
1703
+ icon: HamburgerMenu,
1704
+ style: "text",
1705
+ onClick: menuBarToggle
1706
+ }), /*#__PURE__*/React__default.createElement("div", {
1694
1707
  className: "neeto-molecules-header__left-data-wrap"
1695
- }, isNotEmpty(breadcrumbs) && /*#__PURE__*/React__default.createElement(Breadcrumbs$1, {
1708
+ }, breadcrumbs && /*#__PURE__*/React__default.createElement(Breadcrumbs$1, {
1696
1709
  breadcrumbs: breadcrumbs
1697
1710
  }), /*#__PURE__*/React__default.createElement("div", {
1698
1711
  className: "neeto-molecules-header__page-title"