@ultraviolet/ui 3.7.1 → 3.8.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultraviolet/ui",
-  "version": "3.7.1",
+  "version": "3.8.1",
   "description": "Ultraviolet UI",
   "homepage": "https://github.com/scaleway/ultraviolet#readme",
   "repository": {
@@ -96,9 +96,9 @@
     "deepmerge": "4.3.1",
     "react-toastify": "11.0.5",
     "react-use-clipboard": "1.0.9",
-    "@ultraviolet/icons": "5.0.7",
+    "@ultraviolet/icons": "5.1.1",
     "@ultraviolet/themes": "3.0.5",
-    "@ultraviolet/utils": "1.0.1"
+    "@ultraviolet/utils": "1.0.2"
   },
   "scripts": {
     "type:generate": "tsc --declaration -p tsconfig.build.json",

package/dist/components/SelectableCard/index.js

@@ -1,232 +0,0 @@
-"use client";
-import { jsx, jsxs } from "react/jsx-runtime";
-import * as ProductIcon from "@ultraviolet/icons/product";
-import { useTheme } from "@ultraviolet/themes";
-import { cn } from "@ultraviolet/utils";
-import { assignInlineVars } from "@vanilla-extract/dynamic";
-import { forwardRef, useRef, useState, useMemo, useEffect, useCallback } from "react";
-import { Checkbox } from "../Checkbox/index.js";
-import { Radio } from "../Radio/index.js";
-import { Stack } from "../Stack/index.js";
-import { Tooltip } from "../Tooltip/index.js";
-import { illustrationSelectableCard, divSelectableCard, imageSelectableCard, selectableElementSelectableCard, stackSelectableCard, indentedCard, containerSelectableCard, labelContainerSelectableCardLabel, labelContainerSelectableCardNoLabel } from "./styles.css.js";
-import { widthSelectable, labelDisplay, inputDisplay } from "./variables.css.js";
-const SelectableCard = forwardRef(
-  ({
-    name,
-    value,
-    onChange,
-    showTick = false,
-    type = "radio",
-    checked = false,
-    disabled = false,
-    children,
-    className,
-    isError,
-    onFocus,
-    onBlur,
-    tooltip,
-    id,
-    label,
-    "data-testid": dataTestId,
-    productIcon,
-    illustration,
-    "aria-label": ariaLabel,
-    style,
-    indented = true
-  }, ref) => {
-    const theme = useTheme();
-    const innerRef = useRef(null);
-    const childrenRef = useRef(null);
-    const [svgContent, setSvgContent] = useState(null);
-    const image = useMemo(() => {
-      if (illustration) {
-        return "illustration";
-      }
-      if (productIcon) {
-        return "icon";
-      }
-      return "none";
-    }, [illustration, productIcon]);
-    useEffect(() => {
-      if (illustration?.endsWith(".svg")) {
-        fetch(illustration).then((response) => response.text()).then((svg) => {
-          const updatedSvg = svg.replace(
-            /fill="[^"]*"/g,
-            `fill="${theme.colors.neutral.backgroundStronger}"`
-          ).replace(/width="[^"]*"/g, `width="220px"`).replace(/height="[^"]*"/g, `height="220px"`);
-          setSvgContent(updatedSvg);
-        }).catch(() => null);
-      }
-    });
-    const ProductIconUsed = productIcon ? (
-      // biome-ignore lint/performance/noDynamicNamespaceImportAccess: to fix
-      ProductIcon[`${productIcon.charAt(0).toUpperCase() + productIcon.slice(1)}ProductIcon`]
-    ) : null;
-    const ParentContainer = useCallback(
-      ({ children: subChildren }) => {
-        if (tooltip) {
-          return /* @__PURE__ */ jsx(Stack, { flex: 1, children: /* @__PURE__ */ jsx(Tooltip, { containerFullHeight: true, text: tooltip, children: subChildren }) });
-        }
-        return /* @__PURE__ */ jsx(Tooltip, { children: subChildren });
-      },
-      [tooltip]
-    );
-    const IllustrationContainer = useCallback(
-      ({ children: subChildren }) => {
-        if (ProductIconUsed || illustration) {
-          return /* @__PURE__ */ jsxs(
-            Stack,
-            {
-              alignItems: "stretch",
-              direction: "row",
-              flex: 1,
-              justifyContent: "space-between",
-              width: "100%",
-              children: [
-                /* @__PURE__ */ jsx(Stack, { className: illustrationSelectableCard, children: subChildren }),
-                /* @__PURE__ */ jsx(Stack, { justifyContent: "center", children: ProductIconUsed ? /* @__PURE__ */ jsx(ProductIconUsed, { size: "large" }) : null }),
-                illustration ? /* @__PURE__ */ jsx("div", { className: divSelectableCard, children: illustration.endsWith(".svg") && svgContent ? /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: imageSelectableCard,
-                    dangerouslySetInnerHTML: { __html: svgContent }
-                  }
-                ) : /* @__PURE__ */ jsx(
-                  "img",
-                  {
-                    alt: "illustration",
-                    className: imageSelectableCard,
-                    src: illustration,
-                    width: 220
-                  }
-                ) }) : null
-              ]
-            }
-          );
-        }
-        return subChildren;
-      },
-      [ProductIconUsed, illustration, svgContent]
-    );
-    const onKeyDown = useCallback(
-      (event) => {
-        if (event.key === " " && innerRef?.current) {
-          event.preventDefault();
-          innerRef.current.click();
-        }
-      },
-      [innerRef]
-    );
-    const isComplexChildren = ["function", "array", "object"].includes(
-      typeof children
-    );
-    const onClickContainer = useCallback(
-      (event) => {
-        if (innerRef.current && !disabled) {
-          const inputElement = innerRef.current;
-          const labelElement = document.querySelector(
-            `label[for="${inputElement.id}"]`
-          );
-          const targetNode = event.target;
-          if (!(inputElement.contains(targetNode) || labelElement?.contains(targetNode))) {
-            inputElement.click();
-          }
-        }
-      },
-      [disabled]
-    );
-    return /* @__PURE__ */ jsx(ParentContainer, { children: /* @__PURE__ */ jsx(
-      Stack,
-      {
-        alignItems: "flex-start",
-        className: cn(
-          className,
-          containerSelectableCard({
-            cursor: type === "checkbox" && isComplexChildren ? "default" : "custom",
-            image
-          }),
-          label ? labelContainerSelectableCardLabel : labelContainerSelectableCardNoLabel
-        ),
-        "data-checked": checked,
-        "data-disabled": disabled,
-        "data-error": isError,
-        "data-testid": dataTestId,
-        "data-type": type,
-        direction: label ? "column" : "row",
-        flex: 1,
-        gap: 0.5,
-        onClick: type === "checkbox" && isComplexChildren ? void 0 : onClickContainer,
-        onKeyDown,
-        ref,
-        role: "button",
-        style: {
-          ...assignInlineVars({
-            [inputDisplay]: showTick ? "inline" : "none",
-            [labelDisplay]: showTick || label ? "inline" : "none",
-            [widthSelectable]: label ? "100%" : "auto"
-          }),
-          ...style
-        },
-        tabIndex: disabled ? void 0 : 0,
-        children: /* @__PURE__ */ jsxs(IllustrationContainer, { children: [
-          type === "radio" ? /* @__PURE__ */ jsx(
-            Radio,
-            {
-              checked,
-              className: selectableElementSelectableCard,
-              "data-error": isError,
-              disabled,
-              error: isError,
-              id,
-              name,
-              onBlur,
-              onChange,
-              onFocus,
-              ref: innerRef,
-              tabIndex: -1,
-              value,
-              ...label ? { label } : { "aria-label": ariaLabel }
-            }
-          ) : /* @__PURE__ */ jsx(
-            Checkbox,
-            {
-              checked,
-              className: selectableElementSelectableCard,
-              "data-error": isError,
-              disabled,
-              error: isError,
-              id,
-              name,
-              onBlur,
-              onChange,
-              onFocus,
-              ref: innerRef,
-              tabIndex: -1,
-              value,
-              ...label ? { "aria-label": void 0, children: label } : { "aria-label": ariaLabel }
-            }
-          ),
-          children ? /* @__PURE__ */ jsx(
-            Stack,
-            {
-              className: cn(
-                stackSelectableCard,
-                !!label && showTick && indented ? indentedCard : void 0
-              ),
-              "data-has-default-cursor": type === "checkbox" && isComplexChildren,
-              "data-has-label": !!label && showTick,
-              onKeyDown: (event) => event.stopPropagation(),
-              ref: childrenRef,
-              width: "100%",
-              children: typeof children === "function" ? children({ checked, disabled }) : children
-            }
-          ) : null
-        ] })
-      }
-    ) });
-  }
-);
-export {
-  SelectableCard
-};