@salt-ds/lab 1.0.0-alpha.103 → 1.0.0-alpha.104

package/CHANGELOG.md

@@ -1,5 +1,40 @@
 # @salt-ds/lab
 
+## 1.0.0-alpha.104
+
+### Minor Changes
+
+- 5da6723: Removed `LinkButton` from lab and promoted it to core. Import it from `@salt-ds/core` instead.
+- be5eb93: Added `AvatarGroup` to the lab package.
+
+  `AvatarGroup` displays a collection of avatars in a compact, overlapping stack. Compose the avatars you want to display and, when members are hidden, add an `AvatarGroupCount` as the last child to indicate the remaining members.
+
+  ```tsx
+  import { Avatar } from "@salt-ds/core";
+  import { AvatarGroup, AvatarGroupCount } from "@salt-ds/lab";
+
+  <AvatarGroup aria-label="Team members">
+    <Avatar name="Alex Brailescu" />
+    <Avatar name="Peter Piper" />
+    <Avatar name="John Doe" />
+    <AvatarGroupCount count={1} />
+  </AvatarGroup>;
+  ```
+
+### Patch Changes
+
+- Updated dependencies [5da6723]
+- Updated dependencies [0f92b84]
+- Updated dependencies [1417fa9]
+- Updated dependencies [0f92b84]
+- Updated dependencies [dd17c26]
+- Updated dependencies [d7e777c]
+- Updated dependencies [86080e7]
+- Updated dependencies [f705932]
+- Updated dependencies [d7e777c]
+- Updated dependencies [5ab650a]
+  - @salt-ds/core@1.71.0
+
 ## 1.0.0-alpha.103
 
 ### Minor Changes

package/css/salt-lab.css

@@ -92,6 +92,138 @@
   flex-shrink: 0;
 }
 
+/* src/avatar-group/AvatarGroup.css */
+.saltAvatarGroup {
+  --avatarGroup-overlap: var(--saltAvatarGroup-overlap, calc(var(--salt-size-base) * 0.25));
+  --avatarGroup-gap: var(--saltAvatarGroup-gap, var(--salt-size-fixed-100));
+  --avatarGroup-gap-feather: var(--saltAvatarGroup-gap-feather, 0.1px);
+  --avatarGroup-size-multiplier: var(--saltAvatarGroup-size-multiplier, 1);
+  --avatarGroup-item-size: var(--saltAvatar-size, calc(var(--salt-size-base) * var(--avatarGroup-size-multiplier)));
+  display: flex;
+  padding: 0;
+  border: none;
+  background-color: transparent;
+  position: relative;
+  border-radius: var(--salt-palette-corner-strongest, 50%);
+}
+.saltAvatarGroup .saltAvatar {
+  --avatar-size-multiplier: var(--avatarGroup-size-multiplier);
+}
+.saltAvatarGroup > :is(.saltAvatar, .saltAvatarGroupCount):not(:first-child) {
+  margin-left: calc(-1 * var(--avatarGroup-overlap));
+}
+.saltAvatarGroup:focus-visible {
+  outline-offset: var(--salt-spacing-fixed-200);
+}
+.saltAvatarGroup::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  pointer-events: none;
+  background-color: transparent;
+}
+button.saltAvatarGroup,
+a.saltAvatarGroup {
+  cursor: var(--salt-cursor-hover);
+}
+button.saltAvatarGroup:disabled {
+  cursor: var(--salt-cursor-disabled);
+}
+.saltAvatarGroup > :is(.saltAvatar, .saltAvatarGroupCount):not(:first-child)::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  box-sizing: border-box;
+  border-radius: inherit;
+  border: var(--avatarGroup-gap) var(--salt-borderStyle-solid) var(--salt-container-primary-background);
+  pointer-events: none;
+}
+@supports selector(:has(*)) {
+  .saltAvatarGroup > :is(.saltAvatar, .saltAvatarGroupCount):not(:first-child)::after {
+    border: none;
+  }
+  .saltAvatarGroup > :is(.saltAvatar, .saltAvatarGroupCount):has(+ :is(.saltAvatar, .saltAvatarGroupCount):not(.saltAvatar-entity, .saltAvatarGroupCount-entity)) {
+    --avatarGroup-mask-radius: calc(var(--avatarGroup-item-size) / 2 + var(--avatarGroup-gap));
+    --avatarGroup-mask-x: calc(var(--avatarGroup-item-size) * 1.5 - var(--avatarGroup-overlap));
+    -webkit-mask:
+      radial-gradient(
+        circle var(--avatarGroup-mask-radius) at var(--avatarGroup-mask-x) 50%,
+        transparent calc(var(--avatarGroup-mask-radius) - var(--avatarGroup-gap-feather)),
+        black calc(var(--avatarGroup-mask-radius) + var(--avatarGroup-gap-feather)));
+    mask:
+      radial-gradient(
+        circle var(--avatarGroup-mask-radius) at var(--avatarGroup-mask-x) 50%,
+        transparent calc(var(--avatarGroup-mask-radius) - var(--avatarGroup-gap-feather)),
+        black calc(var(--avatarGroup-mask-radius) + var(--avatarGroup-gap-feather)));
+  }
+  .saltAvatarGroup > :is(.saltAvatar, .saltAvatarGroupCount):has(+ :is(.saltAvatar-entity, .saltAvatarGroupCount-entity)) {
+    --avatarGroup-notch-corner: var(--saltAvatar-entity-borderRadius, var(--salt-palette-corner-weak, 0));
+    --avatarGroup-notch-radius: calc(var(--avatarGroup-notch-corner) + var(--avatarGroup-gap));
+    --avatarGroup-notch-x: calc(var(--avatarGroup-item-size) - var(--avatarGroup-overlap) - var(--avatarGroup-gap));
+    -webkit-mask:
+      linear-gradient(
+        to right,
+        black var(--avatarGroup-notch-x),
+        transparent var(--avatarGroup-notch-x)) 0 0 / 100% 100% no-repeat,
+      radial-gradient(
+        circle var(--avatarGroup-notch-radius) at 100% 100%,
+        transparent calc(100% - var(--avatarGroup-gap-feather)),
+        black 100%) var(--avatarGroup-notch-x) calc(-1 * var(--avatarGroup-gap)) / var(--avatarGroup-notch-radius) var(--avatarGroup-notch-radius) no-repeat,
+      radial-gradient(
+        circle var(--avatarGroup-notch-radius) at 100% 0%,
+        transparent calc(100% - var(--avatarGroup-gap-feather)),
+        black 100%) var(--avatarGroup-notch-x) calc(var(--avatarGroup-item-size) - var(--avatarGroup-notch-corner)) / var(--avatarGroup-notch-radius) var(--avatarGroup-notch-radius) no-repeat;
+    mask:
+      linear-gradient(
+        to right,
+        black var(--avatarGroup-notch-x),
+        transparent var(--avatarGroup-notch-x)) 0 0 / 100% 100% no-repeat,
+      radial-gradient(
+        circle var(--avatarGroup-notch-radius) at 100% 100%,
+        transparent calc(100% - var(--avatarGroup-gap-feather)),
+        black 100%) var(--avatarGroup-notch-x) calc(-1 * var(--avatarGroup-gap)) / var(--avatarGroup-notch-radius) var(--avatarGroup-notch-radius) no-repeat,
+      radial-gradient(
+        circle var(--avatarGroup-notch-radius) at 100% 0%,
+        transparent calc(100% - var(--avatarGroup-gap-feather)),
+        black 100%) var(--avatarGroup-notch-x) calc(var(--avatarGroup-item-size) - var(--avatarGroup-notch-corner)) / var(--avatarGroup-notch-radius) var(--avatarGroup-notch-radius) no-repeat;
+  }
+}
+@media (hover: hover) {
+  button.saltAvatarGroup:hover::after,
+  a.saltAvatarGroup:hover::after {
+    background-color: var(--salt-overlayable-background-hover);
+  }
+  button.saltAvatarGroup:disabled:hover::after {
+    background-color: transparent;
+  }
+}
+
+/* src/avatar-group/AvatarGroupCount.css */
+.saltAvatarGroupCount {
+  --avatarGroupCount-size: var(--avatarGroup-item-size, var(--salt-size-base));
+  color: var(--salt-content-bold-foreground);
+  background: var(--salt-sentiment-neutral-background);
+  font-family: var(--salt-text-notation-fontFamily);
+  font-size: calc(var(--salt-text-notation-fontSize) * var(--avatarGroup-size-multiplier, 1));
+  font-weight: var(--salt-text-notation-fontWeight);
+  line-height: var(--salt-text-notation-lineHeight);
+  width: var(--avatarGroupCount-size);
+  min-width: var(--avatarGroupCount-size);
+  height: var(--avatarGroupCount-size);
+  min-height: var(--avatarGroupCount-size);
+  border-radius: var(--salt-palette-corner-strongest, 50%);
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  user-select: none;
+}
+.saltAvatarGroupCount-entity {
+  border-radius: var(--salt-palette-corner-weak, 0);
+}
+
 /* src/button-bar/ButtonBar.css */
 .saltButtonBar {
   width: 100%;
@@ -1447,111 +1579,6 @@
   animation: var(--salt-animation-slide-out-top);
 }
 
