@mage-ui/components 1.0.81 → 1.0.82
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/DataTableBulkBar.d.mts.map +1 -1
- package/dist/components/data-display/datatables/DataTableBulkBar.mjs +1 -1
- package/dist/components/data-display/datatables/DataTableBulkBar.mjs.map +1 -1
- package/dist/components/data-display/datatables/DataTableTopSlot.d.mts.map +1 -1
- package/dist/components/data-display/datatables/DataTableTopSlot.mjs +1 -1
- package/dist/components/data-display/datatables/DataTableTopSlot.mjs.map +1 -1
- package/package.json +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTableBulkBar.d.mts","names":[],"sources":["../../../../src/components/data-display/datatables/DataTableBulkBar.tsx"],"mappings":";;;;
|
|
1
|
+
{"version":3,"file":"DataTableBulkBar.d.mts","names":[],"sources":["../../../../src/components/data-display/datatables/DataTableBulkBar.tsx"],"mappings":";;;;KAyBY,0BAAA;EACV,IAAA;EACA,KAAA;EACA,UAAA;EACA,OAAA;EACA,UAAA;EACA,cAAA;AAAA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{Badge as e}from"../badge/Badge.mjs";import{Icon as t}from"../icons/icon/Icon.mjs";import{useDataTableContext as n}from"./useDataTableContext.mjs";import{dataTableBulkBar as r,dataTableBulkBarActions as i,dataTableBulkBarCount as a,dataTableBulkBarCountBadge as o,dataTableBulkBarDragHandle as s,dataTableBulkBarDragHandleIcon as c}from"@mage-ui/styled-system/recipes";import{jsx as l,jsxs as u}from"react/jsx-runtime";import{useState as d}from"react";import{DndContext as f,useDraggable as p}from"@dnd-kit/core";
|
|
1
|
+
import{Badge as e}from"../badge/Badge.mjs";import{Icon as t}from"../icons/icon/Icon.mjs";import{useDataTableContext as n}from"./useDataTableContext.mjs";import{dataTableBulkBar as r,dataTableBulkBarActions as i,dataTableBulkBarCount as a,dataTableBulkBarCountBadge as o,dataTableBulkBarDragHandle as s,dataTableBulkBarDragHandleIcon as c}from"@mage-ui/styled-system/recipes";import{jsx as l,jsxs as u}from"react/jsx-runtime";import{useState as d}from"react";import{DndContext as f,useDraggable as p}from"@dnd-kit/core";const m=e=>({transform:t,activeNodeRect:n,containerNodeRect:r})=>{if(!n||!r)return t;let i={...n,left:n.left-n.width/2+e.x,right:n.right-n.width/2+e.x,top:n.top-n.height/2+e.y,bottom:n.bottom-n.height/2+e.y};return{...t,x:Math.max(r.left-i.left,Math.min(r.right-i.right,t.x)),y:Math.max(r.top-i.top,Math.min(r.bottom-i.bottom,t.y))}},h=({selectedIds:t,className:n,selection:s,labels:c})=>u(`div`,{className:n?.root??r(),"data-draggable":!1,children:[l(`span`,{className:n?.count??a(),children:c.selectedCount(l(e,{classNames:{badge:o()},children:t.length}))}),l(`div`,{className:n?.actions??i(),children:s?.bulkActions?.(t)})]}),g=({coordinates:n,selectedIds:d,className:f,selection:m,labels:h})=>{let{attributes:g,listeners:_,setNodeRef:v,isDragging:y,transform:b}=p({id:`data-table-bulk-bar`});return u(`div`,{ref:v,style:b?{transform:`translate(calc(-50% + ${n.x+b.x}px), calc(-50% + ${n.y+b.y}px))`}:{transform:`translate(calc(-50% + ${n.x}px), calc(-50% + ${n.y}px))`},className:f?.root??r(),"data-draggable":!0,"data-is-dragging":y,children:[l(`span`,{...g,..._,className:f?.dragHandle??s(),"data-is-dragging":y,"aria-hidden":`true`,children:l(t,{name:`mage-bulk-actions-dots-grid-2`,path:`/icons/sprite-mage.svg`,classNames:{icon:c()}})}),l(`span`,{className:f?.count??a(),children:h.selectedCount(l(e,{classNames:{badge:o()},children:d.length}))}),l(`div`,{className:f?.actions??i(),children:m?.bulkActions?.(d)})]})},_=({selectedIds:e,className:t,selection:r,isDraggable:i=!0})=>{let{labels:a}=n(),[o,s]=d({x:0,y:0});return!r?.bulkActions||e.length===0?null:i?l(f,{onDragEnd:e=>{let{delta:t}=e;s(e=>({x:e.x+t.x,y:e.y+t.y}))},modifiers:[m(o)],children:l(g,{coordinates:o,selectedIds:e,className:t,selection:r,labels:a})}):l(h,{selectedIds:e,className:t,selection:r,isDraggable:!1,labels:a})};export{_ as DataTableBulkBar};
|
|
2
2
|
//# sourceMappingURL=DataTableBulkBar.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTableBulkBar.mjs","names":[],"sources":["../../../../src/components/data-display/datatables/DataTableBulkBar.tsx"],"sourcesContent":["import { type ReactNode, useState } from 'react';\n\nimport {
|
|
1
|
+
{"version":3,"file":"DataTableBulkBar.mjs","names":[],"sources":["../../../../src/components/data-display/datatables/DataTableBulkBar.tsx"],"sourcesContent":["import { type ReactNode, useState } from 'react';\n\nimport {\n DndContext,\n type DragEndEvent,\n type Modifier,\n useDraggable,\n} from '@dnd-kit/core';\nimport {\n dataTableBulkBar,\n dataTableBulkBarActions,\n dataTableBulkBarCount,\n dataTableBulkBarCountBadge,\n dataTableBulkBarDragHandle,\n dataTableBulkBarDragHandleIcon,\n} from '@mage-ui/styled-system/recipes';\nimport { Badge } from '@/components/data-display/badge/Badge';\nimport { Icon } from '@/components/data-display/icons/icon/Icon';\n\nimport type { DataTableSelectionConfig } from './DataTable';\nimport {\n type DataTableLabels,\n useDataTableContext,\n} from './useDataTableContext';\n\nexport type DataTableBulkBarClassNames = {\n root?: string;\n count?: string;\n countBadge?: string;\n actions?: string;\n dragHandle?: string;\n dragHandleIcon?: string;\n};\n\ntype DataTableBulkBarProps<Data> = {\n selectedIds: string[];\n className?: DataTableBulkBarClassNames;\n selection?: DataTableSelectionConfig<Data>;\n isDraggable?: boolean;\n};\n\ntype DataTableBulkBarContentProps<Data> = DataTableBulkBarProps<Data> & {\n labels: DataTableLabels;\n};\n\nconst createRestrictModifier =\n (coords: { x: number; y: number }): Modifier =>\n ({ transform, activeNodeRect, containerNodeRect }) => {\n if (!activeNodeRect || !containerNodeRect) {\n return transform;\n }\n\n const adjustedRect = {\n ...activeNodeRect,\n left: activeNodeRect.left - activeNodeRect.width / 2 + coords.x,\n right: activeNodeRect.right - activeNodeRect.width / 2 + coords.x,\n top: activeNodeRect.top - activeNodeRect.height / 2 + coords.y,\n bottom: activeNodeRect.bottom - activeNodeRect.height / 2 + coords.y,\n };\n\n return {\n ...transform,\n x: Math.max(\n containerNodeRect.left - adjustedRect.left,\n Math.min(containerNodeRect.right - adjustedRect.right, transform.x),\n ),\n y: Math.max(\n containerNodeRect.top - adjustedRect.top,\n Math.min(containerNodeRect.bottom - adjustedRect.bottom, transform.y),\n ),\n };\n };\n\nconst DataTableBulkBarStatic = <Data,>({\n selectedIds,\n className,\n selection,\n labels,\n}: DataTableBulkBarContentProps<Data>) => {\n return (\n <div\n className={className?.root ?? dataTableBulkBar()}\n data-draggable={false}\n >\n <span className={className?.count ?? dataTableBulkBarCount()}>\n {labels.selectedCount(\n <Badge classNames={{ badge: dataTableBulkBarCountBadge() }}>\n {selectedIds.length}\n </Badge>,\n )}\n </span>\n <div className={className?.actions ?? dataTableBulkBarActions()}>\n {selection?.bulkActions?.(selectedIds)}\n </div>\n </div>\n );\n};\n\ntype DraggableBulkBarWrapperProps<Data> = DataTableBulkBarProps<Data> & {\n coordinates: { x: number; y: number };\n labels: DataTableLabels;\n};\n\nconst DraggableBulkBarWrapper = <Data,>({\n coordinates,\n selectedIds,\n className,\n selection,\n labels,\n}: DraggableBulkBarWrapperProps<Data>) => {\n const { attributes, listeners, setNodeRef, isDragging, transform } =\n useDraggable({\n id: 'data-table-bulk-bar',\n });\n\n const style = transform\n ? {\n transform: `translate(calc(-50% + ${coordinates.x + transform.x}px), calc(-50% + ${coordinates.y + transform.y}px))`,\n }\n : {\n transform: `translate(calc(-50% + ${coordinates.x}px), calc(-50% + ${coordinates.y}px))`,\n };\n\n return (\n <div\n ref={setNodeRef}\n style={style}\n className={className?.root ?? dataTableBulkBar()}\n data-draggable={true}\n data-is-dragging={isDragging}\n >\n <span\n {...attributes}\n {...listeners}\n className={className?.dragHandle ?? dataTableBulkBarDragHandle()}\n data-is-dragging={isDragging}\n aria-hidden='true'\n >\n <Icon\n name='mage-bulk-actions-dots-grid-2'\n path='/icons/sprite-mage.svg'\n classNames={{ icon: dataTableBulkBarDragHandleIcon() }}\n />\n </span>\n <span className={className?.count ?? dataTableBulkBarCount()}>\n {labels.selectedCount(\n <Badge classNames={{ badge: dataTableBulkBarCountBadge() }}>\n {selectedIds.length}\n </Badge>,\n )}\n </span>\n <div className={className?.actions ?? dataTableBulkBarActions()}>\n {selection?.bulkActions?.(selectedIds)}\n </div>\n </div>\n );\n};\n\nexport const DataTableBulkBar = <Data,>({\n selectedIds,\n className,\n selection,\n isDraggable = true,\n}: DataTableBulkBarProps<Data>): ReactNode => {\n const { labels } = useDataTableContext();\n const [coordinates, setCoordinates] = useState({ x: 0, y: 0 });\n\n if (!selection?.bulkActions || selectedIds.length === 0) {\n return null;\n }\n\n const handleDragEnd = (event: DragEndEvent) => {\n const { delta } = event;\n setCoordinates((prev) => ({\n x: prev.x + delta.x,\n y: prev.y + delta.y,\n }));\n };\n\n if (!isDraggable) {\n return (\n <DataTableBulkBarStatic\n selectedIds={selectedIds}\n className={className}\n selection={selection}\n isDraggable={false}\n labels={labels}\n />\n );\n }\n\n return (\n <DndContext\n onDragEnd={handleDragEnd}\n modifiers={[createRestrictModifier(coordinates)]}\n >\n <DraggableBulkBarWrapper\n coordinates={coordinates}\n selectedIds={selectedIds}\n className={className}\n selection={selection}\n labels={labels}\n />\n </DndContext>\n );\n};\n"],"mappings":"ugBA6CA,MAAM,EACH,IACA,CAAE,YAAW,iBAAgB,uBAAwB,CACpD,GAAI,CAAC,GAAkB,CAAC,EACtB,OAAO,EAGT,IAAM,EAAe,CACnB,GAAG,EACH,KAAM,EAAe,KAAO,EAAe,MAAQ,EAAI,EAAO,EAC9D,MAAO,EAAe,MAAQ,EAAe,MAAQ,EAAI,EAAO,EAChE,IAAK,EAAe,IAAM,EAAe,OAAS,EAAI,EAAO,EAC7D,OAAQ,EAAe,OAAS,EAAe,OAAS,EAAI,EAAO,EACpE,CAED,MAAO,CACL,GAAG,EACH,EAAG,KAAK,IACN,EAAkB,KAAO,EAAa,KACtC,KAAK,IAAI,EAAkB,MAAQ,EAAa,MAAO,EAAU,EAAE,CACpE,CACD,EAAG,KAAK,IACN,EAAkB,IAAM,EAAa,IACrC,KAAK,IAAI,EAAkB,OAAS,EAAa,OAAQ,EAAU,EAAE,CACtE,CACF,EAGC,GAAiC,CACrC,cACA,YACA,YACA,YAGE,EAAC,MAAA,CACC,UAAW,GAAW,MAAQ,GAAkB,CAChD,iBAAgB,aAEhB,EAAC,OAAA,CAAK,UAAW,GAAW,OAAS,GAAuB,UACzD,EAAO,cACN,EAAC,EAAA,CAAM,WAAY,CAAE,MAAO,GAA4B,CAAE,UACvD,EAAY,QACP,CACT,EACI,CACP,EAAC,MAAA,CAAI,UAAW,GAAW,SAAW,GAAyB,UAC5D,GAAW,cAAc,EAAY,EAClC,CAAA,EACF,CASJ,GAAkC,CACtC,cACA,cACA,YACA,YACA,YACwC,CACxC,GAAM,CAAE,aAAY,YAAW,aAAY,aAAY,aACrD,EAAa,CACX,GAAI,sBACL,CAAC,CAUJ,OACE,EAAC,MAAA,CACC,IAAK,EACL,MAXU,EACV,CACE,UAAW,yBAAyB,EAAY,EAAI,EAAU,EAAE,mBAAmB,EAAY,EAAI,EAAU,EAAE,MAChH,CACD,CACE,UAAW,yBAAyB,EAAY,EAAE,mBAAmB,EAAY,EAAE,MACpF,CAMD,UAAW,GAAW,MAAQ,GAAkB,CAChD,iBAAgB,GAChB,mBAAkB,YAElB,EAAC,OAAA,CACC,GAAI,EACJ,GAAI,EACJ,UAAW,GAAW,YAAc,GAA4B,CAChE,mBAAkB,EAClB,cAAY,gBAEZ,EAAC,EAAA,CACC,KAAK,gCACL,KAAK,yBACL,WAAY,CAAE,KAAM,GAAgC,CAAE,EACtD,EACG,CACP,EAAC,OAAA,CAAK,UAAW,GAAW,OAAS,GAAuB,UACzD,EAAO,cACN,EAAC,EAAA,CAAM,WAAY,CAAE,MAAO,GAA4B,CAAE,UACvD,EAAY,QACP,CACT,EACI,CACP,EAAC,MAAA,CAAI,UAAW,GAAW,SAAW,GAAyB,UAC5D,GAAW,cAAc,EAAY,EAClC,GACF,EAIG,GAA2B,CACtC,cACA,YACA,YACA,cAAc,MAC8B,CAC5C,GAAM,CAAE,UAAW,GAAqB,CAClC,CAAC,EAAa,GAAkB,EAAS,CAAE,EAAG,EAAG,EAAG,EAAG,CAAC,CA0B9D,MAxBI,CAAC,GAAW,aAAe,EAAY,SAAW,EAC7C,KAWJ,EAaH,EAAC,EAAA,CACC,UAtBmB,GAAwB,CAC7C,GAAM,CAAE,SAAU,EAClB,EAAgB,IAAU,CACxB,EAAG,EAAK,EAAI,EAAM,EAClB,EAAG,EAAK,EAAI,EAAM,EACnB,EAAE,EAkBD,UAAW,CAAC,EAAuB,EAAY,CAAC,UAEhD,EAAC,EAAA,CACc,cACA,cACF,YACA,YACH,UACR,EACS,CAtBX,EAAC,EAAA,CACc,cACF,YACA,YACX,YAAa,GACL,UACR"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTableTopSlot.d.mts","names":[],"sources":["../../../../src/components/data-display/datatables/DataTableTopSlot.tsx"],"mappings":";;;;
|
|
1
|
+
{"version":3,"file":"DataTableTopSlot.d.mts","names":[],"sources":["../../../../src/components/data-display/datatables/DataTableTopSlot.tsx"],"mappings":";;;;KAcK,0BAAA;EACH,IAAA;AAAA;AAAA,KAGU,qBAAA;EACV,QAAA,GAAW,SAAA;EACX,MAAA,GAAS,qBAAA;EACT,WAAA;EACA,cAAA,IAAkB,KAAA;EAClB,OAAA,GAAU,sBAAA;EACV,YAAA,GAAe,MAAA;EACf,eAAA,IAAmB,IAAA,EAAM,MAAA;EACzB,UAAA,GAAa,0BAAA;AAAA;AAAA,cAGF,gBAAA;EAAoB,QAAA;EAAA,MAAA;EAAA,WAAA;EAAA,cAAA;EAAA,OAAA;EAAA,YAAA;EAAA,eAAA;EAAA;AAAA,GAS9B,qBAAA,KAAwB,SAAA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{
|
|
1
|
+
import{Icon as e}from"../icons/icon/Icon.mjs";import{TextInput as t}from"../../controls/text-input/TextInput.mjs";import{dataTableSearcher as n,dataTableTopSlot as r}from"@mage-ui/styled-system/recipes";import{jsx as i,jsxs as a}from"react/jsx-runtime";const o=({children:o,search:s,searchValue:c,onSearchChange:l,filters:u,filtersState:d,onFiltersChange:f,classNames:p})=>{let m=s!=null,h=u!=null&&d!=null&&f!=null;return!m&&!h&&!(o!=null&&o!==!1)?null:a(`div`,{className:p?.root??r(),children:[h?u.render(d,f):null,m&&l?i(t,{placeholder:s.placeholder,"aria-label":s.label??s.placeholder,value:c??``,onChange:e=>l(e.currentTarget.value),startSlot:i(e,{path:`/icons/sprite-mage.svg`,name:`mage-searcher-search`}),classNames:{textInput:n()},type:`search`}):null,o]})};export{o as DataTableTopSlot};
|
|
2
2
|
//# sourceMappingURL=DataTableTopSlot.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTableTopSlot.mjs","names":[],"sources":["../../../../src/components/data-display/datatables/DataTableTopSlot.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport {
|
|
1
|
+
{"version":3,"file":"DataTableTopSlot.mjs","names":[],"sources":["../../../../src/components/data-display/datatables/DataTableTopSlot.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport {\n dataTableSearcher,\n dataTableTopSlot,\n} from '@mage-ui/styled-system/recipes';\n\nimport { TextInput } from '../../controls/text-input/TextInput';\nimport { Icon } from '../icons/icon/Icon';\nimport type {\n DataTableFiltersConfig,\n DataTableSearchConfig,\n} from './DataTable';\n\ntype DataTableTopSlotClassNames = {\n root?: string;\n};\n\nexport type DataTableTopSlotProps = {\n children?: ReactNode;\n search?: DataTableSearchConfig;\n searchValue?: string;\n onSearchChange?: (value: string) => void;\n filters?: DataTableFiltersConfig;\n filtersState?: Record<string, unknown>;\n onFiltersChange?: (next: Record<string, unknown>) => void;\n classNames?: DataTableTopSlotClassNames;\n};\n\nexport const DataTableTopSlot = ({\n children,\n search,\n searchValue,\n onSearchChange,\n filters,\n filtersState,\n onFiltersChange,\n classNames,\n}: DataTableTopSlotProps): ReactNode => {\n const hasSearch = search != null;\n const hasFilters =\n filters != null && filtersState != null && onFiltersChange != null;\n const hasChildren =\n children !== null && children !== undefined && children !== false;\n\n if (!hasSearch && !hasFilters && !hasChildren) {\n return null;\n }\n\n return (\n <div className={classNames?.root ?? dataTableTopSlot()}>\n {hasFilters ? filters.render(filtersState, onFiltersChange) : null}\n {hasSearch && onSearchChange ? (\n <TextInput\n placeholder={search.placeholder}\n aria-label={search.label ?? search.placeholder}\n value={searchValue ?? ''}\n onChange={(event) => onSearchChange(event.currentTarget.value)}\n startSlot={\n <Icon path='/icons/sprite-mage.svg' name='mage-searcher-search' />\n }\n classNames={{\n textInput: dataTableSearcher(),\n }}\n type='search'\n />\n ) : null}\n {children}\n </div>\n );\n};\n"],"mappings":"6PA6BA,MAAa,GAAoB,CAC/B,WACA,SACA,cACA,iBACA,UACA,eACA,kBACA,gBACsC,CACtC,IAAM,EAAY,GAAU,KACtB,EACJ,GAAW,MAAQ,GAAgB,MAAQ,GAAmB,KAQhE,MAJI,CAAC,GAAa,CAAC,GAAc,EAF/B,GAAa,MAAkC,IAAa,IAGrD,KAIP,EAAC,MAAA,CAAI,UAAW,GAAY,MAAQ,GAAkB,WACnD,EAAa,EAAQ,OAAO,EAAc,EAAgB,CAAG,KAC7D,GAAa,EACZ,EAAC,EAAA,CACC,YAAa,EAAO,YACpB,aAAY,EAAO,OAAS,EAAO,YACnC,MAAO,GAAe,GACtB,SAAW,GAAU,EAAe,EAAM,cAAc,MAAM,CAC9D,UACE,EAAC,EAAA,CAAK,KAAK,yBAAyB,KAAK,wBAAyB,CAEpE,WAAY,CACV,UAAW,GAAmB,CAC/B,CACD,KAAK,UACL,CACA,KACH,IACG"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mage-ui/components",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.82",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "",
|
|
6
6
|
"keywords": [],
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
"tsdown": "^0.20.3",
|
|
27
27
|
"typescript": "^5.9.3",
|
|
28
28
|
"@mage-ui/styled-system": "1.0.8",
|
|
29
|
-
"@mage-ui/preset": "1.0.
|
|
29
|
+
"@mage-ui/preset": "1.0.82"
|
|
30
30
|
},
|
|
31
31
|
"peerDependencies": {
|
|
32
32
|
"@ebay/nice-modal-react": "^1.2.13",
|