@assembly-js/design-system 3.1.10 → 3.1.12

package/dist/umd/components/Chip/Chip.js

@@ -101,6 +101,8 @@
       size = _ref2$size === void 0 ? 'sm' : _ref2$size,
       className = _ref2.className,
       prefixIcon = _ref2.prefixIcon,
+      _ref2$truncate = _ref2.truncate,
+      truncate = _ref2$truncate === void 0 ? false : _ref2$truncate,
       disabled = _ref2.disabled,
       onClick = _ref2.onClick,
       onClose = _ref2.onClose,
@@ -137,7 +139,9 @@
       })
     }), /*#__PURE__*/_react["default"].createElement(_Typography.Body, {
       size: size !== 'sm' ? 'base' : 'sm',
-      className: "cop-m-0"
+      className: (0, _utils.cn)('cop-m-0', {
+        'cop-truncate': truncate
+      })
     }, label), Boolean(onClose) ?
     /*#__PURE__*/
     // We intentionally attach both onClick and onTouch event

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

@@ -1,17 +1,17 @@
 // 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", "../Avatar/Avatar", "../Typography", "clsx", "../Avatar/UserWithCompanyAvatar", "../../common/utils"], factory);
+    define(["exports", "react", "../Avatar/Avatar", "../Typography", "../Avatar/UserWithCompanyAvatar", "../../common/utils"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("react"), require("../Avatar/Avatar"), require("../Typography"), require("clsx"), require("../Avatar/UserWithCompanyAvatar"), require("../../common/utils"));
+    factory(exports, require("react"), require("../Avatar/Avatar"), require("../Typography"), require("../Avatar/UserWithCompanyAvatar"), require("../../common/utils"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global.react, global.Avatar, global.Typography, global.clsx, global.UserWithCompanyAvatar, global.utils);
+    factory(mod.exports, global.react, global.Avatar, global.Typography, global.UserWithCompanyAvatar, global.utils);
     global.ListItem = mod.exports;
   }
-})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _react, _Avatar, _Typography, _clsx, _UserWithCompanyAvatar, _utils) {
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _react, _Avatar, _Typography, _UserWithCompanyAvatar, _utils) {
   "use strict";
 
   Object.defineProperty(_exports, "__esModule", {
@@ -19,15 +19,16 @@
   });
   _exports.ListItem = ListItem;
   _react = _interopRequireDefault(_react);
-  _clsx = _interopRequireDefault(_clsx);
   function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
   function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-  function ListItem(_ref) {
+  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,
@@ -39,13 +40,15 @@
       key: option.value,
       ref: innerRef
     }, innerProps, {
-      className: (0, _clsx["default"])('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: (0, _utils.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["default"].createElement(_UserWithCompanyAvatar.UserWithCompanyAvatar, {
       size: "sm",
       avatarSrc: (_option$avatarSrc = option.avatarSrc) !== null && _option$avatarSrc !== void 0 ? _option$avatarSrc : '',
@@ -62,12 +65,12 @@
       size: "sm",
       variant: 'rounded'
     }), /*#__PURE__*/_react["default"].createElement("div", {
-      className: "cop-flex cop-flex-col cop-text-[10px]"
+      className: "cop-flex cop-min-w-0 cop-flex-col cop-text-[10px]"
     }, /*#__PURE__*/_react["default"].createElement(_Typography.Body, {
       className: "cop-m-0 cop-truncate",
       size: "sm"
     }, option.label), companyName && /*#__PURE__*/_react["default"].createElement("span", {
-      className: "cop-text-secondary"
+      className: "cop-truncate cop-text-secondary"
     }, companyName)));
   }
 });

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

@@ -39,8 +39,9 @@
       }
     };
     return /*#__PURE__*/_react["default"].createElement(_Chip.Chip, {
-      className: "!cop-rounded cop-border cop-border-solid cop-py-[5px]",
+      className: "!cop-rounded cop-border cop-border-solid cop-py-[5px] cop-max-w-[200px]",
       variant: "outlined",
+      truncate: true,
       onClose: handleRemove,
       prefixIcon: option.type === 'company' ? /*#__PURE__*/_react["default"].createElement(_Avatar.Avatar, {
         src: (_option$avatarSrc = option.avatarSrc) !== null && _option$avatarSrc !== void 0 ? _option$avatarSrc : '',

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

@@ -22,7 +22,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
   _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"];
+  var _excluded = ["autoFocus", "grouped", "name", "internalUsers", "clientUsers", "companies", "onChange", "onBlur", "placeholder", "styles", "ignoreCompanies", "ignoreFilterClientsByCompany", "limitSelectedOptions", "initialValue", "customLabels", "listHeading", "listClassName"];
   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; }
@@ -93,6 +93,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       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 = (0, _react.useMemo)(function () {
@@ -322,7 +323,8 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
         },
         Option: function Option(props) {
           return /*#__PURE__*/_react["default"].createElement(_ListItem.ListItem, _extends({}, props, {
-            data: getCompanyData(props.data)
+            data: getCompanyData(props.data),
+            listClassName: listClassName
           }));
         },
         DropdownIndicator: function DropdownIndicator() {
@@ -345,7 +347,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
           }));
         }
       };
-    }, [getCompanyData]);
+    }, [getCompanyData, listHeading, listClassName]);
     return /*#__PURE__*/_react["default"].createElement(_reactSelect["default"], _extends({
       autoFocus: autoFocus,
       isMulti: true,

package/dist/umd/types/components/Chip/Chip.d.ts

@@ -16,11 +16,12 @@ export interface ChipProps extends VariantProps<typeof chipStyles> {
     label: string;
     className?: string;
     prefixIcon?: IconType | Exclude<React.ReactNode, string>;
+    truncate?: boolean;
     onClick?: (event: React.KeyboardEvent | React.MouseEvent) => void;
     onClose?: (event: React.KeyboardEvent | React.MouseEvent | React.TouchEvent) => void;
     'aria-pressed'?: AriaAttributes['aria-pressed'];
 }
-export declare const Chip: ({ color, variant, label, size, className, prefixIcon, disabled, onClick, onClose, "aria-pressed": ariaPressed, }: ChipProps & {
+export declare const Chip: ({ color, variant, label, size, className, prefixIcon, truncate, disabled, onClick, onClose, "aria-pressed": ariaPressed, }: ChipProps & {
     color?: string;
 }) => React.JSX.Element;
 export {};

package/dist/umd/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/umd/types/components/UserCompanySelector/UserCompanySelector.stories.d.ts

@@ -12,6 +12,7 @@ export declare const WithSingleSelection: Story;
 export declare const WithPlaceholder: Story;
 export declare const WithAutoFocus: Story;
 export declare const WithLongOptionLabel: Story;
+export declare const WithLongCompanyName: Story;
 export declare const WithCustomLabels: Story;
 export declare const WithListHeading: Story;
 export declare const WithAvatarFallbackColor: Story;

package/dist/umd/types/components/UserCompanySelector/types.d.ts

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