@wix/patterns 1.174.0 → 1.176.0

package/dist/cjs/components/MultiSelectCheckboxFilter/MultiSelectCheckboxFilter.js

@@ -4,233 +4,27 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports.MultiSelectCheckboxFilter = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _designSystem = require("@wix/design-system");
-var _react = _interopRequireWildcard(require("react"));
-var _state = require("../../state");
-var _bexCore = require("@wix/bex-core");
-var _react2 = require("@wix/bex-core/react");
+var _react = _interopRequireDefault(require("react"));
 var _mobxReactLite = require("mobx-react-lite");
-var _MultiSelectCheckboxFilterBase = require("../MultiSelectCheckboxFilterBase");
-var _hooks = require("../../hooks");
-var _InputOverflow = require("../InputOverflow");
+var _CollectionMultiSelectCheckbox = require("../CollectionMultiSelectCheckbox");
 var _providers = require("../../providers");
-var _useCollectionFilterInitialFetchTiming = require("../../hooks/useCollectionFilterInitialFetchTiming");
-var _useFilterCollectionStates = require("../../hooks/useFilterCollectionStates");
 var _jsxFileName = "/home/builduser/work/db7ea24852bc3350/packages/cairo/dist/cjs/components/MultiSelectCheckboxFilter/MultiSelectCheckboxFilter.tsx";
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _MultiSelectCheckboxFilter(props) {
-  const {
-    filter,
-    collection,
-    renderItem,
-    onSelect,
-    onClose,
-    onOptionsShow,
-    onDeselect,
-    placeholder: placeholderProp,
-    ...rest
-  } = props;
-  const container = (0, _react2.useWixPatternsContainer)();
-  const toolbar = (0, _providers.useFilterToolbarState)();
-  const buildOption = (0, _hooks.useBuildOption)({
-    filter,
-    renderItem,
-    checkbox: true
-  });
-  const [collectionFilter] = (0, _react.useState)(() => new _state.CollectionFilterState({
-    collection,
-    filter
-  }));
-  const [dropdownCollectionFilterState] = (0, _react.useState)(() => new _state.DropdownCollectionFilterState({
-    resetOnClose: false,
-    collectionFilter,
-    container,
-    toolbar
-  }));
-  const {
-    dropdownSelect,
-    init,
-    inputState,
-    shouldShowPlaceholder
-  } = dropdownCollectionFilterState;
-  const {
-    disableEditing
-  } = inputState;
-  const {
-    select: {
-      selectedKeys,
-      selectedValues
-    },
-    finalFilterKeyedItems,
-    finalFilterKeyedItemsMap,
-    container: {
-      translate: t
-    }
-  } = dropdownSelect;
-  const [textOverflowState] = (0, _react.useState)(() => new _bexCore.TextOverflowState({
-    observable: () => dropdownSelect.select.selectedValues
-  }));
-  const {
-    isOverflow
-  } = textOverflowState;
-  const {
-    result: {
-      keyedItems
-    },
-    fetchedLastPage,
-    query: {
-      search: {
-        isEmpty: isEmptySearch
-      }
-    }
-  } = collection;
-  const finalOptions = finalFilterKeyedItems.length ? finalFilterKeyedItems.map(buildOption) : [];
-  const divider = finalFilterKeyedItems.length && finalFilterKeyedItems.length !== keyedItems.length ? [(0, _designSystem.listItemSectionBuilder)({
-    id: 'promoted-section-divider',
-    type: 'divider'
-  })] : [];
-  const promotedOptions = [...finalOptions, ...divider];
-  const otherOptions = (isEmptySearch ? keyedItems.filter(({
-    key
-  }) => !finalFilterKeyedItemsMap.has(key)) : keyedItems).map(buildOption);
-  const options = [...(isEmptySearch ? promotedOptions : []), ...otherOptions];
-  const {
-    fixedFooter,
-    showInitialLoader
-  } = (0, _useFilterCollectionStates.useFilterCollectionStates)({
-    collection,
-    fixedFooter: rest.fixedFooter
-  });
-  const selectedValuesText = (0, _react.useMemo)(() => {
-    return selectedValues.map(({
-      item
-    }) => filter.itemName(item)).join(', ');
-  }, [selectedValues]);
-  const {
-    skipInitialFetch,
-    onFocus
-  } = (0, _useCollectionFilterInitialFetchTiming.useCollectionFilterInitialFetchTiming)(props);
-  (0, _react.useEffect)(() => init({
-    skipInitialFetch
-  }), []);
-  const placeholder = (0, _react.useMemo)(() => {
-    if (!shouldShowPlaceholder) {
-      return '';
-    }
-    if (selectedValues.length !== 0) {
-      if (process.env.NODE_ENV === 'test' && selectedValuesText.length > 40 || isOverflow) {
-        return t('cairo.dropdownSearch.filters.selected', {
-          total: selectedValues.length
-        });
-      }
-      return selectedValuesText;
-    }
-    if (placeholderProp) {
-      return placeholderProp;
-    }
-    const translationKey = 'cairo.dropdownSearch.select.filers.placeholder';
-    if (t(translationKey) !== translationKey) {
-      return t(translationKey);
-    }
-    return '';
-  }, [selectedValues, selectedValuesText, shouldShowPlaceholder, isOverflow, placeholderProp, container.initTask.status.status]);
-  return /*#__PURE__*/_react.default.createElement(_MultiSelectCheckboxFilterBase.MultiSelectCheckboxFilterBase, (0, _extends2.default)({}, rest, {
-    fixedFooter: fixedFooter,
-    infiniteScroll: true,
-    filter: filter,
-    dropdownSelect: dropdownSelect,
-    options: options,
-    selectedOptions: selectedKeys,
-    hasMore: !showInitialLoader && !fetchedLastPage,
-    loadMore: collection.fetchNextPageIfNeeded,
-    onClose: () => {
-      if (!dropdownSelect.hasPendingFilter) {
-        dropdownSelect.closeAndChangeSelectedItems();
-      }
-      inputState.onBlur();
-      onClose == null || onClose();
-    },
-    onSelect: (id, option) => {
-      const {
-        keyedItem
-      } = option;
-      dropdownSelect.select.set(keyedItem);
-      if (dropdownSelect.hasPendingFilter) {
-        dropdownSelect.refreshIfChanged({
-          actionType: 'add',
-          clickedValueKey: keyedItem.key
-        });
-      }
-      onSelect == null || onSelect(id, option);
-    },
-    onDeselect: (id, option) => {
-      const {
-        keyedItem
-      } = option;
-      dropdownSelect.select.delete(keyedItem);
-      if (dropdownSelect.hasPendingFilter) {
-        dropdownSelect.refreshIfChanged({
-          actionType: 'remove',
-          clickedValueKey: keyedItem.key
-        });
-      }
-      onDeselect == null || onDeselect(id, option);
-    },
-    value: collection.query.search.value,
-    onFocus: () => {
-      inputState.onFocus();
-      onFocus();
-    },
-    onBlur: () => {
-      inputState.onBlur();
-    },
-    onChange: e => {
-      collection.search(e.target.value, {
-        clearResult: true
-      });
-    },
-    onOptionsShow: () => {
-      inputState.onOptionsShow();
-      onOptionsShow == null || onOptionsShow();
-    },
-    onKeyDown: e => {
-      if (e.nativeEvent.code === 'Tab') {
-        inputState.onTabKeyDown();
-      }
-    },
-    onClickOutside: e => {
-      props.onClickOutside == null || props.onClickOutside(e);
-      inputState.onClickOutside();
-    },
-    onClear: () => {
-      inputState.onBlur();
-      collection.clearSearch();
-    },
-    disableEditing: disableEditing,
-    placeholder: placeholder,
-    clearButton: !disableEditing,
-    clearButtonTooltipContent: t('cairo.dropdownSearch.select.filers.clear'),
-    focusOnClearClick: true,
-    inputElement: /*#__PURE__*/_react.default.createElement(_InputOverflow.InputOverflow, {
-      selected: selectedValues.length > 0,
-      focused: inputState.isFocused,
-      text: selectedValuesText,
-      state: textOverflowState,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 267,
-        columnNumber: 9
-      }
-    }),
+  return /*#__PURE__*/_react.default.createElement(_providers.FilterTranslationProvider, {
     __self: this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 194,
+      lineNumber: 19,
       columnNumber: 5
     }
-  }));
+  }, /*#__PURE__*/_react.default.createElement(_CollectionMultiSelectCheckbox.CollectionMultiSelectCheckbox, (0, _extends2.default)({}, props, {
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 20,
+      columnNumber: 7
+    }
+  })));
 }
 const MultiSelectCheckboxFilter = exports.MultiSelectCheckboxFilter = (0, _mobxReactLite.observer)(_MultiSelectCheckboxFilter);
 //# sourceMappingURL=MultiSelectCheckboxFilter.js.map

