@bigbinary/neeto-molecules 3.3.18 → 3.3.20

package/README.md

@@ -69,6 +69,7 @@ https://neeto-molecules.neeto.com/
 - [ShareViaEmail](./docs/components/ShareViaEmail.md)
 - [ShareViaLink](./docs/components/ShareViaLink.md)
 - [Sidebar](./docs/components/Sidebar.md)
+- [StatusDropdown](./docs/components/StatusDropdown.md)
 - [StickyRibbonsContainer](./docs/components/StickyRibbonsContainer.md)
 - [SubHeader](./docs/components/SubHeader.md)
 - [SuffixedInput](./docs/components/SuffixedInput.md)

package/dist/MobilePreviewHeader.js

@@ -0,0 +1,25 @@
+import classnames from 'classnames';
+import Typography from '@bigbinary/neetoui/Typography';
+import { useTranslation } from 'react-i18next';
+import { jsx } from 'react/jsx-runtime';
+
+var MobilePreviewHeader = function MobilePreviewHeader(_ref) {
+  var _ref$className = _ref.className,
+    className = _ref$className === void 0 ? "" : _ref$className,
+    _ref$message = _ref.message,
+    message = _ref$message === void 0 ? "" : _ref$message;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  return /*#__PURE__*/jsx("div", {
+    className: classnames(["neeto-ui-bg-gray-200 px-6 py-5", className]),
+    "data-cy": "mobile-preview-header",
+    children: /*#__PURE__*/jsx(Typography, {
+      lineHeight: "normal",
+      style: "body2",
+      children: message || t("neetoMolecules.mobilePreview.message")
+    })
+  });
+};
+
+export { MobilePreviewHeader as default };
+//# sourceMappingURL=MobilePreviewHeader.js.map

package/dist/MobilePreviewHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MobilePreviewHeader.js","sources":["../src/components/MobilePreviewHeader/index.jsx"],"sourcesContent":["import classnames from \"classnames\";\nimport { Typography } from \"neetoui\";\nimport PropTypes from \"prop-types\";\nimport { useTranslation } from \"react-i18next\";\n\n// Had to disable this to populate content in description column.\n// eslint-disable-next-line @bigbinary/neeto/no-dumb-components-with-use-translation\nconst MobilePreviewHeader = ({ className = \"\", message = \"\" }) => {\n  const { t } = useTranslation();\n\n  return (\n    <div\n      className={classnames([\"neeto-ui-bg-gray-200 px-6 py-5\", className])}\n      data-cy=\"mobile-preview-header\"\n    >\n      <Typography lineHeight=\"normal\" style=\"body2\">\n        {message || t(\"neetoMolecules.mobilePreview.message\")}\n      </Typography>\n    </div>\n  );\n};\n\nMobilePreviewHeader.propTypes = {\n  /**\n   * To provide additional classes\n   */\n  className: PropTypes.string,\n  /**\n   * To provide custom message.\n   */\n  message: PropTypes.node,\n};\n\nexport default MobilePreviewHeader;\n"],"names":["MobilePreviewHeader","_ref","_ref$className","className","_ref$message","message","_useTranslation","useTranslation","t","_jsx","classnames","children","Typography","lineHeight","style"],"mappings":";;;;;AAOA,IAAMA,mBAAmB,GAAG,SAAtBA,mBAAmBA,CAAAC,IAAA,EAAyC;AAAA,EAAA,IAAAC,cAAA,GAAAD,IAAA,CAAnCE,SAAS;AAATA,IAAAA,SAAS,GAAAD,cAAA,KAAG,KAAA,CAAA,GAAA,EAAE,GAAAA,cAAA;IAAAE,YAAA,GAAAH,IAAA,CAAEI,OAAO;AAAPA,IAAAA,OAAO,GAAAD,YAAA,KAAG,KAAA,CAAA,GAAA,EAAE,GAAAA,YAAA,CAAA;AACzD,EAAA,IAAAE,eAAA,GAAcC,cAAc,EAAE;IAAtBC,CAAC,GAAAF,eAAA,CAADE,CAAC,CAAA;AAET,EAAA,oBACEC,GAAA,CAAA,KAAA,EAAA;IACEN,SAAS,EAAEO,UAAU,CAAC,CAAC,gCAAgC,EAAEP,SAAS,CAAC,CAAE;AACrE,IAAA,SAAA,EAAQ,uBAAuB;IAAAQ,QAAA,eAE/BF,GAAA,CAACG,UAAU,EAAA;AAACC,MAAAA,UAAU,EAAC,QAAQ;AAACC,MAAAA,KAAK,EAAC,OAAO;AAAAH,MAAAA,QAAA,EAC1CN,OAAO,IAAIG,CAAC,CAAC,sCAAsC,CAAA;KAC1C,CAAA;AAAC,GACV,CAAC,CAAA;AAEV;;;;"}

package/dist/StatusDropdown.js

