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

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

@@ -0,0 +1,57 @@
+import cn from "classnames";
+import { forwardRef } from "react";
+import SelectButtonContent from "./SelectButtonContent.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const SelectButton = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    onToggle,
+    disabled,
+    label,
+    focused,
+    required,
+    error,
+    onChipClick,
+    renderLabelContent
+  } = _ref;
+  const empty = label === undefined && !focused;
+  function handleKeyDown(e) {
+    if (disabled) {
+      return;
+    }
+    const validKeys = ["Enter", " ", "ArrowUp", "ArrowDown"];
+    if (validKeys.includes(e.key)) {
+      e.preventDefault();
+      onToggle();
+    }
+  }
+  function handleClick(e) {
+    if (disabled) {
+      return;
+    }
+    e.stopPropagation();
+    onToggle();
+  }
+  return /*#__PURE__*/_jsx("div", {
+    role: "button",
+    tabIndex: 0,
+    className: cn("fwe-select", {
+      "fwe-focus": focused,
+      "fwe-empty": empty,
+      "fwe-required": required,
+      "fwe-disabled": disabled,
+      "fwe-invalid": error
+    }),
+    onClick: handleClick,
+    ref: ref,
+    onKeyDown: handleKeyDown,
+    children: /*#__PURE__*/_jsx("div", {
+      className: "fwe-select-content",
+      children: /*#__PURE__*/_jsx(SelectButtonContent, {
+        onClick: onChipClick,
+        label: label,
+        renderLabelContent: renderLabelContent
+      })
+    })
+  });
+});
+export default SelectButton;

package/{dist → lib}/forms/select/internal/SelectButtonContent.d.ts

@@ -3,5 +3,5 @@ interface SelectButtonContentProps {
     renderLabelContent?: (label?: string | string[]) => JSX.Element;
     onClick: (label: string) => void;
 }
-export declare function SelectButtonContent({ label, renderLabelContent, onClick, }: SelectButtonContentProps): import("react/jsx-runtime").JSX.Element;
+export default function SelectButtonContent({ label, renderLabelContent, onClick, }: SelectButtonContentProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -0,0 +1,38 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+
+import { IconCloseSmall } from "@festo-ui/react-icons";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+export default function SelectButtonContent(_ref) {
+  let {
+    label,
+    renderLabelContent,
+    onClick
+  } = _ref;
+  const handleChipClick = chipLabel => e => {
+    e.stopPropagation();
+    onClick(chipLabel);
+  };
+  if (renderLabelContent) {
+    return renderLabelContent(label);
+  }
+  if (Array.isArray(label)) {
+    return /*#__PURE__*/_jsx("div", {
+      className: "fwe-chip-container",
+      children: label.map(v => /*#__PURE__*/_jsxs("div", {
+        className: "fwe-chip chip-text-truncate fwe-pr-4",
+        title: v,
+        children: [v, /*#__PURE__*/_jsx("span", {
+          className: "chip-removable",
+          onClick: handleChipClick(v),
+          children: /*#__PURE__*/_jsx(IconCloseSmall, {
+            size: 16
+          })
+        })]
+      }, v))
+    });
+  }
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: label
+  });
+}

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

@@ -0,0 +1,4 @@
+import { CheckboxProps } from "../../checkbox/Checkbox";
+export default function SelectCheckbox({ children, withCheckbox, ...props }: CheckboxProps & {
+    withCheckbox?: boolean;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,19 @@
+import Checkbox from "../../checkbox/Checkbox.js";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+export default function SelectCheckbox(_ref) {
+  let {
+    children,
+    withCheckbox,
+    ...props
+  } = _ref;
+  if (withCheckbox) {
+    return /*#__PURE__*/_jsx(Checkbox, {
+      tabIndex: -1,
+      ...props,
+      children: children
+    });
+  }
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: children
+  });
+}

package/{dist → lib}/forms/select/internal/SelectLabel.d.ts

@@ -3,5 +3,5 @@ interface SelectLabelProps {
     label?: string;
     id?: string;
 }
