@unbxd-ui/unbxd-react-components 0.2.221 → 0.3.1

package/components/Link/Link.stories.js

@@ -0,0 +1,489 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.WithUnderlineOnHover = exports.WithTextDecoration = exports.Success = exports.Sizes = exports.Secondary = exports.PropValidationTests = exports.Primary = exports.Interactive = exports.ExternalLinks = exports.Disabled = exports.Danger = exports.ButtonLinks = exports.AllVariations = exports.AllAppearances = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Link = _interopRequireWildcard(require("./Link"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+// Styles are loaded globally in .storybook/preview.js
+var _default = exports["default"] = {
+  title: 'Components/Link',
+  component: _Link["default"],
+  parameters: {
+    layout: 'centered',
+    docs: {
+      story: {
+        inline: true
+      }
+    },
+    backgrounds: {
+      "default": 'light',
+      values: [{
+        name: 'light',
+        value: '#ffffff'
+      }, {
+        name: 'dark',
+        value: '#333333'
+      }]
+    }
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    appearance: {
+      control: 'select',
+      options: Object.values(_Link.LinkAppearance),
+      description: 'The visual style of the link'
+    },
+    size: {
+      control: 'select',
+      options: Object.values(_Link.LinkSize),
+      description: 'The size of the link'
+    },
+    target: {
+      control: 'select',
+      options: Object.values(_Link.LinkTarget),
+      description: 'The target attribute for anchor links'
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Whether the link is disabled'
+    },
+    textDecoration: {
+      control: 'select',
+      options: ['underline', 'none', 'overline', 'line-through'],
+      description: 'Text decoration style for the link'
+    },
+    underlineOnHover: {
+      control: 'boolean',
+      description: 'Whether to show underline on hover (only if not already underlined)'
+    },
+    external: {
+      control: 'boolean',
+      description: 'Whether this is an external link (shows external icon)'
+    },
+    href: {
+      control: 'text',
+      description: 'URL for the link (renders as anchor tag when provided)'
+    },
+    onClick: {
+      action: 'clicked',
+      description: 'Link click handler'
+    },
+    'data-qa-id': {
+      control: 'text',
+      description: 'QA automation identifier for testing'
+    },
+    children: {
+      control: 'text',
+      description: 'Link content'
+    },
+    className: {
+      control: 'text',
+      description: 'Additional CSS classes'
+    }
+  }
+}; // Template for stories
+var Template = function Template(args) {
+  return /*#__PURE__*/_react["default"].createElement(_Link["default"], args);
+};
+
+// Primary link
+var Primary = exports.Primary = Template.bind({});
+Primary.args = {
+  children: 'Primary Link',
+  appearance: _Link.LinkAppearance.primary,
+  size: _Link.LinkSize.MEDIUM,
+  textDecoration: 'none',
+  onClick: undefined // Remove interactive behavior for display
+};
+
+// Secondary link
+var Secondary = exports.Secondary = Template.bind({});
+Secondary.args = {
+  children: 'Secondary Link',
+  appearance: _Link.LinkAppearance.secondary,
+  size: _Link.LinkSize.MEDIUM,
+  textDecoration: 'none',
+  onClick: undefined // Remove interactive behavior for display
+};
+
+// Danger link
+var Danger = exports.Danger = Template.bind({});
+Danger.args = {
+  children: 'Danger Link',
+  appearance: _Link.LinkAppearance.danger,
+  size: _Link.LinkSize.MEDIUM,
+  textDecoration: 'none',
+  onClick: undefined // Remove interactive behavior for display
+};
+
+// Success link
+var Success = exports.Success = Template.bind({});
+Success.args = {
+  children: 'Success Link',
+  appearance: _Link.LinkAppearance.success,
+  size: _Link.LinkSize.MEDIUM,
+  textDecoration: 'none',
+  onClick: undefined // Remove interactive behavior for display
+};
+
+// Link with text decoration
+var WithTextDecoration = exports.WithTextDecoration = Template.bind({});
+WithTextDecoration.args = {
+  children: 'Link with custom decoration',
+  textDecoration: 'underline',
+  appearance: _Link.LinkAppearance.primary,
+  onClick: undefined // Remove interactive behavior for display
+};
+
+// Link with underline on hover
+var WithUnderlineOnHover = exports.WithUnderlineOnHover = Template.bind({});
+WithUnderlineOnHover.args = {
+  children: 'Hover me to see underline',
+  appearance: _Link.LinkAppearance.primary,
+  underlineOnHover: true,
+  onClick: undefined // Remove interactive behavior for display
+};
+
+// Link sizes
+var Sizes = exports.Sizes = function Sizes() {
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '1rem',
+      alignItems: 'flex-start'
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    size: _Link.LinkSize.SMALL,
+    appearance: _Link.LinkAppearance.primary
+  }, "Small Link"), /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    size: _Link.LinkSize.MEDIUM,
+    appearance: _Link.LinkAppearance.primary
+  }, "Medium Link"), /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    size: _Link.LinkSize.LARGE,
+    appearance: _Link.LinkAppearance.primary
+  }, "Large Link"));
+};
+
+// Disabled state
+var Disabled = exports.Disabled = Template.bind({});
+Disabled.args = {
+  children: 'Disabled Link',
+  disabled: true,
+  appearance: _Link.LinkAppearance.primary,
+  size: _Link.LinkSize.MEDIUM,
+  textDecoration: 'none',
+  onClick: undefined // Remove interactive behavior for display
+};
+
+// External links
+var ExternalLinks = exports.ExternalLinks = function ExternalLinks() {
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '1rem',
+      alignItems: 'flex-start'
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    href: "https://google.com",
+    target: _Link.LinkTarget.BLANK,
+    external: true,
+    appearance: _Link.LinkAppearance.primary
+  }, "External Link with Icon"), /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    href: "https://github.com",
+    target: _Link.LinkTarget.BLANK,
+    external: true,
+    appearance: _Link.LinkAppearance.secondary
+  }, "GitHub Link"), /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    href: "/internal-page",
+    appearance: _Link.LinkAppearance.primary
+  }, "Internal Link"));
+};
+
+// All appearances
+var AllAppearances = exports.AllAppearances = function AllAppearances() {
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '1rem',
+      alignItems: 'flex-start'
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    appearance: _Link.LinkAppearance.primary
+  }, "Primary Link"), /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    appearance: _Link.LinkAppearance.secondary
+  }, "Secondary Link"), /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    appearance: _Link.LinkAppearance.danger
+  }, "Danger Link"), /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    appearance: _Link.LinkAppearance.success
+  }, "Success Link"));
+};
+
+// Button-style links (no href)
+var ButtonLinks = exports.ButtonLinks = function ButtonLinks() {
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      display: 'flex',
+      gap: '1rem',
+      alignItems: 'center'
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    appearance: _Link.LinkAppearance.primary,
+    onClick: function onClick() {
+      return alert('Button link clicked!');
+    }
+  }, "Button Link"), /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    appearance: _Link.LinkAppearance.secondary,
+    onClick: function onClick() {
+      return alert('Router link clicked!');
+    }
+  }, "Router Link"));
+};
+
+// Mixed states and variations
+var AllVariations = exports.AllVariations = function AllVariations() {
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '2rem'
+    }
+  }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("h4", {
+    style: {
+      margin: '0 0 1rem 0'
+    }
+  }, "Regular Links"), /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      display: 'flex',
+      gap: '1rem',
+      flexWrap: 'wrap'
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    appearance: _Link.LinkAppearance.primary
+  }, "Primary"), /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    appearance: _Link.LinkAppearance.secondary
+  }, "Secondary"), /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    appearance: _Link.LinkAppearance.danger
+  }, "Danger"), /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    appearance: _Link.LinkAppearance.success
+  }, "Success"))), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("h4", {
+    style: {
+      margin: '0 0 1rem 0'
+    }
+  }, "Links with Text Decoration"), /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      display: 'flex',
+      gap: '1rem',
+      flexWrap: 'wrap'
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    appearance: _Link.LinkAppearance.primary,
+    textDecoration: "underline"
+  }, "Underlined"), /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    appearance: _Link.LinkAppearance.primary,
+    textDecoration: "none"
+  }, "No decoration"), /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    appearance: _Link.LinkAppearance.primary,
+    textDecoration: "overline"
+  }, "Overlined"), /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    appearance: _Link.LinkAppearance.primary,
+    textDecoration: "line-through"
+  }, "Line-through"), /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    appearance: _Link.LinkAppearance.primary,
+    underlineOnHover: true
+  }, "Underline on hover"))), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("h4", {
+    style: {
+      margin: '0 0 1rem 0'
+    }
+  }, "Disabled Links"), /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      display: 'flex',
+      gap: '1rem',
+      flexWrap: 'wrap'
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    appearance: _Link.LinkAppearance.primary,
+    disabled: true
+  }, "Primary"), /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    appearance: _Link.LinkAppearance.secondary,
+    disabled: true
+  }, "Secondary"), /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    appearance: _Link.LinkAppearance.danger,
+    disabled: true
+  }, "Danger"), /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    appearance: _Link.LinkAppearance.success,
+    disabled: true
+  }, "Success"))), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("h4", {
+    style: {
+      margin: '0 0 1rem 0'
+    }
+  }, "External Links"), /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      display: 'flex',
+      gap: '1rem',
+      flexWrap: 'wrap'
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    href: "https://example.com",
+    target: _Link.LinkTarget.BLANK,
+    external: true,
+    appearance: _Link.LinkAppearance.primary
+  }, "Example.com"), /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    href: "https://github.com",
+    target: _Link.LinkTarget.BLANK,
+    external: true,
+    appearance: _Link.LinkAppearance.secondary
+  }, "GitHub"))));
+};
+
+// Prop validation tests
+var PropValidationTests = exports.PropValidationTests = function PropValidationTests() {
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '2rem'
+    }
+  }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("h4", {
+    style: {
+      margin: '0 0 1rem 0'
+    }
+  }, "Text Decoration Validation"), /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      display: 'flex',
+      gap: '1rem',
+      flexWrap: 'wrap'
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    textDecoration: "none"
+  }, "None (default)"), /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    textDecoration: "underline"
+  }, "Underline"), /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    textDecoration: "overline"
+  }, "Overline"), /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    textDecoration: "line-through"
+  }, "Line-through"))), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("h4", {
+    style: {
+      margin: '0 0 1rem 0'
+    }
+  }, "Appearance Validation"), /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      display: 'flex',
+      gap: '1rem',
+      flexWrap: 'wrap'
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    appearance: _Link.LinkAppearance.primary
+  }, "Primary"), /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    appearance: _Link.LinkAppearance.secondary
+  }, "Secondary"), /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    appearance: _Link.LinkAppearance.danger
+  }, "Danger"), /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    appearance: _Link.LinkAppearance.success
+  }, "Success"))), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("h4", {
+    style: {
+      margin: '0 0 1rem 0'
+    }
+  }, "Size Validation"), /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      display: 'flex',
+      gap: '1rem',
+      alignItems: 'baseline'
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    size: _Link.LinkSize.SMALL
+  }, "Small"), /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    size: _Link.LinkSize.MEDIUM
+  }, "Medium"), /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    size: _Link.LinkSize.LARGE
+  }, "Large"))), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("h4", {
+    style: {
+      margin: '0 0 1rem 0'
+    }
+  }, "Target Validation"), /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      display: 'flex',
+      gap: '1rem',
+      flexWrap: 'wrap'
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    target: _Link.LinkTarget.SELF,
+    onClick: undefined,
+    tabIndex: -1
+  }, "Self"), /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    target: _Link.LinkTarget.BLANK,
+    external: true,
+    onClick: undefined,
+    tabIndex: -1
+  }, "Blank"), /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    target: _Link.LinkTarget.PARENT,
+    onClick: undefined,
+    tabIndex: -1
+  }, "Parent"), /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    target: _Link.LinkTarget.TOP,
+    onClick: undefined,
+    tabIndex: -1
+  }, "Top"))), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("h4", {
+    style: {
+      margin: '0 0 1rem 0'
+    }
+  }, "Boolean Props Validation"), /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      display: 'flex',
+      gap: '1rem',
+      flexWrap: 'wrap'
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    disabled: true
+  }, "Disabled"), /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    external: true,
+    href: "javascript:void(0)",
+    target: _Link.LinkTarget.BLANK
+  }, "External"), /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    className: "custom-class"
+  }, "Custom Class"))), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("h4", {
+    style: {
+      margin: '0 0 1rem 0'
+    }
+  }, "Combined Props Test"), /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      display: 'flex',
+      gap: '1rem',
+      flexWrap: 'wrap'
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    appearance: _Link.LinkAppearance.primary,
+    size: _Link.LinkSize.LARGE,
+    textDecoration: "underline",
+    href: "https://example.com",
+    target: _Link.LinkTarget.BLANK,
+    external: true
+  }, "All Props Combined"), /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    appearance: _Link.LinkAppearance.danger,
+    size: _Link.LinkSize.SMALL,
+    textDecoration: "line-through",
+    disabled: true
+  }, "Disabled with Decoration"))));
+};
+
+// Interactive example with all controls
+var Interactive = exports.Interactive = Template.bind({});
+Interactive.args = {
+  children: 'Interactive Link',
+  appearance: _Link.LinkAppearance.primary,
+  size: _Link.LinkSize.MEDIUM,
+  disabled: false,
+  textDecoration: 'none',
+  underlineOnHover: false,
+  external: false,
+  href: '',
+  target: _Link.LinkTarget.SELF,
+  'data-qa-id': 'interactive-link'
+};

