@economic/taco 2.7.1 → 2.7.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (46) hide show
  1. package/dist/components/Select2/Select2.d.ts +4 -5
  2. package/dist/components/Select2/components/Context.d.ts +4 -6
  3. package/dist/components/Select2/components/Create.d.ts +2 -1
  4. package/dist/components/Select2/types.d.ts +4 -0
  5. package/dist/components/Table3/components/columns/cell/controls/{TextAreaControl.d.ts → TextareaControl.d.ts} +1 -1
  6. package/dist/components/Table3/types.d.ts +1 -1
  7. package/dist/esm/packages/taco/src/components/Dialog/components/Content.js +9 -0
  8. package/dist/esm/packages/taco/src/components/Dialog/components/Content.js.map +1 -1
  9. package/dist/esm/packages/taco/src/components/Input/Input.js +15 -12
  10. package/dist/esm/packages/taco/src/components/Input/Input.js.map +1 -1
  11. package/dist/esm/packages/taco/src/components/Listbox/ScrollableList.js +3 -0
  12. package/dist/esm/packages/taco/src/components/Listbox/ScrollableList.js.map +1 -1
  13. package/dist/esm/packages/taco/src/components/SearchInput2/SearchInput2.js +19 -19
  14. package/dist/esm/packages/taco/src/components/SearchInput2/SearchInput2.js.map +1 -1
  15. package/dist/esm/packages/taco/src/components/Select2/Select2.js.map +1 -1
  16. package/dist/esm/packages/taco/src/components/Select2/components/Context.js.map +1 -1
  17. package/dist/esm/packages/taco/src/components/Select2/components/Create.js.map +1 -1
  18. package/dist/esm/packages/taco/src/components/Table3/Table3.js +0 -6
  19. package/dist/esm/packages/taco/src/components/Table3/Table3.js.map +1 -1
  20. package/dist/esm/packages/taco/src/components/Table3/components/columns/cell/DisplayCell.js +1 -1
  21. package/dist/esm/packages/taco/src/components/Table3/components/columns/cell/DisplayCell.js.map +1 -1
  22. package/dist/esm/packages/taco/src/components/Table3/components/columns/cell/EditingCell.js +2 -1
  23. package/dist/esm/packages/taco/src/components/Table3/components/columns/cell/EditingCell.js.map +1 -1
  24. package/dist/esm/packages/taco/src/components/Table3/components/columns/cell/EditingControl.js +2 -2
  25. package/dist/esm/packages/taco/src/components/Table3/components/columns/cell/EditingControl.js.map +1 -1
  26. package/dist/esm/packages/taco/src/components/Table3/components/columns/cell/controls/{TextAreaControl.js → TextareaControl.js} +3 -3
  27. package/dist/esm/packages/taco/src/components/Table3/components/columns/cell/controls/{TextAreaControl.js.map → TextareaControl.js.map} +1 -1
  28. package/dist/esm/packages/taco/src/components/Table3/components/columns/internal/Actions.js +8 -1
  29. package/dist/esm/packages/taco/src/components/Table3/components/columns/internal/Actions.js.map +1 -1
  30. package/dist/esm/packages/taco/src/components/Table3/components/toolbar/PrintButton/hooks/useParentStylesheets.js +3 -1
  31. package/dist/esm/packages/taco/src/components/Table3/components/toolbar/PrintButton/hooks/useParentStylesheets.js.map +1 -1
  32. package/dist/esm/packages/taco/src/components/Table3/components/toolbar/RowHeight.js +7 -1
  33. package/dist/esm/packages/taco/src/components/Table3/components/toolbar/RowHeight.js.map +1 -1
  34. package/dist/esm/packages/taco/src/components/Table3/components/toolbar/Toolbar.js +1 -1
  35. package/dist/esm/packages/taco/src/components/Table3/components/toolbar/Toolbar.js.map +1 -1
  36. package/dist/esm/packages/taco/src/components/Table3/hooks/listeners/useSettingsStateListener.js +14 -12
  37. package/dist/esm/packages/taco/src/components/Table3/hooks/listeners/useSettingsStateListener.js.map +1 -1
  38. package/dist/esm/packages/taco/src/components/Table3/types.js.map +1 -1
  39. package/dist/esm/packages/taco/src/components/Textarea/Textarea.js +4 -0
  40. package/dist/esm/packages/taco/src/components/Textarea/Textarea.js.map +1 -1
  41. package/dist/taco.cjs.development.js +88 -56
  42. package/dist/taco.cjs.development.js.map +1 -1
  43. package/dist/taco.cjs.production.min.js +1 -1
  44. package/dist/taco.cjs.production.min.js.map +1 -1
  45. package/package.json +2 -2
  46. package/types.json +6902 -7119
