Add support for nested object fields in DataTable

CHANGELOG.md

@@ -7,6 +7,18 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 <!-- ## Unreleased -->
 
+## [0.32.2](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.32.2) - 2021-04-23
+
+**Fixes**
+
+- prevent multiple Dropdown items from being selected by updating the `selectedId`
+- prevent the default keydown behavior so that pressing "Enter" should open the Dropdown menu
+- resolve Carbon icon imports to Svelte files in `DataTable`, `HamburgerMenu` components
+
+**Housekeeping**
+
+- patch `carbon-components` to version 10.32.1
+
 ## [0.32.1](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.32.1) - 2021-04-02
 
 **Fixes**

COMPONENT_INDEX.md

@@ -1,6 +1,6 @@
 # Component Index
 
-> 167 components exported from carbon-components-svelte@0.32.1.
+> 167 components exported from carbon-components-svelte@0.32.2.
 
 ## Components
 

docs/package.json

@@ -11,7 +11,7 @@
   "devDependencies": {
     "@sveltech/routify": "^1.9.9",
     "autoprefixer": "^10.2.3",
-    "carbon-components": "10.32.0",
+    "carbon-components": "10.32.1",
     "carbon-components-svelte": "../",
     "mdsvex": "^0.8.8",
     "npm-run-all": "^4.1.5",

docs/src/App.svelte

@@ -77,16 +77,4 @@
 
   // Import all component styles
   @import "carbon-components/scss/globals/scss/styles";
-
-  .bx--list-box:not(.bx--list-box--light) input[role="combobox"],
-  .bx--list-box:not(.bx--list-box--light) input[type="text"],
-  .bx--dropdown:not(.bx--dropdown--light),
-  .bx--list-box:not(.bx--list-box--light),
-  .bx--number:not(.bx--number--light) input[type="number"],
-  .bx--number:not(.bx--number--light) .bx--number__control-btn::before,
-  .bx--number:not(.bx--number--light) .bx--number__control-btn::after,
-  .bx--text-input:not(.bx--text-input--light),
-  .bx--select-input {
-    background-color: $field-01;
-  }
 </style>

docs/src/pages/components/DataTable.svx

@@ -676,6 +676,85 @@ In the example below, the "Protocol" column is not sortable.
   ]}"
 />
 
+### Sortable with nested object values
+
+<DataTable sortable title="Load balancers" description="Your organization's active load balancers."
+           headers="{[
+    { key: "name", value: "Name" },
+    { key: "network.protocol", value: "Protocol" },
+    { key: "network.port", value: "Port" },
+    { key: "cost", value: "Cost", display: (cost) => cost + " €" },
+    {
+      key: "expireDate",
+      value: "Expire date",
+      display: (date) => new Date(date).toLocaleString(),
+      sort: (a, b) => new Date(a) - new Date(b),
+    },
+  ]}"
+  rows="{[
+    {
+      id: "a",
+      name: "Load Balancer 3",
+      network: {
+        protocol: "HTTP",
+        port: 3000,
+      },
+      cost: 100,
+      expireDate: "2020-10-21",
+    },
+    {
+      id: "b",
+      name: "Load Balancer 1",
+      network: {
+        protocol: "HTTP",
+        port: 443,
+      },
+      cost: 200,
+      expireDate: "2020-09-10",
+    },
+    {
+      id: "c",
+      name: "Load Balancer 2",
+      network: {
+        protocol: "HTTP",
+        port: 80,
+      },
+      cost: 150,
+      expireDate: "2020-11-24",
+    },
+    {
+      id: "d",
+      name: "Load Balancer 6",
+      network: {
+        protocol: "HTTP",
+        port: 3000,
+      },
+      cost: 250,
+      expireDate: "2020-12-01",
+    },
+    {
+      id: "e",
+      name: "Load Balancer 4",
+      network: {
+        protocol: "HTTP",
+        port: 443,
+      },
+      cost: 550,
+      expireDate: "2021-03-21",
+    },
+    {
+      id: "f",
+      name: "Load Balancer 5",
+      network: {
+        protocol: "HTTP",
+        port: 80,
+      },
+      cost: 400,
+      expireDate: "2020-11-14",
+    },
+  ]}"
+/>
+
 ### Empty column with overflow menu
 
 Some use cases require an empty column in the table body without a corresponding table header.

docs/yarn.lock

@@ -837,16 +837,16 @@ caniuse-lite@^1.0.30001173, caniuse-lite@^1.0.30001178:
   integrity sha512-n8JVqXuZMVSPKiPiypjFtDTXc4jWIdjxull0f92WLo7e1MSi3uJ3NvveakSh/aCl1QKFAvIz3vIj0v+0K+FrXw==
 
 carbon-components-svelte@../:
-  version "0.31.1"
+  version "0.32.1"
   dependencies:
     carbon-icons-svelte "^10.27.0"
     clipboard-copy "3.2.0"
     flatpickr "4.6.9"
 
