@examplary/ui 1.39.0 → 1.39.1

package/dist/components/question-types/fetch-component.js

@@ -39,7 +39,18 @@ import * as _ReactDom from "react-dom";
 import * as _jsxRuntime from "react/jsx-runtime";
 import * as ExamplaryUI from "../../index";
 var componentCache = new Map();
-// Little helper to evaluate the JS code in the context of the module
+/**
+ * Little helper to evaluate the JS code in the context of the module.
+ *
+ * Note for security analysis: this is not a security risk on its own,
+ * as the code executed by this (from custom question types created
+ * either by Examplary or submitted by users) has been reviewed by
+ * Examplary staff, before being made available to accounts other than
+ * the creator.
+ *
+ * However, if the code being evaluated here were to be modified by an attacker
+ * after review, but before being loaded by users, then this could be a security risk.
+ */
 var evalInScope = function (js, contextAsScope) {
     return new Function("\n    with (this) { \n      ".concat(js, "\n      \n      if (module.exports.default) {\n        module.exports.default._context = this;\n      }\n    }\n  ")).call(contextAsScope);
 };

package/dist/components/ui/icon-picker.d.ts

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { LucideProps } from "lucide-react";
 import { PopoverTrigger } from "./popover";
 type IconData = {
     name: string;
@@ -14,8 +15,12 @@ interface IconPickerProps extends Omit<React.ComponentPropsWithoutRef<typeof Pop
     className?: string;
     iconsList?: IconData[];
 }
-declare const IconPicker: {
+type DynamicIconProps = {
+    name: string;
+} & LucideProps;
+export declare const DynamicIcon: React.MemoExoticComponent<({ name, ...props }: DynamicIconProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const IconPicker: {
     ({ value, defaultValue, onValueChange, children, chooseIconLabel, searchable, searchPlaceholder, iconsList, className, ...props }: IconPickerProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
-export { IconPicker };
+export {};

package/dist/components/ui/icon-picker.js

@@ -60,20 +60,42 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { useState, useMemo, useCallback, useEffect } from "react";
 import Fuse from "fuse.js";
-import { DynamicIcon } from "lucide-react/dynamic";
+import { Icon } from "lucide-react";
 import { useDebounceValue } from "usehooks-ts";
 import { Button } from "./button";
 import { Input } from "./input";
 import { Popover, PopoverContent, PopoverTrigger } from "./popover";
 import { Skeleton } from "./skeleton";
-var IconRenderer = React.memo(function (_a) {
-    var name = _a.name;
-    return _jsx(DynamicIcon, { name: name });
-});
-IconRenderer.displayName = "IconRenderer";
 var IconsColumnSkeleton = function () {
     return (_jsxs("div", { className: "flex flex-col gap-2 w-full", children: [_jsx(Skeleton, { className: "h-4 w-1/2 rounded-md" }), _jsx("div", { className: "grid grid-cols-5 gap-2 w-full", children: Array.from({ length: 40 }).map(function (_, i) { return (_jsx(Skeleton, { className: "h-10 w-10 rounded-md" }, i)); }) })] }));
 };
+export var DynamicIcon = React.memo(function (_a) {
+    var name = _a.name, props = __rest(_a, ["name"]);
+    var _b = useState([]), node = _b[0], setNode = _b[1];
+    useEffect(function () {
+        var isMounted = true;
+        var loadIcon = function () { return __awaiter(void 0, void 0, void 0, function () {
+            var response;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, import("lucide-static/icon-nodes.json")];
+                    case 1:
+                        response = _a.sent();
+                        if (isMounted) {
+                            setNode(response.default[name]);
+                        }
+                        return [2 /*return*/];
+                }
+            });
+        }); };
+        loadIcon();
+        return function () {
+            isMounted = false;
+        };
+    }, [name]);
+    return _jsx(Icon, __assign({}, props, { iconNode: node }));
+});
+DynamicIcon.displayName = "DynamicIcon";
 var useIconsData = function () {
     var _a = useState([]), icons = _a[0], setIcons = _a[1];
     var _b = useState(true), isLoading = _b[0], setIsLoading = _b[1];
@@ -109,7 +131,7 @@ var useIconsData = function () {
     }, []);
     return { icons: icons, isLoading: isLoading };
 };
