@festo-ui/react 9.0.0-dev.711 → 9.0.0-dev.713

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

@@ -0,0 +1,23 @@
+"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

@@ -0,0 +1,109 @@
+"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

@@ -0,0 +1,28 @@
+"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

@@ -0,0 +1,27 @@
+"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

@@ -0,0 +1,48 @@
+"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

@@ -0,0 +1,43 @@
+"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

@@ -0,0 +1,23 @@
+"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

@@ -0,0 +1,23 @@
+"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

@@ -0,0 +1,109 @@
+"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

@@ -0,0 +1,58 @@
+"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

@@ -0,0 +1,118 @@
+"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;