@bigbinary/neeto-molecules 1.1.78 → 1.2.0-beta1

package/dist/cjs/MenuBar.js

@@ -0,0 +1,208 @@
+'use strict';
+
+var defineProperty = require('./defineProperty-886ed289.js');
+var objectWithoutProperties = require('./objectWithoutProperties-2fed2d7d.js');
+var React = require('react');
+var classnames = require('classnames');
+var neetoui = require('@bigbinary/neetoui');
+var reactTransitionGroup = require('react-transition-group');
+var _extends = require('./extends-1b35a664.js');
+var neetoIcons = require('@bigbinary/neeto-icons');
+var injectCss = require('./inject-css-80a5faa3.js');
+var neetoCist = require('@bigbinary/neeto-cist');
+var general = require('@bigbinary/neeto-commons-frontend/utils/general');
+var reactRouterDom = require('react-router-dom');
+var withT = require('@bigbinary/neeto-commons-frontend/react-utils/withT');
+var index = require('./index-248c4f4c.js');
+var ramda = require('ramda');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
+var withT__default = /*#__PURE__*/_interopDefaultLegacy(withT);
+
+var css = ".neeto-molecules-menubar__wrapper{background-color:rgb(var(--neeto-ui-white))!important;border-right:1px solid rgb(var(--neeto-ui-gray-300));flex-shrink:0;overflow:hidden;transition:all .3s}.neeto-molecules-menubar__container{height:100vh;overflow-y:auto;padding:32px!important;width:324px}@media screen and (max-width:1024px){.neeto-molecules-menubar__container{padding:40px 24px 24px!important;width:280px}}@media screen and (max-width:768px){.neeto-molecules-menubar__container{padding:40px 20px 24px!important;width:240px}}.neeto-molecules-menubar__title{margin-bottom:16px}.neeto-molecules-menubar__search{align-items:center;display:flex;gap:4px;margin-bottom:20px}.neeto-molecules-menubar__subtitle{align-items:center;display:flex;justify-content:space-between;margin-bottom:20px;margin-top:20px}.neeto-molecules-menubar__subtitle-actions{align-items:center;display:flex;gap:4px}.neeto-molecules-menubar__add-new-wrap,.neeto-molecules-menubar__block{margin-bottom:8px;padding:7px 8px}.neeto-molecules-menubar__block{align-items:center;border:thin solid transparent;border-radius:var(--neeto-ui-rounded);cursor:pointer;display:flex;justify-content:space-between;text-align:left;transition:all .3s;width:100%}.neeto-molecules-menubar__block:active,.neeto-molecules-menubar__block:focus,.neeto-molecules-menubar__block:focus-visible,.neeto-molecules-menubar__block:hover{background-color:rgb(var(--neeto-ui-gray-200));outline:none;text-decoration:none}.neeto-molecules-menubar__block--active{background-color:rgb(var(--neeto-ui-primary-100));border-color:rgb(var(--neeto-ui-primary-100));box-shadow:none;position:relative}.neeto-molecules-menubar__block--active:after{background-color:rgb(var(--neeto-ui-primary-500));border-bottom-left-radius:var(--neeto-ui-rounded);border-top-left-radius:var(--neeto-ui-rounded);content:\"\";height:100%;left:-1px;position:absolute;top:0;width:3px}.neeto-molecules-menubar__block--active:active,.neeto-molecules-menubar__block--active:focus,.neeto-molecules-menubar__block--active:focus-visible,.neeto-molecules-menubar__block--active:hover{background-color:rgb(var(--neeto-ui-primary-100))}.neeto-molecules-menubar__block .neeto-molecules-menubar__block-label{align-items:center;display:flex}.neeto-molecules-menubar__block .neeto-molecules-menubar__block-icon{margin-right:4px}.neeto-molecules-menubar__item{border:thin solid transparent;border-radius:var(--neeto-ui-rounded);cursor:pointer;margin-bottom:8px;padding:12px;text-align:left;transition:all .3s;width:100%}@media screen and (max-width:1024px){.neeto-molecules-menubar__item{padding:10px}}@media screen and (max-width:768px){.neeto-molecules-menubar__item{padding:8px}}.neeto-molecules-menubar__item:active,.neeto-molecules-menubar__item:focus,.neeto-molecules-menubar__item:focus-visible,.neeto-molecules-menubar__item:hover{background-color:rgb(var(--neeto-ui-gray-200));outline:none}.neeto-molecules-menubar__item--active{background-color:rgb(var(--neeto-ui-white));border-color:rgb(var(--neeto-ui-gray-300));box-shadow:var(--neeto-ui-shadow-xs);color:rgb(var(--neeto-ui-gray-800))}.neeto-molecules-menubar__item--active:active,.neeto-molecules-menubar__item--active:focus,.neeto-molecules-menubar__item--active:focus-visible,.neeto-molecules-menubar__item--active:hover{background-color:rgb(var(--neeto-ui-white))}.neeto-molecules-menubar-enter.neeto-molecules-menubar__wrapper{width:0}.neeto-molecules-menubar-enter-active.neeto-molecules-menubar__wrapper,.neeto-molecules-menubar-enter-done.neeto-molecules-menubar__wrapper,.neeto-molecules-menubar-exit.neeto-molecules-menubar__wrapper{width:324px}.neeto-molecules-menubar-exit-active.neeto-molecules-menubar__wrapper{width:0}";
+injectCss.n(css,{});
+
+var _excluded$5 = ["label", "onClick"];
+var AddNew = function AddNew(_ref) {
+  var _ref$label = _ref.label,
+    label = _ref$label === void 0 ? "" : _ref$label,
+    onClick = _ref.onClick,
+    otherProps = objectWithoutProperties._objectWithoutProperties(_ref, _excluded$5);
+  return /*#__PURE__*/React__default["default"].createElement("div", _extends._extends({
+    className: "neeto-molecules-menubar__add-new-wrap"
+  }, otherProps), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+    icon: neetoIcons.Plus,
+    iconPosition: "left",
+    iconSize: 16,
+    label: label,
+    size: "small",
+    style: "link",
+    onClick: onClick
+  }));
+};
+
+var _excluded$4 = ["url", "icon", "label", "count", "active", "onEdit", "onClick", "className"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { defineProperty._defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var Block = function Block(_ref) {
+  var url = _ref.url,
+    icon = _ref.icon,
+    label = _ref.label,
+    count = _ref.count,
+    _ref$active = _ref.active,
+    active = _ref$active === void 0 ? false : _ref$active,
+    onEdit = _ref.onEdit,
+    _ref$onClick = _ref.onClick,
+    onClick = _ref$onClick === void 0 ? neetoCist.noop : _ref$onClick,
+    className = _ref.className,
+    otherProps = objectWithoutProperties._objectWithoutProperties(_ref, _excluded$4);
+  var handleEdit = function handleEdit(e) {
+    e.stopPropagation();
+    onEdit && onEdit();
+  };
+  var Parent = url ? reactRouterDom.Link : function (props) {
+    return /*#__PURE__*/React__default["default"].createElement("button", props);
+  };
+  return /*#__PURE__*/React__default["default"].createElement(Parent, _extends._extends({
+    "data-cy": otherProps["data-cy"] || "menubar-block",
+    to: url,
+    className: classnames__default["default"]("neeto-molecules-menubar__block", defineProperty._defineProperty({
+      "neeto-molecules-menubar__block--editable": !!onEdit,
+      "neeto-molecules-menubar__block--active": active
+    }, className, className))
+  }, _objectSpread({
+    onClick: onClick
+  }, otherProps)), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "neeto-molecules-menubar__block-label",
+    "data-cy": general.joinHyphenCase("menubar-block-label", label)
+  }, icon && /*#__PURE__*/React__default["default"].createElement("i", {
+    className: "neeto-molecules-menubar__block-icon"
+  }, icon), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    component: "span",
+    style: "h5",
+    title: label,
+    weight: "medium"
+  }, label)), Number.isInteger(count) && /*#__PURE__*/React__default["default"].createElement("div", {
+    onClick: handleEdit
+  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    component: "span",
+    style: "h5",
+    weight: "medium"
+  }, count)));
+};
+
+var _excluded$3 = ["label", "description", "active", "className"];
+var Item = function Item(_ref) {
+  var _ref$label = _ref.label,
+    label = _ref$label === void 0 ? "" : _ref$label,
+    _ref$description = _ref.description,
+    description = _ref$description === void 0 ? "" : _ref$description,
+    _ref$active = _ref.active,
+    active = _ref$active === void 0 ? false : _ref$active,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? "" : _ref$className,
+    otherProps = objectWithoutProperties._objectWithoutProperties(_ref, _excluded$3);
+  return /*#__PURE__*/React__default["default"].createElement("button", _extends._extends({
+    className: classnames__default["default"]("neeto-molecules-menubar__item", defineProperty._defineProperty({
+      "neeto-molecules-menubar__item--active": active
+    }, className, className))
+  }, otherProps), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    className: "neeto-molecules-menubar__item-header",
+    component: "h5",
+    style: "h4"
+  }, label), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    className: "neeto-molecules-menubar__item-desc",
+    style: "body3"
+  }, description));
+};
+
+var UNSUPPORTED_INPUT_PROPS = ["tReady"];
+
+var _excluded$2 = ["t", "isCollapsed", "onCollapse"];
+var Search = withT__default["default"](function (_ref) {
+  var t = _ref.t,
+    _ref$isCollapsed = _ref.isCollapsed,
+    isCollapsed = _ref$isCollapsed === void 0 ? true : _ref$isCollapsed,
+    onCollapse = _ref.onCollapse,
+    props = objectWithoutProperties._objectWithoutProperties(_ref, _excluded$2);
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, !isCollapsed && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "neeto-molecules-menubar__search"
+  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Input, _extends._extends({
+    placeholder: t("neetoMolecules.common.actions.search"),
+    prefix: /*#__PURE__*/React__default["default"].createElement(neetoIcons.Search, null),
+    type: "search"
+  }, ramda.omit(UNSUPPORTED_INPUT_PROPS, props))), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+    "data-cy": "menubar-search-close-icon",
+    icon: neetoIcons.Close,
+    style: "text",
+    onClick: onCollapse
+  })));
+});
+Search.propTypes = {
+  /**
+   * To specify whether the search field is collapsed.
+   */
+  isCollapsed: index.propTypes.exports.bool,
+  /**
+   * To provide a callback function on collapse of the search field.
+   */
+  onCollapse: index.propTypes.exports.func
+};
+
+var _excluded$1 = ["children", "iconProps"];
+var SubTitle = function SubTitle(_ref) {
+  var children = _ref.children,
+    iconProps = _ref.iconProps,
+    otherProps = objectWithoutProperties._objectWithoutProperties(_ref, _excluded$1);
+  return /*#__PURE__*/React__default["default"].createElement("div", _extends._extends({
+    className: "neeto-molecules-menubar__subtitle",
+    "data-cy": otherProps["data-cy"] || "menubar-subtitle-heading"
+  }, otherProps), children, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "neeto-molecules-menubar__subtitle-actions"
+  }, iconProps === null || iconProps === void 0 ? void 0 : iconProps.map(function (iconProp, index) {
+    return /*#__PURE__*/React__default["default"].createElement(neetoui.Button, _extends._extends({
+      key: index,
+      style: "text"
+    }, iconProp));
+  })));
+};
+
+var _excluded = ["title", "children", "showMenu", "className"];
+var MenuBar = function MenuBar(_ref) {
+  var _ref$title = _ref.title,
+    title = _ref$title === void 0 ? "" : _ref$title,
+    children = _ref.children,
+    _ref$showMenu = _ref.showMenu,
+    showMenu = _ref$showMenu === void 0 ? false : _ref$showMenu,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? "" : _ref$className,
+    otherProps = objectWithoutProperties._objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.CSSTransition, {
+    unmountOnExit: true,
+    classNames: "neeto-molecules-menubar",
+    "in": showMenu,
+    timeout: 300
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: classnames__default["default"]("neeto-molecules-menubar__wrapper", defineProperty._defineProperty({}, className, className))
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "neeto-molecules-menubar__container",
+    "data-cy": "menubar-container"
+  }, title && /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    className: "neeto-molecules-menubar__title",
+    "data-cy": otherProps["data-cy"] || "menubar-heading",
+    lineHeight: "tight",
+    style: "h2",
+    weight: "semibold"
+  }, title), children)));
+};
+MenuBar.Block = Block;
+MenuBar.Item = Item;
+MenuBar.SubTitle = SubTitle;
+MenuBar.Search = Search;
+MenuBar.AddNew = AddNew;
+
+module.exports = MenuBar;
+//# sourceMappingURL=MenuBar.js.map

