diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1b2339ef..6b9a1c5c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
+## [0.38.2](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.38.2) - 2021-07-03
+
+**Fixes**
+
+- prevent `` from being read-only
+- only focus `OveflowMenuItem` if not disabled
+- trap tab focus within `Modal`, `ComposedModal`
+
## [0.38.1](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.38.1) - 2021-06-29
**Fixes**
diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index eba14221..6c64109a 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -1,6 +1,6 @@
# Component Index
-> 169 components exported from carbon-components-svelte@0.38.1.
+> 169 components exported from carbon-components-svelte@0.38.2.
## Components
@@ -686,6 +686,7 @@ None.
| Event name | Type | Detail |
| :------------ | :--------- | :------------------------------ |
| transitionend | dispatched | { open: boolean; }
|
+| keydown | forwarded | -- |
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index e23e9c30..925b35c2 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -1514,6 +1514,7 @@
"name": "transitionend",
"detail": "{ open: boolean; }"
},
+ { "type": "forwarded", "name": "keydown", "element": "div" },
{ "type": "forwarded", "name": "click", "element": "div" },
{ "type": "forwarded", "name": "mouseover", "element": "div" },
{ "type": "forwarded", "name": "mouseenter", "element": "div" },
diff --git a/docs/src/components/ComponentApi.svelte b/docs/src/components/ComponentApi.svelte
index de54abb0..2f131f01 100644
--- a/docs/src/components/ComponentApi.svelte
+++ b/docs/src/components/ComponentApi.svelte
@@ -4,6 +4,7 @@
slots: [],
events: [],
rest_props: undefined,
+ typedefs: [],
};
import {
@@ -17,6 +18,7 @@
UnorderedList,
ListItem,
Tag,
+ CodeSnippet,
} from "carbon-components-svelte";
import InlineSnippet from "./InlineSnippet.svelte";
import Launch16 from "carbon-icons-svelte/lib/Launch16";
@@ -40,7 +42,7 @@
- Component source code:
+ Source code:
{component.filePath}
@@ -51,9 +53,7 @@
{#if component.props.length > 0}
-
+
Prop name
@@ -71,9 +71,11 @@
{#if prop.reactive}
- Reactive
+
+ Reactive
+
{/if}
@@ -133,6 +135,20 @@
{:else}
No props.
{/if}
+
+Typedefs
+
+{#if component.typedefs.length > 0}
+
+{:else}
+ No typedefs.
+{/if}
+
Slots
{#if component.slots.length > 0}
diff --git a/docs/src/layouts/ComponentLayout.svelte b/docs/src/layouts/ComponentLayout.svelte
index 41982bcd..deb57cd7 100644
--- a/docs/src/layouts/ComponentLayout.svelte
+++ b/docs/src/layouts/ComponentLayout.svelte
@@ -37,7 +37,7 @@
onMount(() => {
const currentTheme = window.location.search.split("?theme=")[1];
- if (["white", "g10", "g90", "g100"].includes(currentTheme)) {
+ if (["white", "g10", "g80", "g90", "g100"].includes(currentTheme)) {
theme.set(currentTheme);
}
});
diff --git a/docs/svelte.config.js b/docs/svelte.config.js
index fbf33fcb..035a51dd 100644
--- a/docs/svelte.config.js
+++ b/docs/svelte.config.js
@@ -238,6 +238,9 @@ module.exports = {
Props
+
+ Typedefs
+
Slots
diff --git a/package.json b/package.json
index da4874e0..467d4d84 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "carbon-components-svelte",
- "version": "0.38.1",
+ "version": "0.38.2",
"license": "Apache-2.0",
"author": "IBM",
"description": "Svelte implementation of the Carbon Design System",
diff --git a/preprocess/api.json b/preprocess/api.json
index fb99ad0f..8a004458 100644
--- a/preprocess/api.json
+++ b/preprocess/api.json
@@ -1,5 +1,5 @@
{
- "version": "0.38.1",
+ "version": "0.38.2",
"components": {
"Accordion": {
"path": "carbon-components-svelte/src/Accordion/Accordion.svelte"
diff --git a/src/ComposedModal/ComposedModal.svelte b/src/ComposedModal/ComposedModal.svelte
index 43c4621e..094eba37 100644
--- a/src/ComposedModal/ComposedModal.svelte
+++ b/src/ComposedModal/ComposedModal.svelte
@@ -103,6 +103,33 @@
class:is-visible="{open}"
class:bx--modal--danger="{danger}"
{...$$restProps}
+ on:keydown
+ on:keydown="{(e) => {
+ if (open) {
+ if (e.key === 'Escape') {
+ open = false;
+ } else if (e.key === 'Tab') {
+ // taken from github.com/carbon-design-system/carbon/packages/react/src/internal/keyboard/navigation.js
+ const selectorTabbable = `
+ a[href], area[href], input:not([disabled]):not([tabindex='-1']),
+ button:not([disabled]):not([tabindex='-1']),select:not([disabled]):not([tabindex='-1']),
+ textarea:not([disabled]):not([tabindex='-1']),
+ iframe, object, embed, *[tabindex]:not([tabindex='-1']):not([disabled]), *[contenteditable=true]
+`;
+
+ const tabbable = Array.from(ref.querySelectorAll(selectorTabbable));
+
+ let index = tabbable.indexOf(document.activeElement);
+ if (index === -1 && e.shiftKey) index = 0;
+
+ index += tabbable.length + (e.shiftKey ? -1 : 1);
+ index %= tabbable.length;
+
+ tabbable[index].focus();
+ e.preventDefault();
+ }
+ }
+ }}"
on:click
on:click="{() => {
if (!didClickInnerModal && !preventCloseOnClickOutside) open = false;
diff --git a/src/Modal/Modal.svelte b/src/Modal/Modal.svelte
index c167dec4..d4d65d24 100644
--- a/src/Modal/Modal.svelte
+++ b/src/Modal/Modal.svelte
@@ -138,11 +138,32 @@
class:bx--modal--danger="{danger}"
{...$$restProps}
on:keydown
- on:keydown="{({ key }) => {
+ on:keydown="{(e) => {
if (open) {
- if (key === 'Escape') {
+ if (e.key === 'Escape') {
open = false;
- } else if (shouldSubmitOnEnter && key === 'Enter') {
+ } else if (e.key === 'Tab') {
+ // trap focus
+
+ // taken from github.com/carbon-design-system/carbon/packages/react/src/internal/keyboard/navigation.js
+ const selectorTabbable = `
+ a[href], area[href], input:not([disabled]):not([tabindex='-1']),
+ button:not([disabled]):not([tabindex='-1']),select:not([disabled]):not([tabindex='-1']),
+ textarea:not([disabled]):not([tabindex='-1']),
+ iframe, object, embed, *[tabindex]:not([tabindex='-1']):not([disabled]), *[contenteditable=true]
+`;
+
+ const tabbable = Array.from(ref.querySelectorAll(selectorTabbable));
+
+ let index = tabbable.indexOf(document.activeElement);
+ if (index === -1 && e.shiftKey) index = 0;
+
+ index += tabbable.length + (e.shiftKey ? -1 : 1);
+ index %= tabbable.length;
+
+ tabbable[index].focus();
+ e.preventDefault();
+ } else if (shouldSubmitOnEnter && e.key === 'Enter') {
dispatch('submit');
}
}
diff --git a/src/OverflowMenu/OverflowMenuItem.svelte b/src/OverflowMenu/OverflowMenuItem.svelte
index df56f4e6..4fb2718f 100644
--- a/src/OverflowMenu/OverflowMenuItem.svelte
+++ b/src/OverflowMenu/OverflowMenuItem.svelte
@@ -36,7 +36,7 @@
add({ id, text, primaryFocus });
afterUpdate(() => {
- if (primaryFocus) {
+ if (ref && primaryFocus) {
ref.focus();
}
});
diff --git a/src/TextArea/TextArea.svelte b/src/TextArea/TextArea.svelte
index 8fac4cdd..8920cb0f 100644
--- a/src/TextArea/TextArea.svelte
+++ b/src/TextArea/TextArea.svelte
@@ -90,6 +90,7 @@
class:bx--text-area--light="{light}"
class:bx--text-area--invalid="{invalid}"
{...$$restProps}
+ readonly="{$$restProps.readonly === true ? true : undefined}"
on:change
on:input
on:input="{({ target }) => {
diff --git a/types/ComposedModal/ComposedModal.d.ts b/types/ComposedModal/ComposedModal.d.ts
index 821b0566..a5327b3b 100644
--- a/types/ComposedModal/ComposedModal.d.ts
+++ b/types/ComposedModal/ComposedModal.d.ts
@@ -49,6 +49,7 @@ export default class ComposedModal extends SvelteComponentTyped<
ComposedModalProps,
{
transitionend: CustomEvent<{ open: boolean }>;
+ keydown: WindowEventMap["keydown"];
click: WindowEventMap["click"];
mouseover: WindowEventMap["mouseover"];
mouseenter: WindowEventMap["mouseenter"];