@assembly-js/design-system 3.1.9 → 3.1.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (37) hide show
  1. package/dist/esm/common/utils.js +1 -24
  2. package/dist/esm/components/Chip/Chip.js +7 -9
  3. package/dist/esm/components/Icon.js +2 -10
  4. package/dist/esm/components/UserCompanySelector/ListItem.js +2 -2
  5. package/dist/esm/components/UserCompanySelector/SelectedValueChip.js +2 -1
  6. package/dist/esm/components/__tests__/Icon.test.js +82 -0
  7. package/dist/esm/components/iconType.js +21 -0
  8. package/dist/esm/types/components/Avatar/Avatar.d.ts +2 -2
  9. package/dist/esm/types/components/Chip/Chip.d.ts +2 -1
  10. package/dist/esm/types/components/Icon.d.ts +2 -3
  11. package/dist/esm/types/components/UserCompanySelector/UserCompanySelector.stories.d.ts +1 -0
  12. package/dist/esm/types/components/__tests__/Icon.test.d.ts +1 -0
  13. package/dist/esm/types/components/iconType.d.ts +5 -0
  14. package/dist/esm/types/tsconfig.tsbuildinfo +1 -1
  15. package/dist/styles/main.css +1 -1
  16. package/dist/types/components/Avatar/Avatar.d.ts +2 -2
  17. package/dist/types/components/Chip/Chip.d.ts +2 -1
  18. package/dist/types/components/Icon.d.ts +2 -3
  19. package/dist/types/components/UserCompanySelector/UserCompanySelector.stories.d.ts +1 -0
  20. package/dist/types/components/__tests__/Icon.test.d.ts +1 -0
  21. package/dist/types/components/iconType.d.ts +5 -0
  22. package/dist/types/tsconfig.tsbuildinfo +1 -1
  23. package/dist/umd/common/utils.js +1 -24
  24. package/dist/umd/components/Chip/Chip.js +10 -13
  25. package/dist/umd/components/Icon.js +11 -15
  26. package/dist/umd/components/UserCompanySelector/ListItem.js +2 -2
  27. package/dist/umd/components/UserCompanySelector/SelectedValueChip.js +2 -1
  28. package/dist/umd/components/__tests__/Icon.test.js +98 -0
  29. package/dist/umd/components/iconType.js +43 -0
  30. package/dist/umd/types/components/Avatar/Avatar.d.ts +2 -2
  31. package/dist/umd/types/components/Chip/Chip.d.ts +2 -1
  32. package/dist/umd/types/components/Icon.d.ts +2 -3
  33. package/dist/umd/types/components/UserCompanySelector/UserCompanySelector.stories.d.ts +1 -0
  34. package/dist/umd/types/components/__tests__/Icon.test.d.ts +1 -0
  35. package/dist/umd/types/components/iconType.d.ts +5 -0
  36. package/dist/umd/types/tsconfig.tsbuildinfo +1 -1
  37. package/package.json +2 -2
@@ -1,31 +1,8 @@
1
1
  // This file is generated by a script. Do not edit this file directly.
2
- 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); }
3
- 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; }
4
- 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; }
5
- 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; }
6
- function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
7
- 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); }
8
2
  import { clsx } from 'clsx';
9
3
  import { extendTailwindMerge } from 'tailwind-merge';
10
- var COP_PREFIX = 'cop-';
11
- function stripCopPrefix(_ref) {
12
- var className = _ref.className,
13
- parseClassName = _ref.parseClassName;
14
- var parsed = parseClassName(className);
15
- if (parsed.baseClassName.startsWith(COP_PREFIX)) {
16
- return _objectSpread(_objectSpread({}, parsed), {}, {
17
- baseClassName: parsed.baseClassName.slice(COP_PREFIX.length)
18
- });
19
- }
20
- return parsed;
21
- }
22
-
23
- // `prefix: 'cop-'` was replaced with a custom parser because the built-in
24
- // prefix option failed to merge mixed prefixed/non-prefixed classes correctly.
25
- // `experimentalParseClassName` is experimental — revisit this if upgrading
26
- // tailwind-merge to a new major version.
27
4
  var twMerge = extendTailwindMerge({
28
- experimentalParseClassName: stripCopPrefix
5
+ prefix: 'cop-'
29
6
  });
