diff --git a/CHANGELOG.md b/CHANGELOG.md index 536d2a2e..b63628ac 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,18 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 +## [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** diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index 785a26ee..03c6f99e 100644 --- a/COMPONENT_INDEX.md +++ b/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 diff --git a/docs/package.json b/docs/package.json index 72c592f2..d5ebc5be 100644 --- a/docs/package.json +++ b/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", diff --git a/docs/src/App.svelte b/docs/src/App.svelte index b745c3ab..e3b4ea4b 100644 --- a/docs/src/App.svelte +++ b/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; - } diff --git a/docs/src/pages/components/DataTable.svx b/docs/src/pages/components/DataTable.svx index 7b173627..10272cbc 100644 --- a/docs/src/pages/components/DataTable.svx +++ b/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 + + 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. diff --git a/docs/yarn.lock b/docs/yarn.lock index 577aa1bd..ee129f67 100644 --- a/docs/yarn.lock +++ b/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" diff --git a/package.json b/package.json index 81fb401f..b62f8f40 100644 --- a/package.json +++ b/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", diff --git a/preprocess/api.json b/preprocess/api.json index 0de98980..deb99818 100644 --- a/preprocess/api.json +++ b/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" diff --git a/src/DataTable/DataTable.svelte b/src/DataTable/DataTable.svelte index 859b7829..a85aa924 100644 --- a/src/DataTable/DataTable.svelte +++ b/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, @@ -161,7 +169,7 @@ ...row, cells: headerKeys.map((key, index) => ({ key, - value: row[key], + value: resolvePath(row, key, ""), display: headers[index].display, })), })); @@ -174,8 +182,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); diff --git a/src/Dropdown/Dropdown.svelte b/src/Dropdown/Dropdown.svelte index 3597b258..2ab13f4e 100644 --- a/src/Dropdown/Dropdown.svelte +++ b/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) { diff --git a/yarn.lock b/yarn.lock index 0b43ed4d..cf319fe4 100644 --- a/yarn.lock +++ b/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"