@cgi-learning-hub/ui 1.12.0-dev.1771407294 → 1.12.0-dev.1771430232

package/dist/index.cjs.js

@@ -8,6 +8,8 @@ const ReactDOM = require("react-dom");
 const reactColor = require("react-color");
 const dayjs = require("dayjs");
 const reactDropzone = require("react-dropzone");
+const iconsMaterial = require("@mui/icons-material");
+const material = require("@mui/material");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {
@@ -63631,12 +63633,6 @@ const TreeView = ({
     }
   ) });
 };
-const AddRoundedIcon = createSvgIcon(/* @__PURE__ */ jsxRuntime.jsx("path", {
-  d: "M18 13h-5v5c0 .55-.45 1-1 1s-1-.45-1-1v-5H6c-.55 0-1-.45-1-1s.45-1 1-1h5V6c0-.55.45-1 1-1s1 .45 1 1v5h5c.55 0 1 .45 1 1s-.45 1-1 1"
-}), "AddRounded");
-const RemoveRoundedIcon = createSvgIcon(/* @__PURE__ */ jsxRuntime.jsx("path", {
-  d: "M18 13H6c-.55 0-1-.45-1-1s.45-1 1-1h12c.55 0 1 .45 1 1s-.45 1-1 1"
-}), "RemoveRounded");
 const GREY = "rgba(238, 238, 238, 0.75)";
 const LIGHT_GREY = "#D6D6D6";
 const WHITE = "#FFFFFF";
@@ -63686,22 +63682,42 @@ const labelStyle = {
     opacity: 0.8
   }
 };
