@economic/taco 2.11.1 → 2.12.0

package/dist/esm/packages/taco/src/components/Tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sources":["../../../../../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as TooltipPrimitive from '@radix-ui/react-tooltip';\nimport cn from 'classnames';\n\nexport type TooltipProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> & {\n    /** The element which activates the tooltip when hovered. Should be a single React/HTML element */\n    children: React.ReactElement | any;\n    /** Text displayed in the tooltip */\n    title: string | JSX.Element;\n    /**\n     *  Placement of the tooltip relative to the reference element. Placement will be reversed if a collision occurs\n     * @defaultValue bottom\n     */\n    placement?: 'top' | 'right' | 'bottom' | 'left';\n};\n\nexport const Tooltip = React.forwardRef(function Tooltip(props: TooltipProps, ref: React.Ref<HTMLElement>) {\n    const { children, placement, title, ...otherProps } = props;\n\n    const className = cn(\n        'xs:max-w-[theme(spacing.56)] max-w-[theme(spacing.32)] animate-[fade-in_150ms] rounded-sm bg-blue-900 px-2 py-1 text-xs font-bold text-white',\n        otherProps.className\n    );\n    const style = { transformOrigin: 'var(--radix-tooltip-content-transform-origin)' };\n\n    return (\n        <TooltipPrimitive.Root delayDuration={250}>\n            <TooltipPrimitive.Trigger asChild ref={ref as any}>\n                {children}\n            </TooltipPrimitive.Trigger>\n            <TooltipPrimitive.Portal>\n                <TooltipPrimitive.Content\n                    {...otherProps}\n                    className={className}\n                    data-taco=\"tooltip\"\n                    side={placement}\n                    sideOffset={3}\n                    style={style}>\n                    <TooltipPrimitive.Arrow className=\"-mt-px fill-blue-900/90 stroke-blue-900/90\" />\n                    {title}\n                </TooltipPrimitive.Content>\n            </TooltipPrimitive.Portal>\n        </TooltipPrimitive.Root>\n    );\n});\n"],"names":["Tooltip","React","props","ref","children","placement","title","otherProps","className","cn","style","transformOrigin","TooltipPrimitive","delayDuration","asChild","side","sideOffset"],"mappings":";;;;MAgBaA,OAAO,gBAAGC,UAAgB,CAAC,SAASD,OAAOA,CAACE,KAAmB,EAAEC,GAA2B;EACrG,MAAM;IAAEC,QAAQ;IAAEC,SAAS;IAAEC,KAAK;IAAE,GAAGC;GAAY,GAAGL,KAAK;EAE3D,MAAMM,SAAS,GAAGC,EAAE,CAChB,8IAA8I,EAC9IF,UAAU,CAACC,SAAS,CACvB;EACD,MAAME,KAAK,GAAG;IAAEC,eAAe,EAAE;GAAiD;EAElF,oBACIV,cAACW,IAAqB;IAACC,aAAa,EAAE;kBAClCZ,cAACW,OAAwB;IAACE,OAAO;IAACX,GAAG,EAAEA;KAClCC,QAAQ,CACc,eAC3BH,cAACW,MAAuB,qBACpBX,cAACW,OAAwB,oBACjBL,UAAU;IACdC,SAAS,EAAEA,SAAS;iBACV,SAAS;IACnBO,IAAI,EAAEV,SAAS;IACfW,UAAU,EAAE,CAAC;IACbN,KAAK,EAAEA;mBACPT,cAACW,KAAsB;IAACJ,SAAS,EAAC;IAA+C,EAChFF,KAAK,CACiB,CACL,CACN;AAEhC,CAAC;;;;"}
+{"version":3,"file":"Tooltip.js","sources":["../../../../../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as TooltipPrimitive from '@radix-ui/react-tooltip';\nimport cn from 'classnames';\n\nexport type TooltipProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> & {\n    /** The element which activates the tooltip when hovered. Should be a single React/HTML element */\n    children: React.ReactElement | any;\n    /** Text displayed in the tooltip */\n    title: string | JSX.Element;\n    /**\n     *  Placement of the tooltip relative to the reference element. Placement will be reversed if a collision occurs\n     * @defaultValue bottom\n     */\n    placement?: 'top' | 'right' | 'bottom' | 'left';\n};\n\nexport const Tooltip = React.forwardRef(function Tooltip(props: TooltipProps, ref: React.Ref<HTMLElement>) {\n    const { title, children, placement, ...otherProps } = props;\n    const className = cn(otherProps.className);\n\n    return (\n        <TooltipPrimitive.Root delayDuration={250}>\n            <TooltipPrimitive.Trigger asChild ref={ref as any}>\n                {children}\n            </TooltipPrimitive.Trigger>\n            <TooltipPrimitive.Portal>\n                <TooltipPrimitive.Content {...otherProps} asChild className={className} side={placement} sideOffset={3}>\n                    <div\n                        className=\"xs:max-w-[theme(spacing.56)] max-w-[theme(spacing.32)] animate-[fade-in_150ms] rounded-sm bg-blue-900 px-2 py-1 text-xs font-bold text-white\"\n                        data-taco=\"tooltip\"\n                        style={{\n                            transformOrigin: 'var(--radix-tooltip-content-transform-origin)',\n                        }}>\n                        <TooltipPrimitive.Arrow className=\"-mt-px fill-blue-900/90 stroke-blue-900/90\" />\n                        {title}\n                    </div>\n                </TooltipPrimitive.Content>\n            </TooltipPrimitive.Portal>\n        </TooltipPrimitive.Root>\n    );\n});\n"],"names":["Tooltip","React","props","ref","title","children","placement","otherProps","className","cn","TooltipPrimitive","delayDuration","asChild","side","sideOffset","style","transformOrigin"],"mappings":";;;;MAgBaA,OAAO,gBAAGC,UAAgB,CAAC,SAASD,OAAOA,CAACE,KAAmB,EAAEC,GAA2B;EACrG,MAAM;IAAEC,KAAK;IAAEC,QAAQ;IAAEC,SAAS;IAAE,GAAGC;GAAY,GAAGL,KAAK;EAC3D,MAAMM,SAAS,GAAGC,EAAE,CAACF,UAAU,CAACC,SAAS,CAAC;EAE1C,oBACIP,cAACS,IAAqB;IAACC,aAAa,EAAE;kBAClCV,cAACS,OAAwB;IAACE,OAAO;IAACT,GAAG,EAAEA;KAClCE,QAAQ,CACc,eAC3BJ,cAACS,MAAuB,qBACpBT,cAACS,OAAwB,oBAAKH,UAAU;IAAEK,OAAO;IAACJ,SAAS,EAAEA,SAAS;IAAEK,IAAI,EAAEP,SAAS;IAAEQ,UAAU,EAAE;mBACjGb;IACIO,SAAS,EAAC,8IAA8I;iBAC9I,SAAS;IACnBO,KAAK,EAAE;MACHC,eAAe,EAAE;;kBAErBf,cAACS,KAAsB;IAACF,SAAS,EAAC;IAA+C,EAChFJ,KAAK,CACJ,CACiB,CACL,CACN;AAEhC,CAAC;;;;"}

package/dist/esm/packages/taco/src/index.js

@@ -38,6 +38,7 @@ export { Listbox, MultiListbox } from './components/Listbox/Listbox.js';
 export { Shortcut } from './components/Shortcut/Shortcut.js';
 export { RadioGroup, findByValue, getRadioGroupItemValueAsString, useRadioGroup } from './components/RadioGroup/RadioGroup.js';
 export { Menu } from './components/Menu/Menu.js';
+export { ModeSwitch } from './components/ModeSwitch/ModeSwitch.js';
 export { Treeview } from './components/Treeview/Treeview.js';
 export { useDropTarget } from './utils/hooks/useDropTarget.js';
 export { Navigation } from './components/Navigation/Navigation.js';

package/dist/esm/packages/taco/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/index.d.ts

@@ -24,6 +24,7 @@ export * from './components/IconButton/IconButton';
 export * from './components/Input/Input';
 export * from './components/Listbox/Listbox';
 export * from './components/Menu/Menu';
+export * from './components/ModeSwitch/ModeSwitch';
 export * from './components/Navigation/Navigation';
 export * from './components/OverflowGroup/OverflowGroup';
 export * from './components/Pagination/Pagination';

package/dist/taco.cjs.development.js

@@ -1287,6 +1287,21 @@ function IconESignature(props, svgRef) {
 }
 var ESignature = /*#__PURE__*/React.forwardRef(IconESignature);
 
+function IconEditSimple(props, svgRef) {
+  return /*#__PURE__*/React.createElement("svg", Object.assign({
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    ref: svgRef
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M16.013 4.513a1.75 1.75 0 012.35-.114l.124.114 1.586 1.585a1.75 1.75 0 01.114 2.35l-.114.125L8.061 20.586H4v-4.06L16.013 4.512zm-1.514 3.633l-8.999 9v1.94h1.938l9-9.001-1.939-1.939zm2.928-2.573a.25.25 0 00-.3-.04l-.054.04-1.513 1.512 1.939 1.939 1.514-1.511a.25.25 0 00.065-.24l-.025-.06-.04-.054-1.586-1.586z",
+    fill: "currentColor"
+  }));
+}
+var EditSimple = /*#__PURE__*/React.forwardRef(IconEditSimple);
+
 function IconEdit(props, svgRef) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
@@ -3349,6 +3364,7 @@ const icons = {
   drag: Drag,
   'e-copedia': ECopedia,
   'e-signature': ESignature,
+  'edit-simple': EditSimple,
   edit: Edit,
   'ellipsis-horizontal': EllipsisHorizontal,
   'ellipsis-vertical': EllipsisVertical,
@@ -3983,29 +3999,31 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(props, ref) {
 
 const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(props, ref) {
   const {
+    title,
     children,
     placement,
-    title,
     ...otherProps
   } = props;
-  const className = cn('xs:max-w-[theme(spacing.56)] max-w-[theme(spacing.32)] animate-[fade-in_150ms] rounded-sm bg-blue-900 px-2 py-1 text-xs font-bold text-white', otherProps.className);
-  const style = {
-    transformOrigin: 'var(--radix-tooltip-content-transform-origin)'
-  };
+  const className = cn(otherProps.className);
   return /*#__PURE__*/React.createElement(TooltipPrimitive.Root, {
     delayDuration: 250
   }, /*#__PURE__*/React.createElement(TooltipPrimitive.Trigger, {
     asChild: true,
     ref: ref
   }, children), /*#__PURE__*/React.createElement(TooltipPrimitive.Portal, null, /*#__PURE__*/React.createElement(TooltipPrimitive.Content, Object.assign({}, otherProps, {
+    asChild: true,
     className: className,
-    "data-taco": "tooltip",
     side: placement,
-    sideOffset: 3,
-    style: style
-  }), /*#__PURE__*/React.createElement(TooltipPrimitive.Arrow, {
+    sideOffset: 3
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "xs:max-w-[theme(spacing.56)] max-w-[theme(spacing.32)] animate-[fade-in_150ms] rounded-sm bg-blue-900 px-2 py-1 text-xs font-bold text-white",
+    "data-taco": "tooltip",
+    style: {
+      transformOrigin: 'var(--radix-tooltip-content-transform-origin)'
+    }
+  }, /*#__PURE__*/React.createElement(TooltipPrimitive.Arrow, {
     className: "-mt-px fill-blue-900/90 stroke-blue-900/90"
-  }), title)));
+  }), title))));
 });
 
 const getButtonClasses = () => {
@@ -4356,8 +4374,7 @@ const defaultLocalisationTexts = {
       },
       buttons: {
         edit: {
-          text: 'Edit',
-          tooltip: 'Edit'
+          tooltip: 'Edit table'
         }
       },
       rowIndicator: {
@@ -7862,12 +7879,11 @@ const RadioGroup$1 = /*#__PURE__*/React.forwardRef(function MenuRadioItem(props,
 });
 RadioGroup$1.Item = RadioItem;
 
-const Separator = /*#__PURE__*/React.forwardRef((props, ref) => {
-  return /*#__PURE__*/React.createElement(DropdownMenuPrimitive.Separator, Object.assign({}, props, {
-    className: "bg-grey-300 my-1 h-px",
-    ref: ref
-  }));
-});
+const Separator = () => {
+  return /*#__PURE__*/React.createElement(DropdownMenuPrimitive.Separator, {
+    className: "bg-grey-300 my-1 h-px"
+  });
+};
 
 const Header = /*#__PURE__*/React.forwardRef(function MenuHeader(props, ref) {
   const menu = useCurrentMenu();
@@ -7942,6 +7958,29 @@ Menu$1.Header = Header;
 Menu$1.RadioGroup = RadioGroup$1;
 Menu$1.SubMenu = SubMenu;
 
+const ModeSwitch = /*#__PURE__*/React.forwardRef(function ModeSwitch(props, ref) {
+  const {
+    onChange,
+    ...otherProps
+  } = props;
+  const className = cn('group w-14 h-8 flex flex-shrink-0 rounded-full inline-flex focus-visible:yt-focus p-1', {
+    'bg-grey-500 hover:bg-grey-700 aria-checked:bg-blue-500 aria-checked:hover:bg-blue-700': !props.disabled,
+    'bg-grey-500 aria-checked:bg-blue-500 cursor-not-allowed opacity-50': props.disabled
+  }, props.className);
+  return /*#__PURE__*/React.createElement(PrimitiveSwitch.Root, Object.assign({}, otherProps, {
+    className: className,
+    "data-taco": "mode",
+    onCheckedChange: onChange,
+    ref: ref
+  }), /*#__PURE__*/React.createElement(PrimitiveSwitch.Thumb, {
+    className: "'will-change-transform flex h-6 w-6 items-center justify-center rounded-full bg-white transition-transform group-disabled:opacity-50 group-aria-checked:translate-x-[100%]"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "edit-simple",
+    className: "!h-5 !w-5"
+  })));
+});
+ModeSwitch.displayName = 'ModeSwitch';
+
 const TreeviewItem = /*#__PURE__*/React__default.forwardRef(function TreeviewItem(props, ref) {
   return /*#__PURE__*/React__default.createElement("a", Object.assign({}, props, {
     ref: ref
@@ -16008,7 +16047,7 @@ function Menu$3(props) {
       // we do this in the next tick, otherwise the menu closes and react throws a "state update on unmounted component" error
       const handleClick = event => setTimeout(() => handleHide(event), 1);
       menuItems.push( /*#__PURE__*/React__default.createElement(Menu$1.Item, {
-        icon: "unreconciled",
+        icon: "eye-off",
         onClick: handleClick
       }, texts.table3.columns.menu.hideColumn));
     }
@@ -16655,7 +16694,7 @@ const getInputAppearanceClassnames = () => {
   return cn('[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none');
 };
 
-const useCssGrid = (table, isPrintTable = false) => {
+const useCssGrid = (table, isPrintTable = false, actionsForRowLength = 0) => {
   const allVisibleColumns = table.getVisibleLeafColumns();
   const columnSizing = table.getState().columnSizing;
   const rowsLength = table.getRowModel().rows.length;
@@ -16674,7 +16713,8 @@ const useCssGrid = (table, isPrintTable = false) => {
         size = `minmax(${PRINT_MIN_COLUMN_SIZE}px, ${maxWidth})`;
       } else if (isColumnInternal) {
         if (column.id === COLUMN_ID) {
-          size = 'minmax(max-content, auto)';
+          const minWidth = actionsForRowLength * 32 + 8 /* button margins l+r */ + 8; /* cell padding l+r */
+          size = `minmax(${minWidth}px, auto)`;
         } else {
           // getSize method is used instead of columnSizing state because columnSizing state doesn't have
           // sizes of internal columns.
@@ -16767,16 +16807,31 @@ function useCurrentRow(defaultCurrentRowIndex) {
       // do it in the next tick, otherwise it prevents internal focus from working
       // meaning you have to tab twice to get to the first focusable element
       setTimeout(() => {
-        setCurrentRowIndex(0);
-        scrollToIndex(0);
+        setCurrentRowIndex(index => {
+          if (index === undefined) {
+            scrollToIndex(0);
+            return 0;
+          }
+          return index;
+        });
       }, 1);
     }
   }, [currentRowIndex, length]);
+  const onMouseCapture = React__default.useCallback((event, length) => {
+    if (event.isDefaultPrevented()) {
+      return;
+    }
+    if (currentRowIndex === undefined && length > 0) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  }, [currentRowIndex, length]);
   return {
     currentRowIndex,
     setCurrentRowIndex,
     handleFocus: onFocus,
-    handleKeyDown: onKeyDown
+    handleKeyDown: onKeyDown,
+    handleMouseCapture: onMouseCapture
   };
 }
 const getNextIndex$2 = (direction, currentIndex, length) => {
@@ -20144,15 +20199,8 @@ function EditButton(props) {
     texts
   } = useLocalization();
   const tableMeta = props.table.options.meta;
-  const className = cn({
-    '!wcag-blue-100': tableMeta.editing.isEditing
-  });
-  const handleClick = () => tableMeta.editing.toggleEditing(!tableMeta.editing.isEditing);
-  return /*#__PURE__*/React__default.createElement(Button$1, {
-    "aria-pressed": tableMeta.editing.isEditing,
-    className: className,
-    onClick: handleClick,
-    tooltip: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, texts.table3.editing.buttons.edit.tooltip, /*#__PURE__*/React__default.createElement(Shortcut, {
+  return /*#__PURE__*/React__default.createElement(Tooltip, {
+    title: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, texts.table3.editing.buttons.edit.tooltip, /*#__PURE__*/React__default.createElement(Shortcut, {
       className: "ml-2",
       keys: {
         key: 'e',
@@ -20160,10 +20208,11 @@ function EditButton(props) {
         shift: false
       }
     }))
-  }, /*#__PURE__*/React__default.createElement(Icon, {
-    "aria-hidden": true,
-    name: "edit"
-  }), texts.table3.editing.buttons.edit.text);
+  }, /*#__PURE__*/React__default.createElement(ModeSwitch, {
+    "aria-pressed": tableMeta.editing.isEditing,
+    checked: tableMeta.editing.isEditing,
+    onChange: tableMeta.editing.toggleEditing
+  }));
 }
 
 const PRINT_STYLES = `
@@ -21184,12 +21233,16 @@ const Table$1 = /*#__PURE__*/fixedForwardRef(function Table3(props, ref) {
   // scrollToIndex function changes when row count changes, so it is important to update handlers with new
   // scrollToIndex function.
   [scrollToIndex, tableMeta.editing.isEditing, internalRef.current]);
-  const handleBlur = event => {
+  const handleBlur = tableMeta.editing.isEnabled ? event => {
     tableMeta.editing.handleBlur(event);
-  };
-  const handleFocus = event => {
+  } : undefined;
+  const handleFocus = tableMeta.currentRow.currentRowIndex === undefined ? event => {
     tableMeta.currentRow.handleFocus(event, table.getRowModel().rows.length, scrollToIndex);
-  };
+  } : undefined;
+  // mouse capture fires before focus, so we can prevent propagation and stop double setting of the active row
+  const handleMouseCapture = tableMeta.currentRow.currentRowIndex === undefined ? event => {
+    tableMeta.currentRow.handleMouseCapture(event, table.getRowModel().rows.length);
+  } : undefined;
   const handleScroll = function (event) {
     try {
       tableMeta.columnFreezing.handleScroll(event);
@@ -21207,7 +21260,7 @@ const Table$1 = /*#__PURE__*/fixedForwardRef(function Table3(props, ref) {
   // if the table is a print table or not.
   const {
     style: cssGridStyle
-  } = useCssGrid(table, tableMeta.isPrinting);
+  } = useCssGrid(table, tableMeta.isPrinting, tableMeta.rowActions.actionsForRowLength);
   const {
     style: cssVars
   } = useCssVars(tableMeta.rowHeight.height, tableMeta.fontSize.size);
@@ -21241,6 +21294,7 @@ const Table$1 = /*#__PURE__*/fixedForwardRef(function Table3(props, ref) {
     "data-taco": "table2",
     onBlur: handleBlur,
     onFocus: handleFocus,
+    onMouseDownCapture: handleMouseCapture,
     onScroll: handleScroll,
     ref: internalRef,
     role: "table",
@@ -22267,6 +22321,7 @@ exports.Listbox = Listbox;
 exports.LocalizationContext = LocalizationContext;
 exports.LocalizationProvider = LocalizationProvider;
 exports.Menu = Menu$1;
+exports.ModeSwitch = ModeSwitch;
 exports.MultiListbox = MultiListbox;
 exports.Navigation = Navigation;
 exports.Navigation2 = Navigation2;