orcs-design-system 3.3.60 → 3.3.61

package/es/components/ColorPicker/ColorPicker.stories.js

@@ -17,8 +17,9 @@ export default {
     }
   }
 };
+const initialColor = "linear-gradient(90deg,rgb(56, 136, 255) 0%,rgb(148, 81, 255) 100%)";
 export const Default = () => {
-  const [color, setColor] = useState("linear-gradient(90deg,rgb(56, 136, 255) 0%,rgb(148, 81, 255) 100%)");
+  const [color, setColor] = useState(initialColor);
   return /*#__PURE__*/_jsx(Box, {
     p: "l",
     position: "relative",
@@ -63,8 +64,72 @@ export const Default = () => {
     })
   });
 };
+export const Controlled = () => {
+  const [color, setColor] = useState(initialColor);
+  const onSave = color => {
+    setColor(color);
+  };
+  const onClose = () => {
+    setColor(initialColor);
+  };
+  const onReset = () => {
+    setColor(initialColor);
+    return initialColor;
+  };
+  return /*#__PURE__*/_jsx(Box, {
+    p: "l",
+    position: "relative",
+    children: /*#__PURE__*/_jsx(Flex, {
+      width: "100%",
+      height: "150px",
+      justifyContent: "flex-end",
+      alignItems: "flex-start",
+      background: color,
+      borderRadius: "2",
+      p: "r",
+      children: /*#__PURE__*/_jsx(ColorPicker, {
+        value: color,
+        onChange: setColor,
+        position: "bottom-start",
+        onSave: onSave,
+        onReset: onReset,
+        onClose: onClose,
+        children: _ref2 => {
+          let {
+            toggleColorPicker
+          } = _ref2;
+          return /*#__PURE__*/_jsx(Popover, {
+            direction: "left",
+            height: "35px",
+            width: "fit-content",
+            text: "Change background colour",
+            ml: "auto",
+            children: /*#__PURE__*/_jsx(Button, {
+              height: "35px",
+              width: "35px",
+              borderRadius: "35px",
+              borderColor: "white30",
+              bg: "white30",
+              ariaLabel: "Change background colour",
+              onClick: toggleColorPicker,
+              children: /*#__PURE__*/_jsx(Icon, {
+                icon: ["fas", "palette"],
+                color: "white"
+              })
+            })
+          });
+        }
+      })
+    })
+  });
+};
 Default.__docgenInfo = {
   "description": "",
   "methods": [],
   "displayName": "Default"
+};
+Controlled.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "Controlled"
 };

package/es/components/ColorPicker/index.js

@@ -1,10 +1,12 @@
-import React, { useState, useMemo } from "react";
+import React, { useState, useMemo, useCallback } from "react";
 import PropTypes from "prop-types";
 import Box from "../Box";
 import ColorPickerLib from "react-best-gradient-color-picker";
 import { FloatingPortal } from "@floating-ui/react";
 import { getFloatingUiRootElement } from "../../utils/floatingUiHelpers";
 import useActionMenu from "../ActionsMenu/useActionMenu";
