@launchpad-ui/filter 0.11.17 → 0.11.18

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.
Files changed (13) hide show
  1. package/dist/AppliedFilter.d.ts.map +1 -1
  2. package/dist/AppliedFilterButton.d.ts.map +1 -1
  3. package/dist/Filter.d.ts +1 -1
  4. package/dist/Filter.d.ts.map +1 -1
  5. package/dist/FilterButton.d.ts.map +1 -1
  6. package/dist/FilterMenu.d.ts +1 -1
  7. package/dist/FilterMenu.d.ts.map +1 -1
  8. package/dist/index.es.js +282 -214
  9. package/dist/index.es.js.map +1 -1
  10. package/dist/index.js +270 -217
  11. package/dist/index.js.map +1 -1
  12. package/dist/style.css +0 -1
  13. package/package.json +12 -12
package/dist/index.es.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.es.js","names":[],"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 { cx } from 'classix';\nimport { Children, forwardRef, useId } from 'react';\nimport { VisuallyHidden } from 'react-aria/VisuallyHidden';\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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"}
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';\nimport { Children, forwardRef } from 'react';\nimport { cx } from 'classix';\n\nimport { Icon } from '@launchpad-ui/icons';\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 { name, className, children, onClickFilterButton, 'data-test-id': testId = 'applied-filter-button' } = 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 { ChangeEvent, ReactNode } from 'react';\n\nimport { Button } from '@launchpad-ui/button';\nimport { Icon } from '@launchpad-ui/icons';\nimport type { MenuProps } from '@launchpad-ui/menu';\nimport { Menu, MenuDivider, MenuItem, MenuSearch } from '@launchpad-ui/menu';\n\nimport styles from './styles/Filter.module.css';\n\n// `FilterOption` is never parameterized by call sites in this codebase (always used bare as\n// `FilterOption[]`), yet real usages populate `value` with heterogeneous primitive types\n// (strings in some tests/stories, numbers in others) and downstream code reads `value` both\n// as a React `Key` (`key={option.value}`) and via string methods (`option.value.includes(...)`)\n// without narrowing first. `unknown` and `string` were tried and both broke real call sites\n// (see git history on this line) because the actual runtime values aren't homogeneous. `any` is\n// the honest type for \"whatever primitive the consumer's data uses\" until FilterMenu is\n// refactored to require callers to parameterize `FilterOption<T>` explicitly.\n// oxlint-disable-next-line typescript/no-explicit-any -- open generic default; see comment above for why unknown/string don't work here\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 ? [{ name: 'loading...', value: 'loading...', isDisabled: true }] : 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 enableVirtualization={enableVirtualization} size={size} data-test-id={testId} onSelect={onSelect}>\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={option.isDisabled && disabledOptionTooltip ? disabledOptionTooltip : undefined}\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';\n\nimport { Dropdown } from '@launchpad-ui/dropdown';\n\nimport { AppliedFilterButton } from './AppliedFilterButton';\nimport type { FilterOption } from './FilterMenu';\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 = onSearchChange && (!!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 data-test-id={testId} name={name} onClickFilterButton={onClickFilterButton}>\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';\nimport { Children, forwardRef, useId } from 'react';\nimport { VisuallyHidden } from 'react-aria/VisuallyHidden';\nimport { cx } from 'classix';\n\nimport { IconButton } from '@launchpad-ui/button';\nimport { Icon } from '@launchpad-ui/icons';\nimport { Tooltip } from '@launchpad-ui/tooltip';\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) {\n\t\t\treturn event.preventDefault();\n\t\t}\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 ? <VisuallyHidden id={nameId}>{nameElement}</VisuallyHidden> : <span id={nameId}>{nameElement}</span>}\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 { ChangeEvent, ReactNode, SyntheticEvent } from 'react';\nimport { cx } from 'classix';\n\nimport { Dropdown } from '@launchpad-ui/dropdown';\nimport type { MenuProps } from '@launchpad-ui/menu';\n\nimport { FilterButton } from './FilterButton';\nimport type { FilterOption } from './FilterMenu';\nimport { FilterMenu } from './FilterMenu';\n\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 = onSearchChange && (!!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 targetTestId={testId} disabled={disabled} targetClassName={dropdownClasses} {...props}>\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"],"names":["name","SEARCH_INPUT_THRESHOLD","description","isClearable","clearTooltip"],"mappings":"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"}
package/dist/index.js CHANGED
@@ -1,14 +1,15 @@
1
1
  require('./style.css');
