@assembly-js/design-system 2.4.0

package/dist/umd/components/UserCompanySelector/SelectedValueChip.js

@@ -0,0 +1,64 @@
+// This file is generated by a script. Do not edit this file directly.
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "react", "../../common/utils", "../Avatar/Avatar", "../Avatar/UserWithCompanyAvatar", "../Chip/Chip"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("react"), require("../../common/utils"), require("../Avatar/Avatar"), require("../Avatar/UserWithCompanyAvatar"), require("../Chip/Chip"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.react, global.utils, global.Avatar, global.UserWithCompanyAvatar, global.Chip);
+    global.SelectedValueChip = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _react, _utils, _Avatar, _UserWithCompanyAvatar, _Chip) {
+  "use strict";
+
+  Object.defineProperty(_exports, "__esModule", {
+    value: true
+  });
+  _exports.SelectedValueChip = SelectedValueChip;
+  _react = _interopRequireDefault(_react);
+  function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+  function SelectedValueChip(props) {
+    var _option$avatarSrc, _option$label$charAt$, _option$label, _option$avatarFallbac, _option$label2, _option$avatarSrc2, _option$avatarFallbac2, _option$label3, _option$companyName, _option$companyAvatar, _option$companyAvatar2, _option$label4;
+    var option = props.data,
+      selectProps = props.selectProps;
+    var onChange = selectProps.onChange,
+      selectValue = selectProps.value;
+    var handleRemove = function handleRemove() {
+      if (Array.isArray(selectValue)) {
+        var newSelectValue = selectValue ? selectValue.filter(function (_ref) {
+          var value = _ref.value;
+          return !(value === option.value);
+        }) : [];
+        onChange(newSelectValue, {
+          action: 'remove-value',
+          removedValue: option
+        });
+      }
+    };
+    return /*#__PURE__*/_react["default"].createElement(_Chip.Chip, {
+      className: "!cop-rounded cop-border cop-border-solid cop-py-[5px]",
+      variant: "outlined",
+      onClose: handleRemove,
+      prefixIcon: option.type === 'company' ? /*#__PURE__*/_react["default"].createElement(_Avatar.Avatar, {
+        src: (_option$avatarSrc = option.avatarSrc) !== null && _option$avatarSrc !== void 0 ? _option$avatarSrc : '',
+        text: (_option$label$charAt$ = (_option$label = option.label) === null || _option$label === void 0 ? void 0 : _option$label.charAt(0).toLocaleUpperCase()) !== null && _option$label$charAt$ !== void 0 ? _option$label$charAt$ : '',
+        fallbackColor: (_option$avatarFallbac = option.avatarFallbackColor) !== null && _option$avatarFallbac !== void 0 ? _option$avatarFallbac : '',
+        size: "xs",
+        variant: "rounded",
+        alt: (_option$label2 = option.label) !== null && _option$label2 !== void 0 ? _option$label2 : ''
+      }) : /*#__PURE__*/_react["default"].createElement(_UserWithCompanyAvatar.UserWithCompanyAvatar, {
+        size: "xs",
+        avatarSrc: (_option$avatarSrc2 = option.avatarSrc) !== null && _option$avatarSrc2 !== void 0 ? _option$avatarSrc2 : '',
+        fallbackColor: (_option$avatarFallbac2 = option.avatarFallbackColor) !== null && _option$avatarFallbac2 !== void 0 ? _option$avatarFallbac2 : '',
+        text: (0, _utils.getInitials)((_option$label3 = option.label) !== null && _option$label3 !== void 0 ? _option$label3 : '', true),
+        companyText: (0, _utils.getInitials)((_option$companyName = option.companyName) !== null && _option$companyName !== void 0 ? _option$companyName : ''),
+        companyAvatarSrc: (_option$companyAvatar = option.companyAvatarSrc) !== null && _option$companyAvatar !== void 0 ? _option$companyAvatar : '',
+        companyAvatarFallbackColor: (_option$companyAvatar2 = option.companyAvatarFallbackColor) !== null && _option$companyAvatar2 !== void 0 ? _option$companyAvatar2 : ''
+      }),
+      label: (_option$label4 = option.label) !== null && _option$label4 !== void 0 ? _option$label4 : ''
+    });
+  }
+});

package/dist/umd/components/UserCompanySelector/UserCompanySelector.js