-const ZoomComponent = ({
-  opacity = 1,
-  zoomLevel,
-  zoomMaxLevel,
-  zoomIn,
-  zoomOut,
-  resetZoom,
+const ZoomControl = ({
+  step = 10,
+  value = 50,
+  onChange,
+  max: max2 = 100,
+  min: min2 = 0,
   label = "Zoom",
+  opacity = 1,
   slotProps = {}
 }) => {
-  const isMinZoom = zoomLevel === 0;
-  const isMaxZoom = zoomLevel === zoomMaxLevel;
-  return /* @__PURE__ */ jsxRuntime.jsxs(Box, { sx: containerStyle({ opacity }), ...slotProps.boxStyle, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(IconButton, { onClick: zoomOut, disabled: isMinZoom, sx: iconButtonStyle, children: /* @__PURE__ */ jsxRuntime.jsx(RemoveRoundedIcon, { sx: iconStyle({ disabled: isMinZoom }) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(Typography, { onClick: resetZoom, sx: labelStyle, component: "button", children: label }),
-    /* @__PURE__ */ jsxRuntime.jsx(IconButton, { onClick: zoomIn, disabled: isMaxZoom, sx: iconButtonStyle, children: /* @__PURE__ */ jsxRuntime.jsx(AddRoundedIcon, { sx: iconStyle({ disabled: isMaxZoom }) }) })
+  const isMinZoom = value === min2;
+  const isMaxZoom = value === max2;
+  const initialValue = React.useRef(value);
+  const handleDecrease = () => onChange?.(Math.max(value - step, min2));
+  const handleIncrease = () => onChange?.(Math.min(value + step, max2));
+  const handleReset = () => onChange?.(initialValue.current);
+  return /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: containerStyle({ opacity }), ...slotProps.root, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      material.IconButton,
+      {
+        onClick: handleDecrease,
+        disabled: isMinZoom,
+        sx: iconButtonStyle,
+        children: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.RemoveRounded, { sx: iconStyle({ disabled: isMinZoom }) })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { onClick: handleReset, sx: labelStyle, component: "button", children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      material.IconButton,
+      {
+        onClick: handleIncrease,
+        disabled: isMaxZoom,
+        sx: iconButtonStyle,
+        children: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.AddRounded, { sx: iconStyle({ disabled: isMaxZoom }) })
+      }
+    )
   ] });
 };
 Object.defineProperty(exports, "css", {
@@ -63841,7 +63857,7 @@ exports.Tooltip = Tooltip;
 exports.TreeView = TreeView;
 exports.Typography = Typography;
 exports.Zoom = Zoom;
-exports.ZoomComponent = ZoomComponent;
+exports.ZoomControl = ZoomControl;
 exports.accordionActionsClasses = accordionActionsClasses;
 exports.accordionClasses = accordionClasses;
 exports.accordionDetailsClasses = accordionDetailsClasses;

package/dist/index.d.ts

@@ -12,6 +12,7 @@ import { BackdropProps } 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/Box';
+import { BoxProps as BoxProps_2 } from '@mui/material';
 import { default as Breadcrumbs } from '@mui/material/Breadcrumbs';
 import { default as ButtonGroup } from '@mui/material/ButtonGroup';
 import { ButtonProps } from '@mui/material/Button';
@@ -652,18 +653,18 @@ export { useMediaQuery }
 
 export { Zoom }
 
-export declare const ZoomComponent: FC<ZoomComponentProps>;
+export declare const ZoomControl: FC<ZoomControlProps>;
 
-declare interface ZoomComponentProps {
-    opacity?: number;
-    zoomLevel: number;
-    zoomMaxLevel: number;
-    zoomIn: () => void;
-    zoomOut: () => void;
-    resetZoom: () => void;
+declare interface ZoomControlProps {
+    step?: number;
+    value: number;
+    onChange: (value: number) => void;
+    max?: number;
+    min?: number;
     label?: string;
+    opacity?: number;
     slotProps?: {
-        boxStyle?: BoxProps;
+        root?: BoxProps_2;
     };
 }
 

package/dist/index.es.js

@@ -9,6 +9,8 @@ import ReactDOM__default from "react-dom";
 import { CirclePicker } from "react-color";
 import dayjs from "dayjs";
 import { useDropzone } from "react-dropzone";
+import { RemoveRounded, AddRounded } from "@mui/icons-material";
+import { Box as Box$1, IconButton as IconButton$1, Typography as Typography$1 } from "@mui/material";
 function getDefaultExportFromCjs(x) {
   return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
 }
@@ -63614,12 +63616,6 @@ const TreeView = ({
     }
   ) });
 };
-const AddRoundedIcon = createSvgIcon(/* @__PURE__ */ jsx("path", {
-  d: "M18 13h-5v5c0 .55-.45 1-1 1s-1-.45-1-1v-5H6c-.55 0-1-.45-1-1s.45-1 1-1h5V6c0-.55.45-1 1-1s1 .45 1 1v5h5c.55 0 1 .45 1 1s-.45 1-1 1"
-}), "AddRounded");
-const RemoveRoundedIcon = createSvgIcon(/* @__PURE__ */ jsx("path", {
-  d: "M18 13H6c-.55 0-1-.45-1-1s.45-1 1-1h12c.55 0 1 .45 1 1s-.45 1-1 1"
-}), "RemoveRounded");
 const GREY = "rgba(238, 238, 238, 0.75)";
 const LIGHT_GREY = "#D6D6D6";
 const WHITE = "#FFFFFF";
@@ -63669,22 +63665,42 @@ const labelStyle = {
     opacity: 0.8
   }
 };
-const ZoomComponent = ({
-  opacity = 1,
-  zoomLevel,
-  zoomMaxLevel,
-  zoomIn,
-  zoomOut,
-  resetZoom,
+const ZoomControl = ({
+  step = 10,
+  value = 50,
+  onChange,
+  max: max2 = 100,
+  min: min2 = 0,
   label = "Zoom",
+  opacity = 1,
   slotProps = {}
 }) => {
-  const isMinZoom = zoomLevel === 0;
-  const isMaxZoom = zoomLevel === zoomMaxLevel;
-  return /* @__PURE__ */ jsxs(Box, { sx: containerStyle({ opacity }), ...slotProps.boxStyle, children: [
-    /* @__PURE__ */ jsx(IconButton, { onClick: zoomOut, disabled: isMinZoom, sx: iconButtonStyle, children: /* @__PURE__ */ jsx(RemoveRoundedIcon, { sx: iconStyle({ disabled: isMinZoom }) }) }),
-    /* @__PURE__ */ jsx(Typography, { onClick: resetZoom, sx: labelStyle, component: "button", children: label }),
-    /* @__PURE__ */ jsx(IconButton, { onClick: zoomIn, disabled: isMaxZoom, sx: iconButtonStyle, children: /* @__PURE__ */ jsx(AddRoundedIcon, { sx: iconStyle({ disabled: isMaxZoom }) }) })
+  const isMinZoom = value === min2;
+  const isMaxZoom = value === max2;
+  const initialValue = useRef(value);
+  const handleDecrease = () => onChange?.(Math.max(value - step, min2));
+  const handleIncrease = () => onChange?.(Math.min(value + step, max2));
+  const handleReset = () => onChange?.(initialValue.current);
+  return /* @__PURE__ */ jsxs(Box$1, { sx: containerStyle({ opacity }), ...slotProps.root, children: [
+    /* @__PURE__ */ jsx(
+      IconButton$1,
+      {
+        onClick: handleDecrease,
+        disabled: isMinZoom,
+        sx: iconButtonStyle,
+        children: /* @__PURE__ */ jsx(RemoveRounded, { sx: iconStyle({ disabled: isMinZoom }) })
+      }
+    ),
+    /* @__PURE__ */ jsx(Typography$1, { onClick: handleReset, sx: labelStyle, component: "button", children: label }),
+    /* @__PURE__ */ jsx(
+      IconButton$1,
+      {
+        onClick: handleIncrease,
+        disabled: isMaxZoom,
+        sx: iconButtonStyle,
+        children: /* @__PURE__ */ jsx(AddRounded, { sx: iconStyle({ disabled: isMaxZoom }) })
+      }
+    )
   ] });
 };
 export {
@@ -63817,7 +63833,7 @@ export {
   TreeView,
   Typography,
   Zoom,
-  ZoomComponent,
+  ZoomControl,
   accordionActionsClasses,
   accordionClasses,
   accordionDetailsClasses,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cgi-learning-hub/ui",
-  "version": "1.12.0-dev.1771407294",
+  "version": "1.12.0-dev.1771430232",
   "description": "React component library for Hub's design system, built on Material UI with custom and extended components.",
   "keywords": [
     "cgi-learning-hub",