package/dist/cjs/MenuBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuBar.js","sources":["../../src/components/MenuBar/AddNew.jsx","../../src/components/MenuBar/Block.jsx","../../src/components/MenuBar/Item.jsx","../../src/components/MenuBar/constants.js","../../src/components/MenuBar/Search.jsx","../../src/components/MenuBar/SubTitle.jsx","../../src/components/MenuBar/index.jsx"],"sourcesContent":["import React from \"react\";\n\nimport { Plus } from \"neetoicons\";\nimport { Button } from \"neetoui\";\nimport PropTypes from \"prop-types\";\n\nimport \"./menubar.scss\";\n\nconst AddNew = ({ label = \"\", onClick, ...otherProps }) => (\n  <div className=\"neeto-molecules-menubar__add-new-wrap\" {...otherProps}>\n    <Button\n      icon={Plus}\n      iconPosition=\"left\"\n      iconSize={16}\n      label={label}\n      size=\"small\"\n      style=\"link\"\n      onClick={onClick}\n    />\n  </div>\n);\n\nAddNew.propTypes = {\n  /**\n   * To specify the label to be rendered as the add new Button.\n   */\n  label: PropTypes.string,\n};\n\nexport default AddNew;\n","import React from \"react\";\n\nimport classnames from \"classnames\";\nimport { noop } from \"neetocist\";\nimport { joinHyphenCase } from \"neetocommons/utils/general\";\nimport { Typography } from \"neetoui\";\nimport PropTypes from \"prop-types\";\nimport { Link } from \"react-router-dom\";\n\nimport \"./menubar.scss\";\n\nconst Block = ({\n  url,\n  icon,\n  label,\n  count,\n  active = false,\n  onEdit,\n  onClick = noop,\n  className,\n  ...otherProps\n}) => {\n  const handleEdit = e => {\n    e.stopPropagation();\n    onEdit && onEdit();\n  };\n\n  const Parent = url ? Link : props => <button {...props} />;\n\n  return (\n    <Parent\n      data-cy={otherProps[\"data-cy\"] || \"menubar-block\"}\n      to={url}\n      className={classnames(\"neeto-molecules-menubar__block\", {\n        \"neeto-molecules-menubar__block--editable\": !!onEdit,\n        \"neeto-molecules-menubar__block--active\": active,\n        [className]: className,\n      })}\n      {...{ onClick, ...otherProps }}\n    >\n      <div\n        className=\"neeto-molecules-menubar__block-label\"\n        data-cy={joinHyphenCase(\"menubar-block-label\", label)}\n      >\n        {icon && <i className=\"neeto-molecules-menubar__block-icon\">{icon}</i>}\n        <Typography component=\"span\" style=\"h5\" title={label} weight=\"medium\">\n          {label}\n        </Typography>\n      </div>\n      {Number.isInteger(count) && (\n        <div onClick={handleEdit}>\n          <Typography component=\"span\" style=\"h5\" weight=\"medium\">\n            {count}\n          </Typography>\n        </div>\n      )}\n    </Parent>\n  );\n};\n\nBlock.propTypes = {\n  /**\n   * To provide the url of the Block.\n   */\n  url: PropTypes.string,\n  /**\n   * To provide the icon of the Block.\n   */\n  icon: PropTypes.node,\n  /**\n   * To provide the label of the Block.\n   */\n  label: PropTypes.string,\n  /**\n   * To specify the count of items in the Block.\n   */\n  count: PropTypes.number,\n  /**\n   * To specify whether the Block is active.\n   */\n  active: PropTypes.bool,\n  /**\n   * The handler function that is called when the number is clicked.\n   */\n  onEdit: PropTypes.func,\n  /**\n   * To provide a callback function on click of the Block.\n   */\n  onClick: PropTypes.func,\n  /**\n   * To specify external classnames as overrides to the Block.\n   */\n  className: PropTypes.string,\n};\n\nexport default Block;\n","import React from \"react\";\n\nimport classnames from \"classnames\";\nimport { Typography } from \"neetoui\";\nimport PropTypes from \"prop-types\";\n\nimport \"./menubar.scss\";\n\nconst Item = ({\n  label = \"\",\n  description = \"\",\n  active = false,\n  className = \"\",\n  ...otherProps\n}) => (\n  <button\n    className={classnames(\"neeto-molecules-menubar__item\", {\n      \"neeto-molecules-menubar__item--active\": active,\n      [className]: className,\n    })}\n    {...otherProps}\n  >\n    <Typography\n      className=\"neeto-molecules-menubar__item-header\"\n      component=\"h5\"\n      style=\"h4\"\n    >\n      {label}\n    </Typography>\n    <Typography className=\"neeto-molecules-menubar__item-desc\" style=\"body3\">\n      {description}\n    </Typography>\n  </button>\n);\n\nItem.propTypes = {\n  /**\n   * To specify the text to be rendered as the label.\n   */\n  label: PropTypes.string,\n  /**\n   * To specify the text to be rendered as the description.\n   */\n  description: PropTypes.string,\n  /**\n   * To specify the current Item is active.\n   */\n  active: PropTypes.bool,\n  /**\n   * To specify external classnames as overrides to the Item.\n   */\n  className: PropTypes.string,\n};\n\nexport default Item;\n","export const UNSUPPORTED_INPUT_PROPS = [\"tReady\"];\n","import React from \"react\";\n\nimport withT from \"neetocommons/react-utils/withT\";\nimport { Search as NeetoUISearchIcon, Close } from \"neetoicons\";\nimport { Button, Input } from \"neetoui\";\nimport PropTypes from \"prop-types\";\nimport { omit } from \"ramda\";\n\nimport { UNSUPPORTED_INPUT_PROPS } from \"./constants\";\nimport \"./menubar.scss\";\n\nconst Search = withT(({ t, isCollapsed = true, onCollapse, ...props }) => (\n  <>\n    {!isCollapsed && (\n      <div className=\"neeto-molecules-menubar__search\">\n        <Input\n          placeholder={t(\"neetoMolecules.common.actions.search\")}\n          prefix={<NeetoUISearchIcon />}\n          type=\"search\"\n          {...omit(UNSUPPORTED_INPUT_PROPS, props)}\n        />\n        <Button\n          data-cy=\"menubar-search-close-icon\"\n          icon={Close}\n          style=\"text\"\n          onClick={onCollapse}\n        />\n      </div>\n    )}\n  </>\n));\n\nSearch.propTypes = {\n  /**\n   * To specify whether the search field is collapsed.\n   */\n  isCollapsed: PropTypes.bool,\n  /**\n   * To provide a callback function on collapse of the search field.\n   */\n  onCollapse: PropTypes.func,\n};\n\nexport default Search;\n","import React from \"react\";\n\nimport { Button } from \"neetoui\";\nimport PropTypes from \"prop-types\";\n\nimport \"./menubar.scss\";\n\nconst SubTitle = ({ children, iconProps, ...otherProps }) => (\n  <div\n    className=\"neeto-molecules-menubar__subtitle\"\n    data-cy={otherProps[\"data-cy\"] || \"menubar-subtitle-heading\"}\n    {...otherProps}\n  >\n    {children}\n    <div className=\"neeto-molecules-menubar__subtitle-actions\">\n      {iconProps?.map((iconProp, index) => (\n        <Button key={index} style=\"text\" {...iconProp} />\n      ))}\n    </div>\n  </div>\n);\n\nSubTitle.propTypes = {\n  /**\n   * To specify the content to be rendered as the SubTitle.\n   */\n  children: PropTypes.node,\n  /**\n   * To specify the icon properties.\n   */\n  iconProps: PropTypes.array,\n};\n\nexport default SubTitle;\n","import React from \"react\";\n\nimport classnames from \"classnames\";\nimport { Typography } from \"neetoui\";\nimport PropTypes from \"prop-types\";\nimport { CSSTransition } from \"react-transition-group\";\n\nimport AddNew from \"./AddNew\";\nimport Block from \"./Block\";\nimport Item from \"./Item\";\nimport \"./menubar.scss\";\nimport Search from \"./Search\";\nimport SubTitle from \"./SubTitle\";\n\nconst MenuBar = ({\n  title = \"\",\n  children,\n  showMenu = false,\n  className = \"\",\n  ...otherProps\n}) => (\n  <CSSTransition\n    unmountOnExit\n    classNames=\"neeto-molecules-menubar\"\n    in={showMenu}\n    timeout={300}\n  >\n    <div\n      className={classnames(\"neeto-molecules-menubar__wrapper\", {\n        [className]: className,\n      })}\n    >\n      <div\n        className=\"neeto-molecules-menubar__container\"\n        data-cy=\"menubar-container\"\n      >\n        {title && (\n          <Typography\n            className=\"neeto-molecules-menubar__title\"\n            data-cy={otherProps[\"data-cy\"] || \"menubar-heading\"}\n            lineHeight=\"tight\"\n            style=\"h2\"\n            weight=\"semibold\"\n          >\n            {title}\n          </Typography>\n        )}\n        {children}\n      </div>\n    </div>\n  </CSSTransition>\n);\n\nMenuBar.Block = Block;\nMenuBar.Item = Item;\nMenuBar.SubTitle = SubTitle;\nMenuBar.Search = Search;\nMenuBar.AddNew = AddNew;\n\nMenuBar.propTypes = {\n  /**\n   * To specify the content to be rendered as the title for the `MenuBar`.\n   */\n  title: PropTypes.node,\n  /**\n   * To specify the content to be rendered inside the `MenuBar`.\n   */\n  children: PropTypes.oneOfType([\n    PropTypes.arrayOf(PropTypes.node),\n    PropTypes.node,\n  ]),\n  /**\n   * To specify whether the MenuBar is visible or not.\n   */\n  showMenu: PropTypes.bool,\n  /**\n   * To specify external classnames for the MenuBar.\n   */\n  className: PropTypes.string,\n};\n\nexport default MenuBar;\n"],"names":["AddNew","_ref","_ref$label","label","onClick","otherProps","_objectWithoutProperties","_excluded","React","createElement","_extends","className","Button","icon","Plus","iconPosition","iconSize","size","style","Block","url","count","_ref$active","active","onEdit","_ref$onClick","noop","handleEdit","e","stopPropagation","Parent","Link","props","to","classnames","_defineProperty","_objectSpread","joinHyphenCase","Typography","component","title","weight","Number","isInteger","Item","_ref$description","description","_ref$className","UNSUPPORTED_INPUT_PROPS","Search","withT","t","_ref$isCollapsed","isCollapsed","onCollapse","Fragment","Input","placeholder","prefix","NeetoUISearchIcon","type","omit","Close","propTypes","PropTypes","bool","func","SubTitle","children","iconProps","map","iconProp","index","key","MenuBar","_ref$title","_ref$showMenu","showMenu","CSSTransition","unmountOnExit","classNames","timeout","lineHeight"],"mappings":"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"}

