@launchpad-ui/filter 0.1.2 → 0.2.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/index.es.js CHANGED
@@ -10,25 +10,41 @@ import { ExpandMore, IconSize } from "@launchpad-ui/icons";
10
10
  import cx from "clsx";
11
11
  import { Children, forwardRef } from "react";
12
12
  import "./styles/Filter.css";
13
+ import { jsx, jsxs } from "react/jsx-runtime";
13
14
  var AppliedFilterButton = forwardRef((props, ref) => {
14
15
  const { name, className, isSelected, children, onClickFilterButton } = props;
15
16
  const hasDescription = Children.count(children) !== 0;
16
- return /* @__PURE__ */ React.createElement("div", {
17
- className: "AppliedFilter-buttonContainer"
18
- }, /* @__PURE__ */ React.createElement("button", {
19
- "aria-haspopup": true,
20
- className: cx("AppliedFilter-button", {
21
- isSelected
22
- }, className),
23
- ref,
24
- onClick: onClickFilterButton
25
- }, name && /* @__PURE__ */ React.createElement("span", {
26
- className: "AppliedFilter-name"
27
- }, name, hasDescription && ":"), hasDescription && /* @__PURE__ */ React.createElement("span", {
28
- className: "AppliedFilter-description"
29
- }, children), /* @__PURE__ */ React.createElement(ExpandMore, {
30
- size: IconSize.SMALL
31
- })));
17
+ return /* @__PURE__ */ jsx("div", {
18
+ className: "AppliedFilter-buttonContainer",
19
+ children: /* @__PURE__ */ jsxs("button", {
20
+ "aria-haspopup": true,
21
+ className: cx(
22
+ "AppliedFilter-button",
23
+ {
24
+ isSelected
25
+ },
26
+ className
27
+ ),
28
+ ref,
29
+ onClick: onClickFilterButton,
30
+ children: [
31
+ name && /* @__PURE__ */ jsxs("span", {
32
+ className: "AppliedFilter-name",
33
+ children: [
34
+ name,
35
+ hasDescription && ":"
36
+ ]
37
+ }),
38
+ hasDescription && /* @__PURE__ */ jsx("span", {
39
+ className: "AppliedFilter-description",
40
+ children
41
+ }),
42
+ /* @__PURE__ */ jsx(ExpandMore, {
43
+ size: IconSize.SMALL
44
+ })
45
+ ]
46
+ })
47
+ });
32
48
  });
33
49
  AppliedFilterButton.displayName = "AppliedFilterButton";
34
50
 
@@ -36,6 +52,7 @@ AppliedFilterButton.displayName = "AppliedFilterButton";
36
52
  import { Button, ButtonKind } from "@launchpad-ui/button";
37
53
  import { Check } from "@launchpad-ui/icons";
38
54
  import { Menu, MenuDivider, MenuItem, MenuSearch } from "@launchpad-ui/menu";