-var IconPicker = function (_a) {
+export var IconPicker = function (_a) {
     var value = _a.value, defaultValue = _a.defaultValue, onValueChange = _a.onValueChange, children = _a.children, chooseIconLabel = _a.chooseIconLabel, _b = _a.searchable, searchable = _b === void 0 ? true : _b, _c = _a.searchPlaceholder, searchPlaceholder = _c === void 0 ? "Search for an icon..." : _c, iconsList = _a.iconsList, className = _a.className, props = __rest(_a, ["value", "defaultValue", "onValueChange", "children", "chooseIconLabel", "searchable", "searchPlaceholder", "iconsList", "className"]);
     var _d = useState(defaultValue), selectedIcon = _d[0], setSelectedIcon = _d[1];
     var _e = useState(false), isOpen = _e[0], setIsOpen = _e[1];
@@ -151,12 +173,11 @@ var IconPicker = function (_a) {
             parentRef.current.scrollTop = 0;
         }
     }, [setSearch]);
-    var renderIcon = useCallback(function (icon) { return (_jsx(Button, { variant: "roundedWhite", size: "icon", onClick: function () { return handleIconClick(icon.name); }, children: _jsx(IconRenderer, { name: icon.name }) }, icon.name)); }, [handleIconClick]);
-    return (_jsxs(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [_jsx(PopoverTrigger, __assign({ asChild: true }, props, { children: children || (_jsxs(Button, { variant: "white", className: className, children: [value || selectedIcon ? (_jsx(IconRenderer, { name: (value || selectedIcon) })) : null, chooseIconLabel || "Select icon"] })) })), _jsxs(PopoverContent, { className: "w-64 h-70 flex flex-col overflow-hidden p-0", children: [searchable && (_jsx("div", { className: "m-4 mb-2", children: _jsx(Input, { placeholder: searchPlaceholder, onChange: handleSearchChange }) })), _jsx("div", { ref: parentRef, className: "overflow-auto flex-1 p-4 pt-2", style: { scrollbarWidth: "thin" }, onWheel: function (e) {
+    var renderIcon = useCallback(function (icon) { return (_jsx(Button, { variant: "roundedWhite", size: "icon", onClick: function () { return handleIconClick(icon.name); }, children: _jsx(DynamicIcon, { name: icon.name }) }, icon.name)); }, [handleIconClick]);
+    return (_jsxs(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [_jsx(PopoverTrigger, __assign({ asChild: true }, props, { children: children || (_jsxs(Button, { variant: "white", className: className, children: [value || selectedIcon ? (_jsx(DynamicIcon, { name: (value || selectedIcon) })) : null, chooseIconLabel || "Select icon"] })) })), _jsxs(PopoverContent, { className: "w-64 h-70 flex flex-col overflow-hidden p-0", children: [searchable && (_jsx("div", { className: "m-4 mb-2", children: _jsx(Input, { placeholder: searchPlaceholder, onChange: handleSearchChange }) })), _jsx("div", { ref: parentRef, className: "overflow-auto flex-1 p-4 pt-2", style: { scrollbarWidth: "thin" }, onWheel: function (e) {
                             e.stopPropagation();
                         }, onTouchMove: function (e) {
                             e.stopPropagation();
                         }, children: isLoading ? (_jsx(IconsColumnSkeleton, {})) : (_jsx("div", { className: "grid grid-cols-5 gap-2 w-full", children: filteredIcons.map(renderIcon) })) })] })] }));
 };
 IconPicker.displayName = "IconPicker";
-export { IconPicker };

package/package.json

@@ -2,7 +2,7 @@
   "name": "@examplary/ui",
   "description": "UI components for the Examplary testing platform.",
   "packageManager": "yarn@4.5.3",
-  "version": "1.39.0",
+  "version": "1.39.1",
   "type": "module",
   "main": "dist/index.js",
   "files": [
@@ -10,7 +10,7 @@
     "src/global.css"
   ],
   "scripts": {
-    "start": "yarn build --watch",
+    "dev": "yarn build --watch",
     "release": "semantic-release -e semantic-release-monorepo",
     "build": "yarn build:js && yarn build:styles",
     "build:js": "tsc ./src/index.ts --outDir dist --skipLibCheck --declaration --jsx react-jsx --esModuleInterop --moduleResolution bundler --module es2020",