@economic/taco 1.17.4 → 1.18.1

package/dist/taco.cjs.development.js

@@ -2577,22 +2577,6 @@ function IconSortBy(props, svgRef) {
 }
 var SortBy = /*#__PURE__*/React.forwardRef(IconSortBy);
 
-function IconSpinner(props, svgRef) {
-  return /*#__PURE__*/React.createElement("svg", Object.assign({
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 24 24",
-    ref: svgRef
-  }, props), /*#__PURE__*/React.createElement("g", {
-    fill: "currentColor",
-    fillRule: "evenodd"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm0 1.5a8.5 8.5 0 110 17 8.5 8.5 0 010-17z"
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M12 2a.75.75 0 110 1.5 8.5 8.5 0 108.5 8.5.75.75 0 111.5 0c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2z"
-  })));
-}
-var Spinner = /*#__PURE__*/React.forwardRef(IconSpinner);
-
 function IconStarSolid(props, svgRef) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
@@ -3116,7 +3100,6 @@ const icons = {
   sliders: Sliders,
   smartpay: Smartpay,
   'sort-by': SortBy,
-  spinner: Spinner,
   'star-solid': StarSolid,
   star: Star,
   subscriptions: Subscriptions,
@@ -3385,9 +3368,9 @@ const getButtonClasses = () => {
 const getAppearanceClasses = (value, icon = false) => {
   switch (value) {
     case 'primary':
-      return `yt-blue-solid focus:bg-blue-500 focus:text-white focus:yt-focus active:bg-blue-700 active:text-white hover:bg-blue-300 hover:text-white hover:focus:bg-blue-300 hover:focus:border-blue-300 hover:focus:text-white disabled:hover:yt-blue-solid disabled:hover:hover:border-blue-500`;
+      return `wcag-blue-500 focus:bg-blue-500 focus:text-white focus:yt-focus active:bg-blue-700 active:text-white hover:bg-blue-300 hover:text-white hover:focus:bg-blue-300 hover:focus:border-blue-300 hover:focus:text-white disabled:hover:wcag-blue-500 disabled:hover:hover:border-blue-500`;
     case 'danger':
-      return `yt-red-solid focus:bg-red-500 focus:text-white focus:yt-focus-red active:bg-red-700 active:text-white hover:bg-red-300 hover:text-white hover:focus:bg-red-300 hover:focus:text-white disabled:hover:yt-red-solid`;
+      return `wcag-red-500 focus:bg-red-500 focus:text-white focus:yt-focus-red active:bg-red-700 active:text-white hover:bg-red-300 hover:text-white hover:focus:bg-red-300 hover:focus:text-white disabled:hover:wcag-red-500`;
     case 'ghost':
       return `bg-white shadow-[inset_0_0_0_1px_theme(colors.blue.500)] text-blue-500 focus:bg-transparent focus:text-blue-500 active:bg-blue-100 focus:!shadow-[inset_0_0_0_1px_theme(colors.blue.500),0_0_0_2px_rgba(0,99,255,0.25)] active:text-blue-700 hover:bg-blue-100 hover:shadow-[inset_0_0_0_1px_theme(colors.blue.300)] hover:text-blue-300 hover:focus:bg-blue-100 hover:focus:!shadow-[inset_0_0_0_1px_theme(colors.blue.300),0_0_0_2px_rgba(0,99,255,0.25)] hover:focus:text-blue-300`;
     case 'discrete':
@@ -3398,7 +3381,7 @@ const getAppearanceClasses = (value, icon = false) => {
         return `yt-transparent focus:text-blue-500 focus:yt-focus active:text-blue-700 hover:text-blue-300 hover:focus:text-blue-300 disabled:hover:yt-transparent`;
       }
     default:
-      return `yt-grey-solid focus:bg-grey-200 focus:yt-focus active:bg-grey-300 active:text-black hover:bg-grey-100 hover:text-grey-700 hover:focus:bg-grey-100 hover:focus:text-grey-700 disabled:hover:yt-grey-solid`;
+      return `wcag-grey-200 focus:bg-grey-200 focus:yt-focus active:bg-grey-300 active:text-black hover:bg-grey-100 hover:text-grey-700 hover:focus:bg-grey-100 hover:focus:text-grey-700 disabled:hover:wcag-grey-200`;
   }
 };
 const createButtonWithTooltip = (props, className, ref) => {
@@ -4143,7 +4126,7 @@ const useListScrollTo = (internalRef, itemRefs) => {
   };
 };
 
-const Spinner$1 = /*#__PURE__*/React__default.forwardRef(function Spinner(props, ref) {
+const Spinner = /*#__PURE__*/React__default.forwardRef(function Spinner(props, ref) {
   const {
     delay = 500,
     label,
@@ -4313,7 +4296,7 @@ const ScrollableList = /*#__PURE__*/React.forwardRef(function ScrollableList(pro
     "data-taco": "scrollable-list"
   }), loading ? /*#__PURE__*/React.createElement("li", {
     className: "yt-list__empty"
-  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Spinner$1, {
+  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Spinner, {
     delay: 0
   })), /*#__PURE__*/React.createElement("span", null, texts.listbox.loading)) : options.length ? options.map(({
     children,
@@ -5109,7 +5092,7 @@ const Datepicker = /*#__PURE__*/React.forwardRef(function Datepicker(props, ref)
         key: shortcut.text
       }, /*#__PURE__*/React.createElement("button", {
         type: "button",
-        className: "hover:bg-grey-100 flex w-full items-start px-4 py-1 text-xs",
+        className: "hover:wcag-grey-200 flex w-full items-start px-4 py-1 text-xs",
         onClick: event => {
           event.persist();
           shortcut.onClick(event);
@@ -5253,8 +5236,8 @@ const Content$4 = /*#__PURE__*/React.forwardRef(function DialogContent(props, re
   const {
     texts
   } = useLocalization();
-  const className = cn('relative bg-white animate-[fade-in_150ms]', getDialogPositionClassnames(), getDialogSizeClassnames(dialog.size));
-  const containerClassName = cn('bg-white p-6 rounded relative z-10', 'shadow-[0_6px_9px_0_rgba(89,85,98,0.3),0_0_1px_0_rgba(89,85,98,0.2)]', {
+  const className = cn('relative bg-white animate-[fade-in_150ms] rounded', getDialogPositionClassnames(), getDialogSizeClassnames(dialog.size));
+  const containerClassName = cn('bg-white p-6 rounded relative z-10 shadow', {
     'rounded-b-none': !!dialog.elements.extra
   }, props.className);
   const handleEscapeKeyDown = event => {
@@ -5345,7 +5328,7 @@ const Drawer = /*#__PURE__*/React.forwardRef(function DialogDrawer(props, ref) {
 Drawer.displayName = 'DialogDrawer';
 
 const Extra = /*#__PURE__*/React.forwardRef(function DialogExtra(props, ref) {
-  const className = cn('bg-grey-100 yt-shadow-inset absolute top-full left-0 -mt-px w-full rounded-t-none rounded-b p-6 text-left', props.className);
+  const className = cn('wcag-grey-100 absolute top-full left-0 -mt-px w-full rounded-t-none rounded-b p-6 text-left', props.className);
   return /*#__PURE__*/React.createElement("div", Object.assign({}, props, {
     className: className,
     "data-taco": "dialog-extra",
@@ -6122,7 +6105,7 @@ const useItemStyling = ({
   return cn('flex items-center justify-start h-8 pr-1.5 relative rounded w-full focus:outline-none group', {
     'pl-7': menu === null || menu === void 0 ? void 0 : menu.indented,
     'pl-1.5': !(menu !== null && menu !== void 0 && menu.indented),
-    'cursor-pointer hover:bg-grey-100 text-black hover:text-black': !disabled,
+    'cursor-pointer hover:wcag-grey-200 text-black': !disabled,
     'cursor-not-allowed hover:bg-white text-grey-300': disabled
   }, className);
 };
@@ -7153,7 +7136,7 @@ const getBadgeIcon = type => {
         className: cn(css, 'yt-blue-solid')
       });
     case 'loading':
-      return /*#__PURE__*/React__default.createElement(Spinner$1, {
+      return /*#__PURE__*/React__default.createElement(Spinner, {
         delay: 0,
         className: cn(css, 'h-6 w-6')
       });
@@ -7724,7 +7707,7 @@ const Tag$1 = /*#__PURE__*/React__default.forwardRef((props, ref) => {
   }) : null);
 });
 
-const createOptionClassName = () => 'group mb-px flex h-8 w-full text-sm flex-shrink-0 font-normal cursor-pointer items-center rounded bg-white px-2 leading-8 text-black aria-hidden:hidden gap-1.5 bg-white hover:bg-grey-100 aria-current:bg-grey-100 aria-disabled:text-black/25 aria-disabled:pointer-events-none';
+const createOptionClassName = () => 'group mb-px flex h-8 w-full text-sm flex-shrink-0 font-normal cursor-pointer items-center rounded bg-white px-2 leading-8 text-black aria-hidden:hidden gap-1.5 bg-white hover:wcag-grey-200 aria-current:wcag-grey-200 aria-disabled:text-black/25 aria-disabled:pointer-events-none';
 const createCollectionClassName = () => 'flex flex-col gap-px';
 
 const Select2Context = /*#__PURE__*/React__default.createContext({});
@@ -8627,6 +8610,24 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
     // the focus should always remain on the input, so we forward events on to the listbox
     (_listboxRef$current = listboxRef.current) === null || _listboxRef$current === void 0 ? void 0 : _listboxRef$current.dispatchEvent(createCustomKeyboardEvent(event));
   };
+  let handleBlur;
+  if (otherProps.onBlur) {
+    // we might be focusing on an input or something inside the dropdown that was triggered by the select
+    // so see if the element gaining focus is inside a portal and look up its controller
+    // if we don't do this, things like validate on blur occur while simply opening the select
+    handleBlur = event => {
+      var _elementGainingFocus$;
+      const elementGainingFocus = event.relatedTarget;
+      if (elementGainingFocus === undefined) {
+        return;
+      }
+      const portalId = elementGainingFocus === null || elementGainingFocus === void 0 ? void 0 : (_elementGainingFocus$ = elementGainingFocus.closest('[data-radix-popper-content-wrapper] > :first-child')) === null || _elementGainingFocus$ === void 0 ? void 0 : _elementGainingFocus$.id;
+      if (!portalId || event.currentTarget.getAttribute(`aria-controls`) !== portalId) {
+        var _otherProps$onBlur;
+        (_otherProps$onBlur = otherProps.onBlur) === null || _otherProps$onBlur === void 0 ? void 0 : _otherProps$onBlur.call(otherProps, event);
+      }
+    };
+  }
   const className = cn('border-grey-300 rounded border bg-white py-1.5 shadow-md outline-none', createCollectionClassName());
   return /*#__PURE__*/React__default.createElement(Select2Context.Provider, {
     value: context
@@ -8646,6 +8647,7 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
     "data-taco": "Select2"
   }, /*#__PURE__*/React__default.createElement(Trigger$6, Object.assign({}, otherProps, {
     "aria-haspopup": "listbox",
+    onBlur: handleBlur,
     onKeyDown: handleKeyDown,
     ref: internalRef
   }), allChildren)), /*#__PURE__*/React__default.createElement(PopoverPrimitive.Portal, null, /*#__PURE__*/React__default.createElement(PopoverPrimitive.Content, {
@@ -9732,8 +9734,8 @@ const Row = /*#__PURE__*/React__default.forwardRef(function TableRow({
       minHeight: rowHeight ? `${rowHeight}px` : undefined,
       paddingLeft: row.depth ? `${row.depth * 2}rem` : undefined
     },
-    className: cn('yt-table__row border-grey-100 flex border-b min-h-[2.5rem] hover:bg-grey-100', {
-      'yt-table__row--active bg-grey-100 hover:bg-grey-100': activeIndex === index,
+    className: cn('yt-table__row border-grey-300 flex border-b min-h-[2.5rem] hover:bg-grey-100', {
+      'yt-table__row--active bg-grey-200 hover:bg-grey-200': activeIndex === index,
       'yt-table__row--clickable': !!onRowClick,
       'yt-table__row--dragging': !!row.isDragging,
       'yt-table__row--editing': !!row.isEditing
@@ -10517,7 +10519,7 @@ exports.RadioGroup = RadioGroup;
 exports.SearchInput = SearchInput;
 exports.Select = Select;
 exports.Select2 = Select2;
-exports.Spinner = Spinner$1;
+exports.Spinner = Spinner;
 exports.Switch = Switch;
 exports.TAG_COLORS = TAG_COLORS;
 exports.Table = Table;