@assembly-js/design-system 3.1.1 → 3.1.3

package/dist/umd/components/Icon.js

@@ -2,17 +2,17 @@
 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 (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "react", "../icons"], factory);
+    define(["exports", "react", "../icons", "./IconPicker/icons.generated", "../icons/iconToFaMap"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("react"), require("../icons"));
+    factory(exports, require("react"), require("../icons"), require("./IconPicker/icons.generated"), require("../icons/iconToFaMap"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global.react, global.icons);
+    factory(mod.exports, global.react, global.icons, global.icons, global.iconToFaMap);
     global.Icon = mod.exports;
   }
-})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _react, icons) {
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _react, icons, _icons2, _iconToFaMap) {
   "use strict";
 
   Object.defineProperty(_exports, "__esModule", {
@@ -25,11 +25,47 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
   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; }
   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 _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return 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; }
+  var faIconMap;
+  function getFAIconMap() {
+    if (!faIconMap) {
+      faIconMap = new Map(_icons2.icons.map(function (i) {
+        return [i.name, i];
+      }));
+    }
+    return faIconMap;
+  }
+
+  /**
+   * 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.
+   * if not, it falls back to the Design System icon set and renders the corresponding icon.
+   * @param icon - The name of the icon to render.
+   * @param props - The props to pass to the icon component.
+   * @returns The icon component.
+   */
   var Icon = _exports.Icon = function Icon(_ref) {
     var icon = _ref.icon,
       props = _objectWithoutProperties(_ref, _excluded);
+    var mappedFaIcon = _iconToFaMap.iconToFaMap[icon];
+
+    // if the icon name has a mapped fa icon, render the mapped fa icon, otherwise render the fa icon
+    var faIcon = mappedFaIcon ? getFAIconMap().get(mappedFaIcon) : getFAIconMap().get(icon);
+    if (faIcon) {
+      return /*#__PURE__*/_react["default"].createElement("svg", _extends({
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: faIcon.viewBox,
+        fill: "currentColor",
+        overflow: "visible",
+        "aria-hidden": "true"
+      }, props), /*#__PURE__*/_react["default"].createElement("path", {
+        d: faIcon.path
+      }));
+    }
+
+    // Fall back to DS icon
     var IconComponent = icons[icon];
     if (!IconComponent) return null;
     return /*#__PURE__*/_react["default"].createElement(IconComponent, props);

package/dist/umd/components/IconPicker/IconGrid.js

@@ -0,0 +1,222 @@
+// 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 (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "react", "../../common/utils", "../Button/Base"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("react"), require("../../common/utils"), require("../Button/Base"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.react, global.utils, global.Base);
+    global.IconGrid = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _react, _utils, _Base) {
+  "use strict";
+
+  Object.defineProperty(_exports, "__esModule", {
+    value: true
+  });
+  _exports.IconGrid = void 0;
+  _react = _interopRequireWildcard(_react);
+  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; }
+  function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+  function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+  function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+  function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+  function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+  function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+  function renderIcon(icon) {
+    if (icon.source === 'ds') {
+      return /*#__PURE__*/_react["default"].createElement(icon.Component, {
+        className: "cop-h-[19px] cop-w-[19px]",
+        "aria-hidden": "true"
+      });
+    }
+    return /*#__PURE__*/_react["default"].createElement("svg", {
+      viewBox: icon.viewBox,
+      fill: "currentColor",
+      className: "cop-h-[19px] cop-w-[19px]",
+      overflow: "visible",
+      "aria-hidden": "true"
+    }, /*#__PURE__*/_react["default"].createElement("path", {
+      d: icon.path
+    }));
+  }
+  var COLUMNS = 8;
+  var IconGrid = _exports.IconGrid = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+    var icons = _ref.icons,
+      onSelect = _ref.onSelect,
+      selectedIcon = _ref.selectedIcon,
+      onEscapeFromGrid = _ref.onEscapeFromGrid;
+    var _useState = (0, _react.useState)(-1),
+      _useState2 = _slicedToArray(_useState, 2),
+      focusedIndex = _useState2[0],
+      setFocusedIndex = _useState2[1];
+    var itemRefs = (0, _react.useRef)([]);
+    var hasScrolledToSelected = (0, _react.useRef)(false);
+
+    // Expose focusFirst so the parent can transfer focus into the grid
+    (0, _react.useImperativeHandle)(ref, function () {
+      return {
+        focusFirst: function focusFirst() {
+          var selectedIdx = icons.findIndex(function (icon) {
+            return icon.name === selectedIcon;
+          });
+          setFocusedIndex(selectedIdx >= 0 ? selectedIdx : 0);
+        },
+        resetFocus: function resetFocus() {
+          setFocusedIndex(-1);
+        }
+      };
+    });
+
+    // Reset focused index and trim stale refs when the icon list changes
+    (0, _react.useEffect)(function () {
+      setFocusedIndex(-1);
+      itemRefs.current.length = icons.length;
+    }, [icons]);
+
+    // Focus the item at focusedIndex when it changes
+    (0, _react.useEffect)(function () {
+      if (focusedIndex >= 0 && focusedIndex < icons.length) {
+        var el = itemRefs.current[focusedIndex];
+        var btn = el === null || el === void 0 ? void 0 : el.querySelector('button');
+        btn === null || btn === void 0 || btn.focus();
+        el === null || el === void 0 || el.scrollIntoView({
+          block: 'nearest'
+        });
+      }
+    }, [focusedIndex, icons.length]);
+    var handleKeyDown = (0, _react.useCallback)(function (e) {
+      var len = icons.length;
+      if (len === 0) return;
+      var nextIndex = focusedIndex;
+      var col = focusedIndex % COLUMNS;
+      switch (e.key) {
+        case 'ArrowRight':
+          // Stop at end of row
+          if (col < COLUMNS - 1 && focusedIndex + 1 < len) {
+            nextIndex = focusedIndex + 1;
+          }
+          break;
+        case 'ArrowLeft':
+          // Stop at start of row
+          if (col > 0) {
+            nextIndex = focusedIndex - 1;
+          }
+          break;
+        case 'ArrowDown':
+          nextIndex = focusedIndex + COLUMNS;
+          break;
+        case 'ArrowUp':
+          // If in the top row, escape back to search
+          if (focusedIndex < COLUMNS) {
+            onEscapeFromGrid === null || onEscapeFromGrid === void 0 || onEscapeFromGrid();
+            setFocusedIndex(-1);
+            e.preventDefault();
+            return;
+          }
+          nextIndex = focusedIndex - COLUMNS;
+          break;
+        case 'Home':
+          nextIndex = 0;
+          break;
+        case 'End':
+          nextIndex = len - 1;
+          break;
+        case 'Enter':
+          {
+            var icon = icons[focusedIndex];
+            if (focusedIndex >= 0 && icon) {
+              onSelect(icon);
+            }
+            e.preventDefault();
+            return;
+          }
+        default:
+          return;
+      }
+      e.preventDefault();
+      // Clamp within bounds
+      nextIndex = Math.max(0, Math.min(nextIndex, len - 1));
+      setFocusedIndex(nextIndex);
+    }, [focusedIndex, icons, onSelect, onEscapeFromGrid]);
+
+    // Find the boundary between DS and FA icons (for the divider)
+    var dividerIndex = (0, _react.useMemo)(function () {
+      var firstFaIdx = icons.findIndex(function (icon) {
+        return icon.source === 'fa';
+      });
+      // Show divider only when both DS and FA icons are present
+      if (firstFaIdx > 0 && icons.some(function (icon) {
+        return icon.source === 'ds';
+      })) {
+        return firstFaIdx;
+      }
+      return -1;
+    }, [icons]);
+
+    // Row index where the divider appears (between DS and FA sections)
+    var dividerRowIndex = dividerIndex > 0 ? Math.ceil(dividerIndex / COLUMNS) : -1;
+
+    // Chunk icons into rows for proper ARIA grid hierarchy
+    var rows = (0, _react.useMemo)(function () {
+      var result = [];
+      for (var i = 0; i < icons.length; i += COLUMNS) {
+        result.push(icons.slice(i, i + COLUMNS));
+      }
+      return result;
+    }, [icons]);
+    if (icons.length === 0) {
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: "cop-flex cop-h-[262px] cop-items-center cop-justify-center"
+      }, /*#__PURE__*/_react["default"].createElement("p", {
+        className: "cop-text-sm cop-text-[#6b6f76]"
+      }, "No icons found"));
+    }
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      role: "grid",
+      "aria-label": "Icon grid",
+      onKeyDown: handleKeyDown,
+      className: "cop--m-[3px] cop-grid cop-h-[262px] cop-content-start cop-overflow-y-auto cop-p-[3px] [scrollbar-color:rgba(0,0,0,0.2)_transparent] [scrollbar-width:thin]"
+    }, rows.map(function (row, rowIndex) {
+      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
+        key: rowIndex
+      }, rowIndex === dividerRowIndex && /*#__PURE__*/_react["default"].createElement("div", {
+        role: "separator",
+        className: "cop-my-2 cop-h-px cop-bg-[#eff1f4]"
+      }), /*#__PURE__*/_react["default"].createElement("div", {
+        role: "row",
+        className: "cop-grid cop-grid-cols-[repeat(8,1fr)] cop-gap-x-[6px] cop-gap-y-[8px]"
+      }, row.map(function (icon, colIndex) {
+        var flatIndex = rowIndex * COLUMNS + colIndex;
+        var isSelected = selectedIcon === icon.name;
+        return /*#__PURE__*/_react["default"].createElement("div", {
+          key: icon.name,
+          role: "gridcell",
+          ref: function ref(el) {
+            itemRefs.current[flatIndex] = el;
+            if (isSelected && el && !hasScrolledToSelected.current) {
+              hasScrolledToSelected.current = true;
+              el.scrollIntoView({
+                block: 'nearest'
+              });
+            }
+          }
+        }, /*#__PURE__*/_react["default"].createElement(_Base.BaseButton, {
+          variant: "minimal",
+          tabIndex: flatIndex === focusedIndex ? 0 : -1,
+          onClick: function onClick() {
+            return onSelect(icon);
+          },
+          "aria-label": icon.name,
+          className: (0, _utils.cn)('cop-p-[5px]', isSelected && 'cop-bg-secondary cop-text-gray-700 hover:cop-border-secondary hover:cop-bg-secondary')
+        }, renderIcon(icon)));
+      })));
+    }));
+  });
+  IconGrid.displayName = 'IconGrid';
+});

