mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-22 05:03:44 +00:00
e51f50da0c* chore(deps-dev): upgrade carbon-components to v10.38.0 * feat(text-input): support read-only variant * docs: use consistent lingo for inline variant examples * docs(popover): add Popover alignment example * fix(file-uploader): adjust markup to avoid accessibility errors Ref:0dfde60e3* fix(inline-loading): use error filled icon * fix(inline-loading): render iconDescription as title in error/warning icons Ref:51c53c923* fix(structured-list): update accessibility attributes * fix(tooltip-definition): use span instead of div Ref:cb6de3025* fix(multi-select): close menu when blurring the last filterable option * fix(multi-select): open/focus field for filterable multiselect #635 * fix(multi-select): unblock focus when blurring input #635 * fix(combo-box): select correct item with keys, allow input after clearing #195 * fix(combo-box): update input text if item is selected * feat(combo-box): render checkmark icon for selected item * fix(ui-shell): toggle SideNav rail when clicking the hamburger menu #699 * fix(context-menu): update context menu classes #684 * docs(context-menu): improve demo instructions #684 * fix(context-menu): close menu when clicking anywhere
68 lines
1.6 KiB
Svelte
68 lines
1.6 KiB
Svelte
<script>
|
|
/**
|
|
* @typedef {"close" | "open"} ListBoxFieldTranslationId
|
|
*/
|
|
|
|
/** Set to `true` to disable the list box field */
|
|
export let disabled = false;
|
|
|
|
/** Specify the role attribute */
|
|
export let role = "combobox";
|
|
|
|
/** Specify the tabindex */
|
|
export let tabindex = "-1";
|
|
|
|
/** Default translation ids */
|
|
export const translationIds = { close: "close", open: "open" };
|
|
|
|
/**
|
|
* Override the default translation ids
|
|
* @type {(id: ListBoxFieldTranslationId) => string}
|
|
*/
|
|
export let translateWithId = (id) => defaultTranslations[id];
|
|
|
|
/** Set an id for the top-level element */
|
|
export let id = "ccs-" + Math.random().toString(36);
|
|
|
|
/** Obtain a reference to the top-level HTML element */
|
|
export let ref = null;
|
|
|
|
import { getContext } from "svelte";
|
|
|
|
const defaultTranslations = {
|
|
[translationIds.close]: "Close menu",
|
|
[translationIds.open]: "Open menu",
|
|
};
|
|
const ctx = getContext("MultiSelect");
|
|
|
|
$: if (ctx && ref) {
|
|
ctx.declareRef({ key: "field", ref });
|
|
}
|
|
|
|
$: ariaExpanded = $$props["aria-expanded"];
|
|
$: menuId = `menu-${id}`;
|
|
</script>
|
|
|
|
<div
|
|
bind:this="{ref}"
|
|
role="{ariaExpanded ? 'combobox' : role}"
|
|
aria-expanded="{ariaExpanded}"
|
|
aria-owns="{(ariaExpanded && menuId) || undefined}"
|
|
aria-controls="{(ariaExpanded && menuId) || undefined}"
|
|
aria-disabled="{disabled}"
|
|
aria-label="{ariaExpanded
|
|
? translateWithId('close')
|
|
: translateWithId('open')}"
|
|
tabindex="{disabled ? '-1' : tabindex}"
|
|
class:bx--list-box__field="{true}"
|
|
{...$$restProps}
|
|
on:click
|
|
on:mouseover
|
|
on:mouseenter
|
|
on:mouseleave
|
|
on:keydown|preventDefault|stopPropagation
|
|
on:focus
|
|
on:blur
|
|
>
|
|
<slot />
|
|
</div>
|