2
+ "use strict";
2
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- let __launchpad_ui_dropdown = require("@launchpad-ui/dropdown");
4
- let __launchpad_ui_icons = require("@launchpad-ui/icons");
5
- let classix = require("classix");
6
- let react = require("react");
7
- let react_jsx_runtime = require("react/jsx-runtime");
8
- let __launchpad_ui_button = require("@launchpad-ui/button");
9
- let __launchpad_ui_menu = require("@launchpad-ui/menu");
10
- let __launchpad_ui_tooltip = require("@launchpad-ui/tooltip");
11
- let react_aria_VisuallyHidden = require("react-aria/VisuallyHidden");
4
+ const jsxRuntime = require("react/jsx-runtime");
5
+ const dropdown = require("@launchpad-ui/dropdown");
6
+ const react = require("react");
7
+ const classix = require("classix");
8
+ const icons = require("@launchpad-ui/icons");
9
+ const button$1 = require("@launchpad-ui/button");
10
+ const menu = require("@launchpad-ui/menu");
11
+ const VisuallyHidden = require("react-aria/VisuallyHidden");
12
+ const tooltip = require("@launchpad-ui/tooltip");
12
13
  const appliedButton = "vLReaG_appliedButton";
13
14
  const appliedDescription = "vLReaG_appliedDescription";
14
15
  const appliedName = "vLReaG_appliedName";
@@ -21,222 +22,274 @@ const filter = "vLReaG_filter";
21
22
  const filterClearButton = "vLReaG_filterClearButton";
22
23
  const isClearable = "vLReaG_isClearable";
23
24
  const name = "vLReaG_name";
24
- var Filter_module_default = {
25
- appliedButton,
26
- appliedDescription,
27
- appliedName,
28
- button,
29
- buttonContainer,
30
- clear,
31
- clearTooltip,
32
- description,
33
- filter,
34
- filterClearButton,
35
- isClearable,
36
- name
25
+ const styles = {
26
+ appliedButton,
27
+ appliedDescription,
28
+ appliedName,
29
+ button,
30
+ buttonContainer,
31
+ clear,
32
+ clearTooltip,
33
+ description,
34
+ filter,
35
+ filterClearButton,
36
+ isClearable,
37
+ name
37
38
  };
38
- var AppliedFilterButton = /* @__PURE__ */ (0, react.forwardRef)((props, ref) => {
39
- const { name: name$1, className, children, onClickFilterButton, "data-test-id": testId = "applied-filter-button" } = props;
40
- const hasDescription = react.Children.count(children) !== 0;
41
- return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
42
- "data-test-id": testId,
43
- children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
44
- type: "button",
45
- "aria-haspopup": true,
46
- className: (0, classix.cx)(Filter_module_default.appliedButton, className),
47
- ref,
48
- onClick: onClickFilterButton,
49
- children: [
50
- name$1 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
51
- className: Filter_module_default.appliedName,
52
- "data-test-id": `${testId}-name`,
53
- children: [name$1, hasDescription && ":"]
54
- }),
55
- hasDescription && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
56
- className: Filter_module_default.appliedDescription,
57
- "data-test-id": `${testId}-description`,
58
- children
59
- }),
60
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__launchpad_ui_icons.Icon, {
61
- name: "chevron-down",
62
- size: "small",
63
- "data-test-id": `${testId}-expand`
64
- })
65
- ]
66
- })
67
- });
39
+ const AppliedFilterButton = /* @__PURE__ */ react.forwardRef((props, ref) => {
40
+ const { name: name2, className, children, onClickFilterButton, "data-test-id": testId = "applied-filter-button" } = props;
41
+ const hasDescription = react.Children.count(children) !== 0;
42
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": testId, children: /* @__PURE__ */ jsxRuntime.jsxs(
43
+ "button",
44
+ {
45
+ type: "button",
46
+ "aria-haspopup": true,
47
+ className: classix.cx(styles.appliedButton, className),
48
+ ref,
49
+ onClick: onClickFilterButton,
50
+ children: [
51
+ name2 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles.appliedName, "data-test-id": `${testId}-name`, children: [
52
+ name2,
53
+ hasDescription && ":"
54
+ ] }),
55
+ hasDescription && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.appliedDescription, "data-test-id": `${testId}-description`, children }),
56
+ /* @__PURE__ */ jsxRuntime.jsx(icons.Icon, { name: "chevron-down", size: "small", "data-test-id": `${testId}-expand` })
57
+ ]
58
+ }
59
+ ) });
68
60
  });
