@assembly-js/design-system 3.1.8 → 3.1.10

package/dist/esm/components/Checkbox/Checkbox.js

@@ -20,7 +20,7 @@ export var CheckboxSize = /*#__PURE__*/function (CheckboxSize) {
   return CheckboxSize;
 }({});
 var checkboxContainerStyles = cva({
-  base: 'cop-box-border cop-flex cop-cursor-pointer cop-rounded-[3px] cop-border cop-border-solid cop-p-0 cop-outline-none  peer-focus-visible:cop-outline-2 peer-focus-visible:cop-outline-[#0071E3] flex cop-justify-center cop-items-center',
+  base: 'cop-box-border cop-flex cop-cursor-pointer cop-rounded-[3px] cop-border cop-border-solid cop-p-0 cop-outline-none peer-focus-visible:cop-outline-2 peer-focus-visible:cop-outline-[#0071E3] cop-justify-center cop-items-center',
   variants: {
     size: _defineProperty(_defineProperty({}, CheckboxSize.DEFAULT, 'cop-h-4 cop-w-4'), CheckboxSize.LARGE, 'cop-h-[18px] cop-w-[18px]'),
     checked: {

package/dist/esm/components/Chip/Chip.js

@@ -9,14 +9,8 @@ import { cva } from 'cva';
 import React from 'react';
 import { Body } from "../Typography";
 import { cn } from "../../common/utils";
-import { Icon } from "../Icon";
-import * as icons from "../../icons";
+import { Icon, isValidIconType } from "../Icon";
 import { ChipColorDisplay } from "./ChipColorDisplay";
-
-// Type guard function to validate IconType
-var isIconType = function isIconType(icon) {
-  return typeof icon === 'string' && Object.keys(icons).includes(icon);
-};
 var chipStyles = cva({
   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',
   variants: {
@@ -75,7 +69,7 @@ var RenderIcon = function RenderIcon(_ref) {
   if (!icon) {
     return null;
   }
-  if (typeof icon === 'string' && isIconType(icon)) {
+  if (isValidIconType(icon)) {
     return /*#__PURE__*/React.createElement(Icon, {
       icon: icon,
       className: className

package/dist/esm/components/Icon.js

@@ -5,17 +5,9 @@ function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, 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; }
 import React from "react";
 import * as icons from "../icons";
-import { icons as faIcons } from "./IconPicker/icons.generated";
 import { iconToFaMap } from "../constants/iconToFaMap";
-var faIconMap;
-function getFAIconMap() {
-  if (!faIconMap) {
-    faIconMap = new Map(faIcons.map(function (i) {
-      return [i.name, i];
-    }));
-  }
-  return faIconMap;
-}
+import { getFAIconMap } from "./iconType";
+export { isValidIconType } from "./iconType";
 
 /**
  * Icon component that renders either a Font Awesome icon or a Design System icon.

package/dist/esm/components/IconPicker/IconPicker.js

@@ -24,7 +24,8 @@ var IconPicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     placeholder = _ref$placeholder === void 0 ? 'Select an icon' : _ref$placeholder,
     className = _ref.className,
     _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled;
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    inlineAction = _ref.inlineAction;
   var isControlled = value !== undefined;
   var _React$useState = React.useState(defaultValue),
     _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -175,12 +176,15 @@ var IconPicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       return document.removeEventListener('keydown', handleKeyDown);
     };
   }, [open]);
+  var closeAndReset = React.useCallback(function () {
+    setOpen(false);
+    setSearch('');
+  }, []);
   var handleSelect = React.useCallback(function (icon) {
     if (!isControlled) setInternalValue(icon.name);
     onChange === null || onChange === void 0 || onChange(icon.name);
-    setOpen(false);
-    setSearch('');
-  }, [isControlled, onChange]);
+    closeAndReset();
+  }, [isControlled, onChange, closeAndReset]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     ref: triggerRef,
     className: "cop-inline-flex"
@@ -217,8 +221,9 @@ var IconPicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     },
     className: "cop-fixed cop-z-1500 cop-w-[330px] cop-overflow-clip cop-rounded cop-border cop-border-solid cop-border-[#eff1f4] cop-bg-white cop-shadow-[0px_6px_20px_0px_rgba(0,0,0,0.07)]"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "cop-px-3 cop-pt-3"
+    className: "cop-flex cop-items-center cop-gap-2 cop-px-3 cop-pt-3"
   }, /*#__PURE__*/React.createElement(Input, {
+    containerClassName: "cop-flex-1 cop-min-w-0",
     ref: searchInputRef,
     placeholder: "Search icons",
     value: search,
@@ -236,8 +241,8 @@ var IconPicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         (_gridRef$current2 = gridRef.current) === null || _gridRef$current2 === void 0 || _gridRef$current2.focusFirst();
       }
     },
-    className: "focus-visible:cop-border-[#1a1a1a] focus-visible:cop-ring-0 focus-visible:cop-ring-offset-0"
-  })), /*#__PURE__*/React.createElement("div", {
+    className: "cop-h-8 !cop-border-input-gray focus-visible:!cop-border-[#1a1a1a] focus-visible:cop-ring-0 focus-visible:cop-ring-offset-0"
+  }), inlineAction === null || inlineAction === void 0 ? void 0 : inlineAction(closeAndReset)), /*#__PURE__*/React.createElement("div", {
     className: "cop-py-3 cop-pl-3 cop-pr-0"
   }, /*#__PURE__*/React.createElement(IconGrid, {
     ref: gridRef,

package/dist/esm/components/IconPicker/index.js

@@ -1,3 +1,4 @@
 // This file is generated by a script. Do not edit this file directly.
 import React from "react";
 export { IconPicker } from "./IconPicker";
+export { pickerIcons } from "./pickerIcons";

package/dist/esm/components/TextLink/TextLink.js

@@ -6,7 +6,7 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 import React from 'react';
 import { cva } from 'cva';
 var textLinkClasses = cva({
-  base: 'cop-flex cop-items-center cop-gap-1.5 outline-none cop-outline-solid cop-outline-link cop-outline-offset-[3px] cop-w-fit cop-underline-offset-[3px] cursor-pointer',
+  base: 'cop-flex cop-items-center cop-gap-1.5 cop-outline-none cop-outline-solid cop-outline-link cop-outline-offset-[3px] cop-w-fit cop-underline-offset-[3px] cop-cursor-pointer',
   variants: {
     variant: {
       "default": 'cop-text-link cop-no-underline hover:cop-text-link-hover active:cop-text-link-active',

package/dist/esm/components/Typography/Base.js

@@ -46,7 +46,7 @@ var WEIGHT_CLASSNAMES = {
   bold: 'cop-font-bold',
   semibold: 'cop-font-semibold',
   medium: 'cop-font-medium',
-  regular: 'cop-font-regular',
+  regular: '',
   light: 'cop-font-light'
 };
 export var Base = function Base(_ref) {

package/dist/esm/components/__tests__/Icon.test.js

@@ -0,0 +1,82 @@
+// This file is generated by a script. Do not edit this file directly.
+var loadIconTypeModule = function loadIconTypeModule() {
+  var module;
+  jest.isolateModules(function () {
+    jest.doMock("../../icons", function () {
+      return {
+        Close: function Close() {
+          return null;
+        },
+        Search: function Search() {
+          return null;
+        }
+      };
+    });
+    jest.doMock("../IconPicker/icons.generated", function () {
+      return {
+        icons: [{
+          name: 'address-book',
+          viewBox: '0 0 1 1',
+          path: 'M0 0'
+        }]
+      };
+    });
+    module = require("../iconType");
+  });
+  if (!module) {
+    throw new Error('Failed to load iconType module for tests');
+  }
+  return module;
+};
+describe('isValidIconType', function () {
+  it('returns true for a design-system icon name', function () {
+    var _loadIconTypeModule = loadIconTypeModule(),
+      isValidIconType = _loadIconTypeModule.isValidIconType;
+    expect(isValidIconType('Close')).toBe(true);
+  });
+  it('returns true for a font-awesome icon name', function () {
+    var _loadIconTypeModule2 = loadIconTypeModule(),
+      isValidIconType = _loadIconTypeModule2.isValidIconType;
+    expect(isValidIconType('address-book')).toBe(true);
+  });
+  it('returns false for unknown icon strings', function () {
+    var _loadIconTypeModule3 = loadIconTypeModule(),
+      isValidIconType = _loadIconTypeModule3.isValidIconType;
+    expect(isValidIconType('definitely-not-a-valid-icon')).toBe(false);
+  });
+  it('returns false for inherited prototype property names', function () {
+    var _loadIconTypeModule4 = loadIconTypeModule(),
+      isValidIconType = _loadIconTypeModule4.isValidIconType;
+    expect(isValidIconType('constructor')).toBe(false);
+  });
+  it('returns false for non-string values', function () {
+    var _loadIconTypeModule5 = loadIconTypeModule(),
+      isValidIconType = _loadIconTypeModule5.isValidIconType;
+    expect(isValidIconType(undefined)).toBe(false);
+    expect(isValidIconType(null)).toBe(false);
+    expect(isValidIconType(42)).toBe(false);
+    expect(isValidIconType({
+      icon: 'Close'
+    })).toBe(false);
+  });
+  it('builds FA icon maps from the provided source', function () {
+    var _loadIconTypeModule6 = loadIconTypeModule(),
+      getFAIconMap = _loadIconTypeModule6.getFAIconMap;
+    var initialSource = [{
+      name: 'first',
+      viewBox: '0 0 1 1',
+      path: 'M0 0'
+    }];
+    var newSource = [{
+      name: 'second',
+      viewBox: '0 0 1 1',
+      path: 'M0 0'
+    }];
+    var firstMap = getFAIconMap(initialSource);
+    expect(firstMap.has('first')).toBe(true);
+    expect(firstMap.has('second')).toBe(false);
+    var secondMap = getFAIconMap(newSource);
+    expect(secondMap.has('first')).toBe(false);
+    expect(secondMap.has('second')).toBe(true);
+  });
+});

package/dist/esm/components/iconType.js

@@ -0,0 +1,21 @@
+// This file is generated by a script. Do not edit this file directly.
+import * as icons from "../icons";
+import { icons as faIcons } from "./IconPicker/icons.generated";
+var defaultFAIconMap = new Map(faIcons.map(function (icon) {
+  return [icon.name, icon];
+}));
+export var getFAIconMap = function getFAIconMap() {
+  var source = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : faIcons;
+  if (source === faIcons) {
+    return defaultFAIconMap;
+  }
+  return new Map(source.map(function (icon) {
+    return [icon.name, icon];
+  }));
+};
+export var isValidIconType = function isValidIconType(arg) {
+  if (typeof arg !== 'string') {
+    return false;
+  }
+  return Object.prototype.hasOwnProperty.call(icons, arg) || getFAIconMap().has(arg);
+};

package/dist/esm/types/components/Icon.d.ts

@@ -1,7 +1,6 @@
 import type { SVGProps } from 'react';
-import * as icons from '../icons';
-import { type FAIconName } from './IconPicker/icons.generated';
-export type IconType = keyof typeof icons | FAIconName;
+import type { IconType } from './iconType';
+export { type IconType, isValidIconType } from './iconType';
 /**
  * Icon component that renders either a Font Awesome icon or a Design System icon.
  * it checks if the icon name is in the Font Awesome icon set and renders the corresponding icon.

package/dist/esm/types/components/IconPicker/IconPicker.d.ts

@@ -10,6 +10,9 @@ export interface IconPickerProps {
     placeholder?: string;
     className?: string;
     disabled?: boolean;
+    /** Optional render prop for an inline action next to the search input.
+     *  Receives a `closePopover` callback to dismiss the picker. */
+    inlineAction?: (closePopover: () => void) => React.ReactNode;
 }
 declare const IconPicker: React.ForwardRefExoticComponent<IconPickerProps & React.RefAttributes<HTMLDivElement>>;
 export { IconPicker };

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

@@ -6,3 +6,4 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
 export declare const WithValue: Story;
+export declare const WithInlineAction: Story;

package/dist/esm/types/components/IconPicker/index.d.ts

@@ -1,3 +1,5 @@
 export { IconPicker } from './IconPicker';
 export type { IconPickerProps } from './IconPicker';
 export type { FAIcon } from './icons.generated';
+export { pickerIcons } from './pickerIcons';
+export type { PickerIcon } from './pickerIcons';

package/dist/esm/types/components/__tests__/Icon.test.d.ts

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

package/dist/esm/types/components/iconType.d.ts

@@ -0,0 +1,5 @@
+import * as icons from '../icons';
+import { type FAIcon, type FAIconName } from './IconPicker/icons.generated';
+export type IconType = keyof typeof icons | FAIconName;
+export declare const getFAIconMap: (source?: ReadonlyArray<FAIcon>) => Map<string, FAIcon>;
+export declare const isValidIconType: (arg: unknown) => arg is IconType;