@vuu-ui/vuu-table-extras 1.0.3 → 2.0.0

package/esm/column-expression-panel/ColumnExpressionPanel.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ColumnExpressionPanel.js","sources":["../../../../packages/vuu-table-extras/src/column-expression-panel/ColumnExpressionPanel.tsx"],"sourcesContent":["import { VuuColumnDataType } from \"@vuu-ui/vuu-protocol-types\";\nimport { ColumnDescriptor, ColumnSettingsProps } from \"@vuu-ui/vuu-table-types\";\nimport { getCalculatedColumnDetails } from \"@vuu-ui/vuu-utils\";\nimport {\n  Dropdown,\n  FormField,\n  FormFieldLabel,\n  Input,\n  Option,\n} from \"@salt-ds/core\";\nimport { HTMLAttributes, useCallback, useRef } from \"react\";\nimport {\n  ColumnExpressionInput,\n  ColumnExpressionSubmitHandler,\n  useColumnExpressionSuggestionProvider,\n} from \"../column-expression-input\";\nimport { useColumnExpression } from \"./useColumnExpression\";\n\nconst classBase = \"vuuColumnExpressionPanel\";\n\nexport interface ColumnExpressionPanelProps\n  extends HTMLAttributes<HTMLDivElement>,\n    Pick<ColumnSettingsProps, \"tableConfig\" | \"vuuTable\"> {\n  column: ColumnDescriptor;\n  /**\n   * Callback prop, invoked on every change to calculated column definition\n   * @param calculatedColumnName the full calculated column name\n   */\n  onChangeName?: (name: string) => void;\n  onChangeServerDataType?: (name: VuuColumnDataType) => void;\n}\n\nexport const ColumnExpressionPanel = ({\n  column: columnProp,\n  onChangeName: onChangeNameProp,\n  onChangeServerDataType: onChangeServerDataTypeProp,\n  tableConfig,\n  vuuTable,\n}: ColumnExpressionPanelProps) => {\n  const typeRef = useRef<HTMLButtonElement>(null);\n  const { column, onChangeExpression, onChangeName, onChangeServerDataType } =\n    useColumnExpression({\n      column: columnProp,\n      onChangeName: onChangeNameProp,\n      onChangeServerDataType: onChangeServerDataTypeProp,\n    });\n  // The initial value to pass into the Expression Input. That is a\n  // CodeMirror editor and will manage its own state once initialised.\n  const initialExpressionRef = useRef<string>(\n    getCalculatedColumnDetails(column).expression ?? \"\",\n  );\n\n  const suggestionProvider = useColumnExpressionSuggestionProvider({\n    columns: tableConfig.columns,\n    table: vuuTable,\n  });\n\n  const handleSubmitExpression =\n    useCallback<ColumnExpressionSubmitHandler>(() => {\n      if (typeRef.current) {\n        (\n          typeRef.current?.querySelector(\"button\") as HTMLButtonElement\n        )?.focus();\n      }\n    }, []);\n\n  const { name, serverDataType } = getCalculatedColumnDetails(column);\n\n  return (\n    <div className={classBase}>\n      <div className=\"vuuColumnSettingsPanel-header\">\n        <span>Calculation</span>\n      </div>\n\n      <FormField data-field=\"column-name\">\n        <FormFieldLabel>Column Name</FormFieldLabel>\n        <Input className=\"vuuInput\" onChange={onChangeName} value={name} />\n      </FormField>\n\n      <FormField data-field=\"column-expression\">\n        <FormFieldLabel>Expression</FormFieldLabel>\n        <ColumnExpressionInput\n          onChange={onChangeExpression}\n          onSubmitExpression={handleSubmitExpression}\n          source={initialExpressionRef.current}\n          suggestionProvider={suggestionProvider}\n        />\n      </FormField>\n      <FormField data-field=\"type\">\n        <FormFieldLabel>Column type</FormFieldLabel>\n        <Dropdown\n          className={`${classBase}-type`}\n          onSelectionChange={onChangeServerDataType}\n          ref={typeRef}\n          selected={serverDataType ? [serverDataType] : []}\n          value={serverDataType}\n        >\n          <Option value=\"boolean\">Boolean</Option>\n          <Option value=\"double\">Double</Option>\n          <Option value=\"long\">Long</Option>\n          <Option value=\"string\">String</Option>\n        </Dropdown>\n      </FormField>\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}

