@economic/taco 1.1.5-alpha.108 → 1.1.5-alpha.127

package/dist/taco.cjs.development.js

@@ -14,7 +14,6 @@ var uuid = require('uuid');
 var framerMotion = require('framer-motion');
 var CheckboxPrimitive = require('@radix-ui/react-checkbox');
 var PopoverPrimitive = require('@radix-ui/react-popover');
-var keycode = _interopDefault(require('keycode'));
 var debounce = _interopDefault(require('lodash/debounce'));
 var dateFns = require('date-fns');
 var DialogPrimitive = require('@radix-ui/react-dialog');
@@ -517,6 +516,22 @@ function IconChevronLeftDouble(props, svgRef) {
 
 var ChevronLeftDouble = /*#__PURE__*/React.forwardRef(IconChevronLeftDouble);
 
+function IconChevronLeftSolid(props, svgRef) {
+  return React.createElement("svg", Object.assign({
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    ref: svgRef
+  }, props), React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M15.5 6.207a.5.5 0 00-.854-.353l-5.792 5.792a.5.5 0 000 .708l5.792 5.792a.5.5 0 00.854-.353V6.207z",
+    fill: "currentColor"
+  }));
+}
+
+var ChevronLeftSolid = /*#__PURE__*/React.forwardRef(IconChevronLeftSolid);
+
 function IconChevronLeft(props, svgRef) {
   return React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
@@ -545,6 +560,22 @@ function IconChevronRightDouble(props, svgRef) {
 
 var ChevronRightDouble = /*#__PURE__*/React.forwardRef(IconChevronRightDouble);
 
+function IconChevronRightSolid(props, svgRef) {
+  return React.createElement("svg", Object.assign({
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    ref: svgRef
+  }, props), React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M8.5 17.793a.5.5 0 00.854.353l5.792-5.792a.5.5 0 000-.708L9.354 5.854a.5.5 0 00-.854.353v11.586z",
+    fill: "currentColor"
+  }));
+}
+
+var ChevronRightSolid = /*#__PURE__*/React.forwardRef(IconChevronRightSolid);
+
 function IconChevronRight(props, svgRef) {
   return React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
@@ -3025,8 +3056,10 @@ const icons = {
   'chevron-down-solid': ChevronDownSolid,
   'chevron-down': ChevronDown,
   'chevron-left-double': ChevronLeftDouble,
+  'chevron-left-solid': ChevronLeftSolid,
   'chevron-left': ChevronLeft,
   'chevron-right-double': ChevronRightDouble,
+  'chevron-right-solid': ChevronRightSolid,
   'chevron-right': ChevronRight,
   'chevron-up-double': ChevronUpDouble,
   'chevron-up-solid': ChevronUpSolid,
@@ -3203,17 +3236,17 @@ const icons = {
   zoom: Zoom
 };
 
-var _excluded = ["name"];
-var Icon = /*#__PURE__*/React__default.forwardRef(function Icon(props, ref) {
+const Icon = /*#__PURE__*/React__default.forwardRef(function Icon(props, ref) {
   var _props$className;
 
-  var name = props.name,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded);
-
-  var Component = icons[name];
+  const {
+    name,
+    ...otherProps
+  } = props;
+  const Component = icons[name];
   /* 24x24 _at the base body font_ - must be em so that they scale with font size - tailwind spacing uses rem */
 
-  var className = cn('inline-flex h-[1.715em] w-[1.715em] flex-shrink-0', props.className, {
+  const className = cn('inline-flex h-[1.715em] w-[1.715em] flex-shrink-0', props.className, {
     'p-[3px]': (_props$className = props.className) === null || _props$className === void 0 ? void 0 : _props$className.includes('rounded-full')
   });
   return Component ? React__default.createElement(Component, Object.assign({}, otherProps, {
@@ -3225,7 +3258,7 @@ var Icon = /*#__PURE__*/React__default.forwardRef(function Icon(props, ref) {
   })) : null;
 });
 
-var _excluded$1 = ["id"],
+var _excluded = ["id"],
     _excluded2 = ["id", "defaultId", "onChange", "as"];
 var AccordionContext = /*#__PURE__*/React__default.createContext({
   as: 'h2'
@@ -3263,7 +3296,7 @@ var Content = /*#__PURE__*/React__default.forwardRef(function AccordionContent(p
 
 var Item = function Item(props) {
   var id = props.id,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$1);
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded);
 
   return React__default.createElement(AccordionPrimitive.Item, Object.assign({}, otherProps, {
     value: id
@@ -3364,7 +3397,7 @@ const getOutlineClasses = state => {
   }
 };
 
-var _excluded$2 = ["children", "compact", "outline", "state"];
+var _excluded$1 = ["children", "compact", "outline", "state"];
 var Badge = /*#__PURE__*/React.forwardRef(function Badge(props, ref) {
   var _cn;
 
@@ -3374,9 +3407,9 @@ var Badge = /*#__PURE__*/React.forwardRef(function Badge(props, ref) {
       _props$outline = props.outline,
       outline = _props$outline === void 0 ? false : _props$outline,
       state = props.state,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$2);
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$1);
 
-  var className = cn('rounded-full border font-bold text-xs uppercase overflow-hidden whitespace-nowrap inline-flex items-center justify-center h-5', (_cn = {}, _cn[getOutlineClasses(state)] = outline, _cn["border-transparent " + getStateClasses(state)] = !outline, _cn['h-2 w-2 min-w-0'] = compact, _cn['h-5 py-0 px-1.5'] = !compact, _cn), props.className);
+  var className = cn('rounded-full border font-bold text-xs uppercase overflow-hidden whitespace-nowrap inline-flex items-center justify-center', (_cn = {}, _cn[getOutlineClasses(state)] = outline, _cn["border-transparent " + getStateClasses(state)] = !outline, _cn['h-2 w-2 min-w-0'] = compact, _cn['h-5 py-0 px-1.5'] = !compact, _cn), props.className);
   return React.createElement("span", Object.assign({}, otherProps, {
     "aria-atomic": "true",
     "aria-live": "polite",
@@ -3577,10 +3610,10 @@ var Banner = /*#__PURE__*/React.forwardRef(function Banner(props, ref) {
   }) : null);
 });
 
-var _excluded$3 = ["fluid"];
+var _excluded$2 = ["fluid"];
 var Button$1 = /*#__PURE__*/React.forwardRef(function Button(props, ref) {
   var fluid = props.fluid,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$3);
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$2);
 
   var className = cn(getButtonClasses(), getAppearanceClasses(otherProps.appearance), 'rounded px-3', {
     'cursor-not-allowed opacity-50': props.disabled,
@@ -3756,6 +3789,11 @@ const Toast = ({
   });
   const timer = useTimer(autoClose, handleClose);
   const controls = framerMotion.useAnimation();
+
+  if (!content) {
+    console.warn(`Toast requires 'content' property, which can't be empty string, null or undefined. Current content value is set to ${content === '' ? 'empty string' : content}.`);
+  }
+
   React__default.useEffect(() => {
     if (autoClose) {
       timer.start();
@@ -3791,7 +3829,7 @@ const Toast = ({
     "data-taco": "toast",
     onMouseEnter: timer.pause,
     onMouseLeave: timer.resume
-  }), getBadgeIcon(type), content && React__default.createElement("div", {
+  }), getBadgeIcon(type), React__default.createElement("div", {
     className: "flex-grow"
   }, content), React__default.createElement(IconButton, {
     appearance: "discrete",
@@ -4058,14 +4096,7 @@ const Provider = props => {
 const useTaco = () => React.useContext(Context);
 const useLocalization = () => useTaco().localization;
 
-var _excluded$4 = ["onChange", "value"];
-
-var renderDay = function renderDay(day, modifiers) {
-  return modifiers.disabled ? React.createElement("span", {
-    className: "dot"
-  }) : day.getDate();
-};
-
+var _excluded$3 = ["onChange", "value", "disabledDays"];
 var thisYear = /*#__PURE__*/new Date().getFullYear();
 var years = [];
 
@@ -4137,7 +4168,8 @@ var Navbar = /*#__PURE__*/React.memo(function (_ref) {
 var Calendar$1 = /*#__PURE__*/React.forwardRef(function Calendar(props, ref) {
   var handleChange = props.onChange,
       value = props.value,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$4);
+      disabledDays = props.disabledDays,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$3);
 
   var _useLocalization2 = useLocalization(),
       locale = _useLocalization2.locale,
@@ -4194,14 +4226,13 @@ var Calendar$1 = /*#__PURE__*/React.forwardRef(function Calendar(props, ref) {
       return null;
     },
     todayButton: texts.calendar.actions.today,
-    showOutsideDays: true,
-    renderDay: renderDay,
     numberOfMonths: 1,
-    ref: ref
+    ref: ref,
+    disabledDays: disabledDays
   })));
 });
 
-var _excluded$5 = ["checked", "highlighted", "indeterminate", "invalid", "label", "onChange"];
+var _excluded$4 = ["checked", "highlighted", "indeterminate", "invalid", "label", "onChange"];
 var Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(props, ref) {
   var checked = props.checked,
       highlighted = props.highlighted,
@@ -4209,7 +4240,7 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(props, ref) {
       invalid = props.invalid,
       label = props.label,
       onChange = props.onChange,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$5);
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$4);
 
   var className = cn('bg-white h-5 w-5 border rounded text-sm flex-shrink-0 self-start mt-[0.1rem] focus:yt-focus', //hover:shadow-[0_0_0_1px_rgba(235,235,235,1)]
   props.className, {
@@ -4360,25 +4391,25 @@ const Input = /*#__PURE__*/React.forwardRef(function Input(props, ref) {
   return input;
 });
 
-var getNextIndexFromKeycode = function getNextIndexFromKeycode(keyCode, length, index, direction) {
+var getNextIndexFromKey = function getNextIndexFromKey(key, length, index, direction) {
   if (direction === void 0) {
     direction = 'vertical';
   }
 
-  var previousKey = direction === 'horizontal' ? 'left' : 'up';
-  var nextKey = direction === 'horizontal' ? 'right' : 'down';
+  var previousKey = direction === 'horizontal' ? 'ArrowLeft' : 'ArrowUp';
+  var nextKey = direction === 'horizontal' ? 'ArrowRight' : 'ArrowDown';
 
-  switch (keyCode) {
-    case keycode(previousKey):
+  switch (key) {
+    case previousKey:
       return index !== undefined ? index - 1 < 0 ? 0 : index - 1 : index;
 
-    case keycode(nextKey):
+    case nextKey:
       return index !== undefined ? index + 1 >= length ? index : index + 1 : index;
 
-    case keycode('home'):
+    case 'Home':
       return 0;
 
-    case keycode('end'):
+    case 'End':
       return length - 1;
 
     default:
@@ -4401,7 +4432,7 @@ var useListKeyboardNavigation = function useListKeyboardNavigation(length, optio
       setIndex = _React$useState[1];
 
   var getNextIndex = function getNextIndex(event) {
-    var nextIndex = getNextIndexFromKeycode(event.keyCode, length, index, options.direction);
+    var nextIndex = getNextIndexFromKey(event.key, length, index, options.direction);
 
     if (nextIndex !== undefined) {
       event.preventDefault();
@@ -4452,7 +4483,7 @@ var useListScrollTo = function useListScrollTo(internalRef, itemRefs) {
 const getId = (id, value) => `${id}_${value}`;
 
 const getNextEnabledItem = (event, data, index) => {
-  const nextIndex = getNextIndexFromKeycode(event.keyCode, data.length, index);
+  const nextIndex = getNextIndexFromKey(event.key, data.length, index);
 
   if (nextIndex) {
     if (nextIndex === index) {
@@ -4635,7 +4666,7 @@ const createCustomKeyboardEvent = event => {
   } else {
     customKeyboardEvent = document.createEvent('Event');
     customKeyboardEvent.initEvent(event.type, true, true);
-    customKeyboardEvent.keyCode = event.keyCode;
+    customKeyboardEvent.key = event.key;
     customKeyboardEvent.charCode = event.charCode;
   }
 
@@ -4946,13 +4977,13 @@ const useCombobox = ({
   const handleInputKeyDown = event => {
     event.persist();
 
-    switch (event.keyCode) {
-      case keycode('backspace'):
+    switch (event.key) {
+      case 'Backspace':
         {
           return;
         }
 
-      case keycode('escape'):
+      case 'Escape':
         {
           event.preventDefault();
           setInputValue(convertToInputValue(value));
@@ -4960,10 +4991,10 @@ const useCombobox = ({
           return;
         }
 
-      case keycode('tab'):
-      case keycode('enter'):
+      case 'Tab':
+      case 'Enter':
         {
-          if (event.keyCode !== keycode('tab')) {
+          if (event.key !== 'Tab') {
             event.preventDefault();
           }
 
@@ -4972,7 +5003,7 @@ const useCombobox = ({
           return;
         }
 
-      case keycode('down'):
+      case 'ArrowDown':
         if (open) {
           event.preventDefault();
         } else {
@@ -4983,9 +5014,9 @@ const useCombobox = ({
 
         break;
 
-      case keycode('up'):
-      case keycode('home'):
-      case keycode('end'):
+      case 'ArrowUp':
+      case 'Home':
+      case 'End':
         {
           if (open) {
             event.preventDefault();
@@ -5001,9 +5032,9 @@ const useCombobox = ({
     }
 
     if (inline && !open) {
-      if (event.keyCode === keycode('up') || event.keyCode === keycode('down')) {
+      if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
         event.preventDefault();
-        const initialIndex = event.keyCode === keycode('up') ? data.length - 1 : 0;
+        const initialIndex = event.key === 'ArrowUp' ? data.length - 1 : 0;
         setCurrentIndex(currentIndex !== undefined ? currentIndex : initialIndex);
         setOpen(true);
       }
@@ -5121,12 +5152,12 @@ var useBoundingClientRectListener = function useBoundingClientRectListener(ref)
   return dimensions;
 };
 
-var _excluded$6 = ["className", "dialog", "style"];
+var _excluded$5 = ["className", "dialog", "style"];
 var Combobox = /*#__PURE__*/React.forwardRef(function Combobox(props, ref) {
   var externalClassName = props.className,
       dialog = props.dialog,
       style = props.style,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$6);
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$5);
 
   var _useCombobox = useCombobox(otherProps, ref),
       combobox = _useCombobox.combobox,
@@ -5495,14 +5526,14 @@ Popover.Trigger = Trigger$1;
 Popover.Content = Content$1;
 Popover.Close = Close$1;
 
-var _excluded$7 = ["className", "onReset", "style", "shortcuts", "shortcutsText"];
+var _excluded$6 = ["className", "onReset", "style", "shortcuts", "shortcutsText"];
 var Datepicker = /*#__PURE__*/React.forwardRef(function Datepicker(props, ref) {
   var externalClassName = props.className,
       handleReset = props.onReset,
       style = props.style,
       shortcuts = props.shortcuts,
       shortcutsText = props.shortcutsText,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$7);
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$6);
 
   var _useDatepicker = useDatepicker(otherProps, ref),
       calendar = _useDatepicker.calendar,
@@ -5797,7 +5828,7 @@ const Extra = /*#__PURE__*/React.forwardRef(function DialogExtra(props, ref) {
 });
 Extra.displayName = 'DialogExtra';
 
-var _excluded$8 = ["children", "closeOnEscape", "defaultOpen", "draggable", "onChange", "onClose", "open", "showCloseButton", "size", "trigger"];
+var _excluded$7 = ["children", "closeOnEscape", "defaultOpen", "draggable", "onChange", "onClose", "open", "showCloseButton", "size", "trigger"];
 
 var useSeparatedChildren = function useSeparatedChildren(initialChildren) {
   return React.useMemo(function () {
@@ -5834,7 +5865,7 @@ var Dialog = /*#__PURE__*/React.forwardRef(function Dialog(props, ref) {
       _props$size = props.size,
       size = _props$size === void 0 ? 'sm' : _props$size,
       trigger = props.trigger,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$8);
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$7);
 
   var _useSeparatedChildren = useSeparatedChildren(initialChildren),
       children = _useSeparatedChildren[0],
@@ -5884,19 +5915,18 @@ Dialog.Extra = Extra;
 Dialog.Drawer = Drawer;
 Dialog.Close = Close$2;
 
-var _excluded$9 = ["disabled", "children", "invalid", "message"];
-var Field = /*#__PURE__*/React.forwardRef(function Field(props, ref) {
-  var disabled = props.disabled,
-      children = props.children,
-      _props$invalid = props.invalid,
-      invalid = _props$invalid === void 0 ? false : _props$invalid,
-      message = props.message,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$9);
-
-  var className = cn('flex flex-col font-bold text-xs leading-loose pb-4 min-h-[theme(spacing.18)]', {
+const Field = /*#__PURE__*/React.forwardRef(function Field(props, ref) {
+  const {
+    disabled,
+    children,
+    invalid = false,
+    message,
+    ...otherProps
+  } = props;
+  const className = cn('flex flex-col font-bold text-xs leading-loose pb-4 min-h-[theme(spacing.18)]', {
     'text-grey-dark': disabled
   }, props.className);
-  var messageClassName = cn('h-4 text-xs text-left leading-normal font-normal truncate -mb-4', {
+  const messageClassName = cn('h-4 text-xs text-left leading-normal font-normal truncate -mb-4', {
     'text-grey-darkest': !invalid,
     'text-red': invalid,
     'opacity-50': disabled
@@ -5911,13 +5941,12 @@ var Field = /*#__PURE__*/React.forwardRef(function Field(props, ref) {
   }, message));
 });
 
-var _excluded$a = ["horizontal"];
-var Form = /*#__PURE__*/React.forwardRef(function Form(props, ref) {
-  var _props$horizontal = props.horizontal,
-      horizontal = _props$horizontal === void 0 ? false : _props$horizontal,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$a);
-
-  var className = cn('yt-form', {
+const Form = /*#__PURE__*/React.forwardRef(function Form(props, ref) {
+  const {
+    horizontal = false,
+    ...otherProps
+  } = props;
+  const className = cn('yt-form', {
     'yt-form--horizontal flex flex-wrap': horizontal
   }, props.className);
   return React.createElement("form", Object.assign({}, otherProps, {
@@ -5927,13 +5956,15 @@ var Form = /*#__PURE__*/React.forwardRef(function Form(props, ref) {
   }));
 });
 
-var _excluded$b = ["as"];
-var Group = /*#__PURE__*/React.forwardRef(function Group(props, ref) {
-  var _props$as = props.as,
-      Tag = _props$as === void 0 ? 'span' : _props$as,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$b);
-
-  var className = cn('flex ', props.className);
+const Group = /*#__PURE__*/React.forwardRef(function Group(props, ref) {
+  const {
+    as: Tag = 'span',
+    orientation = 'horizontal',
+    ...otherProps
+  } = props;
+  const className = cn('flex ', 'gap-2', {
+    'flex-col ': orientation === 'vertical'
+  }, props.className);
   return React.createElement(Tag, Object.assign({}, otherProps, {
     className: className,
     "data-taco": "group",
@@ -5941,19 +5972,18 @@ var Group = /*#__PURE__*/React.forwardRef(function Group(props, ref) {
   }));
 });
 
-var _excluded$c = ["anchor", "children", "defaultOpen"];
-var HangerContext = /*#__PURE__*/React.createContext({
+const HangerContext = /*#__PURE__*/React.createContext({
   props: {},
   ref: null
 });
-var Anchor = /*#__PURE__*/React.forwardRef(function HangerAnchor(props, ref) {
+const Anchor = /*#__PURE__*/React.forwardRef(function HangerAnchor(props, ref) {
   var _props$children;
 
-  var context = React.useContext(HangerContext);
-  var children = props.children;
+  const context = React.useContext(HangerContext);
+  let children = props.children;
 
   if (React.isValidElement(props.children) && typeof ((_props$children = props.children) === null || _props$children === void 0 ? void 0 : _props$children.type) === 'function') {
-    console.warn("Hanger.Anchor requires its child to forwardRef so that it can attach to the dom element. Did you mean to wrap '" + props.children.type.name + "' in React.forwardRef()? Taco has wrapped '" + props.children.type.name + "' in a 'span' to maintain functionality, but this may cause unintended behaviour");
+    console.warn(`Hanger.Anchor requires its child to forwardRef so that it can attach to the dom element. Did you mean to wrap '${props.children.type.name}' in React.forwardRef()? Taco has wrapped '${props.children.type.name}' in a 'span' to maintain functionality, but this may cause unintended behaviour`);
     children = React.createElement("span", null, props.children);
   }
 
@@ -5963,22 +5993,21 @@ var Anchor = /*#__PURE__*/React.forwardRef(function HangerAnchor(props, ref) {
     asChild: true
   }));
 });
-var Title$1 = /*#__PURE__*/React.forwardRef(function DialogTitle(props, ref) {
-  var className = cn('mb-1 text-base font-bold flex w-full', props.className);
+const Title$1 = /*#__PURE__*/React.forwardRef(function DialogTitle(props, ref) {
+  const className = cn('mb-1 text-base font-bold flex w-full', props.className);
   return React.createElement("span", Object.assign({}, props, {
     className: className,
     ref: ref
   }));
 });
-var Content$3 = /*#__PURE__*/React.forwardRef(function HangerContent(props, ref) {
-  var context = React.useContext(HangerContext);
-
-  var _useLocalization = useLocalization(),
-      texts = _useLocalization.texts;
-
-  var className = cn('wcag-blue border border-transparent rounded p-3 pr-12 yt-shadow z-[996] focus:border-transparent max-w-sm', props.className);
+const Content$3 = /*#__PURE__*/React.forwardRef(function HangerContent(props, ref) {
+  const context = React.useContext(HangerContext);
+  const {
+    texts
+  } = useLocalization();
+  const className = cn('wcag-blue border border-transparent rounded p-3 pr-12 yt-shadow z-[996] focus:border-transparent max-w-sm', props.className);
 
-  var handleInteractOutside = function handleInteractOutside(event) {
+  const handleInteractOutside = event => {
     event.preventDefault();
   };
 
@@ -6000,25 +6029,20 @@ var Content$3 = /*#__PURE__*/React.forwardRef(function HangerContent(props, ref)
     onClick: context.props.onClose
   })));
 });
-var Hanger = /*#__PURE__*/React.forwardRef(function Hanger(props, ref) {
-  var anchor = props.anchor,
-      children = props.children,
-      _props$defaultOpen = props.defaultOpen,
-      defaultOpen = _props$defaultOpen === void 0 ? true : _props$defaultOpen,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$c);
-
-  var context = React.useMemo(function () {
-    return {
-      props: otherProps,
-      ref: ref
-    };
-  }, [otherProps]); // we do this to ensure hangers are mounted after their containers, e.g. if the container is another portal
-
-  var _React$useState = React.useState(false),
-      open = _React$useState[0],
-      setOpen = _React$useState[1];
+const Hanger = /*#__PURE__*/React.forwardRef(function Hanger(props, ref) {
+  const {
+    anchor,
+    children,
+    defaultOpen = true,
+    ...otherProps
+  } = props;
+  const context = React.useMemo(() => ({
+    props: otherProps,
+    ref
+  }), [otherProps]); // we do this to ensure hangers are mounted after their containers, e.g. if the container is another portal
 
-  React.useEffect(function () {
+  const [open, setOpen] = React.useState(false);
+  React.useEffect(() => {
     if (defaultOpen) {
       setOpen(defaultOpen);
     }
@@ -6034,25 +6058,25 @@ Hanger.Anchor = Anchor;
 Hanger.Content = Content$3;
 Hanger.Title = Title$1;
 
-var _excluded$d = ["placement"];
-var Trigger$3 = /*#__PURE__*/React.forwardRef(function HoverCardTrigger(props, ref) {
+const Trigger$3 = /*#__PURE__*/React.forwardRef(function HoverCardTrigger(props, ref) {
   return React.createElement(HoverCardPrimitive.Trigger, Object.assign({}, props, {
     asChild: true,
     ref: ref
   }));
 });
-var Content$4 = /*#__PURE__*/React.forwardRef(function HoverCardContent(externalProps, ref) {
-  var placement = externalProps.placement,
-      props = _objectWithoutPropertiesLoose(externalProps, _excluded$d);
-
-  var className = cn('bg-white rounded p-3 yt-shadow', props.className);
+const Content$4 = /*#__PURE__*/React.forwardRef(function HoverCardContent(externalProps, ref) {
+  const {
+    placement,
+    ...props
+  } = externalProps;
+  const className = cn('bg-white rounded p-3 yt-shadow', props.className);
   return React.createElement(HoverCardPrimitive.Content, Object.assign({}, props, {
     className: className,
     ref: ref,
     side: placement
   }));
 });
-var HoverCard = function HoverCard(props) {
+const HoverCard = props => {
   return React.createElement(HoverCardPrimitive.Root, Object.assign({}, props, {
     openDelay: 300
   }));
@@ -6077,7 +6101,7 @@ const SearchInput = /*#__PURE__*/React.forwardRef(function SearchInput({
   const handleKeyDown = event => {
     var _props$onKeyDown;
 
-    const isEnterKeyPressed = event.keyCode === keycode('enter');
+    const isEnterKeyPressed = event.key === 'Enter';
 
     if (isEnterKeyPressed) {
       handleClick();
@@ -6180,9 +6204,10 @@ const useListbox = ({
   }, [data]);
 
   const handleListboxKeyDown = event => {
-    const charKey = String.fromCharCode(event.keyCode);
+    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.match(/(\w)/g)) {
+    if (charKey.length === 1 && /(\w)/g.test(charKey)) {
       const nextIndex = getNextIndex(charKey);
 
       if (nextIndex > -1 && nextIndex !== currentIndex) {
@@ -6355,9 +6380,10 @@ const useMultiListbox = ({
   };
 
   const handleListboxKeyDown = (event, index) => {
-    const charKey = String.fromCharCode(event.keyCode);
+    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.match(/(\w)/g)) {
+    if (charKey.length === 1 && /(\w)/g.test(charKey)) {
       const nextIndex = getNextIndex(charKey);
 
       if (nextIndex > -1 && nextIndex !== currentIndex) {
@@ -6367,22 +6393,22 @@ const useMultiListbox = ({
       return;
     }
 
-    switch (event.keyCode) {
-      case keycode('space'):
+    switch (event.key) {
+      case ' ':
         {
           event.preventDefault();
           setInputValueByIndex(index);
           break;
         }
 
-      case keycode('enter'):
+      case 'Enter':
         {
           setInputValueByIndex(index);
           break;
         }
     }
 
-    setCurrentIndex(index);
+    setCurrentIndex(index !== undefined ? index : 0);
 
     if (onKeyDown) {
       event.persist();
@@ -7043,7 +7069,8 @@ const MenuGroup = /*#__PURE__*/React__default.forwardRef(function MenuGroup(prop
 const Menu$2 = /*#__PURE__*/React__default.forwardRef(function Menu(props, ref) {
   const scrollableAreas = React__default.useMemo(() => {
     const scrollableAreas = [];
-    React__default.Children.toArray(props.children).filter(child => !!child).map(child => {
+    const children = React__default.Children.toArray(props.children).filter(child => !!child);
+    children.forEach(child => {
       if (child.props.fixed) {
         scrollableAreas.push(child);
       } else {
@@ -7180,15 +7207,15 @@ const useSelect = ({
   }, []); // event handlers
 
   const handleButtonKeyDown = event => {
-    if (event.keyCode === keycode('up') || event.keyCode === keycode('down')) {
+    if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
       event.preventDefault();
       setOpen(true);
     }
   };
 
   const handleListboxKeyDown = event => {
-    switch (event.keyCode) {
-      case keycode('escape'):
+    switch (event.key) {
+      case 'Escape':
         {
           event.preventDefault();
 
@@ -7200,10 +7227,10 @@ const useSelect = ({
           break;
         }
 
-      case keycode('tab'):
-      case keycode('enter'):
+      case 'Tab':
+      case 'Enter':
         {
-          if (event.keyCode !== keycode('tab')) {
+          if (event.key !== 'Tab') {
             event.preventDefault();
           }
 
@@ -7422,25 +7449,25 @@ const usePaginationShortcuts = ({
   dangerouslyHijackGlobalKeyboardNavigation: useGlobalKeyboardNavigation
 }) => {
   const onKeyDown = event => {
-    if (setPageIndex && event.keyCode === keycode('home')) {
+    if (setPageIndex && event.key === 'Home') {
       event.preventDefault();
       setPageIndex(0);
       return;
     }
 
-    if (setPageIndex && event.keyCode === keycode('end')) {
+    if (setPageIndex && event.key === 'End') {
       event.preventDefault();
       setPageIndex(maxPageIndex);
       return;
     }
 
-    if (setPageIndex && event.keyCode === keycode('page up')) {
+    if (setPageIndex && event.key === 'PageUp') {
       event.preventDefault();
       setPageIndex(Math.max(0, pageIndex - 1));
       return;
     }
 
-    if (setPageIndex && event.keyCode === keycode('page down')) {
+    if (setPageIndex && event.key === 'PageDown') {
       event.preventDefault();
       setPageIndex(Math.min(maxPageIndex, pageIndex + 1));
       return;
@@ -7870,7 +7897,7 @@ const getActions = (actions, row = undefined) => {
   const secondary = [];
 
   if (actions) {
-    let visibleActions = actions.filter(x => !!x);
+    let visibleActions = actions.filter(x => !!x && typeof x !== 'boolean');
 
     if (row) {
       visibleActions = visibleActions.filter(action => {
@@ -7940,7 +7967,7 @@ const EditModeActions = () => {
     const listener = event => {
       var _event$target, _event$target$form;
 
-      if (event.keyCode === keycode('escape') && (_event$target = event.target) !== null && _event$target !== void 0 && (_event$target$form = _event$target.form) !== null && _event$target$form !== void 0 && _event$target$form.reset) {
+      if (event.key === 'Escape' && (_event$target = event.target) !== null && _event$target !== void 0 && (_event$target$form = _event$target.form) !== null && _event$target$form !== void 0 && _event$target$form.reset) {
         event.preventDefault();
         event.target.form.reset();
       }
@@ -8193,7 +8220,13 @@ const useTableKeyboardNavigation = (props, rows, rowProps, ref) => {
   const [activeIndex, setActiveIndex] = reactUseControllableState.useControllableState({
     prop: props.activeIndex,
     defaultProp: props.defaultActiveIndex !== undefined ? props.defaultActiveIndex : useGlobalKeyboardNavigation ? 0 : undefined,
-    onChange: props.onChangeActiveIndex
+    onChange: index => {
+      if (index !== undefined) {
+        var _props$onChangeActive;
+
+        (_props$onChangeActive = props.onChangeActiveIndex) === null || _props$onChangeActive === void 0 ? void 0 : _props$onChangeActive.call(props, index);
+      }
+    }
   });
 
   const onKeyDown = event => {
@@ -8216,24 +8249,24 @@ const useTableKeyboardNavigation = (props, rows, rowProps, ref) => {
       if (currentRow) {
         const sanitizedRow = sanitizeRowProps(currentRow, rowProps.rowExpansionRenderer);
 
-        if (rowProps.onRowClick && event.keyCode === keycode('enter')) {
+        if (rowProps.onRowClick && event.key === 'Enter') {
           event.preventDefault();
           rowProps.onRowClick(sanitizedRow);
           return;
         }
 
-        if (currentRow.toggleRowSelected && event.keyCode === keycode('space')) {
+        if (currentRow.toggleRowSelected && event.key === ' ') {
           event.preventDefault();
           currentRow.toggleRowSelected();
           return;
         }
 
         if (currentRow.toggleRowExpanded) {
-          if (currentRow.isExpanded && event.keyCode === keycode('left')) {
+          if (currentRow.isExpanded && event.key === 'ArrowLeft') {
             event.preventDefault();
             currentRow.toggleRowExpanded();
             return;
-          } else if (!currentRow.isExpanded && event.keyCode === keycode('right')) {
+          } else if (!currentRow.isExpanded && event.key === 'ArrowRight') {
             event.preventDefault();
             currentRow.toggleRowExpanded();
             return;
@@ -8243,7 +8276,7 @@ const useTableKeyboardNavigation = (props, rows, rowProps, ref) => {
 
         if (currentRow.toggleRowEditing) {
           if (currentRow.canEdit && !currentRow.isEditing) {
-            if (rowProps.onRowCreate && event.shiftKey && event.keyCode === keycode('n')) {
+            if (rowProps.onRowCreate && event.shiftKey && event.key === 'n') {
               event.preventDefault();
 
               if (!currentRow.isExpanded) {
@@ -8254,7 +8287,7 @@ const useTableKeyboardNavigation = (props, rows, rowProps, ref) => {
               return;
             }
 
-            if (event.keyCode === keycode('e')) {
+            if (event.key === 'e') {
               event.preventDefault();
               currentRow.toggleRowEditing();
               return;
@@ -8262,19 +8295,19 @@ const useTableKeyboardNavigation = (props, rows, rowProps, ref) => {
           }
         }
 
-        if (rowProps.onRowEdit && event.keyCode === keycode('e') && !isModifierKeyPressed) {
+        if (rowProps.onRowEdit && event.key === 'e' && !isModifierKeyPressed) {
           event.preventDefault();
           rowProps.onRowEdit(sanitizedRow, event);
           return;
         }
 
-        if (rowProps.onRowCopy && event.keyCode === keycode('c') && !isModifierKeyPressed) {
+        if (rowProps.onRowCopy && event.key === 'c' && !isModifierKeyPressed) {
           event.preventDefault();
           rowProps.onRowCopy(sanitizedRow, event);
           return;
         }
 
-        if (rowProps.onRowDelete && event.keyCode === keycode('delete') && !isModifierKeyPressed) {
+        if (rowProps.onRowDelete && event.key === 'Delete' && !isModifierKeyPressed) {
           event.preventDefault();
           rowProps.onRowDelete(sanitizedRow, event);
           return;
@@ -8282,7 +8315,7 @@ const useTableKeyboardNavigation = (props, rows, rowProps, ref) => {
       }
     }
 
-    const nextIndex = getNextIndexFromKeycode(event.keyCode, rows.length, activeIndex);
+    const nextIndex = getNextIndexFromKey(event.key, rows.length, activeIndex);
 
     if (nextIndex !== undefined) {
       event.preventDefault();
@@ -8509,7 +8542,7 @@ const useTable = (props, ref) => {
   const {
     children,
     data,
-    dangerouslyHijackGlobalKeyboardNavigation: _1,
+    dangerouslyHijackGlobalKeyboardNavigation: _,
     onRowClick,
     onRowDrag,
     onSelectedRows,
@@ -8522,6 +8555,10 @@ const useTable = (props, ref) => {
     manualSorting,
     onSort,
     sortRules,
+    //index
+    activeIndex: _1,
+    defaultActiveIndex: _2,
+    onChangeActiveIndex: _3,
     // pagination
     disablePagination = true,
     length,
@@ -9337,7 +9374,7 @@ const Tooltip$1 = ({
   React.useEffect(() => {
     const onWindowKeyDown = event => {
       if (!disableTourSkipOnEsc) {
-        if (event.keyCode === keycode('esc') && skipButtonRef.current !== null) {
+        if (event.key === 'Escape' && skipButtonRef.current !== null) {
           event.preventDefault();
           skipButtonRef.current.click();
           return;
@@ -9477,10 +9514,10 @@ var useOnClickOutside = function useOnClickOutside(ref, callback) {
   }, [ref, callback]);
 };
 
-var _excluded$e = ["noPadding"];
+var _excluded$8 = ["noPadding"];
 var Content$6 = /*#__PURE__*/React.forwardRef(function CardContent(externalProps, ref) {
   var noPadding = externalProps.noPadding,
-      props = _objectWithoutPropertiesLoose(externalProps, _excluded$e);
+      props = _objectWithoutPropertiesLoose(externalProps, _excluded$8);
 
   var className = cn('flex-grow overflow-auto', {
     'mx-4 mb-4': !noPadding
@@ -9561,7 +9598,7 @@ exports.defaultLocalisationTexts = defaultLocalisationTexts;
 exports.findByValue = findByValue$1;
 exports.format = format;
 exports.getByRowIndexPath = getByRowIndexPath;
-exports.getNextIndexFromKeycode = getNextIndexFromKeycode;
+exports.getNextIndexFromKey = getNextIndexFromKey;
 exports.getParentRowIndexPath = getParentRowIndexPath;
 exports.getRadioGroupItemValueAsString = getRadioGroupItemValueAsString;
 exports.icons = icons;