@mrshmllw/smores-react 9.6.0-crumbs-seach-input-ui.2 → 9.6.0
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/IconStrict/IconStrict.d.ts +2 -2
- package/dist/IconStrict/IconStrict.js.map +1 -1
- package/dist/Modal/Modal.js +2 -2
- package/dist/Modal/Modal.js.map +1 -1
- package/dist/SearchInput/SearchInput.d.ts +1 -1
- package/dist/SearchInput/SearchInput.js +39 -19
- package/dist/SearchInput/SearchInput.js.map +1 -1
- package/dist/SearchInput/components/SearchOptions.d.ts +2 -1
- package/dist/SearchInput/components/SearchOptions.js +21 -25
- package/dist/SearchInput/components/SearchOptions.js.map +1 -1
- package/dist/Table/Table.d.ts +7 -29
- package/dist/Table/Table.js +7 -29
- package/dist/Table/Table.js.map +1 -1
- package/dist/Table/types.d.ts +20 -0
- package/package.json +7 -8
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { FC, FormEvent
|
|
1
|
+
import { ButtonHTMLAttributes, FC, FormEvent } from 'react';
|
|
2
2
|
import { Icons } from '../Icon/iconsList';
|
|
3
3
|
import { Color } from '../theme';
|
|
4
4
|
import { MarginProps } from '../utils/space';
|
|
@@ -18,5 +18,5 @@ export type IconStrictProps = {
|
|
|
18
18
|
handleClick?: (e: FormEvent<HTMLButtonElement>) => void;
|
|
19
19
|
/** rotation degrees */
|
|
20
20
|
rotate?: number;
|
|
21
|
-
} & MarginProps & Partial<
|
|
21
|
+
} & MarginProps & Partial<ButtonHTMLAttributes<HTMLButtonElement>>;
|
|
22
22
|
export declare const IconStrict: FC<IconStrictProps>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconStrict.js","sourceRoot":"","sources":["../../src/IconStrict/IconStrict.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"IconStrict.js","sourceRoot":"","sources":["../../src/IconStrict/IconStrict.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8C,MAAM,OAAO,CAAA;AAClE,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAG9B,OAAO,EAAS,KAAK,EAAE,MAAM,UAAU,CAAA;AACvC,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAA;AAsBzD,MAAM,SAAS,GAAG;IAChB,EAAE,EAAE;QACF,SAAS,EAAE,EAAE;QACb,OAAO,EAAE,EAAE;KACZ;IACD,EAAE,EAAE;QACF,SAAS,EAAE,EAAE;QACb,OAAO,EAAE,CAAC;KACX;IACD,EAAE,EAAE;QACF,SAAS,EAAE,EAAE;QACb,OAAO,EAAE,CAAC;KACX;IACD,EAAE,EAAE;QACF,SAAS,EAAE,EAAE;QACb,OAAO,EAAE,CAAC;KACX;CACF,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAwB,CAAC,EAC9C,EAAE,EACF,SAAS,GAAG,EAAE,EACd,IAAI,GAAG,EAAE,EACT,MAAM,EACN,SAAS,EACT,eAAe,EACf,MAAM,EACN,WAAW,EACX,KAAK,EACL,GAAG,UAAU,EACd,EAAE,EAAE;IACH,MAAM,QAAQ,GAAG,CAAC,CAAC,WAAW,CAAA;IAC9B,MAAM,YAAY,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;IAC3E,OAAO,CACL,oBAAC,aAAa,IACZ,EAAE,EAAE,EAAE,EACN,EAAE,EAAE,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,EAC/B,SAAS,EAAE,SAAS,WACb,IAAI,sBACO,eAAe,EACjC,OAAO,EAAE,WAAW,EACpB,KAAK,EAAE,YAAY,KACf,UAAU;QAEd,oBAAC,IAAI,IACH,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,eAAe,CAAC,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,EACxD,KAAK,EAAE,SAAS,EAChB,MAAM,EAAE,MAAM,GACd,CACY,CACjB,CAAA;AACH,CAAC,CAAA;AAQD,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAC9B,CAAC,EAAE,KAAK,EAAE,gBAAgB,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;eAEhC,gBAAgB,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC,KAAK,CAAC,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC,CAAC;;iBAEpD,KAAK;cACR,KAAK;;wBAEK,gBAAgB;IAClC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,gBAAgB,CAAC;IAChC,CAAC,CAAC,MAAM;cACA,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;;MAEvC,OAAO;IACT;;0BAGI,gBAAgB,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC,MACnE;;;KAGD;;MAEC,iBAAiB;GACpB,CACF,CAAA"}
|
package/dist/Modal/Modal.js
CHANGED
|
@@ -10,7 +10,7 @@ export const Modal = ({ title = '', children, rightPanel, showModal = false, han
|
|
|
10
10
|
const modalRef = useRef(null);
|
|
11
11
|
useBodyScrollLock({ node: modalRef.current, showModal });
|
|
12
12
|
return createPortal(React.createElement(Wrapper, { "$showModal": showModal, ref: modalRef },
|
|
13
|
-
React.createElement(Overlay, { onClick: () => closeOnOverlayClick && handleClick(), closeOnOverlayClick: closeOnOverlayClick }),
|
|
13
|
+
React.createElement(Overlay, { onClick: () => closeOnOverlayClick && handleClick(), "$closeOnOverlayClick": closeOnOverlayClick }),
|
|
14
14
|
React.createElement(Container, { "$drawer": drawer, "$width": width || '460px', className: containerClass },
|
|
15
15
|
React.createElement(Box, { flex: true, alignItems: "flex-start", justifyContent: "space-between", mb: "8px" },
|
|
16
16
|
React.createElement(TitleElements, { flex: true, direction: "column" },
|
|
@@ -34,7 +34,7 @@ const Wrapper = styled(Box)(({ $showModal }) => css `
|
|
|
34
34
|
const Overlay = styled.div `
|
|
35
35
|
position: fixed;
|
|
36
36
|
background: ${theme.colors.liquorice};
|
|
37
|
-
cursor: ${(props) => (props
|
|
37
|
+
cursor: ${(props) => (props.$closeOnOverlayClick ? 'pointer' : 'default')};
|
|
38
38
|
opacity: 0.4;
|
|
39
39
|
top: 0;
|
|
40
40
|
bottom: 0;
|
package/dist/Modal/Modal.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../src/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAiB,MAAM,EAAE,MAAM,OAAO,CAAA;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AACxC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAEhC,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAA;AA4B9D,MAAM,CAAC,MAAM,KAAK,GAAmB,CAAC,EACpC,KAAK,GAAG,EAAE,EACV,QAAQ,EACR,UAAU,EACV,SAAS,GAAG,KAAK,EACjB,WAAW,EACX,MAAM,GAAG,IAAI,EACb,KAAK,GAAG,IAAI,EACZ,KAAK,EACL,cAAc,EACd,eAAe,GAAG,QAAQ,CAAC,IAAI,EAC/B,mBAAmB,GAAG,IAAI,GAC3B,EAAE,EAAE;IACH,MAAM,QAAQ,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IAE7C,iBAAiB,CAAC,EAAE,IAAI,EAAE,QAAQ,CAAC,OAAO,EAAE,SAAS,EAAE,CAAC,CAAA;IAExD,OAAO,YAAY,CACjB,oBAAC,OAAO,kBAAa,SAAS,EAAE,GAAG,EAAE,QAAQ;QAC3C,oBAAC,OAAO,IACN,OAAO,EAAE,GAAG,EAAE,CAAC,mBAAmB,IAAI,WAAW,EAAE,
|
|
1
|
+
{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../src/Modal/Modal.tsx"],"names":[],"mappings":"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"}
|
|
@@ -18,7 +18,7 @@ export interface SearchInputProps extends CommonFieldProps {
|
|
|
18
18
|
/** optional callback to run when no results found */
|
|
19
19
|
onNotFound?: (searchTerm: string) => void;
|
|
20
20
|
/** optional Component to render when no results found */
|
|
21
|
-
notFoundComponent?: ReactNode;
|
|
21
|
+
notFoundComponent?: (searchTerm: string) => ReactNode;
|
|
22
22
|
/** optional boolean to show search icon */
|
|
23
23
|
showIcon?: boolean;
|
|
24
24
|
/** optional boolean to show a clear search button */
|
|
@@ -11,9 +11,18 @@ import { useUniqueId } from '../utils/id';
|
|
|
11
11
|
import { useControllableState } from '../utils/useControlledState';
|
|
12
12
|
import { SearchOptions } from './components/SearchOptions';
|
|
13
13
|
const defaultFuzzySearchOptions = {
|
|
14
|
-
keys: [
|
|
14
|
+
keys: [
|
|
15
|
+
{
|
|
16
|
+
name: 'label',
|
|
17
|
+
weight: 0.6,
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
name: 'tags',
|
|
21
|
+
weight: 0.4,
|
|
22
|
+
},
|
|
23
|
+
],
|
|
15
24
|
findAllMatches: true,
|
|
16
|
-
minMatchCharLength:
|
|
25
|
+
minMatchCharLength: 1,
|
|
17
26
|
location: 0,
|
|
18
27
|
threshold: 0.45,
|
|
19
28
|
distance: 55,
|
|
@@ -27,7 +36,7 @@ export const SearchInput = forwardRef(function SearchInput({ id: idProp, name =
|
|
|
27
36
|
stateProp: value,
|
|
28
37
|
});
|
|
29
38
|
const [searchQuery, setSearchQuery] = useState(null);
|
|
30
|
-
const [
|
|
39
|
+
const [highlightedIndex, setHighlightedIndex] = useState(-1);
|
|
31
40
|
useOnClickOutside({
|
|
32
41
|
ref: wrapperRef,
|
|
33
42
|
callback: () => setShowOptions(false),
|
|
@@ -47,12 +56,13 @@ export const SearchInput = forwardRef(function SearchInput({ id: idProp, name =
|
|
|
47
56
|
}
|
|
48
57
|
return searchList.filter(({ label }) => label.toLowerCase().includes(searchQuery.toLocaleLowerCase()));
|
|
49
58
|
}, [searchQuery, enableFuzzySearch, !!fuzzySearchOptions]);
|
|
59
|
+
const selectedValueLabel = searchList.find((option) => option.label === selectedValue || option.value === selectedValue)?.label;
|
|
50
60
|
const getDisplayedInputText = () => {
|
|
51
61
|
if (searchQuery !== null) {
|
|
52
62
|
return searchQuery;
|
|
53
63
|
}
|
|
54
64
|
if (selectedValue !== null) {
|
|
55
|
-
return
|
|
65
|
+
return selectedValueLabel || '';
|
|
56
66
|
}
|
|
57
67
|
return '';
|
|
58
68
|
};
|
|
@@ -60,21 +70,23 @@ export const SearchInput = forwardRef(function SearchInput({ id: idProp, name =
|
|
|
60
70
|
const displayedInputText = getDisplayedInputText();
|
|
61
71
|
const updateSearchQuery = (query) => {
|
|
62
72
|
setSearchQuery(query);
|
|
63
|
-
|
|
73
|
+
setHighlightedIndex(-1);
|
|
64
74
|
if (query === null) {
|
|
75
|
+
setSelectedValue(null);
|
|
65
76
|
setShowOptions(false);
|
|
66
77
|
}
|
|
67
78
|
else {
|
|
68
|
-
setShowOptions(
|
|
79
|
+
setShowOptions(true);
|
|
69
80
|
}
|
|
70
81
|
};
|
|
71
82
|
const handleClick = () => {
|
|
72
|
-
|
|
83
|
+
setShowOptions(true);
|
|
84
|
+
if (searchQuery !== null) {
|
|
73
85
|
updateSearchQuery(searchQuery);
|
|
74
86
|
setShowOptions(true);
|
|
75
87
|
}
|
|
76
88
|
else if (selectedValue !== null && searchQuery === null) {
|
|
77
|
-
setSearchQuery(
|
|
89
|
+
setSearchQuery(selectedValueLabel || null);
|
|
78
90
|
setShowOptions(true);
|
|
79
91
|
}
|
|
80
92
|
};
|
|
@@ -90,22 +102,30 @@ export const SearchInput = forwardRef(function SearchInput({ id: idProp, name =
|
|
|
90
102
|
const handleClearSearch = () => {
|
|
91
103
|
updateSearchQuery(null);
|
|
92
104
|
setSelectedValue(null);
|
|
105
|
+
onFound('');
|
|
93
106
|
};
|
|
94
107
|
const handleCaretClick = () => {
|
|
95
108
|
setShowOptions(!showOptions);
|
|
96
109
|
};
|
|
97
110
|
const handleKeyDown = (event) => {
|
|
98
|
-
if (event.key === '
|
|
111
|
+
if (event.key === 'Enter' && highlightedIndex !== -1) {
|
|
112
|
+
event.preventDefault();
|
|
113
|
+
const focusedItem = filteredList[highlightedIndex];
|
|
114
|
+
handleSelect(focusedItem);
|
|
115
|
+
}
|
|
116
|
+
else if (event.key === 'ArrowDown') {
|
|
99
117
|
event.preventDefault();
|
|
100
|
-
const nextIndex = (
|
|
101
|
-
|
|
118
|
+
const nextIndex = (highlightedIndex + 1) % filteredList.length;
|
|
119
|
+
setHighlightedIndex(nextIndex);
|
|
102
120
|
}
|
|
103
121
|
else if (event.key === 'ArrowUp') {
|
|
104
122
|
event.preventDefault();
|
|
105
|
-
const prevIndex = (
|
|
106
|
-
|
|
123
|
+
const prevIndex = (highlightedIndex - 1 + filteredList.length) % filteredList.length;
|
|
124
|
+
setHighlightedIndex(prevIndex);
|
|
107
125
|
}
|
|
108
126
|
};
|
|
127
|
+
const showClearSearchButton = !!clearSearch &&
|
|
128
|
+
((searchQuery !== null && searchQuery !== '') || selectedValue !== null);
|
|
109
129
|
return (React.createElement(Wrapper, { ref: wrapperRef },
|
|
110
130
|
React.createElement(Field, { className: className, renderAsTitle: renderAsTitle, htmlFor: id, ...otherProps },
|
|
111
131
|
React.createElement(Box, { flex: true, alignItems: "center", justifyContent: "flex-start" },
|
|
@@ -116,11 +136,11 @@ export const SearchInput = forwardRef(function SearchInput({ id: idProp, name =
|
|
|
116
136
|
}
|
|
117
137
|
onBlur?.(e);
|
|
118
138
|
} }),
|
|
119
|
-
React.createElement(Icons, { flex: true, alignItems: "center", gap: "8px", "$clearSearch":
|
|
120
|
-
|
|
139
|
+
React.createElement(Icons, { flex: true, alignItems: "center", gap: "8px", "$clearSearch": showClearSearchButton },
|
|
140
|
+
showClearSearchButton && (React.createElement(IconStrict, { type: "button", render: "plus", rotate: 45, iconColor: "marzipan", handleClick: handleClearSearch, size: 24 })),
|
|
121
141
|
React.createElement(Line, null),
|
|
122
|
-
React.createElement(IconStrict, { render: "caret", iconColor: "marzipan", rotate: showOptions ? 180 : 0, handleClick: handleCaretClick, size: 24 }))),
|
|
123
|
-
showOptions && (React.createElement(SearchOptions, { displayedList: filteredList, selectedValue: selectedValue,
|
|
142
|
+
React.createElement(IconStrict, { type: "button", render: "caret", iconColor: "marzipan", rotate: showOptions ? 180 : 0, handleClick: handleCaretClick, size: 24 }))),
|
|
143
|
+
showOptions && (React.createElement(SearchOptions, { displayedList: filteredList, selectedValue: selectedValue, highlightedIndex: highlightedIndex, setHighlightedIndex: setHighlightedIndex, onKeyDown: handleKeyDown, searchTerm: searchQuery || '', onSelect: handleSelect, positionRelative: resultsRelativePosition, resultsBorder: resultsBorder, onNotFound: onNotFound, notFoundComponent: notFoundComponent && notFoundComponent(searchQuery ?? '') })))));
|
|
124
144
|
});
|
|
125
145
|
const Wrapper = styled(Box) `
|
|
126
146
|
position: relative;
|
|
@@ -132,7 +152,7 @@ const Line = styled(Box) `
|
|
|
132
152
|
`;
|
|
133
153
|
export const Icons = styled(Box) `
|
|
134
154
|
position: relative;
|
|
135
|
-
right: ${({ $clearSearch }) => ($clearSearch ? '
|
|
136
|
-
margin-right: ${({ $clearSearch }) => ($clearSearch ? '-
|
|
155
|
+
right: ${({ $clearSearch }) => ($clearSearch ? '80px' : '48px')};
|
|
156
|
+
margin-right: ${({ $clearSearch }) => ($clearSearch ? '-80px' : '-48px')};
|
|
137
157
|
`;
|
|
138
158
|
//# sourceMappingURL=SearchInput.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchInput.js","sourceRoot":"","sources":["../../src/SearchInput/SearchInput.tsx"],"names":[],"mappings":"AAAA,OAAO,IAAsB,MAAM,SAAS,CAAA;AAC5C,OAAO,KAAK,EAAE,EAIZ,UAAU,EACV,OAAO,EACP,MAAM,EACN,QAAQ,GACT,MAAM,OAAO,CAAA;AACd,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAA;AAEvC,OAAO,EAAE,KAAK,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAA;AACzE,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAA;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAChC,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AACzC,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAA;AAClE,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AA6C1D,MAAM,yBAAyB,GAAG;IAChC,IAAI,EAAE,
|
|
1
|
+
{"version":3,"file":"SearchInput.js","sourceRoot":"","sources":["../../src/SearchInput/SearchInput.tsx"],"names":[],"mappings":"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"}
|
|
@@ -6,7 +6,8 @@ type Option = {
|
|
|
6
6
|
type SearchOptionsProps = {
|
|
7
7
|
displayedList: Array<Option>;
|
|
8
8
|
selectedValue: string | null;
|
|
9
|
-
|
|
9
|
+
highlightedIndex: number;
|
|
10
|
+
setHighlightedIndex: (arg: number) => void;
|
|
10
11
|
onSelect: (option: Option) => void;
|
|
11
12
|
onKeyDown: (e: {
|
|
12
13
|
key: string;
|
|
@@ -4,22 +4,29 @@ import { Box } from '../../Box';
|
|
|
4
4
|
import { Icon } from '../../Icon';
|
|
5
5
|
import { theme } from '../../theme';
|
|
6
6
|
import { EmptyResults } from './EmptyResults';
|
|
7
|
-
export const SearchOptions = ({ displayedList, selectedValue,
|
|
7
|
+
export const SearchOptions = ({ displayedList, selectedValue, highlightedIndex, setHighlightedIndex, onSelect, onKeyDown, positionRelative, resultsBorder, onNotFound, searchTerm, notFoundComponent, }) => {
|
|
8
8
|
const itemRefs = useRef([]);
|
|
9
9
|
useEffect(() => {
|
|
10
10
|
itemRefs.current = displayedList.map((_, i) => itemRefs.current[i] ?? createRef());
|
|
11
11
|
}, [displayedList.length]);
|
|
12
12
|
useEffect(() => {
|
|
13
|
-
const
|
|
14
|
-
if (
|
|
15
|
-
|
|
13
|
+
const focusedListItem = itemRefs?.current[highlightedIndex]?.current;
|
|
14
|
+
if (highlightedIndex >= 0 && focusedListItem) {
|
|
15
|
+
focusedListItem.scrollIntoView({
|
|
16
|
+
block: 'nearest',
|
|
17
|
+
inline: 'start',
|
|
18
|
+
});
|
|
16
19
|
}
|
|
17
|
-
}, [
|
|
20
|
+
}, [highlightedIndex]);
|
|
18
21
|
return (React.createElement(BoxWithPositionRelative, null,
|
|
19
22
|
React.createElement(StyledResultsContainer, { "$positionRelative": positionRelative },
|
|
20
23
|
React.createElement(ResultsList, { "$resultsBorder": resultsBorder, onKeyDown: onKeyDown }, displayedList.length ? (displayedList.map((el, i) => {
|
|
21
|
-
const isSelected = selectedValue === el.label;
|
|
22
|
-
return (React.createElement(ListButton, {
|
|
24
|
+
const isSelected = selectedValue === el.label || selectedValue === el.value;
|
|
25
|
+
return (React.createElement(ListButton, { key: el.label + '_list_item', "aria-label": el.label + '_list_item', ref: itemRefs.current[i], onClick: () => onSelect(el), "$isSelected": isSelected, "$showBg": highlightedIndex === i, onMouseEnter: () => {
|
|
26
|
+
setHighlightedIndex(i);
|
|
27
|
+
}, onFocus: () => {
|
|
28
|
+
setHighlightedIndex(i);
|
|
29
|
+
} },
|
|
23
30
|
el.label,
|
|
24
31
|
isSelected && (React.createElement(Icon, { render: "tick", size: 16, color: "marshmallowPink" }))));
|
|
25
32
|
})) : (React.createElement(EmptyResults, { onNotFound: onNotFound, searchTerm: searchTerm, notFoundComponent: notFoundComponent }))))));
|
|
@@ -57,39 +64,28 @@ const ResultsList = styled.ul `
|
|
|
57
64
|
font-size: 16px;
|
|
58
65
|
color: ${theme.colors.liquorice};
|
|
59
66
|
cursor: pointer;
|
|
60
|
-
|
|
61
|
-
&:hover {
|
|
62
|
-
background-color: ${theme.colors.mascarpone};
|
|
63
|
-
}
|
|
64
67
|
}
|
|
65
68
|
`;
|
|
66
|
-
const ListButton = styled.
|
|
69
|
+
const ListButton = styled.li `
|
|
67
70
|
display: flex;
|
|
68
71
|
justify-content: space-between;
|
|
69
|
-
padding: 16px 14px;
|
|
70
|
-
box-sizing: border-box;
|
|
71
|
-
font-size: 16px;
|
|
72
|
-
width: 100%;
|
|
73
|
-
color: ${theme.colors.liquorice};
|
|
74
|
-
cursor: pointer;
|
|
75
|
-
|
|
76
|
-
&:hover {
|
|
77
|
-
background-color: ${theme.colors.mascarpone};
|
|
78
|
-
}
|
|
79
72
|
|
|
80
73
|
&:focus {
|
|
81
74
|
outline: none;
|
|
82
|
-
background-color: ${theme.colors.mascarpone};
|
|
83
75
|
}
|
|
84
76
|
&:focus-visible {
|
|
85
77
|
outline: none;
|
|
86
|
-
background-color: ${theme.colors.mascarpone};
|
|
87
78
|
}
|
|
88
79
|
|
|
89
|
-
${({ $
|
|
80
|
+
${({ $showBg }) => $showBg &&
|
|
90
81
|
css `
|
|
91
82
|
background-color: ${theme.colors.mascarpone};
|
|
92
83
|
`}
|
|
84
|
+
|
|
85
|
+
${({ $isSelected }) => $isSelected &&
|
|
86
|
+
css `
|
|
87
|
+
background-color: ${theme.colors.custard};
|
|
88
|
+
`}
|
|
93
89
|
`;
|
|
94
90
|
const BoxWithPositionRelative = styled(Box) `
|
|
95
91
|
position: relative;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchOptions.js","sourceRoot":"","sources":["../../../src/SearchInput/components/SearchOptions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAiB,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAC1E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EAAE,GAAG,EAAE,MAAM,WAAW,CAAA;AAC/B,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAA;AACjC,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAA;AACnC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;
|
|
1
|
+
{"version":3,"file":"SearchOptions.js","sourceRoot":"","sources":["../../../src/SearchInput/components/SearchOptions.tsx"],"names":[],"mappings":"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"}
|
package/dist/Table/Table.d.ts
CHANGED
|
@@ -3,36 +3,14 @@ import { TableProps } from './types';
|
|
|
3
3
|
/**
|
|
4
4
|
* A table component that displays data with various features such as expandable rows, striped rows, and fixed headers.
|
|
5
5
|
*
|
|
6
|
-
* Caveats:
|
|
7
|
-
* - subRows should always have the same columns as the Parent table
|
|
8
|
-
* - stripedColor wont be applied to subRows or subTables
|
|
9
|
-
* - rowActions will always need an onClick
|
|
10
|
-
* -
|
|
11
|
-
* -
|
|
6
|
+
* ## Caveats:
|
|
7
|
+
* - `subRows` should always have the same columns as the Parent table
|
|
8
|
+
* - `stripedColor` wont be applied to `subRows` or `subTables`
|
|
9
|
+
* - `rowActions` will always need an `onClick`, this will be automatically passed onto the `ReactNode` you place & will be selectable
|
|
10
|
+
* - Rows will scale depending on the cell content size
|
|
11
|
+
* - Using `clickableRow` with clickable cells, ensure you use `e.stopPropagation` in your cells `onClick`
|
|
12
12
|
*
|
|
13
|
-
* Improvements:
|
|
13
|
+
* ## Improvements:
|
|
14
14
|
* - It would be nice if we expandable logic inside this component, e.g the presence of certain props would automatically add this
|
|
15
|
-
* -
|
|
16
|
-
*
|
|
17
|
-
* @template T - The type of data the table displays.
|
|
18
|
-
* @property {T[]} data - Array of data to be displayed in the table.
|
|
19
|
-
* @property {TableColumn<T>[]} columns - Array of columns to display in the table.
|
|
20
|
-
* @property {boolean} [hasKeyline=false] - If true, the table header will have a key line.
|
|
21
|
-
* @property {boolean} [fixedHeader=false] - If true, the table header will be fixed/sticky.
|
|
22
|
-
* @property {string} [headerHeight] - Sets the height of the header.
|
|
23
|
-
* @property {function(T): boolean} [expandable] - A function to determine if a row is expandable.
|
|
24
|
-
* @property {Color} [stripedColor] - If present, the table rows will have alternating colors.
|
|
25
|
-
* @property {Color} [headerColor='mascarpone'] - The color for the table header.
|
|
26
|
-
* @property {Color} [rowColor='custard'] - The default color for each table row.
|
|
27
|
-
* @property {Color} [rowBorderColor='oatmeal'] - The default color for each table row border.
|
|
28
|
-
* @property {ReactElement} [subTable] - A React element to show when a row is expanded.
|
|
29
|
-
* @property {Object} [subRows] - Settings for sub rows.
|
|
30
|
-
* @property {function(T): ReactElement} subRows.rows - Function that returns a React element for the sub row.
|
|
31
|
-
* @property {boolean} [subRows.showOnExpand=false] - If true, the sub rows will only be shown when the row is expanded.
|
|
32
|
-
* @property {RowAction<T>[]} [rowActions] - Array of actions that can be performed on each row.
|
|
33
|
-
* @property {function<T>: void} [clickableRow] - Function to apply to a row, to make the entire row clickable, useful for navigation.
|
|
34
|
-
* @property {string} [rowPadding] - The Y padding for each row.
|
|
35
|
-
* @property {string} [columnPadding] - The X padding for each row.
|
|
36
|
-
* @property {string} [noDataContent] - The text to show when there is no available data to map through.
|
|
37
15
|
*/
|
|
38
16
|
export declare const Table: <T extends object>({ columns, data, fixedHeader, hasKeyline, expandable, subTable, subRows, headerHeight, headerColor, rowColor, stripedColor, rowBorderColor, rowActions, clickableRow, rowPadding, columnPadding, noDataContent, }: TableProps<T>) => React.JSX.Element;
|
package/dist/Table/Table.js
CHANGED
|
@@ -6,37 +6,15 @@ import { StyledCell, StyledTable } from './components/commonComponents';
|
|
|
6
6
|
/**
|
|
7
7
|
* A table component that displays data with various features such as expandable rows, striped rows, and fixed headers.
|
|
8
8
|
*
|
|
9
|
-
* Caveats:
|
|
10
|
-
* - subRows should always have the same columns as the Parent table
|
|
11
|
-
* - stripedColor wont be applied to subRows or subTables
|
|
12
|
-
* - rowActions will always need an onClick
|
|
13
|
-
* -
|
|
14
|
-
* -
|
|
9
|
+
* ## Caveats:
|
|
10
|
+
* - `subRows` should always have the same columns as the Parent table
|
|
11
|
+
* - `stripedColor` wont be applied to `subRows` or `subTables`
|
|
12
|
+
* - `rowActions` will always need an `onClick`, this will be automatically passed onto the `ReactNode` you place & will be selectable
|
|
13
|
+
* - Rows will scale depending on the cell content size
|
|
14
|
+
* - Using `clickableRow` with clickable cells, ensure you use `e.stopPropagation` in your cells `onClick`
|
|
15
15
|
*
|
|
16
|
-
* Improvements:
|
|
16
|
+
* ## Improvements:
|
|
17
17
|
* - It would be nice if we expandable logic inside this component, e.g the presence of certain props would automatically add this
|
|
18
|
-
* -
|
|
19
|
-
*
|
|
20
|
-
* @template T - The type of data the table displays.
|
|
21
|
-
* @property {T[]} data - Array of data to be displayed in the table.
|
|
22
|
-
* @property {TableColumn<T>[]} columns - Array of columns to display in the table.
|
|
23
|
-
* @property {boolean} [hasKeyline=false] - If true, the table header will have a key line.
|
|
24
|
-
* @property {boolean} [fixedHeader=false] - If true, the table header will be fixed/sticky.
|
|
25
|
-
* @property {string} [headerHeight] - Sets the height of the header.
|
|
26
|
-
* @property {function(T): boolean} [expandable] - A function to determine if a row is expandable.
|
|
27
|
-
* @property {Color} [stripedColor] - If present, the table rows will have alternating colors.
|
|
28
|
-
* @property {Color} [headerColor='mascarpone'] - The color for the table header.
|
|
29
|
-
* @property {Color} [rowColor='custard'] - The default color for each table row.
|
|
30
|
-
* @property {Color} [rowBorderColor='oatmeal'] - The default color for each table row border.
|
|
31
|
-
* @property {ReactElement} [subTable] - A React element to show when a row is expanded.
|
|
32
|
-
* @property {Object} [subRows] - Settings for sub rows.
|
|
33
|
-
* @property {function(T): ReactElement} subRows.rows - Function that returns a React element for the sub row.
|
|
34
|
-
* @property {boolean} [subRows.showOnExpand=false] - If true, the sub rows will only be shown when the row is expanded.
|
|
35
|
-
* @property {RowAction<T>[]} [rowActions] - Array of actions that can be performed on each row.
|
|
36
|
-
* @property {function<T>: void} [clickableRow] - Function to apply to a row, to make the entire row clickable, useful for navigation.
|
|
37
|
-
* @property {string} [rowPadding] - The Y padding for each row.
|
|
38
|
-
* @property {string} [columnPadding] - The X padding for each row.
|
|
39
|
-
* @property {string} [noDataContent] - The text to show when there is no available data to map through.
|
|
40
18
|
*/
|
|
41
19
|
export const Table = ({ columns, data, fixedHeader = true, hasKeyline = false, expandable, subTable, subRows, headerHeight, headerColor = 'mascarpone', rowColor = 'custard', stripedColor, rowBorderColor = 'oatmeal', rowActions, clickableRow, rowPadding, columnPadding, noDataContent, }) => {
|
|
42
20
|
const showActionsCell = expandable || rowActions;
|
package/dist/Table/Table.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Table.js","sourceRoot":"","sources":["../../src/Table/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAChD,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAA;AAGvE
|
|
1
|
+
{"version":3,"file":"Table.js","sourceRoot":"","sources":["../../src/Table/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAChD,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAA;AAGvE;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,CAAmB,EACtC,OAAO,EACP,IAAI,EACJ,WAAW,GAAG,IAAI,EAClB,UAAU,GAAG,KAAK,EAClB,UAAU,EACV,QAAQ,EACR,OAAO,EACP,YAAY,EACZ,WAAW,GAAG,YAAY,EAC1B,QAAQ,GAAG,SAAS,EACpB,YAAY,EACZ,cAAc,GAAG,SAAS,EAC1B,UAAU,EACV,YAAY,EACZ,UAAU,EACV,aAAa,EACb,aAAa,GACC,EAAE,EAAE;IAClB,MAAM,eAAe,GAAG,UAAU,IAAI,UAAU,CAAA;IAChD,MAAM,aAAa,GAAG,eAAe,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAA;IAC3E,OAAO,CACL,oBAAC,WAAW;QACV;YACE,oBAAC,WAAW,IACV,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,UAAU,EACtB,aAAa,EAAE,aAAa,EAC5B,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,UAAU,GACtB,CACI;QACR;YACG,IAAI,CAAC,MAAM,KAAK,CAAC,IAAI,CACpB,oBAAC,UAAU,IACT,OAAO,EAAE,aAAa,iBACT,UAAU,oBACP,aAAa,IAE5B,aAAa,CAAC,CAAC,CAAC,CACf,aAAa,CACd,CAAC,CAAC,CAAC,CACF,oBAAC,IAAI,IAAC,KAAK,EAAC,QAAQ,wBAAyB,CAC9C,CACU,CACd;YACA,IAAI,CAAC,MAAM,KAAK,CAAC;gBAChB,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,QAAQ,EAAE,EAAE,CAAC,CAC1B,oBAAC,QAAQ,IACP,GAAG,EAAE,QAAQ,EACb,OAAO,EAAE,GAAG,EACZ,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,UAAU,EACtB,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,cAAc,EAAE,cAAc,EAC9B,UAAU,EAAE,UAAU,EACtB,aAAa,EAAE,aAAa,EAC5B,UAAU,EAAE,UAAU,EACtB,YAAY,EAAE,YAAY,GAC1B,CACH,CAAC,CACE,CACI,CACf,CAAA;AACH,CAAC,CAAA"}
|
package/dist/Table/types.d.ts
CHANGED
|
@@ -44,31 +44,51 @@ export interface TableColumn<T> {
|
|
|
44
44
|
hideOverflow?: boolean;
|
|
45
45
|
cell?: RowCellRenderer<T>;
|
|
46
46
|
}
|
|
47
|
+
/** @template T - The type of data the table displays. */
|
|
47
48
|
interface CommonTableProps<T> {
|
|
49
|
+
/** Array of columns to display in the table. */
|
|
48
50
|
columns: TableColumn<T>[];
|
|
51
|
+
/** Sets the height of the header. */
|
|
49
52
|
headerHeight?: string;
|
|
53
|
+
/** If true, the table header will be fixed/sticky. */
|
|
50
54
|
fixedHeader?: boolean;
|
|
55
|
+
/** If true, the table header will have a key line. */
|
|
51
56
|
hasKeyline?: boolean;
|
|
57
|
+
/** If present, the table rows will have alternating colors. */
|
|
52
58
|
stripedColor?: Color;
|
|
59
|
+
/** A function to determine if a row is expandable. */
|
|
53
60
|
expandable?: (rowData: T) => boolean;
|
|
61
|
+
/** The color for the table header. */
|
|
54
62
|
headerColor?: Color;
|
|
63
|
+
/** The default color for each table row. */
|
|
55
64
|
rowColor?: Color;
|
|
65
|
+
/** The default color for each table row border. */
|
|
56
66
|
rowBorderColor?: Color;
|
|
67
|
+
/** A React element to show when a row is expanded. */
|
|
57
68
|
subTable?: {
|
|
58
69
|
table: (rowData: T) => ReactElement;
|
|
59
70
|
showOnExpand?: (rowData: T) => boolean;
|
|
60
71
|
};
|
|
72
|
+
/** Settings for sub rows. */
|
|
61
73
|
subRows?: {
|
|
74
|
+
/** Function that returns a React element for the sub row. */
|
|
62
75
|
rows: (rowData: T) => ReactElement | ReactElement[];
|
|
76
|
+
/** If true, the sub rows will only be shown when the row is expanded. */
|
|
63
77
|
showOnExpand?: (rowData: T) => boolean;
|
|
64
78
|
};
|
|
79
|
+
/** Function to apply to a row, to make the entire row clickable, useful for navigation. */
|
|
65
80
|
clickableRow?: (rowData: T) => void;
|
|
81
|
+
/** Array of actions that can be performed on each row. */
|
|
66
82
|
rowActions?: RowActions<T>;
|
|
83
|
+
/** The Y padding for each row. */
|
|
67
84
|
rowPadding?: string;
|
|
85
|
+
/** The X padding for each row. */
|
|
68
86
|
columnPadding?: string;
|
|
69
87
|
}
|
|
70
88
|
export interface TableProps<T> extends CommonTableProps<T> {
|
|
89
|
+
/** Array of data to be displayed in the table. */
|
|
71
90
|
data: T[];
|
|
91
|
+
/** The text to show when there is no available data to map through. */
|
|
72
92
|
noDataContent?: ReactNode;
|
|
73
93
|
}
|
|
74
94
|
export interface TableRowProps<T> extends CommonTableProps<T> {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mrshmllw/smores-react",
|
|
3
|
-
"version": "9.6.0
|
|
3
|
+
"version": "9.6.0",
|
|
4
4
|
"main": "./dist/index.js",
|
|
5
5
|
"description": "Collection of React components used by Marshmallow Technology",
|
|
6
6
|
"keywords": [
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
"devDependencies": {
|
|
37
37
|
"@babel/core": "^7.20.12",
|
|
38
38
|
"@babel/eslint-parser": "^7.23.10",
|
|
39
|
-
"@babel/plugin-
|
|
39
|
+
"@babel/plugin-transform-class-properties": "^7.24.1",
|
|
40
40
|
"@babel/preset-env": "^7.20.2",
|
|
41
41
|
"@babel/preset-react": "^7.18.6",
|
|
42
42
|
"@babel/preset-typescript": "^7.18.6",
|
|
@@ -57,15 +57,14 @@
|
|
|
57
57
|
"@storybook/storybook-deployer": "^2.8.16",
|
|
58
58
|
"@storybook/test": "^8.0.10",
|
|
59
59
|
"@storybook/test-runner": "^0.18.0",
|
|
60
|
-
"@testing-library/react": "^
|
|
60
|
+
"@testing-library/react": "^15.0.7",
|
|
61
61
|
"@types/body-scroll-lock": "^3.1.0",
|
|
62
62
|
"@types/dompurify": "^3.0.5",
|
|
63
63
|
"@types/node": "^20.1.2",
|
|
64
64
|
"@types/react": "^18.0.24",
|
|
65
65
|
"@types/react-dom": "^18.0.8",
|
|
66
|
-
"@
|
|
67
|
-
"@typescript-eslint/
|
|
68
|
-
"@typescript-eslint/parser": "^6.2.0",
|
|
66
|
+
"@typescript-eslint/eslint-plugin": "^7.10.0",
|
|
67
|
+
"@typescript-eslint/parser": "^7.10.0",
|
|
69
68
|
"axe-playwright": "^2.0.1",
|
|
70
69
|
"conventional-changelog-conventionalcommits": "^7.0.2",
|
|
71
70
|
"eslint": "^8.57.0",
|
|
@@ -87,12 +86,12 @@
|
|
|
87
86
|
"vitest": "^1.2.2"
|
|
88
87
|
},
|
|
89
88
|
"dependencies": {
|
|
90
|
-
"@lexical/react": "^0.
|
|
89
|
+
"@lexical/react": "^0.15.0",
|
|
91
90
|
"body-scroll-lock": "^4.0.0-beta.0",
|
|
92
91
|
"date-fns": "^3.6.0",
|
|
93
92
|
"dompurify": "^3.0.9",
|
|
94
93
|
"fuse.js": "^7.0.0",
|
|
95
|
-
"lexical": "^0.
|
|
94
|
+
"lexical": "^0.15.0",
|
|
96
95
|
"polished": "^4.1.3"
|
|
97
96
|
},
|
|
98
97
|
"peerDependencies": {
|