mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-19 11:59:34 +00:00
c02b4738bc* chore(deps-dev): upgrade svelte to 3.58 * chore(a11y): ignore false positives Referencing the upstream Carbon React implementation, these warnings can be ignored. * fix(list-box-menu-item): set `tabindex` to `-1` * chore: fix `tabindex` capitalization The Svelte Language server does not detect `tabIndex` as a valid attribute. Note, however, that `tabIndex` is correct when using it in JavaScript (e.g., `node.tabIndex`).
41 lines
1 KiB
Svelte
41 lines
1 KiB
Svelte
<script>
|
|
/** Set to `true` to enable the active state */
|
|
export let active = false;
|
|
|
|
/** Set to `true` to enable the highlighted state */
|
|
export let highlighted = false;
|
|
|
|
/** Set to `true` to disable the menu item */
|
|
export let disabled = false;
|
|
|
|
let ref = null;
|
|
|
|
$: isTruncated = ref?.offsetWidth < ref?.scrollWidth;
|
|
$: title = isTruncated ? ref?.innerText : undefined;
|
|
$: if (highlighted && ref && !ref.matches(":hover")) {
|
|
// Scroll highlighted item into view if using keyboard navigation
|
|
ref.scrollIntoView({ block: "nearest" });
|
|
}
|
|
</script>
|
|
|
|
<div
|
|
role="option"
|
|
tabindex="-1"
|
|
class:bx--list-box__menu-item="{true}"
|
|
class:bx--list-box__menu-item--active="{active}"
|
|
class:bx--list-box__menu-item--highlighted="{highlighted || active}"
|
|
aria-selected="{active}"
|
|
disabled="{disabled ? true : undefined}"
|
|
{...$$restProps}
|
|
on:click
|
|
on:mouseenter
|
|
on:mouseleave
|
|
>
|
|
<div
|
|
bind:this="{ref}"
|
|
title="{title}"
|
|
class:bx--list-box__menu-item__option="{true}"
|
|
>
|
|
<slot />
|
|
</div>
|
|
</div>
|