package/components/Link/index.js

@@ -0,0 +1,28 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "LinkAppearance", {
+  enumerable: true,
+  get: function get() {
+    return _Link.LinkAppearance;
+  }
+});
+Object.defineProperty(exports, "LinkSize", {
+  enumerable: true,
+  get: function get() {
+    return _Link.LinkSize;
+  }
+});
+Object.defineProperty(exports, "LinkTarget", {
+  enumerable: true,
+  get: function get() {
+    return _Link.LinkTarget;
+  }
+});
+exports["default"] = void 0;
+var _Link = _interopRequireWildcard(require("./Link"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var _default = exports["default"] = _Link["default"];

package/components/Link/linkCore.css

@@ -0,0 +1 @@
+.RCB-link{display:inline;cursor:pointer;font-family:inherit;transition:color 0.2s ease, text-decoration 0.2s ease;background:none;border:none;padding:0;margin:0;font-weight:500}.RCB-link:focus{outline:2px solid #3E71F2;outline-offset:2px}.RCB-link-disabled{cursor:not-allowed;opacity:0.6}.RCB-link-underline{text-decoration:underline}.RCB-link-none{text-decoration:none}.RCB-link-overline{text-decoration:overline}.RCB-link-line-through{text-decoration:line-through}.RCB-link-underline-on-hover:hover{text-decoration:underline}.RCB-link-external-icon{margin-left:4px;font-size:0.8em;line-height:1;display:inline}.RCB-link-small{font-size:12px;line-height:1.4}.RCB-link-medium{font-size:14px;line-height:1.5}.RCB-link-large{font-size:16px;line-height:1.6}

package/components/Link/linkTheme.css

@@ -0,0 +1 @@
+.RCB-link-primary{color:#3e71f2}.RCB-link-primary:hover{color:#3865d9}.RCB-link-primary:active{color:#3e71f2}.RCB-link-primary:visited{color:#6f42c1}.RCB-link-secondary{color:#6c757d;text-decoration:none}.RCB-link-secondary:hover{color:#495057;text-decoration:underline}.RCB-link-secondary:active{color:#343a40}.RCB-link-danger{color:#dc3545;text-decoration:none}.RCB-link-danger:hover{color:#c82333;text-decoration:underline}.RCB-link-danger:active{color:#bd2130}.RCB-link-success{color:#28a745;text-decoration:none}.RCB-link-success:hover{color:#218838;text-decoration:underline}.RCB-link-success:active{color:#1e7e34}.RCB-link-external .RCB-link-external-icon{color:currentColor;opacity:0.7}.RCB-link-external:hover .RCB-link-external-icon{opacity:1}

package/components/List/List.js

@@ -6,11 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _excluded = ["className", "items", "idAttribute", "ListItem", "showNoDataMsg", "noDataComponent"];
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var _NoDataDropdown = _interopRequireDefault(require("../common/NoDataDropdown"));
+var _excluded = ["className", "items", "idAttribute", "ListItem", "showNoDataMsg", "noDataComponent", "searchQuery"];
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 var ListItem = function ListItem(props) {
   var _props$itemData = props.itemData,
     itemData = _props$itemData === void 0 ? {} : _props$itemData;
@@ -33,9 +34,12 @@ var List = function List(props) {
     ListItem = props.ListItem,
     showNoDataMsg = props.showNoDataMsg,
     noDataComponent = props.noDataComponent,
+    searchQuery = props.searchQuery,
     restProps = _objectWithoutProperties(props, _excluded);
   if (!items.length && showNoDataMsg) {
-    return noDataComponent;
+    return /*#__PURE__*/_react["default"].createElement(_NoDataDropdown["default"], _extends({
+      searchQuery: searchQuery
+    }, restProps));
   }
   return /*#__PURE__*/_react["default"].createElement("ul", {
     className: "RCB-list ".concat(className)
@@ -69,7 +73,6 @@ List.defaultProps = {
   className: "",
   items: [],
   idAttribute: "id",
-  ListItem: ListItem,
-  noDataComponent: /*#__PURE__*/_react["default"].createElement(DefaultNoDataComponent, null)
+  ListItem: ListItem
 };
 var _default = exports["default"] = List;