@festo-ui/react 4.0.3-pre-20221213.1 → 5.0.0-dev.46

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

@@ -0,0 +1,549 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.PREDEFINED_COLORS = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactDraggable = _interopRequireDefault(require("react-draggable"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _ColorHelper = _interopRequireDefault(require("./ColorHelper"));
+var _useId = _interopRequireDefault(require("../../helper/useId"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+
+const PREDEFINED_COLORS = ['#0091dc', '#333333', '#ffffff', '#f2f3f5', '#e5e8eb', '#d8dce1', '#b6bec6', '#80ca3d', '#ffd600', '#ff9600', '#d50000'];
+exports.PREDEFINED_COLORS = PREDEFINED_COLORS;
+function ColorPicker(_ref) {
+  let {
+    palette = PREDEFINED_COLORS,
+    useAlpha = false,
+    alpha = 100,
+    paletteOnly,
+    color = '#FFFFFF',
+    onChange,
+    onAlphaChange,
+    className
+  } = _ref;
+  const baseSize = 184;
+  const initialRgb = _ColorHelper.default.hexToRgb(color);
+  const defaultHsv = {
+    h: 0,
+    s: 0,
+    v: 1
+  };
+  const initialHsv = initialRgb ? _ColorHelper.default.rgbToHsv(initialRgb) || defaultHsv : defaultHsv;
+  const [hsv, setHsv] = (0, _react.useState)(initialHsv);
+  const [innerColor, setInnerColor] = (0, _react.useState)(color);
+  const [redInput, setRedInput] = (0, _react.useState)(initialRgb?.r || 255);
+  const [greenInput, setGreenInput] = (0, _react.useState)(initialRgb?.g || 255);
+  const [blueInput, setBlueInput] = (0, _react.useState)(initialRgb?.b || 255);
+  const [hexInputColor, setHexInputColor] = (0, _react.useState)(color);
+  const [inputType, setInputType] = (0, _react.useState)('RGB');
+  const [selectOpen, setSelectOpen] = (0, _react.useState)(false);
+  const [innerAlpha, setInnerAlpha] = (0, _react.useState)(alpha);
+  const [changeColor, setChangeColor] = (0, _react.useState)(true);
+  const redId = (0, _useId.default)();
+  const greenId = (0, _useId.default)();
+  const blueId = (0, _useId.default)();
+  const hexId = (0, _useId.default)();
+  const alphaId = (0, _useId.default)();
+  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.default.hexToRgb(hexColor);
+    if (rgb) {
+      setRedInput(rgb.r);
+      setGreenInput(rgb.g);
+      setBlueInput(rgb.b);
+    }
+  }
+  (0, _react.useEffect)(() => {
+    if (onChange) {
+      onChange(innerColor);
+    }
+  }, [onChange, innerColor]);
+  (0, _react.useEffect)(() => {
+    if (onAlphaChange && innerAlpha) {
+      onAlphaChange(innerAlpha);
+    }
+  }, [onAlphaChange, innerAlpha]);
+  const updateColorHsv = (0, _react.useCallback)((_hsv, _changeColor) => {
+    const rgb = _ColorHelper.default.hsvToRgb(_hsv);
+    const hex = _ColorHelper.default.rgbToHex(rgb);
+    if (_changeColor) {
+      setInnerColor(hex);
+    }
+    updateInputs(hex);
+  }, []);
+  (0, _react.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.default.hexToRgb(currentColor);
+    setChangeColor(false);
+    if (rgb) {
+      const newHsv = _ColorHelper.default.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.default.hexToRgb(innerColor || '#FFFFFF');
+      if (rgb) {
+        const newHexColor = _ColorHelper.default.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.default.hexToRgb(innerColor || '#FFFFFF');
+      if (rgb) {
+        rgb[channel] = numberValue;
+        const newHexColor = _ColorHelper.default.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__*/(0, _jsxRuntime.jsxs)("div", {
+    className: (0, _classnames.default)('fwe-color-picker', {
+      'fwe-alpha-active': useAlpha
+    }, className),
+    children: [!paletteOnly && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "fwe-d-flex",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "fwe-gradient-picker",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "fwe-saturation-gradient",
+          style: {
+            backgroundImage: getSaturationGradient()
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          "aria-label": "brightness-gradient",
+          onClick: _ref2 => {
+            let {
+              nativeEvent: {
+                offsetX,
+                offsetY
+              }
+            } = _ref2;
+            return updateGradient(offsetX, offsetY);
+          },
+          className: "fwe-brightness-gradient"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactDraggable.default, {
+          position: {
+            x: saturationKnobOffset,
+            y: valueKnobOffset
+          },
+          onDrag: (e, data) => onGradientDrag(e, data),
+          bounds: "parent",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "fwe-knob"
+          })
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "fwe-hue-picker",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "fwe-picker-background",
+          onClick: _ref3 => {
+            let {
+              nativeEvent: {
+                offsetY
+              }
+            } = _ref3;
+            return updateHue(offsetY);
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactDraggable.default, {
+          position: {
+            x: 3,
+            y: hueKnobOffset
+          },
+          onDrag: (e, data) => onHueDrag(e, data),
+          bounds: "parent",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "fwe-knob",
+            style: {
+              background: `hsl(${hsv.h * 360}, 100%, 50%)`
+            }
+          })
+        })]
+      }), useAlpha && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "fwe-alpha-picker",
+        children: [/*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)("defs", {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("pattern", {
+              id: "bwsquare2px",
+              width: "4",
+              height: "4",
+              patternUnits: "userSpaceOnUse",
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
+                x: "0",
+                y: "0",
+                width: "2",
+                height: "2",
+                stroke: "none",
+                fill: "#ffffff"
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
+                x: "2",
+                y: "0",
+                width: "2",
+                height: "2",
+                stroke: "none",
+                fill: "#e5e8eb"
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
+                x: "0",
+                y: "2",
+                width: "2",
+                height: "2",
+                stroke: "none",
+                fill: "#e5e8eb"
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
+                x: "2",
+                y: "2",
+                width: "2",
+                height: "2",
+                stroke: "none",
+                fill: "#ffffff"
+              })]
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
+            x: "0",
+            y: "0",
+            rx: "4",
+            ry: "4",
+            width: "8",
+            height: "184",
+            fill: "url(#bwsquare2px)",
+            strokeWidth: "0"
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          onClick: _ref4 => {
+            let {
+              nativeEvent: {
+                offsetY
+              }
+            } = _ref4;
+            return updateAlpha(offsetY);
+          },
+          className: "fwe-picker-background",
+          style: {
+            backgroundImage: `linear-gradient( ${innerColor},  transparent)`
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactDraggable.default, {
+          position: {
+            x: 3,
+            y: alphaKnobOffset
+          },
+          onDrag: (e, data) => onAlphaDrag(e, data),
+          bounds: "parent",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "fwe-knob"
+          })
+        })]
+      })]
+    }), !paletteOnly && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "fwe-mt-s",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "fwe-type-select",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "fwe-type-indicator",
+          onClick: () => setSelectOpen(prevOpen => !prevOpen),
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            className: "fwe-input-type",
+            children: inputType
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+            className: "fwe-icon fwe-icon-arrows-collapse"
+          })]
+        }), selectOpen && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "fwe-popover",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: (0, _classnames.default)('fwe-type-item', {
+              'fwe-selected': inputType === 'HEX'
+            }),
+            onClick: () => onChangeType('HEX'),
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+              className: "fwe-icon fwe-icon-menu-check"
+            }), " HEX"]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: (0, _classnames.default)('fwe-type-item', {
+              'fwe-selected': inputType === 'RGB'
+            }),
+            onClick: () => onChangeType('RGB'),
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+              className: "fwe-icon fwe-icon-menu-check"
+            }), " RGB"]
+          })]
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "fwe-d-flex",
+        children: [inputType === 'HEX' && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+          className: "fwe-input-text fwe-hex-input",
+          htmlFor: hexId,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+            type: "text",
+            value: hexInputColor,
+            onBlur: onHexBlur,
+            onChange: onHexInput,
+            id: hexId
+          })
+        }), inputType === 'RGB' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+            className: "fwe-input-text fwe-red-input",
+            htmlFor: redId,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+              type: "text",
+              value: redInput,
+              onBlur: () => onRgbBlur('r'),
+              onChange: e => onRgbInput(e.target.value, 'r'),
+              id: redId
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+            className: "fwe-input-text fwe-green-input",
+            htmlFor: greenId,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+              type: "text",
+              value: greenInput,
+              onBlur: () => onRgbBlur('g'),
+              onChange: e => onRgbInput(e.target.value, 'g'),
+              id: greenId
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+            className: "fwe-input-text fwe-blue-input",
+            htmlFor: blueId,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+              type: "text",
+              value: blueInput,
+              onBlur: () => onRgbBlur('b'),
+              onChange: e => onRgbInput(e.target.value, 'b'),
+              id: blueId
+            })
+          })]
+        }), useAlpha && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+          className: "fwe-input-text fwe-alpha-input fwe-ml-auto",
+          htmlFor: alphaId,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+              type: "number",
+              min: "0",
+              max: "100",
+              value: innerAlpha,
+              onBlur: () => onAlphaBlur(),
+              onChange: e => onAlphaInput(e.target.value),
+              id: alphaId
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              className: "fwe-percent-char",
+              children: "%"
+            })]
+          })
+        })]
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "fwe-mt-xs fwe-color-grid",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "fwe-remove-color-button",
+        onClick: onRemoveColor,
+        children: [/*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)("defs", {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("pattern", {
+              id: "bwsquare2px",
+              width: "4",
+              height: "4",
+              patternUnits: "userSpaceOnUse",
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
+                x: "0",
+                y: "0",
+                width: "2",
+                height: "2",
+                stroke: "none",
+                fill: "#ffffff"
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
+                x: "2",
+                y: "0",
+                width: "2",
+                height: "2",
+                stroke: "none",
+                fill: "#e5e8eb"
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
+                x: "0",
+                y: "2",
+                width: "2",
+                height: "2",
+                stroke: "none",
+                fill: "#e5e8eb"
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
+                x: "2",
+                y: "2",
+                width: "2",
+                height: "2",
+                stroke: "none",
+                fill: "#ffffff"
+              })]
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
+            x: "0",
+            y: "0",
+            rx: "0",
+            ry: "0",
+            width: "18",
+            height: "18",
+            fill: "url(#bwsquare2px)",
+            strokeWidth: "0"
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+          className: (0, _classnames.default)('fwe-icon fwe-icon-menu-check', {
+            'fwe-color-text': !innerColor
+          })
+        })]
+      }), palette.map(colorItem => {
+        const itemClasses = (0, _classnames.default)('fwe-color-item', {
+          'fwe-white-item': colorItem.toUpperCase() === '#FFFFFF'
+        });
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: itemClasses,
+          style: {
+            background: colorItem
+          },
+          onClick: () => updateColorRgb(colorItem.toUpperCase()),
+          children: innerColor === colorItem.toUpperCase() && /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+            className: "fwe-icon fwe-icon-menu-check"
+          })
+        }, colorItem);
+      })]
+    })]
+  });
+}
+var _default = ColorPicker;
+exports.default = _default;

package/node/lib/forms/date-picker/DatePicker.js

@@ -0,0 +1,131 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _flatpickr = _interopRequireDefault(require("flatpickr"));
+var _useId = _interopRequireDefault(require("../../helper/useId"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function DatePicker(_ref) {
+  let {
+    children,
+    className,
+    disabled,
+    required,
+    error,
+    hint,
+    value,
+    defaultValue = new Date(),
+    formatDate = Intl.DateTimeFormat().format,
+    options,
+    onChange,
+    id: idProps
+  } = _ref;
+  const id = (0, _useId.default)(idProps);
+  const [open, setOpen] = (0, _react.useState)(false);
+  const [calendar, setCalendar] = (0, _react.useState)(null);
+  const innerDefaultValue = value || defaultValue;
+  function toggle() {
+    const newOpen = !open;
+    setOpen(newOpen);
+    if (newOpen) {
+      calendar?.open();
+    } else {
+      calendar?.close();
+    }
+  }
+  const datePickerRef = (0, _react.useRef)(null);
+  const {
+    keepOpenOnDateChange,
+    maxDate,
+    minDate
+  } = options || {};
+  (0, _react.useEffect)(() => {
+    if (calendar !== null && value !== undefined) {
+      calendar.setDate(value);
+    }
+  }, [calendar, value]);
+  (0, _react.useEffect)(() => {
+    function handleChange(date) {
+      datePickerRef.current?.blur();
+      if (onChange) {
+        onChange(date);
+      }
+    }
+    function handleClose() {
+      setOpen(false);
+      datePickerRef.current?.blur();
+    }
+    if (datePickerRef.current && calendar === null) {
+      setCalendar((0, _flatpickr.default)(datePickerRef.current, {
+        defaultDate: innerDefaultValue,
+        onChange: v => handleChange(v[0]),
+        onClose: handleClose,
+        position: 'below center',
+        formatDate,
+        closeOnSelect: !keepOpenOnDateChange ?? true,
+        clickOpens: false,
+        minDate,
+        maxDate
+      }));
+    }
+  }, [datePickerRef, calendar, maxDate, minDate, onChange, innerDefaultValue, formatDate, keepOpenOnDateChange]);
+  (0, _react.useEffect)(() => () => {
+    if (calendar !== null) {
+      calendar.destroy();
+    }
+  }, [calendar]);
+  const handleKeyDown = event => {
+    if (event.key === 'Enter') {
+      toggle();
+    }
+  };
+  const handleKeyUp = event => {
+    if (event.key === ' ') {
+      toggle();
+    }
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    tabIndex: 0,
+    role: "button",
+    onClick: toggle,
+    onKeyDown: handleKeyDown,
+    onKeyUp: handleKeyUp,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+      className: (0, _classnames.default)('fwe-input-text fwe-input-text-icon', className),
+      htmlFor: id,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+        className: (0, _classnames.default)('fwe-icon fwe-icon-time-calendar', {
+          'fwe-color-hero': open && !disabled,
+          'fwe-color-control-disabled': disabled
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+        id: id,
+        ref: datePickerRef,
+        "aria-label": "picked date",
+        type: "text",
+        readOnly: true,
+        required: required,
+        className: (0, _classnames.default)('fr-date-picker', {
+          'fwe-border-hero': open && !disabled
+        }),
+        disabled: disabled
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "fwe-input-text-label",
+        children: children
+      }), hint && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "fwe-input-text-info",
+        children: hint
+      }), error && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "fwe-input-text-invalid",
+        children: error
+      })]
+    })
+  });
+}
+var _default = DatePicker;
+exports.default = _default;