@bigbinary/neeto-molecules 1.0.89 → 1.0.90-beta

package/dist/CustomDomainDashboard.js

@@ -1,18 +1,19 @@
 import * as React from 'react';
 import React__default, { forwardRef, useRef, useState } from 'react';
-import { isNotPresent, noop, snakeToCamelCase, isNotEmpty } from '@bigbinary/neeto-commons-frontend/pure';
+import { isNotPresent, isNotEmpty, noop, snakeToCamelCase } from '@bigbinary/neeto-commons-frontend/pure';
 import { withT, useDebounce } from '@bigbinary/neeto-commons-frontend/react-utils';
 import { Typography, Button, Alert, Dropdown as Dropdown$1, Input, Tag, Callout, Pane, Label, Table, NoData } from '@bigbinary/neetoui';
 import { useTranslation, Trans } from 'react-i18next';
-import { not, isEmpty } from 'ramda';
-import { Column, Download, Filter, Right, MenuVertical, HamburgerMenu, Search, MenuHorizontal, Info, Copy, Check } from '@bigbinary/neeto-icons';
+import { not } from 'ramda';
+import { Column, Download, Filter, MenuVertical, Search, MenuHorizontal, Info, Check } from '@bigbinary/neeto-icons';
 import ManageColumns from '@bigbinary/neeto-molecules/Columns';
 import { Filters } from '@bigbinary/neeto-filters-frontend';
 import { PLURAL, SINGULAR } from '@bigbinary/neeto-commons-frontend/constants';
-import { withEventTargetValue, joinHyphenCase, copyToClipboard } from '@bigbinary/neeto-commons-frontend/utils';
+import { withEventTargetValue, joinHyphenCase } from '@bigbinary/neeto-commons-frontend/utils';
 import { Link } from 'react-router-dom';
 import { Formik, Form } from 'formik';
 import { Input as Input$1 } from '@bigbinary/neetoui/formik';
+import CopyToClipboardButton from '@bigbinary/neeto-molecules/CopyToClipboardButton';
 import { t as t$1 } from 'i18next';
 import * as Yup from 'yup';
 import { useQueryClient, useMutation, useQuery } from 'react-query';
@@ -1318,7 +1319,7 @@ if (process.env.NODE_ENV !== 'production') {
 
 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}}
 
-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}";
+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}";
 n(css$3,{});
 
 var Container = /*#__PURE__*/forwardRef(function (_ref, ref) {
@@ -1510,7 +1511,7 @@ function _defineProperty(obj, key, value) {
 var _excluded$1 = ["buttonProps"];
 function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var Columns = function Columns(_ref) {
+var Columns = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _ref$buttonProps = _ref.buttonProps,
     buttonProps = _ref$buttonProps === void 0 ? {} : _ref$buttonProps,
     props = _objectWithoutProperties(_ref, _excluded$1);
@@ -1529,8 +1530,11 @@ var Columns = function Columns(_ref) {
       "data-testid": "columns-button",
       "data-cy": "columns-dropdown-button"
     }, buttonProps)
-  }, props)));
-};
+  }, _objectSpread$2(_objectSpread$2({}, props), {}, {
+    ref: ref
+  }))));
+});
+Columns.displayName = "Columns";
 
 var DownloadButton = function DownloadButton(_ref) {
   var count = _ref.count,
@@ -1594,7 +1598,7 @@ var RightBlock = function RightBlock(_ref) {
   }, downloadButtonProps && /*#__PURE__*/React__default.createElement(DownloadButton, downloadButtonProps), columnsButtonProps && /*#__PURE__*/React__default.createElement(Columns, columnsButtonProps), filterProps && /*#__PURE__*/React__default.createElement(FilterButton, filterProps));
 };
 
-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}";
+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}";
 n(css$1,{});
 
 var SubHeader = function SubHeader(_ref) {
@@ -1646,7 +1650,7 @@ var DeleteAlert = function DeleteAlert(_ref) {
   });
 };
 