package/esm/column-expression-panel/useColumnExpression.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useColumnExpression.js","sources":["../../../../packages/vuu-table-extras/src/column-expression-panel/useColumnExpression.ts"],"sourcesContent":["import { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport {\n  getCalculatedColumnDetails,\n  isVuuColumnDataType,\n  setCalculatedColumnExpression,\n  setCalculatedColumnName,\n  setCalculatedColumnType,\n} from \"@vuu-ui/vuu-utils\";\nimport {\n  FormEventHandler,\n  SyntheticEvent,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\nimport { ColumnExpressionPanelProps } from \"./ColumnExpressionPanel\";\n\nexport type ColumnExpressionHookProps = Pick<\n  ColumnExpressionPanelProps,\n  \"column\" | \"onChangeName\" | \"onChangeServerDataType\"\n>;\n\nconst applyDefaults = (column: ColumnDescriptor) => {\n  const { name, expression, serverDataType } =\n    getCalculatedColumnDetails(column);\n  if (serverDataType === undefined) {\n    return {\n      ...column,\n      name: `${name}:string:${expression}`,\n    };\n  } else {\n    return column;\n  }\n};\n\nexport const useColumnExpression = ({\n  column: columnProp,\n  onChangeName: onChangeNameProp,\n  onChangeServerDataType: onChangeServerDataTypeProp,\n}: ColumnExpressionHookProps) => {\n  const [column, _setColumn] = useState<ColumnDescriptor>(\n    applyDefaults(columnProp),\n  );\n  const columnRef = useRef<ColumnDescriptor>(columnProp);\n  const setColumn = useCallback((column: ColumnDescriptor) => {\n    columnRef.current = column;\n    _setColumn(column);\n  }, []);\n\n  // We need to track column name in a ref because ColunExpressionInput\n  // is not a pure React component, it hosts a CodeMirror editor. We\n  // do not want to cause it to render mid-edit. Therefore it uses memo\n  // and only renders on initial load. onChangeExpression must be stable.\n  // const columnNameRef = useRef<string>(column.name);\n  // const expressionRef = useRef(getCalculatedColumnDetails(column)[1]);\n\n  const onChangeName = useCallback<FormEventHandler>(\n    (evt) => {\n      const { value } = evt.target as HTMLInputElement;\n      const newColumn = setCalculatedColumnName(column, value);\n      // columnNameRef.current = newColumn.name;\n      setColumn(newColumn);\n      onChangeNameProp?.(newColumn.name);\n    },\n    [column, onChangeNameProp, setColumn],\n  );\n\n  const onChangeExpression = useCallback(\n    (value: string) => {\n      // we do not set state when this changes as the codemirror editor\n      // manages state of the expression for us until complete\n      const expression = value.trim();\n      // expressionRef.current = expression;\n      // const [name, , type] = column.name.split(\":\");\n      // columnNameRef.current = `${name}:${expression}:${type}`;\n\n      const { current: column } = columnRef;\n      const newColumn = setCalculatedColumnExpression(column, expression);\n      setColumn(newColumn);\n\n      onChangeNameProp?.(newColumn.name);\n\n      // console.log(`calculatedColumnName ${columnNameRef.current}`);\n    },\n    [onChangeNameProp, setColumn],\n  );\n\n  const onChangeServerDataType = useCallback(\n    (_e: SyntheticEvent, [serverDataType]: string[]) => {\n      if (isVuuColumnDataType(serverDataType)) {\n        const newColumn = setCalculatedColumnType(column, serverDataType);\n        setColumn(newColumn);\n        onChangeNameProp?.(newColumn.name);\n        onChangeServerDataTypeProp?.(serverDataType);\n      }\n    },\n    [column, onChangeNameProp, onChangeServerDataTypeProp, setColumn],\n  );\n\n  return {\n    column,\n    onChangeExpression,\n    onChangeName,\n    onChangeServerDataType,\n  };\n};\n"],"names":["column"],"mappings":";;;AAsBA,MAAM,aAAA,GAAgB,CAAC,MAA6B,KAAA;AAClD,EAAA,MAAM,EAAE,IAAM,EAAA,UAAA,EAAY,cAAe,EAAA,GACvC,2BAA2B,MAAM,CAAA;AACnC,EAAA,IAAI,mBAAmB,KAAW,CAAA,EAAA;AAChC,IAAO,OAAA;AAAA,MACL,GAAG,MAAA;AAAA,MACH,IAAM,EAAA,CAAA,EAAG,IAAI,CAAA,QAAA,EAAW,UAAU,CAAA;AAAA,KACpC;AAAA,GACK,MAAA;AACL,IAAO,OAAA,MAAA;AAAA;AAEX,CAAA;AAEO,MAAM,sBAAsB,CAAC;AAAA,EAClC,MAAQ,EAAA,UAAA;AAAA,EACR,YAAc,EAAA,gBAAA;AAAA,EACd,sBAAwB,EAAA;AAC1B,CAAiC,KAAA;AAC/B,EAAM,MAAA,CAAC,MAAQ,EAAA,UAAU,CAAI,GAAA,QAAA;AAAA,IAC3B,cAAc,UAAU;AAAA,GAC1B;AACA,EAAM,MAAA,SAAA,GAAY,OAAyB,UAAU,CAAA;AACrD,EAAM,MAAA,SAAA,GAAY,WAAY,CAAA,CAACA,OAA6B,KAAA;AAC1D,IAAA,SAAA,CAAU,OAAUA,GAAAA,OAAAA;AACpB,IAAA,UAAA,CAAWA,OAAM,CAAA;AAAA,GACnB,EAAG,EAAE,CAAA;AASL,EAAA,MAAM,YAAe,GAAA,WAAA;AAAA,IACnB,CAAC,GAAQ,KAAA;AACP,MAAM,MAAA,EAAE,KAAM,EAAA,GAAI,GAAI,CAAA,MAAA;AACtB,MAAM,MAAA,SAAA,GAAY,uBAAwB,CAAA,MAAA,EAAQ,KAAK,CAAA;AAEvD,MAAA,SAAA,CAAU,SAAS,CAAA;AACnB,MAAA,gBAAA,GAAmB,UAAU,IAAI,CAAA;AAAA,KACnC;AAAA,IACA,CAAC,MAAQ,EAAA,gBAAA,EAAkB,SAAS;AAAA,GACtC;AAEA,EAAA,MAAM,kBAAqB,GAAA,WAAA;AAAA,IACzB,CAAC,KAAkB,KAAA;AAGjB,MAAM,MAAA,UAAA,GAAa,MAAM,IAAK,EAAA;AAK9B,MAAM,MAAA,EAAE,OAASA,EAAAA,OAAAA,EAAW,GAAA,SAAA;AAC5B,MAAM,MAAA,SAAA,GAAY,6BAA8BA,CAAAA,OAAAA,EAAQ,UAAU,CAAA;AAClE,MAAA,SAAA,CAAU,SAAS,CAAA;AAEnB,MAAA,gBAAA,GAAmB,UAAU,IAAI,CAAA;AAAA,KAGnC;AAAA,IACA,CAAC,kBAAkB,SAAS;AAAA,GAC9B;AAEA,EAAA,MAAM,sBAAyB,GAAA,WAAA;AAAA,IAC7B,CAAC,EAAA,EAAoB,CAAC,cAAc,CAAgB,KAAA;AAClD,MAAI,IAAA,mBAAA,CAAoB,cAAc,CAAG,EAAA;AACvC,QAAM,MAAA,SAAA,GAAY,uBAAwB,CAAA,MAAA,EAAQ,cAAc,CAAA;AAChE,QAAA,SAAA,CAAU,SAAS,CAAA;AACnB,QAAA,gBAAA,GAAmB,UAAU,IAAI,CAAA;AACjC,QAAA,0BAAA,GAA6B,cAAc,CAAA;AAAA;AAC7C,KACF;AAAA,IACA,CAAC,MAAA,EAAQ,gBAAkB,EAAA,0BAAA,EAA4B,SAAS;AAAA,GAClE;AAEA,EAAO,OAAA;AAAA,IACL,MAAA;AAAA,IACA,kBAAA;AAAA,IACA,YAAA;AAAA,IACA;AAAA,GACF;AACF;;;;"}

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

@@ -1,4 +0,0 @@
-var cssColumnList = ".vuuColumnList {\n  --vuuMeasuredContainer-flex: 1 1 1px;\n  --vuu-svg-function: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 14 14\"><path d=\"M5.8625 10.5V9.625H6.72291L8.4875 7.59792L6.72291 5.54167H5.64375L4.60833 10.8792C4.53055 11.3167 4.36527 11.6545 4.1125 11.8927C3.85972 12.1309 3.53402 12.25 3.13541 12.25C2.7368 12.25 2.40382 12.1333 2.13645 11.9C1.86909 11.6667 1.73541 11.375 1.73541 11.025C1.73541 10.7625 1.80833 10.551 1.95416 10.3906C2.1 10.2302 2.28958 10.15 2.52291 10.15C2.72708 10.15 2.89479 10.2083 3.02604 10.325C3.15729 10.4417 3.22291 10.5972 3.22291 10.7917C3.22291 10.8986 3.20104 10.9983 3.15729 11.0906C3.11354 11.183 3.05277 11.2583 2.975 11.3167C3.01388 11.3361 3.0552 11.3507 3.09895 11.3604C3.1427 11.3701 3.18888 11.375 3.2375 11.375C3.36388 11.375 3.47083 11.3142 3.55833 11.1927C3.64583 11.0712 3.70902 10.9132 3.74791 10.7188L4.75416 5.54167H2.91666V4.66667H4.91458L5.22083 3.12083C5.30833 2.68333 5.48333 2.34549 5.74583 2.10729C6.00833 1.8691 6.33402 1.75 6.72291 1.75C7.12152 1.75 7.44965 1.86667 7.70729 2.1C7.96493 2.33333 8.09375 2.625 8.09375 2.975C8.09375 3.2375 8.02083 3.44896 7.875 3.60938C7.72916 3.76979 7.53958 3.85 7.30625 3.85C7.1118 3.85 6.94652 3.7941 6.81041 3.68229C6.6743 3.57049 6.60625 3.42222 6.60625 3.2375C6.60625 3.14028 6.62569 3.04549 6.66458 2.95312C6.70347 2.86076 6.75208 2.78542 6.81041 2.72708C6.79097 2.70764 6.7618 2.69063 6.72291 2.67604C6.68402 2.66146 6.64513 2.65417 6.60625 2.65417C6.47986 2.65417 6.37048 2.7125 6.27812 2.82917C6.18576 2.94583 6.12013 3.09653 6.08125 3.28125L5.81875 4.66667H8.575V5.54167H7.88958L9.1 6.94167L10.2375 5.54167H9.5375V4.66667H12.25V5.54167H11.4042L9.65416 7.59792L11.4042 9.625H12.25V10.5H9.5375V9.625H10.2375L9.07083 8.26875L7.875 9.625H8.575V10.5H5.8625Z\"/></svg>');\n  --vuuList-borderStyle: none;\n  --vuuListItem-padding: 0;\n  display: flex;\n  flex-direction: column;\n  padding: 0 var(--salt-spacing-100);\n\n  .saltListBox {\n    background-color: inherit;\n  }\n\n  .saltOption {\n    align-items: center;\n    background-color: inherit;\n    border-bottom: var(--vuuColumnListItem-border, solid) 1px\n      var(--salt-separable-tertiary-borderColor);\n    gap: var(--salt-spacing-200);\n    height: calc(var(--salt-size-base) + var(--salt-spacing-200));\n    .vuuIcon {\n      --vuu-icon-color: var(--salt-content-secondary-foreground);\n    }\n\n    .vuuHighlight {\n      color: var(--vuu-color-blue-40);\n      text-decoration: underline;\n    }\n\n  }\n\n  .vuuColumnList-text {\n    flex: 1 1 auto;\n  }\n\n}\n\n[data-icon=\"function\"] {\n  --vuu-icon-svg: var(--vuu-svg-function);\n}\n\n.vuuColumnList-withColumnNavgation {\n  .vuuColumnList-text:hover {\n    font-weight: 600;\n    text-decoration: underline;\n  }\n}\n\n.vuuColumnList-search {\n  --saltInput-paddingLeft: var(--salt-spacing-300);\n  padding: var(--salt-spacing-200) var(--salt-spacing-300) var(--salt-spacing-300) var(--salt-spacing-300);\n}\n\n.vuuColumnList-header {\n  align-items: center;\n  border-top: solid 2px var(--vuu-color-gray-30);\n  display: flex;\n  font-size: 14px;\n  font-weight: 600;\n  flex: 0 0 var(--vuuColumnList-headerHeight, 32px);\n  padding-left: var(--salt-spacing-400);\n\n}\n\n.vuuColumnList-colHeadings {\n  border-bottom: solid 2px var(--vuu-color-gray-30);\n  color: var(--vuu-color-gray-50);\n  display: flex;\n  flex: 0 0 24px;\n  font-size: 10px;\n  justify-content: space-between;\n  margin-top: 16px;\n  padding-bottom: 8px;\n}\n";
-
-export { cssColumnList as default };
-//# sourceMappingURL=ColumnList.css.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ColumnList.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/esm/column-list/ColumnList.js

