@festo-ui/react 4.0.3-pre-20221124.8 → 5.0.0-dev.102

package/lib/components/modals/Prompt.js

@@ -0,0 +1,65 @@
+import React, { useEffect, useState } from 'react';
+import TextInput from '../../forms/text-input/TextInput';
+import Modal from './Modal';
+import ModalFooter from './ModalFooter';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function Prompt(_ref) {
+  let {
+    title,
+    subtitle,
+    hint,
+    label,
+    value,
+    onChange,
+    onOk,
+    onCancel,
+    cancel,
+    ok,
+    ...props
+  } = _ref;
+  const [innerValue, setInnerValue] = useState(value);
+  useEffect(() => {
+    setInnerValue(value);
+  }, [value]);
+  function handleChange(e) {
+    setInnerValue(e.target.value);
+    if (onChange) {
+      onChange(e);
+    }
+  }
+  return /*#__PURE__*/_jsx(Modal, {
+    head: /*#__PURE__*/_jsxs(_Fragment, {
+      children: [subtitle && /*#__PURE__*/_jsx("h2", {
+        className: "fwe-modal-h2",
+        children: subtitle
+      }), /*#__PURE__*/_jsx("h1", {
+        className: "fwe-modal-h1",
+        children: title
+      })]
+    }),
+    body: /*#__PURE__*/_jsx(TextInput, {
+      onChange: handleChange,
+      label: label,
+      hint: hint,
+      value: innerValue
+    }),
+    ...props,
+    children: (cancel || ok) && /*#__PURE__*/_jsxs(ModalFooter, {
+      children: [cancel && /*#__PURE__*/_jsx("button", {
+        type: "button",
+        "aria-label": "Cancel",
+        className: "fwe-btn",
+        onClick: onCancel,
+        children: cancel
+      }), ok && /*#__PURE__*/_jsx("button", {
+        type: "button",
+        "aria-label": "Ok",
+        className: "fwe-btn fwe-btn-hero",
+        onClick: () => onOk(innerValue),
+        children: ok
+      })]
+    })
+  });
+}

package/lib/components/pagination/Pagination.d.ts

@@ -1,17 +1,17 @@
-/// <reference types="react" />
-import { ClassNameProps } from '../../helper/types';
-import './Pagination.scss';
-export declare enum PaginationType {
-    Simple = "SIMPLE",
-    Numeric = "NUMERIC",
-    Dots = "DOTS"
-}
-export interface PaginationProps extends ClassNameProps {
-    type?: PaginationType;
-    onChange?: (page: number) => void;
-    pageCurrent?: number;
-    defaultPageCurrent?: number;
-    pageMax: number;
-}
-export declare function Pagination(props: PaginationProps): JSX.Element;
-export default Pagination;
+/// <reference types="react" />
+import { ClassNameProps } from '../../helper/types';
+import './Pagination.scss';
+export declare enum PaginationType {
+    Simple = "SIMPLE",
+    Numeric = "NUMERIC",
+    Dots = "DOTS"
+}
+export interface PaginationProps extends ClassNameProps {
+    type?: PaginationType;
+    onChange?: (page: number) => void;
+    pageCurrent?: number;
+    defaultPageCurrent?: number;
+    pageMax: number;
+}
+declare function Pagination(props: PaginationProps): JSX.Element;
+export default Pagination;

package/lib/components/pagination/Pagination.js

