@fluentui/web-components 2.5.11 → 3.0.0-alpha.1

package/dist/esm/data-grid/data-grid-cell.styles.js

@@ -1,36 +0,0 @@
-import { css } from '@microsoft/fast-element';
-import { SystemColors } from '@microsoft/fast-web-utilities';
-import { focusVisible, forcedColorsStylesheetBehavior, } from '@microsoft/fast-foundation';
-import { controlCornerRadius, designUnit, focusStrokeWidth, neutralForegroundRest, strokeWidth, } from '../design-tokens';
-import { typeRampBase } from '../styles/patterns/type-ramp';
-import { focusTreatmentBase } from '../styles/focus';
-export const dataGridCellStyles = (context, definition) => css `
-    :host {
-      padding: calc((${designUnit} + ${focusStrokeWidth} - ${strokeWidth}) * 1px) calc(((${designUnit} * 3) + ${focusStrokeWidth} - ${strokeWidth}) * 1px);
-      color: ${neutralForegroundRest};
-      box-sizing: border-box;
-      ${typeRampBase}
-      border: transparent calc(${strokeWidth} * 1px) solid;
-      overflow: hidden;
-      white-space: nowrap;
-      border-radius: calc(${controlCornerRadius} * 1px);
-    }
-
-    :host(.column-header) {
-      font-weight: 600;
-    }
-
-    :host(:${focusVisible}) {
-      ${focusTreatmentBase}
-    }
-  `.withBehaviors(forcedColorsStylesheetBehavior(css `
-        :host {
-          forced-color-adjust: none;
-          background: ${SystemColors.Field};
-          color: ${SystemColors.FieldText};
-        }
-
-        :host(:${focusVisible}) {
-          outline-color: ${SystemColors.FieldText};
-        }
-      `));

package/dist/esm/data-grid/data-grid-cell.vscode.definition.json

@@ -1,34 +0,0 @@
-{
-    "version": 1.1,
-    "tags": [
-        {
-            "name": "fluent-data-grid-cell",
-            "title": "Data grid cell",
-            "description": "The Fluent UI data grid cell element",
-            "attributes": [
-                {
-                    "name": "cell-type",
-                    "title": "Cell type",
-                    "description": "The type of cell",
-                    "type": "string",
-                    "values": [{ "name": "default" }, { "name": "columnheader" }],
-                    "required": false
-                },
-                {
-                    "name": "grid-column",
-                    "title": "Grid column",
-                    "description": "Positions the cell in the column layout.",
-                    "type": "string",
-                    "required": false
-                }
-            ],
-            "slots": [
-                {
-                    "name": "",
-                    "title": "Default slot",
-                    "description": "The cell content"
-                }
-            ]
-        }
-    ]
-}

package/dist/esm/data-grid/data-grid-row.styles.js

@@ -1,24 +0,0 @@
-import { css } from '@microsoft/fast-element';
-import { forcedColorsStylesheetBehavior, } from '@microsoft/fast-foundation';
-import { fillColor, neutralStrokeDividerRest, strokeWidth } from '../design-tokens';
-export const dataGridRowStyles = (context, definition) => css `
-    :host {
-      display: grid;
-      padding: 1px 0;
-      box-sizing: border-box;
-      width: 100%;
-      border-bottom: calc(${strokeWidth} * 1px) solid ${neutralStrokeDividerRest};
-    }
-
-    :host(.header) {
-    }
-
-    :host(.sticky-header) {
-      background: ${fillColor};
-      position: sticky;
-      top: 0;
-    }
-  `.withBehaviors(forcedColorsStylesheetBehavior(css `
-        :host {
-        }
-      `));

package/dist/esm/data-grid/data-grid-row.vscode.definition.json

@@ -1,34 +0,0 @@
-{
-    "version": 1.1,
-    "tags": [
-        {
-            "name": "fluent-data-grid-row",
-            "title": "Data grid row",
-            "description": "The Fluent UI data grid row element",
-            "attributes": [
-                {
-                    "name": "grid-template-columns",
-                    "title": "Grid template columns",
-                    "description": "Value that gets applied to the the css gridTemplateColumns attribute of child rows",
-                    "type": "string",
-                    "required": false
-                },
-                {
-                    "name": "row-type",
-                    "title": "Row type",
-                    "description": "The type of row",
-                    "type": "string",
-                    "values": [{ "name": "default" }, { "name": "header" }, { "name": "sticky-header" }],
-                    "required": false
-                }
-            ],
-            "slots": [
-                {
-                    "name": "",
-                    "title": "Default slot",
-                    "description": "The row content as data grid cells"
-                }
-            ]
-        }
-    ]
-}

