@economic/taco 0.0.2-alpha.0 → 0.0.6-alpha.0

package/dist/taco.cjs.development.js

@@ -35,7 +35,6 @@ var TabsPrimitive = require('@radix-ui/react-tabs');
 var PrimitiveSwitch = require('@radix-ui/react-switch');
 var Joyride = require('react-joyride');
 var Joyride__default = _interopDefault(Joyride);
-var plugin = _interopDefault(require('tailwindcss/plugin'));
 
 function _extends() {
   _extends = Object.assign || function (target) {
@@ -3896,8 +3895,18 @@ var HangerContext = /*#__PURE__*/React.createContext({
   ref: null
 });
 var Anchor = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _props$children;
+
   var context = React.useContext(HangerContext);
+  var 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");
+    children = React.createElement("span", null, props.children);
+  }
+
   return React.createElement(PopoverPrimitive.Anchor, Object.assign({}, context.props, props, {
+    children: children,
     ref: mergeRefs([context.ref, ref]),
     asChild: true
   }));
@@ -4276,8 +4285,18 @@ var PopoverContext = /*#__PURE__*/React.createContext({
   ref: null
 });
 var Trigger$2 = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _props$children;
+
   var context = React.useContext(PopoverContext);
+  var 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("Popover.Trigger 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);
+  }
+
   return React.createElement(PopoverPrimitive.Trigger, Object.assign({}, context.props, props, {
+    children: children,
     ref: mergeRefs([context.ref, ref]),
     asChild: true
   }));
@@ -5253,7 +5272,10 @@ var filterData = function filterData(data, value) {
   });
 };
 