@@ -0,0 +1,107 @@
+import React, { useEffect, useState } from 'react';
+import classNames from 'classnames';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export let PaginationType;
+(function (PaginationType) {
+  PaginationType["Simple"] = "SIMPLE";
+  PaginationType["Numeric"] = "NUMERIC";
+  PaginationType["Dots"] = "DOTS";
+})(PaginationType || (PaginationType = {}));
+function Pagination(props) {
+  const {
+    pageMax,
+    onChange,
+    pageCurrent,
+    defaultPageCurrent = 1,
+    type = PaginationType.Numeric,
+    className
+  } = props;
+  const controlled = pageCurrent !== undefined;
+  const [innerPageCurrent, setInnerPageCurrent] = useState(controlled ? pageCurrent : defaultPageCurrent);
+  const dotArray = Array.from(new Array(pageMax).keys());
+  useEffect(() => {
+    if (controlled) {
+      setInnerPageCurrent(pageCurrent);
+    }
+  }, [pageCurrent, controlled]);
+  function handleChange(newPage) {
+    if (!controlled) {
+      setInnerPageCurrent(newPage);
+    }
+    if (onChange) {
+      onChange(newPage);
+    }
+  }
+  function onBtnDown() {
+    if (innerPageCurrent > 1) {
+      const newPageCurrent = innerPageCurrent - 1;
+      handleChange(newPageCurrent);
+    }
+  }
+  function onBtnUp() {
+    if (innerPageCurrent < pageMax) {
+      const newPageCurrent = innerPageCurrent + 1;
+      handleChange(newPageCurrent);
+    }
+  }
+  function onDotClick(index) {
+    const newPageCurrent = index + 1;
+    handleChange(newPageCurrent);
+  }
+  function handleKeyPress(event, index) {
+    if (event.key === 'Enter' || event.key === ' ') {
+      onDotClick(index);
+    }
+  }
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [type !== PaginationType.Dots && /*#__PURE__*/_jsxs("div", {
+      className: classNames('fwe-pagination fwe-p-m', {
+        'fwe-d-none': pageMax < 2
+      }, className),
+      children: [/*#__PURE__*/_jsx("button", {
+        className: classNames('fwe-navigate-btn-down', {
+          'fwe-disabled': innerPageCurrent <= 1
+        }),
+        onClick: onBtnDown,
+        type: "button",
+        "aria-label": "navigate-btn-down"
+      }), type === PaginationType.Numeric && /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx("span", {
+          className: "fwe-page-current",
+          children: innerPageCurrent
+        }), /*#__PURE__*/_jsx("span", {
+          className: "fwe-page-max",
+          children: pageMax
+        })]
+      }), /*#__PURE__*/_jsx("button", {
+        className: classNames('fwe-navigate-btn-up', {
+          'fwe-disabled': innerPageCurrent >= pageMax,
+          'fwe-ml-4': type === PaginationType.Simple
+        }),
+        onClick: onBtnUp,
+        type: "button",
+        "aria-label": "navigate-btn-up"
+      })]
+    }), type === PaginationType.Dots && /*#__PURE__*/_jsx("div", {
+      className: classNames('fwe-p-m', {
+        'fwe-d-none': pageMax < 2
+      }, className),
+      children: /*#__PURE__*/_jsx("div", {
+        className: "fwe-pagination",
+        children: dotArray.map(index => /*#__PURE__*/_jsx("span", {
+          tabIndex: 0,
+          role: "button",
+          className: classNames('fwe-page-dot', {
+            'fwe-selected': index + 1 === innerPageCurrent
+          }),
+          onClick: () => onDotClick(index),
+          "aria-label": "page-dot",
+          onKeyPress: e => handleKeyPress(e, index)
+        }, index))
+      })
+    })]
+  });
+}
+export default Pagination;

package/lib/components/popovers/legend/Legend.d.ts

@@ -1,12 +1,12 @@
-/// <reference types="react" />
-import { PopoverProps } from '../popover/Popover';
-import './Legend.scss';
-interface Item {
-    name: string;
-    text: string;
-}
-export interface LegendProps extends Omit<PopoverProps, 'popoverContent'> {
-    items: Item[];
-}
-declare function Legend({ items, ...props }: LegendProps): JSX.Element;
-export default Legend;
+/// <reference types="react" />
+import { PopoverProps } from '../popover/Popover';
+import './Legend.scss';
+interface Item {
+    name: string;
+    text: string;
+}
+export interface LegendProps extends Omit<PopoverProps, 'popoverContent'> {
+    items: Item[];
+}
+declare function Legend({ items, ...props }: LegendProps): JSX.Element;
+export default Legend;

package/lib/components/popovers/legend/Legend.js

@@ -0,0 +1,25 @@
+import Popover from '../popover/Popover';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function Legend(_ref) {
+  let {
+    items,
+    ...props
+  } = _ref;
+  const content = items.length > 0 ? /*#__PURE__*/_jsx("dl", {
+    className: "fr-legend",
+    children: items.map(item => /*#__PURE__*/_jsxs("div", {
+      className: "fr-legend-content",
+      children: [/*#__PURE__*/_jsx("dt", {
+        children: item.name
+      }), /*#__PURE__*/_jsx("dt", {
+        children: item.text
+      })]
+    }, item.name))
+  }) : null;
+  return /*#__PURE__*/_jsx(Popover, {
+    popoverContent: content,
+    ...props
+  });
+}
+export default Legend;

package/lib/components/popovers/popover/Popover.d.ts

