@economic/taco 2.2.2 → 2.2.4

Sign up to get free protection for your applications and to get access to all the features.
Files changed (52) hide show
  1. package/dist/components/Table3/Table3.d.ts +1 -1
  2. package/dist/components/Table3/components/columns/internal/Actions.d.ts +1 -2
  3. package/dist/components/Table3/components/rows/Row.d.ts +1 -0
  4. package/dist/components/Table3/hooks/features/useRowActions.d.ts +5 -0
  5. package/dist/components/Table3/hooks/useTable.d.ts +2 -0
  6. package/dist/components/Table3/hooks/useTableDataLoader.d.ts +1 -2
  7. package/dist/components/Table3/types.d.ts +0 -2
  8. package/dist/esm/packages/taco/src/components/Header/components/MenuButton.js +1 -1
  9. package/dist/esm/packages/taco/src/components/Header/components/MenuButton.js.map +1 -1
  10. package/dist/esm/packages/taco/src/components/SearchInput2/SearchInput2.js +3 -1
  11. package/dist/esm/packages/taco/src/components/SearchInput2/SearchInput2.js.map +1 -1
  12. package/dist/esm/packages/taco/src/components/Table3/Table3.js.map +1 -1
  13. package/dist/esm/packages/taco/src/components/Table3/components/columns/cell/DisplayCell.js +2 -2
  14. package/dist/esm/packages/taco/src/components/Table3/components/columns/cell/DisplayCell.js.map +1 -1
  15. package/dist/esm/packages/taco/src/components/Table3/components/columns/header/Header.js +5 -0
  16. package/dist/esm/packages/taco/src/components/Table3/components/columns/header/Header.js.map +1 -1
  17. package/dist/esm/packages/taco/src/components/Table3/components/columns/internal/Actions.js +24 -18
  18. package/dist/esm/packages/taco/src/components/Table3/components/columns/internal/Actions.js.map +1 -1
  19. package/dist/esm/packages/taco/src/components/Table3/components/columns/internal/Drag.js +2 -2
  20. package/dist/esm/packages/taco/src/components/Table3/components/columns/internal/Drag.js.map +1 -1
  21. package/dist/esm/packages/taco/src/components/Table3/components/columns/internal/Expansion.js +2 -1
  22. package/dist/esm/packages/taco/src/components/Table3/components/columns/internal/Expansion.js.map +1 -1
  23. package/dist/esm/packages/taco/src/components/Table3/components/columns/internal/Selection.js +2 -2
  24. package/dist/esm/packages/taco/src/components/Table3/components/columns/internal/Selection.js.map +1 -1
  25. package/dist/esm/packages/taco/src/components/Table3/components/rows/Row.js +11 -2
  26. package/dist/esm/packages/taco/src/components/Table3/components/rows/Row.js.map +1 -1
  27. package/dist/esm/packages/taco/src/components/Table3/components/toolbar/Search.js +32 -20
  28. package/dist/esm/packages/taco/src/components/Table3/components/toolbar/Search.js.map +1 -1
  29. package/dist/esm/packages/taco/src/components/Table3/hooks/features/useRowActions.js +10 -0
  30. package/dist/esm/packages/taco/src/components/Table3/hooks/features/useRowActions.js.map +1 -0
  31. package/dist/esm/packages/taco/src/components/Table3/hooks/listeners/useSettingsStateListener.js +1 -1
  32. package/dist/esm/packages/taco/src/components/Table3/hooks/listeners/useSettingsStateListener.js.map +1 -1
  33. package/dist/esm/packages/taco/src/components/Table3/hooks/useConvertChildrenToColumns.js +1 -1
  34. package/dist/esm/packages/taco/src/components/Table3/hooks/useConvertChildrenToColumns.js.map +1 -1
  35. package/dist/esm/packages/taco/src/components/Table3/hooks/useCssGrid.js +2 -3
  36. package/dist/esm/packages/taco/src/components/Table3/hooks/useCssGrid.js.map +1 -1
  37. package/dist/esm/packages/taco/src/components/Table3/hooks/useTable.js +10 -9
  38. package/dist/esm/packages/taco/src/components/Table3/hooks/useTable.js.map +1 -1
  39. package/dist/esm/packages/taco/src/components/Table3/hooks/useTableDataLoader.js +0 -8
  40. package/dist/esm/packages/taco/src/components/Table3/hooks/useTableDataLoader.js.map +1 -1
  41. package/dist/esm/packages/taco/src/components/Table3/strategies/virtualised.js +4 -0
  42. package/dist/esm/packages/taco/src/components/Table3/strategies/virtualised.js.map +1 -1
  43. package/dist/esm/packages/taco/src/components/Table3/types.js.map +1 -1
  44. package/dist/taco.cjs.development.js +108 -115
  45. package/dist/taco.cjs.development.js.map +1 -1
  46. package/dist/taco.cjs.production.min.js +1 -1
  47. package/dist/taco.cjs.production.min.js.map +1 -1
  48. package/package.json +2 -2
  49. package/types.json +5430 -5460
  50. package/dist/components/Table3/hooks/listeners/useSearchStateListener.d.ts +0 -3
  51. package/dist/esm/packages/taco/src/components/Table3/hooks/listeners/useSearchStateListener.js +0 -51
  52. package/dist/esm/packages/taco/src/components/Table3/hooks/listeners/useSearchStateListener.js.map +0 -1
