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

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

@@ -0,0 +1,109 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _reactPopper = require("react-popper");
+var _SelectScrollContainer = _interopRequireDefault(require("./SelectScrollContainer.js"));
+var _ListItem = _interopRequireDefault(require("./ListItem.js"));
+var _utils = _interopRequireDefault(require("./utils.js"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function SelectOptionsContainerComponent(_ref, ref) {
+  let {
+    options,
+    config,
+    onClose,
+    label,
+    onOptionChange,
+    multiple,
+    children
+  } = _ref;
+  const [popperElement, setPopperElement] = (0, _react.useState)(null);
+  const refObject = typeof ref !== 'function' ? ref?.current : null;
+  const {
+    styles,
+    attributes
+  } = (0, _reactPopper.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 = (0, _utils.default)(children);
+  const childrenList = allChildren.childrenList;
+  const usedOptions = options ?? childrenList.map(child => child.props.option);
+  const {
+    length
+  } = usedOptions;
+  const listItemRef = (0, _react.useRef)(Array.from({
+    length
+  }, () => /*#__PURE__*/(0, _react.createRef)()));
+  const selectedIndex = Array.isArray(label) ? usedOptions.findIndex(option => option.label === label.at(-1)) : usedOptions.findIndex(option => option.label === label);
+  const [init, setInit] = (0, _react.useState)(false);
+  (0, _react.useEffect)(() => {
+    if (!init) {
+      requestAnimationFrame(() => {
+        setInit(true);
+        const index = selectedIndex === -1 ? 0 : selectedIndex;
+        listItemRef.current?.[index].current?.focus();
+      });
+    }
+  }, [selectedIndex, init]);
+  const onCloseRef = (0, _react.useRef)(onClose);
+  (0, _react.useEffect)(() => () => {
+    onCloseRef.current();
+  }, []);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      "aria-hidden": true,
+      className: "fr-backdrop",
+      onClick: onClose
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("ul", {
+      ref: setPopperElement,
+      style: getCssProperies(),
+      ...attributes.popper,
+      className: "fwe-select-options-container",
+      children: [allChildren.before, /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectScrollContainer.default, {
+        length: length,
+        config: config,
+        children: [...(options || []), ...childrenList].map((item, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItem.default, {
+          withCheckbox: multiple,
+          item: item,
+          selectedLabel: label,
+          onClose: onClose,
+          onFocusChange: index => listItemRef.current[index].current?.focus(),
+          onOptionChange: onOptionChange,
+          ref: listItemRef,
+          index: i,
+          options: usedOptions
+        }, ( /*#__PURE__*/(0, _react.isValidElement)(item) ? item.props.option : item).data))
+      }), allChildren.after]
+    })]
+  });
+}
+const SelectOptionsContainer = /*#__PURE__*/(0, _react.forwardRef)(SelectOptionsContainerComponent);
+var _default = exports.default = SelectOptionsContainer;

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

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = SelectScrollContainer;
+var _utils = _interopRequireDefault(require("../utils.js"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function SelectScrollContainer(_ref) {
+  let {
+    config,
+    children,
+    length
+  } = _ref;
+  if (config?.scroll?.enabled) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fr-select-scroll",
+      style: {
+        height: (0, _utils.default)(config, length)
+      },
+      children: children
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: children
+  });
+}

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

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = require("react");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const SelectWrapper = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    children,
+    disabled,
+    className,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    ...props,
+    ref: ref,
+    className: (0, _classnames.default)('fwe-select-wrapper', {
+      'fwe-disabled': disabled
+    }, className),
+    children: children
+  });
+});
+var _default = exports.default = SelectWrapper;

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

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "HiddenInput", {
+  enumerable: true,
+  get: function () {
+    return _HiddenInput.default;
+  }
+});
+Object.defineProperty(exports, "ListItem", {
+  enumerable: true,
+  get: function () {
+    return _ListItem.default;
+  }
+});
+Object.defineProperty(exports, "OptionsContainer", {
+  enumerable: true,
+  get: function () {
+    return _SelectOptionsContainer.default;
+  }
+});
+Object.defineProperty(exports, "SelectButton", {
+  enumerable: true,
+  get: function () {
+    return _SelectButton.default;
+  }
+});
+Object.defineProperty(exports, "SelectLabel", {
+  enumerable: true,
+  get: function () {
+    return _SelectLabel.default;
+  }
+});
+Object.defineProperty(exports, "Wrapper", {
+  enumerable: true,
+  get: function () {
+    return _SelectWrapper.default;
+  }
+});
+var _HiddenInput = _interopRequireDefault(require("./HiddenInput.js"));
+var _ListItem = _interopRequireDefault(require("./ListItem.js"));
+var _SelectButton = _interopRequireDefault(require("./SelectButton.js"));
+var _SelectOptionsContainer = _interopRequireDefault(require("./SelectOptionsContainer.js"));
+var _SelectWrapper = _interopRequireDefault(require("./SelectWrapper.js"));
+var _SelectLabel = _interopRequireDefault(require("./SelectLabel.js"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = getChildren;
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _SelectOption = _interopRequireDefault(require("../select-option/SelectOption.js"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function getChildren(children) {
+  const before = [];
+  const childrenList = [];
+  const after = [];
+  let foundFirstOption = false;
+  _react.default.Children.forEach(children, element => {
+    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 {
+          props
+        } = element;
+        childrenList.push({
+          ...element,
+          props: {
+            ...props,
+            className
+          }
+        });
+      } else if (!foundFirstOption) {
+        before.push(element);
+      } else {
+        after.push(element);
+      }
+    }
+  });
+  return {
+    childrenList,
+    after,
+    before
+  };
+}

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

@@ -3,12 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.SelectOption = void 0;
+exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 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; }
-const SelectOption = exports.SelectOption = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+function SelectOptionComponent(_ref, ref) {
   let {
     children,
     className,
@@ -20,5 +20,6 @@ const SelectOption = exports.SelectOption = /*#__PURE__*/(0, _react.forwardRef)(
     ...props,
     children: children
   });
-});
+}
+const SelectOption = /*#__PURE__*/(0, _react.forwardRef)(SelectOptionComponent);
 var _default = exports.default = SelectOption;

