@agregio-solutions/design-system 1.102.6 → 2.1.0

package/dist/packages/components/Button/components/HoldProgress/HoldProgress.d.ts

@@ -19,4 +19,4 @@ export interface Props {
  * percent would mean re-rendering on each frame, and the label already tells
  * the user what to do.
  */
-export default function HoldProgress({ size, duration }: Props): import("react").JSX.Element;
+export default function HoldProgress({ size, duration }: Props): import('react').JSX.Element;

package/dist/packages/components/Button/components/IconLeftElement/IconLeftElement.d.ts

@@ -8,4 +8,4 @@ export interface Props {
 /**
  * Leading slot of a button: the loader takes over the icon while loading.
  */
-export default function IconLeftElement({ iconLeft, isLoading, size }: Props): import("react").JSX.Element | null;
+export default function IconLeftElement({ iconLeft, isLoading, size }: Props): import('react').JSX.Element | null;

package/dist/packages/components/Button/components/IconRightElement/IconRightElement.d.ts

@@ -9,4 +9,4 @@ export interface Props {
 /**
  * Trailing slot of a button.
  */
-export default function IconRightElement({ iconRight, text, isLoading, size, }: Props): import("react").JSX.Element | null;
+export default function IconRightElement({ iconRight, text, isLoading, size, }: Props): import('react').JSX.Element | null;

package/dist/packages/components/Button/doc.md

@@ -438,6 +438,31 @@ export const LinkWithTarget: StoryObj<typeof Button> = {
   },
 };
 
+export const ShouldFindTheDisabledButtonByItsText: StoryObj<typeof Button> = {
+  args: {
+    ...Playground.args,
+    disabled: true,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByText("[Insert name]")).toBeDisabled();
+  },
+};
+
+export const ShouldFindTheLoadingButtonByItsText: StoryObj<typeof Button> = {
+  args: {
+    ...Playground.args,
+    isLoading: true,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByText("[Insert name]")).toHaveAttribute(
+      "aria-disabled",
+      "true",
+    );
+  },
+};
+
 export const LoadingKeepsTheButtonFocusable: StoryObj<typeof Button> = {
   args: {
     ...Playground.args,
@@ -480,6 +505,8 @@ export const LoadingLinkIsDisabled: StoryObj<typeof Button> = {
 };
 
 const HOLD_DURATION = 300;
+// How the browser serializes the "transparent" keyword in a computed style
+const TRANSPARENT = "rgba(0, 0, 0, 0)";
 
 // `userEvent.pointer` does not drive React Aria's press events here, so we
 // dispatch the pointer events ourselves to press without releasing.
@@ -526,7 +553,9 @@ export const HoldReleasedTooEarly: StoryObj<typeof Button> = {
 
     await pressWithoutReleasing(button);
     await someTime(HOLD_DURATION / 3);
-    await expect(canvas.getByText("[Insert name]")).not.toBeVisible();
+    await expect(getComputedStyle(button).webkitTextFillColor).toBe(
+      TRANSPARENT,
+    );
     // The progress must be in the accessibility tree while the label is hidden
     await expect(
       canvas.getByRole("progressbar", { name: "Keep holding to confirm" }),
@@ -535,7 +564,9 @@ export const HoldReleasedTooEarly: StoryObj<typeof Button> = {
     await release(button);
     await someTime(HOLD_DURATION * 2);
     await expect(args.onClick).not.toHaveBeenCalled();
-    await expect(canvas.getByText("[Insert name]")).toBeVisible();
+    await expect(getComputedStyle(button).webkitTextFillColor).not.toBe(
+      TRANSPARENT,
+    );
     await expect(canvas.queryByRole("progressbar")).not.toBeInTheDocument();
   },
 };

package/dist/packages/components/ChartLegend/ChartLegend.d.ts

@@ -35,4 +35,4 @@ export type Props = Omit<ButtonProps, "onPress" | "isDisabled" | "children"> & {
      */
     customIcon?: React.ReactNode;
 };
-export default function ChartLegend({ text, chartColor, onClick, isSelected, icon, customIcon, circleOutlineColor, ...reactAriaButtonProps }: Props): import("react").JSX.Element;
+export default function ChartLegend({ text, chartColor, onClick, isSelected, icon, customIcon, circleOutlineColor, ...reactAriaButtonProps }: Props): import('react').JSX.Element;

package/dist/packages/components/Combobox/Combobox.d.ts

@@ -3,17 +3,24 @@ import { Props as FormGroupWrapperProps } from '../../internal-components/FormGr
 import { Props as SelectItemProps } from '../SelectItem/SelectItem';
 import { Props as LabelProps } from '../Label/Label';
 export type ComboboxItem = SelectItemProps;
-export type Props = Pick<LabelProps, "label" | "labelIconRight" | "labelIconRightTooltip" | "required"> & Pick<FormGroupWrapperProps, "description" | "helperText" | "helperTextIcon" | "errorHelperText" | "errorHelperTextIcon" | "successHelperText" | "successHelperTextIcon" | "warningHelperText" | "warningHelperTextIcon" | "orientation"> & {
+/**
+ * The props of the single selection mode, and of the deprecated multiple selection workaround.
+ * Kept as a single object type so that the types consumers derive from it (`Omit`, `Props["value"]`, `interface extends`) keep compiling.
+ * The native multiple selection mode has its own props: `MultipleProps`.
+ */
+export type Props = Pick<LabelProps, "label" | "labelIconRight" | "labelIconRightTooltip" | "required"> & Pick<FormGroupWrapperProps, "helperText" | "helperTextIcon" | "errorHelperText" | "errorHelperTextIcon" | "successHelperText" | "successHelperTextIcon" | "warningHelperText" | "warningHelperTextIcon" | "orientation"> & {
     /**
      * Required id, used mainly to link the label to the field.
      */
     id: string;
     /**
      * The controlled value of the Combobox. Should be used in conjunction with `onChange`.
+     * Not used in the native multiple selection mode, see `selectedKeys`.
      */
     value: string | null;
     /**
      * Event handler called when the value changes.
+     * Not used in the native multiple selection mode, see `onSelectionChange`.
      */
     onChange: (value: string) => void;
     /**
@@ -28,6 +35,8 @@ export type Props = Pick<LabelProps, "label" | "labelIconRight" | "labelIconRigh
     items?: Array<ComboboxItem>;
     /**
      * The selection mode of the Combobox.
+     * For multiple selection, pass `selectedKeys` and `onSelectionChange` instead of `value` and `onChange`.
+     * Using `"multiple"` with `value` and `onChange` is deprecated: this workaround fakes the multiple selection on top of a single one.
      * @default "single"
      */
     selectionMode?: "single" | "multiple";
@@ -91,92 +100,40 @@ export type Props = Pick<LabelProps, "label" | "labelIconRight" | "labelIconRigh
      */
     triggerContentRight?: React.ReactNode;
 };
-declare const Combobox: React.ForwardRefExoticComponent<Pick<LabelProps, "label" | "required" | "labelIconRight" | "labelIconRightTooltip"> & Pick<FormGroupWrapperProps, "orientation" | "description" | "helperText" | "helperTextIcon" | "errorHelperText" | "errorHelperTextIcon" | "successHelperText" | "successHelperTextIcon" | "warningHelperText" | "warningHelperTextIcon"> & {
-    /**
-     * Required id, used mainly to link the label to the field.
-     */
-    id: string;
-    /**
-     * The controlled value of the Combobox. Should be used in conjunction with `onChange`.
-     */
-    value: string | null;
-    /**
-     * Event handler called when the value changes.
-     */
-    onChange: (value: string) => void;
-    /**
-     * The items to display in the dropdown (uncontrolled, filtering managed internally).
-     */
-    defaultItems?: Array<ComboboxItem>;
-    /**
-     * The items to display in the dropdown.
-     * /!\ Warning: using this prop will make the filtering mode "controlled" !
-     * Use it in pair with `inputValue` and `onInputChange` props, and manage the filtered of items yourself.
-     */
-    items?: Array<ComboboxItem>;
+/**
+ * The props of the native multiple selection mode.
+ */
+export type MultipleProps = Omit<Props, "value" | "onChange" | "selectionMode"> & {
     /**
      * The selection mode of the Combobox.
-     * @default "single"
-     */
-    selectionMode?: "single" | "multiple";
-    /**
-     * Specifies the nature of the Combobox (mainly to change the trigger border color and helperText color).
-     * If you do not pass a nature prop, the component will automatically set the nature based on the presence of success/error messages
-     */
-    nature?: "default" | "negative" | "positive" | "warning";
-    /**
-     * The value of the ComboBox input (controlled).
-     */
-    inputValue?: string;
-    /**
-     * Event handler called when the input value changes (controlled).
      */
-    onInputChange?: (value: string) => void;
+    selectionMode: "multiple";
     /**
-     * The default value of the ComboBox input (uncontrolled).
+     * The ids of the selected items (controlled). Pass `[]` when nothing is selected.
      */
-    defaultInputValue?: string;
+    selectedKeys: Array<string>;
     /**
-     * When true, prevents the user from interacting with Combobox.
+     * Event handler called with the ids of all the selected items when the selection changes.
      */
-    disabled?: boolean;
-    /**
-     * The content that will be rendered inside the input when no value or defaultValue is set.
-     */
-    placeholder?: string;
-    /**
-     * Props to pass to the wrapper div (for example, style or className)
-     */
-    wrapperProps?: React.HTMLProps<HTMLDivElement>;
-    /**
-     * Props to pass to the input (for example, style or className).
-     */
-    inputProps?: React.HTMLProps<HTMLInputElement>;
-    /**
-     * Whether the input should take the full width available
-     */
-    fullWidth?: boolean;
-    /**
-     * Disabled items in the dropdown, should be the item's id.
-     */
-    disabledIds?: Array<string>;
-    /**
-     * If you give a ReactNode as label, you should then provide an aria-label as string to ensure there is no accessibility issue
-     */
-    "aria-label"?: string;
-    /**
-     * The filter function used to determine if a option should be included in the combo box list.
-     */
-    defaultFilter?: (textValue: string, inputValue: string) => boolean;
-    /**
-     * When true, increases the dropdown max-height from 200px to 400px.
-     */
-    tallDropdown?: boolean;
-    /**
-     * An element rendered inside the field, on the left of the dropdown trigger.
-     * Typically a `Badge` displaying the number of selected items in `selectionMode="multiple"`.
-     * It lays out in the flow, so the input shrinks to make room for it whatever its width.
-     */
-    triggerContentRight?: React.ReactNode;
-} & React.RefAttributes<HTMLInputElement>>;
-export default Combobox;
+    onSelectionChange: (selectedKeys: Array<string>) => void;
+};
+type SingleProps = Omit<Props, "selectionMode"> & {
+    selectionMode?: "single";
+};
+type WithRef<P> = P & React.RefAttributes<HTMLInputElement>;
+/**
+ * Overloads: TypeScript resolves a JSX element against each signature in order.
+ * The order matters: Storybook documents the props of the first signature,
+ * and `ComponentProps<typeof Combobox>` reads the last one, which stays `Props`.
+ */
+type ComboboxComponent = {
+    (props: WithRef<SingleProps>): React.ReactNode;
+    (props: WithRef<MultipleProps>): React.ReactNode;
+    /**
+     * @deprecated The multiple selection with `value` and `onChange` is a workaround on top of a single selection.
+     * Use `selectedKeys` and `onSelectionChange` instead, see the "Multiple selection" section of the Combobox docs.
+     */
+    (props: WithRef<Props>): React.ReactNode;
+} & Omit<React.ForwardRefExoticComponent<WithRef<Props>>, never>;
+declare const _default: ComboboxComponent;
+export default _default;