@@ -1,214 +0,0 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { Input, Checkbox, ListBox, Option, 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 { reorderColumnItems, DragDropProvider, getColumnLabel, useSortable } from '@vuu-ui/vuu-utils';
-import cx from 'clsx';
-import { useRef, useMemo, useCallback } from 'react';
-import { useColumnList } from './useColumnList.js';
-import cssColumnList from './ColumnList.css.js';
-import { useHighlighting } from '@vuu-ui/vuu-table';
-
-const classBase = "vuuColumnList";
-const classBaseListItem = "vuuColumnListItem";
-const searchIcon = /* @__PURE__ */ jsx("span", { "data-icon": "search" });
-const NO_SELECTION = [];
-const useSorting = (id, index, allowSort = true) => {
-  const { handleRef: sortableHandleRef, ref: sortableRef } = useSortable({
-    id,
-    index
-  });
-  const noopRef = useCallback(() => {
-  }, []);
-  const [handleRef, ref] = useMemo(() => {
-    return allowSort ? [sortableHandleRef, sortableRef] : [noopRef, noopRef];
-  }, [allowSort, noopRef, sortableHandleRef, sortableRef]);
-  return {
-    handleRef,
-    ref
-  };
-};
-const defaultPermissions = {
-  allowColumnSearch: false,
-  allowHideColumns: true,
-  allowRemoveColumns: true,
-  allowReorderColumns: true
-};
-const ColumnListItem = ({
-  className: classNameProp,
-  index,
-  item,
-  permissions: { allowHideColumns, allowRemoveColumns, allowReorderColumns },
-  searchPattern = "",
-  ...optionProps
-}) => {
-  const hideOnly = allowHideColumns && !allowRemoveColumns;
-  const removeOnly = !allowHideColumns && allowRemoveColumns;
-  const hideAndRemove = allowHideColumns && allowRemoveColumns;
-  const { handleRef, ref } = useSorting(item.name, index, allowReorderColumns);
-  const value = getColumnLabel(item);
-  const valueWithHighlighting = useHighlighting(value, searchPattern);
-  return /* @__PURE__ */ jsxs(
-    Option,
-    {
-      ...optionProps,
-      className: cx(classNameProp, classBaseListItem),
-      "data-name": item.name,
-      id: item.name,
-      ref,
-      children: [
-        allowReorderColumns ? /* @__PURE__ */ jsx(
-          IconButton,
-          {
-            "data-embedded": true,
-            appearance: "transparent",
-            icon: "draggable",
-            ref: handleRef,
-            size: 16
-          }
-        ) : null,
-        item?.isCalculated ? /* @__PURE__ */ jsx(Icon, { name: "function" }) : null,
-        hideAndRemove || hideOnly || removeOnly ? /* @__PURE__ */ jsx(
-          Checkbox,
-          {
-            className: `${classBase}-checkBox`,
-            checked: hideOnly ? item?.hidden !== true : item?.subscribed
-          }
-        ) : null,
-        /* @__PURE__ */ jsx("span", { className: `${classBase}-text`, children: valueWithHighlighting }),
-        hideAndRemove ? /* @__PURE__ */ jsx(
-          Switch,
-          {
-            className: `${classBase}-switch`,
-            checked: item?.hidden !== true,
-            disabled: item?.subscribed !== true
-          }
-        ) : null
-      ]
-    }
-  );
-};
-const ColumnList = ({
-  className,
-  columnItems,
-  onChange,
-  onNavigateToColumn,
-  onReorderColumnItems,
-  permissions: {
-    allowColumnSearch = defaultPermissions.allowColumnSearch,
-    allowHideColumns = defaultPermissions.allowHideColumns,
-    allowRemoveColumns = defaultPermissions.allowRemoveColumns,
-    allowReorderColumns = defaultPermissions.allowReorderColumns
-  } = defaultPermissions,
-  ...htmlAttributes
-}) => {
-  const targetWindow = useWindow();
-  useComponentCssInjection({
-    testId: "vuu-column-list",
-    css: cssColumnList,
-    window: targetWindow
-  });
-  const listRef = useRef(null);
-  const permissions = useMemo(
-    () => ({
-      allowHideColumns,
-      allowRemoveColumns,
-      allowReorderColumns
-    }),
-    [allowHideColumns, allowRemoveColumns, allowReorderColumns]
-  );
-  const {
-    onChangeListItem,
-    onChangeSearchInput,
-    searchState,
-    visibleColumnItems
-  } = useColumnList({
-    classBase,
-    classBaseListItem,
-    columnItems,
-    permissions,
-    onChange
-  });
-  const handleClick = useCallback(
-    (evt) => {
-      const targetEl = evt.target;
-      if (targetEl.classList.contains("vuuColumnList-text")) {
-        const listItemEl = targetEl.closest(".vuuListItem");
-        if (listItemEl?.dataset.name) {
-          onNavigateToColumn?.(listItemEl.dataset.name);
-        }
-      }
-    },
-    [onNavigateToColumn]
-  );
-  const handleDragEnd = useCallback(() => {
-    setTimeout(() => {
-      const listItems = listRef.current?.querySelectorAll(".saltOption");
-      if (listItems) {
-        const orderedIds = Array.from(listItems).map(({ id }) => id);
-        onReorderColumnItems?.(reorderColumnItems(columnItems, orderedIds));
-      }
-    }, 300);
-  }, [columnItems, onReorderColumnItems]);
-  const searchCallbackRef = useCallback((el) => {
-    setTimeout(() => {
-      el?.querySelector("input")?.focus();
-    }, 100);
-  }, []);
-  const handleToggleAll = useCallback(() => {
-    console.log("toggle all");
-  }, []);
-  return /* @__PURE__ */ jsx(DragDropProvider, { onDragEnd: handleDragEnd, children: /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ...htmlAttributes,
-      className: cx(classBase, className, {
-        [`${classBase}-withColumnNavigation`]: typeof onNavigateToColumn === "function"
-      }),
-      children: [
-        allowColumnSearch ? /* @__PURE__ */ jsx("form", { className: `${classBase}-search`, role: "search", children: /* @__PURE__ */ jsx(
-          Input,
-          {
-            startAdornment: searchIcon,
-            placeholder: "Find column",
-            ref: searchCallbackRef,
-            value: searchState.searchText,
-            onChange: onChangeSearchInput
-          }
-        ) }) : null,
-        /* @__PURE__ */ jsxs("div", { className: `${classBase}-header`, children: [
-          allowHideColumns || allowRemoveColumns ? /* @__PURE__ */ jsx(
-            Checkbox,
-            {
-              className: `${classBase}-checkBox`,
-              checked: false,
-              onClick: handleToggleAll
-            }
-          ) : null,
-          /* @__PURE__ */ jsx("span", { children: "Column Name" })
-        ] }),
-        allowHideColumns && allowRemoveColumns ? /* @__PURE__ */ jsxs("div", { className: `${classBase}-colHeadings`, children: [
-          /* @__PURE__ */ jsx("span", { children: "Column subscription" }),
-          /* @__PURE__ */ jsx("span", { children: "Visibility" })
-        ] }) : null,
-        /* @__PURE__ */ jsx(ListBox, { ref: listRef, selected: NO_SELECTION, children: visibleColumnItems.map((columnItem, index) => /* @__PURE__ */ jsx(
-          ColumnListItem,
-          {
-            item: columnItem,
-            index,
-            onChange: onChangeListItem,
-            onClick: handleClick,
-            permissions,
-            searchPattern: searchState.searchText.toLowerCase(),
-            value: columnItem
-          },
-          columnItem.name
-        )) })
-      ]
-    }
-  ) });
-};
-
-export { ColumnList, classBase, classBaseListItem };
-//# sourceMappingURL=ColumnList.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ColumnList.js","sources":["../../../../packages/vuu-table-extras/src/column-list/ColumnList.tsx"],"sourcesContent":["import {\n  Checkbox,\n  Input,\n  ListBox,\n  Option,\n  OptionProps,\n  Switch,\n} 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  DragDropProvider,\n  getColumnLabel,\n  reorderColumnItems,\n  useSortable,\n} from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport {\n  HTMLAttributes,\n  MouseEventHandler,\n  RefCallback,\n  useCallback,\n  useMemo,\n  useRef,\n} from \"react\";\nimport {\n  type ColumnItem,\n  type ColumnSearchProps,\n  useColumnList,\n} from \"./useColumnList\";\n\nimport cssColumnList from \"./ColumnList.css\";\nimport { useHighlighting } from \"@vuu-ui/vuu-table\";\n\nexport const classBase = \"vuuColumnList\";\nexport const classBaseListItem = \"vuuColumnListItem\";\n\nconst searchIcon = <span data-icon=\"search\" />;\nconst NO_SELECTION: string[] = [] as const;\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 interface ColumnListProps\n  extends Pick<ColumnSearchProps, \"columnItems\" | \"onChange\">,\n    Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  onNavigateToColumn?: (columnName: string) => void;\n  onReorderColumnItems?: (columnItems: ColumnItem[]) => void;\n  permissions?: ColumnListPermissions;\n}\n\nconst defaultPermissions: ColumnListPermissions = {\n  allowColumnSearch: false,\n  allowHideColumns: true,\n  allowRemoveColumns: true,\n  allowReorderColumns: true,\n};\n\nconst ColumnListItem = ({\n  className: classNameProp,\n  index,\n  item,\n  permissions: { allowHideColumns, allowRemoveColumns, allowReorderColumns },\n  searchPattern = \"\",\n  ...optionProps\n}: OptionProps & {\n  index: number;\n  item: ColumnItem;\n  permissions: ColumnListPermissions;\n  searchPattern?: Lowercase<string>;\n}) => {\n  const hideOnly = allowHideColumns && !allowRemoveColumns;\n  const removeOnly = !allowHideColumns && allowRemoveColumns;\n  const hideAndRemove = allowHideColumns && allowRemoveColumns;\n\n  const { handleRef, ref } = useSorting(item.name, index, allowReorderColumns);\n  const value = getColumnLabel(item as ColumnDescriptor);\n  const valueWithHighlighting = useHighlighting(value, searchPattern);\n\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 ? <Icon name=\"function\" /> : null}\n      {hideAndRemove || hideOnly || removeOnly ? (\n        <Checkbox\n          className={`${classBase}-checkBox`}\n          checked={hideOnly ? item?.hidden !== true : item?.subscribed}\n        />\n      ) : null}\n      <span className={`${classBase}-text`}>{valueWithHighlighting}</span>\n      {hideAndRemove ? (\n        <Switch\n          className={`${classBase}-switch`}\n          checked={item?.hidden !== true}\n          disabled={item?.subscribed !== true}\n        />\n      ) : null}\n    </Option>\n  );\n};\n\nexport const ColumnList = ({\n  className,\n  columnItems,\n  onChange,\n  onNavigateToColumn,\n  onReorderColumnItems,\n  permissions: {\n    allowColumnSearch = defaultPermissions.allowColumnSearch,\n    allowHideColumns = defaultPermissions.allowHideColumns,\n    allowRemoveColumns = defaultPermissions.allowRemoveColumns,\n    allowReorderColumns = defaultPermissions.allowReorderColumns,\n  } = defaultPermissions,\n  ...htmlAttributes\n}: ColumnListProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-column-list\",\n    css: cssColumnList,\n    window: targetWindow,\n  });\n  const listRef = useRef<HTMLDivElement>(null);\n  const permissions = useMemo(\n    () => ({\n      allowHideColumns,\n      allowRemoveColumns,\n      allowReorderColumns,\n    }),\n    [allowHideColumns, allowRemoveColumns, allowReorderColumns],\n  );\n\n  const {\n    onChangeListItem,\n    onChangeSearchInput,\n    searchState,\n    visibleColumnItems,\n  } = useColumnList({\n    classBase,\n    classBaseListItem,\n    columnItems,\n    permissions,\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  const searchCallbackRef = useCallback<RefCallback<HTMLElement>>((el) => {\n    setTimeout(() => {\n      el?.querySelector(\"input\")?.focus();\n    }, 100);\n  }, []);\n\n  const handleToggleAll = useCallback(() => {\n    console.log(\"toggle all\");\n  }, []);\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        {allowColumnSearch ? (\n          <form className={`${classBase}-search`} role=\"search\">\n            <Input\n              startAdornment={searchIcon}\n              placeholder=\"Find column\"\n              ref={searchCallbackRef}\n              value={searchState.searchText}\n              onChange={onChangeSearchInput}\n            />\n          </form>\n        ) : null}\n        <div className={`${classBase}-header`}>\n          {allowHideColumns || allowRemoveColumns ? (\n            <Checkbox\n              className={`${classBase}-checkBox`}\n              checked={false}\n              onClick={handleToggleAll}\n            />\n          ) : null}\n\n          <span>Column Name</span>\n        </div>\n        {allowHideColumns && allowRemoveColumns ? (\n          <div className={`${classBase}-colHeadings`}>\n            <span>Column subscription</span>\n            <span>Visibility</span>\n          </div>\n        ) : null}\n        <ListBox ref={listRef} selected={NO_SELECTION}>\n          {visibleColumnItems.map((columnItem, index) => (\n            <ColumnListItem\n              item={columnItem}\n              index={index}\n              key={columnItem.name}\n              onChange={onChangeListItem}\n              onClick={handleClick}\n              permissions={permissions}\n              searchPattern={\n                searchState.searchText.toLowerCase() as Lowercase<string>\n              }\n              value={columnItem}\n            />\n          ))}\n        </ListBox>\n      </div>\n    </DragDropProvider>\n  );\n};\n"],"names":[],"mappings":"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"}

