@launchpad-ui/filter 0.1.1 → 0.2.1

package/dist/index.es.js

@@ -10,25 +10,41 @@ import { ExpandMore, IconSize } from "@launchpad-ui/icons";
 import cx from "clsx";
 import { Children, forwardRef } from "react";
 import "./styles/Filter.css";
+import { jsx, jsxs } from "react/jsx-runtime";
 var AppliedFilterButton = forwardRef((props, ref) => {
   const { name, className, isSelected, children, onClickFilterButton } = props;
   const hasDescription = Children.count(children) !== 0;
-  return /* @__PURE__ */ React.createElement("div", {
-    className: "AppliedFilter-buttonContainer"
-  }, /* @__PURE__ */ React.createElement("button", {
-    "aria-haspopup": true,
-    className: cx("AppliedFilter-button", {
-      isSelected
-    }, className),
-    ref,
-    onClick: onClickFilterButton
-  }, name && /* @__PURE__ */ React.createElement("span", {
-    className: "AppliedFilter-name"
-  }, name, hasDescription && ":"), hasDescription && /* @__PURE__ */ React.createElement("span", {
-    className: "AppliedFilter-description"
-  }, children), /* @__PURE__ */ React.createElement(ExpandMore, {
-    size: IconSize.SMALL
-  })));
+  return /* @__PURE__ */ jsx("div", {
+    className: "AppliedFilter-buttonContainer",
+    children: /* @__PURE__ */ jsxs("button", {
+      "aria-haspopup": true,
+      className: cx(
+        "AppliedFilter-button",
+        {
+          isSelected
+        },
+        className
+      ),
+      ref,
+      onClick: onClickFilterButton,
+      children: [
+        name && /* @__PURE__ */ jsxs("span", {
+          className: "AppliedFilter-name",
+          children: [
+            name,
+            hasDescription && ":"
+          ]
+        }),
+        hasDescription && /* @__PURE__ */ jsx("span", {
+          className: "AppliedFilter-description",
+          children
+        }),
+        /* @__PURE__ */ jsx(ExpandMore, {
+          size: IconSize.SMALL
+        })
+      ]
+    })
+  });
 });
 AppliedFilterButton.displayName = "AppliedFilterButton";
 