package/dist/umd/components/IconPicker/IconPicker.js

@@ -0,0 +1,269 @@
+// 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 (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "react", "react-dom", "../../common/utils", "../Button/Base", "../Input", "./IconGrid", "./searchIcons", "./pickerIcons", "../../icons/iconToFaMap"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("react"), require("react-dom"), require("../../common/utils"), require("../Button/Base"), require("../Input"), require("./IconGrid"), require("./searchIcons"), require("./pickerIcons"), require("../../icons/iconToFaMap"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.react, global.reactDom, global.utils, global.Base, global.Input, global.IconGrid, global.searchIcons, global.pickerIcons, global.iconToFaMap);
+    global.IconPicker = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, React, _reactDom, _utils, _Base, _Input, _IconGrid, _searchIcons, _pickerIcons, _iconToFaMap) {
+  "use strict";
+  'use client';
+
+  Object.defineProperty(_exports, "__esModule", {
+    value: true
+  });
+  _exports.IconPicker = void 0;
+  React = _interopRequireWildcard(React);
+  _reactDom = _interopRequireDefault(_reactDom);
+  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; }
+  function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+  function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+  function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+  function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+  function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+  function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+  var IconPicker = _exports.IconPicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+    var value = _ref.value,
+      onChange = _ref.onChange,
+      defaultValue = _ref.defaultValue,
+      _ref$placeholder = _ref.placeholder,
+      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;
+    var isControlled = value !== undefined;
+    var _React$useState = React.useState(defaultValue),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      internalValue = _React$useState2[0],
+      setInternalValue = _React$useState2[1];
+    var selectedIcon = React.useMemo(function () {
+      if (isControlled) {
+        // if the icon value is a legacy icon picker value
+        if (_iconToFaMap.iconToFaMap[value]) {
+          return _iconToFaMap.iconToFaMap[value];
+        }
+        return value;
+      } else {
+        return internalValue;
+      }
+    }, [isControlled, value, internalValue]);
+    var selectedIconData = React.useMemo(function () {
+      return _pickerIcons.pickerIcons.find(function (icon) {
+        return icon.name === selectedIcon;
+      });
+    }, [selectedIcon]);
+    var _React$useState3 = React.useState(false),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      open = _React$useState4[0],
+      setOpen = _React$useState4[1];
+    var _React$useState5 = React.useState(''),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      search = _React$useState6[0],
+      setSearch = _React$useState6[1];
+    var _React$useState7 = React.useState(''),
+      _React$useState8 = _slicedToArray(_React$useState7, 2),
+      debouncedSearch = _React$useState8[0],
+      setDebouncedSearch = _React$useState8[1];
+    var triggerRef = React.useRef(null);
+    var popoverRef = React.useRef(null);
+    var searchInputRef = React.useRef(null);
+    var gridRef = React.useRef(null);
+    var _React$useState9 = React.useState({
+        top: 0,
+        left: 0
+      }),
+      _React$useState10 = _slicedToArray(_React$useState9, 2),
+      coords = _React$useState10[0],
+      setCoords = _React$useState10[1];
+
+    // Merge forwarded ref with internal ref
+    React.useImperativeHandle(ref, function () {
+      return triggerRef.current;
+    });
+
+    // Debounce search input
+    React.useEffect(function () {
+      var timeout = setTimeout(function () {
+        return setDebouncedSearch(search);
+      }, 200);
+      return function () {
+        return clearTimeout(timeout);
+      };
+    }, [search]);
+
+    // Filter icons by search
+    var filteredIcons = React.useMemo(function () {
+      return (0, _searchIcons.searchIcons)(debouncedSearch, _pickerIcons.pickerIcons);
+    }, [debouncedSearch]);
+
+    // Position popover below trigger with viewport boundary checks
+    var updatePosition = React.useCallback(function () {
+      var _popoverRef$current$o, _popoverRef$current;
+      if (!triggerRef.current) return;
+      var rect = triggerRef.current.getBoundingClientRect();
+      var popoverWidth = 330;
+      var popoverHeight = (_popoverRef$current$o = (_popoverRef$current = popoverRef.current) === null || _popoverRef$current === void 0 ? void 0 : _popoverRef$current.offsetHeight) !== null && _popoverRef$current$o !== void 0 ? _popoverRef$current$o : 300;
+      var gap = 4;
+      var top = rect.bottom + gap;
+      var left = rect.left;
+
+      // If popover overflows bottom, position above trigger
+      if (top + popoverHeight > window.innerHeight) {
+        top = rect.top - gap - popoverHeight;
+      }
+
+      // Clamp horizontal position within viewport
+      if (left + popoverWidth > window.innerWidth) {
+        left = window.innerWidth - popoverWidth - gap;
+      }
+      if (left < gap) {
+        left = gap;
+      }
+      setCoords({
+        top: top,
+        left: left
+      });
+    }, []);
+
+    // Update position when opened
+    React.useLayoutEffect(function () {
+      if (open) {
+        updatePosition();
+        // Focus search input after positioning
+        requestAnimationFrame(function () {
+          var _searchInputRef$curre;
+          return (_searchInputRef$curre = searchInputRef.current) === null || _searchInputRef$curre === void 0 ? void 0 : _searchInputRef$curre.focus();
+        });
+      }
+    }, [open, updatePosition]);
+
+    // Lock body scroll while open and reposition on resize
+    React.useEffect(function () {
+      if (!open) return;
+      var prevOverflow = document.body.style.overflow;
+      document.body.style.overflow = 'hidden';
+      window.addEventListener('resize', updatePosition);
+      return function () {
+        document.body.style.overflow = prevOverflow;
+        window.removeEventListener('resize', updatePosition);
+      };
+    }, [open, updatePosition]);
+
+    // Close on outside click
+    React.useEffect(function () {
+      if (!open) return;
+      var handleMouseDown = function handleMouseDown(e) {
+        var _triggerRef$current, _popoverRef$current2;
+        var target = e.target;
+        if ((_triggerRef$current = triggerRef.current) !== null && _triggerRef$current !== void 0 && _triggerRef$current.contains(target) || (_popoverRef$current2 = popoverRef.current) !== null && _popoverRef$current2 !== void 0 && _popoverRef$current2.contains(target)) {
+          return;
+        }
+        setOpen(false);
+        setSearch('');
+      };
+      document.addEventListener('mousedown', handleMouseDown);
+      return function () {
+        return document.removeEventListener('mousedown', handleMouseDown);
+      };
+    }, [open]);
+
+    // Close on Escape
+    React.useEffect(function () {
+      if (!open) return;
+      var handleKeyDown = function handleKeyDown(e) {
+        if (e.key === 'Escape') {
+          setOpen(false);
+          setSearch('');
+        }
+      };
+      document.addEventListener('keydown', handleKeyDown);
+      return function () {
+        return document.removeEventListener('keydown', handleKeyDown);
+      };
+    }, [open]);
+    var handleSelect = React.useCallback(function (icon) {
+      if (!isControlled) setInternalValue(icon.name);
+      onChange === null || onChange === void 0 || onChange(icon.name);
+      setOpen(false);
+      setSearch('');
+    }, [isControlled, onChange]);
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      ref: triggerRef,
+      className: "cop-inline-flex"
+    }, /*#__PURE__*/React.createElement(_Base.BaseButton, {
+      variant: "minimal",
+      disabled: disabled,
+      onClick: function onClick() {
+        return setOpen(function (prev) {
+          return !prev;
+        });
+      },
+      "aria-label": selectedIcon !== null && selectedIcon !== void 0 ? selectedIcon : placeholder,
+      "aria-haspopup": "dialog",
+      "aria-expanded": open,
+      className: (0, _utils.cn)('cop-p-[7px]', className)
+    }, selectedIconData ? selectedIconData.source === 'ds' ? /*#__PURE__*/React.createElement(selectedIconData.Component, {
+      className: "cop-h-4 cop-w-4",
+      "aria-hidden": "true"
+    }) : /*#__PURE__*/React.createElement("svg", {
+      viewBox: selectedIconData.viewBox,
+      fill: "currentColor",
+      className: "cop-h-4 cop-w-4",
+      overflow: "visible",
+      "aria-hidden": "true"
+    }, /*#__PURE__*/React.createElement("path", {
+      d: selectedIconData.path
+    })) : /*#__PURE__*/React.createElement("span", {
+      className: "cop-text-muted-foreground cop-text-sm"
+    }, placeholder))), open && /*#__PURE__*/_reactDom["default"].createPortal( /*#__PURE__*/React.createElement("div", {
+      ref: popoverRef,
+      style: {
+        top: coords.top,
+        left: coords.left
+      },
+      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"
+    }, /*#__PURE__*/React.createElement(_Input.Input, {
+      ref: searchInputRef,
+      placeholder: "Search icons",
+      value: search,
+      onChange: function onChange(e) {
+        return setSearch(e.target.value);
+      },
+      onFocus: function onFocus() {
+        var _gridRef$current, _gridRef$current$rese;
+        return (_gridRef$current = gridRef.current) === null || _gridRef$current === void 0 || (_gridRef$current$rese = _gridRef$current.resetFocus) === null || _gridRef$current$rese === void 0 ? void 0 : _gridRef$current$rese.call(_gridRef$current);
+      },
+      onKeyDown: function onKeyDown(e) {
+        if ((e.key === 'ArrowDown' || e.key === 'Enter') && filteredIcons.length > 0) {
+          var _gridRef$current2;
+          e.preventDefault();
+          (_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-py-3 cop-pl-3 cop-pr-0"
+    }, /*#__PURE__*/React.createElement(_IconGrid.IconGrid, {
+      ref: gridRef,
+      icons: filteredIcons,
+      onSelect: handleSelect,
+      selectedIcon: selectedIcon,
+      onEscapeFromGrid: function onEscapeFromGrid() {
+        var _searchInputRef$curre2;
+        return (_searchInputRef$curre2 = searchInputRef.current) === null || _searchInputRef$curre2 === void 0 ? void 0 : _searchInputRef$curre2.focus();
+      }
+    }))), document.body));
+  });
+  IconPicker.displayName = 'IconPicker';
+});