package/dist/cjs/Metadata.js

@@ -0,0 +1,195 @@
+'use strict';
+
+var slicedToArray = require('./slicedToArray-f320d9e7.js');
+var React = require('react');
+var classnames = require('classnames');
+var useBreakpoints = require('@bigbinary/neeto-commons-frontend/react-utils/useBreakpoints');
+var neetoIcons = require('@bigbinary/neeto-icons');
+var neetoui = require('@bigbinary/neetoui');
+var neetoCist = require('@bigbinary/neeto-cist');
+var reactI18next = require('react-i18next');
+var injectCss = require('./inject-css-80a5faa3.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
+var useBreakpoints__default = /*#__PURE__*/_interopDefaultLegacy(useBreakpoints);
+
+var Block = function Block(_ref) {
+  var title = _ref.title,
+    actionBlock = _ref.actionBlock,
+    children = _ref.children,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? "" : _ref$className;
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "neeto-molecules-metadata__block mb-5 w-full",
+    "data-cy": "neeto-molecules-metadata-block",
+    "data-testid": "metadata-block"
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "mb-2 flex w-full items-center justify-between gap-2"
+  }, title && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "flex w-60 items-center gap-2 break-all"
+  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    className: "neeto-ui-text-gray-700",
+    "data-testid": "metadata-block-title",
+    style: "h5",
+    textTransform: "uppercase",
+    weight: "bold"
+  }, title)), actionBlock && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "ml-auto"
+  }, actionBlock)), !!children && /*#__PURE__*/React__default["default"].createElement("div", {
+    "data-testid": "metadata-card",
+    className: classnames__default["default"]("neeto-ui-bg-white neeto-ui-border-gray-300 neeto-ui-rounded-lg neeto-molecules-metadata__card border p-4", className)
+  }, children));
+};
+
+var STYLES = {
+  inline: "inline",
+  multiline: "multiline"
+};
+var SIZES = {
+  small: "small",
+  medium: "medium"
+};
+var DEFAULT_TRUNCATE_AT = 3;
+
+var DetailsBlock = function DetailsBlock(_ref) {
+  var title = _ref.title,
+    actionBlock = _ref.actionBlock,
+    _ref$details = _ref.details,
+    details = _ref$details === void 0 ? [] : _ref$details,
+    className = _ref.className,
+    _ref$style = _ref.style,
+    style = _ref$style === void 0 ? STYLES.inline : _ref$style,
+    _ref$truncate = _ref.truncate,
+    truncate = _ref$truncate === void 0 ? false : _ref$truncate,
+    _ref$truncateAt = _ref.truncateAt,
+    truncateAt = _ref$truncateAt === void 0 ? DEFAULT_TRUNCATE_AT : _ref$truncateAt,
+    children = _ref.children;
+  var _useState = React.useState(false),
+    _useState2 = slicedToArray._slicedToArray(_useState, 2),
+    showTruncated = _useState2[0],
+    setShowTruncated = _useState2[1];
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var _ref2 = truncate ? [details.slice(0, truncateAt), details.slice(truncateAt)] : [details],
+    _ref3 = slicedToArray._slicedToArray(_ref2, 2),
+    visibleDetails = _ref3[0],
+    truncatedDetails = _ref3[1];
+  var renderDetailsValue = function renderDetailsValue(value) {
+    if (typeof value === "string") {
+      return /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+        className: "break-anywhere",
+        style: "body2"
+      }, value);
+    }
+    return /*#__PURE__*/React__default["default"].createElement("span", null, value);
+  };
+  return /*#__PURE__*/React__default["default"].createElement(Block, {
+    actionBlock: actionBlock,
+    className: className,
+    title: title !== null && title !== void 0 ? title : t("neetoMolecules.metadata.detailsTitle")
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "flex flex-col space-y-3",
+    "data-cy": "neeto-molecules-metadata-details-block"
+  }, visibleDetails.map(function (_ref4, index) {
+    var label = _ref4.label,
+      value = _ref4.value,
+      type = _ref4.type;
+    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
+      key: index
+    }, type === "divider" ? /*#__PURE__*/React__default["default"].createElement("hr", null) : /*#__PURE__*/React__default["default"].createElement("div", {
+      "data-testid": "details-card-detail-wrapper",
+      className: classnames__default["default"]("flex", {
+        "space-x-4": style === STYLES.inline,
+        "flex-col": style === STYLES.multiline
+      })
+    }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+      className: "neeto-ui-text-gray-600",
+      style: "body2"
+    }, label), renderDetailsValue(value)));
+  }), !truncate && children, showTruncated && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, truncatedDetails.map(function (_ref5, index) {
+    var label = _ref5.label,
+      value = _ref5.value,
+      type = _ref5.type;
+    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
+      key: index
+    }, type === "divider" ? /*#__PURE__*/React__default["default"].createElement("hr", null) : /*#__PURE__*/React__default["default"].createElement("div", {
+      className: classnames__default["default"]("flex", {
+        "space-x-4": style === STYLES.inline,
+        "flex-col": style === STYLES.multiline
+      })
+    }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+      className: "neeto-ui-text-gray-600",
+      style: "body2"
+    }, label), renderDetailsValue(value)));
+  }), children), truncate && neetoCist.isNotEmpty(truncatedDetails) && /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+    "data-testid": "expand-button",
+    icon: showTruncated ? neetoIcons.Up : neetoIcons.Down,
+    style: "link",
+    label: showTruncated ? t("neetoMolecules.metadata.card.viewLess") : t("neetoMolecules.metadata.card.viewMore"),
+    onClick: function onClick() {
+      return setShowTruncated(function (showTruncated) {
+        return !showTruncated;
+      });
+    }
+  })));
+};
+
+var css = ":root{--neeto-molecule-metadata-sidebar-width:384px}.neeto-molecules-metadata-list-panel__wrapper{height:100%;min-width:384px;min-width:var(--neeto-molecule-metadata-sidebar-width);position:relative;transition:all .15s;width:384px;width:var(--neeto-molecule-metadata-sidebar-width);z-index:51}@media screen and (min-width:1024px) and (max-width:1200px){.neeto-molecules-metadata-list-panel__wrapper{--neeto-molecule-metadata-sidebar-width:300px}}@media screen and (max-width:1024px){.neeto-molecules-metadata-list-panel__wrapper{position:fixed;right:0;top:0;transition:none}}@media screen and (max-width:576px){.neeto-molecules-metadata-list-panel__wrapper{height:100%;max-width:100%;min-width:0;width:100%}}.neeto-molecules-metadata-list-panel__wrapper--collapsed{max-width:0;min-width:0;width:0}.neeto-molecules-metadata-list-panel__wrapper--collapsed .neeto-molecules-metadata-list-panel__toggler{transform:scale(-1)}@media screen and (max-width:576px){.neeto-molecules-metadata-list-panel__wrapper--collapsed .neeto-molecules-metadata-list-panel__toggler{left:auto;right:8px}}.neeto-molecules-metadata-list-panel__container{display:flex;height:100%;justify-content:flex-end;overflow:hidden;width:100%}.neeto-molecules-metadata{min-width:384px;min-width:var(--neeto-molecule-metadata-sidebar-width);padding:24px;width:384px;width:var(--neeto-molecule-metadata-sidebar-width)}.neeto-molecules-metadata--size-small{--neeto-molecule-metadata-sidebar-width:340px}.neeto-molecules-metadata__card{width:100%}@media screen and (min-width:1024px) and (max-width:1200px){.neeto-molecules-metadata{--neeto-molecule-metadata-sidebar-width:300px}}@media screen and (max-width:576px){.neeto-molecules-metadata{padding-top:48px}}.neeto-molecules-metadata-list-panel__toggler{display:none!important;flex-shrink:0;position:absolute;right:calc(100% + 8px);top:8px}.neeto-molecules-metadata-list-panel__toggler .neeto-ui-btn__icon{transform:rotate(180deg)}@media screen and (max-width:1024px){.neeto-molecules-metadata-list-panel__toggler{display:inline-flex!important}}@media screen and (max-width:576px){.neeto-molecules-metadata-list-panel__toggler{right:8px}}.neeto-molecules-metadata-panel__backdrop{background-color:rgba(var(--neeto-ui-black),.4);display:none;height:100%;position:absolute;right:0;top:0;visibility:hidden;width:100%;z-index:51}@media screen and (min-width:576px) and (max-width:1024px){.neeto-molecules-metadata-panel__backdrop{display:block;visibility:visible}}@media screen and (min-width:576px) and (max-width:1200px){.neeto-molecules-metadata-panel__backdrop--extended{display:block;visibility:visible}}.break-anywhere{overflow-wrap:anywhere}";
+injectCss.n(css,{});
+
+var Metadata = function Metadata(_ref) {
+  var headerBlock = _ref.headerBlock,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? SIZES.medium : _ref$size,
+    children = _ref.children,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? "" : _ref$className;
+  var _useBreakpoints = useBreakpoints__default["default"](),
+    isSize = _useBreakpoints.isSize;
+  var isLargerScreen = isSize("desktop") || isSize("largeDesktop");
+  var _useState = React.useState(!isLargerScreen),
+    _useState2 = slicedToArray._slicedToArray(_useState, 2),
+    isElementsPanelCollapsed = _useState2[0],
+    setIsElementsPanelCollapsed = _useState2[1];
+  React.useEffect(function () {
+    setIsElementsPanelCollapsed(!isLargerScreen);
+  }, [isLargerScreen]);
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, !isElementsPanelCollapsed && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "neeto-molecules-metadata-panel__backdrop",
+    onClick: function onClick() {
+      setIsElementsPanelCollapsed(!isElementsPanelCollapsed);
+    }
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: classnames__default["default"]("neeto-molecules-metadata-list-panel__wrapper", {
+      "neeto-molecules-metadata-list-panel__wrapper--collapsed": isElementsPanelCollapsed
+    })
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "neeto-molecules-metadata-list-panel__container"
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    "data-cy": "neeto-molecules-metadata-wrapper",
+    "data-testid": "metadata-wrapper",
+    className: classnames__default["default"]("neeto-ui-bg-gray-100 neeto-molecules-metadata h-screen flex-shrink-0 overflow-y-auto overflow-x-hidden", {
+      "neeto-molecules-metadata--size-large": size === SIZES.medium,
+      "neeto-molecules-metadata--size-small": size === SIZES.small
+    }, className)
+  }, headerBlock && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "neeto-molecules-metadata__header mb-5 flex w-full justify-center",
+    "data-cy": "neeto-molecules-metadata-header",
+    "data-testid": "metadata-header"
+  }, headerBlock), children)), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+    className: "neeto-molecules-metadata-list-panel__toggler",
+    icon: neetoIcons.Collapse,
+    style: "secondary",
+    onClick: function onClick() {
+      setIsElementsPanelCollapsed(!isElementsPanelCollapsed);
+    }
+  })));
+};
+Metadata.Block = Block;
+Metadata.DetailsBlock = DetailsBlock;
+
+module.exports = Metadata;
+//# sourceMappingURL=Metadata.js.map