69
61
  AppliedFilterButton.displayName = "AppliedFilterButton";
70
- var FilterMenu = ({ options, onClearFilter, enableSearch, searchValue, searchPlaceholder, searchAriaLabel, searchId, onSelect, onSearchChange, isLoading = false, disabledOptionTooltip, enableVirtualization, size, "data-test-id": testId = "filter-menu" }) => {
71
- const filterOptions = isLoading ? [{
72
- name: "loading...",
73
- value: "loading...",
74
- isDisabled: true
75
- }] : options;
76
- return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [onClearFilter && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__launchpad_ui_button.Button, {
77
- tabIndex: 0,
78
- className: Filter_module_default.filterClearButton,
79
- onClick: onClearFilter,
80
- kind: "link",
81
- "data-test-id": "clear-filter-button",
82
- children: "CLEAR FILTER"
83
- }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__launchpad_ui_menu.Menu, {
84
- enableVirtualization,
85
- size,
86
- "data-test-id": testId,
87
- onSelect,
88
- children: [enableSearch && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__launchpad_ui_menu.MenuSearch, {
89
- value: searchValue,
90
- id: searchId,
91
- placeholder: searchPlaceholder,
92
- onChange: onSearchChange,
93
- ariaLabel: searchAriaLabel
94
- }), filterOptions.map((option, index) => {
95
- if (option.isDivider) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__launchpad_ui_menu.MenuDivider, {}, `divider-${index}`);
96
- return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__launchpad_ui_menu.MenuItem, {
97
- item: option,
98
- disabled: option.isDisabled,
99
- icon: option.isChecked ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__launchpad_ui_icons.Icon, { name: "check" }) : void 0,
100
- role: "menuitemradio",
101
- "aria-checked": option.isChecked ? "true" : void 0,
102
- nested: option.nested,
103
- groupHeader: option.groupHeader,
104
- tooltip: option.isDisabled && disabledOptionTooltip ? disabledOptionTooltip : void 0,
105
- tooltipPlacement: "right",
106
- children: option.name
107
- }, option.value);
108
- })]
109
- })] });
62
+ const FilterMenu = ({
63
+ options,
64
+ onClearFilter,
65
+ enableSearch,
66
+ searchValue,
67
+ searchPlaceholder,
68
+ searchAriaLabel,
69
+ searchId,
70
+ onSelect,
71
+ onSearchChange,
72
+ isLoading = false,
73
+ disabledOptionTooltip,
74
+ enableVirtualization,
75
+ size,
76
+ "data-test-id": testId = "filter-menu"
77
+ }) => {
78
+ const filterOptions = isLoading ? [{ name: "loading...", value: "loading...", isDisabled: true }] : options;
79
+ return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
80
+ onClearFilter && /* @__PURE__ */ jsxRuntime.jsx(
81
+ button$1.Button,
82
+ {
83
+ tabIndex: 0,
84
+ className: styles.filterClearButton,
85
+ onClick: onClearFilter,
86
+ kind: "link",
87
+ "data-test-id": "clear-filter-button",
88
+ children: "CLEAR FILTER"
89
+ }
90
+ ),
91
+ /* @__PURE__ */ jsxRuntime.jsxs(menu.Menu, { enableVirtualization, size, "data-test-id": testId, onSelect, children: [
92
+ enableSearch && /* @__PURE__ */ jsxRuntime.jsx(
93
+ menu.MenuSearch,
94
+ {
95
+ value: searchValue,
96
+ id: searchId,
97
+ placeholder: searchPlaceholder,
98
+ onChange: onSearchChange,
99
+ ariaLabel: searchAriaLabel
100
+ }
101
+ ),
102
+ filterOptions.map((option, index) => {
103
+ if (option.isDivider) {
104
+ return /* @__PURE__ */ jsxRuntime.jsx(menu.MenuDivider, {}, `divider-${index}`);
105
+ }
106
+ return /* @__PURE__ */ jsxRuntime.jsx(
107
+ menu.MenuItem,
108
+ {
109
+ item: option,
110
+ disabled: option.isDisabled,
111
+ icon: option.isChecked ? /* @__PURE__ */ jsxRuntime.jsx(icons.Icon, { name: "check" }) : void 0,
112
+ role: "menuitemradio",
113
+ "aria-checked": option.isChecked ? "true" : void 0,
114
+ nested: option.nested,
115
+ groupHeader: option.groupHeader,
116
+ tooltip: option.isDisabled && disabledOptionTooltip ? disabledOptionTooltip : void 0,
117
+ tooltipPlacement: "right",
118
+ children: option.name
119
+ },
120
+ option.value
121
+ );
122
+ })
123
+ ] })
124
+ ] });
110
125
  };