package/esm/column-list/useColumnList.js

@@ -1,64 +0,0 @@
-import { useState, useRef, useMemo, useCallback } from 'react';
-import { queryClosest } from '@vuu-ui/vuu-utils';
-
-const useColumnList = ({
-  classBase,
-  classBaseListItem,
-  columnItems,
-  onChange,
-  permissions: { allowHideColumns, allowRemoveColumns }
-}) => {
-  const [searchState, setSearchState] = useState({ searchText: "" });
-  const visibleColumnsRef = useRef(void 0);
-  const hideOnly = useMemo(
-    () => allowHideColumns && !allowRemoveColumns,
-    [allowHideColumns, allowRemoveColumns]
-  );
-  useMemo(() => {
-    const value = searchState.searchText.toLowerCase();
-    if (value) {
-      const pattern = value.toLowerCase();
-      visibleColumnsRef.current = columnItems.filter(
-        ({ name, label = name }) => label.toLowerCase().indexOf(pattern) !== -1
-      );
-    } else {
-      visibleColumnsRef.current = void 0;
-    }
-  }, [columnItems, searchState.searchText]);
-  const handleChangeSearchInput = useCallback((evt) => {
-    const { value } = evt.target;
-    setSearchState({
-      searchText: value
-    });
-  }, []);
-  const handleChangeListItem = useCallback(
-    ({ target }) => {
-      const input = target;
-      const listItem = queryClosest(target, `.${classBaseListItem}`);
-      if (listItem) {
-        const {
-          dataset: { name }
-        } = listItem;
-        if (name) {
-          const saltCheckbox = queryClosest(target, `.${classBase}-checkBox`);
-          const saltSwitch = queryClosest(target, `.${classBase}-switch`);
-          if (saltCheckbox && !hideOnly) {
-            onChange(name, "subscribed", input.checked);
-          } else if (saltSwitch || hideOnly) {
-            onChange(name, "hidden", input.checked === false);
-          }
-        }
-      }
-    },
-    [classBase, classBaseListItem, hideOnly, onChange]
-  );
-  return {
-    onChangeSearchInput: handleChangeSearchInput,
-    onChangeListItem: handleChangeListItem,
-    searchState,
-    visibleColumnItems: visibleColumnsRef.current ?? columnItems
-  };
-};
-
-export { useColumnList };
-//# sourceMappingURL=useColumnList.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"useColumnList.js","sources":["../../../../packages/vuu-table-extras/src/column-list/useColumnList.ts"],"sourcesContent":["import {\n  ColumnDescriptor,\n  ColumnListPermissions,\n} from \"@vuu-ui/vuu-table-types\";\nimport {\n  FormEventHandler,\n  SyntheticEvent,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { queryClosest } from \"@vuu-ui/vuu-utils\";\n\nexport type ColumnChangeHandler = (\n  columnName: string,\n  propertyName: keyof ColumnDescriptor | \"subscribed\",\n  value: string | number | boolean,\n) => void;\n\nexport type ColumnItem = Pick<\n  ColumnDescriptor,\n  \"hidden\" | \"label\" | \"name\" | \"serverDataType\"\n> & {\n  isCalculated: boolean;\n  subscribed: boolean;\n};\n\nexport interface ColumnSearchProps {\n  classBase: string;\n  classBaseListItem: string;\n  columnItems: ColumnItem[];\n  onChange: ColumnChangeHandler;\n  permissions: ColumnListPermissions;\n}\n\nexport const useColumnList = ({\n  classBase,\n  classBaseListItem,\n  columnItems,\n  onChange,\n  permissions: { allowHideColumns, allowRemoveColumns },\n}: ColumnSearchProps) => {\n  const [searchState, setSearchState] = useState<{\n    searchText: string;\n  }>({ searchText: \"\" });\n\n  const visibleColumnsRef = useRef<ColumnItem[] | undefined>(undefined);\n\n  const hideOnly = useMemo(\n    () => allowHideColumns && !allowRemoveColumns,\n    [allowHideColumns, allowRemoveColumns],\n  );\n\n  useMemo(() => {\n    const value = searchState.searchText.toLowerCase();\n    if (value) {\n      const pattern = value.toLowerCase();\n      visibleColumnsRef.current = columnItems.filter(\n        ({ name, label = name }) => label.toLowerCase().indexOf(pattern) !== -1,\n      );\n    } else {\n      visibleColumnsRef.current = undefined;\n    }\n  }, [columnItems, searchState.searchText]);\n\n  const handleChangeSearchInput = useCallback<FormEventHandler>((evt) => {\n    const { value } = evt.target as HTMLInputElement;\n    setSearchState({\n      searchText: value,\n    });\n  }, []);\n\n  const handleChangeListItem = 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 && !hideOnly) {\n            onChange(name, \"subscribed\", input.checked);\n          } else if (saltSwitch || hideOnly) {\n            onChange(name, \"hidden\", input.checked === false);\n          }\n        }\n      }\n    },\n    [classBase, classBaseListItem, hideOnly, onChange],\n  );\n\n  return {\n    onChangeSearchInput: handleChangeSearchInput,\n    onChangeListItem: handleChangeListItem,\n    searchState,\n    visibleColumnItems: visibleColumnsRef.current ?? columnItems,\n  };\n};\n"],"names":[],"mappings":";;;AAoCO,MAAM,gBAAgB,CAAC;AAAA,EAC5B,SAAA;AAAA,EACA,iBAAA;AAAA,EACA,WAAA;AAAA,EACA,QAAA;AAAA,EACA,WAAA,EAAa,EAAE,gBAAA,EAAkB,kBAAmB;AACtD,CAAyB,KAAA;AACvB,EAAM,MAAA,CAAC,aAAa,cAAc,CAAA,GAAI,SAEnC,EAAE,UAAA,EAAY,IAAI,CAAA;AAErB,EAAM,MAAA,iBAAA,GAAoB,OAAiC,KAAS,CAAA,CAAA;AAEpE,EAAA,MAAM,QAAW,GAAA,OAAA;AAAA,IACf,MAAM,oBAAoB,CAAC,kBAAA;AAAA,IAC3B,CAAC,kBAAkB,kBAAkB;AAAA,GACvC;AAEA,EAAA,OAAA,CAAQ,MAAM;AACZ,IAAM,MAAA,KAAA,GAAQ,WAAY,CAAA,UAAA,CAAW,WAAY,EAAA;AACjD,IAAA,IAAI,KAAO,EAAA;AACT,MAAM,MAAA,OAAA,GAAU,MAAM,WAAY,EAAA;AAClC,MAAA,iBAAA,CAAkB,UAAU,WAAY,CAAA,MAAA;AAAA,QACtC,CAAC,EAAE,IAAA,EAAM,KAAQ,GAAA,IAAA,EAAW,KAAA,KAAA,CAAM,WAAY,EAAA,CAAE,OAAQ,CAAA,OAAO,CAAM,KAAA,CAAA;AAAA,OACvE;AAAA,KACK,MAAA;AACL,MAAA,iBAAA,CAAkB,OAAU,GAAA,KAAA,CAAA;AAAA;AAC9B,GACC,EAAA,CAAC,WAAa,EAAA,WAAA,CAAY,UAAU,CAAC,CAAA;AAExC,EAAM,MAAA,uBAAA,GAA0B,WAA8B,CAAA,CAAC,GAAQ,KAAA;AACrE,IAAM,MAAA,EAAE,KAAM,EAAA,GAAI,GAAI,CAAA,MAAA;AACtB,IAAe,cAAA,CAAA;AAAA,MACb,UAAY,EAAA;AAAA,KACb,CAAA;AAAA,GACH,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,oBAAuB,GAAA,WAAA;AAAA,IAC3B,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,UAAI,IAAA,YAAA,IAAgB,CAAC,QAAU,EAAA;AAC7B,YAAS,QAAA,CAAA,IAAA,EAAM,YAAc,EAAA,KAAA,CAAM,OAAO,CAAA;AAAA,WAC5C,MAAA,IAAW,cAAc,QAAU,EAAA;AACjC,YAAA,QAAA,CAAS,IAAM,EAAA,QAAA,EAAU,KAAM,CAAA,OAAA,KAAY,KAAK,CAAA;AAAA;AAClD;AACF;AACF,KACF;AAAA,IACA,CAAC,SAAA,EAAW,iBAAmB,EAAA,QAAA,EAAU,QAAQ;AAAA,GACnD;AAEA,EAAO,OAAA;AAAA,IACL,mBAAqB,EAAA,uBAAA;AAAA,IACrB,gBAAkB,EAAA,oBAAA;AAAA,IAClB,WAAA;AAAA,IACA,kBAAA,EAAoB,kBAAkB,OAAW,IAAA;AAAA,GACnD;AACF;;;;"}

