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

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

@@ -0,0 +1,101 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useSearchInput;
+var _react = require("react");
+var _useControlled = _interopRequireDefault(require("../../helper/useControlled"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function useSearchInput(inputRef, cappedSuggestions, value) {
+  let defaultValue = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '';
+  let onChange = arguments.length > 4 ? arguments[4] : undefined;
+  let onSearch = arguments.length > 5 ? arguments[5] : undefined;
+  let onKeyboardNavigate = arguments.length > 6 ? arguments[6] : undefined;
+  const [innerValue, setValue] = (0, _useControlled.default)({
+    controlled: value,
+    default: defaultValue
+  });
+  const [hideSuggestionList, setHideSuggestionList] = (0, _react.useState)(false);
+  const [selectedSuggestionIndex, setSelectedSuggestionIndex] = (0, _react.useState)(-1);
+  function blurInput() {
+    if (inputRef.current) {
+      inputRef.current.blur();
+    }
+  }
+  function reset() {
+    setSelectedSuggestionIndex(-1);
+    setHideSuggestionList(true);
+    blurInput();
+  }
+  function handleSearch() {
+    reset();
+    if (innerValue !== undefined) {
+      onSearch?.(innerValue);
+    }
+  }
+  function updateValue(newValue) {
+    setValue(newValue);
+    onChange?.(newValue);
+    onSearch?.(newValue);
+  }
+  function handleClearQuery() {
+    reset();
+    updateValue('');
+  }
+  function handleArrowKey(newSuggestionIndex) {
+    if (!cappedSuggestions || !cappedSuggestions.length) {
+      return;
+    }
+    const selectedSuggestion = cappedSuggestions[newSuggestionIndex];
+    setSelectedSuggestionIndex(newSuggestionIndex);
+    setValue(selectedSuggestion.value);
+    onKeyboardNavigate?.(selectedSuggestion.value);
+  }
+  function handleUpArrowKey() {
+    handleArrowKey(selectedSuggestionIndex > 0 ? selectedSuggestionIndex - 1 : cappedSuggestions.length - 1);
+  }
+  function handleDownArrowKey() {
+    handleArrowKey(selectedSuggestionIndex >= cappedSuggestions.length - 1 ? 0 : selectedSuggestionIndex + 1);
+  }
+  function handleKeyDown(event) {
+    switch (event.key) {
+      case 'Enter':
+        handleSearch();
+        break;
+      case 'Escape':
+        handleClearQuery();
+        break;
+      case 'ArrowUp':
+        handleUpArrowKey();
+        break;
+      case 'ArrowDown':
+        handleDownArrowKey();
+        break;
+      default:
+        break;
+    }
+  }
+  const handleFocus = () => setHideSuggestionList(false);
+  const handleOutsideClick = () => setHideSuggestionList(true);
+  function handleSuggestionClick(suggestion) {
+    reset();
+    updateValue(suggestion.value);
+  }
+  function handleInput(event) {
+    setSelectedSuggestionIndex(-1);
+    setValue(event.target.value);
+    onChange?.(event.target.value);
+  }
+  return {
+    innerValue,
+    hideSuggestionList,
+    selectedSuggestionIndex,
+    handleClearQuery,
+    handleFocus,
+    handleInput,
+    handleSuggestionClick,
+    handleOutsideClick,
+    handleKeyDown
+  };
+}

package/node/lib/components/snackbar/Snackbar.js

@@ -0,0 +1,94 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _reactTransitionGroup = require("react-transition-group");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function Snackbar(props) {
+  const {
+    data,
+    onAction,
+    onClose,
+    first = false
+  } = props;
+  const [show, setShow] = (0, _react.useState)(true);
+  const nodeRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    let disappearAfter = 5000;
+    if (data?.disappearAfter !== null) {
+      if (data?.disappearAfter && data?.disappearAfter > 0) {
+        disappearAfter = data?.disappearAfter;
+      }
+      const timer = setTimeout(() => setShow(false), disappearAfter);
+      return () => {
+        clearTimeout(timer);
+      };
+    }
+    return undefined;
+  }, [data]);
+  function handleClose() {
+    setShow(false);
+  }
+  const classes = first ? 'fr-snackbar-wrapper--first' : 'fr-snackbar-wrapper';
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.CSSTransition, {
+    nodeRef: nodeRef,
+    onExited: () => onClose ? onClose() : undefined,
+    unmountOnExit: true,
+    timeout: {
+      exit: 600
+    },
+    in: show,
+    classNames: classes,
+    appear: true,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      ref: nodeRef,
+      className: classes,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: (0, _classnames.default)({
+          'fwe-snackbar': true,
+          'fwe-snackbar-b': data?.variant === 'b',
+          'fwe-snackbar-c': data?.variant === 'c',
+          'fwe-snackbar-warning': data?.type === 'warning',
+          'fwe-snackbar-error': data?.type === 'error',
+          'fwe-snackbar-shadow': data?.darkBackground
+        }, data?.className),
+        children: [data?.type && /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+          "aria-hidden": true,
+          className: (0, _classnames.default)({
+            'fwe-icon': true,
+            'fwe-icon-status-info': data?.type === 'info',
+            'fwe-icon-status-warning': data?.type === 'warning',
+            'fwe-icon-status-failure': data?.type === 'error'
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          children: data?.text
+        }), data?.action && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+          "aria-label": "UserAction",
+          type: "button",
+          className: "fwe-btn fwe-btn-link",
+          onClick: () => onAction ? onAction() : undefined,
+          children: data?.action
+        }), data?.showClose && /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
+          "aria-label": "Close",
+          type: "button",
+          className: "fwe-btn fwe-btn-link",
+          onClick: handleClose,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+            "aria-hidden": true,
+            className: "fwe-icon fwe-icon-close-small"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            className: "fwe-sr-only",
+            children: "Close"
+          })]
+        })]
+      })
+    })
+  });
+}
+var _default = Snackbar;
+exports.default = _default;

