@vuu-ui/vuu-table-extras 0.13.6 → 0.13.7

package/cjs/column-list/ColumnList.js

@@ -1,13 +1,11 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var react$1 = require('@dnd-kit/react');
-var sortable = require('@dnd-kit/react/sortable');
+var vuuUtils = require('@vuu-ui/vuu-utils');
 var core = require('@salt-ds/core');
 var styles = require('@salt-ds/styles');
 var window = require('@salt-ds/window');
 var vuuUiControls = require('@vuu-ui/vuu-ui-controls');
-var vuuUtils = require('@vuu-ui/vuu-utils');
 var cx = require('clsx');
 var react = require('react');
 var ColumnList$1 = require('./ColumnList.css.js');
@@ -15,7 +13,7 @@ var ColumnList$1 = require('./ColumnList.css.js');
 const classBase = "vuuColumnList";
 const classBaseListItem = "vuuColumnListItem";
 const useSorting = (id, index, allowSort = true) => {
-  const { handleRef: sortableHandleRef, ref: sortableRef } = sortable.useSortable({
+  const { handleRef: sortableHandleRef, ref: sortableRef } = vuuUtils.useSortable({
     id,
     index
   });
@@ -140,7 +138,7 @@ const ColumnList = ({
       }
     }, 300);
   }, [columnItems, onReorderColumnItems]);
