@festo-ui/react 8.2.0-dev.579 → 8.2.0-dev.584
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.
- package/index.css +1 -1
- package/index.d.ts +63 -63
- package/lib/components/accordion/Accordion.d.ts +3 -3
- package/lib/components/accordion/Accordion.js +6 -6
- package/lib/components/accordion/AccordionContext.js +1 -1
- package/lib/components/accordion/accordion-header/AccordionHeader.d.ts +1 -1
- package/lib/components/accordion/accordion-header/AccordionHeader.js +3 -3
- package/lib/components/accordion/accordion-item/AccordionItem.d.ts +3 -3
- package/lib/components/accordion/accordion-item/AccordionItem.js +6 -6
- package/lib/components/accordion/accordion-item/AccordionItemContext.js +1 -1
- package/lib/components/accordion/accordion-item/accordion-item-body/AccordionItemBody.d.ts +1 -1
- package/lib/components/accordion/accordion-item/accordion-item-body/AccordionItemBody.js +7 -7
- package/lib/components/accordion/accordion-item/accordion-item-header/AccordionItemHeader.d.ts +1 -1
- package/lib/components/accordion/accordion-item/accordion-item-header/AccordionItemHeader.js +5 -5
- package/lib/components/bottom-sheet/BottomSheet.d.ts +1 -1
- package/lib/components/bottom-sheet/BottomSheet.js +11 -11
- package/lib/components/bottom-sheet/BottomSheet.stories.d.ts +2 -2
- package/lib/components/bottom-sheet/BottomSheet.stories.js +3 -3
- package/lib/components/breadcrumb/Breadcrumb.d.ts +2 -2
- package/lib/components/breadcrumb/Breadcrumb.js +4 -4
- package/lib/components/buttons/button/Button.d.ts +2 -2
- package/lib/components/buttons/button/Button.js +10 -10
- package/lib/components/buttons/button/Button.stories.d.ts +2 -2
- package/lib/components/buttons/button/Button.stories.js +10 -10
- package/lib/components/card/Card.d.ts +1 -1
- package/lib/components/card/Card.js +2 -2
- package/lib/components/card/CardBody.d.ts +1 -1
- package/lib/components/card/CardBody.js +2 -2
- package/lib/components/card/CardHeader.d.ts +1 -1
- package/lib/components/card/CardHeader.js +3 -3
- package/lib/components/card/CardHeader.stories.helper.d.ts +1 -1
- package/lib/components/card/CardHeader.stories.helper.js +2 -2
- package/lib/components/card/CardNotification.d.ts +1 -1
- package/lib/components/chips/chip/Chip.d.ts +1 -1
- package/lib/components/chips/chip/Chip.js +8 -8
- package/lib/components/chips/chip-container/ChipContainer.d.ts +1 -1
- package/lib/components/chips/chip-container/ChipContainer.js +3 -3
- package/lib/components/icon-wrapper/IconWrapper.js +2 -2
- package/lib/components/link-button/LinkButton.d.ts +2 -2
- package/lib/components/link-button/LinkButton.js +5 -5
- package/lib/components/loading-indicator/LoadingIndicator.d.ts +4 -4
- package/lib/components/loading-indicator/LoadingIndicator.js +8 -8
- package/lib/components/mobile-flyout/MobileFlyout.d.ts +2 -2
- package/lib/components/mobile-flyout/MobileFlyout.js +7 -7
- package/lib/components/mobile-flyout/MobileFlyoutContext.js +1 -1
- package/lib/components/mobile-flyout/mobile-flyout-page/MobileFlyoutPage.d.ts +2 -2
- package/lib/components/mobile-flyout/mobile-flyout-page/MobileFlyoutPage.js +5 -5
- package/lib/components/modals/AlertModal.d.ts +3 -3
- package/lib/components/modals/AlertModal.js +10 -10
- package/lib/components/modals/ConfirmModal.d.ts +2 -2
- package/lib/components/modals/ConfirmModal.js +3 -3
- package/lib/components/modals/CustomModal.d.ts +1 -1
- package/lib/components/modals/CustomModal.js +3 -3
- package/lib/components/modals/Modal.d.ts +4 -4
- package/lib/components/modals/Modal.js +1 -1
- package/lib/components/modals/ModalBase.d.ts +2 -2
- package/lib/components/modals/ModalBase.js +9 -9
- package/lib/components/modals/ModalFooter.d.ts +1 -1
- package/lib/components/modals/ModalFooter.js +4 -4
- package/lib/components/modals/Prompt.d.ts +3 -3
- package/lib/components/modals/Prompt.js +1 -1
- package/lib/components/modals/image-gallery/ImageGallery.d.ts +5 -5
- package/lib/components/modals/image-gallery/ImageGallery.helper.d.ts +1 -1
- package/lib/components/modals/image-gallery/ImageGallery.helper.js +2 -2
- package/lib/components/modals/image-gallery/ImageGallery.js +3 -3
- package/lib/components/modals/image-gallery/ImageGallery.stories.helper.d.ts +1 -1
- package/lib/components/modals/image-gallery/ImageGallery.stories.helper.js +29 -29
- package/lib/components/modals/image-gallery/ImageGalleryContext.d.ts +1 -1
- package/lib/components/modals/image-gallery/ImageGalleryContext.js +1 -1
- package/lib/components/modals/image-gallery/ImageGallerySwiper.js +6 -6
- package/lib/components/modals/image-gallery/ImageGalleryThumbsSwiper.js +3 -3
- package/lib/components/modals/image-gallery/image-gallery-item/ImageGalleryItem.d.ts +2 -2
- package/lib/components/modals/image-gallery/image-gallery-item/ImageGalleryItem.js +8 -8
- package/lib/components/modals/image-gallery/internal/BaseGallery.d.ts +4 -4
- package/lib/components/modals/image-gallery/internal/BaseGallery.js +1 -1
- package/lib/components/modals/image-gallery/internal/CloseButton.js +4 -4
- package/lib/components/modals/image-gallery/internal/ScaleButton.js +1 -1
- package/lib/components/pagination/Pagination.d.ts +2 -2
- package/lib/components/pagination/Pagination.js +14 -14
- package/lib/components/popovers/legend/Legend.d.ts +3 -3
- package/lib/components/popovers/popover/Popover.d.ts +4 -4
- package/lib/components/popovers/popover/Popover.js +11 -11
- package/lib/components/popovers/popover-menu/PopoverMenu.d.ts +3 -3
- package/lib/components/popovers/popover-menu/PopoverMenu.js +3 -3
- package/lib/components/popovers/tooltip/Tooltip.d.ts +1 -1
- package/lib/components/progress/Progress.d.ts +2 -2
- package/lib/components/progress/Progress.js +7 -7
- package/lib/components/scroll-area/ScrollArea.d.ts +1 -1
- package/lib/components/scroll-area/ScrollArea.js +1 -1
- package/lib/components/search-input/ClearButton.d.ts +2 -2
- package/lib/components/search-input/SearchInput.d.ts +2 -2
- package/lib/components/search-input/SearchInput.js +2 -2
- package/lib/components/search-input/useSearchInput.d.ts +2 -2
- package/lib/components/search-input/useSearchInput.js +7 -7
- package/lib/components/snackbar/Snackbar.d.ts +4 -4
- package/lib/components/snackbar/Snackbar.js +11 -11
- package/lib/components/snackbar/SnackbarContext.d.ts +2 -2
- package/lib/components/snackbar/SnackbarContext.js +1 -1
- package/lib/components/snackbar/SnackbarProvider.d.ts +2 -2
- package/lib/components/snackbar/SnackbarProvider.js +3 -3
- package/lib/components/snackbar/useSnackbar.d.ts +1 -1
- package/lib/components/snackbar/useSnackbar.js +1 -1
- package/lib/components/stepper-horizontal/StepperHorizontal.d.ts +2 -2
- package/lib/components/stepper-horizontal/StepperHorizontal.js +7 -7
- package/lib/components/stepper-horizontal/step-horizontal/StepHorizontal.d.ts +3 -3
- package/lib/components/stepper-horizontal/step-horizontal/StepHorizontal.js +3 -3
- package/lib/components/stepper-vertical/StepperVertical.d.ts +2 -2
- package/lib/components/stepper-vertical/StepperVertical.js +3 -3
- package/lib/components/stepper-vertical/step-vertical/StepVertical.d.ts +3 -3
- package/lib/components/stepper-vertical/step-vertical/StepVertical.js +9 -9
- package/lib/components/tab/Tabs.d.ts +5 -5
- package/lib/components/tab/Tabs.js +24 -24
- package/lib/components/tab/tab-pane/TabPane.d.ts +3 -3
- package/lib/components/tab/tab-pane/TabPane.js +3 -3
- package/lib/components/tab/useTabScroll.d.ts +1 -1
- package/lib/components/tab/useTabScroll.js +11 -11
- package/lib/components/table-header-cell/TableHeaderCell.js +6 -6
- package/lib/forms/checkbox/Checkbox.d.ts +4 -4
- package/lib/forms/checkbox/Checkbox.js +11 -11
- package/lib/forms/color-indicator/ColorIndicator.d.ts +2 -2
- package/lib/forms/color-indicator/ColorIndicator.js +6 -6
- package/lib/forms/color-picker/ColorHelper.d.ts +4 -4
- package/lib/forms/radio/RadioButton.d.ts +2 -2
- package/lib/forms/radio/RadioButton.js +8 -8
- package/lib/forms/radio/RadioGroup.d.ts +3 -3
- package/lib/forms/radio/RadioGroup.js +3 -3
- package/lib/forms/radio/RadioGroupContext.d.ts +1 -1
- package/lib/forms/radio/RadioGroupContext.js +1 -1
- package/lib/forms/segment/Segment.d.ts +2 -2
- package/lib/forms/segment/Segment.js +7 -7
- package/lib/forms/segment/segment-control/SegmentControl.d.ts +2 -2
- package/lib/forms/segment/segment-control/SegmentControl.js +8 -8
- package/lib/forms/select/Select.d.ts +5 -5
- package/lib/forms/select/Select.js +3 -3
- package/lib/forms/select/internal/HiddenInput.d.ts +1 -1
- package/lib/forms/select/internal/ListItem.d.ts +3 -3
- package/lib/forms/select/internal/ListItem.js +11 -11
- package/lib/forms/select/internal/SelectButton.js +9 -9
- package/lib/forms/select/internal/SelectCheckbox.d.ts +1 -1
- package/lib/forms/select/internal/SelectLabel.js +4 -4
- package/lib/forms/select/internal/SelectScrollContainer.d.ts +1 -1
- package/lib/forms/select/internal/SelectWrapper.d.ts +2 -2
- package/lib/forms/select/internal/SelectWrapper.js +4 -4
- package/lib/forms/select/internal/index.d.ts +6 -6
- package/lib/forms/select/internal/utils.d.ts +2 -2
- package/lib/forms/select/internal/utils.js +3 -3
- package/lib/forms/select/select-option/SelectOption.d.ts +2 -2
- package/lib/forms/select/select-option/SelectOption.js +1 -1
- package/lib/forms/select/utils.d.ts +1 -1
- package/lib/forms/slider/Slider.d.ts +3 -3
- package/lib/forms/slider/Slider.js +9 -9
- package/lib/forms/switch/Switch.d.ts +2 -2
- package/lib/forms/switch/Switch.js +4 -4
- package/lib/forms/text-area/TextArea.d.ts +3 -3
- package/lib/forms/text-area/TextArea.js +12 -12
- package/lib/forms/text-editor/TextEditor.d.ts +1 -1
- package/lib/forms/text-editor/TextEditor.js +42 -38
- package/lib/forms/text-editor/TextEditorButton.d.ts +3 -2
- package/lib/forms/text-editor/TextEditorButton.js +13 -13
- package/lib/forms/text-input/TextInput.d.ts +1 -1
- package/lib/forms/text-input/TextInput.js +6 -6
- package/lib/forms/time-picker/time-picker-dropdown/TimePickerInput.d.ts +1 -1
- package/lib/forms/time-picker/time-picker-dropdown/TimePickerInput.js +2 -2
- package/lib/helper/index.js +2 -2
- package/lib/helper/setRef.js +1 -1
- package/lib/helper/types.d.ts +2 -2
- package/lib/helper/useControlled.d.ts +1 -1
- package/lib/helper/useControlled.js +2 -2
- package/lib/helper/useForkRef.d.ts +1 -1
- package/lib/helper/useForkRef.js +1 -1
- package/lib/helper/useId.js +2 -2
- package/lib/helper/useOnClickOutside.d.ts +1 -1
- package/lib/helper/useOnClickOutside.js +5 -5
- package/node/lib/components/accordion/Accordion.js +4 -4
- package/node/lib/components/accordion/accordion-header/AccordionHeader.js +1 -1
- package/node/lib/components/accordion/accordion-item/AccordionItem.js +4 -4
- package/node/lib/components/accordion/accordion-item/accordion-item-body/AccordionItemBody.js +4 -4
- package/node/lib/components/accordion/accordion-item/accordion-item-header/AccordionItemHeader.js +3 -3
- package/node/lib/components/bottom-sheet/BottomSheet.js +9 -9
- package/node/lib/components/bottom-sheet/BottomSheet.stories.js +2 -2
- package/node/lib/components/breadcrumb/Breadcrumb.js +2 -2
- package/node/lib/components/buttons/button/Button.js +8 -8
- package/node/lib/components/buttons/button/Button.stories.js +9 -9
- package/node/lib/components/card/Card.js +1 -1
- package/node/lib/components/card/CardBody.js +1 -1
- package/node/lib/components/card/CardHeader.js +2 -2
- package/node/lib/components/card/CardHeader.stories.helper.js +2 -2
- package/node/lib/components/chips/chip/Chip.js +7 -7
- package/node/lib/components/chips/chip-container/ChipContainer.js +2 -2
- package/node/lib/components/icon-wrapper/IconWrapper.js +2 -2
- package/node/lib/components/link-button/LinkButton.js +3 -3
- package/node/lib/components/loading-indicator/LoadingIndicator.js +6 -6
- package/node/lib/components/mobile-flyout/MobileFlyout.js +5 -5
- package/node/lib/components/mobile-flyout/mobile-flyout-page/MobileFlyoutPage.js +3 -3
- package/node/lib/components/modals/AlertModal.js +9 -9
- package/node/lib/components/modals/ConfirmModal.js +2 -2
- package/node/lib/components/modals/CustomModal.js +1 -1
- package/node/lib/components/modals/ModalBase.js +4 -4
- package/node/lib/components/modals/ModalFooter.js +2 -2
- package/node/lib/components/modals/image-gallery/ImageGallery.helper.js +1 -1
- package/node/lib/components/modals/image-gallery/ImageGallery.js +2 -2
- package/node/lib/components/modals/image-gallery/ImageGallery.stories.helper.js +29 -29
- package/node/lib/components/modals/image-gallery/ImageGallerySwiper.js +3 -3
- package/node/lib/components/modals/image-gallery/image-gallery-item/ImageGalleryItem.js +5 -5
- package/node/lib/components/modals/image-gallery/internal/CloseButton.js +3 -3
- package/node/lib/components/pagination/Pagination.js +12 -12
- package/node/lib/components/popovers/popover/Popover.js +8 -8
- package/node/lib/components/popovers/popover-menu/PopoverMenu.js +1 -1
- package/node/lib/components/progress/Progress.js +6 -6
- package/node/lib/components/search-input/SearchInput.js +1 -1
- package/node/lib/components/search-input/useSearchInput.js +6 -6
- package/node/lib/components/snackbar/Snackbar.js +8 -8
- package/node/lib/components/snackbar/SnackbarProvider.js +1 -1
- package/node/lib/components/stepper-horizontal/StepperHorizontal.js +5 -5
- package/node/lib/components/stepper-horizontal/step-horizontal/StepHorizontal.js +1 -1
- package/node/lib/components/stepper-vertical/StepperVertical.js +1 -1
- package/node/lib/components/stepper-vertical/step-vertical/StepVertical.js +7 -7
- package/node/lib/components/tab/Tabs.js +22 -22
- package/node/lib/components/tab/tab-pane/TabPane.js +2 -2
- package/node/lib/components/tab/useTabScroll.js +10 -10
- package/node/lib/components/table-header-cell/TableHeaderCell.js +4 -4
- package/node/lib/forms/checkbox/Checkbox.js +9 -9
- package/node/lib/forms/color-indicator/ColorIndicator.js +4 -4
- package/node/lib/forms/radio/RadioButton.js +6 -6
- package/node/lib/forms/radio/RadioGroup.js +1 -1
- package/node/lib/forms/segment/Segment.js +5 -5
- package/node/lib/forms/segment/segment-control/SegmentControl.js +6 -6
- package/node/lib/forms/select/Select.js +1 -1
- package/node/lib/forms/select/internal/ListItem.js +9 -9
- package/node/lib/forms/select/internal/SelectButton.js +7 -7
- package/node/lib/forms/select/internal/SelectLabel.js +3 -3
- package/node/lib/forms/select/internal/SelectWrapper.js +2 -2
- package/node/lib/forms/select/internal/utils.js +1 -1
- package/node/lib/forms/slider/Slider.js +7 -7
- package/node/lib/forms/switch/Switch.js +3 -3
- package/node/lib/forms/text-area/TextArea.js +10 -10
- package/node/lib/forms/text-editor/TextEditor.js +39 -35
- package/node/lib/forms/text-editor/TextEditorButton.js +11 -11
- package/node/lib/forms/text-input/TextInput.js +4 -4
- package/node/lib/forms/time-picker/time-picker-dropdown/TimePickerInput.js +1 -1
- package/node/lib/helper/index.js +2 -2
- package/node/lib/helper/setRef.js +1 -1
- package/node/lib/helper/useControlled.js +1 -1
- package/node/lib/helper/useId.js +1 -1
- package/node/lib/helper/useOnClickOutside.js +4 -4
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { SelectConfiguration } from
|
|
1
|
+
import { SelectConfiguration } from "../../helper/types";
|
|
2
2
|
export default function calcVirtualScrollHeight(config: SelectConfiguration | undefined, itemLength: number): number;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import React from
|
|
2
|
-
import { ClassNameProps } from
|
|
3
|
-
import
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { ClassNameProps } from "../../helper/types";
|
|
3
|
+
import "./Slider.scss";
|
|
4
4
|
interface SliderProps extends ClassNameProps {
|
|
5
5
|
disabled?: boolean;
|
|
6
6
|
min: number;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import React, { useCallback, useEffect, useRef, useState } from
|
|
2
|
-
import classNames from
|
|
1
|
+
import React, { useCallback, useEffect, useRef, useState } from "react";
|
|
2
|
+
import classNames from "classnames";
|
|
3
3
|
import useId from "../../helper/useId.js";
|
|
4
4
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
5
5
|
function Slider(_ref) {
|
|
@@ -21,12 +21,12 @@ function Slider(_ref) {
|
|
|
21
21
|
const [left, setLeft] = useState(null);
|
|
22
22
|
const [numberoffset, setNumberOffset] = useState(0);
|
|
23
23
|
const labelEl = useRef(null);
|
|
24
|
-
const classes = classNames(
|
|
25
|
-
|
|
24
|
+
const classes = classNames("fwe-slider", {
|
|
25
|
+
"fr-slider-value": !label && showValue
|
|
26
26
|
}, {
|
|
27
|
-
|
|
27
|
+
"fr-slider-label": label && !showValue
|
|
28
28
|
}, {
|
|
29
|
-
|
|
29
|
+
"fr-slider-value-label": label && showValue
|
|
30
30
|
}, className);
|
|
31
31
|
useEffect(() => {
|
|
32
32
|
setInnerValue(value);
|
|
@@ -57,11 +57,11 @@ function Slider(_ref) {
|
|
|
57
57
|
function handleResize() {
|
|
58
58
|
updateValuePosition();
|
|
59
59
|
}
|
|
60
|
-
window.addEventListener(
|
|
60
|
+
window.addEventListener("resize", handleResize);
|
|
61
61
|
handleResize();
|
|
62
62
|
|
|
63
63
|
// Remove event listener on cleanup
|
|
64
|
-
return () => window.removeEventListener(
|
|
64
|
+
return () => window.removeEventListener("resize", handleResize);
|
|
65
65
|
}, [updateValuePosition]);
|
|
66
66
|
return /*#__PURE__*/_jsxs("label", {
|
|
67
67
|
ref: labelEl,
|
|
@@ -89,7 +89,7 @@ function Slider(_ref) {
|
|
|
89
89
|
},
|
|
90
90
|
children: innerValue
|
|
91
91
|
}), /*#__PURE__*/_jsx("div", {
|
|
92
|
-
className: `fr-slider-indicator${disabled ?
|
|
92
|
+
className: `fr-slider-indicator${disabled ? " disabled" : ""}`,
|
|
93
93
|
style: {
|
|
94
94
|
width: `${left}px`
|
|
95
95
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { ClassNameProps } from
|
|
1
|
+
import { ClassNameProps } from "../../helper/types";
|
|
2
2
|
export interface SwitchProps extends ClassNameProps {
|
|
3
|
-
labelPosition?:
|
|
3
|
+
labelPosition?: "before" | "after" | "below";
|
|
4
4
|
large?: boolean;
|
|
5
5
|
title: string;
|
|
6
6
|
value?: boolean;
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import classNames from
|
|
1
|
+
import classNames from "classnames";
|
|
2
2
|
import useControlled from "../../helper/useControlled.js";
|
|
3
3
|
import useId from "../../helper/useId.js";
|
|
4
4
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
5
5
|
function Switch(_ref) {
|
|
6
6
|
let {
|
|
7
|
-
labelPosition =
|
|
7
|
+
labelPosition = "after",
|
|
8
8
|
large = false,
|
|
9
9
|
title,
|
|
10
10
|
value,
|
|
@@ -15,10 +15,10 @@ function Switch(_ref) {
|
|
|
15
15
|
id: idProps
|
|
16
16
|
} = _ref;
|
|
17
17
|
const id = useId(idProps);
|
|
18
|
-
const labelClassName = classNames(
|
|
18
|
+
const labelClassName = classNames("fwe-switch", {
|
|
19
19
|
[`fwe-switch-label-${labelPosition}`]: true
|
|
20
20
|
}, {
|
|
21
|
-
|
|
21
|
+
"fwe-switch-lg": large
|
|
22
22
|
}, className);
|
|
23
23
|
const [currentValue, setCurrentValue] = useControlled({
|
|
24
24
|
controlled: value,
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import React from
|
|
2
|
-
import { ClassNameProps } from
|
|
3
|
-
import
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { ClassNameProps } from "../../helper/types";
|
|
3
|
+
import "./TextArea.scss";
|
|
4
4
|
interface TextAreaProps extends ClassNameProps {
|
|
5
5
|
disabled?: boolean;
|
|
6
6
|
required?: boolean;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import React, { useEffect, useState } from
|
|
2
|
-
import classNames from
|
|
1
|
+
import React, { useEffect, useState } from "react";
|
|
2
|
+
import classNames from "classnames";
|
|
3
3
|
import useId from "../../helper/useId.js";
|
|
4
4
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
5
5
|
function TextArea(_ref) {
|
|
@@ -24,7 +24,7 @@ function TextArea(_ref) {
|
|
|
24
24
|
const controlled = value !== undefined;
|
|
25
25
|
const [innerValue, setInnerValue] = useState(controlled ? value : defaultValue);
|
|
26
26
|
const id = useId(idProps);
|
|
27
|
-
const hintClasses = classNames(
|
|
27
|
+
const hintClasses = classNames("fwe-input-text-info");
|
|
28
28
|
const shadowRef = React.useRef(null);
|
|
29
29
|
const ref = React.useRef(null);
|
|
30
30
|
const [height, setHeight] = useState(undefined);
|
|
@@ -38,7 +38,7 @@ function TextArea(_ref) {
|
|
|
38
38
|
const shadow = shadowRef.current;
|
|
39
39
|
const minRows = 2;
|
|
40
40
|
if (shadow && input) {
|
|
41
|
-
shadow.value = input.value ||
|
|
41
|
+
shadow.value = input.value || "x";
|
|
42
42
|
shadow.style.width = `${input.clientWidth}`;
|
|
43
43
|
const newHeight = Math.max(minRows * 24, shadow.scrollHeight);
|
|
44
44
|
setHeight(newHeight + 4 + 4 + 1);
|
|
@@ -53,17 +53,17 @@ function TextArea(_ref) {
|
|
|
53
53
|
}
|
|
54
54
|
}
|
|
55
55
|
return /*#__PURE__*/_jsxs("label", {
|
|
56
|
-
className: classNames(
|
|
56
|
+
className: classNames("fwe-input-text", className),
|
|
57
57
|
htmlFor: id,
|
|
58
58
|
children: [/*#__PURE__*/_jsx("textarea", {
|
|
59
59
|
style: {
|
|
60
60
|
...(!rows && {
|
|
61
61
|
height,
|
|
62
|
-
overflow:
|
|
62
|
+
overflow: "hidden"
|
|
63
63
|
})
|
|
64
64
|
},
|
|
65
65
|
ref: ref,
|
|
66
|
-
className: classNames(
|
|
66
|
+
className: classNames("fr-textarea", `fwe-row-${rows}`),
|
|
67
67
|
disabled: disabled,
|
|
68
68
|
readOnly: readonly,
|
|
69
69
|
required: required,
|
|
@@ -78,14 +78,14 @@ function TextArea(_ref) {
|
|
|
78
78
|
id: id
|
|
79
79
|
}), /*#__PURE__*/_jsx("textarea", {
|
|
80
80
|
style: {
|
|
81
|
-
visibility:
|
|
82
|
-
position:
|
|
83
|
-
overflow:
|
|
81
|
+
visibility: "hidden",
|
|
82
|
+
position: "absolute",
|
|
83
|
+
overflow: "hidden",
|
|
84
84
|
height: 0,
|
|
85
85
|
top: 0,
|
|
86
86
|
left: 0,
|
|
87
|
-
transform:
|
|
88
|
-
padding:
|
|
87
|
+
transform: "translateZ(0)",
|
|
88
|
+
padding: "0"
|
|
89
89
|
},
|
|
90
90
|
ref: shadowRef,
|
|
91
91
|
readOnly: true
|
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
import { useCallback, useEffect, useRef, useState } from
|
|
2
|
-
import classNames from
|
|
3
|
-
import * as xss from
|
|
1
|
+
import { useCallback, useEffect, useRef, useState } from "react";
|
|
2
|
+
import classNames from "classnames";
|
|
3
|
+
import * as xss from "xss";
|
|
4
|
+
import { IconAlignCenter, IconAlignRight, IconEnumeration, IconImage, IconLink, IconListView } from "@festo-ui/react-icons";
|
|
4
5
|
import useId from "../../helper/useId.js";
|
|
5
6
|
import TextEditorButton from "./TextEditorButton.js";
|
|
6
7
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
@@ -48,9 +49,9 @@ function TextEditor(_ref) {
|
|
|
48
49
|
if (e) {
|
|
49
50
|
const whiteList = {
|
|
50
51
|
...xss.whiteList,
|
|
51
|
-
p: [...(xss.whiteList?.p ?? []),
|
|
52
|
-
li: [...(xss.whiteList?.li ?? []),
|
|
53
|
-
a: [...(xss.whiteList?.a ?? []),
|
|
52
|
+
p: [...(xss.whiteList?.p ?? []), "class"],
|
|
53
|
+
li: [...(xss.whiteList?.li ?? []), "class"],
|
|
54
|
+
a: [...(xss.whiteList?.a ?? []), "rel", "class"]
|
|
54
55
|
};
|
|
55
56
|
const sanitizedValue = xss.filterXSS(v, {
|
|
56
57
|
whiteList
|
|
@@ -59,7 +60,7 @@ function TextEditor(_ref) {
|
|
|
59
60
|
html: sanitizedValue
|
|
60
61
|
});
|
|
61
62
|
const selection = e.getSelection();
|
|
62
|
-
e.setContents(content,
|
|
63
|
+
e.setContents(content, "silent");
|
|
63
64
|
setInnerValue(sanitizedValue);
|
|
64
65
|
postpone(() => e.setSelection(selection));
|
|
65
66
|
}
|
|
@@ -67,20 +68,20 @@ function TextEditor(_ref) {
|
|
|
67
68
|
useEffect(() => {
|
|
68
69
|
const initializeQuill = async () => {
|
|
69
70
|
let Quill;
|
|
70
|
-
if (typeof window !==
|
|
71
|
-
const QuillModule = await import(
|
|
71
|
+
if (typeof window !== "undefined") {
|
|
72
|
+
const QuillModule = await import("quill");
|
|
72
73
|
Quill = QuillModule.default;
|
|
73
74
|
}
|
|
74
75
|
if (editorRef.current && Quill && editor === null) {
|
|
75
76
|
const newEditor = new Quill(editorRef.current, {
|
|
76
77
|
modules: {
|
|
77
|
-
toolbar: `#editor-toolbar-${CSS.escape(id ??
|
|
78
|
+
toolbar: `#editor-toolbar-${CSS.escape(id ?? "")}`
|
|
78
79
|
},
|
|
79
|
-
theme:
|
|
80
|
+
theme: "snow"
|
|
80
81
|
});
|
|
81
|
-
newEditor.root.setAttribute(
|
|
82
|
-
newEditor.root.setAttribute(
|
|
83
|
-
newEditor.root.setAttribute(
|
|
82
|
+
newEditor.root.setAttribute("role", "textbox");
|
|
83
|
+
newEditor.root.setAttribute("aria-labelledby", `editor-label-${id}`);
|
|
84
|
+
newEditor.root.setAttribute("aria-multiline", "true");
|
|
84
85
|
newEditor.enable(!readOnly);
|
|
85
86
|
if (disabled) {
|
|
86
87
|
newEditor.disable();
|
|
@@ -97,9 +98,9 @@ function TextEditor(_ref) {
|
|
|
97
98
|
}, [editor, disabled, readOnly, id, setEditorContents, defaultValue]);
|
|
98
99
|
useEffect(() => {
|
|
99
100
|
if (editor) {
|
|
100
|
-
editor.on(
|
|
101
|
+
editor.on("text-change", () => {
|
|
101
102
|
let html = editor.root.innerHTML;
|
|
102
|
-
if (html ===
|
|
103
|
+
if (html === "<p><br></p>" || html === "<div><br></div>" || html === undefined) {
|
|
103
104
|
html = null;
|
|
104
105
|
}
|
|
105
106
|
if (onChange) {
|
|
@@ -123,13 +124,13 @@ function TextEditor(_ref) {
|
|
|
123
124
|
const typos = config.toolbar?.bold || config.toolbar?.italic || config.toolbar?.underline;
|
|
124
125
|
const textAlign = config.toolbar?.alignCenter || config.toolbar?.alignRight;
|
|
125
126
|
switch (name) {
|
|
126
|
-
case
|
|
127
|
+
case "typo":
|
|
127
128
|
return !typos || !textAlign && !linkOrImage && !lists;
|
|
128
|
-
case
|
|
129
|
+
case "text-align":
|
|
129
130
|
return !textAlign || !linkOrImage && !lists;
|
|
130
|
-
case
|
|
131
|
+
case "lists":
|
|
131
132
|
return !lists || !linkOrImage;
|
|
132
|
-
case
|
|
133
|
+
case "image":
|
|
133
134
|
return !config.toolbar?.image || !config.toolbar.link;
|
|
134
135
|
default:
|
|
135
136
|
break;
|
|
@@ -137,12 +138,12 @@ function TextEditor(_ref) {
|
|
|
137
138
|
return true;
|
|
138
139
|
}
|
|
139
140
|
return /*#__PURE__*/_jsxs("label", {
|
|
140
|
-
className: classNames(
|
|
141
|
+
className: classNames("fwe-input-text", {
|
|
141
142
|
disabled
|
|
142
143
|
}),
|
|
143
144
|
htmlFor: `editor-label-${id}`,
|
|
144
145
|
children: [/*#__PURE__*/_jsx("div", {
|
|
145
|
-
className: classNames(
|
|
146
|
+
className: classNames("fwe-editor-toolbar", {
|
|
146
147
|
[`fwe-editor-toolbar-${className}`]: className
|
|
147
148
|
}),
|
|
148
149
|
id: `editor-toolbar-${id}`,
|
|
@@ -162,42 +163,45 @@ function TextEditor(_ref) {
|
|
|
162
163
|
disabled: disabled,
|
|
163
164
|
type: "underline",
|
|
164
165
|
label: "U"
|
|
165
|
-
}), !hideDivider(
|
|
166
|
+
}), !hideDivider("typo") && /*#__PURE__*/_jsx("div", {
|
|
166
167
|
className: "fwe-divider-y fwe-d-inline-flex fwe-mx-4"
|
|
167
168
|
}), config?.toolbar?.alignCenter && /*#__PURE__*/_jsx(TextEditorButton, {
|
|
168
169
|
disabled: disabled,
|
|
169
170
|
category: "align",
|
|
170
171
|
type: "align-center",
|
|
171
|
-
icon:
|
|
172
|
-
|
|
172
|
+
icon: /*#__PURE__*/_jsx(IconAlignCenter, {
|
|
173
|
+
className: classNames({
|
|
174
|
+
"fwe-gray": disabled
|
|
175
|
+
})
|
|
173
176
|
}),
|
|
174
177
|
value: "center",
|
|
175
|
-
className: classNames(
|
|
176
|
-
|
|
178
|
+
className: classNames({
|
|
179
|
+
"fwe-mr-3": config?.toolbar?.alignRight
|
|
177
180
|
})
|
|
178
181
|
}), config?.toolbar?.alignRight && /*#__PURE__*/_jsx(TextEditorButton, {
|
|
179
182
|
disabled: disabled,
|
|
180
183
|
category: "align",
|
|
181
184
|
type: "align-right",
|
|
182
|
-
icon:
|
|
183
|
-
|
|
185
|
+
icon: /*#__PURE__*/_jsx(IconAlignRight, {
|
|
186
|
+
className: classNames({
|
|
187
|
+
"fwe-gray": disabled
|
|
188
|
+
})
|
|
184
189
|
}),
|
|
185
|
-
value: "right"
|
|
186
|
-
|
|
187
|
-
}), !hideDivider('text-align') && /*#__PURE__*/_jsx("div", {
|
|
190
|
+
value: "right"
|
|
191
|
+
}), !hideDivider("text-align") && /*#__PURE__*/_jsx("div", {
|
|
188
192
|
className: "fwe-divider-y fwe-d-inline-flex fwe-mx-4"
|
|
189
193
|
}), config?.toolbar?.bulletList && /*#__PURE__*/_jsx(TextEditorButton, {
|
|
190
194
|
disabled: disabled,
|
|
191
195
|
className: "fwe-mr-3",
|
|
192
196
|
type: "ul",
|
|
193
197
|
list: true,
|
|
194
|
-
icon:
|
|
198
|
+
icon: /*#__PURE__*/_jsx(IconListView, {}),
|
|
195
199
|
value: "bullet"
|
|
196
200
|
}), config?.toolbar?.orderedList && /*#__PURE__*/_jsx(TextEditorButton, {
|
|
197
201
|
disabled: disabled,
|
|
198
202
|
type: "ol",
|
|
199
203
|
list: true,
|
|
200
|
-
icon:
|
|
204
|
+
icon: /*#__PURE__*/_jsx(IconEnumeration, {}),
|
|
201
205
|
value: "ordered"
|
|
202
206
|
}), config?.toolbar?.image && /*#__PURE__*/_jsxs(_Fragment, {
|
|
203
207
|
children: [/*#__PURE__*/_jsx("div", {
|
|
@@ -205,7 +209,7 @@ function TextEditor(_ref) {
|
|
|
205
209
|
}), /*#__PURE__*/_jsx(TextEditorButton, {
|
|
206
210
|
disabled: disabled,
|
|
207
211
|
type: "image",
|
|
208
|
-
icon:
|
|
212
|
+
icon: /*#__PURE__*/_jsx(IconImage, {}),
|
|
209
213
|
noAction: true
|
|
210
214
|
})]
|
|
211
215
|
}), config?.toolbar?.link && /*#__PURE__*/_jsxs(_Fragment, {
|
|
@@ -214,14 +218,14 @@ function TextEditor(_ref) {
|
|
|
214
218
|
}), /*#__PURE__*/_jsx(TextEditorButton, {
|
|
215
219
|
disabled: disabled,
|
|
216
220
|
type: "link",
|
|
217
|
-
icon:
|
|
221
|
+
icon: /*#__PURE__*/_jsx(IconLink, {}),
|
|
218
222
|
noAction: true
|
|
219
223
|
})]
|
|
220
224
|
})]
|
|
221
225
|
})
|
|
222
226
|
}), /*#__PURE__*/_jsx("div", {
|
|
223
|
-
className: classNames(
|
|
224
|
-
|
|
227
|
+
className: classNames("fwe-editor-container", {
|
|
228
|
+
"fwe-editor-container--error": error
|
|
225
229
|
}),
|
|
226
230
|
id: `editor-container-${id}`,
|
|
227
231
|
children: /*#__PURE__*/_jsx("div", {
|
|
@@ -1,7 +1,8 @@
|
|
|
1
|
+
import { ReactElement } from "react";
|
|
1
2
|
interface TextEditorButtonProps {
|
|
2
3
|
type: string;
|
|
3
4
|
label?: string;
|
|
4
|
-
icon?:
|
|
5
|
+
icon?: ReactElement;
|
|
5
6
|
disabled: boolean;
|
|
6
7
|
className?: string;
|
|
7
8
|
list?: boolean;
|
|
@@ -9,5 +10,5 @@ interface TextEditorButtonProps {
|
|
|
9
10
|
noAction?: boolean;
|
|
10
11
|
category?: string;
|
|
11
12
|
}
|
|
12
|
-
declare function TextEditorButton({ disabled, label, type, className, icon, list, value, noAction, category, }: TextEditorButtonProps): import("react/jsx-runtime").JSX.Element;
|
|
13
|
+
declare function TextEditorButton({ disabled, label, type, className, icon, list, value, noAction, category, }: Readonly<TextEditorButtonProps>): import("react/jsx-runtime").JSX.Element;
|
|
13
14
|
export default TextEditorButton;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { useEffect, useRef, useState } from
|
|
2
|
-
import classNames from
|
|
1
|
+
import { useEffect, useRef, useState } from "react";
|
|
2
|
+
import classNames from "classnames";
|
|
3
3
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
4
4
|
function TextEditorButton(_ref) {
|
|
5
5
|
let {
|
|
@@ -29,10 +29,10 @@ function TextEditorButton(_ref) {
|
|
|
29
29
|
const {
|
|
30
30
|
oldValue
|
|
31
31
|
} = mutationRecord;
|
|
32
|
-
if (classList.contains(
|
|
32
|
+
if (classList.contains("ql-active")) {
|
|
33
33
|
setActive(true);
|
|
34
34
|
}
|
|
35
|
-
if (!classList.contains(
|
|
35
|
+
if (!classList.contains("ql-active") && oldValue?.includes("ql-active")) {
|
|
36
36
|
setActive(false);
|
|
37
37
|
}
|
|
38
38
|
});
|
|
@@ -41,7 +41,7 @@ function TextEditorButton(_ref) {
|
|
|
41
41
|
const observer = new MutationObserver(callback);
|
|
42
42
|
observer.observe(btnRef.current, {
|
|
43
43
|
attributes: true,
|
|
44
|
-
attributeFilter: [
|
|
44
|
+
attributeFilter: ["class"],
|
|
45
45
|
attributeOldValue: true
|
|
46
46
|
});
|
|
47
47
|
}
|
|
@@ -53,26 +53,26 @@ function TextEditorButton(_ref) {
|
|
|
53
53
|
className: classNames({
|
|
54
54
|
[`ql-${category || type}`]: !list
|
|
55
55
|
}, {
|
|
56
|
-
|
|
57
|
-
},
|
|
56
|
+
"ql-list": list
|
|
57
|
+
}, "fwe-d-none", {
|
|
58
58
|
[`action-${type}`]: !noAction
|
|
59
59
|
}),
|
|
60
60
|
"aria-hidden": "true",
|
|
61
61
|
value: value
|
|
62
62
|
}), /*#__PURE__*/_jsxs("button", {
|
|
63
63
|
type: "button",
|
|
64
|
-
className: classNames(
|
|
65
|
-
|
|
66
|
-
},
|
|
67
|
-
|
|
64
|
+
className: classNames({
|
|
65
|
+
"fr-icon-button": !!icon
|
|
66
|
+
}, "fr-button", className, {
|
|
67
|
+
"fwe-active": active && !noAction
|
|
68
68
|
}),
|
|
69
69
|
onClick: () => handleClick(),
|
|
70
70
|
disabled: disabled,
|
|
71
71
|
children: [label && /*#__PURE__*/_jsx("div", {
|
|
72
72
|
className: `fr-button-text fwe-text-${type}`,
|
|
73
73
|
children: label
|
|
74
|
-
}),
|
|
75
|
-
|
|
74
|
+
}), /*#__PURE__*/_jsx("div", {
|
|
75
|
+
children: icon
|
|
76
76
|
})]
|
|
77
77
|
})]
|
|
78
78
|
});
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import React, { forwardRef, useEffect, useState } from
|
|
2
|
-
import classNames from
|
|
1
|
+
import React, { forwardRef, useEffect, useState } from "react";
|
|
2
|
+
import classNames from "classnames";
|
|
3
3
|
import useId from "../../helper/useId.js";
|
|
4
4
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
5
5
|
const TextInput = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
@@ -28,10 +28,10 @@ const TextInput = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
|
28
28
|
useEffect(() => {
|
|
29
29
|
setInnerValue(value);
|
|
30
30
|
}, [value]);
|
|
31
|
-
const supported = [
|
|
32
|
-
const innerType = type && supported.indexOf(type) !== -1 ? type :
|
|
33
|
-
const labelClasses = classNames(
|
|
34
|
-
const hintClasses = classNames(
|
|
31
|
+
const supported = ["text", "number", "password", "datetime-local"];
|
|
32
|
+
const innerType = type && supported.indexOf(type) !== -1 ? type : "text";
|
|
33
|
+
const labelClasses = classNames("fwe-input-text", labelClassName);
|
|
34
|
+
const hintClasses = classNames("fwe-input-text-info");
|
|
35
35
|
function handleChange(e) {
|
|
36
36
|
setInnerValue(e.target.value);
|
|
37
37
|
if (props.onChange) {
|
|
@@ -3,7 +3,7 @@ interface TimePickerInputProps {
|
|
|
3
3
|
value: string | number;
|
|
4
4
|
max: number;
|
|
5
5
|
onInput: React.FormEventHandler<HTMLInputElement>;
|
|
6
|
-
|
|
6
|
+
"aria-label": string;
|
|
7
7
|
}
|
|
8
8
|
declare const TimePickerInput: (props: TimePickerInputProps & import("react").RefAttributes<HTMLInputElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
|
|
9
9
|
export default TimePickerInput;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { forwardRef } from
|
|
1
|
+
import { forwardRef } from "react";
|
|
2
2
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
3
|
const TimePickerInput = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
4
4
|
let {
|
|
@@ -6,7 +6,7 @@ const TimePickerInput = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
|
6
6
|
max,
|
|
7
7
|
value,
|
|
8
8
|
onInput,
|
|
9
|
-
|
|
9
|
+
"aria-label": ariaLabel
|
|
10
10
|
} = _ref;
|
|
11
11
|
return /*#__PURE__*/_jsx("input", {
|
|
12
12
|
"aria-label": ariaLabel,
|
package/lib/helper/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export const provideDiv = () => {
|
|
2
|
-
const div = document.createElement(
|
|
2
|
+
const div = document.createElement("div");
|
|
3
3
|
const id = Math.floor(Math.random() * 1000);
|
|
4
|
-
div.setAttribute(
|
|
4
|
+
div.setAttribute("id", `${id}`);
|
|
5
5
|
return div;
|
|
6
6
|
};
|
|
7
7
|
export default provideDiv;
|
package/lib/helper/setRef.js
CHANGED
package/lib/helper/types.d.ts
CHANGED
|
@@ -7,7 +7,7 @@ export interface ClassNamePropsWithChildren extends ClassNameProps {
|
|
|
7
7
|
export interface Image {
|
|
8
8
|
src: string;
|
|
9
9
|
alt: string;
|
|
10
|
-
aspectRatio:
|
|
10
|
+
aspectRatio: "3/2" | "16/9";
|
|
11
11
|
}
|
|
12
12
|
export interface SelectConfiguration {
|
|
13
13
|
hideLabel?: boolean;
|
|
@@ -17,7 +17,7 @@ export interface SelectConfiguration {
|
|
|
17
17
|
viewportSize?: number;
|
|
18
18
|
};
|
|
19
19
|
}
|
|
20
|
-
export type PolymorphicRef<C extends React.ElementType> = React.ComponentPropsWithRef<C>[
|
|
20
|
+
export type PolymorphicRef<C extends React.ElementType> = React.ComponentPropsWithRef<C>["ref"];
|
|
21
21
|
type AsProp<C extends React.ElementType> = {
|
|
22
22
|
component?: C;
|
|
23
23
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { useRef, useState, useCallback } from
|
|
1
|
+
import { useRef, useState, useCallback } from "react";
|
|
2
2
|
export default function useControlled(_ref) {
|
|
3
3
|
let {
|
|
4
4
|
controlled,
|
|
@@ -15,7 +15,7 @@ export default function useControlled(_ref) {
|
|
|
15
15
|
setValue(newValue);
|
|
16
16
|
}
|
|
17
17
|
const setter = newValue;
|
|
18
|
-
const onChangeValue = typeof newValue ===
|
|
18
|
+
const onChangeValue = typeof newValue === "function" ? setter(controlled) : newValue;
|
|
19
19
|
onChange?.(onChangeValue);
|
|
20
20
|
}, [controlled, isControlled, onChange]);
|
|
21
21
|
return [value, setValueIfUncontrolled];
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import React from
|
|
1
|
+
import React from "react";
|
|
2
2
|
export default function useForkRef<T>(refA: React.Ref<T> | null | undefined, refB: React.Ref<T> | null | undefined): React.RefCallback<T> | null;
|
package/lib/helper/useForkRef.js
CHANGED
package/lib/helper/useId.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import React from
|
|
1
|
+
import React from "react";
|
|
2
2
|
|
|
3
3
|
// eslint-disable-next-line no-useless-concat
|
|
4
|
-
const maybeReactUseId = React[
|
|
4
|
+
const maybeReactUseId = React["useId" + ""];
|
|
5
5
|
let nextId = 0;
|
|
6
6
|
function useLegacyId() {
|
|
7
7
|
const [id, setId] = React.useState(undefined);
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { RefObject } from
|
|
1
|
+
import { RefObject } from "react";
|
|
2
2
|
export default function useOnClickOutside<T extends HTMLElement = HTMLElement>(ref: RefObject<T>, callback: (event: MouseEvent | TouchEvent) => void, ref2?: RefObject<T>): void;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { useEffect } from
|
|
1
|
+
import { useEffect } from "react";
|
|
2
2
|
export default function useOnClickOutside(ref, callback, ref2) {
|
|
3
3
|
useEffect(() => {
|
|
4
4
|
const listener = event => {
|
|
@@ -8,11 +8,11 @@ export default function useOnClickOutside(ref, callback, ref2) {
|
|
|
8
8
|
}
|
|
9
9
|
callback(event);
|
|
10
10
|
};
|
|
11
|
-
document.addEventListener(
|
|
12
|
-
document.addEventListener(
|
|
11
|
+
document.addEventListener("mousedown", listener, true);
|
|
12
|
+
document.addEventListener("touchstart", listener, true);
|
|
13
13
|
return () => {
|
|
14
|
-
document.removeEventListener(
|
|
15
|
-
document.removeEventListener(
|
|
14
|
+
document.removeEventListener("mousedown", listener, true);
|
|
15
|
+
document.removeEventListener("touchstart", listener, true);
|
|
16
16
|
};
|
|
17
17
|
}, [ref, ref2, callback]);
|
|
18
18
|
}
|