@cgi-learning-hub/ui 1.9.0-dev.1760351621 → 1.9.0-dev.1760444330

package/dist/index.cjs.js

@@ -42966,6 +42966,89 @@ const ButtonGroup = ({
     }
   );
 };
+const CheckRoundedIcon = createSvgIcon(/* @__PURE__ */ jsxRuntime.jsx("path", {
+  d: "M9 16.17 5.53 12.7a.996.996 0 0 0-1.41 0c-.39.39-.39 1.02 0 1.41l4.18 4.18c.39.39 1.02.39 1.41 0L20.29 7.71c.39-.39.39-1.02 0-1.41a.996.996 0 0 0-1.41 0z"
+}), "CheckRounded");
+const PickerBackgroundBox = material.styled(material.Box)(
+  ({ disabled }) => ({
+    width: "4.4rem",
+    height: "4.4rem",
+    position: "relative",
+    borderRadius: "50%",
+    pointerEvents: disabled ? "none" : "auto",
+    "&:hover, :focus, :focus-visible": {
+      backgroundColor: disabled ? "transparent" : "#F8F9F9",
+      outline: "none"
+    }
+  })
+);
+const circlePickerStyle = {
+  position: "absolute",
+  bottom: "5rem",
+  right: "-2rem",
+  backgroundColor: "white",
+  zIndex: 1e3,
+  padding: "1rem",
+  borderRadius: "1rem",
+  display: "flex",
+  boxShadow: "0px 0px 10px 0px rgba(0,0,0,0.1)"
+};
+const checkmarkSwatchBox = {
+  display: "flex",
+  flexWrap: "wrap",
+  gap: "5px",
+  width: "15rem"
+};
+const StyledSwatchBox = material.styled(material.Box)(
+  ({ showBorder = false, backgroundColor: backgroundColor2 }) => ({
+    width: 20,
+    height: 20,
+    borderRadius: "50%",
+    cursor: "pointer",
+    position: "relative",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    transition: "transform 0.2s",
+    backgroundColor: backgroundColor2,
+    boxSizing: "border-box",
+    border: showBorder ? "2px solid black" : "none",
+    "&:hover": {
+      transform: "scale(1.1)"
+    }
+  })
+);
+const CheckmarkSwatch = ({
+  color: color2,
+  onClick,
+  active,
+  showBorder = false
+}) => {
+  const getContrastingColor = (hexColor) => {
+    const r2 = parseInt(hexColor.slice(1, 3), 16);
+    const g = parseInt(hexColor.slice(3, 5), 16);
+    const b = parseInt(hexColor.slice(5, 7), 16);
+    const luminance = (0.299 * r2 + 0.587 * g + 0.114 * b) / 255;
+    return luminance > 0.5 ? "#000000" : "#ffffff";
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    StyledSwatchBox,
+    {
+      onClick,
+      showBorder,
+      backgroundColor: color2,
+      children: active && /* @__PURE__ */ jsxRuntime.jsx(
+        CheckRoundedIcon,
+        {
+          sx: {
+            fontSize: 14,
+            color: getContrastingColor(color2)
+          }
+        }
+      )
+    }
+  );
+};
 const ColorPickerIcon = ({
   fill,
   onClick
@@ -43020,37 +43103,35 @@ const ColorPickerIcon = ({
     ]
   }
 );
-const PickerBackgroundBox = material.styled(material.Box)(
-  ({ disabled }) => ({
-    width: "4.4rem",
-    height: "4.4rem",
-    position: "relative",
-    borderRadius: "50%",
-    pointerEvents: disabled ? "none" : "auto",
-    "&:hover, :focus, :focus-visible": {
-      backgroundColor: disabled ? "transparent" : "#F8F9F9",
-      outline: "none"
-    }
-  })
-);
-const circlePickerStyle = {
-  position: "absolute",
-  bottom: "5rem",
-  right: "-2rem",
-  backgroundColor: "white",
-  zIndex: 1e3,
-  padding: "1rem",
-  borderRadius: "1rem",
-  display: "flex",
-  boxShadow: "0px 0px 10px 0px rgba(0,0,0,0.1)"
-};
+const DEFAULT_COLOR_OPTIONS = [
+  { color: "#F44336", showBorder: false },
+  { color: "#E91E63", showBorder: false },
+  { color: "#9C27B0", showBorder: false },
+  { color: "#673AB7", showBorder: false },
+  { color: "#3F51B5", showBorder: false },
+  { color: "#2196F3", showBorder: false },
+  { color: "#03A9F4", showBorder: false },
+  { color: "#00BCD4", showBorder: false },
+  { color: "#009688", showBorder: false },
+  { color: "#4CAF50", showBorder: false },
+  { color: "#8BC34a", showBorder: false },
+  { color: "#CDDC39", showBorder: false },
+  { color: "#FFEB3B", showBorder: false },
+  { color: "#FFC107", showBorder: false },
+  { color: "#FF9800", showBorder: false },
+  { color: "#FF5722", showBorder: false },
+  { color: "#795548", showBorder: false },
+  { color: "#607D8B", showBorder: false }
+];
 const ColorPicker = ({
   disabled = false,
   options,
   value,
   onChange,
-  slotProps
+  slotProps,
+  useCheckmarkSwatch = false
 }) => {
+  var _a;
   const [isCirclePickerVisible, setIsCirclePickerVisible] = React.useState(false);
   const handlePickerToggle = () => {
     if (disabled) return;
@@ -43064,31 +43145,64 @@ const ColorPicker = ({
       handlePickerToggle();
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(material.ClickAwayListener, { onClickAway: handleClose, children: /* @__PURE__ */ jsxRuntime.jsxs(
-    PickerBackgroundBox,
+  const normalizedOptions = options ? options.map(
+    (option) => typeof option === "string" ? { color: option, showBorder: false } : { ...option, showBorder: option.showBorder ?? false }
+  ) : DEFAULT_COLOR_OPTIONS;
+  const colorStrings = normalizedOptions.map((opt) => opt.color);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    material.ClickAwayListener,
     {
-      disabled,
-      tabIndex: 0,
-      onKeyDown: handleKeyDown,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ColorPickerIcon, { onClick: handlePickerToggle, fill: value }),
-        isCirclePickerVisible && /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: circlePickerStyle, children: /* @__PURE__ */ jsxRuntime.jsx(
-          reactColor.CirclePicker,
-          {
-            colors: options,
-            color: value,
-            onChange: (newColor) => {
-              onChange(newColor.hex);
-              handleClose();
-            },
-            circleSize: 20,
-            circleSpacing: 5,
-            width: "15rem"
-          }
-        ) })
-      ]
+      onClickAway: handleClose,
+      ...slotProps == null ? void 0 : slotProps.clickAwayListener,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        PickerBackgroundBox,
+        {
+          disabled,
+          tabIndex: 0,
+          onKeyDown: handleKeyDown,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ColorPickerIcon, { onClick: handlePickerToggle, fill: value }),
+            isCirclePickerVisible && /* @__PURE__ */ jsxRuntime.jsx(
+              material.Box,
+              {
+                sx: {
+                  ...circlePickerStyle,
+                  ...((_a = slotProps == null ? void 0 : slotProps.circlePickerBox) == null ? void 0 : _a.sx) || {}
+                },
+                children: useCheckmarkSwatch ? /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: checkmarkSwatchBox, children: normalizedOptions.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
+                  CheckmarkSwatch,
+                  {
+                    color: option.color,
+                    active: option.color === value,
+                    onClick: () => {
+                      onChange(option.color);
+                      handleClose();
+                    },
+                    showBorder: option.showBorder
+                  },
+                  option.color
+                )) }) : /* @__PURE__ */ jsxRuntime.jsx(
+                  reactColor.CirclePicker,
+                  {
+                    colors: colorStrings,
+                    color: value,
+                    onChange: (newColor) => {
+                      onChange(newColor.hex);
+                      handleClose();
+                    },
+                    circleSize: 20,
+                    circleSpacing: 5,
+                    width: "15rem",
+                    ...slotProps == null ? void 0 : slotProps.circlePicker
+                  }
+                )
+              }
+            )
+          ]
+        }
+      )
     }
-  ) });
+  );
 };
 var weekOfYear$1 = { exports: {} };
 var weekOfYear = weekOfYear$1.exports;
@@ -62721,6 +62835,7 @@ exports.Collapse = Collapse;
 exports.ColorPicker = ColorPicker;
 exports.Container = Container;
 exports.CssVarsProvider = CssVarsProvider;
+exports.DEFAULT_COLOR_OPTIONS = DEFAULT_COLOR_OPTIONS;
 exports.DatePicker = DatePicker2;
 exports.Dialog = Dialog2;
 exports.DialogActions = DialogActions;