@launchpad-ui/filter 0.4.21 → 0.4.23

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.es.js CHANGED
@@ -8,24 +8,24 @@ import { Button, IconButton } from "@launchpad-ui/button";
8
8
  import { Menu, MenuSearch, MenuDivider, MenuItem } from "@launchpad-ui/menu";
9
9
  import { Tooltip } from "@launchpad-ui/tooltip";
10
10
  import { VisuallyHidden } from "@react-aria/visually-hidden";
11
- const filter = "_filter_1vdxa_1";
12
- const buttonContainer = "_buttonContainer_1vdxa_5";
13
- const button = "_button_1vdxa_5";
14
- const appliedButton = "_appliedButton_1vdxa_24";
15
- const name = "_name_1vdxa_59";
16
- const appliedName = "_appliedName_1vdxa_64";
17
- const description = "_description_1vdxa_68";
18
- const appliedDescription = "_appliedDescription_1vdxa_74";
19
- const clear = "_clear_1vdxa_82";
20
- const isClearable = "_isClearable_1vdxa_91";
21
- const clearTooltip = "_clearTooltip_1vdxa_123";
22
- const filterClearButton = "_filterClearButton_1vdxa_129";
11
+ const filter = "_filter_1cei5_1";
12
+ const buttonContainer = "_buttonContainer_1cei5_5";
13
+ const button = "_button_1cei5_5";
14
+ const appliedButton = "_appliedButton_1cei5_24";
15
+ const name = "_name_1cei5_59";
16
+ const appliedName = "_appliedName_1cei5_64";
17
+ const description = "_description_1cei5_68";
18
+ const appliedDescription = "_appliedDescription_1cei5_74";
19
+ const clear = "_clear_1cei5_82";
20
+ const isClearable = "_isClearable_1cei5_91";
21
+ const clearTooltip = "_clearTooltip_1cei5_123";
22
+ const filterClearButton = "_filterClearButton_1cei5_129";
23
23
  const styles = {
24
24
  filter,
25
25
  buttonContainer,
26
26
  button,
27
27
  appliedButton,
28
- "focus-visible": "_focus-visible_1vdxa_1",
28
+ "focus-visible": "_focus-visible_1cei5_1",
29
29
  name,
30
30
  appliedName,
31
31
  description,
@@ -1 +1 @@
1
- {"version":3,"file":"index.es.js","sources":["../src/AppliedFilterButton.tsx","../src/FilterMenu.tsx","../src/AppliedFilter.tsx","../src/FilterButton.tsx","../src/Filter.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { ExpandMore } from '@launchpad-ui/icons';\nimport { cx } from 'classix';\nimport { Children, forwardRef } from 'react';\n\nimport styles from './styles/Filter.module.css';\n\ntype AppliedFilterButtonProps = {\n name?: ReactNode;\n className?: string;\n children: ReactNode;\n onClickFilterButton?(): void;\n 'data-test-id': string;\n};\n\ntype Ref = HTMLButtonElement;\n\nconst AppliedFilterButton = forwardRef<Ref, AppliedFilterButtonProps>((props, ref) => {\n const { name, className, children, onClickFilterButton, 'data-test-id': testId } = props;\n\n const hasDescription = Children.count(children) !== 0;\n\n return (\n <div data-test-id={testId}>\n <button\n aria-haspopup\n className={cx(styles.appliedButton, className)}\n ref={ref}\n onClick={onClickFilterButton}\n >\n {name && (\n <span className={styles.appliedName} data-test-id={`${testId}-name`}>\n {name}\n {hasDescription && ':'}\n </span>\n )}\n {hasDescription && (\n <span className={styles.appliedDescription} data-test-id={`${testId}-description`}>\n {children}\n </span>\n )}\n <ExpandMore size=\"small\" data-test-id={`${testId}-expand`} />\n </button>\n </div>\n );\n});\n\nAppliedFilterButton.displayName = 'AppliedFilterButton';\n\nexport type { AppliedFilterButtonProps };\nexport { AppliedFilterButton };\n","import type { MenuProps } from '@launchpad-ui/menu';\nimport type { ChangeEvent, ReactNode } from 'react';\n\nimport { Button } from '@launchpad-ui/button';\nimport { Check } from '@launchpad-ui/icons';\nimport { Menu, MenuDivider, MenuItem, MenuSearch } from '@launchpad-ui/menu';\n\nimport styles from './styles/Filter.module.css';\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype FilterOption<T = any> = {\n name?: ReactNode;\n isDisabled?: boolean;\n isDivider?: boolean;\n isChecked?: boolean;\n value: T | null;\n projKey?: string;\n nested?: boolean;\n groupHeader?: boolean;\n};\n\ntype FilterMenuProps = Pick<MenuProps<string>, 'enableVirtualization' | 'size' | 'data-test-id'> & {\n options: FilterOption[];\n onClearFilter?(): void;\n enableSearch?: boolean;\n searchValue?: string;\n searchPlaceholder?: string;\n searchAriaLabel?: string;\n onSearchChange?(event: ChangeEvent<HTMLInputElement>): void;\n onSelect?(): void;\n isLoading?: boolean;\n disabledOptionTooltip?: string;\n};\n\nconst FilterMenu = ({\n options,\n onClearFilter,\n enableSearch,\n searchValue,\n searchPlaceholder,\n searchAriaLabel,\n onSelect,\n onSearchChange,\n isLoading = false,\n disabledOptionTooltip,\n enableVirtualization,\n size,\n 'data-test-id': testId = 'filter-menu',\n}: FilterMenuProps) => {\n const filterOptions = isLoading\n ? [{ name: 'loading...', value: 'loading...', isDisabled: true }]\n : options;\n\n return (\n <>\n {onClearFilter && (\n <Button\n tabIndex={0}\n className={styles.filterClearButton}\n onClick={onClearFilter}\n kind=\"link\"\n data-test-id=\"clear-filter-button\"\n >\n CLEAR FILTER\n </Button>\n )}\n <Menu\n enableVirtualization={enableVirtualization}\n size={size}\n data-test-id={testId}\n onSelect={onSelect}\n >\n {enableSearch && (\n <MenuSearch\n value={searchValue}\n 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 { ChangeEvent, ReactNode } from 'react';\n\nimport { Dropdown } from '@launchpad-ui/dropdown';\n\nimport { AppliedFilterButton } from './AppliedFilterButton';\nimport { FilterMenu } from './FilterMenu';\n\nconst SEARCH_INPUT_THRESHOLD = 4;\n\ntype AppliedFilterProps = {\n searchValue?: string;\n onSearchChange?(event: ChangeEvent<HTMLInputElement>): void;\n onClearFilter?(): void;\n searchPlaceholder?: string;\n name?: ReactNode;\n description: ReactNode;\n options: FilterOption[];\n className?: string;\n onStateChange?({ isOpen }: { isOpen?: boolean }): void;\n onSelect?(item: FilterOption): void;\n isEmpty?: boolean;\n isLoading?: boolean;\n onClickFilterButton?(): void;\n searchAriaLabel?: string;\n 'data-test-id'?: string;\n};\n\nconst AppliedFilter = ({\n searchValue,\n onSearchChange,\n searchPlaceholder,\n name,\n description,\n options,\n className,\n isEmpty,\n isLoading,\n onClickFilterButton,\n onClearFilter,\n searchAriaLabel,\n 'data-test-id': testId = 'applied-filter',\n ...props\n}: AppliedFilterProps) => {\n const enableSearch =\n onSearchChange && (!!searchValue || options.length > SEARCH_INPUT_THRESHOLD || !isEmpty);\n\n return (\n <Dropdown targetClassName={className} placement=\"bottom-start\" enableArrow={false} {...props}>\n <AppliedFilterButton\n data-test-id={testId}\n name={name}\n onClickFilterButton={onClickFilterButton}\n >\n {description}\n </AppliedFilterButton>\n\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, SyntheticEvent } from 'react';\n\nimport { IconButton } from '@launchpad-ui/button';\nimport { Close, ExpandMore } from '@launchpad-ui/icons';\nimport { Tooltip } from '@launchpad-ui/tooltip';\nimport { VisuallyHidden } from '@react-aria/visually-hidden';\nimport { cx } from 'classix';\nimport { Children, forwardRef, useId } from 'react';\n\nimport styles from './styles/Filter.module.css';\n\ntype FilterButtonProps = {\n name: ReactNode;\n hideName?: boolean;\n isClearable?: boolean;\n onClear?(event: SyntheticEvent): void;\n className?: string;\n isSelected?: boolean;\n clearTooltip?: string | JSX.Element;\n children?: ReactNode;\n onClickFilterButton?(): void;\n 'data-test-id'?: 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 'data-test-id': testId = 'filter-button',\n ...rest\n } = props;\n const nameId = useId();\n const descriptionId = useId();\n\n const hasDescription = Children.count(children) !== 0;\n\n const nameElement = (\n <span className={styles.name}>\n {name}\n {hasDescription && ':'}\n </span>\n );\n\n return (\n <div className={styles.buttonContainer} data-test-id={testId}>\n <button\n {...rest}\n aria-labelledby={`${nameId} ${hasDescription ? descriptionId : ''}`}\n aria-haspopup\n className={cx(styles.button, className, (isClearable || isSelected) && styles.isClearable)}\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={styles.description}>\n {children}\n </span>\n )}\n {!isClearable && <ExpandMore size=\"small\" />}\n </button>\n {isClearable && (\n <Tooltip targetClassName={styles.clearTooltip} content={clearTooltip}>\n <IconButton\n aria-label=\"Clear filter\"\n className={styles.clear}\n data-test-id=\"clear-filter-button\"\n icon={<Close size=\"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","import type { FilterOption } from './FilterMenu';\nimport type { MenuProps } from '@launchpad-ui/menu';\nimport type { ChangeEvent, ReactNode, SyntheticEvent } from 'react';\n\nimport { Dropdown } from '@launchpad-ui/dropdown';\nimport { cx } from 'classix';\n\nimport { FilterButton } from './FilterButton';\nimport { FilterMenu } from './FilterMenu';\nimport styles from './styles/Filter.module.css';\n\nconst SEARCH_INPUT_THRESHOLD = 4;\n\ntype FilterProps = Pick<MenuProps<string>, 'size' | 'enableVirtualization'> & {\n searchValue?: string;\n onSearchChange?(event: ChangeEvent<HTMLInputElement>): void;\n searchPlaceholder?: string;\n searchAriaLabel?: string;\n name: ReactNode;\n hideName?: boolean;\n description: ReactNode;\n options: FilterOption[];\n isClearable?: boolean;\n onClear?(): void;\n className?: string;\n onStateChange?({ isOpen }: { isOpen?: boolean }): void;\n isSelected?: boolean;\n onSelect?(item: FilterOption): void;\n isEmpty?: boolean;\n isLoading?: boolean;\n onClickFilterButton?(): void;\n disabledOptionTooltip?: string;\n 'data-test-id'?: string;\n triggerTestId?: 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 'data-test-id': testId = 'filter',\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(styles.filter, className);\n\n const handleClear = (event: SyntheticEvent) => {\n event.preventDefault();\n onClear?.();\n };\n\n return (\n <Dropdown targetTestId={testId} targetClassName={dropdownClasses} {...props}>\n <FilterButton\n isClearable={isClearable}\n onClear={handleClear}\n name={name}\n hideName={hideName}\n isSelected={isSelected}\n onClickFilterButton={onClickFilterButton}\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"],"names":["AppliedFilterButton","forwardRef","props","ref","name","className","children","onClickFilterButton","testId","hasDescription","Children","count","cx","styles","appliedButton","_jsxs","appliedName","_jsx","appliedDescription","displayName","FilterMenu","options","onClearFilter","enableSearch","searchValue","searchPlaceholder","searchAriaLabel","onSelect","onSearchChange","isLoading","disabledOptionTooltip","enableVirtualization","size","filterOptions","value","isDisabled","_Fragment","filterClearButton","map","option","index","isDivider","isChecked","Check","undefined","nested","groupHeader","SEARCH_INPUT_THRESHOLD","AppliedFilter","description","isEmpty","length","FilterButton","hideName","isClearable","clearTooltip","onClear","isSelected","rest","nameId","useId","descriptionId","nameElement","buttonContainer","button","clear","defaultProps","Filter","dropdownClasses","filter","handleClear","event","preventDefault"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBA,MAAMA,sBAAsBC,WAA0C,CAACC,OAAOC,QAAQ;AAC9E,QAAA;AAAA,IAAEC,MAAAA;AAAAA,IAAMC;AAAAA,IAAWC;AAAAA,IAAUC;AAAAA,IAAqB,gBAAgBC;AAAAA,EAAWN,IAAAA;AAEnF,QAAMO,iBAAiBC,SAASC,MAAML,QAAf,MAA6B;AAEpD,6BACE,OAAA;AAAA,IAAK,gBAAcE;AAAAA,IAAnB,+BACE,UAAA;AAAA,MACE,iBADF;AAAA,MAEE,WAAWI,GAAGC,OAAOC,eAAeT,SAAvB;AAAA,MACb;AAAA,MACA,SAASE;AAAAA,MAJX,UAAA,CAMGH,SACCW,qBAAA,QAAA;AAAA,QAAM,WAAWF,OAAOG;AAAAA,QAAa,gBAAe,GAAER;AAAAA,QAAtD,UAAA,CACGJ,OACAK,kBAAkB,GAFrB;AAAA,MAAA,CAPJ,GAYGA,kBACCQ,oBAAA,QAAA;AAAA,QAAM,WAAWJ,OAAOK;AAAAA,QAAoB,gBAAe,GAAEV;AAAAA,QAA7D;AAAA,MAAA,CAbJ,GAiBES,oBAAC,YAAD;AAAA,QAAY,MAAK;AAAA,QAAQ,gBAAe,GAAET;AAAAA,MAAAA,CAjB5C,CAAA;AAAA,IAAA,CAAA;AAAA,EAAA,CAFJ;AAuBD,CA5BqC;AA8BtCR,oBAAoBmB,cAAc;ACdlC,MAAMC,aAAa,CAAC;AAAA,EAClBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,YAAY;AAAA,EACZC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,gBAAgBxB,SAAS;AAbP,MAcG;AACfyB,QAAAA,gBAAgBJ,YAClB,CAAC;AAAA,IAAEzB,MAAM;AAAA,IAAc8B,OAAO;AAAA,IAAcC,YAAY;AAAA,EAAxD,CAAA,IACAd;AAEJ,8BACEe,UAAA;AAAA,IAAA,UACGd,CAAAA,iBACCL,oBAAC,QAAD;AAAA,MACE,UAAU;AAAA,MACV,WAAWJ,OAAOwB;AAAAA,MAClB,SAASf;AAAAA,MACT,MAAK;AAAA,MACL,gBAAa;AAAA,MALf,UAAA;AAAA,IAAA,CAFJ,GAYEP,qBAAC,MAAD;AAAA,MACE;AAAA,MACA;AAAA,MACA,gBAAcP;AAAAA,MACd;AAAA,MAJF,UAMGe,CAAAA,gBACCN,oBAAC,YAAD;AAAA,QACE,OAAOO;AAAAA,QACP,aAAaC;AAAAA,QACb,UAAUG;AAAAA,QACV,WAAWF;AAAAA,MAXjB,CAAA,GAcGO,cAAcK,IAAI,CAACC,QAAQC,UAAU;AACpC,YAAID,OAAOE,WAAW;AACpB,iBAAQxB,oBAAA,aAAD,CAAA,GAAmB,WAAUuB,OAA7B;AAAA,QACR;AACD,mCACG,UAAD;AAAA,UACE,MAAMD;AAAAA,UACN,UAAUA,OAAOJ;AAAAA,UACjB,MAAMI,OAAOG,YAAYC,QAAQ;AAAA,UAEjC,MAAK;AAAA,UACL,gBAAcJ,OAAOG,YAAY,SAASE;AAAAA,UAC1C,QAAQL,OAAOM;AAAAA,UACf,aAAaN,OAAOO;AAAAA,UACpB,SACEP,OAAOJ,cAAcL,wBAAwBA,wBAAwBc;AAAAA,UAEvE,kBAAiB;AAAA,UAZnB,UAcGL,OAAOnC;AAAAA,QAAAA,GAVHmC,OAAOL,KAJd;AAAA,MAAA,CALH,CAdH;AAAA,IAAA,CAZF,CAAA;AAAA,EAAA,CADF;AAqDD;AClGD,MAAMa,2BAAyB;AAoB/B,MAAMC,gBAAgB,CAAC;AAAA,EACrBxB;AAAAA,EACAI;AAAAA,EACAH;AAAAA,EACArB,MAAAA;AAAAA,EACA6C,aAAAA;AAAAA,EACA5B;AAAAA,EACAhB;AAAAA,EACA6C;AAAAA,EACArB;AAAAA,EACAtB;AAAAA,EACAe;AAAAA,EACAI;AAAAA,EACA,gBAAgBlB,SAAS;AAAA,KACtBN;AAdkB,MAeG;AAClBqB,QAAAA,eACJK,mBAAmB,CAAC,CAACJ,eAAeH,QAAQ8B,SAASJ,4BAA0B,CAACG;AAElF,8BACG,UAAD;AAAA,IAAU,iBAAiB7C;AAAAA,IAAW,WAAU;AAAA,IAAe,aAAa;AAAA,IAA5E,GAAuFH;AAAAA,IAAvF,UAAA,CACEe,oBAAC,qBAAD;AAAA,MACE,gBAAcT;AAAAA,MACd,MAAAJ;AAAA,MACA;AAAA,MAHF,UAKG6C;AAAAA,IAAAA,CANL,GASEhC,oBAAC,YAAD;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA,CAjBJ,CAAA;AAAA,EAAA,CADF;AAsBD;AC3CD,MAAMmC,eAAenD,WAAmC,CAACC,OAAOC,QAAQ;AAChE,QAAA;AAAA,IACJG;AAAAA,IACAF,MAAAA;AAAAA,IACAiD;AAAAA,IACAC,aAAAA;AAAAA,IACAC,cAAAA;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAlD;AAAAA,IACAF;AAAAA,IACA,gBAAgBG,SAAS;AAAA,OACtBkD;AAAAA,EACDxD,IAAAA;AACJ,QAAMyD,SAASC;AACf,QAAMC,gBAAgBD;AAEtB,QAAMnD,iBAAiBC,SAASC,MAAML,QAAf,MAA6B;AAE9CwD,QAAAA,mCACJ,QAAA;AAAA,IAAM,WAAWjD,OAAOT;AAAAA,IAAxB,UAAA,CACGA,OACAK,kBAAkB,GAFrB;AAAA,EAAA,CADF;AAOA,8BACE,OAAA;AAAA,IAAK,WAAWI,OAAOkD;AAAAA,IAAiB,gBAAcvD;AAAAA,IAAtD,UAAA,CACEO;SACM2C;AAAAA,MACJ,mBAAkB,GAAEC,UAAUlD,iBAAiBoD,gBAAgB;AAAA,MAC/D,iBAHF;AAAA,MAIE,WAAWjD,GAAGC,OAAOmD,QAAQ3D,YAAYiD,gBAAeG,eAAe5C,OAAOyC,WAAjE;AAAA,MACb;AAAA,MACA,SAAS/C;AAAAA,MANX,UAQG8C,CAAAA,WACCpC,oBAAC,gBAAD;AAAA,QAAgB,IAAI0C;AAAAA,QAApB,UAA6BG;AAAAA,MAAAA,CAA7B,IAEA7C,oBAAA,QAAA;AAAA,QAAM,IAAI0C;AAAAA,QAAV,UAAmBG;AAAAA,MAAAA,CAXvB,GAaGrD,kBACCQ,oBAAA,QAAA;AAAA,QAAM,IAAI4C;AAAAA,QAAe,WAAWhD,OAAOoC;AAAAA,QAA3C;AAAA,MAAA,CAAA,GAID,CAACK,oCAAgB,YAAD;AAAA,QAAY,MAAK;AAAA,MAAA,CAlBpC,CAAA;AAAA,IAAA,CAAA,GAoBCA,gBACCrC,oBAAC,SAAD;AAAA,MAAS,iBAAiBJ,OAAO0C;AAAAA,MAAc,SAASA;AAAAA,MAAxD,8BACG,YAAD;AAAA,QACE,cAAW;AAAA,QACX,WAAW1C,OAAOoD;AAAAA,QAClB,gBAAa;AAAA,QACb,0BAAO,OAAD;AAAA,UAAO,MAAK;AAAA,QAAA,CAJpB;AAAA,QAKE,SAAST;AAAAA,MAAAA,CALX;AAAA,IAAA,CAvBN,CAAA;AAAA,EAAA,CADF;AAmCD,CA7D8B;AA+D/BJ,aAAac,eAAe;AAAA,EAC1BX,cAAc;AADY;AAI5BH,aAAajC,cAAc;AClF3B,MAAM4B,yBAAyB;AAyB/B,MAAMoB,SAAS,CAAC;AAAA,EACd3C;AAAAA,EACAI;AAAAA,EACAH;AAAAA,EACAC;AAAAA,EACAtB,MAAAA;AAAAA,EACAiD;AAAAA,EACAJ,aAAAA;AAAAA,EACA5B;AAAAA,EACAiC,aAAAA;AAAAA,EACAE;AAAAA,EACAC;AAAAA,EACApD;AAAAA,EACA6C;AAAAA,EACArB;AAAAA,EACAtB;AAAAA,EACAuB;AAAAA,EACA,gBAAgBtB,SAAS;AAAA,EACzBwB;AAAAA,EACAD;AAAAA,KACG7B;AApBW,MAqBG;AACXqB,QAAAA,eACJK,mBAAmB,CAAC,CAACJ,eAAeH,QAAQ8B,SAASJ,0BAA0B,CAACG;AAElF,QAAMkB,kBAAkBxD,GAAGC,OAAOwD,QAAQhE,SAAhB;AAEpBiE,QAAAA,cAAc,CAACC,UAA0B;AAC7CA,UAAMC,eAAN;AACO;AAAA,EAAA;AAGT,8BACG,UAAD;AAAA,IAAU,cAAchE;AAAAA,IAAQ,iBAAiB4D;AAAAA,IAAjD,GAAsElE;AAAAA,IAAtE,UAAA,CACEe,oBAAC,cAAD;AAAA,MACE,aAAAqC;AAAA,MACA,SAASgB;AAAAA,MACT,MAAAlE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MANF,UAQG6C;AAAAA,IAAAA,CATL,GAWEhC,oBAAC,YAAD;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA,CArBJ,CAAA;AAAA,EAAA,CADF;AA0BD;"}
1
+ {"version":3,"file":"index.es.js","sources":["../src/AppliedFilterButton.tsx","../src/FilterMenu.tsx","../src/AppliedFilter.tsx","../src/FilterButton.tsx","../src/Filter.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { ExpandMore } from '@launchpad-ui/icons';\nimport { cx } from 'classix';\nimport { Children, forwardRef } from 'react';\n\nimport styles from './styles/Filter.module.css';\n\ntype AppliedFilterButtonProps = {\n name?: ReactNode;\n className?: string;\n children: ReactNode;\n onClickFilterButton?(): void;\n 'data-test-id': string;\n};\n\ntype Ref = HTMLButtonElement;\n\nconst AppliedFilterButton = forwardRef<Ref, AppliedFilterButtonProps>((props, ref) => {\n const { name, className, children, onClickFilterButton, 'data-test-id': testId } = props;\n\n const hasDescription = Children.count(children) !== 0;\n\n return (\n <div data-test-id={testId}>\n <button\n aria-haspopup\n className={cx(styles.appliedButton, className)}\n ref={ref}\n onClick={onClickFilterButton}\n >\n {name && (\n <span className={styles.appliedName} data-test-id={`${testId}-name`}>\n {name}\n {hasDescription && ':'}\n </span>\n )}\n {hasDescription && (\n <span className={styles.appliedDescription} data-test-id={`${testId}-description`}>\n {children}\n </span>\n )}\n <ExpandMore size=\"small\" data-test-id={`${testId}-expand`} />\n </button>\n </div>\n );\n});\n\nAppliedFilterButton.displayName = 'AppliedFilterButton';\n\nexport type { AppliedFilterButtonProps };\nexport { AppliedFilterButton };\n","import type { MenuProps } from '@launchpad-ui/menu';\nimport type { ChangeEvent, ReactNode } from 'react';\n\nimport { Button } from '@launchpad-ui/button';\nimport { Check } from '@launchpad-ui/icons';\nimport { Menu, MenuDivider, MenuItem, MenuSearch } from '@launchpad-ui/menu';\n\nimport styles from './styles/Filter.module.css';\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype FilterOption<T = any> = {\n name?: ReactNode;\n isDisabled?: boolean;\n isDivider?: boolean;\n isChecked?: boolean;\n value: T | null;\n projKey?: string;\n nested?: boolean;\n groupHeader?: boolean;\n};\n\ntype FilterMenuProps = Pick<MenuProps<string>, 'enableVirtualization' | 'size' | 'data-test-id'> & {\n options: FilterOption[];\n onClearFilter?(): void;\n enableSearch?: boolean;\n searchValue?: string;\n searchPlaceholder?: string;\n searchAriaLabel?: string;\n onSearchChange?(event: ChangeEvent<HTMLInputElement>): void;\n onSelect?(): void;\n isLoading?: boolean;\n disabledOptionTooltip?: string;\n};\n\nconst FilterMenu = ({\n options,\n onClearFilter,\n enableSearch,\n searchValue,\n searchPlaceholder,\n searchAriaLabel,\n onSelect,\n onSearchChange,\n isLoading = false,\n disabledOptionTooltip,\n enableVirtualization,\n size,\n 'data-test-id': testId = 'filter-menu',\n}: FilterMenuProps) => {\n const filterOptions = isLoading\n ? [{ name: 'loading...', value: 'loading...', isDisabled: true }]\n : options;\n\n return (\n <>\n {onClearFilter && (\n <Button\n tabIndex={0}\n className={styles.filterClearButton}\n onClick={onClearFilter}\n kind=\"link\"\n data-test-id=\"clear-filter-button\"\n >\n CLEAR FILTER\n </Button>\n )}\n <Menu\n enableVirtualization={enableVirtualization}\n size={size}\n data-test-id={testId}\n onSelect={onSelect}\n >\n {enableSearch && (\n <MenuSearch\n value={searchValue}\n 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 { ChangeEvent, ReactNode } from 'react';\n\nimport { Dropdown } from '@launchpad-ui/dropdown';\n\nimport { AppliedFilterButton } from './AppliedFilterButton';\nimport { FilterMenu } from './FilterMenu';\n\nconst SEARCH_INPUT_THRESHOLD = 4;\n\ntype AppliedFilterProps = {\n searchValue?: string;\n onSearchChange?(event: ChangeEvent<HTMLInputElement>): void;\n onClearFilter?(): void;\n searchPlaceholder?: string;\n name?: ReactNode;\n description: ReactNode;\n options: FilterOption[];\n className?: string;\n onStateChange?({ isOpen }: { isOpen?: boolean }): void;\n onSelect?(item: FilterOption): void;\n isEmpty?: boolean;\n isLoading?: boolean;\n onClickFilterButton?(): void;\n searchAriaLabel?: string;\n 'data-test-id'?: string;\n};\n\nconst AppliedFilter = ({\n searchValue,\n onSearchChange,\n searchPlaceholder,\n name,\n description,\n options,\n className,\n isEmpty,\n isLoading,\n onClickFilterButton,\n onClearFilter,\n searchAriaLabel,\n 'data-test-id': testId = 'applied-filter',\n ...props\n}: AppliedFilterProps) => {\n const enableSearch =\n onSearchChange && (!!searchValue || options.length > SEARCH_INPUT_THRESHOLD || !isEmpty);\n\n return (\n <Dropdown targetClassName={className} placement=\"bottom-start\" enableArrow={false} {...props}>\n <AppliedFilterButton\n data-test-id={testId}\n name={name}\n onClickFilterButton={onClickFilterButton}\n >\n {description}\n </AppliedFilterButton>\n\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, SyntheticEvent } from 'react';\n\nimport { IconButton } from '@launchpad-ui/button';\nimport { Close, ExpandMore } from '@launchpad-ui/icons';\nimport { Tooltip } from '@launchpad-ui/tooltip';\nimport { VisuallyHidden } from '@react-aria/visually-hidden';\nimport { cx } from 'classix';\nimport { Children, forwardRef, useId } from 'react';\n\nimport styles from './styles/Filter.module.css';\n\ntype FilterButtonProps = {\n name: ReactNode;\n hideName?: boolean;\n isClearable?: boolean;\n onClear?(event: SyntheticEvent): void;\n className?: string;\n isSelected?: boolean;\n clearTooltip?: string | JSX.Element;\n children?: ReactNode;\n onClickFilterButton?(): void;\n 'data-test-id'?: 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 'data-test-id': testId = 'filter-button',\n ...rest\n } = props;\n const nameId = useId();\n const descriptionId = useId();\n\n const hasDescription = Children.count(children) !== 0;\n\n const nameElement = (\n <span className={styles.name}>\n {name}\n {hasDescription && ':'}\n </span>\n );\n\n return (\n <div className={styles.buttonContainer} data-test-id={testId}>\n <button\n {...rest}\n aria-labelledby={`${nameId} ${hasDescription ? descriptionId : ''}`}\n aria-haspopup\n className={cx(styles.button, className, (isClearable || isSelected) && styles.isClearable)}\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={styles.description}>\n {children}\n </span>\n )}\n {!isClearable && <ExpandMore size=\"small\" />}\n </button>\n {isClearable && (\n <Tooltip targetClassName={styles.clearTooltip} content={clearTooltip}>\n <IconButton\n aria-label=\"Clear filter\"\n className={styles.clear}\n data-test-id=\"clear-filter-button\"\n icon={<Close size=\"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","import type { FilterOption } from './FilterMenu';\nimport type { MenuProps } from '@launchpad-ui/menu';\nimport type { ChangeEvent, ReactNode, SyntheticEvent } from 'react';\n\nimport { Dropdown } from '@launchpad-ui/dropdown';\nimport { cx } from 'classix';\n\nimport { FilterButton } from './FilterButton';\nimport { FilterMenu } from './FilterMenu';\nimport styles from './styles/Filter.module.css';\n\nconst SEARCH_INPUT_THRESHOLD = 4;\n\ntype FilterProps = Pick<MenuProps<string>, 'size' | 'enableVirtualization'> & {\n searchValue?: string;\n onSearchChange?(event: ChangeEvent<HTMLInputElement>): void;\n searchPlaceholder?: string;\n searchAriaLabel?: string;\n name: ReactNode;\n hideName?: boolean;\n description: ReactNode;\n options: FilterOption[];\n isClearable?: boolean;\n onClear?(): void;\n className?: string;\n onStateChange?({ isOpen }: { isOpen?: boolean }): void;\n isSelected?: boolean;\n onSelect?(item: FilterOption): void;\n isEmpty?: boolean;\n isLoading?: boolean;\n onClickFilterButton?(): void;\n disabledOptionTooltip?: string;\n 'data-test-id'?: string;\n triggerTestId?: 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 'data-test-id': testId = 'filter',\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(styles.filter, className);\n\n const handleClear = (event: SyntheticEvent) => {\n event.preventDefault();\n onClear?.();\n };\n\n return (\n <Dropdown targetTestId={testId} targetClassName={dropdownClasses} {...props}>\n <FilterButton\n isClearable={isClearable}\n onClear={handleClear}\n name={name}\n hideName={hideName}\n isSelected={isSelected}\n onClickFilterButton={onClickFilterButton}\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"],"names":["AppliedFilterButton","forwardRef","props","ref","name","className","children","onClickFilterButton","testId","hasDescription","Children","count","cx","styles","appliedButton","_jsxs","appliedName","_jsx","appliedDescription","displayName","FilterMenu","options","onClearFilter","enableSearch","searchValue","searchPlaceholder","searchAriaLabel","onSelect","onSearchChange","isLoading","disabledOptionTooltip","enableVirtualization","size","filterOptions","value","isDisabled","_Fragment","filterClearButton","map","option","index","isDivider","isChecked","Check","undefined","nested","groupHeader","SEARCH_INPUT_THRESHOLD","AppliedFilter","description","isEmpty","length","FilterButton","hideName","isClearable","clearTooltip","onClear","isSelected","rest","nameId","useId","descriptionId","nameElement","buttonContainer","button","clear","defaultProps","Filter","dropdownClasses","filter","handleClear","event","preventDefault"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBA,MAAMA,sBAAsBC,WAA0C,CAACC,OAAOC,QAAQ;AAC9E,QAAA;AAAA,IAAEC,MAAAA;AAAAA,IAAMC;AAAAA,IAAWC;AAAAA,IAAUC;AAAAA,IAAqB,gBAAgBC;AAAAA,EAAWN,IAAAA;AAEnF,QAAMO,iBAAiBC,SAASC,MAAML,QAAQ,MAAM;AAEpD,6BACE,OAAA;AAAA,IAAK,gBAAcE;AAAAA,IAAO,+BACxB,UAAA;AAAA,MACE,iBAAa;AAAA,MACb,WAAWI,GAAGC,OAAOC,eAAeT,SAAS;AAAA,MAC7C;AAAA,MACA,SAASE;AAAAA,MAAoB,UAAA,CAE5BH,SACCW,qBAAA,QAAA;AAAA,QAAM,WAAWF,OAAOG;AAAAA,QAAa,gBAAe,GAAER;AAAAA,QAAc,UAAA,CACjEJ,OACAK,kBAAkB,GAAG;AAAA,MAAA,CAEzB,GACAA,kBACCQ,oBAAA,QAAA;AAAA,QAAM,WAAWJ,OAAOK;AAAAA,QAAoB,gBAAe,GAAEV;AAAAA,QAAqB;AAAA,MAAA,CAGnF,GACDS,oBAAC,YAAU;AAAA,QAAC,MAAK;AAAA,QAAQ,gBAAe,GAAET;AAAAA,MAAAA,CAAmB,CAAA;AAAA,IAAA,CAAA;AAAA,EAAA,CAE3D;AAEV,CAAC;AAEDR,oBAAoBmB,cAAc;ACdlC,MAAMC,aAAa,CAAC;AAAA,EAClBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,YAAY;AAAA,EACZC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,gBAAgBxB,SAAS;AACV,MAAM;AACfyB,QAAAA,gBAAgBJ,YAClB,CAAC;AAAA,IAAEzB,MAAM;AAAA,IAAc8B,OAAO;AAAA,IAAcC,YAAY;AAAA,EAAM,CAAA,IAC9Dd;AAEJ,8BACEe,UAAA;AAAA,IAAA,UACGd,CAAAA,iBACCL,oBAAC,QAAM;AAAA,MACL,UAAU;AAAA,MACV,WAAWJ,OAAOwB;AAAAA,MAClB,SAASf;AAAAA,MACT,MAAK;AAAA,MACL,gBAAa;AAAA,MAAqB,UAAA;AAAA,IAAA,CAIrC,GACDP,qBAAC,MAAI;AAAA,MACH;AAAA,MACA;AAAA,MACA,gBAAcP;AAAAA,MACd;AAAA,MAAmB,UAElBe,CAAAA,gBACCN,oBAAC,YAAU;AAAA,QACT,OAAOO;AAAAA,QACP,aAAaC;AAAAA,QACb,UAAUG;AAAAA,QACV,WAAWF;AAAAA,MAEd,CAAA,GACAO,cAAcK,IAAI,CAACC,QAAQC,UAAU;AACpC,YAAID,OAAOE,WAAW;AACpB,iBAAQxB,oBAAA,aAAW,CAAA,GAAO,WAAUuB,OAAO;AAAA,QAC7C;AACA,mCACG,UAAQ;AAAA,UACP,MAAMD;AAAAA,UACN,UAAUA,OAAOJ;AAAAA,UACjB,MAAMI,OAAOG,YAAYC,QAAQ;AAAA,UAEjC,MAAK;AAAA,UACL,gBAAcJ,OAAOG,YAAY,SAASE;AAAAA,UAC1C,QAAQL,OAAOM;AAAAA,UACf,aAAaN,OAAOO;AAAAA,UACpB,SACEP,OAAOJ,cAAcL,wBAAwBA,wBAAwBc;AAAAA,UAEvE,kBAAiB;AAAA,UAAO,UAEvBL,OAAOnC;AAAAA,QAAAA,GAVHmC,OAAOL,KAAK;AAAA,MAAA,CAatB,CAAC;AAAA,IAAA,CACG,CAAA;AAAA,EAAA,CACN;AAEP;AClGA,MAAMa,2BAAyB;AAoB/B,MAAMC,gBAAgB,CAAC;AAAA,EACrBxB;AAAAA,EACAI;AAAAA,EACAH;AAAAA,EACArB,MAAAA;AAAAA,EACA6C,aAAAA;AAAAA,EACA5B;AAAAA,EACAhB;AAAAA,EACA6C;AAAAA,EACArB;AAAAA,EACAtB;AAAAA,EACAe;AAAAA,EACAI;AAAAA,EACA,gBAAgBlB,SAAS;AAAA,KACtBN;AACe,MAAM;AAClBqB,QAAAA,eACJK,mBAAmB,CAAC,CAACJ,eAAeH,QAAQ8B,SAASJ,4BAA0B,CAACG;AAElF,8BACG,UAAQ;AAAA,IAAC,iBAAiB7C;AAAAA,IAAW,WAAU;AAAA,IAAe,aAAa;AAAA,IAAM,GAAKH;AAAAA,IAAK,UAAA,CAC1Fe,oBAAC,qBAAmB;AAAA,MAClB,gBAAcT;AAAAA,MACd,MAAAJ;AAAA,MACA;AAAA,MAAyC,UAExC6C;AAAAA,IAAAA,CACmB,GAEtBhC,oBAAC,YAAU;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA,CACA,CAAA;AAAA,EAAA,CACO;AAEf;AC3CA,MAAMmC,eAAenD,WAAmC,CAACC,OAAOC,QAAQ;AAChE,QAAA;AAAA,IACJG;AAAAA,IACAF,MAAAA;AAAAA,IACAiD;AAAAA,IACAC,aAAAA;AAAAA,IACAC,cAAAA;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAlD;AAAAA,IACAF;AAAAA,IACA,gBAAgBG,SAAS;AAAA,OACtBkD;AAAAA,EACDxD,IAAAA;AACJ,QAAMyD,SAASC;AACf,QAAMC,gBAAgBD;AAEtB,QAAMnD,iBAAiBC,SAASC,MAAML,QAAQ,MAAM;AAE9CwD,QAAAA,mCACJ,QAAA;AAAA,IAAM,WAAWjD,OAAOT;AAAAA,IAAK,UAAA,CAC1BA,OACAK,kBAAkB,GAAG;AAAA,EAAA,CAEzB;AAED,8BACE,OAAA;AAAA,IAAK,WAAWI,OAAOkD;AAAAA,IAAiB,gBAAcvD;AAAAA,IAAO,UAC3D,CAAAO,qBAAA,UAAA;AAAA,MAAA,GACM2C;AAAAA,MACJ,mBAAkB,GAAEC,UAAUlD,iBAAiBoD,gBAAgB;AAAA,MAC/D,iBAAa;AAAA,MACb,WAAWjD,GAAGC,OAAOmD,QAAQ3D,YAAYiD,gBAAeG,eAAe5C,OAAOyC,WAAW;AAAA,MACzF;AAAA,MACA,SAAS/C;AAAAA,MAAoB,UAE5B8C,CAAAA,WACCpC,oBAAC,gBAAc;AAAA,QAAC,IAAI0C;AAAAA,QAAO,UAAEG;AAAAA,MAAAA,CAAW,IAExC7C,oBAAA,QAAA;AAAA,QAAM,IAAI0C;AAAAA,QAAO,UAAEG;AAAAA,MAAAA,CACpB,GACArD,kBACCQ,oBAAA,QAAA;AAAA,QAAM,IAAI4C;AAAAA,QAAe,WAAWhD,OAAOoC;AAAAA,QAAY;AAAA,MAC5C,CAAA,GAGZ,CAACK,oCAAgB,YAAU;AAAA,QAAC,MAAK;AAAA,MAAA,CAAU,CAAA;AAAA,IAAA,CAAA,GAE7CA,gBACCrC,oBAAC,SAAO;AAAA,MAAC,iBAAiBJ,OAAO0C;AAAAA,MAAc,SAASA;AAAAA,MAAa,8BAClE,YAAU;AAAA,QACT,cAAW;AAAA,QACX,WAAW1C,OAAOoD;AAAAA,QAClB,gBAAa;AAAA,QACb,0BAAO,OAAK;AAAA,UAAC,MAAK;AAAA,QAAA,CAAU;AAAA,QAC5B,SAAST;AAAAA,MAAAA,CAAQ;AAAA,IAAA,CAGtB,CAAA;AAAA,EAAA,CACG;AAEV,CAAC;AAEDJ,aAAac,eAAe;AAAA,EAC1BX,cAAc;AAChB;AAEAH,aAAajC,cAAc;AClF3B,MAAM4B,yBAAyB;AAyB/B,MAAMoB,SAAS,CAAC;AAAA,EACd3C;AAAAA,EACAI;AAAAA,EACAH;AAAAA,EACAC;AAAAA,EACAtB,MAAAA;AAAAA,EACAiD;AAAAA,EACAJ,aAAAA;AAAAA,EACA5B;AAAAA,EACAiC,aAAAA;AAAAA,EACAE;AAAAA,EACAC;AAAAA,EACApD;AAAAA,EACA6C;AAAAA,EACArB;AAAAA,EACAtB;AAAAA,EACAuB;AAAAA,EACA,gBAAgBtB,SAAS;AAAA,EACzBwB;AAAAA,EACAD;AAAAA,KACG7B;AACQ,MAAM;AACXqB,QAAAA,eACJK,mBAAmB,CAAC,CAACJ,eAAeH,QAAQ8B,SAASJ,0BAA0B,CAACG;AAElF,QAAMkB,kBAAkBxD,GAAGC,OAAOwD,QAAQhE,SAAS;AAE7CiE,QAAAA,cAAc,CAACC,UAA0B;AAC7CA,UAAMC,eAAgB;AACX;AAAA,EAAA;AAGb,8BACG,UAAQ;AAAA,IAAC,cAAchE;AAAAA,IAAQ,iBAAiB4D;AAAAA,IAAgB,GAAKlE;AAAAA,IAAK,UAAA,CACzEe,oBAAC,cAAY;AAAA,MACX,aAAAqC;AAAA,MACA,SAASgB;AAAAA,MACT,MAAAlE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAAyC,UAExC6C;AAAAA,IAAAA,CACY,GACfhC,oBAAC,YAAU;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA,CACA,CAAA;AAAA,EAAA,CACO;AAEf;"}
package/dist/index.js CHANGED
@@ -10,24 +10,24 @@ const button$1 = require("@launchpad-ui/button");
10
10
  const menu = require("@launchpad-ui/menu");
11
11
  const tooltip = require("@launchpad-ui/tooltip");
12
12
  const visuallyHidden = require("@react-aria/visually-hidden");
13
- const filter = "_filter_1vdxa_1";
14
- const buttonContainer = "_buttonContainer_1vdxa_5";
15
- const button = "_button_1vdxa_5";
16
- const appliedButton = "_appliedButton_1vdxa_24";
17
- const name = "_name_1vdxa_59";
18
- const appliedName = "_appliedName_1vdxa_64";
19
- const description = "_description_1vdxa_68";
20
- const appliedDescription = "_appliedDescription_1vdxa_74";
21
- const clear = "_clear_1vdxa_82";
22
- const isClearable = "_isClearable_1vdxa_91";
23
- const clearTooltip = "_clearTooltip_1vdxa_123";
24
- const filterClearButton = "_filterClearButton_1vdxa_129";
13
+ const filter = "_filter_1cei5_1";
14
+ const buttonContainer = "_buttonContainer_1cei5_5";
15
+ const button = "_button_1cei5_5";
16
+ const appliedButton = "_appliedButton_1cei5_24";
17
+ const name = "_name_1cei5_59";
18
+ const appliedName = "_appliedName_1cei5_64";
19
+ const description = "_description_1cei5_68";
20
+ const appliedDescription = "_appliedDescription_1cei5_74";
21
+ const clear = "_clear_1cei5_82";
22
+ const isClearable = "_isClearable_1cei5_91";
23
+ const clearTooltip = "_clearTooltip_1cei5_123";
24
+ const filterClearButton = "_filterClearButton_1cei5_129";
25
25
  const styles = {
26
26
  filter,
27
27
  buttonContainer,
28
28
  button,
29
29
  appliedButton,
30
- "focus-visible": "_focus-visible_1vdxa_1",
30
+ "focus-visible": "_focus-visible_1cei5_1",
31
31
  name,
32
32
  appliedName,
33
33
  description,
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../src/AppliedFilterButton.tsx","../src/FilterMenu.tsx","../src/AppliedFilter.tsx","../src/FilterButton.tsx","../src/Filter.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { ExpandMore } from '@launchpad-ui/icons';\nimport { cx } from 'classix';\nimport { Children, forwardRef } from 'react';\n\nimport styles from './styles/Filter.module.css';\n\ntype AppliedFilterButtonProps = {\n name?: ReactNode;\n className?: string;\n children: ReactNode;\n onClickFilterButton?(): void;\n 'data-test-id': string;\n};\n\ntype Ref = HTMLButtonElement;\n\nconst AppliedFilterButton = forwardRef<Ref, AppliedFilterButtonProps>((props, ref) => {\n const { name, className, children, onClickFilterButton, 'data-test-id': testId } = props;\n\n const hasDescription = Children.count(children) !== 0;\n\n return (\n <div data-test-id={testId}>\n <button\n aria-haspopup\n className={cx(styles.appliedButton, className)}\n ref={ref}\n onClick={onClickFilterButton}\n >\n {name && (\n <span className={styles.appliedName} data-test-id={`${testId}-name`}>\n {name}\n {hasDescription && ':'}\n </span>\n )}\n {hasDescription && (\n <span className={styles.appliedDescription} data-test-id={`${testId}-description`}>\n {children}\n </span>\n )}\n <ExpandMore size=\"small\" data-test-id={`${testId}-expand`} />\n </button>\n </div>\n );\n});\n\nAppliedFilterButton.displayName = 'AppliedFilterButton';\n\nexport type { AppliedFilterButtonProps };\nexport { AppliedFilterButton };\n","import type { MenuProps } from '@launchpad-ui/menu';\nimport type { ChangeEvent, ReactNode } from 'react';\n\nimport { Button } from '@launchpad-ui/button';\nimport { Check } from '@launchpad-ui/icons';\nimport { Menu, MenuDivider, MenuItem, MenuSearch } from '@launchpad-ui/menu';\n\nimport styles from './styles/Filter.module.css';\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype FilterOption<T = any> = {\n name?: ReactNode;\n isDisabled?: boolean;\n isDivider?: boolean;\n isChecked?: boolean;\n value: T | null;\n projKey?: string;\n nested?: boolean;\n groupHeader?: boolean;\n};\n\ntype FilterMenuProps = Pick<MenuProps<string>, 'enableVirtualization' | 'size' | 'data-test-id'> & {\n options: FilterOption[];\n onClearFilter?(): void;\n enableSearch?: boolean;\n searchValue?: string;\n searchPlaceholder?: string;\n searchAriaLabel?: string;\n onSearchChange?(event: ChangeEvent<HTMLInputElement>): void;\n onSelect?(): void;\n isLoading?: boolean;\n disabledOptionTooltip?: string;\n};\n\nconst FilterMenu = ({\n options,\n onClearFilter,\n enableSearch,\n searchValue,\n searchPlaceholder,\n searchAriaLabel,\n onSelect,\n onSearchChange,\n isLoading = false,\n disabledOptionTooltip,\n enableVirtualization,\n size,\n 'data-test-id': testId = 'filter-menu',\n}: FilterMenuProps) => {\n const filterOptions = isLoading\n ? [{ name: 'loading...', value: 'loading...', isDisabled: true }]\n : options;\n\n return (\n <>\n {onClearFilter && (\n <Button\n tabIndex={0}\n className={styles.filterClearButton}\n onClick={onClearFilter}\n kind=\"link\"\n data-test-id=\"clear-filter-button\"\n >\n CLEAR FILTER\n </Button>\n )}\n <Menu\n enableVirtualization={enableVirtualization}\n size={size}\n data-test-id={testId}\n onSelect={onSelect}\n >\n {enableSearch && (\n <MenuSearch\n value={searchValue}\n 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 { ChangeEvent, ReactNode } from 'react';\n\nimport { Dropdown } from '@launchpad-ui/dropdown';\n\nimport { AppliedFilterButton } from './AppliedFilterButton';\nimport { FilterMenu } from './FilterMenu';\n\nconst SEARCH_INPUT_THRESHOLD = 4;\n\ntype AppliedFilterProps = {\n searchValue?: string;\n onSearchChange?(event: ChangeEvent<HTMLInputElement>): void;\n onClearFilter?(): void;\n searchPlaceholder?: string;\n name?: ReactNode;\n description: ReactNode;\n options: FilterOption[];\n className?: string;\n onStateChange?({ isOpen }: { isOpen?: boolean }): void;\n onSelect?(item: FilterOption): void;\n isEmpty?: boolean;\n isLoading?: boolean;\n onClickFilterButton?(): void;\n searchAriaLabel?: string;\n 'data-test-id'?: string;\n};\n\nconst AppliedFilter = ({\n searchValue,\n onSearchChange,\n searchPlaceholder,\n name,\n description,\n options,\n className,\n isEmpty,\n isLoading,\n onClickFilterButton,\n onClearFilter,\n searchAriaLabel,\n 'data-test-id': testId = 'applied-filter',\n ...props\n}: AppliedFilterProps) => {\n const enableSearch =\n onSearchChange && (!!searchValue || options.length > SEARCH_INPUT_THRESHOLD || !isEmpty);\n\n return (\n <Dropdown targetClassName={className} placement=\"bottom-start\" enableArrow={false} {...props}>\n <AppliedFilterButton\n data-test-id={testId}\n name={name}\n onClickFilterButton={onClickFilterButton}\n >\n {description}\n </AppliedFilterButton>\n\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, SyntheticEvent } from 'react';\n\nimport { IconButton } from '@launchpad-ui/button';\nimport { Close, ExpandMore } from '@launchpad-ui/icons';\nimport { Tooltip } from '@launchpad-ui/tooltip';\nimport { VisuallyHidden } from '@react-aria/visually-hidden';\nimport { cx } from 'classix';\nimport { Children, forwardRef, useId } from 'react';\n\nimport styles from './styles/Filter.module.css';\n\ntype FilterButtonProps = {\n name: ReactNode;\n hideName?: boolean;\n isClearable?: boolean;\n onClear?(event: SyntheticEvent): void;\n className?: string;\n isSelected?: boolean;\n clearTooltip?: string | JSX.Element;\n children?: ReactNode;\n onClickFilterButton?(): void;\n 'data-test-id'?: 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 'data-test-id': testId = 'filter-button',\n ...rest\n } = props;\n const nameId = useId();\n const descriptionId = useId();\n\n const hasDescription = Children.count(children) !== 0;\n\n const nameElement = (\n <span className={styles.name}>\n {name}\n {hasDescription && ':'}\n </span>\n );\n\n return (\n <div className={styles.buttonContainer} data-test-id={testId}>\n <button\n {...rest}\n aria-labelledby={`${nameId} ${hasDescription ? descriptionId : ''}`}\n aria-haspopup\n className={cx(styles.button, className, (isClearable || isSelected) && styles.isClearable)}\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={styles.description}>\n {children}\n </span>\n )}\n {!isClearable && <ExpandMore size=\"small\" />}\n </button>\n {isClearable && (\n <Tooltip targetClassName={styles.clearTooltip} content={clearTooltip}>\n <IconButton\n aria-label=\"Clear filter\"\n className={styles.clear}\n data-test-id=\"clear-filter-button\"\n icon={<Close size=\"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","import type { FilterOption } from './FilterMenu';\nimport type { MenuProps } from '@launchpad-ui/menu';\nimport type { ChangeEvent, ReactNode, SyntheticEvent } from 'react';\n\nimport { Dropdown } from '@launchpad-ui/dropdown';\nimport { cx } from 'classix';\n\nimport { FilterButton } from './FilterButton';\nimport { FilterMenu } from './FilterMenu';\nimport styles from './styles/Filter.module.css';\n\nconst SEARCH_INPUT_THRESHOLD = 4;\n\ntype FilterProps = Pick<MenuProps<string>, 'size' | 'enableVirtualization'> & {\n searchValue?: string;\n onSearchChange?(event: ChangeEvent<HTMLInputElement>): void;\n searchPlaceholder?: string;\n searchAriaLabel?: string;\n name: ReactNode;\n hideName?: boolean;\n description: ReactNode;\n options: FilterOption[];\n isClearable?: boolean;\n onClear?(): void;\n className?: string;\n onStateChange?({ isOpen }: { isOpen?: boolean }): void;\n isSelected?: boolean;\n onSelect?(item: FilterOption): void;\n isEmpty?: boolean;\n isLoading?: boolean;\n onClickFilterButton?(): void;\n disabledOptionTooltip?: string;\n 'data-test-id'?: string;\n triggerTestId?: 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 'data-test-id': testId = 'filter',\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(styles.filter, className);\n\n const handleClear = (event: SyntheticEvent) => {\n event.preventDefault();\n onClear?.();\n };\n\n return (\n <Dropdown targetTestId={testId} targetClassName={dropdownClasses} {...props}>\n <FilterButton\n isClearable={isClearable}\n onClear={handleClear}\n name={name}\n hideName={hideName}\n isSelected={isSelected}\n onClickFilterButton={onClickFilterButton}\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"],"names":["AppliedFilterButton","forwardRef","props","ref","name","className","children","onClickFilterButton","testId","hasDescription","Children","count","cx","styles","appliedButton","_jsxs","appliedName","_jsx","appliedDescription","ExpandMore","displayName","FilterMenu","options","onClearFilter","enableSearch","searchValue","searchPlaceholder","searchAriaLabel","onSelect","onSearchChange","isLoading","disabledOptionTooltip","enableVirtualization","size","filterOptions","value","isDisabled","_Fragment","Button","filterClearButton","Menu","MenuSearch","map","option","index","isDivider","MenuDivider","MenuItem","isChecked","Check","undefined","nested","groupHeader","SEARCH_INPUT_THRESHOLD","AppliedFilter","description","isEmpty","length","Dropdown","FilterButton","hideName","isClearable","clearTooltip","onClear","isSelected","rest","nameId","useId","descriptionId","nameElement","buttonContainer","button","VisuallyHidden","Tooltip","IconButton","clear","Close","defaultProps","Filter","dropdownClasses","filter","handleClear","event","preventDefault"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBA,MAAMA,sBAAsBC,MAAAA,WAA0C,CAACC,OAAOC,QAAQ;AAC9E,QAAA;AAAA,IAAEC,MAAAA;AAAAA,IAAMC;AAAAA,IAAWC;AAAAA,IAAUC;AAAAA,IAAqB,gBAAgBC;AAAAA,EAAWN,IAAAA;AAEnF,QAAMO,iBAAiBC,MAAAA,SAASC,MAAML,QAAf,MAA6B;AAEpD,wCACE,OAAA;AAAA,IAAK,gBAAcE;AAAAA,IAAnB,0CACE,UAAA;AAAA,MACE,iBADF;AAAA,MAEE,WAAWI,QAAAA,GAAGC,OAAOC,eAAeT,SAAvB;AAAA,MACb;AAAA,MACA,SAASE;AAAAA,MAJX,UAAA,CAMGH,SACCW,2BAAA,KAAA,QAAA;AAAA,QAAM,WAAWF,OAAOG;AAAAA,QAAa,gBAAe,GAAER;AAAAA,QAAtD,UAAA,CACGJ,OACAK,kBAAkB,GAFrB;AAAA,MAAA,CAPJ,GAYGA,kBACCQ,2BAAA,IAAA,QAAA;AAAA,QAAM,WAAWJ,OAAOK;AAAAA,QAAoB,gBAAe,GAAEV;AAAAA,QAA7D;AAAA,MAAA,CAbJ,GAiBES,2BAAA,IAACE,kBAAD;AAAA,QAAY,MAAK;AAAA,QAAQ,gBAAe,GAAEX;AAAAA,MAAAA,CAjB5C,CAAA;AAAA,IAAA,CAAA;AAAA,EAAA,CAFJ;AAuBD,CA5BqC;AA8BtCR,oBAAoBoB,cAAc;ACdlC,MAAMC,aAAa,CAAC;AAAA,EAClBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,YAAY;AAAA,EACZC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,gBAAgBzB,SAAS;AAbP,MAcG;AACf0B,QAAAA,gBAAgBJ,YAClB,CAAC;AAAA,IAAE1B,MAAM;AAAA,IAAc+B,OAAO;AAAA,IAAcC,YAAY;AAAA,EAAxD,CAAA,IACAd;AAEJ,yCACEe,WAAAA,UAAA;AAAA,IAAA,UACGd,CAAAA,iBACCN,2BAAA,IAACqB,iBAAD;AAAA,MACE,UAAU;AAAA,MACV,WAAWzB,OAAO0B;AAAAA,MAClB,SAAShB;AAAAA,MACT,MAAK;AAAA,MACL,gBAAa;AAAA,MALf,UAAA;AAAA,IAAA,CAFJ,GAYER,2BAAA,KAACyB,WAAD;AAAA,MACE;AAAA,MACA;AAAA,MACA,gBAAchC;AAAAA,MACd;AAAA,MAJF,UAMGgB,CAAAA,gBACCP,2BAAA,IAACwB,iBAAD;AAAA,QACE,OAAOhB;AAAAA,QACP,aAAaC;AAAAA,QACb,UAAUG;AAAAA,QACV,WAAWF;AAAAA,MAXjB,CAAA,GAcGO,cAAcQ,IAAI,CAACC,QAAQC,UAAU;AACpC,YAAID,OAAOE,WAAW;AACpB,iBAAQ5B,2BAAAA,IAAA6B,KAAAA,aAAD,CAAA,GAAmB,WAAUF,OAA7B;AAAA,QACR;AACD,8CACGG,KAAAA,UAAD;AAAA,UACE,MAAMJ;AAAAA,UACN,UAAUA,OAAOP;AAAAA,UACjB,MAAMO,OAAOK,YAAYC,MAAAA,QAAQ;AAAA,UAEjC,MAAK;AAAA,UACL,gBAAcN,OAAOK,YAAY,SAASE;AAAAA,UAC1C,QAAQP,OAAOQ;AAAAA,UACf,aAAaR,OAAOS;AAAAA,UACpB,SACET,OAAOP,cAAcL,wBAAwBA,wBAAwBmB;AAAAA,UAEvE,kBAAiB;AAAA,UAZnB,UAcGP,OAAOvC;AAAAA,QAAAA,GAVHuC,OAAOR,KAJd;AAAA,MAAA,CALH,CAdH;AAAA,IAAA,CAZF,CAAA;AAAA,EAAA,CADF;AAqDD;AClGD,MAAMkB,2BAAyB;AAoB/B,MAAMC,gBAAgB,CAAC;AAAA,EACrB7B;AAAAA,EACAI;AAAAA,EACAH;AAAAA,EACAtB,MAAAA;AAAAA,EACAmD,aAAAA;AAAAA,EACAjC;AAAAA,EACAjB;AAAAA,EACAmD;AAAAA,EACA1B;AAAAA,EACAvB;AAAAA,EACAgB;AAAAA,EACAI;AAAAA,EACA,gBAAgBnB,SAAS;AAAA,KACtBN;AAdkB,MAeG;AAClBsB,QAAAA,eACJK,mBAAmB,CAAC,CAACJ,eAAeH,QAAQmC,SAASJ,4BAA0B,CAACG;AAElF,yCACGE,SAAAA,UAAD;AAAA,IAAU,iBAAiBrD;AAAAA,IAAW,WAAU;AAAA,IAAe,aAAa;AAAA,IAA5E,GAAuFH;AAAAA,IAAvF,UAAA,CACEe,2BAAA,IAAC,qBAAD;AAAA,MACE,gBAAcT;AAAAA,MACd,MAAAJ;AAAA,MACA;AAAA,MAHF,UAKGmD;AAAAA,IAAAA,CANL,GASEtC,2BAAA,IAAC,YAAD;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA,CAjBJ,CAAA;AAAA,EAAA,CADF;AAsBD;AC3CD,MAAM0C,eAAe1D,MAAAA,WAAmC,CAACC,OAAOC,QAAQ;AAChE,QAAA;AAAA,IACJG;AAAAA,IACAF,MAAAA;AAAAA,IACAwD;AAAAA,IACAC,aAAAA;AAAAA,IACAC,cAAAA;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAzD;AAAAA,IACAF;AAAAA,IACA,gBAAgBG,SAAS;AAAA,OACtByD;AAAAA,EACD/D,IAAAA;AACJ,QAAMgE,SAASC,MAAAA;AACf,QAAMC,gBAAgBD,MAAAA;AAEtB,QAAM1D,iBAAiBC,MAAAA,SAASC,MAAML,QAAf,MAA6B;AAE9C+D,QAAAA,8CACJ,QAAA;AAAA,IAAM,WAAWxD,OAAOT;AAAAA,IAAxB,UAAA,CACGA,OACAK,kBAAkB,GAFrB;AAAA,EAAA,CADF;AAOA,yCACE,OAAA;AAAA,IAAK,WAAWI,OAAOyD;AAAAA,IAAiB,gBAAc9D;AAAAA,IAAtD,UAAA,CACEO,2BAAA;SACMkD;AAAAA,MACJ,mBAAkB,GAAEC,UAAUzD,iBAAiB2D,gBAAgB;AAAA,MAC/D,iBAHF;AAAA,MAIE,WAAWxD,QAAAA,GAAGC,OAAO0D,QAAQlE,YAAYwD,gBAAeG,eAAenD,OAAOgD,WAAjE;AAAA,MACb;AAAA,MACA,SAAStD;AAAAA,MANX,UAQGqD,CAAAA,WACC3C,2BAAA,IAACuD,+BAAD;AAAA,QAAgB,IAAIN;AAAAA,QAApB,UAA6BG;AAAAA,MAAAA,CAA7B,IAEApD,2BAAA,IAAA,QAAA;AAAA,QAAM,IAAIiD;AAAAA,QAAV,UAAmBG;AAAAA,MAAAA,CAXvB,GAaG5D,kBACCQ,2BAAA,IAAA,QAAA;AAAA,QAAM,IAAImD;AAAAA,QAAe,WAAWvD,OAAO0C;AAAAA,QAA3C;AAAA,MAAA,CAAA,GAID,CAACM,+CAAgB1C,kBAAD;AAAA,QAAY,MAAK;AAAA,MAAA,CAlBpC,CAAA;AAAA,IAAA,CAAA,GAoBC0C,gBACC5C,2BAAA,IAACwD,iBAAD;AAAA,MAAS,iBAAiB5D,OAAOiD;AAAAA,MAAc,SAASA;AAAAA,MAAxD,yCACGY,qBAAD;AAAA,QACE,cAAW;AAAA,QACX,WAAW7D,OAAO8D;AAAAA,QAClB,gBAAa;AAAA,QACb,qCAAOC,aAAD;AAAA,UAAO,MAAK;AAAA,QAAA,CAJpB;AAAA,QAKE,SAASb;AAAAA,MAAAA,CALX;AAAA,IAAA,CAvBN,CAAA;AAAA,EAAA,CADF;AAmCD,CA7D8B;AA+D/BJ,aAAakB,eAAe;AAAA,EAC1Bf,cAAc;AADY;AAI5BH,aAAavC,cAAc;AClF3B,MAAMiC,yBAAyB;AAyB/B,MAAMyB,SAAS,CAAC;AAAA,EACdrD;AAAAA,EACAI;AAAAA,EACAH;AAAAA,EACAC;AAAAA,EACAvB,MAAAA;AAAAA,EACAwD;AAAAA,EACAL,aAAAA;AAAAA,EACAjC;AAAAA,EACAuC,aAAAA;AAAAA,EACAE;AAAAA,EACAC;AAAAA,EACA3D;AAAAA,EACAmD;AAAAA,EACA1B;AAAAA,EACAvB;AAAAA,EACAwB;AAAAA,EACA,gBAAgBvB,SAAS;AAAA,EACzByB;AAAAA,EACAD;AAAAA,KACG9B;AApBW,MAqBG;AACXsB,QAAAA,eACJK,mBAAmB,CAAC,CAACJ,eAAeH,QAAQmC,SAASJ,0BAA0B,CAACG;AAElF,QAAMuB,kBAAkBnE,QAAAA,GAAGC,OAAOmE,QAAQ3E,SAAhB;AAEpB4E,QAAAA,cAAc,CAACC,UAA0B;AAC7CA,UAAMC,eAAN;AACO;AAAA,EAAA;AAGT,yCACGzB,SAAAA,UAAD;AAAA,IAAU,cAAclD;AAAAA,IAAQ,iBAAiBuE;AAAAA,IAAjD,GAAsE7E;AAAAA,IAAtE,UAAA,CACEe,2BAAA,IAAC,cAAD;AAAA,MACE,aAAA4C;AAAA,MACA,SAASoB;AAAAA,MACT,MAAA7E;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MANF,UAQGmD;AAAAA,IAAAA,CATL,GAWEtC,2BAAA,IAAC,YAAD;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA,CArBJ,CAAA;AAAA,EAAA,CADF;AA0BD;;;;"}
1
+ {"version":3,"file":"index.js","sources":["../src/AppliedFilterButton.tsx","../src/FilterMenu.tsx","../src/AppliedFilter.tsx","../src/FilterButton.tsx","../src/Filter.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { ExpandMore } from '@launchpad-ui/icons';\nimport { cx } from 'classix';\nimport { Children, forwardRef } from 'react';\n\nimport styles from './styles/Filter.module.css';\n\ntype AppliedFilterButtonProps = {\n name?: ReactNode;\n className?: string;\n children: ReactNode;\n onClickFilterButton?(): void;\n 'data-test-id': string;\n};\n\ntype Ref = HTMLButtonElement;\n\nconst AppliedFilterButton = forwardRef<Ref, AppliedFilterButtonProps>((props, ref) => {\n const { name, className, children, onClickFilterButton, 'data-test-id': testId } = props;\n\n const hasDescription = Children.count(children) !== 0;\n\n return (\n <div data-test-id={testId}>\n <button\n aria-haspopup\n className={cx(styles.appliedButton, className)}\n ref={ref}\n onClick={onClickFilterButton}\n >\n {name && (\n <span className={styles.appliedName} data-test-id={`${testId}-name`}>\n {name}\n {hasDescription && ':'}\n </span>\n )}\n {hasDescription && (\n <span className={styles.appliedDescription} data-test-id={`${testId}-description`}>\n {children}\n </span>\n )}\n <ExpandMore size=\"small\" data-test-id={`${testId}-expand`} />\n </button>\n </div>\n );\n});\n\nAppliedFilterButton.displayName = 'AppliedFilterButton';\n\nexport type { AppliedFilterButtonProps };\nexport { AppliedFilterButton };\n","import type { MenuProps } from '@launchpad-ui/menu';\nimport type { ChangeEvent, ReactNode } from 'react';\n\nimport { Button } from '@launchpad-ui/button';\nimport { Check } from '@launchpad-ui/icons';\nimport { Menu, MenuDivider, MenuItem, MenuSearch } from '@launchpad-ui/menu';\n\nimport styles from './styles/Filter.module.css';\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype FilterOption<T = any> = {\n name?: ReactNode;\n isDisabled?: boolean;\n isDivider?: boolean;\n isChecked?: boolean;\n value: T | null;\n projKey?: string;\n nested?: boolean;\n groupHeader?: boolean;\n};\n\ntype FilterMenuProps = Pick<MenuProps<string>, 'enableVirtualization' | 'size' | 'data-test-id'> & {\n options: FilterOption[];\n onClearFilter?(): void;\n enableSearch?: boolean;\n searchValue?: string;\n searchPlaceholder?: string;\n searchAriaLabel?: string;\n onSearchChange?(event: ChangeEvent<HTMLInputElement>): void;\n onSelect?(): void;\n isLoading?: boolean;\n disabledOptionTooltip?: string;\n};\n\nconst FilterMenu = ({\n options,\n onClearFilter,\n enableSearch,\n searchValue,\n searchPlaceholder,\n searchAriaLabel,\n onSelect,\n onSearchChange,\n isLoading = false,\n disabledOptionTooltip,\n enableVirtualization,\n size,\n 'data-test-id': testId = 'filter-menu',\n}: FilterMenuProps) => {\n const filterOptions = isLoading\n ? [{ name: 'loading...', value: 'loading...', isDisabled: true }]\n : options;\n\n return (\n <>\n {onClearFilter && (\n <Button\n tabIndex={0}\n className={styles.filterClearButton}\n onClick={onClearFilter}\n kind=\"link\"\n data-test-id=\"clear-filter-button\"\n >\n CLEAR FILTER\n </Button>\n )}\n <Menu\n enableVirtualization={enableVirtualization}\n size={size}\n data-test-id={testId}\n onSelect={onSelect}\n >\n {enableSearch && (\n <MenuSearch\n value={searchValue}\n 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 { ChangeEvent, ReactNode } from 'react';\n\nimport { Dropdown } from '@launchpad-ui/dropdown';\n\nimport { AppliedFilterButton } from './AppliedFilterButton';\nimport { FilterMenu } from './FilterMenu';\n\nconst SEARCH_INPUT_THRESHOLD = 4;\n\ntype AppliedFilterProps = {\n searchValue?: string;\n onSearchChange?(event: ChangeEvent<HTMLInputElement>): void;\n onClearFilter?(): void;\n searchPlaceholder?: string;\n name?: ReactNode;\n description: ReactNode;\n options: FilterOption[];\n className?: string;\n onStateChange?({ isOpen }: { isOpen?: boolean }): void;\n onSelect?(item: FilterOption): void;\n isEmpty?: boolean;\n isLoading?: boolean;\n onClickFilterButton?(): void;\n searchAriaLabel?: string;\n 'data-test-id'?: string;\n};\n\nconst AppliedFilter = ({\n searchValue,\n onSearchChange,\n searchPlaceholder,\n name,\n description,\n options,\n className,\n isEmpty,\n isLoading,\n onClickFilterButton,\n onClearFilter,\n searchAriaLabel,\n 'data-test-id': testId = 'applied-filter',\n ...props\n}: AppliedFilterProps) => {\n const enableSearch =\n onSearchChange && (!!searchValue || options.length > SEARCH_INPUT_THRESHOLD || !isEmpty);\n\n return (\n <Dropdown targetClassName={className} placement=\"bottom-start\" enableArrow={false} {...props}>\n <AppliedFilterButton\n data-test-id={testId}\n name={name}\n onClickFilterButton={onClickFilterButton}\n >\n {description}\n </AppliedFilterButton>\n\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, SyntheticEvent } from 'react';\n\nimport { IconButton } from '@launchpad-ui/button';\nimport { Close, ExpandMore } from '@launchpad-ui/icons';\nimport { Tooltip } from '@launchpad-ui/tooltip';\nimport { VisuallyHidden } from '@react-aria/visually-hidden';\nimport { cx } from 'classix';\nimport { Children, forwardRef, useId } from 'react';\n\nimport styles from './styles/Filter.module.css';\n\ntype FilterButtonProps = {\n name: ReactNode;\n hideName?: boolean;\n isClearable?: boolean;\n onClear?(event: SyntheticEvent): void;\n className?: string;\n isSelected?: boolean;\n clearTooltip?: string | JSX.Element;\n children?: ReactNode;\n onClickFilterButton?(): void;\n 'data-test-id'?: 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 'data-test-id': testId = 'filter-button',\n ...rest\n } = props;\n const nameId = useId();\n const descriptionId = useId();\n\n const hasDescription = Children.count(children) !== 0;\n\n const nameElement = (\n <span className={styles.name}>\n {name}\n {hasDescription && ':'}\n </span>\n );\n\n return (\n <div className={styles.buttonContainer} data-test-id={testId}>\n <button\n {...rest}\n aria-labelledby={`${nameId} ${hasDescription ? descriptionId : ''}`}\n aria-haspopup\n className={cx(styles.button, className, (isClearable || isSelected) && styles.isClearable)}\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={styles.description}>\n {children}\n </span>\n )}\n {!isClearable && <ExpandMore size=\"small\" />}\n </button>\n {isClearable && (\n <Tooltip targetClassName={styles.clearTooltip} content={clearTooltip}>\n <IconButton\n aria-label=\"Clear filter\"\n className={styles.clear}\n data-test-id=\"clear-filter-button\"\n icon={<Close size=\"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","import type { FilterOption } from './FilterMenu';\nimport type { MenuProps } from '@launchpad-ui/menu';\nimport type { ChangeEvent, ReactNode, SyntheticEvent } from 'react';\n\nimport { Dropdown } from '@launchpad-ui/dropdown';\nimport { cx } from 'classix';\n\nimport { FilterButton } from './FilterButton';\nimport { FilterMenu } from './FilterMenu';\nimport styles from './styles/Filter.module.css';\n\nconst SEARCH_INPUT_THRESHOLD = 4;\n\ntype FilterProps = Pick<MenuProps<string>, 'size' | 'enableVirtualization'> & {\n searchValue?: string;\n onSearchChange?(event: ChangeEvent<HTMLInputElement>): void;\n searchPlaceholder?: string;\n searchAriaLabel?: string;\n name: ReactNode;\n hideName?: boolean;\n description: ReactNode;\n options: FilterOption[];\n isClearable?: boolean;\n onClear?(): void;\n className?: string;\n onStateChange?({ isOpen }: { isOpen?: boolean }): void;\n isSelected?: boolean;\n onSelect?(item: FilterOption): void;\n isEmpty?: boolean;\n isLoading?: boolean;\n onClickFilterButton?(): void;\n disabledOptionTooltip?: string;\n 'data-test-id'?: string;\n triggerTestId?: 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 'data-test-id': testId = 'filter',\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(styles.filter, className);\n\n const handleClear = (event: SyntheticEvent) => {\n event.preventDefault();\n onClear?.();\n };\n\n return (\n <Dropdown targetTestId={testId} targetClassName={dropdownClasses} {...props}>\n <FilterButton\n isClearable={isClearable}\n onClear={handleClear}\n name={name}\n hideName={hideName}\n isSelected={isSelected}\n onClickFilterButton={onClickFilterButton}\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"],"names":["AppliedFilterButton","forwardRef","props","ref","name","className","children","onClickFilterButton","testId","hasDescription","Children","count","cx","styles","appliedButton","_jsxs","appliedName","_jsx","appliedDescription","ExpandMore","displayName","FilterMenu","options","onClearFilter","enableSearch","searchValue","searchPlaceholder","searchAriaLabel","onSelect","onSearchChange","isLoading","disabledOptionTooltip","enableVirtualization","size","filterOptions","value","isDisabled","_Fragment","Button","filterClearButton","Menu","MenuSearch","map","option","index","isDivider","MenuDivider","MenuItem","isChecked","Check","undefined","nested","groupHeader","SEARCH_INPUT_THRESHOLD","AppliedFilter","description","isEmpty","length","Dropdown","FilterButton","hideName","isClearable","clearTooltip","onClear","isSelected","rest","nameId","useId","descriptionId","nameElement","buttonContainer","button","VisuallyHidden","Tooltip","IconButton","clear","Close","defaultProps","Filter","dropdownClasses","filter","handleClear","event","preventDefault"],"mappings":"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"}
package/dist/style.css CHANGED
@@ -1,96 +1,96 @@
1
- ._filter_1vdxa_1 {
2
- font-family: var(--font-family-base);
1
+ ._filter_1cei5_1 {
2
+ font-family: var(--lp-font-family-base);
3
3
  }
4
4
 
5
- ._buttonContainer_1vdxa_5 {
5
+ ._buttonContainer_1cei5_5 {
6
6
  cursor: pointer;
7
7
  display: inline-flex;
8
8
  align-items: center;
9
9
  position: relative;
10
10
  }
11
11
 
12
- ._button_1vdxa_5 {
13
- border-radius: var(--border-radius);
12
+ ._button_1cei5_5 {
13
+ border-radius: var(--lp-border-radius);
14
14
  padding-top: 0;
15
15
  padding-bottom: 0;
16
16
  line-height: 3.2rem;
17
17
  display: flex;
18
18
  align-items: center;
19
19
  margin: 0;
20
- color: var(--color-text);
21
- background-color: var(--color-white);
20
+ color: var(--lp-color-text);
21
+ background-color: var(--lp-color-white);
22
22
  }
23
23
 
24
- ._appliedButton_1vdxa_24 {
25
- color: var(--color-text);
24
+ ._appliedButton_1cei5_24 {
25
+ color: var(--lp-color-text);
26
26
  height: 2rem;
27
- background-color: var(--color-gray-100);
27
+ background-color: var(--lp-color-gray-100);
28
28
  padding: 0.2rem 0.6rem;
29
29
  border-radius: 0.2rem;
30
30
  display: flex;
31
31
  }
32
32
 
33
- ._button_1vdxa_5,
34
- ._appliedButton_1vdxa_24 {
33
+ ._button_1cei5_5,
34
+ ._appliedButton_1cei5_24 {
35
35
  font-family: inherit;
36
36
  font-size: 1.3rem;
37
37
  cursor: pointer;
38
- border-width: 1px;
38
+ border-width: var(--lp-border-width-200);
39
39
  border-style: solid;
40
- border-color: var(--color-white);
40
+ border-color: var(--lp-color-white);
41
41
  }
42
42
 
43
- ._button_1vdxa_5:hover, ._appliedButton_1vdxa_24:hover {
44
- background-color: var(--color-background-hover);
45
- border-color: var(--color-border);
43
+ ._button_1cei5_5:hover, ._appliedButton_1cei5_24:hover {
44
+ background-color: var(--lp-color-background-hover);
45
+ border-color: var(--lp-color-border);
46
46
  }
47
47
 
48
- ._button_1vdxa_5:focus, ._appliedButton_1vdxa_24:focus {
49
- box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-focus);
50
- border-color: var(--color-border);
48
+ ._button_1cei5_5:focus, ._appliedButton_1cei5_24:focus {
49
+ box-shadow: 0 0 0 2px var(--lp-color-white), 0 0 0 4px var(--lp-color-focus);
50
+ border-color: var(--lp-color-border);
51
51
  outline: none;
52
52
  }
53
53
 
54
- ._button_1vdxa_5:focus:not(._focus-visible_1vdxa_1), ._appliedButton_1vdxa_24:focus:not(._focus-visible_1vdxa_1) {
54
+ ._button_1cei5_5:focus:not(._focus-visible_1cei5_1), ._appliedButton_1cei5_24:focus:not(._focus-visible_1cei5_1) {
55
55
  box-shadow: none;
56
56
  box-shadow: initial;
57
- border-color: var(--color-white);
57
+ border-color: var(--lp-color-white);
58
58
  }
59
59
 
60
- ._button_1vdxa_5:focus:not(._focus-visible_1vdxa_1), ._appliedButton_1vdxa_24:focus:not(._focus-visible_1vdxa_1) {
60
+ ._button_1cei5_5:focus:not(._focus-visible_1cei5_1), ._appliedButton_1cei5_24:focus:not(._focus-visible_1cei5_1) {
61
61
  box-shadow: none;
62
62
  box-shadow: initial;
63
- border-color: var(--color-white);
63
+ border-color: var(--lp-color-white);
64
64
  }
65
65
 
66
- ._button_1vdxa_5:focus:not(._focus-visible_1vdxa_1), ._appliedButton_1vdxa_24:focus:not(._focus-visible_1vdxa_1) {
66
+ ._button_1cei5_5:focus:not(._focus-visible_1cei5_1), ._appliedButton_1cei5_24:focus:not(._focus-visible_1cei5_1) {
67
67
  box-shadow: none;
68
68
  box-shadow: initial;
69
- border-color: var(--color-white);
69
+ border-color: var(--lp-color-white);
70
70
  }
71
71
 
72
- ._button_1vdxa_5:focus:not(:focus-visible), ._appliedButton_1vdxa_24:focus:not(:focus-visible) {
72
+ ._button_1cei5_5:focus:not(:focus-visible), ._appliedButton_1cei5_24:focus:not(:focus-visible) {
73
73
  box-shadow: none;
74
74
  box-shadow: initial;
75
- border-color: var(--color-white);
75
+ border-color: var(--lp-color-white);
76
76
  }
77
77
 
78
- ._name_1vdxa_59 {
78
+ ._name_1cei5_59 {
79
79
  margin-right: 0.5rem;
80
- font-weight: var(--font-weight-medium);
80
+ font-weight: var(--lp-font-weight-medium);
81
81
  }
82
82
 
83
- ._appliedName_1vdxa_64 {
83
+ ._appliedName_1cei5_64 {
84
84
  margin-right: 0.3rem;
85
85
  }
86
86
 
87
- ._description_1vdxa_68 {
88
- color: var(--color-text);
89
- font-weight: var(--font-weight-medium);
87
+ ._description_1cei5_68 {
88
+ color: var(--lp-color-text);
89
+ font-weight: var(--lp-font-weight-medium);
90
90
  }
91
91
 
92
- ._description_1vdxa_68,
93
- ._appliedDescription_1vdxa_74 {
92
+ ._description_1cei5_68,
93
+ ._appliedDescription_1cei5_74 {
94
94
  margin-right: 0.5rem;
95
95
  max-width: 16rem;
96
96
  overflow: hidden;
@@ -98,92 +98,92 @@
98
98
  white-space: nowrap;
99
99
  }
100
100
 
101
- ._clear_1vdxa_82 {
101
+ ._clear_1cei5_82 {
102
102
  cursor: pointer;
103
103
  padding: 0.3rem;
104
104
  }
105
105
 
106
106
  .Filter-target--usage {
107
- border: 1px solid var(--color-text-subtle-secondary);
107
+ border: 1px solid var(--lp-color-text-subtle-secondary);
108
108
  }
109
109
 
110
- ._button_1vdxa_5._isClearable_1vdxa_91 {
111
- background-color: var(--color-blue-200);
110
+ ._button_1cei5_5._isClearable_1cei5_91 {
111
+ background-color: var(--lp-color-blue-200);
112
112
  padding-right: 3.1rem;
113
113
  }
114
114
 
115
- ._button_1vdxa_5._isClearable_1vdxa_91:focus,
116
- ._button_1vdxa_5._isClearable_1vdxa_91:hover,
117
- ._button_1vdxa_5._isClearable_1vdxa_91:active {
118
- background-color: var(--color-blue-300);
115
+ ._button_1cei5_5._isClearable_1cei5_91:focus,
116
+ ._button_1cei5_5._isClearable_1cei5_91:hover,
117
+ ._button_1cei5_5._isClearable_1cei5_91:active {
118
+ background-color: var(--lp-color-blue-300);
119
119
  }
120
120
 
121
- ._button_1vdxa_5._isClearable_1vdxa_91:focus:not(._focus-visible_1vdxa_1) {
121
+ ._button_1cei5_5._isClearable_1cei5_91:focus:not(._focus-visible_1cei5_1) {
122
122
  background-color: transparent;
123
123
  background-color: initial;
124
124
  }
125
125
 
126
- ._button_1vdxa_5._isClearable_1vdxa_91:focus:not(._focus-visible_1vdxa_1) {
126
+ ._button_1cei5_5._isClearable_1cei5_91:focus:not(._focus-visible_1cei5_1) {
127
127
  background-color: transparent;
128
128
  background-color: initial;
129
129
  }
130
130
 
131
- ._button_1vdxa_5._isClearable_1vdxa_91:focus:not(._focus-visible_1vdxa_1) {
131
+ ._button_1cei5_5._isClearable_1cei5_91:focus:not(._focus-visible_1cei5_1) {
132
132
  background-color: transparent;
133
133
  background-color: initial;
134
134
  }
135
135
 
136
- ._button_1vdxa_5._isClearable_1vdxa_91:focus:not(:focus-visible) {
136
+ ._button_1cei5_5._isClearable_1cei5_91:focus:not(:focus-visible) {
137
137
  background-color: transparent;
138
138
  background-color: initial;
139
139
  }
140
140
 
141
- ._button_1vdxa_5._isClearable_1vdxa_91:focus:not(._focus-visible_1vdxa_1):hover {
142
- background-color: var(--color-blue-300);
141
+ ._button_1cei5_5._isClearable_1cei5_91:focus:not(._focus-visible_1cei5_1):hover {
142
+ background-color: var(--lp-color-blue-300);
143
143
  }
144
144
 
145
- ._button_1vdxa_5._isClearable_1vdxa_91:focus:not(:focus-visible):hover {
146
- background-color: var(--color-blue-300);
145
+ ._button_1cei5_5._isClearable_1cei5_91:focus:not(:focus-visible):hover {
146
+ background-color: var(--lp-color-blue-300);
147
147
  }
148
148
 
149
- ._button_1vdxa_5:hover:not(._isClearable_1vdxa_91),
150
- ._button_1vdxa_5:focus:not(._isClearable_1vdxa_91),
151
- [data-state='open'] ._button_1vdxa_5:not(._isClearable_1vdxa_91) {
152
- background-color: var(--color-background-hover);
153
- border-color: var(--color-text-subtle-secondary);
149
+ ._button_1cei5_5:hover:not(._isClearable_1cei5_91),
150
+ ._button_1cei5_5:focus:not(._isClearable_1cei5_91),
151
+ [data-state='open'] ._button_1cei5_5:not(._isClearable_1cei5_91) {
152
+ background-color: var(--lp-color-background-hover);
153
+ border-color: var(--lp-color-text-subtle-secondary);
154
154
  }
155
155
 
156
- ._button_1vdxa_5:focus:not(._focus-visible_1vdxa_1):not(._isClearable_1vdxa_91):hover {
157
- background-color: var(--color-background-hover);
156
+ ._button_1cei5_5:focus:not(._focus-visible_1cei5_1):not(._isClearable_1cei5_91):hover {
157
+ background-color: var(--lp-color-background-hover);
158
158
  }
159
159
 
160
- ._button_1vdxa_5:focus:not(:focus-visible):not(._isClearable_1vdxa_91):hover {
161
- background-color: var(--color-background-hover);
160
+ ._button_1cei5_5:focus:not(:focus-visible):not(._isClearable_1cei5_91):hover {
161
+ background-color: var(--lp-color-background-hover);
162
162
  }
163
163
 
164
- ._clearTooltip_1vdxa_123 {
164
+ ._clearTooltip_1cei5_123 {
165
165
  line-height: 1;
166
166
  position: absolute;
167
167
  right: 0.7rem;
168
168
  }
169
169
 
170
- ._filterClearButton_1vdxa_129 {
170
+ ._filterClearButton_1cei5_129 {
171
171
  text-decoration: none;
172
- color: var(--color-system-red-600);
172
+ color: var(--lp-color-system-red-600);
173
173
  font-size: 1.3rem;
174
- font-weight: var(--font-weight-medium);
174
+ font-weight: var(--lp-font-weight-medium);
175
175
  padding: 1rem;
176
176
  width: 100%;
177
- border-bottom: 1px solid var(--color-border);
177
+ border-bottom: 1px solid var(--lp-color-border);
178
178
  }
179
179
 
180
- ._filterClearButton_1vdxa_129:active,
181
- ._filterClearButton_1vdxa_129:focus,
182
- ._filterClearButton_1vdxa_129:hover {
180
+ ._filterClearButton_1cei5_129:active,
181
+ ._filterClearButton_1cei5_129:focus,
182
+ ._filterClearButton_1cei5_129:hover {
183
183
  outline: none;
184
184
  box-shadow: none;
185
185
  box-shadow: initial;
186
- color: var(--color-system-red-600);
187
- border-bottom-color: var(--color-border);
188
- background-color: var(--color-background-hover);
186
+ color: var(--lp-color-system-red-600);
187
+ border-bottom-color: var(--lp-color-border);
188
+ background-color: var(--lp-color-background-hover);
189
189
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@launchpad-ui/filter",
3
- "version": "0.4.21",
3
+ "version": "0.4.23",
4
4
  "status": "beta",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -26,12 +26,12 @@
26
26
  },
27
27
  "source": "src/index.ts",
28
28
  "dependencies": {
29
- "@launchpad-ui/button": "~0.7.4",
30
- "@launchpad-ui/dropdown": "~0.5.15",
31
- "@launchpad-ui/icons": "~0.5.8",
32
- "@launchpad-ui/menu": "~0.6.21",
33
- "@launchpad-ui/tokens": "~0.1.5",
34
- "@launchpad-ui/tooltip": "~0.6.16",
29
+ "@launchpad-ui/button": "~0.7.5",
30
+ "@launchpad-ui/dropdown": "~0.5.17",
31
+ "@launchpad-ui/icons": "~0.5.9",
32
+ "@launchpad-ui/menu": "~0.6.23",
33
+ "@launchpad-ui/tokens": "~0.2.0",
34
+ "@launchpad-ui/tooltip": "~0.6.18",
35
35
  "@react-aria/visually-hidden": "^3.5.0",
36
36
  "classix": "^2.1.13"
37
37
  },