diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index 7bbbdc3f..98a9d2f5 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -2780,6 +2780,7 @@ None. | input | forwarded | -- | | focus | forwarded | -- | | blur | forwarded | -- | +| keydown | forwarded | -- | | clear | dispatched | -- | ## `SearchSkeleton` @@ -4131,6 +4132,7 @@ None. | refTooltip | let | Yes | null | HTMLDivElement | null | Obtain a reference to the tooltip HTML element | | ref | let | Yes | null | HTMLDivElement | null | Obtain a reference to the trigger text HTML element | | open | let | Yes | boolean | false | Set to `true` to open the tooltip | +| align | let | No | "start" | "center" | "end" | "center" | Set the alignment of the tooltip relative to the icon | | direction | let | No | "top" | "right" | "bottom" | "left" | "bottom" | Set the direction of the tooltip relative to the button | | hideIcon | let | No | boolean | false | Set to `true` to hide the tooltip icon | | icon | let | No | typeof import("carbon-icons-svelte").CarbonIcon | -- | Specify the icon from `carbon-icons-svelte` to render for the tooltip button
Icon size must be 16px (e.g., `Add16`, `Task16`) | diff --git a/docs/package.json b/docs/package.json index 6b5707ec..f307dfa6 100644 --- a/docs/package.json +++ b/docs/package.json @@ -12,7 +12,7 @@ "@carbon/themes": "^10.22.1", "@sveltech/routify": "^1.9.9", "autoprefixer": "^10.0.1", - "carbon-components": "^10.23.1", + "carbon-components": "^10.25.0", "carbon-components-svelte": "../", "clipboard-copy": "^3.1.0", "mdsvex": "^0.8.8", diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index 9e623335..10988ed2 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -2900,6 +2900,7 @@ { "type": "forwarded", "name": "input", "element": "input" }, { "type": "forwarded", "name": "focus", "element": "input" }, { "type": "forwarded", "name": "blur", "element": "input" }, + { "type": "forwarded", "name": "keydown", "element": "input" }, { "type": "dispatched", "name": "clear" } ], "typedefs": [], @@ -9274,6 +9275,16 @@ "moduleName": "Tooltip", "filePath": "/src/Tooltip/Tooltip.svelte", "props": [ + { + "name": "align", + "kind": "let", + "description": "Set the alignment of the tooltip relative to the icon", + "type": "\"start\" | \"center\" | \"end\"", + "value": "\"center\"", + "isFunction": false, + "constant": false, + "reactive": false + }, { "name": "direction", "kind": "let", diff --git a/docs/src/pages/components/Tooltip.svx b/docs/src/pages/components/Tooltip.svx index d00df4f3..a9deb31b 100644 --- a/docs/src/pages/components/Tooltip.svx +++ b/docs/src/pages/components/Tooltip.svx @@ -6,8 +6,8 @@ ### Default (icon-only, "bottom" direction) - -

+ +

Resources are provisioned based on your account's organization.

@@ -27,6 +27,12 @@

Bottom

Left

+### Alignment + +

Start

+

End

+

Center

+ ### Interactive diff --git a/docs/yarn.lock b/docs/yarn.lock index d8f2b669..26ee964f 100644 --- a/docs/yarn.lock +++ b/docs/yarn.lock @@ -771,24 +771,24 @@ caniuse-lite@^1.0.30001135, caniuse-lite@^1.0.30001137: integrity sha512-VAy5RHDfTJhpxnDdp2n40GPPLp3KqNrXz1QqFv4J64HvArKs8nuNMOWkB3ICOaBTU/Aj4rYAo/ytdQDDFF/Pug== carbon-components-svelte@../: - version "0.21.0" + version "0.25.1" dependencies: - carbon-icons-svelte "^10.17.0" + carbon-icons-svelte "^10.21.0" flatpickr "4.6.3" -carbon-components@^10.23.1: - version "10.23.1" - resolved "https://registry.npmjs.org/carbon-components/-/carbon-components-10.23.1.tgz#cf649a09aa25eac14dc158f0fb79ba625730026c" - integrity sha512-izeyNCo9cPfdw9358y5VPsDRzmGAO1wAjSnkD5gGEQO46P2HBdQcgXV1IqjAbFuit+TgfG/MrP38u+pmjp4zyQ== +carbon-components@^10.25.0: + version "10.25.0" + resolved "https://registry.npmjs.org/carbon-components/-/carbon-components-10.25.0.tgz#268441eb5f06be35f72790770bed9ba0cd52a0b1" + integrity sha512-0XzHaDxJ7aO23xZ7L/efAkSLuo3pKf7h94CAP0RsXPp2c9KL7uYdjtSZLmAqMkDQrOSORnkUju6zQhI+ZYcEIw== dependencies: flatpickr "4.6.1" lodash.debounce "^4.0.8" warning "^3.0.0" -carbon-icons-svelte@^10.17.0: - version "10.17.0" - resolved "https://registry.npmjs.org/carbon-icons-svelte/-/carbon-icons-svelte-10.17.0.tgz#f7559f58be9c789097ea4035e52dbc4c12691d45" - integrity sha512-as1RN87YLvF7iepGAGWQOk2oleyb4w17BoHSYyQgE3MceOla04YdSWASK5c22XZZnmMJbbrT17Z34Cl70niz0Q== +carbon-icons-svelte@^10.21.0: + version "10.21.0" + resolved "https://registry.npmjs.org/carbon-icons-svelte/-/carbon-icons-svelte-10.21.0.tgz#9bbdd37d5513d484e9706d6335c121f60f3186c4" + integrity sha512-5NNaRdmbS4N36dUGNj72Ys3VqVjH3fZ69AhYUHx+bH02GFYCwAaE49qjtP77kP7DKMtDV9NmMEti/P/JB83aYQ== caseless@~0.12.0: version "0.12.0" diff --git a/package.json b/package.json index b5b2a28c..d83c2d2d 100644 --- a/package.json +++ b/package.json @@ -27,7 +27,7 @@ "@rollup/plugin-node-resolve": "^10.0.0", "@tsconfig/svelte": "^1.0.10", "autoprefixer": "^9.8.6", - "carbon-components-10.23": "npm:carbon-components@10.23.1", + "carbon-components-10.25": "npm:carbon-components@10.25.0", "gh-pages": "^3.1.0", "husky": "^4.3.0", "lint-staged": "^10.5.1", diff --git a/scripts/build-css.js b/scripts/build-css.js index a6fd0080..fbaa39a2 100644 --- a/scripts/build-css.js +++ b/scripts/build-css.js @@ -18,12 +18,12 @@ const shared = { $css--default-type: true; $css--plex: true; - @import "node_modules/carbon-components-10.23/scss/globals/scss/_css--reset.scss"; - @import "node_modules/carbon-components-10.23/scss/globals/scss/_css--font-face.scss"; - @import "node_modules/carbon-components-10.23/scss/globals/scss/_css--helpers.scss"; - @import "node_modules/carbon-components-10.23/scss/globals/scss/_css--body.scss"; - @import "node_modules/carbon-components-10.23/scss/globals/grid/_grid.scss"; - @import "node_modules/carbon-components-10.23/scss/globals/scss/styles.scss"; + @import "node_modules/carbon-components-10.25/scss/globals/scss/_css--reset.scss"; + @import "node_modules/carbon-components-10.25/scss/globals/scss/_css--font-face.scss"; + @import "node_modules/carbon-components-10.25/scss/globals/scss/_css--helpers.scss"; + @import "node_modules/carbon-components-10.25/scss/globals/scss/_css--body.scss"; + @import "node_modules/carbon-components-10.25/scss/globals/grid/_grid.scss"; + @import "node_modules/carbon-components-10.25/scss/globals/scss/styles.scss"; `, components: ``, }; diff --git a/src/ComboBox/ComboBox.svelte b/src/ComboBox/ComboBox.svelte index c6ab6d32..03d5f933 100644 --- a/src/ComboBox/ComboBox.svelte +++ b/src/ComboBox/ComboBox.svelte @@ -82,7 +82,7 @@ */ export let listRef = null; - import { createEventDispatcher, afterUpdate } from "svelte"; + import { createEventDispatcher, afterUpdate, tick } from "svelte"; import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16"; import { ListBox, @@ -173,9 +173,11 @@ { if (disabled) return; open = true; + await tick(); + ref.focus(); }}" id="{id}" name="{name}" @@ -220,7 +222,8 @@ on:focus on:blur on:blur="{({ relatedTarget }) => { - if (relatedTarget && relatedTarget.getAttribute('role') !== 'button') { + if (!open || !relatedTarget) return; + if (relatedTarget.getAttribute('role') !== 'button' && relatedTarget.getAttribute('role') !== 'searchbox') { ref.focus(); } }}" diff --git a/src/Dropdown/Dropdown.svelte b/src/Dropdown/Dropdown.svelte index d0c93750..5032f582 100644 --- a/src/Dropdown/Dropdown.svelte +++ b/src/Dropdown/Dropdown.svelte @@ -189,11 +189,6 @@ change(-1); } }}" - on:blur="{({ relatedTarget }) => { - if (relatedTarget) { - ref.focus(); - } - }}" disabled="{disabled}" translateWithId="{translateWithId}" id="{id}" @@ -213,6 +208,7 @@ on:click="{() => { selectedId = item.id; selectedIndex = i; + ref.focus(); }}" on:mouseenter="{() => { highlightedIndex = i; diff --git a/src/Search/Search.svelte b/src/Search/Search.svelte index a9a978fd..33c792b5 100644 --- a/src/Search/Search.svelte +++ b/src/Search/Search.svelte @@ -120,6 +120,13 @@ }}" on:focus on:blur + on:keydown + on:keydown="{({ key }) => { + if (key === 'Escape') { + value = ''; + dispatch('clear'); + } + }}" />