package/dist/cjs/components/MultiSelectCheckboxFilter/MultiSelectCheckboxFilter.js.map

@@ -1 +1 @@
-{"version":3,"names":["_designSystem","require","_react","_interopRequireWildcard","_state","_bexCore","_react2","_mobxReactLite","_MultiSelectCheckboxFilterBase","_hooks","_InputOverflow","_providers","_useCollectionFilterInitialFetchTiming","_useFilterCollectionStates","_jsxFileName","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","_MultiSelectCheckboxFilter","props","filter","collection","renderItem","onSelect","onClose","onOptionsShow","onDeselect","placeholder","placeholderProp","rest","container","useWixPatternsContainer","toolbar","useFilterToolbarState","buildOption","useBuildOption","checkbox","collectionFilter","useState","CollectionFilterState","dropdownCollectionFilterState","DropdownCollectionFilterState","resetOnClose","dropdownSelect","init","inputState","shouldShowPlaceholder","disableEditing","select","selectedKeys","selectedValues","finalFilterKeyedItems","finalFilterKeyedItemsMap","translate","textOverflowState","TextOverflowState","observable","isOverflow","result","keyedItems","fetchedLastPage","query","search","isEmpty","isEmptySearch","finalOptions","length","map","divider","listItemSectionBuilder","id","type","promotedOptions","otherOptions","key","options","fixedFooter","showInitialLoader","useFilterCollectionStates","selectedValuesText","useMemo","item","itemName","join","skipInitialFetch","onFocus","useCollectionFilterInitialFetchTiming","useEffect","process","env","NODE_ENV","total","translationKey","initTask","status","createElement","MultiSelectCheckboxFilterBase","_extends2","infiniteScroll","selectedOptions","hasMore","loadMore","fetchNextPageIfNeeded","hasPendingFilter","closeAndChangeSelectedItems","onBlur","option","keyedItem","refreshIfChanged","actionType","clickedValueKey","delete","value","onChange","target","clearResult","onKeyDown","nativeEvent","code","onTabKeyDown","onClickOutside","onClear","clearSearch","clearButton","clearButtonTooltipContent","focusOnClearClick","inputElement","InputOverflow","selected","focused","isFocused","text","state","__self","__source","fileName","lineNumber","columnNumber","MultiSelectCheckboxFilter","exports","observer"],"sources":["../../../../src/components/MultiSelectCheckboxFilter/MultiSelectCheckboxFilter.tsx"],"sourcesContent":["import { listItemSectionBuilder } from '@wix/design-system';\nimport React, { useEffect, useMemo, useState } from 'react';\nimport {\n  CollectionFilterState,\n  DropdownCollectionFilterState,\n} from '../../state';\nimport { CollectionState, FiltersMap, TextOverflowState } from '@wix/bex-core';\nimport { useWixPatternsContainer } from '@wix/bex-core/react';\nimport { observer } from 'mobx-react-lite';\nimport {\n  KeyedItemOption,\n  MultiSelectCheckboxFilterBase,\n  MultiSelectCheckboxFilterBaseOption,\n  MultiSelectCheckboxFilterBaseProps,\n} from '../MultiSelectCheckboxFilterBase';\nimport { ListItem, useBuildOption } from '../../hooks';\nimport { InputOverflow } from '../InputOverflow';\nimport { useFilterToolbarState } from '../../providers';\nimport {\n  useCollectionFilterInitialFetchTiming,\n  CollectionFilterInitialFetchTimingProps,\n} from '../../hooks/useCollectionFilterInitialFetchTiming';\nimport { useFilterCollectionStates } from '../../hooks/useFilterCollectionStates';\n\nexport interface MultiSelectCheckboxFilterProps<\n  V,\n  F extends FiltersMap = FiltersMap,\n> extends Omit<\n      MultiSelectCheckboxFilterBaseProps<V>,\n      'options' | 'dropdownSelect'\n    >,\n    CollectionFilterInitialFetchTimingProps {\n  /**\n   * A collection state object to fetch the dropdown items.<br>\n   * A collection created using [useFilterCollection](./?path=/story/features-filter-hooks--usefiltercollection) or [useStaticListFilterCollection](./?path=/story/features-filter-hooks--usestaticlistfiltercollection)\n   * @external\n   */\n  collection: CollectionState<V, F>;\n  /**\n   * A function that returns a [ListItemSelectProps](https://www.docs.wixdesignsystem.com/?path=/story/components-form-dropdownlistitems--listitemselect) (Optional)\n   */\n  renderItem?: (item: V, index: number) => ListItem;\n}\n\nfunction _MultiSelectCheckboxFilter<V, F extends FiltersMap = FiltersMap>(\n  props: MultiSelectCheckboxFilterProps<V, F>,\n) {\n  const {\n    filter,\n    collection,\n    renderItem,\n    onSelect,\n    onClose,\n    onOptionsShow,\n    onDeselect,\n    placeholder: placeholderProp,\n    ...rest\n  } = props;\n\n  const container = useWixPatternsContainer();\n  const toolbar = useFilterToolbarState();\n\n  const buildOption = useBuildOption<V>({\n    filter,\n    renderItem,\n    checkbox: true,\n  });\n\n  const [collectionFilter] = useState(\n    () =>\n      new CollectionFilterState({\n        collection,\n        filter,\n      }),\n  );\n\n  const [dropdownCollectionFilterState] = useState(\n    () =>\n      new DropdownCollectionFilterState<V, F>({\n        resetOnClose: false,\n        collectionFilter,\n        container,\n        toolbar,\n      }),\n  );\n\n  const { dropdownSelect, init, inputState, shouldShowPlaceholder } =\n    dropdownCollectionFilterState;\n  const { disableEditing } = inputState;\n\n  const {\n    select: { selectedKeys, selectedValues },\n    finalFilterKeyedItems,\n    finalFilterKeyedItemsMap,\n    container: { translate: t },\n  } = dropdownSelect;\n\n  const [textOverflowState] = useState(\n    () =>\n      new TextOverflowState({\n        observable: () => dropdownSelect.select.selectedValues,\n      }),\n  );\n  const { isOverflow } = textOverflowState;\n\n  const {\n    result: { keyedItems },\n    fetchedLastPage,\n    query: {\n      search: { isEmpty: isEmptySearch },\n    },\n  } = collection;\n\n  const finalOptions = finalFilterKeyedItems.length\n    ? finalFilterKeyedItems.map(buildOption)\n    : [];\n\n  const divider =\n    finalFilterKeyedItems.length &&\n    finalFilterKeyedItems.length !== keyedItems.length\n      ? [\n          listItemSectionBuilder({\n            id: 'promoted-section-divider',\n            type: 'divider',\n          }),\n        ]\n      : [];\n\n  const promotedOptions: MultiSelectCheckboxFilterBaseOption<V>[] = [\n    ...finalOptions,\n    ...divider,\n  ];\n\n  const otherOptions: KeyedItemOption<V>[] = (\n    isEmptySearch\n      ? keyedItems.filter(({ key }) => !finalFilterKeyedItemsMap.has(key))\n      : keyedItems\n  ).map(buildOption);\n\n  const options = [...(isEmptySearch ? promotedOptions : []), ...otherOptions];\n  const { fixedFooter, showInitialLoader } = useFilterCollectionStates({\n    collection,\n    fixedFooter: rest.fixedFooter,\n  });\n\n  const selectedValuesText = useMemo(() => {\n    return selectedValues.map(({ item }) => filter.itemName(item)).join(', ');\n  }, [selectedValues]);\n\n  const { skipInitialFetch, onFocus } =\n    useCollectionFilterInitialFetchTiming(props);\n\n  useEffect(() => init({ skipInitialFetch }), []);\n\n  const placeholder = useMemo(() => {\n    if (!shouldShowPlaceholder) {\n      return '';\n    }\n\n    if (selectedValues.length !== 0) {\n      if (\n        (process.env.NODE_ENV === 'test' && selectedValuesText.length > 40) ||\n        isOverflow\n      ) {\n        return t('cairo.dropdownSearch.filters.selected', {\n          total: selectedValues.length,\n        });\n      }\n\n      return selectedValuesText;\n    }\n\n    if (placeholderProp) {\n      return placeholderProp;\n    }\n\n    const translationKey = 'cairo.dropdownSearch.select.filers.placeholder';\n\n    if (t(translationKey) !== translationKey) {\n      return t(translationKey);\n    }\n\n    return '';\n  }, [\n    selectedValues,\n    selectedValuesText,\n    shouldShowPlaceholder,\n    isOverflow,\n    placeholderProp,\n    container.initTask.status.status,\n  ]);\n\n  return (\n    <MultiSelectCheckboxFilterBase\n      {...rest}\n      fixedFooter={fixedFooter}\n      infiniteScroll\n      filter={filter}\n      dropdownSelect={dropdownSelect}\n      options={options}\n      selectedOptions={selectedKeys}\n      hasMore={!showInitialLoader && !fetchedLastPage}\n      loadMore={collection.fetchNextPageIfNeeded}\n      onClose={() => {\n        if (!dropdownSelect.hasPendingFilter) {\n          dropdownSelect.closeAndChangeSelectedItems();\n        }\n        inputState.onBlur();\n        onClose?.();\n      }}\n      onSelect={(id, option) => {\n        const { keyedItem } = option as KeyedItemOption<V>;\n        dropdownSelect.select.set(keyedItem);\n        if (dropdownSelect.hasPendingFilter) {\n          dropdownSelect.refreshIfChanged({\n            actionType: 'add',\n            clickedValueKey: keyedItem.key,\n          });\n        }\n        onSelect?.(id, option);\n      }}\n      onDeselect={(id, option) => {\n        const { keyedItem } = option as KeyedItemOption<V>;\n        dropdownSelect.select.delete(keyedItem);\n        if (dropdownSelect.hasPendingFilter) {\n          dropdownSelect.refreshIfChanged({\n            actionType: 'remove',\n            clickedValueKey: keyedItem.key,\n          });\n        }\n        onDeselect?.(id, option);\n      }}\n      value={collection.query.search.value}\n      onFocus={() => {\n        inputState.onFocus();\n        onFocus();\n      }}\n      onBlur={() => {\n        inputState.onBlur();\n      }}\n      onChange={(e) => {\n        collection.search(e.target.value, { clearResult: true });\n      }}\n      onOptionsShow={() => {\n        inputState.onOptionsShow();\n        onOptionsShow?.();\n      }}\n      onKeyDown={(e) => {\n        if (e.nativeEvent.code === 'Tab') {\n          inputState.onTabKeyDown();\n        }\n      }}\n      onClickOutside={(e) => {\n        props.onClickOutside?.(e);\n        inputState.onClickOutside();\n      }}\n      onClear={() => {\n        inputState.onBlur();\n        collection.clearSearch();\n      }}\n      disableEditing={disableEditing}\n      placeholder={placeholder}\n      clearButton={!disableEditing}\n      clearButtonTooltipContent={t('cairo.dropdownSearch.select.filers.clear')}\n      focusOnClearClick\n      inputElement={\n        <InputOverflow\n          selected={selectedValues.length > 0}\n          focused={inputState.isFocused}\n          text={selectedValuesText}\n          state={textOverflowState}\n        />\n      }\n    />\n  );\n}\n\nexport const MultiSelectCheckboxFilter = observer(_MultiSelectCheckboxFilter);\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_mobxReactLite","_CollectionMultiSelectCheckbox","_providers","_jsxFileName","_MultiSelectCheckboxFilter","props","default","createElement","FilterTranslationProvider","__self","__source","fileName","lineNumber","columnNumber","CollectionMultiSelectCheckbox","_extends2","MultiSelectCheckboxFilter","exports","observer"],"sources":["../../../../src/components/MultiSelectCheckboxFilter/MultiSelectCheckboxFilter.tsx"],"sourcesContent":["import React from 'react';\nimport { FiltersMap } from '@wix/bex-core';\nimport { observer } from 'mobx-react-lite';\nimport {\n  CollectionMultiSelectCheckbox,\n  CollectionMultiSelectCheckboxProps,\n} from '../CollectionMultiSelectCheckbox';\nimport { FilterTranslationProvider } from '../../providers';\n\nexport interface MultiSelectCheckboxFilterProps<\n  V,\n  F extends FiltersMap = FiltersMap,\n> extends CollectionMultiSelectCheckboxProps<V, F> {}\n\nfunction _MultiSelectCheckboxFilter<V, F extends FiltersMap = FiltersMap>(\n  props: MultiSelectCheckboxFilterProps<V, F>,\n) {\n  return (\n    <FilterTranslationProvider>\n      <CollectionMultiSelectCheckbox {...props} />\n    </FilterTranslationProvider>\n  );\n}\n\nexport const MultiSelectCheckboxFilter = observer(_MultiSelectCheckboxFilter);\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,cAAA,GAAAD,OAAA;AACA,IAAAE,8BAAA,GAAAF,OAAA;AAIA,IAAAG,UAAA,GAAAH,OAAA;AAA4D,IAAAI,YAAA;AAO5D,SAASC,0BAA0BA,CACjCC,KAA2C,EAC3C;EACA,oBACER,MAAA,CAAAS,OAAA,CAAAC,aAAA,CAACL,UAAA,CAAAM,yBAAyB;IAAAC,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAR,YAAA;MAAAS,UAAA;MAAAC,YAAA;IAAA;EAAA,gBACxBhB,MAAA,CAAAS,OAAA,CAAAC,aAAA,CAACN,8BAAA,CAAAa,6BAA6B,MAAAC,SAAA,CAAAT,OAAA,MAAKD,KAAK;IAAAI,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAR,YAAA;MAAAS,UAAA;MAAAC,YAAA;IAAA;EAAA,EAAG,CAClB,CAAC;AAEhC;AAEO,MAAMG,yBAAyB,GAAAC,OAAA,CAAAD,yBAAA,GAAG,IAAAE,uBAAQ,EAACd,0BAA0B,CAAC","ignoreList":[]}

package/dist/cjs/components/MultiSelectCheckboxFilterBase/MultiSelectCheckboxFilterBase.js

@@ -5,12 +5,11 @@ exports.__esModule = true;
 exports.MultiSelectCheckboxFilterBase = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _designSystem = require("@wix/design-system");
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _mobxReactLite = require("mobx-react-lite");
 var _useWindowFlipPopoverProps = require("../../utils/useWindowFlipPopoverProps");
+var _providers = require("../../providers");
 var _jsxFileName = "/home/builduser/work/db7ea24852bc3350/packages/cairo/dist/cjs/components/MultiSelectCheckboxFilterBase/MultiSelectCheckboxFilterBase.tsx";
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _MultiSelectCheckboxFilterBase(props) {
   const {
     filter,
@@ -22,32 +21,18 @@ function _MultiSelectCheckboxFilterBase(props) {
   } = props;
   const {
     select: {
-      selectedKeys,
-      selectedValues
-    },
-    container: {
-      translate: t
+      selectedKeys
     }
   } = dropdownSelect;
+  const {
+    translate
+  } = (0, _providers.useDropdownTranslationContext)();
   const {
     windowFlipPopoverProps,
     inputRef
   } = (0, _useWindowFlipPopoverProps.useWindowFlipPopoverProps)({
     popoverProps
   });
-  const selectedLabel = (0, _react.useMemo)(() => {
-    if (selectedValues.length > 2) {
-      return t('cairo.selected', {
-        total: selectedValues.length
-      });
-    }
-    if (selectedValues.length) {
-      return selectedValues.map(({
-        item
-      }) => filter.itemName(item)).join(', ');
-    }
-    return '';
-  }, [selectedValues]);
   return /*#__PURE__*/_react.default.createElement(_designSystem.MultiSelectCheckbox, (0, _extends2.default)({
     inputRef: ref => {
       inputRef.current = ref;
@@ -56,15 +41,14 @@ function _MultiSelectCheckboxFilterBase(props) {
     border: "round",
     textOverflow: "ellipsis",
     options: options,
-    value: selectedLabel,
-    placeholder: placeholder ?? t('cairo.selectPlaceholder'),
+    placeholder: placeholder ?? translate('placeholder'),
     selectedOptions: selectedKeys,
     popoverProps: windowFlipPopoverProps
   }, rest, {
     __self: this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 71,
+      lineNumber: 58,
       columnNumber: 5
     }
   }));

package/dist/cjs/components/MultiSelectCheckboxFilterBase/MultiSelectCheckboxFilterBase.js.map

@@ -1 +1 @@
-{"version":3,"names":["_designSystem","require","_react","_interopRequireWildcard","_mobxReactLite","_useWindowFlipPopoverProps","_jsxFileName","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","_MultiSelectCheckboxFilterBase","props","filter","dropdownSelect","options","placeholder","popoverProps","rest","select","selectedKeys","selectedValues","container","translate","windowFlipPopoverProps","inputRef","useWindowFlipPopoverProps","selectedLabel","useMemo","length","total","map","item","itemName","join","createElement","MultiSelectCheckbox","_extends2","ref","current","dataHook","name","border","textOverflow","value","selectedOptions","__self","__source","fileName","lineNumber","columnNumber","MultiSelectCheckboxFilterBase","exports","observer"],"sources":["../../../../src/components/MultiSelectCheckboxFilterBase/MultiSelectCheckboxFilterBase.tsx"],"sourcesContent":["import {\n  DropdownLayoutOption,\n  DropdownLayoutValueOption,\n  MultiSelectCheckbox,\n  MultiSelectCheckboxProps,\n} from '@wix/design-system';\nimport React, { useMemo } from 'react';\nimport { observer } from 'mobx-react-lite';\nimport { KeyedItem } from '@wix/bex-core';\nimport { DropdownSelectState } from '../../state';\nimport { FilterProps } from '../../model';\nimport { useWindowFlipPopoverProps } from '../../utils/useWindowFlipPopoverProps';\n\nexport type KeyedItemOption<T> = DropdownLayoutValueOption & {\n  keyedItem: KeyedItem<T>;\n};\n\nexport type MultiSelectCheckboxFilterBaseOption<V> =\n  | KeyedItemOption<V>\n  | DropdownLayoutOption;\n\nexport interface MultiSelectCheckboxFilterBaseProps<V>\n  extends Partial<MultiSelectCheckboxProps>,\n    FilterProps<V[]> {\n  /**\n   * Applies a data-hook HTML attribute that can be used in the tests\n   * @default `collection-filter-${filter.name}`\n   */\n  dataHook?: string;\n  options: MultiSelectCheckboxFilterBaseOption<V>[];\n  dropdownSelect: DropdownSelectState<V>;\n  placeholder?: string;\n}\n\nfunction _MultiSelectCheckboxFilterBase<V>(\n  props: MultiSelectCheckboxFilterBaseProps<V>,\n) {\n  const {\n    filter,\n    dropdownSelect,\n    options,\n    placeholder,\n    popoverProps,\n    ...rest\n  } = props;\n\n  const {\n    select: { selectedKeys, selectedValues },\n    container: { translate: t },\n  } = dropdownSelect;\n\n  const { windowFlipPopoverProps, inputRef } = useWindowFlipPopoverProps({\n    popoverProps,\n  });\n\n  const selectedLabel = useMemo(() => {\n    if (selectedValues.length > 2) {\n      return t('cairo.selected', {\n        total: selectedValues.length,\n      });\n    }\n\n    if (selectedValues.length) {\n      return selectedValues.map(({ item }) => filter.itemName(item)).join(', ');\n    }\n\n    return '';\n  }, [selectedValues]);\n\n  return (\n    <MultiSelectCheckbox\n      inputRef={(ref) => {\n        inputRef.current = ref;\n      }}\n      dataHook={`collection-filter-${filter.name}`}\n      border=\"round\"\n      textOverflow=\"ellipsis\"\n      options={options}\n      value={selectedLabel}\n      placeholder={placeholder ?? t('cairo.selectPlaceholder')}\n      selectedOptions={selectedKeys}\n      popoverProps={windowFlipPopoverProps}\n      {...rest}\n    />\n  );\n}\n\nexport const MultiSelectCheckboxFilterBase = observer(\n  _MultiSelectCheckboxFilterBase,\n);\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_designSystem","require","_react","_interopRequireDefault","_mobxReactLite","_useWindowFlipPopoverProps","_providers","_jsxFileName","_MultiSelectCheckboxFilterBase","props","filter","dropdownSelect","options","placeholder","popoverProps","rest","select","selectedKeys","translate","useDropdownTranslationContext","windowFlipPopoverProps","inputRef","useWindowFlipPopoverProps","default","createElement","MultiSelectCheckbox","_extends2","ref","current","dataHook","name","border","textOverflow","selectedOptions","__self","__source","fileName","lineNumber","columnNumber","MultiSelectCheckboxFilterBase","exports","observer"],"sources":["../../../../src/components/MultiSelectCheckboxFilterBase/MultiSelectCheckboxFilterBase.tsx"],"sourcesContent":["import {\n  DropdownLayoutOption,\n  DropdownLayoutValueOption,\n  MultiSelectCheckbox,\n  MultiSelectCheckboxProps,\n} from '@wix/design-system';\nimport React from 'react';\nimport { observer } from 'mobx-react-lite';\nimport { KeyedItem } from '@wix/bex-core';\nimport { DropdownSelectState } from '../../state';\nimport { FilterProps } from '../../model';\nimport { useWindowFlipPopoverProps } from '../../utils/useWindowFlipPopoverProps';\nimport { useDropdownTranslationContext } from '../../providers';\n\nexport type KeyedItemOption<T> = DropdownLayoutValueOption & {\n  keyedItem: KeyedItem<T>;\n};\n\nexport type MultiSelectCheckboxFilterBaseOption<V> =\n  | KeyedItemOption<V>\n  | DropdownLayoutOption;\n\nexport interface MultiSelectCheckboxFilterBaseProps<V>\n  extends Partial<MultiSelectCheckboxProps>,\n    FilterProps<V[]> {\n  /**\n   * Applies a data-hook HTML attribute that can be used in the tests\n   * @default `collection-filter-${filter.name}`\n   */\n  dataHook?: string;\n  options: MultiSelectCheckboxFilterBaseOption<V>[];\n  dropdownSelect: DropdownSelectState<V>;\n  placeholder?: string;\n}\n\nfunction _MultiSelectCheckboxFilterBase<V>(\n  props: MultiSelectCheckboxFilterBaseProps<V>,\n) {\n  const {\n    filter,\n    dropdownSelect,\n    options,\n    placeholder,\n    popoverProps,\n    ...rest\n  } = props;\n\n  const {\n    select: { selectedKeys },\n  } = dropdownSelect;\n  const { translate } = useDropdownTranslationContext();\n\n  const { windowFlipPopoverProps, inputRef } = useWindowFlipPopoverProps({\n    popoverProps,\n  });\n\n  return (\n    <MultiSelectCheckbox\n      inputRef={(ref) => {\n        inputRef.current = ref;\n      }}\n      dataHook={`collection-filter-${filter.name}`}\n      border=\"round\"\n      textOverflow=\"ellipsis\"\n      options={options}\n      placeholder={placeholder ?? translate('placeholder')}\n      selectedOptions={selectedKeys}\n      popoverProps={windowFlipPopoverProps}\n      {...rest}\n    />\n  );\n}\n\nexport const MultiSelectCheckboxFilterBase = observer(\n  _MultiSelectCheckboxFilterBase,\n);\n"],"mappings":";;;;;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AAMA,IAAAC,MAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,cAAA,GAAAH,OAAA;AAIA,IAAAI,0BAAA,GAAAJ,OAAA;AACA,IAAAK,UAAA,GAAAL,OAAA;AAAgE,IAAAM,YAAA;AAuBhE,SAASC,8BAA8BA,CACrCC,KAA4C,EAC5C;EACA,MAAM;IACJC,MAAM;IACNC,cAAc;IACdC,OAAO;IACPC,WAAW;IACXC,YAAY;IACZ,GAAGC;EACL,CAAC,GAAGN,KAAK;EAET,MAAM;IACJO,MAAM,EAAE;MAAEC;IAAa;EACzB,CAAC,GAAGN,cAAc;EAClB,MAAM;IAAEO;EAAU,CAAC,GAAG,IAAAC,wCAA6B,EAAC,CAAC;EAErD,MAAM;IAAEC,sBAAsB;IAAEC;EAAS,CAAC,GAAG,IAAAC,oDAAyB,EAAC;IACrER;EACF,CAAC,CAAC;EAEF,oBACEZ,MAAA,CAAAqB,OAAA,CAAAC,aAAA,CAACxB,aAAA,CAAAyB,mBAAmB,MAAAC,SAAA,CAAAH,OAAA;IAClBF,QAAQ,EAAGM,GAAG,IAAK;MACjBN,QAAQ,CAACO,OAAO,GAAGD,GAAG;IACxB,CAAE;IACFE,QAAQ,EAAE,qBAAqBnB,MAAM,CAACoB,IAAI,EAAG;IAC7CC,MAAM,EAAC,OAAO;IACdC,YAAY,EAAC,UAAU;IACvBpB,OAAO,EAAEA,OAAQ;IACjBC,WAAW,EAAEA,WAAW,IAAIK,SAAS,CAAC,aAAa,CAAE;IACrDe,eAAe,EAAEhB,YAAa;IAC9BH,YAAY,EAAEM;EAAuB,GACjCL,IAAI;IAAAmB,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAA7B,YAAA;MAAA8B,UAAA;MAAAC,YAAA;IAAA;EAAA,EACT,CAAC;AAEN;AAEO,MAAMC,6BAA6B,GAAAC,OAAA,CAAAD,6BAAA,GAAG,IAAAE,uBAAQ,EACnDjC,8BACF,CAAC","ignoreList":[]}

package/dist/cjs/components/MultiSelectCollectionFilter/MultiSelectCollectionFilter.js

@@ -2,7 +2,7 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
-exports.MultiSelectCollectionFilter = void 0;
+exports.MultiSelectCollectionFilter = MultiSelectCollectionFilter;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
 var _state = require("../../state");
@@ -85,11 +85,28 @@ function _MultiSelectCollectionFilter(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 89,
+      lineNumber: 92,
       columnNumber: 5
     }
   }));
 }