@@ -1,18 +1,18 @@
-import React from 'react';
-import { Placement } from '@popperjs/core';
-import { ClassNamePropsWithChildren } from '../../../helper/types';
-import './Popover.scss';
-export interface PopoverProps extends ClassNamePropsWithChildren {
-    popoverContent: React.ReactNode;
-    position?: Placement;
-    fallbackPositions?: Placement[];
-    open?: boolean;
-    onStatusChange?: (status: boolean) => void;
-    wrapper?: (children: React.ReactNode) => React.ReactNode;
-    flip?: boolean;
-    containerClassName?: string;
-    stopPropagation?: boolean;
-    arrow?: boolean;
-}
-declare function Popover({ popoverContent, children, position, fallbackPositions, open, onStatusChange, wrapper, className, flip, containerClassName, stopPropagation, arrow }: PopoverProps): JSX.Element;
-export default Popover;
+import React from 'react';
+import { Placement } from '@popperjs/core';
+import { ClassNamePropsWithChildren } from '../../../helper/types';
+import './Popover.scss';
+export interface PopoverProps extends ClassNamePropsWithChildren {
+    popoverContent: React.ReactNode;
+    position?: Placement;
+    fallbackPositions?: Placement[];
+    open?: boolean;
+    onStatusChange?: (status: boolean) => void;
+    wrapper?: (children: React.ReactNode) => React.ReactNode;
+    flip?: boolean;
+    containerClassName?: string;
+    stopPropagation?: boolean;
+    arrow?: boolean;
+}
+declare function Popover({ popoverContent, children, position, fallbackPositions, open, onStatusChange, wrapper, className, flip, containerClassName, stopPropagation, arrow, }: PopoverProps): JSX.Element;
+export default Popover;

package/lib/components/popovers/popover/Popover.js

@@ -0,0 +1,109 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { usePopper } from 'react-popper';
+import classNames from 'classnames';
+import useOnClickOutside from '../../../helper/useOnClickOutside';
+import useForkRef from '../../../helper/useForkRef';
+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 Popover(_ref) {
+  let {
+    popoverContent,
+    children,
+    position,
+    fallbackPositions,
+    open = false,
+    onStatusChange,
+    wrapper,
+    className,
+    flip = true,
+    containerClassName,
+    stopPropagation,
+    arrow = true
+  } = _ref;
+  const [showPopper, setShowPopper] = useState(open);
+  const referenceElement = useRef(null);
+  const [popperElement, setPopperElement] = useState(null);
+  const [arrowElement, setArrowElement] = useState(null);
+  const popperElRef = useRef(null);
+  const combinedRef = useForkRef(popperElRef, setPopperElement);
+  const classes = classNames(className);
+  useEffect(() => {
+    setShowPopper(open);
+  }, [open]);
+  const {
+    styles,
+    attributes
+  } = usePopper(referenceElement.current, popperElement, {
+    placement: position,
+    modifiers: [{
+      name: 'arrow',
+      options: {
+        element: arrowElement
+      }
+    }, {
+      name: 'offset',
+      options: {
+        offset: [0, 24]
+      }
+    }, {
+      name: 'flip',
+      options: {
+        fallbackPlacements: flip ? fallbackPositions : [position || 'auto']
+      }
+    }]
+  });
+  const handleChange = (e, status) => {
+    if (stopPropagation) {
+      e?.stopPropagation();
+    }
+    setShowPopper(status);
+    if (onStatusChange) {
+      onStatusChange(status);
+    }
+  };
+  function closePopover(event) {
+    handleChange(event, false);
+  }
+  useOnClickOutside(popperElRef, closePopover, referenceElement);
+  function handleKeyDown(event) {
+    if (event.key === 'Enter') {
+      handleChange(undefined, true);
+    }
+    if (event.key === 'Escape') {
+      handleChange(undefined, false);
+    }
+  }
+  function handleKeyUp(event) {
+    if (event.key === ' ') {
+      handleChange(undefined, true);
+    }
+  }
+  const childrenWrapper = /*#__PURE__*/_jsx("div", {
+    tabIndex: 0,
+    role: "button",
+    className: classes,
+    ref: referenceElement,
+    onKeyDown: handleKeyDown,
+    onKeyUp: handleKeyUp,
+    onClick: e => handleChange(e, !showPopper),
+    children: children
+  });
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [wrapper ? wrapper(childrenWrapper) : childrenWrapper, showPopper && /*#__PURE__*/_jsxs("div", {
+      className: classNames('fwe-popover-container', containerClassName),
+      ref: combinedRef,
+      style: styles.popper,
+      ...attributes.popper,
+      children: [/*#__PURE__*/_jsx("div", {
+        className: "fwe-popover",
+        children: popoverContent
+      }), arrow && /*#__PURE__*/_jsx("div", {
+        ref: setArrowElement,
+        style: styles.arrow,
+        id: "arrow"
+      })]
+    })]
+  });
+}
+export default Popover;

