@danske/sapphire-react-lab 0.84.2 → 0.85.0

package/build/esm/Tag/src/Tag.js

@@ -0,0 +1,109 @@
+import React, { useRef } from 'react';
+import clsx from 'clsx';
+import { useButton } from '@react-aria/button';
+import { useHover } from '@react-aria/interactions';
+import { useTag } from '@react-aria/tag';
+import { mergeProps } from '@react-aria/utils';
+import { useThemeCheck } from '@danske/sapphire-react';
+import { Close, AlertCircle } from '@danske/sapphire-icons/react';
+import styles from '@danske/sapphire-css/components/tag/tag.module.css';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+function Tag(props) {
+  useThemeCheck();
+  const { hasError = false, item, state } = props;
+  const ref = useRef(null);
+  const _a = useTag(props, state, ref), {
+    allowsRemoving,
+    allowsSelection,
+    gridCellProps,
+    isDisabled,
+    isFocused,
+    isPressed,
+    isSelected,
+    removeButtonProps,
+    rowProps: _b
+  } = _a, _c = _b, { onKeyDown } = _c, rowProps = __objRest(_c, ["onKeyDown"]), otherProps = __objRest(_a, [
+    "allowsRemoving",
+    "allowsSelection",
+    "gridCellProps",
+    "isDisabled",
+    "isFocused",
+    "isPressed",
+    "isSelected",
+    "removeButtonProps",
+    "rowProps"
+  ]);
+  const { hoverProps, isHovered } = useHover({ isDisabled });
+  const hasAction = otherProps.hasAction;
+  return /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({
+    ref
+  }, mergeProps({
+    onKeyDown: (e) => {
+      if (e.key !== " ") {
+        onKeyDown == null ? void 0 : onKeyDown(e);
+      } else {
+        e.preventDefault();
+      }
+    }
+  }, rowProps, hoverProps)), {
+    className: clsx(styles["sapphire-tag"], styles["js-focus"], styles["js-hover"], {
+      [styles["sapphire-tag--error"]]: hasError,
+      [styles["is-active"]]: allowsSelection && isSelected,
+      [styles["is-active"]]: hasAction && isPressed,
+      [styles["is-focus"]]: isFocused,
+      [styles["is-hover"]]: hasAction && isHovered,
+      [styles["is-disabled"]]: isDisabled
+    }),
+    "aria-invalid": hasError
+  }), /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({}, gridCellProps), {
+    className: styles["sapphire-tag__gridcell"]
+  }), hasError && /* @__PURE__ */ React.createElement(IconError, null), item.rendered, allowsRemoving && /* @__PURE__ */ React.createElement(RemoveButton, __spreadValues({}, removeButtonProps))));
+}
+function RemoveButton(removeButtonProps) {
+  const buttonRef = useRef(null);
+  const { buttonProps } = useButton(removeButtonProps, buttonRef);
+  return /* @__PURE__ */ React.createElement("button", __spreadProps(__spreadValues({}, buttonProps), {
+    className: clsx(styles["sapphire-tag__button"], styles["js-focus"])
+  }), /* @__PURE__ */ React.createElement("span", {
+    className: styles["sapphire-tag__icon"]
+  }, /* @__PURE__ */ React.createElement(Close, null)));
+}
+const IconError = () => {
+  return /* @__PURE__ */ React.createElement("span", {
+    className: clsx(styles["sapphire-tag__icon"], styles["sapphire-tag__icon--error"])
+  }, /* @__PURE__ */ React.createElement(AlertCircle, null));
+};
+
+export { Tag };
+//# sourceMappingURL=Tag.js.map