-/* src/link-button/LinkButton.css */
-.saltLinkButton {
-  --linkButton-borderWidth: var(--salt-size-fixed-100);
-  align-items: var(--saltLinkButton-alignItems, center);
-  appearance: none;
-  background: var(--saltLinkButton-background, var(--linkButton-background));
-  border-color: var(--saltLinkButton-borderColor, var(--linkButton-borderColor, transparent));
-  border-style: var(--saltLinkButton-borderStyle, solid);
-  border-width: var(--saltLinkButton-borderWidth, var(--linkButton-borderWidth));
-  border-radius: var(--saltLinkButton-borderRadius, var(--salt-palette-corner-weak, 0));
-  color: var(--saltLinkButton-text-color, var(--linkButton-text-color));
-  display: inline-flex;
-  gap: var(--salt-spacing-50);
-  justify-content: var(--saltLinkButton-justifyContent, center);
-  font-size: var(--saltLinkButton-fontSize, var(--salt-text-fontSize));
-  font-family: var(--saltLinkButton-fontFamily, var(--salt-text-action-fontFamily));
-  line-height: var(--saltLinkButton-lineHeight, var(--salt-text-lineHeight));
-  letter-spacing: var(--saltLinkButton-letterSpacing, var(--salt-text-action-letterSpacing));
-  text-transform: var(--saltLinkButton-textTransform, var(--salt-text-action-textTransform));
-  padding: 0 var(--saltLinkButton-padding, calc(var(--salt-spacing-100) - var(--saltLinkButton-borderWidth, var(--linkButton-borderWidth))));
-  margin: var(--saltLinkButton-margin, 0);
-  height: var(--saltLinkButton-height, var(--salt-size-base));
-  min-width: var(--saltLinkButton-minWidth, unset);
-  position: relative;
-  text-align: var(--saltLinkButton-textAlign, var(--salt-text-action-textAlign));
-  text-decoration: var(--linkButton-textDecoration, var(--salt-text-link-textDecoration));
-  text-underline-offset: var(--salt-spacing-fixed-200);
-  transition: none;
-  width: var(--saltLinkButton-width, auto);
-  -webkit-appearance: none;
-  -webkit-tap-highlight-color: transparent;
-  font-weight: var(--saltLinkButton-fontWeight, var(--salt-text-action-fontWeight));
-}
-.saltLinkButton-underlineDefault {
-  --linkButton-textDecoration: var(--salt-text-link-textDecoration);
-  --linkButton-textDecoration-hover: var(--salt-typography-textDecoration-none);
-  --linkButton-textDecoration-focus: var(--linkButton-textDecoration-hover);
-}
-.saltLinkButton-underlineNever {
-  --linkButton-textDecoration: var(--salt-typography-textDecoration-none);
-  --linkButton-textDecoration-hover: var(--salt-typography-textDecoration-none);
-  --linkButton-textDecoration-focus: var(--salt-typography-textDecoration-none);
-}
-.saltLinkButton-externalLinkADA {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  clip-path: inset(50%);
-  white-space: nowrap;
-  border: 0;
-  user-select: none;
-  -webkit-user-select: none;
-}
-@media (hover: hover) {
-  .saltLinkButton:hover {
-    background: var(--saltLinkButton-background-hover, var(--linkButton-background-hover));
-    color: var(--saltLinkButton-text-color-hover, var(--linkButton-text-color-hover));
-    border-color: var(--saltLinkButton-borderColor-hover, var(--linkButton-borderColor-hover));
-    cursor: var(--salt-cursor-hover);
-    text-decoration: var(--linkButton-textDecoration-hover, var(--salt-typography-textDecoration-none));
-  }
-}
-.saltLinkButton:focus-visible {
-  outline: var(--salt-focused-outline);
-  background: var(--saltLinkButton-background-hover, var(--linkButton-background-hover));
-  color: var(--saltLinkButton-text-color-hover, var(--linkButton-text-color-hover));
-  border-color: var(--saltLinkButton-borderColor-hover, var(--linkButton-borderColor-hover));
-  text-decoration: var(--linkButton-textDecoration-focus, var(--salt-typography-textDecoration-none));
-}
-.saltLinkButton.saltLinkButton-active:focus-visible,
-.saltLinkButton:focus-visible:active,
-.saltLinkButton:active,
-.saltLinkButton.saltLinkButton-active {
-  background: var(--saltLinkButton-background-active, var(--linkButton-background-active));
-  color: var(--saltLinkButton-text-color-active, var(--linkButton-text-color-active));
-  border-color: var(--saltLinkButton-borderColor-active, var(--linkButton-borderColor-active));
-  cursor: var(--salt-cursor-active);
-}
-.saltLinkButton-neutral {
-  --linkButton-text-color: var(--salt-actionable-subtle-foreground);
-  --linkButton-text-color-hover: var(--salt-actionable-subtle-foreground-hover);
-  --linkButton-text-color-active: var(--salt-actionable-subtle-foreground-active);
-  --linkButton-background: var(--salt-actionable-subtle-background);
-  --linkButton-background-hover: var(--salt-actionable-subtle-background-hover);
-  --linkButton-background-active: var(--salt-actionable-subtle-background-active);
-  --linkButton-borderColor: var(--salt-actionable-subtle-borderColor);
-  --linkButton-borderColor-hover: var(--salt-actionable-subtle-borderColor-hover);
-  --linkButton-borderColor-active: var(--salt-actionable-subtle-borderColor-active);
-}
-.saltLinkButton-accented {
-  --linkButton-text-color: var(--salt-actionable-accented-subtle-foreground);
-  --linkButton-text-color-hover: var(--salt-actionable-accented-subtle-foreground-hover);
-  --linkButton-text-color-active: var(--salt-actionable-accented-subtle-foreground-active);
-  --linkButton-background: var(--salt-actionable-accented-subtle-background);
-  --linkButton-background-hover: var(--salt-actionable-accented-subtle-background-hover);
-  --linkButton-background-active: var(--salt-actionable-accented-subtle-background-active);
-  --linkButton-borderColor: var(--salt-actionable-accented-subtle-borderColor);
-  --linkButton-borderColor-hover: var(--salt-actionable-accented-subtle-borderColor-hover);
-  --linkButton-borderColor-active: var(--salt-actionable-accented-subtle-borderColor-active);
-}
-
 /* src/list/Highlighter.css */
 .saltHighlighter-highlight {
   font-weight: var(--salt-text-fontWeight-strong);
@@ -3214,4 +3241,4 @@
   margin: calc(var(--salt-spacing-100) / 2) 0;
 }
 
-/* src/0a27e0e7-a1ce-4688-bb7b-41bcc81b1e44.css */
+/* src/365b7942-9a94-47d3-8859-a0898395c7d6.css */

