@join-x5/react-data-grid-settings 1.1.1 → 1.2.0

package/dist/Area/index.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es.js","sources":["../../src/Area/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport {useDroppable} from '@dnd-kit/core';\n\nimport {Placement} from '@join-x5/react-theme';\nimport {Tooltip} from '@join-x5/react';\n\nimport {Items} from '../AreaItem';\nimport {ColumnArea} from '../types';\n\nimport type {ColumnItemId, DataGridSettingsActiveItem, ItemsById} from '../types';\n\nimport type {PropsWithChildren} from '@join-x5/react-theme';\n\nconst Container = styled.div`\n  position: relative;\n  min-height: 32px;\n`;\n\nconst Content = styled.div`\n  min-height: 32px;\n`;\n\nconst Header = styled.div`\n  position: relative;\n  padding: 6px 8px;\n  border-radius: 8px 8px 0 0;\n  text-align: center;\n  user-select: none;\n  z-index: 1;\n\n  ${({theme}) => ({\n    ...theme.typography.p2,\n\n    color: theme.colors.white,\n  })}\n`;\n\nconst Placeholder = styled.div`\n  padding: 8px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  user-select: none;\n\n  ${({theme}) => ({\n    ...theme.typography.p2,\n\n    color: theme.colors.grey[60],\n  })}\n`;\n\nconst FixedContainer = styled.div<{isOver: boolean}>`\n  position: relative;\n\n  ::after {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    box-sizing: border-box;\n    border-radius: 8px;\n    border-width: 2px;\n    border-style: dashed;\n    pointer-events: none;\n  }\n\n  ${({theme, isOver}) => {\n    return `\n      ::after {\n        border-color: ${isOver ? theme.colors.accent[80] : theme.colors.grey[60]};\n      }\n\n      ${Header} {\n        background-color: ${isOver ? theme.colors.accent[80] : theme.colors.grey[50]};\n      }\n\n      ${Placeholder} {\n        background-color: ${isOver ? theme.colors.accent[10] : undefined};\n      }\n    `;\n  }}\n`;\n\ntype AreaProps = {\n  id: string;\n  area: ColumnArea;\n  isEmpty: boolean;\n  isOverItems: boolean;\n  isWithHeader: boolean;\n} & PropsWithChildren;\n\nconst DefaultArea: React.FC<AreaProps> = ({children, id, area}) => {\n  const {setNodeRef} = useDroppable({id, data: {area}});\n\n  return <Container ref={setNodeRef}>{children}</Container>;\n};\n\nconst FixedArea: React.FC<AreaProps> = ({children, id, area, isEmpty, isOverItems, isWithHeader}) => {\n  const {isOver, setNodeRef} = useDroppable({id, data: {area}});\n\n  if (isEmpty) {\n    const placeholderText = `Перетащите столбец сюда, чтобы\n    закрепить его ${area === ColumnArea.FixedLeft ? 'слева' : 'справа'} от таблицы`;\n\n    return (\n      <FixedContainer ref={setNodeRef} isOver={isOver || isOverItems}>\n        <Header hidden={!isWithHeader}>Область для закрепления столбца</Header>\n        <Content>\n          <Tooltip placement={Placement.Right} content={placeholderText} whiteSpace=\"pre-line\">\n            <Placeholder>{placeholderText}</Placeholder>\n          </Tooltip>\n        </Content>\n      </FixedContainer>\n    );\n  }\n\n  return (\n    <FixedContainer ref={setNodeRef} isOver={isOver || isOverItems}>\n      <Header hidden={!isWithHeader}>Область для закрепления столбца</Header>\n      <Content>{children}</Content>\n    </FixedContainer>\n  );\n};\n\ntype GetArea = {\n  columnIndex: number;\n  area: ColumnArea;\n  itemIds: ColumnItemId[];\n  itemsById: ItemsById;\n  activeItem: DataGridSettingsActiveItem | undefined;\n  searchItems: ColumnItemId[];\n};\n\nexport const getArea = ({columnIndex, area, itemIds, itemsById, activeItem}: GetArea) => {\n  const Component = area === ColumnArea.Default ? DefaultArea : FixedArea;\n\n  const isWithHeader = area === ColumnArea.FixedLeft && columnIndex === 0;\n  const isSingleItemActive = itemIds.length === 1 && itemIds[0] === activeItem?.id;\n  const isFixedArea = area !== ColumnArea.Default;\n\n  const isEmpty = itemIds.length === 0 || (isSingleItemActive && isFixedArea);\n  const isOverItems = itemIds.findIndex(itemId => itemsById.get(itemId)?.id === activeItem?.overId) !== -1;\n\n  const props: AreaProps = {\n    area,\n    isEmpty,\n    isOverItems,\n    isWithHeader,\n\n    id: `${columnIndex}_${area}`,\n  };\n\n  return (\n    <Component key={props.id} {...props}>\n      <Items itemIds={itemIds} activeItem={activeItem} />\n    </Component>\n  );\n};\n"],"names":["Container","_styled","process","env","NODE_ENV","target","label","name","styles","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","Content","Header","theme","typography","p2","color","colors","white","Placeholder","grey","FixedContainer","isOver","accent","undefined","DefaultArea","children","id","area","setNodeRef","useDroppable","data","jsx","FixedArea","isEmpty","isOverItems","isWithHeader","placeholderText","ColumnArea","FixedLeft","Tooltip","Placement","Right","getArea","columnIndex","itemIds","itemsById","activeItem","Component","Default","isSingleItemActive","length","isFixedArea","findIndex","itemId","get","overId","props","Items"],"mappings":"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"}
+{"version":3,"file":"index.es.js","sources":["../../src/Area/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport {useDroppable} from '@dnd-kit/core';\n\nimport {Placement} from '@join-x5/react-theme';\nimport {Tooltip} from '@join-x5/react';\n\nimport {Items} from '../AreaItem';\nimport {ColumnArea} from '../types';\n\nimport type {ColumnItemId, DataGridSettingsActiveItem, ItemsById} from '../types';\n\nimport type {PropsWithChildren} from '@join-x5/react-theme';\n\nconst Container = styled.div`\n  position: relative;\n  min-height: 32px;\n`;\n\nconst Content = styled.div`\n  min-height: 32px;\n`;\n\nconst Header = styled.div`\n  position: relative;\n  padding: 6px 8px;\n  border-radius: 8px 8px 0 0;\n  text-align: center;\n  user-select: none;\n  z-index: 1;\n\n  ${({theme}) => ({\n    ...theme.typography.p2,\n\n    color: theme.colors.white,\n  })}\n`;\n\nconst Placeholder = styled.div`\n  padding: 8px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  user-select: none;\n\n  ${({theme}) => ({\n    ...theme.typography.p2,\n\n    color: theme.colors.grey[60],\n  })}\n`;\n\nconst FixedContainer = styled.div<{isOver: boolean}>`\n  position: relative;\n\n  ::after {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    box-sizing: border-box;\n    border-radius: 8px;\n    border-width: 2px;\n    border-style: dashed;\n    pointer-events: none;\n  }\n\n  ${({theme, isOver}) => {\n    return `\n      ::after {\n        border-color: ${isOver ? theme.colors.accent[80] : theme.colors.grey[60]};\n      }\n\n      ${Header} {\n        background-color: ${isOver ? theme.colors.accent[80] : theme.colors.grey[50]};\n      }\n\n      ${Placeholder} {\n        background-color: ${isOver ? theme.colors.accent[10] : undefined};\n      }\n    `;\n  }}\n`;\n\ntype AreaProps = {\n  id: string;\n  area: ColumnArea;\n  isEmpty: boolean;\n  isOverItems: boolean;\n  isWithHeader: boolean;\n} & PropsWithChildren;\n\nconst DefaultArea: React.FC<AreaProps> = ({children, id, area}) => {\n  const {setNodeRef} = useDroppable({id, data: {area}});\n\n  return <Container ref={setNodeRef}>{children}</Container>;\n};\n\nconst FixedArea: React.FC<AreaProps> = ({children, id, area, isEmpty, isOverItems, isWithHeader}) => {\n  const {isOver, setNodeRef} = useDroppable({id, data: {area}});\n\n  if (isEmpty) {\n    const placeholderText = `Перетащите столбец сюда, чтобы\n    закрепить его ${area === ColumnArea.FixedLeft ? 'слева' : 'справа'} от таблицы`;\n\n    return (\n      <FixedContainer ref={setNodeRef} isOver={isOver || isOverItems}>\n        <Header hidden={!isWithHeader}>Область для закрепления столбца</Header>\n        <Content>\n          <Tooltip placement={Placement.Right} content={placeholderText} whiteSpace=\"pre-line\">\n            <Placeholder>{placeholderText}</Placeholder>\n          </Tooltip>\n        </Content>\n      </FixedContainer>\n    );\n  }\n\n  return (\n    <FixedContainer ref={setNodeRef} isOver={isOver || isOverItems}>\n      <Header hidden={!isWithHeader}>Область для закрепления столбца</Header>\n      <Content>{children}</Content>\n    </FixedContainer>\n  );\n};\n\ntype GetArea = {\n  columnIndex: number;\n  area: ColumnArea;\n  itemIds: ColumnItemId[];\n  itemsById: ItemsById;\n  activeItem: DataGridSettingsActiveItem | undefined;\n  searchItems: ColumnItemId[];\n};\n\nexport const getArea = ({columnIndex, area, itemIds, itemsById, activeItem}: GetArea) => {\n  const Component = area === ColumnArea.Default ? DefaultArea : FixedArea;\n\n  const isWithHeader = area === ColumnArea.FixedLeft && columnIndex === 0;\n  const isSingleItemActive = itemIds.length === 1 && itemIds[0] === activeItem?.id;\n  const isFixedArea = area !== ColumnArea.Default;\n\n  const isEmpty = itemIds.length === 0 || (isSingleItemActive && isFixedArea);\n  const isOverItems = itemIds.findIndex(itemId => itemsById.get(itemId)?.id === activeItem?.overId) !== -1;\n\n  const props: AreaProps = {\n    area,\n    isEmpty,\n    isOverItems,\n    isWithHeader,\n\n    id: `${columnIndex}_${area}`,\n  };\n\n  return (\n    <Component key={props.id} {...props}>\n      <Items itemIds={itemIds} activeItem={activeItem} />\n    </Component>\n  );\n};\n"],"names":["Container","_styled","process","env","NODE_ENV","target","label","name","styles","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","Content","Header","theme","typography","p2","color","colors","white","Placeholder","grey","FixedContainer","isOver","accent","undefined","DefaultArea","children","id","area","setNodeRef","useDroppable","data","jsx","FixedArea","isEmpty","isOverItems","isWithHeader","placeholderText","ColumnArea","FixedLeft","Tooltip","Placement","Right","getArea","columnIndex","itemIds","itemsById","activeItem","Component","Default","isSingleItemActive","length","isFixedArea","findIndex","itemId","get","overId","props","Items"],"mappings":"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"}

package/dist/AreaItem/AreaItem.es.js

@@ -3,11 +3,11 @@ import { jsx as b } from "@emotion/react/jsx-runtime";
 import Z from "@emotion/styled/base";
 import { useEffect as V } from "react";
 import { DragOverlay as a } from "@dnd-kit/core";
-import { useSortable as e } from "@dnd-kit/sortable";
-import x from "@join-x5/react-theme";
-import { ColumnArea as Y } from "../types.es.js";
+import { useSortable as x } from "@dnd-kit/sortable";
+import Y from "@join-x5/react-theme";
+import { ColumnArea as B } from "../types.es.js";
 import { ItemContent as W } from "./ItemContent.es.js";
-function B() {
+function e() {
   return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
 }
 const G = /* @__PURE__ */ Z("div", process.env.NODE_ENV === "production" ? {
@@ -21,7 +21,7 @@ const G = /* @__PURE__ */ Z("div", process.env.NODE_ENV === "production" ? {
 } : {
   name: "14eqsx",
   styles: "position:relative;box-sizing:border-box;height:32px;padding:4px;border-radius:4px;transform-origin:0 0;touch-action:manipulation/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3NhZHlrb3ZzZC9qb2luLXg1L3BhY2thZ2VzL2RhdGEtZ3JpZC1zZXR0aW5ncy9zcmMvQXJlYUl0ZW0vQXJlYUl0ZW0udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWdCZ0MiLCJmaWxlIjoiL2hvbWUvc2FkeWtvdnNkL2pvaW4teDUvcGFja2FnZXMvZGF0YS1ncmlkLXNldHRpbmdzL3NyYy9BcmVhSXRlbS9BcmVhSXRlbS50c3giLCJzb3VyY2VzQ29udGVudCI6WyIndXNlIGNsaWVudCc7XG5cbmltcG9ydCB7dXNlRWZmZWN0fSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQge0RyYWdPdmVybGF5fSBmcm9tICdAZG5kLWtpdC9jb3JlJztcbmltcG9ydCB7dXNlU29ydGFibGV9IGZyb20gJ0BkbmQta2l0L3NvcnRhYmxlJztcblxuaW1wb3J0IGJhc2VUaGVtZSBmcm9tICdAam9pbi14NS9yZWFjdC10aGVtZSc7XG5cbmltcG9ydCB7Q29sdW1uQXJlYX0gZnJvbSAnLi4vdHlwZXMnO1xuXG5pbXBvcnQge0l0ZW1Db250ZW50fSBmcm9tICcuL0l0ZW1Db250ZW50JztcblxuaW1wb3J0IHR5cGUge0NTU1Byb3BlcnRpZXN9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB0eXBlIHtDb2x1bW5JdGVtLCBDb2x1bW5JdGVtSWR9IGZyb20gJy4uL3R5cGVzJztcblxuY29uc3QgQmFzZUNvbnRhaW5lciA9IHN0eWxlZC5kaXZgXG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgaGVpZ2h0OiAzMnB4O1xuICBwYWRkaW5nOiA0cHg7XG4gIGJvcmRlci1yYWRpdXM6IDRweDtcbiAgdHJhbnNmb3JtLW9yaWdpbjogMCAwO1xuICB0b3VjaC1hY3Rpb246IG1hbmlwdWxhdGlvbjtcbmA7XG5cbmNvbnN0IFBsYWNlaG9sZGVyID0gc3R5bGVkKEJhc2VDb250YWluZXIpYFxuICB0cmFuc2Zvcm06IHRyYW5zbGF0ZTNkKHZhcigtLXR4LCAwKSwgdmFyKC0tdHksIDApLCAwKSBzY2FsZVgodmFyKC0tc3gsIDEpKSBzY2FsZVkodmFyKC0tc3ksIDEpKTtcbiAgYmFja2dyb3VuZC1jb2xvcjogJHtwcm9wcyA9PiBwcm9wcy50aGVtZS5jb2xvcnMuZ3JleVsxMF19O1xuYDtcblxuY29uc3QgRHJhZ2dpbmcgPSBzdHlsZWQoQmFzZUNvbnRhaW5lcilgXG4gIGJhY2tncm91bmQtY29sb3I6ICR7cHJvcHMgPT4gcHJvcHMudGhlbWUuY29sb3JzLndoaXRlfTtcbiAgYm94LXNoYWRvdzogJHtiYXNlVGhlbWUuc2hhZG93cy5tZWRpdW19O1xuICBwb2ludGVyLWV2ZW50czogbm9uZTtcbmA7XG5cbmNvbnN0IENvbnRhaW5lciA9IHN0eWxlZChCYXNlQ29udGFpbmVyKWBcbiAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCh2YXIoLS10eCwgMCksIHZhcigtLXR5LCAwKSwgMCkgc2NhbGVYKHZhcigtLXN4LCAxKSkgc2NhbGVZKHZhcigtLXN5LCAxKSk7XG5cbiAgOmhvdmVyIHtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3Byb3BzID0+IHByb3BzLnRoZW1lLmNvbG9ycy5ncmV5WzEwXX07XG4gIH1cblxuICA6OmFmdGVyIHtcbiAgICBjb250ZW50OiAnJztcbiAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgZGlzcGxheTogbm9uZTtcbiAgICB3aWR0aDogMTAwJTtcbiAgICBoZWlnaHQ6IDJweDtcbiAgICBsZWZ0OiAwO1xuICAgIGJhY2tncm91bmQtY29sb3I6ICR7cHJvcHMgPT4gcHJvcHMudGhlbWUuY29sb3JzLmFjY2VudFs5MF19O1xuICB9XG5cbiAgJltkYXRhLWlzLWFib3ZlXTo6YWZ0ZXIge1xuICAgIGRpc3BsYXk6IGJsb2NrO1xuICAgIHRvcDogMXB4O1xuICB9XG5cbiAgJltkYXRhLWlzLWJlbG93XTo6YWZ0ZXIge1xuICAgIGRpc3BsYXk6IGJsb2NrO1xuICAgIGJvdHRvbTogMDtcbiAgfVxuXG4gICZbZGF0YS1pcy1maXhlZF1bZGF0YS1pcy1hYm92ZV06Zmlyc3Qtb2YtdHlwZTo6YWZ0ZXIge1xuICAgIHdpZHRoOiBjYWxjKDEwMCUgLSAxMHB4KTtcbiAgICB0b3A6IDJweDtcbiAgICBsZWZ0OiA1cHg7XG4gIH1cblxuICAmW2RhdGEtaXMtZml4ZWRdW2RhdGEtaXMtYmVsb3ddOmxhc3Qtb2YtdHlwZTo6YWZ0ZXIge1xuICAgIHdpZHRoOiBjYWxjKDEwMCUgLSAxMHB4KTtcbiAgICBib3R0b206IDFweDtcbiAgICBsZWZ0OiA1cHg7XG4gIH1cblxuICAmW2RhdGEtaXMtc2VhcmNoXSB7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogJHtwcm9wcyA9PiBwcm9wcy50aGVtZS5jb2xvcnMuYWNjZW50WzEwXX07XG4gIH1cbmA7XG5cbnR5cGUgQXJlYUl0ZW1Qcm9wcyA9IHtcbiAgaWQ6IENvbHVtbkl0ZW1JZDtcbiAgaXRlbTogQ29sdW1uSXRlbTtcbiAgaXNBY3RpdmU6IGJvb2xlYW47XG4gIGlzQWJvdmU6IGJvb2xlYW47XG4gIGlzQmVsb3c6IGJvb2xlYW47XG4gIGlzU2VhcmNoOiBib29sZWFuO1xufTtcblxuZXhwb3J0IGNvbnN0IEFyZWFJdGVtOiBSZWFjdC5GQzxBcmVhSXRlbVByb3BzPiA9ICh7aWQsIGl0ZW0sIGlzQWN0aXZlLCBpc0Fib3ZlLCBpc0JlbG93LCBpc1NlYXJjaH0pID0+IHtcbiAgY29uc3Qge3NldE5vZGVSZWYsIHNldEFjdGl2YXRvck5vZGVSZWYsIGxpc3RlbmVycywgdHJhbnNmb3JtLCB0cmFuc2l0aW9ufSA9IHVzZVNvcnRhYmxlKHtpZH0pO1xuXG4gIGlmIChpc0FjdGl2ZSkge1xuICAgIHJldHVybiA8UGxhY2Vob2xkZXIgcmVmPXtzZXROb2RlUmVmfSAvPjtcbiAgfVxuXG4gIGNvbnN0IHN0eWxlOiBDU1NQcm9wZXJ0aWVzID0ge3RyYW5zaXRpb259O1xuXG4gIGlmICh0cmFuc2Zvcm0pIHtcbiAgICBzdHlsZVsnLS10eCddID0gYCR7TWF0aC5yb3VuZCh0cmFuc2Zvcm0ueCl9cHhgO1xuICAgIHN0eWxlWyctLXR5J10gPSBgJHtNYXRoLnJvdW5kKHRyYW5zZm9ybS55KX1weGA7XG4gICAgc3R5bGVbJy0tc3gnXSA9IGAke3RyYW5zZm9ybS5zY2FsZVh9YDtcbiAgICBzdHlsZVsnLS1zeSddID0gYCR7dHJhbnNmb3JtLnNjYWxlWX1gO1xuICB9XG5cbiAgcmV0dXJuIChcbiAgICA8Q29udGFpbmVyXG4gICAgICByZWY9e3NldE5vZGVSZWZ9XG4gICAgICBzdHlsZT17c3R5bGV9XG4gICAgICBkYXRhLWlzLWZpeGVkPXtpdGVtLmFyZWEgIT09IENvbHVtbkFyZWEuRGVmYXVsdCB8fCB1bmRlZmluZWR9XG4gICAgICBkYXRhLWlzLWFib3ZlPXtpc0Fib3ZlIHx8IHVuZGVmaW5lZH1cbiAgICAgIGRhdGEtaXMtYmVsb3c9e2lzQmVsb3cgfHwgdW5kZWZpbmVkfVxuICAgICAgZGF0YS1pcy1zZWFyY2g9e2lzU2VhcmNoIHx8IHVuZGVmaW5lZH1cbiAgICA+XG4gICAgICA8SXRlbUNvbnRlbnQgaGFuZGxlUmVmPXtzZXRBY3RpdmF0b3JOb2RlUmVmfSBsaXN0ZW5lcnM9e2xpc3RlbmVyc30gaXRlbT17aXRlbX0gLz5cbiAgICA8L0NvbnRhaW5lcj5cbiAgKTtcbn07XG5cbmV4cG9ydCBjb25zdCBBY3RpdmVJdGVtT3ZlcmxheTogUmVhY3QuRkM8e2l0ZW0/OiBDb2x1bW5JdGVtfT4gPSAoe2l0ZW19KSA9PiB7XG4gIGNvbnN0IGNoaWxkID0gIWl0ZW0gPyBudWxsIDogKFxuICAgIDxEcmFnZ2luZz5cbiAgICAgIDxJdGVtQ29udGVudCBpdGVtPXtpdGVtfSAvPlxuICAgIDwvRHJhZ2dpbmc+XG4gICk7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBpZiAoIWl0ZW0pIHtcbiAgICAgIHJldHVybjtcbiAgICB9XG5cbiAgICB3aW5kb3cuZG9jdW1lbnQuYm9keS5zdHlsZS5jdXJzb3IgPSAnZ3JhYmJpbmcnO1xuXG4gICAgcmV0dXJuICgpID0+IHtcbiAgICAgIHdpbmRvdy5kb2N1bWVudC5ib2R5LnN0eWxlLmN1cnNvciA9ICcnO1xuICAgIH07XG4gIH0sIFtpdGVtXSk7XG5cbiAgcmV0dXJuIDxEcmFnT3ZlcmxheT57Y2hpbGR9PC9EcmFnT3ZlcmxheT47XG59O1xuIl19 */",
-  toString: B
+  toString: e
 }), J = /* @__PURE__ */ Z(G, process.env.NODE_ENV === "production" ? {
   target: "e1ghuuz92"
 } : {
@@ -32,7 +32,7 @@ const G = /* @__PURE__ */ Z("div", process.env.NODE_ENV === "production" ? {
 } : {
   target: "e1ghuuz91",
   label: "Dragging"
-})("background-color:", (c) => c.theme.colors.white, ";box-shadow:", x.shadows.medium, ";pointer-events:none;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3NhZHlrb3ZzZC9qb2luLXg1L3BhY2thZ2VzL2RhdGEtZ3JpZC1zZXR0aW5ncy9zcmMvQXJlYUl0ZW0vQXJlYUl0ZW0udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQStCc0MiLCJmaWxlIjoiL2hvbWUvc2FkeWtvdnNkL2pvaW4teDUvcGFja2FnZXMvZGF0YS1ncmlkLXNldHRpbmdzL3NyYy9BcmVhSXRlbS9BcmVhSXRlbS50c3giLCJzb3VyY2VzQ29udGVudCI6WyIndXNlIGNsaWVudCc7XG5cbmltcG9ydCB7dXNlRWZmZWN0fSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQge0RyYWdPdmVybGF5fSBmcm9tICdAZG5kLWtpdC9jb3JlJztcbmltcG9ydCB7dXNlU29ydGFibGV9IGZyb20gJ0BkbmQta2l0L3NvcnRhYmxlJztcblxuaW1wb3J0IGJhc2VUaGVtZSBmcm9tICdAam9pbi14NS9yZWFjdC10aGVtZSc7XG5cbmltcG9ydCB7Q29sdW1uQXJlYX0gZnJvbSAnLi4vdHlwZXMnO1xuXG5pbXBvcnQge0l0ZW1Db250ZW50fSBmcm9tICcuL0l0ZW1Db250ZW50JztcblxuaW1wb3J0IHR5cGUge0NTU1Byb3BlcnRpZXN9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB0eXBlIHtDb2x1bW5JdGVtLCBDb2x1bW5JdGVtSWR9IGZyb20gJy4uL3R5cGVzJztcblxuY29uc3QgQmFzZUNvbnRhaW5lciA9IHN0eWxlZC5kaXZgXG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgaGVpZ2h0OiAzMnB4O1xuICBwYWRkaW5nOiA0cHg7XG4gIGJvcmRlci1yYWRpdXM6IDRweDtcbiAgdHJhbnNmb3JtLW9yaWdpbjogMCAwO1xuICB0b3VjaC1hY3Rpb246IG1hbmlwdWxhdGlvbjtcbmA7XG5cbmNvbnN0IFBsYWNlaG9sZGVyID0gc3R5bGVkKEJhc2VDb250YWluZXIpYFxuICB0cmFuc2Zvcm06IHRyYW5zbGF0ZTNkKHZhcigtLXR4LCAwKSwgdmFyKC0tdHksIDApLCAwKSBzY2FsZVgodmFyKC0tc3gsIDEpKSBzY2FsZVkodmFyKC0tc3ksIDEpKTtcbiAgYmFja2dyb3VuZC1jb2xvcjogJHtwcm9wcyA9PiBwcm9wcy50aGVtZS5jb2xvcnMuZ3JleVsxMF19O1xuYDtcblxuY29uc3QgRHJhZ2dpbmcgPSBzdHlsZWQoQmFzZUNvbnRhaW5lcilgXG4gIGJhY2tncm91bmQtY29sb3I6ICR7cHJvcHMgPT4gcHJvcHMudGhlbWUuY29sb3JzLndoaXRlfTtcbiAgYm94LXNoYWRvdzogJHtiYXNlVGhlbWUuc2hhZG93cy5tZWRpdW19O1xuICBwb2ludGVyLWV2ZW50czogbm9uZTtcbmA7XG5cbmNvbnN0IENvbnRhaW5lciA9IHN0eWxlZChCYXNlQ29udGFpbmVyKWBcbiAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCh2YXIoLS10eCwgMCksIHZhcigtLXR5LCAwKSwgMCkgc2NhbGVYKHZhcigtLXN4LCAxKSkgc2NhbGVZKHZhcigtLXN5LCAxKSk7XG5cbiAgOmhvdmVyIHtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3Byb3BzID0+IHByb3BzLnRoZW1lLmNvbG9ycy5ncmV5WzEwXX07XG4gIH1cblxuICA6OmFmdGVyIHtcbiAgICBjb250ZW50OiAnJztcbiAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgZGlzcGxheTogbm9uZTtcbiAgICB3aWR0aDogMTAwJTtcbiAgICBoZWlnaHQ6IDJweDtcbiAgICBsZWZ0OiAwO1xuICAgIGJhY2tncm91bmQtY29sb3I6ICR7cHJvcHMgPT4gcHJvcHMudGhlbWUuY29sb3JzLmFjY2VudFs5MF19O1xuICB9XG5cbiAgJltkYXRhLWlzLWFib3ZlXTo6YWZ0ZXIge1xuICAgIGRpc3BsYXk6IGJsb2NrO1xuICAgIHRvcDogMXB4O1xuICB9XG5cbiAgJltkYXRhLWlzLWJlbG93XTo6YWZ0ZXIge1xuICAgIGRpc3BsYXk6IGJsb2NrO1xuICAgIGJvdHRvbTogMDtcbiAgfVxuXG4gICZbZGF0YS1pcy1maXhlZF1bZGF0YS1pcy1hYm92ZV06Zmlyc3Qtb2YtdHlwZTo6YWZ0ZXIge1xuICAgIHdpZHRoOiBjYWxjKDEwMCUgLSAxMHB4KTtcbiAgICB0b3A6IDJweDtcbiAgICBsZWZ0OiA1cHg7XG4gIH1cblxuICAmW2RhdGEtaXMtZml4ZWRdW2RhdGEtaXMtYmVsb3ddOmxhc3Qtb2YtdHlwZTo6YWZ0ZXIge1xuICAgIHdpZHRoOiBjYWxjKDEwMCUgLSAxMHB4KTtcbiAgICBib3R0b206IDFweDtcbiAgICBsZWZ0OiA1cHg7XG4gIH1cblxuICAmW2RhdGEtaXMtc2VhcmNoXSB7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogJHtwcm9wcyA9PiBwcm9wcy50aGVtZS5jb2xvcnMuYWNjZW50WzEwXX07XG4gIH1cbmA7XG5cbnR5cGUgQXJlYUl0ZW1Qcm9wcyA9IHtcbiAgaWQ6IENvbHVtbkl0ZW1JZDtcbiAgaXRlbTogQ29sdW1uSXRlbTtcbiAgaXNBY3RpdmU6IGJvb2xlYW47XG4gIGlzQWJvdmU6IGJvb2xlYW47XG4gIGlzQmVsb3c6IGJvb2xlYW47XG4gIGlzU2VhcmNoOiBib29sZWFuO1xufTtcblxuZXhwb3J0IGNvbnN0IEFyZWFJdGVtOiBSZWFjdC5GQzxBcmVhSXRlbVByb3BzPiA9ICh7aWQsIGl0ZW0sIGlzQWN0aXZlLCBpc0Fib3ZlLCBpc0JlbG93LCBpc1NlYXJjaH0pID0+IHtcbiAgY29uc3Qge3NldE5vZGVSZWYsIHNldEFjdGl2YXRvck5vZGVSZWYsIGxpc3RlbmVycywgdHJhbnNmb3JtLCB0cmFuc2l0aW9ufSA9IHVzZVNvcnRhYmxlKHtpZH0pO1xuXG4gIGlmIChpc0FjdGl2ZSkge1xuICAgIHJldHVybiA8UGxhY2Vob2xkZXIgcmVmPXtzZXROb2RlUmVmfSAvPjtcbiAgfVxuXG4gIGNvbnN0IHN0eWxlOiBDU1NQcm9wZXJ0aWVzID0ge3RyYW5zaXRpb259O1xuXG4gIGlmICh0cmFuc2Zvcm0pIHtcbiAgICBzdHlsZVsnLS10eCddID0gYCR7TWF0aC5yb3VuZCh0cmFuc2Zvcm0ueCl9cHhgO1xuICAgIHN0eWxlWyctLXR5J10gPSBgJHtNYXRoLnJvdW5kKHRyYW5zZm9ybS55KX1weGA7XG4gICAgc3R5bGVbJy0tc3gnXSA9IGAke3RyYW5zZm9ybS5zY2FsZVh9YDtcbiAgICBzdHlsZVsnLS1zeSddID0gYCR7dHJhbnNmb3JtLnNjYWxlWX1gO1xuICB9XG5cbiAgcmV0dXJuIChcbiAgICA8Q29udGFpbmVyXG4gICAgICByZWY9e3NldE5vZGVSZWZ9XG4gICAgICBzdHlsZT17c3R5bGV9XG4gICAgICBkYXRhLWlzLWZpeGVkPXtpdGVtLmFyZWEgIT09IENvbHVtbkFyZWEuRGVmYXVsdCB8fCB1bmRlZmluZWR9XG4gICAgICBkYXRhLWlzLWFib3ZlPXtpc0Fib3ZlIHx8IHVuZGVmaW5lZH1cbiAgICAgIGRhdGEtaXMtYmVsb3c9e2lzQmVsb3cgfHwgdW5kZWZpbmVkfVxuICAgICAgZGF0YS1pcy1zZWFyY2g9e2lzU2VhcmNoIHx8IHVuZGVmaW5lZH1cbiAgICA+XG4gICAgICA8SXRlbUNvbnRlbnQgaGFuZGxlUmVmPXtzZXRBY3RpdmF0b3JOb2RlUmVmfSBsaXN0ZW5lcnM9e2xpc3RlbmVyc30gaXRlbT17aXRlbX0gLz5cbiAgICA8L0NvbnRhaW5lcj5cbiAgKTtcbn07XG5cbmV4cG9ydCBjb25zdCBBY3RpdmVJdGVtT3ZlcmxheTogUmVhY3QuRkM8e2l0ZW0/OiBDb2x1bW5JdGVtfT4gPSAoe2l0ZW19KSA9PiB7XG4gIGNvbnN0IGNoaWxkID0gIWl0ZW0gPyBudWxsIDogKFxuICAgIDxEcmFnZ2luZz5cbiAgICAgIDxJdGVtQ29udGVudCBpdGVtPXtpdGVtfSAvPlxuICAgIDwvRHJhZ2dpbmc+XG4gICk7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBpZiAoIWl0ZW0pIHtcbiAgICAgIHJldHVybjtcbiAgICB9XG5cbiAgICB3aW5kb3cuZG9jdW1lbnQuYm9keS5zdHlsZS5jdXJzb3IgPSAnZ3JhYmJpbmcnO1xuXG4gICAgcmV0dXJuICgpID0+IHtcbiAgICAgIHdpbmRvdy5kb2N1bWVudC5ib2R5LnN0eWxlLmN1cnNvciA9ICcnO1xuICAgIH07XG4gIH0sIFtpdGVtXSk7XG5cbiAgcmV0dXJuIDxEcmFnT3ZlcmxheT57Y2hpbGR9PC9EcmFnT3ZlcmxheT47XG59O1xuIl19 */")), H = /* @__PURE__ */ Z(G, process.env.NODE_ENV === "production" ? {
+})("background-color:", (c) => c.theme.colors.white, ";box-shadow:", Y.shadows.medium, ";pointer-events:none;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3NhZHlrb3ZzZC9qb2luLXg1L3BhY2thZ2VzL2RhdGEtZ3JpZC1zZXR0aW5ncy9zcmMvQXJlYUl0ZW0vQXJlYUl0ZW0udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQStCc0MiLCJmaWxlIjoiL2hvbWUvc2FkeWtvdnNkL2pvaW4teDUvcGFja2FnZXMvZGF0YS1ncmlkLXNldHRpbmdzL3NyYy9BcmVhSXRlbS9BcmVhSXRlbS50c3giLCJzb3VyY2VzQ29udGVudCI6WyIndXNlIGNsaWVudCc7XG5cbmltcG9ydCB7dXNlRWZmZWN0fSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQge0RyYWdPdmVybGF5fSBmcm9tICdAZG5kLWtpdC9jb3JlJztcbmltcG9ydCB7dXNlU29ydGFibGV9IGZyb20gJ0BkbmQta2l0L3NvcnRhYmxlJztcblxuaW1wb3J0IGJhc2VUaGVtZSBmcm9tICdAam9pbi14NS9yZWFjdC10aGVtZSc7XG5cbmltcG9ydCB7Q29sdW1uQXJlYX0gZnJvbSAnLi4vdHlwZXMnO1xuXG5pbXBvcnQge0l0ZW1Db250ZW50fSBmcm9tICcuL0l0ZW1Db250ZW50JztcblxuaW1wb3J0IHR5cGUge0NTU1Byb3BlcnRpZXN9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB0eXBlIHtDb2x1bW5JdGVtLCBDb2x1bW5JdGVtSWR9IGZyb20gJy4uL3R5cGVzJztcblxuY29uc3QgQmFzZUNvbnRhaW5lciA9IHN0eWxlZC5kaXZgXG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgaGVpZ2h0OiAzMnB4O1xuICBwYWRkaW5nOiA0cHg7XG4gIGJvcmRlci1yYWRpdXM6IDRweDtcbiAgdHJhbnNmb3JtLW9yaWdpbjogMCAwO1xuICB0b3VjaC1hY3Rpb246IG1hbmlwdWxhdGlvbjtcbmA7XG5cbmNvbnN0IFBsYWNlaG9sZGVyID0gc3R5bGVkKEJhc2VDb250YWluZXIpYFxuICB0cmFuc2Zvcm06IHRyYW5zbGF0ZTNkKHZhcigtLXR4LCAwKSwgdmFyKC0tdHksIDApLCAwKSBzY2FsZVgodmFyKC0tc3gsIDEpKSBzY2FsZVkodmFyKC0tc3ksIDEpKTtcbiAgYmFja2dyb3VuZC1jb2xvcjogJHtwcm9wcyA9PiBwcm9wcy50aGVtZS5jb2xvcnMuZ3JleVsxMF19O1xuYDtcblxuY29uc3QgRHJhZ2dpbmcgPSBzdHlsZWQoQmFzZUNvbnRhaW5lcilgXG4gIGJhY2tncm91bmQtY29sb3I6ICR7cHJvcHMgPT4gcHJvcHMudGhlbWUuY29sb3JzLndoaXRlfTtcbiAgYm94LXNoYWRvdzogJHtiYXNlVGhlbWUuc2hhZG93cy5tZWRpdW19O1xuICBwb2ludGVyLWV2ZW50czogbm9uZTtcbmA7XG5cbmNvbnN0IENvbnRhaW5lciA9IHN0eWxlZChCYXNlQ29udGFpbmVyKWBcbiAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCh2YXIoLS10eCwgMCksIHZhcigtLXR5LCAwKSwgMCkgc2NhbGVYKHZhcigtLXN4LCAxKSkgc2NhbGVZKHZhcigtLXN5LCAxKSk7XG5cbiAgOmhvdmVyIHtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3Byb3BzID0+IHByb3BzLnRoZW1lLmNvbG9ycy5ncmV5WzEwXX07XG4gIH1cblxuICA6OmFmdGVyIHtcbiAgICBjb250ZW50OiAnJztcbiAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgZGlzcGxheTogbm9uZTtcbiAgICB3aWR0aDogMTAwJTtcbiAgICBoZWlnaHQ6IDJweDtcbiAgICBsZWZ0OiAwO1xuICAgIGJhY2tncm91bmQtY29sb3I6ICR7cHJvcHMgPT4gcHJvcHMudGhlbWUuY29sb3JzLmFjY2VudFs5MF19O1xuICB9XG5cbiAgJltkYXRhLWlzLWFib3ZlXTo6YWZ0ZXIge1xuICAgIGRpc3BsYXk6IGJsb2NrO1xuICAgIHRvcDogMXB4O1xuICB9XG5cbiAgJltkYXRhLWlzLWJlbG93XTo6YWZ0ZXIge1xuICAgIGRpc3BsYXk6IGJsb2NrO1xuICAgIGJvdHRvbTogMDtcbiAgfVxuXG4gICZbZGF0YS1pcy1maXhlZF1bZGF0YS1pcy1hYm92ZV06Zmlyc3Qtb2YtdHlwZTo6YWZ0ZXIge1xuICAgIHdpZHRoOiBjYWxjKDEwMCUgLSAxMHB4KTtcbiAgICB0b3A6IDJweDtcbiAgICBsZWZ0OiA1cHg7XG4gIH1cblxuICAmW2RhdGEtaXMtZml4ZWRdW2RhdGEtaXMtYmVsb3ddOmxhc3Qtb2YtdHlwZTo6YWZ0ZXIge1xuICAgIHdpZHRoOiBjYWxjKDEwMCUgLSAxMHB4KTtcbiAgICBib3R0b206IDFweDtcbiAgICBsZWZ0OiA1cHg7XG4gIH1cblxuICAmW2RhdGEtaXMtc2VhcmNoXSB7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogJHtwcm9wcyA9PiBwcm9wcy50aGVtZS5jb2xvcnMuYWNjZW50WzEwXX07XG4gIH1cbmA7XG5cbnR5cGUgQXJlYUl0ZW1Qcm9wcyA9IHtcbiAgaWQ6IENvbHVtbkl0ZW1JZDtcbiAgaXRlbTogQ29sdW1uSXRlbTtcbiAgaXNBY3RpdmU6IGJvb2xlYW47XG4gIGlzQWJvdmU6IGJvb2xlYW47XG4gIGlzQmVsb3c6IGJvb2xlYW47XG4gIGlzU2VhcmNoOiBib29sZWFuO1xufTtcblxuZXhwb3J0IGNvbnN0IEFyZWFJdGVtOiBSZWFjdC5GQzxBcmVhSXRlbVByb3BzPiA9ICh7aWQsIGl0ZW0sIGlzQWN0aXZlLCBpc0Fib3ZlLCBpc0JlbG93LCBpc1NlYXJjaH0pID0+IHtcbiAgY29uc3Qge3NldE5vZGVSZWYsIHNldEFjdGl2YXRvck5vZGVSZWYsIGxpc3RlbmVycywgdHJhbnNmb3JtLCB0cmFuc2l0aW9ufSA9IHVzZVNvcnRhYmxlKHtpZH0pO1xuXG4gIGlmIChpc0FjdGl2ZSkge1xuICAgIHJldHVybiA8UGxhY2Vob2xkZXIgcmVmPXtzZXROb2RlUmVmfSAvPjtcbiAgfVxuXG4gIGNvbnN0IHN0eWxlOiBDU1NQcm9wZXJ0aWVzID0ge3RyYW5zaXRpb259O1xuXG4gIGlmICh0cmFuc2Zvcm0pIHtcbiAgICBzdHlsZVsnLS10eCddID0gYCR7TWF0aC5yb3VuZCh0cmFuc2Zvcm0ueCl9cHhgO1xuICAgIHN0eWxlWyctLXR5J10gPSBgJHtNYXRoLnJvdW5kKHRyYW5zZm9ybS55KX1weGA7XG4gICAgc3R5bGVbJy0tc3gnXSA9IGAke3RyYW5zZm9ybS5zY2FsZVh9YDtcbiAgICBzdHlsZVsnLS1zeSddID0gYCR7dHJhbnNmb3JtLnNjYWxlWX1gO1xuICB9XG5cbiAgcmV0dXJuIChcbiAgICA8Q29udGFpbmVyXG4gICAgICByZWY9e3NldE5vZGVSZWZ9XG4gICAgICBzdHlsZT17c3R5bGV9XG4gICAgICBkYXRhLWlzLWZpeGVkPXtpdGVtLmFyZWEgIT09IENvbHVtbkFyZWEuRGVmYXVsdCB8fCB1bmRlZmluZWR9XG4gICAgICBkYXRhLWlzLWFib3ZlPXtpc0Fib3ZlIHx8IHVuZGVmaW5lZH1cbiAgICAgIGRhdGEtaXMtYmVsb3c9e2lzQmVsb3cgfHwgdW5kZWZpbmVkfVxuICAgICAgZGF0YS1pcy1zZWFyY2g9e2lzU2VhcmNoIHx8IHVuZGVmaW5lZH1cbiAgICA+XG4gICAgICA8SXRlbUNvbnRlbnQgaGFuZGxlUmVmPXtzZXRBY3RpdmF0b3JOb2RlUmVmfSBsaXN0ZW5lcnM9e2xpc3RlbmVyc30gaXRlbT17aXRlbX0gLz5cbiAgICA8L0NvbnRhaW5lcj5cbiAgKTtcbn07XG5cbmV4cG9ydCBjb25zdCBBY3RpdmVJdGVtT3ZlcmxheTogUmVhY3QuRkM8e2l0ZW0/OiBDb2x1bW5JdGVtfT4gPSAoe2l0ZW19KSA9PiB7XG4gIGNvbnN0IGNoaWxkID0gIWl0ZW0gPyBudWxsIDogKFxuICAgIDxEcmFnZ2luZz5cbiAgICAgIDxJdGVtQ29udGVudCBpdGVtPXtpdGVtfSAvPlxuICAgIDwvRHJhZ2dpbmc+XG4gICk7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBpZiAoIWl0ZW0pIHtcbiAgICAgIHJldHVybjtcbiAgICB9XG5cbiAgICB3aW5kb3cuZG9jdW1lbnQuYm9keS5zdHlsZS5jdXJzb3IgPSAnZ3JhYmJpbmcnO1xuXG4gICAgcmV0dXJuICgpID0+IHtcbiAgICAgIHdpbmRvdy5kb2N1bWVudC5ib2R5LnN0eWxlLmN1cnNvciA9ICcnO1xuICAgIH07XG4gIH0sIFtpdGVtXSk7XG5cbiAgcmV0dXJuIDxEcmFnT3ZlcmxheT57Y2hpbGR9PC9EcmFnT3ZlcmxheT47XG59O1xuIl19 */")), H = /* @__PURE__ */ Z(G, process.env.NODE_ENV === "production" ? {
   target: "e1ghuuz90"
 } : {
   target: "e1ghuuz90",
@@ -51,7 +51,7 @@ const G = /* @__PURE__ */ Z("div", process.env.NODE_ENV === "production" ? {
     listeners: A,
     transform: I,
     transition: u
-  } = e({
+  } = x({
     id: c
   });
   if (m)
@@ -59,7 +59,7 @@ const G = /* @__PURE__ */ Z("div", process.env.NODE_ENV === "production" ? {
   const g = {
     transition: u
   };
-  return I && (g["--tx"] = `${Math.round(I.x)}px`, g["--ty"] = `${Math.round(I.y)}px`, g["--sx"] = `${I.scaleX}`, g["--sy"] = `${I.scaleY}`), /* @__PURE__ */ b(H, { ref: t, style: g, "data-is-fixed": l.area !== Y.Default || void 0, "data-is-above": d || void 0, "data-is-below": X || void 0, "data-is-search": C || void 0, children: /* @__PURE__ */ b(W, { handleRef: i, listeners: A, item: l }) });
+  return I && (g["--tx"] = `${Math.round(I.x)}px`, g["--ty"] = `${Math.round(I.y)}px`, g["--sx"] = `${I.scaleX}`, g["--sy"] = `${I.scaleY}`), /* @__PURE__ */ b(H, { ref: t, style: g, "data-is-fixed": l.area !== B.Default || void 0, "data-is-above": d || void 0, "data-is-below": X || void 0, "data-is-search": C || void 0, children: /* @__PURE__ */ b(W, { handleRef: i, listeners: A, item: l }) });
 }, L = ({
   item: c
 }) => {

package/dist/AreaItem/AreaItem.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"AreaItem.es.js","sources":["../../src/AreaItem/AreaItem.tsx"],"sourcesContent":["'use client';\n\nimport {useEffect} from 'react';\nimport styled from '@emotion/styled';\nimport {DragOverlay} from '@dnd-kit/core';\nimport {useSortable} from '@dnd-kit/sortable';\n\nimport baseTheme from '@join-x5/react-theme';\n\nimport {ColumnArea} from '../types';\n\nimport {ItemContent} from './ItemContent';\n\nimport type {CSSProperties} from 'react';\nimport type {ColumnItem, ColumnItemId} from '../types';\n\nconst BaseContainer = styled.div`\n  position: relative;\n  box-sizing: border-box;\n  height: 32px;\n  padding: 4px;\n  border-radius: 4px;\n  transform-origin: 0 0;\n  touch-action: manipulation;\n`;\n\nconst Placeholder = styled(BaseContainer)`\n  transform: translate3d(var(--tx, 0), var(--ty, 0), 0) scaleX(var(--sx, 1)) scaleY(var(--sy, 1));\n  background-color: ${props => props.theme.colors.grey[10]};\n`;\n\nconst Dragging = styled(BaseContainer)`\n  background-color: ${props => props.theme.colors.white};\n  box-shadow: ${baseTheme.shadows.medium};\n  pointer-events: none;\n`;\n\nconst Container = styled(BaseContainer)`\n  transform: translate3d(var(--tx, 0), var(--ty, 0), 0) scaleX(var(--sx, 1)) scaleY(var(--sy, 1));\n\n  :hover {\n    background-color: ${props => props.theme.colors.grey[10]};\n  }\n\n  ::after {\n    content: '';\n    position: absolute;\n    display: none;\n    width: 100%;\n    height: 2px;\n    left: 0;\n    background-color: ${props => props.theme.colors.accent[90]};\n  }\n\n  &[data-is-above]::after {\n    display: block;\n    top: 1px;\n  }\n\n  &[data-is-below]::after {\n    display: block;\n    bottom: 0;\n  }\n\n  &[data-is-fixed][data-is-above]:first-of-type::after {\n    width: calc(100% - 10px);\n    top: 2px;\n    left: 5px;\n  }\n\n  &[data-is-fixed][data-is-below]:last-of-type::after {\n    width: calc(100% - 10px);\n    bottom: 1px;\n    left: 5px;\n  }\n\n  &[data-is-search] {\n    background-color: ${props => props.theme.colors.accent[10]};\n  }\n`;\n\ntype AreaItemProps = {\n  id: ColumnItemId;\n  item: ColumnItem;\n  isActive: boolean;\n  isAbove: boolean;\n  isBelow: boolean;\n  isSearch: boolean;\n};\n\nexport const AreaItem: React.FC<AreaItemProps> = ({id, item, isActive, isAbove, isBelow, isSearch}) => {\n  const {setNodeRef, setActivatorNodeRef, listeners, transform, transition} = useSortable({id});\n\n  if (isActive) {\n    return <Placeholder ref={setNodeRef} />;\n  }\n\n  const style: CSSProperties = {transition};\n\n  if (transform) {\n    style['--tx'] = `${Math.round(transform.x)}px`;\n    style['--ty'] = `${Math.round(transform.y)}px`;\n    style['--sx'] = `${transform.scaleX}`;\n    style['--sy'] = `${transform.scaleY}`;\n  }\n\n  return (\n    <Container\n      ref={setNodeRef}\n      style={style}\n      data-is-fixed={item.area !== ColumnArea.Default || undefined}\n      data-is-above={isAbove || undefined}\n      data-is-below={isBelow || undefined}\n      data-is-search={isSearch || undefined}\n    >\n      <ItemContent handleRef={setActivatorNodeRef} listeners={listeners} item={item} />\n    </Container>\n  );\n};\n\nexport const ActiveItemOverlay: React.FC<{item?: ColumnItem}> = ({item}) => {\n  const child = !item ? null : (\n    <Dragging>\n      <ItemContent item={item} />\n    </Dragging>\n  );\n\n  useEffect(() => {\n    if (!item) {\n      return;\n    }\n\n    window.document.body.style.cursor = 'grabbing';\n\n    return () => {\n      window.document.body.style.cursor = '';\n    };\n  }, [item]);\n\n  return <DragOverlay>{child}</DragOverlay>;\n};\n"],"names":["id","item","isActive","isAbove","isBelow","setNodeRef","setActivatorNodeRef","listeners","transform","transition","child","useEffect","document"],"mappings":";;;;;;;;;AAAa;AAAA;AAAA;AAgBb;AAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUqB;AAAA;AAAA;AAAA;AAAA;AAKH;AAAA;AAAA;AAAA;AAAA;AAMC;AAAA;AAAA;AAAA;AAAA;AAqDY;AAACA;AAAIC;AAAMC;AAAUC;AAASC;AAAiB;AACzF;AAAA;AAACC;AAAYC;AAAqBC;AAAWC;AAAWC;AAA0B;AAACT;AAEzF;AACS;AAGT;AAA6B;AAACS;AAE9B;AAmBF;AAEiE;AAAK;AAC9DC;AAMNC;AACE;AAIOC;AAGEA;AAA6B;AACtC;AAIJ;;;;;"}
+{"version":3,"file":"AreaItem.es.js","sources":["../../src/AreaItem/AreaItem.tsx"],"sourcesContent":["'use client';\n\nimport {useEffect} from 'react';\nimport styled from '@emotion/styled';\nimport {DragOverlay} from '@dnd-kit/core';\nimport {useSortable} from '@dnd-kit/sortable';\n\nimport baseTheme from '@join-x5/react-theme';\n\nimport {ColumnArea} from '../types';\n\nimport {ItemContent} from './ItemContent';\n\nimport type {CSSProperties} from 'react';\nimport type {ColumnItem, ColumnItemId} from '../types';\n\nconst BaseContainer = styled.div`\n  position: relative;\n  box-sizing: border-box;\n  height: 32px;\n  padding: 4px;\n  border-radius: 4px;\n  transform-origin: 0 0;\n  touch-action: manipulation;\n`;\n\nconst Placeholder = styled(BaseContainer)`\n  transform: translate3d(var(--tx, 0), var(--ty, 0), 0) scaleX(var(--sx, 1)) scaleY(var(--sy, 1));\n  background-color: ${props => props.theme.colors.grey[10]};\n`;\n\nconst Dragging = styled(BaseContainer)`\n  background-color: ${props => props.theme.colors.white};\n  box-shadow: ${baseTheme.shadows.medium};\n  pointer-events: none;\n`;\n\nconst Container = styled(BaseContainer)`\n  transform: translate3d(var(--tx, 0), var(--ty, 0), 0) scaleX(var(--sx, 1)) scaleY(var(--sy, 1));\n\n  :hover {\n    background-color: ${props => props.theme.colors.grey[10]};\n  }\n\n  ::after {\n    content: '';\n    position: absolute;\n    display: none;\n    width: 100%;\n    height: 2px;\n    left: 0;\n    background-color: ${props => props.theme.colors.accent[90]};\n  }\n\n  &[data-is-above]::after {\n    display: block;\n    top: 1px;\n  }\n\n  &[data-is-below]::after {\n    display: block;\n    bottom: 0;\n  }\n\n  &[data-is-fixed][data-is-above]:first-of-type::after {\n    width: calc(100% - 10px);\n    top: 2px;\n    left: 5px;\n  }\n\n  &[data-is-fixed][data-is-below]:last-of-type::after {\n    width: calc(100% - 10px);\n    bottom: 1px;\n    left: 5px;\n  }\n\n  &[data-is-search] {\n    background-color: ${props => props.theme.colors.accent[10]};\n  }\n`;\n\ntype AreaItemProps = {\n  id: ColumnItemId;\n  item: ColumnItem;\n  isActive: boolean;\n  isAbove: boolean;\n  isBelow: boolean;\n  isSearch: boolean;\n};\n\nexport const AreaItem: React.FC<AreaItemProps> = ({id, item, isActive, isAbove, isBelow, isSearch}) => {\n  const {setNodeRef, setActivatorNodeRef, listeners, transform, transition} = useSortable({id});\n\n  if (isActive) {\n    return <Placeholder ref={setNodeRef} />;\n  }\n\n  const style: CSSProperties = {transition};\n\n  if (transform) {\n    style['--tx'] = `${Math.round(transform.x)}px`;\n    style['--ty'] = `${Math.round(transform.y)}px`;\n    style['--sx'] = `${transform.scaleX}`;\n    style['--sy'] = `${transform.scaleY}`;\n  }\n\n  return (\n    <Container\n      ref={setNodeRef}\n      style={style}\n      data-is-fixed={item.area !== ColumnArea.Default || undefined}\n      data-is-above={isAbove || undefined}\n      data-is-below={isBelow || undefined}\n      data-is-search={isSearch || undefined}\n    >\n      <ItemContent handleRef={setActivatorNodeRef} listeners={listeners} item={item} />\n    </Container>\n  );\n};\n\nexport const ActiveItemOverlay: React.FC<{item?: ColumnItem}> = ({item}) => {\n  const child = !item ? null : (\n    <Dragging>\n      <ItemContent item={item} />\n    </Dragging>\n  );\n\n  useEffect(() => {\n    if (!item) {\n      return;\n    }\n\n    window.document.body.style.cursor = 'grabbing';\n\n    return () => {\n      window.document.body.style.cursor = '';\n    };\n  }, [item]);\n\n  return <DragOverlay>{child}</DragOverlay>;\n};\n"],"names":["id","item","isActive","isAbove","isBelow","setNodeRef","setActivatorNodeRef","listeners","transform","transition","useEffect","window"],"mappings":";;;;;;;;;AAAa;AAAA;AAAA;AAgBb;AAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUqB;AAAA;AAAA;AAAA;AAAA;AAKH;AAAA;AAAA;AAAA;AAAA;AAMC;AAAA;AAAA;AAAA;AAAA;AAqDY;AAACA;AAAIC;AAAMC;AAAUC;AAASC;AAAiB;AAC/F;AAAM;AAACC;AAAYC;AAAqBC;AAAWC;AAAWC;AAA0B;AAACT;AAEzF;AACE;AAGF;AAA6B;AAACS;AAE9B;AAmBF;AAEiE;AAAK;AACpE;AAMAC;AACE;AAIAC;AAGEA;AAAoC;AACtC;AAIJ;;;;;"}

package/dist/AreaItem/Content.es.js

@@ -1,10 +1,10 @@
 "use client";
 import { jsx as b } from "@emotion/react/jsx-runtime";
-import d from "@emotion/styled/base";
-import { useState as I, useRef as G, useEffect as X } from "react";
-import { Placement as n } from "@join-x5/react-theme";
-import { Tooltip as o } from "@join-x5/react";
-const m = /* @__PURE__ */ d("div", process.env.NODE_ENV === "production" ? {
+import I from "@emotion/styled/base";
+import { useState as d, useRef as G, useEffect as o } from "react";
+import { Placement as X } from "@join-x5/react-theme";
+import { Tooltip as m } from "@join-x5/react";
+const n = /* @__PURE__ */ I("div", process.env.NODE_ENV === "production" ? {
   target: "ebxzgij0"
 } : {
   target: "ebxzgij0",
@@ -16,10 +16,10 @@ const m = /* @__PURE__ */ d("div", process.env.NODE_ENV === "production" ? {
     isVisible: Z
   }
 }) => {
-  const [e, g] = I(!1), t = G(null), i = e ? void 0 : !1;
-  return X(() => {
+  const [e, g] = d(!1), t = G(null), i = e ? void 0 : !1;
+  return o(() => {
     t.current && g(t.current.scrollWidth > t.current.clientWidth);
-  }, []), /* @__PURE__ */ b(o, { isPortal: !0, placement: n.Top, isOpen: i, content: c, children: /* @__PURE__ */ b(m, { ref: t, isVisible: Z, children: l }) });
+  }, []), /* @__PURE__ */ b(m, { isPortal: !0, placement: X.Top, isOpen: i, content: c, children: /* @__PURE__ */ b(n, { ref: t, isVisible: Z, children: l }) });
 };
 export {
   a as Content

package/dist/AreaItem/Content.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Content.es.js","sources":["../../src/AreaItem/Content.tsx"],"sourcesContent":["'use client';\n\nimport {useEffect, useRef, useState} from 'react';\nimport styled from '@emotion/styled';\n\nimport {Placement} from '@join-x5/react-theme';\nimport {Tooltip} from '@join-x5/react';\n\nimport type {ColumnItem} from '../types';\n\nconst Container = styled.div<Pick<ColumnItem, 'isVisible'>>`\n  flex-grow: 1;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  user-select: none;\n  color: ${props => props.theme.colors.grey[props.isVisible ? 100 : 40]};\n\n  ${props => props.theme.typography.p1}\n`;\ntype ContentProps = {item: ColumnItem};\n\nexport const Content: React.FC<ContentProps> = ({item: {name, title, isVisible}}) => {\n  const [isOverflown, setIsOverflown] = useState<boolean>(false);\n  const ref = useRef<HTMLInputElement>(null);\n\n  const noTooltip = !isOverflown ? false : undefined;\n\n  useEffect(() => {\n    if (!ref.current) {\n      return;\n    }\n\n    setIsOverflown(ref.current.scrollWidth > ref.current.clientWidth);\n  }, []);\n\n  return (\n    <Tooltip isPortal placement={Placement.Top} isOpen={noTooltip} content={name}>\n      <Container ref={ref} isVisible={isVisible}>\n        {title}\n      </Container>\n    </Tooltip>\n  );\n};\n"],"names":["name","title","isVisible","useEffect"],"mappings":";;;;;;AAUA;AAAe;AAAA;AAAA;AAAA;AAAA;AAYiC;AAAO;AAACA;AAAMC;AAAOC;AAAU;AAC7E;AAKAC;AACM;AAI4D;AAUpE;;;;"}
+{"version":3,"file":"Content.es.js","sources":["../../src/AreaItem/Content.tsx"],"sourcesContent":["'use client';\n\nimport {useEffect, useRef, useState} from 'react';\nimport styled from '@emotion/styled';\n\nimport {Placement} from '@join-x5/react-theme';\nimport {Tooltip} from '@join-x5/react';\n\nimport type {ColumnItem} from '../types';\n\nconst Container = styled.div<Pick<ColumnItem, 'isVisible'>>`\n  flex-grow: 1;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  user-select: none;\n  color: ${props => props.theme.colors.grey[props.isVisible ? 100 : 40]};\n\n  ${props => props.theme.typography.p1}\n`;\ntype ContentProps = {item: ColumnItem};\n\nexport const Content: React.FC<ContentProps> = ({item: {name, title, isVisible}}) => {\n  const [isOverflown, setIsOverflown] = useState<boolean>(false);\n  const ref = useRef<HTMLInputElement>(null);\n\n  const noTooltip = !isOverflown ? false : undefined;\n\n  useEffect(() => {\n    if (!ref.current) {\n      return;\n    }\n\n    setIsOverflown(ref.current.scrollWidth > ref.current.clientWidth);\n  }, []);\n\n  return (\n    <Tooltip isPortal placement={Placement.Top} isOpen={noTooltip} content={name}>\n      <Container ref={ref} isVisible={isVisible}>\n        {title}\n      </Container>\n    </Tooltip>\n  );\n};\n"],"names":["name","title","isVisible","useEffect"],"mappings":";;;;;;AAUA;AAAe;AAAA;AAAA;AAAA;AAAA;AAYiC;AAAO;AAACA;AAAMC;AAAOC;AAAU;AAC7E;AAKAC;AACE;AAIgE;AAUpE;;;;"}

package/dist/AreaItem/Handle.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Handle.es.js","sources":["../../src/AreaItem/Handle.tsx"],"sourcesContent":["import styled from '@emotion/styled';\n\nimport {Placement, SizeTokenValue} from '@join-x5/react-theme';\nimport {DragIndicatorVerticalIcon} from '@join-x5/react-icons';\nimport {Tooltip} from '@join-x5/react';\n\nimport type {ColumnItem} from '../types';\n\ntype HandleProps = Pick<ColumnItem, 'isLocked'>;\n\nconst HandleContainer = styled.div<HandleProps>`\n  flex-grow: 0;\n  flex-shrink: 0;\n  width: 16px;\n  height: 16px;\n\n  color: ${props => props.theme.colors.grey[props.isLocked ? 40 : 60]};\n`;\n\nexport const Handle: React.FC<HandleProps> = ({isLocked}) => {\n  const child = (\n    <HandleContainer isLocked={isLocked}>\n      <DragIndicatorVerticalIcon size={SizeTokenValue.Small} />\n    </HandleContainer>\n  );\n\n  if (!isLocked) {\n    return child;\n  }\n\n  return (\n    <Tooltip placement={Placement.Top} content=\"Нельзя открепить столбец\">\n      {child}\n    </Tooltip>\n  );\n};\n"],"names":["HandleContainer","_styled","process","env","NODE_ENV","target","label","props","theme","colors","grey","isLocked","Handle","child","DragIndicatorVerticalIcon","SizeTokenValue","Small","Tooltip","Placement","Top"],"mappings":";;;;;AAUA,MAAMA,IAAe,gBAAAC,EAAA,OAAAC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAMVC,EAAAA,2DAAAA,CAAAA,MAASA,EAAMC,MAAMC,OAAOC,KAAKH,EAAMI,WAAW,KAAK,EAAE,GAAC,OAAAT,QAAAC,IAAAC,aACpE,eAAA,KAAA,kmDAAA,GAEYQ,IAAgCA,CAAC;AAAA,EAACD,UAAAA;AAAQ,MAAM;AACrDE,QAAAA,sBACHb,GAAgB,EAAA,UAAAW,GACf,4BAACG,GAA0B,EAAA,MAAMC,EAAeC,MAAAA,CAAM,EACxD,CAAA;AAGF,SAAKL,sBAKFM,GAAQ,EAAA,WAAWC,EAAUC,KAAK,SAAQ,4BACxCN,UACHA,GAAA,IANOA;AAQX;"}
+{"version":3,"file":"Handle.es.js","sources":["../../src/AreaItem/Handle.tsx"],"sourcesContent":["import styled from '@emotion/styled';\n\nimport {Placement, SizeTokenValue} from '@join-x5/react-theme';\nimport {DragIndicatorVerticalIcon} from '@join-x5/react-icons';\nimport {Tooltip} from '@join-x5/react';\n\nimport type {ColumnItem} from '../types';\n\ntype HandleProps = Pick<ColumnItem, 'isLocked'>;\n\nconst HandleContainer = styled.div<HandleProps>`\n  flex-grow: 0;\n  flex-shrink: 0;\n  width: 16px;\n  height: 16px;\n\n  color: ${props => props.theme.colors.grey[props.isLocked ? 40 : 60]};\n`;\n\nexport const Handle: React.FC<HandleProps> = ({isLocked}) => {\n  const child = (\n    <HandleContainer isLocked={isLocked}>\n      <DragIndicatorVerticalIcon size={SizeTokenValue.Small} />\n    </HandleContainer>\n  );\n\n  if (!isLocked) {\n    return child;\n  }\n\n  return (\n    <Tooltip placement={Placement.Top} content=\"Нельзя открепить столбец\">\n      {child}\n    </Tooltip>\n  );\n};\n"],"names":["HandleContainer","_styled","process","env","NODE_ENV","target","label","props","theme","colors","grey","isLocked","Handle","child","DragIndicatorVerticalIcon","SizeTokenValue","Small","Tooltip","Placement","Top"],"mappings":";;;;;AAUA,MAAMA,IAAeC,gBAAAA,EAAA,OAAAC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAA,2DAMVC,CAAAA,MAASA,EAAMC,MAAMC,OAAOC,KAAKH,EAAMI,WAAW,KAAK,EAAE,GAAC,OAAAT,QAAAC,IAAAC,aAAA,eAAA,KAAA,kmDAAA,GAGxDQ,IAAgCA,CAAC;AAAA,EAACD,UAAAA;AAAQ,MAAM;AAC3D,QAAME,sBACHb,GAAA,EAAgB,UAAAW,GACf,4BAACG,GAAA,EAA0B,MAAMC,EAAeC,MAAAA,CAAM,EAAA,CACxD;AAGF,SAAKL,sBAKFM,GAAA,EAAQ,WAAWC,EAAUC,KAAK,SAAQ,4BACxCN,UAAAA,GACH,IANOA;AAQX;"}

package/dist/AreaItem/ItemContent.es.js

@@ -1,5 +1,5 @@
 import { jsxs as e, jsx as l } from "@emotion/react/jsx-runtime";
-import G from "@emotion/styled/base";
+import d from "@emotion/styled/base";
 import { memo as o } from "react";
 import { Content as I } from "./Content.es.js";
 import { Handle as a } from "./Handle.es.js";
@@ -7,7 +7,7 @@ import { Visibility as i } from "./Visibility.es.js";
 function u() {
   return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
 }
-const b = /* @__PURE__ */ G("div", process.env.NODE_ENV === "production" ? {
+const b = /* @__PURE__ */ d("div", process.env.NODE_ENV === "production" ? {
   target: "e14wup640"
 } : {
   target: "e14wup640",
@@ -24,7 +24,7 @@ const b = /* @__PURE__ */ G("div", process.env.NODE_ENV === "production" ? {
   listeners: n,
   handleRef: c
 }) => {
-  const d = t.isLocked ? void 0 : {
+  const G = t.isLocked ? void 0 : {
     ...n,
     style: {
       cursor: "pointer"
@@ -32,7 +32,7 @@ const b = /* @__PURE__ */ G("div", process.env.NODE_ENV === "production" ? {
   };
   return /* @__PURE__ */ e(b, { children: [
     /* @__PURE__ */ l(i, { item: t }),
-    /* @__PURE__ */ e(b, { ref: c, ...d, children: [
+    /* @__PURE__ */ e(b, { ref: c, ...G, children: [
       /* @__PURE__ */ l(I, { item: t }),
       /* @__PURE__ */ l(a, { isLocked: t.isLocked })
     ] })

package/dist/AreaItem/ItemContent.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"ItemContent.es.js","sources":["../../src/AreaItem/ItemContent.tsx"],"sourcesContent":["import {memo} from 'react';\nimport styled from '@emotion/styled';\n\nimport {Content} from './Content';\nimport {Handle} from './Handle';\nimport {Visibility} from './Visibility';\n\nimport type {RefCallback} from 'react';\nimport type {DraggableSyntheticListeners} from '@dnd-kit/core';\nimport type {ColumnItem} from '../types';\n\nconst Container = styled.div`\n  display: flex;\n  flex-grow: 1;\n  overflow: hidden;\n  align-items: center;\n  justify-content: space-between;\n  gap: 4px;\n`;\n\ntype ItemContentProps = {\n  item: ColumnItem;\n  listeners?: DraggableSyntheticListeners;\n  handleRef?: RefCallback<HTMLDivElement>;\n};\n\nexport const ItemContent = memo<ItemContentProps>(({item, listeners, handleRef}) => {\n  const handleProps = item.isLocked ? undefined : {...listeners, style: {cursor: 'pointer'}};\n\n  return (\n    <Container>\n      <Visibility item={item} />\n      <Container ref={handleRef} {...handleProps}>\n        <Content item={item} />\n        <Handle isLocked={item.isLocked} />\n      </Container>\n    </Container>\n  );\n});\n"],"names":["Container","_styled","process","env","NODE_ENV","target","label","name","styles","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","ItemContent","memo","item","listeners","handleRef","handleProps","isLocked","undefined","style","cursor","jsx","Visibility","jsxs","Content","Handle"],"mappings":";;;;;;;;;AAWA,MAAMA,IAAS,gBAAAC,EAAA,OAAAC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAAJ,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAG,MAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAD,MAAA;AAAA,EAAAC,QAAA;AAAA,EAAAC,UAAAC;AAAA,CAOd,GAQYC,IAAcC,EAAuB,CAAC;AAAA,EAACC,MAAAA;AAAAA,EAAMC,WAAAA;AAAAA,EAAWC,WAAAA;AAAS,MAAM;AAC5EC,QAAAA,IAAcH,EAAKI,WAAWC,SAAY;AAAA,IAAC,GAAGJ;AAAAA,IAAWK,OAAO;AAAA,MAACC,QAAQ;AAAA,IAAA;AAAA,EAAU;AAEzF,2BACGpB,GACC,EAAA,UAAA;AAAA,IAAA,gBAAAqB,EAACC,KAAW,MAAAT,GAAW;AAAA,IACtB,gBAAAU,EAAAvB,GAAA,EAAU,KAAKe,GAAeC,GAAAA,GAC7B,UAAA;AAAA,MAAA,gBAAAK,EAACG,KAAQ,MAAAX,GAAW;AAAA,MACnB,gBAAAQ,EAAAI,GAAA,EAAO,UAAUZ,EAAKI,SAAS,CAAA;AAAA,IAAA,EAClC,CAAA;AAAA,EAAA,GACF;AAEJ,CAAC;"}
+{"version":3,"file":"ItemContent.es.js","sources":["../../src/AreaItem/ItemContent.tsx"],"sourcesContent":["import {memo} from 'react';\nimport styled from '@emotion/styled';\n\nimport {Content} from './Content';\nimport {Handle} from './Handle';\nimport {Visibility} from './Visibility';\n\nimport type {RefCallback} from 'react';\nimport type {DraggableSyntheticListeners} from '@dnd-kit/core';\nimport type {ColumnItem} from '../types';\n\nconst Container = styled.div`\n  display: flex;\n  flex-grow: 1;\n  overflow: hidden;\n  align-items: center;\n  justify-content: space-between;\n  gap: 4px;\n`;\n\ntype ItemContentProps = {\n  item: ColumnItem;\n  listeners?: DraggableSyntheticListeners;\n  handleRef?: RefCallback<HTMLDivElement>;\n};\n\nexport const ItemContent = memo<ItemContentProps>(({item, listeners, handleRef}) => {\n  const handleProps = item.isLocked ? undefined : {...listeners, style: {cursor: 'pointer'}};\n\n  return (\n    <Container>\n      <Visibility item={item} />\n      <Container ref={handleRef} {...handleProps}>\n        <Content item={item} />\n        <Handle isLocked={item.isLocked} />\n      </Container>\n    </Container>\n  );\n});\n"],"names":["Container","_styled","process","env","NODE_ENV","target","label","name","styles","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","ItemContent","memo","item","listeners","handleRef","handleProps","isLocked","undefined","style","cursor","jsx","Visibility","jsxs","Content","Handle"],"mappings":";;;;;;;;;AAWA,MAAMA,IAASC,gBAAAA,EAAA,OAAAC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAAJ,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAG,MAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAD,MAAA;AAAA,EAAAC,QAAA;AAAA,EAAAC,UAAAC;AAAA,CAAA,GAeFC,IAAcC,EAAuB,CAAC;AAAA,EAACC,MAAAA;AAAAA,EAAMC,WAAAA;AAAAA,EAAWC,WAAAA;AAAS,MAAM;AAClF,QAAMC,IAAcH,EAAKI,WAAWC,SAAY;AAAA,IAAC,GAAGJ;AAAAA,IAAWK,OAAO;AAAA,MAACC,QAAQ;AAAA,IAAA;AAAA,EAAS;AAExF,2BACGpB,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAqB,EAACC,KAAW,MAAAT,GAAW;AAAA,IACvB,gBAAAU,EAACvB,GAAA,EAAU,KAAKe,GAAW,GAAIC,GAC7B,UAAA;AAAA,MAAA,gBAAAK,EAACG,KAAQ,MAAAX,GAAW;AAAA,MACpB,gBAAAQ,EAACI,GAAA,EAAO,UAAUZ,EAAKI,SAAAA,CAAS;AAAA,IAAA,EAAA,CAClC;AAAA,EAAA,GACF;AAEJ,CAAC;"}

package/dist/AreaItem/Visibility.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Visibility.es.js","sources":["../../src/AreaItem/Visibility.tsx"],"sourcesContent":["'use client';\n\nimport {useContext} from 'react';\n\nimport {Placement, SizeTokenValue} from '@join-x5/react-theme';\nimport {VisibilityOnIcon, VisibilityOffIcon} from '@join-x5/react-icons';\nimport {ButtonVariant, IconButton} from '@join-x5/react';\n\nimport {DataGridSettingsContext} from '../DataGridSettingsContext';\n\nimport type {MouseEventHandler} from 'react';\nimport type {ColumnItem} from '../types';\n\nexport const Visibility: React.FC<{item: ColumnItem}> = props => {\n  const {id, isVisible, isAlwaysVisible} = props.item;\n\n  const {items, setItems} = useContext(DataGridSettingsContext);\n\n  const toggleVisible: MouseEventHandler = () => {\n    if (isAlwaysVisible) {\n      return;\n    }\n\n    setItems(items.map(item => (item.id === id ? {...item, isVisible: !isVisible} : item)));\n  };\n\n  const Icon = isVisible ? VisibilityOnIcon : VisibilityOffIcon;\n\n  const tooltip = {\n    placement: Placement.Top,\n    content: isAlwaysVisible ? 'Нельзя скрыть' : isVisible ? 'Скрыть столбец' : 'Показать столбец',\n  };\n\n  return (\n    <IconButton\n      tooltip={tooltip}\n      size={SizeTokenValue.XSmall}\n      variant={ButtonVariant.InnerInput}\n      disabled={isAlwaysVisible}\n      onClick={toggleVisible}\n    >\n      <Icon size={SizeTokenValue.Small} />\n    </IconButton>\n  );\n};\n"],"names":["id","isVisible","isAlwaysVisible","items","setItems","item","Top"],"mappings":";;;;;;;AAaO;AACC;AAAA;AAACA;AAAIC;AAAWC;AAEhB;AAACC;AAAOC;AAGZ;AAI6C;AAAIC;AAAkBJ;AAAmB;AAKxE;AACOK;AACuD;AAG9E;AAWF;;;;"}
+{"version":3,"file":"Visibility.es.js","sources":["../../src/AreaItem/Visibility.tsx"],"sourcesContent":["'use client';\n\nimport {useContext} from 'react';\n\nimport {Placement, SizeTokenValue} from '@join-x5/react-theme';\nimport {VisibilityOnIcon, VisibilityOffIcon} from '@join-x5/react-icons';\nimport {ButtonVariant, IconButton} from '@join-x5/react';\n\nimport {DataGridSettingsContext} from '../DataGridSettingsContext';\n\nimport type {MouseEventHandler} from 'react';\nimport type {ColumnItem} from '../types';\n\nexport const Visibility: React.FC<{item: ColumnItem}> = props => {\n  const {id, isVisible, isAlwaysVisible} = props.item;\n\n  const {items, setItems} = useContext(DataGridSettingsContext);\n\n  const toggleVisible: MouseEventHandler = () => {\n    if (isAlwaysVisible) {\n      return;\n    }\n\n    setItems(items.map(item => (item.id === id ? {...item, isVisible: !isVisible} : item)));\n  };\n\n  const Icon = isVisible ? VisibilityOnIcon : VisibilityOffIcon;\n\n  const tooltip = {\n    placement: Placement.Top,\n    content: isAlwaysVisible ? 'Нельзя скрыть' : isVisible ? 'Скрыть столбец' : 'Показать столбец',\n  };\n\n  return (\n    <IconButton\n      tooltip={tooltip}\n      size={SizeTokenValue.XSmall}\n      variant={ButtonVariant.InnerInput}\n      disabled={isAlwaysVisible}\n      onClick={toggleVisible}\n    >\n      <Icon size={SizeTokenValue.Small} />\n    </IconButton>\n  );\n};\n"],"names":["id","isVisible","isAlwaysVisible","items","setItems","item","Top"],"mappings":";;;;;;;AAaO;AACL;AAAM;AAACA;AAAIC;AAAWC;AAEhB;AAACC;AAAOC;AAGZ;AAI6C;AAAIC;AAAkBJ;AAAmB;AAKxE;AACOK;AACuD;AAG9E;AAWF;;;;"}

package/dist/AreaItem/index.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es.js","sources":["../../src/AreaItem/index.tsx"],"sourcesContent":["'use client';\n\nimport {useContext} from 'react';\nimport {SortableContext} from '@dnd-kit/sortable';\n\nimport {DataGridSettingsContext} from '../DataGridSettingsContext';\n\nimport {AreaItem} from './AreaItem';\n\nimport type {ReactNode} from 'react';\nimport type {ColumnItem, ColumnItemId, DataGridSettingsActiveItem} from '../types';\n\ntype GetItem = {\n  id: ColumnItemId;\n  item: ColumnItem;\n  activeItem: DataGridSettingsActiveItem | undefined;\n  isSearch: boolean;\n};\n\nconst getItem = ({id, item, isSearch, activeItem}: GetItem) => {\n  const props = {\n    id,\n    item,\n    isSearch,\n    isActive: false,\n    isAbove: false,\n    isBelow: false,\n  };\n\n  if (activeItem) {\n    props.isActive = item.id === activeItem.id;\n\n    if (item.id === activeItem.overId) {\n      props.isAbove = !!activeItem.isAbove;\n      props.isBelow = !activeItem.isAbove;\n    }\n  }\n\n  return <AreaItem key={item.id} {...props} />;\n};\n\ntype ItemsProps = {\n  itemIds: ColumnItemId[];\n  activeItem?: DataGridSettingsActiveItem;\n};\n\nexport const Items: React.FC<ItemsProps> = ({itemIds, activeItem}) => {\n  const {itemsById, searchItems} = useContext(DataGridSettingsContext);\n\n  const child: ReactNode[] = [];\n  const newItemIds: ColumnItemId[] = [];\n\n  for (const itemId of itemIds) {\n    const item = itemsById.get(itemId);\n    if (!item) {\n      continue;\n    }\n\n    const newId = itemId === activeItem?.id ? `${itemId}Placeholder` : itemId;\n    const isSearch = searchItems.includes(itemId);\n\n    newItemIds.push(newId);\n    child.push(getItem({item, activeItem, isSearch, id: newId}));\n  }\n\n  return <SortableContext items={newItemIds}>{child}</SortableContext>;\n};\n\nexport {ActiveItemOverlay} from './AreaItem';\n"],"names":["id","item","isSearch","itemIds","itemsById","searchItems","newItemIds","activeItem","newId"],"mappings":";;;;;;;AAmBA;AAAiB;AAACA;AAAIC;AAAMC;AAA6B;AACvD;AAAc;AACZF;AACAC;AACAC;AACU;AACD;AACA;AAGX;AAUF;AAO4C;AAACC;AAAmB;AACxD;AAAA;AAACC;AAAWC;AAKlB;AACQJ;AACN;AACE;AAGF;AAGAK;AACmB;AAACL;AAAMM;AAAYL;AAAcM;AAAO;AAG7D;AACF;;;;;"}
+{"version":3,"file":"index.es.js","sources":["../../src/AreaItem/index.tsx"],"sourcesContent":["'use client';\n\nimport {useContext} from 'react';\nimport {SortableContext} from '@dnd-kit/sortable';\n\nimport {DataGridSettingsContext} from '../DataGridSettingsContext';\n\nimport {AreaItem} from './AreaItem';\n\nimport type {ReactNode} from 'react';\nimport type {ColumnItem, ColumnItemId, DataGridSettingsActiveItem} from '../types';\n\ntype GetItem = {\n  id: ColumnItemId;\n  item: ColumnItem;\n  activeItem: DataGridSettingsActiveItem | undefined;\n  isSearch: boolean;\n};\n\nconst getItem = ({id, item, isSearch, activeItem}: GetItem) => {\n  const props = {\n    id,\n    item,\n    isSearch,\n    isActive: false,\n    isAbove: false,\n    isBelow: false,\n  };\n\n  if (activeItem) {\n    props.isActive = item.id === activeItem.id;\n\n    if (item.id === activeItem.overId) {\n      props.isAbove = !!activeItem.isAbove;\n      props.isBelow = !activeItem.isAbove;\n    }\n  }\n\n  return <AreaItem key={item.id} {...props} />;\n};\n\ntype ItemsProps = {\n  itemIds: ColumnItemId[];\n  activeItem?: DataGridSettingsActiveItem;\n};\n\nexport const Items: React.FC<ItemsProps> = ({itemIds, activeItem}) => {\n  const {itemsById, searchItems} = useContext(DataGridSettingsContext);\n\n  const child: ReactNode[] = [];\n  const newItemIds: ColumnItemId[] = [];\n\n  for (const itemId of itemIds) {\n    const item = itemsById.get(itemId);\n    if (!item) {\n      continue;\n    }\n\n    const newId = itemId === activeItem?.id ? `${itemId}Placeholder` : itemId;\n    const isSearch = searchItems.includes(itemId);\n\n    newItemIds.push(newId);\n    child.push(getItem({item, activeItem, isSearch, id: newId}));\n  }\n\n  return <SortableContext items={newItemIds}>{child}</SortableContext>;\n};\n\nexport {ActiveItemOverlay} from './AreaItem';\n"],"names":["id","item","isSearch","itemIds","itemsById","searchItems","newItemIds","activeItem","newId"],"mappings":";;;;;;;AAmBA;AAAiB;AAACA;AAAIC;AAAMC;AAA6B;AACvD;AAAc;AACZF;AACAC;AACAC;AACU;AACD;AACA;AAGX;AAUF;AAO4C;AAACC;AAAmB;AAC9D;AAAM;AAACC;AAAWC;AAKlB;AACE;AACA;AACE;AAGF;AAGAC;AACmB;AAACL;AAAMM;AAAYL;AAAcM;AAAO;AAG7D;AACF;;;;;"}

package/dist/Columns/hook.es.js

@@ -1,28 +1,28 @@
 "use client";
-import { useSensors as g, useSensor as m, MouseSensor as D, TouchSensor as l } from "@dnd-kit/core";
+import { useSensors as g, useSensor as c, MouseSensor as D, TouchSensor as l } from "@dnd-kit/core";
 import { useContext as A, useState as C } from "react";
 import { useUpdateEffect as b } from "@join-x5/react-theme";
 import { DataGridSettingsContext as x } from "../DataGridSettingsContext.es.js";
 import { collisionDetection as h, moveItem as E, moveOver as M } from "./utils.es.js";
 const T = () => {
   const {
-    columns: c,
-    items: r,
-    setItems: u,
-    itemsById: o,
-    searchItems: f
-  } = A(x), [e, t] = C(), a = g(m(D), m(l)), v = () => {
-    t(void 0);
-  }, I = (n) => {
-    const s = o.get(n.active.id);
-    t(s);
+    columns: v,
+    items: n,
+    setItems: d,
+    itemsById: s,
+    searchItems: u
+  } = A(x), [o, e] = C(), a = g(c(D), c(l)), f = () => {
+    e(void 0);
+  }, I = (t) => {
+    const r = s.get(t.active.id);
+    e(r);
   }, p = ({
-    over: n,
-    active: s
+    over: t,
+    active: r
   }) => {
-    if (!e || !n) {
-      e && e.overId !== void 0 && t({
-        ...e,
+    if (!o || !t) {
+      o && o.overId !== void 0 && e({
+        ...o,
         overId: void 0,
         isAbove: void 0
       });
@@ -30,34 +30,34 @@ const T = () => {
     }
     const {
       overId: i,
-      isAbove: d
-    } = M(o, s, n);
-    e.overId === i && e.isAbove === d || t({
-      ...e,
+      isAbove: m
+    } = M(s, r, t);
+    o.overId === i && o.isAbove === m || e({
+      ...o,
       overId: i,
-      isAbove: d
+      isAbove: m
     });
   }, S = ({
-    over: n
+    over: t
   }) => {
-    if (!e || !n) {
-      e && t(void 0);
+    if (!o || !t) {
+      o && e(void 0);
       return;
     }
-    t(void 0), u(E(r, e, n));
+    e(void 0), d(E(n, o, t));
   };
   return b(() => {
-    t(void 0);
-  }, [r]), {
-    columns: c,
-    itemsById: o,
-    searchItems: f,
-    activeItem: e,
+    e(void 0);
+  }, [n]), {
+    columns: v,
+    itemsById: s,
+    searchItems: u,
+    activeItem: o,
     sensors: a,
     onDragStart: I,
     onDragMove: p,
     onDragEnd: S,
-    onDragCancel: v,
+    onDragCancel: f,
     collisionDetection: h
   };
 };

package/dist/Columns/hook.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"hook.es.js","sources":["../../src/Columns/hook.ts"],"sourcesContent":["'use client';\n\nimport {MouseSensor, TouchSensor, useSensor, useSensors} from '@dnd-kit/core';\n\nimport {useContext, useState} from 'react';\n\nimport {useUpdateEffect} from '@join-x5/react-theme';\n\nimport {DataGridSettingsContext} from '../DataGridSettingsContext';\n\nimport {moveItem, moveOver, collisionDetection} from './utils';\n\nimport type {DndContextProps} from '@dnd-kit/core';\nimport type {DataGridSettingsActiveItem} from '../types';\n\nexport const useColumns = () => {\n  const {columns, items, setItems, itemsById, searchItems} = useContext(DataGridSettingsContext);\n  const [activeItem, setActiveItem] = useState<DataGridSettingsActiveItem>();\n  const sensors = useSensors(useSensor(MouseSensor), useSensor(TouchSensor));\n\n  const onDragCancel = () => {\n    setActiveItem(undefined);\n  };\n\n  const onDragStart: DndContextProps['onDragStart'] = args => {\n    const newActiveItem = itemsById.get(args.active.id);\n    setActiveItem(newActiveItem);\n  };\n\n  const onDragMove: DndContextProps['onDragMove'] = ({over, active}) => {\n    if (!activeItem || !over) {\n      if (activeItem && activeItem.overId !== undefined) {\n        setActiveItem({...activeItem, overId: undefined, isAbove: undefined});\n      }\n\n      return;\n    }\n\n    const {overId, isAbove} = moveOver(itemsById, active, over);\n\n    if (activeItem.overId === overId && activeItem.isAbove === isAbove) {\n      return;\n    }\n\n    setActiveItem({...activeItem, overId, isAbove});\n  };\n\n  const onDragEnd: DndContextProps['onDragEnd'] = ({over}) => {\n    if (!activeItem || !over) {\n      if (activeItem) {\n        setActiveItem(undefined);\n      }\n\n      return;\n    }\n\n    setActiveItem(undefined);\n    setItems(moveItem(items, activeItem, over));\n  };\n\n  useUpdateEffect(() => {\n    setActiveItem(undefined);\n  }, [items]);\n\n  return {\n    columns,\n    itemsById,\n    searchItems,\n    activeItem,\n    sensors,\n    onDragStart,\n    onDragMove,\n    onDragEnd,\n    onDragCancel,\n    collisionDetection,\n  };\n};\n"],"names":["columns","items","setItems","itemsById","searchItems","setActiveItem","over","active","activeItem","undefined","overId","isAbove","useUpdateEffect","sensors","onDragStart","onDragMove","onDragEnd","onDragCancel","collisionDetection"],"mappings":";;;;;;AAeO;AACC;AAAA;AAACA;AAASC;AAAOC;AAAUC;AAAWC;AAK1CC;AAAuB;AAIvB;AACAA;AAA2B;AAGsB;AAACC;AAAMC;AACpD;AACEC;AACY;AAAIA;AAAoBC;AAAoBA;AAG5D;AAAA;AAGI;AAAA;AAACC;AAAQC;AAEf;AAIc;AAAIH;AAAYE;AAAQC;AAAQ;AAGC;AAACL;AAC5C;AACF;AAIA;AAAA;AAGFD;AAC0C;AAG5CO;AACEP;AAAuB;AAGlB;AACLL;AACAG;AACAC;AACAI;AACAK;AACAC;AACAC;AACAC;AACAC;AACAC;AAEJ;;;;"}
+{"version":3,"file":"hook.es.js","sources":["../../src/Columns/hook.ts"],"sourcesContent":["'use client';\n\nimport {MouseSensor, TouchSensor, useSensor, useSensors} from '@dnd-kit/core';\n\nimport {useContext, useState} from 'react';\n\nimport {useUpdateEffect} from '@join-x5/react-theme';\n\nimport {DataGridSettingsContext} from '../DataGridSettingsContext';\n\nimport {moveItem, moveOver, collisionDetection} from './utils';\n\nimport type {DndContextProps} from '@dnd-kit/core';\nimport type {DataGridSettingsActiveItem} from '../types';\n\nexport const useColumns = () => {\n  const {columns, items, setItems, itemsById, searchItems} = useContext(DataGridSettingsContext);\n  const [activeItem, setActiveItem] = useState<DataGridSettingsActiveItem>();\n  const sensors = useSensors(useSensor(MouseSensor), useSensor(TouchSensor));\n\n  const onDragCancel = () => {\n    setActiveItem(undefined);\n  };\n\n  const onDragStart: DndContextProps['onDragStart'] = args => {\n    const newActiveItem = itemsById.get(args.active.id);\n    setActiveItem(newActiveItem);\n  };\n\n  const onDragMove: DndContextProps['onDragMove'] = ({over, active}) => {\n    if (!activeItem || !over) {\n      if (activeItem && activeItem.overId !== undefined) {\n        setActiveItem({...activeItem, overId: undefined, isAbove: undefined});\n      }\n\n      return;\n    }\n\n    const {overId, isAbove} = moveOver(itemsById, active, over);\n\n    if (activeItem.overId === overId && activeItem.isAbove === isAbove) {\n      return;\n    }\n\n    setActiveItem({...activeItem, overId, isAbove});\n  };\n\n  const onDragEnd: DndContextProps['onDragEnd'] = ({over}) => {\n    if (!activeItem || !over) {\n      if (activeItem) {\n        setActiveItem(undefined);\n      }\n\n      return;\n    }\n\n    setActiveItem(undefined);\n    setItems(moveItem(items, activeItem, over));\n  };\n\n  useUpdateEffect(() => {\n    setActiveItem(undefined);\n  }, [items]);\n\n  return {\n    columns,\n    itemsById,\n    searchItems,\n    activeItem,\n    sensors,\n    onDragStart,\n    onDragMove,\n    onDragEnd,\n    onDragCancel,\n    collisionDetection,\n  };\n};\n"],"names":["columns","items","setItems","itemsById","searchItems","setActiveItem","over","active","activeItem","undefined","overId","isAbove","useUpdateEffect","sensors","onDragStart","onDragMove","onDragEnd","onDragCancel","collisionDetection"],"mappings":";;;;;;AAeO;AACL;AAAM;AAACA;AAASC;AAAOC;AAAUC;AAAWC;AAK1CC;AAAuB;AAIvB;AACAA;AAA2B;AAGsB;AAACC;AAAMC;AACxD;AACE;AACgB;AAAIC;AAAoBC;AAAoBA;AAG5D;AAAA;AAGF;AAAM;AAACC;AAAQC;AAEf;AAIc;AAAIH;AAAYE;AAAQC;AAAQ;AAGC;AAACL;AAChD;AACE;AAIA;AAAA;AAGFD;AAC0C;AAG5CO;AACEP;AAAuB;AAGlB;AACLL;AACAG;AACAC;AACAI;AACAK;AACAC;AACAC;AACAC;AACAC;AACAC;AAEJ;;;;"}

package/dist/Columns/index.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es.js","sources":["../../src/Columns/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport {DndContext} from '@dnd-kit/core';\n\nimport {ModalContent as BaseModalContent} from '@join-x5/react';\n\nimport {getArea} from '../Area';\nimport {ActiveItemOverlay} from '../AreaItem';\nimport {Search} from '../Search';\n\nimport {useColumns} from './hook';\n\nimport type {ReactNode} from 'react';\n\nconst ModalContent = styled(BaseModalContent)`\n  padding: 0 24px 16px;\n`;\n\nconst Container = styled.div`\n  display: flex;\n  margin-left: -32px;\n\n  > div {\n    display: flex;\n    position: relative;\n    flex-direction: column;\n    gap: 4px;\n    box-sizing: border-box;\n    padding-left: 32px;\n\n    ::after {\n      content: '';\n      position: absolute;\n      width: 0;\n      height: 100%;\n      top: 0;\n      left: 16px;\n      border-left: 1px solid ${props => props.theme.colors.grey[10]};\n    }\n\n    :first-of-type::after {\n      display: none;\n    }\n  }\n`;\n\nexport const Columns: React.FC = () => {\n  const {columns, itemsById, searchItems, activeItem, ...rest} = useColumns();\n\n  const child = columns.map((column, columnIndex) => {\n    const areas: ReactNode[] = Array.from(column).map(([area, itemIds]) =>\n      getArea({columnIndex, area, itemIds, itemsById, searchItems, activeItem})\n    );\n\n    const width = `calc(${100 / columns.length}%)`;\n\n    return (\n      <div key={columnIndex} style={{width}}>\n        {areas}\n      </div>\n    );\n  });\n\n  return (\n    <ModalContent noBorderScroll>\n      <Search />\n      <DndContext id=\"DataGridSettings\" {...rest}>\n        <Container>{child}</Container>\n        <ActiveItemOverlay item={activeItem} />\n      </DndContext>\n    </ModalContent>\n  );\n};\n"],"names":["ModalContent","BaseModalContent","process","env","NODE_ENV","target","label","name","styles","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","Container","_styled","props","theme","colors","grey","Columns","columns","itemsById","searchItems","activeItem","rest","useColumns","child","map","column","columnIndex","areas","Array","from","area","itemIds","getArea","width","length","jsx","jsxs","Search","DndContext","ActiveItemOverlay"],"mappings":";;;;;;;;;;;;;;AAaA,MAAMA,IAAsBC,gBAAAA,EAAAA,GAAgBC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAACJ,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAG,MAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAD,MAAA;AAAA,EAAAC,QAAA;AAAA,EAAAC,UAAAC;AAAA,CAE5C,GAEKC,IAAS,gBAAAC,EAAA,OAAAV,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAA,4OAmBgBO,CAASA,MAAAA,EAAMC,MAAMC,OAAOC,KAAK,EAAE,GAACd,6CAAAA,QAAAC,IAAAC,aAOlE,eAAA,KAAA,8mFAAA,GAEYa,IAAoBA,MAAM;AAC/B,QAAA;AAAA,IAACC,SAAAA;AAAAA,IAASC,WAAAA;AAAAA,IAAWC,aAAAA;AAAAA,IAAaC,YAAAA;AAAAA,IAAY,GAAGC;AAAAA,MAAQC,EAAW,GAEpEC,IAAQN,EAAQO,IAAI,CAACC,GAAQC,MAAgB;AAC3CC,UAAAA,IAAqBC,MAAMC,KAAKJ,CAAM,EAAED,IAAI,CAAC,CAACM,GAAMC,CAAO,MAC/DC,EAAQ;AAAA,MAACN,aAAAA;AAAAA,MAAaI,MAAAA;AAAAA,MAAMC,SAAAA;AAAAA,MAASb,WAAAA;AAAAA,MAAwBE,YAAAA;AAAAA,IAAAA,CAAW,CAC1E,GAEMa,IAAQ,QAAQ,MAAMhB,EAAQiB,MAAM;AAGxC,WAAA,gBAAAC,EAAC,SAAsB,OAAO;AAAA,MAACF,OAAAA;AAAAA,IAAAA,GAC5BN,eADOD,CAEV;AAAA,EAAA,CAEH;AAGC,SAAA,gBAAAU,EAACrC,GAAa,EAAA,gBAAc,IAC1B,UAAA;AAAA,IAAA,gBAAAoC,EAACE,GAAM,EAAA;AAAA,IACN,gBAAAD,EAAAE,GAAA,EAAW,IAAG,oBAAuBjB,GAAAA,GACpC,UAAA;AAAA,MAAA,gBAAAc,EAACzB,KAAWa,UAAMA,EAAA,CAAA;AAAA,MAClB,gBAAAY,EAACI,GAAkB,EAAA,MAAMnB,EAAW,CAAA;AAAA,IAAA,EACtC,CAAA;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"index.es.js","sources":["../../src/Columns/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport {DndContext} from '@dnd-kit/core';\n\nimport {ModalContent as BaseModalContent} from '@join-x5/react';\n\nimport {getArea} from '../Area';\nimport {ActiveItemOverlay} from '../AreaItem';\nimport {Search} from '../Search';\n\nimport {useColumns} from './hook';\n\nimport type {ReactNode} from 'react';\n\nconst ModalContent = styled(BaseModalContent)`\n  padding: 0 24px 16px;\n`;\n\nconst Container = styled.div`\n  display: flex;\n  margin-left: -32px;\n\n  > div {\n    display: flex;\n    position: relative;\n    flex-direction: column;\n    gap: 4px;\n    box-sizing: border-box;\n    padding-left: 32px;\n\n    ::after {\n      content: '';\n      position: absolute;\n      width: 0;\n      height: 100%;\n      top: 0;\n      left: 16px;\n      border-left: 1px solid ${props => props.theme.colors.grey[10]};\n    }\n\n    :first-of-type::after {\n      display: none;\n    }\n  }\n`;\n\nexport const Columns: React.FC = () => {\n  const {columns, itemsById, searchItems, activeItem, ...rest} = useColumns();\n\n  const child = columns.map((column, columnIndex) => {\n    const areas: ReactNode[] = Array.from(column).map(([area, itemIds]) =>\n      getArea({columnIndex, area, itemIds, itemsById, searchItems, activeItem})\n    );\n\n    const width = `calc(${100 / columns.length}%)`;\n\n    return (\n      <div key={columnIndex} style={{width}}>\n        {areas}\n      </div>\n    );\n  });\n\n  return (\n    <ModalContent noBorderScroll>\n      <Search />\n      <DndContext id=\"DataGridSettings\" {...rest}>\n        <Container>{child}</Container>\n        <ActiveItemOverlay item={activeItem} />\n      </DndContext>\n    </ModalContent>\n  );\n};\n"],"names":["ModalContent","_styled","BaseModalContent","process","env","NODE_ENV","target","label","name","styles","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","Container","props","theme","colors","grey","Columns","columns","itemsById","searchItems","activeItem","rest","useColumns","child","map","column","columnIndex","areas","Array","from","area","itemIds","getArea","width","length","jsx","jsxs","Search","DndContext","ActiveItemOverlay"],"mappings":";;;;;;;;;;;;;;AAaA,MAAMA,IAAeC,gBAAAA,EAAOC,GAAgBC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAACJ,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAG,MAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAD,MAAA;AAAA,EAAAC,QAAA;AAAA,EAAAC,UAAAC;AAAA,CAAA,GAIvCC,IAASX,gBAAAA,EAAA,OAAAE,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAA,4OAmBgBM,CAAAA,MAASA,EAAMC,MAAMC,OAAOC,KAAK,EAAE,GAAC,6CAAAb,QAAAC,IAAAC,aAAA,eAAA,KAAA,8mFAAA,GAStDY,IAAoBA,MAAM;AACrC,QAAM;AAAA,IAACC,SAAAA;AAAAA,IAASC,WAAAA;AAAAA,IAAWC,aAAAA;AAAAA,IAAaC,YAAAA;AAAAA,IAAY,GAAGC;AAAAA,EAAAA,IAAQC,EAAAA,GAEzDC,IAAQN,EAAQO,IAAI,CAACC,GAAQC,MAAgB;AACjD,UAAMC,IAAqBC,MAAMC,KAAKJ,CAAM,EAAED,IAAI,CAAC,CAACM,GAAMC,CAAO,MAC/DC,EAAQ;AAAA,MAACN,aAAAA;AAAAA,MAAaI,MAAAA;AAAAA,MAAMC,SAAAA;AAAAA,MAASb,WAAAA;AAAAA,MAAwBE,YAAAA;AAAAA,IAAAA,CAAW,CAC1E,GAEMa,IAAQ,QAAQ,MAAMhB,EAAQiB,MAAM;AAE1C,WACE,gBAAAC,EAAC,SAAsB,OAAO;AAAA,MAACF,OAAAA;AAAAA,IAAAA,GAC5BN,eADOD,CAEV;AAAA,EAEJ,CAAC;AAED,SACE,gBAAAU,EAACrC,GAAA,EAAa,gBAAc,IAC1B,UAAA;AAAA,IAAA,gBAAAoC,EAACE,GAAA,EAAM;AAAA,IACP,gBAAAD,EAACE,GAAA,EAAW,IAAG,oBAAmB,GAAIjB,GACpC,UAAA;AAAA,MAAA,gBAAAc,EAACxB,KAAWY,UAAAA,EAAAA,CAAM;AAAA,MAClB,gBAAAY,EAACI,GAAA,EAAkB,MAAMnB,EAAAA,CAAW;AAAA,IAAA,EAAA,CACtC;AAAA,EAAA,GACF;AAEJ;"}

package/dist/Columns/utils.es.js

@@ -1,6 +1,6 @@
-import { rectIntersection as b } from "@dnd-kit/core";
+import { rectIntersection as v } from "@dnd-kit/core";
 import { ColumnArea as I } from "../types.es.js";
-const v = (a, o, n) => {
+const g = (a, o, n) => {
   var u, f;
   const c = {
     [I.Default]: 0,
@@ -51,7 +51,7 @@ const v = (a, o, n) => {
     isAbove: i
   };
 }, A = (a) => {
-  const o = b(a);
+  const o = v(a);
   if (o.length === 2)
     try {
       const n = o.filter((c) => {
@@ -66,7 +66,7 @@ const v = (a, o, n) => {
 };
 export {
   A as collisionDetection,
-  v as moveItem,
+  g as moveItem,
   x as moveOver
 };
 //# sourceMappingURL=utils.es.js.map

package/dist/Columns/utils.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.es.js","sources":["../../src/Columns/utils.ts"],"sourcesContent":["import {rectIntersection} from '@dnd-kit/core';\n\nimport {ColumnArea} from '../types';\n\nimport type {Active, CollisionDetection, Over} from '@dnd-kit/core';\nimport type {ColumnItem, DataGridSettingsActiveItem, ItemsById} from '../types';\n\nexport const moveItem = (items: ColumnItem[], active: DataGridSettingsActiveItem, over: Over): ColumnItem[] => {\n  const areaFactor = {\n    [ColumnArea.Default]: 0,\n    [ColumnArea.FixedLeft]: -1,\n    [ColumnArea.FixedRight]: 1,\n  };\n\n  let newItems = [...items]\n    .sort((a, b) => {\n      const aSort = a.sort + items.length * areaFactor[a.area];\n      const bSort = b.sort + items.length * areaFactor[b.area];\n\n      return aSort - bSort;\n    })\n    .map((item, sort) => ({...item, sort}));\n\n  const overItem = newItems.find(item => item.id === over.id);\n\n  if (!overItem) {\n    const newArea: ColumnArea | undefined = over.data?.current?.area;\n    if (newArea) {\n      newItems = newItems.map(item => (item.id === active.id ? {...item, area: newArea} : item));\n    }\n\n    return newItems;\n  }\n\n  const newSort = overItem.sort + (active.isAbove ? 0 : 1);\n\n  const [relativeItems, fixedItems] = newItems.reduce(\n    (acc, item) => {\n      acc[+item.isLocked].push(item);\n      return acc;\n    },\n    [[], []] as [ColumnItem[], ColumnItem[]]\n  );\n\n  newItems = relativeItems.map(item => {\n    if (item.id === active.id) {\n      return {...item, sort: newSort, area: overItem.area};\n    }\n\n    if (item.sort >= newSort) {\n      return {...item, sort: item.sort + 1};\n    }\n\n    return item;\n  });\n\n  newItems.sort((a, b) => a.sort - b.sort);\n\n  for (const item of fixedItems) {\n    newItems.splice(item.sort, 0, item);\n  }\n\n  return newItems.map((item, sort) => ({...item, sort}));\n};\n\nexport const moveOver = (itemsById: ItemsById, active: Active, over: Over) => {\n  const overItem = itemsById.get(over.id);\n  if (!overItem) {\n    return {overId: undefined, isAbove: undefined};\n  }\n\n  const isFirst = over.data?.current?.sortable?.index === 0;\n  const offsetTop = active.rect?.current?.translated?.top;\n\n  const isAbove = isFirst && !!offsetTop && offsetTop < over.rect?.top;\n\n  return {overId: overItem.id, isAbove};\n};\n\nexport const collisionDetection: CollisionDetection = args => {\n  const rectResult = rectIntersection(args);\n\n  if (rectResult.length === 2) {\n    try {\n      const sortables = rectResult.filter(item => !!item.data?.droppableContainer?.data?.current?.sortable);\n      if (sortables.length === 1) {\n        return sortables;\n      }\n      //eslint-disable-next-line no-empty\n    } catch {}\n  }\n\n  return rectResult;\n};\n"],"names":["moveItem","items","active","over","areaFactor","ColumnArea","Default","FixedLeft","FixedRight","newItems","sort","a","b","aSort","length","area","bSort","map","item","overItem","find","id","newArea","data","current","newSort","isAbove","relativeItems","fixedItems","reduce","acc","isLocked","push","splice","moveOver","itemsById","get","overId","undefined","isFirst","sortable","index","offsetTop","rect","translated","top","collisionDetection","args","rectResult","rectIntersection","sortables","filter","droppableContainer"],"mappings":"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"}
+{"version":3,"file":"utils.es.js","sources":["../../src/Columns/utils.ts"],"sourcesContent":["import {rectIntersection} from '@dnd-kit/core';\n\nimport {ColumnArea} from '../types';\n\nimport type {Active, CollisionDetection, Over} from '@dnd-kit/core';\nimport type {ColumnItem, DataGridSettingsActiveItem, ItemsById} from '../types';\n\nexport const moveItem = (items: ColumnItem[], active: DataGridSettingsActiveItem, over: Over): ColumnItem[] => {\n  const areaFactor = {\n    [ColumnArea.Default]: 0,\n    [ColumnArea.FixedLeft]: -1,\n    [ColumnArea.FixedRight]: 1,\n  };\n\n  let newItems = [...items]\n    .sort((a, b) => {\n      const aSort = a.sort + items.length * areaFactor[a.area];\n      const bSort = b.sort + items.length * areaFactor[b.area];\n\n      return aSort - bSort;\n    })\n    .map((item, sort) => ({...item, sort}));\n\n  const overItem = newItems.find(item => item.id === over.id);\n\n  if (!overItem) {\n    const newArea: ColumnArea | undefined = over.data?.current?.area;\n    if (newArea) {\n      newItems = newItems.map(item => (item.id === active.id ? {...item, area: newArea} : item));\n    }\n\n    return newItems;\n  }\n\n  const newSort = overItem.sort + (active.isAbove ? 0 : 1);\n\n  const [relativeItems, fixedItems] = newItems.reduce(\n    (acc, item) => {\n      acc[+item.isLocked].push(item);\n      return acc;\n    },\n    [[], []] as [ColumnItem[], ColumnItem[]]\n  );\n\n  newItems = relativeItems.map(item => {\n    if (item.id === active.id) {\n      return {...item, sort: newSort, area: overItem.area};\n    }\n\n    if (item.sort >= newSort) {\n      return {...item, sort: item.sort + 1};\n    }\n\n    return item;\n  });\n\n  newItems.sort((a, b) => a.sort - b.sort);\n\n  for (const item of fixedItems) {\n    newItems.splice(item.sort, 0, item);\n  }\n\n  return newItems.map((item, sort) => ({...item, sort}));\n};\n\nexport const moveOver = (itemsById: ItemsById, active: Active, over: Over) => {\n  const overItem = itemsById.get(over.id);\n  if (!overItem) {\n    return {overId: undefined, isAbove: undefined};\n  }\n\n  const isFirst = over.data?.current?.sortable?.index === 0;\n  const offsetTop = active.rect?.current?.translated?.top;\n\n  const isAbove = isFirst && !!offsetTop && offsetTop < over.rect?.top;\n\n  return {overId: overItem.id, isAbove};\n};\n\nexport const collisionDetection: CollisionDetection = args => {\n  const rectResult = rectIntersection(args);\n\n  if (rectResult.length === 2) {\n    try {\n      const sortables = rectResult.filter(item => !!item.data?.droppableContainer?.data?.current?.sortable);\n      if (sortables.length === 1) {\n        return sortables;\n      }\n      //eslint-disable-next-line no-empty\n    } catch {}\n  }\n\n  return rectResult;\n};\n"],"names":["moveItem","items","active","over","areaFactor","ColumnArea","Default","FixedLeft","FixedRight","newItems","sort","a","b","aSort","length","area","bSort","map","item","overItem","find","id","newArea","data","current","newSort","isAbove","relativeItems","fixedItems","reduce","acc","isLocked","push","splice","moveOver","itemsById","get","overId","undefined","isFirst","sortable","index","offsetTop","rect","translated","top","collisionDetection","args","rectResult","rectIntersection","sortables","filter","droppableContainer"],"mappings":";;AAOO,MAAMA,IAAWA,CAACC,GAAqBC,GAAoCC,MAA6B;;AAC7G,QAAMC,IAAa;AAAA,IACjB,CAACC,EAAWC,OAAO,GAAG;AAAA,IACtB,CAACD,EAAWE,SAAS,GAAG;AAAA,IACxB,CAACF,EAAWG,UAAU,GAAG;AAAA,EAAA;AAG3B,MAAIC,IAAW,CAAC,GAAGR,CAAK,EACrBS,KAAK,CAACC,GAAGC,MAAM;AACd,UAAMC,IAAQF,EAAED,OAAOT,EAAMa,SAASV,EAAWO,EAAEI,IAAI,GACjDC,IAAQJ,EAAEF,OAAOT,EAAMa,SAASV,EAAWQ,EAAEG,IAAI;AAEvD,WAAOF,IAAQG;AAAAA,EACjB,CAAC,EACAC,IAAI,CAACC,GAAMR,OAAU;AAAA,IAAC,GAAGQ;AAAAA,IAAMR,MAAAA;AAAAA,EAAAA,EAAM;AAExC,QAAMS,IAAWV,EAASW,KAAKF,OAAQA,EAAKG,OAAOlB,EAAKkB,EAAE;AAE1D,MAAI,CAACF,GAAU;AACb,UAAMG,KAAkCnB,KAAAA,IAAAA,EAAKoB,SAALpB,gBAAAA,EAAWqB,YAAXrB,gBAAAA,EAAoBY;AAC5D,WAAIO,MACFb,IAAWA,EAASQ,IAAIC,CAAAA,MAASA,EAAKG,OAAOnB,EAAOmB,KAAK;AAAA,MAAC,GAAGH;AAAAA,MAAMH,MAAMO;AAAAA,IAAAA,IAAWJ,CAAK,IAGpFT;AAAAA,EACT;AAEA,QAAMgB,IAAUN,EAAST,QAAQR,EAAOwB,UAAU,IAAI,IAEhD,CAACC,GAAeC,CAAU,IAAInB,EAASoB,OAC3C,CAACC,GAAKZ,OACJY,EAAI,CAACZ,EAAKa,QAAQ,EAAEC,KAAKd,CAAI,GACtBY,IAET,CAAC,IAAI,CAAA,CAAE,CACT;AAEArB,EAAAA,IAAWkB,EAAcV,IAAIC,CAAAA,MACvBA,EAAKG,OAAOnB,EAAOmB,KACd;AAAA,IAAC,GAAGH;AAAAA,IAAMR,MAAMe;AAAAA,IAASV,MAAMI,EAASJ;AAAAA,EAAAA,IAG7CG,EAAKR,QAAQe,IACR;AAAA,IAAC,GAAGP;AAAAA,IAAMR,MAAMQ,EAAKR,OAAO;AAAA,EAAA,IAG9BQ,CACR,GAEDT,EAASC,KAAK,CAACC,GAAGC,MAAMD,EAAED,OAAOE,EAAEF,IAAI;AAEvC,aAAWQ,KAAQU;AACjBnB,IAAAA,EAASwB,OAAOf,EAAKR,MAAM,GAAGQ,CAAI;AAGpC,SAAOT,EAASQ,IAAI,CAACC,GAAMR,OAAU;AAAA,IAAC,GAAGQ;AAAAA,IAAMR,MAAAA;AAAAA,EAAAA,EAAM;AACvD,GAEawB,IAAWA,CAACC,GAAsBjC,GAAgBC,MAAe;;AAC5E,QAAMgB,IAAWgB,EAAUC,IAAIjC,EAAKkB,EAAE;AACtC,MAAI,CAACF;AACH,WAAO;AAAA,MAACkB,QAAQC;AAAAA,MAAWZ,SAASY;AAAAA,IAAAA;AAGtC,QAAMC,MAAUpC,KAAAA,KAAAA,IAAAA,EAAKoB,SAALpB,gBAAAA,EAAWqB,YAAXrB,gBAAAA,EAAoBqC,aAApBrC,gBAAAA,EAA8BsC,WAAU,GAClDC,KAAYxC,KAAAA,KAAAA,IAAAA,EAAOyC,SAAPzC,gBAAAA,EAAasB,YAAbtB,gBAAAA,EAAsB0C,eAAtB1C,gBAAAA,EAAkC2C,KAE9CnB,IAAUa,KAAW,CAAC,CAACG,KAAaA,MAAYvC,IAAAA,EAAKwC,SAALxC,gBAAAA,EAAW0C;AAEjE,SAAO;AAAA,IAACR,QAAQlB,EAASE;AAAAA,IAAIK,SAAAA;AAAAA,EAAAA;AAC/B,GAEaoB,IAAyCC,CAAAA,MAAQ;AAC5D,QAAMC,IAAaC,EAAiBF,CAAI;AAExC,MAAIC,EAAWlC,WAAW;AACxB,QAAI;AACF,YAAMoC,IAAYF,EAAWG,OAAOjC,CAAAA,MAAAA;;AAAQ,gBAAC,GAACA,KAAAA,KAAAA,KAAAA,IAAAA,EAAKK,SAALL,gBAAAA,EAAWkC,uBAAXlC,gBAAAA,EAA+BK,SAA/BL,gBAAAA,EAAqCM,YAArCN,QAAAA,EAA8CsB;AAAAA,OAAQ;AACpG,UAAIU,EAAUpC,WAAW;AACvB,eAAOoC;AAAAA,IAGX,QAAQ;AAAA,IAAC;AAGX,SAAOF;AACT;"}

package/dist/DataGridSettings.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataGridSettings.es.js","sources":["../src/DataGridSettings.tsx"],"sourcesContent":["'use client';\n\nimport {useMemo, useState} from 'react';\n\nimport {useUpdateEffect} from '@join-x5/react-theme';\nimport {Modal, ModalHeader} from '@join-x5/react';\n\nimport {Columns} from './Columns';\nimport {Footer} from './Footer';\nimport {DataGridSettingsContext} from './DataGridSettingsContext';\nimport {getColumnsData} from './utils';\nimport {ColumnArea} from './types';\n\nimport type {ColumnItem, ColumnItemId, DataGridSettingsProps} from './types';\n\nexport const DataGridSettings: React.FC<DataGridSettingsProps> = props => {\n  const {\n    isOpen,\n\n    qa = 'datagridsettings',\n    areas = [ColumnArea.FixedLeft, ColumnArea.Default],\n\n    ...rest\n  } = props;\n\n  const [items, setItems] = useState<ColumnItem[]>(props.items);\n  const [searchItems, setSearchItems] = useState<ColumnItemId[]>([]);\n\n  const {columns, itemsById, size} = useMemo(() => getColumnsData(items, areas), [items, areas]);\n\n  const context = {...rest, columns, itemsById, areas, items, setItems, searchItems, setSearchItems, qa};\n\n  const onClose = () => props.setIsOpen(false);\n\n  useUpdateEffect(() => {\n    setItems(props.items);\n  }, [props.items]);\n\n  useUpdateEffect(() => {\n    if (!isOpen) {\n      setTimeout(() => setSearchItems([]));\n    }\n  }, [isOpen]);\n\n  const modalProps = {isOpen, onClose, qa, size};\n\n  return (\n    <Modal {...modalProps}>\n      <ModalHeader onClose={onClose}>Настройка таблицы</ModalHeader>\n      <DataGridSettingsContext.Provider value={context}>\n        <Columns />\n        <Footer />\n      </DataGridSettingsContext.Provider>\n    </Modal>\n  );\n};\n"],"names":["isOpen","rest","columns","itemsById","size","areas","items","setItems","searchItems","setSearchItems","qa","useUpdateEffect","onClose"],"mappings":";;;;;;;;;;AAeO;AACC;AAAA;AACJA;AAEK;AAC4C;AAE9CC;AAMC;AAACC;AAASC;AAAWC;AAEX;AAAIH;AAAMC;AAASC;AAAWE;AAAOC;AAAOC;AAAUC;AAAaC;AAAgBC;AAInGC;AACEJ;AAAoB;AAIpB;AACqC;AAIpB;AAACP;AAAQY;AAASF;AAAIN;AAIrC;AAAgD;AAE9C;AAAQ;AACD;AACT;AAGN;;;;"}
+{"version":3,"file":"DataGridSettings.es.js","sources":["../src/DataGridSettings.tsx"],"sourcesContent":["'use client';\n\nimport {useMemo, useState} from 'react';\n\nimport {useUpdateEffect} from '@join-x5/react-theme';\nimport {Modal, ModalHeader} from '@join-x5/react';\n\nimport {Columns} from './Columns';\nimport {Footer} from './Footer';\nimport {DataGridSettingsContext} from './DataGridSettingsContext';\nimport {getColumnsData} from './utils';\nimport {ColumnArea} from './types';\n\nimport type {ColumnItem, ColumnItemId, DataGridSettingsProps} from './types';\n\nexport const DataGridSettings: React.FC<DataGridSettingsProps> = props => {\n  const {\n    isOpen,\n\n    qa = 'datagridsettings',\n    areas = [ColumnArea.FixedLeft, ColumnArea.Default],\n\n    ...rest\n  } = props;\n\n  const [items, setItems] = useState<ColumnItem[]>(props.items);\n  const [searchItems, setSearchItems] = useState<ColumnItemId[]>([]);\n\n  const {columns, itemsById, size} = useMemo(() => getColumnsData(items, areas), [items, areas]);\n\n  const context = {...rest, columns, itemsById, areas, items, setItems, searchItems, setSearchItems, qa};\n\n  const onClose = () => props.setIsOpen(false);\n\n  useUpdateEffect(() => {\n    setItems(props.items);\n  }, [props.items]);\n\n  useUpdateEffect(() => {\n    if (!isOpen) {\n      setTimeout(() => setSearchItems([]));\n    }\n  }, [isOpen]);\n\n  const modalProps = {isOpen, onClose, qa, size};\n\n  return (\n    <Modal {...modalProps}>\n      <ModalHeader onClose={onClose}>Настройка таблицы</ModalHeader>\n      <DataGridSettingsContext.Provider value={context}>\n        <Columns />\n        <Footer />\n      </DataGridSettingsContext.Provider>\n    </Modal>\n  );\n};\n"],"names":["isOpen","rest","columns","itemsById","size","areas","items","setItems","searchItems","setSearchItems","qa","useUpdateEffect","onClose"],"mappings":";;;;;;;;;;AAeO;AACL;AAAM;AACJA;AAEK;AAC4C;AAE9CC;AAMC;AAACC;AAASC;AAAWC;AAEX;AAAIH;AAAMC;AAASC;AAAWE;AAAOC;AAAOC;AAAUC;AAAaC;AAAgBC;AAInGC;AACEJ;AAAoB;AAIpB;AACqC;AAIpB;AAACP;AAAQY;AAASF;AAAIN;AAIrC;AAAgD;AAE9C;AAAQ;AACD;AACT;AAGN;;;;"}

package/dist/DataGridSettingsContext.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataGridSettingsContext.es.js","sources":["../src/DataGridSettingsContext.ts"],"sourcesContent":["'use client';\n\nimport {createContext} from 'react';\n\nimport type {ColumnArea, ColumnItem, ColumnData, DataGridSettingsProps, ItemsById, ColumnItemId} from './types';\nimport type {RequiredQA} from '@join-x5/react-theme';\n\ntype DataGridSettingsContextProps = {\n  columns: ColumnData[];\n  itemsById: ItemsById;\n  areas: ColumnArea[];\n\n  setItems: (newItems: ColumnItem[]) => void;\n\n  searchItems: ColumnItemId[];\n  setSearchItems: (newSearchItems: ColumnItemId[]) => void;\n} & Pick<DataGridSettingsProps, 'setIsOpen' | 'items' | 'defaultItems' | 'onSave'> &\n  RequiredQA;\n\nexport const DataGridSettingsContext = createContext<DataGridSettingsContextProps>({\n  items: [],\n  defaultItems: [],\n  areas: [],\n  columns: [],\n  itemsById: new Map(),\n  searchItems: [],\n  setSearchItems: () => {},\n\n  setIsOpen: () => {},\n  setItems: () => {},\n  onSave: () => {},\n  qa: '',\n});\n"],"names":[],"mappings":";;AAmBO;AAA4E;AACxE;AACO;AACP;AACE;AACQ;AACJ;AACO;AAAC;AAEN;AAAC;AACF;AAAC;AACH;AAAC;AAEjB;;;;"}
+{"version":3,"file":"DataGridSettingsContext.es.js","sources":["../src/DataGridSettingsContext.ts"],"sourcesContent":["'use client';\n\nimport {createContext} from 'react';\n\nimport type {ColumnArea, ColumnItem, ColumnData, DataGridSettingsProps, ItemsById, ColumnItemId} from './types';\nimport type {RequiredQA} from '@join-x5/react-theme';\n\ntype DataGridSettingsContextProps = {\n  columns: ColumnData[];\n  itemsById: ItemsById;\n  areas: ColumnArea[];\n\n  setItems: (newItems: ColumnItem[]) => void;\n\n  searchItems: ColumnItemId[];\n  setSearchItems: (newSearchItems: ColumnItemId[]) => void;\n} & Pick<DataGridSettingsProps, 'setIsOpen' | 'items' | 'defaultItems' | 'onSave'> &\n  RequiredQA;\n\nexport const DataGridSettingsContext = createContext<DataGridSettingsContextProps>({\n  items: [],\n  defaultItems: [],\n  areas: [],\n  columns: [],\n  itemsById: new Map(),\n  searchItems: [],\n  setSearchItems: () => {},\n\n  setIsOpen: () => {},\n  setItems: () => {},\n  onSave: () => {},\n  qa: '',\n});\n"],"names":["Map"],"mappings":";;AAmBO;AAA4E;AAC1E;AACO;AACP;AACE;AACMA;AACF;AACS;AAAC;AAEN;AAAC;AACF;AAAC;AACH;AAAC;AAEjB;;;;"}

package/dist/Footer/LeftButtons.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"LeftButtons.es.js","sources":["../../src/Footer/LeftButtons.tsx"],"sourcesContent":["'use client';\n\nimport {useContext, useRef, useState} from 'react';\nimport styled from '@emotion/styled';\n\nimport {Placement, SizeTokenValue} from '@join-x5/react-theme';\nimport {\n  Button,\n  ButtonVariant,\n  IconButton,\n  ModalFooterContent,\n  Dropdown,\n  DropdownContent as BaseDropdownContent,\n} from '@join-x5/react';\n\nimport {MoreHorizontalIcon} from '@join-x5/react-icons';\n\nimport {DataGridSettingsContext} from '../DataGridSettingsContext';\n\nimport type {RequiredQA} from '@join-x5/react-theme';\n\nconst DropdownContent = styled(BaseDropdownContent)`\n  overflow: hidden;\n`;\n\nconst DropdownButton = styled.button`\n  width: 100%;\n  padding: 6px 12px;\n  border: 0;\n  outline: none;\n  background: none;\n  text-align: left;\n  cursor: pointer;\n\n  ${props => props.theme.typography.p1compact}\n\n  :hover {\n    background-color: ${props => props.theme.colors.grey[10]};\n  }\n`;\n\ntype DropdownButtonsProps = {\n  isAllVisible: boolean;\n  onReset: () => void;\n  onToggleVisible: () => void;\n} & RequiredQA;\n\nconst DropdownButtons: React.FC<DropdownButtonsProps> = ({isAllVisible, qa, ...props}) => {\n  const [isOpen, setIsOpen] = useState(false);\n  const ref = useRef<HTMLButtonElement>(null);\n\n  const onToggle = () => setIsOpen(!isOpen);\n\n  const onReset = () => {\n    setIsOpen(false);\n    props.onReset();\n  };\n\n  const onToggleVisible = () => {\n    setIsOpen(false);\n    props.onToggleVisible();\n  };\n\n  return (\n    <ModalFooterContent>\n      <IconButton\n        ref={ref}\n        size={SizeTokenValue.Small}\n        variant={ButtonVariant.InnerInput}\n        onClick={onToggle}\n        qa={`${qa}-footer-dropdown`}\n      >\n        <MoreHorizontalIcon size={SizeTokenValue.Small} />\n      </IconButton>\n      <Dropdown width=\"152px\" placement={Placement.TopStart} isOpen={isOpen} setIsOpen={setIsOpen} targetRef={ref}>\n        <DropdownContent>\n          <DropdownButton type=\"button\" onClick={onReset} data-qa={`${qa}-reset`}>\n            По умолчанию\n          </DropdownButton>\n          <DropdownButton type=\"button\" onClick={onToggleVisible} data-qa={`${qa}-toggle-visible`}>\n            {isAllVisible ? 'Скрыть все' : 'Показать все'}\n          </DropdownButton>\n        </DropdownContent>\n      </Dropdown>\n    </ModalFooterContent>\n  );\n};\n\nexport const LeftButtons: React.FC = () => {\n  const {items, defaultItems, setItems, columns, qa} = useContext(DataGridSettingsContext);\n\n  const isAllVisible = items.findIndex(item => !item.isVisible) === -1;\n\n  const onReset = () => setItems(defaultItems);\n\n  const onToggleVisible = () => {\n    const newItems = items.map(item => ({...item, isVisible: item.isAlwaysVisible || !isAllVisible}));\n\n    setItems(newItems);\n  };\n\n  if (columns.length === 1) {\n    return <DropdownButtons isAllVisible={isAllVisible} onReset={onReset} onToggleVisible={onToggleVisible} qa={qa} />;\n  }\n\n  return (\n    <ModalFooterContent>\n      <Button size={SizeTokenValue.Small} variant={ButtonVariant.Ghost} onClick={onReset} qa={`${qa}-reset`}>\n        По умолчанию\n      </Button>\n      <Button\n        size={SizeTokenValue.Small}\n        variant={ButtonVariant.Ghost}\n        onClick={onToggleVisible}\n        qa={`${qa}-toggle-visible`}\n      >\n        {isAllVisible ? 'Скрыть все' : 'Показать все'}\n      </Button>\n    </ModalFooterContent>\n  );\n};\n"],"names":["isAllVisible","qa","setIsOpen","items","defaultItems","setItems","columns","newItems","item"],"mappings":";;;;;;;;AAAa;AAAA;AAAA;AAqBb;AAAkD;AAAA;AAAA;AAAA;AAAA;AAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAI/B;AAAA;AAAA;AAAA;AAAA;AAsBqC;AAACA;AAAcC;AAAY;AAClF;AAMEC;AACc;AAIdA;AACsB;AAGxB;AAEI;AAQA;AAGI;AAEA;AAGA;AAEJ;AAGN;AAGQ;AAAA;AAACC;AAAOC;AAAcC;AAAUC;AAASL;AAOvCM;AAA8B;AAAIC;AAA0CR;AAElFK;AAAiB;AAGfC;AAMA;AAEA;AAQA;AAGN;;;;"}
+{"version":3,"file":"LeftButtons.es.js","sources":["../../src/Footer/LeftButtons.tsx"],"sourcesContent":["'use client';\n\nimport {useContext, useRef, useState} from 'react';\nimport styled from '@emotion/styled';\n\nimport {Placement, SizeTokenValue} from '@join-x5/react-theme';\nimport {\n  Button,\n  ButtonVariant,\n  IconButton,\n  ModalFooterContent,\n  Dropdown,\n  DropdownContent as BaseDropdownContent,\n} from '@join-x5/react';\n\nimport {MoreHorizontalIcon} from '@join-x5/react-icons';\n\nimport {DataGridSettingsContext} from '../DataGridSettingsContext';\n\nimport type {RequiredQA} from '@join-x5/react-theme';\n\nconst DropdownContent = styled(BaseDropdownContent)`\n  overflow: hidden;\n`;\n\nconst DropdownButton = styled.button`\n  width: 100%;\n  padding: 6px 12px;\n  border: 0;\n  outline: none;\n  background: none;\n  text-align: left;\n  cursor: pointer;\n\n  ${props => props.theme.typography.p1compact}\n\n  :hover {\n    background-color: ${props => props.theme.colors.grey[10]};\n  }\n`;\n\ntype DropdownButtonsProps = {\n  isAllVisible: boolean;\n  onReset: () => void;\n  onToggleVisible: () => void;\n} & RequiredQA;\n\nconst DropdownButtons: React.FC<DropdownButtonsProps> = ({isAllVisible, qa, ...props}) => {\n  const [isOpen, setIsOpen] = useState(false);\n  const ref = useRef<HTMLButtonElement>(null);\n\n  const onToggle = () => setIsOpen(!isOpen);\n\n  const onReset = () => {\n    setIsOpen(false);\n    props.onReset();\n  };\n\n  const onToggleVisible = () => {\n    setIsOpen(false);\n    props.onToggleVisible();\n  };\n\n  return (\n    <ModalFooterContent>\n      <IconButton\n        ref={ref}\n        size={SizeTokenValue.Small}\n        variant={ButtonVariant.InnerInput}\n        onClick={onToggle}\n        qa={`${qa}-footer-dropdown`}\n      >\n        <MoreHorizontalIcon size={SizeTokenValue.Small} />\n      </IconButton>\n      <Dropdown width=\"152px\" placement={Placement.TopStart} isOpen={isOpen} setIsOpen={setIsOpen} targetRef={ref}>\n        <DropdownContent>\n          <DropdownButton type=\"button\" onClick={onReset} data-qa={`${qa}-reset`}>\n            По умолчанию\n          </DropdownButton>\n          <DropdownButton type=\"button\" onClick={onToggleVisible} data-qa={`${qa}-toggle-visible`}>\n            {isAllVisible ? 'Скрыть все' : 'Показать все'}\n          </DropdownButton>\n        </DropdownContent>\n      </Dropdown>\n    </ModalFooterContent>\n  );\n};\n\nexport const LeftButtons: React.FC = () => {\n  const {items, defaultItems, setItems, columns, qa} = useContext(DataGridSettingsContext);\n\n  const isAllVisible = items.findIndex(item => !item.isVisible) === -1;\n\n  const onReset = () => setItems(defaultItems);\n\n  const onToggleVisible = () => {\n    const newItems = items.map(item => ({...item, isVisible: item.isAlwaysVisible || !isAllVisible}));\n\n    setItems(newItems);\n  };\n\n  if (columns.length === 1) {\n    return <DropdownButtons isAllVisible={isAllVisible} onReset={onReset} onToggleVisible={onToggleVisible} qa={qa} />;\n  }\n\n  return (\n    <ModalFooterContent>\n      <Button size={SizeTokenValue.Small} variant={ButtonVariant.Ghost} onClick={onReset} qa={`${qa}-reset`}>\n        По умолчанию\n      </Button>\n      <Button\n        size={SizeTokenValue.Small}\n        variant={ButtonVariant.Ghost}\n        onClick={onToggleVisible}\n        qa={`${qa}-toggle-visible`}\n      >\n        {isAllVisible ? 'Скрыть все' : 'Показать все'}\n      </Button>\n    </ModalFooterContent>\n  );\n};\n"],"names":["isAllVisible","qa","setIsOpen","onReset","onToggleVisible","items","defaultItems","setItems","columns","item"],"mappings":";;;;;;;;AAAa;AAAA;AAAA;AAqBb;AAAkD;AAAA;AAAA;AAAA;AAAA;AAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAI/B;AAAA;AAAA;AAAA;AAAA;AAsBqC;AAACA;AAAcC;AAAY;AAClF;AAMEC;AACMC;AAIND;AACME;AAGR;AAEI;AAQA;AAGI;AAEA;AAGA;AAEJ;AAGN;AAGE;AAAM;AAACC;AAAOC;AAAcC;AAAUC;AAASP;AAO7C;AAAoC;AAAIQ;AAA0CT;AAElFO;AAAiB;AAGnB;AAMI;AAEA;AAQA;AAGN;;;;"}

package/dist/Footer/index.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es.js","sources":["../../src/Footer/index.tsx"],"sourcesContent":["'use client';\n\nimport {useContext} from 'react';\nimport styled from '@emotion/styled';\n\nimport {SizeTokenValue} from '@join-x5/react-theme';\nimport {Button, ButtonVariant, ModalFooter as BaseModalFooter, ModalFooterContent} from '@join-x5/react';\n\nimport {DataGridSettingsContext} from '../DataGridSettingsContext';\n\nimport {LeftButtons} from './LeftButtons';\n\nconst ModalFooter = styled(BaseModalFooter)`\n  padding: 20px 24px 20px 16px;\n  border-top: 1px solid ${props => props.theme.colors.grey[20]};\n`;\n\nexport const Footer: React.FC = () => {\n  const context = useContext(DataGridSettingsContext);\n  const {items, setIsOpen, qa} = context;\n\n  const onClose = () => setIsOpen(false);\n  const onSave = () => context.onSave(items);\n\n  return (\n    <ModalFooter>\n      <LeftButtons />\n      <ModalFooterContent>\n        <Button size={SizeTokenValue.Small} variant={ButtonVariant.Outlined} onClick={onClose} qa={`${qa}-cancel`}>\n          Отменить\n        </Button>\n        <Button size={SizeTokenValue.Small} variant={ButtonVariant.Primary} onClick={onSave} qa={`${qa}-save`}>\n          Применить\n        </Button>\n      </ModalFooterContent>\n    </ModalFooter>\n  );\n};\n"],"names":["context","items","setIsOpen","qa"],"mappings":";;;;;;;;AAYA;AAA0C;AAAA;AAAA;AAAA;AAAA;AAMlCA;AACA;AAACC;AAAOC;AAAWC;AAKzB;AAEI;AAAY;AAEV;AAEA;AAGA;AACF;AAGN;;;;"}
+{"version":3,"file":"index.es.js","sources":["../../src/Footer/index.tsx"],"sourcesContent":["'use client';\n\nimport {useContext} from 'react';\nimport styled from '@emotion/styled';\n\nimport {SizeTokenValue} from '@join-x5/react-theme';\nimport {Button, ButtonVariant, ModalFooter as BaseModalFooter, ModalFooterContent} from '@join-x5/react';\n\nimport {DataGridSettingsContext} from '../DataGridSettingsContext';\n\nimport {LeftButtons} from './LeftButtons';\n\nconst ModalFooter = styled(BaseModalFooter)`\n  padding: 20px 24px 20px 16px;\n  border-top: 1px solid ${props => props.theme.colors.grey[20]};\n`;\n\nexport const Footer: React.FC = () => {\n  const context = useContext(DataGridSettingsContext);\n  const {items, setIsOpen, qa} = context;\n\n  const onClose = () => setIsOpen(false);\n  const onSave = () => context.onSave(items);\n\n  return (\n    <ModalFooter>\n      <LeftButtons />\n      <ModalFooterContent>\n        <Button size={SizeTokenValue.Small} variant={ButtonVariant.Outlined} onClick={onClose} qa={`${qa}-cancel`}>\n          Отменить\n        </Button>\n        <Button size={SizeTokenValue.Small} variant={ButtonVariant.Primary} onClick={onSave} qa={`${qa}-save`}>\n          Применить\n        </Button>\n      </ModalFooterContent>\n    </ModalFooter>\n  );\n};\n"],"names":["items","setIsOpen","qa"],"mappings":";;;;;;;;AAYA;AAA0C;AAAA;AAAA;AAAA;AAAA;AAMxC;AACM;AAACA;AAAOC;AAAWC;AAKzB;AAEI;AAAY;AAEV;AAEA;AAGA;AACF;AAGN;;;;"}

package/dist/Search/index.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es.js","sources":["../../src/Search/index.tsx"],"sourcesContent":["'use client';\n\nimport {useContext, useRef, useState} from 'react';\nimport styled from '@emotion/styled';\n\nimport {SizeTokenValue} from '@join-x5/react-theme';\nimport {SearchInput} from '@join-x5/react';\n\nimport {DataGridSettingsContext} from '../DataGridSettingsContext';\n\nimport type {ChangeEventHandler} from 'react';\nimport type {ColumnItemId} from '../types';\n\nconst Container = styled.div`\n  margin-bottom: 16px;\n`;\n\nexport const Search: React.FC = () => {\n  const {items, setSearchItems, qa} = useContext(DataGridSettingsContext);\n  const [value, setValue] = useState<string>('');\n  const inputTimeout = useRef<ReturnType<typeof setTimeout>>();\n\n  const onChange: ChangeEventHandler<HTMLInputElement> = e => {\n    const newSearchValue = e.target.value.toLowerCase().trim();\n\n    clearTimeout(inputTimeout.current);\n    setValue(e.target.value);\n\n    inputTimeout.current = setTimeout(() => {\n      if (!newSearchValue) {\n        setSearchItems([]);\n        return;\n      }\n\n      const newSearchItems = items.reduce((acc, item) => {\n        if (item.name.toLowerCase().includes(newSearchValue)) {\n          acc.push(item.id);\n        }\n\n        return acc;\n      }, [] as ColumnItemId[]);\n\n      setSearchItems(newSearchItems);\n    }, 100);\n  };\n\n  return (\n    <Container>\n      <SearchInput size={SizeTokenValue.Small} value={value} onChange={onChange} label=\"Поиск\" qa={`${qa}-search`} />\n    </Container>\n  );\n};\n"],"names":["items","setSearchItems","qa","clearTimeout"],"mappings":";;;;;;;AAAa;AAAA;AAAA;AAab;AAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAKP;AAAA;AAACA;AAAOC;AAAgBC;AAK5B;AAEAC;AAIE;AACEF;AACA;AAAA;AAGF;AAQAA;AAA6B;AACzB;AAGR;AAKF;;;;"}
+{"version":3,"file":"index.es.js","sources":["../../src/Search/index.tsx"],"sourcesContent":["'use client';\n\nimport {useContext, useRef, useState} from 'react';\nimport styled from '@emotion/styled';\n\nimport {SizeTokenValue} from '@join-x5/react-theme';\nimport {SearchInput} from '@join-x5/react';\n\nimport {DataGridSettingsContext} from '../DataGridSettingsContext';\n\nimport type {ChangeEventHandler} from 'react';\nimport type {ColumnItemId} from '../types';\n\nconst Container = styled.div`\n  margin-bottom: 16px;\n`;\n\nexport const Search: React.FC = () => {\n  const {items, setSearchItems, qa} = useContext(DataGridSettingsContext);\n  const [value, setValue] = useState<string>('');\n  const inputTimeout = useRef<ReturnType<typeof setTimeout>>();\n\n  const onChange: ChangeEventHandler<HTMLInputElement> = e => {\n    const newSearchValue = e.target.value.toLowerCase().trim();\n\n    clearTimeout(inputTimeout.current);\n    setValue(e.target.value);\n\n    inputTimeout.current = setTimeout(() => {\n      if (!newSearchValue) {\n        setSearchItems([]);\n        return;\n      }\n\n      const newSearchItems = items.reduce((acc, item) => {\n        if (item.name.toLowerCase().includes(newSearchValue)) {\n          acc.push(item.id);\n        }\n\n        return acc;\n      }, [] as ColumnItemId[]);\n\n      setSearchItems(newSearchItems);\n    }, 100);\n  };\n\n  return (\n    <Container>\n      <SearchInput size={SizeTokenValue.Small} value={value} onChange={onChange} label=\"Поиск\" qa={`${qa}-search`} />\n    </Container>\n  );\n};\n"],"names":["items","setSearchItems","qa","clearTimeout"],"mappings":";;;;;;;AAAa;AAAA;AAAA;AAab;AAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAKb;AAAM;AAACA;AAAOC;AAAgBC;AAK5B;AAEAC;AAIE;AACEF;AACA;AAAA;AAGF;AAQAA;AAA6B;AACzB;AAGR;AAKF;;;;"}