@@ -10,4 +10,4 @@ declare type Table3WithStatics = (<TType = unknown>(props: Table3Props<TType> &
10
10
  export declare const Table3: Table3WithStatics;
11
11
  export { useTable3DataLoader } from './hooks/useTableDataLoader';
12
12
  export type { useTable3DataFetcher, useTable3DataOptions, useTable3DataFetcherValues as useTableDataValues, } from './hooks/useTableDataLoader';
13
- export type { Table3Ref, Table3Props, Table3Preset, Table3Settings, Table3SettingsAdapter, Table3RowHeight, Table3FilterComparator, Table3FilterHandler, Table3SearchHandler, Table3LoadPageHandler, Table3LoadAllHandler, Table3RowGotoHandler, Table3SortHandler, Table3Shortcuts, Table3ShortcutHandlerFn, Table3ShortcutHandlerObject, Table3FontSize, Table3SortDirection, Table3SortFn, Table3RowActionRenderer, Table3RowSelectionHandler, Table3RowExpansionRenderer, Table3RowDropHandler, Table3RowDragHandler, Table3RowClickHandler, Table3ColumnProps, Table3ColumnAlignment, Table3ColumnDataType, Table3ColumnHeaderMenu, Table3ColumnClassNameHandler, Table3ColumnFooterRenderer, Table3ColumnRenderer, Table3ColumnControlRenderer, Table3ColumnControlProps, } from './types';
13
+ export type { Table3Ref, Table3Props, Table3Preset, Table3Settings, Table3SettingsAdapter, Table3RowHeight, Table3FilterComparator, Table3FilterHandler, Table3LoadPageHandler, Table3LoadAllHandler, Table3RowGotoHandler, Table3SortHandler, Table3Shortcuts, Table3ShortcutHandlerFn, Table3ShortcutHandlerObject, Table3FontSize, Table3SortDirection, Table3SortFn, Table3RowActionRenderer, Table3RowSelectionHandler, Table3RowExpansionRenderer, Table3RowDropHandler, Table3RowDragHandler, Table3RowClickHandler, Table3ColumnProps, Table3ColumnAlignment, Table3ColumnDataType, Table3ColumnHeaderMenu, Table3ColumnClassNameHandler, Table3ColumnFooterRenderer, Table3ColumnRenderer, Table3ColumnControlRenderer, Table3ColumnControlProps, } from './types';
@@ -1,4 +1,3 @@
1
1
  import { DisplayColumnDef } from '@tanstack/react-table';
2
- import { Table3RowActionRenderer } from '../../../types';
3
2
  export declare const COLUMN_ID = "__actions";
4
- export declare function createRowActionsColumn<TType = unknown>(actionsForRow: Table3RowActionRenderer<TType>[], actionsForRowLength?: number): DisplayColumnDef<TType, unknown>;
3
+ export declare function createRowActionsColumn<TType = unknown>(): DisplayColumnDef<TType, unknown>;
@@ -4,6 +4,7 @@ import { Table3RowClickHandler, Table3RowDropHandler } from '../../types';
4
4
  declare type RowProps<TType = unknown> = Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'onDrop'> & {
5
5
  index: number;
6
6
  isLastRow: boolean;
7
+ measureRef: (el: HTMLElement | null) => void;
7
8
  onClick?: Table3RowClickHandler<TType>;
8
9
  onDrop?: Table3RowDropHandler<TType>;
9
10
  row: RTRow<TType>;
@@ -0,0 +1,5 @@
1
+ import { Table3RowActionRenderer } from '../../types';
2
+ export declare function useRowActions<TType = unknown>(actionsForRow?: Table3RowActionRenderer<TType>[], actionsForRowLength?: number): {
3
+ actionsForRow: Table3RowActionRenderer<TType>[] | undefined;
4
+ actionsForRowLength: number;
5
+ };
@@ -15,6 +15,7 @@ import { useEditing } from './features/useEditing';
15
15
  import { usePrinting } from './features/usePrinting';
16
16
  import { useRowGoto } from './features/useRowGoto';
17
17
  import { useSearch } from './features/useSearch';
18
+ import { useRowActions } from './features/useRowActions';
18
19
  declare module '@tanstack/table-core' {
19
20
  interface TableMeta<TData extends RowData> {
20
21
  columnFreezing: ReturnType<typeof useColumnFreezing>;
@@ -25,6 +26,7 @@ declare module '@tanstack/table-core' {
25
26
  hoverState: ReturnType<typeof usePauseHoverState>;
26
27
  isUsingServer: boolean;
27
28
  printing: ReturnType<typeof usePrinting>;
29
+ rowActions: ReturnType<typeof useRowActions>;
28
30
  rowClick: ReturnType<typeof useRowClick>;
29
31
  rowDrag: ReturnType<typeof useRowDrag>;
30
32
  rowDrop: ReturnType<typeof useRowDrop>;
@@ -1,4 +1,4 @@
1
- import { ColumnFilter, Table3ColumnSort, Table3FilterHandler, Table3LoadAllHandler, Table3LoadPageHandler, Table3SearchHandler, Table3SortHandler } from '../types';
1
+ import { ColumnFilter, Table3ColumnSort, Table3FilterHandler, Table3LoadAllHandler, Table3LoadPageHandler, Table3SortHandler } from '../types';
2
2
  export declare type useTable3DataFetcher<TType = unknown> = (pageIndex: number, pageSize: number, sorting: Table3ColumnSort[], filters: ColumnFilter[], search: string | undefined) => Promise<{
3
3
  data: TType[];
4
4
  length: number;
@@ -16,7 +16,6 @@ export declare type useTable3DataFetcherValues<TType = unknown> = {
16
16
  loadAll: Table3LoadAllHandler;
17
17
  loadPage: Table3LoadPageHandler;
18
18
  onFilter: Table3FilterHandler;
19
- onSearch: Table3SearchHandler;
20
19
  onSort: Table3SortHandler;
21
20
  pageSize: number;
22
21
  };
@@ -97,7 +97,6 @@ export declare type Table3Filter = {
97
97
  };
98
98
  export declare type ColumnFilter = RTColumnFilter;
99
99
  export declare type Table3FilterHandler = (filters: ColumnFilter[]) => void;
100
- export declare type Table3SearchHandler = (query: string | undefined) => Promise<void>;
101
100
  export declare type Table3LoadPageHandler = (pageIndex: number, sorting: Table3ColumnSort[], filters: ColumnFilter[], search: string | undefined) => Promise<void>;
102
101
  export declare type Table3LoadAllHandler = (sorting: Table3ColumnSort[], filters: ColumnFilter[], search: string | undefined) => Promise<void>;
103
102
  export declare type Table3RowGotoHandler = (column: string, query: string, sorting: Table3ColumnSort[], filters: ColumnFilter[], search: string | undefined) => Promise<number>;
@@ -156,7 +155,6 @@ export declare type Table3CommonProps<TType = unknown> = Partial<Table3Options>
156
155
  onRowSelect?: Table3RowSelectionHandler<TType>;
157
156
  onFilter?: Table3FilterHandler;
158
157
  onSave?: Table3SaveHandler<TType>;
159
- onSearch?: Table3SearchHandler;
160
158
  onSort?: Table3SortHandler;
161
159
  preset?: Table3Preset;
162
160
  shortcuts?: Table3Shortcuts<TType>;
@@ -4,7 +4,7 @@ import { IconButton } from '../../IconButton/IconButton.js';
4
4
  import { getButtonClasses } from './Button.js';
5
5
 
6
6
  const MenuButton = /*#__PURE__*/React__default.forwardRef(function MenuButton(props, ref) {
7
- const className = cn(getButtonClasses(false), 'mr-1 !bg-transparent hover:!bg-white/[.08] focus:!bg-white/[.08]] lg:hidden z-[2]');
7
+ const className = cn(getButtonClasses(false), 'mr-1 !bg-transparent hover:!bg-white/[.08] focus:!bg-white/[.08]] lg:hidden z-[2] !text-white');
8
8
  return /*#__PURE__*/React__default.createElement(IconButton, Object.assign({}, props, {
9
9
  className: className,
10
10
  "data-taco": "header-toggle-sidebar",
@@ -1 +1 @@
1
- {"version":3,"file":"MenuButton.js","sources":["../../../../../../../../src/components/Header/components/MenuButton.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { IconButton } from '../../IconButton/IconButton';\nimport { getButtonClasses } from './Button';\n\nexport type MenuButtonProps = {\n onClick: () => void;\n};\n\nexport const MenuButton = React.forwardRef<HTMLButtonElement, MenuButtonProps>(function MenuButton(props, ref) {\n const className = cn(\n getButtonClasses(false),\n 'mr-1 !bg-transparent hover:!bg-white/[.08] focus:!bg-white/[.08]] lg:hidden z-[2]'\n );\n\n return <IconButton {...props} className={className} data-taco=\"header-toggle-sidebar\" icon=\"menu\" ref={ref} />;\n});\n"],"names":["MenuButton","React","forwardRef","props","ref","className","cn","getButtonClasses","IconButton","icon"],"mappings":";;;;;MASaA,UAAU,gBAAGC,cAAK,CAACC,UAAU,CAAqC,SAASF,UAAU,CAACG,KAAK,EAAEC,GAAG;EACzG,MAAMC,SAAS,GAAGC,EAAE,CAChBC,gBAAgB,CAAC,KAAK,CAAC,EACvB,mFAAmF,CACtF;EAED,oBAAON,6BAACO,UAAU,oBAAKL,KAAK;IAAEE,SAAS,EAAEA,SAAS;iBAAY,uBAAuB;IAACI,IAAI,EAAC,MAAM;IAACL,GAAG,EAAEA;KAAO;AAClH,CAAC;;;;"}
1
+ {"version":3,"file":"MenuButton.js","sources":["../../../../../../../../src/components/Header/components/MenuButton.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { IconButton } from '../../IconButton/IconButton';\nimport { getButtonClasses } from './Button';\n\nexport type MenuButtonProps = {\n onClick: () => void;\n};\n\nexport const MenuButton = React.forwardRef<HTMLButtonElement, MenuButtonProps>(function MenuButton(props, ref) {\n const className = cn(\n getButtonClasses(false),\n 'mr-1 !bg-transparent hover:!bg-white/[.08] focus:!bg-white/[.08]] lg:hidden z-[2] !text-white'\n );\n\n return <IconButton {...props} className={className} data-taco=\"header-toggle-sidebar\" icon=\"menu\" ref={ref} />;\n});\n"],"names":["MenuButton","React","forwardRef","props","ref","className","cn","getButtonClasses","IconButton","icon"],"mappings":";;;;;MASaA,UAAU,gBAAGC,cAAK,CAACC,UAAU,CAAqC,SAASF,UAAU,CAACG,KAAK,EAAEC,GAAG;EACzG,MAAMC,SAAS,GAAGC,EAAE,CAChBC,gBAAgB,CAAC,KAAK,CAAC,EACvB,+FAA+F,CAClG;EAED,oBAAON,6BAACO,UAAU,oBAAKL,KAAK;IAAEE,SAAS,EAAEA,SAAS;iBAAY,uBAAuB;IAACI,IAAI,EAAC,MAAM;IAACL,GAAG,EAAEA;KAAO;AAClH,CAAC;;;;"}
@@ -43,7 +43,9 @@ const SearchInput2 = /*#__PURE__*/React__default.forwardRef(function SearchInput
43
43
  const handleBlur = event => {
44
44
  var _settingsRef$current, _attributes$onBlur;
45
45
  // trigger searches when leaving the field
46
- handleSubmit();
46
+ if (!isSynced) {
47
+ handleSubmit();
48
+ }
47
49
  if (settingsRef.current && (settingsRef.current === event.relatedTarget || (_settingsRef$current = settingsRef.current) !== null && _settingsRef$current !== void 0 && _settingsRef$current.contains(event.relatedTarget))) {
48
50
  return;
49
51
  }
@@ -1 +1 @@
1
- {"version":3,"file":"SearchInput2.js","sources":["../../../../../../../src/components/SearchInput2/SearchInput2.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { useGlobalKeyDown } from '../../hooks/useGlobalKeyDown';\nimport { useLocalization } from '../Provider/Localization';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Input } from '../Input/Input';\nimport { Shortcut } from '../Shortcut/Shortcut';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { KeyDownHandlerOptions } from '../../utils/keyboard';\n\ninterface CommonSearchInput2Props\n extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'defaultValue' | 'onChange' | 'value'> {\n onSearch: (value: string) => void;\n settingsContent?: JSX.Element;\n shortcut?: string | KeyDownHandlerOptions;\n value?: string;\n}\n\ninterface BasicSearchInput2Props extends CommonSearchInput2Props {\n findCurrent?: never;\n findTotal?: never;\n onClickFindNext?: never;\n onClickFindPrevious?: never;\n}\n\ninterface ComplexSearchInput2Props extends CommonSearchInput2Props {\n findCurrent: number | null;\n findTotal: number | null;\n onClickFindNext: () => void;\n onClickFindPrevious: () => void;\n}\n\nexport type SearchInput2Props = BasicSearchInput2Props | ComplexSearchInput2Props;\n\nexport const SearchInput2 = React.forwardRef(function SearchInput2(props: SearchInput2Props, ref: React.Ref<HTMLInputElement>) {\n const {\n findCurrent,\n findTotal,\n onClickFindNext: handleClickFindNext,\n onClickFindPrevious: handleClickFindPrevious,\n onSearch: handleSearch,\n settingsContent,\n shortcut,\n value,\n ...attributes\n } = props;\n const internalRef = useMergedRef<HTMLInputElement>(ref);\n const settingsRef = React.useRef<HTMLDivElement>(null);\n const [internalValue, setInternalValue] = React.useState(value ?? '');\n const [focused, setFocused] = React.useState(false);\n const { texts } = useLocalization();\n const isActive = value?.length;\n const isSynced = internalValue === value;\n const hasFind = handleClickFindNext && handleClickFindPrevious && findCurrent !== undefined && findTotal !== undefined;\n\n useGlobalKeyDown(shortcut, (event: KeyboardEvent) => {\n if (document.activeElement !== internalRef.current) {\n event.preventDefault();\n internalRef.current?.focus();\n }\n });\n\n const handleSubmit = () => {\n handleSearch(internalValue);\n };\n\n const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n // trigger searches when leaving the field\n handleSubmit();\n\n if (\n settingsRef.current &&\n (settingsRef.current === event.relatedTarget || settingsRef.current?.contains(event.relatedTarget))\n ) {\n return;\n }\n\n setFocused(false);\n attributes.onBlur?.(event);\n };\n\n const handleChange = event => {\n setInternalValue(event.target.value);\n\n if (!event.target.value) {\n handleClear();\n }\n };\n\n const handleClear = () => {\n requestAnimationFrame(() => internalRef.current?.focus());\n setInternalValue('');\n handleSearch('');\n };\n\n const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n attributes.onFocus?.(event);\n setFocused(true);\n };\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {\n props.onKeyDown?.(event);\n\n if (event.isDefaultPrevented()) {\n return;\n }\n\n if (event.key === 'Enter') {\n event.preventDefault();\n\n if (hasFind && isActive && isSynced) {\n if (event.shiftKey) {\n handleClickFindPrevious?.();\n } else {\n handleClickFindNext?.();\n }\n } else {\n handleSearch(internalValue);\n }\n return;\n }\n\n if (event.key === 'Escape') {\n handleClear();\n return;\n }\n };\n\n let postfix;\n\n if (!attributes.disabled && !attributes.readOnly && (internalValue || focused)) {\n if (internalValue) {\n postfix = (\n <IconButton\n aria-label={texts.searchInput.clear}\n className=\"scale-75 !bg-transparent hover:!bg-black/[0.08] [&>svg]:scale-125\"\n icon=\"close\"\n onMouseDown={handleClear}\n tabIndex={-1}\n tooltip={\n focused ? (\n <>\n {texts.searchInput.clear} <Shortcut keys=\"Escape\" />\n </>\n ) : (\n texts.searchInput.clear\n )\n }\n />\n );\n }\n\n if (hasFind && isActive) {\n postfix = (\n <>\n <span className=\"text-grey-700 flex h-4 items-center border-r border-black/[0.25] pr-2\">\n {findCurrent ?? 0}/{findTotal ?? 0}\n </span>\n {findCurrent ? (\n <>\n <IconButton\n aria-label={texts.searchInput.findPrevious}\n className=\"scale-75 !bg-transparent hover:!bg-black/[0.08] [&>svg]:scale-125\"\n icon=\"chevron-up\"\n onMouseDown={handleClickFindPrevious}\n tabIndex={-1}\n tooltip={\n focused ? (\n <>\n {texts.searchInput.findPrevious} <Shortcut keys={{ shift: true, key: 'Enter' }} />\n </>\n ) : (\n texts.searchInput.findPrevious\n )\n }\n />\n <IconButton\n aria-label={texts.searchInput.findNext}\n className=\"scale-75 !bg-transparent hover:!bg-black/[0.08] [&>svg]:scale-125\"\n icon=\"chevron-down\"\n onMouseDown={handleClickFindNext}\n tabIndex={-1}\n tooltip={\n focused ? (\n <>\n {texts.searchInput.findNext} <Shortcut keys=\"Enter\" />\n </>\n ) : (\n texts.searchInput.findNext\n )\n }\n />\n </>\n ) : null}\n {postfix}\n </>\n );\n }\n } else if (shortcut && !focused && !internalValue) {\n postfix = <Shortcut keys={shortcut} onClickCapture={() => internalRef.current?.focus()} />;\n }\n\n const className = cn(\n 'peer !pl-7',\n hasFind\n ? {\n '!w-48': !internalValue && !focused,\n '!w-72': internalValue || focused,\n }\n : '!w-48',\n {\n '!wcag-blue-100': isActive,\n },\n props.className\n );\n\n const input = (\n <Input\n {...attributes}\n aria-label={attributes['aria-label'] ?? texts.searchInput.placeholder}\n className={className}\n data-taco=\"search-input2\"\n onBlur={handleBlur}\n onChange={handleChange}\n onFocus={handleFocus}\n onKeyDown={handleKeyDown}\n placeholder={attributes.placeholder ?? texts.searchInput.placeholder}\n prefix={\n <IconButton\n aria-label={texts.searchInput.button}\n className=\"scale-75 !bg-transparent hover:!bg-black/[0.08] [&>svg]:scale-125\"\n disabled={attributes.disabled || attributes.readOnly}\n icon=\"search\"\n onMouseDown={handleSubmit}\n tabIndex={-1}\n tooltip={\n focused && !isSynced ? (\n <>\n {texts.searchInput.button} <Shortcut keys=\"Enter\" />\n </>\n ) : (\n texts.searchInput.button\n )\n }\n />\n }\n postfix={postfix}\n ref={internalRef}\n value={internalValue}\n />\n );\n\n if (settingsContent) {\n const handleSettingsBlur = event => {\n if (event.currentTarget.contains(event.relatedTarget)) {\n return;\n }\n setFocused(false);\n };\n\n return (\n <div\n className={cn('relative', { \"[&_[data-taco='input-container']]:z-20\": focused })}\n onBlur={handleSettingsBlur}\n ref={settingsRef}>\n {input}\n {focused ? (\n <div\n 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\"\n onClickCapture={() => internalRef.current?.focus()}\n tabIndex={-1}>\n {settingsContent}\n </div>\n ) : null}\n </div>\n );\n }\n\n return input;\n});\n"],"names":["SearchInput2","React","forwardRef","props","ref","findCurrent","findTotal","onClickFindNext","handleClickFindNext","onClickFindPrevious","handleClickFindPrevious","onSearch","handleSearch","settingsContent","shortcut","value","attributes","internalRef","useMergedRef","settingsRef","useRef","internalValue","setInternalValue","useState","focused","setFocused","texts","useLocalization","isActive","length","isSynced","hasFind","undefined","useGlobalKeyDown","event","document","activeElement","current","preventDefault","focus","handleSubmit","handleBlur","relatedTarget","contains","onBlur","handleChange","target","handleClear","requestAnimationFrame","handleFocus","onFocus","handleKeyDown","onKeyDown","isDefaultPrevented","key","shiftKey","postfix","disabled","readOnly","IconButton","searchInput","clear","className","icon","onMouseDown","tabIndex","tooltip","Shortcut","keys","findPrevious","shift","findNext","onClickCapture","cn","input","Input","placeholder","onChange","prefix","button","handleSettingsBlur","currentTarget"],"mappings":"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"}
1
+ {"version":3,"file":"SearchInput2.js","sources":["../../../../../../../src/components/SearchInput2/SearchInput2.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { useGlobalKeyDown } from '../../hooks/useGlobalKeyDown';\nimport { useLocalization } from '../Provider/Localization';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Input } from '../Input/Input';\nimport { Shortcut } from '../Shortcut/Shortcut';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { KeyDownHandlerOptions } from '../../utils/keyboard';\n\ninterface CommonSearchInput2Props\n extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'defaultValue' | 'onChange' | 'value'> {\n onSearch: (value: string) => void;\n settingsContent?: JSX.Element;\n shortcut?: string | KeyDownHandlerOptions;\n value?: string;\n}\n\ninterface BasicSearchInput2Props extends CommonSearchInput2Props {\n findCurrent?: never;\n findTotal?: never;\n onClickFindNext?: never;\n onClickFindPrevious?: never;\n}\n\ninterface ComplexSearchInput2Props extends CommonSearchInput2Props {\n findCurrent: number | null;\n findTotal: number | null;\n onClickFindNext: () => void;\n onClickFindPrevious: () => void;\n}\n\nexport type SearchInput2Props = BasicSearchInput2Props | ComplexSearchInput2Props;\n\nexport const SearchInput2 = React.forwardRef(function SearchInput2(props: SearchInput2Props, ref: React.Ref<HTMLInputElement>) {\n const {\n findCurrent,\n findTotal,\n onClickFindNext: handleClickFindNext,\n onClickFindPrevious: handleClickFindPrevious,\n onSearch: handleSearch,\n settingsContent,\n shortcut,\n value,\n ...attributes\n } = props;\n const internalRef = useMergedRef<HTMLInputElement>(ref);\n const settingsRef = React.useRef<HTMLDivElement>(null);\n const [internalValue, setInternalValue] = React.useState(value ?? '');\n const [focused, setFocused] = React.useState(false);\n const { texts } = useLocalization();\n const isActive = value?.length;\n const isSynced = internalValue === value;\n const hasFind = handleClickFindNext && handleClickFindPrevious && findCurrent !== undefined && findTotal !== undefined;\n\n useGlobalKeyDown(shortcut, (event: KeyboardEvent) => {\n if (document.activeElement !== internalRef.current) {\n event.preventDefault();\n internalRef.current?.focus();\n }\n });\n\n const handleSubmit = () => {\n handleSearch(internalValue);\n };\n\n const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n // trigger searches when leaving the field\n if (!isSynced) {\n handleSubmit();\n }\n\n if (\n settingsRef.current &&\n (settingsRef.current === event.relatedTarget || settingsRef.current?.contains(event.relatedTarget))\n ) {\n return;\n }\n\n setFocused(false);\n attributes.onBlur?.(event);\n };\n\n const handleChange = event => {\n setInternalValue(event.target.value);\n\n if (!event.target.value) {\n handleClear();\n }\n };\n\n const handleClear = () => {\n requestAnimationFrame(() => internalRef.current?.focus());\n setInternalValue('');\n handleSearch('');\n };\n\n const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n attributes.onFocus?.(event);\n setFocused(true);\n };\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {\n props.onKeyDown?.(event);\n\n if (event.isDefaultPrevented()) {\n return;\n }\n\n if (event.key === 'Enter') {\n event.preventDefault();\n\n if (hasFind && isActive && isSynced) {\n if (event.shiftKey) {\n handleClickFindPrevious?.();\n } else {\n handleClickFindNext?.();\n }\n } else {\n handleSearch(internalValue);\n }\n return;\n }\n\n if (event.key === 'Escape') {\n handleClear();\n return;\n }\n };\n\n let postfix;\n\n if (!attributes.disabled && !attributes.readOnly && (internalValue || focused)) {\n if (internalValue) {\n postfix = (\n <IconButton\n aria-label={texts.searchInput.clear}\n className=\"scale-75 !bg-transparent hover:!bg-black/[0.08] [&>svg]:scale-125\"\n icon=\"close\"\n onMouseDown={handleClear}\n tabIndex={-1}\n tooltip={\n focused ? (\n <>\n {texts.searchInput.clear} <Shortcut keys=\"Escape\" />\n </>\n ) : (\n texts.searchInput.clear\n )\n }\n />\n );\n }\n\n if (hasFind && isActive) {\n postfix = (\n <>\n <span className=\"text-grey-700 flex h-4 items-center border-r border-black/[0.25] pr-2\">\n {findCurrent ?? 0}/{findTotal ?? 0}\n </span>\n {findCurrent ? (\n <>\n <IconButton\n aria-label={texts.searchInput.findPrevious}\n className=\"scale-75 !bg-transparent hover:!bg-black/[0.08] [&>svg]:scale-125\"\n icon=\"chevron-up\"\n onMouseDown={handleClickFindPrevious}\n tabIndex={-1}\n tooltip={\n focused ? (\n <>\n {texts.searchInput.findPrevious} <Shortcut keys={{ shift: true, key: 'Enter' }} />\n </>\n ) : (\n texts.searchInput.findPrevious\n )\n }\n />\n <IconButton\n aria-label={texts.searchInput.findNext}\n className=\"scale-75 !bg-transparent hover:!bg-black/[0.08] [&>svg]:scale-125\"\n icon=\"chevron-down\"\n onMouseDown={handleClickFindNext}\n tabIndex={-1}\n tooltip={\n focused ? (\n <>\n {texts.searchInput.findNext} <Shortcut keys=\"Enter\" />\n </>\n ) : (\n texts.searchInput.findNext\n )\n }\n />\n </>\n ) : null}\n {postfix}\n </>\n );\n }\n } else if (shortcut && !focused && !internalValue) {\n postfix = <Shortcut keys={shortcut} onClickCapture={() => internalRef.current?.focus()} />;\n }\n\n const className = cn(\n 'peer !pl-7',\n hasFind\n ? {\n '!w-48': !internalValue && !focused,\n '!w-72': internalValue || focused,\n }\n : '!w-48',\n {\n '!wcag-blue-100': isActive,\n },\n props.className\n );\n\n const input = (\n <Input\n {...attributes}\n aria-label={attributes['aria-label'] ?? texts.searchInput.placeholder}\n className={className}\n data-taco=\"search-input2\"\n onBlur={handleBlur}\n onChange={handleChange}\n onFocus={handleFocus}\n onKeyDown={handleKeyDown}\n placeholder={attributes.placeholder ?? texts.searchInput.placeholder}\n prefix={\n <IconButton\n aria-label={texts.searchInput.button}\n className=\"scale-75 !bg-transparent hover:!bg-black/[0.08] [&>svg]:scale-125\"\n disabled={attributes.disabled || attributes.readOnly}\n icon=\"search\"\n onMouseDown={handleSubmit}\n tabIndex={-1}\n tooltip={\n focused && !isSynced ? (\n <>\n {texts.searchInput.button} <Shortcut keys=\"Enter\" />\n </>\n ) : (\n texts.searchInput.button\n )\n }\n />\n }\n postfix={postfix}\n ref={internalRef}\n value={internalValue}\n />\n );\n\n if (settingsContent) {\n const handleSettingsBlur = event => {\n if (event.currentTarget.contains(event.relatedTarget)) {\n return;\n }\n setFocused(false);\n };\n\n return (\n <div\n className={cn('relative', { \"[&_[data-taco='input-container']]:z-20\": focused })}\n onBlur={handleSettingsBlur}\n ref={settingsRef}>\n {input}\n {focused ? (\n <div\n 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\"\n onClickCapture={() => internalRef.current?.focus()}\n tabIndex={-1}>\n {settingsContent}\n </div>\n ) : null}\n </div>\n );\n }\n\n return input;\n});\n"],"names":["SearchInput2","React","forwardRef","props","ref","findCurrent","findTotal","onClickFindNext","handleClickFindNext","onClickFindPrevious","handleClickFindPrevious","onSearch","handleSearch","settingsContent","shortcut","value","attributes","internalRef","useMergedRef","settingsRef","useRef","internalValue","setInternalValue","useState","focused","setFocused","texts","useLocalization","isActive","length","isSynced","hasFind","undefined","useGlobalKeyDown","event","document","activeElement","current","preventDefault","focus","handleSubmit","handleBlur","relatedTarget","contains","onBlur","handleChange","target","handleClear","requestAnimationFrame","handleFocus","onFocus","handleKeyDown","onKeyDown","isDefaultPrevented","key","shiftKey","postfix","disabled","readOnly","IconButton","searchInput","clear","className","icon","onMouseDown","tabIndex","tooltip","Shortcut","keys","findPrevious","shift","findNext","onClickCapture","cn","input","Input","placeholder","onChange","prefix","button","handleSettingsBlur","currentTarget"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"Table3.js","sources":["../../../../../../../src/components/Table3/Table3.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { flexRender, TableMeta } from '@tanstack/react-table';\nimport { FocusScope } from '@react-aria/focus';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { useCssGrid } from './hooks/useCssGrid';\nimport { useTable } from './hooks/useTable';\nimport { useTableRenderStrategy } from './strategies';\nimport { Table3ColumnProps, Table3Props, Table3Ref } from './types';\nimport { Toolbar } from './components/toolbar/Toolbar';\nimport { useColumnFreezingStyle } from './hooks/features/useColumnFreezing';\nimport { useTableRefInstanceSetup } from './hooks/useTableRefInstanceSetup';\nimport { Summary } from './components/columns/footer/Summary';\nimport { useCssVars } from './hooks/useCssVars';\nimport './style.css';\nimport { isEventTriggeredOnInteractiveElement } from '../../utils/keyboard';\n\nfunction Column<TType = unknown>(_: Table3ColumnProps<TType>) {\n return null;\n}\n\ntype FixedForwardRef = <T, P = {}>(\n render: (props: P, ref: React.Ref<T>) => JSX.Element\n) => (props: P & React.RefAttributes<T>) => JSX.Element;\n\n// Cast the old forwardRef to the new one\nexport const fixedForwardRef = React.forwardRef as FixedForwardRef;\n\nconst Table = fixedForwardRef(function Table3<TType = unknown>(props: Table3Props<TType>, ref: React.Ref<Table3Ref>) {\n const { emptyState: EmptyState, toolbarLeft, toolbarRight } = props;\n const internalRef = useMergedRef<Table3Ref>(ref);\n\n const { table, length } = useTable<TType>(props);\n useTableRefInstanceSetup(table, internalRef);\n\n React.useEffect(() => {\n if (props.autoFocus) {\n internalRef.current?.focus();\n }\n }, []);\n\n const { renderBody, scrollToIndex } = useTableRenderStrategy<TType>(props, table, internalRef);\n const tableMeta = table.options.meta as TableMeta<TType>;\n const state = table.getState();\n\n const handleKeyDown = (event: React.KeyboardEvent) => {\n if (isEventTriggeredOnInteractiveElement(event.target)) {\n return;\n }\n\n tableMeta.hoverState.handleKeyDown(event);\n tableMeta.currentRow.handleKeyDown(event, table.getRowModel().rows.length, scrollToIndex);\n tableMeta.rowClick.handleKeyDown(event, table);\n tableMeta.rowSelection.handleKeyDown(event, table);\n tableMeta.editing.handleKeyDown(event, internalRef);\n };\n\n const handleBlur = (event: React.FocusEvent) => {\n tableMeta.editing.handleBlur(event);\n };\n\n const handleScroll = async (event: React.MouseEvent<HTMLDivElement>) => {\n tableMeta.columnFreezing.handleScroll(event);\n };\n\n const className = cn(\n 'border-grey-300 relative grid h-full w-full flex-grow overflow-auto rounded border bg-white scroll-mt-[41px]',\n 'focus:yt-focus focus-within:yt-focus',\n '[&[data-resizing=\"true\"]]:select-none',\n {\n 'text-xs': tableMeta.fontSize.size === 'small',\n 'text-sm': tableMeta.fontSize.size === 'medium',\n 'text-base': tableMeta.fontSize.size === 'large',\n }\n );\n\n const { style: cssGridStyle } = useCssGrid<TType>(table);\n const { style: cssVars } = useCssVars(tableMeta.rowHeight.height, tableMeta.fontSize.size);\n\n const style = {\n ...cssVars,\n ...cssGridStyle,\n // create a new stacking context so our internal z-indexes don't effect external components\n // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\n opacity: 0.999,\n };\n\n const columnFreezingStyle = useColumnFreezingStyle(props.id, table);\n const isServerLoadingAndNotReady = tableMeta.isUsingServer && props.length === undefined;\n\n return (\n <>\n {columnFreezingStyle ? <style data-taco=\"table3-column-freezing-styles\">{columnFreezingStyle}</style> : null}\n <Toolbar\n table={table}\n tableProps={props}\n total={length}\n left={toolbarLeft}\n right={toolbarRight}\n scrollToIndex={scrollToIndex}\n />\n <div\n className={className}\n id={props.id}\n data-font-size={tableMeta.fontSize.size}\n data-editing={tableMeta.editing.isEditing}\n data-horizontally-scrolled={tableMeta.columnFreezing.horizontallyScrolled}\n data-pause-hover={tableMeta?.hoverState.isPaused}\n data-resizing={!!state.columnSizingInfo.isResizingColumn}\n data-taco=\"table2\"\n onBlur={handleBlur}\n onKeyDown={handleKeyDown}\n onScroll={handleScroll}\n ref={internalRef}\n role=\"table\"\n style={style}\n tabIndex={0}>\n {isServerLoadingAndNotReady ? null : (\n <div className=\"group/header contents\" data-taco=\"table2-header\" role=\"rowgroup\">\n {table.getHeaderGroups().map(headerGroup => (\n <div className=\"contents\" key={headerGroup.id} role=\"row\">\n {headerGroup.headers.map(header => (\n <React.Fragment key={header.id}>\n {flexRender(header.column.columnDef.header, { ...header.getContext(), scrollToIndex })}\n </React.Fragment>\n ))}\n </div>\n ))}\n </div>\n )}\n {table.getRowModel().rows.length ? (\n <>\n <FocusScope>\n <div className=\"group/body contents\" data-taco=\"table2-body\" role=\"rowgroup\">\n {renderBody()}\n <span className=\"col-span-full h-16 print:hidden\" />\n </div>\n </FocusScope>\n <div className=\"group/footer contents\" data-taco=\"table2-footer\" role=\"rowgroup\">\n {table.getFooterGroups().map(footerGroup => (\n <div className=\"contents\" key={footerGroup.id} role=\"row\">\n {footerGroup.headers.map(footer => (\n <React.Fragment key={footer.id}>\n {flexRender(footer.column.columnDef.footer, footer.getContext())}\n </React.Fragment>\n ))}\n </div>\n ))}\n {length ? <Summary length={length} table={table} /> : null}\n </div>\n </>\n ) : (\n <div className=\"col-span-full min-h-[theme(spacing.8)]\">{EmptyState ? <EmptyState /> : null}</div>\n )}\n </div>\n </>\n );\n});\n\ntype Table3WithStatics = (<TType = unknown>(props: Table3Props<TType> & React.RefAttributes<Table3Ref>) => JSX.Element) & {\n Column: typeof Column;\n};\n\nexport const Table3 = fixedForwardRef(function Table3<TType = unknown>(props: Table3Props<TType>, ref: React.Ref<Table3Ref>) {\n // we force a remount (using key) when the child columns change because there are too many places to add children as an effect\n // this is cheaper from a complexity perspective, and probably performance wise as well\n const key = React.useMemo(() => String('tableKey_' + String(props.children)), [props.children]);\n return <Table<TType> {...props} key={key} ref={ref} />;\n}) as Table3WithStatics;\nTable3.Column = Column;\n\n// hooks\nexport { useTable3DataLoader } from './hooks/useTableDataLoader';\n\n// types\nexport type {\n useTable3DataFetcher,\n useTable3DataOptions,\n useTable3DataFetcherValues as useTableDataValues,\n} from './hooks/useTableDataLoader';\n\nexport type {\n Table3Ref,\n Table3Props,\n Table3Preset,\n Table3Settings,\n Table3SettingsAdapter,\n Table3RowHeight,\n Table3FilterComparator,\n Table3FilterHandler,\n Table3SearchHandler,\n Table3LoadPageHandler,\n Table3LoadAllHandler,\n Table3RowGotoHandler,\n Table3SortHandler,\n Table3Shortcuts,\n Table3ShortcutHandlerFn,\n Table3ShortcutHandlerObject,\n Table3FontSize,\n Table3SortDirection,\n Table3SortFn,\n Table3RowActionRenderer,\n Table3RowSelectionHandler,\n Table3RowExpansionRenderer,\n Table3RowDropHandler,\n Table3RowDragHandler,\n Table3RowClickHandler,\n Table3ColumnProps,\n Table3ColumnAlignment,\n Table3ColumnDataType,\n Table3ColumnHeaderMenu,\n Table3ColumnClassNameHandler,\n Table3ColumnFooterRenderer,\n Table3ColumnRenderer,\n Table3ColumnControlRenderer,\n Table3ColumnControlProps,\n} from './types';\n"],"names":["Column","_","fixedForwardRef","React","forwardRef","Table","Table3","props","ref","emptyState","EmptyState","toolbarLeft","toolbarRight","internalRef","useMergedRef","table","length","useTable","useTableRefInstanceSetup","useEffect","autoFocus","current","focus","renderBody","scrollToIndex","useTableRenderStrategy","tableMeta","options","meta","state","getState","handleKeyDown","event","isEventTriggeredOnInteractiveElement","target","hoverState","currentRow","getRowModel","rows","rowClick","rowSelection","editing","handleBlur","handleScroll","columnFreezing","className","cn","fontSize","size","style","cssGridStyle","useCssGrid","cssVars","useCssVars","rowHeight","height","opacity","columnFreezingStyle","useColumnFreezingStyle","id","isServerLoadingAndNotReady","isUsingServer","undefined","Toolbar","tableProps","total","left","right","isEditing","horizontallyScrolled","isPaused","columnSizingInfo","isResizingColumn","onBlur","onKeyDown","onScroll","role","tabIndex","getHeaderGroups","map","headerGroup","key","headers","header","Fragment","flexRender","column","columnDef","getContext","FocusScope","getFooterGroups","footerGroup","footer","Summary","useMemo","String","children"],"mappings":"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"}
1
+ {"version":3,"file":"Table3.js","sources":["../../../../../../../src/components/Table3/Table3.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { flexRender, TableMeta } from '@tanstack/react-table';\nimport { FocusScope } from '@react-aria/focus';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { useCssGrid } from './hooks/useCssGrid';\nimport { useTable } from './hooks/useTable';\nimport { useTableRenderStrategy } from './strategies';\nimport { Table3ColumnProps, Table3Props, Table3Ref } from './types';\nimport { Toolbar } from './components/toolbar/Toolbar';\nimport { useColumnFreezingStyle } from './hooks/features/useColumnFreezing';\nimport { useTableRefInstanceSetup } from './hooks/useTableRefInstanceSetup';\nimport { Summary } from './components/columns/footer/Summary';\nimport { useCssVars } from './hooks/useCssVars';\nimport './style.css';\nimport { isEventTriggeredOnInteractiveElement } from '../../utils/keyboard';\n\nfunction Column<TType = unknown>(_: Table3ColumnProps<TType>) {\n return null;\n}\n\ntype FixedForwardRef = <T, P = {}>(\n render: (props: P, ref: React.Ref<T>) => JSX.Element\n) => (props: P & React.RefAttributes<T>) => JSX.Element;\n\n// Cast the old forwardRef to the new one\nexport const fixedForwardRef = React.forwardRef as FixedForwardRef;\n\nconst Table = fixedForwardRef(function Table3<TType = unknown>(props: Table3Props<TType>, ref: React.Ref<Table3Ref>) {\n const { emptyState: EmptyState, toolbarLeft, toolbarRight } = props;\n const internalRef = useMergedRef<Table3Ref>(ref);\n\n const { table, length } = useTable<TType>(props);\n useTableRefInstanceSetup(table, internalRef);\n\n React.useEffect(() => {\n if (props.autoFocus) {\n internalRef.current?.focus();\n }\n }, []);\n\n const { renderBody, scrollToIndex } = useTableRenderStrategy<TType>(props, table, internalRef);\n const tableMeta = table.options.meta as TableMeta<TType>;\n const state = table.getState();\n\n const handleKeyDown = (event: React.KeyboardEvent) => {\n if (isEventTriggeredOnInteractiveElement(event.target)) {\n return;\n }\n\n tableMeta.hoverState.handleKeyDown(event);\n tableMeta.currentRow.handleKeyDown(event, table.getRowModel().rows.length, scrollToIndex);\n tableMeta.rowClick.handleKeyDown(event, table);\n tableMeta.rowSelection.handleKeyDown(event, table);\n tableMeta.editing.handleKeyDown(event, internalRef);\n };\n\n const handleBlur = (event: React.FocusEvent) => {\n tableMeta.editing.handleBlur(event);\n };\n\n const handleScroll = async (event: React.MouseEvent<HTMLDivElement>) => {\n tableMeta.columnFreezing.handleScroll(event);\n };\n\n const className = cn(\n 'border-grey-300 relative grid h-full w-full flex-grow overflow-auto rounded border bg-white scroll-mt-[41px]',\n 'focus:yt-focus focus-within:yt-focus',\n '[&[data-resizing=\"true\"]]:select-none',\n {\n 'text-xs': tableMeta.fontSize.size === 'small',\n 'text-sm': tableMeta.fontSize.size === 'medium',\n 'text-base': tableMeta.fontSize.size === 'large',\n }\n );\n\n const { style: cssGridStyle } = useCssGrid<TType>(table);\n const { style: cssVars } = useCssVars(tableMeta.rowHeight.height, tableMeta.fontSize.size);\n\n const style = {\n ...cssVars,\n ...cssGridStyle,\n // create a new stacking context so our internal z-indexes don't effect external components\n // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\n opacity: 0.999,\n };\n\n const columnFreezingStyle = useColumnFreezingStyle(props.id, table);\n const isServerLoadingAndNotReady = tableMeta.isUsingServer && props.length === undefined;\n\n return (\n <>\n {columnFreezingStyle ? <style data-taco=\"table3-column-freezing-styles\">{columnFreezingStyle}</style> : null}\n <Toolbar\n table={table}\n tableProps={props}\n total={length}\n left={toolbarLeft}\n right={toolbarRight}\n scrollToIndex={scrollToIndex}\n />\n <div\n className={className}\n id={props.id}\n data-font-size={tableMeta.fontSize.size}\n data-editing={tableMeta.editing.isEditing}\n data-horizontally-scrolled={tableMeta.columnFreezing.horizontallyScrolled}\n data-pause-hover={tableMeta?.hoverState.isPaused}\n data-resizing={!!state.columnSizingInfo.isResizingColumn}\n data-taco=\"table2\"\n onBlur={handleBlur}\n onKeyDown={handleKeyDown}\n onScroll={handleScroll}\n ref={internalRef}\n role=\"table\"\n style={style}\n tabIndex={0}>\n {isServerLoadingAndNotReady ? null : (\n <div className=\"group/header contents\" data-taco=\"table2-header\" role=\"rowgroup\">\n {table.getHeaderGroups().map(headerGroup => (\n <div className=\"contents\" key={headerGroup.id} role=\"row\">\n {headerGroup.headers.map(header => (\n <React.Fragment key={header.id}>\n {flexRender(header.column.columnDef.header, { ...header.getContext(), scrollToIndex })}\n </React.Fragment>\n ))}\n </div>\n ))}\n </div>\n )}\n {table.getRowModel().rows.length ? (\n <>\n <FocusScope>\n <div className=\"group/body contents\" data-taco=\"table2-body\" role=\"rowgroup\">\n {renderBody()}\n <span className=\"col-span-full h-16 print:hidden\" />\n </div>\n </FocusScope>\n <div className=\"group/footer contents\" data-taco=\"table2-footer\" role=\"rowgroup\">\n {table.getFooterGroups().map(footerGroup => (\n <div className=\"contents\" key={footerGroup.id} role=\"row\">\n {footerGroup.headers.map(footer => (\n <React.Fragment key={footer.id}>\n {flexRender(footer.column.columnDef.footer, footer.getContext())}\n </React.Fragment>\n ))}\n </div>\n ))}\n {length ? <Summary length={length} table={table} /> : null}\n </div>\n </>\n ) : (\n <div className=\"col-span-full min-h-[theme(spacing.8)]\">{EmptyState ? <EmptyState /> : null}</div>\n )}\n </div>\n </>\n );\n});\n\ntype Table3WithStatics = (<TType = unknown>(props: Table3Props<TType> & React.RefAttributes<Table3Ref>) => JSX.Element) & {\n Column: typeof Column;\n};\n\nexport const Table3 = fixedForwardRef(function Table3<TType = unknown>(props: Table3Props<TType>, ref: React.Ref<Table3Ref>) {\n // we force a remount (using key) when the child columns change because there are too many places to add children as an effect\n // this is cheaper from a complexity perspective, and probably performance wise as well\n const key = React.useMemo(() => String('tableKey_' + String(props.children)), [props.children]);\n return <Table<TType> {...props} key={key} ref={ref} />;\n}) as Table3WithStatics;\nTable3.Column = Column;\n\n// hooks\nexport { useTable3DataLoader } from './hooks/useTableDataLoader';\n\n// types\nexport type {\n useTable3DataFetcher,\n useTable3DataOptions,\n useTable3DataFetcherValues as useTableDataValues,\n} from './hooks/useTableDataLoader';\n\nexport type {\n Table3Ref,\n Table3Props,\n Table3Preset,\n Table3Settings,\n Table3SettingsAdapter,\n Table3RowHeight,\n Table3FilterComparator,\n Table3FilterHandler,\n Table3LoadPageHandler,\n Table3LoadAllHandler,\n Table3RowGotoHandler,\n Table3SortHandler,\n Table3Shortcuts,\n Table3ShortcutHandlerFn,\n Table3ShortcutHandlerObject,\n Table3FontSize,\n Table3SortDirection,\n Table3SortFn,\n Table3RowActionRenderer,\n Table3RowSelectionHandler,\n Table3RowExpansionRenderer,\n Table3RowDropHandler,\n Table3RowDragHandler,\n Table3RowClickHandler,\n Table3ColumnProps,\n Table3ColumnAlignment,\n Table3ColumnDataType,\n Table3ColumnHeaderMenu,\n Table3ColumnClassNameHandler,\n Table3ColumnFooterRenderer,\n Table3ColumnRenderer,\n Table3ColumnControlRenderer,\n Table3ColumnControlProps,\n} from './types';\n"],"names":["Column","_","fixedForwardRef","React","forwardRef","Table","Table3","props","ref","emptyState","EmptyState","toolbarLeft","toolbarRight","internalRef","useMergedRef","table","length","useTable","useTableRefInstanceSetup","useEffect","autoFocus","current","focus","renderBody","scrollToIndex","useTableRenderStrategy","tableMeta","options","meta","state","getState","handleKeyDown","event","isEventTriggeredOnInteractiveElement","target","hoverState","currentRow","getRowModel","rows","rowClick","rowSelection","editing","handleBlur","handleScroll","columnFreezing","className","cn","fontSize","size","style","cssGridStyle","useCssGrid","cssVars","useCssVars","rowHeight","height","opacity","columnFreezingStyle","useColumnFreezingStyle","id","isServerLoadingAndNotReady","isUsingServer","undefined","Toolbar","tableProps","total","left","right","isEditing","horizontallyScrolled","isPaused","columnSizingInfo","isResizingColumn","onBlur","onKeyDown","onScroll","role","tabIndex","getHeaderGroups","map","headerGroup","key","headers","header","Fragment","flexRender","column","columnDef","getContext","FocusScope","getFooterGroups","footerGroup","footer","Summary","useMemo","String","children"],"mappings":"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"}
@@ -49,7 +49,7 @@ function DisplayCell(props) {
49
49
  return isCellHighlighted(tableMeta.search.query, value, memoedProps.children);
50
50
  }
51
51
  return false;
52
- }, [memoedProps.children, tableMeta.search.isHighlightingEnabled, tableMeta.search.query]);
52
+ }, [memoedProps.children, tableMeta.search.isHighlightingEnabled, tableMeta.search.excludeUnmatchedResults, tableMeta.search.query]);
53
53
  const memoedHighlightCurrent = React__default.useMemo(() => {
54
54
  if (!tableMeta.search.isHighlightingEnabled || !memoedHighlight || tableMeta.search.currentHighlightColumnIndex === undefined) {
55
55
  return false;
@@ -81,7 +81,7 @@ const MemoedDisplayCell = /*#__PURE__*/React__default.memo(function MemoedDispla
81
81
  } = props;
82
82
  const layoutClassName = cn('py-[var(--table3-row-padding)]', customClassName);
83
83
  const className = highlighted ? undefined : layoutClassName;
84
- const content = enableTruncate || typeof children === 'string' ? /*#__PURE__*/React__default.createElement("span", {
84
+ const content = enableTruncate ? /*#__PURE__*/React__default.createElement("span", {
85
85
  className: "truncate"
86
86
  }, children) : children;
87
87
  if (debug) {
@@ -1 +1 @@
1
- {"version":3,"file":"DisplayCell.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/cell/DisplayCell.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { ColumnMeta, CellContext, TableMeta } from '@tanstack/react-table';\nimport { Table3ColumnAlignment } from '../../../types';\nimport { RowContext } from '../../rows/RowContext';\nimport { isCellHighlighted, scrollColumnIntoView } from '../../../util/columns';\n\nexport type DisplayCellProps<TType = unknown> = CellContext<TType, unknown> & {\n children?: string | JSX.Element;\n className?: string;\n};\n\nexport function DisplayCell<TType = unknown>(props: DisplayCellProps<TType>) {\n const { cell, className, column, getValue, index, row, table, tableRef } = props;\n const columnMeta = React.useMemo(() => column.columnDef.meta as ColumnMeta<TType, unknown>, []);\n const tableMeta = table.options.meta as TableMeta<TType>;\n const { rowIndex } = React.useContext(RowContext);\n\n const value = getValue();\n\n // cells are heavily memoized because performance in our table is critical\n // be careful and selective about props that you pass to the cell\n const memoedProps = React.useMemo(() => {\n return {\n align: columnMeta.align,\n children: (props.children ?? columnMeta.renderer?.(value, row.original) ?? value ?? null) as\n | JSX.Element\n | string\n | null,\n className: cn(\n className,\n // we alias to any because className conflicts with the Table2 definition,\n // when Table2 is gone, remove this as any\n typeof columnMeta.className === 'function' ? (columnMeta.className as any)(row.original) : columnMeta.className\n ),\n data: row.original,\n debug: table.options.debugAll,\n enableTruncate: columnMeta.enableTruncate,\n frozenColumnIndex: tableMeta.columnFreezing.frozenColumnIndex,\n id: cell.id,\n index,\n tableRef,\n };\n }, [row.original, props.children, value]);\n\n const memoedHighlight = React.useMemo(() => {\n if (!tableMeta.search.isHighlightingEnabled) {\n return false;\n }\n\n if (tableMeta.search.query?.length && columnMeta.enableSearch) {\n return isCellHighlighted(tableMeta.search.query, value, memoedProps.children);\n }\n\n return false;\n }, [memoedProps.children, tableMeta.search.isHighlightingEnabled, tableMeta.search.query]);\n\n const memoedHighlightCurrent = React.useMemo(() => {\n if (\n !tableMeta.search.isHighlightingEnabled ||\n !memoedHighlight ||\n tableMeta.search.currentHighlightColumnIndex === undefined\n ) {\n return false;\n }\n\n const [currentRowIndex, currentColumnIndex] =\n tableMeta.search.highlightedColumnIndexes[tableMeta.search.currentHighlightColumnIndex];\n\n if (currentRowIndex === rowIndex && currentColumnIndex === index) {\n return true;\n }\n\n return false;\n }, [memoedHighlight, tableMeta.search.highlightedColumnIndexes.length, tableMeta.search.currentHighlightColumnIndex]);\n\n return (\n <MemoedDisplayCell<TType> {...memoedProps} highlighted={memoedHighlight} highlightedAsCurrent={memoedHighlightCurrent} />\n );\n}\n\n// Memoization\nexport type MemoedDisplayCellProps<TType = unknown> = {\n align?: Table3ColumnAlignment;\n children: JSX.Element | string | null;\n className?: string;\n data: TType;\n debug?: boolean;\n enableTruncate?: boolean;\n frozenColumnIndex?: number;\n highlighted: boolean;\n highlightedAsCurrent: boolean;\n id: string;\n index: number;\n tableRef: React.RefObject<HTMLDivElement>;\n};\n\nconst MemoedDisplayCell = React.memo(function MemoedDisplayCell<TType = unknown>(props: MemoedDisplayCellProps<TType>) {\n const {\n align = 'left',\n children,\n className: customClassName,\n debug,\n enableTruncate,\n frozenColumnIndex,\n highlighted,\n highlightedAsCurrent = false,\n id,\n index,\n tableRef,\n } = props;\n\n const layoutClassName = cn('py-[var(--table3-row-padding)]', customClassName);\n\n const className = highlighted ? undefined : layoutClassName;\n const content = enableTruncate || typeof children === 'string' ? <span className=\"truncate\">{children}</span> : children;\n\n if (debug) {\n console.log('cell render', id);\n }\n\n return (\n <div className={className} data-align={align} data-column-index={index} data-highlighted={highlighted} role=\"cell\">\n {highlighted ? (\n <Highlight\n className={layoutClassName}\n current={highlightedAsCurrent}\n frozenColumnIndex={frozenColumnIndex}\n index={index}\n tableRef={tableRef}>\n {content}\n </Highlight>\n ) : (\n content\n )}\n </div>\n );\n}) as <TType = unknown>(props: MemoedDisplayCellProps<TType>) => JSX.Element;\n\nconst Highlight = props => {\n const { current, frozenColumnIndex, index, tableRef, ...attributes } = props;\n const ref = React.useRef<HTMLDivElement | null>(null);\n const className = cn('h-full flex px-4 [justify-content:inherit] [text-align:inherit]', props.className, {\n // normal row\n 'bg-blue-200/25': !current,\n // current row\n 'bg-blue-200/75': current,\n });\n\n React.useEffect(() => {\n if (ref.current && current) {\n scrollColumnIntoView(index, frozenColumnIndex, ref.current, tableRef.current);\n }\n }, [current]);\n\n return <div {...attributes} className={className} ref={ref} />;\n};\n"],"names":["DisplayCell","props","cell","className","column","getValue","index","row","table","tableRef","columnMeta","React","useMemo","columnDef","meta","tableMeta","options","rowIndex","useContext","RowContext","value","memoedProps","align","children","renderer","original","cn","data","debug","debugAll","enableTruncate","frozenColumnIndex","columnFreezing","id","memoedHighlight","search","isHighlightingEnabled","query","length","enableSearch","isCellHighlighted","memoedHighlightCurrent","currentHighlightColumnIndex","undefined","currentRowIndex","currentColumnIndex","highlightedColumnIndexes","MemoedDisplayCell","highlighted","highlightedAsCurrent","memo","customClassName","layoutClassName","content","console","log","role","Highlight","current","attributes","ref","useRef","useEffect","scrollColumnIntoView"],"mappings":"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"}
1
+ {"version":3,"file":"DisplayCell.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/cell/DisplayCell.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { ColumnMeta, CellContext, TableMeta } from '@tanstack/react-table';\nimport { Table3ColumnAlignment } from '../../../types';\nimport { RowContext } from '../../rows/RowContext';\nimport { isCellHighlighted, scrollColumnIntoView } from '../../../util/columns';\n\nexport type DisplayCellProps<TType = unknown> = CellContext<TType, unknown> & {\n children?: string | JSX.Element;\n className?: string;\n};\n\nexport function DisplayCell<TType = unknown>(props: DisplayCellProps<TType>) {\n const { cell, className, column, getValue, index, row, table, tableRef } = props;\n const columnMeta = React.useMemo(() => column.columnDef.meta as ColumnMeta<TType, unknown>, []);\n const tableMeta = table.options.meta as TableMeta<TType>;\n const { rowIndex } = React.useContext(RowContext);\n\n const value = getValue();\n\n // cells are heavily memoized because performance in our table is critical\n // be careful and selective about props that you pass to the cell\n const memoedProps = React.useMemo(() => {\n return {\n align: columnMeta.align,\n children: (props.children ?? columnMeta.renderer?.(value, row.original) ?? value ?? null) as\n | JSX.Element\n | string\n | null,\n className: cn(\n className,\n // we alias to any because className conflicts with the Table2 definition,\n // when Table2 is gone, remove this as any\n typeof columnMeta.className === 'function' ? (columnMeta.className as any)(row.original) : columnMeta.className\n ),\n data: row.original,\n debug: table.options.debugAll,\n enableTruncate: columnMeta.enableTruncate,\n frozenColumnIndex: tableMeta.columnFreezing.frozenColumnIndex,\n id: cell.id,\n index,\n tableRef,\n };\n }, [row.original, props.children, value]);\n\n const memoedHighlight = React.useMemo(() => {\n if (!tableMeta.search.isHighlightingEnabled) {\n return false;\n }\n\n if (tableMeta.search.query?.length && columnMeta.enableSearch) {\n return isCellHighlighted(tableMeta.search.query, value, memoedProps.children);\n }\n\n return false;\n }, [\n memoedProps.children,\n tableMeta.search.isHighlightingEnabled,\n tableMeta.search.excludeUnmatchedResults,\n tableMeta.search.query,\n ]);\n\n const memoedHighlightCurrent = React.useMemo(() => {\n if (\n !tableMeta.search.isHighlightingEnabled ||\n !memoedHighlight ||\n tableMeta.search.currentHighlightColumnIndex === undefined\n ) {\n return false;\n }\n\n const [currentRowIndex, currentColumnIndex] =\n tableMeta.search.highlightedColumnIndexes[tableMeta.search.currentHighlightColumnIndex];\n\n if (currentRowIndex === rowIndex && currentColumnIndex === index) {\n return true;\n }\n\n return false;\n }, [memoedHighlight, tableMeta.search.highlightedColumnIndexes.length, tableMeta.search.currentHighlightColumnIndex]);\n\n return (\n <MemoedDisplayCell<TType> {...memoedProps} highlighted={memoedHighlight} highlightedAsCurrent={memoedHighlightCurrent} />\n );\n}\n\n// Memoization\nexport type MemoedDisplayCellProps<TType = unknown> = {\n align?: Table3ColumnAlignment;\n children: JSX.Element | string | null;\n className?: string;\n data: TType;\n debug?: boolean;\n enableTruncate?: boolean;\n frozenColumnIndex?: number;\n highlighted: boolean;\n highlightedAsCurrent: boolean;\n id: string;\n index: number;\n tableRef: React.RefObject<HTMLDivElement>;\n};\n\nconst MemoedDisplayCell = React.memo(function MemoedDisplayCell<TType = unknown>(props: MemoedDisplayCellProps<TType>) {\n const {\n align = 'left',\n children,\n className: customClassName,\n debug,\n enableTruncate,\n frozenColumnIndex,\n highlighted,\n highlightedAsCurrent = false,\n id,\n index,\n tableRef,\n } = props;\n\n const layoutClassName = cn('py-[var(--table3-row-padding)]', customClassName);\n\n const className = highlighted ? undefined : layoutClassName;\n const content = enableTruncate ? <span className=\"truncate\">{children}</span> : children;\n\n if (debug) {\n console.log('cell render', id);\n }\n\n return (\n <div className={className} data-align={align} data-column-index={index} data-highlighted={highlighted} role=\"cell\">\n {highlighted ? (\n <Highlight\n className={layoutClassName}\n current={highlightedAsCurrent}\n frozenColumnIndex={frozenColumnIndex}\n index={index}\n tableRef={tableRef}>\n {content}\n </Highlight>\n ) : (\n content\n )}\n </div>\n );\n}) as <TType = unknown>(props: MemoedDisplayCellProps<TType>) => JSX.Element;\n\nconst Highlight = props => {\n const { current, frozenColumnIndex, index, tableRef, ...attributes } = props;\n const ref = React.useRef<HTMLDivElement | null>(null);\n const className = cn('h-full flex px-4 [justify-content:inherit] [text-align:inherit]', props.className, {\n // normal row\n 'bg-blue-200/25': !current,\n // current row\n 'bg-blue-200/75': current,\n });\n\n React.useEffect(() => {\n if (ref.current && current) {\n scrollColumnIntoView(index, frozenColumnIndex, ref.current, tableRef.current);\n }\n }, [current]);\n\n return <div {...attributes} className={className} ref={ref} />;\n};\n"],"names":["DisplayCell","props","cell","className","column","getValue","index","row","table","tableRef","columnMeta","React","useMemo","columnDef","meta","tableMeta","options","rowIndex","useContext","RowContext","value","memoedProps","align","children","renderer","original","cn","data","debug","debugAll","enableTruncate","frozenColumnIndex","columnFreezing","id","memoedHighlight","search","isHighlightingEnabled","query","length","enableSearch","isCellHighlighted","excludeUnmatchedResults","memoedHighlightCurrent","currentHighlightColumnIndex","undefined","currentRowIndex","currentColumnIndex","highlightedColumnIndexes","MemoedDisplayCell","highlighted","highlightedAsCurrent","memo","customClassName","layoutClassName","content","console","log","role","Highlight","current","attributes","ref","useRef","useEffect","scrollColumnIntoView"],"mappings":"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"}
@@ -5,6 +5,7 @@ import { isFrozenColumn, isInternalColumn } from '../../../util/columns.js';
5
5
  import { isGotoAvailable, isMenuAvailable, Menu } from './Menu.js';
6
6
  import { Resizer } from './Resizer.js';
7
7
  import { getSortAttributes, SortIndicator } from './SortIndicator.js';
8
+ import { COLUMN_ID } from '../internal/Actions.js';
8
9
 
9
10
  function Header(props) {
10
11
  const {
@@ -92,6 +93,10 @@ const MemoedHeader = /*#__PURE__*/React__default.memo(function MemoedHeader(prop
92
93
  const [internalRef, setInternalRef] = React__default.useState(null);
93
94
  React__default.useLayoutEffect(() => {
94
95
  if (internalRef && length) {
96
+ // the actions column size gets set by the column itself
97
+ if (id === COLUMN_ID) {
98
+ return;
99
+ }
95
100
  table.setColumnSizing(sizes => ({
96
101
  ...sizes,
97
102
  [id]: internalRef.getBoundingClientRect().width
@@ -1 +1 @@
1
- {"version":3,"file":"Header.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/header/Header.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { ColumnMeta, HeaderContext, TableMeta } from '@tanstack/react-table';\nimport { Menu, isMenuAvailable, isGotoAvailable } from './Menu';\nimport { Resizer } from './Resizer';\nimport { Table3ColumnAlignment, Table3SortDirection, TableStrategy } from '../../../types';\nimport { getSortAttributes, SortIndicator } from './SortIndicator';\nimport { isFrozenColumn, isInternalColumn } from '../../../util/columns';\nimport { Tooltip } from '../../../../Tooltip/Tooltip';\n\nexport type HeaderProps<TType = unknown> = HeaderContext<TType, unknown> & {\n children?: string | JSX.Element;\n};\n\nexport function Header<TType = unknown>(props: HeaderProps<TType>) {\n const { children, column, header, scrollToIndex, table } = props;\n const tableMeta = table.options.meta as TableMeta<TType>;\n const columnMeta = React.useMemo(() => column.columnDef.meta, []) as ColumnMeta<TType, unknown>;\n const canSort = column.getCanSort();\n\n // passing header or column results in re-renders on scroll, so anything from those objects as memoed props\n const handleResize = React.useMemo(() => header.getResizeHandler(), []);\n const handleSort = React.useMemo(() => header.column.getToggleSortingHandler(), []);\n const handleHide = React.useMemo(() => header.column.getToggleVisibilityHandler(), []);\n const hasGoto = isGotoAvailable(table, header);\n\n const sorting = table.getState().sorting;\n const filters = table.getState().columnFilters;\n const search = table.getState().globalFilter;\n\n const handleGoto = React.useMemo(() => {\n if (hasGoto) {\n return ((query: string) => tableMeta.rowGoto.handleGoto(header.id, query, sorting, filters, search)) as (\n query: string\n ) => Promise<number>;\n }\n\n return undefined;\n }, [hasGoto, JSON.stringify(sorting), JSON.stringify(filters), search]);\n\n const memoedProps = {\n align: columnMeta.align,\n canFreeze: tableMeta.columnFreezing.isEnabled,\n canHide: column.getCanHide(),\n canResize: column.getCanResize(),\n canSort,\n children: children ?? columnMeta.header,\n hasMenu: isMenuAvailable<TType>(table, header),\n id: header.id,\n index: header.index,\n isFrozen: isFrozenColumn(header.index, table),\n isResizing: column.getIsResizing(),\n length: table.getRowModel().rows.length,\n meta: columnMeta,\n onGoto: handleGoto,\n onHide: handleHide,\n onResize: handleResize,\n onSort: handleSort as (event: unknown) => void,\n scrollToIndex,\n sortDirection: column.getIsSorted(),\n table,\n };\n\n return <MemoedHeader<TType> {...memoedProps} />;\n}\n\n// Memoization\nexport type MemoedHeaderProps<TType = unknown> = Omit<HeaderProps<TType>, 'column' | 'header'> & {\n align?: Table3ColumnAlignment;\n canFreeze: boolean;\n canHide: boolean;\n canResize: boolean;\n canSort: boolean;\n hasMenu: boolean;\n id: string;\n index: number;\n isFrozen: boolean;\n isResizing: boolean;\n length: number;\n meta: ColumnMeta<TType, unknown>;\n onGoto?: (query: string) => Promise<number>;\n onHide: (event: unknown) => void;\n onResize: (event: unknown) => void;\n onSort: (event: unknown) => void;\n scrollToIndex: TableStrategy['scrollToIndex'];\n sortDirection: false | Table3SortDirection;\n};\n\nconst MemoedHeader = React.memo(function MemoedHeader<TType = unknown>(props: MemoedHeaderProps<TType>) {\n const {\n align,\n children,\n canFreeze,\n canHide,\n canResize,\n canSort,\n hasMenu,\n id,\n index,\n isFrozen,\n isResizing,\n length,\n meta,\n onGoto: handleGoto,\n onHide: handleHide,\n onResize: handleResize,\n onSort: handleSort,\n scrollToIndex,\n sortDirection,\n table,\n } = props;\n\n const className = cn(\n 'sticky top-0 border-b-2 font-bold h-10 box-content items-center group/column relative',\n '[[role=\"table\"][data-resizing=\"true\"]_&]:pointer-events-none',\n {\n 'cursor-pointer select-none': canSort,\n 'hover:bg-grey-100': canSort || canResize || hasMenu,\n '!pointer-events-all !bg-grey-100': isResizing,\n // z-indexes\n 'z-10 hover:z-20': !isFrozen && !isResizing,\n 'z-20': !isFrozen && isResizing,\n '!z-30': isFrozen,\n '!z-40': isFrozen && isResizing,\n },\n meta.headerClassName\n );\n\n const [internalRef, setInternalRef] = React.useState<HTMLDivElement | null>(null);\n\n React.useLayoutEffect(() => {\n if (internalRef && length) {\n table.setColumnSizing(sizes => ({\n ...sizes,\n [id]: internalRef.getBoundingClientRect().width,\n }));\n }\n }, [internalRef, length]);\n\n if (table.options.debugAll) {\n console.log('header render', id);\n }\n\n return (\n <div\n {...(canSort ? getSortAttributes(handleSort, sortDirection) : undefined)}\n className={className}\n data-align={align}\n data-column-index={index}\n role=\"columnheader\"\n ref={setInternalRef}>\n {isInternalColumn(id) ? (\n children\n ) : (\n <Tooltip title={String(meta?.tooltip ?? children)} placement=\"top\">\n <span className=\"truncate\">{children}</span>\n </Tooltip>\n )}\n {canSort ? <SortIndicator direction={sortDirection} /> : null}\n {hasMenu ? (\n <Menu\n canFreeze={canFreeze}\n canHide={canHide}\n className=\"ml-auto hidden group-hover/column:flex aria-expanded:!flex\"\n index={index}\n menu={meta.menu}\n onGoto={handleGoto}\n onHide={handleHide}\n scrollToIndex={scrollToIndex}\n table={table}\n />\n ) : null}\n {canResize ? <Resizer isResizing={isResizing} onResize={handleResize} /> : null}\n </div>\n );\n}) as <TType = unknown>(props: MemoedHeaderProps<TType>) => JSX.Element;\n"],"names":["Header","props","children","column","header","scrollToIndex","table","tableMeta","options","meta","columnMeta","React","useMemo","columnDef","canSort","getCanSort","handleResize","getResizeHandler","handleSort","getToggleSortingHandler","handleHide","getToggleVisibilityHandler","hasGoto","isGotoAvailable","sorting","getState","filters","columnFilters","search","globalFilter","handleGoto","query","rowGoto","id","undefined","JSON","stringify","memoedProps","align","canFreeze","columnFreezing","isEnabled","canHide","getCanHide","canResize","getCanResize","hasMenu","isMenuAvailable","index","isFrozen","isFrozenColumn","isResizing","getIsResizing","length","getRowModel","rows","onGoto","onHide","onResize","onSort","sortDirection","getIsSorted","MemoedHeader","memo","className","cn","headerClassName","internalRef","setInternalRef","useState","useLayoutEffect","setColumnSizing","sizes","getBoundingClientRect","width","debugAll","console","log","getSortAttributes","role","ref","isInternalColumn","Tooltip","title","String","tooltip","placement","SortIndicator","direction","Menu","menu","Resizer"],"mappings":"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"}
1
+ {"version":3,"file":"Header.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/header/Header.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { ColumnMeta, HeaderContext, TableMeta } from '@tanstack/react-table';\nimport { Menu, isMenuAvailable, isGotoAvailable } from './Menu';\nimport { Resizer } from './Resizer';\nimport { Table3ColumnAlignment, Table3SortDirection, TableStrategy } from '../../../types';\nimport { getSortAttributes, SortIndicator } from './SortIndicator';\nimport { isFrozenColumn, isInternalColumn } from '../../../util/columns';\nimport { Tooltip } from '../../../../Tooltip/Tooltip';\nimport { COLUMN_ID as ACTIONS_COLUMN_ID } from '../internal/Actions';\n\nexport type HeaderProps<TType = unknown> = HeaderContext<TType, unknown> & {\n children?: string | JSX.Element;\n};\n\nexport function Header<TType = unknown>(props: HeaderProps<TType>) {\n const { children, column, header, scrollToIndex, table } = props;\n const tableMeta = table.options.meta as TableMeta<TType>;\n const columnMeta = React.useMemo(() => column.columnDef.meta, []) as ColumnMeta<TType, unknown>;\n const canSort = column.getCanSort();\n\n // passing header or column results in re-renders on scroll, so anything from those objects as memoed props\n const handleResize = React.useMemo(() => header.getResizeHandler(), []);\n const handleSort = React.useMemo(() => header.column.getToggleSortingHandler(), []);\n const handleHide = React.useMemo(() => header.column.getToggleVisibilityHandler(), []);\n const hasGoto = isGotoAvailable(table, header);\n\n const sorting = table.getState().sorting;\n const filters = table.getState().columnFilters;\n const search = table.getState().globalFilter;\n\n const handleGoto = React.useMemo(() => {\n if (hasGoto) {\n return ((query: string) => tableMeta.rowGoto.handleGoto(header.id, query, sorting, filters, search)) as (\n query: string\n ) => Promise<number>;\n }\n\n return undefined;\n }, [hasGoto, JSON.stringify(sorting), JSON.stringify(filters), search]);\n\n const memoedProps = {\n align: columnMeta.align,\n canFreeze: tableMeta.columnFreezing.isEnabled,\n canHide: column.getCanHide(),\n canResize: column.getCanResize(),\n canSort,\n children: children ?? columnMeta.header,\n hasMenu: isMenuAvailable<TType>(table, header),\n id: header.id,\n index: header.index,\n isFrozen: isFrozenColumn(header.index, table),\n isResizing: column.getIsResizing(),\n length: table.getRowModel().rows.length,\n meta: columnMeta,\n onGoto: handleGoto,\n onHide: handleHide,\n onResize: handleResize,\n onSort: handleSort as (event: unknown) => void,\n scrollToIndex,\n sortDirection: column.getIsSorted(),\n table,\n };\n\n return <MemoedHeader<TType> {...memoedProps} />;\n}\n\n// Memoization\nexport type MemoedHeaderProps<TType = unknown> = Omit<HeaderProps<TType>, 'column' | 'header'> & {\n align?: Table3ColumnAlignment;\n canFreeze: boolean;\n canHide: boolean;\n canResize: boolean;\n canSort: boolean;\n hasMenu: boolean;\n id: string;\n index: number;\n isFrozen: boolean;\n isResizing: boolean;\n length: number;\n meta: ColumnMeta<TType, unknown>;\n onGoto?: (query: string) => Promise<number>;\n onHide: (event: unknown) => void;\n onResize: (event: unknown) => void;\n onSort: (event: unknown) => void;\n scrollToIndex: TableStrategy['scrollToIndex'];\n sortDirection: false | Table3SortDirection;\n};\n\nconst MemoedHeader = React.memo(function MemoedHeader<TType = unknown>(props: MemoedHeaderProps<TType>) {\n const {\n align,\n children,\n canFreeze,\n canHide,\n canResize,\n canSort,\n hasMenu,\n id,\n index,\n isFrozen,\n isResizing,\n length,\n meta,\n onGoto: handleGoto,\n onHide: handleHide,\n onResize: handleResize,\n onSort: handleSort,\n scrollToIndex,\n sortDirection,\n table,\n } = props;\n\n const className = cn(\n 'sticky top-0 border-b-2 font-bold h-10 box-content items-center group/column relative',\n '[[role=\"table\"][data-resizing=\"true\"]_&]:pointer-events-none',\n {\n 'cursor-pointer select-none': canSort,\n 'hover:bg-grey-100': canSort || canResize || hasMenu,\n '!pointer-events-all !bg-grey-100': isResizing,\n // z-indexes\n 'z-10 hover:z-20': !isFrozen && !isResizing,\n 'z-20': !isFrozen && isResizing,\n '!z-30': isFrozen,\n '!z-40': isFrozen && isResizing,\n },\n meta.headerClassName\n );\n\n const [internalRef, setInternalRef] = React.useState<HTMLDivElement | null>(null);\n\n React.useLayoutEffect(() => {\n if (internalRef && length) {\n // the actions column size gets set by the column itself\n if (id === ACTIONS_COLUMN_ID) {\n return;\n }\n\n table.setColumnSizing(sizes => ({\n ...sizes,\n [id]: internalRef.getBoundingClientRect().width,\n }));\n }\n }, [internalRef, length]);\n\n if (table.options.debugAll) {\n console.log('header render', id);\n }\n\n return (\n <div\n {...(canSort ? getSortAttributes(handleSort, sortDirection) : undefined)}\n className={className}\n data-align={align}\n data-column-index={index}\n role=\"columnheader\"\n ref={setInternalRef}>\n {isInternalColumn(id) ? (\n children\n ) : (\n <Tooltip title={String(meta?.tooltip ?? children)} placement=\"top\">\n <span className=\"truncate\">{children}</span>\n </Tooltip>\n )}\n {canSort ? <SortIndicator direction={sortDirection} /> : null}\n {hasMenu ? (\n <Menu\n canFreeze={canFreeze}\n canHide={canHide}\n className=\"ml-auto hidden group-hover/column:flex aria-expanded:!flex\"\n index={index}\n menu={meta.menu}\n onGoto={handleGoto}\n onHide={handleHide}\n scrollToIndex={scrollToIndex}\n table={table}\n />\n ) : null}\n {canResize ? <Resizer isResizing={isResizing} onResize={handleResize} /> : null}\n </div>\n );\n}) as <TType = unknown>(props: MemoedHeaderProps<TType>) => JSX.Element;\n"],"names":["Header","props","children","column","header","scrollToIndex","table","tableMeta","options","meta","columnMeta","React","useMemo","columnDef","canSort","getCanSort","handleResize","getResizeHandler","handleSort","getToggleSortingHandler","handleHide","getToggleVisibilityHandler","hasGoto","isGotoAvailable","sorting","getState","filters","columnFilters","search","globalFilter","handleGoto","query","rowGoto","id","undefined","JSON","stringify","memoedProps","align","canFreeze","columnFreezing","isEnabled","canHide","getCanHide","canResize","getCanResize","hasMenu","isMenuAvailable","index","isFrozen","isFrozenColumn","isResizing","getIsResizing","length","getRowModel","rows","onGoto","onHide","onResize","onSort","sortDirection","getIsSorted","MemoedHeader","memo","className","cn","headerClassName","internalRef","setInternalRef","useState","useLayoutEffect","ACTIONS_COLUMN_ID","setColumnSizing","sizes","getBoundingClientRect","width","debugAll","console","log","getSortAttributes","role","ref","isInternalColumn","Tooltip","title","String","tooltip","placement","SortIndicator","direction","Menu","menu","Resizer"],"mappings":"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"}
@@ -10,7 +10,6 @@ import { DisplayCell } from '../cell/DisplayCell.js';
10
10
  import { Footer } from '../footer/Footer.js';
11
11
 
12
12
  const COLUMN_ID = '__actions';
13
- const ACTIONS_ON_ROW_LENGTH = 4;
14
13
  const MemoedCell = /*#__PURE__*/React__default.memo(function MemoedCell(props) {
15
14
  const {
16
15
  actions,
@@ -19,7 +18,8 @@ const MemoedCell = /*#__PURE__*/React__default.memo(function MemoedCell(props) {
19
18
  isEditing,
20
19
  isResizingColumn,
21
20
  isHoverStatePaused,
22
- row
21
+ row,
22
+ table
23
23
  } = props;
24
24
  const {
25
25
  isHovered
@@ -27,15 +27,29 @@ const MemoedCell = /*#__PURE__*/React__default.memo(function MemoedCell(props) {
27
27
  const {
28
28
  texts
29
29
  } = useLocalization();
30
+ const ref = React__default.useRef(null);
31
+ const size = table.getState().columnSizing[COLUMN_ID];
32
+ // the actions column needs to set its size based on its content, not the actual column
33
+ // so we do this here instead of in the header
34
+ React__default.useLayoutEffect(() => {
35
+ if (ref.current && !size) {
36
+ const width = ref.current.getBoundingClientRect().width;
37
+ table.setColumnSizing(sizes => ({
38
+ ...sizes,
39
+ [COLUMN_ID]: width
40
+ }));
41
+ }
42
+ }, [ref.current]);
30
43
  let content;
31
44
  // We don't want to show actions in edit mode, since we have editing actions,
32
45
  // which is shown in edit mode instead.
33
- if (!isEditing && (isCurrentRow || isHovered && !isHoverStatePaused && !isResizingColumn)) {
46
+ if (actions !== null && actions !== void 0 && actions.length && !isEditing && (isCurrentRow || isHovered && !isHoverStatePaused && !isResizingColumn)) {
34
47
  const visibleActions = actions.map(action => action(row.original)).filter(action => !!action);
35
48
  const actionsOnRow = visibleActions.length === actionsLength ? visibleActions : visibleActions.slice(0, actionsLength - 1);
36
49
  const actionsInMenu = visibleActions.slice(visibleActions.length === actionsLength ? actionsLength : actionsLength - 1);
37
50
  content = /*#__PURE__*/React__default.createElement("span", {
38
- className: "-mb-2 -mt-2 flex justify-end text-right"
51
+ className: "-mb-2 -mt-2 flex justify-end pl-2 text-right",
52
+ ref: ref
39
53
  }, actionsOnRow.map((button, index) => {
40
54
  var _ref, _button$props$tooltip;
41
55
  const tooltip = String((_ref = (_button$props$tooltip = button.props.tooltip) !== null && _button$props$tooltip !== void 0 ? _button$props$tooltip : button.props['aria-label']) !== null && _ref !== void 0 ? _ref : '');
@@ -62,37 +76,29 @@ const MemoedCell = /*#__PURE__*/React__default.memo(function MemoedCell(props) {
62
76
  }
63
77
  return /*#__PURE__*/React__default.createElement(DisplayCell, Object.assign({}, props), content);
64
78
  });
65
- function Cell(props) {
66
- const {
67
- actionsForRow,
68
- actionsForRowLength,
69
- ...context
70
- } = props;
79
+ function Cell(context) {
71
80
  const {
72
81
  rowIndex
73
82
  } = React__default.useContext(RowContext);
74
83
  const tableMeta = context.table.options.meta;
75
84
  return /*#__PURE__*/React__default.createElement(MemoedCell, Object.assign({}, context, {
76
- actions: actionsForRow,
77
- actionsLength: actionsForRowLength,
85
+ actions: tableMeta.rowActions.actionsForRow,
86
+ actionsLength: tableMeta.rowActions.actionsForRowLength,
78
87
  isCurrentRow: tableMeta.currentRow.currentRowIndex === rowIndex,
79
88
  isEditing: tableMeta.editing.isEditing,
80
89
  isResizingColumn: !!context.table.getState().columnSizingInfo.isResizingColumn,
81
90
  isHoverStatePaused: !!tableMeta.hoverState.isPaused
82
91
  }));
83
92
  }
84
- function createRowActionsColumn(actionsForRow, actionsForRowLength = ACTIONS_ON_ROW_LENGTH) {
93
+ function createRowActionsColumn() {
85
94
  return {
86
95
  id: COLUMN_ID,
87
96
  header: Header,
88
- cell: context => /*#__PURE__*/React__default.createElement(Cell, Object.assign({}, context, {
89
- actionsForRow: actionsForRow,
90
- actionsForRowLength: actionsForRowLength
91
- })),
97
+ cell: Cell,
92
98
  footer: Footer,
93
99
  meta: {
94
100
  align: 'right',
95
- className: cn('items-center print:opacity-0 [[role="table"][data-editing="false"]_&]:group-[[data-current="true"]]/row:sticky [[role="table"][data-pause-hover="false"][data-editing="false"]_&]:group-hover/row:sticky right-0 !pl-0 !pr-1', '[[role="table"][data-editing="false"]_&]:group-[[data-current="true"]]/row:shadow-[-6px_0px_6px] [[role="table"][data-pause-hover="false"][data-editing="false"]_&]:group-hover/row:shadow-[-6px_0px_6px]', 'group-[[data-current="true"][data-selected="false"]]/row:text-grey-200', 'group-[[data-selected="true"]]/row:text-blue-100', 'group-[[data-selected="false"]:hover]/row:text-grey-100'),
101
+ className: cn('!pt-[var(--table3-row-padding)] print:opacity-0 [[role="table"][data-editing="false"]_&]:group-[[data-current="true"]]/row:sticky [[role="table"][data-pause-hover="false"][data-editing="false"]_&]:group-hover/row:sticky right-0 !pl-1 !pr-1', '[[role="table"][data-editing="false"]_&]:group-[[data-current="true"]]/row:shadow-[-6px_0px_6px] [[role="table"][data-pause-hover="false"][data-editing="false"]_&]:group-hover/row:shadow-[-6px_0px_6px]', 'group-[[data-current="true"][data-selected="false"]]/row:text-grey-200', 'group-[[data-selected="true"]]/row:text-blue-100', 'group-[[data-selected="false"]:hover]/row:text-grey-100'),
96
102
  enableOrdering: false,
97
103
  enableSearch: false,
98
104
  enableTruncate: false,