@festo-ui/react 5.1.0 → 6.0.0-dev.198

package/index.d.ts

@@ -46,6 +46,7 @@ export { default as RadioButton, default as RadioGroup } from './lib/forms/radio
 export { default as Segment } from './lib/forms/segment/Segment';
 export { default as SegmentControl } from './lib/forms/segment/segment-control/SegmentControl';
 export { default as Select } from './lib/forms/select/Select';
+export { default as SelectOption } from './lib/forms/select/select-option/SelectOption';
 export { default as Slider } from './lib/forms/slider/Slider';
 export { default as Switch } from './lib/forms/switch/Switch';
 export { default as TextArea } from './lib/forms/text-area/TextArea';

package/index.js

@@ -46,6 +46,7 @@ export { default as RadioButton, default as RadioGroup } from './lib/forms/radio
 export { default as Segment } from './lib/forms/segment/Segment';
 export { default as SegmentControl } from './lib/forms/segment/segment-control/SegmentControl';
 export { default as Select } from './lib/forms/select/Select';
+export { default as SelectOption } from './lib/forms/select/select-option/SelectOption';
 export { default as Slider } from './lib/forms/slider/Slider';
 export { default as Switch } from './lib/forms/switch/Switch';
 export { default as TextArea } from './lib/forms/text-area/TextArea';

package/lib/components/mobile-flyout/mobile-flyout-item/MobileFlyoutItem.d.ts

@@ -1,8 +1,7 @@
 /// <reference types="react" />
 import { PolymorphicRef } from '../../../helper/types';
-export { Ref, ReactElement, RefAttributes } from 'react';
 declare module 'react' {
-    function forwardRef<T, P = {}>(render: (props: P, ref: Ref<T>) => ReactElement | null): (props: P & RefAttributes<T>) => ReactElement | null;
+    function forwardRef<T, P = {}>(render: (props: P, ref: React.Ref<T>) => React.ReactElement | null): (props: P & React.RefAttributes<T>) => React.ReactElement | null;
 }
 interface MobileFlyoutItemBaseProps {
     icon?: string;
@@ -15,5 +14,5 @@ declare const MobileFlyoutItem: <C extends import("react").ElementType<any> = "a
     children?: import("react").ReactNode;
 } & Omit<import("react").PropsWithoutRef<import("react").ComponentProps<C>>, "component" | keyof MobileFlyoutItemBaseProps> & {
     ref?: PolymorphicRef<C> | undefined;
-} & import("react").RefAttributes<unknown>) => ReactElement | null;
+} & import("react").RefAttributes<unknown>) => React.ReactElement | null;
 export default MobileFlyoutItem;

package/lib/components/mobile-flyout/mobile-flyout-item/MobileFlyoutItem.js

@@ -1,16 +1,15 @@
 import cn from 'classnames';
 import { forwardRef, useContext } from 'react';
 import MobileFlyoutContext from '../MobileFlyoutContext';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-export { Ref, ReactElement, RefAttributes } from 'react';
+
 /*
  * Augment `forwardRef` only for this module so that storybook can infer controls
  * (despite component being wrapped in forwardRef)
  * https://fettblog.eu/typescript-react-generic-forward-refs/#option-3%3A-augment-forwardref
  * https://github.com/microsoft/TypeScript/pull/30215
  */
-
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const MobileFlyoutItem = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     component,

package/lib/components/modals/ModalBase.js