package/node/lib/helper/useControlled.js

@@ -8,7 +8,8 @@ var _react = require("react");
 function useControlled(_ref) {
   let {
     controlled,
-    default: defaultValue
+    default: defaultValue,
+    onChange
   } = _ref;
   const {
     current: isControlled
@@ -19,6 +20,9 @@ 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@festo-ui/react",
-  "version": "7.3.0-dev.465",
+  "version": "7.3.0-dev.468",
   "author": "Festo UI (styleguide@festo.com)",
   "license": "apache-2.0",
   "type": "module",

package/lib/forms/select/list-item/ListItem.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-export interface ListItemProps extends React.ComponentPropsWithoutRef<'li'> {
-    empty?: boolean;
-}
-declare const ListItem: (props: ListItemProps & React.RefAttributes<HTMLLIElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
-export default ListItem;

package/lib/forms/select/list-item/ListItem.js

@@ -1,24 +0,0 @@
-import cn from 'classnames';
-import React, { forwardRef } from 'react';
-import { jsx as _jsx } from "react/jsx-runtime";
-const ListItem = /*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
-    children,
-    className,
-    'aria-selected': ariaSelected,
-    empty,
-    ...props
-  } = _ref;
-  return /*#__PURE__*/_jsx("li", {
-    ref: ref,
-    role: "option",
-    "aria-selected": ariaSelected,
-    className: cn('fwe-select-option', {
-      'fwe-empty': empty
-    }, className),
-    tabIndex: 0,
-    ...props,
-    children: children
-  });
-});
-export default ListItem;

package/node/lib/forms/select/list-item/ListItem.js

@@ -1,33 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _classnames = _interopRequireDefault(require("classnames"));
-var _react = _interopRequireWildcard(require("react"));
-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 ListItem = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
-  let {
-    children,
-    className,
-    'aria-selected': ariaSelected,
-    empty,
-    ...props
-  } = _ref;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
-    ref: ref,
-    role: "option",
-    "aria-selected": ariaSelected,
-    className: (0, _classnames.default)('fwe-select-option', {
-      'fwe-empty': empty
-    }, className),
-    tabIndex: 0,
-    ...props,
-    children: children
-  });
-});
-var _default = exports.default = ListItem;