@vuu-ui/vuu-table-extras 0.11.3 → 0.12.1

package/cjs/column-menu/column-menu-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"column-menu-utils.js","sources":["../../src/column-menu/column-menu-utils.tsx"],"sourcesContent":["import {\n  Menu,\n  MenuItem,\n  MenuItemProps,\n  MenuPanel,\n  MenuProps,\n  MenuTrigger,\n} from \"@salt-ds/core\";\nimport { DataSource } from \"@vuu-ui/vuu-data-types\";\nimport { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport {\n  getGroupStatus,\n  getSortStatus,\n  isNumericColumn,\n  logUnhandledMessage,\n} from \"@vuu-ui/vuu-utils\";\nimport { MouseEventHandler, ReactElement } from \"react\";\n\ntype MenuElement = ReactElement<MenuProps, typeof Menu>;\ntype MenuItemElement = ReactElement<MenuItemProps, typeof MenuItem>;\ntype MenuElements = Array<MenuElement | MenuItemElement>;\n\nexport type MenuItemClickHandler = MouseEventHandler<HTMLDivElement>;\n\nexport type DataSourceColumnMenuActionType =\n  | \"agg-count\"\n  | \"agg-distinct\"\n  | \"agg-sum\"\n  | \"agg-avg\"\n  | \"agg-high\"\n  | \"agg-low\"\n  | \"sort-asc\"\n  | \"sort-dsc\"\n  | \"sort-add-asc\"\n  | \"sort-add-dsc\"\n  | \"remove-sort\"\n  | \"group-column\"\n  | \"remove-group\"\n  | \"add-to-group\"\n  | \"remove-from-group\"\n  | \"remove-column\";\n\nexport type ColumnDisplayColumnMenuActionType =\n  | \"pin-column-left\"\n  | \"pin-column-right\"\n  | \"pin-column-floating\"\n  | \"unpin-column\"\n  | \"hide-column\";\n\nexport type TableSettingsActionType = \"column-settings\" | \"table-settings\";\n\nexport type ColumnMenuActionType =\n  | DataSourceColumnMenuActionType\n  | ColumnDisplayColumnMenuActionType\n  | TableSettingsActionType;\n\nexport const isColumnMenuActionType = (\n  value?: string,\n): value is ColumnMenuActionType =>\n  value !== undefined &&\n  [\n    \"agg-count\",\n    \"agg-distinct\",\n    \"agg-sum\",\n    \"agg-avg\",\n    \"agg-high\",\n    \"agg-low\",\n    \"sort-asc\",\n    \"sort-dsc\",\n    \"sort-add-asc\",\n    \"sort-add-dsc\",\n    \"remove-sort\",\n    \"group-column\",\n    \"remove-group\",\n    \"add-to-group\",\n    \"remove-from-group\",\n    \"pin-column-left\",\n    \"pin-column-right\",\n    \"pin-column-floating\",\n    \"unpin-column\",\n    \"hide-column\",\n    \"remove-column\",\n    \"column-settings\",\n    \"table-settings\",\n  ].includes(value);\n\nexport const getColumnMenuActionType = (target: EventTarget | HTMLElement) => {\n  const { menuActionId } = (target as HTMLElement).dataset;\n  if (isColumnMenuActionType(menuActionId)) {\n    return menuActionId;\n  } else {\n    throw Error(\n      \"[vuu-table-extras] column-menu-utils target element is not a valid Column MenuItem\",\n    );\n  }\n};\n\nexport function buildSortMenu(\n  column: ColumnDescriptor,\n  dataSource: DataSource,\n  menuActionClickHandler: MenuItemClickHandler,\n): MenuElement | null {\n  if (column.sortable === false) {\n    return null;\n  } else {\n    const { name, label = name } = column;\n    const menuItems: MenuElements = [];\n    const columnSortStatus = getSortStatus(column.name, dataSource.sort);\n\n    switch (columnSortStatus) {\n      case \"no-sort\":\n        menuItems.push(\n          <MenuItem\n            data-menu-action-id=\"sort-asc\"\n            key=\"sort-asc\"\n            onClick={menuActionClickHandler}\n          >\n            Sort ascending\n          </MenuItem>,\n        );\n        menuItems.push(\n          <MenuItem\n            data-menu-action-id=\"sort-dsc\"\n            key=\"sort-dsc\"\n            onClick={menuActionClickHandler}\n          >\n            Sort descending\n          </MenuItem>,\n        );\n        break;\n      case \"single-sort-asc\":\n        menuItems.push(\n          <MenuItem\n            data-menu-action-id=\"sort-dsc\"\n            key=\"sort-dsc\"\n            onClick={menuActionClickHandler}\n          >\n            Reverse Sort (DSC)\n          </MenuItem>,\n          <MenuItem\n            data-menu-action-id=\"remove-sort\"\n            key=\"remove-sort\"\n            onClick={menuActionClickHandler}\n          >\n            Remove Sort\n          </MenuItem>,\n        );\n        break;\n      case \"single-sort-desc\":\n        menuItems.push(\n          <MenuItem\n            data-menu-action-id=\"sort-asc\"\n            key=\"sort-asc\"\n            onClick={menuActionClickHandler}\n          >\n            Reverse Sort (ASC)\n          </MenuItem>,\n          <MenuItem\n            data-menu-action-id=\"remove-sort\"\n            key=\"remove-sort\"\n            onClick={menuActionClickHandler}\n          >\n            Remove Sort\n          </MenuItem>,\n        );\n        break;\n\n      case \"sort-other-column\":\n        menuItems.push(\n          <MenuItem\n            data-menu-action-id=\"sort-add-asc\"\n            key=\"sort-add-asc\"\n            onClick={menuActionClickHandler}\n          >\n            Add to sort ASC\n          </MenuItem>,\n        );\n        menuItems.push(\n          <MenuItem\n            data-menu-action-id=\"sort-add-dsc\"\n            key=\"sort-add-dsc\"\n            onClick={menuActionClickHandler}\n          >\n            Add to sort DSC\n          </MenuItem>,\n        );\n        menuItems.push(\n          <MenuItem\n            data-menu-action-id=\"sort-asc\"\n            key=\"sort-asc\"\n            onClick={menuActionClickHandler}\n          >\n            Ascending\n          </MenuItem>,\n        );\n        menuItems.push(\n          <MenuItem\n            data-menu-action-id=\"sort-dsc\"\n            key=\"sort-dsc\"\n            onClick={menuActionClickHandler}\n          >\n            Descending\n          </MenuItem>,\n        );\n        break;\n\n      case \"multi-sort-includes-column-asc\":\n      case \"multi-sort-includes-column-desc\":\n        break;\n      default:\n        logUnhandledMessage(\n          columnSortStatus,\n          \"[vuu-table-extras] column-menu-utils buildSortMenu\",\n        );\n    }\n\n    return (\n      <Menu key=\"sort-menu\">\n        <MenuTrigger>\n          <MenuItem>{`Sort by ${label}`}</MenuItem>\n        </MenuTrigger>\n        <MenuPanel>{menuItems}</MenuPanel>\n      </Menu>\n    );\n  }\n}\n\nexport function buildGroupMenu(\n  column: ColumnDescriptor,\n  dataSource: DataSource,\n  menuActionClickHandler: MenuItemClickHandler,\n): MenuElement | null {\n  if (column.groupable === false) {\n    return null;\n  } else {\n    const menuItems: MenuElements = [];\n    const columnGroupStatus = getGroupStatus(column.name, dataSource.groupBy);\n    const { name, label = name } = column;\n\n    switch (columnGroupStatus) {\n      case \"no-groupby\":\n      case \"single-groupby-other-column\":\n        menuItems.push(\n          <MenuItem\n            data-menu-action-id=\"group-column\"\n            key=\"group-column\"\n            onClick={menuActionClickHandler}\n          >{`Group by ${label}`}</MenuItem>,\n        );\n        break;\n      case \"single-groupby\":\n        menuItems.push(\n          <MenuItem\n            data-menu-action-id=\"remove-group\"\n            key=\"remove-group\"\n            onClick={menuActionClickHandler}\n          >\n            Remove Grouping\n          </MenuItem>,\n        );\n        break;\n\n      case \"multi-groupby-other-columns\":\n        menuItems.push(\n          <MenuItem\n            data-menu-action-id=\"add-to-group\"\n            key=\"add-to-group\"\n            onClick={menuActionClickHandler}\n          >\n            Add to grouping\n          </MenuItem>,\n        );\n\n        break;\n\n      case \"multi-groupby-includes-column\":\n        menuItems.push(\n          <MenuItem\n            data-menu-action-id=\"remove-from-group\"\n            key=\"remove-from-group\"\n            onClick={menuActionClickHandler}\n          >\n            Remove from grouping\n          </MenuItem>,\n        );\n\n        break;\n\n      default:\n        logUnhandledMessage(\n          columnGroupStatus,\n          \"[vuu-table-extras] column-menu-utils buildGroupMenu\",\n        );\n    }\n\n    return (\n      <Menu key=\"group-menu\">\n        <MenuTrigger>\n          <MenuItem>Group data</MenuItem>\n        </MenuTrigger>\n        <MenuPanel>{menuItems}</MenuPanel>\n      </Menu>\n    );\n  }\n}\n\nexport const buildVisibilityMenuItems = (\n  column: ColumnDescriptor,\n  menuActionClickHandler: MenuItemClickHandler,\n): MenuElements => {\n  const menuItems: MenuElements = [];\n  const { name, label = name } = column;\n  menuItems.push(\n    <MenuItem\n      data-menu-action-id=\"hide-column\"\n      key=\"hide-column\"\n      onClick={menuActionClickHandler}\n    >\n      {`Hide ${label} column`}\n    </MenuItem>,\n  );\n  menuItems.push(\n    <MenuItem\n      data-menu-action-id=\"remove-column\"\n      key=\"remove-column\"\n      onClick={menuActionClickHandler}\n    >\n      {`Remove ${label} column`}\n    </MenuItem>,\n  );\n\n  return menuItems;\n};\n\nexport const buildPinMenuItems = (\n  column: ColumnDescriptor,\n  menuActionClickHandler: MenuItemClickHandler,\n): MenuElements => {\n  if (column === undefined) {\n    return [];\n  }\n  const { pin } = column;\n\n  const menuItems: MenuElements = [];\n\n  const pinLeft = (\n    <MenuItem\n      data-menu-action-id=\"pin-column-left\"\n      key=\"pin-column-left\"\n      onClick={menuActionClickHandler}\n    >\n      Pin left\n    </MenuItem>\n  );\n\n  const pinFloating = (\n    <MenuItem\n      data-menu-action-id=\"pin-column-floating\"\n      key=\"pin-column-floating\"\n      onClick={menuActionClickHandler}\n    >\n      Pin floating\n    </MenuItem>\n  );\n\n  const pinRight = (\n    <MenuItem\n      data-menu-action-id=\"pin-column-right\"\n      key=\"pin-column-right\"\n      onClick={menuActionClickHandler}\n    >\n      Pin right\n    </MenuItem>\n  );\n\n  if (pin === undefined) {\n    menuItems.push(\n      <Menu key=\"pin-menu\">\n        <MenuTrigger>\n          <MenuItem>Pin Column</MenuItem>\n        </MenuTrigger>\n        <MenuPanel>\n          {pinLeft}\n          {pinFloating}\n          {pinRight}\n        </MenuPanel>\n      </Menu>,\n    );\n  } else {\n    menuItems.push(\n      <MenuItem\n        data-menu-action-id=\"unpin-column\"\n        key=\"unpin-column\"\n        onClick={menuActionClickHandler}\n      >\n        Unpin\n      </MenuItem>,\n    );\n    if (pin === \"left\") {\n      menuItems.push(\n        <Menu key=\"pin-menu\">\n          <MenuTrigger>\n            <MenuItem>Pin Column</MenuItem>\n          </MenuTrigger>\n          <MenuPanel>\n            {pinFloating}\n            {pinRight}\n          </MenuPanel>\n        </Menu>,\n      );\n    } else if (pin === \"floating\") {\n      menuItems.push(\n        <Menu key=\"pin-menu\">\n          <MenuTrigger>\n            <MenuItem>Pin Column</MenuItem>\n          </MenuTrigger>\n          <MenuPanel>\n            {pinLeft}\n            {pinRight}\n          </MenuPanel>\n        </Menu>,\n      );\n    } else {\n      menuItems.push(\n        <Menu key=\"pin-menu\">\n          <MenuTrigger>\n            <MenuItem>Pin Column</MenuItem>\n          </MenuTrigger>\n          <MenuPanel>\n            {pinFloating}\n            {pinRight}\n          </MenuPanel>\n        </Menu>,\n      );\n    }\n  }\n\n  return menuItems;\n};\n\nexport const buildSettingsMenuItems = (\n  _: ColumnDescriptor,\n  menuActionClickHandler: MenuItemClickHandler,\n): MenuElements => {\n  const menuItems: MenuElements = [];\n\n  menuItems.push(\n    <MenuItem\n      data-icon=\"settings\"\n      data-menu-action-id=\"column-settings\"\n      key=\"column-settings\"\n      onClick={menuActionClickHandler}\n    >\n      Column settings ...\n    </MenuItem>,\n  );\n  menuItems.push(\n    <MenuItem\n      data-icon=\"settings\"\n      data-menu-action-id=\"table-settings\"\n      key=\"table-settings\"\n      onClick={menuActionClickHandler}\n    >\n      Table settings ...\n    </MenuItem>,\n  );\n\n  return menuItems;\n};\n\nexport function buildAggregationMenuItems(\n  column: ColumnDescriptor,\n  dataSource: DataSource,\n  menuActionClickHandler: MenuItemClickHandler,\n): MenuElements {\n  const { name, label = name } = column;\n\n  if (dataSource.groupBy?.length === 0) {\n    return [];\n  } else {\n    const menuItems: MenuElements = [\n      <MenuItem\n        data-menu-action-id=\"agg-count\"\n        key=\"agg-count\"\n        onClick={menuActionClickHandler}\n      >\n        Count\n      </MenuItem>,\n      <MenuItem\n        data-menu-action-id=\"agg-distinct\"\n        key=\"agg-distinct\"\n        onClick={menuActionClickHandler}\n      >\n        Distinct\n      </MenuItem>,\n    ];\n\n    if (isNumericColumn(column)) {\n      menuItems.push(\n        <MenuItem\n          data-menu-action-id=\"agg-sum\"\n          key=\"agg-sum\"\n          onClick={menuActionClickHandler}\n        >\n          Sum\n        </MenuItem>,\n        <MenuItem\n          data-menu-action-id=\"agg-avg\"\n          key=\"agg-avg\"\n          onClick={menuActionClickHandler}\n        >\n          Average\n        </MenuItem>,\n        <MenuItem\n          data-menu-action-id=\"agg-high\"\n          key=\"agg-high\"\n          onClick={menuActionClickHandler}\n        >\n          High\n        </MenuItem>,\n        <MenuItem\n          data-menu-action-id=\"agg-low\"\n          key=\"agg-low\"\n          onClick={menuActionClickHandler}\n        >\n          Low\n        </MenuItem>,\n      );\n    }\n\n    return [\n      <Menu key=\"aggregate-menu\">\n        <MenuTrigger>\n          <MenuItem>{`Aggregate ${label}`}</MenuItem>\n        </MenuTrigger>\n        <MenuPanel>{menuItems}</MenuPanel>\n      </Menu>,\n    ];\n  }\n}\n"],"names":["getSortStatus","jsx","MenuItem","logUnhandledMessage","Menu","MenuTrigger","MenuPanel","getGroupStatus","isNumericColumn"],"mappings":"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"}

