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

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

@@ -1,102 +0,0 @@
-import { createRef, forwardRef, isValidElement, useEffect, useRef, useState } from "react";
-import { usePopper } from "react-popper";
-import SelectScrollContainer from "./SelectScrollContainer.js";
-import ListItem from "./ListItem.js";
-import getChildren from "./utils.js";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-function SelectOptionsContainerComponent(_ref, ref) {
-  let {
-    options,
-    config,
-    onClose,
-    label,
-    onOptionChange,
-    multiple,
-    children
-  } = _ref;
-  const [popperElement, setPopperElement] = useState(null);
-  const refObject = typeof ref !== "function" ? ref?.current : null;
-  const {
-    styles,
-    attributes
-  } = 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 = getChildren(children);
-  const childrenList = allChildren.childrenList;
-  const usedOptions = options ?? childrenList.map(child => child.props.option);
-  const {
-    length
-  } = usedOptions;
-  const listItemRef = useRef(Array.from({
-    length
-  }, () => /*#__PURE__*/createRef()));
-  const selectedIndex = Array.isArray(label) ? usedOptions.findIndex(option => option.label === label.at(-1)) : usedOptions.findIndex(option => option.label === label);
-  const [init, setInit] = useState(false);
-  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__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx("div", {
-      "aria-hidden": true,
-      className: "fr-backdrop",
-      onClick: onClose
-    }), /*#__PURE__*/_jsxs("ul", {
-      ref: setPopperElement,
-      style: getCssProperies(),
-      ...attributes.popper,
-      className: "fwe-select-options-container",
-      children: [allChildren.before, /*#__PURE__*/_jsx(SelectScrollContainer, {
-        length: length,
-        config: config,
-        children: [...(options || []), ...childrenList].map((item, i) => /*#__PURE__*/_jsx(ListItem, {
-          withCheckbox: multiple,
-          item: item,
-          selectedLabel: label,
-          onClose: onClose,
-          onFocusChange: index => listItemRef.current[index].current?.focus(),
-          onOptionChange: onOptionChange,
-          ref: listItemRef,
-          index: i,
-          options: usedOptions
-        }, (/*#__PURE__*/isValidElement(item) ? item.props.option : item).data))
-      }), allChildren.after]
-    })]
-  });
-}
-const SelectOptionsContainer = /*#__PURE__*/forwardRef(SelectOptionsContainerComponent);
-export default SelectOptionsContainer;

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

@@ -1,21 +0,0 @@
-import calcVirtualScrollHeight from "../utils.js";
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-export default function SelectScrollContainer(_ref) {
-  let {
-    config,
-    children,
-    length
-  } = _ref;
-  if (config?.scroll?.enabled) {
-    return /*#__PURE__*/_jsx("div", {
-      className: "fr-select-scroll",
-      style: {
-        height: calcVirtualScrollHeight(config, length)
-      },
-      children: children
-    });
-  }
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: children
-  });
-}

package/lib/forms/select/internal/SelectWrapper.d.ts

@@ -1,6 +0,0 @@
-import { ComponentPropsWithoutRef } from "react";
-interface SelectWrapperProps extends ComponentPropsWithoutRef<"div"> {
-    disabled?: boolean;
-}
-declare const SelectWrapper: (props: SelectWrapperProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
-export default SelectWrapper;

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

@@ -1,20 +0,0 @@
-import cn from "classnames";
-import { forwardRef } from "react";
-import { jsx as _jsx } from "react/jsx-runtime";
-const SelectWrapper = /*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
-    children,
-    disabled,
-    className,
-    ...props
-  } = _ref;
-  return /*#__PURE__*/_jsx("div", {
-    ...props,
-    ref: ref,
-    className: cn("fwe-select-wrapper", {
-      "fwe-disabled": disabled
-    }, className),
-    children: children
-  });
-});
-export default SelectWrapper;

package/lib/forms/select/internal/index.d.ts

@@ -1,6 +0,0 @@
-export { default as HiddenInput } from "./HiddenInput";
-export { default as ListItem } from "./ListItem";
-export { default as SelectButton } from "./SelectButton";
-export { default as OptionsContainer } from "./SelectOptionsContainer";
-export { default as Wrapper } from "./SelectWrapper";
-export { default as SelectLabel } from "./SelectLabel";

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

@@ -1,6 +0,0 @@
-export { default as HiddenInput } from "./HiddenInput.js";
-export { default as ListItem } from "./ListItem.js";
-export { default as SelectButton } from "./SelectButton.js";
-export { default as OptionsContainer } from "./SelectOptionsContainer.js";
-export { default as Wrapper } from "./SelectWrapper.js";
-export { default as SelectLabel } from "./SelectLabel.js";

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