55
+ import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
39
56
  var FilterMenu = ({
40
57
  options,
41
58
  onClearFilter,
@@ -51,42 +68,51 @@ var FilterMenu = ({
51
68
  size
52
69
  }) => {
53
70
  const filterOptions = isLoading ? [{ name: "loading...", value: "loading...", isDisabled: true }] : options;
54
- return /* @__PURE__ */ React.createElement(React.Fragment, null, onClearFilter && /* @__PURE__ */ React.createElement(Button, {
55
- tabIndex: 0,
56
- className: "Menu-clear",
57
- onClick: onClearFilter,
58
- kind: ButtonKind.LINK
59
- }, "CLEAR FILTER"), /* @__PURE__ */ React.createElement(Menu, {
60
- enableVirtualization,
61
- size,
62
- onSelect
63
- }, enableSearch && /* @__PURE__ */ React.createElement(MenuSearch, {
64
- value: searchValue,
65
- placeholder: searchPlaceholder,
66
- onChange: onSearchChange,
67
- ariaLabel: searchAriaLabel
68
- }), filterOptions.map((option, index) => {
69
- if (option.isDivider) {
70
- return /* @__PURE__ */ React.createElement(MenuDivider, {
71
- key: `divider-${index}`
72
- });
73
- }
74
- return /* @__PURE__ */ React.createElement(MenuItem, {
75
- item: option,
76
- disabled: option.isDisabled,
77
- icon: option.isChecked ? Check : null,
78
- key: option.value,
79
- role: "menuitemradio",
80
- "aria-checked": option.isChecked ? "true" : void 0,
81
- nested: option.nested,
82
- groupHeader: option.groupHeader,
83
- tooltip: option.isDisabled && disabledOptionTooltip ? disabledOptionTooltip : void 0,
84
- tooltipPlacement: "right"
85
- }, option.name);
86
- })));
71
+ return /* @__PURE__ */ jsxs2(Fragment, {
72
+ children: [
73
+ onClearFilter && /* @__PURE__ */ jsx2(Button, {
74
+ tabIndex: 0,
75
+ className: "Menu-clear",
76
+ onClick: onClearFilter,
77
+ kind: ButtonKind.LINK,
78
+ children: "CLEAR FILTER"
79
+ }),
80
+ /* @__PURE__ */ jsxs2(Menu, {
81
+ enableVirtualization,
82
+ size,
83
+ onSelect,
84
+ children: [
85
+ enableSearch && /* @__PURE__ */ jsx2(MenuSearch, {
86
+ value: searchValue,
87
+ placeholder: searchPlaceholder,
88
+ onChange: onSearchChange,
89
+ ariaLabel: searchAriaLabel
90
+ }),
91
+ filterOptions.map((option, index) => {
92
+ if (option.isDivider) {
93
+ return /* @__PURE__ */ jsx2(MenuDivider, {}, `divider-${index}`);
94
+ }
95
+ return /* @__PURE__ */ jsx2(MenuItem, {
96
+ item: option,
97
+ disabled: option.isDisabled,
98
+ icon: option.isChecked ? Check : null,
99
+ role: "menuitemradio",
100
+ "aria-checked": option.isChecked ? "true" : void 0,
101
+ nested: option.nested,
102
+ groupHeader: option.groupHeader,
103
+ tooltip: option.isDisabled && disabledOptionTooltip ? disabledOptionTooltip : void 0,
104
+ tooltipPlacement: "right",
105
+ children: option.name
106
+ }, option.value);
107
+ })
108
+ ]
109
+ })
110
+ ]
111
+ });
87
112
  };
88
113
 
89
114
  // src/AppliedFilter.tsx
115
+ import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
90
116
  var SEARCH_INPUT_THRESHOLD = 4;
91
117
  var AppliedFilter = ({
92
118
  searchValue,
@@ -105,24 +131,29 @@ var AppliedFilter = ({
105
131
  }) => {
106
132
  const enableSearch = onSearchChange && (!!searchValue || options.length > SEARCH_INPUT_THRESHOLD || !isEmpty);
107
133
  const dropdownClasses = cx2("Filter-target", className);
108
- return /* @__PURE__ */ React.createElement(Dropdown, {
134
+ return /* @__PURE__ */ jsxs3(Dropdown, {
109
135
  targetClassName: dropdownClasses,
110
136
  placement: "bottom-start",
111
137
  enableArrow: false,
112
- ...props
113
- }, /* @__PURE__ */ React.createElement(AppliedFilterButton, {
114
- name,
115
- onClickFilterButton
116
- }, description), /* @__PURE__ */ React.createElement(FilterMenu, {
117
- options,
118
- searchValue,
119
- searchPlaceholder,
120
- enableSearch,
121
- searchAriaLabel,
122
- onSearchChange,
123
- onClearFilter,
124
- isLoading
125
- }));
138
+ ...props,
139
+ children: [
140
+ /* @__PURE__ */ jsx3(AppliedFilterButton, {
141
+ name,
142
+ onClickFilterButton,
143
+ children: description
144
+ }),
145
+ /* @__PURE__ */ jsx3(FilterMenu, {
146
+ options,
147
+ searchValue,
148
+ searchPlaceholder,
149
+ enableSearch,
150
+ searchAriaLabel,
151
+ onSearchChange,
152
+ onClearFilter,
153
+ isLoading
154
+ })
155
+ ]
156
+ });
126
157
  };
127
158
 
128
159
  // src/Filter.tsx
@@ -138,6 +169,7 @@ import { VisuallyHidden } from "@react-aria/visually-hidden";
138
169
  import cx3 from "clsx";
139
170
  import { Children as Children2, forwardRef as forwardRef2 } from "react";
140
171
  import "./styles/Filter.css";
172
+ import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
141
173
  var FilterButton = forwardRef2((props, ref) => {
142
174
  const {
143
175
  children,
@@ -155,42 +187,59 @@ var FilterButton = forwardRef2((props, ref) => {
155
187
  const nameId = useId();
156
188
  const descriptionId = useId();
157
189
  const hasDescription = Children2.count(children) !== 0;
158
- const nameElement = /* @__PURE__ */ React.createElement("span", {
159
- className: "Filter-name"
160
- }, name, hasDescription && ":");
161
- return /* @__PURE__ */ React.createElement("div", {
190
+ const nameElement = /* @__PURE__ */ jsxs4("span", {
191
+ className: "Filter-name",
192
+ children: [
193
+ name,
194
+ hasDescription && ":"
195
+ ]
196
+ });
197
+ return /* @__PURE__ */ jsxs4("div", {
162
198
  className: "Filter-buttonContainer",
163
- "data-test-id": testId
164
- }, /* @__PURE__ */ React.createElement("button", {
165
- ...rest,
166
- "aria-labelledby": `${nameId} ${hasDescription ? descriptionId : ""}`,
167
- "aria-haspopup": true,
168
- className: cx3("Filter-button", className, {
169
- "is-clearable": isClearable || isSelected
170
- }),
171
- ref,
172
- onClick: onClickFilterButton
173
- }, hideName ? /* @__PURE__ */ React.createElement(VisuallyHidden, {
174
- id: nameId
175
- }, nameElement) : /* @__PURE__ */ React.createElement("span", {
176
- id: nameId
177
- }, nameElement), hasDescription && /* @__PURE__ */ React.createElement("span", {
178
- id: descriptionId,
179
- className: "Filter-description"
180
- }, children), !isClearable && /* @__PURE__ */ React.createElement(ExpandMore2, {
181
- size: IconSize2.SMALL
182
- })), isClearable && /* @__PURE__ */ React.createElement(Tooltip, {
183
- targetClassName: "Filter-clearTooltip",
184
- content: clearTooltip
185
- }, /* @__PURE__ */ React.createElement(Button2, {
186
- className: "Filter-clear",
187
- size: ButtonSize.SMALL,
188
- type: ButtonType.ICON,
189
- icon: /* @__PURE__ */ React.createElement(Close, {
190
- size: IconSize2.TINY
191
- }),
192
- onClick: onClear
193
- })));
199
+ "data-test-id": testId,
200
+ children: [
201
+ /* @__PURE__ */ jsxs4("button", {
202
+ ...rest,
203
+ "aria-labelledby": `${nameId} ${hasDescription ? descriptionId : ""}`,
204
+ "aria-haspopup": true,
205
+ className: cx3("Filter-button", className, {
206
+ "is-clearable": isClearable || isSelected
207
+ }),
208
+ ref,
209
+ onClick: onClickFilterButton,
210
+ children: [
211
+ hideName ? /* @__PURE__ */ jsx4(VisuallyHidden, {
212
+ id: nameId,
213
+ children: nameElement
214
+ }) : /* @__PURE__ */ jsx4("span", {
215
+ id: nameId,
216
+ children: nameElement
217
+ }),
218
+ hasDescription && /* @__PURE__ */ jsx4("span", {
219
+ id: descriptionId,
220
+ className: "Filter-description",
221
+ children
222
+ }),
223
+ !isClearable && /* @__PURE__ */ jsx4(ExpandMore2, {
224
+ size: IconSize2.SMALL
225
+ })
226
+ ]
227
+ }),
228
+ isClearable && /* @__PURE__ */ jsx4(Tooltip, {
229
+ targetClassName: "Filter-clearTooltip",
230
+ content: clearTooltip,
231
+ children: /* @__PURE__ */ jsx4(Button2, {
232
+ className: "Filter-clear",
233
+ size: ButtonSize.SMALL,
234
+ type: ButtonType.ICON,
235
+ icon: /* @__PURE__ */ jsx4(Close, {
236
+ size: IconSize2.TINY
237
+ }),
238
+ onClick: onClear
239
+ })
240
+ })
241
+ ]
242
+ });
194
243
  });
195
244
  FilterButton.defaultProps = {
196
245
  clearTooltip: "Clear filter"
@@ -198,6 +247,7 @@ FilterButton.defaultProps = {
198
247
  FilterButton.displayName = "FilterButton";
199
248
 
200
249
  // src/Filter.tsx
250
+ import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
201
251
  var SEARCH_INPUT_THRESHOLD2 = 4;
202
252
  var Filter = ({
203
253
  searchValue,
@@ -227,29 +277,34 @@ var Filter = ({
227
277
  event.preventDefault();
228
278
  onClear?.();
229
279
  };
230
- return /* @__PURE__ */ React.createElement(Dropdown2, {
280
+ return /* @__PURE__ */ jsxs5(Dropdown2, {
231
281
  targetClassName: dropdownClasses,
232
- ...props
233
- }, /* @__PURE__ */ React.createElement(FilterButton, {
234
- isClearable,
235
- onClear: handleClear,
236
- name,
237
- hideName,
238
- isSelected,
239
- onClickFilterButton,
240
- testId
241
- }, description), /* @__PURE__ */ React.createElement(FilterMenu, {
242
- options,
243
- searchValue,
244
- searchPlaceholder,
245
- searchAriaLabel,
246
- enableSearch,
247
- onSearchChange,
248
- isLoading,
249
- disabledOptionTooltip,
250
- size,
251
- enableVirtualization
252
- }));
282
+ ...props,
283
+ children: [
284
+ /* @__PURE__ */ jsx5(FilterButton, {
285
+ isClearable,
286
+ onClear: handleClear,
287
+ name,
288
+ hideName,
289
+ isSelected,
290
+ onClickFilterButton,
291
+ testId,
292
+ children: description
293
+ }),
294
+ /* @__PURE__ */ jsx5(FilterMenu, {
295
+ options,
296
+ searchValue,
297
+ searchPlaceholder,
298
+ searchAriaLabel,
299
+ enableSearch,
300
+ onSearchChange,
301
+ isLoading,
302
+ disabledOptionTooltip,
303
+ size,
304
+ enableVirtualization
305
+ })
306
+ ]
307
+ });
253
308
  };
254
309
  export {
255
310
  AppliedFilter,
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../../scripts/react-shim.js", "../src/AppliedFilter.tsx", "../src/AppliedFilterButton.tsx", "../src/FilterMenu.tsx", "../src/Filter.tsx", "../src/FilterButton.tsx"],
4
4
  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { FilterOption } from './FilterMenu';\nimport type { ReactNode } from 'react';\n\nimport { Dropdown } from '@launchpad-ui/dropdown';\nimport cx from 'clsx';\n\nimport { AppliedFilterButton } from './AppliedFilterButton';\nimport { FilterMenu } from './FilterMenu';\n\nconst SEARCH_INPUT_THRESHOLD = 4;\n\ntype AppliedFilterProps = {\n searchValue?: string;\n onSearchChange?(event: React.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 isSelected?: boolean;\n onSelect?(item: FilterOption): void;\n isEmpty?: boolean;\n isLoading?: boolean;\n onClickFilterButton?(): void;\n searchAriaLabel?: 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 ...props\n}: AppliedFilterProps) => {\n const enableSearch =\n onSearchChange && (!!searchValue || options.length > SEARCH_INPUT_THRESHOLD || !isEmpty);\n\n const dropdownClasses = cx('Filter-target', className);\n return (\n <Dropdown\n targetClassName={dropdownClasses}\n placement=\"bottom-start\"\n enableArrow={false}\n {...props}\n >\n <AppliedFilterButton name={name} onClickFilterButton={onClickFilterButton}>\n {description}\n </AppliedFilterButton>\n\n <FilterMenu\n options={options}\n searchValue={searchValue}\n searchPlaceholder={searchPlaceholder}\n enableSearch={enableSearch}\n searchAriaLabel={searchAriaLabel}\n onSearchChange={onSearchChange}\n onClearFilter={onClearFilter}\n isLoading={isLoading}\n />\n </Dropdown>\n );\n};\n\nexport type { AppliedFilterProps };\nexport { AppliedFilter };\n", "import type { ReactNode } from 'react';\n\nimport { ExpandMore, IconSize } from '@launchpad-ui/icons';\nimport cx from 'clsx';\nimport { Children, forwardRef } from 'react';\n\nimport './styles/Filter.css';\n\ntype AppliedFilterButtonProps = {\n name?: ReactNode;\n className?: string;\n isSelected?: boolean;\n children: ReactNode;\n onClickFilterButton?(): void;\n};\n\ntype Ref = HTMLButtonElement;\n\nconst AppliedFilterButton = forwardRef<Ref, AppliedFilterButtonProps>((props, ref) => {\n const { name, className, isSelected, children, onClickFilterButton } = props;\n\n const hasDescription = Children.count(children) !== 0;\n\n return (\n <div className=\"AppliedFilter-buttonContainer\">\n <button\n aria-haspopup\n className={cx(\n 'AppliedFilter-button',\n {\n isSelected,\n },\n className\n )}\n ref={ref}\n onClick={onClickFilterButton}\n >\n {name && (\n <span className=\"AppliedFilter-name\">\n {name}\n {hasDescription && ':'}\n </span>\n )}\n {hasDescription && <span className=\"AppliedFilter-description\">{children}</span>}\n <ExpandMore size={IconSize.SMALL} />\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 { ReactNode } from 'react';\n\nimport { Button, ButtonKind } from '@launchpad-ui/button';\nimport { Check } from '@launchpad-ui/icons';\nimport { Menu, MenuDivider, MenuItem, MenuSearch } from '@launchpad-ui/menu';\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'> & {\n options: FilterOption[];\n onClearFilter?(): void;\n enableSearch?: boolean;\n searchValue?: string;\n searchPlaceholder?: string;\n searchAriaLabel?: string;\n onSearchChange?(event: React.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 onSelect,\n onSearchChange,\n isLoading = false,\n disabledOptionTooltip,\n enableVirtualization,\n size,\n}: FilterMenuProps) => {\n const filterOptions = isLoading\n ? [{ name: 'loading...', value: 'loading...', isDisabled: true }]\n : options;\n\n return (\n <>\n {onClearFilter && (\n <Button tabIndex={0} className=\"Menu-clear\" onClick={onClearFilter} kind={ButtonKind.LINK}>\n CLEAR FILTER\n </Button>\n )}\n <Menu enableVirtualization={enableVirtualization} size={size} onSelect={onSelect}>\n {enableSearch && (\n <MenuSearch\n value={searchValue}\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 ? Check : null}\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 { MenuProps } from '@launchpad-ui/menu';\nimport type { ReactNode, SyntheticEvent } from 'react';\n\nimport { Dropdown } from '@launchpad-ui/dropdown';\nimport cx from 'clsx';\n\nimport { FilterButton } from './FilterButton';\nimport { FilterMenu } from './FilterMenu';\n\nconst SEARCH_INPUT_THRESHOLD = 4;\n\ntype FilterProps = Pick<MenuProps<string>, 'size' | 'enableVirtualization'> & {\n searchValue?: string;\n onSearchChange?(event: React.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 onSelect?(item: FilterOption): void;\n isEmpty?: boolean;\n isLoading?: boolean;\n onClickFilterButton?(): void;\n disabledOptionTooltip?: string;\n testId?: 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 isLoading,\n onClickFilterButton,\n disabledOptionTooltip,\n testId,\n size,\n enableVirtualization,\n ...props\n}: FilterProps) => {\n const enableSearch =\n onSearchChange && (!!searchValue || options.length > SEARCH_INPUT_THRESHOLD || !isEmpty);\n\n const dropdownClasses = cx('Filter', 'Filter-target', className);\n\n const handleClear = (event: SyntheticEvent) => {\n event.preventDefault();\n onClear?.();\n };\n\n return (\n <Dropdown targetClassName={dropdownClasses} {...props}>\n <FilterButton\n isClearable={isClearable}\n onClear={handleClear}\n name={name}\n hideName={hideName}\n isSelected={isSelected}\n onClickFilterButton={onClickFilterButton}\n testId={testId}\n >\n {description}\n </FilterButton>\n <FilterMenu\n options={options}\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", "import type { ReactNode, SyntheticEvent } from 'react';\n\nimport { Button, ButtonSize, ButtonType } from '@launchpad-ui/button';\nimport { Close, ExpandMore, IconSize } from '@launchpad-ui/icons';\nimport { Tooltip } from '@launchpad-ui/tooltip';\nimport { useId } from '@react-aria/utils';\nimport { VisuallyHidden } from '@react-aria/visually-hidden';\nimport cx from 'clsx';\nimport { Children, forwardRef } from 'react';\n\nimport './styles/Filter.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 onClickFilterButton?(): void;\n testId?: 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 isSelected,\n onClickFilterButton,\n className,\n testId,\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=\"Filter-name\">\n {name}\n {hasDescription && ':'}\n </span>\n );\n\n return (\n <div className=\"Filter-buttonContainer\" data-test-id={testId}>\n <button\n {...rest}\n aria-labelledby={`${nameId} ${hasDescription ? descriptionId : ''}`}\n aria-haspopup\n className={cx('Filter-button', className, {\n 'is-clearable': isClearable || isSelected,\n })}\n ref={ref}\n onClick={onClickFilterButton}\n >\n {hideName ? (\n <VisuallyHidden id={nameId}>{nameElement}</VisuallyHidden>\n ) : (\n <span id={nameId}>{nameElement}</span>\n )}\n {hasDescription && (\n <span id={descriptionId} className=\"Filter-description\">\n {children}\n </span>\n )}\n {!isClearable && <ExpandMore size={IconSize.SMALL} />}\n </button>\n {isClearable && (\n <Tooltip targetClassName=\"Filter-clearTooltip\" content={clearTooltip}>\n <Button\n className=\"Filter-clear\"\n size={ButtonSize.SMALL}\n type={ButtonType.ICON}\n icon={<Close size={IconSize.TINY} />}\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"],
5
- "mappings": "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",
6
- "names": []
5
+ "mappings": "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",
6
+ "names": ["cx", "jsx", "jsxs", "jsx", "jsxs", "cx", "Dropdown", "cx", "Button", "ExpandMore", "IconSize", "cx", "Children", "forwardRef", "jsx", "jsxs", "jsx", "jsxs", "SEARCH_INPUT_THRESHOLD", "cx", "Dropdown"]
7
7
  }
package/dist/index.js CHANGED
@@ -17,7 +17,10 @@ var __copyProps = (to, from, except, desc) => {
17
17
  }
18
18
  return to;
19
19
  };
20
- var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
20
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
21
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
22
+ mod
23
+ ));
21
24
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
22
25
 
23
26
  // src/index.ts
@@ -41,25 +44,41 @@ var import_icons = require("@launchpad-ui/icons");
41
44
  var import_clsx = __toESM(require("clsx"));
42
45
  var import_react = require("react");
43
46
  var import_Filter = require("./styles/Filter.css");
47
+ var import_jsx_runtime = require("react/jsx-runtime");
44
48
  var AppliedFilterButton = (0, import_react.forwardRef)((props, ref) => {
45
49
  const { name, className, isSelected, children, onClickFilterButton } = props;
46
50
  const hasDescription = import_react.Children.count(children) !== 0;
47
- return /* @__PURE__ */ React.createElement("div", {
48
- className: "AppliedFilter-buttonContainer"
49
- }, /* @__PURE__ */ React.createElement("button", {
50
- "aria-haspopup": true,
51
- className: (0, import_clsx.default)("AppliedFilter-button", {
52
- isSelected
53
- }, className),
54
- ref,
55
- onClick: onClickFilterButton
56
- }, name && /* @__PURE__ */ React.createElement("span", {
57
- className: "AppliedFilter-name"
58
- }, name, hasDescription && ":"), hasDescription && /* @__PURE__ */ React.createElement("span", {
59
- className: "AppliedFilter-description"
60
- }, children), /* @__PURE__ */ React.createElement(import_icons.ExpandMore, {
61
- size: import_icons.IconSize.SMALL
62
- })));
51
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
52
+ className: "AppliedFilter-buttonContainer",
53
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", {
54
+ "aria-haspopup": true,
55
+ className: (0, import_clsx.default)(
56
+ "AppliedFilter-button",
57
+ {
58
+ isSelected
59
+ },
60
+ className
61
+ ),
62
+ ref,
63
+ onClick: onClickFilterButton,
64
+ children: [
65
+ name && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
66
+ className: "AppliedFilter-name",
67
+ children: [
68
+ name,
69
+ hasDescription && ":"
70
+ ]
71
+ }),
72
+ hasDescription && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
73
+ className: "AppliedFilter-description",
74
+ children
75
+ }),
76
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.ExpandMore, {
77
+ size: import_icons.IconSize.SMALL
78
+ })
79
+ ]
80
+ })
81
+ });
63
82
  });
