@audius/harmony 0.1.0 → 0.2.0

package/dist/components/artwork/Artwork.js

@@ -15,13 +15,13 @@ import { Skeleton } from '../skeleton/Skeleton.js';
  */
 var Artwork = function (props) {
     var isLoadingProp = props.isLoading, src = props.src, _a = props.borderRadius, borderRadius = _a === void 0 ? 's' : _a, borderWidth = props.borderWidth, shadow = props.shadow, children = props.children, testId = props["data-testid"], other = __rest(props, ["isLoading", "src", "borderRadius", "borderWidth", "shadow", "children", 'data-testid']);
-    var _b = useState(!!src), isLoadingState = _b[0], setIsLoadingState = _b[1];
+    var _b = useState(true), isLoadingState = _b[0], setIsLoadingState = _b[1];
     var isLoading = isLoadingProp !== null && isLoadingProp !== void 0 ? isLoadingProp : isLoadingState;
     var _c = useTheme(), color = _c.color, motion = _c.motion;
     useEffect(function () {
-        setIsLoadingState(!!src);
+        setIsLoadingState(true);
     }, [src]);
-    return (jsx(Box, __assign({}, other, { children: jsxs(Box, __assign({ borderRadius: borderRadius, border: 'default', shadow: shadow, css: { borderWidth: borderWidth } }, { children: [isLoading ? (jsx(Skeleton, { borderRadius: borderRadius, h: '100%', w: '100%', css: { zIndex: 1, position: 'absolute' } })) : null, jsx(Box, { w: '100%', pt: '100%', borderRadius: borderRadius, css: {
+    return (jsx(Box, __assign({}, other, { children: jsxs(Box, __assign({ borderRadius: borderRadius, border: 'default', shadow: shadow, css: { borderWidth: borderWidth } }, { children: [isLoading ? (jsx(Skeleton, { borderRadius: borderRadius, h: '100%', w: '100%', css: { zIndex: 2, position: 'absolute' } })) : null, jsx(Box, { w: '100%', pt: '100%', borderRadius: borderRadius, css: {
                         backgroundColor: !src && children ? color.neutral.n400 : color.background.surface2
                     } }), src ? (jsx(Box, { as: 'img', borderRadius: borderRadius, h: '100%', w: '100%', onLoad: function () {
                         setIsLoadingState(false);
@@ -39,7 +39,8 @@ var Artwork = function (props) {
                         top: 0,
                         left: 0,
                         backgroundColor: src ? color.static.black : undefined,
-                        opacity: src ? 0.4 : undefined
+                        opacity: src ? 0.4 : undefined,
+                        zIndex: 1
                     } }, { children: children }))) : null] })) })));
 };
 

package/dist/components/artwork/Artwork.js.map

@@ -1 +1 @@
-{"version":3,"file":"Artwork.js","sources":["../../../src/components/artwork/Artwork.tsx"],"sourcesContent":["import { ComponentProps, useEffect, useState } from 'react'\n\nimport { useTheme } from '@emotion/react'\n\nimport { Box, BoxProps } from '../layout/Box'\nimport { Flex } from '../layout/Flex'\nimport { Skeleton } from '../skeleton'\n\nexport type ArtworkProps = {\n  isLoading?: boolean\n  borderWidth?: number\n  'data-testid'?: string\n  noLoading?: boolean\n} & Pick<ComponentProps<'img'>, 'src'> &\n  BoxProps\n\n/**\n * The artwork component displays the track cover art and appears in several\n * locations such as track tiles, track and playlist, pages,\n * and the sidebar. It can have interactive elements on hover.\n * This component enhances the listening experience and helps users quickly\n * identify their favorite tracks.\n */\nexport const Artwork = (props: ArtworkProps) => {\n  const {\n    isLoading: isLoadingProp,\n    src,\n    borderRadius = 's',\n    borderWidth,\n    shadow,\n    children,\n    'data-testid': testId,\n    ...other\n  } = props\n  const [isLoadingState, setIsLoadingState] = useState(!!src)\n  const isLoading = isLoadingProp ?? isLoadingState\n  const { color, motion } = useTheme()\n\n  useEffect(() => {\n    setIsLoadingState(!!src)\n  }, [src])\n\n  return (\n    <Box {...other}>\n      <Box\n        borderRadius={borderRadius}\n        border='default'\n        shadow={shadow}\n        css={{ borderWidth }}\n      >\n        {isLoading ? (\n          <Skeleton\n            borderRadius={borderRadius}\n            h='100%'\n            w='100%'\n            css={{ zIndex: 1, position: 'absolute' }}\n          />\n        ) : null}\n        <Box\n          w='100%'\n          pt='100%'\n          borderRadius={borderRadius}\n          css={{\n            backgroundColor:\n              !src && children ? color.neutral.n400 : color.background.surface2\n          }}\n        />\n        {src ? (\n          <Box\n            as='img'\n            borderRadius={borderRadius}\n            h='100%'\n            w='100%'\n            onLoad={() => {\n              setIsLoadingState(false)\n            }}\n            // @ts-ignore\n            src={src}\n            data-testid={testId}\n            css={{\n              position: 'absolute',\n              top: 0,\n              left: 0,\n              objectFit: 'cover',\n              opacity: isLoading ? 0 : 1,\n              transition: `opacity ${motion.calm}`\n            }}\n          />\n        ) : null}\n        {children ? (\n          <Flex\n            alignItems='center'\n            justifyContent='center'\n            h='100%'\n            w='100%'\n            borderRadius={borderRadius}\n            css={{\n              position: 'absolute',\n              top: 0,\n              left: 0,\n              backgroundColor: src ? color.static.black : undefined,\n              opacity: src ? 0.4 : undefined\n            }}\n          >\n            {children}\n          </Flex>\n        ) : null}\n      </Box>\n    </Box>\n  )\n}\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"Artwork.js","sources":["../../../src/components/artwork/Artwork.tsx"],"sourcesContent":["import { ComponentProps, useEffect, useState } from 'react'\n\nimport { useTheme } from '@emotion/react'\n\nimport { Box, BoxProps } from '../layout/Box'\nimport { Flex } from '../layout/Flex'\nimport { Skeleton } from '../skeleton'\n\nexport type ArtworkProps = {\n  isLoading?: boolean\n  borderWidth?: number\n  'data-testid'?: string\n  noLoading?: boolean\n} & Pick<ComponentProps<'img'>, 'src'> &\n  BoxProps\n\n/**\n * The artwork component displays the track cover art and appears in several\n * locations such as track tiles, track and playlist, pages,\n * and the sidebar. It can have interactive elements on hover.\n * This component enhances the listening experience and helps users quickly\n * identify their favorite tracks.\n */\nexport const Artwork = (props: ArtworkProps) => {\n  const {\n    isLoading: isLoadingProp,\n    src,\n    borderRadius = 's',\n    borderWidth,\n    shadow,\n    children,\n    'data-testid': testId,\n    ...other\n  } = props\n  const [isLoadingState, setIsLoadingState] = useState(true)\n  const isLoading = isLoadingProp ?? isLoadingState\n  const { color, motion } = useTheme()\n\n  useEffect(() => {\n    setIsLoadingState(true)\n  }, [src])\n\n  return (\n    <Box {...other}>\n      <Box\n        borderRadius={borderRadius}\n        border='default'\n        shadow={shadow}\n        css={{ borderWidth }}\n      >\n        {isLoading ? (\n          <Skeleton\n            borderRadius={borderRadius}\n            h='100%'\n            w='100%'\n            css={{ zIndex: 2, position: 'absolute' }}\n          />\n        ) : null}\n        <Box\n          w='100%'\n          pt='100%'\n          borderRadius={borderRadius}\n          css={{\n            backgroundColor:\n              !src && children ? color.neutral.n400 : color.background.surface2\n          }}\n        />\n        {src ? (\n          <Box\n            as='img'\n            borderRadius={borderRadius}\n            h='100%'\n            w='100%'\n            onLoad={() => {\n              setIsLoadingState(false)\n            }}\n            // @ts-ignore\n            src={src}\n            data-testid={testId}\n            css={{\n              position: 'absolute',\n              top: 0,\n              left: 0,\n              objectFit: 'cover',\n              opacity: isLoading ? 0 : 1,\n              transition: `opacity ${motion.calm}`\n            }}\n          />\n        ) : null}\n        {children ? (\n          <Flex\n            alignItems='center'\n            justifyContent='center'\n            h='100%'\n            w='100%'\n            borderRadius={borderRadius}\n            css={{\n              position: 'absolute',\n              top: 0,\n              left: 0,\n              backgroundColor: src ? color.static.black : undefined,\n              opacity: src ? 0.4 : undefined,\n              zIndex: 1\n            }}\n          >\n            {children}\n          </Flex>\n        ) : null}\n      </Box>\n    </Box>\n  )\n}\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/components/avatar/Avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,YAAY,EAAE,MAAM,YAAY,CAAA;AAElD,KAAK,iBAAiB,GAAG,IAAI,CAAC,YAAY,EAAE,aAAa,CAAC,CAAA;AAE1D,MAAM,MAAM,WAAW,GAAG,iBAAiB,GAAG;IAC5C,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAA;IAC9B,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,IAAI,GAAG,KAAK,CAAA;IAC3D,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CACjC,CAAA;AAgBD,eAAO,MAAM,MAAM,UAAW,WAAW,qDAcxC,CAAA"}
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,YAAY,EAAE,MAAM,YAAY,CAAA;AAElD,KAAK,iBAAiB,GAAG,IAAI,CAAC,YAAY,EAAE,aAAa,CAAC,CAAA;AAE1D,MAAM,MAAM,WAAW,GAAG,iBAAiB,GAAG;IAC5C,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAA;IAC9B,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,IAAI,GAAG,KAAK,CAAA;IAC3D,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CACjC,CAAA;AAgBD,eAAO,MAAM,MAAM,UAAW,WAAW,qDAmBxC,CAAA"}

package/dist/components/avatar/Avatar.js

@@ -15,7 +15,7 @@ var borderWidthMap = {
     default: 2
 };
 var Avatar = function (props) {
-    var variant = props.variant, _a = props.size, size = _a === void 0 ? 'auto' : _a, _b = props.borderWidth, borderWidth = _b === void 0 ? 'default' : _b, other = __rest(props, ["variant", "size", "borderWidth"]);
+    var variant = props.variant, _a = props.size, size = _a === void 0 ? 'auto' : _a, _b = props.borderWidth, borderWidth = _b === void 0 ? size === 'small' ? 'thin' : 'default' : _b, other = __rest(props, ["variant", "size", "borderWidth"]);
     return (jsx(Artwork, __assign({ borderRadius: 'circle', h: sizeMap[size], w: sizeMap[size], shadow: variant === 'strong' ? 'emphasis' : 'flat', borderWidth: borderWidthMap[borderWidth], css: variant === 'strong' ? { zIndex: 1 } : undefined }, other)));
 };
 

package/dist/components/avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sources":["../../../src/components/avatar/Avatar.tsx"],"sourcesContent":["import { Artwork, ArtworkProps } from '../artwork'\n\ntype ArtworkInnerProps = Omit<ArtworkProps, 'borderWidth'>\n\nexport type AvatarProps = ArtworkInnerProps & {\n  variant?: 'default' | 'strong'\n  size?: 'auto' | 'small' | 'medium' | 'large' | 'xl' | 'xxl'\n  borderWidth?: 'thin' | 'default'\n}\n\nconst sizeMap = {\n  auto: undefined,\n  small: 24,\n  medium: 40,\n  large: 72,\n  xl: 80,\n  xxl: 120\n}\n\nconst borderWidthMap = {\n  thin: 1.2,\n  default: 2\n}\n\nexport const Avatar = (props: AvatarProps) => {\n  const { variant, size = 'auto', borderWidth = 'default', ...other } = props\n\n  return (\n    <Artwork\n      borderRadius='circle'\n      h={sizeMap[size]}\n      w={sizeMap[size]}\n      shadow={variant === 'strong' ? 'emphasis' : 'flat'}\n      borderWidth={borderWidthMap[borderWidth]}\n      css={variant === 'strong' ? { zIndex: 1 } : undefined}\n      {...other}\n    />\n  )\n}\n"],"names":["_jsx"],"mappings":";;;;AAUA,IAAM,OAAO,GAAG;AACd,IAAA,IAAI,EAAE,SAAS;AACf,IAAA,KAAK,EAAE,EAAE;AACT,IAAA,MAAM,EAAE,EAAE;AACV,IAAA,KAAK,EAAE,EAAE;AACT,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,GAAG,EAAE,GAAG;CACT,CAAA;AAED,IAAM,cAAc,GAAG;AACrB,IAAA,IAAI,EAAE,GAAG;AACT,IAAA,OAAO,EAAE,CAAC;CACX,CAAA;AAEM,IAAM,MAAM,GAAG,UAAC,KAAkB,EAAA;AAC/B,IAAA,IAAA,OAAO,GAAuD,KAAK,CAAA,OAA5D,EAAE,EAAA,GAAqD,KAAK,CAAA,IAA7C,EAAb,IAAI,GAAG,EAAA,KAAA,KAAA,CAAA,GAAA,MAAM,GAAA,EAAA,EAAE,EAAsC,GAAA,KAAK,CAApB,WAAA,EAAvB,WAAW,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,SAAS,GAAA,EAAA,EAAK,KAAK,GAAK,MAAA,CAAA,KAAK,EAArE,CAAA,SAAA,EAAA,MAAA,EAAA,aAAA,CAA6D,CAAF,CAAU;AAE3E,IAAA,QACEA,GAAA,CAAC,OAAO,EAAA,QAAA,CAAA,EACN,YAAY,EAAC,QAAQ,EACrB,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,EAChB,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,EAChB,MAAM,EAAE,OAAO,KAAK,QAAQ,GAAG,UAAU,GAAG,MAAM,EAClD,WAAW,EAAE,cAAc,CAAC,WAAW,CAAC,EACxC,GAAG,EAAE,OAAO,KAAK,QAAQ,GAAG,EAAE,MAAM,EAAE,CAAC,EAAE,GAAG,SAAS,EAAA,EACjD,KAAK,CAAA,CACT,EACH;AACH;;;;"}
+{"version":3,"file":"Avatar.js","sources":["../../../src/components/avatar/Avatar.tsx"],"sourcesContent":["import { Artwork, ArtworkProps } from '../artwork'\n\ntype ArtworkInnerProps = Omit<ArtworkProps, 'borderWidth'>\n\nexport type AvatarProps = ArtworkInnerProps & {\n  variant?: 'default' | 'strong'\n  size?: 'auto' | 'small' | 'medium' | 'large' | 'xl' | 'xxl'\n  borderWidth?: 'thin' | 'default'\n}\n\nconst sizeMap = {\n  auto: undefined,\n  small: 24,\n  medium: 40,\n  large: 72,\n  xl: 80,\n  xxl: 120\n}\n\nconst borderWidthMap = {\n  thin: 1.2,\n  default: 2\n}\n\nexport const Avatar = (props: AvatarProps) => {\n  const {\n    variant,\n    size = 'auto',\n    borderWidth = size === 'small' ? 'thin' : 'default',\n    ...other\n  } = props\n\n  return (\n    <Artwork\n      borderRadius='circle'\n      h={sizeMap[size]}\n      w={sizeMap[size]}\n      shadow={variant === 'strong' ? 'emphasis' : 'flat'}\n      borderWidth={borderWidthMap[borderWidth]}\n      css={variant === 'strong' ? { zIndex: 1 } : undefined}\n      {...other}\n    />\n  )\n}\n"],"names":["_jsx"],"mappings":";;;;AAUA,IAAM,OAAO,GAAG;AACd,IAAA,IAAI,EAAE,SAAS;AACf,IAAA,KAAK,EAAE,EAAE;AACT,IAAA,MAAM,EAAE,EAAE;AACV,IAAA,KAAK,EAAE,EAAE;AACT,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,GAAG,EAAE,GAAG;CACT,CAAA;AAED,IAAM,cAAc,GAAG;AACrB,IAAA,IAAI,EAAE,GAAG;AACT,IAAA,OAAO,EAAE,CAAC;CACX,CAAA;AAEM,IAAM,MAAM,GAAG,UAAC,KAAkB,EAAA;AAErC,IAAA,IAAA,OAAO,GAIL,KAAK,CAJA,OAAA,EACP,KAGE,KAAK,CAAA,IAHM,EAAb,IAAI,mBAAG,MAAM,GAAA,EAAA,EACb,EAEE,GAAA,KAAK,YAF4C,EAAnD,WAAW,GAAG,EAAA,KAAA,KAAA,CAAA,GAAA,IAAI,KAAK,OAAO,GAAG,MAAM,GAAG,SAAS,GAAA,EAAA,EAChD,KAAK,GAAA,MAAA,CACN,KAAK,EALH,CAAA,SAAA,EAAA,MAAA,EAAA,aAAA,CAKL,CADS,CACD;AAET,IAAA,QACEA,GAAA,CAAC,OAAO,EAAA,QAAA,CAAA,EACN,YAAY,EAAC,QAAQ,EACrB,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,EAChB,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,EAChB,MAAM,EAAE,OAAO,KAAK,QAAQ,GAAG,UAAU,GAAG,MAAM,EAClD,WAAW,EAAE,cAAc,CAAC,WAAW,CAAC,EACxC,GAAG,EAAE,OAAO,KAAK,QAAQ,GAAG,EAAE,MAAM,EAAE,CAAC,EAAE,GAAG,SAAS,EAAA,EACjD,KAAK,CAAA,CACT,EACH;AACH;;;;"}

package/dist/components/button/BaseButton/BaseButton.d.ts

@@ -17,6 +17,7 @@ export declare const BaseButton: (props: {
         icon?: CSSObject | undefined;
     } | undefined;
     asChild?: boolean | undefined;
+    slotted?: boolean | undefined;
 } & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     _isHovered?: boolean | undefined;
     _isPressed?: boolean | undefined;

package/dist/components/button/BaseButton/BaseButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BaseButton.d.ts","sourceRoot":"","sources":["../../../../src/components/button/BaseButton/BaseButton.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,SAAS,EAAY,MAAM,gBAAgB,CAAA;AASpD;;;GAGG;AACH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;sJA6GtB,CAAA"}
+{"version":3,"file":"BaseButton.d.ts","sourceRoot":"","sources":["../../../../src/components/button/BaseButton/BaseButton.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,SAAS,EAAY,MAAM,gBAAgB,CAAA;AASpD;;;GAGG;AACH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;sJAoHtB,CAAA"}

package/dist/components/button/BaseButton/BaseButton.js

@@ -11,7 +11,7 @@ import { useMediaQueryListener } from '../../../hooks/useMediaQueryListener.js';
  * `Button` or `PlainButton`.
  */
 var BaseButton = forwardRef(function BaseButton(props, ref) {
-    var LeftIconComponent = props.iconLeft, RightIconComponent = props.iconRight, isStaticIcon = props.isStaticIcon, disabled = props.disabled, isLoading = props.isLoading, widthToHideText = props.widthToHideText, minWidth = props.minWidth, fullWidth = props.fullWidth, styles = props.styles, children = props.children, ariaLabelProp = props["aria-label"], asChild = props.asChild, _isHovered = props._isHovered, _isPressed = props._isPressed, other = __rest(props, ["iconLeft", "iconRight", "isStaticIcon", "disabled", "isLoading", "widthToHideText", "minWidth", "fullWidth", "styles", "children", 'aria-label', "asChild", "_isHovered", "_isPressed"]);
+    var LeftIconComponent = props.iconLeft, RightIconComponent = props.iconRight, isStaticIcon = props.isStaticIcon, disabled = props.disabled, isLoading = props.isLoading, widthToHideText = props.widthToHideText, minWidth = props.minWidth, fullWidth = props.fullWidth, styles = props.styles, children = props.children, slotted = props.slotted, ariaLabelProp = props["aria-label"], asChild = props.asChild, _isHovered = props._isHovered, _isPressed = props._isPressed, other = __rest(props, ["iconLeft", "iconRight", "isStaticIcon", "disabled", "isLoading", "widthToHideText", "minWidth", "fullWidth", "styles", "children", "slotted", 'aria-label', "asChild", "_isHovered", "_isPressed"]);
     var _a = useTheme(), motion = _a.motion, typography = _a.typography;
     var isTextHidden = useMediaQueryListener("(max-width: ".concat(widthToHideText, "px)")).isMatch;
     var getAriaLabel = function () {
@@ -46,7 +46,7 @@ var BaseButton = forwardRef(function BaseButton(props, ref) {
             fill: 'currentcolor'
         }
     };
-    return (jsxs(ButtonComponent, __assign({ css: [buttonComponentCss, styles === null || styles === void 0 ? void 0 : styles.button], disabled: disabled || isLoading, ref: ref, type: asChild ? undefined : 'button', "aria-label": getAriaLabel() }, other, { children: [isLoading ? (jsx(LoadingSpinner, { css: styles === null || styles === void 0 ? void 0 : styles.icon })) : LeftIconComponent ? (jsx(LeftIconComponent, { css: [iconCss, styles === null || styles === void 0 ? void 0 : styles.icon] })) : null, !isTextHidden ? jsx(Slottable, { children: children }) : null, RightIconComponent ? (jsx(RightIconComponent, { css: [iconCss, styles === null || styles === void 0 ? void 0 : styles.icon] })) : null] })));
+    return (jsxs(ButtonComponent, __assign({ css: [buttonComponentCss, styles === null || styles === void 0 ? void 0 : styles.button], disabled: disabled || isLoading, ref: ref, type: asChild ? undefined : 'button', "aria-label": getAriaLabel() }, other, { children: [isLoading ? (jsx(LoadingSpinner, { css: styles === null || styles === void 0 ? void 0 : styles.icon })) : LeftIconComponent ? (jsx(LeftIconComponent, { css: [iconCss, styles === null || styles === void 0 ? void 0 : styles.icon] })) : null, !isTextHidden ? (slotted ? (children) : (jsx(Slottable, { children: children }))) : null, RightIconComponent ? (jsx(RightIconComponent, { css: [iconCss, styles === null || styles === void 0 ? void 0 : styles.icon] })) : null] })));
 });
 
 export { BaseButton };

package/dist/components/button/BaseButton/BaseButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseButton.js","sources":["../../../../src/components/button/BaseButton/BaseButton.tsx"],"sourcesContent":["import { forwardRef } from 'react'\n\nimport { CSSObject, useTheme } from '@emotion/react'\nimport { Slot, Slottable } from '@radix-ui/react-slot'\n\nimport LoadingSpinner from 'components/loading-spinner/LoadingSpinner'\n\nimport { useMediaQueryListener } from '../../../hooks/useMediaQueryListener'\n\nimport type { BaseButtonProps } from './types'\n\n/**\n * Base component for Harmony buttons. Not intended to be used directly. Use\n * `Button` or `PlainButton`.\n */\nexport const BaseButton = forwardRef<HTMLButtonElement, BaseButtonProps>(\n  function BaseButton(props, ref) {\n    const {\n      iconLeft: LeftIconComponent,\n      iconRight: RightIconComponent,\n      isStaticIcon,\n      disabled,\n      isLoading,\n      widthToHideText,\n      minWidth,\n      fullWidth,\n      styles,\n      children,\n      'aria-label': ariaLabelProp,\n      asChild,\n      _isHovered,\n      _isPressed,\n      ...other\n    } = props\n    const { motion, typography } = useTheme()\n    const { isMatch: isTextHidden } = useMediaQueryListener(\n      `(max-width: ${widthToHideText}px)`\n    )\n\n    const getAriaLabel = () => {\n      // always default to manual aria-label prop if provided\n      if (ariaLabelProp) return ariaLabelProp\n      // We use the children prop as the aria-label if the text becomes hidden\n      // and no aria-label was provided to keep the button accessible.\n      if (isTextHidden && typeof children === 'string') return children\n      return undefined\n    }\n\n    const ButtonComponent = asChild ? Slot : 'button'\n\n    const buttonComponentCss: CSSObject = {\n      fontFamily: typography.font,\n      alignItems: 'center',\n      boxSizing: 'border-box',\n      cursor: 'pointer',\n      display: 'inline-flex',\n      flexShrink: 0,\n      justifyContent: 'center',\n      overflow: 'hidden',\n      position: 'relative',\n      textAlign: 'center',\n      userSelect: 'none',\n      whiteSpace: 'nowrap',\n      transition: `\n        transform ${motion.hover},\n        border-color ${motion.hover},\n        background-color ${motion.hover},\n        color ${motion.hover}\n      `,\n\n      ...(fullWidth && {\n        width: '100%',\n        flexShrink: 1\n      }),\n\n      ':focus': {\n        outline: 'none !important'\n      },\n      ':hover': {\n        transform: fullWidth ? 'scale(1.00)' : 'scale(1.04)'\n      },\n      ':active': {\n        transform: fullWidth ? 'scale(1.00)' : 'scale(0.98)'\n      },\n\n      ...((disabled || isLoading || _isHovered || _isPressed) && {\n        pointerEvents: 'none'\n      }),\n      ...(_isHovered && {\n        transform: fullWidth ? 'scale(1.00)' : 'scale(1.04)'\n      }),\n      ...(_isPressed && {\n        transform: fullWidth ? 'scale(1.00)' : 'scale(0.98)'\n      }),\n      minWidth: minWidth && !isTextHidden ? `${minWidth}px` : 'unset'\n    }\n\n    const iconCss = !isStaticIcon && {\n      '& path': {\n        fill: 'currentcolor'\n      }\n    }\n\n    return (\n      <ButtonComponent\n        css={[buttonComponentCss, styles?.button]}\n        disabled={disabled || isLoading}\n        ref={ref}\n        type={asChild ? undefined : 'button'}\n        aria-label={getAriaLabel()}\n        {...other}\n      >\n        {isLoading ? (\n          <LoadingSpinner css={styles?.icon} />\n        ) : LeftIconComponent ? (\n          <LeftIconComponent css={[iconCss, styles?.icon]} />\n        ) : null}\n        {!isTextHidden ? <Slottable>{children}</Slottable> : null}\n        {RightIconComponent ? (\n          <RightIconComponent css={[iconCss, styles?.icon]} />\n        ) : null}\n      </ButtonComponent>\n    )\n  }\n)\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"BaseButton.js","sources":["../../../../src/components/button/BaseButton/BaseButton.tsx"],"sourcesContent":["import { forwardRef } from 'react'\n\nimport { CSSObject, useTheme } from '@emotion/react'\nimport { Slot, Slottable } from '@radix-ui/react-slot'\n\nimport LoadingSpinner from 'components/loading-spinner/LoadingSpinner'\n\nimport { useMediaQueryListener } from '../../../hooks/useMediaQueryListener'\n\nimport type { BaseButtonProps } from './types'\n\n/**\n * Base component for Harmony buttons. Not intended to be used directly. Use\n * `Button` or `PlainButton`.\n */\nexport const BaseButton = forwardRef<HTMLButtonElement, BaseButtonProps>(\n  function BaseButton(props, ref) {\n    const {\n      iconLeft: LeftIconComponent,\n      iconRight: RightIconComponent,\n      isStaticIcon,\n      disabled,\n      isLoading,\n      widthToHideText,\n      minWidth,\n      fullWidth,\n      styles,\n      children,\n      slotted,\n      'aria-label': ariaLabelProp,\n      asChild,\n      _isHovered,\n      _isPressed,\n      ...other\n    } = props\n    const { motion, typography } = useTheme()\n    const { isMatch: isTextHidden } = useMediaQueryListener(\n      `(max-width: ${widthToHideText}px)`\n    )\n\n    const getAriaLabel = () => {\n      // always default to manual aria-label prop if provided\n      if (ariaLabelProp) return ariaLabelProp\n      // We use the children prop as the aria-label if the text becomes hidden\n      // and no aria-label was provided to keep the button accessible.\n      if (isTextHidden && typeof children === 'string') return children\n      return undefined\n    }\n\n    const ButtonComponent = asChild ? Slot : 'button'\n\n    const buttonComponentCss: CSSObject = {\n      fontFamily: typography.font,\n      alignItems: 'center',\n      boxSizing: 'border-box',\n      cursor: 'pointer',\n      display: 'inline-flex',\n      flexShrink: 0,\n      justifyContent: 'center',\n      overflow: 'hidden',\n      position: 'relative',\n      textAlign: 'center',\n      userSelect: 'none',\n      whiteSpace: 'nowrap',\n      transition: `\n        transform ${motion.hover},\n        border-color ${motion.hover},\n        background-color ${motion.hover},\n        color ${motion.hover}\n      `,\n\n      ...(fullWidth && {\n        width: '100%',\n        flexShrink: 1\n      }),\n\n      ':focus': {\n        outline: 'none !important'\n      },\n      ':hover': {\n        transform: fullWidth ? 'scale(1.00)' : 'scale(1.04)'\n      },\n      ':active': {\n        transform: fullWidth ? 'scale(1.00)' : 'scale(0.98)'\n      },\n\n      ...((disabled || isLoading || _isHovered || _isPressed) && {\n        pointerEvents: 'none'\n      }),\n      ...(_isHovered && {\n        transform: fullWidth ? 'scale(1.00)' : 'scale(1.04)'\n      }),\n      ...(_isPressed && {\n        transform: fullWidth ? 'scale(1.00)' : 'scale(0.98)'\n      }),\n      minWidth: minWidth && !isTextHidden ? `${minWidth}px` : 'unset'\n    }\n\n    const iconCss = !isStaticIcon && {\n      '& path': {\n        fill: 'currentcolor'\n      }\n    }\n\n    return (\n      <ButtonComponent\n        css={[buttonComponentCss, styles?.button]}\n        disabled={disabled || isLoading}\n        ref={ref}\n        type={asChild ? undefined : 'button'}\n        aria-label={getAriaLabel()}\n        {...other}\n      >\n        {isLoading ? (\n          <LoadingSpinner css={styles?.icon} />\n        ) : LeftIconComponent ? (\n          <LeftIconComponent css={[iconCss, styles?.icon]} />\n        ) : null}\n        {!isTextHidden ? (\n          slotted ? (\n            children\n          ) : (\n            <Slottable>{children}</Slottable>\n          )\n        ) : null}\n        {RightIconComponent ? (\n          <RightIconComponent css={[iconCss, styles?.icon]} />\n        ) : null}\n      </ButtonComponent>\n    )\n  }\n)\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/components/button/BaseButton/types.d.ts

@@ -62,6 +62,7 @@ export type BaseButtonProps = {
      *  merging their props and behavior.
      */
     asChild?: boolean;
+    slotted?: boolean;
 } & HTMLButtonProps & InternalProps;
 export {};
 //# sourceMappingURL=types.d.ts.map

package/dist/components/button/BaseButton/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/button/BaseButton/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAA;AAErD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAE/C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAE/C,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,aAAa,CAAA;AAEhF,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAA;AAEtD,KAAK,gBAAgB,GAAG;IACtB,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,IAAI,CAAC,EAAE,SAAS,CAAA;CACjB,CAAA;AAED,MAAM,MAAM,eAAe,GAAG,wBAAwB,CAAC,QAAQ,CAAC,CAAA;AAEhE;;;KAGK;AACL,KAAK,aAAa,GAAG;IACnB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB,CAAA;AAED,MAAM,MAAM,eAAe,GAAG;IAC5B;;OAEG;IACH,QAAQ,CAAC,EAAE,aAAa,GAAG,IAAI,CAAA;IAE/B;;OAEG;IACH,SAAS,CAAC,EAAE,aAAa,GAAG,IAAI,CAAA;IAEhC;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IAEnB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;IAExB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IAEjB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IAEnB;;OAEG;IACH,MAAM,CAAC,EAAE,gBAAgB,CAAA;IAEzB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,GAAG,eAAe,GACjB,aAAa,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/button/BaseButton/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAA;AAErD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAE/C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAE/C,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,aAAa,CAAA;AAEhF,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAA;AAEtD,KAAK,gBAAgB,GAAG;IACtB,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,IAAI,CAAC,EAAE,SAAS,CAAA;CACjB,CAAA;AAED,MAAM,MAAM,eAAe,GAAG,wBAAwB,CAAC,QAAQ,CAAC,CAAA;AAEhE;;;KAGK;AACL,KAAK,aAAa,GAAG;IACnB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB,CAAA;AAED,MAAM,MAAM,eAAe,GAAG;IAC5B;;OAEG;IACH,QAAQ,CAAC,EAAE,aAAa,GAAG,IAAI,CAAA;IAE/B;;OAEG;IACH,SAAS,CAAC,EAAE,aAAa,GAAG,IAAI,CAAA;IAEhC;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IAEnB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;IAExB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IAEjB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IAEnB;;OAEG;IACH,MAAM,CAAC,EAAE,gBAAgB,CAAA;IAEzB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,GAAG,eAAe,GACjB,aAAa,CAAA"}

package/dist/components/button/FilterButton/FilterButton.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { FilterButtonProps } from './types';
-export declare const FilterButton: (props: FilterButtonProps & import("react").RefAttributes<HTMLButtonElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
+export declare const FilterButton: <Value extends string>(props: FilterButtonProps<Value> & import("react").RefAttributes<HTMLButtonElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
 //# sourceMappingURL=FilterButton.d.ts.map

package/dist/components/button/FilterButton/FilterButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FilterButton.d.ts","sourceRoot":"","sources":["../../../../src/components/button/FilterButton/FilterButton.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAE3C,eAAO,MAAM,YAAY,gLAkLxB,CAAA"}
+{"version":3,"file":"FilterButton.d.ts","sourceRoot":"","sources":["../../../../src/components/button/FilterButton/FilterButton.tsx"],"names":[],"mappings":";AAuBA,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAM3C,eAAO,MAAM,YAAY,6MA0RvB,CAAA"}

package/dist/components/button/FilterButton/FilterButton.js

@@ -1,28 +1,43 @@
 import { __assign } from '../../../_virtual/_tslib.js';
-import { jsxs } from '@emotion/react/jsx-runtime';
-import { forwardRef, useState, useCallback, useEffect, useRef } from 'react';
+import { jsx, jsxs } from '@emotion/react/jsx-runtime';
+import { forwardRef, useState, useRef, useCallback, useMemo, useEffect } from 'react';
 import { useTheme } from '@emotion/react';
+import { mergeRefs } from 'react-merge-refs';
 import { BaseButton } from '../BaseButton/BaseButton.js';
+import { TextInput } from '../../input/TextInput/TextInput.js';
+import { TextInputSize } from '../../input/TextInput/types.js';
+import { Menu, MenuContent } from '../../internal/Menu.js';
+import { Box } from '../../layout/Box/Box.js';
+import { Flex } from '../../layout/Flex/Flex.js';
+import '../../layout/Paper/Paper.js';
+import { Text } from '../../text/Text.js';
 import { useControlled } from '../../../hooks/useControlled.js';
-import { IconCloseAlt } from '../../../icons/utilityIcons.js';
+import { IconCloseAlt, IconCaretDown, IconSearch } from '../../../icons/utilityIcons.js';
 import '@emotion/css';
+import { VirtualizedOptionsList, OptionsList } from './FilterButtonOptionsList.js';
 
+var messages = {
+    noMatches: 'No matches'
+};
 var FilterButton = forwardRef(function FilterButton(props, ref) {
-    var valueProp = props.value, children = props.children, labelProp = props.label, onChange = props.onChange, onClick = props.onClick, onOpen = props.onOpen, onReset = props.onReset, disabled = props.disabled, _a = props.variant, variant = _a === void 0 ? 'fillContainer' : _a, _b = props.size, size = _b === void 0 ? 'default' : _b, iconRight = props.iconRight;
-    var _c = useTheme(), color = _c.color, cornerRadius = _c.cornerRadius, spacing = _c.spacing, typography = _c.typography;
-    var _d = useControlled({
+    var _a, _b;
+    var valueProp = props.value, children = props.children, label = props.label, onChange = props.onChange, onClick = props.onClick, onOpen = props.onOpen, onReset = props.onReset, disabled = props.disabled, _c = props.variant, variant = _c === void 0 ? 'fillContainer' : _c, _d = props.size, size = _d === void 0 ? 'default' : _d, iconRight = props.iconRight, leadingElementProp = props.leadingElement, menuProps = props.menuProps, options = props.options, showFilterInput = props.showFilterInput, filterInputProps = props.filterInputProps, optionsLabel = props.optionsLabel, _e = props.renderLabel, renderLabel = _e === void 0 ? function (label) { return label; } : _e, virtualized = props.virtualized;
+    var _f = useTheme(), color = _f.color, cornerRadius = _f.cornerRadius, spacing = _f.spacing, typography = _f.typography;
+    var _g = useControlled({
         controlledProp: valueProp,
         defaultValue: null,
         stateName: 'value',
         componentName: 'FilterButton'
-    }), value = _d[0], setValue = _d[1];
-    var _e = useControlled({
-        controlledProp: labelProp,
-        defaultValue: null,
-        stateName: 'label',
-        componentName: 'FilterButton'
-    }), label = _e[0], setLabel = _e[1];
-    var _f = useState(false), isOpen = _f[0], setIsOpen = _f[1];
+    }), value = _g[0], setValue = _g[1];
+    var _h = useState(false), isOpen = _h[0], setIsOpen = _h[1];
+    var _j = useState(''), filterInputValue = _j[0], setFilterInputValue = _j[1];
+    var selectedOption = options === null || options === void 0 ? void 0 : options.find(function (option) { return option.value === value; });
+    var selectedLabel = (_a = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) !== null && _a !== void 0 ? _a : selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value;
+    var leadingElement = leadingElementProp !== null && leadingElementProp !== void 0 ? leadingElementProp : selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.leadingElement;
+    var anchorRef = useRef(null);
+    var inputRef = useRef(null);
+    var optionRefs = useRef([]);
+    var scrollRef = useRef(null);
     // Size Styles
     var defaultStyles = {
         paddingLeft: spacing.m,
@@ -48,75 +63,84 @@ var FilterButton = forwardRef(function FilterButton(props, ref) {
         background: color.secondary.s400,
         border: "1px solid ".concat(color.secondary.s400),
         '&:hover': {
-            border: "1px solid ".concat(color.secondary.s400),
-            transform: 'none'
+            border: "1px solid ".concat(color.secondary.s400)
         }
     };
-    var activeStyle = variant !== 'fillContainer' || value === null
-        ? {
-            border: "1px solid ".concat(color.border.strong),
-            background: color.background.surface2
-        }
-        : {};
     var hoverStyle = {
-        border: "1px solid ".concat(color.neutral.n800),
+        background: color.background.surface1
+    };
+    var activeStyle = {
+        background: color.background.surface2
+    };
+    var disabledTransform = {
         transform: 'none'
     };
     // Button Styles
-    var buttonCss = __assign(__assign(__assign({ background: 'transparent', border: "1px solid ".concat(color.border.strong), borderRadius: cornerRadius.s, color: variant === 'fillContainer' && value !== null
+    var buttonCss = __assign(__assign(__assign({ background: color.background.white, border: "1px solid ".concat(color.border.strong), borderRadius: cornerRadius.s, color: variant === 'fillContainer' && value !== null
             ? color.static.white
-            : color.text.default, gap: spacing.xs, fontSize: typography.size.s, fontWeight: typography.weight.demiBold, lineHeight: typography.lineHeight.s, opacity: disabled ? 0.6 : 1, '&:hover': hoverStyle, '&:focus': hoverStyle, '&:active': __assign(__assign({}, activeStyle), { transform: 'none' }) }, (size === 'small' ? smallStyles : defaultStyles)), (isOpen ? activeStyle : {})), (variant === 'fillContainer' && value !== null
+            : color.text.default, gap: spacing.xs, fontSize: typography.size.s, fontWeight: typography.weight.demiBold, lineHeight: typography.lineHeight.s, opacity: disabled ? 0.6 : 1, '&:hover': __assign(__assign({}, disabledTransform), (value === null && !isOpen ? hoverStyle : {})), '&:focus': __assign(__assign({}, disabledTransform), (value === null ? activeStyle : {})), '&:active': __assign(__assign({}, disabledTransform), (value === null ? activeStyle : {})) }, (isOpen ? activeStyle : {})), (size === 'small' ? smallStyles : defaultStyles)), (variant === 'fillContainer' && value !== null
         ? fillContainerStyles
         : {}));
     var iconCss = size === 'small' ? smallIconStyles : defaultIconStyles;
-    var handleButtonClick = useCallback(function () {
+    var handleClick = useCallback(function () {
         if (onClick) {
             onClick();
         }
         else {
-            if (variant === 'fillContainer' && value !== null) {
-                setValue(null);
-                setLabel(null);
-                // @ts-ignore
-                onChange === null || onChange === void 0 ? void 0 : onChange(null);
-                onReset === null || onReset === void 0 ? void 0 : onReset();
-            }
-            else {
-                setIsOpen(function (isOpen) { return !isOpen; });
-            }
+            setIsOpen(function (isOpen) { return !isOpen; });
         }
-    }, [
-        value,
-        variant,
-        setIsOpen,
-        setValue,
-        setLabel,
-        onChange,
-        onClick,
-        onReset
-    ]);
+    }, [onClick]);
+    var hasOptions = options && options.length > 0;
+    var Icon = useMemo(function () {
+        return variant === 'fillContainer' && value !== null
+            ? (function (props) { return (jsx(IconCloseAlt, __assign({ "aria-label": 'cancel', onClick: function (e) {
+                    e.stopPropagation();
+                    if (onClick) {
+                        onClick();
+                    }
+                    else {
+                        // @ts-ignore
+                        onChange === null || onChange === void 0 ? void 0 : onChange(null);
+                        onReset === null || onReset === void 0 ? void 0 : onReset();
+                    }
+                } }, props))); })
+            : iconRight !== null && iconRight !== void 0 ? iconRight : (hasOptions ? IconCaretDown : null);
+    }, [variant, value, iconRight, hasOptions, onClick, onChange, onReset]);
     useEffect(function () {
         if (isOpen) {
+            // Focus the input after the popup is open
+            setTimeout(function () {
+                var _a;
+                (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true });
+            }, 0);
             onOpen === null || onOpen === void 0 ? void 0 : onOpen();
         }
     }, [isOpen, onOpen]);
-    var handleChange = useCallback(function (value, label) {
+    var handleChange = useCallback(function (value) {
         setValue(value);
-        setLabel(label);
         onChange === null || onChange === void 0 ? void 0 : onChange(value);
-    }, [onChange, setValue, setLabel]);
-    var anchorRef = useRef(null);
-    return (jsxs(BaseButton, __assign({ ref: ref || anchorRef, styles: {
-            button: buttonCss,
-            icon: iconCss
-        }, onClick: handleButtonClick, iconRight: variant === 'fillContainer' && value !== null
-            ? IconCloseAlt
-            : iconRight, disabled: disabled, "aria-haspopup": 'listbox', "aria-expanded": isOpen }, { children: [label, children === null || children === void 0 ? void 0 : children({
-                isOpen: isOpen,
-                setIsOpen: setIsOpen,
-                handleChange: handleChange,
-                anchorRef: anchorRef
-            })] })));
+    }, [onChange, setValue]);
+    var handleOptionSelected = useCallback(function (value) {
+        handleChange(value);
+        setIsOpen(false);
+    }, [handleChange]);
+    var filteredOptions = useMemo(function () {
+        return options === null || options === void 0 ? void 0 : options.filter(function (_a) {
+            var label = _a.label;
+            return !filterInputValue ||
+                (label === null || label === void 0 ? void 0 : label.toLowerCase().includes(filterInputValue.toLowerCase()));
+        });
+    }, [options, filterInputValue]);
+    var optionElements = filteredOptions ? (virtualized ? (jsx(VirtualizedOptionsList, { options: filteredOptions, optionRefs: optionRefs, onChange: handleOptionSelected, height: menuProps === null || menuProps === void 0 ? void 0 : menuProps.maxHeight, width: menuProps === null || menuProps === void 0 ? void 0 : menuProps.width })) : (jsx(OptionsList, { options: filteredOptions, isOpen: isOpen, optionRefs: optionRefs, scrollRef: scrollRef, onChange: handleOptionSelected }))) : null;
+    return (jsxs(BaseButton, __assign({ ref: mergeRefs([ref, anchorRef]), styles: { button: buttonCss, icon: iconCss }, onClick: handleClick, iconRight: Icon, disabled: disabled, "aria-haspopup": 'listbox', "aria-expanded": isOpen }, { children: [leadingElement, selectedLabel ? renderLabel(selectedLabel) : label, jsx(Menu, __assign({ anchorRef: anchorRef, isVisible: isOpen, onClose: function () { return setIsOpen(false); }, PaperProps: menuProps === null || menuProps === void 0 ? void 0 : menuProps.PaperProps }, { children: children ? (jsx(Flex, __assign({ onClick: function (e) { return e.stopPropagation(); } }, { children: children({
+                        onChange: handleChange,
+                        options: optionElements,
+                        setIsOpen: setIsOpen
+                    }) }))) : (jsxs(MenuContent, __assign({ maxHeight: menuProps === null || menuProps === void 0 ? void 0 : menuProps.maxHeight, width: menuProps === null || menuProps === void 0 ? void 0 : menuProps.width, scrollRef: scrollRef, MenuListProps: menuProps === null || menuProps === void 0 ? void 0 : menuProps.MenuListProps, "aria-label": (_b = selectedLabel !== null && selectedLabel !== void 0 ? selectedLabel : label) !== null && _b !== void 0 ? _b : props['aria-label'], "aria-activedescendant": selectedLabel }, { children: [showFilterInput && filterInputProps ? (jsx(TextInput, __assign({ ref: inputRef, size: TextInputSize.SMALL, startIcon: IconSearch, onClick: function (e) {
+                                e.stopPropagation();
+                            }, onChange: function (e) {
+                                setFilterInputValue(e.target.value);
+                            }, autoComplete: 'off' }, filterInputProps))) : null, optionsLabel ? (jsx(Box, __assign({ pt: 's', ph: 'm' }, { children: jsx(Text, __assign({ variant: 'label', size: 'xs' }, { children: optionsLabel })) }))) : null, filteredOptions && filteredOptions.length === 0 ? (jsx(Flex, __assign({ justifyContent: 'center' }, { children: jsx(Text, __assign({ variant: 'body', color: 'subdued', size: 's' }, { children: messages.noMatches })) }))) : (jsx(Flex, __assign({ direction: 'column', w: '100%' }, { children: optionElements })))] }))) }))] })));
 });
 
 export { FilterButton };

package/dist/components/button/FilterButton/FilterButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterButton.js","sources":["../../../../src/components/button/FilterButton/FilterButton.tsx"],"sourcesContent":["import { forwardRef, useRef, useState, useCallback, useEffect } from 'react'\n\nimport { CSSObject, useTheme } from '@emotion/react'\n\nimport { BaseButton } from 'components/button/BaseButton/BaseButton'\nimport { useControlled } from 'hooks/useControlled'\nimport { IconCloseAlt } from 'icons'\n\nimport { FilterButtonProps } from './types'\n\nexport const FilterButton = forwardRef<HTMLButtonElement, FilterButtonProps>(\n  function FilterButton(props, ref) {\n    const {\n      value: valueProp,\n      children,\n      label: labelProp,\n      onChange,\n      onClick,\n      onOpen,\n      onReset,\n      disabled,\n      variant = 'fillContainer',\n      size = 'default',\n      iconRight\n    } = props\n    const { color, cornerRadius, spacing, typography } = useTheme()\n    const [value, setValue] = useControlled({\n      controlledProp: valueProp,\n      defaultValue: null,\n      stateName: 'value',\n      componentName: 'FilterButton'\n    })\n\n    const [label, setLabel] = useControlled({\n      controlledProp: labelProp,\n      defaultValue: null,\n      stateName: 'label',\n      componentName: 'FilterButton'\n    })\n\n    const [isOpen, setIsOpen] = useState(false)\n\n    // Size Styles\n    const defaultStyles: CSSObject = {\n      paddingLeft: spacing.m,\n      paddingRight: spacing.m,\n      paddingTop: spacing.s,\n      paddingBottom: spacing.s\n    }\n    const defaultIconStyles: CSSObject = {\n      width: spacing.unit4,\n      height: spacing.unit4\n    }\n\n    const smallStyles: CSSObject = {\n      paddingLeft: spacing.m,\n      paddingRight: spacing.m,\n      paddingTop: spacing.xs,\n      paddingBottom: spacing.xs\n    }\n    const smallIconStyles: CSSObject = {\n      width: spacing.unit3,\n      height: spacing.unit3\n    }\n\n    const fillContainerStyles: CSSObject = {\n      background: color.secondary.s400,\n      border: `1px solid ${color.secondary.s400}`,\n      '&:hover': {\n        border: `1px solid ${color.secondary.s400}`,\n        transform: 'none'\n      }\n    }\n\n    const activeStyle =\n      variant !== 'fillContainer' || value === null\n        ? {\n            border: `1px solid ${color.border.strong}`,\n            background: color.background.surface2\n          }\n        : {}\n\n    const hoverStyle = {\n      border: `1px solid ${color.neutral.n800}`,\n      transform: 'none'\n    }\n\n    // Button Styles\n    const buttonCss: CSSObject = {\n      background: 'transparent',\n      border: `1px solid ${color.border.strong}`,\n      borderRadius: cornerRadius.s,\n      color:\n        variant === 'fillContainer' && value !== null\n          ? color.static.white\n          : color.text.default,\n      gap: spacing.xs,\n      fontSize: typography.size.s,\n      fontWeight: typography.weight.demiBold,\n      lineHeight: typography.lineHeight.s,\n      opacity: disabled ? 0.6 : 1,\n\n      '&:hover': hoverStyle,\n      '&:focus': hoverStyle,\n\n      '&:active': {\n        ...activeStyle,\n        transform: 'none'\n      },\n\n      ...(size === 'small' ? smallStyles : defaultStyles),\n      ...(isOpen ? activeStyle : {}),\n      ...(variant === 'fillContainer' && value !== null\n        ? fillContainerStyles\n        : {})\n    }\n\n    const iconCss = size === 'small' ? smallIconStyles : defaultIconStyles\n\n    const handleButtonClick = useCallback(() => {\n      if (onClick) {\n        onClick()\n      } else {\n        if (variant === 'fillContainer' && value !== null) {\n          setValue(null)\n          setLabel(null)\n          // @ts-ignore\n          onChange?.(null)\n          onReset?.()\n        } else {\n          setIsOpen((isOpen: boolean) => !isOpen)\n        }\n      }\n    }, [\n      value,\n      variant,\n      setIsOpen,\n      setValue,\n      setLabel,\n      onChange,\n      onClick,\n      onReset\n    ])\n\n    useEffect(() => {\n      if (isOpen) {\n        onOpen?.()\n      }\n    }, [isOpen, onOpen])\n\n    const handleChange = useCallback(\n      (value: string, label: string) => {\n        setValue(value)\n        setLabel(label)\n        onChange?.(value)\n      },\n      [onChange, setValue, setLabel]\n    )\n\n    const anchorRef = useRef<HTMLButtonElement>(null)\n\n    return (\n      <BaseButton\n        ref={ref || anchorRef}\n        styles={{\n          button: buttonCss,\n          icon: iconCss\n        }}\n        onClick={handleButtonClick}\n        iconRight={\n          variant === 'fillContainer' && value !== null\n            ? IconCloseAlt\n            : iconRight\n        }\n        disabled={disabled}\n        aria-haspopup='listbox'\n        aria-expanded={isOpen}\n      >\n        {label}\n        {children?.({\n          isOpen,\n          setIsOpen,\n          handleChange,\n          anchorRef\n        })}\n      </BaseButton>\n    )\n  }\n)\n"],"names":["_jsxs"],"mappings":";;;;;;;;;AAUa,IAAA,YAAY,GAAG,UAAU,CACpC,SAAS,YAAY,CAAC,KAAK,EAAE,GAAG,EAAA;AAE5B,IAAA,IAAO,SAAS,GAWd,KAAK,CAAA,KAXS,EAChB,QAAQ,GAUN,KAAK,CAVC,QAAA,EACD,SAAS,GASd,KAAK,CAAA,KATS,EAChB,QAAQ,GAQN,KAAK,CARC,QAAA,EACR,OAAO,GAOL,KAAK,CAAA,OAPA,EACP,MAAM,GAMJ,KAAK,OAND,EACN,OAAO,GAKL,KAAK,CALA,OAAA,EACP,QAAQ,GAIN,KAAK,CAAA,QAJC,EACR,EAAA,GAGE,KAAK,CAAA,OAHkB,EAAzB,OAAO,GAAG,EAAA,KAAA,KAAA,CAAA,GAAA,eAAe,GAAA,EAAA,EACzB,EAEE,GAAA,KAAK,CAFS,IAAA,EAAhB,IAAI,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,SAAS,GAAA,EAAA,EAChB,SAAS,GACP,KAAK,UADE,CACF;AACH,IAAA,IAAA,EAA+C,GAAA,QAAQ,EAAE,EAAvD,KAAK,GAAA,EAAA,CAAA,KAAA,EAAE,YAAY,GAAA,EAAA,CAAA,YAAA,EAAE,OAAO,GAAA,EAAA,CAAA,OAAA,EAAE,UAAU,gBAAe,CAAA;IACzD,IAAA,EAAA,GAAoB,aAAa,CAAC;AACtC,QAAA,cAAc,EAAE,SAAS;AACzB,QAAA,YAAY,EAAE,IAAI;AAClB,QAAA,SAAS,EAAE,OAAO;AAClB,QAAA,aAAa,EAAE,cAAc;AAC9B,KAAA,CAAC,EALK,KAAK,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,QAAQ,QAKpB,CAAA;IAEI,IAAA,EAAA,GAAoB,aAAa,CAAC;AACtC,QAAA,cAAc,EAAE,SAAS;AACzB,QAAA,YAAY,EAAE,IAAI;AAClB,QAAA,SAAS,EAAE,OAAO;AAClB,QAAA,aAAa,EAAE,cAAc;AAC9B,KAAA,CAAC,EALK,KAAK,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,QAAQ,QAKpB,CAAA;IAEI,IAAA,EAAA,GAAsB,QAAQ,CAAC,KAAK,CAAC,EAApC,MAAM,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,SAAS,GAAA,EAAA,CAAA,CAAA,CAAmB,CAAA;;AAG3C,IAAA,IAAM,aAAa,GAAc;QAC/B,WAAW,EAAE,OAAO,CAAC,CAAC;QACtB,YAAY,EAAE,OAAO,CAAC,CAAC;QACvB,UAAU,EAAE,OAAO,CAAC,CAAC;QACrB,aAAa,EAAE,OAAO,CAAC,CAAC;KACzB,CAAA;AACD,IAAA,IAAM,iBAAiB,GAAc;QACnC,KAAK,EAAE,OAAO,CAAC,KAAK;QACpB,MAAM,EAAE,OAAO,CAAC,KAAK;KACtB,CAAA;AAED,IAAA,IAAM,WAAW,GAAc;QAC7B,WAAW,EAAE,OAAO,CAAC,CAAC;QACtB,YAAY,EAAE,OAAO,CAAC,CAAC;QACvB,UAAU,EAAE,OAAO,CAAC,EAAE;QACtB,aAAa,EAAE,OAAO,CAAC,EAAE;KAC1B,CAAA;AACD,IAAA,IAAM,eAAe,GAAc;QACjC,KAAK,EAAE,OAAO,CAAC,KAAK;QACpB,MAAM,EAAE,OAAO,CAAC,KAAK;KACtB,CAAA;AAED,IAAA,IAAM,mBAAmB,GAAc;AACrC,QAAA,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,IAAI;AAChC,QAAA,MAAM,EAAE,YAAa,CAAA,MAAA,CAAA,KAAK,CAAC,SAAS,CAAC,IAAI,CAAE;AAC3C,QAAA,SAAS,EAAE;AACT,YAAA,MAAM,EAAE,YAAa,CAAA,MAAA,CAAA,KAAK,CAAC,SAAS,CAAC,IAAI,CAAE;AAC3C,YAAA,SAAS,EAAE,MAAM;AAClB,SAAA;KACF,CAAA;IAED,IAAM,WAAW,GACf,OAAO,KAAK,eAAe,IAAI,KAAK,KAAK,IAAI;AAC3C,UAAE;AACE,YAAA,MAAM,EAAE,YAAa,CAAA,MAAA,CAAA,KAAK,CAAC,MAAM,CAAC,MAAM,CAAE;AAC1C,YAAA,UAAU,EAAE,KAAK,CAAC,UAAU,CAAC,QAAQ;AACtC,SAAA;UACD,EAAE,CAAA;AAER,IAAA,IAAM,UAAU,GAAG;AACjB,QAAA,MAAM,EAAE,YAAa,CAAA,MAAA,CAAA,KAAK,CAAC,OAAO,CAAC,IAAI,CAAE;AACzC,QAAA,SAAS,EAAE,MAAM;KAClB,CAAA;;AAGD,IAAA,IAAM,SAAS,GAAA,QAAA,CAAA,QAAA,CAAA,QAAA,CAAA,EACb,UAAU,EAAE,aAAa,EACzB,MAAM,EAAE,YAAa,CAAA,MAAA,CAAA,KAAK,CAAC,MAAM,CAAC,MAAM,CAAE,EAC1C,YAAY,EAAE,YAAY,CAAC,CAAC,EAC5B,KAAK,EACH,OAAO,KAAK,eAAe,IAAI,KAAK,KAAK,IAAI;AAC3C,cAAE,KAAK,CAAC,MAAM,CAAC,KAAK;cAClB,KAAK,CAAC,IAAI,CAAC,OAAO,EACxB,GAAG,EAAE,OAAO,CAAC,EAAE,EACf,QAAQ,EAAE,UAAU,CAAC,IAAI,CAAC,CAAC,EAC3B,UAAU,EAAE,UAAU,CAAC,MAAM,CAAC,QAAQ,EACtC,UAAU,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC,EACnC,OAAO,EAAE,QAAQ,GAAG,GAAG,GAAG,CAAC,EAE3B,SAAS,EAAE,UAAU,EACrB,SAAS,EAAE,UAAU,EAErB,UAAU,wBACL,WAAW,CAAA,EAAA,EACd,SAAS,EAAE,MAAM,QAGf,IAAI,KAAK,OAAO,GAAG,WAAW,GAAG,aAAa,EAC/C,GAAC,MAAM,GAAG,WAAW,GAAG,EAAE,KACzB,OAAO,KAAK,eAAe,IAAI,KAAK,KAAK,IAAI;AAC/C,UAAE,mBAAmB;AACrB,UAAE,EAAE,EACP,CAAA;AAED,IAAA,IAAM,OAAO,GAAG,IAAI,KAAK,OAAO,GAAG,eAAe,GAAG,iBAAiB,CAAA;IAEtE,IAAM,iBAAiB,GAAG,WAAW,CAAC,YAAA;AACpC,QAAA,IAAI,OAAO,EAAE;AACX,YAAA,OAAO,EAAE,CAAA;AACV,SAAA;AAAM,aAAA;AACL,YAAA,IAAI,OAAO,KAAK,eAAe,IAAI,KAAK,KAAK,IAAI,EAAE;gBACjD,QAAQ,CAAC,IAAI,CAAC,CAAA;gBACd,QAAQ,CAAC,IAAI,CAAC,CAAA;;AAEd,gBAAA,QAAQ,aAAR,QAAQ,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAR,QAAQ,CAAG,IAAI,CAAC,CAAA;AAChB,gBAAA,OAAO,KAAP,IAAA,IAAA,OAAO,KAAP,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,OAAO,EAAI,CAAA;AACZ,aAAA;AAAM,iBAAA;gBACL,SAAS,CAAC,UAAC,MAAe,EAAK,EAAA,OAAA,CAAC,MAAM,CAAA,EAAA,CAAC,CAAA;AACxC,aAAA;AACF,SAAA;AACH,KAAC,EAAE;QACD,KAAK;QACL,OAAO;QACP,SAAS;QACT,QAAQ;QACR,QAAQ;QACR,QAAQ;QACR,OAAO;QACP,OAAO;AACR,KAAA,CAAC,CAAA;AAEF,IAAA,SAAS,CAAC,YAAA;AACR,QAAA,IAAI,MAAM,EAAE;AACV,YAAA,MAAM,KAAN,IAAA,IAAA,MAAM,KAAN,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,MAAM,EAAI,CAAA;AACX,SAAA;AACH,KAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAA;AAEpB,IAAA,IAAM,YAAY,GAAG,WAAW,CAC9B,UAAC,KAAa,EAAE,KAAa,EAAA;QAC3B,QAAQ,CAAC,KAAK,CAAC,CAAA;QACf,QAAQ,CAAC,KAAK,CAAC,CAAA;AACf,QAAA,QAAQ,aAAR,QAAQ,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAR,QAAQ,CAAG,KAAK,CAAC,CAAA;KAClB,EACD,CAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAC/B,CAAA;AAED,IAAA,IAAM,SAAS,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAA;IAEjD,QACEA,IAAC,CAAA,UAAU,EACT,QAAA,CAAA,EAAA,GAAG,EAAE,GAAG,IAAI,SAAS,EACrB,MAAM,EAAE;AACN,YAAA,MAAM,EAAE,SAAS;AACjB,YAAA,IAAI,EAAE,OAAO;AACd,SAAA,EACD,OAAO,EAAE,iBAAiB,EAC1B,SAAS,EACP,OAAO,KAAK,eAAe,IAAI,KAAK,KAAK,IAAI;AAC3C,cAAE,YAAY;AACd,cAAE,SAAS,EAEf,QAAQ,EAAE,QAAQ,mBACJ,SAAS,EAAA,eAAA,EACR,MAAM,EAAA,EAAA,EAAA,QAAA,EAAA,CAEpB,KAAK,EACL,QAAQ,aAAR,QAAQ,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAR,QAAQ,CAAG;AACV,gBAAA,MAAM,EAAA,MAAA;AACN,gBAAA,SAAS,EAAA,SAAA;AACT,gBAAA,YAAY,EAAA,YAAA;AACZ,gBAAA,SAAS,EAAA,SAAA;aACV,CAAC,CAAA,EAAA,CAAA,CACS,EACd;AACH,CAAC;;;;"}
+{"version":3,"file":"FilterButton.js","sources":["../../../../src/components/button/FilterButton/FilterButton.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useRef,\n  useState,\n  useCallback,\n  useEffect,\n  useMemo,\n  Ref\n} from 'react'\n\nimport { CSSObject, useTheme } from '@emotion/react'\nimport { mergeRefs } from 'react-merge-refs'\n\nimport { BaseButton } from 'components/button/BaseButton/BaseButton'\nimport { IconComponent, IconProps } from 'components/icon'\nimport { TextInput, TextInputSize } from 'components/input/TextInput'\nimport { Menu, MenuContent } from 'components/internal/Menu'\nimport { Flex, Box } from 'components/layout'\nimport { Text } from 'components/text/Text'\nimport { useControlled } from 'hooks/useControlled'\nimport { IconCaretDown, IconCloseAlt, IconSearch } from 'icons'\n\nimport { OptionsList, VirtualizedOptionsList } from './FilterButtonOptionsList'\nimport { FilterButtonProps } from './types'\n\nconst messages = {\n  noMatches: 'No matches'\n}\n\nexport const FilterButton = forwardRef(function FilterButton<\n  Value extends string\n>(props: FilterButtonProps<Value>, ref: Ref<HTMLButtonElement>) {\n  const {\n    value: valueProp,\n    children,\n    label,\n    onChange,\n    onClick,\n    onOpen,\n    onReset,\n    disabled,\n    variant = 'fillContainer',\n    size = 'default',\n    iconRight,\n    leadingElement: leadingElementProp,\n    menuProps,\n    options,\n    showFilterInput,\n    filterInputProps,\n    optionsLabel,\n    renderLabel = (label) => label,\n    virtualized\n  } = props\n  const { color, cornerRadius, spacing, typography } = useTheme()\n  const [value, setValue] = useControlled({\n    controlledProp: valueProp,\n    defaultValue: null,\n    stateName: 'value',\n    componentName: 'FilterButton'\n  })\n\n  const [isOpen, setIsOpen] = useState(false)\n  const [filterInputValue, setFilterInputValue] = useState('')\n  const selectedOption = options?.find((option) => option.value === value)\n  const selectedLabel = selectedOption?.label ?? selectedOption?.value\n  const leadingElement = leadingElementProp ?? selectedOption?.leadingElement\n  const anchorRef = useRef<HTMLButtonElement>(null)\n  const inputRef = useRef<HTMLInputElement>(null)\n  const optionRefs = useRef<HTMLButtonElement[]>([])\n  const scrollRef = useRef<HTMLDivElement>(null)\n\n  // Size Styles\n  const defaultStyles: CSSObject = {\n    paddingLeft: spacing.m,\n    paddingRight: spacing.m,\n    paddingTop: spacing.s,\n    paddingBottom: spacing.s\n  }\n  const defaultIconStyles: CSSObject = {\n    width: spacing.unit4,\n    height: spacing.unit4\n  }\n\n  const smallStyles: CSSObject = {\n    paddingLeft: spacing.m,\n    paddingRight: spacing.m,\n    paddingTop: spacing.xs,\n    paddingBottom: spacing.xs\n  }\n  const smallIconStyles: CSSObject = {\n    width: spacing.unit3,\n    height: spacing.unit3\n  }\n\n  const fillContainerStyles: CSSObject = {\n    background: color.secondary.s400,\n    border: `1px solid ${color.secondary.s400}`,\n    '&:hover': {\n      border: `1px solid ${color.secondary.s400}`\n    }\n  }\n\n  const hoverStyle = {\n    background: color.background.surface1\n  }\n\n  const activeStyle = {\n    background: color.background.surface2\n  }\n  const disabledTransform = {\n    transform: 'none'\n  }\n\n  // Button Styles\n  const buttonCss: CSSObject = {\n    background: color.background.white,\n    border: `1px solid ${color.border.strong}`,\n    borderRadius: cornerRadius.s,\n    color:\n      variant === 'fillContainer' && value !== null\n        ? color.static.white\n        : color.text.default,\n    gap: spacing.xs,\n    fontSize: typography.size.s,\n    fontWeight: typography.weight.demiBold,\n    lineHeight: typography.lineHeight.s,\n    opacity: disabled ? 0.6 : 1,\n\n    '&:hover': {\n      ...disabledTransform,\n      ...(value === null && !isOpen ? hoverStyle : {})\n    },\n    '&:focus': {\n      ...disabledTransform,\n      ...(value === null ? activeStyle : {})\n    },\n    '&:active': {\n      ...disabledTransform,\n      ...(value === null ? activeStyle : {})\n    },\n    ...(isOpen ? activeStyle : {}),\n\n    ...(size === 'small' ? smallStyles : defaultStyles),\n    ...(variant === 'fillContainer' && value !== null\n      ? fillContainerStyles\n      : {})\n  }\n\n  const iconCss = size === 'small' ? smallIconStyles : defaultIconStyles\n\n  const handleClick = useCallback(() => {\n    if (onClick) {\n      onClick()\n    } else {\n      setIsOpen((isOpen: boolean) => !isOpen)\n    }\n  }, [onClick])\n\n  const hasOptions = options && options.length > 0\n\n  const Icon = useMemo(() => {\n    return variant === 'fillContainer' && value !== null\n      ? (((props: IconProps) => (\n          <IconCloseAlt\n            aria-label='cancel'\n            onClick={(e) => {\n              e.stopPropagation()\n              if (onClick) {\n                onClick()\n              } else {\n                // @ts-ignore\n                onChange?.(null)\n                onReset?.()\n              }\n            }}\n            {...props}\n          />\n        )) as IconComponent)\n      : iconRight ?? (hasOptions ? IconCaretDown : null)\n  }, [variant, value, iconRight, hasOptions, onClick, onChange, onReset])\n\n  useEffect(() => {\n    if (isOpen) {\n      // Focus the input after the popup is open\n      setTimeout(() => {\n        inputRef.current?.focus({ preventScroll: true })\n      }, 0)\n      onOpen?.()\n    }\n  }, [isOpen, onOpen])\n\n  const handleChange = useCallback(\n    (value: Value) => {\n      setValue(value)\n      onChange?.(value)\n    },\n    [onChange, setValue]\n  )\n\n  const handleOptionSelected = useCallback(\n    (value: Value) => {\n      handleChange(value)\n      setIsOpen(false)\n    },\n    [handleChange]\n  )\n\n  const filteredOptions = useMemo(\n    () =>\n      options?.filter(\n        ({ label }) =>\n          !filterInputValue ||\n          label?.toLowerCase().includes(filterInputValue.toLowerCase())\n      ),\n    [options, filterInputValue]\n  )\n\n  const optionElements = filteredOptions ? (\n    virtualized ? (\n      <VirtualizedOptionsList\n        options={filteredOptions}\n        optionRefs={optionRefs}\n        onChange={handleOptionSelected}\n        height={menuProps?.maxHeight}\n        width={menuProps?.width}\n      />\n    ) : (\n      <OptionsList\n        options={filteredOptions}\n        isOpen={isOpen}\n        optionRefs={optionRefs}\n        scrollRef={scrollRef}\n        onChange={handleOptionSelected}\n      />\n    )\n  ) : null\n\n  return (\n    <BaseButton\n      ref={mergeRefs([ref, anchorRef])}\n      styles={{ button: buttonCss, icon: iconCss }}\n      onClick={handleClick}\n      iconRight={Icon}\n      disabled={disabled}\n      aria-haspopup='listbox'\n      aria-expanded={isOpen}\n    >\n      {leadingElement}\n      {selectedLabel ? renderLabel(selectedLabel) : label}\n\n      <Menu\n        anchorRef={anchorRef}\n        isVisible={isOpen}\n        onClose={() => setIsOpen(false)}\n        PaperProps={menuProps?.PaperProps}\n      >\n        {children ? (\n          <Flex onClick={(e) => e.stopPropagation()}>\n            {children({\n              onChange: handleChange,\n              options: optionElements,\n              setIsOpen\n            })}\n          </Flex>\n        ) : (\n          <MenuContent\n            maxHeight={menuProps?.maxHeight}\n            width={menuProps?.width}\n            scrollRef={scrollRef}\n            MenuListProps={menuProps?.MenuListProps}\n            aria-label={selectedLabel ?? label ?? props['aria-label']}\n            aria-activedescendant={selectedLabel}\n          >\n            {showFilterInput && filterInputProps ? (\n              <TextInput\n                ref={inputRef}\n                size={TextInputSize.SMALL}\n                startIcon={IconSearch}\n                onClick={(e) => {\n                  e.stopPropagation()\n                }}\n                onChange={(e) => {\n                  setFilterInputValue(e.target.value)\n                }}\n                autoComplete='off'\n                {...filterInputProps}\n              />\n            ) : null}\n            {optionsLabel ? (\n              <Box pt='s' ph='m'>\n                <Text variant='label' size='xs'>\n                  {optionsLabel}\n                </Text>\n              </Box>\n            ) : null}\n            {filteredOptions && filteredOptions.length === 0 ? (\n              <Flex justifyContent='center'>\n                <Text variant='body' color='subdued' size='s'>\n                  {messages.noMatches}\n                </Text>\n              </Flex>\n            ) : (\n              <Flex direction='column' w='100%'>\n                {optionElements}\n              </Flex>\n            )}\n          </MenuContent>\n        )}\n      </Menu>\n    </BaseButton>\n  )\n})\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/components/button/{OptionsFilterButton/OptionsFilterButton.stories.d.ts → FilterButton/FilterButton.stories.d.ts}

@@ -1,11 +1,12 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { OptionsFilterButton } from './OptionsFilterButton';
-declare const meta: Meta<typeof OptionsFilterButton>;
+import { FilterButton } from './FilterButton';
+declare const meta: Meta<typeof FilterButton>;
 export default meta;
-type Story = StoryObj<typeof OptionsFilterButton>;
+type Story = StoryObj<typeof FilterButton>;
 export declare const Primary: Story;
 export declare const FillContainer: Story;
 export declare const ReplaceLabel: Story;
 export declare const CustomIcon: Story;
 export declare const Accessibility: Story;
-//# sourceMappingURL=OptionsFilterButton.stories.d.ts.map
+export declare const Virtualized: Story;
+//# sourceMappingURL=FilterButton.stories.d.ts.map

package/dist/components/button/FilterButton/FilterButton.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterButton.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/button/FilterButton/FilterButton.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAMtD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAG7C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,YAAY,CA0BnC,CAAA;AAED,eAAe,IAAI,CAAA;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,YAAY,CAAC,CAAA;AAG1C,eAAO,MAAM,OAAO,EAAE,KAerB,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAe3B,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAgB1B,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAexB,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAqB3B,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAiBzB,CAAA"}

package/dist/components/button/FilterButton/FilterButtonKeyHandler.d.ts

@@ -0,0 +1,18 @@
+import { RefObject, ReactNode } from 'react';
+import { FilterButtonOptionType } from './types';
+type FilterButtonKeyHandlerProps<Value extends string> = {
+    children: (activeValue: Value | null) => ReactNode;
+    disabled?: boolean;
+    onChange: (value: Value) => void;
+    optionRefs: RefObject<HTMLButtonElement[]>;
+    options: FilterButtonOptionType<Value>[];
+    scrollRef: RefObject<HTMLDivElement>;
+};
+/**
+ * Handles key events for the popup inside the FilterButton component
+ *
+ * Calls the `children` function with the currently active value
+ */
+export declare const FilterButtonKeyHandler: <Value extends string>(props: FilterButtonKeyHandlerProps<Value>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=FilterButtonKeyHandler.d.ts.map

package/dist/components/button/FilterButton/FilterButtonKeyHandler.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterButtonKeyHandler.d.ts","sourceRoot":"","sources":["../../../../src/components/button/FilterButton/FilterButtonKeyHandler.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAY,SAAS,EAAa,MAAM,OAAO,CAAA;AAEjE,OAAO,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAA;AAEhD,KAAK,2BAA2B,CAAC,KAAK,SAAS,MAAM,IAAI;IACvD,QAAQ,EAAE,CAAC,WAAW,EAAE,KAAK,GAAG,IAAI,KAAK,SAAS,CAAA;IAClD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;IAChC,UAAU,EAAE,SAAS,CAAC,iBAAiB,EAAE,CAAC,CAAA;IAC1C,OAAO,EAAE,sBAAsB,CAAC,KAAK,CAAC,EAAE,CAAA;IACxC,SAAS,EAAE,SAAS,CAAC,cAAc,CAAC,CAAA;CACrC,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,uHAmFlC,CAAA"}

package/dist/components/button/FilterButton/FilterButtonOption.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { FilterButtonOptionType } from './types';
+type FilterButtonOptionProps<Value extends string> = {
+    activeValue?: Value | null;
+    isActive?: boolean;
+    option: FilterButtonOptionType<Value>;
+    onChange: (option: Value) => void;
+};
+export declare const FilterButtonOption: <Value extends string>(props: FilterButtonOptionProps<Value> & import("react").RefAttributes<HTMLButtonElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
+export {};
+//# sourceMappingURL=FilterButtonOption.d.ts.map

package/dist/components/button/FilterButton/FilterButtonOption.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterButtonOption.d.ts","sourceRoot":"","sources":["../../../../src/components/button/FilterButton/FilterButtonOption.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAA;AAEhD,KAAK,uBAAuB,CAAC,KAAK,SAAS,MAAM,IAAI;IACnD,WAAW,CAAC,EAAE,KAAK,GAAG,IAAI,CAAA;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,EAAE,sBAAsB,CAAC,KAAK,CAAC,CAAA;IACrC,QAAQ,EAAE,CAAC,MAAM,EAAE,KAAK,KAAK,IAAI,CAAA;CAClC,CAAA;AAED,eAAO,MAAM,kBAAkB,mNAmF7B,CAAA"}

package/dist/components/button/FilterButton/FilterButtonOption.js

@@ -0,0 +1,57 @@
+import { __assign } from '../../../_virtual/_tslib.js';
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import { forwardRef, useCallback } from 'react';
+import { Text } from '../../text/Text.js';
+import '../../../foundations/color/semantic.js';
+import '../../../foundations/color/color.js';
+import { useTheme } from '@emotion/react';
+import '../../../foundations/theme/theme.js';
+import { BaseButton } from '../BaseButton/BaseButton.js';
+
+var FilterButtonOption = forwardRef(function (props, ref) {
+    var _a, _b, _c;
+    var activeValue = props.activeValue, option = props.option, onChange = props.onChange, isActive = props.isActive;
+    var _d = useTheme(), color = _d.color, cornerRadius = _d.cornerRadius, spacing = _d.spacing, typography = _d.typography;
+    // Popup Styles
+    var optionIconCss = {
+        width: spacing.unit4,
+        height: spacing.unit4
+    };
+    var activeOptionCss = {
+        transform: 'none',
+        backgroundColor: color.secondary.s300,
+        color: color.static.white
+    };
+    var optionCss = {
+        background: 'transparent',
+        border: 'none',
+        color: color.text.default,
+        fontWeight: typography.weight.medium,
+        gap: spacing.s,
+        paddingLeft: spacing.m,
+        paddingRight: spacing.m,
+        paddingTop: spacing.s,
+        paddingBottom: spacing.s,
+        width: '100%',
+        borderRadius: cornerRadius.s,
+        justifyContent: 'flex-start',
+        '&:hover': activeOptionCss,
+        '&:hover .helperText': {
+            color: color.static.white
+        },
+        '&:active': {
+            transform: 'none'
+        }
+    };
+    var handleChange = useCallback(function (e) {
+        e.stopPropagation();
+        onChange(option.value);
+    }, [option.value, onChange]);
+    return (jsxs(BaseButton, __assign({ ref: ref, iconLeft: option.icon, styles: {
+            button: __assign(__assign({}, optionCss), (option.value === activeValue || isActive ? activeOptionCss : {})),
+            icon: optionIconCss
+        }, "aria-label": (_a = option.label) !== null && _a !== void 0 ? _a : option.value, role: 'option', onClick: handleChange }, { children: [(_b = option.leadingElement) !== null && _b !== void 0 ? _b : null, jsx(Text, __assign({ variant: 'body', strength: 'strong' }, { children: (_c = option.label) !== null && _c !== void 0 ? _c : option.value })), option.helperText ? (jsx(Text, __assign({ variant: 'body', strength: 'strong', color: option.value === activeValue ? 'staticWhite' : 'subdued', className: 'helperText' }, { children: option.helperText }))) : null] }), option.value));
+});
+
+export { FilterButtonOption };
+//# sourceMappingURL=FilterButtonOption.js.map