@assembly-js/design-system 3.1.11 → 3.1.12

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/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"];
 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."); }
@@ -78,6 +78,7 @@ export var UserCompanySelector = function UserCompanySelector(_ref) {
     initialValue = _ref.initialValue,
     customLabels = _ref.customLabels,
     listHeading = _ref.listHeading,
+    listClassName = _ref.listClassName,
     others = _objectWithoutProperties(_ref, _excluded);
   var limitSelectedOptions = limitSelectedOptionsUnvalidated === 0 ? 1000 : Math.min(1000, limitSelectedOptionsUnvalidated);
   var companiesMap = useMemo(function () {
@@ -307,7 +308,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 +332,7 @@ export var UserCompanySelector = function UserCompanySelector(_ref) {
         }));
       }
     };
-  }, [getCompanyData]);
+  }, [getCompanyData, listHeading, listClassName]);
   return /*#__PURE__*/React.createElement(Select, _extends({
     autoFocus: autoFocus,
     isMulti: true,

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/types.d.ts

@@ -41,6 +41,7 @@ export type UserCompanySelectorProps = {
         groupTermPlural: string;
     };
     listHeading?: string;
+    listClassName?: string;
 };
 /**
  * @deprecated Use Option instead