package/cjs/column-menu/useColumnActions.js

@@ -0,0 +1,75 @@
+'use strict';
+
+var vuuUtils = require('@vuu-ui/vuu-utils');
+
+const { Average, Count, Distinct, High, Low, Sum } = vuuUtils.AggregationType;
+const useColumnActions = ({
+  dataSource,
+  onColumnDisplayAction,
+  onDisplaySettingsAction
+}) => {
+  const handleContextMenuAction = (columnMenuActionType, column) => {
+    if (column && dataSource) {
+      switch (columnMenuActionType) {
+        // 1) DataSource operations ...
+        case "sort-asc":
+          return dataSource.sort = vuuUtils.setSortColumn(dataSource.sort, column, "A"), true;
+        case "sort-dsc":
+          return dataSource.sort = vuuUtils.setSortColumn(dataSource.sort, column, "D"), true;
+        case "remove-sort":
+          return dataSource.sort = { sortDefs: [] }, true;
+        case "sort-add-asc":
+          return dataSource.sort = vuuUtils.addSortColumn(dataSource.sort, column, "A"), true;
+        case "sort-add-dsc":
+          return dataSource.sort = vuuUtils.addSortColumn(dataSource.sort, column, "D"), true;
+        case "group-column":
+          return dataSource.groupBy = vuuUtils.addGroupColumn(dataSource.groupBy ?? [], column), true;
+        case "add-to-group":
+          return dataSource.groupBy = vuuUtils.addGroupColumn(dataSource.groupBy ?? [], column), true;
+        case "remove-group":
+          return dataSource.groupBy = [], true;
+        case "remove-from-group":
+          return dataSource.groupBy = vuuUtils.removeGroupColumn(dataSource.groupBy ?? [], column), true;
+        case "remove-column":
+          return dataSource.columns = dataSource.columns.filter((name) => name !== column.name), true;
+        // case "filter-remove-column": return (dataSource.filter = removeFilterColumn(dataSource.filter, column)), true;
+        // case "remove-filters": return (dataSource.filter = {filter:""}), true;
+        case "agg-avg":
+          return dataSource.aggregations = vuuUtils.setAggregations(dataSource.aggregations, column, Average), true;
+        case "agg-high":
+          return dataSource.aggregations = vuuUtils.setAggregations(dataSource.aggregations, column, High), true;
+        case "agg-low":
+          return dataSource.aggregations = vuuUtils.setAggregations(dataSource.aggregations, column, Low), true;
+        case "agg-count":
+          return dataSource.aggregations = vuuUtils.setAggregations(dataSource.aggregations, column, Count), true;
+        case "agg-distinct":
+          return dataSource.aggregations = vuuUtils.setAggregations(dataSource.aggregations, column, Distinct), true;
+        case "agg-sum":
+          return dataSource.aggregations = vuuUtils.setAggregations(dataSource.aggregations, column, Sum), true;
+        // 2) Column display options ...
+        case "hide-column":
+          return onColumnDisplayAction?.({ type: "hideColumn", column }), true;
+        case "pin-column-floating":
+          return onColumnDisplayAction?.({ type: "pinColumn", column, pin: "floating" }), true;
+        case "pin-column-left":
+          return onColumnDisplayAction?.({ type: "pinColumn", column, pin: "left" }), true;
+        case "pin-column-right":
+          return onColumnDisplayAction?.({ type: "pinColumn", column, pin: "right" }), true;
+        case "unpin-column":
+          return onColumnDisplayAction?.({ type: "pinColumn", column, pin: false }), true;
+        // 3) Table Admin options ...
+        case "column-settings":
+          return onDisplaySettingsAction?.({ type: "column-settings", column }), true;
+        case "table-settings":
+          return onDisplaySettingsAction?.({ type: "table-settings" }), true;
+        default:
+          vuuUtils.logUnhandledMessage(columnMenuActionType, `[vuu-table-extras] useColumnActions handleContextMenuAction, unhandled columnMenuActionType`);
+      }
+    }
+    return false;
+  };
+  return handleContextMenuAction;
+};
+
+exports.useColumnActions = useColumnActions;
+//# sourceMappingURL=useColumnActions.js.map

