@economic/taco 2.18.0 → 2.19.0

package/dist/taco.cjs.development.js

@@ -9908,6 +9908,13 @@ const Colours = props => {
 const mobiles = /iPhone|iPad|iPod|Android/i;
 const isMobileDevice = navigator => !!(navigator !== null && navigator !== void 0 && navigator.userAgent) && mobiles.test(navigator.userAgent);
 
+(function (FontSizes) {
+  FontSizes["small"] = "small";
+  FontSizes["medium"] = "medium";
+  FontSizes["large"] = "large";
+})(exports.FontSizes || (exports.FontSizes = {}));
+const fixedForwardRef = React__default.forwardRef;
+
 const Option$1 = /*#__PURE__*/React__default.forwardRef(function Select2Option(props, ref) {
   var _window;
   const {
@@ -9928,9 +9935,14 @@ const Option$1 = /*#__PURE__*/React__default.forwardRef(function Select2Option(p
     setOpen,
     shouldPauseHoverState,
     tags,
-    value
+    value,
+    fontSize = exports.FontSizes.medium
   } = useSelect2Context();
-  const className = cn(createOptionClassName(shouldPauseHoverState), cName);
+  const className = cn(createOptionClassName(shouldPauseHoverState), {
+    'text-xs': fontSize === exports.FontSizes.small,
+    'text-sm': fontSize === exports.FontSizes.medium,
+    'text-base': fontSize === exports.FontSizes.large
+  }, cName);
   const hasValue = Array.isArray(value) ? !!value.length : value !== undefined;
   const isTag = tags && !!color;
   const handleClick = () => {
@@ -10002,9 +10014,12 @@ const Group$2 = /*#__PURE__*/React__default.forwardRef(function Select2Group(pro
   const {
     children,
     heading,
+    hasSeparator,
     ...attributes
   } = props;
-  const className = cn(createCollectionClassName(), props.className);
+  const className = cn(createCollectionClassName(), {
+    "last:after:content-none after:content-[''] after:bg-grey-300 after:mx-2 after:my-1 after:h-px": hasSeparator && children.length
+  }, props.className);
   return /*#__PURE__*/React__default.createElement(Group$1, Object.assign({}, attributes, {
     className: className,
     ref: ref
@@ -10428,7 +10443,7 @@ const Search$1 = /*#__PURE__*/React__default.forwardRef(function ListboxSearch(p
   })));
 });
 
-const isGroup = child => !!child.props.heading;
+const isGroup = child => !!child.props.heading || !!child.props.hasSeparator;
 const useChildren = ({
   children: initialChildren,
   emptyValue,
@@ -10611,6 +10626,7 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
     readOnly = false,
     tags = false,
     value: prop,
+    fontSize,
     ...otherProps
   } = props;
   const emptyOption = React__default.useMemo(() => {
@@ -10688,6 +10704,7 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
     shouldPauseHoverState,
     setShouldPauseHoverState,
     tags,
+    fontSize,
     validationError,
     value
   };
@@ -13016,30 +13033,6 @@ const MemoedFooter = /*#__PURE__*/React__default.memo(function MemoedFooter(prop
   }, meta.footer(table.getRowModel().rows.map(row => row.original[id])))) : null);
 });
 
-const FONT_SIZE = {
-  small: 'small',
-  medium: 'medium',
-  large: 'large'
-};
-function FontSize$1(props) {
-  const {
-    texts
-  } = useLocalization();
-  const meta = props.table.options.meta;
-  const handleChange = value => meta.fontSize.setSize(value);
-  return /*#__PURE__*/React__default.createElement(Menu$1.SubMenu, null, /*#__PURE__*/React__default.createElement(Menu$1.RadioGroup, {
-    onChange: handleChange,
-    value: meta.fontSize.size
-  }, /*#__PURE__*/React__default.createElement(Menu$1.RadioGroup.Item, {
-    value: FONT_SIZE.small
-  }, texts.table3.fontSize.sizes.small), /*#__PURE__*/React__default.createElement(Menu$1.RadioGroup.Item, {
-    value: FONT_SIZE.medium
-  }, texts.table3.fontSize.sizes.medium), /*#__PURE__*/React__default.createElement(Menu$1.RadioGroup.Item, {
-    disabled: meta.rowHeight.height === 'short',
-    value: FONT_SIZE.large
-  }, texts.table3.fontSize.sizes.large)));
-}
-
 var IndicatorReason;
 (function (IndicatorReason) {
   IndicatorReason["SEARCH"] = "SEARCH";
@@ -13161,8 +13154,8 @@ const MemoedCell = /*#__PURE__*/React__default.memo(function MemoedCell(props) {
     const actionsInMenu = visibleActions.slice(visibleActions.length === actionsLength ? actionsLength : actionsLength - 1);
     const className = cn('-mb-2 flex justify-end pl-2 text-right', {
       // Adjust negative margin on row actions cell to ensure that the cell aligns vertically.
-      '-mt-2': fontSize === FONT_SIZE.small,
-      '-mt-1.5': fontSize !== FONT_SIZE.small
+      '-mt-2': fontSize === exports.FontSizes.small,
+      '-mt-1.5': fontSize !== exports.FontSizes.small
     }, props.className);
     content = /*#__PURE__*/React__default.createElement("span", {
       className: className,
@@ -13284,23 +13277,15 @@ function getCellValueAsString(value, dataType) {
   return String(value);
 }
 
-// settings
-var TableFontSizes;
-(function (TableFontSizes) {
-  TableFontSizes["small"] = "small";
-  TableFontSizes["medium"] = "medium";
-  TableFontSizes["large"] = "large";
-})(TableFontSizes || (TableFontSizes = {}));
-
 // column widths
 const getCellMinWidth = (fontSize = 'medium') => {
   switch (fontSize) {
-    case TableFontSizes.small:
+    case exports.FontSizes.small:
       return 57;
-    case TableFontSizes.large:
+    case exports.FontSizes.large:
       return 83;
     default:
-    case TableFontSizes.medium:
+    case exports.FontSizes.medium:
       return 72;
   }
 };
@@ -14973,7 +14958,7 @@ const TextareaControl = /*#__PURE__*/React__default.forwardRef(function Textarea
       handleTextareaKeyDown(e);
     },
     onBlur: handleBlur,
-    className: cn(getCellAlignmentClasses(align), `h-fit resize-none`, {
+    className: cn(getCellAlignmentClasses(align), `h-fit resize-none overflow-y-hidden focus:overflow-y-auto`, {
       [`!min-h-[${minMaxHeight.min}px]`]: columnMeta === null || columnMeta === void 0 ? void 0 : columnMeta.enableTruncate,
       '!yt-focus-dark': isCellInDetailMode,
       [`h-[${minMaxHeight.min}px]`]: !isCellInDetailMode && (columnMeta === null || columnMeta === void 0 ? void 0 : columnMeta.enableTruncate),
@@ -15105,6 +15090,7 @@ const EditingControl = /*#__PURE__*/React__default.forwardRef(function Control(p
           handleChange(nextValue);
         }
       },
+      fontSize: tableMeta.fontSize.size,
       value
     }, data);
   } else if (controlRenderer === 'datepicker') {
@@ -16295,15 +16281,15 @@ function useTableFontSizeListener(table) {
 }
 function getCellWidthDifference(fontSizeKey) {
   switch (fontSizeKey) {
-    case `${TableFontSizes.small}-${TableFontSizes.medium}`:
-    case `${TableFontSizes.medium}-${TableFontSizes.large}`:
+    case `${exports.FontSizes.small}-${exports.FontSizes.medium}`:
+    case `${exports.FontSizes.medium}-${exports.FontSizes.large}`:
       return 8;
-    case `${TableFontSizes.medium}-${TableFontSizes.small}`:
-    case `${TableFontSizes.large}-${TableFontSizes.medium}`:
+    case `${exports.FontSizes.medium}-${exports.FontSizes.small}`:
+    case `${exports.FontSizes.large}-${exports.FontSizes.medium}`:
       return -8;
-    case `${TableFontSizes.small}-${TableFontSizes.large}`:
+    case `${exports.FontSizes.small}-${exports.FontSizes.large}`:
       return 16;
-    case `${TableFontSizes.large}-${TableFontSizes.small}`:
+    case `${exports.FontSizes.large}-${exports.FontSizes.small}`:
       return -16;
     default:
       return 0;
@@ -17950,8 +17936,8 @@ function RowHeight(props) {
   const handleChange = value => {
     const height = value;
     meta.rowHeight.setHeight(height);
-    if (height === 'short' && meta.fontSize.size === FONT_SIZE.large) {
-      meta.fontSize.setSize(FONT_SIZE.medium);
+    if (height === 'short' && meta.fontSize.size === exports.FontSizes.large) {
+      meta.fontSize.setSize(exports.FontSizes.medium);
     }
   };
   return /*#__PURE__*/React__default.createElement(Menu$1.SubMenu, null, /*#__PURE__*/React__default.createElement(Menu$1.RadioGroup, {
@@ -18180,6 +18166,25 @@ function ColumnSettingsPopover(props) {
   })) : texts.table3.columnSettings.noResults)))));
 }
 
+function FontSize$1(props) {
+  const {
+    texts
+  } = useLocalization();
+  const meta = props.table.options.meta;
+  const handleChange = value => meta.fontSize.setSize(value);
+  return /*#__PURE__*/React__default.createElement(Menu$1.SubMenu, null, /*#__PURE__*/React__default.createElement(Menu$1.RadioGroup, {
+    onChange: handleChange,
+    value: meta.fontSize.size
+  }, /*#__PURE__*/React__default.createElement(Menu$1.RadioGroup.Item, {
+    value: exports.FontSizes.small
+  }, texts.table3.fontSize.sizes.small), /*#__PURE__*/React__default.createElement(Menu$1.RadioGroup.Item, {
+    value: exports.FontSizes.medium
+  }, texts.table3.fontSize.sizes.medium), /*#__PURE__*/React__default.createElement(Menu$1.RadioGroup.Item, {
+    disabled: meta.rowHeight.height === 'short',
+    value: exports.FontSizes.large
+  }, texts.table3.fontSize.sizes.large)));
+}
+
 function SettingsButton(props) {
   const {
     customSettings,
@@ -18346,7 +18351,7 @@ const getCellHeightPadding = (height, fontSize) => {
     case 'short':
       {
         switch (fontSize) {
-          case FONT_SIZE.small:
+          case exports.FontSizes.small:
             return '8px';
           default:
             return '6px';
@@ -18356,9 +18361,9 @@ const getCellHeightPadding = (height, fontSize) => {
     case 'tall':
       {
         switch (fontSize) {
-          case FONT_SIZE.small:
+          case exports.FontSizes.small:
             return '16px';
-          case FONT_SIZE.large:
+          case exports.FontSizes.large:
             return '12px';
           default:
             return '14px';
@@ -18367,9 +18372,9 @@ const getCellHeightPadding = (height, fontSize) => {
     case 'extra-tall':
       {
         switch (fontSize) {
-          case FONT_SIZE.small:
+          case exports.FontSizes.small:
             return '22px';
-          case FONT_SIZE.large:
+          case exports.FontSizes.large:
             return '18px';
           default:
             return '20px';
@@ -18378,9 +18383,9 @@ const getCellHeightPadding = (height, fontSize) => {
     default:
       {
         switch (fontSize) {
-          case FONT_SIZE.small:
+          case exports.FontSizes.small:
             return '12px';
-          case FONT_SIZE.large:
+          case exports.FontSizes.large:
             return '8px';
           default:
             return '10px';
@@ -18390,9 +18395,9 @@ const getCellHeightPadding = (height, fontSize) => {
 };
 const getCellWidthPadding = fontSize => {
   switch (fontSize) {
-    case FONT_SIZE.small:
+    case exports.FontSizes.small:
       return '8px';
-    case FONT_SIZE.medium:
+    case exports.FontSizes.medium:
       return '12px';
     default:
       return '16px';
@@ -18572,8 +18577,6 @@ function FilterResetDialog(props) {
   }, texts.table3.validation.resetFiltersDialog.confirm)))));
 }
 
-const fixedForwardRef = React__default.forwardRef;
-
 function useTable3DataLoader(fetch, fetchAll, options = {
   pageSize: 100
 }) {
@@ -18796,9 +18799,9 @@ const Table$1 = /*#__PURE__*/fixedForwardRef(function Table3(props, ref) {
     }
   };
   const className = cn('border-grey-300 relative grid h-full w-full flex-grow overflow-auto rounded border bg-white scroll-mt-[41px] focus-visible:outline-none', '[&[data-resizing="true"]]:select-none', {
-    'text-xs': tableMeta.fontSize.size === FONT_SIZE.small,
-    'text-sm': tableMeta.fontSize.size === FONT_SIZE.medium,
-    'text-base': tableMeta.fontSize.size === FONT_SIZE.large
+    'text-xs': tableMeta.fontSize.size === exports.FontSizes.small,
+    'text-sm': tableMeta.fontSize.size === exports.FontSizes.medium,
+    'text-base': tableMeta.fontSize.size === exports.FontSizes.large
   });
   // Print tables have "_print" as the postfix for the table id, so we can use the it to determine
   // if the table is a print table or not.