-const MultiSelectCollectionFilter = exports.MultiSelectCollectionFilter = (0, _mobxReactLite.observer)(_MultiSelectCollectionFilter);
+const MultiSelectCollectionFilterInternal = (0, _mobxReactLite.observer)(_MultiSelectCollectionFilter);
+function MultiSelectCollectionFilter(props) {
+  return /*#__PURE__*/_react.default.createElement(_providers.FilterTranslationProvider, {
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 118,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/_react.default.createElement(MultiSelectCollectionFilterInternal, (0, _extends2.default)({}, props, {
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 119,
+      columnNumber: 7
+    }
+  })));
+}
 MultiSelectCollectionFilter.displayName = 'MultiSelectCollectionFilter';
 //# sourceMappingURL=MultiSelectCollectionFilter.js.map

package/dist/cjs/components/MultiSelectCollectionFilter/MultiSelectCollectionFilter.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_state","_mobxReactLite","_MultiSelectFilterBase","_hooks","_react2","_providers","_useFilterCollectionStates","_useCollectionFilterInitialFetchTiming","_jsxFileName","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","_MultiSelectCollectionFilter","props","filter","collection","renderItem","initialFetchTiming","rest","container","useWixPatternsContainer","toolbar","useFilterToolbarState","buildOption","useBuildOption","collectionFilter","useState","CollectionFilterState","dropdownSelect","init","DropdownCollectionFilterState","resetOnClose","query","search","skipInitialFetch","onFocus","useCollectionFilterInitialFetchTiming","useEffect","result","keyedItems","fetchedLastPage","options","map","fixedFooter","showInitialLoader","useFilterCollectionStates","createElement","MultiSelectFilterBase","_extends2","infiniteScroll","value","onChange","target","hasMore","loadMore","fetchNextPageIfNeeded","__self","__source","fileName","lineNumber","columnNumber","MultiSelectCollectionFilter","exports","observer","displayName"],"sources":["../../../../src/components/MultiSelectCollectionFilter/MultiSelectCollectionFilter.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport {\n  CollectionFilterState,\n  DropdownCollectionFilterState,\n} from '../../state';\nimport { observer } from 'mobx-react-lite';\nimport { CollectionState, FiltersMap } from '@wix/bex-core';\nimport {\n  MultiSelectFilterBase,\n  MultiSelectFilterBaseProps,\n} from '../MultiSelectFilterBase';\nimport { ListItem, useBuildOption } from '../../hooks';\nimport { useWixPatternsContainer } from '@wix/bex-core/react';\nimport { useFilterToolbarState } from '../../providers';\nimport { useFilterCollectionStates } from '../../hooks/useFilterCollectionStates';\nimport {\n  CollectionFilterInitialFetchTimingProps,\n  useCollectionFilterInitialFetchTiming,\n} from '../../hooks/useCollectionFilterInitialFetchTiming';\n\nexport interface MultiSelectCollectionFilterProps<V, F extends FiltersMap>\n  extends Omit<MultiSelectFilterBaseProps<V>, 'options' | 'dropdownSelect'>,\n    CollectionFilterInitialFetchTimingProps {\n  /**\n   * A collection state object to fetch the dropdown items.<br>\n   * A collection created using [useFilterCollection](./?path=/story/features-filter-hooks--usefiltercollection) or [useStaticListFilterCollection](./?path=/story/features-filter-hooks--usestaticlistfiltercollection)\n   * @external\n   */\n  collection: CollectionState<V, F>;\n  /**\n   * A function that returns a [ListItemSelectProps](https://www.docs.wixdesignsystem.com/?path=/story/components-form-dropdownlistitems--listitemselect) (Optional)\n   * @external\n   */\n  renderItem?: (item: V, index: number) => ListItem;\n}\n\nfunction _MultiSelectCollectionFilter<V, F extends FiltersMap>(\n  props: MultiSelectCollectionFilterProps<V, F>,\n) {\n  const { filter, collection, renderItem, initialFetchTiming, ...rest } = props;\n\n  const container = useWixPatternsContainer();\n  const toolbar = useFilterToolbarState();\n\n  const buildOption = useBuildOption<V>({\n    filter,\n    renderItem,\n  });\n\n  const [collectionFilter] = useState(\n    () =>\n      new CollectionFilterState({\n        collection,\n        filter,\n      }),\n  );\n\n  const [{ dropdownSelect, init }] = useState(\n    () =>\n      new DropdownCollectionFilterState({\n        collectionFilter,\n        resetOnClose: true,\n        container,\n        toolbar,\n      }),\n  );\n\n  const {\n    query: { search },\n  } = collection;\n\n  const { skipInitialFetch, onFocus } =\n    useCollectionFilterInitialFetchTiming(props);\n\n  useEffect(() => init({ skipInitialFetch }), []);\n\n  const {\n    result: { keyedItems },\n    fetchedLastPage,\n  } = collection;\n\n  const options = keyedItems.map(buildOption);\n  const { fixedFooter, showInitialLoader } = useFilterCollectionStates({\n    collection,\n    fixedFooter: rest.fixedFooter,\n  });\n\n  return (\n    <MultiSelectFilterBase\n      {...rest}\n      fixedFooter={fixedFooter}\n      infiniteScroll\n      value={search.value}\n      onChange={(e) => {\n        collection.search(e.target.value);\n      }}\n      onFocus={onFocus}\n      filter={filter}\n      dropdownSelect={dropdownSelect}\n      options={options}\n      hasMore={!showInitialLoader && !fetchedLastPage}\n      loadMore={collection.fetchNextPageIfNeeded}\n    />\n  );\n}\n\nexport const MultiSelectCollectionFilter = observer(\n  _MultiSelectCollectionFilter,\n);\n\nMultiSelectCollectionFilter.displayName = 'MultiSelectCollectionFilter';\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_state","_mobxReactLite","_MultiSelectFilterBase","_hooks","_react2","_providers","_useFilterCollectionStates","_useCollectionFilterInitialFetchTiming","_jsxFileName","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","_MultiSelectCollectionFilter","props","filter","collection","renderItem","initialFetchTiming","rest","container","useWixPatternsContainer","toolbar","useFilterToolbarState","buildOption","useBuildOption","collectionFilter","useState","CollectionFilterState","dropdownSelect","init","DropdownCollectionFilterState","resetOnClose","query","search","skipInitialFetch","onFocus","useCollectionFilterInitialFetchTiming","useEffect","result","keyedItems","fetchedLastPage","options","map","fixedFooter","showInitialLoader","useFilterCollectionStates","createElement","MultiSelectFilterBase","_extends2","infiniteScroll","value","onChange","target","hasMore","loadMore","fetchNextPageIfNeeded","__self","__source","fileName","lineNumber","columnNumber","MultiSelectCollectionFilterInternal","observer","MultiSelectCollectionFilter","FilterTranslationProvider","displayName"],"sources":["../../../../src/components/MultiSelectCollectionFilter/MultiSelectCollectionFilter.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport {\n  CollectionFilterState,\n  DropdownCollectionFilterState,\n} from '../../state';\nimport { observer } from 'mobx-react-lite';\nimport { CollectionState, FiltersMap } from '@wix/bex-core';\nimport {\n  MultiSelectFilterBase,\n  MultiSelectFilterBaseProps,\n} from '../MultiSelectFilterBase';\nimport { ListItem, useBuildOption } from '../../hooks';\nimport { useWixPatternsContainer } from '@wix/bex-core/react';\nimport {\n  useFilterToolbarState,\n  FilterTranslationProvider,\n} from '../../providers';\nimport { useFilterCollectionStates } from '../../hooks/useFilterCollectionStates';\nimport {\n  CollectionFilterInitialFetchTimingProps,\n  useCollectionFilterInitialFetchTiming,\n} from '../../hooks/useCollectionFilterInitialFetchTiming';\n\nexport interface MultiSelectCollectionFilterProps<V, F extends FiltersMap>\n  extends Omit<MultiSelectFilterBaseProps<V>, 'options' | 'dropdownSelect'>,\n    CollectionFilterInitialFetchTimingProps {\n  /**\n   * A collection state object to fetch the dropdown items.<br>\n   * A collection created using [useFilterCollection](./?path=/story/features-filter-hooks--usefiltercollection) or [useStaticListFilterCollection](./?path=/story/features-filter-hooks--usestaticlistfiltercollection)\n   * @external\n   */\n  collection: CollectionState<V, F>;\n  /**\n   * A function that returns a [ListItemSelectProps](https://www.docs.wixdesignsystem.com/?path=/story/components-form-dropdownlistitems--listitemselect) (Optional)\n   * @external\n   */\n  renderItem?: (item: V, index: number) => ListItem;\n}\n\nfunction _MultiSelectCollectionFilter<V, F extends FiltersMap>(\n  props: MultiSelectCollectionFilterProps<V, F>,\n) {\n  const { filter, collection, renderItem, initialFetchTiming, ...rest } = props;\n\n  const container = useWixPatternsContainer();\n  const toolbar = useFilterToolbarState();\n\n  const buildOption = useBuildOption<V>({\n    filter,\n    renderItem,\n  });\n\n  const [collectionFilter] = useState(\n    () =>\n      new CollectionFilterState({\n        collection,\n        filter,\n      }),\n  );\n\n  const [{ dropdownSelect, init }] = useState(\n    () =>\n      new DropdownCollectionFilterState({\n        collectionFilter,\n        resetOnClose: true,\n        container,\n        toolbar,\n      }),\n  );\n\n  const {\n    query: { search },\n  } = collection;\n\n  const { skipInitialFetch, onFocus } =\n    useCollectionFilterInitialFetchTiming(props);\n\n  useEffect(() => init({ skipInitialFetch }), []);\n\n  const {\n    result: { keyedItems },\n    fetchedLastPage,\n  } = collection;\n\n  const options = keyedItems.map(buildOption);\n  const { fixedFooter, showInitialLoader } = useFilterCollectionStates({\n    collection,\n    fixedFooter: rest.fixedFooter,\n  });\n\n  return (\n    <MultiSelectFilterBase\n      {...rest}\n      fixedFooter={fixedFooter}\n      infiniteScroll\n      value={search.value}\n      onChange={(e) => {\n        collection.search(e.target.value);\n      }}\n      onFocus={onFocus}\n      filter={filter}\n      dropdownSelect={dropdownSelect}\n      options={options}\n      hasMore={!showInitialLoader && !fetchedLastPage}\n      loadMore={collection.fetchNextPageIfNeeded}\n    />\n  );\n}\n\nconst MultiSelectCollectionFilterInternal = observer(\n  _MultiSelectCollectionFilter,\n);\n\nexport function MultiSelectCollectionFilter<V, F extends FiltersMap>(\n  props: MultiSelectCollectionFilterProps<V, F>,\n) {\n  return (\n    <FilterTranslationProvider>\n      <MultiSelectCollectionFilterInternal {...props} />\n    </FilterTranslationProvider>\n  );\n}\n\nMultiSelectCollectionFilter.displayName = 'MultiSelectCollectionFilter';\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/components/MultiSelectFilterBase/MultiSelectFilterBase.js

