@festo-ui/react 9.0.0-dev.706 → 9.0.0-dev.709

package/node/lib/forms/select/internal/SelectLabel.js

@@ -1,23 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = SelectLabel;
-var _classnames = _interopRequireDefault(require("classnames"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function SelectLabel(_ref) {
-  let {
-    hideLabel,
-    label,
-    id
-  } = _ref;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
-    className: (0, _classnames.default)("fwe-select-label", {
-      "fwe-sr-only": hideLabel
-    }),
-    htmlFor: id,
-    children: label || ""
-  });
-}

package/node/lib/forms/select/internal/SelectOptionsContainer.js

@@ -1,109 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = require("react");
-var _reactPopper = require("react-popper");
-var _SelectScrollContainer = _interopRequireDefault(require("./SelectScrollContainer.js"));
-var _ListItem = _interopRequireDefault(require("./ListItem.js"));
-var _utils = _interopRequireDefault(require("./utils.js"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function SelectOptionsContainerComponent(_ref, ref) {
-  let {
-    options,
-    config,
-    onClose,
-    label,
-    onOptionChange,
-    multiple,
-    children
-  } = _ref;
-  const [popperElement, setPopperElement] = (0, _react.useState)(null);
-  const refObject = typeof ref !== "function" ? ref?.current : null;
-  const {
-    styles,
-    attributes
-  } = (0, _reactPopper.usePopper)(refObject, popperElement, {
-    placement: "bottom-start",
-    modifiers: [{
-      name: "offset",
-      options: {
-        offset: [0, 3]
-      }
-    }, {
-      name: "flip",
-      options: {
-        fallbackPlacements: ["bottom-start", "top-start"]
-      }
-    }]
-  });
-  function getCssProperies() {
-    if (config?.contentWidth) {
-      return {
-        ...styles.popper,
-        minWidth: `${refObject?.clientWidth}px`,
-        width: config?.contentWidth
-      };
-    }
-    return {
-      ...styles.popper,
-      minWidth: `${refObject?.clientWidth}px`
-    };
-  }
-  const allChildren = (0, _utils.default)(children);
-  const childrenList = allChildren.childrenList;
-  const usedOptions = options ?? childrenList.map(child => child.props.option);
-  const {
-    length
-  } = usedOptions;
-  const listItemRef = (0, _react.useRef)(Array.from({
-    length
-  }, () => /*#__PURE__*/(0, _react.createRef)()));
-  const selectedIndex = Array.isArray(label) ? usedOptions.findIndex(option => option.label === label.at(-1)) : usedOptions.findIndex(option => option.label === label);
-  const [init, setInit] = (0, _react.useState)(false);
-  (0, _react.useEffect)(() => {
-    if (!init) {
-      requestAnimationFrame(() => {
-        setInit(true);
-        const index = selectedIndex === -1 ? 0 : selectedIndex;
-        listItemRef.current?.[index].current?.focus();
-      });
-    }
-  }, [selectedIndex, init]);
-
-  // here was the unmount code. I removed it because it was causing problem during debug (StrictMode)
-  // Tuan: Please check if it's necessary to add it back
-
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      "aria-hidden": true,
-      className: "fr-backdrop",
-      onClick: onClose
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("ul", {
-      ref: setPopperElement,
-      style: getCssProperies(),
-      ...attributes.popper,
-      className: "fwe-select-options-container",
-      children: [allChildren.before, /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectScrollContainer.default, {
-        length: length,
-        config: config,
-        children: [...(options || []), ...childrenList].map((item, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItem.default, {
-          withCheckbox: multiple,
-          item: item,
-          selectedLabel: label,
-          onClose: onClose,
-          onFocusChange: index => listItemRef.current[index].current?.focus(),
-          onOptionChange: onOptionChange,
-          ref: listItemRef,
-          index: i,
-          options: usedOptions
-        }, (/*#__PURE__*/(0, _react.isValidElement)(item) ? item.props.option : item).data))
-      }), allChildren.after]
-    })]
-  });
-}
-const SelectOptionsContainer = /*#__PURE__*/(0, _react.forwardRef)(SelectOptionsContainerComponent);
-var _default = exports.default = SelectOptionsContainer;

