Merge branch 'master' into recursive-list

CHANGELOG.md

@@ -7,6 +7,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 <!-- ## Unreleased -->
 
+## [0.38.2](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.38.2) - 2021-07-03
+
+**Fixes**
+
+- prevent `<TextArea readonly={false} />` 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**

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 | <code>{ open: boolean; }</code> |
+| keydown       | forwarded  | --                              |
 | click         | forwarded  | --                              |
 | mouseover     | forwarded  | --                              |
 | mouseenter    | forwarded  | --                              |

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" },

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 @@
 </script>
 
 <p style="margin-bottom: var(--cds-layout-02)">
-  Component source code:
+  Source code:
   <Link inline size="lg" href="{source}" target="_blank">
     {component.filePath}
     <Launch16 />
@@ -51,9 +53,7 @@
 
 {#if component.props.length > 0}
   <div class="overflow">
-    <StructuredList
-      style="margin-left: calc(-1 * var(--cds-spacing-05)); margin-right: calc(-1 * var(--cds-spacing-05))"
-    >
+    <StructuredList flush condensed>
       <StructuredListHead>
         <StructuredListRow head>
           <StructuredListCell head>Prop name</StructuredListCell>
@@ -71,9 +71,11 @@
               <InlineSnippet code="{prop.name}" />
               {#if prop.reactive}
                 <div
-                  style="white-space: nowrap; margin-top: var(--cds-spacing-03)"
+                  style="white-space: nowrap; margin-top: var(--cds-spacing-03); margin-bottom: var(--cds-spacing-03)"
                 >
-                  <Tag type="cyan">Reactive</Tag>
+                  <Tag style="margin-left: 0" size="sm" type="cyan">
+                    Reactive
+                  </Tag>
                 </div>
               {/if}
             </StructuredListCell>
@@ -133,6 +135,20 @@
 {:else}
   <p class="my-layout-01-03">No props.</p>
 {/if}
+
+<h3 id="typedefs">Typedefs</h3>
+
+{#if component.typedefs.length > 0}
+  <CodeSnippet
+    style="margin-top: var(--cds-spacing-08)"
+    class="my-layout-01-03"
+    type="multi"
+    code="{component.typedefs.map((t) => t.ts).join(';\n\n')}"
+  />
+{:else}
+  <p class="my-layout-01-03">No typedefs.</p>
+{/if}
+
 <h3 id="slots">Slots</h3>
 {#if component.slots.length > 0}
   <UnorderedList class="my-layout-01-03">

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);
     }
   });

docs/svelte.config.js

@@ -238,6 +238,9 @@ module.exports = {
                       <li class="bx--list__item">
                         <a class="bx--link" href="#props">Props</a>
                       </li>
+                      <li class="bx--list__item">
+                        <a class="bx--link" href="#typedefs">Typedefs</a>
+                      </li>
                       <li class="bx--list__item">
                         <a class="bx--link" href="#slots">Slots</a>
                       </li>

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",

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"

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;

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');
       }
     }

src/OverflowMenu/OverflowMenuItem.svelte

@@ -36,7 +36,7 @@
   add({ id, text, primaryFocus });
 
   afterUpdate(() => {
-    if (primaryFocus) {
+    if (ref && primaryFocus) {
       ref.focus();
     }
   });

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 }) => {

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"];