From 9b960e585a2d52832d866d31a6e6150e8a18b03f Mon Sep 17 00:00:00 2001
From: Nathan Lafrance-Berger <nathan.lafranceb@gmail.com>
Date: Thu, 7 Sep 2023 16:44:30 -0400
Subject: [PATCH] fix(atomic): added part to access ::after (#3151)

* fix(atomic): added part to access ::after

* Add generated files

* Add generated files

* Add generated files

* Add generated files

* fix(atomic): changed part name and added focus target fallback

* fix(atomic): added generated file

* fix(atomic): css selector

---------

Co-authored-by: GitHub Actions Bot <>
Co-authored-by: Olivier Lamothe <olamothe@coveo.com>
---
 packages/atomic/src/components.d.ts                        | 4 ++--
 .../src/components/common/search-box/search-box.pcss       | 2 +-
 .../src/components/common/search-box/search-text-area.tsx  | 7 ++++---
 .../search/atomic-search-box/atomic-search-box.tsx         | 4 ++--
 4 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/packages/atomic/src/components.d.ts b/packages/atomic/src/components.d.ts
index 3adf865ad95..4a25c337027 100644
--- a/packages/atomic/src/components.d.ts
+++ b/packages/atomic/src/components.d.ts
@@ -1656,7 +1656,7 @@ export namespace Components {
          */
         "suggestionTimeout": number;
         /**
-          * Whether to render the search box using a [textarea](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea) element. The resulting component will expand to support multi-line queries. When customizing the dimensions of the textarea element using the `"textarea"` CSS part, it is important to also apply the styling to its ::after pseudo-element as well as the `"textarea-spacer"` part. The buttons within the search box are likely to need adjusting as well.  Example: ```css <style>   atomic-search-box::part(textarea),   atomic-search-box::part(textarea)::after,   atomic-search-box::part(textarea-spacer) {     font-size: x-large;   }    atomic-search-box::part(submit-button-wrapper),   atomic-search-box::part(clear-button-wrapper) {     padding-top: 0.75rem;   } </style> ```
+          * Whether to render the search box using a [textarea](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea) element. The resulting component will expand to support multi-line queries. When customizing the dimensions of the textarea element using the `"textarea"` CSS part, it is important to also apply the styling to its container's ::after pseudo-element as well as the `"textarea-spacer"` part. The buttons within the search box are likely to need adjusting as well.  Example: ```css <style>   atomic-search-box::part(textarea),   atomic-search-box::part(textarea-expander)::after,   atomic-search-box::part(textarea-spacer) {     font-size: x-large;   }    atomic-search-box::part(submit-button-wrapper),   atomic-search-box::part(clear-button-wrapper) {     padding-top: 0.75rem;   } </style> ```
          */
         "textarea": boolean;
     }
@@ -4588,7 +4588,7 @@ declare namespace LocalJSX {
          */
         "suggestionTimeout"?: number;
         /**
-          * Whether to render the search box using a [textarea](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea) element. The resulting component will expand to support multi-line queries. When customizing the dimensions of the textarea element using the `"textarea"` CSS part, it is important to also apply the styling to its ::after pseudo-element as well as the `"textarea-spacer"` part. The buttons within the search box are likely to need adjusting as well.  Example: ```css <style>   atomic-search-box::part(textarea),   atomic-search-box::part(textarea)::after,   atomic-search-box::part(textarea-spacer) {     font-size: x-large;   }    atomic-search-box::part(submit-button-wrapper),   atomic-search-box::part(clear-button-wrapper) {     padding-top: 0.75rem;   } </style> ```
+          * Whether to render the search box using a [textarea](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea) element. The resulting component will expand to support multi-line queries. When customizing the dimensions of the textarea element using the `"textarea"` CSS part, it is important to also apply the styling to its container's ::after pseudo-element as well as the `"textarea-spacer"` part. The buttons within the search box are likely to need adjusting as well.  Example: ```css <style>   atomic-search-box::part(textarea),   atomic-search-box::part(textarea-expander)::after,   atomic-search-box::part(textarea-spacer) {     font-size: x-large;   }    atomic-search-box::part(submit-button-wrapper),   atomic-search-box::part(clear-button-wrapper) {     padding-top: 0.75rem;   } </style> ```
          */
         "textarea"?: boolean;
     }
diff --git a/packages/atomic/src/components/common/search-box/search-box.pcss b/packages/atomic/src/components/common/search-box/search-box.pcss
index 3a116acdaa8..de758b8286b 100644
--- a/packages/atomic/src/components/common/search-box/search-box.pcss
+++ b/packages/atomic/src/components/common/search-box/search-box.pcss
@@ -9,7 +9,7 @@
   @apply absolute w-5/6 h-5/6 bg-background rounded-full;
 }
 
-.grow-wrap {
+[part='textarea-expander'] {
   &::after {
     /* Space needed to prevent jumpy behavior */
     content: attr(data-replicated-value) ' ';
diff --git a/packages/atomic/src/components/common/search-box/search-text-area.tsx b/packages/atomic/src/components/common/search-box/search-text-area.tsx
index 7b9a332350a..3c2d5b7919d 100644
--- a/packages/atomic/src/components/common/search-box/search-text-area.tsx
+++ b/packages/atomic/src/components/common/search-box/search-text-area.tsx
@@ -81,7 +81,7 @@ export const SearchTextArea: FunctionalComponent<Props> = ({
   ...defaultInputProps
 }) => (
   <div class="grow flex overflow-hidden">
-    <div class="grow-wrap grow grid overflow-hidden">
+    <div part="textarea-expander" class="grow grid overflow-hidden">
       <textarea
         part="textarea"
         aria-label={ariaLabel}
@@ -119,8 +119,9 @@ export const SearchTextArea: FunctionalComponent<Props> = ({
         }}
         onFocus={(e) => {
           onFocus?.(e);
-          syncTextWithReplica(textAreaRef);
-          expandTextArea(textAreaRef);
+          const target = e.target as HTMLTextAreaElement;
+          syncTextWithReplica(textAreaRef ?? target);
+          expandTextArea(textAreaRef ?? target);
         }}
         autocomplete="off"
         {...(popup && getPopupAttributes(popup))}
diff --git a/packages/atomic/src/components/search/atomic-search-box/atomic-search-box.tsx b/packages/atomic/src/components/search/atomic-search-box/atomic-search-box.tsx
index a52ef778fdd..d7c9638003b 100644
--- a/packages/atomic/src/components/search/atomic-search-box/atomic-search-box.tsx
+++ b/packages/atomic/src/components/search/atomic-search-box/atomic-search-box.tsx
@@ -189,14 +189,14 @@ export class AtomicSearchBox {
   /**
    * Whether to render the search box using a [textarea](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea) element.
    * The resulting component will expand to support multi-line queries.
-   * When customizing the dimensions of the textarea element using the `"textarea"` CSS part, it is important to also apply the styling to its ::after pseudo-element as well as the `"textarea-spacer"` part.
+   * When customizing the dimensions of the textarea element using the `"textarea"` CSS part, it is important to also apply the styling to its container's ::after pseudo-element as well as the `"textarea-spacer"` part.
    * The buttons within the search box are likely to need adjusting as well.
    *
    * Example:
    * ```css
    * <style>
    *   atomic-search-box::part(textarea),
-   *   atomic-search-box::part(textarea)::after,
+   *   atomic-search-box::part(textarea-expander)::after,
    *   atomic-search-box::part(textarea-spacer) {
    *     font-size: x-large;
    *   }