package/esm/table-column-settings/ColumnNameLabel.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ColumnNameLabel.js","sources":["../../../../packages/vuu-table-extras/src/table-column-settings/ColumnNameLabel.tsx"],"sourcesContent":["import { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n  getCalculatedColumnDetails,\n  isCalculatedColumn,\n} from \"@vuu-ui/vuu-utils\";\nimport { MouseEventHandler } from \"react\";\n\nimport columnNameLabelCss from \"./ColumnNameLabel.css\";\n\nconst classBase = \"vuuColumnNameLabel\";\n\nexport interface ColumnNameLabelProps {\n  column: ColumnDescriptor;\n  onClick: MouseEventHandler;\n}\n\nexport const ColumnNameLabel = ({ column, onClick }: ColumnNameLabelProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-column-label\",\n    css: columnNameLabelCss,\n    window: targetWindow,\n  });\n\n  if (isCalculatedColumn(column.name)) {\n    const { name, serverDataType, expression } =\n      getCalculatedColumnDetails(column);\n    const displayName = name || \"name\";\n    const displayExpression = \"=expression\";\n\n    const nameClass =\n      displayName === \"name\" ? `${classBase}-placeholder` : undefined;\n    const expressionClass =\n      expression === \"\" ? `${classBase}-placeholder` : undefined;\n    return (\n      <div\n        className={cx(classBase, `${classBase}-calculated`)}\n        onClick={onClick}\n      >\n        <span className={nameClass}>{displayName}</span>\n        <span>:</span>\n        <span>{serverDataType || \"string\"}</span>\n        <span>:</span>\n        <span className={expressionClass}>{displayExpression}</span>\n        <span className={`${classBase}-edit`} data-icon=\"edit\" />\n      </div>\n    );\n  } else {\n    return <div className={classBase}>{column.name}</div>;\n  }\n};\n"],"names":[],"mappings":";;;;;;;AAYA,MAAM,SAAY,GAAA,oBAAA;AAOX,MAAM,eAAkB,GAAA,CAAC,EAAE,MAAA,EAAQ,SAAoC,KAAA;AAC5E,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,kBAAA;AAAA,IACR,GAAK,EAAA,kBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAI,IAAA,kBAAA,CAAmB,MAAO,CAAA,IAAI,CAAG,EAAA;AACnC,IAAA,MAAM,EAAE,IAAM,EAAA,cAAA,EAAgB,UAAW,EAAA,GACvC,2BAA2B,MAAM,CAAA;AACnC,IAAA,MAAM,cAAc,IAAQ,IAAA,MAAA;AAC5B,IAAA,MAAM,iBAAoB,GAAA,aAAA;AAE1B,IAAA,MAAM,SACJ,GAAA,WAAA,KAAgB,MAAS,GAAA,CAAA,EAAG,SAAS,CAAiB,YAAA,CAAA,GAAA,KAAA,CAAA;AACxD,IAAA,MAAM,eACJ,GAAA,UAAA,KAAe,EAAK,GAAA,CAAA,EAAG,SAAS,CAAiB,YAAA,CAAA,GAAA,KAAA,CAAA;AACnD,IACE,uBAAA,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAA,EAAA,CAAG,SAAW,EAAA,CAAA,EAAG,SAAS,CAAa,WAAA,CAAA,CAAA;AAAA,QAClD,OAAA;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAC,GAAA,CAAA,MAAA,EAAA,EAAK,SAAW,EAAA,SAAA,EAAY,QAAY,EAAA,WAAA,EAAA,CAAA;AAAA,0BACzC,GAAA,CAAC,UAAK,QAAC,EAAA,GAAA,EAAA,CAAA;AAAA,0BACP,GAAA,CAAC,MAAM,EAAA,EAAA,QAAA,EAAA,cAAA,IAAkB,QAAS,EAAA,CAAA;AAAA,0BAClC,GAAA,CAAC,UAAK,QAAC,EAAA,GAAA,EAAA,CAAA;AAAA,0BACN,GAAA,CAAA,MAAA,EAAA,EAAK,SAAW,EAAA,eAAA,EAAkB,QAAkB,EAAA,iBAAA,EAAA,CAAA;AAAA,8BACpD,MAAK,EAAA,EAAA,SAAA,EAAW,GAAG,SAAS,CAAA,KAAA,CAAA,EAAS,aAAU,MAAO,EAAA;AAAA;AAAA;AAAA,KACzD;AAAA,GAEG,MAAA;AACL,IAAA,uBAAQ,GAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,SAAA,EAAY,iBAAO,IAAK,EAAA,CAAA;AAAA;AAEnD;;;;"}

