@activecollab/components 1.0.309 → 1.0.310

package/dist/cjs/components/Filter/Filter.js

@@ -7,14 +7,14 @@ Object.defineProperty(exports, "__esModule", {
 exports.Filter = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactFocusLock = require("react-focus-lock");
-var _Submenu = require("./Submenu");
-var _StartMenu = require("./StartMenu");
+var _Button = require("../Button");
+var _CounterButton = require("../CounterButton");
 var _Icons = require("../Icons");
-var _Transitions = require("../Transitions");
 var _Select = require("../Select");
-var _CounterButton = require("../CounterButton");
-var _Button = require("../Button");
+var _Transitions = require("../Transitions");
+var _StartMenu = require("./StartMenu");
 var _Styles = require("./Styles");
+var _Submenu = require("./Submenu");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e2) { throw _e2; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e3) { didErr = true; err = _e3; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
@@ -67,6 +67,12 @@ var Filter = function Filter(_ref) {
     _useState12 = _slicedToArray(_useState11, 2),
     filter = _useState12[0],
     setFilter = _useState12[1];
+  var _useState13 = (0, _react.useState)(true),
+    _useState14 = _slicedToArray(_useState13, 2),
+    calculateTrigger = _useState14[0],
+    setCalculateTrigger = _useState14[1];
+  // const targetEl = useRef<any>();
+
   (0, _react.useEffect)(function () {
     if (Object.keys(selected).length > 0 || Object.keys(filter).length > 0) {
       setFilter(selected);
@@ -92,6 +98,13 @@ var Filter = function Filter(_ref) {
     setMenu("index");
     setIsLeft(false);
   }, []);
+
+  // useEffect(() => {
+  //   if (targetEl.current) {
+  //     targetEl.current.style.height = "fit-content";
+  //   }
+  // }, [calculateTrigger]);
+
   var handleChange = (0, _react.useCallback)(function (selectedArray) {
     var newFilters = {};
     if (selectedArray.length) {
@@ -100,9 +113,10 @@ var Filter = function Filter(_ref) {
       newFilters = _objectSpread({}, filter);
       delete newFilters[menu];
     }
+    setCalculateTrigger(!calculateTrigger);
     setFilter(newFilters);
     onChange(newFilters);
-  }, [filter, menu, onChange]);
+  }, [filter, menu, onChange, calculateTrigger]);
   var handleClearAll = (0, _react.useCallback)(function (event) {
     event.stopPropagation();
     setFilter({});
@@ -113,7 +127,8 @@ var Filter = function Filter(_ref) {
     delete newFilters[menu];
     setFilter(newFilters);
     onChange(newFilters);
-  }, [filter, menu, onChange]);
+    setCalculateTrigger(!calculateTrigger);
+  }, [filter, menu, onChange, calculateTrigger]);
   var count = (0, _react.useMemo)(function () {
     var c = 0;
     Object.values(filter).forEach(function (entry) {
@@ -198,12 +213,12 @@ var Filter = function Filter(_ref) {
       }
     }, /*#__PURE__*/_react.default.createElement(_Submenu.Submenu, {
       title: title,
-      onBack: setIndex
-      // onHeightChange={setHeight}
-      ,
+      onBack: setIndex,
+      onHeightChange: setHeight,
       style: {
         width: width
-      }
+      },
+      indexPage: menu === "index"
     }, /*#__PURE__*/_react.default.createElement(_reactFocusLock.MoveFocusInside, {
       disabled: enteredMenu !== id
     }, /*#__PURE__*/_react.default.createElement(_Select.Select, {

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

@@ -1 +1 @@
-{"version":3,"file":"Filter.js","names":["Filter","data","selected","label","clearAllText","resetLabel","onChange","width","noResultText","emptyFilterText","children","useState","open","setOpen","menu","setMenu","isLeft","setIsLeft","height","setHeight","enteredMenu","setEnteredMenu","filter","setFilter","useEffect","Object","keys","length","handleOpen","useCallback","handleClose","handleHeight","element","offsetHeight","handleItemClick","value","setIndex","handleChange","selectedArray","newFilters","handleClearAll","event","stopPropagation","handleReset","count","useMemo","c","values","forEach","entry","shouldRenderSubmenus","submenu","map","index","id","title","searchPlaceholder","disableInternalSort","isSingleSelect","defaultValue","Boolean"],"sources":["../../../../src/components/Filter/Filter.tsx"],"sourcesContent":["import React, { FC, useCallback, useEffect, useMemo, useState } from \"react\";\nimport { MoveFocusInside } from \"react-focus-lock\";\nimport { Submenu } from \"./Submenu\";\nimport { StartMenu } from \"./StartMenu\";\nimport { FilterIcon } from \"../Icons\";\nimport { ResizeTransition, SlideLeftRightTransition } from \"../Transitions\";\nimport { IOptionGroupProps, IOptionItemProps, Select } from \"../Select\";\nimport { CounterButton } from \"../CounterButton\";\nimport { Button } from \"../Button\";\nimport { StyledMenu, StyledMenuFooter } from \"./Styles\";\n\nexport type DataType = {\n  id: number | string;\n  title: string;\n  searchPlaceholder?: string;\n  disableInternalSort?: boolean;\n  submenu: Array<IOptionGroupProps | IOptionItemProps>;\n  isSingleSelect?: boolean;\n  defaultValue?: string;\n};\n\nexport type SelectedType = {\n  [key: number | string]: Array<string>;\n};\n\nexport interface FilterProps {\n  /** Data rendered in submenus */\n  data: Array<DataType>;\n  /** Selected data inside submenus */\n  selected?: SelectedType;\n  /** Main filter label */\n  label: string;\n  /** Filter width */\n  width?: number;\n  /** Text displayed for the tooltip of clear all button */\n  clearAllText: string;\n  /** Handler for changes on the filter */\n  onChange: (selected: SelectedType) => void;\n  /** Label for reset button inside submenu */\n  resetLabel?: string;\n  /** Text to show when search results are empty */\n  noResultText: string;\n  /** Text to show when there are no submenus to display */\n  emptyFilterText?: string;\n}\n\nexport const Filter: FC<FilterProps> = ({\n  data,\n  selected = {},\n  label,\n  clearAllText,\n  resetLabel = \"Reset\",\n  onChange,\n  width = 260,\n  noResultText,\n  emptyFilterText,\n  children,\n}) => {\n  const [open, setOpen] = useState(false);\n  const [menu, setMenu] = useState<number | string>(\"index\");\n  const [isLeft, setIsLeft] = useState(true);\n  const [height, setHeight] = useState(0);\n  const [enteredMenu, setEnteredMenu] = useState<number | string>(\"index\");\n  const [filter, setFilter] = useState<SelectedType>(() => selected);\n\n  useEffect(() => {\n    if (Object.keys(selected).length > 0 || Object.keys(filter).length > 0) {\n      setFilter(selected);\n    }\n  }, [selected, filter]);\n\n  const handleOpen = useCallback(() => {\n    setOpen(true);\n  }, []);\n\n  const handleClose = useCallback(() => {\n    setOpen(false);\n    setMenu(\"index\");\n    setHeight(0);\n  }, []);\n\n  const handleHeight = useCallback((element) => {\n    setHeight(element?.offsetHeight ?? 0);\n  }, []);\n\n  const handleItemClick = useCallback((value) => {\n    setMenu(value);\n    setIsLeft(true);\n  }, []);\n\n  const setIndex = useCallback(() => {\n    setMenu(\"index\");\n    setIsLeft(false);\n  }, []);\n\n  const handleChange = useCallback(\n    (selectedArray) => {\n      let newFilters = {};\n      if (selectedArray.length) {\n        newFilters = {\n          ...filter,\n          [menu]: selectedArray,\n        };\n      } else {\n        newFilters = { ...filter };\n        delete newFilters[menu];\n      }\n\n      setFilter(newFilters);\n      onChange(newFilters);\n    },\n    [filter, menu, onChange]\n  );\n\n  const handleClearAll = useCallback(\n    (event) => {\n      event.stopPropagation();\n      setFilter({});\n      onChange({});\n    },\n    [onChange]\n  );\n\n  const handleReset = useCallback(() => {\n    const newFilters = { ...filter };\n    delete newFilters[menu];\n    setFilter(newFilters);\n    onChange(newFilters);\n  }, [filter, menu, onChange]);\n\n  const count = useMemo(() => {\n    let c = 0;\n    Object.values(filter).forEach((entry) => (c += entry.length));\n    return c;\n  }, [filter]);\n\n  const shouldRenderSubmenus = useMemo(() => {\n    if (data.length === 0) {\n      return false;\n    }\n\n    for (const entry of data) {\n      if (entry.submenu?.length > 1) {\n        return true;\n      }\n    }\n\n    return false;\n  }, [data]);\n\n  return (\n    <StyledMenu\n      open={open}\n      onOpen={handleOpen}\n      onClose={handleClose}\n      position=\"bottom-end\"\n      target={\n        <CounterButton\n          active={open}\n          label={label}\n          icon={<FilterIcon />}\n          counter={count}\n          tooltipText={clearAllText}\n          onClearAll={handleClearAll}\n        />\n      }\n    >\n      <ResizeTransition in>\n        <div style={{ height, width }}>\n          <SlideLeftRightTransition\n            in={menu === \"index\"}\n            direction={isLeft ? \"left\" : \"right\"}\n            onEnter={handleHeight}\n            onEntered={() => setEnteredMenu(\"index\")}\n          >\n            <MoveFocusInside>\n              <StartMenu\n                data={data}\n                selected={filter}\n                style={{ width }}\n                onHeightChange={setHeight}\n                onItemClick={handleItemClick}\n                shouldRenderSubmenus={shouldRenderSubmenus}\n                emptyFilterText={emptyFilterText}\n              >\n                {children}\n              </StartMenu>\n            </MoveFocusInside>\n          </SlideLeftRightTransition>\n          {shouldRenderSubmenus &&\n            data.map(\n              (\n                {\n                  id,\n                  title,\n                  submenu,\n                  searchPlaceholder,\n                  disableInternalSort,\n                  isSingleSelect,\n                  defaultValue,\n                }: DataType,\n                index: number\n              ) => (\n                <SlideLeftRightTransition\n                  key={`filter-submenu-${index}`}\n                  in={menu === id}\n                  direction={isLeft ? \"left\" : \"right\"}\n                  onEnter={handleHeight}\n                  onEntered={() => setEnteredMenu(id)}\n                >\n                  <Submenu\n                    title={title}\n                    onBack={setIndex}\n                    // onHeightChange={setHeight}\n                    style={{ width }}\n                  >\n                    <MoveFocusInside disabled={enteredMenu !== id}>\n                      <Select\n                        options={submenu}\n                        selected={filter[id]}\n                        onChange={handleChange}\n                        type={isSingleSelect ? \"single\" : \"multiple\"}\n                        autoHeightMax={255}\n                        placeholder={searchPlaceholder}\n                        noResultText={noResultText}\n                        keepSameOptionsOrder={Boolean(submenu.length <= 7)}\n                        disableSearch={Boolean(submenu.length <= 7)}\n                        disabledInternalSort={disableInternalSort}\n                        defaultValue={defaultValue}\n                      />\n                      {filter[id]?.length ? (\n                        <StyledMenuFooter>\n                          <Button\n                            variant=\"text colored\"\n                            size=\"small\"\n                            onClick={handleReset}\n                          >\n                            {resetLabel}\n                          </Button>\n                        </StyledMenuFooter>\n                      ) : null}\n                    </MoveFocusInside>\n                  </Submenu>\n                </SlideLeftRightTransition>\n              )\n            )}\n        </div>\n      </ResizeTransition>\n    </StyledMenu>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"Filter.js","names":["Filter","data","selected","label","clearAllText","resetLabel","onChange","width","noResultText","emptyFilterText","children","useState","open","setOpen","menu","setMenu","isLeft","setIsLeft","height","setHeight","enteredMenu","setEnteredMenu","filter","setFilter","calculateTrigger","setCalculateTrigger","useEffect","Object","keys","length","handleOpen","useCallback","handleClose","handleHeight","element","offsetHeight","handleItemClick","value","setIndex","handleChange","selectedArray","newFilters","handleClearAll","event","stopPropagation","handleReset","count","useMemo","c","values","forEach","entry","shouldRenderSubmenus","submenu","map","index","id","title","searchPlaceholder","disableInternalSort","isSingleSelect","defaultValue","Boolean"],"sources":["../../../../src/components/Filter/Filter.tsx"],"sourcesContent":["import React, { FC, useCallback, useEffect, useMemo, useState } from \"react\";\nimport { MoveFocusInside } from \"react-focus-lock\";\nimport { Button } from \"../Button\";\nimport { CounterButton } from \"../CounterButton\";\nimport { FilterIcon } from \"../Icons\";\nimport { IOptionGroupProps, IOptionItemProps, Select } from \"../Select\";\nimport { ResizeTransition, SlideLeftRightTransition } from \"../Transitions\";\nimport { StartMenu } from \"./StartMenu\";\nimport { StyledMenu, StyledMenuFooter } from \"./Styles\";\nimport { Submenu } from \"./Submenu\";\n\nexport type DataType = {\n  id: number | string;\n  title: string;\n  searchPlaceholder?: string;\n  disableInternalSort?: boolean;\n  submenu: Array<IOptionGroupProps | IOptionItemProps>;\n  isSingleSelect?: boolean;\n  defaultValue?: string;\n};\n\nexport type SelectedType = {\n  [key: number | string]: Array<string>;\n};\n\nexport interface FilterProps {\n  /** Data rendered in submenus */\n  data: Array<DataType>;\n  /** Selected data inside submenus */\n  selected?: SelectedType;\n  /** Main filter label */\n  label: string;\n  /** Filter width */\n  width?: number;\n  /** Text displayed for the tooltip of clear all button */\n  clearAllText: string;\n  /** Handler for changes on the filter */\n  onChange: (selected: SelectedType) => void;\n  /** Label for reset button inside submenu */\n  resetLabel?: string;\n  /** Text to show when search results are empty */\n  noResultText: string;\n  /** Text to show when there are no submenus to display */\n  emptyFilterText?: string;\n}\n\nexport const Filter: FC<FilterProps> = ({\n  data,\n  selected = {},\n  label,\n  clearAllText,\n  resetLabel = \"Reset\",\n  onChange,\n  width = 260,\n  noResultText,\n  emptyFilterText,\n  children,\n}) => {\n  const [open, setOpen] = useState(false);\n  const [menu, setMenu] = useState<number | string>(\"index\");\n  const [isLeft, setIsLeft] = useState(true);\n  const [height, setHeight] = useState(0);\n  const [enteredMenu, setEnteredMenu] = useState<number | string>(\"index\");\n  const [filter, setFilter] = useState<SelectedType>(() => selected);\n  const [calculateTrigger, setCalculateTrigger] = useState<boolean>(true);\n  // const targetEl = useRef<any>();\n\n  useEffect(() => {\n    if (Object.keys(selected).length > 0 || Object.keys(filter).length > 0) {\n      setFilter(selected);\n    }\n  }, [selected, filter]);\n\n  const handleOpen = useCallback(() => {\n    setOpen(true);\n  }, []);\n\n  const handleClose = useCallback(() => {\n    setOpen(false);\n    setMenu(\"index\");\n    setHeight(0);\n  }, []);\n\n  const handleHeight = useCallback((element) => {\n    setHeight(element?.offsetHeight ?? 0);\n  }, []);\n\n  const handleItemClick = useCallback((value) => {\n    setMenu(value);\n    setIsLeft(true);\n  }, []);\n\n  const setIndex = useCallback(() => {\n    setMenu(\"index\");\n    setIsLeft(false);\n  }, []);\n\n  // useEffect(() => {\n  //   if (targetEl.current) {\n  //     targetEl.current.style.height = \"fit-content\";\n  //   }\n  // }, [calculateTrigger]);\n\n  const handleChange = useCallback(\n    (selectedArray) => {\n      let newFilters = {};\n      if (selectedArray.length) {\n        newFilters = {\n          ...filter,\n          [menu]: selectedArray,\n        };\n      } else {\n        newFilters = { ...filter };\n        delete newFilters[menu];\n      }\n      setCalculateTrigger(!calculateTrigger);\n      setFilter(newFilters);\n      onChange(newFilters);\n    },\n    [filter, menu, onChange, calculateTrigger]\n  );\n\n  const handleClearAll = useCallback(\n    (event) => {\n      event.stopPropagation();\n      setFilter({});\n      onChange({});\n    },\n    [onChange]\n  );\n\n  const handleReset = useCallback(() => {\n    const newFilters = { ...filter };\n    delete newFilters[menu];\n    setFilter(newFilters);\n    onChange(newFilters);\n    setCalculateTrigger(!calculateTrigger);\n  }, [filter, menu, onChange, calculateTrigger]);\n\n  const count = useMemo(() => {\n    let c = 0;\n    Object.values(filter).forEach((entry) => (c += entry.length));\n    return c;\n  }, [filter]);\n\n  const shouldRenderSubmenus = useMemo(() => {\n    if (data.length === 0) {\n      return false;\n    }\n\n    for (const entry of data) {\n      if (entry.submenu?.length > 1) {\n        return true;\n      }\n    }\n\n    return false;\n  }, [data]);\n\n  return (\n    <StyledMenu\n      open={open}\n      onOpen={handleOpen}\n      onClose={handleClose}\n      position=\"bottom-end\"\n      target={\n        <CounterButton\n          active={open}\n          label={label}\n          icon={<FilterIcon />}\n          counter={count}\n          tooltipText={clearAllText}\n          onClearAll={handleClearAll}\n        />\n      }\n    >\n      <ResizeTransition in>\n        <div style={{ height, width }}>\n          <SlideLeftRightTransition\n            in={menu === \"index\"}\n            direction={isLeft ? \"left\" : \"right\"}\n            onEnter={handleHeight}\n            onEntered={() => setEnteredMenu(\"index\")}\n          >\n            <MoveFocusInside>\n              <StartMenu\n                data={data}\n                selected={filter}\n                style={{ width }}\n                onHeightChange={setHeight}\n                onItemClick={handleItemClick}\n                shouldRenderSubmenus={shouldRenderSubmenus}\n                emptyFilterText={emptyFilterText}\n              >\n                {children}\n              </StartMenu>\n            </MoveFocusInside>\n          </SlideLeftRightTransition>\n          {shouldRenderSubmenus &&\n            data.map(\n              (\n                {\n                  id,\n                  title,\n                  submenu,\n                  searchPlaceholder,\n                  disableInternalSort,\n                  isSingleSelect,\n                  defaultValue,\n                }: DataType,\n                index: number\n              ) => (\n                <SlideLeftRightTransition\n                  key={`filter-submenu-${index}`}\n                  in={menu === id}\n                  direction={isLeft ? \"left\" : \"right\"}\n                  onEnter={handleHeight}\n                  onEntered={() => setEnteredMenu(id)}\n                >\n                  <Submenu\n                    title={title}\n                    onBack={setIndex}\n                    onHeightChange={setHeight}\n                    style={{ width }}\n                    indexPage={menu === \"index\"}\n                  >\n                    <MoveFocusInside disabled={enteredMenu !== id}>\n                      <Select\n                        options={submenu}\n                        selected={filter[id]}\n                        onChange={handleChange}\n                        type={isSingleSelect ? \"single\" : \"multiple\"}\n                        autoHeightMax={255}\n                        placeholder={searchPlaceholder}\n                        noResultText={noResultText}\n                        keepSameOptionsOrder={Boolean(submenu.length <= 7)}\n                        disableSearch={Boolean(submenu.length <= 7)}\n                        disabledInternalSort={disableInternalSort}\n                        defaultValue={defaultValue}\n                      />\n                      {filter[id]?.length ? (\n                        <StyledMenuFooter>\n                          <Button\n                            variant=\"text colored\"\n                            size=\"small\"\n                            onClick={handleReset}\n                          >\n                            {resetLabel}\n                          </Button>\n                        </StyledMenuFooter>\n                      ) : null}\n                    </MoveFocusInside>\n                  </Submenu>\n                </SlideLeftRightTransition>\n              )\n            )}\n        </div>\n      </ResizeTransition>\n    </StyledMenu>\n  );\n};\n"],"mappings":"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"}

package/dist/cjs/components/Filter/Submenu.js

@@ -9,23 +9,24 @@ var _react = _interopRequireWildcard(require("react"));
 var _Menu = require("../Menu");
 var _IconButton = require("../IconButton");
 var _Icons = require("../Icons");
+var _utils = require("../../utils");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var Submenu = function Submenu(_ref) {
   var onBack = _ref.onBack,
+    onHeightChange = _ref.onHeightChange,
     style = _ref.style,
     children = _ref.children,
-    title = _ref.title;
+    title = _ref.title,
+    indexPage = _ref.indexPage;
   var ref = (0, _react.useRef)(null);
-  // const dimensions = useResizeObserver(ref);
-  // const height = dimensions?.height;
-
-  // useEffect(() => {
-  //   if (height && height > 0) {
-  //     onHeightChange?.(height);
-  //   }
-  // }, [height, onHeightChange]);
-
+  var dimensions = (0, _utils.useResizeObserver)(ref);
+  var height = dimensions === null || dimensions === void 0 ? void 0 : dimensions.height;
+  (0, _react.useEffect)(function () {
+    if (height && height > 0 && !indexPage) {
+      onHeightChange === null || onHeightChange === void 0 ? void 0 : onHeightChange(height);
+    }
+  }, [height, onHeightChange, indexPage]);
   return /*#__PURE__*/_react.default.createElement("div", {
     style: style,
     ref: ref

package/dist/cjs/components/Filter/Submenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"Submenu.js","names":["Submenu","onBack","style","children","title","ref","useRef"],"sources":["../../../../src/components/Filter/Submenu.tsx"],"sourcesContent":["import React, { useRef, FC, HTMLAttributes } from \"react\";\nimport { MenuHeader } from \"../Menu\";\nimport { IconButton } from \"../IconButton\";\nimport { ArrowLeftIcon } from \"../Icons\";\n// import { useResizeObserver } from \"../../utils\";\n\ninterface SubmenuProps {\n  title: string;\n  onBack: () => void;\n  // onHeightChange?: (height: number) => void;\n}\n\nexport const Submenu: FC<SubmenuProps & HTMLAttributes<HTMLDivElement>> = ({\n  onBack,\n  // onHeightChange,\n  style,\n  children,\n  title,\n}) => {\n  const ref = useRef(null);\n  // const dimensions = useResizeObserver(ref);\n  // const height = dimensions?.height;\n\n  // useEffect(() => {\n  //   if (height && height > 0) {\n  //     onHeightChange?.(height);\n  //   }\n  // }, [height, onHeightChange]);\n\n  return (\n    <div style={style} ref={ref}>\n      <MenuHeader\n        title={title}\n        leftElement={\n          <IconButton onClick={onBack} variant=\"text gray\" size=\"small\">\n            <ArrowLeftIcon />\n          </IconButton>\n        }\n      />\n      {children}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AAAyC;AAAA;AASlC,IAAMA,OAA0D,GAAG,SAA7DA,OAA0D,OAMjE;EAAA,IALJC,MAAM,QAANA,MAAM;IAENC,KAAK,QAALA,KAAK;IACLC,QAAQ,QAARA,QAAQ;IACRC,KAAK,QAALA,KAAK;EAEL,IAAMC,GAAG,GAAG,IAAAC,aAAM,EAAC,IAAI,CAAC;EACxB;EACA;;EAEA;EACA;EACA;EACA;EACA;;EAEA,oBACE;IAAK,KAAK,EAAEJ,KAAM;IAAC,GAAG,EAAEG;EAAI,gBAC1B,6BAAC,gBAAU;IACT,KAAK,EAAED,KAAM;IACb,WAAW,eACT,6BAAC,sBAAU;MAAC,OAAO,EAAEH,MAAO;MAAC,OAAO,EAAC,WAAW;MAAC,IAAI,EAAC;IAAO,gBAC3D,6BAAC,oBAAa,OAAG;EAEpB,EACD,EACDE,QAAQ,CACL;AAEV,CAAC;AAAC"}
+{"version":3,"file":"Submenu.js","names":["Submenu","onBack","onHeightChange","style","children","title","indexPage","ref","useRef","dimensions","useResizeObserver","height","useEffect"],"sources":["../../../../src/components/Filter/Submenu.tsx"],"sourcesContent":["import React, { useRef, FC, HTMLAttributes, useEffect } from \"react\";\nimport { MenuHeader } from \"../Menu\";\nimport { IconButton } from \"../IconButton\";\nimport { ArrowLeftIcon } from \"../Icons\";\nimport { useResizeObserver } from \"../../utils\";\n\ninterface SubmenuProps {\n  title: string;\n  onBack: () => void;\n  onHeightChange?: (height: number) => void;\n  indexPage?: boolean;\n}\n\nexport const Submenu: FC<SubmenuProps & HTMLAttributes<HTMLDivElement>> = ({\n  onBack,\n  onHeightChange,\n  style,\n  children,\n  title,\n  indexPage,\n}) => {\n  const ref = useRef(null);\n  const dimensions = useResizeObserver(ref);\n  const height = dimensions?.height;\n\n  useEffect(() => {\n    if (height && height > 0 && !indexPage) {\n      onHeightChange?.(height);\n    }\n  }, [height, onHeightChange, indexPage]);\n\n  return (\n    <div style={style} ref={ref}>\n      <MenuHeader\n        title={title}\n        leftElement={\n          <IconButton onClick={onBack} variant=\"text gray\" size=\"small\">\n            <ArrowLeftIcon />\n          </IconButton>\n        }\n      />\n      {children}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AACA;AAAgD;AAAA;AASzC,IAAMA,OAA0D,GAAG,SAA7DA,OAA0D,OAOjE;EAAA,IANJC,MAAM,QAANA,MAAM;IACNC,cAAc,QAAdA,cAAc;IACdC,KAAK,QAALA,KAAK;IACLC,QAAQ,QAARA,QAAQ;IACRC,KAAK,QAALA,KAAK;IACLC,SAAS,QAATA,SAAS;EAET,IAAMC,GAAG,GAAG,IAAAC,aAAM,EAAC,IAAI,CAAC;EACxB,IAAMC,UAAU,GAAG,IAAAC,wBAAiB,EAACH,GAAG,CAAC;EACzC,IAAMI,MAAM,GAAGF,UAAU,aAAVA,UAAU,uBAAVA,UAAU,CAAEE,MAAM;EAEjC,IAAAC,gBAAS,EAAC,YAAM;IACd,IAAID,MAAM,IAAIA,MAAM,GAAG,CAAC,IAAI,CAACL,SAAS,EAAE;MACtCJ,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAGS,MAAM,CAAC;IAC1B;EACF,CAAC,EAAE,CAACA,MAAM,EAAET,cAAc,EAAEI,SAAS,CAAC,CAAC;EAEvC,oBACE;IAAK,KAAK,EAAEH,KAAM;IAAC,GAAG,EAAEI;EAAI,gBAC1B,6BAAC,gBAAU;IACT,KAAK,EAAEF,KAAM;IACb,WAAW,eACT,6BAAC,sBAAU;MAAC,OAAO,EAAEJ,MAAO;MAAC,OAAO,EAAC,WAAW;MAAC,IAAI,EAAC;IAAO,gBAC3D,6BAAC,oBAAa,OAAG;EAEpB,EACD,EACDG,QAAQ,CACL;AAEV,CAAC;AAAC"}

package/dist/esm/components/Filter/Filter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Filter.d.ts","sourceRoot":"","sources":["../../../../src/components/Filter/Filter.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAA6C,MAAM,OAAO,CAAC;AAM7E,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAU,MAAM,WAAW,CAAC;AAKxE,oBAAY,QAAQ,GAAG;IACrB,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,OAAO,EAAE,KAAK,CAAC,iBAAiB,GAAG,gBAAgB,CAAC,CAAC;IACrD,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,oBAAY,YAAY,GAAG;IACzB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;CACvC,CAAC;AAEF,MAAM,WAAW,WAAW;IAC1B,gCAAgC;IAChC,IAAI,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC;IACtB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,wBAAwB;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,mBAAmB;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yDAAyD;IACzD,YAAY,EAAE,MAAM,CAAC;IACrB,wCAAwC;IACxC,QAAQ,EAAE,CAAC,QAAQ,EAAE,YAAY,KAAK,IAAI,CAAC;IAC3C,4CAA4C;IAC5C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iDAAiD;IACjD,YAAY,EAAE,MAAM,CAAC;IACrB,yDAAyD;IACzD,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,eAAO,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,CA4MlC,CAAC"}
+{"version":3,"file":"Filter.d.ts","sourceRoot":"","sources":["../../../../src/components/Filter/Filter.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAA6C,MAAM,OAAO,CAAC;AAK7E,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAU,MAAM,WAAW,CAAC;AAMxE,oBAAY,QAAQ,GAAG;IACrB,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,OAAO,EAAE,KAAK,CAAC,iBAAiB,GAAG,gBAAgB,CAAC,CAAC;IACrD,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,oBAAY,YAAY,GAAG;IACzB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;CACvC,CAAC;AAEF,MAAM,WAAW,WAAW;IAC1B,gCAAgC;IAChC,IAAI,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC;IACtB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,wBAAwB;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,mBAAmB;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yDAAyD;IACzD,YAAY,EAAE,MAAM,CAAC;IACrB,wCAAwC;IACxC,QAAQ,EAAE,CAAC,QAAQ,EAAE,YAAY,KAAK,IAAI,CAAC;IAC3C,4CAA4C;IAC5C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iDAAiD;IACjD,YAAY,EAAE,MAAM,CAAC;IACrB,yDAAyD;IACzD,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,eAAO,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,CAsNlC,CAAC"}

package/dist/esm/components/Filter/Filter.js

@@ -4,14 +4,14 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { MoveFocusInside } from "react-focus-lock";
-import { Submenu } from "./Submenu";
-import { StartMenu } from "./StartMenu";
+import { Button } from "../Button";
+import { CounterButton } from "../CounterButton";
 import { FilterIcon } from "../Icons";
-import { ResizeTransition, SlideLeftRightTransition } from "../Transitions";
 import { Select } from "../Select";
-import { CounterButton } from "../CounterButton";
-import { Button } from "../Button";
+import { ResizeTransition, SlideLeftRightTransition } from "../Transitions";
+import { StartMenu } from "./StartMenu";
 import { StyledMenu, StyledMenuFooter } from "./Styles";
+import { Submenu } from "./Submenu";
 export var Filter = function Filter(_ref) {
   var data = _ref.data,
     _ref$selected = _ref.selected,
@@ -46,6 +46,11 @@ export var Filter = function Filter(_ref) {
     }),
     filter = _useState6[0],
     setFilter = _useState6[1];
+  var _useState7 = useState(true),
+    calculateTrigger = _useState7[0],
+    setCalculateTrigger = _useState7[1];
+  // const targetEl = useRef<any>();
+
   useEffect(function () {
     if (Object.keys(selected).length > 0 || Object.keys(filter).length > 0) {
       setFilter(selected);
@@ -71,6 +76,13 @@ export var Filter = function Filter(_ref) {
     setMenu("index");
     setIsLeft(false);
   }, []);
+
+  // useEffect(() => {
+  //   if (targetEl.current) {
+  //     targetEl.current.style.height = "fit-content";
+  //   }
+  // }, [calculateTrigger]);
+
   var handleChange = useCallback(function (selectedArray) {
     var newFilters = {};
     if (selectedArray.length) {
@@ -80,9 +92,10 @@ export var Filter = function Filter(_ref) {
       newFilters = _extends({}, filter);
       delete newFilters[menu];
     }
+    setCalculateTrigger(!calculateTrigger);
     setFilter(newFilters);
     onChange(newFilters);
-  }, [filter, menu, onChange]);
+  }, [filter, menu, onChange, calculateTrigger]);
   var handleClearAll = useCallback(function (event) {
     event.stopPropagation();
     setFilter({});
@@ -93,7 +106,8 @@ export var Filter = function Filter(_ref) {
     delete newFilters[menu];
     setFilter(newFilters);
     onChange(newFilters);
-  }, [filter, menu, onChange]);
+    setCalculateTrigger(!calculateTrigger);
+  }, [filter, menu, onChange, calculateTrigger]);
   var count = useMemo(function () {
     var c = 0;
     Object.values(filter).forEach(function (entry) {
@@ -170,12 +184,12 @@ export var Filter = function Filter(_ref) {
       }
     }, /*#__PURE__*/React.createElement(Submenu, {
       title: title,
-      onBack: setIndex
-      // onHeightChange={setHeight}
-      ,
+      onBack: setIndex,
+      onHeightChange: setHeight,
       style: {
         width: width
-      }
+      },
+      indexPage: menu === "index"
     }, /*#__PURE__*/React.createElement(MoveFocusInside, {
       disabled: enteredMenu !== id
     }, /*#__PURE__*/React.createElement(Select, {

package/dist/esm/components/Filter/Filter.js.map

@@ -1 +1 @@
-{"version":3,"file":"Filter.js","names":["React","useCallback","useEffect","useMemo","useState","MoveFocusInside","Submenu","StartMenu","FilterIcon","ResizeTransition","SlideLeftRightTransition","Select","CounterButton","Button","StyledMenu","StyledMenuFooter","Filter","data","selected","label","clearAllText","resetLabel","onChange","width","noResultText","emptyFilterText","children","open","setOpen","menu","setMenu","isLeft","setIsLeft","height","setHeight","enteredMenu","setEnteredMenu","filter","setFilter","Object","keys","length","handleOpen","handleClose","handleHeight","element","offsetHeight","handleItemClick","value","setIndex","handleChange","selectedArray","newFilters","handleClearAll","event","stopPropagation","handleReset","count","c","values","forEach","entry","shouldRenderSubmenus","submenu","map","index","id","title","searchPlaceholder","disableInternalSort","isSingleSelect","defaultValue","Boolean"],"sources":["../../../../src/components/Filter/Filter.tsx"],"sourcesContent":["import React, { FC, useCallback, useEffect, useMemo, useState } from \"react\";\nimport { MoveFocusInside } from \"react-focus-lock\";\nimport { Submenu } from \"./Submenu\";\nimport { StartMenu } from \"./StartMenu\";\nimport { FilterIcon } from \"../Icons\";\nimport { ResizeTransition, SlideLeftRightTransition } from \"../Transitions\";\nimport { IOptionGroupProps, IOptionItemProps, Select } from \"../Select\";\nimport { CounterButton } from \"../CounterButton\";\nimport { Button } from \"../Button\";\nimport { StyledMenu, StyledMenuFooter } from \"./Styles\";\n\nexport type DataType = {\n  id: number | string;\n  title: string;\n  searchPlaceholder?: string;\n  disableInternalSort?: boolean;\n  submenu: Array<IOptionGroupProps | IOptionItemProps>;\n  isSingleSelect?: boolean;\n  defaultValue?: string;\n};\n\nexport type SelectedType = {\n  [key: number | string]: Array<string>;\n};\n\nexport interface FilterProps {\n  /** Data rendered in submenus */\n  data: Array<DataType>;\n  /** Selected data inside submenus */\n  selected?: SelectedType;\n  /** Main filter label */\n  label: string;\n  /** Filter width */\n  width?: number;\n  /** Text displayed for the tooltip of clear all button */\n  clearAllText: string;\n  /** Handler for changes on the filter */\n  onChange: (selected: SelectedType) => void;\n  /** Label for reset button inside submenu */\n  resetLabel?: string;\n  /** Text to show when search results are empty */\n  noResultText: string;\n  /** Text to show when there are no submenus to display */\n  emptyFilterText?: string;\n}\n\nexport const Filter: FC<FilterProps> = ({\n  data,\n  selected = {},\n  label,\n  clearAllText,\n  resetLabel = \"Reset\",\n  onChange,\n  width = 260,\n  noResultText,\n  emptyFilterText,\n  children,\n}) => {\n  const [open, setOpen] = useState(false);\n  const [menu, setMenu] = useState<number | string>(\"index\");\n  const [isLeft, setIsLeft] = useState(true);\n  const [height, setHeight] = useState(0);\n  const [enteredMenu, setEnteredMenu] = useState<number | string>(\"index\");\n  const [filter, setFilter] = useState<SelectedType>(() => selected);\n\n  useEffect(() => {\n    if (Object.keys(selected).length > 0 || Object.keys(filter).length > 0) {\n      setFilter(selected);\n    }\n  }, [selected, filter]);\n\n  const handleOpen = useCallback(() => {\n    setOpen(true);\n  }, []);\n\n  const handleClose = useCallback(() => {\n    setOpen(false);\n    setMenu(\"index\");\n    setHeight(0);\n  }, []);\n\n  const handleHeight = useCallback((element) => {\n    setHeight(element?.offsetHeight ?? 0);\n  }, []);\n\n  const handleItemClick = useCallback((value) => {\n    setMenu(value);\n    setIsLeft(true);\n  }, []);\n\n  const setIndex = useCallback(() => {\n    setMenu(\"index\");\n    setIsLeft(false);\n  }, []);\n\n  const handleChange = useCallback(\n    (selectedArray) => {\n      let newFilters = {};\n      if (selectedArray.length) {\n        newFilters = {\n          ...filter,\n          [menu]: selectedArray,\n        };\n      } else {\n        newFilters = { ...filter };\n        delete newFilters[menu];\n      }\n\n      setFilter(newFilters);\n      onChange(newFilters);\n    },\n    [filter, menu, onChange]\n  );\n\n  const handleClearAll = useCallback(\n    (event) => {\n      event.stopPropagation();\n      setFilter({});\n      onChange({});\n    },\n    [onChange]\n  );\n\n  const handleReset = useCallback(() => {\n    const newFilters = { ...filter };\n    delete newFilters[menu];\n    setFilter(newFilters);\n    onChange(newFilters);\n  }, [filter, menu, onChange]);\n\n  const count = useMemo(() => {\n    let c = 0;\n    Object.values(filter).forEach((entry) => (c += entry.length));\n    return c;\n  }, [filter]);\n\n  const shouldRenderSubmenus = useMemo(() => {\n    if (data.length === 0) {\n      return false;\n    }\n\n    for (const entry of data) {\n      if (entry.submenu?.length > 1) {\n        return true;\n      }\n    }\n\n    return false;\n  }, [data]);\n\n  return (\n    <StyledMenu\n      open={open}\n      onOpen={handleOpen}\n      onClose={handleClose}\n      position=\"bottom-end\"\n      target={\n        <CounterButton\n          active={open}\n          label={label}\n          icon={<FilterIcon />}\n          counter={count}\n          tooltipText={clearAllText}\n          onClearAll={handleClearAll}\n        />\n      }\n    >\n      <ResizeTransition in>\n        <div style={{ height, width }}>\n          <SlideLeftRightTransition\n            in={menu === \"index\"}\n            direction={isLeft ? \"left\" : \"right\"}\n            onEnter={handleHeight}\n            onEntered={() => setEnteredMenu(\"index\")}\n          >\n            <MoveFocusInside>\n              <StartMenu\n                data={data}\n                selected={filter}\n                style={{ width }}\n                onHeightChange={setHeight}\n                onItemClick={handleItemClick}\n                shouldRenderSubmenus={shouldRenderSubmenus}\n                emptyFilterText={emptyFilterText}\n              >\n                {children}\n              </StartMenu>\n            </MoveFocusInside>\n          </SlideLeftRightTransition>\n          {shouldRenderSubmenus &&\n            data.map(\n              (\n                {\n                  id,\n                  title,\n                  submenu,\n                  searchPlaceholder,\n                  disableInternalSort,\n                  isSingleSelect,\n                  defaultValue,\n                }: DataType,\n                index: number\n              ) => (\n                <SlideLeftRightTransition\n                  key={`filter-submenu-${index}`}\n                  in={menu === id}\n                  direction={isLeft ? \"left\" : \"right\"}\n                  onEnter={handleHeight}\n                  onEntered={() => setEnteredMenu(id)}\n                >\n                  <Submenu\n                    title={title}\n                    onBack={setIndex}\n                    // onHeightChange={setHeight}\n                    style={{ width }}\n                  >\n                    <MoveFocusInside disabled={enteredMenu !== id}>\n                      <Select\n                        options={submenu}\n                        selected={filter[id]}\n                        onChange={handleChange}\n                        type={isSingleSelect ? \"single\" : \"multiple\"}\n                        autoHeightMax={255}\n                        placeholder={searchPlaceholder}\n                        noResultText={noResultText}\n                        keepSameOptionsOrder={Boolean(submenu.length <= 7)}\n                        disableSearch={Boolean(submenu.length <= 7)}\n                        disabledInternalSort={disableInternalSort}\n                        defaultValue={defaultValue}\n                      />\n                      {filter[id]?.length ? (\n                        <StyledMenuFooter>\n                          <Button\n                            variant=\"text colored\"\n                            size=\"small\"\n                            onClick={handleReset}\n                          >\n                            {resetLabel}\n                          </Button>\n                        </StyledMenuFooter>\n                      ) : null}\n                    </MoveFocusInside>\n                  </Submenu>\n                </SlideLeftRightTransition>\n              )\n            )}\n        </div>\n      </ResizeTransition>\n    </StyledMenu>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"Filter.js","names":["React","useCallback","useEffect","useMemo","useState","MoveFocusInside","Button","CounterButton","FilterIcon","Select","ResizeTransition","SlideLeftRightTransition","StartMenu","StyledMenu","StyledMenuFooter","Submenu","Filter","data","selected","label","clearAllText","resetLabel","onChange","width","noResultText","emptyFilterText","children","open","setOpen","menu","setMenu","isLeft","setIsLeft","height","setHeight","enteredMenu","setEnteredMenu","filter","setFilter","calculateTrigger","setCalculateTrigger","Object","keys","length","handleOpen","handleClose","handleHeight","element","offsetHeight","handleItemClick","value","setIndex","handleChange","selectedArray","newFilters","handleClearAll","event","stopPropagation","handleReset","count","c","values","forEach","entry","shouldRenderSubmenus","submenu","map","index","id","title","searchPlaceholder","disableInternalSort","isSingleSelect","defaultValue","Boolean"],"sources":["../../../../src/components/Filter/Filter.tsx"],"sourcesContent":["import React, { FC, useCallback, useEffect, useMemo, useState } from \"react\";\nimport { MoveFocusInside } from \"react-focus-lock\";\nimport { Button } from \"../Button\";\nimport { CounterButton } from \"../CounterButton\";\nimport { FilterIcon } from \"../Icons\";\nimport { IOptionGroupProps, IOptionItemProps, Select } from \"../Select\";\nimport { ResizeTransition, SlideLeftRightTransition } from \"../Transitions\";\nimport { StartMenu } from \"./StartMenu\";\nimport { StyledMenu, StyledMenuFooter } from \"./Styles\";\nimport { Submenu } from \"./Submenu\";\n\nexport type DataType = {\n  id: number | string;\n  title: string;\n  searchPlaceholder?: string;\n  disableInternalSort?: boolean;\n  submenu: Array<IOptionGroupProps | IOptionItemProps>;\n  isSingleSelect?: boolean;\n  defaultValue?: string;\n};\n\nexport type SelectedType = {\n  [key: number | string]: Array<string>;\n};\n\nexport interface FilterProps {\n  /** Data rendered in submenus */\n  data: Array<DataType>;\n  /** Selected data inside submenus */\n  selected?: SelectedType;\n  /** Main filter label */\n  label: string;\n  /** Filter width */\n  width?: number;\n  /** Text displayed for the tooltip of clear all button */\n  clearAllText: string;\n  /** Handler for changes on the filter */\n  onChange: (selected: SelectedType) => void;\n  /** Label for reset button inside submenu */\n  resetLabel?: string;\n  /** Text to show when search results are empty */\n  noResultText: string;\n  /** Text to show when there are no submenus to display */\n  emptyFilterText?: string;\n}\n\nexport const Filter: FC<FilterProps> = ({\n  data,\n  selected = {},\n  label,\n  clearAllText,\n  resetLabel = \"Reset\",\n  onChange,\n  width = 260,\n  noResultText,\n  emptyFilterText,\n  children,\n}) => {\n  const [open, setOpen] = useState(false);\n  const [menu, setMenu] = useState<number | string>(\"index\");\n  const [isLeft, setIsLeft] = useState(true);\n  const [height, setHeight] = useState(0);\n  const [enteredMenu, setEnteredMenu] = useState<number | string>(\"index\");\n  const [filter, setFilter] = useState<SelectedType>(() => selected);\n  const [calculateTrigger, setCalculateTrigger] = useState<boolean>(true);\n  // const targetEl = useRef<any>();\n\n  useEffect(() => {\n    if (Object.keys(selected).length > 0 || Object.keys(filter).length > 0) {\n      setFilter(selected);\n    }\n  }, [selected, filter]);\n\n  const handleOpen = useCallback(() => {\n    setOpen(true);\n  }, []);\n\n  const handleClose = useCallback(() => {\n    setOpen(false);\n    setMenu(\"index\");\n    setHeight(0);\n  }, []);\n\n  const handleHeight = useCallback((element) => {\n    setHeight(element?.offsetHeight ?? 0);\n  }, []);\n\n  const handleItemClick = useCallback((value) => {\n    setMenu(value);\n    setIsLeft(true);\n  }, []);\n\n  const setIndex = useCallback(() => {\n    setMenu(\"index\");\n    setIsLeft(false);\n  }, []);\n\n  // useEffect(() => {\n  //   if (targetEl.current) {\n  //     targetEl.current.style.height = \"fit-content\";\n  //   }\n  // }, [calculateTrigger]);\n\n  const handleChange = useCallback(\n    (selectedArray) => {\n      let newFilters = {};\n      if (selectedArray.length) {\n        newFilters = {\n          ...filter,\n          [menu]: selectedArray,\n        };\n      } else {\n        newFilters = { ...filter };\n        delete newFilters[menu];\n      }\n      setCalculateTrigger(!calculateTrigger);\n      setFilter(newFilters);\n      onChange(newFilters);\n    },\n    [filter, menu, onChange, calculateTrigger]\n  );\n\n  const handleClearAll = useCallback(\n    (event) => {\n      event.stopPropagation();\n      setFilter({});\n      onChange({});\n    },\n    [onChange]\n  );\n\n  const handleReset = useCallback(() => {\n    const newFilters = { ...filter };\n    delete newFilters[menu];\n    setFilter(newFilters);\n    onChange(newFilters);\n    setCalculateTrigger(!calculateTrigger);\n  }, [filter, menu, onChange, calculateTrigger]);\n\n  const count = useMemo(() => {\n    let c = 0;\n    Object.values(filter).forEach((entry) => (c += entry.length));\n    return c;\n  }, [filter]);\n\n  const shouldRenderSubmenus = useMemo(() => {\n    if (data.length === 0) {\n      return false;\n    }\n\n    for (const entry of data) {\n      if (entry.submenu?.length > 1) {\n        return true;\n      }\n    }\n\n    return false;\n  }, [data]);\n\n  return (\n    <StyledMenu\n      open={open}\n      onOpen={handleOpen}\n      onClose={handleClose}\n      position=\"bottom-end\"\n      target={\n        <CounterButton\n          active={open}\n          label={label}\n          icon={<FilterIcon />}\n          counter={count}\n          tooltipText={clearAllText}\n          onClearAll={handleClearAll}\n        />\n      }\n    >\n      <ResizeTransition in>\n        <div style={{ height, width }}>\n          <SlideLeftRightTransition\n            in={menu === \"index\"}\n            direction={isLeft ? \"left\" : \"right\"}\n            onEnter={handleHeight}\n            onEntered={() => setEnteredMenu(\"index\")}\n          >\n            <MoveFocusInside>\n              <StartMenu\n                data={data}\n                selected={filter}\n                style={{ width }}\n                onHeightChange={setHeight}\n                onItemClick={handleItemClick}\n                shouldRenderSubmenus={shouldRenderSubmenus}\n                emptyFilterText={emptyFilterText}\n              >\n                {children}\n              </StartMenu>\n            </MoveFocusInside>\n          </SlideLeftRightTransition>\n          {shouldRenderSubmenus &&\n            data.map(\n              (\n                {\n                  id,\n                  title,\n                  submenu,\n                  searchPlaceholder,\n                  disableInternalSort,\n                  isSingleSelect,\n                  defaultValue,\n                }: DataType,\n                index: number\n              ) => (\n                <SlideLeftRightTransition\n                  key={`filter-submenu-${index}`}\n                  in={menu === id}\n                  direction={isLeft ? \"left\" : \"right\"}\n                  onEnter={handleHeight}\n                  onEntered={() => setEnteredMenu(id)}\n                >\n                  <Submenu\n                    title={title}\n                    onBack={setIndex}\n                    onHeightChange={setHeight}\n                    style={{ width }}\n                    indexPage={menu === \"index\"}\n                  >\n                    <MoveFocusInside disabled={enteredMenu !== id}>\n                      <Select\n                        options={submenu}\n                        selected={filter[id]}\n                        onChange={handleChange}\n                        type={isSingleSelect ? \"single\" : \"multiple\"}\n                        autoHeightMax={255}\n                        placeholder={searchPlaceholder}\n                        noResultText={noResultText}\n                        keepSameOptionsOrder={Boolean(submenu.length <= 7)}\n                        disableSearch={Boolean(submenu.length <= 7)}\n                        disabledInternalSort={disableInternalSort}\n                        defaultValue={defaultValue}\n                      />\n                      {filter[id]?.length ? (\n                        <StyledMenuFooter>\n                          <Button\n                            variant=\"text colored\"\n                            size=\"small\"\n                            onClick={handleReset}\n                          >\n                            {resetLabel}\n                          </Button>\n                        </StyledMenuFooter>\n                      ) : null}\n                    </MoveFocusInside>\n                  </Submenu>\n                </SlideLeftRightTransition>\n              )\n            )}\n        </div>\n      </ResizeTransition>\n    </StyledMenu>\n  );\n};\n"],"mappings":"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"}

package/dist/esm/components/Filter/Submenu.d.ts

@@ -2,6 +2,8 @@ import { FC, HTMLAttributes } from "react";
 interface SubmenuProps {
     title: string;
     onBack: () => void;
+    onHeightChange?: (height: number) => void;
+    indexPage?: boolean;
 }
 export declare const Submenu: FC<SubmenuProps & HTMLAttributes<HTMLDivElement>>;
 export {};

package/dist/esm/components/Filter/Submenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Submenu.d.ts","sourceRoot":"","sources":["../../../../src/components/Filter/Submenu.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAU,EAAE,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAM1D,UAAU,YAAY;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,IAAI,CAAC;CAEpB;AAED,eAAO,MAAM,OAAO,EAAE,EAAE,CAAC,YAAY,GAAG,cAAc,CAAC,cAAc,CAAC,CA8BrE,CAAC"}
+{"version":3,"file":"Submenu.d.ts","sourceRoot":"","sources":["../../../../src/components/Filter/Submenu.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAU,EAAE,EAAE,cAAc,EAAa,MAAM,OAAO,CAAC;AAMrE,UAAU,YAAY;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,OAAO,EAAE,EAAE,CAAC,YAAY,GAAG,cAAc,CAAC,cAAc,CAAC,CA+BrE,CAAC"}

package/dist/esm/components/Filter/Submenu.js

@@ -1,24 +1,23 @@
-import React, { useRef } from "react";
+import React, { useRef, useEffect } from "react";
 import { MenuHeader } from "../Menu";
 import { IconButton } from "../IconButton";
 import { ArrowLeftIcon } from "../Icons";
-// import { useResizeObserver } from "../../utils";
-
+import { useResizeObserver } from "../../utils";
 export var Submenu = function Submenu(_ref) {
   var onBack = _ref.onBack,
+    onHeightChange = _ref.onHeightChange,
     style = _ref.style,
     children = _ref.children,
-    title = _ref.title;
+    title = _ref.title,
+    indexPage = _ref.indexPage;
   var ref = useRef(null);
-  // const dimensions = useResizeObserver(ref);
-  // const height = dimensions?.height;
-
-  // useEffect(() => {
-  //   if (height && height > 0) {
-  //     onHeightChange?.(height);
-  //   }
-  // }, [height, onHeightChange]);
-
+  var dimensions = useResizeObserver(ref);
+  var height = dimensions == null ? void 0 : dimensions.height;
+  useEffect(function () {
+    if (height && height > 0 && !indexPage) {
+      onHeightChange == null ? void 0 : onHeightChange(height);
+    }
+  }, [height, onHeightChange, indexPage]);
   return /*#__PURE__*/React.createElement("div", {
     style: style,
     ref: ref

package/dist/esm/components/Filter/Submenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"Submenu.js","names":["React","useRef","MenuHeader","IconButton","ArrowLeftIcon","Submenu","onBack","style","children","title","ref"],"sources":["../../../../src/components/Filter/Submenu.tsx"],"sourcesContent":["import React, { useRef, FC, HTMLAttributes } from \"react\";\nimport { MenuHeader } from \"../Menu\";\nimport { IconButton } from \"../IconButton\";\nimport { ArrowLeftIcon } from \"../Icons\";\n// import { useResizeObserver } from \"../../utils\";\n\ninterface SubmenuProps {\n  title: string;\n  onBack: () => void;\n  // onHeightChange?: (height: number) => void;\n}\n\nexport const Submenu: FC<SubmenuProps & HTMLAttributes<HTMLDivElement>> = ({\n  onBack,\n  // onHeightChange,\n  style,\n  children,\n  title,\n}) => {\n  const ref = useRef(null);\n  // const dimensions = useResizeObserver(ref);\n  // const height = dimensions?.height;\n\n  // useEffect(() => {\n  //   if (height && height > 0) {\n  //     onHeightChange?.(height);\n  //   }\n  // }, [height, onHeightChange]);\n\n  return (\n    <div style={style} ref={ref}>\n      <MenuHeader\n        title={title}\n        leftElement={\n          <IconButton onClick={onBack} variant=\"text gray\" size=\"small\">\n            <ArrowLeftIcon />\n          </IconButton>\n        }\n      />\n      {children}\n    </div>\n  );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,MAAM,QAA4B,OAAO;AACzD,SAASC,UAAU,QAAQ,SAAS;AACpC,SAASC,UAAU,QAAQ,eAAe;AAC1C,SAASC,aAAa,QAAQ,UAAU;AACxC;;AAQA,OAAO,IAAMC,OAA0D,GAAG,SAA7DA,OAA0D,OAMjE;EAAA,IALJC,MAAM,QAANA,MAAM;IAENC,KAAK,QAALA,KAAK;IACLC,QAAQ,QAARA,QAAQ;IACRC,KAAK,QAALA,KAAK;EAEL,IAAMC,GAAG,GAAGT,MAAM,CAAC,IAAI,CAAC;EACxB;EACA;;EAEA;EACA;EACA;EACA;EACA;;EAEA,oBACE;IAAK,KAAK,EAAEM,KAAM;IAAC,GAAG,EAAEG;EAAI,gBAC1B,oBAAC,UAAU;IACT,KAAK,EAAED,KAAM;IACb,WAAW,eACT,oBAAC,UAAU;MAAC,OAAO,EAAEH,MAAO;MAAC,OAAO,EAAC,WAAW;MAAC,IAAI,EAAC;IAAO,gBAC3D,oBAAC,aAAa,OAAG;EAEpB,EACD,EACDE,QAAQ,CACL;AAEV,CAAC"}
+{"version":3,"file":"Submenu.js","names":["React","useRef","useEffect","MenuHeader","IconButton","ArrowLeftIcon","useResizeObserver","Submenu","onBack","onHeightChange","style","children","title","indexPage","ref","dimensions","height"],"sources":["../../../../src/components/Filter/Submenu.tsx"],"sourcesContent":["import React, { useRef, FC, HTMLAttributes, useEffect } from \"react\";\nimport { MenuHeader } from \"../Menu\";\nimport { IconButton } from \"../IconButton\";\nimport { ArrowLeftIcon } from \"../Icons\";\nimport { useResizeObserver } from \"../../utils\";\n\ninterface SubmenuProps {\n  title: string;\n  onBack: () => void;\n  onHeightChange?: (height: number) => void;\n  indexPage?: boolean;\n}\n\nexport const Submenu: FC<SubmenuProps & HTMLAttributes<HTMLDivElement>> = ({\n  onBack,\n  onHeightChange,\n  style,\n  children,\n  title,\n  indexPage,\n}) => {\n  const ref = useRef(null);\n  const dimensions = useResizeObserver(ref);\n  const height = dimensions?.height;\n\n  useEffect(() => {\n    if (height && height > 0 && !indexPage) {\n      onHeightChange?.(height);\n    }\n  }, [height, onHeightChange, indexPage]);\n\n  return (\n    <div style={style} ref={ref}>\n      <MenuHeader\n        title={title}\n        leftElement={\n          <IconButton onClick={onBack} variant=\"text gray\" size=\"small\">\n            <ArrowLeftIcon />\n          </IconButton>\n        }\n      />\n      {children}\n    </div>\n  );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,MAAM,EAAsBC,SAAS,QAAQ,OAAO;AACpE,SAASC,UAAU,QAAQ,SAAS;AACpC,SAASC,UAAU,QAAQ,eAAe;AAC1C,SAASC,aAAa,QAAQ,UAAU;AACxC,SAASC,iBAAiB,QAAQ,aAAa;AAS/C,OAAO,IAAMC,OAA0D,GAAG,SAA7DA,OAA0D,OAOjE;EAAA,IANJC,MAAM,QAANA,MAAM;IACNC,cAAc,QAAdA,cAAc;IACdC,KAAK,QAALA,KAAK;IACLC,QAAQ,QAARA,QAAQ;IACRC,KAAK,QAALA,KAAK;IACLC,SAAS,QAATA,SAAS;EAET,IAAMC,GAAG,GAAGb,MAAM,CAAC,IAAI,CAAC;EACxB,IAAMc,UAAU,GAAGT,iBAAiB,CAACQ,GAAG,CAAC;EACzC,IAAME,MAAM,GAAGD,UAAU,oBAAVA,UAAU,CAAEC,MAAM;EAEjCd,SAAS,CAAC,YAAM;IACd,IAAIc,MAAM,IAAIA,MAAM,GAAG,CAAC,IAAI,CAACH,SAAS,EAAE;MACtCJ,cAAc,oBAAdA,cAAc,CAAGO,MAAM,CAAC;IAC1B;EACF,CAAC,EAAE,CAACA,MAAM,EAAEP,cAAc,EAAEI,SAAS,CAAC,CAAC;EAEvC,oBACE;IAAK,KAAK,EAAEH,KAAM;IAAC,GAAG,EAAEI;EAAI,gBAC1B,oBAAC,UAAU;IACT,KAAK,EAAEF,KAAM;IACb,WAAW,eACT,oBAAC,UAAU;MAAC,OAAO,EAAEJ,MAAO;MAAC,OAAO,EAAC,WAAW;MAAC,IAAI,EAAC;IAAO,gBAC3D,oBAAC,aAAa,OAAG;EAEpB,EACD,EACDG,QAAQ,CACL;AAEV,CAAC"}

package/dist/index.js

@@ -15543,36 +15543,6 @@
     Property: EntityProperty
   };
 
-  // import { useResizeObserver } from "../../utils";
-
-  var Submenu = function Submenu(_ref) {
-    var onBack = _ref.onBack,
-      style = _ref.style,
-      children = _ref.children,
-      title = _ref.title;
-    var ref = React.useRef(null);
-    // const dimensions = useResizeObserver(ref);
-    // const height = dimensions?.height;
-
-    // useEffect(() => {
-    //   if (height && height > 0) {
-    //     onHeightChange?.(height);
-    //   }
-    // }, [height, onHeightChange]);
-
-    return /*#__PURE__*/React__default["default"].createElement("div", {
-      style: style,
-      ref: ref
-    }, /*#__PURE__*/React__default["default"].createElement(MenuHeader, {
-      title: title,
-      leftElement: /*#__PURE__*/React__default["default"].createElement(IconButton, {
-        onClick: onBack,
-        variant: "text gray",
-        size: "small"
-      }, /*#__PURE__*/React__default["default"].createElement(ArrowLeftIcon$1, null))
-    }), children);
-  };
-
   var StyledMenu = styled__default["default"](Menu).withConfig({
     displayName: "Styles__StyledMenu",
     componentId: "sc-lxuoiz-0"
@@ -15664,6 +15634,34 @@
     }) : emptyFilterText ? /*#__PURE__*/React__default["default"].createElement(StyledStartMenuNoResults, null, emptyFilterText) : null, children));
   };
 
+  var Submenu = function Submenu(_ref) {
+    var onBack = _ref.onBack,
+      onHeightChange = _ref.onHeightChange,
+      style = _ref.style,
+      children = _ref.children,
+      title = _ref.title,
+      indexPage = _ref.indexPage;
+    var ref = React.useRef(null);
+    var dimensions = useResizeObserver$1(ref);
+    var height = dimensions === null || dimensions === void 0 ? void 0 : dimensions.height;
+    React.useEffect(function () {
+      if (height && height > 0 && !indexPage) {
+        onHeightChange === null || onHeightChange === void 0 ? void 0 : onHeightChange(height);
+      }
+    }, [height, onHeightChange, indexPage]);
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      style: style,
+      ref: ref
+    }, /*#__PURE__*/React__default["default"].createElement(MenuHeader, {
+      title: title,
+      leftElement: /*#__PURE__*/React__default["default"].createElement(IconButton, {
+        onClick: onBack,
+        variant: "text gray",
+        size: "small"
+      }, /*#__PURE__*/React__default["default"].createElement(ArrowLeftIcon$1, null))
+    }), children);
+  };
+
   var Filter = function Filter(_ref) {
     var data = _ref.data,
       _ref$selected = _ref.selected,
@@ -15704,6 +15702,12 @@
       _useState12 = _slicedToArray(_useState11, 2),
       filter = _useState12[0],
       setFilter = _useState12[1];
+    var _useState13 = React.useState(true),
+      _useState14 = _slicedToArray(_useState13, 2),
+      calculateTrigger = _useState14[0],
+      setCalculateTrigger = _useState14[1];
+    // const targetEl = useRef<any>();
+
     React.useEffect(function () {
       if (Object.keys(selected).length > 0 || Object.keys(filter).length > 0) {
         setFilter(selected);
@@ -15729,6 +15733,13 @@
       setMenu("index");
       setIsLeft(false);
     }, []);
+
+    // useEffect(() => {
+    //   if (targetEl.current) {
+    //     targetEl.current.style.height = "fit-content";
+    //   }
+    // }, [calculateTrigger]);
+
     var handleChange = React.useCallback(function (selectedArray) {
       var newFilters = {};
       if (selectedArray.length) {
@@ -15737,9 +15748,10 @@
         newFilters = _objectSpread2({}, filter);
         delete newFilters[menu];
       }
+      setCalculateTrigger(!calculateTrigger);
       setFilter(newFilters);
       onChange(newFilters);
-    }, [filter, menu, onChange]);
+    }, [filter, menu, onChange, calculateTrigger]);
     var handleClearAll = React.useCallback(function (event) {
       event.stopPropagation();
       setFilter({});
@@ -15750,7 +15762,8 @@
       delete newFilters[menu];
       setFilter(newFilters);
       onChange(newFilters);
-    }, [filter, menu, onChange]);
+      setCalculateTrigger(!calculateTrigger);
+    }, [filter, menu, onChange, calculateTrigger]);
     var count = React.useMemo(function () {
       var c = 0;
       Object.values(filter).forEach(function (entry) {
@@ -15835,12 +15848,12 @@
         }
       }, /*#__PURE__*/React__default["default"].createElement(Submenu, {
         title: title,
-        onBack: setIndex
-        // onHeightChange={setHeight}
-        ,
+        onBack: setIndex,
+        onHeightChange: setHeight,
         style: {
           width: width
-        }
+        },
+        indexPage: menu === "index"
       }, /*#__PURE__*/React__default["default"].createElement(FocusLock.MoveFocusInside, {
         disabled: enteredMenu !== id
       }, /*#__PURE__*/React__default["default"].createElement(Select, {