package/cjs/column-menu/useColumnActions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useColumnActions.js","sources":["../../src/column-menu/useColumnActions.ts"],"sourcesContent":["/* eslint-disable no-sequences */\nimport { MenuActionHandler } from \"@vuu-ui/vuu-context-menu\";\nimport { Filter } from \"@vuu-ui/vuu-filter-types\";\nimport { VuuFilter } from \"@vuu-ui/vuu-protocol-types\";\nimport {\n  ColumnDescriptor,\n  RuntimeColumnDescriptor,\n} from \"@vuu-ui/vuu-table-types\";\nimport {\n  addGroupColumn,\n  addSortColumn,\n  AggregationType,\n  logUnhandledMessage,\n  removeGroupColumn,\n  setAggregations,\n  setSortColumn,\n} from \"@vuu-ui/vuu-utils\";\nimport { ColumnMenuActionType } from \"./column-menu-utils\";\nimport {\n  ColumnDisplayAction,\n  DisplaySettingsAction,\n} from \"./column-action-types\";\nimport { DataSource } from \"@vuu-ui/vuu-data-types\";\n\nexport interface ContextMenuOptions {\n  column?: RuntimeColumnDescriptor;\n  filter?: Filter;\n  sort?: VuuFilter;\n}\nexport interface ContextMenuHookProps {\n  dataSource: DataSource;\n  onColumnDisplayAction?: (action: ColumnDisplayAction) => void;\n  onDisplaySettingsAction?: (action: DisplaySettingsAction) => void;\n}\n\n// const removeFilterColumn = (\n//   dataSourceFilter: DataSourceFilter,\n//   column: RuntimeColumnDescriptor,\n// ) => {\n//   if (dataSourceFilter.filterStruct && column) {\n//     const [filterStruct, filter] = removeColumnFromFilter(\n//       column,\n//       dataSourceFilter.filterStruct,\n//     );\n//     return {\n//       filter,\n//       filterStruct,\n//     };\n//   } else {\n//     return dataSourceFilter;\n//   }\n// };\n\nconst { Average, Count, Distinct, High, Low, Sum } = AggregationType;\n\nexport const useColumnActions = ({\n  dataSource,\n  onColumnDisplayAction,\n  onDisplaySettingsAction,\n}: ContextMenuHookProps) => {\n  /** return {boolean} used by caller to determine whether to forward to additional installed context menu handlers */\n  const handleContextMenuAction: MenuActionHandler<\n    ColumnMenuActionType,\n    ColumnDescriptor\n  > = (columnMenuActionType, column): boolean => {\n    if (column && dataSource) {\n      // prettier-ignore\n      switch(columnMenuActionType){\n        // 1) DataSource operations ...\n        case \"sort-asc\": return (dataSource.sort = setSortColumn(dataSource.sort, column, \"A\")), true;\n        case \"sort-dsc\": return (dataSource.sort = setSortColumn(dataSource.sort, column, \"D\")), true;\n        case \"remove-sort\": return (dataSource.sort = {sortDefs:[]}), true;\n        case \"sort-add-asc\": return (dataSource.sort = addSortColumn(dataSource.sort, column, \"A\")), true;\n        case \"sort-add-dsc\": return (dataSource.sort = addSortColumn(dataSource.sort, column, \"D\")), true;\n        case \"group-column\": return (dataSource.groupBy = addGroupColumn(dataSource.groupBy ?? [], column)), true;\n        case \"add-to-group\": return (dataSource.groupBy = addGroupColumn(dataSource.groupBy ?? [], column)), true;\n        case \"remove-group\": return (dataSource.groupBy = []), true;\n        case \"remove-from-group\": return (dataSource.groupBy = removeGroupColumn(dataSource.groupBy ?? [], column)), true;\n        case \"remove-column\": return (dataSource.columns = dataSource.columns.filter(name => name !== column.name)), true\n        // case \"filter-remove-column\": return (dataSource.filter = removeFilterColumn(dataSource.filter, column)), true;\n        // case \"remove-filters\": return (dataSource.filter = {filter:\"\"}), true;\n        case \"agg-avg\": return dataSource.aggregations = (setAggregations(dataSource.aggregations, column, Average)), true;\n        case \"agg-high\": return dataSource.aggregations = (setAggregations(dataSource.aggregations, column, High)), true;\n        case \"agg-low\": return dataSource.aggregations = (setAggregations(dataSource.aggregations, column, Low)), true;\n        case \"agg-count\": return dataSource.aggregations = (setAggregations(dataSource.aggregations, column, Count)), true;\n        case \"agg-distinct\": return dataSource.aggregations = (setAggregations(dataSource.aggregations, column, Distinct)), true;\n        case \"agg-sum\": return dataSource.aggregations = (setAggregations(dataSource.aggregations, column, Sum)), true;\n        // 2) Column display options ...\n        case \"hide-column\": return onColumnDisplayAction?.({type: \"hideColumn\", column}), true;\n        case \"pin-column-floating\": return onColumnDisplayAction?.({type: \"pinColumn\", column, pin: \"floating\"}), true;\n        case \"pin-column-left\": return onColumnDisplayAction?.({type: \"pinColumn\", column, pin: \"left\"}), true;\n        case \"pin-column-right\": return onColumnDisplayAction?.({type: \"pinColumn\", column, pin: \"right\"}), true;\n        case \"unpin-column\": return onColumnDisplayAction?.({type: \"pinColumn\", column, pin: false}), true\n        // 3) Table Admin options ...\n        case \"column-settings\": return onDisplaySettingsAction?.({type: \"column-settings\", column}), true\n        case \"table-settings\": return onDisplaySettingsAction?.({type: \"table-settings\"}), true\n        default:\n          logUnhandledMessage(columnMenuActionType, `[vuu-table-extras] useColumnActions handleContextMenuAction, unhandled columnMenuActionType`)\n      }\n    }\n    return false;\n  };\n\n  return handleContextMenuAction;\n};\n"],"names":["AggregationType","setSortColumn","addSortColumn","addGroupColumn","removeGroupColumn","setAggregations","logUnhandledMessage"],"mappings":"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"}