@@ -0,0 +1,391 @@
+// This file is generated by a script. Do not edit this file directly.
+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); }
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "react", "react-select", "./ListItem", "../Typography", "./SelectedValueChip", "./LimitedOptionsList", "../../theme/colors"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("react"), require("react-select"), require("./ListItem"), require("../Typography"), require("./SelectedValueChip"), require("./LimitedOptionsList"), require("../../theme/colors"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.react, global.reactSelect, global.ListItem, global.Typography, global.SelectedValueChip, global.LimitedOptionsList, global.colors);
+    global.UserCompanySelector = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _react, _reactSelect, _ListItem, _Typography, _SelectedValueChip, _LimitedOptionsList, _colors) {
+  "use strict";
+
+  Object.defineProperty(_exports, "__esModule", {
+    value: true
+  });
+  _exports.UserCompanySelector = void 0;
+  _react = _interopRequireWildcard(_react);
+  _reactSelect = _interopRequireDefault(_reactSelect);
+  var _excluded = ["autoFocus", "grouped", "name", "internalUsers", "clientUsers", "companies", "onChange", "onBlur", "placeholder", "styles", "ignoreCompanies", "ignoreFilterClientsByCompany", "limitSelectedOptions", "initialValue", "customLabels", "listHeading"];
+  function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+  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 && {}.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 _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 _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 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(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], t.indexOf(o) >= 0 || {}.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 (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+  var MAX_OPTIONS = {
+    flat: 6,
+    group: 3
+  };
+  /**
+   * Creates a grouped options for the combo select
+   * @param companies - the companies to group
+   * @param internalUsers - the internal users to group
+   * @param clientUsers - the client users to group
+   * @returns the grouped options
+   */
+  var createGroupedOptions = function createGroupedOptions(companies, internalUsers, clientUsers, customLabels) {
+    var _customLabels$groupTe, _customLabels$individ;
+    var companyGroup = {
+      label: (_customLabels$groupTe = customLabels === null || customLabels === void 0 ? void 0 : customLabels.groupTermPlural) !== null && _customLabels$groupTe !== void 0 ? _customLabels$groupTe : 'Companies',
+      options: companies
+    };
+    var internalUserGroup = {
+      label: 'Internal Users',
+      options: internalUsers
+    };
+    var clientUserGroup = {
+      label: (_customLabels$individ = customLabels === null || customLabels === void 0 ? void 0 : customLabels.individualTermPlural) !== null && _customLabels$individ !== void 0 ? _customLabels$individ : 'Client Users',
+      options: clientUsers
+    };
+    return [internalUserGroup, clientUserGroup, companyGroup];
+  };
+  var UserCompanySelector = _exports.UserCompanySelector = function UserCompanySelector(_ref) {
+    var _ref$autoFocus = _ref.autoFocus,
+      autoFocus = _ref$autoFocus === void 0 ? false : _ref$autoFocus,
+      _ref$grouped = _ref.grouped,
+      grouped = _ref$grouped === void 0 ? false : _ref$grouped,
+      name = _ref.name,
+      _ref$internalUsers = _ref.internalUsers,
+      internalUsers = _ref$internalUsers === void 0 ? [] : _ref$internalUsers,
+      clientUsers = _ref.clientUsers,
+      companies = _ref.companies,
+      onChange = _ref.onChange,
+      onBlur = _ref.onBlur,
+      placeholder = _ref.placeholder,
+      styles = _ref.styles,
+      ignoreCompanies = _ref.ignoreCompanies,
+      _ref$ignoreFilterClie = _ref.ignoreFilterClientsByCompany,
+      ignoreFilterClientsByCompany = _ref$ignoreFilterClie === void 0 ? false : _ref$ignoreFilterClie,
+      _ref$limitSelectedOpt = _ref.limitSelectedOptions,
+      limitSelectedOptionsUnvalidated = _ref$limitSelectedOpt === void 0 ? 1000 : _ref$limitSelectedOpt,
+      initialValue = _ref.initialValue,
+      customLabels = _ref.customLabels,
+      listHeading = _ref.listHeading,
+      others = _objectWithoutProperties(_ref, _excluded);
+    var limitSelectedOptions = limitSelectedOptionsUnvalidated === 0 ? 1000 : Math.min(1000, limitSelectedOptionsUnvalidated);
+    var companiesMap = (0, _react.useMemo)(function () {
+      return new Map(companies.map(function (company) {
+        return [company.value, company];
+      }));
+    }, [companies]);
+    var clientToCompanyCount = (0, _react.useMemo)(function () {
+      var clientToCompanyCount = new Map();
+      return clientUsers.reduce(function (acc, client) {
+        var _client$value, _clientToCompanyCount, _client$value2;
+        clientToCompanyCount.set((_client$value = client.value) !== null && _client$value !== void 0 ? _client$value : '', ((_clientToCompanyCount = clientToCompanyCount.get((_client$value2 = client.value) !== null && _client$value2 !== void 0 ? _client$value2 : '')) !== null && _clientToCompanyCount !== void 0 ? _clientToCompanyCount : 0) + 1);
+        return clientToCompanyCount;
+      }, new Map());
+    }, [clientUsers]);
+    var _useState = (0, _react.useState)(initialValue !== null && initialValue !== void 0 ? initialValue : []),
+      _useState2 = _slicedToArray(_useState, 2),
+      selectedOptions = _useState2[0],
+      setSelectedOptions = _useState2[1];
+    var _useState3 = (0, _react.useState)(''),
+      _useState4 = _slicedToArray(_useState3, 2),
+      inputValue = _useState4[0],
+      setInputValue = _useState4[1];
+
+    /**
+     * Returns a relevance score for an option based on the input value.
+     * Higher scores indicate more relevant matches (direct name matches > company name matches).
+     * @param option - the option to score
+     * @returns 2 for direct name match, 1 for company name match only, 0 for no match
+     */
+    var getOptionRelevanceScore = (0, _react.useCallback)(function (option) {
+      if (!inputValue) {
+        return 1; // Show all options when no input
+      }
+      var lowerInput = inputValue.toLowerCase();
+      var nameMatches = option.label.toLowerCase().includes(lowerInput);
+      if (option.type === 'client') {
+        var _option$companyId, _company$label;
+        var company = companiesMap.get((_option$companyId = option.companyId) !== null && _option$companyId !== void 0 ? _option$companyId : '');
+        var companyMatches = company === null || company === void 0 || (_company$label = company.label) === null || _company$label === void 0 ? void 0 : _company$label.toLowerCase().includes(lowerInput);
+        if (nameMatches) return 2; // Direct name match - highest priority
+        if (companyMatches) return 1; // Company name match - lower priority
+        return 0; // No match
+      }
+      return nameMatches ? 1 : 0;
+    }, [inputValue, companiesMap]);
+    var isOptionSelected = (0, _react.useCallback)(function (option) {
+      return selectedOptions.some(function (o) {
+        return o.value === option.value;
+      });
+    }, [selectedOptions]);
+    var options = (0, _react.useMemo)(function () {
+      var filteredClients = clientUsers.filter(function (c) {
+        return !isOptionSelected(c);
+      });
+      var filteredCompanies = companies.filter(function (c) {
+        return !isOptionSelected(c);
+      });
+      var filteredInternalUsers = internalUsers.filter(function (c) {
+        return !isOptionSelected(c);
+      });
+      var hasSelectedClients = selectedOptions.some(function (option) {
+        return option.type === 'client';
+      });
+      var hasSelectedCompanies = selectedOptions.some(function (option) {
+        return option.type === 'company';
+      });
+      var hasReachedLimit = selectedOptions.length >= limitSelectedOptions;
+      if (hasSelectedCompanies && limitSelectedOptions > 1 || hasReachedLimit) {
+        filteredClients = [];
+        filteredCompanies = [];
+        filteredInternalUsers = [];
+      }
+      if (hasSelectedClients && limitSelectedOptions > 1) {
+        // if the input has selected clients, we need to filter the clients to only show other
+        // clients within the same company.
+        filteredClients = ignoreFilterClientsByCompany ? clientUsers : clientUsers.filter(function (client) {
+          return hasSelectedClients && selectedOptions.map(function (option) {
+            return option.companyId;
+          }).includes(client.companyId);
+        });
+        filteredCompanies = [];
+        filteredInternalUsers = [];
+      }
+      var filteredGroupedOptions = createGroupedOptions(filteredCompanies, filteredInternalUsers, filteredClients, customLabels).map(function (group) {
+        return _objectSpread(_objectSpread({}, group), {}, {
+          options: group.options.map(function (opt) {
+            return {
+              opt: opt,
+              score: getOptionRelevanceScore(opt)
+            };
+          }).filter(function (_ref2) {
+            var score = _ref2.score;
+            return score > 0;
+          }).sort(function (a, b) {
+            return b.score - a.score;
+          }).slice(0, MAX_OPTIONS.group).map(function (_ref3) {
+            var opt = _ref3.opt;
+            return opt;
+          })
+        });
+      });
+      var filteredFlatOptions = [].concat(_toConsumableArray(filteredInternalUsers), _toConsumableArray(filteredClients), _toConsumableArray(filteredCompanies)).map(function (opt) {
+        return {
+          opt: opt,
+          score: getOptionRelevanceScore(opt)
+        };
+      }).filter(function (_ref4) {
+        var score = _ref4.score;
+        return score > 0;
+      }).sort(function (a, b) {
+        return b.score - a.score;
+      }).slice(0, MAX_OPTIONS.flat).map(function (_ref5) {
+        var opt = _ref5.opt;
+        return opt;
+      });
+
+      // when grouped is true then we need to show the options list in a group manner.
+      var opts = grouped ? filteredGroupedOptions : filteredFlatOptions;
+      return opts;
+    }, [internalUsers, clientUsers, companies, grouped, selectedOptions, ignoreFilterClientsByCompany, limitSelectedOptions, getOptionRelevanceScore, isOptionSelected, customLabels]);
+
+    /**
+     * Handles the change of the selected options
+     * @param value - the selected options
+     */
+    var handleChange = function handleChange(value) {
+      var selectedOptionsValue = [];
+      if (value.length > limitSelectedOptions) {
+        if (value.length === 2 && limitSelectedOptions === 1) {
+          var newSelectedOption = value[1];
+          if (newSelectedOption) {
+            var _newSelectedOption$co;
+            setSelectedOptions([newSelectedOption]);
+            selectedOptionsValue = [{
+              id: newSelectedOption.value,
+              companyId: (_newSelectedOption$co = newSelectedOption.companyId) !== null && _newSelectedOption$co !== void 0 ? _newSelectedOption$co : '',
+              object: newSelectedOption.type
+            }];
+          }
+        } else {
+          selectedOptionsValue = value.slice(0, -1).map(function (_ref6) {
+            var id = _ref6.value,
+              object = _ref6.type,
+              companyId = _ref6.companyId;
+            return {
+              id: id,
+              companyId: companyId !== null && companyId !== void 0 ? companyId : '',
+              object: object
+            };
+          });
+        }
+      } else {
+        setSelectedOptions(value);
+        selectedOptionsValue = value.map(function (_ref7) {
+          var id = _ref7.value,
+            object = _ref7.type,
+            companyId = _ref7.companyId;
+          return {
+            id: id,
+            companyId: companyId !== null && companyId !== void 0 ? companyId : '',
+            object: object
+          };
+        });
+      }
+      onChange(selectedOptionsValue);
+      setInputValue('');
+    };
+
+    /**
+     * This function pupulates the company name and avatar for the client options
+     * @param option - the option to get the company data for
+     * @returns the option with the company data
+     */
+    var getCompanyData = (0, _react.useCallback)(function (option) {
+      var _option$companyId2, _clientToCompanyCount2, _option$value;
+      var company = option.type === 'client' ? companiesMap.get((_option$companyId2 = option.companyId) !== null && _option$companyId2 !== void 0 ? _option$companyId2 : '') : undefined;
+
+      // only setup the company avatar data if the client is part of more than one company
+      var clientsCount = (_clientToCompanyCount2 = clientToCompanyCount.get((_option$value = option.value) !== null && _option$value !== void 0 ? _option$value : '')) !== null && _clientToCompanyCount2 !== void 0 ? _clientToCompanyCount2 : 0;
+      return _objectSpread(_objectSpread({}, option), option.type === 'client' && clientsCount > 1 ? {
+        companyName: company === null || company === void 0 ? void 0 : company.label,
+        companyAvatarSrc: company === null || company === void 0 ? void 0 : company.avatarSrc,
+        companyAvatarFallbackColor: company === null || company === void 0 ? void 0 : company.avatarFallbackColor
+      } : {});
+    }, [companiesMap, clientToCompanyCount]);
+    var handleFilterOption = (0, _react.useCallback)(function (option, inputValue) {
+      var lowerCaseInputValue = inputValue.toLowerCase();
+      if (ignoreCompanies && option.data.type === 'company') {
+        return false;
+      }
+      var optionLabel = option.data.label.toLowerCase();
+      // for clients option, we should filter by company name too
+      // e.g. if a client company is ACME and the input is ACME, the result should
+      // show the client with the company ACME and the client with the company name
+      // ACME
+      if (option.data.type === 'client') {
+        var _option$data$companyI, _clientCompany$label;
+        var clientCompany = companiesMap.get((_option$data$companyI = option.data.companyId) !== null && _option$data$companyI !== void 0 ? _option$data$companyI : '');
+        var companyName = clientCompany === null || clientCompany === void 0 || (_clientCompany$label = clientCompany.label) === null || _clientCompany$label === void 0 ? void 0 : _clientCompany$label.toLowerCase();
+        if (companyName !== null && companyName !== void 0 && companyName.includes(lowerCaseInputValue)) {
+          return true;
+        }
+      }
+      return optionLabel.includes(lowerCaseInputValue);
+    }, [ignoreCompanies, companiesMap]);
+
+    /**
+     * This is a memoized object that defines the custom components for the combo select
+     */
+    var memoizedComponents = (0, _react.useMemo)(function () {
+      return {
+        NoOptionsMessage: function NoOptionsMessage() {
+          return /*#__PURE__*/_react["default"].createElement("div", {
+            className: "cop-flex cop-h-8 cop-items-center cop-gap-2 cop-px-3"
+          }, /*#__PURE__*/_react["default"].createElement(_Typography.Body, {
+            className: "cop-text-[12px] cop-text-primary"
+          }, "No results found"));
+        },
+        GroupHeading: function GroupHeading(props) {
+          return /*#__PURE__*/_react["default"].createElement("div", {
+            className: "cop-flex cop-h-8 cop-items-center cop-gap-2 cop-px-3"
+          }, /*#__PURE__*/_react["default"].createElement(_Typography.Heading, {
+            className: "cop-text-secondary",
+            size: "xs"
+          }, props.data.label));
+        },
+        Option: function Option(props) {
+          return /*#__PURE__*/_react["default"].createElement(_ListItem.ListItem, _extends({}, props, {
+            data: getCompanyData(props.data)
+          }));
+        },
+        DropdownIndicator: function DropdownIndicator() {
+          return null;
+        },
+        MultiValue: function MultiValue(props) {
+          return /*#__PURE__*/_react["default"].createElement(_SelectedValueChip.SelectedValueChip, _extends({}, props, {
+            data: getCompanyData(props.data)
+          }));
+        },
+        MenuList: function MenuList(props) {
+          return /*#__PURE__*/_react["default"].createElement(_LimitedOptionsList.LimitedOptionsList, _extends({}, props, {
+            isGroup: false,
+            title: listHeading
+          }));
+        },
+        Group: function Group(props) {
+          return /*#__PURE__*/_react["default"].createElement(_LimitedOptionsList.LimitedOptionsList, _extends({}, props, {
+            isGroup: true
+          }));
+        }
+      };
+    }, [getCompanyData]);
+    return /*#__PURE__*/_react["default"].createElement(_reactSelect["default"], _extends({
+      autoFocus: autoFocus,
+      isMulti: true,
+      name: name,
+      onInputChange: function onInputChange(inputValue) {
+        return setInputValue(inputValue);
+      },
+      options: options,
+      onChange: handleChange,
+      onBlur: onBlur,
+      placeholder: placeholder,
+      filterOption: handleFilterOption,
+      unstyled: true,
+      styles: _objectSpread({
+        clearIndicator: function clearIndicator() {
+          return {
+            display: 'none' // hide the clear button. Unfortunatelly, the class specificity is not enough to override the default styles.
+          };
+        },
+        placeholder: function placeholder(base) {
+          return _objectSpread(_objectSpread({}, base), {}, {
+            color: _colors.colors.gray[500]
+          });
+        }
+      }, styles),
+      classNames: {
+        valueContainer: function valueContainer() {
+          return 'cop-flex cop-gap-1';
+        },
+        input: function input() {
+          return 'cop-text-base cop-text-primary hover:cop-cursor-text';
+        },
+        menuList: function menuList() {
+          return 'cop-relative cop-bg-white cop-shadow-popover-50 cop-rounded cop-border cop-border-solid cop-border-secondary cop-mt-1';
+        },
+        control: function control() {
+          return 'cop-border-solid cop-border-[1px] cop-border-secondary focus-within:cop-border-primary cop-px-3 cop-py-[2px] cop-rounded';
+        }
+      },
+      components: memoizedComponents,
+      value: selectedOptions
+    }, others));
+  };
+});