@@ -0,0 +1,102 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { _findBy } from '@bigbinary/neeto-cist';
+import Dropdown from '@bigbinary/neetoui/Dropdown';
+import Spinner from '@bigbinary/neetoui/Spinner';
+import { memo } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { n } from './inject-css-c86de496.js';
+import Down from '@bigbinary/neeto-icons/Down';
+import Typography from '@bigbinary/neetoui/Typography';
+
+var NeetoUIMenu = Dropdown.Menu,
+  MenuItem = Dropdown.MenuItem;
+var Menu = function Menu(_ref) {
+  var onItemClick = _ref.onItemClick,
+    options = _ref.options,
+    _ref$shouldShowAllOpt = _ref.shouldShowAllOptions,
+    shouldShowAllOptions = _ref$shouldShowAllOpt === void 0 ? false : _ref$shouldShowAllOpt,
+    _ref$hiddenStatuses = _ref.hiddenStatuses,
+    hiddenStatuses = _ref$hiddenStatuses === void 0 ? [] : _ref$hiddenStatuses;
+  var allowedOptions = shouldShowAllOptions ? options : options.filter(function (status) {
+    return !hiddenStatuses.includes(status.value);
+  });
+  return /*#__PURE__*/jsx(NeetoUIMenu, {
+    "data-testid": "status-dropdown-menu",
+    children: allowedOptions === null || allowedOptions === void 0 ? void 0 : allowedOptions.map(function (option) {
+      return /*#__PURE__*/jsx(MenuItem.Button, {
+        className: "status-dropdown-item--".concat(option.color),
+        "data-testid": "status-dropdown-item-".concat(option.value),
+        onClick: function onClick() {
+          return onItemClick(option);
+        },
+        children: option.label
+      }, option.value);
+    })
+  });
+};
+var Menu$1 = /*#__PURE__*/memo(Menu);
+
+var css = ":root{--neeto-molecules-status-color-open:9,90,186;--neeto-molecules-status-color-done:189,100,13;--neeto-molecules-status-color-waiting:47,57,65;--neeto-molecules-status-color-red:187,18,26;--neeto-molecules-status-color-yellow:255,204,112;--neeto-molecules-status-color-violet:157,98,162;--neeto-molecules-status-color-pink:225,62,230;--neeto-molecules-status-color-teal:38,87,124;--neeto-molecules-status-color-cyan:66,160,157;--neeto-molecules-status-color-green:16,113,84;--neeto-molecules-status-bg-open:226,241,255;--neeto-molecules-status-bg-done:250,241,225;--neeto-molecules-status-bg-waiting:233,235,237;--neeto-molecules-status-bg-red:254,236,240;--neeto-molecules-status-bg-yellow:255,247,233;--neeto-molecules-status-bg-violet:235,222,255;--neeto-molecules-status-bg-pink:254,233,255;--neeto-molecules-status-bg-teal:228,244,255;--neeto-molecules-status-bg-cyan:224,255,254;--neeto-molecules-status-bg-green:224,244,238}.status-dropdown-target--open{background-color:#e2f1ff;background-color:rgb(var(--neeto-molecules-status-bg-open));color:#095aba;color:rgb(var(--neeto-molecules-status-color-open))}.status-dropdown-target--done{background-color:#faf1e1;background-color:rgb(var(--neeto-molecules-status-bg-done));color:#bd640d;color:rgb(var(--neeto-molecules-status-color-done))}.status-dropdown-target--waiting{background-color:#e9ebed;background-color:rgb(var(--neeto-molecules-status-bg-waiting));color:#2f3941;color:rgb(var(--neeto-molecules-status-color-waiting))}.status-dropdown-target--red{background-color:#feecf0;background-color:rgb(var(--neeto-molecules-status-bg-red));color:#bb121a;color:rgb(var(--neeto-molecules-status-color-red))}.status-dropdown-target--yellow{background-color:#fff7e9;background-color:rgb(var(--neeto-molecules-status-bg-yellow));color:#ffcc70;color:rgb(var(--neeto-molecules-status-color-yellow))}.status-dropdown-target--violet{background-color:#ebdeff;background-color:rgb(var(--neeto-molecules-status-bg-violet));color:#9d62a2;color:rgb(var(--neeto-molecules-status-color-violet))}.status-dropdown-target--pink{background-color:#fee9ff;background-color:rgb(var(--neeto-molecules-status-bg-pink));color:#e13ee6;color:rgb(var(--neeto-molecules-status-color-pink))}.status-dropdown-target--teal{background-color:#e4f4ff;background-color:rgb(var(--neeto-molecules-status-bg-teal));color:#26577c;color:rgb(var(--neeto-molecules-status-color-teal))}.status-dropdown-target--cyan{background-color:#e0fffe;background-color:rgb(var(--neeto-molecules-status-bg-cyan));color:#42a09d;color:rgb(var(--neeto-molecules-status-color-cyan))}.status-dropdown-target--green{background-color:#e0f4ee;background-color:rgb(var(--neeto-molecules-status-bg-green));color:#107154;color:rgb(var(--neeto-molecules-status-color-green))}.status-dropdown-item--open{color:#095aba!important;color:rgb(var(--neeto-molecules-status-color-open))!important}.status-dropdown-item--done{color:#bd640d!important;color:rgb(var(--neeto-molecules-status-color-done))!important}.status-dropdown-item--waiting{color:#2f3941!important;color:rgb(var(--neeto-molecules-status-color-waiting))!important}.status-dropdown-item--red{color:#bb121a!important;color:rgb(var(--neeto-molecules-status-color-red))!important}.status-dropdown-item--yellow{color:#ffcc70!important;color:rgb(var(--neeto-molecules-status-color-yellow))!important}.status-dropdown-item--violet{color:#9d62a2!important;color:rgb(var(--neeto-molecules-status-color-violet))!important}.status-dropdown-item--pink{color:#e13ee6!important;color:rgb(var(--neeto-molecules-status-color-pink))!important}.status-dropdown-item--teal{color:#26577c!important;color:rgb(var(--neeto-molecules-status-color-teal))!important}.status-dropdown-item--cyan{color:#42a09d!important;color:rgb(var(--neeto-molecules-status-color-cyan))!important}.status-dropdown-item--green{color:#107154!important;color:rgb(var(--neeto-molecules-status-color-green))!important}";
+n(css,{});
+
+var ICON_SIZE = 16;
+
+var Target = function Target(_ref) {
+  var color = _ref.color,
+    label = _ref.label;
+  var targetClassName = "neeto-ui-rounded-sm inline-block cursor-pointer py-0.5 px-2 status-dropdown-target--".concat(color);
+  return /*#__PURE__*/jsxs("div", {
+    className: targetClassName,
+    "data-testid": "status-dropdown",
+    children: [/*#__PURE__*/jsx(Typography, {
+      className: "inline",
+      style: "body2",
+      children: label
+    }), /*#__PURE__*/jsx(Down, {
+      className: "ml-2 inline",
+      size: ICON_SIZE
+    })]
+  });
+};
+var Target$1 = /*#__PURE__*/memo(Target);
+
+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(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 StatusDropdown = function StatusDropdown(_ref) {
+  var _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$hiddenStatuses = _ref.hiddenStatuses,
+    hiddenStatuses = _ref$hiddenStatuses === void 0 ? [] : _ref$hiddenStatuses,
+    _ref$isLoading = _ref.isLoading,
+    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
+    onItemClick = _ref.onItemClick,
+    options = _ref.options,
+    selectedValue = _ref.selectedValue,
+    _ref$shouldShowAllOpt = _ref.shouldShowAllOptions,
+    shouldShowAllOptions = _ref$shouldShowAllOpt === void 0 ? false : _ref$shouldShowAllOpt;
+  var selectedOption = _findBy({
+    value: selectedValue
+  }, options);
+  return /*#__PURE__*/jsx(Dropdown, {
+    disabled: disabled,
+    customTarget: function customTarget() {
+      return /*#__PURE__*/jsx(Target$1, _objectSpread({
+        label: selectedValue
+      }, selectedOption));
+    },
+    strategy: "fixed",
+    children: isLoading ? /*#__PURE__*/jsx("div", {
+      className: "flex w-full items-center justify-center py-8",
+      children: /*#__PURE__*/jsx(Spinner, {})
+    }) : /*#__PURE__*/jsx(Menu$1, {
+      hiddenStatuses: hiddenStatuses,
+      onItemClick: onItemClick,
+      options: options,
+      shouldShowAllOptions: shouldShowAllOptions
+    })
+  });
+};
+StatusDropdown.Menu = Menu$1;
+
+export { StatusDropdown as default };
+//# sourceMappingURL=StatusDropdown.js.map

package/dist/StatusDropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusDropdown.js","sources":["../src/components/StatusDropdown/Menu.jsx","../src/components/StatusDropdown/constants.js","../src/components/StatusDropdown/Target.jsx","../src/components/StatusDropdown/index.jsx"],"sourcesContent":["import { memo } from \"react\";\n\nimport { Dropdown } from \"neetoui\";\n\nconst { Menu: NeetoUIMenu, MenuItem } = Dropdown;\n\nconst Menu = ({\n  onItemClick,\n  options,\n  shouldShowAllOptions = false,\n  hiddenStatuses = [],\n}) => {\n  const allowedOptions = shouldShowAllOptions\n    ? options\n    : options.filter(status => !hiddenStatuses.includes(status.value));\n\n  return (\n    <NeetoUIMenu data-testid=\"status-dropdown-menu\">\n      {allowedOptions?.map(option => (\n        <MenuItem.Button\n          className={`status-dropdown-item--${option.color}`}\n          data-testid={`status-dropdown-item-${option.value}`}\n          key={option.value}\n          onClick={() => onItemClick(option)}\n        >\n          {option.label}\n        </MenuItem.Button>\n      ))}\n    </NeetoUIMenu>\n  );\n};\n\nexport default memo(Menu);\n","export const ICON_SIZE = 16;\n","import { memo } from \"react\";\n\nimport { Down } from \"neetoicons\";\nimport { Typography } from \"neetoui\";\n\nimport { ICON_SIZE } from \"./constants\";\n\nconst Target = ({ color, label }) => {\n  const targetClassName = `neeto-ui-rounded-sm inline-block cursor-pointer py-0.5 px-2 status-dropdown-target--${color}`;\n\n  return (\n    <div className={targetClassName} data-testid=\"status-dropdown\">\n      <Typography className=\"inline\" style=\"body2\">\n        {label}\n      </Typography>\n      <Down className=\"ml-2 inline\" size={ICON_SIZE} />\n    </div>\n  );\n};\n\nexport default memo(Target);\n","import { _findBy } from \"neetocist\";\nimport { Dropdown, Spinner } from \"neetoui\";\nimport PropTypes from \"prop-types\";\n\nimport Menu from \"./Menu\";\nimport \"./status-dropdown.scss\";\nimport Target from \"./Target\";\n\nconst StatusDropdown = ({\n  disabled = false,\n  hiddenStatuses = [],\n  isLoading = false,\n  onItemClick,\n  options,\n  selectedValue,\n  shouldShowAllOptions = false,\n}) => {\n  const selectedOption = _findBy({ value: selectedValue }, options);\n\n  return (\n    <Dropdown\n      {...{ disabled }}\n      customTarget={() => <Target label={selectedValue} {...selectedOption} />}\n      strategy=\"fixed\"\n    >\n      {isLoading ? (\n        <div className=\"flex w-full items-center justify-center py-8\">\n          <Spinner />\n        </div>\n      ) : (\n        <Menu\n          {...{ hiddenStatuses, onItemClick, options, shouldShowAllOptions }}\n        />\n      )}\n    </Dropdown>\n  );\n};\n\nStatusDropdown.Menu = Menu;\n\nStatusDropdown.propTypes = {\n  /**\n   * This prop will decide whether the dropdown is disabled or not.\n   */\n  disabled: PropTypes.bool,\n  /**\n   * Statuses to be hidden when shouldShowAllOptions is false.\n   */\n  hiddenStatuses: PropTypes.array,\n  /**\n   * This prop will decide whether the dropdown is in loading state or not.\n   */\n  isLoading: PropTypes.bool,\n  /**\n   * Function to be called when a menu item is clicked.\n   */\n  onItemClick: PropTypes.func,\n  /**\n   * The items that should be shown in the dropdown.\n   */\n  options: PropTypes.arrayOf(\n    PropTypes.shape({\n      label: PropTypes.string,\n      value: PropTypes.string,\n      color: PropTypes.string,\n    })\n  ),\n  /**\n   * The selected value.\n   */\n  selectedValue: PropTypes.string,\n  /**\n   * This prop will decide whether all options should be shown or not.  If set to false, the items in hiddenStatuses will not be shown.\n   */\n  shouldShowAllOptions: PropTypes.bool,\n};\n\nexport default StatusDropdown;\n"],"names":["NeetoUIMenu","Dropdown","Menu","MenuItem","_ref","onItemClick","options","_ref$shouldShowAllOpt","shouldShowAllOptions","_ref$hiddenStatuses","hiddenStatuses","allowedOptions","filter","status","includes","value","_jsx","children","map","option","Button","className","concat","color","onClick","label","memo","ICON_SIZE","Target","targetClassName","_jsxs","Typography","style","Down","size","StatusDropdown","_ref$disabled","disabled","_ref$isLoading","isLoading","selectedValue","selectedOption","_findBy","customTarget","_objectSpread","strategy","Spinner"],"mappings":"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"}