-  return /* @__PURE__ */ jsxRuntime.jsx(react$1.DragDropProvider, { onDragEnd: handleDragEnd, children: /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx(vuuUtils.DragDropProvider, { onDragEnd: handleDragEnd, children: /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       ...htmlAttributes,

package/cjs/column-list/ColumnList.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColumnList.js","sources":["../../src/column-list/ColumnList.tsx"],"sourcesContent":["import { DragDropProvider } from \"@dnd-kit/react\";\nimport { useSortable } from \"@dnd-kit/react/sortable\";\nimport { Checkbox, ListBox, Option, OptionProps, Switch } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n  ColumnDescriptor,\n  ColumnListPermissions,\n} from \"@vuu-ui/vuu-table-types\";\nimport { Icon, IconButton } from \"@vuu-ui/vuu-ui-controls\";\nimport {\n  getColumnLabel,\n  queryClosest,\n  reorderColumnItems,\n} from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport {\n  HTMLAttributes,\n  MouseEventHandler,\n  SyntheticEvent,\n  useCallback,\n  useMemo,\n  useRef,\n} from \"react\";\nimport { ColumnItem } from \"../table-column-settings/useTableSettings\";\n\nimport columnList from \"./ColumnList.css\";\n\nconst classBase = \"vuuColumnList\";\nconst classBaseListItem = \"vuuColumnListItem\";\n\nconst useSorting = (id: string, index: number, allowSort = true) => {\n  const { handleRef: sortableHandleRef, ref: sortableRef } = useSortable({\n    id,\n    index,\n  });\n\n  const noopRef = useCallback(() => {\n    // do nothing\n  }, []);\n\n  const [handleRef, ref] = useMemo(() => {\n    return allowSort ? [sortableHandleRef, sortableRef] : [noopRef, noopRef];\n  }, [allowSort, noopRef, sortableHandleRef, sortableRef]);\n\n  return {\n    handleRef,\n    ref,\n  };\n};\n\nexport type ColumnChangeHandler = (\n  columnName: string,\n  propertyName: keyof ColumnDescriptor | \"subscribed\",\n  value: string | number | boolean,\n) => void;\n\nexport interface ColumnListProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  columnItems: ColumnItem[];\n  onChange: ColumnChangeHandler;\n  onNavigateToColumn?: (columnName: string) => void;\n  onReorderColumnItems?: (columnItems: ColumnItem[]) => void;\n  permissions?: ColumnListPermissions;\n}\n\nconst ColumnListItem = ({\n  className: classNameProp,\n  index,\n  item,\n  permissions: { allowHideColumns, allowRemoveColumns, allowReorderColumns },\n  ...optionProps\n}: OptionProps & {\n  index: number;\n  item: ColumnItem;\n  permissions: ColumnListPermissions;\n}) => {\n  const { handleRef, ref } = useSorting(item.name, index, allowReorderColumns);\n  return (\n    <Option\n      {...optionProps}\n      className={cx(classNameProp, classBaseListItem)}\n      data-name={item.name}\n      id={item.name}\n      ref={ref}\n    >\n      {allowReorderColumns ? (\n        <IconButton\n          data-embedded\n          appearance=\"transparent\"\n          icon=\"draggable\"\n          ref={handleRef}\n          size={16}\n        />\n      ) : null}\n      {item?.isCalculated ? (\n        <Icon name=\"function\" />\n      ) : (\n        <Checkbox\n          className={`${classBase}-checkBox`}\n          checked={item?.subscribed}\n          readOnly={allowRemoveColumns === false}\n        />\n      )}\n      <span className={`${classBase}-text`}>\n        {getColumnLabel(item as ColumnDescriptor)}\n      </span>\n      {allowHideColumns !== false ? (\n        <Switch\n          className={`${classBase}-switch`}\n          checked={item?.hidden !== true}\n          disabled={item?.subscribed !== true}\n        />\n      ) : null}\n    </Option>\n  );\n};\n\nconst defaultPermissions: ColumnListPermissions = {\n  allowHideColumns: true,\n  allowRemoveColumns: true,\n  allowReorderColumns: true,\n};\n\nexport const ColumnList = ({\n  className,\n  columnItems,\n  onChange,\n  onNavigateToColumn,\n  onReorderColumnItems,\n  permissions = defaultPermissions,\n  ...htmlAttributes\n}: ColumnListProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-column-list\",\n    css: columnList,\n    window: targetWindow,\n  });\n  const listRef = useRef<HTMLDivElement>(null);\n\n  const handleChange = useCallback(\n    ({ target }: SyntheticEvent) => {\n      const input = target as HTMLInputElement;\n      const listItem = queryClosest(target, `.${classBaseListItem}`);\n      if (listItem) {\n        const {\n          dataset: { name },\n        } = listItem;\n        if (name) {\n          const saltCheckbox = queryClosest(target, `.${classBase}-checkBox`);\n          const saltSwitch = queryClosest(target, `.${classBase}-switch`);\n\n          if (saltCheckbox) {\n            onChange(name, \"subscribed\", input.checked);\n          } else if (saltSwitch) {\n            onChange(name, \"hidden\", input.checked === false);\n          }\n        }\n      }\n    },\n    [onChange],\n  );\n\n  const handleClick = useCallback<MouseEventHandler>(\n    (evt) => {\n      const targetEl = evt.target as HTMLElement;\n      if (targetEl.classList.contains(\"vuuColumnList-text\")) {\n        const listItemEl = targetEl.closest(\".vuuListItem\") as HTMLElement;\n        if (listItemEl?.dataset.name) {\n          onNavigateToColumn?.(listItemEl.dataset.name);\n        }\n      }\n    },\n    [onNavigateToColumn],\n  );\n\n  const handleDragEnd = useCallback(() => {\n    setTimeout(() => {\n      const listItems =\n        listRef.current?.querySelectorAll<HTMLDivElement>(\".saltOption\");\n      if (listItems) {\n        const orderedIds = Array.from(listItems).map(({ id }) => id);\n        onReorderColumnItems?.(reorderColumnItems(columnItems, orderedIds));\n      }\n    }, 300);\n  }, [columnItems, onReorderColumnItems]);\n\n  return (\n    <DragDropProvider onDragEnd={handleDragEnd}>\n      <div\n        {...htmlAttributes}\n        className={cx(classBase, className, {\n          [`${classBase}-withColumnNavigation`]:\n            typeof onNavigateToColumn === \"function\",\n        })}\n      >\n        <div className={`${classBase}-header`}>\n          <span>Column Selection</span>\n        </div>\n        <div className={`${classBase}-colHeadings`}>\n          <span>Column subscription</span>\n          <span>Visibility</span>\n        </div>\n        <ListBox ref={listRef}>\n          {columnItems.map((columnItem, index) => (\n            <ColumnListItem\n              item={columnItem}\n              index={index}\n              key={columnItem.name}\n              onChange={handleChange}\n              onClick={handleClick}\n              permissions={permissions}\n              value={columnItem}\n            />\n          ))}\n        </ListBox>\n      </div>\n    </DragDropProvider>\n  );\n};\n"],"names":["useSortable","useCallback","useMemo","jsxs","Option","jsx","IconButton","Icon","Checkbox","getColumnLabel","Switch","useWindow","useComponentCssInjection","columnList","useRef","queryClosest","reorderColumnItems","DragDropProvider","ListBox"],"mappings":"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"}
+{"version":3,"file":"ColumnList.js","sources":["../../src/column-list/ColumnList.tsx"],"sourcesContent":["import { DragDropProvider, useSortable } from \"@vuu-ui/vuu-utils\";\nimport { Checkbox, ListBox, Option, OptionProps, Switch } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n  ColumnDescriptor,\n  ColumnListPermissions,\n} from \"@vuu-ui/vuu-table-types\";\nimport { Icon, IconButton } from \"@vuu-ui/vuu-ui-controls\";\nimport {\n  getColumnLabel,\n  queryClosest,\n  reorderColumnItems,\n} from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport {\n  HTMLAttributes,\n  MouseEventHandler,\n  SyntheticEvent,\n  useCallback,\n  useMemo,\n  useRef,\n} from \"react\";\nimport { ColumnItem } from \"../table-column-settings/useTableSettings\";\n\nimport columnList from \"./ColumnList.css\";\n\nconst classBase = \"vuuColumnList\";\nconst classBaseListItem = \"vuuColumnListItem\";\n\nconst useSorting = (id: string, index: number, allowSort = true) => {\n  const { handleRef: sortableHandleRef, ref: sortableRef } = useSortable({\n    id,\n    index,\n  });\n\n  const noopRef = useCallback(() => {\n    // do nothing\n  }, []);\n\n  const [handleRef, ref] = useMemo(() => {\n    return allowSort ? [sortableHandleRef, sortableRef] : [noopRef, noopRef];\n  }, [allowSort, noopRef, sortableHandleRef, sortableRef]);\n\n  return {\n    handleRef,\n    ref,\n  };\n};\n\nexport type ColumnChangeHandler = (\n  columnName: string,\n  propertyName: keyof ColumnDescriptor | \"subscribed\",\n  value: string | number | boolean,\n) => void;\n\nexport interface ColumnListProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  columnItems: ColumnItem[];\n  onChange: ColumnChangeHandler;\n  onNavigateToColumn?: (columnName: string) => void;\n  onReorderColumnItems?: (columnItems: ColumnItem[]) => void;\n  permissions?: ColumnListPermissions;\n}\n\nconst ColumnListItem = ({\n  className: classNameProp,\n  index,\n  item,\n  permissions: { allowHideColumns, allowRemoveColumns, allowReorderColumns },\n  ...optionProps\n}: OptionProps & {\n  index: number;\n  item: ColumnItem;\n  permissions: ColumnListPermissions;\n}) => {\n  const { handleRef, ref } = useSorting(item.name, index, allowReorderColumns);\n  return (\n    <Option\n      {...optionProps}\n      className={cx(classNameProp, classBaseListItem)}\n      data-name={item.name}\n      id={item.name}\n      ref={ref}\n    >\n      {allowReorderColumns ? (\n        <IconButton\n          data-embedded\n          appearance=\"transparent\"\n          icon=\"draggable\"\n          ref={handleRef}\n          size={16}\n        />\n      ) : null}\n      {item?.isCalculated ? (\n        <Icon name=\"function\" />\n      ) : (\n        <Checkbox\n          className={`${classBase}-checkBox`}\n          checked={item?.subscribed}\n          readOnly={allowRemoveColumns === false}\n        />\n      )}\n      <span className={`${classBase}-text`}>\n        {getColumnLabel(item as ColumnDescriptor)}\n      </span>\n      {allowHideColumns !== false ? (\n        <Switch\n          className={`${classBase}-switch`}\n          checked={item?.hidden !== true}\n          disabled={item?.subscribed !== true}\n        />\n      ) : null}\n    </Option>\n  );\n};\n\nconst defaultPermissions: ColumnListPermissions = {\n  allowHideColumns: true,\n  allowRemoveColumns: true,\n  allowReorderColumns: true,\n};\n\nexport const ColumnList = ({\n  className,\n  columnItems,\n  onChange,\n  onNavigateToColumn,\n  onReorderColumnItems,\n  permissions = defaultPermissions,\n  ...htmlAttributes\n}: ColumnListProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-column-list\",\n    css: columnList,\n    window: targetWindow,\n  });\n  const listRef = useRef<HTMLDivElement>(null);\n\n  const handleChange = useCallback(\n    ({ target }: SyntheticEvent) => {\n      const input = target as HTMLInputElement;\n      const listItem = queryClosest(target, `.${classBaseListItem}`);\n      if (listItem) {\n        const {\n          dataset: { name },\n        } = listItem;\n        if (name) {\n          const saltCheckbox = queryClosest(target, `.${classBase}-checkBox`);\n          const saltSwitch = queryClosest(target, `.${classBase}-switch`);\n\n          if (saltCheckbox) {\n            onChange(name, \"subscribed\", input.checked);\n          } else if (saltSwitch) {\n            onChange(name, \"hidden\", input.checked === false);\n          }\n        }\n      }\n    },\n    [onChange],\n  );\n\n  const handleClick = useCallback<MouseEventHandler>(\n    (evt) => {\n      const targetEl = evt.target as HTMLElement;\n      if (targetEl.classList.contains(\"vuuColumnList-text\")) {\n        const listItemEl = targetEl.closest(\".vuuListItem\") as HTMLElement;\n        if (listItemEl?.dataset.name) {\n          onNavigateToColumn?.(listItemEl.dataset.name);\n        }\n      }\n    },\n    [onNavigateToColumn],\n  );\n\n  const handleDragEnd = useCallback(() => {\n    setTimeout(() => {\n      const listItems =\n        listRef.current?.querySelectorAll<HTMLDivElement>(\".saltOption\");\n      if (listItems) {\n        const orderedIds = Array.from(listItems).map(({ id }) => id);\n        onReorderColumnItems?.(reorderColumnItems(columnItems, orderedIds));\n      }\n    }, 300);\n  }, [columnItems, onReorderColumnItems]);\n\n  return (\n    <DragDropProvider onDragEnd={handleDragEnd}>\n      <div\n        {...htmlAttributes}\n        className={cx(classBase, className, {\n          [`${classBase}-withColumnNavigation`]:\n            typeof onNavigateToColumn === \"function\",\n        })}\n      >\n        <div className={`${classBase}-header`}>\n          <span>Column Selection</span>\n        </div>\n        <div className={`${classBase}-colHeadings`}>\n          <span>Column subscription</span>\n          <span>Visibility</span>\n        </div>\n        <ListBox ref={listRef}>\n          {columnItems.map((columnItem, index) => (\n            <ColumnListItem\n              item={columnItem}\n              index={index}\n              key={columnItem.name}\n              onChange={handleChange}\n              onClick={handleClick}\n              permissions={permissions}\n              value={columnItem}\n            />\n          ))}\n        </ListBox>\n      </div>\n    </DragDropProvider>\n  );\n};\n"],"names":["useSortable","useCallback","useMemo","jsxs","Option","jsx","IconButton","Icon","Checkbox","getColumnLabel","Switch","useWindow","useComponentCssInjection","columnList","useRef","queryClosest","reorderColumnItems","DragDropProvider","ListBox"],"mappings":"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"}

package/esm/column-list/ColumnList.js

@@ -1,11 +1,9 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { DragDropProvider } from '@dnd-kit/react';
-import { useSortable } from '@dnd-kit/react/sortable';
+import { queryClosest, reorderColumnItems, DragDropProvider, getColumnLabel, useSortable } from '@vuu-ui/vuu-utils';
 import { ListBox, Option, Checkbox, Switch } from '@salt-ds/core';
 import { useComponentCssInjection } from '@salt-ds/styles';
 import { useWindow } from '@salt-ds/window';
 import { IconButton, Icon } from '@vuu-ui/vuu-ui-controls';
-import { queryClosest, reorderColumnItems, getColumnLabel } from '@vuu-ui/vuu-utils';
 import cx from 'clsx';
 import { useRef, useCallback, useMemo } from 'react';
 import columnList from './ColumnList.css.js';

package/esm/column-list/ColumnList.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColumnList.js","sources":["../../src/column-list/ColumnList.tsx"],"sourcesContent":["import { DragDropProvider } from \"@dnd-kit/react\";\nimport { useSortable } from \"@dnd-kit/react/sortable\";\nimport { Checkbox, ListBox, Option, OptionProps, Switch } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n  ColumnDescriptor,\n  ColumnListPermissions,\n} from \"@vuu-ui/vuu-table-types\";\nimport { Icon, IconButton } from \"@vuu-ui/vuu-ui-controls\";\nimport {\n  getColumnLabel,\n  queryClosest,\n  reorderColumnItems,\n} from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport {\n  HTMLAttributes,\n  MouseEventHandler,\n  SyntheticEvent,\n  useCallback,\n  useMemo,\n  useRef,\n} from \"react\";\nimport { ColumnItem } from \"../table-column-settings/useTableSettings\";\n\nimport columnList from \"./ColumnList.css\";\n\nconst classBase = \"vuuColumnList\";\nconst classBaseListItem = \"vuuColumnListItem\";\n\nconst useSorting = (id: string, index: number, allowSort = true) => {\n  const { handleRef: sortableHandleRef, ref: sortableRef } = useSortable({\n    id,\n    index,\n  });\n\n  const noopRef = useCallback(() => {\n    // do nothing\n  }, []);\n\n  const [handleRef, ref] = useMemo(() => {\n    return allowSort ? [sortableHandleRef, sortableRef] : [noopRef, noopRef];\n  }, [allowSort, noopRef, sortableHandleRef, sortableRef]);\n\n  return {\n    handleRef,\n    ref,\n  };\n};\n\nexport type ColumnChangeHandler = (\n  columnName: string,\n  propertyName: keyof ColumnDescriptor | \"subscribed\",\n  value: string | number | boolean,\n) => void;\n\nexport interface ColumnListProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  columnItems: ColumnItem[];\n  onChange: ColumnChangeHandler;\n  onNavigateToColumn?: (columnName: string) => void;\n  onReorderColumnItems?: (columnItems: ColumnItem[]) => void;\n  permissions?: ColumnListPermissions;\n}\n\nconst ColumnListItem = ({\n  className: classNameProp,\n  index,\n  item,\n  permissions: { allowHideColumns, allowRemoveColumns, allowReorderColumns },\n  ...optionProps\n}: OptionProps & {\n  index: number;\n  item: ColumnItem;\n  permissions: ColumnListPermissions;\n}) => {\n  const { handleRef, ref } = useSorting(item.name, index, allowReorderColumns);\n  return (\n    <Option\n      {...optionProps}\n      className={cx(classNameProp, classBaseListItem)}\n      data-name={item.name}\n      id={item.name}\n      ref={ref}\n    >\n      {allowReorderColumns ? (\n        <IconButton\n          data-embedded\n          appearance=\"transparent\"\n          icon=\"draggable\"\n          ref={handleRef}\n          size={16}\n        />\n      ) : null}\n      {item?.isCalculated ? (\n        <Icon name=\"function\" />\n      ) : (\n        <Checkbox\n          className={`${classBase}-checkBox`}\n          checked={item?.subscribed}\n          readOnly={allowRemoveColumns === false}\n        />\n      )}\n      <span className={`${classBase}-text`}>\n        {getColumnLabel(item as ColumnDescriptor)}\n      </span>\n      {allowHideColumns !== false ? (\n        <Switch\n          className={`${classBase}-switch`}\n          checked={item?.hidden !== true}\n          disabled={item?.subscribed !== true}\n        />\n      ) : null}\n    </Option>\n  );\n};\n\nconst defaultPermissions: ColumnListPermissions = {\n  allowHideColumns: true,\n  allowRemoveColumns: true,\n  allowReorderColumns: true,\n};\n\nexport const ColumnList = ({\n  className,\n  columnItems,\n  onChange,\n  onNavigateToColumn,\n  onReorderColumnItems,\n  permissions = defaultPermissions,\n  ...htmlAttributes\n}: ColumnListProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-column-list\",\n    css: columnList,\n    window: targetWindow,\n  });\n  const listRef = useRef<HTMLDivElement>(null);\n\n  const handleChange = useCallback(\n    ({ target }: SyntheticEvent) => {\n      const input = target as HTMLInputElement;\n      const listItem = queryClosest(target, `.${classBaseListItem}`);\n      if (listItem) {\n        const {\n          dataset: { name },\n        } = listItem;\n        if (name) {\n          const saltCheckbox = queryClosest(target, `.${classBase}-checkBox`);\n          const saltSwitch = queryClosest(target, `.${classBase}-switch`);\n\n          if (saltCheckbox) {\n            onChange(name, \"subscribed\", input.checked);\n          } else if (saltSwitch) {\n            onChange(name, \"hidden\", input.checked === false);\n          }\n        }\n      }\n    },\n    [onChange],\n  );\n\n  const handleClick = useCallback<MouseEventHandler>(\n    (evt) => {\n      const targetEl = evt.target as HTMLElement;\n      if (targetEl.classList.contains(\"vuuColumnList-text\")) {\n        const listItemEl = targetEl.closest(\".vuuListItem\") as HTMLElement;\n        if (listItemEl?.dataset.name) {\n          onNavigateToColumn?.(listItemEl.dataset.name);\n        }\n      }\n    },\n    [onNavigateToColumn],\n  );\n\n  const handleDragEnd = useCallback(() => {\n    setTimeout(() => {\n      const listItems =\n        listRef.current?.querySelectorAll<HTMLDivElement>(\".saltOption\");\n      if (listItems) {\n        const orderedIds = Array.from(listItems).map(({ id }) => id);\n        onReorderColumnItems?.(reorderColumnItems(columnItems, orderedIds));\n      }\n    }, 300);\n  }, [columnItems, onReorderColumnItems]);\n\n  return (\n    <DragDropProvider onDragEnd={handleDragEnd}>\n      <div\n        {...htmlAttributes}\n        className={cx(classBase, className, {\n          [`${classBase}-withColumnNavigation`]:\n            typeof onNavigateToColumn === \"function\",\n        })}\n      >\n        <div className={`${classBase}-header`}>\n          <span>Column Selection</span>\n        </div>\n        <div className={`${classBase}-colHeadings`}>\n          <span>Column subscription</span>\n          <span>Visibility</span>\n        </div>\n        <ListBox ref={listRef}>\n          {columnItems.map((columnItem, index) => (\n            <ColumnListItem\n              item={columnItem}\n              index={index}\n              key={columnItem.name}\n              onChange={handleChange}\n              onClick={handleClick}\n              permissions={permissions}\n              value={columnItem}\n            />\n          ))}\n        </ListBox>\n      </div>\n    </DragDropProvider>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;AA4BA,MAAM,SAAY,GAAA,eAAA;AAClB,MAAM,iBAAoB,GAAA,mBAAA;AAE1B,MAAM,UAAa,GAAA,CAAC,EAAY,EAAA,KAAA,EAAe,YAAY,IAAS,KAAA;AAClE,EAAA,MAAM,EAAE,SAAW,EAAA,iBAAA,EAAmB,GAAK,EAAA,WAAA,KAAgB,WAAY,CAAA;AAAA,IACrE,EAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAM,MAAA,OAAA,GAAU,YAAY,MAAM;AAAA,GAElC,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,CAAC,SAAA,EAAW,GAAG,CAAA,GAAI,QAAQ,MAAM;AACrC,IAAA,OAAO,YAAY,CAAC,iBAAA,EAAmB,WAAW,CAAI,GAAA,CAAC,SAAS,OAAO,CAAA;AAAA,KACtE,CAAC,SAAA,EAAW,OAAS,EAAA,iBAAA,EAAmB,WAAW,CAAC,CAAA;AAEvD,EAAO,OAAA;AAAA,IACL,SAAA;AAAA,IACA;AAAA,GACF;AACF,CAAA;AAiBA,MAAM,iBAAiB,CAAC;AAAA,EACtB,SAAW,EAAA,aAAA;AAAA,EACX,KAAA;AAAA,EACA,IAAA;AAAA,EACA,WAAa,EAAA,EAAE,gBAAkB,EAAA,kBAAA,EAAoB,mBAAoB,EAAA;AAAA,EACzE,GAAG;AACL,CAIM,KAAA;AACJ,EAAM,MAAA,EAAE,WAAW,GAAI,EAAA,GAAI,WAAW,IAAK,CAAA,IAAA,EAAM,OAAO,mBAAmB,CAAA;AAC3E,EACE,uBAAA,IAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACE,GAAG,WAAA;AAAA,MACJ,SAAA,EAAW,EAAG,CAAA,aAAA,EAAe,iBAAiB,CAAA;AAAA,MAC9C,aAAW,IAAK,CAAA,IAAA;AAAA,MAChB,IAAI,IAAK,CAAA,IAAA;AAAA,MACT,GAAA;AAAA,MAEC,QAAA,EAAA;AAAA,QACC,mBAAA,mBAAA,GAAA;AAAA,UAAC,UAAA;AAAA,UAAA;AAAA,YACC,eAAa,EAAA,IAAA;AAAA,YACb,UAAW,EAAA,aAAA;AAAA,YACX,IAAK,EAAA,WAAA;AAAA,YACL,GAAK,EAAA,SAAA;AAAA,YACL,IAAM,EAAA;AAAA;AAAA,SAEN,GAAA,IAAA;AAAA,QACH,MAAM,YACL,mBAAA,GAAA,CAAC,IAAK,EAAA,EAAA,IAAA,EAAK,YAAW,CAEtB,mBAAA,GAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,GAAG,SAAS,CAAA,SAAA,CAAA;AAAA,YACvB,SAAS,IAAM,EAAA,UAAA;AAAA,YACf,UAAU,kBAAuB,KAAA;AAAA;AAAA,SACnC;AAAA,wBAEF,GAAA,CAAC,UAAK,SAAW,EAAA,CAAA,EAAG,SAAS,CAC1B,KAAA,CAAA,EAAA,QAAA,EAAA,cAAA,CAAe,IAAwB,CAC1C,EAAA,CAAA;AAAA,QACC,qBAAqB,KACpB,mBAAA,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,GAAG,SAAS,CAAA,OAAA,CAAA;AAAA,YACvB,OAAA,EAAS,MAAM,MAAW,KAAA,IAAA;AAAA,YAC1B,QAAA,EAAU,MAAM,UAAe,KAAA;AAAA;AAAA,SAE/B,GAAA;AAAA;AAAA;AAAA,GACN;AAEJ,CAAA;AAEA,MAAM,kBAA4C,GAAA;AAAA,EAChD,gBAAkB,EAAA,IAAA;AAAA,EAClB,kBAAoB,EAAA,IAAA;AAAA,EACpB,mBAAqB,EAAA;AACvB,CAAA;AAEO,MAAM,aAAa,CAAC;AAAA,EACzB,SAAA;AAAA,EACA,WAAA;AAAA,EACA,QAAA;AAAA,EACA,kBAAA;AAAA,EACA,oBAAA;AAAA,EACA,WAAc,GAAA,kBAAA;AAAA,EACd,GAAG;AACL,CAAuB,KAAA;AACrB,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,iBAAA;AAAA,IACR,GAAK,EAAA,UAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AACD,EAAM,MAAA,OAAA,GAAU,OAAuB,IAAI,CAAA;AAE3C,EAAA,MAAM,YAAe,GAAA,WAAA;AAAA,IACnB,CAAC,EAAE,MAAA,EAA6B,KAAA;AAC9B,MAAA,MAAM,KAAQ,GAAA,MAAA;AACd,MAAA,MAAM,QAAW,GAAA,YAAA,CAAa,MAAQ,EAAA,CAAA,CAAA,EAAI,iBAAiB,CAAE,CAAA,CAAA;AAC7D,MAAA,IAAI,QAAU,EAAA;AACZ,QAAM,MAAA;AAAA,UACJ,OAAA,EAAS,EAAE,IAAK;AAAA,SACd,GAAA,QAAA;AACJ,QAAA,IAAI,IAAM,EAAA;AACR,UAAA,MAAM,YAAe,GAAA,YAAA,CAAa,MAAQ,EAAA,CAAA,CAAA,EAAI,SAAS,CAAW,SAAA,CAAA,CAAA;AAClE,UAAA,MAAM,UAAa,GAAA,YAAA,CAAa,MAAQ,EAAA,CAAA,CAAA,EAAI,SAAS,CAAS,OAAA,CAAA,CAAA;AAE9D,UAAA,IAAI,YAAc,EAAA;AAChB,YAAS,QAAA,CAAA,IAAA,EAAM,YAAc,EAAA,KAAA,CAAM,OAAO,CAAA;AAAA,qBACjC,UAAY,EAAA;AACrB,YAAA,QAAA,CAAS,IAAM,EAAA,QAAA,EAAU,KAAM,CAAA,OAAA,KAAY,KAAK,CAAA;AAAA;AAClD;AACF;AACF,KACF;AAAA,IACA,CAAC,QAAQ;AAAA,GACX;AAEA,EAAA,MAAM,WAAc,GAAA,WAAA;AAAA,IAClB,CAAC,GAAQ,KAAA;AACP,MAAA,MAAM,WAAW,GAAI,CAAA,MAAA;AACrB,MAAA,IAAI,QAAS,CAAA,SAAA,CAAU,QAAS,CAAA,oBAAoB,CAAG,EAAA;AACrD,QAAM,MAAA,UAAA,GAAa,QAAS,CAAA,OAAA,CAAQ,cAAc,CAAA;AAClD,QAAI,IAAA,UAAA,EAAY,QAAQ,IAAM,EAAA;AAC5B,UAAqB,kBAAA,GAAA,UAAA,CAAW,QAAQ,IAAI,CAAA;AAAA;AAC9C;AACF,KACF;AAAA,IACA,CAAC,kBAAkB;AAAA,GACrB;AAEA,EAAM,MAAA,aAAA,GAAgB,YAAY,MAAM;AACtC,IAAA,UAAA,CAAW,MAAM;AACf,MAAA,MAAM,SACJ,GAAA,OAAA,CAAQ,OAAS,EAAA,gBAAA,CAAiC,aAAa,CAAA;AACjE,MAAA,IAAI,SAAW,EAAA;AACb,QAAM,MAAA,UAAA,GAAa,KAAM,CAAA,IAAA,CAAK,SAAS,CAAA,CAAE,IAAI,CAAC,EAAE,EAAG,EAAA,KAAM,EAAE,CAAA;AAC3D,QAAuB,oBAAA,GAAA,kBAAA,CAAmB,WAAa,EAAA,UAAU,CAAC,CAAA;AAAA;AACpE,OACC,GAAG,CAAA;AAAA,GACL,EAAA,CAAC,WAAa,EAAA,oBAAoB,CAAC,CAAA;AAEtC,EACE,uBAAA,GAAA,CAAC,gBAAiB,EAAA,EAAA,SAAA,EAAW,aAC3B,EAAA,QAAA,kBAAA,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAW,EAAA;AAAA,QAClC,CAAC,CAAG,EAAA,SAAS,CAAuB,qBAAA,CAAA,GAClC,OAAO,kBAAuB,KAAA;AAAA,OACjC,CAAA;AAAA,MAED,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,KAAA,EAAA,EAAI,WAAW,CAAG,EAAA,SAAS,WAC1B,QAAC,kBAAA,GAAA,CAAA,MAAA,EAAA,EAAK,8BAAgB,CACxB,EAAA,CAAA;AAAA,wBACC,IAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,CAAA,EAAG,SAAS,CAC1B,YAAA,CAAA,EAAA,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,UAAK,QAAmB,EAAA,qBAAA,EAAA,CAAA;AAAA,0BACzB,GAAA,CAAC,UAAK,QAAU,EAAA,YAAA,EAAA;AAAA,SAClB,EAAA,CAAA;AAAA,wBACA,GAAA,CAAC,WAAQ,GAAK,EAAA,OAAA,EACX,sBAAY,GAAI,CAAA,CAAC,YAAY,KAC5B,qBAAA,GAAA;AAAA,UAAC,cAAA;AAAA,UAAA;AAAA,YACC,IAAM,EAAA,UAAA;AAAA,YACN,KAAA;AAAA,YAEA,QAAU,EAAA,YAAA;AAAA,YACV,OAAS,EAAA,WAAA;AAAA,YACT,WAAA;AAAA,YACA,KAAO,EAAA;AAAA,WAAA;AAAA,UAJF,UAAW,CAAA;AAAA,SAMnB,CACH,EAAA;AAAA;AAAA;AAAA,GAEJ,EAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"ColumnList.js","sources":["../../src/column-list/ColumnList.tsx"],"sourcesContent":["import { DragDropProvider, useSortable } from \"@vuu-ui/vuu-utils\";\nimport { Checkbox, ListBox, Option, OptionProps, Switch } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n  ColumnDescriptor,\n  ColumnListPermissions,\n} from \"@vuu-ui/vuu-table-types\";\nimport { Icon, IconButton } from \"@vuu-ui/vuu-ui-controls\";\nimport {\n  getColumnLabel,\n  queryClosest,\n  reorderColumnItems,\n} from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport {\n  HTMLAttributes,\n  MouseEventHandler,\n  SyntheticEvent,\n  useCallback,\n  useMemo,\n  useRef,\n} from \"react\";\nimport { ColumnItem } from \"../table-column-settings/useTableSettings\";\n\nimport columnList from \"./ColumnList.css\";\n\nconst classBase = \"vuuColumnList\";\nconst classBaseListItem = \"vuuColumnListItem\";\n\nconst useSorting = (id: string, index: number, allowSort = true) => {\n  const { handleRef: sortableHandleRef, ref: sortableRef } = useSortable({\n    id,\n    index,\n  });\n\n  const noopRef = useCallback(() => {\n    // do nothing\n  }, []);\n\n  const [handleRef, ref] = useMemo(() => {\n    return allowSort ? [sortableHandleRef, sortableRef] : [noopRef, noopRef];\n  }, [allowSort, noopRef, sortableHandleRef, sortableRef]);\n\n  return {\n    handleRef,\n    ref,\n  };\n};\n\nexport type ColumnChangeHandler = (\n  columnName: string,\n  propertyName: keyof ColumnDescriptor | \"subscribed\",\n  value: string | number | boolean,\n) => void;\n\nexport interface ColumnListProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  columnItems: ColumnItem[];\n  onChange: ColumnChangeHandler;\n  onNavigateToColumn?: (columnName: string) => void;\n  onReorderColumnItems?: (columnItems: ColumnItem[]) => void;\n  permissions?: ColumnListPermissions;\n}\n\nconst ColumnListItem = ({\n  className: classNameProp,\n  index,\n  item,\n  permissions: { allowHideColumns, allowRemoveColumns, allowReorderColumns },\n  ...optionProps\n}: OptionProps & {\n  index: number;\n  item: ColumnItem;\n  permissions: ColumnListPermissions;\n}) => {\n  const { handleRef, ref } = useSorting(item.name, index, allowReorderColumns);\n  return (\n    <Option\n      {...optionProps}\n      className={cx(classNameProp, classBaseListItem)}\n      data-name={item.name}\n      id={item.name}\n      ref={ref}\n    >\n      {allowReorderColumns ? (\n        <IconButton\n          data-embedded\n          appearance=\"transparent\"\n          icon=\"draggable\"\n          ref={handleRef}\n          size={16}\n        />\n      ) : null}\n      {item?.isCalculated ? (\n        <Icon name=\"function\" />\n      ) : (\n        <Checkbox\n          className={`${classBase}-checkBox`}\n          checked={item?.subscribed}\n          readOnly={allowRemoveColumns === false}\n        />\n      )}\n      <span className={`${classBase}-text`}>\n        {getColumnLabel(item as ColumnDescriptor)}\n      </span>\n      {allowHideColumns !== false ? (\n        <Switch\n          className={`${classBase}-switch`}\n          checked={item?.hidden !== true}\n          disabled={item?.subscribed !== true}\n        />\n      ) : null}\n    </Option>\n  );\n};\n\nconst defaultPermissions: ColumnListPermissions = {\n  allowHideColumns: true,\n  allowRemoveColumns: true,\n  allowReorderColumns: true,\n};\n\nexport const ColumnList = ({\n  className,\n  columnItems,\n  onChange,\n  onNavigateToColumn,\n  onReorderColumnItems,\n  permissions = defaultPermissions,\n  ...htmlAttributes\n}: ColumnListProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-column-list\",\n    css: columnList,\n    window: targetWindow,\n  });\n  const listRef = useRef<HTMLDivElement>(null);\n\n  const handleChange = useCallback(\n    ({ target }: SyntheticEvent) => {\n      const input = target as HTMLInputElement;\n      const listItem = queryClosest(target, `.${classBaseListItem}`);\n      if (listItem) {\n        const {\n          dataset: { name },\n        } = listItem;\n        if (name) {\n          const saltCheckbox = queryClosest(target, `.${classBase}-checkBox`);\n          const saltSwitch = queryClosest(target, `.${classBase}-switch`);\n\n          if (saltCheckbox) {\n            onChange(name, \"subscribed\", input.checked);\n          } else if (saltSwitch) {\n            onChange(name, \"hidden\", input.checked === false);\n          }\n        }\n      }\n    },\n    [onChange],\n  );\n\n  const handleClick = useCallback<MouseEventHandler>(\n    (evt) => {\n      const targetEl = evt.target as HTMLElement;\n      if (targetEl.classList.contains(\"vuuColumnList-text\")) {\n        const listItemEl = targetEl.closest(\".vuuListItem\") as HTMLElement;\n        if (listItemEl?.dataset.name) {\n          onNavigateToColumn?.(listItemEl.dataset.name);\n        }\n      }\n    },\n    [onNavigateToColumn],\n  );\n\n  const handleDragEnd = useCallback(() => {\n    setTimeout(() => {\n      const listItems =\n        listRef.current?.querySelectorAll<HTMLDivElement>(\".saltOption\");\n      if (listItems) {\n        const orderedIds = Array.from(listItems).map(({ id }) => id);\n        onReorderColumnItems?.(reorderColumnItems(columnItems, orderedIds));\n      }\n    }, 300);\n  }, [columnItems, onReorderColumnItems]);\n\n  return (\n    <DragDropProvider onDragEnd={handleDragEnd}>\n      <div\n        {...htmlAttributes}\n        className={cx(classBase, className, {\n          [`${classBase}-withColumnNavigation`]:\n            typeof onNavigateToColumn === \"function\",\n        })}\n      >\n        <div className={`${classBase}-header`}>\n          <span>Column Selection</span>\n        </div>\n        <div className={`${classBase}-colHeadings`}>\n          <span>Column subscription</span>\n          <span>Visibility</span>\n        </div>\n        <ListBox ref={listRef}>\n          {columnItems.map((columnItem, index) => (\n            <ColumnListItem\n              item={columnItem}\n              index={index}\n              key={columnItem.name}\n              onChange={handleChange}\n              onClick={handleClick}\n              permissions={permissions}\n              value={columnItem}\n            />\n          ))}\n        </ListBox>\n      </div>\n    </DragDropProvider>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;AA2BA,MAAM,SAAY,GAAA,eAAA;AAClB,MAAM,iBAAoB,GAAA,mBAAA;AAE1B,MAAM,UAAa,GAAA,CAAC,EAAY,EAAA,KAAA,EAAe,YAAY,IAAS,KAAA;AAClE,EAAA,MAAM,EAAE,SAAW,EAAA,iBAAA,EAAmB,GAAK,EAAA,WAAA,KAAgB,WAAY,CAAA;AAAA,IACrE,EAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAM,MAAA,OAAA,GAAU,YAAY,MAAM;AAAA,GAElC,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,CAAC,SAAA,EAAW,GAAG,CAAA,GAAI,QAAQ,MAAM;AACrC,IAAA,OAAO,YAAY,CAAC,iBAAA,EAAmB,WAAW,CAAI,GAAA,CAAC,SAAS,OAAO,CAAA;AAAA,KACtE,CAAC,SAAA,EAAW,OAAS,EAAA,iBAAA,EAAmB,WAAW,CAAC,CAAA;AAEvD,EAAO,OAAA;AAAA,IACL,SAAA;AAAA,IACA;AAAA,GACF;AACF,CAAA;AAiBA,MAAM,iBAAiB,CAAC;AAAA,EACtB,SAAW,EAAA,aAAA;AAAA,EACX,KAAA;AAAA,EACA,IAAA;AAAA,EACA,WAAa,EAAA,EAAE,gBAAkB,EAAA,kBAAA,EAAoB,mBAAoB,EAAA;AAAA,EACzE,GAAG;AACL,CAIM,KAAA;AACJ,EAAM,MAAA,EAAE,WAAW,GAAI,EAAA,GAAI,WAAW,IAAK,CAAA,IAAA,EAAM,OAAO,mBAAmB,CAAA;AAC3E,EACE,uBAAA,IAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACE,GAAG,WAAA;AAAA,MACJ,SAAA,EAAW,EAAG,CAAA,aAAA,EAAe,iBAAiB,CAAA;AAAA,MAC9C,aAAW,IAAK,CAAA,IAAA;AAAA,MAChB,IAAI,IAAK,CAAA,IAAA;AAAA,MACT,GAAA;AAAA,MAEC,QAAA,EAAA;AAAA,QACC,mBAAA,mBAAA,GAAA;AAAA,UAAC,UAAA;AAAA,UAAA;AAAA,YACC,eAAa,EAAA,IAAA;AAAA,YACb,UAAW,EAAA,aAAA;AAAA,YACX,IAAK,EAAA,WAAA;AAAA,YACL,GAAK,EAAA,SAAA;AAAA,YACL,IAAM,EAAA;AAAA;AAAA,SAEN,GAAA,IAAA;AAAA,QACH,MAAM,YACL,mBAAA,GAAA,CAAC,IAAK,EAAA,EAAA,IAAA,EAAK,YAAW,CAEtB,mBAAA,GAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,GAAG,SAAS,CAAA,SAAA,CAAA;AAAA,YACvB,SAAS,IAAM,EAAA,UAAA;AAAA,YACf,UAAU,kBAAuB,KAAA;AAAA;AAAA,SACnC;AAAA,wBAEF,GAAA,CAAC,UAAK,SAAW,EAAA,CAAA,EAAG,SAAS,CAC1B,KAAA,CAAA,EAAA,QAAA,EAAA,cAAA,CAAe,IAAwB,CAC1C,EAAA,CAAA;AAAA,QACC,qBAAqB,KACpB,mBAAA,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,GAAG,SAAS,CAAA,OAAA,CAAA;AAAA,YACvB,OAAA,EAAS,MAAM,MAAW,KAAA,IAAA;AAAA,YAC1B,QAAA,EAAU,MAAM,UAAe,KAAA;AAAA;AAAA,SAE/B,GAAA;AAAA;AAAA;AAAA,GACN;AAEJ,CAAA;AAEA,MAAM,kBAA4C,GAAA;AAAA,EAChD,gBAAkB,EAAA,IAAA;AAAA,EAClB,kBAAoB,EAAA,IAAA;AAAA,EACpB,mBAAqB,EAAA;AACvB,CAAA;AAEO,MAAM,aAAa,CAAC;AAAA,EACzB,SAAA;AAAA,EACA,WAAA;AAAA,EACA,QAAA;AAAA,EACA,kBAAA;AAAA,EACA,oBAAA;AAAA,EACA,WAAc,GAAA,kBAAA;AAAA,EACd,GAAG;AACL,CAAuB,KAAA;AACrB,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,iBAAA;AAAA,IACR,GAAK,EAAA,UAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AACD,EAAM,MAAA,OAAA,GAAU,OAAuB,IAAI,CAAA;AAE3C,EAAA,MAAM,YAAe,GAAA,WAAA;AAAA,IACnB,CAAC,EAAE,MAAA,EAA6B,KAAA;AAC9B,MAAA,MAAM,KAAQ,GAAA,MAAA;AACd,MAAA,MAAM,QAAW,GAAA,YAAA,CAAa,MAAQ,EAAA,CAAA,CAAA,EAAI,iBAAiB,CAAE,CAAA,CAAA;AAC7D,MAAA,IAAI,QAAU,EAAA;AACZ,QAAM,MAAA;AAAA,UACJ,OAAA,EAAS,EAAE,IAAK;AAAA,SACd,GAAA,QAAA;AACJ,QAAA,IAAI,IAAM,EAAA;AACR,UAAA,MAAM,YAAe,GAAA,YAAA,CAAa,MAAQ,EAAA,CAAA,CAAA,EAAI,SAAS,CAAW,SAAA,CAAA,CAAA;AAClE,UAAA,MAAM,UAAa,GAAA,YAAA,CAAa,MAAQ,EAAA,CAAA,CAAA,EAAI,SAAS,CAAS,OAAA,CAAA,CAAA;AAE9D,UAAA,IAAI,YAAc,EAAA;AAChB,YAAS,QAAA,CAAA,IAAA,EAAM,YAAc,EAAA,KAAA,CAAM,OAAO,CAAA;AAAA,qBACjC,UAAY,EAAA;AACrB,YAAA,QAAA,CAAS,IAAM,EAAA,QAAA,EAAU,KAAM,CAAA,OAAA,KAAY,KAAK,CAAA;AAAA;AAClD;AACF;AACF,KACF;AAAA,IACA,CAAC,QAAQ;AAAA,GACX;AAEA,EAAA,MAAM,WAAc,GAAA,WAAA;AAAA,IAClB,CAAC,GAAQ,KAAA;AACP,MAAA,MAAM,WAAW,GAAI,CAAA,MAAA;AACrB,MAAA,IAAI,QAAS,CAAA,SAAA,CAAU,QAAS,CAAA,oBAAoB,CAAG,EAAA;AACrD,QAAM,MAAA,UAAA,GAAa,QAAS,CAAA,OAAA,CAAQ,cAAc,CAAA;AAClD,QAAI,IAAA,UAAA,EAAY,QAAQ,IAAM,EAAA;AAC5B,UAAqB,kBAAA,GAAA,UAAA,CAAW,QAAQ,IAAI,CAAA;AAAA;AAC9C;AACF,KACF;AAAA,IACA,CAAC,kBAAkB;AAAA,GACrB;AAEA,EAAM,MAAA,aAAA,GAAgB,YAAY,MAAM;AACtC,IAAA,UAAA,CAAW,MAAM;AACf,MAAA,MAAM,SACJ,GAAA,OAAA,CAAQ,OAAS,EAAA,gBAAA,CAAiC,aAAa,CAAA;AACjE,MAAA,IAAI,SAAW,EAAA;AACb,QAAM,MAAA,UAAA,GAAa,KAAM,CAAA,IAAA,CAAK,SAAS,CAAA,CAAE,IAAI,CAAC,EAAE,EAAG,EAAA,KAAM,EAAE,CAAA;AAC3D,QAAuB,oBAAA,GAAA,kBAAA,CAAmB,WAAa,EAAA,UAAU,CAAC,CAAA;AAAA;AACpE,OACC,GAAG,CAAA;AAAA,GACL,EAAA,CAAC,WAAa,EAAA,oBAAoB,CAAC,CAAA;AAEtC,EACE,uBAAA,GAAA,CAAC,gBAAiB,EAAA,EAAA,SAAA,EAAW,aAC3B,EAAA,QAAA,kBAAA,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAW,EAAA;AAAA,QAClC,CAAC,CAAG,EAAA,SAAS,CAAuB,qBAAA,CAAA,GAClC,OAAO,kBAAuB,KAAA;AAAA,OACjC,CAAA;AAAA,MAED,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,KAAA,EAAA,EAAI,WAAW,CAAG,EAAA,SAAS,WAC1B,QAAC,kBAAA,GAAA,CAAA,MAAA,EAAA,EAAK,8BAAgB,CACxB,EAAA,CAAA;AAAA,wBACC,IAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,CAAA,EAAG,SAAS,CAC1B,YAAA,CAAA,EAAA,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,UAAK,QAAmB,EAAA,qBAAA,EAAA,CAAA;AAAA,0BACzB,GAAA,CAAC,UAAK,QAAU,EAAA,YAAA,EAAA;AAAA,SAClB,EAAA,CAAA;AAAA,wBACA,GAAA,CAAC,WAAQ,GAAK,EAAA,OAAA,EACX,sBAAY,GAAI,CAAA,CAAC,YAAY,KAC5B,qBAAA,GAAA;AAAA,UAAC,cAAA;AAAA,UAAA;AAAA,YACC,IAAM,EAAA,UAAA;AAAA,YACN,KAAA;AAAA,YAEA,QAAU,EAAA,YAAA;AAAA,YACV,OAAS,EAAA,WAAA;AAAA,YACT,WAAA;AAAA,YACA,KAAO,EAAA;AAAA,WAAA;AAAA,UAJF,UAAW,CAAA;AAAA,SAMnB,CACH,EAAA;AAAA;AAAA;AAAA,GAEJ,EAAA,CAAA;AAEJ;;;;"}

package/package.json

@@ -1,25 +1,24 @@
 {
-  "version": "0.13.6",
+  "version": "0.13.7",
   "author": "heswell",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@vuu-ui/vuu-filter-types": "0.13.6",
-    "@vuu-ui/vuu-protocol-types": "0.13.6"
+    "@vuu-ui/vuu-filter-types": "0.13.7",
+    "@vuu-ui/vuu-protocol-types": "0.13.7"
   },
   "dependencies": {
-    "@vuu-ui/vuu-codemirror": "0.13.6",
-    "@vuu-ui/vuu-data-react": "0.13.6",
-    "@vuu-ui/vuu-data-types": "0.13.6",
-    "@vuu-ui/vuu-table-types": "0.13.6",
-    "@vuu-ui/vuu-popups": "0.13.6",
-    "@vuu-ui/vuu-table": "0.13.6",
-    "@vuu-ui/vuu-utils": "0.13.6",
-    "@vuu-ui/vuu-ui-controls": "0.13.6",
+    "@vuu-ui/vuu-codemirror": "0.13.7",
+    "@vuu-ui/vuu-data-react": "0.13.7",
+    "@vuu-ui/vuu-data-types": "0.13.7",
+    "@vuu-ui/vuu-table-types": "0.13.7",
+    "@vuu-ui/vuu-popups": "0.13.7",
+    "@vuu-ui/vuu-table": "0.13.7",
+    "@vuu-ui/vuu-utils": "0.13.7",
+    "@vuu-ui/vuu-ui-controls": "0.13.7",
     "@lezer/lr": "1.4.2",
     "@salt-ds/core": "1.43.0",
     "@salt-ds/styles": "0.2.1",
-    "@salt-ds/window": "0.1.1",
-    "@dnd-kit/react": "^0.1.19"
+    "@salt-ds/window": "0.1.1"
   },
   "peerDependencies": {
     "@floating-ui/react": "^0.26.28",