@veeqo/ui 14.7.1 → 14.8.0

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 (105) hide show
  1. package/dist/components/Checkbox/Checkbox.cjs +2 -2
  2. package/dist/components/Checkbox/Checkbox.cjs.map +1 -1
  3. package/dist/components/Checkbox/Checkbox.js +2 -2
  4. package/dist/components/Checkbox/Checkbox.js.map +1 -1
  5. package/dist/components/Checkbox/Checkbox.module.scss.cjs +9 -0
  6. package/dist/components/Checkbox/Checkbox.module.scss.cjs.map +1 -0
  7. package/dist/components/Checkbox/Checkbox.module.scss.js +7 -0
  8. package/dist/components/Checkbox/Checkbox.module.scss.js.map +1 -0
  9. package/dist/components/Choice/Choice.cjs +21 -11
  10. package/dist/components/Choice/Choice.cjs.map +1 -1
  11. package/dist/components/Choice/Choice.js +21 -11
  12. package/dist/components/Choice/Choice.js.map +1 -1
  13. package/dist/components/Choice/Choice.module.scss.cjs +9 -0
  14. package/dist/components/Choice/Choice.module.scss.cjs.map +1 -0
  15. package/dist/components/Choice/Choice.module.scss.js +7 -0
  16. package/dist/components/Choice/Choice.module.scss.js.map +1 -0
  17. package/dist/components/ChoiceList/ChoiceList.cjs +3 -3
  18. package/dist/components/ChoiceList/ChoiceList.cjs.map +1 -1
  19. package/dist/components/ChoiceList/ChoiceList.js +3 -3
  20. package/dist/components/ChoiceList/ChoiceList.js.map +1 -1
  21. package/dist/components/ChoiceList/ChoiceList.module.scss.cjs +9 -0
  22. package/dist/components/ChoiceList/ChoiceList.module.scss.cjs.map +1 -0
  23. package/dist/components/ChoiceList/ChoiceList.module.scss.js +7 -0
  24. package/dist/components/ChoiceList/ChoiceList.module.scss.js.map +1 -0
  25. package/dist/components/DataGrid/components/Body/BodyCell/BodyCell.cjs +4 -2
  26. package/dist/components/DataGrid/components/Body/BodyCell/BodyCell.cjs.map +1 -1
  27. package/dist/components/DataGrid/components/Body/BodyCell/BodyCell.js +4 -2
  28. package/dist/components/DataGrid/components/Body/BodyCell/BodyCell.js.map +1 -1
  29. package/dist/components/DataGrid/components/Body/LoadingBody/LoadingBodyCell.cjs +4 -2
  30. package/dist/components/DataGrid/components/Body/LoadingBody/LoadingBodyCell.cjs.map +1 -1
  31. package/dist/components/DataGrid/components/Body/LoadingBody/LoadingBodyCell.js +4 -2
  32. package/dist/components/DataGrid/components/Body/LoadingBody/LoadingBodyCell.js.map +1 -1
  33. package/dist/components/DataGrid/components/GridContainer/GridContainer.cjs +4 -2
  34. package/dist/components/DataGrid/components/GridContainer/GridContainer.cjs.map +1 -1
  35. package/dist/components/DataGrid/components/GridContainer/GridContainer.js +4 -2
  36. package/dist/components/DataGrid/components/GridContainer/GridContainer.js.map +1 -1
  37. package/dist/components/DataGrid/components/Header/HeaderCell/HeaderCell.cjs +4 -2
  38. package/dist/components/DataGrid/components/Header/HeaderCell/HeaderCell.cjs.map +1 -1
  39. package/dist/components/DataGrid/components/Header/HeaderCell/HeaderCell.js +4 -2
  40. package/dist/components/DataGrid/components/Header/HeaderCell/HeaderCell.js.map +1 -1
  41. package/dist/components/DimensionsInput/DimensionsInput.cjs +0 -1
  42. package/dist/components/DimensionsInput/DimensionsInput.cjs.map +1 -1
  43. package/dist/components/DimensionsInput/DimensionsInput.js +0 -1
  44. package/dist/components/DimensionsInput/DimensionsInput.js.map +1 -1
  45. package/dist/components/InputAffix/InputAffix.cjs +6 -10
  46. package/dist/components/InputAffix/InputAffix.cjs.map +1 -1
  47. package/dist/components/InputAffix/InputAffix.d.ts +4 -6
  48. package/dist/components/InputAffix/InputAffix.js +6 -9
  49. package/dist/components/InputAffix/InputAffix.js.map +1 -1
  50. package/dist/components/InputAffix/InputAffix.module.scss.cjs +9 -0
  51. package/dist/components/InputAffix/InputAffix.module.scss.cjs.map +1 -0
  52. package/dist/components/InputAffix/InputAffix.module.scss.js +7 -0
  53. package/dist/components/InputAffix/InputAffix.module.scss.js.map +1 -0
  54. package/dist/components/PriceInput/PriceInput.cjs +1 -1
  55. package/dist/components/PriceInput/PriceInput.cjs.map +1 -1
  56. package/dist/components/PriceInput/PriceInput.js +1 -1
  57. package/dist/components/PriceInput/PriceInput.js.map +1 -1
  58. package/dist/components/Radio/Radio.cjs +2 -2
  59. package/dist/components/Radio/Radio.cjs.map +1 -1
  60. package/dist/components/Radio/Radio.js +2 -2
  61. package/dist/components/Radio/Radio.js.map +1 -1
  62. package/dist/components/Radio/Radio.module.scss.cjs +9 -0
  63. package/dist/components/Radio/Radio.module.scss.cjs.map +1 -0
  64. package/dist/components/Radio/Radio.module.scss.js +7 -0
  65. package/dist/components/Radio/Radio.module.scss.js.map +1 -0
  66. package/dist/components/ToggleButton/ToggleButton.cjs +2 -2
  67. package/dist/components/ToggleButton/ToggleButton.cjs.map +1 -1
  68. package/dist/components/ToggleButton/ToggleButton.d.ts +2 -8
  69. package/dist/components/ToggleButton/ToggleButton.js +2 -2
  70. package/dist/components/ToggleButton/ToggleButton.js.map +1 -1
  71. package/dist/components/ToggleButton/types.d.ts +8 -0
  72. package/dist/components/WeightInput/WeightInput.cjs +0 -1
  73. package/dist/components/WeightInput/WeightInput.cjs.map +1 -1
  74. package/dist/components/WeightInput/WeightInput.js +0 -1
  75. package/dist/components/WeightInput/WeightInput.js.map +1 -1
  76. package/dist/utils/forms/inputStyles.cjs +1 -2
  77. package/dist/utils/forms/inputStyles.cjs.map +1 -1
  78. package/dist/utils/forms/inputStyles.js +2 -2
  79. package/dist/utils/forms/inputStyles.js.map +1 -1
  80. package/package.json +1 -1
  81. package/dist/components/Checkbox/styled.cjs +0 -14
  82. package/dist/components/Checkbox/styled.cjs.map +0 -1
  83. package/dist/components/Checkbox/styled.d.ts +0 -1
  84. package/dist/components/Checkbox/styled.js +0 -8
  85. package/dist/components/Checkbox/styled.js.map +0 -1
  86. package/dist/components/Choice/components/styled.cjs +0 -30
  87. package/dist/components/Choice/components/styled.cjs.map +0 -1
  88. package/dist/components/Choice/components/styled.d.ts +0 -14
  89. package/dist/components/Choice/components/styled.js +0 -18
  90. package/dist/components/Choice/components/styled.js.map +0 -1
  91. package/dist/components/ChoiceList/styled.cjs +0 -15
  92. package/dist/components/ChoiceList/styled.cjs.map +0 -1
  93. package/dist/components/ChoiceList/styled.d.ts +0 -2
  94. package/dist/components/ChoiceList/styled.js +0 -8
  95. package/dist/components/ChoiceList/styled.js.map +0 -1
  96. package/dist/components/Radio/styled.cjs +0 -12
  97. package/dist/components/Radio/styled.cjs.map +0 -1
  98. package/dist/components/Radio/styled.d.ts +0 -1
  99. package/dist/components/Radio/styled.js +0 -6
  100. package/dist/components/Radio/styled.js.map +0 -1
  101. package/dist/components/ToggleButton/styled.cjs +0 -49
  102. package/dist/components/ToggleButton/styled.cjs.map +0 -1
  103. package/dist/components/ToggleButton/styled.d.ts +0 -1
  104. package/dist/components/ToggleButton/styled.js +0 -43
  105. package/dist/components/ToggleButton/styled.js.map +0 -1