package/dist/cjs/MobilePreviewHeader.js

@@ -0,0 +1,32 @@
+'use strict';
+
+var classnames = require('classnames');
+var Typography = require('@bigbinary/neetoui/Typography');
+var reactI18next = require('react-i18next');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
+var Typography__default = /*#__PURE__*/_interopDefaultLegacy(Typography);
+
+var MobilePreviewHeader = function MobilePreviewHeader(_ref) {
+  var _ref$className = _ref.className,
+    className = _ref$className === void 0 ? "" : _ref$className,
+    _ref$message = _ref.message,
+    message = _ref$message === void 0 ? "" : _ref$message;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: classnames__default["default"](["neeto-ui-bg-gray-200 px-6 py-5", className]),
+    "data-cy": "mobile-preview-header",
+    children: /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+      lineHeight: "normal",
+      style: "body2",
+      children: message || t("neetoMolecules.mobilePreview.message")
+    })
+  });
+};
+
+module.exports = MobilePreviewHeader;
+//# sourceMappingURL=MobilePreviewHeader.js.map

package/dist/cjs/MobilePreviewHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MobilePreviewHeader.js","sources":["../../src/components/MobilePreviewHeader/index.jsx"],"sourcesContent":["import classnames from \"classnames\";\nimport { Typography } from \"neetoui\";\nimport PropTypes from \"prop-types\";\nimport { useTranslation } from \"react-i18next\";\n\n// Had to disable this to populate content in description column.\n// eslint-disable-next-line @bigbinary/neeto/no-dumb-components-with-use-translation\nconst MobilePreviewHeader = ({ className = \"\", message = \"\" }) => {\n  const { t } = useTranslation();\n\n  return (\n    <div\n      className={classnames([\"neeto-ui-bg-gray-200 px-6 py-5\", className])}\n      data-cy=\"mobile-preview-header\"\n    >\n      <Typography lineHeight=\"normal\" style=\"body2\">\n        {message || t(\"neetoMolecules.mobilePreview.message\")}\n      </Typography>\n    </div>\n  );\n};\n\nMobilePreviewHeader.propTypes = {\n  /**\n   * To provide additional classes\n   */\n  className: PropTypes.string,\n  /**\n   * To provide custom message.\n   */\n  message: PropTypes.node,\n};\n\nexport default MobilePreviewHeader;\n"],"names":["MobilePreviewHeader","_ref","_ref$className","className","_ref$message","message","_useTranslation","useTranslation","t","_jsx","classnames","children","Typography","lineHeight","style"],"mappings":";;;;;;;;;;;;AAOA,IAAMA,mBAAmB,GAAG,SAAtBA,mBAAmBA,CAAAC,IAAA,EAAyC;AAAA,EAAA,IAAAC,cAAA,GAAAD,IAAA,CAAnCE,SAAS;AAATA,IAAAA,SAAS,GAAAD,cAAA,KAAG,KAAA,CAAA,GAAA,EAAE,GAAAA,cAAA;IAAAE,YAAA,GAAAH,IAAA,CAAEI,OAAO;AAAPA,IAAAA,OAAO,GAAAD,YAAA,KAAG,KAAA,CAAA,GAAA,EAAE,GAAAA,YAAA,CAAA;AACzD,EAAA,IAAAE,eAAA,GAAcC,2BAAc,EAAE;IAAtBC,CAAC,GAAAF,eAAA,CAADE,CAAC,CAAA;AAET,EAAA,oBACEC,cAAA,CAAA,KAAA,EAAA;IACEN,SAAS,EAAEO,8BAAU,CAAC,CAAC,gCAAgC,EAAEP,SAAS,CAAC,CAAE;AACrE,IAAA,SAAA,EAAQ,uBAAuB;IAAAQ,QAAA,eAE/BF,cAAA,CAACG,8BAAU,EAAA;AAACC,MAAAA,UAAU,EAAC,QAAQ;AAACC,MAAAA,KAAK,EAAC,OAAO;AAAAH,MAAAA,QAAA,EAC1CN,OAAO,IAAIG,CAAC,CAAC,sCAAsC,CAAA;KAC1C,CAAA;AAAC,GACV,CAAC,CAAA;AAEV;;;;"}