package/dist/umd/components/UserCompanySelector/data.js

@@ -0,0 +1,85 @@
+// This file is generated by a script. Do not edit this file directly.
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports);
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports);
+    global.data = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports) {
+  "use strict";
+
+  Object.defineProperty(_exports, "__esModule", {
+    value: true
+  });
+  _exports.internalUsers = _exports.companies = _exports.clientUsers = void 0;
+  /**
+   * This file is used to generate the data for the combo select stories
+   */
+
+  function generateRandomSrc() {
+    return "https://i.pravatar.cc/150?img=".concat(Math.floor(Math.random() * 70) + 1);
+  }
+  var firstNames = ['John', 'Jane', 'Alice', 'Bob', 'Lara', 'Mike', 'Sarah', 'David', 'Emily', 'Daniel', 'Chris', 'Olivia', 'James', 'Sophia', 'Henry', 'Emma', 'Liam', 'Mia', 'Noah', 'Zoe'];
+  var lastNames = ['Smith', 'Johnson', 'Williams', 'Brown', 'Jones', 'Miller', 'Davis', 'Garcia', 'Martinez', 'Lopez', 'Clark', 'Lewis', 'Walker', 'Young', 'Allen', 'King', 'Wright', 'Scott', 'Torres', 'Nguyen'];
+
+  // Generate unique name combinations
+  function generateUniqueNames(count) {
+    var combinations = [];
+    for (var _i = 0, _firstNames = firstNames; _i < _firstNames.length; _i++) {
+      var first = _firstNames[_i];
+      for (var _i2 = 0, _lastNames = lastNames; _i2 < _lastNames.length; _i2++) {
+        var last = _lastNames[_i2];
+        combinations.push("".concat(first, " ").concat(last));
+      }
+    }
+    // Shuffle and slice to the required count
+    var shuffled = combinations.sort(function () {
+      return 0.5 - Math.random();
+    });
+    return shuffled.slice(0, count);
+  }
+
+  // Get 100 unique names for internal and client users
+  var internalUserNames = generateUniqueNames(100);
+  var clientUserNames = generateUniqueNames(100);
+
+  // Generate companies
+  var companies = _exports.companies = Array.from({
+    length: 100
+  }, function (_, i) {
+    return {
+      value: "company-".concat(i + 1),
+      label: "Company ".concat(i + 1),
+      avatarSrc: generateRandomSrc(),
+      type: 'company'
+    };
+  });
+
+  // Generate internal users
+  var internalUsers = _exports.internalUsers = internalUserNames.map(function (name, i) {
+    return {
+      value: "internal-".concat(i + 1),
+      label: name,
+      avatarSrc: generateRandomSrc(),
+      type: 'internalUser'
+    };
+  });
+
+  // Generate client users (with valid companyIds)
+  var clientUsers = _exports.clientUsers = clientUserNames.map(function (name, i) {
+    var _companies$Math$floor;
+    return {
+      value: "client-".concat(i + 1),
+      label: name,
+      avatarSrc: generateRandomSrc(),
+      type: 'client',
+      companyId: (_companies$Math$floor = companies[Math.floor(Math.random() * companies.length)]) === null || _companies$Math$floor === void 0 ? void 0 : _companies$Math$floor.value
+    };
+  });
+});

