@ds-mo/ui 14.20.0 → 14.22.0

package/dist/mcp-data/registry/table-group.json

@@ -0,0 +1,301 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "table-group",
+  "title": "TableGroup",
+  "description": "Two-panel toolbar control for choosing one table grouping data point and the ascending or descending order of its group sections.",
+  "type": "registry:ui",
+  "meta": {
+    "library": "@ds-mo/ui",
+    "distribution": "npm",
+    "storybook": "https://zainadeel.github.io/compomo/?path=/story/table-group",
+    "source": "src/wc/components/TableGroup/TableGroup.tsx",
+    "intentStatus": "complete",
+    "intent": {
+      "audience": "general",
+      "status": "stable",
+      "summary": "Two-panel toolbar control for choosing one table grouping data point and the ascending or descending order of its group sections.",
+      "useWhen": [
+        "A table toolbar needs explicit control of one grouping level and its section order.",
+        "Grouping data-point labels differ from compact table-header labels."
+      ],
+      "avoidWhen": [
+        "The table is not groupable.",
+        "The application expects the component to rearrange rows or create group sections internally."
+      ],
+      "alternatives": [
+        {
+          "when": "The choice is one submitted form value with no dependent order pane.",
+          "component": "component:ds-select",
+          "reason": "Select owns form-value semantics rather than table grouping state."
+        }
+      ],
+      "commonlyComposedWith": [
+        "component:ds-table",
+        "component:ds-table-toolbar",
+        "component:ds-table-filter",
+        "component:ds-table-sort"
+      ],
+      "patterns": [
+        "pattern:menu-trigger"
+      ],
+      "accessibility": [
+        "The trigger opens a named non-modal dialog. Data and Order are independently named single-selection listboxes.",
+        "Up and Down move within the focused pane. Right moves from Data to Order when a group is active, Left returns to the selected Data row, and Escape closes the dialog and restores trigger focus.",
+        "The right pane remains present before a group is active as one complete empty state without the Order heading, and explains that a group must be selected."
+      ],
+      "states": [
+        "options and grouping are controlled. dsGroupChange reports a complete TableGroupingState and dsClear requests null grouping without mutating either input.",
+        "Selecting a new data point starts its order at ascending. Re-selecting the active data point preserves its direction.",
+        "Selecting a data point or direction applies immediately and leaves the dialog open so the other pane can be changed."
+      ],
+      "responsiveBehavior": [
+        "Use in the trailing region of ds-table-toolbar.",
+        "The trigger uses the shared caption-control button behavior and becomes icon-only in compact named table containers.",
+        "Both panes remain present and their choice lists scroll within the collision-constrained popup."
+      ],
+      "frameworkCaveats": {
+        "customElements": [
+          "Assign options and grouping as JavaScript properties and replace grouping from dsGroupChange or dsClear."
+        ],
+        "react": [
+          "Keep grouping in application state and replace it from dsGroupChange; set it to null from dsClear."
+        ],
+        "angular": [
+          "Import the generated DsTableGroup adapter and bind options and grouping as properties."
+        ]
+      },
+      "references": [
+        {
+          "label": "Review states",
+          "path": "src/wc/components/TableGroup/TableGroup.stories.ts"
+        },
+        {
+          "label": "Toolbar composition owner",
+          "path": "src/wc/components/TableToolbar/TableToolbar.agent.json"
+        }
+      ]
+    },
+    "api": {
+      "props": {
+        "ariaLabel": {
+          "type": "string | null",
+          "resolvedType": "null | string",
+          "attribute": "aria-label",
+          "default": "null",
+          "required": false,
+          "mutable": false,
+          "description": "Accessible name for the trigger and non-modal dialog."
+        },
+        "clearLabel": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "clear-label",
+          "default": "'Clear'",
+          "required": false,
+          "mutable": false,
+          "description": "Clear action label."
+        },
+        "emptyMessage": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "empty-message",
+          "default": "'Select a group to choose its order.'",
+          "required": false,
+          "mutable": false,
+          "description": "Empty message kept in the order pane until a grouping data point is selected."
+        },
+        "grouping": {
+          "type": "TableGroupingState | null",
+          "resolvedType": "TableGroupingState | null",
+          "default": "null",
+          "required": false,
+          "mutable": false,
+          "description": "Controlled grouping field and the order of its group sections."
+        },
+        "open": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "open",
+          "default": "false",
+          "required": false,
+          "mutable": true,
+          "description": "Controlled popup visibility."
+        },
+        "options": {
+          "type": "TableGroupOption[]",
+          "resolvedType": "TableGroupOption[]",
+          "default": "[]",
+          "required": false,
+          "mutable": false,
+          "description": "Product-owned data points that may group the table."
+        }
+      },
+      "events": [
+        {
+          "name": "dsClear",
+          "detail": "void",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "description": "Requests removal of the controlled grouping state."
+        },
+        {
+          "name": "dsGroupChange",
+          "detail": "TableGroupingState",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "description": "Requests replacement of the complete controlled grouping state."
+        },
+        {
+          "name": "dsOpenChange",
+          "detail": "boolean",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "description": "Reports controlled popup visibility changes."
+        }
+      ],
+      "methods": [],
+      "slots": []
+    },
+    "props": {
+      "ariaLabel": {
+        "type": "string | null",
+        "resolvedType": "null | string",
+        "attribute": "aria-label",
+        "default": "null",
+        "required": false,
+        "mutable": false,
+        "description": "Accessible name for the trigger and non-modal dialog."
+      },
+      "clearLabel": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "clear-label",
+        "default": "'Clear'",
+        "required": false,
+        "mutable": false,
+        "description": "Clear action label."
+      },
+      "emptyMessage": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "empty-message",
+        "default": "'Select a group to choose its order.'",
+        "required": false,
+        "mutable": false,
+        "description": "Empty message kept in the order pane until a grouping data point is selected."
+      },
+      "grouping": {
+        "type": "TableGroupingState | null",
+        "resolvedType": "TableGroupingState | null",
+        "default": "null",
+        "required": false,
+        "mutable": false,
+        "description": "Controlled grouping field and the order of its group sections."
+      },
+      "open": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "open",
+        "default": "false",
+        "required": false,
+        "mutable": true,
+        "description": "Controlled popup visibility."
+      },
+      "options": {
+        "type": "TableGroupOption[]",
+        "resolvedType": "TableGroupOption[]",
+        "default": "[]",
+        "required": false,
+        "mutable": false,
+        "description": "Product-owned data points that may group the table."
+      }
+    },
+    "events": [
+      {
+        "name": "dsClear",
+        "detail": "void",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "description": "Requests removal of the controlled grouping state."
+      },
+      {
+        "name": "dsGroupChange",
+        "detail": "TableGroupingState",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "description": "Requests replacement of the complete controlled grouping state."
+      },
+      {
+        "name": "dsOpenChange",
+        "detail": "boolean",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "description": "Reports controlled popup visibility changes."
+      }
+    ],
+    "methods": [],
+    "slots": [],
+    "exports": {
+      "customElement": "ds-table-group",
+      "react": "DsTableGroup",
+      "vue": "DsTableGroup",
+      "angular": "DsTableGroup"
+    },
+    "consumption": {
+      "install": "npm install @ds-mo/ui @ds-mo/tokens @ds-mo/icons",
+      "cssSetup": "import '@ds-mo/tokens';\nimport '@ds-mo/tokens/reset';\nimport '@ds-mo/tokens/globals';",
+      "customElements": {
+        "import": "import '@ds-mo/ui/dist/components/ds-table-group.js';",
+        "example": "<ds-table-group></ds-table-group>"
+      },
+      "react": {
+        "import": "import { DsTableGroup } from '@ds-mo/ui/react';",
+        "example": "<DsTableGroup />"
+      },
+      "vue": {
+        "import": "import { DsTableGroup } from '@ds-mo/ui/vue';",
+        "example": "<DsTableGroup />"
+      },
+      "angular": {
+        "import": "import { DsTableGroup } from '@ds-mo/ui/angular/ds-table-group';",
+        "example": "<ds-table-group></ds-table-group>"
+      },
+      "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: grouping, options.",
+      "peerDependencies": {
+        "required": [
+          "@ds-mo/tokens ^6.5.0",
+          "@ds-mo/icons ^7.0.0"
+        ],
+        "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
+      }
+    }
+  },
+  "dependencies": [
+    "@ds-mo/ui",
+    "@ds-mo/tokens"
+  ],
+  "registryDependencies": [
+    "button-unfilled",
+    "empty-state",
+    "input",
+    "text"
+  ],
+  "files": [
+    {
+      "path": "src/wc/components/TableGroup/TableGroup.css",
+      "content": "@import '../../utils/choice-list.css';\n@import '../../utils/control-parts.css';\n@import '../../utils/table-caption-control.css';\n\n:host {\n  display: inline-flex;\n  min-inline-size: 0;\n  max-inline-size: var(--dimension-menu-width-xs);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.table-group__body {\n  display: grid;\n  grid-template-columns: var(--dimension-menu-width-xs) var(--dimension-menu-width-sm);\n  min-height: calc(var(--dimension-size-800) * 4 + var(--dimension-space-150));\n  max-height: calc(100vh - var(--dimension-size-800) - var(--dimension-size-600));\n}\n\n.table-group__data-pane,\n.table-group__order-pane {\n  display: flex;\n  min-width: 0;\n  min-height: 0;\n  flex-direction: column;\n}\n\n.table-group__data-pane {\n  border-inline-end: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n}\n\n.table-group__list {\n  flex: 1 1 auto;\n}\n\n.table-group__empty {\n  flex: 1 1 auto;\n}\n\n.table-group__footer {\n  flex: 0 0 auto;\n}\n\n.table-group__footer .ds-choice-footer__content {\n  justify-content: flex-start;\n}\n\n.table-group__footer[aria-hidden='true']::before {\n  visibility: hidden;\n}\n\n.table-group__footer[aria-hidden='true'] .ds-choice-footer__content {\n  visibility: hidden;\n}\n\n@media (forced-colors: active) {\n  .table-group__data-pane {\n    border-inline-end-color: var(--ds-forced-color-content);\n  }\n}\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/wc/components/TableGroup/TableGroup.tsx",
+      "content": "import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport {\n  resolveChoicePopupAlignOffset,\n  resolveCssLengthPx,\n  resolveMotionTimeMs,\n  TOKEN_CSS_LENGTHS,\n  TOKEN_DEFAULTS,\n} from '../../utils';\nimport { AnchoredPositionController } from '../../utils/anchored-position-controller';\nimport { AnchoredOverlayInteractionController } from '../../utils/anchored-overlay-interaction-controller';\nimport { resolveAnchoredOverlayBoundaryRect } from '../../utils/anchored-overlay-boundary';\nimport { ChoiceListSection, ChoiceOptionRow } from '../../utils/choice-list-parts';\nimport type { TableGroupingState, TableSortDirection } from '../Table/table-types';\n\nexport interface TableGroupOption {\n  label: string;\n  value: string;\n  description?: string;\n  isInactive?: boolean;\n}\n\nlet tableGroupSeq = 0;\n\n@Component({\n  tag: 'ds-table-group',\n  styleUrl: 'TableGroup.css',\n  scoped: true,\n})\nexport class TableGroup {\n  @Element() private el!: HTMLElement;\n\n  /** Product-owned data points that may group the table. */\n  @Prop() options: TableGroupOption[] = [];\n  /** Controlled grouping field and the order of its group sections. */\n  @Prop() grouping: TableGroupingState | null = null;\n  /** Accessible name for the trigger and non-modal dialog. */\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n  /** Controlled popup visibility. */\n  @Prop({ mutable: true }) open = false;\n  /** Empty message kept in the order pane until a grouping data point is selected. */\n  @Prop() emptyMessage = 'Select a group to choose its order.';\n  /** Clear action label. */\n  @Prop() clearLabel = 'Clear';\n\n  /** Requests replacement of the complete controlled grouping state. */\n  @Event() dsGroupChange!: EventEmitter<TableGroupingState>;\n  /** Requests removal of the controlled grouping state. */\n  @Event() dsClear!: EventEmitter<void>;\n  /** Reports controlled popup visibility changes. */\n  @Event() dsOpenChange!: EventEmitter<boolean>;\n\n  @State() private shouldRender = false;\n  @State() private closing = false;\n  @State() private positionReady = false;\n  @State() private pos = { x: 0, y: 0 };\n  @State() private focusRingVisible = false;\n\n  private readonly componentId = `ds-table-group-${++tableGroupSeq}`;\n  private readonly triggerId = `${this.componentId}-trigger`;\n  private readonly popupId = `${this.componentId}-popup`;\n  private triggerElement: HTMLElement | null = null;\n  private pendingInitialFocusVisible = false;\n  private closeTimer: ReturnType<typeof setTimeout> | null = null;\n\n  private readonly position = new AnchoredPositionController({\n    getAnchor: () => this.triggerElement,\n    getPopup: () => this.el.querySelector<HTMLElement>('.table-group-popup'),\n    getOwnerDocument: () => this.el.ownerDocument,\n    measure: (anchor, popup) => {\n      if (!this.open) return null;\n      const sectionInsetPx = resolveCssLengthPx(TOKEN_DEFAULTS.space050, TOKEN_DEFAULTS.space050);\n      return {\n        anchorRect: anchor.getBoundingClientRect(),\n        popupWidth: popup.offsetWidth || this.popupFallbackWidth,\n        popupHeight: popup.offsetHeight || this.popupFallbackHeight,\n        side: 'bottom',\n        align: 'end',\n        sideOffsetPx: resolveCssLengthPx(TOKEN_CSS_LENGTHS.space050, TOKEN_DEFAULTS.space050),\n        alignOffsetPx: resolveChoicePopupAlignOffset({\n          align: 'end',\n          alignOffsetPx: 0,\n          sectionInsetPx,\n        }),\n        viewportPadPx: resolveCssLengthPx(TOKEN_DEFAULTS.space050, TOKEN_DEFAULTS.space050),\n        viewportWidth: window.innerWidth,\n        viewportHeight: window.innerHeight,\n        collisionRect: resolveAnchoredOverlayBoundaryRect(anchor),\n      };\n    },\n    apply: ({ x, y }) => {\n      this.pos = { x, y };\n    },\n    onReady: () => {\n      this.positionReady = true;\n    },\n    liveUpdate: 'double-frame',\n    observeResize: true,\n    topLayer: true,\n  });\n\n  private readonly interaction = new AnchoredOverlayInteractionController({\n    getAnchor: () => this.triggerElement,\n    getPopup: () => this.el.querySelector<HTMLElement>('.table-group-popup'),\n    getOwnerDocument: () => this.el.ownerDocument,\n    onOutsideActivation: () => this.close(),\n  });\n\n  componentDidLoad() {\n    if (this.open) this.onOpenChange(true);\n  }\n\n  disconnectedCallback() {\n    this.position.unobserve();\n    this.interaction.disconnect();\n    if (this.closeTimer) clearTimeout(this.closeTimer);\n  }\n\n  @Watch('open')\n  onOpenChange(isOpen: boolean) {\n    if (isOpen) {\n      this.teardown();\n      this.shouldRender = true;\n      this.closing = false;\n      this.positionReady = false;\n      this.focusRingVisible = this.pendingInitialFocusVisible;\n      this.interaction.connect();\n      this.position.observe();\n      this.position.schedule(() => this.focusInitialDataPoint());\n      return;\n    }\n    if (!this.shouldRender) return;\n    this.position.cancel();\n    this.closing = true;\n    this.interaction.disconnect();\n    this.position.unobserve();\n    const duration = resolveMotionTimeMs(\n      TOKEN_DEFAULTS.motionShort2,\n      TOKEN_DEFAULTS.animationDurationShort3\n    );\n    if (duration <= 0) this.finishClose();\n    else this.closeTimer = setTimeout(() => this.finishClose(), duration);\n  }\n\n  @Listen('keydown')\n  handleKeyDown(event: KeyboardEvent) {\n    if (!this.shouldRender || this.closing) return;\n    if (event.key === 'Escape') {\n      event.preventDefault();\n      this.close();\n      return;\n    }\n    if (event.key !== 'Tab' || !this.interaction.tabLeavesPopup(event)) return;\n    event.preventDefault();\n    this.close(false);\n    this.interaction.moveFocusAfterTab(event.shiftKey);\n  }\n\n  private get popupFallbackWidth(): number {\n    return resolveCssLengthPx(TOKEN_DEFAULTS.menuWidthLg, TOKEN_DEFAULTS.menuWidthLg);\n  }\n\n  private get popupFallbackHeight(): number {\n    return resolveCssLengthPx(TOKEN_DEFAULTS.menuFallbackHeight, TOKEN_DEFAULTS.menuFallbackHeight);\n  }\n\n  private teardown() {\n    this.position.unobserve();\n    this.interaction.disconnect();\n    if (this.closeTimer) {\n      clearTimeout(this.closeTimer);\n      this.closeTimer = null;\n    }\n  }\n\n  private toggle(fromKeyboard = false) {\n    if (this.open) {\n      this.close();\n      return;\n    }\n    this.pendingInitialFocusVisible = fromKeyboard;\n    this.open = true;\n    this.dsOpenChange.emit(true);\n    this.onOpenChange(true);\n  }\n\n  private close(restoreFocus = true) {\n    if (restoreFocus) this.interaction.focusAnchor();\n    this.open = false;\n    this.dsOpenChange.emit(false);\n    this.onOpenChange(false);\n  }\n\n  private finishClose() {\n    const popup = this.el.querySelector<HTMLElement>('.table-group-popup');\n    if (popup?.matches(':popover-open')) popup.hidePopover();\n    this.shouldRender = false;\n    this.closing = false;\n    this.closeTimer = null;\n  }\n\n  private focusInitialDataPoint() {\n    requestAnimationFrame(() => {\n      const selected = this.grouping\n        ? this.el.querySelector<HTMLElement>(\n            `[data-group-value=\"${CSS.escape(this.grouping.columnId)}\"] [role=\"option\"]`\n          )\n        : null;\n      const initial =\n        selected ??\n        this.el.querySelector<HTMLElement>(\n          '[data-group-value] [role=\"option\"]:not([aria-disabled=\"true\"])'\n        );\n      initial?.focus();\n      this.pendingInitialFocusVisible = false;\n    });\n  }\n\n  private selectData(option: TableGroupOption) {\n    if (option.isInactive) return;\n    this.dsGroupChange.emit({\n      columnId: option.value,\n      direction: this.grouping?.columnId === option.value ? this.grouping.direction : 'asc',\n    });\n  }\n\n  private selectDirection(direction: TableSortDirection) {\n    if (!this.grouping || this.grouping.direction === direction) return;\n    this.dsGroupChange.emit({ ...this.grouping, direction });\n  }\n\n  private moveFocus(\n    event: KeyboardEvent,\n    selector: string,\n    currentIndex: number,\n    oppositeSelector?: string\n  ) {\n    if (oppositeSelector && (event.key === 'ArrowLeft' || event.key === 'ArrowRight')) {\n      event.preventDefault();\n      this.focusRingVisible = true;\n      this.el.querySelector<HTMLElement>(oppositeSelector)?.focus();\n      return;\n    }\n    if (!['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) return;\n    event.preventDefault();\n    const items = Array.from(this.el.querySelectorAll<HTMLElement>(selector)).filter(\n      item => item.getAttribute('aria-disabled') !== 'true'\n    );\n    if (!items.length) return;\n    let next: number;\n    if (event.key === 'Home') next = 0;\n    else if (event.key === 'End') next = items.length - 1;\n    else next = (currentIndex + (event.key === 'ArrowDown' ? 1 : -1) + items.length) % items.length;\n    this.focusRingVisible = true;\n    items[next]?.focus();\n  }\n\n  private renderDataOption(option: TableGroupOption, index: number) {\n    const selected = option.value === this.grouping?.columnId;\n    return (\n      <ChoiceOptionRow\n        id={`${this.componentId}-data-${index}`}\n        option={{ ...option }}\n        selected={selected}\n        active={selected}\n        focusRingVisible={this.focusRingVisible}\n        usesSubtext={Boolean(option.description)}\n        tabIndex={selected || (!this.grouping && index === 0) ? 0 : -1}\n        onHover={() => {\n          this.focusRingVisible = false;\n        }}\n        onSelect={() => this.selectData(option)}\n        onKeyDown={(event: KeyboardEvent) => {\n          if (event.key === 'Enter' || event.key === ' ') {\n            event.preventDefault();\n            this.selectData(option);\n            return;\n          }\n          this.moveFocus(\n            event,\n            '[data-group-value] [role=\"option\"]',\n            this.options\n              .filter(candidate => !candidate.isInactive)\n              .findIndex(candidate => candidate.value === option.value),\n            this.grouping\n              ? `[data-group-direction=\"${this.grouping.direction}\"] [role=\"option\"]`\n              : undefined\n          );\n        }}\n      />\n    );\n  }\n\n  private renderDirection(direction: TableSortDirection, label: string, index: number) {\n    const selected = direction === this.grouping?.direction;\n    return (\n      <ChoiceOptionRow\n        id={`${this.componentId}-direction-${direction}`}\n        option={{ label, value: direction }}\n        selected={selected}\n        active={selected}\n        focusRingVisible={this.focusRingVisible}\n        usesSubtext={false}\n        tabIndex={selected ? 0 : -1}\n        onHover={() => {\n          this.focusRingVisible = false;\n        }}\n        onSelect={() => this.selectDirection(direction)}\n        onKeyDown={(event: KeyboardEvent) => {\n          if (event.key === 'Enter' || event.key === ' ') {\n            event.preventDefault();\n            this.selectDirection(direction);\n            return;\n          }\n          this.moveFocus(\n            event,\n            '[data-group-direction] [role=\"option\"]',\n            index,\n            `[data-group-value=\"${CSS.escape(this.grouping?.columnId ?? '')}\"] [role=\"option\"]`\n          );\n        }}\n      />\n    );\n  }\n\n  render() {\n    const name = this.ariaLabel?.trim() || 'Group table';\n    const popupStyle: Record<string, string> = {\n      position: 'fixed',\n      left: '0',\n      top: '0',\n      transform: `translate(${Math.round(this.pos.x)}px, ${Math.round(this.pos.y)}px)`,\n      zIndex: '9998',\n      visibility: this.positionReady ? 'visible' : 'hidden',\n    };\n\n    return (\n      <Host hidden={this.options.length === 0 ? true : undefined}>\n        {this.options.length ? (\n          <ds-button-unfilled\n            ref={element => {\n              this.triggerElement = (element as HTMLElement) ?? null;\n            }}\n            id={this.triggerId}\n            variant=\"icon-label\"\n            size=\"md\"\n            icon=\"SectionList\"\n            label=\"Group\"\n            labelEmphasis={false}\n            pressScale={false}\n            aria-label={name}\n            hasMenu={true}\n            collapseLabel={true}\n            expanded={this.open}\n            controls={this.popupId}\n            onDsClick={(event: CustomEvent<MouseEvent>) => this.toggle(event.detail.detail === 0)}\n          />\n        ) : null}\n\n        {this.shouldRender ? (\n          <div\n            id={this.popupId}\n            popover=\"manual\"\n            class={{\n              'table-group-popup': true,\n              'ds-choice-popup': true,\n              'ds-choice-popup--closing': this.closing,\n            }}\n            style={popupStyle}\n            role=\"dialog\"\n            aria-label={name}\n          >\n            <div class=\"table-group__body\">\n              <div class=\"table-group__data-pane\">\n                <ChoiceListSection\n                  heading=\"Data\"\n                  ariaLabel=\"Group data\"\n                  className=\"table-group__list\"\n                >\n                  {this.options.map((option, index) => (\n                    <div data-group-value={option.value}>\n                      {this.renderDataOption(option, index)}\n                    </div>\n                  ))}\n                </ChoiceListSection>\n                <div\n                  class=\"table-group__footer ds-choice-footer\"\n                  aria-hidden={!this.grouping ? 'true' : undefined}\n                >\n                  <div class=\"ds-choice-footer__content ds-control--md\">\n                    {this.grouping ? (\n                      <button\n                        class=\"ds-choice-footer__clear ds-text-action ds-focus-ring\"\n                        type=\"button\"\n                        onClick={() => this.dsClear.emit()}\n                      >\n                        <ds-text as=\"span\" variant=\"text-body-medium\" color=\"inherit\">\n                          {this.clearLabel}\n                        </ds-text>\n                      </button>\n                    ) : null}\n                  </div>\n                </div>\n              </div>\n\n              <div class=\"table-group__order-pane\">\n                {this.grouping ? (\n                  <ChoiceListSection\n                    heading=\"Order\"\n                    ariaLabel=\"Group order\"\n                    className=\"table-group__list\"\n                  >\n                    <div data-group-direction=\"asc\">\n                      {this.renderDirection('asc', 'Ascending', 0)}\n                    </div>\n                    <div data-group-direction=\"desc\">\n                      {this.renderDirection('desc', 'Descending', 1)}\n                    </div>\n                  </ChoiceListSection>\n                ) : (\n                  <div class=\"table-group__empty ds-choice-empty ds-empty-region\">\n                    <ds-empty-state body={this.emptyMessage} />\n                  </div>\n                )}\n              </div>\n            </div>\n          </div>\n        ) : null}\n      </Host>\n    );\n  }\n}\n",
+      "type": "registry:ui"
+    }
+  ]
+}