package/dist/cjs/StatusDropdown.js

@@ -0,0 +1,112 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var neetoCist = require('@bigbinary/neeto-cist');
+var Dropdown = require('@bigbinary/neetoui/Dropdown');
+var Spinner = require('@bigbinary/neetoui/Spinner');
+var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+var injectCss = require('./inject-css-80a5faa3.js');
+var Down = require('@bigbinary/neeto-icons/Down');
+var Typography = require('@bigbinary/neetoui/Typography');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var Dropdown__default = /*#__PURE__*/_interopDefaultLegacy(Dropdown);
+var Spinner__default = /*#__PURE__*/_interopDefaultLegacy(Spinner);
+var Down__default = /*#__PURE__*/_interopDefaultLegacy(Down);
+var Typography__default = /*#__PURE__*/_interopDefaultLegacy(Typography);
+
+var NeetoUIMenu = Dropdown__default["default"].Menu,
+  MenuItem = Dropdown__default["default"].MenuItem;
+var Menu = function Menu(_ref) {
+  var onItemClick = _ref.onItemClick,
+    options = _ref.options,
+    _ref$shouldShowAllOpt = _ref.shouldShowAllOptions,
+    shouldShowAllOptions = _ref$shouldShowAllOpt === void 0 ? false : _ref$shouldShowAllOpt,
+    _ref$hiddenStatuses = _ref.hiddenStatuses,
+    hiddenStatuses = _ref$hiddenStatuses === void 0 ? [] : _ref$hiddenStatuses;
+  var allowedOptions = shouldShowAllOptions ? options : options.filter(function (status) {
+    return !hiddenStatuses.includes(status.value);
+  });
+  return /*#__PURE__*/jsxRuntime.jsx(NeetoUIMenu, {
+    "data-testid": "status-dropdown-menu",
+    children: allowedOptions === null || allowedOptions === void 0 ? void 0 : allowedOptions.map(function (option) {
+      return /*#__PURE__*/jsxRuntime.jsx(MenuItem.Button, {
+        className: "status-dropdown-item--".concat(option.color),
+        "data-testid": "status-dropdown-item-".concat(option.value),
+        onClick: function onClick() {
+          return onItemClick(option);
+        },
+        children: option.label
+      }, option.value);
+    })
+  });
+};
+var Menu$1 = /*#__PURE__*/React.memo(Menu);
+
+var css = ":root{--neeto-molecules-status-color-open:9,90,186;--neeto-molecules-status-color-done:189,100,13;--neeto-molecules-status-color-waiting:47,57,65;--neeto-molecules-status-color-red:187,18,26;--neeto-molecules-status-color-yellow:255,204,112;--neeto-molecules-status-color-violet:157,98,162;--neeto-molecules-status-color-pink:225,62,230;--neeto-molecules-status-color-teal:38,87,124;--neeto-molecules-status-color-cyan:66,160,157;--neeto-molecules-status-color-green:16,113,84;--neeto-molecules-status-bg-open:226,241,255;--neeto-molecules-status-bg-done:250,241,225;--neeto-molecules-status-bg-waiting:233,235,237;--neeto-molecules-status-bg-red:254,236,240;--neeto-molecules-status-bg-yellow:255,247,233;--neeto-molecules-status-bg-violet:235,222,255;--neeto-molecules-status-bg-pink:254,233,255;--neeto-molecules-status-bg-teal:228,244,255;--neeto-molecules-status-bg-cyan:224,255,254;--neeto-molecules-status-bg-green:224,244,238}.status-dropdown-target--open{background-color:#e2f1ff;background-color:rgb(var(--neeto-molecules-status-bg-open));color:#095aba;color:rgb(var(--neeto-molecules-status-color-open))}.status-dropdown-target--done{background-color:#faf1e1;background-color:rgb(var(--neeto-molecules-status-bg-done));color:#bd640d;color:rgb(var(--neeto-molecules-status-color-done))}.status-dropdown-target--waiting{background-color:#e9ebed;background-color:rgb(var(--neeto-molecules-status-bg-waiting));color:#2f3941;color:rgb(var(--neeto-molecules-status-color-waiting))}.status-dropdown-target--red{background-color:#feecf0;background-color:rgb(var(--neeto-molecules-status-bg-red));color:#bb121a;color:rgb(var(--neeto-molecules-status-color-red))}.status-dropdown-target--yellow{background-color:#fff7e9;background-color:rgb(var(--neeto-molecules-status-bg-yellow));color:#ffcc70;color:rgb(var(--neeto-molecules-status-color-yellow))}.status-dropdown-target--violet{background-color:#ebdeff;background-color:rgb(var(--neeto-molecules-status-bg-violet));color:#9d62a2;color:rgb(var(--neeto-molecules-status-color-violet))}.status-dropdown-target--pink{background-color:#fee9ff;background-color:rgb(var(--neeto-molecules-status-bg-pink));color:#e13ee6;color:rgb(var(--neeto-molecules-status-color-pink))}.status-dropdown-target--teal{background-color:#e4f4ff;background-color:rgb(var(--neeto-molecules-status-bg-teal));color:#26577c;color:rgb(var(--neeto-molecules-status-color-teal))}.status-dropdown-target--cyan{background-color:#e0fffe;background-color:rgb(var(--neeto-molecules-status-bg-cyan));color:#42a09d;color:rgb(var(--neeto-molecules-status-color-cyan))}.status-dropdown-target--green{background-color:#e0f4ee;background-color:rgb(var(--neeto-molecules-status-bg-green));color:#107154;color:rgb(var(--neeto-molecules-status-color-green))}.status-dropdown-item--open{color:#095aba!important;color:rgb(var(--neeto-molecules-status-color-open))!important}.status-dropdown-item--done{color:#bd640d!important;color:rgb(var(--neeto-molecules-status-color-done))!important}.status-dropdown-item--waiting{color:#2f3941!important;color:rgb(var(--neeto-molecules-status-color-waiting))!important}.status-dropdown-item--red{color:#bb121a!important;color:rgb(var(--neeto-molecules-status-color-red))!important}.status-dropdown-item--yellow{color:#ffcc70!important;color:rgb(var(--neeto-molecules-status-color-yellow))!important}.status-dropdown-item--violet{color:#9d62a2!important;color:rgb(var(--neeto-molecules-status-color-violet))!important}.status-dropdown-item--pink{color:#e13ee6!important;color:rgb(var(--neeto-molecules-status-color-pink))!important}.status-dropdown-item--teal{color:#26577c!important;color:rgb(var(--neeto-molecules-status-color-teal))!important}.status-dropdown-item--cyan{color:#42a09d!important;color:rgb(var(--neeto-molecules-status-color-cyan))!important}.status-dropdown-item--green{color:#107154!important;color:rgb(var(--neeto-molecules-status-color-green))!important}";
+injectCss.n(css,{});
+
+var ICON_SIZE = 16;
+
+var Target = function Target(_ref) {
+  var color = _ref.color,
+    label = _ref.label;
+  var targetClassName = "neeto-ui-rounded-sm inline-block cursor-pointer py-0.5 px-2 status-dropdown-target--".concat(color);
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: targetClassName,
+    "data-testid": "status-dropdown",
+    children: [/*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+      className: "inline",
+      style: "body2",
+      children: label
+    }), /*#__PURE__*/jsxRuntime.jsx(Down__default["default"], {
+      className: "ml-2 inline",
+      size: ICON_SIZE
+    })]
+  });
+};
+var Target$1 = /*#__PURE__*/React.memo(Target);
+
+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__default["default"](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 StatusDropdown = function StatusDropdown(_ref) {
+  var _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$hiddenStatuses = _ref.hiddenStatuses,
+    hiddenStatuses = _ref$hiddenStatuses === void 0 ? [] : _ref$hiddenStatuses,
+    _ref$isLoading = _ref.isLoading,
+    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
+    onItemClick = _ref.onItemClick,
+    options = _ref.options,
+    selectedValue = _ref.selectedValue,
+    _ref$shouldShowAllOpt = _ref.shouldShowAllOptions,
+    shouldShowAllOptions = _ref$shouldShowAllOpt === void 0 ? false : _ref$shouldShowAllOpt;
+  var selectedOption = neetoCist._findBy({
+    value: selectedValue
+  }, options);
+  return /*#__PURE__*/jsxRuntime.jsx(Dropdown__default["default"], {
+    disabled: disabled,
+    customTarget: function customTarget() {
+      return /*#__PURE__*/jsxRuntime.jsx(Target$1, _objectSpread({
+        label: selectedValue
+      }, selectedOption));
+    },
+    strategy: "fixed",
+    children: isLoading ? /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "flex w-full items-center justify-center py-8",
+      children: /*#__PURE__*/jsxRuntime.jsx(Spinner__default["default"], {})
+    }) : /*#__PURE__*/jsxRuntime.jsx(Menu$1, {
+      hiddenStatuses: hiddenStatuses,
+      onItemClick: onItemClick,
+      options: options,
+      shouldShowAllOptions: shouldShowAllOptions
+    })
+  });
+};
+StatusDropdown.Menu = Menu$1;
+
+module.exports = StatusDropdown;
+//# sourceMappingURL=StatusDropdown.js.map

