@festo-ui/react 9.0.0-dev.681 → 9.0.0-dev.684

package/lib/forms/color-picker/ColorPicker.js

@@ -1,545 +0,0 @@
-/* eslint-disable jsx-a11y/no-static-element-interactions */
-/* eslint-disable jsx-a11y/click-events-have-key-events */
-
-import { useRef, useCallback, useEffect, useState } from "react";
-import Draggable from "react-draggable";
-import classNames from "classnames";
-import { IconCheckSmall, IconCollapse } from "@festo-ui/react-icons";
-import ColorHelper from "./ColorHelper.js";
-import useId from "../../helper/useId.js";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-export const PREDEFINED_COLORS = ["#0091dc", "#333333", "#ffffff", "#f0f2f3", "#e2e5e8", "#d3d8dd", "#b6bec6", "#80ca3d", "#ffd600", "#ff9600", "#d50000"];
-function ColorPicker(_ref) {
-  let {
-    palette = PREDEFINED_COLORS,
-    useAlpha = false,
-    alpha = 100,
-    paletteOnly,
-    color = "#FFFFFF",
-    onChange,
-    onAlphaChange,
-    className
-  } = _ref;
-  const baseSize = 184;
-  const initialRgb = ColorHelper.hexToRgb(color);
-  const defaultHsv = {
-    h: 0,
-    s: 0,
-    v: 1
-  };
-  const initialHsv = initialRgb ? ColorHelper.rgbToHsv(initialRgb) || defaultHsv : defaultHsv;
-  const [hsv, setHsv] = useState(initialHsv);
-  const [innerColor, setInnerColor] = useState(color);
-  const [redInput, setRedInput] = useState(initialRgb?.r || 255);
-  const [greenInput, setGreenInput] = useState(initialRgb?.g || 255);
-  const [blueInput, setBlueInput] = useState(initialRgb?.b || 255);
-  const [hexInputColor, setHexInputColor] = useState(color);
-  const [inputType, setInputType] = useState("RGB");
-  const [selectOpen, setSelectOpen] = useState(false);
-  const [innerAlpha, setInnerAlpha] = useState(alpha);
-  const [changeColor, setChangeColor] = useState(true);
-  const redId = useId();
-  const greenId = useId();
-  const blueId = useId();
-  const hexId = useId();
-  const alphaId = useId();
-  const gradientKnobRef = useRef(null);
-  const hueKnobRef = useRef(null);
-  const alphaKnobRef = useRef(null);
-  function limitAlpha() {
-    if (innerAlpha > 100) {
-      return 100;
-    }
-    if (innerAlpha < 0) {
-      return 0;
-    }
-    return innerAlpha;
-  }
-  const hueKnobOffset = hsv.h * baseSize - 14 - baseSize;
-  const saturationKnobOffset = hsv.s * baseSize;
-  const valueKnobOffset = (1 - hsv.v) * baseSize;
-  const alphaKnobOffset = (100 - limitAlpha()) / 100 * baseSize;
-  function getSaturationGradient() {
-    return `linear-gradient(to right, white,  hsl(${hsv.h * 360}, 100%, 50%) )`;
-  }
-  function updateInputs(hexColor) {
-    setHexInputColor(hexColor);
-    const rgb = ColorHelper.hexToRgb(hexColor);
-    if (rgb) {
-      setRedInput(rgb.r);
-      setGreenInput(rgb.g);
-      setBlueInput(rgb.b);
-    }
-  }
-  useEffect(() => {
-    if (onChange) {
-      onChange(innerColor);
-    }
-  }, [onChange, innerColor]);
-  useEffect(() => {
-    if (onAlphaChange && innerAlpha) {
-      onAlphaChange(innerAlpha);
-    }
-  }, [onAlphaChange, innerAlpha]);
-  const updateColorHsv = useCallback((_hsv, _changeColor) => {
-    const rgb = ColorHelper.hsvToRgb(_hsv);
-    const hex = ColorHelper.rgbToHex(rgb);
-    if (_changeColor) {
-      setInnerColor(hex);
-    }
-    updateInputs(hex);
-  }, []);
-  useEffect(() => {
-    updateColorHsv(hsv, changeColor);
-  }, [updateColorHsv, hsv, changeColor]);
-  function updateGradient(x, y) {
-    setChangeColor(true);
-    setHsv(prevHsv => ({
-      ...prevHsv,
-      s: Math.floor(x) / baseSize,
-      v: (baseSize - y) / baseSize
-    }));
-  }
-  function onGradientDrag(e, data) {
-    e.preventDefault();
-    updateGradient(data.x, data.y);
-  }
-  function updateHue(y) {
-    const newHue = y / baseSize;
-    setChangeColor(true);
-    setHsv(prevHsv => ({
-      ...prevHsv,
-      h: newHue
-    }));
-  }
-  function onHueDrag(e, data) {
-    e.preventDefault();
-    updateHue(data.y + 14 + baseSize);
-  }
-  function updateAlpha(y) {
-    setInnerAlpha(100 - Math.round(y / baseSize * 100));
-  }
-  function onAlphaDrag(e, data) {
-    e.preventDefault();
-    updateAlpha(data.y);
-  }
-  const updateColorRgb = newColor => {
-    const currentColor = newColor || "#FFFFFF";
-    updateInputs(currentColor);
-    const rgb = ColorHelper.hexToRgb(currentColor);
-    setChangeColor(false);
-    if (rgb) {
-      const newHsv = ColorHelper.rgbToHsv(rgb);
-      if (newHsv) {
-        setHsv(newHsv);
-      }
-    }
-    setInnerColor(newColor);
-  };
-  const isHexColor = _color => /^#[0-9A-F]{6}$/i.test(_color);
-  function onHexInput(event) {
-    const newHexInputColor = event.target.value;
-    setHexInputColor(newHexInputColor.toUpperCase());
-    if (isHexColor(newHexInputColor)) {
-      updateColorRgb(newHexInputColor.toUpperCase());
-    }
-  }
-  function onHexBlur() {
-    if (!isHexColor(hexInputColor) && innerColor) {
-      setHexInputColor(innerColor);
-      updateColorRgb(innerColor);
-    }
-  }
-  function onRgbBlur(channel) {
-    let currentInput = "";
-    switch (channel) {
-      case "r":
-        currentInput = redInput;
-        break;
-      case "g":
-        currentInput = greenInput;
-        break;
-      case "b":
-        currentInput = blueInput;
-        break;
-      default:
-      // no other value possible
-    }
-    if (typeof currentInput !== "number" || typeof currentInput === "number" && currentInput > 255 && currentInput < 0) {
-      const rgb = ColorHelper.hexToRgb(innerColor || "#FFFFFF");
-      if (rgb) {
-        const newHexColor = ColorHelper.rgbToHex(rgb);
-        updateInputs(newHexColor);
-      }
-    }
-  }
-  function onRgbInput(_value, channel) {
-    const numberValue = Number.parseInt(_value, 10);
-    switch (channel) {
-      case "r":
-        setRedInput(_value);
-        break;
-      case "g":
-        setGreenInput(_value);
-        break;
-      case "b":
-        setBlueInput(_value);
-        break;
-      default:
-      // no other value possible
-    }
-    if (numberValue <= 255 && numberValue >= 0) {
-      const rgb = ColorHelper.hexToRgb(innerColor || "#FFFFFF");
-      if (rgb) {
-        rgb[channel] = numberValue;
-        const newHexColor = ColorHelper.rgbToHex(rgb);
-        setInnerColor(newHexColor);
-        updateColorRgb(newHexColor);
-      }
-    }
-  }
-  function onAlphaInput(_alpha) {
-    const numberValue = Number.parseInt(_alpha, 10);
-    setInnerAlpha(numberValue);
-  }
-  function onAlphaBlur() {
-    setInnerAlpha(limitAlpha());
-  }
-  const onChangeType = type => {
-    setInputType(type);
-    setSelectOpen(false);
-  };
-  function onRemoveColor() {
-    if (useAlpha) {
-      setInnerAlpha(0);
-    } else {
-      updateColorRgb();
-    }
-  }
-  return /*#__PURE__*/_jsxs("div", {
-    className: classNames("fwe-color-picker", {
-      "fwe-alpha-active": useAlpha
-    }, className),
-    children: [!paletteOnly && /*#__PURE__*/_jsxs("div", {
-      className: "fwe-d-flex",
-      children: [/*#__PURE__*/_jsxs("div", {
-        className: "fwe-gradient-picker",
-        children: [/*#__PURE__*/_jsx("div", {
-          className: "fwe-saturation-gradient",
-          style: {
-            backgroundImage: getSaturationGradient()
-          }
-        }), /*#__PURE__*/_jsx("div", {
-          "aria-label": "brightness-gradient",
-          onClick: _ref2 => {
-            let {
-              nativeEvent: {
-                offsetX,
-                offsetY
-              }
-            } = _ref2;
-            return updateGradient(offsetX, offsetY);
-          },
-          className: "fwe-brightness-gradient"
-        }), /*#__PURE__*/_jsx(Draggable, {
-          position: {
-            x: saturationKnobOffset,
-            y: valueKnobOffset
-          },
-          onDrag: (e, data) => onGradientDrag(e, data),
-          bounds: "parent",
-          nodeRef: gradientKnobRef,
-          children: /*#__PURE__*/_jsx("div", {
-            className: "fwe-knob",
-            ref: gradientKnobRef
-          })
-        })]
-      }), /*#__PURE__*/_jsxs("div", {
-        className: "fwe-hue-picker",
-        children: [/*#__PURE__*/_jsx("div", {
-          className: "fwe-picker-background",
-          onClick: _ref3 => {
-            let {
-              nativeEvent: {
-                offsetY
-              }
-            } = _ref3;
-            return updateHue(offsetY);
-          }
-        }), /*#__PURE__*/_jsx(Draggable, {
-          position: {
-            x: 3,
-            y: hueKnobOffset
-          },
-          onDrag: (e, data) => onHueDrag(e, data),
-          bounds: "parent",
-          nodeRef: hueKnobRef,
-          children: /*#__PURE__*/_jsx("div", {
-            className: "fwe-knob",
-            style: {
-              background: `hsl(${hsv.h * 360}, 100%, 50%)`
-            },
-            ref: hueKnobRef
-          })
-        })]
-      }), useAlpha && /*#__PURE__*/_jsxs("div", {
-        className: "fwe-alpha-picker",
-        children: [/*#__PURE__*/_jsxs("svg", {
-          className: "fwe-no-color-pattern",
-          version: "1.1",
-          xmlns: "http://www.w3.org/2000/svg",
-          xmlnsXlink: "http://www.w3.org/1999/xlink",
-          id: "canvas1",
-          width: "8",
-          height: "184",
-          children: [/*#__PURE__*/_jsx("defs", {
-            children: /*#__PURE__*/_jsxs("pattern", {
-              id: "bwsquare2px",
-              width: "4",
-              height: "4",
-              patternUnits: "userSpaceOnUse",
-              children: [/*#__PURE__*/_jsx("rect", {
-                x: "0",
-                y: "0",
-                width: "2",
-                height: "2",
-                stroke: "none",
-                fill: "#ffffff"
-              }), /*#__PURE__*/_jsx("rect", {
-                x: "2",
-                y: "0",
-                width: "2",
-                height: "2",
-                stroke: "none",
-                fill: "#e2e5e8"
-              }), /*#__PURE__*/_jsx("rect", {
-                x: "0",
-                y: "2",
-                width: "2",
-                height: "2",
-                stroke: "none",
-                fill: "#e2e5e8"
-              }), /*#__PURE__*/_jsx("rect", {
-                x: "2",
-                y: "2",
-                width: "2",
-                height: "2",
-                stroke: "none",
-                fill: "#ffffff"
-              })]
-            })
-          }), /*#__PURE__*/_jsx("rect", {
-            x: "0",
-            y: "0",
-            rx: "4",
-            ry: "4",
-            width: "8",
-            height: "184",
-            fill: "url(#bwsquare2px)",
-            strokeWidth: "0"
-          })]
-        }), /*#__PURE__*/_jsx("div", {
-          onClick: _ref4 => {
-            let {
-              nativeEvent: {
-                offsetY
-              }
-            } = _ref4;
-            return updateAlpha(offsetY);
-          },
-          className: "fwe-picker-background",
-          style: {
-            backgroundImage: `linear-gradient( ${innerColor},  transparent)`
-          }
-        }), /*#__PURE__*/_jsx(Draggable, {
-          position: {
-            x: 3,
-            y: alphaKnobOffset
-          },
-          onDrag: (e, data) => onAlphaDrag(e, data),
-          bounds: "parent",
-          nodeRef: alphaKnobRef,
-          children: /*#__PURE__*/_jsx("div", {
-            className: "fwe-knob",
-            ref: alphaKnobRef
-          })
-        })]
-      })]
-    }), !paletteOnly && /*#__PURE__*/_jsxs("div", {
-      className: "fwe-mt-s",
-      children: [/*#__PURE__*/_jsxs("div", {
-        className: "fwe-type-select",
-        children: [/*#__PURE__*/_jsxs("div", {
-          className: "fwe-type-indicator",
-          onClick: () => setSelectOpen(prevOpen => !prevOpen),
-          children: [/*#__PURE__*/_jsx("span", {
-            className: "fwe-input-type",
-            children: inputType
-          }), /*#__PURE__*/_jsx(IconCollapse, {
-            className: "fwe-ml-s"
-          })]
-        }), selectOpen && /*#__PURE__*/_jsxs("div", {
-          className: "fwe-popover",
-          children: [/*#__PURE__*/_jsxs("div", {
-            className: classNames("fwe-type-item", {
-              "fwe-selected": inputType === "HEX"
-            }),
-            onClick: () => onChangeType("HEX"),
-            children: [/*#__PURE__*/_jsx(IconCheckSmall, {}), " HEX"]
-          }), /*#__PURE__*/_jsxs("div", {
-            className: classNames("fwe-type-item", {
-              "fwe-selected": inputType === "RGB"
-            }),
-            onClick: () => onChangeType("RGB"),
-            children: [/*#__PURE__*/_jsx(IconCheckSmall, {}), " RGB"]
-          })]
-        })]
-      }), /*#__PURE__*/_jsxs("div", {
-        className: "fwe-d-flex",
-        children: [inputType === "HEX" && /*#__PURE__*/_jsx("label", {
-          "aria-label": "Hexadecimal Color",
-          className: "fwe-input-text fwe-hex-input",
-          htmlFor: hexId,
-          children: /*#__PURE__*/_jsx("input", {
-            type: "text",
-            value: hexInputColor,
-            onBlur: onHexBlur,
-            onChange: onHexInput,
-            id: hexId
-          })
-        }), inputType === "RGB" && /*#__PURE__*/_jsxs(_Fragment, {
-          children: [/*#__PURE__*/_jsx("label", {
-            "aria-label": "RGB Color Red",
-            className: "fwe-input-text fwe-red-input",
-            htmlFor: redId,
-            children: /*#__PURE__*/_jsx("input", {
-              type: "text",
-              value: redInput,
-              onBlur: () => onRgbBlur("r"),
-              onChange: e => onRgbInput(e.target.value, "r"),
-              id: redId
-            })
-          }), /*#__PURE__*/_jsx("label", {
-            "aria-label": "RGB Color Green",
-            className: "fwe-input-text fwe-green-input",
-            htmlFor: greenId,
-            children: /*#__PURE__*/_jsx("input", {
-              type: "text",
-              value: greenInput,
-              onBlur: () => onRgbBlur("g"),
-              onChange: e => onRgbInput(e.target.value, "g"),
-              id: greenId
-            })
-          }), /*#__PURE__*/_jsx("label", {
-            "aria-label": "RGB Color Blue",
-            className: "fwe-input-text fwe-blue-input",
-            htmlFor: blueId,
-            children: /*#__PURE__*/_jsx("input", {
-              type: "text",
-              value: blueInput,
-              onBlur: () => onRgbBlur("b"),
-              onChange: e => onRgbInput(e.target.value, "b"),
-              id: blueId
-            })
-          })]
-        }), useAlpha && /*#__PURE__*/_jsx("label", {
-          "aria-label": "Alpha Channel",
-          className: "fwe-input-text fwe-alpha-input fwe-ml-auto",
-          htmlFor: alphaId,
-          children: /*#__PURE__*/_jsxs("span", {
-            children: [/*#__PURE__*/_jsx("input", {
-              type: "number",
-              min: "0",
-              max: "100",
-              value: innerAlpha,
-              onBlur: () => onAlphaBlur(),
-              onChange: e => onAlphaInput(e.target.value),
-              id: alphaId
-            }), /*#__PURE__*/_jsx("span", {
-              className: "fwe-percent-char",
-              children: "%"
-            })]
-          })
-        })]
-      })]
-    }), /*#__PURE__*/_jsxs("div", {
-      className: "fwe-mt-xs fwe-color-grid",
-      children: [/*#__PURE__*/_jsxs("div", {
-        className: "fwe-remove-color-button",
-        onClick: onRemoveColor,
-        children: [/*#__PURE__*/_jsxs("svg", {
-          className: "fwe-no-color-pattern",
-          version: "1.1",
-          xmlns: "http://www.w3.org/2000/svg",
-          xmlnsXlink: "http://www.w3.org/1999/xlink",
-          id: "canvas1",
-          width: "18",
-          height: "18",
-          children: [/*#__PURE__*/_jsx("defs", {
-            children: /*#__PURE__*/_jsxs("pattern", {
-              id: "bwsquare2px",
-              width: "4",
-              height: "4",
-              patternUnits: "userSpaceOnUse",
-              children: [/*#__PURE__*/_jsx("rect", {
-                x: "0",
-                y: "0",
-                width: "2",
-                height: "2",
-                stroke: "none",
-                fill: "#ffffff"
-              }), /*#__PURE__*/_jsx("rect", {
-                x: "2",
-                y: "0",
-                width: "2",
-                height: "2",
-                stroke: "none",
-                fill: "#e2e5e8"
-              }), /*#__PURE__*/_jsx("rect", {
-                x: "0",
-                y: "2",
-                width: "2",
-                height: "2",
-                stroke: "none",
-                fill: "#e2e5e8"
-              }), /*#__PURE__*/_jsx("rect", {
-                x: "2",
-                y: "2",
-                width: "2",
-                height: "2",
-                stroke: "none",
-                fill: "#ffffff"
-              })]
-            })
-          }), /*#__PURE__*/_jsx("rect", {
-            x: "0",
-            y: "0",
-            rx: "0",
-            ry: "0",
-            width: "18",
-            height: "18",
-            fill: "url(#bwsquare2px)",
-            strokeWidth: "0"
-          })]
-        }), /*#__PURE__*/_jsx(IconCheckSmall, {
-          className: classNames({
-            "fwe-color-text": !innerColor
-          })
-        })]
-      }), palette.map(colorItem => {
-        const itemClasses = classNames("fwe-color-item", {
-          "fwe-white-item": colorItem.toUpperCase() === "#FFFFFF"
-        });
-        return /*#__PURE__*/_jsx("div", {
-          className: itemClasses,
-          style: {
-            background: colorItem
-          },
-          onClick: () => updateColorRgb(colorItem.toUpperCase()),
-          children: innerColor === colorItem.toUpperCase() && /*#__PURE__*/_jsx(IconCheckSmall, {})
-        }, colorItem);
-      })]
-    })]
-  });
-}
-export default ColorPicker;