@@ -1 +1 @@
1
- {"version":3,"file":"BodyCell.cjs","sources":["../../../../../../src/components/DataGrid/components/Body/BodyCell/BodyCell.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\n\nimport { Cell, flexRender } from '@tanstack/react-table';\nimport { SELECTION_COLUMN_ID } from '../../../constants';\n\nimport { buildClassnames } from '../../../../../utils';\n\nimport { AriaRoles } from '../../../types';\nimport { CellContent } from '../../CellContent';\nimport { usePinnedColumnStyles } from '../../../hooks';\n\nimport { useExpandableCell } from './hooks';\nimport styles from './BodyCell.module.scss';\n\ntype ColumnCellProps = {\n /**\n * Cell within the TanStack Table instance.\n */\n cell: Cell<any, any>;\n\n /**\n * ARIA roles for the grid.\n */\n ariaRoles: AriaRoles;\n\n /**\n * Whether row selection is enabled.\n */\n enableRowSelection: boolean;\n\n /**\n * Whether row expanding is enabled for the grid.\n */\n enableExpanding: boolean;\n};\n\n/**\n * Renders a cell element, and its content, for a given column and row, within the grid body.\n */\nexport const BodyCell = ({\n cell,\n ariaRoles,\n enableRowSelection,\n enableExpanding,\n}: ColumnCellProps) => {\n const { justifyContent, textAlign, rowHeader, generateDataTestId } = cell.column.columnDef.meta!;\n const CellElement = rowHeader ? 'th' : 'td';\n\n const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({ column: cell.column });\n\n const { expandButtonProps, contentMarginLeft } = useExpandableCell({\n cell,\n enableExpanding,\n enableRowSelection,\n });\n\n const bodyCellClassname = buildClassnames([\n styles.bodyCell,\n pinnedCellClassName,\n 'data-grid-cell',\n ]);\n\n const cellContext = cell.getContext();\n const cellTestId = useMemo(\n () => (generateDataTestId ? generateDataTestId(cellContext.row.original) : undefined),\n [generateDataTestId, cellContext.row.original],\n );\n\n const isSelectionCol = enableRowSelection && cell.column.id === SELECTION_COLUMN_ID;\n\n // Capture shift key state for range selection in selection column.\n const captureShiftKeyForSelection = isSelectionCol\n ? (e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => {\n if ('key' in e && e.key !== ' ') return;\n\n const { row, table } = cell.getContext();\n if (!row.getCanSelect()) return;\n\n const { rangeSelectionState } = table.options.meta || {};\n if (rangeSelectionState) rangeSelectionState.isShiftKeyPressed = e.shiftKey;\n }\n : undefined;\n\n return (\n <CellElement\n className={bodyCellClassname}\n aria-colindex={cell.column.getIndex() + 1}\n scope={rowHeader ? 'row' : undefined}\n role={rowHeader ? 'rowheader' : ariaRoles.cell}\n style={pinnedCellStyles}\n data-testid={cellTestId}\n >\n <CellContent\n contentStyle={\n {\n marginLeft: contentMarginLeft,\n justifyContent,\n textAlign,\n } as React.CSSProperties\n }\n expandButtonProps={expandButtonProps}\n onMouseDown={captureShiftKeyForSelection}\n onKeyDown={captureShiftKeyForSelection}\n >\n {flexRender(cell.column.columnDef.cell, cellContext)}\n </CellContent>\n </CellElement>\n );\n};\n"],"names":["usePinnedColumnStyles","useExpandableCell","buildClassnames","styles","useMemo","SELECTION_COLUMN_ID","React","CellContent","flexRender"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAoCA;;AAEG;AACI,MAAM,QAAQ,GAAG,CAAC,EACvB,IAAI,EACJ,SAAS,EACT,kBAAkB,EAClB,eAAe,GACC,KAAI;AACpB,IAAA,MAAM,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,EAAE,kBAAkB,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAK;IAChG,MAAM,WAAW,GAAG,SAAS,GAAG,IAAI,GAAG,IAAI;AAE3C,IAAA,MAAM,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,GAAGA,2CAAqB,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC;AAEhG,IAAA,MAAM,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,GAAGC,mCAAiB,CAAC;QACjE,IAAI;QACJ,eAAe;QACf,kBAAkB;AACnB,KAAA,CAAC;IAEF,MAAM,iBAAiB,GAAGC,+BAAe,CAAC;AACxC,QAAAC,eAAM,CAAC,QAAQ;QACf,mBAAmB;QACnB,gBAAgB;AACjB,KAAA,CAAC;AAEF,IAAA,MAAM,WAAW,GAAG,IAAI,CAAC,UAAU,EAAE;AACrC,IAAA,MAAM,UAAU,GAAGC,aAAO,CACxB,OAAO,kBAAkB,GAAG,kBAAkB,CAAC,WAAW,CAAC,GAAG,CAAC,QAAQ,CAAC,GAAG,SAAS,CAAC,EACrF,CAAC,kBAAkB,EAAE,WAAW,CAAC,GAAG,CAAC,QAAQ,CAAC,CAC/C;IAED,MAAM,cAAc,GAAG,kBAAkB,IAAI,IAAI,CAAC,MAAM,CAAC,EAAE,KAAKC,6BAAmB;;IAGnF,MAAM,2BAA2B,GAAG;AAClC,UAAE,CAAC,CAAyE,KAAI;YAC5E,IAAI,KAAK,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG;gBAAE;YAEjC,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,UAAU,EAAE;AACxC,YAAA,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE;gBAAE;YAEzB,MAAM,EAAE,mBAAmB,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,IAAI,EAAE;AACxD,YAAA,IAAI,mBAAmB;AAAE,gBAAA,mBAAmB,CAAC,iBAAiB,GAAG,CAAC,CAAC,QAAQ;QAC7E;UACA,SAAS;IAEb,QACEC,qCAAC,WAAW,EAAA,EACV,SAAS,EAAE,iBAAiB,mBACb,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,GAAG,CAAC,EACzC,KAAK,EAAE,SAAS,GAAG,KAAK,GAAG,SAAS,EACpC,IAAI,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,CAAC,IAAI,EAC9C,KAAK,EAAE,gBAAgB,EAAA,aAAA,EACV,UAAU,EAAA;QAEvBA,sBAAA,CAAA,aAAA,CAACC,uBAAW,EAAA,EACV,YAAY,EACV;AACE,gBAAA,UAAU,EAAE,iBAAiB;gBAC7B,cAAc;gBACd,SAAS;aACa,EAE1B,iBAAiB,EAAE,iBAAiB,EACpC,WAAW,EAAE,2BAA2B,EACxC,SAAS,EAAE,2BAA2B,EAAA,EAErCC,qBAAU,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,EAAE,WAAW,CAAC,CACxC,CACF;AAElB;;;;"}
1
+ {"version":3,"file":"BodyCell.cjs","sources":["../../../../../../src/components/DataGrid/components/Body/BodyCell/BodyCell.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\n\nimport { Cell, flexRender } from '@tanstack/react-table';\nimport { SELECTION_COLUMN_ID } from '../../../constants';\n\nimport { buildClassnames } from '../../../../../utils';\n\nimport { AriaRoles } from '../../../types';\nimport { CellContent } from '../../CellContent';\nimport { usePinnedColumnStyles } from '../../../hooks';\n\nimport { useExpandableCell } from './hooks';\nimport styles from './BodyCell.module.scss';\n\ntype ColumnCellProps = {\n /**\n * Cell within the TanStack Table instance.\n */\n cell: Cell<any, any>;\n\n /**\n * ARIA roles for the grid.\n */\n ariaRoles: AriaRoles;\n\n /**\n * Whether row selection is enabled.\n */\n enableRowSelection: boolean;\n\n /**\n * Whether row expanding is enabled for the grid.\n */\n enableExpanding: boolean;\n};\n\n/**\n * Renders a cell element, and its content, for a given column and row, within the grid body.\n */\nexport const BodyCell = ({\n cell,\n ariaRoles,\n enableRowSelection,\n enableExpanding,\n}: ColumnCellProps) => {\n const { justifyContent, textAlign, rowHeader, generateDataTestId } = cell.column.columnDef.meta!;\n const CellElement = rowHeader ? 'th' : 'td';\n\n const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({ column: cell.column });\n\n const { expandButtonProps, contentMarginLeft } = useExpandableCell({\n cell,\n enableExpanding,\n enableRowSelection,\n });\n\n const bodyCellClassname = buildClassnames([\n styles.bodyCell,\n pinnedCellClassName,\n 'data-grid-cell',\n ]);\n\n const cellContext = cell.getContext();\n const cellTestId = useMemo(\n () => (generateDataTestId ? generateDataTestId(cellContext.row.original) : undefined),\n [generateDataTestId, cellContext.row.original],\n );\n\n const isSelectionCol = enableRowSelection && cell.column.id === SELECTION_COLUMN_ID;\n\n // Capture shift key state for range selection in selection column.\n const captureShiftKeyForSelection = isSelectionCol\n ? (e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => {\n if ('key' in e && e.key !== ' ') return;\n\n const { row, table } = cell.getContext();\n if (!row.getCanSelect()) return;\n\n const { rangeSelectionState } = table.options.meta || {};\n if (rangeSelectionState) rangeSelectionState.isShiftKeyPressed = e.shiftKey;\n }\n : undefined;\n\n return (\n <CellElement\n className={bodyCellClassname}\n aria-colindex={cell.column.getIndex() + 1}\n scope={rowHeader ? 'row' : undefined}\n role={rowHeader ? 'rowheader' : ariaRoles.cell}\n style={pinnedCellStyles}\n data-testid={cellTestId}\n >\n <CellContent\n contentStyle={\n {\n marginLeft: contentMarginLeft,\n justifyContent,\n textAlign,\n } as React.CSSProperties\n }\n expandButtonProps={expandButtonProps}\n onMouseDown={captureShiftKeyForSelection}\n onKeyDown={captureShiftKeyForSelection}\n >\n {flexRender(cell.column.columnDef.cell, cellContext)}\n </CellContent>\n </CellElement>\n );\n};\n"],"names":["usePinnedColumnStyles","useExpandableCell","buildClassnames","styles","useMemo","SELECTION_COLUMN_ID","React","CellContent","flexRender"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCA;;AAEG;AACI,MAAM,QAAQ,GAAG,CAAC,EACvB,IAAI,EACJ,SAAS,EACT,kBAAkB,EAClB,eAAe,GACC,KAAI;AACpB,IAAA,MAAM,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,EAAE,kBAAkB,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAK;IAChG,MAAM,WAAW,GAAG,SAAS,GAAG,IAAI,GAAG,IAAI;AAE3C,IAAA,MAAM,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,GAAGA,2CAAqB,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC;AAEhG,IAAA,MAAM,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,GAAGC,mCAAiB,CAAC;QACjE,IAAI;QACJ,eAAe;QACf,kBAAkB;AACnB,KAAA,CAAC;IAEF,MAAM,iBAAiB,GAAGC,+BAAe,CAAC;AACxC,QAAAC,eAAM,CAAC,QAAQ;QACf,mBAAmB;QACnB,gBAAgB;AACjB,KAAA,CAAC;AAEF,IAAA,MAAM,WAAW,GAAG,IAAI,CAAC,UAAU,EAAE;AACrC,IAAA,MAAM,UAAU,GAAGC,aAAO,CACxB,OAAO,kBAAkB,GAAG,kBAAkB,CAAC,WAAW,CAAC,GAAG,CAAC,QAAQ,CAAC,GAAG,SAAS,CAAC,EACrF,CAAC,kBAAkB,EAAE,WAAW,CAAC,GAAG,CAAC,QAAQ,CAAC,CAC/C;IAED,MAAM,cAAc,GAAG,kBAAkB,IAAI,IAAI,CAAC,MAAM,CAAC,EAAE,KAAKC,6BAAmB;;IAGnF,MAAM,2BAA2B,GAAG;AAClC,UAAE,CAAC,CAAyE,KAAI;YAC5E,IAAI,KAAK,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG;gBAAE;YAEjC,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,UAAU,EAAE;AACxC,YAAA,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE;gBAAE;YAEzB,MAAM,EAAE,mBAAmB,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,IAAI,EAAE;AACxD,YAAA,IAAI,mBAAmB;AAAE,gBAAA,mBAAmB,CAAC,iBAAiB,GAAG,CAAC,CAAC,QAAQ;QAC7E;UACA,SAAS;IAEb,QACEC,qCAAC,WAAW,EAAA,EACV,SAAS,EAAE,iBAAiB,mBACb,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,GAAG,CAAC,EACzC,KAAK,EAAE,SAAS,GAAG,KAAK,GAAG,SAAS,EACpC,IAAI,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,CAAC,IAAI,EAC9C,KAAK,EAAE,gBAAgB,EAAA,aAAA,EACV,UAAU,EAAA;QAEvBA,sBAAA,CAAA,aAAA,CAACC,uBAAW,EAAA,EACV,YAAY,EACV;AACE,gBAAA,UAAU,EAAE,iBAAiB;gBAC7B,cAAc;gBACd,SAAS;aACa,EAE1B,iBAAiB,EAAE,iBAAiB,EACpC,WAAW,EAAE,2BAA2B,EACxC,SAAS,EAAE,2BAA2B,EAAA,EAErCC,qBAAU,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,EAAE,WAAW,CAAC,CACxC,CACF;AAElB;;;;"}
@@ -10,9 +10,11 @@ import '../../../../../theme/modules/shadows.js';
10
10
  import '../../../../../theme/modules/sizes.js';
11
11
  import '../../../../../theme/modules/text.js';
12
12
  import 'styled-components';
13
- import '../../../../Choice/components/styled.js';
13
+ import 'framer-motion';
14
+ import '../../../../Tooltip/components/styled.js';
15
+ import '../../../../Tooltip/components/TooltipPopover.js';
16
+ import 'react-dom';
14
17
  import '../../../../Text/Text.js';
15
- import '../../../../Checkbox/styled.js';
16
18
  import '../../../../Radio/Radio.js';
17
19
  import { useExpandableCell } from './hooks/useExpandableCell.js';
18
20
  import styles from './BodyCell.module.scss.js';
@@ -1 +1 @@
1
- {"version":3,"file":"BodyCell.js","sources":["../../../../../../src/components/DataGrid/components/Body/BodyCell/BodyCell.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\n\nimport { Cell, flexRender } from '@tanstack/react-table';\nimport { SELECTION_COLUMN_ID } from '../../../constants';\n\nimport { buildClassnames } from '../../../../../utils';\n\nimport { AriaRoles } from '../../../types';\nimport { CellContent } from '../../CellContent';\nimport { usePinnedColumnStyles } from '../../../hooks';\n\nimport { useExpandableCell } from './hooks';\nimport styles from './BodyCell.module.scss';\n\ntype ColumnCellProps = {\n /**\n * Cell within the TanStack Table instance.\n */\n cell: Cell<any, any>;\n\n /**\n * ARIA roles for the grid.\n */\n ariaRoles: AriaRoles;\n\n /**\n * Whether row selection is enabled.\n */\n enableRowSelection: boolean;\n\n /**\n * Whether row expanding is enabled for the grid.\n */\n enableExpanding: boolean;\n};\n\n/**\n * Renders a cell element, and its content, for a given column and row, within the grid body.\n */\nexport const BodyCell = ({\n cell,\n ariaRoles,\n enableRowSelection,\n enableExpanding,\n}: ColumnCellProps) => {\n const { justifyContent, textAlign, rowHeader, generateDataTestId } = cell.column.columnDef.meta!;\n const CellElement = rowHeader ? 'th' : 'td';\n\n const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({ column: cell.column });\n\n const { expandButtonProps, contentMarginLeft } = useExpandableCell({\n cell,\n enableExpanding,\n enableRowSelection,\n });\n\n const bodyCellClassname = buildClassnames([\n styles.bodyCell,\n pinnedCellClassName,\n 'data-grid-cell',\n ]);\n\n const cellContext = cell.getContext();\n const cellTestId = useMemo(\n () => (generateDataTestId ? generateDataTestId(cellContext.row.original) : undefined),\n [generateDataTestId, cellContext.row.original],\n );\n\n const isSelectionCol = enableRowSelection && cell.column.id === SELECTION_COLUMN_ID;\n\n // Capture shift key state for range selection in selection column.\n const captureShiftKeyForSelection = isSelectionCol\n ? (e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => {\n if ('key' in e && e.key !== ' ') return;\n\n const { row, table } = cell.getContext();\n if (!row.getCanSelect()) return;\n\n const { rangeSelectionState } = table.options.meta || {};\n if (rangeSelectionState) rangeSelectionState.isShiftKeyPressed = e.shiftKey;\n }\n : undefined;\n\n return (\n <CellElement\n className={bodyCellClassname}\n aria-colindex={cell.column.getIndex() + 1}\n scope={rowHeader ? 'row' : undefined}\n role={rowHeader ? 'rowheader' : ariaRoles.cell}\n style={pinnedCellStyles}\n data-testid={cellTestId}\n >\n <CellContent\n contentStyle={\n {\n marginLeft: contentMarginLeft,\n justifyContent,\n textAlign,\n } as React.CSSProperties\n }\n expandButtonProps={expandButtonProps}\n onMouseDown={captureShiftKeyForSelection}\n onKeyDown={captureShiftKeyForSelection}\n >\n {flexRender(cell.column.columnDef.cell, cellContext)}\n </CellContent>\n </CellElement>\n );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;;;;;;AAoCA;;AAEG;AACI,MAAM,QAAQ,GAAG,CAAC,EACvB,IAAI,EACJ,SAAS,EACT,kBAAkB,EAClB,eAAe,GACC,KAAI;AACpB,IAAA,MAAM,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,EAAE,kBAAkB,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAK;IAChG,MAAM,WAAW,GAAG,SAAS,GAAG,IAAI,GAAG,IAAI;AAE3C,IAAA,MAAM,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,GAAG,qBAAqB,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC;AAEhG,IAAA,MAAM,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,GAAG,iBAAiB,CAAC;QACjE,IAAI;QACJ,eAAe;QACf,kBAAkB;AACnB,KAAA,CAAC;IAEF,MAAM,iBAAiB,GAAG,eAAe,CAAC;AACxC,QAAA,MAAM,CAAC,QAAQ;QACf,mBAAmB;QACnB,gBAAgB;AACjB,KAAA,CAAC;AAEF,IAAA,MAAM,WAAW,GAAG,IAAI,CAAC,UAAU,EAAE;AACrC,IAAA,MAAM,UAAU,GAAG,OAAO,CACxB,OAAO,kBAAkB,GAAG,kBAAkB,CAAC,WAAW,CAAC,GAAG,CAAC,QAAQ,CAAC,GAAG,SAAS,CAAC,EACrF,CAAC,kBAAkB,EAAE,WAAW,CAAC,GAAG,CAAC,QAAQ,CAAC,CAC/C;IAED,MAAM,cAAc,GAAG,kBAAkB,IAAI,IAAI,CAAC,MAAM,CAAC,EAAE,KAAK,mBAAmB;;IAGnF,MAAM,2BAA2B,GAAG;AAClC,UAAE,CAAC,CAAyE,KAAI;YAC5E,IAAI,KAAK,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG;gBAAE;YAEjC,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,UAAU,EAAE;AACxC,YAAA,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE;gBAAE;YAEzB,MAAM,EAAE,mBAAmB,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,IAAI,EAAE;AACxD,YAAA,IAAI,mBAAmB;AAAE,gBAAA,mBAAmB,CAAC,iBAAiB,GAAG,CAAC,CAAC,QAAQ;QAC7E;UACA,SAAS;IAEb,QACEA,6BAAC,WAAW,EAAA,EACV,SAAS,EAAE,iBAAiB,mBACb,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,GAAG,CAAC,EACzC,KAAK,EAAE,SAAS,GAAG,KAAK,GAAG,SAAS,EACpC,IAAI,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,CAAC,IAAI,EAC9C,KAAK,EAAE,gBAAgB,EAAA,aAAA,EACV,UAAU,EAAA;QAEvBA,cAAA,CAAA,aAAA,CAAC,WAAW,EAAA,EACV,YAAY,EACV;AACE,gBAAA,UAAU,EAAE,iBAAiB;gBAC7B,cAAc;gBACd,SAAS;aACa,EAE1B,iBAAiB,EAAE,iBAAiB,EACpC,WAAW,EAAE,2BAA2B,EACxC,SAAS,EAAE,2BAA2B,EAAA,EAErC,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,EAAE,WAAW,CAAC,CACxC,CACF;AAElB;;;;"}
1
+ {"version":3,"file":"BodyCell.js","sources":["../../../../../../src/components/DataGrid/components/Body/BodyCell/BodyCell.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\n\nimport { Cell, flexRender } from '@tanstack/react-table';\nimport { SELECTION_COLUMN_ID } from '../../../constants';\n\nimport { buildClassnames } from '../../../../../utils';\n\nimport { AriaRoles } from '../../../types';\nimport { CellContent } from '../../CellContent';\nimport { usePinnedColumnStyles } from '../../../hooks';\n\nimport { useExpandableCell } from './hooks';\nimport styles from './BodyCell.module.scss';\n\ntype ColumnCellProps = {\n /**\n * Cell within the TanStack Table instance.\n */\n cell: Cell<any, any>;\n\n /**\n * ARIA roles for the grid.\n */\n ariaRoles: AriaRoles;\n\n /**\n * Whether row selection is enabled.\n */\n enableRowSelection: boolean;\n\n /**\n * Whether row expanding is enabled for the grid.\n */\n enableExpanding: boolean;\n};\n\n/**\n * Renders a cell element, and its content, for a given column and row, within the grid body.\n */\nexport const BodyCell = ({\n cell,\n ariaRoles,\n enableRowSelection,\n enableExpanding,\n}: ColumnCellProps) => {\n const { justifyContent, textAlign, rowHeader, generateDataTestId } = cell.column.columnDef.meta!;\n const CellElement = rowHeader ? 'th' : 'td';\n\n const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({ column: cell.column });\n\n const { expandButtonProps, contentMarginLeft } = useExpandableCell({\n cell,\n enableExpanding,\n enableRowSelection,\n });\n\n const bodyCellClassname = buildClassnames([\n styles.bodyCell,\n pinnedCellClassName,\n 'data-grid-cell',\n ]);\n\n const cellContext = cell.getContext();\n const cellTestId = useMemo(\n () => (generateDataTestId ? generateDataTestId(cellContext.row.original) : undefined),\n [generateDataTestId, cellContext.row.original],\n );\n\n const isSelectionCol = enableRowSelection && cell.column.id === SELECTION_COLUMN_ID;\n\n // Capture shift key state for range selection in selection column.\n const captureShiftKeyForSelection = isSelectionCol\n ? (e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => {\n if ('key' in e && e.key !== ' ') return;\n\n const { row, table } = cell.getContext();\n if (!row.getCanSelect()) return;\n\n const { rangeSelectionState } = table.options.meta || {};\n if (rangeSelectionState) rangeSelectionState.isShiftKeyPressed = e.shiftKey;\n }\n : undefined;\n\n return (\n <CellElement\n className={bodyCellClassname}\n aria-colindex={cell.column.getIndex() + 1}\n scope={rowHeader ? 'row' : undefined}\n role={rowHeader ? 'rowheader' : ariaRoles.cell}\n style={pinnedCellStyles}\n data-testid={cellTestId}\n >\n <CellContent\n contentStyle={\n {\n marginLeft: contentMarginLeft,\n justifyContent,\n textAlign,\n } as React.CSSProperties\n }\n expandButtonProps={expandButtonProps}\n onMouseDown={captureShiftKeyForSelection}\n onKeyDown={captureShiftKeyForSelection}\n >\n {flexRender(cell.column.columnDef.cell, cellContext)}\n </CellContent>\n </CellElement>\n );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAoCA;;AAEG;AACI,MAAM,QAAQ,GAAG,CAAC,EACvB,IAAI,EACJ,SAAS,EACT,kBAAkB,EAClB,eAAe,GACC,KAAI;AACpB,IAAA,MAAM,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,EAAE,kBAAkB,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAK;IAChG,MAAM,WAAW,GAAG,SAAS,GAAG,IAAI,GAAG,IAAI;AAE3C,IAAA,MAAM,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,GAAG,qBAAqB,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC;AAEhG,IAAA,MAAM,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,GAAG,iBAAiB,CAAC;QACjE,IAAI;QACJ,eAAe;QACf,kBAAkB;AACnB,KAAA,CAAC;IAEF,MAAM,iBAAiB,GAAG,eAAe,CAAC;AACxC,QAAA,MAAM,CAAC,QAAQ;QACf,mBAAmB;QACnB,gBAAgB;AACjB,KAAA,CAAC;AAEF,IAAA,MAAM,WAAW,GAAG,IAAI,CAAC,UAAU,EAAE;AACrC,IAAA,MAAM,UAAU,GAAG,OAAO,CACxB,OAAO,kBAAkB,GAAG,kBAAkB,CAAC,WAAW,CAAC,GAAG,CAAC,QAAQ,CAAC,GAAG,SAAS,CAAC,EACrF,CAAC,kBAAkB,EAAE,WAAW,CAAC,GAAG,CAAC,QAAQ,CAAC,CAC/C;IAED,MAAM,cAAc,GAAG,kBAAkB,IAAI,IAAI,CAAC,MAAM,CAAC,EAAE,KAAK,mBAAmB;;IAGnF,MAAM,2BAA2B,GAAG;AAClC,UAAE,CAAC,CAAyE,KAAI;YAC5E,IAAI,KAAK,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG;gBAAE;YAEjC,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,UAAU,EAAE;AACxC,YAAA,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE;gBAAE;YAEzB,MAAM,EAAE,mBAAmB,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,IAAI,EAAE;AACxD,YAAA,IAAI,mBAAmB;AAAE,gBAAA,mBAAmB,CAAC,iBAAiB,GAAG,CAAC,CAAC,QAAQ;QAC7E;UACA,SAAS;IAEb,QACEA,6BAAC,WAAW,EAAA,EACV,SAAS,EAAE,iBAAiB,mBACb,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,GAAG,CAAC,EACzC,KAAK,EAAE,SAAS,GAAG,KAAK,GAAG,SAAS,EACpC,IAAI,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,CAAC,IAAI,EAC9C,KAAK,EAAE,gBAAgB,EAAA,aAAA,EACV,UAAU,EAAA;QAEvBA,cAAA,CAAA,aAAA,CAAC,WAAW,EAAA,EACV,YAAY,EACV;AACE,gBAAA,UAAU,EAAE,iBAAiB;gBAC7B,cAAc;gBACd,SAAS;aACa,EAE1B,iBAAiB,EAAE,iBAAiB,EACpC,WAAW,EAAE,2BAA2B,EACxC,SAAS,EAAE,2BAA2B,EAAA,EAErC,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,EAAE,WAAW,CAAC,CACxC,CACF;AAElB;;;;"}
@@ -8,9 +8,11 @@ var usePinnedColumnStyles = require('../../../hooks/usePinnedColumnStyles.cjs');
8
8
  require('@tanstack/react-table');
9
9
  require('../../../../Stack/Stack.cjs');
10
10
  var index = require('../../../../../theme/index.cjs');
11
- require('../../../../Choice/components/styled.cjs');
11
+ require('framer-motion');
12
+ require('../../../../Tooltip/components/styled.cjs');
13
+ require('../../../../Tooltip/components/TooltipPopover.cjs');
14
+ require('react-dom');
12
15
  require('../../../../Text/Text.cjs');
13
- require('../../../../Checkbox/styled.cjs');
14
16
  require('../../../../Radio/Radio.cjs');
15
17
  var CellContent = require('../../CellContent/CellContent.cjs');
16
18
  var BodyCell_module = require('../BodyCell/BodyCell.module.scss.cjs');
@@ -1 +1 @@
1
- {"version":3,"file":"LoadingBodyCell.cjs","sources":["../../../../../../src/components/DataGrid/components/Body/LoadingBody/LoadingBodyCell.tsx"],"sourcesContent":["import React from 'react';\nimport { Column } from '@tanstack/react-table';\n\nimport { Skeleton } from '../../../../Skeleton';\nimport { buildClassnames } from '../../../../../utils';\nimport { usePinnedColumnStyles } from '../../../hooks';\nimport { CellContent } from '../../CellContent';\nimport { theme } from '../../../../../theme';\n\nimport styles from '../BodyCell/BodyCell.module.scss';\n\ntype LoadingBodyCellProps = {\n /**\n * The TanStack Table column instance.\n */\n column: Column<any, any>;\n};\n\n/**\n * A cell component for the DataGrid that displays a skeleton loader.\n */\nexport const LoadingBodyCell = ({ column }: LoadingBodyCellProps) => {\n const { justifyContent, textAlign } = column.columnDef.meta!;\n const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({\n column,\n });\n\n const loadingCellClassname = buildClassnames([\n styles.bodyCell,\n pinnedCellClassName,\n 'data-grid-cell',\n 'data-grid-cell-loading',\n ]);\n\n return (\n <td\n className={loadingCellClassname}\n style={pinnedCellStyles}\n aria-colindex={column.getIndex() + 1}\n >\n <CellContent\n contentStyle={\n {\n justifyContent,\n textAlign,\n } as React.CSSProperties\n }\n >\n <Skeleton width=\"75%\" height={theme.sizes[3]} />\n </CellContent>\n </td>\n );\n};\n"],"names":["usePinnedColumnStyles","buildClassnames","styles","React","CellContent","Skeleton","theme"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAkBA;;AAEG;MACU,eAAe,GAAG,CAAC,EAAE,MAAM,EAAwB,KAAI;IAClE,MAAM,EAAE,cAAc,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,SAAS,CAAC,IAAK;AAC5D,IAAA,MAAM,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,GAAGA,2CAAqB,CAAC;QACtE,MAAM;AACP,KAAA,CAAC;IAEF,MAAM,oBAAoB,GAAGC,+BAAe,CAAC;AAC3C,QAAAC,eAAM,CAAC,QAAQ;QACf,mBAAmB;QACnB,gBAAgB;QAChB,wBAAwB;AACzB,KAAA,CAAC;AAEF,IAAA,QACEC,sBAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EACE,SAAS,EAAE,oBAAoB,EAC/B,KAAK,EAAE,gBAAgB,mBACR,MAAM,CAAC,QAAQ,EAAE,GAAG,CAAC,EAAA;QAEpCA,sBAAA,CAAA,aAAA,CAACC,uBAAW,EAAA,EACV,YAAY,EACV;gBACE,cAAc;gBACd,SAAS;AACa,aAAA,EAAA;AAG1B,YAAAD,sBAAA,CAAA,aAAA,CAACE,iBAAQ,EAAA,EAAC,KAAK,EAAC,KAAK,EAAC,MAAM,EAAEC,WAAK,CAAC,KAAK,CAAC,CAAC,CAAC,GAAI,CACpC,CACX;AAET;;;;"}
1
+ {"version":3,"file":"LoadingBodyCell.cjs","sources":["../../../../../../src/components/DataGrid/components/Body/LoadingBody/LoadingBodyCell.tsx"],"sourcesContent":["import React from 'react';\nimport { Column } from '@tanstack/react-table';\n\nimport { Skeleton } from '../../../../Skeleton';\nimport { buildClassnames } from '../../../../../utils';\nimport { usePinnedColumnStyles } from '../../../hooks';\nimport { CellContent } from '../../CellContent';\nimport { theme } from '../../../../../theme';\n\nimport styles from '../BodyCell/BodyCell.module.scss';\n\ntype LoadingBodyCellProps = {\n /**\n * The TanStack Table column instance.\n */\n column: Column<any, any>;\n};\n\n/**\n * A cell component for the DataGrid that displays a skeleton loader.\n */\nexport const LoadingBodyCell = ({ column }: LoadingBodyCellProps) => {\n const { justifyContent, textAlign } = column.columnDef.meta!;\n const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({\n column,\n });\n\n const loadingCellClassname = buildClassnames([\n styles.bodyCell,\n pinnedCellClassName,\n 'data-grid-cell',\n 'data-grid-cell-loading',\n ]);\n\n return (\n <td\n className={loadingCellClassname}\n style={pinnedCellStyles}\n aria-colindex={column.getIndex() + 1}\n >\n <CellContent\n contentStyle={\n {\n justifyContent,\n textAlign,\n } as React.CSSProperties\n }\n >\n <Skeleton width=\"75%\" height={theme.sizes[3]} />\n </CellContent>\n </td>\n );\n};\n"],"names":["usePinnedColumnStyles","buildClassnames","styles","React","CellContent","Skeleton","theme"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAkBA;;AAEG;MACU,eAAe,GAAG,CAAC,EAAE,MAAM,EAAwB,KAAI;IAClE,MAAM,EAAE,cAAc,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,SAAS,CAAC,IAAK;AAC5D,IAAA,MAAM,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,GAAGA,2CAAqB,CAAC;QACtE,MAAM;AACP,KAAA,CAAC;IAEF,MAAM,oBAAoB,GAAGC,+BAAe,CAAC;AAC3C,QAAAC,eAAM,CAAC,QAAQ;QACf,mBAAmB;QACnB,gBAAgB;QAChB,wBAAwB;AACzB,KAAA,CAAC;AAEF,IAAA,QACEC,sBAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EACE,SAAS,EAAE,oBAAoB,EAC/B,KAAK,EAAE,gBAAgB,mBACR,MAAM,CAAC,QAAQ,EAAE,GAAG,CAAC,EAAA;QAEpCA,sBAAA,CAAA,aAAA,CAACC,uBAAW,EAAA,EACV,YAAY,EACV;gBACE,cAAc;gBACd,SAAS;AACa,aAAA,EAAA;AAG1B,YAAAD,sBAAA,CAAA,aAAA,CAACE,iBAAQ,EAAA,EAAC,KAAK,EAAC,KAAK,EAAC,MAAM,EAAEC,WAAK,CAAC,KAAK,CAAC,CAAC,CAAC,GAAI,CACpC,CACX;AAET;;;;"}
@@ -6,9 +6,11 @@ import { usePinnedColumnStyles } from '../../../hooks/usePinnedColumnStyles.js';
6
6
  import '@tanstack/react-table';
7
7
  import '../../../../Stack/Stack.js';
8
8
  import { theme } from '../../../../../theme/index.js';
9
- import '../../../../Choice/components/styled.js';
9
+ import 'framer-motion';
10
+ import '../../../../Tooltip/components/styled.js';
11
+ import '../../../../Tooltip/components/TooltipPopover.js';
12
+ import 'react-dom';
10
13
  import '../../../../Text/Text.js';
11
- import '../../../../Checkbox/styled.js';
12
14
  import '../../../../Radio/Radio.js';
13
15
  import { CellContent } from '../../CellContent/CellContent.js';
14
16
  import styles from '../BodyCell/BodyCell.module.scss.js';
@@ -1 +1 @@
1
- {"version":3,"file":"LoadingBodyCell.js","sources":["../../../../../../src/components/DataGrid/components/Body/LoadingBody/LoadingBodyCell.tsx"],"sourcesContent":["import React from 'react';\nimport { Column } from '@tanstack/react-table';\n\nimport { Skeleton } from '../../../../Skeleton';\nimport { buildClassnames } from '../../../../../utils';\nimport { usePinnedColumnStyles } from '../../../hooks';\nimport { CellContent } from '../../CellContent';\nimport { theme } from '../../../../../theme';\n\nimport styles from '../BodyCell/BodyCell.module.scss';\n\ntype LoadingBodyCellProps = {\n /**\n * The TanStack Table column instance.\n */\n column: Column<any, any>;\n};\n\n/**\n * A cell component for the DataGrid that displays a skeleton loader.\n */\nexport const LoadingBodyCell = ({ column }: LoadingBodyCellProps) => {\n const { justifyContent, textAlign } = column.columnDef.meta!;\n const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({\n column,\n });\n\n const loadingCellClassname = buildClassnames([\n styles.bodyCell,\n pinnedCellClassName,\n 'data-grid-cell',\n 'data-grid-cell-loading',\n ]);\n\n return (\n <td\n className={loadingCellClassname}\n style={pinnedCellStyles}\n aria-colindex={column.getIndex() + 1}\n >\n <CellContent\n contentStyle={\n {\n justifyContent,\n textAlign,\n } as React.CSSProperties\n }\n >\n <Skeleton width=\"75%\" height={theme.sizes[3]} />\n </CellContent>\n </td>\n );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;;AAkBA;;AAEG;MACU,eAAe,GAAG,CAAC,EAAE,MAAM,EAAwB,KAAI;IAClE,MAAM,EAAE,cAAc,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,SAAS,CAAC,IAAK;AAC5D,IAAA,MAAM,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,GAAG,qBAAqB,CAAC;QACtE,MAAM;AACP,KAAA,CAAC;IAEF,MAAM,oBAAoB,GAAG,eAAe,CAAC;AAC3C,QAAA,MAAM,CAAC,QAAQ;QACf,mBAAmB;QACnB,gBAAgB;QAChB,wBAAwB;AACzB,KAAA,CAAC;AAEF,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EACE,SAAS,EAAE,oBAAoB,EAC/B,KAAK,EAAE,gBAAgB,mBACR,MAAM,CAAC,QAAQ,EAAE,GAAG,CAAC,EAAA;QAEpCA,cAAA,CAAA,aAAA,CAAC,WAAW,EAAA,EACV,YAAY,EACV;gBACE,cAAc;gBACd,SAAS;AACa,aAAA,EAAA;AAG1B,YAAAA,cAAA,CAAA,aAAA,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAC,KAAK,EAAC,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,GAAI,CACpC,CACX;AAET;;;;"}
1
+ {"version":3,"file":"LoadingBodyCell.js","sources":["../../../../../../src/components/DataGrid/components/Body/LoadingBody/LoadingBodyCell.tsx"],"sourcesContent":["import React from 'react';\nimport { Column } from '@tanstack/react-table';\n\nimport { Skeleton } from '../../../../Skeleton';\nimport { buildClassnames } from '../../../../../utils';\nimport { usePinnedColumnStyles } from '../../../hooks';\nimport { CellContent } from '../../CellContent';\nimport { theme } from '../../../../../theme';\n\nimport styles from '../BodyCell/BodyCell.module.scss';\n\ntype LoadingBodyCellProps = {\n /**\n * The TanStack Table column instance.\n */\n column: Column<any, any>;\n};\n\n/**\n * A cell component for the DataGrid that displays a skeleton loader.\n */\nexport const LoadingBodyCell = ({ column }: LoadingBodyCellProps) => {\n const { justifyContent, textAlign } = column.columnDef.meta!;\n const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({\n column,\n });\n\n const loadingCellClassname = buildClassnames([\n styles.bodyCell,\n pinnedCellClassName,\n 'data-grid-cell',\n 'data-grid-cell-loading',\n ]);\n\n return (\n <td\n className={loadingCellClassname}\n style={pinnedCellStyles}\n aria-colindex={column.getIndex() + 1}\n >\n <CellContent\n contentStyle={\n {\n justifyContent,\n textAlign,\n } as React.CSSProperties\n }\n >\n <Skeleton width=\"75%\" height={theme.sizes[3]} />\n </CellContent>\n </td>\n );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;;;;AAkBA;;AAEG;MACU,eAAe,GAAG,CAAC,EAAE,MAAM,EAAwB,KAAI;IAClE,MAAM,EAAE,cAAc,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,SAAS,CAAC,IAAK;AAC5D,IAAA,MAAM,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,GAAG,qBAAqB,CAAC;QACtE,MAAM;AACP,KAAA,CAAC;IAEF,MAAM,oBAAoB,GAAG,eAAe,CAAC;AAC3C,QAAA,MAAM,CAAC,QAAQ;QACf,mBAAmB;QACnB,gBAAgB;QAChB,wBAAwB;AACzB,KAAA,CAAC;AAEF,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EACE,SAAS,EAAE,oBAAoB,EAC/B,KAAK,EAAE,gBAAgB,mBACR,MAAM,CAAC,QAAQ,EAAE,GAAG,CAAC,EAAA;QAEpCA,cAAA,CAAA,aAAA,CAAC,WAAW,EAAA,EACV,YAAY,EACV;gBACE,cAAc;gBACd,SAAS;AACa,aAAA,EAAA;AAG1B,YAAAA,cAAA,CAAA,aAAA,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAC,KAAK,EAAC,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,GAAI,CACpC,CACX;AAET;;;;"}
@@ -12,9 +12,11 @@ var GridContainer_module = require('./GridContainer.module.scss.cjs');
12
12
  var usePinnedColumnLayout = require('../../hooks/usePinnedColumnLayout.cjs');
13
13
  require('@tanstack/react-table');
14
14
  require('../../../Stack/Stack.cjs');
15
- require('../../../Choice/components/styled.cjs');
15
+ require('framer-motion');
16
+ require('../../../Tooltip/components/styled.cjs');
17
+ require('../../../Tooltip/components/TooltipPopover.cjs');
18
+ require('react-dom');
16
19
  require('../../../Text/Text.cjs');
17
- require('../../../Checkbox/styled.cjs');
18
20
  require('../../../Radio/Radio.cjs');
19
21
 
20
22
  function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
@@ -1 +1 @@
1
- {"version":3,"file":"GridContainer.cjs","sources":["../../../../../src/components/DataGrid/components/GridContainer/GridContainer.tsx"],"sourcesContent":["import React, { RefObject, CSSProperties, ReactNode, AriaAttributes } from 'react';\nimport { Table } from '@tanstack/react-table';\n\nimport { theme } from 'Theme';\nimport { SizeScale } from 'Theme/modules/sizes';\n\nimport { useScrollPosition } from '../../../../hooks';\nimport { BorderMode } from '../../types/enums';\nimport { AriaRoles } from '../../types';\nimport { buildClassnames } from '../../../../utils/buildClassnames';\n\nimport { Container } from './Container';\n\nimport styles from './GridContainer.module.scss';\nimport { usePinnedColumnLayout } from '../../hooks';\n\ntype GridContainerProps = Pick<AriaAttributes, 'aria-label'> &\n Pick<React.HTMLAttributes<HTMLTableElement>, 'id' | 'className'> & {\n /**\n * Reference to be used for the outer container element.\n */\n containerRef?: RefObject<HTMLDivElement>;\n\n /**\n * Reference to be used for the table element.\n */\n tableRef?: RefObject<HTMLTableElement>;\n\n /**\n * Border mode.\n */\n borderMode: BorderMode;\n\n /**\n * Additional container styles.\n */\n containerStyles?: CSSProperties;\n\n /**\n * ARIA roles used in the grid.\n */\n ariaRoles: AriaRoles;\n\n /**\n * Whether resizeable columns are enabled or not.\n */\n enableResizeableColumns: boolean;\n\n /**\n * Density of the grid.\n */\n density: keyof SizeScale;\n\n /**\n * The TanStack Table instance.\n */\n table: Table<any>;\n\n /**\n * Child elements (table contents).\n */\n children: ReactNode;\n };\n\nconst gridContainerClassname = buildClassnames([styles.dataGridStyle, 'data-grid']);\n\n/**\n * The Grid container, which includes a wrapper and the table element itself. Controls table layout, applies\n * styling and sets table-specific CSS variables (such as density).\n */\nexport const GridContainer = ({\n containerRef,\n tableRef,\n borderMode,\n containerStyles,\n ariaRoles,\n enableResizeableColumns,\n density,\n table,\n children,\n id,\n className,\n 'aria-label': ariaLabel,\n}: GridContainerProps) => {\n const { pinnedColumnLayoutStyles } = usePinnedColumnLayout({ table });\n const { scrollPosition, onScroll, enableTransition } = useScrollPosition({ containerRef });\n\n // CSS variables to control pinned column shadow visibility\n const hideShadows = !scrollPosition || scrollPosition === 'none';\n const shadowVisibility = {\n '--pinned-left-shadow-opacity': hideShadows || scrollPosition === 'start' ? 0 : 1,\n '--pinned-right-shadow-opacity': hideShadows || scrollPosition === 'end' ? 0 : 1,\n '--pinned-shadow-transition-duration': enableTransition ? '0.3s' : '0s',\n };\n\n return (\n <Container\n ref={containerRef}\n borderMode={borderMode}\n style={containerStyles}\n onScroll={onScroll}\n >\n <table\n id={id}\n ref={tableRef}\n className={buildClassnames([gridContainerClassname, className])}\n role={ariaRoles.table}\n style={\n {\n tableLayout: enableResizeableColumns ? 'fixed' : 'auto',\n '--density': theme.sizes[density],\n ...pinnedColumnLayoutStyles,\n ...shadowVisibility,\n } as CSSProperties\n }\n aria-colcount={table.getFlatHeaders().length}\n aria-rowcount={table.getRowCount()}\n aria-label={ariaLabel}\n >\n {children}\n </table>\n </Container>\n );\n};\n"],"names":["buildClassnames","styles","usePinnedColumnLayout","useScrollPosition","React","Container","theme"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAgEA,MAAM,sBAAsB,GAAGA,+BAAe,CAAC,CAACC,oBAAM,CAAC,aAAa,EAAE,WAAW,CAAC,CAAC;AAEnF;;;AAGG;AACI,MAAM,aAAa,GAAG,CAAC,EAC5B,YAAY,EACZ,QAAQ,EACR,UAAU,EACV,eAAe,EACf,SAAS,EACT,uBAAuB,EACvB,OAAO,EACP,KAAK,EACL,QAAQ,EACR,EAAE,EACF,SAAS,EACT,YAAY,EAAE,SAAS,GACJ,KAAI;IACvB,MAAM,EAAE,wBAAwB,EAAE,GAAGC,2CAAqB,CAAC,EAAE,KAAK,EAAE,CAAC;AACrE,IAAA,MAAM,EAAE,cAAc,EAAE,QAAQ,EAAE,gBAAgB,EAAE,GAAGC,mCAAiB,CAAC,EAAE,YAAY,EAAE,CAAC;;IAG1F,MAAM,WAAW,GAAG,CAAC,cAAc,IAAI,cAAc,KAAK,MAAM;AAChE,IAAA,MAAM,gBAAgB,GAAG;AACvB,QAAA,8BAA8B,EAAE,WAAW,IAAI,cAAc,KAAK,OAAO,GAAG,CAAC,GAAG,CAAC;AACjF,QAAA,+BAA+B,EAAE,WAAW,IAAI,cAAc,KAAK,KAAK,GAAG,CAAC,GAAG,CAAC;QAChF,qCAAqC,EAAE,gBAAgB,GAAG,MAAM,GAAG,IAAI;KACxE;AAED,IAAA,QACEC,sBAAA,CAAA,aAAA,CAACC,mBAAS,IACR,GAAG,EAAE,YAAY,EACjB,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,eAAe,EACtB,QAAQ,EAAE,QAAQ,EAAA;QAElBD,sBAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EACE,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,QAAQ,EACb,SAAS,EAAEJ,+BAAe,CAAC,CAAC,sBAAsB,EAAE,SAAS,CAAC,CAAC,EAC/D,IAAI,EAAE,SAAS,CAAC,KAAK,EACrB,KAAK,EACH;gBACE,WAAW,EAAE,uBAAuB,GAAG,OAAO,GAAG,MAAM;AACvD,gBAAA,WAAW,EAAEM,WAAK,CAAC,KAAK,CAAC,OAAO,CAAC;AACjC,gBAAA,GAAG,wBAAwB;AAC3B,gBAAA,GAAG,gBAAgB;AACH,aAAA,EAAA,eAAA,EAEL,KAAK,CAAC,cAAc,EAAE,CAAC,MAAM,mBAC7B,KAAK,CAAC,WAAW,EAAE,gBACtB,SAAS,EAAA,EAEpB,QAAQ,CACH,CACE;AAEhB;;;;"}
1
+ {"version":3,"file":"GridContainer.cjs","sources":["../../../../../src/components/DataGrid/components/GridContainer/GridContainer.tsx"],"sourcesContent":["import React, { RefObject, CSSProperties, ReactNode, AriaAttributes } from 'react';\nimport { Table } from '@tanstack/react-table';\n\nimport { theme } from 'Theme';\nimport { SizeScale } from 'Theme/modules/sizes';\n\nimport { useScrollPosition } from '../../../../hooks';\nimport { BorderMode } from '../../types/enums';\nimport { AriaRoles } from '../../types';\nimport { buildClassnames } from '../../../../utils/buildClassnames';\n\nimport { Container } from './Container';\n\nimport styles from './GridContainer.module.scss';\nimport { usePinnedColumnLayout } from '../../hooks';\n\ntype GridContainerProps = Pick<AriaAttributes, 'aria-label'> &\n Pick<React.HTMLAttributes<HTMLTableElement>, 'id' | 'className'> & {\n /**\n * Reference to be used for the outer container element.\n */\n containerRef?: RefObject<HTMLDivElement>;\n\n /**\n * Reference to be used for the table element.\n */\n tableRef?: RefObject<HTMLTableElement>;\n\n /**\n * Border mode.\n */\n borderMode: BorderMode;\n\n /**\n * Additional container styles.\n */\n containerStyles?: CSSProperties;\n\n /**\n * ARIA roles used in the grid.\n */\n ariaRoles: AriaRoles;\n\n /**\n * Whether resizeable columns are enabled or not.\n */\n enableResizeableColumns: boolean;\n\n /**\n * Density of the grid.\n */\n density: keyof SizeScale;\n\n /**\n * The TanStack Table instance.\n */\n table: Table<any>;\n\n /**\n * Child elements (table contents).\n */\n children: ReactNode;\n };\n\nconst gridContainerClassname = buildClassnames([styles.dataGridStyle, 'data-grid']);\n\n/**\n * The Grid container, which includes a wrapper and the table element itself. Controls table layout, applies\n * styling and sets table-specific CSS variables (such as density).\n */\nexport const GridContainer = ({\n containerRef,\n tableRef,\n borderMode,\n containerStyles,\n ariaRoles,\n enableResizeableColumns,\n density,\n table,\n children,\n id,\n className,\n 'aria-label': ariaLabel,\n}: GridContainerProps) => {\n const { pinnedColumnLayoutStyles } = usePinnedColumnLayout({ table });\n const { scrollPosition, onScroll, enableTransition } = useScrollPosition({ containerRef });\n\n // CSS variables to control pinned column shadow visibility\n const hideShadows = !scrollPosition || scrollPosition === 'none';\n const shadowVisibility = {\n '--pinned-left-shadow-opacity': hideShadows || scrollPosition === 'start' ? 0 : 1,\n '--pinned-right-shadow-opacity': hideShadows || scrollPosition === 'end' ? 0 : 1,\n '--pinned-shadow-transition-duration': enableTransition ? '0.3s' : '0s',\n };\n\n return (\n <Container\n ref={containerRef}\n borderMode={borderMode}\n style={containerStyles}\n onScroll={onScroll}\n >\n <table\n id={id}\n ref={tableRef}\n className={buildClassnames([gridContainerClassname, className])}\n role={ariaRoles.table}\n style={\n {\n tableLayout: enableResizeableColumns ? 'fixed' : 'auto',\n '--density': theme.sizes[density],\n ...pinnedColumnLayoutStyles,\n ...shadowVisibility,\n } as CSSProperties\n }\n aria-colcount={table.getFlatHeaders().length}\n aria-rowcount={table.getRowCount()}\n aria-label={ariaLabel}\n >\n {children}\n </table>\n </Container>\n );\n};\n"],"names":["buildClassnames","styles","usePinnedColumnLayout","useScrollPosition","React","Container","theme"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAgEA,MAAM,sBAAsB,GAAGA,+BAAe,CAAC,CAACC,oBAAM,CAAC,aAAa,EAAE,WAAW,CAAC,CAAC;AAEnF;;;AAGG;AACI,MAAM,aAAa,GAAG,CAAC,EAC5B,YAAY,EACZ,QAAQ,EACR,UAAU,EACV,eAAe,EACf,SAAS,EACT,uBAAuB,EACvB,OAAO,EACP,KAAK,EACL,QAAQ,EACR,EAAE,EACF,SAAS,EACT,YAAY,EAAE,SAAS,GACJ,KAAI;IACvB,MAAM,EAAE,wBAAwB,EAAE,GAAGC,2CAAqB,CAAC,EAAE,KAAK,EAAE,CAAC;AACrE,IAAA,MAAM,EAAE,cAAc,EAAE,QAAQ,EAAE,gBAAgB,EAAE,GAAGC,mCAAiB,CAAC,EAAE,YAAY,EAAE,CAAC;;IAG1F,MAAM,WAAW,GAAG,CAAC,cAAc,IAAI,cAAc,KAAK,MAAM;AAChE,IAAA,MAAM,gBAAgB,GAAG;AACvB,QAAA,8BAA8B,EAAE,WAAW,IAAI,cAAc,KAAK,OAAO,GAAG,CAAC,GAAG,CAAC;AACjF,QAAA,+BAA+B,EAAE,WAAW,IAAI,cAAc,KAAK,KAAK,GAAG,CAAC,GAAG,CAAC;QAChF,qCAAqC,EAAE,gBAAgB,GAAG,MAAM,GAAG,IAAI;KACxE;AAED,IAAA,QACEC,sBAAA,CAAA,aAAA,CAACC,mBAAS,IACR,GAAG,EAAE,YAAY,EACjB,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,eAAe,EACtB,QAAQ,EAAE,QAAQ,EAAA;QAElBD,sBAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EACE,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,QAAQ,EACb,SAAS,EAAEJ,+BAAe,CAAC,CAAC,sBAAsB,EAAE,SAAS,CAAC,CAAC,EAC/D,IAAI,EAAE,SAAS,CAAC,KAAK,EACrB,KAAK,EACH;gBACE,WAAW,EAAE,uBAAuB,GAAG,OAAO,GAAG,MAAM;AACvD,gBAAA,WAAW,EAAEM,WAAK,CAAC,KAAK,CAAC,OAAO,CAAC;AACjC,gBAAA,GAAG,wBAAwB;AAC3B,gBAAA,GAAG,gBAAgB;AACH,aAAA,EAAA,eAAA,EAEL,KAAK,CAAC,cAAc,EAAE,CAAC,MAAM,mBAC7B,KAAK,CAAC,WAAW,EAAE,gBACtB,SAAS,EAAA,EAEpB,QAAQ,CACH,CACE;AAEhB;;;;"}
@@ -10,9 +10,11 @@ import styles from './GridContainer.module.scss.js';
10
10
  import { usePinnedColumnLayout } from '../../hooks/usePinnedColumnLayout.js';
11
11
  import '@tanstack/react-table';
12
12
  import '../../../Stack/Stack.js';
13
- import '../../../Choice/components/styled.js';
13
+ import 'framer-motion';
14
+ import '../../../Tooltip/components/styled.js';
15
+ import '../../../Tooltip/components/TooltipPopover.js';
16
+ import 'react-dom';
14
17
  import '../../../Text/Text.js';
15
- import '../../../Checkbox/styled.js';
16
18
  import '../../../Radio/Radio.js';
17
19
 
18
20
  const gridContainerClassname = buildClassnames([styles.dataGridStyle, 'data-grid']);
@@ -1 +1 @@
1
- {"version":3,"file":"GridContainer.js","sources":["../../../../../src/components/DataGrid/components/GridContainer/GridContainer.tsx"],"sourcesContent":["import React, { RefObject, CSSProperties, ReactNode, AriaAttributes } from 'react';\nimport { Table } from '@tanstack/react-table';\n\nimport { theme } from 'Theme';\nimport { SizeScale } from 'Theme/modules/sizes';\n\nimport { useScrollPosition } from '../../../../hooks';\nimport { BorderMode } from '../../types/enums';\nimport { AriaRoles } from '../../types';\nimport { buildClassnames } from '../../../../utils/buildClassnames';\n\nimport { Container } from './Container';\n\nimport styles from './GridContainer.module.scss';\nimport { usePinnedColumnLayout } from '../../hooks';\n\ntype GridContainerProps = Pick<AriaAttributes, 'aria-label'> &\n Pick<React.HTMLAttributes<HTMLTableElement>, 'id' | 'className'> & {\n /**\n * Reference to be used for the outer container element.\n */\n containerRef?: RefObject<HTMLDivElement>;\n\n /**\n * Reference to be used for the table element.\n */\n tableRef?: RefObject<HTMLTableElement>;\n\n /**\n * Border mode.\n */\n borderMode: BorderMode;\n\n /**\n * Additional container styles.\n */\n containerStyles?: CSSProperties;\n\n /**\n * ARIA roles used in the grid.\n */\n ariaRoles: AriaRoles;\n\n /**\n * Whether resizeable columns are enabled or not.\n */\n enableResizeableColumns: boolean;\n\n /**\n * Density of the grid.\n */\n density: keyof SizeScale;\n\n /**\n * The TanStack Table instance.\n */\n table: Table<any>;\n\n /**\n * Child elements (table contents).\n */\n children: ReactNode;\n };\n\nconst gridContainerClassname = buildClassnames([styles.dataGridStyle, 'data-grid']);\n\n/**\n * The Grid container, which includes a wrapper and the table element itself. Controls table layout, applies\n * styling and sets table-specific CSS variables (such as density).\n */\nexport const GridContainer = ({\n containerRef,\n tableRef,\n borderMode,\n containerStyles,\n ariaRoles,\n enableResizeableColumns,\n density,\n table,\n children,\n id,\n className,\n 'aria-label': ariaLabel,\n}: GridContainerProps) => {\n const { pinnedColumnLayoutStyles } = usePinnedColumnLayout({ table });\n const { scrollPosition, onScroll, enableTransition } = useScrollPosition({ containerRef });\n\n // CSS variables to control pinned column shadow visibility\n const hideShadows = !scrollPosition || scrollPosition === 'none';\n const shadowVisibility = {\n '--pinned-left-shadow-opacity': hideShadows || scrollPosition === 'start' ? 0 : 1,\n '--pinned-right-shadow-opacity': hideShadows || scrollPosition === 'end' ? 0 : 1,\n '--pinned-shadow-transition-duration': enableTransition ? '0.3s' : '0s',\n };\n\n return (\n <Container\n ref={containerRef}\n borderMode={borderMode}\n style={containerStyles}\n onScroll={onScroll}\n >\n <table\n id={id}\n ref={tableRef}\n className={buildClassnames([gridContainerClassname, className])}\n role={ariaRoles.table}\n style={\n {\n tableLayout: enableResizeableColumns ? 'fixed' : 'auto',\n '--density': theme.sizes[density],\n ...pinnedColumnLayoutStyles,\n ...shadowVisibility,\n } as CSSProperties\n }\n aria-colcount={table.getFlatHeaders().length}\n aria-rowcount={table.getRowCount()}\n aria-label={ariaLabel}\n >\n {children}\n </table>\n </Container>\n );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;;;;AAgEA,MAAM,sBAAsB,GAAG,eAAe,CAAC,CAAC,MAAM,CAAC,aAAa,EAAE,WAAW,CAAC,CAAC;AAEnF;;;AAGG;AACI,MAAM,aAAa,GAAG,CAAC,EAC5B,YAAY,EACZ,QAAQ,EACR,UAAU,EACV,eAAe,EACf,SAAS,EACT,uBAAuB,EACvB,OAAO,EACP,KAAK,EACL,QAAQ,EACR,EAAE,EACF,SAAS,EACT,YAAY,EAAE,SAAS,GACJ,KAAI;IACvB,MAAM,EAAE,wBAAwB,EAAE,GAAG,qBAAqB,CAAC,EAAE,KAAK,EAAE,CAAC;AACrE,IAAA,MAAM,EAAE,cAAc,EAAE,QAAQ,EAAE,gBAAgB,EAAE,GAAG,iBAAiB,CAAC,EAAE,YAAY,EAAE,CAAC;;IAG1F,MAAM,WAAW,GAAG,CAAC,cAAc,IAAI,cAAc,KAAK,MAAM;AAChE,IAAA,MAAM,gBAAgB,GAAG;AACvB,QAAA,8BAA8B,EAAE,WAAW,IAAI,cAAc,KAAK,OAAO,GAAG,CAAC,GAAG,CAAC;AACjF,QAAA,+BAA+B,EAAE,WAAW,IAAI,cAAc,KAAK,KAAK,GAAG,CAAC,GAAG,CAAC;QAChF,qCAAqC,EAAE,gBAAgB,GAAG,MAAM,GAAG,IAAI;KACxE;AAED,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,SAAS,IACR,GAAG,EAAE,YAAY,EACjB,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,eAAe,EACtB,QAAQ,EAAE,QAAQ,EAAA;QAElBA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EACE,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,eAAe,CAAC,CAAC,sBAAsB,EAAE,SAAS,CAAC,CAAC,EAC/D,IAAI,EAAE,SAAS,CAAC,KAAK,EACrB,KAAK,EACH;gBACE,WAAW,EAAE,uBAAuB,GAAG,OAAO,GAAG,MAAM;AACvD,gBAAA,WAAW,EAAE,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC;AACjC,gBAAA,GAAG,wBAAwB;AAC3B,gBAAA,GAAG,gBAAgB;AACH,aAAA,EAAA,eAAA,EAEL,KAAK,CAAC,cAAc,EAAE,CAAC,MAAM,mBAC7B,KAAK,CAAC,WAAW,EAAE,gBACtB,SAAS,EAAA,EAEpB,QAAQ,CACH,CACE;AAEhB;;;;"}
1
+ {"version":3,"file":"GridContainer.js","sources":["../../../../../src/components/DataGrid/components/GridContainer/GridContainer.tsx"],"sourcesContent":["import React, { RefObject, CSSProperties, ReactNode, AriaAttributes } from 'react';\nimport { Table } from '@tanstack/react-table';\n\nimport { theme } from 'Theme';\nimport { SizeScale } from 'Theme/modules/sizes';\n\nimport { useScrollPosition } from '../../../../hooks';\nimport { BorderMode } from '../../types/enums';\nimport { AriaRoles } from '../../types';\nimport { buildClassnames } from '../../../../utils/buildClassnames';\n\nimport { Container } from './Container';\n\nimport styles from './GridContainer.module.scss';\nimport { usePinnedColumnLayout } from '../../hooks';\n\ntype GridContainerProps = Pick<AriaAttributes, 'aria-label'> &\n Pick<React.HTMLAttributes<HTMLTableElement>, 'id' | 'className'> & {\n /**\n * Reference to be used for the outer container element.\n */\n containerRef?: RefObject<HTMLDivElement>;\n\n /**\n * Reference to be used for the table element.\n */\n tableRef?: RefObject<HTMLTableElement>;\n\n /**\n * Border mode.\n */\n borderMode: BorderMode;\n\n /**\n * Additional container styles.\n */\n containerStyles?: CSSProperties;\n\n /**\n * ARIA roles used in the grid.\n */\n ariaRoles: AriaRoles;\n\n /**\n * Whether resizeable columns are enabled or not.\n */\n enableResizeableColumns: boolean;\n\n /**\n * Density of the grid.\n */\n density: keyof SizeScale;\n\n /**\n * The TanStack Table instance.\n */\n table: Table<any>;\n\n /**\n * Child elements (table contents).\n */\n children: ReactNode;\n };\n\nconst gridContainerClassname = buildClassnames([styles.dataGridStyle, 'data-grid']);\n\n/**\n * The Grid container, which includes a wrapper and the table element itself. Controls table layout, applies\n * styling and sets table-specific CSS variables (such as density).\n */\nexport const GridContainer = ({\n containerRef,\n tableRef,\n borderMode,\n containerStyles,\n ariaRoles,\n enableResizeableColumns,\n density,\n table,\n children,\n id,\n className,\n 'aria-label': ariaLabel,\n}: GridContainerProps) => {\n const { pinnedColumnLayoutStyles } = usePinnedColumnLayout({ table });\n const { scrollPosition, onScroll, enableTransition } = useScrollPosition({ containerRef });\n\n // CSS variables to control pinned column shadow visibility\n const hideShadows = !scrollPosition || scrollPosition === 'none';\n const shadowVisibility = {\n '--pinned-left-shadow-opacity': hideShadows || scrollPosition === 'start' ? 0 : 1,\n '--pinned-right-shadow-opacity': hideShadows || scrollPosition === 'end' ? 0 : 1,\n '--pinned-shadow-transition-duration': enableTransition ? '0.3s' : '0s',\n };\n\n return (\n <Container\n ref={containerRef}\n borderMode={borderMode}\n style={containerStyles}\n onScroll={onScroll}\n >\n <table\n id={id}\n ref={tableRef}\n className={buildClassnames([gridContainerClassname, className])}\n role={ariaRoles.table}\n style={\n {\n tableLayout: enableResizeableColumns ? 'fixed' : 'auto',\n '--density': theme.sizes[density],\n ...pinnedColumnLayoutStyles,\n ...shadowVisibility,\n } as CSSProperties\n }\n aria-colcount={table.getFlatHeaders().length}\n aria-rowcount={table.getRowCount()}\n aria-label={ariaLabel}\n >\n {children}\n </table>\n </Container>\n );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;;;;;;AAgEA,MAAM,sBAAsB,GAAG,eAAe,CAAC,CAAC,MAAM,CAAC,aAAa,EAAE,WAAW,CAAC,CAAC;AAEnF;;;AAGG;AACI,MAAM,aAAa,GAAG,CAAC,EAC5B,YAAY,EACZ,QAAQ,EACR,UAAU,EACV,eAAe,EACf,SAAS,EACT,uBAAuB,EACvB,OAAO,EACP,KAAK,EACL,QAAQ,EACR,EAAE,EACF,SAAS,EACT,YAAY,EAAE,SAAS,GACJ,KAAI;IACvB,MAAM,EAAE,wBAAwB,EAAE,GAAG,qBAAqB,CAAC,EAAE,KAAK,EAAE,CAAC;AACrE,IAAA,MAAM,EAAE,cAAc,EAAE,QAAQ,EAAE,gBAAgB,EAAE,GAAG,iBAAiB,CAAC,EAAE,YAAY,EAAE,CAAC;;IAG1F,MAAM,WAAW,GAAG,CAAC,cAAc,IAAI,cAAc,KAAK,MAAM;AAChE,IAAA,MAAM,gBAAgB,GAAG;AACvB,QAAA,8BAA8B,EAAE,WAAW,IAAI,cAAc,KAAK,OAAO,GAAG,CAAC,GAAG,CAAC;AACjF,QAAA,+BAA+B,EAAE,WAAW,IAAI,cAAc,KAAK,KAAK,GAAG,CAAC,GAAG,CAAC;QAChF,qCAAqC,EAAE,gBAAgB,GAAG,MAAM,GAAG,IAAI;KACxE;AAED,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,SAAS,IACR,GAAG,EAAE,YAAY,EACjB,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,eAAe,EACtB,QAAQ,EAAE,QAAQ,EAAA;QAElBA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EACE,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,eAAe,CAAC,CAAC,sBAAsB,EAAE,SAAS,CAAC,CAAC,EAC/D,IAAI,EAAE,SAAS,CAAC,KAAK,EACrB,KAAK,EACH;gBACE,WAAW,EAAE,uBAAuB,GAAG,OAAO,GAAG,MAAM;AACvD,gBAAA,WAAW,EAAE,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC;AACjC,gBAAA,GAAG,wBAAwB;AAC3B,gBAAA,GAAG,gBAAgB;AACH,aAAA,EAAA,eAAA,EAEL,KAAK,CAAC,cAAc,EAAE,CAAC,MAAM,mBAC7B,KAAK,CAAC,WAAW,EAAE,gBACtB,SAAS,EAAA,EAEpB,QAAQ,CACH,CACE;AAEhB;;;;"}
@@ -11,9 +11,11 @@ require('../../../../../theme/modules/shadows.cjs');
11
11
  require('../../../../../theme/modules/sizes.cjs');
12
12
  require('../../../../../theme/modules/text.cjs');
13
13
  require('styled-components');
14
- require('../../../../Choice/components/styled.cjs');
14
+ require('framer-motion');
15
+ require('../../../../Tooltip/components/styled.cjs');
16
+ require('../../../../Tooltip/components/TooltipPopover.cjs');
17
+ require('react-dom');
15
18
  require('../../../../Text/Text.cjs');
16
- require('../../../../Checkbox/styled.cjs');
17
19
  require('../../../../Radio/Radio.cjs');
18
20
  var Resizer = require('../Resizer/Resizer.cjs');
19
21
  var HeaderCell_module = require('./HeaderCell.module.scss.cjs');
@@ -1 +1 @@
1
- {"version":3,"file":"HeaderCell.cjs","sources":["../../../../../../src/components/DataGrid/components/Header/HeaderCell/HeaderCell.tsx"],"sourcesContent":["import React, { CSSProperties } from 'react';\n\nimport { flexRender, Header, SortDirection, Table } from '@tanstack/react-table';\n\nimport { buildClassnames } from '../../../../../utils';\n\nimport { usePinnedColumnStyles } from '../../../hooks';\nimport { isLastColumn } from '../../../utils';\n\nimport { Resizer } from '../Resizer';\nimport styles from './HeaderCell.module.scss';\n\nimport { SortIcon } from './SortIcon';\n\ntype HeaderCellProps = {\n /**\n * The TanStack Table instance.\n */\n table: Table<any>;\n\n /**\n * The Header within the TanStack Table instance.\n */\n header: Header<any, any>;\n\n /**\n * The index of this header in the grid.\n */\n index: number;\n};\n\nconst getAriaSort = (sortDirection: false | SortDirection) => {\n if (!sortDirection) {\n return undefined;\n }\n\n return sortDirection === 'asc' ? 'ascending' : 'descending';\n};\n\n/**\n * A header cell within the DataGrid component. Responsible for rendering the column header and resize bar,\n * if resizing is enabled.\n */\nexport const HeaderCell = ({ table, header, index }: HeaderCellProps) => {\n const { justifyContent, textAlign, getAriaLabel } = header.column.columnDef.meta!;\n const headerRenderer = header.column.columnDef.header;\n\n const sortable = table.options.enableSorting && header.column.getCanSort();\n const isSorted = header.column.getIsSorted();\n const ariaSort = getAriaSort(isSorted);\n\n const resizeable =\n table.options.enableColumnResizing &&\n header.column.getCanResize() &&\n !isLastColumn(table, header.column); // Last column can't be resized since it occupies all remaining space.\n\n const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({\n column: header.column,\n });\n\n const headerCellClassname = buildClassnames([\n styles.headerCell,\n pinnedCellClassName,\n 'data-grid-header-cell',\n ]);\n\n const HeaderContents = flexRender(headerRenderer, header.getContext());\n const HeaderContentComponent = sortable ? 'button' : 'div';\n const headerContentClassname = buildClassnames([\n sortable ? styles.clickableHeaderContent : styles.headerContent,\n 'data-grid-header-content',\n ]);\n const headerContentProps = {\n justifyContent,\n textAlign,\n } as CSSProperties;\n\n return (\n <th\n className={headerCellClassname}\n role=\"columnheader\"\n scope=\"col\"\n aria-colindex={index + 1}\n aria-label={getAriaLabel?.()}\n style={pinnedCellStyles}\n aria-sort={ariaSort}\n >\n {/* Header content */}\n <HeaderContentComponent\n className={headerContentClassname}\n style={headerContentProps}\n onClick={sortable ? header.column.getToggleSortingHandler() : undefined}\n >\n {/* If we've been given just text to render, apply styles for text overflow */}\n {typeof headerRenderer === 'string' ? (\n <span className={styles.headerOverflow}>{HeaderContents}</span>\n ) : (\n HeaderContents\n )}\n\n {sortable && <SortIcon isSorted={isSorted} />}\n </HeaderContentComponent>\n\n {/* Column resizer */}\n {resizeable && (\n <Resizer\n getIsResizing={header.column.getIsResizing}\n getResizeHandler={header.getResizeHandler()}\n resetSize={header.column.resetSize}\n deltaOffset={\n table.options.columnResizeMode === 'onChange'\n ? null\n : table.getState().columnSizingInfo.deltaOffset\n }\n />\n )}\n </th>\n );\n};\n"],"names":["isLastColumn","usePinnedColumnStyles","buildClassnames","styles","flexRender","React","SortIcon","Resizer"],"mappings":"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"}
1
+ {"version":3,"file":"HeaderCell.cjs","sources":["../../../../../../src/components/DataGrid/components/Header/HeaderCell/HeaderCell.tsx"],"sourcesContent":["import React, { CSSProperties } from 'react';\n\nimport { flexRender, Header, SortDirection, Table } from '@tanstack/react-table';\n\nimport { buildClassnames } from '../../../../../utils';\n\nimport { usePinnedColumnStyles } from '../../../hooks';\nimport { isLastColumn } from '../../../utils';\n\nimport { Resizer } from '../Resizer';\nimport styles from './HeaderCell.module.scss';\n\nimport { SortIcon } from './SortIcon';\n\ntype HeaderCellProps = {\n /**\n * The TanStack Table instance.\n */\n table: Table<any>;\n\n /**\n * The Header within the TanStack Table instance.\n */\n header: Header<any, any>;\n\n /**\n * The index of this header in the grid.\n */\n index: number;\n};\n\nconst getAriaSort = (sortDirection: false | SortDirection) => {\n if (!sortDirection) {\n return undefined;\n }\n\n return sortDirection === 'asc' ? 'ascending' : 'descending';\n};\n\n/**\n * A header cell within the DataGrid component. Responsible for rendering the column header and resize bar,\n * if resizing is enabled.\n */\nexport const HeaderCell = ({ table, header, index }: HeaderCellProps) => {\n const { justifyContent, textAlign, getAriaLabel } = header.column.columnDef.meta!;\n const headerRenderer = header.column.columnDef.header;\n\n const sortable = table.options.enableSorting && header.column.getCanSort();\n const isSorted = header.column.getIsSorted();\n const ariaSort = getAriaSort(isSorted);\n\n const resizeable =\n table.options.enableColumnResizing &&\n header.column.getCanResize() &&\n !isLastColumn(table, header.column); // Last column can't be resized since it occupies all remaining space.\n\n const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({\n column: header.column,\n });\n\n const headerCellClassname = buildClassnames([\n styles.headerCell,\n pinnedCellClassName,\n 'data-grid-header-cell',\n ]);\n\n const HeaderContents = flexRender(headerRenderer, header.getContext());\n const HeaderContentComponent = sortable ? 'button' : 'div';\n const headerContentClassname = buildClassnames([\n sortable ? styles.clickableHeaderContent : styles.headerContent,\n 'data-grid-header-content',\n ]);\n const headerContentProps = {\n justifyContent,\n textAlign,\n } as CSSProperties;\n\n return (\n <th\n className={headerCellClassname}\n role=\"columnheader\"\n scope=\"col\"\n aria-colindex={index + 1}\n aria-label={getAriaLabel?.()}\n style={pinnedCellStyles}\n aria-sort={ariaSort}\n >\n {/* Header content */}\n <HeaderContentComponent\n className={headerContentClassname}\n style={headerContentProps}\n onClick={sortable ? header.column.getToggleSortingHandler() : undefined}\n >\n {/* If we've been given just text to render, apply styles for text overflow */}\n {typeof headerRenderer === 'string' ? (\n <span className={styles.headerOverflow}>{HeaderContents}</span>\n ) : (\n HeaderContents\n )}\n\n {sortable && <SortIcon isSorted={isSorted} />}\n </HeaderContentComponent>\n\n {/* Column resizer */}\n {resizeable && (\n <Resizer\n getIsResizing={header.column.getIsResizing}\n getResizeHandler={header.getResizeHandler()}\n resetSize={header.column.resetSize}\n deltaOffset={\n table.options.columnResizeMode === 'onChange'\n ? null\n : table.getState().columnSizingInfo.deltaOffset\n }\n />\n )}\n </th>\n );\n};\n"],"names":["isLastColumn","usePinnedColumnStyles","buildClassnames","styles","flexRender","React","SortIcon","Resizer"],"mappings":"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"}
@@ -9,9 +9,11 @@ import '../../../../../theme/modules/shadows.js';
9
9
  import '../../../../../theme/modules/sizes.js';
10
10
  import '../../../../../theme/modules/text.js';
11
11
  import 'styled-components';
12
- import '../../../../Choice/components/styled.js';
12
+ import 'framer-motion';
13
+ import '../../../../Tooltip/components/styled.js';
14
+ import '../../../../Tooltip/components/TooltipPopover.js';
15
+ import 'react-dom';
13
16
  import '../../../../Text/Text.js';
14
- import '../../../../Checkbox/styled.js';
15
17
  import '../../../../Radio/Radio.js';
16
18
  import { Resizer } from '../Resizer/Resizer.js';
17
19
  import styles from './HeaderCell.module.scss.js';
@@ -1 +1 @@
1
- {"version":3,"file":"HeaderCell.js","sources":["../../../../../../src/components/DataGrid/components/Header/HeaderCell/HeaderCell.tsx"],"sourcesContent":["import React, { CSSProperties } from 'react';\n\nimport { flexRender, Header, SortDirection, Table } from '@tanstack/react-table';\n\nimport { buildClassnames } from '../../../../../utils';\n\nimport { usePinnedColumnStyles } from '../../../hooks';\nimport { isLastColumn } from '../../../utils';\n\nimport { Resizer } from '../Resizer';\nimport styles from './HeaderCell.module.scss';\n\nimport { SortIcon } from './SortIcon';\n\ntype HeaderCellProps = {\n /**\n * The TanStack Table instance.\n */\n table: Table<any>;\n\n /**\n * The Header within the TanStack Table instance.\n */\n header: Header<any, any>;\n\n /**\n * The index of this header in the grid.\n */\n index: number;\n};\n\nconst getAriaSort = (sortDirection: false | SortDirection) => {\n if (!sortDirection) {\n return undefined;\n }\n\n return sortDirection === 'asc' ? 'ascending' : 'descending';\n};\n\n/**\n * A header cell within the DataGrid component. Responsible for rendering the column header and resize bar,\n * if resizing is enabled.\n */\nexport const HeaderCell = ({ table, header, index }: HeaderCellProps) => {\n const { justifyContent, textAlign, getAriaLabel } = header.column.columnDef.meta!;\n const headerRenderer = header.column.columnDef.header;\n\n const sortable = table.options.enableSorting && header.column.getCanSort();\n const isSorted = header.column.getIsSorted();\n const ariaSort = getAriaSort(isSorted);\n\n const resizeable =\n table.options.enableColumnResizing &&\n header.column.getCanResize() &&\n !isLastColumn(table, header.column); // Last column can't be resized since it occupies all remaining space.\n\n const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({\n column: header.column,\n });\n\n const headerCellClassname = buildClassnames([\n styles.headerCell,\n pinnedCellClassName,\n 'data-grid-header-cell',\n ]);\n\n const HeaderContents = flexRender(headerRenderer, header.getContext());\n const HeaderContentComponent = sortable ? 'button' : 'div';\n const headerContentClassname = buildClassnames([\n sortable ? styles.clickableHeaderContent : styles.headerContent,\n 'data-grid-header-content',\n ]);\n const headerContentProps = {\n justifyContent,\n textAlign,\n } as CSSProperties;\n\n return (\n <th\n className={headerCellClassname}\n role=\"columnheader\"\n scope=\"col\"\n aria-colindex={index + 1}\n aria-label={getAriaLabel?.()}\n style={pinnedCellStyles}\n aria-sort={ariaSort}\n >\n {/* Header content */}\n <HeaderContentComponent\n className={headerContentClassname}\n style={headerContentProps}\n onClick={sortable ? header.column.getToggleSortingHandler() : undefined}\n >\n {/* If we've been given just text to render, apply styles for text overflow */}\n {typeof headerRenderer === 'string' ? (\n <span className={styles.headerOverflow}>{HeaderContents}</span>\n ) : (\n HeaderContents\n )}\n\n {sortable && <SortIcon isSorted={isSorted} />}\n </HeaderContentComponent>\n\n {/* Column resizer */}\n {resizeable && (\n <Resizer\n getIsResizing={header.column.getIsResizing}\n getResizeHandler={header.getResizeHandler()}\n resetSize={header.column.resetSize}\n deltaOffset={\n table.options.columnResizeMode === 'onChange'\n ? null\n : table.getState().columnSizingInfo.deltaOffset\n }\n />\n )}\n </th>\n );\n};\n"],"names":["React"],"mappings":"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"}
1
+ {"version":3,"file":"HeaderCell.js","sources":["../../../../../../src/components/DataGrid/components/Header/HeaderCell/HeaderCell.tsx"],"sourcesContent":["import React, { CSSProperties } from 'react';\n\nimport { flexRender, Header, SortDirection, Table } from '@tanstack/react-table';\n\nimport { buildClassnames } from '../../../../../utils';\n\nimport { usePinnedColumnStyles } from '../../../hooks';\nimport { isLastColumn } from '../../../utils';\n\nimport { Resizer } from '../Resizer';\nimport styles from './HeaderCell.module.scss';\n\nimport { SortIcon } from './SortIcon';\n\ntype HeaderCellProps = {\n /**\n * The TanStack Table instance.\n */\n table: Table<any>;\n\n /**\n * The Header within the TanStack Table instance.\n */\n header: Header<any, any>;\n\n /**\n * The index of this header in the grid.\n */\n index: number;\n};\n\nconst getAriaSort = (sortDirection: false | SortDirection) => {\n if (!sortDirection) {\n return undefined;\n }\n\n return sortDirection === 'asc' ? 'ascending' : 'descending';\n};\n\n/**\n * A header cell within the DataGrid component. Responsible for rendering the column header and resize bar,\n * if resizing is enabled.\n */\nexport const HeaderCell = ({ table, header, index }: HeaderCellProps) => {\n const { justifyContent, textAlign, getAriaLabel } = header.column.columnDef.meta!;\n const headerRenderer = header.column.columnDef.header;\n\n const sortable = table.options.enableSorting && header.column.getCanSort();\n const isSorted = header.column.getIsSorted();\n const ariaSort = getAriaSort(isSorted);\n\n const resizeable =\n table.options.enableColumnResizing &&\n header.column.getCanResize() &&\n !isLastColumn(table, header.column); // Last column can't be resized since it occupies all remaining space.\n\n const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({\n column: header.column,\n });\n\n const headerCellClassname = buildClassnames([\n styles.headerCell,\n pinnedCellClassName,\n 'data-grid-header-cell',\n ]);\n\n const HeaderContents = flexRender(headerRenderer, header.getContext());\n const HeaderContentComponent = sortable ? 'button' : 'div';\n const headerContentClassname = buildClassnames([\n sortable ? styles.clickableHeaderContent : styles.headerContent,\n 'data-grid-header-content',\n ]);\n const headerContentProps = {\n justifyContent,\n textAlign,\n } as CSSProperties;\n\n return (\n <th\n className={headerCellClassname}\n role=\"columnheader\"\n scope=\"col\"\n aria-colindex={index + 1}\n aria-label={getAriaLabel?.()}\n style={pinnedCellStyles}\n aria-sort={ariaSort}\n >\n {/* Header content */}\n <HeaderContentComponent\n className={headerContentClassname}\n style={headerContentProps}\n onClick={sortable ? header.column.getToggleSortingHandler() : undefined}\n >\n {/* If we've been given just text to render, apply styles for text overflow */}\n {typeof headerRenderer === 'string' ? (\n <span className={styles.headerOverflow}>{HeaderContents}</span>\n ) : (\n HeaderContents\n )}\n\n {sortable && <SortIcon isSorted={isSorted} />}\n </HeaderContentComponent>\n\n {/* Column resizer */}\n {resizeable && (\n <Resizer\n getIsResizing={header.column.getIsResizing}\n getResizeHandler={header.getResizeHandler()}\n resetSize={header.column.resetSize}\n deltaOffset={\n table.options.columnResizeMode === 'onChange'\n ? null\n : table.getState().columnSizingInfo.deltaOffset\n }\n />\n )}\n </th>\n );\n};\n"],"names":["React"],"mappings":"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"}
@@ -42,7 +42,6 @@ const DimensionsInput = withLabels.withLabels(({ size = 'base', handleChangeHeig
42
42
  },
43
43
  inputAffix: {
44
44
  compact,
45
- hasError,
46
45
  },
47
46
  };
48
47
  return (React__default.default.createElement(Stack.Stack, { direction: "horizontal", alignY: "center", className: className },
@@ -1 +1 @@
1
- {"version":3,"file":"DimensionsInput.cjs","sources":["../../../src/components/DimensionsInput/DimensionsInput.tsx"],"sourcesContent":["import React from 'react';\n\nimport { withLabels } from '../../hoc';\nimport { invalidCharsList } from '../../utils/invalidCharactersNumeric';\nimport { blockInvalidCharacters } from '../../utils/blockInvalidCharacters';\n\nimport { InputAffix, InputAffixProps } from '../InputAffix';\nimport { TextField, TextFieldProps } from '../TextField';\nimport { Stack } from '../Stack';\nimport { InputGroup, InputGroupProps } from '../InputGroup';\n\nimport { DimensionsProps } from './types';\n\ntype ChildComponentProps = {\n inputGroup: Partial<InputGroupProps>;\n textField: Partial<TextFieldProps>;\n inputAffix: Partial<InputAffixProps>;\n};\n\nconst blockInvalidChars = (e: React.KeyboardEvent) => blockInvalidCharacters(e, invalidCharsList);\n\nconst styles = {\n inputGroup: {\n flex: 1,\n },\n textField: {\n flex: 1,\n },\n};\n\nexport const DimensionsInput = withLabels<DimensionsProps>(\n ({\n size = 'base',\n handleChangeHeight,\n handleChangeWidth,\n handleChangeLength,\n className,\n height,\n width,\n length,\n unit = 'cm',\n hasError,\n ...rest\n }) => {\n const compact = size === 'sm';\n\n const childProps: ChildComponentProps = {\n inputGroup: {\n hasError,\n compact,\n style: styles.inputGroup,\n },\n textField: {\n type: 'number',\n min: '0',\n step: 'any',\n onKeyDown: blockInvalidChars,\n size,\n hasError,\n style: styles.textField,\n ...rest,\n },\n inputAffix: {\n compact,\n hasError,\n },\n };\n\n return (\n <Stack direction=\"horizontal\" alignY=\"center\" className={className}>\n <InputGroup {...childProps.inputGroup} style={{ flex: 1 }}>\n <InputAffix {...childProps.inputAffix}>L</InputAffix>\n <TextField\n {...childProps.textField}\n name=\"length\"\n value={length}\n aria-label=\"Length\"\n aria-describedby=\"length-unit\"\n onChange={handleChangeLength}\n placeholder=\"0\"\n />\n <InputAffix id=\"length-unit\" {...childProps.inputAffix}>\n {unit}\n </InputAffix>\n </InputGroup>\n <InputGroup {...childProps.inputGroup} style={{ flex: 1 }}>\n <InputAffix {...childProps.inputAffix}>W</InputAffix>\n <TextField\n {...childProps.textField}\n name=\"width\"\n value={width}\n aria-label=\"Width\"\n aria-describedby=\"width-unit\"\n onChange={handleChangeWidth}\n placeholder=\"0\"\n />\n <InputAffix id=\"width-unit\" {...childProps.inputAffix}>\n {unit}\n </InputAffix>\n </InputGroup>\n <InputGroup {...childProps.inputGroup} style={{ flex: 1 }}>\n <InputAffix {...childProps.inputAffix}>H</InputAffix>\n <TextField\n {...childProps.textField}\n name=\"height\"\n value={height}\n aria-label=\"Height\"\n aria-describedby=\"height-unit\"\n onChange={handleChangeHeight}\n placeholder=\"0\"\n />\n <InputAffix id=\"height-unit\" {...childProps.inputAffix}>\n {unit}\n </InputAffix>\n </InputGroup>\n </Stack>\n );\n },\n);\n\nDimensionsInput.displayName = 'DimensionsInput';\n"],"names":["blockInvalidCharacters","invalidCharsList","withLabels","React","Stack","InputGroup","InputAffix","TextField"],"mappings":"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"}
1
+ {"version":3,"file":"DimensionsInput.cjs","sources":["../../../src/components/DimensionsInput/DimensionsInput.tsx"],"sourcesContent":["import React from 'react';\n\nimport { withLabels } from '../../hoc';\nimport { invalidCharsList } from '../../utils/invalidCharactersNumeric';\nimport { blockInvalidCharacters } from '../../utils/blockInvalidCharacters';\n\nimport { InputAffix, InputAffixProps } from '../InputAffix';\nimport { TextField, TextFieldProps } from '../TextField';\nimport { Stack } from '../Stack';\nimport { InputGroup, InputGroupProps } from '../InputGroup';\n\nimport { DimensionsProps } from './types';\n\ntype ChildComponentProps = {\n inputGroup: Partial<InputGroupProps>;\n textField: Partial<TextFieldProps>;\n inputAffix: Partial<InputAffixProps>;\n};\n\nconst blockInvalidChars = (e: React.KeyboardEvent) => blockInvalidCharacters(e, invalidCharsList);\n\nconst styles = {\n inputGroup: {\n flex: 1,\n },\n textField: {\n flex: 1,\n },\n};\n\nexport const DimensionsInput = withLabels<DimensionsProps>(\n ({\n size = 'base',\n handleChangeHeight,\n handleChangeWidth,\n handleChangeLength,\n className,\n height,\n width,\n length,\n unit = 'cm',\n hasError,\n ...rest\n }) => {\n const compact = size === 'sm';\n\n const childProps: ChildComponentProps = {\n inputGroup: {\n hasError,\n compact,\n style: styles.inputGroup,\n },\n textField: {\n type: 'number',\n min: '0',\n step: 'any',\n onKeyDown: blockInvalidChars,\n size,\n hasError,\n style: styles.textField,\n ...rest,\n },\n inputAffix: {\n compact,\n },\n };\n\n return (\n <Stack direction=\"horizontal\" alignY=\"center\" className={className}>\n <InputGroup {...childProps.inputGroup} style={{ flex: 1 }}>\n <InputAffix {...childProps.inputAffix}>L</InputAffix>\n <TextField\n {...childProps.textField}\n name=\"length\"\n value={length}\n aria-label=\"Length\"\n aria-describedby=\"length-unit\"\n onChange={handleChangeLength}\n placeholder=\"0\"\n />\n <InputAffix id=\"length-unit\" {...childProps.inputAffix}>\n {unit}\n </InputAffix>\n </InputGroup>\n <InputGroup {...childProps.inputGroup} style={{ flex: 1 }}>\n <InputAffix {...childProps.inputAffix}>W</InputAffix>\n <TextField\n {...childProps.textField}\n name=\"width\"\n value={width}\n aria-label=\"Width\"\n aria-describedby=\"width-unit\"\n onChange={handleChangeWidth}\n placeholder=\"0\"\n />\n <InputAffix id=\"width-unit\" {...childProps.inputAffix}>\n {unit}\n </InputAffix>\n </InputGroup>\n <InputGroup {...childProps.inputGroup} style={{ flex: 1 }}>\n <InputAffix {...childProps.inputAffix}>H</InputAffix>\n <TextField\n {...childProps.textField}\n name=\"height\"\n value={height}\n aria-label=\"Height\"\n aria-describedby=\"height-unit\"\n onChange={handleChangeHeight}\n placeholder=\"0\"\n />\n <InputAffix id=\"height-unit\" {...childProps.inputAffix}>\n {unit}\n </InputAffix>\n </InputGroup>\n </Stack>\n );\n },\n);\n\nDimensionsInput.displayName = 'DimensionsInput';\n"],"names":["blockInvalidCharacters","invalidCharsList","withLabels","React","Stack","InputGroup","InputAffix","TextField"],"mappings":"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"}
@@ -36,7 +36,6 @@ const DimensionsInput = withLabels(({ size = 'base', handleChangeHeight, handleC
36
36
  },
37
37
  inputAffix: {
38
38
  compact,
39
- hasError,
40
39
  },
41
40
  };
42
41
  return (React__default.createElement(Stack, { direction: "horizontal", alignY: "center", className: className },
@@ -1 +1 @@
1
- {"version":3,"file":"DimensionsInput.js","sources":["../../../src/components/DimensionsInput/DimensionsInput.tsx"],"sourcesContent":["import React from 'react';\n\nimport { withLabels } from '../../hoc';\nimport { invalidCharsList } from '../../utils/invalidCharactersNumeric';\nimport { blockInvalidCharacters } from '../../utils/blockInvalidCharacters';\n\nimport { InputAffix, InputAffixProps } from '../InputAffix';\nimport { TextField, TextFieldProps } from '../TextField';\nimport { Stack } from '../Stack';\nimport { InputGroup, InputGroupProps } from '../InputGroup';\n\nimport { DimensionsProps } from './types';\n\ntype ChildComponentProps = {\n inputGroup: Partial<InputGroupProps>;\n textField: Partial<TextFieldProps>;\n inputAffix: Partial<InputAffixProps>;\n};\n\nconst blockInvalidChars = (e: React.KeyboardEvent) => blockInvalidCharacters(e, invalidCharsList);\n\nconst styles = {\n inputGroup: {\n flex: 1,\n },\n textField: {\n flex: 1,\n },\n};\n\nexport const DimensionsInput = withLabels<DimensionsProps>(\n ({\n size = 'base',\n handleChangeHeight,\n handleChangeWidth,\n handleChangeLength,\n className,\n height,\n width,\n length,\n unit = 'cm',\n hasError,\n ...rest\n }) => {\n const compact = size === 'sm';\n\n const childProps: ChildComponentProps = {\n inputGroup: {\n hasError,\n compact,\n style: styles.inputGroup,\n },\n textField: {\n type: 'number',\n min: '0',\n step: 'any',\n onKeyDown: blockInvalidChars,\n size,\n hasError,\n style: styles.textField,\n ...rest,\n },\n inputAffix: {\n compact,\n hasError,\n },\n };\n\n return (\n <Stack direction=\"horizontal\" alignY=\"center\" className={className}>\n <InputGroup {...childProps.inputGroup} style={{ flex: 1 }}>\n <InputAffix {...childProps.inputAffix}>L</InputAffix>\n <TextField\n {...childProps.textField}\n name=\"length\"\n value={length}\n aria-label=\"Length\"\n aria-describedby=\"length-unit\"\n onChange={handleChangeLength}\n placeholder=\"0\"\n />\n <InputAffix id=\"length-unit\" {...childProps.inputAffix}>\n {unit}\n </InputAffix>\n </InputGroup>\n <InputGroup {...childProps.inputGroup} style={{ flex: 1 }}>\n <InputAffix {...childProps.inputAffix}>W</InputAffix>\n <TextField\n {...childProps.textField}\n name=\"width\"\n value={width}\n aria-label=\"Width\"\n aria-describedby=\"width-unit\"\n onChange={handleChangeWidth}\n placeholder=\"0\"\n />\n <InputAffix id=\"width-unit\" {...childProps.inputAffix}>\n {unit}\n </InputAffix>\n </InputGroup>\n <InputGroup {...childProps.inputGroup} style={{ flex: 1 }}>\n <InputAffix {...childProps.inputAffix}>H</InputAffix>\n <TextField\n {...childProps.textField}\n name=\"height\"\n value={height}\n aria-label=\"Height\"\n aria-describedby=\"height-unit\"\n onChange={handleChangeHeight}\n placeholder=\"0\"\n />\n <InputAffix id=\"height-unit\" {...childProps.inputAffix}>\n {unit}\n </InputAffix>\n </InputGroup>\n </Stack>\n );\n },\n);\n\nDimensionsInput.displayName = 'DimensionsInput';\n"],"names":["React"],"mappings":"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"}
1
+ {"version":3,"file":"DimensionsInput.js","sources":["../../../src/components/DimensionsInput/DimensionsInput.tsx"],"sourcesContent":["import React from 'react';\n\nimport { withLabels } from '../../hoc';\nimport { invalidCharsList } from '../../utils/invalidCharactersNumeric';\nimport { blockInvalidCharacters } from '../../utils/blockInvalidCharacters';\n\nimport { InputAffix, InputAffixProps } from '../InputAffix';\nimport { TextField, TextFieldProps } from '../TextField';\nimport { Stack } from '../Stack';\nimport { InputGroup, InputGroupProps } from '../InputGroup';\n\nimport { DimensionsProps } from './types';\n\ntype ChildComponentProps = {\n inputGroup: Partial<InputGroupProps>;\n textField: Partial<TextFieldProps>;\n inputAffix: Partial<InputAffixProps>;\n};\n\nconst blockInvalidChars = (e: React.KeyboardEvent) => blockInvalidCharacters(e, invalidCharsList);\n\nconst styles = {\n inputGroup: {\n flex: 1,\n },\n textField: {\n flex: 1,\n },\n};\n\nexport const DimensionsInput = withLabels<DimensionsProps>(\n ({\n size = 'base',\n handleChangeHeight,\n handleChangeWidth,\n handleChangeLength,\n className,\n height,\n width,\n length,\n unit = 'cm',\n hasError,\n ...rest\n }) => {\n const compact = size === 'sm';\n\n const childProps: ChildComponentProps = {\n inputGroup: {\n hasError,\n compact,\n style: styles.inputGroup,\n },\n textField: {\n type: 'number',\n min: '0',\n step: 'any',\n onKeyDown: blockInvalidChars,\n size,\n hasError,\n style: styles.textField,\n ...rest,\n },\n inputAffix: {\n compact,\n },\n };\n\n return (\n <Stack direction=\"horizontal\" alignY=\"center\" className={className}>\n <InputGroup {...childProps.inputGroup} style={{ flex: 1 }}>\n <InputAffix {...childProps.inputAffix}>L</InputAffix>\n <TextField\n {...childProps.textField}\n name=\"length\"\n value={length}\n aria-label=\"Length\"\n aria-describedby=\"length-unit\"\n onChange={handleChangeLength}\n placeholder=\"0\"\n />\n <InputAffix id=\"length-unit\" {...childProps.inputAffix}>\n {unit}\n </InputAffix>\n </InputGroup>\n <InputGroup {...childProps.inputGroup} style={{ flex: 1 }}>\n <InputAffix {...childProps.inputAffix}>W</InputAffix>\n <TextField\n {...childProps.textField}\n name=\"width\"\n value={width}\n aria-label=\"Width\"\n aria-describedby=\"width-unit\"\n onChange={handleChangeWidth}\n placeholder=\"0\"\n />\n <InputAffix id=\"width-unit\" {...childProps.inputAffix}>\n {unit}\n </InputAffix>\n </InputGroup>\n <InputGroup {...childProps.inputGroup} style={{ flex: 1 }}>\n <InputAffix {...childProps.inputAffix}>H</InputAffix>\n <TextField\n {...childProps.textField}\n name=\"height\"\n value={height}\n aria-label=\"Height\"\n aria-describedby=\"height-unit\"\n onChange={handleChangeHeight}\n placeholder=\"0\"\n />\n <InputAffix id=\"height-unit\" {...childProps.inputAffix}>\n {unit}\n </InputAffix>\n </InputGroup>\n </Stack>\n );\n },\n);\n\nDimensionsInput.displayName = 'DimensionsInput';\n"],"names":["React"],"mappings":"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"}
@@ -1,23 +1,19 @@
1
1
  'use strict';
2
2
 
3
3
  var React = require('react');
4
- var styled = require('styled-components');
5
- var inputStyles = require('../../utils/forms/inputStyles.cjs');
6
- var index = require('../../theme/index.cjs');
4
+ var buildClassnames = require('../../utils/buildClassnames.cjs');
5
+ require('uid/secure');
7
6
  var Text = require('../Text/Text.cjs');
7
+ var InputAffix_module = require('./InputAffix.module.scss.cjs');
8
8
 
9
9
  function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
10
10
 
11
11
  var React__default = /*#__PURE__*/_interopDefaultCompat(React);
12
- var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
13
12
 
14
- const Container = styled__default.default.div.withConfig({ displayName: "vui--Container", componentId: "vui--zm6t34" }) `user-select:none;flex-shrink:0;${inputStyles.inputFullStyles} [data-input-group]:has(:disabled)&{background-color:${index.theme.colors.neutral.grey.light};}`;
15
- const StyledHint = styled__default.default(Text.Text).attrs({ variant: 'hintText' }).withConfig({ displayName: "vui--StyledHint", componentId: "vui--8xnkei" }) `font-size:${index.theme.text.body.fontSize};`;
16
- function InputAffix({ children, ...otherProps }) {
17
- return (React__default.default.createElement(Container, { ...otherProps },
18
- React__default.default.createElement(StyledHint, { variant: "hintText" }, children)));
13
+ function InputAffix({ children, compact, className, ...otherProps }) {
14
+ return (React__default.default.createElement("div", { className: buildClassnames.buildClassnames([InputAffix_module.container, compact && InputAffix_module.compact, className]), ...otherProps },
15
+ React__default.default.createElement(Text.Text, { variant: "hintText", className: InputAffix_module.hint }, children)));
19
16
  }
20
- InputAffix.Container = Container;
21
17
 
22
18
  exports.InputAffix = InputAffix;
23
19
  //# sourceMappingURL=InputAffix.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"InputAffix.cjs","sources":["../../../src/components/InputAffix/InputAffix.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { inputFullStyles } from '../../utils/forms/inputStyles';\nimport { theme } from '../../theme';\nimport { Text } from '../Text';\nimport { FormComponentProps } from '../types';\n\nexport type InputAffixProps = React.HTMLAttributes<HTMLDivElement> & FormComponentProps;\n\nconst Container = styled.div<InputAffixProps>`\n user-select: none;\n flex-shrink: 0;\n\n ${inputFullStyles}\n\n [data-input-group]:has(:disabled) & {\n background-color: ${theme.colors.neutral.grey.light};\n }\n`;\n\nconst StyledHint = styled(Text).attrs({ variant: 'hintText' })`\n font-size: ${theme.text.body.fontSize};\n`;\n\nexport function InputAffix({ children, ...otherProps }: InputAffixProps) {\n return (\n <Container {...otherProps}>\n <StyledHint variant=\"hintText\">{children}</StyledHint>\n </Container>\n );\n}\n\nInputAffix.Container = Container;\n"],"names":["styled","inputFullStyles","theme","Text","React"],"mappings":";;;;;;;;;;;;;AASA,MAAM,SAAS,GAAGA,uBAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,+BAAA,EAIxBC,2BAAe,CAAA,qDAAA,EAGKC,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,IAEtD;AAED,MAAM,UAAU,GAAGF,uBAAM,CAACG,SAAI,CAAC,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,UAAA,EAC/CD,WAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAA,CAAA,CACtC;AAEK,SAAU,UAAU,CAAC,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAmB,EAAA;AACrE,IAAA,QACEE,sBAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EAAA,GAAK,UAAU,EAAA;QACvBA,sBAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EAAC,OAAO,EAAC,UAAU,IAAE,QAAQ,CAAc,CAC5C;AAEhB;AAEA,UAAU,CAAC,SAAS,GAAG,SAAS;;;;"}
1
+ {"version":3,"file":"InputAffix.cjs","sources":["../../../src/components/InputAffix/InputAffix.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../utils';\nimport { Text } from '../Text';\n\nimport styles from './InputAffix.module.scss';\n\nexport type InputAffixProps = React.HTMLAttributes<HTMLDivElement> & {\n compact?: boolean;\n};\n\nexport function InputAffix({ children, compact, className, ...otherProps }: InputAffixProps) {\n return (\n <div\n className={buildClassnames([styles.container, compact && styles.compact, className])}\n {...otherProps}\n >\n <Text variant=\"hintText\" className={styles.hint}>\n {children}\n </Text>\n </div>\n );\n}\n"],"names":["React","buildClassnames","styles","Text"],"mappings":";;;;;;;;;;;;AAUM,SAAU,UAAU,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,UAAU,EAAmB,EAAA;IACzF,QACEA,8CACE,SAAS,EAAEC,+BAAe,CAAC,CAACC,iBAAM,CAAC,SAAS,EAAE,OAAO,IAAIA,iBAAM,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC,EAAA,GAChF,UAAU,EAAA;AAEd,QAAAF,sBAAA,CAAA,aAAA,CAACG,SAAI,EAAA,EAAC,OAAO,EAAC,UAAU,EAAC,SAAS,EAAED,iBAAM,CAAC,IAAI,EAAA,EAC5C,QAAQ,CACJ,CACH;AAEV;;;;"}
@@ -1,7 +1,5 @@
1
1
  import React from 'react';
2
- import { FormComponentProps } from '../types';
3
- export type InputAffixProps = React.HTMLAttributes<HTMLDivElement> & FormComponentProps;
4
- export declare function InputAffix({ children, ...otherProps }: InputAffixProps): React.JSX.Element;
5
- export declare namespace InputAffix {
6
- var Container: import("styled-components").StyledComponent<"div", any, React.HTMLAttributes<HTMLDivElement> & FormComponentProps, never>;
7
- }
2
+ export type InputAffixProps = React.HTMLAttributes<HTMLDivElement> & {
3
+ compact?: boolean;
4
+ };
5
+ export declare function InputAffix({ children, compact, className, ...otherProps }: InputAffixProps): React.JSX.Element;
@@ -1,16 +1,13 @@
1
1
  import React__default from 'react';
2
- import styled from 'styled-components';
3
- import { inputFullStyles } from '../../utils/forms/inputStyles.js';
4
- import { theme } from '../../theme/index.js';
2
+ import { buildClassnames } from '../../utils/buildClassnames.js';
3
+ import 'uid/secure';
5
4
  import { Text } from '../Text/Text.js';
5
+ import styles from './InputAffix.module.scss.js';
6
6
 
7
- const Container = styled.div.withConfig({ displayName: "vui--Container", componentId: "vui--zm6t34" }) `user-select:none;flex-shrink:0;${inputFullStyles} [data-input-group]:has(:disabled)&{background-color:${theme.colors.neutral.grey.light};}`;
8
- const StyledHint = styled(Text).attrs({ variant: 'hintText' }).withConfig({ displayName: "vui--StyledHint", componentId: "vui--8xnkei" }) `font-size:${theme.text.body.fontSize};`;
9
- function InputAffix({ children, ...otherProps }) {
10
- return (React__default.createElement(Container, { ...otherProps },
11
- React__default.createElement(StyledHint, { variant: "hintText" }, children)));
7
+ function InputAffix({ children, compact, className, ...otherProps }) {
8
+ return (React__default.createElement("div", { className: buildClassnames([styles.container, compact && styles.compact, className]), ...otherProps },
9
+ React__default.createElement(Text, { variant: "hintText", className: styles.hint }, children)));
12
10
  }
13
- InputAffix.Container = Container;
14
11
 
15
12
  export { InputAffix };
16
13
  //# sourceMappingURL=InputAffix.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"InputAffix.js","sources":["../../../src/components/InputAffix/InputAffix.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { inputFullStyles } from '../../utils/forms/inputStyles';\nimport { theme } from '../../theme';\nimport { Text } from '../Text';\nimport { FormComponentProps } from '../types';\n\nexport type InputAffixProps = React.HTMLAttributes<HTMLDivElement> & FormComponentProps;\n\nconst Container = styled.div<InputAffixProps>`\n user-select: none;\n flex-shrink: 0;\n\n ${inputFullStyles}\n\n [data-input-group]:has(:disabled) & {\n background-color: ${theme.colors.neutral.grey.light};\n }\n`;\n\nconst StyledHint = styled(Text).attrs({ variant: 'hintText' })`\n font-size: ${theme.text.body.fontSize};\n`;\n\nexport function InputAffix({ children, ...otherProps }: InputAffixProps) {\n return (\n <Container {...otherProps}>\n <StyledHint variant=\"hintText\">{children}</StyledHint>\n </Container>\n );\n}\n\nInputAffix.Container = Container;\n"],"names":["React"],"mappings":";;;;;;AASA,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,+BAAA,EAIxB,eAAe,CAAA,qDAAA,EAGK,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,IAEtD;AAED,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,UAAA,EAC/C,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAA,CAAA,CACtC;AAEK,SAAU,UAAU,CAAC,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAmB,EAAA;AACrE,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EAAA,GAAK,UAAU,EAAA;QACvBA,cAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EAAC,OAAO,EAAC,UAAU,IAAE,QAAQ,CAAc,CAC5C;AAEhB;AAEA,UAAU,CAAC,SAAS,GAAG,SAAS;;;;"}
1
+ {"version":3,"file":"InputAffix.js","sources":["../../../src/components/InputAffix/InputAffix.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../utils';\nimport { Text } from '../Text';\n\nimport styles from './InputAffix.module.scss';\n\nexport type InputAffixProps = React.HTMLAttributes<HTMLDivElement> & {\n compact?: boolean;\n};\n\nexport function InputAffix({ children, compact, className, ...otherProps }: InputAffixProps) {\n return (\n <div\n className={buildClassnames([styles.container, compact && styles.compact, className])}\n {...otherProps}\n >\n <Text variant=\"hintText\" className={styles.hint}>\n {children}\n </Text>\n </div>\n );\n}\n"],"names":["React"],"mappings":";;;;;;AAUM,SAAU,UAAU,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,UAAU,EAAmB,EAAA;IACzF,QACEA,sCACE,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,SAAS,EAAE,OAAO,IAAI,MAAM,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC,EAAA,GAChF,UAAU,EAAA;AAEd,QAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,OAAO,EAAC,UAAU,EAAC,SAAS,EAAE,MAAM,CAAC,IAAI,EAAA,EAC5C,QAAQ,CACJ,CACH;AAEV;;;;"}
@@ -0,0 +1,9 @@
1
+ 'use strict';
2
+
3
+ var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
4
+
5
+ ___$insertStyle("._container_nmclh_1 {\n user-select: none;\n flex-shrink: 0;\n box-sizing: border-box;\n background-color: white;\n min-height: var(--sizes-10);\n padding-inline: var(--sizes-3);\n border-radius: var(--radius-base);\n border: var(--sizes-line) solid var(--border-color, var(--colors-neutral-ink-lightest));\n display: flex;\n align-items: center;\n}\n[data-input-group] > ._container_nmclh_1:first-child {\n padding-right: calc(var(--sizes-3) - var(--sizes-1));\n}\n[data-input-group] > ._container_nmclh_1:last-child {\n padding-left: var(--sizes-2);\n}\n[data-input-group] > ._container_nmclh_1:not(:first-child):not(:last-child) {\n padding-inline: var(--sizes-2);\n}\n[data-input-group]:has(:disabled) ._container_nmclh_1 {\n background-color: var(--colors-neutral-grey-light);\n}\n\n._compact_nmclh_26 {\n min-height: var(--sizes-8);\n}\n\n._hint_nmclh_30 {\n font-size: var(--text-body-font-size);\n}");
6
+ var styles = {"container":"_container_nmclh_1","compact":"_compact_nmclh_26","hint":"_hint_nmclh_30"};
7
+
8
+ module.exports = styles;
9
+ //# sourceMappingURL=InputAffix.module.scss.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"InputAffix.module.scss.cjs","sources":["../../../src/components/InputAffix/InputAffix.module.scss"],"sourcesContent":[".container {\n user-select: none;\n flex-shrink: 0;\n box-sizing: border-box;\n\n background-color: white;\n min-height: var(--sizes-10);\n padding-inline: var(--sizes-3);\n border-radius: var(--radius-base);\n border: var(--sizes-line) solid var(--border-color, var(--colors-neutral-ink-lightest));\n\n display: flex;\n align-items: center;\n\n [data-input-group] > &:first-child {\n padding-right: calc(var(--sizes-3) - var(--sizes-1));\n }\n\n [data-input-group] > &:last-child {\n padding-left: var(--sizes-2);\n }\n\n [data-input-group] > &:not(:first-child):not(:last-child) {\n padding-inline: var(--sizes-2);\n }\n\n [data-input-group]:has(:disabled) & {\n background-color: var(--colors-neutral-grey-light);\n }\n}\n\n.compact {\n min-height: var(--sizes-8);\n}\n\n.hint {\n font-size: var(--text-body-font-size);\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,45BAAA;AACA,aAAA,CAAA,WAAA,CAAA,oBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,MAAA,CAAA,gBAAA;;;;"}
@@ -0,0 +1,7 @@
1
+ import insertStyle from '../../_virtual/____insertStyle.js';
2
+
3
+ insertStyle("._container_nmclh_1 {\n user-select: none;\n flex-shrink: 0;\n box-sizing: border-box;\n background-color: white;\n min-height: var(--sizes-10);\n padding-inline: var(--sizes-3);\n border-radius: var(--radius-base);\n border: var(--sizes-line) solid var(--border-color, var(--colors-neutral-ink-lightest));\n display: flex;\n align-items: center;\n}\n[data-input-group] > ._container_nmclh_1:first-child {\n padding-right: calc(var(--sizes-3) - var(--sizes-1));\n}\n[data-input-group] > ._container_nmclh_1:last-child {\n padding-left: var(--sizes-2);\n}\n[data-input-group] > ._container_nmclh_1:not(:first-child):not(:last-child) {\n padding-inline: var(--sizes-2);\n}\n[data-input-group]:has(:disabled) ._container_nmclh_1 {\n background-color: var(--colors-neutral-grey-light);\n}\n\n._compact_nmclh_26 {\n min-height: var(--sizes-8);\n}\n\n._hint_nmclh_30 {\n font-size: var(--text-body-font-size);\n}");
4
+ var styles = {"container":"_container_nmclh_1","compact":"_compact_nmclh_26","hint":"_hint_nmclh_30"};
5
+
6
+ export { styles as default };
7
+ //# sourceMappingURL=InputAffix.module.scss.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"InputAffix.module.scss.js","sources":["../../../src/components/InputAffix/InputAffix.module.scss"],"sourcesContent":[".container {\n user-select: none;\n flex-shrink: 0;\n box-sizing: border-box;\n\n background-color: white;\n min-height: var(--sizes-10);\n padding-inline: var(--sizes-3);\n border-radius: var(--radius-base);\n border: var(--sizes-line) solid var(--border-color, var(--colors-neutral-ink-lightest));\n\n display: flex;\n align-items: center;\n\n [data-input-group] > &:first-child {\n padding-right: calc(var(--sizes-3) - var(--sizes-1));\n }\n\n [data-input-group] > &:last-child {\n padding-left: var(--sizes-2);\n }\n\n [data-input-group] > &:not(:first-child):not(:last-child) {\n padding-inline: var(--sizes-2);\n }\n\n [data-input-group]:has(:disabled) & {\n background-color: var(--colors-neutral-grey-light);\n }\n}\n\n.compact {\n min-height: var(--sizes-8);\n}\n\n.hint {\n font-size: var(--text-body-font-size);\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,45BAAA;AACA,aAAA,CAAA,WAAA,CAAA,oBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,MAAA,CAAA,gBAAA;;;;"}
@@ -54,7 +54,7 @@ const PriceInput = withLabels.withLabels(({ className = '', hasError, currency,
54
54
  };
55
55
  const compact = size === 'sm';
56
56
  return (React__default.default.createElement(InputGroup.InputGroup, { hasError: hasError, style: flexStyle, className: className },
57
- React__default.default.createElement(InputAffix.InputAffix, { compact: compact, hasError: hasError }, currency),
57
+ React__default.default.createElement(InputAffix.InputAffix, { compact: compact }, currency),
58
58
  React__default.default.createElement(index.TextField, { placeholder: "0.00", value: priceValue, step: step, onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown, disabled: disabled, size: size, hasError: hasError, style: flexStyle, ...otherProps }),
59
59
  React__default.default.createElement(Stepper.Stepper, { onIncrement: () => handleIncrement(), onDecrement: () => handleDecrement(), disabled: disabled, hasError: hasError, size: size })));
60
60
  });