package/dist/umd/components/IconPicker/__tests__/searchIcons.test.js

@@ -0,0 +1,70 @@
+// This file is generated by a script. Do not edit this file directly.
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["../searchIcons"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(require("../searchIcons"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(global.searchIcons);
+    global.searchIconsTest = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_searchIcons) {
+  "use strict";
+
+  jest.mock("../icons.generated", function () {
+    return {
+      searchTermsMap: {
+        heart: ['love', 'like', 'favorite'],
+        'heart-crack': ['break', 'love', 'sad'],
+        star: ['favorite', 'rating'],
+        house: ['home', 'building'],
+        'magnifying-glass': ['search', 'find', 'look'],
+        gear: ['settings', 'configure']
+      }
+    };
+  });
+  var faIcon = function faIcon(name) {
+    return {
+      source: 'fa',
+      name: name,
+      viewBox: '0 0 512 512',
+      path: 'M0 0'
+    };
+  };
+  var fixture = [faIcon('heart'), faIcon('heart-crack'), faIcon('star'), faIcon('house'), faIcon('magnifying-glass'), faIcon('filter'), faIcon('gear')];
+  describe('searchIcons', function () {
+    it('returns all icons for an empty query', function () {
+      expect((0, _searchIcons.searchIcons)('', fixture)).toEqual(fixture);
+      expect((0, _searchIcons.searchIcons)('  ', fixture)).toEqual(fixture);
+    });
+    it('matches icons by name', function () {
+      var results = (0, _searchIcons.searchIcons)('heart', fixture);
+      expect(results).toHaveLength(2);
+      expect(results.map(function (i) {
+        return i.name;
+      })).toEqual(['heart', 'heart-crack']);
+    });
+    it('matches icons by searchTerms', function () {
+      var results = (0, _searchIcons.searchIcons)('love', fixture);
+      expect(results).toHaveLength(2);
+      expect(results.map(function (i) {
+        return i.name;
+      })).toEqual(['heart', 'heart-crack']);
+    });
+    it('matches icons by partial prefix', function () {
+      var _results$;
+      var results = (0, _searchIcons.searchIcons)('mag', fixture);
+      expect(results).toHaveLength(1);
+      expect((_results$ = results[0]) === null || _results$ === void 0 ? void 0 : _results$.name).toBe('magnifying-glass');
+    });
+    it('matches icons by search term prefix', function () {
+      var _results$2;
+      var results = (0, _searchIcons.searchIcons)('set', fixture);
+      expect(results).toHaveLength(1);
+      expect((_results$2 = results[0]) === null || _results$2 === void 0 ? void 0 : _results$2.name).toBe('gear');
+    });
+  });
+});