package/lib/forms/date-picker/DatePicker.d.ts

@@ -1,25 +0,0 @@
-import type { ClassNamePropsWithChildren } from "../../helper/types";
-import "./DatePicker.scss";
-export interface DatePickerOptions {
-    maxDate?: Date;
-    minDate?: Date;
-    keepOpenOnDateChange?: boolean;
-    position?: "auto" | "above" | "below" | "auto left" | "auto center" | "auto right" | "above left" | "above center" | "above right" | "below left" | "below center" | "below right";
-}
-export interface DatePickerProps extends ClassNamePropsWithChildren {
-    disabled?: boolean;
-    required?: boolean;
-    hint?: string;
-    error?: string;
-    value?: Date;
-    defaultValue?: Date;
-    formatDate?: (date: Date) => string;
-    options?: DatePickerOptions;
-    onChange?: (date: Date) => void;
-    id?: string;
-    allowManualInput?: boolean;
-    dateFormat?: string;
-    openOnInputClick?: boolean;
-}
-declare function DatePicker({ children, className, disabled, required, error, hint, value, defaultValue, formatDate, options, onChange, id: idProps, allowManualInput, dateFormat, openOnInputClick, }: DatePickerProps): import("react/jsx-runtime").JSX.Element;
-export default DatePicker;