@assembly-js/design-system 3.1.11 → 3.1.14

package/dist/esm/components/UserCompanySelector/ListItem.js

@@ -3,15 +3,16 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 import React from 'react';
 import { Avatar } from "../Avatar/Avatar";
 import { Body } from "../Typography";
-import clsx from 'clsx';
 import { UserWithCompanyAvatar } from "../Avatar/UserWithCompanyAvatar";
-import { getInitials } from "../../common/utils";
-export function ListItem(_ref) {
+import { cn, getInitials } from "../../common/utils";
+export function ListItem(props) {
   var _option$avatarSrc, _option$avatarFallbac, _option$label;
-  var option = _ref.data,
-    innerRef = _ref.innerRef,
-    isFocused = _ref.isFocused,
-    innerProps = _ref.innerProps;
+  var option = props.data,
+    innerRef = props.innerRef,
+    isFocused = props.isFocused,
+    isSelected = props.isSelected,
+    innerProps = props.innerProps,
+    listClassName = props.listClassName;
   var avatarSrc = option.avatarSrc,
     avatarFallbackColor = option.avatarFallbackColor,
     label = option.label,
@@ -23,13 +24,15 @@ export function ListItem(_ref) {
     key: option.value,
     ref: innerRef
   }, innerProps, {
-    className: clsx('cop-flex cop-cursor-pointer cop-items-center cop-gap-3 cop-px-3 hover:cop-bg-gray-100', {
+    "data-focused": isFocused || undefined,
+    "data-selected": isSelected || undefined,
+    className: cn('cop-flex cop-cursor-pointer cop-items-center cop-gap-3 cop-px-3 hover:cop-bg-gray-100', {
       'cop-h-10': !!companyName,
       // if an option has company name to render, the option should have a height of 40px
       'cop-h-8': !companyName,
       // if an option has no company name to render, the option should have a height of 32px
       'cop-bg-primary': isFocused
-    })
+    }, listClassName)
   }), option.type !== 'company' ? /*#__PURE__*/React.createElement(UserWithCompanyAvatar, {
     size: "sm",
     avatarSrc: (_option$avatarSrc = option.avatarSrc) !== null && _option$avatarSrc !== void 0 ? _option$avatarSrc : '',

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

@@ -23,8 +23,12 @@ export function SelectedValueChip(props) {
     }
   };
   return /*#__PURE__*/React.createElement(Chip, {
-    className: "!cop-rounded cop-border cop-border-solid cop-py-[5px] cop-max-w-[200px]",
+    className: "cop-max-w-[200px] !cop-rounded cop-border cop-border-solid cop-py-[5px]",
     variant: "outlined",
+    onClick: function onClick() {
+      return null;
+    } // passing onclick would allow showing the hover state - this is a temporary solution avoiding doing big changes in the chip component might causing regressions
+    ,
     truncate: true,
     onClose: handleRemove,
     prefixIcon: option.type === 'company' ? /*#__PURE__*/React.createElement(Avatar, {

package/dist/esm/components/UserCompanySelector/UserCompanySelector.js

@@ -2,7 +2,7 @@
 'use client';
 
 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); }
-var _excluded = ["autoFocus", "grouped", "name", "internalUsers", "clientUsers", "companies", "onChange", "onBlur", "placeholder", "styles", "ignoreCompanies", "ignoreFilterClientsByCompany", "limitSelectedOptions", "initialValue", "customLabels", "listHeading"];
+var _excluded = ["autoFocus", "grouped", "name", "internalUsers", "clientUsers", "companies", "onChange", "onBlur", "placeholder", "styles", "ignoreCompanies", "ignoreFilterClientsByCompany", "limitSelectedOptions", "initialValue", "customLabels", "listHeading", "listClassName", "variant"];
 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."); }
@@ -29,6 +29,8 @@ import { Heading, Body } from "../Typography";
 import { SelectedValueChip } from "./SelectedValueChip";
 import { LimitedOptionsList } from "./LimitedOptionsList";
 import { colors } from "../../theme/colors";
+import { getClassNames } from "./getClassNames";
+import { getOptionRelevanceScore } from "./getOptionRelevanceScore";
 var MAX_OPTIONS = {
   flat: 6,
   group: 3
@@ -78,6 +80,9 @@ export var UserCompanySelector = function UserCompanySelector(_ref) {
     initialValue = _ref.initialValue,
     customLabels = _ref.customLabels,
     listHeading = _ref.listHeading,
+    listClassName = _ref.listClassName,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'default' : _ref$variant,
     others = _objectWithoutProperties(_ref, _excluded);
   var limitSelectedOptions = limitSelectedOptionsUnvalidated === 0 ? 1000 : Math.min(1000, limitSelectedOptionsUnvalidated);
   var companiesMap = useMemo(function () {
@@ -101,29 +106,9 @@ export var UserCompanySelector = function UserCompanySelector(_ref) {
     _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 = 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 scoreOption = useCallback(function (option) {
+    return getOptionRelevanceScore(option, inputValue, companiesMap, ignoreCompanies);
+  }, [inputValue, companiesMap, ignoreCompanies]);
   var isOptionSelected = useCallback(function (option) {
     return selectedOptions.some(function (o) {
       return o.value === option.value;
@@ -167,7 +152,7 @@ export var UserCompanySelector = function UserCompanySelector(_ref) {
         options: group.options.map(function (opt) {
           return {
             opt: opt,
-            score: getOptionRelevanceScore(opt)
+            score: scoreOption(opt)
           };
         }).filter(function (_ref2) {
           var score = _ref2.score;
@@ -183,7 +168,7 @@ export var UserCompanySelector = function UserCompanySelector(_ref) {
     var filteredFlatOptions = [].concat(_toConsumableArray(filteredInternalUsers), _toConsumableArray(filteredClients), _toConsumableArray(filteredCompanies)).map(function (opt) {
       return {
         opt: opt,
-        score: getOptionRelevanceScore(opt)
+        score: scoreOption(opt)
       };
     }).filter(function (_ref4) {
       var score = _ref4.score;
@@ -198,7 +183,7 @@ export var UserCompanySelector = function UserCompanySelector(_ref) {
     // 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]);
+  }, [internalUsers, clientUsers, companies, grouped, selectedOptions, ignoreFilterClientsByCompany, limitSelectedOptions, scoreOption, isOptionSelected, customLabels]);
 
   /**
    * Handles the change of the selected options
@@ -253,8 +238,8 @@ export var UserCompanySelector = function UserCompanySelector(_ref) {
    * @returns the option with the company data
    */
   var getCompanyData = 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;
+    var _option$companyId, _clientToCompanyCount2, _option$value;
+    var company = option.type === 'client' ? companiesMap.get((_option$companyId = option.companyId) !== null && _option$companyId !== void 0 ? _option$companyId : '') : 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;
@@ -265,11 +250,12 @@ export var UserCompanySelector = function UserCompanySelector(_ref) {
     } : {});
   }, [companiesMap, clientToCompanyCount]);
   var handleFilterOption = useCallback(function (option, inputValue) {
+    var _option$data$label$to, _option$data$label;
     var lowerCaseInputValue = inputValue.toLowerCase();
     if (ignoreCompanies && option.data.type === 'company') {
       return false;
     }
-    var optionLabel = option.data.label.toLowerCase();
+    var optionLabel = (_option$data$label$to = (_option$data$label = option.data.label) === null || _option$data$label === void 0 ? void 0 : _option$data$label.toLowerCase()) !== null && _option$data$label$to !== void 0 ? _option$data$label$to : '';
     // 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
@@ -307,7 +293,8 @@ export var UserCompanySelector = function UserCompanySelector(_ref) {
       },
       Option: function Option(props) {
         return /*#__PURE__*/React.createElement(ListItem, _extends({}, props, {
-          data: getCompanyData(props.data)
+          data: getCompanyData(props.data),
+          listClassName: listClassName
         }));
       },
       DropdownIndicator: function DropdownIndicator() {
@@ -330,7 +317,10 @@ export var UserCompanySelector = function UserCompanySelector(_ref) {
         }));
       }
     };
-  }, [getCompanyData]);
+  }, [getCompanyData, listHeading, listClassName]);
+  var variantClassNames = useMemo(function () {
+    return getClassNames(variant);
+  }, [variant]);
   return /*#__PURE__*/React.createElement(Select, _extends({
     autoFocus: autoFocus,
     isMulti: true,
@@ -344,7 +334,7 @@ export var UserCompanySelector = function UserCompanySelector(_ref) {
     placeholder: placeholder,
     filterOption: handleFilterOption,
     unstyled: true,
-    styles: _objectSpread({
+    styles: _objectSpread(_objectSpread({
       clearIndicator: function clearIndicator() {
         return {
           display: 'none' // hide the clear button. Unfortunatelly, the class specificity is not enough to override the default styles.
@@ -355,20 +345,20 @@ export var UserCompanySelector = function UserCompanySelector(_ref) {
           color: 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';
+    }, variant === 'unified' ? {
+      menu: function menu() {
+        return {
+          position: 'static'
+        };
       }
+    } : {}), styles),
+    classNames: {
+      container: variantClassNames.container,
+      valueContainer: variantClassNames.valueContainer,
+      input: variantClassNames.input,
+      placeholder: variantClassNames.placeholder,
+      menuList: variantClassNames.menuList,
+      control: variantClassNames.control
     },
     components: memoizedComponents,
     value: selectedOptions

package/dist/esm/components/UserCompanySelector/__tests__/getClassNames.test.js

@@ -0,0 +1,81 @@
+// This file is generated by a script. Do not edit this file directly.
+import { getClassNames } from "../getClassNames";
+describe('getClassNames', function () {
+  describe('default variant', function () {
+    var cls = getClassNames('default');
+    it('control has outer border, rounded, and focus-within blue border', function () {
+      var control = cls.control();
+      expect(control).toContain('cop-border-solid');
+      expect(control).toContain('cop-border-[1px]');
+      expect(control).toContain('cop-border-secondary');
+      expect(control).toContain('cop-rounded');
+      expect(control).toContain('focus-within:cop-border-primary');
+    });
+    it('menuList has its own border, shadow, rounded, and top margin', function () {
+      var menuList = cls.menuList();
+      expect(menuList).toContain('cop-shadow-popover-50');
+      expect(menuList).toContain('cop-rounded');
+      expect(menuList).toContain('cop-border');
+      expect(menuList).toContain('cop-border-secondary');
+      expect(menuList).toContain('cop-mt-1');
+    });
+    it('container returns undefined (no outer wrapper in default)', function () {
+      expect(cls.container).toBeUndefined();
+    });
+  });
+  describe('unified variant', function () {
+    var cls = getClassNames('unified');
+    it('container has border, rounded corners, and shadow', function () {
+      var _cls$container, _cls$container2;
+      var container = (_cls$container = (_cls$container2 = cls.container) === null || _cls$container2 === void 0 ? void 0 : _cls$container2.call(cls)) !== null && _cls$container !== void 0 ? _cls$container : '';
+      expect(container).toContain('cop-border');
+      expect(container).toContain('cop-border-secondary');
+      expect(container).toContain('cop-rounded');
+      expect(container).toContain('cop-shadow-popover-50');
+      expect(container).toContain('cop-overflow-hidden');
+    });
+    it('control has no border (outer container owns all border styling)', function () {
+      var control = cls.control();
+      expect(control).toContain('cop-px-3');
+      expect(control).toContain('cop-py-[2px]');
+      expect(control).not.toContain('cop-border');
+      expect(control).not.toContain('cop-rounded');
+      expect(control).not.toContain('focus-within:cop-border-primary');
+    });
+    it('menuList has no border, no shadow, no rounded, no top margin', function () {
+      var menuList = cls.menuList();
+      expect(menuList).not.toContain('cop-shadow-popover-50');
+      expect(menuList).not.toContain('cop-rounded');
+      expect(menuList).not.toContain('cop-border-solid');
+      expect(menuList).not.toContain('cop-border-secondary');
+      expect(menuList).not.toContain('cop-mt-1');
+    });
+  });
+  describe('shared across variants', function () {
+    it('input uses 13px font size with 20px line height in default', function () {
+      var input = getClassNames('default').input();
+      expect(input).toContain('cop-text-[13px]');
+      expect(input).toContain('cop-leading-5');
+    });
+    it('input uses 13px font size with 20px line height in unified', function () {
+      var input = getClassNames('unified').input();
+      expect(input).toContain('cop-text-[13px]');
+      expect(input).toContain('cop-leading-5');
+    });
+    it('placeholder uses 13px font size with 20px line height in default', function () {
+      var placeholder = getClassNames('default').placeholder();
+      expect(placeholder).toContain('cop-text-[13px]');
+      expect(placeholder).toContain('cop-leading-5');
+    });
+    it('placeholder uses 13px font size with 20px line height in unified', function () {
+      var placeholder = getClassNames('unified').placeholder();
+      expect(placeholder).toContain('cop-text-[13px]');
+      expect(placeholder).toContain('cop-leading-5');
+    });
+    it('valueContainer is the same flex gap class in both variants', function () {
+      expect(getClassNames('default').valueContainer()).toBe(getClassNames('unified').valueContainer());
+      expect(getClassNames('default').valueContainer()).toContain('cop-flex');
+      expect(getClassNames('default').valueContainer()).toContain('cop-gap-1');
+    });
+  });
+});

package/dist/esm/components/UserCompanySelector/__tests__/getOptionRelevanceScore.test.js

@@ -0,0 +1,115 @@
+// 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 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); }
+import { getOptionRelevanceScore } from "../getOptionRelevanceScore";
+var company = {
+  value: 'company-1',
+  label: 'Acme Inc',
+  type: 'company'
+};
+var client = {
+  value: 'client-1',
+  label: 'Jane Doe',
+  type: 'client',
+  companyId: 'company-1'
+};
+var internalUser = {
+  value: 'user-1',
+  label: 'John Smith',
+  type: 'internalUser'
+};
+var companiesMap = new Map([[company.value, company]]);
+describe('getOptionRelevanceScore', function () {
+  describe('empty input', function () {
+    it('returns 1 (show all) when input is empty', function () {
+      expect(getOptionRelevanceScore(client, '', companiesMap)).toBe(1);
+      expect(getOptionRelevanceScore(company, '', companiesMap)).toBe(1);
+      expect(getOptionRelevanceScore(internalUser, '', companiesMap)).toBe(1);
+    });
+  });
+  describe('client options', function () {
+    it('returns 2 for a direct name match', function () {
+      expect(getOptionRelevanceScore(client, 'jane', companiesMap)).toBe(2);
+    });
+    it('returns 1 for a company name match only', function () {
+      expect(getOptionRelevanceScore(client, 'acme', companiesMap)).toBe(1);
+    });
+    it('prefers the direct name match (2) over a company match', function () {
+      var acmeClient = _objectSpread(_objectSpread({}, client), {}, {
+        label: 'Acme Person'
+      });
+      expect(getOptionRelevanceScore(acmeClient, 'acme', companiesMap)).toBe(2);
+    });
+    it('returns 0 when neither name nor company match', function () {
+      expect(getOptionRelevanceScore(client, 'zzz', companiesMap)).toBe(0);
+    });
+    it('matches case-insensitively', function () {
+      expect(getOptionRelevanceScore(client, 'JANE', companiesMap)).toBe(2);
+    });
+    it('returns 0 for a company match when the company is missing from the map', function () {
+      expect(getOptionRelevanceScore(client, 'acme', new Map())).toBe(0);
+    });
+  });
+  describe('non-client options', function () {
+    it('returns 1 for a matching company', function () {
+      expect(getOptionRelevanceScore(company, 'acme', companiesMap)).toBe(1);
+    });
+    it('returns 0 for a non-matching company', function () {
+      expect(getOptionRelevanceScore(company, 'zzz', companiesMap)).toBe(0);
+    });
+    it('returns 1 for a matching internal user', function () {
+      expect(getOptionRelevanceScore(internalUser, 'john', companiesMap)).toBe(1);
+    });
+  });
+  describe('ignoreCompanies', function () {
+    it('returns 0 for company options when ignoreCompanies is true, even on a match', function () {
+      expect(getOptionRelevanceScore(company, 'acme', companiesMap, true)).toBe(0);
+    });
+    it('returns 0 for company options when ignoreCompanies is true and input is empty', function () {
+      expect(getOptionRelevanceScore(company, '', companiesMap, true)).toBe(0);
+    });
+    it('still scores client options normally when ignoreCompanies is true', function () {
+      expect(getOptionRelevanceScore(client, 'jane', companiesMap, true)).toBe(2);
+    });
+  });
+  describe('null-safety (bad runtime data)', function () {
+    it('does not throw and returns 0 when a client label is null', function () {
+      var badClient = _objectSpread(_objectSpread({}, client), {}, {
+        label: null
+      });
+      expect(function () {
+        return getOptionRelevanceScore(badClient, 'jane', companiesMap);
+      }).not.toThrow();
+      // name does not match (null), company "Acme" does not match "jane" -> 0
+      expect(getOptionRelevanceScore(badClient, 'jane', companiesMap)).toBe(0);
+    });
+    it('falls back to the company match when a client label is null', function () {
+      var badClient = _objectSpread(_objectSpread({}, client), {}, {
+        label: undefined
+      });
+      expect(getOptionRelevanceScore(badClient, 'acme', companiesMap)).toBe(1);
+    });
+    it('does not throw and returns 0 when a company label is null', function () {
+      var badCompany = _objectSpread(_objectSpread({}, company), {}, {
+        label: null
+      });
+      expect(function () {
+        return getOptionRelevanceScore(badCompany, 'acme', companiesMap);
+      }).not.toThrow();
+      expect(getOptionRelevanceScore(badCompany, 'acme', companiesMap)).toBe(0);
+    });
+    it('does not throw when the matching company in the map has a null label', function () {
+      var mapWithBadCompany = new Map([[company.value, _objectSpread(_objectSpread({}, company), {}, {
+        label: null
+      })]]);
+      expect(function () {
+        return getOptionRelevanceScore(client, 'acme', mapWithBadCompany);
+      }).not.toThrow();
+      expect(getOptionRelevanceScore(client, 'acme', mapWithBadCompany)).toBe(0);
+    });
+  });
+});

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

@@ -3,14 +3,19 @@
  * 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);
+// Deterministic avatar src so Storybook/Chromatic snapshots are stable across builds.
+// pravatar exposes images 1-70, so we cycle through that range based on the item index.
+function generateSrc(index) {
+  return "https://i.pravatar.cc/150?img=".concat(index % 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
+// Generate unique name combinations deterministically.
+// `offset` lets callers pick a different, non-overlapping slice of the same
+// stable ordering so internal and client lists don't share identical names.
 function generateUniqueNames(count) {
+  var offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
   var combinations = [];
   for (var _i = 0, _firstNames = firstNames; _i < _firstNames.length; _i++) {
     var first = _firstNames[_i];
@@ -19,16 +24,12 @@ function generateUniqueNames(count) {
       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);
+  return combinations.slice(offset, offset + count);
 }
 
-// Get 100 unique names for internal and client users
+// Get 100 unique names for internal and client users (non-overlapping slices)
 var internalUserNames = generateUniqueNames(100);
-var clientUserNames = generateUniqueNames(100);
+var clientUserNames = generateUniqueNames(100, 100);
 
 // Generate companies
 var companies = Array.from({
@@ -37,7 +38,7 @@ var companies = Array.from({
   return {
     value: "company-".concat(i + 1),
     label: "Company ".concat(i + 1),
-    avatarSrc: generateRandomSrc(),
+    avatarSrc: generateSrc(i),
     type: 'company'
   };
 });
@@ -47,20 +48,21 @@ var internalUsers = internalUserNames.map(function (name, i) {
   return {
     value: "internal-".concat(i + 1),
     label: name,
-    avatarSrc: generateRandomSrc(),
+    avatarSrc: generateSrc(i),
     type: 'internalUser'
   };
 });
 
 // Generate client users (with valid companyIds)
 var clientUsers = clientUserNames.map(function (name, i) {
-  var _companies$Math$floor;
+  var _companies;
   return {
     value: "client-".concat(i + 1),
     label: name,
-    avatarSrc: generateRandomSrc(),
+    avatarSrc: generateSrc(i),
     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
+    // Deterministically distribute clients across companies for stable snapshots.
+    companyId: (_companies = companies[i % companies.length]) === null || _companies === void 0 ? void 0 : _companies.value
   };
 });
 export { companies, internalUsers, clientUsers };

package/dist/esm/components/UserCompanySelector/getClassNames.js

@@ -0,0 +1,44 @@
+// 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 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); }
+var INPUT_CLASSES = 'cop-text-[13px] cop-leading-5 cop-text-primary hover:cop-cursor-text';
+var PLACEHOLDER_CLASSES = 'cop-text-[13px] cop-leading-5';
+var VALUE_CONTAINER_CLASSES = 'cop-flex cop-gap-1';
+export var getClassNames = function getClassNames(variant) {
+  var shared = {
+    input: function input() {
+      return INPUT_CLASSES;
+    },
+    placeholder: function placeholder() {
+      return PLACEHOLDER_CLASSES;
+    },
+    valueContainer: function valueContainer() {
+      return VALUE_CONTAINER_CLASSES;
+    }
+  };
+  if (variant === 'unified') {
+    return _objectSpread(_objectSpread({}, shared), {}, {
+      container: function container() {
+        return 'cop-border cop-border-solid cop-border-secondary cop-rounded cop-shadow-popover-50 cop-overflow-hidden';
+      },
+      control: function control() {
+        return 'cop-px-3 cop-py-[2px]';
+      },
+      menuList: function menuList() {
+        return 'cop-relative cop-bg-white';
+      }
+    });
+  }
+  return _objectSpread(_objectSpread({}, shared), {}, {
+    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';
+    },
+    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';
+    }
+  });
+};

package/dist/esm/components/UserCompanySelector/getOptionRelevanceScore.js

@@ -0,0 +1,33 @@
+// This file is generated by a script. Do not edit this file directly.
+/**
+ * Returns a relevance score for an option based on the input value.
+ * Higher scores indicate more relevant matches (direct name matches > company name matches).
+ *
+ * This is a pure function so it can be unit-tested in isolation.
+ *
+ * @param option - the option to score
+ * @param inputValue - the current search input
+ * @param companiesMap - lookup of company value -> company option (used to match clients by company name)
+ * @param ignoreCompanies - when true, company options are excluded from results entirely
+ * @returns 2 for direct name match, 1 for company name match only, 0 for no match
+ */
+export var getOptionRelevanceScore = function getOptionRelevanceScore(option, inputValue, companiesMap, ignoreCompanies) {
+  var _option$label$toLower, _option$label;
+  if (ignoreCompanies && option.type === 'company') {
+    return 0; // companies are hidden when ignoreCompanies is set
+  }
+  if (!inputValue) {
+    return 1; // Show all options when no input
+  }
+  var lowerInput = inputValue.toLowerCase();
+  var nameMatches = (_option$label$toLower = (_option$label = option.label) === null || _option$label === void 0 ? void 0 : _option$label.toLowerCase().includes(lowerInput)) !== null && _option$label$toLower !== void 0 ? _option$label$toLower : false;
+  if (option.type === 'client') {
+    var _option$companyId, _company$label$toLowe, _company$label;
+    var company = companiesMap.get((_option$companyId = option.companyId) !== null && _option$companyId !== void 0 ? _option$companyId : '');
+    var companyMatches = (_company$label$toLowe = company === null || company === void 0 || (_company$label = company.label) === null || _company$label === void 0 ? void 0 : _company$label.toLowerCase().includes(lowerInput)) !== null && _company$label$toLowe !== void 0 ? _company$label$toLowe : false;
+    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;
+};

package/dist/esm/types/components/UserCompanySelector/ListItem.d.ts

@@ -1,4 +1,9 @@
 import React from 'react';
-import { type OptionWithCompanyMetadata } from './types';
-import { type GroupBase, type OptionProps } from 'react-select';
-export declare function ListItem<_OptionProps extends OptionWithCompanyMetadata, GroupProps extends GroupBase<_OptionProps> = GroupBase<_OptionProps>>({ data: option, innerRef, isFocused, innerProps, }: OptionProps<_OptionProps, true, GroupProps>): React.JSX.Element;
+import { type OptionWithCompanyMetadata, type UserCompanySelectorOption, type UserCompanySelectorGroupedOption } from './types';
+import { type OptionProps } from 'react-select';
+type ListItemProps = OptionProps<UserCompanySelectorOption, true, UserCompanySelectorGroupedOption> & {
+    data: OptionWithCompanyMetadata;
+    listClassName?: string;
+};
+export declare function ListItem(props: ListItemProps): React.JSX.Element;
+export {};

package/dist/esm/types/components/UserCompanySelector/UserCompanySelector.stories.d.ts

@@ -17,3 +17,5 @@ export declare const WithCustomLabels: Story;
 export declare const WithListHeading: Story;
 export declare const WithAvatarFallbackColor: Story;
 export declare const SelectClientInManyCompanies: Story;
+export declare const UnifiedVariant: Story;
+export declare const UnifiedVariantWithPlaceholder: Story;

package/dist/esm/types/components/UserCompanySelector/__tests__/getClassNames.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/types/components/UserCompanySelector/__tests__/getOptionRelevanceScore.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/types/components/UserCompanySelector/getClassNames.d.ts

@@ -0,0 +1,11 @@
+export type UserCompanySelectorVariant = 'default' | 'unified';
+type ClassNamesResult = {
+    container?: () => string;
+    control: () => string;
+    menuList: () => string;
+    input: () => string;
+    placeholder: () => string;
+    valueContainer: () => string;
+};
+export declare const getClassNames: (variant: UserCompanySelectorVariant) => ClassNamesResult;
+export {};

package/dist/esm/types/components/UserCompanySelector/getOptionRelevanceScore.d.ts

@@ -0,0 +1,14 @@
+import type { UserCompanySelectorOption } from '../../components/UserCompanySelector/types';
+/**
+ * Returns a relevance score for an option based on the input value.
+ * Higher scores indicate more relevant matches (direct name matches > company name matches).
+ *
+ * This is a pure function so it can be unit-tested in isolation.
+ *
+ * @param option - the option to score
+ * @param inputValue - the current search input
+ * @param companiesMap - lookup of company value -> company option (used to match clients by company name)
+ * @param ignoreCompanies - when true, company options are excluded from results entirely
+ * @returns 2 for direct name match, 1 for company name match only, 0 for no match
+ */
+export declare const getOptionRelevanceScore: (option: UserCompanySelectorOption, inputValue: string, companiesMap: Map<string, UserCompanySelectorOption>, ignoreCompanies?: boolean) => number;