@mage-ui/components 1.0.93 → 1.0.95
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.
- package/dist/components/data-display/datatables/DataTableColGroup.mjs +1 -1
- package/dist/components/data-display/datatables/DataTableColGroup.mjs.map +1 -1
- package/dist/components/data-display/datatables/DataTableColumns.mjs +1 -1
- package/dist/components/data-display/datatables/DataTableColumns.mjs.map +1 -1
- package/dist/components/data-display/datatables/DataTableHeader.mjs +1 -1
- package/dist/components/data-display/datatables/DataTableHeader.mjs.map +1 -1
- package/dist/components/data-display/datatables/useDataTable.mjs +1 -1
- package/dist/components/data-display/datatables/useDataTable.mjs.map +1 -1
- package/package.json +3 -3
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as e}from"react/jsx-runtime";const t=(e,t)=>{if(
|
|
1
|
+
import{jsx as e}from"react/jsx-runtime";const t=(e,t)=>{if(t.has(e.id))return`${e.getSize()}px`},n=({columns:n,explicitSizeIds:r})=>n.some(e=>r.has(e.id)||e.columnDef.meta?.classNames?.header!=null)?e(`colgroup`,{children:n.map(n=>e(`col`,{style:{width:t(n,r)}},n.id))}):null;export{n as DataTableColGroup};
|
|
2
2
|
//# sourceMappingURL=DataTableColGroup.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTableColGroup.mjs","names":[],"sources":["../../../../src/components/data-display/datatables/DataTableColGroup.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport type { Column } from '@tanstack/react-table';\n\nimport type { DataTableColumnMeta } from './DataTable';\n\ntype DataTableColGroupProps<Data> = {\n columns: Column<Data, unknown>[];\n explicitSizeIds: Set<string>;\n};\n\nconst getColumnWidth = <Data,>(\n column: Column<Data, unknown>,\n explicitSizeIds: Set<string>,\n) => {\n
|
|
1
|
+
{"version":3,"file":"DataTableColGroup.mjs","names":[],"sources":["../../../../src/components/data-display/datatables/DataTableColGroup.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport type { Column } from '@tanstack/react-table';\n\nimport type { DataTableColumnMeta } from './DataTable';\n\ntype DataTableColGroupProps<Data> = {\n columns: Column<Data, unknown>[];\n explicitSizeIds: Set<string>;\n};\n\nconst getColumnWidth = <Data,>(\n column: Column<Data, unknown>,\n explicitSizeIds: Set<string>,\n) => {\n if (!explicitSizeIds.has(column.id)) return undefined;\n return `${column.getSize()}px`;\n};\n\nexport const DataTableColGroup = <Data,>({\n columns,\n explicitSizeIds,\n}: DataTableColGroupProps<Data>): ReactNode => {\n const hasExplicitSizes = columns.some(\n (col) =>\n explicitSizeIds.has(col.id) ||\n (col.columnDef.meta as DataTableColumnMeta | undefined)?.classNames\n ?.header != null,\n );\n if (!hasExplicitSizes) return null;\n\n return (\n <colgroup>\n {columns.map((column) => (\n <col\n key={column.id}\n style={{ width: getColumnWidth(column, explicitSizeIds) }}\n />\n ))}\n </colgroup>\n );\n};\n"],"mappings":"wCAWA,MAAM,GACJ,EACA,IACG,CACE,KAAgB,IAAI,EAAO,GAAG,CACnC,MAAO,GAAG,EAAO,SAAS,CAAC,KAGhB,GAA4B,CACvC,UACA,qBAEyB,EAAQ,KAC9B,GACC,EAAgB,IAAI,EAAI,GAAG,EAC1B,EAAI,UAAU,MAA0C,YACrD,QAAU,KACjB,CAIC,EAAC,WAAD,CAAA,SACG,EAAQ,IAAK,GACZ,EAAC,MAAD,CAEE,MAAO,CAAE,MAAO,EAAe,EAAQ,EAAgB,CAAE,CACzD,CAFK,EAAO,GAEZ,CACF,CACO,CAAA,CAViB"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{Checkbox as e}from"../../controls/checkbox/Checkbox.mjs";import{columnCheck as t,columnExpand as n,dataTableExpandButton as r}from"@mage-ui/styled-system/recipes";import{jsx as i}from"react/jsx-runtime";const a=n=>({id:`_select`,meta:{classNames:{header:t(),cell:t()}},header:({table:t})=>i(e,{"aria-label":n.selectAllRows,checked:t.getIsAllPageRowsSelected(),indeterminate:t.getIsSomePageRowsSelected()&&!t.getIsAllPageRowsSelected(),onChange:t.getToggleAllPageRowsSelectedHandler()}),cell:({row:t})=>i(e,{"aria-label":n.selectRow(t.index+1),checked:t.getIsSelected(),disabled:!t.getCanSelect(),onChange:t.getToggleSelectedHandler()})}),o=(e,t)=>({id:`_expand`,meta:{classNames:{header:n(),cell:n()}},header:()=>null,cell:({row:n})=>i(`button`,{className:e??r(),type:`button`,onClick:n.getToggleExpandedHandler(),"data-expanded":n.getIsExpanded()||void 0,"aria-expanded":n.getIsExpanded(),"aria-controls":`data-table-expanded-${n.id}`,"aria-label":n.getIsExpanded()?t.collapseRow:t.expandRow,children:i(`svg`,{width:`16`,height:`16`,viewBox:`0 0 16 16`,fill:`currentColor`,"aria-hidden":`true`,focusable:`false`,children:i(`path`,{d:`M6 4l4 4-4 4`,stroke:`currentColor`,strokeWidth:`1.5`,fill:`none`,strokeLinecap:`round`,strokeLinejoin:`round`})})})});export{o as getDataTableExpandColumn,a as getDataTableSelectColumn};
|
|
1
|
+
import{Checkbox as e}from"../../controls/checkbox/Checkbox.mjs";import{columnCheck as t,columnExpand as n,dataTableExpandButton as r}from"@mage-ui/styled-system/recipes";import{jsx as i}from"react/jsx-runtime";const a=n=>({id:`_select`,meta:{classNames:{header:t(),cell:t()}},size:48,header:({table:t})=>i(e,{"aria-label":n.selectAllRows,checked:t.getIsAllPageRowsSelected(),indeterminate:t.getIsSomePageRowsSelected()&&!t.getIsAllPageRowsSelected(),onChange:t.getToggleAllPageRowsSelectedHandler()}),cell:({row:t})=>i(e,{"aria-label":n.selectRow(t.index+1),checked:t.getIsSelected(),disabled:!t.getCanSelect(),onChange:t.getToggleSelectedHandler()})}),o=(e,t)=>({id:`_expand`,meta:{classNames:{header:n(),cell:n()}},size:48,header:()=>null,cell:({row:n})=>i(`button`,{className:e??r(),type:`button`,onClick:n.getToggleExpandedHandler(),"data-expanded":n.getIsExpanded()||void 0,"aria-expanded":n.getIsExpanded(),"aria-controls":`data-table-expanded-${n.id}`,"aria-label":n.getIsExpanded()?t.collapseRow:t.expandRow,children:i(`svg`,{width:`16`,height:`16`,viewBox:`0 0 16 16`,fill:`currentColor`,"aria-hidden":`true`,focusable:`false`,children:i(`path`,{d:`M6 4l4 4-4 4`,stroke:`currentColor`,strokeWidth:`1.5`,fill:`none`,strokeLinecap:`round`,strokeLinejoin:`round`})})})});export{o as getDataTableExpandColumn,a as getDataTableSelectColumn};
|
|
2
2
|
//# sourceMappingURL=DataTableColumns.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTableColumns.mjs","names":[],"sources":["../../../../src/components/data-display/datatables/DataTableColumns.tsx"],"sourcesContent":["import {\n columnCheck,\n columnExpand,\n dataTableExpandButton,\n} from '@mage-ui/styled-system/recipes';\nimport type { ColumnDef } from '@tanstack/react-table';\n\nimport { Checkbox } from '../../controls/checkbox/Checkbox';\nimport type { DataTableLabels } from './useDataTableContext';\n\nexport const getDataTableSelectColumn = <Data,>(\n labels: DataTableLabels,\n): ColumnDef<Data, unknown> => ({\n id: '_select',\n meta: {\n classNames: {\n header: columnCheck(),\n cell: columnCheck(),\n },\n },\n header: ({ table }) => {\n return (\n <Checkbox\n aria-label={labels.selectAllRows}\n checked={table.getIsAllPageRowsSelected()}\n indeterminate={\n table.getIsSomePageRowsSelected() && !table.getIsAllPageRowsSelected()\n }\n onChange={table.getToggleAllPageRowsSelectedHandler()}\n />\n );\n },\n cell: ({ row }) => (\n <Checkbox\n aria-label={labels.selectRow(row.index + 1)}\n checked={row.getIsSelected()}\n disabled={!row.getCanSelect()}\n onChange={row.getToggleSelectedHandler()}\n />\n ),\n});\n\nexport const getDataTableExpandColumn = <Data,>(\n className: string | undefined,\n labels: DataTableLabels,\n): ColumnDef<Data, unknown> => ({\n id: '_expand',\n meta: {\n classNames: {\n header: columnExpand(),\n cell: columnExpand(),\n },\n },\n header: () => null,\n cell: ({ row }) => (\n <button\n className={className ?? dataTableExpandButton()}\n type='button'\n onClick={row.getToggleExpandedHandler()}\n data-expanded={row.getIsExpanded() || undefined}\n aria-expanded={row.getIsExpanded()}\n aria-controls={`data-table-expanded-${row.id}`}\n aria-label={row.getIsExpanded() ? labels.collapseRow : labels.expandRow}\n >\n <svg\n width='16'\n height='16'\n viewBox='0 0 16 16'\n fill='currentColor'\n aria-hidden='true'\n focusable='false'\n >\n <path\n d='M6 4l4 4-4 4'\n stroke='currentColor'\n strokeWidth='1.5'\n fill='none'\n strokeLinecap='round'\n strokeLinejoin='round'\n />\n </svg>\n </button>\n ),\n});\n"],"mappings":"kNAUA,MAAa,EACX,IAC8B,CAC9B,GAAI,UACJ,KAAM,CACJ,WAAY,CACV,OAAQ,GAAa,CACrB,KAAM,GAAa,CACpB,CACF,CACD,QAAS,CAAE,WAEP,EAAC,EAAD,CACE,aAAY,EAAO,cACnB,QAAS,EAAM,0BAA0B,CACzC,cACE,EAAM,2BAA2B,EAAI,CAAC,EAAM,0BAA0B,CAExE,SAAU,EAAM,qCAAqC,CACrD,CAAA,CAGN,MAAO,CAAE,SACP,EAAC,EAAD,CACE,aAAY,EAAO,UAAU,EAAI,MAAQ,EAAE,CAC3C,QAAS,EAAI,eAAe,CAC5B,SAAU,CAAC,EAAI,cAAc,CAC7B,SAAU,EAAI,0BAA0B,CACxC,CAAA,CAEL,EAEY,GACX,EACA,KAC8B,CAC9B,GAAI,UACJ,KAAM,CACJ,WAAY,CACV,OAAQ,GAAc,CACtB,KAAM,GAAc,CACrB,CACF,CACD,WAAc,KACd,MAAO,CAAE,SACP,EAAC,SAAD,CACE,UAAW,GAAa,GAAuB,CAC/C,KAAK,SACL,QAAS,EAAI,0BAA0B,CACvC,gBAAe,EAAI,eAAe,EAAI,IAAA,GACtC,gBAAe,EAAI,eAAe,CAClC,gBAAe,uBAAuB,EAAI,KAC1C,aAAY,EAAI,eAAe,CAAG,EAAO,YAAc,EAAO,mBAE9D,EAAC,MAAD,CACE,MAAM,KACN,OAAO,KACP,QAAQ,YACR,KAAK,eACL,cAAY,OACZ,UAAU,iBAEV,EAAC,OAAD,CACE,EAAE,eACF,OAAO,eACP,YAAY,MACZ,KAAK,OACL,cAAc,QACd,eAAe,QACf,CAAA,CACE,CAAA,CACC,CAAA,CAEZ"}
|
|
1
|
+
{"version":3,"file":"DataTableColumns.mjs","names":[],"sources":["../../../../src/components/data-display/datatables/DataTableColumns.tsx"],"sourcesContent":["import {\n columnCheck,\n columnExpand,\n dataTableExpandButton,\n} from '@mage-ui/styled-system/recipes';\nimport type { ColumnDef } from '@tanstack/react-table';\n\nimport { Checkbox } from '../../controls/checkbox/Checkbox';\nimport type { DataTableLabels } from './useDataTableContext';\n\nexport const getDataTableSelectColumn = <Data,>(\n labels: DataTableLabels,\n): ColumnDef<Data, unknown> => ({\n id: '_select',\n meta: {\n classNames: {\n header: columnCheck(),\n cell: columnCheck(),\n },\n },\n size: 48,\n header: ({ table }) => {\n return (\n <Checkbox\n aria-label={labels.selectAllRows}\n checked={table.getIsAllPageRowsSelected()}\n indeterminate={\n table.getIsSomePageRowsSelected() && !table.getIsAllPageRowsSelected()\n }\n onChange={table.getToggleAllPageRowsSelectedHandler()}\n />\n );\n },\n cell: ({ row }) => (\n <Checkbox\n aria-label={labels.selectRow(row.index + 1)}\n checked={row.getIsSelected()}\n disabled={!row.getCanSelect()}\n onChange={row.getToggleSelectedHandler()}\n />\n ),\n});\n\nexport const getDataTableExpandColumn = <Data,>(\n className: string | undefined,\n labels: DataTableLabels,\n): ColumnDef<Data, unknown> => ({\n id: '_expand',\n meta: {\n classNames: {\n header: columnExpand(),\n cell: columnExpand(),\n },\n },\n size: 48,\n header: () => null,\n cell: ({ row }) => (\n <button\n className={className ?? dataTableExpandButton()}\n type='button'\n onClick={row.getToggleExpandedHandler()}\n data-expanded={row.getIsExpanded() || undefined}\n aria-expanded={row.getIsExpanded()}\n aria-controls={`data-table-expanded-${row.id}`}\n aria-label={row.getIsExpanded() ? labels.collapseRow : labels.expandRow}\n >\n <svg\n width='16'\n height='16'\n viewBox='0 0 16 16'\n fill='currentColor'\n aria-hidden='true'\n focusable='false'\n >\n <path\n d='M6 4l4 4-4 4'\n stroke='currentColor'\n strokeWidth='1.5'\n fill='none'\n strokeLinecap='round'\n strokeLinejoin='round'\n />\n </svg>\n </button>\n ),\n});\n"],"mappings":"kNAUA,MAAa,EACX,IAC8B,CAC9B,GAAI,UACJ,KAAM,CACJ,WAAY,CACV,OAAQ,GAAa,CACrB,KAAM,GAAa,CACpB,CACF,CACD,KAAM,GACN,QAAS,CAAE,WAEP,EAAC,EAAD,CACE,aAAY,EAAO,cACnB,QAAS,EAAM,0BAA0B,CACzC,cACE,EAAM,2BAA2B,EAAI,CAAC,EAAM,0BAA0B,CAExE,SAAU,EAAM,qCAAqC,CACrD,CAAA,CAGN,MAAO,CAAE,SACP,EAAC,EAAD,CACE,aAAY,EAAO,UAAU,EAAI,MAAQ,EAAE,CAC3C,QAAS,EAAI,eAAe,CAC5B,SAAU,CAAC,EAAI,cAAc,CAC7B,SAAU,EAAI,0BAA0B,CACxC,CAAA,CAEL,EAEY,GACX,EACA,KAC8B,CAC9B,GAAI,UACJ,KAAM,CACJ,WAAY,CACV,OAAQ,GAAc,CACtB,KAAM,GAAc,CACrB,CACF,CACD,KAAM,GACN,WAAc,KACd,MAAO,CAAE,SACP,EAAC,SAAD,CACE,UAAW,GAAa,GAAuB,CAC/C,KAAK,SACL,QAAS,EAAI,0BAA0B,CACvC,gBAAe,EAAI,eAAe,EAAI,IAAA,GACtC,gBAAe,EAAI,eAAe,CAClC,gBAAe,uBAAuB,EAAI,KAC1C,aAAY,EAAI,eAAe,CAAG,EAAO,YAAc,EAAO,mBAE9D,EAAC,MAAD,CACE,MAAM,KACN,OAAO,KACP,QAAQ,YACR,KAAK,eACL,cAAY,OACZ,UAAU,iBAEV,EAAC,OAAD,CACE,EAAE,eACF,OAAO,eACP,YAAY,MACZ,KAAK,OACL,cAAc,QACd,eAAe,QACf,CAAA,CACE,CAAA,CACC,CAAA,CAEZ"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{Button as e}from"../../buttons/button/Button.mjs";import{VisuallyHidden as t}from"../../misc/visually-hidden/VisuallyHidden.mjs";import{Table as n}from"../table/Table.mjs";import{Icon as r}from"../icons/icon/Icon.mjs";import{useDataTableContext as i}from"./useDataTableContext.mjs";import{cx as a}from"@mage-ui/styled-system/css";import{dataTableHeader as o,dataTableLoading as s,dataTableSortButton as c,dataTableSortButtonIndicator as l}from"@mage-ui/styled-system/recipes";import{jsx as u,jsxs as d}from"react/jsx-runtime";import{flexRender as f}from"@tanstack/react-table";const p=e=>e===`asc`?`ascending`:e===`desc`?`descending`:`none`,m=({sorted:e,className:t})=>u(r,{path:`/icons/sprite-mage.svg`,name:e===`asc`?`mage-datatable-sort-arrow-narrow-up`:e===`desc`?`mage-datatable-sort-arrow-narrow-down`:`mage-datatable-sort-switch-vertical-02`,classNames:{icon:t??l()}}),h=({header:n,className:r})=>{let{labels:o}=i(),s=n.column.getIsSorted();return d(e,{classNames:{button:a(r??c(),`group`)},onClick:n.column.getToggleSortingHandler(),endSlot:u(m,{sorted:s}),children:[f(n.column.columnDef.header,n.getContext()),u(t,{children:s===`asc`?o.sortedAscending:s===`desc`?o.sortedDescending:o.activateToSort})]})},g=({header:e,sortButtonClassName:t})=>e.isPlaceholder?null:e.column.getCanSort()?u(h,{header:e,className:t}):f(e.column.columnDef.header,e.getContext()),_=(e,t)=>{if(
|
|
1
|
+
import{Button as e}from"../../buttons/button/Button.mjs";import{VisuallyHidden as t}from"../../misc/visually-hidden/VisuallyHidden.mjs";import{Table as n}from"../table/Table.mjs";import{Icon as r}from"../icons/icon/Icon.mjs";import{useDataTableContext as i}from"./useDataTableContext.mjs";import{cx as a}from"@mage-ui/styled-system/css";import{dataTableHeader as o,dataTableLoading as s,dataTableSortButton as c,dataTableSortButtonIndicator as l}from"@mage-ui/styled-system/recipes";import{jsx as u,jsxs as d}from"react/jsx-runtime";import{flexRender as f}from"@tanstack/react-table";const p=e=>e===`asc`?`ascending`:e===`desc`?`descending`:`none`,m=({sorted:e,className:t})=>u(r,{path:`/icons/sprite-mage.svg`,name:e===`asc`?`mage-datatable-sort-arrow-narrow-up`:e===`desc`?`mage-datatable-sort-arrow-narrow-down`:`mage-datatable-sort-switch-vertical-02`,classNames:{icon:t??l()}}),h=({header:n,className:r})=>{let{labels:o}=i(),s=n.column.getIsSorted();return d(e,{classNames:{button:a(r??c(),`group`)},onClick:n.column.getToggleSortingHandler(),endSlot:u(m,{sorted:s}),children:[f(n.column.columnDef.header,n.getContext()),u(t,{children:s===`asc`?o.sortedAscending:s===`desc`?o.sortedDescending:o.activateToSort})]})},g=({header:e,sortButtonClassName:t})=>e.isPlaceholder?null:e.column.getCanSort()?u(h,{header:e,className:t}):f(e.column.columnDef.header,e.getContext()),_=(e,t)=>{if(t.has(e.column.id))return`${e.getSize()}px`},v=({header:e,explicitSizeIds:t,classNames:r})=>{let i=e.column.getCanSort(),a=e.column.getIsSorted(),o=e.column.columnDef.meta,s=_(e,t);return u(n.HeaderCell,{classNames:o?.classNames?.header?{th:o.classNames.header}:void 0,scope:`col`,style:{width:s},"aria-sort":i?p(a):void 0,"data-sortable":i||void 0,"data-sort":a||void 0,children:u(g,{header:e,sortButtonClassName:r?.sortButton})})},y=({headerGroups:e,explicitSizeIds:t,loading:r,classNames:i})=>u(n.Head,{classNames:{thead:a(i?.header??o(),r?i?.loading??s():void 0)},"data-loading":r||void 0,children:e.map(e=>u(n.Row,{children:e.headers.map(e=>u(v,{header:e,explicitSizeIds:t,classNames:i},e.id))},e.id))});export{y as DataTableHeader};
|
|
2
2
|
//# sourceMappingURL=DataTableHeader.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTableHeader.mjs","names":[],"sources":["../../../../src/components/data-display/datatables/DataTableHeader.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n dataTableHeader,\n dataTableLoading,\n dataTableSortButton,\n dataTableSortButtonIndicator,\n} from '@mage-ui/styled-system/recipes';\nimport {\n flexRender,\n type Header,\n type HeaderGroup,\n} from '@tanstack/react-table';\nimport { Button } from '@/components/buttons';\n\nimport { VisuallyHidden } from '../../misc/visually-hidden/VisuallyHidden';\nimport { Icon } from '../icons/icon/Icon';\nimport { Table } from '../table/Table';\nimport type { DataTableClassNames, DataTableColumnMeta } from './DataTable';\nimport { useDataTableContext } from './useDataTableContext';\n\ntype DataTableHeaderProps<Data> = {\n headerGroups: HeaderGroup<Data>[];\n explicitSizeIds: Set<string>;\n loading?: boolean;\n classNames?: Pick<DataTableClassNames, 'header' | 'loading' | 'sortButton'>;\n};\n\nconst getAriaSort = (sorted: false | 'asc' | 'desc') => {\n if (sorted === 'asc') return 'ascending';\n if (sorted === 'desc') return 'descending';\n return 'none';\n};\n\nconst SortIndicator = ({\n sorted,\n className,\n}: {\n sorted: false | 'asc' | 'desc';\n className?: string;\n}) => (\n <Icon\n path='/icons/sprite-mage.svg'\n name={\n sorted === 'asc'\n ? 'mage-datatable-sort-arrow-narrow-up'\n : sorted === 'desc'\n ? 'mage-datatable-sort-arrow-narrow-down'\n : 'mage-datatable-sort-switch-vertical-02'\n }\n classNames={{\n icon: className ?? dataTableSortButtonIndicator(),\n }}\n />\n);\n\nconst SortButton = <Data,>({\n header,\n className,\n}: {\n header: Header<Data, unknown>;\n className?: string;\n}): ReactNode => {\n const { labels } = useDataTableContext();\n const sorted = header.column.getIsSorted();\n\n const getSortStatusText = () => {\n if (sorted === 'asc') return labels.sortedAscending;\n if (sorted === 'desc') return labels.sortedDescending;\n return labels.activateToSort;\n };\n\n return (\n <Button\n classNames={{\n button: cx(className ?? dataTableSortButton(), 'group'),\n }}\n onClick={header.column.getToggleSortingHandler()}\n endSlot={<SortIndicator sorted={sorted} />}\n >\n {flexRender(header.column.columnDef.header, header.getContext())}\n <VisuallyHidden>{getSortStatusText()}</VisuallyHidden>\n </Button>\n );\n};\n\nconst HeaderCellContent = <Data,>({\n header,\n sortButtonClassName,\n}: {\n header: Header<Data, unknown>;\n sortButtonClassName?: string;\n}): ReactNode => {\n if (header.isPlaceholder) return null;\n\n if (header.column.getCanSort()) {\n return <SortButton header={header} className={sortButtonClassName} />;\n }\n\n return flexRender(header.column.columnDef.header, header.getContext());\n};\n\nconst getHeaderWidth = <Data,>(\n header: Header<Data, unknown>,\n explicitSizeIds: Set<string>,\n) => {\n
|
|
1
|
+
{"version":3,"file":"DataTableHeader.mjs","names":[],"sources":["../../../../src/components/data-display/datatables/DataTableHeader.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n dataTableHeader,\n dataTableLoading,\n dataTableSortButton,\n dataTableSortButtonIndicator,\n} from '@mage-ui/styled-system/recipes';\nimport {\n flexRender,\n type Header,\n type HeaderGroup,\n} from '@tanstack/react-table';\nimport { Button } from '@/components/buttons';\n\nimport { VisuallyHidden } from '../../misc/visually-hidden/VisuallyHidden';\nimport { Icon } from '../icons/icon/Icon';\nimport { Table } from '../table/Table';\nimport type { DataTableClassNames, DataTableColumnMeta } from './DataTable';\nimport { useDataTableContext } from './useDataTableContext';\n\ntype DataTableHeaderProps<Data> = {\n headerGroups: HeaderGroup<Data>[];\n explicitSizeIds: Set<string>;\n loading?: boolean;\n classNames?: Pick<DataTableClassNames, 'header' | 'loading' | 'sortButton'>;\n};\n\nconst getAriaSort = (sorted: false | 'asc' | 'desc') => {\n if (sorted === 'asc') return 'ascending';\n if (sorted === 'desc') return 'descending';\n return 'none';\n};\n\nconst SortIndicator = ({\n sorted,\n className,\n}: {\n sorted: false | 'asc' | 'desc';\n className?: string;\n}) => (\n <Icon\n path='/icons/sprite-mage.svg'\n name={\n sorted === 'asc'\n ? 'mage-datatable-sort-arrow-narrow-up'\n : sorted === 'desc'\n ? 'mage-datatable-sort-arrow-narrow-down'\n : 'mage-datatable-sort-switch-vertical-02'\n }\n classNames={{\n icon: className ?? dataTableSortButtonIndicator(),\n }}\n />\n);\n\nconst SortButton = <Data,>({\n header,\n className,\n}: {\n header: Header<Data, unknown>;\n className?: string;\n}): ReactNode => {\n const { labels } = useDataTableContext();\n const sorted = header.column.getIsSorted();\n\n const getSortStatusText = () => {\n if (sorted === 'asc') return labels.sortedAscending;\n if (sorted === 'desc') return labels.sortedDescending;\n return labels.activateToSort;\n };\n\n return (\n <Button\n classNames={{\n button: cx(className ?? dataTableSortButton(), 'group'),\n }}\n onClick={header.column.getToggleSortingHandler()}\n endSlot={<SortIndicator sorted={sorted} />}\n >\n {flexRender(header.column.columnDef.header, header.getContext())}\n <VisuallyHidden>{getSortStatusText()}</VisuallyHidden>\n </Button>\n );\n};\n\nconst HeaderCellContent = <Data,>({\n header,\n sortButtonClassName,\n}: {\n header: Header<Data, unknown>;\n sortButtonClassName?: string;\n}): ReactNode => {\n if (header.isPlaceholder) return null;\n\n if (header.column.getCanSort()) {\n return <SortButton header={header} className={sortButtonClassName} />;\n }\n\n return flexRender(header.column.columnDef.header, header.getContext());\n};\n\nconst getHeaderWidth = <Data,>(\n header: Header<Data, unknown>,\n explicitSizeIds: Set<string>,\n) => {\n if (!explicitSizeIds.has(header.column.id)) return undefined;\n return `${header.getSize()}px`;\n};\n\nconst HeaderCell = <Data,>({\n header,\n explicitSizeIds,\n classNames,\n}: {\n header: Header<Data, unknown>;\n explicitSizeIds: Set<string>;\n classNames?: Pick<DataTableClassNames, 'sortButton'>;\n}): ReactNode => {\n const canSort = header.column.getCanSort();\n const sorted = header.column.getIsSorted();\n const columnMeta = header.column.columnDef.meta as\n | DataTableColumnMeta\n | undefined;\n const width = getHeaderWidth(header, explicitSizeIds);\n\n return (\n <Table.HeaderCell\n classNames={\n columnMeta?.classNames?.header\n ? { th: columnMeta.classNames.header }\n : undefined\n }\n scope='col'\n style={{ width }}\n aria-sort={canSort ? getAriaSort(sorted) : undefined}\n data-sortable={canSort || undefined}\n data-sort={(sorted || undefined) as string | undefined}\n >\n <HeaderCellContent\n header={header}\n sortButtonClassName={classNames?.sortButton}\n />\n </Table.HeaderCell>\n );\n};\n\nexport const DataTableHeader = <Data,>({\n headerGroups,\n explicitSizeIds,\n loading,\n classNames,\n}: DataTableHeaderProps<Data>): ReactNode => (\n <Table.Head\n classNames={{\n thead: cx(\n classNames?.header ?? dataTableHeader(),\n loading ? (classNames?.loading ?? dataTableLoading()) : undefined,\n ),\n }}\n data-loading={loading || undefined}\n >\n {headerGroups.map((headerGroup) => (\n <Table.Row key={headerGroup.id}>\n {headerGroup.headers.map((header) => (\n <HeaderCell\n key={header.id}\n header={header}\n explicitSizeIds={explicitSizeIds}\n classNames={classNames}\n />\n ))}\n </Table.Row>\n ))}\n </Table.Head>\n);\n"],"mappings":"wkBA6BA,MAAM,EAAe,GACf,IAAW,MAAc,YACzB,IAAW,OAAe,aACvB,OAGH,GAAiB,CACrB,SACA,eAKA,EAAC,EAAD,CACE,KAAK,yBACL,KACE,IAAW,MACP,sCACA,IAAW,OACT,wCACA,yCAER,WAAY,CACV,KAAM,GAAa,GAA8B,CAClD,CACD,CAAA,CAGE,GAAqB,CACzB,SACA,eAIe,CACf,GAAM,CAAE,UAAW,GAAqB,CAClC,EAAS,EAAO,OAAO,aAAa,CAQ1C,OACE,EAAC,EAAD,CACE,WAAY,CACV,OAAQ,EAAG,GAAa,GAAqB,CAAE,QAAQ,CACxD,CACD,QAAS,EAAO,OAAO,yBAAyB,CAChD,QAAS,EAAC,EAAD,CAAuB,SAAU,CAAA,UAL5C,CAOG,EAAW,EAAO,OAAO,UAAU,OAAQ,EAAO,YAAY,CAAC,CAChE,EAAC,EAAD,CAAA,SAdE,IAAW,MAAc,EAAO,gBAChC,IAAW,OAAe,EAAO,iBAC9B,EAAO,eAY0C,CAAA,CAC/C,IAIP,GAA4B,CAChC,SACA,yBAKI,EAAO,cAAsB,KAE7B,EAAO,OAAO,YAAY,CACrB,EAAC,EAAD,CAAoB,SAAQ,UAAW,EAAuB,CAAA,CAGhE,EAAW,EAAO,OAAO,UAAU,OAAQ,EAAO,YAAY,CAAC,CAGlE,GACJ,EACA,IACG,CACE,KAAgB,IAAI,EAAO,OAAO,GAAG,CAC1C,MAAO,GAAG,EAAO,SAAS,CAAC,KAGvB,GAAqB,CACzB,SACA,kBACA,gBAKe,CACf,IAAM,EAAU,EAAO,OAAO,YAAY,CACpC,EAAS,EAAO,OAAO,aAAa,CACpC,EAAa,EAAO,OAAO,UAAU,KAGrC,EAAQ,EAAe,EAAQ,EAAgB,CAErD,OACE,EAAC,EAAM,WAAP,CACE,WACE,GAAY,YAAY,OACpB,CAAE,GAAI,EAAW,WAAW,OAAQ,CACpC,IAAA,GAEN,MAAM,MACN,MAAO,CAAE,QAAO,CAChB,YAAW,EAAU,EAAY,EAAO,CAAG,IAAA,GAC3C,gBAAe,GAAW,IAAA,GAC1B,YAAY,GAAU,IAAA,YAEtB,EAAC,EAAD,CACU,SACR,oBAAqB,GAAY,WACjC,CAAA,CACe,CAAA,EAIV,GAA0B,CACrC,eACA,kBACA,UACA,gBAEA,EAAC,EAAM,KAAP,CACE,WAAY,CACV,MAAO,EACL,GAAY,QAAU,GAAiB,CACvC,EAAW,GAAY,SAAW,GAAkB,CAAI,IAAA,GACzD,CACF,CACD,eAAc,GAAW,IAAA,YAExB,EAAa,IAAK,GACjB,EAAC,EAAM,IAAP,CAAA,SACG,EAAY,QAAQ,IAAK,GACxB,EAAC,EAAD,CAEU,SACS,kBACL,aACZ,CAJK,EAAO,GAIZ,CACF,CACQ,CATI,EAAY,GAShB,CACZ,CACS,CAAA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{DEFAULT_DATA_TABLE_LABELS as e}from"./useDataTableContext.mjs";import{getDataTableExpandColumn as t,getDataTableSelectColumn as n}from"./DataTableColumns.mjs";import{useCallback as r,useMemo as i}from"react";import{getCoreRowModel as a,getExpandedRowModel as o,useReactTable as s}from"@tanstack/react-table";const c=(e,t)=>{if(!t||t.length===0)return e;let n=e.map((e,t)=>({column:e,index:t})),r=t.map(({column:t,position:n},r)=>({column:t,position:n,index:e.length+r}));return[...n,...r].sort((e,t)=>{let n=e.position??e.index,r=t.position??t.index;return n===r?e.index-t.index:n-r}).map(({column:e})=>e)},l=({data:l,columns:u,extraColumns:d,sorting:f,pagination:p,selection:m,expansion:h,loading:g,onRefresh:_,options:v,classNames:y,labels:b,layout:x})=>{let S=x??`fixed`,C={...e,...b},w=m?.isRowDisabled,T=p?{pageIndex:Math.max(p.currentPage-1,0),pageSize:p.pageSize}:void 0,E=i(()=>[...h?[t(y?.expandButton,C)]:[],...m?[n(C)]:[]],[h,m,y?.expandButton,C]),D=
|
|
1
|
+
import{DEFAULT_DATA_TABLE_LABELS as e}from"./useDataTableContext.mjs";import{getDataTableExpandColumn as t,getDataTableSelectColumn as n}from"./DataTableColumns.mjs";import{useCallback as r,useMemo as i}from"react";import{getCoreRowModel as a,getExpandedRowModel as o,useReactTable as s}from"@tanstack/react-table";const c=(e,t)=>{if(!t||t.length===0)return e;let n=e.map((e,t)=>({column:e,index:t})),r=t.map(({column:t,position:n},r)=>({column:t,position:n,index:e.length+r}));return[...n,...r].sort((e,t)=>{let n=e.position??e.index,r=t.position??t.index;return n===r?e.index-t.index:n-r}).map(({column:e})=>e)},l=({data:l,columns:u,extraColumns:d,sorting:f,pagination:p,selection:m,expansion:h,loading:g,onRefresh:_,options:v,classNames:y,labels:b,layout:x})=>{let S=x??`fixed`,C={...e,...b},w=m?.isRowDisabled,T=p?{pageIndex:Math.max(p.currentPage-1,0),pageSize:p.pageSize}:void 0,E=i(()=>[...h?[t(y?.expandButton,C)]:[],...m?[n(C)]:[]],[h,m,y?.expandButton,C]),D=i(()=>[...E,...c(u,d)],[E,u,d]),O=s({data:l,columns:D,getCoreRowModel:a(),enableSorting:!!f,...f&&{manualSorting:!0,onSortingChange:f.onChange},...p&&{manualPagination:!0,onPaginationChange:p.onChange,pageCount:p.pageCount,...p.rowCount!==void 0&&{rowCount:p.rowCount}},...m&&{enableRowSelection:w?e=>!w(e.original):!0,onRowSelectionChange:m.onChange,...m.getRowId&&{getRowId:e=>m.getRowId?.(e)??``}},...h&&{enableExpanding:!0,getRowCanExpand:()=>!0,getExpandedRowModel:o(),onExpandedChange:h.onChange},...v,state:{...f&&{sorting:f.state},...T&&{pagination:T},...m&&{rowSelection:m.state},...h&&{expanded:h.state}}}),k=i(()=>m?Object.entries(m.state).filter(([,e])=>e).map(([e])=>e):[],[m?.state]),A=r(()=>{_?.()},[_]);return{layout:S,contextValue:i(()=>({table:O,refresh:A,loading:g,selectedIds:k,labels:C,sorting:f,pagination:p,selection:m,expansion:h}),[O,A,g,k,C,f,p,m,h]),table:O,explicitSizeIds:i(()=>{let e=new Set;for(let t of O.getAllLeafColumns())t.columnDef.size!=null&&e.add(t.id);return e},[O,D])}};export{l as useDataTable};
|
|
2
2
|
//# sourceMappingURL=useDataTable.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useDataTable.mjs","names":[],"sources":["../../../../src/components/data-display/datatables/useDataTable.ts"],"sourcesContent":["import { useCallback, useMemo } from 'react';\n\nimport type { ColumnDef } from '@tanstack/react-table';\nimport {\n getCoreRowModel,\n getExpandedRowModel,\n useReactTable,\n} from '@tanstack/react-table';\n\nimport type { DataTableExtraColumnConfig, DataTableProps } from './DataTable';\nimport {\n getDataTableExpandColumn,\n getDataTableSelectColumn,\n} from './DataTableColumns';\nimport {\n type DataTableContextValue,\n DEFAULT_DATA_TABLE_LABELS,\n} from './useDataTableContext';\n\ntype UseDataTableResult<Data> = {\n layout: 'auto' | 'fixed';\n contextValue: DataTableContextValue<Data>;\n table: DataTableContextValue<Data>['table'];\n explicitSizeIds: Set<string>;\n};\n\ntype PositionedColumn<Data> = {\n column: ColumnDef<Data, unknown>;\n position?: number;\n index: number;\n};\n\nconst resolveColumns = <Data>(\n baseColumns: ColumnDef<Data, unknown>[],\n extraColumns?: DataTableExtraColumnConfig<Data>[],\n): ColumnDef<Data, unknown>[] => {\n if (!extraColumns || extraColumns.length === 0) {\n return baseColumns;\n }\n\n const baseEntries: PositionedColumn<Data>[] = baseColumns.map(\n (column, index) => ({ column, index }),\n );\n\n const extraEntries: PositionedColumn<Data>[] = extraColumns.map(\n ({ column, position }, index) => ({\n column,\n position,\n index: baseColumns.length + index,\n }),\n );\n\n return [...baseEntries, ...extraEntries]\n .sort((left, right) => {\n const leftOrder = left.position ?? left.index;\n const rightOrder = right.position ?? right.index;\n\n if (leftOrder !== rightOrder) {\n return leftOrder - rightOrder;\n }\n\n return left.index - right.index;\n })\n .map(({ column }) => column);\n};\n\nexport const useDataTable = <Data>({\n data,\n columns,\n extraColumns,\n sorting,\n pagination,\n selection,\n expansion,\n loading,\n onRefresh,\n options,\n classNames,\n labels,\n layout: providedLayout,\n}: DataTableProps<Data>): UseDataTableResult<Data> => {\n const layout = providedLayout ?? 'fixed';\n const resolvedLabels = { ...DEFAULT_DATA_TABLE_LABELS, ...labels };\n const isRowDisabled = selection?.isRowDisabled;\n const paginationState = pagination\n ? {\n pageIndex: Math.max(pagination.currentPage - 1, 0),\n pageSize: pagination.pageSize,\n }\n : undefined;\n\n const builtInColumns = useMemo(\n () => [\n ...(expansion\n ? [\n getDataTableExpandColumn<Data>(\n classNames?.expandButton,\n resolvedLabels,\n ),\n ]\n : []),\n ...(selection ? [getDataTableSelectColumn<Data>(resolvedLabels)] : []),\n ],\n [expansion, selection, classNames?.expandButton, resolvedLabels],\n );\n\n const allColumns = useMemo(\n () => [...builtInColumns, ...resolveColumns(columns, extraColumns)],\n [builtInColumns, columns, extraColumns],\n );\n\n const table = useReactTable<Data>({\n data,\n columns: allColumns,\n getCoreRowModel: getCoreRowModel(),\n enableSorting: Boolean(sorting),\n ...(sorting && {\n manualSorting: true,\n onSortingChange: sorting.onChange,\n }),\n ...(pagination && {\n manualPagination: true,\n onPaginationChange: pagination.onChange,\n pageCount: pagination.pageCount,\n ...(pagination.rowCount !== undefined && {\n rowCount: pagination.rowCount,\n }),\n }),\n ...(selection && {\n enableRowSelection: isRowDisabled\n ? (row) => !isRowDisabled(row.original)\n : true,\n onRowSelectionChange: selection.onChange,\n ...(selection.getRowId && {\n getRowId: (row: Data) => selection.getRowId?.(row) ?? '',\n }),\n }),\n ...(expansion && {\n enableExpanding: true,\n getRowCanExpand: () => true,\n getExpandedRowModel: getExpandedRowModel(),\n onExpandedChange: expansion.onChange,\n }),\n ...options,\n state: {\n ...(sorting && { sorting: sorting.state }),\n ...(paginationState && { pagination: paginationState }),\n ...(selection && { rowSelection: selection.state }),\n ...(expansion && { expanded: expansion.state }),\n },\n });\n\n const selectedIds = useMemo(() => {\n return selection\n ? Object.entries(selection.state)\n .filter(([, isSelected]) => isSelected)\n .map(([id]) => id)\n : [];\n }, [selection?.state]);\n\n const refresh = useCallback(() => {\n void onRefresh?.();\n }, [onRefresh]);\n\n const contextValue = useMemo(\n () =>\n ({\n table,\n refresh,\n loading,\n selectedIds,\n labels: resolvedLabels,\n sorting,\n pagination,\n selection,\n expansion,\n }) satisfies DataTableContextValue<Data>,\n [\n table,\n refresh,\n loading,\n selectedIds,\n resolvedLabels,\n sorting,\n pagination,\n selection,\n expansion,\n ],\n );\n\n const explicitSizeIds = useMemo(() => {\n const ids = new Set<string>();\n for (const col of
|
|
1
|
+
{"version":3,"file":"useDataTable.mjs","names":[],"sources":["../../../../src/components/data-display/datatables/useDataTable.ts"],"sourcesContent":["import { useCallback, useMemo } from 'react';\n\nimport type { ColumnDef } from '@tanstack/react-table';\nimport {\n getCoreRowModel,\n getExpandedRowModel,\n useReactTable,\n} from '@tanstack/react-table';\n\nimport type { DataTableExtraColumnConfig, DataTableProps } from './DataTable';\nimport {\n getDataTableExpandColumn,\n getDataTableSelectColumn,\n} from './DataTableColumns';\nimport {\n type DataTableContextValue,\n DEFAULT_DATA_TABLE_LABELS,\n} from './useDataTableContext';\n\ntype UseDataTableResult<Data> = {\n layout: 'auto' | 'fixed';\n contextValue: DataTableContextValue<Data>;\n table: DataTableContextValue<Data>['table'];\n explicitSizeIds: Set<string>;\n};\n\ntype PositionedColumn<Data> = {\n column: ColumnDef<Data, unknown>;\n position?: number;\n index: number;\n};\n\nconst resolveColumns = <Data>(\n baseColumns: ColumnDef<Data, unknown>[],\n extraColumns?: DataTableExtraColumnConfig<Data>[],\n): ColumnDef<Data, unknown>[] => {\n if (!extraColumns || extraColumns.length === 0) {\n return baseColumns;\n }\n\n const baseEntries: PositionedColumn<Data>[] = baseColumns.map(\n (column, index) => ({ column, index }),\n );\n\n const extraEntries: PositionedColumn<Data>[] = extraColumns.map(\n ({ column, position }, index) => ({\n column,\n position,\n index: baseColumns.length + index,\n }),\n );\n\n return [...baseEntries, ...extraEntries]\n .sort((left, right) => {\n const leftOrder = left.position ?? left.index;\n const rightOrder = right.position ?? right.index;\n\n if (leftOrder !== rightOrder) {\n return leftOrder - rightOrder;\n }\n\n return left.index - right.index;\n })\n .map(({ column }) => column);\n};\n\nexport const useDataTable = <Data>({\n data,\n columns,\n extraColumns,\n sorting,\n pagination,\n selection,\n expansion,\n loading,\n onRefresh,\n options,\n classNames,\n labels,\n layout: providedLayout,\n}: DataTableProps<Data>): UseDataTableResult<Data> => {\n const layout = providedLayout ?? 'fixed';\n const resolvedLabels = { ...DEFAULT_DATA_TABLE_LABELS, ...labels };\n const isRowDisabled = selection?.isRowDisabled;\n const paginationState = pagination\n ? {\n pageIndex: Math.max(pagination.currentPage - 1, 0),\n pageSize: pagination.pageSize,\n }\n : undefined;\n\n const builtInColumns = useMemo(\n () => [\n ...(expansion\n ? [\n getDataTableExpandColumn<Data>(\n classNames?.expandButton,\n resolvedLabels,\n ),\n ]\n : []),\n ...(selection ? [getDataTableSelectColumn<Data>(resolvedLabels)] : []),\n ],\n [expansion, selection, classNames?.expandButton, resolvedLabels],\n );\n\n const allColumns = useMemo(\n () => [...builtInColumns, ...resolveColumns(columns, extraColumns)],\n [builtInColumns, columns, extraColumns],\n );\n\n const table = useReactTable<Data>({\n data,\n columns: allColumns,\n getCoreRowModel: getCoreRowModel(),\n enableSorting: Boolean(sorting),\n ...(sorting && {\n manualSorting: true,\n onSortingChange: sorting.onChange,\n }),\n ...(pagination && {\n manualPagination: true,\n onPaginationChange: pagination.onChange,\n pageCount: pagination.pageCount,\n ...(pagination.rowCount !== undefined && {\n rowCount: pagination.rowCount,\n }),\n }),\n ...(selection && {\n enableRowSelection: isRowDisabled\n ? (row) => !isRowDisabled(row.original)\n : true,\n onRowSelectionChange: selection.onChange,\n ...(selection.getRowId && {\n getRowId: (row: Data) => selection.getRowId?.(row) ?? '',\n }),\n }),\n ...(expansion && {\n enableExpanding: true,\n getRowCanExpand: () => true,\n getExpandedRowModel: getExpandedRowModel(),\n onExpandedChange: expansion.onChange,\n }),\n ...options,\n state: {\n ...(sorting && { sorting: sorting.state }),\n ...(paginationState && { pagination: paginationState }),\n ...(selection && { rowSelection: selection.state }),\n ...(expansion && { expanded: expansion.state }),\n },\n });\n\n const selectedIds = useMemo(() => {\n return selection\n ? Object.entries(selection.state)\n .filter(([, isSelected]) => isSelected)\n .map(([id]) => id)\n : [];\n }, [selection?.state]);\n\n const refresh = useCallback(() => {\n void onRefresh?.();\n }, [onRefresh]);\n\n const contextValue = useMemo(\n () =>\n ({\n table,\n refresh,\n loading,\n selectedIds,\n labels: resolvedLabels,\n sorting,\n pagination,\n selection,\n expansion,\n }) satisfies DataTableContextValue<Data>,\n [\n table,\n refresh,\n loading,\n selectedIds,\n resolvedLabels,\n sorting,\n pagination,\n selection,\n expansion,\n ],\n );\n\n const explicitSizeIds = useMemo(() => {\n const ids = new Set<string>();\n for (const col of table.getAllLeafColumns()) {\n if (col.columnDef.size != null) {\n ids.add(col.id);\n }\n }\n return ids;\n }, [table, allColumns]);\n\n return {\n layout,\n contextValue,\n table,\n explicitSizeIds,\n };\n};\n"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mage-ui/components",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.95",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "",
|
|
6
6
|
"keywords": [],
|
|
@@ -25,8 +25,8 @@
|
|
|
25
25
|
"rimraf": "^6.1.3",
|
|
26
26
|
"tsdown": "^0.21.4",
|
|
27
27
|
"typescript": "^5.9.3",
|
|
28
|
-
"@mage-ui/
|
|
29
|
-
"@mage-ui/
|
|
28
|
+
"@mage-ui/styled-system": "1.0.8",
|
|
29
|
+
"@mage-ui/preset": "1.0.95"
|
|
30
30
|
},
|
|
31
31
|
"peerDependencies": {
|
|
32
32
|
"@dnd-kit/core": "^6.3.1",
|