package/lib/components/popovers/popover-menu/PopoverMenu.d.ts

@@ -1,15 +1,15 @@
-/// <reference types="react" />
-import { PopoverProps } from '../popover/Popover';
-import './PopoverMenu.scss';
-interface PopoverMenuItem {
-    text: string;
-    icon: string;
-    action?: (data: unknown) => void;
-    data: unknown;
-}
-export interface PopoverMenuProps extends Omit<PopoverProps, 'popoverContent' | 'children' | 'open' | 'onStatusChange'> {
-    icon: string;
-    menu: PopoverMenuItem[];
-}
-declare function PopoverMenu({ icon, menu, className, ...props }: PopoverMenuProps): JSX.Element;
-export default PopoverMenu;
+/// <reference types="react" />
+import { PopoverProps } from '../popover/Popover';
+import './PopoverMenu.scss';
+interface PopoverMenuItem {
+    text: string;
+    icon: string;
+    action?: (data: unknown) => void;
+    data: unknown;
+}
+export interface PopoverMenuProps extends Omit<PopoverProps, 'popoverContent' | 'children' | 'open' | 'onStatusChange'> {
+    icon: string;
+    menu: PopoverMenuItem[];
+}
+declare function PopoverMenu({ icon, menu, className, ...props }: PopoverMenuProps): JSX.Element;
+export default PopoverMenu;

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

@@ -0,0 +1,54 @@
+import { useState } from 'react';
+import classNames from 'classnames';
+import Popover from '../popover/Popover';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function PopoverMenu(_ref) {
+  let {
+    icon,
+    menu,
+    className,
+    ...props
+  } = _ref;
+  const [showPopper, setShowPopper] = useState(false);
+  const handleClick = item => {
+    if (item.action) {
+      item.action(item.data);
+    }
+    setShowPopper(false);
+  };
+  const content = /*#__PURE__*/_jsx("ul", {
+    className: "fwe-list-group",
+    children: menu.map(item => /*#__PURE__*/_jsx("li", {
+      className: "fwe-list-group-item",
+      children: /*#__PURE__*/_jsxs("button", {
+        type: "button",
+        className: "fwe-btn fwe-btn-link fwe-dark",
+        onClick: () => handleClick(item),
+        children: [/*#__PURE__*/_jsx("i", {
+          className: `fwe-icon fwe-pr-0 ${item.icon}`
+        }), /*#__PURE__*/_jsx("span", {
+          children: item.text
+        })]
+      })
+    }, item.icon + item.text))
+  });
+  return /*#__PURE__*/_jsx("div", {
+    className: classNames('fwe-popover-menu', className),
+    children: /*#__PURE__*/_jsx(Popover, {
+      popoverContent: content,
+      position: "right",
+      open: showPopper,
+      onStatusChange: setShowPopper,
+      ...props,
+      children: /*#__PURE__*/_jsx("button", {
+        type: "button",
+        className: "fwe-btn fwe-btn-link fwe-dark origin",
+        children: /*#__PURE__*/_jsx("i", {
+          className: `fwe-icon fwe-pr-0 ${icon}`
+        })
+      })
+    })
+  });
+}
+export default PopoverMenu;

package/lib/components/popovers/tooltip/Tooltip.d.ts

@@ -1,10 +1,10 @@
-/// <reference types="react" />
-import { Placement } from '@popperjs/core';
-import { ClassNamePropsWithChildren } from '../../../helper/types';
-import './Tooltip.scss';
-export interface PopoverMenuProps extends ClassNamePropsWithChildren {
-    title: string;
-    position?: Placement;
-}
-declare function Tooltip({ children, className, title, position }: PopoverMenuProps): JSX.Element;
-export default Tooltip;
+/// <reference types="react" />
+import { Placement } from '@popperjs/core';
+import { ClassNamePropsWithChildren } from '../../../helper/types';
+import './Tooltip.scss';
+export interface PopoverMenuProps extends ClassNamePropsWithChildren {
+    title: string;
+    position?: Placement;
+}
+declare function Tooltip({ children, className, title, position }: PopoverMenuProps): JSX.Element;
+export default Tooltip;

package/lib/components/popovers/tooltip/Tooltip.js