64
83
  AppliedFilterButton.displayName = "AppliedFilterButton";
65
84
 
@@ -67,6 +86,7 @@ AppliedFilterButton.displayName = "AppliedFilterButton";
67
86
  var import_button = require("@launchpad-ui/button");
68
87
  var import_icons2 = require("@launchpad-ui/icons");
69
88
  var import_menu = require("@launchpad-ui/menu");
89
+ var import_jsx_runtime = require("react/jsx-runtime");
70
90
  var FilterMenu = ({
71
91
  options,
72
92
  onClearFilter,
@@ -82,42 +102,51 @@ var FilterMenu = ({
82
102
  size
83
103
  }) => {
84
104
  const filterOptions = isLoading ? [{ name: "loading...", value: "loading...", isDisabled: true }] : options;
85
- return /* @__PURE__ */ React.createElement(React.Fragment, null, onClearFilter && /* @__PURE__ */ React.createElement(import_button.Button, {
86
- tabIndex: 0,
87
- className: "Menu-clear",
88
- onClick: onClearFilter,
89
- kind: import_button.ButtonKind.LINK
90
- }, "CLEAR FILTER"), /* @__PURE__ */ React.createElement(import_menu.Menu, {
91
- enableVirtualization,
92
- size,
93
- onSelect
94
- }, enableSearch && /* @__PURE__ */ React.createElement(import_menu.MenuSearch, {
95
- value: searchValue,
96
- placeholder: searchPlaceholder,
97
- onChange: onSearchChange,
98
- ariaLabel: searchAriaLabel
99
- }), filterOptions.map((option, index) => {
100
- if (option.isDivider) {
101
- return /* @__PURE__ */ React.createElement(import_menu.MenuDivider, {
102
- key: `divider-${index}`
103
- });
104
- }
105
- return /* @__PURE__ */ React.createElement(import_menu.MenuItem, {
106
- item: option,
107
- disabled: option.isDisabled,
108
- icon: option.isChecked ? import_icons2.Check : null,
109
- key: option.value,
110
- role: "menuitemradio",
111
- "aria-checked": option.isChecked ? "true" : void 0,
112
- nested: option.nested,
113
- groupHeader: option.groupHeader,
114
- tooltip: option.isDisabled && disabledOptionTooltip ? disabledOptionTooltip : void 0,
115
- tooltipPlacement: "right"
116
- }, option.name);
117
- })));
105
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
106
+ children: [
107
+ onClearFilter && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_button.Button, {
108
+ tabIndex: 0,
109
+ className: "Menu-clear",
110
+ onClick: onClearFilter,
111
+ kind: import_button.ButtonKind.LINK,
112
+ children: "CLEAR FILTER"
113
+ }),
114
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_menu.Menu, {
115
+ enableVirtualization,
116
+ size,
117
+ onSelect,
118
+ children: [
119
+ enableSearch && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_menu.MenuSearch, {
120
+ value: searchValue,
121
+ placeholder: searchPlaceholder,
122
+ onChange: onSearchChange,
123
+ ariaLabel: searchAriaLabel
124
+ }),
125
+ filterOptions.map((option, index) => {
126
+ if (option.isDivider) {
127
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_menu.MenuDivider, {}, `divider-${index}`);
128
+ }
129
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_menu.MenuItem, {
130
+ item: option,
131
+ disabled: option.isDisabled,
132
+ icon: option.isChecked ? import_icons2.Check : null,
133
+ role: "menuitemradio",
134
+ "aria-checked": option.isChecked ? "true" : void 0,
135
+ nested: option.nested,
136
+ groupHeader: option.groupHeader,
137
+ tooltip: option.isDisabled && disabledOptionTooltip ? disabledOptionTooltip : void 0,
138
+ tooltipPlacement: "right",
139
+ children: option.name
140
+ }, option.value);
141
+ })
142
+ ]
143
+ })
144
+ ]
145
+ });
118
146
  };
