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

package/components/Form/ServerPaginatedDDList.js

@@ -11,28 +11,28 @@ var _reactWindow = require("react-window");
 var _reactWindowInfiniteLoader = _interopRequireDefault(require("react-window-infinite-loader"));
 var _dataLoader = _interopRequireDefault(require("../../core/dataLoader"));
 var _utils = _interopRequireDefault(require("../../core/utils"));
-var _excluded = ["selectedItems", "selectItem", "idAttribute", "nameAttribute", "DropdownItem", "requestId", "requestParams", "responseFormatter", "pageNoKey", "perPageKey", "pageSize", "maxHeight", "searchAttribute", "searchQuery", "getUrlParams", "serverListClassName", "ddItemHeight", "minPageNo", "delay", "loadImmediately", "showClippedContentTitle", "abortPrevious", "LoaderComponent"];
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+var _NoDataDropdown = _interopRequireDefault(require("../common/NoDataDropdown"));
+var _excluded = ["selectedItems", "selectItem", "idAttribute", "nameAttribute", "DropdownItem", "requestId", "requestParams", "responseFormatter", "pageNoKey", "perPageKey", "pageSize", "maxHeight", "searchAttribute", "searchQuery", "getUrlParams", "serverListClassName", "ddItemHeight", "minPageNo", "delay", "loadImmediately", "showClippedContentTitle", "LoaderComponent", "prefetchedPageResponse", "prefetchedPageNo", "isSearchableDD", "setShowList"];
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+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 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; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-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; }
-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 _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+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; }
+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); }
 /* eslint-disable react/prop-types */
 
 var DefaultDropdownItem = exports.DefaultDropdownItem = function DefaultDropdownItem(props) {
@@ -46,7 +46,9 @@ var DefaultDropdownItem = exports.DefaultDropdownItem = function DefaultDropdown
     selectedItems = _data$selectedItems === void 0 ? [] : _data$selectedItems,
     idAttribute = data.idAttribute,
     nameAttribute = data.nameAttribute,
-    showClippedContentTitle = data.showClippedContentTitle;
+    showClippedContentTitle = data.showClippedContentTitle,
+    _data$showNoDataMsg = data.showNoDataMsg,
+    showNoDataMsg = _data$showNoDataMsg === void 0 ? true : _data$showNoDataMsg;
   var itemData = items[index] || {};
   var idValue = itemData[idAttribute];
   var name = itemData[nameAttribute];
@@ -93,9 +95,11 @@ var ServerPaginatedDDList = function ServerPaginatedDDList(props) {
     _props$loadImmediatel = props.loadImmediately,
     loadImmediately = _props$loadImmediatel === void 0 ? true : _props$loadImmediatel,
     showClippedContentTitle = props.showClippedContentTitle,
-    _props$abortPrevious = props.abortPrevious,
-    abortPrevious = _props$abortPrevious === void 0 ? false : _props$abortPrevious,
     LoaderComponent = props.LoaderComponent,
+    prefetchedPageResponse = props.prefetchedPageResponse,
+    prefetchedPageNo = props.prefetchedPageNo,
+    isSearchableDD = props.isSearchableDD,
+    setShowList = props.setShowList,
     restProps = _objectWithoutProperties(props, _excluded);
   var _useState = (0, _react.useState)([]),
     _useState2 = _slicedToArray(_useState, 2),
@@ -114,13 +118,13 @@ var ServerPaginatedDDList = function ServerPaginatedDDList(props) {
     hasNextPage = _useState8[0],
     setHasNextPage = _useState8[1];
   var _useState9 = (0, _react.useState)(false),
-    _useState10 = _slicedToArray(_useState9, 2),
-    isNextPageLoading = _useState10[0],
-    setIsNextPageLoading = _useState10[1];
-  var _useState11 = (0, _react.useState)(false),
-    _useState12 = _slicedToArray(_useState11, 2),
-    isApiLoading = _useState12[0],
-    setIsApiLoading = _useState12[1];
+    _useState0 = _slicedToArray(_useState9, 2),
+    isNextPageLoading = _useState0[0],
+    setIsNextPageLoading = _useState0[1];
+  var _useState1 = (0, _react.useState)(false),
+    _useState10 = _slicedToArray(_useState1, 2),
+    isApiLoading = _useState10[0],
+    setIsApiLoading = _useState10[1];
   var debouncedFn = (0, _react.useRef)();
   var getDefaultPageNo = function getDefaultPageNo() {
     return minPageNo !== null && minPageNo !== void 0 ? minPageNo : 1;
@@ -128,7 +132,6 @@ var ServerPaginatedDDList = function ServerPaginatedDDList(props) {
   var pageNoRef = (0, _react.useRef)(getDefaultPageNo());
   var searchRef = (0, _react.useRef)(searchQuery);
   var apiCallRef = (0, _react.useRef)(false);
-  var abortController = (0, _react.useRef)(null);
   var onDataLoaded = function onDataLoaded(response) {
     apiCallRef.current = false;
     var apiResponse = response;
@@ -156,18 +159,24 @@ var ServerPaginatedDDList = function ServerPaginatedDDList(props) {
     }
     setItems(totalEntries);
     setTotal(total);
+    if (entries.length === 0 && isSearchableDD) {
+      setShowList(false);
+    }
   };
   var makeAPICall = function makeAPICall() {
-    var _objectSpread2;
+    _dataLoader["default"].abortPreviousCall(requestId);
     setIsApiLoading(true);
     apiCallRef.current = true;
-    abortController.current = new AbortController();
     setIsNextPageLoading(true);
+    if (prefetchedPageResponse && pageNoRef.current === prefetchedPageNo) {
+      onDataLoaded(prefetchedPageResponse);
+      setIsApiLoading(false);
+      return;
+    }
     var def = _dataLoader["default"].getRequestDef({
       requestId: requestId,
-      params: _objectSpread(_objectSpread((_objectSpread2 = {}, _defineProperty(_objectSpread2, pageNoKey, pageNoRef.current), _defineProperty(_objectSpread2, perPageKey, pageSize), _objectSpread2), searchRef.current && _defineProperty({}, searchAttribute, searchRef.current)), requestParams),
-      urlParams: getUrlParams(),
-      signal: abortController.current.signal
+      params: _objectSpread(_objectSpread(_defineProperty(_defineProperty({}, pageNoKey, pageNoRef.current), perPageKey, pageSize), searchRef.current && _defineProperty({}, searchAttribute, searchRef.current)), requestParams),
+      urlParams: getUrlParams()
     });
     def.done(function (response) {
       onDataLoaded(response);
@@ -181,23 +190,21 @@ var ServerPaginatedDDList = function ServerPaginatedDDList(props) {
    */
   var loadNextPage = function loadNextPage() {
     pageNoRef.current = pageNoRef.current + 1;
-    if (abortPrevious && apiCallRef.current) {
-      abortController.current.abort();
-    }
+    //dataLoader.abortPreviousCall(requestId);
     return makeAPICall();
   };
   (0, _react.useEffect)(function () {
     /* not the first call */
     if (itemsResetCounter > 0) {
-      if (abortPrevious && apiCallRef.current) {
-        abortController.current.abort();
-      }
+      //dataLoader.abortPreviousCall(requestId);
       makeAPICall();
     }
   }, [itemsResetCounter]);
   (0, _react.useEffect)(function () {
     /* search query changed -> reset page no. to 1 */
     if (searchQuery !== searchRef.current) {
+      // dataLoader.abortPreviousCall(requestId);
+      setIsApiLoading(true);
       setIsNextPageLoading(true);
       searchRef.current = searchQuery;
       startSearch();
@@ -212,6 +219,7 @@ var ServerPaginatedDDList = function ServerPaginatedDDList(props) {
     debouncedFn.current();
   }, []);
   var startSearchCallBack = function startSearchCallBack() {
+    setIsApiLoading(true);
     pageNoRef.current = getDefaultPageNo();
     setItems([]);
     setTotal(null);
@@ -246,10 +254,12 @@ var ServerPaginatedDDList = function ServerPaginatedDDList(props) {
     }
     return [];
   }
-  if (total === 0) {
-    return /*#__PURE__*/_react["default"].createElement("div", {
-      className: "RCB-no-data"
-    }, "No data found");
+  if (total === 0 && searchQuery === searchRef.current && !isApiLoading) {
+    return /*#__PURE__*/_react["default"].createElement(_NoDataDropdown["default"], _extends({
+      searchQuery: searchQuery
+    }, restProps));
+  } else if (total === 0 && LoaderComponent) {
+    return LoaderComponent;
   }
   return /*#__PURE__*/_react["default"].createElement(_reactWindowInfiniteLoader["default"]
   // Function responsible for tracking the loaded state of each item.
@@ -280,7 +290,6 @@ var ServerPaginatedDDList = function ServerPaginatedDDList(props) {
   });
   // }
 };
-
 ServerPaginatedDDList.propTypes = {
   ddItemHeight: _propTypes["default"].number,
   LoaderComponent: _propTypes["default"].any

package/components/Form/Textarea.js

@@ -9,17 +9,23 @@ var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Form = require("./Form");
 var _FormElementWrapper = _interopRequireDefault(require("./FormElementWrapper"));
-var _excluded = ["label", "name", "className", "value", "defaultValue", "placeholder", "appearance", "onChange"];
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+var _utils = _interopRequireDefault(require("../../core/utils"));
+var _excluded = ["label", "name", "className", "value", "defaultValue", "placeholder", "appearance", "onChange", "language"];
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+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 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; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-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; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+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 Textarea = function Textarea(props) {
   var label = props.label,
     name = props.name,
@@ -29,9 +35,14 @@ var Textarea = function Textarea(props) {
     placeholder = props.placeholder,
     appearance = props.appearance,
     onChange = props.onChange,
+    language = props.language,
     restProps = _objectWithoutProperties(props, _excluded);
   var _useContext = (0, _react.useContext)(_Form.FormContext),
     onValueChange = _useContext.onValueChange;
+  var _useState = (0, _react.useState)(language === "ar" ? 'rtl' : 'ltr'),
+    _useState2 = _slicedToArray(_useState, 2),
+    textDirection = _useState2[0],
+    setTextDirection = _useState2[1];
   var postFormValueChange = function postFormValueChange(value) {
     typeof onValueChange === "function" && onValueChange(name, value);
   };
@@ -43,6 +54,11 @@ var Textarea = function Textarea(props) {
     if (typeof onChange === "function") {
       onChange(value);
     }
+    if (language === "ar" && _utils["default"].isRTL(value, language)) {
+      setTextDirection("rtl");
+    } else {
+      setTextDirection("ltr");
+    }
     postFormValueChange(value);
   };
   (0, _react.useEffect)(function () {
@@ -56,7 +72,7 @@ var Textarea = function Textarea(props) {
     id: name,
     defaultValue: defaultValue,
     placeholder: placeholder,
-    className: "RCB-form-el",
+    className: "RCB-form-el ".concat(textDirection),
     onChange: onInputChange
   }, restProps);
   if (typeof onChange === "function") {

package/components/Form/Toggle.js

@@ -10,15 +10,14 @@ var _customHooks = require("../../core/customHooks");
 var _Form = require("./Form");
 var _FormElementWrapper = _interopRequireDefault(require("./FormElementWrapper"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+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 _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 var Toggle = function Toggle(props) {
   var name = props.name,
     label = props.label,

package/components/Form/formCore.css

@@ -1 +1 @@
-.RCB-form-el-inline{margin:20px 0;display:inline-block}.RCB-form-el-inline .RCB-form-el-label{margin-right:15px}.RCB-form-el-inline .RCB-toggle{display:inline-block}.RCB-form-el-block{margin:20px 0}.RCB-form-el-block .RCB-form-el-label{display:block}.RCB-dropdown .RCB-list-item{list-style-type:none;padding:10px;cursor:pointer}.RCB-dropdown .RCB-list-item:hover{background-color:#eee}.RCB-dropdown .RCB-list-item.selected{background-color:#eee}.RCB-dd-with-create .RCB-inline-modal-body{display:flex;flex-direction:column}.RCB-dd-with-create .RCB-inline-modal-body .RCB-list{flex:1;overflow:scroll}.RCB-dd-with-create .RCB-dd-create-cta{padding:10px;text-align:center;border:1px solid #bfbfbf;cursor:pointer}.RCB-clear-selected{background:#f2f0f0;padding:3px 6px;font-size:11px;border-radius:15px;border:1px solid #ccc}.RCB-selection-wrapper{float:right}.RCB-selection-wrapper .RCB-select-arrow{float:unset}.RCB-select-arrow{float:right;font-size:12px;color:#96a9bc;margin-right:12px;margin-left:8px}.RCB-select-arrow:after{content:"\25BC";vertical-align:middle}.RCB-dd-label{display:inline-block;overflow:hidden;text-overflow:ellipsis;max-width:70%;vertical-align:top;white-space:nowrap}.RCB-file-input{cursor:pointer}.RCB-drag-drop-uploader{border:2px dashed rgba(104,128,145,0.42);padding:20px;text-align:center}.RCB-drag-over{background:#f3f3f3}.RCB-toggle{padding:2px 3px;background-color:#FFF;border:1px solid #CCC;border-radius:20px;box-sizing:content-box;cursor:pointer}.RCB-toggle.active{background-color:#2cb191}.RCB-toggle.active .RCB-toggle-knob{background-color:#FFF}.RCB-toggle-disable{cursor:not-allowed;opacity:0.8}.RCB-toggle-knob{background-color:#8399ae;border-radius:50%;-webkit-transition:transform .3s ease;-moz-transition:transform .3s ease;-ms-transition:transform .3s ease;transition:transform .3s ease}
+.search-icon,.RCB-dropdown .RCB-dd-search-icon{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='218 216 16 16'%3E%3Cpath d='M227.01 217.379C231.071 218.805 232.756 223.521 230.554 227.212C230.503 227.297 230.457 227.385 230.393 227.498C230.485 227.598 230.574 227.703 230.671 227.8C231.619 228.749 232.573 229.694 233.517 230.647C234.132 231.267 234.16 232.077 233.601 232.622C233.054 233.155 232.263 233.125 231.653 232.525C230.686 231.574 229.726 230.615 228.777 229.647C228.578 229.444 228.441 229.39 228.169 229.551C225.807 230.953 222.874 230.765 220.648 229.088C218.504 227.473 217.537 224.669 218.213 222.027C218.874 219.442 221.125 217.428 223.788 217.042C223.788 217.042 225.433 216.825 227.01 217.379ZM224.784 228.887C227.639 228.863 229.957 226.523 229.931 223.689C229.905 220.85 227.552 218.551 224.698 218.577C221.883 218.604 219.56 220.969 219.594 223.775C219.628 226.604 221.97 228.91 224.784 228.887Z' fill='%23B2BACB'/%3E%3C/svg%3E");width:16px;height:16px}.down-arrow-dark,.RCB-select-arrow:after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='121 122 12 9'%3E%3Cpath d='M127.498 130H127.504C127.674 129.999 127.837 129.921 127.953 129.786L132.832 124.136C133.067 123.864 133.054 123.437 132.803 123.182C132.552 122.928 132.157 122.941 131.922 123.214L127.49 128.346L123.07 123.401C122.831 123.133 122.436 123.127 122.189 123.386C121.943 123.646 121.936 124.073 122.176 124.341L127.051 129.795C127.168 129.926 127.329 130 127.498 130Z' fill='%238592AC' stroke='%238592AC'/%3E%3C/svg%3E");width:13px;height:9px;cursor:pointer}.RCB-form-el-inline{margin:20px 0;display:inline-block}.RCB-form-el-inline .RCB-form-el-label{margin-right:15px}.RCB-form-el-inline .RCB-toggle{display:inline-block}.RCB-form-el-block{margin:20px 0}.RCB-form-el-block .RCB-form-el-label{display:block}.RCB-dropdown .RCB-list-item{list-style-type:none;padding:10px;cursor:pointer}.RCB-dropdown .RCB-list-item:hover{background-color:#F4F8FF;box-shadow:inset 3px 0 0 0 #3E71F2;color:#273251}.RCB-dropdown .RCB-list-item.selected{background-color:#F4F8FF;box-shadow:inset 3px 0 0 0 #3E71F2;color:#273251}.RCB-dd-with-create .RCB-inline-modal-body{display:flex;flex-direction:column}.RCB-dd-with-create .RCB-inline-modal-body .RCB-list{flex:1;overflow:scroll}.RCB-dd-with-create .RCB-dd-create-cta{padding:10px;text-align:center;border:1px solid #bfbfbf;cursor:pointer}.RCB-clear-selected{background:#f2f0f0;padding:3px 6px;font-size:11px;border-radius:15px;border:1px solid #ccc}.RCB-selection-wrapper{float:right}.RCB-selection-wrapper .RCB-select-arrow{float:unset}.RCB-select-arrow{float:right;font-size:12px;color:#96a9bc;margin-right:12px;margin-left:8px}.RCB-select-arrow:after{content:"\25BC";vertical-align:middle}.RCB-dd-label{display:inline-block;overflow:hidden;text-overflow:ellipsis;max-width:70%;vertical-align:top;white-space:nowrap}.RCB-file-input{cursor:pointer}.RCB-drag-drop-uploader{border:2px dashed rgba(104,128,145,0.42);padding:20px;text-align:center}.RCB-drag-over{background:#f3f3f3}.RCB-toggle{padding:2px 3px;background-color:#FFF;border:1px solid #CCC;border-radius:20px;box-sizing:content-box;cursor:pointer}.RCB-toggle.active{background-color:#00C48C}.RCB-toggle.active .RCB-toggle-knob{background-color:#FFF}.RCB-toggle-disable{cursor:not-allowed;opacity:0.8;background-color:#b7b7c6;box-shadow:none}.RCB-toggle-disable.active{background-color:#f6f6f6}.RCB-toggle-knob{background-color:#8399ae;border-radius:50%;-webkit-transition:transform .3s ease;-moz-transition:transform .3s ease;-ms-transition:transform .3s ease;transition:transform .3s ease}.RCB-searchabledd-list-container{position:absolute;z-index:1;width:100%}.RCB-searchabledd{position:relative}.disabled-form-el,.RCB-form-el:disabled,.RCB-dropdown.RCB-disabled .RCB-inline-modal-btn{background:#EFEFEF;border-color:#EFEFEF;color:#A0A0A0;cursor:not-allowed}.disabled-form-el:hover,.RCB-form-el:hover:disabled,.RCB-dropdown.RCB-disabled .RCB-inline-modal-btn:hover{border-color:#EFEFEF}form-form-el-cont{margin-bottom:30px}.RCB-form-el-block{margin:30px 0}.RCB-form-el-label{display:inline-block;margin-bottom:8px;color:#17173A;font-size:14px;font-weight:600;letter-spacing:0.42px}.RCB-form-el{color:#17173A;font-size:14px;border-radius:4px;border:1px solid #DDE2EE;padding:10px 15px;width:100%}.RCB-form-el[type="checkbox"]{width:auto}.RCB-form-el.ltr{direction:ltr;text-align:left}.RCB-form-el.ltr+.ltr{text-align:left}.RCB-form-el.rtl{direction:rtl;text-align:right}.RCB-form-el.rtl+.rtl{text-align:right}.RCB-form-el[type="text"],.RCB-form-el[type="number"],.RCB-form-el[type="password"],.RCB-form-el[type="email"]{height:40px;box-sizing:border-box}.RCB-form-el[type="text"]:focus,.RCB-form-el[type="number"]:focus,.RCB-form-el[type="password"]:focus,.RCB-form-el[type="email"]:focus{border-color:#3E71F2;border-radius:4px;box-shadow:0px 0px 0px 4px #DBE7FF;background-color:#FFF;outline:none}.RCB-form-el[type="text"]:hover,.RCB-form-el[type="number"]:hover,.RCB-form-el[type="password"]:hover,.RCB-form-el[type="email"]:hover{border-color:#3E71F2}.RCB-form-el[type="text"]:hover:disabled,.RCB-form-el[type="number"]:hover:disabled,.RCB-form-el[type="password"]:hover:disabled,.RCB-form-el[type="email"]:hover:disabled{border-color:#DDE2EE}.RCB-form-el::placeholder{color:#6F6F8D}.RCB-form-el.error{border-color:#F05C5C}.RCB-form-el.error:hover{border-color:#F05C5C}.RCB-form-el.error:focus{border-color:#F05C5C;box-shadow:0px 0px 0px 4px #F05C5C33;outline:none}.RCB-form-el.warning{border-color:#FFCF5C}.RCB-form-el.warning:hover{border-color:#FFCF5C}.RCB-form-el.warning:focus{border-color:#FFCF5C;box-shadow:0px 0px 0px 4px #FFCF5C33;outline:none}.RCB-form-el.success{border-color:#00C48C}.RCB-form-el.success:hover{border-color:#00C48C}.RCB-form-el.success:focus{border-color:#00C48C;box-shadow:0px 0px 0px 4px #00C48C33;outline:none}.RCB-form-el-cont textarea{font-family:"Nunito Sans", "Helvetica Neue", "Helvetica", "Roboto", "sans-serif"}.RCB-form-el-cont textarea:focus{border-color:#3E71F2;border-radius:4px;box-shadow:0px 0px 0px 4px #DBE7FF;background-color:#FFF;outline:none}.RCB-form-el-cont textarea:hover{border-color:#3E71F2}.RCB-form-el-cont.error .RCB-form-el{border-color:#F05C5C}.RCB-form-el-cont.error .RCB-form-el:hover{border-color:#F05C5C}.RCB-form-el-cont.error .RCB-form-el:focus{border-color:#F05C5C;box-shadow:0px 0px 0px 4px #F05C5C33;outline:none}.RCB-form-el-cont.warning .RCB-form-el{border-color:#FFCF5C}.RCB-form-el-cont.warning .RCB-form-el:hover{border-color:#FFCF5C}.RCB-form-el-cont.warning .RCB-form-el:focus{border-color:#FFCF5C;box-shadow:0px 0px 0px 4px #FFCF5C33;outline:none}.RCB-form-el-cont.success .RCB-form-el{border-color:#00C48C}.RCB-form-el-cont.success .RCB-form-el:hover{border-color:#00C48C}.RCB-form-el-cont.success .RCB-form-el:focus{border-color:#00C48C;box-shadow:0px 0px 0px 4px #00C48C33;outline:none}.RCB-form-error{margin-top:5px}.RCB-dropdown .RCB-form-el{padding:0;border:none}.RCB-dropdown .RCB-inline-modal-btn{padding:9px 10px;background:#FFF;width:100%;height:100%}.RCB-dropdown .RCB-dd-search-icon{top:9px}.RCB-dropdown .RCB-dd-search-icon:before{content:none}.RCB-dd-searchabledd-search-ip{border:1px solid #DDE2EE;border-radius:4px;padding:10px 30px}.RCB-select-arrow{margin-right:0;display:inline-flex}.RCB-select-arrow:after{content:" "}.RCB-toggle-knob{border:1px solid #cccbcb;background:linear-gradient(180deg, #fff 0%, #F2F5F8 100%);box-shadow:-2px 1px 3px 0 rgba(9,13,15,0.14)}.RCB-toggle{height:19px;background-color:#6f6f8d;border-radius:10px;border:none;padding:0;vertical-align:middle}.RCB-toggle-knob{top:3px;left:2px;position:relative;border:none;box-shadow:none}.RCB-toggle div.RCB-toggle-knob:hover{box-shadow:0 0 0px 8px rgba(0,0,0,0.15)}.RCB-toggle.active{background-color:#00c48c}.RCB-toggle.active .RCB-toggle-knob{position:relative;height:26px;width:26px;left:-2px;top:3px;background-color:white;-webkit-transition:.4s;transition:.4s;border:none;box-shadow:none}.RCB-toggle.active div.RCB-toggle-knob:hover{box-shadow:0 0 0px 8px rgba(0,196,140,0.15)}.RCB-toggle-disable{cursor:not-allowed;opacity:0.5;background-color:#6f6f8d;box-shadow:none}.RCB-toggle-disable.active{background-color:#00c48c;opacity:0.5}.RCB-toggle-disable.active div.RCB-toggle-knob:hover{box-shadow:none}.RCB-toggle-disable div.RCB-toggle-knob:hover{box-shadow:none}.RCB-btn{text-decoration:none;height:35px;font-weight:500;white-space:nowrap}.RCB-btn:disabled{display:inline-flex;height:35px;padding:8px 12px;justify-content:center;align-items:center;gap:8px;flex-shrink:0;border-radius:5px;opacity:0.5;background:#728DDF;cursor:no-drop}.RCB-btn-default{color:#FFF;background-color:#67B8DC;padding:4px 12px;border:0}.RCB-btn-default:hover{background-color:#50b2dd}.RCB-btn-primary{background-color:#3E71F2;font-size:14px;padding:8px 12px;border-radius:4px;outline:none}.RCB-btn-primary:hover{color:#FFF;text-decoration:none;background-color:#3865D9}.RCB-btn-primary:active{background-color:#3E71F2;box-shadow:inset 0 2px 3px 0 rgba(0,0,0,0.5)}.RCB-btn-primary:visited{color:#FFF}.RCB-btn-primary:disabled{background-color:#728DDF;color:#FFF;opacity:0.5;cursor:no-drop}.RCB-btn-primary:disabled:active{box-shadow:unset}.RCB-btn-secondary{font-size:14px;color:#3E71F2;background-color:#FFF;padding:8px 12px;border-radius:5px;border:1.5px solid #3E71F2}.RCB-btn-secondary:hover{color:#3E71F2;text-decoration:none;background-color:#ECF2FF}.RCB-btn-secondary:focus{background-color:#eff3f7}.RCB-btn-secondary:disabled{color:#3E71F2;background-color:#EEF4FF;border:1.5px solid #3E71F2;cursor:no-drop}.RCB-btn-secondary:visited{color:#61697d}.RCB-btn-link{background-color:transparent;color:#3E71F2;border-color:transparent}.RCB-btn-link:hover{background:transparent}.RCB-tag-btn{background-color:#FFFFFF;border:solid 1px #a1b3c0;width:30px;height:30px}.custom-toggle-large .RCB-toggle{height:36px;border-radius:60px}.last-form-el{margin-bottom:15px}.demo-dropdown.RCB-form-el-inline.RCB-dropdown{width:100%}

package/components/Form/formTheme.css

@@ -1 +1 @@
-.RCB-form-error{font-size:12px;color:#d25b5b}.RCB-dd-search{position:relative}.RCB-dd-search-icon{position:absolute;top:5px;left:10px}.RCB-dd-search-icon:before{content:"\1F50D"}.RCB-dd-search-ip{width:100%;padding:10px 30px;border:none;border-bottom:1px solid #CCC}
+.RCB-form-error{font-size:12px;color:#d25b5b}.RCB-dd-search{position:relative}.RCB-dd-search-icon{position:absolute;top:5px;left:10px}.RCB-dd-search-icon:before{content:"\1F50D"}.RCB-dd-search-ip{width:100%;padding:10px 30px;border:none;border-bottom:1px solid #CCC}.RCB-dd-searchabledd-search-ip{border:1px solid #DDE2EE;border-radius:4px}

package/components/Form/index.js

@@ -45,6 +45,12 @@ Object.defineProperty(exports, "RangeSlider", {
     return _RangeSlider["default"];
   }
 });
+Object.defineProperty(exports, "SearchableDropdown", {
+  enumerable: true,
+  get: function get() {
+    return _SearchableDropdown["default"];
+  }
+});
 Object.defineProperty(exports, "Textarea", {
   enumerable: true,
   get: function get() {
@@ -64,9 +70,10 @@ var _Checkbox = _interopRequireDefault(require("./Checkbox"));
 var _RadioList = _interopRequireDefault(require("./RadioList"));
 var _Textarea = _interopRequireDefault(require("./Textarea"));
 var _Dropdown = _interopRequireDefault(require("./Dropdown"));
+var _SearchableDropdown = _interopRequireDefault(require("./SearchableDropdown"));
 var _RangeSlider = _interopRequireDefault(require("./RangeSlider"));
 var _FileUploader = _interopRequireDefault(require("./FileUploader"));
 var _DragDropFileUploader = _interopRequireDefault(require("./DragDropFileUploader"));
 var _Toggle = _interopRequireDefault(require("./Toggle"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 var _default = exports["default"] = _Form["default"];

package/components/Form/stories/Checkbox.stories.js

@@ -1,52 +1,151 @@
 "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._Checkbox = void 0;
+exports["default"] = exports.Disabled = exports.Default = exports.ControlledCheckbox = exports.CheckboxGroup = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _Form = _interopRequireDefault(require("../Form"));
-var _Checkbox2 = _interopRequireDefault(require("../Checkbox"));
-var _Button = _interopRequireWildcard(require("../../Button"));
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-var _Checkbox = exports._Checkbox = function _Checkbox() {
-  var onSubmit = function onSubmit(formData) {
-    var data = formData.data;
-    console.log("Submitted data: ", data);
-  };
-  return /*#__PURE__*/_react["default"].createElement(_Form["default"], {
-    onSubmit: onSubmit
-  }, /*#__PURE__*/_react["default"].createElement(_Checkbox2["default"], {
-    name: "orange",
-    label: "Orange"
-  }), /*#__PURE__*/_react["default"].createElement(_Checkbox2["default"], {
-    name: "pineapple",
-    label: "Pineapple",
-    value: true,
-    onChange: function onChange() {}
-  }), /*#__PURE__*/_react["default"].createElement(_Checkbox2["default"], {
-    name: "grapes",
-    label: "Grapes"
-  }), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
-    appearance: _Button.ButtonAppearance.PRIMARY,
-    className: "full-width-btn"
-  }, "Submit"));
-};
-_Checkbox.story = {
+var _Checkbox = _interopRequireDefault(require("../Checkbox"));
+var _Button = _interopRequireDefault(require("../../Button"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+var meta = {
+  title: 'Components/Form/Checkbox',
+  component: _Checkbox["default"],
   parameters: {
-    info: {
-      propTables: [_Checkbox2["default"]]
+    layout: 'centered'
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    label: {
+      control: 'text',
+      description: 'Label text for the checkbox'
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Whether the checkbox is disabled'
+    },
+    value: {
+      control: 'boolean',
+      description: 'Whether the checkbox is checked'
+    },
+    className: {
+      control: 'text',
+      description: 'Additional CSS classes'
     }
   }
 };
-var _default = exports["default"] = {
-  title: "Form|Checkbox",
-  parameters: {
-    info: {
-      propTables: [_Checkbox2["default"]]
-    }
+var _default = exports["default"] = meta;
+var Default = exports.Default = {
+  render: function render() {
+    return /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
+      label: "Default checkbox",
+      name: "default-checkbox",
+      onChange: function onChange(val) {
+        return console.log('Checkbox changed:', val);
+      }
+    });
+  }
+};
+var ControlledCheckbox = exports.ControlledCheckbox = {
+  render: function render() {
+    var _React$useState = _react["default"].useState(true),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      checked = _React$useState2[0],
+      setChecked = _React$useState2[1];
+    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
+      label: "Controlled checkbox",
+      name: "controlled-checkbox",
+      value: checked,
+      onChange: function onChange(val) {
+        console.log('Checkbox changed:', val);
+      }
+    }), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      onClick: function onClick() {
+        return setChecked(!checked);
+      }
+    }, "Toggle Checkbox"));
+  }
+};
+var Disabled = exports.Disabled = {
+  render: function render() {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '10px'
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
+      label: "Disabled unchecked",
+      name: "disabled-unchecked",
+      disabled: true,
+      onChange: function onChange(val) {
+        return console.log('Checkbox changed:', val);
+      }
+    }), /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
+      label: "Disabled checked",
+      name: "disabled-checked",
+      disabled: true,
+      value: true,
+      onChange: function onChange(val) {
+        return console.log('Checkbox changed:', val);
+      }
+    }));
+  }
+};
+var CheckboxGroup = exports.CheckboxGroup = {
+  render: function render() {
+    var _React$useState3 = _react["default"].useState(['option1']),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      selected = _React$useState4[0],
+      setSelected = _React$useState4[1];
+    var handleChange = function handleChange(value) {
+      setSelected(function (prev) {
+        return prev.includes(value) ? prev.filter(function (item) {
+          return item !== value;
+        }) : [].concat(_toConsumableArray(prev), [value]);
+      });
+    };
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '10px'
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
+      label: "Option 1",
+      name: "option1",
+      value: selected.includes('option1'),
+      onChange: function onChange() {
+        return handleChange('option1');
+      }
+    }), /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
+      label: "Option 2",
+      name: "option2",
+      value: selected.includes('option2'),
+      onChange: function onChange() {
+        return handleChange('option2');
+      }
+    }), /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
+      label: "Option 3",
+      name: "option3",
+      value: selected.includes('option3'),
+      onChange: function onChange() {
+        return handleChange('option3');
+      }
+    }), /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        marginTop: '10px'
+      }
+    }, "Selected options: ", selected.join(', ')));
   }
 };