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

package/node/lib/components/modals/Prompt.js

@@ -0,0 +1,72 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Prompt;
+var _react = _interopRequireWildcard(require("react"));
+var _TextInput = _interopRequireDefault(require("../../forms/text-input/TextInput"));
+var _Modal = _interopRequireDefault(require("./Modal"));
+var _ModalFooter = _interopRequireDefault(require("./ModalFooter"));
+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; }
+function Prompt(_ref) {
+  let {
+    title,
+    subtitle,
+    hint,
+    label,
+    value,
+    onChange,
+    onOk,
+    onCancel,
+    cancel,
+    ok,
+    ...props
+  } = _ref;
+  const [innerValue, setInnerValue] = (0, _react.useState)(value);
+  (0, _react.useEffect)(() => {
+    setInnerValue(value);
+  }, [value]);
+  function handleChange(e) {
+    setInnerValue(e.target.value);
+    if (onChange) {
+      onChange(e);
+    }
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Modal.default, {
+    head: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [subtitle && /*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
+        className: "fwe-modal-h2",
+        children: subtitle
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("h1", {
+        className: "fwe-modal-h1",
+        children: title
+      })]
+    }),
+    body: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextInput.default, {
+      onChange: handleChange,
+      label: label,
+      hint: hint,
+      value: innerValue
+    }),
+    ...props,
+    children: (cancel || ok) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ModalFooter.default, {
+      children: [cancel && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+        type: "button",
+        "aria-label": "Cancel",
+        className: "fwe-btn",
+        onClick: onCancel,
+        children: cancel
+      }), ok && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+        type: "button",
+        "aria-label": "Ok",
+        className: "fwe-btn fwe-btn-hero",
+        onClick: () => onOk(innerValue),
+        children: ok
+      })]
+    })
+  });
+}

package/node/lib/components/pagination/Pagination.js

@@ -0,0 +1,116 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.PaginationType = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+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; }
+let PaginationType;
+exports.PaginationType = PaginationType;
+(function (PaginationType) {
+  PaginationType["Simple"] = "SIMPLE";
+  PaginationType["Numeric"] = "NUMERIC";
+  PaginationType["Dots"] = "DOTS";
+})(PaginationType || (exports.PaginationType = PaginationType = {}));
+function Pagination(props) {
+  const {
+    pageMax,
+    onChange,
+    pageCurrent,
+    defaultPageCurrent = 1,
+    type = PaginationType.Numeric,
+    className
+  } = props;
+  const controlled = pageCurrent !== undefined;
+  const [innerPageCurrent, setInnerPageCurrent] = (0, _react.useState)(controlled ? pageCurrent : defaultPageCurrent);
+  const dotArray = Array.from(new Array(pageMax).keys());
+  (0, _react.useEffect)(() => {
+    if (controlled) {
+      setInnerPageCurrent(pageCurrent);
+    }
+  }, [pageCurrent, controlled]);
+  function handleChange(newPage) {
+    if (!controlled) {
+      setInnerPageCurrent(newPage);
+    }
+    if (onChange) {
+      onChange(newPage);
+    }
+  }
+  function onBtnDown() {
+    if (innerPageCurrent > 1) {
+      const newPageCurrent = innerPageCurrent - 1;
+      handleChange(newPageCurrent);
+    }
+  }
+  function onBtnUp() {
+    if (innerPageCurrent < pageMax) {
+      const newPageCurrent = innerPageCurrent + 1;
+      handleChange(newPageCurrent);
+    }
+  }
+  function onDotClick(index) {
+    const newPageCurrent = index + 1;
+    handleChange(newPageCurrent);
+  }
+  function handleKeyPress(event, index) {
+    if (event.key === 'Enter' || event.key === ' ') {
+      onDotClick(index);
+    }
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [type !== PaginationType.Dots && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _classnames.default)('fwe-pagination fwe-p-m', {
+        'fwe-d-none': pageMax < 2
+      }, className),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+        className: (0, _classnames.default)('fwe-navigate-btn-down', {
+          'fwe-disabled': innerPageCurrent <= 1
+        }),
+        onClick: onBtnDown,
+        type: "button",
+        "aria-label": "navigate-btn-down"
+      }), type === PaginationType.Numeric && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: "fwe-page-current",
+          children: innerPageCurrent
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: "fwe-page-max",
+          children: pageMax
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+        className: (0, _classnames.default)('fwe-navigate-btn-up', {
+          'fwe-disabled': innerPageCurrent >= pageMax,
+          'fwe-ml-4': type === PaginationType.Simple
+        }),
+        onClick: onBtnUp,
+        type: "button",
+        "aria-label": "navigate-btn-up"
+      })]
+    }), type === PaginationType.Dots && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _classnames.default)('fwe-p-m', {
+        'fwe-d-none': pageMax < 2
+      }, className),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fwe-pagination",
+        children: dotArray.map(index => /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          tabIndex: 0,
+          role: "button",
+          className: (0, _classnames.default)('fwe-page-dot', {
+            'fwe-selected': index + 1 === innerPageCurrent
+          }),
+          onClick: () => onDotClick(index),
+          "aria-label": "page-dot",
+          onKeyPress: e => handleKeyPress(e, index)
+        }, index))
+      })
+    })]
+  });
+}
+var _default = Pagination;
+exports.default = _default;

package/node/lib/components/popovers/legend/Legend.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _Popover = _interopRequireDefault(require("../popover/Popover"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function Legend(_ref) {
+  let {
+    items,
+    ...props
+  } = _ref;
+  const content = items.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)("dl", {
+    className: "fr-legend",
+    children: items.map(item => /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "fr-legend-content",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("dt", {
+        children: item.name
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("dt", {
+        children: item.text
+      })]
+    }, item.name))
+  }) : null;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popover.default, {
+    popoverContent: content,
+    ...props
+  });
+}
+var _default = Legend;
+exports.default = _default;

package/node/lib/components/popovers/popover/Popover.js

@@ -0,0 +1,117 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactPopper = require("react-popper");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _useOnClickOutside = _interopRequireDefault(require("../../../helper/useOnClickOutside"));
+var _useForkRef = _interopRequireDefault(require("../../../helper/useForkRef"));
+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; }
+function Popover(_ref) {
+  let {
+    popoverContent,
+    children,
+    position,
+    fallbackPositions,
+    open = false,
+    onStatusChange,
+    wrapper,
+    className,
+    flip = true,
+    containerClassName,
+    stopPropagation,
+    arrow = true
+  } = _ref;
+  const [showPopper, setShowPopper] = (0, _react.useState)(open);
+  const referenceElement = (0, _react.useRef)(null);
+  const [popperElement, setPopperElement] = (0, _react.useState)(null);
+  const [arrowElement, setArrowElement] = (0, _react.useState)(null);
+  const popperElRef = (0, _react.useRef)(null);
+  const combinedRef = (0, _useForkRef.default)(popperElRef, setPopperElement);
+  const classes = (0, _classnames.default)(className);
+  (0, _react.useEffect)(() => {
+    setShowPopper(open);
+  }, [open]);
+  const {
+    styles,
+    attributes
+  } = (0, _reactPopper.usePopper)(referenceElement.current, popperElement, {
+    placement: position,
+    modifiers: [{
+      name: 'arrow',
+      options: {
+        element: arrowElement
+      }
+    }, {
+      name: 'offset',
+      options: {
+        offset: [0, 24]
+      }
+    }, {
+      name: 'flip',
+      options: {
+        fallbackPlacements: flip ? fallbackPositions : [position || 'auto']
+      }
+    }]
+  });
+  const handleChange = (e, status) => {
+    if (stopPropagation) {
+      e?.stopPropagation();
+    }
+    setShowPopper(status);
+    if (onStatusChange) {
+      onStatusChange(status);
+    }
+  };
+  function closePopover(event) {
+    handleChange(event, false);
+  }
+  (0, _useOnClickOutside.default)(popperElRef, closePopover, referenceElement);
+  function handleKeyDown(event) {
+    if (event.key === 'Enter') {
+      handleChange(undefined, true);
+    }
+    if (event.key === 'Escape') {
+      handleChange(undefined, false);
+    }
+  }
+  function handleKeyUp(event) {
+    if (event.key === ' ') {
+      handleChange(undefined, true);
+    }
+  }
+  const childrenWrapper = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    tabIndex: 0,
+    role: "button",
+    className: classes,
+    ref: referenceElement,
+    onKeyDown: handleKeyDown,
+    onKeyUp: handleKeyUp,
+    onClick: e => handleChange(e, !showPopper),
+    children: children
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [wrapper ? wrapper(childrenWrapper) : childrenWrapper, showPopper && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _classnames.default)('fwe-popover-container', containerClassName),
+      ref: combinedRef,
+      style: styles.popper,
+      ...attributes.popper,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fwe-popover",
+        children: popoverContent
+      }), arrow && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        ref: setArrowElement,
+        style: styles.arrow,
+        id: "arrow"
+      })]
+    })]
+  });
+}
+var _default = Popover;
+exports.default = _default;

package/node/lib/components/popovers/popover-menu/PopoverMenu.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _Popover = _interopRequireDefault(require("../popover/Popover"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function PopoverMenu(_ref) {
+  let {
+    icon,
+    menu,
+    className,
+    ...props
+  } = _ref;
+  const [showPopper, setShowPopper] = (0, _react.useState)(false);
+  const handleClick = item => {
+    if (item.action) {
+      item.action(item.data);
+    }
+    setShowPopper(false);
+  };
+  const content = /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
+    className: "fwe-list-group",
+    children: menu.map(item => /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+      className: "fwe-list-group-item",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
+        type: "button",
+        className: "fwe-btn fwe-btn-link fwe-dark",
+        onClick: () => handleClick(item),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+          className: `fwe-icon fwe-pr-0 ${item.icon}`
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          children: item.text
+        })]
+      })
+    }, item.icon + item.text))
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: (0, _classnames.default)('fwe-popover-menu', className),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popover.default, {
+      popoverContent: content,
+      position: "right",
+      open: showPopper,
+      onStatusChange: setShowPopper,
+      ...props,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+        type: "button",
+        className: "fwe-btn fwe-btn-link fwe-dark origin",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+          className: `fwe-icon fwe-pr-0 ${icon}`
+        })
+      })
+    })
+  });
+}
+var _default = PopoverMenu;
+exports.default = _default;

package/node/lib/components/popovers/tooltip/Tooltip.js

@@ -0,0 +1,70 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _reactPopper = require("react-popper");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function Tooltip(_ref) {
+  let {
+    children,
+    className,
+    title,
+    position = 'bottom'
+  } = _ref;
+  const [showPopper, setShowPopper] = (0, _react.useState)(false);
+  const referenceElement = (0, _react.useRef)(null);
+  const [popperElement, setPopperElement] = (0, _react.useState)(null);
+  const [arrowElement, setArrowElement] = (0, _react.useState)(null);
+  const {
+    styles,
+    attributes
+  } = (0, _reactPopper.usePopper)(referenceElement.current, popperElement, {
+    placement: position,
+    modifiers: [{
+      name: 'arrow',
+      options: {
+        element: arrowElement
+      }
+    }, {
+      name: 'offset',
+      options: {
+        offset: [0, 24]
+      }
+    }, {
+      name: 'flip',
+      options: {
+        fallbackPlacements: ['right', 'left', 'top']
+      }
+    }]
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _classnames.default)('fr-tooltip-container', className),
+      ref: referenceElement,
+      onMouseEnter: () => setShowPopper(true),
+      onMouseLeave: () => setShowPopper(false),
+      children: children
+    }), showPopper && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "fwe-popover-container",
+      id: "tooltip",
+      ref: setPopperElement,
+      style: styles.popper,
+      ...attributes.popper,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        ref: setArrowElement,
+        style: styles.arrow,
+        id: "arrow"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fwe-popover",
+        children: title
+      })]
+    })]
+  });
+}
+var _default = Tooltip;
+exports.default = _default;

package/node/lib/components/progress/Progress.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _classnames = _interopRequireDefault(require("classnames"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function Progress(_ref) {
+  let {
+    background = 'white',
+    error = false,
+    progress,
+    className
+  } = _ref;
+  const classes = (0, _classnames.default)('fwe-progress-bar', {
+    'fwe-bg-red': error
+  }, {
+    'fwe-progress-bar-black': background === 'black'
+  }, {
+    'fwe-progress-bar-background': background === 'background'
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: (0, _classnames.default)('fwe-progress', className),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: classes,
+      role: "progressbar",
+      style: {
+        width: `${progress}%`
+      },
+      "aria-valuenow": progress,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      "aria-label": "progressbar"
+    })
+  });
+}
+var _default = Progress;
+exports.default = _default;

package/node/lib/components/search-input/ClearButton.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ClearButton;
+var _jsxRuntime = require("react/jsx-runtime");
+function ClearButton(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    role: "button",
+    tabIndex: -1,
+    className: "fwe-clear-icon",
+    "aria-label": "Clear",
+    ...props
+  });
+}

package/node/lib/components/search-input/SearchInput.js

@@ -0,0 +1,82 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _useSearchInput = _interopRequireDefault(require("./useSearchInput"));
+var _useOnClickOutside = _interopRequireDefault(require("../../helper/useOnClickOutside"));
+var _ClearButton = _interopRequireDefault(require("./ClearButton"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function SearchInput(_ref) {
+  let {
+    defaultValue,
+    disabled,
+    label,
+    value,
+    suggestions,
+    onChange,
+    onSearch,
+    onKeyboardNavigate
+  } = _ref;
+  const inputRef = (0, _react.useRef)(null);
+  const containerRef = (0, _react.useRef)(null);
+  const cappedSuggestions = suggestions?.slice(0, 10) ?? [];
+  const {
+    handleFocus,
+    handleInput,
+    handleClearQuery,
+    handleSuggestionClick,
+    handleOutsideClick,
+    handleKeyDown,
+    hideSuggestionList,
+    selectedSuggestionIndex,
+    innerValue
+  } = (0, _useSearchInput.default)(inputRef, cappedSuggestions, value, defaultValue, onChange, onSearch, onKeyboardNavigate);
+  (0, _useOnClickOutside.default)(containerRef, handleOutsideClick);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "fwe-search-input fwe-w-100",
+    ref: containerRef,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+      ref: inputRef,
+      className: "fwe-w-100",
+      disabled: disabled,
+      placeholder: label,
+      onFocus: handleFocus,
+      type: "search",
+      onInput: handleInput,
+      onKeyDown: handleKeyDown,
+      value: innerValue
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fwe-search-icon"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ClearButton.default, {
+      onClick: handleClearQuery
+    }), Boolean(suggestions?.length) && !hideSuggestionList && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "fwe-search-suggestions",
+      children: [cappedSuggestions.map((suggestion, i) =>
+      /*#__PURE__*/
+      // key event is handled via parent
+      // eslint-disable-next-line jsx-a11y/click-events-have-key-events
+      (0, _jsxRuntime.jsx)("div", {
+        role: "option",
+        tabIndex: -1,
+        "aria-selected": selectedSuggestionIndex === i,
+        onClick: () => handleSuggestionClick(suggestion),
+        className: `fwe-search-suggestion ${selectedSuggestionIndex === i ? 'fwe-selected' : ''}`,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          // eslint-disable-next-line react/no-danger
+          dangerouslySetInnerHTML: {
+            __html: suggestion.template
+          }
+        })
+      }, suggestion.value)), suggestions && suggestions.length > 10 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fwe-ml-xxs",
+        children: "..."
+      })]
+    })]
+  });
+}
+var _default = SearchInput;
+exports.default = _default;

package/node/lib/components/search-input/SearchSuggestion.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+class SearchSuggestion {
+  /**
+   * a html-string. e.g.: '<b> hello </b>'
+   */
+
+  /**
+   * This Value will be used as new query when the user selects the suggestion.
+   */
+
+  /**
+   * Creates a basic Suggestion from a string. The first query match is highlighted by bold tags.
+   * @param suggestionString The suggested string (should contain the whole query)
+   * @param query The current query. This string will be highlighted.
+   * @returns a html-string.
+   */
+  static basicSuggestion(suggestionString, query) {
+    const i = suggestionString.toLocaleLowerCase().indexOf(query.toLocaleLowerCase());
+    let template = suggestionString;
+    if (i !== -1) {
+      const boldStart = i;
+      const boldEnd = i + query.length;
+      const part1 = suggestionString.substring(0, boldStart);
+      const part2 = suggestionString.substring(boldStart, boldEnd);
+      const part3 = suggestionString.substring(boldEnd, suggestionString.length);
+      template = `${part1}<b>${part2}</b>${part3}`;
+    }
+    return {
+      value: suggestionString,
+      template
+    };
+  }
+}
+exports.default = SearchSuggestion;