@festo-ui/react 7.3.0-dev.465 → 7.3.0-dev.469

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

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

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

@@ -0,0 +1,104 @@
+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 } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { 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]);
+  const onCloseRef = useRef(onClose);
+  useEffect(() => () => {
+    onCloseRef.current();
+  }, []);
+  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.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { SelectConfiguration } from '../../../helper/types';
+interface SelectScrollContainerProps {
+    config?: SelectConfiguration;
+    children: React.ReactNode;
+    length: number;
+}
+export default function SelectScrollContainer({ config, children, length, }: SelectScrollContainerProps): JSX.Element;
+export {};

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

@@ -0,0 +1,22 @@
+import calcVirtualScrollHeight from "../utils.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { 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/lib/forms/select/internal/utils.d.ts

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

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

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

@@ -1,6 +1,6 @@
 import React, { forwardRef } from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
-export const SelectOption = /*#__PURE__*/forwardRef((_ref, ref) => {
+function SelectOptionComponent(_ref, ref) {
   let {
     children,
     className,
@@ -12,5 +12,6 @@ export const SelectOption = /*#__PURE__*/forwardRef((_ref, ref) => {
     ...props,
     children: children
   });
-});
+}
+const SelectOption = /*#__PURE__*/forwardRef(SelectOptionComponent);
 export default SelectOption;

package/lib/helper/useControlled.d.ts

@@ -1,6 +1,7 @@
 import { Dispatch, SetStateAction } from 'react';
 export interface UseControlledProps<T> {
     controlled: T | undefined;
-    default: T | undefined;
+    default: T;
+    onChange?: (value: T) => void;
 }
-export default function useControlled<T>({ controlled, default: defaultValue, }: UseControlledProps<T>): [T | undefined, Dispatch<SetStateAction<T | undefined>>];
+export default function useControlled<T>({ controlled, default: defaultValue, onChange, }: UseControlledProps<T>): [T | undefined, Dispatch<SetStateAction<T>>];

package/lib/helper/useControlled.js

@@ -2,7 +2,8 @@ import { useRef, useState, useCallback } from 'react';
 export default function useControlled(_ref) {
   let {
     controlled,
-    default: defaultValue
+    default: defaultValue,
+    onChange
   } = _ref;
   const {
     current: isControlled
@@ -13,6 +14,9 @@ export default function useControlled(_ref) {
     if (!isControlled) {
       setValue(newValue);
     }
-  }, [isControlled]);
+    const setter = newValue;
+    const onChangeValue = typeof newValue === 'function' ? setter(controlled) : newValue;
+    onChange?.(onChangeValue);
+  }, [controlled, isControlled, onChange]);
   return [value, setValueIfUncontrolled];
 }

package/node/lib/components/icons/close-small.js

@@ -0,0 +1,75 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = IconCloseSmall;
+var _jsxRuntime = require("react/jsx-runtime");
+function IconCloseSmall(_ref) {
+  let {
+    className,
+    svgProps,
+    festoColor,
+    size = 16
+  } = _ref;
+  if (size < 24) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      "data-name": "content",
+      viewBox: "0 0 16 16",
+      width: size,
+      height: size,
+      ...svgProps,
+      className: `fwe-svg-icon${className ? ` ${className}` : ''}`,
+      "aria-label": "close-small",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+        fill: "none",
+        d: "M0 0h16v16H0z",
+        "data-name": "abb55ae8-ca55-470c-87c3-4b06738b4360"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+        fill: festoColor ? '#0091dc' : 'currentColor',
+        d: "M10.24 5.05 8 7.3 5.75 5.05l-.7.71L7.29 8l-2.24 2.25.7.7L8 8.71l2.24 2.24.71-.7L8.7 8l2.25-2.24z",
+        "data-name": "b64b1ed2-b831-435c-9cee-b9964260209d"
+      })]
+    });
+  }
+  if (size < 32 || size === 48) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      "data-name": "content",
+      viewBox: "0 0 24 24",
+      width: size,
+      height: size,
+      ...svgProps,
+      className: `fwe-svg-icon${className ? ` ${className}` : ''}`,
+      "aria-label": "close-small",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+        fill: "none",
+        d: "M0 0h24v24H0z"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+        fill: festoColor ? '#0091dc' : 'currentColor',
+        d: "M16.95 8.464 15.536 7.05 12 10.586 8.464 7.05 7.05 8.464 10.586 12 7.05 15.536l1.414 1.414L12 13.414l3.536 3.536 1.414-1.414L13.414 12z"
+      })]
+    });
+  }
+  if (size >= 32) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      "data-name": "content",
+      viewBox: "0 0 32 32",
+      width: size,
+      height: size,
+      ...svgProps,
+      className: `fwe-svg-icon${className ? ` ${className}` : ''}`,
+      "aria-label": "close-small",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+        fill: "none",
+        d: "M0 0h32v32H0z"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+        fill: festoColor ? '#0091dc' : 'currentColor',
+        d: "M21.48 9.1 16 14.59 10.51 9.1 9.1 10.52 14.58 16 9.1 21.49l1.41 1.41L16 17.42l5.48 5.48 1.42-1.41L17.41 16l5.49-5.48z"
+      })]
+    });
+  }
+  return null;
+}