@festo-ui/react 8.2.0-dev.582 → 8.2.0-dev.584

package/node/lib/components/tab/useTabScroll.js

@@ -15,13 +15,13 @@ const useTabScroll = (tabLength, componentId, refs) => {
     scrollArea
   } = refs;
   const [style, setStyle] = (0, _react.useState)({});
-  const [classes, setClasses] = (0, _react.useState)('');
+  const [classes, setClasses] = (0, _react.useState)("");
   function getScrollContentStyleValue(propName) {
-    return scrollContent.current ? window.getComputedStyle(scrollContent.current).getPropertyValue(propName) : '';
+    return scrollContent.current ? window.getComputedStyle(scrollContent.current).getPropertyValue(propName) : "";
   }
   function calculateCurrentTranslateX() {
-    const transformValue = getScrollContentStyleValue('transform');
-    if (transformValue === 'none') {
+    const transformValue = getScrollContentStyleValue("transform");
+    if (transformValue === "none") {
       return 0;
     }
 
@@ -34,7 +34,7 @@ const useTabScroll = (tabLength, componentId, refs) => {
     const matrixParams = match[1];
     // we need value of tx -> translateX
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const [a, b, c, d, tx, ty] = matrixParams.split(',');
+    const [a, b, c, d, tx, ty] = matrixParams.split(",");
     return parseFloat(tx);
   }
   function getScrollPosition() {
@@ -71,9 +71,9 @@ const useTabScroll = (tabLength, componentId, refs) => {
   }
   function stopScrollAnimation() {
     const currentScrollPosition = getAnimatingScrollPosition();
-    setClasses('');
+    setClasses("");
     setStyle({
-      transform: 'translateX(0px)'
+      transform: "translateX(0px)"
     });
     if (scrollArea.current) {
       scrollArea.current.scrollLeft = currentScrollPosition;
@@ -100,9 +100,9 @@ const useTabScroll = (tabLength, componentId, refs) => {
       scrollArea.current.getBoundingClientRect();
     }
     requestAnimationFrame(() => {
-      setClasses('fr-tab-scroller--animating');
+      setClasses("fr-tab-scroller--animating");
       setStyle({
-        transform: 'none'
+        transform: "none"
       });
     });
   }
@@ -117,7 +117,7 @@ const useTabScroll = (tabLength, componentId, refs) => {
   function computeDimensions(tab) {
     const rootWidth = tab.offsetWidth;
     const rootLeft = tab.offsetLeft;
-    const tabContent = tab.querySelector('.fr-tab-content');
+    const tabContent = tab.querySelector(".fr-tab-content");
     const contentWidth = tabContent?.offsetWidth ?? 0;
     const contentLeft = tabContent?.offsetLeft ?? 0;
     return {

package/node/lib/components/table-header-cell/TableHeaderCell.js

@@ -22,12 +22,12 @@ const TableHeaderCell = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("th", {
     ...props,
-    className: (0, _classnames.default)('fwe-table-order', {
-      'fwe-active': active
+    className: (0, _classnames.default)("fwe-table-order", {
+      "fwe-active": active
     }, {
-      'fwe-table-order-ascending': active && ascending
+      "fwe-table-order-ascending": active && ascending
     }, {
-      'fwe-table-order-descending': active && !ascending
+      "fwe-table-order-descending": active && !ascending
     }, className),
     onClick: handleClick,
     ref: ref

package/node/lib/forms/checkbox/Checkbox.js

@@ -18,7 +18,7 @@ function Checkbox(_ref) {
     name,
     large = false,
     valid = true,
-    labelPosition = 'after',
+    labelPosition = "after",
     required,
     disabled = false,
     indeterminate = false,
@@ -35,20 +35,20 @@ function Checkbox(_ref) {
     setChecked(newChecked);
     onChange?.(newChecked, e);
   };
-  const containerClasses = (0, _classnames.default)('fwe-checkbox-container', {
-    'fr-checkbox-large': large
+  const containerClasses = (0, _classnames.default)("fwe-checkbox-container", {
+    "fr-checkbox-large": large
   }, {
-    'fr-checkbox-invalid': !valid || required
+    "fr-checkbox-invalid": !valid || required
   }, {
-    'fwe-disabled': disabled
+    "fwe-disabled": disabled
   }, {
-    'fwe-checked': isChecked
+    "fwe-checked": isChecked
   }, {
-    'fwe-label-below': labelPosition === 'below'
+    "fwe-label-below": labelPosition === "below"
   }, {
-    'fwe-label-before': labelPosition === 'before'
+    "fwe-label-before": labelPosition === "before"
   }, {
-    'fr-checkbox-indeterminate': indeterminate
+    "fr-checkbox-indeterminate": indeterminate
   }, className);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
     className: containerClasses,

package/node/lib/forms/color-indicator/ColorIndicator.js

@@ -21,11 +21,11 @@ function ColorIndicator(_ref) {
     children,
     disabled
   } = _ref;
-  const classes = (0, _classnames.default)('fwe-color-indicator', className, disabled);
+  const classes = (0, _classnames.default)("fwe-color-indicator", className, disabled);
   const [isEditorOpen, setEditorOpen] = (0, _react.useState)(false);
   function getBorderColor() {
-    if (!color || color.toUpperCase() === '#FFFFFF' || color.toUpperCase() === '#F0F2F3') {
-      return '#b6bec6'; // = $control-border
+    if (!color || color.toUpperCase() === "#FFFFFF" || color.toUpperCase() === "#F0F2F3") {
+      return "#b6bec6"; // = $control-border
     }
     return color;
   }
@@ -108,7 +108,7 @@ function ColorIndicator(_ref) {
       children: [wrapperChildren, " ", text && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "fwe-color-indicator-text",
         children: text
-      }), ' ']
+      }), " "]
     })]
   });
   return showPopOver ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popover.default, {

package/node/lib/forms/radio/RadioButton.js

@@ -18,7 +18,7 @@ function Radio(props) {
     name,
     defaultChecked: defaultCheckedProp,
     checked,
-    labelPosition = 'after',
+    labelPosition = "after",
     large = false,
     disabled = false,
     required = false,
@@ -36,12 +36,12 @@ function Radio(props) {
     isControlled
   } = (0, _react.useContext)(_RadioGroupContext.default);
   const innerLabelPosition = groupLabelPosition ?? labelPosition;
-  const classes = (0, _classnames.default)('fwe-radio', {
-    'fwe-radio-label-below': innerLabelPosition === 'below'
+  const classes = (0, _classnames.default)("fwe-radio", {
+    "fwe-radio-label-below": innerLabelPosition === "below"
   }, {
-    'fwe-radio-label-before': innerLabelPosition === 'before'
+    "fwe-radio-label-before": innerLabelPosition === "before"
   }, {
-    'fwe-radio-lg': large || groupLarge
+    "fwe-radio-lg": large || groupLarge
   }, className);
   const controlledChecked = checked !== undefined || isControlled && groupValue !== undefined ? Boolean(checked || groupValue === value) : undefined;
   const getDefaultChecked = () => {
@@ -82,7 +82,7 @@ function Radio(props) {
         required: required || groupRequired
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "fwe-radio-checkmark"
-      }), ' ']
+      }), " "]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "fwe-radio-label-content",
       children: children

package/node/lib/forms/radio/RadioGroup.js

@@ -48,7 +48,7 @@ const RadioGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     value: contextValue,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       ref: ref,
-      className: (0, _classnames.default)('fwe-radio-group', className),
+      className: (0, _classnames.default)("fwe-radio-group", className),
       role: "radiogroup",
       ...props,
       children: children

package/node/lib/forms/segment/Segment.js

@@ -28,7 +28,7 @@ function Segment(props) {
   };
   let useIcon = false;
   let useIconAndText = false;
-  let tmpValue = '';
+  let tmpValue = "";
   _react.default.Children.forEach(children, (child, index) => {
     if (! /*#__PURE__*/_react.default.isValidElement(child)) {
       return null;
@@ -56,10 +56,10 @@ function Segment(props) {
     setValue(_value);
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("fieldset", {
-    className: (0, _classnames.default)('fwe-segment', {
-      'fwe-segment-outline': innerConfig.outline,
-      'fwe-segment-icon': useIcon,
-      'fwe-segment-icon-text': useIconAndText
+    className: (0, _classnames.default)("fwe-segment", {
+      "fwe-segment-outline": innerConfig.outline,
+      "fwe-segment-icon": useIcon,
+      "fwe-segment-icon-text": useIconAndText
     }, className),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("legend", {
       className: "fwe-sr-only fwe-d-inline-block",

package/node/lib/forms/segment/segment-control/SegmentControl.js

@@ -24,10 +24,10 @@ function SegmentControl(props) {
     className,
     iconOnly
   } = props;
-  const componentId = (0, _react.useRef)(id ?? (Math.random() * Date.now()).toString().replace('.', '-'));
-  let viewMode = 'text';
+  const componentId = (0, _react.useRef)(id ?? (Math.random() * Date.now()).toString().replace(".", "-"));
+  let viewMode = "text";
   if (icon) {
-    viewMode = iconOnly ? 'icon' : 'icon-text';
+    viewMode = iconOnly ? "icon" : "icon-text";
   }
   const handleChange = event => {
     if (onChange) {
@@ -45,16 +45,16 @@ function SegmentControl(props) {
       disabled: disabled,
       onChange: e => handleChange(e)
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
-      className: (0, _classnames.default)('fwe-segment-label', className),
+      className: (0, _classnames.default)("fwe-segment-label", className),
       htmlFor: componentId.current,
-      children: [viewMode === 'icon' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [viewMode === "icon" && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
           className: "fwe-sr-only",
           children: label
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconWrapper.default, {
           icon: icon
         })]
-      }), viewMode === 'text' && label, viewMode === 'icon-text' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      }), viewMode === "text" && label, viewMode === "icon-text" && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_IconWrapper.default, {
           icon: icon
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {

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

@@ -14,7 +14,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function SelectComponent(_ref, ref) {
   let {
-    defaultValue = '',
+    defaultValue = "",
     open,
     defaultOpen = false,
     value: controlled,

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

@@ -34,25 +34,25 @@ function ListItemComponent(_ref, ref) {
   } : {};
   const checked = Array.isArray(selectedLabel) ? selectedLabel.includes(option.label) : selectedLabel === option.label;
   function handleKeyDown(e) {
-    const arrowKeys = ['ArrowDown', 'ArrowUp'];
-    const validKeys = ['Enter', ' '];
+    const arrowKeys = ["ArrowDown", "ArrowUp"];
+    const validKeys = ["Enter", " "];
     if (arrowKeys.concat(validKeys).includes(e.key)) {
       e.preventDefault();
     }
-    if (e.key === 'ArrowDown') {
+    if (e.key === "ArrowDown") {
       onFocusChange((index + 1) % options.length);
     }
-    if (e.key === 'ArrowUp') {
+    if (e.key === "ArrowUp") {
       const nextIndex = (index - 1 + options.length) % options.length;
       onFocusChange(nextIndex);
     }
-    if (['Enter', ' '].includes(e.key)) {
+    if (["Enter", " "].includes(e.key)) {
       if (option.disabled) {
         return;
       }
       onOptionChange(option);
     }
-    if (e.key === 'Escape') {
+    if (e.key === "Escape") {
       onClose();
     }
   }
@@ -62,15 +62,15 @@ function ListItemComponent(_ref, ref) {
     }
     onOptionChange(option);
   }
-  const itemRef = typeof ref !== 'function' ? ref?.current?.[index] : undefined;
+  const itemRef = typeof ref !== "function" ? ref?.current?.[index] : undefined;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
     onClick: handleClick,
     ref: itemRef,
     role: "option",
     onKeyDown: handleKeyDown,
     "aria-selected": checked,
-    className: (0, _classnames.default)('fwe-select-option', {
-      'fwe-empty': !option.label
+    className: (0, _classnames.default)("fwe-select-option", {
+      "fwe-empty": !option.label
     }, className),
     tabIndex: 0,
     ...restProps,

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

@@ -25,7 +25,7 @@ const SelectButton = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     if (disabled) {
       return;
     }
-    const validKeys = ['Enter', ' ', 'ArrowUp', 'ArrowDown'];
+    const validKeys = ["Enter", " ", "ArrowUp", "ArrowDown"];
     if (validKeys.includes(e.key)) {
       e.preventDefault();
       onToggle();
@@ -41,12 +41,12 @@ const SelectButton = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     role: "button",
     tabIndex: 0,
-    className: (0, _classnames.default)('fwe-select', {
-      'fwe-focus': focused,
-      'fwe-empty': empty,
-      'fwe-required': required,
-      'fwe-disabled': disabled,
-      'fwe-invalid': error
+    className: (0, _classnames.default)("fwe-select", {
+      "fwe-focus": focused,
+      "fwe-empty": empty,
+      "fwe-required": required,
+      "fwe-disabled": disabled,
+      "fwe-invalid": error
     }),
     onClick: handleClick,
     ref: ref,

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

@@ -14,10 +14,10 @@ function SelectLabel(_ref) {
     id
   } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
-    className: (0, _classnames.default)('fwe-select-label', {
-      'fwe-sr-only': hideLabel
+    className: (0, _classnames.default)("fwe-select-label", {
+      "fwe-sr-only": hideLabel
     }),
     htmlFor: id,
-    children: label || ''
+    children: label || ""
   });
 }

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

@@ -18,8 +18,8 @@ const SelectWrapper = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     ...props,
     ref: ref,
-    className: (0, _classnames.default)('fwe-select-wrapper', {
-      'fwe-disabled': disabled
+    className: (0, _classnames.default)("fwe-select-wrapper", {
+      "fwe-disabled": disabled
     }, className),
     children: children
   });

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

@@ -17,7 +17,7 @@ function getChildren(children) {
     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 className = (0, _classnames.default)("fwe-select-option-content", element.props.className);
         const {
           props
         } = element;

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

@@ -30,12 +30,12 @@ function Slider(_ref) {
   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
+  const classes = (0, _classnames.default)("fwe-slider", {
+    "fr-slider-value": !label && showValue
   }, {
-    'fr-slider-label': label && !showValue
+    "fr-slider-label": label && !showValue
   }, {
-    'fr-slider-value-label': label && showValue
+    "fr-slider-value-label": label && showValue
   }, className);
   (0, _react.useEffect)(() => {
     setInnerValue(value);
@@ -66,11 +66,11 @@ function Slider(_ref) {
     function handleResize() {
       updateValuePosition();
     }
-    window.addEventListener('resize', handleResize);
+    window.addEventListener("resize", handleResize);
     handleResize();
 
     // Remove event listener on cleanup
-    return () => window.removeEventListener('resize', handleResize);
+    return () => window.removeEventListener("resize", handleResize);
   }, [updateValuePosition]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
     ref: labelEl,
@@ -98,7 +98,7 @@ function Slider(_ref) {
       },
       children: innerValue
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: `fr-slider-indicator${disabled ? ' disabled' : ''}`,
+      className: `fr-slider-indicator${disabled ? " disabled" : ""}`,
       style: {
         width: `${left}px`
       }

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

@@ -11,7 +11,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function Switch(_ref) {
   let {
-    labelPosition = 'after',
+    labelPosition = "after",
     large = false,
     title,
     value,
@@ -22,10 +22,10 @@ function Switch(_ref) {
     id: idProps
   } = _ref;
   const id = (0, _useId.default)(idProps);
-  const labelClassName = (0, _classnames.default)('fwe-switch', {
+  const labelClassName = (0, _classnames.default)("fwe-switch", {
     [`fwe-switch-label-${labelPosition}`]: true
   }, {
-    'fwe-switch-lg': large
+    "fwe-switch-lg": large
   }, className);
   const [currentValue, setCurrentValue] = (0, _useControlled.default)({
     controlled: value,

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

@@ -33,7 +33,7 @@ function TextArea(_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 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);
@@ -47,7 +47,7 @@ function TextArea(_ref) {
     const shadow = shadowRef.current;
     const minRows = 2;
     if (shadow && input) {
-      shadow.value = input.value || 'x';
+      shadow.value = input.value || "x";
       shadow.style.width = `${input.clientWidth}`;
       const newHeight = Math.max(minRows * 24, shadow.scrollHeight);
       setHeight(newHeight + 4 + 4 + 1);
@@ -62,17 +62,17 @@ function TextArea(_ref) {
     }
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
-    className: (0, _classnames.default)('fwe-input-text', className),
+    className: (0, _classnames.default)("fwe-input-text", className),
     htmlFor: id,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("textarea", {
       style: {
         ...(!rows && {
           height,
-          overflow: 'hidden'
+          overflow: "hidden"
         })
       },
       ref: ref,
-      className: (0, _classnames.default)('fr-textarea', `fwe-row-${rows}`),
+      className: (0, _classnames.default)("fr-textarea", `fwe-row-${rows}`),
       disabled: disabled,
       readOnly: readonly,
       required: required,
@@ -87,14 +87,14 @@ function TextArea(_ref) {
       id: id
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("textarea", {
       style: {
-        visibility: 'hidden',
-        position: 'absolute',
-        overflow: 'hidden',
+        visibility: "hidden",
+        position: "absolute",
+        overflow: "hidden",
         height: 0,
         top: 0,
         left: 0,
-        transform: 'translateZ(0)',
-        padding: '0'
+        transform: "translateZ(0)",
+        padding: "0"
       },
       ref: shadowRef,
       readOnly: true