@@ -9,6 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 var _mobxReactLite = require("mobx-react-lite");
 var _FilterRenderingContext = require("../FilterRenderingContext");
 var _useWindowFlipPopoverProps = require("../../utils/useWindowFlipPopoverProps");
+var _providers = require("../../providers");
 var _jsxFileName = "/home/builduser/work/db7ea24852bc3350/packages/cairo/dist/cjs/components/MultiSelectFilterBase/MultiSelectFilterBase.tsx";
 const inputSizeToTagSize = {
   tiny: 'tiny',
@@ -40,11 +41,11 @@ function _MultiSelectCheckboxFilterBase(props) {
   const {
     select: {
       selectedValues
-    },
-    container: {
-      translate: t
     }
   } = dropdownSelect;
+  const {
+    translate
+  } = (0, _providers.useDropdownTranslationContext)();
   const tags = selectedValues.map(keyedItem => {
     const {
       key,
@@ -64,7 +65,7 @@ function _MultiSelectCheckboxFilterBase(props) {
     },
     dataHook: `collection-filter-${filter.name}`,
     border: "round",
-    placeholder: t('cairo.selectPlaceholder'),
+    placeholder: translate('placeholder'),
     tags: tags,
     size: size,
     onClose: () => {
@@ -86,7 +87,7 @@ function _MultiSelectCheckboxFilterBase(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 83,
+      lineNumber: 84,
       columnNumber: 5
     }
   }));

package/dist/cjs/components/MultiSelectFilterBase/MultiSelectFilterBase.js.map

@@ -1 +1 @@
-{"version":3,"names":["_designSystem","require","_react","_interopRequireDefault","_mobxReactLite","_FilterRenderingContext","_useWindowFlipPopoverProps","_jsxFileName","inputSizeToTagSize","tiny","small","medium","large","_MultiSelectCheckboxFilterBase","props","renderTag","filter","dropdownSelect","onSelect","onRemoveTag","size","popoverProps","rest","location","useFilterRenderingContext","windowFlipPopoverProps","inputRef","useWindowFlipPopoverProps","effectiveSize","select","selectedValues","container","translate","t","tags","map","keyedItem","key","item","tag","id","label","itemName","default","createElement","MultiSelect","_extends2","ref","current","dataHook","name","border","placeholder","onClose","close","option","set","tagId","deleteKey","__self","__source","fileName","lineNumber","columnNumber","MultiSelectFilterBase","exports","observer"],"sources":["../../../../src/components/MultiSelectFilterBase/MultiSelectFilterBase.tsx"],"sourcesContent":["import {\n  DropdownLayoutOption,\n  DropdownLayoutValueOption,\n  InputSize,\n  MultiSelect,\n  MultiSelectProps,\n  MultiSelectTag,\n  TagProps,\n  TagSize,\n} from '@wix/design-system';\nimport React from 'react';\nimport { observer } from 'mobx-react-lite';\nimport { Filter, KeyedItem } from '@wix/bex-core';\nimport { DropdownSelectState } from '../../state';\nimport { FilterProps } from '../../model';\nimport { useFilterRenderingContext } from '../FilterRenderingContext';\nimport { useWindowFlipPopoverProps } from '../../utils/useWindowFlipPopoverProps';\n\nexport type KeyedItemOption<T> = DropdownLayoutValueOption & {\n  keyedItem: KeyedItem<T>;\n};\n\nconst inputSizeToTagSize: Record<InputSize, TagSize> = {\n  tiny: 'tiny',\n  small: 'tiny',\n  medium: 'small',\n  large: 'medium',\n};\n\nexport type MultiSelectFilterBaseOption<T> =\n  | KeyedItemOption<T>\n  | DropdownLayoutOption;\n\nexport interface MultiSelectFilterBaseProps<V>\n  extends Partial<MultiSelectProps>,\n    FilterProps<V[]> {\n  filter: Filter<V[]>;\n  options: MultiSelectFilterBaseOption<V>[];\n  renderTag?: (item: V) => TagProps;\n  dropdownSelect: DropdownSelectState<V>;\n  placeholder?: string;\n}\n\nfunction _MultiSelectCheckboxFilterBase<V>(\n  props: MultiSelectFilterBaseProps<V>,\n) {\n  const {\n    renderTag,\n    filter,\n    dropdownSelect,\n    onSelect,\n    onRemoveTag,\n    size,\n    popoverProps,\n    ...rest\n  } = props;\n\n  const { location } = useFilterRenderingContext();\n  const { windowFlipPopoverProps, inputRef } = useWindowFlipPopoverProps({\n    popoverProps,\n  });\n\n  const effectiveSize: InputSize =\n    size || (location === 'panel' ? 'small' : 'medium');\n\n  const {\n    select: { selectedValues },\n    container: { translate: t },\n  } = dropdownSelect;\n\n  const tags: MultiSelectTag[] = selectedValues.map((keyedItem) => {\n    const { key, item } = keyedItem;\n    const tag = renderTag?.(item) ?? {};\n    return {\n      id: key,\n      label: filter.itemName(item),\n      size: inputSizeToTagSize[effectiveSize],\n      ...tag,\n    };\n  });\n\n  return (\n    <MultiSelect\n      inputRef={(ref) => {\n        inputRef.current = ref;\n      }}\n      dataHook={`collection-filter-${filter.name}`}\n      border=\"round\"\n      placeholder={t('cairo.selectPlaceholder')}\n      tags={tags}\n      size={size}\n      onClose={() => {\n        dropdownSelect.close();\n      }}\n      onSelect={(option) => {\n        const { keyedItem } = option as KeyedItemOption<V>;\n        dropdownSelect.set(keyedItem);\n        onSelect?.(option);\n      }}\n      onRemoveTag={(tagId) => {\n        dropdownSelect.deleteKey(tagId);\n        onRemoveTag?.(tagId);\n      }}\n      popoverProps={windowFlipPopoverProps}\n      {...rest}\n    />\n  );\n}\n\nexport const MultiSelectFilterBase = observer(_MultiSelectCheckboxFilterBase);\n"],"mappings":";;;;;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AAUA,IAAAC,MAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,cAAA,GAAAH,OAAA;AAIA,IAAAI,uBAAA,GAAAJ,OAAA;AACA,IAAAK,0BAAA,GAAAL,OAAA;AAAkF,IAAAM,YAAA;AAMlF,MAAMC,kBAA8C,GAAG;EACrDC,IAAI,EAAE,MAAM;EACZC,KAAK,EAAE,MAAM;EACbC,MAAM,EAAE,OAAO;EACfC,KAAK,EAAE;AACT,CAAC;AAgBD,SAASC,8BAA8BA,CACrCC,KAAoC,EACpC;EACA,MAAM;IACJC,SAAS;IACTC,MAAM;IACNC,cAAc;IACdC,QAAQ;IACRC,WAAW;IACXC,IAAI;IACJC,YAAY;IACZ,GAAGC;EACL,CAAC,GAAGR,KAAK;EAET,MAAM;IAAES;EAAS,CAAC,GAAG,IAAAC,iDAAyB,EAAC,CAAC;EAChD,MAAM;IAAEC,sBAAsB;IAAEC;EAAS,CAAC,GAAG,IAAAC,oDAAyB,EAAC;IACrEN;EACF,CAAC,CAAC;EAEF,MAAMO,aAAwB,GAC5BR,IAAI,KAAKG,QAAQ,KAAK,OAAO,GAAG,OAAO,GAAG,QAAQ,CAAC;EAErD,MAAM;IACJM,MAAM,EAAE;MAAEC;IAAe,CAAC;IAC1BC,SAAS,EAAE;MAAEC,SAAS,EAAEC;IAAE;EAC5B,CAAC,GAAGhB,cAAc;EAElB,MAAMiB,IAAsB,GAAGJ,cAAc,CAACK,GAAG,CAAEC,SAAS,IAAK;IAC/D,MAAM;MAAEC,GAAG;MAAEC;IAAK,CAAC,GAAGF,SAAS;IAC/B,MAAMG,GAAG,GAAG,CAAAxB,SAAS,oBAATA,SAAS,CAAGuB,IAAI,CAAC,KAAI,CAAC,CAAC;IACnC,OAAO;MACLE,EAAE,EAAEH,GAAG;MACPI,KAAK,EAAEzB,MAAM,CAAC0B,QAAQ,CAACJ,IAAI,CAAC;MAC5BlB,IAAI,EAAEZ,kBAAkB,CAACoB,aAAa,CAAC;MACvC,GAAGW;IACL,CAAC;EACH,CAAC,CAAC;EAEF,oBACErC,MAAA,CAAAyC,OAAA,CAAAC,aAAA,CAAC5C,aAAA,CAAA6C,WAAW,MAAAC,SAAA,CAAAH,OAAA;IACVjB,QAAQ,EAAGqB,GAAG,IAAK;MACjBrB,QAAQ,CAACsB,OAAO,GAAGD,GAAG;IACxB,CAAE;IACFE,QAAQ,EAAE,qBAAqBjC,MAAM,CAACkC,IAAI,EAAG;IAC7CC,MAAM,EAAC,OAAO;IACdC,WAAW,EAAEnB,CAAC,CAAC,yBAAyB,CAAE;IAC1CC,IAAI,EAAEA,IAAK;IACXd,IAAI,EAAEA,IAAK;IACXiC,OAAO,EAAEA,CAAA,KAAM;MACbpC,cAAc,CAACqC,KAAK,CAAC,CAAC;IACxB,CAAE;IACFpC,QAAQ,EAAGqC,MAAM,IAAK;MACpB,MAAM;QAAEnB;MAAU,CAAC,GAAGmB,MAA4B;MAClDtC,cAAc,CAACuC,GAAG,CAACpB,SAAS,CAAC;MAC7BlB,QAAQ,YAARA,QAAQ,CAAGqC,MAAM,CAAC;IACpB,CAAE;IACFpC,WAAW,EAAGsC,KAAK,IAAK;MACtBxC,cAAc,CAACyC,SAAS,CAACD,KAAK,CAAC;MAC/BtC,WAAW,YAAXA,WAAW,CAAGsC,KAAK,CAAC;IACtB,CAAE;IACFpC,YAAY,EAAEI;EAAuB,GACjCH,IAAI;IAAAqC,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAtD,YAAA;MAAAuD,UAAA;MAAAC,YAAA;IAAA;EAAA,EACT,CAAC;AAEN;AAEO,MAAMC,qBAAqB,GAAAC,OAAA,CAAAD,qBAAA,GAAG,IAAAE,uBAAQ,EAACrD,8BAA8B,CAAC","ignoreList":[]}
+{"version":3,"names":["_designSystem","require","_react","_interopRequireDefault","_mobxReactLite","_FilterRenderingContext","_useWindowFlipPopoverProps","_providers","_jsxFileName","inputSizeToTagSize","tiny","small","medium","large","_MultiSelectCheckboxFilterBase","props","renderTag","filter","dropdownSelect","onSelect","onRemoveTag","size","popoverProps","rest","location","useFilterRenderingContext","windowFlipPopoverProps","inputRef","useWindowFlipPopoverProps","effectiveSize","select","selectedValues","translate","useDropdownTranslationContext","tags","map","keyedItem","key","item","tag","id","label","itemName","default","createElement","MultiSelect","_extends2","ref","current","dataHook","name","border","placeholder","onClose","close","option","set","tagId","deleteKey","__self","__source","fileName","lineNumber","columnNumber","MultiSelectFilterBase","exports","observer"],"sources":["../../../../src/components/MultiSelectFilterBase/MultiSelectFilterBase.tsx"],"sourcesContent":["import {\n  DropdownLayoutOption,\n  DropdownLayoutValueOption,\n  InputSize,\n  MultiSelect,\n  MultiSelectProps,\n  MultiSelectTag,\n  TagProps,\n  TagSize,\n} from '@wix/design-system';\nimport React from 'react';\nimport { observer } from 'mobx-react-lite';\nimport { Filter, KeyedItem } from '@wix/bex-core';\nimport { DropdownSelectState } from '../../state';\nimport { FilterProps } from '../../model';\nimport { useFilterRenderingContext } from '../FilterRenderingContext';\nimport { useWindowFlipPopoverProps } from '../../utils/useWindowFlipPopoverProps';\nimport { useDropdownTranslationContext } from '../../providers';\n\nexport type KeyedItemOption<T> = DropdownLayoutValueOption & {\n  keyedItem: KeyedItem<T>;\n};\n\nconst inputSizeToTagSize: Record<InputSize, TagSize> = {\n  tiny: 'tiny',\n  small: 'tiny',\n  medium: 'small',\n  large: 'medium',\n};\n\nexport type MultiSelectFilterBaseOption<T> =\n  | KeyedItemOption<T>\n  | DropdownLayoutOption;\n\nexport interface MultiSelectFilterBaseProps<V>\n  extends Partial<MultiSelectProps>,\n    FilterProps<V[]> {\n  filter: Filter<V[]>;\n  options: MultiSelectFilterBaseOption<V>[];\n  renderTag?: (item: V) => TagProps;\n  dropdownSelect: DropdownSelectState<V>;\n  placeholder?: string;\n}\n\nfunction _MultiSelectCheckboxFilterBase<V>(\n  props: MultiSelectFilterBaseProps<V>,\n) {\n  const {\n    renderTag,\n    filter,\n    dropdownSelect,\n    onSelect,\n    onRemoveTag,\n    size,\n    popoverProps,\n    ...rest\n  } = props;\n\n  const { location } = useFilterRenderingContext();\n  const { windowFlipPopoverProps, inputRef } = useWindowFlipPopoverProps({\n    popoverProps,\n  });\n\n  const effectiveSize: InputSize =\n    size || (location === 'panel' ? 'small' : 'medium');\n\n  const {\n    select: { selectedValues },\n  } = dropdownSelect;\n  const { translate } = useDropdownTranslationContext();\n\n  const tags: MultiSelectTag[] = selectedValues.map((keyedItem) => {\n    const { key, item } = keyedItem;\n    const tag = renderTag?.(item) ?? {};\n    return {\n      id: key,\n      label: filter.itemName(item),\n      size: inputSizeToTagSize[effectiveSize],\n      ...tag,\n    };\n  });\n\n  return (\n    <MultiSelect\n      inputRef={(ref) => {\n        inputRef.current = ref;\n      }}\n      dataHook={`collection-filter-${filter.name}`}\n      border=\"round\"\n      placeholder={translate('placeholder')}\n      tags={tags}\n      size={size}\n      onClose={() => {\n        dropdownSelect.close();\n      }}\n      onSelect={(option) => {\n        const { keyedItem } = option as KeyedItemOption<V>;\n        dropdownSelect.set(keyedItem);\n        onSelect?.(option);\n      }}\n      onRemoveTag={(tagId) => {\n        dropdownSelect.deleteKey(tagId);\n        onRemoveTag?.(tagId);\n      }}\n      popoverProps={windowFlipPopoverProps}\n      {...rest}\n    />\n  );\n}\n\nexport const MultiSelectFilterBase = observer(_MultiSelectCheckboxFilterBase);\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/components/NestedTable/NestedTablePlaceholderStatesRow.st.css.js

@@ -5,14 +5,14 @@ exports.vars = exports.style = exports.stVars = exports.st = exports.namespace =
 var _stylableEsmRuntime = require("../../stylable-esm-runtime.js");
 // @ts-nocheck
 
-var _namespace_ = "NestedTablePlaceholderStatesRow1945488223";
+var _namespace_ = "NestedTablePlaceholderStatesRow2005447920";
 var _style_ = _stylableEsmRuntime.classesRuntime.bind(null, _namespace_);
 var cssStates = exports.cssStates = _stylableEsmRuntime.statesRuntime.bind(null, _namespace_);
 var style = exports.style = _style_;
 var st = exports.st = _style_;
 var namespace = exports.namespace = _namespace_;
 var classes = exports.classes = {
-  "root": "NestedTablePlaceholderStatesRow1945488223__root"
+  "root": "NestedTablePlaceholderStatesRow2005447920__root"
 };
 var keyframes = exports.keyframes = {};
 var layers = exports.layers = {};

package/dist/cjs/components/NestedTable/NestedTablePlaceholderStatesRow.st.css.js.map

@@ -1 +1 @@
-{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../src/components/NestedTable/NestedTablePlaceholderStatesRow.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"NestedTablePlaceholderStatesRow1945488223\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"NestedTablePlaceholderStatesRow1945488223__root\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,2CAA2C;AAC7D,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAAK,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AACnB,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC;AAAiD,CAAC;AACxE,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../src/components/NestedTable/NestedTablePlaceholderStatesRow.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"NestedTablePlaceholderStatesRow2005447920\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"NestedTablePlaceholderStatesRow2005447920__root\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,2CAA2C;AAC7D,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAAK,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AACnB,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC;AAAiD,CAAC;AACxE,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG,CAAC,CAAC","ignoreList":[]}

package/dist/cjs/components/NestedTable/NestedTableRow.st.css.js

@@ -5,17 +5,17 @@ exports.vars = exports.style = exports.stVars = exports.st = exports.namespace =
 var _stylableEsmRuntime = require("../../stylable-esm-runtime.js");
 // @ts-nocheck
 
-var _namespace_ = "NestedTableRow1128914938";
+var _namespace_ = "NestedTableRow850433158";
 var _style_ = _stylableEsmRuntime.classesRuntime.bind(null, _namespace_);
 var cssStates = exports.cssStates = _stylableEsmRuntime.statesRuntime.bind(null, _namespace_);
 var style = exports.style = _style_;
 var st = exports.st = _style_;
 var namespace = exports.namespace = _namespace_;
 var classes = exports.classes = {
-  "root": "NestedTableRow1128914938__root",
-  "firstLevel": "NestedTableRow1128914938__firstLevel",
-  "placeholder": "NestedTableRow1128914938__placeholder",
-  "parentHovered": "NestedTableRow1128914938__parentHovered"
+  "root": "NestedTableRow850433158__root",
+  "firstLevel": "NestedTableRow850433158__firstLevel",
+  "placeholder": "NestedTableRow850433158__placeholder",
+  "parentHovered": "NestedTableRow850433158__parentHovered"
 };
 var keyframes = exports.keyframes = {};
 var layers = exports.layers = {};

package/dist/cjs/components/NestedTable/NestedTableRow.st.css.js.map

@@ -1 +1 @@
-{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../src/components/NestedTable/NestedTableRow.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"NestedTableRow1128914938\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"NestedTableRow1128914938__root\",\"firstLevel\":\"NestedTableRow1128914938__firstLevel\",\"placeholder\":\"NestedTableRow1128914938__placeholder\",\"parentHovered\":\"NestedTableRow1128914938__parentHovered\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,0BAA0B;AAC5C,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAAK,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AACnB,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC,gCAAgC;EAAC,YAAY,EAAC,sCAAsC;EAAC,aAAa,EAAC,uCAAuC;EAAC,eAAe,EAAC;AAAyC,CAAC;AAC3N,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../src/components/NestedTable/NestedTableRow.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"NestedTableRow850433158\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"NestedTableRow850433158__root\",\"firstLevel\":\"NestedTableRow850433158__firstLevel\",\"placeholder\":\"NestedTableRow850433158__placeholder\",\"parentHovered\":\"NestedTableRow850433158__parentHovered\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,yBAAyB;AAC3C,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAAK,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AACnB,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC,+BAA+B;EAAC,YAAY,EAAC,qCAAqC;EAAC,aAAa,EAAC,sCAAsC;EAAC,eAAe,EAAC;AAAwC,CAAC;AACvN,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG,CAAC,CAAC","ignoreList":[]}