@festo-ui/react 9.0.1-dev.757 → 9.0.1-dev.758

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 (223) hide show
  1. package/package.json +1 -1
  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 -13
  25. package/dist/components/breadcrumb/Breadcrumb.js +0 -32
  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 -29
  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/radio/RadioButton.d.ts +0 -14
  152. package/dist/forms/radio/RadioButton.js +0 -61
  153. package/dist/forms/radio/RadioGroup.d.ts +0 -12
  154. package/dist/forms/radio/RadioGroup.js +0 -50
  155. package/dist/forms/radio/RadioGroupContext.d.ts +0 -12
  156. package/dist/forms/radio/RadioGroupContext.js +0 -3
  157. package/dist/forms/segment/Segment.d.ts +0 -13
  158. package/dist/forms/segment/Segment.js +0 -59
  159. package/dist/forms/segment/segment-control/SegmentControl.d.ts +0 -14
  160. package/dist/forms/segment/segment-control/SegmentControl.js +0 -57
  161. package/dist/forms/select/Select.css +0 -160
  162. package/dist/forms/select/Select.d.ts +0 -26
  163. package/dist/forms/select/Select.js +0 -95
  164. package/dist/forms/select/internal/HiddenInput.d.ts +0 -8
  165. package/dist/forms/select/internal/HiddenInput.js +0 -15
  166. package/dist/forms/select/internal/ListItem.d.ts +0 -18
  167. package/dist/forms/select/internal/ListItem.js +0 -69
  168. package/dist/forms/select/internal/SelectButton.d.ts +0 -12
  169. package/dist/forms/select/internal/SelectButton.js +0 -49
  170. package/dist/forms/select/internal/SelectButtonContent.d.ts +0 -7
  171. package/dist/forms/select/internal/SelectButtonContent.js +0 -31
  172. package/dist/forms/select/internal/SelectCheckbox.d.ts +0 -4
  173. package/dist/forms/select/internal/SelectCheckbox.js +0 -13
  174. package/dist/forms/select/internal/SelectLabel.d.ts +0 -7
  175. package/dist/forms/select/internal/SelectLabel.js +0 -12
  176. package/dist/forms/select/internal/SelectOptionsContainer.d.ts +0 -17
  177. package/dist/forms/select/internal/SelectOptionsContainer.js +0 -103
  178. package/dist/forms/select/internal/SelectScrollContainer.d.ts +0 -8
  179. package/dist/forms/select/internal/SelectScrollContainer.js +0 -15
  180. package/dist/forms/select/internal/SelectWrapper.d.ts +0 -6
  181. package/dist/forms/select/internal/SelectWrapper.js +0 -12
  182. package/dist/forms/select/internal/index.d.ts +0 -6
  183. package/dist/forms/select/internal/index.js +0 -7
  184. package/dist/forms/select/internal/utils.d.ts +0 -7
  185. package/dist/forms/select/internal/utils.js +0 -30
  186. package/dist/forms/select/select-option/SelectOption.d.ts +0 -14
  187. package/dist/forms/select/select-option/SelectOption.js +0 -12
  188. package/dist/forms/select/utils.d.ts +0 -2
  189. package/dist/forms/select/utils.js +0 -12
  190. package/dist/forms/slider/Slider.css +0 -50
  191. package/dist/forms/slider/Slider.d.ts +0 -17
  192. package/dist/forms/slider/Slider.js +0 -93
  193. package/dist/forms/switch/Switch.d.ts +0 -12
  194. package/dist/forms/switch/Switch.js +0 -42
  195. package/dist/forms/text-area/TextArea.css +0 -14
  196. package/dist/forms/text-area/TextArea.d.ts +0 -22
  197. package/dist/forms/text-area/TextArea.js +0 -99
  198. package/dist/forms/text-input/TextInput.d.ts +0 -24
  199. package/dist/forms/text-input/TextInput.js +0 -74
  200. package/dist/forms/time-picker/TimePicker.css +0 -10
  201. package/dist/forms/time-picker/TimePicker.d.ts +0 -24
  202. package/dist/forms/time-picker/TimePicker.js +0 -140
  203. package/dist/forms/time-picker/time-picker-dropdown/TimePickerDropdown.css +0 -4
  204. package/dist/forms/time-picker/time-picker-dropdown/TimePickerDropdown.d.ts +0 -19
  205. package/dist/forms/time-picker/time-picker-dropdown/TimePickerDropdown.js +0 -208
  206. package/dist/forms/time-picker/time-picker-dropdown/TimePickerInput.d.ts +0 -9
  207. package/dist/forms/time-picker/time-picker-dropdown/TimePickerInput.js +0 -14
  208. package/dist/index.d.ts +0 -58
  209. package/dist/index.js +0 -59
  210. package/dist/utils/index.d.ts +0 -1
  211. package/dist/utils/index.js +0 -7
  212. package/dist/utils/setRef.d.ts +0 -1
  213. package/dist/utils/setRef.js +0 -5
  214. package/dist/utils/types.d.ts +0 -29
  215. package/dist/utils/types.js +0 -0
  216. package/dist/utils/useControlled.d.ts +0 -7
  217. package/dist/utils/useControlled.js +0 -20
  218. package/dist/utils/useForkRef.d.ts +0 -2
  219. package/dist/utils/useForkRef.js +0 -15
  220. package/dist/utils/useId.d.ts +0 -1
  221. package/dist/utils/useId.js +0 -20
  222. package/dist/utils/useOnClickOutside.d.ts +0 -2
  223. 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,29 +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
- className: "fwe-btn-unstyled fr-popover-item",
17
- onClick: (e)=>handleClick(e),
18
- children: [
19
- /*#__PURE__*/ jsx(IconWrapper, {
20
- icon: item.icon
21
- }),
22
- /*#__PURE__*/ jsx("span", {
23
- className: "fwe-mr-xxs",
24
- children: item.text
25
- })
26
- ]
27
- });
28
- }
29
- 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;