package/node/lib/components/snackbar/SnackbarContext.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = /*#__PURE__*/_react.default.createContext(null);
+exports.default = _default;

package/node/lib/components/snackbar/SnackbarProvider.js

@@ -0,0 +1,65 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _Snackbar = _interopRequireDefault(require("./Snackbar"));
+var _SnackbarContext = _interopRequireDefault(require("./SnackbarContext"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function SnackbarProvider(props) {
+  const {
+    config = {
+      darkBackground: true
+    },
+    children,
+    className
+  } = props;
+  const [snacks, setSnacks] = (0, _react.useState)([]);
+  function addSnackbar(snackData, onAction, onClose) {
+    const key = snackData.key ?? new Date().getTime() + Math.random();
+    setSnacks(prevSnacks => [{
+      data: {
+        ...config,
+        ...snackData
+      },
+      onAction,
+      onClose,
+      key,
+      first: prevSnacks.length === 0
+    }, ...prevSnacks]);
+    return key;
+  }
+  function closeSnackbar(key) {
+    if (key !== undefined) {
+      setSnacks(prevSnacks => prevSnacks.filter(snack => snack.key !== key));
+    }
+  }
+  function handleClose(snack) {
+    closeSnackbar(snack.key);
+    if (snack.onClose) {
+      snack.onClose();
+    }
+  }
+  const contextValue = (0, _react.useMemo)(() => ({
+    addSnackbar,
+    closeSnackbar
+  }), []);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_SnackbarContext.default.Provider, {
+    value: contextValue,
+    children: [children, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _classnames.default)('fwe-snackbar-container', className),
+      children: snacks.map(snack => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Snackbar.default, {
+        data: snack.data,
+        onAction: () => snack.onAction ? snack.onAction() : undefined,
+        onClose: () => handleClose(snack),
+        first: snack.first
+      }, snack.key))
+    })]
+  });
+}
+var _default = SnackbarProvider;
+exports.default = _default;

