@fluentui/web-components 2.1.3 → 2.2.0

package/dist/esm/search/search.template.js

@@ -0,0 +1,82 @@
+import { html, ref, slotted } from '@microsoft/fast-element';
+import { endSlotTemplate, startSlotTemplate, whitespaceFilter, } from '@microsoft/fast-foundation';
+/**
+ * @public
+ */
+export const searchTemplate = (context, definition) => html `
+  <template
+    class="
+            ${x => (x.readOnly ? 'readonly' : '')}
+        "
+  >
+    <label
+      part="label"
+      for="control"
+      class="${x => (x.defaultSlottedNodes && x.defaultSlottedNodes.length ? 'label' : 'label label__hidden')}"
+    >
+      <slot ${slotted({ property: 'defaultSlottedNodes', filter: whitespaceFilter })}></slot>
+    </label>
+    <div class="root" part="root" ${ref('root')}>
+      ${startSlotTemplate(context, definition)}
+      <div class="input-wrapper" part="input-wrapper">
+        <input
+          class="control"
+          part="control"
+          id="control"
+          @input="${x => x.handleTextInput()}"
+          @change="${x => x.handleChange()}"
+          ?autofocus="${x => x.autofocus}"
+          ?disabled="${x => x.disabled}"
+          list="${x => x.list}"
+          maxlength="${x => x.maxlength}"
+          minlength="${x => x.minlength}"
+          pattern="${x => x.pattern}"
+          placeholder="${x => x.placeholder}"
+          ?readonly="${x => x.readOnly}"
+          ?required="${x => x.required}"
+          size="${x => x.size}"
+          ?spellcheck="${x => x.spellcheck}"
+          :value="${x => x.value}"
+          type="search"
+          aria-atomic="${x => x.ariaAtomic}"
+          aria-busy="${x => x.ariaBusy}"
+          aria-controls="${x => x.ariaControls}"
+          aria-current="${x => x.ariaCurrent}"
+          aria-describedby="${x => x.ariaDescribedby}"
+          aria-details="${x => x.ariaDetails}"
+          aria-disabled="${x => x.ariaDisabled}"
+          aria-errormessage="${x => x.ariaErrormessage}"
+          aria-flowto="${x => x.ariaFlowto}"
+          aria-haspopup="${x => x.ariaHaspopup}"
+          aria-hidden="${x => x.ariaHidden}"
+          aria-invalid="${x => x.ariaInvalid}"
+          aria-keyshortcuts="${x => x.ariaKeyshortcuts}"
+          aria-label="${x => x.ariaLabel}"
+          aria-labelledby="${x => x.ariaLabelledby}"
+          aria-live="${x => x.ariaLive}"
+          aria-owns="${x => x.ariaOwns}"
+          aria-relevant="${x => x.ariaRelevant}"
+          aria-roledescription="${x => x.ariaRoledescription}"
+          ${ref('control')}
+        />
+        <slot name="clear-button">
+          <button
+            class="clear-button ${x => (x.value ? '' : 'clear-button__hidden')}"
+            part="clear-button"
+            tabindex="-1"
+            @click=${x => x.handleClearInput()}
+          >
+            <slot name="clear-glyph">
+              <svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
+                <path
+                  d="m2.09 2.22.06-.07a.5.5 0 0 1 .63-.06l.07.06L6 5.29l3.15-3.14a.5.5 0 1 1 .7.7L6.71 6l3.14 3.15c.18.17.2.44.06.63l-.06.07a.5.5 0 0 1-.63.06l-.07-.06L6 6.71 2.85 9.85a.5.5 0 0 1-.7-.7L5.29 6 2.15 2.85a.5.5 0 0 1-.06-.63l.06-.07-.06.07Z"
+                />
+              </svg>
+            </slot>
+          </button>
+        </slot>
+      </div>
+      ${endSlotTemplate(context, definition)}
+    </div>
+  </template>
+`;

package/dist/esm/search/search.vscode.definition.json

