@festo-ui/react 9.0.1-dev.766 → 9.0.1-dev.768

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 (226) 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 -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 -163
  152. package/dist/forms/combobox/ComboBox.d.ts +0 -28
  153. package/dist/forms/combobox/ComboBox.js +0 -169
  154. package/dist/forms/radio/RadioButton.d.ts +0 -14
  155. package/dist/forms/radio/RadioButton.js +0 -61
  156. package/dist/forms/radio/RadioGroup.d.ts +0 -12
  157. package/dist/forms/radio/RadioGroup.js +0 -50
  158. package/dist/forms/radio/RadioGroupContext.d.ts +0 -12
  159. package/dist/forms/radio/RadioGroupContext.js +0 -3
  160. package/dist/forms/segment/Segment.d.ts +0 -13
  161. package/dist/forms/segment/Segment.js +0 -59
  162. package/dist/forms/segment/segment-control/SegmentControl.d.ts +0 -14
  163. package/dist/forms/segment/segment-control/SegmentControl.js +0 -57
  164. package/dist/forms/select/Select.css +0 -160
  165. package/dist/forms/select/Select.d.ts +0 -26
  166. package/dist/forms/select/Select.js +0 -95
  167. package/dist/forms/select/internal/HiddenInput.d.ts +0 -8
  168. package/dist/forms/select/internal/HiddenInput.js +0 -15
  169. package/dist/forms/select/internal/ListItem.d.ts +0 -18
  170. package/dist/forms/select/internal/ListItem.js +0 -69
  171. package/dist/forms/select/internal/SelectButton.d.ts +0 -12
  172. package/dist/forms/select/internal/SelectButton.js +0 -49
  173. package/dist/forms/select/internal/SelectButtonContent.d.ts +0 -7
  174. package/dist/forms/select/internal/SelectButtonContent.js +0 -31
  175. package/dist/forms/select/internal/SelectCheckbox.d.ts +0 -4
  176. package/dist/forms/select/internal/SelectCheckbox.js +0 -13
  177. package/dist/forms/select/internal/SelectLabel.d.ts +0 -7
  178. package/dist/forms/select/internal/SelectLabel.js +0 -12
  179. package/dist/forms/select/internal/SelectOptionsContainer.d.ts +0 -17
  180. package/dist/forms/select/internal/SelectOptionsContainer.js +0 -103
  181. package/dist/forms/select/internal/SelectScrollContainer.d.ts +0 -8
  182. package/dist/forms/select/internal/SelectScrollContainer.js +0 -15
  183. package/dist/forms/select/internal/SelectWrapper.d.ts +0 -6
  184. package/dist/forms/select/internal/SelectWrapper.js +0 -12
  185. package/dist/forms/select/internal/index.d.ts +0 -6
  186. package/dist/forms/select/internal/index.js +0 -7
  187. package/dist/forms/select/internal/utils.d.ts +0 -7
  188. package/dist/forms/select/internal/utils.js +0 -30
  189. package/dist/forms/select/select-option/SelectOption.d.ts +0 -14
  190. package/dist/forms/select/select-option/SelectOption.js +0 -12
  191. package/dist/forms/select/utils.d.ts +0 -2
  192. package/dist/forms/select/utils.js +0 -12
  193. package/dist/forms/slider/Slider.css +0 -50
  194. package/dist/forms/slider/Slider.d.ts +0 -17
  195. package/dist/forms/slider/Slider.js +0 -93
  196. package/dist/forms/switch/Switch.d.ts +0 -12
  197. package/dist/forms/switch/Switch.js +0 -42
  198. package/dist/forms/text-area/TextArea.css +0 -14
  199. package/dist/forms/text-area/TextArea.d.ts +0 -22
  200. package/dist/forms/text-area/TextArea.js +0 -99
  201. package/dist/forms/text-input/TextInput.d.ts +0 -24
  202. package/dist/forms/text-input/TextInput.js +0 -74
  203. package/dist/forms/time-picker/TimePicker.css +0 -10
  204. package/dist/forms/time-picker/TimePicker.d.ts +0 -24
  205. package/dist/forms/time-picker/TimePicker.js +0 -140
  206. package/dist/forms/time-picker/time-picker-dropdown/TimePickerDropdown.css +0 -4
  207. package/dist/forms/time-picker/time-picker-dropdown/TimePickerDropdown.d.ts +0 -19
  208. package/dist/forms/time-picker/time-picker-dropdown/TimePickerDropdown.js +0 -208
  209. package/dist/forms/time-picker/time-picker-dropdown/TimePickerInput.d.ts +0 -9
  210. package/dist/forms/time-picker/time-picker-dropdown/TimePickerInput.js +0 -14
  211. package/dist/index.d.ts +0 -59
  212. package/dist/index.js +0 -60
  213. package/dist/utils/index.d.ts +0 -1
  214. package/dist/utils/index.js +0 -7
  215. package/dist/utils/setRef.d.ts +0 -1
  216. package/dist/utils/setRef.js +0 -5
  217. package/dist/utils/types.d.ts +0 -36
  218. package/dist/utils/types.js +0 -0
  219. package/dist/utils/useControlled.d.ts +0 -7
  220. package/dist/utils/useControlled.js +0 -20
  221. package/dist/utils/useForkRef.d.ts +0 -2
  222. package/dist/utils/useForkRef.js +0 -15
  223. package/dist/utils/useId.d.ts +0 -1
  224. package/dist/utils/useId.js +0 -20
  225. package/dist/utils/useOnClickOutside.d.ts +0 -2
  226. package/dist/utils/useOnClickOutside.js +0 -20
