@coopdigital/react 1.30.0 → 1.30.2
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/dist/components/Combobox/Combobox.js +19 -3
- package/dist/components/Textarea/Textarea.js +14 -4
- package/dist/components/icons/AccountCircleFilledIcon.d.ts +2 -1
- package/dist/components/icons/AccountCircleIcon.d.ts +2 -1
- package/dist/components/icons/AccountFilledIcon.d.ts +2 -1
- package/dist/components/icons/AccountIcon.d.ts +2 -1
- package/dist/components/icons/AddIcon.d.ts +2 -1
- package/dist/components/icons/AppsFilledIcon.d.ts +2 -1
- package/dist/components/icons/AppsIcon.d.ts +2 -1
- package/dist/components/icons/ArrowDownIcon.d.ts +2 -1
- package/dist/components/icons/ArrowLeftIcon.d.ts +2 -1
- package/dist/components/icons/ArrowRightIcon.d.ts +2 -1
- package/dist/components/icons/ArrowUpIcon.d.ts +2 -1
- package/dist/components/icons/BackspaceFilledIcon.d.ts +2 -1
- package/dist/components/icons/BackspaceIcon.d.ts +2 -1
- package/dist/components/icons/BasketFilledIcon.d.ts +2 -1
- package/dist/components/icons/BasketIcon.d.ts +2 -1
- package/dist/components/icons/BellFilledIcon.d.ts +2 -1
- package/dist/components/icons/BellIcon.d.ts +2 -1
- package/dist/components/icons/BroomIcon.d.ts +2 -1
- package/dist/components/icons/CalendarFilledIcon.d.ts +2 -1
- package/dist/components/icons/CalendarIcon.d.ts +2 -1
- package/dist/components/icons/CashFilledIcon.d.ts +2 -1
- package/dist/components/icons/CashIcon.d.ts +2 -1
- package/dist/components/icons/ChevronDownIcon.d.ts +2 -1
- package/dist/components/icons/ChevronLeftIcon.d.ts +2 -1
- package/dist/components/icons/ChevronRightIcon.d.ts +2 -1
- package/dist/components/icons/ChevronUpIcon.d.ts +2 -1
- package/dist/components/icons/CircleBurgerFilledIcon.d.ts +2 -1
- package/dist/components/icons/CircleBurgerIcon.d.ts +2 -1
- package/dist/components/icons/ClipboardFilledIcon.d.ts +2 -1
- package/dist/components/icons/ClipboardIcon.d.ts +2 -1
- package/dist/components/icons/ClockFilledIcon.d.ts +2 -1
- package/dist/components/icons/ClockIcon.d.ts +2 -1
- package/dist/components/icons/CloseAltFilledIcon.d.ts +2 -1
- package/dist/components/icons/CloseAltIcon.d.ts +2 -1
- package/dist/components/icons/CogIcon.d.ts +2 -1
- package/dist/components/icons/CommunityFilledIcon.d.ts +2 -1
- package/dist/components/icons/CommunityIcon.d.ts +2 -1
- package/dist/components/icons/ComputerIcon.d.ts +2 -1
- package/dist/components/icons/ContactFilledIcon.d.ts +2 -1
- package/dist/components/icons/ContactIcon.d.ts +2 -1
- package/dist/components/icons/ContactlessFilledIcon.d.ts +2 -1
- package/dist/components/icons/ContactlessIcon.d.ts +2 -1
- package/dist/components/icons/CoopLiveIcon.d.ts +2 -1
- package/dist/components/icons/CoopLocationFilledIcon.d.ts +2 -1
- package/dist/components/icons/CoopLogoIcon.d.ts +2 -1
- package/dist/components/icons/CoopMembershipCardFilledIcon.d.ts +2 -1
- package/dist/components/icons/CreditCardFilledIcon.d.ts +2 -1
- package/dist/components/icons/CreditCardIcon.d.ts +2 -1
- package/dist/components/icons/CrossIcon.d.ts +2 -1
- package/dist/components/icons/DocumentIcon.d.ts +2 -1
- package/dist/components/icons/DownloadIcon.d.ts +2 -1
- package/dist/components/icons/EnterStoreIcon.d.ts +2 -1
- package/dist/components/icons/ExitStoreIcon.d.ts +2 -1
- package/dist/components/icons/EyeFilledIcon.d.ts +2 -1
- package/dist/components/icons/EyeIcon.d.ts +2 -1
- package/dist/components/icons/EyeStrikeFilledIcon.d.ts +2 -1
- package/dist/components/icons/EyeStrikeIcon.d.ts +2 -1
- package/dist/components/icons/FeedbackFilledIcon.d.ts +2 -1
- package/dist/components/icons/FeedbackIcon.d.ts +2 -1
- package/dist/components/icons/FilterIcon.d.ts +2 -1
- package/dist/components/icons/GiftCardFilledIcon.d.ts +2 -1
- package/dist/components/icons/GiftCardIcon.d.ts +2 -1
- package/dist/components/icons/GiftFilledIcon.d.ts +2 -1
- package/dist/components/icons/GiftIcon.d.ts +2 -1
- package/dist/components/icons/HelpFilledIcon.d.ts +2 -1
- package/dist/components/icons/HelpIcon.d.ts +2 -1
- package/dist/components/icons/HomeFilledIcon.d.ts +2 -1
- package/dist/components/icons/HomeIcon.d.ts +2 -1
- package/dist/components/icons/HowDoIAssistantIcon.d.ts +2 -1
- package/dist/components/icons/InfoIcon.d.ts +2 -1
- package/dist/components/icons/KebabIcon.d.ts +2 -1
- package/dist/components/icons/LoadingIcon.d.ts +2 -1
- package/dist/components/icons/LocationFilledIcon.d.ts +2 -1
- package/dist/components/icons/LocationIcon.d.ts +2 -1
- package/dist/components/icons/LogoutIcon.d.ts +2 -1
- package/dist/components/icons/MailIcon.d.ts +2 -1
- package/dist/components/icons/MenuIcon.d.ts +2 -1
- package/dist/components/icons/MessageIcon.d.ts +2 -1
- package/dist/components/icons/MinusIcon.d.ts +2 -1
- package/dist/components/icons/NotesFilledIcon.d.ts +2 -1
- package/dist/components/icons/NotesIcon.d.ts +2 -1
- package/dist/components/icons/OpenNewIcon.d.ts +2 -1
- package/dist/components/icons/OwnBagIcon.d.ts +2 -1
- package/dist/components/icons/PadlockIcon.d.ts +2 -1
- package/dist/components/icons/PencilIcon.d.ts +2 -1
- package/dist/components/icons/PhoneIcon.d.ts +2 -1
- package/dist/components/icons/PowerIcon.d.ts +2 -1
- package/dist/components/icons/SaveFilledIcon.d.ts +2 -1
- package/dist/components/icons/SaveIcon.d.ts +2 -1
- package/dist/components/icons/ScooterIcon.d.ts +2 -1
- package/dist/components/icons/SearchFilledIcon.d.ts +2 -1
- package/dist/components/icons/SearchIcon.d.ts +2 -1
- package/dist/components/icons/SendIcon.d.ts +2 -1
- package/dist/components/icons/SpannerIcon.d.ts +2 -1
- package/dist/components/icons/StarFilledIcon.d.ts +2 -1
- package/dist/components/icons/StarIcon.d.ts +2 -1
- package/dist/components/icons/TickAltFilledIcon.d.ts +2 -1
- package/dist/components/icons/TickAltIcon.d.ts +2 -1
- package/dist/components/icons/TickIcon.d.ts +2 -1
- package/dist/components/icons/TruckIcon.d.ts +2 -1
- package/dist/components/icons/UserWipeIcon.d.ts +2 -1
- package/dist/components/icons/VoucherFilledIcon.d.ts +2 -1
- package/dist/components/icons/VoucherIcon.d.ts +2 -1
- package/dist/components/icons/WarningCircleFilledIcon.d.ts +2 -1
- package/dist/components/icons/WarningCircleIcon.d.ts +2 -1
- package/dist/components/icons/WarningFilledIcon.d.ts +2 -1
- package/dist/components/icons/WarningIcon.d.ts +2 -1
- package/dist/components/icons/WifiIcon.d.ts +2 -1
- package/dist/components/icons/WriteIcon.d.ts +2 -1
- package/dist/hooks/index.d.ts +2 -1
- package/dist/hooks/index.js +2 -1
- package/dist/hooks/useFormReset.d.ts +6 -0
- package/dist/hooks/useFormReset.js +19 -0
- package/dist/hooks/useSlots.d.ts +2 -1
- package/dist/types/index.js +4 -0
- package/dist/utils/slots.d.ts +1 -1
- package/dist/utils/slots.js +20 -12
- package/package.json +19 -16
- package/src/components/Combobox/Combobox.context.ts +3 -1
- package/src/components/Combobox/Combobox.tsx +28 -4
- package/src/components/Textarea/Textarea.tsx +19 -4
- package/src/hooks/index.ts +1 -0
- package/src/hooks/useFormReset.ts +28 -0
- package/src/utils/slots.ts +37 -23
|
@@ -8,10 +8,12 @@ import { defaultFilter, defaultIsItemDisabled, defaultItemToString, isMatchingTe
|
|
|
8
8
|
import { ComboboxContext, useComboboxContext } from "./Combobox.context.js";
|
|
9
9
|
import { TextInput } from "../TextInput/TextInput.js";
|
|
10
10
|
import { useDebounce } from "../../hooks/useDebounce.js";
|
|
11
|
+
import { useFormReset } from "../../hooks/useFormReset.js";
|
|
11
12
|
import clsx from "clsx";
|
|
12
13
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
13
14
|
import { useEffect, useMemo, useRef, useState } from "react";
|
|
14
15
|
import { useCombobox } from "downshift";
|
|
16
|
+
import mergeRefs from "merge-refs";
|
|
15
17
|
//#region src/components/Combobox/Combobox.tsx
|
|
16
18
|
const DEFAULT_MAX_RESULTS = 50;
|
|
17
19
|
const ANNOUNCEMENT_DELAY = 750;
|
|
@@ -39,7 +41,9 @@ const Combobox = ({ allowCustom = false, children, className, defaultSelected, d
|
|
|
39
41
|
]);
|
|
40
42
|
const visibleItems = useMemo(() => maxResults === false ? matchingItems : matchingItems.slice(0, maxResults), [matchingItems, maxResults]);
|
|
41
43
|
const [initialSelectedItem] = useState(() => resolveOption(defaultSelected, items));
|
|
42
|
-
const
|
|
44
|
+
const defaultSelectedItem = resolveOption(defaultSelected, items);
|
|
45
|
+
const controlled = selected !== void 0;
|
|
46
|
+
const selectedItem = controlled ? resolveOption(selected, items) : void 0;
|
|
43
47
|
const commit = (changes, closeMenu) => {
|
|
44
48
|
const text = (changes.inputValue ?? "").trim();
|
|
45
49
|
if (text === "") return {
|
|
@@ -92,6 +96,10 @@ const Combobox = ({ allowCustom = false, children, className, defaultSelected, d
|
|
|
92
96
|
}
|
|
93
97
|
};
|
|
94
98
|
const downshift = useCombobox({
|
|
99
|
+
...!controlled && {
|
|
100
|
+
defaultInputValue: toString(defaultSelectedItem),
|
|
101
|
+
defaultSelectedItem
|
|
102
|
+
},
|
|
95
103
|
getItemId: (index) => visibleItems[index]?.id ?? `${uid}_item_${index}`,
|
|
96
104
|
id: uid,
|
|
97
105
|
initialSelectedItem,
|
|
@@ -133,7 +141,7 @@ const Combobox = ({ allowCustom = false, children, className, defaultSelected, d
|
|
|
133
141
|
text: selectionText,
|
|
134
142
|
value: selectionValue
|
|
135
143
|
});
|
|
136
|
-
const { inputValue, setInputValue } = downshift;
|
|
144
|
+
const { inputValue, reset, setInputValue } = downshift;
|
|
137
145
|
useEffect(() => {
|
|
138
146
|
const previous = previousSelection.current;
|
|
139
147
|
previousSelection.current = {
|
|
@@ -147,11 +155,18 @@ const Combobox = ({ allowCustom = false, children, className, defaultSelected, d
|
|
|
147
155
|
selectionValue,
|
|
148
156
|
setInputValue
|
|
149
157
|
]);
|
|
158
|
+
const inputRef = useRef(null);
|
|
159
|
+
useFormReset(inputRef, () => {
|
|
160
|
+
if (controlled) return;
|
|
161
|
+
reset();
|
|
162
|
+
setFilterText("");
|
|
163
|
+
});
|
|
150
164
|
return /* @__PURE__ */ jsx(ComboboxContext.Provider, {
|
|
151
165
|
value: {
|
|
152
166
|
disabled,
|
|
153
167
|
downshift,
|
|
154
168
|
error: hasError,
|
|
169
|
+
inputRef,
|
|
155
170
|
items: visibleItems,
|
|
156
171
|
matchCount: matchingItems.length,
|
|
157
172
|
size
|
|
@@ -177,7 +192,8 @@ const ComboboxInput = ({ error, name, size, ...props }) => {
|
|
|
177
192
|
const disabled = combobox.disabled || props.disabled;
|
|
178
193
|
const inputProps = combobox.downshift.getInputProps({
|
|
179
194
|
...props,
|
|
180
|
-
disabled
|
|
195
|
+
disabled,
|
|
196
|
+
ref: mergeRefs(combobox.inputRef, props.ref)
|
|
181
197
|
});
|
|
182
198
|
return /* @__PURE__ */ jsxs(Fragment, { children: [name && /* @__PURE__ */ jsx("input", {
|
|
183
199
|
disabled,
|
|
@@ -1,11 +1,14 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { getDescribedBy, getFieldError, useField } from "../Field/Field.context.js";
|
|
3
3
|
import { useDebounce } from "../../hooks/useDebounce.js";
|
|
4
|
+
import { useFormReset } from "../../hooks/useFormReset.js";
|
|
4
5
|
import clsx from "clsx";
|
|
5
6
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
6
|
-
import { useState } from "react";
|
|
7
|
+
import { useRef, useState } from "react";
|
|
8
|
+
import mergeRefs from "merge-refs";
|
|
7
9
|
//#region src/components/Textarea/Textarea.tsx
|
|
8
10
|
const DEBOUNCE_DELAY = 750;
|
|
11
|
+
const lengthOf = (text) => String(text ?? "").length;
|
|
9
12
|
const charCountMessage = (remaining) => {
|
|
10
13
|
return `You have ${Math.abs(remaining).toLocaleString()} ${Math.abs(remaining) === 1 ? "character" : "characters"} ${remaining < 0 ? "too many" : "remaining"}`;
|
|
11
14
|
};
|
|
@@ -27,19 +30,26 @@ const Textarea = ({ "aria-describedby": ariaDescribedBy, className, cols = 30, c
|
|
|
27
30
|
rows,
|
|
28
31
|
...props
|
|
29
32
|
};
|
|
30
|
-
const
|
|
33
|
+
const internalRef = useRef(null);
|
|
34
|
+
const controlled = props.value !== void 0;
|
|
35
|
+
const [typedLength, setTypedLength] = useState(() => lengthOf(props.defaultValue));
|
|
36
|
+
const length = controlled ? lengthOf(props.value) : typedLength;
|
|
37
|
+
const remaining = maxLength == null ? void 0 : maxLength - length;
|
|
31
38
|
const debouncedRemaining = useDebounce(remaining, DEBOUNCE_DELAY);
|
|
39
|
+
useFormReset(internalRef, () => {
|
|
40
|
+
if (!controlled) setTypedLength(lengthOf(props.defaultValue));
|
|
41
|
+
});
|
|
32
42
|
const showCounter = !disabled && counter && maxLength && remaining != null && debouncedRemaining != null;
|
|
33
43
|
const handleChange = (e) => {
|
|
34
44
|
userOnChange?.(e);
|
|
35
|
-
if (
|
|
45
|
+
if (!controlled && e.target) setTypedLength(e.target.value.length);
|
|
36
46
|
};
|
|
37
47
|
return /* @__PURE__ */ jsxs("div", {
|
|
38
48
|
className: "coop-textarea-wrapper",
|
|
39
49
|
children: [/* @__PURE__ */ jsx("textarea", {
|
|
40
50
|
...componentProps,
|
|
41
51
|
onChange: handleChange,
|
|
42
|
-
ref
|
|
52
|
+
ref: mergeRefs(internalRef, ref)
|
|
43
53
|
}), showCounter && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("small", {
|
|
44
54
|
"aria-hidden": "true",
|
|
45
55
|
className: "coop-textarea-counter",
|