119
147
 
120
148
  // src/AppliedFilter.tsx
149
+ var import_jsx_runtime = require("react/jsx-runtime");
121
150
  var SEARCH_INPUT_THRESHOLD = 4;
122
151
  var AppliedFilter = ({
123
152
  searchValue,
@@ -136,24 +165,29 @@ var AppliedFilter = ({
136
165
  }) => {
137
166
  const enableSearch = onSearchChange && (!!searchValue || options.length > SEARCH_INPUT_THRESHOLD || !isEmpty);
138
167
  const dropdownClasses = (0, import_clsx2.default)("Filter-target", className);
139
- return /* @__PURE__ */ React.createElement(import_dropdown.Dropdown, {
168
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_dropdown.Dropdown, {
140
169
  targetClassName: dropdownClasses,
141
170
  placement: "bottom-start",
142
171
  enableArrow: false,
143
- ...props
144
- }, /* @__PURE__ */ React.createElement(AppliedFilterButton, {
145
- name,
146
- onClickFilterButton
147
- }, description), /* @__PURE__ */ React.createElement(FilterMenu, {
148
- options,
149
- searchValue,
150
- searchPlaceholder,
151
- enableSearch,
152
- searchAriaLabel,
153
- onSearchChange,
154
- onClearFilter,
155
- isLoading
156
- }));
172
+ ...props,
173
+ children: [
174
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AppliedFilterButton, {
175
+ name,
176
+ onClickFilterButton,
177
+ children: description
178
+ }),
179
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FilterMenu, {
180
+ options,
181
+ searchValue,
182
+ searchPlaceholder,
183
+ enableSearch,
184
+ searchAriaLabel,
185
+ onSearchChange,
186
+ onClearFilter,
187
+ isLoading
188
+ })
189
+ ]
190
+ });
157
191
  };