package/dist-cjs/avatar-group/AvatarGroup.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltAvatarGroup {\n  --avatarGroup-overlap: var(--saltAvatarGroup-overlap, calc(var(--salt-size-base) * 0.25));\n  --avatarGroup-gap: var(--saltAvatarGroup-gap, var(--salt-size-fixed-100));\n  --avatarGroup-gap-feather: var(--saltAvatarGroup-gap-feather, 0.1px);\n  --avatarGroup-size-multiplier: var(--saltAvatarGroup-size-multiplier, 1);\n  --avatarGroup-item-size: var(--saltAvatar-size, calc(var(--salt-size-base) * var(--avatarGroup-size-multiplier)));\n  display: flex;\n  padding: 0;\n  border: none;\n  background-color: transparent;\n  position: relative;\n  border-radius: var(--salt-palette-corner-strongest, 50%);\n}\n\n.saltAvatarGroup .saltAvatar {\n  --avatar-size-multiplier: var(--avatarGroup-size-multiplier);\n}\n\n.saltAvatarGroup > :is(.saltAvatar, .saltAvatarGroupCount):not(:first-child) {\n  margin-left: calc(-1 * var(--avatarGroup-overlap));\n}\n\n.saltAvatarGroup:focus-visible {\n  outline-offset: var(--salt-spacing-fixed-200);\n}\n\n.saltAvatarGroup::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  pointer-events: none;\n  background-color: transparent;\n}\n\nbutton.saltAvatarGroup,\na.saltAvatarGroup {\n  cursor: var(--salt-cursor-hover);\n}\n\nbutton.saltAvatarGroup:disabled {\n  cursor: var(--salt-cursor-disabled);\n}\n\n/* Fallback separator when :has() is unsupported. */\n.saltAvatarGroup > :is(.saltAvatar, .saltAvatarGroupCount):not(:first-child)::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  box-sizing: border-box;\n  border-radius: inherit;\n  border: var(--avatarGroup-gap) var(--salt-borderStyle-solid) var(--salt-container-primary-background);\n  pointer-events: none;\n}\n\n@supports selector(:has(*)) {\n  .saltAvatarGroup > :is(.saltAvatar, .saltAvatarGroupCount):not(:first-child)::after {\n    border: none;\n  }\n\n  /* Match the cut to the following item's shape. */\n  .saltAvatarGroup > :is(.saltAvatar, .saltAvatarGroupCount):has(+ :is(.saltAvatar, .saltAvatarGroupCount):not(.saltAvatar-entity, .saltAvatarGroupCount-entity)) {\n    --avatarGroup-mask-radius: calc(var(--avatarGroup-item-size) / 2 + var(--avatarGroup-gap));\n    --avatarGroup-mask-x: calc(var(--avatarGroup-item-size) * 1.5 - var(--avatarGroup-overlap));\n    -webkit-mask: radial-gradient(\n      circle var(--avatarGroup-mask-radius) at var(--avatarGroup-mask-x) 50%,\n      transparent calc(var(--avatarGroup-mask-radius) - var(--avatarGroup-gap-feather)),\n      black calc(var(--avatarGroup-mask-radius) + var(--avatarGroup-gap-feather))\n    );\n    mask: radial-gradient(\n      circle var(--avatarGroup-mask-radius) at var(--avatarGroup-mask-x) 50%,\n      transparent calc(var(--avatarGroup-mask-radius) - var(--avatarGroup-gap-feather)),\n      black calc(var(--avatarGroup-mask-radius) + var(--avatarGroup-gap-feather))\n    );\n  }\n\n  /* Square neighbours need a rounded-rectangle notch. */\n  .saltAvatarGroup > :is(.saltAvatar, .saltAvatarGroupCount):has(+ :is(.saltAvatar-entity, .saltAvatarGroupCount-entity)) {\n    --avatarGroup-notch-corner: var(--saltAvatar-entity-borderRadius, var(--salt-palette-corner-weak, 0));\n    --avatarGroup-notch-radius: calc(var(--avatarGroup-notch-corner) + var(--avatarGroup-gap));\n    --avatarGroup-notch-x: calc(var(--avatarGroup-item-size) - var(--avatarGroup-overlap) - var(--avatarGroup-gap));\n    -webkit-mask:\n      linear-gradient(to right, black var(--avatarGroup-notch-x), transparent var(--avatarGroup-notch-x)) 0 0 / 100% 100% no-repeat,\n      radial-gradient(circle var(--avatarGroup-notch-radius) at 100% 100%, transparent calc(100% - var(--avatarGroup-gap-feather)), black 100%) var(--avatarGroup-notch-x)\n      calc(-1 * var(--avatarGroup-gap)) / var(--avatarGroup-notch-radius) var(--avatarGroup-notch-radius) no-repeat,\n      radial-gradient(circle var(--avatarGroup-notch-radius) at 100% 0%, transparent calc(100% - var(--avatarGroup-gap-feather)), black 100%) var(--avatarGroup-notch-x)\n      calc(var(--avatarGroup-item-size) - var(--avatarGroup-notch-corner)) / var(--avatarGroup-notch-radius) var(--avatarGroup-notch-radius) no-repeat;\n    mask:\n      linear-gradient(to right, black var(--avatarGroup-notch-x), transparent var(--avatarGroup-notch-x)) 0 0 / 100% 100% no-repeat,\n      radial-gradient(circle var(--avatarGroup-notch-radius) at 100% 100%, transparent calc(100% - var(--avatarGroup-gap-feather)), black 100%) var(--avatarGroup-notch-x)\n      calc(-1 * var(--avatarGroup-gap)) / var(--avatarGroup-notch-radius) var(--avatarGroup-notch-radius) no-repeat,\n      radial-gradient(circle var(--avatarGroup-notch-radius) at 100% 0%, transparent calc(100% - var(--avatarGroup-gap-feather)), black 100%) var(--avatarGroup-notch-x)\n      calc(var(--avatarGroup-item-size) - var(--avatarGroup-notch-corner)) / var(--avatarGroup-notch-radius) var(--avatarGroup-notch-radius) no-repeat;\n  }\n}\n\n@media (hover: hover) {\n  button.saltAvatarGroup:hover::after,\n  a.saltAvatarGroup:hover::after {\n    background-color: var(--salt-overlayable-background-hover);\n  }\n\n  button.saltAvatarGroup:disabled:hover::after {\n    background-color: transparent;\n  }\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=AvatarGroup.css.js.map

package/dist-cjs/avatar-group/AvatarGroup.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarGroup.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist-cjs/avatar-group/AvatarGroup.js

@@ -0,0 +1,31 @@
+'use strict';
+
+var core = require('@salt-ds/core');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var clsx = require('clsx');
+var react = require('react');
+var AvatarGroup$1 = require('./AvatarGroup.css.js');
+
+const withBaseName = core.makePrefixer("saltAvatarGroup");
+const AvatarGroup = react.forwardRef(
+  function AvatarGroup2({ className, render, ...rest }, ref) {
+    const targetWindow = window.useWindow();
+    styles.useComponentCssInjection({
+      testId: "salt-avatar-group",
+      css: AvatarGroup$1,
+      window: targetWindow
+    });
+    const roleProps = render ? {} : { role: "group" };
+    return core.renderProps("div", {
+      ref,
+      className: clsx.clsx(withBaseName(), className),
+      render,
+      ...roleProps,
+      ...rest
+    });
+  }
+);
+
+exports.AvatarGroup = AvatarGroup;
+//# sourceMappingURL=AvatarGroup.js.map

package/dist-cjs/avatar-group/AvatarGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarGroup.js","sources":["../src/avatar-group/AvatarGroup.tsx"],"sourcesContent":["import { makePrefixer, type RenderPropsType, renderProps } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type ReactNode,\n} from \"react\";\n\nimport avatarGroupCss from \"./AvatarGroup.css\";\n\nexport interface AvatarGroupProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The children of the `AvatarGroup`. Should be `Avatar` components, optionally\n   * followed by an `AvatarGroupCount` to represent hidden members.\n   */\n  children?: ReactNode;\n  /**\n   * Render prop to enable customization of the avatar group root element.\n   */\n  render?: RenderPropsType[\"render\"];\n}\n\nconst withBaseName = makePrefixer(\"saltAvatarGroup\");\n\nexport const AvatarGroup = forwardRef<HTMLDivElement, AvatarGroupProps>(\n  function AvatarGroup({ className, render, ...rest }, ref) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-avatar-group\",\n      css: avatarGroupCss,\n      window: targetWindow,\n    });\n\n    const roleProps = render ? {} : { role: \"group\" };\n\n    return renderProps(\"div\", {\n      ref,\n      className: clsx(withBaseName(), className),\n      render,\n      ...roleProps,\n      ...rest,\n    });\n  },\n);\n"],"names":["makePrefixer","forwardRef","AvatarGroup","useWindow","useComponentCssInjection","avatarGroupCss","renderProps","clsx"],"mappings":";;;;;;;;;AAwBA,MAAM,YAAA,GAAeA,kBAAa,iBAAiB,CAAA;AAE5C,MAAM,WAAA,GAAcC,gBAAA;AAAA,EACzB,SAASC,aAAY,EAAE,SAAA,EAAW,QAAQ,GAAG,IAAA,IAAQ,GAAA,EAAK;AACxD,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,mBAAA;AAAA,MACR,GAAA,EAAKC,aAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,YAAY,MAAA,GAAS,EAAC,GAAI,EAAE,MAAM,OAAA,EAAQ;AAEhD,IAAA,OAAOC,iBAAY,KAAA,EAAO;AAAA,MACxB,GAAA;AAAA,MACA,SAAA,EAAWC,SAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,MACzC,MAAA;AAAA,MACA,GAAG,SAAA;AAAA,MACH,GAAG;AAAA,KACJ,CAAA;AAAA,EACH;AACF;;;;"}

package/dist-cjs/avatar-group/AvatarGroupCount.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltAvatarGroupCount {\n  --avatarGroupCount-size: var(--avatarGroup-item-size, var(--salt-size-base));\n  color: var(--salt-content-bold-foreground);\n  background: var(--salt-sentiment-neutral-background);\n  font-family: var(--salt-text-notation-fontFamily);\n  font-size: calc(var(--salt-text-notation-fontSize) * var(--avatarGroup-size-multiplier, 1));\n  font-weight: var(--salt-text-notation-fontWeight);\n  line-height: var(--salt-text-notation-lineHeight);\n  width: var(--avatarGroupCount-size);\n  min-width: var(--avatarGroupCount-size);\n  height: var(--avatarGroupCount-size);\n  min-height: var(--avatarGroupCount-size);\n  border-radius: var(--salt-palette-corner-strongest, 50%);\n  position: relative;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  overflow: hidden;\n  user-select: none;\n}\n\n.saltAvatarGroupCount-entity {\n  border-radius: var(--salt-palette-corner-weak, 0);\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=AvatarGroupCount.css.js.map

package/dist-cjs/avatar-group/AvatarGroupCount.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarGroupCount.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist-cjs/avatar-group/AvatarGroupCount.js

@@ -0,0 +1,39 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var clsx = require('clsx');
+var react = require('react');
+var AvatarGroupCount$1 = require('./AvatarGroupCount.css.js');
+
+const withBaseName = core.makePrefixer("saltAvatarGroupCount");
+const AvatarGroupCount = react.forwardRef(function AvatarGroupCount2({
+  className,
+  count,
+  kind = "person",
+  "aria-label": ariaLabel = `${count} more`,
+  ...rest
+}, ref) {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "salt-avatar-group-count",
+    css: AvatarGroupCount$1,
+    window: targetWindow
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      role: "img",
+      "aria-label": ariaLabel,
+      className: clsx.clsx(withBaseName(), withBaseName(kind), className),
+      ...rest,
+      children: `+${count}`
+    }
+  );
+});
+
+exports.AvatarGroupCount = AvatarGroupCount;
+//# sourceMappingURL=AvatarGroupCount.js.map