-var _excluded$l = ["aria-label", "aria-labelledby", "data", "defaultValue", "disabled", "id", "inline", "loading", "onChange", "onClick", "onKeyDown", "readOnly", "value"];
+var _excluded$l = ["aria-label", "aria-labelledby", "data", "defaultValue", "disabled", "id", "inline", "loading", "onChange", "onClick", "onKeyDown", "onSearch", "readOnly", "value"];
+var debouncer = /*#__PURE__*/debounce(function (f) {
+  return f();
+}, 200);
 
 var convertToInputValue = function convertToInputValue(value) {
   return String(value !== null && value !== void 0 ? value : '');
@@ -5269,6 +5291,7 @@ var useCombobox = function useCombobox(_ref, ref) {
       onChange = _ref.onChange,
       onClick = _ref.onClick,
       onKeyDown = _ref.onKeyDown,
+      onSearch = _ref.onSearch,
       readOnly = _ref.readOnly,
       value = _ref.value,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$l);
@@ -5288,7 +5311,7 @@ var useCombobox = function useCombobox(_ref, ref) {
       inputValue = _React$useState2[0],
       setInputValue = _React$useState2[1];
 
-  var shouldFilterData = !inline || inline && inputValue !== convertToInputValue(value);
+  var shouldFilterData = !onSearch && (!inline || inline && inputValue !== convertToInputValue(value));
   var flattenedData = useFlattenedData(unfilteredData);
   var data = React.useMemo(function () {
     return shouldFilterData ? filterData(flattenedData, inputValue) : flattenedData;
@@ -5334,7 +5357,14 @@ var useCombobox = function useCombobox(_ref, ref) {
     if (value !== undefined && value !== inputValue) {
       setInputValue(convertToInputValue(value));
     }
-  }, [value]); // show listbox based on input value
+  }, [value]);
+  React.useEffect(function () {
+    if (onSearch) {
+      debouncer(function () {
+        onSearch(inputValue);
+      });
+    }
+  }, [inputValue]); // show listbox based on input value
 
   React.useEffect(function () {
     // don't show the popover if the internal (input) value already is the current value
@@ -6647,7 +6677,9 @@ var useRadioGroup = function useRadioGroup(props) {
   var values = React.useMemo(function () {
     var radioGroupItemValues = [];
     React.Children.forEach(children, function (child) {
-      return radioGroupItemValues.push(child.props.value);
+      if (React.isValidElement(child)) {
+        radioGroupItemValues.push(child.props.value);
+      }
     });
     return radioGroupItemValues;
   }, [children]);
@@ -8459,10 +8491,11 @@ var prepareRow$1 = function prepareRow(row, _ref) {
 var visibleColumns = function visibleColumns(columns) {
   return [{
     id: 'draggable',
-    className: 'yt-table__cell--draggable',
+    className: 'yt-table__cell--draggable flex-col px-0',
     Cell: function Cell() {
       return React__default.createElement(Icon, {
-        name: "drag"
+        name: "drag",
+        className: "text-grey-darkest invisible w-[20px] cursor-grab"
       });
     },
     flex: '0 0 20px'
@@ -8754,9 +8787,10 @@ var _excluded$K = ["row", "index", "instance", "headerGroups"];
 
 var renderCell = function renderCell(cell, row) {
   var props = _extends({}, cell.getCellProps(), {
-    className: cn('yt-table__cell', cell.column.className, {
+    className: cn('yt-table__cell flex-1 truncate p-2 align-middle', cell.column.className, {
       'justify-start text-left': cell.column.align === 'left',
-      'justify-end text-right': cell.column.align === 'right'
+      'justify-end text-right': cell.column.align === 'right',
+      'text-center': !cell.column.align
     }),
     style: _extends({}, cell.column.style, {
       flex: typeof cell.column.flex === 'function' ? cell.column.flex(row) : cell.column.flex
@@ -8790,8 +8824,8 @@ var Row = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
       minHeight: rowHeight ? rowHeight + "px" : undefined,
       paddingLeft: row.depth ? row.depth * 2 + "rem" : undefined
     }),
-    className: cn('yt-table__row', {
-      'yt-table__row--active': activeIndex === index,
+    className: cn('yt-table__row border-grey-light flex border-b min-h-[2.5rem] hover:bg-grey-light', {
+      'yt-table__row--active bg-grey-light hover:bg-grey-light': activeIndex === index,
       'yt-table__row--clickable': !!onRowClick,
       'yt-table__row--dragging': !!row.isDragging,
       'yt-table__row--editing': !!row.isEditing
@@ -8857,11 +8891,12 @@ var Column = function Column(_ref) {
   var props = _extends({}, cell.getHeaderProps(), cell.getSortByToggleProps && cell.getSortByToggleProps({
     title: undefined
   }), {
-    className: cn('yt-table__cell', cell.className, {
+    className: cn('yt-table__cell flex flex-1 truncate p-2 align-middle text-grey-darkest hover:text-black', cell.className, {
       'yt-table__cell__group': !!cell.columns,
-      'yt-table__cell--disable-sort': cell.disableSorting,
+      'cursor-pointer': !cell.disableSorting,
       'justify-start text-left': cell.align === 'left',
-      'justify-end text-right': cell.align === 'right'
+      'justify-end text-right': cell.align === 'right',
+      'justify-center text-center': !cell.align
     }),
     style: _extends({}, cell.style, {
       flex: cell.flex
@@ -8875,7 +8910,9 @@ var Column = function Column(_ref) {
   return React__default.createElement("div", Object.assign({}, props, {
     key: cell.id,
     "data-taco": "table-column"
-  }), React__default.createElement("span", null, cell.render('Header')), cell.isSorted ? React__default.createElement(Icon, {
+  }), React__default.createElement("span", {
+    className: "truncate"
+  }, cell.render('Header')), cell.isSorted ? React__default.createElement(Icon, {
     name: cell.isSortedDesc ? 'chevron-down-solid' : 'chevron-up-solid'
   }) : null);
 };
@@ -8899,7 +8936,7 @@ var BaseTable = /*#__PURE__*/React__default.forwardRef(function BaseTable(props,
       tableRef.current.focus();
     }
   }, []);
-  var className = cn('yt-table', props.className);
+  var className = cn('yt-table flex flex-col focus:yt-focus focus:rounded-sm', props.className);
   return React__default.createElement("div", Object.assign({}, otherProps, {
     role: "table",
     className: className,
@@ -8912,7 +8949,7 @@ var BaseTable = /*#__PURE__*/React__default.forwardRef(function BaseTable(props,
     return React__default.createElement("div", {
       key: index,
       role: "row",
-      className: "yt-table__row"
+      className: "border-grey-light flex h-auto min-h-[2.5rem] w-full select-none border-b border-t-0 border-b-2 font-bold"
     }, headerGroup.headers.map(function (cell, index) {
       return React__default.createElement(Column, {
         key: index,
@@ -9475,315 +9512,6 @@ var Switch = /*#__PURE__*/React.forwardRef(function Switch(props, ref) {
   return element;
 });
 
-
-
-var tailwindcssAriaAttributes = {
-    __proto__: null
-};
-
-function getCjsExportFromNamespace (n) {
-	return n && n['default'] || n;
-}
-
-var require$$0 = getCjsExportFromNamespace(tailwindcssAriaAttributes);
-
-var tailwind_config = {
-  theme: {
-    colors: {
-      transparent: 'transparent',
-      current: 'currentColor',
-      white: '#fff',
-      black: '#1c1c1c',
-      grey: {
-        lightest: '#fafafa',
-        light: '#efefef',
-        DEFAULT: '#ebebeb',
-        dark: '#ddd',
-        darker: '#acacac',
-        darkest: '#595959'
-      },
-      purple: {
-        lightest: '#585c74',
-        light: '#4b4f64',
-        DEFAULT: '#3d4153',
-        dark: '#353a48'
-      },
-      blue: {
-        lightest: '#e5efff',
-        light: '#6ba4ff',
-        DEFAULT: '#0063ff',
-        dark: '#0158e2'
-      },
-      red: {
-        lightest: '#f3cfc5',
-        light: '#e67355',
-        DEFAULT: '#cf3c16',
-        dark: '#b12d0b'
-      },
-      green: {
-        lightest: '#c4e1d7',
-        light: '#5caf93',
-        DEFAULT: '#138760',
-        dark: '#0c5f43'
-      },
-      yellow: {
-        lightest: '#fff1c3',
-        light: '#fddd70',
-        DEFAULT: '#ffc810',
-        dark: '#e89c2e'
-      }
-    },
-    fontFamily: {
-      display: ['Helvetica, Arial, sans-serif'],
-      mono: ['Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace']
-    },
-    extend: {
-      cursor: {
-        grab: 'grab',
-        grabbing: 'grabbing'
-      },
-      listStyleType: {
-        circle: 'circle'
-      },
-      spacing: {
-        18: '4.5rem',
-        72: '18rem',
-        80: '20rem',
-        88: '22rem',
-        96: '24rem',
-        104: '26rem',
-        112: '28rem',
-        120: '30rem',
-        128: '32rem',
-        xs: '32rem',
-        sm: '48rem',
-        md: '64rem',
-        lg: '80rem'
-      }
-    }
-  },
-  plugins: [/*#__PURE__*/require$$0, /*#__PURE__*/plugin(function (_ref) {
-    var addUtilities = _ref.addUtilities,
-        theme = _ref.theme;
-    // ideally we would do this using the @layer utilities directive, but
-    // that causes issues in tools like tailwind where the typescript is loaded before the css
-    // resulting in "yt-focus class does not exist" errors
-    addUtilities({
-      '.fixed-center': {
-        position: 'fixed',
-        left: '50%',
-        top: '50%',
-        transform: 'translateX(-50%) translateY(-50%)'
-      },
-      '.absolute-center': {
-        position: 'absolute',
-        left: '50%',
-        top: '50%',
-        transform: 'translateX(-50%) translateY(-50%)'
-      },
-      '.absolute-center-x': {
-        position: 'absolute',
-        left: '50%',
-        transform: 'translateX(-50%)'
-      },
-      '.absolute-center-y': {
-        position: 'absolute',
-        top: '50%',
-        transform: 'translateY(-50%)'
-      },
-      // WCAG contrast combinations
-      '.wcag-black': {
-        background: theme('colors.black'),
-        color: theme('colors.white')
-      },
-      '.wcag-white': {
-        background: theme('colors.white'),
-        color: theme('colors.black')
-      },
-      '.wcag-grey-lightest': {
-        background: theme('colors.grey.lightest'),
-        color: theme('colors.black')
-      },
-      '.wcag-grey-light': {
-        background: theme('colors.grey.light'),
-        color: theme('colors.black')
-      },
-      '.wcag-grey': {
-        background: theme('colors.grey.DEFAULT'),
-        color: theme('colors.black')
-      },
-      '.wcag-grey-dark': {
-        background: theme('colors.grey.dark'),
-        color: theme('colors.black')
-      },
-      '.wcag-grey-darker': {
-        background: theme('colors.grey.darker'),
-        color: theme('colors.white')
-      },
-      '.wcag-grey-darkest': {
-        background: theme('colors.grey.darkest'),
-        color: theme('colors.white')
-      },
-      '.wcag-purple-lightest': {
-        background: theme('colors.purple.lightest'),
-        color: theme('colors.white')
-      },
-      '.wcag-purple-light': {
-        background: theme('colors.purple.light'),
-        color: theme('colors.white')
-      },
-      '.wcag-purple': {
-        background: theme('colors.purple.DEFAULT'),
-        color: theme('colors.white')
-      },
-      '.wcag-purple-dark': {
-        background: theme('colors.purple.dark'),
-        color: theme('colors.white')
-      },
-      '.wcag-blue-lightest': {
-        background: theme('colors.blue.lightest'),
-        color: theme('colors.blue.dark')
-      },
-      '.wcag-blue-light': {
-        background: theme('colors.blue.light'),
-        color: theme('colors.white')
-      },
-      '.wcag-blue': {
-        background: theme('colors.blue.DEFAULT'),
-        color: theme('colors.white')
-      },
-      '.wcag-blue-dark': {
-        background: theme('colors.blue.dark'),
-        color: theme('colors.white')
-      },
-      '.wcag-red-lightest': {
-        background: theme('colors.red.lightest'),
-        color: theme('colors.red.dark')
-      },
-      '.wcag-red-light': {
-        background: theme('colors.red.light'),
-        color: theme('colors.white')
-      },
-      '.wcag-red': {
-        background: theme('colors.red.DEFAULT'),
-        color: theme('colors.white')
-      },
-      '.wcag-red-dark': {
-        background: theme('colors.red.dark'),
-        color: theme('colors.white')
-      },
-      '.wcag-green-lightest': {
-        background: theme('colors.green.lightest'),
-        color: theme('colors.black')
-      },
-      '.wcag-green-light': {
-        background: theme('colors.green.light'),
-        color: theme('colors.black')
-      },
-      '.wcag-green': {
-        background: theme('colors.green.DEFAULT'),
-        color: theme('colors.white')
-      },
-      '.wcag-green-dark': {
-        background: theme('colors.green.dark'),
-        color: theme('colors.white')
-      },
-      '.wcag-yellow-lightest': {
-        background: theme('colors.yellow.lightest'),
-        color: theme('colors.black')
-      },
-      '.wcag-yellow-light': {
-        background: theme('colors.yellow.light'),
-        color: theme('colors.black')
-      },
-      '.wcag-yellow': {
-        background: theme('colors.yellow.DEFAULT'),
-        color: theme('colors.black')
-      },
-      '.wcag-yellow-dark': {
-        background: theme('colors.yellow.dark'),
-        color: theme('colors.white')
-      },
-      // Legacy
-      '.yt-transparent': {
-        background: theme('colors.transparent'),
-        color: theme('colors.blue.DEFAULT')
-      },
-      '.yt-focus': {
-        'box-shadow': '0 0 0 0.15rem rgba(0, 143, 255, 0.25)',
-        outline: 'none'
-      },
-      '.yt-focus-green': {
-        'box-shadow': '0 0 0 0.15rem rgba(0, 213, 165, 0.25)',
-        outline: 'none'
-      },
-      '.yt-focus-yellow': {
-        'box-shadow': '0 0 0 0.15rem rgba(239, 125, 0, 0.25)',
-        outline: 'none'
-      },
-      '.yt-focus-red': {
-        'box-shadow': '0 0 0 0.15rem rgba(253, 99, 97, 0.25)',
-        outline: 'none'
-      },
-      '.yt-blue-solid': {
-        background: theme('colors.blue.DEFAULT'),
-        color: theme('colors.white')
-      },
-      '.yt-blue-inverted': {
-        background: theme('colors.transparent'),
-        border: "1px solid " + theme('colors.blue.DEFAULT'),
-        color: theme('colors.blue.DEFAULT')
-      },
-      '.yt-yellow-solid': {
-        background: theme('colors.yellow.DEFAULT'),
-        color: theme('colors.black')
-      },
-      '.yt-yellow-inverted': {
-        background: theme('colors.transparent'),
-        border: "1px solid " + theme('colors.yellow.DEFAULT'),
-        color: theme('colors.yellow.DEFAULT')
-      },
-      '.yt-red-solid': {
-        background: theme('colors.red.DEFAULT'),
-        color: theme('colors.white')
-      },
-      '.yt-red-inverted': {
-        background: theme('colors.transparent'),
-        border: "1px solid " + theme('colors.red.DEFAULT'),
-        color: theme('colors.red.DEFAULT')
-      },
-      '.yt-green-solid': {
-        background: theme('colors.green.DEFAULT'),
-        color: theme('colors.white')
-      },
-      '.yt-green-inverted': {
-        background: theme('colors.transparent'),
-        border: "1px solid " + theme('colors.green.DEFAULT'),
-        color: theme('colors.green.DEFAULT')
-      },
-      '.yt-grey-solid': {
-        background: theme('colors.grey.DEFAULT'),
-        color: theme('colors.black')
-      },
-      '.yt-grey-inverted': {
-        background: theme('colors.transparent'),
-        border: "1px solid " + theme('colors.grey.darkest'),
-        color: theme('colors.grey.darkest')
-      },
-      '.yt-shadow': {
-        'box-shadow': '0px 1px 3px 0px rgba(89, 85, 98, 0.35), 0px 0px 1px 0px rgba(89, 85, 98, 0.2)'
-      },
-      '.yt-shadow-inset': {
-        'box-shadow': 'inset 0px 1px 4px 0px rgba(89, 85, 98, 0.3), inset 0px 0px 1px 0px rgba(89, 85, 98, 0.2)'
-      },
-      '.pointer-events-all': {
-        'pointer-events': 'all'
-      }
-    });
-  })]
-};
-var tailwind_config_1 = tailwind_config.theme;
-
 var _excluded$R = ["autoStart", "onComplete", "onClose", "onReady", "spotlightClicks", "disableCloseOnEsc", "disableScrollParentFix"];
 
 var Tooltip$1 = function Tooltip(_ref) {
@@ -9798,8 +9526,8 @@ var Tooltip$1 = function Tooltip(_ref) {
       size = _ref.size,
       locale = _ref.locale,
       disableTourSkipOnEsc = _ref.disableTourSkipOnEsc;
-  var skipButtonRef = React__default.useRef(null);
-  React__default.useEffect(function () {
+  var skipButtonRef = React.useRef(null);
+  React.useEffect(function () {
     var onWindowKeyDown = function onWindowKeyDown(event) {
       if (!disableTourSkipOnEsc) {
         if (event.keyCode === keycode('esc') && skipButtonRef.current !== null) {
@@ -9815,20 +9543,20 @@ var Tooltip$1 = function Tooltip(_ref) {
       window.removeEventListener('keydown', onWindowKeyDown);
     };
   }, []);
-  return React__default.createElement("div", Object.assign({}, tooltipProps, {
-    className: "yt-tour__step bg-white p-4 w-88 rounded relative"
-  }), React__default.createElement(IconButton, Object.assign({}, skipProps, {
+  return React.createElement("div", Object.assign({}, tooltipProps, {
+    className: "yt-tour__step w-88 relative rounded bg-white p-4"
+  }), React.createElement(IconButton, Object.assign({}, skipProps, {
     ref: skipButtonRef,
     appearance: "discrete",
     icon: "close",
     title: locale.skip,
     "aria-label": locale.skip,
-    className: "absolute top-0 mt-1 right-0 mr-1"
-  })), step.title && React__default.createElement("h5", null, step.title), step.content, React__default.createElement(Group, {
+    className: "absolute top-0 right-0 mt-1 mr-1"
+  })), step.title && React.createElement("h5", null, step.title), step.content, React.createElement(Group, {
     className: "mt-4 justify-end"
-  }, index > 0 && React__default.createElement(Button$1, Object.assign({}, backProps, {
+  }, index > 0 && React.createElement(Button$1, Object.assign({}, backProps, {
     appearance: "discrete"
-  }), locale.back), React__default.createElement(Button$1, Object.assign({}, primaryProps, {
+  }), locale.back), React.createElement(Button$1, Object.assign({}, primaryProps, {
     appearance: "primary"
   }), continuous ? isLastStep ? locale.last + " (" + (index + 1) + "/" + size + ")" : locale.next + " (" + (index + 1) + "/" + size + ")" : locale.close)));
 }; // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -9852,7 +9580,7 @@ var Tour = function Tour(props) {
       rest = _objectWithoutPropertiesLoose(props, _excluded$R);
 
   var steps = React.useMemo(function () {
-    return React__default.Children.map(props.children, function (child) {
+    return React.Children.map(props.children, function (child) {
       var step = {
         disableBeacon: !child.props.showBeacon,
         target: child.props.selector,
@@ -9863,7 +9591,7 @@ var Tour = function Tour(props) {
       return step;
     });
   }, [props.children]);
-  var getStep = React__default.useCallback(function (selector) {
+  var getStep = React.useCallback(function (selector) {
     var _props$children$find;
 
     return (_props$children$find = props.children.find(function (child) {
@@ -9891,7 +9619,7 @@ var Tour = function Tour(props) {
     }
   }
 
-  return React__default.createElement(Joyride__default, Object.assign({}, rest, {
+  return React.createElement(Joyride__default, Object.assign({}, rest, {
     run: run,
     steps: steps,
     showProgress: true,
@@ -9899,7 +9627,7 @@ var Tour = function Tour(props) {
       disableAnimation: true
     },
     tooltipComponent: function tooltipComponent(tooltipProps) {
-      return React__default.createElement(Tooltip$1, Object.assign({}, tooltipProps, {
+      return React.createElement(Tooltip$1, Object.assign({}, tooltipProps, {
         locale: tour,
         disableTourSkipOnEsc: disableTourSkipOnEsc
       }));
@@ -9912,7 +9640,8 @@ var Tour = function Tour(props) {
     styles: {
       /** style beacon */
       options: {
-        primaryColor: tailwind_config_1.colors.blue.light
+        // tailwind.theme.colors.blue.light
+        primaryColor: '#6ba4ff'
       }
     },
     disableCloseOnEsc: true