package/dist/esm/data-grid/data-grid.stories.js

@@ -1,381 +0,0 @@
-import { html } from '@microsoft/fast-element';
-import { GenerateHeaderOptions } from '@microsoft/fast-foundation/dist/esm/data-grid/data-grid.options';
-import addons from '@storybook/addons';
-import { DOCS_RENDERED } from '@storybook/core-events';
-import DataGridTemplate from './fixtures/base.html';
-import './index';
-/* eslint-disable @typescript-eslint/ban-types */
-let defaultGridElement = null;
-const defaultRowData = newDataRow('default');
-const columnWidths = ['1fr', '1fr', '1fr', '1fr'];
-const defaultRowItemTemplate = html `
-    <fluent-data-grid-row
-        :rowData="${x => x}"
-        :cellItemTemplate="${(x, c) => c.parent.cellItemTemplate}"
-        :headerCellItemTemplate="${(x, c) => c.parent.headerCellItemTemplate}"
-    ></fast-data-grid-row>
-`;
-const customRowItemTemplate = html `
-    <fluent-data-grid-row
-        :rowData="${x => x}"
-        :cellItemTemplate="${(x, c) => c.parent.cellItemTemplate}"
-        :headerCellItemTemplate="${(x, c) => c.parent.headerCellItemTemplate}"
-    ></fast-data-grid-row>
-    <fluent-divider style="margin-bottom: 6px; margin-top: 6px;"></fast-divider>
-`;
-const customCellItemTemplate = html `
-    <fluent-data-grid-cell
-        style="background: brown"
-        grid-column="${(x, c) => c.index + 1}"
-        :rowData="${(x, c) => c.parent.rowData}"
-        :columnDefinition="${x => x}"
-    ></fast-data-grid-cell>
-`;
-const customHeaderCellItemTemplate = html `
-    <fluent-data-grid-cell
-        style="background: orange"
-        cell-type="columnheader"
-        grid-column="${(x, c) => c.index + 1}"
-        :columnDefinition="${x => x}"
-    ></fast-data-grid-header-cell>
-`;
-addons.getChannel().addListener(DOCS_RENDERED, (name) => {
-    if (name.toLowerCase().includes('data-grid')) {
-        defaultGridElement = document.getElementById('defaultGrid');
-        reset();
-        const defaultGridRow = document.getElementById('defaultGridRow');
-        if (defaultGridRow) {
-            defaultGridRow.rowData = defaultRowData;
-        }
-        const defaultRow = document.getElementById('defaultRow');
-        if (defaultRow) {
-            defaultRow.columnDefinitions = baseColumns;
-            defaultRow.rowData = defaultRowData;
-        }
-        const defaultHeader = document.getElementById('defaultHeader');
-        if (defaultHeader) {
-            defaultHeader.columnDefinitions = baseColumns;
-        }
-        const rowWithCellTemplate = document.getElementById('cellTemplateRow');
-        if (rowWithCellTemplate) {
-            rowWithCellTemplate.columnDefinitions = templateColumns;
-            rowWithCellTemplate.rowData = defaultRowData;
-        }
-        const headerWithCellTemplate = document.getElementById('headerTemplateRow');
-        if (headerWithCellTemplate) {
-            headerWithCellTemplate.columnDefinitions = templateColumns;
-        }
-        const defaultCell = document.getElementById('defaultCell');
-        if (defaultCell) {
-            defaultCell.columnDefinition = { columnDataKey: 'rowId' };
-            defaultCell.rowData = defaultRowData;
-        }
-        const headerCell = document.getElementById('headerCell');
-        if (headerCell) {
-            headerCell.columnDefinition = {
-                columnDataKey: 'name',
-                title: 'Components/Name',
-            };
-        }
-        const resetButton = document.getElementById('btnreset');
-        if (resetButton) {
-            resetButton.onclick = reset;
-        }
-        const defaultColsButton = document.getElementById('btndefaultcols');
-        if (defaultColsButton) {
-            defaultColsButton.onclick = setDefaultCols;
-        }
-        const templateColsButton = document.getElementById('btntemplatecols');
-        if (templateColsButton) {
-            templateColsButton.onclick = setTemplateCols;
-        }
-        const addRowButton = document.getElementById('btnaddrow');
-        if (addRowButton) {
-            addRowButton.onclick = addRow;
-        }
-        const removeRowButton = document.getElementById('btnremoverow');
-        if (removeRowButton) {
-            removeRowButton.onclick = removeRow;
-        }
-        const noHeaderButton = document.getElementById('btnnoheader');
-        if (noHeaderButton) {
-            noHeaderButton.onclick = setNoHeader;
-        }
-        const defaultHeaderButton = document.getElementById('btndefaultheader');
-        if (defaultHeaderButton) {
-            defaultHeaderButton.onclick = setDefaultHeader;
-        }
-        const stickyHeaderButton = document.getElementById('btnstickyheader');
-        if (stickyHeaderButton) {
-            stickyHeaderButton.onclick = setStickyHeader;
-        }
-        const defaultRowTemplateButton = document.getElementById('btndefaultrowtemplate');
-        if (defaultRowTemplateButton) {
-            defaultRowTemplateButton.onclick = setDefaultRowItemTemplate;
-        }
-        const customRowTemplateButton = document.getElementById('btncustomrowtemplate');
-        if (customRowTemplateButton) {
-            customRowTemplateButton.onclick = setCustomRowItemTemplate;
-        }
-        const defaultCellTemplateButton = document.getElementById('btndefaultcelltemplate');
-        if (defaultCellTemplateButton) {
-            defaultCellTemplateButton.onclick = setDefaultCellItemTemplate;
-        }
-        const customCellTemplateButton = document.getElementById('btncustomcelltemplate');
-        if (customCellTemplateButton) {
-            customCellTemplateButton.onclick = setCustomCellItemTemplate;
-        }
-        const defaultHeaderCellTemplateButton = document.getElementById('btndefaultheadercelltemplate');
-        if (defaultHeaderCellTemplateButton) {
-            defaultHeaderCellTemplateButton.onclick = setDefaultHeaderCellItemTemplate;
-        }
-        const customHeaderCellTemplateButton = document.getElementById('btncustomheadercelltemplate');
-        if (customHeaderCellTemplateButton) {
-            customHeaderCellTemplateButton.onclick = setCustomHeaderCellItemTemplate;
-        }
-        // note: we use mouse enter because clicking to move focus seems to confuse focus-visible
-        const focusLeftButton = document.getElementById('btnfocusleft');
-        if (focusLeftButton) {
-            focusLeftButton.onmouseenter = moveFocus;
-        }
-        const focusRightButton = document.getElementById('btnfocusright');
-        if (focusRightButton) {
-            focusRightButton.onmouseenter = moveFocus;
-        }
-        const focusUpButton = document.getElementById('btnfocusup');
-        if (focusUpButton) {
-            focusUpButton.onmouseenter = moveFocus;
-        }
-        const focusDownButton = document.getElementById('btnfocusdown');
-        if (focusDownButton) {
-            focusDownButton.onmouseenter = moveFocus;
-        }
-    }
-});
-const buttonCellTemplate = html `
-    <template>
-        <fluent-button @click="${x => cellTemplateButtonClick(x)}" style="width: 100%;">
-            ${x => x.rowData === null || x.columnDefinition === null || x.columnDefinition.columnDataKey === null
-    ? null
-    : x.rowData[x.columnDefinition.columnDataKey]}
-        </fast-button>
-    </template>
-`;
-const buttonHeaderCellTemplate = html `
-    <template>
-        <fluent-button
-            @click="${x => headerTemplateButtonClick(x)}"
-            style="width: 100%; background: green"
-        >
-            ${x => x.columnDefinition === null
-    ? null
-    : x.columnDefinition.title === undefined
-        ? x.columnDefinition.columnDataKey
-        : x.columnDefinition.title}
-        </fast-button>
-    </template>
-`;
-function reset() {
-    if (defaultGridElement === null) {
-        return;
-    }
-    defaultGridElement.columnDefinitions = null;
-    defaultGridElement.rowsData = newDataSet(10);
-}
-function setDefaultCols() {
-    if (defaultGridElement === null) {
-        return;
-    }
-    defaultGridElement.columnDefinitions = baseColumns;
-}
-function setTemplateCols() {
-    if (defaultGridElement === null) {
-        return;
-    }
-    defaultGridElement.columnDefinitions = templateColumns;
-}
-function addRow() {
-    if (defaultGridElement === null || defaultGridElement.rowsData === null) {
-        return;
-    }
-    defaultGridElement.rowsData.push(newDataRow(`${defaultGridElement.rowsData.length + 1}`));
-}
-function removeRow() {
-    if (defaultGridElement === null || defaultGridElement.rowsData === null || defaultGridElement.rowsData.length === 0) {
-        return;
-    }
-    defaultGridElement.rowsData.pop();
-}
-function setNoHeader() {
-    if (defaultGridElement === null) {
-        return;
-    }
-    defaultGridElement.generateHeader = GenerateHeaderOptions.none;
-}
-function setDefaultHeader() {
-    if (defaultGridElement === null) {
-        return;
-    }
-    defaultGridElement.generateHeader = GenerateHeaderOptions.default;
-}
-function setDefaultRowItemTemplate() {
-    if (defaultGridElement === null) {
-        return;
-    }
-    defaultGridElement.rowItemTemplate = defaultRowItemTemplate;
-}
-function setCustomRowItemTemplate() {
-    if (defaultGridElement === null) {
-        return;
-    }
-    defaultGridElement.rowItemTemplate = customRowItemTemplate;
-}
-function setDefaultCellItemTemplate() {
-    if (defaultGridElement === null) {
-        return;
-    }
-    defaultGridElement.cellItemTemplate = undefined;
-}
-function setCustomCellItemTemplate() {
-    if (defaultGridElement === null) {
-        return;
-    }
-    defaultGridElement.cellItemTemplate = customCellItemTemplate;
-}
-function setDefaultHeaderCellItemTemplate() {
-    if (defaultGridElement === null) {
-        return;
-    }
-    defaultGridElement.headerCellItemTemplate = undefined;
-}
-function setCustomHeaderCellItemTemplate() {
-    if (defaultGridElement === null) {
-        return;
-    }
-    defaultGridElement.headerCellItemTemplate = customHeaderCellItemTemplate;
-}
-function moveFocus(e) {
-    if (defaultGridElement === null) {
-        return;
-    }
-    switch (e.target.id) {
-        case 'btnfocusleft':
-            defaultGridElement.focusColumnIndex = defaultGridElement.focusColumnIndex - 1;
-            break;
-        case 'btnfocusright':
-            defaultGridElement.focusColumnIndex = defaultGridElement.focusColumnIndex + 1;
-            break;
-        case 'btnfocusup':
-            defaultGridElement.focusRowIndex = defaultGridElement.focusRowIndex - 1;
-            break;
-        case 'btnfocusdown':
-            defaultGridElement.focusRowIndex = defaultGridElement.focusRowIndex + 1;
-            break;
-    }
-}
-function headerTemplateButtonClick(cell) {
-    if (cell.columnDefinition === null || defaultGridElement === null || defaultGridElement.columnDefinitions === null) {
-        return;
-    }
-    const index = defaultGridElement.columnDefinitions.indexOf(cell.columnDefinition);
-    if (columnWidths[index] === '1fr') {
-        columnWidths.splice(index, 1, '2fr');
-    }
-    else {
-        columnWidths.splice(index, 1, '1fr');
-    }
-    defaultGridElement.gridTemplateColumns = `${columnWidths[0]} ${columnWidths[1]} ${columnWidths[2]} ${columnWidths[3]}`;
-}
-function cellTemplateButtonClick(cell) {
-    if (cell.columnDefinition === null || cell.rowData === null || defaultGridElement === null) {
-        return;
-    }
-    const newRowData = Object.assign({}, cell.rowData);
-    newRowData[cell.columnDefinition.columnDataKey] = 'clicked';
-    const rowIndex = defaultGridElement.rowsData.indexOf(cell.rowData);
-    if (rowIndex > -1) {
-        defaultGridElement.rowsData.splice(rowIndex, 1, newRowData);
-    }
-}
-function setStickyHeader() {
-    if (defaultGridElement === null) {
-        return;
-    }
-    defaultGridElement.generateHeader = GenerateHeaderOptions.sticky;
-}
-function newDataSet(rowCount) {
-    const newRows = [];
-    for (let i = 0; i <= rowCount; i++) {
-        newRows.push(newDataRow(`${i + 1}`));
-    }
-    return newRows;
-}
-function newDataRow(id) {
-    return {
-        rowId: `rowid-${id}`,
-        item1: `value 1-${id}`,
-        item2: `value 2-${id}`,
-        item3: `value 3-${id}`,
-        item4: `value 4-${id}`,
-        item5: `value 5-${id}`,
-        item6: `value 6-${id}`,
-    };
-}
-const baseColumns = [
-    { columnDataKey: 'rowId' },
-    { columnDataKey: 'item1' },
-    { columnDataKey: 'item2' },
-    { columnDataKey: 'item3' },
-];
-const templateColumns = [
-    {
-        title: 'Components/RowID',
-        columnDataKey: 'rowId',
-        cellTemplate: buttonCellTemplate,
-        cellFocusTargetCallback: getFocusTarget,
-        headerCellTemplate: buttonHeaderCellTemplate,
-        headerCellFocusTargetCallback: getFocusTarget,
-    },
-    {
-        title: 'Components/Column 1',
-        columnDataKey: 'item1',
-        cellTemplate: buttonCellTemplate,
-        cellFocusTargetCallback: getFocusTarget,
-        headerCellTemplate: buttonHeaderCellTemplate,
-        headerCellFocusTargetCallback: getFocusTarget,
-    },
-    {
-        title: 'Components/Column 2',
-        columnDataKey: 'item2',
-        cellTemplate: buttonCellTemplate,
-        cellFocusTargetCallback: getFocusTarget,
-        headerCellTemplate: buttonHeaderCellTemplate,
-        headerCellFocusTargetCallback: getFocusTarget,
-    },
-    {
-        title: 'Components/Column 3',
-        columnDataKey: 'item3',
-        cellTemplate: buttonCellTemplate,
-        cellFocusTargetCallback: getFocusTarget,
-        headerCellTemplate: buttonHeaderCellTemplate,
-        headerCellFocusTargetCallback: getFocusTarget,
-    },
-];
-function getFocusTarget(cell) {
-    return cell.querySelector('fast-button');
-}
-/* eslint-enable @typescript-eslint/ban-types */
-export default {
-    title: 'Components/Data Grid',
-};
-export const dataGrid = () => DataGridTemplate;
-const example = `
-<fluent-data-grid id="defaultGrid" style="max-height: 400px; overflow-y: auto"></fluent-data-grid>
-`;
-dataGrid.parameters = {
-    docs: {
-        source: {
-            code: example,
-        },
-    },
-};