package/dist-cjs/avatar-group/AvatarGroupCount.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarGroupCount.js","sources":["../src/avatar-group/AvatarGroupCount.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef } from \"react\";\n\nimport avatarGroupCountCss from \"./AvatarGroupCount.css\";\n\nexport interface AvatarGroupCountProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> {\n  /**\n   * The number of members the count represents. Rendered as `+{count}`, and used\n   * as the default `aria-label` of `{count} more`.\n   */\n  count: number;\n  /**\n   * Matches the shape of the avatars the count summarizes.\n   *\n   * @default \"person\"\n   */\n  kind?: \"person\" | \"entity\";\n}\n\nconst withBaseName = makePrefixer(\"saltAvatarGroupCount\");\n\nexport const AvatarGroupCount = forwardRef<\n  HTMLDivElement,\n  AvatarGroupCountProps\n>(function AvatarGroupCount(\n  {\n    className,\n    count,\n    kind = \"person\",\n    \"aria-label\": ariaLabel = `${count} more`,\n    ...rest\n  },\n  ref,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-avatar-group-count\",\n    css: avatarGroupCountCss,\n    window: targetWindow,\n  });\n\n  return (\n    <div\n      ref={ref}\n      role=\"img\"\n      aria-label={ariaLabel}\n      className={clsx(withBaseName(), withBaseName(kind), className)}\n      {...rest}\n    >\n      {`+${count}`}\n    </div>\n  );\n});\n"],"names":["makePrefixer","forwardRef","AvatarGroupCount","useWindow","useComponentCssInjection","avatarGroupCountCss","jsx","clsx"],"mappings":";;;;;;;;;;AAuBA,MAAM,YAAA,GAAeA,kBAAa,sBAAsB,CAAA;AAEjD,MAAM,gBAAA,GAAmBC,gBAAA,CAG9B,SAASC,iBAAAA,CACT;AAAA,EACE,SAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA,GAAO,QAAA;AAAA,EACP,YAAA,EAAc,SAAA,GAAY,CAAA,EAAG,KAAK,CAAA,KAAA,CAAA;AAAA,EAClC,GAAG;AACL,CAAA,EACA,GAAA,EACA;AACA,EAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,EAAAC,+BAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,yBAAA;AAAA,IACR,GAAA,EAAKC,kBAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,uBACEC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,IAAA,EAAK,KAAA;AAAA,MACL,YAAA,EAAY,SAAA;AAAA,MACZ,WAAWC,SAAA,CAAK,YAAA,IAAgB,YAAA,CAAa,IAAI,GAAG,SAAS,CAAA;AAAA,MAC5D,GAAG,IAAA;AAAA,MAEH,cAAI,KAAK,CAAA;AAAA;AAAA,GACZ;AAEJ,CAAC;;;;"}

package/dist-cjs/color-chooser/DictTabs.js

