npm - @veeqo/ui - Versions diffs - 12.1.0 → 12.2.0 - Mend

@veeqo/ui 12.1.0 → 12.2.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 (28) hide show

package/dist/components/DataGrid/DataGrid.cjs CHANGED Viewed

@@ -42,7 +42,7 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
  *
  * *Important: This component uses CSS modules, and therefore requires a `<ThemeInjector />` to be present on your page.*
  */
-const DataGrid = ({ density = 'base', striped = true, borderMode = 'full', resizeMode = 'off', containerStyle, enableKeyboardNavigation = false, columns, hiddenColumns, columnOrdering, pinnedColumns, data, getRowId, rowThemes, sortState, onSortChanged, selectionMode, selectedRows, disabledRows, onSelectionChanged, rowGrouping, columnWidths, onColumnsResized, isLoading, loadingRowCount, emptyState, emptySlot, 'aria-label': ariaLabel, }) => {
+const DataGrid = ({ density = 'base', striped = true, borderMode = 'full', resizeMode = 'off', containerStyle, enableKeyboardNavigation = false, columns, hiddenColumns, columnOrdering, pinnedColumns, data, getRowId, rowThemes, sortState, onSortChanged, selectionMode, selectedRows, disabledRows, onSelectionChanged, rowGrouping, columnWidths, onColumnsResized, isLoading, loadingRowCount, emptyState, emptySlot, id, className, 'aria-label': ariaLabel, }) => {
     /**
      * Refs to the table and table container. Used for keyboard navigation and drag-to-scroll.
      */
@@ -147,7 +147,7 @@ const DataGrid = ({ density = 'base', striped = true, borderMode = 'full', resiz
         }
         return React__default.default.createElement(Body.Body, { ...bodyProps });
     };
-    return (React__default.default.createElement(GridContainer.GridContainer, { containerRef: containerRef, tableRef: tableRef, borderMode: borderMode, containerStyles: { ...containerStyle, ...pinnedColumnLayoutStyles }, ariaRoles: ariaRoles, enableResizeableColumns: enableColumnResizing, density: density, table: table, "aria-label": ariaLabel },
+    return (React__default.default.createElement(GridContainer.GridContainer, { containerRef: containerRef, tableRef: tableRef, borderMode: borderMode, containerStyles: { ...containerStyle, ...pinnedColumnLayoutStyles }, ariaRoles: ariaRoles, enableResizeableColumns: enableColumnResizing, density: density, table: table, id: id, className: className, "aria-label": ariaLabel },
         enableColumnResizing && React__default.default.createElement(Columns.Columns, { table: table }),
         React__default.default.createElement(Header.Header, { table: table }),
         renderBody(),

package/dist/components/DataGrid/DataGrid.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DataGrid.cjs","sources":["../../../src/components/DataGrid/DataGrid.tsx"],"sourcesContent":["import React, { useMemo, useRef } from 'react';\nimport { getCoreRowModel, getExpandedRowModel, useReactTable } from '@tanstack/react-table';\n\nimport { useDragToScroll } from '../../hooks';\n\nimport { DataGridProps } from './types';\nimport { getAriaRoles } from './utils';\nimport { GridContainer, Header, Body, Footer, Columns } from './components';\nimport { EmptyBody, LoadingBody, MemoizedBody } from './components/Body';\n\nimport {\n usePinnedColumnLayout,\n useSortingState,\n useKeyboardNavigation,\n useColumnState,\n useExpandedState,\n useColumnWidthState,\n useSelectionState,\n} from './hooks';\n\n/*\n A DataGrid component which renders data in a two-dimensional format, with columns and rows. Unlike the `DataTable`\n * component, the `DataGrid` supports both flat and hierarchical (tree) data.\n \n Under the hood, it uses [TanStack Table](http://tanstack.com/table/) for table management, and aims to replicate functionality\n * available in major third party grid components such as CloudScape's Table component, AgGrid, etc.\n \n Supported features include:\n * - Pinning, resizing (incl. smooth resizing), reordering, and hiding of columns\n * - Selection (single and multiple) and disabling of rows.\n * - Rendering of arbitrarily nested data, expanding/collapsing, and custom full-width 'group' rows.\n * - In-built keyboard navigation with arrow keys, and drag to scroll.\n * - Configurable density.\n \n Important: This component uses CSS modules, and therefore requires a `<ThemeInjector />` to be present on your page.\n /\nexport const DataGrid = ({\n density = 'base',\n striped = true,\n borderMode = 'full',\n resizeMode = 'off',\n containerStyle,\n enableKeyboardNavigation = false,\n\n columns,\n hiddenColumns,\n columnOrdering,\n pinnedColumns,\n\n data,\n getRowId,\n rowThemes,\n\n sortState,\n onSortChanged,\n\n selectionMode,\n selectedRows,\n disabledRows,\n onSelectionChanged,\n\n rowGrouping,\n\n columnWidths,\n onColumnsResized,\n\n isLoading,\n loadingRowCount,\n\n emptyState,\n emptySlot,\n\n 'aria-label': ariaLabel,\n}: DataGridProps) => {\n /\n Refs to the table and table container. Used for keyboard navigation and drag-to-scroll.\n /\n const containerRef = useRef<HTMLDivElement>(null);\n const tableRef = useRef<HTMLTableElement>(null);\n\n const showFooter = useMemo(\n () => !isLoading && columns.some((column) => column.renderFooter),\n [isLoading, columns],\n );\n const ariaRoles = useMemo(\n () => getAriaRoles({ enableKeyboardNavigation, rowGrouping }),\n [enableKeyboardNavigation, rowGrouping],\n );\n const enableColumnResizing = useMemo(() => resizeMode !== 'off', [resizeMode]);\n\n /\n Hooks to handle state for selection, sorting, and expanded/collapsed.\n /\n const { enableRowSelection, enableMultiRowSelection, rowSelection, onRowSelectionChange } =\n useSelectionState({\n selectionMode,\n selectedRows,\n disabledRows,\n onSelectionChanged,\n });\n\n const {\n enableSorting,\n enableMultiRemove,\n enableSortingRemoval,\n manualSorting,\n sorting,\n onSortingChange,\n } = useSortingState({ columns, sortState, onSortChanged });\n\n const { expanded, onExpandedChange, enableExpanding, getRowCanExpand, getSubRows } =\n useExpandedState(rowGrouping);\n\n /\n Hooks to setup column state, including visibility, ordering, pinning, and width(s).\n /\n const { mappedColumnDefinitions, columnOrder, columnVisibility, columnPinning } = useColumnState({\n columns,\n hiddenColumns,\n columnOrdering,\n pinnedColumns,\n enableRowSelection: !!enableRowSelection,\n });\n\n const { columnSizing, onColumnSizingChange } = useColumnWidthState({\n mappedColumnDefinitions,\n columnWidths,\n onColumnsResized,\n });\n\n /\n Setup the TanStack table, including mapped column definitions, row data, and any additional state such as\n * column visibility and ordering.\n /\n const table = useReactTable<any>({\n data,\n columns: mappedColumnDefinitions,\n\n // Column settings\n columnResizeMode: resizeMode === 'off' ? undefined : resizeMode,\n enableColumnResizing,\n onColumnSizingChange,\n\n // Row model\n getRowId,\n getCoreRowModel: getCoreRowModel(),\n\n // Sorting\n enableSorting,\n enableSortingRemoval,\n enableMultiRemove,\n manualSorting,\n onSortingChange,\n\n // Pinning\n enableColumnPinning: columnPinning.left.length + columnPinning.right.length > 0,\n\n // Selection\n enableRowSelection,\n enableMultiRowSelection,\n onRowSelectionChange,\n\n // Row grouping\n getSubRows,\n getRowCanExpand,\n onExpandedChange,\n enableExpanding,\n getExpandedRowModel: enableExpanding ? getExpandedRowModel() : undefined,\n\n // Inject external table state\n state: {\n columnOrder,\n columnVisibility,\n columnPinning,\n sorting,\n rowSelection,\n expanded,\n columnSizing,\n },\n });\n\n /\n Pinned column layout\n /\n const { pinnedColumnLayoutStyles } = usePinnedColumnLayout({ table });\n\n /\n Other hooks\n /\n useDragToScroll({ targetRef: containerRef, ignoreClassName: 'data-grid-column-resizer' });\n useKeyboardNavigation({ tableRef, enableKeyboardNavigation });\n\n const renderBody = () => {\n if (isLoading) {\n return <LoadingBody table={table} loadingRowCount={loadingRowCount ?? 5} striped={striped} />;\n }\n\n if (data.length === 0) {\n return <EmptyBody table={table} emptyState={emptyState} emptySlot={emptySlot} />;\n }\n\n const bodyProps = {\n table,\n ariaRoles,\n striped,\n rowThemes,\n };\n\n if (table.getState().columnSizingInfo.isResizingColumn) {\n return <MemoizedBody {...bodyProps} />;\n }\n\n return <Body {...bodyProps} />;\n };\n\n return (\n <GridContainer\n containerRef={containerRef}\n tableRef={tableRef}\n borderMode={borderMode}\n containerStyles={{ ...containerStyle, ...pinnedColumnLayoutStyles }}\n ariaRoles={ariaRoles}\n enableResizeableColumns={enableColumnResizing}\n density={density}\n table={table}\n aria-label={ariaLabel}\n >\n {/ Columns /}\n {enableColumnResizing && <Columns table={table} />}\n\n {/ Header /}\n <Header table={table} />\n\n {/ Body /}\n {renderBody()}\n\n {/ Footer */}\n {showFooter && <Footer table={table} ariaRoles={ariaRoles} />}\n </GridContainer>\n );\n};\n"],"names":["useRef","useMemo","getAriaRoles","useSelectionState","useSortingState","useExpandedState","useColumnState","useColumnWidthState","useReactTable","getCoreRowModel","getExpandedRowModel","usePinnedColumnLayout","useDragToScroll","useKeyboardNavigation","React","LoadingBody","EmptyBody","MemoizedBody","Body","GridContainer","Columns","Header","Footer"],"mappings":"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"}
1	+ {"version":3,"file":"DataGrid.cjs","sources":["../../../src/components/DataGrid/DataGrid.tsx"],"sourcesContent":["import React, { useMemo, useRef } from 'react';\nimport { getCoreRowModel, getExpandedRowModel, useReactTable } from '@tanstack/react-table';\n\nimport { useDragToScroll } from '../../hooks';\n\nimport { DataGridProps } from './types';\nimport { getAriaRoles } from './utils';\nimport { GridContainer, Header, Body, Footer, Columns } from './components';\nimport { EmptyBody, LoadingBody, MemoizedBody } from './components/Body';\n\nimport {\n usePinnedColumnLayout,\n useSortingState,\n useKeyboardNavigation,\n useColumnState,\n useExpandedState,\n useColumnWidthState,\n useSelectionState,\n} from './hooks';\n\n/*\n A DataGrid component which renders data in a two-dimensional format, with columns and rows. Unlike the `DataTable`\n * component, the `DataGrid` supports both flat and hierarchical (tree) data.\n \n Under the hood, it uses [TanStack Table](http://tanstack.com/table/) for table management, and aims to replicate functionality\n * available in major third party grid components such as CloudScape's Table component, AgGrid, etc.\n \n Supported features include:\n * - Pinning, resizing (incl. smooth resizing), reordering, and hiding of columns\n * - Selection (single and multiple) and disabling of rows.\n * - Rendering of arbitrarily nested data, expanding/collapsing, and custom full-width 'group' rows.\n * - In-built keyboard navigation with arrow keys, and drag to scroll.\n * - Configurable density.\n \n Important: This component uses CSS modules, and therefore requires a `<ThemeInjector />` to be present on your page.\n /\nexport const DataGrid = ({\n density = 'base',\n striped = true,\n borderMode = 'full',\n resizeMode = 'off',\n containerStyle,\n enableKeyboardNavigation = false,\n\n columns,\n hiddenColumns,\n columnOrdering,\n pinnedColumns,\n\n data,\n getRowId,\n rowThemes,\n\n sortState,\n onSortChanged,\n\n selectionMode,\n selectedRows,\n disabledRows,\n onSelectionChanged,\n\n rowGrouping,\n\n columnWidths,\n onColumnsResized,\n\n isLoading,\n loadingRowCount,\n\n emptyState,\n emptySlot,\n\n id,\n className,\n 'aria-label': ariaLabel,\n}: DataGridProps) => {\n /\n Refs to the table and table container. Used for keyboard navigation and drag-to-scroll.\n /\n const containerRef = useRef<HTMLDivElement>(null);\n const tableRef = useRef<HTMLTableElement>(null);\n\n const showFooter = useMemo(\n () => !isLoading && columns.some((column) => column.renderFooter),\n [isLoading, columns],\n );\n const ariaRoles = useMemo(\n () => getAriaRoles({ enableKeyboardNavigation, rowGrouping }),\n [enableKeyboardNavigation, rowGrouping],\n );\n const enableColumnResizing = useMemo(() => resizeMode !== 'off', [resizeMode]);\n\n /\n Hooks to handle state for selection, sorting, and expanded/collapsed.\n /\n const { enableRowSelection, enableMultiRowSelection, rowSelection, onRowSelectionChange } =\n useSelectionState({\n selectionMode,\n selectedRows,\n disabledRows,\n onSelectionChanged,\n });\n\n const {\n enableSorting,\n enableMultiRemove,\n enableSortingRemoval,\n manualSorting,\n sorting,\n onSortingChange,\n } = useSortingState({ columns, sortState, onSortChanged });\n\n const { expanded, onExpandedChange, enableExpanding, getRowCanExpand, getSubRows } =\n useExpandedState(rowGrouping);\n\n /\n Hooks to setup column state, including visibility, ordering, pinning, and width(s).\n /\n const { mappedColumnDefinitions, columnOrder, columnVisibility, columnPinning } = useColumnState({\n columns,\n hiddenColumns,\n columnOrdering,\n pinnedColumns,\n enableRowSelection: !!enableRowSelection,\n });\n\n const { columnSizing, onColumnSizingChange } = useColumnWidthState({\n mappedColumnDefinitions,\n columnWidths,\n onColumnsResized,\n });\n\n /\n Setup the TanStack table, including mapped column definitions, row data, and any additional state such as\n * column visibility and ordering.\n /\n const table = useReactTable<any>({\n data,\n columns: mappedColumnDefinitions,\n\n // Column settings\n columnResizeMode: resizeMode === 'off' ? undefined : resizeMode,\n enableColumnResizing,\n onColumnSizingChange,\n\n // Row model\n getRowId,\n getCoreRowModel: getCoreRowModel(),\n\n // Sorting\n enableSorting,\n enableSortingRemoval,\n enableMultiRemove,\n manualSorting,\n onSortingChange,\n\n // Pinning\n enableColumnPinning: columnPinning.left.length + columnPinning.right.length > 0,\n\n // Selection\n enableRowSelection,\n enableMultiRowSelection,\n onRowSelectionChange,\n\n // Row grouping\n getSubRows,\n getRowCanExpand,\n onExpandedChange,\n enableExpanding,\n getExpandedRowModel: enableExpanding ? getExpandedRowModel() : undefined,\n\n // Inject external table state\n state: {\n columnOrder,\n columnVisibility,\n columnPinning,\n sorting,\n rowSelection,\n expanded,\n columnSizing,\n },\n });\n\n /\n Pinned column layout\n /\n const { pinnedColumnLayoutStyles } = usePinnedColumnLayout({ table });\n\n /\n Other hooks\n /\n useDragToScroll({ targetRef: containerRef, ignoreClassName: 'data-grid-column-resizer' });\n useKeyboardNavigation({ tableRef, enableKeyboardNavigation });\n\n const renderBody = () => {\n if (isLoading) {\n return <LoadingBody table={table} loadingRowCount={loadingRowCount ?? 5} striped={striped} />;\n }\n\n if (data.length === 0) {\n return <EmptyBody table={table} emptyState={emptyState} emptySlot={emptySlot} />;\n }\n\n const bodyProps = {\n table,\n ariaRoles,\n striped,\n rowThemes,\n };\n\n if (table.getState().columnSizingInfo.isResizingColumn) {\n return <MemoizedBody {...bodyProps} />;\n }\n\n return <Body {...bodyProps} />;\n };\n\n return (\n <GridContainer\n containerRef={containerRef}\n tableRef={tableRef}\n borderMode={borderMode}\n containerStyles={{ ...containerStyle, ...pinnedColumnLayoutStyles }}\n ariaRoles={ariaRoles}\n enableResizeableColumns={enableColumnResizing}\n density={density}\n table={table}\n id={id}\n className={className}\n aria-label={ariaLabel}\n >\n {/ Columns /}\n {enableColumnResizing && <Columns table={table} />}\n\n {/ Header /}\n <Header table={table} />\n\n {/ Body /}\n {renderBody()}\n\n {/ Footer */}\n {showFooter && <Footer table={table} ariaRoles={ariaRoles} />}\n </GridContainer>\n );\n};\n"],"names":["useRef","useMemo","getAriaRoles","useSelectionState","useSortingState","useExpandedState","useColumnState","useColumnWidthState","useReactTable","getCoreRowModel","getExpandedRowModel","usePinnedColumnLayout","useDragToScroll","useKeyboardNavigation","React","LoadingBody","EmptyBody","MemoizedBody","Body","GridContainer","Columns","Header","Footer"],"mappings":"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"}

package/dist/components/DataGrid/DataGrid.d.ts CHANGED Viewed

@@ -16,4 +16,4 @@ import { DataGridProps } from './types';
  *
  * *Important: This component uses CSS modules, and therefore requires a `<ThemeInjector />` to be present on your page.*
  */
-export declare const DataGrid: ({ density, striped, borderMode, resizeMode, containerStyle, enableKeyboardNavigation, columns, hiddenColumns, columnOrdering, pinnedColumns, data, getRowId, rowThemes, sortState, onSortChanged, selectionMode, selectedRows, disabledRows, onSelectionChanged, rowGrouping, columnWidths, onColumnsResized, isLoading, loadingRowCount, emptyState, emptySlot, "aria-label": ariaLabel, }: DataGridProps) => React.JSX.Element;
+export declare const DataGrid: ({ density, striped, borderMode, resizeMode, containerStyle, enableKeyboardNavigation, columns, hiddenColumns, columnOrdering, pinnedColumns, data, getRowId, rowThemes, sortState, onSortChanged, selectionMode, selectedRows, disabledRows, onSelectionChanged, rowGrouping, columnWidths, onColumnsResized, isLoading, loadingRowCount, emptyState, emptySlot, id, className, "aria-label": ariaLabel, }: DataGridProps) => React.JSX.Element;

package/dist/components/DataGrid/DataGrid.js CHANGED Viewed

@@ -36,7 +36,7 @@ import { useExpandedState } from './hooks/useExpandedState.js';
  *
  * *Important: This component uses CSS modules, and therefore requires a `<ThemeInjector />` to be present on your page.*
  */
-const DataGrid = ({ density = 'base', striped = true, borderMode = 'full', resizeMode = 'off', containerStyle, enableKeyboardNavigation = false, columns, hiddenColumns, columnOrdering, pinnedColumns, data, getRowId, rowThemes, sortState, onSortChanged, selectionMode, selectedRows, disabledRows, onSelectionChanged, rowGrouping, columnWidths, onColumnsResized, isLoading, loadingRowCount, emptyState, emptySlot, 'aria-label': ariaLabel, }) => {
+const DataGrid = ({ density = 'base', striped = true, borderMode = 'full', resizeMode = 'off', containerStyle, enableKeyboardNavigation = false, columns, hiddenColumns, columnOrdering, pinnedColumns, data, getRowId, rowThemes, sortState, onSortChanged, selectionMode, selectedRows, disabledRows, onSelectionChanged, rowGrouping, columnWidths, onColumnsResized, isLoading, loadingRowCount, emptyState, emptySlot, id, className, 'aria-label': ariaLabel, }) => {
     /**
      * Refs to the table and table container. Used for keyboard navigation and drag-to-scroll.
      */
@@ -141,7 +141,7 @@ const DataGrid = ({ density = 'base', striped = true, borderMode = 'full', resiz
         }
         return React__default.createElement(Body, { ...bodyProps });
     };
-    return (React__default.createElement(GridContainer, { containerRef: containerRef, tableRef: tableRef, borderMode: borderMode, containerStyles: { ...containerStyle, ...pinnedColumnLayoutStyles }, ariaRoles: ariaRoles, enableResizeableColumns: enableColumnResizing, density: density, table: table, "aria-label": ariaLabel },
+    return (React__default.createElement(GridContainer, { containerRef: containerRef, tableRef: tableRef, borderMode: borderMode, containerStyles: { ...containerStyle, ...pinnedColumnLayoutStyles }, ariaRoles: ariaRoles, enableResizeableColumns: enableColumnResizing, density: density, table: table, id: id, className: className, "aria-label": ariaLabel },
         enableColumnResizing && React__default.createElement(Columns, { table: table }),
         React__default.createElement(Header, { table: table }),
         renderBody(),

package/dist/components/DataGrid/DataGrid.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DataGrid.js","sources":["../../../src/components/DataGrid/DataGrid.tsx"],"sourcesContent":["import React, { useMemo, useRef } from 'react';\nimport { getCoreRowModel, getExpandedRowModel, useReactTable } from '@tanstack/react-table';\n\nimport { useDragToScroll } from '../../hooks';\n\nimport { DataGridProps } from './types';\nimport { getAriaRoles } from './utils';\nimport { GridContainer, Header, Body, Footer, Columns } from './components';\nimport { EmptyBody, LoadingBody, MemoizedBody } from './components/Body';\n\nimport {\n usePinnedColumnLayout,\n useSortingState,\n useKeyboardNavigation,\n useColumnState,\n useExpandedState,\n useColumnWidthState,\n useSelectionState,\n} from './hooks';\n\n/*\n A DataGrid component which renders data in a two-dimensional format, with columns and rows. Unlike the `DataTable`\n * component, the `DataGrid` supports both flat and hierarchical (tree) data.\n \n Under the hood, it uses [TanStack Table](http://tanstack.com/table/) for table management, and aims to replicate functionality\n * available in major third party grid components such as CloudScape's Table component, AgGrid, etc.\n \n Supported features include:\n * - Pinning, resizing (incl. smooth resizing), reordering, and hiding of columns\n * - Selection (single and multiple) and disabling of rows.\n * - Rendering of arbitrarily nested data, expanding/collapsing, and custom full-width 'group' rows.\n * - In-built keyboard navigation with arrow keys, and drag to scroll.\n * - Configurable density.\n \n Important: This component uses CSS modules, and therefore requires a `<ThemeInjector />` to be present on your page.\n /\nexport const DataGrid = ({\n density = 'base',\n striped = true,\n borderMode = 'full',\n resizeMode = 'off',\n containerStyle,\n enableKeyboardNavigation = false,\n\n columns,\n hiddenColumns,\n columnOrdering,\n pinnedColumns,\n\n data,\n getRowId,\n rowThemes,\n\n sortState,\n onSortChanged,\n\n selectionMode,\n selectedRows,\n disabledRows,\n onSelectionChanged,\n\n rowGrouping,\n\n columnWidths,\n onColumnsResized,\n\n isLoading,\n loadingRowCount,\n\n emptyState,\n emptySlot,\n\n 'aria-label': ariaLabel,\n}: DataGridProps) => {\n /\n Refs to the table and table container. Used for keyboard navigation and drag-to-scroll.\n /\n const containerRef = useRef<HTMLDivElement>(null);\n const tableRef = useRef<HTMLTableElement>(null);\n\n const showFooter = useMemo(\n () => !isLoading && columns.some((column) => column.renderFooter),\n [isLoading, columns],\n );\n const ariaRoles = useMemo(\n () => getAriaRoles({ enableKeyboardNavigation, rowGrouping }),\n [enableKeyboardNavigation, rowGrouping],\n );\n const enableColumnResizing = useMemo(() => resizeMode !== 'off', [resizeMode]);\n\n /\n Hooks to handle state for selection, sorting, and expanded/collapsed.\n /\n const { enableRowSelection, enableMultiRowSelection, rowSelection, onRowSelectionChange } =\n useSelectionState({\n selectionMode,\n selectedRows,\n disabledRows,\n onSelectionChanged,\n });\n\n const {\n enableSorting,\n enableMultiRemove,\n enableSortingRemoval,\n manualSorting,\n sorting,\n onSortingChange,\n } = useSortingState({ columns, sortState, onSortChanged });\n\n const { expanded, onExpandedChange, enableExpanding, getRowCanExpand, getSubRows } =\n useExpandedState(rowGrouping);\n\n /\n Hooks to setup column state, including visibility, ordering, pinning, and width(s).\n /\n const { mappedColumnDefinitions, columnOrder, columnVisibility, columnPinning } = useColumnState({\n columns,\n hiddenColumns,\n columnOrdering,\n pinnedColumns,\n enableRowSelection: !!enableRowSelection,\n });\n\n const { columnSizing, onColumnSizingChange } = useColumnWidthState({\n mappedColumnDefinitions,\n columnWidths,\n onColumnsResized,\n });\n\n /\n Setup the TanStack table, including mapped column definitions, row data, and any additional state such as\n * column visibility and ordering.\n /\n const table = useReactTable<any>({\n data,\n columns: mappedColumnDefinitions,\n\n // Column settings\n columnResizeMode: resizeMode === 'off' ? undefined : resizeMode,\n enableColumnResizing,\n onColumnSizingChange,\n\n // Row model\n getRowId,\n getCoreRowModel: getCoreRowModel(),\n\n // Sorting\n enableSorting,\n enableSortingRemoval,\n enableMultiRemove,\n manualSorting,\n onSortingChange,\n\n // Pinning\n enableColumnPinning: columnPinning.left.length + columnPinning.right.length > 0,\n\n // Selection\n enableRowSelection,\n enableMultiRowSelection,\n onRowSelectionChange,\n\n // Row grouping\n getSubRows,\n getRowCanExpand,\n onExpandedChange,\n enableExpanding,\n getExpandedRowModel: enableExpanding ? getExpandedRowModel() : undefined,\n\n // Inject external table state\n state: {\n columnOrder,\n columnVisibility,\n columnPinning,\n sorting,\n rowSelection,\n expanded,\n columnSizing,\n },\n });\n\n /\n Pinned column layout\n /\n const { pinnedColumnLayoutStyles } = usePinnedColumnLayout({ table });\n\n /\n Other hooks\n /\n useDragToScroll({ targetRef: containerRef, ignoreClassName: 'data-grid-column-resizer' });\n useKeyboardNavigation({ tableRef, enableKeyboardNavigation });\n\n const renderBody = () => {\n if (isLoading) {\n return <LoadingBody table={table} loadingRowCount={loadingRowCount ?? 5} striped={striped} />;\n }\n\n if (data.length === 0) {\n return <EmptyBody table={table} emptyState={emptyState} emptySlot={emptySlot} />;\n }\n\n const bodyProps = {\n table,\n ariaRoles,\n striped,\n rowThemes,\n };\n\n if (table.getState().columnSizingInfo.isResizingColumn) {\n return <MemoizedBody {...bodyProps} />;\n }\n\n return <Body {...bodyProps} />;\n };\n\n return (\n <GridContainer\n containerRef={containerRef}\n tableRef={tableRef}\n borderMode={borderMode}\n containerStyles={{ ...containerStyle, ...pinnedColumnLayoutStyles }}\n ariaRoles={ariaRoles}\n enableResizeableColumns={enableColumnResizing}\n density={density}\n table={table}\n aria-label={ariaLabel}\n >\n {/ Columns /}\n {enableColumnResizing && <Columns table={table} />}\n\n {/ Header /}\n <Header table={table} />\n\n {/ Body /}\n {renderBody()}\n\n {/ Footer */}\n {showFooter && <Footer table={table} ariaRoles={ariaRoles} />}\n </GridContainer>\n );\n};\n"],"names":["React"],"mappings":"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"}
1	+ {"version":3,"file":"DataGrid.js","sources":["../../../src/components/DataGrid/DataGrid.tsx"],"sourcesContent":["import React, { useMemo, useRef } from 'react';\nimport { getCoreRowModel, getExpandedRowModel, useReactTable } from '@tanstack/react-table';\n\nimport { useDragToScroll } from '../../hooks';\n\nimport { DataGridProps } from './types';\nimport { getAriaRoles } from './utils';\nimport { GridContainer, Header, Body, Footer, Columns } from './components';\nimport { EmptyBody, LoadingBody, MemoizedBody } from './components/Body';\n\nimport {\n usePinnedColumnLayout,\n useSortingState,\n useKeyboardNavigation,\n useColumnState,\n useExpandedState,\n useColumnWidthState,\n useSelectionState,\n} from './hooks';\n\n/*\n A DataGrid component which renders data in a two-dimensional format, with columns and rows. Unlike the `DataTable`\n * component, the `DataGrid` supports both flat and hierarchical (tree) data.\n \n Under the hood, it uses [TanStack Table](http://tanstack.com/table/) for table management, and aims to replicate functionality\n * available in major third party grid components such as CloudScape's Table component, AgGrid, etc.\n \n Supported features include:\n * - Pinning, resizing (incl. smooth resizing), reordering, and hiding of columns\n * - Selection (single and multiple) and disabling of rows.\n * - Rendering of arbitrarily nested data, expanding/collapsing, and custom full-width 'group' rows.\n * - In-built keyboard navigation with arrow keys, and drag to scroll.\n * - Configurable density.\n \n Important: This component uses CSS modules, and therefore requires a `<ThemeInjector />` to be present on your page.\n /\nexport const DataGrid = ({\n density = 'base',\n striped = true,\n borderMode = 'full',\n resizeMode = 'off',\n containerStyle,\n enableKeyboardNavigation = false,\n\n columns,\n hiddenColumns,\n columnOrdering,\n pinnedColumns,\n\n data,\n getRowId,\n rowThemes,\n\n sortState,\n onSortChanged,\n\n selectionMode,\n selectedRows,\n disabledRows,\n onSelectionChanged,\n\n rowGrouping,\n\n columnWidths,\n onColumnsResized,\n\n isLoading,\n loadingRowCount,\n\n emptyState,\n emptySlot,\n\n id,\n className,\n 'aria-label': ariaLabel,\n}: DataGridProps) => {\n /\n Refs to the table and table container. Used for keyboard navigation and drag-to-scroll.\n /\n const containerRef = useRef<HTMLDivElement>(null);\n const tableRef = useRef<HTMLTableElement>(null);\n\n const showFooter = useMemo(\n () => !isLoading && columns.some((column) => column.renderFooter),\n [isLoading, columns],\n );\n const ariaRoles = useMemo(\n () => getAriaRoles({ enableKeyboardNavigation, rowGrouping }),\n [enableKeyboardNavigation, rowGrouping],\n );\n const enableColumnResizing = useMemo(() => resizeMode !== 'off', [resizeMode]);\n\n /\n Hooks to handle state for selection, sorting, and expanded/collapsed.\n /\n const { enableRowSelection, enableMultiRowSelection, rowSelection, onRowSelectionChange } =\n useSelectionState({\n selectionMode,\n selectedRows,\n disabledRows,\n onSelectionChanged,\n });\n\n const {\n enableSorting,\n enableMultiRemove,\n enableSortingRemoval,\n manualSorting,\n sorting,\n onSortingChange,\n } = useSortingState({ columns, sortState, onSortChanged });\n\n const { expanded, onExpandedChange, enableExpanding, getRowCanExpand, getSubRows } =\n useExpandedState(rowGrouping);\n\n /\n Hooks to setup column state, including visibility, ordering, pinning, and width(s).\n /\n const { mappedColumnDefinitions, columnOrder, columnVisibility, columnPinning } = useColumnState({\n columns,\n hiddenColumns,\n columnOrdering,\n pinnedColumns,\n enableRowSelection: !!enableRowSelection,\n });\n\n const { columnSizing, onColumnSizingChange } = useColumnWidthState({\n mappedColumnDefinitions,\n columnWidths,\n onColumnsResized,\n });\n\n /\n Setup the TanStack table, including mapped column definitions, row data, and any additional state such as\n * column visibility and ordering.\n /\n const table = useReactTable<any>({\n data,\n columns: mappedColumnDefinitions,\n\n // Column settings\n columnResizeMode: resizeMode === 'off' ? undefined : resizeMode,\n enableColumnResizing,\n onColumnSizingChange,\n\n // Row model\n getRowId,\n getCoreRowModel: getCoreRowModel(),\n\n // Sorting\n enableSorting,\n enableSortingRemoval,\n enableMultiRemove,\n manualSorting,\n onSortingChange,\n\n // Pinning\n enableColumnPinning: columnPinning.left.length + columnPinning.right.length > 0,\n\n // Selection\n enableRowSelection,\n enableMultiRowSelection,\n onRowSelectionChange,\n\n // Row grouping\n getSubRows,\n getRowCanExpand,\n onExpandedChange,\n enableExpanding,\n getExpandedRowModel: enableExpanding ? getExpandedRowModel() : undefined,\n\n // Inject external table state\n state: {\n columnOrder,\n columnVisibility,\n columnPinning,\n sorting,\n rowSelection,\n expanded,\n columnSizing,\n },\n });\n\n /\n Pinned column layout\n /\n const { pinnedColumnLayoutStyles } = usePinnedColumnLayout({ table });\n\n /\n Other hooks\n /\n useDragToScroll({ targetRef: containerRef, ignoreClassName: 'data-grid-column-resizer' });\n useKeyboardNavigation({ tableRef, enableKeyboardNavigation });\n\n const renderBody = () => {\n if (isLoading) {\n return <LoadingBody table={table} loadingRowCount={loadingRowCount ?? 5} striped={striped} />;\n }\n\n if (data.length === 0) {\n return <EmptyBody table={table} emptyState={emptyState} emptySlot={emptySlot} />;\n }\n\n const bodyProps = {\n table,\n ariaRoles,\n striped,\n rowThemes,\n };\n\n if (table.getState().columnSizingInfo.isResizingColumn) {\n return <MemoizedBody {...bodyProps} />;\n }\n\n return <Body {...bodyProps} />;\n };\n\n return (\n <GridContainer\n containerRef={containerRef}\n tableRef={tableRef}\n borderMode={borderMode}\n containerStyles={{ ...containerStyle, ...pinnedColumnLayoutStyles }}\n ariaRoles={ariaRoles}\n enableResizeableColumns={enableColumnResizing}\n density={density}\n table={table}\n id={id}\n className={className}\n aria-label={ariaLabel}\n >\n {/ Columns /}\n {enableColumnResizing && <Columns table={table} />}\n\n {/ Header /}\n <Header table={table} />\n\n {/ Body /}\n {renderBody()}\n\n {/ Footer */}\n {showFooter && <Footer table={table} ariaRoles={ariaRoles} />}\n </GridContainer>\n );\n};\n"],"names":["React"],"mappings":"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"}

package/dist/components/DataGrid/components/GridContainer/GridContainer.cjs CHANGED Viewed

@@ -24,10 +24,10 @@ const gridContainerClassname = buildClassnames.buildClassnames([GridContainer_mo
  * The Grid container, which includes a wrapper and the table element itself. Controls table layout, applies
  * styling and sets table-specific CSS variables (such as density).
  */
-const GridContainer = ({ containerRef, tableRef, borderMode, containerStyles, ariaRoles, enableResizeableColumns, density, table, children, 'aria-label': ariaLabel, }) => {
+const GridContainer = ({ containerRef, tableRef, borderMode, containerStyles, ariaRoles, enableResizeableColumns, density, table, children, id, className, 'aria-label': ariaLabel, }) => {
     const { pinnedColumnLayoutStyles } = usePinnedColumnLayout.usePinnedColumnLayout({ table });
     return (React__default.default.createElement(Container.Container, { ref: containerRef, borderMode: borderMode, style: containerStyles },
-        React__default.default.createElement("table", { ref: tableRef, className: gridContainerClassname, role: ariaRoles.table, style: {
+        React__default.default.createElement("table", { id: id, ref: tableRef, className: buildClassnames.buildClassnames([gridContainerClassname, className]), role: ariaRoles.table, style: {
                 tableLayout: enableResizeableColumns ? 'fixed' : 'auto',
                 '--density': index.theme.sizes[density],
                 ...pinnedColumnLayoutStyles,

package/dist/components/DataGrid/components/GridContainer/GridContainer.cjs.map CHANGED Viewed

	@@ -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 { 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 /*\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 'aria-label': ariaLabel,\n}: GridContainerProps) => {\n const { pinnedColumnLayoutStyles } = usePinnedColumnLayout({ table });\n\n return (\n <Container ref={containerRef} borderMode={borderMode} style={containerStyles}>\n <table\n ref={tableRef}\n className={gridContainerClassname}\n role={ariaRoles.table}\n style={\n {\n tableLayout: enableResizeableColumns ? 'fixed' : 'auto',\n '--density': theme.sizes[density],\n ...pinnedColumnLayoutStyles,\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","React","Container","theme"],"mappings":";;;;;;;;;;;;;;;;;;;;;~~AA8DA~~,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,YAAY,EAAE,SAAS,GACJ,KAAI;IACvB,MAAM,EAAE,wBAAwB,EAAE,GAAGC,2CAAqB,CAAC,EAAE,KAAK,EAAE,CAAC;AAErE,IAAA,QACEC,sBAAA,CAAA,aAAA,CAACC,mBAAS,EAAA,EAAC,GAAG,EAAE,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,KAAK,EAAE,eAAe,EAAA;~~AAC1E~~,~~QAAAD~~,~~sBAAA,~~CAAA,aAAA,CAAA,OAAA,EAAA,~~EACE~~,GAAG,EAAE,QAAQ,EACb,SAAS,~~EAAE~~,sBAAsB,~~EACjC~~,IAAI,EAAE,SAAS,CAAC,KAAK,EACrB,KAAK,EACH;gBACE,WAAW,EAAE,uBAAuB,GAAG,OAAO,GAAG,MAAM;AACvD,gBAAA,WAAW,~~EAAEE~~,WAAK,CAAC,KAAK,CAAC,OAAO,CAAC;AACjC,gBAAA,GAAG,wBAAwB;AACX,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 { 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\n return (\n <Container ref={containerRef} borderMode={borderMode} style={containerStyles}>\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 } 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","React","Container","theme"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA+DA,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;AAErE,IAAA,QACEC,sBAAA,CAAA,aAAA,CAACC,mBAAS,EAAA,EAAC,GAAG,EAAE,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,KAAK,EAAE,eAAe,EAAA;QAC1ED,sBACE,CAAA,aAAA,CAAA,OAAA,EAAA,EAAA,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,QAAQ,EACb,SAAS,EAAEH,+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,EAAEK,WAAK,CAAC,KAAK,CAAC,OAAO,CAAC;AACjC,gBAAA,GAAG,wBAAwB;AACX,aAAA,EAAA,eAAA,EAEL,KAAK,CAAC,cAAc,EAAE,CAAC,MAAM,mBAC7B,KAAK,CAAC,WAAW,EAAE,gBACtB,SAAS,EAAA,EAEpB,QAAQ,CACH,CACE;AAEhB;;;;"}

package/dist/components/DataGrid/components/GridContainer/GridContainer.d.ts CHANGED Viewed

@@ -3,7 +3,7 @@ import { Table } from '@tanstack/react-table';
 import { SizeScale } from 'Theme/modules/sizes';
 import { BorderMode } from '../../types/enums';
 import { AriaRoles } from '../../types';
-type GridContainerProps = Pick<AriaAttributes, 'aria-label'> & {
+type GridContainerProps = Pick<AriaAttributes, 'aria-label'> & Pick<React.HTMLAttributes<HTMLTableElement>, 'id' | 'className'> & {
     /**
      * Reference to be used for the outer container element.
      */
@@ -45,5 +45,5 @@ type GridContainerProps = Pick<AriaAttributes, 'aria-label'> & {
  * The Grid container, which includes a wrapper and the table element itself. Controls table layout, applies
  * styling and sets table-specific CSS variables (such as density).
  */
-export declare const GridContainer: ({ containerRef, tableRef, borderMode, containerStyles, ariaRoles, enableResizeableColumns, density, table, children, "aria-label": ariaLabel, }: GridContainerProps) => React.JSX.Element;
+export declare const GridContainer: ({ containerRef, tableRef, borderMode, containerStyles, ariaRoles, enableResizeableColumns, density, table, children, id, className, "aria-label": ariaLabel, }: GridContainerProps) => React.JSX.Element;
 export {};

package/dist/components/DataGrid/components/GridContainer/GridContainer.js CHANGED Viewed

@@ -18,10 +18,10 @@ const gridContainerClassname = buildClassnames([styles.dataGridStyle, 'data-grid
  * The Grid container, which includes a wrapper and the table element itself. Controls table layout, applies
  * styling and sets table-specific CSS variables (such as density).
  */
-const GridContainer = ({ containerRef, tableRef, borderMode, containerStyles, ariaRoles, enableResizeableColumns, density, table, children, 'aria-label': ariaLabel, }) => {
+const GridContainer = ({ containerRef, tableRef, borderMode, containerStyles, ariaRoles, enableResizeableColumns, density, table, children, id, className, 'aria-label': ariaLabel, }) => {
     const { pinnedColumnLayoutStyles } = usePinnedColumnLayout({ table });
     return (React__default.createElement(Container, { ref: containerRef, borderMode: borderMode, style: containerStyles },
-        React__default.createElement("table", { ref: tableRef, className: gridContainerClassname, role: ariaRoles.table, style: {
+        React__default.createElement("table", { id: id, ref: tableRef, className: buildClassnames([gridContainerClassname, className]), role: ariaRoles.table, style: {
                 tableLayout: enableResizeableColumns ? 'fixed' : 'auto',
                 '--density': theme.sizes[density],
                 ...pinnedColumnLayoutStyles,

package/dist/components/DataGrid/components/GridContainer/GridContainer.js.map CHANGED Viewed

	@@ -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 { 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 /*\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 'aria-label': ariaLabel,\n}: GridContainerProps) => {\n const { pinnedColumnLayoutStyles } = usePinnedColumnLayout({ table });\n\n return (\n <Container ref={containerRef} borderMode={borderMode} style={containerStyles}>\n <table\n ref={tableRef}\n className={gridContainerClassname}\n role={ariaRoles.table}\n style={\n {\n tableLayout: enableResizeableColumns ? 'fixed' : 'auto',\n '--density': theme.sizes[density],\n ...pinnedColumnLayoutStyles,\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":";;;;;;;;;;;;;;;~~AA8DA~~,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,YAAY,EAAE,SAAS,GACJ,KAAI;IACvB,MAAM,EAAE,wBAAwB,EAAE,GAAG,qBAAqB,CAAC,EAAE,KAAK,EAAE,CAAC;AAErE,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EAAC,GAAG,EAAE,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,KAAK,EAAE,eAAe,EAAA;~~AAC1E~~,~~QAAAA~~,~~cAAA,~~CAAA,aAAA,CAAA,OAAA,EAAA,~~EACE~~,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,sBAAsB,~~EACjC~~,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;AACX,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 { 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\n return (\n <Container ref={containerRef} borderMode={borderMode} style={containerStyles}>\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 } 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":";;;;;;;;;;;;;;;AA+DA,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;AAErE,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EAAC,GAAG,EAAE,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,KAAK,EAAE,eAAe,EAAA;QAC1EA,cACE,CAAA,aAAA,CAAA,OAAA,EAAA,EAAA,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;AACX,aAAA,EAAA,eAAA,EAEL,KAAK,CAAC,cAAc,EAAE,CAAC,MAAM,mBAC7B,KAAK,CAAC,WAAW,EAAE,gBACtB,SAAS,EAAA,EAEpB,QAAQ,CACH,CACE;AAEhB;;;;"}

package/dist/components/DataGrid/types/DataGridProps.d.ts CHANGED Viewed

@@ -8,7 +8,7 @@ import { RowGroupingConfiguration } from './RowGroupingConfiguration';
 import { ColumnWidths } from './ColumnWidths';
 import { EmptyState } from './EmptyState';
 import { RowThemeMap } from './RowTheme';
-export type DataGridProps = Pick<AriaAttributes, 'aria-label'> & {
+export type DataGridProps = Pick<AriaAttributes, 'aria-label'> & Pick<React.HTMLAttributes<HTMLTableElement>, 'className' | 'id'> & {
     /** General config */
     /**
      * Density, controls the spacing between rows in the table.

package/dist/components/Flex/FlexCol/FlexCol.cjs CHANGED Viewed

@@ -2,6 +2,7 @@
 var React = require('react');
 var buildClassnames = require('../../../utils/buildClassnames.cjs');
+require('uid/secure');
 var FlexCol_module = require('./FlexCol.module.scss.cjs');
 var Flex_module = require('../Flex.module.scss.cjs');
@@ -14,8 +15,9 @@ const FLEX_COL_DEFAULT_PROPS = {
     justifyContent: 'flex-start',
     gap: 'sm',
     flexWrap: 'wrap',
+    flexGrow: 0,
 };
-const FlexCol = ({ alignItems = FLEX_COL_DEFAULT_PROPS.alignItems, justifyContent = FLEX_COL_DEFAULT_PROPS.justifyContent, gap = FLEX_COL_DEFAULT_PROPS.gap, flexWrap = FLEX_COL_DEFAULT_PROPS.flexWrap, className, style, children, ...rest }) => {
+const FlexCol = React__default.default.forwardRef(({ alignItems = FLEX_COL_DEFAULT_PROPS.alignItems, justifyContent = FLEX_COL_DEFAULT_PROPS.justifyContent, gap = FLEX_COL_DEFAULT_PROPS.gap, flexWrap = FLEX_COL_DEFAULT_PROPS.flexWrap, flexGrow = FLEX_COL_DEFAULT_PROPS.flexGrow, className, style, children, ...rest }, ref) => {
     const cssClasses = [
         FlexCol_module.flexCol,
         Flex_module[`alignItems-${alignItems}`],
@@ -24,8 +26,8 @@ const FlexCol = ({ alignItems = FLEX_COL_DEFAULT_PROPS.alignItems, justifyConten
         Flex_module[`flexWrap-${flexWrap}`],
         className,
     ];
-    return (React__default.default.createElement("div", { className: buildClassnames.buildClassnames(cssClasses), style: style, ...rest }, children));
-};
+    return (React__default.default.createElement("div", { className: buildClassnames.buildClassnames(cssClasses), style: { flexGrow, ...style }, ref: ref, ...rest }, children));
+});
 exports.FLEX_COL_DEFAULT_PROPS = FLEX_COL_DEFAULT_PROPS;
 exports.FlexCol = FlexCol;

package/dist/components/Flex/FlexCol/FlexCol.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FlexCol.cjs","sources":["../../../../src/components/Flex/FlexCol/FlexCol.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../../utils~~/buildClassnames~~';\nimport { FlexDefaultProps, FlexProps } from '../types';\nimport flexColStyles from './FlexCol.module.scss';\nimport flexStyles from '../Flex.module.scss';\n\nexport const FLEX_COL_DEFAULT_PROPS: FlexDefaultProps = {\n alignItems: 'stretch',\n justifyContent: 'flex-start',\n gap: 'sm',\n flexWrap: 'wrap',\n};\n\nexport const FlexCol: React.FC<FlexProps> = ({\n alignItems = FLEX_COL_DEFAULT_PROPS.alignItems,\n justifyContent = FLEX_COL_DEFAULT_PROPS.justifyContent,\n gap = FLEX_COL_DEFAULT_PROPS.gap,\n flexWrap = FLEX_COL_DEFAULT_PROPS.flexWrap,\n className,\n style,\n children,\n ...rest\n}) => {\n const cssClasses = [\n flexColStyles.flexCol,\n flexStyles[`alignItems-${alignItems}`],\n flexStyles[`justifyContent-${justifyContent}`],\n flexStyles[`gap-${gap}`],\n flexStyles[`flexWrap-${flexWrap}`],\n className,\n ];\n\n return (\n <div className={buildClassnames(cssClasses)} style={style} {...rest}>\n {children}\n </div>\n );\n};\n"],"names":["~~flexColStyles~~","~~flexStyles~~","~~React~~","buildClassnames"],"mappings":"~~;;;;;;;;;;;~~AAMa,MAAA,sBAAsB,GAAqB;AACtD,IAAA,UAAU,EAAE,SAAS;AACrB,IAAA,cAAc,EAAE,YAAY;AAC5B,IAAA,GAAG,EAAE,IAAI;AACT,IAAA,QAAQ,EAAE,MAAM;;~~AAGL~~,MAAA,OAAO,~~GAAwB~~,CAAC,~~EAC3C~~,UAAU,GAAG,sBAAsB,CAAC,UAAU,EAC9C,cAAc,GAAG,sBAAsB,CAAC,cAAc,EACtD,GAAG,GAAG,sBAAsB,CAAC,GAAG,EAChC,QAAQ,GAAG,sBAAsB,CAAC,QAAQ,EAC1C,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,IAAI,EACR,~~KAAI~~;~~AACH~~,IAAA,MAAM,UAAU,GAAG;AACjB,~~QAAAA~~,cAAa,CAAC,OAAO;AACrB,QAAAC,WAAU,CAAC,CAAA,WAAA,EAAc,UAAU,CAAA,CAAE,CAAC;AACtC,QAAAA,WAAU,CAAC,CAAA,eAAA,EAAkB,cAAc,CAAA,CAAE,CAAC;AAC9C,QAAAA,WAAU,CAAC,CAAA,IAAA,EAAO,GAAG,CAAA,CAAE,CAAC;AACxB,QAAAA,WAAU,CAAC,CAAA,SAAA,EAAY,QAAQ,CAAA,CAAE,CAAC;QAClC,SAAS;KACV;~~AAED~~,~~IAAA~~,~~QACEC~~,~~sBAAK,~~CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,~~EAAEC~~,+BAAe,CAAC,UAAU,CAAC,~~EAAE~~,KAAK,EAAE,KAAK,~~EAAM~~,GAAA,IAAI,~~IAChE~~,QAAQ,CACL;AAEV;;;;;"}
1	+ {"version":3,"file":"FlexCol.cjs","sources":["../../../../src/components/Flex/FlexCol/FlexCol.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../../utils';\nimport { FlexDefaultProps, FlexProps } from '../types';\nimport flexColStyles from './FlexCol.module.scss';\nimport flexStyles from '../Flex.module.scss';\n\nexport const FLEX_COL_DEFAULT_PROPS: FlexDefaultProps = {\n alignItems: 'stretch',\n justifyContent: 'flex-start',\n gap: 'sm',\n flexWrap: 'wrap',\n flexGrow: 0,\n};\n\nexport const FlexCol = React.forwardRef<HTMLDivElement, FlexProps>(\n (\n {\n alignItems = FLEX_COL_DEFAULT_PROPS.alignItems,\n justifyContent = FLEX_COL_DEFAULT_PROPS.justifyContent,\n gap = FLEX_COL_DEFAULT_PROPS.gap,\n flexWrap = FLEX_COL_DEFAULT_PROPS.flexWrap,\n flexGrow = FLEX_COL_DEFAULT_PROPS.flexGrow,\n className,\n style,\n children,\n ...rest\n },\n ref,\n ) => {\n const cssClasses = [\n flexColStyles.flexCol,\n flexStyles[`alignItems-${alignItems}`],\n flexStyles[`justifyContent-${justifyContent}`],\n flexStyles[`gap-${gap}`],\n flexStyles[`flexWrap-${flexWrap}`],\n className,\n ];\n\n return (\n <div\n className={buildClassnames(cssClasses)}\n style={{ flexGrow, ...style }}\n ref={ref}\n {...rest}\n >\n {children}\n </div>\n );\n },\n);\n"],"names":["React","flexColStyles","flexStyles","buildClassnames"],"mappings":";;;;;;;;;;;;AAMa,MAAA,sBAAsB,GAAqB;AACtD,IAAA,UAAU,EAAE,SAAS;AACrB,IAAA,cAAc,EAAE,YAAY;AAC5B,IAAA,GAAG,EAAE,IAAI;AACT,IAAA,QAAQ,EAAE,MAAM;AAChB,IAAA,QAAQ,EAAE,CAAC;;AAGA,MAAA,OAAO,GAAGA,sBAAK,CAAC,UAAU,CACrC,CACE,EACE,UAAU,GAAG,sBAAsB,CAAC,UAAU,EAC9C,cAAc,GAAG,sBAAsB,CAAC,cAAc,EACtD,GAAG,GAAG,sBAAsB,CAAC,GAAG,EAChC,QAAQ,GAAG,sBAAsB,CAAC,QAAQ,EAC1C,QAAQ,GAAG,sBAAsB,CAAC,QAAQ,EAC1C,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,IAAI,EACR,EACD,GAAG,KACD;AACF,IAAA,MAAM,UAAU,GAAG;AACjB,QAAAC,cAAa,CAAC,OAAO;AACrB,QAAAC,WAAU,CAAC,CAAA,WAAA,EAAc,UAAU,CAAA,CAAE,CAAC;AACtC,QAAAA,WAAU,CAAC,CAAA,eAAA,EAAkB,cAAc,CAAA,CAAE,CAAC;AAC9C,QAAAA,WAAU,CAAC,CAAA,IAAA,EAAO,GAAG,CAAA,CAAE,CAAC;AACxB,QAAAA,WAAU,CAAC,CAAA,SAAA,EAAY,QAAQ,CAAA,CAAE,CAAC;QAClC,SAAS;KACV;IAED,QACEF,sBACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEG,+BAAe,CAAC,UAAU,CAAC,EACtC,KAAK,EAAE,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAC7B,GAAG,EAAE,GAAG,EACJ,GAAA,IAAI,EAEP,EAAA,QAAQ,CACL;AAEV,CAAC;;;;;"}

package/dist/components/Flex/FlexCol/FlexCol.d.ts CHANGED Viewed

@@ -1,4 +1,10 @@
 import React from 'react';
-import { FlexDefaultProps, FlexProps } from '../types';
+import { FlexDefaultProps } from '../types';
 export declare const FLEX_COL_DEFAULT_PROPS: FlexDefaultProps;
-export declare const FlexCol: React.FC<FlexProps>;
+export declare const FlexCol: React.ForwardRefExoticComponent<{
+    alignItems?: import("csstype").Property.AlignItems | undefined;
+    justifyContent?: import("csstype").Property.JustifyContent | undefined;
+    gap?: keyof import("../../../theme/modules/sizes").SizeScale | undefined;
+    flexWrap?: import("csstype").Property.FlexWrap | undefined;
+    flexGrow?: import("csstype").Property.FlexGrow | undefined;
+} & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Flex/FlexCol/FlexCol.js CHANGED Viewed

@@ -1,5 +1,6 @@
 import React__default from 'react';
 import { buildClassnames } from '../../../utils/buildClassnames.js';
+import 'uid/secure';
 import flexColStyles from './FlexCol.module.scss.js';
 import flexStyles from '../Flex.module.scss.js';
@@ -8,8 +9,9 @@ const FLEX_COL_DEFAULT_PROPS = {
     justifyContent: 'flex-start',
     gap: 'sm',
     flexWrap: 'wrap',
+    flexGrow: 0,
 };
-const FlexCol = ({ alignItems = FLEX_COL_DEFAULT_PROPS.alignItems, justifyContent = FLEX_COL_DEFAULT_PROPS.justifyContent, gap = FLEX_COL_DEFAULT_PROPS.gap, flexWrap = FLEX_COL_DEFAULT_PROPS.flexWrap, className, style, children, ...rest }) => {
+const FlexCol = React__default.forwardRef(({ alignItems = FLEX_COL_DEFAULT_PROPS.alignItems, justifyContent = FLEX_COL_DEFAULT_PROPS.justifyContent, gap = FLEX_COL_DEFAULT_PROPS.gap, flexWrap = FLEX_COL_DEFAULT_PROPS.flexWrap, flexGrow = FLEX_COL_DEFAULT_PROPS.flexGrow, className, style, children, ...rest }, ref) => {
     const cssClasses = [
         flexColStyles.flexCol,
         flexStyles[`alignItems-${alignItems}`],
@@ -18,8 +20,8 @@ const FlexCol = ({ alignItems = FLEX_COL_DEFAULT_PROPS.alignItems, justifyConten
         flexStyles[`flexWrap-${flexWrap}`],
         className,
     ];
-    return (React__default.createElement("div", { className: buildClassnames(cssClasses), style: style, ...rest }, children));
-};
+    return (React__default.createElement("div", { className: buildClassnames(cssClasses), style: { flexGrow, ...style }, ref: ref, ...rest }, children));
+});
 export { FLEX_COL_DEFAULT_PROPS, FlexCol };
 //# sourceMappingURL=FlexCol.js.map

package/dist/components/Flex/FlexCol/FlexCol.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FlexCol.js","sources":["../../../../src/components/Flex/FlexCol/FlexCol.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../../utils~~/buildClassnames~~';\nimport { FlexDefaultProps, FlexProps } from '../types';\nimport flexColStyles from './FlexCol.module.scss';\nimport flexStyles from '../Flex.module.scss';\n\nexport const FLEX_COL_DEFAULT_PROPS: FlexDefaultProps = {\n alignItems: 'stretch',\n justifyContent: 'flex-start',\n gap: 'sm',\n flexWrap: 'wrap',\n};\n\nexport const FlexCol: React.FC<FlexProps> = ({\n alignItems = FLEX_COL_DEFAULT_PROPS.alignItems,\n justifyContent = FLEX_COL_DEFAULT_PROPS.justifyContent,\n gap = FLEX_COL_DEFAULT_PROPS.gap,\n flexWrap = FLEX_COL_DEFAULT_PROPS.flexWrap,\n className,\n style,\n children,\n ...rest\n}) => {\n const cssClasses = [\n flexColStyles.flexCol,\n flexStyles[`alignItems-${alignItems}`],\n flexStyles[`justifyContent-${justifyContent}`],\n flexStyles[`gap-${gap}`],\n flexStyles[`flexWrap-${flexWrap}`],\n className,\n ];\n\n return (\n <div className={buildClassnames(cssClasses)} style={style} {...rest}>\n {children}\n </div>\n );\n};\n"],"names":["React"],"mappings":"~~;;;;;~~AAMa,MAAA,sBAAsB,GAAqB;AACtD,IAAA,UAAU,EAAE,SAAS;AACrB,IAAA,cAAc,EAAE,YAAY;AAC5B,IAAA,GAAG,EAAE,IAAI;AACT,IAAA,QAAQ,EAAE,MAAM;;~~AAGL~~,MAAA,OAAO,~~GAAwB~~,CAAC,~~EAC3C~~,UAAU,GAAG,sBAAsB,CAAC,UAAU,EAC9C,cAAc,GAAG,sBAAsB,CAAC,cAAc,EACtD,GAAG,GAAG,sBAAsB,CAAC,GAAG,EAChC,QAAQ,GAAG,sBAAsB,CAAC,QAAQ,EAC1C,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,IAAI,EACR,~~KAAI~~;~~AACH~~,IAAA,MAAM,UAAU,GAAG;AACjB,QAAA,aAAa,CAAC,OAAO;AACrB,QAAA,UAAU,CAAC,CAAA,WAAA,EAAc,UAAU,CAAA,CAAE,CAAC;AACtC,QAAA,UAAU,CAAC,CAAA,eAAA,EAAkB,cAAc,CAAA,CAAE,CAAC;AAC9C,QAAA,UAAU,CAAC,CAAA,IAAA,EAAO,GAAG,CAAA,CAAE,CAAC;AACxB,QAAA,UAAU,CAAC,CAAA,SAAA,EAAY,QAAQ,CAAA,CAAE,CAAC;QAClC,SAAS;KACV;~~AAED~~,~~IAAA,~~QACEA,~~cAAK~~,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,eAAe,CAAC,UAAU,CAAC,~~EAAE~~,KAAK,EAAE,KAAK,~~EAAM~~,GAAA,IAAI,~~IAChE~~,QAAQ,CACL;AAEV;;;;"}
1	+ {"version":3,"file":"FlexCol.js","sources":["../../../../src/components/Flex/FlexCol/FlexCol.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../../utils';\nimport { FlexDefaultProps, FlexProps } from '../types';\nimport flexColStyles from './FlexCol.module.scss';\nimport flexStyles from '../Flex.module.scss';\n\nexport const FLEX_COL_DEFAULT_PROPS: FlexDefaultProps = {\n alignItems: 'stretch',\n justifyContent: 'flex-start',\n gap: 'sm',\n flexWrap: 'wrap',\n flexGrow: 0,\n};\n\nexport const FlexCol = React.forwardRef<HTMLDivElement, FlexProps>(\n (\n {\n alignItems = FLEX_COL_DEFAULT_PROPS.alignItems,\n justifyContent = FLEX_COL_DEFAULT_PROPS.justifyContent,\n gap = FLEX_COL_DEFAULT_PROPS.gap,\n flexWrap = FLEX_COL_DEFAULT_PROPS.flexWrap,\n flexGrow = FLEX_COL_DEFAULT_PROPS.flexGrow,\n className,\n style,\n children,\n ...rest\n },\n ref,\n ) => {\n const cssClasses = [\n flexColStyles.flexCol,\n flexStyles[`alignItems-${alignItems}`],\n flexStyles[`justifyContent-${justifyContent}`],\n flexStyles[`gap-${gap}`],\n flexStyles[`flexWrap-${flexWrap}`],\n className,\n ];\n\n return (\n <div\n className={buildClassnames(cssClasses)}\n style={{ flexGrow, ...style }}\n ref={ref}\n {...rest}\n >\n {children}\n </div>\n );\n },\n);\n"],"names":["React"],"mappings":";;;;;;AAMa,MAAA,sBAAsB,GAAqB;AACtD,IAAA,UAAU,EAAE,SAAS;AACrB,IAAA,cAAc,EAAE,YAAY;AAC5B,IAAA,GAAG,EAAE,IAAI;AACT,IAAA,QAAQ,EAAE,MAAM;AAChB,IAAA,QAAQ,EAAE,CAAC;;AAGA,MAAA,OAAO,GAAGA,cAAK,CAAC,UAAU,CACrC,CACE,EACE,UAAU,GAAG,sBAAsB,CAAC,UAAU,EAC9C,cAAc,GAAG,sBAAsB,CAAC,cAAc,EACtD,GAAG,GAAG,sBAAsB,CAAC,GAAG,EAChC,QAAQ,GAAG,sBAAsB,CAAC,QAAQ,EAC1C,QAAQ,GAAG,sBAAsB,CAAC,QAAQ,EAC1C,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,IAAI,EACR,EACD,GAAG,KACD;AACF,IAAA,MAAM,UAAU,GAAG;AACjB,QAAA,aAAa,CAAC,OAAO;AACrB,QAAA,UAAU,CAAC,CAAA,WAAA,EAAc,UAAU,CAAA,CAAE,CAAC;AACtC,QAAA,UAAU,CAAC,CAAA,eAAA,EAAkB,cAAc,CAAA,CAAE,CAAC;AAC9C,QAAA,UAAU,CAAC,CAAA,IAAA,EAAO,GAAG,CAAA,CAAE,CAAC;AACxB,QAAA,UAAU,CAAC,CAAA,SAAA,EAAY,QAAQ,CAAA,CAAE,CAAC;QAClC,SAAS;KACV;IAED,QACEA,cACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,eAAe,CAAC,UAAU,CAAC,EACtC,KAAK,EAAE,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAC7B,GAAG,EAAE,GAAG,EACJ,GAAA,IAAI,EAEP,EAAA,QAAQ,CACL;AAEV,CAAC;;;;"}

package/dist/components/Flex/FlexRow/FlexRow.cjs CHANGED Viewed

@@ -15,8 +15,9 @@ const FLEX_ROW_DEFAULT_PROPS = {
     justifyContent: 'flex-start',
     gap: 'sm',
     flexWrap: 'wrap',
+    flexGrow: 0,
 };
-const FlexRow = React__default.default.forwardRef(({ alignItems = FLEX_ROW_DEFAULT_PROPS.alignItems, justifyContent = FLEX_ROW_DEFAULT_PROPS.justifyContent, gap = FLEX_ROW_DEFAULT_PROPS.gap, flexWrap = FLEX_ROW_DEFAULT_PROPS.flexWrap, className, style, children, ...rest }, ref) => {
+const FlexRow = React__default.default.forwardRef(({ alignItems = FLEX_ROW_DEFAULT_PROPS.alignItems, justifyContent = FLEX_ROW_DEFAULT_PROPS.justifyContent, gap = FLEX_ROW_DEFAULT_PROPS.gap, flexWrap = FLEX_ROW_DEFAULT_PROPS.flexWrap, flexGrow = FLEX_ROW_DEFAULT_PROPS.flexGrow, className, style, children, ...rest }, ref) => {
     const cssClasses = [
         FlexRow_module.flexRow,
         Flex_module[`alignItems-${alignItems}`],
@@ -25,7 +26,7 @@ const FlexRow = React__default.default.forwardRef(({ alignItems = FLEX_ROW_DEFAU
         Flex_module[`flexWrap-${flexWrap}`],
         className,
     ];
-    return (React__default.default.createElement("div", { className: buildClassnames.buildClassnames(cssClasses), style: style, ref: ref, ...rest }, children));
+    return (React__default.default.createElement("div", { className: buildClassnames.buildClassnames(cssClasses), style: { flexGrow, ...style }, ref: ref, ...rest }, children));
 });
 exports.FLEX_ROW_DEFAULT_PROPS = FLEX_ROW_DEFAULT_PROPS;

package/dist/components/Flex/FlexRow/FlexRow.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FlexRow.cjs","sources":["../../../../src/components/Flex/FlexRow/FlexRow.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../../utils';\nimport { FlexDefaultProps, FlexProps } from '../types';\nimport flexRowStyles from './FlexRow.module.scss';\nimport flexStyles from '../Flex.module.scss';\n\nexport const FLEX_ROW_DEFAULT_PROPS: FlexDefaultProps = {\n alignItems: 'center',\n justifyContent: 'flex-start',\n gap: 'sm',\n flexWrap: 'wrap',\n};\n\nexport const FlexRow = React.forwardRef<HTMLDivElement, FlexProps>(\n (\n {\n alignItems = FLEX_ROW_DEFAULT_PROPS.alignItems,\n justifyContent = FLEX_ROW_DEFAULT_PROPS.justifyContent,\n gap = FLEX_ROW_DEFAULT_PROPS.gap,\n flexWrap = FLEX_ROW_DEFAULT_PROPS.flexWrap,\n className,\n style,\n children,\n ...rest\n },\n ref,\n ) => {\n const cssClasses = [\n flexRowStyles.flexRow,\n flexStyles[`alignItems-${alignItems}`],\n flexStyles[`justifyContent-${justifyContent}`],\n flexStyles[`gap-${gap}`],\n flexStyles[`flexWrap-${flexWrap}`],\n className,\n ];\n\n return (\n <div className={buildClassnames(cssClasses)} style={style} ref={ref} {...rest}>\n {children}\n </div>\n );\n },\n);\n"],"names":["React","flexRowStyles","flexStyles","buildClassnames"],"mappings":";;;;;;;;;;;;AAMa,MAAA,sBAAsB,GAAqB;AACtD,IAAA,UAAU,EAAE,QAAQ;AACpB,IAAA,cAAc,EAAE,YAAY;AAC5B,IAAA,GAAG,EAAE,IAAI;AACT,IAAA,QAAQ,EAAE,MAAM;;~~MAGL~~,OAAO,GAAGA,sBAAK,CAAC,UAAU,CACrC,CACE,EACE,UAAU,GAAG,sBAAsB,CAAC,UAAU,EAC9C,cAAc,GAAG,sBAAsB,CAAC,cAAc,EACtD,GAAG,GAAG,sBAAsB,CAAC,GAAG,EAChC,QAAQ,GAAG,sBAAsB,CAAC,QAAQ,EAC1C,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,IAAI,EACR,EACD,GAAG,KACD;AACF,IAAA,MAAM,UAAU,GAAG;AACjB,QAAAC,cAAa,CAAC,OAAO;AACrB,QAAAC,WAAU,CAAC,CAAA,WAAA,EAAc,UAAU,CAAA,CAAE,CAAC;AACtC,QAAAA,WAAU,CAAC,CAAA,eAAA,EAAkB,cAAc,CAAA,CAAE,CAAC;AAC9C,QAAAA,WAAU,CAAC,CAAA,IAAA,EAAO,GAAG,CAAA,CAAE,CAAC;AACxB,QAAAA,WAAU,CAAC,CAAA,SAAA,EAAY,QAAQ,CAAA,CAAE,CAAC;QAClC,SAAS;KACV;IAED,QACEF,~~8CAAK~~,SAAS,EAAEG,+BAAe,CAAC,UAAU,CAAC,~~EAAE~~,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,~~EAAA~~,~~GAAM~~,IAAI,~~EAC1E~~,EAAA,QAAQ,CACL;AAEV,CAAC;;;;;"}
1	+ {"version":3,"file":"FlexRow.cjs","sources":["../../../../src/components/Flex/FlexRow/FlexRow.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../../utils';\nimport { FlexDefaultProps, FlexProps } from '../types';\nimport flexRowStyles from './FlexRow.module.scss';\nimport flexStyles from '../Flex.module.scss';\n\nexport const FLEX_ROW_DEFAULT_PROPS: FlexDefaultProps = {\n alignItems: 'center',\n justifyContent: 'flex-start',\n gap: 'sm',\n flexWrap: 'wrap',\n flexGrow: 0,\n};\n\nexport const FlexRow = React.forwardRef<HTMLDivElement, FlexProps>(\n (\n {\n alignItems = FLEX_ROW_DEFAULT_PROPS.alignItems,\n justifyContent = FLEX_ROW_DEFAULT_PROPS.justifyContent,\n gap = FLEX_ROW_DEFAULT_PROPS.gap,\n flexWrap = FLEX_ROW_DEFAULT_PROPS.flexWrap,\n flexGrow = FLEX_ROW_DEFAULT_PROPS.flexGrow,\n className,\n style,\n children,\n ...rest\n },\n ref,\n ) => {\n const cssClasses = [\n flexRowStyles.flexRow,\n flexStyles[`alignItems-${alignItems}`],\n flexStyles[`justifyContent-${justifyContent}`],\n flexStyles[`gap-${gap}`],\n flexStyles[`flexWrap-${flexWrap}`],\n className,\n ];\n\n return (\n <div\n className={buildClassnames(cssClasses)}\n style={{ flexGrow, ...style }}\n ref={ref}\n {...rest}\n >\n {children}\n </div>\n );\n },\n);\n"],"names":["React","flexRowStyles","flexStyles","buildClassnames"],"mappings":";;;;;;;;;;;;AAMa,MAAA,sBAAsB,GAAqB;AACtD,IAAA,UAAU,EAAE,QAAQ;AACpB,IAAA,cAAc,EAAE,YAAY;AAC5B,IAAA,GAAG,EAAE,IAAI;AACT,IAAA,QAAQ,EAAE,MAAM;AAChB,IAAA,QAAQ,EAAE,CAAC;;AAGA,MAAA,OAAO,GAAGA,sBAAK,CAAC,UAAU,CACrC,CACE,EACE,UAAU,GAAG,sBAAsB,CAAC,UAAU,EAC9C,cAAc,GAAG,sBAAsB,CAAC,cAAc,EACtD,GAAG,GAAG,sBAAsB,CAAC,GAAG,EAChC,QAAQ,GAAG,sBAAsB,CAAC,QAAQ,EAC1C,QAAQ,GAAG,sBAAsB,CAAC,QAAQ,EAC1C,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,IAAI,EACR,EACD,GAAG,KACD;AACF,IAAA,MAAM,UAAU,GAAG;AACjB,QAAAC,cAAa,CAAC,OAAO;AACrB,QAAAC,WAAU,CAAC,CAAA,WAAA,EAAc,UAAU,CAAA,CAAE,CAAC;AACtC,QAAAA,WAAU,CAAC,CAAA,eAAA,EAAkB,cAAc,CAAA,CAAE,CAAC;AAC9C,QAAAA,WAAU,CAAC,CAAA,IAAA,EAAO,GAAG,CAAA,CAAE,CAAC;AACxB,QAAAA,WAAU,CAAC,CAAA,SAAA,EAAY,QAAQ,CAAA,CAAE,CAAC;QAClC,SAAS;KACV;IAED,QACEF,sBACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEG,+BAAe,CAAC,UAAU,CAAC,EACtC,KAAK,EAAE,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAC7B,GAAG,EAAE,GAAG,EACJ,GAAA,IAAI,EAEP,EAAA,QAAQ,CACL;AAEV,CAAC;;;;;"}

package/dist/components/Flex/FlexRow/FlexRow.d.ts CHANGED Viewed

@@ -6,4 +6,5 @@ export declare const FlexRow: React.ForwardRefExoticComponent<{
     justifyContent?: import("csstype").Property.JustifyContent | undefined;
     gap?: keyof import("../../../theme/modules/sizes").SizeScale | undefined;
     flexWrap?: import("csstype").Property.FlexWrap | undefined;
+    flexGrow?: import("csstype").Property.FlexGrow | undefined;
 } & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Flex/FlexRow/FlexRow.js CHANGED Viewed

@@ -9,8 +9,9 @@ const FLEX_ROW_DEFAULT_PROPS = {
     justifyContent: 'flex-start',
     gap: 'sm',
     flexWrap: 'wrap',
+    flexGrow: 0,
 };
-const FlexRow = React__default.forwardRef(({ alignItems = FLEX_ROW_DEFAULT_PROPS.alignItems, justifyContent = FLEX_ROW_DEFAULT_PROPS.justifyContent, gap = FLEX_ROW_DEFAULT_PROPS.gap, flexWrap = FLEX_ROW_DEFAULT_PROPS.flexWrap, className, style, children, ...rest }, ref) => {
+const FlexRow = React__default.forwardRef(({ alignItems = FLEX_ROW_DEFAULT_PROPS.alignItems, justifyContent = FLEX_ROW_DEFAULT_PROPS.justifyContent, gap = FLEX_ROW_DEFAULT_PROPS.gap, flexWrap = FLEX_ROW_DEFAULT_PROPS.flexWrap, flexGrow = FLEX_ROW_DEFAULT_PROPS.flexGrow, className, style, children, ...rest }, ref) => {
     const cssClasses = [
         flexRowStyles.flexRow,
         flexStyles[`alignItems-${alignItems}`],
@@ -19,7 +20,7 @@ const FlexRow = React__default.forwardRef(({ alignItems = FLEX_ROW_DEFAULT_PROPS
         flexStyles[`flexWrap-${flexWrap}`],
         className,
     ];
-    return (React__default.createElement("div", { className: buildClassnames(cssClasses), style: style, ref: ref, ...rest }, children));
+    return (React__default.createElement("div", { className: buildClassnames(cssClasses), style: { flexGrow, ...style }, ref: ref, ...rest }, children));
 });
 export { FLEX_ROW_DEFAULT_PROPS, FlexRow };

package/dist/components/Flex/FlexRow/FlexRow.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FlexRow.js","sources":["../../../../src/components/Flex/FlexRow/FlexRow.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../../utils';\nimport { FlexDefaultProps, FlexProps } from '../types';\nimport flexRowStyles from './FlexRow.module.scss';\nimport flexStyles from '../Flex.module.scss';\n\nexport const FLEX_ROW_DEFAULT_PROPS: FlexDefaultProps = {\n alignItems: 'center',\n justifyContent: 'flex-start',\n gap: 'sm',\n flexWrap: 'wrap',\n};\n\nexport const FlexRow = React.forwardRef<HTMLDivElement, FlexProps>(\n (\n {\n alignItems = FLEX_ROW_DEFAULT_PROPS.alignItems,\n justifyContent = FLEX_ROW_DEFAULT_PROPS.justifyContent,\n gap = FLEX_ROW_DEFAULT_PROPS.gap,\n flexWrap = FLEX_ROW_DEFAULT_PROPS.flexWrap,\n className,\n style,\n children,\n ...rest\n },\n ref,\n ) => {\n const cssClasses = [\n flexRowStyles.flexRow,\n flexStyles[`alignItems-${alignItems}`],\n flexStyles[`justifyContent-${justifyContent}`],\n flexStyles[`gap-${gap}`],\n flexStyles[`flexWrap-${flexWrap}`],\n className,\n ];\n\n return (\n <div className={buildClassnames(cssClasses)} style={style} ref={ref} {...rest}>\n {children}\n </div>\n );\n },\n);\n"],"names":["React"],"mappings":";;;;;;AAMa,MAAA,sBAAsB,GAAqB;AACtD,IAAA,UAAU,EAAE,QAAQ;AACpB,IAAA,cAAc,EAAE,YAAY;AAC5B,IAAA,GAAG,EAAE,IAAI;AACT,IAAA,QAAQ,EAAE,MAAM;;~~MAGL~~,OAAO,GAAGA,cAAK,CAAC,UAAU,CACrC,CACE,EACE,UAAU,GAAG,sBAAsB,CAAC,UAAU,EAC9C,cAAc,GAAG,sBAAsB,CAAC,cAAc,EACtD,GAAG,GAAG,sBAAsB,CAAC,GAAG,EAChC,QAAQ,GAAG,sBAAsB,CAAC,QAAQ,EAC1C,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,IAAI,EACR,EACD,GAAG,KACD;AACF,IAAA,MAAM,UAAU,GAAG;AACjB,QAAA,aAAa,CAAC,OAAO;AACrB,QAAA,UAAU,CAAC,CAAA,WAAA,EAAc,UAAU,CAAA,CAAE,CAAC;AACtC,QAAA,UAAU,CAAC,CAAA,eAAA,EAAkB,cAAc,CAAA,CAAE,CAAC;AAC9C,QAAA,UAAU,CAAC,CAAA,IAAA,EAAO,GAAG,CAAA,CAAE,CAAC;AACxB,QAAA,UAAU,CAAC,CAAA,SAAA,EAAY,QAAQ,CAAA,CAAE,CAAC;QAClC,SAAS;KACV;IAED,QACEA,~~sCAAK~~,SAAS,EAAE,eAAe,CAAC,UAAU,CAAC,~~EAAE~~,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,~~EAAA~~,~~GAAM~~,IAAI,~~EAC1E~~,EAAA,QAAQ,CACL;AAEV,CAAC;;;;"}
1	+ {"version":3,"file":"FlexRow.js","sources":["../../../../src/components/Flex/FlexRow/FlexRow.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../../utils';\nimport { FlexDefaultProps, FlexProps } from '../types';\nimport flexRowStyles from './FlexRow.module.scss';\nimport flexStyles from '../Flex.module.scss';\n\nexport const FLEX_ROW_DEFAULT_PROPS: FlexDefaultProps = {\n alignItems: 'center',\n justifyContent: 'flex-start',\n gap: 'sm',\n flexWrap: 'wrap',\n flexGrow: 0,\n};\n\nexport const FlexRow = React.forwardRef<HTMLDivElement, FlexProps>(\n (\n {\n alignItems = FLEX_ROW_DEFAULT_PROPS.alignItems,\n justifyContent = FLEX_ROW_DEFAULT_PROPS.justifyContent,\n gap = FLEX_ROW_DEFAULT_PROPS.gap,\n flexWrap = FLEX_ROW_DEFAULT_PROPS.flexWrap,\n flexGrow = FLEX_ROW_DEFAULT_PROPS.flexGrow,\n className,\n style,\n children,\n ...rest\n },\n ref,\n ) => {\n const cssClasses = [\n flexRowStyles.flexRow,\n flexStyles[`alignItems-${alignItems}`],\n flexStyles[`justifyContent-${justifyContent}`],\n flexStyles[`gap-${gap}`],\n flexStyles[`flexWrap-${flexWrap}`],\n className,\n ];\n\n return (\n <div\n className={buildClassnames(cssClasses)}\n style={{ flexGrow, ...style }}\n ref={ref}\n {...rest}\n >\n {children}\n </div>\n );\n },\n);\n"],"names":["React"],"mappings":";;;;;;AAMa,MAAA,sBAAsB,GAAqB;AACtD,IAAA,UAAU,EAAE,QAAQ;AACpB,IAAA,cAAc,EAAE,YAAY;AAC5B,IAAA,GAAG,EAAE,IAAI;AACT,IAAA,QAAQ,EAAE,MAAM;AAChB,IAAA,QAAQ,EAAE,CAAC;;AAGA,MAAA,OAAO,GAAGA,cAAK,CAAC,UAAU,CACrC,CACE,EACE,UAAU,GAAG,sBAAsB,CAAC,UAAU,EAC9C,cAAc,GAAG,sBAAsB,CAAC,cAAc,EACtD,GAAG,GAAG,sBAAsB,CAAC,GAAG,EAChC,QAAQ,GAAG,sBAAsB,CAAC,QAAQ,EAC1C,QAAQ,GAAG,sBAAsB,CAAC,QAAQ,EAC1C,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,IAAI,EACR,EACD,GAAG,KACD;AACF,IAAA,MAAM,UAAU,GAAG;AACjB,QAAA,aAAa,CAAC,OAAO;AACrB,QAAA,UAAU,CAAC,CAAA,WAAA,EAAc,UAAU,CAAA,CAAE,CAAC;AACtC,QAAA,UAAU,CAAC,CAAA,eAAA,EAAkB,cAAc,CAAA,CAAE,CAAC;AAC9C,QAAA,UAAU,CAAC,CAAA,IAAA,EAAO,GAAG,CAAA,CAAE,CAAC;AACxB,QAAA,UAAU,CAAC,CAAA,SAAA,EAAY,QAAQ,CAAA,CAAE,CAAC;QAClC,SAAS;KACV;IAED,QACEA,cACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,eAAe,CAAC,UAAU,CAAC,EACtC,KAAK,EAAE,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAC7B,GAAG,EAAE,GAAG,EACJ,GAAA,IAAI,EAEP,EAAA,QAAQ,CACL;AAEV,CAAC;;;;"}

package/dist/components/Flex/types.d.ts CHANGED Viewed

@@ -5,6 +5,7 @@ export type FlexProps = {
     justifyContent?: CSSProperties['justifyContent'];
     gap?: keyof typeof sizes;
     flexWrap?: CSSProperties['flexWrap'];
+    flexGrow?: CSSProperties['flexGrow'];
 } & HTMLAttributes<HTMLDivElement>;
-export type FlexDefaultProps = Pick<CSSProperties, 'alignItems' | 'justifyContent' | 'gap' | 'flexWrap'>;
+export type FlexDefaultProps = Pick<CSSProperties, 'alignItems' | 'justifyContent' | 'gap' | 'flexWrap' | 'flexGrow'>;
 export {};

package/dist/components/Pagination/styled.d.ts CHANGED Viewed

@@ -4,6 +4,7 @@ export declare const PageLimitContainer: import("styled-components").StyledCompo
     justifyContent?: import("csstype").Property.JustifyContent | undefined;
     gap?: keyof import("../../theme/modules/sizes").SizeScale | undefined;
     flexWrap?: import("csstype").Property.FlexWrap | undefined;
+    flexGrow?: import("csstype").Property.FlexGrow | undefined;
 } & import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
 export declare const PaginationButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").ButtonHTMLAttributes<HTMLButtonElement> & {
     children?: import("react").ReactNode;

package/dist/components/SelectDropdown/ListItem/components/ListItemContent.cjs CHANGED Viewed

@@ -32,11 +32,11 @@ const ListItemContent = ({ label, hint, itemInfoSlot, endInfoSlot, alert, mediaS
         return buildClassnames.buildClassnames([base]);
     }, [endInfoSlot, itemInfoSlot]);
     return (React__default.default.createElement(FlexRow.FlexRow, { flexWrap: "nowrap", justifyContent: "space-between", alignItems: "center", gap: "base" },
-        React__default.default.createElement(FlexRow.FlexRow, { flexWrap: "nowrap", gap: "base", style: { flexGrow: 1 } },
+        React__default.default.createElement(FlexRow.FlexRow, { flexWrap: "nowrap", gap: "base", flexGrow: "1" },
             allowsDragging && React__default.default.createElement(DragIndicatorIcon.ReactComponent, { "data-testid": "drag-icon" }),
             React__default.default.createElement(SelectionType.SelectionType, { selectionMode: selectionMode, isSelected: isSelected, isLink: isLink }),
             mediaSlot,
-            React__default.default.createElement(FlexCol.FlexCol, { gap: "xs", style: { flexGrow: 1 } },
+            React__default.default.createElement(FlexCol.FlexCol, { gap: "xs", flexGrow: "1" },
                 React__default.default.createElement("div", { className: getInfoContainerClassNames, "data-testid": "info-container" },
                     React__default.default.createElement(reactAriaComponents.Text, { slot: "label" },
                         React__default.default.createElement(Text.Text, { variant: "body" }, label)),

package/dist/components/SelectDropdown/ListItem/components/ListItemContent.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ListItemContent.cjs","sources":["../../../../../src/components/SelectDropdown/ListItem/components/ListItemContent.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { Text } from 'react-aria-components';\nimport { buildClassnames } from '../../../../utils';\nimport { FlexCol } from '../../../Flex/FlexCol';\nimport { ArrowRightIcon, DragIndicatorIcon } from '../../../../icons';\nimport { ListItemContentProps } from './types';\nimport { Text as VeeqoText } from '../../../Text';\nimport { MiniAlert } from '../../../Alerts/MiniAlert';\nimport { SelectionType } from './SelectionType';\nimport styles from '../ListItem.module.scss';\nimport { FlexRow } from '../../../Flex/FlexRow';\n\nexport const ListItemContent = ({\n label,\n hint,\n itemInfoSlot,\n endInfoSlot,\n alert,\n mediaSlot,\n allowsDragging = false,\n selectionMode = 'single',\n isLink,\n isSelected = false,\n}: ListItemContentProps) => {\n const getInfoContainerClassNames = useMemo(() => {\n const base = styles.infoContainer;\n\n if (itemInfoSlot && endInfoSlot) {\n return buildClassnames([base, styles.hasItemInfoAndEndInfo]);\n }\n\n if (itemInfoSlot) {\n return buildClassnames([base, styles.hasItemInfoOnly]);\n }\n\n if (endInfoSlot) {\n return buildClassnames([base, styles.hasEndInfoOnly]);\n }\n\n return buildClassnames([base]);\n }, [endInfoSlot, itemInfoSlot]);\n\n return (\n <FlexRow flexWrap=\"nowrap\" justifyContent=\"space-between\" alignItems=\"center\" gap=\"base\">\n <FlexRow flexWrap=\"nowrap\" gap=\"base\" ~~style={{~~ flexGrow: 1 }}>\n {allowsDragging && <DragIndicatorIcon data-testid=\"drag-icon\" />}\n <SelectionType selectionMode={selectionMode} isSelected={isSelected} isLink={isLink} />\n {mediaSlot}\n <FlexCol gap=\"xs\" ~~style={{~~ flexGrow: 1 }}>\n <div className={getInfoContainerClassNames} data-testid=\"info-container\">\n <Text slot=\"label\">\n <VeeqoText variant=\"body\">{label}</VeeqoText>\n </Text>\n {itemInfoSlot}\n {endInfoSlot && (\n <div className={endInfoSlot ? styles.justifyEnd : styles.justifyStart}>\n {endInfoSlot}\n </div>\n )}\n </div>\n\n {hint && (\n <Text slot=\"description\">\n <VeeqoText variant=\"hintText\">{hint}</VeeqoText>\n </Text>\n )}\n {alert && <MiniAlert title={alert.title} variant={alert.variant} />}\n </FlexCol>\n </FlexRow>\n {isLink && <ArrowRightIcon className={styles.linkIcon} data-testid=\"link-icon\" />}\n </FlexRow>\n );\n};\n"],"names":["useMemo","styles","buildClassnames","React","FlexRow","DragIndicatorIcon","SelectionType","FlexCol","Text","VeeqoText","MiniAlert","ArrowRightIcon"],"mappings":";;;;;;;;;;;;;;;;;;;AAYO,MAAM,eAAe,GAAG,CAAC,EAC9B,KAAK,EACL,IAAI,EACJ,YAAY,EACZ,WAAW,EACX,KAAK,EACL,SAAS,EACT,cAAc,GAAG,KAAK,EACtB,aAAa,GAAG,QAAQ,EACxB,MAAM,EACN,UAAU,GAAG,KAAK,GACG,KAAI;AACzB,IAAA,MAAM,0BAA0B,GAAGA,aAAO,CAAC,MAAK;AAC9C,QAAA,MAAM,IAAI,GAAGC,eAAM,CAAC,aAAa;QAEjC,IAAI,YAAY,IAAI,WAAW,EAAE;YAC/B,OAAOC,+BAAe,CAAC,CAAC,IAAI,EAAED,eAAM,CAAC,qBAAqB,CAAC,CAAC;AAC7D;AAED,QAAA,IAAI,YAAY,EAAE;YAChB,OAAOC,+BAAe,CAAC,CAAC,IAAI,EAAED,eAAM,CAAC,eAAe,CAAC,CAAC;AACvD;AAED,QAAA,IAAI,WAAW,EAAE;YACf,OAAOC,+BAAe,CAAC,CAAC,IAAI,EAAED,eAAM,CAAC,cAAc,CAAC,CAAC;AACtD;AAED,QAAA,OAAOC,+BAAe,CAAC,CAAC,IAAI,CAAC,CAAC;AAChC,KAAC,EAAE,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC;AAE/B,IAAA,QACEC,sBAAC,CAAA,aAAA,CAAAC,eAAO,IAAC,QAAQ,EAAC,QAAQ,EAAC,cAAc,EAAC,eAAe,EAAC,UAAU,EAAC,QAAQ,EAAC,GAAG,EAAC,MAAM,EAAA;AACtF,QAAAD,sBAAA,CAAA,aAAA,CAACC,eAAO,EAAC,~~EAAA,~~QAAQ,EAAC,QAAQ,EAAC,GAAG,EAAC,MAAM,EAAC,~~KAAK,EAAE,EAAE,~~QAAQ,~~EAAE~~,~~CAAC~~,~~EAAE,~~EAAA;~~AACzD~~,YAAA,cAAc,IAAID,sBAAA,CAAA,aAAA,CAACE,gCAAiB,EAAA,EAAA,aAAA,EAAa,WAAW,EAAG,CAAA;AAChE,YAAAF,sBAAA,CAAA,aAAA,CAACG,2BAAa,EAAA,EAAC,aAAa,EAAE,aAAa,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,EAAI,CAAA;YACtF,SAAS;~~AACV~~,~~YAAAH~~,~~sBAAA,~~CAAA,aAAA,~~CAACI~~,eAAO,~~EAAA~~,~~EAAC,~~GAAG,EAAC,IAAI,EAAC,~~KAAK,EAAE,EAAE,~~QAAQ,~~EAAE~~,~~CAAC~~,~~EAAE,~~EAAA;~~AACtC~~,gBAAAJ,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,0BAA0B,EAAA,aAAA,EAAc,gBAAgB,EAAA;AACtE,oBAAAA,sBAAA,CAAA,aAAA,CAACK,wBAAI,EAAA,EAAC,IAAI,EAAC,OAAO,EAAA;wBAChBL,sBAAC,CAAA,aAAA,CAAAM,SAAS,IAAC,OAAO,EAAC,MAAM,EAAE,EAAA,KAAK,CAAa,CACxC;oBACN,YAAY;oBACZ,WAAW,KACVN,sBAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,WAAW,GAAGF,eAAM,CAAC,UAAU,GAAGA,eAAM,CAAC,YAAY,EAClE,EAAA,WAAW,CACR,CACP,CACG;AAEL,gBAAA,IAAI,KACHE,sBAAA,CAAA,aAAA,CAACK,wBAAI,EAAC,EAAA,IAAI,EAAC,aAAa,EAAA;oBACtBL,sBAAC,CAAA,aAAA,CAAAM,SAAS,IAAC,OAAO,EAAC,UAAU,EAAE,EAAA,IAAI,CAAa,CAC3C,CACR;AACA,gBAAA,KAAK,IAAIN,sBAAC,CAAA,aAAA,CAAAO,mBAAS,EAAC,EAAA,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,EAAA,CAAI,CAC3D,CACF;AACT,QAAA,MAAM,IAAIP,sBAAA,CAAA,aAAA,CAACQ,6BAAc,EAAA,EAAC,SAAS,EAAEV,eAAM,CAAC,QAAQ,EAAc,aAAA,EAAA,WAAW,EAAG,CAAA,CACzE;AAEd;;;;"}
1	+ {"version":3,"file":"ListItemContent.cjs","sources":["../../../../../src/components/SelectDropdown/ListItem/components/ListItemContent.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { Text } from 'react-aria-components';\nimport { buildClassnames } from '../../../../utils';\nimport { FlexCol } from '../../../Flex/FlexCol';\nimport { ArrowRightIcon, DragIndicatorIcon } from '../../../../icons';\nimport { ListItemContentProps } from './types';\nimport { Text as VeeqoText } from '../../../Text';\nimport { MiniAlert } from '../../../Alerts/MiniAlert';\nimport { SelectionType } from './SelectionType';\nimport styles from '../ListItem.module.scss';\nimport { FlexRow } from '../../../Flex/FlexRow';\n\nexport const ListItemContent = ({\n label,\n hint,\n itemInfoSlot,\n endInfoSlot,\n alert,\n mediaSlot,\n allowsDragging = false,\n selectionMode = 'single',\n isLink,\n isSelected = false,\n}: ListItemContentProps) => {\n const getInfoContainerClassNames = useMemo(() => {\n const base = styles.infoContainer;\n\n if (itemInfoSlot && endInfoSlot) {\n return buildClassnames([base, styles.hasItemInfoAndEndInfo]);\n }\n\n if (itemInfoSlot) {\n return buildClassnames([base, styles.hasItemInfoOnly]);\n }\n\n if (endInfoSlot) {\n return buildClassnames([base, styles.hasEndInfoOnly]);\n }\n\n return buildClassnames([base]);\n }, [endInfoSlot, itemInfoSlot]);\n\n return (\n <FlexRow flexWrap=\"nowrap\" justifyContent=\"space-between\" alignItems=\"center\" gap=\"base\">\n <FlexRow flexWrap=\"nowrap\" gap=\"base\" flexGrow=\"1\">\n {allowsDragging && <DragIndicatorIcon data-testid=\"drag-icon\" />}\n <SelectionType selectionMode={selectionMode} isSelected={isSelected} isLink={isLink} />\n {mediaSlot}\n <FlexCol gap=\"xs\" flexGrow=\"1\">\n <div className={getInfoContainerClassNames} data-testid=\"info-container\">\n <Text slot=\"label\">\n <VeeqoText variant=\"body\">{label}</VeeqoText>\n </Text>\n {itemInfoSlot}\n {endInfoSlot && (\n <div className={endInfoSlot ? styles.justifyEnd : styles.justifyStart}>\n {endInfoSlot}\n </div>\n )}\n </div>\n\n {hint && (\n <Text slot=\"description\">\n <VeeqoText variant=\"hintText\">{hint}</VeeqoText>\n </Text>\n )}\n {alert && <MiniAlert title={alert.title} variant={alert.variant} />}\n </FlexCol>\n </FlexRow>\n {isLink && <ArrowRightIcon className={styles.linkIcon} data-testid=\"link-icon\" />}\n </FlexRow>\n );\n};\n"],"names":["useMemo","styles","buildClassnames","React","FlexRow","DragIndicatorIcon","SelectionType","FlexCol","Text","VeeqoText","MiniAlert","ArrowRightIcon"],"mappings":"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"}

package/dist/components/SelectDropdown/ListItem/components/ListItemContent.js CHANGED Viewed

@@ -26,11 +26,11 @@ const ListItemContent = ({ label, hint, itemInfoSlot, endInfoSlot, alert, mediaS
         return buildClassnames([base]);
     }, [endInfoSlot, itemInfoSlot]);
     return (React__default.createElement(FlexRow, { flexWrap: "nowrap", justifyContent: "space-between", alignItems: "center", gap: "base" },
-        React__default.createElement(FlexRow, { flexWrap: "nowrap", gap: "base", style: { flexGrow: 1 } },
+        React__default.createElement(FlexRow, { flexWrap: "nowrap", gap: "base", flexGrow: "1" },
             allowsDragging && React__default.createElement(DragIndicatorIcon, { "data-testid": "drag-icon" }),
             React__default.createElement(SelectionType, { selectionMode: selectionMode, isSelected: isSelected, isLink: isLink }),
             mediaSlot,
-            React__default.createElement(FlexCol, { gap: "xs", style: { flexGrow: 1 } },
+            React__default.createElement(FlexCol, { gap: "xs", flexGrow: "1" },
                 React__default.createElement("div", { className: getInfoContainerClassNames, "data-testid": "info-container" },
                     React__default.createElement(Text, { slot: "label" },
                         React__default.createElement(Text$1, { variant: "body" }, label)),

package/dist/components/SelectDropdown/ListItem/components/ListItemContent.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ListItemContent.js","sources":["../../../../../src/components/SelectDropdown/ListItem/components/ListItemContent.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { Text } from 'react-aria-components';\nimport { buildClassnames } from '../../../../utils';\nimport { FlexCol } from '../../../Flex/FlexCol';\nimport { ArrowRightIcon, DragIndicatorIcon } from '../../../../icons';\nimport { ListItemContentProps } from './types';\nimport { Text as VeeqoText } from '../../../Text';\nimport { MiniAlert } from '../../../Alerts/MiniAlert';\nimport { SelectionType } from './SelectionType';\nimport styles from '../ListItem.module.scss';\nimport { FlexRow } from '../../../Flex/FlexRow';\n\nexport const ListItemContent = ({\n label,\n hint,\n itemInfoSlot,\n endInfoSlot,\n alert,\n mediaSlot,\n allowsDragging = false,\n selectionMode = 'single',\n isLink,\n isSelected = false,\n}: ListItemContentProps) => {\n const getInfoContainerClassNames = useMemo(() => {\n const base = styles.infoContainer;\n\n if (itemInfoSlot && endInfoSlot) {\n return buildClassnames([base, styles.hasItemInfoAndEndInfo]);\n }\n\n if (itemInfoSlot) {\n return buildClassnames([base, styles.hasItemInfoOnly]);\n }\n\n if (endInfoSlot) {\n return buildClassnames([base, styles.hasEndInfoOnly]);\n }\n\n return buildClassnames([base]);\n }, [endInfoSlot, itemInfoSlot]);\n\n return (\n <FlexRow flexWrap=\"nowrap\" justifyContent=\"space-between\" alignItems=\"center\" gap=\"base\">\n <FlexRow flexWrap=\"nowrap\" gap=\"base\" ~~style={{~~ flexGrow: 1 }}>\n {allowsDragging && <DragIndicatorIcon data-testid=\"drag-icon\" />}\n <SelectionType selectionMode={selectionMode} isSelected={isSelected} isLink={isLink} />\n {mediaSlot}\n <FlexCol gap=\"xs\" ~~style={{~~ flexGrow: 1 }}>\n <div className={getInfoContainerClassNames} data-testid=\"info-container\">\n <Text slot=\"label\">\n <VeeqoText variant=\"body\">{label}</VeeqoText>\n </Text>\n {itemInfoSlot}\n {endInfoSlot && (\n <div className={endInfoSlot ? styles.justifyEnd : styles.justifyStart}>\n {endInfoSlot}\n </div>\n )}\n </div>\n\n {hint && (\n <Text slot=\"description\">\n <VeeqoText variant=\"hintText\">{hint}</VeeqoText>\n </Text>\n )}\n {alert && <MiniAlert title={alert.title} variant={alert.variant} />}\n </FlexCol>\n </FlexRow>\n {isLink && <ArrowRightIcon className={styles.linkIcon} data-testid=\"link-icon\" />}\n </FlexRow>\n );\n};\n"],"names":["React","VeeqoText"],"mappings":";;;;;;;;;;;;;AAYO,MAAM,eAAe,GAAG,CAAC,EAC9B,KAAK,EACL,IAAI,EACJ,YAAY,EACZ,WAAW,EACX,KAAK,EACL,SAAS,EACT,cAAc,GAAG,KAAK,EACtB,aAAa,GAAG,QAAQ,EACxB,MAAM,EACN,UAAU,GAAG,KAAK,GACG,KAAI;AACzB,IAAA,MAAM,0BAA0B,GAAG,OAAO,CAAC,MAAK;AAC9C,QAAA,MAAM,IAAI,GAAG,MAAM,CAAC,aAAa;QAEjC,IAAI,YAAY,IAAI,WAAW,EAAE;YAC/B,OAAO,eAAe,CAAC,CAAC,IAAI,EAAE,MAAM,CAAC,qBAAqB,CAAC,CAAC;AAC7D;AAED,QAAA,IAAI,YAAY,EAAE;YAChB,OAAO,eAAe,CAAC,CAAC,IAAI,EAAE,MAAM,CAAC,eAAe,CAAC,CAAC;AACvD;AAED,QAAA,IAAI,WAAW,EAAE;YACf,OAAO,eAAe,CAAC,CAAC,IAAI,EAAE,MAAM,CAAC,cAAc,CAAC,CAAC;AACtD;AAED,QAAA,OAAO,eAAe,CAAC,CAAC,IAAI,CAAC,CAAC;AAChC,KAAC,EAAE,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC;AAE/B,IAAA,QACEA,cAAC,CAAA,aAAA,CAAA,OAAO,IAAC,QAAQ,EAAC,QAAQ,EAAC,cAAc,EAAC,eAAe,EAAC,UAAU,EAAC,QAAQ,EAAC,GAAG,EAAC,MAAM,EAAA;AACtF,QAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAC,~~EAAA,~~QAAQ,EAAC,QAAQ,EAAC,GAAG,EAAC,MAAM,EAAC,~~KAAK,EAAE,EAAE,~~QAAQ,~~EAAE~~,~~CAAC~~,~~EAAE,~~EAAA;~~AACzD~~,YAAA,cAAc,IAAIA,cAAA,CAAA,aAAA,CAAC,iBAAiB,EAAA,EAAA,aAAA,EAAa,WAAW,EAAG,CAAA;AAChE,YAAAA,cAAA,CAAA,aAAA,CAAC,aAAa,EAAA,EAAC,aAAa,EAAE,aAAa,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,EAAI,CAAA;YACtF,SAAS;~~AACV~~,~~YAAAA~~,~~cAAA,~~CAAA,aAAA,~~CAAC~~,OAAO,~~EAAA~~,~~EAAC,~~GAAG,EAAC,IAAI,EAAC,~~KAAK,EAAE,EAAE,~~QAAQ,~~EAAE~~,~~CAAC~~,~~EAAE,~~EAAA;~~AACtC~~,gBAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,0BAA0B,EAAA,aAAA,EAAc,gBAAgB,EAAA;AACtE,oBAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAC,OAAO,EAAA;wBAChBA,cAAC,CAAA,aAAA,CAAAC,MAAS,IAAC,OAAO,EAAC,MAAM,EAAE,EAAA,KAAK,CAAa,CACxC;oBACN,YAAY;oBACZ,WAAW,KACVD,cAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,WAAW,GAAG,MAAM,CAAC,UAAU,GAAG,MAAM,CAAC,YAAY,EAClE,EAAA,WAAW,CACR,CACP,CACG;AAEL,gBAAA,IAAI,KACHA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAC,EAAA,IAAI,EAAC,aAAa,EAAA;oBACtBA,cAAC,CAAA,aAAA,CAAAC,MAAS,IAAC,OAAO,EAAC,UAAU,EAAE,EAAA,IAAI,CAAa,CAC3C,CACR;AACA,gBAAA,KAAK,IAAID,cAAC,CAAA,aAAA,CAAA,SAAS,EAAC,EAAA,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,EAAA,CAAI,CAC3D,CACF;AACT,QAAA,MAAM,IAAIA,cAAA,CAAA,aAAA,CAAC,cAAc,EAAA,EAAC,SAAS,EAAE,MAAM,CAAC,QAAQ,EAAc,aAAA,EAAA,WAAW,EAAG,CAAA,CACzE;AAEd;;;;"}
1	+ {"version":3,"file":"ListItemContent.js","sources":["../../../../../src/components/SelectDropdown/ListItem/components/ListItemContent.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { Text } from 'react-aria-components';\nimport { buildClassnames } from '../../../../utils';\nimport { FlexCol } from '../../../Flex/FlexCol';\nimport { ArrowRightIcon, DragIndicatorIcon } from '../../../../icons';\nimport { ListItemContentProps } from './types';\nimport { Text as VeeqoText } from '../../../Text';\nimport { MiniAlert } from '../../../Alerts/MiniAlert';\nimport { SelectionType } from './SelectionType';\nimport styles from '../ListItem.module.scss';\nimport { FlexRow } from '../../../Flex/FlexRow';\n\nexport const ListItemContent = ({\n label,\n hint,\n itemInfoSlot,\n endInfoSlot,\n alert,\n mediaSlot,\n allowsDragging = false,\n selectionMode = 'single',\n isLink,\n isSelected = false,\n}: ListItemContentProps) => {\n const getInfoContainerClassNames = useMemo(() => {\n const base = styles.infoContainer;\n\n if (itemInfoSlot && endInfoSlot) {\n return buildClassnames([base, styles.hasItemInfoAndEndInfo]);\n }\n\n if (itemInfoSlot) {\n return buildClassnames([base, styles.hasItemInfoOnly]);\n }\n\n if (endInfoSlot) {\n return buildClassnames([base, styles.hasEndInfoOnly]);\n }\n\n return buildClassnames([base]);\n }, [endInfoSlot, itemInfoSlot]);\n\n return (\n <FlexRow flexWrap=\"nowrap\" justifyContent=\"space-between\" alignItems=\"center\" gap=\"base\">\n <FlexRow flexWrap=\"nowrap\" gap=\"base\" flexGrow=\"1\">\n {allowsDragging && <DragIndicatorIcon data-testid=\"drag-icon\" />}\n <SelectionType selectionMode={selectionMode} isSelected={isSelected} isLink={isLink} />\n {mediaSlot}\n <FlexCol gap=\"xs\" flexGrow=\"1\">\n <div className={getInfoContainerClassNames} data-testid=\"info-container\">\n <Text slot=\"label\">\n <VeeqoText variant=\"body\">{label}</VeeqoText>\n </Text>\n {itemInfoSlot}\n {endInfoSlot && (\n <div className={endInfoSlot ? styles.justifyEnd : styles.justifyStart}>\n {endInfoSlot}\n </div>\n )}\n </div>\n\n {hint && (\n <Text slot=\"description\">\n <VeeqoText variant=\"hintText\">{hint}</VeeqoText>\n </Text>\n )}\n {alert && <MiniAlert title={alert.title} variant={alert.variant} />}\n </FlexCol>\n </FlexRow>\n {isLink && <ArrowRightIcon className={styles.linkIcon} data-testid=\"link-icon\" />}\n </FlexRow>\n );\n};\n"],"names":["React","VeeqoText"],"mappings":";;;;;;;;;;;;;AAYO,MAAM,eAAe,GAAG,CAAC,EAC9B,KAAK,EACL,IAAI,EACJ,YAAY,EACZ,WAAW,EACX,KAAK,EACL,SAAS,EACT,cAAc,GAAG,KAAK,EACtB,aAAa,GAAG,QAAQ,EACxB,MAAM,EACN,UAAU,GAAG,KAAK,GACG,KAAI;AACzB,IAAA,MAAM,0BAA0B,GAAG,OAAO,CAAC,MAAK;AAC9C,QAAA,MAAM,IAAI,GAAG,MAAM,CAAC,aAAa;QAEjC,IAAI,YAAY,IAAI,WAAW,EAAE;YAC/B,OAAO,eAAe,CAAC,CAAC,IAAI,EAAE,MAAM,CAAC,qBAAqB,CAAC,CAAC;AAC7D;AAED,QAAA,IAAI,YAAY,EAAE;YAChB,OAAO,eAAe,CAAC,CAAC,IAAI,EAAE,MAAM,CAAC,eAAe,CAAC,CAAC;AACvD;AAED,QAAA,IAAI,WAAW,EAAE;YACf,OAAO,eAAe,CAAC,CAAC,IAAI,EAAE,MAAM,CAAC,cAAc,CAAC,CAAC;AACtD;AAED,QAAA,OAAO,eAAe,CAAC,CAAC,IAAI,CAAC,CAAC;AAChC,KAAC,EAAE,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC;AAE/B,IAAA,QACEA,cAAC,CAAA,aAAA,CAAA,OAAO,IAAC,QAAQ,EAAC,QAAQ,EAAC,cAAc,EAAC,eAAe,EAAC,UAAU,EAAC,QAAQ,EAAC,GAAG,EAAC,MAAM,EAAA;AACtF,QAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EAAC,QAAQ,EAAC,QAAQ,EAAC,GAAG,EAAC,MAAM,EAAC,QAAQ,EAAC,GAAG,EAAA;AAC/C,YAAA,cAAc,IAAIA,cAAA,CAAA,aAAA,CAAC,iBAAiB,EAAA,EAAA,aAAA,EAAa,WAAW,EAAG,CAAA;AAChE,YAAAA,cAAA,CAAA,aAAA,CAAC,aAAa,EAAA,EAAC,aAAa,EAAE,aAAa,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,EAAI,CAAA;YACtF,SAAS;YACVA,cAAC,CAAA,aAAA,CAAA,OAAO,IAAC,GAAG,EAAC,IAAI,EAAC,QAAQ,EAAC,GAAG,EAAA;AAC5B,gBAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,0BAA0B,EAAA,aAAA,EAAc,gBAAgB,EAAA;AACtE,oBAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAC,OAAO,EAAA;wBAChBA,cAAC,CAAA,aAAA,CAAAC,MAAS,IAAC,OAAO,EAAC,MAAM,EAAE,EAAA,KAAK,CAAa,CACxC;oBACN,YAAY;oBACZ,WAAW,KACVD,cAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,WAAW,GAAG,MAAM,CAAC,UAAU,GAAG,MAAM,CAAC,YAAY,EAClE,EAAA,WAAW,CACR,CACP,CACG;AAEL,gBAAA,IAAI,KACHA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAC,EAAA,IAAI,EAAC,aAAa,EAAA;oBACtBA,cAAC,CAAA,aAAA,CAAAC,MAAS,IAAC,OAAO,EAAC,UAAU,EAAE,EAAA,IAAI,CAAa,CAC3C,CACR;AACA,gBAAA,KAAK,IAAID,cAAC,CAAA,aAAA,CAAA,SAAS,EAAC,EAAA,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,EAAA,CAAI,CAC3D,CACF;AACT,QAAA,MAAM,IAAIA,cAAA,CAAA,aAAA,CAAC,cAAc,EAAA,EAAC,SAAS,EAAE,MAAM,CAAC,QAAQ,EAAc,aAAA,EAAA,WAAW,EAAG,CAAA,CACzE;AAEd;;;;"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@veeqo/ui",
-  "version": "12.1.0",
+  "version": "12.2.0",
   "description": "New optimised component library for Veeqo.",
   "author": "Robert Wealthall",
   "license": "ISC",