package/esm/table-column-settings/ColumnSettingsPanel.js

@@ -1,200 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { VuuInput, Icon } from '@vuu-ui/vuu-ui-controls';
-import { getDefaultAlignment, isCalculatedColumn, getCalculatedColumnDetails } from '@vuu-ui/vuu-utils';
-import { FormField, FormFieldLabel, ToggleButtonGroup, ToggleButton, Button } from '@salt-ds/core';
-import { useComponentCssInjection } from '@salt-ds/styles';
-import { useWindow } from '@salt-ds/window';
-import cx from 'clsx';
-import { ColumnExpressionPanel } from '../column-expression-panel/ColumnExpressionPanel.js';
-import { ColumnFormattingPanel } from '../column-formatting-settings/ColumnFormattingPanel.js';
-import 'react';
-import { ColumnNameLabel } from './ColumnNameLabel.js';
-import { useColumnSettings } from './useColumnSettings.js';
-import colunSettingsPanelCss from './ColumnSettingsPanel.css.js';
-
-const classBase = "vuuColumnSettingsPanel";
-const getColumnLabel = (column) => {
-  const { name, label } = column;
-  if (isCalculatedColumn(name)) {
-    return label ?? getCalculatedColumnDetails(column).name;
-  } else {
-    return label ?? name;
-  }
-};
-const ColumnSettingsPanel = ({
-  column: columnProp,
-  onCancelCreateColumn,
-  onConfigChange,
-  onCreateCalculatedColumn,
-  tableConfig,
-  vuuTable
-}) => {
-  const targetWindow = useWindow();
-  useComponentCssInjection({
-    testId: "vuu-column-settings-panel",
-    css: colunSettingsPanelCss,
-    window: targetWindow
-  });
-  const isNewCalculatedColumn = columnProp.name === "::";
-  const {
-    availableRenderers,
-    editCalculatedColumn,
-    column,
-    navigateNextColumn,
-    navigatePrevColumn,
-    onCancel,
-    onChange,
-    onChangeCalculatedColumnName,
-    onChangeFormatting,
-    onChangeRendering,
-    onChangeServerDataType,
-    onChangeToggleButton,
-    onChangeType,
-    onEditCalculatedColumn,
-    onInputCommit,
-    onSave
-  } = useColumnSettings({
-    column: columnProp,
-    onCancelCreateColumn,
-    onConfigChange,
-    onCreateCalculatedColumn,
-    tableConfig
-  });
-  const {
-    serverDataType,
-    align = getDefaultAlignment(serverDataType),
-    pin,
-    width
-  } = column;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: cx(classBase, {
-        [`${classBase}-editing`]: editCalculatedColumn
-      }),
-      children: [
-        /* @__PURE__ */ jsx("div", { className: `${classBase}-header`, children: /* @__PURE__ */ jsx(ColumnNameLabel, { column, onClick: onEditCalculatedColumn }) }),
-        editCalculatedColumn ? /* @__PURE__ */ jsx(
-          ColumnExpressionPanel,
-          {
-            column,
-            onChangeName: onChangeCalculatedColumnName,
-            onChangeServerDataType,
-            tableConfig,
-            vuuTable
-          }
-        ) : null,
-        /* @__PURE__ */ jsxs(FormField, { "data-field": "column-label", children: [
-          /* @__PURE__ */ jsx(FormFieldLabel, { children: "Column Label" }),
-          /* @__PURE__ */ jsx(
-            VuuInput,
-            {
-              className: "vuuInput",
-              "data-embedded": true,
-              onChange,
-              onCommit: onInputCommit,
-              value: getColumnLabel(column)
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxs(FormField, { "data-field": "column-width", children: [
-          /* @__PURE__ */ jsx(FormFieldLabel, { children: "Column Width" }),
-          /* @__PURE__ */ jsx(
-            VuuInput,
-            {
-              className: "vuuInput",
-              "data-embedded": true,
-              onChange,
-              value: width,
-              onCommit: onInputCommit
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxs(FormField, { "data-field": "column-alignment", children: [
-          /* @__PURE__ */ jsx(FormFieldLabel, { children: "Alignment" }),
-          /* @__PURE__ */ jsxs(ToggleButtonGroup, { onChange: onChangeToggleButton, value: align, children: [
-            /* @__PURE__ */ jsx(ToggleButton, { value: "left", children: /* @__PURE__ */ jsx(Icon, { name: "align-left", size: 16 }) }),
-            /* @__PURE__ */ jsx(ToggleButton, { value: "right", children: /* @__PURE__ */ jsx(Icon, { name: "align-right", size: 16 }) })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs(FormField, { "data-field": "column-pin", children: [
-          /* @__PURE__ */ jsx(FormFieldLabel, { children: "Pin Column" }),
-          /* @__PURE__ */ jsxs(
-            ToggleButtonGroup,
-            {
-              onChange: onChangeToggleButton,
-              value: pin || "false",
-              children: [
-                /* @__PURE__ */ jsx(ToggleButton, { value: "left", children: /* @__PURE__ */ jsx(Icon, { name: "pin-left", size: 16 }) }),
-                /* @__PURE__ */ jsx(ToggleButton, { value: "floating", children: /* @__PURE__ */ jsx(Icon, { name: "pin-float", size: 16 }) }),
-                /* @__PURE__ */ jsx(ToggleButton, { value: "right", children: /* @__PURE__ */ jsx(Icon, { name: "pin-right", size: 16 }) }),
-                /* @__PURE__ */ jsx(ToggleButton, { value: "", children: /* @__PURE__ */ jsx(Icon, { name: "cross-circle", size: 16 }) })
-              ]
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx(
-          ColumnFormattingPanel,
-          {
-            availableRenderers,
-            column,
-            onChangeFormatting,
-            onChangeRendering,
-            onChangeColumnType: onChangeType
-          }
-        ),
-        editCalculatedColumn ? /* @__PURE__ */ jsxs("div", { className: "vuuColumnSettingsPanel-buttonBar", "data-align": "right", children: [
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              className: `${classBase}-buttonCancel`,
-              onClick: onCancel,
-              tabIndex: -1,
-              children: "cancel"
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              className: `${classBase}-buttonSave`,
-              onClick: onSave,
-              variant: "cta",
-              children: "save"
-            }
-          )
-        ] }) : /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: `${classBase}-buttonBar`,
-            "data-align": isNewCalculatedColumn ? "right" : void 0,
-            children: [
-              /* @__PURE__ */ jsx(
-                Button,
-                {
-                  className: `${classBase}-buttonNavPrev`,
-                  variant: "secondary",
-                  "data-icon": "arrow-left",
-                  onClick: navigatePrevColumn,
-                  children: "PREVIOUS"
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                Button,
-                {
-                  className: `${classBase}-buttonNavNext`,
-                  variant: "secondary",
-                  "data-icon": "arrow-right",
-                  onClick: navigateNextColumn,
-                  children: "NEXT"
-                }
-              )
-            ]
-          }
-        )
-      ]
-    }
-  );
-};
-
-export { ColumnSettingsPanel };
-//# sourceMappingURL=ColumnSettingsPanel.js.map

package/esm/table-column-settings/ColumnSettingsPanel.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ColumnSettingsPanel.js","sources":["../../../../packages/vuu-table-extras/src/table-column-settings/ColumnSettingsPanel.tsx"],"sourcesContent":["import { ColumnDescriptor, ColumnSettingsProps } from \"@vuu-ui/vuu-table-types\";\nimport { Icon, VuuInput } from \"@vuu-ui/vuu-ui-controls\";\nimport {\n  getCalculatedColumnDetails,\n  getDefaultAlignment,\n  isCalculatedColumn,\n} from \"@vuu-ui/vuu-utils\";\nimport {\n  Button,\n  FormField,\n  FormFieldLabel,\n  ToggleButton,\n  ToggleButtonGroup,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { ColumnExpressionPanel } from \"../column-expression-panel\";\nimport { ColumnFormattingPanel } from \"../column-formatting-settings\";\nimport { ColumnNameLabel } from \"./ColumnNameLabel\";\nimport { useColumnSettings } from \"./useColumnSettings\";\n\nimport colunSettingsPanelCss from \"./ColumnSettingsPanel.css\";\n\nconst classBase = \"vuuColumnSettingsPanel\";\n\nconst getColumnLabel = (column: ColumnDescriptor) => {\n  const { name, label } = column;\n  if (isCalculatedColumn(name)) {\n    return label ?? getCalculatedColumnDetails(column).name;\n  } else {\n    return label ?? name;\n  }\n};\n\nexport const ColumnSettingsPanel = ({\n  column: columnProp,\n  onCancelCreateColumn,\n  onConfigChange,\n  onCreateCalculatedColumn,\n  tableConfig,\n  vuuTable,\n}: ColumnSettingsProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-column-settings-panel\",\n    css: colunSettingsPanelCss,\n    window: targetWindow,\n  });\n\n  const isNewCalculatedColumn = columnProp.name === \"::\";\n  const {\n    availableRenderers,\n    editCalculatedColumn,\n    column,\n    navigateNextColumn,\n    navigatePrevColumn,\n    onCancel,\n    onChange,\n    onChangeCalculatedColumnName,\n    onChangeFormatting,\n    onChangeRendering,\n    onChangeServerDataType,\n    onChangeToggleButton,\n    onChangeType,\n    onEditCalculatedColumn,\n    onInputCommit,\n    onSave,\n  } = useColumnSettings({\n    column: columnProp,\n    onCancelCreateColumn,\n    onConfigChange,\n    onCreateCalculatedColumn,\n    tableConfig,\n  });\n\n  const {\n    serverDataType,\n    align = getDefaultAlignment(serverDataType),\n    pin,\n    width,\n  } = column;\n\n  return (\n    <div\n      className={cx(classBase, {\n        [`${classBase}-editing`]: editCalculatedColumn,\n      })}\n    >\n      <div className={`${classBase}-header`}>\n        <ColumnNameLabel column={column} onClick={onEditCalculatedColumn} />\n      </div>\n\n      {editCalculatedColumn ? (\n        <ColumnExpressionPanel\n          column={column}\n          onChangeName={onChangeCalculatedColumnName}\n          onChangeServerDataType={onChangeServerDataType}\n          tableConfig={tableConfig}\n          vuuTable={vuuTable}\n        />\n      ) : null}\n\n      <FormField data-field=\"column-label\">\n        <FormFieldLabel>Column Label</FormFieldLabel>\n        <VuuInput\n          className=\"vuuInput\"\n          data-embedded\n          onChange={onChange}\n          onCommit={onInputCommit}\n          value={getColumnLabel(column)}\n        />\n      </FormField>\n\n      <FormField data-field=\"column-width\">\n        <FormFieldLabel>Column Width</FormFieldLabel>\n        <VuuInput\n          className=\"vuuInput\"\n          data-embedded\n          onChange={onChange}\n          value={width}\n          onCommit={onInputCommit}\n        />\n      </FormField>\n      <FormField data-field=\"column-alignment\">\n        <FormFieldLabel>Alignment</FormFieldLabel>\n        <ToggleButtonGroup onChange={onChangeToggleButton} value={align}>\n          <ToggleButton value=\"left\">\n            <Icon name=\"align-left\" size={16} />\n          </ToggleButton>\n          <ToggleButton value=\"right\">\n            <Icon name=\"align-right\" size={16} />\n          </ToggleButton>\n        </ToggleButtonGroup>\n      </FormField>\n      <FormField data-field=\"column-pin\">\n        <FormFieldLabel>Pin Column</FormFieldLabel>\n        <ToggleButtonGroup\n          onChange={onChangeToggleButton}\n          value={pin || \"false\"}\n        >\n          <ToggleButton value=\"left\">\n            <Icon name=\"pin-left\" size={16} />\n          </ToggleButton>\n          <ToggleButton value=\"floating\">\n            <Icon name=\"pin-float\" size={16} />\n          </ToggleButton>\n          <ToggleButton value=\"right\">\n            <Icon name=\"pin-right\" size={16} />\n          </ToggleButton>\n          <ToggleButton value=\"\">\n            <Icon name=\"cross-circle\" size={16} />\n          </ToggleButton>\n        </ToggleButtonGroup>\n      </FormField>\n      <ColumnFormattingPanel\n        availableRenderers={availableRenderers}\n        column={column}\n        onChangeFormatting={onChangeFormatting}\n        onChangeRendering={onChangeRendering}\n        onChangeColumnType={onChangeType}\n      />\n\n      {editCalculatedColumn ? (\n        <div className=\"vuuColumnSettingsPanel-buttonBar\" data-align=\"right\">\n          <Button\n            className={`${classBase}-buttonCancel`}\n            onClick={onCancel}\n            tabIndex={-1}\n          >\n            cancel\n          </Button>\n          <Button\n            className={`${classBase}-buttonSave`}\n            onClick={onSave}\n            variant=\"cta\"\n          >\n            save\n          </Button>\n        </div>\n      ) : (\n        <div\n          className={`${classBase}-buttonBar`}\n          data-align={isNewCalculatedColumn ? \"right\" : undefined}\n        >\n          <Button\n            className={`${classBase}-buttonNavPrev`}\n            variant=\"secondary\"\n            data-icon=\"arrow-left\"\n            onClick={navigatePrevColumn}\n          >\n            PREVIOUS\n          </Button>\n          <Button\n            className={`${classBase}-buttonNavNext`}\n            variant=\"secondary\"\n            data-icon=\"arrow-right\"\n            onClick={navigateNextColumn}\n          >\n            NEXT\n          </Button>\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}

package/esm/table-column-settings/TableSettingsPanel.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TableSettingsPanel.js","sources":["../../../../packages/vuu-table-extras/src/table-column-settings/TableSettingsPanel.tsx"],"sourcesContent":["import {\n  Button,\n  FormField,\n  FormFieldLabel,\n  ToggleButton,\n  ToggleButtonGroup,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n  TableSettingsPermissions,\n  TableSettingsProps,\n} from \"@vuu-ui/vuu-table-types\";\nimport { ColumnList } from \"../column-list\";\nimport { useTableSettings } from \"./useTableSettings\";\nimport { Icon } from \"@vuu-ui/vuu-ui-controls\";\nimport { VuuInput } from \"@vuu-ui/vuu-ui-controls\";\nimport cx from \"clsx\";\n\nimport tableSettingsPanelCss from \"./TableSettingsPanel.css\";\n\nconst classBase = \"vuuTableSettingsPanel\";\n\nexport const defaultTableSettingsPermissions: Readonly<TableSettingsPermissions> =\n  {\n    allowColumnLabelCase: true,\n    allowColumnDefaultWidth: true,\n    allowGridSeparators: true,\n    allowReorderColumns: true,\n    allowRemoveColumns: true,\n    allowHideColumns: true,\n    allowCalculatedColumns: true,\n  };\nexport const noTableSettingsPermissions: Readonly<TableSettingsPermissions> = {\n  allowColumnLabelCase: false,\n  allowColumnDefaultWidth: false,\n  allowGridSeparators: false,\n  allowReorderColumns: false,\n  allowRemoveColumns: false,\n  allowHideColumns: false,\n  allowCalculatedColumns: false,\n};\n\n/**\n  The TableSettingsPanel assumes 'ownership' of the tableSettings.\n  It updates the settings in state locally and notifies caller of\n  every change via onChange callback\n */\nexport const TableSettingsPanel = ({\n  availableColumns,\n  onAddCalculatedColumn,\n  onConfigChange,\n  onDataSourceConfigChange,\n  onNavigateToColumn,\n  tableConfig: tableConfigProp,\n  permissions: permissionsProp,\n}: TableSettingsProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-table-settings-panel\",\n    css: tableSettingsPanelCss,\n    window: targetWindow,\n  });\n\n  const permissions =\n    permissionsProp === undefined || permissionsProp === true\n      ? defaultTableSettingsPermissions\n      : permissionsProp === false\n        ? noTableSettingsPermissions\n        : permissionsProp;\n\n  const {\n    columnItems,\n    columnLabelsValue,\n    onChangeColumnLabels,\n    onChangeTableAttribute,\n    onReorderColumnItems,\n    onColumnChange,\n    onCommitColumnWidth,\n    tableConfig,\n  } = useTableSettings({\n    availableColumns,\n    onConfigChange,\n    onDataSourceConfigChange,\n    tableConfig: tableConfigProp,\n  });\n\n  const {\n    allowColumnLabelCase = true,\n    allowColumnDefaultWidth = true,\n    allowGridSeparators = true,\n    allowCalculatedColumns = true,\n    ...columnListPermissions\n  } = permissions;\n\n  return (\n    <div className={classBase}>\n      {allowColumnLabelCase ||\n      allowColumnDefaultWidth ||\n      allowGridSeparators ? (\n        <div className={`${classBase}-header`}>\n          <span>Column Settings</span>\n        </div>\n      ) : null}\n\n      {allowColumnDefaultWidth ? (\n        <FormField>\n          <FormFieldLabel>Column Width</FormFieldLabel>\n          <VuuInput\n            className=\"vuuInput\"\n            data-embedded\n            onCommit={onCommitColumnWidth}\n          />\n        </FormField>\n      ) : null}\n\n      {allowColumnLabelCase ? (\n        <FormField>\n          <FormFieldLabel>Column Labels</FormFieldLabel>\n          <ToggleButtonGroup\n            className=\"vuuToggleButtonGroup\"\n            onChange={onChangeColumnLabels}\n            value={columnLabelsValue}\n          >\n            <ToggleButton className=\"vuuIconToggleButton\" value={0}>\n              <Icon name=\"text-strikethrough\" size={48} />\n            </ToggleButton>\n            <ToggleButton className=\"vuuIconToggleButton\" value={1}>\n              <Icon name=\"text-Tt\" size={48} />\n            </ToggleButton>\n            <ToggleButton className=\"vuuIconToggleButton\" value={2}>\n              <Icon name=\"text-T\" size={48} />\n            </ToggleButton>\n          </ToggleButtonGroup>\n        </FormField>\n      ) : null}\n\n      {allowGridSeparators ? (\n        <FormField>\n          <FormFieldLabel>Grid separators</FormFieldLabel>\n          <div className=\"saltToggleButtonGroup vuuStateButtonGroup saltToggleButtonGroup-horizontal\">\n            <ToggleButton\n              selected={tableConfig.zebraStripes ?? false}\n              onChange={onChangeTableAttribute}\n              value=\"zebraStripes\"\n            >\n              <Icon name=\"row-striping\" size={16} />\n            </ToggleButton>\n            <ToggleButton\n              selected={tableConfig.rowSeparators ?? false}\n              onChange={onChangeTableAttribute}\n              value=\"rowSeparators\"\n            >\n              <Icon name=\"row-lines\" size={16} />\n            </ToggleButton>\n            <ToggleButton\n              selected={tableConfig.columnSeparators ?? false}\n              onChange={onChangeTableAttribute}\n              value=\"columnSeparators\"\n            >\n              <Icon name=\"col-lines\" size={16} />\n            </ToggleButton>\n          </div>\n        </FormField>\n      ) : null}\n\n      <div className={cx(`${classBase}-columnListContainer`, \"vuuScrollable\")}>\n        <ColumnList\n          columnItems={columnItems}\n          permissions={columnListPermissions}\n          onChange={onColumnChange}\n          onNavigateToColumn={onNavigateToColumn}\n          onReorderColumnItems={onReorderColumnItems}\n        />\n      </div>\n\n      {allowCalculatedColumns ? (\n        <div className={`${classBase}-calculatedButtonbar`}>\n          <Button data-icon=\"plus\" onClick={onAddCalculatedColumn} />\n          <span className={`${classBase}-calculatedLabel`}>\n            Add calculated column\n          </span>\n        </div>\n      ) : null}\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}