@@ -15,10 +15,8 @@ const ModalBase = /*#__PURE__*/forwardRef((_ref, ref) => {
     children
   } = _ref;
   const backdropRef = useRef(null);
-  const modalRef = useRef(null);
   const divRef = useRef(null);
-  const combinedRef = useForkRef(ref, modalRef);
-  const allRefs = useForkRef(combinedRef, divRef);
+  const allRefs = useForkRef(ref, divRef);
   const container = divRef?.current?.ownerDocument || document;
   useOnClickOutside(divRef, () => onClose?.());
   useEffect(() => {
@@ -47,7 +45,7 @@ const ModalBase = /*#__PURE__*/forwardRef((_ref, ref) => {
           className: "fr-modal-backdrop fwe-modal-backdrop"
         })
       }), /*#__PURE__*/_jsx(CSSTransition, {
-        ref: modalRef,
+        nodeRef: divRef,
         unmountOnExit: true,
         classNames: "fr-modal",
         appear: true,

package/lib/components/modals/Prompt.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import TextInput from '../../forms/text-input/TextInput';
+import { TextInput } from '../../forms/text-input/TextInput';
 import Modal from './Modal';
 import ModalFooter from './ModalFooter';
 import { jsx as _jsx } from "react/jsx-runtime";

package/lib/components/modals/imageGallery/BaseGallery.d.ts

@@ -1,4 +1,4 @@
-import 'swiper/css';
+import 'swiper/swiper.min.css';
 import { ComponentPropsWithoutRef } from 'react';
 import { ClassNamePropsWithChildren } from '../../../helper/types';
 import { ImageDescriptiveContent } from './ImageGalleryContent';

package/lib/components/modals/imageGallery/BaseGallery.js

@@ -1,4 +1,4 @@
-import 'swiper/css';
+import 'swiper/swiper.min.css';
 import cn from 'classnames';
 import { useState } from 'react';
 import { Navigation, Thumbs } from 'swiper';

package/lib/components/modals/imageGallery/ImageGallery.d.ts

@@ -11,5 +11,5 @@ interface ImageGalleryProps extends ComponentPropsWithoutRef<'div'>, ModalBasePr
     descriptiveContent?: boolean;
     onSlideChanged?: (index: number) => void;
 }
-declare const ImageGallery: (props: ImageGalleryProps & import("react").RefAttributes<HTMLImageElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
+export declare const ImageGallery: (props: ImageGalleryProps & import("react").RefAttributes<HTMLImageElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
 export default ImageGallery;

package/lib/components/modals/imageGallery/ImageGallery.js

@@ -7,7 +7,7 @@ import getClasses from './ImageGallery.helper';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
-const ImageGallery = /*#__PURE__*/forwardRef((_ref, ref) => {
+export const ImageGallery = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     isOpen,
     startIndex,

package/lib/components/popovers/popover-menu/PopoverMenu.js

@@ -43,6 +43,7 @@ function PopoverMenu(_ref) {
       ...props,
       children: /*#__PURE__*/_jsx("button", {
         type: "button",
+        "data-testid": "fwe-popover-menu-button",
         className: "fwe-btn fwe-btn-link fwe-dark origin",
         children: /*#__PURE__*/_jsx("i", {
           className: `fwe-icon fwe-pr-0 ${icon}`

package/lib/components/tab/Tabs.d.ts

@@ -19,5 +19,5 @@ interface TabsProps extends Omit<ComponentPropsWithoutRef<'div'>, 'onChange'> {
         current: string;
     }) => void;
 }
-declare const Tabs: (props: TabsProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+export declare const Tabs: (props: TabsProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
 export default Tabs;

package/lib/components/tab/Tabs.js

@@ -9,7 +9,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 let nextId = 0;
-const Tabs = /*#__PURE__*/forwardRef((_ref, ref) => {
+export const Tabs = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     config,
     children,

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

@@ -16,5 +16,5 @@ export interface SelectProps extends Omit<ComponentPropsWithoutRef<'div'>, 'onCh
     hint?: string;
     error?: string;
 }
-declare const Select: (props: SelectProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+export declare const Select: (props: SelectProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
 export default Select;

package/lib/forms/select/Select.js

@@ -8,7 +8,7 @@ import calcVirtualScrollHeight from './utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const Select = /*#__PURE__*/forwardRef((_ref, ref) => {
+export const Select = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     defaultValue = '',
     value,

package/lib/forms/text-input/TextInput.d.ts

@@ -17,5 +17,5 @@ interface TextInputProps {
     error?: string;
     labelClassName?: string;
 }
-declare const TextInput: (props: TextInputProps & React.HTMLProps<HTMLInputElement> & React.RefAttributes<HTMLLabelElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+export declare const TextInput: (props: TextInputProps & React.HTMLProps<HTMLInputElement> & React.RefAttributes<HTMLLabelElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
 export default TextInput;

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

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import useId from '../../helper/useId';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const TextInput = /*#__PURE__*/forwardRef((_ref, ref) => {
+export const TextInput = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     disabled,
     required,

package/lib/forms/time-picker/TimePicker.d.ts

@@ -14,5 +14,5 @@ export interface TimePickerProps extends Omit<ComponentPropsWithoutRef<'div'>, '
     formatDate?: (date: Date) => string;
     onChange?: (date: Date) => void;
 }
-declare const TimePicker: (props: TimePickerProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+export declare const TimePicker: (props: TimePickerProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
 export default TimePicker;

package/lib/forms/time-picker/TimePicker.js

@@ -9,7 +9,7 @@ import TimePickerDropdown from './time-picker-dropdown/TimePickerDropdown';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
-const TimePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
+export const TimePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     error,
     hint,

package/node/index.js

@@ -237,6 +237,12 @@ Object.defineProperty(exports, "Select", {
     return _Select.default;
   }
 });
+Object.defineProperty(exports, "SelectOption", {
+  enumerable: true,
+  get: function () {
+    return _SelectOption.default;
+  }
+});
 Object.defineProperty(exports, "Slider", {
   enumerable: true,
   get: function () {
@@ -387,6 +393,7 @@ var _RadioButton = _interopRequireDefault(require("./lib/forms/radio/RadioButton
 var _Segment = _interopRequireDefault(require("./lib/forms/segment/Segment"));
 var _SegmentControl = _interopRequireDefault(require("./lib/forms/segment/segment-control/SegmentControl"));
 var _Select = _interopRequireDefault(require("./lib/forms/select/Select"));
+var _SelectOption = _interopRequireDefault(require("./lib/forms/select/select-option/SelectOption"));
 var _Slider = _interopRequireDefault(require("./lib/forms/slider/Slider"));
 var _Switch = _interopRequireDefault(require("./lib/forms/switch/Switch"));
 var _TextArea = _interopRequireDefault(require("./lib/forms/text-area/TextArea"));

package/node/lib/components/mobile-flyout/mobile-flyout-item/MobileFlyoutItem.js

@@ -3,24 +3,6 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "ReactElement", {
-  enumerable: true,
-  get: function () {
-    return _react.ReactElement;
-  }
-});
-Object.defineProperty(exports, "Ref", {
-  enumerable: true,
-  get: function () {
-    return _react.Ref;
-  }
-});
-Object.defineProperty(exports, "RefAttributes", {
-  enumerable: true,
-  get: function () {
-    return _react.RefAttributes;
-  }
-});
 exports.default = void 0;
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = require("react");

package/node/lib/components/modals/ModalBase.js

@@ -20,10 +20,8 @@ const ModalBase = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     children
   } = _ref;
   const backdropRef = (0, _react.useRef)(null);
-  const modalRef = (0, _react.useRef)(null);
   const divRef = (0, _react.useRef)(null);
-  const combinedRef = (0, _useForkRef.default)(ref, modalRef);
-  const allRefs = (0, _useForkRef.default)(combinedRef, divRef);
+  const allRefs = (0, _useForkRef.default)(ref, divRef);
   const container = divRef?.current?.ownerDocument || document;
   (0, _useOnClickOutside.default)(divRef, () => onClose?.());
   (0, _react.useEffect)(() => {
@@ -52,7 +50,7 @@ const ModalBase = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
           className: "fr-modal-backdrop fwe-modal-backdrop"
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.CSSTransition, {
-        ref: modalRef,
+        nodeRef: divRef,
         unmountOnExit: true,
         classNames: "fr-modal",
         appear: true,

package/node/lib/components/modals/Prompt.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = Prompt;
 var _react = _interopRequireWildcard(require("react"));
-var _TextInput = _interopRequireDefault(require("../../forms/text-input/TextInput"));
+var _TextInput = require("../../forms/text-input/TextInput");
 var _Modal = _interopRequireDefault(require("./Modal"));
 var _ModalFooter = _interopRequireDefault(require("./ModalFooter"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -46,7 +46,7 @@ function Prompt(_ref) {
         children: title
       })]
     }),
-    body: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextInput.default, {
+    body: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextInput.TextInput, {
       onChange: handleChange,
       label: label,
       hint: hint,

package/node/lib/components/modals/imageGallery/BaseGallery.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = BaseGallery;
-require("swiper/css");
+require("swiper/swiper.min.css");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = require("react");
 var _swiper = require("swiper");

package/node/lib/components/modals/imageGallery/ImageGallery.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.ImageGallery = void 0;
 var _react = require("react");
 var _ModalBase = _interopRequireDefault(require("../ModalBase"));
 var _BaseGallery = _interopRequireDefault(require("./BaseGallery"));
@@ -12,7 +12,7 @@ var _ImageGalleryPagination = _interopRequireDefault(require("./ImageGalleryPagi
 var _ImageGallery = _interopRequireDefault(require("./ImageGallery.helper"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const ImageGallery = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+const ImageGallery = exports.ImageGallery = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
     isOpen,
     startIndex,

package/node/lib/components/popovers/popover-menu/PopoverMenu.js

@@ -49,6 +49,7 @@ function PopoverMenu(_ref) {
       ...props,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
         type: "button",
+        "data-testid": "fwe-popover-menu-button",
         className: "fwe-btn fwe-btn-link fwe-dark origin",
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
           className: `fwe-icon fwe-pr-0 ${icon}`

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.Tabs = void 0;
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireWildcard(require("react"));
 var _useForkRef = _interopRequireDefault(require("../../helper/useForkRef"));
@@ -15,7 +15,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 // legacy: recommended for desktop only applications
 // responsive: desktop, tablet, mobile with scrollable tabs
 let nextId = 0;
-const Tabs = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+const Tabs = exports.Tabs = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
     config,
     children,

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.Select = void 0;
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireWildcard(require("react"));
 var _useControlled = _interopRequireDefault(require("../../helper/useControlled"));
@@ -15,7 +15,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 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 && Object.prototype.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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const Select = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+const Select = exports.Select = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
     defaultValue = '',
     value,

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.TextInput = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _useId = _interopRequireDefault(require("../../helper/useId"));
@@ -11,7 +11,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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 && Object.prototype.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; }
-const TextInput = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+const TextInput = exports.TextInput = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
     disabled,
     required,

package/node/lib/forms/time-picker/TimePicker.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.TimePicker = void 0;
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactDom = _interopRequireDefault(require("react-dom"));
@@ -16,7 +16,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 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 && Object.prototype.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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const TimePicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+const TimePicker = exports.TimePicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
     error,
     hint,

package/package.json

@@ -1,8 +1,15 @@
 {
   "name": "@festo-ui/react",
-  "version": "5.1.0",
+  "version": "6.0.0-dev.198",
   "author": "Festo UI (styleguide@festo.com)",
   "license": "apache-2.0",
+  "exports": {
+    ".": {
+      "import": "./index.js",
+      "require": "./node/index.js"
+    },
+    "./index.css": "./index.css"
+  },
   "peerDependencies": {
     "@festo-ui/web-essentials": "*",
     "react": "^17.0.0 || ^18.0.0",