158
192
 
159
193
  // src/Filter.tsx
@@ -169,6 +203,7 @@ var import_visually_hidden = require("@react-aria/visually-hidden");
169
203
  var import_clsx3 = __toESM(require("clsx"));
170
204
  var import_react2 = require("react");
171
205
  var import_Filter2 = require("./styles/Filter.css");
206
+ var import_jsx_runtime = require("react/jsx-runtime");
172
207
  var FilterButton = (0, import_react2.forwardRef)((props, ref) => {
173
208
  const {
174
209
  children,
@@ -186,42 +221,59 @@ var FilterButton = (0, import_react2.forwardRef)((props, ref) => {
186
221
  const nameId = (0, import_utils.useId)();
187
222
  const descriptionId = (0, import_utils.useId)();
188
223
  const hasDescription = import_react2.Children.count(children) !== 0;
189
- const nameElement = /* @__PURE__ */ React.createElement("span", {
190
- className: "Filter-name"
191
- }, name, hasDescription && ":");
192
- return /* @__PURE__ */ React.createElement("div", {
224
+ const nameElement = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
225
+ className: "Filter-name",
226
+ children: [
227
+ name,
228
+ hasDescription && ":"
229
+ ]
230
+ });
231
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
193
232
  className: "Filter-buttonContainer",
194
- "data-test-id": testId
195
- }, /* @__PURE__ */ React.createElement("button", {
196
- ...rest,
197
- "aria-labelledby": `${nameId} ${hasDescription ? descriptionId : ""}`,
198
- "aria-haspopup": true,
199
- className: (0, import_clsx3.default)("Filter-button", className, {
200
- "is-clearable": isClearable || isSelected
201
- }),
202
- ref,
203
- onClick: onClickFilterButton
204
- }, hideName ? /* @__PURE__ */ React.createElement(import_visually_hidden.VisuallyHidden, {
205
- id: nameId
206
- }, nameElement) : /* @__PURE__ */ React.createElement("span", {
207
- id: nameId
208
- }, nameElement), hasDescription && /* @__PURE__ */ React.createElement("span", {
209
- id: descriptionId,
210
- className: "Filter-description"
211
- }, children), !isClearable && /* @__PURE__ */ React.createElement(import_icons3.ExpandMore, {
212
- size: import_icons3.IconSize.SMALL
213
- })), isClearable && /* @__PURE__ */ React.createElement(import_tooltip.Tooltip, {
214
- targetClassName: "Filter-clearTooltip",
215
- content: clearTooltip
216
- }, /* @__PURE__ */ React.createElement(import_button2.Button, {
217
- className: "Filter-clear",
218
- size: import_button2.ButtonSize.SMALL,
219
- type: import_button2.ButtonType.ICON,
220
- icon: /* @__PURE__ */ React.createElement(import_icons3.Close, {
221
- size: import_icons3.IconSize.TINY
222
- }),
223
- onClick: onClear
224
- })));
233
+ "data-test-id": testId,
234
+ children: [
235
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", {
236
+ ...rest,
237
+ "aria-labelledby": `${nameId} ${hasDescription ? descriptionId : ""}`,
238
+ "aria-haspopup": true,
239
+ className: (0, import_clsx3.default)("Filter-button", className, {
240
+ "is-clearable": isClearable || isSelected
241
+ }),
242
+ ref,
243
+ onClick: onClickFilterButton,
244
+ children: [
245
+ hideName ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_visually_hidden.VisuallyHidden, {
246
+ id: nameId,
247
+ children: nameElement
248
+ }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
249
+ id: nameId,
250
+ children: nameElement
251
+ }),
252
+ hasDescription && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
253
+ id: descriptionId,
254
+ className: "Filter-description",
255
+ children
256
+ }),
257
+ !isClearable && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons3.ExpandMore, {
258
+ size: import_icons3.IconSize.SMALL
259
+ })
260
+ ]
261
+ }),
262
+ isClearable && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tooltip.Tooltip, {
263
+ targetClassName: "Filter-clearTooltip",
264
+ content: clearTooltip,
265
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_button2.Button, {
266
+ className: "Filter-clear",
267
+ size: import_button2.ButtonSize.SMALL,
268
+ type: import_button2.ButtonType.ICON,
269
+ icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons3.Close, {
270
+ size: import_icons3.IconSize.TINY
271
+ }),
272
+ onClick: onClear
273
+ })
274
+ })
275
+ ]
276
+ });
225
277
  });