package/node/lib/forms/select/internal/SelectScrollContainer.js

@@ -1,28 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = SelectScrollContainer;
-var _utils = _interopRequireDefault(require("../utils.js"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function SelectScrollContainer(_ref) {
-  let {
-    config,
-    children,
-    length
-  } = _ref;
-  if (config?.scroll?.enabled) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "fr-select-scroll",
-      style: {
-        height: (0, _utils.default)(config, length)
-      },
-      children: children
-    });
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: children
-  });
-}

package/node/lib/forms/select/internal/SelectWrapper.js

@@ -1,27 +0,0 @@
-"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(e) { return e && e.__esModule ? e : { default: e }; }
-const SelectWrapper = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
-  let {
-    children,
-    disabled,
-    className,
-    ...props
-  } = _ref;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    ...props,
-    ref: ref,
-    className: (0, _classnames.default)("fwe-select-wrapper", {
-      "fwe-disabled": disabled
-    }, className),
-    children: children
-  });
-});
-var _default = exports.default = SelectWrapper;

package/node/lib/forms/select/internal/index.js

@@ -1,48 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "HiddenInput", {
-  enumerable: true,
-  get: function () {
-    return _HiddenInput.default;
-  }
-});
-Object.defineProperty(exports, "ListItem", {
-  enumerable: true,
-  get: function () {
-    return _ListItem.default;
-  }
-});
-Object.defineProperty(exports, "OptionsContainer", {
-  enumerable: true,
-  get: function () {
-    return _SelectOptionsContainer.default;
-  }
-});
-Object.defineProperty(exports, "SelectButton", {
-  enumerable: true,
-  get: function () {
-    return _SelectButton.default;
-  }
-});
-Object.defineProperty(exports, "SelectLabel", {
-  enumerable: true,
-  get: function () {
-    return _SelectLabel.default;
-  }
-});
-Object.defineProperty(exports, "Wrapper", {
-  enumerable: true,
-  get: function () {
-    return _SelectWrapper.default;
-  }
-});
-var _HiddenInput = _interopRequireDefault(require("./HiddenInput.js"));
-var _ListItem = _interopRequireDefault(require("./ListItem.js"));
-var _SelectButton = _interopRequireDefault(require("./SelectButton.js"));
-var _SelectOptionsContainer = _interopRequireDefault(require("./SelectOptionsContainer.js"));
-var _SelectWrapper = _interopRequireDefault(require("./SelectWrapper.js"));
-var _SelectLabel = _interopRequireDefault(require("./SelectLabel.js"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/node/lib/forms/select/internal/utils.js

@@ -1,43 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = getChildren;
-var _react = _interopRequireDefault(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _SelectOption = _interopRequireDefault(require("../select-option/SelectOption.js"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function getChildren(children) {
-  const before = [];
-  const childrenList = [];
-  const after = [];
-  let foundFirstOption = false;
-  _react.default.Children.forEach(children, element => {
-    if (/*#__PURE__*/_react.default.isValidElement(element)) {
-      if (/*#__PURE__*/_react.default.isValidElement(element) && element.type === _SelectOption.default) {
-        foundFirstOption = true;
-        const className = (0, _classnames.default)("fwe-select-option-content", element.props.className);
-        const {
-          props
-        } = element;
-        childrenList.push({
-          ...element,
-          props: {
-            ...props,
-            className
-          }
-        });
-      } else if (!foundFirstOption) {
-        before.push(element);
-      } else {
-        after.push(element);
-      }
-    }
-  });
-  return {
-    childrenList,
-    after,
-    before
-  };
-}

package/node/lib/forms/select/select-option/SelectOption.js

@@ -1,23 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = require("react");
-var _jsxRuntime = require("react/jsx-runtime");
-function SelectOptionComponent(_ref, ref) {
-  let {
-    children,
-    className,
-    ...props
-  } = _ref;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-    ref: ref,
-    className: className,
-    ...props,
-    children: children
-  });
-}
-const SelectOption = /*#__PURE__*/(0, _react.forwardRef)(SelectOptionComponent);
-var _default = exports.default = SelectOption;

package/node/lib/forms/select/utils.js

@@ -1,23 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = calcVirtualScrollHeight;
-function calcVirtualScrollHeight(config, itemLength) {
-  const defaultHeight = 48;
-  let height = defaultHeight;
-  if (itemLength === 2) {
-    height = defaultHeight * 2;
-  } else if (itemLength >= 3) {
-    height = defaultHeight * 3;
-  }
-  if (config?.scroll?.viewportSize != null && config.scroll.viewportSize !== undefined) {
-    if (itemLength >= config.scroll.viewportSize) {
-      height = config.scroll.viewportSize * defaultHeight;
-    } else if (itemLength < config.scroll.viewportSize) {
-      height = itemLength * defaultHeight;
-    }
-  }
-  return height;
-}

package/node/lib/forms/slider/Slider.js

@@ -1,109 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _useId = _interopRequireDefault(require("../../helper/useId.js"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function Slider(_ref) {
-  let {
-    disabled = false,
-    label,
-    max,
-    min,
-    onChange,
-    onChangeCommitted,
-    step,
-    value,
-    showValue = true,
-    className,
-    id: idProps,
-    widthOffset = 8
-  } = _ref;
-  const id = (0, _useId.default)(idProps);
-  const [innerValue, setInnerValue] = (0, _react.useState)(value);
-  const [left, setLeft] = (0, _react.useState)(null);
-  const [numberoffset, setNumberOffset] = (0, _react.useState)(0);
-  const labelEl = (0, _react.useRef)(null);
-  const classes = (0, _classnames.default)("fwe-slider", {
-    "fr-slider-value": !label && showValue
-  }, {
-    "fr-slider-label": label && !showValue
-  }, {
-    "fr-slider-value-label": label && showValue
-  }, className);
-  (0, _react.useEffect)(() => {
-    setInnerValue(value);
-  }, [value]);
-  const updateValuePosition = (0, _react.useCallback)(() => {
-    if (labelEl.current) {
-      const {
-        width
-      } = labelEl.current.getBoundingClientRect();
-      const diff = max - min;
-      setLeft((innerValue - min) / diff * (width - widthOffset));
-      setNumberOffset(8 - innerValue.toString().length * 6);
-    }
-  }, [innerValue, max, min, widthOffset]);
-  const handleAfterChange = () => {
-    if (onChangeCommitted) {
-      onChangeCommitted(innerValue);
-    }
-  };
-  const handleChange = e => {
-    const newValue = Number.parseFloat(e.target.value);
-    setInnerValue(newValue);
-    if (onChange) {
-      onChange(e, newValue);
-    }
-  };
-  (0, _react.useEffect)(() => {
-    function handleResize() {
-      updateValuePosition();
-    }
-    window.addEventListener("resize", handleResize);
-    handleResize();
-
-    // Remove event listener on cleanup
-    return () => window.removeEventListener("resize", handleResize);
-  }, [updateValuePosition]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
-    ref: labelEl,
-    className: classes,
-    htmlFor: id,
-    children: [label && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-      children: label
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
-      id: id,
-      className: "fwe-slider-input",
-      type: "range",
-      disabled: disabled,
-      min: min,
-      max: max,
-      step: step,
-      onChange: handleChange,
-      value: innerValue,
-      onKeyUp: handleAfterChange,
-      onMouseUp: handleAfterChange,
-      onTouchEnd: handleAfterChange
-    }), showValue && left !== null && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-      className: "fr-slider-value",
-      style: {
-        left: `${left + numberoffset}px`
-      },
-      children: innerValue
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: `fr-slider-indicator${disabled ? " disabled" : ""}`,
-      style: {
-        width: `${left}px`
-      }
-    })]
-  });
-}
-var _default = exports.default = Slider;