-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}";
+var css = ":root{--neeto-molecules-main-header-height:98px;--neeto-molecules-main-header-with-breadcrumbs-height:170px}.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:98px;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:var(--neeto-ui-leading-tight)}.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:170px;min-height:var(--neeto-molecules-main-header-with-breadcrumbs-height)}.neeto-molecules-header--has-breadcrumbs .neeto-molecules-header__page-title{margin-top:0}.neeto-molecules-header--nano,.neeto-molecules-header--small{flex-shrink:0;min-height:0}.neeto-molecules-header--nano .neeto-molecules-header__breadcrumbs-wrap,.neeto-molecules-header--small .neeto-molecules-header__breadcrumbs-wrap{margin:0 0 16px}.neeto-molecules-header--small .neeto-molecules-header__page-title{margin-top:-4px}.neeto-molecules-header--small .neeto-molecules-header__page-title h2{font-size:32px}.neeto-molecules-header--nano .neeto-molecules-header__page-title{margin-top:0}.neeto-molecules-header--nano .neeto-molecules-header__page-title h2{font-size:24px}";
 n(css,{});
 
 var Breadcrumbs = function Breadcrumbs(_ref) {
@@ -1655,7 +1659,8 @@ var Breadcrumbs = function Breadcrumbs(_ref) {
     className: "neeto-molecules-header__breadcrumbs-wrap"
   }, breadcrumbs.map(function (_ref2, index) {
     var text = _ref2.text,
-      link = _ref2.link;
+      _ref2$link = _ref2.link,
+      link = _ref2$link === void 0 ? "#" : _ref2$link;
     return /*#__PURE__*/React__default.createElement("div", {
       className: "neeto-molecules-header__breadcrumb",
       "data-cy": "header-breadcrumb",
@@ -1663,27 +1668,28 @@ var Breadcrumbs = function Breadcrumbs(_ref) {
     }, /*#__PURE__*/React__default.createElement(Link, {
       to: link
     }, /*#__PURE__*/React__default.createElement(Typography, {
-      className: "neeto-molecules-text-gray-700 hover:neeto-ui-text-gray-800 neeto-molecules-header__breadcrumb-link",
+      className: "neeto-ui-text-gray-700 hover:neeto-ui-text-gray-800 neeto-molecules-header__breadcrumb-link",
       component: "span",
       "data-cy": text,
       "data-test-id": text,
       style: "body2",
       weight: "normal"
-    }, text)), /*#__PURE__*/React__default.createElement(Right, {
-      className: "neeto-molecules-header__breadcrumb-separator neeto-ui-text-gray-400",
-      size: 16
-    }));
+    }, text)), index + 1 !== breadcrumbs.length && /*#__PURE__*/React__default.createElement("span", {
+      className: "neeto-molecules-header__breadcrumb-separator neeto-ui-text-black"
+    }, "/"));
   }));
 };
 var Breadcrumbs$1 = /*#__PURE__*/React__default.memo(Breadcrumbs);
 
+var SIZES = {
+  nano: "nano",
+  small: "small",
+  large: "large"
+};
+
 var Dropdown = function Dropdown(props) {
   return /*#__PURE__*/React__default.createElement(Dropdown$1, _extends$1({
-    buttonProps: {
-      className: "ml-1.5"
-    },
     buttonStyle: "text",
-    className: "ml-3",
     icon: MenuVertical,
     position: "bottom-end"
   }, props));
@@ -1691,7 +1697,6 @@ var Dropdown = function Dropdown(props) {
 
 var Header$2 = function Header(_ref) {
   var title = _ref.title,
-    menuBarToggle = _ref.menuBarToggle,
     searchProps = _ref.searchProps,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? "" : _ref$className,
@@ -1699,26 +1704,24 @@ var Header$2 = function Header(_ref) {
     _ref$breadcrumbs = _ref.breadcrumbs,
     breadcrumbs = _ref$breadcrumbs === void 0 ? [] : _ref$breadcrumbs,
     _ref$renderDropdown = _ref.renderDropdown,
-    renderDropdown = _ref$renderDropdown === void 0 ? noop : _ref$renderDropdown;
+    renderDropdown = _ref$renderDropdown === void 0 ? noop : _ref$renderDropdown,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? "large" : _ref$size;
   var searchRef = useRef(null);
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   return /*#__PURE__*/React__default.createElement("div", {
     className: classnames(["neeto-molecules-header", {
-      "neeto-molecules-header--has-breadcrumbs": !isEmpty(breadcrumbs)
+      "neeto-molecules-header--has-breadcrumbs": isNotEmpty(breadcrumbs),
+      "neeto-molecules-header--large": size === SIZES.large,
+      "neeto-molecules-header--small": size === SIZES.small,
+      "neeto-molecules-header--nano": size === SIZES.nano
     }, className])
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "neeto-molecules-header__left"
-  }, menuBarToggle && /*#__PURE__*/React__default.createElement(Button, {
-    "aria-label": "Toggle Menubar",
-    className: "neeto-molecules-header__toggle-menubar-btn",
-    "data-cy": "menubar-toggle-button",
-    icon: HamburgerMenu,
-    style: "text",
-    onClick: menuBarToggle
-  }), /*#__PURE__*/React__default.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement("div", {
     className: "neeto-molecules-header__left-data-wrap"
-  }, breadcrumbs && /*#__PURE__*/React__default.createElement(Breadcrumbs$1, {
+  }, isNotEmpty(breadcrumbs) && /*#__PURE__*/React__default.createElement(Breadcrumbs$1, {
     breadcrumbs: breadcrumbs
   }), /*#__PURE__*/React__default.createElement("div", {
     className: "neeto-molecules-header__page-title"
@@ -1896,24 +1899,20 @@ var Record = function Record(_ref) {
     "data-cy": joinHyphenCase(recordNameLabel),
     label: recordNameLabel,
     value: recordName,
-    suffix: /*#__PURE__*/React__default.createElement(Button, {
-      icon: Copy,
+    suffix: /*#__PURE__*/React__default.createElement(CopyToClipboardButton, {
+      size: "small",
       style: "text",
-      onClick: function onClick() {
-        return copyToClipboard(recordName);
-      }
+      value: recordName
     })
   }), /*#__PURE__*/React__default.createElement(Input, {
     disabled: true,
     "data-cy": joinHyphenCase(recordValueLabel),
     label: recordValueLabel,
     value: recordValue,
-    suffix: /*#__PURE__*/React__default.createElement(Button, {
-      icon: Copy,
+    suffix: /*#__PURE__*/React__default.createElement(CopyToClipboardButton, {
+      size: "small",
       style: "text",
-      onClick: function onClick() {
-        return copyToClipboard(recordValue);
-      }
+      value: recordValue
     })
   }));
 };