package/dist/umd/components/UserCompanySelector/types.js

@@ -0,0 +1,20 @@
+// This file is generated by a script. Do not edit this file directly.
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports);
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports);
+    global.types = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports) {
+  "use strict";
+
+  Object.defineProperty(_exports, "__esModule", {
+    value: true
+  });
+});

package/dist/umd/icons/AI.js

@@ -0,0 +1,36 @@
+// This file is generated by a script. Do not edit this file directly.
+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); }
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "react"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("react"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.react);
+    global.AI = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, React) {
+  "use strict";
+
+  Object.defineProperty(_exports, "__esModule", {
+    value: true
+  });
+  _exports.AI = void 0;
+  React = _interopRequireWildcard(React);
+  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 && {}.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 _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); }
+  var AI = _exports.AI = function AI(props) {
+    return /*#__PURE__*/React.createElement("svg", _extends({
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "none",
+      viewBox: "0 0 20 20"
+    }, props), /*#__PURE__*/React.createElement("path", {
+      fill: "currentColor",
+      d: "M12.793 3.328a.45.45 0 0 0-.293.422c0 .188.117.355.293.422L15 5l.828 2.207a.45.45 0 0 0 .422.293.45.45 0 0 0 .422-.293L17.5 5l2.207-.828A.45.45 0 0 0 20 3.75a.45.45 0 0 0-.293-.422L17.5 2.5 16.672.293A.45.45 0 0 0 16.25 0a.45.45 0 0 0-.422.293L15 2.5zM.363 9.375a.62.62 0 0 0-.363.57c0 .246.14.465.363.567l.664.308.317.145.023.012 3.45 1.593 1.593 3.446.012.023.144.316.309.668a.622.622 0 0 0 1.133 0l.308-.668.145-.316.012-.023 1.593-3.45 3.45-1.59.023-.011.316-.145.668-.308a.622.622 0 0 0 0-1.133l-.668-.309-.316-.144-.023-.012-3.45-1.594-1.59-3.449-.011-.023-.145-.32-.308-.669a.623.623 0 0 0-1.133 0l-.309.668-.144.317-.012.023-1.594 3.45L1.371 8.91l-.023.012-.317.144zm3.242.566 2-.921c.407-.188.73-.512.918-.918l.922-2 .922 2c.188.406.512.73.918.918l2 .921-2 .922c-.406.188-.73.512-.918.918l-.922 2-.922-2a1.87 1.87 0 0 0-.918-.918l-2-.918zM15 15l-2.207.828a.45.45 0 0 0-.293.422c0 .188.117.355.293.422L15 17.5l.828 2.207a.45.45 0 0 0 .422.293.45.45 0 0 0 .422-.293L17.5 17.5l2.207-.828A.45.45 0 0 0 20 16.25a.45.45 0 0 0-.293-.422L17.5 15l-.828-2.207a.45.45 0 0 0-.422-.293.45.45 0 0 0-.422.293z"
+    }));
+  };
+});

