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

package/dist/index.d.ts

@@ -10,6 +10,7 @@ import { default as Avatar } from '@mui/material/Avatar';
 import { default as Backdrop } from '@mui/material/Backdrop';
 import { default as Badge } from '@mui/material/Badge';
 import { default as Box } from '@mui/material/Box';
+import { BoxProps } from '@mui/material';
 import { default as Breadcrumbs } from '@mui/material/Breadcrumbs';
 import { ButtonProps } from '@mui/material/Button';
 import { default as Card } from '@mui/material/Card';
@@ -212,19 +213,26 @@ export { ClickAwayListener }
 
 export { Collapse }
 
+export declare type ColorOption = {
+    color: string;
+    showBorder?: boolean;
+};
+
 export declare const ColorPicker: FC<ColorPickerProps>;
 
 export declare type ColorPickerProps = {
     value: HexaColor;
     disabled?: boolean;
-    options?: string[];
+    options?: string[] | ColorOption[];
     slotProps?: ColorPickerSlotProps;
     onChange: (value: HexaColor) => void;
+    useCheckmarkSwatch?: boolean;
 };
 
 export declare type ColorPickerSlotProps = {
     clickAwayListener?: Omit<ClickAwayListenerProps, "onClickAway" | "children">;
     circlePicker?: Omit<CirclePickerProps, "colors" | "color" | "onChange">;
+    circlePickerBox?: BoxProps;
 };
 
 export declare type ColorVariant = "primary" | "secondary";
@@ -258,6 +266,8 @@ export declare type DatePickerProps = {
     adapterLocale?: string;
 } & DatePickerProps_2;
 
+export declare const DEFAULT_COLOR_OPTIONS: ColorOption[];
+
 export declare const Dialog: React.FunctionComponent<DialogProps>;
 
 export { DialogActions }
@@ -532,6 +542,11 @@ export { StepLabel }
 
 export { Stepper }
 
+export declare interface StyledSwatchBoxProps {
+    showBorder?: boolean;
+    backgroundColor?: string;
+}
+
 export declare interface StyledToggleButtonGroupProps {
     colorvariant: ColorVariant;
 }
@@ -542,6 +557,13 @@ export declare interface StyledToggleButtonProps {
 
 export { SvgIcon }
 
+export declare type SwatchProps = {
+    color: string;
+    onClick: () => void;
+    active: boolean;
+    showBorder?: boolean;
+};
+
 export { Switch }
 
 export { Tab }

package/dist/index.es.js

@@ -42949,6 +42949,89 @@ const ButtonGroup = ({
     }
   );
 };
+const CheckRoundedIcon = createSvgIcon(/* @__PURE__ */ 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 = styled$3(Box$1)(
+  ({ 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 = styled$3(Box$1)(
+  ({ 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__ */ jsx(
+    StyledSwatchBox,
+    {
+      onClick,
+      showBorder,
+      backgroundColor: color2,
+      children: active && /* @__PURE__ */ jsx(
+        CheckRoundedIcon,
+        {
+          sx: {
+            fontSize: 14,
+            color: getContrastingColor(color2)
+          }
+        }
+      )
+    }
+  );
+};
 const ColorPickerIcon = ({
   fill,
   onClick
@@ -43003,37 +43086,35 @@ const ColorPickerIcon = ({
     ]
   }
 );
-const PickerBackgroundBox = styled$3(Box$1)(
-  ({ 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] = useState(false);
   const handlePickerToggle = () => {
     if (disabled) return;
@@ -43047,31 +43128,64 @@ const ColorPicker = ({
       handlePickerToggle();
     }
   };
-  return /* @__PURE__ */ jsx(ClickAwayListener$1, { onClickAway: handleClose, children: /* @__PURE__ */ 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__ */ jsx(
+    ClickAwayListener$1,
     {
-      disabled,
-      tabIndex: 0,
-      onKeyDown: handleKeyDown,
-      children: [
-        /* @__PURE__ */ jsx(ColorPickerIcon, { onClick: handlePickerToggle, fill: value }),
-        isCirclePickerVisible && /* @__PURE__ */ jsx(Box$1, { sx: circlePickerStyle, children: /* @__PURE__ */ jsx(
-          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__ */ jsxs(
+        PickerBackgroundBox,
+        {
+          disabled,
+          tabIndex: 0,
+          onKeyDown: handleKeyDown,
+          children: [
+            /* @__PURE__ */ jsx(ColorPickerIcon, { onClick: handlePickerToggle, fill: value }),
+            isCirclePickerVisible && /* @__PURE__ */ jsx(
+              Box$1,
+              {
+                sx: {
+                  ...circlePickerStyle,
+                  ...((_a = slotProps == null ? void 0 : slotProps.circlePickerBox) == null ? void 0 : _a.sx) || {}
+                },
+                children: useCheckmarkSwatch ? /* @__PURE__ */ jsx(Box$1, { sx: checkmarkSwatchBox, children: normalizedOptions.map((option) => /* @__PURE__ */ jsx(
+                  CheckmarkSwatch,
+                  {
+                    color: option.color,
+                    active: option.color === value,
+                    onClick: () => {
+                      onChange(option.color);
+                      handleClose();
+                    },
+                    showBorder: option.showBorder
+                  },
+                  option.color
+                )) }) : /* @__PURE__ */ jsx(
+                  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;
@@ -62697,6 +62811,7 @@ export {
   ColorPicker,
   Container,
   CssVarsProvider,
+  DEFAULT_COLOR_OPTIONS,
   DatePicker2 as DatePicker,
   Dialog2 as Dialog,
   DialogActions,