package/dist/esm/data-grid/data-grid.styles.js

@@ -1,8 +0,0 @@
-import { css } from '@microsoft/fast-element';
-export const dataGridStyles = (context, definition) => css `
-  :host {
-    display: flex;
-    position: relative;
-    flex-direction: column;
-  }
-`;

package/dist/esm/data-grid/data-grid.vscode.definition.json

@@ -1,34 +0,0 @@
-{
-    "version": 1.1,
-    "tags": [
-        {
-            "name": "fluent-data-grid",
-            "title": "Data grid",
-            "description": "The Fluent UI data grid element",
-            "attributes": [
-                {
-                    "name": "generate-header",
-                    "title": "Generate header",
-                    "description": "Whether the grid should auto generate a header row",
-                    "type": "string",
-                    "values": [{ "name": "none" }, { "name": "default" }, { "name": "sticky" }],
-                    "required": false
-                },
-                {
-                    "name": "grid-template-columns",
-                    "title": "Grid template columns",
-                    "description": "Value that gets applied to the the css gridTemplateColumns attribute of child rows",
-                    "type": "string",
-                    "required": false
-                }
-            ],
-            "slots": [
-                {
-                    "name": "",
-                    "title": "Default slot",
-                    "description": "The content as data grid rows"
-                }
-            ]
-        }
-    ]
-}

