@launchpad-ui/filter 0.2.5 → 0.2.8
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/AppliedFilterButton.d.ts.map +1 -1
- package/dist/FilterButton.d.ts.map +1 -1
- package/dist/index.es.js +7 -19
- package/dist/index.es.js.map +3 -3
- package/dist/index.js +10 -28
- package/dist/index.js.map +4 -4
- package/package.json +7 -8
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppliedFilterButton.d.ts","sourceRoot":"","sources":["../src/AppliedFilterButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMvC,OAAO,qBAAqB,CAAC;AAE7B,aAAK,wBAAwB,GAAG;IAC9B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,SAAS,CAAC;IACpB,mBAAmB,CAAC,IAAI,IAAI,CAAC;CAC9B,CAAC;AAIF,QAAA,MAAM,mBAAmB,
|
|
1
|
+
{"version":3,"file":"AppliedFilterButton.d.ts","sourceRoot":"","sources":["../src/AppliedFilterButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMvC,OAAO,qBAAqB,CAAC;AAE7B,aAAK,wBAAwB,GAAG;IAC9B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,SAAS,CAAC;IACpB,mBAAmB,CAAC,IAAI,IAAI,CAAC;CAC9B,CAAC;AAIF,QAAA,MAAM,mBAAmB,wHAwBvB,CAAC;AAIH,YAAY,EAAE,wBAAwB,EAAE,CAAC;AACzC,OAAO,EAAE,mBAAmB,EAAE,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FilterButton.d.ts","sourceRoot":"","sources":["../src/FilterButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"FilterButton.d.ts","sourceRoot":"","sources":["../src/FilterButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AASvD,OAAO,qBAAqB,CAAC;AAE7B,aAAK,iBAAiB,GAAG;IACvB,IAAI,EAAE,SAAS,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,CAAC,KAAK,EAAE,cAAc,GAAG,IAAI,CAAC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IACpC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,mBAAmB,CAAC,IAAI,IAAI,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAIF,QAAA,MAAM,YAAY,iHA6DhB,CAAC;AAQH,OAAO,EAAE,YAAY,EAAE,CAAC;AACxB,YAAY,EAAE,iBAAiB,EAAE,CAAC"}
|
package/dist/index.es.js
CHANGED
|
@@ -1,13 +1,10 @@
|
|
|
1
|
-
// ../../scripts/react-shim.js
|
|
2
|
-
import * as React from "react";
|
|
3
|
-
|
|
4
1
|
// src/AppliedFilter.tsx
|
|
5
2
|
import { Dropdown } from "@launchpad-ui/dropdown";
|
|
6
|
-
import cx2 from "
|
|
3
|
+
import { cx as cx2 } from "classix";
|
|
7
4
|
|
|
8
5
|
// src/AppliedFilterButton.tsx
|
|
9
6
|
import { ExpandMore, IconSize } from "@launchpad-ui/icons";
|
|
10
|
-
import cx from "
|
|
7
|
+
import { cx } from "classix";
|
|
11
8
|
import { Children, forwardRef } from "react";
|
|
12
9
|
import "./styles/Filter.css";
|
|
13
10
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
@@ -18,13 +15,7 @@ var AppliedFilterButton = forwardRef((props, ref) => {
|
|
|
18
15
|
className: "AppliedFilter-buttonContainer",
|
|
19
16
|
children: /* @__PURE__ */ jsxs("button", {
|
|
20
17
|
"aria-haspopup": true,
|
|
21
|
-
className: cx(
|
|
22
|
-
"AppliedFilter-button",
|
|
23
|
-
{
|
|
24
|
-
isSelected
|
|
25
|
-
},
|
|
26
|
-
className
|
|
27
|
-
),
|
|
18
|
+
className: cx("AppliedFilter-button", isSelected && "isSelected", className),
|
|
28
19
|
ref,
|
|
29
20
|
onClick: onClickFilterButton,
|
|
30
21
|
children: [
|
|
@@ -158,16 +149,15 @@ var AppliedFilter = ({
|
|
|
158
149
|
|
|
159
150
|
// src/Filter.tsx
|
|
160
151
|
import { Dropdown as Dropdown2 } from "@launchpad-ui/dropdown";
|
|
161
|
-
import cx4 from "
|
|
152
|
+
import { cx as cx4 } from "classix";
|
|
162
153
|
|
|
163
154
|
// src/FilterButton.tsx
|
|
164
155
|
import { Button as Button2, ButtonSize, ButtonType } from "@launchpad-ui/button";
|
|
165
156
|
import { Close, ExpandMore as ExpandMore2, IconSize as IconSize2 } from "@launchpad-ui/icons";
|
|
166
157
|
import { Tooltip } from "@launchpad-ui/tooltip";
|
|
167
|
-
import { useId } from "@react-aria/utils";
|
|
168
158
|
import { VisuallyHidden } from "@react-aria/visually-hidden";
|
|
169
|
-
import cx3 from "
|
|
170
|
-
import { Children as Children2, forwardRef as forwardRef2 } from "react";
|
|
159
|
+
import { cx as cx3 } from "classix";
|
|
160
|
+
import { Children as Children2, forwardRef as forwardRef2, useId } from "react";
|
|
171
161
|
import "./styles/Filter.css";
|
|
172
162
|
import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
173
163
|
var FilterButton = forwardRef2((props, ref) => {
|
|
@@ -202,9 +192,7 @@ var FilterButton = forwardRef2((props, ref) => {
|
|
|
202
192
|
...rest,
|
|
203
193
|
"aria-labelledby": `${nameId} ${hasDescription ? descriptionId : ""}`,
|
|
204
194
|
"aria-haspopup": true,
|
|
205
|
-
className: cx3("Filter-button", className,
|
|
206
|
-
"is-clearable": isClearable || isSelected
|
|
207
|
-
}),
|
|
195
|
+
className: cx3("Filter-button", className, (isClearable || isSelected) && "is-clearable"),
|
|
208
196
|
ref,
|
|
209
197
|
onClick: onClickFilterButton,
|
|
210
198
|
children: [
|
package/dist/index.es.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["
|
|
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": ";
|
|
3
|
+
"sources": ["../src/AppliedFilter.tsx", "../src/AppliedFilterButton.tsx", "../src/FilterMenu.tsx", "../src/Filter.tsx", "../src/FilterButton.tsx"],
|
|
4
|
+
"sourcesContent": ["import type { FilterOption } from './FilterMenu';\nimport type { ReactNode } from 'react';\n\nimport { Dropdown } from '@launchpad-ui/dropdown';\nimport { cx } from 'classix';\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 'classix';\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('AppliedFilter-button', isSelected && 'isSelected', className)}\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 'classix';\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 { VisuallyHidden } from '@react-aria/visually-hidden';\nimport { cx } from 'classix';\nimport { Children, forwardRef, useId } 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, (isClearable || isSelected) && 'is-clearable')}\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
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
|
@@ -1,9 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __create = Object.create;
|
|
3
2
|
var __defProp = Object.defineProperty;
|
|
4
3
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
4
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
-
var __getProtoOf = Object.getPrototypeOf;
|
|
7
5
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
6
|
var __export = (target, all) => {
|
|
9
7
|
for (var name in all)
|
|
@@ -17,10 +15,6 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
17
15
|
}
|
|
18
16
|
return to;
|
|
19
17
|
};
|
|
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
|
-
));
|
|
24
18
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
25
19
|
|
|
26
20
|
// src/index.ts
|
|
@@ -32,16 +26,13 @@ __export(src_exports, {
|
|
|
32
26
|
});
|
|
33
27
|
module.exports = __toCommonJS(src_exports);
|
|
34
28
|
|
|
35
|
-
// ../../scripts/react-shim.js
|
|
36
|
-
var React = __toESM(require("react"));
|
|
37
|
-
|
|
38
29
|
// src/AppliedFilter.tsx
|
|
39
30
|
var import_dropdown = require("@launchpad-ui/dropdown");
|
|
40
|
-
var
|
|
31
|
+
var import_classix2 = require("classix");
|
|
41
32
|
|
|
42
33
|
// src/AppliedFilterButton.tsx
|
|
43
34
|
var import_icons = require("@launchpad-ui/icons");
|
|
44
|
-
var
|
|
35
|
+
var import_classix = require("classix");
|
|
45
36
|
var import_react = require("react");
|
|
46
37
|
var import_Filter = require("./styles/Filter.css");
|
|
47
38
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
@@ -52,13 +43,7 @@ var AppliedFilterButton = (0, import_react.forwardRef)((props, ref) => {
|
|
|
52
43
|
className: "AppliedFilter-buttonContainer",
|
|
53
44
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", {
|
|
54
45
|
"aria-haspopup": true,
|
|
55
|
-
className: (0,
|
|
56
|
-
"AppliedFilter-button",
|
|
57
|
-
{
|
|
58
|
-
isSelected
|
|
59
|
-
},
|
|
60
|
-
className
|
|
61
|
-
),
|
|
46
|
+
className: (0, import_classix.cx)("AppliedFilter-button", isSelected && "isSelected", className),
|
|
62
47
|
ref,
|
|
63
48
|
onClick: onClickFilterButton,
|
|
64
49
|
children: [
|
|
@@ -164,7 +149,7 @@ var AppliedFilter = ({
|
|
|
164
149
|
...props
|
|
165
150
|
}) => {
|
|
166
151
|
const enableSearch = onSearchChange && (!!searchValue || options.length > SEARCH_INPUT_THRESHOLD || !isEmpty);
|
|
167
|
-
const dropdownClasses = (0,
|
|
152
|
+
const dropdownClasses = (0, import_classix2.cx)("Filter-target", className);
|
|
168
153
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_dropdown.Dropdown, {
|
|
169
154
|
targetClassName: dropdownClasses,
|
|
170
155
|
placement: "bottom-start",
|
|
@@ -192,15 +177,14 @@ var AppliedFilter = ({
|
|
|
192
177
|
|
|
193
178
|
// src/Filter.tsx
|
|
194
179
|
var import_dropdown2 = require("@launchpad-ui/dropdown");
|
|
195
|
-
var
|
|
180
|
+
var import_classix4 = require("classix");
|
|
196
181
|
|
|
197
182
|
// src/FilterButton.tsx
|
|
198
183
|
var import_button2 = require("@launchpad-ui/button");
|
|
199
184
|
var import_icons3 = require("@launchpad-ui/icons");
|
|
200
185
|
var import_tooltip = require("@launchpad-ui/tooltip");
|
|
201
|
-
var import_utils = require("@react-aria/utils");
|
|
202
186
|
var import_visually_hidden = require("@react-aria/visually-hidden");
|
|
203
|
-
var
|
|
187
|
+
var import_classix3 = require("classix");
|
|
204
188
|
var import_react2 = require("react");
|
|
205
189
|
var import_Filter2 = require("./styles/Filter.css");
|
|
206
190
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
@@ -218,8 +202,8 @@ var FilterButton = (0, import_react2.forwardRef)((props, ref) => {
|
|
|
218
202
|
testId,
|
|
219
203
|
...rest
|
|
220
204
|
} = props;
|
|
221
|
-
const nameId = (0,
|
|
222
|
-
const descriptionId = (0,
|
|
205
|
+
const nameId = (0, import_react2.useId)();
|
|
206
|
+
const descriptionId = (0, import_react2.useId)();
|
|
223
207
|
const hasDescription = import_react2.Children.count(children) !== 0;
|
|
224
208
|
const nameElement = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
|
|
225
209
|
className: "Filter-name",
|
|
@@ -236,9 +220,7 @@ var FilterButton = (0, import_react2.forwardRef)((props, ref) => {
|
|
|
236
220
|
...rest,
|
|
237
221
|
"aria-labelledby": `${nameId} ${hasDescription ? descriptionId : ""}`,
|
|
238
222
|
"aria-haspopup": true,
|
|
239
|
-
className: (0,
|
|
240
|
-
"is-clearable": isClearable || isSelected
|
|
241
|
-
}),
|
|
223
|
+
className: (0, import_classix3.cx)("Filter-button", className, (isClearable || isSelected) && "is-clearable"),
|
|
242
224
|
ref,
|
|
243
225
|
onClick: onClickFilterButton,
|
|
244
226
|
children: [
|
|
@@ -306,7 +288,7 @@ var Filter = ({
|
|
|
306
288
|
...props
|
|
307
289
|
}) => {
|
|
308
290
|
const enableSearch = onSearchChange && (!!searchValue || options.length > SEARCH_INPUT_THRESHOLD2 || !isEmpty);
|
|
309
|
-
const dropdownClasses = (0,
|
|
291
|
+
const dropdownClasses = (0, import_classix4.cx)("Filter", "Filter-target", className);
|
|
310
292
|
const handleClear = (event) => {
|
|
311
293
|
event.preventDefault();
|
|
312
294
|
onClear?.();
|
package/dist/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../src/index.ts", "
|
|
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": "
|
|
6
|
-
"names": ["
|
|
3
|
+
"sources": ["../src/index.ts", "../src/AppliedFilter.tsx", "../src/AppliedFilterButton.tsx", "../src/FilterMenu.tsx", "../src/Filter.tsx", "../src/FilterButton.tsx"],
|
|
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 type { FilterOption } from './FilterMenu';\nimport type { ReactNode } from 'react';\n\nimport { Dropdown } from '@launchpad-ui/dropdown';\nimport { cx } from 'classix';\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 'classix';\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('AppliedFilter-button', isSelected && 'isSelected', className)}\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 'classix';\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 { VisuallyHidden } from '@react-aria/visually-hidden';\nimport { cx } from 'classix';\nimport { Children, forwardRef, useId } 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, (isClearable || isSelected) && 'is-clearable')}\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": ["import_classix", "import_icons", "import_dropdown", "import_classix", "import_button", "import_icons", "import_classix", "import_react", "import_Filter", "SEARCH_INPUT_THRESHOLD"]
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@launchpad-ui/filter",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.8",
|
|
4
4
|
"status": "beta",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -26,15 +26,14 @@
|
|
|
26
26
|
},
|
|
27
27
|
"source": "src/index.ts",
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"@launchpad-ui/button": "~0.4.
|
|
30
|
-
"@launchpad-ui/dropdown": "~0.3.
|
|
31
|
-
"@launchpad-ui/icons": "~0.3.
|
|
32
|
-
"@launchpad-ui/menu": "~0.4.
|
|
29
|
+
"@launchpad-ui/button": "~0.4.1",
|
|
30
|
+
"@launchpad-ui/dropdown": "~0.3.6",
|
|
31
|
+
"@launchpad-ui/icons": "~0.3.3",
|
|
32
|
+
"@launchpad-ui/menu": "~0.4.7",
|
|
33
33
|
"@launchpad-ui/tokens": "~0.1.5",
|
|
34
|
-
"@launchpad-ui/tooltip": "~0.4.
|
|
35
|
-
"@react-aria/utils": "^3.13.1",
|
|
34
|
+
"@launchpad-ui/tooltip": "~0.4.5",
|
|
36
35
|
"@react-aria/visually-hidden": "^3.4.0",
|
|
37
|
-
"
|
|
36
|
+
"classix": "^2.1.13"
|
|
38
37
|
},
|
|
39
38
|
"peerDependencies": {
|
|
40
39
|
"react": "^18.0.0",
|