+import Flex from "../Flex";
+import Button from "../Button";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ColorPicker = _ref => {
   let {
@@ -32,10 +34,16 @@ const ColorPicker = _ref => {
     hideGradientAngle = false,
     hideGradientStop = false,
     hideGradientControls = false,
+    onSave,
+    onReset,
+    isSaving,
+    isResetting,
     // Spread all other props to the underlying library
     ...colorPickerProps
   } = _ref;
+  const [initialColor, setInitialColor] = useState(value);
   const [isOpen, setIsOpen] = useState(false);
+  const [color, setColor] = useState(value);
   const toggleColorPicker = () => setIsOpen(!isOpen);
   const baseStyles = useMemo(() => ({
     zIndex,
@@ -48,6 +56,33 @@ const ColorPicker = _ref => {
     open: isOpen,
     onOpenChange: setIsOpen
   });
+  const handleColorChange = useCallback(color => {
+    setColor(color);
+    onChange?.(color);
+  }, [onChange]);
+  const onClose = useCallback(() => {
+    setIsOpen(false);
+    onChange?.(initialColor);
+    setColor(initialColor);
+  }, [onChange, initialColor]);
+  const handleSave = useCallback(async () => {
+    await onSave?.(color);
+    setInitialColor(color);
+    setIsOpen(false);
+  }, [onSave, color]);
+  const handleReset = useCallback(async () => {
+    const newColor = await onReset?.(initialColor);
+    if (!newColor) {
+      throw new Error("onReset must return a new color");
+    }
+    setIsOpen(false);
+    setInitialColor(newColor);
+    setColor(newColor);
+  }, [onReset, initialColor]);
+  const isDisabled = useMemo(() => isSaving || isResetting, [isSaving, isResetting]);
+  const isChanged = useMemo(() => {
+    return color !== initialColor;
+  }, [color, initialColor]);
   return /*#__PURE__*/_jsxs(Box, {
     ref: actionMenu.refs.setReference,
     ...actionMenu.getReferenceProps(),
@@ -57,14 +92,14 @@ const ColorPicker = _ref => {
     }) : children, isOpen && /*#__PURE__*/_jsx(FloatingPortal, {
       root: getFloatingUiRootElement(actionMenu.refs.reference),
       preserveTabOrder: true,
-      children: /*#__PURE__*/_jsx(Box, {
+      children: /*#__PURE__*/_jsxs(Box, {
         ref: actionMenu.refs.setFloating,
         style: actionMenu.floatingStyles,
         ...baseStyles,
         ...actionMenu.getFloatingProps(),
-        children: /*#__PURE__*/_jsx(ColorPickerLib, {
-          value: value,
-          onChange: onChange,
+        children: [/*#__PURE__*/_jsx(ColorPickerLib, {
+          value: color,
+          onChange: handleColorChange,
           width: width,
           height: height,
           hidePresets: hidePresets,
@@ -81,7 +116,27 @@ const ColorPicker = _ref => {
           hideGradientStop: hideGradientStop,
           hideGradientControls: hideGradientControls,
           ...colorPickerProps
-        })
+        }), onSave && /*#__PURE__*/_jsxs(Flex, {
+          pt: "r",
+          gap: "s",
+          children: [/*#__PURE__*/_jsx(Button, {
+            onClick: handleSave,
+            disabled: isDisabled || !isChanged,
+            variant: "success",
+            children: "Save"
+          }), onReset && /*#__PURE__*/_jsx(Button, {
+            ml: "auto",
+            onClick: handleReset,
+            disabled: isDisabled,
+            variant: "ghost",
+            children: "Reset"
+          }), /*#__PURE__*/_jsx(Button, {
+            ml: !onReset && "auto",
+            onClick: onClose,
+            disabled: isDisabled,
+            children: "Close"
+          })]
+        })]
       })
     })]
   });
@@ -110,7 +165,11 @@ ColorPicker.propTypes = {
   hideGradientType: PropTypes.bool,
   hideGradientAngle: PropTypes.bool,
   hideGradientStop: PropTypes.bool,
-  hideGradientControls: PropTypes.bool
+  hideGradientControls: PropTypes.bool,
+  onSave: PropTypes.func,
+  onReset: PropTypes.func,
+  isSaving: PropTypes.bool,
+  isResetting: PropTypes.bool
   // Note: We don't need to define PropTypes for the spread props
   // as they'll be passed directly to the underlying library
 };
@@ -389,6 +448,34 @@ ColorPicker.__docgenInfo = {
         }]
       },
       "required": true
+    },
+    "onSave": {
+      "description": "",
+      "type": {
+        "name": "func"
+      },
+      "required": false
+    },
+    "onReset": {
+      "description": "",
+      "type": {
+        "name": "func"
+      },
+      "required": false
+    },
+    "isSaving": {
+      "description": "",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
+    "isResetting": {
+      "description": "",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
     }
   }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orcs-design-system",
-  "version": "3.3.60",
+  "version": "3.3.61",
   "engines": {
     "node": "20.12.2"
   },