@@ -36,6 +52,7 @@ AppliedFilterButton.displayName = "AppliedFilterButton";
 import { Button, ButtonKind } from "@launchpad-ui/button";
 import { Check } from "@launchpad-ui/icons";
 import { Menu, MenuDivider, MenuItem, MenuSearch } from "@launchpad-ui/menu";
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var FilterMenu = ({
   options,
   onClearFilter,
@@ -51,42 +68,51 @@ var FilterMenu = ({
   size
 }) => {
   const filterOptions = isLoading ? [{ name: "loading...", value: "loading...", isDisabled: true }] : options;
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, onClearFilter && /* @__PURE__ */ React.createElement(Button, {
-    tabIndex: 0,
-    className: "Menu-clear",
-    onClick: onClearFilter,
-    kind: ButtonKind.LINK
-  }, "CLEAR FILTER"), /* @__PURE__ */ React.createElement(Menu, {
-    enableVirtualization,
-    size,
-    onSelect
-  }, enableSearch && /* @__PURE__ */ React.createElement(MenuSearch, {
-    value: searchValue,
-    placeholder: searchPlaceholder,
-    onChange: onSearchChange,
-    ariaLabel: searchAriaLabel
-  }), filterOptions.map((option, index) => {
-    if (option.isDivider) {
-      return /* @__PURE__ */ React.createElement(MenuDivider, {
-        key: `divider-${index}`
-      });
-    }
-    return /* @__PURE__ */ React.createElement(MenuItem, {
-      item: option,
-      disabled: option.isDisabled,
-      icon: option.isChecked ? Check : null,
-      key: option.value,
-      role: "menuitemradio",
-      "aria-checked": option.isChecked ? "true" : void 0,
-      nested: option.nested,
-      groupHeader: option.groupHeader,
-      tooltip: option.isDisabled && disabledOptionTooltip ? disabledOptionTooltip : void 0,
-      tooltipPlacement: "right"
-    }, option.name);
-  })));
+  return /* @__PURE__ */ jsxs2(Fragment, {
+    children: [
+      onClearFilter && /* @__PURE__ */ jsx2(Button, {
+        tabIndex: 0,
+        className: "Menu-clear",
+        onClick: onClearFilter,
+        kind: ButtonKind.LINK,
+        children: "CLEAR FILTER"
+      }),
+      /* @__PURE__ */ jsxs2(Menu, {
+        enableVirtualization,
+        size,
+        onSelect,
+        children: [
+          enableSearch && /* @__PURE__ */ jsx2(MenuSearch, {
+            value: searchValue,
+            placeholder: searchPlaceholder,
+            onChange: onSearchChange,
+            ariaLabel: searchAriaLabel
+          }),
+          filterOptions.map((option, index) => {
+            if (option.isDivider) {
+              return /* @__PURE__ */ jsx2(MenuDivider, {}, `divider-${index}`);
+            }
+            return /* @__PURE__ */ jsx2(MenuItem, {
+              item: option,
+              disabled: option.isDisabled,
+              icon: option.isChecked ? Check : null,
+              role: "menuitemradio",
+              "aria-checked": option.isChecked ? "true" : void 0,
+              nested: option.nested,
+              groupHeader: option.groupHeader,
+              tooltip: option.isDisabled && disabledOptionTooltip ? disabledOptionTooltip : void 0,
+              tooltipPlacement: "right",
+              children: option.name
+            }, option.value);
+          })
+        ]
+      })
+    ]
+  });
 };
 
 // src/AppliedFilter.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var SEARCH_INPUT_THRESHOLD = 4;
 var AppliedFilter = ({
   searchValue,
@@ -105,24 +131,29 @@ var AppliedFilter = ({
 }) => {
   const enableSearch = onSearchChange && (!!searchValue || options.length > SEARCH_INPUT_THRESHOLD || !isEmpty);
   const dropdownClasses = cx2("Filter-target", className);
-  return /* @__PURE__ */ React.createElement(Dropdown, {
+  return /* @__PURE__ */ jsxs3(Dropdown, {
     targetClassName: dropdownClasses,
     placement: "bottom-start",
     enableArrow: false,
-    ...props
-  }, /* @__PURE__ */ React.createElement(AppliedFilterButton, {
-    name,
-    onClickFilterButton
-  }, description), /* @__PURE__ */ React.createElement(FilterMenu, {
-    options,
-    searchValue,
-    searchPlaceholder,
-    enableSearch,
-    searchAriaLabel,
-    onSearchChange,
-    onClearFilter,
-    isLoading
-  }));
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx3(AppliedFilterButton, {
+        name,
+        onClickFilterButton,
+        children: description
+      }),
+      /* @__PURE__ */ jsx3(FilterMenu, {
+        options,
+        searchValue,
+        searchPlaceholder,
+        enableSearch,
+        searchAriaLabel,
+        onSearchChange,
+        onClearFilter,
+        isLoading
+      })
+    ]
+  });
 };
 
 // src/Filter.tsx
@@ -138,6 +169,7 @@ import { VisuallyHidden } from "@react-aria/visually-hidden";
 import cx3 from "clsx";
 import { Children as Children2, forwardRef as forwardRef2 } from "react";
 import "./styles/Filter.css";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 var FilterButton = forwardRef2((props, ref) => {
   const {
     children,
@@ -155,42 +187,59 @@ var FilterButton = forwardRef2((props, ref) => {
   const nameId = useId();
   const descriptionId = useId();
   const hasDescription = Children2.count(children) !== 0;
-  const nameElement = /* @__PURE__ */ React.createElement("span", {
-    className: "Filter-name"
-  }, name, hasDescription && ":");
-  return /* @__PURE__ */ React.createElement("div", {
+  const nameElement = /* @__PURE__ */ jsxs4("span", {
+    className: "Filter-name",
+    children: [
+      name,
+      hasDescription && ":"
+    ]
+  });
+  return /* @__PURE__ */ jsxs4("div", {
     className: "Filter-buttonContainer",
-    "data-test-id": testId
-  }, /* @__PURE__ */ React.createElement("button", {
-    ...rest,
-    "aria-labelledby": `${nameId} ${hasDescription ? descriptionId : ""}`,
-    "aria-haspopup": true,
-    className: cx3("Filter-button", className, {
-      "is-clearable": isClearable || isSelected
-    }),
-    ref,
-    onClick: onClickFilterButton
-  }, hideName ? /* @__PURE__ */ React.createElement(VisuallyHidden, {
-    id: nameId
-  }, nameElement) : /* @__PURE__ */ React.createElement("span", {
-    id: nameId
-  }, nameElement), hasDescription && /* @__PURE__ */ React.createElement("span", {
-    id: descriptionId,
-    className: "Filter-description"
-  }, children), !isClearable && /* @__PURE__ */ React.createElement(ExpandMore2, {
-    size: IconSize2.SMALL
-  })), isClearable && /* @__PURE__ */ React.createElement(Tooltip, {
-    targetClassName: "Filter-clearTooltip",
-    content: clearTooltip
-  }, /* @__PURE__ */ React.createElement(Button2, {
-    className: "Filter-clear",
-    size: ButtonSize.SMALL,
-    type: ButtonType.ICON,
-    icon: /* @__PURE__ */ React.createElement(Close, {
-      size: IconSize2.TINY
-    }),
-    onClick: onClear
-  })));
+    "data-test-id": testId,
+    children: [
+      /* @__PURE__ */ jsxs4("button", {
+        ...rest,
+        "aria-labelledby": `${nameId} ${hasDescription ? descriptionId : ""}`,
+        "aria-haspopup": true,
+        className: cx3("Filter-button", className, {
+          "is-clearable": isClearable || isSelected
+        }),
+        ref,
+        onClick: onClickFilterButton,
+        children: [
+          hideName ? /* @__PURE__ */ jsx4(VisuallyHidden, {
+            id: nameId,
+            children: nameElement
+          }) : /* @__PURE__ */ jsx4("span", {
+            id: nameId,
+            children: nameElement
+          }),
+          hasDescription && /* @__PURE__ */ jsx4("span", {
+            id: descriptionId,
+            className: "Filter-description",
+            children
+          }),
+          !isClearable && /* @__PURE__ */ jsx4(ExpandMore2, {
+            size: IconSize2.SMALL
+          })
+        ]
+      }),
+      isClearable && /* @__PURE__ */ jsx4(Tooltip, {
+        targetClassName: "Filter-clearTooltip",
+        content: clearTooltip,
+        children: /* @__PURE__ */ jsx4(Button2, {
+          className: "Filter-clear",
+          size: ButtonSize.SMALL,
+          type: ButtonType.ICON,
+          icon: /* @__PURE__ */ jsx4(Close, {
+            size: IconSize2.TINY
+          }),
+          onClick: onClear
+        })
+      })
+    ]
+  });
 });
 FilterButton.defaultProps = {
   clearTooltip: "Clear filter"
@@ -198,6 +247,7 @@ FilterButton.defaultProps = {
 FilterButton.displayName = "FilterButton";
 
 // src/Filter.tsx
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 var SEARCH_INPUT_THRESHOLD2 = 4;
 var Filter = ({
   searchValue,
@@ -227,29 +277,34 @@ var Filter = ({
     event.preventDefault();
     onClear?.();
   };
-  return /* @__PURE__ */ React.createElement(Dropdown2, {
+  return /* @__PURE__ */ jsxs5(Dropdown2, {
     targetClassName: dropdownClasses,
-    ...props
-  }, /* @__PURE__ */ React.createElement(FilterButton, {
-    isClearable,
-    onClear: handleClear,
-    name,
-    hideName,
-    isSelected,
-    onClickFilterButton,
-    testId
-  }, description), /* @__PURE__ */ React.createElement(FilterMenu, {
-    options,
-    searchValue,
-    searchPlaceholder,
-    searchAriaLabel,
-    enableSearch,
-    onSearchChange,
-    isLoading,
-    disabledOptionTooltip,
-    size,
-    enableVirtualization
-  }));
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx5(FilterButton, {
+        isClearable,
+        onClear: handleClear,
+        name,
+        hideName,
+        isSelected,
+        onClickFilterButton,
+        testId,
+        children: description
+      }),
+      /* @__PURE__ */ jsx5(FilterMenu, {
+        options,
+        searchValue,
+        searchPlaceholder,
+        searchAriaLabel,
+        enableSearch,
+        onSearchChange,
+        isLoading,
+        disabledOptionTooltip,
+        size,
+        enableVirtualization
+      })
+    ]
+  });
 };
 export {
   AppliedFilter,

package/dist/index.es.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../scripts/react-shim.js", "../src/AppliedFilter.tsx", "../src/AppliedFilterButton.tsx", "../src/FilterMenu.tsx", "../src/Filter.tsx", "../src/FilterButton.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { FilterOption } from './FilterMenu';\nimport type { ReactNode } from 'react';\n\nimport { Dropdown } from '@launchpad-ui/dropdown';\nimport cx from 'clsx';\n\nimport { AppliedFilterButton } from './AppliedFilterButton';\nimport { FilterMenu } from './FilterMenu';\n\nconst SEARCH_INPUT_THRESHOLD = 4;\n\ntype AppliedFilterProps = {\n  searchValue?: string;\n  onSearchChange?(event: React.ChangeEvent<HTMLInputElement>): void;\n  onClearFilter?(): void;\n  searchPlaceholder?: string;\n  name?: ReactNode;\n  description: ReactNode;\n  options: FilterOption[];\n  className?: string;\n  onStateChange?({ isOpen }: { isOpen?: boolean }): void;\n  isSelected?: boolean;\n  onSelect?(item: FilterOption): void;\n  isEmpty?: boolean;\n  isLoading?: boolean;\n  onClickFilterButton?(): void;\n  searchAriaLabel?: string;\n};\n\nconst AppliedFilter = ({\n  searchValue,\n  onSearchChange,\n  searchPlaceholder,\n  name,\n  description,\n  options,\n  className,\n  isEmpty,\n  isLoading,\n  onClickFilterButton,\n  onClearFilter,\n  searchAriaLabel,\n  ...props\n}: AppliedFilterProps) => {\n  const enableSearch =\n    onSearchChange && (!!searchValue || options.length > SEARCH_INPUT_THRESHOLD || !isEmpty);\n\n  const dropdownClasses = cx('Filter-target', className);\n  return (\n    <Dropdown\n      targetClassName={dropdownClasses}\n      placement=\"bottom-start\"\n      enableArrow={false}\n      {...props}\n    >\n      <AppliedFilterButton name={name} onClickFilterButton={onClickFilterButton}>\n        {description}\n      </AppliedFilterButton>\n\n      <FilterMenu\n        options={options}\n        searchValue={searchValue}\n        searchPlaceholder={searchPlaceholder}\n        enableSearch={enableSearch}\n        searchAriaLabel={searchAriaLabel}\n        onSearchChange={onSearchChange}\n        onClearFilter={onClearFilter}\n        isLoading={isLoading}\n      />\n    </Dropdown>\n  );\n};\n\nexport type { AppliedFilterProps };\nexport { AppliedFilter };\n", "import type { ReactNode } from 'react';\n\nimport { ExpandMore, IconSize } from '@launchpad-ui/icons';\nimport cx from 'clsx';\nimport { Children, forwardRef } from 'react';\n\nimport './styles/Filter.css';\n\ntype AppliedFilterButtonProps = {\n  name?: ReactNode;\n  className?: string;\n  isSelected?: boolean;\n  children: ReactNode;\n  onClickFilterButton?(): void;\n};\n\ntype Ref = HTMLButtonElement;\n\nconst AppliedFilterButton = forwardRef<Ref, AppliedFilterButtonProps>((props, ref) => {\n  const { name, className, isSelected, children, onClickFilterButton } = props;\n\n  const hasDescription = Children.count(children) !== 0;\n\n  return (\n    <div className=\"AppliedFilter-buttonContainer\">\n      <button\n        aria-haspopup\n        className={cx(\n          'AppliedFilter-button',\n          {\n            isSelected,\n          },\n          className\n        )}\n        ref={ref}\n        onClick={onClickFilterButton}\n      >\n        {name && (\n          <span className=\"AppliedFilter-name\">\n            {name}\n            {hasDescription && ':'}\n          </span>\n        )}\n        {hasDescription && <span className=\"AppliedFilter-description\">{children}</span>}\n        <ExpandMore size={IconSize.SMALL} />\n      </button>\n    </div>\n  );\n});\n\nAppliedFilterButton.displayName = 'AppliedFilterButton';\n\nexport type { AppliedFilterButtonProps };\nexport { AppliedFilterButton };\n", "import type { MenuProps } from '@launchpad-ui/menu';\nimport type { ReactNode } from 'react';\n\nimport { Button, ButtonKind } from '@launchpad-ui/button';\nimport { Check } from '@launchpad-ui/icons';\nimport { Menu, MenuDivider, MenuItem, MenuSearch } from '@launchpad-ui/menu';\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype FilterOption<T = any> = {\n  name?: ReactNode;\n  isDisabled?: boolean;\n  isDivider?: boolean;\n  isChecked?: boolean;\n  value: T | null;\n  projKey?: string;\n  nested?: boolean;\n  groupHeader?: boolean;\n};\n\ntype FilterMenuProps = Pick<MenuProps<string>, 'enableVirtualization' | 'size'> & {\n  options: FilterOption[];\n  onClearFilter?(): void;\n  enableSearch?: boolean;\n  searchValue?: string;\n  searchPlaceholder?: string;\n  searchAriaLabel?: string;\n  onSearchChange?(event: React.ChangeEvent<HTMLInputElement>): void;\n  onSelect?(): void;\n  isLoading?: boolean;\n  disabledOptionTooltip?: string;\n};\n\nconst FilterMenu = ({\n  options,\n  onClearFilter,\n  enableSearch,\n  searchValue,\n  searchPlaceholder,\n  searchAriaLabel,\n  onSelect,\n  onSearchChange,\n  isLoading = false,\n  disabledOptionTooltip,\n  enableVirtualization,\n  size,\n}: FilterMenuProps) => {\n  const filterOptions = isLoading\n    ? [{ name: 'loading...', value: 'loading...', isDisabled: true }]\n    : options;\n\n  return (\n    <>\n      {onClearFilter && (\n        <Button tabIndex={0} className=\"Menu-clear\" onClick={onClearFilter} kind={ButtonKind.LINK}>\n          CLEAR FILTER\n        </Button>\n      )}\n      <Menu enableVirtualization={enableVirtualization} size={size} onSelect={onSelect}>\n        {enableSearch && (\n          <MenuSearch\n            value={searchValue}\n            placeholder={searchPlaceholder}\n            onChange={onSearchChange}\n            ariaLabel={searchAriaLabel}\n          />\n        )}\n        {filterOptions.map((option, index) => {\n          if (option.isDivider) {\n            return <MenuDivider key={`divider-${index}`} />;\n          }\n          return (\n            <MenuItem\n              item={option}\n              disabled={option.isDisabled}\n              icon={option.isChecked ? Check : null}\n              key={option.value}\n              role=\"menuitemradio\"\n              aria-checked={option.isChecked ? 'true' : undefined}\n              nested={option.nested}\n              groupHeader={option.groupHeader}\n              tooltip={\n                option.isDisabled && disabledOptionTooltip ? disabledOptionTooltip : undefined\n              }\n              tooltipPlacement=\"right\"\n            >\n              {option.name}\n            </MenuItem>\n          );\n        })}\n      </Menu>\n    </>\n  );\n};\n\nexport { FilterMenu };\nexport type { FilterOption, FilterMenuProps };\n", "import type { FilterOption } from './FilterMenu';\nimport type { MenuProps } from '@launchpad-ui/menu';\nimport type { ReactNode, SyntheticEvent } from 'react';\n\nimport { Dropdown } from '@launchpad-ui/dropdown';\nimport cx from 'clsx';\n\nimport { FilterButton } from './FilterButton';\nimport { FilterMenu } from './FilterMenu';\n\nconst SEARCH_INPUT_THRESHOLD = 4;\n\ntype FilterProps = Pick<MenuProps<string>, 'size' | 'enableVirtualization'> & {\n  searchValue?: string;\n  onSearchChange?(event: React.ChangeEvent<HTMLInputElement>): void;\n  searchPlaceholder?: string;\n  searchAriaLabel?: string;\n  name: ReactNode;\n  hideName?: boolean;\n  description: ReactNode;\n  options: FilterOption[];\n  isClearable?: boolean;\n  onClear?(): void;\n  className?: string;\n  onStateChange?({ isOpen }: { isOpen?: boolean }): void;\n  isSelected?: boolean;\n  onSelect?(item: FilterOption): void;\n  isEmpty?: boolean;\n  isLoading?: boolean;\n  onClickFilterButton?(): void;\n  disabledOptionTooltip?: string;\n  testId?: string;\n};\n\nconst Filter = ({\n  searchValue,\n  onSearchChange,\n  searchPlaceholder,\n  searchAriaLabel,\n  name,\n  hideName,\n  description,\n  options,\n  isClearable,\n  onClear,\n  isSelected,\n  className,\n  isEmpty,\n  isLoading,\n  onClickFilterButton,\n  disabledOptionTooltip,\n  testId,\n  size,\n  enableVirtualization,\n  ...props\n}: FilterProps) => {\n  const enableSearch =\n    onSearchChange && (!!searchValue || options.length > SEARCH_INPUT_THRESHOLD || !isEmpty);\n\n  const dropdownClasses = cx('Filter', 'Filter-target', className);\n\n  const handleClear = (event: SyntheticEvent) => {\n    event.preventDefault();\n    onClear?.();\n  };\n\n  return (\n    <Dropdown targetClassName={dropdownClasses} {...props}>\n      <FilterButton\n        isClearable={isClearable}\n        onClear={handleClear}\n        name={name}\n        hideName={hideName}\n        isSelected={isSelected}\n        onClickFilterButton={onClickFilterButton}\n        testId={testId}\n      >\n        {description}\n      </FilterButton>\n      <FilterMenu\n        options={options}\n        searchValue={searchValue}\n        searchPlaceholder={searchPlaceholder}\n        searchAriaLabel={searchAriaLabel}\n        enableSearch={enableSearch}\n        onSearchChange={onSearchChange}\n        isLoading={isLoading}\n        disabledOptionTooltip={disabledOptionTooltip}\n        size={size}\n        enableVirtualization={enableVirtualization}\n      />\n    </Dropdown>\n  );\n};\n\nexport { Filter };\nexport type { FilterProps };\n", "import type { ReactNode, SyntheticEvent } from 'react';\n\nimport { Button, ButtonSize, ButtonType } from '@launchpad-ui/button';\nimport { Close, ExpandMore, IconSize } from '@launchpad-ui/icons';\nimport { Tooltip } from '@launchpad-ui/tooltip';\nimport { useId } from '@react-aria/utils';\nimport { VisuallyHidden } from '@react-aria/visually-hidden';\nimport cx from 'clsx';\nimport { Children, forwardRef } from 'react';\n\nimport './styles/Filter.css';\n\ntype FilterButtonProps = {\n  name: ReactNode;\n  hideName?: boolean;\n  isClearable?: boolean;\n  onClear?(event: SyntheticEvent): void;\n  className?: string;\n  isSelected?: boolean;\n  clearTooltip?: string | JSX.Element;\n  children?: ReactNode;\n  onClickFilterButton?(): void;\n  testId?: string;\n};\n\ntype Ref = HTMLButtonElement;\n\nconst FilterButton = forwardRef<Ref, FilterButtonProps>((props, ref) => {\n  const {\n    children,\n    name,\n    hideName,\n    isClearable,\n    clearTooltip,\n    onClear,\n    isSelected,\n    onClickFilterButton,\n    className,\n    testId,\n    ...rest\n  } = props;\n  const nameId = useId();\n  const descriptionId = useId();\n\n  const hasDescription = Children.count(children) !== 0;\n\n  const nameElement = (\n    <span className=\"Filter-name\">\n      {name}\n      {hasDescription && ':'}\n    </span>\n  );\n\n  return (\n    <div className=\"Filter-buttonContainer\" data-test-id={testId}>\n      <button\n        {...rest}\n        aria-labelledby={`${nameId} ${hasDescription ? descriptionId : ''}`}\n        aria-haspopup\n        className={cx('Filter-button', className, {\n          'is-clearable': isClearable || isSelected,\n        })}\n        ref={ref}\n        onClick={onClickFilterButton}\n      >\n        {hideName ? (\n          <VisuallyHidden id={nameId}>{nameElement}</VisuallyHidden>\n        ) : (\n          <span id={nameId}>{nameElement}</span>\n        )}\n        {hasDescription && (\n          <span id={descriptionId} className=\"Filter-description\">\n            {children}\n          </span>\n        )}\n        {!isClearable && <ExpandMore size={IconSize.SMALL} />}\n      </button>\n      {isClearable && (\n        <Tooltip targetClassName=\"Filter-clearTooltip\" content={clearTooltip}>\n          <Button\n            className=\"Filter-clear\"\n            size={ButtonSize.SMALL}\n            type={ButtonType.ICON}\n            icon={<Close size={IconSize.TINY} />}\n            onClick={onClear}\n          />\n        </Tooltip>\n      )}\n    </div>\n  );\n});\n\nFilterButton.defaultProps = {\n  clearTooltip: 'Clear filter',\n};\n\nFilterButton.displayName = 'FilterButton';\n\nexport { FilterButton };\nexport type { FilterButtonProps };\n"],
-  "mappings": "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",
-  "names": []
+  "mappings": "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",
+  "names": ["cx", "jsx", "jsxs", "jsx", "jsxs", "cx", "Dropdown", "cx", "Button", "ExpandMore", "IconSize", "cx", "Children", "forwardRef", "jsx", "jsxs", "jsx", "jsxs", "SEARCH_INPUT_THRESHOLD", "cx", "Dropdown"]
 }

package/dist/index.js

@@ -17,7 +17,10 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
@@ -41,25 +44,41 @@ var import_icons = require("@launchpad-ui/icons");
 var import_clsx = __toESM(require("clsx"));
 var import_react = require("react");
 var import_Filter = require("./styles/Filter.css");
+var import_jsx_runtime = require("react/jsx-runtime");
 var AppliedFilterButton = (0, import_react.forwardRef)((props, ref) => {
   const { name, className, isSelected, children, onClickFilterButton } = props;
   const hasDescription = import_react.Children.count(children) !== 0;
-  return /* @__PURE__ */ React.createElement("div", {
-    className: "AppliedFilter-buttonContainer"
-  }, /* @__PURE__ */ React.createElement("button", {
-    "aria-haspopup": true,
-    className: (0, import_clsx.default)("AppliedFilter-button", {
-      isSelected
-    }, className),
-    ref,
-    onClick: onClickFilterButton
-  }, name && /* @__PURE__ */ React.createElement("span", {
-    className: "AppliedFilter-name"
-  }, name, hasDescription && ":"), hasDescription && /* @__PURE__ */ React.createElement("span", {
-    className: "AppliedFilter-description"
-  }, children), /* @__PURE__ */ React.createElement(import_icons.ExpandMore, {
-    size: import_icons.IconSize.SMALL
-  })));
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+    className: "AppliedFilter-buttonContainer",
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", {
+      "aria-haspopup": true,
+      className: (0, import_clsx.default)(
+        "AppliedFilter-button",
+        {
+          isSelected
+        },
+        className
+      ),
+      ref,
+      onClick: onClickFilterButton,
+      children: [
+        name && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+          className: "AppliedFilter-name",
+          children: [
+            name,
+            hasDescription && ":"
+          ]
+        }),
+        hasDescription && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+          className: "AppliedFilter-description",
+          children
+        }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.ExpandMore, {
+          size: import_icons.IconSize.SMALL
+        })
+      ]
+    })
+  });
 });
 AppliedFilterButton.displayName = "AppliedFilterButton";
 
@@ -67,6 +86,7 @@ AppliedFilterButton.displayName = "AppliedFilterButton";
 var import_button = require("@launchpad-ui/button");
 var import_icons2 = require("@launchpad-ui/icons");
 var import_menu = require("@launchpad-ui/menu");
+var import_jsx_runtime = require("react/jsx-runtime");
 var FilterMenu = ({
   options,
   onClearFilter,
@@ -82,42 +102,51 @@ var FilterMenu = ({
   size
 }) => {
   const filterOptions = isLoading ? [{ name: "loading...", value: "loading...", isDisabled: true }] : options;
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, onClearFilter && /* @__PURE__ */ React.createElement(import_button.Button, {
-    tabIndex: 0,
-    className: "Menu-clear",
-    onClick: onClearFilter,
-    kind: import_button.ButtonKind.LINK
-  }, "CLEAR FILTER"), /* @__PURE__ */ React.createElement(import_menu.Menu, {
-    enableVirtualization,
-    size,
-    onSelect
-  }, enableSearch && /* @__PURE__ */ React.createElement(import_menu.MenuSearch, {
-    value: searchValue,
-    placeholder: searchPlaceholder,
-    onChange: onSearchChange,
-    ariaLabel: searchAriaLabel
-  }), filterOptions.map((option, index) => {
-    if (option.isDivider) {
-      return /* @__PURE__ */ React.createElement(import_menu.MenuDivider, {
-        key: `divider-${index}`
-      });
-    }
-    return /* @__PURE__ */ React.createElement(import_menu.MenuItem, {
-      item: option,
-      disabled: option.isDisabled,
-      icon: option.isChecked ? import_icons2.Check : null,
-      key: option.value,
-      role: "menuitemradio",
-      "aria-checked": option.isChecked ? "true" : void 0,
-      nested: option.nested,
-      groupHeader: option.groupHeader,
-      tooltip: option.isDisabled && disabledOptionTooltip ? disabledOptionTooltip : void 0,
-      tooltipPlacement: "right"
-    }, option.name);
-  })));
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+    children: [
+      onClearFilter && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_button.Button, {
+        tabIndex: 0,
+        className: "Menu-clear",
+        onClick: onClearFilter,
+        kind: import_button.ButtonKind.LINK,
+        children: "CLEAR FILTER"
+      }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_menu.Menu, {
+        enableVirtualization,
+        size,
+        onSelect,
+        children: [
+          enableSearch && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_menu.MenuSearch, {
+            value: searchValue,
+            placeholder: searchPlaceholder,
+            onChange: onSearchChange,
+            ariaLabel: searchAriaLabel
+          }),
+          filterOptions.map((option, index) => {
+            if (option.isDivider) {
+              return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_menu.MenuDivider, {}, `divider-${index}`);
+            }
+            return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_menu.MenuItem, {
+              item: option,
+              disabled: option.isDisabled,
+              icon: option.isChecked ? import_icons2.Check : null,
+              role: "menuitemradio",
+              "aria-checked": option.isChecked ? "true" : void 0,
+              nested: option.nested,
+              groupHeader: option.groupHeader,
+              tooltip: option.isDisabled && disabledOptionTooltip ? disabledOptionTooltip : void 0,
+              tooltipPlacement: "right",
+              children: option.name
+            }, option.value);
+          })
+        ]
+      })
+    ]
+  });
 };
 
 // src/AppliedFilter.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
 var SEARCH_INPUT_THRESHOLD = 4;
 var AppliedFilter = ({
   searchValue,
@@ -136,24 +165,29 @@ var AppliedFilter = ({
 }) => {
   const enableSearch = onSearchChange && (!!searchValue || options.length > SEARCH_INPUT_THRESHOLD || !isEmpty);
   const dropdownClasses = (0, import_clsx2.default)("Filter-target", className);
-  return /* @__PURE__ */ React.createElement(import_dropdown.Dropdown, {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_dropdown.Dropdown, {
     targetClassName: dropdownClasses,
     placement: "bottom-start",
     enableArrow: false,
-    ...props
-  }, /* @__PURE__ */ React.createElement(AppliedFilterButton, {
-    name,
-    onClickFilterButton
-  }, description), /* @__PURE__ */ React.createElement(FilterMenu, {
-    options,
-    searchValue,
-    searchPlaceholder,
-    enableSearch,
-    searchAriaLabel,
-    onSearchChange,
-    onClearFilter,
-    isLoading
-  }));
+    ...props,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AppliedFilterButton, {
+        name,
+        onClickFilterButton,
+        children: description
+      }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FilterMenu, {
+        options,
+        searchValue,
+        searchPlaceholder,
+        enableSearch,
+        searchAriaLabel,
+        onSearchChange,
+        onClearFilter,
+        isLoading
+      })
+    ]
+  });
 };
 
 // src/Filter.tsx
