carbon-components-svelte 0.88.3 → 0.89.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-components-svelte",
-  "version": "0.88.3",
+  "version": "0.89.0",
   "license": "Apache-2.0",
   "description": "Svelte implementation of the Carbon Design System",
   "type": "module",

package/src/ComboBox/ComboBox.svelte

@@ -46,6 +46,9 @@
   /** Specify the title text of the combobox */
   export let titleText = "";
 
+  /** Set to `true` to visually hide the label text */
+  export let hideLabel = false;
+
   /** Specify the placeholder text */
   export let placeholder = "";
 
@@ -226,7 +229,12 @@
 
 <div class:bx--list-box__wrapper={true}>
   {#if titleText || $$slots.titleText}
-    <label for={id} class:bx--label={true} class:bx--label--disabled={disabled}>
+    <label
+      for={id}
+      class:bx--label={true}
+      class:bx--label--disabled={disabled}
+      class:bx--visually-hidden={hideLabel}
+    >
       <slot name="titleText">
         {titleText}
       </slot>

package/src/ListBox/ListBoxMenuItem.svelte

@@ -25,6 +25,7 @@
   class:bx--list-box__menu-item--active={active}
   class:bx--list-box__menu-item--highlighted={highlighted || active}
   aria-selected={active}
+  aria-disabled={disabled ? true : undefined}
   disabled={disabled ? true : undefined}
   {...$$restProps}
   on:click

package/src/ListBox/ListBoxSelection.svelte

@@ -44,11 +44,12 @@
   $: if (ctx && ref) {
     ctx.declareRef({ key: "selection", ref });
   }
-
-  $: translationId = selectionCount
-    ? translationIds.clearAll
-    : translationIds.clearSelection;
-
+  $: translationId =
+    selectionCount === undefined
+      ? translationIds.clearSelection
+      : translationIds.clearAll;
+  $: buttonLabel =
+    translateWithId?.(translationId) ?? defaultTranslations[translationId];
   $: description =
     translateWithId?.(translationId) ?? defaultTranslations[translationId];
 </script>
@@ -79,7 +80,7 @@
         }
       }}
       {disabled}
-      aria-label={translationIds.clearAll}
+      aria-label={buttonLabel}
       title={description}
     >
       <Close />

package/src/RadioButton/RadioButton.svelte

@@ -71,6 +71,8 @@
     required={$groupRequired ?? required}
     {value}
     class:bx--radio-button={true}
+    on:focus
+    on:blur
     on:change
     on:change={() => {
       if (update) {

package/src/Select/SelectItem.svelte

@@ -5,8 +5,12 @@
    */
   export let value = "";
 
-  /** Specify the option text */
-  export let text = "";
+  /**
+   * Specify the option text
+   * If not specified, the value will be used as the text.
+   * @type {string}
+   */
+  export let text = undefined;
 
   /** Set to `true` to hide the option */
   export let hidden = false;

package/src/TextArea/TextArea.svelte

@@ -71,7 +71,7 @@
   on:mouseleave
   class:bx--form-item={true}
 >
-  {#if (labelText || $$slots.labelText) && !hideLabel}
+  {#if labelText || $$slots.labelText}
     <div class:bx--text-area__label-wrapper={true}>
       <label
         for={id}

package/src/Tile/RadioTile.svelte

@@ -36,6 +36,7 @@
   const { add, update, selectedValue, groupName, groupRequired } = getContext(
     "TileGroup",
   ) ?? {
+    add: () => {},
     groupName: readable(undefined),
     groupRequired: readable(undefined),
     selectedValue: readable(checked ? value : undefined),

package/src/utils/toHierarchy.js

@@ -13,35 +13,22 @@
 export function toHierarchy(flatArray, getParentId) {
   /** @type {NodeLike[]} */
   const tree = [];
-  const childrenOf = new Map();
-  const itemsMap = new Map(flatArray.map((item) => [item.id, item]));
+  const nodeMap = new Map();
 
-  flatArray.forEach((item) => {
+  for (const item of flatArray) {
     const parentId = getParentId(item);
+    nodeMap.set(item.id, item);
 
-    // Only create nodes array if we have children.
-    const children = childrenOf.get(item.id);
-    if (children) {
-      item.nodes = children;
-    }
-
-    // Check if parentId exists using Map instead of array lookup.
-    const parentExists = parentId && itemsMap.has(parentId);
-
-    if (parentId && parentExists) {
-      if (!childrenOf.has(parentId)) {
-        childrenOf.set(parentId, []);
-      }
-      childrenOf.get(parentId).push(item);
-
-      const parent = itemsMap.get(parentId);
-      if (parent) {
-        parent.nodes = childrenOf.get(parentId);
-      }
-    } else {
+    if (!parentId || !nodeMap.has(parentId)) {
       tree.push(item);
+    } else {
+      const parent = nodeMap.get(parentId);
+      if (!parent.nodes) {
+        parent.nodes = [];
+      }
+      parent.nodes.push(item);
     }
-  });
+  }
 
   return tree;
 }

package/types/ComboBox/ComboBox.svelte.d.ts

@@ -60,6 +60,12 @@ type $Props = {
    */
   titleText?: string;
 
+  /**
+   * Set to `true` to visually hide the label text
+   * @default false
+   */
+  hideLabel?: boolean;
+
   /**
    * Specify the placeholder text
    * @default ""

package/types/RadioButton/RadioButton.svelte.d.ts

@@ -71,6 +71,10 @@ export type RadioButtonProps = Omit<$RestProps, keyof $Props> & $Props;
 
 export default class RadioButton extends SvelteComponentTyped<
   RadioButtonProps,
-  { change: WindowEventMap["change"] },
+  {
+    focus: WindowEventMap["focus"];
+    blur: WindowEventMap["blur"];
+    change: WindowEventMap["change"];
+  },
   { labelText: {} }
 > {}

package/types/Select/SelectItem.svelte.d.ts

@@ -9,7 +9,8 @@ export type SelectItemProps = {
 
   /**
    * Specify the option text
-   * @default ""
+   * If not specified, the value will be used as the text.
+   * @default undefined
    */
   text?: string;