package/node/lib/components/snackbar/useSnackbar.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _SnackbarContext = _interopRequireDefault(require("./SnackbarContext"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = () => (0, _react.useContext)(_SnackbarContext.default);
+exports.default = _default;

package/node/lib/components/stepper-horizontal/StepperHorizontal.js

@@ -0,0 +1,70 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = _interopRequireWildcard(require("react"));
+var _jsxRuntime = require("react/jsx-runtime");
+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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const StepperHorizontal = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    children,
+    className,
+    stepIndex = 0,
+    onChange,
+    ...props
+  } = _ref;
+  const stepComponents = _react.default.Children.map(children, (child, i) => /*#__PURE__*/_react.default.isValidElement(child) ? /*#__PURE__*/_react.default.cloneElement(child, {
+    ...child.props,
+    isActive: i === stepIndex
+  }) : null);
+  function handleStepClick(index) {
+    if (stepIndex > index && onChange) {
+      onChange(index);
+    }
+  }
+  const handleKeyDown = i => event => {
+    if (event.key === 'Enter') {
+      handleStepClick(i);
+    }
+  };
+  const handleKeyUp = i => event => {
+    if (event.key === ' ') {
+      handleStepClick(i);
+    }
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fwe-stepper-horizontal",
+      children: stepComponents && stepComponents.map((step, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        tabIndex: 0,
+        role: "button",
+        ref: ref,
+        onKeyDown: handleKeyDown(i),
+        onKeyUp: handleKeyUp(i),
+        className: (0, _classnames.default)('fwe-step-container', {
+          'fwe-step-done': stepIndex > i,
+          'fwe-step-active': i === stepIndex
+        }),
+        onClick: () => handleStepClick(i),
+        ...props,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "fwe-step",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "fwe-step-no",
+            children: i + 1
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "fwe-step-name",
+            children: step.props.title
+          })]
+        })
+      }, step.props.title))
+    }), stepComponents]
+  });
+});
+var _default = StepperHorizontal;
+exports.default = _default;

package/node/lib/components/stepper-horizontal/step-horizontal/StepHorizontal.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = require("react");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const StepHorizontal = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    children,
+    className,
+    isActive,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    ref: ref,
+    className: (0, _classnames.default)('overflow-hidden', {
+      hidden: !isActive
+    }),
+    ...props,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fr-moving-container",
+      children: children
+    })
+  });
+});
+var _default = StepHorizontal;
+exports.default = _default;

package/node/lib/components/stepper-vertical/StepperVertical.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = _interopRequireWildcard(require("react"));
+var _jsxRuntime = require("react/jsx-runtime");
+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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const StepperVertical = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    children,
+    className,
+    stepIndex = 0,
+    onChange,
+    ...props
+  } = _ref;
+  function handleStepClick(index) {
+    if (stepIndex > index && onChange) {
+      onChange(index);
+    }
+  }
+  const stepComponents = _react.default.Children.map(children, (child, i) => {
+    if ( /*#__PURE__*/_react.default.isValidElement(child)) {
+      return /*#__PURE__*/_react.default.cloneElement(child, {
+        ...child.props,
+        isActive: i === stepIndex,
+        index: i,
+        isDone: i < stepIndex,
+        isLastElement: i === _react.default.Children.count(children) - 1,
+        onStepClick: () => handleStepClick(i)
+      });
+    }
+    return null;
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    ref: ref,
+    className: (0, _classnames.default)('fwe-stepper-vertical', className),
+    ...props,
+    children: stepComponents
+  });
+});
+var _default = StepperVertical;
+exports.default = _default;

package/node/lib/components/stepper-vertical/step-vertical/StepVertical.js

@@ -0,0 +1,84 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = require("react");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const StepVertical = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    children,
+    className,
+    isActive,
+    isLastElement,
+    isDone,
+    index,
+    title,
+    onStepClick,
+    ...props
+  } = _ref;
+  const containerRef = (0, _react.useRef)(null);
+  const contentRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    if (containerRef.current) {
+      if (isActive) {
+        const itemHeight = contentRef.current?.offsetHeight;
+        containerRef.current.style.height = `${itemHeight}px`;
+      } else {
+        containerRef.current.style.height = '20px';
+      }
+    }
+  }, [isActive]);
+  function handleClick() {
+    if (onStepClick) {
+      onStepClick();
+    }
+  }
+  const handleKeyDown = event => {
+    if (event.key === 'Enter') {
+      handleClick();
+    }
+  };
+  const handleKeyUp = event => {
+    if (event.key === ' ') {
+      handleClick();
+    }
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    ref: ref,
+    className: (0, _classnames.default)('fwe-step-container', {
+      'fwe-last-element': isLastElement,
+      'fwe-step-active': isActive,
+      'fwe-step-done': isDone
+    }),
+    ...props,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      tabIndex: 0,
+      role: "button",
+      className: "fwe-step",
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      onKeyUp: handleKeyUp,
+      children: [index !== undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fwe-step-no",
+        children: index + 1
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fwe-step-name",
+        children: title
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      ref: containerRef,
+      className: "fwe-step-content-container",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        ref: contentRef,
+        className: "fwe-step-content",
+        children: children
+      })
+    })]
+  });
+});
+var _default = StepVertical;
+exports.default = _default;