@economic/taco 0.0.12-alpha.0 → 0.0.15-alpha.0

package/dist/taco.cjs.development.js

@@ -3192,7 +3192,7 @@ Accordion.Trigger = Trigger;
 Accordion.Content = Content;
 
 var Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(props, ref) {
-  var className = cn('fixed inset-0 cursor-default overflow-y-auto bg-[rgba(50,46,62,0.8)] animate-[fade-in_150ms] aria-hidden:hidden', props.className);
+  var className = cn('fixed inset-0 cursor-default overflow-y-auto bg-[rgba(50,46,62,0.8)] aria-hidden:hidden', props.className);
   return React.createElement("div", Object.assign({}, props, {
     className: className,
     ref: ref
@@ -3349,7 +3349,7 @@ var Tooltip = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
 var _excluded$5 = ["dialog", "hanger", "menu", "popover", "tooltip"];
 var getButtonClasses = function getButtonClasses() {
-  return 'min-h-[theme(spacing.8)] min-w-[theme(spacing.8)] leading-6 inline-flex items-center justify-center transition-all delay-100 ease-in border';
+  return 'min-h-[theme(spacing.8)] min-w-[theme(spacing.8)] h-max leading-6 inline-flex items-center justify-center transition-all delay-100 ease-in border';
 };
 var getAppearanceClasses = function getAppearanceClasses(value, icon) {
   if (icon === void 0) {
@@ -3358,25 +3358,25 @@ var getAppearanceClasses = function getAppearanceClasses(value, icon) {
 
   switch (value) {
     case 'primary':
-      return "yt-blue-solid border-blue\n                focus:bg-blue focus:text-white focus:yt-focus\n                active:bg-blue-dark active:text-white \n                hover:bg-blue-light hover:border-blue-light hover:text-white\n                hover:focus:bg-blue-light hover:focus:border-blue-light hover:focus:text-white\n                disabled:hover:yt-blue-solid";
+      return "yt-blue-solid border-blue focus:bg-blue focus:text-white focus:yt-focus active:bg-blue-dark active:text-white  hover:bg-blue-light hover:border-blue-light hover:text-white hover:focus:bg-blue-light hover:focus:border-blue-light hover:focus:text-white disabled:hover:yt-blue-solid";
 
     case 'danger':
-      return "yt-red-solid border-red\n                focus:bg-red focus:text-white focus:yt-focus-red\n                active:bg-red-dark active:text-white \n                hover:bg-red-light hover:text-white\n                hover:focus:bg-red-light hover:focus:text-white\n                disabled:hover:yt-red-solid";
+      return "yt-red-solid border-red focus:bg-red focus:text-white focus:yt-focus-red active:bg-red-dark active:text-white  hover:bg-red-light hover:text-white hover:focus:bg-red-light hover:focus:text-white disabled:hover:yt-red-solid";
 
     case 'ghost':
-      return "yt-blue-inverted\n                focus:bg-transparent focus:text-blue focus:yt-focus\n                active:bg-blue-lightest active:border-blue active:text-blue-dark \n                hover:bg-blue-lightest hover:border-blue-light hover:text-blue-light\n                hover:focus:bg-blue-lightest hover:focus:border-blue-light hover:focus:text-blue-light\n                disabled:hover:yt-blue-inverted";
+      return "yt-blue-inverted focus:bg-transparent focus:text-blue focus:yt-focus active:bg-blue-lightest active:border-blue active:text-blue-dark  hover:bg-blue-lightest hover:border-blue-light hover:text-blue-light hover:focus:bg-blue-lightest hover:focus:border-blue-light hover:focus:text-blue-light disabled:hover:yt-blue-inverted";
 
     case 'discrete':
       {
         if (icon) {
-          return "bg-transparent text-black border-transparent\n                    focus:text-black focus:yt-focus\n                    active:text-black\n                    hover:text-grey-darkest\n                    hover:focus:text-grey-darkest\n                    disabled:hover:yt-transparent";
+          return "bg-transparent text-black border-transparent focus:text-black focus:yt-focus active:text-black hover:text-grey-darkest hover:focus:text-grey-darkest disabled:hover:yt-transparent";
         }
 
-        return "yt-transparent border-transparent\n                focus:text-blue focus:yt-focus\n                active:text-blue-dark\n                hover:text-blue-light\n                hover:focus:text-blue-light\n                disabled:hover:yt-transparent";
+        return "yt-transparent border-transparent focus:text-blue focus:yt-focus active:text-blue-dark hover:text-blue-light hover:focus:text-blue-light disabled:hover:yt-transparent";
       }
 
     default:
-      return "yt-grey-solid border-grey\n                focus:bg-grey focus:yt-focus\n                active:bg-grey-dark active:text-black\n                hover:bg-grey-light hover:text-grey-darkest\n                hover:focus:bg-grey-light hover:focus:text-grey-darkest\n                disabled:hover:yt-grey-solid";
+      return "yt-grey-solid border-grey focus:bg-grey focus:yt-focus active:bg-grey-dark active:text-black hover:bg-grey-light hover:text-grey-darkest hover:focus:bg-grey-light hover:focus:text-grey-darkest disabled:hover:yt-grey-solid";
   }
 };
 var createButton = function createButton(props, className, ref) {
@@ -3459,7 +3459,7 @@ var Banner = /*#__PURE__*/React.forwardRef(function Banner(props, ref) {
     "data-taco": "banner",
     ref: ref
   }, getBannerIcon(state), children, onClose ? React.createElement(IconButton, {
-    className: "ml-auto",
+    className: "ml-auto -mr-2",
     icon: "close",
     appearance: "discrete",
     onClick: onClose
@@ -3477,7 +3477,20 @@ var Button$1 = /*#__PURE__*/React.forwardRef(function Button(props, ref) {
     'focus:yt-focus active:focus:yt-focus': !props.disabled,
     'w-full': fluid
   }, props.className);
+  var children = otherProps.children; // add a chevron icon to menu buttons
+
+  if (typeof otherProps.menu === 'function') {
+    children = Array.isArray(children) ? [].concat(children, [React.createElement(Icon, {
+      key: "chevron-down",
+      name: "chevron-down"
+    })]) : [children, React.createElement(Icon, {
+      key: "chevron-down",
+      name: "chevron-down"
+    })];
+  }
+
   return createButton(_extends({}, otherProps, {
+    children: children,
     'data-taco': 'button'
   }), className, ref);
 });
@@ -3942,7 +3955,7 @@ var defaultLocalisationTexts = {
     back: 'Back',
     close: 'Close',
     skip: 'Close and complete',
-    last: 'Last',
+    last: 'Done',
     next: 'Next',
     open: 'Open'
   },
@@ -4015,7 +4028,7 @@ var Navbar = /*#__PURE__*/React.memo(function (_ref) {
   };
 
   return React.createElement("div", {
-    className: "flex justify-between items-center mb-2"
+    className: "mb-2 flex items-center justify-between"
   }, React.createElement("form", {
     className: "inline-flex space-x-1"
   }, React.createElement("select", {
@@ -4025,6 +4038,7 @@ var Navbar = /*#__PURE__*/React.memo(function (_ref) {
     value: value.getMonth()
   }, months.map(function (month, i) {
     return React.createElement("option", {
+      key: month,
       value: i
     }, month);
   })), React.createElement("select", {
@@ -4034,6 +4048,7 @@ var Navbar = /*#__PURE__*/React.memo(function (_ref) {
     value: value.getFullYear()
   }, years.map(function (year) {
     return React.createElement("option", {
+      key: year,
       value: year
     }, String(year));
   }))), React.createElement("div", null, React.createElement(IconButton, {
@@ -4230,10 +4245,11 @@ var getButtonStateClasses = function getButtonStateClasses(value) {
   }
 };
 
-var _excluded$d = ["button", "icon", "highlighted", "state", "autoFocus"];
+var _excluded$d = ["button", "icon", "highlighted", "onKeyDown", "state", "autoFocus"];
 var Input = /*#__PURE__*/React.forwardRef(function Input(props, ref) {
   var button = props.button,
       icon = props.icon,
+      onKeyDown = props.onKeyDown,
       state = props.state,
       autoFocus = props.autoFocus,
       otherProps = _objectWithoutPropertiesLoose(props, _excluded$d);
@@ -4247,10 +4263,26 @@ var Input = /*#__PURE__*/React.forwardRef(function Input(props, ref) {
     if (autoFocus && inputRef.current) {
       inputRef.current.focus();
     }
-  }, []);
+  }, []); // home and end keys only navigate to the start/end of input value if the input container does not scroll
+  // if it has scroll height then the browser reverts to native scrolling behaviour only
+  // so we manually override it to ensure _our_ desired behaviour remains intact
+
+  var handleKeyDown = function handleKeyDown(event) {
+    if (event.key === 'Home' || event.key === 'End') {
+      event.preventDefault();
+      var position = event.key === 'End' ? event.currentTarget.value.length : 0;
+      event.currentTarget.setSelectionRange(position, position);
+    }
+
+    if (onKeyDown) {
+      onKeyDown(event);
+    }
+  };
+
   var input = React.createElement("input", Object.assign({}, otherProps, {
     className: className,
     "data-taco": "input",
+    onKeyDown: handleKeyDown,
     ref: inputRef
   }));
 
@@ -5307,10 +5339,19 @@ var useDatepicker = function useDatepicker(_ref, ref) {
     setInputValueByRef(inputRef.current, format(date, formatting.date), 'focusout');
   };
 
+  var handleKeyDown = function handleKeyDown(event) {
+    if (event.key === 'Enter') {
+      event.target.dispatchEvent(new Event('focusout', {
+        bubbles: true
+      }));
+    }
+  };
+
   var inputProps = _extends({}, props, {
     autoComplete: 'off',
     onBlur: handleInputBlur,
     onChange: handleInputChange,
+    onKeyDown: handleKeyDown,
     ref: inputRef,
     type: 'text',
     value: internalValue
@@ -5652,7 +5693,7 @@ var Content$2 = /*#__PURE__*/React.forwardRef(function DialogContent(props, ref)
     };
   }
 
-  var className = cn('bg-white rounded relative mt-16 mx-auto', {
+  var className = cn('bg-white rounded relative mt-16 mx-auto animate-[fade-in_150ms]', {
     'w-128 text-center justify-center': dialog.size === 'dialog',
     'w-xs': dialog.size === 'xs',
     'w-sm': dialog.size === 'sm',
@@ -5770,9 +5811,11 @@ var useSeparatedChildren = function useSeparatedChildren(initialChildren) {
     var drawer;
     var extra;
     React.Children.forEach(initialChildren, function (child) {
-      if (child.type.displayName === 'Drawer') {
+      var _child$type, _child$type2;
+
+      if (((_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.displayName) === 'Drawer') {
         drawer = child;
-      } else if (child.type.displayName === 'Extra') {
+      } else if (((_child$type2 = child.type) === null || _child$type2 === void 0 ? void 0 : _child$type2.displayName) === 'Extra') {
         extra = child;
       } else {
         children.push(child);
@@ -5847,11 +5890,40 @@ Dialog.Extra = Extra;
 Dialog.Drawer = Drawer;
 Dialog.Close = Close$2;
 
-var _excluded$n = ["horizontal"];
+var _excluded$n = ["disabled", "children", "message", "state"];
+var Field = /*#__PURE__*/React.forwardRef(function Field(props, ref) {
+  var disabled = props.disabled,
+      children = props.children,
+      message = props.message,
+      state = props.state,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$n);
+
+  var 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', {
+    'text-grey-darkest': !state || state === 'default',
+    'text-red': state === 'error',
+    'text-green': state === 'success',
+    'text-blue': state === 'information',
+    'text-yellow-dark': state === 'warning',
+    'opacity-50': disabled
+  }, props.className);
+  return React.createElement("label", Object.assign({}, otherProps, {
+    className: className,
+    "data-taco": "label",
+    ref: ref
+  }), children, message && React.createElement("span", {
+    className: messageClassName,
+    role: state === 'error' ? 'alert' : undefined
+  }, message));
+});
+
+var _excluded$o = ["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$n);
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$o);
 
   var className = cn('yt-form', {
     'yt-form--horizontal flex flex-wrap': horizontal
@@ -5863,11 +5935,11 @@ var Form = /*#__PURE__*/React.forwardRef(function Form(props, ref) {
   }));
 });
 
-var _excluded$o = ["as"];
+var _excluded$p = ["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$o);
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$p);
 
   var className = cn('flex ', props.className);
   return React.createElement(Tag, Object.assign({}, otherProps, {
@@ -5877,7 +5949,7 @@ var Group = /*#__PURE__*/React.forwardRef(function Group(props, ref) {
   }));
 });
 
-var _excluded$p = ["anchor", "children"];
+var _excluded$q = ["anchor", "children"];
 var HangerContext = /*#__PURE__*/React.createContext({
   props: {},
   ref: null
@@ -5930,7 +6002,7 @@ var Content$3 = /*#__PURE__*/React.forwardRef(function (props, ref) {
 var Hanger = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var anchor = props.anchor,
       children = props.children,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$p);
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$q);
 
   var context = React.useMemo(function () {
     return {
@@ -5947,10 +6019,10 @@ var Hanger = /*#__PURE__*/React.forwardRef(function (props, ref) {
 Hanger.Anchor = Anchor;
 Hanger.Content = Content$3;
 
-var _excluded$q = ["onSearch"];
+var _excluded$r = ["onSearch"];
 var SearchInput = /*#__PURE__*/React.forwardRef(function SearchInput(_ref, ref) {
   var onSearch = _ref.onSearch,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$q);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$r);
 
   var _useLocalization = useLocalization(),
       texts = _useLocalization.texts;
@@ -5974,44 +6046,16 @@ var SearchInput = /*#__PURE__*/React.forwardRef(function SearchInput(_ref, ref)
   }, props, {
     button: React.createElement(IconButton, {
       icon: "search",
-      className: "!bg-transparent !border-transparent",
+      className: "!border-transparent !bg-transparent",
       disabled: props.disabled,
       onClick: handleClick
     }),
     onKeyDown: handleKeyDown,
-    ref: ref
+    ref: ref,
+    type: "search"
   }));
 });
 
-var _excluded$r = ["disabled", "children", "message", "state"];
-var Label = /*#__PURE__*/React.forwardRef(function Label(props, ref) {
-  var disabled = props.disabled,
-      children = props.children,
-      message = props.message,
-      state = props.state,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$r);
-
-  var 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', {
-    'text-grey-darkest': !state || state === 'default',
-    'text-red': state === 'error',
-    'text-green': state === 'success',
-    'text-blue': state === 'information',
-    'text-yellow-dark': state === 'warning',
-    'opacity-50': disabled
-  }, props.className);
-  return React.createElement("label", Object.assign({}, otherProps, {
-    className: className,
-    "data-taco": "label",
-    ref: ref
-  }), children, message && React.createElement("span", {
-    className: messageClassName,
-    role: state === 'error' ? 'alert' : undefined
-  }, message));
-});
-
 var useTypeahead = function useTypeahead(_ref) {
   var data = _ref.data,
       currentIndex = _ref.currentIndex;
@@ -8387,9 +8431,11 @@ var useTableKeyboardNavigation = function useTableKeyboardNavigation(props, rows
       setActiveIndex = _React$useState[1];
 
   var onKeyDown = function onKeyDown(event) {
+    var _document$activeEleme;
+
     var isModifierKeyPressed = event.metaKey || event.ctrlKey || event.altKey || event.shiftKey;
 
-    if (useGlobalKeyboardNavigation && !(document.activeElement === ref.current || document.activeElement === document.body)) {
+    if (useGlobalKeyboardNavigation && document.activeElement !== ref.current && ((_document$activeEleme = document.activeElement) === null || _document$activeEleme === void 0 ? void 0 : _document$activeEleme.getAttribute('type')) !== 'search' && document.activeElement !== document.body) {
       return;
     } // abort key handling if other elements inside table are focused and we don't use global keyboard navigation
 
@@ -9540,13 +9586,31 @@ Tabs.List = TabList;
 Tabs.Trigger = TabTrigger;
 Tabs.Content = TabContent;
 
-var _excluded$Q = ["defaultValue", "highlighted", "state"];
+var _excluded$Q = ["defaultValue", "highlighted", "onKeyDown", "state"];
 var Textarea = /*#__PURE__*/React.forwardRef(function Textarea(props, ref) {
-  var otherProps = _objectWithoutPropertiesLoose(props, _excluded$Q);
+  var onKeyDown = props.onKeyDown,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$Q);
+
+  var classNames = cn(getInputClasses(props), 'py-1 min-h-[75px] disabled:resize-none', props.className); // home and end keys only navigate to the start/end of textarea value if the textarea container does not scroll
+  // if it has scroll height then the browser reverts to native scrolling behaviour only
+  // so we manually override it to ensure _our_ desired behaviour remains intact
+
+  var handleKeyDown = function handleKeyDown(event) {
+    if (event.key === 'Home' || event.key === 'End') {
+      event.preventDefault();
+      var position = event.key === 'End' ? event.currentTarget.value.length : 0;
+      event.currentTarget.setSelectionRange(position, position);
+      event.currentTarget.scrollTop = event.key === 'End' ? event.currentTarget.scrollHeight : 0;
+    }
+
+    if (onKeyDown) {
+      onKeyDown(event);
+    }
+  };
 
-  var classNames = cn(getInputClasses(props), 'py-1 min-h-[75px] disabled:resize-none', props.className);
   return React.createElement("textarea", Object.assign({}, otherProps, {
     className: classNames,
+    onKeyDown: handleKeyDown,
     ref: ref
   }));
 });
@@ -9752,13 +9816,13 @@ exports.Checkbox = Checkbox;
 exports.Combobox = Combobox;
 exports.Datepicker = Datepicker;
 exports.Dialog = Dialog;
+exports.Field = Field;
 exports.Form = Form;
 exports.Group = Group;
 exports.Hanger = Hanger;
 exports.Icon = Icon;
 exports.IconButton = IconButton;
 exports.Input = Input;
-exports.Label = Label;
 exports.Listbox = Listbox;
 exports.Menu = Menu;
 exports.MultiListbox = MultiListbox;
@@ -9797,6 +9861,7 @@ exports.parseFromCustomString = parseFromCustomString;
 exports.parseFromISOString = parseFromISOString;
 exports.removeChildTableRow = removeChildTableRow;
 exports.setByRowIndexPath = setByRowIndexPath;
+exports.useBoundingClientRectListener = useBoundingClientRectListener;
 exports.useListKeyboardNavigation = useListKeyboardNavigation;
 exports.useListScrollTo = useListScrollTo;
 exports.useLocalization = useLocalization;