package/dist/cjs/StatusDropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusDropdown.js","sources":["../../src/components/StatusDropdown/Menu.jsx","../../src/components/StatusDropdown/constants.js","../../src/components/StatusDropdown/Target.jsx","../../src/components/StatusDropdown/index.jsx"],"sourcesContent":["import { memo } from \"react\";\n\nimport { Dropdown } from \"neetoui\";\n\nconst { Menu: NeetoUIMenu, MenuItem } = Dropdown;\n\nconst Menu = ({\n  onItemClick,\n  options,\n  shouldShowAllOptions = false,\n  hiddenStatuses = [],\n}) => {\n  const allowedOptions = shouldShowAllOptions\n    ? options\n    : options.filter(status => !hiddenStatuses.includes(status.value));\n\n  return (\n    <NeetoUIMenu data-testid=\"status-dropdown-menu\">\n      {allowedOptions?.map(option => (\n        <MenuItem.Button\n          className={`status-dropdown-item--${option.color}`}\n          data-testid={`status-dropdown-item-${option.value}`}\n          key={option.value}\n          onClick={() => onItemClick(option)}\n        >\n          {option.label}\n        </MenuItem.Button>\n      ))}\n    </NeetoUIMenu>\n  );\n};\n\nexport default memo(Menu);\n","export const ICON_SIZE = 16;\n","import { memo } from \"react\";\n\nimport { Down } from \"neetoicons\";\nimport { Typography } from \"neetoui\";\n\nimport { ICON_SIZE } from \"./constants\";\n\nconst Target = ({ color, label }) => {\n  const targetClassName = `neeto-ui-rounded-sm inline-block cursor-pointer py-0.5 px-2 status-dropdown-target--${color}`;\n\n  return (\n    <div className={targetClassName} data-testid=\"status-dropdown\">\n      <Typography className=\"inline\" style=\"body2\">\n        {label}\n      </Typography>\n      <Down className=\"ml-2 inline\" size={ICON_SIZE} />\n    </div>\n  );\n};\n\nexport default memo(Target);\n","import { _findBy } from \"neetocist\";\nimport { Dropdown, Spinner } from \"neetoui\";\nimport PropTypes from \"prop-types\";\n\nimport Menu from \"./Menu\";\nimport \"./status-dropdown.scss\";\nimport Target from \"./Target\";\n\nconst StatusDropdown = ({\n  disabled = false,\n  hiddenStatuses = [],\n  isLoading = false,\n  onItemClick,\n  options,\n  selectedValue,\n  shouldShowAllOptions = false,\n}) => {\n  const selectedOption = _findBy({ value: selectedValue }, options);\n\n  return (\n    <Dropdown\n      {...{ disabled }}\n      customTarget={() => <Target label={selectedValue} {...selectedOption} />}\n      strategy=\"fixed\"\n    >\n      {isLoading ? (\n        <div className=\"flex w-full items-center justify-center py-8\">\n          <Spinner />\n        </div>\n      ) : (\n        <Menu\n          {...{ hiddenStatuses, onItemClick, options, shouldShowAllOptions }}\n        />\n      )}\n    </Dropdown>\n  );\n};\n\nStatusDropdown.Menu = Menu;\n\nStatusDropdown.propTypes = {\n  /**\n   * This prop will decide whether the dropdown is disabled or not.\n   */\n  disabled: PropTypes.bool,\n  /**\n   * Statuses to be hidden when shouldShowAllOptions is false.\n   */\n  hiddenStatuses: PropTypes.array,\n  /**\n   * This prop will decide whether the dropdown is in loading state or not.\n   */\n  isLoading: PropTypes.bool,\n  /**\n   * Function to be called when a menu item is clicked.\n   */\n  onItemClick: PropTypes.func,\n  /**\n   * The items that should be shown in the dropdown.\n   */\n  options: PropTypes.arrayOf(\n    PropTypes.shape({\n      label: PropTypes.string,\n      value: PropTypes.string,\n      color: PropTypes.string,\n    })\n  ),\n  /**\n   * The selected value.\n   */\n  selectedValue: PropTypes.string,\n  /**\n   * This prop will decide whether all options should be shown or not.  If set to false, the items in hiddenStatuses will not be shown.\n   */\n  shouldShowAllOptions: PropTypes.bool,\n};\n\nexport default StatusDropdown;\n"],"names":["NeetoUIMenu","Dropdown","Menu","MenuItem","_ref","onItemClick","options","_ref$shouldShowAllOpt","shouldShowAllOptions","_ref$hiddenStatuses","hiddenStatuses","allowedOptions","filter","status","includes","value","_jsx","children","map","option","Button","className","concat","color","onClick","label","memo","ICON_SIZE","Target","targetClassName","_jsxs","Typography","style","Down","size","StatusDropdown","_ref$disabled","disabled","_ref$isLoading","isLoading","selectedValue","selectedOption","_findBy","customTarget","_objectSpread","strategy","Spinner"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neeto-molecules",
-  "version": "3.3.18",
+  "version": "3.3.20",
   "description": "A package of reusable molecular components for neeto products.",
   "repository": "git@github.com:bigbinary/neeto-molecules.git",
   "author": "Amaljith K <amaljith.k@bigbinary.com>",

package/src/translations/en.json

@@ -738,6 +738,9 @@
     },
     "deviceIncompatibility": {
       "description": "The design tab is currently not supported in this screen size. Please switch to a screen larger than 768px wide."
+    },
+    "mobilePreview": {
+      "message": "The following section is a preview based on the changes you have made above."
     }
   }
 }