@@ -4829,23 +4829,26 @@ const InputWithoutDeprecatedFeatures = /*#__PURE__*/React.forwardRef(function In
4829
4829
  ...attributes
4830
4830
  } = props;
4831
4831
  const internalRef = useMergedRef(ref);
4832
- let handleKeyDown = onKeyDown;
4833
- // home and end keys only navigate to the start/end of input value if the input container does not scroll
4834
- // if it has scroll height then the browser reverts to native scrolling behaviour only
4835
- // so we manually override it to ensure _our_ desired behaviour remains intact
4836
- // only the 'text', 'search', 'url', 'tel', 'password' input types support setSelectionRange
4837
- if (validSetSelectionRangeTypes.includes(type)) {
4838
- handleKeyDown = event => {
4832
+ const handleKeyDown = event => {
4833
+ // prevent any external keyboard shortcuts from executing while typing single characters in input
4834
+ if (event.key.length === 1) {
4835
+ event.stopPropagation();
4836
+ }
4837
+ // home and end keys only navigate to the start/end of input value if the input container does not scroll
4838
+ // if it has scroll height then the browser reverts to native scrolling behaviour only
4839
+ // so we manually override it to ensure _our_ desired behaviour remains intact
4840
+ // only the 'text', 'search', 'url', 'tel', 'password' input types support setSelectionRange
4841
+ if (validSetSelectionRangeTypes.includes(type)) {
4839
4842
  if (!event.shiftKey && (event.key === 'Home' || event.key === 'End')) {
4840
4843
  event.preventDefault();
4841
4844
  const position = event.key === 'End' ? event.currentTarget.value.length : 0;
4842
4845
  event.currentTarget.setSelectionRange(position, position);
4843
4846
  }
4844
- if (typeof onKeyDown === 'function') {
4845
- onKeyDown(event);
4846
- }
4847
- };
4848
- }
4847
+ }
4848
+ if (typeof onKeyDown === 'function') {
4849
+ onKeyDown(event);
4850
+ }
4851
+ };
4849
4852
  const prefixRef = React.useRef(null);
4850
4853
  const prefixRect = useBoundingClientRectListener(prefixRef);
4851
4854
  const postfixRef = React.useRef(null);
@@ -5093,6 +5096,9 @@ const ScrollableList = /*#__PURE__*/React.forwardRef(function ScrollableList(pro
5093
5096
  const index = nextIndex !== undefined ? nextIndex : currentIndex;
5094
5097
  onKeyDown(event, index);
5095
5098
  }
5099
+ // Stops the keyboard event from propagating so that keyboard event on other components outside the scrollable
5100
+ // list are not executed.
5101
+ event.stopPropagation();
5096
5102
  };