-carbon-components@10.32.0:
-  version "10.32.0"
-  resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.32.0.tgz#0fbf60ea8fc12cea43ae7860bec844b3c2c0880f"
-  integrity sha512-LM44X6VhUc+yrZBSz+IW1aT/OGxAS0oiiy/kV7CiDpsUDF5zlPOwgokZbeYLo2mhB1wBZ1q9jwvItZ4zfaZuMw==
+carbon-components@10.32.1:
+  version "10.32.1"
+  resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.32.1.tgz#064d4504daafafa379ee2fbc5b2997204fb2e5eb"
+  integrity sha512-m9Q9y1NSsXcLINSYmRmOOuxwvSNrXqC2FIN3ykg+WO3+WrmozbPsgFSyMs0gd/RUgNXP6edt8k0Op//oks01gA==
   dependencies:
     "@carbon/telemetry" "0.0.0-alpha.6"
     flatpickr "4.6.1"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-components-svelte",
-  "version": "0.32.1",
+  "version": "0.32.2",
   "license": "Apache-2.0",
   "author": "IBM",
   "description": "Svelte implementation of the Carbon Design System",
@@ -32,7 +32,7 @@
     "@rollup/plugin-node-resolve": "^11.1.1",
     "@tsconfig/svelte": "^1.0.10",
     "autoprefixer": "^10.2.4",
-    "carbon-components": "10.32.0",
+    "carbon-components": "10.32.1",
     "gh-pages": "^3.1.0",
     "husky": "^4.3.8",
     "lint-staged": "^10.5.3",

preprocess/api.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.32.1",
+  "version": "0.32.2",
   "components": {
     "Accordion": {
       "path": "carbon-components-svelte/src/Accordion/Accordion.svelte"

src/DataTable/DataTable.svelte

@@ -124,6 +124,14 @@
       .map(({ key }, i) => ({ key, id: $headerItems[i] }))
       .reduce((a, c) => ({ ...a, [c.key]: c.id }), {})
   );
+  const resolvePath = (object, path, defaultValue) =>
+    path
+      .split(/[\.\[\]\'\"]/)
+      .filter((p) => p)
+      .reduce(
+        (o, p) => (o && typeof o === "object" && o[p] ? o[p] : defaultValue),
+        object
+      );
 
   setContext("DataTable", {
     sortHeader,
@@ -159,7 +167,7 @@
   $: headerKeys = headers.map(({ key }) => key);
   $: rows = rows.map((row) => ({
     ...row,
-    cells: headerKeys.map((key) => ({ key, value: row[key] })),
+    cells: headerKeys.map((key) => ({ key, value: resolvePath(row, key, "") })),
   }));
   $: sortedRows = rows;
   $: ascending = $sortHeader.sortDirection === "ascending";
@@ -170,8 +178,12 @@
       sortedRows = rows;
     } else {
       sortedRows = [...rows].sort((a, b) => {
-        const itemA = ascending ? a[sortKey] : b[sortKey];
-        const itemB = ascending ? b[sortKey] : a[sortKey];
+        const itemA = ascending
+          ? resolvePath(a, sortKey, "")
+          : resolvePath(b, sortKey, "");
+        const itemB = ascending
+          ? resolvePath(b, sortKey, "")
+          : resolvePath(a, sortKey, "");
 
         if ($sortHeader.sort) return $sortHeader.sort(itemA, itemB);
 

src/Dropdown/Dropdown.svelte

@@ -128,6 +128,7 @@
   }
   $: inline = type === "inline";
   $: selectedItem = items[selectedIndex];
+  $: selectedId = items[selectedIndex] ? items[selectedIndex].id : undefined;
   $: if (!open) {
     highlightedIndex = -1;
   }
@@ -203,7 +204,11 @@
       tabindex="0"
       role="button"
       aria-expanded="{open}"
-      on:keydown="{({ key }) => {
+      on:keydown="{(e) => {
+        const { key } = e;
+        if (['Enter', 'ArrowDown', 'ArrowUp'].includes(key)) {
+          e.preventDefault();
+        }
         if (key === 'Enter') {
           open = !open;
           if (highlightedIndex > -1 && highlightedIndex !== selectedIndex) {

yarn.lock

@@ -453,10 +453,10 @@ caniuse-lite@^1.0.30001181:
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001183.tgz#7a57ba9d6584119bb5f2bc76d3cc47ba9356b3e2"
   integrity sha512-7JkwTEE1hlRKETbCFd8HDZeLiQIUcl8rC6JgNjvHCNaxOeNmQ9V4LvQXRUsKIV2CC73qKxljwVhToaA3kLRqTw==
 
-carbon-components@10.32.0:
-  version "10.32.0"
-  resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.32.0.tgz#0fbf60ea8fc12cea43ae7860bec844b3c2c0880f"
-  integrity sha512-LM44X6VhUc+yrZBSz+IW1aT/OGxAS0oiiy/kV7CiDpsUDF5zlPOwgokZbeYLo2mhB1wBZ1q9jwvItZ4zfaZuMw==
+carbon-components@10.32.1:
+  version "10.32.1"
+  resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.32.1.tgz#064d4504daafafa379ee2fbc5b2997204fb2e5eb"
+  integrity sha512-m9Q9y1NSsXcLINSYmRmOOuxwvSNrXqC2FIN3ykg+WO3+WrmozbPsgFSyMs0gd/RUgNXP6edt8k0Op//oks01gA==
   dependencies:
     "@carbon/telemetry" "0.0.0-alpha.6"
     flatpickr "4.6.1"