@economic/taco 0.0.33-alpha.1 → 0.0.33-alpha.4

package/dist/taco.cjs.development.js

@@ -3122,17 +3122,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]', props.className, {
+  const className = cn('inline-flex h-[1.715em] w-[1.715em]', 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, {
@@ -3144,7 +3144,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'
@@ -3182,7 +3182,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
@@ -3283,7 +3283,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;
 
@@ -3293,7 +3293,7 @@ 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-[0.354rem]'] = !compact, _cn), props.className);
   return React.createElement("span", Object.assign({}, otherProps, {
@@ -3453,14 +3453,13 @@ const createButton = (props, className, ref) => {
   return button;
 };
 
-var _excluded$3 = ["icon", "rounded"];
-var IconButton = /*#__PURE__*/React.forwardRef(function IconButton(props, ref) {
-  var icon = props.icon,
-      _props$rounded = props.rounded,
-      rounded = _props$rounded === void 0 ? false : _props$rounded,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$3);
-
-  var className = cn('w-8', getButtonClasses(), getAppearanceClasses(otherProps.appearance, true), {
+const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(props, ref) {
+  const {
+    icon,
+    rounded = false,
+    ...otherProps
+  } = props;
+  const className = cn('w-8', getButtonClasses(), getAppearanceClasses(otherProps.appearance, true), {
     'rounded-full': rounded,
     rounded: !rounded,
     'cursor-not-allowed opacity-50': props.disabled,
@@ -3471,13 +3470,13 @@ var IconButton = /*#__PURE__*/React.forwardRef(function IconButton(props, ref) {
     return null;
   }
 
-  return createButton(_extends({}, otherProps, {
+  return createButton({ ...otherProps,
     children: React.createElement(Icon, {
       name: icon,
       className: "m-0 p-0"
     }),
     'data-taco': 'icon-button'
-  }), className, ref);
+  }, className, ref);
 });
 
 var Banner = /*#__PURE__*/React.forwardRef(function Banner(props, ref) {
@@ -3497,10 +3496,10 @@ var Banner = /*#__PURE__*/React.forwardRef(function Banner(props, ref) {
   }) : null);
 });
 
-var _excluded$4 = ["fluid"];
+var _excluded$2 = ["fluid"];
 var Button$1 = /*#__PURE__*/React.forwardRef(function Button(props, ref) {
   var fluid = props.fluid,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$4);
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$2);
 
   var className = cn(getButtonClasses(), getAppearanceClasses(otherProps.appearance), 'rounded px-3', {
     'cursor-not-allowed opacity-50': props.disabled,
@@ -3978,7 +3977,7 @@ const Provider = props => {
 const useTaco = () => React.useContext(Context);
 const useLocalization = () => useTaco().localization;
 
-var _excluded$5 = ["onChange", "value"];
+var _excluded$3 = ["onChange", "value"];
 
 var renderDay = function renderDay(day, modifiers) {
   return modifiers.disabled ? React.createElement("span", {
@@ -4057,7 +4056,7 @@ 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$5);
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$3);
 
   var _useLocalization2 = useLocalization(),
       locale = _useLocalization2.locale,
@@ -4121,7 +4120,7 @@ var Calendar$1 = /*#__PURE__*/React.forwardRef(function Calendar(props, ref) {
   })));
 });
 
-var _excluded$6 = ["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,
@@ -4129,7 +4128,7 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(props, ref) {
       invalid = props.invalid,
       label = props.label,
       onChange = props.onChange,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$6);
+      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]', {
     'mr-2': !!label,
@@ -4580,12 +4579,11 @@ const setInputValueByRef = (input, value, event = 'change') => {
   input.dispatchEvent(createCustomEvent(event));
 };
 
+const getValue = value => String(value !== null && value !== void 0 ? value : '');
+
 const setInputValueByRef$1 = (input, value, event = 'change') => {
-  setInputValueByRef(input, value !== undefined && value !== null ? String(value) : '', event);
+  setInputValueByRef(input, getValue(value), event);
 };
-
-const getValue = value => value === undefined || value === null ? '' : String(value);
-
 const getIndexFromValue = (data, value) => {
   const index = data.findIndex(option => getValue(option.value) === getValue(value));
   return index > -1 ? index : undefined;
@@ -4610,9 +4608,7 @@ const searchForString = (child, value, strategy = 'includes') => {
 
       return searchForString((_child$props3 = child.props) === null || _child$props3 === void 0 ? void 0 : _child$props3.children, value, strategy);
     } else {
-      var _String;
-
-      return child.toString().toLowerCase()[strategy]((_String = String(value)) === null || _String === void 0 ? void 0 : _String.toLowerCase());
+      return child.toString().toLowerCase()[strategy](String(value).toLowerCase());
     }
   } catch {
     return false;
@@ -5046,12 +5042,12 @@ var useBoundingClientRectListener = function useBoundingClientRectListener(ref)
   return dimensions;
 };
 
-var _excluded$7 = ["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$7);
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$5);
 
   var _useCombobox = useCombobox(otherProps, ref),
       combobox = _useCombobox.combobox,
@@ -5419,7 +5415,7 @@ Popover.Trigger = Trigger$1;
 Popover.Content = Content$1;
 Popover.Close = Close$1;
 
-var _excluded$8 = ["className", "onReset", "style", "shortcuts", "shortcutsText"];
+var _excluded$6 = ["className", "onReset", "style", "shortcuts", "shortcutsText"];
 var Datepicker = /*#__PURE__*/React.forwardRef(function Datepicker(props, ref) {
   var _input$disabled;
 
@@ -5428,7 +5424,7 @@ var Datepicker = /*#__PURE__*/React.forwardRef(function Datepicker(props, ref) {
       style = props.style,
       shortcuts = props.shortcuts,
       shortcutsText = props.shortcutsText,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$8);
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$6);
 
   var _useDatepicker = useDatepicker(otherProps, ref),
       calendar = _useDatepicker.calendar,
@@ -5723,7 +5719,7 @@ const Extra = /*#__PURE__*/React.forwardRef(function DialogExtra(props, ref) {
 });
 Extra.displayName = 'DialogExtra';
 
-var _excluded$9 = ["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 () {
@@ -5760,7 +5756,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$9);
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$7);
 
   var _useSeparatedChildren = useSeparatedChildren(initialChildren),
       children = _useSeparatedChildren[0],
@@ -5810,14 +5806,14 @@ Dialog.Extra = Extra;
 Dialog.Drawer = Drawer;
 Dialog.Close = Close$2;
 
-var _excluded$a = ["disabled", "children", "invalid", "message"];
+var _excluded$8 = ["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$a);
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$8);
 
   var className = cn('flex flex-col font-bold text-xs leading-loose pb-4 min-h-[theme(spacing.18)]', {
     'text-grey-dark': disabled
@@ -5837,13 +5833,12 @@ var Field = /*#__PURE__*/React.forwardRef(function Field(props, ref) {
   }, message));
 });
 
-var _excluded$b = ["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$b);
-
-  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, {
@@ -5853,13 +5848,12 @@ var Form = /*#__PURE__*/React.forwardRef(function Form(props, ref) {
   }));
 });
 
-var _excluded$c = ["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$c);
-
-  var className = cn('flex ', props.className);
+const Group = /*#__PURE__*/React.forwardRef(function Group(props, ref) {
+  const {
+    as: Tag = 'span',
+    ...otherProps
+  } = props;
+  const className = cn('flex ', props.className);
   return React.createElement(Tag, Object.assign({}, otherProps, {
     className: className,
     "data-taco": "group",
@@ -5867,19 +5861,18 @@ var Group = /*#__PURE__*/React.forwardRef(function Group(props, ref) {
   }));
 });
 
-var _excluded$d = ["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);
   }
 
@@ -5889,15 +5882,14 @@ var Anchor = /*#__PURE__*/React.forwardRef(function HangerAnchor(props, ref) {
     asChild: true
   }));
 });
-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', 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', props.className);
 
-  var handleInteractOutside = function handleInteractOutside(event) {
+  const handleInteractOutside = event => {
     event.preventDefault();
   };
 
@@ -5919,25 +5911,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$d);
-
-  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);
     }
@@ -6103,7 +6090,7 @@ const useListbox = ({
     onChange: handleInputChange,
     ref: inputRef,
     tabIndex: -1,
-    value: value === undefined || value === null ? '' : value
+    value: value !== null && value !== void 0 ? value : ''
   };
   return {
     list,
@@ -7108,20 +7095,21 @@ const useSelect = ({
   emptyValue,
   id: nativeId,
   multiselect,
+  onBlur,
   onClick,
   onChange,
   readOnly,
-  value = emptyValue,
+  value,
   ...otherProps
 }, ref) => {
   const {
     texts
   } = useLocalization();
-  const searchData = useFlattenedData(data);
-  const inputRef = useProxiedRef(ref);
+  const flattenedData = useFlattenedData(data);
+  const listboxInputRef = useProxiedRef(ref);
   const [open, setOpen] = React.useState(false);
   const id = React.useMemo(() => nativeId || `select_${uuid.v4()}`, [nativeId]);
-  const internalInputRef = React.useRef(null);
+  const inputRef = React.useRef(null);
   const buttonId = `${id}-button`; // support 'escape' resetting to the value that was set when the listbox opened
 
   const [lastValue, setLastValue] = React.useState(value);
@@ -7129,15 +7117,24 @@ const useSelect = ({
     setLastValue(value);
   }, [open]);
   React.useEffect(() => {
-    // If emptyValue is defined, then set emptyValue
-    if (emptyValue !== undefined && value === emptyValue) {
-      setInputValueByRef$1(internalInputRef.current, value);
-    } else if (value !== undefined && data.some(option => option.value === value)) {
-      setInputValueByRef$1(internalInputRef.current, value);
-    } else if (value === undefined && defaultValue !== undefined && data.some(option => option.value === defaultValue)) {
-      setInputValueByRef$1(internalInputRef.current, defaultValue);
-    } else if (value === undefined && data.length && defaultValue === undefined) {
-      setInputValueByRef$1(internalInputRef.current, data[0].value);
+    if (value === undefined) {
+      if (defaultValue !== undefined && findByValue(flattenedData, defaultValue)) {
+        setInputValueByRef$1(inputRef.current, defaultValue);
+      } else {
+        if (emptyValue !== undefined) {
+          setInputValueByRef$1(inputRef.current, emptyValue);
+        } else if (data.length > 0) {
+          setInputValueByRef$1(inputRef.current, data[0].value);
+        }
+      }
+    } else {
+      if (!findByValue(flattenedData, value)) {
+        if (emptyValue !== undefined) {
+          setInputValueByRef$1(inputRef.current, emptyValue);
+        } else if (data.length > 0) {
+          setInputValueByRef$1(inputRef.current, data[0].value);
+        }
+      }
     }
   }, []); // event handlers
 
@@ -7155,7 +7152,7 @@ const useSelect = ({
           event.preventDefault();
 
           if (lastValue !== undefined) {
-            setInputValueByRef$1(inputRef.current, lastValue);
+            setInputValueByRef$1(listboxInputRef.current, lastValue);
           }
 
           setOpen(false);
@@ -7184,6 +7181,10 @@ const useSelect = ({
 
     if (!multiselect) {
       setOpen(false);
+
+      if (onBlur) {
+        onBlur(createCustomEvent('blur'));
+      }
     }
   };
 
@@ -7194,16 +7195,16 @@ const useSelect = ({
     if (multiselect) {
       const selectedValues = (value === null || value === void 0 ? void 0 : value.toString().split(',')) || [];
 
-      if (selectedValues.length === searchData.filter(item => !item.disabled).length) {
+      if (selectedValues.length === flattenedData.filter(item => !item.disabled).length) {
         text = texts.select.allOptionsSelected;
       } else {
         var _findByValue$text, _findByValue;
 
-        text = (_findByValue$text = (_findByValue = findByValue(searchData, selectedValues[0])) === null || _findByValue === void 0 ? void 0 : _findByValue.text) !== null && _findByValue$text !== void 0 ? _findByValue$text : '';
+        text = (_findByValue$text = (_findByValue = findByValue(flattenedData, selectedValues[0])) === null || _findByValue === void 0 ? void 0 : _findByValue.text) !== null && _findByValue$text !== void 0 ? _findByValue$text : '';
         more = selectedValues.length > 1 ? selectedValues.length - 1 : 0;
       }
     } else {
-      const item = findByValue(searchData, value);
+      const item = findByValue(flattenedData, value);
 
       if (item) {
         text = item.icon ? React.createElement(React.Fragment, null, React.cloneElement(item.icon, {
@@ -7219,7 +7220,7 @@ const useSelect = ({
     if (onChange) {
       var _item$path$split, _item$path;
 
-      const item = findByValue(searchData, event.target.value);
+      const item = findByValue(flattenedData, event.target.value);
       event.detail = sanitizeItem(item);
       const indexes = (_item$path$split = item === null || item === void 0 ? void 0 : (_item$path = item.path) === null || _item$path === void 0 ? void 0 : _item$path.split('.')) !== null && _item$path$split !== void 0 ? _item$path$split : [];
 
@@ -7230,7 +7231,7 @@ const useSelect = ({
         let lastPath;
         event.detail.parents = indexes.map(i => {
           lastPath = lastPath ? [lastPath, i].join('.') : i;
-          return sanitizeItem(searchData.find(i => i.path === lastPath));
+          return sanitizeItem(flattenedData.find(i => i.path === lastPath));
         });
       }
 
@@ -7253,21 +7254,19 @@ const useSelect = ({
     data,
     disabled,
     emptyValue,
+    onBlur,
     onClick: handleListboxClick,
     onChange: event => {
-      var _event$target;
-
-      setInputValueByRef$1(internalInputRef.current, (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.value);
+      setInputValueByRef$1(inputRef.current, event.target.value);
     },
     onKeyDown: handleListboxKeyDown,
-    ref: inputRef,
-    value,
-    multiselect
+    ref: listboxInputRef,
+    value
   };
   const input = {
     onChange: handleInputChange,
-    ref: internalInputRef,
-    value: value !== null && value !== void 0 ? value : ''
+    ref: inputRef,
+    value: String(value !== null && value !== void 0 ? value : '')
   };
   return {
     button,
@@ -7275,7 +7274,13 @@ const useSelect = ({
     input,
     popover: {
       open,
-      onOpenChange: setOpen
+      onOpenChange: open => {
+        if (!open && onBlur) {
+          onBlur(createCustomEvent('blur'));
+        }
+
+        setOpen(open);
+      }
     },
     text,
     more