@@ -1,95 +0,0 @@
1
- import { jsx, jsxs } from "react/jsx-runtime";
2
- import "./Select.css";
3
- import { forwardRef, useRef } from "react";
4
- import react_dom from "react-dom";
5
- import { useControlled } from "../../utils/useControlled.js";
6
- import { useForkRef } from "../../utils/useForkRef.js";
7
- import { SelectButton, SelectLabel, SelectOptionsContainer, SelectWrapper } from "./internal/index.js";
8
- import { HiddenInput } from "./internal/HiddenInput.js";
9
- import { getChildren } from "./internal/utils.js";
10
- function SelectComponent({ defaultValue = '', open, defaultOpen = false, value: controlled, label, options, onChange, required = false, config, disabled, name, id, children, hint, error, onOpenChange, renderLabelContent, ...props }, ref) {
11
- const [value, setValue] = useControlled({
12
- controlled,
13
- default: defaultValue,
14
- onChange
15
- });
16
- const [focused, setFocused] = useControlled({
17
- controlled: open,
18
- default: defaultOpen,
19
- onChange: onOpenChange
20
- });
21
- const buttonEl = useRef(null);
22
- const usedOptions = options ?? getChildren(children).childrenList.map((child)=>child.props.option);
23
- const innerRef = useRef(null);
24
- const combinedRef = useForkRef(ref, innerRef);
25
- const multiple = Array.isArray(value);
26
- const refocusButton = ()=>{
27
- setFocused(false);
28
- buttonEl?.current?.focus();
29
- };
30
- const handleOptionChange = (newOption)=>{
31
- let newValue = newOption.data;
32
- if (Array.isArray(value)) newValue = value.includes(newValue) ? value.filter((item)=>item !== newValue) : [
33
- ...value,
34
- newValue
35
- ];
36
- setValue(newValue);
37
- if (!multiple) refocusButton();
38
- };
39
- const removeChip = (chipLabel)=>{
40
- const chipOption = usedOptions.find((option)=>option.label === chipLabel);
41
- if (chipOption) handleOptionChange(chipOption);
42
- };
43
- const selectedLabel = multiple ? usedOptions.filter((option)=>value.includes(option.data))?.map((option)=>option.label) : usedOptions.find((option)=>option.data === value)?.label;
44
- return /*#__PURE__*/ jsxs(SelectWrapper, {
45
- disabled: disabled,
46
- ref: combinedRef,
47
- ...props,
48
- children: [
49
- /*#__PURE__*/ jsx(HiddenInput, {
50
- onChange: handleOptionChange,
51
- options: usedOptions,
52
- value: value
53
- }),
54
- /*#__PURE__*/ jsx(SelectButton, {
55
- ref: buttonEl,
56
- onToggle: ()=>setFocused((prev)=>!prev),
57
- error: error,
58
- disabled: disabled,
59
- focused: focused,
60
- required: required,
61
- onChipClick: removeChip,
62
- label: selectedLabel,
63
- renderLabelContent: renderLabelContent
64
- }),
65
- /*#__PURE__*/ jsx(SelectLabel, {
66
- hideLabel: config?.hideLabel,
67
- label: label,
68
- id: id
69
- }),
70
- /*#__PURE__*/ jsx("div", {
71
- className: "fwe-select-underline"
72
- }),
73
- hint && !error && /*#__PURE__*/ jsx("div", {
74
- className: "fwe-select-description",
75
- children: hint
76
- }),
77
- error && /*#__PURE__*/ jsx("div", {
78
- className: "fwe-select-invalid",
79
- children: error
80
- }),
81
- focused && /*#__PURE__*/ react_dom.createPortal(/*#__PURE__*/ jsx(SelectOptionsContainer, {
82
- multiple: multiple,
83
- ref: innerRef,
84
- config: config,
85
- onClose: refocusButton,
86
- onOptionChange: handleOptionChange,
87
- options: options,
88
- label: selectedLabel,
89
- children: children
90
- }), document.body)
91
- ]
92
- });
93
- }
94
- const Select = /*#__PURE__*/ forwardRef(SelectComponent);
95
- export { Select };
@@ -1,8 +0,0 @@
1
- import type { SelectOptionType } from '../select-option/SelectOption';
2
- interface HiddenInputProps<T> {
3
- value: any;
4
- onChange: (value: SelectOptionType<T>) => void;
5
- options: SelectOptionType<T>[];
6
- }
7
- export declare function HiddenInput<T>({ value, onChange, options, }: HiddenInputProps<T>): import("react/jsx-runtime").JSX.Element;
8
- export {};
@@ -1,15 +0,0 @@
1
- import { jsx } from "react/jsx-runtime";
2
- function HiddenInput({ value, onChange, options }) {
3
- function handleChange(event) {
4
- const child = options.find(({ data })=>data === event.target.value);
5
- if (void 0 !== child) onChange(child);
6
- }
7
- return /*#__PURE__*/ jsx("input", {
8
- className: "fr-select-input",
9
- "aria-hidden": true,
10
- tabIndex: -1,
11
- value: value,
12
- onChange: handleChange
13
- });
14
- }
15
- export { HiddenInput };
@@ -1,18 +0,0 @@
1
- import React, { type Ref, type RefObject } from 'react';
2
- import type { SelectOptionProps, SelectOptionType } from '../select-option/SelectOption';
3
- export interface ListItemProps<T> extends React.ComponentPropsWithoutRef<'li'> {
4
- empty?: boolean;
5
- item: SelectOptionType<T> | React.ReactElement<SelectOptionProps<T>>;
6
- options: SelectOptionType<T>[];
7
- index: number;
8
- onOptionChange: (option: SelectOptionType<T>) => void;
9
- onFocusChange: (index: number) => void;
10
- onClose: () => void;
11
- selectedLabel?: string | string[];
12
- withCheckbox?: boolean;
13
- }
14
- declare function ListItemComponent<T>({ children, className, empty, options, onClose, onOptionChange, index, selectedLabel, item, withCheckbox, onFocusChange, ...restProps }: ListItemProps<T>, ref: Ref<RefObject<HTMLLIElement>[]>): import("react/jsx-runtime").JSX.Element;
15
- export declare const ListItem: <T>(props: ListItemProps<T> & {
16
- ref?: Ref<RefObject<HTMLLIElement>[]>;
17
- }) => ReturnType<typeof ListItemComponent>;
18
- export {};
@@ -1,69 +0,0 @@
1
- import { jsx } from "react/jsx-runtime";
2
- import classnames from "classnames";
3
- import react, { forwardRef } from "react";
4
- import { SelectCheckbox } from "./SelectCheckbox.js";
5
- function ListItemComponent({ children, className, empty, options, onClose, onOptionChange, index, selectedLabel, item, withCheckbox, onFocusChange, ...restProps }, ref) {
6
- const isChild = /*#__PURE__*/ react.isValidElement(item);
7
- const option = isChild ? item.props.option : item;
8
- const propsWithoutOption = isChild ? {
9
- ...item.props,
10
- option: void 0
11
- } : {};
12
- const checked = Array.isArray(selectedLabel) ? selectedLabel.includes(option.label) : selectedLabel === option.label;
13
- function handleKeyDown(e) {
14
- const arrowKeys = [
15
- 'ArrowDown',
16
- 'ArrowUp'
17
- ];
18
- const validKeys = [
19
- 'Enter',
20
- ' '
21
- ];
22
- if (arrowKeys.concat(validKeys).includes(e.key)) e.preventDefault();
23
- if ('ArrowDown' === e.key) onFocusChange((index + 1) % options.length);
24
- if ('ArrowUp' === e.key) {
25
- const nextIndex = (index - 1 + options.length) % options.length;
26
- onFocusChange(nextIndex);
27
- }
28
- if ([
29
- 'Enter',
30
- ' '
31
- ].includes(e.key)) {
32
- if (option.disabled) return;
33
- onOptionChange(option);
34
- }
35
- if ('Escape' === e.key) onClose();
36
- }
37
- function handleClick() {
38
- if (option.disabled) return;
39
- onOptionChange(option);
40
- }
41
- const itemRef = 'function' != typeof ref ? ref?.current?.[index] : void 0;
42
- return /*#__PURE__*/ jsx("li", {
43
- onClick: handleClick,
44
- ref: itemRef,
45
- role: "option",
46
- onKeyDown: handleKeyDown,
47
- "aria-selected": checked,
48
- className: classnames('fwe-select-option', {
49
- 'fwe-empty': !option.label
50
- }, className),
51
- tabIndex: 0,
52
- ...restProps,
53
- children: /*#__PURE__*/ jsx(SelectCheckbox, {
54
- disabled: option.disabled,
55
- onClick: (e)=>e.stopPropagation(),
56
- checked: checked,
57
- withCheckbox: withCheckbox,
58
- children: isChild ? /*#__PURE__*/ jsx("span", {
59
- ...propsWithoutOption
60
- }) : /*#__PURE__*/ jsx("span", {
61
- className: "fwe-select-option-content",
62
- "data-testid": "fwe-select-option-content",
63
- children: option.label
64
- })
65
- })
66
- });
67
- }
68
- const ListItem = /*#__PURE__*/ forwardRef(ListItemComponent);
69
- export { ListItem };
@@ -1,12 +0,0 @@
1
- interface SelectButtonProps {
2
- onToggle: () => void;
3
- focused?: boolean;
4
- required: boolean;
5
- error?: string;
6
- disabled?: boolean;
7
- onChipClick: (label: string) => void;
8
- label?: string | string[];
9
- renderLabelContent?: (label?: string | string[]) => JSX.Element;
10
- }
11
- export declare const SelectButton: (props: SelectButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null;
12
- export {};
@@ -1,49 +0,0 @@
1
- import { jsx } from "react/jsx-runtime";
2
- import classnames from "classnames";
3
- import { forwardRef } from "react";
4
- import { SelectButtonContent } from "./SelectButtonContent.js";
5
- const SelectButton = /*#__PURE__*/ forwardRef(({ onToggle, disabled, label, focused, required, error, onChipClick, renderLabelContent }, ref)=>{
6
- const empty = void 0 === label && !focused;
7
- function handleKeyDown(e) {
8
- if (disabled) return;
9
- const validKeys = [
10
- 'Enter',
11
- ' ',
12
- 'ArrowUp',
13
- 'ArrowDown'
14
- ];
15
- if (validKeys.includes(e.key)) {
16
- e.preventDefault();
17
- onToggle();
18
- }
19
- }
20
- function handleClick(e) {
21
- if (disabled) return;
22
- e.stopPropagation();
23
- onToggle();
24
- }
25
- return /*#__PURE__*/ jsx("button", {
26
- type: "button",
27
- tabIndex: 0,
28
- className: classnames('fwe-select', {
29
- 'fwe-focus': focused,
30
- 'fwe-empty': empty,
31
- 'fwe-required': required,
32
- 'fwe-disabled': disabled,
33
- 'fwe-invalid': error
34
- }),
35
- onClick: handleClick,
36
- ref: ref,
37
- onKeyDown: handleKeyDown,
38
- disabled: disabled,
39
- children: /*#__PURE__*/ jsx("div", {
40
- className: "fwe-select-content",
41
- children: /*#__PURE__*/ jsx(SelectButtonContent, {
42
- onClick: onChipClick,
43
- label: label,
44
- renderLabelContent: renderLabelContent
45
- })
46
- })
47
- });
48
- });
49
- export { SelectButton };
@@ -1,7 +0,0 @@
1
- interface SelectButtonContentProps {
2
- label?: string | string[];
3
- renderLabelContent?: (label?: string | string[]) => JSX.Element;
4
- onClick: (label: string) => void;
5
- }
6
- export declare function SelectButtonContent({ label, renderLabelContent, onClick, }: SelectButtonContentProps): import("react/jsx-runtime").JSX.Element;
7
- export {};
@@ -1,31 +0,0 @@
1
- import { Fragment, jsx, jsxs } from "react/jsx-runtime";
2
- import { IconCloseSmall } from "@festo-ui/react-icons";
3
- function SelectButtonContent({ label, renderLabelContent, onClick }) {
4
- const handleChipClick = (chipLabel)=>(e)=>{
5
- e.stopPropagation();
6
- onClick(chipLabel);
7
- };
8
- if (renderLabelContent) return renderLabelContent(label);
9
- if (Array.isArray(label)) return /*#__PURE__*/ jsx("div", {
10
- className: "fwe-chip-container",
11
- children: label.map((v)=>/*#__PURE__*/ jsxs("div", {
12
- className: "fwe-chip chip-text-truncate fwe-pr-4",
13
- title: v,
14
- children: [
15
- v,
16
- /*#__PURE__*/ jsx("button", {
17
- type: "button",
18
- className: "chip-removable",
19
- onClick: handleChipClick(v),
20
- children: /*#__PURE__*/ jsx(IconCloseSmall, {
21
- size: 16
22
- })
23
- })
24
- ]
25
- }, v))
26
- });
27
- return /*#__PURE__*/ jsx(Fragment, {
28
- children: label
29
- });
30
- }
31
- export { SelectButtonContent };
@@ -1,4 +0,0 @@
1
- import { type CheckboxProps } from '../../checkbox/Checkbox';
2
- export declare function SelectCheckbox({ children, withCheckbox, ...props }: CheckboxProps & {
3
- withCheckbox?: boolean;
4
- }): import("react/jsx-runtime").JSX.Element;
@@ -1,13 +0,0 @@
1
- import { Fragment, jsx } from "react/jsx-runtime";
2
- import { Checkbox } from "../../checkbox/Checkbox.js";
3
- function SelectCheckbox({ children, withCheckbox, ...props }) {
4
- if (withCheckbox) return /*#__PURE__*/ jsx(Checkbox, {
5
- tabIndex: -1,
6
- ...props,
7
- children: children
8
- });
9
- return /*#__PURE__*/ jsx(Fragment, {
10
- children: children
11
- });
12
- }
13
- export { SelectCheckbox };
@@ -1,7 +0,0 @@
1
- interface SelectLabelProps {
2
- hideLabel?: boolean;
3
- label?: string;
4
- id?: string;
5
- }
6
- export declare function SelectLabel({ hideLabel, label, id }: SelectLabelProps): import("react/jsx-runtime").JSX.Element;
7
- export {};
@@ -1,12 +0,0 @@
1
- import { jsx } from "react/jsx-runtime";
2
- import classnames from "classnames";
3
- function SelectLabel({ hideLabel, label, id }) {
4
- return /*#__PURE__*/ jsx("label", {
5
- className: classnames('fwe-select-label', {
6
- 'fwe-sr-only': hideLabel
7
- }),
8
- htmlFor: id,
9
- children: label || ''
10
- });
11
- }
12
- export { SelectLabel };
@@ -1,17 +0,0 @@
1
- import { type Key, type Ref } from 'react';
2
- import type { SelectConfiguration } from '../../../utils/types';
3
- import type { SelectOptionType } from '../select-option/SelectOption';
4
- interface SelectOptionsContainerProps<T> {
5
- options?: SelectOptionType<T>[];
6
- config?: SelectConfiguration;
7
- onClose: () => void;
8
- label?: string | string[];
9
- onOptionChange: (option: SelectOptionType<T>) => void;
10
- multiple?: boolean;
11
- children: React.ReactNode;
12
- }
13
- declare function SelectOptionsContainerComponent<T extends Key | null | undefined>({ options, config, onClose, label, onOptionChange, multiple, children, }: SelectOptionsContainerProps<T>, ref: Ref<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
14
- export declare const SelectOptionsContainer: <T>(props: SelectOptionsContainerProps<T> & {
15
- ref?: Ref<HTMLDivElement>;
16
- }) => ReturnType<typeof SelectOptionsContainerComponent>;
17
- export {};
@@ -1,103 +0,0 @@
1
- import { Fragment, jsx, jsxs } from "react/jsx-runtime";
2
- import { createRef, forwardRef, isValidElement, useEffect, useRef, useState } from "react";
3
- import { usePopper } from "react-popper";
4
- import { ListItem } from "./ListItem.js";
5
- import { SelectScrollContainer } from "./SelectScrollContainer.js";
6
- import { getChildren } from "./utils.js";
7
- function SelectOptionsContainerComponent({ options, config, onClose, label, onOptionChange, multiple, children }, ref) {
8
- const [popperElement, setPopperElement] = useState(null);
9
- const refObject = 'function' != typeof ref ? ref?.current : null;
10
- const { styles, attributes } = usePopper(refObject, popperElement, {
11
- placement: 'bottom-start',
12
- modifiers: [
13
- {
14
- name: 'offset',
15
- options: {
16
- offset: [
17
- 0,
18
- 3
19
- ]
20
- }
21
- },
22
- {
23
- name: 'flip',
24
- options: {
25
- fallbackPlacements: [
26
- 'bottom-start',
27
- 'top-start'
28
- ]
29
- }
30
- }
31
- ]
32
- });
33
- function getCssProperies() {
34
- if (config?.contentWidth) return {
35
- ...styles.popper,
36
- minWidth: `${refObject?.clientWidth}px`,
37
- width: config?.contentWidth
38
- };
39
- return {
40
- ...styles.popper,
41
- minWidth: `${refObject?.clientWidth}px`
42
- };
43
- }
44
- const allChildren = getChildren(children);
45
- const childrenList = allChildren.childrenList;
46
- const usedOptions = options ?? childrenList.map((child)=>child.props.option);
47
- const { length } = usedOptions;
48
- const listItemRef = useRef(Array.from({
49
- length
50
- }, ()=>/*#__PURE__*/ createRef()));
51
- const selectedIndex = Array.isArray(label) ? usedOptions.findIndex((option)=>option.label === label.at(-1)) : usedOptions.findIndex((option)=>option.label === label);
52
- const [init, setInit] = useState(false);
53
- useEffect(()=>{
54
- if (!init) requestAnimationFrame(()=>{
55
- setInit(true);
56
- const index = -1 === selectedIndex ? 0 : selectedIndex;
57
- listItemRef.current?.[index].current?.focus();
58
- });
59
- }, [
60
- selectedIndex,
61
- init
62
- ]);
63
- return /*#__PURE__*/ jsxs(Fragment, {
64
- children: [
65
- /*#__PURE__*/ jsx("div", {
66
- "aria-hidden": true,
67
- className: "fr-backdrop",
68
- onClick: onClose
69
- }),
70
- /*#__PURE__*/ jsxs("ul", {
71
- ref: setPopperElement,
72
- style: getCssProperies(),
73
- ...attributes.popper,
74
- className: "fwe-select-options-container",
75
- role: "listbox",
76
- children: [
77
- allChildren.before,
78
- /*#__PURE__*/ jsx(SelectScrollContainer, {
79
- length: length,
80
- config: config,
81
- children: [
82
- ...options || [],
83
- ...childrenList
84
- ].map((item, i)=>/*#__PURE__*/ jsx(ListItem, {
85
- withCheckbox: multiple,
86
- item: item,
87
- selectedLabel: label,
88
- onClose: onClose,
89
- onFocusChange: (index)=>listItemRef.current[index].current?.focus(),
90
- onOptionChange: onOptionChange,
91
- ref: listItemRef,
92
- index: i,
93
- options: usedOptions
94
- }, /*#__PURE__*/ (isValidElement(item) ? item.props.option : item).data))
95
- }),
96
- allChildren.after
97
- ]
98
- })
99
- ]
100
- });
101
- }
102
- const SelectOptionsContainer = /*#__PURE__*/ forwardRef(SelectOptionsContainerComponent);
103
- export { SelectOptionsContainer };
@@ -1,8 +0,0 @@
1
- import type { SelectConfiguration } from '../../../utils/types';
2
- interface SelectScrollContainerProps {
3
- readonly config?: SelectConfiguration;
4
- readonly children: React.ReactNode;
5
- readonly length: number;
6
- }
7
- export declare function SelectScrollContainer({ config, children, length, }: SelectScrollContainerProps): import("react/jsx-runtime").JSX.Element;
8
- export {};
@@ -1,15 +0,0 @@
1
- import { Fragment, jsx } from "react/jsx-runtime";
2
- import { calcVirtualScrollHeight } from "../utils.js";
3
- function SelectScrollContainer({ config, children, length }) {
4
- if (config?.scroll?.enabled) return /*#__PURE__*/ jsx("div", {
5
- className: "fr-select-scroll",
6
- style: {
7
- height: calcVirtualScrollHeight(config, length)
8
- },
9
- children: children
10
- });
11
- return /*#__PURE__*/ jsx(Fragment, {
12
- children: children
13
- });
14
- }
15
- export { SelectScrollContainer };
@@ -1,6 +0,0 @@
1
- import { type ComponentPropsWithoutRef } from 'react';
2
- interface SelectWrapperProps extends ComponentPropsWithoutRef<'div'> {
3
- disabled?: boolean;
4
- }
5
- export declare const SelectWrapper: (props: SelectWrapperProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;
6
- export {};
@@ -1,12 +0,0 @@
1
- import { jsx } from "react/jsx-runtime";
2
- import classnames from "classnames";
3
- import { forwardRef } from "react";
4
- const SelectWrapper = /*#__PURE__*/ forwardRef(({ children, disabled, className, ...props }, ref)=>/*#__PURE__*/ jsx("div", {
5
- ...props,
6
- ref: ref,
7
- className: classnames('fwe-select-wrapper', {
8
- 'fwe-disabled': disabled
9
- }, className),
10
- children: children
11
- }));
12
- export { SelectWrapper };
@@ -1,6 +0,0 @@
1
- export { HiddenInput } from './HiddenInput';
2
- export { ListItem } from './ListItem';
3
- export { SelectButton } from './SelectButton';
4
- export { SelectLabel } from './SelectLabel';
5
- export { SelectOptionsContainer } from './SelectOptionsContainer';
6
- export { SelectWrapper } from './SelectWrapper';
@@ -1,7 +0,0 @@
1
- import { HiddenInput } from "./HiddenInput.js";
2
- import { ListItem } from "./ListItem.js";
3
- import { SelectButton } from "./SelectButton.js";
4
- import { SelectLabel } from "./SelectLabel.js";
5
- import { SelectOptionsContainer } from "./SelectOptionsContainer.js";
6
- import { SelectWrapper } from "./SelectWrapper.js";
7
- export { HiddenInput, ListItem, SelectButton, SelectLabel, SelectOptionsContainer, SelectWrapper };
@@ -1,7 +0,0 @@
1
- import React from 'react';
2
- import type { SelectOptionProps } from '../select-option/SelectOption';
3
- export declare function getChildren<T>(children: React.ReactNode): {
4
- childrenList: React.ReactElement<SelectOptionProps<T>, string | React.JSXElementConstructor<any>>[];
5
- after: React.ReactElement<any, string | React.JSXElementConstructor<any>>[];
6
- before: React.ReactElement<any, string | React.JSXElementConstructor<any>>[];
7
- };
@@ -1,30 +0,0 @@
1
- import classnames from "classnames";
2
- import react from "react";
3
- import { SelectOption } from "../select-option/SelectOption.js";
4
- function getChildren(children) {
5
- const before = [];
6
- const childrenList = [];
7
- const after = [];
8
- let foundFirstOption = false;
9
- react.Children.forEach(children, (element)=>{
10
- if (react.isValidElement(element)) if (react.isValidElement(element) && element.type === SelectOption) {
11
- foundFirstOption = true;
12
- const className = classnames('fwe-select-option-content', element.props.className);
13
- const { props } = element;
14
- childrenList.push({
15
- ...element,
16
- props: {
17
- ...props,
18
- className
19
- }
20
- });
21
- } else if (foundFirstOption) after.push(element);
22
- else before.push(element);
23
- });
24
- return {
25
- childrenList,
26
- after,
27
- before
28
- };
29
- }
30
- export { getChildren };
@@ -1,14 +0,0 @@
1
- import { type ComponentPropsWithoutRef, type Ref } from 'react';
2
- export interface SelectOptionType<T> {
3
- readonly label: string;
4
- readonly data: T;
5
- readonly disabled?: boolean;
6
- }
7
- export interface SelectOptionProps<T> extends ComponentPropsWithoutRef<'span'> {
8
- option: SelectOptionType<T>;
9
- }
10
- declare function SelectOptionComponent<T>({ children, className, ...props }: SelectOptionProps<T>, ref: Ref<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
11
- export declare const SelectOption: <T>(props: SelectOptionProps<T> & {
12
- ref?: Ref<HTMLDivElement>;
13
- }) => ReturnType<typeof SelectOptionComponent>;
14
- export {};
@@ -1,12 +0,0 @@
1
- import { jsx } from "react/jsx-runtime";
2
- import { forwardRef } from "react";
3
- function SelectOptionComponent({ children, className, ...props }, ref) {
4
- return /*#__PURE__*/ jsx("span", {
5
- ref: ref,
6
- className: className,
7
- ...props,
8
- children: children
9
- });
10
- }
11
- const SelectOption = /*#__PURE__*/ forwardRef(SelectOptionComponent);
12
- export { SelectOption };
@@ -1,2 +0,0 @@
1
- import type { SelectConfiguration } from '../../utils/types';
2
- export declare function calcVirtualScrollHeight(config: SelectConfiguration | undefined, itemLength: number): number;
@@ -1,12 +0,0 @@
1
- function calcVirtualScrollHeight(config, itemLength) {
2
- const defaultHeight = 48;
3
- let height = defaultHeight;
4
- if (2 === itemLength) height = 2 * defaultHeight;
5
- else if (itemLength >= 3) height = 3 * defaultHeight;
6
- if (config?.scroll?.viewportSize != null && void 0 !== config.scroll.viewportSize) {
7
- if (itemLength >= config.scroll.viewportSize) height = config.scroll.viewportSize * defaultHeight;
8
- else if (itemLength < config.scroll.viewportSize) height = itemLength * defaultHeight;
9
- }
10
- return height;
11
- }
12
- export { calcVirtualScrollHeight };