@launchpad-ui/filter 0.11.11 → 0.11.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@launchpad-ui/filter",
3
- "version": "0.11.11",
3
+ "version": "0.11.12",
4
4
  "description": "filter a list of results",
5
5
  "repository": "launchdarkly/launchpad-ui",
6
6
  "license": "Apache-2.0",
@@ -20,10 +20,10 @@
20
20
  ],
21
21
  "dependencies": {
22
22
  "classix": "2.2.0",
23
- "@launchpad-ui/button": "~0.15.11",
24
- "@launchpad-ui/dropdown": "~0.10.11",
25
- "@launchpad-ui/icons": "~0.25.2",
26
- "@launchpad-ui/menu": "~0.16.11",
23
+ "@launchpad-ui/button": "~0.15.12",
24
+ "@launchpad-ui/dropdown": "~0.10.12",
25
+ "@launchpad-ui/icons": "~0.25.3",
26
+ "@launchpad-ui/menu": "~0.16.12",
27
27
  "@launchpad-ui/tokens": "~0.15.1",
28
28
  "@launchpad-ui/tooltip": "~0.12.2"
29
29
  },
@@ -1,31 +0,0 @@
1
- import type { ChangeEvent, ReactNode } from 'react';
2
- import type { FilterOption } from './FilterMenu';
3
- type AppliedFilterProps = {
4
- searchValue?: string;
5
- onSearchChange?(event: ChangeEvent<HTMLInputElement>): void;
6
- onClearFilter?(): void;
7
- searchPlaceholder?: string;
8
- name?: ReactNode;
9
- description: ReactNode;
10
- options: FilterOption[];
11
- className?: string;
12
- onStateChange?({ isOpen }: {
13
- isOpen?: boolean;
14
- }): void;
15
- onSelect?(item: FilterOption): void;
16
- isEmpty?: boolean;
17
- isLoading?: boolean;
18
- onClickFilterButton?(): void;
19
- searchAriaLabel?: string;
20
- searchId?: string;
21
- 'data-test-id'?: string;
22
- };
23
- /**
24
- * @deprecated use `Menu` from `@launchpad-ui/components` instead
25
- *
26
- * https://launchpad.launchdarkly.com/?path=/docs/components-collections-menu--docs
27
- */
28
- declare const AppliedFilter: ({ searchValue, onSearchChange, searchPlaceholder, name, description, options, className, isEmpty, isLoading, onClickFilterButton, onClearFilter, searchAriaLabel, searchId, "data-test-id": testId, ...props }: AppliedFilterProps) => import("react/jsx-runtime").JSX.Element;
29
- export type { AppliedFilterProps };
30
- export { AppliedFilter };
31
- //# sourceMappingURL=AppliedFilter.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"AppliedFilter.d.ts","sourceRoot":"","sources":["../src/AppliedFilter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AASjD,KAAK,kBAAkB,GAAG;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,CAAC,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAC;IAC5D,aAAa,CAAC,IAAI,IAAI,CAAC;IACvB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,WAAW,EAAE,SAAS,CAAC;IACvB,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,CAAC,EAAE,MAAM,EAAE,EAAE;QAAE,MAAM,CAAC,EAAE,OAAO,CAAA;KAAE,GAAG,IAAI,CAAC;IACvD,QAAQ,CAAC,CAAC,IAAI,EAAE,YAAY,GAAG,IAAI,CAAC;IACpC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mBAAmB,CAAC,IAAI,IAAI,CAAC;IAC7B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF;;;;GAIG;AACH,QAAA,MAAM,aAAa,GAAI,gNAgBpB,kBAAkB,4CA0BpB,CAAC;AAEF,YAAY,EAAE,kBAAkB,EAAE,CAAC;AACnC,OAAO,EAAE,aAAa,EAAE,CAAC"}
@@ -1,12 +0,0 @@
1
- import type { ReactNode } from 'react';
2
- type AppliedFilterButtonProps = {
3
- name?: ReactNode;
4
- className?: string;
5
- children: ReactNode;
6
- onClickFilterButton?(): void;
7
- 'data-test-id'?: string;
8
- };
9
- declare const AppliedFilterButton: import("react").ForwardRefExoticComponent<AppliedFilterButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
10
- export type { AppliedFilterButtonProps };
11
- export { AppliedFilterButton };
12
- //# sourceMappingURL=AppliedFilterButton.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"AppliedFilterButton.d.ts","sourceRoot":"","sources":["../src/AppliedFilterButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAQvC,KAAK,wBAAwB,GAAG;IAC/B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB,mBAAmB,CAAC,IAAI,IAAI,CAAC;IAC7B,cAAc,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAIF,QAAA,MAAM,mBAAmB,wHAmCvB,CAAC;AAIH,YAAY,EAAE,wBAAwB,EAAE,CAAC;AACzC,OAAO,EAAE,mBAAmB,EAAE,CAAC"}
package/dist/Filter.d.ts DELETED
@@ -1,39 +0,0 @@
1
- import type { MenuProps } from '@launchpad-ui/menu';
2
- import type { ChangeEvent, ReactNode } from 'react';
3
- import type { FilterOption } from './FilterMenu';
4
- type FilterProps = Pick<MenuProps<string>, 'size' | 'enableVirtualization'> & {
5
- searchValue?: string;
6
- onSearchChange?(event: ChangeEvent<HTMLInputElement>): void;
7
- searchPlaceholder?: string;
8
- searchAriaLabel?: string;
9
- name: ReactNode;
10
- hideName?: boolean;
11
- description: ReactNode;
12
- options: FilterOption[];
13
- isClearable?: boolean;
14
- onClear?(): void;
15
- className?: string;
16
- onStateChange?({ isOpen }: {
17
- isOpen?: boolean;
18
- }): void;
19
- isSelected?: boolean;
20
- searchId?: string;
21
- onSelect?(item: FilterOption): void;
22
- isEmpty?: boolean;
23
- isLoading?: boolean;
24
- disabled?: boolean;
25
- onClickFilterButton?(): void;
26
- disabledOptionTooltip?: string;
27
- 'data-test-id'?: string;
28
- triggerTestId?: string;
29
- clearAriaLabel?: string;
30
- };
31
- /**
32
- * @deprecated use `Menu` from `@launchpad-ui/components` instead
33
- *
34
- * https://launchpad.launchdarkly.com/?path=/docs/components-collections-menu--docs
35
- */
36
- declare const Filter: ({ searchValue, onSearchChange, searchPlaceholder, searchAriaLabel, name, hideName, description, options, isClearable, onClear, isSelected, className, isEmpty, searchId, isLoading, onClickFilterButton, disabledOptionTooltip, "data-test-id": testId, size, disabled, enableVirtualization, clearAriaLabel, ...props }: FilterProps) => import("react/jsx-runtime").JSX.Element;
37
- export { Filter };
38
- export type { FilterProps };
39
- //# sourceMappingURL=Filter.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Filter.d.ts","sourceRoot":"","sources":["../src/Filter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAkB,MAAM,OAAO,CAAC;AACpE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAWjD,KAAK,WAAW,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,EAAE,MAAM,GAAG,sBAAsB,CAAC,GAAG;IAC7E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,CAAC,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAC;IAC5D,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,IAAI,EAAE,SAAS,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,SAAS,CAAC;IACvB,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,IAAI,IAAI,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,CAAC,EAAE,MAAM,EAAE,EAAE;QAAE,MAAM,CAAC,EAAE,OAAO,CAAA;KAAE,GAAG,IAAI,CAAC;IACvD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,CAAC,IAAI,EAAE,YAAY,GAAG,IAAI,CAAC;IACpC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mBAAmB,CAAC,IAAI,IAAI,CAAC;IAC7B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF;;;;GAIG;AACH,QAAA,MAAM,MAAM,GAAI,0TAwBb,WAAW,4CA6Cb,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC;AAClB,YAAY,EAAE,WAAW,EAAE,CAAC"}
@@ -1,19 +0,0 @@
1
- import type { JSX, ReactNode, SyntheticEvent } from 'react';
2
- type FilterButtonProps = {
3
- name: ReactNode;
4
- hideName?: boolean;
5
- isClearable?: boolean;
6
- onClear?(event: SyntheticEvent): void;
7
- className?: string;
8
- isSelected?: boolean;
9
- clearTooltip?: string | JSX.Element;
10
- children?: ReactNode;
11
- disabled?: boolean;
12
- onClickFilterButton?(): void;
13
- 'data-test-id'?: string;
14
- ariaLabel?: string;
15
- };
16
- declare const FilterButton: import("react").ForwardRefExoticComponent<FilterButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
17
- export { FilterButton };
18
- export type { FilterButtonProps };
19
- //# sourceMappingURL=FilterButton.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"FilterButton.d.ts","sourceRoot":"","sources":["../src/FilterButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAc,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAWxE,KAAK,iBAAiB,GAAG;IACxB,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,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mBAAmB,CAAC,IAAI,IAAI,CAAC;IAC7B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAIF,QAAA,MAAM,YAAY,iHA0EhB,CAAC;AAIH,OAAO,EAAE,YAAY,EAAE,CAAC;AACxB,YAAY,EAAE,iBAAiB,EAAE,CAAC"}
@@ -1,29 +0,0 @@
1
- import type { MenuProps } from '@launchpad-ui/menu';
2
- import type { ChangeEvent, ReactNode } from 'react';
3
- type FilterOption<T = any> = {
4
- name?: ReactNode;
5
- isDisabled?: boolean;
6
- isDivider?: boolean;
7
- isChecked?: boolean;
8
- value: T | null;
9
- projKey?: string;
10
- nested?: boolean;
11
- groupHeader?: boolean;
12
- };
13
- type FilterMenuProps = Pick<MenuProps<string>, 'enableVirtualization' | 'size' | 'data-test-id'> & {
14
- options: FilterOption[];
15
- onClearFilter?(): void;
16
- enableSearch?: boolean;
17
- searchValue?: string;
18
- searchId?: string;
19
- searchPlaceholder?: string;
20
- searchAriaLabel?: string;
21
- onSearchChange?(event: ChangeEvent<HTMLInputElement>): void;
22
- onSelect?(): void;
23
- isLoading?: boolean;
24
- disabledOptionTooltip?: string;
25
- };
26
- declare const FilterMenu: ({ options, onClearFilter, enableSearch, searchValue, searchPlaceholder, searchAriaLabel, searchId, onSelect, onSearchChange, isLoading, disabledOptionTooltip, enableVirtualization, size, "data-test-id": testId, }: FilterMenuProps) => import("react/jsx-runtime").JSX.Element;
27
- export { FilterMenu };
28
- export type { FilterOption, FilterMenuProps };
29
- //# sourceMappingURL=FilterMenu.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"FilterMenu.d.ts","sourceRoot":"","sources":["../src/FilterMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AASpD,KAAK,YAAY,CAAC,CAAC,GAAG,GAAG,IAAI;IAC5B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,EAAE,CAAC,GAAG,IAAI,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,KAAK,eAAe,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,EAAE,sBAAsB,GAAG,MAAM,GAAG,cAAc,CAAC,GAAG;IAClG,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,aAAa,CAAC,IAAI,IAAI,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,CAAC,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAC;IAC5D,QAAQ,CAAC,IAAI,IAAI,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAC/B,CAAC;AAEF,QAAA,MAAM,UAAU,GAAI,sNAejB,eAAe,4CA4DjB,CAAC;AAEF,OAAO,EAAE,UAAU,EAAE,CAAC;AACtB,YAAY,EAAE,YAAY,EAAE,eAAe,EAAE,CAAC"}
package/dist/index.d.ts DELETED
@@ -1,8 +0,0 @@
1
- export type { AppliedFilterProps } from './AppliedFilter';
2
- export type { FilterProps } from './Filter';
3
- export type { FilterButtonProps } from './FilterButton';
4
- export type { FilterOption } from './FilterMenu';
5
- export { AppliedFilter } from './AppliedFilter';
6
- export { Filter } from './Filter';
7
- export { FilterButton } from './FilterButton';
8
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAC1D,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACxD,YAAY,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAEjD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC"}
package/dist/index.es.js DELETED
@@ -1,249 +0,0 @@
1
- import './style.css';
2
- import { Dropdown } from "@launchpad-ui/dropdown";
3
- import { Icon } from "@launchpad-ui/icons";
4
- import { cx } from "classix";
5
- import { Children, forwardRef, useId } from "react";
6
- import { Fragment, jsx, jsxs } from "react/jsx-runtime";
7
- import { Button, IconButton } from "@launchpad-ui/button";
8
- import { Menu, MenuDivider, MenuItem, MenuSearch } from "@launchpad-ui/menu";
9
- import { Tooltip } from "@launchpad-ui/tooltip";
10
- import { VisuallyHidden } from "@react-aria/visually-hidden";
11
- const appliedButton = "vLReaG_appliedButton";
12
- const appliedDescription = "vLReaG_appliedDescription";
13
- const appliedName = "vLReaG_appliedName";
14
- const button = "vLReaG_button";
15
- const buttonContainer = "vLReaG_buttonContainer";
16
- const clear = "vLReaG_clear";
17
- const clearTooltip = "vLReaG_clearTooltip";
18
- const description = "vLReaG_description";
19
- const filter = "vLReaG_filter";
20
- const filterClearButton = "vLReaG_filterClearButton";
21
- const isClearable = "vLReaG_isClearable";
22
- const name = "vLReaG_name";
23
- var Filter_module_default = {
24
- appliedButton,
25
- appliedDescription,
26
- appliedName,
27
- button,
28
- buttonContainer,
29
- clear,
30
- clearTooltip,
31
- description,
32
- filter,
33
- filterClearButton,
34
- isClearable,
35
- name
36
- };
37
- const AppliedFilterButton = /* @__PURE__ */ forwardRef((props, ref) => {
38
- const { name: name$1, className, children, onClickFilterButton, "data-test-id": testId = "applied-filter-button" } = props;
39
- const hasDescription = Children.count(children) !== 0;
40
- return /* @__PURE__ */ jsx("div", {
41
- "data-test-id": testId,
42
- children: /* @__PURE__ */ jsxs("button", {
43
- type: "button",
44
- "aria-haspopup": true,
45
- className: cx(Filter_module_default.appliedButton, className),
46
- ref,
47
- onClick: onClickFilterButton,
48
- children: [
49
- name$1 && /* @__PURE__ */ jsxs("span", {
50
- className: Filter_module_default.appliedName,
51
- "data-test-id": `${testId}-name`,
52
- children: [name$1, hasDescription && ":"]
53
- }),
54
- hasDescription && /* @__PURE__ */ jsx("span", {
55
- className: Filter_module_default.appliedDescription,
56
- "data-test-id": `${testId}-description`,
57
- children
58
- }),
59
- /* @__PURE__ */ jsx(Icon, {
60
- name: "chevron-down",
61
- size: "small",
62
- "data-test-id": `${testId}-expand`
63
- })
64
- ]
65
- })
66
- });
67
- });
68
- AppliedFilterButton.displayName = "AppliedFilterButton";
69
- const FilterMenu = ({ options, onClearFilter, enableSearch, searchValue, searchPlaceholder, searchAriaLabel, searchId, onSelect, onSearchChange, isLoading = false, disabledOptionTooltip, enableVirtualization, size, "data-test-id": testId = "filter-menu" }) => {
70
- const filterOptions = isLoading ? [{
71
- name: "loading...",
72
- value: "loading...",
73
- isDisabled: true
74
- }] : options;
75
- return /* @__PURE__ */ jsxs(Fragment, { children: [onClearFilter && /* @__PURE__ */ jsx(Button, {
76
- tabIndex: 0,
77
- className: Filter_module_default.filterClearButton,
78
- onClick: onClearFilter,
79
- kind: "link",
80
- "data-test-id": "clear-filter-button",
81
- children: "CLEAR FILTER"
82
- }), /* @__PURE__ */ jsxs(Menu, {
83
- enableVirtualization,
84
- size,
85
- "data-test-id": testId,
86
- onSelect,
87
- children: [enableSearch && /* @__PURE__ */ jsx(MenuSearch, {
88
- value: searchValue,
89
- id: searchId,
90
- placeholder: searchPlaceholder,
91
- onChange: onSearchChange,
92
- ariaLabel: searchAriaLabel
93
- }), filterOptions.map((option, index) => {
94
- if (option.isDivider) return /* @__PURE__ */ jsx(MenuDivider, {}, `divider-${index}`);
95
- return /* @__PURE__ */ jsx(MenuItem, {
96
- item: option,
97
- disabled: option.isDisabled,
98
- icon: option.isChecked ? /* @__PURE__ */ jsx(Icon, { name: "check" }) : void 0,
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
- const SEARCH_INPUT_THRESHOLD$1 = 4;
111
- /**
112
- * @deprecated use `Menu` from `@launchpad-ui/components` instead
113
- *
114
- * https://launchpad.launchdarkly.com/?path=/docs/components-collections-menu--docs
115
- */
116
- const AppliedFilter = ({ searchValue, onSearchChange, searchPlaceholder, name: name$1, description: description$1, options, className, isEmpty, isLoading, onClickFilterButton, onClearFilter, searchAriaLabel, searchId, "data-test-id": testId = "applied-filter",...props }) => {
117
- const enableSearch = onSearchChange && (!!searchValue || options.length > SEARCH_INPUT_THRESHOLD$1 || !isEmpty);
118
- return /* @__PURE__ */ jsxs(Dropdown, {
119
- targetClassName: className,
120
- placement: "bottom-start",
121
- enableArrow: false,
122
- ...props,
123
- children: [/* @__PURE__ */ jsx(AppliedFilterButton, {
124
- "data-test-id": testId,
125
- name: name$1,
126
- onClickFilterButton,
127
- children: description$1
128
- }), /* @__PURE__ */ jsx(FilterMenu, {
129
- options,
130
- searchValue,
131
- searchPlaceholder,
132
- enableSearch,
133
- searchAriaLabel,
134
- searchId,
135
- onSearchChange,
136
- onClearFilter,
137
- isLoading
138
- })]
139
- });
140
- };
141
- const FilterButton = /* @__PURE__ */ forwardRef((props, ref) => {
142
- const { children, name: name$1, hideName, isClearable: isClearable$1, clearTooltip: clearTooltip$1 = "Clear filter", onClear, disabled, isSelected, onClickFilterButton, className, "data-test-id": testId = "filter-button", ariaLabel = "Clear filter",...rest } = props;
143
- const nameId = useId();
144
- const descriptionId = useId();
145
- const hasDescription = Children.count(children) !== 0;
146
- const nameElement = /* @__PURE__ */ jsxs("span", {
147
- className: Filter_module_default.name,
148
- children: [name$1, hasDescription && ":"]
149
- });
150
- const isDisabled = disabled;
151
- const handleClick = (event) => {
152
- if (isDisabled) return event.preventDefault();
153
- onClickFilterButton?.();
154
- };
155
- return /* @__PURE__ */ jsxs("div", {
156
- className: Filter_module_default.buttonContainer,
157
- "data-test-id": testId,
158
- children: [/* @__PURE__ */ jsxs("button", {
159
- ...rest,
160
- type: "button",
161
- "aria-labelledby": `${nameId} ${hasDescription ? descriptionId : ""}`,
162
- "aria-haspopup": true,
163
- disabled: isDisabled,
164
- "aria-disabled": isDisabled,
165
- className: cx(Filter_module_default.button, className, (isClearable$1 || isSelected) && Filter_module_default.isClearable),
166
- ref,
167
- onClick: handleClick,
168
- children: [
169
- hideName ? /* @__PURE__ */ jsx(VisuallyHidden, {
170
- id: nameId,
171
- children: nameElement
172
- }) : /* @__PURE__ */ jsx("span", {
173
- id: nameId,
174
- children: nameElement
175
- }),
176
- hasDescription && /* @__PURE__ */ jsx("span", {
177
- id: descriptionId,
178
- className: Filter_module_default.description,
179
- children
180
- }),
181
- !isClearable$1 && /* @__PURE__ */ jsx(Icon, {
182
- name: "chevron-down",
183
- size: "small"
184
- })
185
- ]
186
- }), isClearable$1 && /* @__PURE__ */ jsx(Tooltip, {
187
- targetClassName: Filter_module_default.clearTooltip,
188
- content: clearTooltip$1,
189
- children: /* @__PURE__ */ jsx(IconButton, {
190
- "aria-label": ariaLabel,
191
- className: Filter_module_default.clear,
192
- "data-test-id": "clear-filter-button",
193
- icon: /* @__PURE__ */ jsx(Icon, {
194
- name: "cancel",
195
- size: "small"
196
- }),
197
- size: "small",
198
- onClick: onClear
199
- })
200
- })]
201
- });
202
- });
203
- FilterButton.displayName = "FilterButton";
204
- const SEARCH_INPUT_THRESHOLD = 4;
205
- /**
206
- * @deprecated use `Menu` from `@launchpad-ui/components` instead
207
- *
208
- * https://launchpad.launchdarkly.com/?path=/docs/components-collections-menu--docs
209
- */
210
- const Filter = ({ searchValue, onSearchChange, searchPlaceholder, searchAriaLabel, name: name$1, hideName, description: description$1, options, isClearable: isClearable$1, onClear, isSelected, className, isEmpty, searchId, isLoading, onClickFilterButton, disabledOptionTooltip, "data-test-id": testId = "filter", size, disabled, enableVirtualization, clearAriaLabel,...props }) => {
211
- const enableSearch = onSearchChange && (!!searchValue || options.length > SEARCH_INPUT_THRESHOLD || !isEmpty);
212
- const dropdownClasses = cx(Filter_module_default.filter, className);
213
- const handleClear = (event) => {
214
- event.preventDefault();
215
- onClear?.();
216
- };
217
- return /* @__PURE__ */ jsxs(Dropdown, {
218
- targetTestId: testId,
219
- disabled,
220
- targetClassName: dropdownClasses,
221
- ...props,
222
- children: [/* @__PURE__ */ jsx(FilterButton, {
223
- isClearable: isClearable$1,
224
- onClear: handleClear,
225
- name: name$1,
226
- hideName,
227
- disabled,
228
- isSelected,
229
- onClickFilterButton,
230
- ariaLabel: clearAriaLabel,
231
- children: description$1
232
- }), /* @__PURE__ */ jsx(FilterMenu, {
233
- options,
234
- searchId,
235
- searchValue,
236
- searchPlaceholder,
237
- searchAriaLabel,
238
- enableSearch,
239
- onSearchChange,
240
- isLoading,
241
- disabledOptionTooltip,
242
- size,
243
- enableVirtualization
244
- })]
245
- });
246
- };
247
- export { AppliedFilter, Filter, FilterButton };
248
-
249
- //# sourceMappingURL=index.es.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.es.js","names":["event: MouseEvent<HTMLButtonElement>","event: SyntheticEvent"],"sources":["../src/styles/Filter.module.css","../src/AppliedFilterButton.tsx","../src/FilterMenu.tsx","../src/AppliedFilter.tsx","../src/FilterButton.tsx","../src/Filter.tsx"],"sourcesContent":[":root,\n[data-theme='default'] {\n\t--lp-component-filter-color-bg-clearable: rgb(0 0 0 / 0.15);\n\t--lp-component-filter-color-bg-clearable-focus: rgb(0 0 0 / 0.2);\n\t--lp-component-filter-color-border-clearable-focus: var(--lp-color-gray-800);\n}\n\n[data-theme='dark'] {\n\t--lp-component-filter-color-bg-clearable: rgb(248 248 248 / 0.15);\n\t--lp-component-filter-color-bg-clearable-focus: rgb(248 248 248 / 0.2);\n\t--lp-component-filter-color-border-clearable-focus: var(--lp-color-gray-500);\n}\n\n.filter {\n\tfont-family: var(--lp-font-family-base);\n}\n\n.buttonContainer {\n\tcursor: pointer;\n\tdisplay: inline-flex;\n\talign-items: center;\n\tposition: relative;\n}\n\n.button {\n\tborder-radius: var(--lp-border-radius-medium);\n\tpadding-top: 0;\n\tpadding-bottom: 0;\n\tline-height: 2rem;\n\tdisplay: flex;\n\talign-items: center;\n\tmargin: 0;\n\tcolor: var(--lp-color-text-ui-primary-base);\n\tbackground-color: var(--lp-color-bg-interactive-secondary-base);\n}\n\n.appliedButton {\n\tcolor: var(--lp-color-text-ui-primary-base);\n\theight: 1.25rem;\n\tbackground-color: var(--lp-color-bg-interactive-secondary-hover);\n\tpadding: 0.125rem 0.375rem;\n\tborder-radius: 0.125rem;\n\tdisplay: flex;\n}\n\n.button,\n.appliedButton {\n\tfont-family: inherit;\n\tfont-size: 0.8125rem;\n\tcursor: pointer;\n\tborder-width: var(--lp-border-width-200);\n\tborder-style: solid;\n\tborder-color: transparent;\n\n\t&:hover {\n\t\tbackground-color: var(--lp-color-bg-interactive-secondary-hover);\n\t\tborder-color: var(--lp-color-border-interactive-secondary-hover);\n\t}\n\n\t&:focus-visible {\n\t\toutline: none;\n\t\tborder-color: var(--lp-color-border-interactive-secondary-focus);\n\t\tbox-shadow:\n\t\t\t0 0 0 2px var(--lp-color-bg-ui-primary),\n\t\t\t0 0 0 4px var(--lp-color-shadow-interactive-focus);\n\t}\n}\n\n.name {\n\tmargin-right: 0.3125rem;\n\tfont-weight: var(--lp-font-weight-medium);\n}\n\n.appliedName {\n\tmargin-right: 0.1875rem;\n}\n\n.description {\n\tcolor: var(--lp-color-text-ui-primary-base);\n\tfont-weight: var(--lp-font-weight-medium);\n}\n\n.description,\n.appliedDescription {\n\tmargin-right: 0.3125rem;\n\tmax-width: 10rem;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\twhite-space: nowrap;\n}\n\n.clear {\n\tcursor: pointer;\n\tpadding: 0.1875rem;\n}\n\n.button.isClearable {\n\tpadding-right: 1.9375rem;\n\tbackground-color: var(--lp-component-filter-color-bg-clearable);\n\n\t&:focus,\n\t&:hover,\n\t&:active {\n\t\tbackground-color: var(--lp-component-filter-color-bg-clearable-focus);\n\t\tborder-color: var(--lp-component-filter-color-border-clearable-focus);\n\t}\n}\n\n.button:hover:not(.isClearable),\n.button:focus:not(.isClearable),\n[data-state='open'] .button:not(.isClearable) {\n\tbackground-color: var(--lp-color-bg-interactive-secondary-hover);\n\tborder-color: var(--lp-color-border-interactive-secondary-hover);\n}\n\n.button:focus:not(:focus-visible):not(.isClearable) {\n\t&:hover {\n\t\tbackground-color: var(--lp-color-bg-interactive-secondary-hover);\n\t}\n}\n\n.clearTooltip {\n\tline-height: 1;\n\tposition: absolute;\n\tright: 0.4375rem;\n}\n\n.filterClearButton {\n\ttext-decoration: none;\n\tcolor: var(--lp-color-text-interactive-destructive);\n\tfont-size: 0.8125rem;\n\tfont-weight: var(--lp-font-weight-medium);\n\tpadding: 0.625rem;\n\twidth: 100%;\n\tborder-bottom: 1px solid var(--lp-color-border-interactive-secondary-base);\n}\n\n.filterClearButton:active,\n.filterClearButton:focus,\n.filterClearButton:hover {\n\toutline: none;\n\tbox-shadow: unset;\n\tcolor: var(--lp-color-text-interactive-destructive);\n}\n\n.filterClearButton:active {\n\tborder-bottom-color: var(--lp-color-border-interactive-secondary-active);\n\tbackground-color: var(--lp-color-bg-interactive-secondary-active);\n}\n\n.filterClearButton:focus {\n\tborder-bottom-color: var(--lp-color-border-interactive-secondary-focus);\n\tbackground-color: var(--lp-color-bg-interactive-secondary-focus);\n}\n\n.filterClearButton:hover {\n\tborder-bottom-color: var(--lp-color-border-interactive-secondary-hover);\n\tbackground-color: var(--lp-color-bg-interactive-secondary-hover);\n}\n","import type { ReactNode } from 'react';\n\nimport { Icon } from '@launchpad-ui/icons';\nimport { cx } from 'classix';\nimport { Children, forwardRef } from 'react';\n\nimport styles from './styles/Filter.module.css';\n\ntype AppliedFilterButtonProps = {\n\tname?: ReactNode;\n\tclassName?: string;\n\tchildren: ReactNode;\n\tonClickFilterButton?(): void;\n\t'data-test-id'?: string;\n};\n\ntype Ref = HTMLButtonElement;\n\nconst AppliedFilterButton = forwardRef<Ref, AppliedFilterButtonProps>((props, ref) => {\n\tconst {\n\t\tname,\n\t\tclassName,\n\t\tchildren,\n\t\tonClickFilterButton,\n\t\t'data-test-id': testId = 'applied-filter-button',\n\t} = props;\n\n\tconst hasDescription = Children.count(children) !== 0;\n\n\treturn (\n\t\t<div data-test-id={testId}>\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\taria-haspopup\n\t\t\t\tclassName={cx(styles.appliedButton, className)}\n\t\t\t\tref={ref}\n\t\t\t\tonClick={onClickFilterButton}\n\t\t\t>\n\t\t\t\t{name && (\n\t\t\t\t\t<span className={styles.appliedName} data-test-id={`${testId}-name`}>\n\t\t\t\t\t\t{name}\n\t\t\t\t\t\t{hasDescription && ':'}\n\t\t\t\t\t</span>\n\t\t\t\t)}\n\t\t\t\t{hasDescription && (\n\t\t\t\t\t<span className={styles.appliedDescription} data-test-id={`${testId}-description`}>\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</span>\n\t\t\t\t)}\n\t\t\t\t<Icon name=\"chevron-down\" size=\"small\" data-test-id={`${testId}-expand`} />\n\t\t\t</button>\n\t\t</div>\n\t);\n});\n\nAppliedFilterButton.displayName = 'AppliedFilterButton';\n\nexport type { AppliedFilterButtonProps };\nexport { AppliedFilterButton };\n","import type { MenuProps } from '@launchpad-ui/menu';\nimport type { ChangeEvent, ReactNode } from 'react';\n\nimport { Button } from '@launchpad-ui/button';\nimport { Icon } from '@launchpad-ui/icons';\nimport { Menu, MenuDivider, MenuItem, MenuSearch } from '@launchpad-ui/menu';\n\nimport styles from './styles/Filter.module.css';\n\n// biome-ignore lint/suspicious/noExplicitAny: ignore\ntype FilterOption<T = any> = {\n\tname?: ReactNode;\n\tisDisabled?: boolean;\n\tisDivider?: boolean;\n\tisChecked?: boolean;\n\tvalue: T | null;\n\tprojKey?: string;\n\tnested?: boolean;\n\tgroupHeader?: boolean;\n};\n\ntype FilterMenuProps = Pick<MenuProps<string>, 'enableVirtualization' | 'size' | 'data-test-id'> & {\n\toptions: FilterOption[];\n\tonClearFilter?(): void;\n\tenableSearch?: boolean;\n\tsearchValue?: string;\n\tsearchId?: string;\n\tsearchPlaceholder?: string;\n\tsearchAriaLabel?: string;\n\tonSearchChange?(event: ChangeEvent<HTMLInputElement>): void;\n\tonSelect?(): void;\n\tisLoading?: boolean;\n\tdisabledOptionTooltip?: string;\n};\n\nconst FilterMenu = ({\n\toptions,\n\tonClearFilter,\n\tenableSearch,\n\tsearchValue,\n\tsearchPlaceholder,\n\tsearchAriaLabel,\n\tsearchId,\n\tonSelect,\n\tonSearchChange,\n\tisLoading = false,\n\tdisabledOptionTooltip,\n\tenableVirtualization,\n\tsize,\n\t'data-test-id': testId = 'filter-menu',\n}: FilterMenuProps) => {\n\tconst filterOptions = isLoading\n\t\t? [{ name: 'loading...', value: 'loading...', isDisabled: true }]\n\t\t: options;\n\n\treturn (\n\t\t<>\n\t\t\t{onClearFilter && (\n\t\t\t\t<Button\n\t\t\t\t\ttabIndex={0}\n\t\t\t\t\tclassName={styles.filterClearButton}\n\t\t\t\t\tonClick={onClearFilter}\n\t\t\t\t\tkind=\"link\"\n\t\t\t\t\tdata-test-id=\"clear-filter-button\"\n\t\t\t\t>\n\t\t\t\t\tCLEAR FILTER\n\t\t\t\t</Button>\n\t\t\t)}\n\t\t\t<Menu\n\t\t\t\tenableVirtualization={enableVirtualization}\n\t\t\t\tsize={size}\n\t\t\t\tdata-test-id={testId}\n\t\t\t\tonSelect={onSelect}\n\t\t\t>\n\t\t\t\t{enableSearch && (\n\t\t\t\t\t<MenuSearch\n\t\t\t\t\t\tvalue={searchValue}\n\t\t\t\t\t\tid={searchId}\n\t\t\t\t\t\tplaceholder={searchPlaceholder}\n\t\t\t\t\t\tonChange={onSearchChange}\n\t\t\t\t\t\tariaLabel={searchAriaLabel}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t\t{filterOptions.map((option, index) => {\n\t\t\t\t\tif (option.isDivider) {\n\t\t\t\t\t\t// biome-ignore lint/suspicious/noArrayIndexKey: ignore\n\t\t\t\t\t\treturn <MenuDivider key={`divider-${index}`} />;\n\t\t\t\t\t}\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\titem={option}\n\t\t\t\t\t\t\tdisabled={option.isDisabled}\n\t\t\t\t\t\t\ticon={option.isChecked ? <Icon name=\"check\" /> : undefined}\n\t\t\t\t\t\t\tkey={option.value}\n\t\t\t\t\t\t\trole=\"menuitemradio\"\n\t\t\t\t\t\t\taria-checked={option.isChecked ? 'true' : undefined}\n\t\t\t\t\t\t\tnested={option.nested}\n\t\t\t\t\t\t\tgroupHeader={option.groupHeader}\n\t\t\t\t\t\t\ttooltip={\n\t\t\t\t\t\t\t\toption.isDisabled && disabledOptionTooltip ? disabledOptionTooltip : undefined\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\ttooltipPlacement=\"right\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{option.name}\n\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t</Menu>\n\t\t</>\n\t);\n};\n\nexport { FilterMenu };\nexport type { FilterOption, FilterMenuProps };\n","import type { ChangeEvent, ReactNode } from 'react';\nimport type { FilterOption } from './FilterMenu';\n\nimport { Dropdown } from '@launchpad-ui/dropdown';\n\nimport { AppliedFilterButton } from './AppliedFilterButton';\nimport { FilterMenu } from './FilterMenu';\n\nconst SEARCH_INPUT_THRESHOLD = 4;\n\ntype AppliedFilterProps = {\n\tsearchValue?: string;\n\tonSearchChange?(event: ChangeEvent<HTMLInputElement>): void;\n\tonClearFilter?(): void;\n\tsearchPlaceholder?: string;\n\tname?: ReactNode;\n\tdescription: ReactNode;\n\toptions: FilterOption[];\n\tclassName?: string;\n\tonStateChange?({ isOpen }: { isOpen?: boolean }): void;\n\tonSelect?(item: FilterOption): void;\n\tisEmpty?: boolean;\n\tisLoading?: boolean;\n\tonClickFilterButton?(): void;\n\tsearchAriaLabel?: string;\n\tsearchId?: string;\n\t'data-test-id'?: string;\n};\n\n/**\n * @deprecated use `Menu` from `@launchpad-ui/components` instead\n *\n * https://launchpad.launchdarkly.com/?path=/docs/components-collections-menu--docs\n */\nconst AppliedFilter = ({\n\tsearchValue,\n\tonSearchChange,\n\tsearchPlaceholder,\n\tname,\n\tdescription,\n\toptions,\n\tclassName,\n\tisEmpty,\n\tisLoading,\n\tonClickFilterButton,\n\tonClearFilter,\n\tsearchAriaLabel,\n\tsearchId,\n\t'data-test-id': testId = 'applied-filter',\n\t...props\n}: AppliedFilterProps) => {\n\tconst enableSearch =\n\t\tonSearchChange && (!!searchValue || options.length > SEARCH_INPUT_THRESHOLD || !isEmpty);\n\n\treturn (\n\t\t<Dropdown targetClassName={className} placement=\"bottom-start\" enableArrow={false} {...props}>\n\t\t\t<AppliedFilterButton\n\t\t\t\tdata-test-id={testId}\n\t\t\t\tname={name}\n\t\t\t\tonClickFilterButton={onClickFilterButton}\n\t\t\t>\n\t\t\t\t{description}\n\t\t\t</AppliedFilterButton>\n\t\t\t<FilterMenu\n\t\t\t\toptions={options}\n\t\t\t\tsearchValue={searchValue}\n\t\t\t\tsearchPlaceholder={searchPlaceholder}\n\t\t\t\tenableSearch={enableSearch}\n\t\t\t\tsearchAriaLabel={searchAriaLabel}\n\t\t\t\tsearchId={searchId}\n\t\t\t\tonSearchChange={onSearchChange}\n\t\t\t\tonClearFilter={onClearFilter}\n\t\t\t\tisLoading={isLoading}\n\t\t\t/>\n\t\t</Dropdown>\n\t);\n};\n\nexport type { AppliedFilterProps };\nexport { AppliedFilter };\n","import type { JSX, MouseEvent, ReactNode, SyntheticEvent } from 'react';\n\nimport { IconButton } from '@launchpad-ui/button';\nimport { Icon } from '@launchpad-ui/icons';\nimport { Tooltip } from '@launchpad-ui/tooltip';\nimport { VisuallyHidden } from '@react-aria/visually-hidden';\nimport { cx } from 'classix';\nimport { Children, forwardRef, useId } from 'react';\n\nimport styles from './styles/Filter.module.css';\n\ntype FilterButtonProps = {\n\tname: ReactNode;\n\thideName?: boolean;\n\tisClearable?: boolean;\n\tonClear?(event: SyntheticEvent): void;\n\tclassName?: string;\n\tisSelected?: boolean;\n\tclearTooltip?: string | JSX.Element;\n\tchildren?: ReactNode;\n\tdisabled?: boolean;\n\tonClickFilterButton?(): void;\n\t'data-test-id'?: string;\n\tariaLabel?: string;\n};\n\ntype Ref = HTMLButtonElement;\n\nconst FilterButton = forwardRef<Ref, FilterButtonProps>((props, ref) => {\n\tconst {\n\t\tchildren,\n\t\tname,\n\t\thideName,\n\t\tisClearable,\n\t\tclearTooltip = 'Clear filter',\n\t\tonClear,\n\t\tdisabled,\n\t\tisSelected,\n\t\tonClickFilterButton,\n\t\tclassName,\n\t\t'data-test-id': testId = 'filter-button',\n\t\tariaLabel = 'Clear filter',\n\t\t...rest\n\t} = props;\n\tconst nameId = useId();\n\tconst descriptionId = useId();\n\n\tconst hasDescription = Children.count(children) !== 0;\n\n\tconst nameElement = (\n\t\t<span className={styles.name}>\n\t\t\t{name}\n\t\t\t{hasDescription && ':'}\n\t\t</span>\n\t);\n\n\tconst isDisabled = disabled;\n\n\tconst handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n\t\tif (isDisabled) return event.preventDefault();\n\t\tonClickFilterButton?.();\n\t};\n\n\treturn (\n\t\t<div className={styles.buttonContainer} data-test-id={testId}>\n\t\t\t<button\n\t\t\t\t{...rest}\n\t\t\t\ttype=\"button\"\n\t\t\t\taria-labelledby={`${nameId} ${hasDescription ? descriptionId : ''}`}\n\t\t\t\taria-haspopup\n\t\t\t\tdisabled={isDisabled}\n\t\t\t\taria-disabled={isDisabled}\n\t\t\t\tclassName={cx(styles.button, className, (isClearable || isSelected) && styles.isClearable)}\n\t\t\t\tref={ref}\n\t\t\t\tonClick={handleClick}\n\t\t\t>\n\t\t\t\t{hideName ? (\n\t\t\t\t\t<VisuallyHidden id={nameId}>{nameElement}</VisuallyHidden>\n\t\t\t\t) : (\n\t\t\t\t\t<span id={nameId}>{nameElement}</span>\n\t\t\t\t)}\n\t\t\t\t{hasDescription && (\n\t\t\t\t\t<span id={descriptionId} className={styles.description}>\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</span>\n\t\t\t\t)}\n\t\t\t\t{!isClearable && <Icon name=\"chevron-down\" size=\"small\" />}\n\t\t\t</button>\n\t\t\t{isClearable && (\n\t\t\t\t<Tooltip targetClassName={styles.clearTooltip} content={clearTooltip}>\n\t\t\t\t\t<IconButton\n\t\t\t\t\t\taria-label={ariaLabel}\n\t\t\t\t\t\tclassName={styles.clear}\n\t\t\t\t\t\tdata-test-id=\"clear-filter-button\"\n\t\t\t\t\t\ticon={<Icon name=\"cancel\" size=\"small\" />}\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\tonClick={onClear}\n\t\t\t\t\t/>\n\t\t\t\t</Tooltip>\n\t\t\t)}\n\t\t</div>\n\t);\n});\n\nFilterButton.displayName = 'FilterButton';\n\nexport { FilterButton };\nexport type { FilterButtonProps };\n","import type { MenuProps } from '@launchpad-ui/menu';\nimport type { ChangeEvent, ReactNode, SyntheticEvent } from 'react';\nimport type { FilterOption } from './FilterMenu';\n\nimport { Dropdown } from '@launchpad-ui/dropdown';\nimport { cx } from 'classix';\n\nimport { FilterButton } from './FilterButton';\nimport { FilterMenu } from './FilterMenu';\nimport styles from './styles/Filter.module.css';\n\nconst SEARCH_INPUT_THRESHOLD = 4;\n\ntype FilterProps = Pick<MenuProps<string>, 'size' | 'enableVirtualization'> & {\n\tsearchValue?: string;\n\tonSearchChange?(event: ChangeEvent<HTMLInputElement>): void;\n\tsearchPlaceholder?: string;\n\tsearchAriaLabel?: string;\n\tname: ReactNode;\n\thideName?: boolean;\n\tdescription: ReactNode;\n\toptions: FilterOption[];\n\tisClearable?: boolean;\n\tonClear?(): void;\n\tclassName?: string;\n\tonStateChange?({ isOpen }: { isOpen?: boolean }): void;\n\tisSelected?: boolean;\n\tsearchId?: string;\n\tonSelect?(item: FilterOption): void;\n\tisEmpty?: boolean;\n\tisLoading?: boolean;\n\tdisabled?: boolean;\n\tonClickFilterButton?(): void;\n\tdisabledOptionTooltip?: string;\n\t'data-test-id'?: string;\n\ttriggerTestId?: string;\n\tclearAriaLabel?: string;\n};\n\n/**\n * @deprecated use `Menu` from `@launchpad-ui/components` instead\n *\n * https://launchpad.launchdarkly.com/?path=/docs/components-collections-menu--docs\n */\nconst Filter = ({\n\tsearchValue,\n\tonSearchChange,\n\tsearchPlaceholder,\n\tsearchAriaLabel,\n\tname,\n\thideName,\n\tdescription,\n\toptions,\n\tisClearable,\n\tonClear,\n\tisSelected,\n\tclassName,\n\tisEmpty,\n\tsearchId,\n\tisLoading,\n\tonClickFilterButton,\n\tdisabledOptionTooltip,\n\t'data-test-id': testId = 'filter',\n\tsize,\n\tdisabled,\n\tenableVirtualization,\n\tclearAriaLabel,\n\t...props\n}: FilterProps) => {\n\tconst enableSearch =\n\t\tonSearchChange && (!!searchValue || options.length > SEARCH_INPUT_THRESHOLD || !isEmpty);\n\n\tconst dropdownClasses = cx(styles.filter, className);\n\n\tconst handleClear = (event: SyntheticEvent) => {\n\t\tevent.preventDefault();\n\t\tonClear?.();\n\t};\n\n\treturn (\n\t\t<Dropdown\n\t\t\ttargetTestId={testId}\n\t\t\tdisabled={disabled}\n\t\t\ttargetClassName={dropdownClasses}\n\t\t\t{...props}\n\t\t>\n\t\t\t<FilterButton\n\t\t\t\tisClearable={isClearable}\n\t\t\t\tonClear={handleClear}\n\t\t\t\tname={name}\n\t\t\t\thideName={hideName}\n\t\t\t\tdisabled={disabled}\n\t\t\t\tisSelected={isSelected}\n\t\t\t\tonClickFilterButton={onClickFilterButton}\n\t\t\t\tariaLabel={clearAriaLabel}\n\t\t\t>\n\t\t\t\t{description}\n\t\t\t</FilterButton>\n\t\t\t<FilterMenu\n\t\t\t\toptions={options}\n\t\t\t\tsearchId={searchId}\n\t\t\t\tsearchValue={searchValue}\n\t\t\t\tsearchPlaceholder={searchPlaceholder}\n\t\t\t\tsearchAriaLabel={searchAriaLabel}\n\t\t\t\tenableSearch={enableSearch}\n\t\t\t\tonSearchChange={onSearchChange}\n\t\t\t\tisLoading={isLoading}\n\t\t\t\tdisabledOptionTooltip={disabledOptionTooltip}\n\t\t\t\tsize={size}\n\t\t\t\tenableVirtualization={enableVirtualization}\n\t\t\t/>\n\t\t</Dropdown>\n\t);\n};\n\nexport { Filter };\nexport type { FilterProps };\n"],"mappings":"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"}
package/dist/index.js DELETED
@@ -1,271 +0,0 @@
1
- require('./style.css');
2
- var __create = Object.create;
3
- var __defProp = Object.defineProperty;
4
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
- var __getOwnPropNames = Object.getOwnPropertyNames;
6
- var __getProtoOf = Object.getPrototypeOf;
7
- var __hasOwnProp = Object.prototype.hasOwnProperty;
8
- var __copyProps = (to, from, except, desc) => {
9
- if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
10
- key = keys[i];
11
- if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
12
- get: ((k) => from[k]).bind(null, key),
13
- enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
14
- });
15
- }
16
- return to;
17
- };
18
- var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
19
- value: mod,
20
- enumerable: true
21
- }) : target, mod));
22
- const __launchpad_ui_dropdown = __toESM(require("@launchpad-ui/dropdown"));
23
- const __launchpad_ui_icons = __toESM(require("@launchpad-ui/icons"));
24
- const classix = __toESM(require("classix"));
25
- const react = __toESM(require("react"));
26
- const react_jsx_runtime = __toESM(require("react/jsx-runtime"));
27
- const __launchpad_ui_button = __toESM(require("@launchpad-ui/button"));
28
- const __launchpad_ui_menu = __toESM(require("@launchpad-ui/menu"));
29
- const __launchpad_ui_tooltip = __toESM(require("@launchpad-ui/tooltip"));
30
- const __react_aria_visually_hidden = __toESM(require("@react-aria/visually-hidden"));
31
- const appliedButton = "vLReaG_appliedButton";
32
- const appliedDescription = "vLReaG_appliedDescription";
33
- const appliedName = "vLReaG_appliedName";
34
- const button = "vLReaG_button";
35
- const buttonContainer = "vLReaG_buttonContainer";
36
- const clear = "vLReaG_clear";
37
- const clearTooltip = "vLReaG_clearTooltip";
38
- const description = "vLReaG_description";
39
- const filter = "vLReaG_filter";
40
- const filterClearButton = "vLReaG_filterClearButton";
41
- const isClearable = "vLReaG_isClearable";
42
- const name = "vLReaG_name";
43
- var Filter_module_default = {
44
- appliedButton,
45
- appliedDescription,
46
- appliedName,
47
- button,
48
- buttonContainer,
49
- clear,
50
- clearTooltip,
51
- description,
52
- filter,
53
- filterClearButton,
54
- isClearable,
55
- name
56
- };
57
- const AppliedFilterButton = /* @__PURE__ */ (0, react.forwardRef)((props, ref) => {
58
- const { name: name$1, className, children, onClickFilterButton, "data-test-id": testId = "applied-filter-button" } = props;
59
- const hasDescription = react.Children.count(children) !== 0;
60
- return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
61
- "data-test-id": testId,
62
- children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
63
- type: "button",
64
- "aria-haspopup": true,
65
- className: (0, classix.cx)(Filter_module_default.appliedButton, className),
66
- ref,
67
- onClick: onClickFilterButton,
68
- children: [
69
- name$1 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
70
- className: Filter_module_default.appliedName,
71
- "data-test-id": `${testId}-name`,
72
- children: [name$1, hasDescription && ":"]
73
- }),
74
- hasDescription && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
75
- className: Filter_module_default.appliedDescription,
76
- "data-test-id": `${testId}-description`,
77
- children
78
- }),
79
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__launchpad_ui_icons.Icon, {
80
- name: "chevron-down",
81
- size: "small",
82
- "data-test-id": `${testId}-expand`
83
- })
84
- ]
85
- })
86
- });
87
- });
88
- AppliedFilterButton.displayName = "AppliedFilterButton";
89
- const FilterMenu = ({ options, onClearFilter, enableSearch, searchValue, searchPlaceholder, searchAriaLabel, searchId, onSelect, onSearchChange, isLoading = false, disabledOptionTooltip, enableVirtualization, size, "data-test-id": testId = "filter-menu" }) => {
90
- const filterOptions = isLoading ? [{
91
- name: "loading...",
92
- value: "loading...",
93
- isDisabled: true
94
- }] : options;
95
- return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [onClearFilter && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__launchpad_ui_button.Button, {
96
- tabIndex: 0,
97
- className: Filter_module_default.filterClearButton,
98
- onClick: onClearFilter,
99
- kind: "link",
100
- "data-test-id": "clear-filter-button",
101
- children: "CLEAR FILTER"
102
- }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__launchpad_ui_menu.Menu, {
103
- enableVirtualization,
104
- size,
105
- "data-test-id": testId,
106
- onSelect,
107
- children: [enableSearch && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__launchpad_ui_menu.MenuSearch, {
108
- value: searchValue,
109
- id: searchId,
110
- placeholder: searchPlaceholder,
111
- onChange: onSearchChange,
112
- ariaLabel: searchAriaLabel
113
- }), filterOptions.map((option, index) => {
114
- if (option.isDivider) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__launchpad_ui_menu.MenuDivider, {}, `divider-${index}`);
115
- return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__launchpad_ui_menu.MenuItem, {
116
- item: option,
117
- disabled: option.isDisabled,
118
- icon: option.isChecked ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__launchpad_ui_icons.Icon, { name: "check" }) : void 0,
119
- role: "menuitemradio",
120
- "aria-checked": option.isChecked ? "true" : void 0,
121
- nested: option.nested,
122
- groupHeader: option.groupHeader,
123
- tooltip: option.isDisabled && disabledOptionTooltip ? disabledOptionTooltip : void 0,
124
- tooltipPlacement: "right",
125
- children: option.name
126
- }, option.value);
127
- })]
128
- })] });
129
- };
130
- const SEARCH_INPUT_THRESHOLD$1 = 4;
131
- /**
132
- * @deprecated use `Menu` from `@launchpad-ui/components` instead
133
- *
134
- * https://launchpad.launchdarkly.com/?path=/docs/components-collections-menu--docs
135
- */
136
- const AppliedFilter = ({ searchValue, onSearchChange, searchPlaceholder, name: name$1, description: description$1, options, className, isEmpty, isLoading, onClickFilterButton, onClearFilter, searchAriaLabel, searchId, "data-test-id": testId = "applied-filter",...props }) => {
137
- const enableSearch = onSearchChange && (!!searchValue || options.length > SEARCH_INPUT_THRESHOLD$1 || !isEmpty);
138
- return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__launchpad_ui_dropdown.Dropdown, {
139
- targetClassName: className,
140
- placement: "bottom-start",
141
- enableArrow: false,
142
- ...props,
143
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AppliedFilterButton, {
144
- "data-test-id": testId,
145
- name: name$1,
146
- onClickFilterButton,
147
- children: description$1
148
- }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilterMenu, {
149
- options,
150
- searchValue,
151
- searchPlaceholder,
152
- enableSearch,
153
- searchAriaLabel,
154
- searchId,
155
- onSearchChange,
156
- onClearFilter,
157
- isLoading
158
- })]
159
- });
160
- };
161
- const FilterButton = /* @__PURE__ */ (0, react.forwardRef)((props, ref) => {
162
- const { children, name: name$1, hideName, isClearable: isClearable$1, clearTooltip: clearTooltip$1 = "Clear filter", onClear, disabled, isSelected, onClickFilterButton, className, "data-test-id": testId = "filter-button", ariaLabel = "Clear filter",...rest } = props;
163
- const nameId = (0, react.useId)();
164
- const descriptionId = (0, react.useId)();
165
- const hasDescription = react.Children.count(children) !== 0;
166
- const nameElement = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
167
- className: Filter_module_default.name,
168
- children: [name$1, hasDescription && ":"]
169
- });
170
- const isDisabled = disabled;
171
- const handleClick = (event) => {
172
- if (isDisabled) return event.preventDefault();
173
- onClickFilterButton?.();
174
- };
175
- return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
176
- className: Filter_module_default.buttonContainer,
177
- "data-test-id": testId,
178
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
179
- ...rest,
180
- type: "button",
181
- "aria-labelledby": `${nameId} ${hasDescription ? descriptionId : ""}`,
182
- "aria-haspopup": true,
183
- disabled: isDisabled,
184
- "aria-disabled": isDisabled,
185
- className: (0, classix.cx)(Filter_module_default.button, className, (isClearable$1 || isSelected) && Filter_module_default.isClearable),
186
- ref,
187
- onClick: handleClick,
188
- children: [
189
- hideName ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__react_aria_visually_hidden.VisuallyHidden, {
190
- id: nameId,
191
- children: nameElement
192
- }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
193
- id: nameId,
194
- children: nameElement
195
- }),
196
- hasDescription && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
197
- id: descriptionId,
198
- className: Filter_module_default.description,
199
- children
200
- }),
201
- !isClearable$1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__launchpad_ui_icons.Icon, {
202
- name: "chevron-down",
203
- size: "small"
204
- })
205
- ]
206
- }), isClearable$1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__launchpad_ui_tooltip.Tooltip, {
207
- targetClassName: Filter_module_default.clearTooltip,
208
- content: clearTooltip$1,
209
- children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__launchpad_ui_button.IconButton, {
210
- "aria-label": ariaLabel,
211
- className: Filter_module_default.clear,
212
- "data-test-id": "clear-filter-button",
213
- icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__launchpad_ui_icons.Icon, {
214
- name: "cancel",
215
- size: "small"
216
- }),
217
- size: "small",
218
- onClick: onClear
219
- })
220
- })]
221
- });
222
- });
223
- FilterButton.displayName = "FilterButton";
224
- const SEARCH_INPUT_THRESHOLD = 4;
225
- /**
226
- * @deprecated use `Menu` from `@launchpad-ui/components` instead
227
- *
228
- * https://launchpad.launchdarkly.com/?path=/docs/components-collections-menu--docs
229
- */
230
- const Filter = ({ searchValue, onSearchChange, searchPlaceholder, searchAriaLabel, name: name$1, hideName, description: description$1, options, isClearable: isClearable$1, onClear, isSelected, className, isEmpty, searchId, isLoading, onClickFilterButton, disabledOptionTooltip, "data-test-id": testId = "filter", size, disabled, enableVirtualization, clearAriaLabel,...props }) => {
231
- const enableSearch = onSearchChange && (!!searchValue || options.length > SEARCH_INPUT_THRESHOLD || !isEmpty);
232
- const dropdownClasses = (0, classix.cx)(Filter_module_default.filter, className);
233
- const handleClear = (event) => {
234
- event.preventDefault();
235
- onClear?.();
236
- };
237
- return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__launchpad_ui_dropdown.Dropdown, {
238
- targetTestId: testId,
239
- disabled,
240
- targetClassName: dropdownClasses,
241
- ...props,
242
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilterButton, {
243
- isClearable: isClearable$1,
244
- onClear: handleClear,
245
- name: name$1,
246
- hideName,
247
- disabled,
248
- isSelected,
249
- onClickFilterButton,
250
- ariaLabel: clearAriaLabel,
251
- children: description$1
252
- }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilterMenu, {
253
- options,
254
- searchId,
255
- searchValue,
256
- searchPlaceholder,
257
- searchAriaLabel,
258
- enableSearch,
259
- onSearchChange,
260
- isLoading,
261
- disabledOptionTooltip,
262
- size,
263
- enableVirtualization
264
- })]
265
- });
266
- };
267
- exports.AppliedFilter = AppliedFilter;
268
- exports.Filter = Filter;
269
- exports.FilterButton = FilterButton;
270
-
271
- //# sourceMappingURL=index.js.map
package/dist/index.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","names":["event: MouseEvent<HTMLButtonElement>","event: SyntheticEvent"],"sources":["../src/styles/Filter.module.css","../src/AppliedFilterButton.tsx","../src/FilterMenu.tsx","../src/AppliedFilter.tsx","../src/FilterButton.tsx","../src/Filter.tsx"],"sourcesContent":[":root,\n[data-theme='default'] {\n\t--lp-component-filter-color-bg-clearable: rgb(0 0 0 / 0.15);\n\t--lp-component-filter-color-bg-clearable-focus: rgb(0 0 0 / 0.2);\n\t--lp-component-filter-color-border-clearable-focus: var(--lp-color-gray-800);\n}\n\n[data-theme='dark'] {\n\t--lp-component-filter-color-bg-clearable: rgb(248 248 248 / 0.15);\n\t--lp-component-filter-color-bg-clearable-focus: rgb(248 248 248 / 0.2);\n\t--lp-component-filter-color-border-clearable-focus: var(--lp-color-gray-500);\n}\n\n.filter {\n\tfont-family: var(--lp-font-family-base);\n}\n\n.buttonContainer {\n\tcursor: pointer;\n\tdisplay: inline-flex;\n\talign-items: center;\n\tposition: relative;\n}\n\n.button {\n\tborder-radius: var(--lp-border-radius-medium);\n\tpadding-top: 0;\n\tpadding-bottom: 0;\n\tline-height: 2rem;\n\tdisplay: flex;\n\talign-items: center;\n\tmargin: 0;\n\tcolor: var(--lp-color-text-ui-primary-base);\n\tbackground-color: var(--lp-color-bg-interactive-secondary-base);\n}\n\n.appliedButton {\n\tcolor: var(--lp-color-text-ui-primary-base);\n\theight: 1.25rem;\n\tbackground-color: var(--lp-color-bg-interactive-secondary-hover);\n\tpadding: 0.125rem 0.375rem;\n\tborder-radius: 0.125rem;\n\tdisplay: flex;\n}\n\n.button,\n.appliedButton {\n\tfont-family: inherit;\n\tfont-size: 0.8125rem;\n\tcursor: pointer;\n\tborder-width: var(--lp-border-width-200);\n\tborder-style: solid;\n\tborder-color: transparent;\n\n\t&:hover {\n\t\tbackground-color: var(--lp-color-bg-interactive-secondary-hover);\n\t\tborder-color: var(--lp-color-border-interactive-secondary-hover);\n\t}\n\n\t&:focus-visible {\n\t\toutline: none;\n\t\tborder-color: var(--lp-color-border-interactive-secondary-focus);\n\t\tbox-shadow:\n\t\t\t0 0 0 2px var(--lp-color-bg-ui-primary),\n\t\t\t0 0 0 4px var(--lp-color-shadow-interactive-focus);\n\t}\n}\n\n.name {\n\tmargin-right: 0.3125rem;\n\tfont-weight: var(--lp-font-weight-medium);\n}\n\n.appliedName {\n\tmargin-right: 0.1875rem;\n}\n\n.description {\n\tcolor: var(--lp-color-text-ui-primary-base);\n\tfont-weight: var(--lp-font-weight-medium);\n}\n\n.description,\n.appliedDescription {\n\tmargin-right: 0.3125rem;\n\tmax-width: 10rem;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\twhite-space: nowrap;\n}\n\n.clear {\n\tcursor: pointer;\n\tpadding: 0.1875rem;\n}\n\n.button.isClearable {\n\tpadding-right: 1.9375rem;\n\tbackground-color: var(--lp-component-filter-color-bg-clearable);\n\n\t&:focus,\n\t&:hover,\n\t&:active {\n\t\tbackground-color: var(--lp-component-filter-color-bg-clearable-focus);\n\t\tborder-color: var(--lp-component-filter-color-border-clearable-focus);\n\t}\n}\n\n.button:hover:not(.isClearable),\n.button:focus:not(.isClearable),\n[data-state='open'] .button:not(.isClearable) {\n\tbackground-color: var(--lp-color-bg-interactive-secondary-hover);\n\tborder-color: var(--lp-color-border-interactive-secondary-hover);\n}\n\n.button:focus:not(:focus-visible):not(.isClearable) {\n\t&:hover {\n\t\tbackground-color: var(--lp-color-bg-interactive-secondary-hover);\n\t}\n}\n\n.clearTooltip {\n\tline-height: 1;\n\tposition: absolute;\n\tright: 0.4375rem;\n}\n\n.filterClearButton {\n\ttext-decoration: none;\n\tcolor: var(--lp-color-text-interactive-destructive);\n\tfont-size: 0.8125rem;\n\tfont-weight: var(--lp-font-weight-medium);\n\tpadding: 0.625rem;\n\twidth: 100%;\n\tborder-bottom: 1px solid var(--lp-color-border-interactive-secondary-base);\n}\n\n.filterClearButton:active,\n.filterClearButton:focus,\n.filterClearButton:hover {\n\toutline: none;\n\tbox-shadow: unset;\n\tcolor: var(--lp-color-text-interactive-destructive);\n}\n\n.filterClearButton:active {\n\tborder-bottom-color: var(--lp-color-border-interactive-secondary-active);\n\tbackground-color: var(--lp-color-bg-interactive-secondary-active);\n}\n\n.filterClearButton:focus {\n\tborder-bottom-color: var(--lp-color-border-interactive-secondary-focus);\n\tbackground-color: var(--lp-color-bg-interactive-secondary-focus);\n}\n\n.filterClearButton:hover {\n\tborder-bottom-color: var(--lp-color-border-interactive-secondary-hover);\n\tbackground-color: var(--lp-color-bg-interactive-secondary-hover);\n}\n","import type { ReactNode } from 'react';\n\nimport { Icon } from '@launchpad-ui/icons';\nimport { cx } from 'classix';\nimport { Children, forwardRef } from 'react';\n\nimport styles from './styles/Filter.module.css';\n\ntype AppliedFilterButtonProps = {\n\tname?: ReactNode;\n\tclassName?: string;\n\tchildren: ReactNode;\n\tonClickFilterButton?(): void;\n\t'data-test-id'?: string;\n};\n\ntype Ref = HTMLButtonElement;\n\nconst AppliedFilterButton = forwardRef<Ref, AppliedFilterButtonProps>((props, ref) => {\n\tconst {\n\t\tname,\n\t\tclassName,\n\t\tchildren,\n\t\tonClickFilterButton,\n\t\t'data-test-id': testId = 'applied-filter-button',\n\t} = props;\n\n\tconst hasDescription = Children.count(children) !== 0;\n\n\treturn (\n\t\t<div data-test-id={testId}>\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\taria-haspopup\n\t\t\t\tclassName={cx(styles.appliedButton, className)}\n\t\t\t\tref={ref}\n\t\t\t\tonClick={onClickFilterButton}\n\t\t\t>\n\t\t\t\t{name && (\n\t\t\t\t\t<span className={styles.appliedName} data-test-id={`${testId}-name`}>\n\t\t\t\t\t\t{name}\n\t\t\t\t\t\t{hasDescription && ':'}\n\t\t\t\t\t</span>\n\t\t\t\t)}\n\t\t\t\t{hasDescription && (\n\t\t\t\t\t<span className={styles.appliedDescription} data-test-id={`${testId}-description`}>\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</span>\n\t\t\t\t)}\n\t\t\t\t<Icon name=\"chevron-down\" size=\"small\" data-test-id={`${testId}-expand`} />\n\t\t\t</button>\n\t\t</div>\n\t);\n});\n\nAppliedFilterButton.displayName = 'AppliedFilterButton';\n\nexport type { AppliedFilterButtonProps };\nexport { AppliedFilterButton };\n","import type { MenuProps } from '@launchpad-ui/menu';\nimport type { ChangeEvent, ReactNode } from 'react';\n\nimport { Button } from '@launchpad-ui/button';\nimport { Icon } from '@launchpad-ui/icons';\nimport { Menu, MenuDivider, MenuItem, MenuSearch } from '@launchpad-ui/menu';\n\nimport styles from './styles/Filter.module.css';\n\n// biome-ignore lint/suspicious/noExplicitAny: ignore\ntype FilterOption<T = any> = {\n\tname?: ReactNode;\n\tisDisabled?: boolean;\n\tisDivider?: boolean;\n\tisChecked?: boolean;\n\tvalue: T | null;\n\tprojKey?: string;\n\tnested?: boolean;\n\tgroupHeader?: boolean;\n};\n\ntype FilterMenuProps = Pick<MenuProps<string>, 'enableVirtualization' | 'size' | 'data-test-id'> & {\n\toptions: FilterOption[];\n\tonClearFilter?(): void;\n\tenableSearch?: boolean;\n\tsearchValue?: string;\n\tsearchId?: string;\n\tsearchPlaceholder?: string;\n\tsearchAriaLabel?: string;\n\tonSearchChange?(event: ChangeEvent<HTMLInputElement>): void;\n\tonSelect?(): void;\n\tisLoading?: boolean;\n\tdisabledOptionTooltip?: string;\n};\n\nconst FilterMenu = ({\n\toptions,\n\tonClearFilter,\n\tenableSearch,\n\tsearchValue,\n\tsearchPlaceholder,\n\tsearchAriaLabel,\n\tsearchId,\n\tonSelect,\n\tonSearchChange,\n\tisLoading = false,\n\tdisabledOptionTooltip,\n\tenableVirtualization,\n\tsize,\n\t'data-test-id': testId = 'filter-menu',\n}: FilterMenuProps) => {\n\tconst filterOptions = isLoading\n\t\t? [{ name: 'loading...', value: 'loading...', isDisabled: true }]\n\t\t: options;\n\n\treturn (\n\t\t<>\n\t\t\t{onClearFilter && (\n\t\t\t\t<Button\n\t\t\t\t\ttabIndex={0}\n\t\t\t\t\tclassName={styles.filterClearButton}\n\t\t\t\t\tonClick={onClearFilter}\n\t\t\t\t\tkind=\"link\"\n\t\t\t\t\tdata-test-id=\"clear-filter-button\"\n\t\t\t\t>\n\t\t\t\t\tCLEAR FILTER\n\t\t\t\t</Button>\n\t\t\t)}\n\t\t\t<Menu\n\t\t\t\tenableVirtualization={enableVirtualization}\n\t\t\t\tsize={size}\n\t\t\t\tdata-test-id={testId}\n\t\t\t\tonSelect={onSelect}\n\t\t\t>\n\t\t\t\t{enableSearch && (\n\t\t\t\t\t<MenuSearch\n\t\t\t\t\t\tvalue={searchValue}\n\t\t\t\t\t\tid={searchId}\n\t\t\t\t\t\tplaceholder={searchPlaceholder}\n\t\t\t\t\t\tonChange={onSearchChange}\n\t\t\t\t\t\tariaLabel={searchAriaLabel}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t\t{filterOptions.map((option, index) => {\n\t\t\t\t\tif (option.isDivider) {\n\t\t\t\t\t\t// biome-ignore lint/suspicious/noArrayIndexKey: ignore\n\t\t\t\t\t\treturn <MenuDivider key={`divider-${index}`} />;\n\t\t\t\t\t}\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\titem={option}\n\t\t\t\t\t\t\tdisabled={option.isDisabled}\n\t\t\t\t\t\t\ticon={option.isChecked ? <Icon name=\"check\" /> : undefined}\n\t\t\t\t\t\t\tkey={option.value}\n\t\t\t\t\t\t\trole=\"menuitemradio\"\n\t\t\t\t\t\t\taria-checked={option.isChecked ? 'true' : undefined}\n\t\t\t\t\t\t\tnested={option.nested}\n\t\t\t\t\t\t\tgroupHeader={option.groupHeader}\n\t\t\t\t\t\t\ttooltip={\n\t\t\t\t\t\t\t\toption.isDisabled && disabledOptionTooltip ? disabledOptionTooltip : undefined\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\ttooltipPlacement=\"right\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{option.name}\n\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t</Menu>\n\t\t</>\n\t);\n};\n\nexport { FilterMenu };\nexport type { FilterOption, FilterMenuProps };\n","import type { ChangeEvent, ReactNode } from 'react';\nimport type { FilterOption } from './FilterMenu';\n\nimport { Dropdown } from '@launchpad-ui/dropdown';\n\nimport { AppliedFilterButton } from './AppliedFilterButton';\nimport { FilterMenu } from './FilterMenu';\n\nconst SEARCH_INPUT_THRESHOLD = 4;\n\ntype AppliedFilterProps = {\n\tsearchValue?: string;\n\tonSearchChange?(event: ChangeEvent<HTMLInputElement>): void;\n\tonClearFilter?(): void;\n\tsearchPlaceholder?: string;\n\tname?: ReactNode;\n\tdescription: ReactNode;\n\toptions: FilterOption[];\n\tclassName?: string;\n\tonStateChange?({ isOpen }: { isOpen?: boolean }): void;\n\tonSelect?(item: FilterOption): void;\n\tisEmpty?: boolean;\n\tisLoading?: boolean;\n\tonClickFilterButton?(): void;\n\tsearchAriaLabel?: string;\n\tsearchId?: string;\n\t'data-test-id'?: string;\n};\n\n/**\n * @deprecated use `Menu` from `@launchpad-ui/components` instead\n *\n * https://launchpad.launchdarkly.com/?path=/docs/components-collections-menu--docs\n */\nconst AppliedFilter = ({\n\tsearchValue,\n\tonSearchChange,\n\tsearchPlaceholder,\n\tname,\n\tdescription,\n\toptions,\n\tclassName,\n\tisEmpty,\n\tisLoading,\n\tonClickFilterButton,\n\tonClearFilter,\n\tsearchAriaLabel,\n\tsearchId,\n\t'data-test-id': testId = 'applied-filter',\n\t...props\n}: AppliedFilterProps) => {\n\tconst enableSearch =\n\t\tonSearchChange && (!!searchValue || options.length > SEARCH_INPUT_THRESHOLD || !isEmpty);\n\n\treturn (\n\t\t<Dropdown targetClassName={className} placement=\"bottom-start\" enableArrow={false} {...props}>\n\t\t\t<AppliedFilterButton\n\t\t\t\tdata-test-id={testId}\n\t\t\t\tname={name}\n\t\t\t\tonClickFilterButton={onClickFilterButton}\n\t\t\t>\n\t\t\t\t{description}\n\t\t\t</AppliedFilterButton>\n\t\t\t<FilterMenu\n\t\t\t\toptions={options}\n\t\t\t\tsearchValue={searchValue}\n\t\t\t\tsearchPlaceholder={searchPlaceholder}\n\t\t\t\tenableSearch={enableSearch}\n\t\t\t\tsearchAriaLabel={searchAriaLabel}\n\t\t\t\tsearchId={searchId}\n\t\t\t\tonSearchChange={onSearchChange}\n\t\t\t\tonClearFilter={onClearFilter}\n\t\t\t\tisLoading={isLoading}\n\t\t\t/>\n\t\t</Dropdown>\n\t);\n};\n\nexport type { AppliedFilterProps };\nexport { AppliedFilter };\n","import type { JSX, MouseEvent, ReactNode, SyntheticEvent } from 'react';\n\nimport { IconButton } from '@launchpad-ui/button';\nimport { Icon } from '@launchpad-ui/icons';\nimport { Tooltip } from '@launchpad-ui/tooltip';\nimport { VisuallyHidden } from '@react-aria/visually-hidden';\nimport { cx } from 'classix';\nimport { Children, forwardRef, useId } from 'react';\n\nimport styles from './styles/Filter.module.css';\n\ntype FilterButtonProps = {\n\tname: ReactNode;\n\thideName?: boolean;\n\tisClearable?: boolean;\n\tonClear?(event: SyntheticEvent): void;\n\tclassName?: string;\n\tisSelected?: boolean;\n\tclearTooltip?: string | JSX.Element;\n\tchildren?: ReactNode;\n\tdisabled?: boolean;\n\tonClickFilterButton?(): void;\n\t'data-test-id'?: string;\n\tariaLabel?: string;\n};\n\ntype Ref = HTMLButtonElement;\n\nconst FilterButton = forwardRef<Ref, FilterButtonProps>((props, ref) => {\n\tconst {\n\t\tchildren,\n\t\tname,\n\t\thideName,\n\t\tisClearable,\n\t\tclearTooltip = 'Clear filter',\n\t\tonClear,\n\t\tdisabled,\n\t\tisSelected,\n\t\tonClickFilterButton,\n\t\tclassName,\n\t\t'data-test-id': testId = 'filter-button',\n\t\tariaLabel = 'Clear filter',\n\t\t...rest\n\t} = props;\n\tconst nameId = useId();\n\tconst descriptionId = useId();\n\n\tconst hasDescription = Children.count(children) !== 0;\n\n\tconst nameElement = (\n\t\t<span className={styles.name}>\n\t\t\t{name}\n\t\t\t{hasDescription && ':'}\n\t\t</span>\n\t);\n\n\tconst isDisabled = disabled;\n\n\tconst handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n\t\tif (isDisabled) return event.preventDefault();\n\t\tonClickFilterButton?.();\n\t};\n\n\treturn (\n\t\t<div className={styles.buttonContainer} data-test-id={testId}>\n\t\t\t<button\n\t\t\t\t{...rest}\n\t\t\t\ttype=\"button\"\n\t\t\t\taria-labelledby={`${nameId} ${hasDescription ? descriptionId : ''}`}\n\t\t\t\taria-haspopup\n\t\t\t\tdisabled={isDisabled}\n\t\t\t\taria-disabled={isDisabled}\n\t\t\t\tclassName={cx(styles.button, className, (isClearable || isSelected) && styles.isClearable)}\n\t\t\t\tref={ref}\n\t\t\t\tonClick={handleClick}\n\t\t\t>\n\t\t\t\t{hideName ? (\n\t\t\t\t\t<VisuallyHidden id={nameId}>{nameElement}</VisuallyHidden>\n\t\t\t\t) : (\n\t\t\t\t\t<span id={nameId}>{nameElement}</span>\n\t\t\t\t)}\n\t\t\t\t{hasDescription && (\n\t\t\t\t\t<span id={descriptionId} className={styles.description}>\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</span>\n\t\t\t\t)}\n\t\t\t\t{!isClearable && <Icon name=\"chevron-down\" size=\"small\" />}\n\t\t\t</button>\n\t\t\t{isClearable && (\n\t\t\t\t<Tooltip targetClassName={styles.clearTooltip} content={clearTooltip}>\n\t\t\t\t\t<IconButton\n\t\t\t\t\t\taria-label={ariaLabel}\n\t\t\t\t\t\tclassName={styles.clear}\n\t\t\t\t\t\tdata-test-id=\"clear-filter-button\"\n\t\t\t\t\t\ticon={<Icon name=\"cancel\" size=\"small\" />}\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\tonClick={onClear}\n\t\t\t\t\t/>\n\t\t\t\t</Tooltip>\n\t\t\t)}\n\t\t</div>\n\t);\n});\n\nFilterButton.displayName = 'FilterButton';\n\nexport { FilterButton };\nexport type { FilterButtonProps };\n","import type { MenuProps } from '@launchpad-ui/menu';\nimport type { ChangeEvent, ReactNode, SyntheticEvent } from 'react';\nimport type { FilterOption } from './FilterMenu';\n\nimport { Dropdown } from '@launchpad-ui/dropdown';\nimport { cx } from 'classix';\n\nimport { FilterButton } from './FilterButton';\nimport { FilterMenu } from './FilterMenu';\nimport styles from './styles/Filter.module.css';\n\nconst SEARCH_INPUT_THRESHOLD = 4;\n\ntype FilterProps = Pick<MenuProps<string>, 'size' | 'enableVirtualization'> & {\n\tsearchValue?: string;\n\tonSearchChange?(event: ChangeEvent<HTMLInputElement>): void;\n\tsearchPlaceholder?: string;\n\tsearchAriaLabel?: string;\n\tname: ReactNode;\n\thideName?: boolean;\n\tdescription: ReactNode;\n\toptions: FilterOption[];\n\tisClearable?: boolean;\n\tonClear?(): void;\n\tclassName?: string;\n\tonStateChange?({ isOpen }: { isOpen?: boolean }): void;\n\tisSelected?: boolean;\n\tsearchId?: string;\n\tonSelect?(item: FilterOption): void;\n\tisEmpty?: boolean;\n\tisLoading?: boolean;\n\tdisabled?: boolean;\n\tonClickFilterButton?(): void;\n\tdisabledOptionTooltip?: string;\n\t'data-test-id'?: string;\n\ttriggerTestId?: string;\n\tclearAriaLabel?: string;\n};\n\n/**\n * @deprecated use `Menu` from `@launchpad-ui/components` instead\n *\n * https://launchpad.launchdarkly.com/?path=/docs/components-collections-menu--docs\n */\nconst Filter = ({\n\tsearchValue,\n\tonSearchChange,\n\tsearchPlaceholder,\n\tsearchAriaLabel,\n\tname,\n\thideName,\n\tdescription,\n\toptions,\n\tisClearable,\n\tonClear,\n\tisSelected,\n\tclassName,\n\tisEmpty,\n\tsearchId,\n\tisLoading,\n\tonClickFilterButton,\n\tdisabledOptionTooltip,\n\t'data-test-id': testId = 'filter',\n\tsize,\n\tdisabled,\n\tenableVirtualization,\n\tclearAriaLabel,\n\t...props\n}: FilterProps) => {\n\tconst enableSearch =\n\t\tonSearchChange && (!!searchValue || options.length > SEARCH_INPUT_THRESHOLD || !isEmpty);\n\n\tconst dropdownClasses = cx(styles.filter, className);\n\n\tconst handleClear = (event: SyntheticEvent) => {\n\t\tevent.preventDefault();\n\t\tonClear?.();\n\t};\n\n\treturn (\n\t\t<Dropdown\n\t\t\ttargetTestId={testId}\n\t\t\tdisabled={disabled}\n\t\t\ttargetClassName={dropdownClasses}\n\t\t\t{...props}\n\t\t>\n\t\t\t<FilterButton\n\t\t\t\tisClearable={isClearable}\n\t\t\t\tonClear={handleClear}\n\t\t\t\tname={name}\n\t\t\t\thideName={hideName}\n\t\t\t\tdisabled={disabled}\n\t\t\t\tisSelected={isSelected}\n\t\t\t\tonClickFilterButton={onClickFilterButton}\n\t\t\t\tariaLabel={clearAriaLabel}\n\t\t\t>\n\t\t\t\t{description}\n\t\t\t</FilterButton>\n\t\t\t<FilterMenu\n\t\t\t\toptions={options}\n\t\t\t\tsearchId={searchId}\n\t\t\t\tsearchValue={searchValue}\n\t\t\t\tsearchPlaceholder={searchPlaceholder}\n\t\t\t\tsearchAriaLabel={searchAriaLabel}\n\t\t\t\tenableSearch={enableSearch}\n\t\t\t\tonSearchChange={onSearchChange}\n\t\t\t\tisLoading={isLoading}\n\t\t\t\tdisabledOptionTooltip={disabledOptionTooltip}\n\t\t\t\tsize={size}\n\t\t\t\tenableVirtualization={enableVirtualization}\n\t\t\t/>\n\t\t</Dropdown>\n\t);\n};\n\nexport { Filter };\nexport type { FilterProps };\n"],"mappings":"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"}
package/dist/style.css DELETED
@@ -1,2 +0,0 @@
1
- :root,[data-theme=default]{--lp-component-filter-color-bg-clearable:#00000026;--lp-component-filter-color-bg-clearable-focus:#0003;--lp-component-filter-color-border-clearable-focus:var(--lp-color-gray-800)}[data-theme=dark]{--lp-component-filter-color-bg-clearable:#f8f8f826;--lp-component-filter-color-bg-clearable-focus:#f8f8f833;--lp-component-filter-color-border-clearable-focus:var(--lp-color-gray-500)}.vLReaG_filter{font-family:var(--lp-font-family-base)}.vLReaG_buttonContainer{cursor:pointer;align-items:center;display:inline-flex;position:relative}.vLReaG_button{border-radius:var(--lp-border-radius-medium);color:var(--lp-color-text-ui-primary-base);background-color:var(--lp-color-bg-interactive-secondary-base);align-items:center;margin:0;padding-top:0;padding-bottom:0;line-height:2rem;display:flex}.vLReaG_appliedButton{color:var(--lp-color-text-ui-primary-base);background-color:var(--lp-color-bg-interactive-secondary-hover);border-radius:.125rem;height:1.25rem;padding:.125rem .375rem;display:flex}.vLReaG_button,.vLReaG_appliedButton{cursor:pointer;border-width:var(--lp-border-width-200);border-style:solid;border-color:#0000;font-family:inherit;font-size:.8125rem}:is(.vLReaG_button,.vLReaG_appliedButton):hover{background-color:var(--lp-color-bg-interactive-secondary-hover);border-color:var(--lp-color-border-interactive-secondary-hover)}:is(.vLReaG_button,.vLReaG_appliedButton):focus-visible{border-color:var(--lp-color-border-interactive-secondary-focus);box-shadow:0 0 0 2px var(--lp-color-bg-ui-primary),0 0 0 4px var(--lp-color-shadow-interactive-focus);outline:none}.vLReaG_name{font-weight:var(--lp-font-weight-medium);margin-right:.3125rem}.vLReaG_appliedName{margin-right:.1875rem}.vLReaG_description{color:var(--lp-color-text-ui-primary-base);font-weight:var(--lp-font-weight-medium)}.vLReaG_description,.vLReaG_appliedDescription{text-overflow:ellipsis;white-space:nowrap;max-width:10rem;margin-right:.3125rem;overflow:hidden}.vLReaG_clear{cursor:pointer;padding:.1875rem}.vLReaG_button.vLReaG_isClearable{background-color:var(--lp-component-filter-color-bg-clearable);padding-right:1.9375rem}.vLReaG_button.vLReaG_isClearable:focus,.vLReaG_button.vLReaG_isClearable:hover,.vLReaG_button.vLReaG_isClearable:active{background-color:var(--lp-component-filter-color-bg-clearable-focus);border-color:var(--lp-component-filter-color-border-clearable-focus)}.vLReaG_button:hover:not(.vLReaG_isClearable),.vLReaG_button:focus:not(.vLReaG_isClearable),[data-state=open] .vLReaG_button:not(.vLReaG_isClearable){background-color:var(--lp-color-bg-interactive-secondary-hover);border-color:var(--lp-color-border-interactive-secondary-hover)}.vLReaG_button:focus:not(:focus-visible):not(.vLReaG_isClearable):hover{background-color:var(--lp-color-bg-interactive-secondary-hover)}.vLReaG_clearTooltip{line-height:1;position:absolute;right:.4375rem}.vLReaG_filterClearButton{color:var(--lp-color-text-interactive-destructive);font-size:.8125rem;font-weight:var(--lp-font-weight-medium);border-bottom:1px solid var(--lp-color-border-interactive-secondary-base);width:100%;padding:.625rem;text-decoration:none}.vLReaG_filterClearButton:active,.vLReaG_filterClearButton:focus,.vLReaG_filterClearButton:hover{box-shadow:unset;color:var(--lp-color-text-interactive-destructive);outline:none}.vLReaG_filterClearButton:active{border-bottom-color:var(--lp-color-border-interactive-secondary-active);background-color:var(--lp-color-bg-interactive-secondary-active)}.vLReaG_filterClearButton:focus{border-bottom-color:var(--lp-color-border-interactive-secondary-focus);background-color:var(--lp-color-bg-interactive-secondary-focus)}.vLReaG_filterClearButton:hover{border-bottom-color:var(--lp-color-border-interactive-secondary-hover);background-color:var(--lp-color-bg-interactive-secondary-hover)}
2
- /*$vite$:1*/