@economic/taco 0.0.25-alpha.0 → 0.0.26-alpha.8

package/dist/taco.cjs.development.js

@@ -3467,7 +3467,7 @@ var IconButton = /*#__PURE__*/React.forwardRef(function IconButton(props, ref) {
       rounded = _props$rounded === void 0 ? false : _props$rounded,
       otherProps = _objectWithoutPropertiesLoose(props, _excluded$6);
 
-  var className = cn(getButtonClasses(), getAppearanceClasses(appearance, true), {
+  var className = cn('w-8', getButtonClasses(), getAppearanceClasses(appearance, true), {
     'rounded-full': rounded,
     rounded: !rounded,
     'cursor-not-allowed opacity-50': props.disabled,
@@ -3941,6 +3941,9 @@ var defaultLocalisationTexts = {
       today: 'Today'
     }
   },
+  combobox: {
+    tooltip: 'Search in list'
+  },
   datepicker: {
     calendar: 'Calendar',
     clear: 'Clear',
@@ -4200,9 +4203,9 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(props, ref) {
   }
 
   var element = React.createElement(CheckboxPrimitive.Root, Object.assign({}, otherProps, {
-    "data-taco": "checkbox",
     checked: indeterminate ? 'indeterminate' : checked,
     className: className,
+    "data-taco": "checkbox",
     onCheckedChange: handleChange,
     ref: ref
   }), React.createElement(CheckboxPrimitive.Indicator, {
@@ -4216,7 +4219,7 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(props, ref) {
     var labelClassName = cn('flex items-center cursor-pointer', {
       'cursor-not-allowed text-grey-dark': props.disabled
     });
-    return React.createElement("label", {
+    element = React.createElement("label", {
       className: labelClassName
     }, element, label);
   }
@@ -4239,56 +4242,30 @@ var useProxiedRef = function useProxiedRef(ref) {
 };
 
 var getInputClasses = function getInputClasses(props) {
-  var _cn;
-
-  return cn('peer bg-white text-black text-sm border font-normal not-italic no-underline rounded inline-flex leading-6 px-2 relative w-full text-ellipsis transition-all delay-100 ease-in flex items-center', (_cn = {
+  return cn('peer bg-white text-black text-sm border font-normal not-italic no-underline rounded inline-flex leading-6 px-2 relative w-full text-ellipsis transition-all delay-100 ease-in flex items-center', {
     'cursor-not-allowed text-black bg-grey': props.readOnly,
-    'border-grey text-opacity-25 cursor-not-allowed': props.disabled
-  }, _cn[getStateClasses$1(props.state)] = !props.disabled, _cn['bg-[rgba(255,255,0,0.075)]'] = props.highlighted && props.disabled, _cn['bg-[rgba(255,255,0,0.2)]'] = props.highlighted && !props.disabled, _cn));
+    'border-grey text-opacity-25 cursor-not-allowed': props.disabled,
+    'bg-[rgba(255,255,0,0.075)]': props.highlighted && props.disabled,
+    'bg-[rgba(255,255,0,0.2)]': props.highlighted && !props.disabled,
+    'border-grey-dark hover:shadow-[0_0_0.1rem_theme(colors.grey.darker)] focus:border-blue-light focus:yt-focus active:border-blue-dark': !props.invalid,
+    'border-red hover:shadow-[0_0_0.15rem_theme(colors.red.DEFAULT)] focus:border-red-light focus:yt-focus-red active:border-red-dark': props.invalid
+  });
 };
-var getStateClasses$1 = function getStateClasses(value) {
-  switch (value) {
-    case 'success':
-      return 'border-green hover:shadow-[0_0_0.15rem_theme(colors.green.DEFAULT)] focus:border-green-light focus:yt-focus-green active:border-green-dark';
-
-    case 'error':
-      return 'border-red hover:shadow-[0_0_0.15rem_theme(colors.red.DEFAULT)] focus:border-red-light focus:yt-focus-red active:border-red-dark';
-
-    case 'warning':
-      return 'border-yellow-dark hover:shadow-[0_0_0.15rem_theme(colors.yellow.dark)] focus:yt-focus-yellow active:border-yellow-dark';
-
-    case 'information':
-      return 'border-blue hover:shadow-[0_0_0.15rem_theme(colors.blue.dark)] focus:border-blue-light focus:yt-focus active:border-blue-dark';
-
-    default:
-      return 'border-grey-dark hover:shadow-[0_0_0.1rem_theme(colors.grey.darker)] focus:border-blue-light focus:yt-focus active:border-blue-dark';
+var getButtonStateClasses = function getButtonStateClasses(invalid) {
+  if (invalid) {
+    return '!border-red focus:!border-red-light focus:yt-focus-red peer-focus:!border-red-light peer-focus:peer-active:!border-red-dark';
   }
-};
-var getButtonStateClasses = function getButtonStateClasses(value) {
-  switch (value) {
-    case 'success':
-      return '!border-green focus:!border-green-light focus:yt-focus-green peer-focus:!border-green-light peer-focus:peer-active:!border-green-dark';
-
-    case 'error':
-      return '!border-red focus:!border-red-light focus:yt-focus-red peer-focus:!border-red-light peer-focus:peer-active:!border-red-dark';
-
-    case 'warning':
-      return '!border-yellow-dark focus:!border-yellow-dark focus:yt-focus-yellow peer-focus:peer-active:!border-yellow-dark';
 
-    case 'information':
-      return '!border-blue focus:!border-blue-light peer-focus:!border-blue-light peer-focus:peer-active:!border-blue-dark';
-
-    default:
-      return '!border-grey-dark focus:!border-blue-light peer-focus:!border-blue-light peer-focus:peer-active:!border-blue-dark';
-  }
+  return '!border-grey-dark focus:!border-blue-light peer-focus:!border-blue-light peer-focus:peer-active:!border-blue-dark';
 };
 
-var _excluded$d = ["button", "icon", "highlighted", "onKeyDown", "state", "autoFocus"];
+var _excluded$d = ["button", "icon", "highlighted", "invalid", "onKeyDown", "autoFocus"];
 var Input = /*#__PURE__*/React.forwardRef(function Input(props, ref) {
   var button = props.button,
       icon = props.icon,
+      _props$invalid = props.invalid,
+      invalid = _props$invalid === void 0 ? false : _props$invalid,
       onKeyDown = props.onKeyDown,
-      state = props.state,
       autoFocus = props.autoFocus,
       otherProps = _objectWithoutPropertiesLoose(props, _excluded$d);
 
@@ -4331,7 +4308,7 @@ var Input = /*#__PURE__*/React.forwardRef(function Input(props, ref) {
       var _button$props$disable, _cn;
 
       var disabled = (_button$props$disable = button.props.disabled) !== null && _button$props$disable !== void 0 ? _button$props$disable : otherProps.disabled;
-      var buttonClassName = cn('items-center flex justify-center border absolute rounded-l-none rounded-r right-0 h-full focus:rounded focus:outline-none', (_cn = {}, _cn[getButtonStateClasses(state)] = !props.disabled, _cn), button.props.className);
+      var buttonClassName = cn('items-center flex justify-center border absolute rounded-l-none rounded-r right-0 h-full focus:rounded focus:outline-none', (_cn = {}, _cn[getButtonStateClasses(invalid)] = !props.disabled, _cn), button.props.className);
       extra = React.cloneElement(button, {
         className: buttonClassName,
         disabled: disabled
@@ -4350,7 +4327,7 @@ var Input = /*#__PURE__*/React.forwardRef(function Input(props, ref) {
     }
 
     var containerClassName = cn('bg-white inline-flex relative rounded w-full', otherProps.className);
-    return React.createElement("div", {
+    input = React.createElement("div", {
       className: containerClassName,
       "data-taco": "input-container"
     }, input, extra);
@@ -4448,7 +4425,7 @@ var useListScrollTo = function useListScrollTo(internalRef, itemRefs) {
   };
 };
 
-var _excluded$e = ["data", "disabled", "highlighted", "id", "loading", "onChange", "onClick", "onFocus", "onKeyDown", "readOnly", "scrollOnFocus", "state", "value", "multiselect", "selectedIndexes", "allOptionsSelected"],
+var _excluded$e = ["data", "disabled", "highlighted", "id", "invalid", "loading", "onChange", "onClick", "onFocus", "onKeyDown", "readOnly", "scrollOnFocus", "value", "multiselect", "selectedIndexes", "allOptionsSelected"],
     _excluded2$1 = ["children", "icon"];
 var getId = function getId(id, value) {
   return id + "_" + value;
@@ -4850,7 +4827,7 @@ var filterData = function filterData(data, value) {
   });
 };
 
-var _excluded$g = ["aria-label", "aria-labelledby", "data", "defaultValue", "disabled", "id", "inline", "loading", "onChange", "onClick", "onKeyDown", "onSearch", "readOnly", "value"];
+var _excluded$g = ["aria-label", "aria-labelledby", "data", "defaultValue", "disabled", "inline", "loading", "onChange", "onClick", "onKeyDown", "onSearch", "readOnly", "value"];
 var debouncer = /*#__PURE__*/debounce(function (f) {
   return f();
 }, 200);
@@ -4875,6 +4852,7 @@ var useCombobox = function useCombobox(_ref, ref) {
       props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
 
   var inputRef = useProxiedRef(ref);
+  var buttonRef = React.useRef(null);
   var listRef = React.useRef(null);
 
   var _React$useState = React.useState(false),
@@ -5036,8 +5014,18 @@ var useCombobox = function useCombobox(_ref, ref) {
           return;
         }
 
-      case keycode('up'):
       case keycode('down'):
+        if (open) {
+          event.preventDefault();
+        } else {
+          if (!inline && buttonRef.current) {
+            buttonRef.current.click();
+          }
+        }
+
+        break;
+
+      case keycode('up'):
       case keycode('home'):
       case keycode('end'):
         {
@@ -5102,7 +5090,7 @@ var useCombobox = function useCombobox(_ref, ref) {
     readOnly: readOnly,
     ref: inputRef,
     type: 'text',
-    value: inputValue || ''
+    value: inputValue !== null && inputValue !== void 0 ? inputValue : ''
   });
 
   var list = {
@@ -5117,10 +5105,14 @@ var useCombobox = function useCombobox(_ref, ref) {
     tabIndex: -1,
     value: currentIndex
   };
+  var button = {
+    ref: buttonRef
+  };
   return {
     combobox: combobox,
     input: input,
     list: list,
+    button: button,
     popover: {
       open: open,
       onOpenChange: setOpen
@@ -5173,19 +5165,25 @@ var useBoundingClientRectListener = function useBoundingClientRectListener(ref)
   return dimensions;
 };
 
-var _excluded$h = ["className", "style"];
+var _excluded$h = ["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$h);
 
   var _useCombobox = useCombobox(otherProps, ref),
       combobox = _useCombobox.combobox,
+      button = _useCombobox.button,
       input = _useCombobox.input,
       popover = _useCombobox.popover,
       list = _useCombobox.list;
 
   var internalRef = React.useRef(null);
+
+  var _useLocalization = useLocalization(),
+      texts = _useLocalization.texts;
+
   var selectDimensions = useBoundingClientRectListener(internalRef);
   var className = cn('inline-flex relative', {
     'yt-combobox--inline': props.inline
@@ -5210,7 +5208,19 @@ var Combobox = /*#__PURE__*/React.forwardRef(function Combobox(props, ref) {
         return popover.onOpenChange(true);
       },
       tabIndex: -1
-    }) : props.button
+    }) : dialog ? React.createElement(IconButton, {
+      icon: "list-search",
+      disabled: props.readOnly || props.disabled,
+      dialog: dialog,
+      onFocus: function onFocus() {
+        var _input$ref$current;
+
+        (_input$ref$current = input.ref.current) === null || _input$ref$current === void 0 ? void 0 : _input$ref$current.focus();
+      },
+      ref: button.ref,
+      tabIndex: -1,
+      tooltip: texts.combobox.tooltip
+    }) : undefined
   })))), React.createElement(PopoverPrimitive.Content, {
     align: "start",
     onOpenAutoFocus: function onOpenAutoFocus(event) {
@@ -5930,32 +5940,50 @@ Dialog.Extra = Extra;
 Dialog.Drawer = Drawer;
 Dialog.Close = Close$2;
 
-var _excluded$n = ["disabled", "children", "message", "state"];
+var _excluded$n = ["children", "disabled", "invalid", "label", "message", "required"];
 var Field = /*#__PURE__*/React.forwardRef(function Field(props, ref) {
-  var disabled = props.disabled,
-      children = props.children,
+  var _children$props$id, _children$props, _children$props$inval, _children$props2, _children$props$requi, _children$props3, _children$props4;
+
+  var children = props.children,
+      disabled = props.disabled,
+      invalid = props.invalid,
+      label = props.label,
       message = props.message,
-      state = props.state,
+      required = props.required,
       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
+  var idRef = React.useRef((_children$props$id = children === null || children === void 0 ? void 0 : (_children$props = children.props) === null || _children$props === void 0 ? void 0 : _children$props.id) !== null && _children$props$id !== void 0 ? _children$props$id : uuid.v4());
+  var isInvalid = (_children$props$inval = children === null || children === void 0 ? void 0 : (_children$props2 = children.props) === null || _children$props2 === void 0 ? void 0 : _children$props2.invalid) !== null && _children$props$inval !== void 0 ? _children$props$inval : invalid;
+  var isRequired = (_children$props$requi = children === null || children === void 0 ? void 0 : (_children$props3 = children.props) === null || _children$props3 === void 0 ? void 0 : _children$props3.required) !== null && _children$props$requi !== void 0 ? _children$props$requi : required;
+  var className = cn('flex flex-col mb-4', {
+    'pt-5': !label
   }, 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',
+  var labelClassName = cn('font-bold text-xs leading-4 h-4 truncate mb-1', {
+    'text-grey-dark': disabled
+  });
+  var messageClassName = cn('text-xs leading-normal truncate flex-none', {
+    'text-grey-darkest': !isInvalid,
+    'text-red': isInvalid,
     'opacity-50': disabled
-  }, props.className);
-  return React.createElement("label", Object.assign({}, otherProps, {
+  });
+
+  if (!label && !(children !== null && children !== void 0 && children.props['aria-label'])) {
+    console.warn('TACO - You are creating a Field without a `label`, you must pass an `aria-label` to the Field child to provide an accessible experience for our users.');
+  }
+
+  return React.createElement("div", Object.assign({}, otherProps, {
     className: className,
-    "data-taco": "label",
+    "data-taco": "field",
     ref: ref
-  }), children, message && React.createElement("span", {
+  }), label && React.createElement("label", {
+    htmlFor: idRef.current,
+    className: labelClassName,
+    "data-taco": "label"
+  }, label, isRequired ? '*' : ''), idRef.current !== (children === null || children === void 0 ? void 0 : (_children$props4 = children.props) === null || _children$props4 === void 0 ? void 0 : _children$props4.id) ? React.cloneElement(children, {
+    id: idRef.current
+  }) : children, message && React.createElement("span", {
     className: messageClassName,
-    role: state === 'error' ? 'alert' : undefined
+    role: isInvalid ? 'alert' : undefined
   }, message));
 });
 
@@ -6121,7 +6149,7 @@ var useTypeahead = function useTypeahead(_ref) {
   };
 };
 
-var _excluded$s = ["data", "defaultValue", "disabled", "emptyValue", "id", "name", "onChange", "onFocus", "onKeyDown", "value"];
+var _excluded$s = ["data", "defaultValue", "disabled", "emptyValue", "id", "invalid", "name", "onChange", "onFocus", "onKeyDown", "value"];
 var useListbox = function useListbox(_ref, ref) {
   var _ref$data = _ref.data,
       externalData = _ref$data === void 0 ? [] : _ref$data,
@@ -6129,6 +6157,7 @@ var useListbox = function useListbox(_ref, ref) {
       disabled = _ref.disabled,
       emptyValue = _ref.emptyValue,
       nativeId = _ref.id,
+      invalid = _ref.invalid,
       name = _ref.name,
       onChange = _ref.onChange,
       onFocus = _ref.onFocus,
@@ -6243,6 +6272,7 @@ var useListbox = function useListbox(_ref, ref) {
     data: data,
     disabled: disabled,
     id: id,
+    invalid: invalid,
     onChange: handleListboxChange,
     onFocus: handleListboxFocus,
     onKeyDown: handleListboxKeyDown,
@@ -7369,8 +7399,7 @@ var useSelect = function useSelect(_ref, ref) {
   var id = React.useMemo(function () {
     return nativeId || "select_" + uuid.v4();
   }, [nativeId]);
-  var internalInputRef = React.useRef(null);
-  var buttonId = id + "-button"; // support 'escape' resetting to the value that was set when the listbox opened
+  var internalInputRef = React.useRef(null); // support 'escape' resetting to the value that was set when the listbox opened
 
   var _React$useState2 = React.useState(value),
       lastValue = _React$useState2[0],
@@ -7497,9 +7526,9 @@ var useSelect = function useSelect(_ref, ref) {
   var button = {
     'aria-haspopup': 'listbox',
     'aria-label': ariaLabel ? ariaLabel + " " + text : undefined,
-    'aria-labelledby': ariaLabelledBy ? ariaLabelledBy + " " + buttonId : undefined,
+    'aria-labelledby': ariaLabelledBy ? ariaLabelledBy + " " + id : undefined,
     disabled: disabled,
-    id: buttonId,
+    id: id,
     onKeyDown: !disabled && !readOnly ? handleButtonKeyDown : undefined,
     type: 'button'
   };
@@ -7581,6 +7610,7 @@ var BaseSelect = /*#__PURE__*/React.forwardRef(function BaseSelect(props, ref) {
 
   var commonListboxProps = _extends({}, listbox, {
     className: 'w-auto',
+    invalid: undefined,
     style: {
       minWidth: selectDimensions === null || selectDimensions === void 0 ? void 0 : selectDimensions.width
     },
@@ -7615,6 +7645,7 @@ var Select = /*#__PURE__*/React.forwardRef(function Select(props, ref) {
 
   if (editable) {
     return React.createElement(Combobox, Object.assign({}, otherProps, {
+      dialog: undefined,
       inline: true,
       ref: ref
     }));
@@ -9644,7 +9675,7 @@ Tabs.List = TabList;
 Tabs.Trigger = TabTrigger;
 Tabs.Content = TabContent;
 
-var _excluded$Q = ["defaultValue", "highlighted", "onKeyDown", "state"];
+var _excluded$Q = ["defaultValue", "highlighted", "invalid", "onKeyDown"];
 var Textarea = /*#__PURE__*/React.forwardRef(function Textarea(props, ref) {
   var onKeyDown = props.onKeyDown,
       otherProps = _objectWithoutPropertiesLoose(props, _excluded$Q);
@@ -9690,14 +9721,14 @@ var Switch = /*#__PURE__*/React.forwardRef(function Switch(props, ref) {
     onCheckedChange: onChange,
     ref: ref
   }), React.createElement(PrimitiveSwitch.Thumb, {
-    className: "'will-change-transform transition-transform translate-x-1 group-aria-checked:translate-x-5 h-4 w-4 mt-1 bg-white rounded-full"
+    className: "'will-change-transform group-aria-checked:translate-x-5 mt-1 h-4 w-4 translate-x-1 rounded-full bg-white transition-transform"
   }));
 
   if (label) {
     var labelClassName = cn('flex items-center cursor-pointer', {
       'cursor-not-allowed text-grey-dark': props.disabled
     });
-    return React.createElement("label", {
+    element = React.createElement("label", {
       className: labelClassName
     }, element, label);
   }