@@ -26,7 +26,15 @@ const DictTabs = ({
         className: clsx.clsx(withBaseName("wrapper")),
         activeTabIndex: activeTab,
         onActiveChange: (tabIndex) => onTabClick(tabIndex),
-        children: [...Object.keys(tabs)].map((label, i) => /* @__PURE__ */ jsxRuntime.jsx(Tab.Tab, { className: clsx.clsx(withBaseName("text")), label }, i))
+        children: [...Object.keys(tabs)].map((label, i) => /* @__PURE__ */ jsxRuntime.jsx(
+          Tab.Tab,
+          {
+            "aria-label": label,
+            className: clsx.clsx(withBaseName("text")),
+            label
+          },
+          i
+        ))
       }
     ),
     [...Object.values(tabs)].map((tab, idx) => {

package/dist-cjs/color-chooser/DictTabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"DictTabs.js","sources":["../src/color-chooser/DictTabs.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { Tab, Tabstrip, type TabstripProps } from \"../tabs\";\nimport type { ColorPicker, ColorPickerProps } from \"./ColorPicker\";\nimport type { Swatches, SwatchesTabProps } from \"./Swatches\";\n\nconst withBaseName = makePrefixer(\"saltColorChooserDictTabs\");\n\nexport type ColorChooserTabs = {\n  Swatches?: {\n    Component: typeof Swatches;\n    props: SwatchesTabProps;\n  };\n  \"Color Picker\"?: {\n    Component: typeof ColorPicker;\n    props: ColorPickerProps;\n  };\n};\n\nexport interface DictTabsProps\n  extends Omit<TabstripProps, \"tabs\" | \"renderContent\" | \"classes\"> {\n  hexValue: string | undefined;\n  tabs: ColorChooserTabs;\n  onTabClick: (index: number) => void;\n  activeTab: number;\n}\n\nexport const DictTabs = ({\n  tabs,\n  hexValue,\n  onTabClick,\n  activeTab,\n  ...props\n}: DictTabsProps): JSX.Element => {\n  return (\n    <div>\n      <Tabstrip\n        {...props}\n        data-testid=\"color-chooser-tabstrip\"\n        className={clsx(withBaseName(\"wrapper\"))}\n        activeTabIndex={activeTab}\n        onActiveChange={(tabIndex: number) => onTabClick(tabIndex)}\n      >\n        {[...Object.keys(tabs)].map((label, i) => (\n          <Tab className={clsx(withBaseName(\"text\"))} label={label} key={i} />\n        ))}\n      </Tabstrip>\n      {[...Object.values(tabs)].map((tab, idx) => {\n        if (!tab) {\n          return null;\n        }\n        const TabComponent: typeof Swatches | typeof ColorPicker =\n          tab?.Component;\n\n        return (\n          <div\n            aria-hidden={activeTab !== idx}\n            hidden={activeTab !== idx}\n            key={idx}\n          >\n            {tab?.props ? (\n              // @ts-expect-error\n              <TabComponent {...tab?.props} />\n            ) : null}\n          </div>\n        );\n      })}\n    </div>\n  );\n};\n"],"names":["makePrefixer","jsx","Tabstrip","clsx","Tab"],"mappings":";;;;;;;;;;;AAMA,MAAM,YAAA,GAAeA,kBAAa,0BAA0B,CAAA;AAqBrD,MAAM,WAAW,CAAC;AAAA,EACvB,IAAA;AAAA,EACA,QAAA;AAAA,EACA,UAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAkC;AAChC,EAAA,uCACG,KAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAAC,cAAA;AAAA,MAACC,iBAAA;AAAA,MAAA;AAAA,QACE,GAAG,KAAA;AAAA,QACJ,aAAA,EAAY,wBAAA;AAAA,QACZ,SAAA,EAAWC,SAAA,CAAK,YAAA,CAAa,SAAS,CAAC,CAAA;AAAA,QACvC,cAAA,EAAgB,SAAA;AAAA,QAChB,cAAA,EAAgB,CAAC,QAAA,KAAqB,UAAA,CAAW,QAAQ,CAAA;AAAA,QAExD,QAAA,EAAA,CAAC,GAAG,MAAA,CAAO,IAAA,CAAK,IAAI,CAAC,CAAA,CAAE,IAAI,CAAC,KAAA,EAAO,sBAClCF,cAAA,CAACG,OAAA,EAAA,EAAI,WAAWD,SAAA,CAAK,YAAA,CAAa,MAAM,CAAC,CAAA,EAAG,KAAA,EAAA,EAAmB,CAAG,CACnE;AAAA;AAAA,KACH;AAAA,IACC,CAAC,GAAG,MAAA,CAAO,MAAA,CAAO,IAAI,CAAC,CAAA,CAAE,GAAA,CAAI,CAAC,GAAA,EAAK,GAAA,KAAQ;AAC1C,MAAA,IAAI,CAAC,GAAA,EAAK;AACR,QAAA,OAAO,IAAA;AAAA,MACT;AACA,MAAA,MAAM,eACJ,GAAA,IAAA,IAAA,GAAA,MAAA,GAAA,GAAA,CAAK,SAAA;AAEP,MAAA,uBACEF,cAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,eAAa,SAAA,KAAc,GAAA;AAAA,UAC3B,QAAQ,SAAA,KAAc,GAAA;AAAA,UAGrB,QAAA,EAAA,CAAA,GAAA,IAAA,IAAA,GAAA,MAAA,GAAA,GAAA,CAAK,KAAA;AAAA;AAAA,4BAEJA,cAAA,CAAC,YAAA,EAAA,EAAc,GAAG,GAAA,IAAA,IAAA,GAAA,MAAA,GAAA,GAAA,CAAK,KAAA,EAAO;AAAA,cAC5B;AAAA,SAAA;AAAA,QALC;AAAA,OAMP;AAAA,IAEJ,CAAC;AAAA,GAAA,EACH,CAAA;AAEJ;;;;"}
+{"version":3,"file":"DictTabs.js","sources":["../src/color-chooser/DictTabs.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { Tab, Tabstrip, type TabstripProps } from \"../tabs\";\nimport type { ColorPicker, ColorPickerProps } from \"./ColorPicker\";\nimport type { Swatches, SwatchesTabProps } from \"./Swatches\";\n\nconst withBaseName = makePrefixer(\"saltColorChooserDictTabs\");\n\nexport type ColorChooserTabs = {\n  Swatches?: {\n    Component: typeof Swatches;\n    props: SwatchesTabProps;\n  };\n  \"Color Picker\"?: {\n    Component: typeof ColorPicker;\n    props: ColorPickerProps;\n  };\n};\n\nexport interface DictTabsProps\n  extends Omit<TabstripProps, \"tabs\" | \"renderContent\" | \"classes\"> {\n  hexValue: string | undefined;\n  tabs: ColorChooserTabs;\n  onTabClick: (index: number) => void;\n  activeTab: number;\n}\n\nexport const DictTabs = ({\n  tabs,\n  hexValue,\n  onTabClick,\n  activeTab,\n  ...props\n}: DictTabsProps): JSX.Element => {\n  return (\n    <div>\n      <Tabstrip\n        {...props}\n        data-testid=\"color-chooser-tabstrip\"\n        className={clsx(withBaseName(\"wrapper\"))}\n        activeTabIndex={activeTab}\n        onActiveChange={(tabIndex: number) => onTabClick(tabIndex)}\n      >\n        {[...Object.keys(tabs)].map((label, i) => (\n          <Tab\n            aria-label={label}\n            className={clsx(withBaseName(\"text\"))}\n            label={label}\n            key={i}\n          />\n        ))}\n      </Tabstrip>\n      {[...Object.values(tabs)].map((tab, idx) => {\n        if (!tab) {\n          return null;\n        }\n        const TabComponent: typeof Swatches | typeof ColorPicker =\n          tab?.Component;\n\n        return (\n          <div\n            aria-hidden={activeTab !== idx}\n            hidden={activeTab !== idx}\n            key={idx}\n          >\n            {tab?.props ? (\n              // @ts-expect-error\n              <TabComponent {...tab?.props} />\n            ) : null}\n          </div>\n        );\n      })}\n    </div>\n  );\n};\n"],"names":["makePrefixer","jsx","Tabstrip","clsx","Tab"],"mappings":";;;;;;;;;;;AAMA,MAAM,YAAA,GAAeA,kBAAa,0BAA0B,CAAA;AAqBrD,MAAM,WAAW,CAAC;AAAA,EACvB,IAAA;AAAA,EACA,QAAA;AAAA,EACA,UAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAkC;AAChC,EAAA,uCACG,KAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAAC,cAAA;AAAA,MAACC,iBAAA;AAAA,MAAA;AAAA,QACE,GAAG,KAAA;AAAA,QACJ,aAAA,EAAY,wBAAA;AAAA,QACZ,SAAA,EAAWC,SAAA,CAAK,YAAA,CAAa,SAAS,CAAC,CAAA;AAAA,QACvC,cAAA,EAAgB,SAAA;AAAA,QAChB,cAAA,EAAgB,CAAC,QAAA,KAAqB,UAAA,CAAW,QAAQ,CAAA;AAAA,QAExD,QAAA,EAAA,CAAC,GAAG,MAAA,CAAO,IAAA,CAAK,IAAI,CAAC,CAAA,CAAE,GAAA,CAAI,CAAC,KAAA,EAAO,CAAA,qBAClCF,cAAA;AAAA,UAACG,OAAA;AAAA,UAAA;AAAA,YACC,YAAA,EAAY,KAAA;AAAA,YACZ,SAAA,EAAWD,SAAA,CAAK,YAAA,CAAa,MAAM,CAAC,CAAA;AAAA,YACpC;AAAA,WAAA;AAAA,UACK;AAAA,SAER;AAAA;AAAA,KACH;AAAA,IACC,CAAC,GAAG,MAAA,CAAO,MAAA,CAAO,IAAI,CAAC,CAAA,CAAE,GAAA,CAAI,CAAC,GAAA,EAAK,GAAA,KAAQ;AAC1C,MAAA,IAAI,CAAC,GAAA,EAAK;AACR,QAAA,OAAO,IAAA;AAAA,MACT;AACA,MAAA,MAAM,eACJ,GAAA,IAAA,IAAA,GAAA,MAAA,GAAA,GAAA,CAAK,SAAA;AAEP,MAAA,uBACEF,cAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,eAAa,SAAA,KAAc,GAAA;AAAA,UAC3B,QAAQ,SAAA,KAAc,GAAA;AAAA,UAGrB,QAAA,EAAA,CAAA,GAAA,IAAA,IAAA,GAAA,MAAA,GAAA,GAAA,CAAK,KAAA;AAAA;AAAA,4BAEJA,cAAA,CAAC,YAAA,EAAA,EAAc,GAAG,GAAA,IAAA,IAAA,GAAA,MAAA,GAAA,GAAA,CAAK,KAAA,EAAO;AAAA,cAC5B;AAAA,SAAA;AAAA,QALC;AAAA,OAMP;AAAA,IAEJ,CAAC;AAAA,GAAA,EACH,CAAA;AAEJ;;;;"}

package/dist-cjs/common-hooks/useSelection.js.map

@@ -1 +1 @@
-{"version":3,"file":"useSelection.js","sources":["../src/common-hooks/useSelection.ts"],"sourcesContent":["import { useControlled } from \"@salt-ds/core\";\nimport {\n  type KeyboardEvent,\n  type MouseEvent,\n  type SyntheticEvent,\n  useCallback,\n  useRef,\n} from \"react\";\nimport type { CollectionItem } from \"./collectionTypes\";\nimport { closestListItemIndex } from \"./list-dom-utils\";\nimport type {\n  SelectionHookProps,\n  SelectionHookResult,\n  SelectionStrategy,\n  SingleSelectionStrategy,\n} from \"./selectionTypes\";\n\nexport const CHECKBOX = \"checkbox\";\n\nexport const GROUP_SELECTION_NONE = \"none\";\nexport const GROUP_SELECTION_SINGLE = \"single\";\nexport const GROUP_SELECTION_CASCADE = \"cascade\";\n\nexport type GroupSelectionMode = \"none\" | \"single\" | \"cascade\";\n\nconst defaultSelectionKeys = [\"Enter\", \" \"];\n\nconst isSelectable = (item?: CollectionItem<unknown>) =>\n  item && item.disabled !== true && item.selectable !== false;\n\nconst byItemIndex = (\n  i1: CollectionItem<unknown>,\n  i2: CollectionItem<unknown>,\n) => (i1.index ?? 0) - (i2.index ?? 0);\n\nexport const groupSelectionEnabled = (\n  groupSelection: GroupSelectionMode,\n): boolean => groupSelection && groupSelection !== GROUP_SELECTION_NONE;\n\nexport const useSelection = <\n  Item,\n  Selection extends SelectionStrategy = \"default\",\n>({\n  defaultSelected,\n  disableSelection = false,\n  // groupSelection = GROUP_SELECTION_NONE,\n  highlightedIdx,\n  indexPositions,\n  label: _label = \"\",\n  onSelect,\n  onSelectionChange,\n  selected: selectedProp,\n  selectionStrategy,\n  selectionKeys = defaultSelectionKeys,\n  tabToSelect,\n}: SelectionHookProps<Item, Selection>): SelectionHookResult<\n  Item,\n  Selection\n> => {\n  type collectionItem = CollectionItem<Item>;\n\n  const isDeselectable = selectionStrategy === \"deselectable\";\n  const isMultipleSelect = selectionStrategy === \"multiple\";\n  const isExtendedSelect = selectionStrategy === \"extended\";\n\n  const lastActive = useRef(-1);\n\n  const isSelectionEvent = useCallback(\n    (evt: KeyboardEvent) => selectionKeys.includes(evt.key),\n    [selectionKeys],\n  );\n\n  const emptyValue = useCallback(<\n    Item,\n  >(): Selection extends SingleSelectionStrategy\n    ? null\n    : CollectionItem<Item>[] => {\n    type returnType = Selection extends SingleSelectionStrategy\n      ? null\n      : CollectionItem<Item>[];\n    return isMultipleSelect || isExtendedSelect\n      ? ([] as unknown as returnType)\n      : (null as returnType);\n  }, [isMultipleSelect, isExtendedSelect]);\n\n  const [selected, setSelected] = useControlled<\n    Selection extends SingleSelectionStrategy\n      ? CollectionItem<Item> | null\n      : CollectionItem<Item>[]\n  >({\n    controlled: selectedProp,\n    default: defaultSelected ?? emptyValue(),\n    name: \"UseSelection\",\n    state: \"selected\",\n  });\n\n  const isItemSelected = useCallback(\n    (item: collectionItem) => {\n      return Array.isArray(selected)\n        ? selected.includes(item)\n        : selected === item;\n    },\n    [selected],\n  );\n\n  const selectDefault = useCallback((item: collectionItem) => item, []);\n  const selectDeselectable = useCallback(\n    (item: collectionItem) => (isItemSelected(item) ? null : item),\n    [isItemSelected],\n  );\n  const selectMultiple = useCallback(\n    (item: collectionItem) => {\n      const nextItems = isItemSelected(item)\n        ? (selected as collectionItem[]).filter((i) => i !== item)\n        : (selected as collectionItem[]).concat(item);\n      nextItems.sort(byItemIndex);\n      return nextItems;\n    },\n    [isItemSelected, selected],\n  );\n  const selectRange = useCallback(\n    (idx: number, preserveExistingSelection?: boolean) => {\n      const currentSelection = preserveExistingSelection\n        ? (selected as collectionItem[])\n        : ([] as collectionItem[]);\n\n      const [lastSelectedItem] = (selected as collectionItem[]).slice(-1);\n      const lastSelectedItemIndex = lastSelectedItem\n        ? indexPositions.indexOf(lastSelectedItem)\n        : 0;\n\n      const startRegion = Math.min(idx, lastSelectedItemIndex);\n      const endRegion = Math.max(idx, lastSelectedItemIndex);\n      const rangeSelection = indexPositions.slice(startRegion, endRegion + 1);\n      // concat the current selection with a new selection and remove duplicates for overlaps\n      const nextItems = [...new Set([...currentSelection, ...rangeSelection])];\n      nextItems.sort(byItemIndex);\n      return nextItems;\n    },\n    [indexPositions, selected],\n  );\n\n  const selectItemAtIndex = useCallback(\n    (\n      evt: SyntheticEvent,\n      idx: number,\n      item: collectionItem,\n      rangeSelect: boolean,\n      preserveExistingSelection?: boolean,\n    ) => {\n      type returnType = Selection extends SingleSelectionStrategy\n        ? CollectionItem<Item> | null\n        : CollectionItem<Item>[];\n      let newSelected: returnType;\n      if (isMultipleSelect) {\n        newSelected = selectMultiple(item) as returnType;\n      } else if (isExtendedSelect) {\n        if (preserveExistingSelection && !rangeSelect) {\n          newSelected = selectMultiple(item) as returnType;\n        } else if (rangeSelect) {\n          newSelected = selectRange(\n            idx,\n            preserveExistingSelection,\n          ) as returnType;\n        } else {\n          newSelected = [item] as returnType;\n        }\n      } else if (isDeselectable) {\n        newSelected = selectDeselectable(item) as returnType;\n      } else {\n        newSelected = selectDefault(item) as returnType;\n      }\n\n      if (newSelected !== selected) {\n        setSelected(newSelected);\n      }\n\n      // We fire onSelect irrespective of whether selection changes\n      onSelect?.(evt, item);\n\n      if (newSelected !== selected) {\n        if (onSelectionChange) {\n          onSelectionChange(evt, newSelected);\n        }\n      }\n    },\n    [\n      isMultipleSelect,\n      isExtendedSelect,\n      isDeselectable,\n      selected,\n      onSelect,\n      selectMultiple,\n      selectRange,\n      selectDeselectable,\n      selectDefault,\n      onSelectionChange,\n    ],\n  );\n\n  const handleKeyDown = useCallback(\n    (evt: KeyboardEvent) => {\n      const item = indexPositions[highlightedIdx];\n      if (isSelectable(item)) {\n        if (isSelectionEvent(evt) || (tabToSelect && evt.key === \"Tab\")) {\n          // We do not inhibit Tab behaviour, if we are selecting on Tab then we apply\n          // selection as a side effect of the Tab, not as a replacement for Tabbing.\n          if (evt.key !== \"Tab\") {\n            evt.preventDefault();\n          }\n          selectItemAtIndex(\n            evt,\n            highlightedIdx,\n            item,\n            false,\n            evt.ctrlKey || evt.metaKey,\n          );\n          if (isExtendedSelect) {\n            lastActive.current = highlightedIdx;\n          }\n        }\n      }\n    },\n    [\n      indexPositions,\n      highlightedIdx,\n      isSelectionEvent,\n      tabToSelect,\n      selectItemAtIndex,\n      isExtendedSelect,\n    ],\n  );\n\n  const handleKeyboardNavigation = useCallback(\n    (evt: KeyboardEvent, currentIndex: number) => {\n      if (isExtendedSelect && evt.shiftKey) {\n        const item = indexPositions[currentIndex];\n        if (isSelectable(item)) {\n          selectItemAtIndex(evt, currentIndex, item, true);\n        }\n      }\n    },\n    [isExtendedSelect, indexPositions, selectItemAtIndex],\n  );\n\n  const handleClick = useCallback(\n    (evt: MouseEvent) => {\n      // Resolve the clicked item from the event target rather than relying on\n      // `highlightedIdx`. The highlighted index is updated asynchronously from\n      // a `mousemove` handler on the list; in fast/synthetic interactions\n      // (notably Cypress `realClick`) the click can fire before React has\n      // re-rendered with the updated highlight, which previously caused the\n      // click to be silently ignored (root cause of flaky selection tests).\n      const targetIdx = closestListItemIndex(evt.target as HTMLElement);\n      const idx = targetIdx >= 0 ? targetIdx : highlightedIdx;\n      const item = indexPositions[idx];\n      if (!disableSelection && isSelectable(item)) {\n        // if (!isCollapsibleItem(item)) {\n        evt.preventDefault();\n        evt.stopPropagation();\n        selectItemAtIndex(\n          evt,\n          idx,\n          item,\n          evt.shiftKey,\n          evt.ctrlKey || evt.metaKey,\n        );\n        if (isExtendedSelect) {\n          lastActive.current = idx;\n        }\n        // }\n      }\n    },\n    [\n      disableSelection,\n      isExtendedSelect,\n      highlightedIdx,\n      indexPositions,\n      selectItemAtIndex,\n    ],\n  );\n\n  const listHandlers = {\n    onClick: handleClick,\n    onKeyDown: handleKeyDown,\n    onKeyboardNavigation: handleKeyboardNavigation,\n  };\n\n  return {\n    listHandlers,\n    selected,\n    setSelected,\n  };\n};\n"],"names":["useRef","useCallback","useControlled","closestListItemIndex"],"mappings":"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"}
+{"version":3,"file":"useSelection.js","sources":["../src/common-hooks/useSelection.ts"],"sourcesContent":["import { useControlled } from \"@salt-ds/core\";\nimport {\n  type KeyboardEvent,\n  type MouseEvent,\n  type SyntheticEvent,\n  useCallback,\n  useRef,\n} from \"react\";\nimport type { CollectionItem } from \"./collectionTypes\";\nimport { closestListItemIndex } from \"./list-dom-utils\";\nimport type {\n  SelectionHookProps,\n  SelectionHookResult,\n  SelectionStrategy,\n  SingleSelectionStrategy,\n} from \"./selectionTypes\";\n\nexport const CHECKBOX = \"checkbox\";\n\nexport const GROUP_SELECTION_NONE = \"none\";\nexport const GROUP_SELECTION_SINGLE = \"single\";\nexport const GROUP_SELECTION_CASCADE = \"cascade\";\n\nexport type GroupSelectionMode = \"none\" | \"single\" | \"cascade\";\n\nconst defaultSelectionKeys = [\"Enter\", \" \"];\n\nconst isSelectable = (item?: CollectionItem<unknown>) =>\n  item && item.disabled !== true && item.selectable !== false;\n\nconst byItemIndex = (\n  i1: CollectionItem<unknown>,\n  i2: CollectionItem<unknown>,\n) => (i1.index ?? 0) - (i2.index ?? 0);\n\nexport const groupSelectionEnabled = (\n  groupSelection: GroupSelectionMode,\n): boolean => groupSelection && groupSelection !== GROUP_SELECTION_NONE;\n\nexport const useSelection = <\n  Item,\n  Selection extends SelectionStrategy = \"default\",\n>({\n  defaultSelected,\n  disableSelection = false,\n  // groupSelection = GROUP_SELECTION_NONE,\n  highlightedIdx,\n  indexPositions,\n  label: _label = \"\",\n  onSelect,\n  onSelectionChange,\n  selected: selectedProp,\n  selectionStrategy,\n  selectionKeys = defaultSelectionKeys,\n  tabToSelect,\n}: SelectionHookProps<Item, Selection>): SelectionHookResult<\n  Item,\n  Selection\n> => {\n  type collectionItem = CollectionItem<Item>;\n\n  const isDeselectable = selectionStrategy === \"deselectable\";\n  const isMultipleSelect = selectionStrategy === \"multiple\";\n  const isExtendedSelect = selectionStrategy === \"extended\";\n\n  const lastActive = useRef(-1);\n\n  const isSelectionEvent = useCallback(\n    (evt: KeyboardEvent) => selectionKeys.includes(evt.key),\n    [selectionKeys],\n  );\n\n  const emptyValue = useCallback(<\n    Item,\n  >(): Selection extends SingleSelectionStrategy\n    ? null\n    : CollectionItem<Item>[] => {\n    type returnType = Selection extends SingleSelectionStrategy\n      ? null\n      : CollectionItem<Item>[];\n    return isMultipleSelect || isExtendedSelect\n      ? ([] as unknown as returnType)\n      : (null as returnType);\n  }, [isMultipleSelect, isExtendedSelect]);\n\n  const [selected, setSelected] = useControlled<\n    Selection extends SingleSelectionStrategy\n      ? CollectionItem<Item> | null\n      : CollectionItem<Item>[]\n  >({\n    controlled: selectedProp,\n    default: defaultSelected ?? emptyValue(),\n    name: \"UseSelection\",\n    state: \"selected\",\n  });\n\n  const isItemSelected = useCallback(\n    (item: collectionItem) => {\n      return Array.isArray(selected)\n        ? selected.includes(item)\n        : selected === item;\n    },\n    [selected],\n  );\n\n  const selectDefault = useCallback((item: collectionItem) => item, []);\n  const selectDeselectable = useCallback(\n    (item: collectionItem) => (isItemSelected(item) ? null : item),\n    [isItemSelected],\n  );\n  const selectMultiple = useCallback(\n    (item: collectionItem) => {\n      const nextItems = isItemSelected(item)\n        ? (selected as collectionItem[]).filter((i) => i !== item)\n        : (selected as collectionItem[]).concat(item);\n      nextItems.sort(byItemIndex);\n      return nextItems;\n    },\n    [isItemSelected, selected],\n  );\n  const selectRange = useCallback(\n    (idx: number, preserveExistingSelection?: boolean) => {\n      const currentSelection = preserveExistingSelection\n        ? (selected as collectionItem[])\n        : ([] as collectionItem[]);\n\n      const [lastSelectedItem] = (selected as collectionItem[]).slice(-1);\n      const lastSelectedItemIndex = lastSelectedItem\n        ? indexPositions.indexOf(lastSelectedItem)\n        : 0;\n\n      const startRegion = Math.min(idx, lastSelectedItemIndex);\n      const endRegion = Math.max(idx, lastSelectedItemIndex);\n      const rangeSelection = indexPositions.slice(startRegion, endRegion + 1);\n      // concat the current selection with a new selection and remove duplicates for overlaps\n      const nextItems = [...new Set([...currentSelection, ...rangeSelection])];\n      nextItems.sort(byItemIndex);\n      return nextItems;\n    },\n    [indexPositions, selected],\n  );\n\n  const selectItemAtIndex = useCallback(\n    (\n      evt: SyntheticEvent,\n      idx: number,\n      item: collectionItem,\n      rangeSelect: boolean,\n      preserveExistingSelection?: boolean,\n    ) => {\n      type returnType = Selection extends SingleSelectionStrategy\n        ? CollectionItem<Item> | null\n        : CollectionItem<Item>[];\n      let newSelected: returnType;\n      if (isMultipleSelect) {\n        newSelected = selectMultiple(item) as returnType;\n      } else if (isExtendedSelect) {\n        if (preserveExistingSelection && !rangeSelect) {\n          newSelected = selectMultiple(item) as returnType;\n        } else if (rangeSelect) {\n          newSelected = selectRange(\n            idx,\n            preserveExistingSelection,\n          ) as returnType;\n        } else {\n          newSelected = [item] as returnType;\n        }\n      } else if (isDeselectable) {\n        newSelected = selectDeselectable(item) as returnType;\n      } else {\n        newSelected = selectDefault(item) as returnType;\n      }\n\n      if (newSelected !== selected) {\n        setSelected(newSelected);\n      }\n\n      // We fire onSelect irrespective of whether selection changes\n      onSelect?.(evt, item);\n\n      if (newSelected !== selected) {\n        if (onSelectionChange) {\n          onSelectionChange(evt, newSelected);\n        }\n      }\n    },\n    [\n      isMultipleSelect,\n      isExtendedSelect,\n      isDeselectable,\n      selected,\n      onSelect,\n      selectMultiple,\n      selectRange,\n      selectDeselectable,\n      selectDefault,\n      onSelectionChange,\n    ],\n  );\n\n  const handleKeyDown = useCallback(\n    (evt: KeyboardEvent) => {\n      const item = indexPositions[highlightedIdx];\n      if (isSelectable(item)) {\n        if (isSelectionEvent(evt) || (tabToSelect && evt.key === \"Tab\")) {\n          // We do not inhibit Tab behaviour, if we are selecting on Tab then we apply\n          // selection as a side effect of the Tab, not as a replacement for Tabbing.\n          if (evt.key !== \"Tab\") {\n            evt.preventDefault();\n          }\n          selectItemAtIndex(\n            evt,\n            highlightedIdx,\n            item,\n            false,\n            evt.ctrlKey || evt.metaKey,\n          );\n          if (isExtendedSelect) {\n            lastActive.current = highlightedIdx;\n          }\n        }\n      }\n    },\n    [\n      indexPositions,\n      highlightedIdx,\n      isSelectionEvent,\n      tabToSelect,\n      selectItemAtIndex,\n      isExtendedSelect,\n    ],\n  );\n\n  const handleKeyboardNavigation = useCallback(\n    (evt: KeyboardEvent, currentIndex: number) => {\n      if (isExtendedSelect && evt.shiftKey) {\n        const item = indexPositions[currentIndex];\n        if (isSelectable(item)) {\n          selectItemAtIndex(evt, currentIndex, item, true);\n        }\n      }\n    },\n    [isExtendedSelect, indexPositions, selectItemAtIndex],\n  );\n\n  const handleClick = useCallback(\n    (evt: MouseEvent) => {\n      // Resolve the clicked item from the event target rather than relying on\n      // `highlightedIdx`. The highlighted index is updated asynchronously from\n      // a `mousemove` handler on the list; in fast or synthetic interactions\n      // the click can fire before React has re-rendered with the updated\n      // highlight, which previously caused the click to be silently ignored.\n      const targetIdx = closestListItemIndex(evt.target as HTMLElement);\n      const idx = targetIdx >= 0 ? targetIdx : highlightedIdx;\n      const item = indexPositions[idx];\n      if (!disableSelection && isSelectable(item)) {\n        // if (!isCollapsibleItem(item)) {\n        evt.preventDefault();\n        evt.stopPropagation();\n        selectItemAtIndex(\n          evt,\n          idx,\n          item,\n          evt.shiftKey,\n          evt.ctrlKey || evt.metaKey,\n        );\n        if (isExtendedSelect) {\n          lastActive.current = idx;\n        }\n        // }\n      }\n    },\n    [\n      disableSelection,\n      isExtendedSelect,\n      highlightedIdx,\n      indexPositions,\n      selectItemAtIndex,\n    ],\n  );\n\n  const listHandlers = {\n    onClick: handleClick,\n    onKeyDown: handleKeyDown,\n    onKeyboardNavigation: handleKeyboardNavigation,\n  };\n\n  return {\n    listHandlers,\n    selected,\n    setSelected,\n  };\n};\n"],"names":["useRef","useCallback","useControlled","closestListItemIndex"],"mappings":";;;;;;AAyBA,MAAM,oBAAA,GAAuB,CAAC,OAAA,EAAS,GAAG,CAAA;AAE1C,MAAM,YAAA,GAAe,CAAC,IAAA,KACpB,IAAA,IAAQ,KAAK,QAAA,KAAa,IAAA,IAAQ,KAAK,UAAA,KAAe,KAAA;AAExD,MAAM,WAAA,GAAc,CAClB,EAAA,EACA,EAAA,KAAA,CACI,GAAG,KAAA,IAAS,CAAA,KAAM,GAAG,KAAA,IAAS,CAAA,CAAA;AAM7B,MAAM,eAAe,CAG1B;AAAA,EACA,eAAA;AAAA,EACA,gBAAA,GAAmB,KAAA;AAAA;AAAA,EAEnB,cAAA;AAAA,EACA,cAAA;AAAA,EACA,OAAO,MAAA,GAAS,EAAA;AAAA,EAChB,QAAA;AAAA,EACA,iBAAA;AAAA,EACA,QAAA,EAAU,YAAA;AAAA,EACV,iBAAA;AAAA,EACA,aAAA,GAAgB,oBAAA;AAAA,EAChB;AACF,CAAA,KAGK;AAGH,EAAA,MAAM,iBAAiB,iBAAA,KAAsB,cAAA;AAC7C,EAAA,MAAM,mBAAmB,iBAAA,KAAsB,UAAA;AAC/C,EAAA,MAAM,mBAAmB,iBAAA,KAAsB,UAAA;AAE/C,EAAA,MAAM,UAAA,GAAaA,aAAO,EAAE,CAAA;AAE5B,EAAA,MAAM,gBAAA,GAAmBC,iBAAA;AAAA,IACvB,CAAC,GAAA,KAAuB,aAAA,CAAc,QAAA,CAAS,IAAI,GAAG,CAAA;AAAA,IACtD,CAAC,aAAa;AAAA,GAChB;AAEA,EAAA,MAAM,UAAA,GAAaA,kBAAY,MAID;AAI5B,IAAA,OAAO,gBAAA,IAAoB,gBAAA,GACtB,EAAC,GACD,IAAA;AAAA,EACP,CAAA,EAAG,CAAC,gBAAA,EAAkB,gBAAgB,CAAC,CAAA;AAEvC,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAIC,kBAAA,CAI9B;AAAA,IACA,UAAA,EAAY,YAAA;AAAA,IACZ,OAAA,EAAS,mBAAmB,UAAA,EAAW;AAAA,IACvC,IAAA,EAAM,cAAA;AAAA,IACN,KAAA,EAAO;AAAA,GACR,CAAA;AAED,EAAA,MAAM,cAAA,GAAiBD,iBAAA;AAAA,IACrB,CAAC,IAAA,KAAyB;AACxB,MAAA,OAAO,KAAA,CAAM,QAAQ,QAAQ,CAAA,GACzB,SAAS,QAAA,CAAS,IAAI,IACtB,QAAA,KAAa,IAAA;AAAA,IACnB,CAAA;AAAA,IACA,CAAC,QAAQ;AAAA,GACX;AAEA,EAAA,MAAM,gBAAgBA,iBAAA,CAAY,CAAC,IAAA,KAAyB,IAAA,EAAM,EAAE,CAAA;AACpE,EAAA,MAAM,kBAAA,GAAqBA,iBAAA;AAAA,IACzB,CAAC,IAAA,KAA0B,cAAA,CAAe,IAAI,IAAI,IAAA,GAAO,IAAA;AAAA,IACzD,CAAC,cAAc;AAAA,GACjB;AACA,EAAA,MAAM,cAAA,GAAiBA,iBAAA;AAAA,IACrB,CAAC,IAAA,KAAyB;AACxB,MAAA,MAAM,SAAA,GAAY,cAAA,CAAe,IAAI,CAAA,GAChC,QAAA,CAA8B,MAAA,CAAO,CAAC,CAAA,KAAM,CAAA,KAAM,IAAI,CAAA,GACtD,QAAA,CAA8B,OAAO,IAAI,CAAA;AAC9C,MAAA,SAAA,CAAU,KAAK,WAAW,CAAA;AAC1B,MAAA,OAAO,SAAA;AAAA,IACT,CAAA;AAAA,IACA,CAAC,gBAAgB,QAAQ;AAAA,GAC3B;AACA,EAAA,MAAM,WAAA,GAAcA,iBAAA;AAAA,IAClB,CAAC,KAAa,yBAAA,KAAwC;AACpD,MAAA,MAAM,gBAAA,GAAmB,yBAAA,GACpB,QAAA,GACA,EAAC;AAEN,MAAA,MAAM,CAAC,gBAAgB,CAAA,GAAK,QAAA,CAA8B,MAAM,EAAE,CAAA;AAClE,MAAA,MAAM,qBAAA,GAAwB,gBAAA,GAC1B,cAAA,CAAe,OAAA,CAAQ,gBAAgB,CAAA,GACvC,CAAA;AAEJ,MAAA,MAAM,WAAA,GAAc,IAAA,CAAK,GAAA,CAAI,GAAA,EAAK,qBAAqB,CAAA;AACvD,MAAA,MAAM,SAAA,GAAY,IAAA,CAAK,GAAA,CAAI,GAAA,EAAK,qBAAqB,CAAA;AACrD,MAAA,MAAM,cAAA,GAAiB,cAAA,CAAe,KAAA,CAAM,WAAA,EAAa,YAAY,CAAC,CAAA;AAEtE,MAAA,MAAM,SAAA,GAAY,CAAC,mBAAG,IAAI,GAAA,CAAI,CAAC,GAAG,gBAAA,EAAkB,GAAG,cAAc,CAAC,CAAC,CAAA;AACvE,MAAA,SAAA,CAAU,KAAK,WAAW,CAAA;AAC1B,MAAA,OAAO,SAAA;AAAA,IACT,CAAA;AAAA,IACA,CAAC,gBAAgB,QAAQ;AAAA,GAC3B;AAEA,EAAA,MAAM,iBAAA,GAAoBA,iBAAA;AAAA,IACxB,CACE,GAAA,EACA,GAAA,EACA,IAAA,EACA,aACA,yBAAA,KACG;AAIH,MAAA,IAAI,WAAA;AACJ,MAAA,IAAI,gBAAA,EAAkB;AACpB,QAAA,WAAA,GAAc,eAAe,IAAI,CAAA;AAAA,MACnC,WAAW,gBAAA,EAAkB;AAC3B,QAAA,IAAI,yBAAA,IAA6B,CAAC,WAAA,EAAa;AAC7C,UAAA,WAAA,GAAc,eAAe,IAAI,CAAA;AAAA,QACnC,WAAW,WAAA,EAAa;AACtB,UAAA,WAAA,GAAc,WAAA;AAAA,YACZ,GAAA;AAAA,YACA;AAAA,WACF;AAAA,QACF,CAAA,MAAO;AACL,UAAA,WAAA,GAAc,CAAC,IAAI,CAAA;AAAA,QACrB;AAAA,MACF,WAAW,cAAA,EAAgB;AACzB,QAAA,WAAA,GAAc,mBAAmB,IAAI,CAAA;AAAA,MACvC,CAAA,MAAO;AACL,QAAA,WAAA,GAAc,cAAc,IAAI,CAAA;AAAA,MAClC;AAEA,MAAA,IAAI,gBAAgB,QAAA,EAAU;AAC5B,QAAA,WAAA,CAAY,WAAW,CAAA;AAAA,MACzB;AAGA,MAAA,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAW,GAAA,EAAK,IAAA,CAAA;AAEhB,MAAA,IAAI,gBAAgB,QAAA,EAAU;AAC5B,QAAA,IAAI,iBAAA,EAAmB;AACrB,UAAA,iBAAA,CAAkB,KAAK,WAAW,CAAA;AAAA,QACpC;AAAA,MACF;AAAA,IACF,CAAA;AAAA,IACA;AAAA,MACE,gBAAA;AAAA,MACA,gBAAA;AAAA,MACA,cAAA;AAAA,MACA,QAAA;AAAA,MACA,QAAA;AAAA,MACA,cAAA;AAAA,MACA,WAAA;AAAA,MACA,kBAAA;AAAA,MACA,aAAA;AAAA,MACA;AAAA;AACF,GACF;AAEA,EAAA,MAAM,aAAA,GAAgBA,iBAAA;AAAA,IACpB,CAAC,GAAA,KAAuB;AACtB,MAAA,MAAM,IAAA,GAAO,eAAe,cAAc,CAAA;AAC1C,MAAA,IAAI,YAAA,CAAa,IAAI,CAAA,EAAG;AACtB,QAAA,IAAI,iBAAiB,GAAG,CAAA,IAAM,WAAA,IAAe,GAAA,CAAI,QAAQ,KAAA,EAAQ;AAG/D,UAAA,IAAI,GAAA,CAAI,QAAQ,KAAA,EAAO;AACrB,YAAA,GAAA,CAAI,cAAA,EAAe;AAAA,UACrB;AACA,UAAA,iBAAA;AAAA,YACE,GAAA;AAAA,YACA,cAAA;AAAA,YACA,IAAA;AAAA,YACA,KAAA;AAAA,YACA,GAAA,CAAI,WAAW,GAAA,CAAI;AAAA,WACrB;AACA,UAAA,IAAI,gBAAA,EAAkB;AACpB,YAAA,UAAA,CAAW,OAAA,GAAU,cAAA;AAAA,UACvB;AAAA,QACF;AAAA,MACF;AAAA,IACF,CAAA;AAAA,IACA;AAAA,MACE,cAAA;AAAA,MACA,cAAA;AAAA,MACA,gBAAA;AAAA,MACA,WAAA;AAAA,MACA,iBAAA;AAAA,MACA;AAAA;AACF,GACF;AAEA,EAAA,MAAM,wBAAA,GAA2BA,iBAAA;AAAA,IAC/B,CAAC,KAAoB,YAAA,KAAyB;AAC5C,MAAA,IAAI,gBAAA,IAAoB,IAAI,QAAA,EAAU;AACpC,QAAA,MAAM,IAAA,GAAO,eAAe,YAAY,CAAA;AACxC,QAAA,IAAI,YAAA,CAAa,IAAI,CAAA,EAAG;AACtB,UAAA,iBAAA,CAAkB,GAAA,EAAK,YAAA,EAAc,IAAA,EAAM,IAAI,CAAA;AAAA,QACjD;AAAA,MACF;AAAA,IACF,CAAA;AAAA,IACA,CAAC,gBAAA,EAAkB,cAAA,EAAgB,iBAAiB;AAAA,GACtD;AAEA,EAAA,MAAM,WAAA,GAAcA,iBAAA;AAAA,IAClB,CAAC,GAAA,KAAoB;AAMnB,MAAA,MAAM,SAAA,GAAYE,iCAAA,CAAqB,GAAA,CAAI,MAAqB,CAAA;AAChE,MAAA,MAAM,GAAA,GAAM,SAAA,IAAa,CAAA,GAAI,SAAA,GAAY,cAAA;AACzC,MAAA,MAAM,IAAA,GAAO,eAAe,GAAG,CAAA;AAC/B,MAAA,IAAI,CAAC,gBAAA,IAAoB,YAAA,CAAa,IAAI,CAAA,EAAG;AAE3C,QAAA,GAAA,CAAI,cAAA,EAAe;AACnB,QAAA,GAAA,CAAI,eAAA,EAAgB;AACpB,QAAA,iBAAA;AAAA,UACE,GAAA;AAAA,UACA,GAAA;AAAA,UACA,IAAA;AAAA,UACA,GAAA,CAAI,QAAA;AAAA,UACJ,GAAA,CAAI,WAAW,GAAA,CAAI;AAAA,SACrB;AACA,QAAA,IAAI,gBAAA,EAAkB;AACpB,UAAA,UAAA,CAAW,OAAA,GAAU,GAAA;AAAA,QACvB;AAAA,MAEF;AAAA,IACF,CAAA;AAAA,IACA;AAAA,MACE,gBAAA;AAAA,MACA,gBAAA;AAAA,MACA,cAAA;AAAA,MACA,cAAA;AAAA,MACA;AAAA;AACF,GACF;AAEA,EAAA,MAAM,YAAA,GAAe;AAAA,IACnB,OAAA,EAAS,WAAA;AAAA,IACT,SAAA,EAAW,aAAA;AAAA,IACX,oBAAA,EAAsB;AAAA,GACxB;AAEA,EAAA,OAAO;AAAA,IACL,YAAA;AAAA,IACA,QAAA;AAAA,IACA;AAAA,GACF;AACF;;;;"}

package/dist-cjs/index.js

@@ -1,6 +1,8 @@
 'use strict';
 
 var AppHeader = require('./app-header/AppHeader.js');
+var AvatarGroup = require('./avatar-group/AvatarGroup.js');
+var AvatarGroupCount = require('./avatar-group/AvatarGroupCount.js');
 var ButtonBar = require('./button-bar/ButtonBar.js');
 var OrderedButton = require('./button-bar/OrderedButton.js');
 var CascadingMenu = require('./cascading-menu/CascadingMenu.js');
@@ -43,7 +45,6 @@ var FormattedInput = require('./formatted-input/FormattedInput.js');
 var InputLegacy = require('./input-legacy/InputLegacy.js');
 var StaticInputAdornment = require('./input-legacy/StaticInputAdornment.js');
 var LayerLayout = require('./layer-layout/LayerLayout.js');
-var LinkButton = require('./link-button/LinkButton.js');
 var Highlighter = require('./list/Highlighter.js');
 var List = require('./list/List.js');
 var ListItem = require('./list/ListItem.js');
@@ -123,6 +124,8 @@ var WindowContext = require('./window/WindowContext.js');
 
 
 exports.AppHeader = AppHeader.AppHeader;
+exports.AvatarGroup = AvatarGroup.AvatarGroup;
+exports.AvatarGroupCount = AvatarGroupCount.AvatarGroupCount;
 exports.ButtonBar = ButtonBar.ButtonBar;
 exports.DefaultButtonsOrderByVariant = ButtonBar.DefaultButtonsOrderByVariant;
 exports.OrderedButton = OrderedButton.OrderedButton;
@@ -174,7 +177,6 @@ exports.Input = InputLegacy.InputLegacy;
 exports.StaticInputAdornment = StaticInputAdornment.StaticInputAdornment;
 exports.LAYER_POSITIONS = LayerLayout.LAYER_POSITIONS;
 exports.LayerLayout = LayerLayout.LayerLayout;
-exports.LinkButton = LinkButton.LinkButton;
 exports.Highlighter = Highlighter.Highlighter;
 exports.List = List.List;
 exports.ListItem = ListItem.ListItem;

package/dist-cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist-cjs/list/useList.js

@@ -187,9 +187,8 @@ const useList = ({
     // resolves the clicked item directly from the event target, we must
     // explicitly suppress the handler here.
     onClick: disabled ? void 0 : selectionHook.listHandlers.onClick,
-    // MouseEnter would be much better for this. There is a bug in Cypress
-    // wheby it emits spurious MouseEnter (and MouseOver) events around
-    // keypress events, which break many tests.
+    // Retain mousemove semantics so keyboard events cannot synthesize hover
+    // transitions and unexpectedly change the highlighted item.
     onMouseMove: handleMouseMove
   };
   return {