package/dist/esm/data-grid/index.js

@@ -1,60 +0,0 @@
-import { DataGrid, DataGridCell, dataGridCellTemplate, DataGridRow, dataGridRowTemplate, dataGridTemplate, } from '@microsoft/fast-foundation';
-import { dataGridStyles as gridStyles } from './data-grid.styles';
-import { dataGridRowStyles as rowStyles } from './data-grid-row.styles';
-import { dataGridCellStyles as cellStyles } from './data-grid-cell.styles';
-/**
- * The Fluent Data Grid Cell Element.
- *
- * @public
- * @remarks
- * HTML Element: \<fluent-data-grid-cell\>
- */
-export const fluentDataGridCell = DataGridCell.compose({
-    baseName: 'data-grid-cell',
-    template: dataGridCellTemplate,
-    styles: cellStyles,
-});
-/**
- * Styles for DataGrid cell
- * @public
- */
-export const dataGridCellStyles = cellStyles;
-/**
- * The Fluent Data Grid Row Element.
- *
- * @public
- * @remarks
- * HTML Element: \<fluent-data-grid-row\>
- */
-export const fluentDataGridRow = DataGridRow.compose({
-    baseName: 'data-grid-row',
-    template: dataGridRowTemplate,
-    styles: rowStyles,
-});
-/**
- * Styles for DataGrid row
- * @public
- */
-export const dataGridRowStyles = rowStyles;
-/**
- * The Fluent Data Grid Element.
- *
- * @public
- * @remarks
- * HTML Element: \<fluent-data-grid\>
- */
-export const fluentDataGrid = DataGrid.compose({
-    baseName: 'data-grid',
-    template: dataGridTemplate,
-    styles: gridStyles,
-});
-/**
- * Styles for DataGrid
- * @public
- */
-export const dataGridStyles = gridStyles;
-/**
- * Data grid base class definitions
- * @public
- */
-export { DataGrid, DataGridCell, DataGridRow };