@razorpay/blade 12.46.1 → 12.46.2

package/build/lib/native/components/QuickFilters/QuickFilter.js

@@ -419,7 +419,7 @@ import { Card, CardBody } from '../Card/Card.js';
 import '../Card/CardHeader.js';
 import '../Card/CardFooter.js';
 
-var _excluded=["value","title","trailing","selectionType","isSelected"],_excluded2=["title","value","trailing","testID"];var QuickFilterContent=function QuickFilterContent(_ref){var value=_ref.value,title=_ref.title,trailing=_ref.trailing,_ref$selectionType=_ref.selectionType,selectionType=_ref$selectionType===void 0?'single':_ref$selectionType,_ref$isSelected=_ref.isSelected,isSelected=_ref$isSelected===void 0?false:_ref$isSelected,rest=_objectWithoutProperties(_ref,_excluded);return jsxs(BaseBox,{display:"flex",flexDirection:"row",gap:"spacing.3",width:"fit-content",justifyContent:"center",alignItems:"center",paddingY:"spacing.3",paddingLeft:"spacing.3",paddingRight:"spacing.4",children:[jsxs(Box,{display:"flex",flexDirection:"row",gap:"spacing.2",justifyContent:"center",alignItems:"center",children:[selectionType==='single'?jsx(Radio,Object.assign({value:value},makeAnalyticsAttribute(rest))):jsx(Checkbox,Object.assign({value:value},makeAnalyticsAttribute(rest))),jsx(Text,{variant:"body",size:"medium",color:isSelected?'interactive.text.primary.subtle':'interactive.text.gray.subtle',weight:"medium",children:title})]}),trailing]});};var QuickFilter=forwardRef(function(_ref2,ref){var title=_ref2.title,value=_ref2.value,trailing=_ref2.trailing,testID=_ref2.testID,rest=_objectWithoutProperties(_ref2,_excluded2);var _useQuickFilterGroupC=useQuickFilterGroupContext(),selectedQuickFilters=_useQuickFilterGroupC.selectedQuickFilters,selectionType=_useQuickFilterGroupC.selectionType;var isQuickFilterSelected=selectedQuickFilters.includes(value);return jsx(Card,Object.assign({padding:"spacing.0",as:"label",accessibilityLabel:title,borderRadius:"medium",elevation:"none",isSelected:isQuickFilterSelected,ref:ref},makeAnalyticsAttribute(rest),metaAttribute({testID:testID}),{children:jsx(CardBody,{children:jsx(QuickFilterContent,Object.assign({value:value,title:title,trailing:trailing,selectionType:selectionType,isSelected:isQuickFilterSelected},rest))})}));});
+var _excluded=["value","title","trailing","selectionType","isSelected"],_excluded2=["title","value","trailing","testID"];var QuickFilterContent=function QuickFilterContent(_ref){var value=_ref.value,title=_ref.title,trailing=_ref.trailing,_ref$selectionType=_ref.selectionType,selectionType=_ref$selectionType===void 0?'single':_ref$selectionType,_ref$isSelected=_ref.isSelected,isSelected=_ref$isSelected===void 0?false:_ref$isSelected,rest=_objectWithoutProperties(_ref,_excluded);return jsxs(BaseBox,{display:"flex",flexDirection:"row",gap:"spacing.3",width:"fit-content",justifyContent:"center",alignItems:"center",paddingY:"spacing.3",paddingLeft:"spacing.3",paddingRight:"spacing.4",children:[jsxs(Box,{display:"flex",flexDirection:"row",gap:"spacing.2",justifyContent:"center",alignItems:"center",children:[selectionType==='single'?jsx(Radio,Object.assign({value:value},makeAnalyticsAttribute(rest))):jsx(Checkbox,Object.assign({value:value},makeAnalyticsAttribute(rest))),jsx(Text,{variant:"body",size:"medium",color:isSelected?'interactive.text.primary.subtle':'interactive.text.gray.subtle',weight:"medium",children:title})]}),trailing]});};var QuickFilter=forwardRef(function(_ref2,ref){var title=_ref2.title,value=_ref2.value,trailing=_ref2.trailing,testID=_ref2.testID,rest=_objectWithoutProperties(_ref2,_excluded2);var _useQuickFilterGroupC=useQuickFilterGroupContext(),selectedQuickFilters=_useQuickFilterGroupC.selectedQuickFilters,selectionType=_useQuickFilterGroupC.selectionType;var isQuickFilterSelected=selectedQuickFilters.includes(value);return jsx(Card,Object.assign({padding:"spacing.0",as:"label",accessibilityLabel:title,borderRadius:"medium",elevation:"none",isSelected:isQuickFilterSelected,ref:ref,marginRight:"spacing.1"},makeAnalyticsAttribute(rest),metaAttribute({testID:testID}),{children:jsx(CardBody,{children:jsx(QuickFilterContent,Object.assign({value:value,title:title,trailing:trailing,selectionType:selectionType,isSelected:isQuickFilterSelected},rest))})}));});
 
 export { QuickFilter };
 //# sourceMappingURL=QuickFilter.js.map

package/build/lib/native/components/QuickFilters/QuickFilter.js.map

@@ -1 +1 @@
-{"version":3,"file":"QuickFilter.js","sources":["../../../../../src/components/QuickFilters/QuickFilter.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport type { QuickFilterProps, QuickFilterContentProps } from './types';\nimport { useQuickFilterGroupContext } from './QuickFilterGroup';\nimport { Card, CardBody } from '~components/Card';\nimport { Box } from '~components/Box';\nimport { Text } from '~components/Typography';\nimport { Radio } from '~components/Radio';\nimport { Checkbox } from '~components/Checkbox';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\nimport { metaAttribute } from '~utils/metaAttribute';\nimport BaseBox from '~components/Box/BaseBox';\nimport type { BladeElementRef } from '~utils/types';\n\nconst QuickFilterContent = ({\n  value,\n  title,\n  trailing,\n  selectionType = 'single',\n  isSelected = false,\n  ...rest\n}: QuickFilterContentProps): React.ReactElement => {\n  return (\n    <BaseBox\n      display=\"flex\"\n      flexDirection=\"row\"\n      gap=\"spacing.3\"\n      width=\"fit-content\"\n      justifyContent=\"center\"\n      alignItems=\"center\"\n      paddingY=\"spacing.3\"\n      paddingLeft=\"spacing.3\"\n      paddingRight=\"spacing.4\"\n    >\n      <Box\n        display=\"flex\"\n        flexDirection=\"row\"\n        gap=\"spacing.2\"\n        justifyContent=\"center\"\n        alignItems=\"center\"\n      >\n        {selectionType === 'single' ? (\n          <Radio value={value} {...makeAnalyticsAttribute(rest)} />\n        ) : (\n          <Checkbox value={value} {...makeAnalyticsAttribute(rest)} />\n        )}\n        <Text\n          variant=\"body\"\n          size=\"medium\"\n          color={isSelected ? 'interactive.text.primary.subtle' : 'interactive.text.gray.subtle'}\n          weight=\"medium\"\n        >\n          {title}\n        </Text>\n      </Box>\n\n      {trailing}\n    </BaseBox>\n  );\n};\n\nconst QuickFilter = forwardRef<BladeElementRef, QuickFilterProps>(\n  ({ title, value, trailing, testID, ...rest }, ref): React.ReactElement => {\n    const { selectedQuickFilters, selectionType } = useQuickFilterGroupContext();\n\n    const isQuickFilterSelected = selectedQuickFilters.includes(value);\n    return (\n      <Card\n        padding=\"spacing.0\"\n        as=\"label\"\n        accessibilityLabel={title}\n        borderRadius=\"medium\"\n        elevation=\"none\"\n        isSelected={isQuickFilterSelected}\n        ref={ref}\n        {...makeAnalyticsAttribute(rest)}\n        {...metaAttribute({ testID })}\n      >\n        <CardBody>\n          <QuickFilterContent\n            value={value}\n            title={title}\n            trailing={trailing}\n            selectionType={selectionType}\n            isSelected={isQuickFilterSelected}\n            {...rest}\n          />\n        </CardBody>\n      </Card>\n    );\n  },\n);\nexport { QuickFilter };\n"],"names":["QuickFilterContent","_ref","value","title","trailing","_ref$selectionType","selectionType","_ref$isSelected","isSelected","rest","_objectWithoutProperties","_excluded","_jsxs","BaseBox","display","flexDirection","gap","width","justifyContent","alignItems","paddingY","paddingLeft","paddingRight","children","Box","_jsx","Radio","Object","assign","makeAnalyticsAttribute","Checkbox","Text","variant","size","color","weight","QuickFilter","forwardRef","_ref2","ref","testID","_excluded2","_useQuickFilterGroupC","useQuickFilterGroupContext","selectedQuickFilters","isQuickFilterSelected","includes","Card","padding","as","accessibilityLabel","borderRadius","elevation","metaAttribute","CardBody"],"mappings":"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"}
+{"version":3,"file":"QuickFilter.js","sources":["../../../../../src/components/QuickFilters/QuickFilter.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport type { QuickFilterProps, QuickFilterContentProps } from './types';\nimport { useQuickFilterGroupContext } from './QuickFilterGroup';\nimport { Card, CardBody } from '~components/Card';\nimport { Box } from '~components/Box';\nimport { Text } from '~components/Typography';\nimport { Radio } from '~components/Radio';\nimport { Checkbox } from '~components/Checkbox';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\nimport { metaAttribute } from '~utils/metaAttribute';\nimport BaseBox from '~components/Box/BaseBox';\nimport type { BladeElementRef } from '~utils/types';\n\nconst QuickFilterContent = ({\n  value,\n  title,\n  trailing,\n  selectionType = 'single',\n  isSelected = false,\n  ...rest\n}: QuickFilterContentProps): React.ReactElement => {\n  return (\n    <BaseBox\n      display=\"flex\"\n      flexDirection=\"row\"\n      gap=\"spacing.3\"\n      width=\"fit-content\"\n      justifyContent=\"center\"\n      alignItems=\"center\"\n      paddingY=\"spacing.3\"\n      paddingLeft=\"spacing.3\"\n      paddingRight=\"spacing.4\"\n    >\n      <Box\n        display=\"flex\"\n        flexDirection=\"row\"\n        gap=\"spacing.2\"\n        justifyContent=\"center\"\n        alignItems=\"center\"\n      >\n        {selectionType === 'single' ? (\n          <Radio value={value} {...makeAnalyticsAttribute(rest)} />\n        ) : (\n          <Checkbox value={value} {...makeAnalyticsAttribute(rest)} />\n        )}\n        <Text\n          variant=\"body\"\n          size=\"medium\"\n          color={isSelected ? 'interactive.text.primary.subtle' : 'interactive.text.gray.subtle'}\n          weight=\"medium\"\n        >\n          {title}\n        </Text>\n      </Box>\n\n      {trailing}\n    </BaseBox>\n  );\n};\n\nconst QuickFilter = forwardRef<BladeElementRef, QuickFilterProps>(\n  ({ title, value, trailing, testID, ...rest }, ref): React.ReactElement => {\n    const { selectedQuickFilters, selectionType } = useQuickFilterGroupContext();\n\n    const isQuickFilterSelected = selectedQuickFilters.includes(value);\n    return (\n      <Card\n        padding=\"spacing.0\"\n        as=\"label\"\n        accessibilityLabel={title}\n        borderRadius=\"medium\"\n        elevation=\"none\"\n        isSelected={isQuickFilterSelected}\n        ref={ref}\n        // Add margin to accommodate the box shadow that appears when selected, preventing visual cutoff\n        marginRight=\"spacing.1\"\n        {...makeAnalyticsAttribute(rest)}\n        {...metaAttribute({ testID })}\n      >\n        <CardBody>\n          <QuickFilterContent\n            value={value}\n            title={title}\n            trailing={trailing}\n            selectionType={selectionType}\n            isSelected={isQuickFilterSelected}\n            {...rest}\n          />\n        </CardBody>\n      </Card>\n    );\n  },\n);\nexport { QuickFilter };\n"],"names":["QuickFilterContent","_ref","value","title","trailing","_ref$selectionType","selectionType","_ref$isSelected","isSelected","rest","_objectWithoutProperties","_excluded","_jsxs","BaseBox","display","flexDirection","gap","width","justifyContent","alignItems","paddingY","paddingLeft","paddingRight","children","Box","_jsx","Radio","Object","assign","makeAnalyticsAttribute","Checkbox","Text","variant","size","color","weight","QuickFilter","forwardRef","_ref2","ref","testID","_excluded2","_useQuickFilterGroupC","useQuickFilterGroupContext","selectedQuickFilters","isQuickFilterSelected","includes","Card","padding","as","accessibilityLabel","borderRadius","elevation","marginRight","metaAttribute","CardBody"],"mappings":"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"}

package/build/lib/native/components/VisuallyHidden/ScreenReaderStyles.js

@@ -1,4 +1,4 @@
-var screenReaderStyles={border:0,clip:'rect(0 0 0 0)',clipPath:'inset(50%)',height:`1px`,margin:'0 -1px -1px 0',overflow:'hidden',padding:0,position:'absolute',width:`1px`,left:'-10000px',whiteSpace:'nowrap',wordWrap:'normal'};
+var screenReaderStyles={border:'0',clip:'rect(0, 0, 0, 0)',height:'1px',width:'1px',margin:'-1px',padding:'0',overflow:'hidden',whiteSpace:'nowrap',position:'absolute',wordWrap:'normal'};
 
 export { screenReaderStyles };
 //# sourceMappingURL=ScreenReaderStyles.js.map

