carbon-components-svelte 0.87.1 → 0.87.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "carbon-components-svelte",
3
- "version": "0.87.1",
3
+ "version": "0.87.3",
4
4
  "license": "Apache-2.0",
5
5
  "description": "Svelte implementation of the Carbon Design System",
6
6
  "type": "module",
@@ -81,6 +81,7 @@
81
81
 
82
82
  setContext("OverflowMenu", {
83
83
  focusedId,
84
+ items,
84
85
  add: ({ id, text, primaryFocus, disabled }) => {
85
86
  items.update((_) => {
86
87
  if (primaryFocus) {
@@ -90,8 +91,11 @@
90
91
  return [..._, { id, text, primaryFocus, disabled, index: _.length }];
91
92
  });
92
93
  },
93
- update: (id) => {
94
+ update: (id, item) => {
94
95
  currentId.set(id);
96
+
97
+ dispatch("close", { index: item.index, text: item.text });
98
+ open = false;
95
99
  },
96
100
  change: (direction) => {
97
101
  let index = $currentIndex + direction;
@@ -121,12 +125,6 @@
121
125
  });
122
126
 
123
127
  afterUpdate(() => {
124
- if ($currentId) {
125
- const { index, text } = $items.filter((_) => _.id === $currentId)[0];
126
- dispatch("close", { index, text });
127
- open = false;
128
- }
129
-
130
128
  if (open) {
131
129
  const width = buttonRef.offsetWidth;
132
130
  const height = buttonRef.offsetHeight;
@@ -183,6 +181,7 @@
183
181
  on:click={({ target }) => {
184
182
  if (buttonRef && buttonRef.contains(target)) return;
185
183
  if (menuRef && !menuRef.contains(target)) {
184
+ dispatch("close");
186
185
  open = false;
187
186
  }
188
187
  }}
@@ -225,14 +224,6 @@
225
224
  }
226
225
  }
227
226
  }}
228
- on:focusout={(e) => {
229
- if (open) {
230
- if (!buttonRef.contains(e.relatedTarget)) {
231
- dispatch("close");
232
- open = false;
233
- }
234
- }
235
- }}
236
227
  >
237
228
  <slot name="menu">
238
229
  <svelte:component
@@ -31,7 +31,9 @@
31
31
 
32
32
  import { getContext, afterUpdate } from "svelte";
33
33
 
34
- const { focusedId, add, update, change } = getContext("OverflowMenu");
34
+ const { focusedId, add, update, change, items } = getContext("OverflowMenu");
35
+
36
+ $: item = $items.find((_) => _.id === id);
35
37
 
36
38
  add({ id, text, primaryFocus, disabled });
37
39
 
@@ -68,8 +70,9 @@
68
70
  bind:this={ref}
69
71
  {...buttonProps}
70
72
  on:click
71
- on:click={() => {
72
- update(id);
73
+ on:click={(e) => {
74
+ e.stopPropagation();
75
+ update(id, item);
73
76
  }}
74
77
  on:keydown
75
78
  on:keydown={({ key }) => {
@@ -91,8 +94,9 @@
91
94
  bind:this={ref}
92
95
  {...buttonProps}
93
96
  on:click
94
- on:click={() => {
95
- update(id);
97
+ on:click={(e) => {
98
+ e.stopPropagation();
99
+ update(id, item);
96
100
  }}
97
101
  on:keydown
98
102
  on:keydown={({ key }) => {
@@ -85,7 +85,7 @@
85
85
  </label>
86
86
  {#if maxCount}
87
87
  <div class:bx--label={true} class:bx--label--disabled={disabled}>
88
- {value.length}/{maxCount}
88
+ {(value ?? "").length}/{maxCount}
89
89
  </div>
90
90
  {/if}
91
91
  </div>