111
- var SEARCH_INPUT_THRESHOLD$1 = 4;
112
- var 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 }) => {
113
- const enableSearch = onSearchChange && (!!searchValue || options.length > SEARCH_INPUT_THRESHOLD$1 || !isEmpty);
114
- return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__launchpad_ui_dropdown.Dropdown, {
115
- targetClassName: className,
116
- placement: "bottom-start",
117
- enableArrow: false,
118
- ...props,
119
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AppliedFilterButton, {
120
- "data-test-id": testId,
121
- name: name$1,
122
- onClickFilterButton,
123
- children: description$1
124
- }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilterMenu, {
125
- options,
126
- searchValue,
127
- searchPlaceholder,
128
- enableSearch,
129
- searchAriaLabel,
130
- searchId,
131
- onSearchChange,
132
- onClearFilter,
133
- isLoading
134
- })]
135
- });
126
+ const SEARCH_INPUT_THRESHOLD$1 = 4;
127
+ const AppliedFilter = ({
128
+ searchValue,
129
+ onSearchChange,
130
+ searchPlaceholder,
131
+ name: name2,
132
+ description: description2,
133
+ options,
134
+ className,
135
+ isEmpty,
136
+ isLoading,
137
+ onClickFilterButton,
138
+ onClearFilter,
139
+ searchAriaLabel,
140
+ searchId,
141
+ "data-test-id": testId = "applied-filter",
142
+ ...props
143
+ }) => {
144
+ const enableSearch = onSearchChange && (!!searchValue || options.length > SEARCH_INPUT_THRESHOLD$1 || !isEmpty);
145
+ return /* @__PURE__ */ jsxRuntime.jsxs(dropdown.Dropdown, { targetClassName: className, placement: "bottom-start", enableArrow: false, ...props, children: [
146
+ /* @__PURE__ */ jsxRuntime.jsx(AppliedFilterButton, { "data-test-id": testId, name: name2, onClickFilterButton, children: description2 }),
147
+ /* @__PURE__ */ jsxRuntime.jsx(
148
+ FilterMenu,
149
+ {
150
+ options,
151
+ searchValue,
152
+ searchPlaceholder,
153
+ enableSearch,
154
+ searchAriaLabel,
155
+ searchId,
156
+ onSearchChange,
157
+ onClearFilter,
158
+ isLoading
159
+ }
160
+ )
161
+ ] });
136
162
  };
