@kaizen/components 1.47.6 → 1.49.0

package/dist/types/Input/Input/Input.d.ts

@@ -10,6 +10,11 @@ export type InputProps = {
     endIconAdornment?: React.ReactNode;
     reversed?: boolean;
     type?: InputType;
+    /**
+     * @deprecated Use of placeholder text goes against our a11y standards.
+     * Use the `labelText` prop to provide a concise name, and the `description` prop for any help text.
+     */
+    placeholder?: string;
 } & OverrideClassName<InputHTMLAttributes<HTMLInputElement>>;
 export declare const Input: {
     ({ inputRef, status, startIconAdornment, endIconAdornment, reversed, type, value, defaultValue, classNameOverride, disabled, ...restProps }: InputProps): JSX.Element;

package/dist/types/RichTextEditor/utils/plugins/LinkManager/validation.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 export type ValidationResponse = {
     status: "success" | "error" | "default";
     message?: React.ReactNode;

package/dist/types/Select/Select.d.ts

@@ -24,6 +24,11 @@ export type SelectProps = {
      * @default false
      */
     fullWidth?: boolean;
+    /**
+     * @deprecated Use of placeholder text goes against our a11y standards.
+     * Use the `labelText` prop to provide a concise name, and the `description` prop for any help text.
+     */
+    placeholder?: string;
 } & ReactSelectProps<any, boolean>;
 /**
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3081896474/Select Guidance} |
@@ -52,6 +57,11 @@ export declare const Select: React.ForwardRefExoticComponent<{
      * @default false
      */
     fullWidth?: boolean | undefined;
+    /**
+     * @deprecated Use of placeholder text goes against our a11y standards.
+     * Use the `labelText` prop to provide a concise name, and the `description` prop for any help text.
+     */
+    placeholder?: string | undefined;
 } & Omit<import("react-select/dist/declarations/src/Select").PublicBaseSelectProps<any, boolean, import("react-select").GroupBase<any>>, "onChange" | "value" | "inputValue" | "onInputChange" | "menuIsOpen" | "onMenuOpen" | "onMenuClose"> & Partial<import("react-select/dist/declarations/src/Select").PublicBaseSelectProps<any, boolean, import("react-select").GroupBase<any>>> & import("react-select/dist/declarations/src/useStateManager").StateManagerAdditionalProps<any> & React.RefAttributes<any>>;
 interface AsyncProps extends ReactAsyncSelectProps<any, boolean, any>, ReactSelectProps<any, boolean, any> {
 }

package/dist/types/TextArea/TextArea.d.ts

@@ -5,6 +5,11 @@ export type TextAreaProps = {
     status?: "default" | "error" | "caution";
     autogrow?: boolean;
     reversed?: boolean;
+    /**
+     * @deprecated Use of placeholder text goes against our a11y standards.
+     * Use the `labelText` prop to provide a concise name, and the `description` prop for any help text.
+     */
+    placeholder?: string;
 } & OverrideClassName<TextareaHTMLAttributes<HTMLTextAreaElement>>;
 export declare const TextArea: {
     ({ textAreaRef: propsTextAreaRef, status, autogrow, reversed, rows, defaultValue, value, disabled, onChange: propsOnChange, ...restProps }: TextAreaProps): JSX.Element;

package/dist/types/__future__/Select/Select.d.ts

@@ -40,6 +40,11 @@ export type SelectProps<Option extends SelectOption = SelectOption> = {
      * Creates a portal for the Popover to the matching element id
      */
     portalContainerId?: string;
+    /**
+     * @deprecated Use of placeholder text goes against our a11y standards.
+     * Use the `labelText` prop to provide a concise name, and the `description` prop for any help text.
+     */
+    placeholder?: string;
 } & OverrideClassName<Omit<AriaSelectProps<Option>, OmittedAriaSelectProps>>;
 /**
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3081896474/Select Guidance} |

package/dist/types/__future__/Select/subcomponents/SelectToggle/SelectToggle.d.ts

@@ -8,6 +8,10 @@ export type SelectToggleProps = {
     /** Props for the element representing the selected value. */
     valueProps: DOMAttributes<FocusableElement>;
     isOpen?: boolean;
+    /**
+     * @deprecated Use of placeholder text goes against our a11y standards.
+     * Use the `labelText` prop to provide a concise name, and the `description` prop for any help text.
+     */
     placeholder?: string;
     /** Updates the styling of the validation. */
     status?: "error" | "caution";
@@ -22,6 +26,10 @@ export declare const SelectToggle: React.ForwardRefExoticComponent<{
     /** Props for the element representing the selected value. */
     valueProps: DOMAttributes<FocusableElement>;
     isOpen?: boolean | undefined;
+    /**
+     * @deprecated Use of placeholder text goes against our a11y standards.
+     * Use the `labelText` prop to provide a concise name, and the `description` prop for any help text.
+     */
     placeholder?: string | undefined;
     /** Updates the styling of the validation. */
     status?: "error" | "caution" | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.47.6",
+  "version": "1.49.0",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
@@ -60,7 +60,7 @@
     "prosemirror-state": "^1.4.3",
     "prosemirror-transform": "^1.9.0",
     "prosemirror-utils": "^1.2.2",
-    "prosemirror-view": "^1.33.6",
+    "prosemirror-view": "^1.33.7",
     "react-animate-height": "^3.2.3",
     "react-day-picker": "^8.10.1",
     "react-focus-lock": "^2.12.1",
@@ -79,22 +79,23 @@
   },
   "devDependencies": {
     "@cultureamp/frontend-apis": "^9.5.0",
-    "@cultureamp/i18n-react-intl": "^2.5.7",
+    "@cultureamp/i18n-react-intl": "^2.5.8",
     "@types/lodash.debounce": "^4.0.9",
     "@types/react-dom": "^18.3.0",
     "@types/react-textfit": "^1.1.4",
     "@types/uuid": "^9.0.8",
     "autoprefixer": "^10.4.19",
+    "concat-cli": "^4.0.0",
     "query-string": "^9.0.0",
     "react-intl": "^6.6.8",
     "rollup": "^4.18.0",
-    "sass": "^1.77.2",
+    "sass": "^1.77.4",
     "serialize-query-params": "^2.0.2",
     "svgo": "^3.3.2",
-    "ts-jest": "^29.1.3",
+    "ts-jest": "^29.1.4",
     "tslib": "^2.6.2",
     "tsx": "^4.11.0",
-    "@kaizen/package-bundler": "1.0.2",
+    "@kaizen/package-bundler": "1.1.0",
     "@kaizen/design-tokens": "10.4.1"
   },
   "devDependenciesComments": {
@@ -103,15 +104,17 @@
     "postcss-preset-env": "Installed in root"
   },
   "peerDependencies": {
-    "@cultureamp/i18n-react-intl": "^2.5.7",
+    "@cultureamp/i18n-react-intl": "^2.5.8",
     "react": "^18.3.1",
     "react-intl": "^6.6.8"
   },
   "scripts": {
-    "build": "pnpm package-bundler build-shared-ui && pnpm build:global-styles",
-    "build:global-styles": "postcss ./styles/global.css --output dist/styles.css",
     "clean": "rm -rf dist",
     "lint:ts": "tsc --noEmit",
+    "build": "pnpm package-bundler build-shared-ui && pnpm build:styles",
+    "build:global-styles": "postcss ./styles/global.css --output dist/global.css",
+    "build:combine-styles": "concat-cli -f ./dist/global.css ./dist/styles.css -o ./dist/styles.css && rm ./dist/global.css",
+    "build:styles": "pnpm build:global-styles && pnpm build:combine-styles",
     "test": "FORCE_COLOR=1 jest",
     "test:ci": "pnpm test -- --ci",
     "update-icons": "./src/Icon/bin/update-icons.sh",

package/src/DateInput/DateInput/DateInput.tsx

@@ -27,6 +27,7 @@ export const DateInput = React.forwardRef<HTMLInputElement, DateInputProps>(
     <div className={classnames(styles.dateInput, classNameOverride)}>
       <Label
         htmlFor={id}
+        id={`${id}-input-label`}
         labelText={labelText}
         reversed={isReversed}
         disabled={disabled}

package/src/DatePicker/DatePicker.spec.tsx

@@ -33,7 +33,7 @@ describe("<DatePicker />", () => {
 
   it("should have an empty input value when a date is not provided", () => {
     render(<DatePickerWrapper />)
-    const input = screen.getByLabelText("Input label")
+    const input = screen.getByLabelText("Input label", { selector: "input" })
     expect(input).toHaveValue("")
   })
 
@@ -72,7 +72,7 @@ describe("<DatePicker />", () => {
 
   it("allows you to tab through input, button and calendar", async () => {
     render(<DatePickerWrapper />)
-    const input = screen.getByLabelText("Input label")
+    const input = screen.getByLabelText("Input label", { selector: "input" })
 
     await user.tab()
     await waitFor(() => {
@@ -112,7 +112,7 @@ describe("<DatePicker />", () => {
       screen.queryByText("05/01/2022 is not available, try another date")
     ).not.toBeInTheDocument()
 
-    const input = screen.getByLabelText("Input label")
+    const input = screen.getByLabelText("Input label", { selector: "input" })
     await user.click(input)
 
     await waitFor(() => {
@@ -137,7 +137,7 @@ describe("<DatePicker /> - Focus element", () => {
     beforeEach(async () => {
       render(<DatePickerWrapper selectedDay={new Date("2022-03-01")} />)
 
-      const input = screen.getByLabelText("Input label")
+      const input = screen.getByLabelText("Input label", { selector: "input" })
       await user.click(input)
     })
 
@@ -146,7 +146,7 @@ describe("<DatePicker /> - Focus element", () => {
         expect(screen.queryByRole("dialog")).toBeVisible()
       })
 
-      const input = screen.getByLabelText("Input label")
+      const input = screen.getByLabelText("Input label", { selector: "input" })
       expect(input).toHaveFocus()
     })
 
@@ -157,7 +157,7 @@ describe("<DatePicker /> - Focus element", () => {
 
       await user.keyboard("{Escape}")
 
-      const input = screen.getByLabelText("Input label")
+      const input = screen.getByLabelText("Input label", { selector: "input" })
       expect(input).toHaveFocus()
     })
 
@@ -170,7 +170,7 @@ describe("<DatePicker /> - Focus element", () => {
       const dateToSelect = within(month).getByRole("gridcell", { name: "6" })
       await user.click(dateToSelect)
 
-      const input = screen.getByLabelText("Input label")
+      const input = screen.getByLabelText("Input label", { selector: "input" })
       expect(input).toHaveFocus()
     })
   })
@@ -181,7 +181,7 @@ describe("<DatePicker /> - Focus element", () => {
     })
 
     it("shows focus within the calendar", async () => {
-      const input = screen.getByLabelText("Input label")
+      const input = screen.getByLabelText("Input label", { selector: "input" })
       await user.tab()
       await waitFor(() => {
         expect(input).toHaveFocus()
@@ -198,7 +198,7 @@ describe("<DatePicker /> - Focus element", () => {
     })
 
     it("returns focus to the input when the user escapes from the calendar", async () => {
-      const input = screen.getByLabelText("Input label")
+      const input = screen.getByLabelText("Input label", { selector: "input" })
       await user.tab()
       await waitFor(() => {
         expect(input).toHaveFocus()
@@ -303,7 +303,7 @@ describe("<DatePicker /> - Input format", () => {
   it("formats values when focus is on the input", async () => {
     render(<DatePickerWrapper selectedDay={new Date("2022-03-01")} />)
 
-    const input = screen.getByLabelText("Input label")
+    const input = screen.getByLabelText("Input label", { selector: "input" })
     expect(input).toHaveValue("Mar 1, 2022")
 
     await user.click(input)
@@ -316,7 +316,7 @@ describe("<DatePicker /> - Input format", () => {
   it("formats values when the input loses focus - onBlur", async () => {
     render(<DatePickerWrapper selectedDay={new Date("2022-03-01")} />)
 
-    const input = screen.getByLabelText("Input label")
+    const input = screen.getByLabelText("Input label", { selector: "input" })
     expect(input).toHaveValue("Mar 1, 2022")
 
     await user.click(input)
@@ -409,7 +409,7 @@ describe("<DatePicker /> - Validation", () => {
           defaultMonth={new Date("2022-03-01")}
         />
       )
-      const input = screen.getByLabelText("Input label")
+      const input = screen.getByLabelText("Input label", { selector: "input" })
       await user.click(input)
       await waitFor(() => {
         expect(screen.queryByRole("dialog")).toBeVisible()
@@ -449,7 +449,7 @@ describe("<DatePicker /> - Validation", () => {
     it("displays error message when input date is invalid", async () => {
       render(<DatePickerWrapper />)
 
-      const input = screen.getByLabelText("Input label")
+      const input = screen.getByLabelText("Input label", { selector: "input" })
       await user.type(input, "05/05/2022Blah")
 
       await user.tab()
@@ -464,7 +464,7 @@ describe("<DatePicker /> - Validation", () => {
     it("displays error message when input date is disabled", async () => {
       render(<DatePickerWrapper disabledBefore={new Date("2022-05-15")} />)
 
-      const input = screen.getByLabelText("Input label")
+      const input = screen.getByLabelText("Input label", { selector: "input" })
       await user.type(input, "05/05/2022")
 
       await user.tab()

package/src/DatePicker/DatePicker.tsx

@@ -16,6 +16,7 @@ import {
   setFocusInCalendar,
 } from "~components/Calendar"
 import { CalendarPopover } from "~components/Calendar/CalendarPopover"
+import { VisuallyHidden } from "~components/VisuallyHidden"
 import {
   DateInputField,
   DateInputFieldProps,
@@ -305,17 +306,25 @@ export const DatePicker = ({
       </div>
 
       {isOpen && (
-        <CalendarPopover referenceElement={containerRef.current}>
-          <CalendarSingle
-            id={calendarId}
-            selected={selectedDay}
-            defaultMonth={defaultMonth}
-            weekStartsOn={weekStartsOn}
-            disabled={disabledDays}
-            locale={locale}
-            onDayClick={handleCalendarDayChange}
-            onMount={handleCalendarMount}
-          />
+        <CalendarPopover
+          referenceElement={containerRef.current}
+          aria-labelledby={`${id}-calendar-label ${id}-input-label`}
+        >
+          <>
+            <VisuallyHidden id={`${id}-calendar-label`}>
+              Select date from calendar for:
+            </VisuallyHidden>
+            <CalendarSingle
+              id={calendarId}
+              selected={selectedDay}
+              defaultMonth={defaultMonth}
+              weekStartsOn={weekStartsOn}
+              disabled={disabledDays}
+              locale={locale}
+              onDayClick={handleCalendarDayChange}
+              onMount={handleCalendarMount}
+            />
+          </>
         </CalendarPopover>
       )}
     </FocusOn>

package/src/DateRangePicker/DateRangePicker.tsx

@@ -15,6 +15,7 @@ import {
 } from "~components/Calendar/LegacyCalendarRange"
 import { DateStartIcon } from "~components/Icon"
 import { Label } from "~components/Label"
+import { VisuallyHidden } from "~components/VisuallyHidden"
 import styles from "./DateRangePicker.module.scss"
 
 export type DateRangePickerProps = {
@@ -146,7 +147,12 @@ export const DateRangePicker = ({
   return (
     <div>
       <div ref={containerRef} className={classNameOverride}>
-        <Label disabled={isDisabled} htmlFor={id} labelText={labelText} />
+        <Label
+          id={`${id}-input-label`}
+          disabled={isDisabled}
+          htmlFor={id}
+          labelText={labelText}
+        />
         <button
           type="button"
           id={id}
@@ -178,7 +184,13 @@ export const DateRangePicker = ({
           onEscapeKey={handleOpenClose}
           enabled={isOpen}
         >
-          <CalendarPopover referenceElement={containerRef.current}>
+          <CalendarPopover
+            referenceElement={containerRef.current}
+            aria-labelledby={`${id}-calendar-label ${id}-input-label`}
+          >
+            <VisuallyHidden id={`${id}-calendar-label`}>
+              Select dates from calendar for:
+            </VisuallyHidden>
             <LegacyCalendarRange
               selectedRange={selectedDateRange}
               defaultMonth={defaultMonth}

package/src/DateRangePicker/_docs/DateRangePicker.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Controls, Meta } from "@storybook/blocks"
+import { Canvas, DocsStory, Controls, Meta } from "@storybook/blocks"
 import { ResourceLinks, KAIOInstallation } from "~storybook/components"
 import * as DateRangePickerStories from "./DateRangePicker.stories"
 
@@ -28,3 +28,7 @@ Date range picker form field.
 ## Responsive behaviour
 
 As both the `DatePicker` and `DateRangePicker` use the `CalendarPopover` component under the hood, they share the same responsive behaviour. You can read more on this [here](/docs/components-date-controls-datepicker--docs#responsive-behaviour).
+
+<DocsStory of={DateRangePickerStories.AboveIfAvailable} />
+<DocsStory of={DateRangePickerStories.LimitedViewportHeight} />
+<DocsStory of={DateRangePickerStories.FullViewportHeight} />

package/src/DateRangePicker/_docs/DateRangePicker.stories.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react"
 import { Meta, StoryObj } from "@storybook/react"
-import { fn } from "@storybook/test"
+import { userEvent, within, expect, fn } from "@storybook/test"
 import { DateRange } from "react-day-picker"
 import { DateRangePicker, formatDateRangeValue } from "../index"
 
@@ -20,8 +20,8 @@ type Story = StoryObj<typeof meta>
 const DateRangePickerTemplate: Story = {
   render: args => {
     const [selectedDateRange, setSelectedDateRange] = useState<DateRange>({
-      from: undefined,
-      to: undefined,
+      from: args?.selectedDateRange?.from,
+      to: args?.selectedDateRange?.to,
     })
     const [value, setValue] = useState(args.value)
 
@@ -58,3 +58,99 @@ export const Playground: Story = {
     },
   },
 }
+
+const selectedDateRange = {
+  from: new Date(2022, 2, 6),
+  to: new Date(2022, 2, 15),
+}
+
+export const AboveIfAvailable: Story = {
+  ...DateRangePickerTemplate,
+  name: "Limited viewport autoplacement above",
+  args: {
+    labelText: "Calendar with space above",
+    selectedDateRange,
+  },
+  parameters: {
+    viewport: {
+      viewports: {
+        LimitedViewportAutoPlace: {
+          name: "Limited vertical space",
+          styles: {
+            width: "1024px",
+            height: "500px",
+          },
+        },
+      },
+      defaultViewport: "LimitedViewportAutoPlace",
+    },
+  },
+  decorators: [
+    Story => (
+      <div className="mt-[350px]">
+        <Story />
+      </div>
+    ),
+  ],
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    await userEvent.click(canvas.getByRole("button", { name: /Change date:/ }))
+    await expect(canvas.getByRole("dialog")).toBeInTheDocument()
+  },
+}
+
+export const LimitedViewportHeight: Story = {
+  ...DateRangePickerTemplate,
+  name: "Limited viewport height",
+  args: {
+    labelText: "Calendar with reduced space below",
+    selectedDateRange,
+  },
+  parameters: {
+    viewport: {
+      viewports: {
+        LimitedViewportHeight: {
+          name: "Limited vertical space",
+          styles: {
+            width: "1024px",
+            height: "300px",
+          },
+        },
+      },
+      defaultViewport: "LimitedViewportHeight",
+    },
+  },
+  decorators: [
+    Story => (
+      <div className="mb-[150px]">
+        <Story />
+      </div>
+    ),
+  ],
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    await userEvent.click(canvas.getByRole("button", { name: /Change date:/ }))
+    await expect(canvas.getByRole("dialog")).toBeInTheDocument()
+  },
+}
+
+export const FullViewportHeight: Story = {
+  ...DateRangePickerTemplate,
+  name: "Full viewport height",
+  args: {
+    labelText: "Calendar with full space below",
+    selectedDateRange,
+  },
+  decorators: [
+    Story => (
+      <div className="mb-[350px]">
+        <Story />
+      </div>
+    ),
+  ],
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    await userEvent.click(canvas.getByRole("button", { name: /Change date:/ }))
+    await expect(canvas.getByRole("dialog")).toBeInTheDocument()
+  },
+}

package/src/FieldGroup/_docs/FieldGroup.stickersheet.stories.tsx

@@ -25,21 +25,11 @@ const FieldGroupTemplate = ({
   <div>
     <FieldGroup inline={inline} classNameOverride="mr-6">
       <Label htmlFor={`id--field-${id}`}>Email</Label>
-      <input
-        className="border border-gray-500"
-        placeholder="Native text input..."
-        type="text"
-        id="id--field-2"
-      />
+      <input className="border border-gray-500" type="text" id="id--field-2" />
     </FieldGroup>
     <FieldGroup inline={inline}>
       <Label htmlFor={`id--field-${id}`}>Username</Label>
-      <input
-        className="border border-gray-500"
-        placeholder="Native text input..."
-        type="text"
-        id="id--field-2"
-      />
+      <input className="border border-gray-500" type="text" id="id--field-2" />
     </FieldGroup>
   </div>
 )

package/src/FieldGroup/_docs/FieldGroup.stories.tsx

@@ -12,7 +12,6 @@ const meta = {
         <Label htmlFor="id--field-1">Email</Label>
         <input
           className="ms-6 border border-gray-500"
-          placeholder="Native text input..."
           type="text"
           id="id--field-1"
         />
@@ -42,16 +41,14 @@ export const Inline: Story = {
         <Label htmlFor="id--field-1">Email</Label>
         <input
           className="ms-6 border border-gray-500"
-          placeholder="Native text input..."
           type="text"
-          id="id--field-2"
+          id="id--field-1"
         />
       </FieldGroup>
       <FieldGroup inline>
-        <Label htmlFor="id--field-1">Username</Label>
+        <Label htmlFor="id--field-2">Username</Label>
         <input
           className="ms-6 border border-gray-500"
-          placeholder="Native text input..."
           type="text"
           id="id--field-2"
         />
@@ -67,16 +64,14 @@ export const Default: Story = {
         <Label htmlFor="id--field-1">Email</Label>
         <input
           className="ms-6 border border-gray-500"
-          placeholder="Native text input..."
           type="text"
-          id="id--field-2"
+          id="id--field-1"
         />
       </FieldGroup>
       <FieldGroup>
-        <Label htmlFor="id--field-1">Username</Label>
+        <Label htmlFor="id--field-2">Username</Label>
         <input
           className="ms-6 border border-gray-500"
-          placeholder="Native text input..."
           type="text"
           id="id--field-2"
         />

package/src/Input/Input/Input.tsx

@@ -14,6 +14,11 @@ export type InputProps = {
   endIconAdornment?: React.ReactNode
   reversed?: boolean
   type?: InputType
+  /**
+   * @deprecated Use of placeholder text goes against our a11y standards.
+   * Use the `labelText` prop to provide a concise name, and the `description` prop for any help text.
+   */
+  placeholder?: string
 } & OverrideClassName<InputHTMLAttributes<HTMLInputElement>>
 
 export const Input = ({

package/src/Input/InputSearch/InputSearch.spec.tsx

@@ -12,10 +12,12 @@ const defaultInputProps = {
   onChange: jest.fn(),
 }
 
-const renderInput = (props?: InputSearchProps): ReturnType<typeof render> => {
+const renderInput = (
+  props?: Omit<InputSearchProps, "id">
+): ReturnType<typeof render> => {
   const mergedInputProps = { ...defaultInputProps, ...props }
 
-  return render(<InputSearch {...mergedInputProps} />)
+  return render(<InputSearch {...mergedInputProps} data-testid="someInputId" />)
 }
 
 describe("<InputSearch />", () => {
@@ -28,9 +30,10 @@ describe("<InputSearch />", () => {
   })
 
   it("should call the `onChange` event when text value is updated", async () => {
-    const placeholder = "someInputPlaceholder"
-    const utils = renderInput({ value: "", placeholder, id: "someInputId" })
-    const input = utils.getByPlaceholderText(placeholder)
+    const utils = renderInput({
+      value: "",
+    })
+    const input = utils.getByTestId("someInputId")
 
     await user.type(input, "Hello")
     await waitFor(() => {
@@ -39,12 +42,12 @@ describe("<InputSearch />", () => {
   })
 
   it("should render a disabled inside of input", () => {
-    const { container } = renderInput({ disabled: true, id: "someInputId" })
+    const { container } = renderInput({ disabled: true })
     expect(container.querySelector("[disabled]")).toBeTruthy()
   })
 
   it("should render a reversed input", () => {
-    const { container } = renderInput({ reversed: true, id: "someInputId" })
+    const { container } = renderInput({ reversed: true })
     expect(container.querySelector(".reversed")).toBeTruthy()
   })
 })

package/src/Notification/ToastNotification/ToastNotificationsList/ToastNotificationsList.module.scss

@@ -12,7 +12,7 @@
   right: $spacing-md;
   top: 0;
   bottom: 0;
-  z-index: 1030;
+  z-index: 1100;
   max-width: 100%;
   pointer-events: none;