@economic/taco 2.40.0 → 2.40.1

package/dist/esm/packages/taco/src/components/Listbox/useMultiListbox.js

@@ -0,0 +1,177 @@
+import { useMemo, useState, useEffect } from 'react';
+import { useMergedRef } from '../../hooks/useMergedRef.js';
+import { useLocalization } from '../Provider/Localization.js';
+import { v4 } from 'uuid';
+import { getIndexFromValue, getSelectedIndexesFromValue, setInputValueByRef, getActiveDescendant, findByValue } from './util.js';
+import { useTypeahead } from './useTypeahead.js';
+
+const useMultiListbox = ({
+  data: externalData = [],
+  defaultValue,
+  disabled,
+  emptyValue: _,
+  id: nativeId,
+  name,
+  onClick,
+  onChange,
+  onFocus,
+  onKeyDown,
+  value,
+  ...otherProps
+}, ref) => {
+  const {
+    texts
+  } = useLocalization();
+  const id = useMemo(() => nativeId || v4(), [nativeId]);
+  const inputRef = useMergedRef(ref);
+  const data = useMemo(() => {
+    return [{
+      text: texts.listbox.allOption,
+      value: '#ALL-OPTIONS#'
+    }, ...externalData];
+  }, [externalData]);
+  const [currentIndex, setCurrentIndex] = useState(getIndexFromValue(data, value) || 0);
+  const [allOptionsSelected, setAllOptionsSelected] = useState(false);
+  const {
+    getNextIndex
+  } = useTypeahead({
+    data,
+    currentIndex
+  });
+  const [selectedIndexes, setSelectedIndexes] = useState(getSelectedIndexesFromValue(data, value));
+  useEffect(() => {
+    if (defaultValue && !value) {
+      setInputValueByRef(inputRef.current, defaultValue.toString());
+    }
+  }, []);
+  useEffect(() => {
+    const selectableItemsCount = data.filter(item => !item.disabled).length - 1;
+    if (selectableItemsCount === selectedIndexes.length) {
+      setAllOptionsSelected(true);
+    } else {
+      setAllOptionsSelected(false);
+    }
+  }, [selectedIndexes, data]);
+  const setInputValueByIndex = index => {
+    if (index !== undefined) {
+      const option = data[index];
+      if (option && !option.disabled) {
+        var _inputRef$current;
+        let newInputValue = '';
+        const currentInputValue = (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.value;
+        const currentValuesArray = (currentInputValue === null || currentInputValue === void 0 ? void 0 : currentInputValue.split(',')) || [];
+        const optionAlreadySelected = currentValuesArray.findIndex(val => val === String(option.value)) !== -1;
+        // Handling the select_all option
+        if (option.value === '#ALL-OPTIONS#') {
+          if (!allOptionsSelected) {
+            newInputValue = data.filter((option, index) => index !== 0 && !option.disabled).map(option => option.value).join(',');
+          } else {
+            newInputValue = '';
+          }
+        } else {
+          // Handling rest options
+          if (optionAlreadySelected) {
+            newInputValue = currentValuesArray.filter(val => val !== String(option.value)).join(',');
+          } else {
+            newInputValue = currentInputValue ? `${currentInputValue},${option.value}` : option.value;
+          }
+        }
+        setInputValueByRef(inputRef.current, newInputValue);
+      }
+    }
+  };
+  const handleListboxClick = (event, index) => {
+    event.preventDefault();
+    if (!data[index].disabled) {
+      setCurrentIndex(index);
+      setInputValueByIndex(index);
+    }
+    if (onClick) {
+      onClick(event);
+    }
+  };
+  const handleListboxKeyDown = (event, index) => {
+    const charKey = event.key;
+    // event.key always returns the whole string (String.fromCharCode(event.keyCode) does not)
+    // We need to filter out only alphabetical or numeric letters, that's why that condition has been changed
+    if (charKey.length === 1 && /(\w)/g.test(charKey)) {
+      const nextIndex = getNextIndex(charKey);
+      if (nextIndex > -1 && nextIndex !== currentIndex) {
+        setCurrentIndex(nextIndex);
+      }
+      return;
+    }
+    switch (event.key) {
+      case ' ':
+        {
+          event.preventDefault();
+          setInputValueByIndex(index);
+          break;
+        }
+      case 'Enter':
+        {
+          setInputValueByIndex(index);
+          break;
+        }
+    }
+    setCurrentIndex(index !== undefined ? index : 0);
+    if (onKeyDown) {
+      event.persist();
+      onKeyDown(event);
+    }
+  };
+  const handleListboxFocus = event => {
+    if (onFocus) {
+      event.persist();
+      onFocus(event);
+    }
+  };
+  const handleInputChange = event => {
+    event.persist();
+    setSelectedIndexes(getSelectedIndexesFromValue(data, event.target.value));
+    if (onChange) {
+      const detail = [];
+      const valuesArray = event.target.value.split(',');
+      valuesArray.forEach(val => {
+        const item = findByValue(data, val);
+        if (item) {
+          detail.push(item);
+        }
+      });
+      event.detail = detail;
+      onChange(event);
+    }
+  };
+  const list = {
+    ...otherProps,
+    'aria-activedescendant': getActiveDescendant(data, currentIndex, id),
+    'aria-multiselectable': true,
+    data,
+    disabled,
+    id,
+    onChange: () => null,
+    onClick: handleListboxClick,
+    onFocus: handleListboxFocus,
+    onKeyDown: handleListboxKeyDown,
+    scrollOnFocus: false,
+    tabIndex: disabled ? -1 : otherProps.tabIndex ? otherProps.tabIndex : 0,
+    value: currentIndex,
+    selectedIndexes,
+    multiselect: true,
+    allOptionsSelected
+  };
+  const input = {
+    name,
+    onChange: handleInputChange,
+    ref: inputRef,
+    tabIndex: -1,
+    value: value !== null && value !== void 0 ? value : ''
+  };
+  return {
+    list,
+    input
+  };
+};
+
+export { useMultiListbox };
+//# sourceMappingURL=useMultiListbox.js.map

package/dist/esm/packages/taco/src/components/Listbox/useMultiListbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMultiListbox.js","sources":["../../../../../../../src/components/Listbox/useMultiListbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { v4 as uuid } from 'uuid';\nimport { useLocalization } from '../Provider/Localization';\nimport { ListboxProps } from './Listbox';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { setInputValueByRef, getIndexFromValue, getSelectedIndexesFromValue, findByValue, getActiveDescendant } from './util';\nimport { ScrollableListProps, ScrollableListItem, ScrollableListItemValue } from './ScrollableList';\nimport { useTypeahead } from './useTypeahead';\n\ntype useListbox = {\n    list: ScrollableListProps;\n    input: Omit<React.HTMLAttributes<HTMLInputElement>, 'defaultValue'>;\n};\n\nexport const useMultiListbox = (\n    {\n        data: externalData = [],\n        defaultValue,\n        disabled,\n        emptyValue: _,\n        id: nativeId,\n        name,\n        onClick,\n        onChange,\n        onFocus,\n        onKeyDown,\n        value,\n        ...otherProps\n    }: ListboxProps,\n    ref: React.Ref<HTMLInputElement>\n): useListbox => {\n    const { texts } = useLocalization();\n    const id = React.useMemo(() => nativeId || uuid(), [nativeId]);\n    const inputRef = useMergedRef<HTMLInputElement>(ref);\n    const data = React.useMemo(() => {\n        return [{ text: texts.listbox.allOption, value: '#ALL-OPTIONS#' }, ...externalData];\n    }, [externalData]);\n    const [currentIndex, setCurrentIndex] = React.useState(getIndexFromValue(data, value) || 0);\n    const [allOptionsSelected, setAllOptionsSelected] = React.useState(false);\n    const { getNextIndex } = useTypeahead({ data, currentIndex });\n    const [selectedIndexes, setSelectedIndexes] = React.useState(getSelectedIndexesFromValue(data, value));\n\n    React.useEffect(() => {\n        if (defaultValue && !value) {\n            setInputValueByRef(inputRef.current, defaultValue.toString());\n        }\n    }, []);\n\n    React.useEffect(() => {\n        const selectableItemsCount = data.filter(item => !item.disabled).length - 1;\n\n        if (selectableItemsCount === selectedIndexes.length) {\n            setAllOptionsSelected(true);\n        } else {\n            setAllOptionsSelected(false);\n        }\n    }, [selectedIndexes, data]);\n\n    const setInputValueByIndex = (index: number | undefined): void => {\n        if (index !== undefined) {\n            const option = data[index];\n\n            if (option && !option.disabled) {\n                let newInputValue: ScrollableListItemValue = '';\n                const currentInputValue = inputRef.current?.value;\n                const currentValuesArray = currentInputValue?.split(',') || [];\n                const optionAlreadySelected = currentValuesArray.findIndex(val => val === String(option.value)) !== -1;\n\n                // Handling the select_all option\n                if (option.value === '#ALL-OPTIONS#') {\n                    if (!allOptionsSelected) {\n                        newInputValue = data\n                            .filter((option, index) => index !== 0 && !option.disabled)\n                            .map(option => option.value)\n                            .join(',');\n                    } else {\n                        newInputValue = '';\n                    }\n                } else {\n                    // Handling rest options\n                    if (optionAlreadySelected) {\n                        newInputValue = currentValuesArray.filter(val => val !== String(option.value)).join(',');\n                    } else {\n                        newInputValue = currentInputValue ? `${currentInputValue},${option.value}` : option.value;\n                    }\n                }\n\n                setInputValueByRef(inputRef.current, newInputValue);\n            }\n        }\n    };\n\n    const handleListboxClick = (event: React.MouseEvent<HTMLLIElement>, index: number): void => {\n        event.preventDefault();\n\n        if (!data[index].disabled) {\n            setCurrentIndex(index);\n            setInputValueByIndex(index);\n        }\n\n        if (onClick) {\n            onClick(event);\n        }\n    };\n\n    const handleListboxKeyDown = (event: React.KeyboardEvent<HTMLElement>, index?: number): void => {\n        const charKey = event.key;\n\n        // event.key always returns the whole string (String.fromCharCode(event.keyCode) does not)\n        // We need to filter out only alphabetical or numeric letters, that's why that condition has been changed\n        if (charKey.length === 1 && /(\\w)/g.test(charKey)) {\n            const nextIndex = getNextIndex(charKey);\n\n            if (nextIndex > -1 && nextIndex !== currentIndex) {\n                setCurrentIndex(nextIndex);\n            }\n            return;\n        }\n\n        switch (event.key) {\n            case ' ': {\n                event.preventDefault();\n                setInputValueByIndex(index);\n                break;\n            }\n\n            case 'Enter': {\n                setInputValueByIndex(index);\n                break;\n            }\n\n            default:\n        }\n        setCurrentIndex(index !== undefined ? index : 0);\n\n        if (onKeyDown) {\n            event.persist();\n            onKeyDown(event);\n        }\n    };\n\n    const handleListboxFocus = (event: React.FocusEvent<HTMLElement>): void => {\n        if (onFocus) {\n            event.persist();\n            onFocus(event);\n        }\n    };\n\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n        event.persist();\n\n        setSelectedIndexes(getSelectedIndexesFromValue(data, event.target.value));\n\n        if (onChange) {\n            const detail: ScrollableListItem[] = [];\n            const valuesArray = event.target.value.split(',');\n\n            valuesArray.forEach(val => {\n                const item = findByValue(data, val);\n                if (item) {\n                    detail.push(item);\n                }\n            });\n            (event as any).detail = detail;\n\n            onChange(event);\n        }\n    };\n\n    const list = {\n        ...otherProps,\n        'aria-activedescendant': getActiveDescendant(data, currentIndex, id),\n        'aria-multiselectable': true,\n        data,\n        disabled,\n        id,\n        onChange: () => null,\n        onClick: handleListboxClick,\n        onFocus: handleListboxFocus,\n        onKeyDown: handleListboxKeyDown,\n        scrollOnFocus: false,\n        tabIndex: disabled ? -1 : otherProps.tabIndex ? otherProps.tabIndex : 0,\n        value: currentIndex,\n        selectedIndexes,\n        multiselect: true,\n        allOptionsSelected,\n    };\n\n    const input = {\n        name,\n        onChange: handleInputChange,\n        ref: inputRef,\n        tabIndex: -1,\n        value: value ?? '',\n    };\n\n    return { list, input };\n};\n"],"names":["useMultiListbox","data","externalData","defaultValue","disabled","emptyValue","_","id","nativeId","name","onClick","onChange","onFocus","onKeyDown","value","otherProps","ref","texts","useLocalization","React","uuid","inputRef","useMergedRef","text","listbox","allOption","currentIndex","setCurrentIndex","getIndexFromValue","allOptionsSelected","setAllOptionsSelected","getNextIndex","useTypeahead","selectedIndexes","setSelectedIndexes","getSelectedIndexesFromValue","setInputValueByRef","current","toString","selectableItemsCount","filter","item","length","setInputValueByIndex","index","undefined","option","_inputRef$current","newInputValue","currentInputValue","currentValuesArray","split","optionAlreadySelected","findIndex","val","String","map","join","handleListboxClick","event","preventDefault","handleListboxKeyDown","charKey","key","test","nextIndex","persist","handleListboxFocus","handleInputChange","target","detail","valuesArray","forEach","findByValue","push","list","getActiveDescendant","scrollOnFocus","tabIndex","multiselect","input"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/Listbox/useTypeahead.js

@@ -0,0 +1,26 @@
+import { useRef } from 'react';
+import { findNextIndexByValue } from './util.js';
+import useTimer from '../../utils/hooks/useTimer.js';
+
+const useTypeahead = ({
+  data,
+  currentIndex
+}) => {
+  const typeaheadQuery = useRef();
+  const typeaheadQueryTimer = useTimer(1000, () => {
+    typeaheadQuery.current = undefined;
+  });
+  const getNextIndex = charKey => {
+    const query = (typeaheadQuery.current ? typeaheadQuery.current + charKey : charKey).toLowerCase();
+    const nextIndex = findNextIndexByValue(data, query, currentIndex);
+    typeaheadQueryTimer.start();
+    typeaheadQuery.current = query;
+    return nextIndex;
+  };
+  return {
+    getNextIndex
+  };
+};
+
+export { useTypeahead };
+//# sourceMappingURL=useTypeahead.js.map

package/dist/esm/packages/taco/src/components/Listbox/useTypeahead.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTypeahead.js","sources":["../../../../../../../src/components/Listbox/useTypeahead.tsx"],"sourcesContent":["import * as React from 'react';\nimport useTimer from '../../utils/hooks/useTimer';\nimport { findNextIndexByValue } from './util';\nimport { ScrollableListItem } from './ScrollableList';\n\ntype useTypeahead = {\n    getNextIndex: (key: string) => number;\n};\n\ntype useTypeaheadProps = {\n    data: ScrollableListItem[];\n    currentIndex: number | undefined;\n};\n\nexport const useTypeahead = ({ data, currentIndex }: useTypeaheadProps): useTypeahead => {\n    const typeaheadQuery = React.useRef<string | undefined>();\n    const typeaheadQueryTimer = useTimer(1000, () => {\n        typeaheadQuery.current = undefined;\n    });\n\n    const getNextIndex = (charKey: string): number => {\n        const query = (typeaheadQuery.current ? typeaheadQuery.current + charKey : charKey).toLowerCase();\n        const nextIndex = findNextIndexByValue(data, query, currentIndex);\n\n        typeaheadQueryTimer.start();\n        typeaheadQuery.current = query;\n\n        return nextIndex;\n    };\n\n    return { getNextIndex };\n};\n"],"names":["useTypeahead","data","currentIndex","typeaheadQuery","React","typeaheadQueryTimer","useTimer","current","undefined","getNextIndex","charKey","query","toLowerCase","nextIndex","findNextIndexByValue","start"],"mappings":";;;;MAcaA,YAAY,GAAGA,CAAC;EAAEC,IAAI;EAAEC;CAAiC;EAClE,MAAMC,cAAc,GAAGC,MAAY,EAAsB;EACzD,MAAMC,mBAAmB,GAAGC,QAAQ,CAAC,IAAI,EAAE;IACvCH,cAAc,CAACI,OAAO,GAAGC,SAAS;GACrC,CAAC;EAEF,MAAMC,YAAY,GAAIC,OAAe;IACjC,MAAMC,KAAK,GAAG,CAACR,cAAc,CAACI,OAAO,GAAGJ,cAAc,CAACI,OAAO,GAAGG,OAAO,GAAGA,OAAO,EAAEE,WAAW,EAAE;IACjG,MAAMC,SAAS,GAAGC,oBAAoB,CAACb,IAAI,EAAEU,KAAK,EAAET,YAAY,CAAC;IAEjEG,mBAAmB,CAACU,KAAK,EAAE;IAC3BZ,cAAc,CAACI,OAAO,GAAGI,KAAK;IAE9B,OAAOE,SAAS;GACnB;EAED,OAAO;IAAEJ;GAAc;AAC3B;;;;"}

package/dist/esm/packages/taco/src/components/Listbox/util.js

@@ -0,0 +1,130 @@
+import React__default from 'react';
+import { getId } from './ScrollableList.js';
+import { setInputValueByRef as setInputValueByRef$1 } from '../../utils/input.js';
+
+const getValue = value => String(value !== null && value !== void 0 ? value : '');
+const setInputValueByRef = (input, value, event = 'change') => {
+  setInputValueByRef$1(input, getValue(value), event);
+};
+const getIndexFromValue = (data, value) => {
+  const index = data.findIndex(option => getValue(option.value) === getValue(value));
+  return index > -1 ? index : undefined;
+};
+const getSelectedIndexesFromValue = (data, value) => {
+  if (typeof value !== 'string') return [];
+  return value.split(',').map(v => data.findIndex(o => String(o.value) === v)).filter(v => v !== -1);
+};
+const findByValue = (data, value) => {
+  return data.find(option => getValue(option.value) === getValue(value));
+};
+const searchForString = (child, value, strategy = 'includes') => {
+  try {
+    var _child$props;
+    if (typeof child !== 'string' && (_child$props = child.props) !== null && _child$props !== void 0 && _child$props.children) {
+      var _child$props2, _child$props3;
+      if (Array.isArray((_child$props2 = child.props) === null || _child$props2 === void 0 ? void 0 : _child$props2.children)) {
+        return !!child.props.children.find(subChild => searchForString(subChild, value, strategy));
+      }
+      return searchForString((_child$props3 = child.props) === null || _child$props3 === void 0 ? void 0 : _child$props3.children, value, strategy);
+    } else {
+      return child.toString().toLowerCase()[strategy](String(value).toLowerCase());
+    }
+  } catch {
+    return false;
+  }
+};
+const getIndexInRangeByValue = (data, query, firstIndex, lastIndex = data.length) => {
+  const index = data.slice(firstIndex, lastIndex).findIndex(option => {
+    if (option.disabled) {
+      return false;
+    }
+    return searchForString(option.text, query, 'startsWith');
+  });
+  return index > -1 ? index + firstIndex : -1;
+};
+const findNextIndexByValue = (data, query, activeIndex) => {
+  const firstIndex = activeIndex === undefined ? 0 : activeIndex + 1;
+  let index = getIndexInRangeByValue(data, query, firstIndex);
+  if (index === -1) {
+    index = getIndexInRangeByValue(data, query, 0, activeIndex);
+  }
+  return index;
+};
+const getActiveDescendant = (data, currentIndex, id) => {
+  return currentIndex !== undefined && data[currentIndex] ? getId(id, data[currentIndex].value) : undefined;
+};
+const useFlattenedData = data => {
+  return React__default.useMemo(() => {
+    const items = [];
+    const flatten = (item, path, parentPath, parentDisabled) => {
+      const currentPath = parentPath ? `${parentPath}.${path}` : `${path}`;
+      const isItemDisabled = parentDisabled || item.disabled;
+      items.push({
+        ...item,
+        disabled: isItemDisabled,
+        path: currentPath,
+        hasChildren: !!item.children
+      });
+      if (item.children) {
+        item.children.forEach((childItem, childPath) => flatten(childItem, childPath, currentPath, isItemDisabled));
+      }
+    };
+    data.forEach((item, index) => {
+      flatten(item, index);
+    });
+    return items;
+  }, [data]);
+};
+const sanitizeItem = item => {
+  if (item) {
+    const {
+      hasChildren: _1,
+      path: _2,
+      ...rest
+    } = item;
+    return rest;
+  }
+  return undefined;
+};
+const getOptionParents = (data, path) => {
+  var _path$split;
+  const indexes = (_path$split = path === null || path === void 0 ? void 0 : path.split('.')) !== null && _path$split !== void 0 ? _path$split : [];
+  if (indexes.length > 1) {
+    // we don't want to map the current item
+    indexes.pop();
+    // we need to rebuild the path as we map
+    let lastPath;
+    return indexes.map(i => {
+      lastPath = lastPath ? [lastPath, i].join('.') : i;
+      return sanitizeItem(data.find(i => i.path === lastPath));
+    });
+  }
+  return null;
+};
+const filterData = (data, value = '') => {
+  if (value === '' || value === null) {
+    return data;
+  }
+  const filteredOptionValues = new Set();
+  const shouldFilterOption = option => {
+    if (option.disabled) {
+      return false;
+    }
+    return searchForString(option.text, String(value));
+  };
+  data.forEach(option => {
+    if (shouldFilterOption(option)) {
+      const parents = getOptionParents(data, option.path);
+      filteredOptionValues.add(option.value);
+      if (parents !== null) {
+        parents.forEach(option => filteredOptionValues.add(option === null || option === void 0 ? void 0 : option.value));
+      }
+    }
+  });
+  return data.filter(({
+    value
+  }) => filteredOptionValues.has(value));
+};
+
+export { filterData, findByValue, findNextIndexByValue, getActiveDescendant, getIndexFromValue, getOptionParents, getSelectedIndexesFromValue, sanitizeItem, searchForString, setInputValueByRef, useFlattenedData };
+//# sourceMappingURL=util.js.map

package/dist/esm/packages/taco/src/components/Listbox/util.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"util.js","sources":["../../../../../../../src/components/Listbox/util.ts"],"sourcesContent":["import React from 'react';\nimport { ScrollableListItem, ScrollableListItemValue, getId } from './ScrollableList';\nimport { setInputValueByRef as setInputValueByRefBase } from '../../utils/input';\n\nconst getValue = (value: ScrollableListItemValue | undefined): string => String(value ?? '');\n\nexport const setInputValueByRef = (input: HTMLInputElement | null, value: ScrollableListItemValue, event = 'change'): void => {\n    setInputValueByRefBase(input, getValue(value), event);\n};\n\nexport const getIndexFromValue = (data: ScrollableListItem[], value: ScrollableListItemValue | undefined): number | undefined => {\n    const index = data.findIndex(option => getValue(option.value) === getValue(value));\n    return index > -1 ? index : undefined;\n};\n\nexport const getSelectedIndexesFromValue = (data: ScrollableListItem[], value: ScrollableListItemValue | undefined): number[] => {\n    if (typeof value !== 'string') return [];\n\n    return value\n        .split(',')\n        .map(v => data.findIndex(o => String(o.value) === v))\n        .filter(v => v !== -1);\n};\n\nexport const findByValue = (data: ScrollableListItem[], value: ScrollableListItemValue): ScrollableListItem | undefined => {\n    return data.find(option => getValue(option.value) === getValue(value));\n};\n\nexport const searchForString = (child: JSX.Element | string, value: string, strategy = 'includes'): boolean => {\n    try {\n        if (typeof child !== 'string' && child.props?.children) {\n            if (Array.isArray(child.props?.children)) {\n                return !!child.props.children.find((subChild: JSX.Element | string) =>\n                    searchForString(subChild, value, strategy)\n                );\n            }\n\n            return searchForString(child.props?.children, value, strategy);\n        } else {\n            return child.toString().toLowerCase()[strategy](String(value).toLowerCase());\n        }\n    } catch {\n        return false;\n    }\n};\n\nconst getIndexInRangeByValue = (\n    data: ScrollableListItem[],\n    query: string,\n    firstIndex: number,\n    lastIndex: number = data.length\n): number => {\n    const index = data.slice(firstIndex, lastIndex).findIndex(option => {\n        if (option.disabled) {\n            return false;\n        }\n\n        return searchForString(option.text, query, 'startsWith');\n    });\n\n    return index > -1 ? index + firstIndex : -1;\n};\n\nexport const findNextIndexByValue = (data: ScrollableListItem[], query: string, activeIndex: number | undefined): number => {\n    const firstIndex = activeIndex === undefined ? 0 : activeIndex + 1;\n    let index = getIndexInRangeByValue(data, query, firstIndex);\n\n    if (index === -1) {\n        index = getIndexInRangeByValue(data, query, 0, activeIndex);\n    }\n\n    return index;\n};\n\nexport const getActiveDescendant = (data: ScrollableListItem[], currentIndex: number | undefined, id: string): any => {\n    return currentIndex !== undefined && data[currentIndex] ? getId(id, data[currentIndex].value) : undefined;\n};\n\nexport const useFlattenedData = (data: ScrollableListItem[]): ScrollableListItem[] => {\n    return React.useMemo(() => {\n        const items: ScrollableListItem[] = [];\n\n        const flatten = (item: ScrollableListItem, path: number, parentPath?: string, parentDisabled?: boolean) => {\n            const currentPath = parentPath ? `${parentPath}.${path}` : `${path}`;\n            const isItemDisabled = parentDisabled || item.disabled;\n\n            items.push({\n                ...item,\n                disabled: isItemDisabled,\n                path: currentPath,\n                hasChildren: !!item.children,\n            });\n\n            if (item.children) {\n                item.children.forEach((childItem: ScrollableListItem, childPath: number) =>\n                    flatten(childItem, childPath, currentPath, isItemDisabled)\n                );\n            }\n        };\n\n        data.forEach((item, index) => {\n            flatten(item, index);\n        });\n\n        return items;\n    }, [data]);\n};\n\nexport const sanitizeItem = (item: ScrollableListItem | undefined) => {\n    if (item) {\n        const { hasChildren: _1, path: _2, ...rest } = item;\n        return rest;\n    }\n\n    return undefined;\n};\n\nexport const getOptionParents = (data: ScrollableListItem[], path?: string) => {\n    const indexes = path?.split('.') ?? [];\n\n    if (indexes.length > 1) {\n        // we don't want to map the current item\n        indexes.pop();\n        // we need to rebuild the path as we map\n        let lastPath: string;\n\n        return indexes.map(i => {\n            lastPath = lastPath ? [lastPath, i].join('.') : i;\n            return sanitizeItem(data.find((i: ScrollableListItem) => i.path === lastPath));\n        });\n    }\n\n    return null;\n};\n\nexport const filterData = (data: ScrollableListItem[], value: ScrollableListItemValue = ''): ScrollableListItem[] => {\n    if (value === '' || value === null) {\n        return data;\n    }\n\n    const filteredOptionValues = new Set();\n    const shouldFilterOption = (option: ScrollableListItem): boolean => {\n        if (option.disabled) {\n            return false;\n        }\n\n        return searchForString(option.text, String(value));\n    };\n\n    data.forEach(option => {\n        if (shouldFilterOption(option)) {\n            const parents = getOptionParents(data, option.path);\n\n            filteredOptionValues.add(option.value);\n\n            if (parents !== null) {\n                parents.forEach(option => filteredOptionValues.add(option?.value));\n            }\n        }\n    });\n\n    return data.filter(({ value }) => filteredOptionValues.has(value));\n};\n"],"names":["getValue","value","String","setInputValueByRef","input","event","setInputValueByRefBase","getIndexFromValue","data","index","findIndex","option","undefined","getSelectedIndexesFromValue","split","map","v","o","filter","findByValue","find","searchForString","child","strategy","_child$props","props","children","_child$props2","_child$props3","Array","isArray","subChild","toString","toLowerCase","getIndexInRangeByValue","query","firstIndex","lastIndex","length","slice","disabled","text","findNextIndexByValue","activeIndex","getActiveDescendant","currentIndex","id","getId","useFlattenedData","React","useMemo","items","flatten","item","path","parentPath","parentDisabled","currentPath","isItemDisabled","push","hasChildren","forEach","childItem","childPath","sanitizeItem","_1","_2","rest","getOptionParents","indexes","_path$split","pop","lastPath","i","join","filterData","filteredOptionValues","Set","shouldFilterOption","parents","add","has"],"mappings":";;;;AAIA,MAAMA,QAAQ,GAAIC,KAA0C,IAAaC,MAAM,CAACD,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,EAAE,CAAC;MAE/EE,kBAAkB,GAAGA,CAACC,KAA8B,EAAEH,KAA8B,EAAEI,KAAK,GAAG,QAAQ;EAC/GC,oBAAsB,CAACF,KAAK,EAAEJ,QAAQ,CAACC,KAAK,CAAC,EAAEI,KAAK,CAAC;AACzD;MAEaE,iBAAiB,GAAGA,CAACC,IAA0B,EAAEP,KAA0C;EACpG,MAAMQ,KAAK,GAAGD,IAAI,CAACE,SAAS,CAACC,MAAM,IAAIX,QAAQ,CAACW,MAAM,CAACV,KAAK,CAAC,KAAKD,QAAQ,CAACC,KAAK,CAAC,CAAC;EAClF,OAAOQ,KAAK,GAAG,CAAC,CAAC,GAAGA,KAAK,GAAGG,SAAS;AACzC;MAEaC,2BAA2B,GAAGA,CAACL,IAA0B,EAAEP,KAA0C;EAC9G,IAAI,OAAOA,KAAK,KAAK,QAAQ,EAAE,OAAO,EAAE;EAExC,OAAOA,KAAK,CACPa,KAAK,CAAC,GAAG,CAAC,CACVC,GAAG,CAACC,CAAC,IAAIR,IAAI,CAACE,SAAS,CAACO,CAAC,IAAIf,MAAM,CAACe,CAAC,CAAChB,KAAK,CAAC,KAAKe,CAAC,CAAC,CAAC,CACpDE,MAAM,CAACF,CAAC,IAAIA,CAAC,KAAK,CAAC,CAAC,CAAC;AAC9B;MAEaG,WAAW,GAAGA,CAACX,IAA0B,EAAEP,KAA8B;EAClF,OAAOO,IAAI,CAACY,IAAI,CAACT,MAAM,IAAIX,QAAQ,CAACW,MAAM,CAACV,KAAK,CAAC,KAAKD,QAAQ,CAACC,KAAK,CAAC,CAAC;AAC1E;MAEaoB,eAAe,GAAGA,CAACC,KAA2B,EAAErB,KAAa,EAAEsB,QAAQ,GAAG,UAAU;EAC7F,IAAI;IAAA,IAAAC,YAAA;IACA,IAAI,OAAOF,KAAK,KAAK,QAAQ,KAAAE,YAAA,GAAIF,KAAK,CAACG,KAAK,cAAAD,YAAA,eAAXA,YAAA,CAAaE,QAAQ,EAAE;MAAA,IAAAC,aAAA,EAAAC,aAAA;MACpD,IAAIC,KAAK,CAACC,OAAO,EAAAH,aAAA,GAACL,KAAK,CAACG,KAAK,cAAAE,aAAA,uBAAXA,aAAA,CAAaD,QAAQ,CAAC,EAAE;QACtC,OAAO,CAAC,CAACJ,KAAK,CAACG,KAAK,CAACC,QAAQ,CAACN,IAAI,CAAEW,QAA8B,IAC9DV,eAAe,CAACU,QAAQ,EAAE9B,KAAK,EAAEsB,QAAQ,CAAC,CAC7C;;MAGL,OAAOF,eAAe,EAAAO,aAAA,GAACN,KAAK,CAACG,KAAK,cAAAG,aAAA,uBAAXA,aAAA,CAAaF,QAAQ,EAAEzB,KAAK,EAAEsB,QAAQ,CAAC;KACjE,MAAM;MACH,OAAOD,KAAK,CAACU,QAAQ,EAAE,CAACC,WAAW,EAAE,CAACV,QAAQ,CAAC,CAACrB,MAAM,CAACD,KAAK,CAAC,CAACgC,WAAW,EAAE,CAAC;;GAEnF,CAAC,MAAM;IACJ,OAAO,KAAK;;AAEpB;AAEA,MAAMC,sBAAsB,GAAGA,CAC3B1B,IAA0B,EAC1B2B,KAAa,EACbC,UAAkB,EAClBC,YAAoB7B,IAAI,CAAC8B,MAAM;EAE/B,MAAM7B,KAAK,GAAGD,IAAI,CAAC+B,KAAK,CAACH,UAAU,EAAEC,SAAS,CAAC,CAAC3B,SAAS,CAACC,MAAM;IAC5D,IAAIA,MAAM,CAAC6B,QAAQ,EAAE;MACjB,OAAO,KAAK;;IAGhB,OAAOnB,eAAe,CAACV,MAAM,CAAC8B,IAAI,EAAEN,KAAK,EAAE,YAAY,CAAC;GAC3D,CAAC;EAEF,OAAO1B,KAAK,GAAG,CAAC,CAAC,GAAGA,KAAK,GAAG2B,UAAU,GAAG,CAAC,CAAC;AAC/C,CAAC;MAEYM,oBAAoB,GAAGA,CAAClC,IAA0B,EAAE2B,KAAa,EAAEQ,WAA+B;EAC3G,MAAMP,UAAU,GAAGO,WAAW,KAAK/B,SAAS,GAAG,CAAC,GAAG+B,WAAW,GAAG,CAAC;EAClE,IAAIlC,KAAK,GAAGyB,sBAAsB,CAAC1B,IAAI,EAAE2B,KAAK,EAAEC,UAAU,CAAC;EAE3D,IAAI3B,KAAK,KAAK,CAAC,CAAC,EAAE;IACdA,KAAK,GAAGyB,sBAAsB,CAAC1B,IAAI,EAAE2B,KAAK,EAAE,CAAC,EAAEQ,WAAW,CAAC;;EAG/D,OAAOlC,KAAK;AAChB;MAEamC,mBAAmB,GAAGA,CAACpC,IAA0B,EAAEqC,YAAgC,EAAEC,EAAU;EACxG,OAAOD,YAAY,KAAKjC,SAAS,IAAIJ,IAAI,CAACqC,YAAY,CAAC,GAAGE,KAAK,CAACD,EAAE,EAAEtC,IAAI,CAACqC,YAAY,CAAC,CAAC5C,KAAK,CAAC,GAAGW,SAAS;AAC7G;MAEaoC,gBAAgB,GAAIxC,IAA0B;EACvD,OAAOyC,cAAK,CAACC,OAAO,CAAC;IACjB,MAAMC,KAAK,GAAyB,EAAE;IAEtC,MAAMC,OAAO,GAAGA,CAACC,IAAwB,EAAEC,IAAY,EAAEC,UAAmB,EAAEC,cAAwB;MAClG,MAAMC,WAAW,GAAGF,UAAU,GAAG,GAAGA,UAAU,IAAID,IAAI,EAAE,GAAG,GAAGA,IAAI,EAAE;MACpE,MAAMI,cAAc,GAAGF,cAAc,IAAIH,IAAI,CAACb,QAAQ;MAEtDW,KAAK,CAACQ,IAAI,CAAC;QACP,GAAGN,IAAI;QACPb,QAAQ,EAAEkB,cAAc;QACxBJ,IAAI,EAAEG,WAAW;QACjBG,WAAW,EAAE,CAAC,CAACP,IAAI,CAAC3B;OACvB,CAAC;MAEF,IAAI2B,IAAI,CAAC3B,QAAQ,EAAE;QACf2B,IAAI,CAAC3B,QAAQ,CAACmC,OAAO,CAAC,CAACC,SAA6B,EAAEC,SAAiB,KACnEX,OAAO,CAACU,SAAS,EAAEC,SAAS,EAAEN,WAAW,EAAEC,cAAc,CAAC,CAC7D;;KAER;IAEDlD,IAAI,CAACqD,OAAO,CAAC,CAACR,IAAI,EAAE5C,KAAK;MACrB2C,OAAO,CAACC,IAAI,EAAE5C,KAAK,CAAC;KACvB,CAAC;IAEF,OAAO0C,KAAK;GACf,EAAE,CAAC3C,IAAI,CAAC,CAAC;AACd;MAEawD,YAAY,GAAIX,IAAoC;EAC7D,IAAIA,IAAI,EAAE;IACN,MAAM;MAAEO,WAAW,EAAEK,EAAE;MAAEX,IAAI,EAAEY,EAAE;MAAE,GAAGC;KAAM,GAAGd,IAAI;IACnD,OAAOc,IAAI;;EAGf,OAAOvD,SAAS;AACpB;MAEawD,gBAAgB,GAAGA,CAAC5D,IAA0B,EAAE8C,IAAa;;EACtE,MAAMe,OAAO,IAAAC,WAAA,GAAGhB,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAExC,KAAK,CAAC,GAAG,CAAC,cAAAwD,WAAA,cAAAA,WAAA,GAAI,EAAE;EAEtC,IAAID,OAAO,CAAC/B,MAAM,GAAG,CAAC,EAAE;;IAEpB+B,OAAO,CAACE,GAAG,EAAE;;IAEb,IAAIC,QAAgB;IAEpB,OAAOH,OAAO,CAACtD,GAAG,CAAC0D,CAAC;MAChBD,QAAQ,GAAGA,QAAQ,GAAG,CAACA,QAAQ,EAAEC,CAAC,CAAC,CAACC,IAAI,CAAC,GAAG,CAAC,GAAGD,CAAC;MACjD,OAAOT,YAAY,CAACxD,IAAI,CAACY,IAAI,CAAEqD,CAAqB,IAAKA,CAAC,CAACnB,IAAI,KAAKkB,QAAQ,CAAC,CAAC;KACjF,CAAC;;EAGN,OAAO,IAAI;AACf;MAEaG,UAAU,GAAGA,CAACnE,IAA0B,EAAEP,QAAiC,EAAE;EACtF,IAAIA,KAAK,KAAK,EAAE,IAAIA,KAAK,KAAK,IAAI,EAAE;IAChC,OAAOO,IAAI;;EAGf,MAAMoE,oBAAoB,GAAG,IAAIC,GAAG,EAAE;EACtC,MAAMC,kBAAkB,GAAInE,MAA0B;IAClD,IAAIA,MAAM,CAAC6B,QAAQ,EAAE;MACjB,OAAO,KAAK;;IAGhB,OAAOnB,eAAe,CAACV,MAAM,CAAC8B,IAAI,EAAEvC,MAAM,CAACD,KAAK,CAAC,CAAC;GACrD;EAEDO,IAAI,CAACqD,OAAO,CAAClD,MAAM;IACf,IAAImE,kBAAkB,CAACnE,MAAM,CAAC,EAAE;MAC5B,MAAMoE,OAAO,GAAGX,gBAAgB,CAAC5D,IAAI,EAAEG,MAAM,CAAC2C,IAAI,CAAC;MAEnDsB,oBAAoB,CAACI,GAAG,CAACrE,MAAM,CAACV,KAAK,CAAC;MAEtC,IAAI8E,OAAO,KAAK,IAAI,EAAE;QAClBA,OAAO,CAAClB,OAAO,CAAClD,MAAM,IAAIiE,oBAAoB,CAACI,GAAG,CAACrE,MAAM,aAANA,MAAM,uBAANA,MAAM,CAAEV,KAAK,CAAC,CAAC;;;GAG7E,CAAC;EAEF,OAAOO,IAAI,CAACU,MAAM,CAAC,CAAC;IAAEjB;GAAO,KAAK2E,oBAAoB,CAACK,GAAG,CAAChF,KAAK,CAAC,CAAC;AACtE;;;;"}

package/dist/esm/packages/taco/src/components/Menu/Context.js

@@ -0,0 +1,9 @@
+import { createContext, useContext } from 'react';
+
+const MenuContext = /*#__PURE__*/createContext(undefined);
+const useCurrentMenu = () => {
+  return useContext(MenuContext);
+};
+
+export { MenuContext, useCurrentMenu };
+//# sourceMappingURL=Context.js.map

package/dist/esm/packages/taco/src/components/Menu/Context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Context.js","sources":["../../../../../../../src/components/Menu/Context.tsx"],"sourcesContent":["import * as React from 'react';\n\nexport const MenuContext = React.createContext<\n    | {\n          indented: boolean;\n          registerIndentation: () => void;\n          minWidth?: number;\n          setMinWidth: (width: number) => void;\n          open: () => void;\n          close: () => void;\n      }\n    | undefined\n>(undefined);\n\nexport const useCurrentMenu = () => {\n    return React.useContext(MenuContext);\n};\n"],"names":["MenuContext","React","undefined","useCurrentMenu"],"mappings":";;MAEaA,WAAW,gBAAGC,aAAmB,CAU5CC,SAAS;MAEEC,cAAc,GAAGA;EAC1B,OAAOF,UAAgB,CAACD,WAAW,CAAC;AACxC;;;;"}

package/dist/esm/packages/taco/src/components/Menu/Menu.js

@@ -0,0 +1,62 @@
+import { forwardRef, useState, useMemo, createElement } from 'react';
+import { MenuContext } from './Context.js';
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import { Root } from '@radix-ui/react-dropdown-menu';
+import { Content } from './components/Content.js';
+import { Item } from './components/Item.js';
+import { Link } from './components/Link.js';
+import { Trigger } from './components/Trigger.js';
+import { Checkbox } from './components/Checkbox.js';
+import { RadioGroup } from './components/RadioGroup.js';
+import { Separator } from './components/Separator.js';
+import { Header } from './components/Header.js';
+import { SubMenu } from './components/SubMenu.js';
+
+const Menu = /*#__PURE__*/forwardRef(function Menu(externalProps, ref) {
+  const {
+    children,
+    defaultOpen: defaultProp,
+    onChange,
+    open: prop,
+    trigger,
+    ...props
+  } = externalProps;
+  const [indented, setIndented] = useState(false);
+  const [minWidth, setMinWidth] = useState(undefined);
+  const [open, setOpen] = useControllableState({
+    // uncontrolled
+    defaultProp,
+    // controlled
+    onChange,
+    prop
+  });
+  const context = useMemo(() => ({
+    indented,
+    registerIndentation: () => setIndented(true),
+    minWidth,
+    setMinWidth: width => setMinWidth(width),
+    open: () => setOpen(true),
+    close: () => setOpen(false)
+  }), [indented, minWidth]);
+  return /*#__PURE__*/createElement(MenuContext.Provider, {
+    value: context
+  }, /*#__PURE__*/createElement(Root, Object.assign({}, props, {
+    modal: false,
+    open: open,
+    onOpenChange: setOpen
+  }), trigger && /*#__PURE__*/createElement(Trigger, {
+    ref: ref
+  }, trigger), children));
+});
+Menu.Trigger = Trigger;
+Menu.Content = Content;
+Menu.Item = Item;
+Menu.Link = Link;
+Menu.Checkbox = Checkbox;
+Menu.Separator = Separator;
+Menu.Header = Header;
+Menu.RadioGroup = RadioGroup;
+Menu.SubMenu = SubMenu;
+
+export { Menu };
+//# sourceMappingURL=Menu.js.map

package/dist/esm/packages/taco/src/components/Menu/Menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.js","sources":["../../../../../../../src/components/Menu/Menu.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport { MenuContext } from './Context';\nimport { Content, MenuContentProps } from './components/Content';\nimport { Item, MenuItemProps } from './components/Item';\nimport { Link, MenuLinkItemProps } from './components/Link';\nimport { Trigger, MenuTriggerProps } from './components/Trigger';\nimport { Checkbox, MenuCheckboxItemProps } from './components/Checkbox';\nimport { ForwardedMenuRadioGroupWithStatics, RadioGroup } from './components/RadioGroup';\nimport { Separator, MenuSeparatorProps } from './components/Separator';\nimport { Header, MenuHeaderProps } from './components/Header';\nimport { SubMenu, MenuSubMenuProps } from './components/SubMenu';\n\nexport type MenuProps = {\n    children: React.ReactNode;\n    /** Set whether the menu is open by default or not  */\n    defaultOpen?: boolean;\n    /** Called when the menu opens or closes, must be used in conjunction with open  */\n    onChange?: (open: boolean) => void;\n    /** Control the open state of the menu from outside the component  */\n    open?: boolean;\n    /** A trigger to be used for the menu, should not be set if `children` already contains a trigger */\n    trigger?: JSX.Element;\n};\nexport type ForwardedMenuWithStatics = React.ForwardRefExoticComponent<MenuProps & React.RefAttributes<HTMLElement>> & {\n    Trigger: React.ForwardRefExoticComponent<MenuTriggerProps>;\n    Content: React.ForwardRefExoticComponent<MenuContentProps>;\n    Item: React.ForwardRefExoticComponent<MenuItemProps>;\n    Link: React.ForwardRefExoticComponent<MenuLinkItemProps>;\n    Checkbox: React.ForwardRefExoticComponent<MenuCheckboxItemProps>;\n    Separator: React.ForwardRefExoticComponent<MenuSeparatorProps>;\n    Header: React.ForwardRefExoticComponent<MenuHeaderProps>;\n    RadioGroup: ForwardedMenuRadioGroupWithStatics;\n    SubMenu: React.ForwardRefExoticComponent<MenuSubMenuProps>;\n};\n\nexport const Menu = React.forwardRef<HTMLButtonElement, MenuProps>(function Menu(externalProps, ref) {\n    const { children, defaultOpen: defaultProp, onChange, open: prop, trigger, ...props } = externalProps;\n    const [indented, setIndented] = React.useState(false);\n    const [minWidth, setMinWidth] = React.useState<number | undefined>(undefined);\n\n    const [open, setOpen] = useControllableState<boolean>({\n        // uncontrolled\n        defaultProp,\n        // controlled\n        onChange,\n        prop,\n    });\n\n    const context = React.useMemo(\n        () => ({\n            indented,\n            registerIndentation: () => setIndented(true),\n            minWidth,\n            setMinWidth: (width: number) => setMinWidth(width),\n            open: () => setOpen(true),\n            close: () => setOpen(false),\n        }),\n        [indented, minWidth]\n    );\n\n    return (\n        <MenuContext.Provider value={context}>\n            <DropdownMenuPrimitive.Root {...props} modal={false} open={open} onOpenChange={setOpen}>\n                {trigger && <Trigger ref={ref}>{trigger}</Trigger>}\n                {children}\n            </DropdownMenuPrimitive.Root>\n        </MenuContext.Provider>\n    );\n}) as ForwardedMenuWithStatics;\nMenu.Trigger = Trigger;\nMenu.Content = Content;\nMenu.Item = Item;\nMenu.Link = Link;\nMenu.Checkbox = Checkbox;\nMenu.Separator = Separator;\nMenu.Header = Header;\nMenu.RadioGroup = RadioGroup;\nMenu.SubMenu = SubMenu;\n"],"names":["Menu","React","externalProps","ref","children","defaultOpen","defaultProp","onChange","open","prop","trigger","props","indented","setIndented","minWidth","setMinWidth","undefined","setOpen","useControllableState","context","registerIndentation","width","close","MenuContext","Provider","value","DropdownMenuPrimitive","modal","onOpenChange","Trigger","Content","Item","Link","Checkbox","Separator","Header","RadioGroup","SubMenu"],"mappings":";;;;;;;;;;;;;;MAqCaA,IAAI,gBAAGC,UAAgB,CAA+B,SAASD,IAAIA,CAACE,aAAa,EAAEC,GAAG;EAC/F,MAAM;IAAEC,QAAQ;IAAEC,WAAW,EAAEC,WAAW;IAAEC,QAAQ;IAAEC,IAAI,EAAEC,IAAI;IAAEC,OAAO;IAAE,GAAGC;GAAO,GAAGT,aAAa;EACrG,MAAM,CAACU,QAAQ,EAAEC,WAAW,CAAC,GAAGZ,QAAc,CAAC,KAAK,CAAC;EACrD,MAAM,CAACa,QAAQ,EAAEC,WAAW,CAAC,GAAGd,QAAc,CAAqBe,SAAS,CAAC;EAE7E,MAAM,CAACR,IAAI,EAAES,OAAO,CAAC,GAAGC,oBAAoB,CAAU;;IAElDZ,WAAW;;IAEXC,QAAQ;IACRE;GACH,CAAC;EAEF,MAAMU,OAAO,GAAGlB,OAAa,CACzB,OAAO;IACHW,QAAQ;IACRQ,mBAAmB,EAAEA,MAAMP,WAAW,CAAC,IAAI,CAAC;IAC5CC,QAAQ;IACRC,WAAW,EAAGM,KAAa,IAAKN,WAAW,CAACM,KAAK,CAAC;IAClDb,IAAI,EAAEA,MAAMS,OAAO,CAAC,IAAI,CAAC;IACzBK,KAAK,EAAEA,MAAML,OAAO,CAAC,KAAK;GAC7B,CAAC,EACF,CAACL,QAAQ,EAAEE,QAAQ,CAAC,CACvB;EAED,oBACIb,cAACsB,WAAW,CAACC,QAAQ;IAACC,KAAK,EAAEN;kBACzBlB,cAACyB,IAA0B,oBAAKf,KAAK;IAAEgB,KAAK,EAAE,KAAK;IAAEnB,IAAI,EAAEA,IAAI;IAAEoB,YAAY,EAAEX;MAC1EP,OAAO,iBAAIT,cAAC4B,OAAO;IAAC1B,GAAG,EAAEA;KAAMO,OAAO,CAAW,EACjDN,QAAQ,CACgB,CACV;AAE/B,CAAC;AACDJ,IAAI,CAAC6B,OAAO,GAAGA,OAAO;AACtB7B,IAAI,CAAC8B,OAAO,GAAGA,OAAO;AACtB9B,IAAI,CAAC+B,IAAI,GAAGA,IAAI;AAChB/B,IAAI,CAACgC,IAAI,GAAGA,IAAI;AAChBhC,IAAI,CAACiC,QAAQ,GAAGA,QAAQ;AACxBjC,IAAI,CAACkC,SAAS,GAAGA,SAAS;AAC1BlC,IAAI,CAACmC,MAAM,GAAGA,MAAM;AACpBnC,IAAI,CAACoC,UAAU,GAAGA,UAAU;AAC5BpC,IAAI,CAACqC,OAAO,GAAGA,OAAO;;;;"}

package/dist/esm/packages/taco/src/components/Menu/components/Checkbox.js

@@ -0,0 +1,32 @@
+import { forwardRef, createElement } from 'react';
+import { Icon } from '../../Icon/Icon.js';
+import { CheckboxItem, ItemIndicator } from '@radix-ui/react-dropdown-menu';
+import { useItemStyling } from './Item.js';
+
+const Checkbox = /*#__PURE__*/forwardRef(function MenuCheckboxItem(props, ref) {
+  const {
+    checked,
+    children,
+    onChange,
+    ...otherProps
+  } = props;
+  const className = useItemStyling({
+    disabled: props.disabled,
+    indented: true,
+    className: props.className
+  });
+  return /*#__PURE__*/createElement(CheckboxItem, Object.assign({}, otherProps, {
+    checked: checked,
+    className: className,
+    onCheckedChange: onChange,
+    ref: ref
+  }), /*#__PURE__*/createElement(ItemIndicator, {
+    className: "absolute left-0 ml-1.5"
+  }, /*#__PURE__*/createElement(Icon, {
+    name: "tick",
+    className: "-ml-px !h-4 !w-4"
+  })), children);
+});
+
+export { Checkbox };
+//# sourceMappingURL=Checkbox.js.map

package/dist/esm/packages/taco/src/components/Menu/components/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","sources":["../../../../../../../../src/components/Menu/components/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\nimport { Icon } from '../../Icon/Icon';\nimport { useItemStyling } from './Item';\n\nexport type MenuCheckboxItemProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> & {\n    /* Whether the checkbox item is disabled */\n    disabled?: boolean;\n    /* The current checked state (controlled) */\n    checked: boolean;\n    /* Handler called when the checked state changes */\n    onChange: (checked: boolean | 'indeterminate') => void;\n};\n\nexport const Checkbox = React.forwardRef<HTMLDivElement, MenuCheckboxItemProps>(function MenuCheckboxItem(props, ref) {\n    const { checked, children, onChange, ...otherProps } = props;\n    const className = useItemStyling({\n        disabled: props.disabled,\n        indented: true,\n        className: props.className,\n    });\n\n    return (\n        <DropdownMenuPrimitive.CheckboxItem\n            {...otherProps}\n            checked={checked}\n            className={className}\n            onCheckedChange={onChange}\n            ref={ref}>\n            <DropdownMenuPrimitive.ItemIndicator className=\"absolute left-0 ml-1.5\">\n                <Icon name=\"tick\" className=\"-ml-px !h-4 !w-4\" />\n            </DropdownMenuPrimitive.ItemIndicator>\n            {children}\n        </DropdownMenuPrimitive.CheckboxItem>\n    );\n});\n"],"names":["Checkbox","React","MenuCheckboxItem","props","ref","checked","children","onChange","otherProps","className","useItemStyling","disabled","indented","DropdownMenuPrimitive","onCheckedChange","Icon","name"],"mappings":";;;;;MAcaA,QAAQ,gBAAGC,UAAgB,CAAwC,SAASC,gBAAgBA,CAACC,KAAK,EAAEC,GAAG;EAChH,MAAM;IAAEC,OAAO;IAAEC,QAAQ;IAAEC,QAAQ;IAAE,GAAGC;GAAY,GAAGL,KAAK;EAC5D,MAAMM,SAAS,GAAGC,cAAc,CAAC;IAC7BC,QAAQ,EAAER,KAAK,CAACQ,QAAQ;IACxBC,QAAQ,EAAE,IAAI;IACdH,SAAS,EAAEN,KAAK,CAACM;GACpB,CAAC;EAEF,oBACIR,cAACY,YAAkC,oBAC3BL,UAAU;IACdH,OAAO,EAAEA,OAAO;IAChBI,SAAS,EAAEA,SAAS;IACpBK,eAAe,EAAEP,QAAQ;IACzBH,GAAG,EAAEA;mBACLH,cAACY,aAAmC;IAACJ,SAAS,EAAC;kBAC3CR,cAACc,IAAI;IAACC,IAAI,EAAC,MAAM;IAACP,SAAS,EAAC;IAAqB,CACf,EACrCH,QAAQ,CACwB;AAE7C,CAAC;;;;"}

package/dist/esm/packages/taco/src/components/Menu/components/Content.js

@@ -0,0 +1,61 @@
+import { forwardRef, useRef, Children, createRef, cloneElement, useEffect, createElement } from 'react';
+import cn from 'clsx';
+import { useMergedRef } from '../../../hooks/useMergedRef.js';
+import { createShortcutKeyDownHandler } from '../../../utils/keyboard.js';
+import { useCurrentMenu } from '../Context.js';
+import { Portal, Content as Content$1 } from '@radix-ui/react-dropdown-menu';
+
+const Content = /*#__PURE__*/forwardRef(function MenuContent(props, ref) {
+  const internalRef = useMergedRef(ref);
+  const menu = useCurrentMenu();
+  const {
+    align = 'start',
+    children,
+    placement: side,
+    ...otherProps
+  } = props;
+  const className = cn('border border-transparent rounded block outline-none p-1 yt-shadow wcag-white', props.className);
+  // attach refs to each child
+  const childrenRefs = useRef([]);
+  const childrenWithRefs = Children.toArray(props.children).filter(child => !!child) // remove falsey children
+  .map((child, index) => {
+    childrenRefs.current[index] = /*#__PURE__*/createRef();
+    return /*#__PURE__*/cloneElement(child, {
+      ref: childrenRefs.current[index]
+    });
+  });
+  // register any shortcuts attached to children
+  useEffect(() => {
+    const shortcuts = [];
+    childrenWithRefs.forEach((child, index) => {
+      if (child.props.shortcut) {
+        shortcuts.push(createShortcutKeyDownHandler(child.props.shortcut, event => {
+          event.preventDefault();
+          menu === null || menu === void 0 ? void 0 : menu.open();
+          setTimeout(() => {
+            var _childrenRefs$current, _childrenRefs$current2;
+            return (_childrenRefs$current = childrenRefs.current[index]) === null || _childrenRefs$current === void 0 ? void 0 : (_childrenRefs$current2 = _childrenRefs$current.current) === null || _childrenRefs$current2 === void 0 ? void 0 : _childrenRefs$current2.click();
+          }, 1);
+        }));
+      }
+    });
+    shortcuts.forEach(handler => document.addEventListener('keydown', handler));
+    return () => {
+      shortcuts.forEach(handler => document.removeEventListener('keydown', handler));
+    };
+  }, [childrenWithRefs]);
+  return /*#__PURE__*/createElement(Portal, null, /*#__PURE__*/createElement(Content$1, Object.assign({}, otherProps, {
+    align: align,
+    className: className,
+    "data-taco": "menu",
+    side: side,
+    sideOffset: 3,
+    style: {
+      minWidth: menu === null || menu === void 0 ? void 0 : menu.minWidth
+    },
+    ref: internalRef
+  }), childrenWithRefs));
+});
+
+export { Content };
+//# sourceMappingURL=Content.js.map

package/dist/esm/packages/taco/src/components/Menu/components/Content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Content.js","sources":["../../../../../../../../src/components/Menu/components/Content.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\nimport cn from 'clsx';\nimport { Align, Placement } from '../../../types';\nimport { useMergedRef } from '../../../hooks/useMergedRef';\nimport { useCurrentMenu } from '../Context';\nimport { createShortcutKeyDownHandler } from '../../../utils/keyboard';\nimport { MenuItemProps } from './Item';\n\nexport type MenuContentProps = Omit<DropdownMenuPrimitive.DropdownMenuContentProps, 'children' | 'side'> & {\n    align?: Align;\n    children: React.ReactNode;\n    /** Set the position of the Menu relative to its trigger. Default value is `bottom` */\n    placement?: Placement;\n};\n\nexport const Content = React.forwardRef(function MenuContent(props: MenuContentProps, ref: React.Ref<HTMLDivElement>) {\n    const internalRef = useMergedRef<any>(ref);\n    const menu = useCurrentMenu();\n    const { align = 'start', children, placement: side, ...otherProps } = props;\n    const className = cn('border border-transparent rounded block outline-none p-1 yt-shadow wcag-white', props.className);\n\n    // attach refs to each child\n    const childrenRefs = React.useRef<React.RefObject<HTMLDivElement>[]>([]);\n    const childrenWithRefs = (React.Children.toArray(props.children) as React.ReactElement<MenuItemProps & { ref: any }>[])\n        .filter(child => !!child) // remove falsey children\n        .map((child, index) => {\n            childrenRefs.current[index] = React.createRef<HTMLDivElement>();\n            return React.cloneElement(child, { ref: childrenRefs.current[index] });\n        });\n\n    // register any shortcuts attached to children\n    React.useEffect(() => {\n        const shortcuts: ((event: KeyboardEvent) => void)[] = [];\n        childrenWithRefs.forEach((child, index) => {\n            if (child.props.shortcut) {\n                shortcuts.push(\n                    createShortcutKeyDownHandler(child.props.shortcut, event => {\n                        event.preventDefault();\n                        menu?.open();\n                        setTimeout(() => childrenRefs.current[index]?.current?.click(), 1);\n                    })\n                );\n            }\n        });\n\n        shortcuts.forEach(handler => document.addEventListener('keydown', handler));\n\n        return () => {\n            shortcuts.forEach(handler => document.removeEventListener('keydown', handler));\n        };\n    }, [childrenWithRefs]);\n\n    return (\n        <DropdownMenuPrimitive.Portal>\n            <DropdownMenuPrimitive.Content\n                {...otherProps}\n                align={align}\n                className={className}\n                data-taco=\"menu\"\n                side={side}\n                sideOffset={3}\n                style={{ minWidth: menu?.minWidth }}\n                ref={internalRef}>\n                {childrenWithRefs}\n            </DropdownMenuPrimitive.Content>\n        </DropdownMenuPrimitive.Portal>\n    );\n});\n"],"names":["Content","React","MenuContent","props","ref","internalRef","useMergedRef","menu","useCurrentMenu","align","children","placement","side","otherProps","className","cn","childrenRefs","childrenWithRefs","toArray","filter","child","map","index","current","shortcuts","forEach","shortcut","push","createShortcutKeyDownHandler","event","preventDefault","open","setTimeout","_childrenRefs$current","_childrenRefs$current2","click","handler","document","addEventListener","removeEventListener","DropdownMenuPrimitive","sideOffset","style","minWidth"],"mappings":";;;;;;;MAgBaA,OAAO,gBAAGC,UAAgB,CAAC,SAASC,WAAWA,CAACC,KAAuB,EAAEC,GAA8B;EAChH,MAAMC,WAAW,GAAGC,YAAY,CAAMF,GAAG,CAAC;EAC1C,MAAMG,IAAI,GAAGC,cAAc,EAAE;EAC7B,MAAM;IAAEC,KAAK,GAAG,OAAO;IAAEC,QAAQ;IAAEC,SAAS,EAAEC,IAAI;IAAE,GAAGC;GAAY,GAAGV,KAAK;EAC3E,MAAMW,SAAS,GAAGC,EAAE,CAAC,+EAA+E,EAAEZ,KAAK,CAACW,SAAS,CAAC;;EAGtH,MAAME,YAAY,GAAGf,MAAY,CAAoC,EAAE,CAAC;EACxE,MAAMgB,gBAAgB,GAAIhB,QAAc,CAACiB,OAAO,CAACf,KAAK,CAACO,QAAQ,CAAwD,CAClHS,MAAM,CAACC,KAAK,IAAI,CAAC,CAACA,KAAK,CAAC;GACxBC,GAAG,CAAC,CAACD,KAAK,EAAEE,KAAK;IACdN,YAAY,CAACO,OAAO,CAACD,KAAK,CAAC,gBAAGrB,SAAe,EAAkB;IAC/D,oBAAOA,YAAkB,CAACmB,KAAK,EAAE;MAAEhB,GAAG,EAAEY,YAAY,CAACO,OAAO,CAACD,KAAK;KAAG,CAAC;GACzE,CAAC;;EAGNrB,SAAe,CAAC;IACZ,MAAMuB,SAAS,GAAuC,EAAE;IACxDP,gBAAgB,CAACQ,OAAO,CAAC,CAACL,KAAK,EAAEE,KAAK;MAClC,IAAIF,KAAK,CAACjB,KAAK,CAACuB,QAAQ,EAAE;QACtBF,SAAS,CAACG,IAAI,CACVC,4BAA4B,CAACR,KAAK,CAACjB,KAAK,CAACuB,QAAQ,EAAEG,KAAK;UACpDA,KAAK,CAACC,cAAc,EAAE;UACtBvB,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEwB,IAAI,EAAE;UACZC,UAAU,CAAC;YAAA,IAAAC,qBAAA,EAAAC,sBAAA;YAAA,QAAAD,qBAAA,GAAMjB,YAAY,CAACO,OAAO,CAACD,KAAK,CAAC,cAAAW,qBAAA,wBAAAC,sBAAA,GAA3BD,qBAAA,CAA6BV,OAAO,cAAAW,sBAAA,uBAApCA,sBAAA,CAAsCC,KAAK,EAAE;aAAE,CAAC,CAAC;SACrE,CAAC,CACL;;KAER,CAAC;IAEFX,SAAS,CAACC,OAAO,CAACW,OAAO,IAAIC,QAAQ,CAACC,gBAAgB,CAAC,SAAS,EAAEF,OAAO,CAAC,CAAC;IAE3E,OAAO;MACHZ,SAAS,CAACC,OAAO,CAACW,OAAO,IAAIC,QAAQ,CAACE,mBAAmB,CAAC,SAAS,EAAEH,OAAO,CAAC,CAAC;KACjF;GACJ,EAAE,CAACnB,gBAAgB,CAAC,CAAC;EAEtB,oBACIhB,cAACuC,MAA4B,qBACzBvC,cAACuC,SAA6B,oBACtB3B,UAAU;IACdJ,KAAK,EAAEA,KAAK;IACZK,SAAS,EAAEA,SAAS;iBACV,MAAM;IAChBF,IAAI,EAAEA,IAAI;IACV6B,UAAU,EAAE,CAAC;IACbC,KAAK,EAAE;MAAEC,QAAQ,EAAEpC,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEoC;KAAU;IACnCvC,GAAG,EAAEC;MACJY,gBAAgB,CACW,CACL;AAEvC,CAAC;;;;"}

package/dist/esm/packages/taco/src/components/Menu/components/Header.js

@@ -0,0 +1,19 @@
+import { forwardRef, createElement } from 'react';
+import cn from 'clsx';
+import { useCurrentMenu } from '../Context.js';
+import { Label } from '@radix-ui/react-dropdown-menu';
+
+const Header = /*#__PURE__*/forwardRef(function MenuHeader(props, ref) {
+  const menu = useCurrentMenu();
+  const className = cn('flex items-center justify-start h-7 pr-1.5 text-xs text-grey-700', {
+    'pl-7': menu === null || menu === void 0 ? void 0 : menu.indented,
+    'pl-1.5': !(menu !== null && menu !== void 0 && menu.indented)
+  }, props.className);
+  return /*#__PURE__*/createElement(Label, Object.assign({}, props, {
+    className: className,
+    ref: ref
+  }));
+});
+
+export { Header };
+//# sourceMappingURL=Header.js.map

package/dist/esm/packages/taco/src/components/Menu/components/Header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.js","sources":["../../../../../../../../src/components/Menu/components/Header.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\nimport cn from 'clsx';\nimport { useCurrentMenu } from '../Context';\n\nexport type MenuHeaderProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport const Header = React.forwardRef<HTMLDivElement, MenuHeaderProps>(function MenuHeader(props, ref) {\n    const menu = useCurrentMenu();\n    const className = cn(\n        'flex items-center justify-start h-7 pr-1.5 text-xs text-grey-700',\n        {\n            'pl-7': menu?.indented,\n            'pl-1.5': !menu?.indented,\n        },\n        props.className\n    );\n\n    return <DropdownMenuPrimitive.Label {...props} className={className} ref={ref} />;\n});\n"],"names":["Header","React","MenuHeader","props","ref","menu","useCurrentMenu","className","cn","indented","DropdownMenuPrimitive"],"mappings":";;;;;MAOaA,MAAM,gBAAGC,UAAgB,CAAkC,SAASC,UAAUA,CAACC,KAAK,EAAEC,GAAG;EAClG,MAAMC,IAAI,GAAGC,cAAc,EAAE;EAC7B,MAAMC,SAAS,GAAGC,EAAE,CAChB,kEAAkE,EAClE;IACI,MAAM,EAAEH,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEI,QAAQ;IACtB,QAAQ,EAAE,EAACJ,IAAI,aAAJA,IAAI,eAAJA,IAAI,CAAEI,QAAQ;GAC5B,EACDN,KAAK,CAACI,SAAS,CAClB;EAED,oBAAON,cAACS,KAA2B,oBAAKP,KAAK;IAAEI,SAAS,EAAEA,SAAS;IAAEH,GAAG,EAAEA;KAAO;AACrF,CAAC;;;;"}