@@ -0,0 +1,64 @@
+import { useRef, useState } from 'react';
+import { usePopper } from 'react-popper';
+import classNames from 'classnames';
+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 Tooltip(_ref) {
+  let {
+    children,
+    className,
+    title,
+    position = 'bottom'
+  } = _ref;
+  const [showPopper, setShowPopper] = useState(false);
+  const referenceElement = useRef(null);
+  const [popperElement, setPopperElement] = useState(null);
+  const [arrowElement, setArrowElement] = useState(null);
+  const {
+    styles,
+    attributes
+  } = usePopper(referenceElement.current, popperElement, {
+    placement: position,
+    modifiers: [{
+      name: 'arrow',
+      options: {
+        element: arrowElement
+      }
+    }, {
+      name: 'offset',
+      options: {
+        offset: [0, 24]
+      }
+    }, {
+      name: 'flip',
+      options: {
+        fallbackPlacements: ['right', 'left', 'top']
+      }
+    }]
+  });
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx("div", {
+      className: classNames('fr-tooltip-container', className),
+      ref: referenceElement,
+      onMouseEnter: () => setShowPopper(true),
+      onMouseLeave: () => setShowPopper(false),
+      children: children
+    }), showPopper && /*#__PURE__*/_jsxs("div", {
+      className: "fwe-popover-container",
+      id: "tooltip",
+      ref: setPopperElement,
+      style: styles.popper,
+      ...attributes.popper,
+      children: [/*#__PURE__*/_jsx("div", {
+        ref: setArrowElement,
+        style: styles.arrow,
+        id: "arrow"
+      }), /*#__PURE__*/_jsx("div", {
+        className: "fwe-popover",
+        children: title
+      })]
+    })]
+  });
+}
+export default Tooltip;

package/lib/components/progress/Progress.d.ts

@@ -1,9 +1,9 @@
-/// <reference types="react" />
-import { ClassNameProps } from '../../helper/types';
-interface ProgressProps extends ClassNameProps {
-    progress: number;
-    background?: 'white' | 'black' | 'background';
-    error?: boolean;
-}
-declare function Progress({ background, error, progress, className }: ProgressProps): JSX.Element;
-export default Progress;
+/// <reference types="react" />
+import { ClassNameProps } from '../../helper/types';
+interface ProgressProps extends ClassNameProps {
+    progress: number;
+    background?: 'white' | 'black' | 'background';
+    error?: boolean;
+}
+declare function Progress({ background, error, progress, className }: ProgressProps): JSX.Element;
+export default Progress;

package/lib/components/progress/Progress.js

@@ -0,0 +1,32 @@
+import classNames from 'classnames';
+import { jsx as _jsx } from "react/jsx-runtime";
+function Progress(_ref) {
+  let {
+    background = 'white',
+    error = false,
+    progress,
+    className
+  } = _ref;
+  const classes = classNames('fwe-progress-bar', {
+    'fwe-bg-red': error
+  }, {
+    'fwe-progress-bar-black': background === 'black'
+  }, {
+    'fwe-progress-bar-background': background === 'background'
+  });
+  return /*#__PURE__*/_jsx("div", {
+    className: classNames('fwe-progress', className),
+    children: /*#__PURE__*/_jsx("div", {
+      className: classes,
+      role: "progressbar",
+      style: {
+        width: `${progress}%`
+      },
+      "aria-valuenow": progress,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      "aria-label": "progressbar"
+    })
+  });
+}
+export default Progress;

package/lib/components/search-input/ClearButton.d.ts

@@ -0,0 +1,2 @@
+import { ComponentPropsWithoutRef } from 'react';
+export default function ClearButton(props: ComponentPropsWithoutRef<'div'>): JSX.Element;

package/lib/components/search-input/ClearButton.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function ClearButton(props) {
+  return /*#__PURE__*/_jsx("div", {
+    role: "button",
+    tabIndex: -1,
+    className: "fwe-clear-icon",
+    "aria-label": "Clear",
+    ...props
+  });
+}

package/lib/components/search-input/SearchInput.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import './SearchInput.scss';
+import SearchSuggestion from './SearchSuggestion';
+interface SearchInputProps {
+    disabled?: boolean;
+    label?: string;
+    defaultValue?: string;
+    value?: string;
+    suggestions?: SearchSuggestion[];
+    onChange?: (value: string) => void;
+    onKeyboardNavigate?: (value: string) => void;
+    onSearch?: (value: string) => void;
+}
+declare function SearchInput({ defaultValue, disabled, label, value, suggestions, onChange, onSearch, onKeyboardNavigate, }: SearchInputProps): JSX.Element;
+export default SearchInput;