package/build/lib/native/components/VisuallyHidden/ScreenReaderStyles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScreenReaderStyles.js","sources":["../../../../../src/components/VisuallyHidden/ScreenReaderStyles.ts"],"sourcesContent":["import type { CSSObject } from 'styled-components';\n\n/**\n * Screen reader class adapted from webaim\n * https://webaim.org/techniques/css/invisiblecontent/#techniques\n */\nconst screenReaderStyles: CSSObject = {\n  border: 0,\n  clip: 'rect(0 0 0 0)',\n  clipPath: 'inset(50%)',\n  height: `1px`,\n  margin: '0 -1px -1px 0',\n  overflow: 'hidden',\n  padding: 0,\n  position: 'absolute',\n  width: `1px`,\n  left: '-10000px',\n  whiteSpace: 'nowrap',\n  wordWrap: 'normal',\n};\n\nexport { screenReaderStyles };\n"],"names":["screenReaderStyles","border","clip","clipPath","height","margin","overflow","padding","position","width","left","whiteSpace","wordWrap"],"mappings":"AAMM,IAAAA,kBAA6B,CAAG,CACpCC,MAAM,CAAE,CAAC,CACTC,IAAI,CAAE,eAAe,CACrBC,QAAQ,CAAE,YAAY,CACtBC,MAAM,CAAG,CAAA,GAAA,CAAI,CACbC,MAAM,CAAE,eAAe,CACvBC,QAAQ,CAAE,QAAQ,CAClBC,OAAO,CAAE,CAAC,CACVC,QAAQ,CAAE,UAAU,CACpBC,KAAK,CAAG,CAAA,GAAA,CAAI,CACZC,IAAI,CAAE,UAAU,CAChBC,UAAU,CAAE,QAAQ,CACpBC,QAAQ,CAAE,QACZ;;;;"}
+{"version":3,"file":"ScreenReaderStyles.js","sources":["../../../../../src/components/VisuallyHidden/ScreenReaderStyles.ts"],"sourcesContent":["import type { CSSObject } from 'styled-components';\n\n/**\n * Screen reader class adapted from webaim\n * https://webaim.org/techniques/css/invisiblecontent/#techniques\n */\nconst screenReaderStyles: CSSObject = {\n  border: '0',\n  clip: 'rect(0, 0, 0, 0)',\n  height: '1px',\n  width: '1px',\n  margin: '-1px',\n  padding: '0',\n  overflow: 'hidden',\n  whiteSpace: 'nowrap',\n  position: 'absolute',\n  wordWrap: 'normal',\n};\n\nexport { screenReaderStyles };\n"],"names":["screenReaderStyles","border","clip","height","width","margin","padding","overflow","whiteSpace","position","wordWrap"],"mappings":"AAMM,IAAAA,kBAA6B,CAAG,CACpCC,MAAM,CAAE,GAAG,CACXC,IAAI,CAAE,kBAAkB,CACxBC,MAAM,CAAE,KAAK,CACbC,KAAK,CAAE,KAAK,CACZC,MAAM,CAAE,MAAM,CACdC,OAAO,CAAE,GAAG,CACZC,QAAQ,CAAE,QAAQ,CAClBC,UAAU,CAAE,QAAQ,CACpBC,QAAQ,CAAE,UAAU,CACpBC,QAAQ,CAAE,QACZ;;;;"}

package/build/lib/web/development/components/ListView/ListViewFilters.web.js

@@ -20,7 +20,6 @@ import { msToSeconds } from '../../utils/msToSeconds.js';
 import '../BladeProvider/index.js';
 import { cssBezierToArray } from '../../utils/cssBezierToArray.js';
 import '../../utils/index.js';
-import '../Divider/index.js';
 import '../../utils/isValidAllowedChildren/index.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
@@ -31,7 +30,6 @@ import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.web.js';
 import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
 import { makeAnalyticsAttribute } from '../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
 import { Box } from '../Box/Box.js';
-import { Divider } from '../Divider/Divider.js';
 import Button from '../Button/Button/Button.js';
 import FilterIcon from '../Icons/FilterIcon/FilterIcon.js';
 import { Counter } from '../Counter/Counter.js';