package/dist/cjs/Metadata.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Metadata.js","sources":["../../src/components/Metadata/Block.jsx","../../src/components/Metadata/constants.js","../../src/components/Metadata/DetailsBlock.jsx","../../src/components/Metadata/index.jsx"],"sourcesContent":["import React from \"react\";\n\nimport classnames from \"classnames\";\nimport { Typography } from \"neetoui\";\nimport PropTypes from \"prop-types\";\n\nconst Block = ({ title, actionBlock, children, className = \"\" }) => (\n  <div\n    className=\"neeto-molecules-metadata__block mb-5 w-full\"\n    data-cy=\"neeto-molecules-metadata-block\"\n    data-testid=\"metadata-block\"\n  >\n    <div className=\"mb-2 flex w-full items-center justify-between gap-2\">\n      {title && (\n        <div className=\"flex w-60 items-center gap-2 break-all\">\n          <Typography\n            className=\"neeto-ui-text-gray-700\"\n            data-testid=\"metadata-block-title\"\n            style=\"h5\"\n            textTransform=\"uppercase\"\n            weight=\"bold\"\n          >\n            {title}\n          </Typography>\n        </div>\n      )}\n      {actionBlock && <div className=\"ml-auto\">{actionBlock}</div>}\n    </div>\n    {!!children && (\n      <div\n        data-testid=\"metadata-card\"\n        className={classnames(\n          \"neeto-ui-bg-white neeto-ui-border-gray-300 neeto-ui-rounded-lg neeto-molecules-metadata__card border p-4\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    )}\n  </div>\n);\n\nBlock.propTypes = {\n  /**\n   * To specify the content to be rendered on the right side of the title.\n   */\n  actionBlock: PropTypes.node,\n  /**\n   * To specify the title of the block.\n   */\n  title: PropTypes.string,\n  /**\n   * The content to be rendered inside the block.\n   */\n  children: PropTypes.oneOfType([\n    PropTypes.arrayOf(PropTypes.node),\n    PropTypes.node,\n  ]),\n  /**\n   * To specify external classNames as overrides to the `Block` component.\n   */\n  className: PropTypes.string,\n};\n\nexport default Block;\n","export const STYLES = { inline: \"inline\", multiline: \"multiline\" };\n\nexport const SIZES = { small: \"small\", medium: \"medium\" };\n\nexport const DEFAULT_TRUNCATE_AT = 3;\n","import React, { useState } from \"react\";\n\nimport classnames from \"classnames\";\nimport { isNotEmpty } from \"neetocist\";\nimport { Down, Up } from \"neetoicons\";\nimport { Button, Typography } from \"neetoui\";\nimport PropTypes from \"prop-types\";\nimport { useTranslation } from \"react-i18next\";\n\nimport Block from \"./Block\";\nimport { DEFAULT_TRUNCATE_AT, STYLES } from \"./constants\";\n\nconst DetailsBlock = ({\n  title,\n  actionBlock,\n  details = [],\n  className,\n  style = STYLES.inline,\n  truncate = false,\n  truncateAt = DEFAULT_TRUNCATE_AT,\n  children,\n}) => {\n  const [showTruncated, setShowTruncated] = useState(false);\n\n  const { t } = useTranslation();\n\n  const [visibleDetails, truncatedDetails] = truncate\n    ? [details.slice(0, truncateAt), details.slice(truncateAt)]\n    : [details];\n\n  const renderDetailsValue = value => {\n    if (typeof value === \"string\") {\n      return (\n        <Typography className=\"break-anywhere\" style=\"body2\">\n          {value}\n        </Typography>\n      );\n    }\n\n    return <span>{value}</span>;\n  };\n\n  return (\n    <Block\n      {...{ actionBlock, className }}\n      title={title ?? t(\"neetoMolecules.metadata.detailsTitle\")}\n    >\n      <div\n        className=\"flex flex-col space-y-3\"\n        data-cy=\"neeto-molecules-metadata-details-block\"\n      >\n        {visibleDetails.map(({ label, value, type }, index) => (\n          <React.Fragment key={index}>\n            {type === \"divider\" ? (\n              <hr />\n            ) : (\n              <div\n                data-testid=\"details-card-detail-wrapper\"\n                className={classnames(\"flex\", {\n                  \"space-x-4\": style === STYLES.inline,\n                  \"flex-col\": style === STYLES.multiline,\n                })}\n              >\n                <Typography className=\"neeto-ui-text-gray-600\" style=\"body2\">\n                  {label}\n                </Typography>\n                {renderDetailsValue(value)}\n              </div>\n            )}\n          </React.Fragment>\n        ))}\n        {!truncate && children}\n        {showTruncated && (\n          <>\n            {truncatedDetails.map(({ label, value, type }, index) => (\n              <React.Fragment key={index}>\n                {type === \"divider\" ? (\n                  <hr />\n                ) : (\n                  <div\n                    className={classnames(\"flex\", {\n                      \"space-x-4\": style === STYLES.inline,\n                      \"flex-col\": style === STYLES.multiline,\n                    })}\n                  >\n                    <Typography\n                      className=\"neeto-ui-text-gray-600\"\n                      style=\"body2\"\n                    >\n                      {label}\n                    </Typography>\n                    {renderDetailsValue(value)}\n                  </div>\n                )}\n              </React.Fragment>\n            ))}\n            {children}\n          </>\n        )}\n        {truncate && isNotEmpty(truncatedDetails) && (\n          <Button\n            data-testid=\"expand-button\"\n            icon={showTruncated ? Up : Down}\n            style=\"link\"\n            label={\n              showTruncated\n                ? t(\"neetoMolecules.metadata.card.viewLess\")\n                : t(\"neetoMolecules.metadata.card.viewMore\")\n            }\n            onClick={() => setShowTruncated(showTruncated => !showTruncated)}\n          />\n        )}\n      </div>\n    </Block>\n  );\n};\n\nDetailsBlock.propTypes = {\n  /**\n   * To specify the content to be rendered on the right side of the title.\n   */\n  actionBlock: PropTypes.node,\n  /**\n   * To specify the title of the block.\n   */\n  title: PropTypes.string,\n  /**\n   * The details to be rendered inside the block.\n   */\n  details: PropTypes.arrayOf(\n    PropTypes.shape({\n      label: PropTypes.string,\n      value: PropTypes.node,\n      type: PropTypes.string,\n    })\n  ),\n  /**\n   * To specify whether the label and value should be rendered in a single line or in two lines.\n   */\n  style: PropTypes.oneOf([\"inline\", \"multiline\"]),\n  /**\n   * To specify whether the visible details should be truncated at a specific point.\n   */\n  truncate: PropTypes.bool,\n  /**\n   * To specify the position at which the details should be truncated and `View more` button should be shown.\n   */\n  truncateAt: PropTypes.number,\n  /**\n   * To specify external classNames as overrides to the `DetailsBlock` component.\n   */\n  className: PropTypes.string,\n  /**\n   * The additional content to be rendered inside the block.\n   */\n  children: PropTypes.oneOfType([\n    PropTypes.arrayOf(PropTypes.node),\n    PropTypes.node,\n  ]),\n};\n\nexport default DetailsBlock;\n","import React, { useEffect, useState } from \"react\";\n\nimport classnames from \"classnames\";\nimport useBreakpoints from \"neetocommons/react-utils/useBreakpoints\";\nimport { Collapse } from \"neetoicons\";\nimport { Button } from \"neetoui\";\nimport PropTypes from \"prop-types\";\n\nimport Block from \"./Block\";\nimport { SIZES } from \"./constants\";\nimport DetailsBlock from \"./DetailsBlock\";\nimport \"./metadata.scss\";\n\nconst Metadata = ({\n  headerBlock,\n  size = SIZES.medium,\n  children,\n  className = \"\",\n}) => {\n  const { isSize } = useBreakpoints();\n  const isLargerScreen = isSize(\"desktop\") || isSize(\"largeDesktop\");\n  const [isElementsPanelCollapsed, setIsElementsPanelCollapsed] = useState(\n    !isLargerScreen\n  );\n\n  useEffect(() => {\n    setIsElementsPanelCollapsed(!isLargerScreen);\n  }, [isLargerScreen]);\n\n  return (\n    <>\n      {!isElementsPanelCollapsed && (\n        <div\n          className=\"neeto-molecules-metadata-panel__backdrop\"\n          onClick={() => {\n            setIsElementsPanelCollapsed(!isElementsPanelCollapsed);\n          }}\n        />\n      )}\n      <div\n        className={classnames(\"neeto-molecules-metadata-list-panel__wrapper\", {\n          \"neeto-molecules-metadata-list-panel__wrapper--collapsed\":\n            isElementsPanelCollapsed,\n        })}\n      >\n        <div className=\"neeto-molecules-metadata-list-panel__container\">\n          <div\n            data-cy=\"neeto-molecules-metadata-wrapper\"\n            data-testid=\"metadata-wrapper\"\n            className={classnames(\n              \"neeto-ui-bg-gray-100 neeto-molecules-metadata h-screen flex-shrink-0 overflow-y-auto overflow-x-hidden\",\n              {\n                \"neeto-molecules-metadata--size-large\": size === SIZES.medium,\n                \"neeto-molecules-metadata--size-small\": size === SIZES.small,\n              },\n              className\n            )}\n          >\n            {headerBlock && (\n              <div\n                className=\"neeto-molecules-metadata__header mb-5 flex w-full justify-center\"\n                data-cy=\"neeto-molecules-metadata-header\"\n                data-testid=\"metadata-header\"\n              >\n                {headerBlock}\n              </div>\n            )}\n            {children}\n          </div>\n        </div>\n        <Button\n          className=\"neeto-molecules-metadata-list-panel__toggler\"\n          icon={Collapse}\n          style=\"secondary\"\n          onClick={() => {\n            setIsElementsPanelCollapsed(!isElementsPanelCollapsed);\n          }}\n        />\n      </div>\n    </>\n  );\n};\n\nMetadata.Block = Block;\nMetadata.DetailsBlock = DetailsBlock;\n\nMetadata.propTypes = {\n  /**\n   * To specify the content to be rendered as the title of the `Metadata` wrapper.\n   */\n  headerBlock: PropTypes.node,\n  /**\n   * The content to be rendered inside the `Metadata` wrapper.\n   */\n  children: PropTypes.oneOfType([\n    PropTypes.arrayOf(PropTypes.node),\n    PropTypes.node,\n  ]),\n  /**\n   * To specify external classNames as overrides to the `Metadata` component.\n   */\n  className: PropTypes.string,\n  /**\n   * To set the size of the `Metadata` wrapper.\n   */\n  size: PropTypes.oneOf([\"small\", \"medium\"]),\n};\n\nexport default Metadata;\n"],"names":["Block","_ref","title","actionBlock","children","_ref$className","className","React","createElement","Typography","style","textTransform","weight","classnames","STYLES","inline","multiline","SIZES","small","medium","DEFAULT_TRUNCATE_AT","DetailsBlock","_ref$details","details","_ref$style","_ref$truncate","truncate","_ref$truncateAt","truncateAt","_useState","useState","_useState2","_slicedToArray","showTruncated","setShowTruncated","_useTranslation","useTranslation","t","_ref2","slice","_ref3","visibleDetails","truncatedDetails","renderDetailsValue","value","map","_ref4","index","label","type","Fragment","key","_ref5","isNotEmpty","Button","icon","Up","Down","onClick","Metadata","headerBlock","_ref$size","size","_useBreakpoints","useBreakpoints","isSize","isLargerScreen","isElementsPanelCollapsed","setIsElementsPanelCollapsed","useEffect","Collapse"],"mappings":"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"}