@vuu-ui/vuu-table 0.0.26

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 (260) hide show
  1. package/LICENSE +201 -0
  2. package/README.md +0 -0
  3. package/cjs/Row.css.js +6 -0
  4. package/cjs/Row.css.js.map +1 -0
  5. package/cjs/Row.js +130 -0
  6. package/cjs/Row.js.map +1 -0
  7. package/cjs/Table.css.js +6 -0
  8. package/cjs/Table.css.js.map +1 -0
  9. package/cjs/Table.js +285 -0
  10. package/cjs/Table.js.map +1 -0
  11. package/cjs/cell-renderers/checkbox-cell/CheckboxCell.css.js +6 -0
  12. package/cjs/cell-renderers/checkbox-cell/CheckboxCell.css.js.map +1 -0
  13. package/cjs/cell-renderers/checkbox-cell/CheckboxCell.js +42 -0
  14. package/cjs/cell-renderers/checkbox-cell/CheckboxCell.js.map +1 -0
  15. package/cjs/cell-renderers/input-cell/InputCell.css.js +6 -0
  16. package/cjs/cell-renderers/input-cell/InputCell.css.js.map +1 -0
  17. package/cjs/cell-renderers/input-cell/InputCell.js +58 -0
  18. package/cjs/cell-renderers/input-cell/InputCell.js.map +1 -0
  19. package/cjs/cell-renderers/toggle-cell/ToggleCell.css.js +6 -0
  20. package/cjs/cell-renderers/toggle-cell/ToggleCell.css.js.map +1 -0
  21. package/cjs/cell-renderers/toggle-cell/ToggleCell.js +68 -0
  22. package/cjs/cell-renderers/toggle-cell/ToggleCell.js.map +1 -0
  23. package/cjs/column-header-pill/ColumnHeaderPill.css.js +6 -0
  24. package/cjs/column-header-pill/ColumnHeaderPill.css.js.map +1 -0
  25. package/cjs/column-header-pill/ColumnHeaderPill.js +53 -0
  26. package/cjs/column-header-pill/ColumnHeaderPill.js.map +1 -0
  27. package/cjs/column-header-pill/GroupColumnPill.css.js +6 -0
  28. package/cjs/column-header-pill/GroupColumnPill.css.js.map +1 -0
  29. package/cjs/column-header-pill/GroupColumnPill.js +29 -0
  30. package/cjs/column-header-pill/GroupColumnPill.js.map +1 -0
  31. package/cjs/column-header-pill/SortIndicator.css.js +6 -0
  32. package/cjs/column-header-pill/SortIndicator.css.js.map +1 -0
  33. package/cjs/column-header-pill/SortIndicator.js +27 -0
  34. package/cjs/column-header-pill/SortIndicator.js.map +1 -0
  35. package/cjs/column-menu/ColumnMenu.css.js +6 -0
  36. package/cjs/column-menu/ColumnMenu.css.js.map +1 -0
  37. package/cjs/column-menu/ColumnMenu.js +30 -0
  38. package/cjs/column-menu/ColumnMenu.js.map +1 -0
  39. package/cjs/column-resizing/ColumnResizer.css.js +6 -0
  40. package/cjs/column-resizing/ColumnResizer.css.js.map +1 -0
  41. package/cjs/column-resizing/ColumnResizer.js +72 -0
  42. package/cjs/column-resizing/ColumnResizer.js.map +1 -0
  43. package/cjs/column-resizing/useTableColumnResize.js +55 -0
  44. package/cjs/column-resizing/useTableColumnResize.js.map +1 -0
  45. package/cjs/context-menu/buildContextMenuDescriptors.js +214 -0
  46. package/cjs/context-menu/buildContextMenuDescriptors.js.map +1 -0
  47. package/cjs/context-menu/useHandleTableContextMenu.js +81 -0
  48. package/cjs/context-menu/useHandleTableContextMenu.js.map +1 -0
  49. package/cjs/header-cell/GroupHeaderCell.css.js +6 -0
  50. package/cjs/header-cell/GroupHeaderCell.css.js.map +1 -0
  51. package/cjs/header-cell/GroupHeaderCell.js +117 -0
  52. package/cjs/header-cell/GroupHeaderCell.js.map +1 -0
  53. package/cjs/header-cell/HeaderCell.css.js +6 -0
  54. package/cjs/header-cell/HeaderCell.css.js.map +1 -0
  55. package/cjs/header-cell/HeaderCell.js +109 -0
  56. package/cjs/header-cell/HeaderCell.js.map +1 -0
  57. package/cjs/index.js +36 -0
  58. package/cjs/index.js.map +1 -0
  59. package/cjs/moving-window.js +61 -0
  60. package/cjs/moving-window.js.map +1 -0
  61. package/cjs/table-cell/TableCell.css.js +6 -0
  62. package/cjs/table-cell/TableCell.css.js.map +1 -0
  63. package/cjs/table-cell/TableCell.js +72 -0
  64. package/cjs/table-cell/TableCell.js.map +1 -0
  65. package/cjs/table-cell/TableGroupCell.css.js +6 -0
  66. package/cjs/table-cell/TableGroupCell.css.js.map +1 -0
  67. package/cjs/table-cell/TableGroupCell.js +54 -0
  68. package/cjs/table-cell/TableGroupCell.js.map +1 -0
  69. package/cjs/table-config.js +25 -0
  70. package/cjs/table-config.js.map +1 -0
  71. package/cjs/table-dom-utils.js +60 -0
  72. package/cjs/table-dom-utils.js.map +1 -0
  73. package/cjs/table-header/TableHeader.js +87 -0
  74. package/cjs/table-header/TableHeader.js.map +1 -0
  75. package/cjs/table-header/useTableHeader.js +72 -0
  76. package/cjs/table-header/useTableHeader.js.map +1 -0
  77. package/cjs/useCell.js +28 -0
  78. package/cjs/useCell.js.map +1 -0
  79. package/cjs/useCellEditing.js +79 -0
  80. package/cjs/useCellEditing.js.map +1 -0
  81. package/cjs/useControlledTableNavigation.js +43 -0
  82. package/cjs/useControlledTableNavigation.js.map +1 -0
  83. package/cjs/useDataSource.js +104 -0
  84. package/cjs/useDataSource.js.map +1 -0
  85. package/cjs/useInitialValue.js +11 -0
  86. package/cjs/useInitialValue.js.map +1 -0
  87. package/cjs/useKeyboardNavigation.js +304 -0
  88. package/cjs/useKeyboardNavigation.js.map +1 -0
  89. package/cjs/useRowClassNameGenerators.js +34 -0
  90. package/cjs/useRowClassNameGenerators.js.map +1 -0
  91. package/cjs/useRowHeight.js +43 -0
  92. package/cjs/useRowHeight.js.map +1 -0
  93. package/cjs/useSelection.js +64 -0
  94. package/cjs/useSelection.js.map +1 -0
  95. package/cjs/useTable.js +553 -0
  96. package/cjs/useTable.js.map +1 -0
  97. package/cjs/useTableAndColumnSettings.js +128 -0
  98. package/cjs/useTableAndColumnSettings.js.map +1 -0
  99. package/cjs/useTableContextMenu.js +42 -0
  100. package/cjs/useTableContextMenu.js.map +1 -0
  101. package/cjs/useTableModel.js +297 -0
  102. package/cjs/useTableModel.js.map +1 -0
  103. package/cjs/useTableScroll.js +396 -0
  104. package/cjs/useTableScroll.js.map +1 -0
  105. package/cjs/useTableViewport.js +122 -0
  106. package/cjs/useTableViewport.js.map +1 -0
  107. package/esm/Row.css.js +4 -0
  108. package/esm/Row.css.js.map +1 -0
  109. package/esm/Row.js +127 -0
  110. package/esm/Row.js.map +1 -0
  111. package/esm/Table.css.js +4 -0
  112. package/esm/Table.css.js.map +1 -0
  113. package/esm/Table.js +283 -0
  114. package/esm/Table.js.map +1 -0
  115. package/esm/cell-renderers/checkbox-cell/CheckboxCell.css.js +4 -0
  116. package/esm/cell-renderers/checkbox-cell/CheckboxCell.css.js.map +1 -0
  117. package/esm/cell-renderers/checkbox-cell/CheckboxCell.js +40 -0
  118. package/esm/cell-renderers/checkbox-cell/CheckboxCell.js.map +1 -0
  119. package/esm/cell-renderers/input-cell/InputCell.css.js +4 -0
  120. package/esm/cell-renderers/input-cell/InputCell.css.js.map +1 -0
  121. package/esm/cell-renderers/input-cell/InputCell.js +56 -0
  122. package/esm/cell-renderers/input-cell/InputCell.js.map +1 -0
  123. package/esm/cell-renderers/toggle-cell/ToggleCell.css.js +4 -0
  124. package/esm/cell-renderers/toggle-cell/ToggleCell.css.js.map +1 -0
  125. package/esm/cell-renderers/toggle-cell/ToggleCell.js +66 -0
  126. package/esm/cell-renderers/toggle-cell/ToggleCell.js.map +1 -0
  127. package/esm/column-header-pill/ColumnHeaderPill.css.js +4 -0
  128. package/esm/column-header-pill/ColumnHeaderPill.css.js.map +1 -0
  129. package/esm/column-header-pill/ColumnHeaderPill.js +51 -0
  130. package/esm/column-header-pill/ColumnHeaderPill.js.map +1 -0
  131. package/esm/column-header-pill/GroupColumnPill.css.js +4 -0
  132. package/esm/column-header-pill/GroupColumnPill.css.js.map +1 -0
  133. package/esm/column-header-pill/GroupColumnPill.js +27 -0
  134. package/esm/column-header-pill/GroupColumnPill.js.map +1 -0
  135. package/esm/column-header-pill/SortIndicator.css.js +4 -0
  136. package/esm/column-header-pill/SortIndicator.css.js.map +1 -0
  137. package/esm/column-header-pill/SortIndicator.js +25 -0
  138. package/esm/column-header-pill/SortIndicator.js.map +1 -0
  139. package/esm/column-menu/ColumnMenu.css.js +4 -0
  140. package/esm/column-menu/ColumnMenu.css.js.map +1 -0
  141. package/esm/column-menu/ColumnMenu.js +28 -0
  142. package/esm/column-menu/ColumnMenu.js.map +1 -0
  143. package/esm/column-resizing/ColumnResizer.css.js +4 -0
  144. package/esm/column-resizing/ColumnResizer.css.js.map +1 -0
  145. package/esm/column-resizing/ColumnResizer.js +70 -0
  146. package/esm/column-resizing/ColumnResizer.js.map +1 -0
  147. package/esm/column-resizing/useTableColumnResize.js +53 -0
  148. package/esm/column-resizing/useTableColumnResize.js.map +1 -0
  149. package/esm/context-menu/buildContextMenuDescriptors.js +212 -0
  150. package/esm/context-menu/buildContextMenuDescriptors.js.map +1 -0
  151. package/esm/context-menu/useHandleTableContextMenu.js +79 -0
  152. package/esm/context-menu/useHandleTableContextMenu.js.map +1 -0
  153. package/esm/header-cell/GroupHeaderCell.css.js +4 -0
  154. package/esm/header-cell/GroupHeaderCell.css.js.map +1 -0
  155. package/esm/header-cell/GroupHeaderCell.js +115 -0
  156. package/esm/header-cell/GroupHeaderCell.js.map +1 -0
  157. package/esm/header-cell/HeaderCell.css.js +4 -0
  158. package/esm/header-cell/HeaderCell.css.js.map +1 -0
  159. package/esm/header-cell/HeaderCell.js +107 -0
  160. package/esm/header-cell/HeaderCell.js.map +1 -0
  161. package/esm/index.js +14 -0
  162. package/esm/index.js.map +1 -0
  163. package/esm/moving-window.js +59 -0
  164. package/esm/moving-window.js.map +1 -0
  165. package/esm/table-cell/TableCell.css.js +4 -0
  166. package/esm/table-cell/TableCell.css.js.map +1 -0
  167. package/esm/table-cell/TableCell.js +70 -0
  168. package/esm/table-cell/TableCell.js.map +1 -0
  169. package/esm/table-cell/TableGroupCell.css.js +4 -0
  170. package/esm/table-cell/TableGroupCell.css.js.map +1 -0
  171. package/esm/table-cell/TableGroupCell.js +52 -0
  172. package/esm/table-cell/TableGroupCell.js.map +1 -0
  173. package/esm/table-config.js +23 -0
  174. package/esm/table-config.js.map +1 -0
  175. package/esm/table-dom-utils.js +51 -0
  176. package/esm/table-dom-utils.js.map +1 -0
  177. package/esm/table-header/TableHeader.js +85 -0
  178. package/esm/table-header/TableHeader.js.map +1 -0
  179. package/esm/table-header/useTableHeader.js +70 -0
  180. package/esm/table-header/useTableHeader.js.map +1 -0
  181. package/esm/useCell.js +26 -0
  182. package/esm/useCell.js.map +1 -0
  183. package/esm/useCellEditing.js +77 -0
  184. package/esm/useCellEditing.js.map +1 -0
  185. package/esm/useControlledTableNavigation.js +41 -0
  186. package/esm/useControlledTableNavigation.js.map +1 -0
  187. package/esm/useDataSource.js +101 -0
  188. package/esm/useDataSource.js.map +1 -0
  189. package/esm/useInitialValue.js +9 -0
  190. package/esm/useInitialValue.js.map +1 -0
  191. package/esm/useKeyboardNavigation.js +300 -0
  192. package/esm/useKeyboardNavigation.js.map +1 -0
  193. package/esm/useRowClassNameGenerators.js +32 -0
  194. package/esm/useRowClassNameGenerators.js.map +1 -0
  195. package/esm/useRowHeight.js +41 -0
  196. package/esm/useRowHeight.js.map +1 -0
  197. package/esm/useSelection.js +62 -0
  198. package/esm/useSelection.js.map +1 -0
  199. package/esm/useTable.js +551 -0
  200. package/esm/useTable.js.map +1 -0
  201. package/esm/useTableAndColumnSettings.js +126 -0
  202. package/esm/useTableAndColumnSettings.js.map +1 -0
  203. package/esm/useTableContextMenu.js +40 -0
  204. package/esm/useTableContextMenu.js.map +1 -0
  205. package/esm/useTableModel.js +293 -0
  206. package/esm/useTableModel.js.map +1 -0
  207. package/esm/useTableScroll.js +393 -0
  208. package/esm/useTableScroll.js.map +1 -0
  209. package/esm/useTableViewport.js +120 -0
  210. package/esm/useTableViewport.js.map +1 -0
  211. package/package.json +42 -0
  212. package/types/Row.d.ts +23 -0
  213. package/types/Table.d.ts +91 -0
  214. package/types/cell-renderers/checkbox-cell/CheckboxCell.d.ts +3 -0
  215. package/types/cell-renderers/checkbox-cell/index.d.ts +1 -0
  216. package/types/cell-renderers/index.d.ts +3 -0
  217. package/types/cell-renderers/input-cell/InputCell.d.ts +3 -0
  218. package/types/cell-renderers/input-cell/index.d.ts +1 -0
  219. package/types/cell-renderers/toggle-cell/ToggleCell.d.ts +3 -0
  220. package/types/cell-renderers/toggle-cell/index.d.ts +1 -0
  221. package/types/column-header-pill/ColumnHeaderPill.d.ts +8 -0
  222. package/types/column-header-pill/GroupColumnPill.d.ts +7 -0
  223. package/types/column-header-pill/SortIndicator.d.ts +6 -0
  224. package/types/column-header-pill/index.d.ts +3 -0
  225. package/types/column-menu/ColumnMenu.d.ts +6 -0
  226. package/types/column-menu/index.d.ts +1 -0
  227. package/types/column-resizing/ColumnResizer.d.ts +7 -0
  228. package/types/column-resizing/index.d.ts +2 -0
  229. package/types/column-resizing/useTableColumnResize.d.ts +15 -0
  230. package/types/context-menu/buildContextMenuDescriptors.d.ts +3 -0
  231. package/types/context-menu/index.d.ts +2 -0
  232. package/types/context-menu/useHandleTableContextMenu.d.ts +20 -0
  233. package/types/header-cell/GroupHeaderCell.d.ts +8 -0
  234. package/types/header-cell/HeaderCell.d.ts +3 -0
  235. package/types/header-cell/index.d.ts +2 -0
  236. package/types/index.d.ts +11 -0
  237. package/types/moving-window.d.ts +14 -0
  238. package/types/table-cell/TableCell.d.ts +3 -0
  239. package/types/table-cell/TableGroupCell.d.ts +3 -0
  240. package/types/table-cell/index.d.ts +2 -0
  241. package/types/table-config.d.ts +25 -0
  242. package/types/table-dom-utils.d.ts +14 -0
  243. package/types/table-header/TableHeader.d.ts +19 -0
  244. package/types/table-header/useTableHeader.d.ts +15 -0
  245. package/types/useCell.d.ts +6 -0
  246. package/types/useCellEditing.d.ts +10 -0
  247. package/types/useControlledTableNavigation.d.ts +7 -0
  248. package/types/useDataSource.d.ts +20 -0
  249. package/types/useInitialValue.d.ts +1 -0
  250. package/types/useKeyboardNavigation.d.ts +36 -0
  251. package/types/useResizeObserver.d.ts +15 -0
  252. package/types/useRowClassNameGenerators.d.ts +3 -0
  253. package/types/useRowHeight.d.ts +8 -0
  254. package/types/useSelection.d.ts +14 -0
  255. package/types/useTable.d.ts +71 -0
  256. package/types/useTableAndColumnSettings.d.ts +15 -0
  257. package/types/useTableContextMenu.d.ts +10 -0
  258. package/types/useTableModel.d.ts +103 -0
  259. package/types/useTableScroll.d.ts +57 -0
  260. package/types/useTableViewport.d.ts +41 -0
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Table.js","sources":["../src/Table.tsx"],"sourcesContent":["import {\n DataSource,\n SchemaColumn,\n SelectionChangeHandler,\n VuuFeatureInvocationMessage,\n} from \"@vuu-ui/vuu-data-types\";\nimport { ContextMenuProvider } from \"@vuu-ui/vuu-popups\";\nimport {\n TableConfig,\n TableConfigChangeHandler,\n TableRowClickHandler,\n TableRowSelectHandler,\n TableSelectionModel,\n} from \"@vuu-ui/vuu-table-types\";\nimport type { DragDropState } from \"@vuu-ui/vuu-ui-controls\";\nimport {\n DragStartHandler,\n dragStrategy,\n MeasuredContainer,\n MeasuredContainerProps,\n MeasuredSize,\n} from \"@vuu-ui/vuu-ui-controls\";\nimport { metadataKeys, useId } from \"@vuu-ui/vuu-utils\";\nimport { useForkRef } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport {\n CSSProperties,\n FC,\n ForwardedRef,\n forwardRef,\n RefObject,\n useRef,\n useState,\n} from \"react\";\nimport { Row as DefaultRow, RowProps, RowProxy } from \"./Row\";\nimport { TableHeader } from \"./table-header/TableHeader\";\nimport { useRowHeight } from \"./useRowHeight\";\nimport { useTable } from \"./useTable\";\nimport { ScrollingAPI } from \"./useTableScroll\";\n\nimport tableCss from \"./Table.css\";\n\nconst classBase = \"vuuTable\";\n\nconst { IDX, RENDER_IDX } = metadataKeys;\n\nexport type TableNavigationStyle = \"none\" | \"cell\" | \"row\";\n\nexport interface TableProps\n extends Omit<MeasuredContainerProps, \"onDragStart\" | \"onDrop\" | \"onSelect\"> {\n Row?: FC<RowProps>;\n allowConfigEditing?: boolean;\n allowDragDrop?: boolean | dragStrategy;\n /**\n * required if a fully featured column picker is to be available\n */\n availableColumns?: SchemaColumn[];\n /**\n * Provide configuration settings for Table. At minimun, column\n * descriptors must be provided.\n */\n config: TableConfig;\n dataSource: DataSource;\n disableFocus?: boolean;\n /**\n * Pixel height of headers. If specified here, this will take precedence over CSS\n * values and Table will not respond to density changes. Default value is 125% of\n * rowHeight, whether set vis rowHeight prop or CSS.\n */\n headerHeight?: number;\n /**\n * Defined how focus navigation within data cells will be handled by table.\n * Default is cell.\n */\n highlightedIndex?: number;\n navigationStyle?: TableNavigationStyle;\n /**\n * required if a fully featured column picker is to be available.\n * Available columns can be changed by the addition or removal of\n * one or more calculated columns.\n */\n onAvailableColumnsChange?: (columns: SchemaColumn[]) => void;\n /**\n * This callback will be invoked any time a config attribute of TableConfig\n * is changed. By persisting this value and providing it to the Table as a\n * prop, table state can be persisted across sessions.\n */\n onConfigChange?: TableConfigChangeHandler;\n onDragStart?: DragStartHandler;\n onDrop?: (dragDropState: DragDropState) => void;\n /**\n * When a Vuu feature e.g. context menu action, has been invoked, the Vuu server\n * response must be handled. This callback provides that response.\n */\n onFeatureInvocation?: (message: VuuFeatureInvocationMessage) => void;\n\n onHighlight?: (idx: number) => void;\n /**\n * callback invoked when user 'clicks' a table row. CLick triggered either\n * via mouse click or keyboard (default ENTER);\n */\n onRowClick?: TableRowClickHandler;\n onSelect?: TableRowSelectHandler;\n onSelectionChange?: SelectionChangeHandler;\n renderBufferSize?: number;\n /**\n * Pixel height of rows. If specified here, this will take precedence over CSS\n * values and Table will not respond to density changes.\n */\n rowHeight?: number;\n /**\n * imperative API for scrolling table\n */\n scrollingApiRef?: ForwardedRef<ScrollingAPI>;\n\n /**\n * Selection Bookends style the left and right edge of a selection block.\n * They are optional, value defaults to zero.\n * TODO this should just live in CSS\n */\n selectionBookendWidth?: number;\n selectionModel?: TableSelectionModel;\n /**\n * if false, table rendered without headers. Useful when table is being included in a\n * composite component.\n */\n showColumnHeaders?: boolean;\n /**\n * if false, column headers will not display menu icon. Menu items are still available\n * from contexct menu\n */\n showColumnHeaderMenus?: boolean;\n}\n\nconst TableCore = ({\n Row = DefaultRow,\n allowDragDrop,\n availableColumns,\n config,\n containerRef,\n dataSource,\n disableFocus = false,\n highlightedIndex: highlightedIndexProp,\n id: idProp,\n navigationStyle = \"cell\",\n onAvailableColumnsChange,\n onConfigChange,\n onDragStart,\n onDrop,\n onFeatureInvocation,\n onHighlight,\n onRowClick: onRowClickProp,\n onSelect,\n onSelectionChange,\n renderBufferSize = 5,\n rowHeight,\n scrollingApiRef,\n selectionModel = \"extended\",\n showColumnHeaders = true,\n showColumnHeaderMenus = true,\n headerHeight = showColumnHeaders ? rowHeight * 1.25 : 0,\n size,\n}: Omit<TableProps, \"rowHeight\"> & {\n containerRef: RefObject<HTMLDivElement>;\n rowHeight: number;\n size: MeasuredSize;\n}) => {\n const id = useId(idProp);\n const {\n columnMap,\n columns,\n data,\n draggableRow,\n getRowOffset,\n handleContextMenuAction,\n headings,\n highlightedIndex,\n menuBuilder,\n onDataEdited,\n onMoveColumn,\n onMoveGroupColumn,\n onRemoveGroupColumn,\n onResizeColumn,\n onRowClick,\n onSortColumn,\n onToggleGroup,\n rowClassNameGenerator,\n scrollProps,\n tableAttributes,\n tableConfig,\n viewportMeasurements,\n ...tableProps\n } = useTable({\n allowDragDrop,\n availableColumns,\n config,\n containerRef,\n dataSource,\n disableFocus,\n headerHeight,\n highlightedIndex: highlightedIndexProp,\n id,\n navigationStyle,\n onAvailableColumnsChange,\n onConfigChange,\n onDragStart,\n onDrop,\n onFeatureInvocation,\n onHighlight,\n onRowClick: onRowClickProp,\n onSelect,\n onSelectionChange,\n renderBufferSize: Math.max(5, renderBufferSize),\n rowHeight,\n scrollingApiRef,\n selectionModel,\n size,\n });\n\n const contentContainerClassName = cx(`${classBase}-contentContainer`, {\n [`${classBase}-colLines`]: tableAttributes.columnSeparators,\n [`${classBase}-rowLines`]: tableAttributes.rowSeparators,\n [`${classBase}-zebra`]: tableAttributes.zebraStripes,\n });\n\n const cssVariables = {\n \"--content-height\": `${viewportMeasurements.contentHeight}px`,\n \"--content-width\": `${viewportMeasurements.contentWidth}px`,\n \"--horizontal-scrollbar-height\": `${viewportMeasurements.horizontalScrollbarHeight}px`,\n \"--pinned-width-left\": `${viewportMeasurements.pinnedWidthLeft}px`,\n \"--pinned-width-right\": `${viewportMeasurements.pinnedWidthRight}px`,\n \"--header-height\": `${headerHeight}px`,\n \"--row-height-prop\": `${rowHeight}px`,\n \"--total-header-height\": `${viewportMeasurements.totalHeaderHeight}px`,\n \"--vertical-scrollbar-width\": `${viewportMeasurements.verticalScrollbarWidth}px`,\n \"--viewport-body-height\": `${viewportMeasurements.viewportBodyHeight}px`,\n } as CSSProperties;\n\n return (\n <ContextMenuProvider\n menuActionHandler={handleContextMenuAction}\n menuBuilder={menuBuilder}\n >\n <div\n className={`${classBase}-scrollbarContainer`}\n ref={scrollProps.scrollbarContainerRef}\n style={cssVariables}\n >\n <div className={`${classBase}-scrollbarContent`} />\n </div>\n <div\n className={contentContainerClassName}\n ref={scrollProps.contentContainerRef}\n style={cssVariables}\n >\n <div\n {...tableProps}\n className={`${classBase}-table`}\n role=\"table\"\n tabIndex={disableFocus ? undefined : -1}\n >\n {showColumnHeaders ? (\n <TableHeader\n columns={scrollProps.columnsWithinViewport}\n headings={headings}\n onMoveColumn={onMoveColumn}\n onMoveGroupColumn={onMoveGroupColumn}\n onRemoveGroupColumn={onRemoveGroupColumn}\n onResizeColumn={onResizeColumn}\n onSortColumn={onSortColumn}\n showColumnHeaderMenus={showColumnHeaderMenus}\n tableConfig={tableConfig}\n tableId={id}\n virtualColSpan={scrollProps.virtualColSpan}\n />\n ) : null}\n <div className={`${classBase}-body`}>\n {data.map((data) => (\n <Row\n aria-rowindex={data[0] + 1}\n classNameGenerator={rowClassNameGenerator}\n columnMap={columnMap}\n columns={scrollProps.columnsWithinViewport}\n highlighted={highlightedIndex === data[IDX]}\n key={data[RENDER_IDX]}\n onClick={onRowClick}\n onDataEdited={onDataEdited}\n row={data}\n offset={getRowOffset(data)}\n onToggleGroup={onToggleGroup}\n virtualColSpan={scrollProps.virtualColSpan}\n zebraStripes={tableAttributes.zebraStripes}\n />\n ))}\n </div>\n </div>\n </div>\n {draggableRow}\n </ContextMenuProvider>\n );\n};\n\nexport const Table = forwardRef(function TableNext(\n {\n Row,\n allowDragDrop,\n availableColumns,\n className: classNameProp,\n config,\n dataSource,\n disableFocus,\n highlightedIndex,\n id,\n navigationStyle,\n onAvailableColumnsChange,\n onConfigChange,\n onDragStart,\n onDrop,\n onFeatureInvocation,\n onHighlight,\n onRowClick,\n onSelect,\n onSelectionChange,\n renderBufferSize,\n rowHeight: rowHeightProp,\n scrollingApiRef,\n selectionModel,\n showColumnHeaders,\n showColumnHeaderMenus,\n headerHeight,\n style: styleProp,\n ...htmlAttributes\n }: TableProps,\n forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-table\",\n css: tableCss,\n window: targetWindow,\n });\n\n const containerRef = useRef<HTMLDivElement>(null);\n\n const [size, setSize] = useState<MeasuredSize>();\n\n const { rowHeight, rowRef } = useRowHeight({ rowHeight: rowHeightProp });\n\n if (config === undefined) {\n throw Error(\n \"vuu Table requires config prop. Minimum config is list of Column Descriptors\"\n );\n }\n if (dataSource === undefined) {\n throw Error(\"vuu Table requires dataSource prop\");\n }\n\n return (\n <MeasuredContainer\n {...htmlAttributes}\n className={cx(classBase, classNameProp)}\n id={id}\n onResize={setSize}\n ref={useForkRef(containerRef, forwardedRef)}\n >\n <RowProxy ref={rowRef} height={rowHeightProp} />\n\n {size && rowHeight ? (\n <TableCore\n Row={Row}\n allowDragDrop={allowDragDrop}\n availableColumns={availableColumns}\n config={config}\n containerRef={containerRef}\n dataSource={dataSource}\n disableFocus={disableFocus}\n headerHeight={headerHeight}\n highlightedIndex={highlightedIndex}\n id={id}\n navigationStyle={navigationStyle}\n onAvailableColumnsChange={onAvailableColumnsChange}\n onConfigChange={onConfigChange}\n onDragStart={onDragStart}\n onDrop={onDrop}\n onFeatureInvocation={onFeatureInvocation}\n onHighlight={onHighlight}\n onRowClick={onRowClick}\n onSelect={onSelect}\n onSelectionChange={onSelectionChange}\n renderBufferSize={renderBufferSize}\n rowHeight={rowHeight}\n scrollingApiRef={scrollingApiRef}\n selectionModel={selectionModel}\n showColumnHeaders={showColumnHeaders}\n showColumnHeaderMenus={showColumnHeaderMenus}\n size={size}\n />\n ) : null}\n </MeasuredContainer>\n );\n});\n"],"names":["metadataKeys","Row","DefaultRow","useId","useTable","jsxs","ContextMenuProvider","jsx","TableHeader","data","forwardRef","useWindow","useComponentCssInjection","tableCss","useRef","useState","useRowHeight","MeasuredContainer","useForkRef","RowProxy"],"mappings":"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"}
@@ -0,0 +1,6 @@
1
+ 'use strict';
2
+
3
+ var checkboxCss = ".vuuTableCell {\n .vuuCheckboxIcon {\n margin-top: calc(var(--row-height) / 2 - 6px ); \n }\n}";
4
+
5
+ module.exports = checkboxCss;
6
+ //# sourceMappingURL=CheckboxCell.css.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"CheckboxCell.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
@@ -0,0 +1,42 @@
1
+ 'use strict';
2
+
3
+ var jsxRuntime = require('react/jsx-runtime');
4
+ var react = require('react');
5
+ var vuuUiControls = require('@vuu-ui/vuu-ui-controls');
6
+ var core = require('@salt-ds/core');
7
+ var vuuUtils = require('@vuu-ui/vuu-utils');
8
+ var styles = require('@salt-ds/styles');
9
+ var window = require('@salt-ds/window');
10
+ var CheckboxCell$1 = require('./CheckboxCell.css.js');
11
+
12
+ const CheckboxCell = react.memo(
13
+ ({ column, columnMap, onCommit = vuuUiControls.WarnCommit, row }) => {
14
+ const targetWindow = window.useWindow();
15
+ styles.useComponentCssInjection({
16
+ testId: "vuu-checkbox-cell",
17
+ css: CheckboxCell$1,
18
+ window: targetWindow
19
+ });
20
+ const dataIdx = columnMap[column.name];
21
+ const isChecked = !!row[dataIdx];
22
+ const handleCommit = react.useCallback(
23
+ (value) => async (evt) => {
24
+ const res = await onCommit(value);
25
+ if (res === true) {
26
+ vuuUtils.dispatchCustomEvent(evt.target, "vuu-commit");
27
+ }
28
+ return res;
29
+ },
30
+ [onCommit]
31
+ );
32
+ return column.editable ? /* @__PURE__ */ jsxRuntime.jsx(core.Checkbox, { checked: isChecked, onClick: handleCommit(!isChecked) }) : /* @__PURE__ */ jsxRuntime.jsx(vuuUiControls.CheckboxIcon, { checked: isChecked, disabled: true });
33
+ },
34
+ vuuUtils.dataColumnAndKeyUnchanged
35
+ );
36
+ CheckboxCell.displayName = "CheckboxCell";
37
+ vuuUtils.registerComponent("checkbox-cell", CheckboxCell, "cell-renderer", {
38
+ serverDataType: "boolean"
39
+ });
40
+
41
+ exports.CheckboxCell = CheckboxCell;
42
+ //# sourceMappingURL=CheckboxCell.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"CheckboxCell.js","sources":["../../../src/cell-renderers/checkbox-cell/CheckboxCell.tsx"],"sourcesContent":["import React, { memo, useCallback } from \"react\";\nimport { TableCellRendererProps } from \"@vuu-ui/vuu-table-types\";\nimport { CheckboxIcon, WarnCommit } from \"@vuu-ui/vuu-ui-controls\";\nimport { Checkbox } from \"@salt-ds/core\";\nimport {\n dataColumnAndKeyUnchanged,\n dispatchCustomEvent,\n registerComponent,\n} from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport checkboxCss from \"./CheckboxCell.css\";\n\nexport const CheckboxCell: React.FC<TableCellRendererProps> = memo(\n ({ column, columnMap, onCommit = WarnCommit, row }) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-checkbox-cell\",\n css: checkboxCss,\n window: targetWindow,\n });\n\n const dataIdx = columnMap[column.name];\n const isChecked = !!row[dataIdx];\n\n const handleCommit = useCallback(\n (value) => async (evt: React.MouseEvent) => {\n const res = await onCommit(value);\n if (res === true) {\n dispatchCustomEvent(evt.target as HTMLElement, \"vuu-commit\");\n }\n return res;\n },\n [onCommit]\n );\n\n return column.editable ? (\n <Checkbox checked={isChecked} onClick={handleCommit(!isChecked)} />\n ) : (\n <CheckboxIcon checked={isChecked} disabled={true} />\n );\n },\n dataColumnAndKeyUnchanged\n);\nCheckboxCell.displayName = \"CheckboxCell\";\n\nregisterComponent(\"checkbox-cell\", CheckboxCell, \"cell-renderer\", {\n serverDataType: \"boolean\",\n});\n"],"names":["memo","WarnCommit","useWindow","useComponentCssInjection","checkboxCss","useCallback","dispatchCustomEvent","jsx","Checkbox","CheckboxIcon","dataColumnAndKeyUnchanged","registerComponent"],"mappings":";;;;;;;;;;;AAcO,MAAM,YAAiD,GAAAA,UAAA;AAAA,EAC5D,CAAC,EAAE,MAAA,EAAQ,WAAW,QAAW,GAAAC,wBAAA,EAAY,KAAU,KAAA;AACrD,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,mBAAA;AAAA,MACR,GAAK,EAAAC,cAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAM,MAAA,OAAA,GAAU,SAAU,CAAA,MAAA,CAAO,IAAI,CAAA,CAAA;AACrC,IAAA,MAAM,SAAY,GAAA,CAAC,CAAC,GAAA,CAAI,OAAO,CAAA,CAAA;AAE/B,IAAA,MAAM,YAAe,GAAAC,iBAAA;AAAA,MACnB,CAAC,KAAU,KAAA,OAAO,GAA0B,KAAA;AAC1C,QAAM,MAAA,GAAA,GAAM,MAAM,QAAA,CAAS,KAAK,CAAA,CAAA;AAChC,QAAA,IAAI,QAAQ,IAAM,EAAA;AAChB,UAAoBC,4BAAA,CAAA,GAAA,CAAI,QAAuB,YAAY,CAAA,CAAA;AAAA,SAC7D;AACA,QAAO,OAAA,GAAA,CAAA;AAAA,OACT;AAAA,MACA,CAAC,QAAQ,CAAA;AAAA,KACX,CAAA;AAEA,IAAA,OAAO,OAAO,QACZ,mBAAAC,cAAA,CAACC,aAAS,EAAA,EAAA,OAAA,EAAS,WAAW,OAAS,EAAA,YAAA,CAAa,CAAC,SAAS,GAAG,CAEjE,mBAAAD,cAAA,CAACE,8BAAa,OAAS,EAAA,SAAA,EAAW,UAAU,IAAM,EAAA,CAAA,CAAA;AAAA,GAEtD;AAAA,EACAC,kCAAA;AACF,EAAA;AACA,YAAA,CAAa,WAAc,GAAA,cAAA,CAAA;AAE3BC,0BAAkB,CAAA,eAAA,EAAiB,cAAc,eAAiB,EAAA;AAAA,EAChE,cAAgB,EAAA,SAAA;AAClB,CAAC,CAAA;;;;"}
@@ -0,0 +1,6 @@
1
+ 'use strict';
2
+
3
+ var inputCellCss = "\n.vuuTableInputCell.saltInput-primary {\n --salt-focused-outlineStyle: none;\n --saltInput-height: var(--vuu-table-embedded-control-height);\n --saltInput-minHeight: var(--saltInput-height);\n border-radius: 4px;\n font-weight: 500;\n}\n\n.vuuTableCell:focus .vuuTableInputCell.saltInput-primary,\n.vuuTableInputCell.saltInput-primary.saltInput-focused {\n border: solid 2px var(--salt-focused-outlineColor);\n padding: 0 3px;\n}\n\n.vuuTableInputCell-icon {\n --vuu-icon-height: 13px;\n --vuu-icon-size: 15px;\n --vuu-icon-width: 12px;\n border-radius: 10px;\n}\n\n.vuuTableCell:focus .vuuTableInputCell.saltInput-primary.vuuTableInputCell-error,\n.vuuTableInputCell.saltInput-primary.saltInput-focused.vuuTableInputCell-error {\n border: solid 2px var(--vuu-color-red-50);\n}\n\n\n.vuuTableInputCell-error.saltInput-primary {\n border: solid 1px var(--vuu-color-red-50);\n}";
4
+
5
+ module.exports = inputCellCss;
6
+ //# sourceMappingURL=InputCell.css.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"InputCell.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
@@ -0,0 +1,58 @@
1
+ 'use strict';
2
+
3
+ var jsxRuntime = require('react/jsx-runtime');
4
+ var vuuUtils = require('@vuu-ui/vuu-utils');
5
+ var core = require('@salt-ds/core');
6
+ var vuuUiControls = require('@vuu-ui/vuu-ui-controls');
7
+ var styles = require('@salt-ds/styles');
8
+ var window = require('@salt-ds/window');
9
+ var cx = require('clsx');
10
+ var InputCell$1 = require('./InputCell.css.js');
11
+
12
+ const classBase = "vuuTableInputCell";
13
+ const WarnCommit = () => {
14
+ console.warn(
15
+ "onCommit handler has not been provided to InputCell cell renderer"
16
+ );
17
+ return Promise.resolve(true);
18
+ };
19
+ const InputCell = ({
20
+ column,
21
+ columnMap,
22
+ onCommit = WarnCommit,
23
+ row
24
+ }) => {
25
+ const targetWindow = window.useWindow();
26
+ styles.useComponentCssInjection({
27
+ testId: "vuu-input-cell",
28
+ css: InputCell$1,
29
+ window: targetWindow
30
+ });
31
+ const dataIdx = columnMap[column.name];
32
+ const dataValue = row[dataIdx];
33
+ const { align = "left", clientSideEditValidationCheck } = column;
34
+ const { warningMessage, ...editProps } = vuuUiControls.useEditableText({
35
+ initialValue: dataValue,
36
+ onCommit,
37
+ clientSideEditValidationCheck
38
+ });
39
+ const endAdornment = warningMessage && align === "left" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${classBase}-icon`, "data-icon": "error" }) : void 0;
40
+ const startAdornment = warningMessage && align === "right" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${classBase}-icon`, "data-icon": "error" }) : void 0;
41
+ return /* @__PURE__ */ jsxRuntime.jsx(
42
+ core.Input,
43
+ {
44
+ ...editProps,
45
+ className: cx(classBase, {
46
+ [`${classBase}-error`]: warningMessage !== void 0
47
+ }),
48
+ endAdornment,
49
+ startAdornment
50
+ }
51
+ );
52
+ };
53
+ vuuUtils.registerComponent("input-cell", InputCell, "cell-renderer", {
54
+ userCanAssign: false
55
+ });
56
+
57
+ exports.InputCell = InputCell;
58
+ //# sourceMappingURL=InputCell.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"InputCell.js","sources":["../../../src/cell-renderers/input-cell/InputCell.tsx"],"sourcesContent":["import { TableCellRendererProps } from \"@vuu-ui/vuu-table-types\";\nimport { registerComponent } from \"@vuu-ui/vuu-utils\";\nimport { Input } from \"@salt-ds/core\";\nimport { useEditableText } from \"@vuu-ui/vuu-ui-controls\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\n\nimport inputCellCss from \"./InputCell.css\";\n\nconst classBase = \"vuuTableInputCell\";\n\nconst WarnCommit = (): Promise<true> => {\n console.warn(\n \"onCommit handler has not been provided to InputCell cell renderer\"\n );\n return Promise.resolve(true);\n};\nexport const InputCell = ({\n column,\n columnMap,\n onCommit = WarnCommit,\n row,\n}: TableCellRendererProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-input-cell\",\n css: inputCellCss,\n window: targetWindow,\n });\n\n const dataIdx = columnMap[column.name];\n const dataValue = row[dataIdx] as number | string;\n const { align = \"left\", clientSideEditValidationCheck } = column;\n\n const { warningMessage, ...editProps } = useEditableText({\n initialValue: dataValue,\n onCommit,\n clientSideEditValidationCheck,\n });\n\n const endAdornment =\n warningMessage && align === \"left\" ? (\n <span className={`${classBase}-icon`} data-icon=\"error\" />\n ) : undefined;\n\n const startAdornment =\n warningMessage && align === \"right\" ? (\n <span className={`${classBase}-icon`} data-icon=\"error\" />\n ) : undefined;\n\n return (\n <Input\n {...editProps}\n className={cx(classBase, {\n [`${classBase}-error`]: warningMessage !== undefined,\n })}\n endAdornment={endAdornment}\n startAdornment={startAdornment}\n />\n );\n};\n\nregisterComponent(\"input-cell\", InputCell, \"cell-renderer\", {\n userCanAssign: false,\n});\n"],"names":["useWindow","useComponentCssInjection","inputCellCss","useEditableText","jsx","Input","registerComponent"],"mappings":";;;;;;;;;;;AAUA,MAAM,SAAY,GAAA,mBAAA,CAAA;AAElB,MAAM,aAAa,MAAqB;AACtC,EAAQ,OAAA,CAAA,IAAA;AAAA,IACN,mEAAA;AAAA,GACF,CAAA;AACA,EAAO,OAAA,OAAA,CAAQ,QAAQ,IAAI,CAAA,CAAA;AAC7B,CAAA,CAAA;AACO,MAAM,YAAY,CAAC;AAAA,EACxB,MAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAW,GAAA,UAAA;AAAA,EACX,GAAA;AACF,CAA8B,KAAA;AAC5B,EAAA,MAAM,eAAeA,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gBAAA;AAAA,IACR,GAAK,EAAAC,WAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,OAAA,GAAU,SAAU,CAAA,MAAA,CAAO,IAAI,CAAA,CAAA;AACrC,EAAM,MAAA,SAAA,GAAY,IAAI,OAAO,CAAA,CAAA;AAC7B,EAAA,MAAM,EAAE,KAAA,GAAQ,MAAQ,EAAA,6BAAA,EAAkC,GAAA,MAAA,CAAA;AAE1D,EAAA,MAAM,EAAE,cAAA,EAAgB,GAAG,SAAA,KAAcC,6BAAgB,CAAA;AAAA,IACvD,YAAc,EAAA,SAAA;AAAA,IACd,QAAA;AAAA,IACA,6BAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAA,MAAM,YACJ,GAAA,cAAA,IAAkB,KAAU,KAAA,MAAA,mBACzBC,cAAA,CAAA,MAAA,EAAA,EAAK,SAAW,EAAA,CAAA,EAAG,SAAS,CAAA,KAAA,CAAA,EAAS,WAAU,EAAA,OAAA,EAAQ,CACtD,GAAA,KAAA,CAAA,CAAA;AAEN,EAAA,MAAM,cACJ,GAAA,cAAA,IAAkB,KAAU,KAAA,OAAA,mBACzBA,cAAA,CAAA,MAAA,EAAA,EAAK,SAAW,EAAA,CAAA,EAAG,SAAS,CAAA,KAAA,CAAA,EAAS,WAAU,EAAA,OAAA,EAAQ,CACtD,GAAA,KAAA,CAAA,CAAA;AAEN,EACE,uBAAAA,cAAA;AAAA,IAACC,UAAA;AAAA,IAAA;AAAA,MACE,GAAG,SAAA;AAAA,MACJ,SAAA,EAAW,GAAG,SAAW,EAAA;AAAA,QACvB,CAAC,CAAA,EAAG,SAAS,CAAA,MAAA,CAAQ,GAAG,cAAmB,KAAA,KAAA,CAAA;AAAA,OAC5C,CAAA;AAAA,MACD,YAAA;AAAA,MACA,cAAA;AAAA,KAAA;AAAA,GACF,CAAA;AAEJ,EAAA;AAEAC,0BAAkB,CAAA,YAAA,EAAc,WAAW,eAAiB,EAAA;AAAA,EAC1D,aAAe,EAAA,KAAA;AACjB,CAAC,CAAA;;;;"}
@@ -0,0 +1,6 @@
1
+ 'use strict';
2
+
3
+ var toggleCellCss = "\n.vuuTableToggleCell {\n --saltButton-borderRadius: 4px;\n --saltButton-height: 16px;\n font-weight: 500;\n position: relative;\n top: 1px;;\n}\n.vuuTableToggleCell-side {\n --saltButton-minWidth: 40px;\n}\n.vuuTableToggleCell.vuuCycleStateButton-buy {\n background-color: var(--vuu-color-green-50);\n}\n\n.vuuTableToggleCell.vuuCycleStateButton-sell {\n background-color: var(--vuu-color-red-50);\n\n}\n\n.vuuTableCell .vuuTableToggleCell:focus {\n /* TODO fix use of important */\n border: solid 2px var(--vuu-color-purple-10) !important;\n color: white !important;\n height: 18px !important;\n top: 0px !important;\n}\n\n\n\n\n\n";
4
+
5
+ module.exports = toggleCellCss;
6
+ //# sourceMappingURL=ToggleCell.css.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ToggleCell.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
@@ -0,0 +1,68 @@
1
+ 'use strict';
2
+
3
+ var jsxRuntime = require('react/jsx-runtime');
4
+ var vuuUiControls = require('@vuu-ui/vuu-ui-controls');
5
+ var vuuUtils = require('@vuu-ui/vuu-utils');
6
+ var styles = require('@salt-ds/styles');
7
+ var window = require('@salt-ds/window');
8
+ var cx = require('clsx');
9
+ var react = require('react');
10
+ var ToggleCell$1 = require('./ToggleCell.css.js');
11
+
12
+ const classBase = "vuuTableToggleCell";
13
+ const getValueList = ({ name, type }) => {
14
+ if (vuuUtils.isTypeDescriptor(type) && vuuUtils.isValueListRenderer(type.renderer)) {
15
+ return type.renderer.values;
16
+ } else {
17
+ throw Error(
18
+ `useLookupValues column ${name} has not been configured with a values list`
19
+ );
20
+ }
21
+ };
22
+ const ToggleCell = react.memo(
23
+ function ToggleCell2({
24
+ column,
25
+ columnMap,
26
+ onCommit = vuuUiControls.WarnCommit,
27
+ row
28
+ }) {
29
+ const targetWindow = window.useWindow();
30
+ styles.useComponentCssInjection({
31
+ testId: "vuu-toggle-cell",
32
+ css: ToggleCell$1,
33
+ window: targetWindow
34
+ });
35
+ const values = getValueList(column);
36
+ const dataIdx = columnMap[column.name];
37
+ const value = row[dataIdx];
38
+ const handleCommit = react.useCallback(
39
+ (evt, value2) => {
40
+ return onCommit(value2).then((response) => {
41
+ if (response === true) {
42
+ vuuUtils.dispatchCustomEvent(evt.target, "vuu-commit");
43
+ }
44
+ return response;
45
+ });
46
+ },
47
+ [onCommit]
48
+ );
49
+ return /* @__PURE__ */ jsxRuntime.jsx(
50
+ vuuUiControls.CycleStateButton,
51
+ {
52
+ className: cx(classBase, `${classBase}-${column.name}`),
53
+ onCommit: handleCommit,
54
+ value,
55
+ values,
56
+ variant: "cta",
57
+ children: value
58
+ }
59
+ );
60
+ },
61
+ vuuUtils.dataColumnAndKeyUnchanged
62
+ );
63
+ vuuUtils.registerComponent("toggle-cell", ToggleCell, "cell-renderer", {
64
+ userCanAssign: false
65
+ });
66
+
67
+ exports.ToggleCell = ToggleCell;
68
+ //# sourceMappingURL=ToggleCell.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ToggleCell.js","sources":["../../../src/cell-renderers/toggle-cell/ToggleCell.tsx"],"sourcesContent":["import {\n ColumnDescriptor,\n TableCellRendererProps,\n} from \"@vuu-ui/vuu-table-types\";\nimport { CycleStateCommitHandler, WarnCommit } from \"@vuu-ui/vuu-ui-controls\";\nimport {\n dataColumnAndKeyUnchanged,\n dispatchCustomEvent,\n isTypeDescriptor,\n isValueListRenderer,\n registerComponent,\n} from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\n\nimport { memo, useCallback } from \"react\";\nimport { CycleStateButton } from \"@vuu-ui/vuu-ui-controls\";\n\nimport toggleCellCss from \"./ToggleCell.css\";\n\nconst classBase = \"vuuTableToggleCell\";\n\nconst getValueList = ({ name, type }: ColumnDescriptor) => {\n if (isTypeDescriptor(type) && isValueListRenderer(type.renderer)) {\n return type.renderer.values;\n } else {\n throw Error(\n `useLookupValues column ${name} has not been configured with a values list`\n );\n }\n};\n\nexport const ToggleCell = memo(function ToggleCell({\n column,\n columnMap,\n onCommit = WarnCommit,\n row,\n}: TableCellRendererProps) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-toggle-cell\",\n css: toggleCellCss,\n window: targetWindow,\n });\n\n const values = getValueList(column);\n const dataIdx = columnMap[column.name];\n const value = row[dataIdx] as string;\n\n const handleCommit = useCallback<CycleStateCommitHandler>(\n (evt, value) => {\n return onCommit(value).then((response) => {\n if (response === true) {\n dispatchCustomEvent(evt.target as HTMLElement, \"vuu-commit\");\n }\n return response;\n });\n },\n [onCommit]\n );\n\n return (\n <CycleStateButton\n className={cx(classBase, `${classBase}-${column.name}`)}\n onCommit={handleCommit}\n value={value}\n values={values}\n variant=\"cta\"\n >\n {value}\n </CycleStateButton>\n );\n},\ndataColumnAndKeyUnchanged);\n\nregisterComponent(\"toggle-cell\", ToggleCell, \"cell-renderer\", {\n userCanAssign: false,\n});\n"],"names":["isTypeDescriptor","isValueListRenderer","memo","ToggleCell","WarnCommit","useWindow","useComponentCssInjection","toggleCellCss","useCallback","value","dispatchCustomEvent","jsx","CycleStateButton","dataColumnAndKeyUnchanged","registerComponent"],"mappings":";;;;;;;;;;;AAqBA,MAAM,SAAY,GAAA,oBAAA,CAAA;AAElB,MAAM,YAAe,GAAA,CAAC,EAAE,IAAA,EAAM,MAA6B,KAAA;AACzD,EAAA,IAAIA,0BAAiB,IAAI,CAAA,IAAKC,4BAAoB,CAAA,IAAA,CAAK,QAAQ,CAAG,EAAA;AAChE,IAAA,OAAO,KAAK,QAAS,CAAA,MAAA,CAAA;AAAA,GAChB,MAAA;AACL,IAAM,MAAA,KAAA;AAAA,MACJ,0BAA0B,IAAI,CAAA,2CAAA,CAAA;AAAA,KAChC,CAAA;AAAA,GACF;AACF,CAAA,CAAA;AAEO,MAAM,UAAa,GAAAC,UAAA;AAAA,EAAK,SAASC,WAAW,CAAA;AAAA,IACjD,MAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAW,GAAAC,wBAAA;AAAA,IACX,GAAA;AAAA,GACyB,EAAA;AACzB,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,iBAAA;AAAA,MACR,GAAK,EAAAC,YAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAM,MAAA,MAAA,GAAS,aAAa,MAAM,CAAA,CAAA;AAClC,IAAM,MAAA,OAAA,GAAU,SAAU,CAAA,MAAA,CAAO,IAAI,CAAA,CAAA;AACrC,IAAM,MAAA,KAAA,GAAQ,IAAI,OAAO,CAAA,CAAA;AAEzB,IAAA,MAAM,YAAe,GAAAC,iBAAA;AAAA,MACnB,CAAC,KAAKC,MAAU,KAAA;AACd,QAAA,OAAO,QAASA,CAAAA,MAAK,CAAE,CAAA,IAAA,CAAK,CAAC,QAAa,KAAA;AACxC,UAAA,IAAI,aAAa,IAAM,EAAA;AACrB,YAAoBC,4BAAA,CAAA,GAAA,CAAI,QAAuB,YAAY,CAAA,CAAA;AAAA,WAC7D;AACA,UAAO,OAAA,QAAA,CAAA;AAAA,SACR,CAAA,CAAA;AAAA,OACH;AAAA,MACA,CAAC,QAAQ,CAAA;AAAA,KACX,CAAA;AAEA,IACE,uBAAAC,cAAA;AAAA,MAACC,8BAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,GAAG,SAAW,EAAA,CAAA,EAAG,SAAS,CAAI,CAAA,EAAA,MAAA,CAAO,IAAI,CAAE,CAAA,CAAA;AAAA,QACtD,QAAU,EAAA,YAAA;AAAA,QACV,KAAA;AAAA,QACA,MAAA;AAAA,QACA,OAAQ,EAAA,KAAA;AAAA,QAEP,QAAA,EAAA,KAAA;AAAA,OAAA;AAAA,KACH,CAAA;AAAA,GAEJ;AAAA,EACAC,kCAAA;AAAyB,EAAA;AAEzBC,0BAAkB,CAAA,aAAA,EAAe,YAAY,eAAiB,EAAA;AAAA,EAC5D,aAAe,EAAA,KAAA;AACjB,CAAC,CAAA;;;;"}
@@ -0,0 +1,6 @@
1
+ 'use strict';
2
+
3
+ var columnHeaderPillCss = ".vuuColumnHeaderPill {\n --vuu-icon-size: 14px;\n --menu-item-icon-color: black;\n --vuu-icon-color: var(--salt-actionable-primary-foreground);\n --vuu-icon-height: 12px;\n --vuu-icon-width: 12px;\n align-items: center;\n background: var(--salt-actionable-primary-background);\n color: var(--salt-actionable-primary-foreground);\n border-radius: 4px;\n flex: var(--vuuColumnHeaderPill-flex, none);\n font-size: 11px;\n gap: 4px;\n height: 16px;\n display: flex;\n margin: var(--vuuColumnHeaderPill-margin, 0);\n padding: 0 6px;\n position: relative; \n}\n\n.vuuColumnHeaderPill:hover {\n --vuu-icon-color: var(--salt-actionable-primary-foreground-hover);\n background-color: var(--salt-actionable-primary-background-hover);\n color: var(--salt-actionable-primary-foreground-hover);\n \n}\n\n.vuuColumnHeaderPill-removeButton {\n cursor: pointer;\n}";
4
+
5
+ module.exports = columnHeaderPillCss;
6
+ //# sourceMappingURL=ColumnHeaderPill.css.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ColumnHeaderPill.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
@@ -0,0 +1,53 @@
1
+ 'use strict';
2
+
3
+ var jsxRuntime = require('react/jsx-runtime');
4
+ var cx = require('clsx');
5
+ var styles = require('@salt-ds/styles');
6
+ var window = require('@salt-ds/window');
7
+ var react = require('react');
8
+ var ColumnHeaderPill$1 = require('./ColumnHeaderPill.css.js');
9
+
10
+ const classBase = "vuuColumnHeaderPill";
11
+ const ColumnHeaderPill = ({
12
+ children,
13
+ className,
14
+ column,
15
+ onRemove,
16
+ removable,
17
+ ...htmlAttributes
18
+ }) => {
19
+ const targetWindow = window.useWindow();
20
+ styles.useComponentCssInjection({
21
+ testId: "vuu-column-header-pill",
22
+ css: ColumnHeaderPill$1,
23
+ window: targetWindow
24
+ });
25
+ if (removable && typeof onRemove !== "function") {
26
+ throw Error(
27
+ "ColumnHeaderPill onRemove prop must be provided if Pill is removable"
28
+ );
29
+ }
30
+ const handleClickRemove = react.useCallback(
31
+ (evt) => {
32
+ evt.preventDefault();
33
+ evt.stopPropagation();
34
+ onRemove?.(column);
35
+ },
36
+ [column, onRemove]
37
+ );
38
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...htmlAttributes, className: cx(classBase, className), children: [
39
+ children,
40
+ removable ? /* @__PURE__ */ jsxRuntime.jsx(
41
+ "span",
42
+ {
43
+ className: `${classBase}-removeButton`,
44
+ role: "button",
45
+ "data-icon": "cross",
46
+ onClick: handleClickRemove
47
+ }
48
+ ) : null
49
+ ] });
50
+ };
51
+
52
+ exports.ColumnHeaderPill = ColumnHeaderPill;
53
+ //# sourceMappingURL=ColumnHeaderPill.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ColumnHeaderPill.js","sources":["../../src/column-header-pill/ColumnHeaderPill.tsx"],"sourcesContent":["import cx from \"clsx\";\nimport { RuntimeColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { HTMLAttributes, MouseEvent, useCallback } from \"react\";\n\nimport columnHeaderPillCss from \"./ColumnHeaderPill.css\";\n\nexport interface ColumnHeaderPillProps extends HTMLAttributes<HTMLDivElement> {\n column: RuntimeColumnDescriptor;\n removable?: boolean;\n onRemove?: (column: RuntimeColumnDescriptor) => void;\n}\n\nconst classBase = \"vuuColumnHeaderPill\";\n\nexport const ColumnHeaderPill = ({\n children,\n className,\n column,\n onRemove,\n removable,\n ...htmlAttributes\n}: ColumnHeaderPillProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-column-header-pill\",\n css: columnHeaderPillCss,\n window: targetWindow,\n });\n\n if (removable && typeof onRemove !== \"function\") {\n throw Error(\n \"ColumnHeaderPill onRemove prop must be provided if Pill is removable\"\n );\n }\n\n const handleClickRemove = useCallback(\n (evt: MouseEvent<HTMLSpanElement>) => {\n evt.preventDefault();\n evt.stopPropagation();\n onRemove?.(column);\n },\n [column, onRemove]\n );\n\n return (\n <div {...htmlAttributes} className={cx(classBase, className)}>\n {children}\n {removable ? (\n <span\n className={`${classBase}-removeButton`}\n role=\"button\"\n data-icon=\"cross\"\n onClick={handleClickRemove}\n />\n ) : null}\n </div>\n );\n};\n"],"names":["useWindow","useComponentCssInjection","columnHeaderPillCss","useCallback","jsxs","jsx"],"mappings":";;;;;;;;;AAcA,MAAM,SAAY,GAAA,qBAAA,CAAA;AAEX,MAAM,mBAAmB,CAAC;AAAA,EAC/B,QAAA;AAAA,EACA,SAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG,cAAA;AACL,CAA6B,KAAA;AAC3B,EAAA,MAAM,eAAeA,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,wBAAA;AAAA,IACR,GAAK,EAAAC,kBAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAI,IAAA,SAAA,IAAa,OAAO,QAAA,KAAa,UAAY,EAAA;AAC/C,IAAM,MAAA,KAAA;AAAA,MACJ,sEAAA;AAAA,KACF,CAAA;AAAA,GACF;AAEA,EAAA,MAAM,iBAAoB,GAAAC,iBAAA;AAAA,IACxB,CAAC,GAAqC,KAAA;AACpC,MAAA,GAAA,CAAI,cAAe,EAAA,CAAA;AACnB,MAAA,GAAA,CAAI,eAAgB,EAAA,CAAA;AACpB,MAAA,QAAA,GAAW,MAAM,CAAA,CAAA;AAAA,KACnB;AAAA,IACA,CAAC,QAAQ,QAAQ,CAAA;AAAA,GACnB,CAAA;AAEA,EACE,uBAAAC,eAAA,CAAC,SAAK,GAAG,cAAA,EAAgB,WAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CACxD,EAAA,QAAA,EAAA;AAAA,IAAA,QAAA;AAAA,IACA,SACC,mBAAAC,cAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,GAAG,SAAS,CAAA,aAAA,CAAA;AAAA,QACvB,IAAK,EAAA,QAAA;AAAA,QACL,WAAU,EAAA,OAAA;AAAA,QACV,OAAS,EAAA,iBAAA;AAAA,OAAA;AAAA,KAET,GAAA,IAAA;AAAA,GACN,EAAA,CAAA,CAAA;AAEJ;;;;"}
@@ -0,0 +1,6 @@
1
+ 'use strict';
2
+
3
+ var groupColumnPillCss = "\n.vuuSortPosition {\n font-size: 11px;\n font-weight: 700;\n padding-top: 1px;\n}\n\n";
4
+
5
+ module.exports = groupColumnPillCss;
6
+ //# sourceMappingURL=GroupColumnPill.css.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"GroupColumnPill.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
@@ -0,0 +1,29 @@
1
+ 'use strict';
2
+
3
+ var jsxRuntime = require('react/jsx-runtime');
4
+ var styles = require('@salt-ds/styles');
5
+ var window = require('@salt-ds/window');
6
+ var ColumnHeaderPill = require('./ColumnHeaderPill.js');
7
+ var GroupColumnPill$1 = require('./GroupColumnPill.css.js');
8
+
9
+ const GroupColumnPill = ({
10
+ column,
11
+ ...columnHeaderProps
12
+ }) => {
13
+ const targetWindow = window.useWindow();
14
+ styles.useComponentCssInjection({
15
+ testId: "vuu-group-column-pill",
16
+ css: GroupColumnPill$1,
17
+ window: targetWindow
18
+ });
19
+ const { name, sorted } = column;
20
+ const icon = typeof sorted === "number" ? sorted < 0 ? "arrow-down" : "arrow-up" : sorted === "A" ? "arrow-up" : sorted === "D" ? "arrow-down" : void 0;
21
+ return /* @__PURE__ */ jsxRuntime.jsxs(ColumnHeaderPill.ColumnHeaderPill, { ...columnHeaderProps, column, children: [
22
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "vuuGroupColumnPill-label", children: name }),
23
+ icon !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { "data-icon": icon }) : null,
24
+ typeof sorted === "number" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "vuuSortPosition", children: Math.abs(sorted) }) : null
25
+ ] });
26
+ };
27
+
28
+ exports.GroupColumnPill = GroupColumnPill;
29
+ //# sourceMappingURL=GroupColumnPill.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"GroupColumnPill.js","sources":["../../src/column-header-pill/GroupColumnPill.tsx"],"sourcesContent":["import { RuntimeColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport { ColumnHeaderPill, ColumnHeaderPillProps } from \"./ColumnHeaderPill\";\n\nimport groupColumnPillCss from \"./GroupColumnPill.css\";\n\nexport interface GroupColumnPillProps extends ColumnHeaderPillProps {\n column: RuntimeColumnDescriptor;\n}\n\nexport const GroupColumnPill = ({\n column,\n ...columnHeaderProps\n}: GroupColumnPillProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-group-column-pill\",\n css: groupColumnPillCss,\n window: targetWindow,\n });\n\n const { name, sorted } = column;\n const icon =\n typeof sorted === \"number\"\n ? sorted < 0\n ? \"arrow-down\"\n : \"arrow-up\"\n : sorted === \"A\"\n ? \"arrow-up\"\n : sorted === \"D\"\n ? \"arrow-down\"\n : undefined;\n\n return (\n <ColumnHeaderPill {...columnHeaderProps} column={column}>\n <span className=\"vuuGroupColumnPill-label\">{name}</span>\n {icon !== undefined ? <span data-icon={icon} /> : null}\n {typeof sorted === \"number\" ? (\n <span className={\"vuuSortPosition\"}>{Math.abs(sorted)}</span>\n ) : null}\n </ColumnHeaderPill>\n );\n};\n"],"names":["useWindow","useComponentCssInjection","groupColumnPillCss","jsxs","ColumnHeaderPill","jsx"],"mappings":";;;;;;;;AAYO,MAAM,kBAAkB,CAAC;AAAA,EAC9B,MAAA;AAAA,EACA,GAAG,iBAAA;AACL,CAA4B,KAAA;AAC1B,EAAA,MAAM,eAAeA,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,uBAAA;AAAA,IACR,GAAK,EAAAC,iBAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,EAAE,IAAM,EAAA,MAAA,EAAW,GAAA,MAAA,CAAA;AACzB,EAAA,MAAM,IACJ,GAAA,OAAO,MAAW,KAAA,QAAA,GACd,MAAS,GAAA,CAAA,GACP,YACA,GAAA,UAAA,GACF,MAAW,KAAA,GAAA,GACX,UACA,GAAA,MAAA,KAAW,MACX,YACA,GAAA,KAAA,CAAA,CAAA;AAEN,EAAA,uBACGC,eAAA,CAAAC,iCAAA,EAAA,EAAkB,GAAG,iBAAA,EAAmB,MACvC,EAAA,QAAA,EAAA;AAAA,oBAACC,cAAA,CAAA,MAAA,EAAA,EAAK,SAAU,EAAA,0BAAA,EAA4B,QAAK,EAAA,IAAA,EAAA,CAAA;AAAA,IAChD,SAAS,KAAY,CAAA,mBAAAA,cAAA,CAAC,MAAK,EAAA,EAAA,WAAA,EAAW,MAAM,CAAK,GAAA,IAAA;AAAA,IACjD,OAAO,MAAW,KAAA,QAAA,mBAChBA,cAAA,CAAA,MAAA,EAAA,EAAK,SAAW,EAAA,iBAAA,EAAoB,QAAK,EAAA,IAAA,CAAA,GAAA,CAAI,MAAM,CAAA,EAAE,CACpD,GAAA,IAAA;AAAA,GACN,EAAA,CAAA,CAAA;AAEJ;;;;"}
@@ -0,0 +1,6 @@
1
+ 'use strict';
2
+
3
+ var sortIndicatorCss = "\n.vuuSortPosition {\n font-size: 11px;\n font-weight: 700;\n padding-top: 1px;\n}\n\n";
4
+
5
+ module.exports = sortIndicatorCss;
6
+ //# sourceMappingURL=SortIndicator.css.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"SortIndicator.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
@@ -0,0 +1,27 @@
1
+ 'use strict';
2
+
3
+ var jsxRuntime = require('react/jsx-runtime');
4
+ var styles = require('@salt-ds/styles');
5
+ var window = require('@salt-ds/window');
6
+ var ColumnHeaderPill = require('./ColumnHeaderPill.js');
7
+ var SortIndicator$1 = require('./SortIndicator.css.js');
8
+
9
+ const SortIndicator = ({ column }) => {
10
+ const targetWindow = window.useWindow();
11
+ styles.useComponentCssInjection({
12
+ testId: "vuu-table-sort-indicator",
13
+ css: SortIndicator$1,
14
+ window: targetWindow
15
+ });
16
+ if (!column.sorted) {
17
+ return null;
18
+ }
19
+ const icon = typeof column.sorted === "number" ? column.sorted < 0 ? "arrow-down" : "arrow-up" : column.sorted === "A" ? "arrow-up" : "arrow-down";
20
+ return /* @__PURE__ */ jsxRuntime.jsxs(ColumnHeaderPill.ColumnHeaderPill, { column, children: [
21
+ /* @__PURE__ */ jsxRuntime.jsx("span", { "data-icon": icon }),
22
+ typeof column.sorted === "number" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "vuuSortPosition", children: Math.abs(column.sorted) }) : null
23
+ ] });
24
+ };
25
+
26
+ exports.SortIndicator = SortIndicator;
27
+ //# sourceMappingURL=SortIndicator.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"SortIndicator.js","sources":["../../src/column-header-pill/SortIndicator.tsx"],"sourcesContent":["import { RuntimeColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { ColumnHeaderPill } from \"./ColumnHeaderPill\";\n\nimport sortIndicatorCss from \"./SortIndicator.css\";\n\nexport interface SortIndicatorProps {\n column: RuntimeColumnDescriptor;\n}\n\nexport const SortIndicator = ({ column }: SortIndicatorProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-table-sort-indicator\",\n css: sortIndicatorCss,\n window: targetWindow,\n });\n\n if (!column.sorted) {\n return null;\n }\n\n const icon =\n typeof column.sorted === \"number\"\n ? column.sorted < 0\n ? \"arrow-down\"\n : \"arrow-up\"\n : column.sorted === \"A\"\n ? \"arrow-up\"\n : \"arrow-down\";\n\n return (\n <ColumnHeaderPill column={column}>\n <span data-icon={icon} />\n {typeof column.sorted === \"number\" ? (\n <span className={\"vuuSortPosition\"}>{Math.abs(column.sorted)}</span>\n ) : null}\n </ColumnHeaderPill>\n );\n};\n"],"names":["useWindow","useComponentCssInjection","sortIndicatorCss","jsxs","ColumnHeaderPill","jsx"],"mappings":";;;;;;;;AAWO,MAAM,aAAgB,GAAA,CAAC,EAAE,MAAA,EAAiC,KAAA;AAC/D,EAAA,MAAM,eAAeA,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,0BAAA;AAAA,IACR,GAAK,EAAAC,eAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAI,IAAA,CAAC,OAAO,MAAQ,EAAA;AAClB,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AAEA,EAAA,MAAM,IACJ,GAAA,OAAO,MAAO,CAAA,MAAA,KAAW,QACrB,GAAA,MAAA,CAAO,MAAS,GAAA,CAAA,GACd,YACA,GAAA,UAAA,GACF,MAAO,CAAA,MAAA,KAAW,MAClB,UACA,GAAA,YAAA,CAAA;AAEN,EACE,uBAAAC,eAAA,CAACC,qCAAiB,MAChB,EAAA,QAAA,EAAA;AAAA,oBAACC,cAAA,CAAA,MAAA,EAAA,EAAK,aAAW,IAAM,EAAA,CAAA;AAAA,IACtB,OAAO,MAAA,CAAO,MAAW,KAAA,QAAA,mBACvBA,cAAA,CAAA,MAAA,EAAA,EAAK,SAAW,EAAA,iBAAA,EAAoB,QAAK,EAAA,IAAA,CAAA,GAAA,CAAI,MAAO,CAAA,MAAM,GAAE,CAC3D,GAAA,IAAA;AAAA,GACN,EAAA,CAAA,CAAA;AAEJ;;;;"}
@@ -0,0 +1,6 @@
1
+ 'use strict';
2
+
3
+ var columnMenuCss = ".vuuMenuItem {\n --vuu-svg-cog: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M12.9533 8.65331C12.98 8.43998 13 8.22665 13 7.99998C13 7.77331 12.98 7.55998 12.9533 7.34665L14.36 6.24665C14.4867 6.14665 14.52 5.96665 14.44 5.81998L13.1067 3.51331C13.0267 3.36665 12.8467 3.31331 12.7 3.36665L11.04 4.03331C10.6933 3.76665 10.32 3.54665 9.91333 3.37998L9.66 1.61331C9.64 1.45331 9.5 1.33331 9.33333 1.33331H6.66667C6.5 1.33331 6.36 1.45331 6.34 1.61331L6.08667 3.37998C5.68 3.54665 5.30667 3.77331 4.96 4.03331L3.3 3.36665C3.14667 3.30665 2.97333 3.36665 2.89333 3.51331L1.56 5.81998C1.47333 5.96665 1.51333 6.14665 1.64 6.24665L3.04667 7.34665C3.02 7.55998 3 7.77998 3 7.99998C3 8.21998 3.02 8.43998 3.04667 8.65331L1.64 9.75331C1.51333 9.85331 1.48 10.0333 1.56 10.18L2.89333 12.4866C2.97333 12.6333 3.15333 12.6866 3.3 12.6333L4.96 11.9666C5.30667 12.2333 5.68 12.4533 6.08667 12.62L6.34 14.3866C6.36 14.5466 6.5 14.6666 6.66667 14.6666H9.33333C9.5 14.6666 9.64 14.5466 9.66 14.3866L9.91333 12.62C10.32 12.4533 10.6933 12.2266 11.04 11.9666L12.7 12.6333C12.8533 12.6933 13.0267 12.6333 13.1067 12.4866L14.44 10.18C14.52 10.0333 14.4867 9.85331 14.36 9.75331L12.9533 8.65331V8.65331ZM8 10.3333C6.71333 10.3333 5.66667 9.28665 5.66667 7.99998C5.66667 6.71331 6.71333 5.66665 8 5.66665C9.28667 5.66665 10.3333 6.71331 10.3333 7.99998C10.3333 9.28665 9.28667 10.3333 8 10.3333Z\"/></svg>');\n}\n.vuuColumnMenu {\n --menu-button-size: calc(var(--salt-size-base) - var(--salt-spacing-100));\n --saltButton-padding: var(--salt-spacing-50);\n --saltButton-minWidth: var(--menu-button-size);\n --saltButton-height: var(--menu-button-size);\n --saltButton-width: var(--menu-button-size);\n\n --vuu-icon-height: var(--menu-button-size);\n --vuu-icon-left: 0px;\n --vuu-icon-top: 0px;\n --vuu-icon-width: var(--menu-button-size);\n\n border-radius: 4px;\n flex: 0 0 var(--menu-button-size);\n margin: var(--vuuTable-columnMenu-margin, 0);\n}\n\n ";
4
+
5
+ module.exports = columnMenuCss;
6
+ //# sourceMappingURL=ColumnMenu.css.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ColumnMenu.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
@@ -0,0 +1,30 @@
1
+ 'use strict';
2
+
3
+ var jsxRuntime = require('react/jsx-runtime');
4
+ var vuuPopups = require('@vuu-ui/vuu-popups');
5
+ var styles = require('@salt-ds/styles');
6
+ var window = require('@salt-ds/window');
7
+ var cx = require('clsx');
8
+ var ColumnMenu$1 = require('./ColumnMenu.css.js');
9
+
10
+ const classBase = "vuuColumnMenu";
11
+ const ColumnMenu = ({ className, column }) => {
12
+ const targetWindow = window.useWindow();
13
+ styles.useComponentCssInjection({
14
+ testId: "vuu-column-menu",
15
+ css: ColumnMenu$1,
16
+ window: targetWindow
17
+ });
18
+ return /* @__PURE__ */ jsxRuntime.jsx(
19
+ vuuPopups.PopupMenu,
20
+ {
21
+ className: cx(classBase, className),
22
+ "data-embedded": true,
23
+ menuLocation: "column-menu",
24
+ menuOptions: { column }
25
+ }
26
+ );
27
+ };
28
+
29
+ exports.ColumnMenu = ColumnMenu;
30
+ //# sourceMappingURL=ColumnMenu.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ColumnMenu.js","sources":["../../src/column-menu/ColumnMenu.tsx"],"sourcesContent":["import { RuntimeColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { PopupMenu } from \"@vuu-ui/vuu-popups\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { HTMLAttributes } from \"react\";\nimport cx from \"clsx\";\n\nimport columnMenuCss from \"./ColumnMenu.css\";\n\nconst classBase = \"vuuColumnMenu\";\nexport interface ColumnMenuProps extends HTMLAttributes<HTMLSpanElement> {\n column: RuntimeColumnDescriptor;\n}\n\nexport const ColumnMenu = ({ className, column }: ColumnMenuProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-column-menu\",\n css: columnMenuCss,\n window: targetWindow,\n });\n\n return (\n <PopupMenu\n className={cx(classBase, className)}\n data-embedded\n menuLocation=\"column-menu\"\n menuOptions={{ column }}\n />\n );\n};\n"],"names":["useWindow","useComponentCssInjection","columnMenuCss","jsx","PopupMenu"],"mappings":";;;;;;;;;AASA,MAAM,SAAY,GAAA,eAAA,CAAA;AAKX,MAAM,UAAa,GAAA,CAAC,EAAE,SAAA,EAAW,QAA8B,KAAA;AACpE,EAAA,MAAM,eAAeA,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,iBAAA;AAAA,IACR,GAAK,EAAAC,YAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EACE,uBAAAC,cAAA;AAAA,IAACC,mBAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,MAClC,eAAa,EAAA,IAAA;AAAA,MACb,YAAa,EAAA,aAAA;AAAA,MACb,WAAA,EAAa,EAAE,MAAO,EAAA;AAAA,KAAA;AAAA,GACxB,CAAA;AAEJ;;;;"}
@@ -0,0 +1,6 @@
1
+ 'use strict';
2
+
3
+ var columnResizerCss = ".vuuColumnResizer {\n cursor: col-resize;\n height: var(--header-height);\n margin-left: var(--columnResizer-left, auto);\n position: absolute;\n right: -5px;\n width: 8px;\n z-index:1;\n}\n\n.vuuTableHeaderCell:not(.vuuTableHeaderCell-resizing){\n .vuuColumnResizer:hover {\n --columnResizer-color: var(--salt-selectable-background-selected);\n }\n \n}\n\n.vuuColumnResizer:after {\n background-color: var(--columnResizer-color, var(--salt-separable-tertiary-borderColor));\n bottom:0;\n content: '';\n position: absolute;\n top: 0;\n right: 3px;\n height: var(--columnResizer-height, 0);\n width: 2px;\n z-index: 1;\n}";
4
+
5
+ module.exports = columnResizerCss;
6
+ //# sourceMappingURL=ColumnResizer.css.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ColumnResizer.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
@@ -0,0 +1,72 @@
1
+ 'use strict';
2
+
3
+ var jsxRuntime = require('react/jsx-runtime');
4
+ var styles = require('@salt-ds/styles');
5
+ var window$1 = require('@salt-ds/window');
6
+ var react = require('react');
7
+ var ColumnResizer$1 = require('./ColumnResizer.css.js');
8
+
9
+ const NOOP = () => void 0;
10
+ const baseClass = "vuuColumnResizer";
11
+ const ColumnResizer = ({
12
+ onDrag,
13
+ onDragEnd = NOOP,
14
+ onDragStart = NOOP
15
+ }) => {
16
+ const targetWindow = window$1.useWindow();
17
+ styles.useComponentCssInjection({
18
+ testId: "vuu-column-resizer",
19
+ css: ColumnResizer$1,
20
+ window: targetWindow
21
+ });
22
+ const positionRef = react.useRef({ start: 0, now: 0 });
23
+ const onMouseMove = react.useCallback(
24
+ (e) => {
25
+ if (e.stopPropagation) {
26
+ e.stopPropagation();
27
+ }
28
+ if (e.preventDefault) {
29
+ e.preventDefault();
30
+ }
31
+ const { current: position } = positionRef;
32
+ const x = Math.round(e.clientX);
33
+ const moveBy = x - position.now;
34
+ const distanceMoved = position.now - position.start;
35
+ positionRef.current.now = x;
36
+ if (moveBy !== 0) {
37
+ onDrag(e, moveBy, distanceMoved);
38
+ }
39
+ },
40
+ [onDrag]
41
+ );
42
+ const onMouseUp = react.useCallback(
43
+ (e) => {
44
+ window.removeEventListener("mouseup", onMouseUp);
45
+ window.removeEventListener("mousemove", onMouseMove);
46
+ const { current: position } = positionRef;
47
+ const distanceMoved = position.now - position.start;
48
+ onDragEnd(e, distanceMoved);
49
+ },
50
+ [onDragEnd, onMouseMove]
51
+ );
52
+ const handleMouseDown = react.useCallback(
53
+ (e) => {
54
+ const { current: position } = positionRef;
55
+ onDragStart(e);
56
+ position.now = position.start = Math.round(e.clientX);
57
+ window.addEventListener("mouseup", onMouseUp);
58
+ window.addEventListener("mousemove", onMouseMove);
59
+ if (e.stopPropagation) {
60
+ e.stopPropagation();
61
+ }
62
+ if (e.preventDefault) {
63
+ e.preventDefault();
64
+ }
65
+ },
66
+ [onDragStart, onMouseMove, onMouseUp]
67
+ );
68
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: baseClass, onMouseDown: handleMouseDown });
69
+ };
70
+
71
+ exports.ColumnResizer = ColumnResizer;
72
+ //# sourceMappingURL=ColumnResizer.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ColumnResizer.js","sources":["../../src/column-resizing/ColumnResizer.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useCallback, useRef } from \"react\";\n\nimport columnResizerCss from \"./ColumnResizer.css\";\n\nconst NOOP = () => undefined;\n\nconst baseClass = \"vuuColumnResizer\";\nexport interface TableColumnResizerProps {\n onDrag: (evt: MouseEvent, moveBy: number, totalDistanceMoved: number) => void;\n onDragEnd: (evt: MouseEvent, totalDistanceMoved: number) => void;\n onDragStart: (evt: React.MouseEvent) => void;\n}\n\nexport const ColumnResizer = ({\n onDrag,\n onDragEnd = NOOP,\n onDragStart = NOOP,\n}: TableColumnResizerProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-column-resizer\",\n css: columnResizerCss,\n window: targetWindow,\n });\n\n const positionRef = useRef({ start: 0, now: 0 });\n\n const onMouseMove = useCallback(\n (e: MouseEvent) => {\n if (e.stopPropagation) {\n e.stopPropagation();\n }\n\n if (e.preventDefault) {\n e.preventDefault();\n }\n\n const { current: position } = positionRef;\n\n const x = Math.round(e.clientX);\n const moveBy = x - position.now;\n const distanceMoved = position.now - position.start;\n\n positionRef.current.now = x;\n\n if (moveBy !== 0) {\n onDrag(e, moveBy, distanceMoved);\n }\n },\n [onDrag]\n );\n\n const onMouseUp = useCallback(\n (e: MouseEvent) => {\n window.removeEventListener(\"mouseup\", onMouseUp);\n window.removeEventListener(\"mousemove\", onMouseMove);\n\n const { current: position } = positionRef;\n const distanceMoved = position.now - position.start;\n onDragEnd(e, distanceMoved);\n },\n [onDragEnd, onMouseMove]\n );\n\n const handleMouseDown = useCallback(\n (e: React.MouseEvent) => {\n const { current: position } = positionRef;\n onDragStart(e);\n position.now = position.start = Math.round(e.clientX);\n\n window.addEventListener(\"mouseup\", onMouseUp);\n window.addEventListener(\"mousemove\", onMouseMove);\n\n if (e.stopPropagation) {\n e.stopPropagation();\n }\n\n if (e.preventDefault) {\n e.preventDefault();\n }\n },\n [onDragStart, onMouseMove, onMouseUp]\n );\n\n return <div className={baseClass} onMouseDown={handleMouseDown} />;\n};\n"],"names":["useWindow","useComponentCssInjection","columnResizerCss","useRef","useCallback","jsx"],"mappings":"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"}