-export declare function SelectLabel({ hideLabel, label, id }: SelectLabelProps): import("react/jsx-runtime").JSX.Element;
+export default function SelectLabel({ hideLabel, label, id }: SelectLabelProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -0,0 +1,16 @@
+import cn from "classnames";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function SelectLabel(_ref) {
+  let {
+    hideLabel,
+    label,
+    id
+  } = _ref;
+  return /*#__PURE__*/_jsx("label", {
+    className: cn("fwe-select-label", {
+      "fwe-sr-only": hideLabel
+    }),
+    htmlFor: id,
+    children: label || ""
+  });
+}

package/{dist → lib}/forms/select/internal/SelectOptionsContainer.d.ts

@@ -1,6 +1,6 @@
-import { type Key, type Ref } from 'react';
-import type { SelectConfiguration } from '../../../utils/types';
-import type { SelectOptionType } from '../select-option/SelectOption';
+import { Key, Ref } from "react";
+import { SelectConfiguration } from "../../../helper/types";
+import type { SelectOptionType } from "../select-option/SelectOption";
 interface SelectOptionsContainerProps<T> {
     options?: SelectOptionType<T>[];
     config?: SelectConfiguration;
@@ -11,7 +11,7 @@ interface SelectOptionsContainerProps<T> {
     children: React.ReactNode;
 }
 declare function SelectOptionsContainerComponent<T extends Key | null | undefined>({ options, config, onClose, label, onOptionChange, multiple, children, }: SelectOptionsContainerProps<T>, ref: Ref<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
-export declare const SelectOptionsContainer: <T>(props: SelectOptionsContainerProps<T> & {
-    ref?: Ref<HTMLDivElement>;
+declare const SelectOptionsContainer: <T>(props: SelectOptionsContainerProps<T> & {
+    ref?: Ref<HTMLDivElement> | undefined;
 }) => ReturnType<typeof SelectOptionsContainerComponent>;
-export {};
+export default SelectOptionsContainer;

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

@@ -0,0 +1,102 @@
+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/{dist → lib}/forms/select/internal/SelectScrollContainer.d.ts

@@ -1,8 +1,8 @@
-import type { SelectConfiguration } from '../../../utils/types';
+import { SelectConfiguration } from "../../../helper/types";
 interface SelectScrollContainerProps {
     readonly config?: SelectConfiguration;
     readonly children: React.ReactNode;
     readonly length: number;
 }
-export declare function SelectScrollContainer({ config, children, length, }: SelectScrollContainerProps): import("react/jsx-runtime").JSX.Element;
+export default function SelectScrollContainer({ config, children, length, }: SelectScrollContainerProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

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

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

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

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

@@ -0,0 +1,6 @@
+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/{dist → lib}/forms/select/internal/utils.d.ts

@@ -1,6 +1,6 @@
-import React from 'react';
-import type { SelectOptionProps } from '../select-option/SelectOption';
-export declare function getChildren<T>(children: React.ReactNode): {
+import React from "react";
+import { SelectOptionProps } from "../select-option/SelectOption";
+export default function getChildren<T>(children: React.ReactNode): {
     childrenList: React.ReactElement<SelectOptionProps<T>, string | React.JSXElementConstructor<any>>[];
     after: React.ReactElement<any, string | React.JSXElementConstructor<any>>[];
     before: React.ReactElement<any, string | React.JSXElementConstructor<any>>[];

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

@@ -0,0 +1,36 @@
+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/{dist → lib}/forms/select/select-option/SelectOption.d.ts

@@ -1,14 +1,14 @@
-import { type ComponentPropsWithoutRef, type Ref } from 'react';
+import { ComponentPropsWithoutRef, Ref } from "react";
 export interface SelectOptionType<T> {
     label: string;
     data: T;
     disabled?: boolean;
 }
-export interface SelectOptionProps<T> extends ComponentPropsWithoutRef<'span'> {
+export interface SelectOptionProps<T> extends ComponentPropsWithoutRef<"span"> {
     option: SelectOptionType<T>;
 }
 declare function SelectOptionComponent<T>({ children, className, ...props }: SelectOptionProps<T>, ref: Ref<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
-export declare const SelectOption: <T>(props: SelectOptionProps<T> & {
-    ref?: Ref<HTMLDivElement>;
+declare const SelectOption: <T>(props: SelectOptionProps<T> & {
+    ref?: Ref<HTMLDivElement> | undefined;
 }) => ReturnType<typeof SelectOptionComponent>;
-export {};
+export default SelectOption;

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

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

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

package/lib/forms/select/utils.js

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

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

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

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

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