@economic/taco 2.7.2 → 2.7.4

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 +9 -2
  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/PrintIFrame.js +5 -5
  31. package/dist/esm/packages/taco/src/components/Table3/components/toolbar/PrintButton/PrintIFrame.js.map +1 -1
  32. package/dist/esm/packages/taco/src/components/Table3/components/toolbar/PrintButton/hooks/useParentStylesheets.js +3 -1
  33. package/dist/esm/packages/taco/src/components/Table3/components/toolbar/PrintButton/hooks/useParentStylesheets.js.map +1 -1
  34. package/dist/esm/packages/taco/src/components/Table3/components/toolbar/Search.js +7 -4
  35. package/dist/esm/packages/taco/src/components/Table3/components/toolbar/Search.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 +82 -46
  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 +7143 -7308
@@ -1 +1 @@
1
- {"version":3,"file":"Context.js","sources":["../../../../../../../../src/components/Select2/components/Context.tsx"],"sourcesContent":["import React from 'react';\nimport { CollectionRef } from '../../../primitives/Collection/Collection';\nimport { Select2OptionValue, Select2Value } from '../types';\nimport { Select2OptionProps } from './Option';\nimport { Color } from '../../../types';\n\nexport type Select2ContextProps = {\n disabled: boolean;\n highlighted: boolean;\n invalid: boolean;\n listboxRef: React.RefObject<CollectionRef>;\n multiple: boolean;\n onCreate?: (text: string, color: Color | undefined) => Promise<Select2OptionProps>;\n onDelete?: (value: Select2OptionValue) => Promise<void>;\n onEdit?: (value: Select2OptionValue, text: string, color: Color | undefined) => Promise<void>;\n open: boolean;\n readOnly: boolean;\n ref: React.RefObject<HTMLButtonElement>;\n searchQuery: string;\n searchRef?: React.RefObject<HTMLInputElement>;\n setOpen: (open: boolean) => void;\n setSearchQuery: (value: string) => void;\n setValidationError: (error: Error | undefined) => void;\n setValue: (value: Select2OptionValue) => void;\n shouldPauseHoverState: boolean;\n setShouldPauseHoverState: (pause: boolean) => void;\n tags?: boolean;\n validationError?: Error;\n value?: Select2Value;\n};\n\nexport const Select2Context = React.createContext({} as Select2ContextProps);\nexport const useSelect2Context = () => React.useContext(Select2Context);\n"],"names":["Select2Context","React","createContext","useSelect2Context","useContext"],"mappings":";;MA+BaA,cAAc,gBAAGC,cAAK,CAACC,aAAa,CAAC,EAAyB;MAC9DC,iBAAiB,GAAGA,MAAMF,cAAK,CAACG,UAAU,CAACJ,cAAc;;;;"}
1
+ {"version":3,"file":"Context.js","sources":["../../../../../../../../src/components/Select2/components/Context.tsx"],"sourcesContent":["import React from 'react';\nimport { CollectionRef } from '../../../primitives/Collection/Collection';\nimport { Select2CreateHandler, Select2DeleteHandler, Select2EditHandler, Select2OptionValue, Select2Value } from '../types';\n\nexport type Select2ContextProps = {\n disabled: boolean;\n highlighted: boolean;\n invalid: boolean;\n listboxRef: React.RefObject<CollectionRef>;\n multiple: boolean;\n onCreate?: Select2CreateHandler;\n onDelete?: Select2DeleteHandler;\n onEdit?: Select2EditHandler;\n open: boolean;\n readOnly: boolean;\n ref: React.RefObject<HTMLButtonElement>;\n searchQuery: string;\n searchRef?: React.RefObject<HTMLInputElement>;\n setOpen: (open: boolean) => void;\n setSearchQuery: (value: string) => void;\n setValidationError: (error: Error | undefined) => void;\n setValue: (value: Select2OptionValue) => void;\n shouldPauseHoverState: boolean;\n setShouldPauseHoverState: (pause: boolean) => void;\n tags?: boolean;\n validationError?: Error;\n value?: Select2Value;\n};\n\nexport const Select2Context = React.createContext({} as Select2ContextProps);\nexport const useSelect2Context = () => React.useContext(Select2Context);\n"],"names":["Select2Context","React","createContext","useSelect2Context","useContext"],"mappings":";;MA6BaA,cAAc,gBAAGC,cAAK,CAACC,aAAa,CAAC,EAAyB;MAC9DC,iBAAiB,GAAGA,MAAMF,cAAK,CAACG,UAAU,CAACJ,cAAc;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"Create.js","sources":["../../../../../../../../src/components/Select2/components/Create.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { isAriaSelectionKey } from '../../../utils/aria';\nimport { Tag } from '../../Tag/Tag';\nimport { createOptionClassName } from '../utilities';\nimport { useSelect2Context } from './Context';\nimport { Select2OptionProps } from './Option';\nimport { useLocalization } from '../../Provider/Localization';\nimport { Color } from '../../../types';\nimport { AVAILABLE_COLORS } from '../../../utils/tailwind';\n\nexport type CreateProps = {\n onCreate: (name: string, color: Color | undefined) => Promise<Select2OptionProps>;\n options: React.ReactElement<Select2OptionProps>[];\n};\n\nexport const getNextColor = (options: React.ReactElement<Select2OptionProps>[]): Color | undefined => {\n let occurrences = {};\n AVAILABLE_COLORS.filter(color => color !== 'transparent').forEach((color: Color) => {\n occurrences = { ...occurrences, [color]: 0 };\n });\n\n options.reduce((occurrences, option) => {\n if (option.props.color) {\n occurrences[option.props.color] = occurrences[option.props.color] ? occurrences[option.props.color] + 1 : 1;\n }\n return occurrences;\n }, occurrences);\n\n const colors = Object.keys(occurrences);\n\n if (colors.length) {\n return colors.sort((a, b) => occurrences[a] - occurrences[b])[0] as Color;\n }\n\n return undefined;\n};\n\nexport const Create = (props: CreateProps) => {\n const { onCreate: handleCreate, options } = props;\n const { multiple, searchQuery, setOpen, setSearchQuery, setValidationError, setValue } = useSelect2Context();\n const { texts } = useLocalization();\n\n // determine what the next color tag should be based on color occurences\n const nextColor = React.useMemo(() => getNextColor(options), [options]);\n\n if (!searchQuery) {\n return null;\n }\n\n const handleClick = async () => {\n try {\n const item = await handleCreate(searchQuery, nextColor);\n setValue(item.value);\n\n if (multiple) {\n setSearchQuery('');\n } else {\n setOpen(false);\n }\n } catch (error) {\n setValidationError(error as Error);\n }\n };\n\n const handleKeyDown = event => {\n if (isAriaSelectionKey(event)) {\n event.currentTarget.click();\n }\n };\n\n const className = cn('!w-[calc(100%_-_theme(spacing.3))] ml-1.5', createOptionClassName());\n return (\n <button className={className} onClick={handleClick} onKeyDown={handleKeyDown}>\n <span className=\"flex items-center gap-1.5\">\n {texts.select2.create}\n <Tag color={nextColor} className=\"cursor-pointer\">\n {searchQuery}\n </Tag>\n </span>\n </button>\n );\n};\n"],"names":["getNextColor","options","occurrences","AVAILABLE_COLORS","filter","color","forEach","reduce","option","props","colors","Object","keys","length","sort","a","b","undefined","Create","onCreate","handleCreate","multiple","searchQuery","setOpen","setSearchQuery","setValidationError","setValue","useSelect2Context","texts","useLocalization","nextColor","React","useMemo","handleClick","Promise","resolve","then","item","value","error","_temp","e","reject","handleKeyDown","event","isAriaSelectionKey","currentTarget","click","className","cn","createOptionClassName","onClick","onKeyDown","select2","create","Tag"],"mappings":";;;;;;;;;;MAgBaA,YAAY,GAAIC,OAAiD;EAC1E,IAAIC,WAAW,GAAG,EAAE;EACpBC,gBAAgB,CAACC,MAAM,CAACC,KAAK,IAAIA,KAAK,KAAK,aAAa,CAAC,CAACC,OAAO,CAAED,KAAY;IAC3EH,WAAW,GAAG;MAAE,GAAGA,WAAW;MAAE,CAACG,KAAK,GAAG;KAAG;GAC/C,CAAC;EAEFJ,OAAO,CAACM,MAAM,CAAC,CAACL,WAAW,EAAEM,MAAM;IAC/B,IAAIA,MAAM,CAACC,KAAK,CAACJ,KAAK,EAAE;MACpBH,WAAW,CAACM,MAAM,CAACC,KAAK,CAACJ,KAAK,CAAC,GAAGH,WAAW,CAACM,MAAM,CAACC,KAAK,CAACJ,KAAK,CAAC,GAAGH,WAAW,CAACM,MAAM,CAACC,KAAK,CAACJ,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC;;IAE/G,OAAOH,WAAW;GACrB,EAAEA,WAAW,CAAC;EAEf,MAAMQ,MAAM,GAAGC,MAAM,CAACC,IAAI,CAACV,WAAW,CAAC;EAEvC,IAAIQ,MAAM,CAACG,MAAM,EAAE;IACf,OAAOH,MAAM,CAACI,IAAI,CAAC,CAACC,CAAC,EAAEC,CAAC,KAAKd,WAAW,CAACa,CAAC,CAAC,GAAGb,WAAW,CAACc,CAAC,CAAC,CAAC,CAAC,CAAC,CAAU;;EAG7E,OAAOC,SAAS;AACpB;MAEaC,MAAM,GAAIT,KAAkB;EACrC,MAAM;IAAEU,QAAQ,EAAEC,YAAY;IAAEnB;GAAS,GAAGQ,KAAK;EACjD,MAAM;IAAEY,QAAQ;IAAEC,WAAW;IAAEC,OAAO;IAAEC,cAAc;IAAEC,kBAAkB;IAAEC;GAAU,GAAGC,iBAAiB,EAAE;EAC5G,MAAM;IAAEC;GAAO,GAAGC,eAAe,EAAE;;EAGnC,MAAMC,SAAS,GAAGC,cAAK,CAACC,OAAO,CAAC,MAAMhC,YAAY,CAACC,OAAO,CAAC,EAAE,CAACA,OAAO,CAAC,CAAC;EAEvE,IAAI,CAACqB,WAAW,EAAE;IACd,OAAO,IAAI;;EAGf,MAAMW,WAAW;IAAA;uCACT;QAAA,OAAAC,OAAA,CAAAC,OAAA,CACmBf,YAAY,CAACE,WAAW,EAAEQ,SAAS,CAAC,EAAAM,IAAA,WAAjDC,IAAI;UACVX,QAAQ,CAACW,IAAI,CAACC,KAAK,CAAC;UAAC,IAEjBjB,QAAQ;YACRG,cAAc,CAAC,EAAE,CAAC;;YAElBD,OAAO,CAAC,KAAK,CAAC;;;OAErB,YAAQgB,KAAK,EAAE;QACZd,kBAAkB,CAACc,KAAc,CAAC;OACrC;MAAA,OAAAL,OAAA,CAAAC,OAAA,CAAAK,KAAA,IAAAA,KAAA,CAAAJ,IAAA,GAAAI,KAAA,CAAAJ,IAAA;KACJ,QAAAK,CAAA;MAAA,OAAAP,OAAA,CAAAQ,MAAA,CAAAD,CAAA;;;EAED,MAAME,aAAa,GAAGC,KAAK;IACvB,IAAIC,kBAAkB,CAACD,KAAK,CAAC,EAAE;MAC3BA,KAAK,CAACE,aAAa,CAACC,KAAK,EAAE;;GAElC;EAED,MAAMC,SAAS,GAAGC,EAAE,CAAC,2CAA2C,EAAEC,qBAAqB,EAAE,CAAC;EAC1F,oBACInB;IAAQiB,SAAS,EAAEA,SAAS;IAAEG,OAAO,EAAElB,WAAW;IAAEmB,SAAS,EAAET;kBAC3DZ;IAAMiB,SAAS,EAAC;KACXpB,KAAK,CAACyB,OAAO,CAACC,MAAM,eACrBvB,6BAACwB,GAAG;IAAClD,KAAK,EAAEyB,SAAS;IAAEkB,SAAS,EAAC;KAC5B1B,WAAW,CACV,CACH,CACF;AAEjB;;;;"}
1
+ {"version":3,"file":"Create.js","sources":["../../../../../../../../src/components/Select2/components/Create.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { isAriaSelectionKey } from '../../../utils/aria';\nimport { Tag } from '../../Tag/Tag';\nimport { createOptionClassName } from '../utilities';\nimport { useSelect2Context } from './Context';\nimport { Select2OptionProps } from './Option';\nimport { useLocalization } from '../../Provider/Localization';\nimport { Color } from '../../../types';\nimport { AVAILABLE_COLORS } from '../../../utils/tailwind';\nimport { Select2CreateHandler } from '../types';\n\nexport type CreateProps = {\n onCreate: Select2CreateHandler;\n options: React.ReactElement<Select2OptionProps>[];\n};\n\nexport const getNextColor = (options: React.ReactElement<Select2OptionProps>[]): Color | undefined => {\n let occurrences = {};\n AVAILABLE_COLORS.filter(color => color !== 'transparent').forEach((color: Color) => {\n occurrences = { ...occurrences, [color]: 0 };\n });\n\n options.reduce((occurrences, option) => {\n if (option.props.color) {\n occurrences[option.props.color] = occurrences[option.props.color] ? occurrences[option.props.color] + 1 : 1;\n }\n return occurrences;\n }, occurrences);\n\n const colors = Object.keys(occurrences);\n\n if (colors.length) {\n return colors.sort((a, b) => occurrences[a] - occurrences[b])[0] as Color;\n }\n\n return undefined;\n};\n\nexport const Create = (props: CreateProps) => {\n const { onCreate: handleCreate, options } = props;\n const { multiple, searchQuery, setOpen, setSearchQuery, setValidationError, setValue } = useSelect2Context();\n const { texts } = useLocalization();\n\n // determine what the next color tag should be based on color occurences\n const nextColor = React.useMemo(() => getNextColor(options), [options]);\n\n if (!searchQuery) {\n return null;\n }\n\n const handleClick = async () => {\n try {\n const item = await handleCreate(searchQuery, nextColor);\n setValue(item.value);\n\n if (multiple) {\n setSearchQuery('');\n } else {\n setOpen(false);\n }\n } catch (error) {\n setValidationError(error as Error);\n }\n };\n\n const handleKeyDown = event => {\n if (isAriaSelectionKey(event)) {\n event.currentTarget.click();\n }\n };\n\n const className = cn('!w-[calc(100%_-_theme(spacing.3))] ml-1.5', createOptionClassName());\n return (\n <button className={className} onClick={handleClick} onKeyDown={handleKeyDown}>\n <span className=\"flex items-center gap-1.5\">\n {texts.select2.create}\n <Tag color={nextColor} className=\"cursor-pointer\">\n {searchQuery}\n </Tag>\n </span>\n </button>\n );\n};\n"],"names":["getNextColor","options","occurrences","AVAILABLE_COLORS","filter","color","forEach","reduce","option","props","colors","Object","keys","length","sort","a","b","undefined","Create","onCreate","handleCreate","multiple","searchQuery","setOpen","setSearchQuery","setValidationError","setValue","useSelect2Context","texts","useLocalization","nextColor","React","useMemo","handleClick","Promise","resolve","then","item","value","error","_temp","e","reject","handleKeyDown","event","isAriaSelectionKey","currentTarget","click","className","cn","createOptionClassName","onClick","onKeyDown","select2","create","Tag"],"mappings":";;;;;;;;;;MAiBaA,YAAY,GAAIC,OAAiD;EAC1E,IAAIC,WAAW,GAAG,EAAE;EACpBC,gBAAgB,CAACC,MAAM,CAACC,KAAK,IAAIA,KAAK,KAAK,aAAa,CAAC,CAACC,OAAO,CAAED,KAAY;IAC3EH,WAAW,GAAG;MAAE,GAAGA,WAAW;MAAE,CAACG,KAAK,GAAG;KAAG;GAC/C,CAAC;EAEFJ,OAAO,CAACM,MAAM,CAAC,CAACL,WAAW,EAAEM,MAAM;IAC/B,IAAIA,MAAM,CAACC,KAAK,CAACJ,KAAK,EAAE;MACpBH,WAAW,CAACM,MAAM,CAACC,KAAK,CAACJ,KAAK,CAAC,GAAGH,WAAW,CAACM,MAAM,CAACC,KAAK,CAACJ,KAAK,CAAC,GAAGH,WAAW,CAACM,MAAM,CAACC,KAAK,CAACJ,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC;;IAE/G,OAAOH,WAAW;GACrB,EAAEA,WAAW,CAAC;EAEf,MAAMQ,MAAM,GAAGC,MAAM,CAACC,IAAI,CAACV,WAAW,CAAC;EAEvC,IAAIQ,MAAM,CAACG,MAAM,EAAE;IACf,OAAOH,MAAM,CAACI,IAAI,CAAC,CAACC,CAAC,EAAEC,CAAC,KAAKd,WAAW,CAACa,CAAC,CAAC,GAAGb,WAAW,CAACc,CAAC,CAAC,CAAC,CAAC,CAAC,CAAU;;EAG7E,OAAOC,SAAS;AACpB;MAEaC,MAAM,GAAIT,KAAkB;EACrC,MAAM;IAAEU,QAAQ,EAAEC,YAAY;IAAEnB;GAAS,GAAGQ,KAAK;EACjD,MAAM;IAAEY,QAAQ;IAAEC,WAAW;IAAEC,OAAO;IAAEC,cAAc;IAAEC,kBAAkB;IAAEC;GAAU,GAAGC,iBAAiB,EAAE;EAC5G,MAAM;IAAEC;GAAO,GAAGC,eAAe,EAAE;;EAGnC,MAAMC,SAAS,GAAGC,cAAK,CAACC,OAAO,CAAC,MAAMhC,YAAY,CAACC,OAAO,CAAC,EAAE,CAACA,OAAO,CAAC,CAAC;EAEvE,IAAI,CAACqB,WAAW,EAAE;IACd,OAAO,IAAI;;EAGf,MAAMW,WAAW;IAAA;uCACT;QAAA,OAAAC,OAAA,CAAAC,OAAA,CACmBf,YAAY,CAACE,WAAW,EAAEQ,SAAS,CAAC,EAAAM,IAAA,WAAjDC,IAAI;UACVX,QAAQ,CAACW,IAAI,CAACC,KAAK,CAAC;UAAC,IAEjBjB,QAAQ;YACRG,cAAc,CAAC,EAAE,CAAC;;YAElBD,OAAO,CAAC,KAAK,CAAC;;;OAErB,YAAQgB,KAAK,EAAE;QACZd,kBAAkB,CAACc,KAAc,CAAC;OACrC;MAAA,OAAAL,OAAA,CAAAC,OAAA,CAAAK,KAAA,IAAAA,KAAA,CAAAJ,IAAA,GAAAI,KAAA,CAAAJ,IAAA;KACJ,QAAAK,CAAA;MAAA,OAAAP,OAAA,CAAAQ,MAAA,CAAAD,CAAA;;;EAED,MAAME,aAAa,GAAGC,KAAK;IACvB,IAAIC,kBAAkB,CAACD,KAAK,CAAC,EAAE;MAC3BA,KAAK,CAACE,aAAa,CAACC,KAAK,EAAE;;GAElC;EAED,MAAMC,SAAS,GAAGC,EAAE,CAAC,2CAA2C,EAAEC,qBAAqB,EAAE,CAAC;EAC1F,oBACInB;IAAQiB,SAAS,EAAEA,SAAS;IAAEG,OAAO,EAAElB,WAAW;IAAEmB,SAAS,EAAET;kBAC3DZ;IAAMiB,SAAS,EAAC;KACXpB,KAAK,CAACyB,OAAO,CAACC,MAAM,eACrBvB,6BAACwB,GAAG;IAAClD,KAAK,EAAEyB,SAAS;IAAEkB,SAAS,EAAC;KAC5B1B,WAAW,CACV,CACH,CACF;AAEjB;;;;"}
@@ -1,7 +1,6 @@
1
1
  import React__default from 'react';
2
2
  import cn from 'classnames';
3
3
  import { useMergedRef } from '../../hooks/useMergedRef.js';
4
- import { isEventTriggeredOnInteractiveElement } from '../../utils/keyboard.js';
5
4
  import { FocusScope } from '@react-aria/focus';
6
5
  import { flexRender } from '@tanstack/react-table';
7
6
  import { useCssGrid } from './hooks/useCssGrid.js';
@@ -46,11 +45,6 @@ const Table = /*#__PURE__*/fixedForwardRef(function Table3(props, ref) {
46
45
  const bodyRef = React__default.useRef(null);
47
46
  React__default.useEffect(() => {
48
47
  const handleKeyDown = event => {
49
- var _bodyRef$current;
50
- // prevent global shortcuts activating while active in other elements, like inputs or buttons
51
- if (isEventTriggeredOnInteractiveElement(event.target) && !(bodyRef !== null && bodyRef !== void 0 && (_bodyRef$current = bodyRef.current) !== null && _bodyRef$current !== void 0 && _bodyRef$current.contains(event.target))) {
52
- return;
53
- }
54
48
  tableMeta.hoverState.handleKeyDown(event);
55
49
  tableMeta.currentRow.handleKeyDown(event, table.getRowModel().rows.length, scrollToIndex);
56
50
  tableMeta.rowClick.handleKeyDown(event, table);
@@ -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 { isEventTriggeredOnInteractiveElement } from '../../utils/keyboard';\nimport { useCssVars } from './hooks/useCssVars';\nimport './style.css';\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 bodyRef = React.useRef<HTMLDivElement | null>(null);\n\n React.useEffect(\n () => {\n const handleKeyDown = (event: KeyboardEvent) => {\n // prevent global shortcuts activating while active in other elements, like inputs or buttons\n if (\n isEventTriggeredOnInteractiveElement(event.target) &&\n !bodyRef?.current?.contains(event.target as HTMLElement)\n ) {\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);\n };\n\n document.addEventListener('keydown', handleKeyDown);\n\n return () => {\n document.removeEventListener('keydown', handleKeyDown);\n };\n },\n // See https://github.com/e-conomic/taco/blob/dev/packages/taco/src/components/Table3/strategies/virtualised.tsx#L143\n // scrollToIndex function changes when row count changes, so it is important to update handlers with new\n // scrollToIndex function.\n [scrollToIndex]\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 '[&[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 onScroll={handleScroll}\n ref={internalRef}\n role=\"table\"\n style={style}>\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\" ref={bodyRef}>\n {renderBody()}\n </div>\n </FocusScope>\n {/* This div makes sure that there is always a free space between the rows and footer when \n table height exceeds the cumulative height of all rows. See useCSSGrid.ts */}\n <div className=\"border-grey-300 col-span-full -mt-px border-t\" />\n {tableMeta.enableFooter ? (\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 ) : null}\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 const stringifiedChildren = String(props.children);\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_' + stringifiedChildren), [stringifiedChildren]);\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 Table3SettingsHandler,\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","_internalRef$current","current","focus","renderBody","scrollToIndex","useTableRenderStrategy","tableMeta","options","meta","state","getState","bodyRef","useRef","handleKeyDown","event","isEventTriggeredOnInteractiveElement","target","_bodyRef$current","contains","hoverState","currentRow","getRowModel","rows","rowClick","rowSelection","editing","document","addEventListener","removeEventListener","handleBlur","handleScroll","columnFreezing","Promise","resolve","e","reject","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","onScroll","role","getHeaderGroups","map","headerGroup","key","headers","header","Fragment","flexRender","column","columnDef","getContext","FocusScope","enableFooter","getFooterGroups","footerGroup","footer","Summary","stringifiedChildren","String","children","useMemo"],"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';\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 bodyRef = React.useRef<HTMLDivElement | null>(null);\n\n React.useEffect(\n () => {\n const handleKeyDown = (event: KeyboardEvent) => {\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);\n };\n\n document.addEventListener('keydown', handleKeyDown);\n\n return () => {\n document.removeEventListener('keydown', handleKeyDown);\n };\n },\n // See https://github.com/e-conomic/taco/blob/dev/packages/taco/src/components/Table3/strategies/virtualised.tsx#L143\n // scrollToIndex function changes when row count changes, so it is important to update handlers with new\n // scrollToIndex function.\n [scrollToIndex]\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 '[&[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 onScroll={handleScroll}\n ref={internalRef}\n role=\"table\"\n style={style}>\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\" ref={bodyRef}>\n {renderBody()}\n </div>\n </FocusScope>\n {/* This div makes sure that there is always a free space between the rows and footer when\n table height exceeds the cumulative height of all rows. See useCSSGrid.ts */}\n <div className=\"border-grey-300 col-span-full -mt-px border-t\" />\n {tableMeta.enableFooter ? (\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 ) : null}\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 const stringifiedChildren = String(props.children);\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_' + stringifiedChildren), [stringifiedChildren]);\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 Table3SettingsHandler,\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","_internalRef$current","current","focus","renderBody","scrollToIndex","useTableRenderStrategy","tableMeta","options","meta","state","getState","bodyRef","useRef","handleKeyDown","event","hoverState","currentRow","getRowModel","rows","rowClick","rowSelection","editing","document","addEventListener","removeEventListener","handleBlur","handleScroll","columnFreezing","Promise","resolve","e","reject","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","onScroll","role","getHeaderGroups","map","headerGroup","key","headers","header","Fragment","flexRender","column","columnDef","getContext","FocusScope","enableFooter","getFooterGroups","footerGroup","footer","Summary","stringifiedChildren","String","children","useMemo"],"mappings":";;;;;;;;;;;;;;;AAgBA,SAASA,MAAMA,CAAkBC,CAA2B;EACxD,OAAO,IAAI;AACf;AAMA;MACaC,eAAe,GAAGC,cAAK,CAACC;AAErC,MAAMC,KAAK,gBAAGH,eAAe,CAAC,SAASI,MAAMA,CAAkBC,KAAyB,EAAEC,GAAyB;EAC/G,MAAM;IAAEC,UAAU,EAAEC,UAAU;IAAEC,WAAW;IAAEC;GAAc,GAAGL,KAAK;EACnE,MAAMM,WAAW,GAAGC,YAAY,CAAYN,GAAG,CAAC;EAEhD,MAAM;IAAEO,KAAK;IAAEC;GAAQ,GAAGC,QAAQ,CAAQV,KAAK,CAAC;EAChDW,wBAAwB,CAACH,KAAK,EAAEF,WAAW,CAAC;EAE5CV,cAAK,CAACgB,SAAS,CAAC;IACZ,IAAIZ,KAAK,CAACa,SAAS,EAAE;MAAA,IAAAC,oBAAA;MACjB,CAAAA,oBAAA,GAAAR,WAAW,CAACS,OAAO,cAAAD,oBAAA,uBAAnBA,oBAAA,CAAqBE,KAAK,EAAE;;GAEnC,EAAE,EAAE,CAAC;EAEN,MAAM;IAAEC,UAAU;IAAEC;GAAe,GAAGC,sBAAsB,CAAQnB,KAAK,EAAEQ,KAAK,EAAEF,WAAW,CAAC;EAC9F,MAAMc,SAAS,GAAGZ,KAAK,CAACa,OAAO,CAACC,IAAwB;EACxD,MAAMC,KAAK,GAAGf,KAAK,CAACgB,QAAQ,EAAE;EAE9B,MAAMC,OAAO,GAAG7B,cAAK,CAAC8B,MAAM,CAAwB,IAAI,CAAC;EAEzD9B,cAAK,CAACgB,SAAS,CACX;IACI,MAAMe,aAAa,GAAIC,KAAoB;MACvCR,SAAS,CAACS,UAAU,CAACF,aAAa,CAACC,KAAK,CAAC;MACzCR,SAAS,CAACU,UAAU,CAACH,aAAa,CAACC,KAAK,EAAEpB,KAAK,CAACuB,WAAW,EAAE,CAACC,IAAI,CAACvB,MAAM,EAAES,aAAa,CAAC;MACzFE,SAAS,CAACa,QAAQ,CAACN,aAAa,CAACC,KAAK,EAAEpB,KAAK,CAAC;MAC9CY,SAAS,CAACc,YAAY,CAACP,aAAa,CAACC,KAAK,EAAEpB,KAAK,CAAC;MAClDY,SAAS,CAACe,OAAO,CAACR,aAAa,CAACC,KAAK,CAAC;KACzC;IAEDQ,QAAQ,CAACC,gBAAgB,CAAC,SAAS,EAAEV,aAAa,CAAC;IAEnD,OAAO;MACHS,QAAQ,CAACE,mBAAmB,CAAC,SAAS,EAAEX,aAAa,CAAC;KACzD;GACJ;;;;EAID,CAACT,aAAa,CAAC,CAClB;EAED,MAAMqB,UAAU,GAAIX,KAAuB;IACvCR,SAAS,CAACe,OAAO,CAACI,UAAU,CAACX,KAAK,CAAC;GACtC;EAED,MAAMY,YAAY,aAAUZ,KAAuC;IAAA;MAC/DR,SAAS,CAACqB,cAAc,CAACD,YAAY,CAACZ,KAAK,CAAC;MAAC,OAAAc,OAAA,CAAAC,OAAA;KAChD,QAAAC,CAAA;MAAA,OAAAF,OAAA,CAAAG,MAAA,CAAAD,CAAA;;;EAED,MAAME,SAAS,GAAGC,EAAE,CAChB,8GAA8G,EAC9G,uCAAuC,EACvC;IACI,SAAS,EAAE3B,SAAS,CAAC4B,QAAQ,CAACC,IAAI,KAAK,OAAO;IAC9C,SAAS,EAAE7B,SAAS,CAAC4B,QAAQ,CAACC,IAAI,KAAK,QAAQ;IAC/C,WAAW,EAAE7B,SAAS,CAAC4B,QAAQ,CAACC,IAAI,KAAK;GAC5C,CACJ;EAED,MAAM;IAAEC,KAAK,EAAEC;GAAc,GAAGC,UAAU,CAAQ5C,KAAK,CAAC;EACxD,MAAM;IAAE0C,KAAK,EAAEG;GAAS,GAAGC,UAAU,CAAClC,SAAS,CAACmC,SAAS,CAACC,MAAM,EAAEpC,SAAS,CAAC4B,QAAQ,CAACC,IAAI,CAAC;EAE1F,MAAMC,KAAK,GAAG;IACV,GAAGG,OAAO;IACV,GAAGF,YAAY;;;IAGfM,OAAO,EAAE;GACZ;EAED,MAAMC,mBAAmB,GAAGC,sBAAsB,CAAC3D,KAAK,CAAC4D,EAAE,EAAEpD,KAAK,CAAC;EACnE,MAAMqD,0BAA0B,GAAGzC,SAAS,CAAC0C,aAAa,IAAI9D,KAAK,CAACS,MAAM,KAAKsD,SAAS;EAExF,oBACInE,4DACK8D,mBAAmB,gBAAG9D;iBAAiB;KAAiC8D,mBAAmB,CAAS,GAAG,IAAI,eAC5G9D,6BAACoE,OAAO;IACJxD,KAAK,EAAEA,KAAK;IACZyD,UAAU,EAAEjE,KAAK;IACjBkE,KAAK,EAAEzD,MAAM;IACb0D,IAAI,EAAE/D,WAAW;IACjBgE,KAAK,EAAE/D,YAAY;IACnBa,aAAa,EAAEA;IACjB,eACFtB;IACIkD,SAAS,EAAEA,SAAS;IACpBc,EAAE,EAAE5D,KAAK,CAAC4D,EAAE;sBACIxC,SAAS,CAAC4B,QAAQ,CAACC,IAAI;oBACzB7B,SAAS,CAACe,OAAO,CAACkC,SAAS;kCACbjD,SAAS,CAACqB,cAAc,CAAC6B,oBAAoB;wBACvDlD,SAAS,aAATA,SAAS,uBAATA,SAAS,CAAES,UAAU,CAAC0C,QAAQ;qBACjC,CAAC,CAAChD,KAAK,CAACiD,gBAAgB,CAACC,gBAAgB;iBAC9C,QAAQ;IAClBC,MAAM,EAAEnC,UAAU;IAClBoC,QAAQ,EAAEnC,YAAY;IACtBvC,GAAG,EAAEK,WAAW;IAChBsE,IAAI,EAAC,OAAO;IACZ1B,KAAK,EAAEA;KACNW,0BAA0B,GAAG,IAAI,gBAC9BjE;IAAKkD,SAAS,EAAC,uBAAuB;iBAAW,eAAe;IAAC8B,IAAI,EAAC;KACjEpE,KAAK,CAACqE,eAAe,EAAE,CAACC,GAAG,CAACC,WAAW,iBACpCnF;IAAKkD,SAAS,EAAC,UAAU;IAACkC,GAAG,EAAED,WAAW,CAACnB,EAAE;IAAEgB,IAAI,EAAC;KAC/CG,WAAW,CAACE,OAAO,CAACH,GAAG,CAACI,MAAM,iBAC3BtF,6BAACA,cAAK,CAACuF,QAAQ;IAACH,GAAG,EAAEE,MAAM,CAACtB;KACvBwB,UAAU,CAACF,MAAM,CAACG,MAAM,CAACC,SAAS,CAACJ,MAAM,EAAE;IAAE,GAAGA,MAAM,CAACK,UAAU,EAAE;IAAErE;GAAe,CAAC,CAE7F,CAAC,CAET,CAAC,CAET,EACAV,KAAK,CAACuB,WAAW,EAAE,CAACC,IAAI,CAACvB,MAAM,gBAC5Bb,yEACIA,6BAAC4F,UAAU,qBACP5F;IAAKkD,SAAS,EAAC,qBAAqB;iBAAW,aAAa;IAAC8B,IAAI,EAAC,UAAU;IAAC3E,GAAG,EAAEwB;KAC7ER,UAAU,EAAE,CACX,CACG,eAGbrB;IAAKkD,SAAS,EAAC;IAAkD,EAChE1B,SAAS,CAACqE,YAAY,gBACnB7F;IAAKkD,SAAS,EAAC,uBAAuB;iBAAW,eAAe;IAAC8B,IAAI,EAAC;KACjEpE,KAAK,CAACkF,eAAe,EAAE,CAACZ,GAAG,CAACa,WAAW,iBACpC/F;IAAKkD,SAAS,EAAC,UAAU;IAACkC,GAAG,EAAEW,WAAW,CAAC/B,EAAE;IAAEgB,IAAI,EAAC;KAC/Ce,WAAW,CAACV,OAAO,CAACH,GAAG,CAACc,MAAM,iBAC3BhG,6BAACA,cAAK,CAACuF,QAAQ;IAACH,GAAG,EAAEY,MAAM,CAAChC;KACvBwB,UAAU,CAACQ,MAAM,CAACP,MAAM,CAACC,SAAS,CAACM,MAAM,EAAEA,MAAM,CAACL,UAAU,EAAE,CAAC,CAEvE,CAAC,CAET,CAAC,EACD9E,MAAM,gBAAGb,6BAACiG,OAAO;IAACpF,MAAM,EAAEA,MAAM;IAAED,KAAK,EAAEA;IAAS,GAAG,IAAI,CACxD,GACN,IAAI,CACT,gBAEHZ;IAAKkD,SAAS,EAAC;KAA0C3C,UAAU,gBAAGP,6BAACO,UAAU,OAAG,GAAG,IAAI,CAC9F,CACC,CACP;AAEX,CAAC,CAAC;MAMWJ,MAAM,gBAAGJ,eAAe,CAAC,SAASI,MAAMA,CAAkBC,KAAyB,EAAEC,GAAyB;EACvH,MAAM6F,mBAAmB,GAAGC,MAAM,CAAC/F,KAAK,CAACgG,QAAQ,CAAC;;;EAGlD,MAAMhB,GAAG,GAAGpF,cAAK,CAACqG,OAAO,CAAC,MAAMF,MAAM,CAAC,WAAW,GAAGD,mBAAmB,CAAC,EAAE,CAACA,mBAAmB,CAAC,CAAC;EACjG,oBAAOlG,6BAACE,KAAK,oBAAYE,KAAK;IAAEgF,GAAG,EAAEA,GAAG;IAAE/E,GAAG,EAAEA;KAAO;AAC1D,CAAC;AACDF,MAAM,CAACN,MAAM,GAAGA,MAAM;;;;"}
@@ -39,7 +39,7 @@ function DisplayCell(props) {
39
39
  index,
40
40
  tableRef
41
41
  };
42
- }, [row.original, props.children, value]);
42
+ }, [row.original, props.children, value, tableMeta.columnFreezing.frozenColumnIndex]);
43
43
  const memoedHighlight = React__default.useMemo(() => {
44
44
  var _tableMeta$search$que;
45
45
  if (!tableMeta.search.isHighlightingEnabled || !columnMeta.enableSearch) {
@@ -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 || !columnMeta.enableSearch) {\n return false;\n }\n\n if (tableMeta.search.query?.length) {\n return isCellHighlighted(tableMeta.search.query, value, columnMeta.dataType);\n }\n\n return false;\n }, [value, tableMeta.search.isHighlightingEnabled, tableMeta.search.excludeUnmatchedResults, 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 ? <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","_ref","_ref2","_props$children","_columnMeta$renderer","renderer","call","original","cn","data","debug","debugAll","enableTruncate","frozenColumnIndex","columnFreezing","id","memoedHighlight","search","isHighlightingEnabled","enableSearch","_tableMeta$search$que","query","length","isCellHighlighted","dataType","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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"}
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, tableMeta.columnFreezing.frozenColumnIndex]);\n\n const memoedHighlight = React.useMemo(() => {\n if (!tableMeta.search.isHighlightingEnabled || !columnMeta.enableSearch) {\n return false;\n }\n\n if (tableMeta.search.query?.length) {\n return isCellHighlighted(tableMeta.search.query, value, columnMeta.dataType);\n }\n\n return false;\n }, [value, tableMeta.search.isHighlightingEnabled, tableMeta.search.excludeUnmatchedResults, 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 ? <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","_ref","_ref2","_props$children","_columnMeta$renderer","renderer","call","original","cn","data","debug","debugAll","enableTruncate","frozenColumnIndex","columnFreezing","id","memoedHighlight","search","isHighlightingEnabled","enableSearch","_tableMeta$search$que","query","length","isCellHighlighted","dataType","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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"}
@@ -100,7 +100,7 @@ const MemoedEditingCell = /*#__PURE__*/React__default.memo(function MemoedEditin
100
100
  return removeMoveReason;
101
101
  }, [value]);
102
102
  const controlRenderer = (_column$columnDef$met = column.columnDef.meta) === null || _column$columnDef$met === void 0 ? void 0 : _column$columnDef$met.control;
103
- const className = cn('!px-2 py-[var(--table3-row-padding)]', {
103
+ const className = cn('!px-[0.4375rem] py-[calc(var(--table3-row-padding)_-_0.06rem)]', {
104
104
  relative: (isCurrentRow || isHovered) && controlRenderer === 'textarea',
105
105
  // Need to set higher z-index, so that the current row textarea (in expanded state) overlaps rows below
106
106
  'z-10': isCurrentRow,
@@ -120,6 +120,7 @@ const MemoedEditingCell = /*#__PURE__*/React__default.memo(function MemoedEditin
120
120
  validationErrors: []
121
121
  }), /*#__PURE__*/React__default.createElement("div", {
122
122
  className: className,
123
+ "data-align": columnMeta.align,
123
124
  "data-column-index": index,
124
125
  role: "cell",
125
126
  ref: cellRef
@@ -1 +1 @@
1
- {"version":3,"file":"EditingCell.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/cell/EditingCell.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport _ from 'lodash';\nimport { TableMeta, CellContext, ColumnMeta, Cell as RTCell, Table as RTTable } from '@tanstack/react-table';\nimport { Indicator, IndicatorReason } from './Indicator';\nimport { columnFilterFn, globalFilterFn } from '../../../util/filtering';\nimport { Table3FilterValue } from '../../../types';\nimport { hasChanged, willRowMoveAfterSorting } from '../../../util/editing';\nimport { getCurrentRowCellElement } from '../../../util/columns';\nimport { EDITING_ACTIONS_WIDTH } from '../internal/EditingActions';\nimport { EditingControl } from './EditingControl';\nimport { useRowContext } from '../../rows/RowContext';\n\nexport type EditingCellProps<TType = unknown> = CellContext<TType, unknown> & {\n children?: string | JSX.Element;\n};\n\nexport function EditingCell<TType = unknown>(props: EditingCellProps<TType>) {\n const { isHovered } = useRowContext();\n // Need to explicitly pass tableMeta, because just passing the table object will not trigger editing change since table object is not mutatable.\n const tableMeta = props.table.options.meta as TableMeta<TType>;\n return <MemoedEditingCell<TType> {...props} isHovered={isHovered} tableMeta={tableMeta} />;\n}\n\n// Memoization\nexport type MemoedEditingCellProps<TType = unknown> = EditingCellProps<TType> & {\n isHovered: boolean;\n tableMeta: TableMeta<TType>;\n};\n\nconst MemoedEditingCell = React.memo(function MemoedEditingCell<TType = unknown>(props: MemoedEditingCellProps<TType>) {\n const { cell, column, index, getValue, table, tableRef, row, isHovered, tableMeta } = props;\n const columnMeta = column.columnDef.meta as ColumnMeta<TType, unknown>;\n\n const cellRef = React.useRef<HTMLDivElement>(null);\n const controlRef = React.useRef<HTMLElement>(null);\n\n const handleChange = (value: unknown) => tableMeta.editing.setCellValue(cell, value);\n const value = tableMeta.editing.getCellValue(cell) ?? getValue();\n\n const handleFocus = event => {\n // Check if cell is hidden behind pinned columns or edititng actions, and scroll to it.\n const frozenColumnIndex = tableMeta.columnFreezing.frozenColumnIndex;\n const tableElement = tableRef.current;\n\n if (tableElement && frozenColumnIndex !== undefined && index > frozenColumnIndex) {\n const lastFrozenColumnElement = getCurrentRowCellElement(frozenColumnIndex, tableElement);\n const cellRect = cellRef.current?.getBoundingClientRect();\n const lastFrozenRect = lastFrozenColumnElement?.getBoundingClientRect();\n const tableRect = tableElement.getBoundingClientRect();\n\n // Check for pinned columns overlap\n if (cellRect && lastFrozenRect && cellRect.left < lastFrozenRect.left + lastFrozenRect.width) {\n const pinnedColumnsWidth = lastFrozenRect.left + lastFrozenRect.width;\n tableElement.scrollTo(cellRect.left - pinnedColumnsWidth, tableElement.scrollTop);\n // Check for editing actions overlap\n } else if (cellRect && tableRect && cellRect.right > tableRect.right - EDITING_ACTIONS_WIDTH) {\n const spaceBetweenCellAndEditingActions = 10;\n tableElement.scrollTo(\n // Need to take into account if table has been already scrolled.\n tableElement.scrollLeft + EDITING_ACTIONS_WIDTH + spaceBetweenCellAndEditingActions,\n tableElement.scrollTop\n );\n }\n }\n\n if (event.target?.select) {\n requestAnimationFrame(() => {\n event.target.select();\n });\n }\n };\n\n const handleBlur = () => {\n tableMeta.editing.setDetailModeEditing(false);\n };\n\n // row move indicator\n const moveReason = tableMeta.editing.rowMoveReason[cell.column.id] ?? null;\n const rows = table.getRowModel().rows;\n const isCurrentRow = rows[tableMeta.currentRow.currentRowIndex]?.id === row.id;\n const mountNode = React.useMemo(() => {\n if (moveReason) {\n return cellRef.current?.parentElement?.firstChild as Element | null;\n }\n return null;\n }, [moveReason, cellRef]);\n\n const removeMoveReason = () => {\n tableMeta.editing.removeRowMoveReason(cell.column.id);\n };\n\n React.useEffect(() => {\n // To avoid reseting move reason on another row hover,\n // we need to check for changes only if value got changed in the current row.\n if (!isCurrentRow) {\n return;\n }\n\n if (hasChanged(getValue(), value)) {\n const moveReason = getRowMoveReason(table, row.index, row.original, cell, value);\n tableMeta.editing.setRowMoveReason({ [cell.column.id]: moveReason });\n } else {\n removeMoveReason();\n }\n return removeMoveReason;\n }, [value]);\n\n const controlRenderer = column.columnDef.meta?.control;\n\n const className = cn(\n '!px-2 py-[var(--table3-row-padding)]',\n {\n relative: (isCurrentRow || isHovered) && controlRenderer === 'textarea',\n // Need to set higher z-index, so that the current row textarea (in expanded state) overlaps rows below\n 'z-10': isCurrentRow,\n // When row is hovered and located below, then the hovered textarea overlaps the current row textarea(if the current row textarea is expanded to support multiple lines),\n // as result we need to set lower z-index for the hovered row -> cell.\n 'z-0': isHovered,\n },\n\n // component overrides - grayscale for editing hover\n '[[role=\"row\"][data-current=\"false\"]:hover_&>*]:!grayscale [[role=\"row\"][data-current=\"false\"]:hover_&_.bg-white]:!bg-grey-100',\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\n return (\n <>\n {moveReason !== null && mountNode && (\n <Indicator\n reason={moveReason}\n columnName={String(cell.column.columnDef.header)}\n mountNode={mountNode}\n validationErrors={[]}\n />\n )}\n <div className={className} data-column-index={index} role=\"cell\" ref={cellRef}>\n <EditingControl\n align={columnMeta.align}\n column={cell.column}\n data={cell.row.original}\n initialValue={getValue()}\n onBlur={handleBlur}\n onFocus={handleFocus}\n onChange={handleChange}\n ref={controlRef}\n table={table}\n tableRef={tableRef}\n value={value}\n cell={cell}\n isCurrentRow={isCurrentRow}\n />\n </div>\n </>\n );\n}) as <TType = unknown>(props: MemoedEditingCellProps<TType>) => JSX.Element;\n\nfunction getRowMoveReason<TType>(\n table: RTTable<any>,\n rowIndex: number,\n rowValues: TType,\n cell: RTCell<any, unknown>,\n newValue: any\n) {\n let rowMoveReason: IndicatorReason | null = null;\n const { globalFilter } = table.getState();\n\n const isFilteredByGlobalFilter = Object.values<unknown>({ ...rowValues, [cell.id]: newValue }).some(cellValue =>\n // Global filter can be undefined when there is no text being searched so we pass an empty string to\n // globalFilterFn as query in that case.\n globalFilterFn(String(cellValue), globalFilter ? String(globalFilter) : '')\n );\n\n if (!isFilteredByGlobalFilter) {\n rowMoveReason = IndicatorReason.SEARCH;\n } else if (cell.column.getIsFiltered() && !columnFilterFn(newValue, cell.column.getFilterValue() as Table3FilterValue)) {\n rowMoveReason = IndicatorReason.FILTER;\n } else if (\n !rowMoveReason &&\n cell.column.getIsSorted() &&\n willRowMoveAfterSorting(\n newValue,\n cell,\n rowIndex,\n table.getRowModel().rows,\n !!table.getState().sorting.find(s => s.id === cell.column.id)?.desc\n )\n ) {\n rowMoveReason = IndicatorReason.SORTING;\n }\n\n return rowMoveReason;\n}\n"],"names":["EditingCell","props","isHovered","useRowContext","tableMeta","table","options","meta","React","MemoedEditingCell","memo","cell","column","index","getValue","tableRef","row","columnMeta","columnDef","cellRef","useRef","controlRef","handleChange","value","editing","setCellValue","_tableMeta$editing$ge","getCellValue","handleFocus","event","frozenColumnIndex","columnFreezing","tableElement","current","undefined","_cellRef$current","lastFrozenColumnElement","getCurrentRowCellElement","cellRect","getBoundingClientRect","lastFrozenRect","tableRect","left","width","pinnedColumnsWidth","scrollTo","scrollTop","right","EDITING_ACTIONS_WIDTH","spaceBetweenCellAndEditingActions","scrollLeft","_event$target","target","select","requestAnimationFrame","handleBlur","setDetailModeEditing","moveReason","_tableMeta$editing$ro","rowMoveReason","id","rows","getRowModel","isCurrentRow","_rows$tableMeta$curre","currentRow","currentRowIndex","mountNode","useMemo","_cellRef$current2","_cellRef$current2$par","parentElement","firstChild","removeMoveReason","removeRowMoveReason","useEffect","hasChanged","getRowMoveReason","original","setRowMoveReason","controlRenderer","_column$columnDef$met","control","className","cn","relative","Indicator","reason","columnName","String","header","validationErrors","role","ref","EditingControl","align","data","initialValue","onBlur","onFocus","onChange","rowIndex","rowValues","newValue","globalFilter","getState","isFilteredByGlobalFilter","Object","values","some","cellValue","globalFilterFn","IndicatorReason","SEARCH","getIsFiltered","columnFilterFn","getFilterValue","FILTER","getIsSorted","willRowMoveAfterSorting","_table$getState$sorti","sorting","find","s","desc","SORTING"],"mappings":"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"}
1
+ {"version":3,"file":"EditingCell.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/cell/EditingCell.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport _ from 'lodash';\nimport { TableMeta, CellContext, ColumnMeta, Cell as RTCell, Table as RTTable } from '@tanstack/react-table';\nimport { Indicator, IndicatorReason } from './Indicator';\nimport { columnFilterFn, globalFilterFn } from '../../../util/filtering';\nimport { Table3FilterValue } from '../../../types';\nimport { hasChanged, willRowMoveAfterSorting } from '../../../util/editing';\nimport { getCurrentRowCellElement } from '../../../util/columns';\nimport { EDITING_ACTIONS_WIDTH } from '../internal/EditingActions';\nimport { EditingControl } from './EditingControl';\nimport { useRowContext } from '../../rows/RowContext';\n\nexport type EditingCellProps<TType = unknown> = CellContext<TType, unknown> & {\n children?: string | JSX.Element;\n};\n\nexport function EditingCell<TType = unknown>(props: EditingCellProps<TType>) {\n const { isHovered } = useRowContext();\n // Need to explicitly pass tableMeta, because just passing the table object will not trigger editing change since table object is not mutatable.\n const tableMeta = props.table.options.meta as TableMeta<TType>;\n return <MemoedEditingCell<TType> {...props} isHovered={isHovered} tableMeta={tableMeta} />;\n}\n\n// Memoization\nexport type MemoedEditingCellProps<TType = unknown> = EditingCellProps<TType> & {\n isHovered: boolean;\n tableMeta: TableMeta<TType>;\n};\n\nconst MemoedEditingCell = React.memo(function MemoedEditingCell<TType = unknown>(props: MemoedEditingCellProps<TType>) {\n const { cell, column, index, getValue, table, tableRef, row, isHovered, tableMeta } = props;\n const columnMeta = column.columnDef.meta as ColumnMeta<TType, unknown>;\n\n const cellRef = React.useRef<HTMLDivElement>(null);\n const controlRef = React.useRef<HTMLElement>(null);\n\n const handleChange = (value: unknown) => tableMeta.editing.setCellValue(cell, value);\n const value = tableMeta.editing.getCellValue(cell) ?? getValue();\n\n const handleFocus = event => {\n // Check if cell is hidden behind pinned columns or edititng actions, and scroll to it.\n const frozenColumnIndex = tableMeta.columnFreezing.frozenColumnIndex;\n const tableElement = tableRef.current;\n\n if (tableElement && frozenColumnIndex !== undefined && index > frozenColumnIndex) {\n const lastFrozenColumnElement = getCurrentRowCellElement(frozenColumnIndex, tableElement);\n const cellRect = cellRef.current?.getBoundingClientRect();\n const lastFrozenRect = lastFrozenColumnElement?.getBoundingClientRect();\n const tableRect = tableElement.getBoundingClientRect();\n\n // Check for pinned columns overlap\n if (cellRect && lastFrozenRect && cellRect.left < lastFrozenRect.left + lastFrozenRect.width) {\n const pinnedColumnsWidth = lastFrozenRect.left + lastFrozenRect.width;\n tableElement.scrollTo(cellRect.left - pinnedColumnsWidth, tableElement.scrollTop);\n // Check for editing actions overlap\n } else if (cellRect && tableRect && cellRect.right > tableRect.right - EDITING_ACTIONS_WIDTH) {\n const spaceBetweenCellAndEditingActions = 10;\n tableElement.scrollTo(\n // Need to take into account if table has been already scrolled.\n tableElement.scrollLeft + EDITING_ACTIONS_WIDTH + spaceBetweenCellAndEditingActions,\n tableElement.scrollTop\n );\n }\n }\n\n if (event.target?.select) {\n requestAnimationFrame(() => {\n event.target.select();\n });\n }\n };\n\n const handleBlur = () => {\n tableMeta.editing.setDetailModeEditing(false);\n };\n\n // row move indicator\n const moveReason = tableMeta.editing.rowMoveReason[cell.column.id] ?? null;\n const rows = table.getRowModel().rows;\n const isCurrentRow = rows[tableMeta.currentRow.currentRowIndex]?.id === row.id;\n const mountNode = React.useMemo(() => {\n if (moveReason) {\n return cellRef.current?.parentElement?.firstChild as Element | null;\n }\n return null;\n }, [moveReason, cellRef]);\n\n const removeMoveReason = () => {\n tableMeta.editing.removeRowMoveReason(cell.column.id);\n };\n\n React.useEffect(() => {\n // To avoid reseting move reason on another row hover,\n // we need to check for changes only if value got changed in the current row.\n if (!isCurrentRow) {\n return;\n }\n\n if (hasChanged(getValue(), value)) {\n const moveReason = getRowMoveReason(table, row.index, row.original, cell, value);\n tableMeta.editing.setRowMoveReason({ [cell.column.id]: moveReason });\n } else {\n removeMoveReason();\n }\n return removeMoveReason;\n }, [value]);\n\n const controlRenderer = column.columnDef.meta?.control;\n\n const className = cn(\n '!px-[0.4375rem] py-[calc(var(--table3-row-padding)_-_0.06rem)]',\n {\n relative: (isCurrentRow || isHovered) && controlRenderer === 'textarea',\n // Need to set higher z-index, so that the current row textarea (in expanded state) overlaps rows below\n 'z-10': isCurrentRow,\n // When row is hovered and located below, then the hovered textarea overlaps the current row textarea(if the current row textarea is expanded to support multiple lines),\n // as result we need to set lower z-index for the hovered row -> cell.\n 'z-0': isHovered,\n },\n\n // component overrides - grayscale for editing hover\n '[[role=\"row\"][data-current=\"false\"]:hover_&>*]:!grayscale [[role=\"row\"][data-current=\"false\"]:hover_&_.bg-white]:!bg-grey-100',\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\n return (\n <>\n {moveReason !== null && mountNode && (\n <Indicator\n reason={moveReason}\n columnName={String(cell.column.columnDef.header)}\n mountNode={mountNode}\n validationErrors={[]}\n />\n )}\n <div className={className} data-align={columnMeta.align} data-column-index={index} role=\"cell\" ref={cellRef}>\n <EditingControl\n align={columnMeta.align}\n column={cell.column}\n data={cell.row.original}\n initialValue={getValue()}\n onBlur={handleBlur}\n onFocus={handleFocus}\n onChange={handleChange}\n ref={controlRef}\n table={table}\n tableRef={tableRef}\n value={value}\n cell={cell}\n isCurrentRow={isCurrentRow}\n />\n </div>\n </>\n );\n}) as <TType = unknown>(props: MemoedEditingCellProps<TType>) => JSX.Element;\n\nfunction getRowMoveReason<TType>(\n table: RTTable<any>,\n rowIndex: number,\n rowValues: TType,\n cell: RTCell<any, unknown>,\n newValue: any\n) {\n let rowMoveReason: IndicatorReason | null = null;\n const { globalFilter } = table.getState();\n\n const isFilteredByGlobalFilter = Object.values<unknown>({ ...rowValues, [cell.id]: newValue }).some(cellValue =>\n // Global filter can be undefined when there is no text being searched so we pass an empty string to\n // globalFilterFn as query in that case.\n globalFilterFn(String(cellValue), globalFilter ? String(globalFilter) : '')\n );\n\n if (!isFilteredByGlobalFilter) {\n rowMoveReason = IndicatorReason.SEARCH;\n } else if (cell.column.getIsFiltered() && !columnFilterFn(newValue, cell.column.getFilterValue() as Table3FilterValue)) {\n rowMoveReason = IndicatorReason.FILTER;\n } else if (\n !rowMoveReason &&\n cell.column.getIsSorted() &&\n willRowMoveAfterSorting(\n newValue,\n cell,\n rowIndex,\n table.getRowModel().rows,\n !!table.getState().sorting.find(s => s.id === cell.column.id)?.desc\n )\n ) {\n rowMoveReason = IndicatorReason.SORTING;\n }\n\n return rowMoveReason;\n}\n"],"names":["EditingCell","props","isHovered","useRowContext","tableMeta","table","options","meta","React","MemoedEditingCell","memo","cell","column","index","getValue","tableRef","row","columnMeta","columnDef","cellRef","useRef","controlRef","handleChange","value","editing","setCellValue","_tableMeta$editing$ge","getCellValue","handleFocus","event","frozenColumnIndex","columnFreezing","tableElement","current","undefined","_cellRef$current","lastFrozenColumnElement","getCurrentRowCellElement","cellRect","getBoundingClientRect","lastFrozenRect","tableRect","left","width","pinnedColumnsWidth","scrollTo","scrollTop","right","EDITING_ACTIONS_WIDTH","spaceBetweenCellAndEditingActions","scrollLeft","_event$target","target","select","requestAnimationFrame","handleBlur","setDetailModeEditing","moveReason","_tableMeta$editing$ro","rowMoveReason","id","rows","getRowModel","isCurrentRow","_rows$tableMeta$curre","currentRow","currentRowIndex","mountNode","useMemo","_cellRef$current2","_cellRef$current2$par","parentElement","firstChild","removeMoveReason","removeRowMoveReason","useEffect","hasChanged","getRowMoveReason","original","setRowMoveReason","controlRenderer","_column$columnDef$met","control","className","cn","relative","Indicator","reason","columnName","String","header","validationErrors","align","role","ref","EditingControl","data","initialValue","onBlur","onFocus","onChange","rowIndex","rowValues","newValue","globalFilter","getState","isFilteredByGlobalFilter","Object","values","some","cellValue","globalFilterFn","IndicatorReason","SEARCH","getIsFiltered","columnFilterFn","getFilterValue","FILTER","getIsSorted","willRowMoveAfterSorting","_table$getState$sorti","sorting","find","s","desc","SORTING"],"mappings":"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"}
@@ -8,7 +8,7 @@ import { Switch } from '../../../../Switch/Switch.js';
8
8
  import { getInputAppearanceClassnames, getCellAlignmentClasses } from '../styles.js';
9
9
  import _ from 'lodash-es';
10
10
  import { hasChanged } from '../../../util/editing.js';
11
- import { TextAreaControl } from './controls/TextAreaControl.js';
11
+ import { TextareaControl } from './controls/TextareaControl.js';
12
12
 
13
13
  const EditingControl = /*#__PURE__*/React__default.forwardRef(function Control(props, externalRef) {
14
14
  var _ref$current;
@@ -134,7 +134,7 @@ const EditingControl = /*#__PURE__*/React__default.forwardRef(function Control(p
134
134
  ref: refCallback
135
135
  }));
136
136
  } else if (controlRenderer === 'textarea') {
137
- return /*#__PURE__*/React__default.createElement(TextAreaControl, Object.assign({}, props, {
137
+ return /*#__PURE__*/React__default.createElement(TextareaControl, Object.assign({}, props, {
138
138
  isCellInDetailMode: isCellInDetailMode,
139
139
  onKeyDown: handleInputKeyDown,
140
140
  ref: refCallback
@@ -1 +1 @@
1
- {"version":3,"file":"EditingControl.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/cell/EditingControl.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { Cell as RTCell, Column as RTColumn, Table as RTTable, TableMeta } from '@tanstack/react-table';\nimport _ from 'lodash';\n\nimport { deselectInputValue } from '../../../../../utils/input';\nimport { hasChanged } from '../../../util/editing';\nimport { Datepicker } from '../../../../Datepicker/Datepicker';\nimport { Switch } from '../../../../Switch/Switch';\nimport { Input } from '../../../../Input/Input';\nimport { getCellAlignmentClasses, getInputAppearanceClassnames } from '../styles';\nimport { mergeRefs } from '../../../../../utils/mergeRefs';\nimport { Table3ColumnAlignment } from '../../../types';\nimport { TextAreaControl } from './controls/TextAreaControl';\n\nexport type EditingControlProps<TType = unknown> = {\n align?: Table3ColumnAlignment;\n column: RTColumn<TType, unknown>;\n data: TType;\n initialValue: any;\n value: any;\n onBlur: (event: React.FocusEvent) => void;\n onFocus: (event: React.FocusEvent) => void;\n onChange: (value: any) => void;\n ref: React.Ref<HTMLElement>;\n table: RTTable<TType>;\n tableRef: React.RefObject<HTMLDivElement>;\n cell: RTCell<TType, unknown>;\n error?: string;\n tabIndex?: number;\n isCurrentRow?: boolean;\n};\n\nexport const EditingControl = React.forwardRef<HTMLElement, any>(function Control<TType = unknown>(\n props: EditingControlProps<TType>,\n externalRef: React.Ref<HTMLElement>\n) {\n const {\n align,\n column,\n data,\n initialValue,\n onChange: handleChange,\n table,\n tableRef,\n value,\n cell,\n isCurrentRow,\n ...attributes\n } = props;\n\n const tableMeta = table.options.meta as TableMeta<unknown>;\n\n const ref = React.useRef<HTMLElement>();\n const refCallback = mergeRefs([ref, externalRef]);\n\n const columnMeta = column.columnDef.meta;\n const controlRenderer = columnMeta?.control;\n\n const isCellInDetailMode =\n tableMeta.editing.detailModeEditing && (ref as React.RefObject<HTMLElement>)?.current?.contains(document.activeElement);\n\n // Revert to initial value if escape was pressed\n const handleKeyDown = (event: React.KeyboardEvent) => {\n const target = event.target as HTMLInputElement;\n\n if (target.readOnly) {\n return;\n }\n\n // prevent row arrow shortcuts triggering when in detail mode\n if (tableMeta.editing.detailModeEditing && (event.key === 'ArrowUp' || event.key === 'ArrowDown')) {\n event.stopPropagation();\n }\n\n if (event.key === 'Escape') {\n event.preventDefault();\n\n if (tableMeta.editing.detailModeEditing) {\n tableMeta.editing.setDetailModeEditing(false);\n\n if (value !== initialValue) {\n // Before reseting to initial value, we need to check if edited row with cell initial value is the same as original row,\n // and in this case we need to completely remove row from editing state to avoid saving the same data as original.\n const changedRow: any = tableMeta.editing.changes ? tableMeta.editing.changes[cell.row.id] : {};\n const rowEdtitingDataWithInitialValue = { ...changedRow, [cell.column.id]: initialValue };\n if (_.isEqual(cell.row.original, rowEdtitingDataWithInitialValue)) {\n tableMeta.editing.resetChange(cell.row.id);\n } else {\n handleChange(initialValue);\n }\n }\n } else {\n tableMeta.editing.toggleEditing(false);\n tableRef.current?.focus();\n }\n\n return;\n }\n\n // Should enable/disable editing mode if Enter was clicked\n if (event.key === 'Enter') {\n event.preventDefault();\n\n if (!tableMeta.editing.detailModeEditing) {\n deselectInputValue(target);\n } else {\n target?.select?.();\n }\n\n // Ketydown \"Enter\" should toggle edititng mode\n tableMeta.editing.setDetailModeEditing(!tableMeta.editing.detailModeEditing);\n\n return;\n }\n };\n\n const isNumber = typeof value === 'number';\n const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n handleKeyDown(event);\n\n // Switching to editing mode, when key pressed any alphabetical character or number\n if (/^[a-z0-9]$/i.test(event.key)) {\n tableMeta.editing.setDetailModeEditing(true);\n return;\n }\n };\n\n const handleDatepickerChange = event => {\n // When datepicker looses focus, it triggers change event, even if date wasn't changed,\n // so adding additional check here to prevent adding change to the edititng state.\n const originalDate = cell.row.original[cell.column.id];\n const changedDate = (event as any).detail;\n if (hasChanged(originalDate, changedDate)) {\n handleChange(changedDate);\n }\n };\n\n if (typeof controlRenderer === 'function') {\n return controlRenderer(\n {\n ...attributes,\n ref: ref,\n setValue: nextValue => {\n if (nextValue !== value) {\n handleChange(nextValue);\n }\n },\n value,\n },\n data\n );\n } else if (controlRenderer === 'datepicker') {\n const handleDatepickerKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n handleKeyDown(event);\n\n if (/^[a-z0-9]$/i.test(event.key)) {\n tableMeta.editing.setDetailModeEditing(true);\n return;\n }\n };\n\n return (\n <Datepicker\n {...attributes}\n className={cn({\n '[&_input]:!yt-focus-dark': isCellInDetailMode,\n })}\n onChange={handleDatepickerChange}\n onKeyDown={handleDatepickerKeyDown}\n ref={refCallback}\n value={value as Date}\n />\n );\n } else if (controlRenderer === 'switch') {\n return (\n <Switch {...attributes} className=\"mx-2 mt-1.5\" checked={Boolean(value)} onChange={handleChange} ref={refCallback} />\n );\n } else if (controlRenderer === 'textarea') {\n return (\n <TextAreaControl\n {...props}\n isCellInDetailMode={isCellInDetailMode}\n onKeyDown={handleInputKeyDown}\n ref={refCallback}\n />\n );\n }\n\n return (\n <Input\n {...attributes}\n className={cn(getInputAppearanceClassnames(), getCellAlignmentClasses(align), {\n '!yt-focus-dark': isCellInDetailMode,\n })}\n onChange={event => {\n handleChange(event.target.value);\n }}\n onKeyDown={handleInputKeyDown}\n ref={refCallback}\n type={isNumber ? 'number' : undefined}\n value={isNumber ? value : String(value ?? '')}\n />\n );\n});\n"],"names":["EditingControl","React","forwardRef","Control","props","externalRef","align","column","data","initialValue","onChange","handleChange","table","tableRef","value","cell","isCurrentRow","attributes","tableMeta","options","meta","ref","useRef","refCallback","mergeRefs","columnMeta","columnDef","controlRenderer","control","isCellInDetailMode","editing","detailModeEditing","_ref$current","current","contains","document","activeElement","handleKeyDown","event","target","readOnly","key","stopPropagation","preventDefault","setDetailModeEditing","changedRow","changes","row","id","rowEdtitingDataWithInitialValue","_","isEqual","original","resetChange","_tableRef$current","toggleEditing","focus","deselectInputValue","_target$select","select","call","isNumber","handleInputKeyDown","test","handleDatepickerChange","originalDate","changedDate","detail","hasChanged","setValue","nextValue","handleDatepickerKeyDown","Datepicker","className","cn","onKeyDown","Switch","checked","Boolean","TextAreaControl","Input","getInputAppearanceClassnames","getCellAlignmentClasses","type","undefined","String"],"mappings":"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"}
1
+ {"version":3,"file":"EditingControl.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/cell/EditingControl.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { Cell as RTCell, Column as RTColumn, Table as RTTable, TableMeta } from '@tanstack/react-table';\nimport _ from 'lodash';\n\nimport { deselectInputValue } from '../../../../../utils/input';\nimport { hasChanged } from '../../../util/editing';\nimport { Datepicker } from '../../../../Datepicker/Datepicker';\nimport { Switch } from '../../../../Switch/Switch';\nimport { Input } from '../../../../Input/Input';\nimport { getCellAlignmentClasses, getInputAppearanceClassnames } from '../styles';\nimport { mergeRefs } from '../../../../../utils/mergeRefs';\nimport { Table3ColumnAlignment } from '../../../types';\nimport { TextareaControl } from './controls/TextareaControl';\n\nexport type EditingControlProps<TType = unknown> = {\n align?: Table3ColumnAlignment;\n column: RTColumn<TType, unknown>;\n data: TType;\n initialValue: any;\n value: any;\n onBlur: (event: React.FocusEvent) => void;\n onFocus: (event: React.FocusEvent) => void;\n onChange: (value: any) => void;\n ref: React.Ref<HTMLElement>;\n table: RTTable<TType>;\n tableRef: React.RefObject<HTMLDivElement>;\n cell: RTCell<TType, unknown>;\n error?: string;\n tabIndex?: number;\n isCurrentRow?: boolean;\n};\n\nexport const EditingControl = React.forwardRef<HTMLElement, any>(function Control<TType = unknown>(\n props: EditingControlProps<TType>,\n externalRef: React.Ref<HTMLElement>\n) {\n const {\n align,\n column,\n data,\n initialValue,\n onChange: handleChange,\n table,\n tableRef,\n value,\n cell,\n isCurrentRow,\n ...attributes\n } = props;\n\n const tableMeta = table.options.meta as TableMeta<unknown>;\n\n const ref = React.useRef<HTMLElement>();\n const refCallback = mergeRefs([ref, externalRef]);\n\n const columnMeta = column.columnDef.meta;\n const controlRenderer = columnMeta?.control;\n\n const isCellInDetailMode =\n tableMeta.editing.detailModeEditing && (ref as React.RefObject<HTMLElement>)?.current?.contains(document.activeElement);\n\n // Revert to initial value if escape was pressed\n const handleKeyDown = (event: React.KeyboardEvent) => {\n const target = event.target as HTMLInputElement;\n\n if (target.readOnly) {\n return;\n }\n\n // prevent row arrow shortcuts triggering when in detail mode\n if (tableMeta.editing.detailModeEditing && (event.key === 'ArrowUp' || event.key === 'ArrowDown')) {\n event.stopPropagation();\n }\n\n if (event.key === 'Escape') {\n event.preventDefault();\n\n if (tableMeta.editing.detailModeEditing) {\n tableMeta.editing.setDetailModeEditing(false);\n\n if (value !== initialValue) {\n // Before reseting to initial value, we need to check if edited row with cell initial value is the same as original row,\n // and in this case we need to completely remove row from editing state to avoid saving the same data as original.\n const changedRow: any = tableMeta.editing.changes ? tableMeta.editing.changes[cell.row.id] : {};\n const rowEdtitingDataWithInitialValue = { ...changedRow, [cell.column.id]: initialValue };\n if (_.isEqual(cell.row.original, rowEdtitingDataWithInitialValue)) {\n tableMeta.editing.resetChange(cell.row.id);\n } else {\n handleChange(initialValue);\n }\n }\n } else {\n tableMeta.editing.toggleEditing(false);\n tableRef.current?.focus();\n }\n\n return;\n }\n\n // Should enable/disable editing mode if Enter was clicked\n if (event.key === 'Enter') {\n event.preventDefault();\n\n if (!tableMeta.editing.detailModeEditing) {\n deselectInputValue(target);\n } else {\n target?.select?.();\n }\n\n // Ketydown \"Enter\" should toggle edititng mode\n tableMeta.editing.setDetailModeEditing(!tableMeta.editing.detailModeEditing);\n\n return;\n }\n };\n\n const isNumber = typeof value === 'number';\n const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n handleKeyDown(event);\n\n // Switching to editing mode, when key pressed any alphabetical character or number\n if (/^[a-z0-9]$/i.test(event.key)) {\n tableMeta.editing.setDetailModeEditing(true);\n return;\n }\n };\n\n const handleDatepickerChange = event => {\n // When datepicker looses focus, it triggers change event, even if date wasn't changed,\n // so adding additional check here to prevent adding change to the edititng state.\n const originalDate = cell.row.original[cell.column.id];\n const changedDate = (event as any).detail;\n if (hasChanged(originalDate, changedDate)) {\n handleChange(changedDate);\n }\n };\n\n if (typeof controlRenderer === 'function') {\n return controlRenderer(\n {\n ...attributes,\n ref: ref,\n setValue: nextValue => {\n if (nextValue !== value) {\n handleChange(nextValue);\n }\n },\n value,\n },\n data\n );\n } else if (controlRenderer === 'datepicker') {\n const handleDatepickerKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n handleKeyDown(event);\n\n if (/^[a-z0-9]$/i.test(event.key)) {\n tableMeta.editing.setDetailModeEditing(true);\n return;\n }\n };\n\n return (\n <Datepicker\n {...attributes}\n className={cn({\n '[&_input]:!yt-focus-dark': isCellInDetailMode,\n })}\n onChange={handleDatepickerChange}\n onKeyDown={handleDatepickerKeyDown}\n ref={refCallback}\n value={value as Date}\n />\n );\n } else if (controlRenderer === 'switch') {\n return (\n <Switch {...attributes} className=\"mx-2 mt-1.5\" checked={Boolean(value)} onChange={handleChange} ref={refCallback} />\n );\n } else if (controlRenderer === 'textarea') {\n return (\n <TextareaControl\n {...props}\n isCellInDetailMode={isCellInDetailMode}\n onKeyDown={handleInputKeyDown}\n ref={refCallback}\n />\n );\n }\n\n return (\n <Input\n {...attributes}\n className={cn(getInputAppearanceClassnames(), getCellAlignmentClasses(align), {\n '!yt-focus-dark': isCellInDetailMode,\n })}\n onChange={event => {\n handleChange(event.target.value);\n }}\n onKeyDown={handleInputKeyDown}\n ref={refCallback}\n type={isNumber ? 'number' : undefined}\n value={isNumber ? value : String(value ?? '')}\n />\n );\n});\n"],"names":["EditingControl","React","forwardRef","Control","props","externalRef","align","column","data","initialValue","onChange","handleChange","table","tableRef","value","cell","isCurrentRow","attributes","tableMeta","options","meta","ref","useRef","refCallback","mergeRefs","columnMeta","columnDef","controlRenderer","control","isCellInDetailMode","editing","detailModeEditing","_ref$current","current","contains","document","activeElement","handleKeyDown","event","target","readOnly","key","stopPropagation","preventDefault","setDetailModeEditing","changedRow","changes","row","id","rowEdtitingDataWithInitialValue","_","isEqual","original","resetChange","_tableRef$current","toggleEditing","focus","deselectInputValue","_target$select","select","call","isNumber","handleInputKeyDown","test","handleDatepickerChange","originalDate","changedDate","detail","hasChanged","setValue","nextValue","handleDatepickerKeyDown","Datepicker","className","cn","onKeyDown","Switch","checked","Boolean","TextareaControl","Input","getInputAppearanceClassnames","getCellAlignmentClasses","type","undefined","String"],"mappings":"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"}
@@ -4,7 +4,7 @@ import { useMergedRef } from '../../../../../../hooks/useMergedRef.js';
4
4
  import { getCellAlignmentClasses } from '../../styles.js';
5
5
  import { Textarea } from '../../../../../Textarea/Textarea.js';
6
6
 
7
- const TextAreaControl = /*#__PURE__*/React__default.forwardRef(function TextAreaControl(props, externalRef) {
7
+ const TextareaControl = /*#__PURE__*/React__default.forwardRef(function TextareaControl(props, externalRef) {
8
8
  const {
9
9
  onKeyDown: handleKeyDown,
10
10
  onChange: handleChange,
@@ -98,5 +98,5 @@ const TextAreaControl = /*#__PURE__*/React__default.forwardRef(function TextArea
98
98
  })));
99
99
  });
100
100
 
101
- export { TextAreaControl };
102
- //# sourceMappingURL=TextAreaControl.js.map
101
+ export { TextareaControl };
102
+ //# sourceMappingURL=TextareaControl.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"TextAreaControl.js","sources":["../../../../../../../../../../../src/components/Table3/components/columns/cell/controls/TextAreaControl.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { Textarea } from '../../../../../Textarea/Textarea';\nimport { EditingControlProps } from '../EditingControl';\nimport { getCellAlignmentClasses } from '../../styles';\nimport { useMergedRef } from '../../../../../../hooks/useMergedRef';\n\ntype TextAreaControlProps<TType = unknown> = EditingControlProps<TType> & {\n onKeyDown: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void;\n isCellInDetailMode?: boolean;\n};\n\nexport const TextAreaControl = React.forwardRef<HTMLElement, any>(function TextAreaControl<TType = unknown>(\n props: TextAreaControlProps<TType>,\n externalRef: React.Ref<HTMLElement>\n) {\n const {\n onKeyDown: handleKeyDown,\n onChange: handleChange,\n column,\n isCellInDetailMode,\n align,\n isCurrentRow,\n value,\n ...attributes\n } = props;\n\n const textareaMaxHeight = 120;\n const textareaMinHeight = 32;\n\n const columnMeta = column.columnDef.meta;\n\n const ref = useMergedRef<HTMLTextAreaElement>(externalRef);\n\n React.useEffect(() => {\n // If truncation is not enabled, then textarea should re-calculate it's height to fit with it's own content, when initialized.\n if (ref?.current && !columnMeta?.enableTruncate) {\n const textareaElement = ref?.current as HTMLTextAreaElement;\n resizeTextArea(textareaElement);\n }\n }, []);\n\n React.useEffect(() => {\n // If truncation is enabled, then textarea should only adjust to it's own content, when in detail mode.\n // Otherwise it should collapse to minimal height.\n if (ref?.current && columnMeta?.enableTruncate) {\n const textareaElement = ref?.current as HTMLTextAreaElement;\n\n if (isCellInDetailMode) {\n resizeTextArea(textareaElement);\n } else {\n textareaElement.style.height = `${textareaMinHeight}px`;\n }\n }\n }, [isCellInDetailMode]);\n\n const resizeTextArea = (textareaElement: HTMLTextAreaElement) => {\n // Need to set inherit before calculating height, so that browser sets the scrollHeight properly,\n // depending on text inside.\n const textareaRect = textareaElement.getBoundingClientRect();\n const prevHeight = textareaRect.height;\n if (columnMeta?.enableTruncate) {\n if (prevHeight < textareaMaxHeight) {\n textareaElement.style.height = 'inherit';\n textareaElement.style.height = `${Math.min(textareaElement.scrollHeight, textareaMaxHeight)}px`;\n }\n } else {\n textareaElement.style.height = 'inherit';\n textareaElement.style.height = `${textareaElement.scrollHeight}px`;\n }\n };\n\n const handleTextareaChange = e => {\n resizeTextArea(e.target);\n };\n\n const textareaContainerClassName = cn('w-full', {\n 'focus-within:absolute focus-within:left-0 focus-within:top-0 focus-within:z-20 focus-within:px-2 focus-within:pt-[var(--table3-row-padding)]':\n columnMeta?.enableTruncate,\n });\n const handleTextareaKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {\n // By default Shift + Enter in textarea makes a new line, we want to keep this behaviour\n if (event.shiftKey && event.key === 'Enter') {\n return;\n } else {\n handleKeyDown(event);\n }\n };\n\n return (\n <div className={textareaContainerClassName} data-taco=\"input-container\">\n <Textarea\n {...attributes}\n onChange={event => {\n handleChange(event.target.value);\n handleTextareaChange(event);\n }}\n rows={1}\n onKeyDown={e => {\n handleTextareaKeyDown(e);\n }}\n onBlur={event => {\n // If truncation is enabled, then textarea should shring back to min height, when loosing focus.\n if (columnMeta?.enableTruncate) {\n const textareaElement = event.currentTarget;\n textareaElement.style.height = `${textareaMinHeight}px`;\n }\n }}\n className={cn(getCellAlignmentClasses(align), `z-20 h-fit resize-none`, {\n [`!min-h-[${textareaMinHeight}px]`]: columnMeta?.enableTruncate,\n '!yt-focus-dark': isCellInDetailMode,\n [`h-[${textareaMinHeight}px]`]: !isCellInDetailMode && columnMeta?.enableTruncate,\n // Only allow resizing when focused and truncation enabled\n 'focus:resize-y': isCurrentRow && columnMeta?.enableTruncate,\n })}\n ref={ref}\n value={String(value ?? '')}\n />\n </div>\n );\n});\n"],"names":["TextAreaControl","React","forwardRef","props","externalRef","onKeyDown","handleKeyDown","onChange","handleChange","column","isCellInDetailMode","align","isCurrentRow","value","attributes","textareaMaxHeight","textareaMinHeight","columnMeta","columnDef","meta","ref","useMergedRef","useEffect","current","enableTruncate","textareaElement","resizeTextArea","style","height","textareaRect","getBoundingClientRect","prevHeight","Math","min","scrollHeight","handleTextareaChange","e","target","textareaContainerClassName","cn","handleTextareaKeyDown","event","shiftKey","key","className","Textarea","rows","onBlur","currentTarget","getCellAlignmentClasses","String"],"mappings":"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"}
1
+ {"version":3,"file":"TextareaControl.js","sources":["../../../../../../../../../../../src/components/Table3/components/columns/cell/controls/TextareaControl.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { Textarea } from '../../../../../Textarea/Textarea';\nimport { EditingControlProps } from '../EditingControl';\nimport { getCellAlignmentClasses } from '../../styles';\nimport { useMergedRef } from '../../../../../../hooks/useMergedRef';\n\ntype TextareaControlProps<TType = unknown> = EditingControlProps<TType> & {\n onKeyDown: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void;\n isCellInDetailMode?: boolean;\n};\n\nexport const TextareaControl = React.forwardRef<HTMLElement, any>(function TextareaControl<TType = unknown>(\n props: TextareaControlProps<TType>,\n externalRef: React.Ref<HTMLElement>\n) {\n const {\n onKeyDown: handleKeyDown,\n onChange: handleChange,\n column,\n isCellInDetailMode,\n align,\n isCurrentRow,\n value,\n ...attributes\n } = props;\n\n const textareaMaxHeight = 120;\n const textareaMinHeight = 32;\n\n const columnMeta = column.columnDef.meta;\n\n const ref = useMergedRef<HTMLTextAreaElement>(externalRef);\n\n React.useEffect(() => {\n // If truncation is not enabled, then textarea should re-calculate it's height to fit with it's own content, when initialized.\n if (ref?.current && !columnMeta?.enableTruncate) {\n const textareaElement = ref?.current as HTMLTextAreaElement;\n resizeTextArea(textareaElement);\n }\n }, []);\n\n React.useEffect(() => {\n // If truncation is enabled, then textarea should only adjust to it's own content, when in detail mode.\n // Otherwise it should collapse to minimal height.\n if (ref?.current && columnMeta?.enableTruncate) {\n const textareaElement = ref?.current as HTMLTextAreaElement;\n\n if (isCellInDetailMode) {\n resizeTextArea(textareaElement);\n } else {\n textareaElement.style.height = `${textareaMinHeight}px`;\n }\n }\n }, [isCellInDetailMode]);\n\n const resizeTextArea = (textareaElement: HTMLTextAreaElement) => {\n // Need to set inherit before calculating height, so that browser sets the scrollHeight properly,\n // depending on text inside.\n const textareaRect = textareaElement.getBoundingClientRect();\n const prevHeight = textareaRect.height;\n if (columnMeta?.enableTruncate) {\n if (prevHeight < textareaMaxHeight) {\n textareaElement.style.height = 'inherit';\n textareaElement.style.height = `${Math.min(textareaElement.scrollHeight, textareaMaxHeight)}px`;\n }\n } else {\n textareaElement.style.height = 'inherit';\n textareaElement.style.height = `${textareaElement.scrollHeight}px`;\n }\n };\n\n const handleTextareaChange = e => {\n resizeTextArea(e.target);\n };\n\n const textareaContainerClassName = cn('w-full', {\n 'focus-within:absolute focus-within:left-0 focus-within:top-0 focus-within:z-20 focus-within:px-2 focus-within:pt-[var(--table3-row-padding)]':\n columnMeta?.enableTruncate,\n });\n const handleTextareaKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {\n // By default Shift + Enter in textarea makes a new line, we want to keep this behaviour\n if (event.shiftKey && event.key === 'Enter') {\n return;\n } else {\n handleKeyDown(event);\n }\n };\n\n return (\n <div className={textareaContainerClassName} data-taco=\"input-container\">\n <Textarea\n {...attributes}\n onChange={event => {\n handleChange(event.target.value);\n handleTextareaChange(event);\n }}\n rows={1}\n onKeyDown={e => {\n handleTextareaKeyDown(e);\n }}\n onBlur={event => {\n // If truncation is enabled, then textarea should shring back to min height, when loosing focus.\n if (columnMeta?.enableTruncate) {\n const textareaElement = event.currentTarget;\n textareaElement.style.height = `${textareaMinHeight}px`;\n }\n }}\n className={cn(getCellAlignmentClasses(align), `z-20 h-fit resize-none`, {\n [`!min-h-[${textareaMinHeight}px]`]: columnMeta?.enableTruncate,\n '!yt-focus-dark': isCellInDetailMode,\n [`h-[${textareaMinHeight}px]`]: !isCellInDetailMode && columnMeta?.enableTruncate,\n // Only allow resizing when focused and truncation enabled\n 'focus:resize-y': isCurrentRow && columnMeta?.enableTruncate,\n })}\n ref={ref}\n value={String(value ?? '')}\n />\n </div>\n );\n});\n"],"names":["TextareaControl","React","forwardRef","props","externalRef","onKeyDown","handleKeyDown","onChange","handleChange","column","isCellInDetailMode","align","isCurrentRow","value","attributes","textareaMaxHeight","textareaMinHeight","columnMeta","columnDef","meta","ref","useMergedRef","useEffect","current","enableTruncate","textareaElement","resizeTextArea","style","height","textareaRect","getBoundingClientRect","prevHeight","Math","min","scrollHeight","handleTextareaChange","e","target","textareaContainerClassName","cn","handleTextareaKeyDown","event","shiftKey","key","className","Textarea","rows","onBlur","currentTarget","getCellAlignmentClasses","String"],"mappings":"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"}
@@ -14,6 +14,7 @@ const MemoedCell = /*#__PURE__*/React__default.memo(function MemoedCell(props) {
14
14
  const {
15
15
  actions,
16
16
  actionsLength,
17
+ fontSize,
17
18
  isCurrentRow,
18
19
  isEditing,
19
20
  isResizingColumn,
@@ -48,8 +49,13 @@ const MemoedCell = /*#__PURE__*/React__default.memo(function MemoedCell(props) {
48
49
  const visibleActions = actions.map(action => action(row.original)).filter(action => !!action);
49
50
  const actionsOnRow = visibleActions.length === actionsLength ? visibleActions : visibleActions.slice(0, actionsLength - 1);
50
51
  const actionsInMenu = visibleActions.slice(visibleActions.length === actionsLength ? actionsLength : actionsLength - 1);
52
+ const className = cn('-mb-2 flex justify-end pl-2 text-right', {
53
+ // Adjust negative margin on row actions cell to ensure that the cell aligns vertically.
54
+ '-mt-2': fontSize === 'small',
55
+ '-mt-1.5': fontSize !== 'small'
56
+ });
51
57
  content = /*#__PURE__*/React__default.createElement("span", {
52
- className: "-mb-2 -mt-1.5 flex justify-end pl-2 text-right",
58
+ className: className,
53
59
  ref: ref
54
60
  }, actionsOnRow.map((button, index) => {
55
61
  var _ref, _button$props$tooltip;
@@ -85,6 +91,7 @@ function Cell(context) {
85
91
  return /*#__PURE__*/React__default.createElement(MemoedCell, Object.assign({}, context, {
86
92
  actions: tableMeta.rowActions.actionsForRow,
87
93
  actionsLength: tableMeta.rowActions.actionsForRowLength,
94
+ fontSize: tableMeta.fontSize.size,
88
95
  isCurrentRow: tableMeta.currentRow.currentRowIndex === rowIndex,
89
96
  isEditing: tableMeta.editing.isEditing,
90
97
  isResizingColumn: !!context.table.getState().columnSizingInfo.isResizingColumn,
@@ -1 +1 @@
1
- {"version":3,"file":"Actions.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/internal/Actions.tsx"],"sourcesContent":["import React from 'react';\nimport { CellContext, DisplayColumnDef, TableMeta } from '@tanstack/react-table';\nimport cn from 'classnames';\nimport { Header as ColumnHeader } from '../header/Header';\nimport { DisplayCell } from '../cell/DisplayCell';\nimport { Table3RowActionRenderer } from '../../../types';\nimport { RowContext } from '../../rows/RowContext';\nimport { IconButton } from '../../../../IconButton/IconButton';\nimport { useLocalization } from '../../../../Provider/Localization';\nimport { Menu } from '../../../../Menu/Menu';\nimport { Shortcut } from '../../../../Shortcut/Shortcut';\nimport { Footer } from '../footer/Footer';\n\nexport const COLUMN_ID = '__actions';\n\ntype MemoedCellProps<TType = unknown> = CellContext<TType, unknown> & {\n actions?: Table3RowActionRenderer<TType>[];\n actionsLength: number;\n isCurrentRow: boolean;\n isEditing: boolean;\n isResizingColumn: boolean;\n isHoverStatePaused: boolean;\n};\n\nconst MemoedCell = React.memo(function MemoedCell<TType = unknown>(props: MemoedCellProps<TType>) {\n const { actions, actionsLength, isCurrentRow, isEditing, isResizingColumn, isHoverStatePaused, row } = props;\n const { isHovered } = React.useContext(RowContext);\n const { texts } = useLocalization();\n const ref = React.useRef<HTMLSpanElement | null>(null);\n /*\n const size = table.getState().columnSizing[COLUMN_ID];\n\n // the actions column needs to set its size based on its content, not the actual column\n // so we do this here instead of in the header\n React.useLayoutEffect(() => {\n if (ref.current && !size) {\n const width = ref.current.getBoundingClientRect().width;\n\n table.setColumnSizing(sizes => ({\n ...sizes,\n [COLUMN_ID]: width,\n }));\n }\n }, [ref.current]);\n */\n\n let content;\n\n // We don't want to show actions in edit mode, since we have editing actions,\n // which is shown in edit mode instead.\n if (actions?.length && !isEditing && (isCurrentRow || (isHovered && !isHoverStatePaused && !isResizingColumn))) {\n const visibleActions = actions.map(action => action(row.original)).filter(action => !!action) as JSX.Element[];\n\n const actionsOnRow =\n visibleActions.length === actionsLength ? visibleActions : visibleActions.slice(0, actionsLength - 1);\n const actionsInMenu = visibleActions.slice(visibleActions.length === actionsLength ? actionsLength : actionsLength - 1);\n\n content = (\n <span className=\"-mb-2 -mt-1.5 flex justify-end pl-2 text-right\" ref={ref}>\n {actionsOnRow.map((button, index) => {\n const tooltip = String(button.props.tooltip ?? button.props['aria-label'] ?? '');\n\n return React.cloneElement(button, {\n appearance: 'discrete',\n key: index,\n tabIndex: isCurrentRow ? 0 : -1,\n tooltip: button.props.shortcut ? (\n <>\n {tooltip}\n <Shortcut className=\"ml-2\" keys={button.props.shortcut} />\n </>\n ) : (\n tooltip\n ),\n });\n })}\n {actionsInMenu.length ? (\n <IconButton\n appearance=\"discrete\"\n aria-label={texts.table3.columns.actions.tooltip}\n icon=\"more\"\n tabIndex={isCurrentRow ? 0 : -1}\n menu={menuProps => (\n <Menu {...menuProps}>\n <Menu.Content>\n {actionsInMenu.map((action, i) => (\n <Menu.Item key={i} {...action.props} shortcut={action.props.shortcut}>\n {action.props['aria-label']}\n </Menu.Item>\n ))}\n </Menu.Content>\n </Menu>\n )}\n />\n ) : null}\n </span>\n );\n }\n\n return <DisplayCell {...props}>{content}</DisplayCell>;\n}) as <TType = unknown>(props: MemoedCellProps<TType>) => JSX.Element;\n\ntype CellProps<TType = unknown> = CellContext<TType, unknown>;\n\nfunction Cell<TType = unknown>(context: CellProps<TType>) {\n const { rowIndex } = React.useContext(RowContext);\n const tableMeta = context.table.options.meta as TableMeta<TType>;\n\n return (\n <MemoedCell\n {...context}\n actions={tableMeta.rowActions.actionsForRow}\n actionsLength={tableMeta.rowActions.actionsForRowLength}\n isCurrentRow={tableMeta.currentRow.currentRowIndex === rowIndex}\n isEditing={tableMeta.editing.isEditing}\n isResizingColumn={!!context.table.getState().columnSizingInfo.isResizingColumn}\n isHoverStatePaused={!!tableMeta.hoverState.isPaused}\n />\n );\n}\n\nexport function createRowActionsColumn<TType = unknown>(): DisplayColumnDef<TType, unknown> {\n return {\n id: COLUMN_ID,\n header: ColumnHeader,\n cell: Cell,\n footer: Footer,\n meta: {\n align: 'right',\n className: cn(\n '!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',\n 'shadow-[-6px_0px_6px_var(--table3-row-actions-shadow)]',\n 'group-[[data-current=\"true\"][data-selected=\"false\"]]/row:text-grey-200',\n 'group-[[data-selected=\"true\"]]/row:text-blue-100',\n 'group-[[data-selected=\"false\"]:hover]/row:text-grey-100'\n ),\n enableOrdering: false,\n enableSearch: false,\n enableTruncate: false,\n header: '',\n headerClassName: 'items-center !p-0',\n },\n // options\n enableResizing: false,\n };\n}\n"],"names":["COLUMN_ID","MemoedCell","React","memo","props","actions","actionsLength","isCurrentRow","isEditing","isResizingColumn","isHoverStatePaused","row","isHovered","useContext","RowContext","texts","useLocalization","ref","useRef","content","length","visibleActions","map","action","original","filter","actionsOnRow","slice","actionsInMenu","className","button","index","tooltip","String","_ref","_button$props$tooltip","cloneElement","appearance","key","tabIndex","shortcut","Shortcut","keys","IconButton","table3","columns","icon","menu","menuProps","Menu","Content","i","Item","DisplayCell","Cell","context","rowIndex","tableMeta","table","options","meta","rowActions","actionsForRow","actionsForRowLength","currentRow","currentRowIndex","editing","getState","columnSizingInfo","hoverState","isPaused","createRowActionsColumn","id","header","ColumnHeader","cell","footer","Footer","align","cn","enableOrdering","enableSearch","enableTruncate","headerClassName","enableResizing"],"mappings":"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"}
1
+ {"version":3,"file":"Actions.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/internal/Actions.tsx"],"sourcesContent":["import React from 'react';\nimport { CellContext, DisplayColumnDef, TableMeta } from '@tanstack/react-table';\nimport cn from 'classnames';\nimport { Header as ColumnHeader } from '../header/Header';\nimport { DisplayCell } from '../cell/DisplayCell';\nimport { Table3FontSize, Table3RowActionRenderer } from '../../../types';\nimport { RowContext } from '../../rows/RowContext';\nimport { IconButton } from '../../../../IconButton/IconButton';\nimport { useLocalization } from '../../../../Provider/Localization';\nimport { Menu } from '../../../../Menu/Menu';\nimport { Shortcut } from '../../../../Shortcut/Shortcut';\nimport { Footer } from '../footer/Footer';\n\nexport const COLUMN_ID = '__actions';\n\ntype MemoedCellProps<TType = unknown> = CellContext<TType, unknown> & {\n actions?: Table3RowActionRenderer<TType>[];\n actionsLength: number;\n fontSize: Table3FontSize;\n isCurrentRow: boolean;\n isEditing: boolean;\n isResizingColumn: boolean;\n isHoverStatePaused: boolean;\n};\n\nconst MemoedCell = React.memo(function MemoedCell<TType = unknown>(props: MemoedCellProps<TType>) {\n const { actions, actionsLength, fontSize, isCurrentRow, isEditing, isResizingColumn, isHoverStatePaused, row } = props;\n const { isHovered } = React.useContext(RowContext);\n const { texts } = useLocalization();\n const ref = React.useRef<HTMLSpanElement | null>(null);\n /*\n const size = table.getState().columnSizing[COLUMN_ID];\n\n // the actions column needs to set its size based on its content, not the actual column\n // so we do this here instead of in the header\n React.useLayoutEffect(() => {\n if (ref.current && !size) {\n const width = ref.current.getBoundingClientRect().width;\n\n table.setColumnSizing(sizes => ({\n ...sizes,\n [COLUMN_ID]: width,\n }));\n }\n }, [ref.current]);\n */\n\n let content;\n\n // We don't want to show actions in edit mode, since we have editing actions,\n // which is shown in edit mode instead.\n if (actions?.length && !isEditing && (isCurrentRow || (isHovered && !isHoverStatePaused && !isResizingColumn))) {\n const visibleActions = actions.map(action => action(row.original)).filter(action => !!action) as JSX.Element[];\n\n const actionsOnRow =\n visibleActions.length === actionsLength ? visibleActions : visibleActions.slice(0, actionsLength - 1);\n const actionsInMenu = visibleActions.slice(visibleActions.length === actionsLength ? actionsLength : actionsLength - 1);\n\n const className = cn('-mb-2 flex justify-end pl-2 text-right', {\n // Adjust negative margin on row actions cell to ensure that the cell aligns vertically.\n '-mt-2': fontSize === 'small',\n '-mt-1.5': fontSize !== 'small',\n });\n\n content = (\n <span className={className} ref={ref}>\n {actionsOnRow.map((button, index) => {\n const tooltip = String(button.props.tooltip ?? button.props['aria-label'] ?? '');\n\n return React.cloneElement(button, {\n appearance: 'discrete',\n key: index,\n tabIndex: isCurrentRow ? 0 : -1,\n tooltip: button.props.shortcut ? (\n <>\n {tooltip}\n <Shortcut className=\"ml-2\" keys={button.props.shortcut} />\n </>\n ) : (\n tooltip\n ),\n });\n })}\n {actionsInMenu.length ? (\n <IconButton\n appearance=\"discrete\"\n aria-label={texts.table3.columns.actions.tooltip}\n icon=\"more\"\n tabIndex={isCurrentRow ? 0 : -1}\n menu={menuProps => (\n <Menu {...menuProps}>\n <Menu.Content>\n {actionsInMenu.map((action, i) => (\n <Menu.Item key={i} {...action.props} shortcut={action.props.shortcut}>\n {action.props['aria-label']}\n </Menu.Item>\n ))}\n </Menu.Content>\n </Menu>\n )}\n />\n ) : null}\n </span>\n );\n }\n\n return <DisplayCell {...props}>{content}</DisplayCell>;\n}) as <TType = unknown>(props: MemoedCellProps<TType>) => JSX.Element;\n\ntype CellProps<TType = unknown> = CellContext<TType, unknown>;\n\nfunction Cell<TType = unknown>(context: CellProps<TType>) {\n const { rowIndex } = React.useContext(RowContext);\n const tableMeta = context.table.options.meta as TableMeta<TType>;\n\n return (\n <MemoedCell\n {...context}\n actions={tableMeta.rowActions.actionsForRow}\n actionsLength={tableMeta.rowActions.actionsForRowLength}\n fontSize={tableMeta.fontSize.size}\n isCurrentRow={tableMeta.currentRow.currentRowIndex === rowIndex}\n isEditing={tableMeta.editing.isEditing}\n isResizingColumn={!!context.table.getState().columnSizingInfo.isResizingColumn}\n isHoverStatePaused={!!tableMeta.hoverState.isPaused}\n />\n );\n}\n\nexport function createRowActionsColumn<TType = unknown>(): DisplayColumnDef<TType, unknown> {\n return {\n id: COLUMN_ID,\n header: ColumnHeader,\n cell: Cell,\n footer: Footer,\n meta: {\n align: 'right',\n className: cn(\n '!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',\n 'shadow-[-6px_0px_6px_var(--table3-row-actions-shadow)]',\n 'group-[[data-current=\"true\"][data-selected=\"false\"]]/row:text-grey-200',\n 'group-[[data-selected=\"true\"]]/row:text-blue-100',\n 'group-[[data-selected=\"false\"]:hover]/row:text-grey-100'\n ),\n enableOrdering: false,\n enableSearch: false,\n enableTruncate: false,\n header: '',\n headerClassName: 'items-center !p-0',\n },\n // options\n enableResizing: false,\n };\n}\n"],"names":["COLUMN_ID","MemoedCell","React","memo","props","actions","actionsLength","fontSize","isCurrentRow","isEditing","isResizingColumn","isHoverStatePaused","row","isHovered","useContext","RowContext","texts","useLocalization","ref","useRef","content","length","visibleActions","map","action","original","filter","actionsOnRow","slice","actionsInMenu","className","cn","button","index","tooltip","String","_ref","_button$props$tooltip","cloneElement","appearance","key","tabIndex","shortcut","Shortcut","keys","IconButton","table3","columns","icon","menu","menuProps","Menu","Content","i","Item","DisplayCell","Cell","context","rowIndex","tableMeta","table","options","meta","rowActions","actionsForRow","actionsForRowLength","size","currentRow","currentRowIndex","editing","getState","columnSizingInfo","hoverState","isPaused","createRowActionsColumn","id","header","ColumnHeader","cell","footer","Footer","align","enableOrdering","enableSearch","enableTruncate","headerClassName","enableResizing"],"mappings":"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"}