package/node/lib/forms/switch/Switch.js

@@ -1,58 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _classnames = _interopRequireDefault(require("classnames"));
-var _useControlled = _interopRequireDefault(require("../../helper/useControlled.js"));
-var _useId = _interopRequireDefault(require("../../helper/useId.js"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function Switch(_ref) {
-  let {
-    labelPosition = "after",
-    large = false,
-    title,
-    value,
-    defaultValue,
-    disabled = false,
-    onChange,
-    className,
-    id: idProps
-  } = _ref;
-  const id = (0, _useId.default)(idProps);
-  const labelClassName = (0, _classnames.default)("fwe-switch", {
-    [`fwe-switch-label-${labelPosition}`]: true
-  }, {
-    "fwe-switch-lg": large
-  }, className);
-  const [currentValue, setCurrentValue] = (0, _useControlled.default)({
-    controlled: value,
-    default: defaultValue
-  });
-  const handleChange = () => {
-    const newValue = !currentValue;
-    setCurrentValue(newValue);
-    if (onChange) {
-      onChange(newValue);
-    }
-  };
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
-    className: labelClassName,
-    htmlFor: id,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
-      type: "checkbox",
-      disabled: disabled,
-      checked: currentValue,
-      onChange: () => handleChange(),
-      id: id
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "fwe-switch-track"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "fwe-switch-label-content",
-      children: title
-    })]
-  });
-}
-var _default = exports.default = Switch;

