@equinor/eds-core-react 2.4.0 → 2.4.1-beta.0

package/dist/index.next.cjs

@@ -1,11 +1,11 @@
 'use strict';
 
 var react = require('react');
-var jsxRuntime = require('react/jsx-runtime');
 var edsIcons = require('@equinor/eds-icons');
+var jsxRuntime = require('react/jsx-runtime');
+var edsUtils = require('@equinor/eds-utils');
 var reactDom = require('react-dom');
 var styled = require('styled-components');
-var edsUtils = require('@equinor/eds-utils');
 var edsTokens = require('@equinor/eds-tokens');
 var react$1 = require('@floating-ui/react');
 
@@ -78,8 +78,7 @@ TypographyNext.displayName = 'TypographyNext';
 
 const SIZE_MAPPING = {
   small: 'sm',
-  default: 'md',
-  large: 'lg'
+  default: 'md'
 };
 const sizeToTypography = SIZE_MAPPING;
 const sizeToSelectableSpace = SIZE_MAPPING;
@@ -609,7 +608,7 @@ const Input = /*#__PURE__*/react.forwardRef(function Input({
       })]
     }), /*#__PURE__*/jsxRuntime.jsx(Component, {
       ref: ref,
-      type: type,
+      type: Component === 'textarea' ? undefined : type,
       disabled: disabled,
       readOnly: readOnly,
       className: ['eds-input', className].filter(Boolean).join(' '),
@@ -709,7 +708,7 @@ const TooltipArrow = styled__default.default.svg.withConfig({
   displayName: "Tooltip__TooltipArrow",
   componentId: "sc-m2im2p-2"
 })(["width:", ";height:", ";position:absolute;fill:", ";"], tooltip.entities.arrow.width, tooltip.entities.arrow.height, tooltip.background);
-const Tooltip = /*#__PURE__*/react.forwardRef(function Tooltip({
+const Tooltip$1 = /*#__PURE__*/react.forwardRef(function Tooltip({
   title,
   placement = 'bottom',
   children,
@@ -856,14 +855,13 @@ const TextField = /*#__PURE__*/react.forwardRef(function TextField({
   } = useFieldIds(providedId);
   return /*#__PURE__*/jsxRuntime.jsxs(Field, {
     disabled: disabled,
-    className: "eds-text-field",
     children: [label && /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "eds-text-field__header",
       children: [/*#__PURE__*/jsxRuntime.jsx(Field.Label, {
         htmlFor: inputId,
         indicator: indicator,
         children: label
-      }), labelInfo && /*#__PURE__*/jsxRuntime.jsx(Tooltip, {
+      }), labelInfo && /*#__PURE__*/jsxRuntime.jsx(Tooltip$1, {
         title: labelInfo,
         placement: "top",
         children: /*#__PURE__*/jsxRuntime.jsx(Button, {
@@ -901,12 +899,480 @@ const TextField = /*#__PURE__*/react.forwardRef(function TextField({
   });
 });
 
+const TextArea = /*#__PURE__*/react.forwardRef(function TextArea({
+  label,
+  labelInfo,
+  indicator,
+  description,
+  helperMessage,
+  id: providedId,
+  invalid,
+  disabled,
+  maxRows,
+  showCharacterCount,
+  ...textareaProps
+}, ref) {
+  const {
+    inputId,
+    descriptionId,
+    helperMessageId,
+    getDescribedBy
+  } = useFieldIds(providedId);
+  const [charCount, setCharCount] = react.useState(() => String(textareaProps.value ?? textareaProps.defaultValue ?? '').length);
+  react.useEffect(() => {
+    if (textareaProps.value !== undefined) {
+      setCharCount(String(textareaProps.value).length);
+    }
+  }, [textareaProps.value]);
+  const {
+    maxLength,
+    onChange: onChangeProp,
+    ...restTextareaProps
+  } = textareaProps;
+  const handleChange = e => {
+    setCharCount(e.target.value.length);
+    onChangeProp?.(e);
+  };
+  const internalRef = react.useRef(null);
+  const [maxPixelHeight, setMaxPixelHeight] = react.useState(undefined);
+
+  // Auto-grow is always on. When maxRows is set, compute a pixel cap after
+  // mount using the element's actual rendered line-height and padding
+  // (density-aware). Until the cap is computed (or if maxRows is not set),
+  // pass Infinity so the textarea grows without bound.
+  const autoResizeHeight = maxRows !== undefined && maxPixelHeight !== undefined ? maxPixelHeight : Infinity;
+  const autoResizeRef = edsUtils.useAutoResize(autoResizeHeight);
+  react.useEffect(() => {
+    if (!maxRows || !internalRef.current) return;
+    const el = internalRef.current;
+    const updateMaxHeight = () => {
+      const style = window.getComputedStyle(el);
+      const lineHeight = parseFloat(style.lineHeight);
+      const paddingBlockStart = parseFloat(style.paddingBlockStart);
+      const paddingBlockEnd = parseFloat(style.paddingBlockEnd);
+      setMaxPixelHeight(lineHeight * maxRows + paddingBlockStart + paddingBlockEnd);
+    };
+    const observer = new ResizeObserver(updateMaxHeight);
+    observer.observe(el);
+    updateMaxHeight();
+    return () => observer.disconnect();
+  }, [maxRows]);
+  const combinedRef = react.useMemo(() => edsUtils.mergeRefs(ref, autoResizeRef, internalRef), [ref, autoResizeRef, internalRef]);
+  const showHelperRow = helperMessage || showCharacterCount;
+  return /*#__PURE__*/jsxRuntime.jsxs(Field, {
+    className: "eds-text-area",
+    disabled: disabled,
+    children: [label && /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "label-row",
+      children: [/*#__PURE__*/jsxRuntime.jsx(Field.Label, {
+        htmlFor: inputId,
+        indicator: indicator,
+        children: label
+      }), labelInfo && /*#__PURE__*/jsxRuntime.jsx(Tooltip$1, {
+        title: labelInfo,
+        placement: "top",
+        children: /*#__PURE__*/jsxRuntime.jsx(Button, {
+          variant: "ghost",
+          icon: true,
+          round: true,
+          size: "small",
+          tone: "neutral",
+          "aria-label": "More information",
+          children: /*#__PURE__*/jsxRuntime.jsx(Icon, {
+            data: edsIcons.info_circle,
+            size: "xs"
+          })
+        })
+      })]
+    }), description && /*#__PURE__*/jsxRuntime.jsx(Field.Description, {
+      id: descriptionId,
+      children: description
+    }), /*#__PURE__*/jsxRuntime.jsx(Input, {
+      ref: combinedRef,
+      as: "textarea",
+      id: inputId,
+      disabled: disabled,
+      invalid: invalid,
+      maxLength: maxLength,
+      onChange: handleChange,
+      "aria-describedby": getDescribedBy({
+        hasDescription: !!description,
+        hasHelperMessage: !!helperMessage
+      }),
+      ...restTextareaProps
+    }), showHelperRow && /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "helper-row",
+      children: [helperMessage && /*#__PURE__*/jsxRuntime.jsx(Field.HelperMessage, {
+        id: helperMessageId,
+        role: invalid ? 'alert' : undefined,
+        children: helperMessage
+      }), showCharacterCount && /*#__PURE__*/jsxRuntime.jsx("span", {
+        className: "char-count",
+        "data-font-family": "ui",
+        "data-font-size": "xs",
+        "aria-live": maxLength !== undefined && charCount >= maxLength * 0.8 ? 'polite' : 'off',
+        children: maxLength !== undefined ? `${charCount} / ${maxLength}` : charCount
+      })]
+    })]
+  });
+});
+TextArea.displayName = 'TextArea';
+
+const Search = /*#__PURE__*/react.forwardRef(function Search({
+  label,
+  description,
+  helperMessage,
+  id: providedId,
+  invalid,
+  disabled,
+  readOnly,
+  value,
+  defaultValue,
+  onChange,
+  onClear,
+  clearLabel = 'Clear search',
+  ...inputProps
+}, forwardedRef) {
+  const {
+    inputId,
+    labelId,
+    descriptionId,
+    helperMessageId,
+    getDescribedBy
+  } = useFieldIds(providedId);
+  const isControlled = value !== undefined;
+  const [internalHasValue, setInternalHasValue] = react.useState(() => Boolean(defaultValue));
+  const hasValue = isControlled ? Boolean(value) : internalHasValue;
+  const inputRef = react.useRef(null);
+  const mergedRef = react.useCallback(node => {
+    inputRef.current = node;
+    if (typeof forwardedRef === 'function') {
+      forwardedRef(node);
+    } else if (forwardedRef) {
+      forwardedRef.current = node;
+    }
+  }, [forwardedRef]);
+  const handleChange = e => {
+    if (!isControlled) {
+      setInternalHasValue(Boolean(e.target.value));
+    }
+    onChange?.(e);
+  };
+  const handleClear = () => {
+    if (!isControlled && inputRef.current) {
+      // Direct DOM mutation: bypasses React's synthetic onChange, which is
+      // intentional — onClear is the designated callback for clear actions.
+      inputRef.current.value = '';
+      setInternalHasValue(false);
+    }
+    onClear?.();
+    inputRef.current?.focus();
+  };
+  const showClear = hasValue && !disabled && !readOnly;
+  // Accent only in interactive states — grey in error, readonly, disabled
+  const iconTone = disabled || readOnly || invalid ? 'neutral' : 'accent';
+  return /*#__PURE__*/jsxRuntime.jsx("search", {
+    className: "eds-search",
+    "aria-labelledby": label ? labelId : undefined,
+    children: /*#__PURE__*/jsxRuntime.jsxs(Field, {
+      disabled: disabled,
+      children: [label && /*#__PURE__*/jsxRuntime.jsx(Field.Label, {
+        id: labelId,
+        htmlFor: inputId,
+        children: label
+      }), description && /*#__PURE__*/jsxRuntime.jsx(Field.Description, {
+        id: descriptionId,
+        children: description
+      }), /*#__PURE__*/jsxRuntime.jsx(Input, {
+        ref: mergedRef,
+        id: inputId,
+        type: "search",
+        disabled: disabled,
+        readOnly: readOnly,
+        invalid: invalid,
+        value: value,
+        defaultValue: defaultValue,
+        onChange: handleChange,
+        "aria-describedby": getDescribedBy({
+          hasDescription: !!description,
+          hasHelperMessage: !!helperMessage
+        }),
+        hideErrorIcon: true,
+        startAdornment: /*#__PURE__*/jsxRuntime.jsx(Icon, {
+          data: edsIcons.search,
+          className: "search-icon",
+          "data-color-appearance": iconTone
+        }),
+        endAdornment: showClear ? /*#__PURE__*/jsxRuntime.jsx(Button, {
+          variant: "ghost",
+          icon: true,
+          round: true,
+          size: "small",
+          tone: invalid ? 'neutral' : 'accent',
+          onClick: handleClear,
+          "aria-label": clearLabel,
+          children: /*#__PURE__*/jsxRuntime.jsx(Icon, {
+            data: edsIcons.close
+          })
+        }) : undefined,
+        ...inputProps
+      }), helperMessage && /*#__PURE__*/jsxRuntime.jsx(Field.HelperMessage, {
+        id: helperMessageId,
+        role: invalid ? 'alert' : undefined,
+        children: helperMessage
+      })]
+    })
+  });
+});
+Search.displayName = 'Search';
+
+function mergeClassNames(...classNames) {
+  return classNames.filter(Boolean).join(' ');
+}
+function mergeProps(slotProps, childProps) {
+  const merged = {
+    ...childProps
+  };
+  for (const key of Object.keys(slotProps)) {
+    const slotValue = slotProps[key];
+    const childValue = childProps[key];
+    if (key === 'className') {
+      merged[key] = mergeClassNames(slotValue, childValue);
+    } else if (key === 'style') {
+      merged[key] = {
+        ...slotValue,
+        ...childValue
+      };
+    } else if (typeof slotValue === 'function' && typeof childValue === 'function') {
+      merged[key] = (...args) => {
+        childValue(...args);
+        slotValue(...args);
+      };
+    } else if (slotValue !== undefined) {
+      merged[key] = slotValue;
+    }
+  }
+  return merged;
+}
+const Slot = /*#__PURE__*/react.forwardRef(function Slot({
+  children,
+  ...slotProps
+}, ref) {
+  if (! /*#__PURE__*/react.isValidElement(children)) {
+    return null;
+  }
+  const child = children;
+  const merged = mergeProps(slotProps, child.props);
+  return /*#__PURE__*/react.cloneElement(child, {
+    ...merged,
+    ref
+  });
+});
+Slot.displayName = 'Slot';
+
+const Link = /*#__PURE__*/react.forwardRef(function Link({
+  variant = 'inline',
+  asChild,
+  className,
+  children,
+  ...rest
+}, ref) {
+  const classes = ['eds-link', className].filter(Boolean).join(' ');
+  const sharedProps = {
+    ref,
+    className: classes,
+    'data-variant': variant,
+    'data-color-appearance': 'info',
+    'data-font-family': variant === 'standalone' ? 'ui' : undefined,
+    'data-font-size': variant === 'standalone' ? 'md' : undefined,
+    'data-line-height': variant === 'standalone' ? 'squished' : undefined,
+    ...rest
+  };
+  if (asChild) {
+    return /*#__PURE__*/jsxRuntime.jsx(Slot, {
+      ...sharedProps,
+      children: children
+    });
+  }
+  return /*#__PURE__*/jsxRuntime.jsx("a", {
+    ...sharedProps,
+    children: children
+  });
+});
+Link.displayName = 'Link';
+
+const Tooltip = /*#__PURE__*/react.forwardRef(function Tooltip({
+  title,
+  placement = 'top',
+  disabled,
+  children,
+  className,
+  onMouseEnter: onMouseEnterProp,
+  onMouseLeave: onMouseLeaveProp,
+  ...rest
+}, ref) {
+  const uid = react.useId();
+  const tooltipId = `eds-tooltip-${uid.replace(/:/g, '')}`;
+  const anchorName = `--${tooltipId}`;
+  const tooltipRef = react.useRef(null);
+  const hideTimer = react.useRef(null);
+  const active = Boolean(title) && !disabled;
+  const show = () => {
+    if (hideTimer.current) clearTimeout(hideTimer.current);
+    if (!tooltipRef.current?.matches(':popover-open')) {
+      tooltipRef.current?.showPopover();
+    }
+  };
+
+  // Short delay so mouse can travel from trigger to tooltip (WCAG 1.4.13 — hoverable)
+  const hide = () => {
+    hideTimer.current = setTimeout(() => {
+      if (tooltipRef.current?.matches(':popover-open')) {
+        tooltipRef.current.hidePopover();
+      }
+    }, 100);
+  };
+
+  // Merge forwarded ref with internal ref
+  const setRef = node => {
+    tooltipRef.current = node;
+    if (typeof ref === 'function') ref(node);else if (ref) ref.current = node;
+  };
+  if (!active) return children;
+  return /*#__PURE__*/jsxRuntime.jsxs("span", {
+    className: "eds-tooltip-anchor",
+    style: {
+      '--tooltip-anchor-name': anchorName
+    },
+    onMouseEnter: show,
+    onMouseLeave: hide,
+    onFocus: show,
+    onBlur: hide,
+    children: [/*#__PURE__*/react.cloneElement(children, {
+      'aria-describedby': tooltipId
+    }), /*#__PURE__*/jsxRuntime.jsx("div", {
+      ref: setRef,
+      id: tooltipId,
+      role: "tooltip"
+      // hint: top-layer + Escape/light-dismiss. Safari falls back to manual (no Escape).
+      ,
+      popover: "hint",
+      className: ['eds-tooltip', className].filter(Boolean).join(' '),
+      "data-placement": placement,
+      "data-space-proportions": "squished",
+      ...rest,
+      onMouseEnter: e => {
+        if (hideTimer.current) clearTimeout(hideTimer.current);
+        onMouseEnterProp?.(e);
+      },
+      onMouseLeave: e => {
+        hide();
+        onMouseLeaveProp?.(e);
+      },
+      children: /*#__PURE__*/jsxRuntime.jsx("span", {
+        className: "label",
+        "data-font-family": "ui",
+        "data-font-size": "sm",
+        "data-baseline": "center",
+        children: title
+      })
+    })]
+  });
+});
+Tooltip.displayName = 'Tooltip';
+
+const BannerIcon = /*#__PURE__*/react.forwardRef(function BannerIcon({
+  className,
+  children,
+  ...rest
+}, ref) {
+  return /*#__PURE__*/jsxRuntime.jsx("span", {
+    ref: ref,
+    className: ['eds-banner__icon', className].filter(Boolean).join(' '),
+    ...rest,
+    children: children
+  });
+});
+const BannerMessage = /*#__PURE__*/react.forwardRef(function BannerMessage({
+  className,
+  children,
+  ...rest
+}, ref) {
+  return /*#__PURE__*/jsxRuntime.jsx(TypographyNext, {
+    ref: ref,
+    as: "p",
+    family: "ui",
+    size: "md",
+    baseline: "center",
+    lineHeight: "default",
+    tracking: "normal",
+    className: ['eds-banner__message', className].filter(Boolean).join(' '),
+    ...rest,
+    children: children
+  });
+});
+const BannerActions = /*#__PURE__*/react.forwardRef(function BannerActions({
+  placement = 'left',
+  className,
+  children,
+  ...rest
+}, ref) {
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    ref: ref,
+    className: ['eds-banner__actions', className].filter(Boolean).join(' '),
+    "data-placement": placement,
+    ...rest,
+    children: children
+  });
+});
+const BannerComponent = /*#__PURE__*/react.forwardRef(function Banner({
+  tone = 'info',
+  role = 'status',
+  onDismiss,
+  className,
+  children,
+  ...rest
+}, ref) {
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    ref: ref,
+    className: ['eds-banner', className].filter(Boolean).join(' '),
+    "data-color-appearance": tone,
+    role: role,
+    ...rest,
+    children: [children, onDismiss && /*#__PURE__*/jsxRuntime.jsx(Button, {
+      variant: "ghost",
+      icon: true,
+      size: "small",
+      className: "eds-banner__dismiss",
+      "aria-label": "Dismiss",
+      onClick: onDismiss,
+      children: /*#__PURE__*/jsxRuntime.jsx(Icon, {
+        data: edsIcons.close
+      })
+    })]
+  });
+});
+BannerIcon.displayName = 'Banner.Icon';
+BannerMessage.displayName = 'Banner.Message';
+BannerActions.displayName = 'Banner.Actions';
+BannerComponent.displayName = 'Banner';
+const Banner = BannerComponent;
+Banner.Icon = BannerIcon;
+Banner.Message = BannerMessage;
+Banner.Actions = BannerActions;
+
+exports.Banner = Banner;
 exports.Button = Button;
 exports.Checkbox = Checkbox;
 exports.Field = Field;
 exports.Icon = Icon;
 exports.Input = Input;
+exports.Link = Link;
 exports.Radio = Radio;
+exports.Search = Search;
+exports.Slot = Slot;
 exports.Switch = Switch;
+exports.TextArea = TextArea;
 exports.TextField = TextField;
+exports.Tooltip = Tooltip;
 exports.useFieldIds = useFieldIds;

package/dist/types/components/Autocomplete/Autocomplete.d.ts

@@ -67,6 +67,11 @@ export type AutocompleteProps<T = string> = {
      * @default 'summary'
      */
     selectionDisplay?: 'chips' | 'summary';
+    /** Amount of values to list in chips (only relevant if selectionDisplay = 'chips')
+     * When left blank, all values will be shown as chips
+     * @default undefined
+     */
+    chipCount?: number;
     /** Callback for the selected item change
      * changes.selectedItems gives the selected items
      */

package/dist/types/components/Autocomplete/AutocompleteContext.d.ts

@@ -39,6 +39,7 @@ export declare const AutocompleteContext: import("react").Context<{
     onInputChange: (text: string) => void;
     selectedOptions: unknown[];
     selectionDisplay: "summary" | "chips";
+    chipCount: number;
     itemToKey: (item: unknown) => unknown;
     itemCompare: (value: unknown, compare: unknown) => boolean;
     allowSelectAll: boolean;
@@ -73,6 +74,7 @@ export declare const AutocompleteContext: import("react").Context<{
         hideClearButton?: boolean;
         selectedOptions?: unknown[];
         selectionDisplay?: "chips" | "summary";
+        chipCount?: number;
         onOptionsChange?: (changes: import("./Autocomplete").AutocompleteChanges<unknown>) => void;
         onInputChange?: (text: string) => void;
         onAddNewOption?: (text: string) => void;
@@ -94,7 +96,7 @@ export declare const AutocompleteContext: import("react").Context<{
         optionLabel?: (option: unknown) => string;
     } & {
         ref?: React.Ref<HTMLInputElement>;
-    }, "disabled" | "className" | "style" | "meta" | "label" | "ref" | "multiple" | "variant" | "placeholder" | "readOnly" | "options" | "helperText" | "helperIcon" | "loading" | "optionDisabled" | "totalOptions" | "initialSelectedOptions" | "noOptionsText" | "hideClearButton" | "selectedOptions" | "selectionDisplay" | "onOptionsChange" | "onInputChange" | "onAddNewOption" | "allowSelectAll" | "optionComponent" | "optionsFilter" | "autoWidth" | "clearSearchOnChange" | "multiline" | "dropdownHeight" | "itemToKey" | "itemCompare" | "onClear" | "optionLabel">;
+    }, "disabled" | "className" | "id" | "style" | "meta" | "label" | "ref" | "multiple" | "variant" | "placeholder" | "readOnly" | "options" | "onClear" | "helperText" | "helperIcon" | "loading" | "optionDisabled" | "totalOptions" | "initialSelectedOptions" | "noOptionsText" | "hideClearButton" | "selectedOptions" | "selectionDisplay" | "chipCount" | "onOptionsChange" | "onInputChange" | "onAddNewOption" | "allowSelectAll" | "optionComponent" | "optionsFilter" | "autoWidth" | "clearSearchOnChange" | "multiline" | "dropdownHeight" | "itemToKey" | "itemCompare" | "optionLabel">;
     highlightedIndex: number;
     selectedItem: unknown;
     isOpen: boolean;
@@ -153,6 +155,7 @@ export declare const useAutocompleteContext: () => {
     onInputChange: (text: string) => void;
     selectedOptions: unknown[];
     selectionDisplay: "summary" | "chips";
+    chipCount: number;
     itemToKey: (item: unknown) => unknown;
     itemCompare: (value: unknown, compare: unknown) => boolean;
     allowSelectAll: boolean;
@@ -187,6 +190,7 @@ export declare const useAutocompleteContext: () => {
         hideClearButton?: boolean;
         selectedOptions?: unknown[];
         selectionDisplay?: "chips" | "summary";
+        chipCount?: number;
         onOptionsChange?: (changes: import("./Autocomplete").AutocompleteChanges<unknown>) => void;
         onInputChange?: (text: string) => void;
         onAddNewOption?: (text: string) => void;
@@ -208,7 +212,7 @@ export declare const useAutocompleteContext: () => {
         optionLabel?: (option: unknown) => string;
     } & {
         ref?: React.Ref<HTMLInputElement>;
-    }, "disabled" | "className" | "style" | "meta" | "label" | "ref" | "multiple" | "variant" | "placeholder" | "readOnly" | "options" | "helperText" | "helperIcon" | "loading" | "optionDisabled" | "totalOptions" | "initialSelectedOptions" | "noOptionsText" | "hideClearButton" | "selectedOptions" | "selectionDisplay" | "onOptionsChange" | "onInputChange" | "onAddNewOption" | "allowSelectAll" | "optionComponent" | "optionsFilter" | "autoWidth" | "clearSearchOnChange" | "multiline" | "dropdownHeight" | "itemToKey" | "itemCompare" | "onClear" | "optionLabel">;
+    }, "disabled" | "className" | "id" | "style" | "meta" | "label" | "ref" | "multiple" | "variant" | "placeholder" | "readOnly" | "options" | "onClear" | "helperText" | "helperIcon" | "loading" | "optionDisabled" | "totalOptions" | "initialSelectedOptions" | "noOptionsText" | "hideClearButton" | "selectedOptions" | "selectionDisplay" | "chipCount" | "onOptionsChange" | "onInputChange" | "onAddNewOption" | "allowSelectAll" | "optionComponent" | "optionsFilter" | "autoWidth" | "clearSearchOnChange" | "multiline" | "dropdownHeight" | "itemToKey" | "itemCompare" | "optionLabel">;
     highlightedIndex: number;
     selectedItem: unknown;
     isOpen: boolean;

package/dist/types/components/Autocomplete/useAutocomplete.d.ts

@@ -1,7 +1,7 @@
 import type { DOMAttributes } from 'react';
 import { AutocompleteProps } from './Autocomplete';
 import { AutocompleteToken } from './Autocomplete.tokens';
-export declare const useAutocomplete: <T>({ options, totalOptions, label, meta, className, style, disabled, readOnly, loading, hideClearButton, onOptionsChange, onAddNewOption, onInputChange, selectedOptions: _selectedOptions, selectionDisplay, multiple, itemToKey: _itemToKey, itemCompare: _itemCompare, allowSelectAll, initialSelectedOptions: _initialSelectedOptions, optionDisabled, optionsFilter, autoWidth, placeholder, optionLabel, clearSearchOnChange, multiline, dropdownHeight, optionComponent, helperText, helperIcon, noOptionsText, variant, onClear, ref, ...other }: AutocompleteProps<T> & {
+export declare const useAutocomplete: <T>({ options, totalOptions, label, meta, className, style, disabled, readOnly, loading, hideClearButton, onOptionsChange, onAddNewOption, onInputChange, selectedOptions: _selectedOptions, selectionDisplay, chipCount, multiple, itemToKey: _itemToKey, itemCompare: _itemCompare, allowSelectAll, initialSelectedOptions: _initialSelectedOptions, optionDisabled, optionsFilter, autoWidth, placeholder, optionLabel, clearSearchOnChange, multiline, dropdownHeight, optionComponent, helperText, helperIcon, noOptionsText, variant, onClear, ref, id, ...other }: AutocompleteProps<T> & {
     ref?: React.Ref<HTMLInputElement>;
 }) => {
     getDropdownProps: <Options>(options?: import("downshift").UseMultipleSelectionGetDropdownPropsOptions & Options, extraOptions?: import("downshift").GetPropsCommonOptions) => Omit<import("downshift").Overwrite<import("downshift").UseMultipleSelectionGetDropdownReturnValue, Options>, "preventKeyAction">;
@@ -44,6 +44,7 @@ export declare const useAutocomplete: <T>({ options, totalOptions, label, meta,
     onInputChange: (text: string) => void;
     selectedOptions: T[];
     selectionDisplay: "summary" | "chips";
+    chipCount: number;
     itemToKey: (item: T) => unknown;
     itemCompare: (value: T, compare: T) => boolean;
     allowSelectAll: boolean;
@@ -78,6 +79,7 @@ export declare const useAutocomplete: <T>({ options, totalOptions, label, meta,
         hideClearButton?: boolean;
         selectedOptions?: T[];
         selectionDisplay?: "chips" | "summary";
+        chipCount?: number;
         onOptionsChange?: (changes: import("./Autocomplete").AutocompleteChanges<T>) => void;
         onInputChange?: (text: string) => void;
         onAddNewOption?: (text: string) => void;
@@ -103,7 +105,7 @@ export declare const useAutocomplete: <T>({ options, totalOptions, label, meta,
         optionLabel?: (option: T) => string;
     }) & {
         ref?: React.Ref<HTMLInputElement>;
-    }, "disabled" | "className" | "style" | "meta" | "label" | "ref" | "multiple" | "variant" | "placeholder" | "readOnly" | "options" | "helperText" | "helperIcon" | "loading" | "optionDisabled" | "totalOptions" | "initialSelectedOptions" | "noOptionsText" | "hideClearButton" | "selectedOptions" | "selectionDisplay" | "onOptionsChange" | "onInputChange" | "onAddNewOption" | "allowSelectAll" | "optionComponent" | "optionsFilter" | "autoWidth" | "clearSearchOnChange" | "multiline" | "dropdownHeight" | "itemToKey" | "itemCompare" | "onClear" | "optionLabel">;
+    }, "disabled" | "className" | "id" | "style" | "meta" | "label" | "ref" | "multiple" | "variant" | "placeholder" | "readOnly" | "options" | "onClear" | "helperText" | "helperIcon" | "loading" | "optionDisabled" | "totalOptions" | "initialSelectedOptions" | "noOptionsText" | "hideClearButton" | "selectedOptions" | "selectionDisplay" | "chipCount" | "onOptionsChange" | "onInputChange" | "onAddNewOption" | "allowSelectAll" | "optionComponent" | "optionsFilter" | "autoWidth" | "clearSearchOnChange" | "multiline" | "dropdownHeight" | "itemToKey" | "itemCompare" | "optionLabel">;
     highlightedIndex: number;
     selectedItem: T;
     isOpen: boolean;

package/dist/types/components/next/Banner/Banner.d.ts

@@ -0,0 +1,23 @@
+declare const BannerIcon: import("react").ForwardRefExoticComponent<{
+    children: import("react").ReactNode;
+} & import("react").HTMLAttributes<HTMLSpanElement> & import("react").RefAttributes<HTMLSpanElement>>;
+declare const BannerMessage: import("react").ForwardRefExoticComponent<{
+    children: import("react").ReactNode;
+} & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLParagraphElement>>;
+declare const BannerActions: import("react").ForwardRefExoticComponent<{
+    placement?: import("./Banner.types").BannerActionsPlacement;
+    children: import("react").ReactNode;
+} & import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+declare const BannerComponent: import("react").ForwardRefExoticComponent<{
+    tone?: import("./Banner.types").BannerTone;
+    role?: import("react").HTMLAttributes<HTMLDivElement>["role"];
+    onDismiss?: () => void;
+    children: import("react").ReactNode;
+} & import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+type CompoundBanner = typeof BannerComponent & {
+    Icon: typeof BannerIcon;
+    Message: typeof BannerMessage;
+    Actions: typeof BannerActions;
+};
+export declare const Banner: CompoundBanner;
+export {};

package/dist/types/components/next/Banner/Banner.figma.d.ts

@@ -0,0 +1 @@
+export {};