@@ -169,6 +203,7 @@ var import_visually_hidden = require("@react-aria/visually-hidden");
 var import_clsx3 = __toESM(require("clsx"));
 var import_react2 = require("react");
 var import_Filter2 = require("./styles/Filter.css");
+var import_jsx_runtime = require("react/jsx-runtime");
 var FilterButton = (0, import_react2.forwardRef)((props, ref) => {
   const {
     children,
@@ -186,42 +221,59 @@ var FilterButton = (0, import_react2.forwardRef)((props, ref) => {
   const nameId = (0, import_utils.useId)();
   const descriptionId = (0, import_utils.useId)();
   const hasDescription = import_react2.Children.count(children) !== 0;
-  const nameElement = /* @__PURE__ */ React.createElement("span", {
-    className: "Filter-name"
-  }, name, hasDescription && ":");
-  return /* @__PURE__ */ React.createElement("div", {
+  const nameElement = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+    className: "Filter-name",
+    children: [
+      name,
+      hasDescription && ":"
+    ]
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
     className: "Filter-buttonContainer",
-    "data-test-id": testId
-  }, /* @__PURE__ */ React.createElement("button", {
-    ...rest,
-    "aria-labelledby": `${nameId} ${hasDescription ? descriptionId : ""}`,
-    "aria-haspopup": true,
-    className: (0, import_clsx3.default)("Filter-button", className, {
-      "is-clearable": isClearable || isSelected
-    }),
-    ref,
-    onClick: onClickFilterButton
-  }, hideName ? /* @__PURE__ */ React.createElement(import_visually_hidden.VisuallyHidden, {
-    id: nameId
-  }, nameElement) : /* @__PURE__ */ React.createElement("span", {
-    id: nameId
-  }, nameElement), hasDescription && /* @__PURE__ */ React.createElement("span", {
-    id: descriptionId,
-    className: "Filter-description"
-  }, children), !isClearable && /* @__PURE__ */ React.createElement(import_icons3.ExpandMore, {
-    size: import_icons3.IconSize.SMALL
-  })), isClearable && /* @__PURE__ */ React.createElement(import_tooltip.Tooltip, {
-    targetClassName: "Filter-clearTooltip",
-    content: clearTooltip
-  }, /* @__PURE__ */ React.createElement(import_button2.Button, {
-    className: "Filter-clear",
-    size: import_button2.ButtonSize.SMALL,
-    type: import_button2.ButtonType.ICON,
-    icon: /* @__PURE__ */ React.createElement(import_icons3.Close, {
-      size: import_icons3.IconSize.TINY
-    }),
-    onClick: onClear
-  })));
+    "data-test-id": testId,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", {
+        ...rest,
+        "aria-labelledby": `${nameId} ${hasDescription ? descriptionId : ""}`,
+        "aria-haspopup": true,
+        className: (0, import_clsx3.default)("Filter-button", className, {
+          "is-clearable": isClearable || isSelected
+        }),
+        ref,
+        onClick: onClickFilterButton,
+        children: [
+          hideName ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_visually_hidden.VisuallyHidden, {
+            id: nameId,
+            children: nameElement
+          }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+            id: nameId,
+            children: nameElement
+          }),
+          hasDescription && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+            id: descriptionId,
+            className: "Filter-description",
+            children
+          }),
+          !isClearable && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons3.ExpandMore, {
+            size: import_icons3.IconSize.SMALL
+          })
+        ]
+      }),
+      isClearable && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tooltip.Tooltip, {
+        targetClassName: "Filter-clearTooltip",
+        content: clearTooltip,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_button2.Button, {
+          className: "Filter-clear",
+          size: import_button2.ButtonSize.SMALL,
+          type: import_button2.ButtonType.ICON,
+          icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons3.Close, {
+            size: import_icons3.IconSize.TINY
+          }),
+          onClick: onClear
+        })
+      })
+    ]
+  });
 });
 FilterButton.defaultProps = {
   clearTooltip: "Clear filter"
@@ -229,6 +281,7 @@ FilterButton.defaultProps = {
 FilterButton.displayName = "FilterButton";
 
 // src/Filter.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
 var SEARCH_INPUT_THRESHOLD2 = 4;
 var Filter = ({
   searchValue,
@@ -258,29 +311,34 @@ var Filter = ({
     event.preventDefault();
     onClear?.();
   };
-  return /* @__PURE__ */ React.createElement(import_dropdown2.Dropdown, {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_dropdown2.Dropdown, {
     targetClassName: dropdownClasses,
-    ...props
-  }, /* @__PURE__ */ React.createElement(FilterButton, {
-    isClearable,
-    onClear: handleClear,
-    name,
-    hideName,
-    isSelected,
-    onClickFilterButton,
-    testId
-  }, description), /* @__PURE__ */ React.createElement(FilterMenu, {
-    options,
-    searchValue,
-    searchPlaceholder,
-    searchAriaLabel,
-    enableSearch,
-    onSearchChange,
-    isLoading,
-    disabledOptionTooltip,
-    size,
-    enableVirtualization
-  }));
+    ...props,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FilterButton, {
+        isClearable,
+        onClear: handleClear,
+        name,
+        hideName,
+        isSelected,
+        onClickFilterButton,
+        testId,
+        children: description
+      }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FilterMenu, {
+        options,
+        searchValue,
+        searchPlaceholder,
+        searchAriaLabel,
+        enableSearch,
+        onSearchChange,
+        isLoading,
+        disabledOptionTooltip,
+        size,
+        enableVirtualization
+      })
+    ]
+  });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/index.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../src/index.ts", "../../../scripts/react-shim.js", "../src/AppliedFilter.tsx", "../src/AppliedFilterButton.tsx", "../src/FilterMenu.tsx", "../src/Filter.tsx", "../src/FilterButton.tsx"],
   "sourcesContent": ["export type { AppliedFilterProps } from './AppliedFilter';\nexport type { FilterProps } from './Filter';\nexport type { FilterButtonProps } from './FilterButton';\nexport type { FilterOption } from './FilterMenu';\nexport { AppliedFilter } from './AppliedFilter';\nexport { Filter } from './Filter';\nexport { FilterButton } from './FilterButton';\n", "import * as React from 'react';\nexport { React };\n", "import type { FilterOption } from './FilterMenu';\nimport type { ReactNode } from 'react';\n\nimport { Dropdown } from '@launchpad-ui/dropdown';\nimport cx from 'clsx';\n\nimport { AppliedFilterButton } from './AppliedFilterButton';\nimport { FilterMenu } from './FilterMenu';\n\nconst SEARCH_INPUT_THRESHOLD = 4;\n\ntype AppliedFilterProps = {\n  searchValue?: string;\n  onSearchChange?(event: React.ChangeEvent<HTMLInputElement>): void;\n  onClearFilter?(): void;\n  searchPlaceholder?: string;\n  name?: ReactNode;\n  description: ReactNode;\n  options: FilterOption[];\n  className?: string;\n  onStateChange?({ isOpen }: { isOpen?: boolean }): void;\n  isSelected?: boolean;\n  onSelect?(item: FilterOption): void;\n  isEmpty?: boolean;\n  isLoading?: boolean;\n  onClickFilterButton?(): void;\n  searchAriaLabel?: string;\n};\n\nconst AppliedFilter = ({\n  searchValue,\n  onSearchChange,\n  searchPlaceholder,\n  name,\n  description,\n  options,\n  className,\n  isEmpty,\n  isLoading,\n  onClickFilterButton,\n  onClearFilter,\n  searchAriaLabel,\n  ...props\n}: AppliedFilterProps) => {\n  const enableSearch =\n    onSearchChange && (!!searchValue || options.length > SEARCH_INPUT_THRESHOLD || !isEmpty);\n\n  const dropdownClasses = cx('Filter-target', className);\n  return (\n    <Dropdown\n      targetClassName={dropdownClasses}\n      placement=\"bottom-start\"\n      enableArrow={false}\n      {...props}\n    >\n      <AppliedFilterButton name={name} onClickFilterButton={onClickFilterButton}>\n        {description}\n      </AppliedFilterButton>\n\n      <FilterMenu\n        options={options}\n        searchValue={searchValue}\n        searchPlaceholder={searchPlaceholder}\n        enableSearch={enableSearch}\n        searchAriaLabel={searchAriaLabel}\n        onSearchChange={onSearchChange}\n        onClearFilter={onClearFilter}\n        isLoading={isLoading}\n      />\n    </Dropdown>\n  );\n};\n\nexport type { AppliedFilterProps };\nexport { AppliedFilter };\n", "import type { ReactNode } from 'react';\n\nimport { ExpandMore, IconSize } from '@launchpad-ui/icons';\nimport cx from 'clsx';\nimport { Children, forwardRef } from 'react';\n\nimport './styles/Filter.css';\n\ntype AppliedFilterButtonProps = {\n  name?: ReactNode;\n  className?: string;\n  isSelected?: boolean;\n  children: ReactNode;\n  onClickFilterButton?(): void;\n};\n\ntype Ref = HTMLButtonElement;\n\nconst AppliedFilterButton = forwardRef<Ref, AppliedFilterButtonProps>((props, ref) => {\n  const { name, className, isSelected, children, onClickFilterButton } = props;\n\n  const hasDescription = Children.count(children) !== 0;\n\n  return (\n    <div className=\"AppliedFilter-buttonContainer\">\n      <button\n        aria-haspopup\n        className={cx(\n          'AppliedFilter-button',\n          {\n            isSelected,\n          },\n          className\n        )}\n        ref={ref}\n        onClick={onClickFilterButton}\n      >\n        {name && (\n          <span className=\"AppliedFilter-name\">\n            {name}\n            {hasDescription && ':'}\n          </span>\n        )}\n        {hasDescription && <span className=\"AppliedFilter-description\">{children}</span>}\n        <ExpandMore size={IconSize.SMALL} />\n      </button>\n    </div>\n  );\n});\n\nAppliedFilterButton.displayName = 'AppliedFilterButton';\n\nexport type { AppliedFilterButtonProps };\nexport { AppliedFilterButton };\n", "import type { MenuProps } from '@launchpad-ui/menu';\nimport type { ReactNode } from 'react';\n\nimport { Button, ButtonKind } from '@launchpad-ui/button';\nimport { Check } from '@launchpad-ui/icons';\nimport { Menu, MenuDivider, MenuItem, MenuSearch } from '@launchpad-ui/menu';\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype FilterOption<T = any> = {\n  name?: ReactNode;\n  isDisabled?: boolean;\n  isDivider?: boolean;\n  isChecked?: boolean;\n  value: T | null;\n  projKey?: string;\n  nested?: boolean;\n  groupHeader?: boolean;\n};\n\ntype FilterMenuProps = Pick<MenuProps<string>, 'enableVirtualization' | 'size'> & {\n  options: FilterOption[];\n  onClearFilter?(): void;\n  enableSearch?: boolean;\n  searchValue?: string;\n  searchPlaceholder?: string;\n  searchAriaLabel?: string;\n  onSearchChange?(event: React.ChangeEvent<HTMLInputElement>): void;\n  onSelect?(): void;\n  isLoading?: boolean;\n  disabledOptionTooltip?: string;\n};\n\nconst FilterMenu = ({\n  options,\n  onClearFilter,\n  enableSearch,\n  searchValue,\n  searchPlaceholder,\n  searchAriaLabel,\n  onSelect,\n  onSearchChange,\n  isLoading = false,\n  disabledOptionTooltip,\n  enableVirtualization,\n  size,\n}: FilterMenuProps) => {\n  const filterOptions = isLoading\n    ? [{ name: 'loading...', value: 'loading...', isDisabled: true }]\n    : options;\n\n  return (\n    <>\n      {onClearFilter && (\n        <Button tabIndex={0} className=\"Menu-clear\" onClick={onClearFilter} kind={ButtonKind.LINK}>\n          CLEAR FILTER\n        </Button>\n      )}\n      <Menu enableVirtualization={enableVirtualization} size={size} onSelect={onSelect}>\n        {enableSearch && (\n          <MenuSearch\n            value={searchValue}\n            placeholder={searchPlaceholder}\n            onChange={onSearchChange}\n            ariaLabel={searchAriaLabel}\n          />\n        )}\n        {filterOptions.map((option, index) => {\n          if (option.isDivider) {\n            return <MenuDivider key={`divider-${index}`} />;\n          }\n          return (\n            <MenuItem\n              item={option}\n              disabled={option.isDisabled}\n              icon={option.isChecked ? Check : null}\n              key={option.value}\n              role=\"menuitemradio\"\n              aria-checked={option.isChecked ? 'true' : undefined}\n              nested={option.nested}\n              groupHeader={option.groupHeader}\n              tooltip={\n                option.isDisabled && disabledOptionTooltip ? disabledOptionTooltip : undefined\n              }\n              tooltipPlacement=\"right\"\n            >\n              {option.name}\n            </MenuItem>\n          );\n        })}\n      </Menu>\n    </>\n  );\n};\n\nexport { FilterMenu };\nexport type { FilterOption, FilterMenuProps };\n", "import type { FilterOption } from './FilterMenu';\nimport type { MenuProps } from '@launchpad-ui/menu';\nimport type { ReactNode, SyntheticEvent } from 'react';\n\nimport { Dropdown } from '@launchpad-ui/dropdown';\nimport cx from 'clsx';\n\nimport { FilterButton } from './FilterButton';\nimport { FilterMenu } from './FilterMenu';\n\nconst SEARCH_INPUT_THRESHOLD = 4;\n\ntype FilterProps = Pick<MenuProps<string>, 'size' | 'enableVirtualization'> & {\n  searchValue?: string;\n  onSearchChange?(event: React.ChangeEvent<HTMLInputElement>): void;\n  searchPlaceholder?: string;\n  searchAriaLabel?: string;\n  name: ReactNode;\n  hideName?: boolean;\n  description: ReactNode;\n  options: FilterOption[];\n  isClearable?: boolean;\n  onClear?(): void;\n  className?: string;\n  onStateChange?({ isOpen }: { isOpen?: boolean }): void;\n  isSelected?: boolean;\n  onSelect?(item: FilterOption): void;\n  isEmpty?: boolean;\n  isLoading?: boolean;\n  onClickFilterButton?(): void;\n  disabledOptionTooltip?: string;\n  testId?: string;\n};\n\nconst Filter = ({\n  searchValue,\n  onSearchChange,\n  searchPlaceholder,\n  searchAriaLabel,\n  name,\n  hideName,\n  description,\n  options,\n  isClearable,\n  onClear,\n  isSelected,\n  className,\n  isEmpty,\n  isLoading,\n  onClickFilterButton,\n  disabledOptionTooltip,\n  testId,\n  size,\n  enableVirtualization,\n  ...props\n}: FilterProps) => {\n  const enableSearch =\n    onSearchChange && (!!searchValue || options.length > SEARCH_INPUT_THRESHOLD || !isEmpty);\n\n  const dropdownClasses = cx('Filter', 'Filter-target', className);\n\n  const handleClear = (event: SyntheticEvent) => {\n    event.preventDefault();\n    onClear?.();\n  };\n\n  return (\n    <Dropdown targetClassName={dropdownClasses} {...props}>\n      <FilterButton\n        isClearable={isClearable}\n        onClear={handleClear}\n        name={name}\n        hideName={hideName}\n        isSelected={isSelected}\n        onClickFilterButton={onClickFilterButton}\n        testId={testId}\n      >\n        {description}\n      </FilterButton>\n      <FilterMenu\n        options={options}\n        searchValue={searchValue}\n        searchPlaceholder={searchPlaceholder}\n        searchAriaLabel={searchAriaLabel}\n        enableSearch={enableSearch}\n        onSearchChange={onSearchChange}\n        isLoading={isLoading}\n        disabledOptionTooltip={disabledOptionTooltip}\n        size={size}\n        enableVirtualization={enableVirtualization}\n      />\n    </Dropdown>\n  );\n};\n\nexport { Filter };\nexport type { FilterProps };\n", "import type { ReactNode, SyntheticEvent } from 'react';\n\nimport { Button, ButtonSize, ButtonType } from '@launchpad-ui/button';\nimport { Close, ExpandMore, IconSize } from '@launchpad-ui/icons';\nimport { Tooltip } from '@launchpad-ui/tooltip';\nimport { useId } from '@react-aria/utils';\nimport { VisuallyHidden } from '@react-aria/visually-hidden';\nimport cx from 'clsx';\nimport { Children, forwardRef } from 'react';\n\nimport './styles/Filter.css';\n\ntype FilterButtonProps = {\n  name: ReactNode;\n  hideName?: boolean;\n  isClearable?: boolean;\n  onClear?(event: SyntheticEvent): void;\n  className?: string;\n  isSelected?: boolean;\n  clearTooltip?: string | JSX.Element;\n  children?: ReactNode;\n  onClickFilterButton?(): void;\n  testId?: string;\n};\n\ntype Ref = HTMLButtonElement;\n\nconst FilterButton = forwardRef<Ref, FilterButtonProps>((props, ref) => {\n  const {\n    children,\n    name,\n    hideName,\n    isClearable,\n    clearTooltip,\n    onClear,\n    isSelected,\n    onClickFilterButton,\n    className,\n    testId,\n    ...rest\n  } = props;\n  const nameId = useId();\n  const descriptionId = useId();\n\n  const hasDescription = Children.count(children) !== 0;\n\n  const nameElement = (\n    <span className=\"Filter-name\">\n      {name}\n      {hasDescription && ':'}\n    </span>\n  );\n\n  return (\n    <div className=\"Filter-buttonContainer\" data-test-id={testId}>\n      <button\n        {...rest}\n        aria-labelledby={`${nameId} ${hasDescription ? descriptionId : ''}`}\n        aria-haspopup\n        className={cx('Filter-button', className, {\n          'is-clearable': isClearable || isSelected,\n        })}\n        ref={ref}\n        onClick={onClickFilterButton}\n      >\n        {hideName ? (\n          <VisuallyHidden id={nameId}>{nameElement}</VisuallyHidden>\n        ) : (\n          <span id={nameId}>{nameElement}</span>\n        )}\n        {hasDescription && (\n          <span id={descriptionId} className=\"Filter-description\">\n            {children}\n          </span>\n        )}\n        {!isClearable && <ExpandMore size={IconSize.SMALL} />}\n      </button>\n      {isClearable && (\n        <Tooltip targetClassName=\"Filter-clearTooltip\" content={clearTooltip}>\n          <Button\n            className=\"Filter-clear\"\n            size={ButtonSize.SMALL}\n            type={ButtonType.ICON}\n            icon={<Close size={IconSize.TINY} />}\n            onClick={onClear}\n          />\n        </Tooltip>\n      )}\n    </div>\n  );\n});\n\nFilterButton.defaultProps = {\n  clearTooltip: 'Clear filter',\n};\n\nFilterButton.displayName = 'FilterButton';\n\nexport { FilterButton };\nexport type { FilterButtonProps };\n"],
-  "mappings": "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",
-  "names": []
+  "mappings": "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",
+  "names": ["import_clsx", "cx", "import_icons", "cx", "import_dropdown", "import_clsx", "import_button", "import_icons", "import_clsx", "import_react", "import_Filter", "cx", "SEARCH_INPUT_THRESHOLD", "cx"]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@launchpad-ui/filter",
-  "version": "0.1.1",
+  "version": "0.2.1",
   "status": "beta",
   "publishConfig": {
     "access": "public"
@@ -26,19 +26,19 @@
   },
   "source": "src/index.ts",
   "dependencies": {
-    "@launchpad-ui/button": "~0.3.2",
-    "@launchpad-ui/dropdown": "~0.2.9",
-    "@launchpad-ui/icons": "~0.2.4",
-    "@launchpad-ui/menu": "~0.3.7",
+    "@launchpad-ui/button": "~0.4.0",
+    "@launchpad-ui/dropdown": "~0.3.1",
+    "@launchpad-ui/icons": "~0.3.1",
+    "@launchpad-ui/menu": "~0.4.1",
     "@launchpad-ui/tokens": "~0.1.5",
-    "@launchpad-ui/tooltip": "~0.3.9",
+    "@launchpad-ui/tooltip": "~0.4.1",
     "@react-aria/utils": "^3.13.1",
     "@react-aria/visually-hidden": "^3.4.0",
     "clsx": "^1.2.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   },
   "devDependencies": {
     "react": "^18.2.0",