137
- var FilterButton = /* @__PURE__ */ (0, react.forwardRef)((props, ref) => {
138
- 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;
139
- const nameId = (0, react.useId)();
140
- const descriptionId = (0, react.useId)();
141
- const hasDescription = react.Children.count(children) !== 0;
142
- const nameElement = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
143
- className: Filter_module_default.name,
144
- children: [name$1, hasDescription && ":"]
145
- });
146
- const isDisabled = disabled;
147
- const handleClick = (event) => {
148
- if (isDisabled) return event.preventDefault();
149
- onClickFilterButton?.();
150
- };
151
- return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
152
- className: Filter_module_default.buttonContainer,
153
- "data-test-id": testId,
154
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
155
- ...rest,
156
- type: "button",
157
- "aria-labelledby": `${nameId} ${hasDescription ? descriptionId : ""}`,
158
- "aria-haspopup": true,
159
- disabled: isDisabled,
160
- "aria-disabled": isDisabled,
161
- className: (0, classix.cx)(Filter_module_default.button, className, (isClearable$1 || isSelected) && Filter_module_default.isClearable),
162
- ref,
163
- onClick: handleClick,
164
- children: [
165
- hideName ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_VisuallyHidden.VisuallyHidden, {
166
- id: nameId,
167
- children: nameElement
168
- }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
169
- id: nameId,
170
- children: nameElement
171
- }),
172
- hasDescription && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
173
- id: descriptionId,
174
- className: Filter_module_default.description,
175
- children
176
- }),
177
- !isClearable$1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__launchpad_ui_icons.Icon, {
178
- name: "chevron-down",
179
- size: "small"
180
- })
181
- ]
182
- }), isClearable$1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__launchpad_ui_tooltip.Tooltip, {
183
- targetClassName: Filter_module_default.clearTooltip,
184
- content: clearTooltip$1,
185
- children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__launchpad_ui_button.IconButton, {
186
- "aria-label": ariaLabel,
187
- className: Filter_module_default.clear,
188
- "data-test-id": "clear-filter-button",
189
- icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__launchpad_ui_icons.Icon, {
190
- name: "cancel",
191
- size: "small"
192
- }),
193
- size: "small",
194
- onClick: onClear
195
- })
196
- })]
197
- });
163
+ const FilterButton = /* @__PURE__ */ react.forwardRef((props, ref) => {
164
+ const {
165
+ children,
166
+ name: name2,
167
+ hideName,
168
+ isClearable: isClearable2,
169
+ clearTooltip: clearTooltip2 = "Clear filter",
170
+ onClear,
171
+ disabled,
172
+ isSelected,
173
+ onClickFilterButton,
174
+ className,
175
+ "data-test-id": testId = "filter-button",
176
+ ariaLabel = "Clear filter",
177
+ ...rest
178
+ } = props;
179
+ const nameId = react.useId();
180
+ const descriptionId = react.useId();
181
+ const hasDescription = react.Children.count(children) !== 0;
182
+ const nameElement = /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles.name, children: [
183
+ name2,
184
+ hasDescription && ":"
185
+ ] });
186
+ const isDisabled = disabled;
187
+ const handleClick = (event) => {
188
+ if (isDisabled) {
189
+ return event.preventDefault();
190
+ }
191
+ onClickFilterButton?.();
192
+ };
193
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.buttonContainer, "data-test-id": testId, children: [
194
+ /* @__PURE__ */ jsxRuntime.jsxs(
195
+ "button",
196
+ {
197
+ ...rest,
198
+ type: "button",
199
+ "aria-labelledby": `${nameId} ${hasDescription ? descriptionId : ""}`,
200
+ "aria-haspopup": true,
201
+ disabled: isDisabled,
202
+ "aria-disabled": isDisabled,
203
+ className: classix.cx(styles.button, className, (isClearable2 || isSelected) && styles.isClearable),
204
+ ref,
205
+ onClick: handleClick,
206
+ children: [
207
+ hideName ? /* @__PURE__ */ jsxRuntime.jsx(VisuallyHidden.VisuallyHidden, { id: nameId, children: nameElement }) : /* @__PURE__ */ jsxRuntime.jsx("span", { id: nameId, children: nameElement }),
208
+ hasDescription && /* @__PURE__ */ jsxRuntime.jsx("span", { id: descriptionId, className: styles.description, children }),
209
+ !isClearable2 && /* @__PURE__ */ jsxRuntime.jsx(icons.Icon, { name: "chevron-down", size: "small" })
210
+ ]
211
+ }
212
+ ),
213
+ isClearable2 && /* @__PURE__ */ jsxRuntime.jsx(tooltip.Tooltip, { targetClassName: styles.clearTooltip, content: clearTooltip2, children: /* @__PURE__ */ jsxRuntime.jsx(
214
+ button$1.IconButton,
215
+ {
216
+ "aria-label": ariaLabel,
217
+ className: styles.clear,
218
+ "data-test-id": "clear-filter-button",
219
+ icon: /* @__PURE__ */ jsxRuntime.jsx(icons.Icon, { name: "cancel", size: "small" }),
220
+ size: "small",
221
+ onClick: onClear
222
+ }
223
+ ) })
224
+ ] });
198
225
  });
