@festo-ui/react 9.0.1-dev.780 → 9.0.1-dev.782

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (203) hide show
  1. package/package.json +14 -18
  2. package/dist/components/accordion/Accordion.css +0 -4
  3. package/dist/components/accordion/Accordion.d.ts +0 -10
  4. package/dist/components/accordion/Accordion.js +0 -41
  5. package/dist/components/accordion/AccordionContext.d.ts +0 -11
  6. package/dist/components/accordion/AccordionContext.js +0 -3
  7. package/dist/components/accordion/accordion-header/AccordionHeader.css +0 -11
  8. package/dist/components/accordion/accordion-header/AccordionHeader.d.ts +0 -2
  9. package/dist/components/accordion/accordion-header/AccordionHeader.js +0 -11
  10. package/dist/components/accordion/accordion-item/AccordionItem.css +0 -64
  11. package/dist/components/accordion/accordion-item/AccordionItem.d.ts +0 -8
  12. package/dist/components/accordion/accordion-item/AccordionItem.js +0 -60
  13. package/dist/components/accordion/accordion-item/AccordionItemContext.d.ts +0 -7
  14. package/dist/components/accordion/accordion-item/AccordionItemContext.js +0 -3
  15. package/dist/components/accordion/accordion-item/accordion-item-body/AccordionItemBody.css +0 -76
  16. package/dist/components/accordion/accordion-item/accordion-item-body/AccordionItemBody.d.ts +0 -2
  17. package/dist/components/accordion/accordion-item/accordion-item-body/AccordionItemBody.js +0 -61
  18. package/dist/components/accordion/accordion-item/accordion-item-header/AccordionItemHeader.css +0 -11
  19. package/dist/components/accordion/accordion-item/accordion-item-header/AccordionItemHeader.d.ts +0 -2
  20. package/dist/components/accordion/accordion-item/accordion-item-header/AccordionItemHeader.js +0 -20
  21. package/dist/components/bottom-sheet/BottomSheet.css +0 -18
  22. package/dist/components/bottom-sheet/BottomSheet.d.ts +0 -11
  23. package/dist/components/bottom-sheet/BottomSheet.js +0 -101
  24. package/dist/components/breadcrumb/Breadcrumb.d.ts +0 -14
  25. package/dist/components/breadcrumb/Breadcrumb.js +0 -87
  26. package/dist/components/button/Button.d.ts +0 -11
  27. package/dist/components/button/Button.js +0 -36
  28. package/dist/components/card/Card.d.ts +0 -4
  29. package/dist/components/card/Card.js +0 -9
  30. package/dist/components/card/CardBody.d.ts +0 -5
  31. package/dist/components/card/CardBody.js +0 -15
  32. package/dist/components/card/CardHeader.d.ts +0 -8
  33. package/dist/components/card/CardHeader.js +0 -31
  34. package/dist/components/card/CardHeader.stories.helper.js +0 -7
  35. package/dist/components/card/CardNotification.d.ts +0 -6
  36. package/dist/components/card/CardNotification.js +0 -26
  37. package/dist/components/chips/chip/Chip.d.ts +0 -17
  38. package/dist/components/chips/chip/Chip.js +0 -38
  39. package/dist/components/chips/chip-container/ChipContainer.d.ts +0 -5
  40. package/dist/components/chips/chip-container/ChipContainer.js +0 -12
  41. package/dist/components/icon-wrapper/IconWrapper.d.ts +0 -6
  42. package/dist/components/icon-wrapper/IconWrapper.js +0 -13
  43. package/dist/components/loading-indicator/LoadingIndicator.d.ts +0 -5
  44. package/dist/components/loading-indicator/LoadingIndicator.js +0 -41
  45. package/dist/components/mobile-flyout/MobileFlyout.d.ts +0 -11
  46. package/dist/components/mobile-flyout/MobileFlyout.js +0 -88
  47. package/dist/components/mobile-flyout/MobileFlyoutContext.d.ts +0 -8
  48. package/dist/components/mobile-flyout/MobileFlyoutContext.js +0 -3
  49. package/dist/components/mobile-flyout/mobile-flyout-item/MobileFlyoutItem.d.ts +0 -17
  50. package/dist/components/mobile-flyout/mobile-flyout-item/MobileFlyoutItem.js +0 -36
  51. package/dist/components/mobile-flyout/mobile-flyout-page/MobileFlyoutPage.css +0 -5
  52. package/dist/components/mobile-flyout/mobile-flyout-page/MobileFlyoutPage.d.ts +0 -8
  53. package/dist/components/mobile-flyout/mobile-flyout-page/MobileFlyoutPage.js +0 -35
  54. package/dist/components/modals/AlertModal.d.ts +0 -12
  55. package/dist/components/modals/AlertModal.js +0 -53
  56. package/dist/components/modals/ConfirmModal.d.ts +0 -11
  57. package/dist/components/modals/ConfirmModal.js +0 -46
  58. package/dist/components/modals/CustomModal.d.ts +0 -8
  59. package/dist/components/modals/CustomModal.js +0 -38
  60. package/dist/components/modals/Modal.css +0 -39
  61. package/dist/components/modals/Modal.d.ts +0 -8
  62. package/dist/components/modals/Modal.js +0 -31
  63. package/dist/components/modals/ModalBase.d.ts +0 -9
  64. package/dist/components/modals/ModalBase.js +0 -124
  65. package/dist/components/modals/ModalFooter.d.ts +0 -2
  66. package/dist/components/modals/ModalFooter.js +0 -12
  67. package/dist/components/modals/Prompt.d.ts +0 -15
  68. package/dist/components/modals/Prompt.js +0 -58
  69. package/dist/components/modals/image-gallery/ImageGallery.css +0 -815
  70. package/dist/components/modals/image-gallery/ImageGallery.d.ts +0 -21
  71. package/dist/components/modals/image-gallery/ImageGallery.helper.d.ts +0 -2
  72. package/dist/components/modals/image-gallery/ImageGallery.helper.js +0 -13
  73. package/dist/components/modals/image-gallery/ImageGallery.js +0 -103
  74. package/dist/components/modals/image-gallery/ImageGallery.stories.helper.js +0 -112
  75. package/dist/components/modals/image-gallery/ImageGalleryContent.d.ts +0 -8
  76. package/dist/components/modals/image-gallery/ImageGalleryContent.js +0 -15
  77. package/dist/components/modals/image-gallery/ImageGalleryScale.d.ts +0 -6
  78. package/dist/components/modals/image-gallery/ImageGalleryScale.js +0 -15
  79. package/dist/components/modals/image-gallery/ImageGallerySwiper.d.ts +0 -12
  80. package/dist/components/modals/image-gallery/ImageGallerySwiper.js +0 -40
  81. package/dist/components/modals/image-gallery/ImageGalleryThumbsSwiper.d.ts +0 -7
  82. package/dist/components/modals/image-gallery/ImageGalleryThumbsSwiper.js +0 -27
  83. package/dist/components/modals/image-gallery/internal/CloseButton.d.ts +0 -6
  84. package/dist/components/modals/image-gallery/internal/CloseButton.js +0 -14
  85. package/dist/components/modals/image-gallery/internal/ImageGalleryContainer.d.ts +0 -5
  86. package/dist/components/modals/image-gallery/internal/ImageGalleryContainer.js +0 -8
  87. package/dist/components/modals/image-gallery/internal/ImageGalleryPagination.d.ts +0 -5
  88. package/dist/components/modals/image-gallery/internal/ImageGalleryPagination.js +0 -29
  89. package/dist/components/pagination/Pagination.css +0 -10
  90. package/dist/components/pagination/Pagination.d.ts +0 -15
  91. package/dist/components/pagination/Pagination.js +0 -100
  92. package/dist/components/popovers/legend/Legend.d.ts +0 -9
  93. package/dist/components/popovers/legend/Legend.js +0 -21
  94. package/dist/components/popovers/popover/Popover.css +0 -56
  95. package/dist/components/popovers/popover/Popover.d.ts +0 -21
  96. package/dist/components/popovers/popover/Popover.js +0 -106
  97. package/dist/components/popovers/popover-menu/PopoverMenu.d.ts +0 -7
  98. package/dist/components/popovers/popover-menu/PopoverMenu.js +0 -37
  99. package/dist/components/popovers/popover-menu/PopoverMenuContext.d.ts +0 -3
  100. package/dist/components/popovers/popover-menu/PopoverMenuContext.js +0 -5
  101. package/dist/components/popovers/popover-menu-item/PopoverMenuItem.d.ts +0 -9
  102. package/dist/components/popovers/popover-menu-item/PopoverMenuItem.js +0 -28
  103. package/dist/components/popovers/tooltip/Tooltip.d.ts +0 -5
  104. package/dist/components/popovers/tooltip/Tooltip.js +0 -12
  105. package/dist/components/progress/Progress.d.ts +0 -7
  106. package/dist/components/progress/Progress.js +0 -26
  107. package/dist/components/search-input/ClearButton.d.ts +0 -2
  108. package/dist/components/search-input/ClearButton.js +0 -10
  109. package/dist/components/search-input/SearchInput.css +0 -13
  110. package/dist/components/search-input/SearchInput.d.ts +0 -14
  111. package/dist/components/search-input/SearchInput.js +0 -61
  112. package/dist/components/search-input/SearchSuggestion.d.ts +0 -17
  113. package/dist/components/search-input/SearchSuggestion.js +0 -21
  114. package/dist/components/search-input/useSearchInput.d.ts +0 -13
  115. package/dist/components/search-input/useSearchInput.js +0 -85
  116. package/dist/components/snackbar/Snackbar.css +0 -55
  117. package/dist/components/snackbar/Snackbar.d.ts +0 -21
  118. package/dist/components/snackbar/Snackbar.js +0 -78
  119. package/dist/components/snackbar/SnackbarContext.d.ts +0 -7
  120. package/dist/components/snackbar/SnackbarContext.js +0 -3
  121. package/dist/components/snackbar/SnackbarProvider.d.ts +0 -7
  122. package/dist/components/snackbar/SnackbarProvider.js +0 -66
  123. package/dist/components/snackbar/useSnackbar.d.ts +0 -2
  124. package/dist/components/snackbar/useSnackbar.js +0 -4
  125. package/dist/components/stepper-horizontal/StepperHorizontal.css +0 -6
  126. package/dist/components/stepper-horizontal/StepperHorizontal.d.ts +0 -7
  127. package/dist/components/stepper-horizontal/StepperHorizontal.js +0 -48
  128. package/dist/components/stepper-horizontal/step-horizontal/StepHorizontal.css +0 -24
  129. package/dist/components/stepper-horizontal/step-horizontal/StepHorizontal.d.ts +0 -6
  130. package/dist/components/stepper-horizontal/step-horizontal/StepHorizontal.js +0 -16
  131. package/dist/components/stepper-vertical/StepperVertical.d.ts +0 -6
  132. package/dist/components/stepper-vertical/StepperVertical.js +0 -26
  133. package/dist/components/stepper-vertical/step-vertical/StepVertical.css +0 -10
  134. package/dist/components/stepper-vertical/step-vertical/StepVertical.d.ts +0 -11
  135. package/dist/components/stepper-vertical/step-vertical/StepVertical.js +0 -58
  136. package/dist/components/tab/Tabs.css +0 -285
  137. package/dist/components/tab/Tabs.d.ts +0 -22
  138. package/dist/components/tab/Tabs.js +0 -194
  139. package/dist/components/tab/interfaces.d.ts +0 -5
  140. package/dist/components/tab/interfaces.js +0 -0
  141. package/dist/components/tab/tab-pane/TabPane.css +0 -8
  142. package/dist/components/tab/tab-pane/TabPane.d.ts +0 -9
  143. package/dist/components/tab/tab-pane/TabPane.js +0 -18
  144. package/dist/components/tab/useTabScroll.d.ts +0 -25
  145. package/dist/components/tab/useTabScroll.js +0 -151
  146. package/dist/components/table-header-cell/TableHeaderCell.d.ts +0 -5
  147. package/dist/components/table-header-cell/TableHeaderCell.js +0 -21
  148. package/dist/forms/checkbox/Checkbox.css +0 -134
  149. package/dist/forms/checkbox/Checkbox.d.ts +0 -15
  150. package/dist/forms/checkbox/Checkbox.js +0 -80
  151. package/dist/forms/combobox/ComboBox.css +0 -124
  152. package/dist/forms/combobox/ComboBox.d.ts +0 -28
  153. package/dist/forms/combobox/ComboBox.js +0 -170
  154. package/dist/forms/multi-select/MultiSelect.d.ts +0 -20
  155. package/dist/forms/multi-select/MultiSelect.js +0 -186
  156. package/dist/forms/multi-select/MultiSelect.module.js +0 -8
  157. package/dist/forms/multi-select/MultiSelect_module.css +0 -13
  158. package/dist/forms/radio/RadioButton.d.ts +0 -14
  159. package/dist/forms/radio/RadioButton.js +0 -61
  160. package/dist/forms/radio/RadioGroup.d.ts +0 -12
  161. package/dist/forms/radio/RadioGroup.js +0 -50
  162. package/dist/forms/radio/RadioGroupContext.d.ts +0 -12
  163. package/dist/forms/radio/RadioGroupContext.js +0 -3
  164. package/dist/forms/segment/Segment.d.ts +0 -13
  165. package/dist/forms/segment/Segment.js +0 -59
  166. package/dist/forms/segment/segment-control/SegmentControl.d.ts +0 -14
  167. package/dist/forms/segment/segment-control/SegmentControl.js +0 -57
  168. package/dist/forms/select/Select.d.ts +0 -25
  169. package/dist/forms/select/Select.js +0 -87
  170. package/dist/forms/slider/Slider.css +0 -50
  171. package/dist/forms/slider/Slider.d.ts +0 -17
  172. package/dist/forms/slider/Slider.js +0 -93
  173. package/dist/forms/switch/Switch.d.ts +0 -12
  174. package/dist/forms/switch/Switch.js +0 -42
  175. package/dist/forms/text-area/TextArea.css +0 -14
  176. package/dist/forms/text-area/TextArea.d.ts +0 -22
  177. package/dist/forms/text-area/TextArea.js +0 -99
  178. package/dist/forms/text-input/TextInput.d.ts +0 -24
  179. package/dist/forms/text-input/TextInput.js +0 -74
  180. package/dist/forms/time-picker/TimePicker.css +0 -10
  181. package/dist/forms/time-picker/TimePicker.d.ts +0 -24
  182. package/dist/forms/time-picker/TimePicker.js +0 -140
  183. package/dist/forms/time-picker/time-picker-dropdown/TimePickerDropdown.css +0 -4
  184. package/dist/forms/time-picker/time-picker-dropdown/TimePickerDropdown.d.ts +0 -19
  185. package/dist/forms/time-picker/time-picker-dropdown/TimePickerDropdown.js +0 -208
  186. package/dist/forms/time-picker/time-picker-dropdown/TimePickerInput.d.ts +0 -9
  187. package/dist/forms/time-picker/time-picker-dropdown/TimePickerInput.js +0 -14
  188. package/dist/index.d.ts +0 -59
  189. package/dist/index.js +0 -60
  190. package/dist/utils/index.d.ts +0 -1
  191. package/dist/utils/index.js +0 -7
  192. package/dist/utils/setRef.d.ts +0 -1
  193. package/dist/utils/setRef.js +0 -5
  194. package/dist/utils/types.d.ts +0 -36
  195. package/dist/utils/types.js +0 -0
  196. package/dist/utils/useControlled.d.ts +0 -7
  197. package/dist/utils/useControlled.js +0 -20
  198. package/dist/utils/useForkRef.d.ts +0 -2
  199. package/dist/utils/useForkRef.js +0 -15
  200. package/dist/utils/useId.d.ts +0 -1
  201. package/dist/utils/useId.js +0 -20
  202. package/dist/utils/useOnClickOutside.d.ts +0 -2
  203. package/dist/utils/useOnClickOutside.js +0 -20