package/build/esm/Tag/src/Tag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tag.js","sources":["../../../../src/Tag/src/Tag.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport clsx from 'clsx';\nimport { AriaButtonProps, useButton } from '@react-aria/button';\nimport { useHover } from '@react-aria/interactions';\nimport { useTag } from '@react-aria/tag';\nimport { mergeProps } from '@react-aria/utils';\nimport type { ListState } from '@react-stately/list';\nimport type { FocusableElement, Node } from '@react-types/shared';\n\nimport { useThemeCheck } from '@danske/sapphire-react';\nimport { AlertCircle, Close } from '@danske/sapphire-icons/react';\nimport styles from '@danske/sapphire-css/components/tag/tag.module.css';\n\nexport interface TagProps<T> {\n  /**\n   * Object representing the tag. Contains relevant information about the tag.\n   */\n  item: Node<T>;\n  /**\n   * State for TagGroup, returned by `useListState`\n   */\n  state: ListState<T>;\n  /**\n   * Shows error icon.\n   * @default 'false'\n   */\n  hasError?: boolean;\n}\n\nexport function Tag<T>(props: TagProps<T>) {\n  useThemeCheck();\n  const { hasError = false, item, state } = props;\n  const ref = useRef(null);\n  const {\n    allowsRemoving,\n    allowsSelection,\n    gridCellProps,\n    isDisabled,\n    isFocused,\n    isPressed,\n    isSelected,\n    removeButtonProps,\n    rowProps: { onKeyDown, ...rowProps },\n    ...otherProps\n  } = useTag(props, state, ref);\n  const { hoverProps, isHovered } = useHover({ isDisabled });\n  /* hasAction prop is passed when onAction is present, we are using it to set the hover and action classes.\n  The workaround below is made because AriaTagProps Omit's hasAction to avoid typecheck error */\n  const hasAction = (otherProps as any).hasAction;\n\n  return (\n    <div\n      ref={ref}\n      {...mergeProps(\n        {\n          onKeyDown: (e: React.KeyboardEvent<FocusableElement>) => {\n            /* We are removing Space key interaction and prevent default behavior to avoid isPressed prop being set\n            as we do not want to apply is-active class on \"Space\" interaction when having actionable tags with onAction or link */\n            if (e.key !== ' ') {\n              onKeyDown?.(e);\n            } else {\n              e.preventDefault();\n            }\n          },\n        },\n        rowProps,\n        hoverProps\n      )}\n      className={clsx(\n        styles['sapphire-tag'],\n        styles['js-focus'],\n        styles['js-hover'],\n        {\n          [styles['sapphire-tag--error']]: hasError,\n          [styles['is-active']]: allowsSelection && isSelected,\n          [styles['is-active']]: hasAction && isPressed,\n          [styles['is-focus']]: isFocused,\n          [styles['is-hover']]: hasAction && isHovered,\n          [styles['is-disabled']]: isDisabled,\n        }\n      )}\n      aria-invalid={hasError}\n    >\n      <div {...gridCellProps} className={styles['sapphire-tag__gridcell']}>\n        {hasError && <IconError />}\n        {item.rendered}\n        {allowsRemoving && (\n          <RemoveButton {...(removeButtonProps as AriaButtonProps)} />\n        )}\n      </div>\n    </div>\n  );\n}\n\nfunction RemoveButton(removeButtonProps: AriaButtonProps) {\n  const buttonRef = useRef(null);\n  const { buttonProps } = useButton(removeButtonProps, buttonRef);\n  return (\n    <button\n      {...buttonProps}\n      className={clsx(styles['sapphire-tag__button'], styles['js-focus'])}\n    >\n      <span className={styles['sapphire-tag__icon']}>\n        <Close />\n      </span>\n    </button>\n  );\n}\n\nconst IconError = () => {\n  return (\n    <span\n      className={clsx(\n        styles['sapphire-tag__icon'],\n        styles['sapphire-tag__icon--error']\n      )}\n    >\n      <AlertCircle />\n    </span>\n  );\n};\n"],"names":[],"mappings":"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"}

package/build/esm/Tag/src/TagGroup.js