199
226
  FilterButton.displayName = "FilterButton";
200
- var SEARCH_INPUT_THRESHOLD = 4;
201
- var 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 }) => {
202
- const enableSearch = onSearchChange && (!!searchValue || options.length > SEARCH_INPUT_THRESHOLD || !isEmpty);
203
- const dropdownClasses = (0, classix.cx)(Filter_module_default.filter, className);
204
- const handleClear = (event) => {
205
- event.preventDefault();
206
- onClear?.();
207
- };
208
- return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__launchpad_ui_dropdown.Dropdown, {
209
- targetTestId: testId,
210
- disabled,
211
- targetClassName: dropdownClasses,
212
- ...props,
213
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilterButton, {
214
- isClearable: isClearable$1,
215
- onClear: handleClear,
216
- name: name$1,
217
- hideName,
218
- disabled,
219
- isSelected,
220
- onClickFilterButton,
221
- ariaLabel: clearAriaLabel,
222
- children: description$1
223
- }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilterMenu, {
224
- options,
225
- searchId,
226
- searchValue,
227
- searchPlaceholder,
228
- searchAriaLabel,
229
- enableSearch,
230
- onSearchChange,
231
- isLoading,
232
- disabledOptionTooltip,
233
- size,
234
- enableVirtualization
235
- })]
236
- });
227
+ const SEARCH_INPUT_THRESHOLD = 4;
228
+ const Filter = ({
229
+ searchValue,
230
+ onSearchChange,
231
+ searchPlaceholder,
232
+ searchAriaLabel,
233
+ name: name2,
234
+ hideName,
235
+ description: description2,
236
+ options,
237
+ isClearable: isClearable2,
238
+ onClear,
239
+ isSelected,
240
+ className,
241
+ isEmpty,
242
+ searchId,
243
+ isLoading,
244
+ onClickFilterButton,
245
+ disabledOptionTooltip,
246
+ "data-test-id": testId = "filter",
247
+ size,
248
+ disabled,
249
+ enableVirtualization,
250
+ clearAriaLabel,
251
+ ...props
252
+ }) => {
253
+ const enableSearch = onSearchChange && (!!searchValue || options.length > SEARCH_INPUT_THRESHOLD || !isEmpty);
254
+ const dropdownClasses = classix.cx(styles.filter, className);
255
+ const handleClear = (event) => {
256
+ event.preventDefault();
257
+ onClear?.();
258
+ };
259
+ return /* @__PURE__ */ jsxRuntime.jsxs(dropdown.Dropdown, { targetTestId: testId, disabled, targetClassName: dropdownClasses, ...props, children: [
260
+ /* @__PURE__ */ jsxRuntime.jsx(
261
+ FilterButton,
262
+ {
263
+ isClearable: isClearable2,
264
+ onClear: handleClear,
265
+ name: name2,
266
+ hideName,
267
+ disabled,
268
+ isSelected,
269
+ onClickFilterButton,
270
+ ariaLabel: clearAriaLabel,
271
+ children: description2
272
+ }
273
+ ),
274
+ /* @__PURE__ */ jsxRuntime.jsx(
275
+ FilterMenu,
276
+ {
277
+ options,
278
+ searchId,
279
+ searchValue,
280
+ searchPlaceholder,
281
+ searchAriaLabel,
282
+ enableSearch,
283
+ onSearchChange,
284
+ isLoading,
285
+ disabledOptionTooltip,
286
+ size,
287
+ enableVirtualization
288
+ }
289
+ )
290
+ ] });
237
291
  };
238
292
  exports.AppliedFilter = AppliedFilter;
239
293
  exports.Filter = Filter;
240
294
  exports.FilterButton = FilterButton;
241
-
242
- //# sourceMappingURL=index.js.map
295
+ //# sourceMappingURL=index.js.map