@@ -40,8 +38,11 @@ import { castWebType } from '../../utils/platform/castUtils.js';
 var _excluded = ["testID", "children", "quickFilters", "onSearchChange", "searchValue", "searchValuePlaceholder", "searchName", "showQuickFilters", "onShowQuickFiltersChange", "showFilters", "onShowFiltersChange", "onSearchClear", "selectedFiltersCount", "searchTrailing"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var gradientOverlyContainerWidth = '21px'; // 20px + 1px divider width
-var gradientOverlyContainerHeight = '38px';
+var CHILDREN_COUNTER_WIDTH = 36;
+var GAP_BETWEEN_CHILDREN_AND_SEARCH = 12;
+var SPACE_BETWEEN_QUICK_FILTERS_AND_CHILDREN = 8;
+var CHILDREN_TOTAL_WIDTH = CHILDREN_COUNTER_WIDTH + SPACE_BETWEEN_QUICK_FILTERS_AND_CHILDREN;
+var CHILDREN_WITH_SEARCH_WIDTH = CHILDREN_COUNTER_WIDTH + GAP_BETWEEN_CHILDREN_AND_SEARCH + SPACE_BETWEEN_QUICK_FILTERS_AND_CHILDREN;
 var StyledQuickFilterContainer = /*#__PURE__*/styled(BaseBox).withConfig({
   displayName: "ListViewFiltersweb__StyledQuickFilterContainer",
   componentId: "igy2td-0"
@@ -55,40 +56,23 @@ var StyledQuickFilterContainer = /*#__PURE__*/styled(BaseBox).withConfig({
   /* For Edge */
   msOverflowStyle: 'none'
 });
-var GradientOverlay = /*#__PURE__*/styled.div.withConfig({
-  displayName: "ListViewFiltersweb__GradientOverlay",
-  componentId: "igy2td-1"
-})(["height:100%;width:20px;background:linear-gradient( 270deg,", " 0%,", " 100% );pointer-events:none;&::after{content:'';position:absolute;right:0;top:0;height:100%;width:1px;background-color:", ";}"], function (_ref) {
-  var gradientColorRight = _ref.gradientColorRight;
-  return gradientColorRight;
-}, function (_ref2) {
-  var gradientColorLeft = _ref2.gradientColorLeft;
-  return gradientColorLeft;
-}, function (_ref3) {
-  var dividerColor = _ref3.dividerColor;
-  return dividerColor;
-});
-var ListViewFilters = function ListViewFilters(_ref4) {
-  var testID = _ref4.testID,
-    children = _ref4.children,
-    quickFilters = _ref4.quickFilters,
-    onSearchChange = _ref4.onSearchChange,
-    searchValue = _ref4.searchValue,
-    searchValuePlaceholder = _ref4.searchValuePlaceholder,
-    searchName = _ref4.searchName,
-    showQuickFilters = _ref4.showQuickFilters,
-    onShowQuickFiltersChange = _ref4.onShowQuickFiltersChange,
-    showFiltersProp = _ref4.showFilters,
-    onShowFiltersChange = _ref4.onShowFiltersChange,
-    onSearchClear = _ref4.onSearchClear,
-    _ref4$selectedFilters = _ref4.selectedFiltersCount,
-    selectedFiltersCount = _ref4$selectedFilters === void 0 ? 0 : _ref4$selectedFilters,
-    searchTrailing = _ref4.searchTrailing,
-    rest = _objectWithoutProperties(_ref4, _excluded);
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    shouldShowDecorationInQuickFilters = _useState2[0],
-    setShouldShowDecorationInQuickFilters = _useState2[1];
+var ListViewFilters = function ListViewFilters(_ref) {
+  var testID = _ref.testID,
+    children = _ref.children,
+    quickFilters = _ref.quickFilters,
+    onSearchChange = _ref.onSearchChange,
+    searchValue = _ref.searchValue,
+    searchValuePlaceholder = _ref.searchValuePlaceholder,
+    searchName = _ref.searchName,
+    showQuickFilters = _ref.showQuickFilters,
+    onShowQuickFiltersChange = _ref.onShowQuickFiltersChange,
+    showFiltersProp = _ref.showFilters,
+    onShowFiltersChange = _ref.onShowFiltersChange,
+    onSearchClear = _ref.onSearchClear,
+    _ref$selectedFiltersC = _ref.selectedFiltersCount,
+    selectedFiltersCount = _ref$selectedFiltersC === void 0 ? 0 : _ref$selectedFiltersC,
+    searchTrailing = _ref.searchTrailing,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var _useControllableState = useControllableState({
       defaultValue: showQuickFilters !== null && showQuickFilters !== void 0 ? showQuickFilters : showFiltersProp,
       value: showQuickFilters !== null && showQuickFilters !== void 0 ? showQuickFilters : showFiltersProp,
@@ -97,26 +81,34 @@ var ListViewFilters = function ListViewFilters(_ref4) {
     _useControllableState2 = _slicedToArray(_useControllableState, 2),
     showFilters = _useControllableState2[0],
     setShowFilters = _useControllableState2[1];
-  var _useState3 = useState({}),
-    _useState4 = _slicedToArray(_useState3, 2),
-    listViewSelectedFilters = _useState4[0],
-    setListViewSelectedFilters = _useState4[1];
+  var _useState = useState({}),
+    _useState2 = _slicedToArray(_useState, 2),
+    listViewSelectedFilters = _useState2[0],
+    setListViewSelectedFilters = _useState2[1];
   var searchId = useId('search-input');
   var searchNameValue = searchName || searchId;
   var isMobile = useIsMobile();
   var _useTheme = useTheme(),
     theme = _useTheme.theme;
   var showSearchInput = onSearchChange || onSearchClear || searchValuePlaceholder || searchName;
+  var isSearchTrailingDropDown = /*#__PURE__*/React__default.isValidElement(searchTrailing) && getComponentId(searchTrailing) === 'Dropdown';
   var getFilterContainerWidth = function getFilterContainerWidth() {
-    if (isMobile && Boolean(children)) {
-      return '88%';
+    var hasChildren = Boolean(children);
+    if (isMobile) {
+      return hasChildren ? '88%' : '100%';
+    }
+    var searchInputWidth = isSearchTrailingDropDown ? '280px' : '208px';
+    if (showSearchInput && hasChildren) {
+      return "calc(100% - ".concat(searchInputWidth, " - ").concat(CHILDREN_WITH_SEARCH_WIDTH, "px)");
     }
-    if (isMobile && !Boolean(children)) {
-      return '100%';
+    if (hasChildren) {
+      return "calc(100% - ".concat(CHILDREN_TOTAL_WIDTH, "px)");
     }
-    return 'auto';
+    if (showSearchInput) {
+      return "calc(100% - ".concat(searchInputWidth, " - ").concat(SPACE_BETWEEN_QUICK_FILTERS_AND_CHILDREN, "px)");
+    }
+    return '100%';
   };
-  var isSearchTrailingDropDown = /*#__PURE__*/React__default.isValidElement(searchTrailing) && getComponentId(searchTrailing) === 'Dropdown';
   return /*#__PURE__*/jsxs(ListViewFiltersProvider, {
     value: {
       listViewSelectedFilters: listViewSelectedFilters,
@@ -128,9 +120,9 @@ var ListViewFilters = function ListViewFilters(_ref4) {
       value: searchValue,
       placeholder: searchValuePlaceholder,
       name: searchNameValue || searchId,
-      onChange: function onChange(_ref5) {
-        var name = _ref5.name,
-          value = _ref5.value;
+      onChange: function onChange(_ref2) {
+        var name = _ref2.name,
+          value = _ref2.value;
         return onSearchChange === null || onSearchChange === void 0 ? void 0 : onSearchChange({
           name: name,
           value: value
@@ -145,37 +137,19 @@ var ListViewFilters = function ListViewFilters(_ref4) {
       })), makeAnalyticsAttribute(rest)), {}, {
         display: "flex",
         justifyContent: "space-between",
-        children: [/*#__PURE__*/jsxs(Box, {
+        children: [/*#__PURE__*/jsx(Box, {
           position: "relative",
           display: "flex",
           flexDirection: "column",
           width: getFilterContainerWidth(),
-          marginRight: isMobile ? 'spacing.2' : 'spacing.0',
-          children: [/*#__PURE__*/jsx(StyledQuickFilterContainer, {
-            overflow: isMobile ? 'scroll' : 'visible',
-            width: isMobile ? '100%' : 'auto',
-            ref: function ref(node) {
-              if (node instanceof HTMLElement && quickFilters) {
-                setShouldShowDecorationInQuickFilters(node.scrollWidth > node.offsetWidth && Boolean(children));
-              }
-            },
+          marginRight: "spacing.3",
+          children: /*#__PURE__*/jsx(StyledQuickFilterContainer, {
+            overflow: "scroll",
+            width: "100%",
             paddingY: "spacing.4",
-            paddingLeft: isMobile ? 'spacing.2' : 'spacing.0',
+            paddingLeft: "spacing.2",
             children: quickFilters
-          }), isMobile && shouldShowDecorationInQuickFilters ? /*#__PURE__*/jsxs(Box, {
-            position: "absolute",
-            right: "-1px",
-            top: "spacing.4",
-            width: gradientOverlyContainerWidth,
-            height: gradientOverlyContainerHeight,
-            children: [/*#__PURE__*/jsx(GradientOverlay, {
-              gradientColorLeft: theme.colors.transparent,
-              gradientColorRight: theme.colors.surface.background.gray.intense,
-              dividerColor: theme.colors.surface.border.gray.normal
-            }), /*#__PURE__*/jsx(Divider, {
-              orientation: "vertical"
-            })]
-          }) : null]
+          })
         }), /*#__PURE__*/jsxs(BaseBox, {
           display: "flex",
           gap: "spacing.4",
@@ -213,9 +187,9 @@ var ListViewFilters = function ListViewFilters(_ref4) {
               value: searchValue,
               placeholder: searchValuePlaceholder,
               name: searchNameValue || searchId,
-              onChange: function onChange(_ref6) {
-                var name = _ref6.name,
-                  value = _ref6.value;
+              onChange: function onChange(_ref3) {
+                var name = _ref3.name,
+                  value = _ref3.value;
                 return onSearchChange === null || onSearchChange === void 0 ? void 0 : onSearchChange({
                   name: name,
                   value: value

package/build/lib/web/development/components/ListView/ListViewFilters.web.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListViewFilters.web.js","sources":["../../../../../../src/components/ListView/ListViewFilters.web.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { AnimatePresence, m } from 'framer-motion';\nimport styled from 'styled-components';\nimport type { ListViewFilterProps, ListViewSelectedFiltersType } from './types';\nimport { ListViewFiltersProvider } from './ListViewFiltersContext.web';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\nimport BaseBox from '~components/Box/BaseBox';\nimport { MetaConstants, metaAttribute } from '~utils/metaAttribute';\nimport { FilterIcon } from '~components/Icons';\nimport { Button } from '~components/Button';\nimport { Counter } from '~components/Counter';\nimport type { BoxProps } from '~components/Box';\nimport { Box } from '~components/Box';\nimport { SearchInput } from '~components/Input/SearchInput';\nimport { useId } from '~utils/useId';\nimport { useControllableState } from '~utils/useControllable';\nimport { useIsMobile } from '~utils/useIsMobile';\nimport { msToSeconds } from '~utils/msToSeconds';\nimport { useTheme } from '~components/BladeProvider';\nimport { cssBezierToArray } from '~utils/cssBezierToArray';\nimport { castWebType } from '~utils';\nimport { Divider } from '~components/Divider';\nimport { getComponentId } from '~utils/isValidAllowedChildren';\n\nconst gradientOverlyContainerWidth = '21px'; // 20px + 1px divider width\nconst gradientOverlyContainerHeight = '38px';\n\nconst StyledQuickFilterContainer = styled(BaseBox)({\n  /* For Webkit (Chrome, Safari) */\n  '::-webkit-scrollbar': {\n    display: 'none',\n  },\n  /* For Firefox */\n  scrollbarWidth: 'none',\n  /* For Edge */\n  msOverflowStyle: 'none',\n});\n\nconst GradientOverlay = styled.div<{\n  gradientColorLeft: string;\n  dividerColor: string;\n  gradientColorRight: string;\n}>`\n  height: 100%;\n  width: 20px;\n  background: linear-gradient(\n    270deg,\n    ${({ gradientColorRight }) => gradientColorRight} 0%,\n    ${({ gradientColorLeft }) => gradientColorLeft} 100%\n  );\n  pointer-events: none;\n  &::after {\n    content: '';\n    position: absolute;\n    right: 0;\n    top: 0;\n    height: 100%;\n    width: 1px;\n    background-color: ${({ dividerColor }) => dividerColor};\n  }\n`;\n\nconst ListViewFilters = ({\n  testID,\n  children,\n  quickFilters,\n  onSearchChange,\n  searchValue,\n  searchValuePlaceholder,\n  searchName,\n  showQuickFilters,\n  onShowQuickFiltersChange,\n  showFilters: showFiltersProp,\n  onShowFiltersChange,\n  onSearchClear,\n  selectedFiltersCount = 0,\n  searchTrailing,\n  ...rest\n}: ListViewFilterProps): React.ReactElement => {\n  const [shouldShowDecorationInQuickFilters, setShouldShowDecorationInQuickFilters] = useState(\n    false,\n  );\n  const [showFilters, setShowFilters] = useControllableState({\n    defaultValue: showQuickFilters ?? showFiltersProp,\n    value: showQuickFilters ?? showFiltersProp,\n    onChange: onShowQuickFiltersChange ?? onShowFiltersChange,\n  });\n  const [\n    listViewSelectedFilters,\n    setListViewSelectedFilters,\n  ] = useState<ListViewSelectedFiltersType>({});\n  const searchId = useId('search-input');\n  const searchNameValue = searchName || searchId;\n  const isMobile = useIsMobile();\n  const { theme } = useTheme();\n  const showSearchInput = onSearchChange || onSearchClear || searchValuePlaceholder || searchName;\n  const getFilterContainerWidth = (): BoxProps['width'] => {\n    if (isMobile && Boolean(children)) {\n      return '88%';\n    }\n    if (isMobile && !Boolean(children)) {\n      return '100%';\n    }\n    return 'auto';\n  };\n\n  const isSearchTrailingDropDown =\n    React.isValidElement(searchTrailing) && getComponentId(searchTrailing) === 'Dropdown';\n\n  return (\n    <ListViewFiltersProvider\n      value={{\n        listViewSelectedFilters,\n        setListViewSelectedFilters,\n        selectedFiltersCount,\n      }}\n    >\n      {isMobile && showSearchInput && (\n        <SearchInput\n          label=\"\"\n          value={searchValue}\n          placeholder={searchValuePlaceholder}\n          name={searchNameValue || searchId}\n          onChange={({ name, value }) => onSearchChange?.({ name, value })}\n          onClearButtonClick={onSearchClear}\n          trailing={searchTrailing}\n        />\n      )}\n      <BaseBox>\n        <BaseBox\n          {...metaAttribute({ name: MetaConstants.ListViewFilter, testID })}\n          {...makeAnalyticsAttribute(rest)}\n          display=\"flex\"\n          justifyContent=\"space-between\"\n        >\n          <Box\n            position=\"relative\"\n            display=\"flex\"\n            flexDirection=\"column\"\n            width={getFilterContainerWidth()}\n            marginRight={isMobile ? 'spacing.2' : 'spacing.0'}\n          >\n            <StyledQuickFilterContainer\n              overflow={isMobile ? 'scroll' : 'visible'}\n              width={isMobile ? '100%' : 'auto'}\n              ref={(node) => {\n                if (node instanceof HTMLElement && quickFilters) {\n                  setShouldShowDecorationInQuickFilters(\n                    node.scrollWidth > node.offsetWidth && Boolean(children),\n                  );\n                }\n              }}\n              paddingY=\"spacing.4\"\n              paddingLeft={isMobile ? 'spacing.2' : 'spacing.0'}\n            >\n              {quickFilters}\n            </StyledQuickFilterContainer>\n            {isMobile && shouldShowDecorationInQuickFilters ? (\n              <Box\n                position=\"absolute\"\n                right=\"-1px\"\n                top=\"spacing.4\"\n                width={gradientOverlyContainerWidth}\n                height={gradientOverlyContainerHeight}\n              >\n                <GradientOverlay\n                  gradientColorLeft={theme.colors.transparent}\n                  gradientColorRight={theme.colors.surface.background.gray.intense}\n                  dividerColor={theme.colors.surface.border.gray.normal}\n                />\n                <Divider orientation=\"vertical\" />\n              </Box>\n            ) : null}\n          </Box>\n\n          <BaseBox display=\"flex\" gap=\"spacing.4\" alignItems=\"center\">\n            {children ? (\n              <Box position=\"relative\" display=\"inline-block\">\n                <Button\n                  variant=\"tertiary\"\n                  size=\"medium\"\n                  color=\"primary\"\n                  onClick={() => {\n                    setShowFilters((prev) => !prev);\n                  }}\n                  icon={FilterIcon}\n                  accessibilityLabel=\"Show More Filters\"\n                />\n\n                <Box\n                  position=\"absolute\"\n                  right=\"spacing.0\"\n                  top=\"spacing.0\"\n                  transform=\"translate(50%, -50%)\"\n                >\n                  <Counter\n                    value={selectedFiltersCount || Object.keys(listViewSelectedFilters).length}\n                    color=\"primary\"\n                    emphasis=\"intense\"\n                    size=\"small\"\n                  />\n                </Box>\n              </Box>\n            ) : null}\n            {!isMobile && showSearchInput && (\n              <Box width={isSearchTrailingDropDown ? '280px' : '208px'}>\n                <SearchInput\n                  label=\"\"\n                  value={searchValue}\n                  placeholder={searchValuePlaceholder}\n                  name={searchNameValue || searchId}\n                  onChange={({ name, value }) => onSearchChange?.({ name, value })}\n                  onClearButtonClick={onSearchClear}\n                  size=\"medium\"\n                  trailing={searchTrailing}\n                />\n              </Box>\n            )}\n          </BaseBox>\n        </BaseBox>\n        <AnimatePresence>\n          {showFilters && (\n            <m.div\n              initial={{ height: 0 }}\n              animate={{ height: showFilters ? 'auto' : 0 }}\n              transition={{\n                duration: msToSeconds(theme.motion.duration.moderate),\n                ease: cssBezierToArray(castWebType(theme.motion.easing.standard)),\n              }}\n              exit={{ height: 0 }}\n            >\n              <BaseBox\n                display=\"flex\"\n                backgroundColor={\n                  isMobile ? 'surface.background.white' : 'surface.background.gray.moderate'\n                }\n                borderTop={!isMobile ? '1ps solid' : undefined}\n                borderTopColor={!isMobile ? 'surface.border.gray.muted' : undefined}\n              >\n                {children}\n              </BaseBox>\n            </m.div>\n          )}\n        </AnimatePresence>\n      </BaseBox>\n    </ListViewFiltersProvider>\n  );\n};\n\nexport { ListViewFilters };\n"],"names":["gradientOverlyContainerWidth","gradientOverlyContainerHeight","StyledQuickFilterContainer","styled","BaseBox","withConfig","displayName","componentId","display","scrollbarWidth","msOverflowStyle","GradientOverlay","div","_ref","gradientColorRight","_ref2","gradientColorLeft","_ref3","dividerColor","ListViewFilters","_ref4","testID","children","quickFilters","onSearchChange","searchValue","searchValuePlaceholder","searchName","showQuickFilters","onShowQuickFiltersChange","showFiltersProp","showFilters","onShowFiltersChange","onSearchClear","_ref4$selectedFilters","selectedFiltersCount","searchTrailing","rest","_objectWithoutProperties","_excluded","_useState","useState","_useState2","_slicedToArray","shouldShowDecorationInQuickFilters","setShouldShowDecorationInQuickFilters","_useControllableState","useControllableState","defaultValue","value","onChange","_useControllableState2","setShowFilters","_useState3","_useState4","listViewSelectedFilters","setListViewSelectedFilters","searchId","useId","searchNameValue","isMobile","useIsMobile","_useTheme","useTheme","theme","showSearchInput","getFilterContainerWidth","Boolean","isSearchTrailingDropDown","React","isValidElement","getComponentId","_jsxs","ListViewFiltersProvider","_jsx","SearchInput","label","placeholder","name","_ref5","onClearButtonClick","trailing","_objectSpread","metaAttribute","MetaConstants","ListViewFilter","makeAnalyticsAttribute","justifyContent","Box","position","flexDirection","width","marginRight","overflow","ref","node","HTMLElement","scrollWidth","offsetWidth","paddingY","paddingLeft","right","top","height","colors","transparent","surface","background","gray","intense","border","normal","Divider","orientation","gap","alignItems","Button","variant","size","color","onClick","prev","icon","FilterIcon","accessibilityLabel","transform","Counter","Object","keys","length","emphasis","_ref6","AnimatePresence","m","initial","animate","transition","duration","msToSeconds","motion","moderate","ease","cssBezierToArray","castWebType","easing","standard","exit","backgroundColor","borderTop","undefined","borderTopColor"],"mappings":"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"}
+{"version":3,"file":"ListViewFilters.web.js","sources":["../../../../../../src/components/ListView/ListViewFilters.web.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { AnimatePresence, m } from 'framer-motion';\nimport styled from 'styled-components';\nimport type { ListViewFilterProps, ListViewSelectedFiltersType } from './types';\nimport { ListViewFiltersProvider } from './ListViewFiltersContext.web';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\nimport BaseBox from '~components/Box/BaseBox';\nimport { MetaConstants, metaAttribute } from '~utils/metaAttribute';\nimport { FilterIcon } from '~components/Icons';\nimport { Button } from '~components/Button';\nimport { Counter } from '~components/Counter';\nimport type { BoxProps } from '~components/Box';\nimport { Box } from '~components/Box';\nimport { SearchInput } from '~components/Input/SearchInput';\nimport { useId } from '~utils/useId';\nimport { useControllableState } from '~utils/useControllable';\nimport { useIsMobile } from '~utils/useIsMobile';\nimport { msToSeconds } from '~utils/msToSeconds';\nimport { useTheme } from '~components/BladeProvider';\nimport { cssBezierToArray } from '~utils/cssBezierToArray';\nimport { castWebType } from '~utils';\nimport { getComponentId } from '~utils/isValidAllowedChildren';\n\nconst CHILDREN_COUNTER_WIDTH = 36;\nconst GAP_BETWEEN_CHILDREN_AND_SEARCH = 12;\nconst SPACE_BETWEEN_QUICK_FILTERS_AND_CHILDREN = 8;\nconst CHILDREN_TOTAL_WIDTH = CHILDREN_COUNTER_WIDTH + SPACE_BETWEEN_QUICK_FILTERS_AND_CHILDREN;\nconst CHILDREN_WITH_SEARCH_WIDTH =\n  CHILDREN_COUNTER_WIDTH +\n  GAP_BETWEEN_CHILDREN_AND_SEARCH +\n  SPACE_BETWEEN_QUICK_FILTERS_AND_CHILDREN;\n\nconst StyledQuickFilterContainer = styled(BaseBox)({\n  /* For Webkit (Chrome, Safari) */\n  '::-webkit-scrollbar': {\n    display: 'none',\n  },\n  /* For Firefox */\n  scrollbarWidth: 'none',\n  /* For Edge */\n  msOverflowStyle: 'none',\n});\n\nconst ListViewFilters = ({\n  testID,\n  children,\n  quickFilters,\n  onSearchChange,\n  searchValue,\n  searchValuePlaceholder,\n  searchName,\n  showQuickFilters,\n  onShowQuickFiltersChange,\n  showFilters: showFiltersProp,\n  onShowFiltersChange,\n  onSearchClear,\n  selectedFiltersCount = 0,\n  searchTrailing,\n  ...rest\n}: ListViewFilterProps): React.ReactElement => {\n  const [showFilters, setShowFilters] = useControllableState({\n    defaultValue: showQuickFilters ?? showFiltersProp,\n    value: showQuickFilters ?? showFiltersProp,\n    onChange: onShowQuickFiltersChange ?? onShowFiltersChange,\n  });\n  const [\n    listViewSelectedFilters,\n    setListViewSelectedFilters,\n  ] = useState<ListViewSelectedFiltersType>({});\n  const searchId = useId('search-input');\n  const searchNameValue = searchName || searchId;\n  const isMobile = useIsMobile();\n  const { theme } = useTheme();\n\n  const showSearchInput = onSearchChange || onSearchClear || searchValuePlaceholder || searchName;\n  const isSearchTrailingDropDown =\n    React.isValidElement(searchTrailing) && getComponentId(searchTrailing) === 'Dropdown';\n\n  const getFilterContainerWidth = (): BoxProps['width'] => {\n    const hasChildren = Boolean(children);\n\n    if (isMobile) {\n      return hasChildren ? '88%' : '100%';\n    }\n\n    const searchInputWidth = isSearchTrailingDropDown ? '280px' : '208px';\n\n    if (showSearchInput && hasChildren) {\n      return `calc(100% - ${searchInputWidth} - ${CHILDREN_WITH_SEARCH_WIDTH}px)`;\n    }\n    if (hasChildren) {\n      return `calc(100% - ${CHILDREN_TOTAL_WIDTH}px)`;\n    }\n    if (showSearchInput) {\n      return `calc(100% - ${searchInputWidth} - ${SPACE_BETWEEN_QUICK_FILTERS_AND_CHILDREN}px)`;\n    }\n    return '100%';\n  };\n\n  return (\n    <ListViewFiltersProvider\n      value={{\n        listViewSelectedFilters,\n        setListViewSelectedFilters,\n        selectedFiltersCount,\n      }}\n    >\n      {isMobile && showSearchInput && (\n        <SearchInput\n          label=\"\"\n          value={searchValue}\n          placeholder={searchValuePlaceholder}\n          name={searchNameValue || searchId}\n          onChange={({ name, value }) => onSearchChange?.({ name, value })}\n          onClearButtonClick={onSearchClear}\n          trailing={searchTrailing}\n        />\n      )}\n      <BaseBox>\n        <BaseBox\n          {...metaAttribute({ name: MetaConstants.ListViewFilter, testID })}\n          {...makeAnalyticsAttribute(rest)}\n          display=\"flex\"\n          justifyContent=\"space-between\"\n        >\n          <Box\n            position=\"relative\"\n            display=\"flex\"\n            flexDirection=\"column\"\n            width={getFilterContainerWidth()}\n            marginRight=\"spacing.3\"\n          >\n            <StyledQuickFilterContainer\n              overflow=\"scroll\"\n              width=\"100%\"\n              paddingY=\"spacing.4\"\n              paddingLeft=\"spacing.2\"\n            >\n              {quickFilters}\n            </StyledQuickFilterContainer>\n          </Box>\n\n          <BaseBox display=\"flex\" gap=\"spacing.4\" alignItems=\"center\">\n            {children ? (\n              <Box position=\"relative\" display=\"inline-block\">\n                <Button\n                  variant=\"tertiary\"\n                  size=\"medium\"\n                  color=\"primary\"\n                  onClick={() => {\n                    setShowFilters((prev) => !prev);\n                  }}\n                  icon={FilterIcon}\n                  accessibilityLabel=\"Show More Filters\"\n                />\n\n                <Box\n                  position=\"absolute\"\n                  right=\"spacing.0\"\n                  top=\"spacing.0\"\n                  transform=\"translate(50%, -50%)\"\n                >\n                  <Counter\n                    value={selectedFiltersCount || Object.keys(listViewSelectedFilters).length}\n                    color=\"primary\"\n                    emphasis=\"intense\"\n                    size=\"small\"\n                  />\n                </Box>\n              </Box>\n            ) : null}\n            {!isMobile && showSearchInput && (\n              <Box width={isSearchTrailingDropDown ? '280px' : '208px'}>\n                <SearchInput\n                  label=\"\"\n                  value={searchValue}\n                  placeholder={searchValuePlaceholder}\n                  name={searchNameValue || searchId}\n                  onChange={({ name, value }) => onSearchChange?.({ name, value })}\n                  onClearButtonClick={onSearchClear}\n                  size=\"medium\"\n                  trailing={searchTrailing}\n                />\n              </Box>\n            )}\n          </BaseBox>\n        </BaseBox>\n        <AnimatePresence>\n          {showFilters && (\n            <m.div\n              initial={{ height: 0 }}\n              animate={{ height: showFilters ? 'auto' : 0 }}\n              transition={{\n                duration: msToSeconds(theme.motion.duration.moderate),\n                ease: cssBezierToArray(castWebType(theme.motion.easing.standard)),\n              }}\n              exit={{ height: 0 }}\n            >\n              <BaseBox\n                display=\"flex\"\n                backgroundColor={\n                  isMobile ? 'surface.background.white' : 'surface.background.gray.moderate'\n                }\n                borderTop={!isMobile ? '1ps solid' : undefined}\n                borderTopColor={!isMobile ? 'surface.border.gray.muted' : undefined}\n              >\n                {children}\n              </BaseBox>\n            </m.div>\n          )}\n        </AnimatePresence>\n      </BaseBox>\n    </ListViewFiltersProvider>\n  );\n};\n\nexport { ListViewFilters };\n"],"names":["CHILDREN_COUNTER_WIDTH","GAP_BETWEEN_CHILDREN_AND_SEARCH","SPACE_BETWEEN_QUICK_FILTERS_AND_CHILDREN","CHILDREN_TOTAL_WIDTH","CHILDREN_WITH_SEARCH_WIDTH","StyledQuickFilterContainer","styled","BaseBox","withConfig","displayName","componentId","display","scrollbarWidth","msOverflowStyle","ListViewFilters","_ref","testID","children","quickFilters","onSearchChange","searchValue","searchValuePlaceholder","searchName","showQuickFilters","onShowQuickFiltersChange","showFiltersProp","showFilters","onShowFiltersChange","onSearchClear","_ref$selectedFiltersC","selectedFiltersCount","searchTrailing","rest","_objectWithoutProperties","_excluded","_useControllableState","useControllableState","defaultValue","value","onChange","_useControllableState2","_slicedToArray","setShowFilters","_useState","useState","_useState2","listViewSelectedFilters","setListViewSelectedFilters","searchId","useId","searchNameValue","isMobile","useIsMobile","_useTheme","useTheme","theme","showSearchInput","isSearchTrailingDropDown","React","isValidElement","getComponentId","getFilterContainerWidth","hasChildren","Boolean","searchInputWidth","concat","_jsxs","ListViewFiltersProvider","_jsx","SearchInput","label","placeholder","name","_ref2","onClearButtonClick","trailing","_objectSpread","metaAttribute","MetaConstants","ListViewFilter","makeAnalyticsAttribute","justifyContent","Box","position","flexDirection","width","marginRight","overflow","paddingY","paddingLeft","gap","alignItems","Button","variant","size","color","onClick","prev","icon","FilterIcon","accessibilityLabel","right","top","transform","Counter","Object","keys","length","emphasis","_ref3","AnimatePresence","m","div","initial","height","animate","transition","duration","msToSeconds","motion","moderate","ease","cssBezierToArray","castWebType","easing","standard","exit","backgroundColor","borderTop","undefined","borderTopColor"],"mappings":"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"}

package/build/lib/web/development/components/QuickFilters/QuickFilter.js

@@ -82,6 +82,9 @@ var QuickFilter = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     elevation: "none",
     isSelected: isQuickFilterSelected,
     ref: ref
+    // Add margin to accommodate the box shadow that appears when selected, preventing visual cutoff
+    ,
+    marginRight: "spacing.1"
   }, makeAnalyticsAttribute(rest)), metaAttribute({
     testID: testID
   })), {}, {

package/build/lib/web/development/components/QuickFilters/QuickFilter.js.map

@@ -1 +1 @@
-{"version":3,"file":"QuickFilter.js","sources":["../../../../../../src/components/QuickFilters/QuickFilter.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport type { QuickFilterProps, QuickFilterContentProps } from './types';\nimport { useQuickFilterGroupContext } from './QuickFilterGroup';\nimport { Card, CardBody } from '~components/Card';\nimport { Box } from '~components/Box';\nimport { Text } from '~components/Typography';\nimport { Radio } from '~components/Radio';\nimport { Checkbox } from '~components/Checkbox';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\nimport { metaAttribute } from '~utils/metaAttribute';\nimport BaseBox from '~components/Box/BaseBox';\nimport type { BladeElementRef } from '~utils/types';\n\nconst QuickFilterContent = ({\n  value,\n  title,\n  trailing,\n  selectionType = 'single',\n  isSelected = false,\n  ...rest\n}: QuickFilterContentProps): React.ReactElement => {\n  return (\n    <BaseBox\n      display=\"flex\"\n      flexDirection=\"row\"\n      gap=\"spacing.3\"\n      width=\"fit-content\"\n      justifyContent=\"center\"\n      alignItems=\"center\"\n      paddingY=\"spacing.3\"\n      paddingLeft=\"spacing.3\"\n      paddingRight=\"spacing.4\"\n    >\n      <Box\n        display=\"flex\"\n        flexDirection=\"row\"\n        gap=\"spacing.2\"\n        justifyContent=\"center\"\n        alignItems=\"center\"\n      >\n        {selectionType === 'single' ? (\n          <Radio value={value} {...makeAnalyticsAttribute(rest)} />\n        ) : (\n          <Checkbox value={value} {...makeAnalyticsAttribute(rest)} />\n        )}\n        <Text\n          variant=\"body\"\n          size=\"medium\"\n          color={isSelected ? 'interactive.text.primary.subtle' : 'interactive.text.gray.subtle'}\n          weight=\"medium\"\n        >\n          {title}\n        </Text>\n      </Box>\n\n      {trailing}\n    </BaseBox>\n  );\n};\n\nconst QuickFilter = forwardRef<BladeElementRef, QuickFilterProps>(\n  ({ title, value, trailing, testID, ...rest }, ref): React.ReactElement => {\n    const { selectedQuickFilters, selectionType } = useQuickFilterGroupContext();\n\n    const isQuickFilterSelected = selectedQuickFilters.includes(value);\n    return (\n      <Card\n        padding=\"spacing.0\"\n        as=\"label\"\n        accessibilityLabel={title}\n        borderRadius=\"medium\"\n        elevation=\"none\"\n        isSelected={isQuickFilterSelected}\n        ref={ref}\n        {...makeAnalyticsAttribute(rest)}\n        {...metaAttribute({ testID })}\n      >\n        <CardBody>\n          <QuickFilterContent\n            value={value}\n            title={title}\n            trailing={trailing}\n            selectionType={selectionType}\n            isSelected={isQuickFilterSelected}\n            {...rest}\n          />\n        </CardBody>\n      </Card>\n    );\n  },\n);\nexport { QuickFilter };\n"],"names":["QuickFilterContent","_ref","value","title","trailing","_ref$selectionType","selectionType","_ref$isSelected","isSelected","rest","_objectWithoutProperties","_excluded","_jsxs","BaseBox","display","flexDirection","gap","width","justifyContent","alignItems","paddingY","paddingLeft","paddingRight","children","Box","_jsx","Radio","_objectSpread","makeAnalyticsAttribute","Checkbox","Text","variant","size","color","weight","QuickFilter","forwardRef","_ref2","ref","testID","_excluded2","_useQuickFilterGroupC","useQuickFilterGroupContext","selectedQuickFilters","isQuickFilterSelected","includes","Card","padding","as","accessibilityLabel","borderRadius","elevation","metaAttribute","CardBody"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAaA,IAAMA,kBAAkB,GAAG,SAArBA,kBAAkBA,CAAAC,IAAA,EAO2B;AAAA,EAAA,IANjDC,KAAK,GAAAD,IAAA,CAALC,KAAK;IACLC,KAAK,GAAAF,IAAA,CAALE,KAAK;IACLC,QAAQ,GAAAH,IAAA,CAARG,QAAQ;IAAAC,kBAAA,GAAAJ,IAAA,CACRK,aAAa;AAAbA,IAAAA,aAAa,GAAAD,kBAAA,KAAG,KAAA,CAAA,GAAA,QAAQ,GAAAA,kBAAA;IAAAE,eAAA,GAAAN,IAAA,CACxBO,UAAU;AAAVA,IAAAA,UAAU,GAAAD,eAAA,KAAG,KAAA,CAAA,GAAA,KAAK,GAAAA,eAAA;AACfE,IAAAA,IAAI,GAAAC,wBAAA,CAAAT,IAAA,EAAAU,SAAA,CAAA,CAAA;EAEP,oBACEC,IAAA,CAACC,OAAO,EAAA;AACNC,IAAAA,OAAO,EAAC,MAAM;AACdC,IAAAA,aAAa,EAAC,KAAK;AACnBC,IAAAA,GAAG,EAAC,WAAW;AACfC,IAAAA,KAAK,EAAC,aAAa;AACnBC,IAAAA,cAAc,EAAC,QAAQ;AACvBC,IAAAA,UAAU,EAAC,QAAQ;AACnBC,IAAAA,QAAQ,EAAC,WAAW;AACpBC,IAAAA,WAAW,EAAC,WAAW;AACvBC,IAAAA,YAAY,EAAC,WAAW;IAAAC,QAAA,EAAA,cAExBX,IAAA,CAACY,GAAG,EAAA;AACFV,MAAAA,OAAO,EAAC,MAAM;AACdC,MAAAA,aAAa,EAAC,KAAK;AACnBC,MAAAA,GAAG,EAAC,WAAW;AACfE,MAAAA,cAAc,EAAC,QAAQ;AACvBC,MAAAA,UAAU,EAAC,QAAQ;MAAAI,QAAA,EAAA,CAElBjB,aAAa,KAAK,QAAQ,gBACzBmB,GAAA,CAACC,KAAK,EAAAC,aAAA,CAAA;AAACzB,QAAAA,KAAK,EAAEA,KAAAA;OAAW0B,EAAAA,sBAAsB,CAACnB,IAAI,CAAC,CAAG,CAAC,gBAEzDgB,GAAA,CAACI,QAAQ,EAAAF,aAAA,CAAA;AAACzB,QAAAA,KAAK,EAAEA,KAAAA;OAAW0B,EAAAA,sBAAsB,CAACnB,IAAI,CAAC,CAAG,CAC5D,eACDgB,GAAA,CAACK,IAAI,EAAA;AACHC,QAAAA,OAAO,EAAC,MAAM;AACdC,QAAAA,IAAI,EAAC,QAAQ;AACbC,QAAAA,KAAK,EAAEzB,UAAU,GAAG,iCAAiC,GAAG,8BAA+B;AACvF0B,QAAAA,MAAM,EAAC,QAAQ;AAAAX,QAAAA,QAAA,EAEdpB,KAAAA;AAAK,OACF,CAAC,CAAA;KACJ,CAAC,EAELC,QAAQ,CAAA;AAAA,GACF,CAAC,CAAA;AAEd,CAAC,CAAA;AAEK+B,IAAAA,WAAW,gBAAGC,UAAU,CAC5B,UAAAC,KAAA,EAA8CC,GAAG,EAAyB;AAAA,EAAA,IAAvEnC,KAAK,GAAAkC,KAAA,CAALlC,KAAK;IAAED,KAAK,GAAAmC,KAAA,CAALnC,KAAK;IAAEE,QAAQ,GAAAiC,KAAA,CAARjC,QAAQ;IAAEmC,MAAM,GAAAF,KAAA,CAANE,MAAM;AAAK9B,IAAAA,IAAI,GAAAC,wBAAA,CAAA2B,KAAA,EAAAG,UAAA,CAAA,CAAA;AACxC,EAAA,IAAAC,qBAAA,GAAgDC,0BAA0B,EAAE;IAApEC,oBAAoB,GAAAF,qBAAA,CAApBE,oBAAoB;IAAErC,aAAa,GAAAmC,qBAAA,CAAbnC,aAAa,CAAA;AAE3C,EAAA,IAAMsC,qBAAqB,GAAGD,oBAAoB,CAACE,QAAQ,CAAC3C,KAAK,CAAC,CAAA;EAClE,oBACEuB,GAAA,CAACqB,IAAI,EAAAnB,aAAA,CAAAA,aAAA,CAAAA,aAAA,CAAA;AACHoB,IAAAA,OAAO,EAAC,WAAW;AACnBC,IAAAA,EAAE,EAAC,OAAO;AACVC,IAAAA,kBAAkB,EAAE9C,KAAM;AAC1B+C,IAAAA,YAAY,EAAC,QAAQ;AACrBC,IAAAA,SAAS,EAAC,MAAM;AAChB3C,IAAAA,UAAU,EAAEoC,qBAAsB;AAClCN,IAAAA,GAAG,EAAEA,GAAAA;AAAI,GAAA,EACLV,sBAAsB,CAACnB,IAAI,CAAC,CAAA,EAC5B2C,aAAa,CAAC;AAAEb,IAAAA,MAAM,EAANA,MAAAA;AAAO,GAAC,CAAC,CAAA,EAAA,EAAA,EAAA;IAAAhB,QAAA,eAE7BE,GAAA,CAAC4B,QAAQ,EAAA;AAAA9B,MAAAA,QAAA,eACPE,GAAA,CAACzB,kBAAkB,EAAA2B,aAAA,CAAA;AACjBzB,QAAAA,KAAK,EAAEA,KAAM;AACbC,QAAAA,KAAK,EAAEA,KAAM;AACbC,QAAAA,QAAQ,EAAEA,QAAS;AACnBE,QAAAA,aAAa,EAAEA,aAAc;AAC7BE,QAAAA,UAAU,EAAEoC,qBAAAA;AAAsB,OAAA,EAC9BnC,IAAI,CACT,CAAA;KACO,CAAA;AAAC,GAAA,CACP,CAAC,CAAA;AAEX,CACF;;;;"}
+{"version":3,"file":"QuickFilter.js","sources":["../../../../../../src/components/QuickFilters/QuickFilter.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport type { QuickFilterProps, QuickFilterContentProps } from './types';\nimport { useQuickFilterGroupContext } from './QuickFilterGroup';\nimport { Card, CardBody } from '~components/Card';\nimport { Box } from '~components/Box';\nimport { Text } from '~components/Typography';\nimport { Radio } from '~components/Radio';\nimport { Checkbox } from '~components/Checkbox';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\nimport { metaAttribute } from '~utils/metaAttribute';\nimport BaseBox from '~components/Box/BaseBox';\nimport type { BladeElementRef } from '~utils/types';\n\nconst QuickFilterContent = ({\n  value,\n  title,\n  trailing,\n  selectionType = 'single',\n  isSelected = false,\n  ...rest\n}: QuickFilterContentProps): React.ReactElement => {\n  return (\n    <BaseBox\n      display=\"flex\"\n      flexDirection=\"row\"\n      gap=\"spacing.3\"\n      width=\"fit-content\"\n      justifyContent=\"center\"\n      alignItems=\"center\"\n      paddingY=\"spacing.3\"\n      paddingLeft=\"spacing.3\"\n      paddingRight=\"spacing.4\"\n    >\n      <Box\n        display=\"flex\"\n        flexDirection=\"row\"\n        gap=\"spacing.2\"\n        justifyContent=\"center\"\n        alignItems=\"center\"\n      >\n        {selectionType === 'single' ? (\n          <Radio value={value} {...makeAnalyticsAttribute(rest)} />\n        ) : (\n          <Checkbox value={value} {...makeAnalyticsAttribute(rest)} />\n        )}\n        <Text\n          variant=\"body\"\n          size=\"medium\"\n          color={isSelected ? 'interactive.text.primary.subtle' : 'interactive.text.gray.subtle'}\n          weight=\"medium\"\n        >\n          {title}\n        </Text>\n      </Box>\n\n      {trailing}\n    </BaseBox>\n  );\n};\n\nconst QuickFilter = forwardRef<BladeElementRef, QuickFilterProps>(\n  ({ title, value, trailing, testID, ...rest }, ref): React.ReactElement => {\n    const { selectedQuickFilters, selectionType } = useQuickFilterGroupContext();\n\n    const isQuickFilterSelected = selectedQuickFilters.includes(value);\n    return (\n      <Card\n        padding=\"spacing.0\"\n        as=\"label\"\n        accessibilityLabel={title}\n        borderRadius=\"medium\"\n        elevation=\"none\"\n        isSelected={isQuickFilterSelected}\n        ref={ref}\n        // Add margin to accommodate the box shadow that appears when selected, preventing visual cutoff\n        marginRight=\"spacing.1\"\n        {...makeAnalyticsAttribute(rest)}\n        {...metaAttribute({ testID })}\n      >\n        <CardBody>\n          <QuickFilterContent\n            value={value}\n            title={title}\n            trailing={trailing}\n            selectionType={selectionType}\n            isSelected={isQuickFilterSelected}\n            {...rest}\n          />\n        </CardBody>\n      </Card>\n    );\n  },\n);\nexport { QuickFilter };\n"],"names":["QuickFilterContent","_ref","value","title","trailing","_ref$selectionType","selectionType","_ref$isSelected","isSelected","rest","_objectWithoutProperties","_excluded","_jsxs","BaseBox","display","flexDirection","gap","width","justifyContent","alignItems","paddingY","paddingLeft","paddingRight","children","Box","_jsx","Radio","_objectSpread","makeAnalyticsAttribute","Checkbox","Text","variant","size","color","weight","QuickFilter","forwardRef","_ref2","ref","testID","_excluded2","_useQuickFilterGroupC","useQuickFilterGroupContext","selectedQuickFilters","isQuickFilterSelected","includes","Card","padding","as","accessibilityLabel","borderRadius","elevation","marginRight","metaAttribute","CardBody"],"mappings":"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"}

package/build/lib/web/development/components/VisuallyHidden/ScreenReaderStyles.js

@@ -3,17 +3,15 @@
  * https://webaim.org/techniques/css/invisiblecontent/#techniques
  */
 var screenReaderStyles = {
-  border: 0,
-  clip: 'rect(0 0 0 0)',
-  clipPath: 'inset(50%)',
-  height: "1px",
-  margin: '0 -1px -1px 0',
+  border: '0',
+  clip: 'rect(0, 0, 0, 0)',
+  height: '1px',
+  width: '1px',
+  margin: '-1px',
+  padding: '0',
   overflow: 'hidden',
-  padding: 0,
-  position: 'absolute',
-  width: "1px",
-  left: '-10000px',
   whiteSpace: 'nowrap',
+  position: 'absolute',
   wordWrap: 'normal'
 };
 

package/build/lib/web/development/components/VisuallyHidden/ScreenReaderStyles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScreenReaderStyles.js","sources":["../../../../../../src/components/VisuallyHidden/ScreenReaderStyles.ts"],"sourcesContent":["import type { CSSObject } from 'styled-components';\n\n/**\n * Screen reader class adapted from webaim\n * https://webaim.org/techniques/css/invisiblecontent/#techniques\n */\nconst screenReaderStyles: CSSObject = {\n  border: 0,\n  clip: 'rect(0 0 0 0)',\n  clipPath: 'inset(50%)',\n  height: `1px`,\n  margin: '0 -1px -1px 0',\n  overflow: 'hidden',\n  padding: 0,\n  position: 'absolute',\n  width: `1px`,\n  left: '-10000px',\n  whiteSpace: 'nowrap',\n  wordWrap: 'normal',\n};\n\nexport { screenReaderStyles };\n"],"names":["screenReaderStyles","border","clip","clipPath","height","margin","overflow","padding","position","width","left","whiteSpace","wordWrap"],"mappings":"AAEA;AACA;AACA;AACA;AACA,IAAMA,kBAA6B,GAAG;AACpCC,EAAAA,MAAM,EAAE,CAAC;AACTC,EAAAA,IAAI,EAAE,eAAe;AACrBC,EAAAA,QAAQ,EAAE,YAAY;AACtBC,EAAAA,MAAM,EAAO,KAAA;AACbC,EAAAA,MAAM,EAAE,eAAe;AACvBC,EAAAA,QAAQ,EAAE,QAAQ;AAClBC,EAAAA,OAAO,EAAE,CAAC;AACVC,EAAAA,QAAQ,EAAE,UAAU;AACpBC,EAAAA,KAAK,EAAO,KAAA;AACZC,EAAAA,IAAI,EAAE,UAAU;AAChBC,EAAAA,UAAU,EAAE,QAAQ;AACpBC,EAAAA,QAAQ,EAAE,QAAA;AACZ;;;;"}
+{"version":3,"file":"ScreenReaderStyles.js","sources":["../../../../../../src/components/VisuallyHidden/ScreenReaderStyles.ts"],"sourcesContent":["import type { CSSObject } from 'styled-components';\n\n/**\n * Screen reader class adapted from webaim\n * https://webaim.org/techniques/css/invisiblecontent/#techniques\n */\nconst screenReaderStyles: CSSObject = {\n  border: '0',\n  clip: 'rect(0, 0, 0, 0)',\n  height: '1px',\n  width: '1px',\n  margin: '-1px',\n  padding: '0',\n  overflow: 'hidden',\n  whiteSpace: 'nowrap',\n  position: 'absolute',\n  wordWrap: 'normal',\n};\n\nexport { screenReaderStyles };\n"],"names":["screenReaderStyles","border","clip","height","width","margin","padding","overflow","whiteSpace","position","wordWrap"],"mappings":"AAEA;AACA;AACA;AACA;AACA,IAAMA,kBAA6B,GAAG;AACpCC,EAAAA,MAAM,EAAE,GAAG;AACXC,EAAAA,IAAI,EAAE,kBAAkB;AACxBC,EAAAA,MAAM,EAAE,KAAK;AACbC,EAAAA,KAAK,EAAE,KAAK;AACZC,EAAAA,MAAM,EAAE,MAAM;AACdC,EAAAA,OAAO,EAAE,GAAG;AACZC,EAAAA,QAAQ,EAAE,QAAQ;AAClBC,EAAAA,UAAU,EAAE,QAAQ;AACpBC,EAAAA,QAAQ,EAAE,UAAU;AACpBC,EAAAA,QAAQ,EAAE,QAAA;AACZ;;;;"}

package/build/lib/web/production/components/ListView/ListViewFilters.web.js

@@ -20,7 +20,6 @@ import { msToSeconds } from '../../utils/msToSeconds.js';
 import '../BladeProvider/index.js';
 import { cssBezierToArray } from '../../utils/cssBezierToArray.js';
 import '../../utils/index.js';
-import '../Divider/index.js';
 import '../../utils/isValidAllowedChildren/index.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
@@ -31,7 +30,6 @@ import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.web.js';
 import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
 import { makeAnalyticsAttribute } from '../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
 import { Box } from '../Box/Box.js';
-import { Divider } from '../Divider/Divider.js';
 import Button from '../Button/Button/Button.js';
 import FilterIcon from '../Icons/FilterIcon/FilterIcon.js';
 import { Counter } from '../Counter/Counter.js';
@@ -40,8 +38,11 @@ import { castWebType } from '../../utils/platform/castUtils.js';
 var _excluded = ["testID", "children", "quickFilters", "onSearchChange", "searchValue", "searchValuePlaceholder", "searchName", "showQuickFilters", "onShowQuickFiltersChange", "showFilters", "onShowFiltersChange", "onSearchClear", "selectedFiltersCount", "searchTrailing"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var gradientOverlyContainerWidth = '21px'; // 20px + 1px divider width
-var gradientOverlyContainerHeight = '38px';
+var CHILDREN_COUNTER_WIDTH = 36;
+var GAP_BETWEEN_CHILDREN_AND_SEARCH = 12;
+var SPACE_BETWEEN_QUICK_FILTERS_AND_CHILDREN = 8;
+var CHILDREN_TOTAL_WIDTH = CHILDREN_COUNTER_WIDTH + SPACE_BETWEEN_QUICK_FILTERS_AND_CHILDREN;
+var CHILDREN_WITH_SEARCH_WIDTH = CHILDREN_COUNTER_WIDTH + GAP_BETWEEN_CHILDREN_AND_SEARCH + SPACE_BETWEEN_QUICK_FILTERS_AND_CHILDREN;
 var StyledQuickFilterContainer = /*#__PURE__*/styled(BaseBox).withConfig({
   displayName: "ListViewFiltersweb__StyledQuickFilterContainer",
   componentId: "igy2td-0"
@@ -55,40 +56,23 @@ var StyledQuickFilterContainer = /*#__PURE__*/styled(BaseBox).withConfig({
   /* For Edge */
   msOverflowStyle: 'none'
 });
-var GradientOverlay = /*#__PURE__*/styled.div.withConfig({
-  displayName: "ListViewFiltersweb__GradientOverlay",
-  componentId: "igy2td-1"
-})(["height:100%;width:20px;background:linear-gradient( 270deg,", " 0%,", " 100% );pointer-events:none;&::after{content:'';position:absolute;right:0;top:0;height:100%;width:1px;background-color:", ";}"], function (_ref) {
-  var gradientColorRight = _ref.gradientColorRight;
-  return gradientColorRight;
-}, function (_ref2) {
-  var gradientColorLeft = _ref2.gradientColorLeft;
-  return gradientColorLeft;
-}, function (_ref3) {
-  var dividerColor = _ref3.dividerColor;
-  return dividerColor;
-});
-var ListViewFilters = function ListViewFilters(_ref4) {
-  var testID = _ref4.testID,
-    children = _ref4.children,
-    quickFilters = _ref4.quickFilters,
-    onSearchChange = _ref4.onSearchChange,
-    searchValue = _ref4.searchValue,
-    searchValuePlaceholder = _ref4.searchValuePlaceholder,
-    searchName = _ref4.searchName,
-    showQuickFilters = _ref4.showQuickFilters,
-    onShowQuickFiltersChange = _ref4.onShowQuickFiltersChange,
-    showFiltersProp = _ref4.showFilters,
-    onShowFiltersChange = _ref4.onShowFiltersChange,
-    onSearchClear = _ref4.onSearchClear,
-    _ref4$selectedFilters = _ref4.selectedFiltersCount,
-    selectedFiltersCount = _ref4$selectedFilters === void 0 ? 0 : _ref4$selectedFilters,
-    searchTrailing = _ref4.searchTrailing,
-    rest = _objectWithoutProperties(_ref4, _excluded);
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    shouldShowDecorationInQuickFilters = _useState2[0],
-    setShouldShowDecorationInQuickFilters = _useState2[1];
+var ListViewFilters = function ListViewFilters(_ref) {
+  var testID = _ref.testID,
+    children = _ref.children,
+    quickFilters = _ref.quickFilters,
+    onSearchChange = _ref.onSearchChange,
+    searchValue = _ref.searchValue,
+    searchValuePlaceholder = _ref.searchValuePlaceholder,
+    searchName = _ref.searchName,
+    showQuickFilters = _ref.showQuickFilters,
+    onShowQuickFiltersChange = _ref.onShowQuickFiltersChange,
+    showFiltersProp = _ref.showFilters,
+    onShowFiltersChange = _ref.onShowFiltersChange,
+    onSearchClear = _ref.onSearchClear,
+    _ref$selectedFiltersC = _ref.selectedFiltersCount,
+    selectedFiltersCount = _ref$selectedFiltersC === void 0 ? 0 : _ref$selectedFiltersC,
+    searchTrailing = _ref.searchTrailing,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var _useControllableState = useControllableState({
       defaultValue: showQuickFilters !== null && showQuickFilters !== void 0 ? showQuickFilters : showFiltersProp,
       value: showQuickFilters !== null && showQuickFilters !== void 0 ? showQuickFilters : showFiltersProp,
@@ -97,26 +81,34 @@ var ListViewFilters = function ListViewFilters(_ref4) {
     _useControllableState2 = _slicedToArray(_useControllableState, 2),
     showFilters = _useControllableState2[0],
     setShowFilters = _useControllableState2[1];
-  var _useState3 = useState({}),
-    _useState4 = _slicedToArray(_useState3, 2),
-    listViewSelectedFilters = _useState4[0],
-    setListViewSelectedFilters = _useState4[1];
+  var _useState = useState({}),
+    _useState2 = _slicedToArray(_useState, 2),
+    listViewSelectedFilters = _useState2[0],
+    setListViewSelectedFilters = _useState2[1];
   var searchId = useId('search-input');
   var searchNameValue = searchName || searchId;
   var isMobile = useIsMobile();
   var _useTheme = useTheme(),
     theme = _useTheme.theme;
   var showSearchInput = onSearchChange || onSearchClear || searchValuePlaceholder || searchName;
+  var isSearchTrailingDropDown = /*#__PURE__*/React__default.isValidElement(searchTrailing) && getComponentId(searchTrailing) === 'Dropdown';
   var getFilterContainerWidth = function getFilterContainerWidth() {
-    if (isMobile && Boolean(children)) {
-      return '88%';
+    var hasChildren = Boolean(children);
+    if (isMobile) {
+      return hasChildren ? '88%' : '100%';
+    }
+    var searchInputWidth = isSearchTrailingDropDown ? '280px' : '208px';
+    if (showSearchInput && hasChildren) {
+      return "calc(100% - ".concat(searchInputWidth, " - ").concat(CHILDREN_WITH_SEARCH_WIDTH, "px)");
     }
-    if (isMobile && !Boolean(children)) {
-      return '100%';
+    if (hasChildren) {
+      return "calc(100% - ".concat(CHILDREN_TOTAL_WIDTH, "px)");
     }
-    return 'auto';
+    if (showSearchInput) {
+      return "calc(100% - ".concat(searchInputWidth, " - ").concat(SPACE_BETWEEN_QUICK_FILTERS_AND_CHILDREN, "px)");
+    }
+    return '100%';
   };
-  var isSearchTrailingDropDown = /*#__PURE__*/React__default.isValidElement(searchTrailing) && getComponentId(searchTrailing) === 'Dropdown';
   return /*#__PURE__*/jsxs(ListViewFiltersProvider, {
     value: {
       listViewSelectedFilters: listViewSelectedFilters,
@@ -128,9 +120,9 @@ var ListViewFilters = function ListViewFilters(_ref4) {
       value: searchValue,
       placeholder: searchValuePlaceholder,
       name: searchNameValue || searchId,
-      onChange: function onChange(_ref5) {
-        var name = _ref5.name,
-          value = _ref5.value;
+      onChange: function onChange(_ref2) {
+        var name = _ref2.name,
+          value = _ref2.value;
         return onSearchChange === null || onSearchChange === void 0 ? void 0 : onSearchChange({
           name: name,
           value: value
@@ -145,37 +137,19 @@ var ListViewFilters = function ListViewFilters(_ref4) {
       })), makeAnalyticsAttribute(rest)), {}, {
         display: "flex",
         justifyContent: "space-between",
-        children: [/*#__PURE__*/jsxs(Box, {
+        children: [/*#__PURE__*/jsx(Box, {
           position: "relative",
           display: "flex",
           flexDirection: "column",
           width: getFilterContainerWidth(),
-          marginRight: isMobile ? 'spacing.2' : 'spacing.0',
-          children: [/*#__PURE__*/jsx(StyledQuickFilterContainer, {
-            overflow: isMobile ? 'scroll' : 'visible',
-            width: isMobile ? '100%' : 'auto',
-            ref: function ref(node) {
-              if (node instanceof HTMLElement && quickFilters) {
-                setShouldShowDecorationInQuickFilters(node.scrollWidth > node.offsetWidth && Boolean(children));
-              }
-            },
+          marginRight: "spacing.3",
+          children: /*#__PURE__*/jsx(StyledQuickFilterContainer, {
+            overflow: "scroll",
+            width: "100%",
             paddingY: "spacing.4",
-            paddingLeft: isMobile ? 'spacing.2' : 'spacing.0',
+            paddingLeft: "spacing.2",
             children: quickFilters
-          }), isMobile && shouldShowDecorationInQuickFilters ? /*#__PURE__*/jsxs(Box, {
-            position: "absolute",
-            right: "-1px",
-            top: "spacing.4",
-            width: gradientOverlyContainerWidth,
-            height: gradientOverlyContainerHeight,
-            children: [/*#__PURE__*/jsx(GradientOverlay, {
-              gradientColorLeft: theme.colors.transparent,
-              gradientColorRight: theme.colors.surface.background.gray.intense,
-              dividerColor: theme.colors.surface.border.gray.normal
-            }), /*#__PURE__*/jsx(Divider, {
-              orientation: "vertical"
-            })]
-          }) : null]
+          })
         }), /*#__PURE__*/jsxs(BaseBox, {
           display: "flex",
           gap: "spacing.4",
@@ -213,9 +187,9 @@ var ListViewFilters = function ListViewFilters(_ref4) {
               value: searchValue,
               placeholder: searchValuePlaceholder,
               name: searchNameValue || searchId,
-              onChange: function onChange(_ref6) {
-                var name = _ref6.name,
-                  value = _ref6.value;
+              onChange: function onChange(_ref3) {
+                var name = _ref3.name,
+                  value = _ref3.value;
                 return onSearchChange === null || onSearchChange === void 0 ? void 0 : onSearchChange({
                   name: name,
                   value: value

package/build/lib/web/production/components/ListView/ListViewFilters.web.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListViewFilters.web.js","sources":["../../../../../../src/components/ListView/ListViewFilters.web.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { AnimatePresence, m } from 'framer-motion';\nimport styled from 'styled-components';\nimport type { ListViewFilterProps, ListViewSelectedFiltersType } from './types';\nimport { ListViewFiltersProvider } from './ListViewFiltersContext.web';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\nimport BaseBox from '~components/Box/BaseBox';\nimport { MetaConstants, metaAttribute } from '~utils/metaAttribute';\nimport { FilterIcon } from '~components/Icons';\nimport { Button } from '~components/Button';\nimport { Counter } from '~components/Counter';\nimport type { BoxProps } from '~components/Box';\nimport { Box } from '~components/Box';\nimport { SearchInput } from '~components/Input/SearchInput';\nimport { useId } from '~utils/useId';\nimport { useControllableState } from '~utils/useControllable';\nimport { useIsMobile } from '~utils/useIsMobile';\nimport { msToSeconds } from '~utils/msToSeconds';\nimport { useTheme } from '~components/BladeProvider';\nimport { cssBezierToArray } from '~utils/cssBezierToArray';\nimport { castWebType } from '~utils';\nimport { Divider } from '~components/Divider';\nimport { getComponentId } from '~utils/isValidAllowedChildren';\n\nconst gradientOverlyContainerWidth = '21px'; // 20px + 1px divider width\nconst gradientOverlyContainerHeight = '38px';\n\nconst StyledQuickFilterContainer = styled(BaseBox)({\n  /* For Webkit (Chrome, Safari) */\n  '::-webkit-scrollbar': {\n    display: 'none',\n  },\n  /* For Firefox */\n  scrollbarWidth: 'none',\n  /* For Edge */\n  msOverflowStyle: 'none',\n});\n\nconst GradientOverlay = styled.div<{\n  gradientColorLeft: string;\n  dividerColor: string;\n  gradientColorRight: string;\n}>`\n  height: 100%;\n  width: 20px;\n  background: linear-gradient(\n    270deg,\n    ${({ gradientColorRight }) => gradientColorRight} 0%,\n    ${({ gradientColorLeft }) => gradientColorLeft} 100%\n  );\n  pointer-events: none;\n  &::after {\n    content: '';\n    position: absolute;\n    right: 0;\n    top: 0;\n    height: 100%;\n    width: 1px;\n    background-color: ${({ dividerColor }) => dividerColor};\n  }\n`;\n\nconst ListViewFilters = ({\n  testID,\n  children,\n  quickFilters,\n  onSearchChange,\n  searchValue,\n  searchValuePlaceholder,\n  searchName,\n  showQuickFilters,\n  onShowQuickFiltersChange,\n  showFilters: showFiltersProp,\n  onShowFiltersChange,\n  onSearchClear,\n  selectedFiltersCount = 0,\n  searchTrailing,\n  ...rest\n}: ListViewFilterProps): React.ReactElement => {\n  const [shouldShowDecorationInQuickFilters, setShouldShowDecorationInQuickFilters] = useState(\n    false,\n  );\n  const [showFilters, setShowFilters] = useControllableState({\n    defaultValue: showQuickFilters ?? showFiltersProp,\n    value: showQuickFilters ?? showFiltersProp,\n    onChange: onShowQuickFiltersChange ?? onShowFiltersChange,\n  });\n  const [\n    listViewSelectedFilters,\n    setListViewSelectedFilters,\n  ] = useState<ListViewSelectedFiltersType>({});\n  const searchId = useId('search-input');\n  const searchNameValue = searchName || searchId;\n  const isMobile = useIsMobile();\n  const { theme } = useTheme();\n  const showSearchInput = onSearchChange || onSearchClear || searchValuePlaceholder || searchName;\n  const getFilterContainerWidth = (): BoxProps['width'] => {\n    if (isMobile && Boolean(children)) {\n      return '88%';\n    }\n    if (isMobile && !Boolean(children)) {\n      return '100%';\n    }\n    return 'auto';\n  };\n\n  const isSearchTrailingDropDown =\n    React.isValidElement(searchTrailing) && getComponentId(searchTrailing) === 'Dropdown';\n\n  return (\n    <ListViewFiltersProvider\n      value={{\n        listViewSelectedFilters,\n        setListViewSelectedFilters,\n        selectedFiltersCount,\n      }}\n    >\n      {isMobile && showSearchInput && (\n        <SearchInput\n          label=\"\"\n          value={searchValue}\n          placeholder={searchValuePlaceholder}\n          name={searchNameValue || searchId}\n          onChange={({ name, value }) => onSearchChange?.({ name, value })}\n          onClearButtonClick={onSearchClear}\n          trailing={searchTrailing}\n        />\n      )}\n      <BaseBox>\n        <BaseBox\n          {...metaAttribute({ name: MetaConstants.ListViewFilter, testID })}\n          {...makeAnalyticsAttribute(rest)}\n          display=\"flex\"\n          justifyContent=\"space-between\"\n        >\n          <Box\n            position=\"relative\"\n            display=\"flex\"\n            flexDirection=\"column\"\n            width={getFilterContainerWidth()}\n            marginRight={isMobile ? 'spacing.2' : 'spacing.0'}\n          >\n            <StyledQuickFilterContainer\n              overflow={isMobile ? 'scroll' : 'visible'}\n              width={isMobile ? '100%' : 'auto'}\n              ref={(node) => {\n                if (node instanceof HTMLElement && quickFilters) {\n                  setShouldShowDecorationInQuickFilters(\n                    node.scrollWidth > node.offsetWidth && Boolean(children),\n                  );\n                }\n              }}\n              paddingY=\"spacing.4\"\n              paddingLeft={isMobile ? 'spacing.2' : 'spacing.0'}\n            >\n              {quickFilters}\n            </StyledQuickFilterContainer>\n            {isMobile && shouldShowDecorationInQuickFilters ? (\n              <Box\n                position=\"absolute\"\n                right=\"-1px\"\n                top=\"spacing.4\"\n                width={gradientOverlyContainerWidth}\n                height={gradientOverlyContainerHeight}\n              >\n                <GradientOverlay\n                  gradientColorLeft={theme.colors.transparent}\n                  gradientColorRight={theme.colors.surface.background.gray.intense}\n                  dividerColor={theme.colors.surface.border.gray.normal}\n                />\n                <Divider orientation=\"vertical\" />\n              </Box>\n            ) : null}\n          </Box>\n\n          <BaseBox display=\"flex\" gap=\"spacing.4\" alignItems=\"center\">\n            {children ? (\n              <Box position=\"relative\" display=\"inline-block\">\n                <Button\n                  variant=\"tertiary\"\n                  size=\"medium\"\n                  color=\"primary\"\n                  onClick={() => {\n                    setShowFilters((prev) => !prev);\n                  }}\n                  icon={FilterIcon}\n                  accessibilityLabel=\"Show More Filters\"\n                />\n\n                <Box\n                  position=\"absolute\"\n                  right=\"spacing.0\"\n                  top=\"spacing.0\"\n                  transform=\"translate(50%, -50%)\"\n                >\n                  <Counter\n                    value={selectedFiltersCount || Object.keys(listViewSelectedFilters).length}\n                    color=\"primary\"\n                    emphasis=\"intense\"\n                    size=\"small\"\n                  />\n                </Box>\n              </Box>\n            ) : null}\n            {!isMobile && showSearchInput && (\n              <Box width={isSearchTrailingDropDown ? '280px' : '208px'}>\n                <SearchInput\n                  label=\"\"\n                  value={searchValue}\n                  placeholder={searchValuePlaceholder}\n                  name={searchNameValue || searchId}\n                  onChange={({ name, value }) => onSearchChange?.({ name, value })}\n                  onClearButtonClick={onSearchClear}\n                  size=\"medium\"\n                  trailing={searchTrailing}\n                />\n              </Box>\n            )}\n          </BaseBox>\n        </BaseBox>\n        <AnimatePresence>\n          {showFilters && (\n            <m.div\n              initial={{ height: 0 }}\n              animate={{ height: showFilters ? 'auto' : 0 }}\n              transition={{\n                duration: msToSeconds(theme.motion.duration.moderate),\n                ease: cssBezierToArray(castWebType(theme.motion.easing.standard)),\n              }}\n              exit={{ height: 0 }}\n            >\n              <BaseBox\n                display=\"flex\"\n                backgroundColor={\n                  isMobile ? 'surface.background.white' : 'surface.background.gray.moderate'\n                }\n                borderTop={!isMobile ? '1ps solid' : undefined}\n                borderTopColor={!isMobile ? 'surface.border.gray.muted' : undefined}\n              >\n                {children}\n              </BaseBox>\n            </m.div>\n          )}\n        </AnimatePresence>\n      </BaseBox>\n    </ListViewFiltersProvider>\n  );\n};\n\nexport { ListViewFilters };\n"],"names":["gradientOverlyContainerWidth","gradientOverlyContainerHeight","StyledQuickFilterContainer","styled","BaseBox","withConfig","displayName","componentId","display","scrollbarWidth","msOverflowStyle","GradientOverlay","div","_ref","gradientColorRight","_ref2","gradientColorLeft","_ref3","dividerColor","ListViewFilters","_ref4","testID","children","quickFilters","onSearchChange","searchValue","searchValuePlaceholder","searchName","showQuickFilters","onShowQuickFiltersChange","showFiltersProp","showFilters","onShowFiltersChange","onSearchClear","_ref4$selectedFilters","selectedFiltersCount","searchTrailing","rest","_objectWithoutProperties","_excluded","_useState","useState","_useState2","_slicedToArray","shouldShowDecorationInQuickFilters","setShouldShowDecorationInQuickFilters","_useControllableState","useControllableState","defaultValue","value","onChange","_useControllableState2","setShowFilters","_useState3","_useState4","listViewSelectedFilters","setListViewSelectedFilters","searchId","useId","searchNameValue","isMobile","useIsMobile","_useTheme","useTheme","theme","showSearchInput","getFilterContainerWidth","Boolean","isSearchTrailingDropDown","React","isValidElement","getComponentId","_jsxs","ListViewFiltersProvider","_jsx","SearchInput","label","placeholder","name","_ref5","onClearButtonClick","trailing","_objectSpread","metaAttribute","MetaConstants","ListViewFilter","makeAnalyticsAttribute","justifyContent","Box","position","flexDirection","width","marginRight","overflow","ref","node","HTMLElement","scrollWidth","offsetWidth","paddingY","paddingLeft","right","top","height","colors","transparent","surface","background","gray","intense","border","normal","Divider","orientation","gap","alignItems","Button","variant","size","color","onClick","prev","icon","FilterIcon","accessibilityLabel","transform","Counter","Object","keys","length","emphasis","_ref6","AnimatePresence","m","initial","animate","transition","duration","msToSeconds","motion","moderate","ease","cssBezierToArray","castWebType","easing","standard","exit","backgroundColor","borderTop","undefined","borderTopColor"],"mappings":"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"}
+{"version":3,"file":"ListViewFilters.web.js","sources":["../../../../../../src/components/ListView/ListViewFilters.web.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { AnimatePresence, m } from 'framer-motion';\nimport styled from 'styled-components';\nimport type { ListViewFilterProps, ListViewSelectedFiltersType } from './types';\nimport { ListViewFiltersProvider } from './ListViewFiltersContext.web';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\nimport BaseBox from '~components/Box/BaseBox';\nimport { MetaConstants, metaAttribute } from '~utils/metaAttribute';\nimport { FilterIcon } from '~components/Icons';\nimport { Button } from '~components/Button';\nimport { Counter } from '~components/Counter';\nimport type { BoxProps } from '~components/Box';\nimport { Box } from '~components/Box';\nimport { SearchInput } from '~components/Input/SearchInput';\nimport { useId } from '~utils/useId';\nimport { useControllableState } from '~utils/useControllable';\nimport { useIsMobile } from '~utils/useIsMobile';\nimport { msToSeconds } from '~utils/msToSeconds';\nimport { useTheme } from '~components/BladeProvider';\nimport { cssBezierToArray } from '~utils/cssBezierToArray';\nimport { castWebType } from '~utils';\nimport { getComponentId } from '~utils/isValidAllowedChildren';\n\nconst CHILDREN_COUNTER_WIDTH = 36;\nconst GAP_BETWEEN_CHILDREN_AND_SEARCH = 12;\nconst SPACE_BETWEEN_QUICK_FILTERS_AND_CHILDREN = 8;\nconst CHILDREN_TOTAL_WIDTH = CHILDREN_COUNTER_WIDTH + SPACE_BETWEEN_QUICK_FILTERS_AND_CHILDREN;\nconst CHILDREN_WITH_SEARCH_WIDTH =\n  CHILDREN_COUNTER_WIDTH +\n  GAP_BETWEEN_CHILDREN_AND_SEARCH +\n  SPACE_BETWEEN_QUICK_FILTERS_AND_CHILDREN;\n\nconst StyledQuickFilterContainer = styled(BaseBox)({\n  /* For Webkit (Chrome, Safari) */\n  '::-webkit-scrollbar': {\n    display: 'none',\n  },\n  /* For Firefox */\n  scrollbarWidth: 'none',\n  /* For Edge */\n  msOverflowStyle: 'none',\n});\n\nconst ListViewFilters = ({\n  testID,\n  children,\n  quickFilters,\n  onSearchChange,\n  searchValue,\n  searchValuePlaceholder,\n  searchName,\n  showQuickFilters,\n  onShowQuickFiltersChange,\n  showFilters: showFiltersProp,\n  onShowFiltersChange,\n  onSearchClear,\n  selectedFiltersCount = 0,\n  searchTrailing,\n  ...rest\n}: ListViewFilterProps): React.ReactElement => {\n  const [showFilters, setShowFilters] = useControllableState({\n    defaultValue: showQuickFilters ?? showFiltersProp,\n    value: showQuickFilters ?? showFiltersProp,\n    onChange: onShowQuickFiltersChange ?? onShowFiltersChange,\n  });\n  const [\n    listViewSelectedFilters,\n    setListViewSelectedFilters,\n  ] = useState<ListViewSelectedFiltersType>({});\n  const searchId = useId('search-input');\n  const searchNameValue = searchName || searchId;\n  const isMobile = useIsMobile();\n  const { theme } = useTheme();\n\n  const showSearchInput = onSearchChange || onSearchClear || searchValuePlaceholder || searchName;\n  const isSearchTrailingDropDown =\n    React.isValidElement(searchTrailing) && getComponentId(searchTrailing) === 'Dropdown';\n\n  const getFilterContainerWidth = (): BoxProps['width'] => {\n    const hasChildren = Boolean(children);\n\n    if (isMobile) {\n      return hasChildren ? '88%' : '100%';\n    }\n\n    const searchInputWidth = isSearchTrailingDropDown ? '280px' : '208px';\n\n    if (showSearchInput && hasChildren) {\n      return `calc(100% - ${searchInputWidth} - ${CHILDREN_WITH_SEARCH_WIDTH}px)`;\n    }\n    if (hasChildren) {\n      return `calc(100% - ${CHILDREN_TOTAL_WIDTH}px)`;\n    }\n    if (showSearchInput) {\n      return `calc(100% - ${searchInputWidth} - ${SPACE_BETWEEN_QUICK_FILTERS_AND_CHILDREN}px)`;\n    }\n    return '100%';\n  };\n\n  return (\n    <ListViewFiltersProvider\n      value={{\n        listViewSelectedFilters,\n        setListViewSelectedFilters,\n        selectedFiltersCount,\n      }}\n    >\n      {isMobile && showSearchInput && (\n        <SearchInput\n          label=\"\"\n          value={searchValue}\n          placeholder={searchValuePlaceholder}\n          name={searchNameValue || searchId}\n          onChange={({ name, value }) => onSearchChange?.({ name, value })}\n          onClearButtonClick={onSearchClear}\n          trailing={searchTrailing}\n        />\n      )}\n      <BaseBox>\n        <BaseBox\n          {...metaAttribute({ name: MetaConstants.ListViewFilter, testID })}\n          {...makeAnalyticsAttribute(rest)}\n          display=\"flex\"\n          justifyContent=\"space-between\"\n        >\n          <Box\n            position=\"relative\"\n            display=\"flex\"\n            flexDirection=\"column\"\n            width={getFilterContainerWidth()}\n            marginRight=\"spacing.3\"\n          >\n            <StyledQuickFilterContainer\n              overflow=\"scroll\"\n              width=\"100%\"\n              paddingY=\"spacing.4\"\n              paddingLeft=\"spacing.2\"\n            >\n              {quickFilters}\n            </StyledQuickFilterContainer>\n          </Box>\n\n          <BaseBox display=\"flex\" gap=\"spacing.4\" alignItems=\"center\">\n            {children ? (\n              <Box position=\"relative\" display=\"inline-block\">\n                <Button\n                  variant=\"tertiary\"\n                  size=\"medium\"\n                  color=\"primary\"\n                  onClick={() => {\n                    setShowFilters((prev) => !prev);\n                  }}\n                  icon={FilterIcon}\n                  accessibilityLabel=\"Show More Filters\"\n                />\n\n                <Box\n                  position=\"absolute\"\n                  right=\"spacing.0\"\n                  top=\"spacing.0\"\n                  transform=\"translate(50%, -50%)\"\n                >\n                  <Counter\n                    value={selectedFiltersCount || Object.keys(listViewSelectedFilters).length}\n                    color=\"primary\"\n                    emphasis=\"intense\"\n                    size=\"small\"\n                  />\n                </Box>\n              </Box>\n            ) : null}\n            {!isMobile && showSearchInput && (\n              <Box width={isSearchTrailingDropDown ? '280px' : '208px'}>\n                <SearchInput\n                  label=\"\"\n                  value={searchValue}\n                  placeholder={searchValuePlaceholder}\n                  name={searchNameValue || searchId}\n                  onChange={({ name, value }) => onSearchChange?.({ name, value })}\n                  onClearButtonClick={onSearchClear}\n                  size=\"medium\"\n                  trailing={searchTrailing}\n                />\n              </Box>\n            )}\n          </BaseBox>\n        </BaseBox>\n        <AnimatePresence>\n          {showFilters && (\n            <m.div\n              initial={{ height: 0 }}\n              animate={{ height: showFilters ? 'auto' : 0 }}\n              transition={{\n                duration: msToSeconds(theme.motion.duration.moderate),\n                ease: cssBezierToArray(castWebType(theme.motion.easing.standard)),\n              }}\n              exit={{ height: 0 }}\n            >\n              <BaseBox\n                display=\"flex\"\n                backgroundColor={\n                  isMobile ? 'surface.background.white' : 'surface.background.gray.moderate'\n                }\n                borderTop={!isMobile ? '1ps solid' : undefined}\n                borderTopColor={!isMobile ? 'surface.border.gray.muted' : undefined}\n              >\n                {children}\n              </BaseBox>\n            </m.div>\n          )}\n        </AnimatePresence>\n      </BaseBox>\n    </ListViewFiltersProvider>\n  );\n};\n\nexport { ListViewFilters };\n"],"names":["CHILDREN_COUNTER_WIDTH","GAP_BETWEEN_CHILDREN_AND_SEARCH","SPACE_BETWEEN_QUICK_FILTERS_AND_CHILDREN","CHILDREN_TOTAL_WIDTH","CHILDREN_WITH_SEARCH_WIDTH","StyledQuickFilterContainer","styled","BaseBox","withConfig","displayName","componentId","display","scrollbarWidth","msOverflowStyle","ListViewFilters","_ref","testID","children","quickFilters","onSearchChange","searchValue","searchValuePlaceholder","searchName","showQuickFilters","onShowQuickFiltersChange","showFiltersProp","showFilters","onShowFiltersChange","onSearchClear","_ref$selectedFiltersC","selectedFiltersCount","searchTrailing","rest","_objectWithoutProperties","_excluded","_useControllableState","useControllableState","defaultValue","value","onChange","_useControllableState2","_slicedToArray","setShowFilters","_useState","useState","_useState2","listViewSelectedFilters","setListViewSelectedFilters","searchId","useId","searchNameValue","isMobile","useIsMobile","_useTheme","useTheme","theme","showSearchInput","isSearchTrailingDropDown","React","isValidElement","getComponentId","getFilterContainerWidth","hasChildren","Boolean","searchInputWidth","concat","_jsxs","ListViewFiltersProvider","_jsx","SearchInput","label","placeholder","name","_ref2","onClearButtonClick","trailing","_objectSpread","metaAttribute","MetaConstants","ListViewFilter","makeAnalyticsAttribute","justifyContent","Box","position","flexDirection","width","marginRight","overflow","paddingY","paddingLeft","gap","alignItems","Button","variant","size","color","onClick","prev","icon","FilterIcon","accessibilityLabel","right","top","transform","Counter","Object","keys","length","emphasis","_ref3","AnimatePresence","m","div","initial","height","animate","transition","duration","msToSeconds","motion","moderate","ease","cssBezierToArray","castWebType","easing","standard","exit","backgroundColor","borderTop","undefined","borderTopColor"],"mappings":"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"}

package/build/lib/web/production/components/QuickFilters/QuickFilter.js

@@ -82,6 +82,9 @@ var QuickFilter = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     elevation: "none",
     isSelected: isQuickFilterSelected,
     ref: ref
+    // Add margin to accommodate the box shadow that appears when selected, preventing visual cutoff
+    ,
+    marginRight: "spacing.1"
   }, makeAnalyticsAttribute(rest)), metaAttribute({
     testID: testID
   })), {}, {

package/build/lib/web/production/components/QuickFilters/QuickFilter.js.map

@@ -1 +1 @@
-{"version":3,"file":"QuickFilter.js","sources":["../../../../../../src/components/QuickFilters/QuickFilter.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport type { QuickFilterProps, QuickFilterContentProps } from './types';\nimport { useQuickFilterGroupContext } from './QuickFilterGroup';\nimport { Card, CardBody } from '~components/Card';\nimport { Box } from '~components/Box';\nimport { Text } from '~components/Typography';\nimport { Radio } from '~components/Radio';\nimport { Checkbox } from '~components/Checkbox';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\nimport { metaAttribute } from '~utils/metaAttribute';\nimport BaseBox from '~components/Box/BaseBox';\nimport type { BladeElementRef } from '~utils/types';\n\nconst QuickFilterContent = ({\n  value,\n  title,\n  trailing,\n  selectionType = 'single',\n  isSelected = false,\n  ...rest\n}: QuickFilterContentProps): React.ReactElement => {\n  return (\n    <BaseBox\n      display=\"flex\"\n      flexDirection=\"row\"\n      gap=\"spacing.3\"\n      width=\"fit-content\"\n      justifyContent=\"center\"\n      alignItems=\"center\"\n      paddingY=\"spacing.3\"\n      paddingLeft=\"spacing.3\"\n      paddingRight=\"spacing.4\"\n    >\n      <Box\n        display=\"flex\"\n        flexDirection=\"row\"\n        gap=\"spacing.2\"\n        justifyContent=\"center\"\n        alignItems=\"center\"\n      >\n        {selectionType === 'single' ? (\n          <Radio value={value} {...makeAnalyticsAttribute(rest)} />\n        ) : (\n          <Checkbox value={value} {...makeAnalyticsAttribute(rest)} />\n        )}\n        <Text\n          variant=\"body\"\n          size=\"medium\"\n          color={isSelected ? 'interactive.text.primary.subtle' : 'interactive.text.gray.subtle'}\n          weight=\"medium\"\n        >\n          {title}\n        </Text>\n      </Box>\n\n      {trailing}\n    </BaseBox>\n  );\n};\n\nconst QuickFilter = forwardRef<BladeElementRef, QuickFilterProps>(\n  ({ title, value, trailing, testID, ...rest }, ref): React.ReactElement => {\n    const { selectedQuickFilters, selectionType } = useQuickFilterGroupContext();\n\n    const isQuickFilterSelected = selectedQuickFilters.includes(value);\n    return (\n      <Card\n        padding=\"spacing.0\"\n        as=\"label\"\n        accessibilityLabel={title}\n        borderRadius=\"medium\"\n        elevation=\"none\"\n        isSelected={isQuickFilterSelected}\n        ref={ref}\n        {...makeAnalyticsAttribute(rest)}\n        {...metaAttribute({ testID })}\n      >\n        <CardBody>\n          <QuickFilterContent\n            value={value}\n            title={title}\n            trailing={trailing}\n            selectionType={selectionType}\n            isSelected={isQuickFilterSelected}\n            {...rest}\n          />\n        </CardBody>\n      </Card>\n    );\n  },\n);\nexport { QuickFilter };\n"],"names":["QuickFilterContent","_ref","value","title","trailing","_ref$selectionType","selectionType","_ref$isSelected","isSelected","rest","_objectWithoutProperties","_excluded","_jsxs","BaseBox","display","flexDirection","gap","width","justifyContent","alignItems","paddingY","paddingLeft","paddingRight","children","Box","_jsx","Radio","_objectSpread","makeAnalyticsAttribute","Checkbox","Text","variant","size","color","weight","QuickFilter","forwardRef","_ref2","ref","testID","_excluded2","_useQuickFilterGroupC","useQuickFilterGroupContext","selectedQuickFilters","isQuickFilterSelected","includes","Card","padding","as","accessibilityLabel","borderRadius","elevation","metaAttribute","CardBody"],"mappings":"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"}
+{"version":3,"file":"QuickFilter.js","sources":["../../../../../../src/components/QuickFilters/QuickFilter.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport type { QuickFilterProps, QuickFilterContentProps } from './types';\nimport { useQuickFilterGroupContext } from './QuickFilterGroup';\nimport { Card, CardBody } from '~components/Card';\nimport { Box } from '~components/Box';\nimport { Text } from '~components/Typography';\nimport { Radio } from '~components/Radio';\nimport { Checkbox } from '~components/Checkbox';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\nimport { metaAttribute } from '~utils/metaAttribute';\nimport BaseBox from '~components/Box/BaseBox';\nimport type { BladeElementRef } from '~utils/types';\n\nconst QuickFilterContent = ({\n  value,\n  title,\n  trailing,\n  selectionType = 'single',\n  isSelected = false,\n  ...rest\n}: QuickFilterContentProps): React.ReactElement => {\n  return (\n    <BaseBox\n      display=\"flex\"\n      flexDirection=\"row\"\n      gap=\"spacing.3\"\n      width=\"fit-content\"\n      justifyContent=\"center\"\n      alignItems=\"center\"\n      paddingY=\"spacing.3\"\n      paddingLeft=\"spacing.3\"\n      paddingRight=\"spacing.4\"\n    >\n      <Box\n        display=\"flex\"\n        flexDirection=\"row\"\n        gap=\"spacing.2\"\n        justifyContent=\"center\"\n        alignItems=\"center\"\n      >\n        {selectionType === 'single' ? (\n          <Radio value={value} {...makeAnalyticsAttribute(rest)} />\n        ) : (\n          <Checkbox value={value} {...makeAnalyticsAttribute(rest)} />\n        )}\n        <Text\n          variant=\"body\"\n          size=\"medium\"\n          color={isSelected ? 'interactive.text.primary.subtle' : 'interactive.text.gray.subtle'}\n          weight=\"medium\"\n        >\n          {title}\n        </Text>\n      </Box>\n\n      {trailing}\n    </BaseBox>\n  );\n};\n\nconst QuickFilter = forwardRef<BladeElementRef, QuickFilterProps>(\n  ({ title, value, trailing, testID, ...rest }, ref): React.ReactElement => {\n    const { selectedQuickFilters, selectionType } = useQuickFilterGroupContext();\n\n    const isQuickFilterSelected = selectedQuickFilters.includes(value);\n    return (\n      <Card\n        padding=\"spacing.0\"\n        as=\"label\"\n        accessibilityLabel={title}\n        borderRadius=\"medium\"\n        elevation=\"none\"\n        isSelected={isQuickFilterSelected}\n        ref={ref}\n        // Add margin to accommodate the box shadow that appears when selected, preventing visual cutoff\n        marginRight=\"spacing.1\"\n        {...makeAnalyticsAttribute(rest)}\n        {...metaAttribute({ testID })}\n      >\n        <CardBody>\n          <QuickFilterContent\n            value={value}\n            title={title}\n            trailing={trailing}\n            selectionType={selectionType}\n            isSelected={isQuickFilterSelected}\n            {...rest}\n          />\n        </CardBody>\n      </Card>\n    );\n  },\n);\nexport { QuickFilter };\n"],"names":["QuickFilterContent","_ref","value","title","trailing","_ref$selectionType","selectionType","_ref$isSelected","isSelected","rest","_objectWithoutProperties","_excluded","_jsxs","BaseBox","display","flexDirection","gap","width","justifyContent","alignItems","paddingY","paddingLeft","paddingRight","children","Box","_jsx","Radio","_objectSpread","makeAnalyticsAttribute","Checkbox","Text","variant","size","color","weight","QuickFilter","forwardRef","_ref2","ref","testID","_excluded2","_useQuickFilterGroupC","useQuickFilterGroupContext","selectedQuickFilters","isQuickFilterSelected","includes","Card","padding","as","accessibilityLabel","borderRadius","elevation","marginRight","metaAttribute","CardBody"],"mappings":"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"}

package/build/lib/web/production/components/VisuallyHidden/ScreenReaderStyles.js

@@ -3,17 +3,15 @@
  * https://webaim.org/techniques/css/invisiblecontent/#techniques
  */
 var screenReaderStyles = {
-  border: 0,
-  clip: 'rect(0 0 0 0)',
-  clipPath: 'inset(50%)',
-  height: "1px",
-  margin: '0 -1px -1px 0',
+  border: '0',
+  clip: 'rect(0, 0, 0, 0)',
+  height: '1px',
+  width: '1px',
+  margin: '-1px',
+  padding: '0',
   overflow: 'hidden',
-  padding: 0,
-  position: 'absolute',
-  width: "1px",
-  left: '-10000px',
   whiteSpace: 'nowrap',
+  position: 'absolute',
   wordWrap: 'normal'
 };
 

package/build/lib/web/production/components/VisuallyHidden/ScreenReaderStyles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScreenReaderStyles.js","sources":["../../../../../../src/components/VisuallyHidden/ScreenReaderStyles.ts"],"sourcesContent":["import type { CSSObject } from 'styled-components';\n\n/**\n * Screen reader class adapted from webaim\n * https://webaim.org/techniques/css/invisiblecontent/#techniques\n */\nconst screenReaderStyles: CSSObject = {\n  border: 0,\n  clip: 'rect(0 0 0 0)',\n  clipPath: 'inset(50%)',\n  height: `1px`,\n  margin: '0 -1px -1px 0',\n  overflow: 'hidden',\n  padding: 0,\n  position: 'absolute',\n  width: `1px`,\n  left: '-10000px',\n  whiteSpace: 'nowrap',\n  wordWrap: 'normal',\n};\n\nexport { screenReaderStyles };\n"],"names":["screenReaderStyles","border","clip","clipPath","height","margin","overflow","padding","position","width","left","whiteSpace","wordWrap"],"mappings":"AAEA;AACA;AACA;AACA;AACA,IAAMA,kBAA6B,GAAG;AACpCC,EAAAA,MAAM,EAAE,CAAC;AACTC,EAAAA,IAAI,EAAE,eAAe;AACrBC,EAAAA,QAAQ,EAAE,YAAY;AACtBC,EAAAA,MAAM,EAAO,KAAA;AACbC,EAAAA,MAAM,EAAE,eAAe;AACvBC,EAAAA,QAAQ,EAAE,QAAQ;AAClBC,EAAAA,OAAO,EAAE,CAAC;AACVC,EAAAA,QAAQ,EAAE,UAAU;AACpBC,EAAAA,KAAK,EAAO,KAAA;AACZC,EAAAA,IAAI,EAAE,UAAU;AAChBC,EAAAA,UAAU,EAAE,QAAQ;AACpBC,EAAAA,QAAQ,EAAE,QAAA;AACZ;;;;"}
+{"version":3,"file":"ScreenReaderStyles.js","sources":["../../../../../../src/components/VisuallyHidden/ScreenReaderStyles.ts"],"sourcesContent":["import type { CSSObject } from 'styled-components';\n\n/**\n * Screen reader class adapted from webaim\n * https://webaim.org/techniques/css/invisiblecontent/#techniques\n */\nconst screenReaderStyles: CSSObject = {\n  border: '0',\n  clip: 'rect(0, 0, 0, 0)',\n  height: '1px',\n  width: '1px',\n  margin: '-1px',\n  padding: '0',\n  overflow: 'hidden',\n  whiteSpace: 'nowrap',\n  position: 'absolute',\n  wordWrap: 'normal',\n};\n\nexport { screenReaderStyles };\n"],"names":["screenReaderStyles","border","clip","height","width","margin","padding","overflow","whiteSpace","position","wordWrap"],"mappings":"AAEA;AACA;AACA;AACA;AACA,IAAMA,kBAA6B,GAAG;AACpCC,EAAAA,MAAM,EAAE,GAAG;AACXC,EAAAA,IAAI,EAAE,kBAAkB;AACxBC,EAAAA,MAAM,EAAE,KAAK;AACbC,EAAAA,KAAK,EAAE,KAAK;AACZC,EAAAA,MAAM,EAAE,MAAM;AACdC,EAAAA,OAAO,EAAE,GAAG;AACZC,EAAAA,QAAQ,EAAE,QAAQ;AAClBC,EAAAA,UAAU,EAAE,QAAQ;AACpBC,EAAAA,QAAQ,EAAE,UAAU;AACpBC,EAAAA,QAAQ,EAAE,QAAA;AACZ;;;;"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@razorpay/blade",
   "description": "The Design System that powers Razorpay",
-  "version": "12.46.1",
+  "version": "12.46.2",
   "license": "MIT",
   "engines": {
     "node": ">=18.12.1"