orcs-design-system 3.3.31 → 3.3.33

package/es/components/Avatar/index.js

@@ -285,6 +285,7 @@ const HeaderAvatarWrapper = styled("div").withConfig({
     justifyContent: "center",
     width: $size,
     height: $size,
+    transition: "width 200ms ease-in-out, height 200ms ease-in-out",
     boxShadow: "0px 3px 6px rgba(0,0,0,0.15)",
     borderRadius: $shape === "circle" || !$shape ? "50%" : $shape === "square" ? "6px" : "0",
     background: "transparent"
@@ -302,6 +303,7 @@ const HeaderAvatarBorder = styled("div").withConfig({
   return {
     width: $size,
     height: $size,
+    transition: "width 200ms ease-in-out, height 200ms ease-in-out, border-width 200ms ease-in-out",
     border: $sizing === "large" ? "6px solid #fff" : "4px solid #fff",
     borderRadius: $shape === "circle" || !$shape ? "50%" : $shape === "square" ? "6px" : "0",
     overflow: "hidden",
@@ -322,6 +324,7 @@ const HeaderAvatarImage = styled("img").withConfig({
   return {
     width: $size,
     height: $size,
+    transition: "width 200ms ease-in-out, height 200ms ease-in-out",
     objectFit: "cover",
     objectPosition: "center",
     objectRepeat: "no-repeat",
@@ -340,6 +343,7 @@ const HeaderAvatarShape = styled("div").withConfig({
   return {
     width: $size,
     height: $size,
+    transition: "width 200ms ease-in-out, height 200ms ease-in-out",
     display: "flex",
     alignItems: "center",
     justifyContent: "center",

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

@@ -0,0 +1,70 @@
+import React, { useState } from "react";
+import Box from "../Box";
+import Button from "../Button";
+import Popover from "../Popover";
+import Icon from "../Icon";
+import Flex from "../Flex";
+import ColorPicker from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default {
+  title: "Components/ColorPicker",
+  component: ColorPicker,
+  parameters: {
+    docs: {
+      description: {
+        component: "A reusable color picker component that can be triggered by any element passed as children."
+      }
+    }
+  }
+};
+export const Default = () => {
+  const [color, setColor] = useState("linear-gradient(90deg,rgb(56, 136, 255) 0%,rgb(148, 81, 255) 100%)");
+  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",
+        children: _ref => {
+          let {
+            toggleColorPicker
+          } = _ref;
+          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"
+};

package/es/components/ColorPicker/index.js

@@ -0,0 +1,471 @@
+import React, { useState, useEffect, useRef } from "react";
+import PropTypes from "prop-types";
+import Box from "../Box";
+import ColorPickerLib from "react-best-gradient-color-picker";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const ColorPicker = _ref => {
+  let {
+    value,
+    onChange,
+    children,
+    position = "bottom-start",
+    zIndex = 20,
+    bg = "#202020",
+    p = "s",
+    borderRadius = "2",
+    // Set defaults for commonly used library props
+    width = 250,
+    height = 250,
+    hidePresets = true,
+    hideInputs = false,
+    hideControls = false,
+    hideOpacity = true,
+    hideEyeDrop = true,
+    hideAdvancedSliders = true,
+    hideColorGuide = true,
+    hideInputType = true,
+    hideColorTypeBtns = false,
+    hideGradientType = false,
+    hideGradientAngle = false,
+    hideGradientStop = false,
+    hideGradientControls = false,
+    // Spread all other props to the underlying library
+    ...colorPickerProps
+  } = _ref;
+  const [isOpen, setIsOpen] = useState(false);
+  const colorPickerRef = useRef(null);
+  const triggerRef = useRef(null);
+
+  // Handle clicks outside to close
+  useEffect(() => {
+    function handleClickOutside(event) {
+      if (colorPickerRef.current && !colorPickerRef.current.contains(event.target) && triggerRef.current && !triggerRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    }
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => {
+        document.removeEventListener("mousedown", handleClickOutside);
+      };
+    }
+    return undefined;
+  }, [isOpen]);
+  const toggleColorPicker = () => setIsOpen(!isOpen);
+
+  // Calculate position based on position prop
+  const getPositionStyles = () => {
+    const baseStyles = {
+      position: "absolute",
+      zIndex,
+      bg,
+      p,
+      borderRadius
+    };
+    switch (position) {
+      case "top-start":
+        return {
+          ...baseStyles,
+          bottom: "100%",
+          right: "0",
+          mb: "s"
+        };
+      case "top-end":
+        return {
+          ...baseStyles,
+          bottom: "100%",
+          left: "0",
+          mb: "s"
+        };
+      case "bottom-start":
+        return {
+          ...baseStyles,
+          top: "100%",
+          right: "0",
+          mt: "s"
+        };
+      case "bottom-end":
+        return {
+          ...baseStyles,
+          top: "100%",
+          left: "0",
+          mt: "s"
+        };
+      case "left-start":
+        return {
+          ...baseStyles,
+          right: "100%",
+          top: "0",
+          mr: "s"
+        };
+      case "left-end":
+        return {
+          ...baseStyles,
+          right: "100%",
+          bottom: "0",
+          mr: "s"
+        };
+      case "right-start":
+        return {
+          ...baseStyles,
+          left: "100%",
+          top: "0",
+          ml: "s"
+        };
+      case "right-end":
+        return {
+          ...baseStyles,
+          left: "100%",
+          bottom: "0",
+          ml: "s"
+        };
+      default:
+        return {
+          ...baseStyles,
+          top: "100%",
+          right: "0",
+          mt: "s"
+        };
+    }
+  };
+  return /*#__PURE__*/_jsxs(Box, {
+    position: "relative",
+    children: [/*#__PURE__*/_jsx(Box, {
+      ref: triggerRef,
+      children: typeof children === "function" ? children({
+        isOpen,
+        toggleColorPicker
+      }) : children
+    }), isOpen && /*#__PURE__*/_jsx(Box, {
+      ref: colorPickerRef,
+      ...getPositionStyles(),
+      children: /*#__PURE__*/_jsx(ColorPickerLib, {
+        value: value,
+        onChange: onChange,
+        width: width,
+        height: height,
+        hidePresets: hidePresets,
+        hideInputs: hideInputs,
+        hideControls: hideControls,
+        hideOpacity: hideOpacity,
+        hideEyeDrop: hideEyeDrop,
+        hideAdvancedSliders: hideAdvancedSliders,
+        hideColorGuide: hideColorGuide,
+        hideInputType: hideInputType,
+        hideColorTypeBtns: hideColorTypeBtns,
+        hideGradientType: hideGradientType,
+        hideGradientAngle: hideGradientAngle,
+        hideGradientStop: hideGradientStop,
+        hideGradientControls: hideGradientControls,
+        ...colorPickerProps
+      })
+    })]
+  });
+};
+ColorPicker.propTypes = {
+  value: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
+  position: PropTypes.oneOf(["top-start", "top-end", "bottom-start", "bottom-end", "left-start", "left-end", "right-start", "right-end"]),
+  zIndex: PropTypes.number,
+  bg: PropTypes.string,
+  p: PropTypes.string,
+  borderRadius: PropTypes.string,
+  // Default props for the underlying library
+  width: PropTypes.number,
+  height: PropTypes.number,
+  hidePresets: PropTypes.bool,
+  hideInputs: PropTypes.bool,
+  hideControls: PropTypes.bool,
+  hideOpacity: PropTypes.bool,
+  hideEyeDrop: PropTypes.bool,
+  hideAdvancedSliders: PropTypes.bool,
+  hideColorGuide: PropTypes.bool,
+  hideInputType: PropTypes.bool,
+  hideColorTypeBtns: PropTypes.bool,
+  hideGradientType: PropTypes.bool,
+  hideGradientAngle: PropTypes.bool,
+  hideGradientStop: PropTypes.bool,
+  hideGradientControls: PropTypes.bool
+  // Note: We don't need to define PropTypes for the spread props
+  // as they'll be passed directly to the underlying library
+};
+ColorPicker.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "ColorPicker",
+  "props": {
+    "position": {
+      "defaultValue": {
+        "value": "\"bottom-start\"",
+        "computed": false
+      },
+      "description": "",
+      "type": {
+        "name": "enum",
+        "value": [{
+          "value": "\"top-start\"",
+          "computed": false
+        }, {
+          "value": "\"top-end\"",
+          "computed": false
+        }, {
+          "value": "\"bottom-start\"",
+          "computed": false
+        }, {
+          "value": "\"bottom-end\"",
+          "computed": false
+        }, {
+          "value": "\"left-start\"",
+          "computed": false
+        }, {
+          "value": "\"left-end\"",
+          "computed": false
+        }, {
+          "value": "\"right-start\"",
+          "computed": false
+        }, {
+          "value": "\"right-end\"",
+          "computed": false
+        }]
+      },
+      "required": false
+    },
+    "zIndex": {
+      "defaultValue": {
+        "value": "20",
+        "computed": false
+      },
+      "description": "",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    },
+    "bg": {
+      "defaultValue": {
+        "value": "\"#202020\"",
+        "computed": false
+      },
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "p": {
+      "defaultValue": {
+        "value": "\"s\"",
+        "computed": false
+      },
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "borderRadius": {
+      "defaultValue": {
+        "value": "\"2\"",
+        "computed": false
+      },
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "width": {
+      "defaultValue": {
+        "value": "250",
+        "computed": false
+      },
+      "description": "",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    },
+    "height": {
+      "defaultValue": {
+        "value": "250",
+        "computed": false
+      },
+      "description": "",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    },
+    "hidePresets": {
+      "defaultValue": {
+        "value": "true",
+        "computed": false
+      },
+      "description": "",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
+    "hideInputs": {
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      },
+      "description": "",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
+    "hideControls": {
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      },
+      "description": "",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
+    "hideOpacity": {
+      "defaultValue": {
+        "value": "true",
+        "computed": false
+      },
+      "description": "",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
+    "hideEyeDrop": {
+      "defaultValue": {
+        "value": "true",
+        "computed": false
+      },
+      "description": "",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
+    "hideAdvancedSliders": {
+      "defaultValue": {
+        "value": "true",
+        "computed": false
+      },
+      "description": "",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
+    "hideColorGuide": {
+      "defaultValue": {
+        "value": "true",
+        "computed": false
+      },
+      "description": "",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
+    "hideInputType": {
+      "defaultValue": {
+        "value": "true",
+        "computed": false
+      },
+      "description": "",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
+    "hideColorTypeBtns": {
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      },
+      "description": "",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
+    "hideGradientType": {
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      },
+      "description": "",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
+    "hideGradientAngle": {
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      },
+      "description": "",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
+    "hideGradientStop": {
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      },
+      "description": "",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
+    "hideGradientControls": {
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      },
+      "description": "",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
+    "value": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": true
+    },
+    "onChange": {
+      "description": "",
+      "type": {
+        "name": "func"
+      },
+      "required": true
+    },
+    "children": {
+      "description": "",
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "node"
+        }, {
+          "name": "func"
+        }]
+      },
+      "required": true
+    }
+  }
+};
+export default ColorPicker;

package/es/components/Modal/index.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import ReactDOM from "react-dom";
 import PropTypes from "prop-types";
 import styled, { keyframes, ThemeProvider } from "styled-components";
@@ -72,6 +72,8 @@ const Modal = _ref => {
     ...restProps
   } = _ref;
   const [lastActiveElement, setLastActiveElement] = useState(null);
+  const [isSelectingText, setIsSelectingText] = useState(false);
+  const isSelectingTextRef = useRef(false);
   const ariaLabel = useMemo(() => {
     if (restProps.ariaLabel) {
       return restProps.ariaLabel;
@@ -101,28 +103,51 @@ const Modal = _ref => {
       focusLastActiveElement();
     }
   }, [visible, focusLastActiveElement, lastActiveElement]);
+  useEffect(() => {
+    isSelectingTextRef.current = isSelectingText;
+  }, [isSelectingText]);
   useEffect(() => {
     if (!visible) return;
 
     /* Adding onClick handler on the Overlay does not work.
      * So we add a global listener and check if the element clicked is the
-     * overlay vida overlayID.
+     * overlay via overlayID.
      */
-    const handler = e => {
+    const handleMouseDown = e => {
+      // Check if the user is starting to select text
+      if (e.target.closest(`#${modalID}`)) {
+        setIsSelectingText(true);
+      }
+    };
+    const handleMouseUp = () => {
+      // Reset text selection state after a short delay
+      setTimeout(() => {
+        setIsSelectingText(false);
+      }, 100);
+    };
+    const handleClick = e => {
+      if (e.target.id === overlayID && !isSelectingTextRef.current) {
+        onClose();
+      }
+    };
+    const handleTouchStart = e => {
       if (e.target.id === overlayID) {
         onClose();
       }
     };
-    const eventTypes = ["touchstart", "click"];
-    eventTypes.map(type => {
-      window.addEventListener(type, handler, true);
-    });
+
+    // Add event listeners
+    window.addEventListener("mousedown", handleMouseDown, true);
+    window.addEventListener("mouseup", handleMouseUp, true);
+    window.addEventListener("click", handleClick, true);
+    window.addEventListener("touchstart", handleTouchStart, true);
     return () => {
-      eventTypes.map(type => {
-        window.removeEventListener(type, handler, true);
-      });
+      window.removeEventListener("mousedown", handleMouseDown, true);
+      window.removeEventListener("mouseup", handleMouseUp, true);
+      window.removeEventListener("click", handleClick, true);
+      window.removeEventListener("touchstart", handleTouchStart, true);
     };
-  }, [visible, onClose, overlayID]);
+  }, [visible, onClose, overlayID, modalID]);
   if (!visible) return null;
   const component = /*#__PURE__*/_jsx(Overlay, {
     alignItems: "center",

package/es/components.test.js

@@ -17,6 +17,7 @@ test("all components exported", () => {
       "Card",
       "Checkbox",
       "Code",
+      "ColorPicker",
       "DatePicker",
       "Divider",
       "Expandable",

package/es/index.js

@@ -15,6 +15,7 @@ export { default as Breadcrumbs } from "./components/Breadcrumbs";
 export { default as Button, ButtonLink, VARIANT_COLORS } from "./components/Button";
 export { ButtonGroupContainer, ButtonGroupItem } from "./components/ButtonGroup";
 export { default as Card } from "./components/Card";
+export { default as ColorPicker } from "./components/ColorPicker";
 export { default as Checkbox } from "./components/Checkbox";
 export { default as DatePicker } from "./components/DatePicker";
 export { default as Divider } from "./components/Divider";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orcs-design-system",
-  "version": "3.3.31",
+  "version": "3.3.33",
   "engines": {
     "node": "20.12.2"
   },
@@ -60,6 +60,7 @@
     "prop-types": "^15.6.2",
     "react-app-polyfill": "^2.0.0",
     "react-arborist": "^3.4.0",
+    "react-best-gradient-color-picker": "^3.0.14",
     "react-cool-onclickoutside": "^1.5.9",
     "react-dates": "^21.8.0",
     "react-intersection-observer": "^9.4.3",