@@ -0,0 +1,145 @@
+{
+    "version": 1.1,
+    "tags": [
+        {
+            "name": "fluent-search",
+            "title": "Search",
+            "description": "The Fluent UI search element",
+            "attributes": [
+                {
+                    "name": "value",
+                    "title": "Value",
+                    "description": "The HTML value attribute of the search",
+                    "required": false,
+                    "type": "string"
+                },
+                {
+                    "name": "appearance",
+                    "title": "Appearance",
+                    "description": "The field's visual treatment",
+                    "default": "outline",
+                    "values": [{ "name": "outline" }, { "name": "filled" }],
+                    "type": "string",
+                    "required": false
+                },
+                {
+                    "name": "autofocus",
+                    "title": "Autofocus",
+                    "description": "Determines if the element should receive document focus on page load",
+                    "required": false,
+                    "type": "boolean",
+                    "default": false
+                },
+                {
+                    "name": "placeholder",
+                    "title": "Placeholder",
+                    "description": "Sets the placeholder value of the element, generally used to provide a hint to the user",
+                    "required": false,
+                    "type": "string"
+                },
+                {
+                    "name": "list",
+                    "title": "List ID",
+                    "description": "Allows associating a datalist to the component",
+                    "required": false,
+                    "type": "string",
+                    "default": ""
+                },
+                {
+                    "name": "maxlength",
+                    "title": "Maximum length",
+                    "description": "The maximum number of characters a user can enter",
+                    "required": false,
+                    "type": "number"
+                },
+                {
+                    "name": "minlength",
+                    "title": "Minimum length",
+                    "description": "The minimum number of characters a user can enter",
+                    "required": false,
+                    "type": "number"
+                },
+                {
+                    "name": "pattern",
+                    "title": "Validation pattern",
+                    "description": "A regular expression that the value must match to pass validation",
+                    "required": false,
+                    "type": "string"
+                },
+                {
+                    "name": "size",
+                    "title": "Size",
+                    "description": "Sets the width of the element to a specified number of characters",
+                    "required": false,
+                    "type": "number"
+                },
+                {
+                    "name": "spellcheck",
+                    "title": "Spellcheck",
+                    "description": "Controls whether or not to enable spell checking for the input field, or if the default spell checking configuration should be used",
+                    "required": false,
+                    "type": "boolean"
+                },
+                {
+                    "name": "name",
+                    "title": "Name",
+                    "description": "This element's value will be surfaced during form submission under the provided name",
+                    "type": "string",
+                    "default": "",
+                    "required": false
+                },
+                {
+                    "name": "required",
+                    "title": "Required",
+                    "description": "Require the field to be completed prior to form submission",
+                    "type": "boolean",
+                    "default": false,
+                    "required": false
+                },
+                {
+                    "name": "disabled",
+                    "title": "Disabled",
+                    "description": "Sets the disabled state of the field",
+                    "type": "boolean",
+                    "default": false,
+                    "required": false
+                },
+                {
+                    "name": "readonly",
+                    "title": "Readonly",
+                    "description": "When true, the control will be immutable by user interaction",
+                    "type": "boolean",
+                    "default": false,
+                    "required": false
+                }
+            ],
+            "slots": [
+                {
+                    "name": "",
+                    "title": "Default slot",
+                    "description": "The content of the field represents its visual label"
+                },
+                {
+                    "name": "start",
+                    "title": "Start slot",
+                    "description": "Contents of the start slot are positioned before the input area"
+                },
+                {
+                    "name": "end",
+                    "title": "End slot",
+                    "description": "Contents of the end slot are positioned after the input area"
+                },
+                {
+                    "name": "clear-button",
+                    "title": "Clear button slot",
+                    "description": "Contents of the clear button slot are positioned after the content and is what clears the value when a value is set"
+                },
+                {
+                    "name": "clear-glyph",
+                    "title": "Clear glyph slot",
+                    "description": "Contents of the clear button"
+                }
+            ]
+        }
+    ]
+}

package/dist/fluent-web-components.api.json