@@ -0,0 +1,75 @@
+import React, { useRef } from 'react';
+import { useTagGroup } from '@react-aria/tag';
+import { useListState } from '@react-stately/list';
+import { useThemeCheck, Field, Label } from '@danske/sapphire-react';
+import styles from '@danske/sapphire-css/components/tag/tag.module.css';
+import { Tag } from './Tag.js';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+function TagGroup(props) {
+  useThemeCheck();
+  const _a = props, {
+    contextualHelp,
+    errorMessage,
+    label: labelText,
+    labelPlacement = "above",
+    note
+  } = _a, otherProps = __objRest(_a, [
+    "contextualHelp",
+    "errorMessage",
+    "label",
+    "labelPlacement",
+    "note"
+  ]);
+  const ref = useRef(null);
+  const state = useListState(props);
+  const { descriptionProps, gridProps, labelProps, errorMessageProps } = useTagGroup(props, state, ref);
+  return /* @__PURE__ */ React.createElement(Field, __spreadProps(__spreadValues({}, otherProps), {
+    error: !!errorMessage,
+    labelPlacement,
+    labelVerticalAlignment: "top"
+  }), (labelText || contextualHelp) && /* @__PURE__ */ React.createElement(Field.Label, null, /* @__PURE__ */ React.createElement(Label, __spreadProps(__spreadValues({}, labelProps), {
+    contextualHelp
+  }), labelText)), /* @__PURE__ */ React.createElement(Field.Control, null, /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({}, gridProps), {
+    ref,
+    className: styles["sapphire-tag-group"]
+  }), [...state.collection].map((item) => /* @__PURE__ */ React.createElement(Tag, {
+    key: item.key,
+    item,
+    state,
+    hasError: item.props.hasError
+  })))), (note || errorMessage) && (errorMessage ? /* @__PURE__ */ React.createElement(Field.Footer, null, /* @__PURE__ */ React.createElement(Field.Note, __spreadValues({}, errorMessageProps), errorMessage)) : /* @__PURE__ */ React.createElement(Field.Footer, null, /* @__PURE__ */ React.createElement(Field.Note, __spreadValues({}, descriptionProps), note))));
+}
+
+export { TagGroup };
+//# sourceMappingURL=TagGroup.js.map