package/types/MobilePreviewHeader.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+/**
+ *
+ * Can be used to show preview message for smaller viewports.
+ *
+ * @example 
+ *
+ * import MobilePreviewHeader from "@bigbinary/neeto-molecules/MobilePreviewHeader";
+ * 
+ * const App = () => <MobilePreviewHeader />;
+ * @endexample
+*/
+const MobilePreviewHeader: React.FC<{
+  message?: React.ReactNode;
+  className?: string;
+}>;
+export default MobilePreviewHeader;

package/types/StatusDropdown.d.ts

@@ -0,0 +1,72 @@
+import React from "react";
+/**
+ *
+ * The StatusDropdown component is used in neeto products for showing a dropdown
+ *
+ * to select the status of an item.
+ *
+ * ![Screenshot](https://github.com/user-attachments/assets/aed45df0-e216-4886-9013-7f4d4aa940bf|height=200|width=300)
+ *
+ * @example 
+ *
+ * import StatusDropdown from "@bigbinary/neeto-molecules/Sidebar";
+ * 
+ * const App = () => {
+ *   const [selectedStatus, setSelectedStatus] = React.useState("All");
+ * 
+ *   const options = [
+ *     { label: "All", value: "All", color: "red" },
+ *     { label: "Open", value: "Open", color: "green" },
+ *     { label: "In Progress", value: "In Progress", color: "yellow" },
+ *   ];
+ * 
+ *   return (
+ *     <div>
+ *       <StatusDropdown
+ *         shouldShowAllOptions
+ *         options={options}
+ *         selectedValue={selectedValue}
+ *         onItemClick={({ value }) => setSelectedStatus(value)}
+ *       />
+ *     </div>
+ *   );
+ * };
+ * @endexample
+ * @example 
+ *
+ * import StatusDropdown from "@bigbinary/neeto-molecules/Sidebar";
+ * 
+ * const App = () => {
+ *   const [selectedStatus, setSelectedStatus] = React.useState("All");
+ * 
+ *   const options = [
+ *     { label: "All", value: "All", color: "red" },
+ *     { label: "Open", value: "Open", color: "green" },
+ *     { label: "In Progress", value: "In Progress", color: "yellow" },
+ *   ];
+ * 
+ *   const hiddenStatuses = ["Open"];
+ * 
+ *   return (
+ *     <div>
+ *       <StatusDropdown
+ *         hiddenStatuses={hiddenStatuses}
+ *         options={options}
+ *         selectedValue={selectedValue}
+ *         onItemClick={({ value }) => setSelectedStatus(value)}
+ *       />
+ *     </div>
+ *   );
+ * };
+ * @endexample
+*/
+const StatusDropdown: React.FC<{
+  disabled?: boolean;
+  hiddenStatuses?: Array<string>;
+  isLoading?: boolean;
+  onItemClick: (status: object) => void;
+  options: Array<object>;
+  selectedValue: string;
+  shouldShowAllOptions?: boolean;
+}>;
+export default StatusDropdown;