@@ -2227,12 +2227,12 @@
             },
             {
               "kind": "Content",
-              "text": ", typeof import(\"@microsoft/fast-foundation\")."
+              "text": ", typeof import(\"./listbox/index\")."
             },
             {
               "kind": "Reference",
               "text": "Listbox",
-              "canonicalReference": "@microsoft/fast-foundation!Listbox:class"
+              "canonicalReference": "@fluentui/web-components!Listbox:class"
             },
             {
               "kind": "Content",
@@ -2641,7 +2641,61 @@
             },
             {
               "kind": "Content",
-              "text": ">;\n    fluentSelect: (overrideDefinition?: import(\"@microsoft/fast-foundation\")."
+              "text": ">;\n    fluentSearch: (overrideDefinition?: import(\"@microsoft/fast-foundation\")."
+            },
+            {
+              "kind": "Reference",
+              "text": "OverrideFoundationElementDefinition",
+              "canonicalReference": "@microsoft/fast-foundation!OverrideFoundationElementDefinition:type"
+            },
+            {
+              "kind": "Content",
+              "text": "<import(\"@microsoft/fast-foundation\")."
+            },
+            {
+              "kind": "Reference",
+              "text": "SearchOptions",
+              "canonicalReference": "@microsoft/fast-foundation!SearchOptions:type"
+            },
+            {
+              "kind": "Content",
+              "text": "> | undefined) => import(\"@microsoft/fast-foundation\")."
+            },
+            {
+              "kind": "Reference",
+              "text": "FoundationElementRegistry",
+              "canonicalReference": "@microsoft/fast-foundation!FoundationElementRegistry:class"
+            },
+            {
+              "kind": "Content",
+              "text": "<import(\"@microsoft/fast-foundation\")."
+            },
+            {
+              "kind": "Reference",
+              "text": "SearchOptions",
+              "canonicalReference": "@microsoft/fast-foundation!SearchOptions:type"
+            },
+            {
+              "kind": "Content",
+              "text": ", import(\"@microsoft/fast-element\")."
+            },
+            {
+              "kind": "Reference",
+              "text": "Constructable",
+              "canonicalReference": "@microsoft/fast-element!Constructable:type"
+            },
+            {
+              "kind": "Content",
+              "text": "<import(\"@microsoft/fast-foundation\")."
+            },
+            {
+              "kind": "Reference",
+              "text": "FoundationElement",
+              "canonicalReference": "@microsoft/fast-foundation!FoundationElement:class"
+            },
+            {
+              "kind": "Content",
+              "text": ">>;\n    fluentSelect: (overrideDefinition?: import(\"@microsoft/fast-foundation\")."
             },
             {
               "kind": "Reference",
@@ -3323,7 +3377,7 @@
           "name": "allComponents",
           "variableTypeTokenRange": {
             "startIndex": 1,
-            "endIndex": 470
+            "endIndex": 482
           }
         },
         {
@@ -8515,7 +8569,7 @@
             {
               "kind": "Reference",
               "text": "Listbox",
-              "canonicalReference": "@microsoft/fast-foundation!Listbox:class"
+              "canonicalReference": "@fluentui/web-components!Listbox:class"
             },
             {
               "kind": "Content",
@@ -9102,6 +9156,81 @@
             "endIndex": 12
           }
         },
+        {
+          "kind": "Variable",
+          "canonicalReference": "@fluentui/web-components!fluentSearch:var",
+          "docComment": "/**\n * The Fluent Search Custom Element. Implements {@link @microsoft/fast-foundation#Search}, {@link @microsoft/fast-foundation#searchTemplate}\n *\n * @remarks\n *\n * HTML Element: \\<fluent-search\\>\n *\n * {@link https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus | delegatesFocus}\n *\n * @public\n */\n",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "fluentSearch: "
+            },
+            {
+              "kind": "Content",
+              "text": "(overrideDefinition?: import(\"@microsoft/fast-foundation\")."
+            },
+            {
+              "kind": "Reference",
+              "text": "OverrideFoundationElementDefinition",
+              "canonicalReference": "@microsoft/fast-foundation!OverrideFoundationElementDefinition:type"
+            },
+            {
+              "kind": "Content",
+              "text": "<"
+            },
+            {
+              "kind": "Reference",
+              "text": "SearchOptions",
+              "canonicalReference": "@microsoft/fast-foundation!SearchOptions:type"
+            },
+            {
+              "kind": "Content",
+              "text": "> | undefined) => import(\"@microsoft/fast-foundation\")."
+            },
+            {
+              "kind": "Reference",
+              "text": "FoundationElementRegistry",
+              "canonicalReference": "@microsoft/fast-foundation!FoundationElementRegistry:class"
+            },
+            {
+              "kind": "Content",
+              "text": "<"
+            },
+            {
+              "kind": "Reference",
+              "text": "SearchOptions",
+              "canonicalReference": "@microsoft/fast-foundation!SearchOptions:type"
+            },
+            {
+              "kind": "Content",
+              "text": ", import(\"@microsoft/fast-element\")."
+            },
+            {
+              "kind": "Reference",
+              "text": "Constructable",
+              "canonicalReference": "@microsoft/fast-element!Constructable:type"
+            },
+            {
+              "kind": "Content",
+              "text": "<import(\"@microsoft/fast-foundation\")."
+            },
+            {
+              "kind": "Reference",
+              "text": "FoundationElement",
+              "canonicalReference": "@microsoft/fast-foundation!FoundationElement:class"
+            },
+            {
+              "kind": "Content",
+              "text": ">>"
+            }
+          ],
+          "releaseTag": "Public",
+          "name": "fluentSearch",
+          "variableTypeTokenRange": {
+            "startIndex": 1,
+            "endIndex": 14
+          }
+        },
         {
           "kind": "Variable",
           "canonicalReference": "@fluentui/web-components!fluentSelect:var",
@@ -10954,6 +11083,34 @@
             "endIndex": 4
           }
         },
