@launchpad-ui/filter 0.6.10 → 0.6.12
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/index.es.js +164 -154
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +164 -154
- package/dist/index.js.map +1 -1
- package/package.json +9 -9
package/dist/index.es.js
CHANGED
@@ -43,28 +43,23 @@ const AppliedFilterButton = /* @__PURE__ */ forwardRef((props, ref) => {
|
|
43
43
|
"data-test-id": testId = "applied-filter-button"
|
44
44
|
} = props;
|
45
45
|
const hasDescription = Children.count(children) !== 0;
|
46
|
-
return /* @__PURE__ */ jsx("div", {
|
47
|
-
"
|
48
|
-
|
46
|
+
return /* @__PURE__ */ jsx("div", { "data-test-id": testId, children: /* @__PURE__ */ jsxs(
|
47
|
+
"button",
|
48
|
+
{
|
49
49
|
"aria-haspopup": true,
|
50
50
|
className: cx(styles.appliedButton, className),
|
51
51
|
ref,
|
52
52
|
onClick: onClickFilterButton,
|
53
|
-
children: [
|
54
|
-
className: styles.appliedName,
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
className: styles.appliedDescription,
|
59
|
-
"data-test-id": `${testId}-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
size: "small",
|
64
|
-
"data-test-id": `${testId}-expand`
|
65
|
-
})]
|
66
|
-
})
|
67
|
-
});
|
53
|
+
children: [
|
54
|
+
name2 && /* @__PURE__ */ jsxs("span", { className: styles.appliedName, "data-test-id": `${testId}-name`, children: [
|
55
|
+
name2,
|
56
|
+
hasDescription && ":"
|
57
|
+
] }),
|
58
|
+
hasDescription && /* @__PURE__ */ jsx("span", { className: styles.appliedDescription, "data-test-id": `${testId}-description`, children }),
|
59
|
+
/* @__PURE__ */ jsx(Icon, { name: "chevron-down", size: "small", "data-test-id": `${testId}-expand` })
|
60
|
+
]
|
61
|
+
}
|
62
|
+
) });
|
68
63
|
});
|
69
64
|
AppliedFilterButton.displayName = "AppliedFilterButton";
|
70
65
|
const FilterMenu = ({
|
@@ -83,51 +78,62 @@ const FilterMenu = ({
|
|
83
78
|
size,
|
84
79
|
"data-test-id": testId = "filter-menu"
|
85
80
|
}) => {
|
86
|
-
const filterOptions = isLoading ? [{
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
|
97
|
-
|
98
|
-
|
99
|
-
|
100
|
-
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
|
105
|
-
|
106
|
-
|
107
|
-
|
108
|
-
|
109
|
-
|
110
|
-
|
111
|
-
|
112
|
-
|
113
|
-
|
114
|
-
|
115
|
-
|
116
|
-
|
117
|
-
|
118
|
-
|
119
|
-
|
120
|
-
|
121
|
-
|
122
|
-
|
123
|
-
|
124
|
-
|
125
|
-
|
126
|
-
|
127
|
-
|
128
|
-
|
129
|
-
|
130
|
-
|
81
|
+
const filterOptions = isLoading ? [{ name: "loading...", value: "loading...", isDisabled: true }] : options;
|
82
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
83
|
+
onClearFilter && /* @__PURE__ */ jsx(
|
84
|
+
Button,
|
85
|
+
{
|
86
|
+
tabIndex: 0,
|
87
|
+
className: styles.filterClearButton,
|
88
|
+
onClick: onClearFilter,
|
89
|
+
kind: "link",
|
90
|
+
"data-test-id": "clear-filter-button",
|
91
|
+
children: "CLEAR FILTER"
|
92
|
+
}
|
93
|
+
),
|
94
|
+
/* @__PURE__ */ jsxs(
|
95
|
+
Menu,
|
96
|
+
{
|
97
|
+
enableVirtualization,
|
98
|
+
size,
|
99
|
+
"data-test-id": testId,
|
100
|
+
onSelect,
|
101
|
+
children: [
|
102
|
+
enableSearch && /* @__PURE__ */ jsx(
|
103
|
+
MenuSearch,
|
104
|
+
{
|
105
|
+
value: searchValue,
|
106
|
+
id: searchId,
|
107
|
+
placeholder: searchPlaceholder,
|
108
|
+
onChange: onSearchChange,
|
109
|
+
ariaLabel: searchAriaLabel
|
110
|
+
}
|
111
|
+
),
|
112
|
+
filterOptions.map((option, index) => {
|
113
|
+
if (option.isDivider) {
|
114
|
+
return /* @__PURE__ */ jsx(MenuDivider, {}, `divider-${index}`);
|
115
|
+
}
|
116
|
+
return /* @__PURE__ */ jsx(
|
117
|
+
MenuItem,
|
118
|
+
{
|
119
|
+
item: option,
|
120
|
+
disabled: option.isDisabled,
|
121
|
+
icon: option.isChecked ? /* @__PURE__ */ jsx(Icon, { name: "check" }) : void 0,
|
122
|
+
role: "menuitemradio",
|
123
|
+
"aria-checked": option.isChecked ? "true" : void 0,
|
124
|
+
nested: option.nested,
|
125
|
+
groupHeader: option.groupHeader,
|
126
|
+
tooltip: option.isDisabled && disabledOptionTooltip ? disabledOptionTooltip : void 0,
|
127
|
+
tooltipPlacement: "right",
|
128
|
+
children: option.name
|
129
|
+
},
|
130
|
+
option.value
|
131
|
+
);
|
132
|
+
})
|
133
|
+
]
|
134
|
+
}
|
135
|
+
)
|
136
|
+
] });
|
131
137
|
};
|
132
138
|
const SEARCH_INPUT_THRESHOLD$1 = 4;
|
133
139
|
const AppliedFilter = ({
|
@@ -148,28 +154,31 @@ const AppliedFilter = ({
|
|
148
154
|
...props
|
149
155
|
}) => {
|
150
156
|
const enableSearch = onSearchChange && (!!searchValue || options.length > SEARCH_INPUT_THRESHOLD$1 || !isEmpty);
|
151
|
-
return /* @__PURE__ */ jsxs(Dropdown, {
|
152
|
-
|
153
|
-
|
154
|
-
|
155
|
-
|
156
|
-
|
157
|
-
|
158
|
-
|
159
|
-
|
160
|
-
|
161
|
-
|
162
|
-
|
163
|
-
|
164
|
-
|
165
|
-
|
166
|
-
|
167
|
-
|
168
|
-
|
169
|
-
|
170
|
-
|
171
|
-
|
172
|
-
|
157
|
+
return /* @__PURE__ */ jsxs(Dropdown, { targetClassName: className, placement: "bottom-start", enableArrow: false, ...props, children: [
|
158
|
+
/* @__PURE__ */ jsx(
|
159
|
+
AppliedFilterButton,
|
160
|
+
{
|
161
|
+
"data-test-id": testId,
|
162
|
+
name: name2,
|
163
|
+
onClickFilterButton,
|
164
|
+
children: description2
|
165
|
+
}
|
166
|
+
),
|
167
|
+
/* @__PURE__ */ jsx(
|
168
|
+
FilterMenu,
|
169
|
+
{
|
170
|
+
options,
|
171
|
+
searchValue,
|
172
|
+
searchPlaceholder,
|
173
|
+
enableSearch,
|
174
|
+
searchAriaLabel,
|
175
|
+
searchId,
|
176
|
+
onSearchChange,
|
177
|
+
onClearFilter,
|
178
|
+
isLoading
|
179
|
+
}
|
180
|
+
)
|
181
|
+
] });
|
173
182
|
};
|
174
183
|
const FilterButton = /* @__PURE__ */ forwardRef((props, ref) => {
|
175
184
|
const {
|
@@ -190,58 +199,47 @@ const FilterButton = /* @__PURE__ */ forwardRef((props, ref) => {
|
|
190
199
|
const nameId = useId();
|
191
200
|
const descriptionId = useId();
|
192
201
|
const hasDescription = Children.count(children) !== 0;
|
193
|
-
const nameElement = /* @__PURE__ */ jsxs("span", {
|
194
|
-
|
195
|
-
|
196
|
-
});
|
202
|
+
const nameElement = /* @__PURE__ */ jsxs("span", { className: styles.name, children: [
|
203
|
+
name2,
|
204
|
+
hasDescription && ":"
|
205
|
+
] });
|
197
206
|
const isDisabled = disabled;
|
198
207
|
const handleClick = (event) => {
|
199
208
|
if (isDisabled)
|
200
209
|
return event.preventDefault();
|
201
210
|
onClickFilterButton == null ? void 0 : onClickFilterButton();
|
202
211
|
};
|
203
|
-
return /* @__PURE__ */ jsxs("div", {
|
204
|
-
|
205
|
-
|
206
|
-
|
207
|
-
|
208
|
-
|
209
|
-
|
210
|
-
|
211
|
-
|
212
|
-
|
213
|
-
|
214
|
-
|
215
|
-
|
216
|
-
|
217
|
-
|
218
|
-
|
219
|
-
|
220
|
-
|
221
|
-
|
222
|
-
|
223
|
-
|
224
|
-
|
225
|
-
}), !isClearable2 && /* @__PURE__ */ jsx(Icon, {
|
226
|
-
name: "chevron-down",
|
227
|
-
size: "small"
|
228
|
-
})]
|
229
|
-
}), isClearable2 && /* @__PURE__ */ jsx(Tooltip, {
|
230
|
-
targetClassName: styles.clearTooltip,
|
231
|
-
content: clearTooltip2,
|
232
|
-
children: /* @__PURE__ */ jsx(IconButton, {
|
212
|
+
return /* @__PURE__ */ jsxs("div", { className: styles.buttonContainer, "data-test-id": testId, children: [
|
213
|
+
/* @__PURE__ */ jsxs(
|
214
|
+
"button",
|
215
|
+
{
|
216
|
+
...rest,
|
217
|
+
"aria-labelledby": `${nameId} ${hasDescription ? descriptionId : ""}`,
|
218
|
+
"aria-haspopup": true,
|
219
|
+
disabled: isDisabled,
|
220
|
+
"aria-disabled": isDisabled,
|
221
|
+
className: cx(styles.button, className, (isClearable2 || isSelected) && styles.isClearable),
|
222
|
+
ref,
|
223
|
+
onClick: handleClick,
|
224
|
+
children: [
|
225
|
+
hideName ? /* @__PURE__ */ jsx(VisuallyHidden, { id: nameId, children: nameElement }) : /* @__PURE__ */ jsx("span", { id: nameId, children: nameElement }),
|
226
|
+
hasDescription && /* @__PURE__ */ jsx("span", { id: descriptionId, className: styles.description, children }),
|
227
|
+
!isClearable2 && /* @__PURE__ */ jsx(Icon, { name: "chevron-down", size: "small" })
|
228
|
+
]
|
229
|
+
}
|
230
|
+
),
|
231
|
+
isClearable2 && /* @__PURE__ */ jsx(Tooltip, { targetClassName: styles.clearTooltip, content: clearTooltip2, children: /* @__PURE__ */ jsx(
|
232
|
+
IconButton,
|
233
|
+
{
|
233
234
|
"aria-label": ariaLabel,
|
234
235
|
className: styles.clear,
|
235
236
|
"data-test-id": "clear-filter-button",
|
236
|
-
icon: /* @__PURE__ */ jsx(Icon, {
|
237
|
-
name: "cancel",
|
238
|
-
size: "tiny"
|
239
|
-
}),
|
237
|
+
icon: /* @__PURE__ */ jsx(Icon, { name: "cancel", size: "tiny" }),
|
240
238
|
size: "small",
|
241
239
|
onClick: onClear
|
242
|
-
}
|
243
|
-
})
|
244
|
-
});
|
240
|
+
}
|
241
|
+
) })
|
242
|
+
] });
|
245
243
|
});
|
246
244
|
FilterButton.defaultProps = {
|
247
245
|
clearTooltip: "Clear filter"
|
@@ -279,35 +277,47 @@ const Filter = ({
|
|
279
277
|
event.preventDefault();
|
280
278
|
onClear == null ? void 0 : onClear();
|
281
279
|
};
|
282
|
-
return /* @__PURE__ */ jsxs(
|
283
|
-
|
284
|
-
|
285
|
-
|
286
|
-
...props,
|
287
|
-
children: [/* @__PURE__ */ jsx(FilterButton, {
|
288
|
-
isClearable: isClearable2,
|
289
|
-
onClear: handleClear,
|
290
|
-
name: name2,
|
291
|
-
hideName,
|
280
|
+
return /* @__PURE__ */ jsxs(
|
281
|
+
Dropdown,
|
282
|
+
{
|
283
|
+
targetTestId: testId,
|
292
284
|
disabled,
|
293
|
-
|
294
|
-
|
295
|
-
|
296
|
-
|
297
|
-
|
298
|
-
|
299
|
-
|
300
|
-
|
301
|
-
|
302
|
-
|
303
|
-
|
304
|
-
|
305
|
-
|
306
|
-
|
307
|
-
|
308
|
-
|
309
|
-
|
310
|
-
|
285
|
+
targetClassName: dropdownClasses,
|
286
|
+
...props,
|
287
|
+
children: [
|
288
|
+
/* @__PURE__ */ jsx(
|
289
|
+
FilterButton,
|
290
|
+
{
|
291
|
+
isClearable: isClearable2,
|
292
|
+
onClear: handleClear,
|
293
|
+
name: name2,
|
294
|
+
hideName,
|
295
|
+
disabled,
|
296
|
+
isSelected,
|
297
|
+
onClickFilterButton,
|
298
|
+
ariaLabel: clearAriaLabel,
|
299
|
+
children: description2
|
300
|
+
}
|
301
|
+
),
|
302
|
+
/* @__PURE__ */ jsx(
|
303
|
+
FilterMenu,
|
304
|
+
{
|
305
|
+
options,
|
306
|
+
searchId,
|
307
|
+
searchValue,
|
308
|
+
searchPlaceholder,
|
309
|
+
searchAriaLabel,
|
310
|
+
enableSearch,
|
311
|
+
onSearchChange,
|
312
|
+
isLoading,
|
313
|
+
disabledOptionTooltip,
|
314
|
+
size,
|
315
|
+
enableVirtualization
|
316
|
+
}
|
317
|
+
)
|
318
|
+
]
|
319
|
+
}
|
320
|
+
);
|
311
321
|
};
|
312
322
|
export {
|
313
323
|
AppliedFilter,
|
package/dist/index.es.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.es.js","sources":["../src/AppliedFilterButton.tsx","../src/FilterMenu.tsx","../src/AppliedFilter.tsx","../src/FilterButton.tsx","../src/Filter.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { Icon } from '@launchpad-ui/icons';\nimport { cx } from 'classix';\nimport { Children, forwardRef } from 'react';\n\nimport styles from './styles/Filter.module.css';\n\ntype AppliedFilterButtonProps = {\n name?: ReactNode;\n className?: string;\n children: ReactNode;\n onClickFilterButton?(): void;\n 'data-test-id'?: string;\n};\n\ntype Ref = HTMLButtonElement;\n\nconst AppliedFilterButton = forwardRef<Ref, AppliedFilterButtonProps>((props, ref) => {\n const {\n name,\n className,\n children,\n onClickFilterButton,\n 'data-test-id': testId = 'applied-filter-button',\n } = props;\n\n const hasDescription = Children.count(children) !== 0;\n\n return (\n <div data-test-id={testId}>\n <button\n aria-haspopup\n className={cx(styles.appliedButton, className)}\n ref={ref}\n onClick={onClickFilterButton}\n >\n {name && (\n <span className={styles.appliedName} data-test-id={`${testId}-name`}>\n {name}\n {hasDescription && ':'}\n </span>\n )}\n {hasDescription && (\n <span className={styles.appliedDescription} data-test-id={`${testId}-description`}>\n {children}\n </span>\n )}\n <Icon name=\"chevron-down\" size=\"small\" data-test-id={`${testId}-expand`} />\n </button>\n </div>\n );\n});\n\nAppliedFilterButton.displayName = 'AppliedFilterButton';\n\nexport type { AppliedFilterButtonProps };\nexport { AppliedFilterButton };\n","import type { MenuProps } from '@launchpad-ui/menu';\nimport type { ChangeEvent, ReactNode } from 'react';\n\nimport { Button } from '@launchpad-ui/button';\nimport { Icon } from '@launchpad-ui/icons';\nimport { Menu, MenuDivider, MenuItem, MenuSearch } from '@launchpad-ui/menu';\n\nimport styles from './styles/Filter.module.css';\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype FilterOption<T = any> = {\n name?: ReactNode;\n isDisabled?: boolean;\n isDivider?: boolean;\n isChecked?: boolean;\n value: T | null;\n projKey?: string;\n nested?: boolean;\n groupHeader?: boolean;\n};\n\ntype FilterMenuProps = Pick<MenuProps<string>, 'enableVirtualization' | 'size' | 'data-test-id'> & {\n options: FilterOption[];\n onClearFilter?(): void;\n enableSearch?: boolean;\n searchValue?: string;\n searchId?: string;\n searchPlaceholder?: string;\n searchAriaLabel?: string;\n onSearchChange?(event: ChangeEvent<HTMLInputElement>): void;\n onSelect?(): void;\n isLoading?: boolean;\n disabledOptionTooltip?: string;\n};\n\nconst FilterMenu = ({\n options,\n onClearFilter,\n enableSearch,\n searchValue,\n searchPlaceholder,\n searchAriaLabel,\n searchId,\n onSelect,\n onSearchChange,\n isLoading = false,\n disabledOptionTooltip,\n enableVirtualization,\n size,\n 'data-test-id': testId = 'filter-menu',\n}: FilterMenuProps) => {\n const filterOptions = isLoading\n ? [{ name: 'loading...', value: 'loading...', isDisabled: true }]\n : options;\n\n return (\n <>\n {onClearFilter && (\n <Button\n tabIndex={0}\n className={styles.filterClearButton}\n onClick={onClearFilter}\n kind=\"link\"\n data-test-id=\"clear-filter-button\"\n >\n CLEAR FILTER\n </Button>\n )}\n <Menu\n enableVirtualization={enableVirtualization}\n size={size}\n data-test-id={testId}\n onSelect={onSelect}\n >\n {enableSearch && (\n <MenuSearch\n value={searchValue}\n id={searchId}\n placeholder={searchPlaceholder}\n onChange={onSearchChange}\n ariaLabel={searchAriaLabel}\n />\n )}\n {filterOptions.map((option, index) => {\n if (option.isDivider) {\n return <MenuDivider key={`divider-${index}`} />;\n }\n return (\n <MenuItem\n item={option}\n disabled={option.isDisabled}\n icon={option.isChecked ? <Icon name=\"check\" /> : undefined}\n key={option.value}\n role=\"menuitemradio\"\n aria-checked={option.isChecked ? 'true' : undefined}\n nested={option.nested}\n groupHeader={option.groupHeader}\n tooltip={\n option.isDisabled && disabledOptionTooltip ? disabledOptionTooltip : undefined\n }\n tooltipPlacement=\"right\"\n >\n {option.name}\n </MenuItem>\n );\n })}\n </Menu>\n </>\n );\n};\n\nexport { FilterMenu };\nexport type { FilterOption, FilterMenuProps };\n","import type { FilterOption } from './FilterMenu';\nimport type { ChangeEvent, ReactNode } from 'react';\n\nimport { Dropdown } from '@launchpad-ui/dropdown';\n\nimport { AppliedFilterButton } from './AppliedFilterButton';\nimport { FilterMenu } from './FilterMenu';\n\nconst SEARCH_INPUT_THRESHOLD = 4;\n\ntype AppliedFilterProps = {\n searchValue?: string;\n onSearchChange?(event: ChangeEvent<HTMLInputElement>): void;\n onClearFilter?(): void;\n searchPlaceholder?: string;\n name?: ReactNode;\n description: ReactNode;\n options: FilterOption[];\n className?: string;\n onStateChange?({ isOpen }: { isOpen?: boolean }): void;\n onSelect?(item: FilterOption): void;\n isEmpty?: boolean;\n isLoading?: boolean;\n onClickFilterButton?(): void;\n searchAriaLabel?: string;\n searchId?: string;\n 'data-test-id'?: string;\n};\n\nconst AppliedFilter = ({\n searchValue,\n onSearchChange,\n searchPlaceholder,\n name,\n description,\n options,\n className,\n isEmpty,\n isLoading,\n onClickFilterButton,\n onClearFilter,\n searchAriaLabel,\n searchId,\n 'data-test-id': testId = 'applied-filter',\n ...props\n}: AppliedFilterProps) => {\n const enableSearch =\n onSearchChange && (!!searchValue || options.length > SEARCH_INPUT_THRESHOLD || !isEmpty);\n\n return (\n <Dropdown targetClassName={className} placement=\"bottom-start\" enableArrow={false} {...props}>\n <AppliedFilterButton\n data-test-id={testId}\n name={name}\n onClickFilterButton={onClickFilterButton}\n >\n {description}\n </AppliedFilterButton>\n <FilterMenu\n options={options}\n searchValue={searchValue}\n searchPlaceholder={searchPlaceholder}\n enableSearch={enableSearch}\n searchAriaLabel={searchAriaLabel}\n searchId={searchId}\n onSearchChange={onSearchChange}\n onClearFilter={onClearFilter}\n isLoading={isLoading}\n />\n </Dropdown>\n );\n};\n\nexport type { AppliedFilterProps };\nexport { AppliedFilter };\n","import type { ReactNode, SyntheticEvent, MouseEvent } from 'react';\n\nimport { IconButton } from '@launchpad-ui/button';\nimport { Icon } from '@launchpad-ui/icons';\nimport { Tooltip } from '@launchpad-ui/tooltip';\nimport { VisuallyHidden } from '@react-aria/visually-hidden';\nimport { cx } from 'classix';\nimport { Children, forwardRef, useId } from 'react';\n\nimport styles from './styles/Filter.module.css';\n\ntype FilterButtonProps = {\n name: ReactNode;\n hideName?: boolean;\n isClearable?: boolean;\n onClear?(event: SyntheticEvent): void;\n className?: string;\n isSelected?: boolean;\n clearTooltip?: string | JSX.Element;\n children?: ReactNode;\n disabled?: boolean;\n onClickFilterButton?(): void;\n 'data-test-id'?: string;\n ariaLabel?: string;\n};\n\ntype Ref = HTMLButtonElement;\n\nconst FilterButton = forwardRef<Ref, FilterButtonProps>((props, ref) => {\n const {\n children,\n name,\n hideName,\n isClearable,\n clearTooltip,\n onClear,\n disabled,\n isSelected,\n onClickFilterButton,\n className,\n 'data-test-id': testId = 'filter-button',\n ariaLabel = 'Clear filter',\n ...rest\n } = props;\n const nameId = useId();\n const descriptionId = useId();\n\n const hasDescription = Children.count(children) !== 0;\n\n const nameElement = (\n <span className={styles.name}>\n {name}\n {hasDescription && ':'}\n </span>\n );\n\n const isDisabled = disabled;\n\n const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n if (isDisabled) return event.preventDefault();\n onClickFilterButton?.();\n };\n\n return (\n <div className={styles.buttonContainer} data-test-id={testId}>\n <button\n {...rest}\n aria-labelledby={`${nameId} ${hasDescription ? descriptionId : ''}`}\n aria-haspopup\n disabled={isDisabled}\n aria-disabled={isDisabled}\n className={cx(styles.button, className, (isClearable || isSelected) && styles.isClearable)}\n ref={ref}\n onClick={handleClick}\n >\n {hideName ? (\n <VisuallyHidden id={nameId}>{nameElement}</VisuallyHidden>\n ) : (\n <span id={nameId}>{nameElement}</span>\n )}\n {hasDescription && (\n <span id={descriptionId} className={styles.description}>\n {children}\n </span>\n )}\n {!isClearable && <Icon name=\"chevron-down\" size=\"small\" />}\n </button>\n {isClearable && (\n <Tooltip targetClassName={styles.clearTooltip} content={clearTooltip}>\n <IconButton\n aria-label={ariaLabel}\n className={styles.clear}\n data-test-id=\"clear-filter-button\"\n icon={<Icon name=\"cancel\" size=\"tiny\" />}\n size=\"small\"\n onClick={onClear}\n />\n </Tooltip>\n )}\n </div>\n );\n});\n\nFilterButton.defaultProps = {\n clearTooltip: 'Clear filter',\n};\n\nFilterButton.displayName = 'FilterButton';\n\nexport { FilterButton };\nexport type { FilterButtonProps };\n","import type { FilterOption } from './FilterMenu';\nimport type { MenuProps } from '@launchpad-ui/menu';\nimport type { ChangeEvent, ReactNode, SyntheticEvent } from 'react';\n\nimport { Dropdown } from '@launchpad-ui/dropdown';\nimport { cx } from 'classix';\n\nimport { FilterButton } from './FilterButton';\nimport { FilterMenu } from './FilterMenu';\nimport styles from './styles/Filter.module.css';\n\nconst SEARCH_INPUT_THRESHOLD = 4;\n\ntype FilterProps = Pick<MenuProps<string>, 'size' | 'enableVirtualization'> & {\n searchValue?: string;\n onSearchChange?(event: ChangeEvent<HTMLInputElement>): void;\n searchPlaceholder?: string;\n searchAriaLabel?: string;\n name: ReactNode;\n hideName?: boolean;\n description: ReactNode;\n options: FilterOption[];\n isClearable?: boolean;\n onClear?(): void;\n className?: string;\n onStateChange?({ isOpen }: { isOpen?: boolean }): void;\n isSelected?: boolean;\n searchId?: string;\n onSelect?(item: FilterOption): void;\n isEmpty?: boolean;\n isLoading?: boolean;\n disabled?: boolean;\n onClickFilterButton?(): void;\n disabledOptionTooltip?: string;\n 'data-test-id'?: string;\n triggerTestId?: string;\n clearAriaLabel?: string;\n};\n\nconst Filter = ({\n searchValue,\n onSearchChange,\n searchPlaceholder,\n searchAriaLabel,\n name,\n hideName,\n description,\n options,\n isClearable,\n onClear,\n isSelected,\n className,\n isEmpty,\n searchId,\n isLoading,\n onClickFilterButton,\n disabledOptionTooltip,\n 'data-test-id': testId = 'filter',\n size,\n disabled,\n enableVirtualization,\n clearAriaLabel,\n ...props\n}: FilterProps) => {\n const enableSearch =\n onSearchChange && (!!searchValue || options.length > SEARCH_INPUT_THRESHOLD || !isEmpty);\n\n const dropdownClasses = cx(styles.filter, className);\n\n const handleClear = (event: SyntheticEvent) => {\n event.preventDefault();\n onClear?.();\n };\n\n return (\n <Dropdown\n targetTestId={testId}\n disabled={disabled}\n targetClassName={dropdownClasses}\n {...props}\n >\n <FilterButton\n isClearable={isClearable}\n onClear={handleClear}\n name={name}\n hideName={hideName}\n disabled={disabled}\n isSelected={isSelected}\n onClickFilterButton={onClickFilterButton}\n ariaLabel={clearAriaLabel}\n >\n {description}\n </FilterButton>\n <FilterMenu\n options={options}\n searchId={searchId}\n searchValue={searchValue}\n searchPlaceholder={searchPlaceholder}\n searchAriaLabel={searchAriaLabel}\n enableSearch={enableSearch}\n onSearchChange={onSearchChange}\n isLoading={isLoading}\n disabledOptionTooltip={disabledOptionTooltip}\n size={size}\n enableVirtualization={enableVirtualization}\n />\n </Dropdown>\n );\n};\n\nexport { Filter };\nexport type { FilterProps };\n"],"names":["name","SEARCH_INPUT_THRESHOLD","description","isClearable","clearTooltip"],"mappings":"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"}
|
1
|
+
{"version":3,"file":"index.es.js","sources":["../src/AppliedFilterButton.tsx","../src/FilterMenu.tsx","../src/AppliedFilter.tsx","../src/FilterButton.tsx","../src/Filter.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { Icon } from '@launchpad-ui/icons';\nimport { cx } from 'classix';\nimport { Children, forwardRef } from 'react';\n\nimport styles from './styles/Filter.module.css';\n\ntype AppliedFilterButtonProps = {\n name?: ReactNode;\n className?: string;\n children: ReactNode;\n onClickFilterButton?(): void;\n 'data-test-id'?: string;\n};\n\ntype Ref = HTMLButtonElement;\n\nconst AppliedFilterButton = forwardRef<Ref, AppliedFilterButtonProps>((props, ref) => {\n const {\n name,\n className,\n children,\n onClickFilterButton,\n 'data-test-id': testId = 'applied-filter-button',\n } = props;\n\n const hasDescription = Children.count(children) !== 0;\n\n return (\n <div data-test-id={testId}>\n <button\n aria-haspopup\n className={cx(styles.appliedButton, className)}\n ref={ref}\n onClick={onClickFilterButton}\n >\n {name && (\n <span className={styles.appliedName} data-test-id={`${testId}-name`}>\n {name}\n {hasDescription && ':'}\n </span>\n )}\n {hasDescription && (\n <span className={styles.appliedDescription} data-test-id={`${testId}-description`}>\n {children}\n </span>\n )}\n <Icon name=\"chevron-down\" size=\"small\" data-test-id={`${testId}-expand`} />\n </button>\n </div>\n );\n});\n\nAppliedFilterButton.displayName = 'AppliedFilterButton';\n\nexport type { AppliedFilterButtonProps };\nexport { AppliedFilterButton };\n","import type { MenuProps } from '@launchpad-ui/menu';\nimport type { ChangeEvent, ReactNode } from 'react';\n\nimport { Button } from '@launchpad-ui/button';\nimport { Icon } from '@launchpad-ui/icons';\nimport { Menu, MenuDivider, MenuItem, MenuSearch } from '@launchpad-ui/menu';\n\nimport styles from './styles/Filter.module.css';\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype FilterOption<T = any> = {\n name?: ReactNode;\n isDisabled?: boolean;\n isDivider?: boolean;\n isChecked?: boolean;\n value: T | null;\n projKey?: string;\n nested?: boolean;\n groupHeader?: boolean;\n};\n\ntype FilterMenuProps = Pick<MenuProps<string>, 'enableVirtualization' | 'size' | 'data-test-id'> & {\n options: FilterOption[];\n onClearFilter?(): void;\n enableSearch?: boolean;\n searchValue?: string;\n searchId?: string;\n searchPlaceholder?: string;\n searchAriaLabel?: string;\n onSearchChange?(event: ChangeEvent<HTMLInputElement>): void;\n onSelect?(): void;\n isLoading?: boolean;\n disabledOptionTooltip?: string;\n};\n\nconst FilterMenu = ({\n options,\n onClearFilter,\n enableSearch,\n searchValue,\n searchPlaceholder,\n searchAriaLabel,\n searchId,\n onSelect,\n onSearchChange,\n isLoading = false,\n disabledOptionTooltip,\n enableVirtualization,\n size,\n 'data-test-id': testId = 'filter-menu',\n}: FilterMenuProps) => {\n const filterOptions = isLoading\n ? [{ name: 'loading...', value: 'loading...', isDisabled: true }]\n : options;\n\n return (\n <>\n {onClearFilter && (\n <Button\n tabIndex={0}\n className={styles.filterClearButton}\n onClick={onClearFilter}\n kind=\"link\"\n data-test-id=\"clear-filter-button\"\n >\n CLEAR FILTER\n </Button>\n )}\n <Menu\n enableVirtualization={enableVirtualization}\n size={size}\n data-test-id={testId}\n onSelect={onSelect}\n >\n {enableSearch && (\n <MenuSearch\n value={searchValue}\n id={searchId}\n placeholder={searchPlaceholder}\n onChange={onSearchChange}\n ariaLabel={searchAriaLabel}\n />\n )}\n {filterOptions.map((option, index) => {\n if (option.isDivider) {\n return <MenuDivider key={`divider-${index}`} />;\n }\n return (\n <MenuItem\n item={option}\n disabled={option.isDisabled}\n icon={option.isChecked ? <Icon name=\"check\" /> : undefined}\n key={option.value}\n role=\"menuitemradio\"\n aria-checked={option.isChecked ? 'true' : undefined}\n nested={option.nested}\n groupHeader={option.groupHeader}\n tooltip={\n option.isDisabled && disabledOptionTooltip ? disabledOptionTooltip : undefined\n }\n tooltipPlacement=\"right\"\n >\n {option.name}\n </MenuItem>\n );\n })}\n </Menu>\n </>\n );\n};\n\nexport { FilterMenu };\nexport type { FilterOption, FilterMenuProps };\n","import type { FilterOption } from './FilterMenu';\nimport type { ChangeEvent, ReactNode } from 'react';\n\nimport { Dropdown } from '@launchpad-ui/dropdown';\n\nimport { AppliedFilterButton } from './AppliedFilterButton';\nimport { FilterMenu } from './FilterMenu';\n\nconst SEARCH_INPUT_THRESHOLD = 4;\n\ntype AppliedFilterProps = {\n searchValue?: string;\n onSearchChange?(event: ChangeEvent<HTMLInputElement>): void;\n onClearFilter?(): void;\n searchPlaceholder?: string;\n name?: ReactNode;\n description: ReactNode;\n options: FilterOption[];\n className?: string;\n onStateChange?({ isOpen }: { isOpen?: boolean }): void;\n onSelect?(item: FilterOption): void;\n isEmpty?: boolean;\n isLoading?: boolean;\n onClickFilterButton?(): void;\n searchAriaLabel?: string;\n searchId?: string;\n 'data-test-id'?: string;\n};\n\nconst AppliedFilter = ({\n searchValue,\n onSearchChange,\n searchPlaceholder,\n name,\n description,\n options,\n className,\n isEmpty,\n isLoading,\n onClickFilterButton,\n onClearFilter,\n searchAriaLabel,\n searchId,\n 'data-test-id': testId = 'applied-filter',\n ...props\n}: AppliedFilterProps) => {\n const enableSearch =\n onSearchChange && (!!searchValue || options.length > SEARCH_INPUT_THRESHOLD || !isEmpty);\n\n return (\n <Dropdown targetClassName={className} placement=\"bottom-start\" enableArrow={false} {...props}>\n <AppliedFilterButton\n data-test-id={testId}\n name={name}\n onClickFilterButton={onClickFilterButton}\n >\n {description}\n </AppliedFilterButton>\n <FilterMenu\n options={options}\n searchValue={searchValue}\n searchPlaceholder={searchPlaceholder}\n enableSearch={enableSearch}\n searchAriaLabel={searchAriaLabel}\n searchId={searchId}\n onSearchChange={onSearchChange}\n onClearFilter={onClearFilter}\n isLoading={isLoading}\n />\n </Dropdown>\n );\n};\n\nexport type { AppliedFilterProps };\nexport { AppliedFilter };\n","import type { ReactNode, SyntheticEvent, MouseEvent } from 'react';\n\nimport { IconButton } from '@launchpad-ui/button';\nimport { Icon } from '@launchpad-ui/icons';\nimport { Tooltip } from '@launchpad-ui/tooltip';\nimport { VisuallyHidden } from '@react-aria/visually-hidden';\nimport { cx } from 'classix';\nimport { Children, forwardRef, useId } from 'react';\n\nimport styles from './styles/Filter.module.css';\n\ntype FilterButtonProps = {\n name: ReactNode;\n hideName?: boolean;\n isClearable?: boolean;\n onClear?(event: SyntheticEvent): void;\n className?: string;\n isSelected?: boolean;\n clearTooltip?: string | JSX.Element;\n children?: ReactNode;\n disabled?: boolean;\n onClickFilterButton?(): void;\n 'data-test-id'?: string;\n ariaLabel?: string;\n};\n\ntype Ref = HTMLButtonElement;\n\nconst FilterButton = forwardRef<Ref, FilterButtonProps>((props, ref) => {\n const {\n children,\n name,\n hideName,\n isClearable,\n clearTooltip,\n onClear,\n disabled,\n isSelected,\n onClickFilterButton,\n className,\n 'data-test-id': testId = 'filter-button',\n ariaLabel = 'Clear filter',\n ...rest\n } = props;\n const nameId = useId();\n const descriptionId = useId();\n\n const hasDescription = Children.count(children) !== 0;\n\n const nameElement = (\n <span className={styles.name}>\n {name}\n {hasDescription && ':'}\n </span>\n );\n\n const isDisabled = disabled;\n\n const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n if (isDisabled) return event.preventDefault();\n onClickFilterButton?.();\n };\n\n return (\n <div className={styles.buttonContainer} data-test-id={testId}>\n <button\n {...rest}\n aria-labelledby={`${nameId} ${hasDescription ? descriptionId : ''}`}\n aria-haspopup\n disabled={isDisabled}\n aria-disabled={isDisabled}\n className={cx(styles.button, className, (isClearable || isSelected) && styles.isClearable)}\n ref={ref}\n onClick={handleClick}\n >\n {hideName ? (\n <VisuallyHidden id={nameId}>{nameElement}</VisuallyHidden>\n ) : (\n <span id={nameId}>{nameElement}</span>\n )}\n {hasDescription && (\n <span id={descriptionId} className={styles.description}>\n {children}\n </span>\n )}\n {!isClearable && <Icon name=\"chevron-down\" size=\"small\" />}\n </button>\n {isClearable && (\n <Tooltip targetClassName={styles.clearTooltip} content={clearTooltip}>\n <IconButton\n aria-label={ariaLabel}\n className={styles.clear}\n data-test-id=\"clear-filter-button\"\n icon={<Icon name=\"cancel\" size=\"tiny\" />}\n size=\"small\"\n onClick={onClear}\n />\n </Tooltip>\n )}\n </div>\n );\n});\n\nFilterButton.defaultProps = {\n clearTooltip: 'Clear filter',\n};\n\nFilterButton.displayName = 'FilterButton';\n\nexport { FilterButton };\nexport type { FilterButtonProps };\n","import type { FilterOption } from './FilterMenu';\nimport type { MenuProps } from '@launchpad-ui/menu';\nimport type { ChangeEvent, ReactNode, SyntheticEvent } from 'react';\n\nimport { Dropdown } from '@launchpad-ui/dropdown';\nimport { cx } from 'classix';\n\nimport { FilterButton } from './FilterButton';\nimport { FilterMenu } from './FilterMenu';\nimport styles from './styles/Filter.module.css';\n\nconst SEARCH_INPUT_THRESHOLD = 4;\n\ntype FilterProps = Pick<MenuProps<string>, 'size' | 'enableVirtualization'> & {\n searchValue?: string;\n onSearchChange?(event: ChangeEvent<HTMLInputElement>): void;\n searchPlaceholder?: string;\n searchAriaLabel?: string;\n name: ReactNode;\n hideName?: boolean;\n description: ReactNode;\n options: FilterOption[];\n isClearable?: boolean;\n onClear?(): void;\n className?: string;\n onStateChange?({ isOpen }: { isOpen?: boolean }): void;\n isSelected?: boolean;\n searchId?: string;\n onSelect?(item: FilterOption): void;\n isEmpty?: boolean;\n isLoading?: boolean;\n disabled?: boolean;\n onClickFilterButton?(): void;\n disabledOptionTooltip?: string;\n 'data-test-id'?: string;\n triggerTestId?: string;\n clearAriaLabel?: string;\n};\n\nconst Filter = ({\n searchValue,\n onSearchChange,\n searchPlaceholder,\n searchAriaLabel,\n name,\n hideName,\n description,\n options,\n isClearable,\n onClear,\n isSelected,\n className,\n isEmpty,\n searchId,\n isLoading,\n onClickFilterButton,\n disabledOptionTooltip,\n 'data-test-id': testId = 'filter',\n size,\n disabled,\n enableVirtualization,\n clearAriaLabel,\n ...props\n}: FilterProps) => {\n const enableSearch =\n onSearchChange && (!!searchValue || options.length > SEARCH_INPUT_THRESHOLD || !isEmpty);\n\n const dropdownClasses = cx(styles.filter, className);\n\n const handleClear = (event: SyntheticEvent) => {\n event.preventDefault();\n onClear?.();\n };\n\n return (\n <Dropdown\n targetTestId={testId}\n disabled={disabled}\n targetClassName={dropdownClasses}\n {...props}\n >\n <FilterButton\n isClearable={isClearable}\n onClear={handleClear}\n name={name}\n hideName={hideName}\n disabled={disabled}\n isSelected={isSelected}\n onClickFilterButton={onClickFilterButton}\n ariaLabel={clearAriaLabel}\n >\n {description}\n </FilterButton>\n <FilterMenu\n options={options}\n searchId={searchId}\n searchValue={searchValue}\n searchPlaceholder={searchPlaceholder}\n searchAriaLabel={searchAriaLabel}\n enableSearch={enableSearch}\n onSearchChange={onSearchChange}\n isLoading={isLoading}\n disabledOptionTooltip={disabledOptionTooltip}\n size={size}\n enableVirtualization={enableVirtualization}\n />\n </Dropdown>\n );\n};\n\nexport { Filter };\nexport type { FilterProps };\n"],"names":["name","SEARCH_INPUT_THRESHOLD","description","isClearable","clearTooltip"],"mappings":"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"}
|
package/dist/index.js
CHANGED
@@ -45,28 +45,23 @@ const AppliedFilterButton = /* @__PURE__ */ react.forwardRef((props, ref) => {
|
|
45
45
|
"data-test-id": testId = "applied-filter-button"
|
46
46
|
} = props;
|
47
47
|
const hasDescription = react.Children.count(children) !== 0;
|
48
|
-
return /* @__PURE__ */ jsxRuntime.jsx("div", {
|
49
|
-
"
|
50
|
-
|
48
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": testId, children: /* @__PURE__ */ jsxRuntime.jsxs(
|
49
|
+
"button",
|
50
|
+
{
|
51
51
|
"aria-haspopup": true,
|
52
52
|
className: classix.cx(styles.appliedButton, className),
|
53
53
|
ref,
|
54
54
|
onClick: onClickFilterButton,
|
55
|
-
children: [
|
56
|
-
className: styles.appliedName,
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
className: styles.appliedDescription,
|
61
|
-
"data-test-id": `${testId}-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
size: "small",
|
66
|
-
"data-test-id": `${testId}-expand`
|
67
|
-
})]
|
68
|
-
})
|
69
|
-
});
|
55
|
+
children: [
|
56
|
+
name2 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles.appliedName, "data-test-id": `${testId}-name`, children: [
|
57
|
+
name2,
|
58
|
+
hasDescription && ":"
|
59
|
+
] }),
|
60
|
+
hasDescription && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.appliedDescription, "data-test-id": `${testId}-description`, children }),
|
61
|
+
/* @__PURE__ */ jsxRuntime.jsx(icons.Icon, { name: "chevron-down", size: "small", "data-test-id": `${testId}-expand` })
|
62
|
+
]
|
63
|
+
}
|
64
|
+
) });
|
70
65
|
});
|
71
66
|
AppliedFilterButton.displayName = "AppliedFilterButton";
|
72
67
|
const FilterMenu = ({
|
@@ -85,51 +80,62 @@ const FilterMenu = ({
|
|
85
80
|
size,
|
86
81
|
"data-test-id": testId = "filter-menu"
|
87
82
|
}) => {
|
88
|
-
const filterOptions = isLoading ? [{
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
|
97
|
-
|
98
|
-
|
99
|
-
|
100
|
-
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
|
105
|
-
|
106
|
-
|
107
|
-
|
108
|
-
|
109
|
-
|
110
|
-
|
111
|
-
|
112
|
-
|
113
|
-
|
114
|
-
|
115
|
-
|
116
|
-
|
117
|
-
|
118
|
-
|
119
|
-
|
120
|
-
|
121
|
-
|
122
|
-
|
123
|
-
|
124
|
-
|
125
|
-
|
126
|
-
|
127
|
-
|
128
|
-
|
129
|
-
|
130
|
-
|
131
|
-
|
132
|
-
|
83
|
+
const filterOptions = isLoading ? [{ name: "loading...", value: "loading...", isDisabled: true }] : options;
|
84
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
85
|
+
onClearFilter && /* @__PURE__ */ jsxRuntime.jsx(
|
86
|
+
button$1.Button,
|
87
|
+
{
|
88
|
+
tabIndex: 0,
|
89
|
+
className: styles.filterClearButton,
|
90
|
+
onClick: onClearFilter,
|
91
|
+
kind: "link",
|
92
|
+
"data-test-id": "clear-filter-button",
|
93
|
+
children: "CLEAR FILTER"
|
94
|
+
}
|
95
|
+
),
|
96
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
97
|
+
menu.Menu,
|
98
|
+
{
|
99
|
+
enableVirtualization,
|
100
|
+
size,
|
101
|
+
"data-test-id": testId,
|
102
|
+
onSelect,
|
103
|
+
children: [
|
104
|
+
enableSearch && /* @__PURE__ */ jsxRuntime.jsx(
|
105
|
+
menu.MenuSearch,
|
106
|
+
{
|
107
|
+
value: searchValue,
|
108
|
+
id: searchId,
|
109
|
+
placeholder: searchPlaceholder,
|
110
|
+
onChange: onSearchChange,
|
111
|
+
ariaLabel: searchAriaLabel
|
112
|
+
}
|
113
|
+
),
|
114
|
+
filterOptions.map((option, index) => {
|
115
|
+
if (option.isDivider) {
|
116
|
+
return /* @__PURE__ */ jsxRuntime.jsx(menu.MenuDivider, {}, `divider-${index}`);
|
117
|
+
}
|
118
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
119
|
+
menu.MenuItem,
|
120
|
+
{
|
121
|
+
item: option,
|
122
|
+
disabled: option.isDisabled,
|
123
|
+
icon: option.isChecked ? /* @__PURE__ */ jsxRuntime.jsx(icons.Icon, { name: "check" }) : void 0,
|
124
|
+
role: "menuitemradio",
|
125
|
+
"aria-checked": option.isChecked ? "true" : void 0,
|
126
|
+
nested: option.nested,
|
127
|
+
groupHeader: option.groupHeader,
|
128
|
+
tooltip: option.isDisabled && disabledOptionTooltip ? disabledOptionTooltip : void 0,
|
129
|
+
tooltipPlacement: "right",
|
130
|
+
children: option.name
|
131
|
+
},
|
132
|
+
option.value
|
133
|
+
);
|
134
|
+
})
|
135
|
+
]
|
136
|
+
}
|
137
|
+
)
|
138
|
+
] });
|
133
139
|
};
|
134
140
|
const SEARCH_INPUT_THRESHOLD$1 = 4;
|
135
141
|
const AppliedFilter = ({
|
@@ -150,28 +156,31 @@ const AppliedFilter = ({
|
|
150
156
|
...props
|
151
157
|
}) => {
|
152
158
|
const enableSearch = onSearchChange && (!!searchValue || options.length > SEARCH_INPUT_THRESHOLD$1 || !isEmpty);
|
153
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(dropdown.Dropdown, {
|
154
|
-
|
155
|
-
|
156
|
-
|
157
|
-
|
158
|
-
|
159
|
-
|
160
|
-
|
161
|
-
|
162
|
-
|
163
|
-
|
164
|
-
|
165
|
-
|
166
|
-
|
167
|
-
|
168
|
-
|
169
|
-
|
170
|
-
|
171
|
-
|
172
|
-
|
173
|
-
|
174
|
-
|
159
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(dropdown.Dropdown, { targetClassName: className, placement: "bottom-start", enableArrow: false, ...props, children: [
|
160
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
161
|
+
AppliedFilterButton,
|
162
|
+
{
|
163
|
+
"data-test-id": testId,
|
164
|
+
name: name2,
|
165
|
+
onClickFilterButton,
|
166
|
+
children: description2
|
167
|
+
}
|
168
|
+
),
|
169
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
170
|
+
FilterMenu,
|
171
|
+
{
|
172
|
+
options,
|
173
|
+
searchValue,
|
174
|
+
searchPlaceholder,
|
175
|
+
enableSearch,
|
176
|
+
searchAriaLabel,
|
177
|
+
searchId,
|
178
|
+
onSearchChange,
|
179
|
+
onClearFilter,
|
180
|
+
isLoading
|
181
|
+
}
|
182
|
+
)
|
183
|
+
] });
|
175
184
|
};
|
176
185
|
const FilterButton = /* @__PURE__ */ react.forwardRef((props, ref) => {
|
177
186
|
const {
|
@@ -192,58 +201,47 @@ const FilterButton = /* @__PURE__ */ react.forwardRef((props, ref) => {
|
|
192
201
|
const nameId = react.useId();
|
193
202
|
const descriptionId = react.useId();
|
194
203
|
const hasDescription = react.Children.count(children) !== 0;
|
195
|
-
const nameElement = /* @__PURE__ */ jsxRuntime.jsxs("span", {
|
196
|
-
|
197
|
-
|
198
|
-
});
|
204
|
+
const nameElement = /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles.name, children: [
|
205
|
+
name2,
|
206
|
+
hasDescription && ":"
|
207
|
+
] });
|
199
208
|
const isDisabled = disabled;
|
200
209
|
const handleClick = (event) => {
|
201
210
|
if (isDisabled)
|
202
211
|
return event.preventDefault();
|
203
212
|
onClickFilterButton == null ? void 0 : onClickFilterButton();
|
204
213
|
};
|
205
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", {
|
206
|
-
|
207
|
-
|
208
|
-
|
209
|
-
|
210
|
-
|
211
|
-
|
212
|
-
|
213
|
-
|
214
|
-
|
215
|
-
|
216
|
-
|
217
|
-
|
218
|
-
|
219
|
-
|
220
|
-
|
221
|
-
|
222
|
-
|
223
|
-
|
224
|
-
|
225
|
-
|
226
|
-
|
227
|
-
}), !isClearable2 && /* @__PURE__ */ jsxRuntime.jsx(icons.Icon, {
|
228
|
-
name: "chevron-down",
|
229
|
-
size: "small"
|
230
|
-
})]
|
231
|
-
}), isClearable2 && /* @__PURE__ */ jsxRuntime.jsx(tooltip.Tooltip, {
|
232
|
-
targetClassName: styles.clearTooltip,
|
233
|
-
content: clearTooltip2,
|
234
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(button$1.IconButton, {
|
214
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.buttonContainer, "data-test-id": testId, children: [
|
215
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
216
|
+
"button",
|
217
|
+
{
|
218
|
+
...rest,
|
219
|
+
"aria-labelledby": `${nameId} ${hasDescription ? descriptionId : ""}`,
|
220
|
+
"aria-haspopup": true,
|
221
|
+
disabled: isDisabled,
|
222
|
+
"aria-disabled": isDisabled,
|
223
|
+
className: classix.cx(styles.button, className, (isClearable2 || isSelected) && styles.isClearable),
|
224
|
+
ref,
|
225
|
+
onClick: handleClick,
|
226
|
+
children: [
|
227
|
+
hideName ? /* @__PURE__ */ jsxRuntime.jsx(visuallyHidden.VisuallyHidden, { id: nameId, children: nameElement }) : /* @__PURE__ */ jsxRuntime.jsx("span", { id: nameId, children: nameElement }),
|
228
|
+
hasDescription && /* @__PURE__ */ jsxRuntime.jsx("span", { id: descriptionId, className: styles.description, children }),
|
229
|
+
!isClearable2 && /* @__PURE__ */ jsxRuntime.jsx(icons.Icon, { name: "chevron-down", size: "small" })
|
230
|
+
]
|
231
|
+
}
|
232
|
+
),
|
233
|
+
isClearable2 && /* @__PURE__ */ jsxRuntime.jsx(tooltip.Tooltip, { targetClassName: styles.clearTooltip, content: clearTooltip2, children: /* @__PURE__ */ jsxRuntime.jsx(
|
234
|
+
button$1.IconButton,
|
235
|
+
{
|
235
236
|
"aria-label": ariaLabel,
|
236
237
|
className: styles.clear,
|
237
238
|
"data-test-id": "clear-filter-button",
|
238
|
-
icon: /* @__PURE__ */ jsxRuntime.jsx(icons.Icon, {
|
239
|
-
name: "cancel",
|
240
|
-
size: "tiny"
|
241
|
-
}),
|
239
|
+
icon: /* @__PURE__ */ jsxRuntime.jsx(icons.Icon, { name: "cancel", size: "tiny" }),
|
242
240
|
size: "small",
|
243
241
|
onClick: onClear
|
244
|
-
}
|
245
|
-
})
|
246
|
-
});
|
242
|
+
}
|
243
|
+
) })
|
244
|
+
] });
|
247
245
|
});
|
248
246
|
FilterButton.defaultProps = {
|
249
247
|
clearTooltip: "Clear filter"
|
@@ -281,35 +279,47 @@ const Filter = ({
|
|
281
279
|
event.preventDefault();
|
282
280
|
onClear == null ? void 0 : onClear();
|
283
281
|
};
|
284
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
285
|
-
|
286
|
-
|
287
|
-
|
288
|
-
...props,
|
289
|
-
children: [/* @__PURE__ */ jsxRuntime.jsx(FilterButton, {
|
290
|
-
isClearable: isClearable2,
|
291
|
-
onClear: handleClear,
|
292
|
-
name: name2,
|
293
|
-
hideName,
|
282
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
283
|
+
dropdown.Dropdown,
|
284
|
+
{
|
285
|
+
targetTestId: testId,
|
294
286
|
disabled,
|
295
|
-
|
296
|
-
|
297
|
-
|
298
|
-
|
299
|
-
|
300
|
-
|
301
|
-
|
302
|
-
|
303
|
-
|
304
|
-
|
305
|
-
|
306
|
-
|
307
|
-
|
308
|
-
|
309
|
-
|
310
|
-
|
311
|
-
|
312
|
-
|
287
|
+
targetClassName: dropdownClasses,
|
288
|
+
...props,
|
289
|
+
children: [
|
290
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
291
|
+
FilterButton,
|
292
|
+
{
|
293
|
+
isClearable: isClearable2,
|
294
|
+
onClear: handleClear,
|
295
|
+
name: name2,
|
296
|
+
hideName,
|
297
|
+
disabled,
|
298
|
+
isSelected,
|
299
|
+
onClickFilterButton,
|
300
|
+
ariaLabel: clearAriaLabel,
|
301
|
+
children: description2
|
302
|
+
}
|
303
|
+
),
|
304
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
305
|
+
FilterMenu,
|
306
|
+
{
|
307
|
+
options,
|
308
|
+
searchId,
|
309
|
+
searchValue,
|
310
|
+
searchPlaceholder,
|
311
|
+
searchAriaLabel,
|
312
|
+
enableSearch,
|
313
|
+
onSearchChange,
|
314
|
+
isLoading,
|
315
|
+
disabledOptionTooltip,
|
316
|
+
size,
|
317
|
+
enableVirtualization
|
318
|
+
}
|
319
|
+
)
|
320
|
+
]
|
321
|
+
}
|
322
|
+
);
|
313
323
|
};
|
314
324
|
exports.AppliedFilter = AppliedFilter;
|
315
325
|
exports.Filter = Filter;
|
package/dist/index.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../src/AppliedFilterButton.tsx","../src/FilterMenu.tsx","../src/AppliedFilter.tsx","../src/FilterButton.tsx","../src/Filter.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { Icon } from '@launchpad-ui/icons';\nimport { cx } from 'classix';\nimport { Children, forwardRef } from 'react';\n\nimport styles from './styles/Filter.module.css';\n\ntype AppliedFilterButtonProps = {\n name?: ReactNode;\n className?: string;\n children: ReactNode;\n onClickFilterButton?(): void;\n 'data-test-id'?: string;\n};\n\ntype Ref = HTMLButtonElement;\n\nconst AppliedFilterButton = forwardRef<Ref, AppliedFilterButtonProps>((props, ref) => {\n const {\n name,\n className,\n children,\n onClickFilterButton,\n 'data-test-id': testId = 'applied-filter-button',\n } = props;\n\n const hasDescription = Children.count(children) !== 0;\n\n return (\n <div data-test-id={testId}>\n <button\n aria-haspopup\n className={cx(styles.appliedButton, className)}\n ref={ref}\n onClick={onClickFilterButton}\n >\n {name && (\n <span className={styles.appliedName} data-test-id={`${testId}-name`}>\n {name}\n {hasDescription && ':'}\n </span>\n )}\n {hasDescription && (\n <span className={styles.appliedDescription} data-test-id={`${testId}-description`}>\n {children}\n </span>\n )}\n <Icon name=\"chevron-down\" size=\"small\" data-test-id={`${testId}-expand`} />\n </button>\n </div>\n );\n});\n\nAppliedFilterButton.displayName = 'AppliedFilterButton';\n\nexport type { AppliedFilterButtonProps };\nexport { AppliedFilterButton };\n","import type { MenuProps } from '@launchpad-ui/menu';\nimport type { ChangeEvent, ReactNode } from 'react';\n\nimport { Button } from '@launchpad-ui/button';\nimport { Icon } from '@launchpad-ui/icons';\nimport { Menu, MenuDivider, MenuItem, MenuSearch } from '@launchpad-ui/menu';\n\nimport styles from './styles/Filter.module.css';\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype FilterOption<T = any> = {\n name?: ReactNode;\n isDisabled?: boolean;\n isDivider?: boolean;\n isChecked?: boolean;\n value: T | null;\n projKey?: string;\n nested?: boolean;\n groupHeader?: boolean;\n};\n\ntype FilterMenuProps = Pick<MenuProps<string>, 'enableVirtualization' | 'size' | 'data-test-id'> & {\n options: FilterOption[];\n onClearFilter?(): void;\n enableSearch?: boolean;\n searchValue?: string;\n searchId?: string;\n searchPlaceholder?: string;\n searchAriaLabel?: string;\n onSearchChange?(event: ChangeEvent<HTMLInputElement>): void;\n onSelect?(): void;\n isLoading?: boolean;\n disabledOptionTooltip?: string;\n};\n\nconst FilterMenu = ({\n options,\n onClearFilter,\n enableSearch,\n searchValue,\n searchPlaceholder,\n searchAriaLabel,\n searchId,\n onSelect,\n onSearchChange,\n isLoading = false,\n disabledOptionTooltip,\n enableVirtualization,\n size,\n 'data-test-id': testId = 'filter-menu',\n}: FilterMenuProps) => {\n const filterOptions = isLoading\n ? [{ name: 'loading...', value: 'loading...', isDisabled: true }]\n : options;\n\n return (\n <>\n {onClearFilter && (\n <Button\n tabIndex={0}\n className={styles.filterClearButton}\n onClick={onClearFilter}\n kind=\"link\"\n data-test-id=\"clear-filter-button\"\n >\n CLEAR FILTER\n </Button>\n )}\n <Menu\n enableVirtualization={enableVirtualization}\n size={size}\n data-test-id={testId}\n onSelect={onSelect}\n >\n {enableSearch && (\n <MenuSearch\n value={searchValue}\n id={searchId}\n placeholder={searchPlaceholder}\n onChange={onSearchChange}\n ariaLabel={searchAriaLabel}\n />\n )}\n {filterOptions.map((option, index) => {\n if (option.isDivider) {\n return <MenuDivider key={`divider-${index}`} />;\n }\n return (\n <MenuItem\n item={option}\n disabled={option.isDisabled}\n icon={option.isChecked ? <Icon name=\"check\" /> : undefined}\n key={option.value}\n role=\"menuitemradio\"\n aria-checked={option.isChecked ? 'true' : undefined}\n nested={option.nested}\n groupHeader={option.groupHeader}\n tooltip={\n option.isDisabled && disabledOptionTooltip ? disabledOptionTooltip : undefined\n }\n tooltipPlacement=\"right\"\n >\n {option.name}\n </MenuItem>\n );\n })}\n </Menu>\n </>\n );\n};\n\nexport { FilterMenu };\nexport type { FilterOption, FilterMenuProps };\n","import type { FilterOption } from './FilterMenu';\nimport type { ChangeEvent, ReactNode } from 'react';\n\nimport { Dropdown } from '@launchpad-ui/dropdown';\n\nimport { AppliedFilterButton } from './AppliedFilterButton';\nimport { FilterMenu } from './FilterMenu';\n\nconst SEARCH_INPUT_THRESHOLD = 4;\n\ntype AppliedFilterProps = {\n searchValue?: string;\n onSearchChange?(event: ChangeEvent<HTMLInputElement>): void;\n onClearFilter?(): void;\n searchPlaceholder?: string;\n name?: ReactNode;\n description: ReactNode;\n options: FilterOption[];\n className?: string;\n onStateChange?({ isOpen }: { isOpen?: boolean }): void;\n onSelect?(item: FilterOption): void;\n isEmpty?: boolean;\n isLoading?: boolean;\n onClickFilterButton?(): void;\n searchAriaLabel?: string;\n searchId?: string;\n 'data-test-id'?: string;\n};\n\nconst AppliedFilter = ({\n searchValue,\n onSearchChange,\n searchPlaceholder,\n name,\n description,\n options,\n className,\n isEmpty,\n isLoading,\n onClickFilterButton,\n onClearFilter,\n searchAriaLabel,\n searchId,\n 'data-test-id': testId = 'applied-filter',\n ...props\n}: AppliedFilterProps) => {\n const enableSearch =\n onSearchChange && (!!searchValue || options.length > SEARCH_INPUT_THRESHOLD || !isEmpty);\n\n return (\n <Dropdown targetClassName={className} placement=\"bottom-start\" enableArrow={false} {...props}>\n <AppliedFilterButton\n data-test-id={testId}\n name={name}\n onClickFilterButton={onClickFilterButton}\n >\n {description}\n </AppliedFilterButton>\n <FilterMenu\n options={options}\n searchValue={searchValue}\n searchPlaceholder={searchPlaceholder}\n enableSearch={enableSearch}\n searchAriaLabel={searchAriaLabel}\n searchId={searchId}\n onSearchChange={onSearchChange}\n onClearFilter={onClearFilter}\n isLoading={isLoading}\n />\n </Dropdown>\n );\n};\n\nexport type { AppliedFilterProps };\nexport { AppliedFilter };\n","import type { ReactNode, SyntheticEvent, MouseEvent } from 'react';\n\nimport { IconButton } from '@launchpad-ui/button';\nimport { Icon } from '@launchpad-ui/icons';\nimport { Tooltip } from '@launchpad-ui/tooltip';\nimport { VisuallyHidden } from '@react-aria/visually-hidden';\nimport { cx } from 'classix';\nimport { Children, forwardRef, useId } from 'react';\n\nimport styles from './styles/Filter.module.css';\n\ntype FilterButtonProps = {\n name: ReactNode;\n hideName?: boolean;\n isClearable?: boolean;\n onClear?(event: SyntheticEvent): void;\n className?: string;\n isSelected?: boolean;\n clearTooltip?: string | JSX.Element;\n children?: ReactNode;\n disabled?: boolean;\n onClickFilterButton?(): void;\n 'data-test-id'?: string;\n ariaLabel?: string;\n};\n\ntype Ref = HTMLButtonElement;\n\nconst FilterButton = forwardRef<Ref, FilterButtonProps>((props, ref) => {\n const {\n children,\n name,\n hideName,\n isClearable,\n clearTooltip,\n onClear,\n disabled,\n isSelected,\n onClickFilterButton,\n className,\n 'data-test-id': testId = 'filter-button',\n ariaLabel = 'Clear filter',\n ...rest\n } = props;\n const nameId = useId();\n const descriptionId = useId();\n\n const hasDescription = Children.count(children) !== 0;\n\n const nameElement = (\n <span className={styles.name}>\n {name}\n {hasDescription && ':'}\n </span>\n );\n\n const isDisabled = disabled;\n\n const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n if (isDisabled) return event.preventDefault();\n onClickFilterButton?.();\n };\n\n return (\n <div className={styles.buttonContainer} data-test-id={testId}>\n <button\n {...rest}\n aria-labelledby={`${nameId} ${hasDescription ? descriptionId : ''}`}\n aria-haspopup\n disabled={isDisabled}\n aria-disabled={isDisabled}\n className={cx(styles.button, className, (isClearable || isSelected) && styles.isClearable)}\n ref={ref}\n onClick={handleClick}\n >\n {hideName ? (\n <VisuallyHidden id={nameId}>{nameElement}</VisuallyHidden>\n ) : (\n <span id={nameId}>{nameElement}</span>\n )}\n {hasDescription && (\n <span id={descriptionId} className={styles.description}>\n {children}\n </span>\n )}\n {!isClearable && <Icon name=\"chevron-down\" size=\"small\" />}\n </button>\n {isClearable && (\n <Tooltip targetClassName={styles.clearTooltip} content={clearTooltip}>\n <IconButton\n aria-label={ariaLabel}\n className={styles.clear}\n data-test-id=\"clear-filter-button\"\n icon={<Icon name=\"cancel\" size=\"tiny\" />}\n size=\"small\"\n onClick={onClear}\n />\n </Tooltip>\n )}\n </div>\n );\n});\n\nFilterButton.defaultProps = {\n clearTooltip: 'Clear filter',\n};\n\nFilterButton.displayName = 'FilterButton';\n\nexport { FilterButton };\nexport type { FilterButtonProps };\n","import type { FilterOption } from './FilterMenu';\nimport type { MenuProps } from '@launchpad-ui/menu';\nimport type { ChangeEvent, ReactNode, SyntheticEvent } from 'react';\n\nimport { Dropdown } from '@launchpad-ui/dropdown';\nimport { cx } from 'classix';\n\nimport { FilterButton } from './FilterButton';\nimport { FilterMenu } from './FilterMenu';\nimport styles from './styles/Filter.module.css';\n\nconst SEARCH_INPUT_THRESHOLD = 4;\n\ntype FilterProps = Pick<MenuProps<string>, 'size' | 'enableVirtualization'> & {\n searchValue?: string;\n onSearchChange?(event: ChangeEvent<HTMLInputElement>): void;\n searchPlaceholder?: string;\n searchAriaLabel?: string;\n name: ReactNode;\n hideName?: boolean;\n description: ReactNode;\n options: FilterOption[];\n isClearable?: boolean;\n onClear?(): void;\n className?: string;\n onStateChange?({ isOpen }: { isOpen?: boolean }): void;\n isSelected?: boolean;\n searchId?: string;\n onSelect?(item: FilterOption): void;\n isEmpty?: boolean;\n isLoading?: boolean;\n disabled?: boolean;\n onClickFilterButton?(): void;\n disabledOptionTooltip?: string;\n 'data-test-id'?: string;\n triggerTestId?: string;\n clearAriaLabel?: string;\n};\n\nconst Filter = ({\n searchValue,\n onSearchChange,\n searchPlaceholder,\n searchAriaLabel,\n name,\n hideName,\n description,\n options,\n isClearable,\n onClear,\n isSelected,\n className,\n isEmpty,\n searchId,\n isLoading,\n onClickFilterButton,\n disabledOptionTooltip,\n 'data-test-id': testId = 'filter',\n size,\n disabled,\n enableVirtualization,\n clearAriaLabel,\n ...props\n}: FilterProps) => {\n const enableSearch =\n onSearchChange && (!!searchValue || options.length > SEARCH_INPUT_THRESHOLD || !isEmpty);\n\n const dropdownClasses = cx(styles.filter, className);\n\n const handleClear = (event: SyntheticEvent) => {\n event.preventDefault();\n onClear?.();\n };\n\n return (\n <Dropdown\n targetTestId={testId}\n disabled={disabled}\n targetClassName={dropdownClasses}\n {...props}\n >\n <FilterButton\n isClearable={isClearable}\n onClear={handleClear}\n name={name}\n hideName={hideName}\n disabled={disabled}\n isSelected={isSelected}\n onClickFilterButton={onClickFilterButton}\n ariaLabel={clearAriaLabel}\n >\n {description}\n </FilterButton>\n <FilterMenu\n options={options}\n searchId={searchId}\n searchValue={searchValue}\n searchPlaceholder={searchPlaceholder}\n searchAriaLabel={searchAriaLabel}\n enableSearch={enableSearch}\n onSearchChange={onSearchChange}\n isLoading={isLoading}\n disabledOptionTooltip={disabledOptionTooltip}\n size={size}\n enableVirtualization={enableVirtualization}\n />\n </Dropdown>\n );\n};\n\nexport { Filter };\nexport type { FilterProps };\n"],"names":["forwardRef","name","Children","jsx","jsxs","cx","Icon","Fragment","Button","Menu","MenuSearch","MenuDivider","MenuItem","SEARCH_INPUT_THRESHOLD","description","Dropdown","isClearable","clearTooltip","useId","VisuallyHidden","Tooltip","IconButton"],"mappings":"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"}
|
1
|
+
{"version":3,"file":"index.js","sources":["../src/AppliedFilterButton.tsx","../src/FilterMenu.tsx","../src/AppliedFilter.tsx","../src/FilterButton.tsx","../src/Filter.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { Icon } from '@launchpad-ui/icons';\nimport { cx } from 'classix';\nimport { Children, forwardRef } from 'react';\n\nimport styles from './styles/Filter.module.css';\n\ntype AppliedFilterButtonProps = {\n name?: ReactNode;\n className?: string;\n children: ReactNode;\n onClickFilterButton?(): void;\n 'data-test-id'?: string;\n};\n\ntype Ref = HTMLButtonElement;\n\nconst AppliedFilterButton = forwardRef<Ref, AppliedFilterButtonProps>((props, ref) => {\n const {\n name,\n className,\n children,\n onClickFilterButton,\n 'data-test-id': testId = 'applied-filter-button',\n } = props;\n\n const hasDescription = Children.count(children) !== 0;\n\n return (\n <div data-test-id={testId}>\n <button\n aria-haspopup\n className={cx(styles.appliedButton, className)}\n ref={ref}\n onClick={onClickFilterButton}\n >\n {name && (\n <span className={styles.appliedName} data-test-id={`${testId}-name`}>\n {name}\n {hasDescription && ':'}\n </span>\n )}\n {hasDescription && (\n <span className={styles.appliedDescription} data-test-id={`${testId}-description`}>\n {children}\n </span>\n )}\n <Icon name=\"chevron-down\" size=\"small\" data-test-id={`${testId}-expand`} />\n </button>\n </div>\n );\n});\n\nAppliedFilterButton.displayName = 'AppliedFilterButton';\n\nexport type { AppliedFilterButtonProps };\nexport { AppliedFilterButton };\n","import type { MenuProps } from '@launchpad-ui/menu';\nimport type { ChangeEvent, ReactNode } from 'react';\n\nimport { Button } from '@launchpad-ui/button';\nimport { Icon } from '@launchpad-ui/icons';\nimport { Menu, MenuDivider, MenuItem, MenuSearch } from '@launchpad-ui/menu';\n\nimport styles from './styles/Filter.module.css';\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype FilterOption<T = any> = {\n name?: ReactNode;\n isDisabled?: boolean;\n isDivider?: boolean;\n isChecked?: boolean;\n value: T | null;\n projKey?: string;\n nested?: boolean;\n groupHeader?: boolean;\n};\n\ntype FilterMenuProps = Pick<MenuProps<string>, 'enableVirtualization' | 'size' | 'data-test-id'> & {\n options: FilterOption[];\n onClearFilter?(): void;\n enableSearch?: boolean;\n searchValue?: string;\n searchId?: string;\n searchPlaceholder?: string;\n searchAriaLabel?: string;\n onSearchChange?(event: ChangeEvent<HTMLInputElement>): void;\n onSelect?(): void;\n isLoading?: boolean;\n disabledOptionTooltip?: string;\n};\n\nconst FilterMenu = ({\n options,\n onClearFilter,\n enableSearch,\n searchValue,\n searchPlaceholder,\n searchAriaLabel,\n searchId,\n onSelect,\n onSearchChange,\n isLoading = false,\n disabledOptionTooltip,\n enableVirtualization,\n size,\n 'data-test-id': testId = 'filter-menu',\n}: FilterMenuProps) => {\n const filterOptions = isLoading\n ? [{ name: 'loading...', value: 'loading...', isDisabled: true }]\n : options;\n\n return (\n <>\n {onClearFilter && (\n <Button\n tabIndex={0}\n className={styles.filterClearButton}\n onClick={onClearFilter}\n kind=\"link\"\n data-test-id=\"clear-filter-button\"\n >\n CLEAR FILTER\n </Button>\n )}\n <Menu\n enableVirtualization={enableVirtualization}\n size={size}\n data-test-id={testId}\n onSelect={onSelect}\n >\n {enableSearch && (\n <MenuSearch\n value={searchValue}\n id={searchId}\n placeholder={searchPlaceholder}\n onChange={onSearchChange}\n ariaLabel={searchAriaLabel}\n />\n )}\n {filterOptions.map((option, index) => {\n if (option.isDivider) {\n return <MenuDivider key={`divider-${index}`} />;\n }\n return (\n <MenuItem\n item={option}\n disabled={option.isDisabled}\n icon={option.isChecked ? <Icon name=\"check\" /> : undefined}\n key={option.value}\n role=\"menuitemradio\"\n aria-checked={option.isChecked ? 'true' : undefined}\n nested={option.nested}\n groupHeader={option.groupHeader}\n tooltip={\n option.isDisabled && disabledOptionTooltip ? disabledOptionTooltip : undefined\n }\n tooltipPlacement=\"right\"\n >\n {option.name}\n </MenuItem>\n );\n })}\n </Menu>\n </>\n );\n};\n\nexport { FilterMenu };\nexport type { FilterOption, FilterMenuProps };\n","import type { FilterOption } from './FilterMenu';\nimport type { ChangeEvent, ReactNode } from 'react';\n\nimport { Dropdown } from '@launchpad-ui/dropdown';\n\nimport { AppliedFilterButton } from './AppliedFilterButton';\nimport { FilterMenu } from './FilterMenu';\n\nconst SEARCH_INPUT_THRESHOLD = 4;\n\ntype AppliedFilterProps = {\n searchValue?: string;\n onSearchChange?(event: ChangeEvent<HTMLInputElement>): void;\n onClearFilter?(): void;\n searchPlaceholder?: string;\n name?: ReactNode;\n description: ReactNode;\n options: FilterOption[];\n className?: string;\n onStateChange?({ isOpen }: { isOpen?: boolean }): void;\n onSelect?(item: FilterOption): void;\n isEmpty?: boolean;\n isLoading?: boolean;\n onClickFilterButton?(): void;\n searchAriaLabel?: string;\n searchId?: string;\n 'data-test-id'?: string;\n};\n\nconst AppliedFilter = ({\n searchValue,\n onSearchChange,\n searchPlaceholder,\n name,\n description,\n options,\n className,\n isEmpty,\n isLoading,\n onClickFilterButton,\n onClearFilter,\n searchAriaLabel,\n searchId,\n 'data-test-id': testId = 'applied-filter',\n ...props\n}: AppliedFilterProps) => {\n const enableSearch =\n onSearchChange && (!!searchValue || options.length > SEARCH_INPUT_THRESHOLD || !isEmpty);\n\n return (\n <Dropdown targetClassName={className} placement=\"bottom-start\" enableArrow={false} {...props}>\n <AppliedFilterButton\n data-test-id={testId}\n name={name}\n onClickFilterButton={onClickFilterButton}\n >\n {description}\n </AppliedFilterButton>\n <FilterMenu\n options={options}\n searchValue={searchValue}\n searchPlaceholder={searchPlaceholder}\n enableSearch={enableSearch}\n searchAriaLabel={searchAriaLabel}\n searchId={searchId}\n onSearchChange={onSearchChange}\n onClearFilter={onClearFilter}\n isLoading={isLoading}\n />\n </Dropdown>\n );\n};\n\nexport type { AppliedFilterProps };\nexport { AppliedFilter };\n","import type { ReactNode, SyntheticEvent, MouseEvent } from 'react';\n\nimport { IconButton } from '@launchpad-ui/button';\nimport { Icon } from '@launchpad-ui/icons';\nimport { Tooltip } from '@launchpad-ui/tooltip';\nimport { VisuallyHidden } from '@react-aria/visually-hidden';\nimport { cx } from 'classix';\nimport { Children, forwardRef, useId } from 'react';\n\nimport styles from './styles/Filter.module.css';\n\ntype FilterButtonProps = {\n name: ReactNode;\n hideName?: boolean;\n isClearable?: boolean;\n onClear?(event: SyntheticEvent): void;\n className?: string;\n isSelected?: boolean;\n clearTooltip?: string | JSX.Element;\n children?: ReactNode;\n disabled?: boolean;\n onClickFilterButton?(): void;\n 'data-test-id'?: string;\n ariaLabel?: string;\n};\n\ntype Ref = HTMLButtonElement;\n\nconst FilterButton = forwardRef<Ref, FilterButtonProps>((props, ref) => {\n const {\n children,\n name,\n hideName,\n isClearable,\n clearTooltip,\n onClear,\n disabled,\n isSelected,\n onClickFilterButton,\n className,\n 'data-test-id': testId = 'filter-button',\n ariaLabel = 'Clear filter',\n ...rest\n } = props;\n const nameId = useId();\n const descriptionId = useId();\n\n const hasDescription = Children.count(children) !== 0;\n\n const nameElement = (\n <span className={styles.name}>\n {name}\n {hasDescription && ':'}\n </span>\n );\n\n const isDisabled = disabled;\n\n const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n if (isDisabled) return event.preventDefault();\n onClickFilterButton?.();\n };\n\n return (\n <div className={styles.buttonContainer} data-test-id={testId}>\n <button\n {...rest}\n aria-labelledby={`${nameId} ${hasDescription ? descriptionId : ''}`}\n aria-haspopup\n disabled={isDisabled}\n aria-disabled={isDisabled}\n className={cx(styles.button, className, (isClearable || isSelected) && styles.isClearable)}\n ref={ref}\n onClick={handleClick}\n >\n {hideName ? (\n <VisuallyHidden id={nameId}>{nameElement}</VisuallyHidden>\n ) : (\n <span id={nameId}>{nameElement}</span>\n )}\n {hasDescription && (\n <span id={descriptionId} className={styles.description}>\n {children}\n </span>\n )}\n {!isClearable && <Icon name=\"chevron-down\" size=\"small\" />}\n </button>\n {isClearable && (\n <Tooltip targetClassName={styles.clearTooltip} content={clearTooltip}>\n <IconButton\n aria-label={ariaLabel}\n className={styles.clear}\n data-test-id=\"clear-filter-button\"\n icon={<Icon name=\"cancel\" size=\"tiny\" />}\n size=\"small\"\n onClick={onClear}\n />\n </Tooltip>\n )}\n </div>\n );\n});\n\nFilterButton.defaultProps = {\n clearTooltip: 'Clear filter',\n};\n\nFilterButton.displayName = 'FilterButton';\n\nexport { FilterButton };\nexport type { FilterButtonProps };\n","import type { FilterOption } from './FilterMenu';\nimport type { MenuProps } from '@launchpad-ui/menu';\nimport type { ChangeEvent, ReactNode, SyntheticEvent } from 'react';\n\nimport { Dropdown } from '@launchpad-ui/dropdown';\nimport { cx } from 'classix';\n\nimport { FilterButton } from './FilterButton';\nimport { FilterMenu } from './FilterMenu';\nimport styles from './styles/Filter.module.css';\n\nconst SEARCH_INPUT_THRESHOLD = 4;\n\ntype FilterProps = Pick<MenuProps<string>, 'size' | 'enableVirtualization'> & {\n searchValue?: string;\n onSearchChange?(event: ChangeEvent<HTMLInputElement>): void;\n searchPlaceholder?: string;\n searchAriaLabel?: string;\n name: ReactNode;\n hideName?: boolean;\n description: ReactNode;\n options: FilterOption[];\n isClearable?: boolean;\n onClear?(): void;\n className?: string;\n onStateChange?({ isOpen }: { isOpen?: boolean }): void;\n isSelected?: boolean;\n searchId?: string;\n onSelect?(item: FilterOption): void;\n isEmpty?: boolean;\n isLoading?: boolean;\n disabled?: boolean;\n onClickFilterButton?(): void;\n disabledOptionTooltip?: string;\n 'data-test-id'?: string;\n triggerTestId?: string;\n clearAriaLabel?: string;\n};\n\nconst Filter = ({\n searchValue,\n onSearchChange,\n searchPlaceholder,\n searchAriaLabel,\n name,\n hideName,\n description,\n options,\n isClearable,\n onClear,\n isSelected,\n className,\n isEmpty,\n searchId,\n isLoading,\n onClickFilterButton,\n disabledOptionTooltip,\n 'data-test-id': testId = 'filter',\n size,\n disabled,\n enableVirtualization,\n clearAriaLabel,\n ...props\n}: FilterProps) => {\n const enableSearch =\n onSearchChange && (!!searchValue || options.length > SEARCH_INPUT_THRESHOLD || !isEmpty);\n\n const dropdownClasses = cx(styles.filter, className);\n\n const handleClear = (event: SyntheticEvent) => {\n event.preventDefault();\n onClear?.();\n };\n\n return (\n <Dropdown\n targetTestId={testId}\n disabled={disabled}\n targetClassName={dropdownClasses}\n {...props}\n >\n <FilterButton\n isClearable={isClearable}\n onClear={handleClear}\n name={name}\n hideName={hideName}\n disabled={disabled}\n isSelected={isSelected}\n onClickFilterButton={onClickFilterButton}\n ariaLabel={clearAriaLabel}\n >\n {description}\n </FilterButton>\n <FilterMenu\n options={options}\n searchId={searchId}\n searchValue={searchValue}\n searchPlaceholder={searchPlaceholder}\n searchAriaLabel={searchAriaLabel}\n enableSearch={enableSearch}\n onSearchChange={onSearchChange}\n isLoading={isLoading}\n disabledOptionTooltip={disabledOptionTooltip}\n size={size}\n enableVirtualization={enableVirtualization}\n />\n </Dropdown>\n );\n};\n\nexport { Filter };\nexport type { FilterProps };\n"],"names":["forwardRef","name","Children","jsx","jsxs","cx","Icon","Fragment","Button","Menu","MenuSearch","MenuDivider","MenuItem","SEARCH_INPUT_THRESHOLD","description","Dropdown","isClearable","clearTooltip","useId","VisuallyHidden","Tooltip","IconButton"],"mappings":"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"}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@launchpad-ui/filter",
|
3
|
-
"version": "0.6.
|
3
|
+
"version": "0.6.12",
|
4
4
|
"status": "beta",
|
5
5
|
"publishConfig": {
|
6
6
|
"access": "public"
|
@@ -26,14 +26,14 @@
|
|
26
26
|
},
|
27
27
|
"source": "src/index.ts",
|
28
28
|
"dependencies": {
|
29
|
-
"@react-aria/visually-hidden": "3.8.
|
29
|
+
"@react-aria/visually-hidden": "3.8.8",
|
30
30
|
"classix": "2.1.17",
|
31
|
-
"@launchpad-ui/button": "~0.11.
|
32
|
-
"@launchpad-ui/dropdown": "~0.6.
|
33
|
-
"@launchpad-ui/icons": "~0.14.
|
34
|
-
"@launchpad-ui/menu": "~0.12.
|
35
|
-
"@launchpad-ui/tokens": "~0.9.
|
36
|
-
"@launchpad-ui/tooltip": "~0.8.
|
31
|
+
"@launchpad-ui/button": "~0.11.10",
|
32
|
+
"@launchpad-ui/dropdown": "~0.6.86",
|
33
|
+
"@launchpad-ui/icons": "~0.14.10",
|
34
|
+
"@launchpad-ui/menu": "~0.12.12",
|
35
|
+
"@launchpad-ui/tokens": "~0.9.3",
|
36
|
+
"@launchpad-ui/tooltip": "~0.8.9"
|
37
37
|
},
|
38
38
|
"peerDependencies": {
|
39
39
|
"react": "18.2.0",
|
@@ -44,7 +44,7 @@
|
|
44
44
|
"react-dom": "18.2.0"
|
45
45
|
},
|
46
46
|
"scripts": {
|
47
|
-
"build": "vite build -c ../../vite.config.
|
47
|
+
"build": "vite build -c ../../vite.config.mts && tsc --project tsconfig.build.json",
|
48
48
|
"clean": "rm -rf dist",
|
49
49
|
"lint": "eslint '**/*.{ts,tsx,js}' && stylelint '**/*.css' --ignore-path ../../.stylelintignore",
|
50
50
|
"test": "vitest run --coverage"
|