package/node/lib/forms/text-area/TextArea.js

@@ -1,118 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _useId = _interopRequireDefault(require("../../helper/useId.js"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function TextArea(_ref) {
-  let {
-    disabled,
-    onBlur,
-    onChange,
-    onFocus,
-    onInput,
-    readonly,
-    required,
-    label,
-    error,
-    hint,
-    value,
-    defaultValue,
-    name,
-    rows,
-    maxLength,
-    className,
-    id: idProps
-  } = _ref;
-  const controlled = value !== undefined;
-  const [innerValue, setInnerValue] = (0, _react.useState)(controlled ? value : defaultValue);
-  const id = (0, _useId.default)(idProps);
-  const hintClasses = (0, _classnames.default)("fwe-input-text-info");
-  const shadowRef = _react.default.useRef(null);
-  const ref = _react.default.useRef(null);
-  const [height, setHeight] = (0, _react.useState)(undefined);
-  (0, _react.useEffect)(() => {
-    if (controlled) {
-      setInnerValue(value);
-    }
-  }, [value, controlled]);
-  (0, _react.useEffect)(() => {
-    const input = ref.current;
-    const shadow = shadowRef.current;
-    const minRows = 2;
-    if (shadow && input) {
-      shadow.value = input.value || "x";
-      shadow.style.width = `${input.clientWidth}`;
-      const newHeight = Math.max(minRows * 24, shadow.scrollHeight);
-      setHeight(newHeight + 4 + 4 + 1);
-    }
-  }, []);
-  function handleChange(event) {
-    if (!controlled) {
-      setInnerValue(event.target.value);
-    }
-    if (onChange) {
-      onChange(event);
-    }
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
-    className: (0, _classnames.default)("fwe-input-text", className),
-    htmlFor: id,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("textarea", {
-      style: {
-        ...(!rows && {
-          height,
-          overflow: "hidden"
-        })
-      },
-      ref: ref,
-      name: name,
-      className: (0, _classnames.default)("fr-textarea", `fwe-row-${rows}`),
-      disabled: disabled,
-      readOnly: readonly,
-      required: required,
-      autoComplete: "off",
-      onChange: handleChange,
-      onFocus: onFocus,
-      onInput: onInput,
-      onBlur: onBlur,
-      maxLength: maxLength,
-      defaultValue: defaultValue,
-      value: value,
-      id: id
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("textarea", {
-      style: {
-        visibility: "hidden",
-        position: "absolute",
-        overflow: "hidden",
-        height: 0,
-        top: 0,
-        left: 0,
-        transform: "translateZ(0)",
-        padding: "0"
-      },
-      ref: shadowRef,
-      readOnly: true
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-      className: "fwe-input-text-label",
-      children: label
-    }), hint && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-      className: hintClasses,
-      children: hint
-    }), error !== undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-      className: "fwe-input-text-invalid",
-      children: error
-    }), !!maxLength && innerValue !== undefined && /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-      className: "fwe-input-text-count",
-      children: [innerValue.length, " /", maxLength]
-    })]
-  });
-}
-var _default = exports.default = TextArea;