@ds-mo/ui 14.17.0 → 14.17.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/.package-ready.json +1 -1
- package/dist/agent-patterns.json +1 -1
- package/dist/agent.json +5 -5
- package/dist/components/ds-table-sort.js +1 -1
- package/dist/components/ds-table.js +1 -1
- package/dist/components/ds-table.js.map +1 -1
- package/dist/components/p-BMERUCe1.js +2 -0
- package/dist/components/p-BMERUCe1.js.map +1 -0
- package/dist/docs/components.json +1 -1
- package/dist/mcp-data/registry/button-unfilled.json +1 -1
- package/dist/mcp-data/registry/registry.json +4 -4
- package/dist/mcp-data/registry/table.json +5 -5
- package/dist/types/components/Table/table-column-customizer.d.ts +0 -2
- package/package.json +1 -1
- package/dist/components/p-BdnQv7Zl.js +0 -2
- package/dist/components/p-BdnQv7Zl.js.map +0 -1
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
let n=0;function t(){n+=1;return`ds-table-column-customizer-${n}`}function e(n){return n.kind==="action"}function r(n){return n.header.trim()||n.headerLabel?.trim()||n.id}function o(n){return n.filter((n=>!e(n)))}function c(n,t){const e=o(n).map((n=>n.id));const r=new Set(e);const c=new Set;const u=[];for(const n of t??[]){if(!r.has(n)||c.has(n))continue;c.add(n);u.push(n)}for(const n of e){if(c.has(n))continue;u.push(n)}return u}function u(n,t){const e=o(n).map((n=>n.id));const r=new Set(e);const c=[...new Set((t??[]).filter((n=>r.has(n))))];if(e.length===0||c.length<e.length)return c;const u=e[0];return c.filter((n=>n!==u))}function s(n,t={}){if(!t.columnCustomizer)return n;const r=new Map(n.map((n=>[n.id,n])));const o=new Set(u(n,t.hiddenColumnIds));const s=c(n,t.columnOrder).map((n=>r.get(n))).filter((n=>!!n&&!o.has(n.id)));return[...s,...n.filter(e)]}function i(n,t,r){const c=n.find((n=>n.id===r));if(!c||e(c))return false;const s=new Set(u(n,t));if(s.has(r))return true;const i=o(n).filter((n=>!s.has(n.id)));return i.length>1}function f(n,t,e){const r=u(n,t);if(!i(n,r,e))return r;const o=new Set(r);if(o.has(e))o.delete(e);else o.add(e);return u(n,[...o])}function a(n,t,e){const o=new Map(n.map((n=>[n.id,n])));const s=u(n,t);const f=new Set(s);const a=c(n,e).flatMap((t=>{const e=o.get(t);if(!e)return[];return[{column:e,label:r(e),visible:!f.has(t),hideable:i(n,s,t),reorderable:true}]}));return a}function l(n,t,e){return a(n,t,e).map((n=>({label:n.label,value:n.column.id,showSwitch:true,switchValue:n.visible,isInactive:!n.hideable,reorderable:n.reorderable})))}export{c as a,u as b,f as c,e as i,t as n,s as r,l as t};
|
|
2
|
+
//# sourceMappingURL=p-BMERUCe1.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["columnCustomizerSeq","nextTableColumnCustomizerElementId","isTableActionColumn","column","kind","tableColumnCustomizerLabel","header","trim","headerLabel","id","tableDataColumns","columns","filter","resolveTableColumnOrder","columnOrder","catalogIds","map","catalog","Set","seen","ordered","has","add","push","resolveTableHiddenColumnIds","hiddenColumnIds","dataIds","data","hidden","length","keep","resolveTableVisibleColumns","options","columnCustomizer","byId","Map","visibleData","get","canToggleTableColumnHidden","columnId","find","candidate","toggleTableColumnHidden","resolved","delete","tableColumnCustomizerItems","resolvedHidden","dataItems","flatMap","label","visible","hideable","reorderable","tableColumnCustomizerMenuItems","item","value","showSwitch","switchValue","isInactive"],"sources":["src/wc/components/Table/table-column-customizer.ts"],"sourcesContent":["import type { MenuItemData } from '../Menu/menu-types';\nimport type { TableColumn } from './table-types';\n\nlet columnCustomizerSeq = 0;\n\nexport function nextTableColumnCustomizerElementId(): string {\n columnCustomizerSeq += 1;\n return `ds-table-column-customizer-${columnCustomizerSeq}`;\n}\n\nexport function isTableActionColumn(column: TableColumn): boolean {\n return column.kind === 'action';\n}\n\nexport function tableColumnCustomizerLabel(column: TableColumn): string {\n return column.header.trim() || column.headerLabel?.trim() || column.id;\n}\n\nexport function tableDataColumns(columns: TableColumn[]): TableColumn[] {\n return columns.filter(column => !isTableActionColumn(column));\n}\n\n/** Data-column ids in display order. Unknown, duplicate, and action ids are ignored. */\nexport function resolveTableColumnOrder(\n columns: TableColumn[],\n columnOrder: string[] | undefined\n): string[] {\n const catalogIds = tableDataColumns(columns).map(column => column.id);\n const catalog = new Set(catalogIds);\n const seen = new Set<string>();\n const ordered: string[] = [];\n\n for (const id of columnOrder ?? []) {\n if (!catalog.has(id) || seen.has(id)) continue;\n seen.add(id);\n ordered.push(id);\n }\n\n for (const id of catalogIds) {\n if (seen.has(id)) continue;\n ordered.push(id);\n }\n\n return ordered;\n}\n\n/**\n * Hidden data-column ids. Action and unknown ids are dropped. At least one data\n * column remains visible when the catalog has any data columns.\n */\nexport function resolveTableHiddenColumnIds(\n columns: TableColumn[],\n hiddenColumnIds: string[] | undefined\n): string[] {\n const dataIds = tableDataColumns(columns).map(column => column.id);\n const data = new Set(dataIds);\n const hidden = [...new Set((hiddenColumnIds ?? []).filter(id => data.has(id)))];\n if (dataIds.length === 0 || hidden.length < dataIds.length) return hidden;\n\n const keep = dataIds[0];\n return hidden.filter(id => id !== keep);\n}\n\nexport function resolveTableVisibleColumns(\n columns: TableColumn[],\n options: {\n columnCustomizer?: boolean;\n hiddenColumnIds?: string[];\n columnOrder?: string[];\n } = {}\n): TableColumn[] {\n if (!options.columnCustomizer) return columns;\n\n const byId = new Map(columns.map(column => [column.id, column]));\n const hidden = new Set(resolveTableHiddenColumnIds(columns, options.hiddenColumnIds));\n const visibleData = resolveTableColumnOrder(columns, options.columnOrder)\n .map(id => byId.get(id))\n .filter((column): column is TableColumn => !!column && !hidden.has(column.id));\n\n return [...visibleData, ...columns.filter(isTableActionColumn)];\n}\n\nexport function canToggleTableColumnHidden(\n columns: TableColumn[],\n hiddenColumnIds: string[] | undefined,\n columnId: string\n): boolean {\n const column = columns.find(candidate => candidate.id === columnId);\n if (!column || isTableActionColumn(column)) return false;\n\n const hidden = new Set(resolveTableHiddenColumnIds(columns, hiddenColumnIds));\n if (hidden.has(columnId)) return true;\n\n const visibleData = tableDataColumns(columns).filter(candidate => !hidden.has(candidate.id));\n return visibleData.length > 1;\n}\n\nexport function toggleTableColumnHidden(\n columns: TableColumn[],\n hiddenColumnIds: string[] | undefined,\n columnId: string\n): string[] {\n const resolved = resolveTableHiddenColumnIds(columns, hiddenColumnIds);\n if (!canToggleTableColumnHidden(columns, resolved, columnId)) return resolved;\n\n const hidden = new Set(resolved);\n if (hidden.has(columnId)) hidden.delete(columnId);\n else hidden.add(columnId);\n return resolveTableHiddenColumnIds(columns, [...hidden]);\n}\n\nexport function moveTableColumnOrder(order: string[], fromId: string, toId: string): string[] {\n const from = order.indexOf(fromId);\n const to = order.indexOf(toId);\n if (from < 0 || to < 0 || from === to) return order;\n\n const next = [...order];\n next.splice(from, 1);\n next.splice(to, 0, fromId);\n return next;\n}\n\nexport function moveTableColumnInOrder(\n order: string[],\n columnId: string,\n offset: number\n): string[] {\n const from = order.indexOf(columnId);\n if (from < 0 || offset === 0) return order;\n return moveTableColumnOrder(order, columnId, order[from + offset] ?? columnId);\n}\n\nexport interface TableColumnCustomizerItem {\n column: TableColumn;\n label: string;\n visible: boolean;\n hideable: boolean;\n reorderable: boolean;\n}\n\nexport function tableColumnCustomizerItems(\n columns: TableColumn[],\n hiddenColumnIds: string[] | undefined,\n columnOrder: string[] | undefined\n): TableColumnCustomizerItem[] {\n const byId = new Map(columns.map(column => [column.id, column]));\n const resolvedHidden = resolveTableHiddenColumnIds(columns, hiddenColumnIds);\n const hidden = new Set(resolvedHidden);\n const dataItems = resolveTableColumnOrder(columns, columnOrder).flatMap(id => {\n const column = byId.get(id);\n if (!column) return [];\n return [\n {\n column,\n label: tableColumnCustomizerLabel(column),\n visible: !hidden.has(id),\n hideable: canToggleTableColumnHidden(columns, resolvedHidden, id),\n reorderable: true,\n },\n ];\n });\n return dataItems;\n}\n\n/** Menu switch rows for the table-owned column customizer. */\nexport function tableColumnCustomizerMenuItems(\n columns: TableColumn[],\n hiddenColumnIds: string[] | undefined,\n columnOrder: string[] | undefined\n): MenuItemData[] {\n return tableColumnCustomizerItems(columns, hiddenColumnIds, columnOrder).map(item => ({\n label: item.label,\n value: item.column.id,\n showSwitch: true,\n switchValue: item.visible,\n isInactive: !item.hideable,\n reorderable: item.reorderable,\n }));\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -79,7 +79,7 @@
|
|
|
79
79
|
"An open popup is a transient pressed state rather than a selected one. While expanded is true and haspopup or hasMenu identifies a popup, the pressed wash is held for the popup's complete rendered lifecycle and survives hover without promoting foreground or selected fill, including when chrome opts out of selected fills with activeFill set to false. Expanded disclosure buttons without popup semantics remain visually neutral."
|
|
80
80
|
],
|
|
81
81
|
"responsiveBehavior": [
|
|
82
|
-
"The consuming layout decides when an icon-label action becomes icon-only and must provide an explicit accessible name after changing variants. Table caption Customize is one such layout: below 900px it uses the icon shape
|
|
82
|
+
"The consuming layout decides when an icon-label action becomes icon-only and must provide an explicit accessible name after changing variants. Table caption Customize is one such layout: below 900px it uses the icon shape while keeping the same neutral resting foreground regardless of the controlled column configuration.",
|
|
83
83
|
"When collapseLabel is set inside a named ds-table container narrower than 900px, an icon-label caption action omits its label and chevron and becomes icon-only while keeping its accessible name. An active control then promotes the icon to primary.",
|
|
84
84
|
"Use fill width only when the parent layout requires a full-width secondary action."
|
|
85
85
|
],
|
|
@@ -2055,7 +2055,7 @@
|
|
|
2055
2055
|
"An open popup is a transient pressed state rather than a selected one. While expanded is true and haspopup or hasMenu identifies a popup, the pressed wash is held for the popup's complete rendered lifecycle and survives hover without promoting foreground or selected fill, including when chrome opts out of selected fills with activeFill set to false. Expanded disclosure buttons without popup semantics remain visually neutral."
|
|
2056
2056
|
],
|
|
2057
2057
|
"responsiveBehavior": [
|
|
2058
|
-
"The consuming layout decides when an icon-label action becomes icon-only and must provide an explicit accessible name after changing variants. Table caption Customize is one such layout: below 900px it uses the icon shape
|
|
2058
|
+
"The consuming layout decides when an icon-label action becomes icon-only and must provide an explicit accessible name after changing variants. Table caption Customize is one such layout: below 900px it uses the icon shape while keeping the same neutral resting foreground regardless of the controlled column configuration.",
|
|
2059
2059
|
"When collapseLabel is set inside a named ds-table container narrower than 900px, an icon-label caption action omits its label and chevron and becomes icon-only while keeping its accessible name. An active control then promotes the icon to primary.",
|
|
2060
2060
|
"Use fill width only when the parent layout requires a full-width secondary action."
|
|
2061
2061
|
],
|
|
@@ -9079,7 +9079,7 @@
|
|
|
9079
9079
|
"pattern:menu-trigger"
|
|
9080
9080
|
],
|
|
9081
9081
|
"accessibility": [
|
|
9082
|
-
"The rendered structure uses a native table, caption, column headers, row groups, and data cells; keep the caption non-empty. The native caption remains visually hidden as the table's accessible name. When caption visibility is enabled, a 48px header bar renders as component chrome outside the horizontal scrollport. It defaults to a presentational caption title that does not duplicate the accessible name. Application-owned labeled controls supplied through the single named header slot replace that fallback and occupy the leading content width inside the component-owned 8px inset. When columnCustomizer is enabled, the table adds a trailing Customize control named Customize table
|
|
9082
|
+
"The rendered structure uses a native table, caption, column headers, row groups, and data cells; keep the caption non-empty. The native caption remains visually hidden as the table's accessible name. When caption visibility is enabled, a 48px header bar renders as component chrome outside the horizontal scrollport. It defaults to a presentational caption title that does not duplicate the accessible name. Application-owned labeled controls supplied through the single named header slot replace that fallback and occupy the leading content width inside the component-owned 8px inset. When columnCustomizer is enabled, the table adds a trailing Customize control named Customize table. Its label and resting foreground remain neutral when hidden or reordered columns differ from the catalog default. The control is icon-label at typical widths and the icon-only Table menu button below 900px. Otherwise the header slot receives the complete content width.",
|
|
9083
9083
|
"The data-mode switcher is the shared Menu of the table's supported infinite, pagination, and virtual modes. It uses an Ellipses trigger. The switcher is the final caption-bar action; when the column customizer is also present, a decorative vertical divider separates the two controls. dataMode remains controlled, and the application responds to change intent by supplying the matching records, pagination state, loading behavior, and query consequences. Escape, dismissal, and selection return focus to the trigger.",
|
|
9084
9084
|
"The column customizer is the shared Menu of switch rows, not a table-owned dialog. Data columns can be shown, hidden, and reordered. Action columns and the selection checkbox never appear in the menu. The last remaining visible data column cannot be hidden, but it stays focusable so it can still be reordered. Escape and outside click restore focus to the trigger. Persistence stays in the application.",
|
|
9085
9085
|
"Sorting controls remain buttons inside column headers and expose the table's one controlled member-row sort through aria-sort. ds-table-sort in the toolbar trailing cluster is the matching menu of Data and Direction sections; it emits the same dsSortChange shape so header clicks and menu choices stay in sync. Grouping never adds a second sort indicator or header control; the application supplies groups in its fixed product order. Optional column help underlines the header label with the shared dotted decoration and shows ds-tooltip from that label; it does not add a second header control or replace the column name.",
|
|
@@ -9090,7 +9090,7 @@
|
|
|
9090
9090
|
"Static and infinite tables may show an optional result summary footer when displayedCount and totalCount are finite. Virtual mode shows a total-only summary and ignores displayedCount. Pagination mode instead renders a named Pagination control with a compact selected-size total, vertical divider, and page position; range changes are announced independently with complete phrasing. Unmodified Left and Right Arrow request the adjacent page while focus is inside a paginated table or on a containing page scroller that owns it; editable fields, choice controls, sliders, open menus, and modified key combinations retain their own keyboard behavior. A table-owned footer slot can replace summary copy, while footer-leading and footer-trailing remain available in the same compact-bar anatomy. Nested dialog footers are ignored."
|
|
9091
9091
|
],
|
|
9092
9092
|
"states": [
|
|
9093
|
-
"Columns, rows, groups, grouping, sorting, selected row IDs, collapsed group IDs, hiddenColumnIds, columnOrder, dataMode, pagination, displayedCount, totalCount, and incremental-loading state are controlled inputs. Events communicate intent and never mutate those inputs. The optional header is one composable table-local surface: the component owns its 48px chrome, 8px inset on every side, and sticky placement while the application owns the leading slot's internal layout, controls, labels, filtering behavior, and action handling. Opting into dataModeSwitcher and columnCustomizer adds their trailing Menu triggers and requires caption visibility. When both are present, Customize precedes a decorative divider and the data-mode trigger remains the final action. The Customize
|
|
9093
|
+
"Columns, rows, groups, grouping, sorting, selected row IDs, collapsed group IDs, hiddenColumnIds, columnOrder, dataMode, pagination, displayedCount, totalCount, and incremental-loading state are controlled inputs. Events communicate intent and never mutate those inputs. The optional header is one composable table-local surface: the component owns its 48px chrome, 8px inset on every side, and sticky placement while the application owns the leading slot's internal layout, controls, labels, filtering behavior, and action handling. Opting into dataModeSwitcher and columnCustomizer adds their trailing Menu triggers and requires caption visibility. When both are present, Customize precedes a decorative divider and the data-mode trigger remains the final action. The Customize trigger keeps one stable label and neutral resting foreground whether or not hiddenColumnIds or columnOrder differ from the catalog default; the configured state remains visible inside the Menu. The table closes one trailing Menu before opening the other. The footer retains its compact-bar composition: application-owned leading status sits left while a controlled result summary or Pagination aligns right, before any trailing action. Content-sized tables remain natural for sparse or fixed-count results. height bounds the complete header, frame, and footer composition. fitViewport reserves the compact-state composition height in the nearest vertical scrollport while growing the visible table into that reservation as surrounding page chrome collapses.",
|
|
9094
9094
|
"Grouping supports one level. The application supplies groups in a fixed product-defined order and supplies ordered member rows independently. Group section headers show an emphasized text-body-medium label followed by a middle dot and plain secondary loaded progress, for example Critical · 50 of 166. The loaded value comes from the supplied member rows and the total comes from totalCount. A localized countLabel total phrase remains available for the complete assistive progress announcement. Virtual mode shows totals only, for example Critical · 166, because there is no loaded window. Groups may declare an optional intent (brand, neutral, negative, warning, caution, positive) that paints an LTR gradient from the faint intent surface at the label edge into faint neutral at the trailing edge, plus a bold intent title color. Neutral groups remain solid faint neutral. Section separators are painted inside that viewport-width surface so translucent border tokens composite with each intent background. Internal sections keep their separators; a collapsed or empty section header yields its separator only when it is the table's final rendered item. A trailing visually neutral icon-only ButtonUnfilled uses the 24px md double-inset action recipe and toggles controlled collapsedGroupIds, showing ChevronUp while expanded and ChevronDown while collapsed. While any group is expanded, a ChevronDownUp action uses the xs sort-control recipe widened to a table-owned 24px lane and collapses every group. It appears at the inline-end edge of the trailing column declared with kind action when one exists; otherwise a button-hugging 24px by 16px medium-elevation surface floats at the visible scrollport's header edge so the action remains reachable while member columns scroll beneath it. With stickyHeader enabled, each contained section uses its one real section row as a native sticky header inside its real row-group boundary. The browser therefore owns pinning, push-off, scrolling, and resize layout in one pass without a duplicated lane, active-section state, transforms, or scroll-time geometry. Shared grid tracks retain exact header and member-cell alignment. The section surface also stays pinned to the visible horizontal scrollport and spans the smaller of the visible viewport or table width. Virtual grouped tables flatten headers and members into that same scrollport; expanding a section never introduces an inner scroller.",
|
|
9095
9095
|
"When columnCustomizer is false, columns render in catalog order. When it is true, columns remains the catalog: hiddenColumnIds and columnOrder control visibility and data-column sequence, action columns stay last, cannot be hidden, and remain absent from the customizer Menu, and dsColumnsConfigChange reports the next hidden ids and data-column order without mutating those inputs. The customizer Menu live-applies show/hide and data-column reorder. The table does not persist preferences.",
|
|
9096
9096
|
"An active member sort toggles only between ascending and descending; activating a different sortable label moves the one sorting state to that key. Applications may still clear the controlled sort state explicitly. Grouping does not introduce another interactive direction.",
|
|
@@ -9105,7 +9105,7 @@
|
|
|
9105
9105
|
],
|
|
9106
9106
|
"responsiveBehavior": [
|
|
9107
9107
|
"The table keeps native semantics at narrow widths and scrolls horizontally instead of transforming into cards.",
|
|
9108
|
-
"Inside the named ds-table container, caption Filter, Group, and Sort controls that opt into collapseLabel become icon-only below 900px by omitting their labels and chevrons. Active filtering or grouping promotes the visible icon to primary. Sort keeps resting secondary chrome because its selection lives in the menu and headers. Customize switches to the icon-only Table menu button below 900px
|
|
9108
|
+
"Inside the named ds-table container, caption Filter, Group, and Sort controls that opt into collapseLabel become icon-only below 900px by omitting their labels and chevrons. Active filtering or grouping promotes the visible icon to primary. Sort keeps resting secondary chrome because its selection lives in the menu and headers. Customize switches to the icon-only Table menu button below 900px and keeps its neutral resting foreground regardless of the controlled column configuration.",
|
|
9109
9109
|
"stickyHeader follows the active vertical scroll owner: a maxHeight, height, or fitViewport table keeps its native header and group sections inside one bounded table scrollport, while a document-flow table retains a semantic native header and renders a sticky control header whose columns follow the body's native inline scroll timeline. Consumers set --ds-table-sticky-header-offset when page chrome occupies an unbounded document scrollport edge. When the 48px table header bar is visible, it sticks at that external offset and the column header stacks immediately below it.",
|
|
9110
9110
|
"fitViewport uses viewportInsetBlockStart and viewportInsetBlockEnd to describe compact surrounding chrome and page gutters relative to the nearest vertical scroll owner. Before the table reaches that compact position, its host reserves the eventual height while the visible composition grows and vertical input remains owned by the outer page. Once settled, the internal table viewport becomes the vertical scroll owner. Bounded grouped tables use browser-native sticky section rows inside real block row-group boundaries, so scroll and resize do not run component JavaScript or trigger reactive section swaps. Document-flow tables retain the synchronized visual lane required by their separate horizontal scrollport.",
|
|
9111
9111
|
"Without maxHeight the table grows the document and automatic lazy loading observes the browser viewport. Horizontal scrolling chains vertical wheel and trackpad movement to the page instead of trapping it.",
|