package/cjs/column-settings/ColumnSettingsPanel.js

@@ -121,12 +121,19 @@ const ColumnSettingsPanel = ({
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs(core.FormField, { "data-field": "column-pin", children: [
           /* @__PURE__ */ jsxRuntime.jsx(core.FormFieldLabel, { children: "Pin Column" }),
-          /* @__PURE__ */ jsxRuntime.jsxs(core.ToggleButtonGroup, { onChange: onChangeToggleButton, value: pin ?? "", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(core.ToggleButton, { value: "left", children: /* @__PURE__ */ jsxRuntime.jsx(vuuUiControls.Icon, { name: "pin-left", size: 16 }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(core.ToggleButton, { value: "floating", children: /* @__PURE__ */ jsxRuntime.jsx(vuuUiControls.Icon, { name: "pin-float", size: 16 }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(core.ToggleButton, { value: "right", children: /* @__PURE__ */ jsxRuntime.jsx(vuuUiControls.Icon, { name: "pin-right", size: 16 }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(core.ToggleButton, { value: "", children: /* @__PURE__ */ jsxRuntime.jsx(vuuUiControls.Icon, { name: "cross-circle", size: 16 }) })
-          ] })
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            core.ToggleButtonGroup,
+            {
+              onChange: onChangeToggleButton,
+              value: pin || "false",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(core.ToggleButton, { value: "left", children: /* @__PURE__ */ jsxRuntime.jsx(vuuUiControls.Icon, { name: "pin-left", size: 16 }) }),
+                /* @__PURE__ */ jsxRuntime.jsx(core.ToggleButton, { value: "floating", children: /* @__PURE__ */ jsxRuntime.jsx(vuuUiControls.Icon, { name: "pin-float", size: 16 }) }),
+                /* @__PURE__ */ jsxRuntime.jsx(core.ToggleButton, { value: "right", children: /* @__PURE__ */ jsxRuntime.jsx(vuuUiControls.Icon, { name: "pin-right", size: 16 }) }),
+                /* @__PURE__ */ jsxRuntime.jsx(core.ToggleButton, { value: "", children: /* @__PURE__ */ jsxRuntime.jsx(vuuUiControls.Icon, { name: "cross-circle", size: 16 }) })
+              ]
+            }
+          )
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(
           ColumnFormattingPanel.ColumnFormattingPanel,

package/cjs/column-settings/ColumnSettingsPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColumnSettingsPanel.js","sources":["../../src/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 onChange={onChangeToggleButton} value={pin ?? \"\"}>\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":["isCalculatedColumn","getCalculatedColumnDetails","useWindow","useComponentCssInjection","colunSettingsPanelCss","useColumnSettings","getDefaultAlignment","jsxs","jsx","ColumnNameLabel","ColumnExpressionPanel","FormField","FormFieldLabel","VuuInput","ToggleButtonGroup","ToggleButton","Icon","ColumnFormattingPanel","Button"],"mappings":"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"}
+{"version":3,"file":"ColumnSettingsPanel.js","sources":["../../src/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":["isCalculatedColumn","getCalculatedColumnDetails","useWindow","useComponentCssInjection","colunSettingsPanelCss","useColumnSettings","getDefaultAlignment","jsxs","jsx","ColumnNameLabel","ColumnExpressionPanel","FormField","FormFieldLabel","VuuInput","ToggleButtonGroup","ToggleButton","Icon","ColumnFormattingPanel","Button"],"mappings":"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"}

package/cjs/index.js

@@ -9,6 +9,8 @@ var LookupCell = require('./cell-renderers/lookup-cell/LookupCell.js');
 var PctProgressCell = require('./cell-renderers/pct-progress-cell/PctProgressCell.js');
 require('./cell-renderers/progress-cell/ProgressCell.js');
 var ColumnList = require('./column-list/ColumnList.js');
+var ColumnMenu = require('./column-menu/ColumnMenu.js');
+var useColumnActions = require('./column-menu/useColumnActions.js');
 var ColumnSettingsPanel = require('./column-settings/ColumnSettingsPanel.js');
 var ColumnExpressionInput = require('./column-expression-input/ColumnExpressionInput.js');
 var ColumnExpressionLanguage = require('./column-expression-input/column-language-parser/ColumnExpressionLanguage.js');
@@ -23,6 +25,7 @@ var DateTimeFormattingSettings = require('./column-formatting-settings/DateTimeF
 var DatasourceStats = require('./datasource-stats/DatasourceStats.js');
 var TableSettingsPanel = require('./table-settings/TableSettingsPanel.js');
 var useTableSettings = require('./table-settings/useTableSettings.js');
+var TableProvider = require('./table-provider/TableProvider.js');
 
 
 
@@ -34,6 +37,8 @@ exports.DropdownCell = DropdownCell.DropdownCell;
 exports.LookupCell = LookupCell.LookupCell;
 exports.PctProgressCell = PctProgressCell.PctProgressCell;
 exports.ColumnList = ColumnList.ColumnList;
+exports.ColumnMenu = ColumnMenu.ColumnMenu;
+exports.useColumnActions = useColumnActions.useColumnActions;
 exports.ColumnSettingsPanel = ColumnSettingsPanel.ColumnSettingsPanel;
 exports.ColumnExpressionInput = ColumnExpressionInput.ColumnExpressionInput;
 exports.columnExpressionLanguageSupport = ColumnExpressionLanguage.columnExpressionLanguageSupport;
@@ -51,4 +56,6 @@ exports.DateTimeFormattingSettings = DateTimeFormattingSettings.DateTimeFormatti
 exports.DataSourceStats = DatasourceStats.DataSourceStats;
 exports.TableSettingsPanel = TableSettingsPanel.TableSettingsPanel;
 exports.useTableSettings = useTableSettings.useTableSettings;
+exports.TableProvider = TableProvider.TableProvider;
+exports.useTableContext = TableProvider.useTableContext;
 //# sourceMappingURL=index.js.map

package/cjs/index.js.map

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

package/cjs/table-provider/TableProvider.js

@@ -0,0 +1,48 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+
+const NullMenuActionHandler = (menuItemId) => {
+  console.log(
+    `[TableContext] no menu action handler installed (menuItemHandler invoked with ${menuItemId})`
+  );
+  return false;
+};
+const NullDataSource = {};
+const TableContext = react.createContext({
+  dataSource: NullDataSource,
+  menuActionHandler: NullMenuActionHandler
+});
+const TableProvider = ({
+  children,
+  dataSource,
+  menuActionHandler
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TableContext.Provider,
+    {
+      value: {
+        dataSource,
+        menuActionHandler
+      },
+      children
+    }
+  );
+};
+function useTableContext(throwIfNoDataSource = false) {
+  const { dataSource, menuActionHandler } = react.useContext(TableContext);
+  if (dataSource === NullDataSource && menuActionHandler == NullMenuActionHandler && throwIfNoDataSource) {
+    throw Error(`[TableProvider] no DataSourceProvider has been declared`);
+  } else {
+    return {
+      dataSource,
+      menuActionHandler
+    };
+  }
+}
+
+exports.TableContext = TableContext;
+exports.TableProvider = TableProvider;
+exports.useTableContext = useTableContext;
+//# sourceMappingURL=TableProvider.js.map

package/cjs/table-provider/TableProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableProvider.js","sources":["../../src/table-provider/TableProvider.tsx"],"sourcesContent":["import { MenuActionHandler } from \"@vuu-ui/vuu-context-menu\";\nimport { DataSource } from \"@vuu-ui/vuu-data-types\";\nimport { createContext, ReactNode, useContext } from \"react\";\nimport { ColumnMenuActionType } from \"../column-menu/column-menu-utils\";\nimport { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\n\nexport interface TableContextProps {\n  dataSource: DataSource;\n  menuActionHandler: MenuActionHandler<ColumnMenuActionType, ColumnDescriptor>;\n}\n\nconst NullMenuActionHandler = (menuItemId: string) => {\n  console.log(\n    `[TableContext] no menu action handler installed (menuItemHandler invoked with ${menuItemId})`,\n  );\n  return false;\n};\nconst NullDataSource = {} as DataSource;\n\nexport const TableContext = createContext<TableContextProps>({\n  dataSource: NullDataSource,\n  menuActionHandler: NullMenuActionHandler,\n});\n\nexport const TableProvider = ({\n  children,\n  dataSource,\n  menuActionHandler,\n}: TableContextProps & {\n  children: ReactNode;\n}) => {\n  return (\n    <TableContext.Provider\n      value={{\n        dataSource,\n        menuActionHandler,\n      }}\n    >\n      {children}\n    </TableContext.Provider>\n  );\n};\n\nexport function useTableContext(throwIfNoDataSource = false) {\n  const { dataSource, menuActionHandler } = useContext(TableContext);\n  if (\n    dataSource === NullDataSource &&\n    menuActionHandler == NullMenuActionHandler &&\n    throwIfNoDataSource\n  ) {\n    throw Error(`[TableProvider] no DataSourceProvider has been declared`);\n  } else {\n    return {\n      dataSource,\n      menuActionHandler,\n    };\n  }\n}\n"],"names":["createContext","jsx","useContext"],"mappings":";;;;;AAWA,MAAM,qBAAA,GAAwB,CAAC,UAAuB,KAAA;AACpD,EAAQ,OAAA,CAAA,GAAA;AAAA,IACN,iFAAiF,UAAU,CAAA,CAAA;AAAA,GAC7F;AACA,EAAO,OAAA,KAAA;AACT,CAAA;AACA,MAAM,iBAAiB,EAAC;AAEjB,MAAM,eAAeA,mBAAiC,CAAA;AAAA,EAC3D,UAAY,EAAA,cAAA;AAAA,EACZ,iBAAmB,EAAA;AACrB,CAAC;AAEM,MAAM,gBAAgB,CAAC;AAAA,EAC5B,QAAA;AAAA,EACA,UAAA;AAAA,EACA;AACF,CAEM,KAAA;AACJ,EACE,uBAAAC,cAAA;AAAA,IAAC,YAAa,CAAA,QAAA;AAAA,IAAb;AAAA,MACC,KAAO,EAAA;AAAA,QACL,UAAA;AAAA,QACA;AAAA,OACF;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ;AAEgB,SAAA,eAAA,CAAgB,sBAAsB,KAAO,EAAA;AAC3D,EAAA,MAAM,EAAE,UAAA,EAAY,iBAAkB,EAAA,GAAIC,iBAAW,YAAY,CAAA;AACjE,EAAA,IACE,UAAe,KAAA,cAAA,IACf,iBAAqB,IAAA,qBAAA,IACrB,mBACA,EAAA;AACA,IAAA,MAAM,MAAM,CAAyD,uDAAA,CAAA,CAAA;AAAA,GAChE,MAAA;AACL,IAAO,OAAA;AAAA,MACL,UAAA;AAAA,MACA;AAAA,KACF;AAAA;AAEJ;;;;;;"}

package/esm/column-list/ColumnList.js

@@ -1,11 +1,11 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { List, ListItem, Icon } from '@vuu-ui/vuu-ui-controls';
 import { Checkbox, Switch } from '@salt-ds/core';
-import cx from 'clsx';
 import { useComponentCssInjection } from '@salt-ds/styles';
 import { useWindow } from '@salt-ds/window';
-import { useCallback } from 'react';
+import { List, ListItem, Icon } from '@vuu-ui/vuu-ui-controls';
 import { queryClosest, getColumnLabel } from '@vuu-ui/vuu-utils';
+import cx from 'clsx';
+import { useCallback } from 'react';
 import columnList from './ColumnList.css.js';
 
 const classBase = "vuuColumnList";

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

@@ -1 +1 @@
-{"version":3,"file":"ColumnList.js","sources":["../../src/column-list/ColumnList.tsx"],"sourcesContent":["import { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport {\n  Icon,\n  List,\n  ListItem,\n  ListItemProps,\n  ListProps,\n} from \"@vuu-ui/vuu-ui-controls\";\nimport { Checkbox, Switch } from \"@salt-ds/core\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n  HTMLAttributes,\n  MouseEventHandler,\n  SyntheticEvent,\n  useCallback,\n} from \"react\";\nimport { ColumnItem } from \"../table-settings\";\nimport { getColumnLabel, queryClosest } from \"@vuu-ui/vuu-utils\";\n\nimport columnList from \"./ColumnList.css\";\n\nconst classBase = \"vuuColumnList\";\nconst classBaseListItem = \"vuuColumnListItem\";\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  onMoveListItem: ListProps[\"onMoveListItem\"];\n  onNavigateToColumn?: (columnName: string) => void;\n}\n\nconst ColumnListItem = ({\n  className: classNameProp,\n  item,\n  ...listItemProps\n}: ListItemProps<ColumnItem>) => {\n  return (\n    <ListItem\n      {...listItemProps}\n      className={cx(classNameProp, classBaseListItem)}\n      data-name={item?.name}\n    >\n      <Icon name=\"draggable\" size={16} />\n      {item?.isCalculated ? (\n        <Icon name=\"function\" />\n      ) : (\n        <Checkbox\n          className={`${classBase}-checkBox`}\n          checked={item?.subscribed}\n        />\n      )}\n      <span className={`${classBase}-text`}>\n        {getColumnLabel(item as ColumnDescriptor)}\n      </span>\n      <Switch\n        className={`${classBase}-switch`}\n        checked={item?.hidden !== true}\n        disabled={item?.subscribed !== true}\n      />\n    </ListItem>\n  );\n};\n\nexport const ColumnList = ({\n  className,\n  columnItems,\n  onChange,\n  onMoveListItem,\n  onNavigateToColumn,\n  ...htmlAttributes\n}: ColumnListProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-column-list\",\n    css: columnList,\n    window: targetWindow,\n  });\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  return (\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      <List<ColumnItem, \"none\">\n        ListItem={ColumnListItem}\n        allowDragDrop\n        height=\"auto\"\n        onChange={handleChange}\n        onClick={handleClick}\n        onMoveListItem={onMoveListItem}\n        selectionStrategy=\"none\"\n        source={columnItems}\n        itemHeight={33}\n      />\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ColumnList.js","sources":["../../src/column-list/ColumnList.tsx"],"sourcesContent":["import { Checkbox, Switch } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport {\n  Icon,\n  List,\n  ListItem,\n  ListItemProps,\n  ListProps,\n} from \"@vuu-ui/vuu-ui-controls\";\nimport { getColumnLabel, queryClosest } from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport {\n  HTMLAttributes,\n  MouseEventHandler,\n  SyntheticEvent,\n  useCallback,\n} from \"react\";\nimport { ColumnItem } from \"../table-settings\";\n\nimport columnList from \"./ColumnList.css\";\n\nconst classBase = \"vuuColumnList\";\nconst classBaseListItem = \"vuuColumnListItem\";\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  onMoveListItem: ListProps[\"onMoveListItem\"];\n  onNavigateToColumn?: (columnName: string) => void;\n}\n\nconst ColumnListItem = ({\n  className: classNameProp,\n  item,\n  ...listItemProps\n}: ListItemProps<ColumnItem>) => {\n  return (\n    <ListItem\n      {...listItemProps}\n      className={cx(classNameProp, classBaseListItem)}\n      data-name={item?.name}\n    >\n      <Icon name=\"draggable\" size={16} />\n      {item?.isCalculated ? (\n        <Icon name=\"function\" />\n      ) : (\n        <Checkbox\n          className={`${classBase}-checkBox`}\n          checked={item?.subscribed}\n        />\n      )}\n      <span className={`${classBase}-text`}>\n        {getColumnLabel(item as ColumnDescriptor)}\n      </span>\n      <Switch\n        className={`${classBase}-switch`}\n        checked={item?.hidden !== true}\n        disabled={item?.subscribed !== true}\n      />\n    </ListItem>\n  );\n};\n\nexport const ColumnList = ({\n  className,\n  columnItems,\n  onChange,\n  onMoveListItem,\n  onNavigateToColumn,\n  ...htmlAttributes\n}: ColumnListProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-column-list\",\n    css: columnList,\n    window: targetWindow,\n  });\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  return (\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      <List<ColumnItem, \"none\">\n        ListItem={ColumnListItem}\n        allowDragDrop\n        height=\"auto\"\n        onChange={handleChange}\n        onClick={handleClick}\n        onMoveListItem={onMoveListItem}\n        selectionStrategy=\"none\"\n        source={columnItems}\n        itemHeight={33}\n      />\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}

package/esm/column-menu/ColumnMenu.css.js

@@ -0,0 +1,4 @@
+var columnMenuCss = ".vuuMenuItem {\n  --vuu-svg-cog: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M12.9533 8.65331C12.98 8.43998 13 8.22665 13 7.99998C13 7.77331 12.98 7.55998 12.9533 7.34665L14.36 6.24665C14.4867 6.14665 14.52 5.96665 14.44 5.81998L13.1067 3.51331C13.0267 3.36665 12.8467 3.31331 12.7 3.36665L11.04 4.03331C10.6933 3.76665 10.32 3.54665 9.91333 3.37998L9.66 1.61331C9.64 1.45331 9.5 1.33331 9.33333 1.33331H6.66667C6.5 1.33331 6.36 1.45331 6.34 1.61331L6.08667 3.37998C5.68 3.54665 5.30667 3.77331 4.96 4.03331L3.3 3.36665C3.14667 3.30665 2.97333 3.36665 2.89333 3.51331L1.56 5.81998C1.47333 5.96665 1.51333 6.14665 1.64 6.24665L3.04667 7.34665C3.02 7.55998 3 7.77998 3 7.99998C3 8.21998 3.02 8.43998 3.04667 8.65331L1.64 9.75331C1.51333 9.85331 1.48 10.0333 1.56 10.18L2.89333 12.4866C2.97333 12.6333 3.15333 12.6866 3.3 12.6333L4.96 11.9666C5.30667 12.2333 5.68 12.4533 6.08667 12.62L6.34 14.3866C6.36 14.5466 6.5 14.6666 6.66667 14.6666H9.33333C9.5 14.6666 9.64 14.5466 9.66 14.3866L9.91333 12.62C10.32 12.4533 10.6933 12.2266 11.04 11.9666L12.7 12.6333C12.8533 12.6933 13.0267 12.6333 13.1067 12.4866L14.44 10.18C14.52 10.0333 14.4867 9.85331 14.36 9.75331L12.9533 8.65331V8.65331ZM8 10.3333C6.71333 10.3333 5.66667 9.28665 5.66667 7.99998C5.66667 6.71331 6.71333 5.66665 8 5.66665C9.28667 5.66665 10.3333 6.71331 10.3333 7.99998C10.3333 9.28665 9.28667 10.3333 8 10.3333Z\"/></svg>');\n}\n.vuuColumnMenu {\n  --menu-button-size: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  --saltButton-padding: var(--salt-spacing-50);\n  --saltButton-minWidth: var(--menu-button-size);\n  --saltButton-height: var(--menu-button-size);\n  --saltButton-width: var(--menu-button-size);\n\n  --vuu-icon-height: var(--menu-button-size);\n  --vuu-icon-left: 0px;\n  --vuu-icon-top: 0px;\n  --vuu-icon-width: var(--menu-button-size);\n\n  border: none;\n  border-radius: 4px;\n  flex: 0 0 var(--menu-button-size);\n  margin: var(--vuuTable-columnMenu-margin, 0);\n  padding: 0;\n}\n";
+
+export { columnMenuCss as default };
+//# sourceMappingURL=ColumnMenu.css.js.map

package/esm/column-menu/ColumnMenu.css.js.map

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

package/esm/column-menu/ColumnMenu.js

@@ -0,0 +1,81 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Menu, MenuTrigger, MenuPanel } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { IconButton } from '@vuu-ui/vuu-ui-controls';
+import { useTableContext } from '../table-provider/TableProvider.js';
+import cx from 'clsx';
+import { useCallback } from 'react';
+import columnMenuCss from './ColumnMenu.css.js';
+import { getColumnMenuActionType, buildSortMenu, buildGroupMenu, buildAggregationMenuItems, buildVisibilityMenuItems, buildPinMenuItems, buildSettingsMenuItems } from './column-menu-utils.js';
+
+const classBase = "vuuColumnMenu";
+const ColumnMenu = ({
+  className,
+  column,
+  menuActionHandler: menuActionHandlerProp
+}) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-column-menu",
+    css: columnMenuCss,
+    window: targetWindow
+  });
+  const { dataSource, menuActionHandler } = useTableContext(true);
+  const menuActionClickHandler = useCallback(
+    (evt) => {
+      const columnMenuActionType = getColumnMenuActionType(evt.target);
+      if (menuActionHandlerProp?.(columnMenuActionType, column) !== true) {
+        return menuActionHandler(columnMenuActionType, column);
+      }
+    },
+    [column, menuActionHandler, menuActionHandlerProp]
+  );
+  const sortMenu = buildSortMenu(column, dataSource, menuActionClickHandler);
+  const groupMenu = buildGroupMenu(column, dataSource, menuActionClickHandler);
+  const aggregationMenu = buildAggregationMenuItems(
+    column,
+    dataSource,
+    menuActionClickHandler
+  );
+  const visibilityMenuItems = buildVisibilityMenuItems(
+    column,
+    menuActionClickHandler
+  );
+  const pinMenu = buildPinMenuItems(column, menuActionClickHandler);
+  const settingsMenuItems = buildSettingsMenuItems(
+    column,
+    menuActionClickHandler
+  );
+  const handleClick = useCallback(
+    (evt) => {
+      evt.stopPropagation();
+    },
+    []
+  );
+  return /* @__PURE__ */ jsxs(Menu, { children: [
+    /* @__PURE__ */ jsx(MenuTrigger, { children: /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        appearance: "transparent",
+        className: cx(classBase, className),
+        "data-embedded": true,
+        icon: "more-vert",
+        sentiment: "neutral",
+        "aria-label": "Open Column Menu",
+        onClick: handleClick
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(MenuPanel, { children: [
+      sortMenu,
+      groupMenu,
+      aggregationMenu,
+      visibilityMenuItems,
+      pinMenu,
+      settingsMenuItems
+    ] })
+  ] });
+};
+
+export { ColumnMenu };
+//# sourceMappingURL=ColumnMenu.js.map

package/esm/column-menu/ColumnMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnMenu.js","sources":["../../src/column-menu/ColumnMenu.tsx"],"sourcesContent":["import { Menu, MenuPanel, MenuTrigger } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { IconButton } from \"@vuu-ui/vuu-ui-controls\";\nimport { useTableContext } from \"../table-provider/TableProvider\";\nimport cx from \"clsx\";\nimport { HTMLAttributes, MouseEventHandler, useCallback } from \"react\";\n\nimport columnMenuCss from \"./ColumnMenu.css\";\nimport {\n  buildAggregationMenuItems,\n  buildPinMenuItems,\n  buildGroupMenu,\n  buildSortMenu,\n  buildVisibilityMenuItems,\n  ColumnMenuActionType,\n  getColumnMenuActionType,\n  type MenuItemClickHandler,\n  buildSettingsMenuItems,\n} from \"./column-menu-utils\";\nimport { MenuActionHandler } from \"@vuu-ui/vuu-context-menu\";\n\nconst classBase = \"vuuColumnMenu\";\n\nexport interface ColumnMenuProps extends HTMLAttributes<HTMLSpanElement> {\n  column: ColumnDescriptor;\n  menuActionHandler?: MenuActionHandler<ColumnMenuActionType, ColumnDescriptor>;\n}\n\nexport const ColumnMenu = ({\n  className,\n  column,\n  menuActionHandler: menuActionHandlerProp,\n}: ColumnMenuProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-column-menu\",\n    css: columnMenuCss,\n    window: targetWindow,\n  });\n\n  const { dataSource, menuActionHandler } = useTableContext(true);\n\n  const menuActionClickHandler = useCallback<MenuItemClickHandler>(\n    (evt) => {\n      const columnMenuActionType = getColumnMenuActionType(evt.target);\n      if (menuActionHandlerProp?.(columnMenuActionType, column) !== true) {\n        return menuActionHandler(columnMenuActionType, column);\n      }\n    },\n    [column, menuActionHandler, menuActionHandlerProp],\n  );\n\n  const sortMenu = buildSortMenu(column, dataSource, menuActionClickHandler);\n  const groupMenu = buildGroupMenu(column, dataSource, menuActionClickHandler);\n  const aggregationMenu = buildAggregationMenuItems(\n    column,\n    dataSource,\n    menuActionClickHandler,\n  );\n  const visibilityMenuItems = buildVisibilityMenuItems(\n    column,\n    menuActionClickHandler,\n  );\n  const pinMenu = buildPinMenuItems(column, menuActionClickHandler);\n  const settingsMenuItems = buildSettingsMenuItems(\n    column,\n    menuActionClickHandler,\n  );\n\n  const handleClick = useCallback<MouseEventHandler<HTMLButtonElement>>(\n    (evt) => {\n      // Prevent sort from triggering if the click were to bubble.\n      evt.stopPropagation();\n    },\n    [],\n  );\n\n  return (\n    <Menu>\n      <MenuTrigger>\n        <IconButton\n          appearance=\"transparent\"\n          className={cx(classBase, className)}\n          data-embedded\n          icon=\"more-vert\"\n          sentiment=\"neutral\"\n          aria-label=\"Open Column Menu\"\n          onClick={handleClick}\n        />\n      </MenuTrigger>\n      <MenuPanel>\n        {sortMenu}\n        {groupMenu}\n        {aggregationMenu}\n        {visibilityMenuItems}\n        {pinMenu}\n        {settingsMenuItems}\n      </MenuPanel>\n    </Menu>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;AAuBA,MAAM,SAAY,GAAA,eAAA;AAOX,MAAM,aAAa,CAAC;AAAA,EACzB,SAAA;AAAA,EACA,MAAA;AAAA,EACA,iBAAmB,EAAA;AACrB,CAAuB,KAAA;AACrB,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,iBAAA;AAAA,IACR,GAAK,EAAA,aAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAE,UAAA,EAAY,iBAAkB,EAAA,GAAI,gBAAgB,IAAI,CAAA;AAE9D,EAAA,MAAM,sBAAyB,GAAA,WAAA;AAAA,IAC7B,CAAC,GAAQ,KAAA;AACP,MAAM,MAAA,oBAAA,GAAuB,uBAAwB,CAAA,GAAA,CAAI,MAAM,CAAA;AAC/D,MAAA,IAAI,qBAAwB,GAAA,oBAAA,EAAsB,MAAM,CAAA,KAAM,IAAM,EAAA;AAClE,QAAO,OAAA,iBAAA,CAAkB,sBAAsB,MAAM,CAAA;AAAA;AACvD,KACF;AAAA,IACA,CAAC,MAAQ,EAAA,iBAAA,EAAmB,qBAAqB;AAAA,GACnD;AAEA,EAAA,MAAM,QAAW,GAAA,aAAA,CAAc,MAAQ,EAAA,UAAA,EAAY,sBAAsB,CAAA;AACzE,EAAA,MAAM,SAAY,GAAA,cAAA,CAAe,MAAQ,EAAA,UAAA,EAAY,sBAAsB,CAAA;AAC3E,EAAA,MAAM,eAAkB,GAAA,yBAAA;AAAA,IACtB,MAAA;AAAA,IACA,UAAA;AAAA,IACA;AAAA,GACF;AACA,EAAA,MAAM,mBAAsB,GAAA,wBAAA;AAAA,IAC1B,MAAA;AAAA,IACA;AAAA,GACF;AACA,EAAM,MAAA,OAAA,GAAU,iBAAkB,CAAA,MAAA,EAAQ,sBAAsB,CAAA;AAChE,EAAA,MAAM,iBAAoB,GAAA,sBAAA;AAAA,IACxB,MAAA;AAAA,IACA;AAAA,GACF;AAEA,EAAA,MAAM,WAAc,GAAA,WAAA;AAAA,IAClB,CAAC,GAAQ,KAAA;AAEP,MAAA,GAAA,CAAI,eAAgB,EAAA;AAAA,KACtB;AAAA,IACA;AAAC,GACH;AAEA,EAAA,4BACG,IACC,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,WACC,EAAA,EAAA,QAAA,kBAAA,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,UAAW,EAAA,aAAA;AAAA,QACX,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,QAClC,eAAa,EAAA,IAAA;AAAA,QACb,IAAK,EAAA,WAAA;AAAA,QACL,SAAU,EAAA,SAAA;AAAA,QACV,YAAW,EAAA,kBAAA;AAAA,QACX,OAAS,EAAA;AAAA;AAAA,KAEb,EAAA,CAAA;AAAA,yBACC,SACE,EAAA,EAAA,QAAA,EAAA;AAAA,MAAA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,eAAA;AAAA,MACA,mBAAA;AAAA,MACA,OAAA;AAAA,MACA;AAAA,KACH,EAAA;AAAA,GACF,EAAA,CAAA;AAEJ;;;;"}