5097
5103
  const handleClick = index => event => {
5098
5104
  setCurrentIndex(index);
@@ -6145,6 +6151,8 @@ const Content$4 = /*#__PURE__*/React.forwardRef(function DialogContent(props, re
6145
6151
  } else if (dialog.onClose) {
6146
6152
  dialog.onClose();
6147
6153
  }
6154
+ // Stops event from propogating outside the dialog.
6155
+ event.stopPropagation();
6148
6156
  };
6149
6157
  // the chosen behaviour in taco is that outside clicks do not close the dialog
6150
6158
  const handleInteractOutside = event => event.preventDefault();
@@ -6158,12 +6166,19 @@ const Content$4 = /*#__PURE__*/React.forwardRef(function DialogContent(props, re
6158
6166
  } else {
6159
6167
  output = props.children;
6160
6168
  }
6169
+ const onKeyDown = event => {
6170
+ if (event.key !== 'Escape') {
6171
+ // Stops event from propogating outside the dialog.
6172
+ event.stopPropagation();
6173
+ }
6174
+ };
6161
6175
  return /*#__PURE__*/React.createElement(DialogPrimitive.Portal, null, /*#__PURE__*/React.createElement(DialogPrimitive.Overlay, {
6162
6176
  asChild: true
6163
6177
  }, /*#__PURE__*/React.createElement(Backdrop, null, /*#__PURE__*/React.createElement(DialogPrimitive.Content, Object.assign({}, props, {
6164
6178
  className: className,
6165
6179
  onEscapeKeyDown: handleEscapeKeyDown,
6166
6180
  onInteractOutside: handleInteractOutside,
6181
+ onKeyDown: onKeyDown,
6167
6182
  ref: internalRef,
6168
6183
  style: {
6169
6184
  ...props.style,
@@ -8983,7 +8998,7 @@ const SearchInput2 = /*#__PURE__*/React__default.forwardRef(function SearchInput
8983
8998
  ...attributes
8984
8999
  } = props;
8985
9000
  const internalRef = useMergedRef(ref);
8986
- const settingsRef = React__default.useRef(null);
9001
+ const containerRef = React__default.useRef(null);
8987
9002
  const [focused, setFocused] = React__default.useState(false);
8988
9003
  const {
8989
9004
  texts
@@ -8998,8 +9013,8 @@ const SearchInput2 = /*#__PURE__*/React__default.forwardRef(function SearchInput
8998
9013
  }
8999
9014
  });
9000
9015
  const handleBlur = event => {
9001
- var _settingsRef$current, _attributes$onBlur;
9002
- if (settingsRef.current && (settingsRef.current === event.relatedTarget || (_settingsRef$current = settingsRef.current) !== null && _settingsRef$current !== void 0 && _settingsRef$current.contains(event.relatedTarget))) {
9016
+ var _containerRef$current, _attributes$onBlur;
9017
+ if (containerRef.current && (containerRef.current === event.relatedTarget || (_containerRef$current = containerRef.current) !== null && _containerRef$current !== void 0 && _containerRef$current.contains(event.relatedTarget))) {
9003
9018
  return;
9004
9019
  }
9005
9020
  setFocused(false);
@@ -9090,9 +9105,9 @@ const SearchInput2 = /*#__PURE__*/React__default.forwardRef(function SearchInput
9090
9105
  }
9091
9106
  });
9092
9107
  }
9093
- const className = cn('peer !pl-7', hasFind ? {
9094
- '!w-48': !value && !focused,
9095
- '!w-72': value || focused
9108
+ const className = cn('!pl-7 group-focus-within:!w-72 group-focus-within:yt-focus', hasFind ? {
9109
+ '!w-48': !value,
9110
+ '!w-72': value
9096
9111
  } : '!w-48', {
9097
9112
  '!wcag-blue-100': isActive
9098
9113
  }, props.className);
@@ -9120,26 +9135,26 @@ const SearchInput2 = /*#__PURE__*/React__default.forwardRef(function SearchInput
9120
9135
  value: value !== null && value !== void 0 ? value : ''
9121
9136
  }));
9122
9137
  if (settingsContent) {
9123
- const handleSettingsBlur = event => {
9124
- if (event.currentTarget.contains(event.relatedTarget) || event.currentTarget.contains(event.target)) {
9125
- return;
9126
- }
9127
- setFocused(false);
9128
- };
9138
+ const settingsClassname = cn('border-grey-300 absolute left-0 right-0 -mt-0.5 hidden top-full group-focus-within:flex focus-within:flex flex-col gap-y-4 rounded-b border border-t-0 bg-white p-3 shadow !pt-[calc(theme(spacing.3)_+_theme(spacing[0.5]))]');
9129
9139
  return /*#__PURE__*/React__default.createElement("div", {
9130
- className: cn('relative', {
9131
- "[&_[data-taco='input-container']]:z-20": focused
9140
+ className: cn('group relative', {
9141
+ 'z-10 [&_[data-taco=input-container]]:z-10': focused
9132
9142
  }),
9133
- onBlur: handleSettingsBlur,
9134
- ref: settingsRef
9135
- }, input, focused ? /*#__PURE__*/React__default.createElement("div", {
9136
- className: "border-grey-300 absolute left-0 right-0 top-full z-10 flex flex-col gap-y-4 rounded-b border border-t-0 bg-white p-3 shadow",
9143
+ ref: containerRef,
9144
+ // create a new stacking context so our internal z-indexes don't effect external components
9145
+ // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
9146
+ style: {
9147
+ opacity: 0.999
9148
+ }
9149
+ }, input, /*#__PURE__*/React__default.createElement("div", {
9150
+ className: settingsClassname,
9137
9151
  onClickCapture: () => {
9138
9152
  var _internalRef$current5;
9139
9153
  return (_internalRef$current5 = internalRef.current) === null || _internalRef$current5 === void 0 ? void 0 : _internalRef$current5.focus();
9140
9154
  },
9155
+ // tab index is important, it lets the element show as a relatedTarget on event handlers
9141
9156
  tabIndex: -1
9142
- }, settingsContent) : null);
9157
+ }, settingsContent));
9143
9158
  }
9144
9159
  return input;
9145
9160
  });
@@ -16184,7 +16199,7 @@ function DisplayCell(props) {
16184
16199
  index,
16185
16200
  tableRef
16186
16201
  };
16187
- }, [row.original, props.children, value]);
16202
+ }, [row.original, props.children, value, tableMeta.columnFreezing.frozenColumnIndex]);
16188
16203
  const memoedHighlight = React__default.useMemo(() => {
16189
16204
  var _tableMeta$search$que;
16190
16205
  if (!tableMeta.search.isHighlightingEnabled || !columnMeta.enableSearch) {
@@ -16321,6 +16336,7 @@ const MemoedCell = /*#__PURE__*/React__default.memo(function MemoedCell(props) {
16321
16336
  const {
16322
16337
  actions,
16323
16338
  actionsLength,
16339
+ fontSize,
16324
16340
  isCurrentRow,
16325
16341
  isEditing,
16326
16342
  isResizingColumn,
@@ -16355,8 +16371,13 @@ const MemoedCell = /*#__PURE__*/React__default.memo(function MemoedCell(props) {
16355
16371
  const visibleActions = actions.map(action => action(row.original)).filter(action => !!action);
16356
16372
  const actionsOnRow = visibleActions.length === actionsLength ? visibleActions : visibleActions.slice(0, actionsLength - 1);
16357
16373
  const actionsInMenu = visibleActions.slice(visibleActions.length === actionsLength ? actionsLength : actionsLength - 1);
16374
+ const className = cn('-mb-2 flex justify-end pl-2 text-right', {
16375
+ // Adjust negative margin on row actions cell to ensure that the cell aligns vertically.
16376
+ '-mt-2': fontSize === 'small',
16377
+ '-mt-1.5': fontSize !== 'small'
16378
+ });
16358
16379
  content = /*#__PURE__*/React__default.createElement("span", {
16359
- className: "-mb-2 -mt-1.5 flex justify-end pl-2 text-right",
16380
+ className: className,
16360
16381
  ref: ref
16361
16382
  }, actionsOnRow.map((button, index) => {
16362
16383
  var _ref, _button$props$tooltip;
@@ -16392,6 +16413,7 @@ function Cell$1(context) {
16392
16413
  return /*#__PURE__*/React__default.createElement(MemoedCell, Object.assign({}, context, {
16393
16414
  actions: tableMeta.rowActions.actionsForRow,
16394
16415
  actionsLength: tableMeta.rowActions.actionsForRowLength,
16416
+ fontSize: tableMeta.fontSize.size,
16395
16417
  isCurrentRow: tableMeta.currentRow.currentRowIndex === rowIndex,
16396
16418
  isEditing: tableMeta.editing.isEditing,
16397
16419
  isResizingColumn: !!context.table.getState().columnSizingInfo.isResizingColumn,
@@ -16773,18 +16795,20 @@ function useSettingsStateListener$1(table, onChangeSettings) {
16773
16795
  React__default.useEffect(() => {
16774
16796
  let handler;
16775
16797
  if (typeof onChangeSettings === 'function') {
16776
- handler = setTimeout(() => onChangeSettings({
16777
- // adding a new setting? you need to add it to the print settings in PrintButton.tsx!
16778
- columnFreezingIndex: meta.columnFreezing.frozenColumnIndex,
16779
- columnOrder: state.columnOrder,
16780
- columnSizing: state.columnSizing,
16781
- columnVisibility: state.columnVisibility,
16782
- excludeUnmatchedRecordsInSearch: meta.search.excludeUnmatchedResults,
16783
- fontSize: meta.fontSize.size,
16784
- rowHeight: meta.rowHeight.height,
16785
- showWarningWhenPrintingLargeDataset: meta.printing.printWarningDialogVisibility,
16786
- sorting: state.sorting
16787
- }), 250);
16798
+ handler = setTimeout(() => {
16799
+ onChangeSettings({
16800
+ // adding a new setting? you need to add it to the print settings in PrintButton.tsx!
16801
+ columnFreezingIndex: meta.columnFreezing.frozenColumnIndex,
16802
+ columnOrder: meta.columnOrdering.isEnabled ? state.columnOrder : undefined,
16803
+ columnSizing: table.options.enableColumnResizing ? state.columnSizing : undefined,
16804
+ columnVisibility: table.options.enableHiding ? state.columnVisibility : undefined,
16805
+ excludeUnmatchedRecordsInSearch: meta.search.excludeUnmatchedResults,
16806
+ fontSize: meta.fontSize.isEnabled ? meta.fontSize.size : undefined,
16807
+ rowHeight: meta.rowHeight.isEnabled ? meta.rowHeight.height : undefined,
16808
+ showWarningWhenPrintingLargeDataset: meta.printing.printWarningDialogVisibility,
16809
+ sorting: state.sorting
16810
+ });
16811
+ }, 250);
16788
16812
  }
16789
16813
  return () => clearTimeout(handler);
16790
16814
  }, [meta.columnFreezing.frozenColumnIndex, state.columnOrder, state.columnSizing, state.columnVisibility, meta.search.excludeUnmatchedResults, meta.fontSize.size, meta.rowHeight.height, meta.printing.printWarningDialogVisibility, state.sorting]);
@@ -17558,6 +17582,10 @@ const Textarea = /*#__PURE__*/React.forwardRef(function Textarea(props, ref) {
17558
17582
  // if it has scroll height then the browser reverts to native scrolling behaviour only
17559
17583
  // so we manually override it to ensure _our_ desired behaviour remains intact
17560
17584
  const handleKeyDown = event => {
17585
+ // prevent any external keyboard shortcuts from executing while typing single characters in textarea
17586
+ if (event.key.length === 1) {
17587
+ event.stopPropagation();
17588
+ }
17561
17589
  if (event.key === 'Home' || event.key === 'End') {
17562
17590
  event.preventDefault();
17563
17591
  const position = event.key === 'End' ? event.currentTarget.value.length : 0;
@@ -17576,7 +17604,7 @@ const Textarea = /*#__PURE__*/React.forwardRef(function Textarea(props, ref) {
17576
17604
  }));
17577
17605
  });
17578
17606
 
17579
- const TextAreaControl = /*#__PURE__*/React__default.forwardRef(function TextAreaControl(props, externalRef) {
17607
+ const TextareaControl = /*#__PURE__*/React__default.forwardRef(function TextareaControl(props, externalRef) {
17580
17608
  const {
17581
17609
  onKeyDown: handleKeyDown,
17582
17610
  onChange: handleChange,
@@ -17794,7 +17822,7 @@ const EditingControl = /*#__PURE__*/React__default.forwardRef(function Control(p
17794
17822
  ref: refCallback
17795
17823
  }));
17796
17824
  } else if (controlRenderer === 'textarea') {
17797
- return /*#__PURE__*/React__default.createElement(TextAreaControl, Object.assign({}, props, {
17825
+ return /*#__PURE__*/React__default.createElement(TextareaControl, Object.assign({}, props, {
17798
17826
  isCellInDetailMode: isCellInDetailMode,
17799
17827
  onKeyDown: handleInputKeyDown,
17800
17828
  ref: refCallback
@@ -17906,7 +17934,7 @@ const MemoedEditingCell = /*#__PURE__*/React__default.memo(function MemoedEditin
17906
17934
  return removeMoveReason;
17907
17935
  }, [value]);
17908
17936
  const controlRenderer = (_column$columnDef$met = column.columnDef.meta) === null || _column$columnDef$met === void 0 ? void 0 : _column$columnDef$met.control;
17909
- const className = cn('!px-2 py-[var(--table3-row-padding)]', {
17937
+ const className = cn('!px-[0.4375rem] py-[calc(var(--table3-row-padding)_-_0.06rem)]', {
17910
17938
  relative: (isCurrentRow || isHovered) && controlRenderer === 'textarea',
17911
17939
  // Need to set higher z-index, so that the current row textarea (in expanded state) overlaps rows below
17912
17940
  'z-10': isCurrentRow,
@@ -17926,6 +17954,7 @@ const MemoedEditingCell = /*#__PURE__*/React__default.memo(function MemoedEditin
17926
17954
  validationErrors: []
17927
17955
  }), /*#__PURE__*/React__default.createElement("div", {
17928
17956
  className: className,
17957
+ "data-align": columnMeta.align,
17929
17958
  "data-column-index": index,
17930
17959
  role: "cell",
17931
17960
  ref: cellRef
@@ -19158,7 +19187,13 @@ function RowHeight(props) {
19158
19187
  texts
19159
19188
  } = useLocalization();
19160
19189
  const meta = props.table.options.meta;
19161
- const handleChange = value => meta.rowHeight.setHeight(value);
19190
+ const handleChange = value => {
19191
+ const height = value;
19192
+ meta.rowHeight.setHeight(height);
19193
+ if (height === 'short' && meta.fontSize.size === 'large') {
19194
+ meta.fontSize.setSize('medium');
19195
+ }
19196
+ };
19162
19197
  return /*#__PURE__*/React__default.createElement(Menu$1.SubMenu, null, /*#__PURE__*/React__default.createElement(Menu$1.RadioGroup, {
19163
19198
  onChange: handleChange,
19164
19199
  value: meta.rowHeight.height
@@ -19945,7 +19980,9 @@ const PRINT_STYLES = `
19945
19980
 
19946
19981
  @media print {
19947
19982
  html, body, #root {
19948
- overflow: auto !important;
19983
+ // hides horizontal scrollbar
19984
+ overflow-x: none !important;
19985
+ overflow-y: auto !important;
19949
19986
  height: auto !important;
19950
19987
  width: auto !important;
19951
19988
  }
@@ -20379,7 +20416,7 @@ function Toolbar(props) {
20379
20416
  }
20380
20417
  const tableMeta = table.options.meta;
20381
20418
  return /*#__PURE__*/React__default.createElement("div", {
20382
- className: "mb-4 flex flex-shrink flex-grow-0 gap-2",
20419
+ className: "mb-4 flex flex-shrink flex-grow-0 flex-wrap gap-2",
20383
20420
  "data-taco": "table3-toolbar"
20384
20421
  }, left, /*#__PURE__*/React__default.createElement(Group, {
20385
20422
  className: "ml-auto flex-shrink-0 print:hidden"
@@ -20691,11 +20728,6 @@ const Table$1 = /*#__PURE__*/fixedForwardRef(function Table3(props, ref) {
20691
20728
  const bodyRef = React__default.useRef(null);
20692
20729
  React__default.useEffect(() => {
20693
20730
  const handleKeyDown = event => {
20694
- var _bodyRef$current;
20695
- // prevent global shortcuts activating while active in other elements, like inputs or buttons
20696
- if (isEventTriggeredOnInteractiveElement(event.target) && !(bodyRef !== null && bodyRef !== void 0 && (_bodyRef$current = bodyRef.current) !== null && _bodyRef$current !== void 0 && _bodyRef$current.contains(event.target))) {
20697
- return;
20698
- }
20699
20731
  tableMeta.hoverState.handleKeyDown(event);
20700
20732
  tableMeta.currentRow.handleKeyDown(event, table.getRowModel().rows.length, scrollToIndex);
20701
20733
  tableMeta.rowClick.handleKeyDown(event, table);