226
278
  FilterButton.defaultProps = {
227
279
  clearTooltip: "Clear filter"
@@ -229,6 +281,7 @@ FilterButton.defaultProps = {
229
281
  FilterButton.displayName = "FilterButton";
230
282
 
231
283
  // src/Filter.tsx
284
+ var import_jsx_runtime = require("react/jsx-runtime");
232
285
  var SEARCH_INPUT_THRESHOLD2 = 4;
233
286
  var Filter = ({
234
287
  searchValue,
@@ -258,29 +311,34 @@ var Filter = ({
258
311
  event.preventDefault();
259
312
  onClear?.();
260
313
  };
261
- return /* @__PURE__ */ React.createElement(import_dropdown2.Dropdown, {
314
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_dropdown2.Dropdown, {
262
315
  targetClassName: dropdownClasses,
263
- ...props
264
- }, /* @__PURE__ */ React.createElement(FilterButton, {
265
- isClearable,
266
- onClear: handleClear,
267
- name,
268
- hideName,
269
- isSelected,
270
- onClickFilterButton,
271
- testId
272
- }, description), /* @__PURE__ */ React.createElement(FilterMenu, {
273
- options,
274
- searchValue,
275
- searchPlaceholder,
276
- searchAriaLabel,
277
- enableSearch,
278
- onSearchChange,
279
- isLoading,
280
- disabledOptionTooltip,
281
- size,
282
- enableVirtualization
283
- }));
316
+ ...props,
317
+ children: [
318
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FilterButton, {
319
+ isClearable,
320
+ onClear: handleClear,
321
+ name,
322
+ hideName,
323
+ isSelected,
324
+ onClickFilterButton,
325
+ testId,
326
+ children: description
327
+ }),
328
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FilterMenu, {
329
+ options,
330
+ searchValue,
331
+ searchPlaceholder,
332
+ searchAriaLabel,
333
+ enableSearch,
334
+ onSearchChange,
335
+ isLoading,
336
+ disabledOptionTooltip,
337
+ size,
338
+ enableVirtualization
339
+ })
340
+ ]
341
+ });
284
342
  };
285
343
  // Annotate the CommonJS export names for ESM import in node:
286
344
  0 && (module.exports = {
package/dist/index.js.map CHANGED
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../src/index.ts", "../../../scripts/react-shim.js", "../src/AppliedFilter.tsx", "../src/AppliedFilterButton.tsx", "../src/FilterMenu.tsx", "../src/Filter.tsx", "../src/FilterButton.tsx"],
4
4
  "sourcesContent": ["export type { AppliedFilterProps } from './AppliedFilter';\nexport type { FilterProps } from './Filter';\nexport type { FilterButtonProps } from './FilterButton';\nexport type { FilterOption } from './FilterMenu';\nexport { AppliedFilter } from './AppliedFilter';\nexport { Filter } from './Filter';\nexport { FilterButton } from './FilterButton';\n", "import * as React from 'react';\nexport { React };\n", "import type { FilterOption } from './FilterMenu';\nimport type { ReactNode } from 'react';\n\nimport { Dropdown } from '@launchpad-ui/dropdown';\nimport cx from 'clsx';\n\nimport { AppliedFilterButton } from './AppliedFilterButton';\nimport { FilterMenu } from './FilterMenu';\n\nconst SEARCH_INPUT_THRESHOLD = 4;\n\ntype AppliedFilterProps = {\n searchValue?: string;\n onSearchChange?(event: React.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 isSelected?: boolean;\n onSelect?(item: FilterOption): void;\n isEmpty?: boolean;\n isLoading?: boolean;\n onClickFilterButton?(): void;\n searchAriaLabel?: 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 ...props\n}: AppliedFilterProps) => {\n const enableSearch =\n onSearchChange && (!!searchValue || options.length > SEARCH_INPUT_THRESHOLD || !isEmpty);\n\n const dropdownClasses = cx('Filter-target', className);\n return (\n <Dropdown\n targetClassName={dropdownClasses}\n placement=\"bottom-start\"\n enableArrow={false}\n {...props}\n >\n <AppliedFilterButton name={name} onClickFilterButton={onClickFilterButton}>\n {description}\n </AppliedFilterButton>\n\n <FilterMenu\n options={options}\n searchValue={searchValue}\n searchPlaceholder={searchPlaceholder}\n enableSearch={enableSearch}\n searchAriaLabel={searchAriaLabel}\n onSearchChange={onSearchChange}\n onClearFilter={onClearFilter}\n isLoading={isLoading}\n />\n </Dropdown>\n );\n};\n\nexport type { AppliedFilterProps };\nexport { AppliedFilter };\n", "import type { ReactNode } from 'react';\n\nimport { ExpandMore, IconSize } from '@launchpad-ui/icons';\nimport cx from 'clsx';\nimport { Children, forwardRef } from 'react';\n\nimport './styles/Filter.css';\n\ntype AppliedFilterButtonProps = {\n name?: ReactNode;\n className?: string;\n isSelected?: boolean;\n children: ReactNode;\n onClickFilterButton?(): void;\n};\n\ntype Ref = HTMLButtonElement;\n\nconst AppliedFilterButton = forwardRef<Ref, AppliedFilterButtonProps>((props, ref) => {\n const { name, className, isSelected, children, onClickFilterButton } = props;\n\n const hasDescription = Children.count(children) !== 0;\n\n return (\n <div className=\"AppliedFilter-buttonContainer\">\n <button\n aria-haspopup\n className={cx(\n 'AppliedFilter-button',\n {\n isSelected,\n },\n className\n )}\n ref={ref}\n onClick={onClickFilterButton}\n >\n {name && (\n <span className=\"AppliedFilter-name\">\n {name}\n {hasDescription && ':'}\n </span>\n )}\n {hasDescription && <span className=\"AppliedFilter-description\">{children}</span>}\n <ExpandMore size={IconSize.SMALL} />\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 { ReactNode } from 'react';\n\nimport { Button, ButtonKind } from '@launchpad-ui/button';\nimport { Check } from '@launchpad-ui/icons';\nimport { Menu, MenuDivider, MenuItem, MenuSearch } from '@launchpad-ui/menu';\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'> & {\n options: FilterOption[];\n onClearFilter?(): void;\n enableSearch?: boolean;\n searchValue?: string;\n searchPlaceholder?: string;\n searchAriaLabel?: string;\n onSearchChange?(event: React.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 onSelect,\n onSearchChange,\n isLoading = false,\n disabledOptionTooltip,\n enableVirtualization,\n size,\n}: FilterMenuProps) => {\n const filterOptions = isLoading\n ? [{ name: 'loading...', value: 'loading...', isDisabled: true }]\n : options;\n\n return (\n <>\n {onClearFilter && (\n <Button tabIndex={0} className=\"Menu-clear\" onClick={onClearFilter} kind={ButtonKind.LINK}>\n CLEAR FILTER\n </Button>\n )}\n <Menu enableVirtualization={enableVirtualization} size={size} onSelect={onSelect}>\n {enableSearch && (\n <MenuSearch\n value={searchValue}\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 ? Check : null}\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 { MenuProps } from '@launchpad-ui/menu';\nimport type { ReactNode, SyntheticEvent } from 'react';\n\nimport { Dropdown } from '@launchpad-ui/dropdown';\nimport cx from 'clsx';\n\nimport { FilterButton } from './FilterButton';\nimport { FilterMenu } from './FilterMenu';\n\nconst SEARCH_INPUT_THRESHOLD = 4;\n\ntype FilterProps = Pick<MenuProps<string>, 'size' | 'enableVirtualization'> & {\n searchValue?: string;\n onSearchChange?(event: React.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 onSelect?(item: FilterOption): void;\n isEmpty?: boolean;\n isLoading?: boolean;\n onClickFilterButton?(): void;\n disabledOptionTooltip?: string;\n testId?: 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 isLoading,\n onClickFilterButton,\n disabledOptionTooltip,\n testId,\n size,\n enableVirtualization,\n ...props\n}: FilterProps) => {\n const enableSearch =\n onSearchChange && (!!searchValue || options.length > SEARCH_INPUT_THRESHOLD || !isEmpty);\n\n const dropdownClasses = cx('Filter', 'Filter-target', className);\n\n const handleClear = (event: SyntheticEvent) => {\n event.preventDefault();\n onClear?.();\n };\n\n return (\n <Dropdown targetClassName={dropdownClasses} {...props}>\n <FilterButton\n isClearable={isClearable}\n onClear={handleClear}\n name={name}\n hideName={hideName}\n isSelected={isSelected}\n onClickFilterButton={onClickFilterButton}\n testId={testId}\n >\n {description}\n </FilterButton>\n <FilterMenu\n options={options}\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", "import type { ReactNode, SyntheticEvent } from 'react';\n\nimport { Button, ButtonSize, ButtonType } from '@launchpad-ui/button';\nimport { Close, ExpandMore, IconSize } from '@launchpad-ui/icons';\nimport { Tooltip } from '@launchpad-ui/tooltip';\nimport { useId } from '@react-aria/utils';\nimport { VisuallyHidden } from '@react-aria/visually-hidden';\nimport cx from 'clsx';\nimport { Children, forwardRef } from 'react';\n\nimport './styles/Filter.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 onClickFilterButton?(): void;\n testId?: 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 isSelected,\n onClickFilterButton,\n className,\n testId,\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=\"Filter-name\">\n {name}\n {hasDescription && ':'}\n </span>\n );\n\n return (\n <div className=\"Filter-buttonContainer\" data-test-id={testId}>\n <button\n {...rest}\n aria-labelledby={`${nameId} ${hasDescription ? descriptionId : ''}`}\n aria-haspopup\n className={cx('Filter-button', className, {\n 'is-clearable': isClearable || isSelected,\n })}\n ref={ref}\n onClick={onClickFilterButton}\n >\n {hideName ? (\n <VisuallyHidden id={nameId}>{nameElement}</VisuallyHidden>\n ) : (\n <span id={nameId}>{nameElement}</span>\n )}\n {hasDescription && (\n <span id={descriptionId} className=\"Filter-description\">\n {children}\n </span>\n )}\n {!isClearable && <ExpandMore size={IconSize.SMALL} />}\n </button>\n {isClearable && (\n <Tooltip targetClassName=\"Filter-clearTooltip\" content={clearTooltip}>\n <Button\n className=\"Filter-clear\"\n size={ButtonSize.SMALL}\n type={ButtonType.ICON}\n icon={<Close size={IconSize.TINY} />}\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"],
5
- "mappings": "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",
6
- "names": []
5
+ "mappings": "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",
6
+ "names": ["import_clsx", "cx", "import_icons", "cx", "import_dropdown", "import_clsx", "import_button", "import_icons", "import_clsx", "import_react", "import_Filter", "cx", "SEARCH_INPUT_THRESHOLD", "cx"]
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@launchpad-ui/filter",
3
- "version": "0.1.2",
3
+ "version": "0.2.0",
4
4
  "status": "beta",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -26,19 +26,19 @@
26
26
  },
27
27
  "source": "src/index.ts",
28
28
  "dependencies": {
29
- "@launchpad-ui/button": "~0.3.2",
30
- "@launchpad-ui/dropdown": "~0.2.9",
31
- "@launchpad-ui/icons": "~0.2.4",
32
- "@launchpad-ui/menu": "~0.3.8",
29
+ "@launchpad-ui/button": "~0.4.0",
30
+ "@launchpad-ui/dropdown": "~0.3.0",
31
+ "@launchpad-ui/icons": "~0.3.0",
32
+ "@launchpad-ui/menu": "~0.4.0",
33
33
  "@launchpad-ui/tokens": "~0.1.5",
34
- "@launchpad-ui/tooltip": "~0.3.10",
34
+ "@launchpad-ui/tooltip": "~0.4.0",
35
35
  "@react-aria/utils": "^3.13.1",
36
36
  "@react-aria/visually-hidden": "^3.4.0",
37
37
  "clsx": "^1.2.0"
38
38
  },
39
39
  "peerDependencies": {
40
- "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
41
- "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
40
+ "react": "^18.0.0",
41
+ "react-dom": "^18.0.0"
42
42
  },
43
43
  "devDependencies": {
44
44
  "react": "^18.2.0",