@@ -1,56 +0,0 @@
1
- #arrow, #arrow:after {
2
- width: 12px;
3
- height: 12px;
4
- position: absolute;
5
- transform: rotate(45deg);
6
- }
7
-
8
- #arrow {
9
- width: 17px;
10
- height: 17px;
11
- overflow: hidden;
12
- }
13
-
14
- #arrow:after {
15
- content: "";
16
- z-index: -1;
17
- background: #fff;
18
- box-shadow: 0 1px 4px #3333;
19
- }
20
-
21
- .fwe-popover-container[data-popper-placement^="top"] > #arrow {
22
- top: 100%;
23
- }
24
-
25
- .fwe-popover-container[data-popper-placement^="top"] > #arrow:after {
26
- top: -6px;
27
- left: 3px;
28
- }
29
-
30
- .fwe-popover-container[data-popper-placement^="bottom"] > #arrow {
31
- top: -17px;
32
- }
33
-
34
- .fwe-popover-container[data-popper-placement^="bottom"] > #arrow:after {
35
- top: 11px;
36
- left: 3px;
37
- }
38
-
39
- .fwe-popover-container[data-popper-placement^="left"] > #arrow {
40
- left: 100%;
41
- }
42
-
43
- .fwe-popover-container[data-popper-placement^="left"] > #arrow:after {
44
- top: 2px;
45
- left: -6px;
46
- }
47
-
48
- .fwe-popover-container[data-popper-placement^="right"] > #arrow {
49
- left: -17px;
50
- }
51
-
52
- .fwe-popover-container[data-popper-placement^="right"] > #arrow:after {
53
- top: 2px;
54
- left: 11px;
55
- }
56
-
@@ -1,21 +0,0 @@
1
- import './Popover.scss';
2
- import type { Placement } from '@popperjs/core';
3
- import type React from 'react';
4
- import type { ClassNamePropsWithChildren } from '../../../utils/types';
5
- export interface PopoverProps extends ClassNamePropsWithChildren {
6
- readonly popoverContent: React.ReactNode;
7
- readonly position?: Placement;
8
- readonly fallbackPositions?: Placement[];
9
- readonly openOnHover?: boolean;
10
- readonly defaultOpen?: boolean;
11
- readonly open?: boolean;
12
- readonly onStatusChange?: (status: boolean) => void;
13
- readonly wrapper?: (children: React.ReactNode) => React.ReactNode;
14
- readonly flip?: boolean;
15
- readonly containerClassName?: string;
16
- readonly popoverClassName?: string;
17
- readonly stopPropagation?: boolean;
18
- readonly arrow?: boolean;
19
- readonly onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
20
- }
21
- export declare function Popover({ popoverContent, children, position, fallbackPositions, openOnHover, defaultOpen, open, onStatusChange, wrapper, className, flip, containerClassName, popoverClassName, stopPropagation, arrow, onClick, }: PopoverProps): import("react/jsx-runtime").JSX.Element;
@@ -1,106 +0,0 @@
1
- import { Fragment, jsx, jsxs } from "react/jsx-runtime";
2
- import "./Popover.css";
3
- import classnames from "classnames";
4
- import { useRef, useState } from "react";
5
- import { usePopper } from "react-popper";
6
- import { useControlled } from "../../../utils/useControlled.js";
7
- import { useForkRef } from "../../../utils/useForkRef.js";
8
- import { useOnClickOutside } from "../../../utils/useOnClickOutside.js";
9
- function Popover({ popoverContent, children, position, fallbackPositions, openOnHover = false, defaultOpen = false, open, onStatusChange, wrapper, className, flip = true, containerClassName, popoverClassName, stopPropagation = false, arrow = true, onClick }) {
10
- const [showPopper, setShowPopper] = useControlled({
11
- controlled: open,
12
- default: defaultOpen
13
- });
14
- const [popperElement, setPopperElement] = useState(null);
15
- const [arrowElement, setArrowElement] = useState(null);
16
- const referenceElement = useRef(null);
17
- const popperElRef = useRef(null);
18
- const combinedRef = useForkRef(popperElRef, setPopperElement);
19
- const { styles, attributes } = usePopper(referenceElement.current, popperElement, {
20
- placement: position,
21
- modifiers: [
22
- {
23
- name: 'arrow',
24
- options: {
25
- element: arrowElement
26
- }
27
- },
28
- {
29
- name: 'offset',
30
- options: {
31
- offset: [
32
- 0,
33
- 24
34
- ]
35
- }
36
- },
37
- {
38
- name: 'flip',
39
- options: {
40
- fallbackPlacements: flip ? fallbackPositions : [
41
- position || 'auto'
42
- ]
43
- }
44
- }
45
- ]
46
- });
47
- const handleChange = (e, status)=>{
48
- if (stopPropagation) {
49
- e?.stopPropagation();
50
- e?.preventDefault();
51
- }
52
- setShowPopper(status);
53
- onStatusChange?.(status);
54
- };
55
- function closePopover(event) {
56
- handleChange(event, false);
57
- }
58
- useOnClickOutside(popperElRef, closePopover, referenceElement);
59
- function handleKeyDown(event) {
60
- if ('Enter' === event.key) handleChange(void 0, true);
61
- if ('Escape' === event.key) handleChange(void 0, false);
62
- }
63
- function handleKeyUp(event) {
64
- if (' ' === event.key) handleChange(void 0, true);
65
- }
66
- function handleTriggerClick(event) {
67
- onClick?.(event);
68
- if (event.defaultPrevented) setShowPopper(!showPopper);
69
- else handleChange(event, !showPopper);
70
- }
71
- const childrenWrapper = /*#__PURE__*/ jsx("div", {
72
- tabIndex: 0,
73
- role: "button",
74
- className: className,
75
- ref: referenceElement,
76
- onKeyDown: handleKeyDown,
77
- onKeyUp: handleKeyUp,
78
- onClick: handleTriggerClick,
79
- onMouseEnter: openOnHover ? (e)=>handleChange(e, true) : void 0,
80
- onMouseLeave: openOnHover ? (e)=>handleChange(e, false) : void 0,
81
- children: children
82
- });
83
- return /*#__PURE__*/ jsxs(Fragment, {
84
- children: [
85
- wrapper ? wrapper(childrenWrapper) : childrenWrapper,
86
- showPopper && /*#__PURE__*/ jsxs("div", {
87
- className: classnames('fwe-popover-container', containerClassName),
88
- ref: combinedRef,
89
- style: styles.popper,
90
- ...attributes.popper,
91
- children: [
92
- /*#__PURE__*/ jsx("div", {
93
- className: classnames('fwe-popover', popoverClassName),
94
- children: popoverContent
95
- }),
96
- arrow && /*#__PURE__*/ jsx("div", {
97
- ref: setArrowElement,
98
- style: styles.arrow,
99
- id: "arrow"
100
- })
101
- ]
102
- })
103
- ]
104
- });
105
- }
106
- export { Popover };
@@ -1,7 +0,0 @@
1
- import { type ReactNode } from 'react';
2
- import { type PopoverProps } from '../popover/Popover';
3
- import { type PopoverMenuItemProps } from '../popover-menu-item/PopoverMenuItem';
4
- export interface PopoverMenuProps extends Omit<PopoverProps, 'popoverContent' | 'open' | 'onStatusChange'> {
5
- menu: PopoverMenuItemProps[] | ReactNode[];
6
- }
7
- export declare function PopoverMenu({ menu, ...props }: Readonly<PopoverMenuProps>): import("react/jsx-runtime").JSX.Element;
@@ -1,37 +0,0 @@
1
- import { jsx } from "react/jsx-runtime";
2
- import classnames from "classnames";
3
- import { useMemo, useState } from "react";
4
- import { Popover } from "../popover/Popover.js";
5
- import { PopoverMenuItem } from "../popover-menu-item/PopoverMenuItem.js";
6
- import { PopoverMenuContext } from "./PopoverMenuContext.js";
7
- function PopoverMenu({ menu, ...props }) {
8
- const [showPopper, setShowPopper] = useState(false);
9
- const isPopoverMenuItemPropsArray = (items)=>Array.isArray(items) && items.length > 0 && 'text' in items[0];
10
- let content = null;
11
- content = isPopoverMenuItemPropsArray(menu) ? menu.map((item)=>/*#__PURE__*/ jsx(PopoverMenuItem, {
12
- item: item
13
- }, item.text)) : menu;
14
- const popoverMenuContext = useMemo(()=>({
15
- setShowPopper
16
- }), []);
17
- return /*#__PURE__*/ jsx("div", {
18
- className: classnames('fwe-popover-menu-trigger', props.className),
19
- children: /*#__PURE__*/ jsx(PopoverMenuContext.Provider, {
20
- value: popoverMenuContext,
21
- children: /*#__PURE__*/ jsx(Popover, {
22
- popoverClassName: "fwe-popover--menu",
23
- popoverContent: content,
24
- position: "right",
25
- open: showPopper,
26
- onStatusChange: setShowPopper,
27
- ...props,
28
- children: /*#__PURE__*/ jsx("div", {
29
- "data-testid": "fwe-popover-menu-trigger-button",
30
- className: "fwe-popover-menu-trigger-button",
31
- children: props.children
32
- })
33
- })
34
- })
35
- });
36
- }
37
- export { PopoverMenu };
@@ -1,3 +0,0 @@
1
- export declare const PopoverMenuContext: import("react").Context<{
2
- setShowPopper: React.Dispatch<React.SetStateAction<boolean>>;
3
- }>;
@@ -1,5 +0,0 @@
1
- import { createContext } from "react";
2
- const PopoverMenuContext = createContext({
3
- setShowPopper: ()=>{}
4
- });
5
- export { PopoverMenuContext };
@@ -1,9 +0,0 @@
1
- export interface PopoverMenuItemProps {
2
- text: string;
3
- icon: React.ReactNode;
4
- action?: (data: unknown) => void;
5
- data?: unknown;
6
- }
7
- export declare function PopoverMenuItem({ item, }: Readonly<{
8
- item: PopoverMenuItemProps;
9
- }>): import("react/jsx-runtime").JSX.Element | null;
@@ -1,28 +0,0 @@
1
- import { jsx, jsxs } from "react/jsx-runtime";
2
- import { useContext } from "react";
3
- import { IconWrapper } from "../../icon-wrapper/IconWrapper.js";
4
- import { PopoverMenuContext } from "../popover-menu/PopoverMenuContext.js";
5
- function PopoverMenuItem({ item }) {
6
- const { setShowPopper } = useContext(PopoverMenuContext);
7
- function handleClick(e) {
8
- e?.stopPropagation();
9
- e?.preventDefault();
10
- if (setShowPopper) setShowPopper(false);
11
- if (item.action) item.action(item.data);
12
- }
13
- if (!item) return null;
14
- return /*#__PURE__*/ jsxs("button", {
15
- type: "button",
16
- onClick: (e)=>handleClick(e),
17
- children: [
18
- /*#__PURE__*/ jsx(IconWrapper, {
19
- icon: item.icon
20
- }),
21
- /*#__PURE__*/ jsx("span", {
22
- className: "fwe-mr-xxs",
23
- children: item.text
24
- })
25
- ]
26
- });
27
- }
28
- export { PopoverMenuItem };
@@ -1,5 +0,0 @@
1
- import type { PopoverProps } from '../popover/Popover';
2
- export interface TooltipProps extends Omit<PopoverProps, 'popoverContent' | 'openOnHover'> {
3
- title: React.ReactNode;
4
- }
5
- export declare function Tooltip({ title, ...props }: Readonly<TooltipProps>): import("react/jsx-runtime").JSX.Element;
@@ -1,12 +0,0 @@
1
- import { jsx } from "react/jsx-runtime";
2
- import { Popover } from "../popover/Popover.js";
3
- function Tooltip({ title, ...props }) {
4
- return /*#__PURE__*/ jsx(Popover, {
5
- position: "bottom",
6
- popoverContent: title,
7
- openOnHover: true,
8
- ...props,
9
- children: props.children
10
- });
11
- }
12
- export { Tooltip };
@@ -1,7 +0,0 @@
1
- import type { ClassNameProps } from '../../utils/types';
2
- export interface ProgressProps extends ClassNameProps {
3
- readonly progress: number;
4
- readonly background?: 'white' | 'black' | 'background';
5
- readonly error?: boolean;
6
- }
7
- export declare function Progress({ background, error, progress, className, }: ProgressProps): import("react/jsx-runtime").JSX.Element;
@@ -1,26 +0,0 @@
1
- import { jsx } from "react/jsx-runtime";
2
- import classnames from "classnames";
3
- function Progress({ background = 'white', error = false, progress, className }) {
4
- const classes = classnames('fwe-progress-bar', {
5
- 'fwe-bg-red': error
6
- }, {
7
- 'fwe-progress-bar-black': 'black' === background
8
- }, {
9
- 'fwe-progress-bar-background': 'background' === background
10
- });
11
- return /*#__PURE__*/ jsx("div", {
12
- className: classnames('fwe-progress', className),
13
- children: /*#__PURE__*/ jsx("div", {
14
- className: classes,
15
- role: "progressbar",
16
- style: {
17
- width: `${progress}%`
18
- },
19
- "aria-valuenow": progress,
20
- "aria-valuemin": 0,
21
- "aria-valuemax": 100,
22
- "aria-label": "progressbar"
23
- })
24
- });
25
- }
26
- export { Progress };
@@ -1,2 +0,0 @@
1
- import type { ComponentPropsWithoutRef } from 'react';
2
- export declare function ClearButton(props: ComponentPropsWithoutRef<'button'>): import("react/jsx-runtime").JSX.Element;
@@ -1,10 +0,0 @@
1
- import { jsx } from "react/jsx-runtime";
2
- function ClearButton(props) {
3
- return /*#__PURE__*/ jsx("button", {
4
- type: "button",
5
- className: "fwe-clear-icon fr-search-input-clear-button",
6
- "aria-label": "Clear",
7
- ...props
8
- });
9
- }
10
- export { ClearButton };
@@ -1,13 +0,0 @@
1
- .fwe-search-suggestion {
2
- height: 40px;
3
- }
4
-
5
- .fr-search-input-clear-button {
6
- background: none;
7
- border: none;
8
- justify-content: center;
9
- align-items: center;
10
- padding: 0;
11
- display: flex;
12
- }
13
-
@@ -1,14 +0,0 @@
1
- import './SearchInput.scss';
2
- import type { SearchSuggestion } from './SearchSuggestion';
3
- export interface SearchInputProps {
4
- readonly disabled?: boolean;
5
- readonly label?: string;
6
- readonly defaultValue?: string;
7
- readonly value?: string;
8
- readonly suggestions?: SearchSuggestion[];
9
- readonly onChange?: (value: string) => void;
10
- readonly onKeyboardNavigate?: (value: string) => void;
11
- readonly onSearch?: (value: string) => void;
12
- readonly className?: string;
13
- }
14
- export declare function SearchInput({ defaultValue, disabled, label, value, suggestions, onChange, onSearch, onKeyboardNavigate, className, }: SearchInputProps): import("react/jsx-runtime").JSX.Element;
@@ -1,61 +0,0 @@
1
- import { jsx, jsxs } from "react/jsx-runtime";
2
- import "./SearchInput.css";
3
- import classnames from "classnames";
4
- import { useRef } from "react";
5
- import { useOnClickOutside } from "../../utils/useOnClickOutside.js";
6
- import { ClearButton } from "./ClearButton.js";
7
- import { useSearchInput } from "./useSearchInput.js";
8
- function SearchInput({ defaultValue, disabled, label, value, suggestions, onChange, onSearch, onKeyboardNavigate, className }) {
9
- const inputRef = useRef(null);
10
- const containerRef = useRef(null);
11
- const cappedSuggestions = suggestions?.slice(0, 10) ?? [];
12
- const { handleFocus, handleInput, handleClearQuery, handleSuggestionClick, handleOutsideClick, handleKeyDown, hideSuggestionList, selectedSuggestionIndex, innerValue } = useSearchInput(inputRef, cappedSuggestions, value, defaultValue, onChange, onSearch, onKeyboardNavigate);
13
- useOnClickOutside(containerRef, handleOutsideClick);
14
- return /*#__PURE__*/ jsxs("div", {
15
- className: classnames('fwe-search-input', className),
16
- ref: containerRef,
17
- children: [
18
- /*#__PURE__*/ jsx("input", {
19
- ref: inputRef,
20
- disabled: disabled,
21
- placeholder: label,
22
- onFocus: handleFocus,
23
- type: "search",
24
- "aria-label": "Search",
25
- onInput: handleInput,
26
- onKeyDown: handleKeyDown,
27
- value: innerValue
28
- }),
29
- /*#__PURE__*/ jsx("div", {
30
- className: "fwe-search-icon"
31
- }),
32
- /*#__PURE__*/ jsx(ClearButton, {
33
- onClick: handleClearQuery
34
- }),
35
- Boolean(suggestions?.length) && !hideSuggestionList && /*#__PURE__*/ jsxs("div", {
36
- className: "fwe-search-suggestions",
37
- role: "listbox",
38
- children: [
39
- cappedSuggestions.map((suggestion, i)=>/*#__PURE__*/ jsx("div", {
40
- role: "option",
41
- tabIndex: -1,
42
- "aria-label": suggestion.value,
43
- "aria-selected": selectedSuggestionIndex === i,
44
- onClick: ()=>handleSuggestionClick(suggestion),
45
- className: `fwe-search-suggestion ${selectedSuggestionIndex === i ? 'fwe-selected' : ''}`,
46
- children: /*#__PURE__*/ jsx("div", {
47
- dangerouslySetInnerHTML: {
48
- __html: suggestion.template
49
- }
50
- })
51
- }, suggestion.value)),
52
- suggestions && suggestions.length > 10 && /*#__PURE__*/ jsx("div", {
53
- className: "fwe-ml-xxs",
54
- children: "..."
55
- })
56
- ]
57
- })
58
- ]
59
- });
60
- }
61
- export { SearchInput };
@@ -1,17 +0,0 @@
1
- export declare class SearchSuggestion {
2
- /**
3
- * a html-string. e.g.: '<b> hello </b>'
4
- */
5
- template: string;
6
- /**
7
- * This Value will be used as new query when the user selects the suggestion.
8
- */
9
- value: string;
10
- /**
11
- * Creates a basic Suggestion from a string. The first query match is highlighted by bold tags.
12
- * @param suggestionString The suggested string (should contain the whole query)
13
- * @param query The current query. This string will be highlighted.
14
- * @returns a html-string.
15
- */
16
- static basicSuggestion(suggestionString: string, query: string): SearchSuggestion;
17
- }
@@ -1,21 +0,0 @@
1
- class SearchSuggestion {
2
- template;
3
- value;
4
- static basicSuggestion(suggestionString, query) {
5
- const i = suggestionString.toLocaleLowerCase().indexOf(query.toLocaleLowerCase());
6
- let template = suggestionString;
7
- if (-1 !== i) {
8
- const boldStart = i;
9
- const boldEnd = i + query.length;
10
- const part1 = suggestionString.substring(0, boldStart);
11
- const part2 = suggestionString.substring(boldStart, boldEnd);
12
- const part3 = suggestionString.substring(boldEnd, suggestionString.length);
13
- template = `${part1}<strong>${part2}</strong>${part3}`;
14
- }
15
- return {
16
- value: suggestionString,
17
- template
18
- };
19
- }
20
- }
21
- export { SearchSuggestion };
@@ -1,13 +0,0 @@
1
- import type React from 'react';
2
- import type { SearchSuggestion } from './SearchSuggestion';
3
- export declare function useSearchInput(inputRef: React.MutableRefObject<HTMLInputElement | null>, cappedSuggestions: SearchSuggestion[], value?: string, defaultValue?: string, onChange?: (value: string) => void, onSearch?: (value: string) => void, onKeyboardNavigate?: (value: string) => void): {
4
- innerValue: string | undefined;
5
- hideSuggestionList: boolean;
6
- selectedSuggestionIndex: number;
7
- handleClearQuery: () => void;
8
- handleFocus: () => void;
9
- handleInput: (event: any) => void;
10
- handleSuggestionClick: (suggestion: SearchSuggestion) => void;
11
- handleOutsideClick: () => void;
12
- handleKeyDown: (event: React.KeyboardEvent) => void;
13
- };
@@ -1,85 +0,0 @@
1
- import { useState } from "react";
2
- import { useControlled } from "../../utils/useControlled.js";
3
- function useSearchInput(inputRef, cappedSuggestions, value, defaultValue = '', onChange, onSearch, onKeyboardNavigate) {
4
- const [innerValue, setValue] = useControlled({
5
- controlled: value,
6
- default: defaultValue
7
- });
8
- const [hideSuggestionList, setHideSuggestionList] = useState(false);
9
- const [selectedSuggestionIndex, setSelectedSuggestionIndex] = useState(-1);
10
- function blurInput() {
11
- if (inputRef.current) inputRef.current.blur();
12
- }
13
- function reset() {
14
- setSelectedSuggestionIndex(-1);
15
- setHideSuggestionList(true);
16
- blurInput();
17
- }
18
- function handleSearch() {
19
- reset();
20
- if (void 0 !== innerValue) onSearch?.(innerValue);
21
- }
22
- function updateValue(newValue) {
23
- setValue(newValue);
24
- onChange?.(newValue);
25
- onSearch?.(newValue);
26
- }
27
- function handleClearQuery() {
28
- reset();
29
- updateValue('');
30
- }
31
- function handleArrowKey(newSuggestionIndex) {
32
- if (!cappedSuggestions || !cappedSuggestions.length) return;
33
- const selectedSuggestion = cappedSuggestions[newSuggestionIndex];
34
- setSelectedSuggestionIndex(newSuggestionIndex);
35
- setValue(selectedSuggestion.value);
36
- onKeyboardNavigate?.(selectedSuggestion.value);
37
- }
38
- function handleUpArrowKey() {
39
- handleArrowKey(selectedSuggestionIndex > 0 ? selectedSuggestionIndex - 1 : cappedSuggestions.length - 1);
40
- }
41
- function handleDownArrowKey() {
42
- handleArrowKey(selectedSuggestionIndex >= cappedSuggestions.length - 1 ? 0 : selectedSuggestionIndex + 1);
43
- }
44
- function handleKeyDown(event) {
45
- switch(event.key){
46
- case 'Enter':
47
- handleSearch();
48
- break;
49
- case 'Escape':
50
- handleClearQuery();
51
- break;
52
- case 'ArrowUp':
53
- handleUpArrowKey();
54
- break;
55
- case 'ArrowDown':
56
- handleDownArrowKey();
57
- break;
58
- default:
59
- break;
60
- }
61
- }
62
- const handleFocus = ()=>setHideSuggestionList(false);
63
- const handleOutsideClick = ()=>setHideSuggestionList(true);
64
- function handleSuggestionClick(suggestion) {
65
- reset();
66
- updateValue(suggestion.value);
67
- }
68
- function handleInput(event) {
69
- setSelectedSuggestionIndex(-1);
70
- setValue(event.target.value);
71
- onChange?.(event.target.value);
72
- }
73
- return {
74
- innerValue,
75
- hideSuggestionList,
76
- selectedSuggestionIndex,
77
- handleClearQuery,
78
- handleFocus,
79
- handleInput,
80
- handleSuggestionClick,
81
- handleOutsideClick,
82
- handleKeyDown
83
- };
84
- }
85
- export { useSearchInput };
@@ -1,55 +0,0 @@
1
- .fr-snackbar-wrapper {
2
- opacity: 0;
3
- opacity: 1;
4
- margin-bottom: 24px;
5
- }
6
-
7
- .fr-snackbar-wrapper-enter-done {
8
- opacity: 1;
9
- transition: opacity .6s ease-out;
10
- }
11
-
12
- .fr-snackbar-wrapper-exit {
13
- opacity: 1;
14
- height: 48px;
15
- }
16
-
17
- .fr-snackbar-wrapper-exit-active {
18
- opacity: 0;
19
- height: 0;
20
- margin-bottom: 0;
21
- transition: height .3s ease-out .3s, opacity .3s ease-out, margin-bottom .3s ease-out .3s;
22
- }
23
-
24
- .fr-snackbar-wrapper--first {
25
- opacity: 1;
26
- margin-bottom: 24px;
27
- transform: translateY(100px);
28
- }
29
-
30
- .fr-snackbar-wrapper--first-enter-done {
31
- opacity: 1;
32
- transition: opacity .6s ease-out;
33
- }
34
-
35
- .fr-snackbar-wrapper--first-exit {
36
- opacity: 1;
37
- height: 48px;
38
- }
39
-
40
- .fr-snackbar-wrapper--first-exit-active {
41
- opacity: 0;
42
- height: 0;
43
- margin-bottom: 0;
44
- transition: height .3s ease-out .3s, opacity .3s ease-out, margin-bottom .3s ease-out .3s;
45
- }
46
-
47
- .fr-snackbar-wrapper--first-enter-done {
48
- transition: transform .6s ease-out;
49
- transform: translateY(0);
50
- }
51
-
52
- .fr-snackbar-wrapper--first-exit-active {
53
- transform: translateY(0);
54
- }
55
-
@@ -1,21 +0,0 @@
1
- import './Snackbar.scss';
2
- import type { ClassNameProps } from '../../utils/types';
3
- export interface SnackbarConfig extends ClassNameProps {
4
- type?: 'info' | 'warning' | 'error';
5
- variant?: 'a' | 'b' | 'c';
6
- darkBackground?: boolean;
7
- showClose?: boolean;
8
- action?: string;
9
- disappearAfter?: number | null;
10
- key?: string | number;
11
- }
12
- export interface SnackbarData extends SnackbarConfig {
13
- text: string;
14
- }
15
- export interface SnackbarProps {
16
- readonly data?: SnackbarData;
17
- readonly onAction?: () => void;
18
- readonly onClose?: () => void;
19
- readonly first?: boolean;
20
- }
21
- export declare function Snackbar(props: SnackbarProps): import("react/jsx-runtime").JSX.Element;