+        {
+          "kind": "Class",
+          "canonicalReference": "@fluentui/web-components!Listbox:class",
+          "docComment": "",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "export declare class Listbox extends "
+            },
+            {
+              "kind": "Reference",
+              "text": "FoundationListboxElement",
+              "canonicalReference": "@microsoft/fast-foundation!Listbox:class"
+            },
+            {
+              "kind": "Content",
+              "text": " "
+            }
+          ],
+          "releaseTag": "Public",
+          "name": "Listbox",
+          "members": [],
+          "extendsTokenRange": {
+            "startIndex": 1,
+            "endIndex": 3
+          },
+          "implementsTokenRanges": []
+        },
         {
           "kind": "Variable",
           "canonicalReference": "@fluentui/web-components!listboxStyles:var",
@@ -17615,6 +17772,114 @@
           ],
           "extendsTokenRanges": []
         },
+        {
+          "kind": "TypeAlias",
+          "canonicalReference": "@fluentui/web-components!SearchAppearance:type",
+          "docComment": "/**\n * Search appearances\n *\n * @public\n */\n",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "export declare type SearchAppearance = "
+            },
+            {
+              "kind": "Content",
+              "text": "'filled' | 'outline'"
+            },
+            {
+              "kind": "Content",
+              "text": ";"
+            }
+          ],
+          "releaseTag": "Public",
+          "name": "SearchAppearance",
+          "typeTokenRange": {
+            "startIndex": 1,
+            "endIndex": 2
+          }
+        },
+        {
+          "kind": "Variable",
+          "canonicalReference": "@fluentui/web-components!searchStyles:var",
+          "docComment": "/**\n * Styles for Search\n *\n * @public\n */\n",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "searchStyles: "
+            },
+            {
+              "kind": "Content",
+              "text": "(context: any, definition: any) => import(\"@microsoft/fast-element\")."
+            },
+            {
+              "kind": "Reference",
+              "text": "ElementStyles",
+              "canonicalReference": "@microsoft/fast-element!ElementStyles:class"
+            }
+          ],
+          "releaseTag": "Public",
+          "name": "searchStyles",
+          "variableTypeTokenRange": {
+            "startIndex": 1,
+            "endIndex": 3
+          }
+        },
+        {
+          "kind": "Variable",
+          "canonicalReference": "@fluentui/web-components!searchTemplate:var",
+          "docComment": "/**\n * @public\n */\n",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "searchTemplate: "
+            },
+            {
+              "kind": "Content",
+              "text": "(context: "
+            },
+            {
+              "kind": "Reference",
+              "text": "ElementDefinitionContext",
+              "canonicalReference": "@microsoft/fast-foundation!ElementDefinitionContext:interface"
+            },
+            {
+              "kind": "Content",
+              "text": ", definition: "
+            },
+            {
+              "kind": "Reference",
+              "text": "SearchOptions",
+              "canonicalReference": "@microsoft/fast-foundation!SearchOptions:type"
+            },
+            {
+              "kind": "Content",
+              "text": ") => "
+            },
+            {
+              "kind": "Reference",
+              "text": "ViewTemplate",
+              "canonicalReference": "@microsoft/fast-element!ViewTemplate:class"
+            },
+            {
+              "kind": "Content",
+              "text": "<"
+            },
+            {
+              "kind": "Reference",
+              "text": "Search",
+              "canonicalReference": "@microsoft/fast-foundation!Search:class"
+            },
+            {
+              "kind": "Content",
+              "text": ">"
+            }
+          ],
+          "releaseTag": "Public",
+          "name": "searchTemplate",
+          "variableTypeTokenRange": {
+            "startIndex": 1,
+            "endIndex": 10
+          }
+        },
         {
           "kind": "TypeAlias",
           "canonicalReference": "@fluentui/web-components!SelectAppearance:type",

package/dist/web-components.d.ts

@@ -37,7 +37,7 @@ import { FoundationElementDefinition } from '@microsoft/fast-foundation';
 import { FoundationElementRegistry } from '@microsoft/fast-foundation';
 import { HorizontalScroll as HorizontalScroll_2 } from '@microsoft/fast-foundation';
 import { HorizontalScrollOptions } from '@microsoft/fast-foundation';
-import { Listbox } from '@microsoft/fast-foundation';
+import { Listbox as Listbox_2 } from '@microsoft/fast-foundation';
 import { ListboxOption } from '@microsoft/fast-foundation';
 import { Menu as Menu_2 } from '@microsoft/fast-foundation';
 import { MenuItem } from '@microsoft/fast-foundation';
@@ -50,6 +50,8 @@ import { ProgressRingOptions } from '@microsoft/fast-foundation';
 import { Radio } from '@microsoft/fast-foundation';
 import { RadioGroup } from '@microsoft/fast-foundation';
 import { RadioOptions } from '@microsoft/fast-foundation';
+import { Search as Search_2 } from '@microsoft/fast-foundation';
+import { SearchOptions } from '@microsoft/fast-foundation';
 import { Select as Select_2 } from '@microsoft/fast-foundation';
 import { SelectOptions } from '@microsoft/fast-foundation';
 import { Skeleton } from '@microsoft/fast-foundation';
@@ -214,6 +216,7 @@ export declare const allComponents: {
     fluentProgressRing: (overrideDefinition?: OverrideFoundationElementDefinition<ProgressRingOptions> | undefined) => FoundationElementRegistry<ProgressRingOptions, Constructable<FoundationElement>>;
     fluentRadio: (overrideDefinition?: OverrideFoundationElementDefinition<RadioOptions> | undefined) => FoundationElementRegistry<RadioOptions, Constructable<FoundationElement>>;
     fluentRadioGroup: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, RadioGroup>;
+    fluentSearch: (overrideDefinition?: OverrideFoundationElementDefinition<SearchOptions> | undefined) => FoundationElementRegistry<SearchOptions, Constructable<FoundationElement>>;
     fluentSelect: (overrideDefinition?: OverrideFoundationElementDefinition<SelectOptions> | undefined) => FoundationElementRegistry<SelectOptions, Constructable<FoundationElement>>;
     fluentSkeleton: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, Skeleton>;
     fluentSlider: (overrideDefinition?: OverrideFoundationElementDefinition<SliderOptions> | undefined) => FoundationElementRegistry<SliderOptions, Constructable<FoundationElement>>;
@@ -1543,6 +1546,19 @@ export declare const fluentRadio: (overrideDefinition?: OverrideFoundationElemen
  */
 export declare const fluentRadioGroup: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, typeof RadioGroup>;
 
+/**
+ * The Fluent Search Custom Element. Implements {@link @microsoft/fast-foundation#Search},
+ * {@link @microsoft/fast-foundation#searchTemplate}
+ *
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-search\>
+ *
+ * {@link https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus | delegatesFocus}
+ */
+export declare const fluentSearch: (overrideDefinition?: OverrideFoundationElementDefinition<SearchOptions> | undefined) => FoundationElementRegistry<SearchOptions, Constructable<FoundationElement>>;
+
 /**
  * The Fluent select Custom Element. Implements, {@link @microsoft/fast-foundation#Select}
  * {@link @microsoft/fast-foundation#selectTemplate}
@@ -1854,7 +1870,8 @@ export declare const layerCornerRadius: CSSDesignToken<number>;
  */
 export declare const LightweightButtonStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, interactivitySelector?: string, nonInteractivitySelector?: string) => ElementStyles;
 
-export { Listbox }
+export declare class Listbox extends Listbox_2 {
+}
 
 /**
  * Styles for Listbox
@@ -2550,6 +2567,38 @@ declare interface RelativeLuminance {
     readonly relativeLuminance: number;
 }
 
+/**
+ * The Fluent search class
+ * @internal
+ */
+export declare class Search extends Search_2 {
+    /**
+     * The appearance of the element.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: appearance
+     */
+    appearance: SearchAppearance;
+}
+
+/**
+ * Search appearances
+ * @public
+ */
+export declare type SearchAppearance = 'filled' | 'outline';
+
+/**
+ * Styles for Search
+ * @public
+ */
+export declare const searchStyles: (context: any, definition: any) => ElementStyles;
+
+/**
+ * @public
+ */
+export declare const searchTemplate: (context: ElementDefinitionContext, definition: SearchOptions) => ViewTemplate<Search_2>;
+
 /**
  * The Fluent select class
  * @internal