package/dist/umd/icons/API.js

@@ -0,0 +1,36 @@
+// This file is generated by a script. Do not edit this file directly.
+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); }
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "react"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("react"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.react);
+    global.API = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, React) {
+  "use strict";
+
+  Object.defineProperty(_exports, "__esModule", {
+    value: true
+  });
+  _exports.API = void 0;
+  React = _interopRequireWildcard(React);
+  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 && {}.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 _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); }
+  var API = _exports.API = function API(props) {
+    return /*#__PURE__*/React.createElement("svg", _extends({
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "none",
+      viewBox: "0 0 20 20"
+    }, props), /*#__PURE__*/React.createElement("path", {
+      fill: "currentColor",
+      d: "M17.5 3.125c.344 0 .625.281.625.625v12.5a.627.627 0 0 1-.625.625h-15a.627.627 0 0 1-.625-.625V3.75c0-.344.281-.625.625-.625zM2.5 1.25A2.5 2.5 0 0 0 0 3.75v12.5c0 1.379 1.121 2.5 2.5 2.5h15c1.379 0 2.5-1.121 2.5-2.5V3.75c0-1.379-1.121-2.5-2.5-2.5zm1.496 4.68a.934.934 0 0 0 .059 1.324L7.05 10l-2.996 2.746A.938.938 0 0 0 5.32 14.13l3.75-3.438a.938.938 0 0 0 0-1.383L5.32 5.872a.934.934 0 0 0-1.324.059m5.692 7.195a.935.935 0 0 0-.938.938c0 .519.418.937.938.937h5.624c.52 0 .938-.418.938-.937a.935.935 0 0 0-.937-.938z"
+    }));
+  };
+});