package/build/esm/Tag/src/TagGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TagGroup.js","sources":["../../../../src/Tag/src/TagGroup.tsx"],"sourcesContent":["import React, { Key, ReactNode, useRef } from 'react';\nimport { useTagGroup } from '@react-aria/tag';\nimport { useListState } from '@react-stately/list';\nimport {\n  AriaLabelingProps,\n  CollectionBase,\n  DOMProps,\n} from '@react-types/shared';\nimport {\n  Field,\n  Label,\n  SapphireStyleProps,\n  useThemeCheck,\n} from '@danske/sapphire-react';\nimport styles from '@danske/sapphire-css/components/tag/tag.module.css';\n\nimport { Tag } from './Tag';\n\nexport interface TagGroupProps<T>\n  extends CollectionBase<T>,\n    DOMProps,\n    AriaLabelingProps,\n    SapphireStyleProps {\n  /**\n   * A ContextualHelp element to place next to the label.\n   */\n  contextualHelp?: ReactNode;\n  /**\n   * Custom error message help text.\n   */\n  errorMessage?: string;\n  /**\n   * The label of the tag group.\n   */\n  label?: string;\n  /**\n   * Places the label either above (default) or on the left side of tags.\n   * @default 'above'\n   */\n  labelPlacement?: 'above' | 'side';\n  /**\n   * Help text description displayed below tags.\n   */\n  note?: string;\n  /**\n   * onAction handler passed down for actionable Tags, called onPress of tags.\n   */\n  onAction?: (key: Key) => void;\n  /**\n   * Handler that is called when a user deletes a tag.\n   */\n  onRemove?: (keys: Set<Key>) => void;\n}\n\nexport function TagGroup<T extends object>(props: TagGroupProps<T>) {\n  useThemeCheck();\n  const {\n    contextualHelp,\n    errorMessage,\n    label: labelText,\n    labelPlacement = 'above',\n    note,\n    ...otherProps\n  } = props;\n  const ref = useRef(null);\n  const state = useListState(props);\n  const { descriptionProps, gridProps, labelProps, errorMessageProps } =\n    useTagGroup(props, state, ref);\n\n  return (\n    <Field\n      {...otherProps}\n      error={!!errorMessage}\n      labelPlacement={labelPlacement}\n      labelVerticalAlignment=\"top\"\n    >\n      {(labelText || contextualHelp) && (\n        <Field.Label>\n          <Label {...labelProps} contextualHelp={contextualHelp}>\n            {labelText}\n          </Label>\n        </Field.Label>\n      )}\n      <Field.Control>\n        <div {...gridProps} ref={ref} className={styles['sapphire-tag-group']}>\n          {[...state.collection].map((item) => (\n            <Tag\n              key={item.key}\n              item={item}\n              state={state}\n              hasError={item.props.hasError}\n            />\n          ))}\n        </div>\n      </Field.Control>\n      {(note || errorMessage) &&\n        (errorMessage ? (\n          <Field.Footer>\n            <Field.Note {...errorMessageProps}>{errorMessage}</Field.Note>\n          </Field.Footer>\n        ) : (\n          <Field.Footer>\n            <Field.Note {...descriptionProps}>{note}</Field.Note>\n          </Field.Footer>\n        ))}\n    </Field>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsDO,SAAA,QAAA,CAAoC,KAAyB,EAAA;AAClE,EAAA,aAAA,EAAA,CAAA;AACA,EAAA,MAOI,EANF,GAAA,KAAA,EAAA;AAAA,IAAA,cAAA;AAAA,IACA,YAAA;AAAA,IACA,KAAO,EAAA,SAAA;AAAA,IACP,cAAiB,GAAA,OAAA;AAAA,IACjB,IAAA;AAAA,GAEE,GAAA,EAAA,EADC,uBACD,EADC,EAAA;AAAA,IALH,gBAAA;AAAA,IACA,cAAA;AAAA,IACA,OAAA;AAAA,IACA,gBAAA;AAAA,IACA,MAAA;AAAA,GAAA,CAAA,CAAA;AAGF,EAAA,MAAM,MAAM,MAAO,CAAA,IAAA,CAAA,CAAA;AACnB,EAAA,MAAM,QAAQ,YAAa,CAAA,KAAA,CAAA,CAAA;AAC3B,EAAA,MAAM,EAAE,gBAAkB,EAAA,SAAA,EAAW,YAAY,iBAC/C,EAAA,GAAA,WAAA,CAAY,OAAO,KAAO,EAAA,GAAA,CAAA,CAAA;AAE5B,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,KAAD,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EACM,UADN,CAAA,EAAA;AAAA,IAEE,KAAA,EAAO,CAAC,CAAC,YAAA;AAAA,IACT,cAAA;AAAA,IACA,sBAAuB,EAAA,KAAA;AAAA,GAErB,CAAA,EAAA,CAAA,SAAA,IAAa,mCACZ,KAAA,CAAA,aAAA,CAAA,KAAA,CAAM,OAAP,IACE,kBAAA,KAAA,CAAA,aAAA,CAAC,KAAD,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EAAW,UAAX,CAAA,EAAA;AAAA,IAAuB,cAAA;AAAA,GACpB,CAAA,EAAA,SAAA,CAAA,CAAA,sCAIN,KAAM,CAAA,OAAA,EAAP,sBACG,KAAA,CAAA,aAAA,CAAA,KAAA,EAAD,iCAAS,SAAT,CAAA,EAAA;AAAA,IAAoB,GAAA;AAAA,IAAU,WAAW,MAAO,CAAA,oBAAA,CAAA;AAAA,GAC7C,CAAA,EAAA,CAAC,GAAG,KAAM,CAAA,UAAA,CAAA,CAAY,IAAI,CAAC,IAAA,yCACzB,GAAD,EAAA;AAAA,IACE,KAAK,IAAK,CAAA,GAAA;AAAA,IACV,IAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA,EAAU,KAAK,KAAM,CAAA,QAAA;AAAA,GAK3B,CAAA,CAAA,CAAA,CAAA,EAAA,CAAA,IAAA,IAAQ,kBAEN,YAAA,mBAAA,KAAA,CAAA,aAAA,CAAC,MAAM,MAAP,EAAA,IAAA,sCACG,KAAM,CAAA,IAAA,EAAP,mBAAgB,iBAAoB,CAAA,EAAA,YAAA,CAAA,CAAA,uCAGrC,KAAM,CAAA,MAAA,EAAP,sBACG,KAAA,CAAA,aAAA,CAAA,KAAA,CAAM,IAAP,EAAA,cAAA,CAAA,EAAA,EAAgB,gBAAmB,CAAA,EAAA,IAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AAAA;;;;"}

package/build/esm/Tag/src/TagItem.js

@@ -0,0 +1,6 @@
+import { Item } from '@react-stately/collections';
+
+const TagItem = Item;
+
+export { TagItem };
+//# sourceMappingURL=TagItem.js.map

package/build/esm/Tag/src/TagItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TagItem.js","sources":["../../../../src/Tag/src/TagItem.tsx"],"sourcesContent":["import { Item } from '@react-stately/collections';\nimport { ItemProps } from '@react-types/shared';\n\nexport interface TagItemProps<T> extends ItemProps<T> {\n  /**\n   * Shows error icon.\n   * @default 'false'\n   */\n  hasError?: boolean;\n}\n\nconst TagItem = Item as <T>(props: TagItemProps<T>) => JSX.Element;\n\nexport { TagItem };\n"],"names":[],"mappings":";;AAWA,MAAM,OAAU,GAAA;;;;"}

package/build/esm/index.js

@@ -21,5 +21,7 @@ export { FileDropzone } from './FileDropzone/src/FileDropzone.js';
 export { FileTrigger } from './FileDropzone/src/FileTrigger.js';
 export { AlertDialog } from './AlertDialog/src/AlertDialog.js';
 export { NumberField } from './NumberField/src/NumberField.js';
+export { TagGroup } from './Tag/src/TagGroup.js';
+export { TagItem } from './Tag/src/TagItem.js';
 export { useLocale } from '@react-aria/i18n';
 //# sourceMappingURL=index.js.map

package/build/esm/index.js.map

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

package/build/index.d.ts

@@ -1,7 +1,7 @@
 import * as _react_types_shared from '@react-types/shared';
 import { PressEvents, Validation, RangeValue, HelpTextProps, LabelableProps, CollectionBase, DOMProps, Expandable, ItemProps, AriaLabelingProps, FocusableRefValue } from '@react-types/shared';
 import * as React from 'react';
-import React__default, { ReactNode, ComponentType, RefObject } from 'react';
+import React__default, { ReactNode, ComponentType, RefObject, Key } from 'react';
 import { AriaToggleButtonProps } from '@react-aria/button';
 import { SapphireStyleProps, PopoverTriggerProps, HeadingProps, TextStyleProps, DialogProps } from '@danske/sapphire-react';
 import { DateValue } from '@internationalized/date';
@@ -926,4 +926,46 @@ interface NumberFieldProps extends SapphireNumberFieldProps, PressEvents, Sapphi
 }
 declare const NumberField: React__default.ForwardRefExoticComponent<NumberFieldProps & React__default.RefAttributes<NumberFieldRef>>;
 