@@ -1,36 +0,0 @@
-import React from "react";
-import cn from "classnames";
-import SelectOption from "../select-option/SelectOption.js";
-export default function getChildren(children) {
-  const before = [];
-  const childrenList = [];
-  const after = [];
-  let foundFirstOption = false;
-  React.Children.forEach(children, element => {
-    if (/*#__PURE__*/React.isValidElement(element)) {
-      if (/*#__PURE__*/React.isValidElement(element) && element.type === SelectOption) {
-        foundFirstOption = true;
-        const className = cn("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/lib/forms/select/select-option/SelectOption.js

@@ -1,17 +0,0 @@
-import { forwardRef } from "react";
-import { jsx as _jsx } from "react/jsx-runtime";
-function SelectOptionComponent(_ref, ref) {
-  let {
-    children,
-    className,
-    ...props
-  } = _ref;
-  return /*#__PURE__*/_jsx("span", {
-    ref: ref,
-    className: className,
-    ...props,
-    children: children
-  });
-}
-const SelectOption = /*#__PURE__*/forwardRef(SelectOptionComponent);
-export default SelectOption;

package/lib/forms/select/utils.d.ts

@@ -1,2 +0,0 @@
-import { SelectConfiguration } from "../../helper/types";
-export default function calcVirtualScrollHeight(config: SelectConfiguration | undefined, itemLength: number): number;

package/lib/forms/select/utils.js

@@ -1,17 +0,0 @@
-export default 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/lib/forms/slider/Slider.d.ts

@@ -1,18 +0,0 @@
-import React from "react";
-import { ClassNameProps } from "../../helper/types";
-import "./Slider.scss";
-interface SliderProps extends ClassNameProps {
-    disabled?: boolean;
-    min: number;
-    max: number;
-    step?: number;
-    value: number;
-    onChangeCommitted?: (value: number) => void;
-    label?: string;
-    showValue?: boolean;
-    onChange?: (event: React.ChangeEvent<HTMLInputElement>, value: number) => void;
-    id?: string;
-    widthOffset?: number;
-}
-declare function Slider({ disabled, label, max, min, onChange, onChangeCommitted, step, value, showValue, className, id: idProps, widthOffset, }: SliderProps): import("react/jsx-runtime").JSX.Element;
-export default Slider;

package/lib/forms/slider/Slider.js

@@ -1,100 +0,0 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
-import classNames from "classnames";
-import useId from "../../helper/useId.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function Slider(_ref) {
-  let {
-    disabled = false,
-    label,
-    max,
-    min,
-    onChange,
-    onChangeCommitted,
-    step,
-    value,
-    showValue = true,
-    className,
-    id: idProps,
-    widthOffset = 8
-  } = _ref;
-  const id = useId(idProps);
-  const [innerValue, setInnerValue] = useState(value);
-  const [left, setLeft] = useState(null);
-  const [numberoffset, setNumberOffset] = useState(0);
-  const labelEl = useRef(null);
-  const classes = classNames("fwe-slider", {
-    "fr-slider-value": !label && showValue
-  }, {
-    "fr-slider-label": label && !showValue
-  }, {
-    "fr-slider-value-label": label && showValue
-  }, className);
-  useEffect(() => {
-    setInnerValue(value);
-  }, [value]);
-  const updateValuePosition = 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);
-    }
-  };
-  useEffect(() => {
-    function handleResize() {
-      updateValuePosition();
-    }
-    window.addEventListener("resize", handleResize);
-    handleResize();
-
-    // Remove event listener on cleanup
-    return () => window.removeEventListener("resize", handleResize);
-  }, [updateValuePosition]);
-  return /*#__PURE__*/_jsxs("label", {
-    ref: labelEl,
-    className: classes,
-    htmlFor: id,
-    children: [label && /*#__PURE__*/_jsx("span", {
-      children: label
-    }), /*#__PURE__*/_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__*/_jsx("span", {
-      className: "fr-slider-value",
-      style: {
-        left: `${left + numberoffset}px`
-      },
-      children: innerValue
-    }), /*#__PURE__*/_jsx("div", {
-      className: `fr-slider-indicator${disabled ? " disabled" : ""}`,
-      style: {
-        width: `${left}px`
-      }
-    })]
-  });
-}
-export default Slider;

package/lib/forms/switch/Switch.d.ts

@@ -1,13 +0,0 @@
-import { ClassNameProps } from "../../helper/types";
-export interface SwitchProps extends ClassNameProps {
-    labelPosition?: "before" | "after" | "below";
-    large?: boolean;
-    title: string;
-    value?: boolean;
-    defaultValue?: boolean;
-    disabled?: boolean;
-    onChange?: (value: boolean) => void;
-    id?: string;
-}
-declare function Switch({ labelPosition, large, title, value, defaultValue, disabled, onChange, className, id: idProps, }: SwitchProps): import("react/jsx-runtime").JSX.Element;
-export default Switch;

package/lib/forms/switch/Switch.js

@@ -1,51 +0,0 @@
-import classNames from "classnames";
-import useControlled from "../../helper/useControlled.js";
-import useId from "../../helper/useId.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function Switch(_ref) {
-  let {
-    labelPosition = "after",
-    large = false,
-    title,
-    value,
-    defaultValue,
-    disabled = false,
-    onChange,
-    className,
-    id: idProps
-  } = _ref;
-  const id = useId(idProps);
-  const labelClassName = classNames("fwe-switch", {
-    [`fwe-switch-label-${labelPosition}`]: true
-  }, {
-    "fwe-switch-lg": large
-  }, className);
-  const [currentValue, setCurrentValue] = useControlled({
-    controlled: value,
-    default: defaultValue
-  });
-  const handleChange = () => {
-    const newValue = !currentValue;
-    setCurrentValue(newValue);
-    if (onChange) {
-      onChange(newValue);
-    }
-  };
-  return /*#__PURE__*/_jsxs("label", {
-    className: labelClassName,
-    htmlFor: id,
-    children: [/*#__PURE__*/_jsx("input", {
-      type: "checkbox",
-      disabled: disabled,
-      checked: currentValue,
-      onChange: () => handleChange(),
-      id: id
-    }), /*#__PURE__*/_jsx("div", {
-      className: "fwe-switch-track"
-    }), /*#__PURE__*/_jsx("div", {
-      className: "fwe-switch-label-content",
-      children: title
-    })]
-  });
-}
-export default Switch;

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

@@ -1,109 +0,0 @@
-import React, { useEffect, useState } from "react";
-import classNames from "classnames";
-import useId from "../../helper/useId.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-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] = useState(controlled ? value : defaultValue);
-  const id = useId(idProps);
-  const hintClasses = classNames("fwe-input-text-info");
-  const shadowRef = React.useRef(null);
-  const ref = React.useRef(null);
-  const [height, setHeight] = useState(undefined);
-  useEffect(() => {
-    if (controlled) {
-      setInnerValue(value);
-    }
-  }, [value, controlled]);
-  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__*/_jsxs("label", {
-    className: classNames("fwe-input-text", className),
-    htmlFor: id,
-    children: [/*#__PURE__*/_jsx("textarea", {
-      style: {
-        ...(!rows && {
-          height,
-          overflow: "hidden"
-        })
-      },
-      ref: ref,
-      name: name,
-      className: classNames("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__*/_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__*/_jsx("span", {
-      className: "fwe-input-text-label",
-      children: label
-    }), hint && /*#__PURE__*/_jsx("span", {
-      className: hintClasses,
-      children: hint
-    }), error !== undefined && /*#__PURE__*/_jsx("span", {
-      className: "fwe-input-text-invalid",
-      children: error
-    }), !!maxLength && innerValue !== undefined && /*#__PURE__*/_jsxs("span", {
-      className: "fwe-input-text-count",
-      children: [innerValue.length, " /", maxLength]
-    })]
-  });
-}
-export default TextArea;

package/lib/forms/text-input/TextInput.js

@@ -1,91 +0,0 @@
-import { forwardRef, useEffect, useRef } from "react";
-import classNames from "classnames";
-import useId from "../../helper/useId.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const TextInput = /*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
-    disabled,
-    required,
-    readonly,
-    placeholder,
-    max,
-    min,
-    onBlur,
-    onFocus,
-    onInput,
-    step,
-    type,
-    value,
-    defaultValue,
-    name,
-    error,
-    hint,
-    label,
-    labelClassName,
-    icon,
-    id: idProps,
-    autoFocus,
-    ...props
-  } = _ref;
-  const id = useId(idProps);
-  const inputRef = useRef(null);
-
-  // Programmatically focus the input instead of using autoFocus attribute
-  useEffect(() => {
-    if (autoFocus && inputRef.current) {
-      // Short delay to ensure component is fully rendered
-      const timer = setTimeout(() => {
-        inputRef.current?.focus();
-      }, 0);
-      return () => clearTimeout(timer);
-    }
-    return undefined;
-  }, [autoFocus]);
-  const supported = ["text", "number", "password", "datetime-local"];
-  const innerType = type && supported.includes(type) ? type : "text";
-  const labelClasses = classNames("fwe-input-text", {
-    "fwe-input-text-icon": icon
-  }, labelClassName);
-  const hintClasses = classNames("fwe-input-text-info");
-  function handleChange(e) {
-    if (props.onChange) {
-      props.onChange(e);
-    }
-  }
-  return /*#__PURE__*/_jsxs("label", {
-    className: labelClasses,
-    htmlFor: id,
-    ref: ref,
-    children: [/*#__PURE__*/_jsx("input", {
-      name: name,
-      disabled: disabled,
-      required: required,
-      readOnly: readonly,
-      placeholder: placeholder,
-      autoComplete: "off",
-      min: min,
-      max: max,
-      step: step,
-      onChange: handleChange,
-      onBlur: onBlur,
-      onFocus: onFocus,
-      onInput: onInput,
-      type: innerType,
-      value: value,
-      defaultValue: defaultValue,
-      id: id,
-      ref: inputRef,
-      ...props
-    }), icon, /*#__PURE__*/_jsx("span", {
-      className: "fwe-input-text-label",
-      children: label
-    }), hint && /*#__PURE__*/_jsx("span", {
-      className: hintClasses,
-      children: hint
-    }), error && /*#__PURE__*/_jsx("span", {
-      className: "fwe-input-text-invalid",
-      children: error
-    })]
-  });
-});
-export default TextInput;