fluentui-svelte 0.5.0 → 0.6.0

package/dist/components/tag-picker/types.d.ts

@@ -0,0 +1,122 @@
+import type { Component, Snippet } from 'svelte';
+import type { HTMLAttributes, HTMLInputAttributes, SVGAttributes } from 'svelte/elements';
+import type { FSContext } from '../../internal/index.js';
+import type { ListViewItemProps } from '../list-view/types.ts';
+import type { TagGroupProps } from '../tag/types.ts';
+export type TagPickerSizes = 'medium' | 'large' | 'extra-large';
+/** @propsmith TagPickerProps */
+export type TagPickerProps = {
+    /** The DOM reference of the wrapper element.
+     * @bindable
+     */
+    ref?: HTMLDivElement;
+    /** The DOM reference of the input element.
+     * @bindable
+     */
+    inputRef?: HTMLInputElement;
+    /** The values of the chosen options, shown as tags in the control. A value no option has is shown as it is.
+     * @default []
+     * @bindable
+     */
+    selectedOptions?: string[];
+    /** The text typed in the input. It filters the options, and is cleared when one is chosen.
+     * @default ''
+     * @bindable
+     */
+    value?: string;
+    /** Controls the open state of the option list.
+     * @default false
+     * @bindable
+     */
+    open?: boolean;
+    /** Limits the picker to one tag: choosing an option replaces the current one and closes the list. */
+    single?: boolean;
+    /** Disables the user interaction: the input, the tags and the list. */
+    disabled?: boolean;
+    /** The size of the control. It also picks the size of the tags.
+     * @default 'medium'
+     */
+    size?: TagPickerSizes;
+    /** The placeholder text of the input. */
+    placeholder?: string;
+    /** The message shown in place of the list when there is no option left to choose.
+     * @default 'No options available'
+     */
+    notFoundText?: string;
+    /** The dropdown arrow. Pass `null` to remove it.
+     * @default ChevronDownRegular
+     * @type Snippet | Component | null
+     */
+    expandIcon?: Snippet<[SVGAttributes<SVGElement>]> | Component<SVGAttributes<SVGElement>> | null;
+    /** A button-like element rendered at the end of the control, before the dropdown arrow. */
+    secondaryAction?: Snippet;
+    /** Renders the tag of a chosen option, to give it media or custom text. Falls back to a plain tag.
+     * Render a `Tag` with the given `value`, and `role="listitem"`.
+     * @type Snippet<[{ value: string; text: string }]>
+     */
+    tag?: Snippet<[{
+        value: string;
+        text: string;
+    }]>;
+    /** The props to spread on the group holding the tags. This is where its `aria-label` goes.
+     * @type TagGroupProps
+     */
+    tagGroupProps?: Omit<TagGroupProps, 'children' | 'size' | 'appearance' | 'disabled' | 'dismissible' | 'selectedValues' | 'onTagSelect' | 'onDismiss'>;
+    /** The props to spread on the input. This is where its accessible name (`aria-label`) and
+     * `readonly` (to turn the input into a plain trigger) go.
+     * @type HTMLInputAttributes
+     */
+    inputProps?: Omit<HTMLInputAttributes, 'value' | 'type' | 'role' | 'disabled' | 'oninput' | 'onkeydown'>;
+    /** Called when an option is chosen, or a tag is removed. */
+    onSelectionChange?: (e: Event, selectedOptions: string[]) => void;
+    /** Called when Enter is pressed with text in the input and no option under the cursor. This is
+     * where a free-form tag is added.
+     */
+    querySubmitted?: (e: KeyboardEvent, query: string) => void;
+    /** The options. Leave it out to get a picker without a list. */
+    children?: Snippet;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'children'>;
+export type OptionType = {
+    id: string;
+    value: string;
+    disabled?: boolean;
+};
+export type TagPickerContext = FSContext<null, {
+    readonly query: string;
+    readonly selectedOptions: string[];
+    readonly open: boolean;
+}, null, {
+    /** Remembers what the tag of `value` says. Every option calls it, on screen or not. */
+    setLabel: (value: string, text: string) => void;
+    setOption: (option: OptionType) => void;
+    deleteOption: (id: string) => void;
+    chooseOption: (e: Event, id: string) => void;
+}>;
+/** @propsmith TagPickerOptionProps */
+export type TagPickerOptionProps = {
+    /** The value added to `selectedOptions` when the option is chosen. */
+    value: string;
+    /** The text the option is filtered by, and the text of its tag. Falls back to `value`. */
+    text?: string;
+    /** The id of the option element, referenced by the input through `aria-activedescendant`.
+     * Falls back to a generated id.
+     */
+    id?: string;
+    /** The DOM reference of the option element.
+     * @bindable
+     */
+    ref?: HTMLLIElement;
+    /** Takes the option out of reach: it is shown, but the cursor steps over it. */
+    disabled?: boolean;
+} & Omit<ListViewItemProps<'li'>, 'as' | 'value' | 'onAction' | 'checkmark'>;
+/** @propsmith TagPickerOptionGroupProps */
+export type TagPickerOptionGroupProps = {
+    /** The label of the group. */
+    label: string;
+    /** The DOM reference of the group element.
+     * @bindable
+     */
+    ref?: HTMLUListElement;
+    /** The options of the group. */
+    children?: Snippet;
+} & Omit<HTMLAttributes<HTMLUListElement>, 'children'>;

package/dist/components/tag-picker/types.js

@@ -0,0 +1 @@
+export {};

package/dist/index.d.ts

@@ -57,6 +57,8 @@ export { default as Persona } from './components/persona/persona.svelte';
 export { default as ProgressBar } from './components/progress-bar/progress-bar.svelte';
 export { default as ProgressRing } from './components/progress-ring/progress-ring.svelte';
 export { default as RadioButton } from './components/radio-button/radio-button.svelte';
+export { default as Rating } from './components/rating/rating.svelte';
+export type { RatingProps } from './components/rating/types.js';
 export { default as Skeleton } from './components/skeleton/skeleton.svelte';
 export { default as Slider } from './components/slider/slider.svelte';
 export { default as Table } from './components/table/table.svelte';
@@ -70,6 +72,11 @@ export { default as TableCellLayout } from './components/table/table-cell-layout
 export { default as TableCellActions } from './components/table/table-cell-actions.svelte';
 export { default as TabView } from './components/tab-view/tab-view.svelte';
 export { default as TabViewTab } from './components/tab-view/tab-view-tab.svelte';
+export { default as Tag } from './components/tag/tag.svelte';
+export { default as TagGroup } from './components/tag/tag-group.svelte';
+export { default as TagPicker } from './components/tag-picker/tag-picker.svelte';
+export { default as TagPickerOption } from './components/tag-picker/option.svelte';
+export { default as TagPickerOptionGroup } from './components/tag-picker/option-group.svelte';
 export { default as TextArea } from './components/textarea/textarea.svelte';
 export { default as TextBox } from './components/text-box/text-box.svelte';
 export { default as TextBoxButton } from './components/text-box/text-box-button.svelte';

package/dist/index.js

@@ -109,6 +109,9 @@ export { default as ProgressRing } from './components/progress-ring/progress-rin
 // Start RadioButton Component
 export { default as RadioButton } from './components/radio-button/radio-button.svelte';
 // End RadioButton Component
+// Start Rating Component
+export { default as Rating } from './components/rating/rating.svelte';
+// End Rating Component
 // Start Skeleton Component
 export { default as Skeleton } from './components/skeleton/skeleton.svelte';
 // End Skeleton Component
@@ -130,6 +133,15 @@ export { default as TableCellActions } from './components/table/table-cell-actio
 export { default as TabView } from './components/tab-view/tab-view.svelte';
 export { default as TabViewTab } from './components/tab-view/tab-view-tab.svelte';
 // End TabView Component
+// Start Tag Component
+export { default as Tag } from './components/tag/tag.svelte';
+export { default as TagGroup } from './components/tag/tag-group.svelte';
+// End Tag Component
+// Start TagPicker Component
+export { default as TagPicker } from './components/tag-picker/tag-picker.svelte';
+export { default as TagPickerOption } from './components/tag-picker/option.svelte';
+export { default as TagPickerOptionGroup } from './components/tag-picker/option-group.svelte';
+// End TagPicker Component
 // Start TextArea Component
 export { default as TextArea } from './components/textarea/textarea.svelte';
 // End TextArea Component

package/dist/internal/constants.d.ts

@@ -20,7 +20,3 @@ export declare const DIRECTION: {
 export declare const PREFIX = "fs";
 export declare const DEFAULT_OFFSET = 8;
 export declare const VIRTUAL_ELEMENT: VirtualElement;
-export declare const fake: {
-    id: string;
-    name: string;
-}[];