-export { _Accordion as Accordion, AlertDialog, Avatar, Calendar, CalendarView, DateField, DateFieldProps, DateRangeField, DateRangeFieldProps, FeedbackMessage, Fieldset, FieldsetProps, FileDropzone, FileDropzoneProps, FileTrigger, FileTriggerProps, FilterDropdown, NotificationBadge, NotificationBadgeProps, NumberField, NumberFieldProps, NumberFieldRef, PredefinedDateRange, RangeCalendar, SapphireAccordionHeadingProps, SapphireAccordionItemProps, SapphireAccordionProps, SapphireAlertDialogProps, SapphireAvatarProps, SapphireCalendarProps, SapphireFeedbackMessageProps, SapphireFilterDropdownProps, SapphireRangeCalendarProps, SapphireSearchFieldProps, SapphireToggleButtonProps, SearchField, ShowToastFn, ShowToastOptions, Spinner, SpinnerProps, ToastProvider, ToastProviderProps, ToggleButton, Typography, TypographyBodyProps, TypographyCaptionProps, TypographyHeadingProps, TypographySubheadingProps, isDateOutsideValidRange, isEndDateBeforeStartDate, useShowToast };
+interface TagGroupProps<T> extends CollectionBase<T>, DOMProps, AriaLabelingProps, SapphireStyleProps {
+    /**
+     * A ContextualHelp element to place next to the label.
+     */
+    contextualHelp?: ReactNode;
+    /**
+     * Custom error message help text.
+     */
+    errorMessage?: string;
+    /**
+     * The label of the tag group.
+     */
+    label?: string;
+    /**
+     * Places the label either above (default) or on the left side of tags.
+     * @default 'above'
+     */
+    labelPlacement?: 'above' | 'side';
+    /**
+     * Help text description displayed below tags.
+     */
+    note?: string;
+    /**
+     * onAction handler passed down for actionable Tags, called onPress of tags.
+     */
+    onAction?: (key: Key) => void;
+    /**
+     * Handler that is called when a user deletes a tag.
+     */
+    onRemove?: (keys: Set<Key>) => void;
+}
+declare function TagGroup<T extends object>(props: TagGroupProps<T>): React__default.JSX.Element;
+
+interface TagItemProps<T> extends ItemProps<T> {
+    /**
+     * Shows error icon.
+     * @default 'false'
+     */
+    hasError?: boolean;
+}
+declare const TagItem: <T>(props: TagItemProps<T>) => JSX.Element;
+
+export { _Accordion as Accordion, AlertDialog, Avatar, Calendar, CalendarView, DateField, DateFieldProps, DateRangeField, DateRangeFieldProps, FeedbackMessage, Fieldset, FieldsetProps, FileDropzone, FileDropzoneProps, FileTrigger, FileTriggerProps, FilterDropdown, NotificationBadge, NotificationBadgeProps, NumberField, NumberFieldProps, NumberFieldRef, PredefinedDateRange, RangeCalendar, SapphireAccordionHeadingProps, SapphireAccordionItemProps, SapphireAccordionProps, SapphireAlertDialogProps, SapphireAvatarProps, SapphireCalendarProps, SapphireFeedbackMessageProps, SapphireFilterDropdownProps, SapphireRangeCalendarProps, SapphireSearchFieldProps, SapphireToggleButtonProps, SearchField, ShowToastFn, ShowToastOptions, Spinner, SpinnerProps, TagGroup, TagGroupProps, TagItem, ToastProvider, ToastProviderProps, ToggleButton, Typography, TypographyBodyProps, TypographyCaptionProps, TypographyHeadingProps, TypographySubheadingProps, isDateOutsideValidRange, isEndDateBeforeStartDate, useShowToast };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danske/sapphire-react-lab",
-  "version": "0.84.2",
+  "version": "0.85.0",
   "license": "SEE LICENSE IN LICENSE",
   "description": "Experimental React components of the Sapphire Design System from Danske Bank A/S",
   "exports": {
@@ -36,7 +36,7 @@
     "cross-env": "^7.0.3"
   },
   "dependencies": {
-    "@danske/sapphire-css": "^28.1.1",
+    "@danske/sapphire-css": "^28.3.0",
     "@internationalized/date": "^3.5.2",
     "@internationalized/string": "^3.2.1",
     "@react-aria/accordion": "^3.0.0-alpha.29",
@@ -53,6 +53,7 @@
     "@react-aria/numberfield": "^3.11.3",
     "@react-aria/overlays": "^3.21.1",
     "@react-aria/searchfield": "^3.7.3",
+    "@react-aria/tag": "^3.4.2",
     "@react-aria/toast": "^3.0.0-beta.10",
     "@react-aria/utils": "^3.23.2",
     "@react-aria/visually-hidden": "^3.8.10",
@@ -61,6 +62,7 @@
     "@react-stately/collections": "^3.10.5",
     "@react-stately/combobox": "^3.8.2",
     "@react-stately/datepicker": "^3.9.2",
+    "@react-stately/list": "^3.10.6",
     "@react-stately/numberfield": "^3.9.3",
     "@react-stately/searchfield": "^3.5.1",
     "@react-stately/toast": "^3.0.0-beta.2",
@@ -72,5 +74,5 @@
     "clsx": "^1.1.1",
     "react-transition-group": "^4.4.5"
   },
-  "gitHead": "71fe9dd3b124423a5df0bfabb6f28f98273733bf"
+  "gitHead": "898067929452d335a664e4d5fb5287775d1dbbd0"
 }