30
7
  export function cn() {
31
8
  for (var _len = arguments.length, inputs = new Array(_len), _key = 0; _key < _len; _key++) {
@@ -9,14 +9,8 @@ import { cva } from 'cva';
9
9
  import React from 'react';
10
10
  import { Body } from "../Typography";
11
11
  import { cn } from "../../common/utils";
12
- import { Icon } from "../Icon";
13
- import * as icons from "../../icons";
12
+ import { Icon, isValidIconType } from "../Icon";
14
13
  import { ChipColorDisplay } from "./ChipColorDisplay";
15
-
16
- // Type guard function to validate IconType
17
- var isIconType = function isIconType(icon) {
18
- return typeof icon === 'string' && Object.keys(icons).includes(icon);
19
- };
20
14
  var chipStyles = cva({
21
15
  base: 'cop-inline-flex cop-items-center cop-justify-center cop-gap-1.5 cop-rounded-[4px] cop-border cop-border-solid cop-box-border',
22
16
  variants: {
@@ -75,7 +69,7 @@ var RenderIcon = function RenderIcon(_ref) {
75
69
  if (!icon) {
76
70
  return null;
77
71
  }
78
- if (typeof icon === 'string' && isIconType(icon)) {
72
+ if (isValidIconType(icon)) {
79
73
  return /*#__PURE__*/React.createElement(Icon, {
80
74
  icon: icon,
81
75
  className: className
@@ -92,6 +86,8 @@ export var Chip = function Chip(_ref2) {
92
86
  size = _ref2$size === void 0 ? 'sm' : _ref2$size,
93
87
  className = _ref2.className,
94
88
  prefixIcon = _ref2.prefixIcon,
89
+ _ref2$truncate = _ref2.truncate,
90
+ truncate = _ref2$truncate === void 0 ? false : _ref2$truncate,
95
91
  disabled = _ref2.disabled,
96
92
  onClick = _ref2.onClick,
97
93
  onClose = _ref2.onClose,
@@ -128,7 +124,9 @@ export var Chip = function Chip(_ref2) {
128
124
  })
129
125
  }), /*#__PURE__*/React.createElement(Body, {
130
126
  size: size !== 'sm' ? 'base' : 'sm',
131
- className: "cop-m-0"
127
+ className: cn('cop-m-0', {
128
+ 'cop-truncate': truncate
129
+ })
132
130
  }, label), Boolean(onClose) ?
133
131
  /*#__PURE__*/
134
132
  // We intentionally attach both onClick and onTouch event
@@ -5,17 +5,9 @@ function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i
5
5
  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; }
6
6
  import React from "react";
7
7
  import * as icons from "../icons";
8
- import { icons as faIcons } from "./IconPicker/icons.generated";
9
8
  import { iconToFaMap } from "../constants/iconToFaMap";
10
- var faIconMap;
11
- function getFAIconMap() {
12
- if (!faIconMap) {
13
- faIconMap = new Map(faIcons.map(function (i) {
14
- return [i.name, i];
15
- }));
16
- }
17
- return faIconMap;
18
- }
9
+ import { getFAIconMap } from "./iconType";
10
+ export { isValidIconType } from "./iconType";
19
11
 
20
12
  /**
21
13
  * Icon component that renders either a Font Awesome icon or a Design System icon.
@@ -46,11 +46,11 @@ export function ListItem(_ref) {
46
46
  size: "sm",
47
47
  variant: 'rounded'
48
48
  }), /*#__PURE__*/React.createElement("div", {
49
- className: "cop-flex cop-flex-col cop-text-[10px]"
49
+ className: "cop-flex cop-min-w-0 cop-flex-col cop-text-[10px]"
50
50
  }, /*#__PURE__*/React.createElement(Body, {
51
51
  className: "cop-m-0 cop-truncate",
52
52
  size: "sm"
53
53
  }, option.label), companyName && /*#__PURE__*/React.createElement("span", {
54
- className: "cop-text-secondary"
54
+ className: "cop-truncate cop-text-secondary"
55
55
  }, companyName)));
56
56
  }
@@ -23,8 +23,9 @@ export function SelectedValueChip(props) {
23
23
  }
24
24
  };
25
25
  return /*#__PURE__*/React.createElement(Chip, {
26
- className: "!cop-rounded cop-border cop-border-solid cop-py-[5px]",
26
+ className: "!cop-rounded cop-border cop-border-solid cop-py-[5px] cop-max-w-[200px]",
27
27
  variant: "outlined",
28
+ truncate: true,
28
29
  onClose: handleRemove,
29
30
  prefixIcon: option.type === 'company' ? /*#__PURE__*/React.createElement(Avatar, {
30
31
  src: (_option$avatarSrc = option.avatarSrc) !== null && _option$avatarSrc !== void 0 ? _option$avatarSrc : '',
@@ -0,0 +1,82 @@
1
+ // This file is generated by a script. Do not edit this file directly.
2
+ var loadIconTypeModule = function loadIconTypeModule() {
3
+ var module;
4
+ jest.isolateModules(function () {
5
+ jest.doMock("../../icons", function () {
6
+ return {
7
+ Close: function Close() {
8
+ return null;
9
+ },
10
+ Search: function Search() {
11
+ return null;
12
+ }
13
+ };
14
+ });
15
+ jest.doMock("../IconPicker/icons.generated", function () {
16
+ return {
17
+ icons: [{
18
+ name: 'address-book',
19
+ viewBox: '0 0 1 1',
20
+ path: 'M0 0'
21
+ }]
22
+ };
23
+ });
24
+ module = require("../iconType");
25
+ });
26
+ if (!module) {
27
+ throw new Error('Failed to load iconType module for tests');
28
+ }
29
+ return module;
30
+ };
31
+ describe('isValidIconType', function () {
32
+ it('returns true for a design-system icon name', function () {
33
+ var _loadIconTypeModule = loadIconTypeModule(),
34
+ isValidIconType = _loadIconTypeModule.isValidIconType;
35
+ expect(isValidIconType('Close')).toBe(true);
36
+ });
37
+ it('returns true for a font-awesome icon name', function () {
38
+ var _loadIconTypeModule2 = loadIconTypeModule(),
39
+ isValidIconType = _loadIconTypeModule2.isValidIconType;
40
+ expect(isValidIconType('address-book')).toBe(true);
41
+ });
42
+ it('returns false for unknown icon strings', function () {
43
+ var _loadIconTypeModule3 = loadIconTypeModule(),
44
+ isValidIconType = _loadIconTypeModule3.isValidIconType;
45
+ expect(isValidIconType('definitely-not-a-valid-icon')).toBe(false);
46
+ });
47
+ it('returns false for inherited prototype property names', function () {
48
+ var _loadIconTypeModule4 = loadIconTypeModule(),
49
+ isValidIconType = _loadIconTypeModule4.isValidIconType;
50
+ expect(isValidIconType('constructor')).toBe(false);
51
+ });
52
+ it('returns false for non-string values', function () {
53
+ var _loadIconTypeModule5 = loadIconTypeModule(),
54
+ isValidIconType = _loadIconTypeModule5.isValidIconType;
55
+ expect(isValidIconType(undefined)).toBe(false);
56
+ expect(isValidIconType(null)).toBe(false);
57
+ expect(isValidIconType(42)).toBe(false);
58
+ expect(isValidIconType({
59
+ icon: 'Close'
60
+ })).toBe(false);
61
+ });
62
+ it('builds FA icon maps from the provided source', function () {
63
+ var _loadIconTypeModule6 = loadIconTypeModule(),
64
+ getFAIconMap = _loadIconTypeModule6.getFAIconMap;
65
+ var initialSource = [{
66
+ name: 'first',
67
+ viewBox: '0 0 1 1',
68
+ path: 'M0 0'
69
+ }];
70
+ var newSource = [{
71
+ name: 'second',
72
+ viewBox: '0 0 1 1',
73
+ path: 'M0 0'
74
+ }];
75
+ var firstMap = getFAIconMap(initialSource);
76
+ expect(firstMap.has('first')).toBe(true);
77
+ expect(firstMap.has('second')).toBe(false);
78
+ var secondMap = getFAIconMap(newSource);
79
+ expect(secondMap.has('first')).toBe(false);
80
+ expect(secondMap.has('second')).toBe(true);
81
+ });
82
+ });
@@ -0,0 +1,21 @@
1
+ // This file is generated by a script. Do not edit this file directly.
2
+ import * as icons from "../icons";
3
+ import { icons as faIcons } from "./IconPicker/icons.generated";
4
+ var defaultFAIconMap = new Map(faIcons.map(function (icon) {
5
+ return [icon.name, icon];
6
+ }));
7
+ export var getFAIconMap = function getFAIconMap() {
8
+ var source = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : faIcons;
9
+ if (source === faIcons) {
10
+ return defaultFAIconMap;
11
+ }
12
+ return new Map(source.map(function (icon) {
13
+ return [icon.name, icon];
14
+ }));
15
+ };
16
+ export var isValidIconType = function isValidIconType(arg) {
17
+ if (typeof arg !== 'string') {
18
+ return false;
19
+ }
20
+ return Object.prototype.hasOwnProperty.call(icons, arg) || getFAIconMap().has(arg);
21
+ };
@@ -20,8 +20,8 @@ declare const Avatar: React.ForwardRefExoticComponent<({
20
20
  content?: string | undefined;
21
21
  translate?: "yes" | "no" | undefined;
22
22
  prefix?: string | undefined;
23
- className?: string | undefined;
24
23
  children?: React.ReactNode;
24
+ className?: string | undefined;
25
25
  slot?: string | undefined;
26
26
  style?: React.CSSProperties | undefined;
27
27
  title?: string | undefined;
@@ -299,8 +299,8 @@ declare const Avatar: React.ForwardRefExoticComponent<({
299
299
  content?: string | undefined;
300
300
  translate?: "yes" | "no" | undefined;
301
301
  prefix?: string | undefined;
302
- className?: string | undefined;
303
302
  children?: React.ReactNode;
303
+ className?: string | undefined;
304
304
  slot?: string | undefined;
305
305
  style?: React.CSSProperties | undefined;
306
306
  title?: string | undefined;
@@ -16,11 +16,12 @@ export interface ChipProps extends VariantProps<typeof chipStyles> {
16
16
  label: string;
17
17
  className?: string;
18
18
  prefixIcon?: IconType | Exclude<React.ReactNode, string>;
19
+ truncate?: boolean;
19
20
  onClick?: (event: React.KeyboardEvent | React.MouseEvent) => void;
20
21
  onClose?: (event: React.KeyboardEvent | React.MouseEvent | React.TouchEvent) => void;
21
22
  'aria-pressed'?: AriaAttributes['aria-pressed'];
22
23
  }
23
- export declare const Chip: ({ color, variant, label, size, className, prefixIcon, disabled, onClick, onClose, "aria-pressed": ariaPressed, }: ChipProps & {
24
+ export declare const Chip: ({ color, variant, label, size, className, prefixIcon, truncate, disabled, onClick, onClose, "aria-pressed": ariaPressed, }: ChipProps & {
24
25
  color?: string;
25
26
  }) => React.JSX.Element;
26
27
  export {};
@@ -1,7 +1,6 @@
1
1
  import type { SVGProps } from 'react';
2
- import * as icons from '../icons';
3
- import { type FAIconName } from './IconPicker/icons.generated';
4
- export type IconType = keyof typeof icons | FAIconName;
2
+ import type { IconType } from './iconType';
3
+ export { type IconType, isValidIconType } from './iconType';
5
4
  /**
6
5
  * Icon component that renders either a Font Awesome icon or a Design System icon.
7
6
  * it checks if the icon name is in the Font Awesome icon set and renders the corresponding icon.
@@ -12,6 +12,7 @@ export declare const WithSingleSelection: Story;
12
12
  export declare const WithPlaceholder: Story;
13
13
  export declare const WithAutoFocus: Story;
14
14
  export declare const WithLongOptionLabel: Story;
15
+ export declare const WithLongCompanyName: Story;
15
16
  export declare const WithCustomLabels: Story;
16
17
  export declare const WithListHeading: Story;
17
18
  export declare const WithAvatarFallbackColor: Story;
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,5 @@
1
+ import * as icons from '../icons';
2
+ import { type FAIcon, type FAIconName } from './IconPicker/icons.generated';
3
+ export type IconType = keyof typeof icons | FAIconName;
4
+ export declare const getFAIconMap: (source?: ReadonlyArray<FAIcon>) => Map<string, FAIcon>;
5
+ export declare const isValidIconType: (arg: unknown) => arg is IconType;